HTML5 웹프로그래밍입문 10 장. 이벤트처리와동적 웹문서
목차 10.1 이벤트처리하기 10.2 동적웹문서만들기 10.3 다양한방법으로폼다루기 2
10.1 이벤트처리하기 10.1.1 이벤트처리개요 10.1.2 이벤트의정의와종류 10.1.3 이벤트핸들링및이벤트등록 10.1.4 폼다루기 3
이벤트처리개요 이벤트 사용자가웹브라우저를사용하는중에발생시키는키보드, 마우스등의입력 이벤트처리 이벤트가입력되었을때미리구현된자바스크립트코드를수행 1. 이벤트의정의 2. 이벤트핸들러 이벤트가발생할때마다호출되는자바스크립트코드 3. 이벤트등록 (registration) 이벤트와이벤트핸들러를연결시키는과정 4
이벤트처리예제 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 입력클릭 add() 함수가 5 호출됨
이벤트의종류 마우스이벤트 이벤트이름 태그속성 설명 click onclick 요소를클릭 dblclick ondblclick 요소를더블클릭 mousedown onmousedown 커서가요소위에있고마우스버튼을누를때 mousemove onmousemove 마우스커서를움직이는동안 mouseover onmouseover 마우스커서가해당요소위에들어갈때 mouseout onmouseout 마우스커서가해당요소위를벗어날때 mouseup onmouseup 마우스버튼을뗄때 키보드이벤트 이벤트이름 태그속성 설명 keydown onkeydown 키보드를누를때 1회발생 keypress onkeypress 키보드를타이핑할때, 손을떼기전까지계속발생한다. keyup onkeyup 키보드를누른후뗄때. 6
이벤트의종류 프레임 / 객체이벤트 이벤트이름 태그속성 설명 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 폼이실행될때 7
이벤트핸들링및이벤트등록 이벤트핸들러 (handler) 이벤트가발생시실행하고자하는자바스크립트함수나코드 사용자가입력한내용이맞는지검사하거나입력한내용에따라웹문서를수정하는등의작업을통해동적웹문서를만든다 이벤트등록 이벤트의종류와이를처리할이벤트핸들러를연결시키는작업 두가지등록방법 1. 태그속성에직접이벤트핸들러기술혹은이벤트함수호출 2. 객체의이벤트속성값에이벤트핸들러함수이름을기술 8
요소속성에이벤트핸들러기술 요소의이벤트태그속성에직접이벤트핸들러기술 이벤트핸들러 : 자바스크립트코드혹은함수이름 <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> 9
요소이벤트속성으로핸들러등록 요소객체의이벤트속성에직접이벤트핸들러함수지정 이벤트핸들러는반드시함수형태로미리구현 <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 name = document.getelementbyid("username"); name.onclick = myeventhandler; </script> 주의 : 객체의이벤트속성에 () 없이함수이름만적어야함 10
폼다루기 자바스크립트를이용해폼의값을읽어내거나계산하여수정하는것이가능 <input> 요소를 DOM 인터페이스로접근하여 value 속성값을읽거나저장 소스코드는교재및웹사이트참조 11
폼의입력값읽고쓰기 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 ;... 12
settimeout() 을이용한예제 settimeout() 함수와폼을이용한스톱워치예제 1/10 초마다 start() 함수를호출, 폼의시간값을주기적으로증가 var stopped = false; function start() { csec_dom = document.getelementbyid("csec").value;... if (csec_dom.value == "99") { // 시간올림 csec_dom.value = "0";... else csec_dom.value = parseint(csec_dom.value) + 1; if(!stopped) settimeout(start,10); function stop() { stopped = true; 13
10.2 동적웹문서만들기 10.2.1 동적문서정의 10.2.2 콘텐츠변경을통한동적문서만들기 10.2.3 스타일변경을통한동적문서만들기 14
동적문서정의 동적문서 웹문서가브라우저에처음표시된후에콘텐츠나스타일변경 즉시변경된값을바탕으로화면의문서를갱신 웹문서의콘텐츠나스타일을자바스크립트를이용해변경 태그요소, 태그속성, 태그콘텐츠, 요소의 CSS 스타일등변경 태그요소의화면내표시위치변경, 애니메이션, 색상및글씨체변경, 인터랙티브사용자인터페이스등포함 동적문서구현방식 웹문서의콘텐츠를변경시키는방법 CSS 스타일을변경시키는방법 15
콘텐츠변경을통한동적문서 웹문서콘텐츠변경 폼요소의 value 값을변경 태그요소의콘텐츠를변경 HTML 태그콘텐츠속성 <p id = "example"> This is an example content </p> <p> 요소의콘텐츠 => This is an example content 부분 요소의콘텐츠속성 : innerhtml, innertext document.getelementbyid("example").innerhtml = "<h2>html</h2>" document.getelementbyid("example").innertext = "<h2>html</h2>" innerhtml : 속성값을 HTML 태그로해석 HTML innertext : 속성값을단순히문자열로해석 <h2>html</h2> 16
콘텐츠변경을통한동적문서예제 <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; 초기화면 마우스커서가 innerhtml 버튼위에위치 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() { document.getelementbyid("text").innerhtml = "This text will be dynamically changed"; </script> 마우스커서가 innertext 버튼위에위치 마우스커서가버튼바깥으로이동 17
스타일변경을통한동적문서 DOM 을이용하면 CSS 스타일에접근가능 일반적인 DOM 에접근하는방법과동일 예제 : 배경색스타일속성접근 <div id="outerbox" style="background: blue; width: 550px; height:300px;" /> <div id="innerbox" style="background: yellow; width: 450px; height:200px; position: absolute; left: 50px; top: 50px;" />... <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>... Inner Box: <button onclick = "changecolor('innerbox', 'red');"> Red </button> <button onclick = "changecolor('innerbox', 'green');">green</button>... 18 style.background 속성접근
위치스타일속성변경 style.left, style.top 속성접근 <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" onclick = "changepositions();" value = "Move All" /> </form> 19
보이기 / 감추기스타일속성변경 화면표시보이기 / 감추기스타일속성 visibility = "visible" 혹은 "hidden" hidden 으로설정해도웹문서내태그요소로는존재 <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> 20
위치스타일변경하기 마우스이벤트를이용한위치스타일변경 웹브라우저화면상의위치좌표값을이용해요소의위치변경 마우스포인터의위치 window 객체의 event 속성값에서구할수있음 (clientx, clienty) <body onmousemove="move();" style="width:500px; height:500px;">... document.getelementbyid("img1").onmouseover = start_move; document.getelementbyid("img1").onclick = stop_move;... function move() { e = window.event; // 마우스이동 mouse_x = e.clientx; mouse_y = e.clienty; document.getelementbyid("x").value = mouse_x; document.getelementbyid("y").value = mouse_y; if (!stopped) { // 중심위치, 픽셀 document.getelementbyid("img1").style.left = (mouse_x 50) + "px"; document.getelementbyid("img1").style.top = (mouse_y 50) + "px"; 21
10.3 다양한방법으로폼다루기 10.3.1 폼접근하기 10.3.2 폼제어하기 22
폼접근하기 폼에접근하는방법들 document.getelementbyid( 요소아이디 ).value; document. 폼이름. 요소아이디.value; document.forms[index]. 요소아이디.value; document.forms[index].elements[index].value; <form name="form1" action=""> <input id="input1" type="text" value="value of form" /> </form> <script type="text/javascript">... txt = document.getelementbyid("input1").value; txt = document.form1.input1.value; txt = document.forms[0].input1.value; txt = document.forms[0].elements[0].value;... </script> 23
폼제어하기 자바스크립트로폼위젯을제어할수있는방법들 select() 메소드 submit() 메소드 reset() 메소드 checked 속성설정 <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> 24