[Javascript] 자바스크립트 브라우저 객체 모델 - Window 객체

브라우저 객체 모델(BOM)이란?

• 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.
• 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.

 

Window 객체

• window 객체는 웹 브라우저의 창을 나타내는 객체로 대부분의 웹 브라우저에서 지원하고 있다.
• 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 되며, window 객체의 메소드는 전역 함수이며 window 객체의 프로퍼티는 전역 변수가 된다.
• 문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 된다.

 

Window 메소드

브라우저 창 크기 조절

• window 객체의 innerHeight와 innerWidth 프로퍼티를 이용하면, 브라우저의 창 크기를 설정할 수 있다.
• 브라우저 창이란 웹 브라우저의 뷰포트(viewport)를 의미하며, 브라우저의 툴바나 스크롤 바는 포함되지 않는다.

/* 모든 브라우저에서 창의 크기를 반환 */
// 기본 문법 || 익스플로러 5부터 7버전 문법 1 || 익스플로러 5부터 7버전 문법 2

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

document.write("웹 브라우저의 너비는 " + windowWidth + "픽셀이고, 높이는 " + windowHeight + "픽셀입니다.");

• window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있으므로, 자바스크립트의 모든 전역 객체, 전역 함수, 전역 변수를 사용할 때는 window 접두사를 생략할 수 있다.

// screenX 해당 브라우저 창의 왼쪽 모서리와 사용자 스크린의 왼쪽 모서리 사이의 거리 반환
// screenY 해당 브라우저 창의 위쪽 모서리와 사용자 스크린의 위쪽 모서리 사이의 거리 반환

alert("전역 함수 호출시 window 접두사 생략 가능함!");      // 전역 함수
document.write("현재 브라우저의 수평 위치 " + screenX);  // 전역 변수
document.write("현재 브라우저의 수직 위치는 " + screenY); // 전역 변수
document.write(document.title);                    // 전역 객체

브라우저 새 창 열기

• window 객체의 open() 메소드를 이용하면 새로운 브라우저 창을 열 수 있으며, 새로운 브라우저 창의 세부적인 옵션들도 일일이 설정할 수 있다.

/* 메뉴바, 주소창, 크기조절 손잡이, 스크롤바, 상태바 가진 새로운 브라우저 창 오픈 */

var newWindowObj;
var strWindowFeatures = "menubar = yes,location = yes,resizable = yes,scrollbars = yes,status = yes";

function openWindow() {
    newWindowObj = window.open("/html/intro", "HTML 개요", strWindowFeatures);
}

브라우저 창 닫기

• window 객체의 close() 메소드를 이용하면, 현재 브라우저나 특정 브라우저 창을 닫을 수 있다.

function openWindow() {
    newWindowObj = window.open("/html/intro", "HTML 개요", strWindowFeatures);
}

// 새롭게 연 브라우저 창을 window 객체를 이용하여 다시 닫을 수 있음.
function closeNewWindow() { 
    newWindowObj.close();
}

 

Document 객체

• window 객체의 가장 중요한 프로퍼티 중 하나가 바로 document 객체로, document 객체는 브라우저 창에 표시되는 내용에 해당하는 문서를 나타내는 객체다.
• Document 객체는 웹 페이지 그 자체를 의미하며, 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/