Learn Advanced JavaScript Programming

Table of Contents

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

// set speed of banner (pause in milliseconds between addition of
   new character)
var speed = 10
// decrease value to increase speed (must be positive)

// set pause between completion of message
// and beginning of following one
var pause = 1500 // increase value to increase pause

// set initial values
var timerID = null
var bannerRunning = false

// create 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 R-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"

// assign index of current message
var message = 0

// empty string initialization
var state = ""

// no value is currently being displayed
clearState()

// stop the banner if it is currently running
function stopBanner() {
  // if banner is currently running
  if (bannerRunning)
// stop the banner
clearTimeout(timerID)

  // banner is now stopped
  bannerRunning = false
}

// start the banner
function startBanner() {
  // make sure the banner is stopped
  stopBanner()

  // start the banner from the current position
  showBanner()
}

// assign state a string of "0" characters
// of the length of the
 current message
function clearState() {
  // initialize to empty string
  state = ""

  // create string of same length containing 0 digits
  for (var i = 0; i < ar[message].length; ++i) {
state += "0"
  }
}

// display the current message
function showBanner() {
  // if the current message is done
  if (getString()) {
// increment message
 message++

// if new message is out of range wrap around to first message
if (ar.length <= message)
message = 0

// new message is first displayed as empty string
clearState()

// display next character after pause milliseconds
timerID = setTimeout("showBanner()", pause)

// banner is now running
bannerRunning = true
} else {
// initialize to empty string
var str = ""

// build string to be displayed (only characters selected
  thus far are displayed)
for (var j = 0; j < state.length; ++j) {
str += (state.charAt(j) == "1") ? Ar[message].charAt(j)
  : " "
}

 // partial string is placed in status bar
 window.status = str

 // add another character after speed milliseconds
 timerID = setTimeout("showBanner()", speed)

 // banner is now running
 bannerRunning = true
}
}

function getString() {
  // set variable to true (it will stay true unless proven otherwise)
  var full = true

  // set variable to false if a free space is found in string
 (a not-displayed char)

  for (var j = 0; j < state.length; ++j) {
// if character at index j of current message has not been
placed in displayed string
if (state.charAt(j) == 0)
full = false
}
// return true immediately if no space found (avoid infinitive
loop later)
if (full)
  return true

// search for random until free space found (broken up via
 break statement)
while (1) {
// a random number (between 0 and state.length – 1 ==
message.length – 1)
var num = getRandom(ar[message].length)

// if free space found break infinitive loop
if (state.charAt(num) == "0")
break
}

// replace the 0 character with 1 character at place found
state = state.substring(0, num) + "1" + state.substring(num + 1,
state.length)

// return false because the string was not full (free space was
found)
return false
}

function getRandom(max) {
  return Math.round((max – 1) * Math.random())
}

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

Example 18-5 (ex18-5.htm). An R-banner.

Global Statements

// set speed of banner (pause in milliseconds
// between addition of new character)
var speed = 10
// decrease value to increase speed (must be positive)

// set pause between completion of message
// and beginning of following one
var pause = 1500
// increase value to increase pause

// set initial values
var timerID = null
var bannerRunning = false

// create 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 R-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"

// assign index of current message
var message = 0

// empty string initialization
var state = ""

// no value is currently being displayed
clearState()

At first, the number 10 is assigned to the variable speed, representing the pause in milliseconds between the popping up of two consecutive characters in the current message. A longer pause is assigned to the variable pause, representing the number of milliseconds between the completion of the current message and its deletion. A null value is assigned to the global variable timerID and the Boolean value false is assigned to the variable bannerRunning. Predefined messages are stored in an array. The variable message is assigned zero, the index of the first element of the array to be displayed, ar[0].

Table of Contents