[JavaScript] 5. Window 객체

1. Window 객체란?

- 웹브라우저에서 작동하는 JS의 최상위 전역 객체

- 여러 객체와 속성, 함수들이 있음 : Frame, Location, History, Document

- BOM(Browser Object Model)으로 불리기도 함

 

 

[Window 객체 속성]

속성	설명
self	현재 창 자신으로, 자신의 window객체와 같은 의미
document	document 객체, 가장 많이 사용
history	history 객체, 페이지 이력과 관련됨
location	location 객체, 현재 페이지와 관련됨
opener	자신을 연 창을 의미하는 객체
screen	화면의 가로, 세로 크기 정보
pageXOffset	현재 나타나는 페이지의 X위치(IE 지원 X)
pageYOffset	현재 나타나는 페이지의 Y위치(IE 지원 X), 현재 화면 크기를 계산해서 페이지 단위 스크롤 제어 가능

 

 

[Window 객체 함수]

함수	설명
alert()	경고창, 알림창 띄우기
confirm()	확인, 취소 선택창 띄우기
prompt()	입력창 띄우기
open()	새로운 창 열기
setTimeout()	밀리초 시간 후, 함수 호출
clearTimeout()	setTimeout 함수 정지
setInterval()	밀리초 주기마다 함수 반복 호출
clearInterval()	setInterval 함수 정지

 

 

 

2. Window 객체 사용(1) - 팝업 함수

1. alert() : 알림창

alert("알림창");

 

 

2. confirm() : 확인/취소 선택창

- true/false를 반환

if(confirm("버튼을 눌렀습니까?")){
    console.log("YES");
}
else{
    console.log("NO");
}

 

 

3. prompt : 입력창

- 입력 받은 문자열을 반환

let text = prompt("text를 입력하세요", "여기입력");
console.log(text);

 

 

 

3. Window 객체 사용(2) - navigator 객체

- 브라우저의 정보를 가진 객체

- 서로 다른 브라우저 구분 가능

console.log("Name : " + navigator.name);
console.log("Platform : " + navigator.platform);//Win32

console.log("User-Agent header : " + navigator.userAgent);//Mozilla/5.0 ...
//=> 모바일 or PC판단으로 다른 화면 제공 O

 

 

 

4. Window 객체 사용(3) - location 객체

- 현재 페이지와 관련된 객체

 

//0. 현재 페이지와 관련된 모든 정보 조회
console.log(location);
//1. 현재 페이지 주소(URL) 얻기
console.log(location.href);
//2. 다른 페이지로 이동
location.href = "http://www.naver.com";
//3. 현재 페이지 새로 고침
location.reload();

 

 

 

5. Window 객체 사용(4) - history

- 브라우저의 페이지 이력과 관련된 객체

//1. 뒤로 가기
history.back();
//2. 앞으로 가기
history.forward();

 

 

 

6. Window 객체 사용(5) - 새 창 열기 함수

1. 새 창 열기

 

1) 사용법

- 페이지 URL(string) = 새로 열 창의 URL

- 창 이름(string) = 창에 별명을 짓는 것 => 이미 있는 창을 또 열려고 하면 있는 창을 불러줌

- 특성(string) = 새 창의 너비, 높이, 위치 등을 지정

- 히스토리 대체여부(boolean) = 현재 페이지 히스토리에 쓸 지 true/false

window.open('페이지 URL', '창이름', '특성1=값1, 특성2=값2, ...', 히스토리 대체여부);

//예시
window.open('./a.html', 'name', 'width=400, height=500, top=100, left=100');

 

2) 특성 종류

특성	값	설명
width	px	창의 너비
height	px	창의 높이
top	px	창의 y좌표 위치
left	yes || no	창의 x좌표 위치
menubar	yes || no	메뉴 표시줄
status	yes || no	상태 표시줄
scrollbars	yes || no	스크롤바
toolbar	yes || no	도구모음
location	yes || no	주소 입력란

 

 

2. 창 닫기

- 새 창과 연결된 js파일에 작성

window.close();

 

 

3. 부모 창 컨트롤

- 부모 창의 window객체 = opener객체

- 부모 창 = 새 창을 open한 창

//부모 창(opener)의 js
window.open("a.html", "name", "width=300, height=500");

//자식 창의 js
opener.location.reload();//부모 창 새로 고침
window.close();//창 닫기

 

 

 

7. Window 객체 사용(6) - Document 객체

- 많이 쓰이므로 따로 정리하였다.