WEBVTT

00:00:01.095 --> 00:00:02.997
웹 페이지에서 자바스크립트(JavaScript)를
사용하여 할 수 있는

00:00:02.997 --> 00:00:05.620
또 다른 재미있는 방법은 시간을 조정하는 것입니다

00:00:05.620 --> 00:00:08.830
하지만 먼저

00:00:08.837 --> 00:00:10.379
여러분이 알아야 할 것이 있어요

00:00:10.379 --> 00:00:12.032
모든 웹페이지에서 사용할 수 있는

00:00:12.032 --> 00:00:14.934
window 변수입니다

00:00:14.934 --> 00:00:18.334
여기에

00:00:18.334 --> 00:00:20.978
console.log(window)를 입력하고 잠깐 기다릴게요

00:00:20.978 --> 00:00:23.145
dev tools 확인해보세요

00:00:23.145 --> 00:00:24.897
그 안에 무엇이 들어있는지 보세요

00:00:26.887 --> 00:00:30.643
보이시나요? 거대해요 많은 것을 포함하고 있습니다

00:00:30.643 --> 00:00:34.113
굉장하네요

00:00:34.113 --> 00:00:36.519
다른 굉장한 방법을 말해줄게요

00:00:36.519 --> 00:00:38.436
제가 가장 좋아하는 방법들 중 몇 가지들입니다.

00:00:38.436 --> 00:00:40.675
여러분이 해볼 수 있습니다

00:00:40.675 --> 00:00:44.184
window.location은 페이지의 URL에 대한

00:00:44.184 --> 00:00:46.194
많은 정보를 담고 있어요

00:00:46.194 --> 00:00:50.132
한번 해봅시다

00:00:50.132 --> 00:00:52.082
써보도록 하겠습니다

00:00:52.082 --> 00:00:55.145
멈출 필요가 없어요

00:00:55.145 --> 00:00:59.995
textContent += "The URL of this page

00:00:59.995 --> 00:01:04.097
is " + window.location

00:01:04.097 --> 00:01:06.803
이것은 객체이니까 접근할 수 있어야 하니

00:01:06.803 --> 00:01:09.460
.href를 써주면 됩니다

00:01:09.460 --> 00:01:12.608
실제로 iFramed 웹페이지의

00:01:12.608 --> 00:01:14.887
URL입니다

00:01:14.887 --> 00:01:18.466
또 다른 방법으로 window.navigator.userAgent를 써줄게요

00:01:18.466 --> 00:01:21.675
사용자를 탐색에 관련된 것입니다

00:01:21.675 --> 00:01:28.308
"The user agent is" +

00:01:28.308 --> 00:01:33.653
window.navigator.userAgent:
자 됐어요

00:01:33.653 --> 00:01:36.972
userAgent 는 다소 이상하게 여기실 수 있어요

00:01:36.972 --> 00:01:40.339
사람이 읽을 수 있다는 걸

00:01:40.339 --> 00:01:43.176
의미하는 것이 아닙니다

00:01:43.176 --> 00:01:45.116
여러 이유들과 맞지도 않고요

00:01:45.116 --> 00:01:48.313
그래서 많은 웹 개발자들이

00:01:48.313 --> 00:01:51.127
코드들이 무엇을 의미하는지, 무엇을 작업하고 있는지를

00:01:51.127 --> 00:01:53.287
이해하기 위해 libraries를 사용합니다

00:01:53.287 --> 00:01:56.169
운영체제도 마찬가지입니다

00:01:56.169 --> 00:02:00.544
어렵죠 그래서 어렵지 않은 방법으로

00:02:00.544 --> 00:02:05.332
window.outerWidth 와 
window.outerHeight가 있어요

00:02:05.332 --> 00:02:12.583
해보도록 하죠
"This web page is" +

00:02:12.583 --> 00:02:21.544
window.outerWidth + " by " + 
window.outerHeight

00:02:21.544 --> 00:02:24.787
사실은 1280 x 715 사이즈이지만

00:02:24.787 --> 00:02:26.426
여러분에게 화면에 보이는 것은

00:02:26.426 --> 00:02:29.656
제가 말한 사이즈와는

00:02:29.656 --> 00:02:31.859
다를 겁니다

00:02:31.859 --> 00:02:33.928
이제 여러분에게 조금 놀라온 것을 보여줄게요

00:02:33.928 --> 00:02:37.778
코드의 windonw 부분을

00:02:37.778 --> 00:02:40.552
삭제해 보겠습니다

00:02:43.472 --> 00:02:48.215
여전히 동작하는 것을 보실 수 있어요

00:02:48.215 --> 00:02:50.543
이것은 웹 페이지 상에 있는

00:02:50.543 --> 00:02:53.242
디폴트 전역 변수 때문입니다

00:02:53.242 --> 00:02:56.531
여러분이 사용하고자하는 변수를 브라우저가 탐색할 때

00:02:56.531 --> 00:02:58.687
window 객체에서 찾게 됩니다

00:02:58.687 --> 00:03:02.043
그리고 여러분이 전역변수를 만들 때

00:03:02.043 --> 00:03:05.181
window 객체는 전역변수를 값으로

00:03:05.181 --> 00:03:08.025
저장하고 있습니다

00:03:08.025 --> 00:03:10.482
이것은 여러분이 별도로

00:03:10.482 --> 00:03:13.318
outerWidth와 outerHeight같은 변수들을
선언하지 않아도 된다는 뜻이 됩니다

00:03:13.318 --> 00:03:16.050
window에 이미
window.outerWidth와 window.outHeight가

00:03:16.050 --> 00:03:18.847
저장되어 있어요

00:03:18.847 --> 00:03:21.156
일반적으로 전역변수들을 함께 모아놓는 것은 피해야 합니다

00:03:21.156 --> 00:03:23.218
전역번수들과 기존의 window에 있는 변수들이

00:03:23.218 --> 00:03:26.090
서로 충돌할 수 있기 때문입니다

00:03:26.090 --> 00:03:29.266
좀 더 안전하게 하려면

00:03:29.266 --> 00:03:31.956
전역변수 앞에 접두어를 붙일 수 있어요

00:03:31.956 --> 00:03:35.921
칸 아카데미의 경우, 우리가 만들고자 하는 어떠한 전역변수 앞에

00:03:35.921 --> 00:03:39.979
KA_를 씁니다

00:03:39.979 --> 00:03:42.007
좋아요 이것이 window 객체입니다

00:03:42.007 --> 00:03:44.457
이제 동작시키기 위해 두 개의 기능을 어떻게

00:03:44.457 --> 00:03:47.815
사용하는지 살펴보도록 합시다