.js bên ngoài để tổ chức, bảo trì và tái sử dụng tốt hơn.<script> trong <head> sẽ chặn việc render và là cách tồi nhất về hiệu suất.defer cho các script bên ngoài giúp hiệu suất tối ưu..js duy nhất có thể được liên kết trên nhiều trang để dễ dàng cập nhật.<head><script> trong <head> để chứa mã JavaScript.Ví dụ:
<head>
<script>
let d = new Date();
alert("Ngày hôm nay là " + d);
</script>
</head>
<body><script> cuối cùng trong <body> đảm bảo tất cả phần tử được phân tích cú pháp trước khi script chạy.Ví dụ:
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Ngày hôm nay là " + d + "</h1>";
</script>
</body>
.js và liên kết qua <script src="...">.Cấu trúc dự án ví dụ:
project/
├── css/
│ └── style.css
├── js/
│ └── script.js
└── index.html
Liên kết CSS và JS trong HTML:
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/script.js"></script>
</body>
Kiểm soát thêm:
defer để tải script bất đồng bộ và thực thi sau khi phân tích DOM.async để tải bất đồng bộ và chạy ngay khi sẵn sàng (không đảm bảo thứ tự).HTML:
<button id="theme-toggle">Chuyển chế độ tối</button>
<h1 id="title">DigitalOcean</h1>
CSS:
.dark-mode {
background-color: #222;
color: #eee;
}
JavaScript:
const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
});
HTML:
<form id="contact-form">
<label for="email">Email:</label>
<input type="text" id="email" placeholder="you@example.com">
<button type="submit">Đăng ký</button>
<p id="error-message" style="color: red;"></p>
</form>
JavaScript:
const contactForm = document.getElementById('contact-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');
contactForm.addEventListener('submit', function(event) {
if (!emailInput.value.includes('@')) {
event.preventDefault();
errorMessage.textContent = 'Vui lòng nhập địa chỉ email hợp lệ.';
} else {
errorMessage.textContent = '';
}
});
<head><body><body> sẽ tốt hơn.defer tải ngầm và chạy sau khi DOM được phân tích.async tải và chạy ngay khi sẵn sàng; không đảm bảo thứ tự.<body> với defer để cải thiện trải nghiệm người dùng.console.log() để kiểm tra trạng thái biến..js bên ngoài với defer trước </body>.<body>, không đặt trong <head>.defer giữ thứ tự thực thi sau phân tích, async chạy ngay khi tải xong.console.log() để gỡ lỗi.Sử dụng file .js bên ngoài với defer là tốt nhất về hiệu suất và bảo trì. Script nội tuyến chặn việc render và không tận dụng bộ nhớ đệm. Các thực hành tốt và mẹo xử lý lỗi giúp đảm bảo ứng dụng web chuyên nghiệp, tương tác hiệu quả.
Khám phá thêm về Console JavaScript, chú thích code, hoặc đi sâu vào cú pháp và biến với các bài học liên quan.