자바스크립트 공부(9) - 브라우저 객체 모델(BOM)

브라우저 객체 모델(BOM)이란 웹 브라우저 전체를 객체로 관리하는 것을 말한다. BOM을 통해서 자바스크립트 프로그램이 브라우저 창을 관리할 수 있다.

출처 : https://www.splessons.com/lesson/javascript-bom/

Window 객체는 브라우저 창이 열릴 때 가장 먼저 만들어지는 객체이다. 이 객체는 최상위에 존재하며 그 하위에 브라우저 각 요소에 해당하는 객체들이 존재한다. DOM에 속하는 Document 객체 역시 Window 객체 안에 속해있다.
웹 페이지 '내'에 존재하는 요소들을 관리할 때는 DOM, '밖'에 존재하는 요소들을 관리할 때는 DOM을 사용한다고 생각하면 될 것 같다.

 

 

1. Window 객체

---

(1) 속성

• innerWidth, innerHeight : 웹 사이트 내용 부분의 너비와 높이

• outerWidth, outerHeight : 웹 브라우저의 메뉴 등까지 포함된 너비와 높이
  그 외 속성들 :(2) 함수Window 객체는 기본 객체이기 때문에 window.를 생략하고 함수 이름만 입력해서 사용할 수 있다.
  * 모달 창(Modal Window) : 현재 브라우저 창 내에 띄우는 새로운 창이다. 일반 팝업 창은 새 웹 브라우저 창을 띄우지만 모달 창은 문서 소스 내에 <div> 태그를 사용해 삽입하고 레이어로 표시한다.

(2) 함수

• open() : 새 창을 연다. 첫 번째 매개변수는 창을 열 문서나 사이트 주소, 두 번째 매개변수는 새 창의 타깃이나 윈도우 이름, 세 번째 매개변수는 알림 창으로 열 때의 너비, 높이, 위치 등이 들어간다.
  * 만약 브라우저가 팝업을 차단했다면 window.open()은 null을 반환한다. 팝업이 차단되었는지 확인하려면 반환값이 null인지 확인하면 된다.
  *

  <a href="javascript:window.close();"></a>

  🔺 HTML 태그 내에서 자바스크립트 소스 사용하기

• resizeBy(), resizeTo() : 각각 현재 브라우저 창의 크기를 기준으로 크기를 조절, 최종 크기를 지정한다. ResizeBy()에는 음수를 사용할 수 있지만 resizeTo()는 음수를 사용할 수 없다.

• moveBy(), moveTo() : 알림 창의 위치를 조절하며, x값과 y값을 매개변수로 사용한다. 각각 현재 위치, 왼쪽 위 모서리를 기준으로 이동한다.

 

2. Navigator 객체

---

Navigator 객체를 사용하면 사용자의 브라우저 정보 등을 알 수 있다. 브라우저의 종류가 많아지고 웹 애플리케이션이 등장하면서 진동 감지 속성, 배터리 상태 확인 속성 등 새로운 속성들이 추가되고 있다.

• 렌더링 엔진(Rendering Engine) : 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그나 스타일을 해석하는 프로그램. 웹 브라우저마다 내장된 엔진이 다르다.
• 자바스크립트 엔진 : 자바스크립트 소스를 해석하는 엔진이며 역시 웹 브라우저마다 다르다.
• 사용자 에이전트 문자열 : 사용자 에이전트(User Agent) 문자열은 클라이언트에서 서버로 정보를 보낼 때 클라이언트에서 함께 보내는 정보로, 이 정보를 보고 브라우저 종류를 확인하고 그에 맞는 웹 페이지를 표시한다. 인터넷 익스플로러 사용자에게 크롬 브라우저로 접속하라는 메시지를 띄워야 할 때 이 속성을 이용할 수 있다.
  
  브라우저별 사용자 에이전트 문자열 확인 : http://useragentstring.com/pages/useragentstring.php

* indexOf() : 문자열에서 괄호 안에 지정한 내용이 있는지 확인하는 함수이다. 해당 내용이 있다면 그 내용의 인덱스 값을, 없다면 -1을 반환한다.

 

 

 

드디어 자바스크립트 기초 공부 끝!!!!!! 얼른 응용해봐야지☺

 

* 자바스크립트 공부(1)~(8)의 모든 내용은 Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편 책을 참고했습니다.