BOM

Browser Object Model

브라우저 객체 모델

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

• window (최고조상)
  • document (DOM)
  • location
  • screen
  • history
  • navigator

window

자바스크립트에서 최상위 객체로 생성되는 객체가 window 하위에 존재

브라우저 창에 대한 설정을 담당

• moveBy(x,y) | moveTo(x,y) : 윈도우 위치 조정 (상대|절대)
• resizeBy(x,y) | resizeTo(x,y) : 윈도우 크기 조정 (상대|절대)
• scrollBy(x,y) | scrollTo(x,y) : 스크롤 위치 이동 (상대|절대)
• focus() : 윈도우에 초점 맞춤
• blur() : 윈도우에 초점 제거
• close() : 윈도우 닫기

window.open (param1, param2, param3)

너비와 높이를 입력하여 새 창을 띄움

param1 : 주소 (새창에 로드할 html 파일 위치)

param2 : 열릴 방식 or 이름

param3 : 옵션(창의 크기 위치 등)

• height - 높이
• width - 너비
• location - yes | no | 1 | 0 (주소 입력 창)
• menubar - yes | no | 1 | 0 (메뉴 유무)
• resizeable - yes | no | 1 | 0 (화면크기 조절)
• status - yes | no | 1 | 0 (상태 표시줄)
• toolbar- yes | no | 1 | 0 (툴바 표시)

const btn1 = document.querySelector("#btn1");
btn1.onclick = function(){
    window.open("https://www.naver.com","_black","width=500px, height = 500px");
}

window.setTimeout (function(){}, ms)

ms 단위의 일정 시간이 지난 후 함수를 한 번만 실행

window.clearTimeout(변수)

setTimeout의 함수 실행을 취소

const btn1 = document.querySelector("#btn1");
let timeoutId; // setTimeout을 담는 변수 생성

btn1.onclick = function(){
    timeoutId = window.setTimeout(function(){
        alert("짠");
    }, 5*1000) // 5초
}

const btn2 = document.querySelector("#btn2");
btn2.onclick = function(){
    window.clearTimeout(timeoutId);
}

window.setInterval()

일정 시간마다 함수를 반복 실행

window.clearInterval()

setInterval 함수를 종료

window.onload()

윈도우 객체가 로드 완료 되면 자동으로 onload에 설정되어 있는 함수 실행

윈도우 객체 로드 완료 : 모든 태그가 화면에 나타났을 때

window.onload = function(){
	로직구성 또는 작성된 함수 호출
}

Screen

client 운영체제 화면에 대한 속성값을 가지는 객체

• height
• width
• availWidth : 실제 화면에서 사용 가능한 너비
• availHeight : 실제 화면에서 사용 가능한 높이
• colorDepth : 사용 가능한 색상 수
• pixelDepth : 한 픽셀 당 비트 수

location

브라우저의 주소표시중(URL)과 관련된 객체

프로토콜 종류, 호스트 이름, 문서위치 등의 정보를 가짐

• hash : 앵커이름(#~)
• host : 호스트 이름과 포트번호
• hostname : 호스트 이름
• href : 문서 URL주소
• origin : 호스트이름, 프로토콜, 포트번호
• pathname : 디렉토리 경로
• port
• protocol : 프로토콜 종류
• search : 요청 매개변수
• assign('주소') : 새로운 페이지 로드 > 뒤로가기 가능
• reload() : 현재 문서 새로고침
• replace('주소') : 현재 페이지를 새 페이지로 교체 > 뒤로가기 불가능

navigator

브라우저에 대한 정보를 가지는 객체

• appCodeName : 브라우저 코드명
• appName : 브라우저 이름
• appVersion : 브라우저 버전
• platform : 사용중인 운영체제
• userAgent : 브라우저 전체 정보
• cookieEnabled : 쿠키 가능성을 확인 (true|false)
• geolocation : 위도와 경도
• language : 브라우저 언어
• online : 브라우저가 온라인/오프라인 환경인지 확인 (true|false)
• product : 브라우저 엔진 이름