Làm cách nào để hiển thị thông báo trong html?

Trong một số ứng dụng web, bạn có thể đã thấy một số thông báo bật lên HTML để hiển thị một số thông báo cảnh báo, nhập một số thông tin hoặc xác nhận một số hành động. Những cửa sổ bật lên này là API của trình duyệt. Chúng tôi có thể tạo các cửa sổ bật lên này bằng JavaScript đơn giản

Hướng dẫn này sẽ thảo luận về việc xây dựng thông báo bật lên HTML và sử dụng cửa sổ bật lên JavaScript cho các mục đích khác nhau. Chúng tôi cũng sẽ xem xét các tình huống khác trong đó thông báo bật lên HTML này có thể hữu ích

Mục lục

Báo động

Đây là cửa sổ bật lên JavaScript cơ bản nhất. Mục đích chính của nó là hiển thị thông báo cảnh báo cho người dùng. Cửa sổ cảnh báo cũng bao gồm một nút cho phép người dùng loại bỏ Cảnh báo

Hình thức, kích thước và giao diện của cửa sổ bật lên với các trình duyệt khác nhau có thể khác nhau. Cửa sổ cảnh báo cho trình duyệt web Google Chrome xuất hiện như sau

Cửa sổ cảnh báo trong Google Chrome

Cửa sổ phương thức là một cửa sổ cảnh báo nhỏ hiển thị thông báo. “Phương thức” đề cập đến thực tế là người dùng không thể tương tác với phần còn lại của trang web, chẳng hạn như nhấn các nút khác, cho đến khi họ xử lý xong cửa sổ. Do đó, họ sẽ không thể tiến lên cho đến khi nhấp vào nút “OK”

Tạo cảnh báo bằng JavaScript

Thật đơn giản để tạo cảnh báo trong JavaScript. Chúng ta có thể sử dụng hàm

alert('Hi from Codedamn!');
Code language: JavaScript (javascript)

2 để tạo cảnh báo JavaScript. Để tạo một cảnh báo, chúng tôi viết

alert('message');
Code language: JavaScript (javascript)

Hãy tạo một cái ngay bây giờ

alert('Hi from Codedamn!');
Code language: JavaScript (javascript)

Đoạn mã trên sẽ tạo một cảnh báo JavaScript sẽ bật lên ngay khi chúng tôi mở nó trong trình duyệt. Chúng tôi loại bỏ Cảnh báo bằng cách nhấp vào nút “OK”;

Cửa sổ cảnh báo được tạo bằng JavaScript

Thuộc tính của một cảnh báo

Cảnh báo JavaScript là API đồng bộ mở cửa sổ phương thức hiển thị thông báo cho người dùng. Việc thực thi JavaScript bị tạm dừng tại nơi chúng tôi đã tạo Cảnh báo. Quá trình thực thi tiếp tục khi người dùng loại bỏ Cảnh báo bằng cách nhấp vào nút “OK”

Để chứng minh điều này, chúng tôi viết đoạn mã sau vào tệp JavaScript của mình

alert('Hi from Codedamn!');
document.getElementById('heading').innerText = 'Working!';
Code language: JavaScript (javascript)

Khi chúng tôi mở nó trong trình duyệt, chúng tôi sẽ thấy một cửa sổ bật lên cảnh báo, nhưng tiêu đề vẫn giữ nguyên. Điều này đang xảy ra do quá trình thực thi JavaScript bị tạm dừng ở dòng số 1. Quá trình thực thi tiếp tục khi chúng tôi nhấp vào nút “OK” và văn bản trong tiêu đề thay đổi

Việc thực thi JavaScript đã tạm dừngViệc thực thi JavaScript tiếp tục

Cách sử dụng

Chúng tôi có thể sử dụng cảnh báo JavaScript để hiển thị thông báo cho người dùng. Các thông báo này có thể ở bất kỳ dạng nào, chẳng hạn như cảnh báo, lỗi, v.v. Ví dụ: nếu người dùng nhập sai mật khẩu khi đăng nhập, chúng tôi có thể hiển thị cảnh báo cho biết rằng mật khẩu đã gửi không chính xác

if (passwordEntered !== correctPassword) {
    alert('The password entered is not correct!');
}
Code language: JavaScript (javascript)

Xác nhận

Bạn có thể đã quan sát thấy rằng các ứng dụng web thỉnh thoảng hiển thị một cửa sổ bật lên yêu cầu bạn xác nhận một hành động. Chúng tôi gọi những cửa sổ bật lên này là cửa sổ xác nhận hoặc phương thức. Nó cũng là một API của trình duyệt và chúng ta có thể dễ dàng tạo các cửa sổ bật lên xác nhận này bằng JavaScript

Giống như cửa sổ cảnh báo, hình thức, kích thước và giao diện của cửa sổ xác nhận với các trình duyệt khác nhau có thể khác nhau. Cửa sổ xác nhận trình duyệt web Google Chrome hiện ra như sau

Cửa sổ xác nhận trong Google Chrome

Không giống như cửa sổ cảnh báo chỉ có một nút có nhãn “OK”, cửa sổ này có hai. “OK” và “Hủy bỏ. ” Chúng tôi loại bỏ hộp xác nhận hoặc phương thức bằng cách nhấp vào nút “OK” hoặc “Hủy”;

Tạo phương thức Xác nhận bằng JavaScript

Tương tự như Alert, việc tạo phương thức xác nhận trong JavaScript rất đơn giản. Chúng ta có thể sử dụng hàm

alert('Hi from Codedamn!');
Code language: JavaScript (javascript)

3 để tạo phương thức xác nhận JavaScript. Để tạo một phương thức xác nhận, chúng tôi viết

confirm('message');
Code language: JavaScript (javascript)

Hãy tạo một cái ngay bây giờ

confirm('Are you a web developer');
Code language: JavaScript (javascript)

Đoạn mã trên sẽ tạo một phương thức xác nhận JavaScript sẽ bật lên ngay khi chúng tôi mở nó trong trình duyệt. Chúng tôi loại bỏ cửa sổ bật lên bằng cách nhấp vào nút “OK” hoặc “Hủy”;

Cửa sổ xác nhận được tạo bằng JavaScript

Các thuộc tính của phương thức Xác nhận

Cũng giống như

alert('Hi from Codedamn!');



Code language: JavaScript (javascript)

2,

alert('Hi from Codedamn!');
Code language: JavaScript (javascript)

3 là một API đồng bộ mở ra một cửa sổ phương thức yêu cầu người dùng xác nhận một hành động. Việc thực thi JavaScript bị tạm dừng tại nơi chúng tôi đã tạo phương thức xác nhận. Quá trình thực thi tiếp tục khi người dùng loại bỏ phương thức xác nhận bằng cách nhấp vào nút “OK” hoặc “Cancel”

Để chứng minh điều này, chúng tôi viết đoạn mã sau vào tệp JavaScript của mình

alert('message');
Code language: JavaScript (javascript)

0

Khi chúng tôi mở nó trong trình duyệt, chúng tôi sẽ thấy một cửa sổ bật lên xác nhận phương thức, nhưng tiêu đề vẫn giữ nguyên. Điều này đang xảy ra do quá trình thực thi JavaScript bị tạm dừng ở dòng số 1. Quá trình thực thi tiếp tục khi chúng tôi nhấp vào nút “OK” và văn bản trong tiêu đề thay đổi

Việc thực thi JavaScript đã tạm dừngViệc thực thi JavaScript tiếp tục

Cách sử dụng

Chúng tôi phát hiện ra rằng việc tạo một phương thức xác nhận cũng tương tự như tạo một cảnh báo. Sự khác biệt chính giữa hai loại này là không giống như

alert('Hi from Codedamn!');
Code language: JavaScript (javascript)

2, trả về giá trị không xác định, xác nhận () trả về giá trị boolean. Giá trị boolean đại diện cho lựa chọn của người dùng. Giá trị trả về sẽ là true nếu người dùng nhấn nút “OK”. Mặt khác, sai sẽ được trả về nếu người dùng chọn nút “Hủy”

alert('message');
Code language: JavaScript (javascript)

2

Lời nhắc

Bạn có thể nhận thấy rằng một số ứng dụng web sử dụng phương thức dựa trên trình duyệt để thu thập dữ liệu người dùng như tên, tuổi, v.v. Lời nhắc là các cửa sổ nhập liệu dựa trên trình duyệt. Các phương thức nhập này là API của trình duyệt và chúng tôi có thể tạo chúng bằng JavaScript

Giống như các cửa sổ bật lên đã thảo luận trước đó, hình thức, kích thước và giao diện của cửa sổ nhắc với các trình duyệt khác nhau có thể khác nhau. Cửa sổ nhắc trình duyệt web Google Chrome hiện ra như sau

Cửa sổ nhắc trong Google Chrome

Không giống như các cửa sổ bật lên trước đó, chỉ có một thông báo và một vài nút, cửa sổ bật lên này cũng có trường nhập liệu để người dùng có thể nhập dữ liệu cần thiết. Chúng tôi loại bỏ cửa sổ nhắc bằng cách nhấp vào nút “OK” hoặc “Hủy”;

Tạo Lời nhắc bằng JavaScript

Tương tự như các popup trước, việc tạo cửa sổ nhắc trong JavaScript rất đơn giản. Chúng ta có thể sử dụng hàm

alert('Hi from Codedamn!');
Code language: JavaScript (javascript)

7 để tạo cửa sổ nhắc JavaScript. Để tạo một cửa sổ nhắc, chúng tôi viết

alert('message');
Code language: JavaScript (javascript)

4

Nó chấp nhận một đối số tùy chọn của giá trị mặc định của trường đầu vào

Hãy tạo một cái ngay bây giờ

alert('message');
Code language: JavaScript (javascript)

5

Đoạn mã trên sẽ tạo một cửa sổ nhắc JavaScript sẽ bật lên ngay khi chúng tôi mở nó trong trình duyệt. Chúng tôi loại bỏ cửa sổ bật lên bằng cách nhấp vào nút “OK” hoặc “Hủy”; . Chúng ta có thể tùy ý nhập giá trị vào vùng nhập liệu. Chúng ta sẽ tìm hiểu thêm về hàm trả về sau

Cửa sổ nhắc được tạo bằng JavaScript

Thuộc tính của cửa sổ Prompt

Giống như các cửa sổ bật lên trước đó,

alert('Hi from Codedamn!');
Code language: JavaScript (javascript)

7 là một API đồng bộ mở ra một cửa sổ phương thức yêu cầu đầu vào của người dùng. Việc thực thi JavaScript bị tạm dừng tại nơi chúng tôi đã tạo cửa sổ nhắc. Quá trình thực thi tiếp tục khi người dùng loại bỏ lời nhắc bằng cách nhấp vào nút “OK” hoặc “Cancel”

Để chứng minh điều này, chúng tôi viết đoạn mã sau vào tệp JavaScript của mình

alert('Hi from Codedamn!');
Code language: JavaScript (javascript)

0

Khi chúng tôi mở nó trong trình duyệt, chúng tôi sẽ thấy một cửa sổ bật lên nhắc nhở, nhưng tiêu đề vẫn giữ nguyên. Điều này đang xảy ra do quá trình thực thi JavaScript bị tạm dừng ở dòng số 1. Quá trình thực thi tiếp tục khi chúng tôi nhấp vào nút “OK” và văn bản trong tiêu đề thay đổi

Việc thực thi JavaScript đã tạm dừngViệc thực thi JavaScript tiếp tục

Cách sử dụng

Hàm

alert('Hi from Codedamn!');
Code language: JavaScript (javascript)

7 trả về giá trị do người dùng nhập vào. Chúng tôi sử dụng giá trị này để thực hiện các hành động cần thiết. Giá trị trả về là một chuỗi. Trước tiên, chúng tôi phải chuyển đổi chuỗi trả về thành một số nếu chúng tôi mong đợi một số từ máy khách

alert('Hi from Codedamn!');
Code language: JavaScript (javascript)

1

Phần kết luận

Bài viết này đề cập đến thông báo bật lên HTML mà chúng tôi có thể tạo bằng JavaScript. Cảnh báo, Xác nhận và Nhắc nhở. Chúng tôi đã xem xét nhiều thuộc tính của những cửa sổ bật lên này và cách chúng tôi sử dụng chúng

Cảm ơn bạn rất nhiều vì đã đọc ?

Học lập trình trên codedamn

Codedamn là một nền tảng mã hóa tương tác với rất nhiều khóa học lập trình hấp dẫn có thể giúp bạn có được công việc viết mã đầu tiên của mình. Đây là cách

• Bước 1 - Tạo một tài khoản miễn phí
• Bước 2 - Duyệt qua các lộ trình có cấu trúc (đường dẫn học tập) hoặc xem tất cả các khóa học
• Bước 3 - Thực hành viết mã miễn phí trên các sân chơi lập trình
• Bước 4 - Nâng cấp lên tài khoản thành viên Pro để mở khóa tất cả các khóa học và nền tảng

Lập trình là một trong những công việc có nhu cầu cao nhất hiện nay. Học lập trình có thể thay đổi tương lai của bạn. Tất cả tốt nhất

Làm cách nào để hiển thị một thông báo trong JavaScript HTML?

Làm cách nào để hiển thị thông báo khi nhấp vào nút trong HTML?

Làm cách nào để hiển thị thông báo bật lên trong JavaScript?