Saturday, January 30, 2016
The Digit Counters Cycle
Blog Entry #359
Well, we certainly got some flesh on the bone with the Loan Amount script, didn't we? I fear that the rest of the Java Goodies Calendars, Clocks, and Calculators (CCC) sector will be anticlimactic but let's keep going and see what we have for a little while.
The next CCC offering is a "Digital Clock" script that provides a set of files for assembling a JavaScript digital clock. Clicking the here link on the Java Goodies Digital Clock page accesses a digitalclockface.zip package that unzips to give a digitalclockface folder comprising 14 dgt*.gif images and a digitalclockface.html document. Neither Java Goodies nor the digitalclockface.html document identifies who put all this together.
The demo on the Java Goodies Digital Clock page doesn't work - its images were evidently cut loose when the page was archived - although the corresponding JavaScript Goodies Digital Clock demo works very nicely. If the Digital Clock clock looks familiar, it should: it's the same one discussed by HTML Goodies' JavaScript Script Tips #84, #85, and #86. Unlike the Java/Script Goodies Digital Clock pages, Script Tips #84-86 don't offer a downloadable .zip package of files but do take a respectable stab at deconstructing the digitalclockface.html code.
There are actually two sets of JavaScript Script Tips at the HTML Goodies site:
(1) a current set to which the main page links and
(2) a hidden legacy set.
The current Script Tips portal is a bit of a mess:
(a) it begins and ends with extraneous material,
(b) the links to Script Tips #66, #76, #85, and #86 are missing, and
(c) the remaining Script Tips links are somewhat out of order.
Moreover, many of the current Script Tips demos are dysfunctional for one reason or another.
There is a legacy Script Tips portal although its links redirect to the current Script Tips. However, the legacy Script Tips themselves can still be accessed generally via a http://www.htmlgoodies.com/legacy/beyond/javascript/stips/scripttip#.html URL having a # Script Tip number in the file name, e.g., http://www.htmlgoodies.com/legacy/beyond/javascript/stips/scripttip7.html points to the legacy Script Tip #7. The legacy Script Tips demos are all A-OK (there's a small glitch in the Script Tips #19-20 demo's textual output, but other than that...); I linked above to the legacy Script Tips #84-86 and not the current Script Tips #84-86 because the former's demo works and the latter's demo doesn't.
I covered Script Tips #84-86 in Blog Entry #101, which I guess I should link to, although I am generally wary of linking to my older blog entries for two related reasons:
(1) There are a lot of dead links in those entries, in particular, my many links to sections in the manuals of the Netscape DevEdge Library, which is long gone, are all dead.
(2) The iframes that formerly displayed demos or script code in those entries now show a hideously ugly Forbidden as a result of my cutting ties with EarthLink a couple of years ago, and you'll see three Forbiddens if you follow the preceding link.
Uploading an ImageClock folder of .gif/.html files to the free server space that EarthLink gave me was a piece of cake. I can't do that with Blogger, but it occurred to me that I could individually upload the dgt*.gif images to Blogger and then deploy the image URLs in the digitalclockface.html code so as to give you a demo here and now:
You would think that Blogger would collectively place my images in a http://reptile7.blogspot.com/2016/01/images/-type directory, but nooooooooo, each image gets a custom, pseudorandom URL path, e.g., the URL for the dgt0.gif image is:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLV7qHTmcrXrxcK7pIKh2FFMQ0sjkvp4vLR-MOSorz0HWKh5o1QQvRAoZSI1GYJVhyphenhyphenSGxj3JBQeoaL0hlEKGugDbcdUdPXHigB-29ssyQPu_DEaVKyH3r1n7AuhzY1LeQHn4fwCA/s1600/dgt0.gif
So instead of preloading the digit images with a single line of loop body code, I have to do it line by line, i.e.:
var d = new Array( );
for (i = 0; i < 10; i++) d[i] = new Image( );
d[0].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLV7qHTmcrXrxcK7pIKh2FFMQ0sjkvp4vLR-MOSorz0HWKh5o1QQvRAoZSI1GYJVhyphenhyphenSGxj3JBQeoaL0hlEKGugDbcdUdPXHigB-29ssyQPu_DEaVKyH3r1n7AuhzY1LeQHn4fwCA/s1600/dgt0.gif"
d[1].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge-I1ddIRbmg4wnvQTxpviuHQOXB_ktNnQ2wRV_cMk3k4yw619iBCzY_7be6YAt82SSraI86ocbT4rWgPTFWO4zK4XxF2onFnewKJmmJ1wrtmnhe8hYYgyo-qnMUj7PMCzZw5nvg/s1600/dgt1.gif";
... You get the idea. A bit tedious, yes, but nothing we can't handle, eh?
Post-post criticism
There are a number of things in Joe's Script Tips #84-86 text that I could nitpick over, but I didn't bring them up in Blog Entry #101 and I'm not going to do so now. Instead, let me make some 11th-hour comments regarding Blog Entry #101 itself:
• An object is in essence an associative array, so the document["imageName"] syntax for referencing an image is indeed legit.
• Yes, you should include a radix argument whenever you carry out a parseInt( ) operation.
• To extract the min/sec tens-place digit(s), use a Math.floor( ) operation as opposed to a parseInt( ) or toString( ).charAt( ) operation, for which a number-to-string conversion would be necessary.
• Regarding the recursive clock( ) function call, Mozilla recommends the
window.setTimeout(clock, 100); syntax rather than the window.setTimeout("clock( );", 100); syntax.We'll take up the next CCC script, "Slope", in the following entry.
- posted by A. Peak @ 4:05 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)