Hàm Alert() Trong JavaScript | Học Lập Trình JavaScript

Trang chủ » Code Hiện Thông Báo Html » Hàm Alert() Trong JavaScript | Học Lập Trình JavaScript

Có thể bạn quan tâm

NỘI DUNG BÀI VIẾT

Toggle
  • Định nghĩa hàm alert() trong JavaScript
  • Cú pháp hàm alert() trong JavaScript
  • Cách sử dụng hàm alert() trong JavaScript
    • Kết hợp với Button
    • Hiển thị ngay từ khi tải trang
    • Sử dụng biến để tuỳ chỉnh dòng chữ hiển thị
    • Đồng bộ với hàm alert()
  • Kết luận

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.

Đị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àm alert() trong JavaScript là gì

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

<form> <input type="button" value="Click me!" onclick="alert('Cảnh báo!');"/> </form>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

<html> <head> <script> alert('Đóng hộp thoại này để xem trang!'); </script> </head> <body> <p>Hello World</p> </body> </html>Code language: HTML, XML (xml)
Hàm alert() trong JavaScript là gì

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.

<html> <head> <script> function showAlert() { var message = "Đây là cảnh báo!"; alert(message); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="showAlert();"/> <input type="button" value="Click me again!" onclick="showAlert();"/> </form> </body> </html>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.

<html> <head> <script> function showAlert() { setTimeout(() => { alert('3 giây đã chạy xong!') }, 3000); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="showAlert();"/> </form> </body> </html>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ị.

setTimeout() trong JavaScript

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.

Cảm ơn bạn đã đọc!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

CẨM NANG LẬP TRÌNH CĂN BẢN CHO NGƯỜI MỚI BẮT ĐẦU

Chia sẻ

Bài viết liên quan

Từ khóa » Code Hiện Thông Báo Html