JavaScript: Windows and Frames
Pages: 1, 2, 3, 4, 5, 6, 7

Simple Dialog Boxes

Three commonly used Window methods are alert( ), confirm( ), and prompt( ). These methods pop up simple dialog boxes. alert( ) displays a message to the user, confirm( ) asks the user to click an Ok or Cancel button to confirm or cancel an operation, and prompt( ) asks the user to enter a string. Sample dialog boxes produced by these three methods are shown in Figure 13-1.

Note that the text displayed by these dialog boxes is plain text, not HTML-formatted text. You can format these dialog boxes only with spaces, newlines, and various punctuation characters. Adjusting the layout generally requires trial and error. Bear in mind, though, that the dialog boxes look different on different platforms and in different browsers, so you can't always count on your formatting to look right on all possible browsers.

Some browsers (such as Netscape 3 and 4) display the word "JavaScript" in the titlebar or upper-left corner of all dialog boxes produced by alert( ), confirm( ), and prompt( ). Although designers find this annoying, it should be considered a feature instead of a bug: it is there to make the origin of the dialog box clear to users and to prevent you from writing Trojan-horse code that spoofs system dialog boxes and tricks users into entering their passwords or doing other things that they shouldn't do.

The confirm( ) and prompt( ) methods block--that is, those methods do not return until the user dismisses the dialog boxes they display. This means that when you pop up one of these boxes, your code stops running and the currently loading document, if any, stops loading until the user responds with the requested input. There is no alternative to blocking for these methods--their return value is the user's input, so they must wait for the user before they can return. In most browsers, the alert( ) method also blocks and waits for the user to dismiss the dialog box. In some browsers, however (notably Netscape 3 and 4 on Unix platforms), alert( ) does not block. In practice, this minor incompatibility rarely causes problems.

Example 13-1 shows some typical uses of these methods.

Example 13-1: Using the alert( ), confirm( ), and prompt( ) methods

// Here's a function that uses the alert(  ) method to tell the user
// that form submission will take some time and that the user should
// be patient. It would be suitable for use in the onsubmit event handler
// of an HTML form. 
// Note that all formatting is done with spaces, newlines, and underscores.
function warn_on_submit(  )
{
    alert("\n_________________________________________________  _\n\n" +
          "                   Your query is being submitted...\n"    +
          "_________________________________________________  _\n\n"   +
          "Please be aware that complex queries such as yours\n"     +
          "     can require a minute or more of search time.\n\n"    +
          "                         Please be patient.");
}
 
// Here is a use of the confirm(  ) method to ask if the user really
// wants to visit a web page that takes a long time to download. Note that
// the return value of the method indicates the user response. Based
// on this response, we reroute the browser to an appropriate page.
var msg = "\nYou are about to experience the most\n\n" +
          "                -=| AWESOME |=-\n\n" +
          "web page you have ever visited!!!!!!\n\n" +
          "This page takes an average of 15 minutes to\n" +
          "download over a 56K modem connection.\n\n" +
          "Are you ready for a *good* time, Dude????";
 
if (confirm(msg)) 
    location.replace("awesome_page.html");
else
    location.replace("lame_page.html");
 
// Here's some very simple code that uses the prompt(  ) method to get
// a user's name and then uses that name in dynamically generated HTML.
n = prompt("What is your name?", "");
document.write("<hr><h1>Welcome to my home page, " + n + "</h2><hr>");

The Status Line

Web browsers typically display a status line at the bottom of every window (except for those explicitly created without one), where the browser can display messages to the user. When the user moves the mouse over a hypertext link, for example, the browser usually displays the URL to which the link points. And when the user moves the mouse over a browser control button, the browser may display a simple context help message that explains the purpose of the button. You can also make use of this status line in your own programs. Its contents are controlled by two properties of the Window object: status and defaultStatus.

Although web browsers usually display the URL of a hypertext link when the user passes the mouse pointer over the link, you may have encountered some links that don't behave this way--links that display some text other than the link's URL. This effect is achieved with the status property of the Window object and the onmouseover event handler of hypertext links:

<!-- Here's how you set the status line in a 
hyperlink. -- Note that the event handler *must* return 
true for this to work. -->
Lost? Dazed and confused? Visit the
<a href="sitemap.html" onmouseover="status='Go to Site 
Map'; return true;">
  Site Map
</a>
 
<!-- You can do the same thing for client-side image maps.-->
<img src="images/imgmap1.gif" usemap="#map1">
<map name="map1">
  <area coords="0,0,50,20" href="info.html"
    onmouseover="status='Visit our Information Center';
    return true;">
  <area coords="0,20,50,40" href="order.html"
    onmouseover="status='Place an order'; return true;">
  <area coords="0,40,50,60" href="help.html"
    onmouseover="status='Get help fast!'; return true;">
</map>

The onmouseover event handler in this example must return true. This tells the browser that it should not perform its own default action for the event--that is, it should not display the URL of the link in the status line. If you forget to return true, the browser overwrites whatever message the handler displays in the status line with its own URL. Don't worry if you do not fully understand the event handler in this example. We'll explain events in Chapter 19.

When the user moves the mouse pointer over a hyperlink, the browser displays the URL for the link, then erases it when the mouse moves off the hyperlink. The same is true when you use an onmouseover event handler to set the Window status property--your custom message is displayed while the mouse is over the hyperlink and is erased when the mouse moves off the link.

The status property is intended for exactly the sort of transient message we saw in the previous example. Sometimes, though, you want to display a message that is not so transient in the status line--for example, you might display a welcome message to users visiting your web page or a simple line of help text for novice visitors. To do this, you set the defaultStatus property of the Window object; this property specifies the default text displayed in the status line. That text is temporarily replaced with URLs, context help messages, or other transient text when the mouse pointer is over hyperlinks or browser control buttons, but once the mouse moves off those areas, the default text is restored.

You might use the defaultStatus property like this to provide a friendly and helpful message to real beginners:

<script>
defaultStatus =
 "Welcome!  Click on underlined blue text to navigate.";
</script>