1
00:00:01,095 --> 00:00:02,997
웹 페이지에서 자바스크립트(JavaScript)를
사용하여 할 수 있는

2
00:00:02,997 --> 00:00:05,620
또 다른 재미있는 방법은 시간을 조정하는 것입니다

3
00:00:05,620 --> 00:00:08,830
하지만 먼저

4
00:00:08,837 --> 00:00:10,379
여러분이 알아야 할 것이 있어요

5
00:00:10,379 --> 00:00:12,032
모든 웹페이지에서 사용할 수 있는

6
00:00:12,032 --> 00:00:14,934
window 변수입니다

7
00:00:14,934 --> 00:00:18,334
여기에

8
00:00:18,334 --> 00:00:20,978
console.log(window)를 입력하고 잠깐 기다릴게요

9
00:00:20,978 --> 00:00:23,145
dev tools 확인해보세요

10
00:00:23,145 --> 00:00:24,897
그 안에 무엇이 들어있는지 보세요

11
00:00:26,887 --> 00:00:30,643
보이시나요? 거대해요 많은 것을 포함하고 있습니다

12
00:00:30,643 --> 00:00:34,113
굉장하네요

13
00:00:34,113 --> 00:00:36,519
다른 굉장한 방법을 말해줄게요

14
00:00:36,519 --> 00:00:38,436
제가 가장 좋아하는 방법들 중 몇 가지들입니다.

15
00:00:38,436 --> 00:00:40,675
여러분이 해볼 수 있습니다

16
00:00:40,675 --> 00:00:44,184
window.location은 페이지의 URL에 대한

17
00:00:44,184 --> 00:00:46,194
많은 정보를 담고 있어요

18
00:00:46,194 --> 00:00:50,132
한번 해봅시다

19
00:00:50,132 --> 00:00:52,082
써보도록 하겠습니다

20
00:00:52,082 --> 00:00:55,145
멈출 필요가 없어요

21
00:00:55,145 --> 00:00:59,995
textContent += "The URL of this page

22
00:00:59,995 --> 00:01:04,097
is " + window.location

23
00:01:04,097 --> 00:01:06,803
이것은 객체이니까 접근할 수 있어야 하니

24
00:01:06,803 --> 00:01:09,460
.href를 써주면 됩니다

25
00:01:09,460 --> 00:01:12,608
실제로 iFramed 웹페이지의

26
00:01:12,608 --> 00:01:14,887
URL입니다

27
00:01:14,887 --> 00:01:18,466
또 다른 방법으로 window.navigator.userAgent를 써줄게요

28
00:01:18,466 --> 00:01:21,675
사용자를 탐색에 관련된 것입니다

29
00:01:21,675 --> 00:01:28,308
"The user agent is" +

30
00:01:28,308 --> 00:01:33,653
window.navigator.userAgent:
자 됐어요

31
00:01:33,653 --> 00:01:36,972
userAgent 는 다소 이상하게 여기실 수 있어요

32
00:01:36,972 --> 00:01:40,339
사람이 읽을 수 있다는 걸

33
00:01:40,339 --> 00:01:43,176
의미하는 것이 아닙니다

34
00:01:43,176 --> 00:01:45,116
여러 이유들과 맞지도 않고요

35
00:01:45,116 --> 00:01:48,313
그래서 많은 웹 개발자들이

36
00:01:48,313 --> 00:01:51,127
코드들이 무엇을 의미하는지, 무엇을 작업하고 있는지를

37
00:01:51,127 --> 00:01:53,287
이해하기 위해 libraries를 사용합니다

38
00:01:53,287 --> 00:01:56,169
운영체제도 마찬가지입니다

39
00:01:56,169 --> 00:02:00,544
어렵죠 그래서 어렵지 않은 방법으로

40
00:02:00,544 --> 00:02:05,332
window.outerWidth 와 
window.outerHeight가 있어요

41
00:02:05,332 --> 00:02:12,583
해보도록 하죠
"This web page is" +

42
00:02:12,583 --> 00:02:21,544
window.outerWidth + " by " + 
window.outerHeight

43
00:02:21,544 --> 00:02:24,787
사실은 1280 x 715 사이즈이지만

44
00:02:24,787 --> 00:02:26,426
여러분에게 화면에 보이는 것은

45
00:02:26,426 --> 00:02:29,656
제가 말한 사이즈와는

46
00:02:29,656 --> 00:02:31,859
다를 겁니다

47
00:02:31,859 --> 00:02:33,928
이제 여러분에게 조금 놀라온 것을 보여줄게요

48
00:02:33,928 --> 00:02:37,778
코드의 windonw 부분을

49
00:02:37,778 --> 00:02:40,552
삭제해 보겠습니다

50
00:02:43,472 --> 00:02:48,215
여전히 동작하는 것을 보실 수 있어요

51
00:02:48,215 --> 00:02:50,543
이것은 웹 페이지 상에 있는

52
00:02:50,543 --> 00:02:53,242
디폴트 전역 변수 때문입니다

53
00:02:53,242 --> 00:02:56,531
여러분이 사용하고자하는 변수를 브라우저가 탐색할 때

54
00:02:56,531 --> 00:02:58,687
window 객체에서 찾게 됩니다

55
00:02:58,687 --> 00:03:02,043
그리고 여러분이 전역변수를 만들 때

56
00:03:02,043 --> 00:03:05,181
window 객체는 전역변수를 값으로

57
00:03:05,181 --> 00:03:08,025
저장하고 있습니다

58
00:03:08,025 --> 00:03:10,482
이것은 여러분이 별도로

59
00:03:10,482 --> 00:03:13,318
outerWidth와 outerHeight같은 변수들을
선언하지 않아도 된다는 뜻이 됩니다

60
00:03:13,318 --> 00:03:16,050
window에 이미
window.outerWidth와 window.outHeight가

61
00:03:16,050 --> 00:03:18,847
저장되어 있어요

62
00:03:18,847 --> 00:03:21,156
일반적으로 전역변수들을 함께 모아놓는 것은 피해야 합니다

63
00:03:21,156 --> 00:03:23,218
전역번수들과 기존의 window에 있는 변수들이

64
00:03:23,218 --> 00:03:26,090
서로 충돌할 수 있기 때문입니다

65
00:03:26,090 --> 00:03:29,266
좀 더 안전하게 하려면

66
00:03:29,266 --> 00:03:31,956
전역변수 앞에 접두어를 붙일 수 있어요

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

68
00:03:35,921 --> 00:03:39,979
KA_를 씁니다

69
00:03:39,979 --> 00:03:42,007
좋아요 이것이 window 객체입니다

70
00:03:42,007 --> 00:03:44,457
이제 동작시키기 위해 두 개의 기능을 어떻게

71
00:03:44,457 --> 00:03:47,815
사용하는지 살펴보도록 합시다