Objectifs

– Analyser un problème donné
– Définir l’algorithme traduisant la solution de ce problème
– Maîtriser les structures de données de base

Programme

– Utilité de JQuery
 – L’apport par rapport à Javascript simple.

– Les éléments jQuery. jQuery UI. L’objet jQuery.
Travaux pratiques
Installation de jQuery. Mise en place d’une première page Web utilisant
jQuery.

– La fonction $() ou jQuery()

– Les sélecteurs jQuery

– Sélecteur CSS

– Sélecteur d’attribut

– Sélecteur personnalisé

– La méthode .filter()
Travaux pratiques
Mise en place d’applications Web utilisant des sélecteurs.

– Rappel sur DOM (Document Object Model).

– Accès direct aux éléments d’une page.

– Manipulation de DOM avec jQuery.

– Gestion des classes CSS (addClass(), removeClass()…

– Insertion d’éléments dans l’arbre DOM.
Travaux pratiques
Manipulation de l’arbre DOM.

– Description des évènements

– Évènements au chargement de la page

– Évènements associés au DOM

– Attacher un évènement sur un élément du DOM

– Méthode .bind()

– Méthode .live()

– Méthode .delegate()

– Méthode .on()

– Les raccourcis d’évènements

– Les callBacks

– callBack sans argument

– callBack avec argument

– Gérer les évènements multiples

– Propagation des évènements

– Retirer un évènement sur un élément du DOM

– Les évènements et les espaces de nom
Travaux pratiques
Gérer les événements dans une application

-Requêtage d’un serveur avec jQuery.

– Requêtes Ajax en utilisant $.ajax().

– Traitement de la réponse du serveur.

– Transmission de paramètres au serveur.
Travaux pratiques
Utilisation d’Ajax avec jQuery.

– Les effets visuels standard de jQuery.

– Créer ses propres effets visuels.

– Utilisation d’animate().

– Paramétrage d’effet avec easing.

– Gestion de la file d’attente des effets visuels.

– Présentation et installation de jQuery UI.

– Utilisation de composants évolués.

– Onglets (tabs(), accordéon (accordion()), boîte de dialogue (dialog()), barres de progression (progressbar()).

– Le glissé/déposé. Sélection multiple.

– Permutations d’éléments dans une page.

– Redimensionnement d’élément.
Travaux pratiques
Mise en place d’effets visuels.

Référence :  WEB026

Type de Stage : Pratique

Durée : 5 jours

Public concerné:

Développeurs et chefs de projets..

Prérequis:

Bonnes connaissances en
Javascript, HTML et CSS