JavaScript alert() phương thức, còn được gọi là Window.alert() , hiển thị hộp thoại cảnh báo cho người dùng. Nó chấp nhận một đối số thông báo tùy chọn để hiển thị thông báo có nút OK cho người dùng. Cách sử dụng phổ biến cho alert() là để cho người dùng biết một hành động đã thành công hoặc để hiển thị lỗi.
alert() phương pháp này cũng có ích như một công cụ phát triển. Ví dụ:đặt một alert() bên trong một hàm để xử lý việc gửi biểu mẫu. Thông thường, alert() sẽ được đặt sau event.preventDefault() được gọi là.
Để xem xét, hãy event.preventDefault() chỉ cần hủy hành vi chuyển hướng mặc định sau khi nhấp vào nút gửi. Đọc hướng dẫn nhanh này để xem xét thêm event.preventDefault() .
JavaScript alert () là gì?
JavaScript alert() hiển thị một hộp thoại bật lên. Một thông báo tùy chọn ở dạng chuỗi có thể được chuyển vào để hiển thị một thông báo tùy chỉnh. Một lưu ý quan trọng về alert() là nó chỉ nên được sử dụng để hiển thị thông báo yêu cầu xác nhận bằng cách nhấp vào OK. Thông báo yêu cầu một hành động không được sử dụng alert() .
alert() hộp thoại có nhiều công dụng. Nó có thể được sử dụng để hiển thị thành công hoặc lỗi trong ngữ cảnh của fetch() yêu cầu. Một cách sử dụng khác là hiển thị alert() trong một chức năng để đảm bảo chương trình được chạy một cách thích hợp.
alert ()
Cú pháp cho alert() là ngắn gọn và đơn giản. Chỉ cần gọi alert() với một thông báo dưới dạng một chuỗi:
alert('message')
Thao tác này sẽ hiển thị một hộp thoại có nội dung là ‘tin nhắn.’ Đặt tin nhắn tùy chỉnh của bạn dưới dạng một chuỗi để hiển thị nó.
Tin nhắn là tùy chọn. Nếu thông báo không được bao gồm, một hộp thoại trống với nút OK sẽ xuất hiện.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
alert()
JavaScript alert () Ví dụ
Trong phần giới thiệu của bài viết này, chúng tôi đã xem xét một người dùng và một nhà phát triển kịch bản để sử dụng alert() . Bây giờ chúng ta hãy xem cách triển khai từng cái. Hãy bắt đầu với phía nhà phát triển. Chúng tôi sẽ đặt một alert() bên trong một hàm xử lý việc gửi biểu mẫu.
Chúng tôi sẽ bắt đầu với một biểu mẫu cơ bản để đăng nhập bằng tên người dùng và mật khẩu.
<form> <label>Name</label> <input type="text" name="name"> <label>Password</label> <input type="text" name="name"> <button type="submit"> Log In </button> </form>
Kết quả nào:
Bây giờ, hãy xây dựng một hàm để chuyển đến thuộc tính onSubmit của biểu mẫu JavaScript của chúng ta.
const handleOnSubmit = (event) => {
event.preventDefault();
alert("Logged In")
}
Sau đó, chúng tôi chuyển hàm này vào biểu mẫu của chúng tôi trong thuộc tính onSubmit.
<form onSubmit="handleOnSubmit(event)"> <label>Name</label> <input type="text" name="name"> <label>Password</label> <input type="text" name="name"> <button type="submit"> Log In </button> </form>
Bây giờ chúng ta có thể nhấp vào nút Đăng nhập để xem liệu chúng ta đã kết nối chức năng với biểu mẫu một cách chính xác chưa. Sau khi nhấp vào nút, chúng tôi nhận được một hộp thoại giống như sau:
Tuyệt quá! Chúng tôi biết rằng chức năng của chúng tôi mà chúng tôi đã xác định là giao tiếp với biểu mẫu của chúng tôi. JavaScript alert() cung cấp cho chúng tôi một cách đơn giản để kiểm tra luồng chương trình của chúng tôi.
Đối với ví dụ tiếp theo của chúng tôi, hãy xem cách chúng tôi có thể hiển thị thông báo lỗi và thành công trong fetch() yêu cầu.
fetch('/current-cart/', {
credentials: 'include',
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(resp => resp.json())
.then(cart => {
if(cart.error){
alert(cart.error)
}
Trong ví dụ này, chúng tôi có một yêu cầu tìm nạp giỏ hàng trong một ứng dụng thương mại điện tử. Chúng tôi đang gửi yêu cầu xem giỏ hàng hiện tại đã được lưu trữ chưa. Xem xét yêu cầu cuối cùng, chúng tôi có một alert() điều đó sẽ hiển thị lỗi, nếu có.
Vì không có giỏ hàng đang hoạt động nên chúng tôi gặp lỗi này:
Ví dụ này hữu ích trong phát triển hơn là sản xuất, nhưng các nguyên tắc tương tự có thể được áp dụng như xác nhận trên một biểu mẫu chẳng hạn.
return fetch('/login', {
credentials: 'include',
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(creds)
})
.then(resp => resp.json())
.then(response => {
if (response.error) {
alert(response.error)
}
Đây, alert() sẽ hiển thị thông báo lỗi liên quan đến biểu mẫu đăng nhập. Nếu người dùng cố gắng đăng nhập mà không điền vào biểu mẫu, chúng tôi sẽ gặp các lỗi sau:
Đây là một ví dụ về hướng trải nghiệm người dùng bằng cách sử dụng alert() để hiển thị xác nhận.
Chúng tôi đã biết cách alert() có thể được sử dụng cả phía phát triển và phía khách hàng - những gì người dùng nhìn thấy. Hãy dành một chút thời gian để tóm tắt lại những gì chúng ta đã học được.
Kết luận
JavaScript alert() là một phương pháp đơn giản có nhiều công dụng rộng rãi. Nó nhận một đối số tùy chọn của một thông báo làm kiểu dữ liệu chuỗi. Nó sẽ hiển thị một hộp thoại với thông báo và một nút OK. Hãy nhớ rằng alert() chỉ để hiển thị thông báo và không thể thực hiện bất kỳ hành động nào.
Trong các ví dụ của chúng tôi, chúng tôi đã thấy cách alert() có thể được sử dụng trong quá trình phát triển để theo dõi giao tiếp của một hàm và một biểu mẫu. Sau đó, chúng tôi đã thấy cách alert() có thể hiển thị thông báo lỗi trong phía phát triển của một yêu cầu tìm nạp. Trong ví dụ cuối cùng của chúng tôi, chúng tôi đã thấy cách alert() có thể được sử dụng để cung cấp lỗi xác thực trong biểu mẫu cho người dùng.
Bây giờ, bạn đã nắm được các cách sử dụng phổ biến cho alert() . Hãy thử nó trong dự án JavaScript tiếp theo của bạn như một cách để kiểm tra các chức năng khác nhau.