JavaScript is an object-oriented language. That mean it lets you program with special structures called objects. JavaScript has made things easy by treating most common HTML constructs like Links, Forms, Frames, etc. as objects. The Buttons we just learned about are also objects.

Having these constructs as objects makes the HTML much easier to manipulate, as we will see with href's.

Where buttons just have an onClick event handler, href's have onClick and onMouseOver. onMouseOver does something every time you move the cursor over the Link.

Let's look at an example:

Back to the JavaScript page

Lets look at this example a little.
What happens when you move the mouse over the Link? What text is displayed at the bottom of your browser?
The onMouseOver event handler sets the window.status (the text at the bottom of your browser) to "Guide to JavaScript". The "return true" is necessary when setting the window.status from an event handler.
Notice also, that the onClick handler does almost the same thing as it did with the Button object. The only difference is that after the onClick event handler is executed, the Link is loaded.

Both onClick and onMouseOver can call any function. Let's look at a different example:

Can't touch this!

Notice anything annoying about this Link? You can never actually click it. Every time you move your mouse over the link to click it, the alert function gets called. This example demonstrates why you shouldn't alert with onMouseOver.

Click me!

Because the variable count is declared outside of both the functions, it's called a global variable. That means that it can be accessed by all the functions in the program.
Was the number returned is much higher than the number of times you called the onMouseOver handler. Why? Well, really it's not. The onMouseOver handler is called for every unit of area you cross in moving your mouse across the link, if you're using a browser older than Netscape 3.0b5. 3.0b5, I've just discovered in reviewing this page, returns a correct count.

As can be seen from the previous two examples, it's best to only use the onMouseOver event handler for setting the window status.

Now we'll look at way we can manipulate Links.

First, JavaScript keeps an array of all the links on the page. An array is like a CD tower. There are 100 slots to put CDs into. You can put a CD into whatever slot you want. If you want to tell someone to get a CD for you, you tell them to get the 3rd from the top, or the 20th from the top.
Arrays work the same way, except there is no upper limit in JavaScript on the number of things you can put in the array. And, arrays start with the 0th from the top, so the first position is numbered 0, the second is 1, etc.

JavaScript keeps an array called document.links[] which contains all of the links on the page. The first link would be document.links[0], etc.
If you need to refer to a specific link in a program, the links array is how you do it.

So we can find the link. What can we do to it?
Below is a list of some of the methods available for the link object.

Variable Link

 


Variable Link

 


The preceding example demonstrates not only the use of Link methods, but the
use of Buttons in conjunction with Links.

Let's examine the functions.

switch_link() uses the global variable toggle and the links array to swap the
link between NPGuide.html and my homepage. toggle is a boolean variable. When it's
false, that means the link is pointing at NPGuide.html.  When it's true, the link
points to my homepage. switch_link() decides what to change the link to based on
toggle. The "toggle=!toggle" means "flip toggle". If
toggle's true, make it false, and vice versa. The link is the fourth one on the
page, so it's referenced by document.links[3]. The href method is used to set what
the link points to.

show_host() uses the links array and the hostname method to get the host of the
site the link is currently pointing to.

show_path() uses the links array and the pathname method to get the path of the
site the link is currently pointing to.

new_window() uses the links array and the target method to set the target window
for the link.

Notice that there's no onClick handler for the link. All of the switching is done
by the buttons. By using the links array, the properties of any link any be
set by anything on the page.


You should now have a pretty good idea of what you can do with the Link object.
You've also seen Buttons combined with Links. Now we'll move on to Forms, where
we'll see some of the most practical applications of JavaScript, and we'll see
more of Buttons and Links.


The next lesson is Forms.