1
00:00:00,461 --> 00:00:05,742
이제 '이벤트'를 가지고 할 수 있는 한가지를 더 보여드리겠습니다.

2
00:00:05,742 --> 00:00:09,936
제가 만듣 이 웹사이트가 다음 질문에 답을 줍니다.

3
00:00:09,936 --> 00:00:12,150
"오노우가 뭐라 말하는가?"

4
00:00:12,150 --> 00:00:16,599
더 정확하게는 당신이 그가 말하는 것을 듣는다면 그의 소리는 어떠할까? 에 대한 답을요.

5
00:00:16,599 --> 00:00:20,589
링크를 클릭하면 MP3 파일을 받을 수 있습니다.

6
00:00:20,589 --> 00:00:25,163
그것은 웹브라우저에서 작동되고 그 질문에 대한 해답을 줍니다.

7
00:00:25,163 --> 00:00:30,009
어쨌든, 사용자들이 이 웹사이트를 나가지 않기를 바랍니다.

8
00:00:30,009 --> 00:00:33,445
이 페이지에서 바로 들을 수 있어야 합니다.

9
00:00:33,445 --> 00:00:37,891
자바스크립으로 <오디오> 태그를 사용하여 만들 수 있습니다.

10
00:00:37,891 --> 00:00:40,957
사용자들이 링크를 클릭하자마자

11
00:00:40,957 --> 00:00:45,109
첫번째로, 변수에 링크를 걸어봅시다.

12
00:00:45,109 --> 00:00:48,078
(타이핑하고 있음)

13
00:00:55,770 --> 00:00:58,099
이제 되돌리기 함수를 정의해봅시다.

14
00:00:58,099 --> 00:01:03,735
참 재밌을 거 같아요.

15
00:01:03,735 --> 00:01:10,165
이 되돌리기 함수에서 우리는 오디오 태그를 다이나믹하게 만들 수 있습니다.

16
00:01:10,165 --> 00:01:12,033
(타이핑하는 중)

17
00:01:15,816 --> 00:01:19,825
그리고 이것은 새로운 웹브라우저에서 사용가능한 멋진 새로운 태그가 될 겁니다.

18
00:01:19,825 --> 00:01:26,104
그리고 나서 오디오 . SRC 는 동일하게... 우리는 이것을 'href' 를 여기 위애

19
00:01:26,104 --> 00:01:32,563
오디오 태그는 이지미 태그와 많이 흡사합니다.

20
00:01:32,563 --> 00:01:37,335
그리고 나서 `audioEl.autoplay = true`,라고 쓰고

21
00:01:37,335 --> 00:01:40,333
이것은 우리가 이걸 이 페이지에 덧붙이자 마자 작동되게 할 겁니다.

22
00:01:40,333 --> 00:01:42,953
마침내, 이 페이지에 붙였습니다.

23
00:01:42,953 --> 00:01:45,574
어디에 이 태그를 붙이느냐는 상관없습니다.

24
00:01:45,574 --> 00:01:48,064
시각화하지 않을 거니까요.

25
00:01:48,064 --> 00:01:52,295
이제 클릭하면 오디오를 생성하고, 소스를 셑한다음,

26
00:01:52,295 --> 00:01:55,387
자동 플레이가 되고, 이 페이지에 붙여질 겁니다.

27
00:01:55,387 --> 00:01:59,444
마지막으로, 링크가 클릭될 때 확실하게

28
00:01:59,444 --> 00:02:01,376
이벤트리스너가 호출되도록 합니다.

29
00:02:01,376 --> 00:02:03,723
(타이핑 하는 중)

30
00:02:08,283 --> 00:02:12,951
그리고 나서, 함수이름은 건너뜁시다.

31
00:02:12,951 --> 00:02:17,385
자, 시험해봅시다.

32
00:02:17,385 --> 00:02:19,729
허밍

33
00:02:19,729 --> 00:02:21,110
어떻게 되었나요?

34
00:02:21,110 --> 00:02:26,337
저한테는 이 소리가 낮고 깊은 오노우의 툴툴거리는 소리로 들립니다.

35
00:02:26,337 --> 00:02:29,789
링크가 여전히 새 윈도우에 오픈되었네요.

36
00:02:29,789 --> 00:02:33,476
이상적으로는 한번 소리가 플레이되면 웹브라우저는 더이상

37
00:02:33,476 --> 00:02:37,548
사용자가 링크되지 않게 하는 게 좋아요. 이미 들었으니까요. 이렇게 하려면

38
00:02:37,548 --> 00:02:42,920
웹브라우저에게 이 이펄트 행위를 취소하라는 명령을 하면 됩니다.

39
00:02:42,920 --> 00:02:47,148
자, 디펄트로 사용자가 링크를 클릭하면

40
00:02:47,148 --> 00:02:50,321
웹브라우저는 사용자가 그 링크로 가게 합니다

41
00:02:50,321 --> 00:02:54,226
만일 자바스크립에서 그 링크로 가는 길을 중단하려면

42
00:02:54,226 --> 00:02:58,004
웹브라우저의 그 작동을 원치 않죠.

43
00:02:58,004 --> 00:03:02,731
이벤트 프라퍼티에 `preventDefault()`.라는 메쏘드를 사용하여

44
00:03:02,731 --> 00:03:05,299
중단시키라고 할 수 있습니다.

45
00:03:05,299 --> 00:03:09,897
우리가 지나온 이벤트 압젝트에다 써야합니다.

46
00:03:09,897 --> 00:03:15,830
여기 안에다가 `e.preventDefault();`라고 씁니다.

47
00:03:15,830 --> 00:03:19,420
이것은 웹브라우저에게 이 디펄트행동(기본행위)를 하지말라고 명령합니다.

48
00:03:19,420 --> 00:03:21,399
이 이벤트과 연관하여.

49
00:03:21,399 --> 00:03:25,995
자 talk-through를 멈추고 다시 시험해봅시다.

50
00:03:25,995 --> 00:03:28,385
지금 막 소리 들으셨죠?

51
00:03:28,385 --> 00:03:30,949
이것은 훨씬 좋은 사용자 경험입니다.

52
00:03:30,949 --> 00:03:34,959
이것을 "progressive enhancement"--점진적 증강, 진보적 확장 이라고 합니다.

53
00:03:34,959 --> 00:03:39,514
웹페이지를 HTML로 디펄트 브라우저 행위로 시작하는

54
00:03:39,514 --> 00:03:44,650
그리고 자바스크립으로 좀 더 풍부한 경험을 하게 확장하는 거죠.

55
00:03:44,650 --> 00:03:48,361
당신은 리스너가 링크되도록 클릭하게 덧붙일 때

56
00:03:48,361 --> 00:03:50,445
종종 이 `preventDefault`를 사용하게 됩니다

57
00:03:50,445 --> 00:03:54,447
form processing 을 할 때도 이것을 사용할 수도 있습니다.

58
00:03:54,447 --> 00:03:57,485
서버에 서브밑하려면,

59
00:03:57,485 --> 00:03:59,264
브라우저가 디펄트 행동을 또 해야하기 떄문에

60
00:03:59,264 --> 00:04:02,640
사용자 경험을 명심하고 웹사이트에서 사용자 경험이 옵션이 아니라면

61
00:04:02,640 --> 00:04:06,730
브라우저가 디펄트 행동을 또 해야하기 떄문에

62
00:04:06,730 --> 00:04:08,953
더 좋게 만드는 방법을 찾아내야 합니다.

63
00:04:08,953 --> 00:04:11,366
여기서 모든 것을 가르쳐줄 수는 없지만

64
00:04:11,366 --> 00:04:15,499
인터넷에는 수천 수만가지 답이 있습니다.