Objects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Objects</title>
</head>
<body>
<!--
Object is a standalone entity, with properties & type.
Objects are variables too. But objects can contain many values.
Object properties are a key-value pair.
Object method is a property containing a function definition.
Objects are mutable: They are addressed by reference, not by value.
Objects are be created in multiple-ways:
- Create a single object, using an object literal.
- Create a single object, with the keyword 'new'.
- Define an object constructor, and then create objects of constructed type.
- Create an object using Object.create().
-->
<h1>Demo : JavaScript Objects </h1>
<div>
<h2>Creating and retrieving Object literal</h2>
<p id="para1"></p>
<p id="para2"></p>
<p id="para3"></p>
</div>
<div>
<h2>Creating and retrieving Object literals in an array</h2>
<p id="para4"></p>
<p id="para5"></p>
<p id="para6"></p>
</div>
<!-- JavaScript code Starts here -->
<script>
/************************************************/
// Creating and retrieving Object literal
// Example : Students Object
//
const students = {
firstName: "Jasmine",
lastName: "Dsouza",
gender: "Female",
age: 25,
isGraduate: true,
favSub: ["Physics","Computers","History"]
};
// To retrieve a value:
document.getElementById('para1').innerHTML =
`Firstname of student = ${students.firstName}`;
document.getElementById('para2').innerHTML =
`Age of student = ${students["age"]}`;
document.getElementById('para3').innerHTML =
`Favorite subjects of student = [${students.favSub}]`;
/************************************************/
// Creating and retrieving Object literals in an array
// Example : Football Players Bio
//
const playersBio = [
{
name: "Leo Messi",
team: "Paris Saint-Germain",
position: "Forward",
height: 170,
weight: 159,
birthdate: "24/6/1987",
age: 35,
nationality: "Argentina",
careerHistory: ["Paris Saint-Germain","Barcelona","Argentina"],
isRetired: false
},
{
name: "Cristiano Ronaldo",
team: "Manchester United",
position: "Forward",
height: 187,
weight: 183,
birthdate: "5/2/1985",
age: 37,
nationality: "Portugal",
careerHistory: ["Manchester United","Juventus","Real Madrid","Portugal"],
isRetired: false
},
{
name: "Neymar",
team: "Paris Saint-Germain",
position: "Forward",
height: 175,
weight: 150,
birthdate: "5/2/1992",
age: 30,
nationality: "Brazil",
careerHistory: ["Paris Saint-Germain","Barcelona","Santos","Brazil"],
isRetired: false
}
]
// To retrieve a value
document.getElementById('para4').innerHTML =
`Name of the first player = ${playersBio[0].name}`;
document.getElementById('para5').innerHTML =
`Career history of second player = [${playersBio[1].careerHistory}]`;
document.getElementById('para6').innerHTML =
`Nationality of the third player = ${playersBio[2].nationality}`;
</script>
<!-- JavaScript code Ends here -->
</body>
</html>