Creating a function that calculates the volume of a cuboid

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

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

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Adding arguments to a JavaScript function

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

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.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Creating a math drill application for kids

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

We can create a math drill function for kids using JavaScript.

In this example, the function  generates two integers and add them together. After that, it comparesits result to the answer entered by the user. If the answer is correct, it will show the message ‘Correct’. On the other hand, if the answer is wrong, it will show the message ‘ Incorrect’.

In order to generate a random number, we use the built-in function, as follows:

Math.random()

In order to statement generates an integer that is less than or equal to 100, we use the parseInt function.

parseInt(Math.random()*100);

The following is the JavaScript code created by us:

function myFunction() {
var number1;
var number2;
var answer;
var message

number1=document.getElementById(‘num1’).innerHTML ;
number2=document.getElementById(‘num2’).innerHTML;
answer=document.getElementById(‘ans1’).value;
var sum=parseInt(number1)+parseInt(number2);

if (answer==sum)
{message=”Correct”;}

else
{message=”Incorrect”;}

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

}

Check it out here,

 

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Creating a Simple Calculator

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

We can create a simple calculator that adds two numbers.

First we create a function that generates two random numbers that are less than 100 and converts them into integers , as follows:

<script>
function RandomFn() {
document.getElementById(“num1”).innerHTML = parseInt(Math.random()*100);
document.getElementById(“num2”).innerHTML = parseInt(Math.random()*100);

}

The innerHTML property is to specify the HTML content of an element. The parseInt function is to convert a number into interger so that it can be manipulated mathematically.

The function to add two numbers is shown as follows:

function myFunction() {
var number1;
var number2;
number1=document.getElementById(‘num1’).innerHTML ;
number2=document.getElementById(‘num2’).innerHTML;
var sum=parseInt(number1)+parseInt(number2);
document.getElementById(‘ans’).textContent=”The sum of two numbers= “+sum;
}

textContent method is to display the output within a HTML element.

The complete HTML code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Simple JS Calculator></title>
<meta name=viewport content=”width=device-width, initial-scale=1″>
</head>
<body onload=”RandomFn()”>
<script type=”text/javascript” src=”kidmath.js”></script>
<h3>Addition of Two Numbers</h3>
<p>Please calculate the sum of two numbers.</p>
<form id=”Myform”>
Number 1: <b id=”num1″></b><br><br>
Number 2: <b id=”num2″></b>
<p id=”ans”>Calculate the sum of two numbers</p><br>
<input type=”button” value=”Calculate” onclick=”myFunction()”><br><br>
<input type=”button” value=”Next Question” onclick=”Nextq()”>
</form>
<script>
function Nextq() {
location.reload();
}
</script>
<script>
function RandomFn() {
document.getElementById(“num1”).innerHTML = parseInt(Math.random()*100);
document.getElementById(“num2”).innerHTML = parseInt(Math.random()*100);

}
</script>

</body>
</html>

Click Simple Calculator to see the output.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Displaying greeting according to time

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

You can create a JavaScript to display greeting according to time. What you need to do is to create a new date object and use the getHours() method to fetch the time. Then use the if keyword to decide what greeting to display according to time. The script is a follows:

CurDate=new Date();
timeNow=CurDate.getHours();
var greeting;

if (timeNow>18) {
greeting=’Good Evening’;
greeting=greeting.fontcolor(“red”);
} else if(timeNow>12){
greeting=’Good Afternoon’;
greeting=greeting.fontcolor(“blue”);

} else if(timeNow>0) {
greeting=’Good Morning’;
greeting=greeting.fontcolor(“green”);
} else {
greeting=’Good Day’;
greeting=greeting.fontcolor(“cyn”);
}
greeting=greeting.bold();
greeting=greeting.fontsize(“10”);
greeting=greeting.italics();
document.write(greeting);

Click Here to view the output

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone