HTML5 웹 프로그래밍 입문 (개정판) 9장. 자바스크립트 객체와 DOM.

Presentation on theme: "HTML5 웹 프로그래밍 입문 (개정판) 9장. 자바스크립트 객체와 DOM."— Presentation transcript:

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

2 목차 9.1 자바스크립트 내장 객체 다루기 9.2 자바스크립트 사용자 정의 객체 다루기 9.3 DOM으로 HTML 문서 다루기
소스코드 실행 사이트 주소 : 폴더 ch02/ ~ ch13/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. 자바스크립트 객체와 DOM

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

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

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

6 Date 객체의 메소들 Date 객체 컴퓨터에서 제공되는 날짜/시간을 얻거나 설정 메소드 이름 기능
getFullYear(), getMonth(), getDate(), getDay(), getHours(), getMinutes() getSeconds() 현재 시간을 구하는 메소드. 각각 연도, 월, 일, 요일, 시간, 분, 초 값을 리턴 getTime() 이후 현재까지의 시간, 천분의 1초 단위 getTimezoneOffset() 표준시와 현지 시간 간의 표준시차, 분 단위 setFullYear(), setMonth(), setDate(), setDay(), setHours(), setMinutes() setSeconds(), setMillseconds() 사용자 컴퓨터의 시계를 각각 연도, 월, 일, 요일, 시간, 분, 초, 천분의 1초 값을 설정

7 Math 객체 수학 계산을 위해 기본적으로 제공되는 객체 별도의 선언이나 생성없이 바로 사용 가능
속성 이름 설명 E Euler 상수 값 (약 2.718) LN2 자연로그2, 𝐥𝐨𝐠𝟐 (약 0.693) LN10 자연로그10, 𝐥𝐨𝐠𝟏𝟎 (약 2.302) LOG2E 𝐥𝐨𝐠 𝟐 𝐞 (약 1.442) LOG10E (약 0.434) PI 원주율 𝛑 (약 3.14) SQRT1_2 𝟏/𝟐 (약 0.707) SQRT2 𝟐 (약 1.414) 메소드 이름 기능 cos(), sin(), tan() 삼각함수 코사인, 사인, 탄젠트 acos(), asin(), atan() 코사인, 사인, 탄젠트의 역함수 ceil(), floor(), round() 올림, 내림, 반올림 max(), min(), abs() 최대, 최소, 절대값 sqrt(x), pow(x,y) log(x), exp(x)

8 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.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>

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

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

11 배열의 사용 예제 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"; 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("arr[" "]: " + arr[100] + "<br/>"); arr[100] = 100;

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

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);

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

15 window 객체 예제 URL 주소를 입력받아 새로운 윈도우에 표시 close() 메소드로 그 윈도우를 닫는 예제 1 2 3
4 5 6 7 8 9 10 <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 주소 입력 버튼 클릭 자바스크립트 객체와 DOM

16 navigator 객체 현재 사용하는 웹 브라우저의 종류와 버전을 알아내기 위해 사용
대표적인 속성: appName, appVersion, userAgent 1 2 3 4 5 6 7 8 9 10 11 <form> <input type = "button" value = "Check Navigator appName" onclick = "document.getElementById('appName').value = navigator.appName;"/> <br/> <input id = "appName" type = "text" size = "110"/> <input type = "button" value = "Check Navigator appVersion" onclick = "document.getElementById('appVersion').value = navigator.appVersion;"/> <input id = "appVersion" type = "text" size = "110"/> </form> 버튼 클릭 자바스크립트 객체와 DOM

17 9.2 자바스크립트 사용자 정의 객체 9.2.1 사용자 정의 객체 생성 9.2.2 객체 생성자

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

19 사용자 정의 객체 생성 초기화를 통한 객체 생성 다양한 변수 형을 속성으로 사용 가능 객체의 계층적 구조
예) 문자열과 숫자 형의 속성을 함께 가질 수 있다 객체의 계층적 구조 객체의 속성 값으로 또 다른 객체를 가짐 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";

20 객체의 접근 (읽기와 수정) 객체의 속성과 메소드의 접근 방식 속성을 삭제하기 위해서는 delete라는 명령어 이용
점(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;

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

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

23 객체 생성자 생성자 (Constructor)함수 객체를 생성하는 함수 (예) Object(), Array() 등
사용자 정의 함수를 이용해서 사용자 정의 생성자 구현 가능 this: 객체 자신을 지칭하는 키워드 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);

24 객체의 메소드 정의 객체는 속성값으로 함수를 저장하면 그 함수는 그 객체의 메소드가 된다 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.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();

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

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

27 트리 구조의 DOM HTML 문서는 태그 요소의 계층적 구조 웹 브라우저에서 DOM 구조 확인 가능 DOM도 트리 구조의 형태
개발자 도구 이용

28 DOM 트리 구조 <html> <head> <body> <meta>
<title> <h3> <ol> document <article> <li>  charset "DOM Tree" "베스트 셀러" "컴퓨터와 IT..." "모바일 멀티..." "소셜미디어의 ..." id Text 속성

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

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

31 DOM 접근 방법 예제 (1) 1 2 3 4 5 6 7 8 <form>
추천도서: <input id="recommend" type="text" size="50"> </form> <script type="text/javascript"> dom = document.getElementById("recommend"); dom.value = "컴퓨터와 IT기술의 이해 [개정판-2판]"; </script> 자바스크립트 객체와 DOM

32 DOM 접근 방법 예제 (2) 사용자 입력 1 2 3 4 5 6 7 8 9 10 <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> 사용자 입력 자바스크립트 객체와 DOM