Kursinhalt
Fortgeschrittene JavaScript-Meisterschaft
Fortgeschrittene JavaScript-Meisterschaft
1. Klassen
Willkommen Zum KursKlassendeklarationHerausforderung: Eine Klasse ErstellenKlassenmethodenHerausforderung: Methoden zu einer Klasse HinzufügenParameterobjektPrivate EigenschaftenHerausforderung: Implementierung Privater Properties in Einer KlasseGetter und SetterHerausforderung: Verwalten von Eigenschaften mit Getters und SettersStatische EigenschaftenStatische MethodenHerausforderung: Verwenden von Statischen Eigenschaften und Methoden in Einer KlasseVererbung mit Extends und Verwendung von Super()Herausforderung: Klassenvererbung mit extends und Verwendung von super
2. DOM-Manipulation
Was Ist das DOM?Abfragen des DOMHerausforderung: Abfragen des DOMVerstehen der DOM-HierarchieHerausforderung: DOM-HierarchieDOM-EigenschaftenArbeiten mit Element-AttributenHerausforderung: Arbeiten mit Element-Eigenschaften und -AttributenElemente HinzufügenElemente EntfernenHerausforderung: Hinzufügen und Entfernen von ElementenÄndern von ElementstilenHerausforderung: Ändern von Elementstilen
4. Asynchrones JavaScript und APIs
Herausforderung: Verwalten von Eigenschaften mit Getters und Setters
Aufgabe
Sie arbeiten innerhalb einer Car
-Klasse, die eine private #mileage
-Eigenschaft hat. Ihre Aufgabe ist es, Getter und Setter für diese Eigenschaft zu definieren, um zu kontrollieren, wie darauf zugegriffen und sie modifiziert wird.
- Getter für Kilometerstand definieren: Definieren Sie einen Getter für die
mileage
-Eigenschaft, um den aktuellen Kilometerstand abzurufen; - Setter für Kilometerstand mit Validierung definieren: Definieren Sie einen Setter für die
mileage
-Eigenschaft, der einen neuen Kilometerstandswert akzeptiert. Dieser Setter sollte:- Nur eine Aktualisierung zulassen, wenn der neue Kilometerstand größer als der aktuelle ist (der Kilometerstand kann nur steigen);
- Wenn der neue Kilometerstand ungültig ist, loggen Sie
"Invalid mileage update"
und ändern Sie den aktuellen Kilometerstand nicht.
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
- Definieren Sie einen
get
-Accessor fürmileage
, um den aktuellen Kilometerstand abzurufen; - Definieren Sie einen
set
-Accessor fürmileage
, dernewMileage
als Parameter annimmt; - Überprüfen Sie im Setter, ob
newMileage
größer ist als der aktuelle Kilometerstand (this.#mileage
); - Wenn
newMileage
gültig ist, aktualisieren Sie#mileage
aufnewMileage
; - Wenn
newMileage
nicht größer ist als der aktuelle Kilometerstand, protokollieren Sie"Invalid mileage update"
und ändern Sie den Kilometerstand nicht.
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
War alles klar?
Danke für Ihr Feedback!
Abschnitt 1. Kapitel 10