Lets review what we know:
  • Everything in this world is an object. An object has certain properties and certain methods, defined by its creator. Some objects in JavaScript are pre-defined and available to us at all times (e.g. the document and window objects).
  • An event is something that happens. For example, clicking a mouse button is an event and moving a mouse over a link is another.
  • A string is a collection of characters. By a character we mean a single alphabet, or a punctuation mark or a space, etc. A string is also an object and supports some properties and methods.
  • We can use if..then..else to do conditional work in JavaScript.

Ground Work

We shall start with a simple skeleton application, which display a hello message in the status bar when loaded. I am explaining this first because I have a few things in my mind. First, note that the following code uses an onLoad() event in the <body> tag. This event occurs (only once) whenever a web page is loaded. We can call our functions when this event occurs. Secondly note that we can display text in status bar using window.status = someTextToDisplay. 
<html>
<head>
<title>Status Bar Scrolling</title>

<script langauge="JavaScript">
<!-- Hiding
var message = "I am a message in the status bar!";
function scroll ()
{
window.status = message;
}
// done -->
</script>
</head>

<body onLoad="scroll()">
</body>
</html>

Moving Ahead

Now, lets see how scrolling occurs: We repeatedly show strings in the status bar and keep moving right one character at a time. To achieve this we can use the substring() method of the string object. In our last example, message was a string. We can display a part of this string in the status bar by using the following construct: window.status = message.substring (2, 5). Doing this will display 5 characters of the message string starting from 2nd character (which becomes ” am a”). In this way, we can repeatedly display the substring starting from one character ahead. Now the problem is how to call a function repeatedly. One thing that comes to our mind is the for loop; but that won’t work here. The reason is that a for loop can execute a set of statements multiple times when called, but not forever. On the other hand, we need a scrolling function, that scrolls forever. To tell you the proper way: there is built-in function just for repeatedly calling a function of yours. We can use setTimeout() to make the browser call our function at fixed time intervals. For example, if we want that our scrolling function should be called every time after 5 milliseconds, we can say: setTimeout (“scrol()”, 5). I hope things are clear now. Following code will explain everything.

Code

<html>
<head>
<title>Status Bar Scrolling</title>

<script langauge="JavaScript">
<!-- Hiding
var message = ".... I am a message in the status bar! 
 Actually I am a very long message in the status bar. 
 Had I been short I could not be displayed properly ....";
var positionInString = 0;
var lengthOfMessage = message.length;
var scrollingSpeed = 100;

function scroll ()
{
window.status = message.substring 
 (positionInString, lengthOfMessage);
positionInString = positionInString+1;
if (positionInString > lengthOfMessage)
positionInString = 0;
setTimeout ("scroll()", scrollingSpeed);
}
// done -->
</script>
</head>

<body onLoad="scroll()">
</body>
</html>

Some Improvements

The code presented here has one serious drawback: It doesn’t allow anything else to appear in the status bar – not even the onMouseOver’s. We can overcome this problem if we take a variable showMessage and set it to true in the beginning. Then in the scroll() function, display the message in the status bar only when the variable is true. Then, add another function, onLink(text), and call it from onMouseOver of a link. Send it some text. This function should display the text and set showMessage = false. Add another function offLink(), and call it from onMouseOut of the link. It should set showMessage = true. I am showing you the new scroll function. The rest has been left for the reader as an exercise 😉 
function scroll()
{
if (showMessage)
{
window.status = message.substring (positionInString, lengthOfMessage);
positionInString = positionInString+1;
if (positionInString > lengthOfMessage)
positionInString = 0;
}
setTimeout ("scroll()", scrollingSpeed);
}

Last Words

I would like you people to try the code presented here and especially the exercise. This will give you ideas of creatively using JavaScript. Ask me if you can’t do it or if I have failed to explain something properly.