예제로 배우는 자바스크립트 요약 및 코드 분석 13장 13.1~13.4

13장 브라우저 객체 모델(BOM)

  브라우저 객체 모델(BOM)은 브라우저에 관련된 객체를 통하여 모든 정보와 기능을 제공한다. 13장에서는 새 창 열기, 창 닫기, 창 크기 가져오기 등의 기능을 가진 Window 객체에 대해 배운다. 그리고 모니터 화면에 관련된 Screen 객체, 웹 페이지 URL에 관련된 Location 객체, 페이지 방문 히스토리를 다루는 History 객체 등에 대해서도 알아보자. 마지막으로 일정 시간 후에 함수를 동작시키거나 반복 실행 시키는 setTimeout()과 setInterval() 메서드에 대해서 학습한다.

 

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

  자바스크립트에서 브라우저에 대한 정보를 이용하거나 브라우저를 제어하려고 할 때 필요한 것이 브라우저 객체 모델(Browser Object Model, BOM)이다. BOM은 말 그대로 브라우저에 관련된 객체를 통하여 모든 정보와 기능을 제공한다.

 

BOM 관련 객체
객체	설명
Window 객체	존재하는 모든 객체들이 소속된 객체이며, 브라우저 창을 의미
Document 객체	웹 페이지에 있는 모든 요소들이 소속된 객체
Screen 객체	사용자가 사용하는 컴퓨터 스크린에 대한 정보를 담고 있는 객체
Location 객체	웹 페이지에 URL에 관련된 객체
History 객체	브라우저에서 사용했던 URL 히스토리를 제어하는 객체
Navigator 객체	실행 중인 브라우저에 대한 정보를 담고 있는 객체

 

13.2 Window 객체

  Window 객체는 브라우저 창(window)을 의미하는 객체로 자바스크립트에서 사용하는 모든 객체, 전역 함수, 전역 변수들은 모두 자동으로 Window 객체의 프로퍼티가 된다. 그리고 Window 객체의 메서드는 전역 함수이며, Window 객체의 프로퍼티는 전역 변수가 된다.

 

다음은 Window 객체와 다른 객체와의 관계를 설명하는 구성도이다.

Window 객체는 모든 객체들의 조상이기 때문에 Window 객체의 프로퍼티와 메서드에서 'window' 표기를 생략할 수 있다. 예를 들어 Window 객체의 메서드 window.alert(), window.open(), window.close() 등은 window를 생략하여 그냥 alert(), open(), close() 에서와 같이 사용하는 것이 가능하다.

 

13.2.1 새 창 열기

  Window 객체의 open() 메서드는 브라우저에서 새 창을 여는 데 사용된다.

예제 13-1. window_open() 메서드 사용 예 1

window_open1.html

코드 원문

<button onclick="newWin()">새 창 열기</button>

<script>
    function newWin() {
        window.open("https://www.w3schools.com");
    }
</script>

예제 13-1. window_open() 메서드 사용 예 1

window_open1.html

코드 원문

<button onclick="newWin()">새 창 열기</button>

<script>
    function newWin() {
        window.open("https://www.w3schools.com");
        /* window.open("https://www.w3schools.com")은 브라우저 새 창을
        연다. 여기서 새 창의 URL 주소는 'https://www.w3schools.com'이 된다. */
    }
</script>

'새 창 열기' 보튼을 클릭하면 새 창이 열리고 새 창에는 'https://www.w3schools.com' 사이트의 메인 페이지가 표시된다.

 

다음은 window.open() 메서드를 사용할 때 브라우저 창의 크기, 스크롤바 등을 설정하는 예이다.

예제 13-2. window_open() 메서드 사용 예 2

window_open2.html

코드 원문

<button onclick="newWin()">구글 새 창 열기</button>

<script>
    function newWin() {
        window.open("https://www.google.com", "_blank", 
        "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
    }
</script>
</body>
</html>

windows.open() 메서드에서는 세 개의 매개변수가 사용된다. 첫 번째 매개변수는 새 창에 들어갈 URL 주소를 나타낸다. 두 번째 매개변수는 새 창의 이름을 의미한다. 그리고 세 번째 매개변수는 다음과 같은 새 창 옵션 정보들이 들어간다.

Window.open() 메서드의 새 창 옵션
옵션	값	설명
toolbar	yes | no	브라우저 툴바 사용 여부
scrollbars	yes | no	스크롤바 사용 여부
resizable	yes | no	창의 크기 조절 가능 여부
top	픽셀	창의 상단 위치
left	픽셀	창의 좌측 위치
width	픽셀	창의 너비
height	픽셀	창의 높이

 

13.2.2 창 닫기

Window 객체의 close() 메서드는 브라우저에서 창을 닫는 데 사용된다.

예제 13-3. window_close() 메서드 사용 예

window_close.html

코드 원문

<button onclick="newWin()">새 창 열기</button>
<button onclick="closeWin()">창 닫기</button>

<script>
    function newWin() {
        window1 = window.open("https://www.w3schools.com");
    }
    function closeWin() {
        window1.close();
    }
</script>

예제 13-3. window_close() 메서드 사용 예

window_close.html

코드 원문

<button onclick="newWin()">새 창 열기</button>
<button onclick="closeWin()">창 닫기</button>

<script>
    function newWin() {
        window1 = window.open("https://www.w3schools.com");
        // window.open() 메서드를 이용해서 새 창을 연 다음 열린 창의 객체를 window1에 저장한다.
    }
    function closeWin() {
    // window.open() 메서드를 이용해서 새 창을 연 다음 열린 창의 객체를 window1에 저장한다.
        window1.close();
    }
</script>

 

13.2.3 창 크기 가져오기

  Window 객체의 innerWidth/innerHeight와 outerWidth/outerHeight 프로퍼티를 이용하면 브라우저 창의 크기에 대한 정보를 가져올 수 있다.

예제 13-4. Window 객체의 창 크기 관련 프로퍼티

window_width.html

코드 원문

<p id="show"></p>
<script>
    text = "";
    text += "innerWidth: " + window.innerWidth + "px<br>";
    text += "innerHeight: " + window.innerHeight + "px<br>";
    text += "outerWidth: " + window.outerWidth + "px<br>";
    text += "outerHeight: " + window.outerHeight + "px<br>";
    document.getElementById("sohw").innerHTML = text;
</script>

예제 13-4. Window 객체의 창 크기 관련 프로퍼티

window_width.html

코드 원문

<p id="show"></p>
<script>
    text = "";
    text += "innerWidth: " + window.innerWidth + "px<br>";
    /* 변수 text에 문자열 "innerWidth: " + window.innerWidth + "px<br>" 저장 */
    text += "innerHeight: " + window.innerHeight + "px<br>";
    text += "outerWidth: " + window.outerWidth + "px<br>";
    text += "outerHeight: " + window.outerHeight + "px<br>";
    document.getElementById("sohw").innerHTML = text;
</script>

Window 객체의 innerWidth/innerHeight 프로퍼티는 브라우저 창에서 창 틀을 제외하고 스크롤을 포함한 창의 너비와 높이를 의미한다. 그리고 outerWidth/outerHeight 프로퍼티는 브라우저 창의 전체 너비와 높이를 나타낸다.

 

13.3 Screen 객체

  Screen 객체는 사용자의 컴퓨터 모니터 화면에 관련된 정보를 담고 있다. width, height, colorDepth 프로퍼티는 각각 모니터 화면의 너비, 높이, 색상당 비트 수를 나타낸다.

13.3.1 모니터 화면의 너비와 높이

  Screen 객체의 width와 height 프로퍼티는 사용자 모니터 화면의 너비와 높이를 픽셀 단위로 나타낸다.

예제 13-5. Screen 객체의 width/height 프로퍼티

screen_width.html

코드 원문

<p id="show"></p>
<script>
    text = "";
    text += "screen.width: " + screen.width + "px<br>";
    text += "screen.height: " + screen.height + "px";
    document.getElementById("show").innerHTML = text;
</script>

예제 13-5. Screen 객체의 width/height 프로퍼티

screen_width.html

코드 원문

<p id="show"></p>
<script>
    text = "";
    text += "screen.width: " + screen.width + "px<br>";
	/* 문자열 "screen.width: " screen.width 출력 */
    text += "screen.height: " + screen.height + "px";
    document.getElementById("show").innerHTML = text;
</script>

현재 사용 중인 모니터의 해상도가 1536 x 864 픽셀임을 알 수 있다. 이와 같이 Screen 객체의 width와 height 프로퍼티를 이용하면 사용 중인 디스플레이 화면의 해상도를 가져올 수 있다.

 

13.3.2 모니터 색상당 비트 수

  screen 객체의 colorDepth 프로퍼티는 사용자 모니터 화면의 색상을 표현하는 비트 수를 얻는 데 사용된다. 대부분의 컴퓨터는 24 비트의 트루 컬러(true color)나 32 비트의 딮 컬러(deep color)를 사용한다.

예제 13-6. screen 객체의 colorDepth 프로퍼티

screen_deep_color.html

코드 원문

<p id="show"></p>
<script>
    text = "색상당 비트 수: " + screen.colorDepth;
    document.getElementById("show").innerHTML = text;
</script>

예제 13-6. screen 객체의 colorDepth 프로퍼티

screen_deep_color.html

코드 원문

<p id="show"></p>
<script>
    text = "색상당 비트 수: " + screen.colorDepth;
    document.getElementById("show").innerHTML = text;
</script>

 

13.4 Location 객체

  Location 객체는 브라우저의 현재 페이지에 해당하는 URL 주소를 얻거나 현재 페이지에 새로운 문서를 불러올 때 주로 사용된다. 또한 Location 객체를 이용하면 현재 문서의 경로와 사용 중인 호스트의 이름을 가져올 수 있다.

 

13.4.1 웹 페이지의 URL 주소
Location 객체의 href 프로퍼티를 이용하면 현재 웹 페이지의 URL 주소를 가져올 수 있다.

예제 13-7. Location 객체의 href 프로퍼티 사용 예 1

location_href1.html

코드 원문

<p id="show"></p>
<script>
    document.getElementById("show").innerHTML = location.href;
</script>

location.href는 혀재 웹 페이지의 URL 주소를 나타낸다. 만약 서버에서 예제 13-7을 실행하면 http://(또는 https://)로 시작하는 URL 주소가 나타낼 것이다.

 

location.href는 다음 예제에서와 같이 현재 페이지에 특정 URL 주소를 설정하는 데도 사용된다.

예제 13-8. Location 객체의 href 프로퍼티 사용 예 2

location_href2.html

코드 원문

<button onclick="setURL()">URL 설정하기</button>
<script>
    function setURL() {
        location.href = "https://www.naver.com";
    }
</script>

예제 13-8. Location 객체의 href 프로퍼티 사용 예 2

location_href2.html

코드 원문

<button onclick="setURL()">URL 설정하기</button>
<script>
    function setURL() {
        location.href = "https://www.naver.com";
        /* 'URL 설정하기' 버튼을 클릭하면 location.href에 설정된
        네이버 메인 페이지를 현재 웹 페이지에 불려온다. */
    }
</script>

 

13.4.2 파일 경로 가져오기

  Location 객체의 pathname 프로퍼티를 이용하면 현재 문서의 파일 경로를 가져올 수 있다.

예제 13-9. Location 객체의 pathname 프로퍼티

location_pathname.html

코드 원문

<p id="show"></p>
<script>
    document.getElementById("show").innerHTML = location.pathname;
</script>

예제 13-9. Location 객체의 pathname 프로퍼티

location_pathname.html

코드 원문

<p id="show"></p>
<script>
    document.getElementById("show").innerHTML = location.pathname;
    /* location.pathname은 현재 웹 페이지에 나타난 문서의 파일 이름을 가져온다.
    만약 서버에서 위 예제를 실행하면 서버의 파일 경로를 가져온다. */
</script>

location.pathname은 파일 이름이 포함된 문서의 경로를 가져오는데 사용된다.

 

13.4.3 호스트 이름 가져오기

  Location 객체의 hostname 프로퍼티를 이용해서 현재 문서의 호스트, 즉 서버 컴퓨터의 이름을 가져온다.

예제 13-10. Location 객체의 hostname 프로퍼티

location_hostname.html

코드 원문

<p id="show"></p>
<script>
    document.getElementById("show").innerHTML = location.hostname;
</script>

location.hostname은 현재 문서가 사용 중인 호스트 이름을 가져오는 데 사용된다. 호스트는 웹에서 서버 컴퓨터를 의미한다.

지금까지 실습하고 있는 로컬 환경, 즉 XAMPP에서 location_hostname.html을 실행하면 로컬 컴퓨터는 호스트가 설정되어 있지 않기 때문에 브라우저 화면에는 아무것도 나타나지 않는다는 점에 유의하기 바란다.

 

13.4.4 새로운 문서 불러오기

  Location 객체의 assign() 메서드는 현재 웹 페이지에서 새로운 문서를 불러울 때 사용된다.

예제 13-11. Location 객체의 assign() 메서드

location_assign.html

코드 원문

<button onclick="loadDoc()">새로운 문서 불러오기</button>
<script>
    function loadDoc() {
        location.assign("https://www.google.com");
    }
</script>

예제 13-11. Location 객체의 assign() 메서드

location_assign.html

코드 원문

<button onclick="loadDoc()">새로운 문서 불러오기</button>
<script>
    function loadDoc() {
        location.assign("https://www.google.com");
        /* location.assign("https://www.google.com")은 인수로 설정된
        구글 사이트의 메인 페이지를 불러온다. Location 객체의 assign() 메서드는
        매개변수로 지정된 URL 주소에 존재하는 문서를 불러온다. */
    }
</script>