[10일차] Do it! 자바스크립트 입문 / 10 웹 브라우저를 다루는 방법, 브라우저 객체 모델

전구 모양(💡) 이모티콘은 공부하면서 깨달은 부분을 적어두었습니다.

---

< 10-1 브라우저 객체 모델이란? >

- 문서 객체 모델(DOM) : 웹 '문서'에 삽입된 각 요소를 객체로 인식하고 조작하는 것

- 브라우저 객체 모델(Browser Object Model) : 웹 '브라우저' 전체를 객체로 관리하는 것

  * 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것

- 브라우저 창이 열리면 ① Window 객체가 생성되고,

  ② 그 하위에 브라우저 각 요소에 해당하는 객체가 생성됨

  이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저의 각 요소에 해당하는 객체이며

  각각 또 다른 하위 객체를 갖고 있음

 

 

- 최상위에 있는 Window 객체를 시작으로 하는 객체 모델 계층도

  * 웹 문서에 해당하는 Document 객체는 웹 문서를 관리하고 수정할 때 '문서 객체 모델(DOM)'을 사용

 

 

- 자주 사용하는 브라우저 내장 객체

 

 

 

 

 

< 10-2 웹 브라우저를 제어하는 Window 객체 >

- Window 객체 : 웹 브라우저 창의 상태를 제어하는 객체

  * 자바스크립트 객체 중 최상위이자 기본이 되는 객체

  예) 웹 브라우저의 정보 가져오기, 값 바꾸기 등

 

- Window 객체의 속성 알아보기     [링크]

  * Window 객체의 모든 속성과 브라우저 호환 여부에 대해서는 위의 링크를 클릭

 

- Window 객체의 몇 가지 속성 예제

  * inner~ : 내용 영역의 높이 혹은 너비

  * outer~ : 브라우저 창의 바깥 높이 혹은 너비

 

 

- Window 객체의 함수

  * alert()나 prompt()는 사실 Window 객체의 함수

  * 원래는 window.alert()라고 써도 사용할 수 있지만

     Window 객체는 기본 객체이기 때문에 window. 생략 가능!

 

 

- 모달 창(Modal Window)이란?

  : 현재 브라우저 창 위에 띄우는 새로운 창

    예) 이벤트 정보, 공지사항 등

  : 일반적인 알림 창이 웹 브라우저 창을 새로 여는 것이라면

    모달 창은 문서 소스 안에 <div> 태그를 사용해 삽입하고 레이어로 표시한 창

  : 웹 브라우저에서 알림 창을 차단하더라도 모달 창은 화면에 표시 가능!

모달창 예시 이미지

 

- 새 창을 여는 open()

  💡 꼭 https:// 까지 쳐줘야 함!

// 서식
//                     ┌ 새 창의 Target이나 윈도우 이름을 지정하는 부분
window.open("사이트명", "", "");
//                         └ 알림 창으로 표시할 때의 너비나 높이, 위치 등을 지정하는 옵션

window.open("www.daum.net");		// 새 창은 뜨지만 빈 화면으로 출력
window.open("https://www.daum.net");	// 새창 + 해당 사이트도 출력

 

- open()의 크기 조절

  * resizeBy() : 현재 브라우저 창의 크기를 기준으로 너비와 높이에 값을 더함 (음수 값 사용 가능)

  * resizeTo() : 최종 크기 (음수 값 사용 불가능)

var newWin = window.open("", "", "width=300, height=300");

// resizeBy() 예
newWin.resizeBy(100, 100);
newWin.resizeBy(-100, -100);

// resizeTo() 예
newWin.resizeTo(200, 200);

 

 

- open()의 위치 조절

  * moveBy() : 현재 위치를 기준

  * moveTo() : 화면 왼쪽 위 모서리를 기준

  * 둘 다 x, y 크기를 매개변수로 사용

  💡 현재(21.12.16) 최신 업데이트를 기준으로

      크롬(Chrome), Microsoft Edge에서는 정책상의 이유로 진행할 수 없습니다.

      테스트를 해보고 싶으시다면 Internet Explorer로 해보세요!

 

 

 

 

 

< 10-3 브라우저 정보가 담긴 Navigator 객체 >

- Navigator 객체 : 웹 브라우저와 관련된 정보가 담겨있음

  * 웹 브라우저 버전, 설치된 플러그인, 오프라인/온라인 상태 등

 

- 렌더링 엔진(Rendering Engine) : 브라우저에서 웹 문서를 화면에 표시하기 위해

                                              웹 문서의 태그와 스타일을 해석하는 프로그램

  * Navigator 객체는 렌더링 엔진의 이름을 보고 웹 브라우저 종류를 구별

  * 레이아웃 엔진(Layout Engine)이라고도 함

 

- 브라우저별 렌더링 및 자바스크립트 엔진

브라우저	렌더링 엔진	자바스크립트 엔진
Chrome	Blink	V8
FireFox	Gecko	SpiderMonkey
Internet Explorer	Trident	Chakra
Safari	Webkit	JavascriptCore
Opera	Blink	V8

 

 

- Navigator 객체의 속성

  * 브라우저 버전이나 플랫폼(OS) 정보를 갖고 있는데

    이 정보는 수정할 수 없고 볼 수만 있음

  * Navigator 객체의 주요 속성

 

 

 

 

 

< 10-4 그 밖의 브라우저 객체들 >

- History 객체

  * 브라우저에서 '뒤로', '앞으로' 또는 주소 표시줄에 입력한 기록한 사이트 주소가 저장됨

  * 보안 때문에 읽기 전용

 

- Location 객체

  * 브라우저의 주소 표시줄과 관련된 객체

 

 

- Screen 객체

  * 웹 사이트에 접속하는 사용자의 화면 크기나 정보를 알고 싶을 때 사용하는 객체

  * Screen 객체의 속성과 함수

속성	설명
availHeight	화면에서 윈도우 작업 표시줄이나 맥의 메뉴/독 같은 UI 영역을 제외한 부분의 높이를 표시
availWidth	UI 영역을 제외한 부분의 너비를 표시
colorDepth	화면상에서 픽셀을 렌더링할 때 사용하는 색상 수를 표시
height	UI 영역을 포함한 화면의 높이를 표시
orientation	화면의 현재 방향을 표시 (기본 : 가로 방향)
pixelDepth	화면상에서 픽셀을 렌더링할 때 사용하는 비트 수를 표시
width	UI 영역을 포함한 화면의 너비를 표시

함수	설명
lockOrientation()	화면 방향을 잠금
unlockOrientation()	화면 방향 잠금을 해제

---

기본 문법 공부는 끝!
이지스퍼블리싱 홈페이지의 [실전 프로젝트]를 다운로드해서 실습을 도전해봐야겠다!!

---