Chapter 15. 브라우저 객체 모델 (BOM)

1. 개요

브라우저 객체 모델(BOM)은 HTML이 구동되는 브라우저에 대한 객체 모델을 말한다.

DOM과 마찬가지로 특정 데이터에 접근하여 이를 조작하거나 혹은 데이터를 받아 기능을 구현할 수 있다.

구동되는 브라우저를 기준으로 하기때문에 Document 안에서 확인하기 어려운 요소를 제어할 수 있다.

창을 종료하거나 스크롤에 따른 상태바를 구현하는게 바로 BOM을 이용한 기능이다. 

 

 

2. Window 객체

 window 객체는 웹 브라우저의 창을 나타내는 객체로 쉽게 말해 웹에서 지금 보고있는 화면 전체를 말한다. window라는 객체가 이미 정의된 상태이며, Document는 window의 프로퍼티 중 하나이다. 이에 따라 Document 에서도 브라우저의 프로퍼티에 접근이 가능하다. 

 

1) 브라우저 창 크기 조절

window 객체의 innerHeight와 innerWidth 프로퍼티를 이용하면, 브라우저의 창 크기를 설정할 수 있다.

여기서 브라우저 창이란 현재 보이는 화면 (body가 표현되는 영역: viewport)를 말한다. 

 

// ① 기본 문법
window.innerHeight
window.innerWidth


// ② 익스플로러 5부터 7버전만을 위한 문법 1
document.documentElement.clientHeight
document.documentElement.clientWidth


// ③ 익스플로러 5부터 7버전만을 위한 문법 2
document.body.clientHeight
document.body.clientWidth


// 예제 1)
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
document.write("웹 브라우저의 너비는 " + windowWidth + "픽셀이고, 높이는 " + windowHeight + "픽셀입니다.");


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

 

2) 브라우저 새 창 열기

window 객체의 open() 메소드를 이용하면, 새로운 브라우저 창을 열 수 있다. 브라우저를 구성하고 있는 각 요소에 대한 값 또한 세세하게 설정이 가능하다. 

 

출처: TCP 스쿨

 

/*메뉴바, 주소창, 크기조절 손잡이, 스크롤 바, 상태 바만을 가지는 새로운 브라우저 창*/
var newWindowObj;
// 변수 strWindowFeatures를 통해 새롭게 여는 브라우저 창의 옵션들을 일일이 설정할 수 있음.
var strWindowFeatures = "menubar = yes,location = yes,resizable = yes,scrollbars = yes,status = yes";
function openWindow() {
    newWindowObj = window.open("/html/intro", "HTML 개요", strWindowFeatures);
}

 

3) 브라우저 창 닫기

function openWindow() {
    newWindowObj = window.open("/html/intro", "HTML 개요", strWindowFeatures);
}
function closeNewWindow() { // 새롭게 연 브라우저 창을 window 객체를 이용하여 다시 닫을 수 있음.
    newWindowObj.close();
}

 

 

3. Location 객체

location 객체는 HTML의 위치를 표현하는 객체로 Window 객체의 Location 프로퍼티와 Document 객체의 Location 프로퍼티에 같이 연결되어 있다.

현재 웹페이지의 html 파일의 경로나 URL를 확인할 때 사용할 수 있다. 

 

1) 현재 문서의 URL 주소

document.write("현재 문서의 주소는 " + location.href + "입니다.");

 

2) 현재 문서의 호스트 이름

document.write("현재 문서의 호스트 이름은 " + location.hostname + "입니다.");

 

3) 현재 문서의 파일 경로명

document.write("현재 문서의 파일 경로명은 " + location.pathname + "입니다.");

 

4) 현재 창에 문서 불러오기

function openDocument() {
    location.assign("/index.php");
}
function openDocumentWithReplace() {
    location.replace("/index.php");
}

 

 

4. History 객체

History 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체이다.

한마디로 웹서핑에 대한 기존 기록을 말하는데, 이러한 기록은 개인 정보에 해당하기 때문에 일부 정보에는접근이 어려울 수 있다. 

 

1) 히스토리 목록의 개수

function openDocument() {
    location.assign("/javascript/js_bom_history");
}
document.getElementById("text").innerHTML =
"현재 브라우저의 히스토리 목록의 개수는 " + history.length + "개 입니다.";

 

2) 히스토리 목록 접근하기

이전 페이지로 가기 예제 1)
<button onclick="goBack()">이전 페이지로 가기</button>...
<script>
    function goBack() {
        window.history.back();
    }
</script>
이전 페이지로 가기 예제 2)
<button onclick="go()">이전 페이지로 가기</button>...
<script>
    function go() {
        window.history.go(-1);
    }
</script>


이전 페이지로 가기 예제 3)
<button onclick="goForward()">다음 페이지로 가기</button>...
<script>
    function goForward() {
        window.history.forward();
    }
</script>

 

5. Screen 객체

Screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체이다.

해당 객체를 이용하면 CSS의 반응형 구현이 가능하다. 

 

1) 사용자의 화면 크기

 

document.write("현재 사용자의 디스플레이 화면의 너비는 " + screen.width + "픽셀입니다.<br>");
document.write("현재 사용자의 디스플레이 화면의 높이는 " + screen.height + "픽셀입니다.<br>");
 
document.write("현재 브라우저 창의 너비는 " + window.outerWidth + "픽셀입니다.<br>");
document.write("현재 브라우저 창의 높이는 " + window.outerHeight + "픽셀입니다.<br>");

 

2) 실제 사용할 수 있는 화면 크기

document.write("실제 사용할 수 있는 화면의 너비는 " + screen.availWidth + "픽셀입니다.<br>");
document.write("실제 사용할 수 있는 화면의 높이는 " + screen.availHeight + "픽셀입니다.");

 

3) 한 색상당 사용할 수 있는 비트수

var bitColorDepth = screen.colorDepth;
document.write("사용자 화면에서 한 색상당 사용할 수 있는 비트수는 " + bitColorDepth + "개입니다.<br>");
document.write("즉, 한 색상은 총 " + Math.pow(2, bitColorDepth) + "가지로 표현됩니다.");

 

4) 화면 픽셀당 표시할 수 있는 비트수

var bitPixelDepth = screen.pixelDepth;
document.write("사용자 화면의 한 픽셀당 표시할 수 있는 비트수는 " + bitPixelDepth + "개입니다.<br>");

 

 

6. Navigator 객체

Navigator 객체는 브라우저 공급자 및 버전 정보 등 브라우저 정보를 저장하는 객체이다.

현재 브라우저의 이름, 버전, 운영 체제를 알 수 있으며 해당 데이터를 통해 브라우저 간의 호환성을 유지할 수 있다.

(브라우저 호환성 유지 기법: 브라우저 스니핑) 최근에는 기능 테스팅을 사용해 브라우저 간의 호환성을 유지하고 있다. 

 

1) 현재 브라우저의 이름

document.write("현재 사용 중인 브라우저의 이름은 " + navigator.appName + "입니다.<br>");
document.write("또한, 해당 브라우저의 코드명은 " + navigator.appCodeName + "입니다.");

 

• 익스플로러 11 버전, 크롬, 파이어폭스와 사파리는 모두 브라우저의 이름을 "Netscape"로 사용한다. 
• 익스플로러 10 이하 버전, 크롬, 파이어폭스, 사파리와 오페라 모두 브라우저 코드명을 "Mozilla"로 사용한다.

 

2) 현재 브라우저의 버전

document.write("현재 사용 중인 브라우저의 버전 정보는 " + navigator.appVersion + "입니다.<br><br>");
document.write("userAgent 프로퍼티로 알 수 있는 추가 정보는 " + navigator.userAgent + "입니다.");

 

3) 현재 브라우저가 실행되고 있는 운영체제

document.write("현재 브라우저가 실행되고 있는 운영체제는 " + navigator.platform + "입니다.");

 

4) 현재 브라우저의 기본 언어 설정

document.write("현재 브라우저의 기본 언어 설정은 " + navigator.language + "입니다.");

 

5) 자바 애플릿 실행 여부

document.write("현재 브라우저는 자바 애플릿를 ");
if (navigator.javaEnabled()) {
    document.write("실행할 수 있습니다.");
} else {
    document.write("실행할 수 없습니다.");
}

 

6) 쿠키(cookie) 사용 여부

document.write("현재 브라우저는 쿠키를 ");
if (navigator.cookieEnabled) {
    document.write("사용할 수 있습니다.");
} else {
    document.write("사용할 수 없습니다.");
}

 

 

7. 대화 상자(dialog box)

사용자에게 보여줄 수 있는 알림창이나 동의창을 말한다. 

 

1) alert() 메소드: 경고 알림창에 해당하며 사용자 확인이 없으면 브라우저 동작이 멈춘다.

window.alert("간단한 메시지");


function alertDialogBox() {
    alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");}

 

2) confirm() 메소드: 동의 알림창에 해당하며 사용자의 동의 여부를 수취한다.

window.confirm("간단한 메시지");


function confirmDialogBox() {
    var str;
    if (confirm("확인이나 취소를 눌러주세요!") == true) {
        str = "당신은 확인을 눌렀습니다!";
    } else {
        str = "당신은 취소을 눌렀습니다!";
    }
    document.getElementById("text").innerHTML = str;
}

 

3) prompt() 메소드: 데이터를 입력받는 알림창이며 사용자가 값을 입력할 수 있다.

window.prompt("간단한 메시지" + "입력란의 기본 메시지");


function promptDialogBox() {
    var inputStr = prompt("당신의 이름을 입력해 주세요 : ", "홍길동");
    if (inputStr != null) {
        document.getElementById("text").innerHTML = "당신의 이름은 " + inputStr + "입니다.";
    }
}

 

 

8. 타이머(timer)

window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 타임 메소드를 제공한다.

설정한 타이머에 따라 함수를 동작할 수 있으며, 이렇게 생성한 타이머 메소드는 호출을 취소할 수도 있다. 

 

1) setTimeout() 메소드

setTimeout() 메소드는 명시된 시간이 지난 뒤에 지정된 함수를 호출한다.

단위는 밀리초를 사용하는데 1/1000초에 해당한다.

 

// 문법)
window.setTimeout(호출할함수, 지연시간);


// 예제)
function startTimeout() {
    setTimeout(printCurrentDate, 2000);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML = new Date();
}

 

2) setInterval() 메소드

setInterval() 메소드는 지정된 시간 간격마다 지정된 함수를 반복적으로 호출한다.

해당 메소드 또한 밀리초 단위를 사용한다. 

 

//문법)
window.setInterval(호출할함수, 지연시간);


//예제)
function startInterval() {
    setInterval(printCurrentDate, 2000);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}

 

3) clearTimeout() 메소드

setTimeout() 메소드의 반환값을 clearTimeout() 메소드의 인수로 전달하면, 계획된 함수의 호출을 취소할 수 있다.

//문법)
window.clearTimeout(timeoutID);


//예제)
var timeoutId;
function startTimeout() {
    timeoutId = setTimeout(printCurrentDate, 2000);
}
function cancelTimeout() {
    clearTimeout(timeoutId);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}

 

4) clearInterval() 메소드

setInterval() 메소드의 반환값을 clearInterval() 메소드의 인수로 전달하면, 반복되는 함수의 호출을 취소할 수 있다.

// 문법)
window.clearInterval(timeoutID);


// 예제)
var timeoutId;
function startInterval() {
    timeoutId = setInterval(printCurrentDate, 2000);
}
function cancelInterval() {
    clearInterval(timeoutId);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}