BOM (Browser Object Model)

uoM·2021년 2월 3일
0

BOM (Browser object Model)

  • 웹 브라우저와 관련된 객체의 집합
  • 객체 모델 종류: window(최상위), location, navigator, history, screen, document
  • DOM(Document Object Model)으로 통합해 취급하기도 한다.
  • 정확히는 자바스크립트가 아닌 웹브라우저가 제공하는 기능 (자바스크립트를 주로 사용하지만 BOM은 브라우저를 조작하기 위한 model이지 javscript 그 자체는 아니다.

매개 변수

  • URL : HTML 페이지 URL

  • name : 각 윈도우 간 통신에 사용하는 이름

  • features : 윈도우 형태 옵션

  • replaced : 히스토리 리스트 옵션

  • 윈도우 객체 생성 예시

    window.open('https://www.google.com', 'child', 'width=500', 'height=300', true);

윈도우 형태 옵션

  • height : 새 윈도우의 높이

  • width : 새 윈도우의 너비

  • location : 주소 입력창 유무

  • menubar : 메뉴 유무

  • resizable : 화면 크기 조절 가능 여부

  • status : 상태 표시줄 유무

  • toolbar : 툴바 유무

  • left: 왼쪽 기준 팝업 위치 지정

  • top: 상단 기준 팝업 위치 지정

  • scrollbars: 스크롤바 유무

  • fullscreen: 풀스크린 출력

  • channelmode: 채널모드 출력

    픽셀값 혹은 yes, no, 1, 0으로 값 입력 가능

window 객체의 기본 메소드

  • moveBy(x, y) : 윈도우의 위치를 상대적으로 이동
  • moveTo(x, y) : 윈도우의 위치를 절대적으로 이동
  • resizeBy(x, y) : 윈도우의 크기를 상대적으로 지정
  • resizeTo(x, y) : 윈도우의 크기를 절대적으로 지정
  • scrollBy(x, y) : 윈도우 스크롤의 위치를 상대적으로 이동
  • scrollTo(x, y) : 윈도우 스크롤의 위치를 절대적으로 이동
  • focus() : 윈도우로
  • blur() : 윈도우에 맞춘 초점 제거
  • close() : 윈도우 종료
  • window.onload : 윈도우 객체 로드 완료시 실행되는 객체
  • 사용 예시

window.onload = function () {};

3) screen 객체

  • 웹브라우저 화면이 아닌 운영체제 화면의 속성을 갖는 객체
  • screen 객체의 속성
  • width : 화면의 너비
  • height : 화면의 높이
  • availWidth : 실제 화면에서 사용 가능한 너비
  • availHeight : 실제 화면에서 사용 가능한 높이
  • colorDepth : 사용 가능한 색상 수
  • pixelDepth : 한 픽셀당 비트 수

4) location 객체

  • 웹브라우저의 주소 표시줄과 관련된 객체
  • location 객체는 프로토콜의 종류, 호스트 명, 문서 위치 등의 정보가 있음
  • location 객체의 속성
  • href : 문서의 URL 주소
  • host : 호스트 이름과 포트번호 // localhost:30763
  • hostname : 호스트 이름 // localhost
  • port : 포트 번호 // 30763
  • pathname : 디렉토리 경로 // /a/index.html
  • hash : 앵커 이름(#~) // #beta
  • search : 요청 매개변수 // ?param=10
  • protocol : 프로토콜 종류  // http:

location 객체의 메소드

  • assign(link) : 현재 위치를 이동
  • reload() : 새로고침
  • replace(link) : 현재 위치를 이동(뒤로가기 사용 불가)
  • 웹페이지를 실행 중인 브라우저에 대한 정보가 담긴 객체
  • navigator 객체의 속성
  • appCodeName : 브라우저의 코드 이름
  • appName : 브라우저의 이름
  • appVersion : 브라우저의 버전
  • platform : 사용 중인 운영체제의 시스템 환경
  • userAgent : 웹 브라우저 전체 정보

0개의 댓글