Giá trị của cảnh báo trong javascript là gì?

Hàm JavaScript

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

1 là một hàm có sẵn trên đối tượng

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

2 toàn cầu. Nó ra lệnh cho trình duyệt hiển thị hộp thoại phương thức có thông báo và nút "OK"

Đây là một ví dụ cơ bản về cách sử dụng

alert("Hello world!");

// Which is quivalent to:
window.alert("Hello world");

Lưu ý rằng, khi được thực thi, chức năng

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

3 sẽ lấy tiêu điểm và ngăn người dùng tương tác với thiết lập lại trang web cho đến khi phương thức bị loại bỏ

Ví dụ sử dụng cảnh báo

1. Tin nhắn cảnh báo khi nhấp chuột

Một trường hợp sử dụng rất phổ biến cho chức năng

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

3 là sử dụng nó khi điền vào biểu mẫu và sau đó cố gắng gửi nó bằng cách nhấp vào nút

Giả sử chúng tôi muốn đảm bảo người dùng trên 18 tuổi khi điền vào biểu mẫu sau

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

Tất cả những gì chúng ta phải làm là đính kèm một trình lắng nghe sự kiện vào nút, kiểm tra giá trị của trường đầu vào và sau đó hiển thị phương thức bằng hàm

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

3 của JavaScript

var checkAge = (e) => {
    if(document.querySelector('#age').value < 18){
    
        // Preventing the submit of the form
        e.preventDefault();
        
        // Displaying the modal window
        alert("You have to be older 18!");
    }
};

// Listening to the click event on the button
document.querySelector('button').addEventListener('click', checkAge);

Xem Bút trên CodePen

2. Hộp cảnh báo trước khi đóng cửa sổ

Đây cũng là một thực tế phổ biến trong các trang web yêu cầu lưu các thay đổi để hiển thị thông báo cảnh báo khi người dùng cố gắng đóng cửa sổ hoặc tab của trình duyệt

Để làm điều này, trước tiên chúng ta phải phát hiện khi người dùng chuẩn bị đóng cửa sổ. Chúng tôi có thể đạt được điều này theo hai cách khác nhau, nhưng thông thường nên sử dụng trình lắng nghe sự kiện khi có thể

________số 8

Bây giờ tất cả những gì chúng ta phải làm là cho họ thấy một hộp thoại. Nhưng trong trường hợp này, chúng ta sẽ không sử dụng hàm

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

3 cho trường hợp này

Rất tiếc, chúng tôi không thể tùy chỉnh thông báo hiển thị trên hộp thoại nữa. Chúng tôi vẫn phải trả lại một văn bản để tương thích với các trình duyệt cũ, nhưng rất có thể thông báo sẽ không được hiển thị trên các trình duyệt hiện đại. Chúng sẽ hiển thị thông báo mặc định cho người dùng biết rằng các thay đổi sẽ không được lưu

Vì vậy, đây là cách chúng tôi nói với trình duyệt rằng chúng tôi muốn hiển thị một thông báo, nhưng trả về một chuỗi trên hàm sự kiện

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

0

3. Hộp cảnh báo khi tải trang

Trong một số trường hợp rất cụ thể, các trang web có thể muốn hiển thị thông báo cảnh báo khi tải trang. Để làm điều này, tất cả những gì chúng ta cần làm là kích hoạt thông báo cảnh báo trên phần

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

7 trong HTML của chúng ta. Bằng cách này, cảnh báo sẽ được hiển thị trước khi tải bất kỳ thành phần nào trên trang

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

2

4. Tin nhắn cảnh báo sử dụng một biến

Việc sử dụng một biến để hiển thị các thông báo khác nhau dựa trên nội dung của nó cũng có thể được thực hiện khá dễ dàng. Chỉ cần chuyển biến cho phương thức

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

3 thay vì một chuỗi văn bản

Đây là một ví dụ

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

4

5. Báo tin nhắn yêu cầu xác nhận

Có lẽ bạn muốn hiển thị một cảnh báo yêu cầu khách truy cập xác nhận và điều đó cũng cho phép họ hủy hoặc bỏ qua nó bằng cách hiển thị các nút "Hủy" và "OK". Đối với những trường hợp này chúng ta sẽ sử dụng hàm

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

9, đây có thể coi là một biến thể của hàm

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

3

Hàm

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

9 sẽ chỉ thêm nút "Hủy" ở trên nút "OK" được thêm bởi phương thức

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

3

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

9

Chúng tôi có thể nắm bắt quyết định của khách truy cập bằng cách kiểm tra kết quả của phương pháp. Sẽ là

var checkAge = (e) => {
    if(document.querySelector('#age').value < 18){
    
        // Preventing the submit of the form
        e.preventDefault();
        
        // Displaying the modal window
        alert("You have to be older 18!");
    }
};

// Listening to the click event on the button
document.querySelector('button').addEventListener('click', checkAge);

3 nếu khách truy cập nhấp vào "OK" và

var checkAge = (e) => {
    if(document.querySelector('#age').value < 18){
    
        // Preventing the submit of the form
        e.preventDefault();
        
        // Displaying the modal window
        alert("You have to be older 18!");
    }
};

// Listening to the click event on the button
document.querySelector('button').addEventListener('click', checkAge);

4 nếu không

alert("Hello world!");

// Which is quivalent to:
window.alert("Hello world");

2

Xem Bút trên CodePen

6. Thông báo một thông báo hiển thị trường đầu vào

Trong một số trường hợp, chúng tôi có thể muốn nắm bắt đầu vào của người dùng trực tiếp trên thông báo cảnh báo. Trong trường hợp này, chúng ta cũng sẽ bỏ hàm

<form name="myForm" action="">
    <label for="age">Agelabel>
    <input type="number" name="age" id="age" />
    <button type="submit">Submitbutton>
form>

3 và sử dụng hàm thay thế

var checkAge = (e) => {
    if(document.querySelector('#age').value < 18){
    
        // Preventing the submit of the form
        e.preventDefault();
        
        // Displaying the modal window
        alert("You have to be older 18!");
    }
};

// Listening to the click event on the button
document.querySelector('button').addEventListener('click', checkAge);

6. Chức năng này tạo ra hộp thoại tương tự nhưng thêm trường văn bản vào hộp thoại và cả nút "Hủy"

Nó thừa nhận các tham số twoo. Cái đầu tiên là văn bản hiển thị trên hộp thoại (đối với đầu vào) và cái thứ hai là giá trị mặc định cho đầu vào (nếu có)

alert("Hello world!");

// Which is quivalent to:
window.alert("Hello world");

5

Xem Bút trên CodePen

7. Cảnh báo với phong cách tùy chỉnh

Để sử dụng các phương thức cảnh báo tùy chỉnh của riêng bạn, chúng tôi sẽ phải sử dụng JavaScript và CSS. Cách dễ nhất, nhanh nhất và có lẽ đáng tin cậy nhất để làm điều đó là sử dụng các plugin bên ngoài thay vì tự làm

Giá trị của cảnh báo là gì?

Hàm alert() trong JavaScript là gì?

Cảnh báo JavaScript có trả về giá trị không?

Làm thế nào để cảnh báo hiển thị giá trị biến?