reptile7's JavaScript blog: Things of Shapes, Side B

Saturday, March 12, 2016

Things of Shapes, Side B
Blog Entry #362

Let's get back now to our discussion of the Areas script's various functions.

areao( ) and volumerp( )

Ovals/ellipses

The terms "oval" and "ellipse" are often used interchangeably, and an "area of an oval" Google search returns many pages for calculating the area of an ellipse; in actuality, an ellipse

has a clearly defined shape and area but an oval doesn't.

With respect to the above ellipse image, the area of an ellipse is given by A = (width / 2) × (height / 2) × π. Assuming that "oval" really means "ellipse" in the Areas script, the areao( ) function gives us something altogether different:

function areao( ) {
	var length = window.prompt("Enter the length");
	var height = window.prompt("Enter the height");
	var pi = 3.14159;
	var sum = (pi * length) / height;
	window.alert("The area is " + sum + ""); }

I don't know what shape, if any, the pi * length / height calculation is relevant to, but no matter: we'll use the right ellipse area formula in the demo below.

Rectangular prisms

A rectangular prism ("rectangular box" is my preferred term for this shape)

is basically a three-dimensional rectangle; its volume is given by V = length × width × height, and that's what you get with the volumerp( ) function:

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

Image credits

(6) The ellipse image appears courtesy of The GNOME Project. The oval image appears courtesy of ClipartPanda.com.
(7) The rectangular prism image appears courtesy of the 5th Grade Math and Science Team at Southwood Elementary School.
Merci beaucoup, guys.

Demo considerations

I didn't like the prompt( )/alert( ) interface in the Slope script*, and I don't like it in the Areas script, either; once again, I'd much rather gather the user's inputs with <input type="text">s and then display the results on the page by loading them into <samp>s.
(*We covered the Slope script in Blog Entry #360, which provides links to reference pages for the samp element, the getElementsByTagName( ) method, regular expressions, the toFixed( ) method, the Number( ) function, and the isNaN( ) function, which all crop up below.)

I wanted to
(a) access the <input>s for each area/volume determination and
(b) vet the <input>s' values and
(c) bound the number of output digits and
(d) print out the various outputs
via common units of code located in or called by a common getAorV( ) function. I also wanted to
(e) be able to reset the inputs and outputs for each determination
via a common reset( ) function.

I began by putting the HTML for each determination in a separate <div> with a parametric id: triangleDiv, circleDiv, etc. I then gave the aforementioned <samp>s a related set of parametric ids: triangleSamp, circleSamp, etc.

<div id="triangleDiv">

<h3>Area of a triangle</h3>

<img width="218" height="117" src="triangle.gif" alt="A triangle, its base, and its height"><br><br>

A = b × h / 2<br>

<label>Enter the length of the triangle base (b): <input size="5"></label><br>

<label>Enter the height (h) of the triangle: <input size="5"></label><br>

<button type="button" onclick="getAorV('triangle');">Get the area</button><br>

Your area is: <samp id="triangleSamp"></samp><br>

<button type="button" onclick="reset('triangle');">Reset</button>

</div><br> ...

We can now JavaScriptically tie the <div>s and <samp>s together via a general shape variable:

function getAorV(shape) {
	var shapeInputs = document.getElementById(shape + "Div").getElementsByTagName("input");
	...Vetting code...
	var area_or_volume;
	...Area/volume calculations...
	if (/\.\d{3,}$/.test(area_or_volume)) area_or_volume = area_or_volume.toFixed(2);
	document.getElementById(shape + "Samp").textContent = area_or_volume; }

For the Vetting code, I wanted to limit the user inputs to a 0 < x < 100 range, limit the input precision to two places past the decimal point, and of course weed out unwanted strings. Here we go:

for (var i = 0; i < shapeInputs.length; i++) {
	if (Number(shapeInputs[i].value) <= 0 || 100 <= Number(shapeInputs[i].value) || /\.\d{3,}$/.test(shapeInputs[i].value) || isNaN(shapeInputs[i].value) || shapeInputs[i].value === "") {
		window.alert("Please enter positive numbers in the range\n0 \u003c x \u003c 100\nand with no more than two post-decimal point digits.");
		shapeInputs[i].value = "";
		shapeInputs[i].focus( );
		return; } }
/* \u003c is the Unicode escape sequence for the < character. */

The Area/volume calculations themselves can be carried out via a series of if statements or a switch statement, as per your preference.

if (shape == "triangle" || shape == "rhombus")
	area_or_volume = shapeInputs[0].value * shapeInputs[1].value / 2;
if (shape == "circle")
	area_or_volume = Math.PI * Math.pow(shapeInputs[0].value, 2);
// Etc.

And as we know how to access the <input>s and <samp> for each determination it is simple enough to reset them by setting their values/textContent to empty strings:

function reset(shape) {
	var shapeInputs = document.getElementById(shape + "Div").getElementsByTagName("input");
	for (var i = 0; i < shapeInputs.length; i++) shapeInputs[i].value = "";
	document.getElementById(shape + "Samp").textContent = ""; }

Demo

The demo below incorporates the code presented in the preceding section - try it out with any inputs you like - the images therein are all 'homemade', BTW.

Area of polygons (and of a circle)!

Area of a triangle

A = b × h / 2
Enter the length of the triangle base (b):
Enter the height (h) of the triangle:

Your area is:

Area of a circle

A = r² × π
Enter the radius (r) of the circle:

Your area is:

Area of a rectangle

A = w × h
Enter the width (w) of the rectangle:
Enter the height (h) of the rectangle:

Your area is:

Area of a trapezoid

A = ((b1 + b2) / 2) × h
Enter the length of one trapezoid base (b1):
Enter the length of the other trapezoid base (b2):
Enter the height (h) of the trapezoid:

Your area is: