Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Défi : Travailler Avec l'API | JavaScript Asynchrone et APIs
Maîtrise Avancée de JavaScript
course content

Contenu du cours

Maîtrise Avancée de JavaScript

Maîtrise Avancée de JavaScript

1. Classes
Bienvenue dans le CoursDéclaration de ClasseDéfi : Construire une ClasseMéthodes de ClasseDéfi : Ajouter des Méthodes à une ClasseObjet ParamètrePropriétés PrivéesDéfi : Implémentation de Propriétés Privées dans une ClasseAccesseurs et MutateursDéfi : Gestion des Propriétés avec Getters et SettersPropriétés StatiquesMéthodes StatiquesDéfi : Utilisation des Propriétés et Méthodes Statiques dans une ClasseHéritage avec Extends et Utilisation de super()Défi : Héritage de Classe avec Extends et Utilisation de Super
2. Manipulation du DOM
Qu'est-ce Que le DOM?Interroger le DOMDéfi : Interroger le DOMComprendre la Hiérarchie du DOMDéfi : Hiérarchie DOMPropriétés Du DOMTravailler Avec les Attributs des ÉlémentsDéfi : Travailler Avec les Propriétés et Attributs des ÉlémentsAjouter des ÉlémentsSuppression des ÉlémentsDéfi : Ajouter et Supprimer des ÉlémentsModifier les Styles des ÉlémentsDéfi : Modifier les Styles des Éléments
3. Événements et Gestion des Événements
Introduction aux Événements et aux Écouteurs d'ÉvénementsL'Objet ÉvénementDéfi : Événements et Écouteurs d'ÉvénementsPropagation et Délégation d'ÉvénementsDéfi : Propagation et Délégation d'ÉvénementsÉvénements Clavier et SourisGestion des Écouteurs d'Événements
4. JavaScript Asynchrone et APIs
Introduction à JavaScript AsynchroneRappelsPromessesAsync/AwaitTravailler Avec les APIsIntégration Pratique de l'APIDéfi : Travailler Avec l'APITravailler avec des Bibliothèques TiercesDéfi : Travailler Avec des Bibliothèques TiercesGestion de Plusieurs Requêtes Asynchrones

book
Défi : Travailler Avec l'API

Tâche

Vous construisez une page web qui affiche une liste de races de chiens et leurs informations récupérées depuis l'API Dog. Lorsque l'utilisateur clique sur le bouton "Charger les races", les données doivent être récupérées depuis l'API, et les informations sur les races (nom, description et durée de vie) doivent être affichées sur la page web. Gérez les erreurs potentielles et fournissez un retour d'information dans le HTML.

Récupérer les données de l'API : Lorsque le bouton "Charger les races" est cliqué

  1. Récupérez les données depuis https://dogapi.dog/api/v2/breeds ;

  2. Analysez la réponse JSON;

  3. Si les données sont récupérées avec succès, passez à l'étape suivante;

  4. Si une erreur se produit lors de la récupération des données, affichez "Failed to load breeds. Please try again later." dans l'élément error-message .

html

index.html

css

index.css

js

index.js

copy

  • Utilisez fetch('https://dogapi.dog/api/v2/breeds') pour récupérer des données depuis https://dogapi.dog/api/v2/breeds ;

  • Utilisez response.json() pour analyser la réponse JSON;

  • Après avoir analysé les données dans le bloc then suivant, appelez la fonction displayBreeds et fournissez data.data comme argument;

  • Dans le bloc catch , gérez toutes les erreurs potentielles.

html

index.html

css

index.css

js

index.js

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 7

Demandez à l'IA

expand
ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

course content

Contenu du cours

Maîtrise Avancée de JavaScript

Maîtrise Avancée de JavaScript

1. Classes
Bienvenue dans le CoursDéclaration de ClasseDéfi : Construire une ClasseMéthodes de ClasseDéfi : Ajouter des Méthodes à une ClasseObjet ParamètrePropriétés PrivéesDéfi : Implémentation de Propriétés Privées dans une ClasseAccesseurs et MutateursDéfi : Gestion des Propriétés avec Getters et SettersPropriétés StatiquesMéthodes StatiquesDéfi : Utilisation des Propriétés et Méthodes Statiques dans une ClasseHéritage avec Extends et Utilisation de super()Défi : Héritage de Classe avec Extends et Utilisation de Super
2. Manipulation du DOM
Qu'est-ce Que le DOM?Interroger le DOMDéfi : Interroger le DOMComprendre la Hiérarchie du DOMDéfi : Hiérarchie DOMPropriétés Du DOMTravailler Avec les Attributs des ÉlémentsDéfi : Travailler Avec les Propriétés et Attributs des ÉlémentsAjouter des ÉlémentsSuppression des ÉlémentsDéfi : Ajouter et Supprimer des ÉlémentsModifier les Styles des ÉlémentsDéfi : Modifier les Styles des Éléments
3. Événements et Gestion des Événements
Introduction aux Événements et aux Écouteurs d'ÉvénementsL'Objet ÉvénementDéfi : Événements et Écouteurs d'ÉvénementsPropagation et Délégation d'ÉvénementsDéfi : Propagation et Délégation d'ÉvénementsÉvénements Clavier et SourisGestion des Écouteurs d'Événements
4. JavaScript Asynchrone et APIs
Introduction à JavaScript AsynchroneRappelsPromessesAsync/AwaitTravailler Avec les APIsIntégration Pratique de l'APIDéfi : Travailler Avec l'APITravailler avec des Bibliothèques TiercesDéfi : Travailler Avec des Bibliothèques TiercesGestion de Plusieurs Requêtes Asynchrones

book
Défi : Travailler Avec l'API

Tâche

Vous construisez une page web qui affiche une liste de races de chiens et leurs informations récupérées depuis l'API Dog. Lorsque l'utilisateur clique sur le bouton "Charger les races", les données doivent être récupérées depuis l'API, et les informations sur les races (nom, description et durée de vie) doivent être affichées sur la page web. Gérez les erreurs potentielles et fournissez un retour d'information dans le HTML.

Récupérer les données de l'API : Lorsque le bouton "Charger les races" est cliqué

  1. Récupérez les données depuis https://dogapi.dog/api/v2/breeds ;

  2. Analysez la réponse JSON;

  3. Si les données sont récupérées avec succès, passez à l'étape suivante;

  4. Si une erreur se produit lors de la récupération des données, affichez "Failed to load breeds. Please try again later." dans l'élément error-message .

html

index.html

css

index.css

js

index.js

copy

  • Utilisez fetch('https://dogapi.dog/api/v2/breeds') pour récupérer des données depuis https://dogapi.dog/api/v2/breeds ;

  • Utilisez response.json() pour analyser la réponse JSON;

  • Après avoir analysé les données dans le bloc then suivant, appelez la fonction displayBreeds et fournissez data.data comme argument;

  • Dans le bloc catch , gérez toutes les erreurs potentielles.

html

index.html

css

index.css

js

index.js

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 7
Nous sommes désolés de vous informer que quelque chose s'est mal passé. Qu'est-il arrivé ?
some-alt