📅 S06 – JavaScript : API & Données

  • Période : du 1er décembre au 12 décembre 2025 – Semaines 49–50
  • Thématique : Appels HTTP, JSON, affichage dynamique
  • Jour férié / vacances : Aucun

🧭 Objectifs de la session

  • Comprendre le rôle des APIs et leur utilisation via fetch() en JavaScript.
  • Savoir récupérer et traiter des données JSON issues d’un service distant.
  • Afficher dynamiquement des contenus dans le navigateur à partir de ces données.
  • Structurer une interface web basée sur des données externes, sans backend.

🔗 Cette session introduit la programmation asynchrone et prépare l’intégration de données réelles dans les projets front-end.

📚 Unités d’apprentissage mobilisées

  • UA 3.2.1 – Interagir avec des APIs – (5h) – référentiel
  • UA 3.2.2 – Affichage dynamique des données – (5h) – référentiel

🧩 Prototype

Titre : Application météo simple

Description : Développer une page HTML avec un champ texte permettant à l’utilisateur de saisir une ville. Au clic sur un bouton, un appel à l’API météo OpenWeatherMap est effectué, et les informations météo de base (température, description, icône) sont affichées dynamiquement.

Contraintes :

  • Utiliser fetch() pour interroger l’API
  • Affichage dynamique dans le DOM
  • HTML/CSS/JS natif

🧪 Mini-Projet

Titre : Catalogue de produits via API

Description : Créer une application front-end qui récupère une liste de produits (depuis une API fictive ou publique) et les affiche sous forme de cartes.

Fonctionnalités attendues :

  • Appel API avec fetch()
  • Affichage dynamique (nom, prix, image, description)
  • Filtrage simple (ex : par catégorie ou prix)
  • Bonus : recherche par mot-clé

Contraintes techniques :

  • Données au format JSON (API externe ou locale simulée)
  • Interface dynamique en HTML/CSS/JS
  • Pas de backend requis

Livrables :

  • Fichiers HTML, CSS, JS
  • Dépôt GitHub avec README explicatif

📊 Grille d’évaluation par niveau

  • Niveau 1 : Appel fetch() fonctionnel, données reçues et affichées simplement
  • Niveau 2 : Affichage structuré, gestion des erreurs, interaction utilisateur basique
  • Niveau 3 : Interface complète, dynamique, fluide, avec filtrage ou recherche