reptile7's JavaScript blog
Monday, February 29, 2016
Things of Shapes, Side A
Blog Entry #361

Having dealt with points and lines in our previous episode, we make a leap to two-dimensional shapes in today's entry as we move on to "The Areas", the next Calendars, Clocks, and Calculators script. Crafted by Chris Key in April 1998, the Areas script calculates the areas of a triangle, a circle, a rectangle, a trapezoid, a rhombus, and an "oval" (an ellipse) from various length inputs; at no extra charge, it similarly calculates the volume of a "rectangular prism" (a rectangular cuboid) in a brief foray into three-dimensionality.

The areas.html page sports a functioning demo (a couple of the calculations need some help, but we'll get them sorted out); the areas.txt Grab the Script page is still available.


The area/volume determinations are discretely carried out by the seven functions of a <script> element in the document head, in source order:
areati( ), areac( ), arear( ), areata( ), arearh( ), areao( ), volumerp( )
Each function is called by clicking a push button. There's nothing particularly noteworthy about the button HTML but here it is anyway:

<h3>Area of polygons!</h3>
<input type="button" value="Area of triangle" onclick="areati( );">
<input type="button" value="Area of circle" onclick="areac( );">
<input type="button" value="Area of rectangle" onclick="arear( );">
<input type="button" value="Area of trapezoid" onclick="areata( );">
<input type="button" value="Area of rhombus" onclick="arearh( );">
<input type="button" value="Area of oval" onclick="areao( );">
<h3>Volume of three-dimensional figures</h3>
<input type="button" value="Volume of a rectangular prism" onclick="volumerp( );">

Note that the <center> and <form> elements are improperly nested. The <center> container is obsoleted by HTML5: replace it with a <div style="text-align:center;"> container. The <form> container is unnecessary today although Netscape 4.x users did in fact need it to render the <input>s back in the day.

The body display is missing an all-important something, and that something would be pictures of the various shapes. OK, we all know what a triangle, a circle, and a rectangle look like. However, if someone asked you to draw a trapezoid or a rhombus, could you do it? I myself wouldn't have been able to do so prior to writing this post, so I will supplement the discussion below with some relevant shape clip art: credits therefor will be given at the end of the post.

Areas sans ovals


Clicking the button calls the areati( ) function.

<script language="javascript">

function areati( ) { var base = window.prompt("Enter the base"); var height = window.prompt("Enter the height"); var sum = (1 / 2) * base * height; window.alert("The area is " + sum + ""); }

A first prompt( ) box asks the user to enter (the length of) the base of a triangle; a second prompt( ) box asks the user to enter the triangle's height. For the triangle above, the base is the distance spanning points A and C and the height is the h distance spanning point B and the AC base. The user's inputs are subsequently plugged into an A = ½ × b × h formula and the resulting area is displayed on an alert( ) box.

N.B. As demonstrated by this Khan Academy video, the A = ½ × b × h formula is applicable to all triangles and not just equilateral, isosceles, and right triangles. For other ways to calculate the areas of triangles, check out's "Area of Triangles Without Right Angles" page.

General function commentary:
(1) That the prompt( ) returns have a string data type poses no problem for the area calculation.
(2) No validation is provided for the user's inputs, i.e., nothing shields the area calculation from unwanted strings, negative numbers, or the null literal.
(3) Curiously, the area is stored in a sum variable - as area itself is neither a JavaScript reserved keyword nor a JavaScript future reserved keyword, why not use that?
(4) The + "" operation in the alert( ) argument is unnecessary.
Comment (1) applies to all the functions except the areata( ) function. Comments (2), (3), and (4) apply to all seven functions.


Clicking the button calls the areac( ) function.

function areac( ) { var radius = window.prompt("Enter the radius"); var pi = "3.14159"; var sum = radius * radius * pi; window.alert("The area is " + sum + ""); }

A prompt( ) box asks for a circle radius; the radius is plugged into an A = πr2 formula; an alert( ) box displays the resulting area. I would use Math.PI rather than 3.14159 for the π value but to each his own. (Ideally, you could call up Kate Bush and she would sing the digits of π to you but I understand she's pretty busy most of the time. ;-))


function arear( ) { var length = window.prompt("Enter length"); var width = window.prompt("Enter width"); var sum = width * length; window.alert("The area is " + sum + ""); }

Length times width. I don't need to belabor this for you, do I? Didn't think so.


In the US and Canada, a trapezoid is a quadrilateral having two parallel sides, which are termed the bases of the trapezoid.

• Can the non-base sides of a trapezoid also be parallel? Some say yes, some say no.
• In the UK, Australia, and New Zealand, a trapezoid is a quadrilateral having no parallel sides

whereas a trapezium is a quadrilateral having two parallel sides. (My guess is that Guyana and the British Overseas Territories in the Western Hemisphere also use these definitions but I don't know for sure.)

The area of a US/Canada trapezoid is given by: A = the average of the trapezoid base lengths × the trapezoid height. The areata( ) function

function areata( ) { var baseone = window.prompt("Enter base one"); var basetwo = window.prompt("Enter base two"); var height = window.prompt("Enter height"); var sum = (1 / 2) * height * (baseone + basetwo); window.alert("The area is " + sum + ""); }

would seem to calculate this area, but it doesn't: here we run into a problem in not numberifying the prompt( ) returns, specifically, the baseone and basetwo values are concatenated and not added at the var sum = (1 / 2) * height * (baseone + basetwo); line. Recasting the baseone and basetwo definitions as

var baseone = Number(window.prompt("Enter base one"));
var basetwo = Number(window.prompt("Enter base two"));

sets things to right in short order.


A rhombus is a quadrilateral whose side lengths are all equal; squares are rhombuses but not all rhombuses are squares.

We can get the area of a rhombus by multiplying the lengths of its diagonals (the distances spanning points A and C and points B and D for the above rhombus) and dividing the product by 2, and the arearh( ) function does just that:

function arearh( ) { var onediag = window.prompt("Enter the 1st diagonal"); var twodiag = window.prompt("Enter the 2nd diagonal"); var sum = onediag * twodiag * (1 / 2); window.alert("The area is " + sum + ""); }

For other ways to calculate the area of a rhombus, check out the Area section of Wikipedia's "Rhombus" entry.

Image credits so far

(1) I got the triangle image at a Mathematics Stack Exchange page.
(2-4) The circle image, the rectangle image, and the trapezoid image were created by the Florida Center for Instructional Technology at the University of South Florida.
(5) The rhombus image appears courtesy of
Thank you, one and all. As for the image of the quadrilateral with no parallel sides, I created that one myself using the ChemDraw program cited in Blog Entry #128.

We'll go through the areao( ) and volumerp( ) functions, and roll out a demo, in the next entry.

Comments: Post a Comment

<< Home

Powered by Blogger

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