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)

Các Hộp thoại trong JavaScript

 

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 hoàn toàn có thể sử dụng chúng để thông tin cho người dùng hoặc nhận một số ít tài liệu nguồn vào của người dùng trước khi liên 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ự Open của những hộp thoại này được xác lập bởi setup hệ quản lý và / hoặc trình duyệt, chúng không hề được sửa đổi bằng CSS .

Ngoài ra, hộp thoại là một loại hành lang 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ỉ liên tục sau khi nó đã bị vô hiệu .

Trong phần sau tất cả chúng ta sẽ tìm hiểu và khám phá 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 gồm có nút OK và người dùng phải nhấp vào nút OK này để liên 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ựa như như hộp thoại cảnh báo nhắc nhở 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à nguyên do tại sao hiệu 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 1 số ít 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 pháp này rất hay được sử dụng để người dùng xác nhận có hoặc không đồng ý chấp thuận 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ì nguyên do này, hiệu 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 pháp 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 và khám phá thêm về những loại hộp thoại trong JavaScript như alert, confirm và prompt .

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