Formation JavaScript – Niveau 3 : Devenez expert JS et développez des applications robustes

Activités préparatoires

Un test de positionnement : il permet d'évaluer vos compétences en début de formation.

Pour les sessions à distance :

• Une formation de prise en main à notre outil de classe à distance.
• Présentation des ressources pédagogiques qui seront utilisées pendant la formation.

Gérer une comparaison de type avec égalité abstraite

• Différence entre == (abstraite) et === (stricte).
• Comprendre la coercition de type automatique :
  • "5" == 5 → true
  • false == 0 → true
• Quand utiliser (rarement) l’égalité abstraite.
• Exercice pratique : tester des cas piégeux et en tirer des règles de bonnes pratiques.

Maîtriser les opérations arithmétiques sur différents types

• Comment JavaScript gère les types : number, string, boolean, null, undefined.
• Conversions implicites :
  • "10" + 5 → "105" (concaténation).
  • "10" - 5 → 5 (soustraction numérique).
• Exercice pratique : créer une mini-calculatrice qui manipule des chaînes et nombres.

Configurer des décisions conditionnelles dans un workflow avancé

• Revoir les conditions imbriquées (if/else) et les opérateurs logiques.
• Utiliser switch pour des workflows multi-cas.
• Introduction aux bonnes pratiques : découper les conditions complexes en fonctions claires.
• Exercice pratique : coder un système de tarification avec plusieurs critères (âge, rôle utilisateur, abonnement).

Identifier les types associés aux variables à l’exécution

• Comprendre le typage dynamique de JavaScript.
• Utiliser typeof et instanceof pour identifier les types.
• Différences entre primitives (string, number, boolean, etc.) et objets (Array, Date, etc.).
• Exercice pratique : tester les types de plusieurs variables ("42", 42, true, [1,2,3]).

Échapper des caractères dans une chaîne

• Utilité : intégrer des guillemets, retours à la ligne, caractères spéciaux.
• Principaux caractères échappés :
  • " (guillemet double).
  • ' (guillemet simple).
  • \n (nouvelle ligne).
  • \ (antislash).
• Exercice pratique : créer une phrase multi-lignes contenant des guillemets.

Créer une nouvelle référence objet

• Comprendre la différence entre copie par valeur et copie par référence.
• Utiliser l’affectation (=) → référence vers le même objet.
• Créer une nouvelle copie indépendante :
  • Méthodes classiques : Object.assign({}, objet) ou { ...bjet }.
  • Pour les tableaux : [...array] ou array.slice().
• Exercice pratique : dupliquer un objet utilisateur sans modifier l’original.

Effectuer des opérations complexes sur les tableaux

• Fonctions avancées :
  • map() → transformer un tableau.
  • filter() → filtrer selon une condition.
  • reduce() → agréger les valeurs.
  • forEach() → exécuter une action sur chaque élément.
• Cas concrets :
  • Calculer la somme des prix.
  • Filtrer les utilisateurs majeurs.
• Exercice pratique : créer une liste de produits, appliquer un map pour ajouter la TVA, puis un reduce pour calculer le total.

Renommer les modules importés

• Pourquoi renommer ? Éviter les conflits, clarifier l’usage.
• Cas pratiques : combiner plusieurs modules dans un proje
• Exercice pratique : importer deux fonctions du même nom depuis des fichiers différents et les renommer.

Créer une regex qui correspond à une chaîne de caractères

• Introduction aux expressions régulières (regex).
• Syntaxes de base :
  • abc/ → correspond à "abc".
  • /[0-9]+/ → une suite de chiffres.
  • /^[A-Z]/ → commence par une majuscule.
• Utiliser les méthodes .test() et .match().
• Exercice pratique : créer une regex qui valide une adresse email simple.

Remplacer des éléments du DOM

• Techniques de remplacement :
  • element.replaceWith(nouvelElement).
  • parent.replaceChild(nouvelElement, ancienElement).
• Exemple : remplacer un paragraphe

  par une image .

• Exercice pratique : créer une page avec une “carte produit” et remplacer dynamiquement son contenu en cliquant sur un bouton.

Gérer plusieurs opérations asynchrones

• Scénarios concrets : appels à plusieurs APIs, chargement parallèle de ressources.
• Utiliser :
  • Promise.all() → attendre la réussite de toutes les promesses.
  • Promise.race() → obtenir la première promesse résolue.
  • Promise.allSettled() → récupérer tous les résultats, succès ou échec.
• Exercice pratique : récupérer des données utilisateurs et produits en parallèle, puis les afficher ensemble.

Lire et traiter des données depuis le DOM

• Utiliser les sélecteurs (querySelector, getElementById) pour récupérer des valeurs dans une page.
• Lire et transformer les données :
• Exemple : récupérer la valeur d’un champ texte et la convertir en majuscules.
• Intégrer ces données dans des calculs ou des traitements.
• Exercice pratique : créer un formulaire simple qui affiche un message personnalisé en fonction de l’entrée utilisateur.

Trouver l’origine d’une erreur avec la pile d’exécution (stack trace)

• Comprendre le message d’erreur du navigateur (ligne, fichier, type d’erreur).
• Lire et interpréter la trace de pile (stack trace) pour identifier la fonction fautive.
• Exercice pratique : corriger un script brisé uniquement en lisant la trace console.

Comprendre la documentation pour analyser les sorties standard et d’erreur

• Lire une documentation officielle (MDN, npm, GitHub).
• Différencier sortie standard (résultat attendu) et erreurs possibles (exceptions, valeurs inattendues).
• Exemple : lecture de la doc JSON.parse() (sortie standard → objet, erreurs → si chaîne invalide).
• Exercice pratique : explorer la doc d’une fonction, anticiper ses erreurs et écrire du code qui gère ces cas.

Passage de la certification TOSA® en ligne

asbéo est centre agréé TOSA
Reconnue dans toute l'Europe, la certification TOSA® atteste d'un niveau de compétences sur le logiciel étudié. Elle délivre un score sur 1000 exploitable sur un CV.