Window Object

ex) window.alert("hello");

 

Window Object가 굉장히 많은 기능들을 제공한다.

사실 이것은 자바스크립트 객체가 아니고 브라우저에서 제공해주는 객체이다.

window 객체는 브라우저에 의해 자동으로 생성되며, 웹 브라우저의 창(window)을 나타낸다.

 

이 window 객체를 이용하여

1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수도 있다.

 

2. var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 나타난다.

 

 

- Window Object 사용

 

// Alert
alert("Hello World");

// Prompt
const input = prompt();
alert(input);

// Confirm
if (confirm("Yes or No")) {
  console.log("YES");
} else {
  console.log("NO");
}

let val;

// Outter height and width
val = window.outerHeight;
val = window.outerWidth;

// Inner Height and Width
val = window.innerHeight;
val = window.innerWidth;

// Scroll points
val = window.scrollY;
val = window.scrollX;

console.log(val);

// Location Object
// location 객체에는 현재 URL에 대한 정보가 포함되어 있다.
val = window.location;
val = window.location.hostname;
val = window.location.port;
val = window.location.href;
val = window.location.search;

// Redirect
// 어디 경로로 이동시켜 준다.
window.locationhref = "http://google.com";
window.location.reload();

// History Object
// history 객체에는 사용자가 방문한 URL(브라우저 창에서)이 포함된다.
// 현재 페이지를 기준으로, 상대적인 위치에 존재하는 세션 기록 내 페이지로 이동.(비동기)
window.history.go(-2);
// 앞으로 이동
window.history.forward();
// 뒤로 이동
window.history.back()
val = window.history.length;

// Navigator Object
// navigator 개체에는 브라우저에 대한 정보가 포함되어 있다.
val = window.navigator;
val = window.navigator.userAgent;

 

 

- var로 선언해서 window 객체의 프로퍼티로 만들기

 

let과 const는 블록 스코프이기에

window 객체 내부의 블록에서 선언된 것으로 되기에

전역 객체의 프로퍼티로 활용할 수 없다.

var greeting = "hello";

function doGreeting() {
  return greeting;
}

console.log(window.greeting);
// hello
console.log(window.doGreeting());
// hello