08. JavaScript - BOM (Browser Object Model)

박지윤·2023년 9월 5일

JavaScript

목록 보기

8/13

JavaScript - BOM(Browser Object Model)

1. BOM이란?

웹 브라우저 전체를 객체고 관리하는 것을 BOM이라고 한다. window는 브라우저 객체의 최상위 객체이고, window 객체는 하위 객체들을 포함하고 있다.

2. 브라우저 내장 객체

객체	설명
Window	브라우저 창이 열릴 때마다 하나씩 만들어지는 객체로 브라우저 창 안에 존재하는 모든 요소의 최상위 객체이다.
Document	웹문서 body 태그를 생성하면 만들어지는 객체로 HTML 문서의 정보를 가지고 있다.
History	현재 창에서 사용자 방문 기록을 저장하고 있는 객체
Location	현재 페이지에 대한 URL 정보를 가지고 있는 객체
Navigator	현재 사용중인 웹 브라우저 정보를 가지고 있는 객체
Screen	현재 사용중인 화면 정보를 다루는 객체

3. Window 객체

Window 객체에는 웹 브라우저 창과 관련된 여러가지 속성이 존재한다. 이 속성을 통해 브라우저 창의 정보를 가져올 수도 있고, 값을 바꿀 수도 있다. 다음은 Window 객체의 여러가지 속성 중 자주 사용되는 속성들만 모아 놓은 표이다.

1) Window 객체 속성

속성	설명
document	브라우저 창에 표시된 웹 문서에 접근
frameElement	현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환. 없을 경우 null을 반환
innerHeight	내용 영역의 높이
innerWidth	내용 영역의 너비
localStorage	웹 브라우저에서 데이터를 저장하는 로컬 스토리지 반환
location	window 객체의 위치/현재 URL
name	브라우저 창의 이름을 가져오거나 수정
outerHeight	브라우저 창의 바깥 높이
outerWidth	브라우저 창의 바깥 너비
pageXOffset	스크롤했을 때 화면이 수평으로 이동하는 픽셀 수
pageYOffset	스크롤했을 때 화면이 수직으로 이동하는 픽셀 수
screenX	브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리
screenY	브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리

console.log(window.innerWidth); //1177
console.log(window.innerHeight); //931

console.log(window.outerWidth); //1920
console.log(window.outerHeight); //1040

innerWidth와 innerHeight는 웹 사이트 내용 부분의 너비와 높이를 나타내고, outerWidth와 outerHeight는 웹 브라우저의 메뉴나 도구 모음, 콘솔창 등까지 포함된 너비와 높이를 나타낸다.

이 너비와 높이는 브라우저 창의 크기에 따라 달라진다.

2) Window 객체 함수

함수	설명
alert()	경고창(알림창) 표시
blur()	부여된 포커스 제거
clearInterval()	setInterval()로 호출한 함수 정지
clearTimeout()	setTimeout()으로 호출할 함수 정지
close()	현재 열려있는 창 닫기
confirm()	확인, 취소 버튼이 있는 확인창 표시
fucus()	현재 창에 포커스 부여
moveBy()	현재 창을 지정한 크기만큼 이동
moveTo()	현재 창을 지정한 좌표로 이동
open()	새로운 창 열기
postMessage()	다른 창으로 메시지 전달
print()	현재 문서 인쇄
prompt()	사용자가 입력한 텍스트를 반환하는 입력창 표시
resizeBy()	지정한 크기만큼 현재 창 크기 조절
resizeTo()	동적으로 브라우저 창의 크기 조절
scroll()	문서에서 특정한 위치로 스크롤
scrollBy()	지정한 크기만큼씩 스크롤
scrollTo()	지정한 위치까지 스크롤
setCursor()	현재 창의 커서를 변경
setInterval()	일정 밀리초마다 함수 호출
setTimeout()	일정 밀리초 후 함수 호출
showModalDialog()	모달 창 표시
sizeToContent()	내용에 맞게 창 크기 조절
stop()	로딩 중지

모달창이란?
이벤트 정보나 공지 내용등을 표시하기 위해 현재 브라우저 위에 띄우는 새로운 창
문서 소스 안에 <div> 태그를 사용해 삽입하고 레이어로 표시한다.

모달창과 팝업창 목적은 같다.
두 가지 모두 사용자의 이목을 집중시키기 위한 창이기 때문이다.
하지만 팝업창은 브라우저에 또 다른 브라우저를 띄우고, 모달창은 브라우저에 레이어를 깐다.
그래서 페이지를 이동해도 창을 닫아야만 사라지는 팝업창과는 달리, 모달창은 페이지를 이동하면 창이 자연스럽게 닫힌다.

3) open

open() 메소드는 새 브라우저 창을 띄울 때 사용된다.

//syntax: window.open("url", "타겟", "옵션");

<body>
  <button onclick="myFunction()">naver</button>
  <script>
    function myFunction(){
      window.open("https://www.naver.com", "_blank", "width=300, height=400, top=100, left=100, popup=yes")
   }
  </script>
</body>

타겟

_self : 현재창에 열기
_blank: 새 탭에 열기
창이름: 입력한 창이름에 열기

옵션

width: 창의 가로 크기
height: 창의 세로 크기
left: 창이 나타날 x 좌표 위치
top: 창이 나타날 y 좌표의 위치
popup: 팝업창 실행 여부 (yes/no)

4) setTimeout

setTimeout()은 일정 시간이 지난 후 함수를 호출하고 싶을 때 사용한다.

// setTimeout(함수명, 지연시간(milliseconds))

<body>
  <p id="title">로딩중</p>
  <button id="btn1">로딩 멈추기</button>
  <script>
    let message = setTimeout(loading, 2000); /*2000밀리 초 뒤에 loading 함수 실행*/

    function loading() {
      title.innerHTML = "로딩 완료"
    }

    btn1.onclick = function () {
      clearTimeout(message); /*setTimeout에서 설정한 타이머(2000밀리 초 뒤에 loading 함수 실행) 삭제 */
    }
  </script>
</body>

5) setInterval

setInterval()은 일정 시간마다 함수를 호출하고 싶을 때 사용한다.

// setInterval(함수명, 지연시간(milliseconds))

<body>
  <div id="box">
  </div>
  <button id="stop_btn">STOP</button>
  <script>
    let i = 0;
    let color = ["#614BC3", "#33BBC5", "#85E6C5", "#EBE76C", "#F0B86E", "#ED7B7B", "#836096"];

    function change_bg() {
      let color_index = Math.round(Math.random()* color.length);
      box.style.backgroundColor = color[color_index];

      if(i >= color.length){
        i = 0;
      }
    }

    let timer = setInterval(change_bg, 2000); /*2000밀리초 간격으로 change_bg 함수 실행*/ 

    stop_btn.onclick = function(){
      clearInterval(timer);  /*2000밀리초 간격으로 change_bg 함수 타이머 삭제*/
    }
  </script>
</body>

4. Navigator 객체

Navigator 객체에는 웹 브라우저와 관련된 정보가 담겨 있다. 웹 브라우저 버전을 비롯해 웹 브라우저가 온라인 상태인지, 어떤 기기로 접속했는지 등을 알 수 있다.

1) 렌더링 엔진

렌더링 엔진이란 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램이다.

브라우저 별로 사용하는 렌더링 엔진이 다르기 때문에 HTML이나 CSS를 해석하는 방법도 다르다. 따라서 표준화 되지 않은 CSS3 속성 앞에는 -webkit- 이나 -oz- 같은 접두어를 붙여 사용자가 접속한 브라우저에 맞게 렌더링 해야 한다.

브라우저	렌더링 엔진	자바스크립트 엔진
크롬(Chrome)	블링크(Blink)	V8
파이어폭스(Firefox)	게코(Gecko)	스파이더몽키(SpiderMonkey)
인터넷 익스플로러(Internet Explorer)	트라이덴트(Trident)	차크라(Chakra)
사파리(Safari)	웹킷(Webkit)	자바스크립트 코어(JavascriptCore)
오페라(Opera)	블링크(Blink)	V8

Navigator 객체 속성

속성	설명
appCodeName	브라우저 이름(코드 이름)을 문자열로 반환
appName	브라우저 공식 이름을 문자열로 반환
appVersion	브라우저 버전을 문자열로 반환
cookieEnabled	쿠키 정보를 무시한다면 false, 아니라면 true 반환
geolocation	모바일 기기를 사용한 위치 정보가 담긴 객체 반환
platform	브라우저 플랫폼 정보를 가지고 있는 문자열 반환
userAgent	현재 브라우저 정보가 있는 사용자 에이전트 문자열 반환

사용자 에이전트
클라이언트에서 서버로 정보를 보낼 때 클라이언트에서 함께 보내는 정보로 서버에서는 이 정보를 통해 브라우저 종류를 확인하고, 그 브라우저에 맞게 웹 페이지를 표시한다. 즉, 사용자 에이전트란 OS, 웹브라우저. 기기정보 등의 사용자 식별 정보를 의미한다.

예제: 운영체제 및 스크린 정보

<body>
  <div id="wrap">
    <h1>운영체제 및 스크린 정보</h1>
    <p id="info_wrap"></p>
    <div id="btn_box">
      <button onclick="info1();">운영체제 정보</button> <br />
      <button onclick="info2();">스크린 정보</button> <br />
      <button onclick="myFunction()">윈도우 팝업</button>
    </div>
  </div>

  <script>
    function myFunction() {
      window.open("https://www.naver.com", "_blank", "toolbar=yes, top=500, left=500, width=400, height=400");
      setTimeout('window.open("https://www.google.co.kr/", "_blank", "toolbar=no, top=500, left=700, width=400, height=400")', 2000); //2초 뒤에 나타남
    }

    function info1() {
      var os = navigator.userAgent.toLowerCase(); //userAgent: OS, 웹브라우저. 기기정보 등의 사용자 식별 정보 , toLowerCase: 소문자로 변경
      var info_wrap = document.getElementById("info_wrap");

      if (os.indexOf("windows") >= 0) {  //문자열에서 특정 문자열을 찾고, 그 문자열이 처음 나타난 위치 index를 리턴, 문자열이 없을 경우 -1 리턴.
        info_wrap.innerHTML = "윈도우";
      } else if (os.indexOf("macintosh") >= 0) {
        info_wrap.innerHTML = "메킨토시";
      } else if (os.indexOf("iphone") >= 0) {
        info_wrap.innerHTML = "아이폰";
      } else if (os.indexOf("android") >= 0) {
        info_wrap.innerHTML = "안드로이드";
      }

      setTimeout("info_wrap.innerHTML = ''", 3000);

    }

    function info2() {
      var screen_w = screen.width;  // 모니터(스크린) 길이
      var screen_h = screen.height; // 모니터(스크린) 높이 
      var info_wrap = document.getElementById("info_wrap");
      info_wrap.innerHTML = screen_w + ' X ' + screen_h;

      setTimeout("info_wrap.innerHTML = ''", 3000);
    }
  </script>
</body>

예제: 일정 시간마다 돌아가는 배너

<body>
  <img src="img/banner/main_1.jpg" name="main_banner">
  <script>
    var img_arr = ["img/banner/main_1.jpg", "img/banner/main_2.jpg", "img/banner/main_3.jpg"];
    var index = 1; //main_1부터 시작하면 main_1이 4초 동안 보이기 때문에 1부터 시작

    function slide() {
      document["main_banner"].src = img_arr[index]; 
      index++;
      if (index >= img_arr.length){
        index = 0;
      }
    }

    setInterval(slide, 2000)
  </script>
</body>