Web(Front) - Web Browser & Window 객체

📒 Web Browser와 Window 객체

1️⃣ Window 객체

• 웹 브라우저에서 작동하는 JS의 최상위 전역 객체
• 브라우저와 관련된 여러 객체와 속성, 함수 존재
• JS에서 기본 제공하는 프로퍼티와 함수도 포함
• BOM(Browser Object Model)로 불리기도 함.

2️⃣ Window 객체 alert, confirm, prompt

• window 객체 함수 호출 시 브라우저에서 제공하는 창 생성
  • alert() : 브라우저 알림 창
  • confirm() : 브라우저 확인/취소 선택 창
  • prompt() : 브라우저 입력창

3️⃣ Window 객체 navigator

• 브라우저 정보가 내장된 객체
• navigator 정보로 서로 다른 브라우저 구분 가능, 브라우저별 다르게 처리 가능
• HTML5에서는 위치 정보 알려주는 역할 가능

4️⃣ Window 객체 location, history

• location 객체
  • 현재 페이지 주소(URL)와 관련된 정보 제공
  • location.href : 프로퍼티에 값 할당 X → 현재 URL 조회, 값 할당 O → 할당된 URL로 페이지 이동
  • location.reload() : 현재 페이지 새로고침
• history 객체
  • history.back() : 브라우저의 뒤로 가기 버튼과 동일하게 동작
  • history.foward() : 브라우저의 앞으로 가기 버튼과 동일하게 동작
  •  

5️⃣ Window 객체 새 창 열기

• 새 창 열기
  • window.open(’페이지 URL’, ‘창 이름’, ‘특성’, 히스토리 대체여부);
    • 창 이름(string) : open 할 대상 지정 or 창 이름
    • 특성(string) : 새로 열릴 창 너비, 높이 등 특성 지정
• 새 창 열고 닫기
  • 이벤트 이용 시 특정 시점에 창 열기 가능
  • window.close() : 현재 창 닫기

6️⃣ Window 객체 프로퍼티, 객체 함수

• 객체 프로퍼티
  • screen 객체 : 화면의 가로, 세로 크기 정보 제공
  • pageYOffset등과 scroll() 함수 이용 시 현재 화면의 크기 계산해 페이지 단위 스크롤 제어 가능
  • self, document, history, location 등
  • [Javascript] window 객체
• 객체 함수
  • 브라우저에서 버튼으로 제공하는 기능인 find, stop, print 같은 함수 존재
  • move 함수 : 현재 열려 있는 창 위치 이동 가능
  • resize 함수 : 현재 열려 있는 창 크기 조절
  • [자바스크립트 완벽 가이드 정리] Window 객체