ch4

Lemur zaprasza

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Ø" >

We've moved!

<HR>

The new URL is
<A HREF="http://www.he.net/~marcj/roadmap.html">
http://www.he.net/~marcj/roadmap.html</A>

 

Make a note of it!

</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">

</SCRIPT>
</HEAD>
<BODY ONLOAD="window.setTimeout('countDown(6Ø)',1ØØØ);"
BGCOLOR="ØØFFFF" TEXT="ØØØØØØ" LINK="4ØØØ8Ø">

We've moved!

<HR>

The new URL is
<A HREF="http://www.he.net/~marcj/roadmap.html">
http://www.he.net/~marcj/roadmap.html</A>

 

Make a note of it!

 

Go ahead and transfer, or, if you're using Netscape,
relax, and leave the driving to us! We'll be leaving in
about a minute....

</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!

zanotowane.pl

doc.pisz.pl

pdf.pisz.pl

teen-mushing.xlx.pl