JavaScript fondamentaux : le langage du web
Maîtriser les bases de JavaScript pour créer des pages web interactives. Variables, fonctions, DOM, événements : tout ce qu'il faut pour prendre en main le langage du web.
Dernière mise à jour le 28/03/2026
Public visé
- Développeurs débutants souhaitant acquérir les bases du JavaScript
- Intégrateurs HTML/CSS voulant ajouter de l'interactivité à leurs interfaces
- Personnes en reconversion vers le développement web front-end
- Toute personne ayant des notions de HTML/CSS et souhaitant progresser vers le développement
Objectifs pédagogiques
- Comprendre la syntaxe JavaScript ES6+ et ses fondamentaux
- Manipuler le DOM pour modifier dynamiquement une page web
- Gérer les événements utilisateur (clics, formulaires, clavier)
- Effectuer des requêtes asynchrones vers une API avec Fetch et les promesses
- Déboguer une application JavaScript avec les DevTools du navigateur
- Structurer son code avec les modules ES6
Prérequis
- Maîtrise des bases de HTML et CSS (niveau formation FND-HTM recommandée)
- Savoir utiliser un éditeur de code (VS Code ou équivalent)
- Aucune connaissance préalable en programmation requise
Programme détaillé
- Déclarer et nommer des variables : bonnes pratiques
- Les types de données : texte, nombre, booléen, valeur vide
- La portée des variables : quand une variable est-elle accessible ?
- Construire des chaînes de texte dynamiques
Opérateurs, conditions et boucles (1h30)
- Comparer des valeurs et combiner des conditions
- Prendre des décisions dans le code : si / sinon, cas multiples
- Répéter des actions : boucles classiques et boucles sur des collections
- Interrompre ou sauter une itération
Fonctions (1h)
- Définir une fonction et lui passer des paramètres
- La syntaxe moderne des fonctions fléchées
- Valeurs par défaut et paramètres multiples
- Retourner un résultat depuis une fonction
Tableaux et objets (1h)
- Créer et manipuler des listes de données
- Filtrer, transformer et rechercher dans une liste
- Structurer des données complexes avec les objets
- Fusionner et copier des tableaux et objets
Exercice pratique (30min)
- Manipulation d'un catalogue de produits : filtrage, transformation et affichage
Module 2 – Le DOM (2h)
- Qu'est-ce que le DOM ? Le lien entre HTML et JavaScript
- Trouver un élément dans la page
- Naviguer dans la structure d'une page
Modification du contenu et des styles (1h)
- Modifier le texte et le contenu d'un élément
- Changer les attributs d'un élément
- Ajouter, supprimer ou basculer une classe CSS
- Modifier l'apparence d'un élément depuis le code
Jour 2 (7h) – DOM avancé, événements et introduction à l'asynchrone
- Créer un nouvel élément et l'insérer dans la page
- Supprimer ou déplacer un élément existant
- Dupliquer un élément
- Cas pratique : générer dynamiquement une liste de cartes depuis des données
Événements et interactions utilisateur (2h30)
- Réagir à une action utilisateur : clic, frappe clavier, soumission de formulaire
- Accéder aux informations de l'événement déclenché
- Empêcher le comportement par défaut du navigateur
- Gérer des éléments ajoutés dynamiquement
- Cas pratique : formulaire interactif avec validation en temps réel
Module 3 – L'asynchrone (3h)
- Pourquoi certaines opérations prennent du temps ?
- Exécuter du code après qu'une action soit terminée
- Enchaîner des opérations asynchrones proprement
- Gérer les succès et les erreurs
La syntaxe moderne de l'asynchrone (1h30)
- Écrire du code asynchrone qui ressemble à du code synchrone
- Gérer les erreurs de manière élégante
- Lancer plusieurs opérations en parallèle
- Cas pratique : simulation d'appels distants avec des délais
Jour 3 (7h) – Communication avec les APIs, modules et mini-projet
- Envoyer une requête à un serveur et récupérer la réponse
- Lire et afficher des données reçues dans la page
- Gérer les erreurs réseau et les réponses inattendues
Envoyer des données vers un serveur (1h)
- Soumettre des données à une API
- Formater correctement les données avant envoi
- Gérer les différents types de réponse du serveur
- Cas pratique : soumission d'un formulaire vers une API
Module 4 – Organisation du code et bonnes pratiques (3h)
- Pourquoi séparer son code en fichiers ?
- Exporter et importer des fonctions entre fichiers
- Organiser un projet de façon lisible et maintenable
Structure d'un projet front-end (1h)
- Arborescence recommandée d'un projet
- Séparer la structure, le style et le comportement
- Conventions de nommage et lisibilité du code
Déboguer une application (1h)
- Inspecter l'état de son application à tout moment
- Mettre en pause l'exécution pour analyser un problème
- Surveiller les échanges réseau entre la page et le serveur
- Identifier et corriger les erreurs les plus fréquentes
Module 5 – Mini-projet fil rouge (2h)
- Cahier des charges : liste de tâches connectée à un serveur
- Fonctionnalités : afficher, ajouter, supprimer et filtrer des tâches
- Organisation du code en modules
- Revue de code collective : lisibilité, gestion des erreurs, structure
- Retour formateur individualisé
Compétences visées
- Écrire du JavaScript moderne (ES6+) : variables, fonctions fléchées, destructuring
- Manipuler le DOM dynamiquement : sélection, création et modification d'éléments
- Gérer des événements et interactions utilisateur
- Consommer une API REST simple en JavaScript asynchrone
- Organiser un projet front-end avec des modules
Modalités et méthodes pédagogiques
Modalités d'évaluation
- En cours de formation : exercices pratiques corrigés à chaque module, études de cas
- En fin de formation : réalisation d'un mini-projet applicatif évalué par le formateur
- Questionnaire d'auto-évaluation des acquis en fin de parcours
Critères d'évaluation
- Capacité à écrire du JavaScript syntaxiquement correct et fonctionnel
- Manipulation autonome du DOM et des événements
- Réalisation d'un appel API et affichage des données reçues
- Structuration et lisibilité du code produit
- Autonomie dans la résolution de problèmes simples
Modalités de validation
Moyens pédagogiques et techniques
- Support de cours numérique mis à disposition des apprenants
- Environnement de développement : VS Code + navigateur Chrome
- Exercices pratiques progressifs pour chaque module
- Accès à un dépôt de ressources et d'exemples de code
- Pour le distanciel : visioconférence (Microsoft Teams), partage d'écran, chat en direct
- Accès à la plateforme pédagogique LaPolaris (supports, ressources, émargement)
Accessibilité aux personnes en situation de handicap
Suivi et accompagnement
- Feuilles d'émargement signées par demi-journée (présentiel) ou émargement numérique (distanciel)
- Traçabilité des activités pédagogiques réalisées
- Attestation d'assiduité délivrée en fin de formation
- Suivi individuel de la progression via les exercices pratiques
Conditions d'accès
Délais d'accès
Autres formations en Fondamentaux
Git et GitHub : gestion de versions pour débutants
Apprenez à versionner votre code, collaborer sur GitHub et travailler en équipe avec Git. Formation essentielle avant tout parcours de développement.
Algorithmique et logique de programmation
Comprendre les bases de la pensée algorithmique avant d'apprendre un langage. Variables, conditions, boucles, fonctions : les fondations de tout développeur.
Python pour débutants : premiers pas en programmation
Découvrez la programmation avec Python, le langage idéal pour les débutants. Syntaxe claire, exercices pratiques, projets concrets.