1
00:00:00,697 --> 00:00:03,215
Bạn có nhớ tại sao tôi lại

2
00:00:03,215 --> 00:00:06,345
biến trang này thành cá sấu không?

3
00:00:07,349 --> 00:00:09,973
Vì tôi rất rất sợ cá sấu.

4
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,

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

6
00:00:20,154 --> 00:00:21,976
Làm sao làm thế được?

7
00:00:22,708 --> 00:00:24,403
Tôi nghĩ là sẽ rất hay

8
00:00:24,403 --> 00:00:26,539
nếu tôi có thể bao phủ cả trang web này

9
00:00:26,539 --> 00:00:30,176
với ảnh cá sấu khi tôi click chuột.

10
00:00:30,977 --> 00:00:32,539
Ta sẽ lập trình cái đó.

11
00:00:33,927 --> 00:00:35,864
Tôi đã viết trước một đoạn

12
00:00:35,864 --> 00:00:38,845
pseudocode trong thẻ script này đây.

13
00:00:40,268 --> 00:00:41,974
Nếu bạn không biết pseudocode là gì,

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

15
00:00:46,188 --> 00:00:49,335
Tôi thấy dùng pseudocode thì sẽ dễ hiểu hơn,

16
00:00:49,335 --> 00:00:51,935
nhất là với những tính năng phức tạp

17
00:00:51,935 --> 00:00:53,485
mà tôi muốn lập trình.

18
00:00:54,477 --> 00:00:57,921
Giờ tôi sẽ chuyển đoạn pseudocode này thành code thật.

19
00:00:59,748 --> 00:01:04,165
Việc đầu tiên là khi người dùng click vào trang web.

20
00:01:05,113 --> 00:01:06,737
Tôi cần nhận được thông tin bất cứ khi nào

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

22
00:01:09,686 --> 00:01:12,066
Để được thế thì tôi sẽ thêm một event listener 

23
00:01:12,066 --> 00:01:16,597
vào cái . Viết... "body"

24
00:01:16,597 --> 00:01:18,890
rồi dùng hàm on().

25
00:01:19,557 --> 00:01:21,278
rồi tên của event: "click".

26
00:01:21,278 --> 00:01:23,937
Rồi ta nhập vào một hàm callback.

27
00:01:26,449 --> 00:01:28,482
Trong hàm callback này,

28
00:01:28,482 --> 00:01:30,716
ta cần tạo một ảnh mới.

29
00:01:31,908 --> 00:01:34,595
Tôi sẽ lưu nó vào một biến...

30
00:01:35,505 --> 00:01:38,809
$img = ... rồi nhập vào thẻ ,

31
00:01:39,301 --> 00:01:41,895
và ta đổi nguồn ảnh đi...

32
00:01:42,364 --> 00:01:47,015
tôi sẽ dùng nguồn ảnh trên này,

33
00:01:48,182 --> 00:01:53,182
và đặt chiều rộng là 100,

34
00:01:54,544 --> 00:01:56,262
rồi ta cần

35
00:01:56,262 --> 00:01:58,207
đặt ảnh này vào một chỗ nào đó trên trang web.

36
00:01:58,815 --> 00:02:00,727
Tôi sẽ đặt nó vào cuối body.

37
00:02:01,696 --> 00:02:02,548
Được rồi.

38
00:02:04,737 --> 00:02:07,506
Hiện tại thì khi click vào, tôi mới chỉ thấy

39
00:02:07,506 --> 00:02:11,437
ảnh cá sấu này hiện ra phía cuối trang web.

40
00:02:12,068 --> 00:02:13,043
Nếu muốn, bạn có thử dừng bài lại

41
00:02:13,043 --> 00:02:14,698
và tự thử xem nó thế nào.

42
00:02:16,305 --> 00:02:18,982
Nhưng giờ tôi lại muốn đặt ảnh đó vào vị trí

43
00:02:18,982 --> 00:02:21,764
đúng như vị trí tôi click chuột trên trang web nữa.

44
00:02:22,896 --> 00:02:24,434
Làm sao để biết vị trí click ở đâu?

45
00:02:25,520 --> 00:02:28,265
Mỗi khi có event của con chuột,

46
00:02:28,265 --> 00:02:31,429
trình duyệt sẽ thông báo cho trang web thông tin đó,

47
00:02:32,038 --> 00:02:35,597
và jQuery sẽ lưu thông tin đó trong đối được event của jQuery.

48
00:02:36,845 --> 00:02:38,674
Thế đối tượng event đó ở đâu?

49
00:02:39,702 --> 00:02:42,162
Thực ra là jQuery có truyền đối tượng nó vào

50
00:02:42,162 --> 00:02:45,153
làm parameter đầu tiên của hàm callback.

51
00:02:46,005 --> 00:02:49,279
Tôi sẽ đặt tên cho parameter đó để ta con sử dụng

52
00:02:49,279 --> 00:02:51,954
tên nó ở trong hàm callback.

53
00:02:53,122 --> 00:02:56,222
Đôi khi tôi sẽ muốn console log cái event này

54
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ó,

55
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ì.

56
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,

57
00:03:05,382 --> 00:03:08,063
bạn sẽ thấy trong log có một đối tượng jQuery

58
00:03:08,063 --> 00:03:10,646
với mỗi dãy dài các thuộc tính.

59
00:03:11,302 --> 00:03:13,381
Bạn cũng có thể đọc tài liệu của jQuery

60
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ì.

61
00:03:18,199 --> 00:03:19,382
Có 2 thuộc tính mà tôi 

62
00:03:19,382 --> 00:03:22,570
quan tâm đến chính là pageX và pageY,

63
00:03:23,201 --> 00:03:24,560
đó là toạ đọ của

64
00:03:24,560 --> 00:03:26,506
vị trí click chuột trên trang web

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

66
00:03:31,725 --> 00:03:34,778
Đầu tiên tôi sẽ 

67
00:03:34,778 --> 00:03:38,872
đặt thuộc tính CSS là absolute.

68
00:03:41,906 --> 00:03:44,124
Nếu bạn không nhớ CSS absolute là thế nào,

69
00:03:44,124 --> 00:03:46,151
bạn có thể quay lại coi khoá học về HTML CSS.

70
00:03:48,323 --> 00:03:49,483
Giờ tôi sẽ đặt vị trí

71
00:03:49,483 --> 00:03:51,022
theo vị trí con chuột.

72
00:03:51,330 --> 00:03:53,049
tôi sẽ đặt

73
00:03:54,913 --> 00:03:57,573
top bằng

74
00:03:57,573 --> 00:04:01,418
'event.pageY',

75
00:04:01,418 --> 00:04:04,210
tức là sử dụng thuộc tính pageY

76
00:04:04,210 --> 00:04:06,398
của đối tượng event trong jQuery mà

77
00:04:06,398 --> 00:04:08,145
trình duyệt nhập vào hàm callback này.

78
00:04:09,741 --> 00:04:12,507
Rồi tôi đặt giá trị left 

79
00:04:13,735 --> 00:04:16,144
là 'event.pageX'.

80
00:04:17,949 --> 00:04:22,169
Tôi sẽ thêm đơn vị nữa: px,

81
00:04:22,930 --> 00:04:25,135
bởi vì ta cần xác định đơn vị

82
00:04:25,135 --> 00:04:26,855
để CSS biết phải dùng đơn vị nào

83
00:04:26,855 --> 00:04:27,979
hay là dùng phần trăm,

84
00:04:27,979 --> 00:04:29,074
đại loại thế.

85
00:04:29,074 --> 00:04:31,256
Ta dùng pixel, bỏi vì

86
00:04:31,256 --> 00:04:33,231
pageY và pageX là số pixel.

87
00:04:33,231 --> 00:04:34,724
Chúng là các giá trị pixel.

88
00:04:35,355 --> 00:04:37,630
Okay, giờ đến chỗ hay này.

89
00:04:37,630 --> 00:04:39,733
Hãy dừng bài lại, click thử vào trang xem.

90
00:04:40,695 --> 00:04:43,563
Hay nhỉ, cá sấu xuất hiện mọi nơi.

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

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

93
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

94
00:04:54,122 --> 00:04:56,281
để tìm vị trí của con chuột,

95
00:04:56,771 --> 00:04:59,221
ví dụ như để làm ứng dụng vẽ, hay là game click chuột,

96
00:04:59,221 --> 00:05:01,293
hay tương tác kéo thả.

97
00:05:01,903 --> 00:05:03,841
Ta cũng có thể dùng đối tượng event

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

99
00:05:06,581 --> 00:05:08,682
để viết ứng dụng tương tác với bàn phím

100
00:05:08,682 --> 00:05:10,679
như là game 2d hay là

101
00:05:10,679 --> 00:05:13,163
trình soạn thảo code online, như là trang này đây.

102
00:05:13,163 --> 00:00:00,000
Hay nhỉ.