Javascript 전역객체 window

프로그래밍/Javascript 2011. 5. 21. 11:32

1. 브라우저는 전역 window 객체를 가지며 모든 전역변수는 window 객체의 프로퍼티로 지정된다.
- window 객체는 생략될 수 있으므로 아래의 두 코드는 동일하다.

var userName = 'Ahn SeungKyu';
window.userName = 'Ahn SeungKyu';

2. window 객체의 다른 프로퍼티
    - navigator
        . appName   : 브라우저의 간단한 이름이다. IE : Microsoft Internet Explorer,  FireFox : Netscape
        . appCodeName : 코드네임으로 호환을 위해 같은 이름을 사용한다. : Mozilla
        . appVersion : 버전정보이기는 하나 내부적으로 사용되는 버전 숫자로 주로 호환성때문에 낮은 버전이 세팅
        . userAgent   : 표준화된 서식이 존재하지 않으므로 브라우저 독립적인 파싱은 불가능하다.
        . plattform      : 하드웨어 플랫폼
        ※ https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/navigator
    - frames[]
    - location
        . search   : window.location.search 의 값은 url 중에서 ? 를 포함하여 그 이하의 name=value를 포함한다.
        . href       : location 객체의 toString() 메소드는 href 값을 반환하므로 location.href 대신 location 을 쓴다.
        . protocol
        . host
        . pathname
        . hash        : top 이란 이름의 anchor를 정의했을 때 그 위치로 스크롤 할 수 있다.
                           window.location.hash = "#top";
        . reload()    : 현재 표시된 페이지를 다시 불러오는데 사용된다.
        . replace() : 지정한 url 을 불러오는 것으로 window.location 에 url 을 대입하는 것과는 다르다.
                           replace()를 사용하면 최근 열어본 페이지 목록에 추가되지 않고 현재의 항목을 대신한다.
    - history
    - screen
        . width : 모니터 스크린의 가로크기
        . height : 모니터 스크리의 세로크기
    - opener
        . 자바스크립트 window.open()으로 열려진 창이라면 그 창을 열게한 창을 가리킨다.
          사용자에 의해 열린 창이라면 (Ctrl + N) null 값을 갖는다.
    - closed
        . 창이 닫혔는지 확인할 때 사용한다. true 값이면 창이 닫혔다는 뜻이다.
    - x, y
        . 윈도우 창의 좌측 좌표(y) 와 상단좌표(y)
    - onerror
        . onerror 프로퍼티에 함수를 할당하면 창안에서 자바스크립트 에러가 발생할 때 마다 프로퍼티에
          할당된 함수가 자동으로 호출된다.
        . 세개의 전달인자가 전달된다.
        . 첫 번째 전달인자는 에러메세지
        . 두 번째 전달인자는 에러를 일으킨 자바스크립트 코드를 담은 문서의 URL
        . 세 번째 전달인자는 문서 안에서 ㅇ러가 발생한 위치를 가리키는 줄 번호
        . 할당된 함수가 true 를 반환하면 더 이상 브라우저가 에러를 출력하지 않는다.
    - document

    2-1 . document 객체의 다른 프로퍼티들
           - forms[]
                . elements[]
                    . options[]   :  form element 의 객체가 Select 일 때만 존재
            - anchors[]
            - links[]
           - images[]
           - applets[]
            - domain   : 문서가 불려온 서버의 호스트 네임
            - URL       : window.location 과는 다르게 읽기 전용이다.
                             (window.)location.href 는 server redirection 이 발생했을 때 처음 요청한 url 을 저장한다.
                             document.URL 은 server redirection 이 발생했을 때 새롭게 불려온 url 을 저장한다.
            - cookie
            - lastModified
            - referrer

3. window 객체의 메소드
    - open()
        . 4가지 전달인자가 있으며 새롭게 열린 window 객체를 반환한다.
        . 첫 번째 전달인자는 url 이다
        . 두 번째 전달인자는 창의 이름으로 <form>, <a> 태그의 target 어트리뷰트의 값으로 유용하다.
          만약 이미 존재하는 창의 이름을 전달하면 open()은 새 창을 여는 대신 단순히 이미 존재하는 창의 참조를
          반환한다.
        . 세 번째 전달인자는 창의 크기와 GUI 장식등을 지정하는 목록이다.
        . 네 번째 전달인자는 두 번째 전달인자가 이미 존재하는 창의 이름을 지정할 때만 유용한다.
          첫 번째 전달인자로 지정된 URL의 문서가 브라우저 창의 열어본 페이지 목록에 현재 항목을 덮어씌울
          것인지(true), 또는 새로운 항목을 추가할 것인지(false)를 지정한다. 기본값을 false이다.

    - close()
        . document.close()와 구분하기 위해서 window.close() 처럼 window 를 명시적으로 적는다.
        . 대부분의 브라우저는 자바스크립트 코드가 생성한 창들에 대해서만 닫을 권한을 부여한다.
        . 창이 외관상 닫힌 뒤라도 window 객체는 계속 존재한다.
        . 창이 닫힌 후에는 closed 프로퍼티를 제외하고는 다른 프로퍼티나 메소드에 접근할 수 없다.

    - focus()
        . 키보드 포커스를 창에 위치하도록 한다.
    - blur()
        . 창으로 하여금 키보드 포커스를 잃어버리게 한다.
    - scrollBy()
        . 창에 표시된 문서를 지정된 픽셀 수만큼 상하좌우로 스크롤한다.
    - scrollTo()
        . 문서를 지정한 절 대 위치로 스크롤한다.
        . 지정된 문서 좌표가 창 문서 영역의 좌측 상단 모서리에 표시되게 문서를 옮긴다.
        . HTML 엘리먼트에는 엘리먼트의 X, Y 좌표를 지정하는 offsetLeft 와 offsetTop 프로퍼티가 있다.
          엘리먼트의 위치를 확인한 후에는 scrollTo() 메소드를 사용하여 그 지정된 엘리먼트가 창의 좌측
          상단 모서리에 위치하게 창을 스크롤 할 수 있다.

4. 문서의 모든 스크립트와 이벤트 처리기, 자바스크립트 URL은 전역객체로 하나의 window 객체를 공유한다.

5. window 객체에 있는 프로퍼티들의 수명은 그 프로퍼티를 정의한 자바스크립트가 포함된 문서의 수명과 같다.
    하지만 window 객체 그 자체의 수명은 창이 존재하는 한 계속해서 남는다.
    window 객체에 대한 참조는 이 창이 얼마나 많은 웹 페이지들을 읽고 버렸는지에 상관없이 항상 유효하다.

6. 창 위치와 크기
    - IE 을 제외한 나머지 브러우저는 다음과 같이 표현한다.

// 데스크톱 띄운 브라우저 창의 전체 크기
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;

// 데스크톱에 띄운 브라우저 창의 위치
var window = window.screenX
var window = window.screenY

// HTML 문서가 표시되는 viewport 의 크기
// 브라우저 창 크기에서 메뉴바, 툴바, 스크롤바 등의 크기를 뺀다
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;

// 수평, 수직 스크롤바의 위치를 나타낸다.
// 화면의 좌측 상단 모서리에 문서의 어느 부분이 위치하는지 나타난다.
var horizontalScroll = window.pageXOffset;
var verticalScroll = window.pageYOffset;

※ URL 에서 전달인자 추출하기

function getArgs() {
    var args = new Object();
    var query = location.search.substring(1);       // 질의 문자열을 얻어온다.
    var pairs = query.split("&");
    for (var i=0; i<pairs.length; i++) {
        var pos = paris[i].indexOf('=');                 // 이름=값 을 추출한다.
        if (pos == -1) continue;
        var argname = pairs[i].substring(0, pos); // 이름을 추출한다.
        var value = pairs[i].substring(pos+1);       // 값을 추출한다.
        value = decodeURIComponent(value);       // 필요하다면 디코딩을 수행한다.
        args[argname] = value;                           // 객체의 프로퍼티로 저장한다.
    }
    return args
}

※ 브라우저 종류에 관계없이 창의 위치와 크기 알아내기
    - getWindowX/Y() : 화면 상에서 브라우저 창이 띄워진 위치를 반환한다.
    - getViewportWidth/Height() : 브라우저의 뷰포트 영역의 크기를 반환한다.
    - getDocumentWidth/Height() : 문서의 크기를 반환한다.
    - getHorizontalScroll() : 수평 스크롤바의 위치를 반환한다.
    - getVerticalScroll() : 수직 스크롤바의 위치를 반환한다.
    - 브라우저 창의 크기를 반환하는 함수는 없음