0:00:00.697,0:00:03.215
Bạn có nhớ tại sao tôi lại

0:00:03.215,0:00:06.345
biến trang này thành cá sấu không?

0:00:07.349,0:00:09.973
Vì tôi rất rất sợ cá sấu.

0:00:10.854,0:00:15.725
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,

0:00:16.288,0:00:19.104
để còn đưa nhiều cá sấu lên trang này hơn nữa.

0:00:20.154,0:00:21.976
Làm sao làm thế được?

0:00:22.708,0:00:24.403
Tôi nghĩ là sẽ rất hay

0:00:24.403,0:00:26.539
nếu tôi có thể bao phủ cả trang web này

0:00:26.539,0:00:30.176
với ảnh cá sấu khi tôi click chuột.

0:00:30.977,0:00:32.539
Ta sẽ lập trình cái đó.

0:00:33.927,0:00:35.864
Tôi đã viết trước một đoạn

0:00:35.864,0:00:38.845
pseudocode trong thẻ script này đây.

0:00:40.268,0:00:41.974
Nếu bạn không biết pseudocode là gì,

0:00:41.974,0:00:45.045
thì nó là một dạng code cho người thường dễ đọc hơn.

0:00:46.188,0:00:49.335
Tôi thấy dùng pseudocode thì sẽ dễ hiểu hơn,

0:00:49.335,0:00:51.935
nhất là với những tính năng phức tạp

0:00:51.935,0:00:53.485
mà tôi muốn lập trình.

0:00:54.477,0:00:57.921
Giờ tôi sẽ chuyển đoạn pseudocode này thành code thật.

0:00:59.748,0:01:04.165
Việc đầu tiên là khi người dùng click vào trang web.

0:01:05.113,0:01:06.737
Tôi cần nhận được thông tin bất cứ khi nào

0:01:06.737,0:01:08.857
người dùng click vào bất cứ điểm nào trên trang web.

0:01:09.686,0:01:12.066
Để được thế thì tôi sẽ thêm một event listener

0:01:12.066,0:01:16.597
vào cái . Viết... "body"

0:01:16.597,0:01:18.890
rồi dùng hàm on().

0:01:19.557,0:01:21.278
rồi tên của event: "click".

0:01:21.278,0:01:23.937
Rồi ta nhập vào một hàm callback.

0:01:26.449,0:01:28.482
Trong hàm callback này,

0:01:28.482,0:01:30.716
ta cần tạo một ảnh mới.

0:01:31.908,0:01:34.595
Tôi sẽ lưu nó vào một biến...

0:01:35.505,0:01:38.809
$img = ... rồi nhập vào thẻ ,

0:01:39.301,0:01:41.895
và ta đổi nguồn ảnh đi...

0:01:42.364,0:01:47.015
tôi sẽ dùng nguồn ảnh trên này,

0:01:48.182,0:01:53.182
và đặt chiều rộng là 100,

0:01:54.544,0:01:56.262
rồi ta cần

0:01:56.262,0:01:58.207
đặt ảnh này vào một chỗ nào đó trên trang web.

0:01:58.815,0:02:00.727
Tôi sẽ đặt nó vào cuối body.

0:02:01.696,0:02:02.548
Được rồi.

0:02:04.737,0:02:07.506
Hiện tại thì khi click vào, tôi mới chỉ thấy

0:02:07.506,0:02:11.437
ảnh cá sấu này hiện ra phía cuối trang web.

0:02:12.068,0:02:13.043
Nếu muốn, bạn có thử dừng bài lại

0:02:13.043,0:02:14.698
và tự thử xem nó thế nào.

0:02:16.305,0:02:18.982
Nhưng giờ tôi lại muốn đặt ảnh đó vào vị trí

0:02:18.982,0:02:21.764
đúng như vị trí tôi click chuột trên trang web nữa.

0:02:22.896,0:02:24.434
Làm sao để biết vị trí click ở đâu?

0:02:25.520,0:02:28.265
Mỗi khi có event của con chuột,

0:02:28.265,0:02:31.429
trình duyệt sẽ thông báo cho trang web thông tin đó,

0:02:32.038,0:02:35.597
và jQuery sẽ lưu thông tin đó trong đối được event của jQuery.

0:02:36.845,0:02:38.674
Thế đối tượng event đó ở đâu?

0:02:39.702,0:02:42.162
Thực ra là jQuery có truyền đối tượng nó vào

0:02:42.162,0:02:45.153
làm parameter đầu tiên của hàm callback.

0:02:46.005,0:02:49.279
Tôi sẽ đặt tên cho parameter đó để ta con sử dụng

0:02:49.279,0:02:51.954
tên nó ở trong hàm callback.

0:02:53.122,0:02:56.222
Đôi khi tôi sẽ muốn console log cái event này

0:02:56.222,0:02:59.431
để kiểm tra nội dung các thuộc tính của nó trước khi làm gì với nó,

0:02:59.936,0:03:01.835
để xem làm mình sẽ làm việc với những thông tin gì.

0:03:03.466,0:03:05.382
Nếu bạn dừng video này lại và click vào trang thử xem,

0:03:05.382,0:03:08.063
bạn sẽ thấy trong log có một đối tượng jQuery

0:03:08.063,0:03:10.646
với mỗi dãy dài các thuộc tính.

0:03:11.302,0:03:13.381
Bạn cũng có thể đọc tài liệu của jQuery

0:03:13.381,0:03:16.347
để xem có những thuộc tính gì và ý nghĩa của chúng là gì.

0:03:18.199,0:03:19.382
Có 2 thuộc tính mà tôi

0:03:19.382,0:03:22.570
quan tâm đến chính là pageX và pageY,

0:03:23.201,0:03:24.560
đó là toạ đọ của

0:03:24.560,0:03:26.506
vị trí click chuột trên trang web

0:03:27.043,0:03:30.257
tôi có thể dùng toạ độ đó để xác định vị trí cho ảnh bằng CSS.

0:03:31.725,0:03:34.778
Đầu tiên tôi sẽ

0:03:34.778,0:03:38.872
đặt thuộc tính CSS là absolute.

0:03:41.906,0:03:44.124
Nếu bạn không nhớ CSS absolute là thế nào,

0:03:44.124,0:03:46.151
bạn có thể quay lại coi khoá học về HTML CSS.

0:03:48.323,0:03:49.483
Giờ tôi sẽ đặt vị trí

0:03:49.483,0:03:51.022
theo vị trí con chuột.

0:03:51.330,0:03:53.049
tôi sẽ đặt

0:03:54.913,0:03:57.573
top bằng

0:03:57.573,0:04:01.418
'event.pageY',

0:04:01.418,0:04:04.210
tức là sử dụng thuộc tính pageY

0:04:04.210,0:04:06.398
của đối tượng event trong jQuery mà

0:04:06.398,0:04:08.145
trình duyệt nhập vào hàm callback này.

0:04:09.741,0:04:12.507
Rồi tôi đặt giá trị left

0:04:13.735,0:04:16.144
là 'event.pageX'.

0:04:17.949,0:04:22.169
Tôi sẽ thêm đơn vị nữa: px,

0:04:22.930,0:04:25.135
bởi vì ta cần xác định đơn vị

0:04:25.135,0:04:26.855
để CSS biết phải dùng đơn vị nào

0:04:26.855,0:04:27.979
hay là dùng phần trăm,

0:04:27.979,0:04:29.074
đại loại thế.

0:04:29.074,0:04:31.256
Ta dùng pixel, bỏi vì

0:04:31.256,0:04:33.231
pageY và pageX là số pixel.

0:04:33.231,0:04:34.724
Chúng là các giá trị pixel.

0:04:35.355,0:04:37.630
Okay, giờ đến chỗ hay này.

0:04:37.630,0:04:39.733
Hãy dừng bài lại, click thử vào trang xem.

0:04:40.695,0:04:43.563
Hay nhỉ, cá sấu xuất hiện mọi nơi.

0:04:44.503,0:04:47.446
Giờ thì tôi thích cá sấu rồi, không sợ nữa.

0:04:49.635,0:04:52.212
Vậy là cái đối tượng event này có thể rất hữu dụng.

0:04:52.786,0:04:54.122
Ta có thể sử dụng nó trong các trường hợp như thế này

0:04:54.122,0:04:56.281
để tìm vị trí của con chuột,

0:04:56.771,0:04:59.221
ví dụ như để làm ứng dụng vẽ, hay là game click chuột,

0:04:59.221,0:05:01.293
hay tương tác kéo thả.

0:05:01.903,0:05:03.841
Ta cũng có thể dùng đối tượng event

0:05:03.841,0:05:06.581
để biết là phím nào được nhấn khi event xảy ra,

0:05:06.581,0:05:08.682
để viết ứng dụng tương tác với bàn phím

0:05:08.682,0:05:10.679
như là game 2d hay là

0:05:10.679,0:05:13.163
trình soạn thảo code online, như là trang này đây.

0:05:13.163,0:00:00.000
Hay nhỉ.