Liew Voon Kiong, Author at JavaScript tutorial

Pythagoras Theorem

Pythagoras Theorem is used to solve problems related to the length of the sides of a triangle.
The formula to is

AB²+AC²=BC²

AB is the opposite side, AC is the adjacent and BC is the hypotenuse of a triangle ABC.

We shall create a JavaScript application to deal with problems related to Pythagoras Theorem. In this application, we shall insert two input boxes for the user to key in the length of the opposite side and the length of the adjacent side. The user can then click on the Calculate Hypotenuse button to find the answer.

BMI Calculator

You can create a BMI calculator using JavaScript. The formula for BMI(Body Mass Index) is as follows:

BMI=weight/(height)^2

where weight is in kg and height in cm.

In the html page, you can create three text box using the <input> tag to accept the user inputs for name, height and weight.

In the JavaScript, you can create a function to calculate the bmi, as follows:

function bmi(){

var sheight=parseFloat(document.getElementById(‘hgt’).value);
var sweight=parseFloat(document.getElementById(‘wgt’).value);
var bmi=sweight/Math.pow(sheight,2);
var student_bmi=document.getElementById(‘bmi_index’);
student_bmi.textContent=bmi.toFixed(2);
}

toFixed method is to round the output to 2 decimal ppalces

The html document is

<!DOCTYPE html>
<html>
<body>

<h1>Student Name=<input type=”text” style=”font-size:25px; font-weight: bold;” id=”studentname”></h1>
<h2>Height=<input type=”text” style=”font-size:20px; font-weight: bold;” id=”hgt”></h2>
<h2>Weight=<input type=”text” style=”font-size:20px; font-weight: bold;” id=”wgt”></h2>
<h2>BMI=<b id=”bmi_index”></b></h2>

Click here to launch the BMI calculator

Creating a math drill for calculating volume of a cuboid

We have learned how to create a calculator that calculates the volume of a cuboid. Using the similar script, we can write a JavaScript that allows the user to input the dimensions as well as enter the answer. If the answer is wrong, it will displays the “Incorrect” message, otherwise it will show the “Correct” message.

The JavaScript is as follows:’

function Calvol(width, length, height){
var vol=width*length*height;
return vol;
}
function CalSize(){
var x=parseInt(document.getElementById(“wdt”).value);
var y=parseInt(document.getElementById(“lgt”).value);
var z=parseInt(document.getElementById(“hgt”).value);
var Size=Calvol(x,y,z);
var answer=document.getElementById(‘ans1’).value;
if (answer==Size)
{message=”Correct”;}

else
{message=”Incorrect, try again”;}

document.getElementById(‘ans’).textContent=message;

}

And the html is as follows:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>Volume Calculation</title>
</head>
<body onload=”RandomFn()”>
<h1>Volume of a Cuboid</h1>
<p>Width =  <input type=”text” size=”5″ id=”wdt”></p>
<p>Length= <input type=”text” size=”5″ id=”lgt”></p>
<p>Height= <input type=”text” size=”5″ id=”hgt”></p>

<h3>The Volume is</h3>

<input type=”text” size=”5″ id=”ans1″><br><br>
<h3 id=”ans”><h3>
<script>
function Nextq() {
location.reload();
}
</script>
<input type=”button” value=”Check Answer” onclick=”CalSize()”><br><br>
<input type=”button” value=”Next Question” onclick=” location.reload();”>
<script>
function RandomFn() {
document.getElementById(“wdt”).innerHTML = parseInt(Math.random()*9+1);
document.getElementById(“lgt”).innerHTML = parseInt(Math.random()*9+1);
document.getElementById(“hgt”).innerHTML = parseInt(Math.random()*9+1);
}
</script>
<script type=”text/javascript” src=”volume2.js”></script>

</body>
</html>

Click Here to run the script.

Creating a function that calculates the volume of a cuboid

We have learned how to create a function that have arguments. In this example, we shall show you how to create a function that calculated the volume of cuboid give the width, length and height of the cuboid.

The JavaScript function to calculate the volume is

function Calvol(width, length, height){
var vol=width*length*height;
return vol;
}

The JavaScript function to call the Calvol() function by replacing the parameters with the arguments generate by the HTML document is

function CalSize(){
var x=parseInt(document.getElementById(“wdt”).innerHTML);
var y=parseInt(document.getElementById(“lgt”).innerHTML);
var z=parseInt(document.getElementById(“hgt”).innerHTML);
var Size=Calvol(x,y,z);
document.getElementById(‘ans’).textContent=”The Volume is= “+Size;
}

The HTML document is

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>Volume Calculation</title>
</head>
<body onload=”RandomFn()”>
<h1>Volume Calculation</h1>
<p>Width=<b id=”wdt”></b></p>
<p>Length=<b id=”lgt”></b></p>
<p>Height=<b id=”hgt”></b></p>
<P id=”ans”>What is the Volume?</p>
<input type=”button” value=”Calculate Volume” onclick=”CalSize()”><br><br>
<input type=”button” value=”Next Question” onclick=” location.reload();”>
<script>
function RandomFn() {
document.getElementById(“wdt”).innerHTML = parseInt(Math.random()*9+1);
document.getElementById(“lgt”).innerHTML = parseInt(Math.random()*9+1);
document.getElementById(“hgt”).innerHTML = parseInt(Math.random()*9+1);
}
</script>
<script type=”text/javascript” src=”volume.js”></script>

</body>
</html>

Click Here to check it out

Adding arguments to a JavaScript function

You can create a function in JavaScript and add arguments to it. An argument is one or more variables that are declared within the parenthesis of a function definition. The syntax is

function MyFunction(x,y,z)

{ statements;}

You can also use the return keyword to return a value to the statement.

function MyFunction(x,y,z)

{ return value; }

Example:

function Area_Rect(width,length)

{ area=width*length;

return area;}

You can call the function by assigning values to the arguments, such as

document.write(Area_Rect(4,6));

0r alert (“The area of a rectangle is”+Area_Rect(4,6)

The area of the rectangle if width=4 and length=6 is:

Please follow Lesson 13 and Lesson 14 to learn more about function.