Section 14.5. Simple Dialog Boxes

14.5. Simple Dialog Boxes

The Window object provides three methods for displaying simple dialog boxes to the user. alert( ) displays a message to the user and waits for the user to dismiss the dialog. 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.

Although these dialog methods are extremely simple and easy to use, good design dictates that you use them sparingly, if at all. Dialog boxes like these are not a common feature of the web paradigm, and they have become much less common now that more capable web browsers support scripting of the document content itself. Most users will find the dialog boxes produced by the alert( ), confirm( ), and prompt( ) methods disruptive to their browsing experience. The only common use for these methods today is for debugging: JavaScript programmers often insert alert( ) methods in code that is not working in an attempt to diagnose the problem. (See Example 15-9 for a debugging alternative.)

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.

Some browsers 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 crackers from writing Trojan-horse code that spoofs system dialog boxes and tricks users into entering their passwords or doing other things they shouldn't do.

The confirm( ) and prompt( ) methods blockthat is, these 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 the methods 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.

Example 14-5 shows one possible use of the confirm( ) method, which produces the dialog box shown in Figure 14-2.

Figure 14-2. A confirm( ) dialog box

Example 14-5. Using the confirm( ) method

 function submitQuery( ) {     // This is what we want to ask the user.     // Limited formatting is possible with underscores and newlines.     var message = "\n\n\n\n" +         "_________________________________________________\n\n" +         "Please be aware that complex queries such as yours\n"     +         "may require a minute or more of search time.\n"    +         "_________________________________________________\n\n\n"   +         "Click Ok to proceed or Cancel to abort";     // Ask for confirmation, and abort if we don't get it.     if (!confirm(message)) return;     /* The code to perform the query would go here */ }