본문 바로가기
Web (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 등등

반응형

댓글