본문 바로가기
Front-End (JS , jQuery)

[HTML/JS] BOM(Browser Object Model) , window객체

by 코딩하는 동현😎 2022. 4. 18.

브라우저 객체 모델 BOM이란?

BOM은 웹브라우저의 객체들의 모음입니다.

최상위 객체는 window고, 그중 html에 해당하는 객체는 DOM(Document Object Model) 문서 객체 모델입니다.

밑의 사진에 노란색 부분이죠.


최상위 객체 , window

window는 브라우저 하나의 윈도우를 표현하는 객제입니다.

모든 JS’s global objects, functions, variables는 window 객체의 멤버 중 하나입니다.


window의 함수들 (상세내용X , 문법 요약)


window.open(url, name, specs, replace);

새로운 윈도우를 엽니다. 반환값은 윈도우, 실패하면 null

 

ex) window.open('http://www.google.com', '_blank', 'width=300, height=300', true)

  • url : 새창에 보여질 주소
  • name : 새로 열릴 창의 속성 또는 이름을 지정합니다.
  • specs : 선택적인 값으로 창의 크기, 스크롤여부, 리사이즈 가능등의 속성을 지정합니다.
  • replace : 히스토리 목록에 새 항목을 만들지 현재 항목을 대체할지 지정합니다.
    • true:현재 히스토리를 대체합니다
    • false : 히스토리에 새 항목을 만듭니다

window.moveTo(x,y);

윈도우 창이 절대적 위치 이동합니다.


window.resizeTo(width , height);

윈도우 크기를 설정해줍니다.

 

ex) window.resizeTo(screen.availWidth, screen.availHeight)


window.onload()

사용법은 window.onload라는 메서드를 오버라이딩(재정의) 해주면 됩니다.

window라는 객체가 웹 문서를 불러올때, 문서가 사용되는 시점에 실행되는 onload라는 함수를 직접 재정의 해주는 것 입니다.

 

ex) window.onload = setCTime;  //setCTime()이라는 함수로 오버라이딩한다.

 

setCTime()이아니라 setCTime입니다! setCTime()은 함수 자체를 호출하는 것이고 setCTime는 함수 자체의 객체이기 때문입니다.


다음 포스트 부터는 window가 가지고 있는 여러 객체들을 하나씩 포스팅 하겠습니다!

document(DOM) , location 등등

반응형

댓글