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

Abfragen des DOM

Einführung in das Abfragen des DOM

Das Abfragen des DOM beinhaltet das Auswählen und Zugreifen auf bestimmte Elemente im Dokument, damit Sie diese manipulieren oder mit ihnen interagieren können. JavaScript bietet mehrere Methoden zum Abfragen von Elementen, jede mit ihrem eigenen Anwendungsfall und Verhalten.

GetElementById

getElementById wird verwendet, um ein einzelnes Element anhand seiner eindeutigen ID auszuwählen. Es ist eine der am häufigsten verwendeten Methoden, da IDs innerhalb des Dokuments eindeutig sein sollen.
Anwendungsfall: Am besten geeignet, um ein bestimmtes Element auszuwählen, wenn Sie dessen ID kennen.
Rückgabewert: Ein einzelnes Element oder null, wenn kein Element gefunden wird.

html

GetElementsByClassName

getElementsByClassName wählt Elemente anhand ihres Klassennamens aus und gibt eine Live-HTMLCollection von Elementen zurück.
Anwendungsfall: Nützlich, wenn Sie mehrere Elemente mit derselben Klasse auswählen müssen.
Rückgabewert: Eine Live-HTMLCollection der übereinstimmenden Elemente, die sich aktualisiert, wenn sich das DOM ändert.
Einschränkungen: Kann Array-Methoden nicht direkt verwenden; muss bei Bedarf in ein Array konvertiert werden.

html

GetElementsByTagName

getElementsByTagName wählt Elemente nach ihrem Tag-Namen (z.B. div, p) aus und gibt eine Live-HTMLCollection zurück.
Anwendungsfall: Ideal zum Auswählen aller Elemente eines bestimmten Typs.
Rückgabe: Eine Live-HTMLCollection von Elementen.
Einschränkungen: Unspezifisch, da es alle Elemente eines gegebenen Tags im Kontext auswählt.

html

QuerySelector

querySelector wählt das erste Element aus, das einem CSS-Selektor entspricht. Es ist vielseitig und ermöglicht die Verwendung jedes gültigen CSS-Selektors zur Suche nach Elementen.
Anwendungsfall: Hervorragend zum Auswählen des ersten Treffers eines CSS-Selektors.
Rückgabe: Das erste übereinstimmende Element oder null, wenn kein Treffer gefunden wird.

html

QuerySelectorAll

querySelectorAll wählt alle Elemente aus, die einem CSS-Selektor entsprechen und gibt eine statische NodeList zurück. Im Gegensatz zu anderen Methoden aktualisiert es sich nicht dynamisch, wenn sich das DOM ändert.
Anwendungsfall: Perfekt zum Auswählen mehrerer Elemente mit komplexen Selektoren.
Rückgabe: Eine statische NodeList von Elementen, die sich nicht automatisch aktualisiert.

html

Unterschiede zwischen diesen Methoden

Rückgabetypen

Live- vs. Statische Sammlungen

CSS-Selektoren

Leistung

Praktisches Beispiel: Formularvalidierung

Lassen Sie uns diese Methoden in einem praktischen Szenario kombinieren: Hervorheben ungültiger Formularfelder mithilfe von Klassen.

index.html

index.css

index.js

Die Methode getElementById wählt das Formularelement aus, während querySelectorAll alle Eingabefelder mit der Klasse .input-field abruft. Ein Ereignis-Listener für das "submit"-Ereignis des Formulars verhindert die standardmäßige Übermittlung und überprüft jedes Eingabefeld. Wenn ein Feld leer ist, wird es mit einem roten Rahmen hervorgehoben, während ausgefüllte Felder einen grünen Rahmen erhalten, was dem Benutzer sofortiges visuelles Feedback gibt.

1. Welche Methode würden Sie verwenden, um ein Element anhand seiner eindeutigen ID auszuwählen?

2. Wenn Sie das erste Element mit der Klasse `box` auswählen und dessen `id`-Attribut erhalten möchten, welche Methode würden Sie verwenden?

3. Im folgenden HTML-Code, was wird `console.log(contentEls.length);` ausgeben?

Welche Methode würden Sie verwenden, um ein Element anhand seiner eindeutigen ID auszuwählen?

Select the correct answer

querySelectorAll

getElementsByClassName

getElementById

Wenn Sie das erste Element mit der Klasse box auswählen und dessen id-Attribut erhalten möchten, welche Methode würden Sie verwenden?

Select the correct answer

querySelector

querySelectorAll

getElementsByClassName

Im folgenden HTML-Code, was wird console.log(contentEls.length); ausgeben?

Select the correct answer

0

1

2

3

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2

Wir sind enttäuscht, dass etwas schief gelaufen ist. Was ist passiert?

some-alt