Hàm confirm() trong JavaScript

Hàm confirm() trong JavaScript

Ở các bài viết trước, chúng ta đã làm quen với việc hiển thị thông báo trong các hộp thoại như là hàm alert(), hàm prompt(),… Trong bài viết này, chúng ta sẽ tìm hiểu về hàm confirm() trong JavaScript.

Ngày nay, chủ sở hữu trang web luôn hướng tới việc làm cho trang của họ thân thiện với người dùng. Bạn cứ tưởng tưởng rằng bạn muốn sửa hoặc xoá đi một thứ gì đó mà không hề hiển thị hộp thoại xác nhận mà nó thực hiện luôn thì thật khó chịu đúng không?

Rất may là trong JavaScript có hàm confirm(). Hàm này sẽ giúp bạn hiển thị thông báo xác nhận với người dùng.

Giả sử một người muốn xóa ảnh khỏi trang web. Vì tai nạn xảy ra và nút xóa có thể do vô tình ấn nhầm, nên trang web sẽ hiển thị thông báo xác nhận để kiểm tra quyết định này.

Tuy nhiên, đây chỉ là một ví dụ phổ biến, minh họa cách sử dụng của hàm confirm() trong JavaScript. Các ví dụ khác có thể yêu cầu xác minh nhiều hành động khác nhau.

Định nghĩa hàm confirm() trong JavaScript

Hàm confirm() trong JavaScript được sử dụng để hiển thị một hộp thoại với thông báo được chỉ định, cùng với nút “OK” và nút “Cancel“.

Hộp thoại xác nhận này thường được sử dụng nếu bạn muốn người dùng xác minh hoặc chấp nhận một điều gì đó.

Lưu ý: Hộp thoại xác nhận sẽ lấy tiêu điểm ra khỏi cửa sổ hiện tại và buộc trình duyệt đọc thông báo. Không nên lạm dụng phương pháp này, vì nó ngăn người dùng truy cập vào các phần khác của trang cho đến khi hộp được đóng lại.

Trong một số trường hợp, ví dụ: khi người dùng chuyển đổi các tab, trình duyệt có thể không thực sự hiển thị hộp thoại hoặc có thể không đợi người dùng gửi văn bản hoặc hủy hộp thoại.

Hàm alert() trong JavaScript là gì

Hộp thoại thông báo này không chứa bất cứ HTML hay CSS nào, nó hiển thị như thế nào phụ thuộc vào hệ điều hành và trình duyệt người dùng đang sử dụng.

Nội dung thông báo tới người dùng thường là các câu hỏi để lấy dữ liệu từ người dùng như “Bạn có chắc chắn muốn sửa không?”, “Bạn có chắc chắn muốn xoá không?”, “Bạn có muốn thực hiện thay đổi không?”,…

Cú pháp hàm confirm() trong JavaScript

Cú pháp:

window.confirm(message);Code language: JavaScript (javascript)

Bạn cũng có thể thay thế window.confirm() bằng confirm(), vì khi bỏ tiền tố window đi thì JavaScript vẫn hiểu rằng bạn đang muốn hiển thị hộp thoại thông báo.

confirm(message);

Trong đó, message là một chuỗi chứa thông tin mà bạn muốn hiển thị cho người dùng và không bắt buộc. Mặc dù nó không bắt buộc nhưng bạn nên thêm vào để người dùng biết được bạn đang muốn thông báo gì cho họ.

Hàm confirm() trả về true nếu người dùng nhấp vào “OK” và false nếu ngược lại.

Ví dụ: Hiển thị một thông báo

confirm("Bạn có chắc chắn muốn sửa không?");Code language: JavaScript (javascript)

Rất đơn giản phải không nào!

Ví dụ về hàm confirm() trong JavaScript

Bắt đầu với ví dụ đơn giản nhất là hiển thị thông báo xác nhận.

Ví dụ 1: Hiển thị thông báo xác nhận

Hàm confirm() trong JavaScript
confirm("Bạn có chắc chắn muốn xoá không?");Code language: JavaScript (javascript)

Tiếp theo là ví dụ về phần giá trị trả về khi người dùng chọn “OK” hoặc “Cancel

Ví dụ 2: Giá trị trả về của hàm confirm()

Hàm confirm() trong JavaScript
let text;
let choice = confirm("Mời bạn xác nhận!");
if (choice == true) {
    text = "Nút OK đã được bấm!";
} else {
    text = "Nút Cancel đã được bấm!";
}
console.log(text);Code language: JavaScript (javascript)

Result:

Bạn hãy thử các trường hợp mình đã nêu ở trên để kiểm chứng cách hoạt động của hàm confirm() trong JavaScript nhé!

Kết luận

Hàm confirm() trong JavaScript sẽ hiển thi hộp thoại thông báo mong muốn người dùng xác minh hoặc chấp nhận một điều gì đó. Chắc chắn bạn sẽ sử dụng hàm này nhiều trong quá trình học. Vì vậy, hãy ghi nhớ các cách dùng và trường hợp sử dụng nhé!

Cảm ơn bạn đã đọc!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Leave a Reply

Your email address will not be published. Required fields are marked *