6장 자바스크립트 주요 객체

6.1 클래스와 객체

클래스(Class)는 다양한 형태의 데이터를 처리하거나 복잡한 구조를 갖는 문제의 해결을 위하여 객체지향(object oriented) 형태의 프로그래밍이 가능하도록 설계된 프로그래밍 형태로서 자바나 C++ 등에서 사용된다. 잘 만들어진 클래스는 프로그래머 본인만 아니라 다른 사람도 사용할 수 있도록 일반화된 형태로 프로그램한 후 다른 프로그램에서 이를 ‘상속’받아 사용하도록 설계되었다.

자바와 같은 프로그램 언어에서 클래스는 상수 및 변수(이들을 필드(field)라 부름), 각 필드의 초기값을 부여하는 생성자(construct), 클래스의 행위를 기술하는 함수인 메소드(method), 그리고 필요시 내부클래스(inner class)가 같이 정의되어 있다.

하지만 자바스크립트는 이와 같은 전통적인 클래스를 직접 만들어 사용하지는 않고 함수 형태의 클래스를 만들어 사용한다. 자바스크립트 클래스는 이 책의 수준을 넘으므로 자세한 것은 모질라 재단의 자바스크립트 공식 문서를 참조하기 바란다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

클래스를 이용하기 위해서는 일반적으로 먼저 이 클래스의 객체(object)를 다음과 같이 선언한다.

객체명 = new 클래스명(매개변수, … , )

예) 배열 클래스의 이름은 Array여서 배열 객체의 선언은 다음과 같이 하였다.

score = new Array(3)

score = new Array(90, 70, 80)

객체를 선언하면 클래스에 포함된 상수나, 메소드를 다음과 같이 사용할 수 있다. 메소드명은 같으나 매개변수 수가 다를 수 있는데 이러한 작업을 적절히 해주는 것이 클래스의 생성자(construct)이다.

객체명.상수명

객체명.메소드명(매개변수, … , )

예) Array의 객체 score에 sort 메소드는 다음과 같이 사용한다.

score.sort()

자바스크립트에는 배열과 같이 클래스의 객체를 사용자가 선언하고 클래스에 포함된 메소드를 사용하는 방법이 있고, Math와 같이 직접 클래스명을 이용하여 Math.PI, Math.exp(x)와 같이 사용하는 방법이 있다. 사용이 빈번한 window객체의 메소드는 prompt()와 같이 객체명을 생략하는 경우도 있어 주의하여야 한다.

HTML 페이지가 브라우저 윈도우에 로드되면 브라우저로부터 자바스크립트 코드에서 사용할 수 있는 많은 객체를 제공받는다. 이 객체들을 크게 나누면 코어(core)객체, DOM(Document Object Model) 객체, BOM(Browser Object Model) 객체로 나눌 수 있다.

코어 객체는 브라우저의 종류나 HTML의 구조와 상관없이 항상 자바스크립트 프로그램에서 사용할 수 있는 객체이다. 5장에서 설명한 Array 객체가 코어 객체의 하나이고 이 장에서는 코어 객체 중에서 수학 계산을 위한 Math 객체(6.2절), 문자열 처리를 위한 String 객체(6.3절), 날짜와 시간 처리를 위한 Date 객체(6.4절)를 설명한다.

브라우저가 HTML 페이지를 로드하면 각 태그 요소를 하나의 객체로 만드는데 이를 DOM 객체라 부른다. 예를 들어 <h3>… </h3> 태그는 h3 객체로, <p> … </p> 태그는 p 객체로 생성된다. HTML 태그를 자바스크립트에서 제어하기 위해서는 반드시 DOM 객체에 대한 지식이 필요한데 6.5절에서 설명한다.

브라우저에 관한 정보를 얻거나 브라우저의 모양을 제공하는 객체를 BOM 객체라 부른다. BOM 객체에는 Window 객체, Frame 객체, Screen 객체 등이 있는데 8장에서 자세히 설명한다.

6.2 Math 객체

Math 객체는 수학 계산에 많이 이용되는 [표 6.2.1]과 같이 자연로그, 파이 같은 상수와, [표 6.2.2]와 같은 절대값, 지수함수, 로그함수, 삼각함수, 최댓값/최솟값 등의 메소드를 제공한다.

<그림 6.2.1>은 Math.PI 상수를 이용하여 원의 넓이를 계산하고 sin()를 계산하는 자바스크립트 프로그램 예이다.

<그림 6.2.1> Math 객체를 이용한 계산

6.3 String 객체

String 객체는 문자열의 폰트, 모양, 위치 등을 제어하는 다양한 메소드를 지원한다.

<그림 6.3.1>은 문자열의 길이를 알아보는 메소드를 이용하는 프로그램 예이다.

<그림 6.3.1> Math 객체를 이용한 계산

6.4 Date 객체

Date 객체는 날짜와 시간 정보를 다루는 다양한 메소드를 지원한다. [표 6.4.1]의 메소드 사용은 Date의 객체를 생성한 후 객체명.메소드명으로 사용할 수 있다.

<그림 6.4.1>은 Date 객체의 메소드를 사용한 자바스크립트 프로그램 예이다.

<그림 6.4.1> Date 메소드 이용 예

6.5 DOM과 document 객체

브라우저가 HTML 페이지를 로드하면 브라우저의 모든 정보를 가지고 있는 window 객체가 생성된다. 이 window 객체는 모든 객체의 최상위 객체가 된다. window 객체 밑에 모든 HTML 태그 DOM 객체의 뿌리(root)가 되는 document 객체가 만들어지고, 이 밑에 HTML 문서에 있는 각각의 태그 요소의 객체가 부모-자식의 계층적인 형태로 만들어진다. 한 HTML 문서의 모든 태그의 객체를 DOM(Data Object Model) 객체라 부른다. document 객체는 DOM 객체의 뿌리이지만 DOM 객체는 아니어서 속성 지정 방법이 다르다.

DOM 객체를 통해 각 HTML 태그를 제어하여 모양을 바꾸거나 동작을 부여하게 된다. 각 태그에는 대개 CSS3 스타일이 지정되는데 DOM 객체를 통해 스타일 속성값을 바꿀 수 있다. 6.5.1절에서 자세히 살펴본다.

DOM 객체 위에 있는 document 객체는 HTML 문서 전체를 대변하는 객체로서 많은 프로퍼티를 갖고 HTML 문서의 전반적인 속성을 나타내며 여러 메소드로서 DOM 객체의 검색, 생성 등을 지원한다. 6.5.2절에서 자세히 살펴본다.

6.5.1 DOM 객체

DOM 객체는 태그의 종류만큼 많다. 각 태그는 부모-자식 등의 포함 관계를 형성하고 있어 DOM 객체를 트리(DOM Tree) 형태로 표현할 수 있다. 예를 들어 <그림 6.5.1>은 한 HTML 코드와 이에 대한 DOM 트리를 보여준다.

<그림 6.5.1>을 보면 브라우저가 HTML 페이지를 로드하였을 때 BOM과 DOM 객체의 최상위에 있는 window 객체가 생성되며, 이 window 객체의 자식이며 모든 DOM 객체의 뿌리인 document라는 객체가 만들어진다. document 객체는 html이라는 하위 객체를, html 객체는 그 하위에 head와 body 객체를 만든다. 각 HTML 태그마다 하나의 DOM 객체가 생성되었고 부모-자식의 포함 관계에 따라 태그의 계층적 구조를 볼 수 있다.

<그림 6.5.1> HTML 문서와 DOM 트리

브라우저가 HTML 문서를 로드하면 처리기가 이 문서에 있는 태그의 DOM 객체를 만들고 태그들의 계층관계에 따른 DOM 트리를 형성한 후 브라우저에 DOM 객체를 출력한다. 따라서 DOM 객체를 제어하면 즉각 브라우저에 있는 내용이 바뀌게 된다.

HTML의 태그는 일반적으로 다음과 같이 태그명, 속성, CSS3스타일, 이벤트리스너, 태그내용(inner HTML 이라고도 함) 등으로 구성된다.

<button  id=”demo” style=”color:red” onclick=”myFunction()”> 버튼을 누르세요 </p>

태그명    속성       CSS3스타일        이벤트리스너           태그내용

DOM 객체도 HTML의 태그의 구성요소를 모두 포함한 다음 다섯 가지 요소로 구성된다. 자바스크립트는 이러한 DOM 객체의 구성 요소의 값을 알아내거나 변경하며 동적인 웹페이지를 만들 수 있다.

– 프로퍼티(property)             // 태그의 속성을 표시하는 DOM 객체의 멤버 변수

– 메소드(method)               // 객체가 사용할 수 있는 DOM 객체의 멤버 함수

– 콜렉션(collection)             // 객체 정보의 집합

– 이벤트리스너(event listner) // 이벤트 처리를 위한 리스너

– CSS3 스타일

DOM 객체는 DOM 트리에서 보듯이 부모, 자식, 형제의 관계로 연결되는데, 이 관계를 알기 위해 다음 6개의 프로퍼티가 이용된다.

parentElement

children

firstElementChild

lastElementChild

previousElementSibling          // 전 단계 객체의 형제의 자식, 즉 사촌 객체

nextElementSibling             // 전 단계 객체의 자식, 즉 형제 객체

[표 6.5.1], [표 6.5.2]와 [표 6.5.3]은 각각 DOM 객체의 주요 프로퍼티, 콜렉션, 메소드 등을 보여준다.

다음은 DOM 객체의 프로퍼티와 메소드를 이용하는 예들이다.

가. id를 이용하여 DOM 객체를 찾고 구조 출력 예

<그림 6.5.2>의 예는 <p id=”demo” …>와 같이 한 문단의 id를 “demo” 로 부여하고 이 문단을 자바스크립트에서 var p = document.getElementById(“demo”);와 같이 찾았다. getElementById() 메소드는 다음 절에서 살펴보는 document 객체의 메소드로서 id를 갖는 태그 객체를 찾는 데 매우 흔하게 사용되는 방법이다. 이 예에서는 id=”demo”를 가진 문단의 여러 가지 DOM 구조를 출력하였다. 기본 프로퍼티인 id, tagname, innerHTML, style과 DOM 트리 관련 프로퍼티 firstElementChild, parentElement, 그리고 크기 위치 프로퍼티 offsetWidth, offsetHeight를 출력하였다.

<그림 6.5.2> id를 이용하여 DOM 객체를 찾고 구조 출력 예

나. DOM 객체의 스타일 변경 예

<그림 6.5.3>은 DOM 객체의 style 프로퍼티를 이용하여 문단의 폰트 색, 크기, 박스의 배경색, 여백, 테두리를 변경하였다. 그리고 DOM 객체의 innerHTML 프로퍼티를 이용하여 문단의 내용을 바꾸어 보았다. 이 예와 같이 DOM 객체는 자바스크립트 프로그램 내에서 여러 가지 프로퍼티의 변경을 통하여 동적으로 스타일을 변경시킬 수 있다.

HTML 문서에서 CSS3 스타일시트의 프로퍼티는 background-color 등과 같이 하이픈(‘-’)을 사용하였다. 하지만 DOM 객체의 style 프로퍼티를 이용할 때는 하이픈 없이  p.style.backgroundColor = “yellow”; 등과 같이 사용한다.

일반적으로 한 DOM 객체의 style 속성을 바꾸는 형식은 다음과 같다.

객체명.style.속성명 = “속성값“

예) p.style.backgroundColor = “yellow“

자바스크립트에서 색 표현방법은 HTML5 및 CSS3와 동일하게 RGB 표현 방식이나 색이름 등을 사용한다.

<그림 6.5.3> DOM 객체의 스타일 변경 예

다. this 객체를 이용한 스타일 변경 예

객체 자신을 의미하는 this를 이용하면 쉽게 자기 자신의 속성을 바꿀 수 있다. <그림 6.5.4>는 this 객체를 이용하여 한 문단을 마우스로 클릭하였을 때 자기 자신의 배경색을 바꾸는 예이다. 여기서 this는 문단 p 객체 자신을 가리키며 this.style.backgroundColor=’yellow’ 는 자신의 배경색을 노랑으로 바꾼다.

<그림 6.5.4> this 객체를 이용한 스타일 변경 예

6.5.2 document 객체

HTML 문서가 로드되면 먼저 document 라는 객체를 만들고 이를 뿌리로 하여 HTML의 모든 태그를 계층화하여 객체를 만들면서 DOM 트리를 구성한다. 6.5.1절에서 DOM 객체를 통해 각 HTML 태그를 제어하여 모양을 바꾸거나 동작을 부여하는 방법을 알아보았다. DOM 트리의 최상위에 있는 document 객체는 모든 웹페이지를 표현하기 때문에 웹페이지의 특정한 요소를 처리할 때 사용된다.

document 객체는 [표 6.5.4]와 같은 많은 프로퍼티를 가지고 HTML 문서의 전반적인 속성을 나타낸다. 그리고 [표 6.5.5]와 같은 여러 메소드를 이용해서 DOM 객체의 검색, 생성 등을 지원한다. document 객체의 프로퍼티 지정이나 메소드의 사용법은 다음과 같다.

document.프로퍼티명

document.메소드명

(예) document.write(string); // string을 브라우저에 인쇄

[표 6.5.6]의 document 객체 콜렉션(collection)은 한 HTML 문서에 있는 동일한 이름의 태그들을 배열에 모아서 사용할 수 있게 하여준다. <img>, <a>, <form> 태그의 콜렉션을 만들 수 있다.

document 객체는 윈도우 객체의 자식으로 window.document.메소드명 등으로 접근할 수 있으나 대개 앞의 ‘window.’은 생략하고 사용한다.

앞에서 설명하였듯이 document 객체는 DOM 트리에 최상위 객체이지만 DOM 객체는 아니다. 따라서 연결된 css3 스타일도 없고 style 프로퍼티도 사용할 수 없다.

document 객체에는 이벤트리스너를 사용할 수 있는데 7장에서 자세한 설명한다.

다음은 document 객체의 프로퍼티, 메소드, 콜렉션을 사용하는 예이다.

가. 태그 이름으로 요소를 찾고 콜렉션을 사용하는 예

<그림 6.5.5>는 getElementByTagName() 메소드로 HTML 문서에서 <li> 태그를 모두 찾아 콜렉션 배열을 만든 후 <li> 요소의 폰트와 색을 바꾼 후 두 번째 요소를 인쇄하는 프로그램 예이다.

이 프로그램에서 var x = document.getElementsByTagName(“li”);는 모든 <li> 요소의 콜렉션 배열을 만든다. 이 배열의 크기는 x.length 이고 각 요소는 x[0], x[1], x[2] 이다.

<그림 6.5.5> getElementByTagName() 으로 <li> 태그를 찾고 콜렉션을 만든 후 사용하는 예

나. document 객체의 open(), close(), wite() 메소드 사용 예

현재 브라우저 윈도우에 출력된 HTML문서를 지우고 새로운 내용으로 바꾸려면 document.open() 메소드를 사용한다. 이 메소드는 현재의 HTML 내용을 모두 지우고 새로운 HTML 텍스트를 받을 준비를 한다. document.write()는 브라우저 윈도우에 새로은 내용을 추가로 출력하는 메소드이다. document.close()는 document 객체를 닫는다.

한 HTML 문서내의 자바스크립트 코드에서 document.write() 메소드가 여러번 사용되면 먼저 사용된 write() 메소드로 출력된 텍스트에 추가하여 새로운 텍스트가 출력된다. 예를 들어 다음 세 개의 document.write() 메소드는 브라우저에 세 줄에 걸쳐 a, b, c를 인쇄한다.

<!DOCTYPE html>

<html>

<body>

<script>

document.write(“a”+”<br>”)

document.write(“b”+”<br>”)

document.write(“c”+”<br>”)

</script>

</body>

</html>

만일 위의 예를 <그림 6.5.6>과 같이 버튼을 추가한 후 이 버튼을 클릭하면 document.write(“d”)가 출력되도록  프로그램 하였다면 세 줄에 이어서 네 번째 줄에 d가 출력될까? 대답은 ‘아니다’이다. 브라우저는 HTML 문서가 로드되면 먼저 document 객체를 만들고 이어서 DOM 트리를 작성하고 모든 태그의 객체를 생성한다. 마지막 </html> 태그를 만나면 document 객체를 닫는다. 만일 버튼이 클릭되어 document.write(“d”)를 만나면 document 객체가 닫혀있어 현재 문서에 출력시킬 수는 없고 새로운 document 객체를 열어 여기에 d를 출력하게 된다. 즉 현재의 문서가 사라지고 새로운 문서에 d가 출력된다.

<그림 6.5.6> getElementByTagName() 으로 <li> 태그를 찾고 콜렉션을 만든 후 사용하는 예

<그림 6.5.7>은 window 객체의 open() 메소드로 새로운 윈도우창을 열은 후 여기에 document.open(), document.write(), document.close() 메소드 사용 예이다.

<그림 6.5.7> document 객체의 open(), write(), close() 메소드 사용 예

다. document 객체에 내용을 추가하는 DOM 객체의 생성 예

HTML 문서를 로드하여 document가 만들어져 문서의 출력이 완료된 후 이 document에 추가로 어떤 내용을 적으려면 DOM 객체를 새로 만들어 DOM 트리에 삽입하여야 한다. 새로운 태그 요소의 DOM 객체 생성은 createElement() 메소드를 이용하고 DOM 트리 삽입은 appendChild() 메소드를 이용한다. 만일 DOM 객체를 삭제하려면 DOM 트리의 부모 객체에서 자식 객체를 떼어내야 하는데 이때 removeChild() 메소드를 이용한다.

<그림 6.5.8>은 <div> 요소에 <p> 태그를 생성하여 추가한 예이다.

<그림 6.5.8> DOM 객체의 생성 예

6.6 함수를 이용한 자바스크립트 객체 생성

자바스크립트는 자바처럼 클래스를 사용하여 객체나 메소드를 만들지 않고 함수를 사용하여 객체나 메소드를 만든다. [표 6.6.1]과 같이 함수를 만들고 전달할 매개변수들을 선언한 다음 this를 이용하여 다음과 같은 형식으로 정의한다.

이렇게 만든 함수의 객체 생성은 new 연산자를 이용한다.

객체 = new 함수명(parameter1, parameter2, … )

<그림 6.6.1>은 함수를 이용한 자바스크립트 객체 생성의 예이다.

 

<그림 6.6.1> 함수를 이용한 자바스크립트 객체 생성 프로그램 예

자바의 클래스와 같이 자바스크립트에서도 메소드를 만든 후 객체를 생성하여 사용할 수 있다. <그림 6.5.2>는 객체를 선언하고 그 객체를 새로운 객체의 매개변수로 사용하는 예이다.

<그림 6.6.2> 자바스크립트에서 메소드를 만든 후 객체를 생성하여 사용하는 예