Dialogs

Let’s start our discussion of the application of the Window object by covering the creation of three types of special windows known generically as dialogs. A dialog box, or simply dialog, is a small window in a graphical user interface that pops up requesting some action from a user. The three types of basic dialogs supported by JavaScript directly include alerts, confirms, and prompts. How these dialogs are natively implemented is somewhat rudimentary, but in the next section we’ll see that once we can create our own windows, we can replace these windows with our own.

Alert

The Window object’s alert() method creates a special small window with a short string message and an OK button, as shown here:

Note

The typical rendering of the alert includes an icon indicating a warning, regardless of the meaning of the message being presented.

The basic syntax for alert() is

window.alert(string);

or for shorthand,

alert(string);

as the Window object can be assumed.

The string passed to any dialog like an alert may be either a variable or the result of an expression. If you pass another form of data, it should be coerced into a string. All of the following examples are valid uses of the alert() method:

alert("Hi there from JavaScript! ");
alert("Hi "+username+" from Javascript");
var messageString = "Hi again!";
alert(messageString);

An alert window is page modal, meaning that it must receive focus and be cleared before the user is allowed to continue activity with the page.

Note

A good use of alert dialogs is for debugging messages. If you are ever in doubt of where a script is executing or what current variables are set at and you don’t want to use a debugger, you can use an alert to display useful debugging information.

Confirm

The confirm() method for the window object creates a window that displays a message for a user to respond to by clicking either an OK button to agree with the message or a Cancel button to disagree with the message. A typical rendering is shown here.

The writing of the confirmation question may influence the usability of the dialog significantly. Many confirmation messages are best answered with a Yes or No button rather than OK or Cancel, as shown by the dialog at right.

Unfortunately, using the basic JavaScript confirmation method, there is no possibility to change the button strings. However, it is possible to write your own form of confirmation.

The basic syntax of the confirm() method is

window.confirm(string);

or simply

confirm(string);

where string is any valid string variable, literal, or expression that eventually evaluates to a string value to be used as the confirmation question.

The confirm() method returns a Boolean value that indicates whether or not the information was confirmed, true if the OK button was clicked and false if the window was closed or the Cancel button was clicked. This value can be saved to a variable, like so

answer = confirm("Do you want to do this?");

or the method call itself can be used within any construct that uses a Boolean expression such as an if statement, like the one here:

if (confirm("Do you want ketchup on that?"))
  alert("Pour it on!");
else
   alert("Hold the ketchup.");

Like the alert() method, confirmation dialogs should be browser modal.

The next example shows how the alert and confirm can be used.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>JavaScript Power!<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<<script type="text/javascript">>
<<!--
function destroy()
 { 
   if (confirm("Are you sure you want to destroy this page?"))
    alert("What you thought I'd actually let you do that!?");
  else
    alert("That was close!");
 }
// -->>
<</script>>
<</head>>
<<body>>
<<div align="center">>
<<h1>>The Mighty Power of JavaScript!<</h1>>
<<hr />>
<<form action="#" method="get">>
<<input type="button" value="Destroy this Page" onclick="destroy();" />>
<</form>>
<</div>>
<</body>>
<</html>>

Prompts

JavaScript also supports the prompt() method for the Window object. A prompt window is a small data collection dialog that prompts the user to enter a short line of data, as shown here:

The prompt() method takes two arguments. The first is a string that displays the prompt value and the second is a default value to put in the prompt window. The method returns a string value that contains the value entered by the user in the prompt. The basic syntax is shown here:

resultvalue = window.prompt(prompt string, default value string);

The shorthand prompt() is almost always used instead of window.prompt() and occasionally programmers will use only a single value in the method.

result = prompt("What is your favorite color?");

However, in most browsers you should see that a value of undefined is placed in the prompt line. You should set the second parameter to an empty string to keep this from happening.

result = prompt("What is your favorite color?","");

It is important when using the prompt() method to understand what is returned. If the user clicks the Cancel button in the dialog or clicks the Close box, a value of null will be returned. It is always a good idea to check for this. Otherwise, a string value will be returned. Programmers should be careful to convert prompt values to the appropriate type using parseInt() or similar methods if they do not want a string value.

The next example shows the prompt() method in action.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>Ask the JavaScript Guru 1.0<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<<script type="text/javascript">>
<<!--
function askGuru()
 {
  var question = prompt("What is your question o' seeker of knowledge?","")
  if (question != null)
  { 
    if (question == "")
      alert("At least you could ask a question.");
    else
      alert("You thought I'd waste my time on your silly questions?");
   }
 }
//-->>
<</script>>
<</head>>
<<body>>
<<div align="center">>
<<h1>>JavaScript Guru 1.0<</h1>>
<<hr />>
<<br />>
<<form action="#" method="get">>
<<input type="button" value="Ask the Guru" onclick="askGuru();" />>
<</form>>
<</div>>
<</body>>
<</html>>

The format of these last three dialogs leaves a little to be desired. We’ll see that it is possible to create our own forms of these dialogs, and to do so we start first with creating our own windows.