[자바스크립트] TIL10 : 윈도우 객체의 이용 방법

---

▣ Window Object

앞서 설명했던 객체 개념을 브라우저 전체에 적용했을 때, 객체 중에 최상위에 존재하는 객체를 윈도우 객체라고 합니다. 즉, 윈도우 객체는 브라우저 환경에서 자바스크립트의 정의된 객체, 메서드, 특성들 뿐만 아니라 선언해서 사용하는 변수 및 함수까지 포함하는 전역 객체(Global object)입니다.

 

물리적으로 반드시 일치하는 것은 아니지만 개념적으로 설명하자면 아래의 이미지와 비슷하다고 할 수 있습니다.

 

 

참고로 윈도우 객체의 특성 중 하나인 'document'는 HTML 문서, 즉 웹 페이지를 의미하며 이 것은 향후 다루게 될 HTML DOM(Document Object Model)의 구조 및 활용과 HTML의 동적 제어를 이해하는데 필수적인 중요한 내용입니다.

 

---

□ 윈도우 객체 예시

/* Window Object */

var value = 1;
function func() {
  return "hi";
}

console.log(value);
console.log(func());

console.log(window.value);
console.log(window.func());

 

위의 코드에서 보듯이 var 를 이용하여 변수를 선언하거나, function 를 이용하여 함수를 선언하면 이들은 전역 객체인 윈도우 객체의 특성으로 저장되고 이용됩니다. 그리고 윈도우 객체의 특성을 이용할 때는 'window'를 생략할 수 있습니다. 눈치챘겠지만 이 내용은 앞서 설명한 'var를 이용한 변수 선언시 변수 영역(스코프)' 그리고 '호이스팅'과 연관된 내용입니다.

 

 

위의 코드에서 변수와 함수가 선언된다는 것은, 윈도우 객체를 가상으로 설정했을 때 그 객체 내에 아래와 같은 특성이 포함되는 것입니다. 

// Window Object
{
    value : 1,
    func : function func() {
    	reuturn "hello";
    }
}

 

---

 

▣ 주요 객체 및 메서드

윈도우 객체 내의 대표적인 객체와 메서드 몇 가지를 살펴보겠습니다.

 

---

□ window.console

/* Console Object */

// window.console.log("hello");
console.log("hello");

 

앞서 이미 살펴본 대로 자바스크립트 콘솔 창을 이용할 수 있게 해주는 객체입니다.

 

 

---

□ window.alert()

/* Alert */

// window.alert("hello world");
alert("hello world");

 

브라우저에 경고 메시지 창을 띄우는 메서드이며, 사용자가 응답을 하지 않으면 메시지 창이 사라지지 않습니다.

 

 

---

□ window.prompt()

/* Prompt */

// const input = window.prompt();
const input = prompt();
console.log(input);

 

브라우저에 메시지 창을 띄워 사용자 입력값을 받을 수 있는 메서드이며, 사용자가 값을 입력하거나 취소하지 않으면 메시지 창이 사라지지 않습니다.

 

 

 

---

□ window.confirm()

/* Confirm */

// if (window.confirm("Are you sure?")) {
if (confirm("Are you sure?")) {
  console.log(true);
} else {
  console.log(false);
}

 

브라우저에서 메시지 창을 띄워 사용자의 확인을 요구하는 메서드이며, 'OK'를 선택할 경우 true, 'Cancel'을 선택할 경우 false 값을 반환합니다.

 

 

 

 

---

반응형

---

 

▣ 기타 특성, 객체 및 메서드 

 

---

□ window.outerHeight , window.outerWidth

      window.innerHeight , window.innerWidth

/* Outer height and width */

console.log(window.outerHeight);
console.log(window.outerWidth);


/* Inner height and width */

console.log(window.innerHeight);
console.log(window.innerWidth);

 

브라우저 창 외부의 높이와 너비, 그리고 내부의 높이와 너비 값을 알 수 있는 특성입니다.

 

 

---

□ window.scrollY , window.scrollX

/* Scroll points */

console.log(window.scrollY);
console.log(window.scrollX);

 

웹 페이지에서 스크롤바가 생성될 경우 Y축과 X축으로 얼마나 이동되었는지를 알 수 있는 특성입니다. 또 다른 특성의 이름으로 window.pageYOffset, window.pageXOffset 이라고도 합니다.

 

index.html 파일에 아래와 같이 코드를 추가하면 Y축 방향으로 스크롤할 수 있게 되고 이때 특성 값을 확인해 볼 수 있습니다.

 

<div style="margin-top: 1000px;"></div>

 

 

---

□ window.navigator

/* Navigator Object */

console.log(window.navigator);
console.log(window.navigator.appName);
console.log(window.navigator.appVersion);
console.log(window.navigator.language);
console.log(window.navigator.platform);
console.log(window.navigator.userAgent);
console.log(window.navigator.vendor);

 

브라우저와 사용자 환경에 대한 정보를 알 수 있는 객체입니다.

 

 

---

□ window.location

/* Location Object */

console.log(window.location);
console.log(window.location.hostname);
console.log(window.location.port);
console.log(window.location.href);

// window.location.reload();
// window.location.href = 'http://google.com';

/* Execute at Javascript Console after Googling */
// console.log(window.location.search);

 

브라우저의 주소 입력창과 관련된 정보를 알 수 있는 객체입니다. 호스트 이름, 포트 번호, URL(Uniform Resource Locator) 주소 등을 파악할 수 있습니다.

 

 

location.reload() 메서드를 이용하여 리로드 시킬 수 있습니다. 제어를 하지 않으면 계속 실행됩니다. 

 

 

location.href 특성을 이용하여 특정 웹 주소로 이동시킬 수 있습니다. 제어를 하지 않으면 계속 실행됩니다.

 

 

location.search 는 검색 엔진을 이용할 경우 소위 말하는 질의 문자열(Query String; 검색에 이용된 문자열)의 값을 알 수 있는 특성입니다.

 

 

'javascript'라는 검색어로 구글 검색 결과, 실제 주소창에 입력되는 값은 'google.com/search?q=javascript' 입니다. 그리고 location.search 는 이 중에서 '?q=javascript'를 값으로 가집니다.

 

 

---

□ window.history

 

/* History Object */

console.log(window.history.length);

// window.history.go(-1); // ex) twitter.com
// window.history.go(-2); // ex) facebook.com
// window.history.go(-3); // ex) google.com

 

브라우저에서 웹 페이지의 방문 기록(Session history)을 알 수 있는 객체입니다. history.length 는 방문한 웹페이지의 수를 의미합니다. 브라우저에서 새로운 탭을 열면 history.length 의 값은 1입니다.

 

 

history.go() 메서드를 이용하면 이전에 방문했던 웹페이지로 이동할 수 있습니다. 예를 들어 현재 페이지에서 구글 -> 페이스북 -> 트위터 -> 다시 현재 페이지로 이동한 다음, history.go() 를 이용하면 인자로 주어지는 값에 따라 -1 이면 가장 최근에 방문한 트위터, -2 이면 페이스북, 그리고 -3 이면 구글 페이지로 이동하게 됩니다.

 

---