JavaScript Message Boxes: alert(), confirm(), prompt()

JavaScript provides built-in global functions to display messages to users for different purposes, e.g., displaying a simple message, taking the user's confirmation, or displaying a popup to take the user's input value.

JavaScript has three kinds of popup boxes: Alert box, Confirm box, and Prompt box.

ohk without any delay let's understand with a code example

Alert Box

If you want to alert someone, what you do you give an alert message Use the alert()function to display a message to the user that requires their attention. This alert box will have the OK button to close the alert box.

alert("This is an alert message box.");  // display string message

alert('This is a numer: ' + 100); // display result of a concatenation

alert(100); // display number

alert(Date()); // display current date

The alert() function takes a parameter of any type e.g., string, number, boolean, etc. So, no need to convert a non-string type to a string type.

Confirm Box

Sometimes you need to take the user's confirmation to proceed. For example, you want to take the user's confirmation before saving updated data or deleting existing data. In this scenario, use the built-in function confirm()

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Prompt Box

Sometimes you may need to take the user's input to do further actions. For example, you want to calculate area of the circle then you have to take the radius of the circle as input so in this scenario prompt()comes into the picture. let's see the example

The prompt() function returns a user-entered value. If a user has not entered anything, then it returns null. So it is recommended to check null before proceeding.

That is all about this article.

conclusion

A quick recap of the article. We understand what is three javascript boxes. I hope that this article is useful to you, to help understand the topic better. If you have any questions, you can leave them in the comments section below.

Happy Coding.

ByBy

Follow Me