Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Défi : Utilisation des Propriétés et Méthodes Statiques dans une Classe | Classes
Maîtrise Avancée de JavaScript
course content

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
Introduction aux Événements et aux Écouteurs d'ÉvénementsL'Objet ÉvénementDéfi : Événements et Écouteurs d'ÉvénementsPropagation et Délégation d'ÉvénementsDéfi : Propagation et Délégation d'ÉvénementsÉvénements Clavier et SourisGestion des Écouteurs d'Événements
4. JavaScript Asynchrone et APIs
Introduction à JavaScript AsynchroneRappelsPromessesAsync/AwaitTravailler Avec les APIsIntégration Pratique de l'APIDéfi : Travailler Avec l'APITravailler avec des Bibliothèques TiercesDéfi : Travailler Avec des Bibliothèques TiercesGestion de Plusieurs Requêtes Asynchrones

book
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.

  1. Définir une Propriété Statique :
    • Dans la classe Product, créez une propriété statique totalProducts initialisée à 0;
    • Chaque fois qu'une nouvelle instance de Product est créée, incrémentez totalProducts de 1 pour suivre combien de produits ont été ajoutés à l'inventaire.
  2. Définir une Méthode Statique : Définissez une méthode statique comparePrices(product1, product2) qui prend deux instances de Product comme paramètres et retourne :
    • "Product 1 is more expensive" si product1 a un prix plus élevé;
    • "Product 2 is more expensive" si product2 a un prix plus élevé;
    • "Both products have the same price" s'ils ont le même prix.

              
12345678910111213141516171819202122232425262728293031

            
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
copy
  • 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 de Product est créée;
  • Définir une méthode statique comparePrices(product1, product2) qui prend deux paramètres : product1 et product2;
  • Dans comparePrices, utiliser une instruction if pour vérifier si product1.price est supérieur à product2.price. Si c'est vrai, retourner "Product 1 is more expensive";
  • Utiliser une instruction else if pour vérifier si product1.price est inférieur à product2.price. Si c'est vrai, retourner "Product 2 is more expensive".

              
12345678910111213141516171819202122232425262728293031

            
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
copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 13

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

course content

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
Introduction aux Événements et aux Écouteurs d'ÉvénementsL'Objet ÉvénementDéfi : Événements et Écouteurs d'ÉvénementsPropagation et Délégation d'ÉvénementsDéfi : Propagation et Délégation d'ÉvénementsÉvénements Clavier et SourisGestion des Écouteurs d'Événements
4. JavaScript Asynchrone et APIs
Introduction à JavaScript AsynchroneRappelsPromessesAsync/AwaitTravailler Avec les APIsIntégration Pratique de l'APIDéfi : Travailler Avec l'APITravailler avec des Bibliothèques TiercesDéfi : Travailler Avec des Bibliothèques TiercesGestion de Plusieurs Requêtes Asynchrones

book
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.

  1. Définir une Propriété Statique :
    • Dans la classe Product, créez une propriété statique totalProducts initialisée à 0;
    • Chaque fois qu'une nouvelle instance de Product est créée, incrémentez totalProducts de 1 pour suivre combien de produits ont été ajoutés à l'inventaire.
  2. Définir une Méthode Statique : Définissez une méthode statique comparePrices(product1, product2) qui prend deux instances de Product comme paramètres et retourne :
    • "Product 1 is more expensive" si product1 a un prix plus élevé;
    • "Product 2 is more expensive" si product2 a un prix plus élevé;
    • "Both products have the same price" s'ils ont le même prix.

              
12345678910111213141516171819202122232425262728293031

            
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
copy
  • 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 de Product est créée;
  • Définir une méthode statique comparePrices(product1, product2) qui prend deux paramètres : product1 et product2;
  • Dans comparePrices, utiliser une instruction if pour vérifier si product1.price est supérieur à product2.price. Si c'est vrai, retourner "Product 1 is more expensive";
  • Utiliser une instruction else if pour vérifier si product1.price est inférieur à product2.price. Si c'est vrai, retourner "Product 2 is more expensive".

              
12345678910111213141516171819202122232425262728293031

            
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
copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 13
some-alt