Creating an Object using Constructor Notation

Share

We can create an object in JavaScript using the New keyword and the Object() constructor function. Bear in mind the O of the Object function must be a capital letter, otherwise it will not work.

After created the Object, you can then add properties and method to it using the dot notation. Please ensure that each element that adds a property or method should end with a semicolon.

Example: A Car Object

The JavaScript

var car=new Object();
car.brand=’Toyota’;
car.model=’Camry’;
car.capacity=’2000cc’;
car.stock=10000;
car.booked=3000;
car.checkBalance=function(){
return this.stock-this.booked;
};
var carbrand=document.getElementById(‘carbrand‘);
carbrand.textContent=car.brand;
var carmodel=document.getElementById(‘carmodel’);
carmodel.textContent=car.model;
var carbalance=document.getElementById(‘balance’);
carbalance.textContent=car.checkBalance();

In this example, checkBalance is a method, it is actually a function by itself.

The corresponding HTML document

<!DOCTYPE html>
<html>
<body>
<h1>Car brand:<b id=“carbrand”></b></h1>
<h1>Car Model:<b id=”carmodel”></b></h1>
<h2>Number of Cars Left:<b id=“balance”></b></h2>
<script type=“text/javascript” src=“car.js”></script>

</body>
</html>

The Output

Car brand:

Car Model:

Number of Cars Left:

 

 

 

 

Share

BMI Calculator

Share

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>

<input type=”button” value=”Calculate” onclick=”bmi()”>
<script type=”text/javascript” src=”bmi2.js”></script>
</body>
</html>

Click here to launch the BMI calculator

 

 

Share

Creating a math drill for calculating volume of a cuboid

Share

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&nbsp;=&nbsp;&nbsp;<input type=”text” size=”5″ id=”wdt”></p>
<p>Length=&nbsp;<input type=”text” size=”5″ id=”lgt”></p>
<p>Height=&nbsp;<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.

Share

Creating a function that calculates the volume of a cuboid

Share

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

Adding arguments to a JavaScript function

Share

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