You have, in fact, used the window object in every lesson so far. The alert() and prompt() functions are actually methods of the window object. In JavaScript the window object is implied, so it's possible to access its properties and methods without explicitly specifying window before a variable or method. For example, as far as the browser is concerned, the following two lines of code are identical:

window.alert("Hello, Browser!");
alert("Hello, Browser!");

This concept can be taken a step further with variables and functions. When you create a variable or function in the global scope, you actually create a property or method of the window object. Look at this code:

var someVariable = "Some value"; // is same as window.someVariable = "Some value";

function showSomeVariable() {
    alert(window.someVariable); // explicitly use window
}

window.showSomeVariable(); // explicitly use window

Here a variable called someVariable is created and given a string value. Next a function called showSomeVariable() is declared; its body contains a call to the alert() method and passes the window.someVariable property to it. The final line of this code explicitly uses the window object to execute the showSomeVariable() method. The result of this code can be seen in Figure 10-1.

Figure 10.1. Figure 10-1

All global variables and functions are members of the window object; thus, you can access them by explicitly using the window object. However, it is conventional to omit the explicit use of window unless there is a reason to use it. You'd want to use it, for example, to deal with scope when a local variable within a function has the same name as a global variable. Consider the following code:

var someVariable = "Global value";

function showSomeVariable() {
    var someVariable = "Local value";

    alert(someVariable); // Local value
    alert(window.someVariable); // Global value
}

In this code a global variable called someVariable is initialized with a string value. Next the showSomeVariable() function is declared, and its first statement is the initialization of a variable called someVariable — the same name as the global variable. Inside the function, the someVariable identifier refers to the local variable. In order to access the global variable with the same name, you must prepend it with window; otherwise, JavaScript retrieves the local variable.

The general rule of thumb is to omit window unless you absolutely need to explicitly specify the global object.

In Lesson 8, you learned how to create custom data types by writing a constructor function and using the this variable inside it to create properties. The end of Lesson 8 instructed you to always use the new keyword when calling a constructor function. Now that you know that global functions are actually methods of the window object, you can begin to see what happens when you call a constructor function without the new keyword. First, here is some code that correctly calls a custom data type's constructor:

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

var person = new Person("Jeremy", "McPeak");

This code creates a Person data type and correctly calls the constructor for that data type. A new Person object is created and assigned to the person variable. There is nothing wrong with this code. Compare it to the following code, which omits the new keyword:

var person2 = Person("Jeremy", "McPeak");

Here a statement calls the Person() function without prefixing it with new. JavaScript sees the call as being like any other function call and executes it. Because Person("Jeremy", "McPeak") is the same as window.Person("Jeremy", "McPeak"), the this variable is bound to the window object; therefore, the code within the function creates two global variables, firstName and lastName, and assigns them a value of whatever was passed to the function. Also, since Person() does not return a value, the person2 variable contains a value of undefined. So not only has this code added unnecessary variables to the global scope, but code depending on person2 breaks because person2 is undefined instead of a Person object.

Again, it is very, very important to always use the new keyword when calling a constructor function.

The alert dialog box is used to display a message to the user. The window contains one OK button, which is used to close the dialog. Closing the alert box does not cause any special JavaScript to run; it's simply a box to display information. Figure 10-2 shows an alert box in the Chrome browser.

Figure 10.2. Figure 10-2

The code that generates the alert box in this figure is as follows:

alert("Hello, Alert box!");

Use the alert() method to show this type of dialog. Its only parameter is the data to display to the user. If you want to get a user's input with a dialog box, use the prompt() method.

The prompt dialog box's purpose is to prompt the user to input data. Figure 10-3 shows what a prompt dialog box looks like in Chrome.

Figure 10.3. Figure 10-3

The prompt box might look different in other browsers, but they all have the same basic components: a message to the user, a textbox, an OK button, and a Cancel button. The following code generates the prompt seen in Figure 10-3:

var name = prompt("Please enter your name.", "Default Text");

The prompt() method accepts two arguments. The first is the message to display to the user. The second is optional and determines the default text entered in the textbox.

Clicking OK causes the prompt method to return the text typed into the textbox to the caller. In the case of this code, the value of the name variable depends on what text is in the textbox when the user clicks OK. If the user clicks Cancel, the prompt() method returns null. Therefore, when relying on the prompt() method to get data from the user, make sure the data returned is not null, like this:

if (name != null) {
    // do something with data
}

The prompt() method is an obtrusive means of getting data from the user. From a user-interface perspective, form elements within a web page are a better means of acquiring text-based user input. Not only can form elements take on the look and feel of your web application, but you can acquire multiple pieces of data without having to display an ugly pop-up window for user input.

There is, however, a dialog box that gets input from the user that is ideal in some situations.

Sometimes you want the user to decide how your program should behave. You see this type of dialog box frequently in some operating systems. For example, a dialog box may ask you if you really do want to delete a file when you press the Delete key with a file selected. It waits for your input and deletes the file if you chose Yes. This is the idea behind the confirm dialog box. Its purpose is to provide the user with a yes-or-no option, and your application can process data according to the user's input.

You can show the confirm dialog box by calling the confirm() method. It accepts an argument containing a message to display to the user, and it returns a Boolean value based on the button the user presses. The following code uses the confirm() method in an if statement:

if (confirm("Is it sunny today?")) {
    alert("Let's go outside");
} else {
    alert("Let's stay inside");
}

Here a confirm dialog box is shown in Figure 10-4 to the user, asking if it's sunny outside. If the user clicks OK, the confirm() method returns true and an alert box displays the text "Let's go outside." If the user clicks Cancel, he or she sees a message that says, "Let's stay inside."

Figure 10.4. Figure 10-4

The confirm dialog box allows your application to be considerate of the user by asking the user's permission to execute code that performs an obtrusive action, such as navigating unexpectedly to another web page using the location object.

There are many ways to reload a web page in the browser. It's common to find the <meta/> element used to reload the page after a set amount of time, but JavaScript is typically a better solution, as you can control how the page refreshes itself to fit the needs of your application.

To reload the page you use the reload() method. It accepts an optional Boolean argument that determines if the browser performs a full refresh in the event that the webserver says the document hasn't been modified. If the webserver responds that a web page hasn't been modified since it was last requested by the browser, the browser normally loads the page from its cache. By passing a value of true to the reload() method, you can ensure that the document is always retrieved from the webserver; omitting the parameter lets the browser load the page from the cache. The following code demonstrates the use of the reload() method:

location.reload(true);

Here the reload() method is called on the location object. Remember that window is implied, so this code actually translates to window.location.reload(true). A value of true is passed to this method, so it will always retrieve the page from the webserver.

Navigating away from the current page to another is probably the most common action for which the location object is used. There are two ways to do this: The first is to use the location object's href property, like this:

location.href = "http://www.google.com";

This code assigns a new URL to the href property, and the browser automatically navigates to the page (Google's search page in this case). You can, however, simplify this code by omitting the href property:

location = "http://www.google.com";

This code performs the same function as the previous example, and it's actually the preferred method of navigating to a different page.

For this lesson, you need a text editor; any plain text editor will do. For Microsoft Windows users, Notepad is available by default on your system or you can download Microsoft's free Visual Web Developer Express (www.microsoft.com/express/web/) or Web Matrix (www.asp.net/webmatrix/). Mac OS X users can use TextMate, which comes as part of OS X, or they can download a trial for Coda (www.panic.com/coda/). Linux users can use the built-in VIM.

You also need a modern web browser. Choose any of the following:

Create a subfolder called Lesson10 in the JS24Hour folder you created in Lesson 1. Store the files you create in this lesson in the Lesson10 folder.

Write a simple application that either navigates to a different page or reloads the current page, based on the user's input.

To get the sample code files you can download Lesson 10 from the book's website at www.wrox.com.