Kiến thức cơ bản về JavaScript với AI

Tóm tắt nhanh: Trong bài học trước, bạn đã tùy chỉnh giao diện trang web bằng CSS — bố cục đáp ứng, code thiết kế và dark mode. Giờ hãy cùng làm cho mọi thứ tương tác hơn với JavaScript.

Thao tác DOM

DOM (Document Object Model) là cách JavaScript tương tác với HTML của bạn. Dưới đây là cách làm việc với AI cho các tác vụ DOM thông thường:

Chọn và chỉnh sửa các phần tử

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

Viết code JavaScript thuần túy để:

1. Chọn phần tử có id="hero-title" và thay đổi văn bản của nó
2. Chọn tất cả các phần tử có class="card" và thêm class "featured" vào phần tử đầu tiên
3. Tạo một phần tử đoạn văn mới, đặt nội dung văn bản của nó và nối nó vào phần tử có id="content"

Yêu cầu:
- Sử dụng document.querySelector và document.querySelectorAll (không dùng getElementById)
- Sử dụng textContent để cập nhật văn bản an toàn
- Không sử dụng thư viện bên ngoài
- Thêm chú thích giải thích từng bước

✏️ ​​Cách điền thông tin chi tiết của bạn: Thay thế mỗi [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Đầu vào mơ hồ sẽ tạo ra đầu ra mơ hồ — hãy cụ thể.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.

📌 Nên làm gì với kết quả: Lưu phản hồi vào file Notes. Hãy chọn gợi ý có tác động lớn nhất và thực hiện nó trong tuần này — đừng cố gắng làm mọi thứ cùng một lúc.

⚠️ Nếu thấy không ổn: Nếu gợi ý có vẻ chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ qua lời khuyên chung chung đi." Nếu bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với đó là ràng buộc chính."

Tạo nội dung động

Viết code JavaScript thuần túy để tạo động một danh sách các mục từ một mảng:

Dữ liệu:
const items = [
  { title: "Item 1", description: "Description 1", category: "A" },
  { title: "Item 2", description: "Description 2", category: "B" },
  // ... more items
];

Yêu cầu:
- Tạo một phần tử danh sách không thứ tự
- Đối với mỗi mục, tạo một thẻ <li> chứa tiêu đề trong thẻ <strong> và mô tả trong một đoạn văn bản
- Thêm toàn bộ danh sách vào phần tử có id="item-list"
- Sử dụng document.createElement và textContent để cập nhật DOM an toàn
- Sử dụng document fragment để cải thiện hiệu suất (chèn DOM hàng loạt)

Chỉ sử dụng JavaScript thuần túy, không có thư viện dependency.

✅ Kiểm tra nhanh: Tại sao nên sử dụng `document fragment` để tạo nhiều phần tử?

Mỗi khi bạn thêm một phần tử vào trang, trình duyệt sẽ tính toán lại bố cục. Thêm 50 mục từng cái một có nghĩa là 50 lần tính toán lại. `document fragment` là một container vô hình — bạn xây dựng mọi thứ bên trong nó, sau đó thêm một lần. Chỉ một lần tính toán lại thay vì 50 lần. AI đôi khi tạo ra phương pháp từng cái một vì nó đơn giản hơn để viết, nhưng sự khác biệt về hiệu suất rất quan trọng với các danh sách lớn hơn.

Xử lý sự kiện

Sự kiện click và ủy quyền sự kiện

Viết JavaScript thuần túy cho một phần Hỏi đáp tương tác dạng accordion:

Cấu trúc HTML:
- Nhiều mục Hỏi đáp, mỗi mục có một câu hỏi (nút) và câu trả lời (div)
- Nhấp vào một câu hỏi sẽ bật/tắt hiển thị câu trả lời tương ứng
- Chỉ mở một câu trả lời tại một thời điểm (hành vi accordion)

Yêu cầu:
- Sử dụng ủy quyền sự kiện (một trình lắng nghe duy nhất trên container cha, không phải một trình lắng nghe cho mỗi nút)
- Bật/tắt thuộc tính aria-expanded trên nút
- Bật/tắt lớp "hidden" trên div câu trả lời
- Thêm hiệu ứng chuyển đổi chiều cao mượt mà bằng cách bật/tắt lớp CSS
- Có thể truy cập bằng bàn phím (phím Enter và Space kích hoạt bật/tắt)

JavaScript thuần túy, không có thư viện dependency. Bao gồm cấu trúc HTML trong đầu ra.

Kiểm tra tính hợp lệ của biểu mẫu

Viết code kiểm tra tính hợp lệ của biểu mẫu phía client bằng JavaScript thuần túy:

Các trường biểu mẫu:
- Tên (bắt buộc, tối thiểu 2 ký tự)
- Email (bắt buộc, định dạng email hợp lệ)
- Số điện thoại (tùy chọn, nhưng nếu điền phải khớp với mẫu số điện thoại)
- Tin nhắn (bắt buộc, tối thiểu 10 ký tự, tối đa 500 ký tự)

Hành vi kiểm tra tính hợp lệ:
- Kiểm tra tính hợp lệ khi gửi biểu mẫu
- Hiển thị thông báo lỗi bên dưới mỗi trường không hợp lệ bằng cách sử dụng textContent (không bao giờ chèn HTML thô)
- Sử dụng aria-invalid và aria-describedby để hỗ trợ khả năng truy cập
- Ngăn chặn việc gửi biểu mẫu nếu bất kỳ trường nào không hợp lệ
- Xóa thông báo lỗi khi người dùng bắt đầu sửa một trường (sự kiện input)
- Hiển thị thông báo thành công khi biểu mẫu hợp lệ

JavaScript thuần túy, không có thư viện dependency.

Làm việc với Local Storage

Viết code JavaScript thuần túy cho tính năng đánh dấu trang/yêu thích đơn giản:

Hành vi:
- Mỗi thẻ có một nút hình trái tim/ngôi sao
- Nhấp vào nút sẽ bật/tắt trạng thái yêu thích của mục đó
- Các mục yêu thích được lưu vào localStorage
- Khi load trang, các mục đã được đánh dấu yêu thích trước đó sẽ được khôi phục
- Bộ lọc "Xem mục yêu thích" chỉ hiển thị các mục đã được đánh dấu yêu thích

Yêu cầu:
- Lưu trữ một mảng ID mục trong localStorage (sử dụng JSON.stringify/parse)
- Xử lý trường hợp localStorage không khả dụng (try-catch)
- Cập nhật trạng thái hiển thị của nút (đầy/viền) dựa trên trạng thái yêu thích
- Thêm thuộc tính aria-pressed vào các nút chuyển đổi

JavaScript thuần túy, không có thư viện dependency.

✅ Kiểm tra nhanh: Tại sao cần kiểm tra xem localStorage có khả dụng hay không?

Vì localStorage không được đảm bảo hoạt động. Chế độ duyệt web riêng tư/ẩn danh có thể chặn nó. Một số trình duyệt vô hiệu hóa nó khi bộ nhớ đầy. Tường lửa của công ty có thể hạn chế nó. Nếu code của bạn giả định rằng localStorage.setItem() luôn hoạt động, một lệnh gọi bị chặn sẽ làm sập toàn bộ hệ thống. Khối try-catch xung quanh các thao tác localStorage đảm bảo trang của bạn vẫn hoạt động — chỉ là nó sẽ không nhớ những mục yêu thích giữa các phiên.

Đánh giá bảo mật cho JavaScript do AI tạo ra

Luôn kiểm tra đầu ra của AI về các lỗ hổng phổ biến sau:

Xem xét JavaScript này về các vấn đề bảo mật:

[dán JavaScript của bạn]

Kiểm tra:
1. Dữ liệu người dùng chưa được xử lý được chèn vào DOM (nguy cơ XSS)
2. Các mẫu thực thi code động (nguy cơ chèn code)
3. Các tham số URL chưa được xác thực được sử dụng trong logic trang
4. Dữ liệu nhạy cảm được lưu trữ trong localStorage mà không được code hóa
5. Thiếu xử lý dữ liệu đầu vào trên dữ liệu biểu mẫu
6. Trình xử lý sự kiện có thể bị kích hoạt một cách độc hại
7. API key hoặc bí mật được code hóa cứng trong code phía client

Đối với mỗi vấn đề được tìm thấy, hãy giải thích rủi ro và cung cấp một giải pháp thay thế an toàn.

Bài tập: Thêm tính tương tác vào trang của bạn

1. Thêm phần Hỏi đáp dạng accordion vào trang của bạn bằng cách sử dụng ủy quyền sự kiện

2. Tạo một biểu mẫu với xác thực phía máy khách (ít nhất 4 trường)

3. Triển khai tính năng yêu thích với khả năng lưu trữ trong localStorage

4. Chạy prompt đánh giá bảo mật trên tất cả JavaScript của bạn

5. Kiểm tra điều hướng bằng bàn phím — bạn có thể sử dụng mọi tính năng mà không cần chuột không?

Những điểm chính cần ghi nhớ

• Luôn chỉ định "JavaScript thuần túy, không có dependency" trong prompt để nhận được code tương thích phổ biến

• Sử dụng textContent để cập nhật văn bản an toàn và làm sạch mọi nội dung HTML trước khi chèn vào DOM

• Ủy quyền sự kiện (một trình lắng nghe trên phần tử cha) hiệu quả và dễ bảo trì hơn so với các trình lắng nghe riêng lẻ trên từng phần tử

• Phân đoạn tài liệu giúp xử lý hàng loạt các thao tác chèn DOM để có hiệu suất tốt hơn với nội dung động

• Bao bọc localStorage, các lệnh gọi API và phân tích cú pháp JSON trong những khối try-catch — không bao giờ giả định các thao tác bên ngoài thành công

• Luôn chạy đánh giá bảo mật trên JavaScript do AI tạo ra, kiểm tra dữ liệu người dùng chưa được làm sạch và các secret được hardcode