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: Klassenvererbung mit extends und Verwendung von super
Aufgabe
Sie arbeiten an einem Transportsystem, das verschiedene Fahrzeugtypen verfolgt. Jedes Fahrzeug hat eine make
, model
und year
. Für Elektrofahrzeuge müssen Sie auch die batteryCapacity
verfolgen. Sie werden Vererbung verwenden, um eine allgemeine Vehicle
-Klasse für spezifische Elektrofahrzeuge zu erweitern.
- Erstellen Sie eine
ElectricVehicle
-Klasse, dieVehicle
erweitert; - Der Konstruktor von
ElectricVehicle
solltemake
,model
,year
undbatteryCapacity
akzeptieren; - Verwenden Sie
super()
, ummake
,model
undyear
in der Elternklasse zu initialisieren; - Fügen Sie eine
getDetails
-Methode zuElectricVehicle
hinzu, die dieVehicle
-Methode vongetDetails
überschreibt. Sie solltesuper.getDetails()
aufrufen und Informationen überbatteryCapacity
hinzufügen. Das Format sollte sein:"{make} {model} ({year}) with a battery capacity of {batteryCapacity} kWh."
.
class Vehicle { constructor(make, model, year) { this.make = make; this.model = model; this.year = year; } getDetails() { return `${this.make} ${this.model} (${this.year})`; } } class ElectricVehicle _____ _____ { _____(make, model, year, _____) { _____(_____, _____, _____); this.batteryCapacity = batteryCapacity; } _____() { return `${super._____} with a battery capacity of ${ _____._____ } kWh.`; } } // Testing const vehicle = new Vehicle('Toyota', 'Camry', 2020); console.log(vehicle.getDetails()); // Expected: Toyota Camry (2020) const electricVehicle = new ElectricVehicle('Tesla', 'Model 3', 2021, 75); console.log(electricVehicle.getDetails()); // Expected: Tesla Model 3 (2021) with a battery capacity of 75 kWh.
- Definieren Sie eine Klasse
ElectricVehicle
, dieVehicle
erweitert; - Fügen Sie im Konstruktor von
ElectricVehicle
einen ParameterbatteryCapacity
nachmake
,model
undyear
hinzu; - Verwenden Sie
super(make, model, year)
, um den Konstruktor der Elternklasse aufzurufen undmake
,model
undyear
zu initialisieren; - Weisen Sie
batteryCapacity
einer Eigenschaft inElectricVehicle
zu; - Definieren Sie eine Methode
getDetails
inElectricVehicle
, die die MethodeVehicle
vongetDetails
überschreibt; - Verwenden Sie innerhalb von
getDetails
super.getDetails()
, um die Details der Elternklasse zu erhalten, und fügen Sie dann die Informationen zur Batteriekapazität zur Rückgabestring hinzu.
class Vehicle { constructor(make, model, year) { this.make = make; this.model = model; this.year = year; } getDetails() { return `${this.make} ${this.model} (${this.year})`; } } class ElectricVehicle extends Vehicle { constructor(make, model, year, batteryCapacity) { super(make, model, year); this.batteryCapacity = batteryCapacity; } getDetails() { return `${super.getDetails()} with a battery capacity of ${ this.batteryCapacity } kWh.`; } } // Testing const vehicle = new Vehicle('Toyota', 'Camry', 2020); console.log(vehicle.getDetails()); // Output: Toyota Camry (2020) const electricVehicle = new ElectricVehicle('Tesla', 'Model 3', 2021, 75); console.log(electricVehicle.getDetails()); // Output: Tesla Model 3 (2021) with a battery capacity of 75 kWh.
War alles klar?
Danke für Ihr Feedback!
Abschnitt 1. Kapitel 15