모던 웹을 위한 Javascript jQuery 책을 보면서 정리하는 내용이다.
브라우저 객체 모델 (BOM, Browser Object Model)은 웹 브라우저와 관련된 객체의 집합을 의미한다.
대표적인 브라우저 객체 모델로는 window, location, navigator, history, screen, document 객체가 있다.
간단하게 문서 객체 모델(DOM, Document Object Model)이라 통합해서 부르기도 한다.
history 객체 : 기록과 관련된 객체
location 객체 : 주소와 관련된 객체
navigator 객체 : 웹 브라우저와 관련된 객체
screen 객체 : 화면 전체와 관련된 객체
윈도우 객체의 속성과 메서드 출력하기(아주 많다)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Browser Object Model</title> <script> /* window Object */ var output = ''; for (var key in window) { output += key + ' : ' + window[key] + '\n'; } alert(output); </script> </head> <body> </body> </html> | cs |
윈도우 객체는 브라우저 기반 자바스크립트의 최상위 객체이다. alert(), prompt() 함수 모두 window 객체의 메서드이다.
var 키워드로 선언한 일반 변수도 모두 window 객체의 속성이 된다.
새로운 window 객체 생성을 위해서는 open() 메서드를 사용한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Browser Object Model</title> <script> /* window open() */ window.open('http://improver.tistory.com'); </script> </head> <body> </body> </html> | cs |
screen 객체
screen 객체는 웹 브라우저 화면이 아니라 운영체제 화면 속성을 가지는 객체이다.
location 객체
브라우저의 주소 표시줄과 관련된 객체이다. location 객체는 프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보가 있다.
navigator 객체
웹 페이지를 실행하고 있는 브라우저에 대한 정보가 있다.
window 객체의 onload 이벤트 속성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Browser Object Model</title> <script> window.onload = function () { }; </script> </head> <body> </body> </html> | cs |
on으로 시작하는 속성을 이벤트 속성이라 부르며 함수를 할당해야 한다. window 객체 로드가 완료되는 때는 HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간이다.
퇴사 관련 이야기들을 모아 책으로 출판했습니다. 아래 링크에서 전체 목차를 읽어보세요! 대기업 퇴사 이야기 전체보기 : http://www.bookk.co.kr/book/view/21659 아래 링크로 간단한 후기 링크를 남기면 배송비도 환급된다고 하니 참고해주세요.
'문돌이의 IT > JavaScript' 카테고리의 다른 글
| 자바스크립트 예외처리 (0) | 2017.10.19 |
|---|---|
| 자바스크립트 문서객체모델(javaScript BOM) (0) | 2017.10.18 |
| ECMAScript5 Json 객체 (0) | 2017.10.17 |
| ECMAScript5 Array 객체 (0) | 2017.10.16 |
| 자바스크립트 내장객체(3) Array 객체 (0) | 2017.10.15 |