Đây là bài 3 của chương 4: DOM và sự kiện, thuộc khóa demo JavaScript. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng ứng dụng danh sách công việc có tìm kiếm, lọc và lưu trạng thái trên trình duyệt.
Mục tiêu cụ thể
DOM là cây đối tượng biểu diễn tài liệu. Gắn sự kiện vào cha chung có thể xử lý các phần tử con được thêm sau này. Dữ liệu người dùng nên đưa vào textContent khi muốn hiển thị văn bản.
Đề bài thực hành
Tạo danh sách có nút hoàn thành từng mục và thêm mục mới bằng form.
Quy trình từng bước
- Xác định đầu vào, đầu ra và trạng thái trước khi bắt đầu. Với dom và sự kiện, hãy ghi lại kết quả bạn mong muốn trước khi chạy ví dụ.
- Tạo bản thử nhỏ nhất trong một thư mục hoặc môi trường riêng. Chỉ dùng dữ liệu giả; không sao chép token, tài khoản hoặc dữ liệu cá nhân vào bài tập.
- Thực hiện yêu cầu: Tạo danh sách có nút hoàn thành từng mục và thêm mục mới bằng form.
- Quan sát kết quả và so sánh từng điều kiện chấp nhận. Khi chưa đạt, thay đổi một yếu tố mỗi lần để biết thay đổi nào tạo ra tác động.
- Lưu kết quả cùng ghi chú giải thích quyết định. Người khác cần tái hiện được thao tác mà không phải đoán cấu hình hoặc dữ liệu ban đầu.
Điểm khởi đầu
const list = document.querySelector("#tasks");
list.addEventListener("click", event => {
const button = event.target.closest("button[data-id]");
if (!button || !list.contains(button)) return;
console.log(button.dataset.id);
});Đối chiếu kết quả
- Mục thêm mới nhận được sự kiện
- Mỗi click chỉ xử lý một lần
- Nội dung nhập hiển thị như văn bản
Nếu kết quả khác dự kiến
Gắn listener sau mỗi lần render mà không dọn dẹp gây chạy lặp. Chèn đầu vào người dùng bằng innerHTML có thể tạo nguy cơ thực thi mã không mong muốn.
Chụp hoặc ghi lại đầu vào và đầu ra trước khi sửa. Xác nhận tệp đã lưu, đúng môi trường đang chạy và dữ liệu thử vẫn giữ nguyên. Sau khi sửa, chạy lại cả trường hợp ban đầu lẫn một trường hợp biên để tránh sửa được một nhánh nhưng làm hỏng nhánh khác.
Sản phẩm cần lưu
- Mã nguồn hoặc sơ đồ của bản thử.
- Dữ liệu đầu vào có thể dùng lại.
- Ba kết quả kiểm tra kèm giải thích.
- Một ghi chú về điều bạn sẽ làm khác nếu triển khai cho người dùng thật.