WEBVTT

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

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

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

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

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

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

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

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

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

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

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

00:00:35.864 --> 00:00:38.845
pseudocode trong thẻ script này đây.

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

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

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

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

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

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

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

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

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

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

00:01:12.066 --> 00:01:16.597
vào cái . Viết... "body"

00:01:16.597 --> 00:01:18.890
rồi dùng hàm on().

00:01:19.557 --> 00:01:21.278
rồi tên của event: "click".

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

00:01:26.449 --> 00:01:28.482
Trong hàm callback này,

00:01:28.482 --> 00:01:30.716
ta cần tạo một ảnh mới.

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

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

00:01:39.301 --> 00:01:41.895
và ta đổi nguồn ảnh đi...

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

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

00:01:54.544 --> 00:01:56.262
rồi ta cần

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

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

00:02:01.696 --> 00:02:02.548
Được rồi.

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

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

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

00:02:13.043 --> 00:02:14.698
và tự thử xem nó thế nào.

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

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

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

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

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

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

00:02:36.845 --> 00:02:38.674
Thế đối tượng event đó ở đâu?

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

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

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

00:02:49.279 --> 00:02:51.954
tên nó ở trong hàm callback.

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

00:02:56.222 --> 00: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ó,

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

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

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

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

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

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

00:03:18.199 --> 00:03:19.382
Có 2 thuộc tính mà tôi 

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

00:03:23.201 --> 00:03:24.560
đó là toạ đọ của

00:03:24.560 --> 00:03:26.506
vị trí click chuột trên trang web

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

00:03:31.725 --> 00:03:34.778
Đầu tiên tôi sẽ 

00:03:34.778 --> 00:03:38.872
đặt thuộc tính CSS là absolute.

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

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

00:03:48.323 --> 00:03:49.483
Giờ tôi sẽ đặt vị trí

00:03:49.483 --> 00:03:51.022
theo vị trí con chuột.

00:03:51.330 --> 00:03:53.049
tôi sẽ đặt

00:03:54.913 --> 00:03:57.573
top bằng

00:03:57.573 --> 00:04:01.418
'event.pageY',

00:04:01.418 --> 00:04:04.210
tức là sử dụng thuộc tính pageY

00:04:04.210 --> 00:04:06.398
của đối tượng event trong jQuery mà

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

00:04:09.741 --> 00:04:12.507
Rồi tôi đặt giá trị left 

00:04:13.735 --> 00:04:16.144
là 'event.pageX'.

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

00:04:22.930 --> 00:04:25.135
bởi vì ta cần xác định đơn vị

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

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

00:04:27.979 --> 00:04:29.074
đại loại thế.

00:04:29.074 --> 00:04:31.256
Ta dùng pixel, bỏi vì

00:04:31.256 --> 00:04:33.231
pageY và pageX là số pixel.

00:04:33.231 --> 00:04:34.724
Chúng là các giá trị pixel.

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

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

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

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

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

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

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

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

00:04:59.221 --> 00:05:01.293
hay tương tác kéo thả.

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

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

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

00:05:08.682 --> 00:05:10.679
như là game 2d hay là

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

00:05:13.163 --> 00:00:00.000
Hay nhỉ.