• 내장 객체란 사용자가 쉽게 가져와서 사용할 수 있도록 미리 만들어진 객체이다.

▶ window 객체 - 웹 브라우저 창 관리

▷ window 객체의 프로퍼티

• 웹 문서를 열면 가장먼저 window라는 객체가 만들어지는데, window 객체의 프로퍼티 중 자주 사용하는 프로퍼티에 대해서 알아보자
• 프로퍼티에 접근하려면 window.document 처럼 프로퍼티 이름앞에 window. 을 붙여야 한다.

프로퍼티	기능
document	웹 브라우저 창에 표시된 웹 문서에 접근
frameElement	현재 창이 다른 요소 안에 포함되어 있으면 해당 요소를, 포함되어 있지 않으면 null 반환
innerHeight	내용 영역의 높이
innerWidth	내용 영역의 너비
localStorage	웹 브라우저 창에서 데이터를 저장하는 로컬 스토리지에 접근
location	window 객체의 위치/현재 URL 표시
name	웹 브라우저 창의 이름을 가져오거나 수정
outerHeight	웹 브라우저 창의 바깥쪽(외부) 높이
outerWidth	웹 브라우저 창의 바깥쪽(외부) 너비
pageXOffset	스크롤했을 때 수평으로 이동하는 픽셀 수(=scrollX)
pageYOffset	스크롤했을 때 수직으로 이동하는 픽셀 수(=scrollY)
parent	현재 창이나 서브 프레임의 부모
screenX	웹 브라우저 창의 왼쪽 테두리가 모니터의 왼쪽 테두리에서부터 떨어져 있는 거리
screenY	웹 브라우저 창의 위쪽 테두리가 모니터의 위쪽 테두리에서부터 떨어져 있는 거리
scrollX	스크롤했을 때 수평으로 이동하는 픽셀수
scrollY	스크롤했을 때 수직으로 이동하는 픽셀수
sessionStorage	웹 브라우저 창에서 데이터를 저장하는 세션 스토리지에 접근

프로퍼티( innerWidth( ) )를 사용해보자

▷ window 객체의 메서드

alert() 함수와 prompt() 함수는 window객체의 메서드이므로 window.alert() 라고 사용해야 한다. 하지만, 웹 브라우저 창에서는 window 객체가 기본 객체여서 window를 생략한 것이다.

프로퍼티	기능
alert()	알림 창 표시
blur()	창에서 포커스 제거
close()	현재 창 닫기
confirm()	확인 버튼과 취소 버튼 있는 창 표시
focus()	현재 창에 포거스 맞추기
moveBy()	현재 창을지정한 크기만큼 이동
moveTo()	현재 창을 지정한 좌표로 이동
open()	새로운 창 열기
postMessage()	다른 창으로 메세지 전달하기
print()	현재 문서 인쇄하기
prompt()	프롬프트 창에 입력한 텍스트 반환하기
resizeBy()	지정한 크기만큼 현재 창의크기 조절하기
resizeTo()	웹 브라우저 창의 크기를 지정한 크기만큼씩 늘리거나 줄이기
scroll()	문서에서 특정 위치로 스크롤하기
scrollBy()	지정한 크기만큼 스크롤하기
scrollTo()	지정한 위치까지 한 번에 스크롤하기
setCursor()	현재 창의 커서 변경하기
showModalDialog()	모달 창 열기
sizeToContent()	내용에 맞게 창 크기 맞추기
stop()	웹 문서 가져오기를 멈추기

메서드( alert( ) )를 사용해보자

▷ window 객체의 내부 살펴보기

콘솔 창에 window를 입력해 window의 프로퍼티와 메서드 목록을 확인해보자

---

▷ 팝업 창 만들기

window 객체의 프로퍼티와 메서드를 사용하여 팝업 창을 만들어보자
window.open(경로, 창 이름, 창 옵션)

팝업 창 열기 - open()

// html
  <button>클릭</button>

// js
function openPopup() {
  window.open(
    "https://github.com/MyNameSieun",
    "이것은 테스트 창!",
    "width=300 height=500 left=300 top=200"
  );
}
const bttn = document.querySelector("button");
bttn.onclick = openPopup;

팝업 창 닫기 - close()

// html
  <button onclick="window.close()">닫기</button>

---

▶ screen 객체

• window 객체 안의 객체 중에서 자주 쓰는 것을 알아보자
• 웹 사이트에 접속하는 사용자의 화면 크기가 모두 다르므로 사용잦의 화면의 크기나 정보가 필요할 경우 screen 객체를 사용한다
  (단, 여기서 화면은 웹 브라우저 창의 크기가 아니라 PC 모니터나 모바일 기기 화면 자체를 가리킴)

▷ screen 객체의 프로퍼티

프로퍼티	기능
availHeight	UI 영역(윈도우 작업 표시줄, 맥의 독 제외)의 표시 영역의 높이
availWidth	UI 영역을 제외한 내용 표시 영역의 너비
colorDepth	화면에서 픽셀을 렌더링할 때 사용하는 색상 수
height	UI 영역을 포함한 화면의 높이
orientation	화면의 현재 방향
pixelDepth	화면에서 픽셀을 렌더링할 때 사용하는 비트 수
width	UI 영역을 포함한 화면의 너비

▷ screen 객체의 메서드

프로퍼티	기능
lockOrientation()	화면 방향 잠금
unlockOrientation()	화면 방향 잠금 해제

---

▷ 화면 중앙에 팝업 창 표시

screen 객체를 사용해 화면의 크기를 알아낸 후 팝업창의 크기를 고려해 화면 중앙에 배치해보자

// js
const bttn = document.querySelector("button");
const popWidth = 600; // 팝업 창 너비
const popHeight = 500; // 팝업 창 높이

bttn.addEventListener("click", function () {
  const left = (screen.availWidth - popWidth) / 2; // (화면 너비 - 팝업 창 너비) / 2
  const right = (screen.availHeight - popHeight) / 2; // (화면 높이 - 팝업 창 높이) / 2
  window.open(
    "https://github.com/MyNameSieun",
    "시은깃허브",
    `width=${popWidth} height=${popHeight} left=${left} top=${top}`
  );
});

⚠️ 최근 웹사이트는 <div> 태그를 사용해 본문에 팝업 창 형태를 만들어 놓고 필요에 따라 팝업 창 내용을 화면에 표시하거나 감추는 방법을 사용한다고 한다.

---

▶ history 객체

• 웹 브라우저 창에서 뒤로 버튼이나 앞으로 버튼을 클릭하거나 주소 표시줄에 입력해서 돌아다녔던 사이트 주소가 array 배열에 저장되어있다.
• history 객체는 방문했던 URL 정보가 저장되므로 history 객체에서는 방문했던 URL을 앞뒤로 이동하는 메서드를 사용할 수 있다.

▷ history 객체의 프로퍼티

프로퍼티	기능
length	방문했던 사이트 개수 저장

▷ history 객체의 메서드

메서드	기능
back()	history 목록에서 이전 페이지를 현재 화면에 불러온다.
forward()	history 목록에서 다음 페이지를 현재 화면에 불러온다.
go()	history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면에 불러온다. ex) histoty.go(1)은 다음 페이지를, histoty.go(-1)은 이전 페이지를 불러온다.

---

▶ location 객체

현재 문서의 URL 주소에 대한 정보를 가지고 있는데, 이 정보를 편집하면 현재웹브라우저 창에 열릴 사이트나 문서를 지정할 수 있다.

프로퍼티	기능
hash	URL 중 # 기호로 시작하는 해시 부분의 정보를 담고 있다.
host	URL의 호스트 이름과 포트 번호를 담고 있다.
hostname	URL의 호스트 이름과 포트 번호를 담고 있다.
href	전체 URL, 이 값을 변경하면 해당 주소로 이동할 수 있다.
password	도메인 이름 앞에 "username"과 "password"를 함께 입력해서 접속하는 URL일 경우 password 정보가 저장된다.
port	URL의 경로를 저장한다.
protocol	URL의 프로토콜을 저장한다.
search	URL 중 ?로 시작하는 검색 내용을 저장한다.
username	도메인 이름 앞에 "username"을 함께 입력해서 접속하는 URL일 경우 username 정보를 저장한다.

웹브라우저 창의 새로고침 버튼과 같은 역할을 하는 reload() 메서드와 현재 창에 다른 문서나 사이트를 보여 주는 replace() 메서드를 유용하게 사용한다.

메서드	기능
assign	현재 문서에 새 문서 주소를 할당해서 새 문서를 가져온다.
reload	현재 문서를 다시 불러온다.
replace	현재 문서의 URL을 지우고 다른 URL 문서로 교체한다.
toString	현재문서의 URL을 문자열로 반환한다.

❗replace() 메서드를 사용하면 현재 문서의 주소가 새로운 주소로 대체되므로 웹 브라우저 창의 뒤로가기 버튼이 활성화되지 않는다.

// html
  <button onclick="location.replace('https://github.com/MyNameSieun')">
    시은의 깃허브로 이동하기
  </button>

---

▶ 📎참조

Doit! 모던 자바스크립트 프로그래밍의 정석