JavaScript: Math, Forms

 

Math & Forms

JavaScript has various math functions built in. If you need pi (3.1415926...), for example, you can use Math.PI. To take the sine of an angle that measures 0.3 radians, use Math.sin(0.3). To raise e to the power 3, use Math.exp(3). To find the next integer less than or equal to 'val', use Math.floor(val). To find the square root of 2, use Math.sqrt(2). (There are others as well.)

We can do many useful calculations if we combine JavaScript's math capabilities with a form. Let's do an example in which we provide the user a calculator that finds the height of a building. What we need as inputs are: 1) the distance the person is standing from the building, 2) the angle between the person's line of sight to the top of the building and the ground. We then calculate the height of the building in a function, and "print" the results. For those of you who have not yet studied trigonometry, we need the tangent function [Math.tan()] to find the building's height.

To round our answer, we can use Math.round(height) to give the height to the nearest foot. But how would we give the answer to the nearest 0.1 foot? First multiply the height by 10. Round this number. Then divide by 10. I do this in the function below.

In trigonometry, you can measure angles in either degrees or radians. The Math.tan() function requires that angles be measured in radians. Since the angle that the user puts into the form is measured in degrees, the first line of the function converts the angle to radians by multiplying it by pi/180.

In this example, I chose to make the text boxes that display the result invisible by setting 'border-width' to 0 and 'background-color' to match the background color of the page.

The form elements are inside a table to make things line up nicely.

 

Example

<script language=JavaScript>
<!--
function findHeight(form)
{angleInRadians = form.angle.value*Math.PI/180
height = Math.tan(angleInRadians)*form.distance.value
heightX10 = height * 10
heightX10Rounded = Math.round(heightX10)
height = heightX10Rounded / 10
form.heightLabel.value = "Height of Building (in feet):"
form.height.value = height
}
//-->
</script>
</HEAD>
<BODY>
<form>
<table>
<tr>
<td>Distance from building:
<td><input type=text name=distance size=9 value="">
<td>feet
<tr>
<td>Angle between line of sight and ground:
<td><input type=text name=angle size=9 value="">
<td>degrees
<tr>
<td colspan=3><input type=button onClick="findHeight(this.form)" value="Find Building Height">
<tr>
<td> <td> <td> 
<tr>
<td><input type=text name=heightLabel size=30 style="background-color:#FFFFEB; border-width:0">
<td><input type=text name=height size=9 style="background-color:#FFFFEB; border-width:0">
<td> 
</table>
</form>

to see this how this code behaves in a new window.

 

Other Resources

Try these links on math and forms:


Page Link
Math variables (JavaScript Goodies) www.htmlgoodies.com/primers/jsp/article.php/3478261
Random Scripts (WSAbstract) http://wsabstract.com/javatutors/random11.shtml

or check out one of our reference books, or look for other help on the Web.

 

Exercise

The eEverything.com cafe serves pizza. This is cyber-pizza; don't ask for the details. Since this is an Internet cafe, the managers would like to allow customers to use the Internet to make some calculations about the pizzas they offer. Specifically, they want a form in which the customer inputs the radius and cost of the pizza. When the customer hits the 'Calculate' button, the script figures out the circumference of the pizza, the area of the pizza and the cost per square inch (cost per area) of the pizza. Provide the cafe with the necessary script. Recall that circumference = 2*pi*radius, and area=pi*radius*radius.

If you prefer, work on your own site and implement something similar. Make use of the Math object in your script.