If you declare multiple variables to hold different values, this can make your program messy and clunky.
For instance, if you need to store three characteristics each for 10 individuals, having 30 variables individually declared can make your program appear less organized.
So you need a way to group values with similar characteristics together to make your code more readable. And in JavaScript, objects work well for this purpose.
Unlike other data types, objects are capable of storing complex values. Because of this, JavaScript relies heavily on them. So it’s important that you become familiar with what an object is, how to create one, and how you can use it before going in-depth into learning JavaScript.
This article will introduce you to the basics of objects, object syntax, the different methods of creating objects, how to copy objects and how to iterate over an object.
In order to get the most out of this article, you need to have at least a basic understanding of JavaScript, particularly variables, functions, and data types.
JAVASCRIPT FILE
function areaOfCircle(){
return (Math.PI * 5* 5);
}
function areaOfTrapezium(){
return (0.5)*(5+7)*6;
}
function areaOfRectangle(){
return 8*7;
}
// calculating area of a CIRCLE
document.getElementById(“btn1”).addEventListener(‘click’,
function(){
document.getElementById(‘areaOfCircle’).innerHTML=areaOfCircle().toFixed(2)+ ‘m’;
});
// calculating area of a Trapezium
document.getElementById(“btn2”).addEventListener(‘click’,
function(){
document.getElementById(‘areaOfTrapezium’).innerHTML=areaOfTrapezium()+ ‘m’;
});
// calculating area of a Rectangle
document.getElementById(“btn3”).addEventListener(‘click’,
function(){
document.getElementById(‘areaOfRectangle’).innerHTML=areaOfRectangle() + ‘m’ ;
});
HTML FILE
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
<h4> A circle with a radius of 5m has an area of:</h4>
<button id=”btn1″>Check Area</button>
<h4 id=”areaOfCircle”>A</h4>
<h4> A trapezium with an upper length of 5m and lower length of 7m with heigth of 6m has an are of:</h4>
<button id=”btn2″>Check Area</button>
<h4 id=”areaOfTrapezium”>B</h4>
<h4>A rectangle with a length of 8m and breadth of 7m has an area of: </h4>
<button id=”btn3″>Check Area</button>
<h4 id=”areaOfRectangle”>C</h4>
<script src=”area.js”></script>
</body>
</html>
