브라우저 객체 모델 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 등등
'Front-End (JS , jQuery)' 카테고리의 다른 글
[HTML/JS] 기본 이벤트 처리 (0) | 2022.05.02 |
---|---|
[HTML/JS] DOM(문서 객체 모델) 기초 (0) | 2022.05.02 |
JS 배열 (Array) - 자바스크립트 (0) | 2022.04.18 |
[HTML/JS] JS기초 : 행맨 게임 만들어보기! (0) | 2022.04.17 |
JS 기초 : 난수 생성하기 - 숫자 맞추기 게임 실습 (0) | 2022.04.15 |
댓글