A l'issue de la formation, le stagiaire saura développer des sites web nouvelle génération (web 2.0) à l'aide de jQuery, la librairie JavaScript la plus populaire et la plus utilisée du web. Il apprendra comment utiliser au mieux le langage JavaScript du navigateur et écrire des programmes compatibles pour tous les navigateurs du marché (IE, Firefox, Safari, Chrome et Opéra), aussi bien dans les environnements Windows, Mac ou Linux.
La formation abordera également jQuery UI, une librairie de composants prêts à l'emploi (onglets, menus en accordéon, calendriers...), entièrement personnalisables via la librairie jQuery et des CSS.
A l'issue de cette formation, le stagiaire saura utiliser au mieux Ajax, les effets visuels, le drag & drop, l'auto-complétion, pour créer des sites ou des applications web enrichis.
Seules les notions de base de HTML et CSS sont nécessaires. La connaissance du langage JavaScript (non nécessaire car des rappels sont effectués tout au long du stage) et d'un langage serveur (PHP, Java, etc) est un plus.
Objet jQuery
$ comme raccourci
Chainage des méthodes
Manipulation d'objets
Méthodes booléennes
Manipulation de tableaux
Manipulation de chaines de caractères
Sélecteurs simples
Pseudo-classes
Pseudo-classes liées aux formulaires
Combinateurs de descendance, filial, d’adjacence directe et d’adjacence indirecte
Sélecteurs multiples
Document Object Model : rappels JavaScript
Différentes formes de la fonction jQuery() : $(selector, context), $(element), $(elements), $(jQueryObject) et $(html)
Supprimer, ajouter ou remplacer des éléments dans la liste
Méthode each(callback)
Propriété length
Accès à un élément particulier de la collection
Méthodes gérant les attributs et propriétés
Modification et gestion du DOM
Méthode bind (eventName, callback)
Paramètre event : propriétés et méthodes du paramètre event, propagation de l'événement
Transmettre d'autres paramètres à un événement
Evénements utilisables dans bind () : événements standards et nouveaux événements
Méthode unbind () : supprimer un gestionnaire d'événement
Mise en place d'un serveur
Méthode $.ajax(options) : options disponibles dans $.ajax(options)
Traiter la réponse du serveur
Transmettre des paramètres au serveur
Méthode load (url, data, success)
Effets visuels standards définis par jQuery
Créer ses propres effets visuels
Arrêter l'exécution d'un effet : méthode stop ()
Différer l'exécution d'un effet : méthode delay ()
Objectifs d'un plugin
Ajouter de nouvelles méthodes à l'objet jQuery
Ajouter de nouvelles méthodes aux objets de classe jQuery
Ajouter de nouvelles pseudo-classes
Diffuser un plugin
Installation de jQuery UI
Aperçu de jQuery UI
Utilisation de fichiers non compressés ou compressés
Changer de thème CSS
Mise en forme du contenu (accès aux onglets, ajout, suppression...)
Gestion des événements dans les menus
Ouvrir un menu quelconque
Charger le contenu d'un menu par Ajax
Ouvrir et fermer une fenêtre
Utiliser un effet pour ouvrir ou fermer la fenêtre
Insérer des boutons dans la fenêtre
Insérer un contenu par Ajax
Boutons radio
Cases à cocher
Afficher des icônes dans les boutons
Gestion des événements dans les barres de progression
Incrémenter de façon régulière une barre de progression
Effectuer un traitement à différentes étapes du remplissage
Afficher la valeur du curseur
Afficher les valeurs de plusieurs curseurs
Régler l'opacité d'une image à l'aide d'un slider
Afficher plusieurs mois dans le calendrier
Afficher un calendrier statique
Indiquer des dates minimum et maximum
Interdire de pouvoir sélectionner certaines dates
Présélectionner une date quelconque
Effectuer une requête Ajax lors de la sélection d'une date
Afficher une liste de suggestions à une largeur donnée
Afficher une liste de suggestions dès l'affichage de la page HTML
Afficher une liste de suggestions dès que le curseur pénètre dans le champ de saisie
Produire un effet d'apparition de la liste de suggestions
Créer dynamiquement la liste de suggestions
Insérer des images dans la liste de suggestions
Effectuer un traitement lors du déplacement
Imposer des limites au déplacement
Déplacer un autre objet que celui cliqué
Méthode droppable()
Un panier d'achats