Fortgeschrittene JavaScript-Meisterschaft

Kursinhalt

Fortgeschrittene JavaScript-Meisterschaft

Fortgeschrittene JavaScript-Meisterschaft

1. Klassen

Willkommen Zum Kurs Klassendeklaration Herausforderung: Eine Klasse Erstellen Klassenmethoden Herausforderung: Methoden zu einer Klasse Hinzufügen Parameterobjekt Private Eigenschaften Herausforderung: Implementierung Privater Properties in Einer Klasse Getter und Setter Herausforderung: Verwalten von Eigenschaften mit Getters und Setters Statische Eigenschaften Statische Methoden Herausforderung: Verwenden von Statischen Eigenschaften und Methoden in Einer Klasse Vererbung mit Extends und Verwendung von Super()Herausforderung: Klassenvererbung mit extends und Verwendung von super

2. DOM-Manipulation

Was Ist das DOM?Abfragen des DOM Herausforderung: Abfragen des DOM Verstehen der DOM-Hierarchie Herausforderung: DOM-Hierarchie DOM-Eigenschaften Arbeiten mit Element-Attributen Herausforderung: Arbeiten mit Element-Eigenschaften und -Attributen Elemente Hinzufügen Elemente Entfernen Herausforderung: Hinzufügen und Entfernen von Elementen Ändern von Elementstilen Herausforderung: Ändern von Elementstilen

3. Ereignisse und Ereignisbehandlung

Einführung in Ereignisse und Ereignis-Listener Das Ereignisobjekt Herausforderung: Ereignisse und Event-Listener Ereignisausbreitung und Delegierung Herausforderung: Ereignisausbreitung und Delegation Tastatur- und Mausereignisse Verwalten von Event-Listenern

4. Asynchrones JavaScript und APIs

Einführung in Asynchrones JavaScript Rückrufe Versprechen Async/Await Arbeiten mit APIs Praktische API-Integration Herausforderung: Arbeiten mit API Arbeiten Mit Drittanbieterbibliotheken Herausforderung: Arbeiten mit Drittanbieter-Bibliotheken Umgang mit Mehreren Asynchronen Anfragen

Ändern von Elementstilen

In der Webentwicklung müssen wir häufig die Stile von Elementen dynamisch ändern. JavaScript bietet zwei Hauptmethoden, um das Erscheinungsbild von Elementen zu ändern: Aktualisieren von Inline-Stilen mit der style-Eigenschaft und Verwalten von Klassen mit classList.

Ändern von Inline-Stilen mit der style-Eigenschaft

Die style-Eigenschaft in JavaScript ermöglicht es Ihnen, das Inline-CSS eines HTML-Elements direkt zu ändern. Diese Methode gibt Ihnen die volle Kontrolle über einzelne CSS-Eigenschaften, ist jedoch auf Inline-Stile beschränkt und betrifft nur das spezifische Element.

Wir können einzelne CSS-Eigenschaften mit der Punktnotation am Style-Objekt eines Elements ändern. Die Eigenschaftsnamen werden in camelCase geschrieben (z.B. backgroundColor anstelle von background-color).

index.html

index.css

index.js

Die style-Eigenschaft wird verwendet, um die Inline-Stile des #box-Elements zu ändern. Jede CSS-Eigenschaft wird als individuelle JavaScript-Eigenschaft (z.B. box.style.backgroundColor) angesprochen, was es Ihnen ermöglicht, bestimmte Aspekte des Stils des Elements dynamisch zu ändern.

Hinzufügen und Entfernen von CSS-Klassen mit classList

Die classList-Eigenschaft bietet eine flexiblere und leistungsfähigere Möglichkeit, die Stile eines Elements zu verwalten, indem CSS-Klassen hinzugefügt, entfernt oder umgeschaltet werden. Diese Methode ist wartungsfreundlicher als das direkte Ändern von Inline-Stilen, da sie es Ihnen ermöglicht, externe CSS-Dateien zu nutzen und Ihr Styling von Ihrer JavaScript-Logik zu trennen.

index.html

index.css

index.js

classList.toggle() wird verwendet, um die highlight-Klasse hinzuzufügen oder zu entfernen, wenn der Button geklickt wird. Diese Methode vermeidet das Überladen des Inline-style-Attributs und stützt sich auf vordefinierte CSS-Regeln für die Wartbarkeit.

Praktisches Beispiel: Themen wechseln

Nehmen wir ein praktisches Beispiel, bei dem der Benutzer zwischen einem hellen und dunklen Thema mit classList wechseln kann.

index.html

index.css

index.js

classList.replace() wird verwendet, um die Klassen light-theme und dark-theme basierend auf dem aktuellen Zustand zu tauschen.

1. Welche Eigenschaft wird verwendet, um Inline-Stile eines Elements zu ändern?

2. Wie würden Sie die Hintergrundfarbe eines `<div>` mit der ID `box` auf Koralle ändern, indem Sie JavaScript verwenden?

3. Was macht der folgende Code?

Welche Eigenschaft wird verwendet, um Inline-Stile eines Elements zu ändern?

Wählen Sie die richtige Antwort aus

style

classList

getComputedStyle()

Wie würden Sie die Hintergrundfarbe eines <div> mit der ID box auf Koralle ändern, indem Sie JavaScript verwenden?

Wählen Sie die richtige Antwort aus

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

Was macht der folgende Code?

Wählen Sie die richtige Antwort aus

Es fügt die active-Klasse hinzu, wenn sie nicht existiert; entfernt sie, wenn sie existiert.

Es setzt die active-Klasse als Inline-Stil auf den Button.

Es fügt nur die aktive Klasse hinzu, ohne sie zu entfernen.

Es ändert die Hintergrundfarbe zu aktiv.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 12

We're sorry to hear that something went wrong. What happened?

some-alt