![]() |
![]()
![]() ![]() ![]()
![]() |
![]() |
Global StatementsThe 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 }
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:
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.
|
||||||||||||||||||||||
With any suggestions or questions please feel free to contact us |