3.2 – JavaScript : Aller plus loin

🏆 Compétence cible

C3 – Développer une interface utilisateur web dynamique (40h – Niveau 1)
L’apprenant doit être capable de manipuler des données dynamiques, d’interagir avec des APIs, de créer des affichages conditionnels et d’organiser son code selon des principes avancés de JavaScript.

🧩 Micro-compétence

3.2 – JavaScript : Aller plus loin (20h)
Approfondir les bases de JavaScript en travaillant avec des APIs, en affichant dynamiquement des données, en organisant le code de manière modulaire et en gérant des objets complexes.

📝 Description de l’autoformation

Cette autoformation pousse l’apprenant à aller au-delà des bases de JavaScript, en manipulant des données issues d’APIs, en créant des affichages conditionnels et en structurant son code avec des techniques modernes. L’objectif est d’acquérir une autonomie technique pour développer des fonctionnalités interactives avancées.

UA 3.2.1 – Interagir avec des APIs

  1. 🎯 Objectif global

    • Comprendre comment récupérer et traiter des données depuis une API en utilisant fetch() et le format JSON.

  2. 📚 Liste des chapitres

    • Chapitre 1 : Appels AJAX avec fetch() & traitement JSON (2h).
    • Chapitre 2 : Parcourir et afficher les données d’une API (3h).

  3. 📄 Livrable attendu

    • Créer un script qui interroge une API publique (ex. météo) et affiche les informations récupérées dans une page web.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Réaliser une requête fetch() simple.
    • Niveau 2 : Parcourir les données JSON et les afficher.
    • Niveau 3 : Créer un affichage dynamique complet avec gestion d’erreurs.

UA 3.2.2 – Affichage dynamique des données

  1. 🎯 Objectif global

    • Apprendre à manipuler des données locales (tableaux, objets) pour générer du contenu dynamique dans le DOM.

  2. 📚 Liste des chapitres

    • Chapitre 3 : Affichage conditionnel & logique d’affichage (2h).
    • Chapitre 4 : Rendu dynamique depuis des tableaux d’objets (3h).

  3. 📄 Livrable attendu

    • Créer une page qui affiche une liste de produits (nom, prix, image) en fonction d’un tableau d’objets et des conditions définies.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Afficher les données d’un tableau.
    • Niveau 2 : Générer des éléments HTML de façon dynamique.
    • Niveau 3 : Mettre en place un affichage conditionnel avancé (filtres, tri).

UA 3.2.3 – Organiser son code avec des concepts avancés

  1. 🎯 Objectif global

    • Structurer et optimiser son code avec les notions avancées de JavaScript (fonctions imbriquées, callbacks, ES6).

  2. 📚 Liste des chapitres

    • Chapitre 5 : Fonctions imbriquées, portée, callbacks (2h).
    • Chapitre 6 : Factorisation, modularisation et bonnes pratiques ES6 (3h).

  3. 📄 Livrable attendu

    • Réécrire un script existant pour le rendre modulaire et mieux structuré en utilisant les fonctionnalités ES6 (fonctions fléchées, let/const).

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Utiliser des fonctions avancées (callbacks simples).
    • Niveau 2 : Organiser le code avec des modules ou fonctions réutilisables.
    • Niveau 3 : Appliquer des bonnes pratiques modernes de structuration.

UA 3.2.4 – Gérer l’état et les objets complexes

  1. 🎯 Objectif global

    • Savoir manipuler des structures complexes (objets imbriqués, tableaux) et gérer l’état d’une application.

  2. 📚 Liste des chapitres

    • Chapitre 7 : Manipuler des objets imbriqués & tableaux (2h).
    • Chapitre 8 : Créer une interface interactive pilotée par état (3h).

  3. 📄 Livrable attendu

    • Créer une mini-application (exemple : panier d’achats) qui gère l’état des éléments ajoutés et met à jour l’affichage en temps réel.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Parcourir et afficher des objets complexes.
    • Niveau 2 : Mettre en place une logique de gestion d’état simple.
    • Niveau 3 : Réaliser une application interactive avec état dynamique.