JavaScript Primers #10

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

There are two last Event Handler commands you should have in your arsenal: onMouseOut and onUnload (again, watch the capitalization pattern). I grouped these two together because they act after the fact.

You already know that the onMouseOver commands make things happen when the mouse passes over something, like a link. The onMouseOut acts after the mouse leaves the link. You also know the onLoad command makes something happen when the page loads. Well, the onUnload
command makes something happen when the user “Unloads” or leaves the page.

The Script

This produces the mouseOver effects:

<A HREF=”Unloadpage.html” onMouseOver=”window.status=’Hey! Get off of me!’;

return true

“onMouseOut=”window.status=’Much better – Thanks’; return true”>

Place your mouse on and off of this</A>

This produces the effect when you leave the page:

The Script’s Effect

First one, then the other. Pass your mouse over the link a couple of times, watching the status bar at the bottom. After you see the effect, click on the link to see the onUnload effect.

Deconstructing the Script

There’s not a lot to tell that you probably haven’t figured out for yourself at this point. The mouseOver effects are created by the onMouseOver and onMouseOut commands.

Please notice that the two commands are quite separate from each other. You do not want these happening at the same time. Remember a few primers back when we separated two Event Handlers with a comma so they would occur simultaneously? Not here. We do not want these two effects to occur together. We want one thing to happen when the mouse passes over and another when the mouse moves off. So, we write them as two totally separate commands, each containing their own “return true” statements so the text remains after the fact.

The effect when we’re leaving the page was created by adding the onUnload=”alert(‘Leaving so soon?’)” command to the BODY command of the HTML document. Please notice the placement of the double and single quotes. You cannot use the double quotes surrounding the text because that would mean double quotes inside of double quotes. The browser would see it as the end of a line and not understand what follows. Error.

What You Have Learned

Your Assignment

We’re going to use a function, an onUnload, an onMouseOver, and an onMouseOut in this assignment. Here’s what I want to happen:

The Concept

The Script

The Script’s Effect

Deconstructing the Script

What You’ve Learned

Your Assignment