[7/17] 자바스크립트 기초4

📌remove엘리먼트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>dom - element객체의 제거</h1>
	<hr>
	<p>엘리먼트 -1 </p>
	<p id = "p2">엘리먼트 -2 </p>
	<p>엘리먼트 -3 </p>
	
	<script type="text/javascript">
	var p2E = document.getElementById("p2");//객체 반환
	
	//Element.removeChild(Element) : 엘리먼트 객체의 자식 엘리먼트 객체를 삭제하는 메소드
	document.body.removeChild(p2E);
	
	//Element.parentChild() : 엘리먼트 객체의 부모 엘리먼트 객체를 저장한 속성
	p2E.parentElement.removeChild(p2E);
	
	</script>

</body>
</html>

📌DOM - innerHTML

appendChild보다 많이 갈아엎으려면 innerHTML을 더 많이 쓴다
안에 자식들을 싹 바꿔줄 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>DOM(Document Object Model) - innerHTML</h1>
	<hr>
	<ul>
		<li>메뉴-1</li>
		<li>메뉴-2</li>
		<li>메뉴-3</li>
	</ul>
	<ul>
		<li>메뉴-4</li>
		<li>메뉴-5</li>
		<li>메뉴-6</li>
	</ul>
	<hr>
	<div id="div"></div>
	
	<script type="text/javascript">
	var ulList=document.getElementsByTagName("ul");
	var liList=ulList.item(0).getElementsByTagName("li");
	var liE=liList.item(1);
	
	//liE.firstChild.nodeValue="신메뉴";
	
	var newTN=document.createTextNode("신메뉴");
	//Element.replaceChild(newChild, oldChild) : 기존 자식 Element 
	//객체(Text 객체)를 새로운 Element 객체(Text 객체)로 변경하는 메소드
	liE.replaceChild(newTN, liE.firstChild);
	
	/*
	var pE=document.createElement("p");//<p></p>
	var pTN=document.createTextNode("p 태그의 내용");
	pE.appendChild(pTN);//<p>p 태그의 내용</p>
	var divE=document.getElementById("div");
	divE.appendChild(pE);
	*/
	
	var divE=document.getElementById("div");
	//Element.innerHTML : Element 객체의 태그내용(HTML 태그 포함)를 저장한 속성
	// => 속성값을 변경하면 태그 내용(HTML 포함) 변경 
	divE.innerHTML="<p>p 태그의 내용</p>";
	</script>
</body>
</html>

📌DOM - clock

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

#displayDiv {
	width : 600px;
	margin : 0 auto;
	padding : 30px 0;
	font-size : 2em;
	font-weight: bold;
	text-align: center;
	border : 2px solid black;
}
</style>

</head>
<body>
	<h1>DOM(Document Object Model) - clock</h1>
	<hr>
	<div id = "displayDiv"> 2020년 07월 17일 </div>
	
	<script type="text/javascript">
	var dispalyClock = function() {
		var now = new Date();
		var printNow = now.getFullYear() + " 년 " + now.getMonth() + " 월 " + now.getDate() + " 일 " + now.getHours() + " 시" + 
						now.getMinutes() + " 분 " + now.getSeconds() + " 초";
		
		var displayDiv = document.getElementById("displayDiv");
		displayDiv.innerHTML = printNow;
	}
	
	dispalyClock();
	
	setInterval(function() {
		dispalyClock();
	 }, 1000);
	</script>

</body>
</html>

📌eventhandler

2가지 방법 존재

1. html을 이용해서 이벤트

function eventHandler() {
alert("버튼1을 눌렀습니다.")
}

2. 자바스크립트만 이용해서 이벤트

document.getElementById("btn").onclick = function() {//클릭이 되면 함수를 실행해달라
alert("버튼2을 눌렀습니다.")
};

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>이벤트 - eventHandler</h1>
	<hr>
	<p>태그에서 발생되는 이벤트는 자바스크립트를 이용하여 이벤트 처리함 </p>
	<p>이벤트 처리 방법 - 1 : 태그의 이벤트 속성의 속성값으로 이벤트를 처리하기 위한 이벤트 함수 호출 </p>
	<p>이벤트 처리 방법 - 2 : element객체의 이벤트 속성에 이벤트 핸들러 함수를 등록하여 이벤트 처리 </p>
	<hr>
	<button type = "button" onclick="eventHandler()">버튼 -1 을 눌러보세요</button>
	<button type = "button" id = "btn">버튼 -2 을 눌러보세요</button>
	
	<script type="text/javascript">
	//html을 이용해서 이벤트
	function eventHandler() {
		alert("버튼1을 눌렀습니다.")
	}
	
	//자바스크립트만 사용해서 이벤트를 걸어주는 방법
	document.getElementById("btn").onclick = function() {//클릭이 되면 함수를 실행해달라
		alert("버튼2을 눌렀습니다.")
	};
	</script>
	

</body>
</html>

📌this를 사용하여 이벤트핸들러

객체에서도 중요하고, 객체가 가지고 있는 속성이나 메소드에 접근할 수 있다.
이벤트에서 이벤트가 발생하는 태그를 표현할 때에도 쓰인다.
즉, 객체 자신을 의미한다.

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

<style type="text/css">
#displayDiv {
	border : 1px solid red;
}
</style>
</head>
<body>
	<h1>이벤트 - eventHandler</h1>
	<hr>
	<p>this : 이벤트 핸들러 함수에서 이벤트가 발생된 element객체를 표현하기위해서 사용(명확히 구분하기 위해서) </p>
	<hr>
	<ul>
		<li> 메뉴 1 </li>
		<li> 메뉴 2 </li>
		<li> 메뉴 3 </li>
	</ul>
	<div id = "displayDiv">이벤트 처리</div>
	
	<script type="text/javascript">
	document.getElementById("displayDiv").onclick = function() {
		//document.getElementById("displayDiv").style = "color : green";//누르면 글자색깔을 초록색으로 바꿔라
		this.style = "color : green";
	}
	
	//노드리스트
	var lilist = document.getElementsByTagName("li");
	
	/*lilist.item(0).onclick = function() {
		//lilist.item(0).style = "color : orange";
		this.style = "color : pink";
	}
	
	lilist.item(1).onclick = function() {
		//lilist.item(0).style = "color : orange";
		this.style = "color : blue";
	}
	
	lilist.item(2).onclick = function() {
		//lilist.item(0).style = "color : orange";
		this.style = "color : magenta";
	}*/
	
	/*
	for(var i = 0; i < lilist.length; i++){
		//이벤트 핸들러 함수의 명령은 이벤트가 발생된 후 실행 
		//실제로는 반복문 종료 후 이벤트 발생시 핸들러 함수명령이 실행된다
		//이벤트 핸들러 함수의 엘리먼트가 존재하지 않아 오류
		lilist.item(i).onclick = function() { //lilist.item() 이 null이기 때문에 오류가 발생한다 => 이벤트가 발생해야지만 실행이 되는데 
			//for문을 다 돌고 나와야 실행이된다.
			//alert(i); //값이 3이 출력이된다 = 3번째 엘리먼트는 없음(0,1,2만존재)
			lilist.item(i).style = "color : orange";
		}
	}
	*/
	//즉, 이벤트 핸들러는 나중에 실행되기 때문에 일어나는 오류들이다!!!
	
	for(var i = 0; i < lilist.length; i++){
		lilist.item(i).onclick = function() {  
			this.style = "color : orange";//this를 사용하면 에러가 나지 않는다
		}
	}
	
	
	
	
	
	</script>

</body>
</html>

📌default_event메소드

태그들에게는 이벤트핸들러가 등록되지 않아도 이벤트가 실행되는것같은 기능들이 있다. 이를 기본이벤트 라고 한다.

submit기능을 제거할때 주로 쓴다.
기본이벤트를 제거하는 메소드도 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
#btn {
	width: 50px;
	padding: 10px;
	border: 1px solid black;
	text-align: center;
	background: silver;
	box-shadow: 3px 3px 2px #333;
	cursor: pointer;
}
</style>
</head>
<body>
	<h1>이벤트(Event) - Default Event</h1>
	<hr>
	<p>태그 중에는 속성에 의해 이벤트 핸들러가 자동 등록된 태그 존재
	- 태그의 기본 이벤트</p>
	<hr>
	<div id="btn">다음</div>
	<!-- a태그는 href속성값으로 URL주소를 설정하면 태그 내용을 클릭한 경우 설정된 URL주소로 브라우저의 주소영역을 변경하여 요청 -->
	<div><a href = "https://naver.com" id = "naver">네이버</a></div>
	
	<script type="text/javascript">
	document.getElementById("btn").onclick=function() {
		location.href="https://www.daum.net";
	}	
	
	document.getElementById("naver").onclick = function() {
		//event객체 : 이벤트 관련 속성과 메소드를 제공하는 객체
		//=> event.preventDefault() : 태그의 기본 이벤트를 제거하는 메소드
		event.preventDefault();
	}
	</script>
</body>
</html>

📌이벤트 전달

두가지 방법이 존재

1.버블링(Bubblinf) : 부모태그에서 발생된 이벤트가 자식태그에 전달되는 것

2.캡처링(Capturing) : 부모태그에서 발생된 이벤트가 자식태그에 전달되는 것 (요즘 많이 쓴다)

기본이벤트를 전달해 줄 수 도 있지만, 이벤트 전달을 막아줄 수도 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
	border: 1px solid black;
	padding : 30px;
	text-align: center;
}
#one {background : red}
#two {background : blue}
#three {background: green}

</style>
</head>
<body>
	<h1>이벤트(Event) - 이벤트 전달(event propagation)</h1>
	<hr>
	<p>태그에서 발생된 이벤트 다른 태그로 전달 - 버블링 또는 캐쳐링 전달방법이 존재 </p>
	<p>버블링(Bubbling) :  부모태그에서 발생된 이벤트가 자식태그에 전달되는 것 </p> 
	<p>캡쳐링 : 자식태그에서 발생된 이벤트가 부모태그에 전달되는 것 => 요새 기본 이벤트 전달 방법~ 원하는 이벤트 핸들러가 동작되지 않는 경우가 있으므로 중지메소드를 써 주어야한다</p>
	<hr>
	
	<div id = "one">
		<div id = "two">
			<div id = "three">
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
	document.getElementById("one").onclick = function() {
		location.href = "https://www.daum.net";//1. 다음을 전달해주고
				
		//event.stopPropagation() : 이벤트의 전달을 중지시켜주는 메소드
		event.stopPropagation();//2.이벤트 전달을 이제 더이상 멈춰주세요 라는뜻!
	}
	document.getElementById("two").onclick = function() {
		location.href = "https://www.naver.com";
		event.stopPropagation();
	}
	document.getElementById("three").onclick = function() {
		location.href = "https://www.google.com";
		event.stopPropagation();
	}
	</script>
	
</body>
</html>

📌이벤트 리스너

두가지의 방법이 있다.

1. 태그의 이벤트 속성값으로 이벤트 핸들러 함수를 호출
: 다수의 이벤트 핸들러 함수호출이 가능하다

<button type = "button" onclick= "eventHandler1(); eventHandler2();">

2. 엘리먼트 객체의 이벤트 속성에 이벤트 핸들러 함수를 등록
: 이벤트 속성에는 이벤트 핸들러가 하나만 등록이 가능하다

<button type = "button" id = "btn">이벤트 버튼 - 2</button>

document.getElementById("btn").onClick = function() { //기능 };

but, addEventListener를 사용하게 되면 하나의 이벤트에 다수의 이벤트 핸들러 등록이 가능해진다

3. addEventListener를 이용

document.getElementById("btn").addEventListener("click", function() {
alert("이벤트 핸들러 함수의 명령 실행-1");
}, false); //false : 이벤트를 처리하지 않겠다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>이벤트(Event) - 이벤트 리스너(Event Listener)</h1>
	<hr>
	<!-- 태그의 이벤트 속성값으로 이벤트 핸들러 함수를 호출 -->
	<!-- 다수의 이벤트 핸들러 함수 호출이 가능하다 -->
	<button type = "button" onclick= "eventHandler1(); eventHandler2();">이벤트 버튼 - 1</button>
	
	<!--  -->
	<button type = "button" id = "btn">이벤트 버튼 - 2</button>
	
	<script type="text/javascript">
	function eventHandler1() {
		alert("이벤트 핸들러 함수의 명령 실행-1");
	}
	function eventHandler2() {
		alert("이벤트 핸들러 함수의 명령 실행-2");
	}
	
	/*
	//Element 객체의 이벤트 속성에 이벤트 핸들러 함수 등록
	// => 이벤트 속성에는 이벤트 핸들러가 하나만 등록 가능
	document.getElementById("btn").onclick=function() {
		alert("이벤트 핸들러 함수의 명령 실행-1");
	}
	
	document.getElementById("btn").onclick=function() {
		alert("이벤트 핸들러 함수의 명령 실행-2");
	}
	*/
	
	//Element.addEventListener(type, callback[, capture]) : Element 객체에서
	//발생된 이벤트에 대한 이벤트 핸들러를 등록하는 메소드
	// => type : 이벤트의 종류, callback : 이벤트 핸들러, capture : 캡쳐링 유무
	//=>하나의 이벤트에 다수의 이벤트핸들러 등록이 가능해진다
	document.getElementById("btn").addEventListener("click", function() {
		alert("이벤트 핸들러 함수의 명령 실행-1");
	}, false); //false : 이벤트를 처리하지 않겠다.

	document.getElementById("btn").addEventListener("click", function() {
		alert("이벤트 핸들러 함수의 명령 실행-2");
	});
	
	</script>
</body>
</html>

📌이벤트에 의한 DOM조작★ => DHTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
#itemList div { margin: 5px; }
</style>
</head>
<body>
	<h1>이벤트에 의한 DOM 조작</h1>
	<hr>
	<p>DHTML(Dynamic HTML) : 태그에서 이벤트가 발생될 경우 DOM 관련 
	객체를 조작하여 동적인 페이지 구현</p>
	<hr>
	<button type="button" id="addBtn">아이템 추가</button>
	<div id="itemList"></div>
	
	<script type="text/javascript">
	var count=0;
	
	document.getElementById("addBtn").onclick=function() {
		var newItem=document.createElement("div");//<div></div>
		
		count++;
		newItem.setAttribute("id", "item_"+count);//<div id="item_XXX"></div>
		
		var html="아이템["+count+"]";
		html += " <button type = 'button' onclick = 'removeItem("+count+")'>제거</button>"
		
		newItem.innerHTML=html;//<div id="item_XXX">아이템[XXX]</div>
		
		document.getElementById("itemList").appendChild(newItem);
	}
	
	function removeItem(cnt){
		var oldItem = document.getElementById("item_"+ cnt);
		document.getElementById("itemList").removeChild(oldItem);
	}
	</script>
</body>
</html>

📌폼이벤트

: 웹프로그램을 요청해 사용자 입력값을 전달하는 태그이다. 단, 보내줄때 유효성검사를 한 후 전달해주는것이 좋다

왜냐하면 서버측에서 검사하게 되면, 사용자가 많아지면 많아질수록 서버의 부담이 커지기 때문이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>Form Event</h1>
	<hr>
	<p>form 태그 : 웹프로그램을 요청하여 사용자 입력값을 전달하는 태그</p>
	<p>자바스크립트를 이용하여 사용자 입력값 검증 후 전달 기능 구현</p>
	<hr>
	
	<!-- 자바스크립트를 이용하여 form 태그의 속성 구현 가능 -->
	<form name="loginForm">
	<table>
		<tr>
			<td>아이디</td>
			<td><input type="text" name="id"></td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td><input type="password" name="passwd"></td>
		</tr>
		<tr>
			<td colspan="2">
				<!-- 태그의 기본 이벤트로 전달 기능 구현 -->
				<!-- => 입력값에 대한 검증 불가능 -->
				<!-- <button type="submit">로그인</button> -->
				
				<!-- 자바스크립트로 이벤트 핸들러 등록 - 전달 기능 구현 -->
				<!-- => 입력값에 대한 검증 가능 -->
				<button type="button" id="loginBtn">로그인</button>
			</td>
		</tr>
	</table>
	</form>
	
	<script type="text/javascript">
	//form 태그와 입력태그는 name 속성값으로 Element 객체 표현 가능
	// => DOM 관련 객체는 document 객체 생략 가능
	//alert(document.loginForm);//[object HTMLFormElement]
	//alert(loginForm.id);//[object HTMLInputElement]
	
	//InputElement.focus() : 입력 Element 객체에 입력촛점을 위치 시키는 메소드
	loginForm.id.focus();
	
	//[로그인] 버튼을 클릭한 경우 호출되는 이벤트 핸들러 함수 등록
	// => 입력값에 대한 검증 처리 후 전달 기능 구현
	document.getElementById("loginBtn").onclick=function() {
		//입력값 유무 검사
		//InputElement.value : 입력태그의 입력값을 저장한 속성
		if(loginForm.id.value=="") {//입력값이 없는 경우
			alert("아이디를 반드시 입력해 주세요.");
			loginForm.id.focus();
			return;
		}
	
		//입력값에 대한 입력형식 검사 - 정규표현식 
		//자바스트립트는 정규표현식을 / / 기호 안에 표현 - RegExp 객체
		var idReg=/^[a-zA-Z]\w{5,19}$/g;
		
		//RegExp.test(input) : 객체에 정규표현식과 입력값을 비교하여 
		//동일한 형식인 경우 true 반환하는 메소드
		if(!idReg.test(loginForm.id.value)) {
			alert("아이디를 형식에 맞게 입력해 주세요.");
			//loginForm.id.value="";//입력태그 초기화
			loginForm.id.focus();
			return;
		}
	
		if(loginForm.passwd.value=="") {
			alert("비밀번호를 반드시 입력해 주세요.");
			loginForm.passwd.focus();
			return;
		}
	
		//FormElement.action : form 태그의 action 속성과 동일한 객체 속성
		// => Element.setAttribute(name,value) 사용 가능
		loginForm.action="";//요청 웹프로그램 설정
		//FormElement.method : form 태그의 method 속성과 동일한 객체 속성
		loginForm.method="post";//요청방식 설정
		
		//FormElement.submit() : 전달 기능을 구현한 메소드
		loginForm.submit();	
	}
	</script>
</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'💻 수업정리 (2020) > JavaScript' 카테고리의 다른 글

[7/21] jQuery (0)	2020.07.21
[7/20] 자바스크립트 last (0)	2020.07.20
[7/16] 자바스크립트 기초 3 (0)	2020.07.16
[7/15] 자바스크립트 기초2 (0)	2020.07.15
[7/14] 자바스크립트 (0)	2020.07.14