jQuery : mise en œuvre pratique

Définir le rôle de jQuery dans le développement front-end

• Connaître le rôle de JavaScript dans le développement Web
• Comprendre le rôle d’une bibliothèque et la place de jQuery dans l’écosystème JavaScript
• Connaître les domaines d’intervention de jQuery et les problématiques qu’il peut résoudre
• Appréhender les outils de développement JavaScript et le workflow
• Se familiariser avec l’écosystème jQuery : communauté, plugins et outils
• Savoir obtenir et insérer jQuery dans des pages

Étude de cas : analyse de sites Internet

Lire, comprendre, modifier et écrire du code jQuery

• Maîtriser la syntaxe JavaScript et ses notions fondamentales
• Comprendre les notions de variables et de données, de lecture et d’écriture, les types primitifs et les objets de base (Number, String, Boolean…)
• Utiliser les opérateurs et les expressions
• Maîtriser les structures de contrôles : conditionnelles, boucles

Accéder au DOM pour le modifier

• Comprendre l’arbre DOM, les noeuds parents et enfants
• Connaître les bases de la manipulation du DOM en JavaScript (getElementById, querySelector…)
• Manipuler le DOM avec jQuery : la fonction $() et le chaînage de méthodes
• Maîtriser les sélecteurs : simples, multiples, d’attribut, de classe…
• Maîtriser les pseudo-classes :fi rst-child,:not(), :odd, :hidden…

Exercice : manipuler les éléments d’une page HTML avec jQuery

Interagir avec le DOM et gérer les événements utilisateur

• Comprendre la notion d’événement pour gérer l’interactivité
• Maîtriser la syntaxe on() : un système unifié et compatible entre tous les navigateurs
• Utiliser les MouseEvents : click, mouseover, mouseout, mousemove…
• Manipuler les éléments HTML de la page
• Manipuler les attributs, les classes et les styles des éléments HTML
• Récupérer ou générer du contenu HTML ou textuel : création de menus ou de listes dynamiques
• Insérer du HTML dans la page : append(), prepend(), before()…
• Travailler avec les éléments de formulaire

Exercice : créer une barre de navigation dynamique avec menu déroulant

Ajouter des effets graphiques et des animations

• Réaliser des effets par manipulation des classes CSS
• Utiliser des effets animés prédéfinis : fadeIn(), slideUp(), show(), hide()…
• Enchaîner des effets et mettre en attente avec delay()
• Comprendre la notion de callback : “complete”
• Utiliser des accélérations : notion d’“easing”
• Réaliser des animations personnalisées avec animate()

Exercice : créer un mini-site en “single-page“ avec onglets et transitions animées

Installer et utiliser un plugin jQuery

• Chercher et trouver un plugin jQuery
• Connaître les plugins les plus utiles

Exercice : rechercher, sélectionner, installer et configurer un plugin jQuery