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

DOM-Eigenschaften

JavaScript bietet mehrere Eigenschaften, um auf den Inhalt zuzugreifen und ihn zu manipulieren. Das Verständnis dieser Eigenschaften ermöglicht es Ihnen, den Inhalt von Webseiten dynamisch basierend auf Benutzerinteraktionen oder anderen Bedingungen zu aktualisieren.

InnerHTML

Die innerHTML-Eigenschaft ermöglicht es Ihnen, den HTML-Inhalt eines Elements, einschließlich Tags und Text, abzurufen oder festzulegen. Es ist eine der am häufigsten verwendeten Eigenschaften, um den Seiteninhalt dynamisch zu aktualisieren.

index.html

index.js

Der innerHTML ruft den gesamten Inhalt ab, einschließlich HTML-Tags, und ermöglicht das Einfügen oder Aktualisieren von Inhalten mit HTML-Tags.

TextContent

Die textContent-Eigenschaft erhält oder setzt den Textinhalt eines Elements und entfernt dabei alle HTML-Tags. Es ist ideal, wenn Sie mit einfachem Text arbeiten müssen, ohne die HTML-Struktur zu berücksichtigen.

index.html

index.js

Der textContent ruft nur den Textinhalt ab, ignoriert HTML-Tags und setzt einfachen Text, wobei alle Tags automatisch maskiert werden.

Wert

Die value-Eigenschaft wird mit Formularelementen wie <input>, <textarea> und <select> verwendet und ermöglicht es Ihnen, den vom Benutzer eingegebenen Wert zu erhalten oder festzulegen.

index.html

index.js

Der value ruft den aktuellen Wert von Formularelementen ab und setzt einen neuen Wert für Eingabe-, Textbereichs- oder Auswahlelemente.

Unterschiede zwischen InnerHTML und TextContent

Praktisches Beispiel: Aktualisierung eines Benutzerprofils

Stellen Sie sich eine Benutzerprofilseite vor, auf der anfängliche Daten angezeigt werden und der Benutzer seine Profildetails über ein Formular aktualisieren kann. Wenn der Benutzer das Formular absendet, wird der Inhalt auf der Seite dynamisch aktualisiert.

index.html

index.css

index.js

Anfänglich zeigt das Profil einen vordefinierten Benutzernamen und eine Biografie an, die über Eingabefelder geändert werden können. Wenn die Schaltfläche "Änderungen speichern" geklickt wird, aktualisiert JavaScript das angezeigte Profil: textContent aktualisiert den Benutzernamen als einfachen Text, während innerHTML die Biografie aktualisiert, um grundlegende HTML-Formatierungen zu ermöglichen, die alle Änderungen widerspiegeln, die der Benutzer vornimmt.

1. Was macht die `innerHTML`-Eigenschaft?

2. Wann würden Sie `textContent` anstelle von `innerHTML` verwenden?

3. Was wird der folgende Code ausgeben?

4. Welche Eigenschaft wird verwendet, um den Wert eines `<input>`-Elements zu erhalten oder festzulegen?

Was macht die innerHTML-Eigenschaft?

Wählen Sie die richtige Antwort aus

Sie ruft nur den Textinhalt eines Elements ab.

Sie erhält oder setzt den HTML-Inhalt eines Elements, einschließlich Tags und Text.

Sie ruft den Wert eines Eingabefeldes ab.

Sie ruft nur die Kindknoten eines Elements ab.

Wann würden Sie textContent anstelle von innerHTML verwenden?

Wählen Sie die richtige Antwort aus

Wenn Sie den Inhalt als reinen Text ohne HTML-Tags setzen oder abrufen müssen.

Wenn Sie mehrere Kindelemente hinzufügen möchten.

Wenn Sie HTML mit Tags setzen müssen.

Wenn Sie mit Eingabeelementen arbeiten.

Was wird der folgende Code ausgeben?

Wählen Sie die richtige Antwort aus

Hello, <strong>World!</strong>

Hello, World!

<strong>World!</strong>

World!

Welche Eigenschaft wird verwendet, um den Wert eines <input>-Elements zu erhalten oder festzulegen?

Wählen Sie die richtige Antwort aus

textContent

innerHTML

value

placeholder

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6

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

some-alt