You've already studied various JavaScript methods that deal with strings and numbers, and these are the ones you'll probably use most frequently. But there are other special methods in JavaScript that can be really beneficial when creating web pages. alert(), prompt(), and confirm() all display different kinds of dialog boxes. You'll learn about these methods in this topic and find out how to use them effectively.
The alert method
Javascript's alert() method is used to show a virtual alert box that provides a warning or message to the user. The alert() method forces the user to close the alert box before accessing other sections of the website, so it should not be overused. Let's look at its syntax and how you can implement the alert() method in your code.
window.alert(message);An example of an alert function is shown below to help you understand how it works:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Alert method</title>
</head>
<body>
<p>Click the button to see the alert message</p>
<form>
<input type = "button" value = "Show Alert" onclick = "myFunc();" />
</form>
<script>
function myFunc() {
alert("Hello, this website has the alert message!");
}
</script>
</body>
</html>Output:
As you can see, the alert() method displays the message to the user when the button is clicked. You can also set the alert message dialog box to pop up when the web page reloads, but this should normally be avoided because the user cannot access the website until the dialog box is closed manually.
The prompt method
The prompt() method allows you to accept user input from a webpage. Whenever the webpage needs to collect some input from the user, the prompt() method can be used to display a dialog box where it can be entered. prompt() returns the value entered by the user, which you can store in a variable. The user can either click the "OK" button after entering the requested information or click the "Cancel" button.
The syntax of the prompt() method is as follows:
window.prompt(message, defaultString);These parameters are both optional, and their definitions are below:
message: the message to be passed to the prompt dialog box.defaultString: a string to display in the text input field.
Let's look at a simplified example.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prompt method</title>
</head>
<body>
<p>As soon as the page reloads the dialog box will appear.</p>
<script>
prompt("Enter your name");
</script>
</body>
</html>Output:
As shown in the output above, the prompt() method is used to accept the information from the user via the dialog box.
The confirm method
The confirm() method is particularly handy. It displays the message you specify in a dialog box with "OK" and "Cancel" buttons. It could, for example, be used when a person requests the deletion of a photo from a website. It's possible that the user accidentally clicked the delete button or pressed delete on the wrong image. So the decision can be checked using the confirm() method, and then canceled if necessary.
The confirm() method returns a value based on the button clicked by the user. If the user selects the "OK" button, it returns true. Otherwise, it returns false.
The syntax of the confirm method is:
window.confirm(message);A simplified example of how to use the confirm() method can be seen below:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Confirm method</title>
</head>
<body>
<script>
confirm("Press yes to confirm");
</script>
</body>
</html>Output:
alert(), prompt(), and confirm()are window object methods in JavaScript. Since all window methods are globally available, you can use them directly, instead of writing window.alert(), window.prompt(), or window.confirm().
Conclusion
You now know about the different kinds of pop-ups provided by JavaScript — alert(), prompt(), and confirm() — and have seen how you can use them to enhance the capabilities of your websites. Remember that pop-ups interrupt the user's access to your web pages, so you should think carefully before utilizing them.