JavaScript - BOM(Browser Object Model), Window 객체

BOM

• Browser Object Model(브라우저 객체 모델)의 약자 

• 브라우저의 정보나 URL 정보, 모니터 화면 정보 등을 취득하거나 제어할 수 있는 객체 

• 브라우저 객체의 최상위 객체 'window 객체'
• 'window 객체의 하위 객체'
  • document
  • location
  • screen 
  • history
  • navigator
• window객체 => 전역 변수나 전역 함수를 만들 때 자동으로 생성되는 '글로벌 객체'
• window객체의 내장 메서드들 =>사용할 때는 보통 앞에 window 객체를 생략하고 사용  
  • alert()
  • prompt()
  • confirm() 

alert("window 객체")
window.alert("window 객체")

 

Window 객체

 1) open(), close() 메서드

  open() 메서드

window.open("문서 주소","윈도우 이름","옵션=값, 옵션=값, 옵션=값, ...")

 

 => 옵션들이 모든 브라우저에서 동일하게 적용되지는 않음!!  resizablea 옵션의 경우, 인터넷 익스플로러에서만 적용 가능 !! 

옵션	설명
width = 픽셀값	윈도우의 가로 너비를 설정
height = 픽셀값	윈도우의 세로 너비를 설정
left = 픽셀값	윈도우의 왼쪽 위치를 설정
top = 픽셀값	윈도우의 위쪽 위치를 설정
location = yes 또는 no	윈도우의 주소창을 나타낼 것인지 아닌지 설정
scrollbars = yes 또는 no	윈도우의 스크롤바를 나타낼 것인지 아닌지 설정
menubar = yes 또는 no	윈도우의 메뉴바를 나타낼 것인지 아닌지 설정
toolbar = yes 또는 no	윈도우의 툴바를 나타낼 것인지 아닌지 설정
status = yes 또는 no	윈도우의 상태줄을 나타낼 것인지 아닌지 설정
resizable = yes 또는 no	윈도우의 사이즈 변경이 가능한지 아닌지 설정

 

  close() 메서드

window(현재의 윈도우).close()

 

 => 만약, 팝업창이 뜨지 않을 경우, 브라우저에서 팝업에 관한 설정 메뉴에서 '팝업 허용' 선택후 F5를 누르면 정상 작동!! 

    <button id="bt_open">열기</button>
    <button id="bt_close">닫기</button>

  <script>
    window.onload = function () {
      var bt_open = document.getElementById("bt_open");
      var bt_close = document.getElementById("bt_close");
      var win;

      bt_open.onclick = function () {
        winOpen();
      };

      bt_close.onclick = function () {
        winClose();
      };

      function winOpen() {
        win = window.open(
          "https://jenny-daru.tistory.com/",
          "JennyBlog",
          "width=300,height=300,left=100,top=100"
        );
      }

      function winClose() {
        win.close();
      }
    };
  </script>

 

 

 2) setInterval(), clearInterval(), setTimeout(), clearTimeout() 메서드

메서드	설명
setInterval()	일정 시간마다 지정한 함수를 반복적으로 실행하게 하는 메서드
setTimeout()	설정한 시간이 흐른 뒤에 지정한 함수를 한 번만 실행하게 하는 함수
clearInterval()	setInterval() 과 setTimeout() 메서드를 정지시키는 메서드
clearTimeout()

 

 setInterval()

setInterval(function(){
  실행문
}, 밀리초(1/1000초));



setInterval(함수명,밀리초(1/1000초))

 

[방법 1]

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        height: 30px;
        background: red;
      }
    </style>


    <div id="div_bg"></div>

  <script>
    window.onload = function () {
      var div_bg = document.getElementById("div_bg");
      var color = ["red", "green", "blue"];
      var i = 0;
      setInterval(function () {
        i++;
        if (i > 2) {
          i = 0;
        }
        div_bg.style.backgroundColor = color[i];
      }, 2000);
    };
  </script>

 

[방법 2]

 : 전역함수로 호출하여 사용 가능 

* 주의 * setInterval(changeColor,2000)에서는 'changeColor()'의 형태로 호출하면 안됨!

<script>
setInterval(changeColor,2000);
function changeColor(){
   i++;
   if(i>2){
     i=0;
   }
   div_bg.style.backgroundColor=color[i];
}
</script>

 

 clearInterval() 메서드 

• setInterval() 메서드를 변수에 저장하여 사용 
• setInterval()나 setTimeout()메서드가 실행되면 타이머를 식별하기 위해 ID라는 값을 반환해 주는데 이 ID값을 변수에 저장한 후 clearInterval()나 clearTimeout()메서드의 매개 변수값으로 사용하면 타이머 정지 가능

var timer_id=setInterval(function(){
  실행문
},밀리초)

clearInterval(timer_id);

 

  => 위의 코드에서 setInterval() 메서드를 change_bg변수에 저장하여 if문의 조건이 true가 되면 clearInterval(change_bg) 메서드에

       의해 setInterval() 메서드가 정지 

  <script>
    window.onload = function () {
      var div_bg = document.getElementById("div_bg");
      var color = ["red", "green", "blue"];
      var i = 0;
      var change_bg = setInterval(function () {
        i++;
        if (i > 2) {
          clearInterval(change_bg);
        }
        div_bg.style.backgroundColor = color[i];
      }, 2000);
    };
  </script>

 

 setTimeout() 메서드와 clearTimeout()메서드

• setTimeout()메서드는 설정한 시간 이후에 지정한 함수를 실행하는 메서드
• clearTimeout()메서드는 실행된 setTimeout() 메서드를 정지시키는 메서드

   ex) setTimeout()과 clearTimeout()을 이용하여 브라우저 사이즈가 변경(마우스로 브라우저 드래그하여 사이즈 변경)되면 

         body요소의 배경색이 변하는 예시 

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: red;
      }
    </style>

  <body id="bg"></body>
  
  <script>
    window.onload = function () {
      var bg = document.getElementById("bg");
      var color = ["red", "green", "blue"];
      var i = 0;
      var change_bg;
      this.onresize = function () {
        clearTimeout(change_bg);
        change_bg = setTimeout(function () {
          i++;
          if (i > 2) {
            i = 0;
          }
          bg.style.backgroundColor = color[i];
        }, 250);
      };
    };
  </script>

 

 3) 기타 메서드들

메서드	설명
moveBy(x,y)	윈도우의 위치를 상대 좌표로 이동
moveTo(x,y)	윈도우의 위치를 절대 좌표로 이동
resizeBy(x,y)	윈도우의 사이즈를 상대 사이즈로 변경
resizeTo(x,y)	윈도우의 사이즈를 절대 사이즈로 변경
scrollBo(x,y)	윈도우의 스크롤 위치를 상대적으로 변경
scrollTo(x,y)	윈도우의 스크롤 위치를 절대적으로 변경
blur()	윈도우에 포커스를 맞춤
focus()	윈도우에서 포커스를 벗어나게 해 줌
print()	현재 윈도우의 내용을 인쇄