HTML5 웹 프로그래밍 입문 (개정판) 10장. 이벤트 처리와 동적 웹문서
목차 10.1 이벤트 처리하기 10.2 폼 다루기 10.3 동적 웹 문서 만들기 10.4 다양한 방법으로 폼 다루기 소스코드 실행 사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. 이벤트 처리와 동적 웹 문서
10.1 이벤트 처리하기 10.1.1 이벤트 처리 개요 10.1.2 이벤트의 종류 10.1.3 이벤트 핸들링 및 이벤트 등록 이벤트 처리와 동적 웹 문서
이벤트 처리 개요 이벤트 이벤트 처리 사용자가 웹 브라우저를 사용하는 중에 발생시키는 키보드, 마우스 등의 입력 이벤트가 입력 되었을때 미리 구현된 자바스크립트 코드를 수행 이벤트의 정의 이벤트 핸들러 이벤트가 발생할때마다 호출되는 자바스크립트 코드 이벤트 등록 (registration) 이벤트와 이벤트 핸들러를 연결시키는 과정
간단한 이벤트 처리 예제 1 2 3 4 5 6 <body> <form> <input type="button" value="Yes" onclick="alert('You pressed Yes');"/> <input type="button" value="No" onclick="alert('You pressed No');"/> </form> </body> 클릭 이벤트에 반응하여 alert() 함수를 호출하는 부분 No 버튼 클릭 Yes 버튼 클릭 이벤트 처리와 동적 웹 문서
이벤트의 종류 마우스 이벤트 키보드 이벤트 이벤트 이름 태그 속성 설명 click onclick 요소를 클릭 dblclick ondblclick 요소를 더블클릭 mousedown onmousedown 커서가 요소 위에 있고 마우스 버튼을 누를때 mousemove onmousemove 마우스 커서를 움직이는 동안 mouseover onmouseover 마우스 커서가 해당 요소 위에 들어갈 때 mouseout onmouseout 마우스 커서가 해당 요소 위를 벗어날 때 mouseup onmouseup 마우스 버튼을 뗄 때 이벤트 이름 태그 속성 설명 keydown onkeydown 키보드를 누를 때 1회 발생 keypress onkeypress 키보드를 타이핑할때, 손을 떼기 전까지 계속 발생한다. keyup onkeyup 키보드를 누른 후 뗄 때.
이벤트의 종류 프레임/객체 이벤트 폼 이벤트 이벤트 이름 태그 속성 설명 abort onabort 이미지가 완전히 로드 되기 전에 정지되었을 때 error onerror 이미지 로드가 정상적으로 이루어지지 않았을 경우 load onload 문서, 프레임, 객체 등이 브라우저에 로드가 완료 될때 resize onresize 문서 창, 문서 뷰의 크기가 변경되었을 때 scroll onscroll 문서 창, 문서 뷰가 스크롤 되었을 경우 unload onunload 윈도우 창, 프레임으로부터 문서가 제거되었을 경우 창을 종료하기 직전에 처리할 사항 있는 경우 유용 이벤트 이름 태그 속성 설명 change onchange <input> 등 폼 요소의 내용이 변경되었을 때 focus onfocus 요소가 포커스 되었을때 (마우스 선택 혹은 이동) blur onblur 요소에서 포커스가 없어질 때 (focus 의 반대) reset onreset 폼이 리셋될 때 select onselect <input> 과 <textarea> 요소에서 텍스트가 선택될 때 submit onsubmit 폼이 실행 될 때
이벤트 핸들링 및 이벤트 등록 이벤트 핸들러(handler) 이벤트 등록 이벤트가 발생시 실행하고자 하는 자바스크립트 함수나 코드 사용자가 입력한 내용이 맞는지 검사하거나 입력한 내용에 따라 웹 문서를 수정하는 등의 작업을 통해 동적 웹 문서를 만든다 이벤트 등록 이벤트의 종류와 이를 처리할 이벤트 핸들러를 연결시키는 작업 두가지 등록 방법 태그 속성에 직접 이벤트 핸들러 기술 혹은 이벤트 함수 호출 객체의 이벤트 속성 값에 이벤트 핸들러 함수 이름을 기술
요소 속성에 이벤트 핸들러 기술 요소의 이벤트 태그 속성에 직접 이벤트 핸들러 기술 이벤트 핸들러: 자바스크립트 코드 혹은 함수 이름 <form action=""> <input id="username" type="text" value="Name of User" onclick="alert('Please type your full name');" /> </form> <form action=""> <input id="username" type="text" value="Name of User" onclick="myEventHandler();" /> </form> <script type="text/javascript"> function myEventHandler() { alert("Please type your full name"); } </script>
DOM 인터페이스를 이용한 이벤트 핸들러 함수 등록 이벤트 핸들러는 반드시 함수 형태로 미리 구현 주의: 객체의 이벤트 속성에 ()없이 함수 이름만 적어야 함 <form action=""> <input id="username" type="text" value="Name of User" /> </form> <script type="text/javascript"> function myEventHandler() { alert("Please type your full name"); } var dom = document.getElementById("username"); dom.onclick = myEventHandler; </script> 이벤트 처리와 동적 웹 문서
setTimeout()을 이용한 예제 setTimeout() 함수와 버튼 click을 이용한 스톱워치 예제 1초마다 start() 함수를 호출하여 시간 값을 주기적으로 증가 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type="text/javascript"> var stopped = false; function start() { dom = document.getElementById("sec"); dom.value = parseInt(dom.value) + 1; if (!stopped) setTimeout(start,1000); } </script> <h2> Stopwatch </h2> <form action=""> <input type="button" value="Start" onclick="stopped=false; setTimeout(start,1000);" /> <input type="button" value="Stop" onclick="stopped=true;" /> <input type="reset"/> <br><br> <input id="sec" type="text" value="0" size="2"/> seconds </form> 이벤트 처리와 동적 웹 문서
10.2 폼 다루기 이벤트 처리와 동적 웹 문서
폼의 <input>요소에 값을 쓴다 폼 다루기와 이벤트 처리 예제 자바스크립트를 이용해 폼의 값을 읽어내거나 계산하여 수정하는 것이 가능 <input>요소를 DOM 인터페이스로 접근하여 value 속성값을 읽거나 저장 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> function add() { var a = document.getElementById("op1").value; var b = document.getElementById("op2").value; document.getElementById("result").value = parseInt(a) + parseInt(b); } </script> <form> <input id="op1" type="text" size="2"/>+ <input id="op2" type="text" size="2"/> <input type="button" value="=" onclick="add();"/> <input id="result" type="text" size="2"/> </form> 폼의 값을 읽어 낸다 클릭 3과 5 입력 폼의 <input>요소에 값을 쓴다 add()함수가 호출됨 이벤트 처리와 동적 웹 문서
폼의 입력 값 읽고 쓰기 자바스크립트를 이용해 폼의 값을 읽거나 수정한다 <input>요소를 DOM 인터페이스로 접근하여 value 속성값을 읽거나 저장 소스코드는 교재 및 웹사이트 참조 http://webclass.me/html5_2e/ch10/formhandling.html 이벤트 처리와 동적 웹 문서
폼의 입력 값 읽고 쓰기 DOM을 통해 <input> 텍스트 박스에 입력한 값을 읽는다 요소 객체의 value라는 속성을 통해 읽거나 수정 <input id="book1" type="text" size="2" value="0" onclick = "this.select();" /> <input id="book1Total" type="text" size="6" value="0" /> ... Book2 ... book3 <td> <input id= "totalNumber" type="text" size=“2" value="0"/> </td> ... <input type="button" value="합계계산" onclick="updateAll();" /> function updateAll() { var n1 = document.getElementById("book1").value; ... var p1 = 25000 * n1; ... document.getElementById("book1Total").value = p1; var totalNumber = parseInt(n1) + parseInt(n2) + parseInt(n3); document.getElementById("totalNumber").value = totalNumber ; }
10.3 동적 웹 문서 만들기 10.3.1 스타일 속성 변경을 통한 동적 문서 만들기 10.3.2 요소의 콘텐츠 변경을 통한 동적 문서 만들기 이벤트 처리와 동적 웹 문서
동적 문서 정의 동적 문서 동적 문서 구현 방식 웹 문서가 브라우저에 처음 표시된 후에 콘텐츠나 스타일 변경 즉시 변경된 값을 바탕으로 화면의 문서를 갱신 웹 문서의 콘텐츠나 스타일을 자바스크립트를 이용해 변경 태그 요소, 태그 속성, 태그 콘텐츠, 요소의 CSS 스타일 등 변경 태그 요소의 화면내 표시 위치 변경, 애니메이션, 색상 및 글씨체 변경, 인터랙티브 사용자 인터페이스 등 포함 동적 문서 구현 방식 웹 문서의 콘텐츠를 변경시키는 방법 CSS 스타일을 변경시키는 방법
스타일 속성 변경을 통한 동적 문서 DOM을 이용하면 CSS 스타일에 접근 가능 보이기/감추기 스타일 속성 변경 예제 화면 표시 여부를 결정 보이기/감추기 스타일 속성 스타일 속성: visibility 속성 값: visible 혹은 hidden hidden으로 설정 되도 웹 문서 내에 요소로는 존재 화면에 표시만 안될 뿐이다 이벤트 처리와 동적 웹 문서
보이기 스타일 속성 변경 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type = "text/javascript"> function toggleVisibility(id) { var dom = document.getElementById(id); if (dom.style.visibility == "visible") dom.style.visibility = "hidden"; else dom.style.visibility = "visible"; } </script> Toggle Visibility: <button onclick = "toggleVisibility('img1');">Image 1</button> <button onclick = "toggleVisibility('img2');">Image 2</button> <button onclick = "toggleVisibility('img3');">Image 3</button> Image2 버튼 클릭 이벤트 처리와 동적 웹 문서
배경색 스타일 속성 변경하기 style.background 속성 접근 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type = "text/javascript"> function changeColor(id, color) { document.getElementById(id).style.background = color; } </script> Outer Box: <button onclick = "changeColor('outerBox', 'red');"> Red </button> <button onclick = "changeColor('outerBox', 'green');"> Green </button> <button onclick = "changeColor('outerBox', 'blue');"> Blue </button> <br /> Inner Box: <button onclick = "changeColor('innerBox', 'red');"> Red </button> <button onclick = "changeColor('innerBox', 'green');"> Green </button> <button onclick = "changeColor('innerBox', 'blue');"> Blue </button> style.background 속성 접근 Green과 Blue 버튼 클릭 이벤트 처리와 동적 웹 문서
위치 스타일 속성 변경 style.left 속성 접근 style.top 속성 접근 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <script type = "text/javascript"> function changePositions() { for(i = 1; i <= 3; i++) { var left = document.getElementById("left" + i).value; var top = document.getElementById("top" + i).value; document.getElementById("img" + i).style.left = left + "px"; document.getElementById("img" + i).style.top = top + "px"; } </script> <form> Image1: Left <input id = "left1" size = "2" type = "text"/> Top <input id = "top1" size = "2" type = "text"/> <br /> Image2: Left <input id = "left2" size = "2" type = "text"/> Top <input id = "top2" size = "2" type = "text"/> <br /> Image3: Left <input id = "left3" size = "2" type = "text"/> Top <input id = "top3" size = "2" type = "text"/> <input type = "button" value = "Move All" onclick = "changePositions();" /> </form> style.left 속성 접근 style.top 속성 접근 이벤트 처리와 동적 웹 문서
마우스 이벤트를 이용한 위치 스타일 변경하기 마우스 이벤트를 이용한 위치 스타일 변경 마우스 포인터의 위치 웹브라우저 화면상의 위치 좌표 값을 이용해 요소의 위치 변경 마우스 포인터의 위치 window 객체의 event 속성값에서 구할 수 있음 (client, clientY) e = window.event; mouse_x = e.clientX; mouse_y = e.clientY; 소스코드는 교재 및 웹사이트 참조 http://webclass.me/html5_2e/ch10/mouseexample.html 이벤트 처리와 동적 웹 문서
<p id = "example"> This is an example content </p> 요소의 콘텐츠 변경을 통한 동적 문서 웹 문서 콘텐츠 변경 폼 위젯 요소의 value 값을 변경 태그 요소의 콘텐츠를 변경 HTML 태그 콘텐츠 속성 “This is an example content” 부분이 <p> 요소의 콘텐츠 요소의 콘텐츠에 접근하는 속성: innerHTML, innerText innerHTML 속성에 저장된 값을 HTML 태그로 해석 innerText 속성에 저장된 값을 단순히 문자열로 해석 <p id = "example"> This is an example content </p> 이벤트 처리와 동적 웹 문서
콘텐츠 변경을 통한 동적 문서 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <button id="b1">innerHTML</button> <button id="b2">innerText</button> <br/> <p id= text">This text will be dynamically changed</p> <script type="text/javascript" > document.getElementById("b1").onmouseover = mouseover_innerHTML; document.getElementById("b2").onmouseover = mouseover_innerText; document.getElementById("b1").onmouseout = reset_text; document.getElementById("b2").onmouseout = reset_text; function mouseover_innerHTML() { document.getElementById("text").innerHTML = "<h1>Mouse cursor is over the innerHTML button</h1>"; } function mouseover_innerText() { document.getElementById("text").innerText = "<h1>Mouse cursor is over the innerText button</h1>"; function reset_text() { "This text will be dynamically changed"; </script> 마우스 커서가 innerHTML 버튼 위에 위치 마우스 커서가 innerText 버튼 위에 위치 이벤트 처리와 동적 웹 문서
10.4 다양한 방법으로 폼 다루기 이벤트 처리와 동적 웹 문서
폼 접근하기 document.getElementById() 메소드 이외의 다른 방법으로 폼에 접근하는 방법들 document.폼이름.위젯ID.value; document.forms[index].위젯ID.value; document.forms[index].elements[index].value; 소스코드는 교재 및 웹사이트 참조 http://webclass.me/html5_2e/ch10/formaccess.html 이벤트 처리와 동적 웹 문서
폼 제어하기 자바스크립트로 폼 위젯을 제어할 수 있는 방법들 select() 메소드 submit() 메소드 reset() 메소드 checked 속성 설정 1 2 3 4 5 6 7 8 9 <form name="form1" action=""> <input id="input1" type="text" value="value of form" /> <input id="input2" type="checkbox"/> <br/> <input type="button" value="select()" onclick="input1.select();"/> <br/> <input type="button" value="submit()" onclick="submit();"/> <br/> <input type="button" value="reset()" onclick="reset();"/> <br/> <input type="button" value="check" onclick="input2.checked=true;"/> <br/> <input type="button" value="uncheck" onclick="input2.checked=false;"/> <br/> </form> 이벤트 처리와 동적 웹 문서