Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Herausforderung: Arbeiten mit Drittanbieter-Bibliotheken | Asynchrones JavaScript und APIs
Fortgeschrittene JavaScript-Meisterschaft
course content

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
3. Ereignisse und Ereignisbehandlung
Einführung in Ereignisse und Ereignis-ListenerDas EreignisobjektHerausforderung: Ereignisse und Event-ListenerEreignisausbreitung und DelegierungHerausforderung: Ereignisausbreitung und DelegationTastatur- und MausereignisseVerwalten von Event-Listenern
4. Asynchrones JavaScript und APIs
Einführung in Asynchrones JavaScriptRückrufeVersprechenAsync/AwaitArbeiten mit APIsPraktische API-IntegrationHerausforderung: Arbeiten mit APIArbeiten Mit DrittanbieterbibliothekenHerausforderung: Arbeiten mit Drittanbieter-BibliothekenUmgang mit Mehreren Asynchronen Anfragen

book
Herausforderung: Arbeiten mit Drittanbieter-Bibliotheken

Aufgabe

Sie erstellen eine detaillierte Anzeige von Rasseinformationen. Nachdem Sie die Rassendaten von der API abgerufen haben, zeigen Sie den Namen, die Beschreibung, die Lebensdauer, die Gewichtsbereiche für Männchen und Weibchen sowie den hypoallergenen Status jeder Rasse an.

  1. Verwenden Sie Axios, um Daten von https://dogapi.dog/api/v2/breeds abzurufen, wenn die Schaltfläche "Rassen abrufen" geklickt wird, und verpacken Sie die Anfrage in einem try-catch-Block.

  2. Wenn während der API-Anfrage ein Fehler auftritt, blenden Sie den Ladeindikator aus und zeigen Sie eine Fehlermeldung an.

html

index.html

css

index.css

js

index.js

copy

  • Verwenden Sie axios.get('https://dogapi.dog/api/v2/breeds'), um Daten von der API abzurufen;

  • Behandeln Sie den Fehler im catch-Block.

html

index.html

css

index.css

js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 9

Fragen Sie AI

expand
ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

course content

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
3. Ereignisse und Ereignisbehandlung
Einführung in Ereignisse und Ereignis-ListenerDas EreignisobjektHerausforderung: Ereignisse und Event-ListenerEreignisausbreitung und DelegierungHerausforderung: Ereignisausbreitung und DelegationTastatur- und MausereignisseVerwalten von Event-Listenern
4. Asynchrones JavaScript und APIs
Einführung in Asynchrones JavaScriptRückrufeVersprechenAsync/AwaitArbeiten mit APIsPraktische API-IntegrationHerausforderung: Arbeiten mit APIArbeiten Mit DrittanbieterbibliothekenHerausforderung: Arbeiten mit Drittanbieter-BibliothekenUmgang mit Mehreren Asynchronen Anfragen

book
Herausforderung: Arbeiten mit Drittanbieter-Bibliotheken

Aufgabe

Sie erstellen eine detaillierte Anzeige von Rasseinformationen. Nachdem Sie die Rassendaten von der API abgerufen haben, zeigen Sie den Namen, die Beschreibung, die Lebensdauer, die Gewichtsbereiche für Männchen und Weibchen sowie den hypoallergenen Status jeder Rasse an.

  1. Verwenden Sie Axios, um Daten von https://dogapi.dog/api/v2/breeds abzurufen, wenn die Schaltfläche "Rassen abrufen" geklickt wird, und verpacken Sie die Anfrage in einem try-catch-Block.

  2. Wenn während der API-Anfrage ein Fehler auftritt, blenden Sie den Ladeindikator aus und zeigen Sie eine Fehlermeldung an.

html

index.html

css

index.css

js

index.js

copy

  • Verwenden Sie axios.get('https://dogapi.dog/api/v2/breeds'), um Daten von der API abzurufen;

  • Behandeln Sie den Fehler im catch-Block.

html

index.html

css

index.css

js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 9
Wir sind enttäuscht, dass etwas schief gelaufen ist. Was ist passiert?
some-alt