[비건비긴] window 객체 알아보기

카카오맵 api를 구현하는데, 타입스크립트로 작성하다보니 window객체에 kakao가 없어서 자꾸 에러가 생겨서 따로 window 객체에 추가해줘야했다. 그러다가 window 객체에 대해 궁금해졌다. 콘솔에 찍어보면 알 수 없는 속성들만 몇백개라 스크롤 내리기도 버겁다.

---

Widow 객체

브라우저의 요소들과 자바스크립트 엔진, 그리고 모든 변수를 담고 있는 객체

브라우저 전체를 담당하는 건 Window 객체이고, 웹사이트만 담당하는 건 Document 객체

window 객체는 모든 객체가 포함된 최상위 객체이며, 전역변수와 전역스코프에서 선언된 함수는 window 객체의 property이고, 식별자 window를 통해 접근가능하며 호출 시 생략할 수 있음

• DOM: 웹페이지의 문서를 제어하기 위한 객체모델
• BOM: 웹브라우저의 창이나 프레임을 추상화해서 제어할 수 있도록 하는 객체모델
• JavaScirpt: Object, Array, Function 등

Window와 Document의 차이

Window 객체는 브라우저 창을 나타내는 전역 객체이자 최상위 객체

Document 객체는 window 객체 아래서 현재 로드된 웹 페이지를 나타내어 HTML 문서의 구조와 내용을 나타내는데 사용

---

window.open()

window.close()

window.encodeURI/ window.decodeURI

window.setTimeout(함수, 밀리초), window.setInterval(함수, 밀리초)

---

BOM(Browser Object Model)

navigator

웹 브라우저의 정보를 제공. 브라우저의 종류, 버전, 운영 체제 등을 확인 가능

사용자의 환경 설정에 따라 웹 페이지의 동작을 변경

screen

사용자의 화면 정보를 제공. 사용자의 화면 크기, 해상도 등 파악 가능

웹 페이지의 디자인이나 레이아웃을 조정하는 데 사용

location

현재 웹 페이지의 URL 정보를 제공

현재 페이지의 URL을 확인하거나 새로운 URL로 이동 가능 및 쿼리 문자열 파싱 등의 작업을 수행

history

브라우저의 세션 히스토리를 제어

이전 페이지로 이동하거나 다음 페이지로 이동하는 등의 작업을 수행

document

웹 페이지의 구조와 내용을 나타냄

HTML 요소들을 조작하거나 새로운 요소를 생성하는 등의 작업을 수행

웹 문서의 모든 요소를 JavaScript를 통해 접근 가능하며 DOM(Document Object Model)을 통해 이를 구조화하여 관리

 

DOM(Document Object Model)

웹 문서의 구조와 관계를 객체로 표현하는 방법

웹 문서의 모든 요소를 JavaScript를 통해 접근 가능하며 브라우저가 웹 문서를 이해할 수 있도록 구성되어있음. 모든 요소들과의 관계를 표혈할 수 있는 트리구조로 구성되어있고 document 전역 변수로 접근 가능

 

---

Window 객체로 뭘 할 수 있는가

현재 기기 불러오기

window.navigator는 웹 브라우저의 정보를 제공하는 객체다. window.navigator.userAgent는 사용자 에이전트 문자열을 반환하여 브라우저 및 운영 체제 정보를 제공한다. 이 사용자 에이전트와 정규식을 사용하면 자바스크립트에서 현재 브라우저가 모바일인지 웹인지 확인 가능하다.

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

var isMobile = /Mobi/i.test(window.navigator.userAgent);

---

톺아보기

인스턴스 속성

closed	창잉 닫혀 있는지 여부를 나타내는 참거짓 반환
console	브라우저의 콘솔에 정보를 기록하는 메서드를 제공하는 Console 객체에 대한 참조 반환
defaultStatus	창의 상태표시줄에 있는 기본 텍스트를 설정하거나 반환
document	윈도우의 Document 객체 반환
frameElement	현재창이 삽입 된 <iframe> 요소를 반환
customElements	사용자 지정 요소를 생성하고 등록
frames	현재창에서 모든 <iframe> 요소를 반환
history	창의 History 객체를 반환
innerHeight	스크롤 바를 포함하여 창 내용 영역(= viewport) 높이 반환
innerWidth	스크롤 바를 포함하여 창 내용 영역(= viewport) 너비 반환
length	현재 창에서 <iframe> 요소의 개수 반환
localStorage	웹 브라우저에 key/ value 쌍을 저장 및 만료 날짜 없는 데이터 저장 가능
location	창의 Location 객체 반환
name	창 이름을 설정하거나 반환
navigator	창 Navigator 객체 반환
opener	창 생성한 window에 대한 참조 반환
outerHeight	toolbar/ scrollbar 포함해 브라우저 창 높이 반환
outerWidth	toolbar/ scrollbar 포함해 브라우저 창 너비 반환
pageYOffset	현재의 문서가 창의 왼쪽상단 구석으로부터 (가로로) 스크롤 된 픽셀 반환
pageYOffseet	현재의 문서가 창의 왼쪽상단 구석으로부터 (세로로) 스크롤 된 픽셀 반환
parent	현재창의 부모창 반환
screen	창의 screen 객체 반환
screenLeft	화면을 기준으로 한 창의 수평 좌표 반환
screenTop	화면을 기준으로 한 창의 세로 좌표 반환
screenX	화면을 기준으로 한 창의 가로 좌표를 반환
screenY	화면에 상대적인 창의 세로 좌표를 반환
sessionStorage	웹 브라우저에 key/ value 쌍을 저장 및 하나의 세셔네 대한 데이터 저장 가능
scrollX	pageXOffset의 별칭
scrollY	pageYOffset의 별칭
self	현재 창을 반환
status	창의 상태표시줄에 있는 텍스트를 설정하거나 반환
top	최상위 브라우저 창을 반환

인스턴스 메서드

alert()	메시지와 확인 버튼이 있는 경고 상자 표시
atob()	base-64로 암호화 된 문자열을 암호해독
blur()	현재 창에서 focus 제거
btoa()	base-64로 문자열을 암호화
clearInterval()	setInterval로 설정된 타이머 지우기
clearTimeout()	setTimeout로 설정된 타이머 지우기
close()	현재 창 닫기
getComputedStyle()	요소에 적용된 현재 계산 된 CSS 스타일 가져오기
matchMedia()	지정된 CSS 미디어쿼리 문자열을 나타내는 MediaQueryList 객체를 반환
moveBy()	현재 위치를 기준으로 창을 이동
moveTo()	창을 지정된 위치로 이동
open()	새 브라우저 창 열기
print()	현재 윈도우의 내용을 인쇄
prompt()	방문자에게 입력을 요구하는 대화상자 표시
requestAnimationFrame()	브라우저에 다음 Repaint 전에 애니메이션 업데이트하는 함수를 호출하도록 요청
cancelAnimationFrame()	이전에 스케줄링된 애니메이션 프레임을 취
requestIdleCallback()	브라우저가 유후 상태일 때 실행되는 함수
resizeBy()	지정 픽셀 기준으로 창크기 조절
scroll()	scrollTo 메서드로 대체
scrollBy()	지정된 픽셀수만큼 문서 스크롤
scrollTo()	문서를 지정된 좌표로 스크롤
setInterval()	지정된 간격(밀리 초)으로 함수를 호출하거나 표현식을 평가
setTimeout()	지정된 밀리 초 후에 함수를 호출하거나 표현식을 평가
stop()	창 로드 정지

Reference

Window - Web API | MDN (mozilla.org)

브라우저 환경과 다양한 명세서 (javascript.info)

---