HTML Goodies: Script Tip: Week 82

 

Tips…

     Now the fun part. Let’s get to acting upon those lines of text. First off, the really colorful ones, those without arguments.

---

The Script’s Effect

---

Here’s the Code

---

function ColoredText() {

var argLen = ColoredText.arguments.length;

if (argLen == 0)

{argLen = 1}



var text = ColoredText.arguments[0];

var textLen = ColoredText.arguments[0].length;

var defClrsArray = new Array(“red”,”purple”,”cyan”,”green”,”blue”,”magenta”); //default colors, change as needed



for (i=0; i<textLen; i++) {

charColor = text.charAt(i);



if (argLen == 1)

{

colorCode = Math.floor(Math.random() * defClrsArray.length);

tempStr = charColor.fontcolor(defClrsArray[colorCode])

}



else

{

colorCode = i % (argLen – 1);

tempStr = charColor.fontcolor(ColoredText.arguments[colorCode+1])

}

document.write(tempStr)

}

}

// Stop hiding –>


</SCRIPT>

     Again, the script is a little out of order. You’ll need to make a point of getting it into the same format as the display in the script.

     The function isn’t overly long but it does get goofy at times so I’ll take it in two parts. Today I’ll discuss the variables and how the non-argument text is created.

     The name of the function is Coloredtext(). You should remember that from last week. That was the same name as the function that wrote the text to the page. Actually, it was the same function. By placing the text inside the function instance, you literally pass the text to the function. It’s after the text is given color that it’s written to the page.

     We’ll start at the top.

     The variable “argLen” is given the value of the argument’s length. Remember I said in the last script tip that the color names that follow the display text are arguments? The Javascript knows they’re arguments due to the format in which they are presented.

     Obviously the first line of text does not have any argument. That would make the argument equal to zero. We can’t have that, so the next blip of code asks if the argument is equal to zero. If it is, the variable “argLen” is given the value of one. That will still allow us to separate it from those that have at least two arguments, in the second line of text.

     JavaScript has already turned those arguments into an array, so we need to get some hierarchy statements into array format to deal with them. That’s these two:

var text = ColoredText.arguments[0];

var textLen = ColoredText.arguments[0].length;

     The first line will allow us to pull out a specific argument by calling for its array number. The second will tell us the length of the array meaning the number of items in the array.

     The next line is a default list of colors. This is where the color in the non-argument text comes from. If there isn’t a set of arguments, use these.

var defClrsArray = new Array(“red”,”purple”,”cyan”,”green”,”blue”,”magenta”);

     Remember I said the script gets a little goofy? Here is comes. The next little section deals with attaching color to each of the letters in the display text.

for (i=0; i<textLen; i++) {

     We start with a “for” loop. We got into this a little in the last set of script tips. The loop is set up with three conditions, each separated by a semicolon. The first condition sets a value to a variable. The second condition determines how often the loop should occur. In this case, the loop will only go as long as there are letters. See that? As long as “i” is less than the length of the text, it keeps looping.

     Finally, the third condition does something to the variable if the loop isn’t finished. In this case it adds one. The double plus sign does the adding. The effect is that each letter in the run of text is looked at one after the other until there’s no more text.

charColor = text.charAt(i);

     That blip of code sets a variable name to the character represented by “i”. Remember, this is going to loop through again and again, so each time it loops, “charAt(i)” will be different. The command charAt() pulls a specific letter out of a run of text. In this case, the letter it pulls is the letter equal to the number represented by “i”. As the loop rolls, “i” increases.

     On to actually setting color:

if (argLen == 1)

{

colorCode = Math.floor(Math.random() * defClrsArray.length);

tempStr = charColor.fontcolor(defClrsArray[colorCode])

}

     An If statement starts it off testing if “argLen” is equal to one. We know it is in the first line of text because I set it that way earler. Remember that? If there are no arguments, “argLen” is equal to one.
In this case…it’s equal to one.

     The variable “colorCode” is given a specific value through a little math. Just like algebra class, let’s start inside the parentheses. “Math.random” generates a random number between 000 and 999. That random number is then multiplied by the length of the default color array.

     The number resulting from that equation is then floored by Math.floor. The “floor” takes whatever number is inside the parentheses and drops it to the lower whole number. For example, if the answer in the parentheses was 2.6, Math.floor would turn it into 2.

     Yes, there’s an equal to that going the other way. Math.ceil pushes the number to the ceiling, or the next higher full number. The number 2.6 would become 3.

     Now, we finally assign color.

     The next line is a hierarchy statement that uses the defaul array of colors, represented by the variable “charColor” and assigns the color as a fontcolor to what’s inside the parentheses. The command “fontcolor” works just like <FONT COLOR> in HTML. If you look at the source code of this script in Netscape Navigator, you’ll see letter after letter written with individual font color tags.

     If the line above generated the number 2, then cyan would be the color plucked from the array. Remember, JavaScript starts counting at zero. That cyan color would be set into a fontcolor by the array statement inside the parentheses.

     From the defaul color array, “defClrsArray”, pluck out the number represented by
colorCode.

     Assign it all to a variable named “tempStr”.

     OK, so now we’ve got the colors yanked from the default list. But what about those texts that actually have arguments? And how does that text get written to the page?

Next Week: Use arguments and write it to the page

---

Learn to write your own JavaScripts with the