Starting Your Script
Here is a quick summary of what we have decided:
Browser support: Support all.
Non-supporting browsers: Display a message saying they cannot access this portion of your site.
Location of script: Inline.
Objective: Prompt the user for a password when the page is accessed. If the correct password is entered, the user is redirected to the secure page. If an incorrect password is entered, the user is redirected to an error page.
Creating a Code Template
Now that our objectives are defined, the first thing we recommend you do is create a template. We usually include all the necessary <head> information and prepare the <body> portion in this template, which makes it extremely easy to add the necessary scripts and content. Listing 3.2 has a copy of the template I start with.
Handling Non-Supporting Browsers
The first thing we want to get out of the way in this example is how we will handle non-supporting browsers. Because we are not performing an excessive amount of XHTML for these users, it will be quick and easy to finish. The following snippet shows what will be included in this section.
As you can see, this was a very simple task, creating a message that will be displayed to the user. We included the text within bold tags (<b>...</b>) to ensure that it will show up well on the page.
Writing Your Code
For this example, we will be working in the <head> portion of the page. The first thing we need to do is create a dialog box for the user to enter the password. For this task, we will use the prompt() method. This will give us a dialog like the one shown in Figure 3.4 to pass the entered information back to our script.Figure 3.4 The prompt() dialog box.
The prompt() method is a method of the window object, and it takes two parameters that combine to have the following syntax:
When using this method, you should replace message with instructions for the user. This will be displayed above the field where the user will enter his data. The default parameter is used to specify a default set of text for the user. In our first script, we do not want to have a default, so we will simply pass it an empty string.
The key to using this dialog box is that it returns what the user enters. Using the information entered, we can check to see, in our example, if the proper password was typed. Based on this data we can redirect the user's browser appropriately.
In addition to the prompt() method, we will also be using the location property of the window object. We will set this property to redirect the browser to the appropriate page according to the success of the user's entry. The last thing we need to note is that we will include all of this code in a function that is called after the entire page has loaded.
The code that accomplishes this task is relatively short and can be seen in the following block:
Looking at this code, you see that we have defined a function called passCheck(). Within this function, we use an if..else conditional statement to verify the password entered by the user. Don't worry too much right now about how this worksit is covered in detail in Chapter 6, "Control Structures and Looping." All you need to understand at this point is that it is checking to see if the user entered "letmein" as the password. The == evaluation operator, which will be covered in Chapter 5, "Operators," performs this task.
If the user enters the correct password, he is redirected to the /secure.html page. If the user does not enter the correct password, his browser is redirected to the /error.html page.
Calling the Function
The last step in getting our script to work is to call the function. For this, we will use the onLoad event handler within the <body> element to call the function after the page is loaded. This event handler will be invoked, as mentioned, after the page finishes loading, at which time it will call the passCheck() function we defined. This entire line should look like the following: