reptile7's JavaScript blog
Wednesday, May 18, 2016
May the Circle Be Unbroken
Blog Entry #367

A couple of months ago we discussed an Areas script that calculates the areas of various two-dimensional geometric shapes. One of those shapes is a circle: upon inputting the radius of a circle, an areac( ) function determines the circle's area via a var sum = radius * radius * pi; operation.

The next Calendars, Clocks, and Calculators (CCC) script is "Circle Circumference", which was written by Sam S. Lachterman in late 1997. The Circle Circumference script should calculate the circumference of a circle from the circle's radius via a C = 2 × π × r equation; in practice, it plugs the radius into a var circl = (radius * radius) * pi; statement to give the area.

Code + brief deconstruction

Excepting the copyright comment in the <head>, the Circle Circumference script code is reproduced below:

<script language="javascript">

function circle( ) { var radius = window.prompt("Enter the radius of the circle:", ""); var pi = "3.141592654"; var circl = (radius * radius) * pi; window.alert("The circumference of the circle is " + circl + ". This was solved using the formula (Rpi)(R)"; }
<body bgcolor="#ffffff" onload="circle( );">

When the script document has loaded, a circle( ) function springs into action. A prompt( ) box soliciting a circle radius immediately pops up. The user inputs a radius and clicks the button on the box and the input is assigned to a radius variable. The radius radius is squared and then the radius2 is multiplied by a toFixed(9) pi value and the resulting product is assigned to a circl variable. Finally, circl plus some supplementary text is displayed on an alert( ) box.

alert( ) formulae

Suppose for a moment that we do want the circle area and that we input a radius of 1 into the prompt( ) box. The alert( ) output will be:

The alert( ) output showing a (Rpi)(R) formula.

The (Rpi)(R) area formula leaves something to be desired, wouldn't you say? Much nicer would be:

The alert( ) output showing an A = π × r² formula.

window.alert("The area of the circle is " + area + ". This was solved using the formula: A = \u03c0 \u00d7 r\u00b2");

Although neither π, ×, nor ² is an ASCII character, we can put all of them in an alert( ) message via their Unicode escape sequences. I find that FileFormat.Info is a useful site for tracking down these sequences; its pages for representing π, ×, and ² are here, here, and here, respectively: go to the "C/C++/Java source code" entry in the Encodings table(s) for the goods.

As for a circumference alert( ), I trust you can write that one out at this point.


The script demo at the Java Goodies radius.html page works as well as could be expected.
(a) The demo outputs a valid circle area if the prompt( ) input is a positive number.
(b) If the input is 0 or if the input field is left blank or if the button on the box is clicked, then the circl return is 0.
(c) A negative number input gives a positive circl - fair enough for an area calculation. If we were actually calculating the circumference, however, then a negative radius would give a negative circl, and that wouldn't make very much sense, now would it?
(d) If the input is a non-empty, non-numeric string (e.g., hello world), then circl is NaN.

Toward the end of getting the circumference I thought it appropriate to give you my own demo, so here we go:

Circumference of a circle

A circle, its circumference, and its radius

C = 2 × π × r

The circumference of the circle is:

Input • The prompt( ) input interface is too 'in your face' for my taste: much better to get the radius via a text input. <div id="circumferenceDiv"> ...Heading, image, and equation, and/or other meta-information as you see fit... <label>Enter the radius of the circle: <input type="text" id="radiusInput"></label> • Trigger circle( ) - wait, let's call it getCircumference( ) - by clicking a push button. function getCircumference( ) { var radius = document.getElementById("radiusInput").value; ... } <button type="button" onclick="getCircumference( );">Get the circumference</button> • No pre-circl validation is provided for the user's input: unwanted numbers and strings should be turned away. if (Number(radius) <= 0 || /\.\d{3,}$/.test(radius) || isNaN(radius) || radius === "") { window.alert("Please enter a positive number with no more than two post-decimal point digits."); document.getElementById("radiusInput").value = ""; document.getElementById("radiusInput").focus( ); return; } No upper limit is set for the radius - you may want to calculate the circumference of Jupiter, after all. • Use Math.PI in place of var pi = "3.141592654". Output • Calculate the circle circumference via a var circumference = 2 * Math.PI * radius; operation. • Lose the alert( ) output. Truncate circumference at the hundredths place and then load it into a samp placeholder on the page. document.getElementById("circumferenceSamp").textContent = circumference.toFixed(2); The circumference of the circle is: <samp id="circumferenceSamp"></samp> I/O • Add a reset capability. function resetCircumference( ) { document.getElementById("radiusInput").value = ""; document.getElementById("circumferenceSamp").textContent = ""; } <button type="button" onclick="resetCircumference( );">Reset</button> </div>

The next two CCC scripts respectively calculate the perimeter and area of a quadrilateral - we ought to be able to deal with both of them in one post.

Comments: Post a Comment

<< Home

Powered by Blogger

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