reptile7's JavaScript blog is Andrew Peak's personal technical writing project: it focuses on JavaScript and the analysis of JavaScript scripts, although HTML, CSS, and anything else related to coding for the Web are also fair game.

HTML Goodies' JavaScript Primers #23, "Producing Random Statements and Images," wraps up our tour of introductory applications of if...else statements. In accord with the primer title, the Primer #23 Script displays random statements, whereas the Primer #23 Assignment addresses the display of random images. A fairly simple strategy is at work in both situations: we'll use a modulo operation, discussed in Blog Entry #36, to generate a small set of random numbers, which are then associated, respectively, with an equal number of items - text strings or image files - via a series of if statements; once indexed in this manner, these items are then randomly written to the page by normal document.write( ) statements. In illustration, let's first look at the Primer #23 Script:

The now=new Date( ); num=(now.getSeconds( ))%3; code generates a random number num whose value is 0, 1, or 2, these being the possible remainders for divisions using 3 as the divisor.

Preceding the random number code are three statements that assign text strings, one for each random number value, to the variables var0, var1, and var2. These identifiers are not related to the var keyword used for declaring variables - more on this in a bit.

Following the random number code is first a document.write( ) command that displays the value of num (contra the primer, there's no need for this command to be all on one line - it's fine as it is originally) and then a series of if statements that connect the var0, var1, and var2 text strings to the values of num. Consider, for example, if statement #1:

if (num == 0) {cliche=var0;}

As you can deduce, this statement associates the "An Apple A Day" (var0) string with the 0 value of num, specifically saying, "If it's true that num and 0 are equal, then assign var0 and its value ['An Apple A Day'] to the variable cliche." Similarly, if statements #2 and #3 respectively associate the "A Stitch in Time" (var1) and "Bird in the Hand" (var2) strings with the 1 and 2 values of num.

If a given if statement's condition is true, then the conditions of the other two if statements are necessarily false and their {commands} will be ignored by the browser.

In sum, each if statement uses a specific value of num to assign a specific text string to cliche, which is written to the page by the document.write( ) command at the end of the script. Because num is a random number, then the script if statement (#1, #2, or #3) that executes is random and the displayed value of cliche is also random. Pretty straightforward.

Let's briefly get back to the var0, var1, and var2 variable names. In the "Deconstructing the Script" section of the primer, Joe says, "Notice that we DO NOT have the var num=num+1 in this one. It's not needed because we denoted our three variables starting with 0. If we started with 1, then we would need to." Joe is implying here that var0, var1, and var2 are indexed members of a var[i] variable array. (We'll take up the JavaScript Array object, and the variabilization thereof, in Primer #26.) Not so. A few comments in this regard:

• First, var itself is, not surprisingly, a JavaScript reserved word and is thus an unsuitable variable name; by extension, var[0], var[1], and var[2] (had Joe's syntax been correct, with square-bracketed index numbers) would also be unsuitable.

• It follows that the 0, 1, and 2 characters in var0, var1, and var2 are not index numbers at all, and thus var0, var1, and var2 are just ordinary variable names, no different from var3, var4, and var5 or from tom, dick, and harry for that matter.

• The real reason, then, we don't need a num=num+1 statement is that the conditions of if statements #1, #2, and #3 compare num with the numbers 0, 1, and 2. If we wanted to, we could add a num=num+1 statement and then compare num with the numbers 1, 2, and 3 (e.g., if (num == 1) {cliche=var0;} and so on), but this would of course be unnecessary.

As it appears in the primer, the Primer #23 Script works A-OK, and yet there's a sense of clutter here that rubs me the wrong way. Is it really necessary to variabilize the text strings? Do we really need to have two document.write( ) commands? Man, I just can't go any further until I rewrite this thing:

Answer script #1 largely parallels the Primer #23 Script. Joe adds a num=num+1 statement to the random number code and then compares num to the numbers 1, 2, and 3 in the script's if statements (vide supra). The randomized image file is again assigned to cliche and the image is displayed via the following code:

For some strange reason, Joe chose to variabilize the single quotes that would ordinarily surround the src attribute value in the <img> tag; this is unnecessary, as these single quotes can be brought inside of the document.write( ) double quotes as follows:

document.write("<img src=' " + cliche + " '>");

(More sloppily, the single quotes here can also be omitted without causing any problems.)

(1) Assignment answer script #2: "Or if You are REALLY Clever"

Answer script #2 comes out of left field. Joe ditches the if statements altogether and instead applies the var1, var2, and var3 identifiers to randomizing the image file and displaying the image via the following command:

Ah, our good friend the eval( ) function, which we briefly discussed in the previous post; once again, as in Primer #22, Joe says not a word here about eval( ) and what it does. So how does this command work? What's going on? It's pretty simple, actually. Suppose that num is 1. Concatenating the string "var" and the number 1 ("var"+num) gives the string "var1". (Netscape's "Data Type Conversion" documentation notes, "In expressions involving numeric and string values with the + operator, JavaScript converts numeric values to strings"; its "String Operators" documentation notes that the concatenation of two string values returns another string.) The string "var1" is then evaluated by the eval( ) function to give pic1.gif, which is assigned to the src attribute of the image placeholder as in the first answer script. (The strings "var2" and "var3" are similarly evaluated to pic2.gif and pic3.gif, respectively.)

Thus does the eval( ) function coordinate (a) the random number num, (b) the var# identifiers, which now do serve as an index, and (c) the pic#.gif image files. Clever indeed, but not something that a Weekend Silicon Warrior such as myself would come up with.

Now, perhaps you are thinking to yourself, "The use of the eval( ) function in the Primer #22 Script was redundant; what happens if we remove it here?" Good question. Again, suppose that num = 1. The command:

document.write("<img src=' " + "var"+num +" '>");

assigns the string "var1" to the image src attribute. With respect to the script, "var1", in contrast to "pic1.gif", is not an image file name. Result: no image loads, although no errors are thrown. FYI, the command:

document.write("<img src=' " + var+num +" '>");

throws a syntax error with both MSIE and Netscape.

However, what we can do is write the image with the following eval( )-less command:

document.write("<img src='pic" + num + ".gif'>");

Noteworthily, this command renders unnecessary the var#="pic#.gif" statements at the beginning of the script.

We will certainly encounter more uses of if...else statements in future scripts. Meanwhile, in the next two posts we'll switch gears and take up JavaScript looping techniques, beginning with a discussion of for loops in Primer #24.