Formation JavaScript

Programme de notre formation JavaScript

[Jour 1 – Matin]

Découvrir JavaScript, son environnement et les bases du langage

• Comprendre le rôle de JavaScript et l’évolution du langage avec ECMAScript
• Distinguer les environnements d’exécution : navigateur et Node.js
• Préparer les outils de développement : VS Code, Live Server et Chrome DevTools
• Intégrer JavaScript dans une page avec la balise script et comprendre les attributs defer, async, type= »module », integrity et crossorigin
• Déclarer des variables avec let et const, comprendre les différences avec var et appliquer les conventions de nommage camelCase
• Identifier les sept types primitifs : string, number, boolean, null, undefined, symbol et bigint
• Utiliser les opérateurs arithmétiques et les conversions avec parseInt, parseFloat, toString et isNaN
• Comparer des valeurs avec === et !==, utiliser les opérateurs logiques et comprendre les valeurs truthy et falsy
• Écrire des conditions avec if/else, l’opérateur ternaire et switch
• Atelier pratique : préparer l’environnement de développement et réaliser des exercices sur les variables, les types, les conversions et les conditions.

[Jour 1 – Après-midi]

Écrire des fonctions et comprendre la portée des variables

• Déclarer des fonctions classiques et des fonctions fléchées
• Définir les paramètres et les valeurs de retour
• Comprendre la portée des variables au niveau du bloc et de la fonction
• Simplifier les traitements avec le principe du retour anticipé, ou early return
• Atelier pratique : écrire les premières fonctions de manipulation des tâches et vérifier leurs paramètres, leurs résultats et la portée des variables.

Modéliser les données et manipuler les chaînes de caractères

• Créer des tableaux, accéder aux éléments par leur index et utiliser la propriété length
• Modifier les tableaux avec push, pop, shift, unshift, splice et reverse
• Créer des objets littéraux, accéder à leurs propriétés et organiser des tableaux d’objets
• Utiliser la déstructuration et l’opérateur spread pour extraire et copier des données
• Distinguer les copies superficielles et le clonage profond avec structuredClone, selon les types de données pris en charge
• Construire des chaînes avec les template literals
• Manipuler les chaînes avec includes, replaceAll, split, join, trim, slice et padStart
• Atelier pratique : modéliser les données de la Todo List et tester dans la console les opérations de création, de lecture, de modification et de suppression des tâches.

[Jour 2 – Matin]

Parcourir, rechercher et transformer les données

• Écrire des boucles avec for, while et for…of
• Contrôler le déroulement des boucles avec break et continue
• Parcourir un tableau avec forEach et transformer les données avec map et filter
• Trier un tableau sans modifier l’ordre du tableau d’origine avec toSorted
• Rechercher et vérifier des éléments avec find, includes, some et every
• Produire un résultat agrégé avec reduce
• Chaîner les méthodes et isoler les fonctions de callback pour améliorer la lisibilité
• Identifier les opérations qui modifient les données et celles qui créent un nouveau tableau
• Atelier pratique : filtrer, trier et transformer les tâches de la Todo List sans modifier les données d’origine.

[Jour 2 – Après-midi]

Découvrir les classes et sauvegarder les données localement

• Comprendre l’instanciation avec new Date et new URL, et découvrir le rôle des prototypes
• Définir une classe avec un constructeur, des propriétés et des méthodes d’instance
• Utiliser le mot-clé this dans les méthodes d’une classe
• Conserver des données dans le navigateur avec localStorage
• Utiliser setItem, getItem, removeItem et comprendre la portée de clear sur le stockage de l’origine
• Sérialiser et désérialiser les données avec JSON.stringify et JSON.parse
• Traiter les erreurs de lecture et de conversion avec try…catch
• Atelier pratique : manipuler une classe simple, puis sauvegarder et restaurer l’état de la Todo List dans localStorage.

Construire l’affichage dynamique avec le DOM

• Comprendre l’arbre DOM, le document et les nœuds
• Sélectionner les éléments avec querySelector et querySelectorAll
• Distinguer textContent et innerHTML et comprendre les risques XSS liés à l’insertion de contenu non fiable
• Lire et modifier les attributs avec getAttribute et setAttribute
• Utiliser dataset pour les métadonnées et classList pour les classes CSS
• Créer, insérer et supprimer des éléments avec createElement, append, prepend et remove
• Atelier pratique : générer l’affichage de la Todo List dans le DOM et le synchroniser avec les données sauvegardées dans localStorage.

[Jour 3 – Matin]

Utiliser les collections, les dates et les opérateurs modernes

• Gérer des valeurs uniques avec Set, ses méthodes add, has et delete, et sa propriété size
• Supprimer les doublons d’un tableau à l’aide d’un Set
• Associer des clés à des valeurs avec Map et utiliser set, get et delete
• Comparer les usages de Map et des tableaux pour la recherche de données
• Manipuler les dates et les timestamps avec Date, Date.now et getTime
• Extraire les composantes d’une date et calculer des durées
• Formater les dates avec toLocaleDateString et Intl.DateTimeFormat
• Utiliser le chaînage optionnel avec ?. et la coalescence des valeurs nulles avec ??
• Atelier pratique : gérer les tags uniques des tâches, manipuler leurs dates d’échéance et afficher les dates dans un format adapté à l’utilisateur.

[Jour 3 – Après-midi]

Gérer les événements et les formulaires

• Écouter les événements click, input, submit et change avec addEventListener
• Distinguer les propriétés target et currentTarget de l’objet Event
• Annuler le comportement par défaut avec preventDefault et arrêter la propagation avec stopPropagation
• Lire et valider les champs avec value, checked, selectedOptions et valueAsDate
• Comprendre la propagation des événements et mettre en place une délégation avec event.target.closest()
• Atelier pratique : ajouter les tâches depuis un formulaire, modifier leur statut et gérer leur suppression par délégation d’événements.

Finaliser l’application avec les modules et les appels API

• Distinguer la mise en page responsive avec les media queries CSS des comportements pilotés en JavaScript
• Adapter les interactions avec classList.toggle et window.matchMedia
• Structurer le code en modules ES avec import et export
• Comprendre les promesses et utiliser la syntaxe async/await
• Effectuer une requête HTTP avec fetch et exploiter une réponse JSON
• Vérifier le statut de la réponse et gérer les erreurs réseau et HTTP
• Atelier final : finaliser la Todo List avec un menu responsive, organiser le code en modules et charger un jeu de données depuis une API.