Phương thức alert() confirm() prompt() trong JavaScript

Trong JavaScript, các phương thức alert(), confirm(), và prompt() được sử dụng để tương tác với người dùng thông qua các hộp thoại (dialog boxes) cơ bản. Đây là các phương thức thuộc đối tượng window và chúng cung cấp các cách để hiển thị thông tin, xác nhận hành động, và thu thập dữ liệu từ người dùng.

1. alert()#

• Mô Tả: Hiển thị một hộp thoại thông báo đơn giản với một thông điệp và nút "OK". Đây là cách đơn giản để thông báo cho người dùng một thông tin cụ thể.

• Cú Pháp: alert(message);

• Tham Số: message: Chuỗi thông báo mà bạn muốn hiển thị trong hộp thoại.

• Ví Dụ: alert("This is an alert message!");

  Khi đoạn mã này được thực thi, một hộp thoại thông báo với nội dung "This is an alert message!" sẽ xuất hiện, và người dùng phải nhấp vào nút "OK" để đóng hộp thoại.

2. confirm()#

• Mô Tả: Hiển thị một hộp thoại xác nhận với thông điệp và hai nút: "OK" và "Cancel". Phương thức này được sử dụng để hỏi người dùng một câu hỏi có/không và trả về giá trị boolean dựa trên lựa chọn của người dùng.

• Cú Pháp: var result = confirm(message);

• Tham Số: message: Chuỗi thông báo mà bạn muốn hiển thị trong hộp thoại.

• Giá Trị Trả Về: true nếu người dùng nhấp vào "OK".

  • false nếu người dùng nhấp vào "Cancel".

• Ví Dụ: var userConfirmed = confirm("Do you want to proceed?"); if (userConfirmed) { console.log("User chose OK."); } else { console.log("User chose Cancel."); }

  Khi đoạn mã này được thực thi, một hộp thoại xác nhận với thông điệp "Do you want to proceed?" sẽ xuất hiện. Kết quả của việc nhấp vào nút "OK" hoặc "Cancel" sẽ được lưu vào biến userConfirmed.

3. prompt()#

• Mô Tả: Hiển thị một hộp thoại để yêu cầu người dùng nhập một giá trị. Hộp thoại này có một ô nhập liệu và hai nút: "OK" và "Cancel". Phương thức này trả về giá trị mà người dùng đã nhập, hoặc null nếu người dùng nhấp vào "Cancel".

• Cú Pháp: var userInput = prompt(message, default);

• Tham Số: message: Chuỗi thông báo hướng dẫn người dùng.

  • default (tùy chọn): Chuỗi giá trị mặc định được hiển thị trong ô nhập liệu.

• Giá Trị Trả Về: Giá trị mà người dùng nhập vào ô nhập liệu.

  • null nếu người dùng nhấp vào "Cancel".

• Ví Dụ: var userName = prompt("Please enter your name:", "Guest"); if (userName !== null) { console.log("Hello, " + userName + "!"); } else { console.log("User cancelled the prompt."); }

  Khi đoạn mã này được thực thi, một hộp thoại yêu cầu người dùng nhập tên sẽ xuất hiện với giá trị mặc định là "Guest". Kết quả sẽ được lưu vào biến userName.

Sự Khác Biệt#

• alert(): Được sử dụng để hiển thị thông báo thông tin cho người dùng. Không cần người dùng phải nhập dữ liệu hoặc xác nhận; chỉ cần nhấp vào "OK".

• confirm(): Được sử dụng để hỏi người dùng một câu hỏi có/không. Trả về giá trị boolean dựa trên sự lựa chọn của người dùng.

• prompt(): Được sử dụng để thu thập dữ liệu từ người dùng. Hiển thị một ô nhập liệu và trả về giá trị mà người dùng đã nhập.

Lưu Ý#

• Các hộp thoại này có thể gây ra sự làm gián đoạn trong trải nghiệm người dùng và không thể tùy chỉnh nhiều về giao diện.

• Tốt nhất là sử dụng các hộp thoại này chỉ trong các tình huống đơn giản hoặc để kiểm tra. Đối với các tương tác phức tạp hơn, bạn nên sử dụng các giải pháp giao diện người dùng tùy chỉnh, chẳng hạn như modals do các thư viện JavaScript hoặc CSS cung cấp.