Learn Advanced JavaScript Programming

Table of Contents

<HTML>
<HEAD>
<TITLE>N-Banner</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function scrollBanner(seed) {
// set pause in milliseconds between each movement
var speed = 10

// assign one-space string to variable (space pads left side
 of status bar)
var str = " "

// create global array
var ar = new Array()

// assign the strings to the array's elements
ar[0] = "Welcome to our JavaScript page. "
ar[1] = "We hope you enjoy the N-Banner script. "
ar[2] = "It is designed to be more stable than regular banners. "
ar[3] = "Don't forget to check out our other scripts. "
// join all messages to one string variable with no delimiter
var total = ar.join("")

// if message has not yet reached the left side of the status bar
if (seed > 0) {
// assign string of seed spaces to variable
for (var i = 0; i < seed; ++i) {
 str += " "
}

// append message to end of output string
str += total

// message moved one position to the left
seed--

// assign expression containing recursive call with literal
argument in form of string
var cmd = "scrollBanner(" + seed + ")"

// place computed message in status bar
window.status = str

// recursive call after speed milliseconds
timerID = setTimeout(cmd, speed)
 } else
// if a substring of the total message still remains in
status bar
if (–seed < total.length) {
 // assign part of message that has not slid off the left
 str += total.substring(–seed, total.length)

// message has moved one position to the left
seed--

// assign expression containing recursive call with
 literal argument in form of string
var cmd = "scrollBanner(" + seed + ")"

// place computed message in status bar
window.status = str

// recursive call after speed milliseconds
timerID = setTimeout(cmd, speed)
 } else {
// assign a one-space string to status bar
window.status = str

// recursive call after speed milliseconds at initial
  position
 timerID = setTimeout("scrollBanner(100)", speed)
 }
}

// -->
</SCRIPT>
</HEAD>
<BODY onLoad="scrollBanner(100)">
</BODY>
</HTML>

Example 18-6 (ex18-6.htm). A regular N-banner.

A major advantage of this banner is that is does not include any global statements and it includes only one function. Many other styles have been used to create this type of banner.

scrollBanner(seed)

The banner’s speed and messages are specified as in the previous banners. A single-space string is assigned to the variable str. It pads the left side of the status bar by leaving a space between the border and the far left side of the message. Since this banner scrolls the messages one after the other, all messages are combined to a single string via the join() method of the Array object.

The function accepts one argument, which is assigned to the parameter seed. The value of seed determines the message’s distance from the left side of the status bar. Space characters are used as space-holders. It is common to start the banner 100 spaces from the left, so the function is initially called with the value of 100.

The function chooses one of three routes. The first is selected if the value of seed is positive; that is, if the message has not reached the left panel of the status bar. In this case, a loop is used to concatenate a string of seed space characters to the variable str. The entire message is then concatenated to str. Note that if a string placed in the status bar exceeds the maximum length of the bar, the excess characters are not displayed. After concatenating the entire message to the accumulative string, the value of seed decrements, creating a scrolling effect on the next iteration. A recursive call is constructed in a string in the following form:

var cmd = "scrollBanner(" + seed + ")"

Suppose the value of seed is 50. The value of cmd is then "scrollBanner(50)". A literal is used here because local variables or parameters cannot be evaluated by setTimeout as arguments of a function. The accumulative string is then placed in the status bar, and the function is called recursively, following a pause of speed milliseconds.

The second route is taken if part of the message has been dropped to the left, but some of it still remains in the status bar. This state is checked via the following expression:

–seed < total.length

If the absolute value of seed exceeds the message’s length, this expression evaluates to false. It means that the length of the message that has gone out of range to the left is greater or equal to the length of the message, meaning that no part of the message actually remains in the status bar. If this expression evaluates to true, only part of the message has gone past the left barrier.

If the expression above evaluates to true, the substring total.substring(–seed, total.length) is concatenated to the variable str. This substring represents the part of the message that has not gone overboard (|seed| is equal to the number of characters disposed). The remaining part of the command block is identical to the one used when the first route of the function is taken.

The third route that can be taken by the function is the most simple one. It places the value of str, a single-space string, in the status bar. It then calls the function recursively with the initial argument of 100.

Summary

This chapter introduced status bar programming. We saw how to display link-related messages in the status bar, as well as default values. We emphasized one of JavaScript’s pioneer scripts, the banner. We discussed some unique banners developed exclusively for this book, as well as other common banners. In terms of JavaScript, we have discussed two properties of the window object, status and defaultStatus. Besides enabling fun stuff like banners, the status bar can be used as an additional output device for displaying critical values while debugging the script.

Table of Contents