Thursday, November 30, 2017
A JavaScript 1.2 Calendar and Clock, Part 2
Blog Entry #384
Welcome back to our ongoing analysis of the Calendars, Clocks, and Calculators Multiple Java Calendar script. At present we are working our way through the js-caltop1.html document that fills the upper frame1 frame of the javacalendar.html frameset.
As noted in the previous post, the js-caltop1.html body contains three script elements, which I will call scripts[0], scripts[1], and scripts[2], as though we had gotten them with a
var scripts = document.getElementsByTagName("script"); command. (FYI: Use of the id attribute with the script element wasn't OK in HTML 4 but is green-lighted by HTML5.)The left cell of the js-caltop1.html layout table is coded completely by the scripts[0] script, whereas the center cell of the table is coded partly by the scripts[1] script and partly by the scripts[2] script. The right cell of the table is written as normal HTML.
The month and year controls
The document.write( ) command that writes out the
"<font face='Arial'><b>" + day + months + dates + "/" + years + "</b></font>"date string in the layout table's left cell also writes out nine img placeholders for the image-based digital clock above the date string; the clock itself is filled in by a date( ) function that fires when the js-caltop1.html page has finished loading. Before we get to the clock, however, we've got some more top-level rendering to do.
The scripts[0] script ends with the
document.write("</td>"); closure of the left cell. The scripts[0] script's nextElementSibling is the scripts[1] script, which writes out some of the layout table's center cell.The center cell content comprises a form that holds four controls, in source order:
elements[0] is a selection list of month options.
elements[1] is a push button.
elements[2] is a text field that displays a getYear( ) year number.
elements[3] is a push button.
The scripts[1] part of the center cell is:
<script>
...
document.write("<center><td><form name='isnform'>");
document.write("<select name='isnlist' onchange='navigator(this.form);'>");
document.write("<option value='1'>January");
document.write("<option value='2'>February");
...
document.write("<option value='12'>December");
document.write("</select>");
</script>• The starting center element cannot validly be a child of the layout table's rows[0] row (the tr element has a
(th|td)+ content model) and does not horizontally center the rows[0].cells[1] content. Throw it out.• À la the date string's
months = today.getMonth( ) + 1; index, each month option value is one higher than the corresponding getMonth( ) return.The isnlist list's options can alternatively and preferably be created via the selectObject.options-writing methodology detailed in Blog Entry #380:
var monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var optionvaluesArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; /* As per getMonth( ) */
for (var i = 0; i < monthArray.length; i++)
document.isnform.isnlist.options[i] = new Option(monthArray[i], optionvaluesArray[i]);The scripts[1] script ends with the
document.write("</select>"); closure of the isnlist list. The scripts[1] script's nextElementSibling is the scripts[2] script, which writes out the rest of the center cell.t = new Date( );
y = t.getYear( );
...
<script>
document.write("<input name='raise' type='button' value='<<' onclick='down( );'>");
document.write("<input name='showyear' type='text' value='19" + y + "' size='4'>");
document.write("<input name='raise' type='button' value='>>' onclick='up( );'>");
document.write("</form>");
document.write("</td>");
...
</script>In the js-caltop1.html source, the
<input ... value='<<' ...> → </td> run of tags is actually written out by a single document.write( ) command, which I have broken up for the sake of clarity.The value attribute of the input element has a CDATA data type designation and therefore there shouldn't be a problem with specifying literal < and > characters in the value values for the and buttons but you might want to err on the side of caution and use character references to code those characters, e.g.,
value='<<' and value='>>'.The
t = new Date( ); and y = t.getYear( ); statements actually appear near the beginning of the scripts[1] script, although they could have been placed at the beginning of the scripts[2] script. The y year number is effectively appended to a 19 substring and the resulting numeric string is assigned to the value of the showyear text field. For all but a small set of very early browsers, the 2017 y return is 117 and the initial showyear value is therefore 19117.The
today = new Date( ); and years = today.getYear( ); statements in the date string part of the code have a global scope and could have been used to set the showyear value. That said, if we were to separate the code's calendar, clock, and date string parts from one another, then each part would of course need its own Date functionality.The navigator( ), up( ), and down( ) functions are coded in the scripts[1] script; we'll go through these functions after we display the calendar in the frame2 frame.
Before we move on to the layout table's right cell, I should note that the isnlist selection is set to the current month by:
v = t.getMonth( ) + 1;
...
document.isnform.isnlist.selectedIndex = v - 1;The v getMonth( ) determination follows the t construction in the scripts[1] script, whereas the selectedIndex assignment occurs at the very end of the scripts[2] script. A
document.isnform.isnlist.selectedIndex = t.getMonth( ); command at the end of the scripts[1] script would have been simpler, yes?The calendar trigger
The right cell's only content is a push button.
<td>
<input name="butt" type="button" value=" Show Calendar " onclick="compute(this.form); window.open('js-calbot2.html', target='frame2');">
</form>
</td></tr></table>The button is the last control of a line form whose start tag and first five controls are written JavaScriptically in the scripts[2] script
document.write("<form name='line'>");
document.write(...5 type='hidden' <input>s...);even as the button and the following
</form> tag are written as normal HTML as shown above - not a valid situation* whether the script element has a CDATA or #PCDATA content model.*We could say the same thing about the layout table itself, most of which is created JavaScriptically but whose last cell and concluding markup are written as normal HTML. We will get rid of the document.write( ) commands, the layout table, and the isnform and line forms when it comes time to roll out a demo.
The compute( ) function is coded in the scripts[2] script; we'll discuss compute( ) and that somewhat unusual window.open( ) command when we're ready to display the calendar.
Clock intro
The layout table is followed by three
<p>s of text that take us to the end of the js-caltop1.html source and that I trust you are able to modify (or delete) as you see fit. When the top-level rendering is finished, the browser gets to work on the clock in the table's left cell. As noted earlier, the clock's img placeholders are written out by the same scripts[0] document.write( ) command that writes out the date string.var a = 12;
var b = 15;
...
/* As before, the original code has been broken up below to make it more readable. */
document.write("<img name='hour1' src='dgbl.gif' width='" + a + "' height='" + b + "'>");
document.write("<img name='hour2' src='dgbl.gif' width='" + a + "' height='" + b + "'>");
document.write("<img src='dgcol.gif' height='" + b + "'>");
document.write("<img name='min1' src='dgbl.gif' width='" + a + "' height='" + b + "'>");
document.write("<img name='min2' src='dgbl.gif' width='" + a + "' height='" + b + "'> ");
document.write("<img name='sec1' src='dgbl.gif' width='" + a + "' height='" + b + "'>");
document.write("<img name='sec2' src='dgbl.gif' width='" + a + "' height='" + b + "'> ");
document.write("<img name='noon1' src='dgbl.gif' width='" + a + "' height='" + b + "'>");
document.write("<img src='dgm.gif' width='" + a + "' height='" + b + "'>");Seven of the nine placeholders are initially filled with a 'blank' dgbl.gif image. A dgcol.gif image of a colon fills the third placeholder and a dgm.gif image of an uppercase M fills the ninth placeholder. Note that a space separates (v-vi) the fifth and sixth placeholders and (vii-viii) the seventh and eighth placeholders.
(Yes, the dgcol.gif image really is that faint. Also, the original
bgcolor="black" rubs me the wrong way and we'll definitely change that when it comes time to roll out a demo.)
We'll check over the date( ) function that sets the hour, minute, second, and a.m./p.m. parts of the clock in the following entry.
- posted by A. Peak @ 5:55 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)