Window 객체

(2019-08-08)

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
     - 화면 높이,폭,위치
        . screenX, screenY, screenLeft, screenTop
        . innerHeight, innerWidth, outerHeight, outerWidth
     - 스크롤
        . 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 객체 활용

 
        최근수정     요약목록     참고문헌