Programmation avec jQuery et jQuery UI

Durée du module / 5 jours

Objectif

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.

Prérequis

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.

Déroulé

La philosophie de jQuery

Objet jQuery
$ comme raccourci
Chainage des méthodes

Méthodes utilitaires

Manipulation d'objets
Méthodes booléennes
Manipulation de tableaux
Manipulation de chaines de caractères

Sélecteurs

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

Accéder au DOM

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

Manipuler le DOM

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

Gestion des événements

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

Ajax

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

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 ()

Créer un plugin jQuery

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

Introduction à jQuery UI

Installation de jQuery UI
Aperçu de jQuery UI
Utilisation de fichiers non compressés ou compressés
Changer de thème CSS

Onglets dans la page

Mise en forme du contenu (accès aux onglets, ajout, suppression...)

Menus en accordéon

Gestion des événements dans les menus
Ouvrir un menu quelconque
Charger le contenu d'un menu par Ajax

Boites de dialogue

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 dans la page

Boutons radio
Cases à cocher
Afficher des icônes dans les boutons

Barres de progression

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

Sliders

Afficher la valeur du curseur
Afficher les valeurs de plusieurs curseurs
Régler l'opacité d'une image à l'aide d'un slider

Calendriers

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

Auto-complétion

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

Drag & drop

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