reptile7's JavaScript blog: A JavaScript 1.2 Calendar and Clock, Part 1

Tuesday, November 14, 2017

A JavaScript 1.2 Calendar and Clock, Part 1
Blog Entry #383

We introduced the Multiple Java Calendar script in the previous entry and are now ready to deconstruct the script's frame documents; we'll go through js-calbot1.html and the date string part of js-caltop1.html in today's post.

The font-size follies

The js-calbot1.html source is much simpler than that for js-caltop1.html or js-calbot2.html, and contains no JavaScript, so that's where we'll start.

<html>

<!-- This script was made by Ryan Haugh. -->

<head><title></title></head>

<body bgcolor="black" text="white">

<center>

<font size="+4,+5" face="Arial">This Is A Simple Calendar That You Can Change To Any Month Or Year You Want.</font>

</html>

• An authorship comment containing the author's full name appears in all three Pagetools.de frame documents but not in the corresponding JavaScript Goodies documents.
• Yep, the </center> tag is missing - we'd need it if we were keeping the center element but we won't be doing that.

We've got a white, horizontally centered, gigantic Arial text string on a black background - that's it. HTML5 declares that the bgcolor and text attributes of the body element, the center element, and the font element are obsolete ... and must not be used by authors, but let's leave this aside for a moment. The one odd thing here is that size="+4,+5" attribute - what does it mean, what exactly does it give us?

The +4,+5 value is not invalid in that the font element's size attribute has a CDATA data type designation but it's not really valid, either: unlike the face="Arial" attribute, whose value could be a comma-separated list of font names in order of preference, the size attribute should have only one setting.

A size="+4" setting would mean "four sizes larger" and take us from a size="3" default to a size="7" maximum vis-à-vis an integer size scale that ranges from 1 to 7 and to which all sizes belong, quoting the W3C; it follows that a size="+5" setting would also take us to the size="7" maximum, i.e., +5 wouldn't go off-scale and give us an even bigger size.

To see how a +4,+5-type value plays out in an on-scale case, I applied size="+2", size="+2,+3", and size="+3" settings to some normal (size="3") text: I found that the size="+2" and size="+2,+3" renderings were identical and were smaller than the size="+3" rendering, as though the browser parseInt( )ed the +2,+3 value.

If in the js-calbot1.html case the size="+4", size="+4,+5", size="+5", and size="7" settings give identical renderings, then in the name of simplicity we might as well size="7" the This Is A Simple Calendar ... string if we're going to hold onto the font element. But of course, we shouldn't hold onto the font element, or the center element or the body element's bgcolor and text attributes for that matter; as the center element is a type of div element, we should code the js-calbot1.html body with:

body { background-color: black; color: white; }

#aboutDiv { text-align: center; font-size: 48px; font-family: Arial; }

...

<div id="aboutDiv">This Is A Simple Calendar That You Can Change To Any Month Or Year You Want.</div>

This Is A Simple Calendar ...

At least on my computer, a size="7" setting is effectively duplicated by a font-size:48px; style declaration; CSS's largest <absolute-size> font-size value, xx-large, maps onto size="6" and therefore doesn't quite cut it.

What day is today?

The first-completed part of the js-caltop1.html display is the date string in the layout table's left cell. Most of the js-caltop1.html display is created JavaScriptically, and the date string is created completely by top-level code in the first of three script elements in the js-caltop1.html body.

We begin by creating a today Date object and then getting day of the week, month, date number, and year information for that object.

<body onload="date( );" bgcolor="black" onunload="reseter( );" text="white">

...

<script>

...

today = new Date( );

day = today.getDay( ) + 1;

months = today.getMonth( ) + 1;

dates = today.getDate( );

years = today.getYear( );

The author increments the getDay( ) and getMonth( ) returns to numbers that a non-programmer would associate with a given day of the week and month respectively, e.g., day is 1 for a Sunday, months is 11 for November. This is a bad call in my book: when writing JavaScript code it is best to stick with JavaScript's starts-with-0 indexing system.

The Multiple Java Calendar script went live at Java Goodies in November 1997 and predates the implementation of the getFullYear( ) method in JavaScript 1.3; the years getYear( ) return would have been 97 in 1997.

Moving on, the day and months indexes are respectively converted into corresponding day of the week and month strings by two series of if statements.

if (day == 1) { day = "Sunday, "; }

else if (day == 2) { day = "Monday, "; }

...

else if (day == 7) { day = "Saturday, "; }



if (months == 1) { months = "January "; }

else if (months == 2) { months = "February "; }

...

else if (months == 12) { months = "December "; }

Finally, day, months, dates, and years are plugged into the b element child of a font element that concludes (is the lastChild of) the layout table's left (rows[0].cells[0]) cell.

document.write("<center>");

document.write("<table border='0' width='100%'>");

document.write("<tr>");

document.write("<td align='middle'>");

document.write(...img placeholders for the image-based digital clock...);

document.write("<br>");

document.write("<font face='Arial'><b>" + day + months + dates + "/" + years + "</b></font>");

document.write("</td>");

</script>

• In the js-caltop1.html source, the <center> → </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 beginning center element horizontally centers the text that follows the layout table but has no effect on the layout table itself, which spans the width of the viewport as per its width='100%' attribute.
• The td content is in practice horizontally centered by the align='middle' attribute even though align should have been set to center for this purpose. FYI: The align attribute was valid for the various internal table elements in HTML 4 but has now been obsoleted by HTML5 for all of the elements that could formerly take it.

So, if we retro-set today to 1 November 1997 (new Date(1997, 10, 1)), then our output is:

Saturday, November 1/97

How I'd code the date string

body { background-color: black; color: white; }

#datestringDiv { font-weight: bold; font-family: Arial; }

...

<div id="datestringDiv"></div>

...

var today = new Date( );

var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

var day = dayArray[today.getDay( )];

var monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var months = monthArray[today.getMonth( )];

var dates = today.getDate( );

var years = today.getFullYear( );

document.getElementById("datestringDiv").textContent = day + ", " + months + " " + dates + ", " + years;

I like working with arrays and I use a getDay( )-synced dayArray and a getMonth( )-synced monthArray to set day and months, respectively. I of course replace the getYear( ) call with a getFullYear( ) call. I house the date string in a div, which can be created JavaScriptically although I prefer to write it as normal HTML. Re the date string format, I separate dates and years with a comma-space versus a slash.

- posted by A. Peak @ 5:36 PM

Comments: Post a Comment

<< Home

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

About Me