[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:06.44,Default,,0000,0000,0000,,Tôi đã trở lại với trang web về chó, và nhất định tôi sẽ sử dụng JavaScript
Dialogue: 0,0:00:06.44,0:00:11.89,Default,,0000,0000,0000,,và DOM api để biến nó thành một trang web hoàn toàn về mèo.
Dialogue: 0,0:00:11.89,0:00:17.46,Default,,0000,0000,0000,,Vẫn còn một điều nữa mà tôi chưa nhắc tới. Thực ra
Dialogue: 0,0:00:17.46,0:00:23.67,Default,,0000,0000,0000,,vẫn còn một chú chó; hai chú chó thì đúng hơn—là những hình ảnh này. Tôi không thể để ảnh
Dialogue: 0,0:00:23.67,0:00:29.48,Default,,0000,0000,0000,,những chú chó đáng yêu này trên trang web về mèo được. Tôi phải đổi ảnh thôi.
Dialogue: 0,0:00:29.49,0:00:36.34,Default,,0000,0000,0000,,Ta sẽ bắt đầu với tìm kiếm ảnh, sử dụng getElementsByTagName.
Dialogue: 0,0:00:36.34,0:00:47.87,Default,,0000,0000,0000,,`var imageEls = document.getElementsByTagName("img");`
Dialogue: 0,0:00:47.87,0:00:50.67,Default,,0000,0000,0000,,Bây giờ, vì dòng mã đó sẽ trả về nhiều phần tử,
Dialogue: 0,0:00:50.67,0:00:54.72,Default,,0000,0000,0000,,ta cần phải sử dụng một vòng lặp for để lặp, nên tôi sẽ tạo luôn.
Dialogue: 0,0:00:54.72,0:01:04.43,Default,,0000,0000,0000,,`var i = 0; i < imageEls.length; i++`
Dialogue: 0,0:01:04.43,0:01:11.46,Default,,0000,0000,0000,,Nhưng tôi sẽ phải đưa gì vào trong vòng lặp? Tôi không thể thay đổi các phần tử ảnh với
Dialogue: 0,0:01:11.46,0:01:18.76,Default,,0000,0000,0000,,innerHTMl vì các tag image không có innerHTML. Chúng là tag đóng tự động.
Dialogue: 0,0:01:18.76,0:01:23.80,Default,,0000,0000,0000,,Thay vào đó, tôi cần phải thay đổi một thứ để khiến chúng trông như những chú chó—
Dialogue: 0,0:01:23.80,0:01:27.18,Default,,0000,0000,0000,,URL của hình ảnh, được chỉ định
Dialogue: 0,0:01:27.18,0:01:30.72,Default,,0000,0000,0000,,bằng thuộc tính src trong mỗi tag.
Dialogue: 0,0:01:30.72,0:01:36.46,Default,,0000,0000,0000,,Ta có thể thay đổi thuộc tính của phần tử bằng ký hiệu chấm. Để tôi cho các bạn xem nhé.
Dialogue: 0,0:01:36.46,0:01:43.18,Default,,0000,0000,0000,,Trước hết ta truy cập phần tử hiện tại với ký hiệu ngoặc, sau đó chấm
Dialogue: 0,0:01:43.18,0:01:50.65,Default,,0000,0000,0000,,và đặt tên thuộc tính HTML làm tên tính chất JavaScript—src—bằng
Dialogue: 0,0:01:50.65,0:01:54.84,Default,,0000,0000,0000,,sau đó ta đặt nó bằng một giá trị mới; tôi sẽ chỉ đặt vào một chuỗi trống thôi.
Dialogue: 0,0:01:54.84,0:01:57.30,Default,,0000,0000,0000,,Chú ý hình ảnh trở nên trắng trơn,
Dialogue: 0,0:01:57.30,0:02:01.67,Default,,0000,0000,0000,,vì một chuỗi trống không hướng tới bất cứ một hình ảnh nào.
Dialogue: 0,0:02:01.67,0:02:07.66,Default,,0000,0000,0000,,Để biết URL mới này là gì, tôi sẽ dán vào URL cũ
Dialogue: 0,0:02:07.66,0:02:13.02,Default,,0000,0000,0000,,và đổi tên file thành cat, vì tình cờ tôi biết được
Dialogue: 0,0:02:13.02,0:02:16.84,Default,,0000,0000,0000,,đó chính là URL ảnh mèo trên Học viện Khan.
Dialogue: 0,0:02:16.84,0:02:23.40,Default,,0000,0000,0000,,Yay. Giờ chó đã biến thành mèo rồi, triều đại mèo sắp hoàn tất rồi.
Dialogue: 0,0:02:23.40,0:02:30.90,Default,,0000,0000,0000,,Các bạn có thấy ta cần phải làm gì với những chú chó nữa không? Khá là khó nhận ra, nhưng
Dialogue: 0,0:02:30.90,0:02:36.83,Default,,0000,0000,0000,,vẫn còn một điều nữa—đường link tới Wikipedia. Đó sẽ là một trang web về chó
Dialogue: 0,0:02:36.83,0:02:41.45,Default,,0000,0000,0000,,và nếu bạn đọc ấn vào, họ sẽ nhận ra mánh khóe của tôi.
Dialogue: 0,0:02:41.45,0:02:47.35,Default,,0000,0000,0000,,Thay vào đó tôi sẽ dẫn họ tới trang web về mèo. Làm thế nào tôi có thể tìm thấy link đó trong JavaScript?
Dialogue: 0,0:02:47.35,0:02:51.83,Default,,0000,0000,0000,,Tôi có thể tạo cho đường link này một ID và sử dụng getElementById.
Dialogue: 0,0:02:51.83,0:02:57.10,Default,,0000,0000,0000,,Hoặc tôi có thể sử dụng getElementsByTagName và thay đổi toàn bộ link trên trang web.
Dialogue: 0,0:02:57.10,0:02:59.41,Default,,0000,0000,0000,,Hoặc tôi muốn làm màu,
Dialogue: 0,0:02:59.41,0:03:06.66,Default,,0000,0000,0000,,và chỉ tìm những link đi tới các trang web về chó, sử dụng một bộ chọn query CSS.
Dialogue: 0,0:03:06.66,0:03:11.82,Default,,0000,0000,0000,,Trước hết để tôi cho các bạn xem query CSS mà tôi muốn thực hiện trong tag .
Dialogue: 0,0:03:11.82,0:03:15.95,Default,,0000,0000,0000,,Như vậy query CSS này sẽ tìm tất cả những link có liên quan đến chó.
Dialogue: 0,0:03:15.95,0:03:19.32,Default,,0000,0000,0000,,Đầu tiên tôi sẽ nhập `a`, vì tôi chỉ tìm link thôi.
Dialogue: 0,0:03:19.32,0:03:26.04,Default,,0000,0000,0000,,Sau đó tôi sẽ nhập `[href*=”Dog”]`.
Dialogue: 0,0:03:26.04,0:03:31.95,Default,,0000,0000,0000,,Dòng mã này sẽ lệnh cho CSS tìm tất cả những link có từ “Dog”.
Dialogue: 0,0:03:31.95,0:03:38.17,Default,,0000,0000,0000,,Tiếp theo ta sẽ chuyển thành màu tím. Tada, xong rồi.
Dialogue: 0,0:03:38.17,0:03:43.57,Default,,0000,0000,0000,,Như này là khá gọn gàng rồi, đây là một bộ chọn thuộc tính, và có rất nhiều cách
Dialogue: 0,0:03:43.57,0:03:49.47,Default,,0000,0000,0000,,sử dụng bộ chọn thuộc tính hiệu quả để đào sâu vào tài liệu.
Dialogue: 0,0:03:49.47,0:03:58.04,Default,,0000,0000,0000,,Bây giờ để tìm trong JavaScript, ta có thể sử dụng document.querySelectorAll, vì vậy tôi sẽ nhập
Dialogue: 0,0:03:58.04,0:04:07.99,Default,,0000,0000,0000,,`var linkEIs = document.querySelectorAll`, sau đó ta chỉ cần dán vào
Dialogue: 0,0:04:07.99,0:04:12.58,Default,,0000,0000,0000,,bộ chọn vừa tạo, mặc dù ta phải đảm bảo
Dialogue: 0,0:04:12.58,0:04:22.70,Default,,0000,0000,0000,,đã thoát dấu ngoặc kép. Được rồi đó. Bây giờ trông nó giống một chuỗi rồi.
Dialogue: 0,0:04:22.70,0:04:27.56,Default,,0000,0000,0000,,Và tôi cần phải lặp qua tất cả, nên tôi sẽ tạo một vòng lặp for nữa—
Dialogue: 0,0:04:27.56,0:04:34.64,Default,,0000,0000,0000,,các bạn nên sử dụng thật thành thục vòng lặp for đi—và với mỗi lần lặp
Dialogue: 0,0:04:34.64,0:04:41.64,Default,,0000,0000,0000,,tôi sẽ thay đổi đường link thành trang web về mèo trên Wikipedia.
Dialogue: 0,0:04:41.64,0:04:45.50,Default,,0000,0000,0000,,Tôi sẽ nhập `linkEIs[i].href`--
Dialogue: 0,0:04:45.50,0:04:50.68,Default,,0000,0000,0000,,vì đó là tên thuộc tính ta đang thay đổi—sau đó =,
Dialogue: 0,0:04:50.68,0:05:00.11,Default,,0000,0000,0000,,tiếp theo tôi sẽ tìm URL này và dán vào đây để chuyển thành trang web về mèo,
Dialogue: 0,0:05:00.11,0:05:04.30,Default,,0000,0000,0000,,vì tôi khá chắc chắn đây là URL của trang đó.
Dialogue: 0,0:05:04.30,0:05:10.53,Default,,0000,0000,0000,,Tada, mèo đã xâm chiếm xong thế giới. Nhưng các bạn vẫn chưa
Dialogue: 0,0:05:10.53,0:00:00.00,Default,,0000,0000,0000,,biết hết về xử lý trang web với JavaScript đâu, vậy nên đừng đi đâu nhé!