Nơi đặt JavaScript trong HTML
JavaScript có thể được đặt trong <head> hoặc trong <body> của trang HTML.
Thẻ <script>
Trong HTML, mã lệnh JavaScript phải được đặt trong cặp thẻ <script> và </script>.Ví dụ
<script>
document.getElementById("vidu").innerHTML = "Ví dụ mã JavaScript";
</script>
 |
Trong những mã JavaScript cũ có thể dùng kiểu thuộc tính: <script type="text/javascript">. Kiểu thuộc tính thì không bắt buộc. JavaScript là ngôn ngữ script mặc định trong HTML. |
|---|
Hàm và sự kiện trong JavaScript
Hàm (function) là một khối lệnh trong JavaScript. Nó có thể thực hiện khi bạn "gọi" nó.
Ví dụ như hàm có thể được thực thi khi người dùng click vào nút, hoặc sự thay đổi sự kiện của chuột máy tính, ...
Trong những bài viết sau, chúng tôi sẽ đề cập rất nhiều đến hàm và những sự kiện trong JavaScript.
JavaScript trong <head> hoặc <body>
Bạn có thể đặt bất kỳ mã JavaScript nào vào trong trang HTML.
JavaScript có thể được đặt trong thân trang HTML (thẻ <body>) hoặc phần đầu (thẻ <head>) hoặc cả hai.
|
Để tất cả mã JavaScript trong cùng một chỗ là một thói quen tốt. |
|---|
JavaScript trong đầu trang HTML
Trong ví dụ minh họa dưới đây, mã lệnh JavaScript được đặt trong phần đầu HTML, thẻ <head>.
Và được "gọi" thực thi khi người dùng click vào nút lệnh.
Ví dụ
<html>
<head>
<script>
function thaydoi() {
document.getElementById("vidu").innerHTML = "Nội dung đoạn văn đã được thay đổi.";
}
</script>
</head>
<body>
<h1>Trang web của tôi</h1>
<p id="vidu">Đây là đoạn văn</p>
<button type="button" onclick="thaydoi()">Thay đổi</button>
</body>
</html>
Xem kết quả »
JavaScript trong thân chương trình
Trong ví dụ dưới đây, mã lệnh JavaScript được đặt trong thân chương trình, thẻ <body>, và được "gọi" thực thi khi người dùng click vào nút lệnh.
Ví dụ
<html>
<body>
<h1>Trang web của tôi</h1>
<p id="vidu">Đây là đoạn văn</p>
<button type="button" onclick="thaydoi()">Thay đổi</button>
<script>
function thaydoi() {
document.getElementById("vidu").innerHTML = "Nội dung đoạn văn đã được thay đổi.";
}
</script>
</body>
</html>
Xem kết quả »
|
Việc đặt các mã lệnh JavaScrit ở cuối thành phần <body> là một cách hay để cải thiện tốc độ tải trang. Vì các hiển thị HTML không bị các script loading chặn lại. |
|---|
JavaScript lưu trữ bên ngoài
JavaScript có thể được đặt ở một tập tin riêng bên ngoài.
JavaScript được đặt bên ngoài khi có hàm giống nhau được nhiều trang web sử dụng.
Tập tin JavaScript có phần mở rộng là: *.js
Để sử dụng mã script bên ngoài, ta cần đưa tên tập tin (và đường dẫn nếu có) vào trong thuộc tính của thẻ <script>
JavaScript được đặt bên ngoài khi có hàm giống nhau được nhiều trang web sử dụng.
Tập tin JavaScript có phần mở rộng là: *.js
Để sử dụng mã script bên ngoài, ta cần đưa tên tập tin (và đường dẫn nếu có) vào trong thuộc tính của thẻ <script>
Bạn có thể đặt mã nguồn script bên ngoài ở đâu mà bạn muốn trong trang HTML, trong thẻ <head> cũng được và trong thẻ <body> cũng được.
Mã script từ bên ngoài sẽ được vận hành khi đường dẫn khai báo trong thẻ <script> là chính xác.
|
Những mã script từ bên ngoài không được chứa thẻ <script>. |
|---|
Lợi ích khi để JavaScript ra ngoài
- Để mã JavaScript ra một tập tin riêng lẻ có những điều thuận tiện sau:
- Tách riêng HTML và JavaScript
- Làm cho mã nguồn HTML và JavaScript dễ đọc và dễ phân tích hơn.
- Có thể tăng tốc độ tải trang.
Cảm ơn bạn đã xem bài viết,
Bình luận