Javascript

Développer des interfaces web dynamiques et des services front modernes en JavaScript, des bases du langage aux bonnes pratiques et à l’outillage.

Durée : 

21 à 35 heures
Présentiel ou classe virtuelle

Intra-Entreprise : Tarif identique de 1 à 12 participants

Objectifs Pédagogiques & Opérationnels

  • Comprendre les bases de JavaScript (types, fonctions, portée, objets) et écrire un code lisible et robuste.

  • Manipuler le DOM et gérer les événements pour créer des interactions utilisateur fluides et accessibles.

  • Maîtriser l’asynchronisme (promesses, async/await) et consommer des APIs HTTP de manière fiable (fetch, erreurs, états).

  • Structurer un projet front : modules, organisation du code, conventions, gestion des dépendances et build (notions).

  • Déboguer et tester : outils navigateur, gestion des erreurs, tests unitaires de base et qualité de code.

  • Appliquer les bonnes pratiques de performance et de sécurité côté client (XSS, stockage, validation).

  • Concevoir des composants d’interface réutilisables et maintenir une base de code évolutive.

Description

Module 1 — Fondations JavaScript et environnement de travail
  1. Rôle de JavaScript : navigateur, moteur JS, interactions, cycle de rendu
  2. Installer/configurer un environnement : éditeur, console, DevTools
  3. Syntaxe : variables (let/const), types, opérateurs, conditions, boucles
  4. Fonctions : déclarations, expressions, arrow functions, paramètres/rest
  5. Portée (scope), hoisting (principes), valeurs par référence
  6. Mise en application encadrée : écrire des fonctions utilitaires et les tester en console
Module 2 — Objets, tableaux et patterns de manipulation de données
  1. Objets : propriétés, méthodes, destructuring, spread, copie vs référence
  2. Tableaux : map/filter/reduce, recherche, tri, immutabilité (principes)
  3. Chaînes et dates : méthodes utiles, formatage, gestion des locales (notions)
  4. Comparaisons et égalité : pièges, null/undefined, truthy/falsy
  5. Gestion d’erreurs : try/catch, erreurs personnalisées, messages utiles
  6. Mise en application encadrée : transformer un dataset et produire un rendu simple
Module 3 — Le DOM : sélection, création et mise à jour d’interface
  1. DOM et render : comprendre ce qui coûte cher (reflow/repaint)
  2. Sélecteurs : querySelector, relations, dataset, classes
  3. Créer/modifier : templates, createElement, fragments, innerHTML (risques)
  4. Attributs et styles : classes, inline styles, CSS variables (notions)
  5. Accessibilité : rôles, labels, focus, navigation clavier (principes)
  6. Mise en application encadrée : construire une liste filtrable côté client
Module 4 — Événements et interactions utilisateur
  1. Écouteurs : addEventListener, propagation, capture, stopPropagation
  2. Délégation d’événements : gérer des listes dynamiques proprement
  3. Formulaires : validation, messages d’erreur, prévention de soumission
  4. Gestion d’état simple : synchroniser UI et données, patterns légers
  5. Interactions avancées : drag & drop (notions), clavier, raccourcis
  6. Mise en application encadrée : créer un formulaire interactif avec validations
Module 5 — Asynchronisme et communication réseau (APIs)
  1. Modèle async : event loop (principes), callbacks vs promesses
  2. Promesses : then/catch/finally, chaînage, Promise.all/allSettled
  3. async/await : lecture claire, gestion d’erreurs, annulation (notions)
  4. Fetch : requêtes GET/POST, headers, JSON, timeouts (patterns)
  5. États UI : chargement, succès, erreur, retry, offline (principes)
  6. Mise en application encadrée : consommer une API et afficher un résultat paginé
Module 6 — Modules, outillage et structuration de projet
  1. ES Modules : import/export, organisation en fichiers, encapsulation
  2. NPM (notions) : dépendances, scripts, versioning, sécurité (principes)
  3. Bundlers/dev servers (notions) : Vite/Webpack, builds, environnements
  4. Qualité : ESLint/Prettier (principes), conventions, revues de code
  5. Gestion de configuration : variables d’environnement (principes)
  6. Mise en application encadrée : découper une app en modules + script de build (notions).
Module 7 — Qualité, tests et débogage
  1. DevTools : breakpoints, watch, réseau, performance, mémoire
  2. Logging utile : niveaux, traces, éviter le bruit
  3. Tests unitaires (bases) : fonctions pures, cas limites, assertions (Jest/Vitest – notions)
  4. Gestion des erreurs en prod : messages, fallback UI, surveillance (principes)
  5. Refactoring : réduire la complexité, nommage, petites fonctions, DRY maîtrisé
  6. Mise en application encadrée : écrire des tests sur des fonctions métiers simples
Module 8 — Sécurité, performance et bonnes pratiques “niveau avancé”
  1. Sécurité client : XSS, injection via DOM, règles d’échappement
  2. Stockage : localStorage/sessionStorage, cookies (notions), données sensibles
  3. Performance : debounce/throttle, lazy loading, optimisation DOM, caching
  4. Accessibilité : focus management, ARIA (principes), contrastes, préférences utilisateur
  5. Compatibilité : polyfills (notions), progressive enhancement
  6. Mise en application encadrée : optimiser une page (perf + a11y + sécurité)
Module 9 — Approche moderne : composants et intégration à un framework (optionnel)
  1. Logique composant : props/état, découpage UI, réutilisation
  2. Patterns : state lifting, events, rendering conditionnel
  3. Interop : intégrer dans un site existant, progressive adoption
  4. Notions de TypeScript : typage utile, erreurs évitées (aperçu)
  5. Bonnes pratiques de documentation : README, exemples, conventions
  6. Mise en application encadrée : transformer une fonctionnalité DOM en “composants” simples

Évaluation & Suivi des Acquis

Feuille de Présence

Émargement des stagiaires en présentiel ou à distance, via support papier ou signature électronique.

Émargement sécurisé

Signatures électroniques collectées en ligne et conservées dans un coffre-fort numérique sécurisé par Dendreo.

Auto-positionnement

Évaluation du niveau des stagiaires en début et en fin de formation pour mesurer la progression.

Évaluations pédagogiques

Validation des acquis par des questions orales ou écrites tout au long de la formation.

Mises en situation

Exercices pratiques et cas concrets pour ancrer les compétences dans la réalité métier.

Attestation de fin de formation

Remise d’une attestation officielle à l’issue de la formation.

William

William

Répond généralement en moins de 5 minutes

I will be back soon

William
C’est William, votre conseiller pédagogique chez Mill-Forma.
Comment puis-je vous aider ?
WhatsApp Mill Forma