브라우저 내장 객체

브라우저 내장 객체

브라우저 내장 객체는 브라우저에서 제공하는 자바스크립트 내장 객체이므로 브라우저에서 실행되는 프론트 웹 애플리케이션에서만 사용할 수 있다.

내장 객체 종류

객체	설명
window	브라우저 창을 지칭하는 객체
document	브라우저에 출력되는 HTML 문서를 지칭하는 객체
history	브라우저의 인터넷 방문 기록을 지칭하는 객체
screen	브라우저가 떠 있는 스크린 창을 지칭하는 객체
navigator	브라우저에 대한 정보를 제공하는 객체
location	브라우저의 출력 URL을 지칭하는 객체

내장 객체 계층 구조

브라우저 객체들은 모두 window의 객체들로 window부터 계층구조로 구성되어 있다.

document, history, screen, navigator, location은 모두 window에 포함된 객체들이다.
➡️ 이 객체들을 사용하려면 window.을 이용해야 한다.

브라우저에 실행되는 모든 자바스크립트 글로벌 객체는 window이므로 이 window 객체는 생략할 수 있다.
(window.document --> document)
(alert(), console.log() 등에서도 생략이 된 것)

window 프로퍼티

프로퍼티	설명
document	HTML 문서를 지칭하는 객체
location	브라우저의 URL 정보를 지칭하는 객체
screen	스크린 창을 지칭하는 객체
history	브라우저의 인터넷 방문 기록을 지칭하는 객체
navigator	브라우저의 다양한 정보를 가지는 객체
console	브라우저 콘솔 창
innerWidth	HTML 문서가 출력되는 부분의 가로 사이즈
innerHeight	HTML 문서가 출력되는 부분의 세로 사이즈
outerWidth	브라우저 창의 가로 사이즈
outerHeight	브라우저 창의 세로 사이즈
screenLeft	스크린 왼쪽에서 브라우저가 위치한 거리
screenTop	스크린 위에서 브라우저가 위치한 거리
scrollX	브라우저의 가로 방향 스크롤 위치
scrollY	브라우저의 세로 방향 스크롤 위치

브라우저 사이즈 ( window )

브라우저의 사이즈 정보가 필요한 경우 innerWidth, innerHeight 혹은 outerWidth, outerHeight를 이용한다.
outer은 브라우저 창 자체의 사이즈이며, inner은 스크롤 바까지 포함한 HTML 문서가 출력되는 부분의 사이즈이다.

또한, 브라우저가 스크린에서 어느 위치에 보이고 있는 지를 screenTop, screenLeft 를 이용해 알아볼 수 있다.

window 함수

함수	설명
alert()	알림 다이얼로그 띄우기
confirm()	확인, 취소 버튼이 있는 다이얼로그 띄우기
prompt()	사용자에게 입력받는 다이얼로그 띄우기
open()	새로운 URL 문서를 띄우기
close()	브라우저 창 닫기
scrollBy()	스크롤 시키기

window 함수 - open()

open() 함수를 통해 새로운 URL을 출력시킬 수 있는데, 이 URL의 HTML 문서가 새로운 브라우저 창이 열리고 그 창에서 떠야하는 지, 아니면 현재 창에 떠야 하는 지를 지정해주어야 한다.

브라우저 창에서 새로운 브라우저 창을 띄우면

• 기존 브라우저 창 - 부모 창 (parent)
• 새로 뜬 브라우저 창 - 자식 창 (child)

파라미터

• open(url) - url만 지정해서 함수 호출
• open(url, target) - url 과 target을 지정해서 함수 호출
• open(url, target, windowFeatures) - url, target 과 다양한 정보를 설정해서 함수 호출

target 매개변수

open() 함수를 호출하면서 target을 매개변수로 지정해서 새로운 url이 어느 창에 떠야 하는 지를 제어할 수 있다.

기본 값은 _blank이며, 창을 열고 그곳에 url을 출력하는 정보이다.

• _blank - 새 창이 열리고 그곳에 url 출력
• _parent - 부모 창에 url 출력 (기존 창)
• _self - 자신 창에 url 출력

windowFeatures 매개변수

open() 함수를 호출하면서 windowFeatures로 창에 대한 정보를 설정할 수 있다.

• width, height - 새로운 브라우저 창의 사이즈
• left, top - 새로운 브라우저 창이 뜨는 위치

window 함수 - close()

부모 창에서 자식 창을 open() 띄우면서 자식 창을 임의 객체에 저장해놓고, 그 객체를 이용해 close() 함수를 호출하면 자식창이 닫힌다.

childWindow.close()

HTML 문서의 메모리 구조

자바스크립트에서 변수, 함수 등을 이용하기 위해서는 메모리가 할당 되어야하고, 그 메모리에 변수, 함수 등이 저장되어 이용된다.

그런데 하나의 HTML 문서를 위해 할당된 메모리를 다른 문서의 자바스크립트에 접근할 수 없다.

➡️ 메모리는 HTML 단위로 할당이 되며, 어떤 HTML 문서를 위한 메모리는 그 HTML 문서의 자바스크립트에서만 이용할 수 있다.

opener를 이용해 부모창의 변수 함수 이용하기

open() 함수로 새 창을 여는 경우, 경우에 따라 자식 창에서 부모 창의 데이터가 필요할 수도 있고 반대로 부모 창에서 자식 창의 데이터가 필요할 수도 있다.

open()함수에 의해 자식창이 열리면 부모창과 자식창이 변수 혹은 함수에 접근하는 경우가 있는데 이를 위해 opener라는 객체를 제공한다.

opener는 부모 창에서 자식 창을 open() 함수로 여는 경우 자식 창에서 자신을 연 부모창을 지칭하는 객체이다.
(부모 창에서 자식창을 열었으니 여는 행동을 하는 부모 : opener!!)

❌ 자식 창에서 부모 창의 데이터에 접근할 때 let으로 선언한 변수는 불러올 수 없음
⭕️var로 선언한 변수는 불러올 수 있음

opener를 이용해 자식 창의 변수 함수 이용하기

부모 창에서 open()으로 띄운 자식 창에 선언된 변수, 함수가 이용되어야 하는 경우가 있다.
이것이 가능하려면 먼저 자식 창의 자바스크립트 코드에서 opener 객체를 이용해 자신의 window를 지칭하는 객체를 선언해 주어야 한다.

// 💡 부모 창에서 자식 창에 접근하려면 자식 창에서 자신을 부모창에서 이용할 수 있도록 등록을 해주어야 한다.
// 💡 this 예약어를 이용하여 부모 창에서 사용할 자신의 이름을 등록해주어야 한다.
opener.child = this;

opener를 이용해 자식 창의 변수 함수 이용하기

부모 창에서 child로 자식 창에 선언된 변수, 함수를 이용하고 있다.
child는 자식 창에서 opener에 등록시킨 객체명이다.

opener()를 이용해 부모 창의 URL 변경하기

opener 객체를 이용해 자식창에서 부모 창의 URL을 변경해서 특정 화면으로 이동하게 할 수 있다.

✔️ 자식 창에서 로그인 후 성공/실패 여부에 따라 다른 URL을 부모 창에 보내는 것

location

브라우저의 URL을 다루기 위한 객체이다.

1. URL에서 원하는 정보를 추출하는 방법을 제공
2. 브라우저의 화면을 특정 URL로 변경하는 방법을 제공

프로퍼티

프로퍼티	설명	예시
href	브라우저의 URL 정보
protocol	URL의 프로토콜 정보	https/http
host	URL의 호스트 정보 ( 호스트명과 포트번호 )
hostname	URL의 호스트명 정보
port	URL의 포트 정보
pathname	URL의 경로 정보
search	URL의 쿼리 문자열 정보	data -> 서버 전송
hash	URL의 해시 정보
origin	URL의 백엔드를 식별하기 위한 정보

함수

함수	설명	역할
reload()	현재의 URL로 새로 요청	마치 브라우저의 새로고침 버튼을 누르는 것과 동일한 효과
replace()	주어진 URL로 이동	브라우저에 새로운 URL 지정 & 이동

location - href vs replace()

• location.href로 이동하면?
  현재의 URL 정보가 브라우저 히스토리에 유지되므로 만약 뒤로가기 버튼이 클릭되면 현재의 화면이 다시 나온다.
  ➡️ back 버튼 o

• location.replace() 로 이동하면?
  현재의 URL 정보는 유지되지 않는다.
  ➡️ back 버튼 x
  ➡️ 임시 화면인 경우
  (로그인 시: 로그인 성공했는데, 뒤로 가기 하면 다시 로그인화면일 필요 없기 때문에)

history

브라우저의 히스토리 정보를 이용해 이전, 혹은 이후 화면으로 이동시키기 위해 사용된다.

함수

함수	설명	특징
back()	이전 화면으로 이동
forward()	이후 화면으로 이동
go()	히스토리의 특정 위치로 이동	매개 변수에 숫자를 지정하면 그 단계의 앞, 뒤로 이동 가능 --> go(0) : 브라우저의 새로고침 버튼을 클릭 한것과 동일

screen

브라우저가 실행되는 스크린 정보를 획득하기 위해 이용된다.

프로퍼티

프로퍼티	설명
availWidth	사용 가능한 스크린의 가로 사이즈
availHeight	사용 가능한 스크린의 세로 사이즈
width	스크린 가로 사이즈
height	스크린 세로 사이즈

• 이 둘의 차이(avail)는 시스템이 기본으로 제공하는 영역까지 포함되는 지의 차이이다.

navigator

브라우저의 다양한 정보 혹은 기능에 접근할 수 있는 프로퍼티를 제공하는 객체이다.
화면에 관련 없는 다양한 정보/기능에 접근할 수 있다.
(네트워크, 위치정보, 배터리 정보등)

프로퍼티

프로퍼티	설명
cookieEnabled	브라우저에서 쿠키 사용이 가능한지 여부
language	브라우저에 설정된 언어
onLine	브라우저가 네트워크에 연결된 것인지 여부
userAgent	브라우저, 플랫폼 정보