Web Dev

54일차 Study

수오니니 2021. 12. 30. 10:49

<<스터디 주제>>

JavaScript 리뷰 

  • DOM - Element 객체 추가, 삭제, 변경
  • 이벤트처리 - DOM 조작

 

자바 기술면접 대비 리뷰 

  • JVM 구동원리 - 발표자 : PSH

 

<<스터디 내용>>

 

DOM(Document Object Model)

Element 객체 추가

  • document.createElement(nodeName) : Element 객체를 생성하여 반환하는 메소드
  • document.createTextNode(content) : Text 객체(텍스트 노드)를 생성하여 반환하는 메소드
  • Node.appendChild(newNode) : Node 객체(Element 객체)에 마지막 자식 노드 객체로 추가하는 메소드
  • document.body : body 태그를 Element 객체로 표현
  • Node.attributeName : Node 객체(Element 객체)의 프로퍼티는 태그의 속성으로 표현 가능 ⇒ Node.attributeName=value
  • Node.setAttribute(attributeName, attributeValue) : Node 객체(Element 객체)에 태그 속성값을 변경하는 메소드
  • Node.getAttribute(attributeName) : Node 객체(Element 객체)의 태그 속성값을 반환
  • Node.insertBefore(newElt, before) : 기존 Node 객체 전에 새로운 Node 객체를 삽입하는 메소드

Element 객체 수정

  • Node.removeChild(oldNode) : Node 객체(Element 객체)의 자식 Node 객체를 삭제하는 메소드
  • Node.parentElement : Node 객체(Element 객체)의 부모 Node 객체를 저장ㅈ한 프로퍼티
  • Node.parentNode : Node 객체(Element 객체)의 부모 Element 객체를 저장한 프로퍼티

innerHTML

  • Node.firstChild.nodeValue=”신메뉴” : Node 객체(텍스트 노드)의 태그내용 변경
  • Node.replaceChild(newChild, oldChild) : Node 객체(Element 객체)의 기존 자식 Node 객체를 새로운 Node 객체로 변경하는 메소드
  • Node.innerHTML : Node 객체(Element 객체)의 태그내용(HTML 포함)을 저장한 프로퍼티 ⇒ Node 객체의 태그내용을 변경하여 DOM Tree를 좀더 쉽게 추가,삭제,변경 가능

이벤트 처리

태그(Element 객체)에서 발생되는 이벤트는 자바스크립트를 사용하여 이벤트 처리

  1. 태그의 이벤트 속성의 속성값으로 이벤트 처리 명령(자바스크립트) 작성하여 이벤트 처리
  2. Element 객체의 이벤트 관련 요소에 이벤트 처리 함수를 저장하여 이벤트가 발생될 경우 이벤트 처리 함수가 자동 호출되어 이벤트 처리

this *****

이벤트 처리 함수에서 이벤트가 발생된 태그(Element 객체)를 표현하기 위한 키워드

<ul>
		<li>메뉴-1</li>
		<li>메뉴-2</li>
		<li>메뉴-3</li>
	</ul>

<script type="text/javascript">
		document.getElementById("displayDiv").onclick=function() {
		}

		var liList=document.getElementsByTagName("li");

		liList.item(0).onclick=function() {
			//liList.item(0).style="color: orange;";
			this.style="color: orange;";
		}

for(i=0;i<liList.length;i++) {//i 변수에 3이 저장되면 반복문 종료
			liList.item(i).onclick=function() {
				//이벤트 처리 함수는 이벤트가 발생된 후에 호출되어 실행
				// => 반복문 종료 후 이벤트 발생시 이벤트 처리 함수 호출
				// => 이벤트 처리 함수에서는 Element 객체가 없으므로 에러 발생
				//liList.item(i).style="color: orange;";//liList.item(3) >> null
				
				this.style="color: orange;";
			}
		}
</script>

 

이벤트(Event)

기본 이벤트(Default Event)

태그 중에는 태그 속성에 의해 이벤트가 자동 처리되는 태그 존재 - a 태그, form 태그 등


	document.getElementById("btn").onclick=function() {
		location.href="<<a href=https://www.daum.net>https://www.daum.net</a>>";
	}
	
	document.getElementById("naver").onclick=function() {
		event.preventDefault();
	}

Event.preventDefault : 태그(Element) 객체의 기본 이벤트를 제거하는 메소드

이벤트 전달(Event Propagation) 
- API 문서 참고(https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events)

캡처링 단계에서는:

  • 브라우저는 요소의 가장 바깥쪽의 조상 ([](<https://developer.mozilla.org/ko/docs/Web/HTML/Element/html>))이 캡처링 단계에 대해 그것에 등록된 onclick 이벤트 핸들러가 있는지를 확인하기 위해 검사하고, 만약 그렇다면 실행합니다.
  • 그리고서 <html> 내부에 있는 다음 요소로 이동하고 같은 것을 하고, 그리고서 그 다음 요소로 이동하고, 실제로 선택된 요소에 닿을 때까지 계속합니다.

버블링 단계에서는, 정확히 반대의 일이 일어납니다:

  • 브라우저는 선택된 요소가 버블링 단계에 대해 그것에 등록된 onclick 이벤트 핸들러를 가지고 있는지 확인하기 위해 검사하고, 만약 그렇다면 실행합니다.
  • 그리고서 그것은 바로 다음의 조상 요소로 이동하고 같은 일을 하고, 그리고서 그 다음 요소로 이동하고, <html> 요소에 닿을 때까지 계속합니다.

현대의 브라우저들은 기본으로 모든 이벤트 핸들러가 버블링으로 등록되어 있음!

 

이벤트 처리 함수 등록

Element.addEventListener(type, callback[, capture])

: Element 객체에서 발생된 이벤트에 대한 이벤트 처리함수를 등록하는 메소드 ⇒ Element 객체에서 발생된 이벤트에 대해 다수의 이벤트 처리 함수 등록 가능

<button type="button" onclick="eventHandleOne(); eventHandleTwo();">이벤트 버튼-1</button>
<button type="button" id="btn">이벤트 버튼-2</button>
<script type="text/javascript">
document.getElementById("btn").addEventListener("click", function() {
		alert("첫번째 이벤트 처리 함수의 명령 실행");	
	}, false);
</script>

이벤트(Event) - DOM 조작

DHTML(Dynamic HTML) : 태그에서 이벤트가 발생될 경우 Element 객체를 조작하여 동적인 페이지 제공

<button type="button" id="addBtn">아이템 추가</button>
	<div id="itemListDiv"></div>
	
	<script type="text/javascript">
		var count=0;
		
		document.getElementById("addBtn").onclick=function() {
			count++;
			
			var newItem=document.createElement("div");//<div></div>
			newItem.setAttribute("id", "item_"+count);//<div id="item_XXX"></div>
			var html="아이템["+count+"]&nbsp;&nbsp;";
			html+="<button type='button' onclick='removeItem("+count+")'>삭제</button>";
			newItem.innerHTML=html;//새로운 Element 객체의 태그내용 변경
			
			//Element 객체에 새로운 Element 객체를 마지막 자식으로 추가
			document.getElementById("itemListDiv").appendChild(newItem);
		}
		
		function removeItem(cnt) {
			//alert(cnt);
			
			var removeElement=document.getElementById("item_"+cnt);
			document.getElementById("itemListDiv").removeChild(removeElement);
		}
	</script>

Form Event - 입력페이지

form 태그 : submit 이벤트가 발생되면 웹프로그램을 요청하여 사용자 입력값을 전달하는 태그

<body>
<form action="46_form_action.html" method="post" name="loginForm">

<script type="text/javascript">
loginForm.action="46_form_action.html";
loginForm.method="post";
loginForm.submit();
</script>

 

JVM 구동원리

'Web Dev' 카테고리의 다른 글

56일차 Study  (1) 2021.12.31
55일차 Study  (0) 2021.12.31
53일차 Study  (0) 2021.12.29
52일차 Study  (1) 2021.12.27
주말 개인 Study  (2) 2021.12.25

'Web Dev'의 다른글

  • 현재글54일차 Study

관련글

티스토리툴바