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 : Utilisation des Propriétés et Méthodes Statiques dans une Classe
Tâche
Imaginez que vous construisez un système de gestion des stocks pour une boutique en ligne. La classe Product
doit suivre le nombre total de produits ajoutés à l'inventaire, ainsi que fournir une fonctionnalité pour comparer les prix de deux produits.
- Définir une Propriété Statique :
- Dans la classe
Product
, créez une propriété statiquetotalProducts
initialisée à0
; - Chaque fois qu'une nouvelle instance de
Product
est créée, incrémenteztotalProducts
de 1 pour suivre combien de produits ont été ajoutés à l'inventaire.
- Dans la classe
- Définir une Méthode Statique : Définissez une méthode statique
comparePrices(product1, product2)
qui prend deux instances deProduct
comme paramètres et retourne :"Product 1 is more expensive"
siproduct1
a un prix plus élevé;"Product 2 is more expensive"
siproduct2
a un prix plus élevé;"Both products have the same price"
s'ils ont le même prix.
class Product { _____ _____ = 0; // Define static property for total products constructor(name, price) { this.name = name; this.price = price; Product._____+=1; // Increment totalProducts } // Static method to compare prices _____ comparePrices(product1, product2) { if (product1.price > product2.price) { return _____; } else if (_____ < _____) { return _____; } else { return 'Both products have the same price'; } } } // Testing const product1 = new Product('Laptop', 1200); const product2 = new Product('Smartphone', 800); const product3 = new Product('Tablet', 1200); console.log(Product.comparePrices(product1, product2)); // Expected: Product 1 is more expensive console.log(Product.comparePrices(product1, product3)); // Expected: Both products have the same price console.log(Product.comparePrices(product2, product3)); // Expected: Product 2 is more expensive console.log(Product.totalProducts); // Expected: 3
- Définir une propriété statique nommée
totalProducts
et l'initialiser à0
; - Dans le constructeur, incrémenter
Product.totalProducts
de 1 chaque fois qu'une nouvelle instance deProduct
est créée; - Définir une méthode statique
comparePrices(product1, product2)
qui prend deux paramètres :product1
etproduct2
; - Dans
comparePrices
, utiliser une instructionif
pour vérifier siproduct1.price
est supérieur àproduct2.price
. Si c'est vrai, retourner"Product 1 is more expensive"
; - Utiliser une instruction
else if
pour vérifier siproduct1.price
est inférieur àproduct2.price
. Si c'est vrai, retourner"Product 2 is more expensive"
.
class Product { static totalProducts = 0; // Define static property for total products constructor(name, price) { this.name = name; this.price = price; Product.totalProducts+=1; // Increment totalProducts } // Static method to compare prices static comparePrices(product1, product2) { if (product1.price > product2.price) { return 'Product 1 is more expensive'; } else if (product1.price < product2.price) { return 'Product 2 is more expensive'; } else { return 'Both products have the same price'; } } } // Testing const product1 = new Product('Laptop', 1200); const product2 = new Product('Smartphone', 800); const product3 = new Product('Tablet', 1200); console.log(Product.comparePrices(product1, product2)); // Output: Product 1 is more expensive console.log(Product.comparePrices(product1, product3)); // Output: Both products have the same price console.log(Product.comparePrices(product2, product3)); // Output: Product 2 is more expensive console.log(Product.totalProducts); // Output: 3
Tout était clair ?
Merci pour vos commentaires !
Section 1. Chapitre 13