js history

Screen Size, the History Property



The window object is actually at the top of the DOM tree. It's the boss man of the Document Object Model. If we we're being strictly accurate, we should have been using this:

window.document.write("Hello")

And this:

window.navigator.userAgent

But for convenience sake, window is usually left off. This is because most of your code will be written in the current browser window, and not some other window that you haven't told your browser about.

The window object has some other useful tricks up its sleeve, though. You can find out information about the screen your visitor is using. By using the screen Property of window, you can add Properties that screen has. Like this:

window.screen.height

Some other properties of screen are: width, availHeight, availWidth, colorDepth.

Let's use width and height to get the size of the screen our visitors are using. After all, they might have a tiny monitor and have to scroll way to the left to see our fancy web page. We could then redirect them to another page, if they have a small monitor.


Screen Size

Copy this code into your editor. Place it in the HEAD section of your HTML. Save your work and test the script in your browser:

<Script language = JavaScript>

UserWidth = window.screen.width
UserHeight = window.screen.height
UserWidth = "Screen Width = " + UserWidth
UserHeight = " Screen Height = " + UserHeight

alert(UserWidth + UserHeight)

</Script>

The code is a little more complicated than before. But not too complicated. First, we're storing the value in width to something called a variable:

UserWidth = window.screen.width

A variable is a little storage area. Think of it as a little cupboard or drawer. Instead of putting socks or underwear in the drawer, you're putting text or number into it. Your little storage area needs a name (else how could you tell which drawer held the socks and which your underwear?). The variable name is UserWidth. This is a name we made up ourselves. You can use just about anything you want as a variable name. (But there are a number of words JavaScript likes to keep for itself.)

To put something in your drawer (variable) you type an assignment operator (the equals sign), then type whatever you want to put into the drawer (variable).

If you putting text into the variable, surround the text with double quotes:

UserWidth = "This will hold a width"

If you're putting numbers into the variable, don't surround the numbers with double quotes:

UserWidth = 600

Or you can combine the two with the plus sign (+):

UserWidth = "This will hold a width of " + 600

You can also put the value held in another variable into your new variable. Like we did for our code:

UserWidth = window.screen.width

The value held in the last bit (width), is now stored in our variable with the name UserWidth. Then we just combine direct text with the value we've just stored in UserWidth:

UserWidth = "Screen Width = " + UserWidth

Finally, we combine the two variables in an alert box:

alert(UserWidth + UserHeight)

When you load your web page, you should see a message box like this one:

Screen Width and Height
Exercise

Use availHeight, availWidth, colorDepth to find out the available height of your own screen, the available width of your own screen, and the colour depth of your screen. Display the results in an alert box like this one (Netscape):

Screen Properties in an alert box

You can start a new line by adding "\n" to the end of your variable declaration. Like this:

AHeight = window.screen.availHeight + "\n"


The history object

The history object can be added to window. The history object can be used to move your user back or forward. The result is exactly the same as clicking the Back and Forward buttons on the browser toolbar. You can also use history.go() to move your users a specified number of pages either backwards or forwards. The history object works like this:

<Script language = JavaScript>

alert("Sorry, this page is under construction")

window.history.back()

</Script>
That script could go in say page2.html. On page1.html, there might be a link leading to page2.html. When the link is clicked, the above script will be executed in page2.html. The results is that first the alert box displays. Then the second line of code gets executed. This uses the back() method of the history object to take the user back to where they came from. The forward() method the same way, except your user will be taken forward one page in the browsing history.

To use the go() method of the history object, just type a number in between those two brackets. Like this:

window.history.go( -2 )

The minus two means back two pages. To go forward, just remove the minus sign (-).