JavaScript Primers #10

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

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.

Place your mouse on and off of this

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:

Create a page with a hypertext link.
The link should place the text "Hello browser name user: Click here!" in the status bar when the mouse passes over.
The text "You should leave page URL right way" will then appear when the mouse moves off of the link.
When the link is actually clicked, an alert should pop up that reads: "Leaving so soon? It's only current time."
The time should be created through a function.
Do not use an onClick command to get the alert box. Use the onUnload command.