[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.70,0:00:03.22,Default,,0000,0000,0000,,Bạn có nhớ tại sao tôi lại
Dialogue: 0,0:00:03.22,0:00:06.34,Default,,0000,0000,0000,,biến trang này thành cá sấu không?
Dialogue: 0,0:00:07.35,0:00:09.97,Default,,0000,0000,0000,,Vì tôi rất rất sợ cá sấu.
Dialogue: 0,0:00:10.85,0:00:15.72,Default,,0000,0000,0000,,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,
Dialogue: 0,0:00:16.29,0:00:19.10,Default,,0000,0000,0000,,để còn đưa nhiều cá sấu lên trang này hơn nữa.
Dialogue: 0,0:00:20.15,0:00:21.98,Default,,0000,0000,0000,,Làm sao làm thế được?
Dialogue: 0,0:00:22.71,0:00:24.40,Default,,0000,0000,0000,,Tôi nghĩ là sẽ rất hay
Dialogue: 0,0:00:24.40,0:00:26.54,Default,,0000,0000,0000,,nếu tôi có thể bao phủ cả trang web này
Dialogue: 0,0:00:26.54,0:00:30.18,Default,,0000,0000,0000,,với ảnh cá sấu khi tôi click chuột.
Dialogue: 0,0:00:30.98,0:00:32.54,Default,,0000,0000,0000,,Ta sẽ lập trình cái đó.
Dialogue: 0,0:00:33.93,0:00:35.86,Default,,0000,0000,0000,,Tôi đã viết trước một đoạn
Dialogue: 0,0:00:35.86,0:00:38.84,Default,,0000,0000,0000,,pseudocode trong thẻ script này đây.
Dialogue: 0,0:00:40.27,0:00:41.97,Default,,0000,0000,0000,,Nếu bạn không biết pseudocode là gì,
Dialogue: 0,0:00:41.97,0:00:45.04,Default,,0000,0000,0000,,thì nó là một dạng code cho người thường dễ đọc hơn.
Dialogue: 0,0:00:46.19,0:00:49.34,Default,,0000,0000,0000,,Tôi thấy dùng pseudocode thì sẽ dễ hiểu hơn,
Dialogue: 0,0:00:49.34,0:00:51.94,Default,,0000,0000,0000,,nhất là với những tính năng phức tạp
Dialogue: 0,0:00:51.94,0:00:53.48,Default,,0000,0000,0000,,mà tôi muốn lập trình.
Dialogue: 0,0:00:54.48,0:00:57.92,Default,,0000,0000,0000,,Giờ tôi sẽ chuyển đoạn pseudocode này thành code thật.
Dialogue: 0,0:00:59.75,0:01:04.16,Default,,0000,0000,0000,,Việc đầu tiên là khi người dùng click vào trang web.
Dialogue: 0,0:01:05.11,0:01:06.74,Default,,0000,0000,0000,,Tôi cần nhận được thông tin bất cứ khi nào
Dialogue: 0,0:01:06.74,0:01:08.86,Default,,0000,0000,0000,,người dùng click vào bất cứ điểm nào trên trang web.
Dialogue: 0,0:01:09.69,0:01:12.07,Default,,0000,0000,0000,,Để được thế thì tôi sẽ thêm một event listener 
Dialogue: 0,0:01:12.07,0:01:16.60,Default,,0000,0000,0000,,vào cái . Viết... "body"
Dialogue: 0,0:01:16.60,0:01:18.89,Default,,0000,0000,0000,,rồi dùng hàm on().
Dialogue: 0,0:01:19.56,0:01:21.28,Default,,0000,0000,0000,,rồi tên của event: "click".
Dialogue: 0,0:01:21.28,0:01:23.94,Default,,0000,0000,0000,,Rồi ta nhập vào một hàm callback.
Dialogue: 0,0:01:26.45,0:01:28.48,Default,,0000,0000,0000,,Trong hàm callback này,
Dialogue: 0,0:01:28.48,0:01:30.72,Default,,0000,0000,0000,,ta cần tạo một ảnh mới.
Dialogue: 0,0:01:31.91,0:01:34.60,Default,,0000,0000,0000,,Tôi sẽ lưu nó vào một biến...
Dialogue: 0,0:01:35.50,0:01:38.81,Default,,0000,0000,0000,,$img = ... rồi nhập vào thẻ ,
Dialogue: 0,0:01:39.30,0:01:41.90,Default,,0000,0000,0000,,và ta đổi nguồn ảnh đi...
Dialogue: 0,0:01:42.36,0:01:47.02,Default,,0000,0000,0000,,tôi sẽ dùng nguồn ảnh trên này,
Dialogue: 0,0:01:48.18,0:01:53.18,Default,,0000,0000,0000,,và đặt chiều rộng là 100,
Dialogue: 0,0:01:54.54,0:01:56.26,Default,,0000,0000,0000,,rồi ta cần
Dialogue: 0,0:01:56.26,0:01:58.21,Default,,0000,0000,0000,,đặt ảnh này vào một chỗ nào đó trên trang web.
Dialogue: 0,0:01:58.82,0:02:00.73,Default,,0000,0000,0000,,Tôi sẽ đặt nó vào cuối body.
Dialogue: 0,0:02:01.70,0:02:02.55,Default,,0000,0000,0000,,Được rồi.
Dialogue: 0,0:02:04.74,0:02:07.51,Default,,0000,0000,0000,,Hiện tại thì khi click vào, tôi mới chỉ thấy
Dialogue: 0,0:02:07.51,0:02:11.44,Default,,0000,0000,0000,,ảnh cá sấu này hiện ra phía cuối trang web.
Dialogue: 0,0:02:12.07,0:02:13.04,Default,,0000,0000,0000,,Nếu muốn, bạn có thử dừng bài lại
Dialogue: 0,0:02:13.04,0:02:14.70,Default,,0000,0000,0000,,và tự thử xem nó thế nào.
Dialogue: 0,0:02:16.30,0:02:18.98,Default,,0000,0000,0000,,Nhưng giờ tôi lại muốn đặt ảnh đó vào vị trí
Dialogue: 0,0:02:18.98,0:02:21.76,Default,,0000,0000,0000,,đúng như vị trí tôi click chuột trên trang web nữa.
Dialogue: 0,0:02:22.90,0:02:24.43,Default,,0000,0000,0000,,Làm sao để biết vị trí click ở đâu?
Dialogue: 0,0:02:25.52,0:02:28.26,Default,,0000,0000,0000,,Mỗi khi có event của con chuột,
Dialogue: 0,0:02:28.26,0:02:31.43,Default,,0000,0000,0000,,trình duyệt sẽ thông báo cho trang web thông tin đó,
Dialogue: 0,0:02:32.04,0:02:35.60,Default,,0000,0000,0000,,và jQuery sẽ lưu thông tin đó trong đối được event của jQuery.
Dialogue: 0,0:02:36.84,0:02:38.67,Default,,0000,0000,0000,,Thế đối tượng event đó ở đâu?
Dialogue: 0,0:02:39.70,0:02:42.16,Default,,0000,0000,0000,,Thực ra là jQuery có truyền đối tượng nó vào
Dialogue: 0,0:02:42.16,0:02:45.15,Default,,0000,0000,0000,,làm parameter đầu tiên của hàm callback.
Dialogue: 0,0:02:46.00,0:02:49.28,Default,,0000,0000,0000,,Tôi sẽ đặt tên cho parameter đó để ta con sử dụng
Dialogue: 0,0:02:49.28,0:02:51.95,Default,,0000,0000,0000,,tên nó ở trong hàm callback.
Dialogue: 0,0:02:53.12,0:02:56.22,Default,,0000,0000,0000,,Đôi khi tôi sẽ muốn console log cái event này
Dialogue: 0,0:02:56.22,0:02:59.43,Default,,0000,0000,0000,,để kiểm tra nội dung các thuộc tính của nó trước khi làm gì với nó,
Dialogue: 0,0:02:59.94,0:03:01.84,Default,,0000,0000,0000,,để xem làm mình sẽ làm việc với những thông tin gì.
Dialogue: 0,0:03:03.47,0:03:05.38,Default,,0000,0000,0000,,Nếu bạn dừng video này lại và click vào trang thử xem,
Dialogue: 0,0:03:05.38,0:03:08.06,Default,,0000,0000,0000,,bạn sẽ thấy trong log có một đối tượng jQuery
Dialogue: 0,0:03:08.06,0:03:10.65,Default,,0000,0000,0000,,với mỗi dãy dài các thuộc tính.
Dialogue: 0,0:03:11.30,0:03:13.38,Default,,0000,0000,0000,,Bạn cũng có thể đọc tài liệu của jQuery
Dialogue: 0,0:03:13.38,0:03:16.35,Default,,0000,0000,0000,,để xem có những thuộc tính gì và ý nghĩa của chúng là gì.
Dialogue: 0,0:03:18.20,0:03:19.38,Default,,0000,0000,0000,,Có 2 thuộc tính mà tôi 
Dialogue: 0,0:03:19.38,0:03:22.57,Default,,0000,0000,0000,,quan tâm đến chính là pageX và pageY,
Dialogue: 0,0:03:23.20,0:03:24.56,Default,,0000,0000,0000,,đó là toạ đọ của
Dialogue: 0,0:03:24.56,0:03:26.51,Default,,0000,0000,0000,,vị trí click chuột trên trang web
Dialogue: 0,0:03:27.04,0:03:30.26,Default,,0000,0000,0000,,tôi có thể dùng toạ độ đó để xác định vị trí cho ảnh bằng CSS.
Dialogue: 0,0:03:31.72,0:03:34.78,Default,,0000,0000,0000,,Đầu tiên tôi sẽ 
Dialogue: 0,0:03:34.78,0:03:38.87,Default,,0000,0000,0000,,đặt thuộc tính CSS là absolute.
Dialogue: 0,0:03:41.91,0:03:44.12,Default,,0000,0000,0000,,Nếu bạn không nhớ CSS absolute là thế nào,
Dialogue: 0,0:03:44.12,0:03:46.15,Default,,0000,0000,0000,,bạn có thể quay lại coi khoá học về HTML CSS.
Dialogue: 0,0:03:48.32,0:03:49.48,Default,,0000,0000,0000,,Giờ tôi sẽ đặt vị trí
Dialogue: 0,0:03:49.48,0:03:51.02,Default,,0000,0000,0000,,theo vị trí con chuột.
Dialogue: 0,0:03:51.33,0:03:53.05,Default,,0000,0000,0000,,tôi sẽ đặt
Dialogue: 0,0:03:54.91,0:03:57.57,Default,,0000,0000,0000,,top bằng
Dialogue: 0,0:03:57.57,0:04:01.42,Default,,0000,0000,0000,,'event.pageY',
Dialogue: 0,0:04:01.42,0:04:04.21,Default,,0000,0000,0000,,tức là sử dụng thuộc tính pageY
Dialogue: 0,0:04:04.21,0:04:06.40,Default,,0000,0000,0000,,của đối tượng event trong jQuery mà
Dialogue: 0,0:04:06.40,0:04:08.14,Default,,0000,0000,0000,,trình duyệt nhập vào hàm callback này.
Dialogue: 0,0:04:09.74,0:04:12.51,Default,,0000,0000,0000,,Rồi tôi đặt giá trị left 
Dialogue: 0,0:04:13.74,0:04:16.14,Default,,0000,0000,0000,,là 'event.pageX'.
Dialogue: 0,0:04:17.95,0:04:22.17,Default,,0000,0000,0000,,Tôi sẽ thêm đơn vị nữa: px,
Dialogue: 0,0:04:22.93,0:04:25.14,Default,,0000,0000,0000,,bởi vì ta cần xác định đơn vị
Dialogue: 0,0:04:25.14,0:04:26.86,Default,,0000,0000,0000,,để CSS biết phải dùng đơn vị nào
Dialogue: 0,0:04:26.86,0:04:27.98,Default,,0000,0000,0000,,hay là dùng phần trăm,
Dialogue: 0,0:04:27.98,0:04:29.07,Default,,0000,0000,0000,,đại loại thế.
Dialogue: 0,0:04:29.07,0:04:31.26,Default,,0000,0000,0000,,Ta dùng pixel, bỏi vì
Dialogue: 0,0:04:31.26,0:04:33.23,Default,,0000,0000,0000,,pageY và pageX là số pixel.
Dialogue: 0,0:04:33.23,0:04:34.72,Default,,0000,0000,0000,,Chúng là các giá trị pixel.
Dialogue: 0,0:04:35.36,0:04:37.63,Default,,0000,0000,0000,,Okay, giờ đến chỗ hay này.
Dialogue: 0,0:04:37.63,0:04:39.73,Default,,0000,0000,0000,,Hãy dừng bài lại, click thử vào trang xem.
Dialogue: 0,0:04:40.70,0:04:43.56,Default,,0000,0000,0000,,Hay nhỉ, cá sấu xuất hiện mọi nơi.
Dialogue: 0,0:04:44.50,0:04:47.45,Default,,0000,0000,0000,,Giờ thì tôi thích cá sấu rồi, không sợ nữa.
Dialogue: 0,0:04:49.64,0:04:52.21,Default,,0000,0000,0000,,Vậy là cái đối tượng event này có thể rất hữu dụng.
Dialogue: 0,0:04:52.79,0:04:54.12,Default,,0000,0000,0000,,Ta có thể sử dụng nó trong các trường hợp như thế này
Dialogue: 0,0:04:54.12,0:04:56.28,Default,,0000,0000,0000,,để tìm vị trí của con chuột,
Dialogue: 0,0:04:56.77,0:04:59.22,Default,,0000,0000,0000,,ví dụ như để làm ứng dụng vẽ, hay là game click chuột,
Dialogue: 0,0:04:59.22,0:05:01.29,Default,,0000,0000,0000,,hay tương tác kéo thả.
Dialogue: 0,0:05:01.90,0:05:03.84,Default,,0000,0000,0000,,Ta cũng có thể dùng đối tượng event
Dialogue: 0,0:05:03.84,0:05:06.58,Default,,0000,0000,0000,,để biết là phím nào được nhấn khi event xảy ra,
Dialogue: 0,0:05:06.58,0:05:08.68,Default,,0000,0000,0000,,để viết ứng dụng tương tác với bàn phím
Dialogue: 0,0:05:08.68,0:05:10.68,Default,,0000,0000,0000,,như là game 2d hay là
Dialogue: 0,0:05:10.68,0:05:13.16,Default,,0000,0000,0000,,trình soạn thảo code online, như là trang này đây.
Dialogue: 0,0:05:13.16,0:00:00.00,Default,,0000,0000,0000,,Hay nhỉ.