브라우저 객체 모델

javascript-basic-grammer-08.md

개요

• javascript 재학습하면서 잊고 있던것, 긴가민가 했던것 재학습하면서 기록

브라우저 객체 모델(BOM, Browser Object Model)이란

• 웹 브라우저와 관련된 객체의 집합(window, location, navigator, history, screen, document)
• 웹 브라우저 기능 요소를 직접 관리/제어할 수 있는 특별한 객체 모음
• 자바스크립트 프로그래밍 언어를 작동하게 하는 웹 브라우저라는 플랫폼이 제공하는 기능
• window
  • location
  • navigator
  • history
  • screen
  • document

window

• 자바스크립트의 브라우저 기반 최상위 객체
• 이벤트 속성
  • 문서 객체의 속성중 on으로 시작하는 속성
  • 이벤트 속성에는 함수를 할당해야 함
• onload
  • window 객체 로드가 완료되고 자동으로 할당한 함수를 실행
  • HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간이 로드가 완료되는 순간임
• 모바일 장치의 방향
  • window.orientation 속성은 모바일 장치에만 있는 속성
  • 현재 모바일 장치의 방향을 나타냄
  • 0, 180: 세로방향
  • 90, -90: 가로 방향

if (window.orientation == 0 || window.orientation == 180) {
  console.log('세로');
} else if (window.orientation == 90 || window.orientation == -90) {
  console.log('가로');
}

screen

• 웹 브라우저의 화면이 아니라 운영체제 화면의 속성을 갖는 객체

location

• 웹 브라우저의 주소 표시줄과 관련된 객체
• 프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보가 있음
• replace(link)
  • 뒤로 가기 할시 이전 페이지 주소 기록이 없음
  • 뒤로 가기 버튼을 이용해서 계속 저장하는걸 막을 때 사용 가능
• assign(link)
  • 현재 위치를 이동
• reload()
  • 새로 고침
• href

navigator

• 웹 페이지를 실행하고 있는 브라우져에 대한 정보가 있음
• userAgent
  • 웹 브라우져의 전체 정보
• platform
  • 사용중인 OS의 시스템 환경