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

2
00:00:05,789 --> 00:00:08,532
Bây giờ thì trang này còn nhạt nhẽo thật.

3
00:00:08,532 --> 00:00:11,782
Chưa có nội dung gì cả, và nút này

4
00:00:11,782 --> 00:00:16,090
không làm gì cả khi tôi click vào.

5
00:00:16,090 --> 00:00:18,732
Ta sẽ thay đổi nút này đi để

6
00:00:18,732 --> 00:00:20,716
khi người dùng click vào nút, dòng chữ

7
00:00:20,716 --> 00:00:23,897
ở trong nút sẽ thay đổi.

8
00:00:23,897 --> 00:00:27,565
Việc đầu tiên là tìm element mà

9
00:00:27,565 --> 00:00:30,056
sẽ kích hoạt event để ta listen.

10
00:00:30,056 --> 00:00:32,656
Trong ví dụ này thì element đó chính là nút này,

11
00:00:32,656 --> 00:00:35,146
Nút này có id="clicker",

12
00:00:35,146 --> 00:00:39,720
nên ta sẽ tạo một biến tên là clickerButton

13
00:00:39,720 --> 00:00:44,720
và dùng document.getElementById 

14
00:00:46,090 --> 00:00:49,081
để lưu nút kia vào biến này.

15
00:00:49,081 --> 00:00:53,283
Bước tiếp theo là viết một hàm

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

17
00:00:58,045 --> 00:01:03,045
Tôi đặt hàm đó là onButtonClick và

18
00:01:04,459 --> 00:01:07,153
tạm thời tôi cứ để hàm đó trống không thế,

19
00:01:07,153 --> 00:01:08,962
đương nhiên ta sẽ phải viết gì đó

20
00:01:08,962 --> 00:01:11,823
trong hàm đó, không thì đúng là vô dụng.

21
00:01:11,823 --> 00:01:14,679
Để thay đổi nút trên button, ta có thể dùng

22
00:01:14,679 --> 00:01:18,738
biết clickerButton và gán giá trị vào textContent của biến đó.

23
00:01:19,996 --> 00:01:23,590
đặt là

24
00:01:23,590 --> 00:01:25,832
Thế là xong nút này rồi!

25
00:01:27,001 --> 00:01:28,750
Giờ thì chưa có gì lắm, nhưng ta

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

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

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

29
00:01:42,089 --> 00:01:45,067
Bước cuối cùng là ghép 2 cái kia lại,

30
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

31
00:01:48,753 --> 00:01:51,751
hàm kia mỗi khi có click event

32
00:01:51,751 --> 00:01:54,743
với nút đó.

33
00:01:54,743 --> 00:01:57,231
Ta có thể gọi hàm

34
00:01:57,231 --> 00:02:00,783
addEventLisstener của button đó:

35
00:02:00,783 --> 00:02:05,783
clickerButton.addeventlistener(),

36
00:02:06,240 --> 00:02:10,854
Ta sẽ phải nhập 2 argument vào trong hàm này.

37
00:02:10,863 --> 00:02:14,733
Đầu tiên là tên của event, là "click",

38
00:02:14,733 --> 00:02:18,348
tiếp theo là tên hàm mà ta muốn gọi

39
00:02:18,348 --> 00:02:21,854
khi có event "click", tức là onButtonClick.

40
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

41
00:02:29,041 --> 00:02:29,960
Có được không?

42
00:02:29,960 --> 00:02:32,033
Tôi mong là được. Với tôi thì có được.

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

44
00:02:36,292 --> 00:02:38,255
vì nó cũng hơi phức tạp.

45
00:02:38,255 --> 00:02:41,056
ta gọi hàm này là eventLister function,

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

47
00:02:46,919 --> 00:02:51,024
Ta chỉ gọi hàm đó lên khi có event xảy ra,

48
00:02:51,024 --> 00:02:55,835
còn khi trang web mới được load lên thì chưa gọi.

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

50
00:02:58,055 --> 00:03:01,919
thì ta sẽ phải viết thêm một dòng thế này...

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

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

53
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 đó,

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

55
00:03:16,238 --> 00:03:19,007
như là ở trong argument này đây,

56
00:03:19,007 --> 00:03:20,238
như vậy chỉ là báo cho chương trình biết

57
00:03:20,238 --> 00:03:22,002
"Này, đây là tên hàm mà ta sẽ 

58
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."

59
00:03:27,668 --> 00:03:30,638
Bạn nhớ đừng viết dấu ngoặc đơn vào

60
00:03:30,638 --> 00:03:32,831
sau tên hàm này, vì

61
00:03:32,831 --> 00:03:34,131
như thế tức là bạn sẽ nhập vào 

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

63
00:03:37,868 --> 00:03:39,353
Nếu tôi thêm dấu ngoặc vào đây,

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

65
00:03:42,390 --> 00:03:44,748
chứ không đổi về sau.

66
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

67
00:03:47,186 --> 00:03:50,680
kia đi, và giờ hàm này

68
00:03:50,680 --> 00:03:52,509
sẽ chỉ được gọi lên khi click vào nút.

69
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à

70
00:03:56,311 --> 00:04:01,311
nhập vào một hàm vô danh trong này.

71
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

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

73
00:04:10,716 --> 00:04:15,231
Tôi viết một dòng addEventListener 

74
00:04:15,231 --> 00:04:18,003
ở dưới cho bạn xem và so sánh

75
00:04:18,003 --> 00:04:20,202
thì sẽ hiểu ngày thôi.

76
00:04:20,202 --> 00:04:22,798
Tôi xoá tên hàm này đi, và 

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

78
00:04:25,700 --> 00:04:30,700
viết vào đây thế này.

79
00:04:31,946 --> 00:04:36,946
2 dòng code này có chức năng giống hệt nhau.

80
00:04:38,063 --> 00:04:39,785
Gần như là giống hệt.

81
00:04:39,785 --> 00:04:41,805
Chúng đều thực hiện một hàm 

82
00:04:41,805 --> 00:04:44,396
có code giống hệt nhau.

83
00:04:44,396 --> 00:04:45,930
Khác một chút là dòng ở trên

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

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

86
00:04:54,997 --> 00:04:58,523
ngay chỗ nhập argument vào.

87
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

88
00:05:02,775 --> 00:05:04,493
vì như thế dễ đọc code hơn

89
00:05:04,493 --> 00:05:06,989
và cũng dễ sửa lỗi hơn,

90
00:05:06,989 --> 00:05:09,886
và cũng có thể gọi tên hàm đó

91
00:05:09,886 --> 00:05:13,235
ở khác chỗ khác với các event khác nữa.

92
00:05:13,235 --> 00:05:15,755
Bạn muốn dùng cách nào cũng được,

93
00:05:15,755 --> 00:05:17,872
chỉ đừng dùng cả 2 cùng lúc, vì như thế

94
00:05:17,872 --> 00:05:19,122
thì trình duyệt sẽ gọi cả

95
00:05:19,122 --> 00:05:21,795


96
00:05:21,795 --> 00:05:26,090
gọi 2 lần chẳng để làm gì cả.

97
00:05:26,090 --> 00:05:29,240
Tôi sẽ xoá hàm vô danh này đi

98
00:05:29,240 --> 00:05:31,808
bởi vì tôi thích kiểu ở trên hơn.

99
00:05:31,808 --> 00:05:33,491
Giờ bạn có thể làm rất nhiều thứ

100
00:05:33,491 --> 00:05:35,317
với event listner.

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

102
00:05:38,077 --> 00:05:40,065
bạn có thể viết listener cho nhiều event khác nhau,

103
00:05:40,065 --> 00:05:41,473
ta sẽ học về cái đó trong bài tới,

104
00:05:41,473 --> 00:05:43,336
và bạn cũng có thể làm việc với DOM 

105
00:05:43,336 --> 00:05:46,053
như ta đã học trong các bài trước.

106
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

107
00:05:47,646 --> 00:05:49,782
mà người dùng động đến, 

108
00:05:49,782 --> 00:05:52,592
mà còn thay đổi element nào trên trang web cũng được.

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