JavaScript - browser_object

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" id="btn_naver" data-site="naver">
    <input type="button" value="구글"   class="btn_link""btn_google" data-site="google">
  </div>
  
  <script>
   
    var btnLink = document.getElementsByClassName('btn_link');  
   
    for(let i=0;i<btnLink.length;i++)
    {
      btnLink[i].addEventListener('click',function(){
        console.log(this.dataset.site);
        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 객체 -->
  <div>
    <input type="button" value="창열기" id="btn_open">
    <script>
      /* 
      window.open(url,target,feature)
      1. url    : 열어줄 창의 경로(생략가능 ,생략하면 빈 창 열림)
      2. target : 열어줄 창의 이름(생략가능)
      3. feature:특징
          1) 창 크기 : width,height
          2) 창 위치 :top,bottom,left,right      
      */
     
   
     
      document.getElementById('btn_open').addEventListener('click',function(){
  
           //브라우저 화면의 정중앙에 창열기,창 크기는 640px*480px
      var width =640;
      var height=480;
      
      left=(screen.width-width)/2;
      top=(screen.height-height)/2;
      var feature='width='+width+'height='+height+'left='+left+'top='+top;
      var a=window.open('11_regexpr.html','',feature);
      })
      
      
    </script>
  </div>