14-2. JS 브라우저와 관련된 객체 (window객체, navigator 객체, history 객체, location 객체, screen 객체)

1. 브라우저 관련 객체 

웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고, 밑으로 하위 요소에 해다하는 객체들이 나타난다. 

window의 하위 객체로는 document, history 등이 있고, 

document의 하위 객체로는 area, image 등이 있다. 

 

window : 브라우저 창이 열릴 때 마다 하나씩 만들어지는 것으로 , 브라우저 창 안의 요소 중에서 최상위에 있다. 

document : 웹 문서마다 하나씩 있으며, body 태그를 만나면 만들어진다.

navigator : 현재 사용하는 브라우저의 정보를 담고 있다. 

history  : 현재 창에서 사용자의 방문 기록을 저장한다. 

location  : 현재 페이지의 url 정보가 담겨있다. 

screen : 현재 사용하는 화면 정보를 다룬다. 

 

 

2. window 객체의 프로퍼티 

window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다. 

 

document : 브라우저 창에 표시된 웹 문서에 접근할 수 있다. 

frameElement  : 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함하고 있지 않으면 null을 반환한다. 

innerHeight : 내용 영역의 높이를 나타낸다. 

innerWidth : 내용 영역의 너비를 나타낸다. 

localStroage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환한다. 

location  : window 객체의 위치 또는 현재 url를 나타낸다. 

name : 브라우저 창의이름을 가져오거나 수정한다.

outerHeight : 브라우저 창의 바깥 높이를 나타낸다. 

outerWidth : 브라우저 창의 바깥 너비를 나타낸다. 

pageXOffset : 스크롤했을 때 수평으로 이동하는 픽셀수 scrollX와 같다. 

pageYOffset : 스크롤했을 때 수직으로 이동하는 픽셀 수로 scrollY와 같다. 

parent : 현재 창이나 서브 프레임의 부모 

screenX : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타낸다. 

screenY :  브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타낸다. 

scrollX : 스크롤햇을 때 수평으로 이동하는 픽셀 수를 나타낸다. 

scrollY : 스크롤했을 때 수직으로 이동하는 픽셀 수를 나타낸다. 

sessionStroage : 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환한다. 

 

3. window 객체의 메서드 

window 객체의 메서드는 대화창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 웹 브라우저 창 자체와 관련된다. 

 

alert() : 알림창 표시 

blur() : 현재 차에서 포커스 제거 

close() : 현재 창을 닫음

confirm() : 확인, 취소 버튼이 있는 확인창 표시 

focus() : 현재 창에 포커스 부여 

moveBy() : 현재 창을 지정한 크기만큼 이동 

moveTo() : 현재 창을 지정한 좌표만큼 이동 
open() : 새로운 창을 연다. 

postMesasge() : 메시지를 다른 창으로 전달 

print() : 현재 문서 인쇄 

resizeBy() : 지정한 크기만큼 현재 창의 크기를 조절 

scroll() : 문서에서 특정 위치로 스크롤 

scrollBy() : 지정한 크기만큼씩 스크롤 

scrollTo() : 지정한 위치만큼씩 스크롤 

sizeToContent() : 내용에 맞게 창의 크기를 맞춤 

stop() : 로딩을 중지함. 

 

1️⃣ open() 

window.open() 메서드는 주로 홈페이지 팝업을 띄울때 사용한다고 한다. 

window.open(경로, 창 이름, 창 옵션)

경로 : 포시할 문서나 사이트의 경로를 나타낸다. 

창 이름: 팝업 창의 이름을 지정하면 항상 이창에 팝업 내용이 나타나도록 할 수 있다. 이름을 지정하지 않으면 팝업창이 계속 새로 나타난다.

창 옵션 : left, top 등의 속성을 사용해 크기를 지정할 수 있다. 만약 지정하지 않으면 맨 왼쪽에 나타난다. 

이름 지정 x 

이름 지정 및 창 옵션 설정 

❗ 이때 팝업창이 안 뜰 수도 있는데 그 이유는 팝업이 자동으로 차단되어있을수도 있기 때문이다 .

이를 위해서 

newWin값이 null 이면 팝업 차단을 해제하라는 알람을 받을 수 있도록 설정한다. 

 

2️⃣ close()

close()는 창을 닫는 메서드이다. 

 

 

4. navigator 객체 

navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온, 오프라인등의 여러 정보가 담겨있다. 

navigator 객체 정보는 브라우저 클릭하고 개발자 도구에서 console에 navigator라고 입력하면 볼 수 있다. 

 

- userAgent 프러퍼티 

navigator 객체에서 가장 먼저 알아야할 프로퍼티는 userAgent 로 사용자 에이전트 문자열을 의미한다.

이 프로퍼티는 사용자의 웹 브라우저 정보를 서버에 보낼 때 유용하다.

Mozilla/5.0 모질라 버전을 나타낸다. 

windows NT 10.0 브라우저를 실행하는 컴퓨터 운영체제 

win 64 : 64비트 기반 

AppleWebkit/537.36 웹킷 엔진의 빌드 번호를 나타낸다. 

KHTML  오픈소스 렌더링 엔진인 khtml을 의미 

like Gecko 게코 기반의 다른 브라우저와 호환을 의미 

safari/537.36  사파리 브라우저의 빌드 번호를 의미 

 

예전에는 웹 브라우저를 식별할 때 사용자 에이전트 문자열을 많이 사용했는데 요새는 자바스크립트 엔진을 사용하는 브라우저들이 많아서 사용자 에이전트 문자열의 내용이 겹치기 때문에 사용하지 않는 추세라고 한다. 

 

 

 

5. history 객체 

history 객체는 브라우저에서 뒤로, 앞으로 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장된다, 

 

- history 프로퍼티 

length : 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트의 개수가 저장된다.

 

- history 메서드 

back() : history 목록에서 이전 페이지를 현재 화면으로 불러온다. 

forward() : history 목록에서 다음 페이지를 현재 화면으로 불러온다. 

go() : history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러온다 

history.go(-1)  이전 페이지 history.go(1)  다음 페이지 

 

 

6. location 객체 

location 객체는 이름에서도 알수 있듯이  브라우저의 주소 표시줄과 관련있는 객체이다. 

location 객체에는 현재 문서의 url 주소 정보가 들어있다. 

 

 

- location 프로퍼티 

hash : url 중에서 #으로 시작하는 해시 부분의 정보를 담고 있음. 

host : url의 호스트 이름과 포트번호를 담고 있음. 

hostname : url 호스트 이름을 지정하고 있음.

href : 전체  url 

pathname : url 경로가 저장됨

port : url의 포트번호를 담고 있음. 

protocol : url의 프로토콜을 저장하고 있음.

password :도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의  url일 경우 password의 정보를 담고 있음 .

search : url 중에서 ?로 시작하는 검색 내용을 저장함. 

username  :도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의  url일 경우 username의 정보를 담고 있음 .

 

 

- location 메서드 

assign() : 현재 문서에서 새 문서 주소를 할당해서 새 문서를 가져온다. 

reload() : 현재 문서를 다시 불러온다. 

replace() : 현재 문서의 url을 지우고 다른 문서의 url로 교체한다.

toString() : 현재 문서의 url을 문자열로 반환한다. 

 

 

 

 

7. screen 객체 

screen 객체는 사용자의 화면 크기나 정보를 알아낼 때 사용한다. 

 

- screen 객체 프로퍼티 

availHeight: ui영역을 제외한 영역의 높이 

availWidth : ui 영역을 제외한 내용 표시 영역의 너비 

colorDepth " 화면에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타낸다. 

height : ui 영역을 포함한 화면의 높이 

orientation : 화면의 현재 방향을 나타낸다. 

pixelDepth : 화면에서 픽셀을 렌더링할 때 사용하는 비트 수 

width  : ui 영역을 포함한 화면의 너비를 나타낸다. 

 

- screen 객체 메서드 

lockOrientation() : 화면 방향을 잠금

unlockOrientation() : 화면 방향 잠금을 해제한다. 

 

 

* 연습문제 

팝업을 화면 가운데에 띄우는 방법 

화면의 길이와 너비에서 팝업의 길이와 너비를 빼고 /2 해주면 가운데로 위치시킬 수 있다. 

opt에 옵션 문자열을 모두 넣어준다.