8장 브라우저 관련 객체

8.1 BOM이란?

브라우저가 한 웹 페이지를 로드하면 브라우저 관련 BOM(Browser Object Model) 객체와 HTML 문서 관련 DOM(Document Object Model) 객체를 만든다. DOM 객체는 HTML 문서의 태그들을 객체화 한 것으로 브라우저에 출력된 태그의 콘텐츠나 모양을 제어하는 것으로 6.5절에서 자세히 설명하였다. 이 장에서는 윈도우, URL, 스크린, 브라우저 종류 등을 제어할 수 있는 BOM 객체에 대해서 설명한다.

BOM 객체는 정확한 표준이 없어 브라우저마다 종류가 다르고 같은 이름의 객체라도 프로퍼티나 메소드가 다를 수 있다. 이 책에서는 브라우저들의 공통 BOM 객체와 메소드에 대해서 설명한다.

BOM에는 다음 다섯 가지 객체가 있다.

– Window

– Navigator

– History

– Location

– Screen

브라우저가 HTML 페이지를 로드하였을 때 BOM과 DOM 객체의 최상위에 있는 Window 객체가 생성된다. Window 객체에는 윈도우를 열거나 닫기, 윈도우의 모양, 크기, 위치, 웹페이지의 프린트 등의 조정을 할 수 있는 프로퍼티와 메소드를 갖고 있다. 탭 윈도우가 있으면 각각의 탭 윈도우마다 Window 객체가 생성된다. 8.2절에서 자세히 살펴본다.

Navigator 객체는 현재 작동중인 브라우저의 이름, 언어, 현재 위치 등에 대한 다양한 정보를 담고 있다. 8.3절에서 자세히 살펴본다.

History 객체는 사용자가 방문한 웹 페이지의 목록 정보를 담고 있다. 8.4절에서 자세히 살펴본다.

Location 객체는 웹페이지의 URL 주소, 서버 이름, 포트 등의 정보를 담고 있다. 8.5절에서 자세히 살펴본다.

Screen 객체는 브라우저가 실행되는 스크린 장치에 관한 정보를 담고 있다. 8.6절에서 자세히 살펴본다.

<그림 8.1.1>은 <그림 6.5.1>의 DOM 트리 예제를 BOM까지 확장하여 그린 것이다. 브라우저가 HTML 페이지를 로드하면 BOM과 DOM 객체의 최상위에 있는 window 객체가 생성되며, 이 window 객체는 Navigator, History, Location, Screen 등 네 개의 하위 객체와 모든 DOM 객체의 뿌리(root)인 document라는 하위 객체를 갖는다. document 객체는 html이라는 하위 객체를, 그리고 html 객체는 그 하위에 head와 body 객체를 만든다. 각 HTML 태그마다 하나의 DOM 객체가 생성되었고 부모-자식의 포함 관계에 따라 태그의 계층적 구조를 볼 수 있다.

<그림 8.1.1> HTML 문서와 BOM, DOM 트리

8.2 Window 객체

Window 객체는 브라우저에 열려진 윈도우를 의미한다. 만일 <iframe> 태그를 이용하여 윈도우가 여러 개 열려져 있을 경우 각 윈도우마다 window 객체가 만들어진다.

Window 객체는 윈도우의 스크린 정보, 위치 정보, 히스토리 정보 등 여러 가지 정보를 얻기 위한 [표 8.2.1]과 같은 프로퍼티를 갖는다.

Window 객체는 새로운 창을 만들거나, 메시지를 보여주거나, 인쇄를 하는 등 다양한 메소드를 [표 8.2.2]와 같이 제공한다.

이미 6장에서 소개하였던 alert(), confirm(), prompt() 메소드도 사실은 Window 객체의 메소드이지만 활용이 많아 단독으로 쓸 수 있도록 한 것이어서 먼저 소개하였다. 이 세 가지 메소드는 앞의 window. 없이 사용해도 된다.

alert(), confirm(), prompt() 메소드를 사용할 때 여러 줄의 문자열을 출력하거나, 역슬래시(\) 등을 출력할 때는 다음과 같은 문자 기호를 사용하여야 한다.

\b       back space

\f       form feed

\n       new line

\r       carriage return

\t       tab

\\       slash

Window 객체는 앞에서 살펴본 많은 이벤트 리스너를 사용할 수 있는데 주요 리스너는 [표 8.2.3]과 같다.

다음 절부터 주요 Window 객체의 프로퍼티나 메소드를 사용하고 이벤트 처리하는 방법을 예를 통하여 살펴본다.

8.2.1 윈도우 열기와 닫기

window 객체에서 가장 많이 이용되는 것이 윈도우 열기와 닫기를 해주는 open() 과 close()이다. open() 은 [표 8.2.4]와 같이 여러 가지 속성을 지정하며 윈도우를 화면에 열어주는 메소드이다.

윈도우 속성은 각 브라우저마다 약간씩 다르다. <그림 8.2.1>은 구글 크롬의 윈도우 화면 구성이다.

그림 <8.2.1> 크롬 윈도우 화면의 구성

다음은 window.open() 메소드의 기본적인 사용 예이다.

window.open();           // 새로운 빈 윈도우 열음

window.open(“”); // 새로운 빈 윈도우 열음

window.open(“”,””,””);      // 새로운 빈 윈도우 열음

window.open(“”,null,null); // 새로운 빈 윈도우 열음

window.open(“”, “”, “width=400,height=300”);  // 400*300 크기의 빈 새 윈도우창을 열음

window.open(“”, “”, “left=10,top=10,width=400,height=300”);

// (10,10) 위치에 400*300 크기의 빈 새 윈도우창을 열음

window.open(“http://www.google.com”);      // 새로운 윈도우에 웹페이지 열림

window.open(“http://www.google.com”,”_self”); // 현재 윈도우를 새 윈도우로 대체

<그림 8.2.2>은 버튼을 누르면 새로운 윈도우창이 열리고 이 윈도우에 메시지를 적는 예이다.

<그림 8.2.2> 새로운 윈도우를 여는 프로그램 예.

<그림 8.2.2>의 예에서 버튼을 계속 누르면 “MsgWindow” 윈도우에 <그림 8.2.3>의 왼쪽과 같이 메시지가 계속 출력된다. 만일 이 프로그램에서 윈도우의 이름을 지정해 주지 않고(즉, var myWindow = window.open(“”, “”, “width=400,height=300”)) 버튼을 계속 클릭하면 <그림 8.2.3>의 우측과 같이 새로운 윈도우가 계속 만들어지니 주의하여야 한다.

<그림 8.2.3> 윈도우의 이름 지정한 경우와 지정하지 않은 경우의 메시지 출력 비교 예.

<그림 8.2.4>는 버튼을 누르면 현재 윈도우 창을 대체하여 메시지를 적는 예이다.

<그림 8.2.4> 현재 창을 대체하는 프로그램 예.

<그림 8.2.5>는 버튼을 누르면 연결된 htm 파일이 툴바와 상태바가 있고 크기를 조절할 수 있는 새 윈도우창에 로드되는 예이다.

<그림 8.2.5> 연결된 htm 파일을 새로운 윈도우에 여는 프로그램 예.

close() 메소드는 화면에 열려 있는 창을 닫아주는 메소드로 사용 형식은 다음과 같다.

window.close()

<그림 8.2.6>은 새로운 윈도우를 열거나 닫는 프로그램 예이다.

<그림 8.2.6> 윈도우 열기 / 닫기 예

다음은 window.open() 메소드의 여러 가지 사용 예이다.

function myFunction() {   // 여러 개의 윈도우 열음

window.open(“http://www.google.com/”);

window.open(“https://www.w3schools.com/”);

}

function myFunction() {   // 윈도우를 열고 name 프로퍼티를 적음

var myWindow = window.open(“”, “MsgWindow”, “width=200,height=100”);

myWindow.document.write(“<p>This window’s name is: ” + myWindow.name + “</p>”);

}

function myFunction() {   // 윈도우를 열고 부모 윈도우의 특성을 적음

var myWindow = window.open(“”, “myWindow”, “width=200,height=100”);

myWindow.document.write(“<p>This is ‘myWindow'</p>”);

myWindow.opener.document.write(“<p>This is the source window!</p>”);

}

8.2.2 윈도우 이동, 크기 조절 및 스크롤

window 객체에서 윈도우 위치 및 크기를 조절하는데 사용되는 메소드는 moveBy(x,y), moveTo(x,y), resizeBy(x,y), resizeTo(x,y) 등이다.

moveBy(x,y)는 윈도우를 현 위치에서 수평으로 x픽셀, 수직으로 y픽셀 이동한다. moveTo(x,y)는 윈도우를 모니터 스크린의 (x,y) 절대 좌표로 이동한다. <그림 8.2.7>은 윈도우 이동 예로서 myWindow.moveTo(150, 150)는 현재의 윈도우를 절대 좌표 (150,150)으로 이동하고, myWindow.moveBy(75, 50)는 윈도우를 현재의 위치에서 가로 +75픽셀, 높이 +50픽셀 이동한다.

<그림 8.2.7> 윈도우 이동 예

resizeBy(x,y)는 현재 윈도우의 크기를 수평으로 x픽셀, 수직으로 y픽셀 조절한다. resizeTo(x,y)는 현재 윈도우를 width = x, height = y 로 조절한다. <그림 8.2.8>은 윈도우 조절 예로서 myWindow.resizeTo(400, 300)는 현재의 윈도우를 너비가 400픽셀, 높이가 300픽셀인 윈도우로 조절한다. myWindow.resizeBy(-100, -50)는 현재 윈도우를 현재의 크기보다 가로 -100픽셀, 높이 –50픽셀로 줄인다.

<그림 8.2.8> 윈도우 크기 조절 예

scrollBy(x,y)는 현재 윈도우를 수평으로 x픽셀, 수직으로 y픽셀 상대적으로 스크롤 조절한다. scrollTo(x,y)는 현재 윈도우를 수평으로 x픽셀, 수직으로 y픽셀 지정된 위치로 스크롤 한다.

<그림 8.2.9>는 스크롤 조절 예로서 각 버튼을 누를 때 다음과 같이 스크롤 한다.

scrollWin(0, 50)          // 우측 스크롤바가 50픽셀 밑으로 이동

scrollWin(0, -50)   // 우측 스크롤바가 50픽셀 위로 이동

scrollWin(100, 0) // 아래측 스크롤바가 우측으로 100픽셀 이동

scrollWin(-100, 0) // 아래측 스크롤바가 왼쪽으로 100픽셀 이동

<그림 8.2.9> 윈도우 스크롤 조절 예

8.2.3 웹페이지 인쇄

window.print()는 화면에 있는 내용을 모두 출력하는 메소드로서 그 형식은 다음과 같다. <그림 8.2.10>은 웹페이지를 인쇄하는 프로그램 예이다.

<그림 8.2.10> 웹페이지 인쇄 예

8.2.4 Window 객체의 이벤트 처리

Window 객체는 [표 8.2.6]과 같은 이벤트 리스너가 있다.

<그림 8.2.10>은 문서를 읽는 중에 발생하는 onload 이벤트 리스너를 이용하는 프로그램 예이다. 프로그램이 모두 로드되어 onload 이벤트가 발생하면되면 alert 메시지가 먼저 나타난다. 여기서 ‘확인’버튼을 누르며 <body> 태그 안에 있는 콘텐츠가 출력된다.

<그림 8.2.11> onload 이벤트 리스너를 이용하는 프로그램 예

7.1절에서 살펴보았듯이 자바스크립트는 컴파일 언어가 아니고 인터프리터 언어여서 HTML 문서를 모두 로드하지 않은 상태에서 실행될 수 있다. 이것을 방지하기 위하여 모드 로드된 이후 실행하기 위해 load 이벤트를 이용한다.

8.3 Navigator 객체

Navigator 객체는 현재 실행중인 브라우저에 관한 정보를 가지고 있다. [표 8.3.1]은 Navigator 객체의 프로퍼티이고 [표 8.3.2]는 메소드이다.

<그림 8.3.1>은 Navigator 객체의 프로퍼티를 사용한 예로서 브라우저의 여러 가지 정보를 출력한다.

<그림 8.3.1> Navigator 객체의 프로퍼티를 사용한 프로그램 예

8.4 Screen 객체

Screen 객체는 브라우저가 실행되는 스크린 장치의 크기, 해상도, 색상 등에 관한 정보를 가지고 있다. [표 8.4.1]은 Screen 객체의 프로퍼티이다.

<그림 8.4.1>은 Screen 객체의 프로퍼티를 사용한 예로서 스크린의 여러 가지 정보를 출력한다.

<그림 8.4.1> Screen 객체의 프로퍼티를 사용한 프로그램 예

8.5 History 객체

History 객체는 사용자가 방문한 URL 주소들에 관한 정보를 가지고 있다. [표 8.5.1]은 History 객체의 프로퍼티이고 [표 8.5.2]는 메소드이다..

<그림 8.5.1>은 History 객체의 프로퍼티와 메소드를 사용한 예로서 사용자가 방문한 URL의 수를 출력하고 앞이나 뒤의 웹페이지로 이동한다. 하지만 이 예에는 URL 수가 1이어서 다른 웹페이지로 이동하는 동작은 나타나지 않는다.

<그림 8.5.1> History 객체의 프로퍼티와 메소드를 사용한 프로그램 예

8.6 Location 객체

Location 객체는 현재 로드된 URL 요소에 관한 정보를 가지고 있다. URL의 각 요소는 다음 예들과 같이 구성된다.

[표 8.6.1]은 Location 객체의 프로퍼티이다.

<그림 8.6.1>은 Location 객체의 프로퍼티를 사용한 예로서 현재 로드된 URL에 관한 정보를 출력한다.

<그림 8.6.1> Location 객체의 프로퍼티를 사용한 프로그램 예