reptile7's JavaScript blog: May the Circle Be Unbroken, Part 2

Friday, April 19, 2019

May the Circle Be Unbroken, Part 2
Blog Entry #397

Today in the Calculators, Calendars, and Clocks sector we will take up the Circle Calculator, which went live in October 1997 and was authored by S. Christopher "Spikeman" Brown. The Circle Calculator takes in the diameter, circumference, and area parts of a circle: upon inputting a value for one part it outputs the corresponding values for the other two parts - as such it is a bit more involved than the Circle Circumference script that we covered in Blog Entry #367.

The /JSBook/circle.html page sports a functioning demo whose
After entering a value, click on the other values possible
interface is not at all to my liking. (But at least we're not accosted by any prompt( ) pop-ups right off the bat.)
The Circle Calculator code may be accessed here.

Structural overview

The Circle Calculator table

Per the preceding image:
The user enters an area, diameter, or circumference into a designated <input type="text"> box.
The three text boxes are named area, diameter, and circumfrence (sic), respectively.
The value of each box is initialized to 0.
The boxes are the first three controls of an unnamed <form> having an unnecessary method="post" attribute. (Nope, we won't be submitting any name/value pairs to a processing agent.)
The boxes occupy cells[1] cells in the right-hand column of a four-row, two-cells-per-row <table>; the flanking cells[0] cells hold Area:, Diameter:, and Circumfrence: labels.

Other form controls in the table's last row:
The rows[3].cells[0] cell holds a push button that triggers a help( ) metafunction.
The rows[3].cells[1] cell holds an push button that triggers an about( ) metafunction
and a reset button.

Above the table we've got a big Circle Math <h1> heading (it's a Circle Calculator <h2> heading at the /JSBook/circle.html page); below the table we've got an <hr> horizontal rule and a Script By ~`~ Spikeman ~`~ authorship credit bearing a dead link to http://www.geocities.com/BourbonStreet/3843/.

Style notes:
The table cell content and the display as a whole are horizontally <center>ed; the text box labels are <b>olded; the authorship credit at the end is <i>talicized. All of the styling elements lack end tags.
(The authorship credit is unsemantically also marked up with an unclosed <h4>, which effectively bolds it and pushes it away from the <hr> a bit.)

The metafunctions

Clicking the button

<input type="button" value="Help" onclick="help( );">

calls a help( ) function

function help( ) {
    window.alert(" Help for Spikeman\'s JavaScript Circle Math For \n            Area & Diameter & Circumfrence     \n\n Put in a Number into One of the box\'s  \n Then Click in one of the other  box\'s \n And you will get the values of that number. \n    "); }

that displays on an alert( ) box the following message:

help( ) message minutiae:
(i) There's no need to escape those apostrophes if the alert( ) argument is delimited with double quotes.
(ii) The message lines are separated by \n newlines.
(iii) Firefox, Google Chrome, Opera, and Safari render the prepended white space at the beginning of a line: consecutive space characters are not collapsed as they would be in HTML; if there's just one space there, you'll get that space. Conversely, the appended white space at the end of a line may or may not be rendered, depending on the browser.
(iv) The second line is indented with a string of 12 spaces so as to give a centering effect; in practice on the alert( ) box, the line seems to begin with 7-8 spaces because alert( ) text is rendered in a sans-serif font.

As for the "help" that the help( ) message provides:
(a) The message implies that the calculator action is mediated by onclick event handlers; we'll see below that onchange event handlers actually do the honors. (FYI: We couldn't use onclick with the client-side Text object back in the day anyway.)
(b) Inputting a (new, changed) value into the area, diameter, or circumfrence box
and then clicking one of the other boxes
will output values in both of the other two boxes
and not just in the box that was clicked on.

Moving on, the button

<input type="button" value="About" onclick="about( );">

similarly connects us to an about( ) function

function about( ) {
    window.alert(" About for Spikeman\'s JavaScript Circle Math For \n            Area & Diameter & Circumfrence     \n\n This Was Made to help people get the Area,Diameter or \n              Circumfrence with one of values.. \n    ");
    window.alert("\n            Spikeman\'s Circle Math For \n       Area & Diameter & Circumfrence    \n\n                       � 1997 Spikeman  \n                 spikeman@myself.com\nhttp://www.geocities.com/BourbonStreet/3843"); }

that displays two alert( ) messages in succession:

Regarding the second message:
• The � replacement character replaces a © copyright symbol, which should be coded with a \u00a9 Unicode escape sequence.
• Don't know 'bout the spikeman@myself.com email address but, as noted above, the http://www.geocities.com/BourbonStreet/3843 resource is no longer available.

The metafunctionality is a quaint extra - is it worth holding onto? Maybe, although I myself would put
any explanatory and contact information on the page and
any authorship information in the source
rather than on one or more alert( ) boxes.

Turn and face the strange onchanges

I didn't give you the code for the area/diameter/circumfrence fields earlier so let me do so now:

<form method="post"> ...

<input type="text" name="area" value="0" onchange="circle(this.form, this.name);"> ...

<input type="text" name="diameter" value="0" onchange="circle(this.form, this.name);"> ...

<input type="text" name="circumfrence" value="0" onchange="circle(this.form, this.name);">

Each field has an onchange attribute that invokes a circle(this.form, this.name) function call when the field loses focus and its value="0" has been modified; in the present context, a field's focus can be lost by clicking one of the other fields per the help( ) message (vide supra) although it can also be lost by clicking at any other external point inside or outside the table or by bing away from the field via the keyboard.

The onchange interface is too unintuitive for my taste: I'd much rather interact with a
<button type="button" onclick="circle(this.form, this.name);">Calculate the Remaining Terms</button> button
and I'll provide such a button when I roll out my own Circle Calculator demo at the end of our discussion.

We'll go through the circle( ) function in detail in the following entry.
- posted by A. Peak @ 1:29 PM

Comments: Post a Comment

<< Home

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

About Me