JavaScript web

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)

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

Ressources Supplémentaires

• MDN JavaScript - Documentation complète de référence
• JavaScript.info - Tutoriels modernes et détaillés
• ESLint - Outil d'analyse de code JavaScript
• Guide de style JavaScript d'Airbnb - Bonnes pratiques de codage
• freeCodeCamp - Exercices pratiques gratuits