JavaScript provides the capability to create and manipulate real-life objects, properties, and methods within HTML, which can significantly enhance the interactivity and functionality of web pages. In this explanation, we'll cover how JavaScript can be used to represent real-life objects, define their properties and methods, and interact with them within an HTML document. We'll also provide practical examples to illustrate these concepts.
Understanding Objects, Properties, and Methods
In JavaScript, objects are collections of related data and functionalities. They are used to model real-life entities and can have properties (attributes) and methods (functions that perform actions).
Example Object: Car
Consider a real-life object "Car". A car has properties such as make, model, and year, and methods like start, drive, and stop.
Defining Objects in JavaScript
You can define objects using object literals or constructor functions.
Using Object Literals
An object literal is a straightforward way to create an object:
var car = {
make: "Toyota",
model: "Corolla",
year: 2020,
start: function() {
console.log("Car started");
},
drive: function() {
console.log("Car is driving");
},
stop: function() {
console.log("Car stopped");
}
};
// Accessing properties and methods
console.log(car.make); // Output: Toyota
car.start(); // Output: Car started
Integrating Objects with HTML
To integrate JavaScript objects with HTML, we can use event listeners and manipulate the DOM (Document Object Model).
Example: Car Object in HTML
Let's create a simple HTML interface to interact with our car object.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Car Object Example</title>
<script>
// Define the car object
var car = {
make: "Toyota",
model: "Corolla",
year: 2020,
start: function() {
document.getElementById("status").innerText = "Car started";
},
drive: function() {
document.getElementById("status").innerText = "Car is driving";
},
stop: function() {
document.getElementById("status").innerText = "Car stopped";
}
};
// Function to display car details
function displayCarDetails() {
document.getElementById("car-details").innerText =
"Make: " + car.make + ", Model: " + car.model + ", Year: " + car.year;
}
</script>
</head>
<body onload="displayCarDetails()">
<h1>Car Object Example</h1>
<div id="car-details"></div>
<button onclick="car.start()">Start</button>
<button onclick="car.drive()">Drive</button>
<button onclick="car.stop()">Stop</button>
<p id="status"></p>
</body>
</html>
In this example, we define a car object with properties and methods. We then use these methods to update the HTML content dynamically. When the page loads, the car details are displayed, and buttons are provided to invoke the start, drive, and stop methods, updating the status paragraph accordingly.
Constructor Functions
Constructor functions allow us to create multiple instances of an object, each with their own properties.
Example: Car Constructor Function
// Constructor function for Car
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
this.start = function() {
console.log(this.make + " started");
};
this.drive = function() {
console.log(this.make + " is driving");
};
this.stop = function() {
console.log(this.make + " stopped");
};
}
// Create instances of Car
var car1 = new Car("Toyota", "Corolla", 2020);
var car2 = new Car("Honda", "Civic", 2019);
// Accessing properties and methods
console.log(car1.make); // Output: Toyota
car1.start(); // Output: Toyota started
console.log(car2.model); // Output: Civic
car2.drive(); // Output: Honda is driving
Integrating Constructor Function Objects with HTML
To demonstrate the use of constructor function objects within an HTML page, let's create an interface that allows users to create and interact with multiple car objects.
Example: Car Constructor in HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Car Constructor Example</title>
<script>
// Constructor function for Car
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
this.start = function() {
document.getElementById("status").innerText = this.make + " started";
};
this.drive = function() {
document.getElementById("status").innerText = this.make + " is driving";
};
this.stop = function() {
document.getElementById("status").innerText = this.make + " stopped";
};
}
// Array to hold car objects
var cars = [];
// Function to create a new car
function createCar() {
var make = document.getElementById("make").value;
var model = document.getElementById("model").value;
var year = document.getElementById("year").value;
var car = new Car(make, model, year);
cars.push(car);
displayCarList();
}
// Function to display the list of cars
function displayCarList() {
var carList = document.getElementById("car-list");
carList.innerHTML = "";
cars.forEach(function(car, index) {
var listItem = document.createElement("li");
listItem.innerText = car.make + " " + car.model + " (" + car.year + ")";
listItem.setAttribute("data-index", index);
listItem.onclick = function() {
var selectedIndex = this.getAttribute("data-index");
var selectedCar = cars[selectedIndex];
selectedCar.start();
};
carList.appendChild(listItem);
});
}
</script>
</head>
<body>
<h1>Car Constructor Example</h1>
<input type="text" id="make" placeholder="Make">
<input type="text" id="model" placeholder="Model">
<input type="number" id="year" placeholder="Year">
<button onclick="createCar()">Create Car</button>
<ul id="car-list"></ul>
<p id="status"></p>
</body>
</html>
In this example, we use a constructor function to create Car objects. Users can enter car details and create multiple car objects, which are displayed in a list. Clicking on a car in the list invokes the start method for that specific car, updating the status paragraph.
Practice Excercise Practice now