1
00:00:00,461 --> 00:00:05,742
Giờ tôi sẽ cho bạn thấy một tính năng nữa của đối tượng event.

2
00:00:05,742 --> 00:00:09,936
Trang web mà tôi đã tạo ra này sẽ trả lời một câu hỏi bất hủ:

3
00:00:09,936 --> 00:00:12,150
"What does Oh Noes say?"

4
00:00:12,150 --> 00:00:16,599
Tức là, anh ta sẽ trả lời thế nào nếu bạn có thể nghe được tiếng anh ta nói?

5
00:00:16,599 --> 00:00:20,589
Nếu bạn click vào link này, bạn sẽ được dẫn tới một file mp3

6
00:00:20,589 --> 00:00:25,163
mà trình duyệt sẽ chạy, nội dung là câu trả lời cho câu hỏi đó.

7
00:00:25,163 --> 00:00:30,009
Nhưng mà tôi không muốn trình duyệt chuyển đến một trang khác.

8
00:00:30,009 --> 00:00:33,445
Tôi muốn nghe file đó ngay ở trang này.

9
00:00:33,445 --> 00:00:37,891
Có thể lập trình được như thế nếu ta dùng JavaScript để chạy thẻ 

10
00:00:37,891 --> 00:00:40,957
khi người dùng click vào link.

11
00:00:40,957 --> 00:00:45,109
Đầu tiên, ta cần gán link đó vào một biến.

12
00:00:45,109 --> 00:00:48,078
(gõ...)

13
00:00:55,770 --> 00:00:58,099
Giờ sẽ định nghĩa một hàm callback.

14
00:00:58,099 --> 00:01:03,735
Cái này sẽ hay đây.
This is going to be

15
00:01:03,735 --> 00:01:10,165
Trong hàm callback, ta cần tạo một thẻ audio.

16
00:01:10,165 --> 00:01:12,033
(gõ...)

17
00:01:15,816 --> 00:01:19,825
Đây là một thẻ mới, các trình duyệt phiên bản gần đây mới có.

18
00:01:19,825 --> 00:01:26,104
Và audio.src thì là... ta đặt nó là

19
00:01:26,104 --> 00:01:32,563
href từ trên này... thẻ audio cũng gần giống thẻ img.

20
00:01:32,563 --> 00:01:37,335
Rồi ta viết audioEl.autoplay = true,

21
00:01:37,335 --> 00:01:40,333
tức là sẽ bật audio ngay khi nhận được link.

22
00:01:40,333 --> 00:01:42,953
Cuối cùng là đưa nó vào trong trang web.

23
00:01:42,953 --> 00:01:45,574
Đặt ở vị trí nào không quan trọng,

24
00:01:45,574 --> 00:01:48,064
vì ta đâu có nhìn thấy nó đâu, chỉ nghe thôi.

25
00:01:48,064 --> 00:01:52,295
Bây giờ khi người dùng click vào, trình duyệt sẽ tạo một , đặt source,

26
00:01:52,295 --> 00:01:55,387
đặt autoplay, và đẩy nó lên trang web.

27
00:01:55,387 --> 00:01:59,444
Cuối cùng, ta viết để gọi hàm event listener

28
00:01:59,444 --> 00:02:01,376
khi link được click vào.

29
00:02:01,376 --> 00:02:03,723
(gõ...)

30
00:02:08,282 --> 00:02:12,951
rồi tuyền tên của hàm vào.

31
00:02:12,951 --> 00:02:17,385
Bây giờ bạn dừng video lại mà thử xem xem.

32
00:02:17,385 --> 00:02:19,729
♪ ... ♪

33
00:02:19,729 --> 00:02:21,110
Có được chưa?

34
00:02:21,110 --> 00:02:26,337
Như tôi thấy thì có nghe thấy file đó rồi,

35
00:02:26,337 --> 00:02:29,789
nhưng link đó vẫn hiện ra trên cửa sổ mới.

36
00:02:29,789 --> 00:02:33,476
Ta muốn làm sao để chỉ bật audio thôi chứ không

37
00:02:33,476 --> 00:02:37,548
dẫn tới link kia, bởi vì đến cũng không để làm gì.

38
00:02:37,548 --> 00:02:42,920
Muốn làm như thế, ta cần bảo trình duyệt đừng thực hiện default behavior (xử lí mặc định).

39
00:02:42,920 --> 00:02:47,148
Mặc định thì khi người dùng click vào một link,

40
00:02:47,148 --> 00:02:50,321
trình duyệt sẽ dẫn tới link đó.

41
00:02:50,321 --> 00:02:54,226
Nhưng khi ta muốn xử lí link đó kiểu khác trong JS,

42
00:02:54,226 --> 00:02:58,004
ta thường không muốn truyển tới một trang web khác như thế.

43
00:02:58,004 --> 00:03:02,731
Ta có thể tránh default behavior như thế bằng cách gọi một hàm của thuộc tính 'event'

44
00:03:02,731 --> 00:03:05,299
gọi là `preventDefault()`.

45
00:03:05,299 --> 00:03:09,897
Ta phải gọi đối tượng event mà ta nhập vào đó,

46
00:03:09,897 --> 00:03:15,830
trong này ta viết `e.preventDefault();`

47
00:03:15,830 --> 00:03:19,420
Như vậy là trình duyệt sẽ không thực hiện những thao tác xử lý mặc định

48
00:03:19,420 --> 00:03:21,399
của event này nữa.

49
00:03:21,399 --> 00:03:25,995
Giờ hãy dừng video lại mà thử xem.

50
00:03:25,995 --> 00:03:28,385
Bạn nghe thấy tiếng rồi chứ?

51
00:03:28,385 --> 00:03:30,949
Như vậy là trải nghiệm người dùng sẽ tốt hơn hẳn.

52
00:03:30,949 --> 00:03:34,959
Cái vừa rồi ta vừa làm gọi là "progressive enchancement" (tăng tiến),

53
00:03:34,959 --> 00:03:39,514
tức là bắt đầu trăng web với HTML với những thao tác xử lý mặc định của trình duyệt,

54
00:03:39,514 --> 00:03:44,650
nhưng rồi tăng trải nhiệm người dùng lên với JS.

55
00:03:44,650 --> 00:03:48,361
Thường bạn sẽ dùng preventDefault() khi 

56
00:03:48,361 --> 00:03:50,445
viết listener cho event click.

57
00:03:50,445 --> 00:03:54,447
Cũng có lúc bạn sẽ dùng khi xử lý form,

58
00:03:54,447 --> 00:03:57,485
bởi vì mặc định thì trình duyệt sẽ tải lại trang web

59
00:03:57,485 --> 00:03:59,264
khi gửi form đến server.

60
00:03:59,264 --> 00:04:02,640
Điều quan trọng ở đây là trải nhiệm người dùng,

61
00:04:02,640 --> 00:04:06,730
nếu trải nhiệm người dùng trên trang web của bạn chưa được tốt

62
00:04:06,730 --> 00:04:08,953
hãy tìm cách cải thiện nó lên.

63
00:04:08,953 --> 00:04:11,366
Trong khoá học này sẽ không nói hết về chủ đề này

64
00:04:11,366 --> 00:00:00,000
mà bạn có thể tìm thêm đủ thứ thông tin khác trên internet được.