Contenu du cours
Maîtrise Avancée de JavaScript
Maîtrise Avancée de JavaScript
1. Classes
Bienvenue dans le CoursDéclaration de ClasseDéfi : Construire une ClasseMéthodes de ClasseDéfi : Ajouter des Méthodes à une ClasseObjet ParamètrePropriétés PrivéesDéfi : Implémentation de Propriétés Privées dans une ClasseAccesseurs et MutateursDéfi : Gestion des Propriétés avec Getters et SettersPropriétés StatiquesMéthodes StatiquesDéfi : Utilisation des Propriétés et Méthodes Statiques dans une ClasseHéritage avec Extends et Utilisation de super()Défi : Héritage de Classe avec Extends et Utilisation de Super
2. Manipulation du DOM
Qu'est-ce Que le DOM?Interroger le DOMDéfi : Interroger le DOMComprendre la Hiérarchie du DOMDéfi : Hiérarchie DOMPropriétés Du DOMTravailler Avec les Attributs des ÉlémentsDéfi : Travailler Avec les Propriétés et Attributs des ÉlémentsAjouter des ÉlémentsSuppression des ÉlémentsDéfi : Ajouter et Supprimer des ÉlémentsModifier les Styles des ÉlémentsDéfi : Modifier les Styles des Éléments
3. Événements et Gestion des Événements
4. JavaScript Asynchrone et APIs
Défi : Héritage de Classe avec Extends et Utilisation de Super
Tâche
Vous travaillez sur un système de gestion des transports qui suit différents types de véhicules. Chaque véhicule a une make
, un model
et une year
. Pour les véhicules électriques, vous devez également suivre la batteryCapacity
. Vous utiliserez l'héritage pour étendre une classe générale Vehicle
pour des véhicules électriques spécifiques.
- Créez une classe
ElectricVehicle
qui étendVehicle
; - Le constructeur de
ElectricVehicle
doit acceptermake
,model
,year
etbatteryCapacity
; - Utilisez
super()
pour initialisermake
,model
etyear
dans la classe parente; - Ajoutez une méthode
getDetails
àElectricVehicle
qui remplace la méthodeVehicle
degetDetails
. Elle doit appelersuper.getDetails()
et ajouter des informations sur labatteryCapacity
. Le format doit être :"{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.
- Définir une classe
ElectricVehicle
qui étendVehicle
; - Dans le constructeur de
ElectricVehicle
, ajouter un paramètrebatteryCapacity
aprèsmake
,model
, etyear
; - Utiliser
super(make, model, year)
pour appeler le constructeur de la classe parente et initialisermake
,model
, etyear
; - Assigner
batteryCapacity
à une propriété dansElectricVehicle
; - Définir une méthode
getDetails
dansElectricVehicle
qui remplace la méthodeVehicle
degetDetails
; - À l'intérieur de
getDetails
, utilisersuper.getDetails()
pour obtenir les détails de la classe parente, puis ajouter l'information de la capacité de la batterie à la chaîne de retour.
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.
Tout était clair ?
Merci pour vos commentaires !
Section 1. Chapitre 15