WEBVTT

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

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

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

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

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

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

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

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

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

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

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

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

00:00:39.720 --> 00:00:44.720
và dùng document.getElementById 

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

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

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

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

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

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

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

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

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

00:01:19.996 --> 00:01:23.590
đặt là

00:01:23.590 --> 00:01:25.832
Thế là xong nút này rồi!

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

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

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

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

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

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

00:01:48.753 --> 00:01:51.751
hàm kia mỗi khi có click event

00:01:51.751 --> 00:01:54.743
với nút đó.

00:01:54.743 --> 00:01:57.231
Ta có thể gọi hàm

00:01:57.231 --> 00:02:00.783
addEventLisstener của button đó:

00:02:00.783 --> 00:02:05.783
clickerButton.addeventlistener(),

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

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

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

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

00:02:23.131 --> 00: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

00:02:29.041 --> 00:02:29.960
Có được không?

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

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

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

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

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

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

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

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

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

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

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

00:03:09.824 --> 00: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 đó,

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

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

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

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

00:03:22.002 --> 00: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."

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

00:03:30.638 --> 00:03:32.831
sau tên hàm này, vì

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

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

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

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

00:03:42.390 --> 00:03:44.748
chứ không đổi về sau.

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

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

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

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

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

00:04:02.441 --> 00:04:06.156
Hàm vô dánh tức là một hàm không có tên
An anonymous function is one

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

00:04:10.716 --> 00:04:15.231
Tôi viết một dòng addEventListener 

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

00:04:18.003 --> 00:04:20.202
thì sẽ hiểu ngày thôi.

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

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

00:04:25.700 --> 00:04:30.700
viết vào đây thế này.

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

00:04:38.063 --> 00:04:39.785
Gần như là giống hệt.

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

00:04:41.805 --> 00:04:44.396
có code giống hệt nhau.

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

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

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

00:04:54.997 --> 00:04:58.523
ngay chỗ nhập argument vào.

00:04:58.523 --> 00: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

00:05:02.775 --> 00:05:04.493
vì như thế dễ đọc code hơn

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

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

00:05:09.886 --> 00:05:13.235
ở khác chỗ khác với các event khác nữa.

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

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

00:05:17.872 --> 00:05:19.122
thì trình duyệt sẽ gọi cả

00:05:19.122 --> 00:05:21.795


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

00:05:26.090 --> 00:05:29.240
Tôi sẽ xoá hàm vô danh này đi

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

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

00:05:33.491 --> 00:05:35.317
với event listner.

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

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

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

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

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

00:05:46.053 --> 00:05:47.646
Bạn không chỉ có thể thay đổi các element
And you don't just have

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

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

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