브라우저 객체 모델 - BOM

JavaScript Window

---

BOM이란?

브라우저 객체 모델 (Browser Object Model)이란
자바스크립트가 브라우저와 통신할 수 있게한다.

정확한 정의가 있는 것은 아니지만,
자바스크립트와 상호작용하기 위한 함수나 프로퍼티를 가지고 있다.

---

Window Object

window 객체는 모든 브라우저에서 지원된다.

이 window는 브라우저 창을 뜻한다.
우리가 크롬을 실행하면 크롬이 보이는 그 '창'을 뜻한다.
(팝업창, 새로운 창할 때 그 '창'을 뜻한다)

모든 자바스크립트 객체나 함수, 변수는
window 객체의 멤버가 된다.

예를 들어
전역 변수는 window 객체의 프로퍼티가 되고,
전역 함수는 window 객체의 메소드가 된다.

그리고 document 객체도 window의 프로피티 중 하나이다.

---

창 크기 알아내는 방법

세로: window.innerHeight
가로: window.innerWidth

실제 htlml 객체의 크기와 동일함을 알 수 있다.

---

기타 window 메서드들

window.open(): 새 창 열기
window.close(): 창 닫기
window.moveTo(): 창의 위치 옮기기
window.resizeTo(): 현재 창의 크기 바꾸기

---

정리

[Javascript] Window, DOM, BOM이란?

이 분이 정말 열심히 소개를 해 주셨는데,
이해한 내용을 가지고 얘기해보겠다.

window 객체안에는 크게 세가지가 있다.

DOM: Document Object Model. 오브젝트를 트리의 형태로 구성한 것. window.document로 접근할 수 있다.
BOM: Browser Object Model. 브라우저와 통신하기 위한 모델. navigator, screen, location 등이 있다.
Javascript: 함수, 변수등. 자바스크립트에서 선언된 변수는 window의 프로퍼티로, 함수는 window의 메서드가 된다.

이 DOM, BOM, Javascript가 포함된 window 객체를 보고
웹 브라우저는 화면을 출력하게 된다.

그 중에서 BOM은 브라우저와 관련된 요소를 포함한다.

navigator: 브라우저와 관련된 정보를 담고 있는 객체
screen: 장치의 디스플레이 정보를 담고 있는 객체
localStorage, sessionStorage: 웹 스토리지 API
history: 히스토리에 기록된 웹페이지들을 기억하고 있는 객체
location: 현재 페이지의 URL을 담고 있는 객체

---

navigator 객체

appName: 웹브라우저의 이름. IE, Netscape 등이 있다.
appVersion: 브라우저의 버전.
userAgent: 브라우저가 서버측으로 전송하는 USER-AGENT HTTP 헤더의 내용.
platform: 운영체제에 대한 정보.

---

screen 객체

width: 현재 해상도의 가로 픽셀
height: 현재 해상도의 세로 픽셀
availWidth: width에서 작업표시줄을 제외한 세로 픽셀
availHeight: height에서 작업표시줄을 제외한 세로 픽셀
colorDepth: 한개의 색을 몇 bit로 표현하는가. (값이 24라면 24bit로 색을 표현)

빨간 영역: width x height
초록 영역: availHeight x availWidth
파란 영역: window.innerWidth x window.innerHeight

---

history 객체

go(index): 히스토리 내의 특정 페이지로 이동
back(): 이전 페이지로 이동
forward(): 다음 페이지로 이동
pushState(state, title, url): 히스토리 스택에 기록을 추가한다. state:정보, title: 제목
replaceState(): 히스토리 엔트리를 수정

React와 같은 SPA는 URL의 변경이 히스토리에 적용이 되지 않는다.
그러므로 URL이 변경될 때 직접 history에 넣어주는 작업이 필요하다 (pushState)

---

location 객체

URL과 주소 표시줄와 관련된 객체

http://localhost:3000/goldfish/brain#location?a=3 라는 URL이라고 가정하고
프로퍼티를 살펴보자.

href: 전체 URL. 예) http://localhost:3000/goldfish/brain?#location?a=3
protocol: 통신 프로토콜 예) http:
hostname: 호스트 이름. 예) localhost
port: 포트 번호. 예) 3000
host: 호스트 이름 + 포트번호. 예) localhost:3000
origin: 프로토콜 + 호스트. 예) http://localhost:3000
pathname: 디렉토리 경로. 예) /goldfish/brain
hash: 앵커 이름. 예) #location?
search: 요청 매개변수. 예) ?a=3

즉 전체 URL은 href와 같으며,

protocol + hostname + port + pathname + hash + search와 같다.

---

중요한 것은 실제 port와 다르다는 점이다.
location.port가 ""라고 해서 실제로 연결된 포트가 없지는 않다.
다만 주소표시줄에 입력된 주소 (href)에 포트가 없다면 location.port의 값이 ""로 나오게 된다.

실제 URL과 location 객체 값