JavaScript objects are fundamental to creating interactive and dynamic web applications. They allow us to model real-world entities and manipulate them efficiently. Integrating JavaScript object properties with HTML enables us to build web pages that respond dynamically to user interactions. This guide will explain how to work with object properties in HTML, complete with practical examples.
Understanding JavaScript Object Properties
A JavaScript object is a collection of properties, where each property is a key-value pair. The key is a string that identifies the property, and the value can be any data type, including strings, numbers, arrays, functions, or even other objects.
Here is a simple example of a JavaScript object:
name: "John Doe",
age: 30,
occupation: "Developer"
};
In this object:
- name, age, and occupation are properties.
- "John Doe", 30, and "Developer" are the values of these properties.
Accessing Object Properties
You can access object properties using dot notation or bracket notation:
- Dot Notation: object.property
- Bracket Notation: object["property"]
For example:
console.log(person["age"]); // Output: 3052*
Manipulating HTML with Object Properties
To illustrate how to integrate object properties with HTML, let’s build a simple web page that displays and updates a person’s information.
Example: Display and Update Object Properties in HTML
HTML Structure: Define the basic structure of your HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Person Object Example</title>
</head>
<body>
<h1>Person Information</h1>
<div id="person-info"></div>
<button onclick="updateAge()">Increase Age</button>
<script src="script.js"></script>
</body>
</html>
JavaScript Code: Create a script.js file to define the person object and its interaction with the HTML.
var person = {
name: "John Doe",
age: 30,
occupation: "Developer"
};
function displayPersonInfo() {
var personInfoDiv = document.getElementById("person-info");
personInfoDiv.innerHTML =
"<p>Name: " + person.name + "</p>" +
"<p>Age: " + person.age + "</p>" +
"<p>Occupation: " + person.occupation + "</p>";
}
function updateAge() {
person.age += 1;
displayPersonInfo();
}
document.addEventListener("DOMContentLoaded", function() {
displayPersonInfo();
});
Explanation
- The
<div id="person-info"></div>element will display the person’s details. - The button calls the updateAge function to increase the person’s age and update the displayed information.
JavaScript:
- The person object is defined with properties name, age, and occupation.
- The displayPersonInfo function updates the HTML to display the person’s properties.
- The updateAge function increments the age property and calls displayPersonInfo to refresh the displayed information.
- The DOMContentLoaded event ensures that the person’s information is displayed once the DOM is fully loaded.
Result
When you open the HTML file in a browser, it will display the person’s details. Clicking the "Increase Age" button will increment the age and update the displayed information in real-time.
Dynamic Object Property Manipulation
Sometimes, you may need to create and manipulate object properties based on user input. Let’s extend our example to allow users to update the person’s name and occupation.
Extended HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Person Object Example</title>
</head>
<body>
<h1>Person Information</h1>
<div id="person-info"></div>
<input type="text" id="name-input" placeholder="Enter name">
<input type="text" id="occupation-input" placeholder="Enter occupation">
<button onclick="updatePersonInfo()">Update Info</button>
<button onclick="updateAge()">Increase Age</button>
<script src="script.js"></script>
</body>
</html>
Extended JavaScript Code:
var person = {
name: "John Doe",
age: 30,
occupation: "Developer"
};
function displayPersonInfo() {
var personInfoDiv = document.getElementById("person-info");
personInfoDiv.innerHTML =
"<p>Name: " + person.name + "</p>" +
"<p>Age: " + person.age + "</p>" +
"<p>Occupation: " + person.occupation + "</p>";
}
function updateAge() {
person.age += 1;
displayPersonInfo();
}
function updatePersonInfo() {
var nameInput = document.getElementById("name-input").value;
var occupationInput = document.getElementById("occupation-input").value;
if (nameInput) person.name = nameInput;
if (occupationInput) person.occupation = occupationInput;
displayPersonInfo();
}
document.addEventListener("DOMContentLoaded", function() {
displayPersonInfo();
});
Explanation
- Added input fields for updating the person’s name and occupation.
- The "Update Info" button calls the updatePersonInfo function to update the person’s properties and refresh the displayed information.
JavaScript:
The updatePersonInfo function reads user input from the text fields, updates the person object’s name and occupation properties if the inputs are not empty, and then calls displayPersonInfo to update the display.
Practice Excercise Practice now