Trong javascript, bạn có thể sử dụng từ khóa nào để hiển thị thông báo bật lên?

Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng phương thức alert() trong JavaScript. Phương thức alert() được sử dụng để hiển thị hộp cảnh báo trên cửa sổ trình duyệt với một số thông báo hoặc cảnh báo. Chúng tôi có thể sử dụng nó như một thông báo hoặc cảnh báo cho người dùng

Tiếp cận. Để hiển thị cảnh báo trên cửa sổ trình duyệt, chúng tôi tạo một nút. Khi chúng ta nhấp vào nút, một trình xử lý sự kiện nhấp chuột được gọi để gọi một hàm. Trong hàm đó, chúng ta sử dụng phương thức alert() chứa thông báo cho người dùng. Khi chúng tôi nhấp vào nút, cửa sổ cảnh báo sẽ bật lên trên cửa sổ trình duyệt chứa thông báo hoặc cảnh báo bằng nút.  

JavaScript cung cấp nhiều hộp bật lên khác nhau để thông báo, cảnh báo hoặc nhận thông tin đầu vào từ người dùng. Hộp bật lên ngăn người dùng truy cập vào các khía cạnh khác của chương trình cho đến khi cửa sổ bật lên được đóng lại, vì vậy không nên lạm dụng chúng

Có ba loại phương thức bật lên khác nhau được sử dụng trong JavaScript

• hộp cảnh báo

• hộp xác nhận

• hộp nhắc nhở

Hộp cảnh báo JavaScript

Hộp thoại cảnh báo chủ yếu được sử dụng để thông báo hoặc cảnh báo người dùng bằng cách hiển thị một số thông báo trong một hộp thoại nhỏ. Sau đây là cú pháp cho nó

alert("YOUR MESSAGE COMES HERE");

Hãy lấy một ví dụ để thấy nó hoạt động

Hộp xác nhận JavaScript

Một hộp xác nhận được sử dụng để cho phép người dùng đưa ra lựa chọn. Khi Javascript bật lên hộp xác nhận, người dùng sẽ phải nhấp vào "OK" hoặc "Hủy" để chuyển sang bước tiếp theo

Ngoài ra, dựa trên những gì người dùng nhấp vào, chúng tôi có thể thực hiện các hành động khác nhau. Chúng ta có thể chỉ định quá trình hành động này với logic có điều kiện

let result = window.confirm("SOME TEXT MESSAGE");

Khi người dùng click vào nút OK thì biến kết quả sẽ nhận giá trị true và nếu người dùng click vào nút Cancel biến kết quả sẽ nhận giá trị false

Hãy lấy một ví dụ và xem điều này trong thực tế

Hộp nhắc JavaScript

Javascript Prompt Box có thể được sử dụng khi chúng tôi muốn nhận một số thông tin đầu vào của người dùng. Khi Javascript hiển thị hộp nhắc, người dùng sẽ thấy hộp bật lên có trường nhập và các nút "OK" hoặc "Hủy" để tiếp tục sau khi nhập giá trị đầu vào

Sau đây là cú pháp cho hộp Nhắc JavaScript

let result = prompt("SOME MESSAGE", "DEFAULT_VALUE");

Ở đây, MỘT SỐ TIN NHẮN là thông báo được hiển thị trong hộp bật lên và DEFAULT_VALUE là giá trị mặc định trong trường nhập liệu. Giá trị mặc định là trường tùy chọn

Giá trị được trả về bởi lời nhắc phụ thuộc vào chính xác những gì người dùng thực hiện với hộp thoại

Sử dụng hộp bật lên JavaScript

Bây giờ chúng ta đã biết về ba hộp bật lên mà chúng ta có thể tạo và sử dụng trong JavaScript, hãy giới thiệu một số trường hợp sử dụng mà chúng ta có thể sử dụng chúng

Hộp Cảnh báo JavaScript có thể được sử dụng để hiển thị bất kỳ thông báo lỗi hoặc bất kỳ thông báo trợ giúp nào. Ví dụ: nếu bạn thực hiện xác thực trường biểu mẫu và thấy một số giá trị trường không chính xác, bạn có thể hiển thị hộp cảnh báo có thông báo để thông báo cho người dùng về thông tin nhập không chính xác

Hộp Xác nhận JavaScript là một cách tốt để xác nhận bất kỳ hành động quan trọng nào của người dùng, chẳng hạn như nếu chúng tôi có một tính năng trong ứng dụng web của mình, khi nhấp vào nút, chúng tôi sẽ thực hiện lệnh gọi AJAX tới máy chủ để xóa một số dữ liệu khỏi cơ sở dữ liệu, trong những trường hợp như vậy, đó là . Vì vậy, đối với các hành động quan trọng, chúng ta nên sử dụng hộp bật lên xác nhận

Hộp nhắc nhở JavaScript có thể được sử dụng để tạo một menu giống như hệ thống trong đó dựa trên đầu vào của người dùng, các hành động khác nhau được thực hiện bằng cách sử dụng câu lệnh chuyển đổi JavaScript. Hãy lấy một ví dụ mã đơn giản để chứng minh điều này

Trong hướng dẫn này, chúng tôi đã đề cập đến các hộp bật lên JavaScript như hộp cảnh báo, hộp xác nhận và hộp nhắc. Bạn có thể sử dụng chúng để làm cho ứng dụng của bạn phản hồi nhanh hơn

1. Như trước đây chúng ta đã thảo luận Hộp thông báo JavaScript được sử dụng để hiển thị các thông báo bật lên, ngoài ra nếu chúng ta muốn thông báo cho người dùng về các thông báo hoặc cảnh báo cụ thể thì có thể hiển thị. Các hộp thoại đó được coi như các phương thức của đối tượng cửa sổ

2. Hộp thông báo trong JavaScript có thể được chia thành ba loại khác nhau là Hộp cảnh báo, Hộp xác nhận, Hộp nhắc nhở. Đó là như sau

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

hộp cảnh báo

Hộp thông báo cảnh báo JavaScript là một trong những hộp hiển thị được sử dụng khi bạn muốn hiển thị hoặc hiển thị thông tin chắc chắn cho người dùng. Hộp cảnh báo bao gồm nút OK để người dùng có thể nhấn nút này để xử lý tiếp

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá bán
Xem các khóa học

Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 (85.265 xếp hạng)

cú pháp

window. Alert("text");

Vì vậy, trong cửa sổ cú pháp này. Phương thức Alert() được sử dụng mà không có tiền tố cửa sổ

Alert box is used to show sure information through pop up window to the user on their browser window. That alert message can be Danger, Success, Warning, Info each is having different meaning as per their importance. Danger value is used to show dangerous or negative action in popup box. Success can be used to show successful and positive action where as Warning value is used to show warning message where need attention of the user. And Info is used to show neutral information regarding change or action. One can create more than one alert message boxes on webpage using script for closing popup boxes using onclick attribute by considering on each element.

Hộp xác nhận

Hộp xác nhận được sử dụng trong JavaScript, bất cứ khi nào người dùng cần xác minh hoặc chấp nhận thông qua hộp bật lên. Vì vậy, loại hộp thông báo này bao gồm hai giá trị Ok và Hủy để xử lý tiếp theo. Vậy nếu bạn muốn tiếp tục xử lý tiếp thì bạn nhấn Ok nghĩa là lần nhấn này trả về giá trị true, ngược lại bạn nhấn Cancel để xử lý tiếp tức là nó trả về giá trị false

cú pháp

window.confirm ("text");

hộp nhắc nhở

Hộp nhắc nhở là một trong những Hộp thông báo JavaScript được sử dụng làm cửa sổ bật lên tương tác nơi người dùng muốn nhập đầu vào trước khi thực sự truy cập trang web. Giống hộp Xác nhận, nó có 2 giá trị Ok, Cancel. Sau khi người dùng nhập nút Ok thì người dùng cần nhập giá trị đầu vào để có quyền truy cập trang web nếu người dùng nhấp vào hủy thì giá trị đó trả về giá trị null

cú pháp

window.prompt("text", "default text")

Ví dụ về Hộp thông báo JavaScript

Dưới đây là các ví dụ về Hộp thông báo JavaScript

Ví dụ 1

Trong ví dụ đầu tiên, chúng ta sẽ tạo Hộp cảnh báo đơn giản khi nhấp vào nút, vì vậy khi người dùng nhấp vào nút, họ có thể thấy cửa sổ thông báo bật lên và sau khi hoàn tất, bằng cách nhấp vào nút Ok, cửa sổ bật lên sẽ đóng lại

Mã số

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Simple Alert Box</h2>
<button onclick="myFunction()">Click Here</button>
<script>
function myFunction() {
alert("This is a Example of simple alert box which are used along with JavaScript code, So If you want to highlight something on browser window, so it will take browser attention!");
}
</script>
</body>
</html>

đầu ra

Sau khi Click vào nút

Ví dụ #2

Trong Ví dụ này, chúng ta sẽ tạo Hộp cảnh báo, Những hộp đó giống như Thành công, Thông tin, Cảnh báo, Nguy hiểm như đã thảo luận trước đó, Hãy cùng xem ví dụ về nó

Mã số

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.alert {
padding: 15px;
background-color: red;
color: black;
margin-bottom: 15px;
}
.alert.success {background-color: green;}
.alert.info {background-color: dodgerblue;}
.alert.warning {background-color: orange;}
.closebutton {
margin-left: 10px;
color:black;
font-weight: bold;
float: right;
line-height: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>JavaScript Alert Messages</h2>
<p>Click on given X symbol to close Alert Message.</p>
<div class="alert success">
<span class="closebutton">&times;</span>
<strong>Success!</strong> Success used to show positive action
</div>
<div class="alert info">
<span class="closebutton">&times;</span>
<strong>Info!</strong> Info is used to show action or change.
</div>
<div class="alert warning">
<span class="closebutton">&times;</span>
<strong>Warning!</strong> Warning used to show warning where user want to give attention.
</div>
<div class="alert">
<span class="closebutton">&times;</span>
<strong>Danger!</strong> Danger for showing dangerous action or negative action.
</div>
<script>
var close = document.getElementsByClassName("closebutton");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function(){
var div = this.parentElement;
div.style.opacity = "0";
setTimeout(function(){ div.style.display = "none"; }, 400);
}
}
</script>
</body>
</html>

đầu ra

Bất cứ khi nào chạy mã này, nó sẽ hiển thị đầu ra như

Vì vậy, từ các hộp Cảnh báo phía trên, chúng ta có thể đóng các hộp cảnh báo đó bằng cách nhấp vào Dấu chéo được cung cấp như bên dưới

Ví dụ #3

Trong ví dụ này, chúng tôi sẽ tạo Hộp xác nhận

Mã số

đầu ra

Ví dụ #4

Trong ví dụ này, chúng ta sẽ tạo hộp nhắc

Mã số

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Prompt Message Box</h2>
<button onclick="myFunction()">Click Here</button>
<p id="pdemo"></p>
<script>
function myFunction() {
var demo;
var city = prompt("Enter Your City:", "Mumbai");
if (city == null || city == "") {
demo = "User denied to enter city in the prompt.";
} else {
demo = "It's Beautiful " + demo + "! Everyone's Dream";
}
document.getElementById("pdemo").innerHTML = demo;
}
</script>
</body>
</html>

đầu ra

Phần kết luận

• Từ tất cả các thông tin trên, chúng tôi biết rằng Hộp thông báo JavaScript được sử dụng để hiển thị hộp bật lên hoặc cửa sổ phương thức chứa một số thông tin để thu hút sự chú ý của người dùng đối với các hộp thoại
• Tất cả các hộp thông báo đó được chia thành ba loại như Hộp cảnh báo, Hộp xác nhận và Hộp nhắc nhở có giá trị Đồng ý và Hủy, Vì vậy, người dùng có thể sử dụng bất kỳ hộp nào trong số đó tùy theo lựa chọn của họ

Bài viết được đề xuất

Đây là hướng dẫn về Hộp thông báo JavaScript. Ở đây chúng ta thảo luận về Hộp thông báo Giới thiệu về JavaScript và các ví dụ của nó cùng với việc triển khai mã của nó. Bạn cũng có thể xem qua các bài viết được đề xuất khác của chúng tôi để tìm hiểu thêm –

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

Làm cách nào để xử lý cửa sổ bật lên trong JavaScript?

Phương pháp nào có thể được sử dụng để hiển thị thông báo bật lên cho người dùng?

Chúng tôi có thể thêm cửa sổ bật lên bằng JavaScript không?