HTMLisEasy.com
HTML tutorials for the rest of us...
Javascript Tutor - Lesson 13

Another object that we may have occasion to use is the location object. The location object is a property of the window object...

window.location

And, like other objects, the location object has properties. One commonly used property is the href property...

window.location.href

This specifies the URL of the document in that particular window.

Look at this script...

<html>
<head>
<title></title>

<script type="text/javascript">

function ShowUrl()
{
   alert(window.location.href);
}

function GoUrl()
{
   window.location.href = "otherpage.html";
}

</script>

</head>
<body>

<a href="javascript:ShowUrl()">Click here</a> for this document's URL.<br>
<a href="javascript:GoUrl()">Click here</a> to go to another page.

</body>
</html>

Try it.

The function ShowUrl() gets the location and displays it in an alert box. The function GoUrl() sets the window's location to something else thereby causing that other page to load in the window.

Exercise: Make 6 separate little web pages for each of the Brady kids. Something like this is fine. Alter the last exercise and instead of an alert box throwing up the value "bobby", change the value to the url of bobby's page (bobby.html, or whatever you name it.) Then, get that value and set that as the window's new href. The result is a nifty jump box.

Here is a solution.

We can define our own arrays. Let's suppose we want to define an array of colors...

colors
red
blue
green
yellow
purple
orange

First we would declare a new array...

colors = new Array();

Then define the individual elements of the array...

colors = new Array();
colors[0] = "red";
colors[1] = "blue";
colors[2] = "green";
colors[3] = "yellow";
colors[4] = "purple";
colors[5] = "orange";

Again, note the zero-based counting scheme. The colors array above has 6 elements, and we can reference each by number. Consider the following...

<html>
<head>
<title></title>

<script type="text/javascript">

colors = new Array();
colors[0] = "red";
colors[1] = "blue";
colors[2] = "green";
colors[3] = "yellow";
colors[4] = "purple";
colors[5] = "orange";

function GetMyColor()
{
   alert(colors[2]);
}

</script>

</head>
<body>

<a href="javascript:GetMyColor()">Click here for my color</a>

</body>
</html>

Try it.

While it's certainly not the most useful script in the world, it does demonstrate a new Array() quite nicely. Understand what's going on here before you continue.

<< BACK NEXT >>
Javascript Tutor
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
Javascript Authoring Guide      JavaScript FAQ
HTML 4.0 Reference      Google Groups (Advanced Search)