HTML5 웹프로그래밍 입문-개정판

Size: px

Start display at page:

Download "HTML5 웹프로그래밍 입문-개정판"

수 주
5 years ago
Views:

1 HTML5 웹프로그래밍입문 9 장. 자바스크립트객체와 DOM

2 목차 9.1 자바스크립트내장객체다루기 9.2 자바스크립트사용자정의객체다루기 9.3 DOM 으로 HTML 문서다루기 2

3 9.1 자바스크립트내장객체다루기 자바스크립트내장객체 배열객체 3

4 자바스크립트객체 자바스크립트에서제공되는내장객체와사용자가정의한사용자정의객체로구분 자바스크립트객체는속성 (property) 과메소드 (method) 를가짐 계층적구조 : 객체의속성값으로또다른객체를가질수있다 4

3 절에서설명 객체생성을위해서는 new 연산자를사용 var today = new Date(); var

5 자바스크립트내장객체 자바스크립트에서기본적으로제공되는객체 Array, Date, Math, String 웹브라우저가제공하는 window 와 navigator 등은 절에서설명 객체생성을위해서는 new 연산자를사용 var today = new Date(); var y = today.getfullyear(); var m = today.getmonth(); var d = today.getdate(); 5

6 Date 객체의메소들 Date 객체 컴퓨터에서제공되는날짜 / 시간을얻거나설정 메소드이름 기능 getfullyear(), getmonth(), getdate(), getday(), gethours(), getminutes() getseconds() gettime() gettimezoneoffset() setfullyear(), setmonth(), setdate(), setday(), sethours(), setminutes() setseconds(), setmillseconds() 현재시간을구하는메소드. 각각연도, 월, 일, 요일, 시간, 분, 초값을리턴 이후현재까지의시간, 천분의 1초단위표준시와현지시간간의표준시차, 분단위 사용자컴퓨터의시계를각각연도, 월, 일, 요일, 시간, 분, 초, 천분의 1 초값을설정 6

7 Math 객체 수학계산을위해기본적으로제공되는객체 별도의선언이나생성없이바로사용가능 상수값은 Math 객체의속성으로제공 주요수학함수는 Math 객체의메소드로제공됨 속성이름 설명 메소드이름 기능 E Euler 상수값 ( 약 2.718) LN2 LN10 cos(), sin(), tan() acos(), asin(), atan() 삼각함수코사인, 사인, 탄젠트 코사인, 사인, 탄젠트의역함수 LOG2E ceil(), floor(), round() 올림, 내림, 반올림 LOG10E ( 약 0.434) PI SQRT1_2 SQRT2 max(), min(), abs() sqrt(x), pow(x,y) log(x), exp(x) 최대, 최소, 절대값 7

Date 와 Math 객체예제 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 <script type = "text/javascript" > var today = new Date(); var y = today.getfullyear(); var m = today.

8 Date 와 Math 객체예제 <script type = "text/javascript" > var today = new Date(); var y = today.getfullyear(); var m = today.getmonth() + 1; var d = today.getdate(); document.write(" 오늘날짜 : " + y + " 년 " + m + " 월 " + d + " 일 <br/>"); var start = new Date(); var t1 = start.gettime(); var sum = 0; for(i=0;i< ;i++) { sum = sum + i; } var end = new Date(); var t2 = end.gettime(); document.write("1 에서 까지더하는데걸린시간 : " + (t2 - t1) + "ms<br/>"); document.write("<br/>"); document.write("sin(60 도 ) = " + Math.sin(Math.PI/3) + "<br/>"); document.write("ceil(4.3) = " + Math.ceil(4.3) + "<br/>"); document.write("floor(4.3) = " + Math.floor(4.3) + "<br/>"); document.write("round(4.3) = " + Math.round(4.3) + "<br/>"); </script> 8

9 배열객체 배열 (array) 데이터구조 데이터요소여러개를묶어서처리하고자할때 자바스크립트배열의특징 배열의각요소가동일한데이터타입이아니어도된다 예 ) 하나의배열에숫자형이나문자열요소를동시에가질수있다 배열의크기가언제라도변경가능 자바스크립트의변수의자동형변환과객체의동적속성추가특징에따른장점 9

10 배열의생성및접근 배열의생성 new 연산자를이용하거나배열리터럴을이용해생성 배열요소의접근 배열이름 [ 인덱스 ] 와같이각괄호 ([ ]) 를이용해접근 var book_arr = new Array(" 멀티미디어배움터 2.0", " 생능출판사 ", " 최윤철, 임순범 ", 25000, 442); // 배열의내용 // book_arr[0]: " 멀티미디어배움터 2.0" // book_arr[1]: " 생능출판사 " // book_arr[2]: " 최윤철, 임순범 " // book_arr[3]: // book_arr[4]: 442 var book_arr2 = [" 멀티미디어배움터 2.0", " 생능출판사 ", " 최윤철, 임순범 ", 25000, 442]; var arr100 = new Array(100); 10 // 요소갯수가 100 인배열생성

배열의사용예제 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 var arr = new Array("one", 2, "3", 4, "five"); // arr 내용 = ["one", 2, "3", 4, "five"] arr[6] = 6; arr[7] = "seven";

11 배열의사용예제 var arr = new Array("one", 2, "3", 4, "five"); // arr 내용 = ["one", 2, "3", 4, "five"] arr[6] = 6; arr[7] = "seven"; arr[9] = "3+6"; // arr 내용 : ["one", 2, "3", 4, "five", undefined, 6, "seven", undefined, "3+6"] document.write("length of array: " + arr.length + "<br/>"); document.write("arr = ["); for(i=0;i<arr.length;i++) document.write(" " + arr[i] + " "); document.write("] <br/> "); arr.length = 3; document.write("length of array: " + arr.length + "<br/>"); document.write("arr = ["); for(i=0;i<arr.length;i++) document.write(" " + arr[i] + " "); document.write("] <br/> "); document.write("arr[" "]: " + arr[100] + "<br/>"); document.write("length of array: " + arr.length + "<br/>"); arr[100] = 100; document.write("arr[" "]: " + arr[100] + "<br/>"); document.write("length of array: " + arr.length + "<br/>"); 11

12 배열객체의메소드 메소드이름 기능 reverse() 배열내요소들의순서를반대로바꾼다. sort() join() 배열내요소들의순서를오름차순으로정렬한다. 숫자가문자보다앞선다. 배열내요소를모두합쳐하나의문자열로만든다. 이때요소사이에끼워넣을문자열을지정할수있다. concat() 배열의뒤에요소를붙인다 (concatenation) slice() 배열의요소들중일부만을배열로만든다. array.slice( 첫요소 index, 마지막요소 index + 1) 12

13 배열메소드사용예제 소스코드는교재및웹사이트참조 var arr = new Array( zero, one, 3, 25 );... arr,reverse(); var str = arr.join( = ); arr.sort(); var new_arr = arr.concat(4, five, 6); var sliced_arr = arr.slice(2,6); 13

14 9.2 자바스크립트사용자정의객체 사용자정의객체생성 객체생성자 14

15 사용자정의객체다루기 사용자정의객체생성 Object 생성자와 new 명령어를이용해생성 var book = new Object(); 아무런속성을가지지않는빈 (blank) 객체가생성 객체생성후속성및메소드를언제라도추가가능 점 (dot, ".") 연산자를붙혀서속성과메소드접근 var book = new Object(); book.title = " 멀티미디어배움터 2.0"; book.publisher = " 생능출판사 "; book.author = " 최윤철, 임순범 "; book.price = 25000; book.pages = 442; 15

객체의계층적구조 객체의속성값으로 또다른객체를가짐 var book = new Object(); book.title = " 멀티미디어배움터 2.0"; book.publisher = " 생능출판사 "; book.

16 사용자정의객체생성 초기화를통한객체생성 var book = {title: " 멀티미디어배움터 2.0", publisher: " 생능출판사 ", author: " 최윤철, 임순범 ", price: 25000, pages: 442}; 다양한변수형을속성으로사용가능 예 ) 문자열과숫자형의속성을함께가질수있다 객체의계층적구조 객체의속성값으로 또다른객체를가짐 var book = new Object(); book.title = " 멀티미디어배움터 2.0"; book.publisher = " 생능출판사 "; book.author = " 최윤철, 임순범 "; book.price = 25000; book.info = new Object(); book.info.pages = 442; book.info.date = "2010 년 1 월 30 일 "; book.info.isbn10= " "; book.info.size = "188mm*254mm"; 16

17 객체의접근 ( 읽기와수정 ) 객체의속성과메소드의접근방식 점 (dot, ".") 연산자를이용 배열표시 ("[ ]") 속성을삭제하기위해서는 delete 라는명령어이용 // 객체의속성접근방법 var property1 = book.title; var property2 = book.info.price; // 혹은 var property3 = book["title"]; var property2 = book.info["price"]; // 객체의속성삭제방법 delete book.title; delete book.info.price; 17

18 개선된 for 문 객체에포함된속성의갯수나이름을모르더라도객체내의모든속성을접근할수있는방법 // 개선된 for 문을이용한객체의속성접근방법 for (var p in book) { document.write( "Property name: " + p + " Property value: " + book[p] + "<br/>"); } 개선된 for 문의변수명을이용한객체접근은점 (".") 에의해서는불가능 대신, 배열방식 ("[ ]") 을이용해야함 속성의실제이름을모르기때문에속성이름을직접지정해야하는점 (".") 접근방식은사용할수없다. 18

객체의생성, 수정과접근예제 소스코드는교재및웹사이트참조 http://webclass.me/html5_2e/ch09/object.

19 객체의생성, 수정과접근예제 소스코드는교재및웹사이트참조 for (var p in book) <td> book. +p+ </td> for (var q in book[p]) <td> book. +p+. +q+ </td>... 19

$객체생성자 생성자 (Constructor) 함수 객체를생성하는함수 ( 예 ) Object(), Array() 등 사용자정의함수를이용해서사용자정의생성자구현가능 function Book (title_value, publisher_value, author_value, price_value, pages_value) { this.$

20 객체생성자 생성자 (Constructor) 함수 객체를생성하는함수 ( 예 ) Object(), Array() 등 사용자정의함수를이용해서사용자정의생성자구현가능 function Book (title_value, publisher_value, author_value, price_value, pages_value) { this.title = title_value; this.publisher = publisher_value; this.author = author_value; this.price = price_value; this.pages= pages_value; } var book_obj = new Book(" 멀티미디어배움터 2.0", " 생능출판사 ", " 최윤철, 임순범 ", 25000, 442); this: 객체자신을지칭하는키워드 20

$객체의메소드정의 객체는속성값으로함수를저장하면그함수는그객체의메소드가된다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function display_book() { document.write("title: "+ this.title + "<br/>"); document.$

21 객체의메소드정의 객체는속성값으로함수를저장하면그함수는그객체의메소드가된다 function display_book() { document.write("title: "+ this.title + "<br/>"); document.write("publisher: "+ this.publisher + "<br/>"); document.write("author: "+ this.author + "<br/>"); document.write("price: "+ this.price + " 원 <br/>"); document.write("pages: "+ this.pages + "<br/>"); } function Book (title_value, publisher_value, author_value, price_value, pages_value) { this.title = title_value; this.publisher = publisher_value; this.author = author_value; this.price = price_value; this.pages= pages_value; this.display = display_book; } var book_obj = new Book(" 멀티미디어배움터 2.0", " 생능출판사 ", " 최윤철, 임순범 ", 25000, 442); book_obj.display(); 21

22 9.3 DOM 으로 HTML 문서다루기 DOM의정의및문서구조 DOM을통한 HTML 문서접근 브라우저제공내장객체 22

23 DOM 의정의및문서구조 DOM (Document Object Model) 웹문서를구조적문서객체 (document object) 형태로다루는모델 DOM 표준 자바스크립트는 HTML 문서를객체 (Object) 로바라보고다룬다 HTML 문서뿐만아니라 CSS 속성도변경가능 2000년에 DOM2 제정 : 대부분의웹브라우저가지원 2004년에 DOM3 까지제정된상태 자바스크립트활용 자바스크립트를이용해 DOM의내용을추가 / 변경 HTML 문서의태그 / 콘텐츠가변경되는효과 화면에디스플레이되는내용도변경 (CSS 속성변경 ) HTML 문서의내용을동적으로변경 23

24 트리구조의 DOM HTML 문서는태그요소의계층적구조 DOM도트리구조의형태 트리의노드 : HTML 태그요소, 노드는속성과속성값을가짐 웹브라우저에서 DOM 구조확인가능 개발자도구이용 24

25 DOM 트리구조 <html> <head> <body> <meta> <title> <header> <nav> <article> <footer> <button> <button> <button> <section> <h3> <ol> <li> <li> <li> 25

26 HTML 태그요소와 DOM 요소전체가하나의객체 예, 태그요소는 DOM의객체로표현됨 태그속성은 DOM 객체의속성으로표현됨 태그요소에포함된다른요소는하위객체로표현 <input type = "text" name = "username"/> type 과 name 은속성 "text" 와 "username" 은 type 과 name 의속성값 26

27 DOM 을통한 HTML 문서접근 웹브라우저환경과 HTML 문서를모두객체로간주 일반프로그래밍에서처럼객체에접근해서값을읽어내거나, 저장하고수정하는작업을수행 DOM 접근방법 1. document의 forms 속성을이용해서접근하는방법 2. 요소이름을이용해접근하는방법 3. 요소의아이디를찾아서접근하는방법 document 객체가제공하는 getelementbyid() 등의메소드를이용 가장쉽고많이사용되는 getelementbyid() 방법을중심으로설명 27

28 DOM 접근방법예제 <form action=""> <input id="username" type="text" value="name of User" /> </form> <script type="text/javascript"> var dom = document.getelementbyid("username"); alert(dom.value); var newvalue = prompt("type new value of text box", ""); dom.value = newvalue; </script> 사용자입력 28

29 브라우저제공내장객체 웹브라우저에서제공하는자바스크립트객체 대표적으로 navigator, window, document 객체 document 객체 HTML 문서를 DOM 을통해접근하기위한최상위객체 window 객체 웹브라우저에열려있는창 open(), close() : 새창을열거나, 현재창을닫는다 alert(), confirm(), prompt() : 경고창혹은키보드입력 navigator 객체 현재사용하는웹브라우저의종류와버전을알아내기위해사용 대표적인속성 : appname, appversion, useragent 29

window 객체예제 URL 주소를입력받아새로운윈도우에표시 close() 메소드로그윈도우를닫는예제 1 2 3 4 5 6 7

$open_window() { var url = prompt (" 원하는 URL 주소를입력하시오 "); if (url)$ open(url); } </script> <button onclick="open_window();">open a page

30 window 객체예제 URL 주소를입력받아새로운윈도우에표시 close() 메소드로그윈도우를닫는예제 <script type="text/javascript" > var win; function open_window() { var url = prompt (" 원하는 URL 주소를입력하시오 "); if (url) win = window.open(url); } </script> <button onclick="open_window();">open a page with new window</button> <button onclick="win.close();">close the window</button> close() 메소드실행시윈도우닫힘 open() 메소드로새로운윈도우생성 URL 주소입력 버튼클릭 30

navigator 객체예제 대표적인속성 : appname, appversion, useragent 1 2 3 4 5 6 7 8 9 10 11 <form> <input type = "button" value = "Check

appname;"/> <br/> <input id = "appname" type = "text" size = "110"/> <br/> <input type = "button" value = "Check Navigator

31 navigator 객체예제 대표적인속성 : appname, appversion, useragent <form> <input type = "button" value = "Check Navigator appname" onclick = "document.getelementbyid('appname').value = navigator.appname;"/> <br/> <input id = "appname" type = "text" size = "110"/> <br/> <input type = "button" value = "Check Navigator appversion" onclick = "document.getelementbyid('appversion').value = navigator.appversion;"/> <br/> <input id = "appversion" type = "text" size = "110"/> </form> 버튼클릭 31

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법