HTML Script
Trong hướng dẫn này, bạn sẽ học cách đưa JavaScript vào tài liệu HTML.
Làm việc với Tập lệnh phía máy khách
Tập lệnh phía máy khách đề cập đến loại chương trình máy tính được thực thi bởi trình duyệt web của người dùng. JavaScript (JS) là ngôn ngữ kịch bản phía máy khách phổ biến nhất trên web.
Phần tử <script> được sử dụng để nhúng hoặc tham chiếu JavaScript trong tài liệu HTML để thêm tính tương tác cho các trang web và cung cấp trải nghiệm người dùng tốt hơn đáng kể.
Một số cách sử dụng phổ biến nhất của JavaScript là xác thực biểu mẫu, tạo thông báo cảnh báo, tạo thư viện hình ảnh, hiển thị nội dung ẩn, thao tác DOM, v.v.
Thêm JavaScript vào các trang HTML
JavaScript có thể được nhúng trực tiếp vào bên trong trang HTML hoặc được đặt trong tệp script bên ngoài và được tham chiếu bên trong trang HTML. Cả hai phương pháp đều sử dụng phần tử <script>.
Nhúng JavaScript
Để nhúng JavaScript vào tệp HTML, chỉ cần thêm mã làm nội dung của một phần tử <script>.
JavaScript trong ví dụ sau viết một chuỗi văn bản vào một trang web.
Thí dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
</body>
</html>Mẹo: Tốt nhất, các phần tử tập lệnh nên được đặt ở cuối trang, trước thẻ đóng nội dung </body>, tức là vì khi trình duyệt gặp một tập lệnh, trình duyệt sẽ tạm dừng hiển thị phần còn lại của trang cho đến khi phân tích đoạn mã có thể ảnh hưởng đáng kể đến hiệu suất trang web của bạn.
Gọi tệp JavaScript bên ngoài
Bạn cũng có thể đặt mã JavaScript của mình vào một tệp riêng biệt (có phần mở rộng .js) và gọi tệp đó trong tài liệu HTML của bạn thông qua thuộc tính src của thẻ <script>.
Điều này rất hữu ích nếu bạn muốn có cùng một tập lệnh cho nhiều tài liệu. Nó giúp bạn không phải lặp đi lặp lại cùng một tác vụ và giúp trang web của bạn dễ bảo trì hơn nhiều.
Ví dụ sau minh họa cách liên kết tệp JS bên ngoài trong HTML.
Thí dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Linking External JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script src="hello.js"></script>
</body>
</html>Lưu ý: Khi thuộc tính src được chỉ định, phần tử <script> phải trống. Điều này đơn giản có nghĩa là bạn không thể sử dụng cùng một phần tử <script> để vừa nhúng JavaScript vừa để liên kết đến tệp JavaScript bên ngoài trong tài liệu HTML.
Mẹo: Tệp JavaScript là tệp văn bản bình thường có phần mở rộng .js, chẳng hạn như "hello.js". Ngoài ra, tệp JavaScript bên ngoài chỉ chứa các câu lệnh JavaScript; nó không chứa phần tử <script>...</script> như JavaScript nhúng.
Phần tử noscript HTML
Phần tử <noscript> được sử dụng để cung cấp nội dung thay thế cho người dùng đã tắt JavaScript trong trình duyệt của họ hoặc có trình duyệt không hỗ trợ tập lệnh phía máy khách.
Phần tử này có thể chứa bất kỳ phần tử HTML nào, ngoại trừ phần tử <script> có thể được bao gồm trong phần tử <body> của một trang HTML bình thường. Hãy xem một ví dụ:
Thí dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Noscript Demo</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
<noscript>
<p>Oops! This website requires a JavaScript-enabled browser.</p>
</noscript>
</body>
</html>Lưu ý: Nội dung bên trong phần tử noscript sẽ chỉ được hiển thị nếu trình duyệt của người dùng không hỗ trợ tập lệnh hoặc tập lệnh bị tắt trong trình duyệt.