[JavaScript] BOM이란?

BOM (Browser Object Model)

BOM은 Browser Object Model의 약자로 브라우저에 내장된 객체를 "브라우저객체"라고 한다.

즉 브라우저와 관련된 객체의 집합 객체이다.

window는 브라우저 객체의 최상위 객체가 된다. window객체에는 하위객체를 포함하고, 계층적 구조로 이루어져있다.

BOM에는 window, screen, location, nagivator, history, document가 있다.

사진 출처 : https://ko.javascript.info/browser-environment

 

window객체

자바스크립트를 배우면 초반에 쓰는 경고창함수 alert와 입력창함수 prompt도 window객체의 메서드 중 하나이다.

alert( )가 window.alert( ), prompt( )가 window.prompt( ) 였다는 사실~

 

* window객체의 메서드

open( )	새로운 window객체를 생성하는 메서드  - url : url주소  - width, height : 윈도우 창의 크기  - child : 자식창 (별도의 창)  - location, menubar, resizeable, status, toolbar (yes, no 또는 1, 0)
moveBy(x, y)	윈도우 창을 상대적으로 위치로 이동 (예) moveBy(10,10) 이면 x축10,y축10 씩 이동
moveTo(x, y)	윈도우 창을 절대적으로 위치로 이동
resizeBy(x, y)	윈도우 창을 상대적으로 크기 조절
resizeTo(x, y)	윈도우 창을 절대적으로 크기 조절
scrollBy(x, y)	스크롤바를 상대적으로 위치 이동
scrollTo(x, y)	스크롤바를 절대적으로 위치 이동
focus( )	윈도우 창에 초점을 이동
blur( )	윈도우 창에서 초점을 제거
close( )	윈도우 창을 닫음

 

실습. childWindow를 1초마다 x,y좌표를 10씩(10,10)씩 이동하기 - setInterval( )함수 이용

let childWindow = window.open('','', 'width=300 height=300');

setInterval(function() {
	childWindow.moveBy(10,10)
},1000);

 

screen 객체

브라우저의 화면(window 객체)이 아니라 운영체제화면의 속성을 갖는 객체이다.

가장 많이 사용되는 속성은 width와 height이다.

 

실습. childWindow의 상대위치를 x,y좌표를 10씩(10,10) 이동하면서 크기를 20씩(-20,-20) 조정하기 - setInterval( )함수 이용

let childWindow = window.open('','','width=300 height=300');

  setInterval(() => {
    childWindow.moveBy(10,10),
    childWindow.resizeBy(-20,-20)
  },1000);

 

location 객체

브라우저의 주소표시줄과 관련된 객체이다.

location 객체는 프로토콜의 종류, 호스트이름 등의 정보를 제공해주는 객체이다.

 

주로 location.href = '주소'; 이렇게 사용된다. 

location.href = 'http://www.google.com";

 

* location객체의 메서드

assign(link)	현재위치를 link위치로 이동
reload( )	새로고침
replace(link)	현재위치를 link로 이동시켜서 첫 화면으로 인식 (뒤로가기 버튼을 사용할 수 없음)

 

* location객체의 속성

href	url 주소
host	host이름과 port번호
hostname	localhost, www.google.com
port	포트번호
pathname	디렉토리 경로
hash	앵커이름(#) 인스타그램 해쉬태그(#)같은 기능
search	요청된 매개변수 ?id=dingding&pw=12345
protocol	프로토콜의 종류 http, ftp, file ..

 

navigatior 객체

웹 페이지를 실행하고 있는 브라우저에 대한 정보를 제공하는 객체

 

navigator객체의 속성

addCodeName	웹브라우저의 코드명
appName	웹브라우저의 이름
appVersion	웹브라우저의 버전정보
platForm	사용중인 운영체제 (window인지 linux인지)
userAgent	웹브라우저의 전체적인 정보

 

 

---

DOM은 자료가 많은데 BOM은 자료가 많지는 않은거 같아서 따로 기록해봄 (((((많지 않은 거는 내 기준임...)))))

속성이나 메서드는 종류가 정말 많아서 자주 사용하는 대표적인 녀석들로만 기록해놓음

BOM이나 DOM을 알아야 자바스크립트의 구조?를 이해하는데 도움이 될 거 같당

잘 알아둬야지..

 

자세한건 하단의 링크 참고해야쥐

https://ko.javascript.info/browser-environment