[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.46,0:00:05.74,Default,,0000,0000,0000,,이제 '이벤트'를 가지고 할 수 있는 한가지를 더 보여드리겠습니다.
Dialogue: 0,0:00:05.74,0:00:09.94,Default,,0000,0000,0000,,제가 만듣 이 웹사이트가 다음 질문에 답을 줍니다.
Dialogue: 0,0:00:09.94,0:00:12.15,Default,,0000,0000,0000,,"오노우가 뭐라 말하는가?"
Dialogue: 0,0:00:12.15,0:00:16.60,Default,,0000,0000,0000,,더 정확하게는 당신이 그가 말하는 것을 듣는다면 그의 소리는 어떠할까? 에 대한 답을요.
Dialogue: 0,0:00:16.60,0:00:20.59,Default,,0000,0000,0000,,링크를 클릭하면 MP3 파일을 받을 수 있습니다.
Dialogue: 0,0:00:20.59,0:00:25.16,Default,,0000,0000,0000,,그것은 웹브라우저에서 작동되고 그 질문에 대한 해답을 줍니다.
Dialogue: 0,0:00:25.16,0:00:30.01,Default,,0000,0000,0000,,어쨌든, 사용자들이 이 웹사이트를 나가지 않기를 바랍니다.
Dialogue: 0,0:00:30.01,0:00:33.44,Default,,0000,0000,0000,,이 페이지에서 바로 들을 수 있어야 합니다.
Dialogue: 0,0:00:33.44,0:00:37.89,Default,,0000,0000,0000,,자바스크립으로 <오디오> 태그를 사용하여 만들 수 있습니다.
Dialogue: 0,0:00:37.89,0:00:40.96,Default,,0000,0000,0000,,사용자들이 링크를 클릭하자마자
Dialogue: 0,0:00:40.96,0:00:45.11,Default,,0000,0000,0000,,첫번째로, 변수에 링크를 걸어봅시다.
Dialogue: 0,0:00:45.11,0:00:48.08,Default,,0000,0000,0000,,(타이핑하고 있음)
Dialogue: 0,0:00:55.77,0:00:58.10,Default,,0000,0000,0000,,이제 되돌리기 함수를 정의해봅시다.
Dialogue: 0,0:00:58.10,0:01:03.74,Default,,0000,0000,0000,,참 재밌을 거 같아요.
Dialogue: 0,0:01:03.74,0:01:10.16,Default,,0000,0000,0000,,이 되돌리기 함수에서 우리는 오디오 태그를 다이나믹하게 만들 수 있습니다.
Dialogue: 0,0:01:10.16,0:01:12.03,Default,,0000,0000,0000,,(타이핑하는 중)
Dialogue: 0,0:01:15.82,0:01:19.82,Default,,0000,0000,0000,,그리고 이것은 새로운 웹브라우저에서 사용가능한 멋진 새로운 태그가 될 겁니다.
Dialogue: 0,0:01:19.82,0:01:26.10,Default,,0000,0000,0000,,그리고 나서 오디오 . SRC 는 동일하게... 우리는 이것을 'href' 를 여기 위애
Dialogue: 0,0:01:26.10,0:01:32.56,Default,,0000,0000,0000,,오디오 태그는 이지미 태그와 많이 흡사합니다.
Dialogue: 0,0:01:32.56,0:01:37.34,Default,,0000,0000,0000,,그리고 나서 `audioEl.autoplay = true`,라고 쓰고
Dialogue: 0,0:01:37.34,0:01:40.33,Default,,0000,0000,0000,,이것은 우리가 이걸 이 페이지에 덧붙이자 마자 작동되게 할 겁니다.
Dialogue: 0,0:01:40.33,0:01:42.95,Default,,0000,0000,0000,,마침내, 이 페이지에 붙였습니다.
Dialogue: 0,0:01:42.95,0:01:45.57,Default,,0000,0000,0000,,어디에 이 태그를 붙이느냐는 상관없습니다.
Dialogue: 0,0:01:45.57,0:01:48.06,Default,,0000,0000,0000,,시각화하지 않을 거니까요.
Dialogue: 0,0:01:48.06,0:01:52.30,Default,,0000,0000,0000,,이제 클릭하면 오디오를 생성하고, 소스를 셑한다음,
Dialogue: 0,0:01:52.30,0:01:55.39,Default,,0000,0000,0000,,자동 플레이가 되고, 이 페이지에 붙여질 겁니다.
Dialogue: 0,0:01:55.39,0:01:59.44,Default,,0000,0000,0000,,마지막으로, 링크가 클릭될 때 확실하게
Dialogue: 0,0:01:59.44,0:02:01.38,Default,,0000,0000,0000,,이벤트리스너가 호출되도록 합니다.
Dialogue: 0,0:02:01.38,0:02:03.72,Default,,0000,0000,0000,,(타이핑 하는 중)
Dialogue: 0,0:02:08.28,0:02:12.95,Default,,0000,0000,0000,,그리고 나서, 함수이름은 건너뜁시다.
Dialogue: 0,0:02:12.95,0:02:17.38,Default,,0000,0000,0000,,자, 시험해봅시다.
Dialogue: 0,0:02:17.38,0:02:19.73,Default,,0000,0000,0000,,허밍
Dialogue: 0,0:02:19.73,0:02:21.11,Default,,0000,0000,0000,,어떻게 되었나요?
Dialogue: 0,0:02:21.11,0:02:26.34,Default,,0000,0000,0000,,저한테는 이 소리가 낮고 깊은 오노우의 툴툴거리는 소리로 들립니다.
Dialogue: 0,0:02:26.34,0:02:29.79,Default,,0000,0000,0000,,링크가 여전히 새 윈도우에 오픈되었네요.
Dialogue: 0,0:02:29.79,0:02:33.48,Default,,0000,0000,0000,,이상적으로는 한번 소리가 플레이되면 웹브라우저는 더이상
Dialogue: 0,0:02:33.48,0:02:37.55,Default,,0000,0000,0000,,사용자가 링크되지 않게 하는 게 좋아요. 이미 들었으니까요. 이렇게 하려면
Dialogue: 0,0:02:37.55,0:02:42.92,Default,,0000,0000,0000,,웹브라우저에게 이 이펄트 행위를 취소하라는 명령을 하면 됩니다.
Dialogue: 0,0:02:42.92,0:02:47.15,Default,,0000,0000,0000,,자, 디펄트로 사용자가 링크를 클릭하면
Dialogue: 0,0:02:47.15,0:02:50.32,Default,,0000,0000,0000,,웹브라우저는 사용자가 그 링크로 가게 합니다
Dialogue: 0,0:02:50.32,0:02:54.23,Default,,0000,0000,0000,,만일 자바스크립에서 그 링크로 가는 길을 중단하려면
Dialogue: 0,0:02:54.23,0:02:58.00,Default,,0000,0000,0000,,웹브라우저의 그 작동을 원치 않죠.
Dialogue: 0,0:02:58.00,0:03:02.73,Default,,0000,0000,0000,,이벤트 프라퍼티에 `preventDefault()`.라는 메쏘드를 사용하여
Dialogue: 0,0:03:02.73,0:03:05.30,Default,,0000,0000,0000,,중단시키라고 할 수 있습니다.
Dialogue: 0,0:03:05.30,0:03:09.90,Default,,0000,0000,0000,,우리가 지나온 이벤트 압젝트에다 써야합니다.
Dialogue: 0,0:03:09.90,0:03:15.83,Default,,0000,0000,0000,,여기 안에다가 `e.preventDefault();`라고 씁니다.
Dialogue: 0,0:03:15.83,0:03:19.42,Default,,0000,0000,0000,,이것은 웹브라우저에게 이 디펄트행동(기본행위)를 하지말라고 명령합니다.
Dialogue: 0,0:03:19.42,0:03:21.40,Default,,0000,0000,0000,,이 이벤트과 연관하여.
Dialogue: 0,0:03:21.40,0:03:25.100,Default,,0000,0000,0000,,자 talk-through를 멈추고 다시 시험해봅시다.
Dialogue: 0,0:03:25.100,0:03:28.38,Default,,0000,0000,0000,,지금 막 소리 들으셨죠?
Dialogue: 0,0:03:28.38,0:03:30.95,Default,,0000,0000,0000,,이것은 훨씬 좋은 사용자 경험입니다.
Dialogue: 0,0:03:30.95,0:03:34.96,Default,,0000,0000,0000,,이것을 "progressive enhancement"--점진적 증강, 진보적 확장 이라고 합니다.
Dialogue: 0,0:03:34.96,0:03:39.51,Default,,0000,0000,0000,,웹페이지를 HTML로 디펄트 브라우저 행위로 시작하는
Dialogue: 0,0:03:39.51,0:03:44.65,Default,,0000,0000,0000,,그리고 자바스크립으로 좀 더 풍부한 경험을 하게 확장하는 거죠.
Dialogue: 0,0:03:44.65,0:03:48.36,Default,,0000,0000,0000,,당신은 리스너가 링크되도록 클릭하게 덧붙일 때
Dialogue: 0,0:03:48.36,0:03:50.44,Default,,0000,0000,0000,,종종 이 `preventDefault`를 사용하게 됩니다
Dialogue: 0,0:03:50.44,0:03:54.45,Default,,0000,0000,0000,,form processing 을 할 때도 이것을 사용할 수도 있습니다.
Dialogue: 0,0:03:54.45,0:03:57.48,Default,,0000,0000,0000,,서버에 서브밑하려면,
Dialogue: 0,0:03:57.48,0:03:59.26,Default,,0000,0000,0000,,브라우저가 디펄트 행동을 또 해야하기 떄문에
Dialogue: 0,0:03:59.26,0:04:02.64,Default,,0000,0000,0000,,사용자 경험을 명심하고 웹사이트에서 사용자 경험이 옵션이 아니라면
Dialogue: 0,0:04:02.64,0:04:06.73,Default,,0000,0000,0000,,브라우저가 디펄트 행동을 또 해야하기 떄문에
Dialogue: 0,0:04:06.73,0:04:08.95,Default,,0000,0000,0000,,더 좋게 만드는 방법을 찾아내야 합니다.
Dialogue: 0,0:04:08.95,0:04:11.37,Default,,0000,0000,0000,,여기서 모든 것을 가르쳐줄 수는 없지만
Dialogue: 0,0:04:11.37,0:04:15.50,Default,,0000,0000,0000,,인터넷에는 수천 수만가지 답이 있습니다.