Kursusindhold

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: Implement Getters and Setters in a Class

Task

You are working within a Car class that has a private #mileage property. Your task is to define getters and setters for this property to control how it’s accessed and modified.

Define Getter for Mileage: Define a getter for the mileage property to retrieve the current mileage;
Define Setter for Mileage with Validation: Define a setter for the mileage property that accepts a new mileage value. This setter should:
- Only allow updating if the new mileage is greater than the current mileage (mileage can only increase);
- If the new mileage is invalid, log "Invalid mileage update" and do not change the current mileage.


              123456789101112131415161718192021222324252627
            
class Car {
  #mileage = 1000; // Initial private mileage

  // Getter for mileage
  _____ mileage() {
    return this.#_____;
  }

  // Setter for mileage with validation
  _____ mileage(newMileage) {
    _____ (_____ > this.#_____) {
      this.#_____ = newMileage;
    } _____ {
      console.log(_____);
    }
  }
}

// Testing
const car1 = new Car();

console.log(car1.mileage); // Expected: 1000

car1.mileage = 1500; // Update mileage to 1500
console.log(car1.mileage); // Expected: 1500

car1.mileage = 900; // Attempt invalid mileage update, expected: Invalid mileage update

Define a get accessor for mileage to retrieve the current mileage;
Define a set accessor for mileage that takes newMileage as a parameter;
In the setter, check if newMileage is greater than the current mileage (this.#mileage);
If newMileage is valid, update #mileage to newMileage;
If newMileage is not greater than the current mileage, log "Invalid mileage update" and do not change the mileage.


              123456789101112131415161718192021222324252627
            
class Car {
  #mileage = 1000; // Initial private mileage

  // Getter for mileage
  get mileage() {
    return this.#mileage;
  }

  // Setter for mileage with validation
  set mileage(newMileage) {
    if (newMileage > this.#mileage) {
      this.#mileage = newMileage;
    } else {
      console.log('Invalid mileage update');
    }
  }
}

// Testing
const car1 = new Car();

console.log(car1.mileage); // Output: 1000

car1.mileage = 1500; // Update mileage to 1500
console.log(car1.mileage); // Output: 1500

car1.mileage = 900; // Attempt invalid mileage update, expected: Invalid mileage update

Var alt klart?

Tak for dine kommentarer!

Sektion 1. Kapitel 10

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat