JS BOM

 

 

 

      1. Browser Object Model(브라우저 객체 모델)
      2. 브라우저의 구성요소를 객체로 처리할 수 있다. (브루아주 구성 요소는 이미 객체로 만들어져 있다.)
      3. 주요 브라우저 객체
        1) history : 방문했던 경로를 저장하고 있는 객체
        2) location : 주소(URL)를 처리하는 객체
        3) screen  : 브라우저 화면 정보를 가지고 있는 객체
        4) window  : 브라우저 창 자체를 의미하는 객체 (모든 JavaScript 객체의 최상위 객체, 생략 가능하다)

 

▶ screen 객체

 

 

  <script>

    document.write('<div>화면 너비 : ' + screen.width + '</div>');

    document.write('<div>화면 높이 : ' + screen.height + '</div>');

    document.write('<div>실제 너비 : ' + screen.availWidth + '</div>');

    document.write('<div> 실제 높이 : ' + screen.availHeight + '</div>');

  </script>

 

결과

▶ history 객체

 

 

  <div>

    <input type="button" value="뒤로" onclick="history.back()">

    <input type="button" value="앞으로" onclick="history.forward">

    <input type="button" value="뒤로2번" onclick="history.go(-2)">

  </div>

 

▶ location 객체

 

 

  <div>

    <input type="button" value="네이버" class="btn_link" data-site="naver">

    <input type="button" value="구글" class="btn_link" data-site="google">

  </div>

  <script>

     var btnLink = document.getElementsByClassName('btn_link');

     for(let i = 0; i < btnLink.length; i++){

      btnLink[i].addEventListener('click', function(){

        var url;

        switch(this.dataset.site){

          case 'naver': url = 'https://www.naver.com/'; break;

          case 'google': url = 'https://www.google.com/'; break;

        }

        location.href = url;

      })

     }

  </script>

 

▶ window 객체

→ window.open(url, target, feature)
      1. url     : 열어 줄 창의 경로(생략가능, 생략하면 빈 창 열림)
      2. target  : 열어 줄 창의 이름(생략가능)
      3. feature : 특징
        1) 창 크기 : width, height
        2) 창 위치 : top, bottom, left, right

 

 

  <div>

    <input type="button" value="창열기" id="btn_open">

  </div>

 

 

  <script>

    document.getElementById('btn_open').addEventListener('click', function(){

      // 브라우저 화면의 정중앙에 창 열기, 창 크기는 640px * 480px

      var width = 640;

      var height = 480;

      var left = (screen.width - width) / 2 ;

      var top = (screen.height - height) / 2 ;

      var feature = 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top;

      window.open('', '', feature);

    })

  </script>

 

3개의 결과

창열기누르면 center에 창이열림