reptile7's JavaScript blog: Calendar Initiation II

Saturday, March 21, 2015

Calendar Initiation II
Blog Entry #346

Welcome back to our deconstruction of the Java Goodies Calendar and Datebook script. We are at present going through the example.html document's second script element, to which I will give a script1 id for the discussion below. (I was going to call it the scripts[1] script, as though we had gotten it with a var scripts = document.getElementsByTagName("script"); command. However, I see that HTML5, which is now a W3C Recommendation, green-lights the use of the id attribute with the script element; HTML 4 forbade that.)

With the ampCal ampCalendar object and its various properties in hand - see the Initiation I section of the previous post - we next send data for 4 date memos

// Set the text of days.

ampCal.setItem(3, "Dentist Appointment");

ampCal.setItem(7, "Take puppies to the vet");

ampCal.setItem(14, "Call Kathy regarding auto loan");

// Note: you can include HTML tags in the text...

ampCal.setItem(25, "Office party<br><br>Bring pizza");

to the ampcal.js script's ampCalendar_setItem( ) function.

function ampCalendar_setItem(nDay, strText) {
	x = this.m_rgDay.length;
	this.m_rgDay[x + 1] = nDay;
	this.m_rgTxt[x + 1] = strText; }

The ampCalendar_setItem( ) function parks the data's arguments[0] (nDay) values in the m_rgDay[ ] array and its arguments[1] (strText) values in the m_rgTxt[ ] array. At the end of this process, we have:

ampCal.m_rgDay = [undefined, 3, undefined, 7, undefined, 14, undefined, 25]; ampCal.m_rgTxt = [undefined, "Dentist Appointment", undefined, "Take puppies to the vet", undefined, "Call Kathy regarding auto loan", undefined, "Office party<br><br>Bring pizza"];

• The +1 operations in the function are to blame for all those undefineds; these additions are unnecessary because each assignment to the m_rgDay[ ] array itself increases this.m_rgDay.length (x) by one.

• As shown above, the strText memo text can be marked up or otherwise supplemented with HTML. N.B. Andrew's demo prepends an <img src='images/pizza.jpg'> image to the last setItem memo.

• You may be wondering, "Why are we storing this stuff at all? Can't we directly load the memos into the calTable table cells?" We can in fact do that but not before we've built the table, so just hold tight, OK?

Subsequently the script1 script jazzes up the title string a bit

// Set the title to something cool.

ampCal.title = ampCal.title + " - Eat at Joe's";

and then unnecessarily resets the fontSize value to 2

ampCal.fontSize = "2";

// The ampCalendar( ) constructor function previously set this.fontSize to 2.

and then bumps up the headSize value to 3.

ampCal.headSize = "3"; // This is the Sunday, Monday, ... line.

(If these seem like odd font sizes to you, that's because they're actually values for the size attribute of the font element - we'll CSS-ize them in due course.)

The script1 script concludes with a call to the ampcal.js script's ampCalendar_Display( ) function:

// Now show off our calendar.

ampCal.display( );

</script>

The ampCalendar_Display( ) function builds the calendar from the ground up and writes it to the page, and also places a brief credit below the calendar - we probably won't get through all of it in this post, but let's get started, shall we? The first ampCalendar_Display( ) command outputs the title string as a horizontally centered h1 heading:

function ampCalendar_Display( ) {
	document.writeln("<h1><center>" + this.title + "</center></h1>");

• The h1-h6 heading elements all have an (%inline;)* content model, which would be violated by a center element child if we were writing this out as normal HTML. Of course, we should really carry out the <center>ing with an h1 { text-align:center; } style rule.

• The document object's write( ) and writeln( ) methods give identical renderings in almost all cases, and you may use the write( ) method in place of the writeln( ) method throughout the ampCalendar_Display( ) function.

• Although old-school, the use of the writeln( ) method to write out the calendar does require fewer lines of code than would a modern-day DOM approach, i.e., creating the elements with the createElement( ) method, deploying the elements with the appendChild( ) method, etc.

• As ampcal.js is an external script, I don't know if its unescaped HTML end-tags (</center>, </h1>, ...) would pose any problems if we were to validate the example.html document: you may want to escape those guys to be on the safe side.

As the title heading heads the calTable table, we could alternatively captionize it

caption { font-weight: bold; font-size: 32px; } /* This'll give it an <h1>-ish appearance. */



document.write("<caption>" + this.title + "</caption>");

just inside the table element start-tag, which brings us to the next ampCalendar_Display( ) command:

document.writeln("<table border=\"1\" cellpadding=\"3\" bordercolor=\"#FFFFFF\" bordercolordark=\"#FFFFFF\" bordercolorlight=\"#FFFFFF\">");

The border, bordercolor, bordercolordark, and bordercolorlight attributes can and should be replaced by a table, td { border:1px solid white; } style rule. The bordercolordark and bordercolorlight attributes are only supported by IE - check out the picture at Dottoro's borderColorDark attribute page if you're curious about what they do - moreover, as they are set to the same color, they don't do anything that the bordercolor attribute doesn't do and are therefore superfluous. For its part, the bordercolor attribute has cross-browser support (contra Dottoro, Opera does support it) but it's not standard so you shouldn't be using it, either.

Moving on, a set of 9 commands writes out the first table row:

document.writeln("<tr>");

document.writeln("<td width=\"14%\" bgcolor=\"#000080\"><font color=\"#FFFFFF\" face=\"" + this.font + "\" size=\"" + this.headSize + "\"><strong>Sunday</strong></font></td>");

/* ...Corresponding commands for Monday thru Saturday... */

document.writeln("</tr>");

The Sunday-to-Saturday cells are header cells and should be marked up as th elements. As td content, the day names are left-justified and have a normal font weight; as th content, they are horizontally centered and bolded.

A 14% th | td width means that the cell width will be 14% of the viewport width (if we were to give the calTable table a specific width - say, width:75%; - then the cell width would be 14% of that width). The #000080 color has a "navy" name. A size="3" font element attribute maps onto a (default-value) font-size:medium; style declaration on my computer.

In moving the first row's presentational features to a style sheet, here's the rule I'd use:

th { width: 14%; background-color: navy; color: white; font-family: Verdana, Arial, Helvetica; }

• The width and bgcolor attributes of the th | td element, the font element itself, and the color and face and size attributes of the font element are all deprecated.
• The strong element is still legit but we don't need it for th cells, which do their own bolding as noted above.
• You can left-justify the <th> day names with a text-align:left; styling but I actually like 'em horizontally centered.

Moreover, getting the presentational stuff out of the way makes it a lot easier to write the headers iteratively if you'd like to do that:

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

for (var i = 0; i < dayNames.length; i++) document.write("<th>" + dayNames[i] + "</th>");

Let's save the data part of the calTable table for the following entry.
- posted by A. Peak @ 4:32 PM

Comments: Post a Comment

<< Home

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

About Me