Chapter 4 URL Patch

CONTENTS

The scenario
The requirements
The solution (without JavaScript)
The solution (with JavaScript)
Modifying the example for your own use

Now you start learning how to put JavaScript to use. In this chapter, you work with an example of redirection. You find out how to build a Web page that redirects the visitor from a soon to be obsolete URL to another, up-to-date one. First you'll try solving the problem without JavaScript. Then you'll do it again with JavaScript, seeing how JavaScript allows you to create a more sophisticated solution.

The scenario

For one reason or another, you need to move your home page to a new Web server. You've set up your home page on the new server, but now you need to let regular visitors know where the new page is. You still have some time left with the old server, enough time to leave a forwarding address.

The requirements

The requirements for this document are simple: Create a small Web page that informs visitors to the old URL that your page has moved.

The solution (without JavaScript)

This very simple page would no doubt suffice to let visitors know that you've moved your Web page:

<HTML>
    <HEAD>
        <TITLE>We've Moved!</TITLE>
    </HEAD>
    <BODY BGCOLOR="ØØFFFF" TEXT="ØØØØØØ" LINK="4ØØØ8Ø" >
        <P ALIGN=CENTER>
            <FONT SIZE="+2">We've moved!</FONT>
        </P>
        <HR>
        <P ALIGN=CENTER>
            The new URL is
            <A HREF="http://www.he.net/~marcj/roadmap.html">
            http://www.he.net/~marcj/roadmap.html</A>
        </P>
        <BR>
        <P ALIGN=CENTER>
            Make a note of it!
        </P>
    </BODY>
</HTML>

The result is a screen like the one shown in Figure 4.1. Not bad, but you can do better with JavaScript.

Figure 4.1 : Simple redirection page.

The solution (with JavaScript)

What's wrong with the solution that doesn't use JavaScript? First of all, the viewer might not bother clicking on the link to get to your new home page. You can take him or her there-automatically!

Changing the currently displayed document is simple. The window object has a property called location, which is a location object. Location objects have a property called href, which is a string that contains the currently displayed document's URL. All you have to do is change that property:

window.location.href = "http://www.he.net/~marcj/roadmap.html";

So how do you execute this expression? Well, the simple way is to make this expression the event handler for the BODY element's load event. The BODY element allows you to specify a JavaScript expression (called an event handler) that will be executed when the document finishes loading (this is called a load event)

<BODY ONLOAD="window.location.href = 
    'http://www.he.net/~marcj/roadmap.html'">

All very well, but now the new URL is not visible on the screen for very long, if at all. Some users like to print the document so they have a reminder to go back and change their links to your home page. Such users will have to be very quick with the print button!

You need to introduce a delay-60 seconds should do it-so your users can write down or print the new URL. Now you can modify the BODY tag, like so:

<BODY ONLOAD="setTimeout(window.location.href = 
    'http://www.he.net/~marcj/roadmap.html',6ØØØØ">

That, by itself, is much better. Now the user can print the document listing the new URL before the new document is loaded automatically.

But we can add one more twist to it. A page with a long time-out can appear to be loaded and waiting for the user to do something. Let the user know you're not sitting idly by; you can do this by adding a countdown timer to the status part of the window. While you're at it, you might also want to add a screen message telling the user what is going on.

The countdown timer is very straightforward. Start with an arbitrary count of seconds, and once a second, display the time remaining and subtract one second. When the count goes to zero, load the window.location.href property as you saw earlier. The basic structure of the countdown timer looks like this:

function countDown(tick)
    {
    if (tick == Ø)
        {
        window.location.href="http://www.he.net/~marcj/roadmap.html";
        return;
        }
    // display the time //
    --tick;
    var command = "countDown(" + tick + ")";
    window.setTimeout(command,1ØØØ);
    }

You'll note that the timeout value is set to 1000; JavaScript measures time in milliseconds, and one second is 1000 milliseconds.

The display is very simple. Just format the time remaining and write it to the window.status. The format is a little tricky, however. First, you want to convert the time to minutes and seconds. You calculate the minutes like this:

var minutes = Math.floor(count / 6Ø);

The Math object's floor method is important; if you omit it the minutes will have a decimal portion. The 60 second count will show minute values of 1, 0.98333333, 0.966666666, and so forth. Not what you want!

Then you calculate the seconds using the modulo operator:

var seconds = count % 6Ø;

The modulo operator returns the remainder left from dividing the left-hand operand (count) by the right-hand operand (60).

The second point in formatting the time is to make sure it looks right. Minutes and seconds are usually displayed with two digits. However, JavaScript formats minutes and seconds values of less than 10 as single digits. To get around this, check whether minutes is less than 10; if it is, add a leading zero to the display string. You do the same thing for the seconds.

This is all a little too involved to place in an ONLOAD event handler as a set of expressions; instead you can make it into a function and call the function as the BODY element's ONLOAD event handler.

Here's the document you have now:

<HTML>
    <HEAD>
        <TITLE>We've Moved!</TITLE>
        <SCRIPT LANG="JavaScript">
<!--
function countDown(tick)
    {
    if (tick == Ø)
        {
        window.location.href="http://www.he.net/~marcj/roadmap.html";
        return;
        }
    var time = "Transfer in ";
    var minute = Math.floor(tick / 6Ø);
    if (minute < 1Ø)
        {
        time += "Ø";
        }
    time += minute + ":";
    var second = tick % 6Ø;
    if (second < 1Ø)
        {
        time += "Ø";
        }
    time += second;
    window.status = time;
    --tick;
    var command = "countDown(" + tick + ")";
    window.setTimeout(command,1ØØØ);
    }
//-->
        </SCRIPT>
    </HEAD>
    <BODY ONLOAD="window.setTimeout('countDown(6Ø)',1ØØØ);"
        BGCOLOR="ØØFFFF" TEXT="ØØØØØØ" LINK="4ØØØ8Ø">
        <P ALIGN=CENTER>
            <FONT SIZE="+2">We've moved!</FONT>
        </P>
        <HR>
        <P ALIGN=CENTER>
            The new URL is
            <A HREF="http://www.he.net/~marcj/roadmap.html">
            http://www.he.net/~marcj/roadmap.html</A>
        </P>
        <BR>
        <P ALIGN=CENTER>
            Make a note of it!
        </P>
        <BR>
        <P ALIGN=CENTER>
            Go ahead and transfer, or, if you're using <B>Netscape</B>,
            relax, and leave the driving to us! We'll be leaving in
            about a minute....
        </P>
    </BODY>
</HTML>

Figure 4.2 shows what this document looks like.

Figure 4.2 : Redirection with JavaScript.

Modifying the example for your own use

You can use this example by simply changing the URL used; it shows up three times, and it's a simple find-and-replace operation for your text editor. You can also change the length of the countdown timer by changing the 60 in the BODY element to a different value. You can change the text that appears in the status bar. Don't be afraid to experiment with it!

Chapter 4

URL Patch

The scenario

The requirements

The solution (without JavaScript)

The solution (with JavaScript)

Modifying the example for your own use

Back to MainPage