Course Content

Advanced JavaScript Mastery

1. Mastering JavaScript Classes and Inheritance

Getting Started Understanding Class Declarations in JavaScript Challenge: Create a JavaScript Class Defining Methods in JavaScript Classes Challenge: Add Methods to a Class Using Parameter Objects Working with Private Properties in Classes Challenge: Implement Private Properties in a Class Managing Properties with Getters and Setters Challenge: Implement Getters and Setters in a Class Exploring Static Properties in JavaScript Using Static Methods in JavaScript Challenge: Implement Static Properties and Methods in a Class Understanding Inheritance with extends and super()Challenge: Implement Class Inheritance with extends and super()

2. DOM Manipulation for Interactive Web Development

What Is the Document Object Model (DOM)?Querying and Selecting Elements in the DOM Challenge: Query and Select DOM Elements Understanding the DOM Hierarchy and Relationships Challenge: Navigate the DOM Hierarchy Exploring DOM Properties in JavaScript Working with Element Attributes in the DOM Challenge: Manage Element Properties and Attributes Adding Elements to the DOM Dynamically Removing Elements From the DOM Challenge: Add and Remove DOM Elements Modifying Element Styles with JavaScript Challenge: Apply Dynamic Styles to DOM Elements

3. Event Handling and User Interactions in JavaScript

Introduction to Events and Event Listeners Understanding the Event Object in JavaScript Challenge: Implement Event Listeners Event Propagation and Delegation Explained Challenge: Handle Event Propagation and Delegation Working with Keyboard and Mouse Events Managing and Removing Event Listeners

4. Asynchronous JavaScript and API Integration

Introduction to Asynchronous JavaScript Understanding Callbacks in JavaScript Handling Asynchronous Operations with Promises Using Async/Await for Cleaner Asynchronous Code Fetching and Working with APIs in JavaScript Integrating APIs in JavaScript Applications Challenge: Fetch and Use API Data Integrating Third-Party Libraries in JavaScript Challenge: Work with Third-Party Libraries Handling Multiple Asynchronous Requests

Challenge: Create a JavaScript Class

Task

You're creating a system to manage a car rental fleet. Each vehicle has specific details: the make, model, and year. Build a Vehicle class to represent these details for each car.

Create the Class: Define a class named Vehicle;
Add a Constructor: Inside the Vehicle class:
- Define a constructor that takes three parameters: make, model, and year;
- Assign these parameters to the class properties.
Create and Test Instances:
- Create a Vehicle instance named car1 with the values "Toyota", "Camry", and 2020;
- Create another instance named car2 with "Ford", "Mustang", and 2018;
- Log the properties for each car instance.


              1234567891011121314151617181920
            
class _____ {
  constructor(_____, _____, _____) {
    this._____ = _____;
    this._____ = _____;
    this._____ = _____;
  }
}

// Create instances
const car1 = new _____(_____, _____, _____);
const car2 = new _____(_____, _____, _____);

// Output the details
console.log(car1._____); // Expected: Toyota
console.log(car1._____); // Expected: Camry
console.log(car1._____); // Expected: 2020

console.log(car2._____); // Expected: Ford
console.log(car2._____); // Expected: Mustang
console.log(car2._____); // Expected: 2018

Define a class named Vehicle;
Add a constructor with three parameters: make, model, and year;
Inside the constructor, assign each parameter to a property using this;
Create an instance of Vehicle named car1 with values "Toyota", "Camry", and 2020;
Create another instance of Vehicle named car2 with values "Ford", "Mustang", and 2018;
Use console.log() to display the properties of car1 and car2.


              1234567891011121314151617181920
            
class Vehicle {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }
}

// Create instances
const car1 = new Vehicle('Toyota', 'Camry', 2020);
const car2 = new Vehicle('Ford', 'Mustang', 2018);

// Output the details
console.log(car1.make); // Output: Toyota
console.log(car1.model); // Output: Camry
console.log(car1.year); // Output: 2020

console.log(car2.make); // Output: Ford
console.log(car2.model); // Output: Mustang
console.log(car2.year); // Output: 2018

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 3