Window 객체

Window 객체란 브라우저의 요소들과 자바스크립트 엔진, 그리고 모든 변수를 담고 있는 객체이다.

브라우저 전체를 담당하는 게 Window 객체이고, 웹사이트만 담당하는 게 Document 객체라고 이해하면 된다. Document도 Window 객체 안에 들어있다.

window 객체 아래에는 대표적으로 screen, location, history, document 같은 객체들이 있다.
메소드는 parseInt, isNaN 같은게 있는데, window.parseInt() 이렇게 써야할 것 같지만 parseInt() 처럼 window 는 생략이 가능하다.
그 이유는 window는 모든 객체의 조상이고 전역 객체(글로벌객체)라고 하는데 모든 객체를 다 포함하고 있기 때문에 window 는 생략하고 사용한다.

브라우저의 개발자 도구 Console 탭에서 window 를 치고 . 을 치면 많은 속성과 메소드들이 나오는데,
그 안에 String, Boolean, Object, Number, Function, Array 같은 자료형 도 다 들어있다.

놀라운 것은 우리가 만든 전역 변수들도 모두 window 객체 안에 등록된다.

window 객체의 대표적인 메소드와 속성

window.close()

• 현재 창을 닫는다. window 는 생략 가능하기 떄문에 close() 만 해도 되고, 다른 함수와 헷갈릴 수 있기 때문에 window를 붙여주는 것도 괜찮다.

window.open()

• 새 창을 연다. 팝업 창의 형태로도 열 수 있고, 새 탭으로도 열 수 있다. 첫 번째 인자로 주소를 받고, 두 번째 인자로 새 탭으로 열지, 현재 탭으로 열지를 설정한다. 세 번째 인자로 새 창에 대한 각종 설정을 전달할 수 있다.

open('https://velog.io'); // 새 탭
open('https://velog.io', '_self'); // 현재 탭
open('', '', 'width=200, height=200'); // 가로세로 200px의 팝업 창 

window.setTimeout(함수, 밀리초), window.setInterval(함수, 밀리초)

• 프로그래밍 할 때 몇 초 후에 실행되거나 그런 걸 원할 때가 있다. 이 때 사용하는 코드이다.
• setTimeout 은 지정한 초 뒤에 실행되고, setInterval은 지정한 초마다 반복된다.

setTimeout(function() {
  alert('1초 뒤');
}, 1000);

setInterval(function() {
  console.log('1초 마다');
});

setTimeout과 setInterval을 실행한 후 중간에 멈춰야하는 경우에는 clearTimeout과 clearInterval 을 사용한다.
setTimeout, setInterval을 변수에 저장한 후 그 변수를 사용해 중지하면 된다.

var timeout = setTimeout(function() {}, 1000);
clearTimeout(timeout);