0:00:00.788,0:00:05.788
Tôi đã tạo một trang này để ta nghịch.

0:00:05.789,0:00:08.532
Bây giờ thì trang này còn nhạt nhẽo thật.

0:00:08.532,0:00:11.782
Chưa có nội dung gì cả, và nút này

0:00:11.782,0:00:16.090
không làm gì cả khi tôi click vào.

0:00:16.090,0:00:18.732
Ta sẽ thay đổi nút này đi để

0:00:18.732,0:00:20.716
khi người dùng click vào nút, dòng chữ

0:00:20.716,0:00:23.897
ở trong nút sẽ thay đổi.

0:00:23.897,0:00:27.565
Việc đầu tiên là tìm element mà

0:00:27.565,0:00:30.056
sẽ kích hoạt event để ta listen.

0:00:30.056,0:00:32.656
Trong ví dụ này thì element đó chính là nút này,

0:00:32.656,0:00:35.146
Nút này có id="clicker",

0:00:35.146,0:00:39.720
nên ta sẽ tạo một biến tên là clickerButton

0:00:39.720,0:00:44.720
và dùng document.getElementById

0:00:46.090,0:00:49.081
để lưu nút kia vào biến này.

0:00:49.081,0:00:53.283
Bước tiếp theo là viết một hàm

0:00:53.283,0:00:56.370
để trình duyệt còn gọi lên khi event này xảy ra.

0:00:58.045,0:01:03.045
Tôi đặt hàm đó là onButtonClick và

0:01:04.459,0:01:07.153
tạm thời tôi cứ để hàm đó trống không thế,

0:01:07.153,0:01:08.962
đương nhiên ta sẽ phải viết gì đó

0:01:08.962,0:01:11.823
trong hàm đó, không thì đúng là vô dụng.

0:01:11.823,0:01:14.679
Để thay đổi nút trên button, ta có thể dùng

0:01:14.679,0:01:18.738
biết clickerButton và gán giá trị vào textContent của biến đó.

0:01:19.996,0:01:23.590
đặt là

0:01:23.590,0:01:25.832
Thế là xong nút này rồi!

0:01:27.001,0:01:28.750
Giờ thì chưa có gì lắm, nhưng ta

0:01:28.750,0:01:31.304
có thể viết đủ thứ phức tạp hơn nữa khi quen rồi.

0:01:33.092,0:01:37.631
Cho đến giờ thì code của ta mới chỉ gán giá trị vào các biến,

0:01:37.631,0:01:41.178
vẫn chưa có gì lắm xảy ra khi tôi click vào nút.

0:01:42.089,0:01:45.067
Bước cuối cùng là ghép 2 cái kia lại,

0:01:45.067,0:01:48.753
tức là code cho trình duyệt biết rằng cần phải gọi

0:01:48.753,0:01:51.751
hàm kia mỗi khi có click event

0:01:51.751,0:01:54.743
với nút đó.

0:01:54.743,0:01:57.231
Ta có thể gọi hàm

0:01:57.231,0:02:00.783
addEventLisstener của button đó:

0:02:00.783,0:02:05.783
clickerButton.addeventlistener(),

0:02:06.240,0:02:10.854
Ta sẽ phải nhập 2 argument vào trong hàm này.

0:02:10.863,0:02:14.733
Đầu tiên là tên của event, là "click",

0:02:14.733,0:02:18.348
tiếp theo là tên hàm mà ta muốn gọi

0:02:18.348,0:02:21.854
khi có event "click", tức là onButtonClick.

0:02:23.131,0:02:26.770
Giờ bạn hãy dừng video này lại một chút để click thử vào nút đó xem

0:02:29.041,0:02:29.960
Có được không?

0:02:29.960,0:02:32.033
Tôi mong là được. Với tôi thì có được.

0:02:33.197,0:02:36.292
Ta sẽ xem lại một chút qua cách hoạt động của hàm này,

0:02:36.292,0:02:38.255
vì nó cũng hơi phức tạp.

0:02:38.255,0:02:41.056
ta gọi hàm này là eventLister function,

0:02:41.056,0:02:46.056
cũng gọi là callback function, vì đấy là nhiệm vụ của nó.

0:02:46.919,0:02:51.024
Ta chỉ gọi hàm đó lên khi có event xảy ra,

0:02:51.024,0:02:55.835
còn khi trang web mới được load lên thì chưa gọi.

0:02:55.835,0:02:58.055
Còn nếu ta muốn gọi một hàm ngay khi trang web đang load,

0:02:58.055,0:03:01.919
thì ta sẽ phải viết thêm một dòng thế này...

0:03:03.450,0:03:06.411
Bạn để ý có dấu ngoặc đơn () ở cuối hàm.

0:03:06.411,0:03:09.824
Khi trực tiếp gọi một hàm thì phải có dầu ngoặc đơn,

0:03:09.824,0:03:13.638
còn khi không có dấu ngoặc thì tức là không trực tiếp gọi hàm đó,

0:03:13.638,0:03:16.238
mà chỉ là cái tên của hàm để được gọi sau này thôi,

0:03:16.238,0:03:19.007
như là ở trong argument này đây,

0:03:19.007,0:03:20.238
như vậy chỉ là báo cho chương trình biết

0:03:20.238,0:03:22.002
"Này, đây là tên hàm mà ta sẽ

0:03:22.002,0:03:25.392
cần gọi lên về sau, nhưng bây giờ thì chưa trực tiếp gọi."

0:03:27.668,0:03:30.638
Bạn nhớ đừng viết dấu ngoặc đơn vào

0:03:30.638,0:03:32.831
sau tên hàm này, vì

0:03:32.831,0:03:34.131
như thế tức là bạn sẽ nhập vào

0:03:34.131,0:03:37.868
giá trị được trả về của hàm đó, chứ không phải là chính hàm đó.

0:03:37.868,0:03:39.353
Nếu tôi thêm dấu ngoặc vào đây,

0:03:39.353,0:03:42.390
tôi sẽ thấy dòng chữ trên nút kia thay đổi ngay khi trang web đang load,

0:03:42.390,0:03:44.748
chứ không đổi về sau.

0:03:44.748,0:03:47.186
Để chữa thì tôi chỉ cần bỏ dấu ngoặc đơn [br]To fix that, I just remove

0:03:47.186,0:03:50.680
kia đi, và giờ hàm này

0:03:50.680,0:03:52.509
sẽ chỉ được gọi lên khi click vào nút.

0:03:54.070,0:03:56.311
Một cách khác để lập trình cái vừa rồi là

0:03:56.311,0:04:01.311
nhập vào một hàm vô danh trong này.

0:04:02.441,0:04:06.156
Hàm vô dánh tức là một hàm không có tên[br]An anonymous function is one

0:04:06.156,0:04:09.537
để gọi, mà chỉ có một dòng lệnh ở trong thôi.

0:04:10.716,0:04:15.231
Tôi viết một dòng addEventListener

0:04:15.231,0:04:18.003
ở dưới cho bạn xem và so sánh

0:04:18.003,0:04:20.202
thì sẽ hiểu ngày thôi.

0:04:20.202,0:04:22.798
Tôi xoá tên hàm này đi, và

0:04:22.798,0:04:25.700
viết thẳng định nghĩa của hàm vào luôn,

0:04:25.700,0:04:30.700
viết vào đây thế này.

0:04:31.946,0:04:36.946
2 dòng code này có chức năng giống hệt nhau.

0:04:38.063,0:04:39.785
Gần như là giống hệt.

0:04:39.785,0:04:41.805
Chúng đều thực hiện một hàm

0:04:41.805,0:04:44.396
có code giống hệt nhau.

0:04:44.396,0:04:45.930
Khác một chút là dòng ở trên

0:04:45.930,0:04:50.291
nhập vào tên của một hàm mà ta đã định nghĩa ở trên,

0:04:50.291,0:04:54.997
còn hàm dưới thì định nghĩa thẳng hàm cần gọi ở trong luôn,

0:04:54.997,0:04:58.523
ngay chỗ nhập argument vào.

0:04:58.523,0:05:02.775
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

0:05:02.775,0:05:04.493
vì như thế dễ đọc code hơn

0:05:04.493,0:05:06.989
và cũng dễ sửa lỗi hơn,

0:05:06.989,0:05:09.886
và cũng có thể gọi tên hàm đó

0:05:09.886,0:05:13.235
ở khác chỗ khác với các event khác nữa.

0:05:13.235,0:05:15.755
Bạn muốn dùng cách nào cũng được,

0:05:15.755,0:05:17.872
chỉ đừng dùng cả 2 cùng lúc, vì như thế

0:05:17.872,0:05:19.122
thì trình duyệt sẽ gọi cả

0:05:19.122,0:05:21.795


0:05:21.795,0:05:26.090
gọi 2 lần chẳng để làm gì cả.

0:05:26.090,0:05:29.240
Tôi sẽ xoá hàm vô danh này đi

0:05:29.240,0:05:31.808
bởi vì tôi thích kiểu ở trên hơn.

0:05:31.808,0:05:33.491
Giờ bạn có thể làm rất nhiều thứ

0:05:33.491,0:05:35.317
với event listner.

0:05:35.317,0:05:38.077
Bạn có thể lập trình để dịch chuyển các element trên trang web,

0:05:38.077,0:05:40.065
bạn có thể viết listener cho nhiều event khác nhau,

0:05:40.065,0:05:41.473
ta sẽ học về cái đó trong bài tới,

0:05:41.473,0:05:43.336
và bạn cũng có thể làm việc với DOM

0:05:43.336,0:05:46.053
như ta đã học trong các bài trước.

0:05:46.053,0:05:47.646
Bạn không chỉ có thể thay đổi các element[br]And you don't just have

0:05:47.646,0:05:49.782
mà người dùng động đến,

0:05:49.782,0:05:52.592
mà còn thay đổi element nào trên trang web cũng được.

0:05:52.592,0:00:00.000
Bạn cứ thử xem còn có thể làm được những gì.