reptile7's JavaScript blog: Coloring by Character, Part 1

Sunday, November 17, 2013

Coloring by Character, Part 1
Blog Entry #306

In today's post we will take up a "Multi-Colored Text" script that randomly colors the characters of a text string. The Multi-Colored Text script - get it here - was authored by Erik Schmidt in 1998 and, like the Make Me A Password script discussed in the previous post, comes from the Java Goodies: Scripts that Display Text script collection.

The Multi-Colored Text script's effect - see it here - is very similar to that of the HTML Goodies JavaScript Script Tips #81-83 script, which we deconstructed in Blog Entry #99. However, the Multi-Colored Text script differs from the Script Tips #81-83 script in two key ways:
(1) The Multi-Colored Text script applies a much greater level of color-randomness to its text-string operand than does the Script Tips #81-83 script.
(2) Unlike the Script Tips #81-83 script, the Multi-Colored Text script will recognize and act on HTML markup in its text-string operand, e.g., if the string contains a this text is bold element, then the this text is bold content will be bolded (and randomly colored) on the page.

Before we get started, Erik wants us to know: BTW, for you Yankees, I spell colour with a 'u' because I'm Canadian. Duly noted, mate. Wherever you are, Erik, sit back, crack open an ice-cold Brador, and enjoy the show...

The text

In 1998 the latest versions of IE and Netscape were IE 4.x and Netscape 4.x, respectively. Unlike Microsoft's JScript, classical JavaScript did not have an innerHTML property via which the content of a div or p element could be accessed, so the Multi-Colored Text script's to-be-colored text string was placed in a script element as follows:

<body bgcolor="white">

<script language="javascript">

text = "This JavaScript shows every other letter of text as a different, random colour.";

text += " You can also use any <blink> <font size='9'> HTML </font> </blink> codes that you want";

text += " as long as you don't use quotation marks and the commands have a space between them.";

text += " You can use any background colour or picture that you want, but black or white is suggested.";

text += " <b> <u>HAVE FUN!!!</u> </b>";

colours(text);

<p>

</script>

innerHTML notes

• Just to be clear, the Multi-Colored Text script colors every (not every other) letter of text with a different, random color.

• In theory it is true that the text string can contain any HTML markup, but I encourage you to stick to elements that style text, as Erik does.

• As noted in The tables[5] table section of Blog Entry #293, the blink element (a) poses an accessibility problem and (b) is supported by neither IE nor Google Chrome nor Safari: don't use it.

• Value-wise, the size attribute of the font element only goes as high as 7 (not 9). As noted in the Pre-tables[1] section of Blog Entry #291, a size="7" font element attribute maps onto a font-size:48px; style declaration.

• As the script stands, it is true that the text string cannot contain (double) quotation marks and that there must be white space between adjacent HTML tags (e.g.,  ); we'll sort out these limitations in due course.

• Erik may suggest a black background color, but I don't: stick with white.

• HTML 4 deprecated the font and u elements; HTML5 is reinstating the u element and giving it a broader definition.

Once the five text string segments have been strung together, text is fed to a colours( ) function held by a separate script element in the document head. The colours( ) function call is followed by an out-of-place  tag that must be removed for the script to work.

pre-colours( )

The colours( ) function leverages a hexa pseudo-array of hexadecimal digits to create random hex codes for coloring the text characters.

hexa = new MakeArray(16);

hexa[10] = "A";

hexa[11] = "B";

hexa[12] = "C";

hexa[13] = "D";

hexa[14] = "E";

hexa[15] = "F";

function MakeArray(n) {
	this.length = n;
	for (var i = 0; i <= n; i++) this[i] = i;
	return this; }

function colours(text) { … }

The hexa construct is actually an Object object*, although you wouldn't know that from reading Mozilla's Object object page. The MakeArray( ) constructor function equips hexa with 18 members:

hexa[0] = 0;

hexa[1] = 1;

...

hexa[16] = 16;

hexa.length = 16;

The hexa[10]=10;-to-hexa[15]=15; members are overwritten by the hexa[10]="A";-to-hexa[15]="F"; statements that follow the new MakeArray(16); constructor.

(*You may recall that we recently dealt with analogous Object objects in the shopcartindex.html script of the "So, You Want A Shopping Cart, Huh?" shopping cart.)

Methinks the Object object business is too clever by half in that we can formulate hexa as a bona fide Array object via a single line of code:

var hexa = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

Array literals are detailed here in the Mozilla JavaScript Guide.

The colours( ) function deserves its own entry so let's deal with it next time.
- posted by A. Peak @ 7:39 PM

Comments: Post a Comment

<< Home

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)

About Me