게시글

5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭
강좌12 - JavaScript - 8년 전 등록 / 6년 전 수정

Window 객체와 BOM

이번 시간에는 Window 객체에 대해 알아보겠습니다. Window 객체가 뭐냐고요? 바로 브라우저의 요소들과 자바스크립트 엔진, 그리고 모든 변수를 담고 있는 객체입니다. 

Window

인터넷 브라우저를 보면 위에 들도 있고, 주소창도 있고, 즐겨찾기도 있죠? 그리고 툴바들도 있을 수 있고요. 그 다음부터는 이제 웹사이트가 표시됩니다. 여기서 브라우저 전체를 담당하는 게 Window 객체이고, 웹사이트만 담당하는게 Document 객체라고 이해하시면 됩니다. Document도 Window 객체 안에 들어있습니다. Document 객체는 어마어마하게 양이 많기 때문에 따로 시간을 내어 하겠습니다.

undefined

콘솔에 window를 치고 .(점)을 치는 순간 엄청난 길이의 추천 목록이 뜹니다. 바로 윈도우 객체의 속성과 메소드들입니다. 역시나 그렇듯이 다 아실 필요는 없고요. 제가 몇 개 집어드리겠습니다. 자주 쓰다보면 외워집니다.

window아래에는 대표적으로 screen, location, history, document 같은 객체들이 있습니다. 메소드는 parseInt, isNaN 같은 게 있고요. parseInt, isNaN은 Number 때 배웠죠? 그런데 window.parseInt() 이렇게 써야하는 데 왜 그냥 parseInt()만 해도 되냐고요? 

사실 window는 모든 객체의 조상입니다. 전역객체(글로벌객체)라고 하는데요. 모든 객체를 다 포함하고 있기 때문에 window는 그냥 생략가능합니다. 그래서 그냥 parseInt 이렇게 할 수 있는겁니다. 프로그래밍에서 모든 건 다 이유가 있어요~! window 객체 아래를 보면, String, Boolean, Object, Number, Function, Array같은 자료형도 다 들어있습니다.

놀라운 것은 여러분이 만들었던 변수들(함수 안에서 선언한 변수 제외)도 모두 window 객체 안에 등록됩니다! 진짜인지 물어보죠.

var really = 'Really?'
window.really; // 'Really?'

진짜라네요. ^^ 이런 것들을 전역변수라고 합니다. 어디에서나 쓸 수 있는 애들이거든요. 반대로 함수 안에서 선언한 변수(지역변수)들은 그 함수 안에서만 쓸 수 있습니다.

이제 window 객체의 대표적인 메소드와 속성 몇 개만 알아봅시다.

window.close()

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

window.open()

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

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

open 메소드는 더 많은 설정이 가능합니다. 자세한 것을 알아보려면 링크를 참조하세요. 새로 연 창을 변수에 저장할 수도 있습니다. 그리고 변수.document.write로 새 창의 내용을 변경할 수 있죠.

var popup = window.open('', '', 'width=200,height=200');
popup.document.write('안녕하세요');

나중에 프로그래밍적으로 팝업 창을 닫으려면 아까 저장해둔 변수에 

popup.close();

하면 됩니다. 팝업창에서 원래 탭에 접근할 수도 있습니다. opener 객체를 사용하면 됩니다.

popup.opener.document.write('hello');

window.encodeURI(), window.decodeURI()

주소에 한글이 들어가면 한글이 이상한 글자로 변환됩니다. 예를 들면, 자바스크립트는 '%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8'라는 매우 긴 문자열로 바뀝니다. 만약 한글을 외계어로 바꾸고 싶을 때는 encodeURI(한글), 외계어를 한글로 바꾸고 싶을 때는 decodeURI(외계어)하시면 됩니다. 간단하죠?

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);

window.getComputedStyle(태그)

알아두면 유용한 태그의 스타일을 찾는 메소드입니다. 현재 적용된 CSS 속성 값을 알 수 있어 유용합니다.

console.log(getComputedStyle(document.getElementById('app-root')));

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

BOM

navigator

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

navigator.userAgent; // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36"

위의 코드를 보면 현재 윈도우10 64bit, 크롬 54버전을 쓰고있음을 알 수 있습니다. 기타 정보들도 확인 가능합니다.

navigator.language; // "ko"
navigator.cookieEnabled; // true
navigator.vendor; // "Google Inc"

최근에는 serviceworker같은 신기술들도 navigator 객체 안에 들어가 있습니다. 최신 html5 기술들은 html5 강좌 에서 다룹니다.

screen

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

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

location

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

location.host; // "www.zerocho.com"
location.hostname; // "www.zerocho.com"
location.protocol; // "https:"
location.href; // "https://www.zerocho.com/category/Javascript/post/..."
location.pathname; // "/category/Javascript/post/..."

history

history는 앞으로가기(history.forward() 또는 history.go(1)), 뒤로가기(history.back() 또는 history.go(-1)) 같은 것을 관장합니다. 히스토리간에 이동(history.go(페이지수))할 수도 있습니다. history.length는 뒤로가기할 수 있는 페이지의 개수를 의미합니다.

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

document

document는 아까 말한 웹페이지를 담당하는 객체입니다. 이것은 여기서는 다 다루지 못할 정도로 양이 많기 때문에 다음 시간에 따로 다루겠습니다!

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.
5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭

댓글

8개의 댓글이 있습니다.
3년 전
재미쪄요!
3년 전
var backpage = chrome.extension.getBackgroundPage()
backpage.test(); 이런식으로 popup.js에서 사용하면 정의되어있지 않은 함수라고 오류가 발생하더라구요ㅠ
var test1 = "test"; background.js에 선언해놓고
backpage.test1 알수없는 거라고 오류 발생하구요..!!ㅠㅠ
그래서 window객체를 사용할 수 있다는게 어떤걸 사용할 수있는건지 사용법이 잘못된건지 모르겠어서요ㅠㅠ
3년 전
console.log(backpage)에서 안에 들어있는지 직접 보시면 될 것 같습니다.
3년 전
안녕하세요 zerocho님
제가 지금 chrome extension 만들어보고 있는데 혹시 background.js에서 사용했던 변수를 popup.js 에서 사용할 수 있도록 하는 방법이 있을까요?

chrome.extension.getBackgroundPage() 이걸 사용하면 background의 window객체를 popup.js에서 사용할 수 있다고 하는데....background 데이터를 winodw객체로 해서 popup.js에서 사용할 수 있을까요...?
3년 전
말씀 그대로 chrome.extension.getBackgroundPage() 이걸 사용하면 안 되시나요?
5년 전
BOM에는 지금 자주쓰이는 것들만 적어두신거고 훨씬 더 많나요?
5년 전
네 엄청 많습니다.
6년 전
parseInt, isNaN은 Number 때 배웟었죠? \u003c 맞춤법 틀리신것 같아서 덧글답니다.
6년 전
감사합니다!
8년 전
안녕하세요. 제로초님 질문있습니다.
1. window.setTimeout(function(){ alert('1초'); }, 1000);
이걸 콘솔에 입력하면 alert팝업이 뜨기 전에 콘솔에 숫자를 반환하던데 이게 입력할때마다 다른값을 반환하더라구요..
혹시 이게 뭔지 알려주실 수 있으신가요??ㅜ

2. 그리고 그 바로 아래 예제인
window.setInterval(function() { console.log('1초마다'); });
를 콘솔에 입력하면 계속 console.log가 쌓이던데 이건 중지하는 방법이 따로 없나요?

3. console.log(getComputedStyle(document.getElementById('zero')); 는
SyntaxError가 나서 끝에 ) 를 하나 더 써봤는데요. 그래도 TypeError가 나네요..ㅠ

4.history.pushState(객체, 제목, 주소)와 history.replaceState(객체, 제목, 주소)의 예제 좀 하나씩만 알려주실 수 있으신가요? 객체와 제목란에 무슨 값을 줘야할지 잘 모르겠어서요..
8년 전
1. 그 숫자는 setTimeout의 키값입니다. 그 키값을 clearTimeout에 넣으면 setTimeout이 취소됩니다. 마찬가지로 setInterval도 키값을 clearInterval에 넣으면 취소됩니다.

3. #zero라는 태그가 없어서 그렇습니다. 실제 있는 태그로 실험해보세요.

4. pushState는 페이지를 실제로 이동하지 않고 주소만 바꿉니다. 객체는 새로운 주소에 전달하고 싶은 데이터고, 제목은 새 페이지의 제목이고, 주소는 새 페이지의 주소입니다.
8년 전
history.go(-1)이 뒤로가기 고 history.go(1)이 앞으로 가기 같은데 반대로 적힌거같아요~~
8년 전
감사합니다~
8년 전
navigator 객체가 잘 와닿지 않네요. 그리고 screen, location, history 의 사용 예제도 추가되었으면 좋겠습니다.
8년 전
의견 감사합니다! 오늘 중으로 보완하겠습니다
8년 전
몇 가지 예시를 추가했습니다. screen, location, history, navigator 모두 특수한 경우에만 쓰이기 때문에 간단히만 알고 가시면 됩니다.