reptile7's JavaScript blog
Wednesday, April 18, 2007
 
Framed Potpourri for 200, Alex
Blog Entry #73

Today's post continues our analysis of the Script Tips #49-51 Script. We begin with a couple of things in the script's HTML that caught my eye...

The tbody element

For the table element, the script specifies a child tbody element, which in turn is the immediate parent of the tr elements. Interestingly, inspection of the content models of the table and tbody elements shows that
(a) a table element necessarily contains one or more tbody elements, whether specified or not, and
(b) the tr element does not appear in the table element's content model but is the only element in the tbody element's content model:

<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT TBODY O O (TR)+ -- table body -->
<!--As for a regular expression, + is a quantifier that means "occurs 1 or more time(s)."-->

The tbody element's start-tag and end-tag are both optional, as you would guess given the large number of HTML tables out on the Web that do not specify tbody elements.

In HTML Goodies' Tables Tutorial sector, the introductory "So, You Want A Table, Huh?" tutorial makes no mention of the tbody element, but the "HTML 4.0: Tables" tutorial contains its own "<TBODY> Tag" section (appropriately so, as the W3C did introduce the tbody element in HTML 4.0). The "HTML 4.0: Tables" tutorial incorrectly portrays the tbody element as a sort of 'tabilized span element' that can surround and format any group of consecutive table cells - note above that the td element is not part of the tbody element's content model; also provided is a tbody element demo that is invalid in two other ways:

(1) The demo's tr and tbody elements are improperly nested.

(2) The tbody element is equipped with a bgcolor="pink" attribute; however, the HTML 4.01 Specification's Index of Attributes shows that the table, tr, td, and th elements can all take a bgcolor attribute, but the tbody element cannot! On the other hand, bgcolor is a listed attribute on the Microsoft Developer Network's "TBODY Element" page.

In any case, Joe's tbody element demo works on my iMac when using either MSIE or Netscape, evidently because its tbody element does not interrupt the two-row, four-cell structure of the 'ancestor' table element - if we try to color only the first three cells of the table

<table border="1">
<tr>
<tbody bgcolor="pink">
<td>Cell Data</td>
<td>Cell Data</td>
</tr><tr>
<td>Cell Data</td>
</tbody>
<td>Cell Data</td>
</tr></table>

then the fourth cell is pushed onto a third table row:

Cell DataCell Data
Cell Data
Cell Data

The reset( ) method

Let's take a closer look at the "Clear All" reset button:

<input onclick="reset( );" type="button" value="Clear All">

In Script Tip #50, Joe says:
The "Clear All" button fires another function named reset( ). Don't bother looking for it [in the script element], it isn't there. "Reset" is a function built into the browser. When you make guestbook forms, you create a reset button through the code:

<input type="reset">

In this case, the coding is just a little different to allow you to put text on the reset button.
I did a double take when I read that last sentence; putting text on a reset button is no more complicated than adding a value="Some text" attribute to the <input type="reset"> code. Moreover, reset( ) is not a top-level function but is a method of the form object; the onclick="reset( );" attribute should be formulated as

onclick="this.form.reset( );"
or
onclick="document.Framer.reset( );"

even if the browser's JavaScript engine is able to execute an objectless reset( ) command.

And now, back to those \r carriage returns...

We briefly commented in the previous post on the \r's that are placed in the Script Tips #49-51 Script's script element; these carriage returns are present solely to improve the readability of the frameset code in the Fillit/Pastebox boxes, and the script will still work if you take them all out. There are at least three other ways to force line breaks in textarea boxes; \r can be replaced with
(a) &#13; (the numeric character reference for a carriage return),
(b) \n (a line feed), or
(c) &#10; (the numeric character reference for a line feed),
but you can't use <br />, as we explained in Blog Entry #60's "textarea element" section.

A couple of view( ) function issues

Regarding the script element's view( ) function, which displays the value of Pastebox in a new window and which is discussed in Script Tip #51:

(1) The if block's return false statement and the else block's return true statement are unnecessary and can/should be removed; unlike for, say, a link or a checkbox, there is no other, default behavior associated with the "View It!" button that we need to override here.

(2) The newly opened boat window and the opener window do not have a parent-child relationship; the parent reference in the variabilization of Pastebox's value thus serves no purpose and can/should be removed, i.e.:

see = document.Framer.Pastebox.value;

Separating structure and presentation

We wrap up this entry with some comments on style.

Let's start with the script's body element, whose five attributes - alink, bgcolor, link, text, and vlink - are all deprecated. Leaving aside the fact that the document body doesn't contain any links, the corresponding style block for the body and anchor elements would be:

body { background-color: #c0c0c0; color: black; }
a:active { color: red; }
a:link { color: #0000ee; }
a:visited { color: #551a8b; }

The :active, :link, and :visited anchor pseudo-classes are discussed here in the CSS 1 Specification.

We next consider the table and td elements. As noted in the "Other code possibilities: two into one" section of Blog Entry #71, the border attribute of the table element is not deprecated, but it is simple enough to write a corresponding CSS table border rule:

table, td { border: 1px outset; }

CSS selector grouping is discussed here. The table selector without the td selector gives an 'external' border but no borders between cells, or at least that's what I see on my computer.

The td element's width attribute, which is deprecated, is set to 150 (pixels) for the northwest and southwest table cells. The td element's valign attribute, which is not deprecated, is (unnecessarily) set to top for the northeast and southeast table cells. The corresponding CSS rules for these attributes can be written as:

td.firstinrow { width: 150px; } /* for <td class="firstinrow"> cells */
td.secondinrow { vertical-align: top; } /* for <td class="secondinrow"> cells */

We lastly turn to the frameset and frame elements. With respect to the bordercolor attribute, I find that a

frameset { border: solid blue; }

rule does not 'bluify' interframe borders when using either MSIE or Netscape (with MSIE, blue borders appear at the browser window's top and left edges, but with Netscape there's no color at all). As for marginwidth and marginheight, these attributes cannot be replaced with a

frame { margin: 0px; }

rule for the frameset document, but a

body { margin: 0px; }

rule in or, preferably, externally applied to the w.htm, x.htm, y.htm, and z.htm frame documents themselves will work.

Lagniappe: a frameset background color?

In Script Tip #49, Joe twice incorrectly states that the variable bc represents a "background color", and this got me to thinking, "Can a frameset element even have a background color?" I went to the script demo page and clicked the "2 Vertical" button. In the Fillit box, I deleted the second (src=x.htm) frame element and then added a style='background-color:green;' attribute to the frameset element start-tag. Upon clicking the "Copy/Edit" and "View It!" buttons, the right half of the pop-up window
(a) is indeed green when using MSIE, but
(b) is white when using Netscape.

We'll give Casio and Texas Instruments a run for their money in the next entry when we code an elementary calculator via the Script Tips #52-55 Script.

reptile7

Comments: Post a Comment

<< Home

Powered by Blogger

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