Browser objects, part one

Notes from May 9, 2005 class

Image-swapping using the images property of the document object

<img name="img1" src="" border="0" alt="" />

<script language="JavaScript" type="text/javascript">

<!--

var myImages = new Array("badger.jpg","mushroom.jpg","snake.jpg");
var imgIndex = prompt ("Enter a number from 0 to 2");
document.images["img1"].src = myImages[imgIndex];

document.write("<br /><br />Avoid <a href=\"http://www.badgerbadgerbadger.com\">http://www.badgerbadgerbadger.com</a>");

// -->

</script>

The defaultStatus property of the window object

This changes the "Done" message in the status bar when a document loads in the browser.

window.defaultStatus = "Never play poker with a guy named 'Doc'";

This doesn't work in Firefox, by the way.

The history object

history.go(-23); // goes back 23 pages in the browser's history (if it can)

history.back(); // goes back 1 page in the browser's history
history.go(-1); // does the same thing as history.back();

history.go(2); //goes forward 2 pages in the browser's history (if it can)

history.forward(); // goes forward 1 page in the browser's history
history.go(1); // does the same thing as history.forward();


The Window object

window.location.href="http://www.yahoo.com";

window.location.replace("password.shtml");

Both window.location .href and window.location.replace will reload the page to the place specified as above. The difference: window.location.replace actually enters the browser's history file and replaces the referring location with the new one, eliminating all record of how you got there.

window.screen can tell height, width, color depth of screen.

This script checks the window.screen properties and changes the display accordingly.

switch (window.screen.colorDepth)
{
case 1:
case 4:
document.bgColor = "white";
break;

case 8:
case 15:
case 16:
document.bgColor = "blue";
break;

case 24:
case 32:
document.bgColor = "skyblue";
break;
default:
document.bgColor = "white";
}

document.write("Your screen supports " + window.screen.colorDepth + "-bit color.");

The document.links object

All the links in a document are stored in an array, too. You can use JavaScript to control the hyperlinks in a document.

Try this working example of a page whose hyperlinks change via JavaScript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Controlling links in an array via JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body language="text/javascript" onload="swapURL()">

<script language="JavaScript" type="text/javascript">

<!--

var myLinks= new Array("http://www.badgerbadgerbadger.com/", "http://www.hackernetwork.com/flash/hatt.shtml","http://www.planettribes.com/allyourbase/video3.shtml", "http://www.museumofbadart.org/", "http://www.bulwer-lytton.com/");

function swapURL()
{
var linksIndex = prompt("Enter a number from 0 to 4");
window.document.links[0].href = myLinks[linksIndex];
return true;
}
// -->
</script>

<p><a href="" target="_blank">Go somewhere strange and awful.</a></p>

<p><a href="" onclick="swapURL(); return false">Or, pick a new terrible
link.</a></p>
</body>
</html>