※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그에서 읽어주세요.
※ 이 글은 프론트엔드 개발자를 위한 자바스크립트 프로그래밍의 글을 참고한 것입니다.
브라우저 객체 모델 (BOM, Browser Object Model)
- BOM은 웹 브라우저와 관련된 객체의 집합을 의미합니다.
- BOM은 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체입니다.
- 간단하게 문서 객체 모델 (DOM, Document Object Model)이라 통합해서 부르기도 합니다.
BOM에 대한 명확한 명세(내용)가 없는 기간이 길었다 보니, 브라우저 제조사들은 자신들이 원하는 대로 BOM을 확장했고 이에 따른 좋은 점도 있었지만 문제점들도 많이 생기게 되었습니다.
window 객체
- window 객체는 다음과 같은 기능을 합니다.
1. 브라우저 창의 자바스크립트 인터페이스 기능
2. ECMAScript Global Object 기능
- 전역에서 선언한 함수와 변수는 모두 window 객체의 프로퍼티 및 메서드가 됩니다. (전역 스코프)
- 페이지에 프레임이 들어 있으면 각 프레임은 독자적인 window 객체를 가지며 이 객체들은 frames 컨렉션에 저장됩니다.
※ 여러 메소드들은 생략하겠습니다.
location 객체
- location 객체는 현재 창에서 불러온 문서 정보와 함께 일반적인 내비게이션 기능을 제공합니다.
- window의 프로퍼티인 동시에 document의 프로퍼티 입니다.
- 현재 문서에 대한 정보를 갖고 있으며 URL을 파싱해서 몇 가지 조각으로 분리해 각각을 프로퍼티로 제공합니다.
- 프로퍼티는 다음과 같습니다.
|
hash |
#기호 다음에 문자가 오는 형태의 URL 해시, URL에 해시가 없다면 빈 문자열을 반환합니다. |
|
host |
서버이름과 포트번호를 나타냅니다. 포트번호가 없다면 서버이름만 나타납니다. |
|
hostname |
서버이름만 나타냅니다. |
|
href |
현재 페이지의 완전한 URL을 나타냅니다. |
|
pathname |
URL에 포함된 디렉토리 및 파일 이름입니다. |
|
port |
URL의 요청 포트입니다. 없다면 빈 문자열을 반환합니다. |
|
protocol |
페이지에서 사용하는 프로토콜(스키마) 입니다. |
|
search |
URL의 쿼리스트링 부분입니다. |
- location 객체를 통해서 다음과 같은 방법으로 페이지를 이동할 수 있습니다.
1. assign( ) 메서드를 사용한다.
2. location.href에 URL을 지정한다. (가장 자주 쓰임)
3. window.location에 URL을 지정한다.
4. repalce( ) 메서드를 사용한다. (history에 기록이 남지않아 뒤로가기 사용이 불가)
navigator 객체
- navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체입니다.
- 이름은 넷스케이프(Netscape)의 초기 웹 브라우저였던 네비게이터(Navigator)에서 유래되었습니다.
- 다른 BOM 객체와 마찬가지로 브라우저에 따라 navigator 객체에서 지원하는 프로퍼티가 다릅니다.
Screen 객체
- screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체입니다.
history 객체
- history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다.
- 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있습니다.
- 여러 메서드를 통해 사용자가 이동한 브라우저 history에서 앞, 뒤로 이동할 수 있습니다.
|
go( ) |
매개변수를 통해 사용자가 이동한 브라우저 history에서 앞, 뒤로 이동할 수 있다. ex) history.go(-1) // 한 페이지 뒤로, history.go(1) // 한 페이지 앞으로 |
|
back( ) |
go( )의 단축형. 브라우저의 뒤로 가기 버튼을 흉내냄. 사용자가 이동한 브라우저 history에서 한 페이지 뒤로 이동할 수 있다. |
|
forward |
go( )의 단축형. 브라우저의 앞으로 가기 버튼을 흉내냄. 사용자가 이동한 브라우저 history에서 한 페이지 앞으로 이동할 수 있다. |
+ 참고하면 좋은 글들
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
[JavaScript 요약 정리] 12. 브라우저 객체 모델(BOM)
12. 브라우저 객체 모델(BOM) 1) BOM(Browser Object Model) - 웹 브라우저와 관련된 객체의 집합 - 객체 모델 종류: window(최상위), location, navigator, history, screen, document - DOM(Document Object Mod..
wickies.tistory.com
'Programming > Javascript' 카테고리의 다른 글
| Babel의 뜻과 사용법 (0) | 2020.04.07 |
|---|---|
| Doom이 아니라 DOM! (문서 객체 모델, Document Object Model) (0) | 2020.04.02 |
| 생성자의 문제점 (생성자 함수를 쓸 때 주의 할 점) (0) | 2020.04.02 |
| 자바스크립트 관점에서 정리한 클래스(Class)와 프로토타입(Prototype)에 대하여 (0) | 2020.04.02 |
| Drag and Drop과 관련하여 (Mozilla 참고) (0) | 2020.04.02 |