13 phút để đọc
Bài viết này sẽ cung cấp một cái nhìn toàn diện về cách nhúng JavaScript vào HTML, với 3 phương pháp chính: đặt script trực tiếp trong <head>, đặt trực tiếp trong <body>, và liên kết đến tệp .js bên ngoài.
Không chỉ dừng lại ở cách thực hiện, bài viết còn đi sâu giải thích những ảnh hưởng của từng cách đến hiệu suất, bao gồm các khái niệm như render-blocking, bộ nhớ đệm của trình duyệt, và việc sử dụng các thuộc tính hiện đại như defer và async.
Để kết nối lý thuyết với thực hành, hướng dẫn này bao gồm các ví dụ thực tế như tạo nút chuyển đổi chế độ tối (dark mode toggle) và xác thực biểu mẫu web.
Cuối cùng, bạn sẽ được trang bị các thực tiễn tốt nhất để viết mã sạch, dễ bảo trì, cùng với phần hướng dẫn khắc phục sự cố để giúp bạn giải quyết những lỗi thường gặp khi mới bắt đầu bằng công cụ Developer Console của trình duyệt. Nhờ đó, bạn có thể tự tin bắt đầu các dự án phát triển web.
Những điểm chính cần ghi nhớ
- Cách tốt nhất khi thêm JavaScript là sử dụng tệp
.jsbên ngoài để tổ chức, bảo trì và tái sử dụng tốt hơn. - Đặt thẻ
<script>trong<head>là lựa chọn gây ảnh hưởng lớn đến hiệu suất vì nó gây render-blocking, khiến người dùng thấy một trang trắng. - Sử dụng thuộc tính
defervới script bên ngoài là phương pháp hiện đại được khuyến nghị để đạt hiệu suất tối ưu. - Các tệp JavaScript bên ngoài mang lại lợi ích lớn về hiệu suất nhờ khả năng caching của trình duyệt, trong khi script nội tuyến thì không.
- Một tệp
.jscó thể được liên kết với nhiều trang, giúp việc cập nhật và bảo trì hiệu quả hơn nhiều. - Developer Console (F12) là công cụ quan trọng nhất để khắc phục các lỗi JavaScript phổ biến.
Cách nhúng JavaScript vào HTML
Phương pháp 1: Cách thêm Script nội tuyến vào <head>
Bạn có thể thêm mã JavaScript trong tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng <script> bao quanh mã JavaScript. Thẻ <script> có thể được đặt trong phần <head> của HTML hoặc trong phần <body>, tùy thuộc vào thời điểm bạn muốn JavaScript chạy.
Thông thường, mã JavaScript có thể được đặt trong phần <head> của tài liệu để giữ nó tách biệt và không xen vào nội dung chính của tài liệu HTML.
Hãy xem xét tài liệu HTML cơ bản sau với tiêu đề trình duyệt là Today's Date:
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>
Để thêm một script tạo cảnh báo, chúng ta có thể thêm thẻ <script> và mã JavaScript ngay bên dưới thẻ <title>, như dưới đây:
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<script>
let d = new Date();
alert("Today's date is " + d);
</script>
</head>
<body>
</body>
</html>
Đặt script ở đây báo cho trình duyệt phân tích và thực thi JavaScript trước khi bắt đầu hiển thị nội dung trong phần <body> của trang.
Cách tiếp cận này phù hợp nhất cho các script không cần tương tác trực tiếp với các phần tử trên trang. Khi script trong <head> chạy, trình duyệt vẫn chưa xây dựng xong Document Object Model (DOM) cho phần <body>. Điều này có nghĩa là các phần tử HTML như tiêu đề, đoạn văn hoặc div vẫn chưa tồn tại. Do đó, khi mã cố gắng tìm hoặc chỉnh sửa các phần tử này (ví dụ: dùng document.getElementById()) thì sẽ thất bại. Vì vậy, phương pháp này tốt nhất là để thiết lập các hàm và biến để sử dụng sau này, hoặc để bao gồm các script phân tích của bên thứ ba cần được tải càng sớm càng tốt.
Khi bạn tải trang, bạn sẽ nhận được một cảnh báo tương tự như sau:
Ví dụ cảnh báo JavaScript
Phương pháp 2: Cách thêm Script nội tuyến vào <body>
Thẻ <script> cũng có thể được đặt trong phần <body>. Khi script được đặt ở đây, trình phân tích HTML sẽ tạm dừng công việc để thực thi script ngay tại vị trí mà nó xuất hiện trong tài liệu. Đây là cách bắt buộc đối với bất kỳ mã JavaScript nào cần tìm và chỉnh sửa một phần tử HTML ngay lập tức.
Một thực tiễn phổ biến là đặt script ngay trước thẻ đóng </body>. Vị trí này đảm bảo rằng tất cả các phần tử HTML trên trang đã được phân tích và sẵn sàng trong DOM trước khi script bắt đầu chạy. Nó cũng cải thiện hiệu suất hiển thị, vì trình duyệt có thể kết xuất toàn bộ văn bản và hình ảnh hiển thị trước, cho phép người dùng nhìn thấy nội dung trang trước khi JavaScript, vốn có thể tốn nhiều thời gian, được thực thi. Nhờ đó, nội dung có thể hiển thị mà không bị chặn lại trong khi chờ chạy JavaScript.
Hãy sử dụng phương pháp này để ghi trực tiếp ngày tháng vào phần nội dung HTML.
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
</script>
</body>
</html>
Kết quả khi tải tài liệu HTML trên trong trình duyệt sẽ tương tự như sau:
Ví dụ ngày tháng JavaScript
Các script nhỏ hoặc chỉ chạy trên một trang có thể hoạt động tốt khi đặt trong tệp HTML. Tuy nhiên, đây không phải là giải pháp hiệu quả đối với các script lớn hơn hoặc script được dùng trên nhiều trang vì việc nhúng trực tiếp có thể trở nên rườm rà hoặc khó đọc và khó hiểu. Trong phần tiếp theo, chúng ta sẽ tìm hiểu cách xử lý một tệp JavaScript riêng trong tài liệu HTML.
Phương pháp 3: Cách làm việc với tệp JavaScript riêng
Đối với các script lớn hơn hoặc mã cần sử dụng trên nhiều trang, giải pháp hiệu quả và chuyên nghiệp nhất là đặt JavaScript trong một tệp riêng với phần mở rộng .js. Sau đó, bạn có thể liên kết đến tệp bên ngoài này từ HTML bằng thẻ <script> với thuộc tính src (source).
Cách tiếp cận này mang lại những lợi ích lớn như sau:
- Tách biệt trách nhiệm (Separation of Concerns): HTML dùng cho cấu trúc, CSS dùng cho định dạng, và JavaScript dùng cho tính tương tác được tách thành các tệp riêng biệt. Điều này giúp dự án gọn gàng, có tổ chức hơn và dễ gỡ lỗi hơn.
- Tái sử dụng và bảo trì: Một tệp script duy nhất, chẳng hạn như
main-navigation.js, có thể được liên kết từ mọi trang trên website của bạn. Nếu bạn cần cập nhật logic điều hướng, bạn chỉ phải chỉnh sửa tệp đó. - Bộ nhớ đệm trình duyệt: Khi người dùng truy cập trang lần đầu, trình duyệt sẽ tải tệp
.js. Ở các lần truy cập sau hoặc khi điều hướng sang trang khác sử dụng cùng tệp đó, trình duyệt sẽ dùng bản sao đã lưu thay vì tải lại. Điều này giúp cải thiện rõ rệt thời gian tải trang.
Để minh họa cách kết nối một tệp JavaScript với tài liệu HTML, chúng ta hãy tạo một dự án web nhỏ. Dự án sẽ bao gồm script.js trong thư mục js/, style.css trong thư mục css/, và tệp chính index.html ở thư mục gốc.
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html
Hãy di chuyển mã JavaScript hiển thị ngày dưới dạng tiêu đề <h1> vào tệp script.js:
script.js
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
Tiếp theo, hãy chỉnh sửa tệp style.css để thêm màu nền và định dạng cho tiêu đề <h1>:
style.css
body {
background-color: #0080ff;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
Cuối cùng, chúng ta có thể tham chiếu cả script và stylesheet từ tệp index.html. Dùng thẻ <link> trong phần <head> cho CSS và thẻ <script> với thuộc tính src trong phần <body> cho JavaScript.
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
Giờ đây, với JavaScript và CSS riêng biệt, dự án của chúng ta trở nên gọn gàng và có tổ chức hơn. Khi tải trang index.html trong trình duyệt, chúng ta sẽ thấy một trang được định dạng với ngày hiện tại, trông tương tự như sau:
Ví dụ ngày tháng JavaScript với CSS
Sau khi đã đặt JavaScript trong một tệp riêng, chúng ta có thể gọi nó theo cùng cách từ các trang web khác và cập nhật tất cả chỉ trong một vị trí duy nhất. Đây là phương pháp tổ chức và mở rộng hiệu quả nhất để quản lý JavaScript trong các dự án web. Để kiểm soát nhiều hơn cách script bên ngoài được tải, bạn có thể tìm hiểu thêm về việc sử dụng các thuộc tính async và defer trong thẻ <script>.
Các ví dụ minh họa thực tế
Chúng ta cùng xem qua một số ví dụ thực tế dựa trên những gì đã học.
1. Chuyển đổi chế độ tối đơn giản
Hầu như mọi website hoặc ứng dụng hiện đại đều cung cấp chế độ tối. Chuyển đổi chế độ tối đơn giản bằng cách bật/tắt một lớp CSS bằng JavaScript.
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark Mode</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button id="theme-toggle">Toggle Dark Mode</button>
<h1 id="title">DigitalOcean</h1>
<p>This is some example text on the page.</p>
<script src="js/script.js"></script>
</body>
</html>
CSS:
/* This class will be added or removed by JavaScript */
.dark-mode {
background-color: #222;
color: #eee;
}
JavaScript:
const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
});
JavaScript tìm nút bằng ID trước tiên. Sau đó nó gắn một event listener để chờ người dùng nhấp chuột. Khi nút được nhấp là lúc chạy lệnh classList.toggle('dark-mode'). Nếu phần tử <body> chưa có lớp .dark-modethì JavaScript sẽ thêm vào. Nếu đã có sẵn, JavaScript sẽ gỡ bỏ. Trình duyệt ngay lập tức áp dụng các kiểu CSS liên quan đến lớp đó.
2. Kiểm tra biểu mẫu cơ bản
Website cần đảm bảo người dùng điền biểu mẫu chính xác trước khi gửi. JavaScript có thể kiểm tra ngay lập tức mà không cần tải lại trang.
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Validator</title>
</head>
<body>
<form id="contact-form">
<label for="email">Email:</label>
<input type="text" id="email" placeholder="you@example.com">
<button type="submit">Subscribe</button>
<p id="error-message" style="color: red;"></p>
</form>
<script src="js/script.js"></script>
</body>
</html>
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 = 'Please enter a valid email address.';
} else {
errorMessage.textContent = '';
}
});
Script này lắng nghe sự kiện submit trên biểu mẫu. Khi bạn nhấp nút "Subscribe", hàm sẽ chạy. Nó kiểm tra xem nội dung trong ô nhập email có chứa ký tự @ hay không.
- Nếu không có,
event.preventDefault()sẽ dừng hành vi gửi mặc định của biểu mẫu. Sau đó hiển thị thông báo lỗi để nhắc nhở người dùng. - Nếu có, script không làm gì thêm và biểu mẫu được gửi như bình thường.
Đánh giá hiệu năng cho từng phương pháp
Chúng ta sẽ lần lượt đánh giá hiệu năng của từng phương pháp tải JavaScript đã được giới thiệu ở trên.
Inline Script trong <head>
- Vấn đề chính: Render-Blocking
Đặt một script trong <head> gây tác động tiêu cực lớn nhất đến hiệu năng. Trình duyệt phải tải xuống, phân tích, và thực thi JavaScript trước khi có thể tiếp tục render bất kỳ phần nào của <body> của trang. Nếu script lớn hoặc chạy chậm thì sẽ hiển thị trang trắng cho người dùng cho đến khi script chạy xong. Điều này làm tăng thời gian hiển thị nội dung đầu tiên (FCP). Đây là chỉ số trải nghiệm người dùng quan trọng.
- Bộ nhớ đệm: Không có
Inline script là một phần của chính tài liệu HTML nên trình duyệt không thể lưu đệm nó một cách riêng biệt. Mỗi lần người dùng truy cập trang, script sẽ được tải lại và phân tích lại cùng với phần còn lại của HTML.
Phương pháp này nhìn chung gây bất lợi nhất cho hiệu năng và nên tránh, trừ khi script cực kỳ nhỏ và thật sự cần chạy trước mọi thành phần khác.
Inline Script trong <body>
- Vấn đề chính: Partial Render-Blocking
Phương pháp này cải thiện đáng kể so với đặt script trong <head>. Trình duyệt phân tích và render HTML cho đến khi gặp thẻ <script>. Lúc đó quá trình render tạm dừng để thực thi script. Nếu đặt script ở cuối <body> ngay trước thẻ </body>, toàn bộ nội dung hiển thị sẽ được render trước.
- Bộ nhớ đệm: Không có
Giống như script trong <head>, inline script trong <body> là một phần của HTML và không thể lưu đệm độc lập.
Đặt script ở cuối <body> là một chiến lược tốt để cải thiện cảm nhận về tốc độ vì nội dung hiển thị nhanh. Tuy nhiên, nó vẫn có thể trì hoãn thời điểm trang phản hồi hoàn toàn với mọi thao tác của người dùng.
Tệp JavaScript bên ngoài
Phương pháp này mang lại mức độ linh hoạt cao và hiệu năng tối ưu, chủ yếu nhờ hai yếu tố: bộ nhớ đệm của trình duyệt và các thuộc tính tải đặc biệt.
Lợi thế chính: Bộ nhớ đệm và tải bất đồng bộ
- Bộ nhớ đệm: đảm bảo hiệu năng tối ưu nhất. Một tệp
.jsbên ngoài sẽ được tải xuống một lần ở lần truy cập đầu tiên. Với tất cả các trang tiếp theo sử dụng cùng script, trình duyệt sẽ tải tệp từ bộ nhớ đệm cục bộ, loại bỏ độ trễ mạng và tăng tốc trang đáng kể. - Thuộc tính
defervàasync: Script bên ngoài mở khóa cho hai thuộc tính mạnh.<script defer src="..."></script>: Thẻ này hướng dẫn trình duyệt tải script ở nền đồng thời tiếp tục phân tích HTML. Script chỉ thực thi sau khi toàn bộ tài liệu được phân tích xong. Đây là cách tiếp cận hiện đại được khuyên dùng vì không gây chặn và đảm bảo script chạy theo đúng thứ tự trong HTML.<script async src="..."></script>: Thuộc tính này cũng tải script ở nền mà không chặn render. Tuy nhiên, nó sẽ thực thi script ngay khi tải xong, có thể xảy ra vào bất kỳ thời điểm nào và có thể làm gián đoạn render. Nó phù hợp nhất cho các script độc lập của bên thứ ba, như quảng cáo hoặc phân tích, nơi thứ tự thực thi không quan trọng.
Sử dụng tệp bên ngoài kết hợp thuộc tính defer là phương pháp tối ưu hiệu năng tốt nhất. Đặc biệt là khi cách này kết hợp với lợi ích tải không chặn cùng khả năng lưu đệm mạnh mẽ của trình duyệt.
Nguyên tắc tối ưu và mẹo xử lý sự cố với JavaScript trong tệp HTML
Dưới đây là một số giải pháp tối ưu và mẹo thiết yếu khi làm việc với JavaScript trong tệp HTML:
- Giữ JavaScript trong các tệp bên ngoài:Luôn ưu tiên liên kết tới tệp
.js(<script src="..."></script>) thay vì viết JavaScript trực tiếp trong HTML. Cách này giúp mã có tổ chức, dễ bảo trì và cho phép trình duyệt lưu đệm tệp để tải nhanh hơn. - Tải script ở cuối
<body>vớidefer:Để có trải nghiệm người dùng tốt nhất, bạn nên đặt thẻ<script>ngay trước thẻ đóng</body>và thêm thuộc tínhdefer. Cách này đảm bảo nội dung trang tải và hiển thị nhanh mà không bị JavaScript chặn. - Viết mã dễ đọc:Dùng tên biến và hàm rõ ràng, có tính mô tả, ví dụ
calculateTotalPricethay vìcalc. Dùng chú thích//để giải thích lý do bạn viết một đoạn mã, không cần phải mô tả nó làm gì. - Đừng lặp lại chính mình (DRY):Nếu bạn thấy mình lặp lại cùng một đoạn mã ở nhiều nơi, hãy đóng gói đoạn mã đó trong một hàm. Sau đó bạn có thể gọi hàm khi cần, giúp mã ngắn gọn và dễ cập nhật hơn.
Các vấn đề thường gặp và cách khắc phục
Khi script không hoạt động, đừng quá hoảng hốt! Công cụ Developer Tools của trình duyệt là người đồng hành tốt nhất của bạn lúc này. Nhấn F12 (hoặc nhấp chuột phải vào trang và chọn Inspect) rồi mở tab Console. Hầu hết lỗi sẽ hiển thị ở đây và được đánh dấu bằng màu đỏ.
Lỗi: “Cannot read properties of null” hoặc “is not defined”
- Nghĩa là: JavaScript cố gắng truy cập một phần tử HTML chưa được tải.
- Cách khắc phục: Thông thường nguyên nhân là thẻ
<script>nằm trong<head>hoặc nằm quá cao trong<body>. Hãy di chuyển script xuống cuối<body>và thêm thuộc tínhdefer.
Lỗi: “Uncaught SyntaxError”
- Nghĩa là: Có lỗi chính tả trong code.
- Cách khắc phục: Console thường báo số dòng bị lỗi. Kiểm tra kỹ dòng đó để tìm dấu ngoặc
(), ngoặc nhọn{}, dấu nháy"", hoặc lỗi chính tả khác.
Vấn đề: Script không chạy, không có lỗi trong Console
- Nghĩa là: Tệp HTML không tìm thấy tệp
.js. - Cách khắc phục: Kiểm tra tab Network trong Developer Tools. Nếu thấy tệp script hiển thị lỗi 404, nghĩa là đường dẫn trong thuộc tính
srcsai. Hãy kiểm tra kỹ chính tả và cấu trúc thư mục.Ví dụ:<script src="js/script.js"></script>
Vấn đề: Code chạy nhưng không hoạt động như mong đợi
- Nghĩa là: Đây là lỗi logic. Cú pháp đúng nhưng trình tự sai.
- Cách khắc phục: Sử dụng
console.log()để gỡ lỗi. Đặt lệnh này trong code để in giá trị biến ở các giai đoạn khác nhau, giúp bạn theo dõi logic và phát hiện lỗi.
let userRole = 'guest';
console.log('User role before check:', userRole); // See what the value is
if (userIsAdmin) {
userRole = 'admin';
}
Câu hỏi thường gặp (FAQs)
1. Cách tốt nhất để thêm JavaScript vào tệp HTML là gì?
Cách tốt nhất là liên kết tới tệp .js bên ngoài với thuộc tính defer, đặt thẻ script ngay trước thẻ đóng </body>.
Ví dụ: <script src="path/to/script.js" defer></script>
2. Tôi nên đặt JavaScript trong <head> hay <body>?
Hầu hết trường hợp bạn nên đặt thẻ <script> ở cuối <body>, ngay trước </body>.
- Đặt script trong
<head>sẽ chặn quá trình render, khiến người dùng nhìn thấy trang trắng cho đến khi script tải và thực thi xong. - Đặt script ở cuối
<body>cho phép trình duyệt render toàn bộ HTML và CSS trước, giúp nội dung hiển thị nhanh hơn.
3. Có thể thêm nhiều thẻ script trong một tệp HTML không?
Có. Trong một tệp HTML, bạn có thể thêm bao nhiêu thẻ <script> tùy ý. Trình duyệt sẽ tải và thực thi chúng theo thứ tự xuất hiện.
Điều này thường dùng để tải các thư viện bên thứ ba trước khi chạy script tùy chỉnh:
<body>
<script src="library.js"></script>
<script src="my-app.js"></script>
</body>
4. Sự khác nhau chính giữa async và defer là gì?
Cả hai đều tải script mà không chặn render.
defer: đảm bảo script thực thi theo thứ tự sau khi toàn bộ tài liệu được phân tích.async: thực thi ngay khi script tải xong, có thể không theo thứ tự.
5. Làm thế nào để gỡ lỗi JavaScript không hoạt động?
- Mở Developer Tools (F12)
- Kiểm tra tab Console để xem thông báo lỗi
- Dùng tab Network để xác minh xem file đã tải đúng chưa
- Thêm
console.log()để theo dõi giá trị biến trong code
Kết luận
Bài hướng dẫn này đã đề cập cách tích hợp JavaScript vào tệp web, phân tích sự khác nhau giữa viết script inline và sử dụng tệp .js bên ngoài.
Kết luận: sử dụng tệp .js bên ngoài là cách tối ưu hơn nhờ:
- Hiệu năng tốt hơn (tránh render-blocking với
defer, tận dụng bộ nhớ đệm của trình duyệt). - Dễ bảo trì mã nguồn.
Chúng ta cũng đã xem các ví dụ thực tế và hướng dẫn cách xử lý lỗi thông qua Developer Console.
Giờ đây bạn đã có đủ công cụ để xây dựng ứng dụng web hiệu quả, tương tác và chuyên nghiệp.
