Section 1: Overview
JavaScript provides three types of interactive boxes, or popup dialog boxes: alerts, confirmations, and prompts.
- An alert is a simple window that contains a message and a single button labeled OK.
- Confirm also opens a simple window but with two buttons, OK and Cancel. It is used to request that a user confirm a certain action and/or choose from two options.
- A prompt is used to obtain user input, and also includes the OK and Cancel buttons.
Section 2: alert
The JavaScript alert is the simplest and the most often used of the three available JavaScript pop-up dialog boxes.
- Its one simple job is to display a message to the user.
- When the browser encounters an alert statement in a script, the alert popup box is displayed on the screen and all other operations are suspended until the user confirms they have read the message by clicking the 'OK' button.
-
It is obviously useful for displaying a message to the user but it is also very useful for
debugging JavaScripts.
- You place it inline in the script you are developing and use it to display the value of variables, form input fields, etc.
The syntax for alert is
alert (<msg>);
or
window.alert(<msg>);
where <msg> is either a string literal or a string variable. For example,
alert("This is the message to be displayed in the pop-up window!");
or
var msg = "The message can also be in a variable!";
alert(msg);
The message inside the parentheses is shown in the alert.
- If you want to show a string of literal text, enclose the text in quotes.
- To display variable values, enter the variable name without quotes.
You can also combine variable values and text strings by using the + sign. For example:
var course = "INFO 2220";
alert("My most challenging course is " + course);
alert() is a method of the window object and cannot interpret HTML tags, so we can't write text on multiple lines in an alert box using the <br/> tag.
- Instead we use the new line escape character: \n.
An escape character consists of a backslash (\) symbol and an alphabetical character.
- When preceded by the backslash, these characters assume a special function.
alert("JavaScript\nis\na\nclient-side\nprogramming\nlanguage");
You'll notice that new lines have been introduced at each occurrence of the \n escape character.
Notes:
- JavaScript alerts require one argument.
- Alerts do not return a value, which means they are informational only.
Section 3: confirm
The JavaScript confirm is similar to an alert, but has both an 'OK' button and a 'Cancel' button.
- This allows you to ask the user Yes|No type questions and then make your script branch according to the user's response.
- When the browser encounters a confirm statement in a script, the confirm box is displayed on the screen and all other operations are suspended until the user reacts to the confirm.
To enable you to test a user's response, a confirm returns a Boolean true if the user clicks 'OK' or hits 'Enter', and it returns a Boolean false if the user clicks 'Cancel' or hits 'Escape'.
The syntax for confirm is
var returnValue = confirm (<msg>);
or
var returnValue = window.confirm (<msg>);
where <msg> is either a string literal or a string variable. For example,
var showMessage = confirm ("Is it ok to display a message now?");
or
var msg = "The message can also be in a variable!";
var showMessage = confirm (msg);
You then test to see if the return value is true or false
if (returnValue )
{
// 'OK' script goes here
}
else
{
// 'Cancel' script goes here
}
function confirmDemo()
{
// confirm requires one argument
var message = "Please confirm that it is OK to proceed";
// confirm is Boolean, which means that it returns
// true if 'OK' is clicked, otherwise returns false
var OkClicked = confirm(message);
// Test to see if true/false is returned
if (OkClicked) // Or if (OkClicked == true)
{
// place the 'OK' script here
alert("The user clicked OK.");
}
else
{
// place the 'Cancel' script here
alert("The user clicked Cancel.");
}
}
Section 4: prompt
The JavaScript prompt is the most complex of the three JavaScript popup dialog boxes in that it accepts two arguments and returns two different classes of response.
- The first argument is the message that is to be displayed to the user.
- The second argument is the default value returned if a value is not input.
- If you don't require a default value for the input line, then you should set the second argument to an empty string (e.g., "").
- Do not ignore the second argument; otherwise the starting value of the input line will be 'undefined'.
As pointed out, the prompt returns two different classes of response:
- a null string if the user clicks 'Cancel' or hits 'Esc'
- a valid string containing the text from the input line if the user clicks 'OK' or hits 'Enter'
When the browser encounters a prompt statement in a script, the prompt popup box is displayed on the screen and all other operations are suspended until the user reacts to the prompt.
The syntax for prompt is
var returnValue = prompt (<msg>, <default>);
or
var returnValue = window.prompt (<msg>, <default>);
where <msg> and <default> are either string literals or string variables. For example,
var courseNum = prompt ("Enter the course number of your favorite course: ", "INFO 2220");
or
var msg = "Enter the course number of your favorite course: ";
var default = "INFO 2220";
var courseNum = prompt (msg, default);
You should next check to see if the user failed to accept even the default. In some browsers you check to see if it is null, and in others you check to see if it is an empty string.
if ((courseNum != null) && (courseNum != ""))
{
alert("I
hope you are enjoying " + courseNum + "!");
}
else
{
alert("You didn't specify a course! Do you hate them all?");
}
function promptDemo()
{
var favPage=prompt("What is your favorite web site?", "http://");
if ((favPage != null) && (favPage != ""))
{
window.location=favPage;
}
else
{
alert("You didn't specify a favorite page, so I'm not going
anywhere!");
}
}