JavaScript Primers #4

Joe Burns

Use these to jump around or read it all

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

The Concept

We've discussed objects and methods. Now let's start playing with events. First, allow me to throw a curve into the process. Events and Event Handlers are JavaScript, but they are "built-in" to HTML code rather than standing alone like the last two scripts we created. Events are to be embedded so they don't require the <SCRIPT> and </SCRIPT> commands. They themselves are not scripts, but rather small interfaces allowing for interaction between your page and your reader.

Think of Events as things that happen. They add life and interest to your Web site. They're things that make your viewers go "Ooooooo" without your having to create large JavaScripts.

There are multiple events and we'll get to them, but let's start with one of the most popular first, onMouseOver.

The Script

<A HREF="http://www.htmlgoodies.com"
onMouseOver="window.status='Go to the Goodies Home Page';
return true">Click Here</A>

The text above should go all on one line. I broke it into these sections to show it all.

The Script's Effect

Click Here

Run your mouse over the link above and watch the status bar at the bottom of the browser window.

Deconstructing the Script

Knowing what you already know, this one just about explains itself. So, let's look at it quickly and then start to play around with it.

First off,"onMouseOver" (notice the capitalization pattern) is an Event Handler of the hypertext link. Does that make sense? I'm using it inside of a hypertext link.

The format for the hypertext link remains the same. You use the same commands and the same double quotes. The Event Handler is stuck in right after the URL address. See that above?

The Event is called for by denoting "onMouseOver=". The pattern should look somewhat familiar now: Two items separated by a period. So far that has meant that one is an object and one is a method. Not here. In this case, "window" is an object, it exists; "status" is what's known as a "property" of the window. It is a smaller section of the window denoting where the following text should go. I usually keep it all straight by thinking that a method will usually be in the form of a verb, like "write" or "get". A property is a noun that exists as a smaller part of the item before the dot.

If "window" has a status property, that must mean that other properties of the window can be altered. That's correct, but let's not get ahead of ourselves here. We are currently concerned with the "window" and its "status" section.

The "window.status" is also followed by an equals (=) sign denoting that what follows is what should happen. In this case, what follows is text in single quotes. That text will show up in the status bar when you roll your mouse over the hypertext link.

Please notice once again that a semicolon ends the command line.

return trueThose extra two words have quite a bearing on what will happen when the mouse rolls over the link. If the words are present, then the script checks to see if a status bar is present. If the return is true, then the event occurs. Notice when you roll your mouse over the link, the text in the status bar is locked in. It doesn't change if you roll over the link again and again. (If you refresh the page, you'll be able to see that.)

But, what if we lose those two words? Well, let's think it out. If there is no check of the status bar, then the default will occur. If you remember your HTML, the default is to display the URL that the link is pointing to. Then, after the mouse is off the link, the event will take place. And since there is no check, the event will occur every time you pass the mouse over the link. It's actually a better effect, in my opinion.

Here's the same exact link as above. I just eliminated the words "return true." Reload the page, then roll your pointer back and forth over this link:

Click Here

Cool, huh?

Other Properties, Other Uses

Let's get back to that "properties" thing we talked about earlier. If the window has properties, other objects must have properties, too. How about a page's background color? That would be a property, wouldn't it? In HTML the command to change the background color is BGCOLOR. Same here, except now we're concerned again with capitalization. In JavaScript, it's written "bgColor" (capital "C"). So, let's think through creating a link that would change the window's background color using an onMouseOver event.

First off, this is a link so it's a pretty good bet that the format is the same as the format above. We'll keep it.
Are we changing the window or are we changing our old standby, the document? Well, where does the "bgColor" command go when you write a Web page? In the document. That must be the object we're concerned with. Let's change out "window" now with "document."
We want to change the document object's background, so let's change out "status" with "bgColor."
We no longer want text to appear, so let's change that text with a color. We'll use "pink."
When we move the mouse over the link we probably want the color to stay, whether the mouse runs over the link again or not, so we'll need to re-enter "return true" after the semicolon.

Here's what we got...

<A HREF="http://www.htmlgoodies.com"
onMouseOver="document.bgColor='pink';
return true">Click Here</A>

...and here's what it gives us. Roll your pointer over the link.

Follow this link to see it work

But I Want Both Effects

Okay, how do you think you'd do that? Let's think it through:

Common sense would suggest you write two onMouseOver commands. Let's try that.
The two commands are not separate from each other. We want them to occur at the same time so we cannot separate them using a semicolon because we know a semicolon is a statement terminator.
New Rule: Use a comma when separating multiple JavaScript events.
And what about all those pesky quotes? Remember, the quotes go around single items like text. Well, we want these two onMouseOver commands to happen as one so we only need quotes at the very beginning of the first one and the very end of the second one. That way the quotes surround it all, showing it to the browser as if it's one event. With me?
We'll probably still need the single quotes though...

Here's what we got...

<A HREF="http://www.htmlgoodies.com"
onMouseOver="document.bgColor='pink',
onMouseOver=window.status='Go to the Goodies Home Page';
return true">Click Here</A>

...and here's what we get:

Follow this link to see it work

These Event Handlers are great and there are a slew of them. Next primer we'll go over a handful and how to combine them to make multiple events.

You may have noticed that the primers are starting to "think things through" a bit. Please remember that this language is very logical. Later in this series, there will be a lesson just on the hierarchy of items because the language is so logical. For now, try taking a few minutes before you write to think out what must happen so your idea can come to life in script.

What You Have Learned

Your Assignment

Let's see if I can't trip you up on this one. I'm going to give you a new method, the alert(). What it does is pop up a small dialog box with text written across an OK button. See if you can get the alert box to pop up when your mouse rolls across a hypertext link. Here's the format:

alert('text that appears on the alert box')

Think it through, decide what must happen first, second, and so on. It's actually quite simple, not that that's a hint or anything....

Answer (this will open a new window)