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.