JavaScript Popup Boxes

JavaScript Popup Box: JavaScript provides the ability to create small windows called JavaScript Popup Box. You can create alert boxes, confirm boxes, and even prompt boxes. These boxes let you generate output and receive input from the user.

 JavaScript Alert Boxes

An alert box is the most simple JavaScript Popup Box. It enables you to display a short message to the user in a separate window. Take a look at the following script and its corresponding output:

alert("Click OK to continue...") 

The generic form of this function is alert(message). The function alert() is actually a method of the window object. It is not necessary to specify that because window is the default object. The same applies to all dialog boxes. You can also display messages using data structures. For example:

var message = "Click OK to continue" 
alert(message) 

As you can see, the alert box is often used to pause the execution of a script until the user approves its continuation.

JavaScript Confirm Boxes

Confirm boxes are different from alert boxes in that they evaluate to a value based on a decision made by the user. Rather than a simple OK button, the confirm box includes both OK and Cancel buttons. Like the alert box, confirm is also a method of the window object.

This method returns a Boolean value, because there are two options. You can use confirmation boxes to ask the user a yes-or-no question, or to confirm an action. Here is an example:

var reply = confirm("OK to continue?") 

reply is assigned a true value if the user chooses OK, and false if the user selects Cancel. The generic form of this function is confirm(message).

JavaScript Prompt Boxes

The prompt() method displays a prompt JavaScript Popup Box with a message and an input field. You can use these boxes to receive input from the user. It is similar to the confirm box, except that it returns the value of the input field, rather than true or false. Here is an example:

var name = prompt("Enter your name:", "anonymous") 

The method returns a value of null if the user chooses Cancel. The value of the field is always a string. If the user enters 16 in the form, the string “16” is returned rather than the number 16. When you want to prompt the user for a number, you must convert the input into a numeric value. JavaScript features a built-in function that does this—parseInt(). You can use the following statement to ask the user for a number:

var number = parseInt(prompt("Enter a number:", 0)) or 
var number = prompt("Enter a number:", 0) 
number = parseInt(number) 

The generic form of this function is prompt(message[, inputDefault]). You can see that this function works by using the typeof operator for testing:

var number = prompt("Enter a number:", 0) 
 alert(number + " is a " + typeof(number)) // "... is a string" 
 number = parseInt(number)  
alert(number + " is a " + typeof(number)) // "... is a number"  
The input must be of a numeric type, of course (e.g., 99).