Développement IT
Formation Javascript
Développer des interfaces web dynamiques et des services front modernes en JavaScript, des bases du langage aux bonnes pratiques et à l’outillage.
Format
Intra-entreprise
Durée recommandée
≈ 21 à 35 heures
Démarrage
Sous 15 jours
Sur-mesure
Programme co-construit avec le formateur
Mis à jour le
Pour qui ?
- ›Développeurs débutants, intégrateurs web ou personnes en reconversion souhaitant apprendre JavaScript pour le navigateur.
- ›Développeurs front-end souhaitant consolider leurs fondamentaux et adopter des pratiques modernes (ES6+, modules, asynchronisme).
- ›Développeurs full-stack amenés à manipuler le DOM, des APIs et des flux de données côté client (et notions Node.js selon contexte).
Prérequis
- ›Connaissances de base en HTML/CSS et logique de programmation recommandées. Un éditeur de code et un navigateur moderne sont nécessaires.
Objectifs pédagogiques
- ›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.
Programme détaillé
9 modules, construits autour de vos cas réels.
Durée recommandée ≈ 21 à 35 heures, modulable selon le rythme du groupe et vos contraintes intra-entreprise.
01Fondations du langage et environnement de travail
Chapitres- Comprendre le rôle de JavaScript dans le navigateur, le moteur d'exécution et le cycle de rendu d'une page
- Configurer un environnement de travail avec un éditeur de code, la console et les DevTools du navigateur
- Maîtriser la syntaxe de base : déclaration de variables avec let et const, types primitifs, opérateurs, conditions et boucles
- Écrire des fonctions : déclarations, expressions, arrow functions, paramètres par défaut et paramètres rest
- Identifier les règles de portée (scope), le hoisting et la différence entre valeurs par copie et par référence
- Écrire des fonctions utilitaires et vérifier leur comportement directement en console
02Objets, tableaux et manipulation de données
Chapitres- Manipuler des objets : propriétés, méthodes, destructuring, opérateur spread et distinction copie ou référence
- Exploiter les tableaux avec map, filter, reduce, ainsi que les opérations de recherche et de tri
- Maîtriser les méthodes utiles sur les chaînes de caractères et les dates, avec gestion du formatage des locales
- Identifier les pièges des comparaisons et de l'égalité : null, undefined, valeurs truthy et falsy
- Gérer les erreurs avec try, catch, finally et créer des erreurs personnalisées porteuses de messages clairs
- Transformer un jeu de données réel et produire un rendu simple à l'écran
03Le DOM : sélection, création et mise à jour de l'interface
Chapitres- Comprendre la structure du DOM et le coût des opérations qui déclenchent reflow et repaint
- Sélectionner des éléments avec querySelector, naviguer dans les relations parent-enfant et exploiter dataset et classes
- Créer et modifier des éléments avec createElement, les templates et les fragments, en mesurant les risques de innerHTML
- Gérer les attributs et les styles : classes CSS, styles inline et variables CSS
- Appliquer les principes d'accessibilité : rôles, labels, gestion du focus et navigation au clavier
04Événements et interactions utilisateur
Chapitres- Mettre en place des écouteurs avec addEventListener et comprendre la propagation, la capture et stopPropagation
- Maîtriser la délégation d'événements pour gérer proprement des listes d'éléments dynamiques
- Traiter les formulaires : validation des champs, affichage des messages d'erreur et prévention de la soumission
- Synchroniser l'interface et les données avec des patterns de gestion d'état légers
- Implémenter des interactions avancées : glisser-déposer, gestion du clavier et raccourcis
- Construire un formulaire interactif intégrant plusieurs règles de validation
05Asynchronisme et communication réseau
Chapitres- Comprendre le modèle asynchrone : event loop, callbacks et promesses
- Maîtriser les promesses avec then, catch, finally, le chaînage et les méthodes Promise.all et Promise.allSettled
- Écrire du code asynchrone lisible avec async et await, en gérant correctement les erreurs et l'annulation
- Consommer une API HTTP avec fetch : requêtes GET et POST, headers, traitement du JSON et timeouts
- Gérer les états de l'interface : chargement, succès, erreur, relance et mode hors-ligne
- Consommer une API et afficher un résultat paginé à l'écran
06Modules, outillage et structuration de projet
Chapitres- Organiser le code avec les ES Modules : import, export et encapsulation des responsabilités par fichier
- Gérer les dépendances avec npm : installation, scripts, versioning et vérification de sécurité
- Configurer un bundler et un serveur de développement comme Vite ou Webpack pour produire un build
- Mettre en place ESLint et Prettier, des conventions de code et un processus de revue
- Gérer la configuration applicative et les variables d'environnement selon le contexte d'exécution
07Débogage, tests et qualité de code
Chapitres- Exploiter les DevTools : points d'arrêt, inspection des variables, onglet réseau, performance et mémoire
- Mettre en place un logging utile avec des niveaux pertinents, sans noyer l'information sous le bruit
- Écrire des tests unitaires de base avec Jest ou Vitest sur des fonctions pures et leurs cas limites
- Gérer les erreurs en production : messages, interface de repli et surveillance
- Refactorer le code pour réduire la complexité, améliorer le nommage et appliquer un principe DRY maîtrisé
- Écrire des tests sur des fonctions métier simples et vérifier leur couverture
08Sécurité, performance et accessibilité côté client
Chapitres- Identifier les failles XSS et les injections via le DOM, et appliquer les règles d'échappement adaptées
- Stocker des données côté client avec localStorage, sessionStorage et cookies, en protégeant les données sensibles
- Optimiser la performance avec debounce, throttle, lazy loading, allègement du DOM et mise en cache
- Gérer le focus, appliquer les attributs ARIA, vérifier les contrastes et respecter les préférences utilisateur
- Assurer la compatibilité des navigateurs avec les polyfills et l'amélioration progressive
09Approche composant et intégration à un framework
Chapitres- Structurer une logique de composant : props, état interne, découpage de l'interface et réutilisation
- Appliquer les patterns courants : remontée d'état, gestion des événements et rendu conditionnel
- Intégrer du code dans un site existant selon une démarche d'adoption progressive
- Découvrir TypeScript : typage utile et erreurs évitées dès la phase de développement
- Documenter le code avec un README, des exemples d'usage et des conventions partagées
- Transformer une fonctionnalité DOM existante en composants réutilisables
Moyens & supports pédagogiques
- Accueil des stagiaires
- Supports de formation projets
- Apports théoriques et pratiques
- Études de cas concrets
- Auto-positionnement
- Accès en ligne aux ressources
É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.
Délai d’accès
Sous 15 jours après validation du devis
Accessibilité PSH
Adaptations possibles en situation de handicap. En savoir plus
Prochaine étape
Construire votre formation Javascript
Un échange de 20 minutes suffit pour cadrer vos enjeux et la session. Devis personnalisé sous 48h, démarrage sous 15 jours.
- Réponse sous 24h ouvrées
- 01 85 71 00 29
Pour aller plus loin
