자바스크립트 (JavaScript) - 46 : 브라우저 객체 모델, window 객체와 속성

- 브라우저 객체 모델

브라우저 객체 모델 (Browser Object Model)은 웹 브라우저와 관련된 객체의 집합을 나타낸다.

대표적인 브라우저 객체 모델로는 window, location, navigator, history, screen, document 객체가 있다.

다음은 브라우저 객체 모델을 나타낸 그림이다.

- window 객체

1) 개념

window 객체란 브라우저 기반 자바스크립트의 최상위 객체이다. 글로벌 scope 객체들은 사실 window의 속성이다.

2) 메서드

window 객체는 새로운 window 객체를 생성하는 open 메서드를 제공한다.

open 메서드는 새로운 팝업 창 혹은 새로운 탭을 띄운다. 다음은 open 메서드의 syntax이다.

메서드 이름	속성
open(URL, name, features, replace)	새로운 window 객체를 생성, return한다.

URL 매개 변수는 새로운 window 객체의 URL을 의미한다. name 매개 변수는 새로운 window 객체를 구분하기 위한 window의 속성이다.

features는 새로운 window 객체의 너비, 높이와 같은 특징들을 지정하는 매개 변수이다.

다음은 window.open 메서드를 사용한 예제이다.

자식 window 객체에서 opener라는 속성을 사용하여 부모 window 객체에 접근하는 것을 볼 수 있다.

window 객체는 또한 자신의 형태와 위치를 변경할 수 있는 메서드를 제공한다. 다음은 이를 정리한 표이다.

메서드 이름	설명
moveBy(x, y)	위치를 상대적으로 이동
moveTo(x, y)	위치르 절대적으로 이동
resizeBy(x, y)	크기를 상대적으로 지정
resizeTo(x, y)	크기를 절대적으로 지정
focus()	윈도우에 초점을 맞춤
blur()	윈도우에 초점을 제거
close()	윈도우를 닫음

다음은 moveTo, moveBy 메서드와 setInterval 함수를 사용하여 1초마다 window 객체를 이동하는 예제이다.