Window 객체는 자바스크립트의 최상위객체이자 전역객체이면서 모든 객체가 소속된 객체이다.
아래의 사진을 보면 DOM, BOM, JavaScript가 최상위 객체인 Window 객체 밑에 소속이 되어있다.
이 객체들은 서로 계층적인 관계로 구조화 되어있다.
JSC (Javascript core)
자바스크립트 언어의 자체에 정의되어 있는 객체들. Object, Array, function 등..
DOM(Document Object Model) : 문서 객체 모델
텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면,
웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다.
여기서 브라우저가 웹 문서를 이해할 수 있도록 문서를 객체로 구성되게 한 것을 DOM이라고 한다.
BOM(Browser Object Model) : 브라우저 객체
BOM은 자바스크립트가 브라우저와 소통하기 위해서 만들어진 모델이다.
공식 표준은 아니지만 브라우저 대부분이 자바스크립트와의 상호작용에 있어서 비슷한 메소드와 속성으로 동작하기에 이와 같은 메소드들을 통칭하여 BOM이라고 한다.
window 객체를 통해 접근이 가능하다.
Window : 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체
Document : 웹 문서에서 <body> 태그를 만나면 만들어지는 객체 HTML 문서 정보를 가지고 있다.
History : 현재 창에서 사용자 방문 기록을 저장하고 있는 객체
Location : 현재 페이지에 대한 URL 정보를 가지고 있는 객체
Navigator : 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
Screen : 현재 사용 중인 화면 정보를 다루는 객체
Window 객체의 속성
속 성
설 명
document
브라우저 창에 표시된 웹 문서에 접근할 수 있다.
frameElement
현재 창이 다른 요소안에 포함되어 있으면 그 요소를 반환 포함되어 있지 않으면null을 반환
innerHeight
(웹 사이트)내용 영역의높이
innerWidth
(웹 사이트)내용 영역의너비
localStorage
웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환
location
Window객체의 위치/현재 URL을 나타냄
name
브라우저 창의 이름을 가져오거나 수정
outerHeight
브라우저 창의 바깥높이(웹 브라우저의 메뉴나 도구 모음 등까지 포함된 너비와 높이)
outerWidth
브라우저 창의 바깥너비(웹 브라우저의 메뉴나 도구 모음 등까지 포함된 너비와 높이)
pageXOffset
스크롤했을 때 화면이수평으로 이동하는 픽셀 수.scrollX와 같다.
pageYOffset
스크롤했을 때 화면이수직으로 이동하는 픽셀 수.scrollY와 같다.
parent
현재 창이나 서브 프레임의 부모 프레임
screenX
브라우저 창의왼쪽테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리를 나타냄
screenY
브라우저 창의위쪽테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리를 나타냄
scrollX
스크롤했을 때수평으로 이동하는 픽셀 수
scrollY
스크롤했을 때수직으로 이동하는 픽셀 수
sessionStorage
웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환
Window 객체의 함수
Window 객체에서 사용할 수 있는 함수는 웹 브라우저 창 자체와 관련된 것이 대부분이다.
Window 객체는 기본 객체이기 때문에 window를 생략하고 함수 이름만 입력해서 사용할 수 있다.
함 수
설 명
사용예시
alert( )
알림 창(Alert Dialog)을 표시
window.alert("알릴내용")
blur( )
창에서 포커스 제거
close( )
현재 열려있는 창을 닫음
var newWin = window.open(Visit Website"", "", "width=300, height=300") newWin.close( )
confirm( )
확인,취소가 있는 확인 창을표시
var result = window.confirm("보여줄 메시지")// result에 선택한 값이 저장됨(확인은 true)
focus( )
현재 창에 포커스를 부여
moveBy( )
현재 창을 지정한 크기만큼 이동시킴 (현재 위치를 기준으로 가로로 x픽셀, 세로로 y픽셀 만큼 이동)
var newWin = window.open(Visit Website"", "", "width=300, height=300") newWin.moveBy(500,500)
moveTo( )
현재 창을 지정한 좌표로 이동시킴 (화면의 왼쪽 위 모서리를 기준으로 가로로 x픽셀, 세로로 y픽셀만큼 이동)
var newWin = window.open(Visit Website"", "", "width=300, height=300") newWin.moveTo(0,0)//창을 화면 왼쪽 위로 옮김
open( )
새로운 창(새 탭)을 연다. 매개변수(전부 선택, 필수 X) 1번째 매개변수: 문서나 사이트 주소(생략하면 빈문서) 2번째 매개변수: 새 창의 Target이나 윈도우 이름 3번째 매개변수: 알림창으로 표시할 때의 너비나 높이, 위치(px값, 높이나 너비의 최소값은100,left는 화면의 왼쪽 가장자리 기준,top은 위쪽 가장자리 기준)
프롬프트 창에 입력한 텍스트를 반환 1번째 매개변수(선택): 화면에 표시할 메시지 2번째 매개변수: 텍스트 입력필드에 기본으로 전달할 문자열
window.prompt("표시할 메시지", "default 문자열")
resizeBy( )
지정한 크기만큼 현재 창 크기를 조절 (현재 브라우저 창의 크기를 기준으로 너비와 높이에 값을 더해줌)
var newWin = window.open(Visit Website"", "", "width=300, height=300") newWin.resizeBy(100,100)//가로 세로 길이 100픽셀씩 늘림 newWin.resizeBy(-100,-100)//가로 세로 길이 100픽셀씩 줄임
resizeTo( )
동적으로 브라우저 창의 크기 조절(최종 크기를 지정) resizeBy( )함수에서는 음수 값을 사용할 수 있지만resizeTo( )함수 에서는 음수 값을 지정할 수 X
var newWin = window.open(Visit Website"", "", "width=300, height=300") newWin.resizeTo(200,200)// 창의 (최종) 크기를 가로, 세로 200px로 지정
scroll( )
문서에서 특정 위치로 스크롤
scrollBy( )
지정한 크기만큼씩 스크롤
scrollTo( )
지정한 위치까지 스크롤
setCursor( )
현재 창의 커서를 변경
showModalDialog( )
모달 창(Modal Window)을 표시 모달 창 : 이벤트 정보나 공지 내용 등을 표시하기 위해 현재 브라우저 창 위에 띄우는 새로운 창. 일반적인 알림 창이 웹 브라우저 창을 새로 여는 것이라면 모달 창은 문서 소스 안에<div>태그를 사용해 삽입하고 레이어로 표시한 창이다.알림창을 차단하더라도 모달 창은 화면에 표시 가능
sizeToContent( )
내용에 맞게 창 크기를 맞춤
stop( )
로딩중지
window.stop( )
Navigatoar 객체
Navigator 객체에는 웹 브라우저와 관련된 정보가 담겨있다.(브라우저 버전이나 플랫폼(OS) 버전 등)
주로 호환성 문제등을 위해서 사용 된다.
속 성
설 명
appCodeName
브라우저 이름(코드 이름)을 문자열로 반환
appName
브라우저 공식 이름을 문자열로 반환
appVersion
브라우저 버전을 문자열로 반환
battery
배터리 충전 상태를 알려주는 정보가 담긴 객체를 반환
connection
브라우저 장치의 네트워크 정보가 담긴 객체를 반환
cookieEnabled
쿠키 정보를 무시한다면false, 그렇지 않으면true를 반환
geolocation
모바일 기기를 사용한 위치 정보가 담긴 객체를 반환
language
브라우저의 기본 언어 설정 반환
maxTouchPoints
장치에서 동시에 터치 가능한 포인트가 몇 개인지 반환
platform
브라우저 플랫폼(운영체제) 정보를 가지고 있는 문자열을 반환
userAgent
현재 브라우저 정보가 있는 사용자 에이전트(User Agent) 문자열을 반환 사용자의 웹 브라우저 버전, 자바스크립트 엔진 종류 등의 정보 확인가능
