BOM(브라우저 오브젝트 모델)
BOM은 브라우저 객체 모델의 약자로 브라우저에 내장된 객체를 “브라우저 객체”라고 합니다.
즉 브라우저 관련 개체 집합 개체이다.
window는 브라우저 객체의 최상위 객체입니다.
window 객체는 하위 객체를 포함하며 계층 구조로 구성됩니다.
BOM에는 window, screen, location, nagivator, history, document가 있다.
인기글
window 객체
JavaScript를 배우면 초반에 사용하는 경고 윈도우 함수 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를 초당 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=”http://uujjjjjnn./m/주소”; 이렇게 사용하는.
location.href=”http://www.google.com”;
* location 오브젝트의 메소드
* location 오브젝트의 속성
| href | url 주소 |
| 호스트 | 호스트 이름과 포트 번호 |
| hostname | localhost, www.google.com |
| 포트 | 포트 번호 |
| pathname | 디렉토리 경로 |
| hash | 앵커 이름(#) 인스타그램 해시태그(#)와 같은 기능 |
| 검색 | 요청한 매개 변수 ?id=dingding&pw=12345 |
| protocol | 프로토콜 유형 http, ftp, file.. |
navigatior 객체
웹 페이지를 실행하는 브라우저에 대한 정보를 제공하는 객체
navigator 객체의 속성
| addCodeName | 웹 브라우저 코드 이름 |
| appName | 웹 브라우저의 이름 |
| appVersion | 웹 브라우저 버전 정보 |
| platForm | 사용 중인 운영 체제(window 또는 linux) |
| userAgent | 웹 브라우저의 전체 정보 |
DOM은 자료가 많은데 BOM은 자료가 많지 않은 것 같고 따로 기록해 본다.
프로퍼티나 메소드는 종류가 정말 많아, 자주 사용하는 대표적인 녀석만으로 기록해 둔다
BOM과 DOM을 알아야 할 JavaScript의 구조? 이해하는 데 도움이됩니다.
잘 알아야합니다 ..
자세한 내용은 아래 링크를 참조하십시오.