Hiển thị thông báo trong JavaScript

Trong bài viết này, chúng ta sẽ đi tìm hiểu về một hàm rất thông dụng mà bất cứ ai học JavaScript đều biết nó. Đó là hàm alert[] trong JavaScript.

Khi bạn mở bất kỳ một trang web nào, đôi khi bạn sẽ thấy các cửa sổ bật lên hộp thoại cảnh báo [alert pop-up]. Các hộp thoại cảnh báo này thực sự rất hữu ích với người dùng. Nó giúp cảnh báo người dùng về một điều gì đó quan trọng mà trang web muốn truyền tải.

Khi hộp thoại cảnh báo được kích hoạt, chúng ta sẽ thấy dùng chữ hiển thị giải thích nguyên nhân tại sao hộp thoại cảnh báo đó lại xuất hiện.

>> Xem ngay Tài liệu Java Core giúp bạn “Nâng Cấp” kỹ năng lập trình

Định nghĩa hàm alert[] trong JavaScript

Hàm alert[] trong JavaScript được sử dụng để hiển thi hộp thoại cảnh báo khi muốn đảm bảo thông tin đến với người dùng. Khi hộp thoại cảnh báo hiện lên, người dùng sẽ phải nhấp vào nút “OK” để tiếp tục.

Hộp thoại cảnh báo sẽ lấy tiêu điểm ra khỏi cửa sổ hiện tại và buộc trình duyệt phải đọc cảnh báo đó. Vì vậy, bạn nên tránh lạm dụng phương pháp này nếu muốn hiển thị thông tin đến với người dùng, vì nó ngăn người dùng truy cập vào các phần khác của trang cho đến khi hộp thoại được đóng lại.

Hộp thoại cảnh báo này không chứa bất cứ HTML hay CSS nào, nó hiển thị như thế nào phụ thuộc vào hệ điều hành và trình duyệt người dùng đang sử dụng.

Nội dung cảnh báo tới người dùng thường mô tả về lỗi như “Email không hợp lệ” do người dùng nhập sai định dạng Email và nhấn “Submit”, thông báo như “Trang web này đang sử dụng cookies”,…

Cú pháp hàm alert[] trong JavaScript

Cú pháp:

window.alert[message];
Code language: JavaScript [javascript]

Bạn cũng có thể thay thế window.alert[] bằng alert[], vì khi bỏ tiền tố window đi thì JavaScript vẫn hiểu rằng bạn đang muốn hiển thị hộp thoại cảnh báo.

alert[message];

Trong đó, message là một chuỗi chứa thông tin mà bạn muốn hiển thị cho người dùng.

Ví dụ: Hiển thị một cảnh báo

alert["Đây là một cảnh báo"];
Code language: JavaScript [javascript]

Rất đơn giản phải không nào!

Bạn cũng có thể sử dụng ngắt dòng trong hộp thoại này bằng ký tự “\n”:

alert["Hello\nHow are you?"];
Code language: JavaScript [javascript]

Cách sử dụng hàm alert[] trong JavaScript

Kết hợp với Button

Bạn có thể tạo một nút để hiển thị hộp thoại cảnh báo khi người dùng nhấp vào.

Ví dụ: Sử dụng nút để hiển thị cảnh báo

    
Code language: HTML, XML [xml]

Hiển thị ngay từ khi tải trang

Hộp thoại cảnh báo có thể được hiển thị khi tệp tin HTML bắt đầu chạy, trước khi người dùng truy cập vào bất kỳ phần tử nào khác trên trang.

Ví dụ: Hiển thị cảnh báo ngay từ khi tải trang

 
  
    alert['Đóng hộp thoại này để xem trang!'];
  
 
 
   Hello World
 
Code language: HTML, XML [xml]

Chắc hẳn lúc bạn vào xem bài viết này, bạn đã đồng ý “Đóng hộp thoại này để xem trang!” rồi phải không nào?

Sử dụng biến để tuỳ chỉnh dòng chữ hiển thị

Bạn có thể truyền biến vào hàm alert[] trong JavaScript để hiển thị cảnh báo để dễ dàng tuỳ chỉnh dòng chữ hiển thị.

Ví dụ: Sử dụng biến để truyền vào hàm alert[]

var message = "Đây là cảnh báo!";
alert[message];

  

Code language: JavaScript [javascript]

Và bạn có thể đưa nó vào trong hàm để tái sử dụng đoạn code này. Điều này giúp cho bạn có thể hiển thị cảnh báo ở bất cứ đâu mà không cần viết lại code.

 
   
     function showAlert[] {
     	var message = "Đây là cảnh báo!";
        alert[message]; 
     }
   
 
 
   
     
     
   
 
Code language: HTML, XML [xml]

Đồng bộ với hàm alert[]

Bạn có thể sử dụng hàm alert[] trong JavaScript để thực hiện các luồng đồng độ. Đồng bộ ở đây có nghĩa là việc thực thi code sẽ dừng lại khi hộp thoại cảnh báo được hiển thị và việc thực thi code sẽ tiếp tục sau khi hộp thoại cảnh báo được đóng.

Ví dụ: Hiển thị hộp thoại cảnh báo sau 3 giây

setTimeout[[] => {
    alert['3 giây đã chạy xong!']
}, 3000];
Code language: JavaScript [javascript]

Để chạy đoạn mã này, mình sẽ đưa nó vào trong button.

 
   
     function showAlert[] {
        setTimeout[[] => {
            alert['3 giây đã chạy xong!']
        }, 3000];
     }
   
 
 
   
     
   
 
Code language: HTML, XML [xml]

Hàm setTimeout[] sẽ tạo bộ hẹn giờ cho đoạn mã, sau 3 giây, cảnh báo sẽ hiển thị.

Tìm hiểu thêm về hàm setTimeout[] trong JavaScript tại đây!

Kết luận

Hàm alert[] trong JavaScript sẽ hiển thi hộp thoại cảnh báo khi muốn đảm bảo thông tin đến với người dùng. Chắc chắn bạn sẽ sử dụng hàm này nhiều trong quá trình học. Vì vậy, hãy ghi nhớ các cách dùng và trường hợp sử dụng.

Và tất nhiên, tránh lạm dụng hàm alert[] trong JavaScript quá nhiều vì nó sẽ gây ảnh hưởng không tốt đến trải nghiệm người dùng.