[JavaScript] DOM - 내장함수, 유효성 검사

자바스크립트 내장 함수
- 자바스크립트에서 자체적으로 제공해 주는 함수.
- setInterval() : 일정한 시간마다 주기적으로 특정한 함수를 호출.

반드시 개발자가 종료(clearInterval())를 시켜주어야 함.
형식) setInterval(호출할 함수 이름, 시간(ms));

내장함수 setInterval()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	let id;   // 전역 변수
	
	function change_go() {
		id = setInterval(flashText, 1000);
	}

	function flashText() {
		let target = document.getElementById("target");
		
		target.style.color = 
		(target.style.color == "red") ? "blue" : "red";
	}

	function stop_go() {
		clearInterval(id);
	}


</script>
</head>
<body>

	<div id="target">
		<p>여기는 텍스트 영역입니다........</p>
	</div>
	
	<button onclick="change_go()">시작</button>
	<button onclick="stop_go()">종료</button>
	
</body>
</html>

시작을 누르면 1초 단위로 빨간색과 파란색이 계속 왔다갔다 한다. 종료 버튼을 누르면 종료 된다.

유효성 검사

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>유효성 검사</title>
<script type="text/javascript">

	function check() {
		// 아이디 입력창 입력 여부
		/* if(document.getElementById("id").value == "") {
			alert("아이디를 입력하세요...");
			document.getElementById("id").focus();
			return false;  // 데이터 전송이 차단됨.
		} */
		if(f.id.value == "") {
			alert("아이디를 입력하세요...");
			f.id.focus();
			return false;
		}
		
		// 비밀번호 입력창 입력 여부
		if(document.getElementById("pwd").value == "") {
			alert("비밀번호를 입력하세요...");
			document.getElementById("pwd").focus();
			return false;  // 데이터 전송이 차단됨.
		}
		
		// 이름 입력창 입력 여부
		if(document.getElementById("name").value == "") {
			alert("이름을 입력하세요...");
			document.getElementById("name").focus();
			return false;  // 데이터 전송이 차단됨.
		}
		
		// 주소 입력창 입력 여부
		if(document.getElementById("addr").value == "") {
			alert("주소를 입력하세요...");
			document.getElementById("addr").focus();
			return false;  // 데이터 전송이 차단됨.
		}
	}

</script>
</head>
<body>

	<div align="center">
	   <form name="f" action="http://www.google.com"
	         onsubmit="return check()">
	      <table border="1" cellspacing="0">
	         <tr>
	            <th>아이디</th>
	         	<td> <input type="text" name="id" id="id"> </td>
	         </tr>
	         
	         <tr>
	         	<th>비밀번호</th>
	         	<td> <input type="password" name="pwd" id="pwd"> </td>
	         </tr>
	         
	         <tr>
	         	<th>이  름</th>
	         	<td> <input type="text" name="name" id="name"> </td>
	         </tr>
	         
	         <tr>
	         	<th>주  소</th>
	         	<td> <input type="text" name="addr" id="addr"> </td>
	         </tr>
	         
	         <tr>
	         	<td colspan="2" align="center">
	         	   <input type="submit" value="가입">
	         	          &nbsp;&nbsp;&nbsp;
	         	   <input type="reset" value="취소">
	         	</td>
	         </tr>
	      </table>
	   </form>
	</div>
	
</body>
</html>

저작자표시 (새창열림)

'Front > JavaScript' 카테고리의 다른 글

[JavaScript] NodeList(노드 리스트) 관련 / 노드의 부모, 자식 / 노드 생성, 수정, 삭제 / 불특정 노드 접근하기 (0)	2021.04.27
[JavaScript] DOM(Document Object Model) (0)	2021.04.26
[JavaScript] BOM(Browser Object Model) (0)	2021.04.26
[JavaScript] 객체(Object), 내장 객체(Date, Math) (0)	2021.04.26
[JavaScript] 함수(Function) (0)	2021.04.26