Lesson 7: onUnloadandonMouseOut, the After-Effect Commands Lesson 8: HTML 4.0, the <SPAN>Flag, and Some New Event Handlers Lesson 9: Let’s Go!
Lesson 10: The Second End-of-Chapter Review Using Escape Characters
Lesson 5: JavaScript’s onMouseOver Event Handler
We’ve discussed objects, methods, and properties. Now let’s start playing with events. Think of events as things that happen. They add life and interest to your Web site; they’re things that make your viewers say, “Ooooooo,” without your having to create large JavaScripts.
Event handlers are the commands that detect the user’s input and trigger an event.
Now allow me to throw a curve into the process. Events, created using event handlers, are JavaScript, but unlike what you’ve seen so far, they are “built in” to HTML code rather than standing alone. Event handlers are meant to be embedded, so they don’t require the
<SCRIPT>and</SCRIPT>flags. They themselves are not scripts but are small interfaces allow-ing for interaction between your page and your reader.
JavaScript Goodies
30
Several events exist, and we’ll get to them, but let’s start with one of the most popular ones:
onMouseOver. Consider the following JavaScript:
<A HREF=”http://www.htmlgoodies.com”
➥onMouseOver=”window.status=’Go to the Goodies Home Page’;
➥ return true”>Click Here</A>
The purpose of this script is to show text in the status bar, as shown in Figure 2.1, when your user rolls her mouse over the hypertext link.
Figure 2.1
TheonMouseOverevent in the script makes text appear in the status bar.
To see the script working on your computer, click Lesson Five Script Effect One in your down-load packet or see it online at http://www.htmlgoodies.com/JSBook/lesson5effect1.
html.
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,onMouseOver(notice the capitalization pattern) is an event handler. In this case it is triggering when an event occurs in conjunction with the hypertext link. Does that make sense? We’re using it inside the hypertext link.
The HTML format for the hypertext link remains the same. You use the same commands and the same double quotation marks. The event handler is stuck in right after the URL
address, as you can see in the code. Now, just to be fair, the event handler doesn’t have to be after the URL. It could go before, right after the A, but I like it sitting after the URL. It seems to be written in order when it’s sitting after the URL. But, if you want it just after the A, go for it. To each their own.
The event is called for by writing onMouseOver=and then telling the browser to do some-thing when the mouse actually does pass over. In this case, it’s“window.status=’Go to the Goodies Home Page’.
The pattern should look somewhat familiar now: two items separated by a period. The windowis an object. It exists. statusis a property of windowand is the smaller section of the window where status messages go. You might be familiar with the traditional Document Donetext that always appears in the status bar when an HTML page is finished loading. The window.statusstatement tells the browser where the following text should appear, which in this case is in the status bar.
Note
Is it getting confusing remembering which are properties and which are methods? I try to keep them straight by thinking that a method will usually be in the form of a verb, such as writeorgo. A property is a noun that exists as a smaller part of the item before the dot.
In the script, window.statusis also followed by an equal sign (=) telling the browser that what follows is supposed to happen when the mouse actually does pass over. In this case, what follows is text in single quotation marks:
window.status=’Go to the Goodies Home Page’;
That text will show up in the status bar when the user rolls her mouse over the hypertext link.
Oh, Those Double and Single Quotation Marks
Match them up. When you use double quotation marks at the start of something, use dou-ble quotation marks at the end. If you use single quotation marks, use single quotation marks at the end.
The best method to keep the quotation marks straight in your own mind is to think that there is a hierarchy to them. I keep it straight by thinking that double quotation marks always go on the outside. Single quotation marks sit inside double quotation marks. If there’s something inside single quotation marks, such as an HTML attribute, I don’t give it quotation marks. Here’s an example:
OnClick=”location.href=’page.html’”
JavaScript Goodies
32
See how the double quotation marks surround the single quotation marks? If you follow that hierarchy thinking, you’re more likely to be sure the quotation marks line up single with single and double with double.
But that is simply a suggestion. As long as you make the quotation marks equal, you’re good to go.
That said, make a point of keeping an eye on the quotation marks pattern in each of your scripts. They are, quote, important.
Get it? “Quote” important? Ha! I kill me.
The Semicolon
In JavaScript, the semicolon acts as a statement terminator—it basically says this code statement is done.
In this script, the semicolon is used because the effect we wanted to achieve through the event handler is finished:
onMouseOver=”window.status=’Go to the Goodies Home Page’;
➥ return true”>Click Here</A>
Now let’s do something new.
So why not write the code to a new line? You did just fine without a semicolon in Chapter 1, “The Basics,” when you wrote document.writestatements. Well, that was a different story; each of those document.writestatements sat on its own line and had only one func-tion. This is different. Now there are two code statements: First there’sonMouseOverand then that return truestatement.
That’s why this code is all on the same line separated by a semicolon. The JavaScript knows the two items are related, and now it also understands where one stops and the other begins, thanks to the semicolon.
It should be said here that even though that semicolon is not necessary, it is good practice to use one every time you end a line of code. It will help you quickly see where the lines end and help you be a better JavaScript author. Really. I wouldn’t lie to you.
Now, what about that return truecode?
return true
Those extra two words have quite a bearing on what happens when the mouse rolls over the link. If the words are present, the return truestatement allows the script to overwrite whatever’s there. Notice in the example that when the user rolls her mouse over the link,
the text in the status bar is locked in. It doesn’t change if she rolls over the link again and again. If you try this example yourself and refresh the page, you’ll be able to see the effect a little better.
But what if you lose those two words? Well, let’s think it out. If you do not have permis-sion to overwrite what’s in the status bar, then you can’t overwrite what is in the status bar.
When the mouse moves away from the link, the event will occur only once.
If you remember your HTML, the default is to display the URL to which the link is point-ing. Then, after the mouse is off the link, the onMouseOverevent takes place. The event occurs every time the mouse passes over the link. It’s actually a better effect, in my opinion.
To see what the effect would look like losing the return truecode, click Lesson Five Script Effect Two in your download packet or see it online at http://www.htmlgoodies.com/
JSBook/lesson5effect2.html.
Other Properties, Other Uses
You know other objects must have properties, too. How about a page’s background color?
In HTML code, the attribute to change the background color is BGCOLOR. It’s the 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 back-ground color using an onMouseOverevent:
First off, this will be a link, so it’s a pretty good bet that the format is the same as the format in the earlier script. So, you should keep it.
Are you changing the window, or are you changing your old standby, the document? Well, where does the BGCOLORcommand go when you write a Web page? It’ll be in the document, so that must be the object you’re concerned with. Therefore, change window in the earlier code to document.
You want to change the documentobject’s background, so change statustobgColor. You no longer want text to appear, so change that text to a color. Let’s use pinkfor this example.
When the mouse moves over the link you probably want the color to stay whether the mouse runs over the links again or not, so you’ll need to reenter the return true after the semicolon.
Here’s the resulting JavaScript:
<A HREF=”http://www.htmlgoodies.com”
➥onMouseOver=”document.bgColor=’pink’; return true”>Click Here</A>
JavaScript Goodies
34
To see the background color effect, click Lesson Five Script Effect Three in your download packet or see it online at http://www.htmlgoodies.com/JSBook/lesson5effect3.html. But what if you want both effects—the background color change and the text in the status bar? Okay, 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. You want them to occur at the same time, so you can’t separate them using a semicolon because you know a semicolon is a statement terminator. Here’s a new rule: Use a comma when setting multiple JavaScript events.
And what about all those pesky quotation marks? Remember that the double quotation marks go around the entire event handler statement, and single quotation marks go around the effects, such as text to be printed or in the color to be used:
You want these two onMouseOvercommands to happen as one, so you need double quotation marks only at the very beginning of the first event handler statement and at the very end of the second one. That way, the quotation marks surround it all, showing it to the browser as if it were one event.
The single quotation marks surround the color and the text.
Here’s the resulting JavaScript:
<A HREF=”http://www.htmlgoodies.com”
onMouseOver=”document.bgColor=’pink’,
➥onMouseOver=window.status=’Go to the Goodies Home Page’;
➥return true”>Click Here</A>
You can see this double effect by clicking Lesson Five Script Effect Four in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/lesson5effect4.html. These event handlers are great, and there are a slew of them. The next lesson discusses a whole handful.
Note
You might have noticed that the lessons are starting to “think things through” a bit.
Remember that the JavaScript language is very logical. Later in this book is a lesson just on the hierarchy of items because the language is so logical. Just for now, though, try taking a few minutes before you write and thinking out what must happen for your idea to come to life in script.
Your Assignment
Let’s see whether I can’t trip you up on this one. I’m going to give you a new method for this assignment: alert(). What it does is pop up a small dialog box with text written above an OK button. See whether 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: What must happen first, second, and so on? It’s actually quite simple (not that that’s a hint or anything).
See a possible answer by clicking Lesson Five Assignment in your packet download, or see it online at http://www.htmlgoodies.com/JSBook/assignment5.html.