jQuery - mise en oeuvre pratique par Pyramyd NTCV

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 #0x24#() 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

- Définir le rôle de jQuery dans le développement front
- end
- Lire, comprendre, modifier et écrire du code jQuery
- Interagir avec le DOM et gérer les événements utilisateur
- Ajouter des effets graphiques et des animations
- Installer et utiliser un plugin jQuery