끄적끄적 코딩
article thumbnail
Published 2023. 3. 12. 01:45
Web Browser, Window 객체 JavaScript

Web Browser와 WIndow 객체

Window 객체
Window 객체는 웹 브라우저에서 작동하는 JavaScript의 최상위 전역 객체이다.
WIndow 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 있다.
JavaScript에서 기본으로 제공하는 프로퍼티와 함수도 포함.(Number 객체, setInterval() 함수 등)
BOM(Browser Object Model)으로 불리기도 함


Window 객체 - alert, confirm, prompt
window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 open
alert() : 브라우저의 알림 창
confirm() ; 브라우저의 확인/취소 선택 창
prompt() : 브라우저의 입력 창

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

Window 객체 - location, history
location 객체를 이용하여 현재 페이지 주소(URL)와 관련된 정보들을 알 수 있다
- location.href : 프로퍼티에 값을 할당하지 않으면 현재 URL을 조회하고 값을 할당하면 할당 된 URL로 페이지 이동
- location.reload() ; 현재 페이지를 새로 고침
history 객체는 브라우저의 페이지 이력을 담는 객체
- history.back() / history.forward() : 브라우저의 뒤로 가기/앞으로 가기 버튼과 같은 동작

새 창 열기
window 객체의 open() 함수를 사용하면 새 창을 열 수 있다.
window.open(’페이지 URL’, ‘창 이름’, ‘특성’, 히스토리 대체여부);
- 창 이름(string) : open 할 대상(_blank, _self등) 지정 혹은 창의 이름
- 특성(string) : 새로 열릴 창의 너비, 높이 등의 특성 지정
-
히스토리 대체여부(Boolean) : 현재 페이지 히스토리에 덮어 쓸지 여부(true/false)


새 창 열기 - 창 열고 닫기
이벤트를 이용하여 특정 시점에 창을 열 수 있다.
- 페이지 로딩 완료 후 새 창 열기, 클릭할 때 새 창 열기 등
window 객체의 close() 함수로 현재 창을 닫을 수 있다.
특히 브라우저에 내장 된 창이 아닌 JavaScript로 자체 구현한 팝업에서 필요

새 창 열기 - 부모 창 컨트롤
window 객체의 opener 속성을 이용하면 부모 창(새 창을 연 창)을 컨트롤 가능
- 부모 창에 값 전달
-
부모 창을 새로 고침 하거나 페이지 이동
opener 객체는 부모 창의 widnow 객체

window 객체 프로퍼티
window 객체는 웹 브라우저에서는 구동 되는 JavaScript의 전역 객체
screen 객체는 화면의 가로, 세로 크기 정보를 알 수 있다.
pageYOffset등과 scroll() 함수를 이용하면 현재 화면의 크기를 계산하여 페이지 단위로 스크롤 제어가 가능


window 객체 함수
브라우저에서 버튼으로 제공하는 기능인 find, stop, print와 같은 함수도 있다
move 함수로 현재 열려 있는 창의 위치를 이동 가능
resize 함수로 현재 열려 있는 창의 크기 조절
window 객체에는 브라우저와 관련 된 함수 뿐만 아니라 순수 JavaScript에서 필요한 객체나 함수 존재
- setTimeout() 함수와 setInterval() 함수로 함수를 특정 시간 후 혹은 특정 시간마다 호출가능
-
eval() 함수는 문자열로 된 JavaScript 코드를 해석한 후 실행


'JavaScript' 카테고리의 다른 글

JavaScript 이벤트  (0) 2023.03.15
JavaScript 객체  (0) 2023.03.12
JavaScript 기본 문법  (0) 2023.03.12
JavaScript 기본  (0) 2023.03.12
[JavaScript] 조건부 연산자, AND 연산자, OR 연산자  (0) 2021.03.05

검색 태그