Working with Window Methods

For all practical purposes, the methods associated with the JavaScript window object are used just as if they were functions. So there are a couple of reasons for looking at these methods (functions!) in this chapter. First, if you’re writing JavaScript code that will be opened in a browser, they’re quite useful.

In addition, because these are essentially built-in functions, using them will give you practice with using functions in general.

Tip

Technically, the methods described in this section are associated with the JavaScript window object (which is discussed more fully in Chapter 7, “ Working with Objects ”). For example, the alert method actually refers to window.alert. However, you can just refer to these methods without the object qualification—for example, alert—and JavaScript will know what you’re talking about.

Let’s go ahead and see how to work with some methods for displaying simple dialogs.

Tip

The calls to the methods shown in this section are themselves placed in JavaScript functions (these are shown in Listing 5-8). The reason is that for clarity you want to organize HTML pages using JavaScript so that the code assigned to an event—such as a button onClick event—is kept very short, sweet, and simple. A function call is much shorter than writing out the separate statements contained in the function.

Staying Alert

The alert method displays a simple message box with some text and an OK button.

Here’s a function that takes a text value as an input and displays the text value using the alert method:

 function showAlert(inText) {     alert (inText);  } 

Within an HTML form, you could create a text box and a button:

 <FORM>  ...     <TD> <INPUT Type=Text Name="alertText" Size=40> <TD> <INPUT Type=Button Value="Alert"  onClick='showAlert(alertText.value);'>  ...  </FORM>  ... 

The idea is that the user enters the text that will be displayed in a message box when the user clicks the Alert button (as you can see in Figure 5-9).

Figure 5-9: The text entered by the user is displayed in the message box.

The complete code for an HTML page that includes the showAlert function (as well as functions that display confirm and prompt boxes) is shown a little later in this chapter in Listing 5-8.

Confirming

The confirm method displays a message box with some text and OK and Cancel buttons. The confirm method (read: “function”) returns a value of true if the user clicks OK and false otherwise.

Here’s a function that shows a confirm box displaying the question “Do you want to dance?” (see Figure 5-10):

 function showConfirm(){     if (confirm("Do you want to dance?") == true)        return "The user wants to dance!"     else        return "No dancing tonight!";  } 

Figure 5-10: The confirm method displays a box with text and OK and Cancel buttons.

The showConfirm function returns the text string The user wants to dance! if the user clicks OK and the text string No dancing tonight! if the user clicks Cancel.

Here’s a fragment of HTML form code that calls the showConfirm function when the Confirm button is clicked and displays the return value in a text box, as shown in Figure 5-11.

Figure 5-11: The return value of the confirm method is either true or false , and you can branch depending on the value (in the figure, the text message displayed depends on the button clicked).

 <FORM>  ...     <INPUT Type=Text Name="decisionText" Size=40> <INPUT Type=Button Value="Confirm" onClick='decisionText.value =          showConfirm();'>  ...  </FORM>  ... 

By the way, Listing 5-8 shows the complete code for the HTML page that includes the showConfirm method and the form that invokes it.

Being Prompt

As Mel Brooks once said, “It’s good to be the king!” And, as the saying goes, “Promptness is the courtesy of kings.” Therefore, it’s good to be prompt, at least for something nice.

The prompt method displays a prompt box, which consists of some display text, a text box for the user to enter some text, and OK and Cancel buttons. The second parameter passed to the prompt method is the default text that’s displayed in the user entry text box (see Figure 5-12). (If you don’t want any text displayed in the box, the thing to do is to pass the method an empty string ("") as the second argument.)

Figure 5-12: The default text in the prompt box depends on the argument sent to the prompt method.

The following function, showPrompt, displays a prompt box using the text string passed to the function as the message to display (the second argument passed to the prompt method, "John Doe", generates the default value for the text box within the prompt message box):

 function showPrompt(inText){     var retVal = ""     retVal = prompt(inText, "John Doe");     if (retVal == "" || retVal == null)        return "nameless one";     else        return retVal;  }  

Do It Right!

Looking at the code for the showPrompt function, I bet you’re wondering if it isn’t a little overly complicated! Why doesn’t the following, simpler function work?

 function showPrompt(inText){     return prompt(inText, "John Doe");  } 

Good question! I’m so glad you asked. There are two problems with the simple version of this function. The first is that if the user clicks Cancel in the prompt box, the value returned from the function is the JavaScript special value null, meaning the return value is nothing at all. The second issue is that an empty string will be returned if the user clears the text box within the prompt and clicks OK.

You could test for both these conditions in the code that calls the showPrompt function, but as I said at the beginning of this section, it’s really a bad idea to put JavaScript code in HTML form event handlers. So, it’s a much better idea to perform these tests within the function itself. The following code:

 if (retVal == "" || retVal == null)     return "nameless one";  else     return retVal; 

uses a conditional statement to check whether the return value from the prompt method is the empty string ("") or (|| is the or operator) is null. If either is true, then an appropriate string is passed back ("nameless one"); otherwise, the return value of the prompt method is returned by the function.

The following fragment of HTML form code calls the showPrompt function when the user clicks the prompt button:

 <FORM>  ...     <INPUT Type=Text Name="nameText" Size=40> <INPUT Type=Button Value="Prompt" onClick='nameText.value = "Hello, " +            showPrompt("What is your name?");'>  ...  </FORM>  ... 

The showPrompt method itself shows a prompt message box, as you can see in Figure 5-12 and Figure 5-13.

Figure 5-13: The user enters text in the prompt box.

If the user enters text in the prompt box and clicks OK, the text is displayed in the HTML page, as shown in Figure 5-14.

Figure 5-14: The text entered by the user in the prompt box is displayed in the Web page.

By the way, Listing 5-8 shows the complete code for the HTML page that includes the showPrompt method and the form that invokes it.

Listing 5.8: Working with the Alert, Confirm, and Prompt Methods

 <HTML> <HEAD> <TITLE>     Simple dialogs     </TITLE> <SCRIPT>     function showAlert(inText) {        alert (inText);     }     function showConfirm(){        if (confirm("Do you want to dance?") == true)           return "The user wants to dance!"        else           return "No dancing tonight!";     }     function showPrompt(inText){        var retVal = ""        retVal = prompt(inText, "John Doe");        if (retVal == "" || retVal == null)           return "nameless one";        else           return retVal;       // line below produces ugly result if no user input!       // return prompt(inText, "John Doe");     }     </SCRIPT> </HEAD> <BODY> <FORM Name="theForm"> <TABLE cellspacing=5> <TR> <TD> <INPUT Type=Text Name="alertText" Size=40> <TD> <INPUT Type=Button Value="Alert" onClick='showAlert(alertText.value);'> </TR> <TR> <TD> <INPUT Type=Text Name="decisionText" Size=40> <TD> <INPUT Type=Button Value="Confirm"  onClick='decisionText.value =                    showConfirm();'> </TR> <TR> <TD> <INPUT Type=Text Name="nameText" Size=40> <TD> <INPUT Type=Button Value="Prompt" onClick='nameText.value = "Hello, " +                    showPrompt("What is your name?");'> </TR> </TABLE> </FORM> </BODY> </HTML>