Bạn có nhớ tại sao tôi lại
biến trang này thành cá sấu không?
Vì tôi rất rất sợ cá sấu.
Giờ tôi nghĩ là mình đã sẵn sàng để đối mặt với nỗi sợ của mình hơn nữa,
để còn đưa nhiều cá sấu lên trang này hơn nữa.
Làm sao làm thế được?
Tôi nghĩ là sẽ rất hay
nếu tôi có thể bao phủ cả trang web này
với ảnh cá sấu khi tôi click chuột.
Ta sẽ lập trình cái đó.
Tôi đã viết trước một đoạn
pseudocode trong thẻ script này đây.
Nếu bạn không biết pseudocode là gì,
thì nó là một dạng code cho người thường dễ đọc hơn.
Tôi thấy dùng pseudocode thì sẽ dễ hiểu hơn,
nhất là với những tính năng phức tạp
mà tôi muốn lập trình.
Giờ tôi sẽ chuyển đoạn pseudocode này thành code thật.
Việc đầu tiên là khi người dùng click vào trang web.
Tôi cần nhận được thông tin bất cứ khi nào
người dùng click vào bất cứ điểm nào trên trang web.
Để được thế thì tôi sẽ thêm một event listener
vào cái . Viết... "body"
rồi dùng hàm on().
rồi tên của event: "click".
Rồi ta nhập vào một hàm callback.
Trong hàm callback này,
ta cần tạo một ảnh mới.
Tôi sẽ lưu nó vào một biến...
$img = ... rồi nhập vào thẻ ,
và ta đổi nguồn ảnh đi...
tôi sẽ dùng nguồn ảnh trên này,
và đặt chiều rộng là 100,
rồi ta cần
đặt ảnh này vào một chỗ nào đó trên trang web.
Tôi sẽ đặt nó vào cuối body.
Được rồi.
Hiện tại thì khi click vào, tôi mới chỉ thấy
ảnh cá sấu này hiện ra phía cuối trang web.
Nếu muốn, bạn có thử dừng bài lại
và tự thử xem nó thế nào.
Nhưng giờ tôi lại muốn đặt ảnh đó vào vị trí
đúng như vị trí tôi click chuột trên trang web nữa.
Làm sao để biết vị trí click ở đâu?
Mỗi khi có event của con chuột,
trình duyệt sẽ thông báo cho trang web thông tin đó,
và jQuery sẽ lưu thông tin đó trong đối được event của jQuery.
Thế đối tượng event đó ở đâu?
Thực ra là jQuery có truyền đối tượng nó vào
làm parameter đầu tiên của hàm callback.
Tôi sẽ đặt tên cho parameter đó để ta con sử dụng
tên nó ở trong hàm callback.
Đôi khi tôi sẽ muốn console log cái event này
để kiểm tra nội dung các thuộc tính của nó trước khi làm gì với nó,
để xem làm mình sẽ làm việc với những thông tin gì.
Nếu bạn dừng video này lại và click vào trang thử xem,
bạn sẽ thấy trong log có một đối tượng jQuery
với mỗi dãy dài các thuộc tính.
Bạn cũng có thể đọc tài liệu của jQuery
để xem có những thuộc tính gì và ý nghĩa của chúng là gì.
Có 2 thuộc tính mà tôi
quan tâm đến chính là pageX và pageY,
đó là toạ đọ của
vị trí click chuột trên trang web
tôi có thể dùng toạ độ đó để xác định vị trí cho ảnh bằng CSS.
Đầu tiên tôi sẽ
đặt thuộc tính CSS là absolute.
Nếu bạn không nhớ CSS absolute là thế nào,
bạn có thể quay lại coi khoá học về HTML CSS.
Giờ tôi sẽ đặt vị trí
theo vị trí con chuột.
tôi sẽ đặt
top bằng
'event.pageY',
tức là sử dụng thuộc tính pageY
của đối tượng event trong jQuery mà
trình duyệt nhập vào hàm callback này.
Rồi tôi đặt giá trị left
là 'event.pageX'.
Tôi sẽ thêm đơn vị nữa: px,
bởi vì ta cần xác định đơn vị
để CSS biết phải dùng đơn vị nào
hay là dùng phần trăm,
đại loại thế.
Ta dùng pixel, bỏi vì
pageY và pageX là số pixel.
Chúng là các giá trị pixel.
Okay, giờ đến chỗ hay này.
Hãy dừng bài lại, click thử vào trang xem.
Hay nhỉ, cá sấu xuất hiện mọi nơi.
Giờ thì tôi thích cá sấu rồi, không sợ nữa.
Vậy là cái đối tượng event này có thể rất hữu dụng.
Ta có thể sử dụng nó trong các trường hợp như thế này
để tìm vị trí của con chuột,
ví dụ như để làm ứng dụng vẽ, hay là game click chuột,
hay tương tác kéo thả.
Ta cũng có thể dùng đối tượng event
để biết là phím nào được nhấn khi event xảy ra,
để viết ứng dụng tương tác với bàn phím
như là game 2d hay là
trình soạn thảo code online, như là trang này đây.
Hay nhỉ.