jQuery reste présent dans de nombreux sites et applications web. Savoir lire et faire évoluer un code existant permet de corriger plus facilement une interface, d’ajouter des interactions et de limiter les erreurs. Cette formation intermédiaire vous guide des sélecteurs aux appels asynchrones, avec des exercices inspirés de situations professionnelles.
Sur deux jours, vous travaillerez à partir d’exemples concrets : menu interactif, formulaire contrôlé, contenu affiché à la demande et petites améliorations d’interface. Vous apprendrez aussi à écrire un code plus lisible et à choisir la bonne approche selon le contexte.
Module 1 — Prendre ses repères dans jQuery
Comprendre la bibliothèque et son environnement
Vous découvrirez le rôle de jQuery, son fonctionnement dans une page et la façon de l’intégrer à un projet existant. Nous verrons comment organiser les scripts, attendre que le document soit prêt et vérifier que la bibliothèque est correctement chargée. Vous apprendrez à distinguer une fonctionnalité propre à jQuery d’une possibilité déjà offerte par JavaScript natif.
Exemple concret : examiner une page de site qui charge plusieurs scripts, puis déterminer dans quel ordre ils doivent être exécutés pour éviter une erreur.
Exercice pratique
Vous intégrerez jQuery à une page de démonstration, afficherez un message dans la console et repérerez les éléments clés de son code source.
Module 2 — Sélectionner et modifier le contenu
Manipuler le DOM de manière ciblée
Vous utiliserez les sélecteurs jQuery pour trouver des éléments par leur balise, leur classe, leur identifiant ou leur relation avec d’autres éléments. Vous apprendrez à lire et modifier du texte, des attributs et des classes CSS, ainsi qu’à ajouter, remplacer ou retirer du contenu. L’objectif est de comprendre l’effet de chaque action et de limiter les modifications à la bonne partie de la page.
Exemple concret : mettre en évidence les champs obligatoires d’un formulaire et afficher un message près d’un champ incomplet, sans modifier les autres éléments du formulaire.
Exercice pratique
À partir d’une fiche produit, vous ajouterez une étiquette promotionnelle, actualiserez un prix affiché et appliquerez une classe visuelle après une action de l’utilisateur.
Module 3 — Réagir aux actions des utilisateurs
Gérer les événements et améliorer l’interface
Vous apprendrez à associer des actions à des événements comme le clic, la saisie, la soumission d’un formulaire ou le survol. Nous aborderons les écouteurs d’événements, la délégation pour les éléments ajoutés après le chargement, ainsi que les comportements à éviter, par exemple l’ajout répété du même gestionnaire. Vous verrez comment empêcher une soumission classique lorsque cela est nécessaire et comment rendre les interactions prévisibles.
Exemple concret : développer un menu qui s’ouvre au clic, indique son état à l’utilisateur et se referme lorsqu’on sélectionne un lien.
Exercice pratique
Vous réaliserez un accordéon de questions fréquentes : chaque question pourra afficher ou masquer sa réponse, avec une classe indiquant l’état actif.
Module 4 — Structurer et fiabiliser son code
Écrire des interactions maintenables
Une interaction fonctionne mieux quand son code est facile à comprendre et à faire évoluer. Vous apprendrez à découper les responsabilités, à éviter les répétitions et à choisir des noms explicites. Nous verrons comment utiliser les méthodes jQuery de façon cohérente, comment tester le comportement dans le navigateur et comment diagnostiquer les problèmes avec la console. Une attention particulière sera portée aux sélecteurs trop généraux et aux effets appliqués à des éléments inattendus.
Exemple concret : reprendre un script qui traite plusieurs boutons avec du code dupliqué, puis le simplifier afin qu’il reste compréhensible lorsqu’un nouveau bouton est ajouté.
Exercice pratique
Vous corrigerez un script fourni : repérage d’un sélecteur incorrect, suppression d’un gestionnaire en double et amélioration des noms de variables et fonctions.
Module 5 — Charger des données et finaliser un mini-projet
Découvrir les échanges asynchrones
Vous aborderez les requêtes AJAX avec jQuery pour récupérer des données sans recharger toute la page. Vous verrez les étapes d’un échange, la gestion des réponses et des erreurs, ainsi que l’importance de fournir un retour visible pendant le chargement. Les exemples seront adaptés à un service de test ou à des données préparées, afin de comprendre le principe sans dépendre d’un système externe particulier.
Exemple concret : afficher une liste d’actualités chargée à la demande, présenter un indicateur d’attente et expliquer clairement à l’utilisateur ce qui se passe en cas d’échec.
Exercice pratique
Vous assemblerez les notions de la formation dans une petite interface : une liste filtrable, un bouton de chargement et un message de résultat. Vous testerez plusieurs scénarios et apporterez une correction si la réponse attendue ne s’affiche pas.
À retenir
Vous repartirez avec une méthode pour lire, modifier et tester des interactions jQuery dans un projet web. Les exercices vous aideront à appliquer les sélecteurs, les événements, les manipulations du DOM et les échanges asynchrones à des besoins courants.
Pour aller plus loin
Après la formation, vous pourrez appliquer ces pratiques à un site existant et approfondir les notions de JavaScript moderne, d’accessibilité des interactions et de tests d’interface. Pour un projet neuf, comparez les besoins avec les fonctionnalités de JavaScript natif avant d’ajouter une dépendance.
