---
title: "Cách Thêm JavaScript vào HTML cho Người Mới Bắt Đầu"
description: "Bài viết này cung cấp cái nhìn tổng quan toàn diện về cách thêm JavaScript vào các tệp HTML của bạn, chi tiết ba phương pháp chính: đặt script nội tuyến trong , nội tuyến trong và liên kết tới các tệp .js bên ngoài. Nó cũng giải thích các tác động đến hiệu suất như chặn render, bộ nhớ đệm trình duyệt và các thuộc tính hiện đại như defer và async. Hướng dẫn bao gồm các ví dụ thực tế như tạo công tắc chế độ tối và xác thực biểu mẫu, các thực hành tốt nhất để viết code sạch và xử lý lỗi phổ biến bằng bảng điều khiển dành cho nhà phát triển trình duyệt."
url: https://cloudfly.vn/cach-them-javascript-vao-html-cho-nguoi-moi-bat-dau
image: https://media.cloudfly.vn/posts/cach-thiet-lap-du-an-node-voi-typescript.png
---
# Cách Thêm JavaScript vào HTML cho Người Mới Bắt Đầu
## Những điểm chính
- Sử dụng **tệp `.js` bên ngoài** để tổ chức, bảo trì và tái sử dụng tốt hơn.
- Đặt thẻ `
```
### Phương pháp 2: Cách thêm script nội tuyến vào ``
- Đặt `
```
### Phương pháp 3: Cách làm việc với tệp JavaScript riêng biệt
- Lưu JavaScript trong tệp `.js` và liên kết qua `
```
Kiểm soát thêm:
- Dùng `defer` để tải script bất đồng bộ và thực thi sau khi phân tích DOM.
- Dùng `async` để tải bất đồng bộ và chạy ngay khi sẵn sàng (không đảm bảo thứ tự).
## Một số ví dụ thực tế là gì?
### 1. Công tắc Chế độ tối đơn giản
- Chuyển đổi lớp CSS bằng JS khi nhấn nút.
HTML:
```html
DigitalOcean
```
CSS:
```css
.dark-mode {
background-color: #222;
color: #eee;
}
```
JavaScript:
```javascript
const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
});
```
### 2. Xác thực biểu mẫu cơ bản
- Kiểm tra dữ liệu người dùng khi gửi biểu mẫu mà không tải lại trang.
HTML:
```html
```
JavaScript:
```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 = '';
}
});
```
## Những lưu ý về hiệu suất cho từng phương pháp là gì?
### Script nội tuyến trong ``
- Gây chặn lớn khi render; trì hoãn First Contentful Paint (FCP).
- Script là một phần của HTML, không có lợi thế bộ nhớ đệm.
### Script nội tuyến trong ``
- Chỉ chặn render tại vị trí script; đặt ở cuối `` sẽ tốt hơn.
- Không có lợi thế bộ nhớ đệm.
### Tệp JavaScript bên ngoài
- Tốt nhất về hiệu suất.
- Tải một lần, được bộ nhớ đệm bởi trình duyệt cho các lần truy cập kế tiếp.
- Thuộc tính `defer` tải ngầm và chạy sau khi DOM được phân tích.
- Thuộc tính `async` tải và chạy ngay khi sẵn sàng; không đảm bảo thứ tự.
## Một số thực hành tốt nhất là gì?
- Giữ JavaScript trong các tệp bên ngoài để bảo trì sạch sẽ và tận dụng bộ nhớ đệm.
- Tải script vào cuối `` với `defer` để cải thiện trải nghiệm người dùng.
- Viết code có thể đọc, chú thích rõ ràng.
- Dùng hàm để tránh lặp lại code.
## Một số vấn đề thường gặp và cách khắc phục là gì?
- "Cannot read properties of null" thường do script chạy trước khi DOM sẵn sàng; đặt script đúng vị trí.
- Lỗi cú pháp thường có số dòng trên console; kiểm tra thiếu hoặc thừa ký tự.
- Script không chạy và không lỗi console có thể do sai đường dẫn file; kiểm tra tab Network.
- Lỗi logic có thể dò bằng cách sử dụng `console.log()` để kiểm tra trạng thái biến.
## Câu hỏi thường gặp (FAQs)
1. Cách tốt nhất thêm JS: file `.js` bên ngoài với `defer` trước ``.
2. Đặt script cuối ``, không đặt trong ``.
3. Cho phép nhiều thẻ script; chạy theo thứ tự.
4. `defer` giữ thứ tự thực thi sau phân tích, `async` chạy ngay khi tải xong.
5. Dùng Developer Tools Console và tab Network, cùng `console.log()` để gỡ lỗi.
## Kết luận
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.