Cách dùng ChatGPT viết JavaScript
Bùi Tấn Lực - 105
- 03/10/2026
ChatGPT có thể hỗ trợ viết JavaScript từ những đoạn mã rất ngắn cho đến các chức năng tương tác tương đối phức tạp trên website. Tuy nhiên, để nhận được mã dễ hiểu, đúng mục đích và có thể sử dụng lâu dài, cách đặt yêu cầu quan trọng không kém bản thân đoạn mã được tạo ra.
Thay vì chỉ yêu cầu ChatGPT “viết JavaScript”, bạn nên mô tả rõ chức năng cần thực hiện, dữ liệu đầu vào, kết quả mong muốn, vị trí mã được sử dụng và những giới hạn cần tuân thủ. Cách làm này giúp giảm đáng kể tình trạng mã chạy không đúng, thừa chức năng hoặc khó tích hợp vào website hiện có.
Bài viết này hướng dẫn cách sử dụng ChatGPT để viết JavaScript theo hướng thực tế: từ việc mô tả bài toán, tạo đoạn mã đầu tiên, giải thích từng phần, sửa lỗi cho đến cải thiện mã trước khi đưa vào website.
ChatGPT có thể hỗ trợ viết JavaScript như thế nào?
JavaScript được sử dụng rộng rãi để tạo các hành vi tương tác trên website như kiểm tra biểu mẫu, xử lý nút bấm, thay đổi nội dung, mở và đóng giao diện, lọc dữ liệu, gọi API hoặc xử lý các thao tác mà HTML và CSS không thể tự thực hiện.
ChatGPT có thể hỗ trợ ở nhiều giai đoạn khác nhau của quá trình lập trình. Bạn không nhất thiết phải biết chính xác cú pháp JavaScript ngay từ đầu mới có thể sử dụng công cụ này. Điều quan trọng hơn là hiểu mình muốn website hoạt động như thế nào và diễn đạt yêu cầu đủ rõ.
- Tạo mã mới: chuyển một yêu cầu bằng ngôn ngữ tự nhiên thành đoạn JavaScript có cấu trúc rõ ràng.
- Giải thích mã: phân tích một đoạn mã có sẵn để hiểu biến, hàm, điều kiện và luồng xử lý.
- Sửa lỗi: tìm nguyên nhân khiến JavaScript không hoạt động hoặc cho kết quả không như mong đợi.
- Cải thiện mã: tổ chức lại mã để dễ đọc, dễ bảo trì và hạn chế những phần xử lý dư thừa.
- Mở rộng chức năng: bổ sung tính năng vào đoạn JavaScript hiện có mà không nhất thiết phải viết lại toàn bộ.
- Chuyển đổi cách triển khai: điều chỉnh mã để phù hợp với cấu trúc HTML, cách đặt class, id hoặc dữ liệu của website.
Điểm đáng chú ý là ChatGPT không chỉ hữu ích khi bắt đầu một dự án. Trong một website đang hoạt động, công cụ này còn có thể hỗ trợ đọc và giải thích mã cũ, tìm phần liên quan đến một chức năng cụ thể và đề xuất cách chỉnh sửa.
Tuy nhiên, mã được tạo ra vẫn cần được kiểm tra. Một đoạn JavaScript có thể đúng về mặt cú pháp nhưng không phù hợp với HTML thực tế, sử dụng sai tên phần tử, xử lý thiếu trường hợp đặc biệt hoặc tạo ra hành vi không mong muốn.
Cách mô tả yêu cầu để ChatGPT viết đúng JavaScript
Một yêu cầu càng cụ thể thì kết quả thường càng sát với nhu cầu. Nếu chỉ viết “tạo JavaScript cho nút đăng ký”, ChatGPT phải tự đoán rất nhiều thứ: nút nằm ở đâu, dữ liệu nào cần kiểm tra, thông báo hiển thị thế nào và sau khi hợp lệ thì phải làm gì.
Thay vào đó, hãy biến yêu cầu thành một bài toán có đầu vào, xử lý và đầu ra rõ ràng.
Nêu chính xác chức năng cần thực hiện
Trước tiên hãy nói website cần làm gì. Ví dụ, thay vì yêu cầu chung chung, bạn có thể mô tả rằng khi người dùng bấm nút, JavaScript cần kiểm tra một ô nhập email và hiển thị thông báo nếu dữ liệu không hợp lệ.
Cách mô tả này cung cấp cho ChatGPT một mục tiêu cụ thể hơn. Nếu có nhiều thao tác, hãy liệt kê theo thứ tự để tránh việc một bước bị bỏ sót.
Yêu cầu:
- Có một ô nhập email.
- Khi người dùng bấm nút kiểm tra, JavaScript đọc giá trị email.
- Nếu ô trống thì hiển thị thông báo yêu cầu nhập email.
- Nếu email không đúng định dạng cơ bản thì hiển thị thông báo lỗi.
- Nếu hợp lệ thì hiển thị thông báo thành công.
- Không tải lại trang.
- Sử dụng JavaScript thuần, không dùng thư viện bên ngoài.
Đây là kiểu yêu cầu tốt hơn nhiều so với câu “viết JavaScript kiểm tra email” vì các điều kiện quan trọng đã được xác định ngay từ đầu.
Cung cấp HTML hiện có khi cần tích hợp vào website
Nếu JavaScript được viết để hoạt động cùng một giao diện có sẵn, nên cung cấp phần HTML liên quan. Đây là một trong những cách hiệu quả nhất để hạn chế việc ChatGPT tự đặt tên id hoặc class không tồn tại.
<div class="contact-form">
<input type="email" id="email" placeholder="Nhập email">
<button id="checkEmail" type="button">Kiểm tra</button>
<p id="message"></p>
</div>
Sau đó có thể yêu cầu ChatGPT viết JavaScript dựa trực tiếp trên cấu trúc này. Khi đó, mã có thể sử dụng đúng email, checkEmail và message thay vì tự nghĩ ra các tên khác.
Điều này đặc biệt quan trọng khi bạn đang chỉnh sửa website có sẵn. Chỉ cần JavaScript gọi đến một id không tồn tại, chức năng có thể không hoạt động dù bản thân cú pháp của mã hoàn toàn hợp lệ.
Nói rõ môi trường sử dụng
JavaScript có thể được sử dụng trong nhiều môi trường khác nhau. Một đoạn mã dành cho trình duyệt không nhất thiết phù hợp với Node.js, và mã viết cho một thư viện hoặc framework cũng có thể có cách triển khai khác với JavaScript thuần.
Vì vậy, hãy cho ChatGPT biết môi trường nếu điều này ảnh hưởng đến cách viết mã.
- JavaScript chạy trực tiếp trên trình duyệt.
- JavaScript thuần, không sử dụng thư viện.
- JavaScript kết hợp với HTML và CSS hiện có.
- Node.js chạy phía máy chủ.
- Một framework hoặc thư viện JavaScript cụ thể.
- Mã cần tương thích với cấu trúc website hiện tại.
Ví dụ, nếu mục tiêu là tạo một chức năng đơn giản cho website giới thiệu doanh nghiệp, bạn có thể yêu cầu JavaScript thuần chạy trên trình duyệt và không sử dụng thư viện bên ngoài. Điều này giúp kết quả gọn hơn và dễ đưa vào website.
Đặt ra giới hạn ngay trong yêu cầu
Nếu có những điều bạn không muốn ChatGPT thực hiện, hãy nói ngay từ đầu. Đây là cách kiểm soát kết quả hiệu quả hơn việc nhận mã rồi mới yêu cầu sửa lại.
Hãy viết JavaScript thuần cho trình duyệt.
Không sử dụng jQuery hoặc thư viện bên ngoài.
Không thay đổi HTML hiện có.
Không thay đổi tên class và id.
Tách phần xử lý thành các hàm dễ đọc.
Có kiểm tra trường hợp dữ liệu rỗng.
Giải thích ngắn gọn cách mã hoạt động sau phần code.
Những ràng buộc như vậy giúp ChatGPT hiểu phạm vi công việc. Nếu website đang sử dụng cấu trúc ổn định, việc yêu cầu không thay đổi HTML hoặc tên class, id cũng giúp hạn chế ảnh hưởng đến CSS và các đoạn mã khác.
Quy trình dùng ChatGPT để tạo một đoạn JavaScript
Thay vì yêu cầu ChatGPT tạo ngay một đoạn mã lớn, bạn có thể chia quá trình thành nhiều bước. Cách này đặc biệt hữu ích khi chức năng có nhiều điều kiện hoặc cần tích hợp vào website đang hoạt động.
Bước 1: Mô tả hành vi mong muốn
Hãy bắt đầu bằng việc mô tả hành vi của người dùng thay vì tập trung ngay vào cú pháp. Ví dụ: người dùng nhập số lượng sản phẩm, bấm nút và website phải tính tổng tiền.
Ở bước này chưa cần yêu cầu mã quá phức tạp. Mục tiêu là để ChatGPT hiểu chính xác bài toán.
Bước 2: Xác định dữ liệu đầu vào và đầu ra
Sau khi xác định hành vi, hãy nói rõ JavaScript nhận dữ liệu từ đâu và kết quả phải xuất hiện ở đâu.
- Giá trị được lấy từ ô input nào.
- Dữ liệu có thể là số, chuỗi, ngày tháng hoặc giá trị khác.
- Có trường hợp dữ liệu bị bỏ trống hay không.
- Kết quả được hiển thị trong phần tử nào.
- Có cần định dạng kết quả trước khi hiển thị hay không.
Ví dụ, nếu cần tính tổng tiền, hãy cho biết giá sản phẩm và số lượng được lấy từ đâu, sau đó kết quả hiển thị ở phần tử nào. Khi thông tin này rõ ràng, ChatGPT có thể tạo mã sát với giao diện thực tế hơn.
Bước 3: Yêu cầu tạo phiên bản đầu tiên
Đến đây bạn có thể yêu cầu ChatGPT viết mã. Không nên cố yêu cầu tất cả mọi thứ trong một câu nếu chức năng quá lớn. Một phiên bản đầu tiên đơn giản sẽ dễ kiểm tra hơn.
Hãy viết phiên bản JavaScript đầu tiên dựa trên yêu cầu trên.
Ưu tiên mã dễ đọc, không tối ưu quá mức.
Không sử dụng thư viện bên ngoài.
Sau phần code, giải thích vai trò của từng hàm và cách dữ liệu được xử lý.
Cách tiếp cận này tạo ra một vòng lặp làm việc rõ ràng: yêu cầu → mã ban đầu → kiểm tra → sửa → hoàn thiện. Nó thường hiệu quả hơn việc cố tạo một đoạn mã rất dài ngay từ lần đầu tiên.
Bước 4: Yêu cầu giải thích phần khó hiểu
Nếu chưa hiểu đoạn mã, đừng chỉ sao chép và sử dụng. Hãy yêu cầu ChatGPT giải thích phần bạn chưa rõ.
Giải thích đoạn JavaScript trên theo cách dành cho người mới học.
Tập trung vào:
- biến nào lưu dữ liệu;
- hàm nào xử lý chính;
- sự kiện nào kích hoạt mã;
- điều kiện nào quyết định kết quả;
- dữ liệu được đưa lên giao diện ở đâu.
Việc yêu cầu giải thích theo từng thành phần giúp bạn hiểu mối quan hệ giữa HTML và JavaScript. Đây cũng là cách tốt để phát hiện những phần mã mà bạn không thực sự cần.
Ví dụ thực tế: dùng ChatGPT tạo chức năng kiểm tra dữ liệu
Giả sử một website có ô nhập tên người dùng và nút xác nhận. Khi người dùng bấm nút, website cần kiểm tra ô nhập có dữ liệu hay chưa. Nếu bỏ trống, thông báo lỗi sẽ xuất hiện; nếu đã nhập, website hiển thị thông báo xác nhận.
HTML có thể được chuẩn bị như sau:
<div>
<input type="text" id="username" placeholder="Nhập tên">
<button id="submitButton" type="button">Xác nhận</button>
<p id="result"></p>
</div>
Thay vì yêu cầu ChatGPT viết mã một cách chung chung, hãy đưa cấu trúc HTML này cùng yêu cầu cụ thể:
Hãy viết JavaScript thuần cho HTML tôi cung cấp.
Khi người dùng bấm submitButton:
- lấy giá trị từ username;
- loại bỏ khoảng trắng ở đầu và cuối;
- nếu không có nội dung thì hiển thị "Vui lòng nhập tên";
- nếu có nội dung thì hiển thị "Đã nhận: [tên]";
- kết quả hiển thị trong result;
- không tải lại trang;
- không dùng thư viện bên ngoài.
Với yêu cầu như vậy, ChatGPT có đủ thông tin để xây dựng đoạn mã phù hợp với cấu trúc giao diện.
Một phiên bản JavaScript đơn giản có thể được viết như sau:
const username = document.getElementById('username');
const submitButton = document.getElementById('submitButton');
const result = document.getElementById('result');
submitButton.addEventListener('click', function () {
const name = username.value.trim();
if (name === '') {
result.textContent = 'Vui lòng nhập tên';
return;
}
result.textContent = `Đã nhận: ${name}`;
});
Điểm quan trọng trong ví dụ này không nằm ở việc sao chép nguyên đoạn mã, mà ở quy trình tạo mã. HTML cung cấp cấu trúc, yêu cầu xác định hành vi và JavaScript kết nối hai phần lại với nhau.
Đọc đoạn mã được tạo thay vì chỉ sao chép
Dòng đầu tiên lấy phần tử chứa tên người dùng. Dòng tiếp theo lấy nút xác nhận và dòng thứ ba lấy nơi hiển thị kết quả.
Phương thức addEventListener được dùng để lắng nghe sự kiện khi người dùng bấm nút. Sau đó, mã lấy giá trị từ ô nhập và sử dụng trim() để loại bỏ khoảng trắng ở đầu và cuối.
Điều kiện if kiểm tra xem chuỗi sau khi xử lý có rỗng hay không. Nếu rỗng, mã hiển thị thông báo và dừng xử lý bằng return. Nếu có dữ liệu, kết quả được đưa vào phần tử result.
Khi hiểu được từng bước như vậy, bạn sẽ dễ dàng yêu cầu ChatGPT thay đổi chức năng, chẳng hạn giới hạn độ dài tên, kiểm tra ký tự đặc biệt hoặc thực hiện thêm một hành động sau khi dữ liệu hợp lệ.
Cách yêu cầu ChatGPT sửa JavaScript khi mã không chạy
Khi JavaScript không hoạt động, không nên chỉ gửi một câu như “sửa giúp tôi”. ChatGPT cần biết mã hiện tại, lỗi xảy ra ở đâu và kết quả thực tế khác với kết quả mong muốn như thế nào.
Một yêu cầu sửa lỗi tốt nên có ít nhất ba phần: mã đang sử dụng, hiện tượng xảy ra và hành vi mong muốn.
Đây là JavaScript hiện tại của tôi:
[đặt mã JavaScript tại đây]
Hiện tượng:
- Bấm nút nhưng không có phản hồi.
- Không thấy thông báo lỗi trên giao diện.
Mong muốn:
- Khi bấm nút, JavaScript phải đọc dữ liệu từ input.
- Nếu dữ liệu trống thì hiển thị thông báo.
- Nếu có dữ liệu thì hiển thị kết quả.
Hãy:
1. tìm nguyên nhân có thể khiến mã không hoạt động;
2. chỉ ra dòng hoặc phần có vấn đề;
3. đưa ra phiên bản đã sửa;
4. giải thích vì sao bản sửa hoạt động.
Yêu cầu theo cách này giúp quá trình sửa lỗi có cơ sở hơn. Thay vì nhận một đoạn mã mới hoàn toàn, bạn có thể biết nguyên nhân nằm ở bộ chọn phần tử, sự kiện, dữ liệu đầu vào hay logic xử lý.
Nếu trình duyệt hiển thị lỗi trong công cụ dành cho nhà phát triển, hãy gửi nguyên văn thông báo lỗi cho ChatGPT. Thông tin này thường rất hữu ích để xác định vị trí và loại lỗi.
Cách cung cấp thông tin lỗi để ChatGPT tìm nguyên nhân chính xác
Khi JavaScript gặp lỗi, thông tin bạn cung cấp cho ChatGPT quyết định rất lớn đến chất lượng của quá trình phân tích. Một thông báo như “code không chạy” thường chưa đủ để xác định nguyên nhân vì cùng một hiện tượng có thể xuất phát từ nhiều vấn đề khác nhau.
Nếu trình duyệt đã ghi nhận lỗi, hãy sao chép thông báo lỗi cùng phần mã liên quan. Nếu lỗi xuất hiện sau một thao tác cụ thể, hãy mô tả chính xác thao tác đó.
- Trang web có tải bình thường hay không.
- Lỗi xuất hiện ngay khi mở trang hay chỉ sau khi bấm nút.
- Chức năng nào đang không hoạt động.
- Kết quả thực tế là gì.
- Kết quả mong muốn là gì.
- Có thông báo lỗi nào trong công cụ dành cho nhà phát triển hay không.
- HTML liên quan đến đoạn JavaScript có thay đổi gần đây hay không.
Ví dụ, thay vì viết “JavaScript của tôi bị lỗi”, hãy mô tả rằng nút vẫn hiển thị nhưng khi bấm vào không có phản hồi và trình duyệt báo một lỗi liên quan đến việc không tìm thấy phần tử. Thông tin này giúp việc phân tích đi đúng hướng hơn.
Gửi cả HTML khi lỗi liên quan đến phần tử giao diện
JavaScript trên website thường tương tác trực tiếp với HTML. Vì vậy, nếu lỗi nằm ở việc lấy phần tử, xử lý sự kiện hoặc cập nhật nội dung, chỉ gửi JavaScript có thể khiến ChatGPT thiếu dữ liệu cần thiết.
Hãy gửi phần HTML liên quan cùng mã JavaScript. Nếu trang quá dài, chỉ cần lấy khu vực chứa các phần tử mà JavaScript đang thao tác.
<input id="emailInput" type="email">
<button id="sendButton" type="button">Gửi</button>
<p id="notice"></p>
Sau đó cung cấp đoạn JavaScript đang sử dụng. ChatGPT có thể đối chiếu tên id, kiểu phần tử và sự kiện giữa hai phần để tìm sự không khớp.
Dùng ChatGPT để cải thiện JavaScript đã có
Không phải lúc nào cũng cần tạo lại mã từ đầu. Nếu website đã có một đoạn JavaScript hoạt động nhưng khó đọc, dài hoặc có nhiều phần lặp lại, bạn có thể yêu cầu ChatGPT phân tích và cải thiện trực tiếp.
Trước tiên, nên yêu cầu công cụ giải thích mã hiện tại. Sau đó mới yêu cầu chỉnh sửa. Cách làm này giúp tránh việc vô tình loại bỏ một chức năng mà bạn vẫn đang cần.
Đây là JavaScript hiện tại của tôi.
Hãy phân tích mã trước, chưa viết lại.
Cho biết:
- mã đang thực hiện những chức năng nào;
- dữ liệu đi qua các bước nào;
- phần nào đang bị lặp;
- phần nào khó bảo trì;
- có đoạn nào có thể gây lỗi trong trường hợp dữ liệu không hợp lệ.
Sau khi phân tích, đề xuất cách cải thiện nhưng giữ nguyên hành vi hiện tại.
Sau khi đã hiểu cấu trúc cũ, bạn có thể yêu cầu viết lại từng phần. Đây là phương pháp phù hợp với website đang vận hành vì giảm nguy cơ thay đổi hành vi ngoài ý muốn.
Yêu cầu tối ưu nhưng không làm thay đổi chức năng
Từ “tối ưu” có thể được hiểu theo nhiều cách. Nếu không nói rõ, ChatGPT có thể thay đổi cấu trúc hoặc cách xử lý nhiều hơn mức bạn mong muốn.
Hãy xác định giới hạn của việc tối ưu, chẳng hạn giữ nguyên HTML, giữ nguyên tên biến quan trọng, không thay đổi kết quả và chỉ giảm phần mã lặp.
Hãy tối ưu đoạn JavaScript này nhưng giữ nguyên chức năng.
Không thay đổi cấu trúc HTML.
Không đổi tên id và class đang được sử dụng.
Không thêm thư viện.
Ưu tiên giảm mã lặp và làm cho logic dễ đọc hơn.
Sau khi sửa, giải thích từng thay đổi quan trọng.
Cách yêu cầu này giúp phân biệt giữa việc cải thiện mã và viết lại chức năng. Hai việc này không giống nhau và cần được kiểm soát riêng.
Dùng ChatGPT viết JavaScript xử lý biểu mẫu
Biểu mẫu là một trong những tình huống JavaScript thường được sử dụng nhất. JavaScript có thể kiểm tra dữ liệu trước khi gửi, hiển thị thông báo, ngăn biểu mẫu gửi khi dữ liệu chưa hợp lệ hoặc thực hiện xử lý bổ sung.
Khi yêu cầu ChatGPT viết chức năng cho biểu mẫu, nên liệt kê từng trường và quy tắc kiểm tra thay vì chỉ yêu cầu “validate form”.
Hãy viết JavaScript kiểm tra biểu mẫu đăng ký gồm:
- họ tên: bắt buộc, tối thiểu 2 ký tự;
- email: bắt buộc và phải có định dạng email cơ bản;
- mật khẩu: bắt buộc, tối thiểu 8 ký tự;
- xác nhận mật khẩu: phải giống mật khẩu;
- nếu có lỗi, hiển thị thông báo gần trường tương ứng;
- nếu hợp lệ, không hiển thị lỗi;
- không sử dụng thư viện bên ngoài.
Với yêu cầu chi tiết như vậy, ChatGPT có thể xây dựng logic theo từng trường thay vì tự đoán quy tắc kiểm tra.
Phân biệt kiểm tra dữ liệu phía trình duyệt và phía máy chủ
Đây là điểm cần đặc biệt lưu ý khi sử dụng ChatGPT viết JavaScript cho biểu mẫu. Việc kiểm tra bằng JavaScript ở trình duyệt giúp người dùng nhận phản hồi nhanh, nhưng không nên xem đó là lớp bảo vệ duy nhất cho dữ liệu gửi lên máy chủ.
Ví dụ, một biểu mẫu yêu cầu email hợp lệ có thể được JavaScript kiểm tra trước khi gửi. Tuy nhiên, khi dữ liệu đến máy chủ, hệ thống phía máy chủ vẫn cần kiểm tra lại. Người dùng có thể vô hiệu hóa JavaScript hoặc gửi yêu cầu trực tiếp mà không đi qua giao diện.
Vì vậy, nếu ChatGPT tạo JavaScript kiểm tra biểu mẫu, bạn nên yêu cầu công cụ phân biệt rõ phần kiểm tra giao diện và phần xác thực dữ liệu phía máy chủ.
Cách dùng ChatGPT xử lý sự kiện trong JavaScript
Sự kiện là nền tảng của nhiều chức năng tương tác trên website. Người dùng có thể nhấp chuột, nhập dữ liệu, gửi biểu mẫu, di chuyển chuột hoặc thực hiện nhiều thao tác khác. JavaScript phản ứng với những sự kiện này để thay đổi giao diện hoặc thực hiện xử lý.
Khi nhờ ChatGPT viết mã sự kiện, hãy mô tả rõ hành động của người dùng và phản ứng mong muốn của website.
Hãy viết JavaScript:
- khi người dùng bấm vào nút menu thì mở menu;
- nếu menu đang mở thì bấm lần nữa để đóng;
- không tải lại trang;
- cập nhật trạng thái để giao diện biết menu đang mở hay đóng;
- mã phải dễ đọc và không dùng thư viện.
Cách mô tả này giúp ChatGPT hiểu rằng đây không chỉ là một thao tác “click”, mà còn có trạng thái cần được quản lý.
Yêu cầu ChatGPT giải thích luồng sự kiện
Nếu bạn đang học JavaScript, hãy yêu cầu ChatGPT mô tả luồng xử lý sau khi người dùng thực hiện thao tác. Điều này giúp bạn hiểu tại sao một đoạn mã hoạt động thay vì chỉ biết rằng nó hoạt động.
Chẳng hạn, có thể yêu cầu giải thích theo chuỗi: người dùng bấm nút → sự kiện được kích hoạt → JavaScript đọc trạng thái → điều kiện được kiểm tra → giao diện được cập nhật.
Cách học theo luồng đặc biệt hữu ích với những đoạn mã có nhiều sự kiện liên tiếp hoặc có nhiều điều kiện.
Dùng ChatGPT để xử lý dữ liệu trong JavaScript
JavaScript thường phải làm việc với chuỗi, số, mảng và đối tượng. Khi yêu cầu ChatGPT xử lý dữ liệu, hãy đưa ra mẫu dữ liệu thực tế và kết quả mong muốn.
Ví dụ, nếu có danh sách sản phẩm và muốn lọc những sản phẩm còn hàng, hãy cung cấp cấu trúc dữ liệu thay vì chỉ nói “lọc sản phẩm”.
const products = [
{ name: 'Sản phẩm A', price: 150000, stock: 5 },
{ name: 'Sản phẩm B', price: 220000, stock: 0 },
{ name: 'Sản phẩm C', price: 180000, stock: 3 }
];
Sau đó mô tả kết quả mong muốn: chỉ lấy những sản phẩm có số lượng lớn hơn 0, giữ nguyên các thuộc tính hiện có và trả về một mảng mới.
Khi có dữ liệu mẫu, ChatGPT dễ hiểu kiểu dữ liệu hơn và có thể tạo mã sát với trường hợp thực tế.
Yêu cầu xử lý cả trường hợp dữ liệu bất thường
Một đoạn mã chỉ xử lý dữ liệu hoàn hảo thường chưa đủ để sử dụng thực tế. Người dùng có thể nhập chuỗi rỗng, giá trị không phải số, dữ liệu bị thiếu hoặc một danh sách không có phần tử.
Hãy yêu cầu ChatGPT liệt kê những trường hợp bất thường trước khi viết mã.
Trước khi viết JavaScript, hãy xác định các trường hợp dữ liệu có thể không hợp lệ.
Sau đó viết mã có xử lý:
- dữ liệu rỗng;
- dữ liệu không đúng kiểu;
- thuộc tính bị thiếu;
- mảng không có phần tử;
- giá trị số nhỏ hơn hoặc bằng 0.
Đây là một bước đơn giản nhưng giúp đoạn mã có khả năng chịu được nhiều tình huống thực tế hơn.
Cách yêu cầu ChatGPT viết JavaScript dễ bảo trì
Một đoạn mã ngắn chưa chắc là đoạn mã tốt. Khi website phát triển, JavaScript cần được sửa đổi nhiều lần. Nếu toàn bộ logic nằm trong một hàm dài hoặc có nhiều đoạn lặp, việc bảo trì sẽ khó hơn.
Ngay từ đầu, bạn có thể yêu cầu ChatGPT chia logic thành những phần có trách nhiệm rõ ràng.
- Mỗi hàm nên đảm nhận một nhiệm vụ chính.
- Tên biến và tên hàm nên thể hiện đúng mục đích.
- Hạn chế lặp lại cùng một đoạn xử lý.
- Không tạo biến hoặc hàm không được sử dụng.
- Tách phần xử lý dữ liệu khỏi phần cập nhật giao diện khi phù hợp.
- Chỉ thêm chú thích ở những phần thực sự cần giải thích.
Ví dụ, thay vì yêu cầu “viết một hàm thật ngắn”, hãy yêu cầu mã dễ đọc và dễ mở rộng. Trong dự án thực tế, khả năng bảo trì thường quan trọng hơn việc giảm vài dòng mã.
Yêu cầu ChatGPT đặt tên rõ ràng
Tên biến như a, b hoặc x có thể khiến đoạn mã khó hiểu khi dự án lớn hơn. Bạn có thể yêu cầu ChatGPT sử dụng tên thể hiện dữ liệu đang được lưu trữ.
Hãy viết lại đoạn JavaScript với tên biến và tên hàm mô tả đúng mục đích.
Không dùng các tên chung chung như a, b, x, data1 nếu có thể đặt tên cụ thể hơn.
Giữ nguyên chức năng và không thay đổi HTML.
Đây là một yêu cầu nhỏ nhưng có tác động rõ rệt đến khả năng đọc mã, đặc biệt khi vài tháng sau bạn quay lại chỉnh sửa chức năng cũ.
Kiểm thử JavaScript do ChatGPT tạo trước khi sử dụng
Không nên đưa ngay đoạn JavaScript do ChatGPT tạo lên website chính chỉ vì mã không báo lỗi cú pháp. Một đoạn mã có thể chạy được nhưng vẫn xử lý sai dữ liệu, không hoạt động trên một số trường hợp hoặc gây ảnh hưởng đến chức năng khác.
Hãy kiểm thử theo đúng những thao tác mà người dùng thực tế sẽ thực hiện. Với mỗi chức năng, nên có ít nhất một trường hợp hoạt động bình thường và một số trường hợp bất thường.
- Kiểm tra khi dữ liệu hợp lệ.
- Kiểm tra khi người dùng bỏ trống dữ liệu.
- Kiểm tra dữ liệu có định dạng sai.
- Kiểm tra giá trị rất nhỏ và rất lớn nếu chức năng có xử lý số.
- Kiểm tra khi người dùng thực hiện thao tác nhiều lần.
- Kiểm tra khi phần tử cần xử lý không tồn tại.
- Kiểm tra khi JavaScript được tải cùng với các đoạn mã khác.
Nếu phát hiện vấn đề, hãy quay lại ChatGPT với trường hợp kiểm thử cụ thể. Ví dụ, thay vì nói “vẫn lỗi”, hãy mô tả dữ liệu đầu vào, thao tác đã thực hiện và kết quả thực tế. Điều này giúp quá trình sửa mã có mục tiêu rõ ràng.
Yêu cầu ChatGPT tự xây dựng danh sách trường hợp kiểm thử
Với những chức năng phức tạp, bạn có thể yêu cầu ChatGPT đóng vai trò hỗ trợ kiểm thử thay vì chỉ viết mã.
Dựa trên đoạn JavaScript này, hãy lập danh sách các trường hợp cần kiểm thử.
Với mỗi trường hợp, ghi rõ:
- dữ liệu đầu vào;
- thao tác người dùng;
- kết quả mong đợi;
- tình huống lỗi có thể xảy ra.
Ưu tiên những trường hợp dễ bị bỏ sót.
Cách làm này giúp bạn nhìn đoạn mã từ góc độ người sử dụng. Nhiều lỗi không xuất hiện trong trường hợp thông thường mà chỉ xảy ra khi người dùng nhập dữ liệu bất thường hoặc thực hiện thao tác ngoài dự kiến.
Kiểm tra mã JavaScript có ảnh hưởng đến website hay không
Một website có thể chứa nhiều đoạn JavaScript cùng lúc. Một chức năng mới nếu sử dụng tên biến, id, class hoặc sự kiện quá chung chung có thể vô tình ảnh hưởng đến phần khác của trang.
Khi đưa mã vào website đang hoạt động, hãy cho ChatGPT biết rằng đây là mã được thêm vào một hệ thống đã có sẵn. Bạn có thể yêu cầu công cụ tìm những khả năng xung đột trước khi chỉnh sửa.
Tôi muốn thêm đoạn JavaScript này vào website hiện có.
Hãy kiểm tra những khả năng có thể gây xung đột với mã khác.
Đặc biệt kiểm tra:
- tên biến;
- tên hàm;
- id và class;
- event listener;
- biến toàn cục;
- cách chọn phần tử DOM.
Không thay đổi mã nếu chưa giải thích nguyên nhân cần thay đổi.
Yêu cầu này đặc biệt hữu ích khi bạn đang chỉnh sửa một website có nhiều chức năng được phát triển ở các thời điểm khác nhau.
Hạn chế biến và hàm dùng phạm vi toàn cục
Trong JavaScript, việc tạo quá nhiều biến và hàm ở phạm vi toàn cục có thể khiến mã khó quản lý và tăng nguy cơ trùng tên. Khi yêu cầu ChatGPT viết chức năng mới, bạn có thể yêu cầu hạn chế phạm vi của những thành phần chỉ được sử dụng trong chức năng đó.
Điều này không có nghĩa mọi đoạn mã đều phải được tổ chức theo một cấu trúc phức tạp. Với chức năng nhỏ, cấu trúc đơn giản vẫn có thể phù hợp. Mục tiêu là tránh tạo ra phạm vi sử dụng rộng hơn mức cần thiết.
Dùng ChatGPT kiểm tra vấn đề bảo mật trong JavaScript
JavaScript chạy ở phía trình duyệt nên những dữ liệu đưa vào mã phía người dùng không thể được xem là bí mật tuyệt đối. Đây là điều cần nhớ khi sử dụng ChatGPT để xây dựng các chức năng liên quan đến tài khoản, thanh toán, quyền truy cập hoặc dữ liệu quan trọng.
Không nên yêu cầu ChatGPT đưa khóa bí mật, mật khẩu, token riêng tư hoặc thông tin xác thực nhạy cảm trực tiếp vào JavaScript chạy trên trình duyệt.
Nếu website cần gọi một dịch vụ bên ngoài có thông tin xác thực, hãy xác định rõ phần nào được phép xuất hiện ở trình duyệt và phần nào phải được xử lý ở máy chủ.
Kiểm tra dữ liệu do người dùng nhập
Một lỗi phổ biến khi xây dựng chức năng tương tác là xem dữ liệu nhập từ người dùng như dữ liệu đáng tin cậy. Nếu JavaScript lấy nội dung người dùng nhập và đưa trực tiếp vào giao diện, cần xem xét cách dữ liệu đó được chèn vào trang.
Trong nhiều trường hợp chỉ cần hiển thị văn bản, phương thức textContent phù hợp hơn việc đưa dữ liệu trực tiếp vào HTML. Khi có yêu cầu tạo mã xử lý nội dung do người dùng nhập, bạn có thể yêu cầu ChatGPT phân tích nguy cơ chèn nội dung không an toàn.
Hãy kiểm tra đoạn JavaScript này về vấn đề bảo mật.
Tập trung vào dữ liệu do người dùng nhập và cách dữ liệu được đưa lên giao diện.
Cho biết phần nào có nguy cơ không an toàn và đề xuất cách xử lý phù hợp.
Không chỉ sửa mã, hãy giải thích nguyên nhân của từng thay đổi.
Đối với những chức năng liên quan đến xác thực tài khoản, quyền truy cập hoặc dữ liệu quan trọng, JavaScript phía trình duyệt không nên được xem là lớp bảo vệ duy nhất. Các quy tắc bảo mật quan trọng vẫn cần được thực hiện ở phía máy chủ.
Cách yêu cầu ChatGPT tối ưu tốc độ JavaScript
Khi website có nhiều thao tác DOM, sự kiện hoặc xử lý dữ liệu, hiệu suất có thể trở thành vấn đề. Tuy nhiên, không nên tối ưu chỉ vì muốn mã ngắn hơn. Trước tiên cần xác định phần nào thực sự gây tốn tài nguyên.
Bạn có thể cung cấp đoạn mã và yêu cầu ChatGPT phân tích những điểm có khả năng gây ảnh hưởng đến hiệu suất.
Hãy phân tích hiệu suất của đoạn JavaScript này.
Không thay đổi chức năng.
Hãy tìm:
- thao tác DOM lặp lại;
- vòng lặp không cần thiết;
- sự kiện có thể bị gọi quá nhiều;
- phần xử lý có thể thực hiện ít lần hơn;
- đoạn mã chỉ nên chạy khi thực sự cần.
Sau đó đề xuất cách cải thiện và giải thích tác động của từng thay đổi.
Cách tiếp cận này tốt hơn việc yêu cầu “tối ưu tốc độ” một cách chung chung vì ChatGPT phải tập trung vào những điểm có khả năng ảnh hưởng thực tế.
Không tối ưu quá sớm
Với một chức năng nhỏ, việc cố giảm từng dòng mã có thể khiến mã khó đọc hơn mà lợi ích về tốc độ gần như không đáng kể. Vì vậy, nên ưu tiên mã đúng, dễ hiểu và dễ kiểm thử trước khi tối ưu những phần chưa chứng minh là có vấn đề.
Nếu website thực sự gặp vấn đề về hiệu suất, hãy cung cấp thông tin về tình huống xảy ra, số lượng dữ liệu hoặc thao tác đang được thực hiện. ChatGPT khi đó có thêm cơ sở để đưa ra hướng phân tích phù hợp.
Cách dùng ChatGPT mở rộng một chức năng JavaScript có sẵn
Một trong những cách sử dụng thực tế nhất là đưa chức năng hiện tại cho ChatGPT rồi yêu cầu bổ sung một hành vi mới. Cách này phù hợp khi website đã có mã hoạt động ổn định và bạn không muốn viết lại từ đầu.
Ví dụ, một nút hiện đã mở hộp thoại và bạn muốn bổ sung khả năng đóng hộp thoại khi người dùng bấm ra bên ngoài. Thay vì yêu cầu tạo lại toàn bộ chức năng, hãy cung cấp mã hiện tại và mô tả chính xác phần cần bổ sung.
Đây là JavaScript hiện tại và nó đang hoạt động đúng.
Tôi chỉ muốn bổ sung chức năng:
- khi hộp thoại đang mở;
- nếu người dùng bấm ra vùng bên ngoài hộp thoại thì đóng;
- không làm thay đổi hành vi hiện tại;
- không viết lại những phần không liên quan.
Hãy chỉ ra vị trí cần thêm mã và giải thích cách phần mới kết hợp với mã hiện tại.
Yêu cầu theo phạm vi nhỏ giúp hạn chế việc ChatGPT tự ý thay đổi những phần đang hoạt động tốt.
Yêu cầu đưa ra phần thay đổi thay vì toàn bộ mã
Nếu đoạn mã ban đầu rất dài, bạn có thể yêu cầu ChatGPT chỉ đưa ra phần cần thêm hoặc phần cần thay thế. Điều này giúp dễ đối chiếu sự khác biệt và giảm nguy cơ sao chép nhầm một phần mã cũ.
Tuy nhiên, với những thay đổi lớn, nên yêu cầu ChatGPT cung cấp cả phiên bản hoàn chỉnh sau khi đã giải thích phần thay đổi. Điều này giúp bạn có một bản thống nhất để kiểm tra.
Cách học JavaScript thông qua việc sử dụng ChatGPT
ChatGPT có thể được dùng như một công cụ hỗ trợ học JavaScript, nhưng hiệu quả sẽ cao hơn nếu bạn không chỉ yêu cầu công cụ đưa ra đáp án.
Một cách học tốt là tự viết cách giải quyết trước, sau đó nhờ ChatGPT kiểm tra. Khi đó, bạn có thể so sánh cách suy nghĩ của mình với một cách triển khai khác thay vì phụ thuộc hoàn toàn vào mã được tạo sẵn.
Tôi đang học JavaScript và muốn tự giải bài toán này trước.
Đây là cách tôi dự định xử lý:
[đặt cách giải quyết của bạn tại đây]
Hãy chưa viết lại toàn bộ mã.
Trước tiên hãy đánh giá:
- logic của tôi có đúng không;
- trường hợp nào tôi đang bỏ sót;
- có lỗi tư duy nào cần sửa;
- phần nào có thể đơn giản hơn.
Sau đó mới đưa ra cách triển khai tham khảo.
Cách học này giúp ChatGPT đóng vai trò người hỗ trợ kiểm tra thay vì biến việc lập trình thành quá trình sao chép mã.
Yêu cầu giải thích theo mức độ kiến thức
Nếu mới học JavaScript, hãy nói rõ điều đó để phần giải thích phù hợp với trình độ. Bạn cũng có thể yêu cầu giải thích một khái niệm bằng ví dụ nhỏ trước khi áp dụng vào dự án thực tế.
Chẳng hạn, trước khi dùng map(), filter() hoặc reduce() trong một đoạn mã xử lý dữ liệu lớn, hãy yêu cầu ChatGPT giải thích từng phương thức bằng một ví dụ ngắn. Sau khi hiểu nguyên lý, bạn mới áp dụng chúng vào mã thực tế.
Những lỗi nên tránh khi nhờ ChatGPT viết JavaScript
Sử dụng ChatGPT để lập trình nhanh hơn không có nghĩa là có thể bỏ qua bước kiểm tra. Một số cách sử dụng dễ khiến kết quả kém chính xác hoặc khó bảo trì.
- Yêu cầu quá chung chung: không cung cấp cấu trúc HTML, dữ liệu đầu vào hoặc hành vi mong muốn.
- Sao chép mã mà không đọc: mã có thể chứa logic không phù hợp với website thực tế.
- Đưa toàn bộ dự án vào một yêu cầu: lượng thông tin quá lớn có thể khiến việc xác định vấn đề trở nên khó khăn.
- Không cung cấp lỗi thực tế: chỉ nói rằng mã không chạy khiến quá trình tìm nguyên nhân thiếu dữ liệu.
- Cho phép thay đổi quá nhiều: một yêu cầu sửa lỗi nhưng lại để công cụ tự do viết lại toàn bộ chức năng có thể tạo ra những thay đổi ngoài mong muốn.
- Không kiểm thử trường hợp bất thường: mã có thể hoạt động với dữ liệu bình thường nhưng thất bại khi người dùng nhập dữ liệu khác dự kiến.
- Đưa thông tin bí mật vào mã phía trình duyệt: khóa riêng, mật khẩu hoặc thông tin xác thực không nên được đặt trực tiếp trong JavaScript công khai.
Những vấn đề này không phải do riêng JavaScript hay ChatGPT. Chúng xuất phát chủ yếu từ cách xác định yêu cầu, kiểm tra mã và đưa mã vào môi trường thực tế.
Quy trình dùng ChatGPT viết JavaScript hiệu quả
Nếu thường xuyên sử dụng ChatGPT để hỗ trợ lập trình, bạn có thể áp dụng một quy trình cố định cho hầu hết các chức năng.
- Xác định mục tiêu: mô tả chính xác website cần làm gì.
- Cung cấp ngữ cảnh: gửi HTML, dữ liệu mẫu hoặc đoạn JavaScript liên quan.
- Nêu giới hạn: xác định thư viện được phép sử dụng, phần nào không được thay đổi và môi trường chạy mã.
- Tạo phiên bản đầu tiên: ưu tiên mã rõ ràng thay vì cố tối ưu ngay.
- Đọc và hiểu mã: yêu cầu ChatGPT giải thích phần bạn chưa rõ.
- Kiểm thử: kiểm tra cả trường hợp bình thường và bất thường.
- Sửa theo lỗi thực tế: cung cấp thông báo lỗi và kết quả thực tế cho ChatGPT.
- Rà soát bảo mật: đặc biệt với dữ liệu người dùng, tài khoản và các chức năng gửi dữ liệu.
- Cải thiện mã: chỉ tối ưu sau khi chức năng đã hoạt động đúng và xác định được phần cần cải thiện.
- Kiểm tra lần cuối: thử lại trên môi trường phù hợp trước khi đưa lên website chính thức.
Điểm quan trọng nhất là xem ChatGPT như một công cụ hỗ trợ lập trình chứ không phải nguồn mã có thể sử dụng mà không cần kiểm tra. Bạn càng cung cấp đúng ngữ cảnh và kiểm thử kỹ, khả năng nhận được JavaScript phù hợp với website càng cao.
Kết luận
Cách dùng ChatGPT viết JavaScript hiệu quả không nằm ở việc tạo ra đoạn mã dài hay phức tạp nhất, mà ở khả năng biến yêu cầu thực tế thành những thông tin rõ ràng để công cụ có thể xử lý chính xác. Hãy mô tả chức năng, cung cấp HTML và dữ liệu liên quan, xác định giới hạn, sau đó tạo mã và kiểm tra từng bước.
Với những đoạn JavaScript đã có sẵn, ChatGPT có thể hỗ trợ giải thích, tìm lỗi, mở rộng chức năng và cải thiện khả năng bảo trì. Tuy nhiên, mọi mã được tạo ra vẫn nên được đọc, kiểm thử và đánh giá trong đúng môi trường mà website sẽ sử dụng.
Nếu duy trì quy trình mô tả yêu cầu → tạo mã → giải thích → kiểm thử → sửa lỗi → rà soát → hoàn thiện, ChatGPT có thể trở thành một công cụ hỗ trợ đáng kể trong quá trình xây dựng và phát triển các chức năng JavaScript cho website.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
