Global Statements

The script starts by filling the message array with nine messages:

// set messages (specify backslash in double form (i.e, \\)
var messages = new Array()
messages[0] = "welcome to our page"
messages[1] = "free scripts available"
messages[2] = "new:scripts by request"
messages[3] = "this site is updated..."
messages[4] = "almost every day"
messages[5] = "we are now working..."
messages[6] = "on a revolutionary..."
messages[7] = "javascript book!!!"
messages[8] = "contact us for more info"

Note that all messages must be written in lowercase.

The definition of the following variables are documented inline:

// number of milliseconds to pause between two messages
var pause = 3000

// set normal spacing between two characters
// (no whitespace in between)
var space = 1

// set height and width of each character
var height = 5
var width = 3

// create object of all supported characters in font
var letters = new letterArray()

// initialize image variables
var on  = new Image(5, 5)
var off = new Image(5, 5)

The on and off Images represent the on and off lights. The artistic presentations of these dots are stored in on.gif and off.gif:

on.src = "on.gif"
off.src = "off.gif

As in Demonstration 1, we load all images to the browser before we start to display the LED sign:

// get number of images already laid out in page
var imageNum = document.images.length

The next section computes the length of the longest message by multiplying the number of nonblank characters by the combined width of a normal character and an intercharacter space, and then adding the width of blanks. The number of nonblank characters is computed by first splitting the message on blanks, then joining the pieces, and finally extracting the concatenated length:

// set maximum message length in images
var boardWidth = 0
for (var i = 0; i < messages.length; ++i) {
 var lengthWithNoSpaces = messages[i].split(" ").join("").length
 var numberOfSpaces = messages[i].length – lengthWithNoSpaces
 var currentBoardWidth = lengthWithNoSpaces * (width + space) –
   space + numberOfSpaces * space * 2
 if (boardWidth < currentBoardWidth)
  boardWidth = currentBoardWidth
}

Figure 25-1.  The letter ‘A,’ like all other characters, is scanned from top to bottom and from left to right (column by column).

Figure 25-2.  An LED sign.

After setting the running variable to false and timerID to null (see Demonstration 1), we define the dots of each character of the alphabet by the function letterArray().

letterArray()

letterArray()is a constructor function. The general syntax to create an instance of this object is as follows:

var instanceName = new letterArray()

This object has many properties but no methods. Each property represents a single character supported by the script. For example, the “A” character is defined as follows:

this.a = new Array(height)
this.a[0] = " * "
this.a[1] = "* *"
this.a[2] = "***"
this.a[3] = "* *"
this.a[4] = "* *"

Notice that each property is defined as an array of five three-character strings. You will see how to use an instance of this object later in the chapter.

drawBlank()

function drawBlank() {
 // assign greater than symbol to variable
 var gt = unescape("%3e")

 document.write('<TABLE BORDER=2 CELLPADDING=8' + gt + '<TR' + gt +
'<TD BGCOLOR ALIGN="center" VALIGN="center"' + gt)

 // print entire board of off images
 for (var y = 0; y < height; ++y) {
  for (var x = 0; x < boardWidth; ++x) {
   document.write('<IMG SRC="' + off.src + '" HEIGHT=5
   WIDTH=5' + gt)
  }
  document.write('<BR' + gt)
 }
 document.write('</TD' + gt + '</TR' + gt + '</TABLE' + gt)
}

The next function, drawBlank(), draws the border around the LED sign and then covers the entire board with off dots (gif images). Notice that the 0board’s width and height are stored in global variables and thus are not passed as arguments to the drawBlank() function. Also, notice how unescape() is used for avoiding the “>” literal. (See the section “Problems with Code Hiding” in Chapter 3, Writing Your First Script.)

setLight(state, x, y)

function setLight(state, x, y) {
 // set a specific light in sign to on (true) or off (false)
 if (state)
  document.images[computeIndex(x, y)].src = on.src
 else
  document.images[computeIndex(x, y)].src = off.src
}

The setLight() function accepts three arguments. The first one is either a Boolean value or a binary digit (0 or 1). The second parameter accepts the x coordinate of the light, and the third specifies its y coordinate. For example, the following statement replaces the second image from the left and third from the top of the LED sign, with an on image, regardless of which image is currently displayed there:

setLight(true, 1, 2)

It is correct to define this function as one that turns on or off a specific light in the LED sign.

drawLetter(letter, startX)

function drawLetter(letter, startX) {
 // draws a letter at the given x coordinate
 for (var x = 0; x < width; ++x) {
  for (var y = 0; y < height; ++y) {
setLight(letters[letter][y].charAt(x) == "*", startX +   x, y)
   }
 }
}

This function accepts two arguments:

• the letter that it is supposed to draw
• the X coordinate of the letter in the entire LED sign

This function reads the letter’s coordinates by scanning the appropriate properties of the letters object. Figure 25-1 illustrates the direction in which the scanning is performed.

The LED sign is updated by adding characters consecutively, creating the effect of a top-to-bottom, left-to-right motion. You can notice that motion even in a static picture, as in Figure 25-2.

drawSpace(startX)

function drawSpace(startX) {
 // create a small space between each two characters
 for (var x = 0; x < space; ++x) {
for (var y = 0; y < height; ++y) {
   setLight(false, startX + x, y)
}
  }
}

This function is very similar to the drawLetter() function. It simply creates space columns of off images, mimicking the space characters of the message.

computeIndex()

function computeIndex(x, y) {
 // compute the document index of an image in the sign, based on
the x-y coordinates
 return (y * boardWidth + x) + imageNum
}

The computeIndex() function accepts x and y coordinates of a dot and returns the corresponding index of the image in the document.images 1D array.

floodBoard(startX)

function floodBoard(startX) {
 // set all lights from startX to off
 for (var x = startX; x < boardWidth; ++x) {
  for (var y = 0; y < height; ++y) {
   setLight(false, x, y)
  }
 }
}

The function floodBoard() sets all dots (images) to the right of a given coordinate, one column at a time, from top to bottom and from left to right.