Thursday, May 29, 2014
Condition Red
Blog Entry #321
In this entry we will check over the "Flashing Warning" script offered by the Scripts that Display Text script collection of the Java Goodies JavaScript Repository. The Flashing Warning script was written by Greg Bland in 1998 and is posted here. To see what the script's effect should look like, click on the Warning! widget below:
Warning!
(You've always wanted to adorn your Web page(s) with a flashing warning sign, haven't you? I thought so.)
The script puts the warning text in a layer
<layer name="funlayer" bgcolor="red" top="" left="">Warning text</layer>and attempts to create the flashing effect by incrementally reddening the layer's background color. However, the reddening is carried out via a loop (actually two loops), and as a result I don't see any flashing at all upon running the script with Netscape Communicator 4.61 in the SheepShaver environment: we previously observed in Blog Entry #192 that loops are not meant for executing code in a controlled, gradual way. We will unlayerize and unloop the script in due course.
Script deconstruction
The script begins by setting up an array of hexadecimal digit strings running from 1 to f, inclusive.
c = new Array(6); // 6??
c[1] = "1"; // No use is made of this element/value.
c[2] = "2";
...
c[14] = "e";
c[15] = "f";Could this data be written as a single line via the array literal syntax? That it could:
var c = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];Loading the script document
<body onload="mkbg( );">calls a recursive mkbg( ) function.
function mkbg( ) {
...
window.setTimeout("mkbg( );", 100); /* mkbg( ) calls itself every 100 milliseconds. */ }The mkbg( ) function gets right to work: an outer-inner loop pair initially darkens the funlayer layer's background color to #220000 and then sequentially raises the layer's 'red quotient' to pure red (#ff0000).
for (i = 2; i <= 15; i++) {
for (i2 = 2; i2 <= 15; i2++) {
color1 = c[i];
color2 = c[i2];
bl = "#" + color1 + "" + color1 + "0000";
document.funlayer.bgColor = bl; } }The outer loop runs according to an i counter; the inner loop runs according to an i2 counter. Each loop runs for 14 iterations.
The inner loop plugs i and i2 into the c array to get their hexadecimal digit string equivalents, which are respectively given color1 and color2 identifiers. The color1 value is inserted twice between
"#" and "0000" strings to give a six-digit RGB color that is assigned to the bgColor property of the funlayer layer object via the intermediacy of a bl variable; no use is made of the color2 value. BTW, the + "" term between the two color1s is unnecessary.If we're going to leave color2 high and dry, then the inner loop can be folded into the outer loop
for (i = 2; i <= 15; i++) {
color1 = c[i];
document.funlayer.bgColor = "#" + color1 + color1 + "0000"; }although you can certainly deploy color2 if you want to via a
document.funlayer.bgColor = "#" + color1 + color2 + "0000";statement that reddens the funlayer layer somewhat more slowly (#230000, #240000, #250000, ...) than the
color1 + color1 combination does (#330000, #440000, #550000, ...).Rounding out the mkbg( ) function is a second outer-inner loop pair
for (i = 2; i >= 4; i--) {
for (i2 = 2; i2 >= 4; i2--) {
color1 = c[i];
color2 = c[i2];
bl = "#" + color1 + "" + color1 + "0000";
document.funlayer.bgColor = bl; } }that is not executed because, strangely, the condition of the outer loop returns false from the get-go. Nothing more needs to be said about this code.
Slow down baby
Let's get back to the first outer-inner loop pair. Regardless of whether we use two loops or just one, the browser/processor burns through those iterations so quickly that all we see on the page is a pure red layer, or at least that's what happens on my computer. Subtracting the loop action
var i = 2, color1;
function mkbg( ) {
color1 = c[i];
document.funlayer.bgColor = "#" + color1 + color1 + "0000";
i++;
if (i == 16) i = 2;
window.setTimeout("mkbg( );", 100); }gratifyingly gives rise to a flashing layer.
Other practical details
No layer
The funlayer layer can be traded in for the container element of your choice: I use a span for the demo at the outset of the post. (You had to click my demo because onload cannot be used with a span as of this writing although HTML5 is gonna change that.) We access and increment the container background color in the usual manner:
document.getElementById("containerID").style.backgroundColor = "#" + color1 + color1 + "0000";It doesn't have to be red
The RGB concatenation is easily tweaked to give other colors.
Yellow:
document.getElementById("containerID").style.backgroundColor = "#" + color1 + color1 + color1 + color1 + "00";Lime:
document.getElementById("containerID").style.backgroundColor = "#00" + color1 + color1 + "00";Blue:
document.getElementById("containerID").style.backgroundColor = "#0000" + color1 + color1;And so on.
- posted by A. Peak @ 3:51 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)