WEBVTT

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.

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ủ:

00:00:09.936 --> 00:00:12.150
"What does Oh Noes say?"

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?

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

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 đó.

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.

00:00:30.009 --> 00:00:33.445
Tôi muốn nghe file đó ngay ở trang này.

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ẻ 

00:00:37.891 --> 00:00:40.957
khi người dùng click vào link.

00:00:40.957 --> 00:00:45.109
Đầu tiên, ta cần gán link đó vào một biến.

00:00:45.109 --> 00:00:48.078
(gõ...)

00:00:55.770 --> 00:00:58.099
Giờ sẽ định nghĩa một hàm callback.

00:00:58.099 --> 00:01:03.735
Cái này sẽ hay đây.
This is going to be

00:01:03.735 --> 00:01:10.165
Trong hàm callback, ta cần tạo một thẻ audio.

00:01:10.165 --> 00:01:12.033
(gõ...)

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ó.

00:01:19.825 --> 00:01:26.104
Và audio.src thì là... ta đặt nó là

00:01:26.104 --> 00:01:32.563
href từ trên này... thẻ audio cũng gần giống thẻ img.

00:01:32.563 --> 00:01:37.335
Rồi ta viết audioEl.autoplay = true,

00:01:37.335 --> 00:01:40.333
tức là sẽ bật audio ngay khi nhận được link.

00:01:40.333 --> 00:01:42.953
Cuối cùng là đưa nó vào trong trang web.

00:01:42.953 --> 00:01:45.574
Đặt ở vị trí nào không quan trọng,

00:01:45.574 --> 00:01:48.064
vì ta đâu có nhìn thấy nó đâu, chỉ nghe thôi.

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,

00:01:52.295 --> 00:01:55.387
đặt autoplay, và đẩy nó lên trang web.

00:01:55.387 --> 00:01:59.444
Cuối cùng, ta viết để gọi hàm event listener

00:01:59.444 --> 00:02:01.376
khi link được click vào.

00:02:01.376 --> 00:02:03.723
(gõ...)

00:02:08.282 --> 00:02:12.951
rồi tuyền tên của hàm vào.

00:02:12.951 --> 00:02:17.385
Bây giờ bạn dừng video lại mà thử xem xem.

00:02:17.385 --> 00:02:19.729
♪ ... ♪

00:02:19.729 --> 00:02:21.110
Có được chưa?

00:02:21.110 --> 00:02:26.337
Như tôi thấy thì có nghe thấy file đó rồi,

00:02:26.337 --> 00:02:29.789
nhưng link đó vẫn hiện ra trên cửa sổ mới.

00:02:29.789 --> 00:02:33.476
Ta muốn làm sao để chỉ bật audio thôi chứ không

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ì.

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).

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

00:02:47.148 --> 00:02:50.321
trình duyệt sẽ dẫn tới link đó.

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

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ế.

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'

00:03:02.731 --> 00:03:05.299
gọi là `preventDefault()`.

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

00:03:09.897 --> 00:03:15.830
trong này ta viết `e.preventDefault();`

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

00:03:19.420 --> 00:03:21.399
của event này nữa.

00:03:21.399 --> 00:03:25.995
Giờ hãy dừng video lại mà thử xem.

00:03:25.995 --> 00:03:28.385
Bạn nghe thấy tiếng rồi chứ?

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.

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),

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,

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.

00:03:44.650 --> 00:03:48.361
Thường bạn sẽ dùng preventDefault() khi 

00:03:48.361 --> 00:03:50.445
viết listener cho event click.

00:03:50.445 --> 00:03:54.447
Cũng có lúc bạn sẽ dùng khi xử lý form,

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

00:03:57.485 --> 00:03:59.264
khi gửi form đến server.

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

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

00:04:06.730 --> 00:04:08.953
hãy tìm cách cải thiện nó lên.

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

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.