Buzz
JavaScript is a type of programming language for computers. Photo credit: Pat Greenhouse/The Boston Globe via Getty ImagesJavaScript is classified as a Client-side Scripting Language, meaning it is a programming language that operates within an Internet browser (often referred to as a Web client due to its role in connecting to a Web server to fetch pages).
The way JavaScript operates is quite fascinating. Within a regular Web page, you insert JavaScript code (refer to How Web Pages Work for more on web pages). When the page loads in the browser, the browser’s built-in interpreter detects and executes the JavaScript code it encounters in the page.
Web designers utilize JavaScript in a variety of ways. One common use is for field validation in forms. Many websites collect data from users through online forms, and JavaScript plays a key role in validating the input. For instance, the developer may ensure that a user's age entered into the form falls within the range of 1 to 120 years.
Another approach web designers use JavaScript for is creating calculators. Below are a few examples:
- RPN calculator
- MegaConverter - a comprehensive set of calculators
- Personal Finance calculators
To demonstrate an extremely basic JavaScript calculator, the HTML code below shows how to build a Fahrenheit to Celsius converter using JavaScript:
<html>
<head>
<script language="JavaScript">
<!-- hide this script from old browsers
function temp(form)
{
var f = parseFloat(form.DegF.value, 10);
var c = 0;
c = (f - 32.0) * 5.0 / 9.0;
form.DegC.value = c;
}
// done hiding from old browsers -->
</script>
</head>
<body>
<FORM>
<h2>Fahrenheit to Celsius Converter</h2>
Enter a temperature in degrees F:
<INPUT NAME="DegF" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>
Click this button to calculate the temperature
in degrees C:
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON
onClick=temp(this.form)>
<p>
Temperature in degrees C is:
<INPUT NAME="DegC" READONLY SIZE=15>
</FORM>
</body>
</html>If you've explored How Web Pages Work and How CGI Scripts Work, much of the HTML structure here will feel familiar. This is the essential format of a standard web page:
<html> <head> </head> <body> </body> </html>
Embedded in the header is a JavaScript function designed to convert Fahrenheit to Celsius:
<head>
<script>
<!-- hide this script from old browsers
function temp(form)
{
var f = parseFloat(form.DegF.value, 10);
var c = 0;
c = (f - 32.0) * 5.0 / 9.0;
form.DegC.value = c;
}
<!-- done hiding from old browsers -->
</script>
</head>The function, named 'temp', features JavaScript code that performs the conversion from Fahrenheit to Celsius.
Within the main body of the page, a standard form can be found:
<FORM> <h2>Fahrenheit to Celsius Converter</h2> Please enter a temperature in Fahrenheit: <INPUT NAME="DegF" VALUE="0" MAXLENGTH="15" SIZE=15> <p> Click this button to convert to Celsius: <INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=temp(this.form)> <p> The converted temperature in Celsius is: <INPUT NAME="DegC" READONLY SIZE=15> </FORM>
The following line plays a crucial role:
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=temp(this.form)>
This is simply a button element. When clicked, it triggers the function specified in the page’s head due to the onClick attribute.
JavaScript, as a programming language, is of moderate difficulty. If you already have experience with programming, it isn't particularly difficult to grasp. However, for someone who is new to programming, it might be a bit challenging to start with. A great way to learn is by customizing this sample code and building upon it to create additional calculators.
For further details, refer to:
- JavaScript.com
- JavaScript calculators
- JavaScript converters
- Forms
