사이트로 로고

브라우저 객체 모델(BOM)

브라우저 객체 모델이란?

  • 내장객체는 자바스크립트에 내장되어있는 객체, 브라우저 객체 모델은 브라우저에 내장되어 있는 객체이다.
  • 브라우저 객체의 최상위 객체는 window이며, 계층적 구조로 이루어져 있다.
  • window 하위객체로는 document, screen, location, history, navigator가 있으며
  • document 하위객체로는 body, div 등의 태그들이 있다. (document 하위 객체들은 문서객체모델DOM으로 분류된다.)

window 객체 메서드

open() 새창을 열때 사용한다.
1
2
3
4
5
6
7
window.open("url경로","새창여부설정(또는 창이름","옵션설정");
window.open("naver.com","네이버","width=500,height=200","location=yes");
 
//새창여부설정
"_blank" 새창열림(기본값) / "_parent" 부모프레임에서 열림 / "_self" 현재 페이지에서 대체돼서 열림 / "_top" 로드된 프레임셋을 대체
"name(임의의이름)" 새 창이 열리고 창의 이름을 지정한다. 창의 제목이 바뀌는게 아님. 동일한 이름에 다시 open()을 하면 기존 열림창의 내용이 바뀌며 
다른 이름을 사용하면 또 새창이 열린다. (이런 용도로 이름을 지정하는것)
alert() 경고창을 띄운다
  • window.alert("경고메세지") 또는 alert("경고메세지")로 window는 생략가능하다.
prompt() 질의응답 창을 띄운다
  • prompt("질의내용", "기본답변") - 이것도 window. 생략가능하다.
confirm() 확인/취소 창을 띄운다
  • confirm("업로드 하시겠습니까?") - window.생략 가능하며, 확인을 누르면 true 취소를 누르면 false를 반환한다
moveTo() 창의 위치를 이동시킬때 사용한다.
  • moveTo(x값,y값) - 크롬 오페라에서는 정상작동 하지 않는다.
resizeTo() 창의 크기를 변경시킬때 사용한다.
  • resizeTo(너비값, 높이값) - 크롬 오페라에서는 정상작동 하지 않는다.
setInterval() 일정 간격으로 지속적으로 실행문을 실행시킬때 사용한다.
  • let 참조변수 = setInterval("스크립트 실행문", 시간간격);
  • 시간간격은 밀리초 단위로 써주므로, 1초면 1000을 적어주면 된다.
  • 일정 간격으로 지속되는 이 실행문을 멈추고자할때는 clearInterval(참조변수); 메서드를 사용한다.
setTimeout() 일정 간격으로 한번만 실해행문을 실행시킬때 사용한다.
  • let 참조변수 = setTimeout("스크립트 실행문", 시간간격);
  • setInterval과 같으며, 한번만 실행되고 종료된다. 이 실행문을 취소하고자 할때는 clearTimeout(참조변수);를 사용한다.

screen 객체

  • 기본형은 screen.속성; 이며, 각 속성들을 넣어서 방문자 모니터의 정보를 얻어내는 객체이다.
  • screen.width 화면의 너비를 알려준다.
  • screen.height 화면의 높이를 알려준다.
  • screen.availWidth 작업표시줄을 제외한 화면의 너비값을 알려준다.
  • screen.availHeight 작업표시줄을 제외한 화면의 높이값을 알려준다.
  • screen.colorDepth 사용자 모니터가 표현가능한 컬러bit를 알려준다.

location 객체

  • 사용자 브라우저의 주소창 url에 대한 정보(속성)와 새로고침 기능(메서드)를 제공하는 객체이다.
  • 기본형은 location.속성; 또는 location.메서드(); 이다.
  • location.href 주소영역의 참조 주소를 설정하거나 url을 알려준다.
  • location.hash url에 해시값#에 명시된 값을 알려준다. (#none)
  • location.hostname url에 호스트이름을 설정하거나 알려준다.
  • location.host url에 호스트이름과 포트번호를 알려준다.
  • location.port url에 포트번호를 알려준다.
  • location.protocol url에 프로토콜을 알려준다.
  • location.search url에 쿼리(요청값)를 알려준다. http://abc.com?pageNum=1&sort=DESC
  • location.reload() 새로고침이 일어난다.

history 객체

  • 기본형은 history.메서드(); 또는 history,속성;으로 사용자가 방문한 사이트 중 이전에 방문한 사이트와 다음방문한 사이트로 갈수있는 객체이다.
  • history.back(); 이전 방문페이지로 이동
  • history.forward(); 다음 방문페이지로 이동
  • history.go(이동 숫자); 이동 숫자가 -2면 2단계 이전 페이지로 이동
  • history.length 방문기록에 저장된 목록의 개수를 반환

navigator 객체

  • 기본형은 navigator.속성; 이며, 방문자가 사용하는 브라우저 정보와 운영체제의 정보를 제공하는 객체이다.
  • navigator.appCodeName; 방문자의 브라우저 코드명을 알려준다.
  • navigator.appName; 방문자의 브라우저 이름을 알려준다.
  • navigator.appVersion; 방문자의 브라우저 버전정보를 알려준다.
  • navigator.language; 방문자의 브라우저 사용언어를 알려준다.
  • navigator.product; 방문자의 브라우저 사용엔진이름을 알려준다.
  • navigator.platform; 방문자의 브라우저를 실행하는 운영체제를 알려준다.
  • navigator.userAgent; 방문자의 브라우저와 운영체제 종합 정보를 제공한다.