Understand Web Page Scripting | How to Do Everything with HTML & XHTML

Although you can accomplish much in the area of Web design with XHTML, many of the exciting things that make Web sites come alive are far beyond XHTML’s scope. Even with the added power of Cascading Style Sheets, you are still bound by XHTML’s limitations as a markup language. Because it is not a programming language, XHTML cannot enable you to do much more than create static Web pages. If you want to create pages that your visitors can interact with, or pages that change dynamically, or even pages that are generated on the fly, you’ll need to give XHTML a shot in the arm. Although there are many ways you can do this, one of the best—and most popular—places to start is with JavaScript.

Before you begin working with JavaScript, you’ll find it helpful to understand a little about Web page scripting. Chapter 14 introduced the term script when dealing with the Common Gateway Interface (CGI). If you read that chapter, you might have noticed that sometimes the text referred to a CGI program, whereas other times it was called a CGI script. Although sometimes the two terms are used interchangeably, there is a distinct difference between a program and a script.

Tip

For more information on JavaScript, check out the following online resources: http://javascript.comwww.webreference.com/jshttp://devedge.netscape.com/library/manuals/2000/javascript/1.5/guide

A script is a program, but it differs from other types of programs in that it cannot stand on its own—you can’t download a script and run it on your computer like you can a spreadsheet, word processor, or computer game. For a script to function, it must work hand-in-hand with another application (such as a browser).

The CGI script mentioned in Chapter 14 is a server-side script. That means it remains on and works through your Internet server’s computer. JavaScript is used for client-side scripting. This type of script works on your visitor’s (the client’s) Web browser and uses that computer to process information. How does it get to your visitor’s computer? It is either downloaded as part of the Web page (like an inline or embedded style sheet) or can exist on your server as a plain text file that the browser reads whenever necessary (like an external style sheet).

Scripts Speed Information Processing

Why are scripts useful? For one thing, because they operate on your visitor’s computer, they can speed up the processing of information. For example, say you have a catalog and an order form on your site, and you want your visitors to see a tally of their orders before they submit them. You could do this using a CGI script, but then the browser would have to send the information to the server. After it had the data, the server would have to process it and then send it back to your visitor’s computer. All that takes time.

With a client-side script, all that processing can be done on your visitor’s computer without the need to send anything to the server, which saves your visitor time and might result in a happier customer. Additionally, not only can scripts speed things up, but they can make your pages more interesting, too.

Scripts Add Interactivity

Buttons that change when a mouse moves over them, pictures that display when your cursor hovers over a link, Web pages that seem to “talk” to your visitor—all this and more is possible when you use a script. How is this interactivity accomplished? It is done largely with events. What, exactly, is an event? Basically, an event is something that happens; however, in Web page scripting, the term means a lot more than that. An event is something that happens on your visitor’s browser. For example, when they move their mouse cursor over a button, that’s called a mouseover event. When the cursor is removed from the button, that’s called a mouseout event. When an event occurs, it can be used to activate an event handler. An event handler is what you use to program your page’s response to certain events.

Web page scripts enable you to anticipate different events and use event handlers to plan a response. The event acts like a trigger, causing the event handler to spring into action and do whatever you told it to. For example, for a mouseover event, you would use the onMouseover event handler. Likewise, for the mouseout event, you would use the onMouseout event handler. Sound pretty complicated? Perhaps the best way to see how these work is by a little experimentation.

Note

There are many more event handlers than onMouseover and onMouseout. Later in this chapter you will find a chart listing all the event handlers.

To see an event handler in action, try writing a simple script using the onClick event handler. Open template.htm and save it as clickevent.htm, then follow these steps:

Create a button with the <input /> element and type="button" attribute.
```
<input type="button" />
```
Put some text on the button itself. You do this with the value=" " attribute. With a button, you now have a possible “event” on the page.
```
<input type="button" value="Trigger an Event" /> 
```
Add an event handler—in this case it will be onClick. By using this event handler, you are telling the browser that something is to be done whenever the button is clicked.
```
<input type="button" value="Trigger an Event" onClick=" " />
```
Tell the browser what to do when the event occurs. For this illustration you will tell it to bring up an alert box with a message.
```
<input type="button" value="Trigger an Event" onClick="alert('Good Job!');" />
```

Caution

Whereas HTML is very forgiving, scripting languages are not. If even a quotation mark is out of place, you will receive an error message. Some things you need to watch for will be covered later in the section “Avoid Common Errors in Coding.” For now, make sure you copy the code exactly as written.

After you have put the preceding line of code (from Step 4) on your page, save it and display it in your browser. You should see a button in the upper-left corner of your screen that reads “Trigger an Event.” When you click the button, an alert window should pop up with the message “Good job!” as in the following illustration:

The creative use of events and event handlers enables you as a Web author to add a dimension to your pages that simply is not possible with HTML alone. However, speed and added interactivity are not the only benefits of using a scripting language. A Web page script also can extend HTML’s capabilities.

Scripts Can Give HTML a Boost

As a markup language, HTML is essentially limited to creating a document and defining its structure. For example, as demonstrated in Chapter 14, you can collect data with an HTML form but for the form to actually do anything with the data it receives, you need a CGI script. However, Web page scripting can give HTML a boost by extending some of its capabilities. For example, you can use a script to validate a form (make sure it has been correctly filled out) before it is sent off. If your visitors fail to fill out one of your required fields, they’ll receive a prompt that encourages them to try again, as shown next.

Scripts Have Their Disadvantages

There are certain disadvantages inherent in Web page scripting. First, scripting languages are considerably more complex than HTML or even CSS. Remember, even though they are limited in their application, scripting languages are programming languages—which implies that if you plan to write your own scripts, you will have to think (and write) like a programmer. In other words, you will need to think step-by-step through the task that you want the script to accomplish and then choose the appropriate commands to bring about the desired results. You can avoid this problem by using prewritten scripts. However, even with these you’ll need to understand the script well enough to debug it if you have a problem.

Another disadvantage of scripting is that a script can interfere with a search engine’s capability to index your site. Many search engines use automated programs that browse your site and index it according to the words they find near the top of the document. A large script, placed in the <head> </head> portion of your page, can skew the results because it will have a lot of text that is unrelated to the purpose or subject of your site.

Tip

If you decide to use scripts and want to avoid problems with search engines, save them as text documents (myscript.txt) and link to them. You’ll learn how to do this later in this chapter, in the section “Link to an External Script.”

Also, some older browsers do not support Web page scripts. Thus, your page can suffer doubly when such a browser loads it. The script will not run and, if the script is in the <body> of the page, the browser will ignore the <script> tags and treat the script as text to be included in the Web page. The results are not very attractive, as is shown here:

click to expand

Another disadvantage with scripts is that your visitor is not required to make use of them. This is just another reminder to you as a Web author that you do not have ultimate control over how your page is displayed when it arrives on your visitor’s browser. Visitors can turn off images, specify their own fonts and colors, use their own style sheets, and even disable JavaScript if they want to. Thus, if you have a page that is heavily dependent on scripts and someone visits you with their browser’s script option set to “off,” your page’s functionality might suffer.

All things considered, you are likely to find Web page scripting to be a useful addition to your Web authoring toolbox. It enables you to accomplish many things on your site that you couldn’t do otherwise. With that in mind, by now you might be wondering which scripting language you should use.

Project 23: Work with JavaScript

Although JavaScript is not the only language to choose from, it is without a doubt the best supported. The other alternatives are VBScript, which is based on Microsoft’s Visual Basic programming language, and JScript (Microsoft’s counterpart to JavaScript). However, because JavaScript is supported on all the major browsers (Internet Explorer, Netscape, and Opera), it should be your language of choice.

Although it is beyond the scope of this book to teach you to program in JavaScript, it is possible to give you a chance to experiment with it. By doing so you will at least develop a feel for how Web page scripts work and what you can do with them. To begin with, you need to know how to include JavaScript in your Web page properly.

Add a Script to a Web Page

As with Cascading Style Sheets, there are multiple ways to put a script into a page. Sometimes a script can be included as part of an HTML tag and other times as part of the <body> of the page. A script also can be placed in the page’s <head> portion or saved as a separate text file and linked to the page. If your script is going to be inline or embedded, you will need to use the <script> element to identify it and to let the browser know not to display it as part of the page. Try adding a script with the script element by opening template.htm, saving it as js1.htm, and following these steps:

Type the opening <script> tag.
```
<script>
```
Add an opening HTML comment tag just below the <script> tag.
```
<script> <!--
```
Add the language attribute to identify what scripting language you are using. In this case, it will be language="Javascript".
```
<script language="Javascript"> <!-- 
```
Add the type attribute to give the MIME type for the scripting language you will be using. For JavaScript, you will write type="text/javascript".
```
<script language="javascript" type="text/javascript"> <!-- 
```

Add a closing comment tag.

<script language="javascript" type="text/javascript"> <!--  -->

Type the closing </script> tag.

<script language="javascript" type="text/javascript"> <!-- -->  </script>

Insert a line of script on the line between the comment tags.

<script language="javacript" type="text/javascript"> Your line above has "javacript" and so is missing the letter s. <!-- document.write("My first JavaScript script");  --> </script>

Save the file and display it in your browser. As in the following screen shot, you should see a page with the line “My first JavaScript script.” Not very exciting, perhaps, but it’s a start.

Tip

Use comment tags () to hide your script from older browsers. Browsers that do not support JavaScript will ignore the script lines, whereas browsers that do support scripts will ignore the comment tags and execute the lines.

Link to an External Script

An external script, like an external style sheet, is a plain text file that contains a script for use on one or more Web pages. If you plan on doing a lot of Web page scripting, this is definitely the way to go, as it frees you from having to write the same script again and again. Instead, you often can write one script and then just link to it. In the following exercise you will see just how easy it is to link to an external script.

This exercise modifies your first JavaScript page (js1.htm) to include an external script that sets the background color to yellow and adds a line of text with the <h1> </h1> element. The first steps in linking to an external script are creating the script itself and saving it as a text file. You don’t need to use <script> tags when writing an external script; you need only the commands that you want the browser to execute. Open Notepad, Wordpad, or another text editor and type the following lines on the blank page. Remember, you must type the lines exactly as they are here:

document.bgColor = "yellow"; document.write("<h1>This is from an external script.</h1>");

When you have typed the lines, save the file as a plain text file with the name extscript.js. To link to this file, first you must add the <script> element to your page. Open js1.htm and save it as js2.htm. The body of your page should look like this code listing:

<body>    <script language="javascript" type="text/javascript">       <!-- document.write("My first JavaScript script");       -->    </script> </body>

To modify this code to link to the external script, add a second set of script tags. They can be placed either in the <head> or <body> portion of the page, as long as they are not inside or overlapping the other script tags. In the following listing, the additional script tags have been placed in the <head> of the page:

<head>    <script language="javascript" type="text/javascript"              src="/books/4/238/1/html/2/extscript.js">    </script> </head>   <body>    <script language="javascript" type="text/javascript">       <!-- document.write("My first JavaScript script");       -->    </script> </body>

click to expand