JavaScript: alert, confirm, prompt

Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

JavaScript hỗ trợ ba loại hộp thoại quan trọng là alert(), confirm(), và prompt(). Các hộp thoại này có thể được sử dụng để nâng cao và cảnh báo hoặc để xác nhận bất kỳ đầu vào nào hoặc để có một loại đầu vào từ người dùng. Sau đây chúng ta sẽ thảo luận từng hộp thoại một.

Hộp thoại alert()

Hộp thoại alert chủ yếu được sử dụng để gửi thông điệp cảnh báo hoặc thông báo cho người dùng. Ví dụ: nếu một trường input yêu cầu nhập liệu nhưng người dùng không nhập thì ta có thể sử dụng hộp thoại alert để gửi thông điệp cảnh báo.

Hộp thoại alert cũng có thể được sử dụng cho các thông báo mang tính thân thiện hơn. Hộp thoại alert chỉ cung cấp một nút "OK" để chọn và tiếp tục.

Ví dụ

<html> 
   <head> 
      <script> 
         function thongBao() {
            alert("Đây là hộp thoại alert!");
            document.write("Đây là hộp thoại alert!");
         }
      </script>
   </head>

   <body>
      <p>Click nút lệnh dưới đây để xem kết quả:</p>
      <form>
         <input type="button" value="Button" onclick="thongBao()">
      </form>
   </body>
</html>

Output:

Hộp thoại confirm()

Hộp thoại confirm chủ yếu được sử dụng để yêu cầu người dùng xác nhận đối với tùy chọn tương ứng như xóa, cập nhật, ... Hộp thoại confirm có hai nút: OK và Cancel.

Nếu người dùng nhấp vào nút OK, phương thức confirm() sẽ trả về true, còn nếu người dùng nhấp vào nút Cancel thì confirm() trả về false.

Ví dụ

<html>
   <head>
      <script>
         function conf(){
            var retVal = confirm("Bạn muốn tiếp tục?");
            
            if(retVal == true){
               document.write("Tiếp tục!");
               return true;
            } else {
               document.write("Không tiếp tục!");
               return false;
            }
         }
      </script>
   </head>

   <body>
      <p>Click nút lệnh để xem kết quả:</p>
      <form>
         <input type="button" value="Nút lệnh" onclick="conf();">
      </form>
   </body>
</html>

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

Hộp thoại prompt()

Hộp thoại prompt hữu ích khi bạn muốn bật lên một hộp văn bản để nhận đầu vào của người dùng. Do đó, nó cho phép bạn tương tác với người dùng. Người dùng cần điền vào hộp văn bản và sau đó nhấp vào OK.

Hộp thoại này được hiển thị bằng cách sử dụng phương thức có tên prompt() có hai tham số: tham số thứ nhất là thông báo, tham số thứ 2 là một chuỗi mặc định để hiển thị trong hộp văn bản.

prompt() có hai nút: OK và Cancel. Nếu người dùng nhấp vào nút OK thì prompt() sẽ trả về giá trị đã nhập từ hộp văn bản. Nếu người dùng nhấp vào nút Cancel thì prompt() trả về null.

Ví dụ

<html>
   <head>
      <script>
         function getValue(){
            var prom = prompt("Nhập vô tên : ", "nhập tên của bạn");
            document.write("Tên của bạn là : " + prom);
         }
      </script>
   </head>

   <body>
      <p>Click nút lệnh dưới đây để xem kết quả:</p>
      <form>
         <input type="button" value="Prompt" onclick="getValue();">
      </form>
   </body>
</html>

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

» Tiếp: Từ khóa void
« Trước: Chuyển hướng
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!