본문 바로가기
SK 행복성장캠퍼스/Java Script

2020-09-21,JavaScript_3일차 (Event, DOM)

by NickNuma 2020. 10. 5.

Event
시스템이 발생시킨 event 또는 사용자가 입력장치로 발생시킨 event
이벤트 발생 -->  javascript 함수로 이벤트에 대한 기능 구현
Event와 Event 기능 함수 의 연결 ---> Event Handler ( ex> onclick, onkeyup, .....)

Event Handler 설정 방법 2가지
DOM Level 1, Level 2

Event Object
event.preventDefault()   :   기본적인 html의 동작처리를 비활성화
event.stopPropagation()   :   중첩된 태그의 이벤트 전파를 방지. (자식 노드 이벤트 실행시, 부모 노드의 이벤트 실행을 막음)

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

	/*
		가. 이벤트(event) 처리
			1) 이벤트 (event)
				=> 사용자가 발생시킨 사건 또는 시스템이 발생시킨 사건(onload)	==> 트리 구조 완성시 발생
				예> 	마우스 (버튼 클릭, 더블 클릭, 마우스 over/leave,....)
					키보드 (keyup, keydown, ...)
					
				==> 이벤트 종류
					click, mouseover, mouseleave, doubleclcick,
					change, ...
					keyup, keydown, ...
					
			2) 이벤트가 발생되었을 때 처리
				==> 함수로 구현
			
			3) 이벤트와 이벤트처리함수 연결 ==> event handler
				==> 이벤트 핸들러의 이름 : on이벤트명
				예> onclick, onkeyup, onmouseover
				
		나. 이벤트 핸들러 설정 방법 2가지
			==> 이벤트 발생 위젯(이벤트 소스)에 설정
			1) DOM Level 0:
				(1) 고전 방식
					
				
				(2) 인라인 방식
					==> 이벤트가 발생된 태그에 직접 설정하는 방식
					예> <button onclick ="함수명()">OK</button>
				
				
			2) DOM Level 2:
				
		다. 이벤트 객체
			==> 이벤트 처리함수 내에서 event 키워드로 이벤트 객체를 참조할 수 있다.
			==> 주요한 2가지 함수 정리 필요
				(1) event.preventDefault()
					==> 기본적인 html 동작처리를 비활성
						목적 => 유효성 검사
						예> 	링크
							form태그의 submit
					
				(2)	event.stopPropagation()
					==> 태그가 중첩된 경우 이벤트 전파방지
						자식 노드의 이벤트만 실행하고 싶을 때, 부모 노드의 이벤트 실행을 방지한다.

			
	*/
</script>

</head>
<body>

</body>
</html>

 

DOM Level 0
인라인 방식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM Level 0 - 인라인</title>
<script type="text/javascript">
	function onload_fun(){
		console.log("onload_fun");
	}

	function fun1(){
		console.log("fun1");
	}
	
	function fun2(){
		console.log("fun2");
	}
	
	
</script>

</head>
<body onload="onload_fun()">	<!-- onload => 시스템에서 html의 트리 구조가 완성되었음을 알려줌  -->
<h2>DOM Level 0의 인라인 방식</h2>
<button onclick ="fun1()">OK</button>
<select onchange="fun1()">
	<option>A1</option>
	<option>A2</option>
	<option>A3</option>	
</select><br>

아이디 : <input type="text" name = "userId" onfocus = "fun1()" onblur = "fun2()"><br> <!-- 이벤트  onfocus (커서가 있을때), onblur (커서가 밖으로 나갔을 때) -->
비밀번호 : <input type="password" name = "passwd"><br>
사과 <input type="checkbox" name ="apple" onclick = "fun1()"><br>
배 <input type="checkbox" name ="peer" onchange = "fun1()"><br>
<img alt="이미지가 없습니다." src="../images/apple.jpg" width = "200" height = "200" onmouseover="fun1()" onmouseout ="fun2()">
																			<!-- 마우스가 위에 있으면, 사라지면 이벤트  -->
<br>이메일:<input type="text" name = "email" onkeyup="fun1()">

</body>
</html>

 

DOM Level 0
인라인 방식 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM Level 0 - 인라인</title>
<script type="text/javascript">
	function fun1(n){
		console.log("fun1", n, event);
	}
	function fun2(n, n2){
		console.log("fun2", n, n2, event);
	}
	function fun3(n, n2, n3 = 100){	//default 파라미터
		console.log("fun3", n, n2, n3);
	}
	function fun4(...n){	//Rest Parameter(...) -> 배열로
		console.log("fun4", n);
	}
	function fun5(){
		var event_name = event.target.innerHTML;
		console.log("fun5", event, event_name );	//ok5_이벤트객체
	}
/* 	innerHTML
	innerText
	outerText
	outerHTML */
	
</script>

</head>
<body>
<h2>DOM Level 0의 인라인 방식</h2>
<button onclick ="fun1(10)">OK</button>
<button onclick ="fun2(10, '홍길동')">OK2</button>
<button onclick ="fun3(20, '홍길동2')">OK3</button>
<button onclick ="fun4(30, '홍길동3', 3000)">OK4</button>
<button onclick ="fun5()">OK5_이벤트객체</button>
	


</body>
</html>

 

DOM Level 0 - preventDefault   :  기본적인 html의 동작처리를 비활성화

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

	function fun1(){
		alert("fun1")
		console.log("fun1", event);
		
		if(false){	// true, false 바꿔가면서 실행해보기
			//userid와 passwd값을 모두 입력한 경우
		}else{
		alert("아이디와 비밀번호 입력 필수");
		event.preventDefault();	//	서브밋(submit) 방지
		}
	}
	
	function fun2(){
		if(false){	// true, false 바꿔가면서 실행해보기
			//userid와 passwd값을 모두 입력한 경우
			return true;
		}else{
			return false;	//입력하지 않은 경우
		}
		
	}

</script>


</head>
<body>
<h1>event.preventDefault()실습1</h1>
<form action ="sample02_DOM_0_event1.html" onsubmit = "fun1()">
	아이디:<input type="text" name = "userID"><br>
	비밀번호:<input type="password" name = "passWD"><br>
	<input type="submit" value = "로그인1">
	<button>로그인2</button>
	<input type="button" value = "로그인3">	<!-- submit이 이뤄지지 않음  -->
</form>


<h1>return false실습2</h1>
<form action ="sample02_DOM_0_event1.html" onsubmit = "return fun2()">
	아이디:<input type="text" name = "userID"><br>
	비밀번호:<input type="password" name = "passWD"><br>
	<input type="submit" value = "로그인1">
	<button>로그인2</button>
	<input type="button" value = "로그인3">	<!-- submit이 이뤄지지 않음  -->
		
</form>

</body>
</html>

event.preventDefault()로 submit 방지 성공

 

DOM Level 0 - stopPropagation
중첩된 태그의 이벤트 전파를 방지. (자식 노드 이벤트 실행시, 부모 노드의 이벤트 실행을 막음)

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

	function fun1(){
		console.log("a");		
	}
	
	function fun2(){
		console.log("b");
		event.stopPropagation();	//	이벤트가 동시 발생하는 것을 방지 (b가 a의 부모 레벨이라 그런가 b누르면 a까지 반응했는데 그걸 방지함)
	}

</script>


</head>
<body>
	<div style="background-color:red" onclick ="fun1()">
		a
		<div style="background-color:orange" onclick = "fun2()">
			b
		</div>
	</div>

</body>
</html>

stopPropagation()을 이용하여 a의 자식 레벨의 b를 클릭하여 fun2() 함수만을 호출했다.

 

DOM (Document Object Model : 문서 객체 모델)

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

</script>

</head>
<body>
	
	<!--
	DOM(Document Object Model : 문서 객체 모델)
	==> 브라우저가 html 문서를 랜더링하기 위해서 
		1) 모든 태그 및 속성을 파악
		2) 파악한 태그 및 속성에 맞는 클래스(객체)를 찾는다.
			예> <input> ==> Input 객체
				<button> ==> Button 객체
				...
		3) 파악한 태그 및 속성을 모두 인스턴스화 (객체 생성)	==> 메모리에 올린다.
		4) 메모리에 올린 후 트리구조로 만든다. ( DOM 트리 )
		5) 이후, 브라우저 화면에 보여진다. (브라우저 랜더링)
		
		6) 자바스크립트로 DOM트리에 접근해서 여러가지 작업을 할 수 있다. (*****) 
			(자바스크립트에서 html 태그에 접근할 수 있다.)
		이유> 태그(속성)추가, 삭제, 수정, ... 해서 동적화면 처리 가능하다.
		
		접근방법 2가지
			1) document.getElemetxxxx()
			
			2) 	document.querySelector("css선택자")
				document.querySelectorAll("css선택자")
					1), 2) => 결과 값이 단일값인지 다중값(배열)인지 확인해야한다.
							  값 = 선택자 = 태그 (객체) (모든 태그는 클래스, 인스턴스(객체))
		-->
		
	
</body>
</html>

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

 

DOM 접근 = document 객체에서 시작

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


	//	DOM접근은 Document객체를 참조하는
	//	변수인 document로부터 시작한다.
	
	console.log(document);
	console.dir(document);	/* document 정보 확인  */

	var result = document.getElementById("x")	//id가 x인 요소의 값을 얻겠다.
	console.log(result);	/* null */
					// ==> getElementById("x")의 값이 null이 나오는데, 시스템이 아직 x id의 p태그를 읽지 않은 상황이기 때문.
					//		이를 해결하기 위해서 script를 p태그 밑으로 내리던지 아니면 해드에서 사용하려면 onload()를 이용하면된다.
	
</script>

</head>
<body>	
	<p id = "x">Hello</p>	
	
<script type="text/javascript">
	//	DOM접근은 Document객체를 참조하는
	//	변수인 document로부터 시작한다.
	
	console.log(document);
	console.dir(document);

	var result = document.getElementById("x")	//id가 x인 요소의 값을 얻겠다.
	console.log(result);	/* <p id = "x">Hello</p> */	
	
</script>
	
</body>
</html>

 

DOM 접근 - Body에서 onload를 사용하여 html의 트리 구조가 완성됐음을 선언하여 head에서 javascript를 이용하여 코드 구현 가능하게 만듦

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


	//	DOM접근은 Document객체를 참조하는
	//	변수인 document로부터 시작한다.
	
	console.log(document);
	console.dir(document);
	
	function init(){	
		var result = document.getElementById("x")	//id가 x인 요소의 값을 얻겠다.
		console.log(result.innerText);
						// ==> getElementById("x")의 값이 null이 나오는데, 시스템이 아직 x id의 p태그를 읽지 않은 상황이기 때문.
						//		이를 해결하기 위해서 script를 p태그 밑으로 내리던지 아니면 해드에서 사용하려면 onload()를 이용하면된다.
		result.innerText ="world"; //허접하지만 동적처리	
		//result 변수에서 p태그의 id를 이용하여 body의 p태그 정보에 접근하였고 참조값 변수 result의 value에 innerText로 접근하여 값을 변경하여 body의 p태그의 값에도 영향을 끼침
		console.dir(result);
		console.log(result);
	}
	
</script>

</head>
<body onload="init()">	<!-- onload가 없었다면 script를 body에 내려서 코드가 난잡해졌을 텐데, 그것을 방지해줌 : onload  -->
<!-- onload => 시스템에서 html의 트리 구조가 완성되었음을 알려줌  -->
	<p id = "x">Hello</p>	
</body>
</html>

 

DOM 접근
Id로 접근 :  document.getElementById("id")
value 변경  :  .innerText = formatting 없이 해당 요소 변경
                  .innerHTML = spacing, line break, formatting 등의 부가요소도 함께 변경

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

	function value_change(){
		var p = document.getElementById("x");
		//p.innerText = "World";
		p.innerHTML = "<h3>World</h3>";
		/*  .innerHTML : spacing, line break, formatting을 주고 싶을 때*/
	}
	function value_change2(){		
		document.getElementById("x").innerText = "Javascript";
		/* .innerText  :  formatting 없이 해당 요소에만 영향 */
		/* document.getElementById("x").innerHTML = "<h3>Javascript</h3>"; */
	}
	
</script>

</head>
<body>
	<p id = "x">Hello</p>
	<button onclick = "value_change()">값변경</button>	
	<button onclick = "value_change2()">값변경2</button>	
	
</body>
</html>

 

DOM 접근
발생한 event 태그의 요소 값을 가져옴  :  event.target.innerText

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

	console.dir(document);
	
/*  	/// ok클릭하면 p태그의 값이 ok, cancel클릭하면 p태그의 값이 cancel
	function value_change_ok(){
		document.getElementById("x").innerText = "OK"
	} 
	function value_change_cancel(){
		document.getElementById("x").innerText = "Cancel"
	}  */

/*  	/// p태그의 값이 Hello면 p태그를 ok로 아니면 p태그의 값이 cancel
	function value_change(){
		var p = document.getElementid("o");
		if (p == "OK" ){
			document.getElementById("x").innerText = "OK"
		}else{
			document.getElementById("x").innerText = "Cancel";
		}
	}  */
 	
	 function value_change(){		
		var label = event.target.innerText;	 //event 값을 가져옴
		console.log(label);
		document.getElementById("x").innerText = label;  //태그의 id를 이용해 바로 value 변경 
	} 

	
</script>

</head>
<body>
	<p id = "x">Hello</p>
	<button onclick = "value_change()">OK</button>	
	<button onclick = "value_change()">cancel</button>	

</body>
</html>

 

DOM 접근
.getElementsByTagName("태그명")  ->  태그의 요소값들을 배열로 가져옴

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

	function value_print(){
		var result = document.getElementsByTagName("p");
		console.log(result);
		for (var i = 0; i <result.length; i++){
			console.log(result[i].innerText);			
		}
	}
		
</script>

</head>
<body>
	<p>Hello</p><br>	
	<p>World</p><br>
	<button onclick = "value_print()">값 출력</button>
	
</body>
</html>

 

DOM 접속
getElementsByTagName으로 태그내의 요소 값들을 가져오고
for문을 이용해 배열 하나하나의 요소 값을 innerText로 가져온 후 모두 더해서 가격 합을 구하는 실습
(합을 innextText를 이용해 결과값에 대입/반환까지)

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

	function total(){
		var sum = 0;
		var li_list = document.getElementsByTagName("li");
		for (var i = 0; i <li_list.length; i++){
			var price = li_list[i].innerText;
			sum += Number.parseInt(price);			
		}
		document.getElementById("result").innerText = sum;
	}
</script>

</head>
<body>
<ul>
	<li>1000</li>
	<li>3000</li>
	<li>600</li>
	<li>200</li>
</ul>
총합:<div id="result"></div>
<button onclick = "total()">총합구하기</button>
</body>
</html>

 

DOM 접속
getElementsByTagName으로 태그내의 요소 값들을 가져왔던 것을 querySelectorAll로 가져옴
getElementById 역시 querySelector로 변경 (querySelector를 사용하면 id를 #id명으로 가져와야함)

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

	function total(){
		var sum = 0;
		/* var li_list = document.getElementsByTagName("li"); */
		var li_list = document.querySelectorAll("li");
		for (var i = 0; i <li_list.length; i++){
			var price = li_list[i].innerText;
			sum += Number.parseInt(price);			
		}
		/* document.getElementById("result").innerText = sum; */
		document.querySelector("#result").innerText = sum;

	}
		
</script>

</head>
<body>
<ul>
	<li>1000</li>
	<li>3000</li>
	<li>600</li>
	<li>200</li>
</ul>
총합:<div id="result"></div>
<button onclick = "total()">총합구하기</button>

</body>
</html>

 

DOM 접근
checkbox에서 checked된 항목만 가져온 후 총합을 구하는 실습

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

	function total(){
		var checked_price = document.querySelectorAll("input:checked");
		console.log(checked_price);
		var sum = 0;
		for(var p of checked_price){
			//console.log(p.value);
			sum += Number.parseInt(p.value);
		}
		document.querySelector("#result").innerText = sum;
	}
	
</script>

</head>
<body>
1000:<input type="checkbox" name = "price" value ="1000"><br>
500:<input type="checkbox" name = "price" value = "500"><br>
1200:<input type="checkbox" name = "price" value = "1200"><br>
1700:<input type="checkbox" name = "price" value = "1700"><br>
총합:<div id="result"></div>
<button onclick = "total()">총합구하기</button>
	
</body>
</html>

 

DOM 접근
getElementById로 input 태그에 접속하고 .value로 해당 태그의 value값을 가져오는 실습

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

	function id_print(){
		var input = document.getElementById("userid");
		console.log(input.value)
		console.dir(input);	//input태그라 요소가 없고 id만 #userid로 반환
	}
		
</script>

</head>
<body>
아이디 : <input type="text" name = "userid" id = "userid" value ="ccc"><br>
<button onclick = "id_print()">아이디 출력</button>

</body>
</html>

 

DOM 접근

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

    function total(){
    	var price = document.getElementById("price").value;
    	var quantity  = document.getElementById("quantity").value;
    	console.log(price, quantity)
    	var result = Number.parseInt(price.trim()) *  Number.parseInt(quantity.trim())
    	document.getElementById("result").innerText  = result;
    }
</script>	
</head>
<body>
가격:<input type="text" name="price" id="price" value="450"><br>
수량:
<select name="quantity" id="quantity" onchange="total()">
  <option>5</option>
  <option>10</option>
  <option>15</option>
</select><br>
총합:<div id="result"></div>
</body>
</html>

 

DOM 접근

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

    function same_check(){
    	var result = document.getElementById("chk_address");
    	console.dir(result.checked)
    	if(result.checked){
    		document.getElementById("delivery_address").value = 
    			document.getElementById("mem_address").value;
    	}else{
    		document.getElementById("delivery_address").value = "";
    	}
    }
</script>	
</head>
<body>
<h1>배송지 주소</h1>
회원의 주소:<input type="text" name="mem_address" id="mem_address"
              value="서울시 강남구 역삼동 124-96"><br>
배송지 주소와 동일시 체크하시오.
<input type="checkbox" name="chk_address" id="chk_address" onclick="same_check()"><br>
배송지 주소:<input type="text" name="delivery_address" 
              id="delivery_address" value=""><br>

</body>
</html>

 

JSON : JavaScript Object Notation, 자바스크립트 객체 표현법

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

</script>

</head>
<body>
<!--	JSON (Java Script Object Notation: 자바 스크립트 객체 표현)
			1) 배열 표기
				-[값, 값2]
				
			2) 객체 표기 {*****}
				-{key:value, key1:value1}
				-현재 가장 많이 사용되는 데이터 저장 표기법(xml, json, yml)
				-대부분의 Open Data가 JSON 객체 표기법으로 제공된다. 

				-xml,json, yml, csv 등의 표기법은 OS/프로그래밍언어/네트워크 환경에 독립적
					
					xml : 태그 이용
					<person>
						<name>홍길동</name>
						<age>20</age>
					</person>
					
					json :
						{"name":"홍길동", "age":20}
						
					yml:
						name:
							"홍길동"
						age:
							20
							
-->							

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

		//1. json사용 : {"key":"값"};
		var person = {"name":"홍길동", "age":20};
		// 연관배열 : person["키값"], 키값을 변수로 치환가능
		var sss = "name"
		console.log("이름:", person.name, person["name"], person[sss])
		console.log("나이:", person.age, person["age"])

		//2. "json" --> json
		var person = '{"name":"홍길동", "age":20}';
		console.log(person, typeof person);
		console.log("이름:", person.name, person["name"]);
		
		var p_json = JSON.parse(person);	//JSON.parse => 문자열 json으로 변환
		console.log(p_json, typeof p_json);
		console.log("이름:", p_json.name, p_json["name"]);
		
		
		//3. json --> "json"
		var person = {"name":"홍길동", "age":20};
		console.log(person, typeof person);
		console.log("이름:", person.name, person["name"]);
		
		var p_json = JSON.stringify(person);	// json --> 문자열로 변환 
		console.log(p_json, typeof p_json);
		console.log("이름:", p_json.name, p_json["name"]);
		console.dir(JSON);
		
		//4. json 배열
		var arr = [10, 20, 30];
		var s_arr = JSON.stringify(arr);
		var a_json = JSON.parse(s_arr);
		console.log(s_arr, typeof s_arr);
		console.log(a_json, typeof a_json);
		
</script>

</head>
<body> 	

</body>
</html>

 

Ajax (Asynchronous JavaScript and XML)
AJAX is a technique for creating fast and dynamic web pages. 
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.
This means that it is possible to update parts of a web page, without reloading the whole page.

 

반응형
저작자표시 비영리 변경금지

'SK 행복성장캠퍼스 > Java Script' 카테고리의 다른 글

2020-09-21,JavaScript_3일차 (BOM)  (0) 2020.10.04
2020-09-18,JavaScript_2일차(2)  (0) 2020.10.04
2020-09-18,JavaScript_2일차  (0) 2020.09.28
2020-09-17,JavaScript_1일차  (0) 2020.09.27

관련글

댓글

티스토리툴바