JavaScript

Se connecter pour s'inscrire

JavaScript moderne pour le web

Maîtriser le DOM, les événements, les modules, les promesses, les requêtes asynchrones et les principes d’accessibilité des interfaces web.

  1. Public cible

    • Débutants : Personnes découvrant le domaine ou ayant peu d'expérience.
    • Intermédiaires : Personnes ayant déjà une expérience de base dans le domaine.
    • Experts : Personnes expérimentées cherchant à approfondir leurs connaissances.
    • Étudiants : Étudiants en formation initiale.
    • Professionnels : Professionnels en activité cherchant à se former.
    • En reconversion : Personnes en reconversion professionnelle.

  2. Objectifs

    • Maîtriser les fondamentaux de la programmation en JavaScript
    • Comprendre le DOM et la manipulation des éléments HTML
    • Apprendre à gérer les événements et les interactions utilisateur
    • Découvrir les concepts avancés comme l'asynchrone et les API
    • Mettre en pratique les bonnes pratiques de développement JavaScript

  3. Prérequis

    Aucune connaissance préalable n’est strictement obligatoire ; les prérequis détaillés sont précisés dans les ateliers.

  4. Niveau

    Tous niveaux

  5. Ressources

    • Documentation officielle et références citées dans les ateliers.
    • Exercices, examens et projet de synthèse du catalogue.

  6. Validation des compétences

    • QCM : QCM comprenant des questions sur les principes fondamentaux étudiés. Les étudiants devront sélectionner la réponse correcte parmi les options proposées.
    • Étude de cas : Proposer une étude de cas dans laquelle les étudiants doivent analyser une situation spécifique liée aux concepts étudiés. Inviter les étudiants à repérer les principes applicables, à recommander des outils et des technologies appropriés, et à expliquer les bénéfices escomptés de l'adoption dans cette situation spécifique.
    • Exercices pratiques : Organisation d’exercices pratiques où les étudiants peuvent mettre en œuvre les concepts étudiés. Évaluation de la capacité des étudiants à mettre en place les solutions proposées.
    • Présentation orale : Demander aux étudiants de préparer une courte présentation orale sur un sujet lié au contenu du cours. Ils devront expliquer le concept, les principes clés, les outils pertinents et les avantages de l'adoption des solutions proposées. Évaluer leur compréhension du sujet, leur capacité à communiquer efficacement et à présenter des informations de manière claire et concise.
    • Projet : <div>La validation des compétences s'effectue à travers un projet professionnel simulé. Les apprenants, répartis en équipes, devront mener à bien une mission data complète incluant :<br><br></div><ul><li>Une répartition des rôles (architecte, data engineer, analyste...)</li><li>Des livrables techniques avec stack imposée</li><li>Des deadlines serrées</li><li>Une soutenance professionnelle (20 min max)</li></ul><div><br></div><div><strong>La présentation devra :<br></strong><br></div><ol><li>Couvrir l'ensemble des concepts clés du module</li><li>Démontrer la maîtrise technique via une démo opérationnelle</li><li>Communiquer de manière claire et convaincante</li></ol><div><br></div>

  7. Besoins techniques

    • Ordinateur fonctionnel : Un ordinateur en bon état de fonctionnement, capable d’exécuter les logiciels nécessaires au cours.
    • Accès à Internet : Connexion Internet stable pour accéder aux ressources en ligne, visioconférences et plateformes pédagogiques.
    • Ordinateur avec 8 Go de RAM : Ordinateur équipé d’au moins 8 Go de mémoire vive pour un usage bureautique avancé ou développement léger.
    • Système d’exploitation GNU/Linux : Distribution Linux récente (Ubuntu, Debian, Fedora, etc.), accès administrateur recommandé.
    • Système d’exploitation Windows 10 ou supérieur : Windows 10 ou version plus récente, toutes mises à jour de sécurité appliquées.
    • Système d’exploitation macOS : Version macOS récente (10.15 Catalina ou supérieure), accès administrateur recommandé.
    • Navigateur web moderne : Google Chrome, Mozilla Firefox, Microsoft Edge, Safari ou autre navigateur à jour.
    • Environnement de développement : IDE ou éditeur de texte adapté (Visual Studio Code, PyCharm, Eclipse, etc.), selon le langage étudié.

Exercices, examens et projets

JavaScript web

Exercice

Exercice JavaScript

Créer une interaction web avec JavaScript moderne.

Obligatoire Consulter
Examen

Examen JavaScript

Évaluer DOM, événements, promesses et modules.

Obligatoire Consulter
Projet

Projet JavaScript

Développer une petite application interactive testable.

Livrables :

  • Code
  • Tests
Obligatoire Consulter

  1. Informations Générales

    1. Durée : ~ 50h
    2. Format : Cours en présentiel / En ligne (en fonction des besoins)
    3. Objectifs :
      1. Maîtriser les fondamentaux de la programmation en JavaScript.
      2. Comprendre le DOM et la manipulation des éléments HTML.
      3. Apprendre à gérer les événements et les interactions utilisateur.
      4. Découvrir les concepts avancés comme l'asynchrone et les API.
      5. Mettre en pratique les bonnes pratiques de développement JavaScript.
    4. Prérequis : Connaissances de base en HTML et CSS recommandées.
    5. Public cible :
      1. Débutants en programmation souhaitant acquérir des bases solides en JavaScript
      2. Développeurs web front-end cherchant à approfondir leurs compétences en JavaScript pur
      3. Étudiants en informatique ou en développement web
      4. Professionnels en reconversion dans le développement web
      5. Autodidactes souhaitant structurer leur apprentissage du JavaScript
    6. Méthode d'enseignement :
      1. Théorie et démonstrations
      2. Exercices pratiques guidés
      3. Mini-projets
      4. Projet final intégrateur
    7. Besoins techniques :
      1. Matériel requis :
        1. Ordinateur portable ou de bureau (Windows, macOS ou Linux)
        2. Connexion internet stable
        3. Casque audio avec micro (pour les sessions en ligne)
      2. Logiciels à installer :
        1. Navigateur web moderne (Chrome, Firefox, Edge, ou Safari récent)
        2. Éditeur de code (VS Code, Sublime Text, ou WebStorm recommandés)
        3. Node.js (version LTS recommandée)
        4. Git (pour la gestion de version)
      3. Comptes requis :
        1. Compte GitHub (gratuit)
        2. Compte sur CodePen ou JSFiddle (optionnel pour les exercices en ligne)

  2. Modules du Cours

    1. Introduction à JavaScript

      1. Les bases du langage
        1. Variables (let, const, var) et types de données
        2. Opérateurs et expressions
        3. Structures de contrôle (if/else, switch, boucles)
      2. Fonctions et portée
        1. Déclaration et appel de fonctions
        2. Fonctions fléchées
        3. Portée des variables (scope) et closure
      3. Les objets et tableaux
        1. Création et manipulation d'objets
        2. Méthodes d'objets et this
        3. Méthodes des tableaux (map, filter, reduce, etc.)
      4. Exercice pratique : Créer un calculateur simple

    2. Le DOM et la manipulation d'éléments

      1. Introduction au DOM
        1. Qu'est-ce que le DOM ?
        2. Navigation dans l'arbre DOM
        3. Sélection d'éléments (getElementById, querySelector, etc.)
      2. Manipulation du DOM
        1. Création, modification et suppression d'éléments
        2. Modification des styles et des classes CSS
        3. Manipulation des attributs et propriétés
      3. Événements
        1. Gestion des événements (addEventListener)
        2. Types d'événements (click, submit, keypress, etc.)
        3. Délégation d'événements
      4. Exercice pratique : Créer une liste de tâches interactive

    3. JavaScript Avancé

      1. Programmation asynchrone
        1. Callbacks et Callback Hell
        2. Promesses (Promises)
        3. Async/Await
      2. Manipulation des formulaires avec JavaScript
        1. Validation des formulaires
        2. Gestion de la soumission
        3. API FormData
      3. Stockage côté client
        1. localStorage et sessionStorage
        2. Cookies vs Web Storage
        3. IndexedDB (introduction)
      4. Exercice pratique : Créer un gestionnaire de notes avec sauvegarde locale

    4. API et requêtes HTTP

      1. Introduction aux API REST
        1. Qu'est-ce qu'une API ?
        2. Méthodes HTTP (GET, POST, PUT, DELETE)
        3. Format JSON
      2. Fetch API
        1. Faire des requêtes GET, POST, PUT, DELETE
        2. Gestion des réponses et des erreurs
        3. En-têtes et authentification
      3. Axios (librairie tierce)
        1. Avantages par rapport à Fetch
        2. Intercepteurs et configuration globale
      4. Exercice pratique : Créer une application météo avec une API publique

    5. Sémantique et accessibilité

      1. Les balises sémantiques
        1. Utilisation des balises <header>, <footer>, <nav>, <section>, <article>, <aside>
        2. Importance de la sémantique pour le SEO et l’accessibilité
      2. Accessibilité des contenus HTML
        1. L’importance des attributs alt, aria, role
        2. Bonnes pratiques pour rendre les pages web accessibles à tous
      3. Exercice pratique : Structurer une page sémantiquement correcte et accessible

    6. Bonnes pratiques et outils

      1. ES6+ et modules JavaScript
        1. Import/export de modules
        2. Nouvelles fonctionnalités ES6+
        3. Transpilation avec Babel
      2. Outils de développement
        1. ESLint et Prettier
        2. Debugging avec les DevTools
        3. Tests unitaires (introduction à Jest)
      3. Performance JavaScript
        1. Optimisation des boucles
        2. Déchargement des tâches lourdes
        3. Utilisation de Web Workers

    7. Projet final

      1. Projet pratique : Développer une application web interactive
        1. Les étudiants devront créer une application monopage (SPA) utilisant JavaScript pur
        2. L'application devra interagir avec une API externe
        3. Gestion d'état et stockage local
      2. Critères d'évaluation :
        1. Fonctionnalités implémentées
        2. Qualité du code et architecture
        3. Gestion des erreurs et états de chargement
        4. Expérience utilisateur et interface
        5. Documentation et bonnes pratiques

  3. Ressources Supplémentaires

Atelier guidé

Manipuler le DOM, gérer les événements et consommer une API avec des états d’erreur comprensibles.

  1. DOM : sélectionner des éléments, créer une carte et mettre à jour le texte sans innerHTML non sûr.
  2. Asynchrone : appeler une API, gérer loading, succès et erreur puis annuler une requête obsolète.
  3. Tests : extraire une fonction pure, écrire ses tests et vérifier le rendu avec un scénario utilisateur.

Restitution de l’atelier

  • Une interface interactive en JavaScript.
  • Une gestion d’API avec états et accessibilité.
  • Une suite de tests et un README de lancement.
Validation : Le code reste maintenable, ne bloque pas le navigateur et fournit un retour utile à chaque état.

Publié le 09/05/2025