웹 브라우저 창에 문서가 표시되는 순간 브라우저는 html 소스를 읽으며 화면에 내용을 표시하고 객체를 만들어낸다.
웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 생성된다.
하위객체는 웹 문서와 주소 표시줄같이 브라우저의 내용에 해당하는 요소를 가리킨다.
이러한 객체 모델을 브라우저객체모델(BOM, Browser Object Model)이라고 한다.
자바스크립트로 객체 모델을 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있게 된다.
브라우저 객체 모델 종류
window
브라우저 창이 열릴때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중 최상위(부모)객체이다.
document
웹 문서마다 하나씩 있고, <body> 태그를 만나면 만들어진다. html 문서의 정보가 담겨있다.
navigator
현재 사용하는 브라우저의 정보가 들어있다.
history
현재 창에서 사용자의 방문 기록을 저장한다.
location
현재 페이지의 url 정보가 담겨있다.
screen
현재 사용하는 화면의 정보가 담겨있다.
1. window
window 객체는 웹 브라우저의 창을 나타내는 객체를 말한다. 브라우저 창 안의 최상위객체로 브라우저 객체 모델(BOM) 뿐 아니라 문서 객체모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 된다. window 객체의 메서드는 전역함수, winodw 객체의 프로퍼티는 전역 변수가 된다.
Document 객체는 웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때, 반드시 Document 객체부터 시작해야한다. Html 요소의 선택과 생성, 이벤트 핸들러 추가, 객체의 선택 등을 진행할 수 있는 다양한 메서드를 제공한다.
navigator는 운영체제에 대한 정보를 가지고 있는 객체를 말한다. window.navigator 는 읽기 전용 속성으로 접근은 불가능하다. 웹 브라우저에 대한 버전을 비롯해 플러그인 설치 정보나 온/오프라인 등의 여러 정보를 담고 있기 때문에 이 객체 안에 있는 정보는 사용자가 수정할 수 없고 가져와서 보여줄 수 만 있다.
브라우저마다 문서를 랜더링 하는 엔진이 다른데, 아직 표준화 되지않은 CSS 속성 앞에는 브라우저 벤더를 의미하는 프리픽스(prefix)를 지정해야만 사용이 가능하다. 이를 벤더프리픽스 혹은 접두사라고 부른다. 이렇게 벤더프리픽스가 된 css는 웹 브라우저에서 문서를 불러올때 내장된 랜더링 엔진으로 소스를 해석한다. 브라우저마다 랜더링 엔진이 달라 벤더 프리픽스를 붙여 브라우저를 구별할 수 있다. 랜더링 엔진은 다른 말로 '레이아웃 엔진'이라고도 한다.
이를 활용해 버튼도 만들 수 있는데, onclick이라는 속성을 활용하여 location.replace(주소)를 입력하면, 버튼을 클릭시 해당 주로소 이동하는 것을 볼 수 있다. 하지만 아래와 같은 버튼은 현재 페이지의 주소를 바꾸는 것이기 때문에 이전으로 돌아갈 수 없다는 단점이 있다.
screen 객체는 사용자의 모니터 정보(속성)을 제공하는 객체로 모니터의 넓이나 높이 또는 컬러 표현 bit를 반환한다.
// 기본형
screen.속성;
속성 종류
screen.width
화면의 너비값을 반환한다.
screen.height
화면의 높이값을 반환한다.
screen.availWidth
작업표시줄을 제외한 화면의 너비 값을 반환한다.
screen.availHeight
작업표시줄을 제외한 화면의 높이 값을 반환한다.
screen.colorDepth
사용자의 모니터가 표현 가능한 컬러 bit를 반환한다.
window 객체
window 객체는 웹 브라우저의 상태를 제어하고 자바스크립트의 최상위에 존재한다. 그래서 자바스크립트의 모든 객체는 window 객체 안에 포함된다. window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다. 프로퍼티를 사용하려면 아래 기본형을 사용한다.
웹 브라우저에서 데이터를 저장한느 세션 스토리지를 반환한다. 휘발성 저장 공간으로 브라우저를 종료하면 저장된 데이터가 모두 사라진다.
메서드 종류
1. alert()
알림창을 표시한다. 확인 버튼을 누르면 다음 줄의 코드를 실행한다.
2. blur()
현재 창에서 포커스를 제거한다.
3. close()
현재 창을 닫는다.
4. confirm()
확인 취소 창으로, 확인을 누르면 true를 반환하고 취소를 누르면 false를 반환한다.
5. focus()
현재 창에 포커스를 부여한다.
6. moveBy(x,y)
현재 창을 지정한 크기만큼 이동시킨다.
7. moveTo(x,y)
현재 창을 지정한 좌표로 이동시킨다.
8. open(경로, 창 이름, 창 옵션)
새로운 창을 여는 메서드이다. 열려고 하는 새로운 창의 경로를 입력하고 창의 이름을 지정해 준다음 옵션을 추가하여 실행한다.
창 이름 같은 경우는 이름을 지정해 주지 않을 경우 계속 새로운 창이 나타난다. 옵션은 left, top 속성을 이용해 위치를 지정하거나, widht, height 속성을 이용해 크기를 지정할 수 있다. 만약 위치를 지정하지 않으면 팝업창을 화면의 가장 좌측 상단에 나타난다.
