HTML Goodies: Script Tip: Week 81

 

81 Tips…

     This script was sent to me to use as a tip. I really liked it the first time I saw it. Yeah, I’m 35, but bright lights and lots of color still make me happy. The script itself is a lot more interesting than the effect suggests. The coding is compact and gets the job done quickly.

     You may want to test this script out in a Netscape Navigator browser. It’s not that the coding is Navigator specific, it’s just that if you look at the souce code in IE, all you see is the script. In Navigator, you see the entire run of letters and the colors attached to them.

---

The Script’s Effect

---

Here’s the Code

---

     This is actually two scripts. I want to begin with the bottom script. That’s the one that has all of the display text.

<SCRIPT language=JavaScript>


<!– Start hiding

ColoredText(“This is a text sample written using the function ColoredText”);



document.write (“<BR>”)



ColoredText(“Another text sample, this time only with red and orange repeatedly”,”red”,”orange”);



document.write (“<BR><H1>”)



ColoredText(“Another sample with shades of green”,”#006000″,”#007000″,”#008000″,”#009000″,”#00A000″,”#00B000″);



document.write (“</H1><BR><BR><CENTER><FONT FACE=courier SIZE=+2>”)



ColoredText(“Try refreshing the page a couple of times!”);



document.write (“</FONT></CENTER>”)

// Stop hiding –>



</SCRIPT>

     I can’t stress enough that the code above is truncated. see how some of the long lines break into two lines? When you run this on your system, the lines must all be one one line as it shows in the script.

     What is on this page is for display purposes only.

     OK, you can see that this is both the text on the page and a script. Notice that the text that appears on the page is enclosed in a function’s instance. The concept is that the text within the instance will be displayed on the page only after the function ColoredText() has had the opportunity to act upon it.

     Notice also that the HTML commands that will alter the text are not included with the text. Those HTML tags are contained within document.write commands. They had to be. This is a script, remember. Without the document.write, the script wouldn’t know what to do with the text and you’d get an error.

     If you tried to put the tags inside the ColoredText() instance, the script wouldn’t see them as tags but rather as text to be altered. The concept of tags outside of the text is pretty easy to follow. Notice all of the beginning tags are in the document.write before the text and all of the end tags are in the document.write after the text.

     No big deal. Moving along…

     If you look at the first ColoredText() line of text, you see that it’s just text with nothing following it. Yet, the next two lines of text do have something following it. It may seem odd at first, but the text that had nothing following it is the most colorful.

     The second line has “red” and “orange” afterwards. Note the displayed text is only red and orange.

     The next line has a series of green hex codes; this the text is in shades of green.

     Rule of Thumb: The more colors you offer after the text, the more colorful your text will be. The more shades of the same color you offer, the more smoothly your text will appear to flow. If you put in 50 differe colors of green from lightest to darkest, you’re text will gradiate through that spectrum.

What are those colors?

     They’re arguments. See the format? First you have text in double quotes, then a list of elements, in this case colors, in double quotes one after the other.

     That’s JavaScript shorthand. You could get the exact same effect if you simply created an array of all the greens and called for the one after the other. It would be a lot of typing, though. This way, the browser understands that what follows are arguments, thanks to the format. What’s more, the arguments are turned into an array for you.

     Now, that’s helpful.

     So now we have four lines of text, two of which have arguments so we know what color they’re going to be. But how does that code that has no arguments get to be so darn colorful?

     Next week…

Next Week: The Colorful Non-Argument Text

---

Learn to write your own JavaScripts with the