14장 window 객체

타이머

setTimeout()

첫번째 인자에 함수, 두번째 인자에 delay시간, 그 다음인자에 파라미터를 전달할 수 있다.

이 파라미터는 첫번째 인자의 함수에 전달된다.

delay 시간 후에 함수가 실행된다.

var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
var timeoutID = window.setTimeout(code[, delay]);
window.setTimeout(function, milliseconds);

기본 예시 (함수뒤에 ()를 붙이지 않는다.)

function hi() {
  alert('hi');
}

setTimeout(hi, 1000); //1000이 1초

파라미터 전달

function hi(a, b) {
  alert( 'hi'+a+b );
}

setTimeout(hi, 1000, "aa", "bb"); // hiaabb

clearTimeout

setTimeout을 호출하면 '타이머 식별자(timer identifier)'가 반환됩니다. 스케줄링을 취소하고 싶을 땐 이 식별자를 사용하면 됩니다.

var alarm = {
  remind: function(aMessage) {
    alert(aMessage);
    this.timeoutID = undefined;
  },

  setup: function() {
    if (typeof this.timeoutID === 'number') {
      this.cancel();
    }

    this.timeoutID = window.setTimeout(function(msg) {
      this.remind(msg);
    }.bind(this), 1000, 'Wake up!');
  },

  cancel: function() {
    window.clearTimeout(this.timeoutID);
  }
};
window.onclick = function() { alarm.setup(); };

setInterval()

setTimeout()과 비슷하다. delay시간이 지날때마다 함수를 실행한다

var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = scope.setInterval(function[, delay]);
var intervalID = scope.setInterval(code, [delay]);

예시

var intervalID = window.setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');

function myCallback(a, b)
{
 // Your code here
 // Parameters are purely optional.
 console.log(a);
 console.log(b);
}

브라우저의 Locaion과 Navigation

Window 객체의 location 프로퍼티는 현재 창에 표시된 문서의 URL을 나타내는 Location 객체와 연결되어 있으며, 또한 이 객체에는 해당 창에 새 문서를 불러들이는 메서드도 존재한다.

Documnet 객체의 location 프로퍼티도 역시 도잉ㄹ한 Location 객체와 연결되어 있다.

URL 파싱

Location 객체는 창에 표시되고 있는 현재 문서의 URL을 나타낸다. LOcation 객체의 href 프로퍼티에는 완전한 URL 문자열이 저장되어 있다.(location.toString()도 가능) 이 객체의 다른 프로퍼티들은 URL의 다양한 특성을 나타낸다. 이것들을 URL 분해 속성이라고 부르며 Link 객체에서도 제공된다.

새문서 불러오기

assgin() 메서드는 창을 불러와서 지정한 URL에 해당되는 문서를 보여준다.

replae() 메서드는 새 문서를 불러오기 전에 브라우저 히스토리 상의 현재 문서를 제거한다는 차이점이 있다.

location 객체의 URL 분해 속성은 쓰기가 가능하며, location URL을 변경하여 브라우저가 새 문서를 불러오도록 설정

부분 식별자는 단지 문서의 새로운 절로 스크롤을 이동시키는 특별한 종류의 상대 URL이다.

#top 구분자는 좀 더 특별

location="#top"  //top이라는 id를 가진 요소가 없다면 브라우저를 문서의 시작점으로 스크롤

브라우징 히스토리

Window 객체의 history 프로퍼티는 History 객체를 가리킨다. History 객체 모델은 브라우징 히스토리를 문서와 문서 상태 목록으로 저장한다. History 객체의 length 프로퍼티는 브라우징 히스토리 목록의 갯수를 나타낸다. 그러나 저장된 URL에 접근하는 것은 보안상의 이유로 허용되지 않는다.

History 객체에는 뒤로 가기, 앞으로 가기 버튼처럼 동작하는 back()과 forward() 메서드가 존재한다.

세번째로 go() 메서드가 있는데, 정수를 인자로 받아 히스토리 목록의 몇 단계씩을 앞으로 또는 뒤로 이동한다.

history.go(-2); //뒤로 2번

브라우저와 화면 정보

스크립트에서는 종종 브라우저가 어떤 환경에서 실행되고 있는지 또는 데스크탑 내의 어느 위치에 표시되고 있는지에 대한 정보가 필요하다. Navigotor와 Screen 객체는 해당 환경에 따라 행동을 사용자화 할 수 있도록 하는 정보를 제공한다.

Navigator 객체

Window 객체의 navigator 프로퍼티는 브라우저 제조사와 버전 정보를 포함하고 있는 Navigator 객체를 가리킨다.

브라우저 스니핑은 특정 브라우저의 특정 버전에서 발생하는 버그에 대처해야 하는 상황에서 쓸만하다.

appName

웹브라우저의 전체 이름이다.

appVersion

보통 숫자로 시작하며, 브라우저 제조사와 버전 정보 등을 포함한 문자열이 뒤따른다.

userAgent

브라우저가 USER-AGENT HTTP 헤더로 보낸 문자열이다. 이 프로퍼티는 대부분의 정보를 포함하고 있기 때문에 보통 브라우저 스니핑 코드에서 이 정보를 이용한다.

platform

브라우저를 실행하고 있는 운영체제를 식별하는 문자열

onLine

브라우저의 네트워크 접속 여부

geolocation

Geolocation 객체는 사용자의 지리적 위치 정보를  확인하는 API를 정의

javaEnalbed()

브라우저가 자바 애플릿을 실행할 수 있는 경우 true를 반환하는 비표준 메서드

cookiesEnabled()

브라우저가 영구적인 쿠키를 저장할 수 있는 경우 true 반환. 쿠키가 사이트 기반으로 설정되어 있다면 정확한 값을 반환하지 않는다.

Screen 객체

Window 객체의 screen 프로퍼티는 사용자의 디스플레이와 사용 가능한 색상수에 관련된 정보를 제공하는 Screen 객체를 가리킨다. width, height : 디스플레이의 픽셀 크기

colorDepth 프로퍼티 : 화면의 픽셀당 표시 가능 비트 수. 보통 16,24,32

대화상자

alert() : 사용자에게 메시지를 보여주고 확인을 기다린다.

confirm() : 메시지를 보여주고 사용자가 확인이나 취소 버튼을 누를 때까지 대기한 다음 boolean 값을 반환한다.

prompt() : 메시지를 보여주고 사용자의 입력을 받은 다음 해당 문자열을 반환한다.

showModalDiaglog() : HTML로 구성된 내용을 포함한 형식의 대화상자를 출려가혹, 전달인자를 넘길 수도 있으며, 대화상자로부터 값을 반환받기도 한다.

returnVal = window.showModalDialog(uri[, arguments][, options]);

<!--
  This is not a stand-alone HTML file. It must be invoked by showModalDialog().
  It expects window.dialogArguments to be an array of strings.
  The first element of the array is displayed at the top of the dialog.
  Each remaining element is a label for a single-line text input field.
  Returns an array of input field values when the user clicks Okay.
  Use this file with code like this:

  var p = showModalDialog("multiprompt.html",
                          ["Enter 3D point coordinates", "x", "y", "z"],
                          "dialogwidth:400; dialogheight:300; resizable:yes");
  -->
<form>
<fieldset id="fields"></fieldset> <!-- Dialog body filled in by script below -->
<div style="text-align:center">   <!-- Buttons to dismiss the dialog -->
<button onclick="okay()">Okay</button>     <!-- Set return value and close -->
<button onclick="cancel()">Cancel</button> <!-- Close with no return value -->
</div>
<script>
// Create the HTML for the dialog body and display it in the fieldset
var args = dialogArguments;
var text = "<legend>" + args[0] + "</legend>";
for(var i = 1; i < args.length; i++) 
    text += "<label>" + args[i] + ": <input id='f" + i + "'></label><br>";
document.getElementById("fields").innerHTML = text;

// Close the dialog without setting a return value
function cancel() { window.close(); }

// Read the input field values and set a return value, then close
function okay() {
    window.returnValue = [];             // Return an array
    for(var i = 1; i < args.length; i++) // Set elements from input fields
        window.returnValue[i-1] = document.getElementById("f" + i).value;
    window.close();  // Close the dialog. This makes showModalDialog() return.
}
</script>
</form>

오류 처리

Window 객체의 onerror 프로퍼티는 처리되지 않은 예외가 발생했을 때 호출 스택까지의 모든 경로와 브라우저의 자바스크립트 콘솔에 출력되는 오류 메시지가 전달되는 이벤트 핸들러다. 이 속성에 함수를 할당할 경우 오류 처리 핸들러가 되어 해당 창에서 자바스크립트 에러가 발생할 때마다 호출된다.

onerror 이벤트 핸들러는 정상적으로 이벤트 객체 하나만이 아닌 총 세 개의 문자열 인자를 넘겨 받는다. 첫번째 전달인자는 오류를 설명하는 메시지다. 두번째는 오류가 발생하는 자바스크립트 코드의 URL을 포함한 문자열이다. 세번째는 오류가 발생한 문서의 줄 번호다.

onerror 이벤트 핸들러가 false를 반환하면 이미 오류를 처리해서 더이상 다른 처리가 필요하지 않음을 알린다.(파폭x)

이건 try/catch 예외 처리 구문 나오기 전에 초창기 시절의 산물이다. 드물게 사용

Window 프로퍼티로서의 문서 요소

HTML 문서상의 어떤 요소에 ID 속성을 부여했고 Window 객체에 같은 이름의 프로퍼티가 존재하지 않는다면, 이 요소의 id 속성을 이름으로 하고 해당 요소를 나타내는 HTMLElement 객체를 값으로 가지는 비열거형 프로퍼티가 Window 객체에 제공된다.

documnet.getElementById

제이쿼리 $ 함수

다중 창과 프레임

각 텝은 브라우징 문백상 독립적이다. 한 탭은 저마다 다른 탭과는 단절된 독립적인 Window 객체를 가진다. 그러나 모든 창이 다른 창으로부터 독립적인 것은 아니다.

HTML 문서는 <iframe> 요소를 사용해 또다른 문서를 포함할 수 있다. 하나의 프레임에서는 해당 프레임의 상위 또는 하위 프레임을 스크립트로 조작할 수 있다.

창 열고 닫기

열기

Window 객체의 open() 메서드를 사용하면 새 웹브라우저 창(혹은 탭)을 열 수 있다. window.open()은 네개의 선택 인자

1. 새 창에 표시될 문서의 URL. 생략하면 about:blank

2. 창의 이름. 생략되면 "_blank"가 사용되고 이름 붙지 않은 새 창을 연다.

스크립트는 창 이름을 추측하거나 다른 웹 애플리케이션상의 창을 사용할 수 없기 때문에 오직 이미 존재하고 접근이 허용된 창에서만 이것이 가능.

- _blank : 새 창에 열립니다. 이것이 기본값입니다.

- _parent : 부모 프레임에 열립니다.

- _self : 현재 페이지를 대체합니다.

- _top : 로드된 프레임셋을 대체합니다.

- name(임의의 이름) : 새 창이 열리고 창의 이름을 지정합니다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀝니다. 다른 이름을 사용하면 또다른 새창이 열립니다.

3. 새로 열릴 창의 크기와 기능 속성의 목록을 콤마로 구분한 문자열

4. 두번째 인자에 지정한 이름의 창이 존재할 경우 유용. 네번째 인자는 boolean 값이며, 현재 창의 브라우징 히스토리를 명시한 URL로 교체하거나(true), 새 브라우징 히스토리를 생성한다.(false) 생략하면 false

open() 메서드의 반환 값은 해당 URL을 가리키는 Window 객체다.

닫기

close() 메서드는 창을 닫는다.

프레임 간의 관계

Window 객체의 open() 메서드는 원본 창 객체를 가리키는 opener 속성을 가진 새로운 Window 객체를 반환한다. 이런 식으로 두 창은 서롤르 참조할 수 있고, 서로 간의 속성을 읽고 상대방의 메서드를 호출할 수도 있다. 비슷한 일이 ㅐ프레임 사이에서도 가능하다. 프레임에서 다른 창이나 프레임의 Window 객체를 참조하려면 parent 속성을 사용하면 된다.

parent.history.back();

최상위 창이나 탭에는 컨테이너가 없으므로 parent 속성은 해당 창 자신을 가리킨다.

parent.parent도 가능하고 top 속성은 최상위 창을 가리킨다.

이와 달리 창이나 프레임의 하위 프레임을 참조할 수 있는 방법도 있다. 프레임은 <iframe> 요소들에 의해 생성된다. 이때 document.getElementById().contentWindow; 로 iframe의 Element 객체를 가져온다음 Window 객체를 가리킬 수 있다.

반대로 Window의 frameElement 속성을 사용하면 내부의 Window 객체에서, 해당 프레임을 포함하고 있는 <iframe> 요소에 접근할 수도 있다. 최상위 창의 Window 객체에서 frameElement 속성의 값은 null이다.

var elt=document.getElementById("fl");
var win=elt.contentWindow;
win.frameElement===elt; //true  win이 프레임의 Window 객체이므로
window.frameElement===null; //window는 최상위 창의 Window 객체이므로 null이다.

모든 Window 객체에는 해당 창이나 프레임 내에 포함된 자식 프레임들의 목록인 frames 속성이 존재. frames 속성은 인덱스 번호나 프레임의 이름으로 참조 가능한 유사 배열이다. frames[0], frames[1].frames[2] 가능

iframe 요소에 id나 name 속성을 지정했다면, 해당 프레임은 인덱스 번호 뿐만 아니라 이름으로도 찾을 수 있다.        ex) frames.fl, frames["fl"]

<iframe>이나 기타 요소들의 ID나 name은 자동으로 Window 객체의 속성처럼 사용할 수 있기 때문

즉 fl이라고만 해도 가능

최신브라우저에서는 frame===window 성립

name 속성을 사용해서 프레임에 이름을 부여하면, 이 이름은 해당 프레임 Window 객체의 name 속성으로도 지정.

창들과 상호작용하는 자바스크립트

코드에서 어떤 창이나 프레임이 다른 창이나 프레임을 참조할 수 있다면(동일 출처 정책 만족) 이들과 상호작용할 수 있다.

웹 페이지에 A와 B라는 두 <iframe> 요소가 존재하고, 이 프레임들이 각각 한 서버의 문서들을 포함하고 있으며, 이 문서들은 서로를 조작하는 스크립트를 포함한다고 하자. 프레임 A에서 변수 i를 선언한다. var i=3;(window.i : 3)

B에서 A에 접근 parent.A.i=4; //A에 있는 변수의 값을 바꾼다.

parent.B.f();  //프레임 B에 선언된 함수 f를 호출

프레임 A의 코드에서 이 함수를 자주 사용해댜 한다면, var f=parent.B.f;

Seeet 클래스를 만들었을 때포함되어 있는 두 프레임에서 Set() 생성자를 부모 창의 속성으로 명시적으로 참조해야 한다.

var s=new parent.Seeet();

아래처럼도 가능

var Seeet=top.Set();

var s=new Seeet();

사용자가 정의한 클래스와 달리 내장 클래스들은 자동으로 모든 창에 미리 정의되어 있다.

창마다 고유한 prototype 객체가 존재한다는 말은, 다른 창에 대해 instanceof 연산자를 제대로 쓸 수 없다는 뜻이다.