Formation JavaScript

JavaScript

JavaScript est le langage qui rend les pages web interactives : menus qui s'ouvrent, formulaires qui vérifient la saisie, contenus qui se mettent à jour sans recharger la page. Cette formation s'adresse à celles et ceux qui savent déjà créer une page web (HTML et CSS) et souhaitent la rendre vivante. Pas à pas, vous apprenez le langage dans sa version actuelle, à réagir aux actions des visiteurs, à modifier la page et à échanger avec un serveur, jusqu'à la réalisation d'une petite application complète. Programme personnalisable selon vos besoins.

Informations pratiques

  • Programme de formation

    Personnalisation:
    Le programme peut être modifié en fonction de vos besoins et de vos objectifs sur le contenu, la durée, les modalités, les moyens pédagogiques et techniques.

     Découvrir JavaScript et préparer son poste de travail Jour 1 - matin

    • À quoi sert JavaScript : rendre une page web vivante, exemples concrets
    • Le rôle de chaque langage : HTML (le contenu), CSS (l'apparence), JavaScript (le comportement)
    • Installer son environnement de travail : Visual Studio Code et outils de développement du navigateur (console)
    • Insérer un script dans une page
      • Fichier externe et balise script
      • Charger le script au bon moment : attribut defer
    • Écrire son premier programme : afficher un message (console.log) et commenter son code

    Les bases du langage Jour 1 - matin

    • Variables et constantes : let et const (et pourquoi éviter var)
    • Les types de données : texte, nombre, vrai / faux, null et undefined
    • Convertir un type en un autre (texte vers nombre, par exemple)
    • Les opérateurs de calcul, de comparaison (=== plutôt que ==) et les opérateurs logiques
    • Les chaînes de caractères : gabarits de texte (backticks et ${}), longueur, majuscules, recherche, remplacement, découpage

    Les conditions et les boucles Jour 1 - après-midi

    • if, else if, else
    • switch
    • Simplifier ses conditions : opérateur ternaire, opérateur ?? et chaînage optionnel ?.
    • Les boucles for, while et do while
    • break et continue
    • La boucle for...of

    Les fonctions Jour 1 - après-midi

    • Déclarer et appeler une fonction : paramètres et valeur retournée
    • Les fonctions fléchées
    • Valeurs par défaut et nombre variable de paramètres (...)
    • Portée des variables : bloc, fonction et globale
    • Les fonctions de rappel (callback) : passer une fonction en paramètre
    • Les fonctions natives utiles : calculs (Math), nombres aléatoires et dates (Date)

    Comprendre et corriger les erreurs Jour 1 - après-midi

    • Les différents types d'erreurs : syntaxe, exécution et logique
    • Lire un message d'erreur dans la console et retrouver la ligne concernée
    • Déboguer avec les outils du navigateur : points d'arrêt et exécution pas à pas
    • Gérer les erreurs prévisibles : try, catch et throw

    Les tableaux Jour 2 - matin

    • Créer un tableau, lire et modifier une valeur
    • Ajouter et retirer des éléments : push, pop, shift, unshift et splice
    • Parcourir un tableau : for, for...of et forEach
    • Transformer et rechercher avec les méthodes modernes
      • map et filter
      • find et includes
      • reduce (calculer un total)
    • Trier un tableau : sort
    • Copier et fusionner avec l'opérateur de décomposition (spread) et extraire des valeurs (destructuration)
    • Les tableaux à plusieurs dimensions (exemple : liste de produits)

    Les objets et le format JSON Jour 2 - matin

    • Créer un objet : propriétés et méthodes
    • Lire, ajouter et supprimer des propriétés ; le mot-clé this
    • Copier un objet et extraire ses propriétés (spread et destructuration)
    • Parcourir un objet : Object.keys, Object.values et Object.entries
    • Les objets natifs : String, Math, Date et Array
    • Le format JSON : JSON.stringify et JSON.parse
    • Manipuler une liste d'objets : filtrer, trier et calculer

    Manipuler la page web : le DOM Jour 2 - après-midi

    • Qu'est-ce que le DOM : l'arbre des éléments de la page
    • Sélectionner des éléments : getElementById, querySelector et querySelectorAll
    • Lire et modifier un contenu : textContent et innerHTML (précautions d'emploi)
    • Modifier les attributs, les classes CSS (classList) et le style d'un élément
    • Créer, insérer, déplacer et supprimer des éléments : createElement, append et remove
    • Afficher, masquer et déplacer des éléments

    Réagir aux actions de l'utilisateur : les événements Jour 2 - après-midi

    • Écouter un événement : addEventListener
    • Les événements courants : click, input, change, submit, keydown, mouseover, focus et blur
    • L'objet événement : élément ciblé, touche pressée, annuler le comportement par défaut (preventDefault)
    • Propagation des événements et délégation d'événements
    • Attendre le chargement de la page : DOMContentLoaded
    • Déclencher une action avec le temps : setTimeout et setInterval

    Formulaires et validation des saisies Jour 3 - matin

    • Lire les valeurs d'un formulaire : champs texte, cases à cocher, boutons radio et listes
    • Contrôler les données avant l'envoi : champ obligatoire, adresse e-mail, nombre, longueur
    • La validation native du navigateur (required, pattern) et son API
    • Les expressions régulières simples (code postal, numéro de téléphone)
    • Afficher les messages d'erreur à côté des champs et conserver la saisie
    • Rappel : toujours revérifier les données côté serveur

    Mémoriser des informations dans le navigateur Jour 3 - matin

    • localStorage et sessionStorage : enregistrer, lire et supprimer une valeur
    • Stocker des listes et des objets grâce au JSON
    • Les cookies : principe, usages et limites (RGPD et consentement)
    • Mise en pratique : mémoriser le thème clair / sombre choisi par le visiteur

    Organiser son code : classes et modules Jour 3 - matin

    • Les classes
      • class, constructor et méthodes
      • L'héritage avec extends
    • Les modules ES
      • export et import
      • Charger un module dans une page (type="module")
    • Découper son code en fichiers réutilisables
    • Conventions de nommage et de structure

    Communiquer avec un serveur : l'asynchrone Jour 3 - après-midi

    • Comprendre l'asynchrone : pourquoi une page ne doit pas se figer pendant une attente
    • Les promesses (Promise) : then et catch
    • async et await : écrire du code asynchrone lisible
    • Envoyer une requête avec fetch
      • Méthodes GET et POST, envoi de données en JSON
      • Lire la réponse : statut, contenu JSON et gestion des erreurs
    • Interroger une API publique et afficher le résultat dans la page
    • CORS : comprendre les blocages entre sites
    • XMLHttpRequest : le principe historique d'Ajax, pour comprendre du code existant

    Sécurité, qualité et bonnes pratiques Jour 3 - après-midi

    • Se protéger des failles XSS : privilégier textContent à innerHTML et ne jamais faire confiance aux données reçues
    • Ne pas exposer d'informations sensibles dans un script visible par tous
    • Contrôler la qualité de son code : ESLint et mise en forme automatique (Prettier)
    • Soigner les performances : chargement des scripts (defer, async) et limitation des manipulations du DOM
    • Utiliser un assistant IA pour comprendre, relire ou corriger du code : intérêts et limites
    • Aller plus loin : panorama des bibliothèques et frameworks (jQuery, React, Vue), TypeScript et Node.js

    Mise en pratique : une petite application complète Jour 3 - après-midi

    • Réaliser une liste de tâches : ajouter, cocher, filtrer et supprimer
    • Sauvegarder la liste dans le navigateur (localStorage)
    • Afficher des données récupérées depuis une API (fetch)
    • Questions / réponses et synthèse de la formation

    Formation ajoutée le 24/06/2014, mise à jour le 19/10/2026

  • Pour qui ?

    Prérequis

    Connaissance du HTML et du CSS (création d'une page web simple) et de l'environnement Windows, Mac ou Linux. La pratique d'un langage de programmation est un plus, mais n'est pas nécessaire.

    Public

    Webmasters, intégrateurs, développeurs front-end débutants, futurs concepteurs de sites web et autodidactes souhaitant rendre leurs pages interactives avec JavaScript.

  • Objectifs, moyens, modalités, sanction, adaptation PSH

    Objectifs :

    Maîtriser la syntaxe duJavaScript, manipuler la structure DOM d'une page HTML, programmer en événementiel, interagir avec le CSS, communiquer avec un serveur sans recharger la page à  l'aide d'Ajax

    Moyens pédagogiques :

    Un PC par personne, le formateur diffuse son écran sur un vidéo-projecteur ou télévision grand écran
    Un groupe de maximum 5 personnes en inter-entreprise.
    En distanciel : Utilisation de Zoom ou Teams avec partage d'écran, chat, audio et vidéo en temps réel.
    Exposé théorique, suivi d'une mise en pratique.

    Moyens pour suivre l’exécution de l’action :

    • La présence du stagiaire est vérifiée par le formateur à l'aide d'une feuille de présence signée par demi-journées

    Moyens pour en apprécier les résultats :

    • A la fin de la formation, le stagiaire complète une évaluation à chaud (Permettant d'évaluer la qualité de la prestation)
    • Puis, il complète avec le formateur une évaluation des acquis (Permettant de déterminer les points acquis, non acquis ou en cours d'acquisition)
    • Quelques mois après la formation, le donneur d'ordre complète une évaluation à froid (Permettant de s'assurer que la formation a pu être mise en pratique)

    Sanction de la formation :

    • A la fin de la formation le stagiaire reçoit une attestation de formation reprenant l’intitulé de la formation, les dates et le nombre d’heures réalisées.

    Délai d'accès :

    En intra-entreprise : En fonction de vos disponibilités et celles de nos formateurs.
    En inter-entreprise : En fonction des sessions que nous avons programmé, consultable en cliquant ici

    Profil formateur :

    Formateurs passionnés et expérimentés intervenant en milieu professionnel en tant qu'intégrateur et développeur.

    Adaptation aux personnes en situation de handicap :

    Nous nous engageons à favoriser l’accessibilité du public en situation de handicap, en fonction de leurs besoins et/ou difficultés, en adaptant :
    - La durée de la formation
    - Le programme et son déroulement
    - Les moyens pédagogiques et techniques
    - Les supports pédagogiques

    Ces formations adaptées sont proposées en individuel ou collectif (Pour public à besoins similaires).
    Afin de trouver la meilleure solution, nous nous appuyons de partenaires, évoluant dans le domaine du handicap.

    Personne à contacter / personne en charge de l'accueil et de l'accès des personnes en situation de handicap :

    Lambert Christophe
    03 59 25 10 15
    [email protected]

  • Evaluation, avis ...

    Evaluation : Aucune note pour cette formation entre 2024 et 2026 .

  • Comment financer ma formation ?

    Vous ne savez pas comment financer votre formation ?. Vous êtes salarié, travailleur non salarié (TNS), commerçant, artisan, profession libérale. Suivez le guide...

    Trouver mon financement

A partir de 1125 €
Obtenir un devis
  • Référence : F83
  • Nb de jours : 3
  • Nb d'heures : 21
  • Eligible au CPF : Non
  • En présentiel : Oui
  • A distance : En savoir +

Tarif 2026

INTER-ENTREPRISE:
> Prochaines dates

1125€ HT

INTRA-ENTREPRISE:
+ 300€ HT par pers supplémentaire.

1200€ HT

Certification qualité

Certification Qualiopi

Recrutement de formateurs

Recrutement formateurs

Nous recherchons en permanence de nouveaux talents.

Postuler en ligne