Diving into JavaScript

If you've read other JavaScript books, you may have had to slog through pages and pages about functions, methods, operands, and so on, before ever learning how to write even the simplest script. As you get into JavaScript, you'll need to understand those concepts and more, but you can start spiffing up your Web pages just by diving into JavaScript.

That's what this chapter is about. By the time you've finished, you'll know two handy scripts, one to add descriptive comments to the status bar, and the other to use the time to serve custom pages. More importantly, you'll understand why the scripts do what they do, and you'll be ready to wade a little more deeply into JavaScript.

The concepts we'll cover in this chapter include:

• Event handlers
• Variables
• Working with objects
• Writing to a document
• The if statement

Adding descriptive links

Figure 1-1. Displaying additional information in the status bar

Do you ever wish links could talk? In other words, wouldn't it be helpful to be able to tell users what to expect if they click on a link? You can do this easily with JavaScript.

Figure 1-1 shows the O'Reilly & Associates Web site. Each of the book covers shown on the page takes the user to the book's catalog page, where there is more detailed information about the book. However, a book cover thumbnail doesn't tell users much about where they'll go if they click on the image. To solve this problem, we can display a short description of the link in the browser's status bar when the user moves the mouse over a cover image. If the descriptions are well written, they'll add useful context to the site. Here, putting the mouse over the Learning Cocoa cover displays the text "Click here to see the catalog page for this book" in the status bar. This is really quite simple to do, as shown in Example 1-1.

Example 1-1: Code for adding status bar text to a link

<a href="http://www.oreilly.com/catalog/learncocoa/"
   onMouseOver="window.status =
      'Click here to see the catalog page for this book'; return true;">
<img width="44" height="100" border="0" src="learning_cocoa.gif"></a>

The Event

The link in Example 1-1 looks like a normal link, but it's obviously a little different. Inside the <a> tag, there is a small piece of JavaScript code. The code starts (and the HTML ends) with onMouseOver; this is one of JavaScript's built-in event handlers. An event handler is code that runs when an event occurs. What's an event? It's something that happens, such as the user placing the mouse over a link or a page loading.

In this case, we're dealing with the onMouseOver event, which occurs when the mouse moves over the link. Since this event handler is located in the link that surrounds the image, the event occurs when the mouse is placed over that image, and not anywhere else on the page.

Event handlers can be used in many elements of the page, including links, form buttons, and images. Table 1-1 lists some common event handlers supported by JavaScript, the tags where they can be used, and the events they handle.

Event name	Where it goes	When it works
onMouseOver	Links (and images within links)	When the mouse moves over a link
onMouseOut	Links (and images within links)	When the mouse moves out of a link
onClick	Links (and images within links), button elements	When the user clicks on a link or button element
onChange	Select menus, text input elements	When an option is selected or the text is changed
onSubmit	Forms	When the form is submitted
onLoad	Body, frameset, images	When the document or image is done loading
onUnload	Body, frameset	When the document is exited

The code that follows onMouseOver runs when the event occurs (in this case, when the mouse moves over the link). Combining the event handler with some useful code gives you a link that does something when the mouse moves over it. In Example 1-1, the code displays the description of the link in the browser's status bar.

It is important to note that onMouseOver is followed by an equal sign (=). The equal sign says, "When onMouseOver occurs, run the following code." The code that follows must be surrounded by double quotes so the handler knows which code to run (all the code in quotes, and nothing else). In programming terms, the equal sign assigns a value to the event handler. Of course, this shouldn't be a foreign concept, as you use the equal sign to assign values to attributes in HTML all the time (e.g., <a href="page.html">).

Designing with JavaScript, 2nd Edition
Applying onMouseOver To Your Links - Page 2