How does JavaScript work and how can I build simple calculators with it?

JavaScript training boot camp
JavaScript is a computer programming language. Pat Greenhouse/The Boston Globe via Getty Images

JavaScript is what is called a Client-side Scripting Language. That means that it is a computer programming language that runs inside an Internet browser (a browser is also known as a Web client because it connects to a Web server to download pages).

The way JavaScript works is interesting. Inside a normal Web page you place some JavaScript code (See How Web Pages Work for details on Web pages). When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds in the page and runs it.

Advertisement

Web page designers use JavaScript in many different ways. One of the most common is to do field validation in a form. Many Web sites gather information from users in online forms, and JavaScript can help validate entries. For example, the programmer might validate that a person's age entered into a form falls between 1 and 120.

Another way that web page designers use JavaScript is to create calculators. Here are several examples:

To give you an example of an extremely simple JavaScript calculator, the HTML below shows you how to create 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 have read How Web Pages Work and How CGI Scripts Work, then a good portion of this HTML will be familiar. This is the basic structure of any web page:

<html>
<head>
</head>
<body>
</body>
</html>

There is one piece of JavaScript code in the header that is the function to calculate the conversion from 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 is called temp. It contains JavaScript code to calculate a Celsius temperature.

In the body of the page there is a typical form:

<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>

This line is key:

<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON 
onClick=temp(this.form)>

This is a normal button control. When the user clicks it, it calls the function in the head of the page because of the onClick notation.

As programming languages go, JavaScript is average difficulty. It is not especially hard to learn how to use it if you already understand programming, but if you are new to programming it is certainly not an easy language to start with. What you can do, however, is modify this sample code and expand it to create other calculators.

For more information, see:

Advertisement

JavaScript FAQs

Is JavaScript easy to learn?
JavaScript is an easy to learn programming language that is taught mostly to beginners. Compared to other languages, it can be learned quickly and is considered to be one of the fundamentals of coding.
How do I start learning JavaScript?
If you’re not enrolling in a course in school or university, the best way to learn JavaScript is through books or YouTube videos. Regular practice is also necessary as it helps strengthen concepts.
How can I learn JavaScript fast?
If you already understand the basics of coding, such as HTML and CSS, JavaScript is easy to understand and takes next to no time to learn.
Is JavaScript free to install?
Yes. One of the major advantages of learning JavaScript is that it is completely free to install on your computer. This means you do not have to bother about paying a monthly or annual fee for the program.
Where can I practice JavaScript online?
There are multiple online resources that you can use to learn JavaScript at all levels, from beginner to advanced techniques. W3schools and Khan Academy are just two examples of where you can learn JavaScript online for free.

Advertisement

Loading...