[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.79,0:00:05.79,Default,,0000,0000,0000,,Tôi đã tạo một trang này để ta nghịch.
Dialogue: 0,0:00:05.79,0:00:08.53,Default,,0000,0000,0000,,Bây giờ thì trang này còn nhạt nhẽo thật.
Dialogue: 0,0:00:08.53,0:00:11.78,Default,,0000,0000,0000,,Chưa có nội dung gì cả, và nút này
Dialogue: 0,0:00:11.78,0:00:16.09,Default,,0000,0000,0000,,không làm gì cả khi tôi click vào.
Dialogue: 0,0:00:16.09,0:00:18.73,Default,,0000,0000,0000,,Ta sẽ thay đổi nút này đi để
Dialogue: 0,0:00:18.73,0:00:20.72,Default,,0000,0000,0000,,khi người dùng click vào nút, dòng chữ
Dialogue: 0,0:00:20.72,0:00:23.90,Default,,0000,0000,0000,,ở trong nút sẽ thay đổi.
Dialogue: 0,0:00:23.90,0:00:27.56,Default,,0000,0000,0000,,Việc đầu tiên là tìm element mà
Dialogue: 0,0:00:27.56,0:00:30.06,Default,,0000,0000,0000,,sẽ kích hoạt event để ta listen.
Dialogue: 0,0:00:30.06,0:00:32.66,Default,,0000,0000,0000,,Trong ví dụ này thì element đó chính là nút này,
Dialogue: 0,0:00:32.66,0:00:35.15,Default,,0000,0000,0000,,Nút này có id="clicker",
Dialogue: 0,0:00:35.15,0:00:39.72,Default,,0000,0000,0000,,nên ta sẽ tạo một biến tên là clickerButton
Dialogue: 0,0:00:39.72,0:00:44.72,Default,,0000,0000,0000,,và dùng document.getElementById 
Dialogue: 0,0:00:46.09,0:00:49.08,Default,,0000,0000,0000,,để lưu nút kia vào biến này.
Dialogue: 0,0:00:49.08,0:00:53.28,Default,,0000,0000,0000,,Bước tiếp theo là viết một hàm
Dialogue: 0,0:00:53.28,0:00:56.37,Default,,0000,0000,0000,,để trình duyệt còn gọi lên khi event này xảy ra.
Dialogue: 0,0:00:58.04,0:01:03.04,Default,,0000,0000,0000,,Tôi đặt hàm đó là onButtonClick và
Dialogue: 0,0:01:04.46,0:01:07.15,Default,,0000,0000,0000,,tạm thời tôi cứ để hàm đó trống không thế,
Dialogue: 0,0:01:07.15,0:01:08.96,Default,,0000,0000,0000,,đương nhiên ta sẽ phải viết gì đó
Dialogue: 0,0:01:08.96,0:01:11.82,Default,,0000,0000,0000,,trong hàm đó, không thì đúng là vô dụng.
Dialogue: 0,0:01:11.82,0:01:14.68,Default,,0000,0000,0000,,Để thay đổi nút trên button, ta có thể dùng
Dialogue: 0,0:01:14.68,0:01:18.74,Default,,0000,0000,0000,,biết clickerButton và gán giá trị vào textContent của biến đó.
Dialogue: 0,0:01:19.100,0:01:23.59,Default,,0000,0000,0000,,đặt là
Dialogue: 0,0:01:23.59,0:01:25.83,Default,,0000,0000,0000,,Thế là xong nút này rồi!
Dialogue: 0,0:01:27.00,0:01:28.75,Default,,0000,0000,0000,,Giờ thì chưa có gì lắm, nhưng ta
Dialogue: 0,0:01:28.75,0:01:31.30,Default,,0000,0000,0000,,có thể viết đủ thứ phức tạp hơn nữa khi quen rồi.
Dialogue: 0,0:01:33.09,0:01:37.63,Default,,0000,0000,0000,,Cho đến giờ thì code của ta mới chỉ gán giá trị vào các biến,
Dialogue: 0,0:01:37.63,0:01:41.18,Default,,0000,0000,0000,,vẫn chưa có gì lắm xảy ra khi tôi click vào nút.
Dialogue: 0,0:01:42.09,0:01:45.07,Default,,0000,0000,0000,,Bước cuối cùng là ghép 2 cái kia lại,
Dialogue: 0,0:01:45.07,0:01:48.75,Default,,0000,0000,0000,,tức là code cho trình duyệt biết rằng cần phải gọi
Dialogue: 0,0:01:48.75,0:01:51.75,Default,,0000,0000,0000,,hàm kia mỗi khi có click event
Dialogue: 0,0:01:51.75,0:01:54.74,Default,,0000,0000,0000,,với nút đó.
Dialogue: 0,0:01:54.74,0:01:57.23,Default,,0000,0000,0000,,Ta có thể gọi hàm
Dialogue: 0,0:01:57.23,0:02:00.78,Default,,0000,0000,0000,,addEventLisstener của button đó:
Dialogue: 0,0:02:00.78,0:02:05.78,Default,,0000,0000,0000,,clickerButton.addeventlistener(),
Dialogue: 0,0:02:06.24,0:02:10.85,Default,,0000,0000,0000,,Ta sẽ phải nhập 2 argument vào trong hàm này.
Dialogue: 0,0:02:10.86,0:02:14.73,Default,,0000,0000,0000,,Đầu tiên là tên của event, là "click",
Dialogue: 0,0:02:14.73,0:02:18.35,Default,,0000,0000,0000,,tiếp theo là tên hàm mà ta muốn gọi
Dialogue: 0,0:02:18.35,0:02:21.85,Default,,0000,0000,0000,,khi có event "click", tức là onButtonClick.
Dialogue: 0,0:02:23.13,0:02:26.77,Default,,0000,0000,0000,,Giờ bạn hãy dừng video này lại một chút để click thử vào nút đó xem
Dialogue: 0,0:02:29.04,0:02:29.96,Default,,0000,0000,0000,,Có được không?
Dialogue: 0,0:02:29.96,0:02:32.03,Default,,0000,0000,0000,,Tôi mong là được. Với tôi thì có được.
Dialogue: 0,0:02:33.20,0:02:36.29,Default,,0000,0000,0000,,Ta sẽ xem lại một chút qua cách hoạt động của hàm này,
Dialogue: 0,0:02:36.29,0:02:38.26,Default,,0000,0000,0000,,vì nó cũng hơi phức tạp.
Dialogue: 0,0:02:38.26,0:02:41.06,Default,,0000,0000,0000,,ta gọi hàm này là eventLister function,
Dialogue: 0,0:02:41.06,0:02:46.06,Default,,0000,0000,0000,,cũng gọi là callback function, vì đấy là nhiệm vụ của nó.
Dialogue: 0,0:02:46.92,0:02:51.02,Default,,0000,0000,0000,,Ta chỉ gọi hàm đó lên khi có event xảy ra,
Dialogue: 0,0:02:51.02,0:02:55.84,Default,,0000,0000,0000,,còn khi trang web mới được load lên thì chưa gọi.
Dialogue: 0,0:02:55.84,0:02:58.06,Default,,0000,0000,0000,,Còn nếu ta muốn gọi một hàm ngay khi trang web đang load,
Dialogue: 0,0:02:58.06,0:03:01.92,Default,,0000,0000,0000,,thì ta sẽ phải viết thêm một dòng thế này...
Dialogue: 0,0:03:03.45,0:03:06.41,Default,,0000,0000,0000,,Bạn để ý có dấu ngoặc đơn () ở cuối hàm.
Dialogue: 0,0:03:06.41,0:03:09.82,Default,,0000,0000,0000,,Khi trực tiếp gọi một hàm thì phải có dầu ngoặc đơn,
Dialogue: 0,0:03:09.82,0:03:13.64,Default,,0000,0000,0000,,còn khi không có dấu ngoặc thì tức là không trực tiếp gọi hàm đó,
Dialogue: 0,0:03:13.64,0:03:16.24,Default,,0000,0000,0000,,mà chỉ là cái tên của hàm để được gọi sau này thôi,
Dialogue: 0,0:03:16.24,0:03:19.01,Default,,0000,0000,0000,,như là ở trong argument này đây,
Dialogue: 0,0:03:19.01,0:03:20.24,Default,,0000,0000,0000,,như vậy chỉ là báo cho chương trình biết
Dialogue: 0,0:03:20.24,0:03:22.00,Default,,0000,0000,0000,,"Này, đây là tên hàm mà ta sẽ 
Dialogue: 0,0:03:22.00,0:03:25.39,Default,,0000,0000,0000,,cần gọi lên về sau, nhưng bây giờ thì chưa trực tiếp gọi."
Dialogue: 0,0:03:27.67,0:03:30.64,Default,,0000,0000,0000,,Bạn nhớ đừng viết dấu ngoặc đơn vào
Dialogue: 0,0:03:30.64,0:03:32.83,Default,,0000,0000,0000,,sau tên hàm này, vì
Dialogue: 0,0:03:32.83,0:03:34.13,Default,,0000,0000,0000,,như thế tức là bạn sẽ nhập vào 
Dialogue: 0,0:03:34.13,0:03:37.87,Default,,0000,0000,0000,,giá trị được trả về của hàm đó, chứ không phải là chính hàm đó.
Dialogue: 0,0:03:37.87,0:03:39.35,Default,,0000,0000,0000,,Nếu tôi thêm dấu ngoặc vào đây,
Dialogue: 0,0:03:39.35,0:03:42.39,Default,,0000,0000,0000,,tôi sẽ thấy dòng chữ trên nút kia thay đổi ngay khi trang web đang load,
Dialogue: 0,0:03:42.39,0:03:44.75,Default,,0000,0000,0000,,chứ không đổi về sau.
Dialogue: 0,0:03:44.75,0:03:47.19,Default,,0000,0000,0000,,Để chữa thì tôi chỉ cần bỏ dấu ngoặc đơn \NTo fix that, I just remove
Dialogue: 0,0:03:47.19,0:03:50.68,Default,,0000,0000,0000,,kia đi, và giờ hàm này
Dialogue: 0,0:03:50.68,0:03:52.51,Default,,0000,0000,0000,,sẽ chỉ được gọi lên khi click vào nút.
Dialogue: 0,0:03:54.07,0:03:56.31,Default,,0000,0000,0000,,Một cách khác để lập trình cái vừa rồi là
Dialogue: 0,0:03:56.31,0:04:01.31,Default,,0000,0000,0000,,nhập vào một hàm vô danh trong này.
Dialogue: 0,0:04:02.44,0:04:06.16,Default,,0000,0000,0000,,Hàm vô dánh tức là một hàm không có tên\NAn anonymous function is one
Dialogue: 0,0:04:06.16,0:04:09.54,Default,,0000,0000,0000,,để gọi, mà chỉ có một dòng lệnh ở trong thôi.
Dialogue: 0,0:04:10.72,0:04:15.23,Default,,0000,0000,0000,,Tôi viết một dòng addEventListener 
Dialogue: 0,0:04:15.23,0:04:18.00,Default,,0000,0000,0000,,ở dưới cho bạn xem và so sánh
Dialogue: 0,0:04:18.00,0:04:20.20,Default,,0000,0000,0000,,thì sẽ hiểu ngày thôi.
Dialogue: 0,0:04:20.20,0:04:22.80,Default,,0000,0000,0000,,Tôi xoá tên hàm này đi, và 
Dialogue: 0,0:04:22.80,0:04:25.70,Default,,0000,0000,0000,,viết thẳng định nghĩa của hàm vào luôn,
Dialogue: 0,0:04:25.70,0:04:30.70,Default,,0000,0000,0000,,viết vào đây thế này.
Dialogue: 0,0:04:31.95,0:04:36.95,Default,,0000,0000,0000,,2 dòng code này có chức năng giống hệt nhau.
Dialogue: 0,0:04:38.06,0:04:39.78,Default,,0000,0000,0000,,Gần như là giống hệt.
Dialogue: 0,0:04:39.78,0:04:41.80,Default,,0000,0000,0000,,Chúng đều thực hiện một hàm 
Dialogue: 0,0:04:41.80,0:04:44.40,Default,,0000,0000,0000,,có code giống hệt nhau.
Dialogue: 0,0:04:44.40,0:04:45.93,Default,,0000,0000,0000,,Khác một chút là dòng ở trên
Dialogue: 0,0:04:45.93,0:04:50.29,Default,,0000,0000,0000,,nhập vào tên của một hàm mà ta đã định nghĩa ở trên,
Dialogue: 0,0:04:50.29,0:04:54.100,Default,,0000,0000,0000,,còn hàm dưới thì định nghĩa thẳng hàm cần gọi ở trong luôn,
Dialogue: 0,0:04:54.100,0:04:58.52,Default,,0000,0000,0000,,ngay chỗ nhập argument vào.
Dialogue: 0,0:04:58.52,0:05:02.78,Default,,0000,0000,0000,,Cả 2 cách đều được. Hầu hết các lập trình viên thường dùng hàm có tên
Dialogue: 0,0:05:02.78,0:05:04.49,Default,,0000,0000,0000,,vì như thế dễ đọc code hơn
Dialogue: 0,0:05:04.49,0:05:06.99,Default,,0000,0000,0000,,và cũng dễ sửa lỗi hơn,
Dialogue: 0,0:05:06.99,0:05:09.89,Default,,0000,0000,0000,,và cũng có thể gọi tên hàm đó
Dialogue: 0,0:05:09.89,0:05:13.24,Default,,0000,0000,0000,,ở khác chỗ khác với các event khác nữa.
Dialogue: 0,0:05:13.24,0:05:15.76,Default,,0000,0000,0000,,Bạn muốn dùng cách nào cũng được,
Dialogue: 0,0:05:15.76,0:05:17.87,Default,,0000,0000,0000,,chỉ đừng dùng cả 2 cùng lúc, vì như thế
Dialogue: 0,0:05:17.87,0:05:19.12,Default,,0000,0000,0000,,thì trình duyệt sẽ gọi cả
Dialogue: 0,0:05:19.12,0:05:21.80,Default,,0000,0000,0000,,
Dialogue: 0,0:05:21.80,0:05:26.09,Default,,0000,0000,0000,,gọi 2 lần chẳng để làm gì cả.
Dialogue: 0,0:05:26.09,0:05:29.24,Default,,0000,0000,0000,,Tôi sẽ xoá hàm vô danh này đi
Dialogue: 0,0:05:29.24,0:05:31.81,Default,,0000,0000,0000,,bởi vì tôi thích kiểu ở trên hơn.
Dialogue: 0,0:05:31.81,0:05:33.49,Default,,0000,0000,0000,,Giờ bạn có thể làm rất nhiều thứ
Dialogue: 0,0:05:33.49,0:05:35.32,Default,,0000,0000,0000,,với event listner.
Dialogue: 0,0:05:35.32,0:05:38.08,Default,,0000,0000,0000,,Bạn có thể lập trình để dịch chuyển các element trên trang web,
Dialogue: 0,0:05:38.08,0:05:40.06,Default,,0000,0000,0000,,bạn có thể viết listener cho nhiều event khác nhau,
Dialogue: 0,0:05:40.06,0:05:41.47,Default,,0000,0000,0000,,ta sẽ học về cái đó trong bài tới,
Dialogue: 0,0:05:41.47,0:05:43.34,Default,,0000,0000,0000,,và bạn cũng có thể làm việc với DOM 
Dialogue: 0,0:05:43.34,0:05:46.05,Default,,0000,0000,0000,,như ta đã học trong các bài trước.
Dialogue: 0,0:05:46.05,0:05:47.65,Default,,0000,0000,0000,,Bạn không chỉ có thể thay đổi các element\NAnd you don't just have
Dialogue: 0,0:05:47.65,0:05:49.78,Default,,0000,0000,0000,,mà người dùng động đến, 
Dialogue: 0,0:05:49.78,0:05:52.59,Default,,0000,0000,0000,,mà còn thay đổi element nào trên trang web cũng được.
Dialogue: 0,0:05:52.59,0:00:00.00,Default,,0000,0000,0000,,Bạn cứ thử xem còn có thể làm được những gì.