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:<head>
<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)"; }</script>
</head>
<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 (Rpi)(R) area formula leaves something to be desired, wouldn't you say? Much nicer would be:
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.
Demo
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
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.
- posted by A. Peak @ 4:16 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)