[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.74,0:00:06.81,Default,,0000,0000,0000,,Một trang web cơ bản, như trang web này, được tạo thành từ các tag HTML, như này. Dialogue: 0,0:00:06.81,0:00:12.18,Default,,0000,0000,0000,,Bây giờ, khi muốn thiết kế một trang web, làm cách nào ta có thể đưa CSS vào? Dialogue: 0,0:00:12.18,0:00:14.40,Default,,0000,0000,0000,,Ta thêm một tag ``. Dialogue: 0,0:00:14.40,0:00:17.35,Default,,0000,0000,0000,,Khi đó trình duyệt sẽ hiểu Dialogue: 0,0:00:17.35,0:00:20.20,Default,,0000,0000,0000,,cần sử dụng công cụ CSS để xử lý tag. Dialogue: 0,0:00:20.20,0:00:23.38,Default,,0000,0000,0000,,Ta thường đưa tag `` vào `<head>`, Dialogue: 0,0:00:23.38,0:00:27.35,Default,,0000,0000,0000,,vì ta muốn đảm bảo trình duyệt xử lý các style Dialogue: 0,0:00:27.35,0:00:30.96,Default,,0000,0000,0000,,trước khi kết xuất thẻ HTML. Dialogue: 0,0:00:30.96,0:00:34.94,Default,,0000,0000,0000,,Mặt khác, nếu ta đưa `` vào dưới cùng, Dialogue: 0,0:00:34.94,0:00:40.28,Default,,0000,0000,0000,,thì ta sẽ gặp phải FOUC: flash of unstyled content, Dialogue: 0,0:00:40.28,0:00:44.73,Default,,0000,0000,0000,,và người ta sẽ thấy trang web như đang trần truồng vây – ghê lắm! Dialogue: 0,0:00:44.73,0:00:48.48,Default,,0000,0000,0000,,Trả nó về vị trí cũ thôi. Dialogue: 0,0:00:48.48,0:00:51.73,Default,,0000,0000,0000,,Ok, vậy là trang web đã có style. Dialogue: 0,0:00:51.73,0:00:57.95,Default,,0000,0000,0000,,Ta đưa Javascript vào trang web bằng cách nào khi muốn thêm tính tương tác? Dialogue: 0,0:00:57.95,0:01:01.26,Default,,0000,0000,0000,,Lúc đó, ta sẽ thêm tag ``. Dialogue: 0,0:01:01.26,0:01:04.38,Default,,0000,0000,0000,,Và vị trí thích hợp nhất để đưa tag `` vào Dialogue: 0,0:01:04.38,0:01:10.52,Default,,0000,0000,0000,,là ở dưới cùng trang ngay trước tag kết thúc ``. Dialogue: 0,0:01:10.52,0:01:15.15,Default,,0000,0000,0000,,Tôi đã đưa vào rồi, và lát nữa tôi sẽ giải thích tại sao. Dialogue: 0,0:01:15.15,0:01:19.72,Default,,0000,0000,0000,,Bây giờ tôi có thể đưa gì vào tag `` này? Dialogue: 0,0:01:19.72,0:01:25.09,Default,,0000,0000,0000,,Hmm, ta có thể đưa vào bất kỳ Javascript hợp lệ nào, ví dụ `var 4 = 2 + 2;`. Dialogue: 0,0:01:25.09,0:01:30.39,Default,,0000,0000,0000,,Nhưng thế thì chẳng vui gì, vì chẳng có gì trên trang web cả. Dialogue: 0,0:01:30.39,0:01:33.15,Default,,0000,0000,0000,,Và nếu đã học ở Học viện Khan, thì hẳn các bạn cũng thừa biết Dialogue: 0,0:01:33.15,0:01:35.53,Default,,0000,0000,0000,,4 = 2 + 2. Dialogue: 0,0:01:35.53,0:01:39.07,Default,,0000,0000,0000,,Vì vậy tôi có thể kiểm tra xem nó có hoạt động hay không Dialogue: 0,0:01:39.07,0:01:42.09,Default,,0000,0000,0000,,bằng cách viết dòng mã này ở đây. Dialogue: 0,0:01:42.09,0:01:45.35,Default,,0000,0000,0000,,OK, các bạn không thấy gì phải không? Dialogue: 0,0:01:45.35,0:01:48.93,Default,,0000,0000,0000,,Có lẽ các bạn cũng chưa từng nhìn thấy hàm này nữa. Dialogue: 0,0:01:48.93,0:01:53.13,Default,,0000,0000,0000,,Hàm này, `console.log`, là một hàm đặc biệt mà ta có thể sử dụng Dialogue: 0,0:01:53.13,0:01:56.47,Default,,0000,0000,0000,,trong nhiều môi trường Javascript, bao gồm cả trình duyệt. Dialogue: 0,0:01:56.47,0:02:00.31,Default,,0000,0000,0000,,Và nó sẽ viết mọi thứ vào console Javascript. Dialogue: 0,0:02:00.31,0:02:03.66,Default,,0000,0000,0000,,Các bạn có thể tìm thấy console trong trình duyệt Dialogue: 0,0:02:03.66,0:02:08.74,Default,,0000,0000,0000,,bằng cách ấn Command-Option-I, hoặc Control-Option-I, Dialogue: 0,0:02:08.74,0:02:14.24,Default,,0000,0000,0000,,hoặc click chuột phải vào bất kỳ vị trí nào trên trang, và chọn “Inspect element”. Dialogue: 0,0:02:14.24,0:02:19.01,Default,,0000,0000,0000,,Ta tạm dừng một chút, và đưa ra console dev Dialogue: 0,0:02:19.01,0:02:21.71,Default,,0000,0000,0000,,để xem thông báo. Dialogue: 0,0:02:21.71,0:02:23.94,Default,,0000,0000,0000,,Các bạn thấy chứ? Tuyệt! Dialogue: 0,0:02:23.94,0:02:26.66,Default,,0000,0000,0000,,Giờ thì các bạn có thể tắt console đi nếu muốn, Dialogue: 0,0:02:26.66,0:02:28.58,Default,,0000,0000,0000,,vì nó tốn diện tích quá. Dialogue: 0,0:02:28.58,0:02:32.96,Default,,0000,0000,0000,,Nó cũng có thể gây mất tập trung nữa vì sẽ hiển thị tất tật mọi lỗi khi tôi gõ. Dialogue: 0,0:02:32.96,0:02:35.52,Default,,0000,0000,0000,,Dù vậy nó vẫn là công cụ khắp phục lỗi hiệu quả. Dialogue: 0,0:02:35.52,0:02:38.36,Default,,0000,0000,0000,,Vì vậy hãy nhớ lưu vào toolbox nhé. Dialogue: 0,0:02:38.36,0:02:42.32,Default,,0000,0000,0000,,Bây giờ tôi sẽ mượn Javascript để xử lý trang này, Dialogue: 0,0:02:42.32,0:02:47.03,Default,,0000,0000,0000,,với một dòng mã chưa được ăn nhập lắm. Dialogue: 0,0:02:56.67,0:02:58.60,Default,,0000,0000,0000,,Các bạn thấy chuyện gì xảy ra không? Dialogue: 0,0:02:58.60,0:03:03.13,Default,,0000,0000,0000,,Trang web đã biến mất, và thay vào đó là thông báo “leet hacker”. Dialogue: 0,0:03:03.13,0:03:07.90,Default,,0000,0000,0000,,Ta sẽ tìm hiểu sâu hơn cách hoạt động của dòng mã này. Dialogue: 0,0:03:07.90,0:03:12.22,Default,,0000,0000,0000,,Về cơ bản nó tìm thấy tag ``, và thay thế nội dung. Dialogue: 0,0:03:12.22,0:03:16.53,Default,,0000,0000,0000,,Bây giờ chuyện gì sẽ xảy ra nếu tôi sao chép và dán tag `` này, Dialogue: 0,0:03:16.53,0:03:20.16,Default,,0000,0000,0000,,và gắn vào `` cùng với tag ``? Dialogue: 0,0:03:20.16,0:03:23.10,Default,,0000,0000,0000,,Không hoạt động – tại sao thế? Dialogue: 0,0:03:23.10,0:03:26.86,Default,,0000,0000,0000,,Vì trang web đánh giá tag `` Dialogue: 0,0:03:26.86,0:03:29.20,Default,,0000,0000,0000,,trước khi nhìn thấy tag ``. Dialogue: 0,0:03:29.20,0:03:34.81,Default,,0000,0000,0000,,Và nói rằng “Uh oh, tôi còn chưa cả thấy `document.body` bao giờ nữa, Dialogue: 0,0:03:34.81,0:03:38.49,Default,,0000,0000,0000,,“Thế mà ông muốn xử lý nó à! Không được đâu.” Dialogue: 0,0:03:38.49,0:03:43.76,Default,,0000,0000,0000,,Đó là lý do vì sao ta phải đặt tag `` ở cuối trang. Dialogue: 0,0:03:43.76,0:03:46.86,Default,,0000,0000,0000,,Để trang web nhìn thấy tag `` trước, Dialogue: 0,0:03:46.86,0:03:51.22,Default,,0000,0000,0000,,xem xét mọi thứ trong đó, rồi ta mới xử lý được. Dialogue: 0,0:03:51.22,0:03:54.81,Default,,0000,0000,0000,,Ta muốn đảm bảo trang web phải tồn tại trước đã. Dialogue: 0,0:03:54.81,0:03:56.67,Default,,0000,0000,0000,,Đó là điều khác biệt với CSS: Dialogue: 0,0:03:56.67,0:03:59.58,Default,,0000,0000,0000,,Ta muốn đặt tag `` ở đầu, Dialogue: 0,0:03:59.58,0:04:02.53,Default,,0000,0000,0000,,vì trình phân tích cú pháp của CSS có thể áp dụng style Dialogue: 0,0:04:02.53,0:04:04.44,Default,,0000,0000,0000,,với những thứ còn chưa tồn tại. Dialogue: 0,0:04:04.44,0:04:07.04,Default,,0000,0000,0000,,Nó sẽ áp dụng khi chúng xuất hiện. Dialogue: 0,0:04:07.04,0:04:09.91,Default,,0000,0000,0000,,Nhưng Javascript DOM thì không. Dialogue: 0,0:04:09.91,0:04:12.97,Default,,0000,0000,0000,,Vì vậy hãy đảm bảo đưa nó xuống dưới cùng. Dialogue: 0,0:04:12.97,0:04:16.36,Default,,0000,0000,0000,,Hãy thử thêm tag `` trong thử thách tiếp theo, Dialogue: 0,0:04:16.36,0:04:18.92,Default,,0000,0000,0000,,và đảm bảo đặt nó ở dưới cùng, Dialogue: 0,0:04:18.92,0:00:00.00,Default,,0000,0000,0000,,Tôi hứa sẽ giải thích nhiều hơn về dòng này trong bài hướng dẫn tới.