명품 웹 프로그래밍.

명품 웹 프로그래밍

강의 목표 이벤트가 무엇이고 언제 발생하는지 안다. 자바스크립트 코드로 이벤트 리스너를 작성할 수 있다.
발생하는 이벤트가 DOM 트리를 따라 흘러가는 경로를 안다. 문서와 이미지의 로딩 완료 시 호출되는 onload 리스너를 작성할 수 있다. 폼에 발생하는 이벤트 리스너를 다룰 수 있다. 마우스 관련 이벤트를 다룰 수 있다. 키 관련 이벤트를 다룰 수 있다.

이벤트 개요 이벤트 마우스 클릭, 키보드 입력, 이미지나 HTML 문서의 로딩, 타이머 의 타임아웃 등 사용자의 입력 행위나 문서나 브라우저의 상태 변화를 자바스크립트 코드에게 알리는 통지(notification) 이벤트 리스너 발생한 이벤트에 대처하기 위해 작성된 자바스크립트 코드 이벤트 종류 HTML5에서 이벤트 종류는 70여가지 이벤트 리스너 이름은 이벤트 이름 앞에 on을 덧붙임 예) onmousedown : mousedown 이벤트의 리스너 onkeydown : keydown 이벤트의 리스너

브라우저에 발생하는 다양한 이벤트들 load 이벤트 (HTML 문서 전체 로딩 완료 시) dblclick 이벤트 (마우스
더블클릭 시) change 이벤트 (라디오버튼 선택 시) load 이벤트 (이미지의 로딩 완료 시) resize 이벤트 (윈도우 크기 변경 시) click 이벤트 (마우스 클릭 시) submit 이벤트 (submit 버튼 클릭 시) reset 이벤트 (reset 버튼 클릭 시) keypress 이벤트 (키를 누를 때) keyup 이벤트 (누른 키를 놓을 때)

이벤트 리스너 만들기 3 가지 방법 HTML 태그 내에 이벤트 리스너 작성 HTML 태그 내에 작성
DOM 객체의 이벤트 리스너 프로퍼티에 작성 DOM 객체의 addEventListener() 메소드 이용 HTML 태그 내에 이벤트 리스너 작성 HTML 태그의 이벤트 리스너 속성에 리스너 코드 직접 작성 예) <p>태그에 마우스 올리면 orchid, 내리면 흰색으로 배경변경 <p onmouseover="this.style.backgroundColor='orchid'" onmouseout="this.style.backgroundColor='white'"> 마우스 올리면 orchid 색으로 변경 </p>

예제 9-1 HTML 태그 내에 이벤트 리스너 작성 <!DOCTYPE html> <html>
<head><title>HTML 태그에 리스너 작성</title> </head> <body> <p>HTML 태그에 리스너 작성</p> <hr> <p onmouseover="this.style.backgroundColor='orchid'" onmouseout="this.style.backgroundColor='white'"> 마우스 올리면 orchid 색으로 변경</p> </body> </html> 이곳에 마우스를 올리면 배경색 변함

DOM 객체의 이벤트 리스너 프로퍼티에 작성 DOM 객체의 이벤트 리스너 프로퍼티에 이벤트 리스너 코드 작성 예)
<p id=“p”>마우스 올리면 orchid 색으로 변경</p> function over() { // onmouseover 리스너로 사용할 함수 ... } var p = document.getElementById("p"); p.onmouseover = over; // onmouseover 리스너로 over() 함수 등록 p.onmouseover = over(); // 잘못된 코드

예제 9-2 DOM 객체의 이벤트 리스너 프로퍼티에 리스너 등록
<!DOCTYPE html> <html> <head> <title>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</title> <script> var p; function init() { // 문서가 완전히 로드되었을 때 호출 p = document.getElementById("p"); p.onmouseover = over; // over()를 onmouseover 리스너로 등록 p.onmouseout = out; // out()를 onmouseout 리스너로 등록 } function over() { p.style.backgroundColor="orchid"; function out() { p.style.backgroundColor="white"; </script> </head> <body onload="init()"> <h3>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</h3> <hr> <p id="p">마우스 올리면 orchid 색으로 변경</p> </body> </html> 이곳에 마우스를 올리면 배경색 변함

DOM 객체의 addEventListener() 메소드 활용
예) p.addEventListener("mouseover", over); // onmouseover 리스너로 over() 등록

예제 9–3 addEventListener() 사용
<!DOCTYPE html> <html> <head> <title>addEventListener()를 이용한 리스너 등록</title> <script> var p; function init() { // 문서가 완전히 로드되었을 때 호출 p = document.getElementById("p"); p.addEventListener("mouseover", over); // 이벤트 리스너 등록 p.addEventListener("mouseout", out); // 이벤트 리스너 등록 } function over() { p.style.backgroundColor="orchid"; function out() { p.style.backgroundColor="white"; </script> </head> <body onload="init()"> <h3>addEventListener()를 이용한 리스너 등록</h3> <hr> <p id="p">마우스 올리면 orchid 색으로 변경</p> </body> </html> 이곳에 마우스를 올리면 배경색 변함

익명 함수로 이벤트 리스너 작성 익명 함수(anonymous function)
함수 이름 없이 필요한 곳에 함수의 코드를 바로 작성 예) 코드가 짧거나 한 곳에서만 사용하는 경우, 익명 함수 편리 p.onmouseover = function () { this.style.backgroundColor = "orchid"; }; // 익명 함수 p.addEventListener("mouseover", function () { this.style.backgroundColor = "orchid"; } // 익명 함수 );

예제 9-4 익명 함수로 이벤트 리스너 작성 <!DOCTYPE html> <html>
<head> <title>익명 함수로 이벤트 리스너 작성</title> <script> var p; function init() { // 문서가 완전히 로드되었을 때 호출 p = document.getElementById("p"); p.onmouseover = function () { // 익명 함수 this.style.backgroundColor = "orchid"; }; p.addEventListener("mouseout", function () { this.style.backgroundColor="white"; } // 익명 함수 ); } </script> </head> <body onload="init()"> <h3>익명 함수로 이벤트 리스너 작성</h3> <hr> <p id="p">마우스 올리면 orchid 색으로 변경</p> </body> </html> 이곳에 마우스를 올리면 배경색 변함

이벤트 리스너 작성 방법 4 가지 비교 function over() {
p.style.backgroundColor="orchid"; } (1) HTML 태그 <p id="p" onmouseover="this.style.backgroundColor='orchid'" 마우스 올리면 orchid 색으로 변경 </p> (2) 이벤트 리스너 프로퍼티 function over() { p.style.backgroundColor="orchid"; } p.onmouseover = over; (3) addEventListener() 메소드 이용 p.addEventListener("mouseover", over); (4) 익명 함수 이용 p.onmouseover = function () { this.style.backgroundColor="orchid"; }; (5) 익명 함수 이용 p.addEventListener("mouseover", function () { this.style.backgroundColor="orchid"; } );

 이벤트 객체 이벤트 객체(event object) 발생한 이벤트에 관련된 다양한 정보를 담은 객체
예) mousedown 이벤트의 경우, 마우스 좌표와 버튼 번호 등 keydown 이벤트의 경우, 키 코드 값 등 이벤트가 처리되고 나면 이벤트 객체 소멸  이벤트 리스너 자바스크립트 코드 mousedown 이벤트발생 마우스 클릭 좌표, 버튼 번호, 휠이 구른 값 이벤트 객체

이벤트 객체 전달받기 이벤트 객체는 이벤트 리스너 함수의 첫 번째 매개변수에 전달 1. 이름을 가진 이벤트 리스너
2. 익명 함수의 경우 3. HTML 태그에 이벤트 리스너 : event 라는 이름으로 전달 function f(e) { // 매개변수 e에 이벤트 객체 전달받음 ... } obj.onclick = f; // obj 객체의 onclick 리스너로 함수 f 등록 obj.onclick = function(e) { // 매개변수 e에 이벤트 객체 전달받음 ... } function f(e) { ... } <button onclick=“f(event)”>버튼</button> <div onclick=“alert(event.type)”>버튼</div> event 라는 이름으로 이벤트 객체 전달받음

예제 9-5 이벤트 리스너에서 이벤트 객체 전달 받기
<!DOCTYPE html> <html> <head> <title>이벤트 객체 전달받기</title> </head> <body> <p id="p">마우스를 올려 보세요</p> <button onclick="f(event)">클릭하세요</button> <script> function f(e) { // e는 현재 발생한 이벤트 객체 alert(e.type); // 이벤트 종류 출력 } document.getElementById("p").onmouseover = f; </script> </body> </html> 텍스트 위 아무 곳이나 마우스를 올릴 때

이벤트 객체에 들어 있는 정보 이벤트 객체에 들어 있는 정보 현재 발생한 이벤트에 관한 다양한 정보
이벤트 객체의 프로퍼티와 메소드로 알 수 있음 이벤트의 종류마다 조금씩 다름 이벤트 객체의 공통 멤버 target 프로퍼티 이벤트 타겟 객체 가리킴 이벤트 타겟 : 이벤트를 유발시킨 DOM 객체 <button> 태그의 버튼을 클릭하였으면, 이때 click 이벤트의 이벤트 타겟은 버튼

예제 9-6 이벤트 객체의 프로퍼티 출력 <!DOCTYPE html> <html>
<head><title>이벤트 객체 프로퍼티</title> </head> <body> <h3>이벤트 객체의 프로퍼티 출력</h3> <hr> <p id="p">버튼을 클릭하면 이벤트 객체를 출력합니다.</p> <button onclick="f(event)">클릭하세요</button> <script> function f(e) { // e는 현재 발생한 이벤트 객체 var text = "type: " + e.type + "<br>" + "target: " + e.target + "<br>" + "currentTarget: " + e.currentTarget + "<br>" + "defaultPrevented: " + e.defaultPrevented; var p = document.getElementById("p"); p.innerHTML = text; // 이벤트 객체의 프로퍼티 출력 } </script> </body> </html> 버튼을 클릭하면 click 이벤트 객체의 프로퍼티 출력

이벤트의 디폴트 행동 취소, preventDefault()
이벤트의 디폴트 행동이란? 특정 이벤트에 대한 HTML 태그의 기본 행동 사례 <a>의 click 이벤트의 디폴트 행동 : 웹 페이지 이동 Submit 버튼의 click 이벤트의 디폴트 행동 : 폼 데이터 전송 <input type=“checkbox”>의 click 이벤트의 디폴트 행동 : 체크박스선택 이벤트의 디폴트 행동을 막는 방법 1. 이벤트 리스너에서 false 리턴 2. 이벤트 객체의 preventDefault() 메소드 호출 이벤트 객체의 cancelable 프로퍼티가 true인 경우만 취소 가능 <a href=" onclick="return false"> 이동 안되는 링크 </a> <a href=" onclick="event.preventDefault();"> 이동 안되는 링크 </a>

예제 9-7 이벤트의 디폴트 행동 취소 <!DOCTYPE html>
<html><head><title>이벤트의 디폴트 행동 취소</title> <script> function query() { var ret = confirm("네이버로 이동하시겠습니까?"); return ret; // confirm()의 리턴 값은 true 또는 false } function noAction(e) { e.preventDefault(); // 이벤트의 디폴트 행동 강제취소 </script> </head> <body> <h3>이벤트의 디폴트 행동 취소</h3> <hr> <a href=" onclick="return query()"> 네이버로 이동할 지 물어보는 링크</a> <form> <input type="checkbox">빵(체크 됨)<br> <input type="checkbox" onclick="noAction(event)">술(체크 안됨) </form> </body> </html> 취소 버튼을 누르면 네이버로 이동하지 않음

이벤트 흐름 이벤트 흐름이란? 이벤트가 흘러가는 과정 DOM 객체에는 캡쳐 리스너와 버블 리스너 두 개 모두 작성할 수 있음
이벤트가 발생하면 window 객체에 먼저 도달하고, DOM 트리를 따라 이벤 트 타겟에 도착하고, 다시 반대 방향으로 흘러 window 객체에 도달한 다음 사라지는 과정 이벤트가 흘러가는 과정 캡쳐 단계(capturing phase) 이벤트가 window 객체에서 중간의 모든 DOM 객체를 거쳐 타겟 객체에 전달되는 과정 이벤트가 거쳐가는 모든 DOM 객체(window포함)의 이벤트 리스너 실행 버블 단계(bubbling phase) 이벤트가 타겟에서 중간의 모든 DOM 객체를 거쳐 window 객체에 전달되는 과정 DOM 객체에는 캡쳐 리스너와 버블 리스너 두 개 모두 작성할 수 있음

이벤트 흐름 사례 샘플 웹 페이지 <!DOCTYPE html>
<html><head><title>HTML DOM 트리</title></head> <body> <p style="color:blue" >이것은 <span style="color:red">문장입니다.</span> </p> <form> <input type="text"> <input type="button" value="테스트" id="button"> <hr> </form> </body></html> 버튼 클릭, click 이벤트 발생

1 window 12 2 document 11 3 html 10 head 4 body 9 title p 5 form 8 6 7
버튼 클릭으로 input 객체에 click 이벤트 발생 click 이벤트 소멸 1 window 12 2 document 11 이벤트 캡쳐 단계 (event capture) 이벤트 버블 단계 (event bubble) 3 html 10 head 4 body 9 title p 5 form 8 6 7 span input input hr 이벤트 타겟

캡쳐 리스너와 버블 리스너 DOM 객체의 이벤트 리스너 캡쳐 리스너와 버블 리스너 등록
캡쳐 리스너와 버블 리스너를 모두 소유 가능 이벤트 리스너 등록 시, 캡쳐 리스너인지 버블 리스너인지 구분 캡쳐 리스너와 버블 리스너 등록 addEventListener()의 3 번째 매개 변수 이용 true이면 캡쳐 리스너, false이면 버블 리스너 다른 방법의 이벤트 리스너 등록의 경우 버블 리스너로 자동 등록 예) var b = document.getElementById("button"); b.addEventListener("click", capFunc, true); // 캡쳐 단계에서 capFunc() 실행 b.addEventListener("click", bubbleFunc, false); // 버블 단계에서 bubbleFunc() 실행 obj.onclick = function(e) { // 버블 리스너도 작동 ... }

예제 9-8 이벤트 흐름 버튼을 클릭하면 click 이벤트 발생 <!DOCTYPE html>
<html><head><title>이벤트 흐름</title></head> <body> <p style="color:blue">이것은 <span style="color:red" id="span">문장입니다. </span> </p> <form> <input type="text" name="s"> <input type="button" value="테스트" id="button"> <hr> </form> <div id="div" style="color:green"></div> <script> var div = document.getElementById("div"); // 이벤트 메시지 출력 공간 var button = document.getElementById("button"); // body 객체에 캡쳐 리스너 등록 document.body.addEventListener("click", capture, true); // 켭쳐 단계(1) // 타겟 객체에 버블 리스너 등록 button.addEventListener("click", bubble, false); // 버블 단계(2) // body 객체에 버블 리스너 등록 document.body.addEventListener("click", bubble, false); // 버블 단계(3) function capture(e) { // e는 이벤트 객체 var obj = e.currentTarget; // 현재 이벤트를 받은 DOM 객체 var tagName = obj.tagName; // 태그 이름 div.innerHTML += "<br>capture 단계 : " + tagName + " 태그 " + e.type + "이벤트"; } function bubble(e) { // e는 이벤트 객체 div.innerHTML += "<br>bubble 단계 : " + tagName + " 태그 " + e.type + "이벤트"; </script> </body></html> 버튼을 클릭하면 click 이벤트 발생

window document html 1 3 head body title p form span input input hr 2
버튼 클릭으로 input 객체에 click 이벤트 발생 click 이벤트 소멸 window 예제 9-8 웹 페이지의 이벤트 리스너 실행 1. <body> 태그의 캡처 리스너 실행 2. <input> 태그의 버블 리스너 실행 3. <body> 태그의 버블 리스너 실행 document html 1 3 capture() { ……….. } bubble() { ……….. } head 캡쳐 리스너 body 버블 리스너 title p form span input input hr 2 bubble() { ……….. } 버블 리스너

이벤트 흐름을 중단시킬 수 있는가? YES 이벤트 객체의 stopPropagation() 호출
event.stopPropagation(); // event가 이벤트 객체일 때

마우스 핸들링 마우스 이벤트 객체의 프로퍼티 onclick ondblclick HTML 태그가 클릭될 때

예제 9-9 onclick 리스너로 계산기 만들기
<!DOCTYPE html> <html><head><title>onclick</title> <script> function calculate() { var exp = document.getElementById("exp"); var result = document.getElementById("result"); result.value = eval(exp.value); } </script> </head> <body > <h3> onclick, 계산기 만들기</h3> <hr> 계산하고자 하는 수식을 입력하고 계산 버튼을 눌러봐요.’ <p> <form> 식 <input type="text" id="exp" value=""><br> 값 <input type="text" id ="result"> <input type="button" value=" 계산 " onclick="calculate()"> </form> </body> </html>

여러 마우스 관련 이벤트 리스너 마우스 관련 이벤트 리스너 호출 경우 onmousedown : 마우스 버튼을 누르는 순간
onmouseup : 눌러진 버튼이 놓여지는 순간 onmouseover : 마우스가 태그 위로 올라오는 순간. 자식 영역 포함 onmouseout : 마우스가 태그 위로 올라오는 순간. 자식 영역 포함 onmouseenter : 마우스가 태그 위로 올라오는 순간. 버블 단계 없음 onmouseleave : 마우스가 태그 위로 올라오는 순간. 버블 단계 없음 onwheel : HTML 태그에 마우스 휠이 구르는 동안 계속 호출 위쪽으로 굴린 경우 : wheelDelta 프로퍼티 값 양수(120) 아래쪽으로 굴린 경우 : wheelDelta 프로퍼티 값 양수(-120) obj.onwheel = function (e) { if(e.wheelDelta < 0) { // 아래쪽으로 휠을 굴린 경우 ... } else { // 위쪽으로 휠을 굴린 경우 };

예제 9-10 마우스 관련 이벤트 리스너 <!DOCTYPE html> <body >
<html><head><title>마우스 관련 리스너</title> <script> var width=1; // 테두리 두깨 function down(obj) { obj.style.fontStyle = "italic"; } function up(obj) { obj.style.fontStyle = "normal"; function over(obj) { obj.style.borderColor = "violet"; // 테두리 폭이 0일 때 색은 보이지 않는다. function out(obj) { obj.style.borderColor = "lightgray"; function wheel(e, obj) { // e는 이벤트 객체 if(e.wheelDelta < 0) { // 휠을 아래로 굴릴 때 width--; // 폭 1 감소 if(width < 0) width = 0; // 폭이 0보다 작아지지 않게 else // 휠을 위로 굴릴 때 width++; // 폭 1 증가 obj.style.borderStyle = "ridge"; obj.style.borderWidth = width+"px"; </script></head> <body > <h3>마우스 관련 이벤트 리스너</h3> <hr> <div>마우스 관련 <span onmousedown="down(this)" onmouseup="up(this)" onmouseover="over(this)" onmouseout="out(this)" onwheel="wheel(event, this)">이벤트 </span>가 발생합니다. </div> </body> </html>

마우스를 위로 굴릴 때 두께가 1식 두꺼워진다. (onwheel)
마우스를 텍스트위로 올릴 때 violet 색(onmouseover) 초기 화면 마우스를 눌렀을 때 Italic체 (onmousedown) 마우스를 텍스트에서 내릴 때 회색 (onmouseout)

예제 9-11 onmousemove와 마우스 위치 및 버튼
<!DOCTYPE html> <html><head><title>마우스 이벤트 객체의 프로퍼티</title> <style> div { background : skyblue; width : 250px; } </style> </head> <body> <h3>마우스 이벤트 객체의 프로퍼티와 onmousemove</h3> <hr> 이미지 위에 마우스를 움직일 때 onmousemove 리스너가 실행되고, 마우스의 위치를 보여줍니다.<p> <img src="images/beach.png" onmousemove="where(event)"><p> <div id="div"></div> <script> var div = document.getElementById("div"); function where(e) { var text = "버튼=" + e.button + "<br>"; text += "(screenX, screenY)=" + e.screenX + ",“ + e.screenY + "<br>"; text += "(clientX, clientY)=" + e.clientX + "," + e.clientY + "<br>"; text += "(offsetX, offsetY)=" + e.offsetX + "," + e.offsetY + "<br>"; text += "(x, y)=" + e.x + "," + e.y + "\n"; div.innerHTML = text; </script> </body> </html> (88, 46) 202 96 두 좌표가 같은 이유는 <img>객체의 부모가<body>로서, 브라우저 윈도우이기 때문

oncontextmenu HTML 태그 위에 마우스 오른쪽 버튼 클릭 디폴트로 컨텍스트 메뉴(context menu) 출력
‘소스 보기’나 ‘이미지 다운로드’ 등의 메뉴 oncontextmenu 리스너가 먼저 호출 false를 리턴하면 컨텍스트 메뉴를 출력하는 디폴트 행동 취소 document.oncontextmenu = function () { ... return false; // 컨텍스트 메뉴 출력 금지 }

예제 9-12 oncontextmenu로 소스 보기나 이미지 다운로드 금지
<!DOCTYPE html> <html> <head><title>oncontextmenu</title> <script> function hideMenu() { alert("오른쪽 클릭<컨텍스트 메뉴>금지"); return false; } document.oncontextmenu=hideMenu; </script> </head> <body> <h3>oncontextmenu에서 컨텍스트 메뉴 금지</h3> <hr> 마우스 오른쪽 클릭은 금지됩니다. 아무곳이나 클릭해도 컨텍스트 메뉴를 볼 수 없습니다. </body> </html> 아무곳이나 마우스 오른쪽 클릭

문서의 로딩 완료와 onload onload window 객체에 발생 onload 리스너 작성 방법
웹 페이지의 로딩 완료시 호출되는 이벤트 리스너 onload 리스너 작성 방법 1. window.onload="alert('onload');"; 2. <body onload="alert('onload');"> 이 둘은 같은 표현임. <body>에 onload를 달인 window 객체에 load 이벤트가 전달됨 * document.onload는 최근에 와서 많은 브라우저에서 작동하지 않음

예제 9-13 onload에서 사이트 이전을 알리는 공고창 출력
<!DOCTYPE html> <html> <head><title>HTML 문서의 onload</title> </head> <body onload="alert('이 사이트는 2017년 9월1일부터 \ 옮겨지게 됩니다.')"> <h3>HTML 문서의 로딩 완료, onload</h3> <hr> 이 페이지는 onload 리스너의 사용 예를 보여줍니다 이 페이지가 출력되고 난 바로 직후 onload 리스너를 통해 경고창을 출력합니다. </body> </html> \는 뒤에 <enter> 키를 무시하게 만듦

이미지 로딩 완료와 onload Image 객체 onload 새로운 이미지를 로딩하는 방법
<img> 태그에 의해 생성되는 DOM 객체 new Image(); 자바스크립트 코드에 의해 생성되는 객체 onload 이미지의 로딩이 완료되면 Image 객체에 발생하는 이벤트 새로운 이미지를 로딩하는 방법 <img id="myImg" src="apple.png" width="..." height="..."> var myImg = document.getElementById("myImg"); myImg.src = “banana.png"; banana.png 이미지의 로딩이 완료된 myImg의 onload 리스너 실행

이미지 로딩시 주의할 점 잘못된 이미지 로딩 코드 코드 수정 이미지를 로딩하여 이미지 폭을 알아내는 코드 문제점
myImg.src = "banana.png"; 실행 직후 이미지 로딩 완료되지 않음 var width = myImg.width; 이미지 로딩 완료전이면, myImg.width=0 코드 수정 onload 리스너에서 이미지 폭을 알아내는 코드 작성 var myImg = document.getElementById("myImg"); myImg.src = "banana.png"; var width = myImg.width; // banana.png 이미지의 폭 var myImg = document.getElementById("myImg"); myImg.onload = function () { // 이미지 로딩 완료 시 실행 var width = myImg.width; // 정확한 이미지 폭 읽기 } myImg.src = “banana.png"; // 이미지 로딩 지시

예제 9-14 onload로 이미지의 크기 알아내기
<!DOCTYPE html> <html> <head><title>onload로 이미지 크기 출력</title> <script> function changeImage() { var sel = document.getElementById("sel"); var img = document.getElementById("myImg"); img.onload = function () { // 이미지 크기 출력 var mySpan = document.getElementById("mySpan"); mySpan.innerHTML = img.width + "x" + img.height; } var index= sel.selectedIndex; // 선택된 옵션 인덱스 img.src = sel.options[index].value; // <option>의 value 속성 </script> </head> <body onload="changeImage()"> <h3>onload로 이미지 크기 출력</h3> <hr> <form> <select id="sel" onchange="changeImage()"> <option value="images/apple.png">사과 <option value="images/banana.png">바나나 <option value="images/mango.png">망고 </select> <span id="mySpan">이미지 크기</span> </form> <p><img id="myImg" src="images/apple.png" alt="."></p> </body> </html> banana.png의 이미지 크기

new Image()로 이미지 로딩과 출력 동적으로 이미지 객체 생성 new Image()의 이미지 객체에 이미지 로딩
이미지 객체가 생겼지만 화면에 출력되지 않음 new Image()의 이미지 객체에 이미지 로딩 로딩된 이미지 출력 <img> 태그에 할당된 브라우저 공간에 이미지 출력 var bananaImg = new Image(); // 이미지 객체 생성 bananaImg.src = "banana.png"; // 이미지 로딩 <img id="myImg" src="apple.png" width="..." height="..."> var myImg = document.getElementById("myImg"); myImg.src = bananaImg.src; // 이미지 출력

예제 9-15 new Image()로 이미지 로딩 <!DOCTYPE html>
<html><head><title>new Image()로 이미지 로딩</title> <script> // 미리 로딩해둘 이미지 이름 배열 var files = ["images/penguins.jpg", "images/lighthouse.jpg", "images/Chrysanthemum.jpg", "images/Desert.jpg", "images/Hydrangeas.jpg", "images/Jellyfish.jpg", "images/Koala.jpg", "images/Tulips.jpg"]; var imgs = new Array(); for(var i=0; i<files.length; i++) { imgs[i] = new Image(); // 이미지 객체 생성 imgs[i].src = files[i]; // 이미지 로딩 } // 다음 이미지 출력 var next = 1; function change(img) { img.src = imgs[next].src; // 이미지 변경 next++; // 다음 이미지 next %= imgs.length; // 개수를 넘으면 처음으로 </script></head> <body> <h3>new Image()로 이미지 로딩</h3> <hr> 이미지를 클릭하면 다음 이미지를 보여줍니다.<p> <img style="border:20px ridge wheat" src="images/penguins.jpg" alt="." width="200" height="200" onclick="change(this)"> </body></html> 클릭하면 다음 이미지를 보여준다.

onblur와 onfocus 포커스 onblur onfocus 포커스는 현재 키 입력에 대한 독점권
브라우저는 포커스를 가지고 있는 HTML 태그 요소에 키 공급 onblur 포커스를 잃을 때 발생하는 이벤트 리스너 예) 다른 HTML 요소를 클릭하면, 현재 HTML 요소는 포커스를 잃는 다. onfocus 예) 현재 HTML 요소를 클릭하면, 현재 HTML 요소가 포커스를 얻는 다.

예제 9-16 onfocus와 onblur, 입력 없이 다른 창으로 갈 수 없음
<!DOCTYPE html> <html> <head><title>onfocus와 onblur</title> <script> function checkFilled(obj) { if(obj.value == "") { alert("enter name!"); obj.focus(); // obj에 다시 포커스 } </script> </head> <body onload="document.getElementById('name').focus();"> <h3>onfocus와 onblur</h3> <hr> <p>이름을 입력하지 않고 다른 창으로 이동할 수 없습니다.</p> <form> 이름 <input type="text" id="name" onblur="checkFilled(this)"><p> 학번 <input type="text"> </form> </body> </html> 이름을 입력하지 않은 상태에서 다른 곳을 클릭하면 아래의 경고 창 출력

라디오버튼과 체크박스 라디오버튼 객체 체크박스 객체
<input type="radio">로 만들어진 라디오 버튼 DOM 객체 라디오 버튼 객체들 알아내기 체크박스 객체 <input type="checkbox">로 만들어진 체크박스 DOM 객체 <form> <input type="radio" name="city" value="seoul">서울 <input type="radio" name="city" value="busan">부산 <input type="radio" name="city" value="chunchen">춘천 </form> var kcity = document.getElementsByName("city"); // kcity[0], kcity[1], kcity[2]

예제 9-17 선택된 라디오버튼 알아내기 <!DOCTYPE html> <html>
<head><title>선택된 라디오버튼 알아내기</title> <script> function findChecked() { var found = null; var kcity = document.getElementsByName("city"); for(var i=0; i<kcity.length; i++) { if(kcity[i].checked == true) found = kcity[i]; } if(found != null) alert(found.value + "이 선택되었음"); else alert("선택된 것이 없음"); </script> </head> <body> <h3>버튼을 클릭하면 선택된 라디오 버튼의 value를 출력합니다.</h3> <hr> <form> <input type="radio" name="city" value="seoul" checked>서울 <input type="radio" name="city" value="busan">부산 <input type="radio" name="city" value="chunchen">춘천 <input type="button" value="find checked" onclick="findChecked()"> </form> </body> </html>

예제 9–18 체크박스로 선택한 물품 계산 <!DOCTYPE html> <html>
<head><title>선택된 물품 계산하기</title> <script> var sum=0; function calc(cBox) { if(cBox.checked) sum += parseInt(cBox.value); else sum -= parseInt(cBox.value); document.getElementById("sumtext").value = sum; } </script> </head> <body> <h3>물품을 선택하면 금액이 자동 계산됩니다</h3> <hr> <form> <input type="checkbox" name="hap" value="10000" onclick="calc(this)">모자 1만원 <input type="checkbox" name="shose" value="30000" onclick="calc(this)">구두 3만원 <input type="checkbox" name="bag" value="80000" onclick="calc(this)">명품가방 8만원<br> 지불하실 금액 <input type="text" id="sumtext" value="0" > </form> </body> </html>

select 객체와 onchange select 객체는 <select> 태그로 만들어진 콤보박스
option 객체는 <option>태그로 표현되는 옵션 아이템 선택된 옵션 알아내기 옵션 선택 select와 onchange 리스너 선택된 옵션이 변경되면 select 객체의 onchange 리스너 호출 <select id="fruits"> <option value="1">딸기</option> <option value="2" selected>바나나</option> <option value="3">사과</option> </select> var sel = document.getElementById("fruits"); var index = sel.selectedIndex; // index는 선택 상태의 옵션 인덱스 sel.selectedIndex = 2; // 3번째 옵션 “사과” 선택 sel.options[2].selected = true; // 3번째 옵션 “사과” 선택 <select id="fruits" onchange="drawImage()">...</select>

예제 9-19 select 객체에서 선택한 과일 출력
<!DOCTYPE html> <html> <head> <title>select 객체에서 선택한 과일출력</title> <script> function drawImage() { var sel = document.getElementById("fruits"); var img = document.getElementById("fruitimage"); img.src = sel.options[sel.selectedIndex].value; } </script> </head> <body onload="drawImage()"> <h3>select 객체에서 선택한 과일 출력</h3> <hr> 과일을 선택하면 이미지가 출력됩니다.<p> <form> <select id="fruits" onchange="drawImage()"> <option value="images/strawberry.png">딸기 <option value="images/banana.png" selected>바나나 <option value="images/apple.png">사과 </select> <img id="fruitimage" src="images/banana.gif" alt=""> </form> </body> </html>

키 이벤트 onkeydown, onkeypress, onkeyup onkeydown onkeypress onkeyup
키가 눌러지는 순간 호출. 모든 키에 대해 작동 onkeypress 문자 키와 <Enter>, <Space>, <Esc> 키에 대해서만 눌러지는 순간 에 추가 호출 문자 키가 아닌 경우(<F1>, <Shift>, <PgDn>, <Del>, <Ins> 등) 호출되지 않음 onkeyup 눌러진 키가 떼어지는 순간 호출

예제 9-20 키 이벤트 리스너와 이벤트 객체의 프로퍼티
<!DOCTYPE html> <html><head><title>키 이벤트</title> <script> function whatKeyDown(e) { var str = ""; var div = document.getElementById("div"); div.innerHTML = ""; // div 객체 내용을 지운다. if(e.altKey) { if(e.altLeft) str += "왼쪽 Alt 키가 눌러졌습니다"; else str += "오른쪽 Alt 키가 눌러졌습니다."; str += "<br>"; } if(e.shiftKey) { if(e.shiftLeft) str += "왼쪽 Shift 키가 눌러졌습니다."; else str += "오른쪽 Shift 키가 눌러졌습니다."; if(e.ctrlKey) { if(e.ctrlLeft) str += "왼쪽 Ctrl 키가 눌러졌습니다."; else str += "오른쪽 Ctrl 키가 눌러졌습니다"; str += String.fromCharCode(e.keyCode) + "키가 눌려졌습니다." div.innerHTML = str; // div 객체에 문자열을 출력한다. </script> </head> <body> <h3>키 리스너와 키 이벤트 객체의 프로퍼티</h3> <hr> 텍스트 창에 키를 눌러 보세요. Alt, Shift, Ctrl 키도 가능합니다.<br> <input type="text" id="text" onkeydown="whatKeyDown(event)"> <div id="div" style="background-color:skyblue; width:250px; height:50px"> </div> </body> </html>

onreset과 onsubmit onreset onsubmit 리스너 작성
reset 버튼(<input type="rest">) 클릭 시 false를 리턴하면 폼이 초기화되지 않음 onsubmit submit(<input type="rest">) 버튼 클릭 시 false를 리턴하면 폼 전송하지 않음 리스너 작성 <form onreset="..." onsubmit="...">

명품 웹 프로그래밍.

Similar presentations

Presentation on theme: "명품 웹 프로그래밍."— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

명품 웹 프로그래밍.

Similar presentations

Presentation on theme: "명품 웹 프로그래밍."— Presentation transcript:

Similar presentations

About project

지원