reptile7's JavaScript blog
Saturday, May 07, 2016
 
Paging Dr. Pythagoras
Blog Entry #366

OK, let's move on now to the next CCC script, "The Pythagorean Theorem". Authored by Greg Bland in early 1998, the Pythagorean Theorem script calculates the length of the hypotenuse (c) of a right triangle from the lengths of the other two sides (a and b) of the triangle via the equation a2 + b2 = c2.

A right triangle with sides a, b, and c

The script demo at the aforelinked Java Goodies pythag.html page works fine as long as you input integers for the a and b lengths - more on this here. The Java Goodies pythag.txt document holding the script code is still live.

What we've got on the rendered page

<form name="pythagorean">
<center>
<p>The Pythagorean Theorem<br>
-Geometry's most elegant theorem-<i>a(squared) + b(squared) = c(squared)
<hr>
<p><input type="button" onclick="touse( );" value="To Use this....">
<p>a <input type="text" name="a" value="">
<p>b <input type="text" name="b" value="">
<p><input type="button" value="Compute.." onclick="solvepg( );">
<p>Output: <input type="text" name="theorem" value="">
</form></center>


The user enters the a and b lengths into text inputs named a and b, respectively. Clicking a push button above the a field calls a touse( ) function that displays a help message on an alert( ) box. Clicking a push button below the b field calls a solvepg( ) function that determines the c length and loads it into a text input named theorem.



a

b



Output:


A name="pythagorean" form contains the input fields and buttons; a center element horizontally centers the display. As shown, the form and center elements overlap, and they shouldn't do that.

The pythagorean form is prefaced with a header:

The Pythagorean Theorem
-Geometry's most elegant theorem- a(squared) + b(squared) = c(squared)



The a(squared) + b(squared) = c(squared) equation is italicized by an i element whose required </i> tag is missing. The italicization propagates to the a, b, and Output: field labels even though the i element has an (%inline;)* content model; you'd expect the browser to close the i element when it hits the %block; hr element but that doesn't happen.

Also regarding the equation, there's no need to write out (squared) when we can specify the squaring operations with superscripted 2s, e.g., a<sup>2</sup>.

Solve it

function solvepg( ) { a = document.pythagorean; b = a.a.value; c = a.b.value; c = parseInt(c); b = parseInt(b); b = b * b; c = c * c; d = b + c; e = Math.sqrt(d); document.pythagorean.theorem.value = e; }

The solvepg( ) function first gives the pythagorean form an a identifier. The values of the a and b fields of the a form are then assigned respectively to b and c variables. (The a.a and a.b reference expressions don't cause any problems, in case you were wondering.) The b and c strings are subsequently numberified with the parseInt( ) function.

Next, the b and c numbers are squared; b2 is assigned back to b and c2 is assigned back to c. The b and c squares are added: the sum is stored in a d variable. A Math.sqrt( ) operation takes the square root of d: the root is stored in an e variable. Finally, e is assigned to the value of the theorem field.

The parseInt( ) blues

If the a and b user inputs are floating-point numbers, then the parseInt( ) operations will effectively Math.floor( ) those numbers, and we don't want to do that. Consider the 3:4:5 right triangle. If the a input is 2.999 and the b input is 3.999, then the parseInt( ) floorings lead to e = 3.605551275463989 (√13) - not good. It's actually not necessary to explicitly numberify the a.a and a.b values as the attempted multiplication of two numeric strings gives the hoped-for product, although you could appropriately Number( ) them if you feel that doing so improves the code's readability.

Oh yeah...

The touse( ) function is:

function touse( ) { window.alert("Just enter a and b, don't square [them], your computer will do it for you."); }



I think that'll do it for our discussion of the Pythagorean Theorem script. I suppose at this point I could go through some additional changes I would make to the script's HTML (e.g., lose the <form>, convert the <center> to a <div>) and JavaScript (e.g., add a validation conditional that intercepts unwanted number/string inputs, truncate es that run many places past the decimal point) and roll out my own demo, but I trust that you yourself are up to the task of doing those things. Looking forward, then, the next CCC script is "Circle Circumference", and we'll check it out in our next episode.

Comments: Post a Comment

<< Home

Powered by Blogger

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