[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,,Giờ tôi sẽ cho bạn thấy một tính năng nữa của đối tượng event.
Dialogue: 0,0:00:05.74,0:00:09.94,Default,,0000,0000,0000,,Trang web mà tôi đã tạo ra này sẽ trả lời một câu hỏi bất hủ:
Dialogue: 0,0:00:09.94,0:00:12.15,Default,,0000,0000,0000,,"What does Oh Noes say?"
Dialogue: 0,0:00:12.15,0:00:16.60,Default,,0000,0000,0000,,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?
Dialogue: 0,0:00:16.60,0:00:20.59,Default,,0000,0000,0000,,Nếu bạn click vào link này, bạn sẽ được dẫn tới một file mp3
Dialogue: 0,0:00:20.59,0:00:25.16,Default,,0000,0000,0000,,mà trình duyệt sẽ chạy, nội dung là câu trả lời cho câu hỏi đó.
Dialogue: 0,0:00:25.16,0:00:30.01,Default,,0000,0000,0000,,Nhưng mà tôi không muốn trình duyệt chuyển đến một trang khác.
Dialogue: 0,0:00:30.01,0:00:33.44,Default,,0000,0000,0000,,Tôi muốn nghe file đó ngay ở trang này.
Dialogue: 0,0:00:33.44,0:00:37.89,Default,,0000,0000,0000,,Có thể lập trình được như thế nếu ta dùng JavaScript để chạy thẻ 
Dialogue: 0,0:00:37.89,0:00:40.96,Default,,0000,0000,0000,,khi người dùng click vào link.
Dialogue: 0,0:00:40.96,0:00:45.11,Default,,0000,0000,0000,,Đầu tiên, ta cần gán link đó vào một biến.
Dialogue: 0,0:00:45.11,0:00:48.08,Default,,0000,0000,0000,,(gõ...)
Dialogue: 0,0:00:55.77,0:00:58.10,Default,,0000,0000,0000,,Giờ sẽ định nghĩa một hàm callback.
Dialogue: 0,0:00:58.10,0:01:03.74,Default,,0000,0000,0000,,Cái này sẽ hay đây.\NThis is going to be
Dialogue: 0,0:01:03.74,0:01:10.16,Default,,0000,0000,0000,,Trong hàm callback, ta cần tạo một thẻ audio.
Dialogue: 0,0:01:10.16,0:01:12.03,Default,,0000,0000,0000,,(gõ...)
Dialogue: 0,0:01:15.82,0:01:19.82,Default,,0000,0000,0000,,Đây là một thẻ mới, các trình duyệt phiên bản gần đây mới có.
Dialogue: 0,0:01:19.82,0:01:26.10,Default,,0000,0000,0000,,Và audio.src thì là... ta đặt nó là
Dialogue: 0,0:01:26.10,0:01:32.56,Default,,0000,0000,0000,,href từ trên này... thẻ audio cũng gần giống thẻ img.
Dialogue: 0,0:01:32.56,0:01:37.34,Default,,0000,0000,0000,,Rồi ta viết audioEl.autoplay = true,
Dialogue: 0,0:01:37.34,0:01:40.33,Default,,0000,0000,0000,,tức là sẽ bật audio ngay khi nhận được link.
Dialogue: 0,0:01:40.33,0:01:42.95,Default,,0000,0000,0000,,Cuối cùng là đưa nó vào trong trang web.
Dialogue: 0,0:01:42.95,0:01:45.57,Default,,0000,0000,0000,,Đặt ở vị trí nào không quan trọng,
Dialogue: 0,0:01:45.57,0:01:48.06,Default,,0000,0000,0000,,vì ta đâu có nhìn thấy nó đâu, chỉ nghe thôi.
Dialogue: 0,0:01:48.06,0:01:52.30,Default,,0000,0000,0000,,Bây giờ khi người dùng click vào, trình duyệt sẽ tạo một , đặt source,
Dialogue: 0,0:01:52.30,0:01:55.39,Default,,0000,0000,0000,,đặt autoplay, và đẩy nó lên trang web.
Dialogue: 0,0:01:55.39,0:01:59.44,Default,,0000,0000,0000,,Cuối cùng, ta viết để gọi hàm event listener
Dialogue: 0,0:01:59.44,0:02:01.38,Default,,0000,0000,0000,,khi link được click vào.
Dialogue: 0,0:02:01.38,0:02:03.72,Default,,0000,0000,0000,,(gõ...)
Dialogue: 0,0:02:08.28,0:02:12.95,Default,,0000,0000,0000,,rồi tuyền tên của hàm vào.
Dialogue: 0,0:02:12.95,0:02:17.38,Default,,0000,0000,0000,,Bây giờ bạn dừng video lại mà thử xem xem.
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,,Có được chưa?
Dialogue: 0,0:02:21.11,0:02:26.34,Default,,0000,0000,0000,,Như tôi thấy thì có nghe thấy file đó rồi,
Dialogue: 0,0:02:26.34,0:02:29.79,Default,,0000,0000,0000,,nhưng link đó vẫn hiện ra trên cửa sổ mới.
Dialogue: 0,0:02:29.79,0:02:33.48,Default,,0000,0000,0000,,Ta muốn làm sao để chỉ bật audio thôi chứ không
Dialogue: 0,0:02:33.48,0:02:37.55,Default,,0000,0000,0000,,dẫn tới link kia, bởi vì đến cũng không để làm gì.
Dialogue: 0,0:02:37.55,0:02:42.92,Default,,0000,0000,0000,,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).
Dialogue: 0,0:02:42.92,0:02:47.15,Default,,0000,0000,0000,,Mặc định thì khi người dùng click vào một link,
Dialogue: 0,0:02:47.15,0:02:50.32,Default,,0000,0000,0000,,trình duyệt sẽ dẫn tới link đó.
Dialogue: 0,0:02:50.32,0:02:54.23,Default,,0000,0000,0000,,Nhưng khi ta muốn xử lí link đó kiểu khác trong JS,
Dialogue: 0,0:02:54.23,0:02:58.00,Default,,0000,0000,0000,,ta thường không muốn truyển tới một trang web khác như thế.
Dialogue: 0,0:02:58.00,0:03:02.73,Default,,0000,0000,0000,,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'
Dialogue: 0,0:03:02.73,0:03:05.30,Default,,0000,0000,0000,,gọi là `preventDefault()`.
Dialogue: 0,0:03:05.30,0:03:09.90,Default,,0000,0000,0000,,Ta phải gọi đối tượng event mà ta nhập vào đó,
Dialogue: 0,0:03:09.90,0:03:15.83,Default,,0000,0000,0000,,trong này ta viết `e.preventDefault();`
Dialogue: 0,0:03:15.83,0:03:19.42,Default,,0000,0000,0000,,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
Dialogue: 0,0:03:19.42,0:03:21.40,Default,,0000,0000,0000,,của event này nữa.
Dialogue: 0,0:03:21.40,0:03:25.100,Default,,0000,0000,0000,,Giờ hãy dừng video lại mà thử xem.
Dialogue: 0,0:03:25.100,0:03:28.38,Default,,0000,0000,0000,,Bạn nghe thấy tiếng rồi chứ?
Dialogue: 0,0:03:28.38,0:03:30.95,Default,,0000,0000,0000,,Như vậy là trải nghiệm người dùng sẽ tốt hơn hẳn.
Dialogue: 0,0:03:30.95,0:03:34.96,Default,,0000,0000,0000,,Cái vừa rồi ta vừa làm gọi là "progressive enchancement" (tăng tiến),
Dialogue: 0,0:03:34.96,0:03:39.51,Default,,0000,0000,0000,,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,
Dialogue: 0,0:03:39.51,0:03:44.65,Default,,0000,0000,0000,,nhưng rồi tăng trải nhiệm người dùng lên với JS.
Dialogue: 0,0:03:44.65,0:03:48.36,Default,,0000,0000,0000,,Thường bạn sẽ dùng preventDefault() khi 
Dialogue: 0,0:03:48.36,0:03:50.44,Default,,0000,0000,0000,,viết listener cho event click.
Dialogue: 0,0:03:50.44,0:03:54.45,Default,,0000,0000,0000,,Cũng có lúc bạn sẽ dùng khi xử lý form,
Dialogue: 0,0:03:54.45,0:03:57.48,Default,,0000,0000,0000,,bởi vì mặc định thì trình duyệt sẽ tải lại trang web
Dialogue: 0,0:03:57.48,0:03:59.26,Default,,0000,0000,0000,,khi gửi form đến server.
Dialogue: 0,0:03:59.26,0:04:02.64,Default,,0000,0000,0000,,Điều quan trọng ở đây là trải nhiệm người dùng,
Dialogue: 0,0:04:02.64,0:04:06.73,Default,,0000,0000,0000,,nếu trải nhiệm người dùng trên trang web của bạn chưa được tốt
Dialogue: 0,0:04:06.73,0:04:08.95,Default,,0000,0000,0000,,hãy tìm cách cải thiện nó lên.
Dialogue: 0,0:04:08.95,0:04:11.37,Default,,0000,0000,0000,,Trong khoá học này sẽ không nói hết về chủ đề này
Dialogue: 0,0:04:11.37,0:00:00.00,Default,,0000,0000,0000,,mà bạn có thể tìm thêm đủ thứ thông tin khác trên internet được.