Hướng dẫn hàm alert trong javascript

Posted on by mtoplistChuyên mục:Top List

Trong bài này chúng ta sẽ tìm hiểu ba hàm rất thông dụng trong javascript, đó là hàm alert(), confirm() và prompt(). Đây là ba hàm thường được sử dụng tạo hộp thoại thông báo và lấy thông tin từ người dùng.

Nội dung chính

Show

  • 1. Hàm alert() trong javascript
  • 2. Hàm
    confirm() trong javascript
  • 3. Hàm prompt() trong
    javascript
  • Lời kết
  • Phương thức alert()
  • Phương thức confirm()
  • Phương thức prompt()

Hướng dẫn hàm alert trong javascript

Hướng dẫn hàm alert trong javascript

Bài viết này được đăng tại freetuts.net, không được
copy dưới mọi hình thức.

Tính năng hiển thị popup để lấy thông tin người dùng hoặc hiển thị popup thông báo rất là phổ biến. Tuy nhiên, thực tế thì các website lại rất ít khi sử dụng các hàm này bởi giao diện hiện thị của nó rất là củ chuối. Thay vào đó thì họ lập trình viên sẽ sử dụng một thư viện jQuery popup khác chuyên nghiệp hơn.

1. Hàm alert() trong javascript

Hàm alert() có nhiệm vụ in một thông báo popup, nó có một tham số truyền vào và tham số này chính là nội dung
ta muốn thông báo với người dùng.

Hướng dẫn hàm alert trong javascript

Ví dụ: Viết chương trình khi click vào button thì xuất hiện một thông báo.

Bài này ta đã làm ở ví dụ bài tìm hiểu javascript là gì rồi nên mình sẽ viết lại
hơi khác chút xíu, đó là mình sẽ dùng sự kiện onclick thay vì dùng hàm addEventListener như ở bài trước nhé.

Bài viết này được đăng tại [free tuts .net]

Hàm Alert RUN

<html>
  <head>
  </head>
  <body>
    <input type="button" onclick="alert('Xin chào các bạn')" value="Click Me"/>
  </body>
</html>

Các bạn thấy, mình đã sử dụng hàm alert() trong sự kiện onclick, đây là cách code inline mà chúng ta đã học ở bài trước rồi nên mình không giải thích gì thêm.

2. Hàm
confirm() trong javascript

Hàm confirm() cũng sẽ xuất hiện một thông báo popup nhưng nó có thêm hai sự lựa chọn là Yes và No, nếu người dùng chọn Yes thì nó trả về TRUE và ngược lại nếu chọn NO thì nó sẽ trả về FALSE. Nó cũng có một tham số truyền vào và tham số này chính là nội dung thông báo.

Hướng dẫn hàm alert trong javascript

Ví dụ: Viết chương trình
hiển thị thông báo xác nhận và dùng hàm alert() để hiển thị kết quả người dùng chọn.

Vì chúng ta chưa học hàm nên mình sẽ không viết dài dòng mà sẽ viết chạy trực tiếp khi load trang, nghĩa là khi trang web được chạy lên thì thông báo nó hiển thị luôn chứ không cần phải click vào button nhé.

Hàm Confirm RUN

<html>
    <head>
        <title></title>
      	<script language="javascript">
        	confirm("Do you like freetuts.net");
        </script>
    </head>
    <body>
        
    </body>
</html>

3. Hàm prompt() trong
javascript

Hàm prompt() dùng để lấy thông tin từ người dùng, gồm có hai tham số truyền vào là nội dung thông báo và giá trị ban đầu. Nếu người dùng không nhập vào thì giá trị nó sẽ trả về là NULL

Hướng dẫn hàm alert trong javascript

Ví dụ: Viết chương trìn lấy thông tin tên của người dùng

Ta sẽ
khai báo biến lưu trữ kết quả và kết hợp sử dụng hàm alert() để thông báo kết quả người dùng nhập vào.

Hàm Prompt RUN

<html>
    <head>
        <title></title>
      	<script language="javascript">
        	var t = prompt("Nhập tên của bạn", '');
          	alert(t);
        </script>
    </head>
    <body>
        
    </body>
</html>

Lời kết

Ba hàm alert() – confirm() – prompt() trong javascript rất hay sử dụng nên các bạn
hãy gắng nhớ nó nhé, vì nội dung chúng ta chưa học nhiều nên ví dụ vẫn chưa thấy hay lắm, khi nào ta học đến hàm, events hay selector trong javascript thì bạn sẽ thấy nó tuyệt vời.

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.

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");

<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ụ

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à:

Để 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ự \n

<script>
    alert("Hướng dẫn học\nlập trình web\ntừ 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)

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");

<!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

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.

<!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”);

mtoplist