[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:01.10,0:00:02.100,Default,,0000,0000,0000,,웹 페이지에서 자바스크립트(JavaScript)를\N사용하여 할 수 있는 Dialogue: 0,0:00:02.100,0:00:05.62,Default,,0000,0000,0000,,또 다른 재미있는 방법은 시간을 조정하는 것입니다 Dialogue: 0,0:00:05.62,0:00:08.83,Default,,0000,0000,0000,,하지만 먼저 Dialogue: 0,0:00:08.84,0:00:10.38,Default,,0000,0000,0000,,여러분이 알아야 할 것이 있어요 Dialogue: 0,0:00:10.38,0:00:12.03,Default,,0000,0000,0000,,모든 웹페이지에서 사용할 수 있는 Dialogue: 0,0:00:12.03,0:00:14.93,Default,,0000,0000,0000,,window 변수입니다 Dialogue: 0,0:00:14.93,0:00:18.33,Default,,0000,0000,0000,,여기에 Dialogue: 0,0:00:18.33,0:00:20.98,Default,,0000,0000,0000,,console.log(window)를 입력하고 잠깐 기다릴게요 Dialogue: 0,0:00:20.98,0:00:23.14,Default,,0000,0000,0000,,dev tools 확인해보세요 Dialogue: 0,0:00:23.14,0:00:24.90,Default,,0000,0000,0000,,그 안에 무엇이 들어있는지 보세요 Dialogue: 0,0:00:26.89,0:00:30.64,Default,,0000,0000,0000,,보이시나요? 거대해요 많은 것을 포함하고 있습니다 Dialogue: 0,0:00:30.64,0:00:34.11,Default,,0000,0000,0000,,굉장하네요 Dialogue: 0,0:00:34.11,0:00:36.52,Default,,0000,0000,0000,,다른 굉장한 방법을 말해줄게요 Dialogue: 0,0:00:36.52,0:00:38.44,Default,,0000,0000,0000,,제가 가장 좋아하는 방법들 중 몇 가지들입니다. Dialogue: 0,0:00:38.44,0:00:40.68,Default,,0000,0000,0000,,여러분이 해볼 수 있습니다 Dialogue: 0,0:00:40.68,0:00:44.18,Default,,0000,0000,0000,,window.location은 페이지의 URL에 대한 Dialogue: 0,0:00:44.18,0:00:46.19,Default,,0000,0000,0000,,많은 정보를 담고 있어요 Dialogue: 0,0:00:46.19,0:00:50.13,Default,,0000,0000,0000,,한번 해봅시다 Dialogue: 0,0:00:50.13,0:00:52.08,Default,,0000,0000,0000,,써보도록 하겠습니다 Dialogue: 0,0:00:52.08,0:00:55.14,Default,,0000,0000,0000,,멈출 필요가 없어요 Dialogue: 0,0:00:55.14,0:00:59.100,Default,,0000,0000,0000,,textContent += "The URL of this page Dialogue: 0,0:00:59.100,0:01:04.10,Default,,0000,0000,0000,,is " + window.location Dialogue: 0,0:01:04.10,0:01:06.80,Default,,0000,0000,0000,,이것은 객체이니까 접근할 수 있어야 하니 Dialogue: 0,0:01:06.80,0:01:09.46,Default,,0000,0000,0000,,.href를 써주면 됩니다 Dialogue: 0,0:01:09.46,0:01:12.61,Default,,0000,0000,0000,,실제로 iFramed 웹페이지의 Dialogue: 0,0:01:12.61,0:01:14.89,Default,,0000,0000,0000,,URL입니다 Dialogue: 0,0:01:14.89,0:01:18.47,Default,,0000,0000,0000,,또 다른 방법으로 window.navigator.userAgent를 써줄게요 Dialogue: 0,0:01:18.47,0:01:21.68,Default,,0000,0000,0000,,사용자를 탐색에 관련된 것입니다 Dialogue: 0,0:01:21.68,0:01:28.31,Default,,0000,0000,0000,,"The user agent is" + Dialogue: 0,0:01:28.31,0:01:33.65,Default,,0000,0000,0000,,window.navigator.userAgent:\N자 됐어요 Dialogue: 0,0:01:33.65,0:01:36.97,Default,,0000,0000,0000,,userAgent 는 다소 이상하게 여기실 수 있어요 Dialogue: 0,0:01:36.97,0:01:40.34,Default,,0000,0000,0000,,사람이 읽을 수 있다는 걸 Dialogue: 0,0:01:40.34,0:01:43.18,Default,,0000,0000,0000,,의미하는 것이 아닙니다 Dialogue: 0,0:01:43.18,0:01:45.12,Default,,0000,0000,0000,,여러 이유들과 맞지도 않고요 Dialogue: 0,0:01:45.12,0:01:48.31,Default,,0000,0000,0000,,그래서 많은 웹 개발자들이 Dialogue: 0,0:01:48.31,0:01:51.13,Default,,0000,0000,0000,,코드들이 무엇을 의미하는지, 무엇을 작업하고 있는지를 Dialogue: 0,0:01:51.13,0:01:53.29,Default,,0000,0000,0000,,이해하기 위해 libraries를 사용합니다 Dialogue: 0,0:01:53.29,0:01:56.17,Default,,0000,0000,0000,,운영체제도 마찬가지입니다 Dialogue: 0,0:01:56.17,0:02:00.54,Default,,0000,0000,0000,,어렵죠 그래서 어렵지 않은 방법으로 Dialogue: 0,0:02:00.54,0:02:05.33,Default,,0000,0000,0000,,window.outerWidth 와 \Nwindow.outerHeight가 있어요 Dialogue: 0,0:02:05.33,0:02:12.58,Default,,0000,0000,0000,,해보도록 하죠\N"This web page is" + Dialogue: 0,0:02:12.58,0:02:21.54,Default,,0000,0000,0000,,window.outerWidth + " by " + \Nwindow.outerHeight Dialogue: 0,0:02:21.54,0:02:24.79,Default,,0000,0000,0000,,사실은 1280 x 715 사이즈이지만 Dialogue: 0,0:02:24.79,0:02:26.43,Default,,0000,0000,0000,,여러분에게 화면에 보이는 것은 Dialogue: 0,0:02:26.43,0:02:29.66,Default,,0000,0000,0000,,제가 말한 사이즈와는 Dialogue: 0,0:02:29.66,0:02:31.86,Default,,0000,0000,0000,,다를 겁니다 Dialogue: 0,0:02:31.86,0:02:33.93,Default,,0000,0000,0000,,이제 여러분에게 조금 놀라온 것을 보여줄게요 Dialogue: 0,0:02:33.93,0:02:37.78,Default,,0000,0000,0000,,코드의 windonw 부분을 Dialogue: 0,0:02:37.78,0:02:40.55,Default,,0000,0000,0000,,삭제해 보겠습니다 Dialogue: 0,0:02:43.47,0:02:48.22,Default,,0000,0000,0000,,여전히 동작하는 것을 보실 수 있어요 Dialogue: 0,0:02:48.22,0:02:50.54,Default,,0000,0000,0000,,이것은 웹 페이지 상에 있는 Dialogue: 0,0:02:50.54,0:02:53.24,Default,,0000,0000,0000,,디폴트 전역 변수 때문입니다 Dialogue: 0,0:02:53.24,0:02:56.53,Default,,0000,0000,0000,,여러분이 사용하고자하는 변수를 브라우저가 탐색할 때 Dialogue: 0,0:02:56.53,0:02:58.69,Default,,0000,0000,0000,,window 객체에서 찾게 됩니다 Dialogue: 0,0:02:58.69,0:03:02.04,Default,,0000,0000,0000,,그리고 여러분이 전역변수를 만들 때 Dialogue: 0,0:03:02.04,0:03:05.18,Default,,0000,0000,0000,,window 객체는 전역변수를 값으로 Dialogue: 0,0:03:05.18,0:03:08.02,Default,,0000,0000,0000,,저장하고 있습니다 Dialogue: 0,0:03:08.02,0:03:10.48,Default,,0000,0000,0000,,이것은 여러분이 별도로 Dialogue: 0,0:03:10.48,0:03:13.32,Default,,0000,0000,0000,,outerWidth와 outerHeight같은 변수들을\N선언하지 않아도 된다는 뜻이 됩니다 Dialogue: 0,0:03:13.32,0:03:16.05,Default,,0000,0000,0000,,window에 이미\Nwindow.outerWidth와 window.outHeight가 Dialogue: 0,0:03:16.05,0:03:18.85,Default,,0000,0000,0000,,저장되어 있어요 Dialogue: 0,0:03:18.85,0:03:21.16,Default,,0000,0000,0000,,일반적으로 전역변수들을 함께 모아놓는 것은 피해야 합니다 Dialogue: 0,0:03:21.16,0:03:23.22,Default,,0000,0000,0000,,전역번수들과 기존의 window에 있는 변수들이 Dialogue: 0,0:03:23.22,0:03:26.09,Default,,0000,0000,0000,,서로 충돌할 수 있기 때문입니다 Dialogue: 0,0:03:26.09,0:03:29.27,Default,,0000,0000,0000,,좀 더 안전하게 하려면 Dialogue: 0,0:03:29.27,0:03:31.96,Default,,0000,0000,0000,,전역변수 앞에 접두어를 붙일 수 있어요 Dialogue: 0,0:03:31.96,0:03:35.92,Default,,0000,0000,0000,,칸 아카데미의 경우, 우리가 만들고자 하는 어떠한 전역변수 앞에 Dialogue: 0,0:03:35.92,0:03:39.98,Default,,0000,0000,0000,,KA_를 씁니다 Dialogue: 0,0:03:39.98,0:03:42.01,Default,,0000,0000,0000,,좋아요 이것이 window 객체입니다 Dialogue: 0,0:03:42.01,0:03:44.46,Default,,0000,0000,0000,,이제 동작시키기 위해 두 개의 기능을 어떻게 Dialogue: 0,0:03:44.46,0:03:47.82,Default,,0000,0000,0000,,사용하는지 살펴보도록 합시다\N