JavaScript est le langage incontournable du développement Web, présent côté client comme côté serveur. Cette formation de 3 jours vous donne des bases solides en JavaScript moderne — const, let, arrow functions, optional chaining — manipulation du DOM, gestion des événements, validation native de formulaires et appels asynchrones avec fetch et async/await. Vous apprendrez aussi à adapter dynamiquement vos interfaces avec window.matchMedia, à persister des données avec localStorage, à situer les évolutions du langage de ES2015 à ES2025 et à utiliser un assistant IA de manière critique pour apprendre et coder.

Public visé

Développeurs, architectes ou chefs de projets techniques.

Prérequis

Avoir suivi cette formation, ou en maîtriser les thèmes abordés :

Initiation à la programmation

Objectifs pédagogiques

À l’issue de cette formation, vous serez capable de :

Mémoriser les bases du JavaScript moderne et son utilisation pour le DOM
Gérer les événements et les manipulations dynamiques
Identifier les bonnes pratiques de programmation JavaScript
Réaliser des appels asynchrones avec fetch et async/await
Valider des formulaires avec la Constraint Validation API
Adapter une interface au support avec window.matchMedia
Situer JavaScript dans son écosystème — ES2015 → ES2025 et outils
Utiliser un assistant IA de manière critique pour apprendre et coder en JavaScript

Programme

Jour 1 - Matin

Le langage et son environnement

Découvrir JavaScript et son écosystème

situer le langage — ECMAScript, navigateurs et serveurs avec Node.js
comprendre les versions de ES2015 à ES2025
distinguer JavaScript du HTML et du CSS, et leurs rôles respectifs

Travaux pratiques :

Explorer un site existant et identifier les rôles de HTML, CSS et JavaScript

Outils du développeur Web

mettre en place un environnement avec VS Code et extensions utiles
exécuter un script localement avec Live Server
inspecter une page avec les DevTools du navigateur — Console, Sources, Network
versionner ses sources avec Git

Travaux pratiques :

Créer un mini-projet versionné, le servir via Live Server et inspecter la console

Intégrer JavaScript dans une page

charger un script — <script> avec defer, async, type="module"
choisir où placer le script et pourquoi
afficher des messages dans la console

Travaux pratiques :

Intégrer un script via différentes méthodes et observer les différences

Jour 1 - Après-midi

Bases du langage moderne

Variables et types

déclarer avec const et let, comprendre la portée de bloc
positionner var en mention historique
manipuler les types primitifs
structurer avec object et array
afficher et inspecter avec typeof

Travaux pratiques :

Déclarer plusieurs variables typées et observer leur comportement avec typeof

Opérateurs et expressions

effectuer des opérations arithmétiques, logiques et relationnelles
composer des chaînes avec template literals
distinguer == et === et leurs pièges de coercion
exploiter les opérateurs modernes — optional chaining ?., nullish coalescing ??

Travaux pratiques :

Écrire une mini-calculatrice et tracer les conversions implicites du typage faible

Structures de contrôle

ramifier avec if / else et l’opérateur ternaire
choisir entre switch et if/else
itérer avec for, for…of et while
contrôler le flux avec break, continue et return

Travaux pratiques :

Écrire un programme qui filtre une liste de valeurs avec différentes structures de contrôle

Fonctions

déclarer une fonction classique vs une fonction fléchée
comprendre les paramètres avec valeurs par défaut, rest et spread
comprendre la portée et la capture, en abordant les closures à un premier niveau
positionner this dans les méthodes et les arrow functions

Travaux pratiques :

Écrire des fonctions utilitaires telles que somme, moyenne et max en classique puis en arrow et comparer

Jour 2 - Matin

DOM et événements

Le Document Object Model

comprendre l’arborescence DOM et son lien avec le HTML
sélectionner des éléments avec querySelector et querySelectorAll
parcourir l’arbre

Travaux pratiques :

Auditer la structure d’une page existante via les DevTools puis la reconstituer en JavaScript

Modifier le contenu et les styles

modifier le texte avec textContent
modifier le HTML interne avec innerHTML et comprendre ses risques XSS
créer, insérer et supprimer des éléments
manipuler les attributs et les classes via classList

Travaux pratiques :

Construire dynamiquement une liste d’articles à partir d’un tableau de données

Manipuler les styles

accéder aux styles inline et calculés
préférer les classes aux styles inline avec classList.toggle
appliquer des custom properties depuis JavaScript

Travaux pratiques :

Implémenter un changement de thème clair/sombre basé sur classList et custom properties

Gérer les événements

attacher un gestionnaire avec addEventListener
comprendre l’objet event et ses méthodes preventDefault et stopPropagation
exploiter la délégation d’événements pour un menu dynamique
distinguer capture et bubbling

Travaux pratiques :

Ajouter à une liste dynamique la suppression d’un élément par clic via délégation

Jour 2 - Après-midi

Formulaires et validation

Manipuler un formulaire

accéder aux éléments avec querySelector et FormData
récupérer et modifier les valeurs des champs
réagir aux événements input, change et submit
empêcher l’envoi par défaut avec preventDefault

Travaux pratiques :

Récupérer en temps réel les saisies d’un formulaire et les afficher dans la page

Validation native — Constraint Validation API

valider avec les attributs natifs
styliser les états — :user-valid, :user-invalid, :focus-visible
piloter la validation en JavaScript via setCustomValidity

Travaux pratiques :

Construire un formulaire d’inscription validé natif puis enrichi en JavaScript pour des règles métier

Validation côté code

compléter par des contrôles JavaScript pour les règles métier
afficher des messages d’erreur clairs et accessibles
empêcher la soumission tant que les contraintes ne sont pas satisfaites

Travaux pratiques :

Ajouter une vérification de cohérence entre deux champs, mot de passe et confirmation

Jour 3 - Matin

Asynchrone moderne

Comprendre l’asynchronisme

distinguer synchrone et asynchrone, comprendre l’event loop à un premier niveau
repérer les sources d’asynchronisme
comprendre les anti-patterns du callback hell

Travaux pratiques :

Comparer un setTimeout avec un appel synchrone et observer l’ordre d’exécution

Promises

comprendre une Promise et ses états
chaîner avec .then et .catch
composer avec Promise.all et Promise.allSettled

Travaux pratiques :

Enchaîner deux Promises avec then et capturer les erreurs avec catch

async / await

déclarer une fonction async
attendre une Promise avec await
gérer les erreurs avec try / catch / finally

Travaux pratiques :

Refondre une chaîne .then en async/await en préservant la lisibilité

fetch et JSON

effectuer une requête avec fetch en GET et POST
traiter une réponse JSON ou texte
gérer les statuts HTTP et les erreurs réseau
positionner XMLHttpRequest comme historique

Travaux pratiques :

Récupérer des données d’une API publique en JSON et les afficher dans le DOM

Jour 3 - Après-midi

APIs utiles, panorama et IA

APIs Web utiles

conserver des données entre pages avec localStorage et sessionStorage
réagir au support avec window.matchMedia
déclencher une action différée avec setTimeout et requestAnimationFrame

Travaux pratiques :

Sauvegarder les préférences utilisateur de thème clair/sombre dans localStorage et adapter au support avec matchMedia

Panorama des évolutions ES2015 → ES2025

récapituler les apports majeurs d’ES2015 — let/const, arrow, modules et classes
repérer les apports utiles au quotidien — async/await apparu en ES2017, optional chaining en ES2020 et private fields en ES2022
découvrir les nouveautés récentes — Object.groupBy arrivé en ES2024 et iterator helpers en ES2025

Travaux pratiques :

Intégrer trois apports modernes dans le projet réalisé pendant la formation

JavaScript et IA

situer les assistants disponibles — ChatGPT, Claude, Copilot, Gemini, modèles locaux
formuler des prompts efficaces pour apprendre et coder en JavaScript
repérer les pièges spécifiques — APIs hallucinées, syntaxe ancienne avec var ou jQuery, exemples obsolètes
vérifier systématiquement le code généré — exécution dans la console, lecture MDN, tests manuels

Travaux pratiques :

Faire générer une fonction de manipulation du DOM par un assistant IA, la tester dans le navigateur, identifier et corriger les défauts

Pour aller plus loin — ouverture

positionner TypeScript comme couche de typage progressif
découvrir les outils modernes — Vite, ESLint, Prettier
situer les frameworks React, Vue et Svelte sans les détailler
orienter vers la suite — JavaScript Avancé, Node.js, frameworks

Travaux pratiques :

Projet final : finaliser un mini-projet de compteur de tâches avec persistance locale, fetch et validation, avec relecture assistée par IA et application des bonnes pratiques

Modalités d’évaluation des acquis

En cours de formation, par des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.

Voir aussi

Vous serez peut-être intéressés par les formations suivantes :

Formation DEV-JS-100 — JavaScript - Les fondamentaux. Domaine : Développement. Niveau : Initiation. Durée : 3 jours (21 heures). Mots-clés : javascript, dom, evenements, fetch, async await, constraint validation, localstorage, matchmedia, es2025, ia, développement, initiation. Cylian Formation, Dijon.