Các Hộp thoại trong JavaScript

Trong hướng dẫn tự học JavaScript này, bạn sẽ học cách tạo các hộp thoại (dialog box)

1. Hộp thoại (dialog box) là gì?

Trong JavaScript, bạn có thể tạo hộp thoại (dialog box) hoặc cửa sổ bật lên (popup) để tương tác với người dùng.

Bạn có thể sử dụng chúng để thông báo cho người dùng hoặc nhận một số dữ liệu đầu vào của người dùng trước khi tiếp tục.

Bạn có thể tạo ba loại hộp thoại khác nhau của hộp thoại alert (cảnh báo), confirm (yêu cầu xác nhận) và prompt (nhắc nhở).

Sự xuất hiện của các hộp thoại này được xác định bởi cài đặt hệ điều hành và / hoặc trình duyệt, chúng không thể được sửa đổi bằng CSS.

Ngoài ra, hộp thoại là một loại cửa sổ window. Khi hộp thoại được hiển thị, việc thực thi chương trình sẽ dừng và chỉ tiếp tục sau khi nó đã bị loại bỏ.

Trong phần sau chúng ta sẽ tìm hiểu về 3 loại hộp thoại này trong JavaScript.

2. Hộp thoại cảnh báo (Alert dialog box)

Hộp thoại cảnh báo (alert dialog box) là hộp thoại đơn giản nhất. Nó cho phép bạn hiển thị một tin nhắn ngắn cho người dùng.

Nó cũng bao gồm nút OK và người dùng phải nhấp vào nút OK này để tiếp tục.

Bạn có thể tạo các hộp thoại cảnh báo bằng phương thức alert() như đã thấy rất nhiều ở ví dụ của các bài trước.

Hãy xem thêm một ví dụ:

var thongBao = "Chào bạn, click OK để tiếp tục.";
alert(message);
 
/* Dòng lệnh bên dưới này sẽ không thực hiện nếu hộp thoại trước chưa được bỏ qua */
alert("Đây là một hộp thoại cảnh báo khác");

3. Hộp thoại xác nhận (Confirm dialog box)

Hộp thoại xác nhận (confirm dialog box) cho phép người dùng xác nhận hoặc hủy một hành động.

Hộp thoại xác nhận trông tương tự như hộp thoại cảnh báo nhưng nó có thêm nút Hủy (Cancel) cùng với nút OK.

Bạn có thể tạo hộp thoại xác nhận bằng phương thức confirm().

Phương thức này chỉ trả về một giá trị Boolean (true hoặc false) tùy thuộc vào việc người dùng nhấp vào nút OK hay Cancel.

Đó là lý do tại sao kết quả của nó thường được gán cho một biến khi nó được sử dụng.

Ví dụ sau sẽ in một số văn bản trong trình duyệt tùy thuộc vào nút nào được chọn.

var hocLapTrinh = confirm("Học lập trình không");
 
if(hocLapTrinh) {
    alert("Có, học ngay và luôn!");
} else {
    alert("Để nghĩ thêm đã!");
}

Trong lập trình web, bạn sẽ thấy phương thức này rất hay được sử dụng để người dùng xác nhận có hoặc không đồng ý với cái gì đó.

Tham khảo: KHÓA HỌC FULL STACK nếu bạn muốn học nghề lập trình web.

4. Hộp thoại nhắc nhở (Prompt dialog box)

Hộp thoại nhắc nhở (Prompt dialog box) được sử dụng để nhắc người dùng nhập thông tin.

Hộp thoại nhắc nhở có trường để nhập văn bản và kèm theo là nút OK và nút Hủy (Cancel).

Bạn có thể tạo hộp thoại nhắc bằng phương thức prompt().

Phương thức này trả về văn bản đã được nhập trong trường nhập khi người dùng nhấp vào nút OK và vô hiệu nếu người dùng nhấp vào nút Hủy (Cancel).

Nếu người dùng nhấp vào nút OK mà không nhập bất kỳ văn bản nào, một chuỗi trống sẽ được trả về.

Vì lý do này, kết quả của nó thường được gán cho một biến khi nó được sử dụng.

Ví dụ sau sẽ in giá giá trị của bạn và in ra giá trị đó khi bạn nhấn OK.

var text = prompt("Nhập gì đó vào đây");

if (text != null) {
    alert("Bạn đã nhập: " + text);
} else {
    alert("Nhập gì đó đi bạn ơi!");
}

Giá trị được trả về bởi phương thức prompt() luôn là một chuỗi. Điều này có nghĩa là nếu người dùng nhập số 10 vào trường nhập, chuỗi '10' được trả về thay vì số 10.

Do đó, nếu bạn muốn sử dụng giá trị trả về dưới dạng số, bạn phải chuyển thành số, như sau: var age = Number(prompt ("Bạn bao nhiêu tuổi?"));

Ví dụ:

var age = Number(prompt("Bạn bao nhiêu tuổi?"));

if ((age > 0 && age < 50) && age != "null") {
    alert("Bạn " + age + " tuổi!");
} else {
    alert("Nhập tuổi thật đi bạn êy");
}

Mẹo: Để hiển thị ngắt dòng bên trong các hộp thoại, hãy sử dụng \n (Dấu gạch chéo ngược theo sau là ký tự n)

Như vậy là bạn đã được tìm hiểu thêm về các loại hộp thoại trong JavaScript như alert, confirm và prompt.

Các bài học tiếp theo chúng ta sẽ được học về JavaScript nâng cao. Hãy theo dõi nhé.