-
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.
-
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?
-
Ta thêm một tag ``.
-
Khi đó trình duyệt sẽ hiểu
-
cần sử dụng công cụ CSS để xử lý tag.
-
Ta thường đưa tag `` vào `<head>`,
-
vì ta muốn đảm bảo trình duyệt xử lý các style
-
trước khi kết xuất thẻ HTML.
-
Mặt khác, nếu ta đưa `` vào dưới cùng,
-
thì ta sẽ gặp phải FOUC: flash of unstyled content,
-
và người ta sẽ thấy trang web như đang trần truồng vây – ghê lắm!
-
Trả nó về vị trí cũ thôi.
-
Ok, vậy là trang web đã có style.
-
Ta đưa Javascript vào trang web bằng cách nào khi muốn thêm tính tương tác?
-
Lúc đó, ta sẽ thêm tag ``.
-
Và vị trí thích hợp nhất để đưa tag `` vào
-
là ở dưới cùng trang ngay trước tag kết thúc ``.
-
Tôi đã đưa vào rồi, và lát nữa tôi sẽ giải thích tại sao.
-
Bây giờ tôi có thể đưa gì vào tag `` này?
-
Hmm, ta có thể đưa vào bất kỳ Javascript hợp lệ nào, ví dụ `var 4 = 2 + 2;`.
-
Nhưng thế thì chẳng vui gì, vì chẳng có gì trên trang web cả.
-
Và nếu đã học ở Học viện Khan, thì hẳn các bạn cũng thừa biết
-
4 = 2 + 2.
-
Vì vậy tôi có thể kiểm tra xem nó có hoạt động hay không
-
bằng cách viết dòng mã này ở đây.
-
OK, các bạn không thấy gì phải không?
-
Có lẽ các bạn cũng chưa từng nhìn thấy hàm này nữa.
-
Hàm này, `console.log`, là một hàm đặc biệt mà ta có thể sử dụng
-
trong nhiều môi trường Javascript, bao gồm cả trình duyệt.
-
Và nó sẽ viết mọi thứ vào console Javascript.
-
Các bạn có thể tìm thấy console trong trình duyệt
-
bằng cách ấn Command-Option-I, hoặc Control-Option-I,
-
hoặc click chuột phải vào bất kỳ vị trí nào trên trang, và chọn “Inspect element”.
-
Ta tạm dừng một chút, và đưa ra console dev
-
để xem thông báo.
-
Các bạn thấy chứ? Tuyệt!
-
Giờ thì các bạn có thể tắt console đi nếu muốn,
-
vì nó tốn diện tích quá.
-
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õ.
-
Dù vậy nó vẫn là công cụ khắp phục lỗi hiệu quả.
-
Vì vậy hãy nhớ lưu vào toolbox nhé.
-
Bây giờ tôi sẽ mượn Javascript để xử lý trang này,
-
với một dòng mã chưa được ăn nhập lắm.
-
Các bạn thấy chuyện gì xảy ra không?
-
Trang web đã biến mất, và thay vào đó là thông báo “leet hacker”.
-
Ta sẽ tìm hiểu sâu hơn cách hoạt động của dòng mã này.
-
Về cơ bản nó tìm thấy tag ``, và thay thế nội dung.
-
Bây giờ chuyện gì sẽ xảy ra nếu tôi sao chép và dán tag `` này,
-
và gắn vào `` cùng với tag ``?
-
Không hoạt động – tại sao thế?
-
Vì trang web đánh giá tag ``
-
trước khi nhìn thấy tag ``.
-
Và nói rằng “Uh oh, tôi còn chưa cả thấy `document.body` bao giờ nữa,
-
“Thế mà ông muốn xử lý nó à! Không được đâu.”
-
Đó là lý do vì sao ta phải đặt tag `` ở cuối trang.
-
Để trang web nhìn thấy tag `` trước,
-
xem xét mọi thứ trong đó, rồi ta mới xử lý được.
-
Ta muốn đảm bảo trang web phải tồn tại trước đã.
-
Đó là điều khác biệt với CSS:
-
Ta muốn đặt tag `` ở đầu,
-
vì trình phân tích cú pháp của CSS có thể áp dụng style
-
với những thứ còn chưa tồn tại.
-
Nó sẽ áp dụng khi chúng xuất hiện.
-
Nhưng Javascript DOM thì không.
-
Vì vậy hãy đảm bảo đưa nó xuống dưới cùng.
-
Hãy thử thêm tag `` trong thử thách tiếp theo,
-
và đảm bảo đặt nó ở dưới cùng,
-
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.
