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: Verwenden von Statischen Eigenschaften und Methoden in Einer Klasse
Aufgabe
Stellen Sie sich vor, Sie bauen ein Bestandsverwaltungssystem für einen Online-Shop. Die Product
-Klasse muss die Gesamtanzahl der zum Inventar hinzugefügten Produkte verfolgen und die Funktionalität bieten, die Preise von zwei Produkten zu vergleichen.
- Definieren Sie eine statische Eigenschaft:
- Erstellen Sie in der
Product
-Klasse eine statische EigenschafttotalProducts
, die auf0
initialisiert wird; - Jedes Mal, wenn eine neue
Product
-Instanz erstellt wird, erhöhen SietotalProducts
um 1, um zu verfolgen, wie viele Produkte dem Inventar hinzugefügt wurden.
- Erstellen Sie in der
- Definieren Sie eine statische Methode: Definieren Sie eine statische Methode
comparePrices(product1, product2)
, die zweiProduct
-Instanzen als Parameter nimmt und Folgendes zurückgibt:"Produkt 1 ist teurer"
, wennproduct1
einen höheren Preis hat;"Produkt 2 ist teurer"
, wennproduct2
einen höheren Preis hat;"Beide Produkte haben den gleichen Preis"
, wenn sie gleich sind.
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
- Definieren Sie eine statische Eigenschaft namens
totalProducts
und initialisieren Sie sie mit0
; - Im Konstruktor erhöhen Sie
Product.totalProducts
um 1, jedes Mal, wenn eine neueProduct
-Instanz erstellt wird; - Definieren Sie eine statische Methode
comparePrices(product1, product2)
, die zwei Parameter entgegennimmt:product1
undproduct2
; - In
comparePrices
verwenden Sie eineif
-Anweisung, um zu prüfen, obproduct1.price
größer ist alsproduct2.price
. Wenn wahr, geben Sie"Product 1 is more expensive"
zurück; - Verwenden Sie eine
else if
-Anweisung, um zu prüfen, obproduct1.price
kleiner ist alsproduct2.price
. Wenn wahr, geben Sie"Product 2 is more expensive"
zurück.
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
War alles klar?
Danke für Ihr Feedback!
Abschnitt 1. Kapitel 13