reptile7's JavaScript blog
Thursday, January 29, 2015
 
The qform-qtable Mesh
Blog Entry #341

Welcome back to our discussion of the JavaScript Goodies Quadratic Equation script. Picking up from where we left off last time, our next task is to go through the source of the table-form on the quad.html page for working with a given quadratic equation.

The quad.html table-formIt would be a stretch to say that the table is serving a data-arranging purpose: it's really being used as a layout device, and the W3C frowns on that sort of thing. Moreover, we won't be submitting the form data to an action=URI processing agent, so we don't really need the form container, either. But let's go with what we have for the time being.

The table-form scaffolding

Here's the HTML for the outer table and form elements themselves:

<table align="center" cellspacing="2" cellpadding="2" border="3" bgcolor="#2574d5" style="border: solid 1px, color: #1d6ec9;">
<form name="qform" style="border: solid 2px, color: #2574d5">
...table-form content...
</table>


The table doesn't have an identifier so let's give it a qtable id.

As for the p and img elements, the align attribute of the table element is deprecated; the state-of-the-art way to horizontally center a table is via a margin-left:auto;margin-right:auto; styling. The bgcolor attribute of the table element is also deprecated; in practice, the qtable table's bgcolor="#2574d5" attribute is largely overwritten by the bgcolor="#000000" attributes of the table's td cells (vide infra) although it does color the interstitial cellspacing area.

The qtable table's style attribute is ignored by the browser because the syntax of its border declaration is invalid; as a result we see a 3px outset border per the border="3" attribute. If we were to clean up the declaration

border: solid 1px #1d6ec9;

then the style attribute would effectively overwrite the border attribute.

The form has a name="qform" identifier, which is OK for HTML but is not OK for XHTML. Like the qtable table, the qform form has a style attribute with a dodgy border setting; even when coded correctly, however, this styling doesn't add anything to the display* with Firefox, Google Chrome, Opera, or Safari, so I'd throw it out. The qform form doesn't have a closing </form> tag, which is required for the form element.

*Control-clicking the table and checking the context menu's Inspect Element command reveals that the browser closes the qform form prior to the start of the qtable table's tbody element child, even if a </form> tag is placed just before the </table> tag. As it happens, placing the qform form inside the qtable table violates the table element's (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+) content model. Conversely, putting the table inside the form would comply with the form element's (%block;|SCRIPT)+ -(FORM) content model. We should still get rid of the form border, however; unlike a table, which has a shrink-to-fit width, a form has a width of 100%, i.e., it spans the width of the viewport.

The first eight rows

The qtable table contains nine rows; each row holds one cell. Here's the HTML/CSS for the first two rows:

/* From the script17.css style sheet: */
td { border: solid 1px color: #2574d5; }
.intitle { font-family: Verdana, Arial, sans-serif; font-size: 15pt; color: #2574d5; font-weight: 500; }
input.text { font-family: Verdana, Arial, sans-serif; font-size: 10pt; color: #2574d5; font-weight: 500; background: #00000; border: solid 1px, color: #22429e; }

<td align="center" bgcolor="#000000">
<font class="intitle">Variable a</font></td>
<tr><td align="center" bgcolor="#000000">
<input class="text" type="text" size="7" maxlength="7" name="a" onchange="checka( );" style="text-align:center;" title="Input the value of the variable a here."></td>


The first row's <tr> tag is missing: the tr element's start-tag is required.

Each td cell has an align="center" attribute that horizontally centers its content and a bgcolor="#000000" attribute that gives it a black background: the former is legit (align is still OK for the internal table elements - tbody, tr, td, etc. - and only for those elements) but the latter is not (there are no elements for which bgcolor is not deprecated). The td style rule is ignored by the browser (vide supra).

The first row's Variable a text can and probably should be marked up as a label. As the Variable a text and the name="a" text input it is labeling are in different rows/cells, we'll have to associate them explicitly: toward this end we can give the label and input, say, for="aInput" and id="aInput" attributes, respectively. The typeface(s), size, color, and boldness of the Variable a text are set by the .intitle style rule.

The table's third, fifth, and seventh rows do begin with a <tr> tag and the text in their cells is different but in all other respects these rows are identical to the first row.

The second row's a input has a maxlength of 7; I'd reduce it to 2 - you don't want the user to enter an a coefficient larger than 99, do you? Changing the input's value in any way calls the script17.js script's checka( ) function, which we'll get to in a subsequent post.

Mousing over the a input pops up a tooltip that, per the input's title attribute, cues the user to enter the a value.

The entered a value is horizontally centered by a style="text-align:center;" attribute. The value's typeface(s), size, color, and boldness are set by the input.text style rule; the rule's background (five 0s, not six) and border declarations are ignored.

The table's fourth row holds a corresponding name="b" text input whose onchange event handler is tied to the script17.js script's checkb( ) function and whose title tooltip cues the user to enter the b coefficient. The table's sixth row holds a corresponding name="c" text input whose onchange event handler is tied to the script17.js script's checkc( ) and process( ) functions and whose title tooltip cues the user to enter the c coefficient. The b and c inputs and their container cells are styled à la the a input and its cell.

For its part, the table's eighth row

<tr><td align="center" bgcolor="#000000">
<input class="text" type="text" size="30" maxlength="30" name="x" readonly="true" style="text-align:center;" title="Resultant value of variable x."></td>


holds a larger name="x" text input. Contradictorily, the x input is a read-only control but has a maxlength="30" setting; moreover, the readonly boolean attribute should be set to readonly and not to true. (I encourage you to deploy the full readonly="readonly" form vis-à-vis the minimized readonly form: although today's browsers handle both forms without incident, only the former is XHTML-legit.)

In the UA Conformance section of the CSS 2.x Specification, the W3C notes:
CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.
As detailed in this and the following sections, the modern OS X browsers on my iMac smoothly apply (the valid parts of) the .intitle, input.text, text-align, and input.button stylings to the appropriate elements in the qform-qtable structure.

The buttons

The qtable table's last row

/* From the script17.css style sheet: */
input.button { font-family: Verdana, Arial, sans-serif; font-size: 13pt; color: #2574d5; font-weight: 500; background: #000000; border: solid 2px, color: #22429e; cursor: hand; }

<tr><td align="center" bgcolor="#000000">
<input class="button" type="button" value="Reset!" onclick="over( );">
<input class="button" type="button" value="Help!" onclick="help( );">
</td></tr></table>


holds and push buttons (the button is not a bona fide reset button). Clicking the button calls the script17.js script's over( ) function; clicking the button calls the script17.js script's help( ) function.

The button pair is horizontally centered by the parent cell's align="center" attribute. The typeface(s), size, color, and boldness of the button values and the buttons' black background are set by the input.button style rule. The cursor:hand; styling is not standard, and is supported by Google Chrome and Opera and Safari but not by Firefox; cursor:pointer; is the legal equivalent.

We're not done with the quad.html display yet: below the qtable table we've got some stuff that is completely unrelated to quadratic equations, and a thoroughgoing look at that stuff is best saved for the next entry.

Wednesday, January 14, 2015
 
Meet Me at the Quad
Blog Entry #340

After toiling at my nontechnical blog for the last couple of months it's time to get back into the Web coding thing for a little while. As of this writing we have picked off all of the worthwhile scripts in the Scripts that Display Text sector of Joe Burns' Java Goodies JavaScript Repository; in today's post we'll kick off an open-ended tour of the repository's Calendars, Clocks, and Calculators (CCC) sector.

Proceeding in reverse chronological order, the first CCC offering is a "Days Till 2000?" script that I am not interested in covering as we previously addressed a related "Days Until 2000" script in HTML Goodies' JavaScript Script Tips #29 and #30, and one such script is quite enough, wouldn't you say? Y2K was 15 years ago, after all.

The second CCC offering is/was a "Quadratic Equation" script whose description page URL directed me to a "Page Not Found" page. Fortunately, the Java Goodies repository mirrors a JavaScript Goodies book that Joe wrote at about the same time and the online version of the latter has the quad_edu.html page I was looking for.

Joe does not provide a Quadratic Equation demo but a Google search for "used to solve the slope of parabolas" (vide infra) led me to functioning demos here and here.

I actually wrote out a script for solving the quadratic formula and provided a demo therefor in the Some methods of the JavaScript Math object section of Blog Entry #30; however, I like the idea of revisiting this topic, so we will check over the Quadratic Equation code for at least the next couple of entries.

The quad/ package

Authored by Sam Lachterman in 1998, the Quadratic Equation code comprises a quad/ package of five files:
(1) quad.html
(2) quadratic.jpg
(3) script17.css
(4) script17.js
(5) time.js
You may download the package by clicking the Grab the Zip file link on the quad_edu.html page or you can grab it from me here and now.

The quad.html document calls for a copyright.jpg image that is not in the package, although it is simple enough to find copyright images on the Web if you would like to make use of one.

The quad.html document imports the script17.css style sheet and the script17.js and time.js JavaScripts in the usual ways:

<!-- In the document head: -->
<link rel="stylesheet" href="script17.css" type="text/css">
<script language="JavaScript1.2" src="script17.js"></script>
<!-- Near the end of the document body: -->
<script language="JavaScript1.2" src="time.js"></script>


We'll see below that there's actually a fair amount of presentational code in the quad.html document body.

The informational part

The quad.html display begins with some information about quadratic equations.

~ ~ Quadratic Equation Script * * . . .

To take full advantage of this script, please read the following explanation.
The equation you are trying to solve is: ax2 + b + c = 0, it is the quadratic equation, or the equation used to solve the slope of parabolas.
Variable "a" cannot equal zero.
This is the form of the solution set for the quadratic equation:


In a graphical context, the ax2 + bx + c = 0 equation is used to find the x-intercepts of parabolas vis-à-vis their slope. (If we want to find the slope of a line that is tangent to a given point on a parabola, we'll have to differentiate the parent f(x) = ax2 + bx + c equation, and you know how to do that, right?)

The a, b, and c in the equation are termed coefficients; x is the (independent) variable. The a coefficient indeed cannot be 0 - check the 2a term in the denominator of the formula, we certainly don't want to be dividing anything by 0, now do we? - more fundamentally, if a were 0, then we wouldn't have a quadratic equation in the first place.

Structure and style

The informational part's HTML/CSS is given below.

/* From the script17.css style sheet: */
body { cursor: default; }
.header { font-family: Verdana, Arial, sans-serif; font-size: 18pt; color: #2574d5; font-weight: 500; text-align: center; }

<body bgcolor="#000000" onload="qform.a.focus( );">
<div class="header">~ ~ Quadratic Equation Script * * . . . </div>
<hr width="275">
<p align="center">
<font style="font-family: Verdana; font-size: 14pt; color: white;">
To take full advantage of this script, please read the following explanation.<br><br></font>
<font style="font-family: Verdana; font-size: 13pt; color: white;">
The equation you are trying to solve is: ax≤ + b + c = 0, it is the quadratic equation, or the equation used to solve the slope of parabolas.<br><br>
Variable "a" <u>cannot</u> equal zero.<br><br>
This is the form of the solution set for the quadratic equation:<br>
<center><img src="quadratic.jpg" align="quadratic equation . . ."></center>
</font>


The document body's black background color is set by an inline bgcolor="#000000" attribute. I really don't like black backgrounds but let's go with what we have for the time being.

Re the .header style rule: (1) As far as I am aware, the #2574d5 color doesn't have a name. (2) With the browsers on my iMac, font-weight:500; and font-weight:normal; (the initial font-weight setting) give identical renderings.

The post-<hr> text is housed in a pair of font elements although its typeface, sizes, and color are set via style attributes vis-à-vis the font element's face, size, and color attributes.

Note that there's a ≤ character where the ax2 term's superscripted 2 should be; of course, the proper way to superscript the 2 is via the sup element*, i.e., ax<sup>2</sup>. Also note that the linear term's x variable (after the b coefficient) is missing.

*A proper superscript has a smaller font size than its flanking content has and that's what you get with the sup element. Text can also be superscripted via a vertical-align:super; style declaration but there's no decrease in font size in this case.

The ~ ~ Quadratic Equation Script * * . . . heading is horizontally centered by the .header rule's text-align:center; declaration. The <hr> rule is horizontally centered because the default value of the hr element's align attribute is center. The post-<hr> text is horizontally centered by the <p align="center"> element. The quadratic.jpg img element is horizontally centered by its <center> container.

The img's quadratic equation . . . alternate text should be specified by an alt attribute and not by an align attribute.

The second font element and its <p align="center"> container, which lacks a closing </p> tag, are in practice truncated by the browser just before the start of the <center> element: the font element and the p element both have an (%inline;)* content model whereas the center element has a block-level rendering.

The bgcolor attribute of the body element, the width attribute of the hr element, the align attribute of the p element, the font elements, the u element that underlines cannot, and the center element (and were it set to a valid value the align attribute of the img element) are transitionally OK - a system identifier-lacking

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

document type declaration appears at the top of the quad.html document - but won't make it through a strict validation: I trust you're up to the task of 'strictifying' these features.

The business end

Just below the quadratic.jpg image we have the business end of the display, namely, a tabular form for solving a specific quadratic equation. Here's a screen shot of what we've got:


The user respectively enters a, b, and c coefficients into the Variable a, Variable b, and Variable c fields; changing the value of the Variable c field triggers a process( ) function that solves the equation and displays both of its roots in the Resultant value of x field if those roots are real - more on this later.

At the bottom of the table-form is a button that when clicked clears the input fields and a button that when clicked pops up an alert( ) message with instructions for working with the form.

We're ready to look over the business end's HTML/CSS - as I don't know how long this will take, let's do it first thing next time.


Powered by Blogger

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