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