Thursday, June 26, 2014
The Text at the End of the Rainbow
Blog Entry #325
The Java Goodies: Scripts that Display Text script collection contains three scripts that color text strings on a character-by-character basis:
(1) "Color Gradient Text"
(2) "Multi-Colored Text"
(3) "Rainbow Text"
We have previously worked through the Color Gradient Text and Multi-Colored Text scripts; we'll take up the Rainbow Text script in today's post. The Rainbow Text script was authored by Ian Moore in 1996 or 1997 or 1998.
Unlike the Color Gradient Text and Multi-Colored Text scripts, the Rainbow Text script is an interactive application that allows the user to input a document range into a textarea box, click an button, and display the colored range in a new window.
Joe's demo
The script's demo basically works OK although the upper part of its interface is a bit confusing. Situated above the textarea field is an HTML Source checkbox and a selection list comprising and options.
(This is a screenshot of the interface and not a working demo.)The author wants the user to check the checkbox if the range to be inputted is an entire document that includes start-tags and end-tags for the html, head, title, and body elements; this markup is added to the user's input if the checkbox is left unchecked - or would be added, if the script's test of the checkbox's checked status were not out of order.
The selection list can be used to give the new window document a black or white background color if the checkbox is left unchecked. For his demo, Joe effectively disabled the selection list by removing the script's body bgcolor operation:
mywin.document.writeln("<body bgcolor='" + backColor + "'>");The Rainbow Text script appears to color the characters of text strings randomly à la the Multi-Colored Text script; we'll see in due course that it actually colors them according to an arrayed sequence of colors.
Pre-display
The interface controls and the
name="myform" form that contains them are coded in a conventional manner and there's no need for us to go through this HTML, so with no further ado let's get to the script's JavaScript, which begins by setting out the colors we'll be applying to the textarea value.myColor = new Array(1);
myColor[0] = "#FF0000";
myColor[1] = "#CC0099";
myColor[2] = "#990099";
myColor[3] = "#CC00FF";
myColor[4] = "#330099";
myColor[5] = "#006699";
myColor[6] = "#33FF99";
myColor[7] = "#336600";
myColor[8] = "#666000";
myColor[9] = "#996600";
myColor[10] = "#FF9900";
myColor[11] = "#FFCC33";
myColor[12] = "#FFFF00";
myColor[13] = "#FF9966";Excepting #666000, all of the myColor colors are Web-safe colors.
At a later point we will sequentially access the myColor values via a b variable, which is initialized to 0.
var b = 0;Clicking the button
<input type="button" value="OK" onclick="morefun( );">calls a morefun( ) function. The morefun( ) function first gets the value of the selection list's selected option and assigns it to a backColor variable.
function morefun( ) {
var backColor = document.myform.myselect[document.myform.myselect.selectedIndex].value;...
<form name="myform">
HTML Source <input type="checkbox" name="isHTML">
<select name="myselect">
<option value="black">Black Background
<option value="white">White Background
</select><br> It's not necessary to use the options property of the Select object to access a
<select>'s <option>s. Upon probing the document.myform.myselect object with a for...in statementvar result = "";
for (var i in document.myform.myselect)
result += "document.myform.myselect" + "." + i + " = " + document.myform.myselect[i] + "<br>";
document.write(result);the first two outputted lines are:
document.myform.myselect.0 = [object HTMLOptionElement]
document.myform.myselect.1 = [object HTMLOptionElement]
The morefun( ) function next opens a new window.
mywin = newwin = window.open("", "mywin", "toolbar=no,directories=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=no,location=no");It's been a while since we've dealt with a window.open( ) command. Mozilla's current window.open( ) page is here. The W3C will be bringing window.open( ) into HTML5.
The new window is blank as the command's strUrl parameter is set to an empty string. FYI: For Safari users, the strUrl parameter must be set to
about:blank to give the new window a <title> value (otherwise the title will be Untitled).Oddly, the new window is given two object references: mywin and newwin. Is there any need to do this? None whatsoever - indeed, the script makes no use of the newwin identifier. The new window's name property is set to mywin.
Note that the command's strWindowFeatures string does not contain width and height settings. Re the size of the new window, here's what I see as regards the modern OS X browsers on my computer:
(F) The new window and the opener window have the same outerWidth/outerHeight dimensions when using Firefox.
(O) The new window has an outerWidth of 403 and an outerHeight of 595 regardless of the size of the opener window when using Opera.
(S) The new window and the opener window have the same innerWidth/innerHeight dimensions when using Safari.
The strWindowFeatures string turns on the menubar and scrollbars features and that's it. In practice:
• The new window is given an address bar by Firefox and Opera but not by Safari.
• The new window is resizable with Firefox, Opera, and Safari.
• There are no scrollbars if the document content does not overflow the viewport.
Other notes:
• The directories feature is obsolete: use personalbar instead.
• We previously discussed the nonstandard copyhistory feature in the More on copyhistory subsection of Blog Entry #154.
The strWindowFeatures string is much more cumbersome than it needs to be and can be shrunk to menubar,scrollbars: it's not necessary to explicitly set menubar and scrollbars to yes or turn off the other specified features.
Moving back to the opener document, the morefun( ) function gets the user's textarea input and assigns it to a mystring variable.
mystring = document.myform.myarea.value;
...
<textarea name="myarea" rows="10" cols="30"></textarea>The remainder of the morefun( ) function assembles the new window document. An if statement writes some introductory markup and sets the body background color if the "status" of the isHTML checkbox is false.
if (document.myform.isHTML.status == false) {
mywin.document.writeln("<html><head>");
mywin.document.writeln("<title>Somewhere over the rainbow....</title></head>");
mywin.document.writeln("<body bgcolor='" + backColor + "'>"); }The Checkbox object does not in fact have a status property (the only classical JavaScript object having a status property is the window object): the author meant to check the checkbox's checked property. The
document.myform.isHTML.status expression evaluates to undefined and the undefined == false comparison returns false ⇒ nothing is written regardless of whether the checkbox is checked or unchecked. However, if we change status to checked and leave the checkbox unchecked, then the if body is executed (and would overwrite the corresponding <html>/<head>/<title>/<body> markup in the user's input if it were present).Is there any reason to use the writeln( ) method here as opposed to the write( ) method? No.
If you're going to run this code through a validator, don't forget to escape the </ character sequences in the end-tags:
mywin.document.write("<title>Somewhere over the rainbow....<\/title><\/head>");The body background color can alternatively be set with a style element vis-à-vis the deprecated bgcolor attribute:
mywin.document.write("<style type='text/css'>body { background-color: " + backColor + "; }<\/style>");We'll continue our deconstruction of the Rainbow Text script in the following entry.
- posted by A. Peak @ 4:10 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)