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).
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.
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.
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!');" />
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.
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.
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.
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:
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.
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.
Add an opening HTML comment tag just below the <script> tag.
Add a closing comment tag.
Type the closing </script> tag.
Insert a line of script on the line between the comment tags.
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.
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:
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: