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 radius

^{2}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:

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.

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