Hộp thoại - Alert, Prompt, Confirmation trong JavaScript

JavaScript hỗ trợ 3 kiểu hộp thoại quan trọng. Những hộp thoại này có thể được sử dụng để thông báo, xác nhận input, hoặc nhận input từ người dùng. Dưới đây chúng ta bàn luận từng kiểu hộp thoại một.

Hộp thoại thông báo (Alert)

Một hộp thoại thông báo (Alert Dialog Box) được sử dụng phổ biến nhất để cảnh báo tới người dùng. Ví dụ, nếu một trường input yêu cầu nhập một vài văn bản nhưng người dùng không cung cấp bất kỳ đầu vào nào, thì khi đó như là một phần của xác nhận, bạn có thể sử dụng hộp thoại thông báo để đưa một cảnh báo.

Tuy nhiên, một hộp thông báo có thể vẫn được sử dụng cho các thông báo thân thiện hơn. Hộp thông báo chỉ cung cấp một nút OK để chọn và tiếp tục.

Ví dụ

<html>
   <head>
   
      <script type="text/javascript">
         <!--
            function Warn() {
               alert ("This is a warning message!");
               document.write ("This is a warning message!");
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following button to see the result: </p>
      
      <form>
         <input type="button" value="Click Me" onclick="Warn();" />
      </form>
      
   </body>
</html>

Kết quả

Quảng cáo

Hộp thoại xác nhận (Confirmation)

Một hộp thoại xác nhận (Confirmation Dialog) được sử dụng phổ biến nhất để nhận sự đồng ý của người dùng trên bất kỳ tùy chọn nào. Nó hiển thị một hộp thoại với hai nút: OK và Cancel.

Nếu người dùng click vào nút OK, phương thức confirm() sẽ trả về true. Nếu người dùng click nút Cancel, thì confirm() trả về false. Bạn có thể sử dụng một hộp thoại xác nhận như sau:

Ví dụ

<html>
   <head>
   
      <script type="text/javascript">
         <!--
            function getConfirmation(){
               var retVal = confirm("Do you want to continue ?");
               if( retVal == true ){
                  document.write ("User wants to continue!");
                  return true;
               }
               else{
                  Document.write ("User does not want to continue!");
                  return false;
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following button to see the result: </p>
      
      <form>
         <input type="button" value="Click Me" onclick="getConfirmation();" />
      </form>
      
   </body>
</html>

Kết quả

Hộp thoại gợi ý (Prompt)

Hộp thoại gợi ý (Prompt Dialog Box) là rất hữu ích khi bạn muốn pop-up một hộp văn bản để nhận input từ người dùng. Vì thế, nó cho bạn khả năng tương tác với người dùng. Người dùng cần điền thông tin vào trường đó và sau đó nhấn OK.

Hộp thoại này được hiển thị bởi sử dụng một phương thức là prompt() mà nhận hai tham số: (i) Một label mà bạn muốn hiển thị trong hộp văn bản và (ii) Một chuỗi mặc định để hiển thị trong hộp văn bản.

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

Ví dụ

Sau đây là ví dụ chỉ cách sử dụng một hộp thoại Prompt.

<html>
   <head>
      
      <script type="text/javascript">
         <!--
            function getValue(){
               var retVal = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + retVal);
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>
      
      <form>
         <input type="button" value="Click Me" onclick="getValue();" />
      </form>
      
   </body>
</html>

Kết quả

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt qua các dự án trên trường và đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.

Nội dung khóa học gồm 16 chuơng và 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/ Bạn nào có nhu cầu mua, inbox trực tiếp a Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack

Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Các bài học JavaScript khác tại VietJack: