Wednesday, May 28, 2008
The Script Tips #92-93 Script: Coda
Blog Entry #114
At the conclusion of his "Post the Tables" article, Joe pronounces the pop-up tables script of HTML Goodies' JavaScript Script Tips #92-93
a pretty clever piece of work, and I would agree. The script's use of loops and arrays to assemble the initial display table and the pop-up tables - in particular, its loop indexing that ties together the Titles headers, the Text child arrays, and the pop-up tables - is definitely pretty creative. "But this requires the script's HTML and JavaScript to be commingled," you might legitimately object. Yeah, that bothers me too somewhat; we discussed the desirability of keeping HTML and JavaScript separate in the first section* of Blog Entry #86. (*Not mentioned in this section: mixing HTML and JavaScript can also cause validation problems - see the "Validation" section below.) If it were my résumé, I would certainly also want to have 'longhand' versions of the script's tables on hand, i.e., to have all of the table HTML written out in a normal manner, for whatever reason; for example, here's the Testing pop-up table code in longhand:
<table border="2" cellspacing="4" cellpadding="1" style="background-color:yellow;color:black;">
<tr style="background-color:black;color:yellow;">
<th>Language</th><th>Years Used</th><th>Last Used</th></tr>
<tr style="font-weight:bold;">
<td>QA Partner (4Test)</td><td style="text-align:center;">6</td><td>Current</td></tr>
<tr><td>DTM</td><td style="text-align:center;">3</td><td>1986</td></tr>
<tr><td>WinRunner</td><td style="text-align:center;">0.25</td><td>1997</td></tr>
</table>
<tr style="background-color:black;color:yellow;">
<th>Language</th><th>Years Used</th><th>Last Used</th></tr>
<tr style="font-weight:bold;">
<td>QA Partner (4Test)</td><td style="text-align:center;">6</td><td>Current</td></tr>
<tr><td>DTM</td><td style="text-align:center;">3</td><td>1986</td></tr>
<tr><td>WinRunner</td><td style="text-align:center;">0.25</td><td>1997</td></tr>
</table>
A demo and a style sheet
OK, it's time we got to that cross-browser demo, wouldn't you say? In the div below, move your mouse cursor over a heading in a left-hand cell to pop up its corresponding pop-up table (depending on your browser, the pop-up table may pop up if the mouse cursor is anywhere in the cell and not just over its text):
Welcome to the pop-up tables demo div.
The demo script makes use of the following style identifiers:
(1) id="div1" for the div element that establishes the containing block for the pop-up tables (I've thrown out the 'div2' div elements);
(2-3) class='invisibleTable imYellow' for the pop-up tables themselves;
(4) class='topRow' for the first (header) rows of the pop-up tables;
(5) class='centerMe' for the td cells of the middle ("Years Used") columns of the pop-up tables;
(6) class='boldMe' for the bolded pop-up table rows and the "Language" data thereof appearing in the right-hand cells of the initial display table;
(7) id="visibleTable" for the initial display table;
(8) class='visibleTh' for the left-hand (header) cells of the initial display table;
(9) class='visibleTd' for the right-hand ("Language"-data) cells of the initial display table; and
(10) class='visibleData' for the span elements (replacing the original font elements) holding the text in the right-hand cells of the initial display table.
Here's the demo CSS:
body { background-color: white; }
#div1 { position: relative; }
.invisibleTable { display: none; position: absolute; left: 230px; top: 5px; }
/* A bit further to the right than in the original script, per my preference */
.imYellow { background-color: yellow; color: black; }
.topRow { background-color: black; color: yellow; /* text-align: center; */ }
/* The browsers on my computer initially center th text and left-justify td text. */
.centerMe { text-align: center; }
.boldMe { font-weight: bold; }
#visibleTable, .visibleTh, .visibleTd { border: 1px solid green; }
/* Why green? Why not? */
.visibleTh { text-align: right; }
.visibleData { color: blue; font-size: 16px; font-family: Arial, sans-serif; }
#div1 { position: relative; }
.invisibleTable { display: none; position: absolute; left: 230px; top: 5px; }
/* A bit further to the right than in the original script, per my preference */
.imYellow { background-color: yellow; color: black; }
.topRow { background-color: black; color: yellow; /* text-align: center; */ }
/* The browsers on my computer initially center th text and left-justify td text. */
.centerMe { text-align: center; }
.boldMe { font-weight: bold; }
#visibleTable, .visibleTh, .visibleTd { border: 1px solid green; }
/* Why green? Why not? */
.visibleTh { text-align: right; }
.visibleData { color: blue; font-size: 16px; font-family: Arial, sans-serif; }
The above rules replace all of the script's presentational elements and attributes except for a few of the table element attributes; in particular, I've left the cellspacing attributes in place because MSIE 5 for the Macintosh supports neither the CSS border-collapse property nor the CSS border-spacing property. (It is left to you to exchange the pop-up tables' border and cellpadding attributes for corresponding style rules in the event that you feel a burning need to do so.)
Validation
The original Script Tips #92-93 Script begins with a
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
document type declaration, which I left intact in my modified demo script, and I wondered, "Is the Script Tips #92-93 Script document actually valid?" In fact, neither the original Script Tips #92-93 Script nor my demo script passes W3C validation. After subtracting the </a characters from the document.write( ) command holding the eHide( ) function call, the original Script Tips #92-93 Script can be brought into conformance with the HTML 4.01 Transitional DTD by making the following changes:
(1) Add a title element.
<title>Welcome to the Script Tips #92-93 Script Demo Page.</title>
The content model of the head element shows that, for a valid document, the head element must contain a title element, a point I shamefully did not make in my discussion of (X)HTML validation in Blog Entry #92.
(2) Specify a character encoding via a meta element.
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
FYI: HTML validation will fail if a 'terminated' <meta /> element is used here.
(3) Equip the script element start-tags with type attributes (even in the Transitional DTD, the type attribute of the script element has a #REQUIRED default value designation).
<script language="javascript" type="text/javascript">
Of course, conformance with the HTML 4.01 Strict DTD requires removal of the deprecated language="javascript" attribute(s). BTW, the language attribute of the script element has an #IMPLIED default value designation in the Transitional DTD, so removing it won't invalidate the document vis-à-vis the Transitional DTD.
(4) Regarding the HTML end-tags that appear in the contents of the document body script elements: the slash characters of these tags must be preceded by backslashes (this is an SGML thing and relates to the script element's content model (vide infra)), e.g.:
document.write("<\/div>");
We previously commented on the 'illegality' of unescaped end-tags in script elements at the end of Blog Entry #58.
(5) Regarding the initial display table: the content model of the table element shows that the table element cannot have a script element child; for validation purposes, use the table's script element to (also) write the table start-tag and end-tag, i.e.:
<script type="text/javascript">
document.write("<table border='0' cellspacing='4'>");
...for loops that write the table's rows/cells...
document.write("<\/table>");
</script>
With the above changes in place, bringing the Script Tips #92-93 Script into conformance with the HTML 4.01 Strict DTD is then a simple matter of
(a) throwing out the script element language attributes,
(b) replacing the body element's bgcolor="#ffffff" attribute with a corresponding style rule, and finally
(c) changing the document type declaration** to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">.
(**As noted in Blog Entry #92, a system identifier must be included in the declaration for XHTML validation but is not needed for HTML validation.)
You might think that we'd need to get rid of the deprecated HTML (the font elements and the table/tr/th bgcolor attributes) in the document body script elements before validating the Script Tips #92-93 Script against the Strict DTD, but we don't. The script element has a "CDATA" content model designation; as a result, the validator regards script element content including stringified start-tags
document.write("<font color=\"#0000ff\" size=\"3\" face=\"Arial\">");
as "raw text" and not markup, with one exception: end-tags (stringified or not)
document.write("\n</font></a></td></tr>");
are perceived as markup, specifically, a </[a-zA-Z] character sequence in a script element is seen as the end of the script element, and thus such sequences must be escaped with backslashes as shown earlier.
For XHTML-compliance, the document body script element code should be externalized as it contains < characters aplenty.
That's it for the Script Tips! What next? We'll briefly consider some future directions for this blog in the next post.
reptile7
- posted by A. Peak @ 2:45 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)