JavaScript provides built-in global functions to display popup message boxes for different purposes.
A JavaScript popup can be created using various methods depending on the desired style or interaction.
Note: In JavaScript, global functions can be accessed using the window object like window.alert(), window.confirm(), window.prompt().
The alert() function displays a message to the user to display some information to users. This alert box will have the OK button to close the alert box.
The alert() function takes a paramter of any type e.g., string, number, boolean etc. So, no need to convert a non-string type to a string type.
Example alert():
alert("Welcome to soopro pathshala"); // display string message
alert('This is a numer: ' + 200); // display result of a concatenation
alert(200); // display number
alert(Date()); // display current date
Use the confirm() function to take the user's confirmation before starting some task. For example, you want to take the user's confirmation before saving, updating or deleting data.
The confirm() function displays a popup message to the user with two buttons, OK and Cancel. The confirm() function returns true if a user has clicked on the OK button or returns false if clicked on the Cancel button. You can use the return value to process further.
The following takes user's confirmation before saving data:
Example confirm():
var userPreference;
if (confirm("Do you want to save changes?") == true) {
userPreference = "Data saved successfully!";
} else {
userPreference = "Save Cancelled!";
}
Use the prompt() function to take the user's input to do further actions. For example, use the prompt() function in the scenario where you want to calculate EMI based on the user's preferred loan tenure.
The prompt() function takes two parameters. The first parameter is the message to be displayed, and the second parameter is the default value in an input box.
Example prompt():
var name = prompt("Enter your name:", "Lovely");
if (name == null || name == "") {
document.getElementById("msg").innerHTML = "You did not entert anything. Please enter your name again";
}
else
{
document.getElementById("msg").innerHTML = "You enterted: " + name;
}