NỘI DUNG BÀI VIẾT
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ộ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)
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ị.
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.
