Trong HTML, bạn có thể đặt mã JavaScript ở một trong hai vị trí sau:
1. Trong thẻ <head>
- Mã JavaScript được đặt bên trong thẻ
<script>trong phần<head>của tài liệu HTML. - Ưu điểm: Mã JavaScript sẽ được tải và phân tích cú pháp trước khi nội dung của trang web được hiển thị, giúp đảm bảo rằng các chức năng JavaScript đã sẵn sàng để sử dụng ngay khi trang web được tải xong.
- Nhược điểm: Nếu mã JavaScript quá lớn, nó có thể làm chậm quá trình tải trang web.
2. Trong thẻ <body>
- Mã JavaScript được đặt bên trong thẻ
<script>ở cuối phần<body>của tài liệu HTML. - Ưu điểm: Nội dung của trang web sẽ được hiển thị trước khi mã JavaScript được tải, giúp cải thiện tốc độ tải trang web.
- Nhược điểm: Có thể có một khoảng thời gian ngắn trước khi các chức năng JavaScript sẵn sàng để sử dụng.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về vị trí đặt JavaScript</title>
<script>
// Mã JavaScript được đặt trong thẻ <head>
function myFunction() {
alert("Xin chào!");
}
</script>
</head>
<body>
<h1>Nội dung trang web</h1>
<button onclick="myFunction()">Nhấp vào đây</button>
<script>
// Mã JavaScript được đặt trong thẻ <body>
console.log("Trang web đã được tải xong.");
</script>
</body>
</html>
<html>
<head>
<title>Ví dụ về vị trí đặt JavaScript</title>
<script>
// Mã JavaScript được đặt trong thẻ <head>
function myFunction() {
alert("Xin chào!");
}
</script>
</head>
<body>
<h1>Nội dung trang web</h1>
<button onclick="myFunction()">Nhấp vào đây</button>
<script>
// Mã JavaScript được đặt trong thẻ <body>
console.log("Trang web đã được tải xong.");
</script>
</body>
</html>
Lời khuyên
Nói chung, nên đặt mã JavaScript ở cuối phần <body> để cải thiện tốc độ tải trang web.
Tuy nhiên, nếu bạn cần chắc chắn rằng các chức năng JavaScript đã sẵn sàng để sử dụng ngay khi trang web được tải xong, bạn có thể đặt mã JavaScript trong thẻ <head>.
Đối với các đoạn mã JavaScript nhỏ, bạn có thể đặt chúng trực tiếp trong thẻ HTML bằng cách sử dụng các thuộc tính như onclick, onload, v.v.
Nói chung, nên đặt mã JavaScript ở cuối phần <body> để cải thiện tốc độ tải trang web.
Tuy nhiên, nếu bạn cần chắc chắn rằng các chức năng JavaScript đã sẵn sàng để sử dụng ngay khi trang web được tải xong, bạn có thể đặt mã JavaScript trong thẻ <head>.
Đối với các đoạn mã JavaScript nhỏ, bạn có thể đặt chúng trực tiếp trong thẻ HTML bằng cách sử dụng các thuộc tính như onclick, onload, v.v.
Đăng nhận xét