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.
- posted by A. Peak @ 4:09 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)