The Status Bar

The status bar is the bar at the bottom of the browser window that shows things like the progress of a page's downloading. It also shows the HREF of links when a link is hovered over.

We can write text to this line using JavaScript. To see this work, hover here and look at the status bar at the bottom of your browser window.

This is particularly useful to clarify links for your viewers. When a veiwer hovers over a link, the status bar displays the URL in the link's HREF by default. You can override this with a clearer description of where the link leads. There are other uses for writing to the status bar, like offering instructions or notes.

The "status" Property

I wrote to the status bar by using the "window.status" property. Since I wrote to the status bar that's in the same window that the Event (onMouseOver) is coded in, I could just use "status" and leave the "window." part out.

The "window." part, however, would be needed if we wanted to change the text in the status bar of another window. Just use the window's name as discussed in previous lessons.

Below is the link I made to write to the status bar:

<a href="javascript://;" onMouseOver="window.status='See Me! I have been written here with JavaScript'; return true">
hover here
</a>

There are three things to notice here. First, the code that causes the writing to the status bar is "window.status = 'See Me!...'". We could just as well leave out the "window." part and just use "status =" since the Event (onMouseOver) and effect are in the same window.

Notice how I put the text to be written inside single quotes. This is because the rest of the JavaScript is already nested inside double quotes. You can use variables as the text value to write, too. You don't use quotes around variables, only text strings.

Next, we'll see what the "return true" is all about and why I used "javascript://" in the link's HREF.

Using "return"

You may be wondering why I had to put a second JavaScript statement -- "return true" -- in the onMouseOver event. Well, the effect wouldn't work without it. Here's what "return" does and why it's needed.

JavaScript's "return" statement stops any current functions and returns a value. That value is the Boolean true in this case.

Generally, you can't use returns outside of a function like in this example. What it does here is to overwrite the browser's default behavior of presenting the HREF of links in the status bar. Remove the "return true" part and you'll see "javascript://" in the status bar instead of the message.

So, when writing with "status" or "window.status", make a second statement of "return true". Remember to separate JavaScript statements with semi-colons (;).

Don't worry too much about using "return" right now. We'll be going into it in depth in later tutorials.

JavaScript Comments

Another new thing I added to the above link was an HREF of "javascript://". This is nothing more than a JavaScript comment. It causes the link to be "dead". It's the best way to make a truly dead link.

You need dead links all the time in JavaScript. A dead link is used when you don't want any action taken when a link is clicked. We've been making dead links like this:

<a href="#">

The "#" in the HREF will send the user to the top of the current page. This is often undesirable. To make a link truly "dead", use the JavaScript comment above.

You should also start using comments in your JavaScript code. You can make a single line of comment like this:

<script language="JavaScript">
//Link Script
function this_here_function(){}

I didn't add a real function to the above. The important part is in red. The "//Link Script" is a comment that the browser ignores. It's there to help you and others read your code and know what they're looking at.

This is similar to commenting in HTML or CSS. In fact, it's exactly like commenting in CSS. You can make longer JavaScript comments by using "/* comments go here */". Comments put between a "/*" and "*/" can be as many lines as you want. This is just like commenting in a Cascading StyleSheet.

So all the dead link's HREF contains is a JavaScript comment with no text -- "javascript://". This causes clicking the link to lead to the comment and nothing at all happens.

The "defaultStatus" Property

What we've done so far will write text to the status bar, but how can we get rid of it once the mouse moves off the link? There are two approaches to this.

First, you can code an onMouseOut event with something like "status = ' '". This will just write a space between the two single quotes. You don't even have to use a space, just two quotes (single quotes if the statement is already nested in double quotes).

The second approach is to use the "window.defaultStatus" property. This sets default text for the status bar:

<script language="JavaScript">
defaultStatus = "This is the status bar."
</script>

The above will set a default text of "This is the status bar" in the status bar. This will be overwritten by the "status" text of Events, but will return when the event is no longer in effect.

Check out this page to see the "defaultStatus" and "status" properties working together.

You can set "defaultStatus" either outside a function to be loaded when the page's <head> is read by the browser, or you can code it in a function to be called by an event. You can change the "defaultStatus" as many times as you'd like, but transient changes in the status bar text are generally made with "window.status".

Note: You don't have to code a "return true" for "defaultStatus". Just use "return true" for "status".

Summary

Status Bar -- The status bar is at the bottom of the browser window. You can write text in it using JavaScript.

"window.status" -- The "window.status" property sets the text to be written in the status bar. If the "status" property is coded in the same window as the status bar to be written to, you don't have to use the "window." prefix. Just "status=".

"return true" -- The "return" statement sends a value to the browser. You must return the Boolean true to get text written to the status bar with "window.status".

"defaultStatus" -- This sets the default text you see in the status bar when an event is not occuring to change it.

JavaScript Commenting -- Use "//" to make single line comments in your JavaScript code. Use "/*" and "*/" to enclose longer comments. You can make a dead link by putting "javascript://" in the HREF of an <a> tag.

Exercises

1) Make this page, the one from the example above.

2) Enhance this page by using an onMouseOut event to write something new to the status bar.

3) Further enhance the page by using a single JavaScript function in the page's <head>. Code function calls with parameters in the links to make the status bar change. Hint: You can have both the onMouseOver and onMouseOut events call the same function and just return different parameters.

To Next Beginning JavaScript Lesson

Back To Beginning JavaScript Index