Tôi đã tạo một trang này để ta nghịch.
Bây giờ thì trang này còn nhạt nhẽo thật.
Chưa có nội dung gì cả, và nút này
không làm gì cả khi tôi click vào.
Ta sẽ thay đổi nút này đi để
khi người dùng click vào nút, dòng chữ
ở trong nút sẽ thay đổi.
Việc đầu tiên là tìm element mà
sẽ kích hoạt event để ta listen.
Trong ví dụ này thì element đó chính là nút này,
Nút này có id="clicker",
nên ta sẽ tạo một biến tên là clickerButton
và dùng document.getElementById
để lưu nút kia vào biến này.
Bước tiếp theo là viết một hàm
để trình duyệt còn gọi lên khi event này xảy ra.
Tôi đặt hàm đó là onButtonClick và
tạm thời tôi cứ để hàm đó trống không thế,
đương nhiên ta sẽ phải viết gì đó
trong hàm đó, không thì đúng là vô dụng.
Để thay đổi nút trên button, ta có thể dùng
biết clickerButton và gán giá trị vào textContent của biến đó.
đặt là
Thế là xong nút này rồi!
Giờ thì chưa có gì lắm, nhưng ta
có thể viết đủ thứ phức tạp hơn nữa khi quen rồi.
Cho đến giờ thì code của ta mới chỉ gán giá trị vào các biến,
vẫn chưa có gì lắm xảy ra khi tôi click vào nút.
Bước cuối cùng là ghép 2 cái kia lại,
tức là code cho trình duyệt biết rằng cần phải gọi
hàm kia mỗi khi có click event
với nút đó.
Ta có thể gọi hàm
addEventLisstener của button đó:
clickerButton.addeventlistener(),
Ta sẽ phải nhập 2 argument vào trong hàm này.
Đầu tiên là tên của event, là "click",
tiếp theo là tên hàm mà ta muốn gọi
khi có event "click", tức là onButtonClick.
Giờ bạn hãy dừng video này lại một chút để click thử vào nút đó xem
Có được không?
Tôi mong là được. Với tôi thì có được.
Ta sẽ xem lại một chút qua cách hoạt động của hàm này,
vì nó cũng hơi phức tạp.
ta gọi hàm này là eventLister function,
cũng gọi là callback function, vì đấy là nhiệm vụ của nó.
Ta chỉ gọi hàm đó lên khi có event xảy ra,
còn khi trang web mới được load lên thì chưa gọi.
Còn nếu ta muốn gọi một hàm ngay khi trang web đang load,
thì ta sẽ phải viết thêm một dòng thế này...
Bạn để ý có dấu ngoặc đơn () ở cuối hàm.
Khi trực tiếp gọi một hàm thì phải có dầu ngoặc đơn,
còn khi không có dấu ngoặc thì tức là không trực tiếp gọi hàm đó,
mà chỉ là cái tên của hàm để được gọi sau này thôi,
như là ở trong argument này đây,
như vậy chỉ là báo cho chương trình biết
"Này, đây là tên hàm mà ta sẽ
cần gọi lên về sau, nhưng bây giờ thì chưa trực tiếp gọi."
Bạn nhớ đừng viết dấu ngoặc đơn vào
sau tên hàm này, vì
như thế tức là bạn sẽ nhập vào
giá trị được trả về của hàm đó, chứ không phải là chính hàm đó.
Nếu tôi thêm dấu ngoặc vào đây,
tôi sẽ thấy dòng chữ trên nút kia thay đổi ngay khi trang web đang load,
chứ không đổi về sau.
Để chữa thì tôi chỉ cần bỏ dấu ngoặc đơn
To fix that, I just remove
kia đi, và giờ hàm này
sẽ chỉ được gọi lên khi click vào nút.
Một cách khác để lập trình cái vừa rồi là
nhập vào một hàm vô danh trong này.
Hàm vô dánh tức là một hàm không có tên
An anonymous function is one
để gọi, mà chỉ có một dòng lệnh ở trong thôi.
Tôi viết một dòng addEventListener
ở dưới cho bạn xem và so sánh
thì sẽ hiểu ngày thôi.
Tôi xoá tên hàm này đi, và
viết thẳng định nghĩa của hàm vào luôn,
viết vào đây thế này.
2 dòng code này có chức năng giống hệt nhau.
Gần như là giống hệt.
Chúng đều thực hiện một hàm
có code giống hệt nhau.
Khác một chút là dòng ở trên
nhập vào tên của một hàm mà ta đã định nghĩa ở trên,
còn hàm dưới thì định nghĩa thẳng hàm cần gọi ở trong luôn,
ngay chỗ nhập argument vào.
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
vì như thế dễ đọc code hơn
và cũng dễ sửa lỗi hơn,
và cũng có thể gọi tên hàm đó
ở khác chỗ khác với các event khác nữa.
Bạn muốn dùng cách nào cũng được,
chỉ đừng dùng cả 2 cùng lúc, vì như thế
thì trình duyệt sẽ gọi cả
gọi 2 lần chẳng để làm gì cả.
Tôi sẽ xoá hàm vô danh này đi
bởi vì tôi thích kiểu ở trên hơn.
Giờ bạn có thể làm rất nhiều thứ
với event listner.
Bạn có thể lập trình để dịch chuyển các element trên trang web,
bạn có thể viết listener cho nhiều event khác nhau,
ta sẽ học về cái đó trong bài tới,
và bạn cũng có thể làm việc với DOM
như ta đã học trong các bài trước.
Bạn không chỉ có thể thay đổi các element
And you don't just have
mà người dùng động đến,
mà còn thay đổi element nào trên trang web cũng được.
Bạn cứ thử xem còn có thể làm được những gì.