- Initial Decisions
- Starting Your Script
- Your First Script
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Starting Your Script
By this time, you should be ready to start coding. You have decided what browsers you want to support, how you want to deal with non-supporting browsers, and where you want to store the scripts. This takes care of all of the technical aspects of writing JavaScript code. Now it is time to begin writing your scripts.
Defining Objectives
In your first script, we are going to create a simple pop-up dialog box that asks the user for a password. If the password is incorrect, the user is redirected to an error page. If the password is valid, the user is sent to the page he is requesting. Those whose browsers do not support JavaScript simply see a message saying they cannot access this page. Because this script is written in very basic JavaScript, it can be used in any supporting browser. For simplicity's sake, we also will keep all of our scripts inline rather than in an external source file.
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.
Listing 3.2 JavaScript Template File
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>My First JavaScript Script</title> <script type="text/javascript" language="JavaScript"> <!-- // Your code will go here... //--> </script> </head> <body> <!-- Content starts here --> </body> </html>
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.
<body>
<noscript>
<p>
<b>
Sorry, but your browser either does not support JavaScript or you
have it turned off. For information on JavaScript supporting browsers
or how to turn it back on, please see the website of your browser's
creator.
</b>
</p>
</noscript>
</body>
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
At this point the page is ready. Now we just need to write the necessary JavaScript code. By accomplishing all of the other tasks first, such as defining our objectives, creating a template, and handling non-supporting browsers, we have made sure that the page functions properly without any scripting on it. This is an important step; on many occasions we thought that our script had a problem when in fact we had not properly closed an XHTML element, or we had misplaced some comments.
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.){kind=link}
The prompt() method is a method of the window object, and it takes two parameters that combine to have the following syntax:
prompt("message","default");
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:
<script type="text/javascript" language="JavaScript">
<!--
function passCheck(){
if(prompt("Please enter your password","") == "letmein"){
window.location = "/secure.html";
}else{
window.location = "/error.html";
}
}
//-->
</script>
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 works—it 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:
<body onload="passCheck()">