DOM

settings_applicationsEventTarget  >   settings_applicationsWindow

DOM

Writing
  • account_tree
  • bug_report

Objectwindow

웹 문서 실행 창을 다루는 스코프(scope)상의 최상위 객체이다.

설명

창이 생성되어지면 전역 객체 window가 자동으로 생성이 된다. 이 window는 자바스크립트의 실행 공간을 만들어주며 이것을 전역 공간이라 한다. 그래서 window를 전역 객체라 부른다.

window 전역 객체는 실행 컨텍스트에서의 최상위 스코프(scope:범위)이다. 실행시 다루어지는 모든 데이터들은 window 객체의 멤버가 된다.

전역 객체답게 window[[Prototype]] 멤버를 갖는 것 이외에 다양한 메소드와 프로퍼티들이 기본적으로 만들어진다.

기본으로 생성되어 사용되는 관계로 대문자로 시작하는 Window 인터페이스와의 관계에 대해 궁금증을 갖는 경우가 있다. Windowwindow의 관계에 대해서는 아래의 기술 문서를 참조하길 바란다.

하위 트리 탐색

  • Event Handlers

    • onafterprint

      문서가 인쇄를 시작하거나 인쇄 미리보기가 닫힌 후에 발생한다.
    • onanimationcancel

      CSS 애니메이션이 예기치 않게 중단이 되면 발생한다.
    • onanimationend

      CSS 애니메이션이 완료되면 발생한다.
    • onanimationiteration

      CSS 애니메이션의 반복이 끝나고 다른 것이 시작되면 발생한다.
    • onbeforeinstallprompt

    • onbeforeprint

      문서가 인쇄되거나 인쇄를 위해 미리보기가 될 때 발생한다.
    • onbeforeunload

      window, document, resources가 unload되려고 할 때 발생한다.
    • onblur

      요소가 비활성 될 때 이벤트 발생한다.
    • onclick

      마우스 왼쪽 버튼을 눌렀다 뗐을 경우 발생한다.
    • oncopy

      선택 영역이 클립보드로 복사되었을 때 발생한다.
    • oncut

      선택이 잘라내기 되어진 후 클립보드로 복사되었을 때 발생한다.
    • ondevicemotion

      일정한 간격으로 발생하며 해당 시간에 장치가 받는 가속의 물리적 힘의 양을 나타낸다. 가능한 경우 회전 속도에 대한 정보도 제공한다.
    • ondeviceorientation

      지구 좌표 프레임과 비교하여 기기의 현재 방향에 대한 방향 센서에서 새로운 데이터를 사용할 수 있을 때 발생한다.
    • ongamepadconnected

      게임 패드에 연결될 때 이벤트가 발생한다.
    • ongamepaddisconnected

      연결된 게임 패드가 연결이 해제될 때 발생한다.
    • onhandledrejection

    • onload

      HTML 코드가 분석되어 DOM 구조화가 완료된 시점에 사용하는 핸들러이다.
    • onmessage

      웹 소켓을 통해서 메시지를 받았을 때 발생한다.
    • onmessageerror

      역직렬화할 수 없는 메시지를 수신할 때 window에서 발생한다.
    • onoffline

      웹브라우저가 네트워크에 대한 액세스 권한을 잃고 Navigator.onLine 값이 false로 전환되면 발생한다.
    • ononline

      웹브라우저가 네트워크에 액세스하고 Navigator.onLine의 값이 true로 전환되면 발생한다.
    • onpagehide

      세션 기록에서 다른 페이지를 표시하는 과정에서 웹브라우저가 현재 페이지를 숨기면 발생한다. 예를 들어서 사용자가 웹브라우저의 뒤로가기 버튼을 클릭하면 이전 페이지가 표시되기 전에 현재 페이지에서 페이지 숨기기 이벤트를 수신한다.
    • onpageshow

      세션 기록 항목에 의해서 페이지가 보여질 때 발생한다.
    • onpaste

      클립보드의 항목이 불여넣기 되어질 때 발생한다.
    • onpopstate

    • onrejectionhandled

    • onstorage

      다른 문서의 컨텍스트에서 저장 영역이 수정되면 발생한다.
    • ontransitioncancel

      CSS 전이 효과가 취소되었을 때 발생한다.
    • onunload

      문서나 하위 리소스가 unload일 때 발생한다.
  • Events

    • DOMContentLoaded

      HTML 문서가 완전히 로드되고 구문 분석이 될 때 발생한다.
  • Methods

    • alert()

      확인 버튼과 선택에 따라 지정된 메시지를 가진 웹브라우저의 경고 대화 상자를 연다.
    • cancelAnimationFrame()

      window.requestAnimationFrame() 메소드에 의해서 동작이 실행될 때 반환된 실행 ID를 이용해서 동작을 취소 한다.
    • clearInterval()

    • clearTimeout()

    • close()

      윈도우를 닫는다.
    • fetch()

      네트워크에서 리소스를 가져오는 프로세스를 응답을 사용할 수 있게 되면 Promise 객체를 반환한다. Promise의 Response은 요청에 대한 응답을 나타내는 객체로 해석된다.
    • getComputedStyle()

      인수로로 지정된 대상의 활성된 스타일시트를 계산한 후 모든 CSS 속성 값을 포함하는 읽기 전용 CSSStyleDeclaration 객체를 반환한다.
    • matchMedia()

      인수로 주어진 미디어쿼리 문자열의 분석 결과를 나타내는 MediaQueryList 객체를 반환한다.
    • open()

      새로운 윈도우를 생성한다.
    • requestAnimationFrame()

      웹브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트(repaint)가 진행되기 전에 해당 애니메이션을 업데이트하는 지정된 함수를 호출한다.
    • setInterval()

      설정된 시간 단위로 주기적으로 함수를 실행한다.
    • setTimeout()

  • Properties

    • visualViewport

      창의 시각적 뷰포트를 나타내는 VisualViewport 객체를 참조한다.
    • window

      지정된 창의 window 객체를 참조한다.
    • closed

      참조한 창이 닫혔는지 여부를 boolean으로 조회한다.
    • console

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
    • customElements

      새로운 사용자 지정 요소를 등록하거나 이전에 등록된 요소의 정보를 받아올 수 있는 CustomElementRegistry 객체의 참조를 반환한다.
    • devicePixelRatio

      현재 표시 장치의 물리적 픽셀과 CSS 픽셀의 비율을 조회한다.
    • document

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
    • event

      현재 처리중인 Event를 조회한다.
    • frameElement

      문서내 <iframe>이나 <object>처럼 window를 포함한 요소를 조회한다.
    • frames

      현재 문서 내에 포함된 프레임의 window를 원소로 갖는 유사 배열을 조회한다.
    • history

      현재 창에 대한 History 인스턴스를 참조한다.
    • innerHeight

      창의 수평 스크롤바의 높이를 포함한 뷰포트 높이를 픽셀 단위로 조회한다.
    • innerWidth

      창의 수직 스크롤바의 폭을 포함한 뷰포트의 너비를 픽셀 단위로 조회한다.
    • length

      현재 창의 <iframe> 요소의 수를 조회한다.
    • localStorage

      Storage 객체의 인스턴스를 참조한다. 저장된 데이터는 웹브라우저 세션 간에 공유된다.
    • location

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
    • locationbar

      가시성을 확인할 수 있는 웹브라우저의 위치 표시줄(URL 주소 입력) 객체를 참조한다.
    • menubar

      가시성을 확인할 수 있는 웹브라우저의 메뉴바 객체를 참조한다.
    • name

      창의 이름을 조회하거나 설정한다. name 속성은 하이퍼링크를 열거나 Form을 전송할 때 대상(target)으로 사용된다.
    • navigator

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
    • opener

      window.open() 메소드를 사용하여 창을 열거나 target이 지정되어 있는 링크를 통해 창을 열었을 경우 창을 열어준 창의 window 객체의 참조를 조회한다.
    • outerHeight

      웹브라우저의 인터페이스가 포함된 전체 창 높이를 조회한다.
    • outerWidth

      웹브라우저의 인터페이스가 포함된 전체 창 폭을 조회한다.
    • pageXOffset

      수평 방향으로 스크롤 크기를 조회하는 scrollX의 별칭이다.
    • pageYOffset

      수평 방향으로 스크롤 크기를 조회하는 scrollY의 별칭이다.
    • parent

      현재 창의 부모 창의 window 객체를 참조한다.
    • screen

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
    • screenLeft

      웹브라우저의 좌측이 장치의 스크린에서 왼쪽으로 부터 떨어진 거리를 픽셀로 조회한다.
    • screenTop

      웹브라우저의 상단이 장치의 스크린에서 위쪽으로 부터 떨어진 거리를 픽셀로 조회한다.
    • screenX

      screenLeft의 별칭이다.
    • screenY

      screenTop의 별칭이다.
    • scrollX

      스크롤시 수평 방향 위치값을 픽셀 단위로 조회한다.
    • scrollY

      스크롤시 수직 방향 위치값을 픽셀 단위로 조회한다.
    • self

      현재 창 자신의 window 객체를 참조한다. 
    • sessionStorage

      현재 위치에서 세션 형식의 Storage 객체의 인스턴스를 참조한다.
    • status

      웹브라우저 하단의 상태 표시줄에 텍스트를 설정하거나 조회할 수 있다.
    • statusbar

      웹브라우저의 상태 표시줄의 가시성을 토글할 수 있는 상태 표시줄 객체를 참조한다.
    • toolbar

      웹브라우저의 도구 모음 가시성을 확인하는 데 사용할 수 있는 도구 모음 객체를 참조한다.
    • top

      창의 계층에서 최상위 창에 대한 window 객체를 참조한다.

기술 문서

Window는 window와 어떤 관계인가?

Windowwindow의 관계를 통상 생성자(constructor)와 인스턴스(instance)로 보고 있다. 다음과 같은 코드가 성립이 되는 것을 보면 분명한 사실이다.

window.constructor === Window // true
window instanceof Window // true

위의 코드를 보면 window의 생성자는 Window이며 windowWindow의 인스턴스가 맞다.

자바스크립트는 생성자에 의해서 인스턴스가 만들어지면 [[Prototype]] 체인이 복사되어 진다. 따라서 Windowwindow에게 동일한 작용을 할 것임을 예상할 수 있다. 추가적으로 최상위 스코프(Scope)를 가진 window 답게 사용되어지는 모든 객체와 함수, 변수등이 자동으로 멤버로 추가되어진다.

지원 웹브라우저