Phương thức JavaScript alert(): Hiển thị hộp thoại thông báo

Phương thức JavaScript alert(), còn gọi là Window.alert(), hiển thị hộp thoại cảnh báo (alert dialog box) cho người dùng. Nó chấp nhận đối số thông điệp tùy chọn để hiển thị thông điệp kèm nút OK. Các trường hợp dùng alert() phổ biến: báo cho người dùng biết hành động thành công, hoặc hiển thị lỗi.

alert() cũng tiện lợi như công cụ phát triển (development tool). Ví dụ: đặt alert() bên trong hàm xử lý submit form. Thường alert() đặt sau khi gọi event.preventDefault().

Ôn lại: event.preventDefault() đơn giản hủy hành vi mặc định chuyển hướng sau khi nhấn nút submit. Đọc tutorial nhanh này để ôn lại event.preventDefault().

JavaScript alert() là gì?

JavaScript alert() hiển thị hộp thoại pop-up. Thông điệp tùy chọn dạng chuỗi có thể truyền vào để hiển thị thông điệp tùy chỉnh. Lưu ý quan trọng: alert() chỉ nên dùng để hiển thị thông điệp yêu cầu xác nhận bằng cách nhấn OK. Thông điệp yêu cầu hành động không nên dùng alert().

Hộp thoại alert() có nhiều dùng. Có thể dùng hiển thị thành công hoặc lỗi trong bối cảnh fetch() request. Dùng khác: hiển thị alert() trong hàm để đảm bảo chương trình chạy đúng luồng.

Cú pháp JavaScript alert()

Cú pháp alert() ngắn gọn, trực tiếp. Chỉ cần gọi alert() với thông điệp dạng chuỗi:

alert('thông điệp')

Sẽ hiển thị hộp thoại nói 'thông điệp'. Đặt thông điệp tùy chỉnh dạng chuỗi để hiển thị.

Thông điệp là tùy chọn. Nếu không có thông điệp, hộp thoại trống với nút OK xuất hiện.

alert()

Ví dụ JavaScript alert()

Trong phần mở đầu, ta xét trường hợp dev và user dùng alert(). Hãy xem triển khai từng trường hợp. Bắt đầu từ phía developer. Đặt alert() trong hàm xử lý submit form.

Bắt đầu với form đăng nhập cơ bản có username và password.

<form>
  <label>Tên</label>
  <input type="text" name="name">
  <label>Mật khẩu</label>
  <input type="text" name="name">
  <button type="submit"> Đăng nhập </button>
</form>

Giao diện render:

Xây dựng hàm gán cho thuộc tính onSubmit của form JavaScript.

const handleOnSubmit = (event) => {
  event.preventDefault();
  alert("Đã đăng nhập")
}

Truyền hàm này cho form trong thuộc tính onSubmit.

<form onSubmit="handleOnSubmit(event)">
  <label>Tên</label>
  <input type="text" name="name">
  <label>Mật khẩu</label>
  <input type="text" name="name">
  <button type="submit"> Đăng nhập </button>
</form>

Bây giờ nhấn nút Login xem hàm có kết nối form đúng không. Sau khi nhấn, hộp thoại hiện ra:

Tuyệt! Ta biết hàm định nghĩa giao tiếp với form. JavaScript alert() cho cách đơn giản kiểm tra luồng chương trình.

Ví dụ tiếp theo: hiển thị thành công và lỗi trong fetch() request.

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, có fetch request giỏ hàng trong app thương mại điện tử. Gửi request kiểm tra xem giỏ hàng hiện tại có được lưu không. Đi qua request đến cuối, có alert() hiển thị lỗi, nếu có.

Vì không có giỏ hàng hoạt động, nhận lỗi:

Ví dụ này hữu ích hơn ở môi trường dev thay vì production, nhưng cùng nguyên tắc áp dụng làm validation trên form.

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() hiển thị thông báo lỗi liên quan form đăng nhập. Nếu user thử đăng nhập không điền form, nhận lỗi:

Đây là ví dụ điều hướng trải nghiệm người dùng dùng alert() hiển thị validation lỗi.

Ta đã xem alert() dùng cả phía dev (development) và phía client (user). Tóm tắt lại những gì đã học.

Kết luận

JavaScript alert() là phương thức đơn giản với nhiều dùng rộng. Nhận đối số tùy chọn thông điệp dạng chuỗi. Hiển thị hộp thoại với thông điệp và nút OK. Nhớ alert() chỉ hiển thị thông điệp, không thể thực hiện hành động.

Trong ví dụ, ta thấy alert() dùng trong dev theo dõi giao tiếp hàm và form. Sau đó thấy alert() hiển thị lỗi phía dev của fetch request. Cuối cùng thấy alert() truyền validation lỗi form cho user.

Bây giờ bạn đã nắm dùng phổ biến của alert(). Hãy thử dùng trong dự án JavaScript tiếp theo để test các chức năng khác nhau.