Chapter 5

This chapter dealt with how JavaScript uses the objects, methods, properties, and events made available by the Browser Object Model (BOM) of the user's browser.

Question 1

Create a page with a number of links. Then write code that fires on the window onload event, displaying the href of each of the links on the page.

<html>
<head>
<script language=JavaScript>
function displayLinks()
{
   var linksCounter
    
   for (linksCounter = 0; linksCounter < document.links.length; linksCounter++)
   {
      alert(document.links[linksCounter].href);
   }
    
}
</script>
</head>
<body onload="displayLinks()">
    
<A href="link0.htm" >Link 0</A>
<A href="link1.htm">Link 2</A>
<A href="link2.htm">Link 2</A>
    
    
</body>
</html>

Save this as ch05_q1.htm.

We connect to the window object's onload event handler by adding an attribute to the <body> tag.

<body onload="displayLinks()">

On the onload event firing, this will run the script in quotes calling the displayLinks() function.

In this function we use a for loop to cycle through each A object in the document object's links array.

function displayLinks()
{
   var linksCounter
    
   for (linksCounter = 0; linksCounter < document.links.length; linksCounter++)
   {
      alert(document.links[linksCounter].href);
   }
    
}

We used the length property of the links array in our condition to determine how many times we need to loop. Then, using an alert box we display each A object's href property. We can't use document.write() in the onload event, because it occurs when the page has finished loading.

Question 2

Create two pages, one called IEOnly.htm and the other called NNOnly.htm. Each page should have a heading telling you what page is loaded, for example

<H2>Welcome to the Internet Explorer only page</H2>

Using the functions for checking browser type, connect to the window object's onload event handler and detect what browser the user has. Then if it's the wrong page for that browser, redirect to the other page.

The NNOnly.htm page is as follows:

<html>
<head>
<script language=JavaScript>
    
function getBrowserName()
{
   var lsBrowser = navigator.appName;
   if (lsBrowser.indexOf("Microsoft") >= 0)
   {
      lsBrowser = "MSIE";
   }
   else if (lsBrowser.indexOf("Netscape") >= 0)
   {
      lsBrowser = "NETSCAPE";
   }
   else
   {
      lsBrowser = "UNKNOWN";
   }
   return lsBrowser;
}
    
    
function checkBrowser()
{
   if (getBrowserName() == "MSIE")
   {
      window.location.replace("IEOnly.htm");
   }
}
    
</script>
</head>
<body onload="checkBrowser()">
    
<H2>Welcome to the Netscape Navigator only page</H2>
    
</body>
</html>

The IEOnly.htm page is very similar:

<html>
<head>
<script language=JavaScript>
    
function getBrowserName()
{
   var lsBrowser = navigator.appName;
   if (lsBrowser.indexOf("Microsoft") >= 0)
   {
      lsBrowser = "MSIE";
   }
   else if (lsBrowser.indexOf("Netscape") >= 0)
   {
      lsBrowser = "NETSCAPE";
   }
   else
   {
      lsBrowser = "UNKNOWN";
   }
   return lsBrowser;
}
    
    
function checkBrowser()
{
   if (getBrowserName() == "NETSCAPE")
   {
      window.location.replace("NNOnly.htm");
   }
}
    
</script>
</head>
<body onload="checkBrowser()">
    
<H2>Welcome to the Internet Explorer only page</H2>
    
</body>
</html>

Starting with the IEOnly.htm page, first we add an onload event handler, so that on loading the page, our checkBrowser() function is called.

<body onload="checkBrowser()">

Then in checkBrowser(), we use our getBrowserName() function to tell us which browser the user has. If it's Netscape, we replace the page loaded with the NNOnly.htm page. Note that we use replace() rather than href, because we don't want the user to be able to hit the browser back button. This way it's less easy to spot that a new page is being loaded.

function checkBrowser()
{
   if (getBrowserName() == "NETSCAPE")
   {
      window.location.replace("NNOnly.htm");
   }
}

The NNOnly.htm page is identical, except that in our if statement we check for MSIE and redirect to IEOnly.htm if it is MSIE.

function checkBrowser()
{
   if (getBrowserName() == "MSIE")
   {
      window.location.replace("IEOnly.htm");
   }
}

Question 3

Insert an image in the page with the <img> tag. When the mouse pointer rolls over the image, it should switch to a different image. When it rolls out (leaves the image), it should swap back again. You'll need to wrap the images inside <A> tags because img objects don't have the onmouseover and onmouseout events.

<html>
<head>
<script language=JavaScript>
    
function mouseOver()
{
   document.images["myImage"].src = "Img2.jpg";
}
    
function mouseOut()
{
   document.images["myImage"].src = "Img1.jpg";
}
</script>
</head>
<body>
    
<A style="cursor : default" href="" onclick="return false" name="link1"
   onmouseover="mouseOver()" onmouseout="mouseOut()">
      <img src="Img1.jpg" name="myImage">
</A>
    
</body>
</html>

Save this as ch05_q3.htm.

At the top of the page we define our two functions to handle the onmouseover and onmouseout events.

function mouseOver()
{
   document.images["myImage"].src = "Img2.jpg";
}
    
function mouseOut()
{
   document.images["myImage"].src = "Img1.jpg";
}

The function names tell us what event they will be handling. We access the img object for our <img> tag using the document.images array and putting the name in square brackets. In the onmouseover event we change the src property of the image to Img2.jpg, and in the onmouseout event we change it back to img1.jpg, the image we specified when the page was loaded.

In the page itself we have our <img> tag inside an <A> tag.

<A style="cursor : default" href="" onclick="return false" name="link1"
   onmouseover="mouseOver()" onmouseout="mouseOut()">
      <img src="Img1.jpg" name="myImage">
</A>

We need to do it this way so that our pages work with NN 3 and 4. Only IE 4/5/6 and NN 6/7 support the onmouseover and onmouseout events for an img object. However, NN 4 does support these events for the <A> tag's A object, so we use this workaround to get the result we want.

Note that I've also added onclick="return false". Why? By returning false, the click event is canceled; remember this link is here for its events only and not as a hyperlink. Why not leave the href="" out altogether? Well, while this will work fine in IE, it won't in NN, which ignores events if no href is included. Finally, for IE only, I've set the cursor style when the mouse pointer is over the link to the default cursor rather than a hyperlink mouse cursor.

style="cursor : default"