[자바스크립트] window 객체

Gammi·2022년 10월 13일

자바스크립트

JS

목록 보기

12/22

💻 window 객체

자바스크립트 최상위(루트) 객체
자바스크립트 전역에서 접근 가능한 객체
웹 브라우저 창을 가리키는 용도로 사용
창에 대한 다양한 작업 수행이 가능한 여러가지 메서드, 속성 제공
window 객체 접근 시 window 객체명은 생략 가능

-> window.open( ) => open( )

✔ 현재 창에 대한 기본 정보 확인

window.innerHeight : 창 높이

window.innerWidth : 창 너비

-> window. 은 생략 가능

✔ 새 창 열기

< 새 창 열기 >

window.open("새 창에서 표시할 url 또는 파일명", "창 이름", "창 옵션(크기, 위치···)");

창 크기 옵션 지정 시 새 창으로 열림

-> 크기 단위는 픽셀

-> width와 height 속성 이용
위치 옵션은 좌측 상단을 기준으로 얼마나 떨어있는지 지정 가능

-> left와 top 속성 이용
창 이름 설정 시 동일한 이름을 갖는 새 창 열림 기능은 항상 같은 창에서 새로운 페이지 열림
url 대신 파일명 지정 시 해당 파일이 새 창에서 열림

✔ 현재 창 닫기

window.close(); 를 이용하여 현재 창 닫기 가능

✔ 부모창과 자식창

현재 창에서 새 창을 열었을 때 현재 창을 부모창, 새 창을 자식창이라고 함
자식창에서 부모창 제어 가능

-> window.opener 객체 사용하여 부모창 접근
주로 자식창을 닫아서 부모창으로 제어를 바로 넘겨주는 형태로 사용

window.opener.alert("자식창에서 요청한 메세지를 부모창에서 출력");

// 자식창에서 alert() 함수를 썼지만 출력은 부모창에서 이루어짐
// 단, 부모창이 자식창에 가려진 상태에서는 alert() 함수 바로 출력X
// 부모창을 클릭해서 활성화 했을 때 alert() 창 나타남

💻 window 객체의 하위 객체

document
navigator, location, history ···
Object, Array, function ···

✔ location 객체

페이지 이동 관련 정보 관리 (페이지 이동 관련 작업 담당)
window 객체의 하위 객체이므로 window.location 형식으로 접근해야 하지만 window.은 생략 가능하므로 location.xxx 형식으로 사용
페이지 관련 속성 및 메서드 제공됨

주로 사용하는 속성 : location.href

location.href= "https://blog.naver.com/lnjjsm6";
// 주소 입력
location.href= "test.html";
// 파일 입력

location.reload()

location 객체의 reload() 함수

url 정보에 해당하는 페이지 다시 로딩
= 웹브라우저 새로고침(F5) 키와 동일한 기능

✔ history 객체

웹브라우저 방문 기록 관리
웹브라우저를 통해 접속했던 페이지 주소 정보를 저장, 관리

속성 : length 등

history.length

현재 웹브라우저에 저장된 방문 기록 개수 확인 가능

메서드 : back() , forward() , go() 등

history.back();

웹브라우저에 저장된 페이지 방문 기록 중 현재 페이지 기준 이전 페이지로 이동
= 뒤로 가기 버튼과 동일

history.forward();

웹브라우저에 저장된 페이지 방문 기록 중 현재 페이지 기준 다음 페이지로 이동
= 앞으로 가기 버튼과 동일

history.go();

현재 페이지에서 x번째 페이지로 이동
-> x번째 이전 페이지로 이동하려면 ()에 음수값 전달
-> x번째 다음 페이지로 이동하려면 ()에 양수값 전달

✔ document 객체

HTML 문서 정보를 관리하는 객체
문서 정보 확인, 내용 변경 등의 작업 수행 가능

속성 : title , bgColor , fgColor 등

document.title

HTML 문서 제목 확인

document.title=""; : HTML 문서 제목 변경(title 속성값 변경)

document.bgColor document.fgColor

HTML 문서 색상 정보 확인

bgColor : 배경색

fgColor : 전경색 (주로 텍스트)

document.bgColor = ""; : 배경색 변경

document.fgColor = ""; : 전경색 변경

색상명이나 색상코드값으로 지정 가능

✔ Element

document 객체는 HTML 문서 자체의 정보를 담고 있으며 문서의 시작을 가리킴

-> DOM(Document Object Model : 문서 객체 모델)의 진입점 역할을 수행
- document 객체를 통해 문서의 구성요소(Element) 접근 가능 (단계별로 접근도 가능)