✅ 브라우저 객체 모델
☑️ 브라우저 객체 모델이란
- 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것
☑️ 자주 사용하는 브라우저 내장 객체
window : 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체입니다. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체입니다.
document : 웹 문서에서 <body> 태그를 만나면 만들어지는 객체입니다. HTML 문서 정보를 가지고 있습니다.
history : 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체입니다.
location : 현재 페이지에 대한 URL 정보를 가지고 있는 객체입니다.
navigator : 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체입니다.
screen : 현재 사용 중인 화면 정보를 다루는 객체입니다.
✅ 팝업 창 표시하기
- Window 객체를 사용해서 웹 문서를 불러오자마자 팝업 창 표시하기
☑️ Window 객체의 속성
- 자바스크립트 객체 중 최상위 객체
document : 브라우저 창에 표시된 웹 문서에 접근할 수 있습니다.
frameElement : 현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환합니다. 포함되어 있지 않으면 null을 반환합니다.
innerHeight : 내용 영역의 높이를 나타냅니다.
innerWidth : 내용 영역의 너비를 나타냅니다.
localStorage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환합니다.
location : Window 객체의 위치/현재 URL을 나타냅니다.
name : 브라우저 창의 이름을 가져오거나 수정합니다.
outerHeight : 브라우저 창의 바깥 높이를 나타냅니다.
outerWidth : 브라우저 창의 바깥 너비를 나타냅니다.
pageXOffset : 스크롤했을 때 화면이 수평으로 이동하는 픽셀 수, scrollX와 같습니다.
pageYOffset : 스크롤했을 때 화면이 수직으로 이동하는 픽셀 수, scrollY와 같습니다.
parent : 현재 창이나 서브 프레임의 부모 프레임입니다.
screenX : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리를 나타냅니다.
screenY : 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리를 나타냅니다.
scrollX : 스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냅니다.
scrollY : 스크롤했을 때 수직으로 이동하는 픽셀 수를 나타냅니다.
sessionStorage : 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환합니다.
☑️ Window 객체의 함수
- alert()나 prompt()도 Window 객체의 함수
→ window.alert(), window.prompt() - Window 객체는 기본 객체이기 때문에 window.를 생략하고 간단히 alert(), prompt()로 사용할 수 있음.
alert() : 알림 창(Alert Dialog)을 표시합니다.
blur() : 창에서 포커스를 제거합니다.
close() : 현재 열려 있는 창을 닫습니다.
confirm() : [확인],[취소]가 있는 확인 창을 표시합니다.
focus() : 현재 창에 포커스를 부여합니다.
moveBy() : 현재 창을 지정한 크기만큼 이동합니다.
moveTo() : 현재 창을 지정한 좌표로 이동합니다.
open() : 새로운 창을 엽니다.
postMessage() : 다른 창으로 메시지를 전달합니다.
print() : 현재 문서를 인쇄합니다.
prompt() : 프롬프트 창에 입력한 텍스트를 반환합니다.
resizeBy() : 지정한 크기만큼 현재 창 크기를 조절합니다.
resizeTo() : 동적으로 브라우저 창의 크기를 조절합니다.
scroll() : 문서에서 특정 위치로 스크롤합니다.
scrollBy() : 지정한 크기만큼씩 스크롤합니다.
scrollTo() : 지정한 위치까지 스크롤합니다.
setCursor() : 현재 창의 커서를 변경합니다.
showModalDialog() : 모달 창을 표시합니다.
sizeToContent() : 내용에 맞게 창 크기를 맞춥니다.
stop() : 로딩을 중지합니다.
☑️ 팝업 창 표시하기
- open() 함수 – 다양한 형태로 새 창 열기
window.open("https://www.daum.net")
window.open("https://www.daum.net", "")
window.open("https://www.daum.net", "_self")
window.open("https://www.daum.net", "", "left=0, top=0, width=300, height=300")
☑️ 창 크기 조절하기
var newWin = window.open(" ", " ", "width=300, height=300")- resizeBy() 합수 - 현재 브라우저 창의 크기를 기준으로 괄호 안의 값을 더합니다.
newWin.resizeBy(100, 100)
newWin.resizeBy(-100, -100)- resizeTo() 합수 - 브라우저 창의 최종 크기
newWin.resizeTo(200, 200)
☑️ 창 위치 조절하기
var newWin = window.open(" ", " ", "width=300, height=300")- moveBy() 함수 – 현재 창을 지정한 크기만큼 이동합니다.
newWin.moveBy(100, 100)
newWin.moveBy(-100, -100)- moveTo() : 현재 창을 지정한 좌표로 이동합니다.
newWin.moveTo(200, 200)☑️ Navigator 객체
웹 브라우저 버전, 렌더링 엔진, 사용자 에이전트 문자열 등을 비롯해 웹 브라우저 정보가 담긴 객체
주요 속성
appCodeName : 브라우저 이름(코드 이름)을 문자열로 반환합니다.
appName : 브라우저 공식 이름을 문자열로 반환합니다.
appVersion : 브라우저 버전을 문자열로 반환합니다.
battery : 배터리 충전 상태를 알려주는 정보가 담긴 객체를 반환합니다.
connection : 브라우저 장치의 네트워크 정보가 담긴 객체를 반환합니다.
cookieEnabled : 쿠키 정보를 무시한다면 false, 그렇지 않다면 true를 반환합니다.
geolocation : 모바일 기기를 사용한 위치 정보가 담긴 객체를 반환합니다.
maxTouchPoints : 장치에서 동시에 터치 가능한 포인트가 몇 개인지 반환합니다.
platform : 브라우저 플랫폼 정보를 가지고 있는 문자열을 반환합니다.
userAgent : 현재 브라우저 정보가 있는 사용자 에이전트(User Agent) 문자열을 반환합니다.
☑️ 렌더링 엔진 & 자바스크립트 엔진
- 렌더링 엔진 : 브라우저에서 웹 문서의 태그와 스타일을 해석하는 프로그램
- 자바스크립트 엔진 : 브라우저에서 자바스크립트를 해석하는 프로그램
- 웹 브라우저마다 내장된 렌더링 엔진과 자바스크립트 엔진이 다름 → 웹 브라우저를 구별하는데 사용
| 브라우저 | 렌더링 엔진 | 자바스크립트 엔진 |
|---|---|---|
| 크롬 | 블링크(Blink) | V8 |
| 파이어폭스 | 개코(Gaeko) | 스파이더몽키(SpiderMonkey) |
| 인터넷 익스플로러 | 트라이덴트(Trident) | 차크라(Chakra) |
| 사파리 | 웹킷(Webkit) | 자바스크립트코어(JavascriptCore) |
| 오페라 | 블링크(Blink) | V8 |
☑️ 사용자 에이전트 문자열
- 클라이언트에서 서버로 정보를 보낼 때 클라이언트에서 함께 보내는 정보
- 서버에서는 이 정보를 보고 브라우저 종류를 확인한 후 그 브라우저에 맞게 웹 페이지 표시
- navigator.useragent에 포함되어 있음
| 브라우저 | 에이전트 문자열 |
|---|---|
| IE11 | Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko |
| MS 엣지 | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)Chrome/94.0.4606.61 Safari/537.36Edge/94.0.992.31 |
| 크롬 | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit /537.36 (KHTML, like Gecko)Chrome/94.0.4606.61 Safari/537.36 |
| 사파리/오페라 | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6)AppleWebKit/601.7.7 (KHTML, like Gecko)Version/9.1.2 Safari/601.7.7 |
☑️ 사용자 에이전트 문자열의 의미
| 에이전트 | 의미 |
|---|---|
| Mozilla/x.x | 모질라 버전을 의미합니다. |
| Windows NT x.x | 브라우저를 실행하는 컴퓨터 운영체제를 의미합니다. |
| Win64; x64 | 컴퓨터 운영체제가 윈도우 64비트 시스템이라는 의미입니다. |
| WOW64 | Windows 32-bit on Windows 64-bit의 줄임말로, 64비트 시스템에서 32비트 응용 프로그램을 실행할 수 있는 환경을 의미합니다. |
| Trident/x.x | Trident 엔진 버전을 의미합니다. |
| rv: x.x | 브라우저 버전을 의미합니다. |
| AppleWebKit/x.x | 웹킷 엔진의 빌드 번호를 말합니다. |
| KHTML | HTML 레이아웃 엔진으로서 오픈 소스 렌더링 엔진입니다. |
| like Gecko | 게코 기반의 다른 브라우저와 호환된다는 의미합니다. |
| Firefox/x.x | 파이어폭스 브라우저 버전을 의미합니다. |
| Chrome/x.x | 크롬 버전을 의미합니다. |
| Safari/x.x | 사파리 브라우저 빌드 번호를 의미합니다. |
☑️ History 객체
- 브라우저에서 ‘뒤로’, ‘앞으로’ 또는 주소 표시줄에 입력해서 돌아다녔던 사이트 주소 저장
- 읽기 전용
History 객체의 속성과 함수
| 속성 | 설명 |
|---|---|
| length | 현재 브라우저 창의 History 목록에 있는 항목의 개수, 즉 방문한 사이트 개수를 반환합니다. |
|함수|설명| |------|---| |back()|History 목록에서 이전 페이지를 현재 화면에 불러옵니다.| |forward()|History 목록에서 다음 페이지를 현재 화면에 불러옵니다.| |go()|History 목록에서 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러옵니다. 예를 들어 history.go(1)은 다음 페이지를 가져오고, history.go(-1)은 이전 페이지를 불러옵니다.|
☑️ Location 객체
- 현재 문서의 URL 주소 정보
- 이 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있음
Location 객체의 속성과 함수
| 속성 | 설명 |
|---|---|
| hash | URL 중 #로 시작하는 해시 부분을 나타냅니다. |
| host | URL의 호스트 이름과 포트 번호를 나타냅니다. |
| hostname | URL의 호스트 이름을 나타냅니다. |
| href | 전체 URL입니다. 이 값을 변경하면 해당 주소로 이동할 수 있습니다. |
| pathname | URL 경로를 나타냅니다. |
| port | URL의 포트 번호를 나타냅니다. |
| protocol | http:// 나 ftp:// 같은 URL의 프로토콜을 나타냅니다. |
| password | 도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 URL일경우 password 정보를 저장합니다. |
| username | 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트 URL일 경우 username 정보를 저장합니다. |
| 함수 | 설명 |
|---|---|
| assign() | 현재 문서에 새 문서 주소를 할당해 새 문서를 가져옵니다. |
| reload() | 현재 문서를 다시 불러옵니다. 브라우저의 [새로 고침]과 같은 역할을 합니다. |
| replace() | 현재 문서의 URL을 지우고 다른 URL의 문서로 교체합니다. |
| toString() | 현재 문서의 URL을 문자열로 반환합니다. |
☑️ Screen 객체
- 화면 정보 (TV 모니터나 모바일기기 화면)
Screen 객체의 속성과 함수
| 속성 | 설명 |
|---|---|
| availHeight | 화면에서 윈도우의 작업 표시줄이나 맥의 메뉴/독 같은 UI 영역을 제외한 부분의 높이를 나타냅니다. |
| availWidth | UI 영역을 제외한 부분의 너비를 나타냅니다. |
| colorDepth | 화면상에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타냅니다. |
| height | UI 영역을 포함한 화면의 높이를 나타냅니다. |
| orientation | 화면의 현재 방향을 나타냅니다. 기본은 가로 방향입니다. |
| pixelDepth | 화면상에서 픽셀을 렌더링할 때 사용하느 비트 수를 나타냅니다. |
| width | UI 영역을 포함한 화면의 너비를 나타냅니다. |
| 함수 | 설명 |
|---|---|
| lockOrientation() | 화면 방향을 잠급니다. |
| availWidth | 화면 방향 잠금을 해제합니다. |
