18/08/2018, 11:17

Phương thức alert() confirm() prompt() trong JavaScript

Phương thức alert() Phương thức alert() dùng để hiển thị một hộp thoại thông báo đến người dùng. Xem ví dụ Phương thức alert() được sử dụng theo cú pháp như sau: alert("Nội dung muốn thông báo"); Ví dụ 1 <script> alert("Hướng dẫn học lập trình web từ cơ bản đến ...

Phương thức alert()

Phương thức alert() dùng để hiển thị một hộp thoại thông báo đến người dùng. Xem ví dụ

Phương thức alert() được sử dụng theo cú pháp như sau:

alert("Nội dung muốn thông báo");

Ví dụ 1

<script>
    alert("Hướng dẫn học lập trình web từ cơ bản đến nâng cao");
</script>

Xem ví dụ

Ví dụ 2

Chúng ta có thể gán phương thức alert() khi một sự kiện xảy ra.

<!DOCTYPE html>
<html>
<body>
    <button type="button" onclick="alert('hello 1')">Click here 1</button>
    <button type="button" onclick="abc()">Click here 2</button>
    <script>
        function abc(){
            alert("hello 2");
        }
    </script>
</body>
</html>

Trình duyệt sẽ hiển thị là:

Click here 1 Click here 2

Xem ví dụ

Ví dụ 3

Để hiển thị nội dung xuống dòng trong hộp thoại thông báo, ta sử dụng ký tự

<script>
    alert("Hướng dẫn học
lập trình web
từ cơ bản đến nâng cao");
</script>

Xem ví dụ

Tương tự, để hiển thị các ký tự như dấu ngoặc kép (") hoặc dấu ngoặc đơn (') thì ta sẽ sử dụng " và '

Phương thức confirm()

Phương thức confirm() dùng để hiển thị một hộp thoại thông báo và yêu cầu người dùng phải xác nhận là đồng ý hoặc quay lại (OK hoặc Cancel) Xem ví dụ

Phương thức confirm() được sử dụng theo cú pháp như sau:

confirm("Nội dung muốn thông báo");

Ví dụ

<!DOCTYPE html>
<html>
<body>
    <button type="button" onclick="abc()">Click vào đây</button>
    <script>
        function abc(){
            confirm("Bấm vào nút OK để tiếp tục");
        }
    </script>
</body>
</html>

Xem ví dụ

Dưới đây là một ví dụ về cách kiểm tra xem người dùng chọn "OK" hay "Cancel"

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>
    <button type="button" onclick="abc()">Click vào đây</button>
    <script>
        function abc(){
            if(confirm("Bấm vào nút OK để tiếp tục") == true){
                document.getElementById("demo").innerHTML = 
                "Bạn muốn tiếp tục";
            }else{
                document.getElementById("demo").innerHTML = 
                "Bạn không muốn tiếp tục";
            }
        }
    </script>
</body>
</html>

Xem ví dụ

Phương thức prompt()

Phương thức prompt() dùng để hiển thị một hộp thoại thông báo và yêu cầu người dùng nhập dữ liệu vào Xem ví dụ

Phương thức prompt() được sử dụng theo cú pháp như sau:

prompt("Nội dung muốn thông báo", "Nội dung mặc định trong ô dữ liệu");

Lưu ý: Ở công thức trên, tham số thứ hai có thể CÓ hoặc KHÔNG.

Ví dụ

<!DOCTYPE html>
<html>
<body>
    <button type="button" onclick="abc()">Click here</button>
    <script>
        function abc(){
            prompt("Nhập họ tên của bạn:", "Nguyễn Thành Nhân");
        }
    </script>
</body>
</html>

Xem ví dụ

Đối với hộp thoại nhập dữ liệu, nếu người dùng bấm vào nút "OK" thì hộp thoại sẽ trả về giá trị khác null, nếu người dùng bấm vào nút "Cancel" thì hộp thoại sẽ trả về giá trị null

Dưới đây là một ví dụ về cách kiểm tra xem người dùng bấm vào nút "OK" hay nút "Cancel"

<!DOCTYPE html>
<html>
<body>
  <button type="button" onclick="abc()">Click here</button>
  <p id="demo"></p>
  <script>
    function abc(){
      var fullName = prompt("Nhập họ tên của bạn:");
      if(fullName != null){
        document.getElementById("demo").innerHTML = "Họ tên: " + fullName;
      }else{
        document.getElementById("demo").innerHTML = "Bạn đã bấm nút hủy";
      }
    }
  </script>
</body>
</html>

Xem ví dụ

Lưu ý

Các phương thức alert(), confirm(), prompt() có thể CÓ hoặc KHÔNG CÓ tiền tố window

Ví dụ, hai câu lệnh dưới đây là hoàn toàn có chức năng như nhau:

alert("Hello");
window.alert("Hello");

Bình luận về bài viết này

Hoàng Hải Đăng

24 chủ đề

7226 bài viết

Phương thức alert() confirm() prompt() trong JavaScript