Window 객체

(2020-12-06)

window 객체 , location 객체


1. Window 객체

  ㅇ Window 객체는, BOM(브라우저객체모델)에 기반하여 만들어진 최상위 객체를 말함


2. Window 객체 특징웹브라우저 창/ 마다 각기 최상위로 하나의 window 객체 가 있게 됨
     - 즉, 웹브라우저 화면(창,,프레임)을 참조할 수 있는 객체

  ㅇ window 객체는 '전역 객체(Global Object)' 임
     - 즉, 클라이언트 측에서 다룰 수 있는 최상위 객체/루트 객체/전역 객체 임
     - 한편, 이러한 전역 객체의 참조는,
        . 그 객체프로퍼티,메서드를 쓸때 그 객체의 이름을 앞에 굳이 명시할 필요 없음
        . 즉, window 객체메소드를 호출 할 때, 그냥 alert(), prompt() 로만 쓰면 됨

  ㅇ 각각의 window 객체인 창/ 간에는 서로 통신을 할 수도 있음


3. Window 객체의 주요 프로퍼터 및 메소드프로퍼티
     - 자신 또는 산하 객체를 가리킴
        . window 객체 자신
        . document 객체, location 객체, navigator 객체, 
          history 객체, event 객체 (☞ 이벤트 참조), console 객체,
          XMLHttpRequest 객체 등
        . 특정 창을 가리키는 객체 : self, parent, top, opener
     - 화면 높이,폭,위치
        . 웹브라우저프레임 또는 윈도우의 크기 (높이,폭)
           .. innerHeight, innerWidth (툴바,스크롤바 등 제외)
           .. outerHeight, outerWidth (툴바,스크롤바 등 포함)
        . screenX, screenY, screenLeft, screenTop (위치)
     - 스크롤
        . scrollX, scrollY, pageXOffset, pageYOffset
     - 기타
        . frames[], closed, name, status

  ㅇ 메소드Window 객체의 메소드 참조 
     - 대화상자 : alert(), prompt(), confirm()
     - 창 열기/닫기 : close(), open() 
     - 포커스 주기/제거 : blur(), focus()
     - 타이머 : setTimeout(), setInterval(), clearTimeout(), clearInterval()
     - 창 이동/조정 : moveBy(), moveTo(), resizeBy(), resizeTo(), scrollBy(), scrollTo()
     - print()


4. Window 객체 내 포함된 주요 산하 객체

    

  ㅇ history 객체  : 이동 히스토리 관련 이력/목록 정보
     - 프로퍼티 : length, state, scrollRestoration
     - 메소드 : back(), forward(), go(수치),
                pushState(state,title,url), replaceState(state,title,url)

  ㅇ document 객체  : 창(window)에 표시되는 웹페이지(HTML 문서)의 관리
     - 프로퍼티 
        . 일반 : cookie, domain, location, readyState, referer, title, url, ...
        . DOM 관련 : body, form, image, link, html, ...
     - 메소드   : close(), open(), write(), writeln(), ...

  ㅇ location 객체  : 현재 문서의 URL 관련 정보
     - 프로퍼티 : hash, host, hostname, href, pathname, port, protocol, search, ...
        . 例) 
           .. location.href     => `http://www.ktword.co.kr/test/index.php#hashstring?id=123`
           .. location.protocol => `http` (프로토콜)
           .. location.hostname => `www.ktword.co.kr` (도메인명, FQDN)
           .. location.port     => `80` (default) (포트번호)
           .. location.pathname => `/test/index.php`
           .. location.hash => `#hashstring?id=123` (# 이후 해시 문자열)
           .. location.search   => `?123` (? 이후 질의 문자열)
     - 메소드   : assign(url), replace(url), reload()
       . assign(url) : 지정 URL 웹문서를 읽어들이며(이동하며), 이력을 남김
       . replace(url) : 지정 URL 웹문서를 읽어들이지만(이동하지만), 이력을 남기지 않음
       . reload() : 현재 웹문서를 다시 읽어들임

  ㅇ navigator 객체 : 웹브라우저 제작사,버전정보,사용언어 등이 저장됨
     - 프로퍼티 : userAgent, geolocation, language, platform, ...
     - 메소드 : javaEnabled(), getUserMedia(), vibrate(), ...

  ㅇ screen 객체    : 컴퓨터 스크린 정보(현 디스플레이 크기,색상,방향 등)
     - 프로퍼티 
        . 사용가능화면 (작업표시줄 등 제외) : availTop, availLeft, availHeight, availWidth
        . colorDepth (색 깊이 비트 수), pixelDepth, height, weight, orientation, ...

JS Window 객체
   1. Window 객체   2. Window 객체 활용  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"