Window 객체

Window 객체는 ?

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

Window

---

인터넷 브라우저를 보면 탭들도 있고, 주소창, 즐겨찾기, 툴바 등이 있습니다. 그 다음부터는 웹사이트가 표시됩니다. 여기서 브라우저 전체를 담당하는 객체가 Window객체입니다. 웹사이트만 담당하는 게 Document 객체 이구요. 물론, Document 객체 또한 Window 객체 안에 들어있습니다. Document 객체는 양이 어마어마하게 많기 때문에 다음시간에 다뤄보겠습니다. 

Window 객체의 추천목록

콘솔에 window를 쓰고 .(점)을 치는 순간 여러 추천 목록이 나옵니다. 이게 바로 윈도우(window) 객체의 속성과 메소드들입니다. 이 포스트에서는 자주 사용하는 것들만 추려볼 생각입니다. 

window 객체 안에는 대표적으로 screen, location, history, document 같은 객체들이 들어있습니다. 메소드들 중에는 parseInt, isNaN 등이 있습니다. window.parseInt() 이렇게 사용해야되는데 parseInt()로도 사용할 수 있습니다.

window.parseInt()

parseInt() // 이렇게도 사용할 수 있다.

Window는 모든 객체의 조상입니다. 전역객체(글로벌 객체)라고 합니다. 자바스크립트의 모든 객체를 다 포함하고 있기 때문에 window는 생략을 할 수 있습니다. 따라서, window.parseInt()를 parseInt()로 사용할 수 있는 것입니다. Window 객체 안을 보면 String, Boolean, Object, Number, Function, Array  같은 자료형도 들어있습니다. 내가 만들었던 변수도 모두 Window 객체 안에 등록이 됩니다.

var apple = 'tree';
window.apple; // 'tree'

이런 것을 전역변수라 하고, 어디에나 사용이 가능합니다. 반대로 함수 안에서 선언한 변수(지역 변수)들은 그 함수 안에서만 쓸 수 있습니다. 

 

이제 window의 대표적인 속성과 메소드들 살펴봅시다.

window.close()

현재 창을 닫습니다. 아까 작성했듯이 window 객체는 생략이 가능하기 때문에 close();를 사용해도 됩니다. 하지만, 다른 함수와 헷갈릴 수 있기 때문에 window를 붙어주는 것도 괜찮습니다.(각자의 스타일 차이입니다.)

winodw.open()

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

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

var popup = window.open('', '', 'width=200,height=200');
popup.document.write('hello');

popup.close();

open 메소드는 더 많은 설정을 할 수 있습니다. 새로 연 창을 변수에 저장할 수도 있고,변수.document.write로 새 창의 내용을 변경할 수도 있습니다. 그리고 프로그래밍적으로 팝업 창을 닫고 싶다면 저장한 변수에 close() 메소드를 이용할 수 있습니다.

window.encodedURI(), window.decodeURI()

주소에 한글이 들어가면 이상한 글자로 변환됩니다. 예를 들면, 자바스크립트는 '%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB'처럼 매우 긴 문자열로 바뀝니다. 한글을 외계어를 바꾸고 싶다면 encodedURI(한글), 외계어를 한글로 바꾸고 싶을 때는 decodeURI(외계어)를 사용하면 됩니다.

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

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

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

프로그래밍 시 몇 초에 실행되거나 지정된 시간마다 반복되게 실행할 수 있는 메소드 입니다. setTimeout은 지정한 초 뒤에 실행되고, setInterval은 지정한 초마다 반복됩니다. setTimeout과 setInterval을 실행 한 후 중간에 멈춰야되는 경우가 있습니다. clearTimeout 과 clearInterval을 사용하면 됩니다. 먼저 setTimeout(변수명)과 setInterval(변수명)을 변수에 저장해놓고, 그 변수를 사용해 중지시키면 됩니다.

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

다음은 전역 객체 중 자주 쓰이는 것들입니다. document는 DOM으로 불리고, 나머지 브라우저에 대한 정보를 가지고 있어서 BOM(Browser Object Model)이라고 불립니다.

BOM(Browser Object Model)

---

Navigator

브라우저나 운영체제(OS)에 대한 정보(navigator.userAgent)가 있습니다. userAgent 정보를 바탕으로 분석 사이트에서는 고객에 대한 정보를 분석합니다. 만약 브라우저에 따른 다른 동작을 해야하거나 IE 같은 브라우저인지 체크할 때, navigator 객체를 사용합니다. 또한, GPS나 핸드폰의 배터리를 체크하는 기능도 있기 때문에 모바일 환경에서도 유용하게 사용할 수 있습니다. 

navigator.userAgent; //'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Whale/3.19.166.16 Safari/537.36'

navigator.language; //'ko-KR'
navigator.cookieEnabled; // true
navigator.vendor; // 'NAVER Corp.'

위의 코드를 보면 윈도우 10 64bit, 현재 쓰고 있는 브라우저 웨일의 버전 등을 확인할 수 있습니다. 기타 정보들도 확인가능합니다.

screen

screen.availHeight; // 1040
screen.availWidth; // 1920
screen.colorDepth; // 24

화면에 대한 정보를 알려줍니다. 너비(width), 높이(height), 픽셀(pixel Depth), 컬러(color Depth), 화면 방향(orientation), 작업표시줄을 제외한 너비와 높이(availWidth, availHeight) 등이 있습니다. 화면 크기에 따라 다른 동작을 하고 싶을 때 사용합니다.

location

location.host; // 'hiphoplsy.tistory.com'
location.hostname; // 'hiphoplsy.tistory.com'
location.protocol; // 'https:'
location.href; // 'https://hiphoplsy.tistory.com/'
location.pathname; // '/'

location 객체는 주소에 대한 정보를 알려줍니다. protocol, host, hostname, href, pathname, port, search, hash 속성을 이용합니다. location.reload()로 새로고침도 가능하고, location.replace()는 현재 주소를 다른 주소로 교체합니다.(다른 페이지로 이동하지만 이전 페이지 기록에는 남지 않습니다.)

history

history.forward() or history.go(1) // 앞으로 가기
history.back() or history.go(-1) // 뒤로 가기
history.go(페이지수) // 히스토리 간 이동
history.length // 뒤로가기 할 수 있는 페이지 개수를 의미함

윈도우의 열람 이력을 최근에 방문한 URL의 배열로 반환합니다.

history.pushState(객체, 제목, 주소)와 history.replaceState(객체, 제목, 주소)는 페이지를 이동하지 않고 단순히 주소만 바꿔줍니다. 대신 객체 부분에 페이지에 대한 정보를 추가할 수 있습니다. 이것은 단일 페이지 어플리케이션을 만들 때 자주 사용되고, 페이지 깜박임 없이 주소를 바꾸고, 바뀐 주소에 따른 액션을 취할 때 사용합니다.