Vous êtes sur la page 1sur 234

Présentation de la formation :

jQuery, Ajax et jQuery UI

Site : http://www.alphorm.com Fabien LE CORRE


Blog : http://www.alphorm.com/blog Développeur, Formateur et
Forum : http://www.alphorm.com/forum Consultant indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
. Présentation du formateur
. Publics concernés
. Connaissances requises
. Qu’est ce que jQuery
. Avantages à utiliser jQuery
. Logiciels nécessaires
. Résumé de la formation

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Présentation du formateur
• Fabien LE CORRE

• Développeur et formateur PHP MySQL jQuery

• Email : lcorrefabien@gmail.com

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Publics concernés
• Tous les développeurs et apprentis développeurs qui souhaitent
améliorer le confort et l’expérience des utilisateurs de leurs site web.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Connaissances requises
• Vous devez impérativement connaître les langage
HTML et CSS pour pouvoir suivre cette formation.
• Avoir des bases en Javascript est un plus.

• Vous devez également connaître le PHP et MySQL qui


seront utilisés dans la partie AJAX de la formation.
• Connaître la différence entre le client (le navigateur) et
le serveur (apache, nginx).

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Qu’est ce que jQuery?
• jQuery est une bibliothèque JavaScript créée en 2006 par John Resing, c’est un
simple fichier JavaScript que l’on va inclure dans nos document HTML ou PHP
comme n’importe quel fichier JavaScript.
• jQuery va nous permettre de parcourir nos documents, de sélectionner les
éléments, de les manipuler, de modifier leur apparence, d’écouter les actions de
l’utilisateur comme par exemple le click de la souris, de créer des effets visuels
et des animations sur la page, et de faire de l’AJAX que l’on découvrira dans
cette formation, ce qui nous permettra de faire de l’échange de données entre
client et serveur et vice versa, sans avoir à recharger la page.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Avantages à utiliser jQuery
• Utiliser une bibliothèque telle que jQuery, va vous permettre de créer vos
applications beaucoup plus rapidement et simplement que si vous la codiez en
pur JavaScript. jQuery va vous permettre d’arriver au même résultat en écrivant
beaucoup moins de code, avec une syntaxe beaucoup plus simple et agréable
que celle du pur JavaScript.
• L’autre avantage est que vous n’aurez plus à vous soucier de la compatibilité
entre les différents navigateurs, jQuery s’en occupe à votre place et vous évitera
donc d’éventuelles heures perdues à déboguer votre application ☺
• De plus la communauté est immense et très active et vous n’aurez aucun mal à
trouver de l’aide en cas de besoin.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Logiciels nécessaires
• Un éditeur de texte comme par exemple sublimetext :
http://www.sublimetext.com/
• PHP, MySQL, phpmyadmin pour administrer notre base de données,
ainsi qu’un serveur Apache ou Nginx, à défaut une installation MAMP
ou WAMP selon votre environnement de développement
http://www.mamp.info/de/

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ressources recommandées
• Sites/Blogs
Learning center jQuery http://learn.jquery.com/
Openclassroom (Site du zéro) http://openclassrooms.com/courses/jquery-
ecrivez-moins-pour-faire-plus

• Livres
Javascript : The good parts : http://www.amazon.fr/Javascript-Good-Parts-D-
Crockford/dp/0596517742 (Une référence)

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Résumé de la formation
1. Sélectionner les divers éléments d’une page
2. Ajouter, modifier et supprimer les éléments d’une page
3. Récupérer et modifier la position d’un élément
4. Récupérer et modifier les dimensions d’un élément
5. Faire apparaître et disparaître un élément
6. Créer un système de navigation par onglet
7. Créer un système de FAQ amélioré par jQuery
8. Animer un élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Résumé de la formation
9. Création d’une fiche produit
10. Ecouter les évènements sur la souris

11. Ecouter les évènements sur le clavier

12. Ecouter les évènements sur un formulaire

13. Ecouter les évènements sur le navigateur

14. Les sélecteurs sur formulaire

15. Sélectionner les éléments d’un tableau

16. Valider un formulaire avec jQuery

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Résumé de la formation
17. Première requête en AJAX par GET

18. Requête en AJAX par GET et retour data en JSON

19. Poster un formulaire en AJAX

20. Upload de fichier en AJAX avec progress bar

21. Système de navigation en AJAX

22. Créer un système de todo list en AJAX

23. Utiliser un plugin jQuery (application google maps)

24. Créer son propre plugin jQuery

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Résumé de la formation
25. Présentation de jQuery-UI

26. Téléchargement et intégration de jQuery-UI

27. Utilisation du widget datepicker de jQuery-UI

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les autres formations dév sur Alphorm

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les autres formations dév sur Alphorm

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Write less, do more

GO
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Environnement de travail
Préparation du terrain

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Création de notre dossier de travail

• Télécharger jQuery http://jquery.com

• Où trouver la documentation si besoin?

• Présentation de la feuille de style bootstrap utilisée pour la formation

• Intégration de jQuery à notre document

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
. Création de notre environnement de travail
. Le téléchargement et l’installation de jQuery
. Trouver et utiliser la documentation
. Se procurer la feuille de style du bootstrap de twitter

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Environnement de travail
Premier programme

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Créer un premier programme jQuery (Hello World)

• Présentation de la console JavaScript du navigateur

• Afficher des informations dans la console

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Afficher une boîte d’alert après le chargement du document

• Utiliser la console javascript afin d’afficher des informations

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Sélection simple
Sélection
et manipulation
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Sélectionner un élément pour le manipuler

• Sélectionner plusieurs éléments et les manipuler

• Bonne pratique, stocker les éléments dans des variables

• Sélectionner des éléments par rapport à leur parent ou enfant

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Seléction

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Stocker dans des variables

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Eléments parent > enfant

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Sélectionner des élément et les manipuler

• Stocker les éléments dans des variable pour plus de rapidité

• Compréhension de la notion parent > enfant dans le document

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Sélection simple
Ajouter, modifier
et supprimer des éléments

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Ajouter un élément

• Modifier un élément

• Supprimer un élément

• Ajouter un classe à un élément

• Modifier la classe d’un élément

• Supprimer la classe d’un élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ajouter, modifier, supprimer

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Comment ajouter, modifier et supprimer un élément

• Comment ajouter, modifier et supprimer la classe d’un élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Où est mon élément
La position des éléments

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Récupérer la position d’un élément

• Modifier la position d’un élément

• Scroller jusqu’à un élément et jusqu’en haut de la page

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Récupérer une position

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Modifier une position

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Scroll To

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Récupérer la position d’un élément et la modifier

• Se rendre à la position d’un élément de la page

• Se rendre en haut de la page

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les dimensions
Trouver et modifier
les dimensions

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Récupérer les dimensions des éléments

• Modifier les dimensions des éléments

• Un formulaire pour redimensionner une image

• Récupérer les dimensions de l’écran, du document et de la fenêtre

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Récupérer les dimensions d’une image

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Modifier les dimensions d’une image
• Pour modifier les dimensions d’un élément il suffit de faire passer en
paramètres des fonction width() et height() de jQuery la largeur et la
hauteur souhaitées.

• $(img).width(300).height(200);

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Utiliser un formulaire
• On va utiliser un formulaire pour modifier la largeur et la hauteur de
notre image.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les dimensions de l’écran et du document
• On peut récupérer les dimensions de l’écran, du document et de la
fenêtre du navigateur.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• On a vu comment récupérer les dimensions d’éléments

• On a vu comment modifier les dimensions des éléments

• On a vu comment poster un formulaire et récupérer les valeur afin de


modifier les dimensions d’une image
• On a vu comment récupérer les dimensions de l’écran, du document et
de la fenêtre

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Afficher et cacher
Jouer à cache cache

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Afficher et masquer un élément

• Appliquer un style de fadeIn-fadeOut lors du masquage et de


l’affichage d’un élément
• Appliquer un style de slideUp-slideDown lors du masquage et de
l’affichage d’un élément
• Utilisation de la fonction slideToggle() pour inverser automatiquement
l’effet masquage / affichage lors du click sur un bouton

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Afficher et cacher un élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Appliquer un style de fadeIn fadeOut

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Appliquer un style de slide

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Utiliser la fonction slideToggle()

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Nous avons vu comment masquer un élément visible

• Comment afficher un élément caché

• Comment appliquer différents styles lors du masquage et de l’affichage


d’un élément
• Comment utiliser la fonction slideToggle() de jQuery

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Cas concrets et animations
Réaliser une navigation
par onglet

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Créer notre structure HTML

• Masquer du contenu au chargement de la page

• Afficher du contenu lors du click sur un menu

• Modifier la classe d’un élément pour le rendre actif

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création de la structure HTML

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Masquer du contenu au chargement

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Afficher le contenu désiré

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Nous avons vu comment créer un système de navigation par onglet

• Nous avons vu comment masquer plusieurs éléments au chargement


du document
• Nous avons vu comment afficher un contenu spécifique lors du click sur
un onglet
• Nous avons vu comment modifier et supprimer les classes des éléments
pour les rendre actifs ou inactifs

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Cas concrets et animations
Réaliser un système
de question réponse

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Créer notre structure HTML

• Masquer nos réponses en CSS

• Afficher la réponse lors du click sur une question et masquer les autres
réponses

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création de la structure

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Masquer les réponses en CSS

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Afficher et masquer les réponses

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Nous avons vu comment créer un système de questions réponses

• Comment masquer les réponses en CSS au chargement de la page

• Comment afficher la réponse en rapport avec une question lors du click


sur celle-ci

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Cas concrets et animations
Animer un élément

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Utiliser la fonction animate() pour animer un élément

• Changer la taille d’un élément

• Modifier l’opacité d’un élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Animer un élément
• Modifier la taille et l’opacité d’un élément avec une animation

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Comment utiliser la fonction animate

• Comment modifier la taille d’un élément

• Comment modifier son opacité

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Cas concrets et animations
Créer une fiche produit

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Création de notre fiche produit

• Modifier l’attribut source d’une image

• Modifier l’attribut href d’un lien hypertext

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création d’une fiche produit

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Modifier l’attribut src d’une image
• Lors du click sur une image miniature, on modifie l’attribut src de la
grande image pour la modifier avec la source de l’image sélectionnée

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Modifier l’url d’un lien
• Lors du click sur la miniature, on modifie le lien de la grande image
pour qu’il corresponde avec celui de l’image sélectionnée

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Comment créer une fiche produit

• Comment modifier les sources des images

• Comment modifier les url des liens

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les évènements
Evènements sur la souris

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Ecouter le click utilisateur

• Ecouter la souris rentrer sur un élément

• Ecouter la souris sortir d’un élément

• Ecouter quand la souris est sur un élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Le click utilisateur

Formation jQuery, Ajax et jQuery UI alphorm.com™©


L’entrée de la souris sur un élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


La sortie de la souris

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Quand la souris est sur un élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Ecouter les actions de l’utilisateur avec la souris

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les évènements
Evènements clavier

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Créer un simple formulaire

• Ecouter l’événement keyup, lorsque l’utilisateur relâche une touche

• Ecouter l’événement keypress, lorsque l’utilisateur presse une touche

• Ecouter l’événement focusout, lorsque l’utilisateur sort d’un champ

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création d’un simple champ formulaire

Formation jQuery, Ajax et jQuery UI alphorm.com™©


L’événement keyup

Formation jQuery, Ajax et jQuery UI alphorm.com™©


L’événement keypress

Formation jQuery, Ajax et jQuery UI alphorm.com™©


L’événement focusout

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Ecouter les interactions de l’utilisateur avec le clavier

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les évènements
Evènements formulaire

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Créer un formulaire avec différents types de champ

• Ecouter la soumission du formulaire

• Ecouter le focus sur un champ

• Ecouter la sortie d’un champ

• Ecouter le changement de valeur d’un champ

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création d’un formulaire

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ecouter la soumission du formulaire

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ecouter le focus sur un champ

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ecouter la sortie d’un champ

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ecouter un changement de valeur

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Ecouter les interactions de l’utilisateur avec un formulaire

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les évènements
Evènements navigateur

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Ecouter le chargement du document

• Ecouter la fermeture de la page et confirmer avant de quitter

• Ecouter le chargement d’une image

• Ecouter le redimensionnement de la fenêtre

• Ecouter le mouvement sur la scroll bar

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Chargement du document

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Fermeture de la page

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Le chargement d’une image avec load

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Redimensionnement de la fenêtre

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Le scroll a bougé

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Ecouter les interactions entre l’utilisateur et le navigateur

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les sélecteurs avancés
Les formulaires

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Création d’un formulaire

• Sélectionner les différents types de champ

• Ecouter le focus sur un champ

• Ecouter lorsque l’utilisateur coche une checkbox

• Ecouter lorsque l’utilisateur coche un bouton radio

• Ecouter le changement de valeur d’un champ select

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création d’un formulaire

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ecouter le focus sur un champ

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ecouter les checkbox

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ecouter les boutons radio

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ecouter les select

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Ecouter les interactions de l’utilisateur avec un formulaire

• Comment vérifier si une champ change de valeur

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les sélecteurs avancés
Les tableaux (et autres)

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Sélectionner un élément sur 2

• Sélectionner un élément par son indice

• Sélectionner le premier élément

• Sélectionner les éléments dont l’indice est supérieur à

• Sélectionner les élément de type header

• Sélectionner le dernier élément

• Sélectionner les éléments don l’indice est inférieur à

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Un élément sur 2

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Elément par son indice

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Le premier élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Elément dont l’indice est supérieur à

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Eléments de type header

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Le dernier élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Elément d’indice inférieur à

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Sélectionner un élément sur 2

• Sélectionner un élément par son indice

• Sélectionner les éléments de type header, h1, h2, h3, …

• Sélectionner les élément dont l’indice est supérieur et inférieur à

• Sélectionner le premier élément dans le document

• Sélectionner le dernier élément dans le document

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les sélecteurs avancés
Validation
d’un formulaire

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Créer un formulaire avec différents types de champ

• Ecouter la soumission du formulaire

• Valider un champ de type text

• Afficher un message d’erreur à l’utilisateur

• Valider un champ de type select

• Valider un champ de type checkbox

• Valider un champ de type bouton radio

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création d’un formulaire

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ecouter la soumission du formulaire

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Valider un champ de type text

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Afficher les messages d’erreur

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Valider un champ select

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Valider un champ de type checkbox

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Valider un champ de type radio

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Validation d’un champ texte

• Validation d’un champ select

• Validation d’un champ checkbox

• Validation d’un champ bouton radio

• Afficher un message d’erreur au visiteur

Formation jQuery, Ajax et jQuery UI alphorm.com™©


AJAX
Présentation d’Ajax

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Qu’est ce que l’ AJAX

• Quels sont les avantages pour l’utilisateur

• jQuery et AJAX

Formation jQuery, Ajax et jQuery UI alphorm.com™©


AJAX c’est quoi ?
• AJAX n’est ni un langage, ni une technologie, c’est un concept de
programmation qui repose sur plusieurs langages dont le JS.
• AJAX est l’acronyme de Asynchronous Javascript And XML que l’on peut
traduire par Javascript et XML Asynchrone.
• .Asynchrone, c’est la capacité d’échanger des données entre le client et le
serveur sans recharger la page.
• Aujourd’hui XML est plutôt délaissé car on lui préfère un autre format de
données, le JSON (Javascript Object Notation) qu’on verra plus loin.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Quels sont les avantages
• La rapidité. Seul les données nécessaires sont échangées, on ne
recharge pas toute la page avec toutes les autres données.
• Une meilleure réactivité donc, une meilleure interactivité et donc un
meilleur confort pour l’utilisateur.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


jQuery et AJAX
• jQuery va nous apporter comme à son habitude, une simplicité et une
rapidité de mise en œuvre de l’AJAX dans notre application.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Nous avons vu ce qu’était AJAX

• Quels sont les avantages pour l’utilisateur

• Ce que jQuery apporte dans la mise en œuvre de l’ AJAX dans nos


applications

Formation jQuery, Ajax et jQuery UI alphorm.com™©


AJAX
Envoyer des données
par GET

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Envoyer une requête AJAX par GET au serveur

• Traiter les données côté serveur

• Envoyer une réponse du serveur vers le client

• Récupérer la réponse du serveur et la logger dans la console

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Envoyer une requête par GET
• Nous allons utiliser la fonction .get() de jQuery afin d’envoyer une
chaîne de caractères depuis le client vers le serveur.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Traiter les données côté serveur

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Renvoyer une réponse au client

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Récupérer la réponse du serveur

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Envoyer une requête en AJAX par GET

• Traiter les données envoyées par le client, en PHP côté serveur

• Renvoyer des données du serveur vers le client

• Récupérer les données renvoyées par le serveur

• Logger ces données dans la console

Formation jQuery, Ajax et jQuery UI alphorm.com™©


AJAX
Envoi par GET
et réponse JSON

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Qu’est ce que le format JSON

• Envoyer des données en AJAX avec .getJSON()

• Traiter les données côté serveur

• Retourner des données du serveur vers le client au format JSON

• Traiter ces données côté client

Formation jQuery, Ajax et jQuery UI alphorm.com™©


JSON c’est quoi ?
• JSON c’est un format de données textuel dérivé de la notation objet de
javascript qui permet d’échanger des données entre le client et le
serveur.
• JSON = Javascript Object Notation

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Envoyer des données par GET
• Nous allons envoyer des données par GET et attendre un retour au
format JSON grâce à la fonction .getJSON() de jQuery.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Traiter les données en PHP

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Retourner les données au format JSON

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Traiter les données JSON côté client

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Ce qu’ était le format JSON

• Envoyer des données en AJAX par GET et retour JSON

• Renvoyer des données du serveur vers le client au format JSON

• Récupérer ces données côté client et les logger dans la console

Formation jQuery, Ajax et jQuery UI alphorm.com™©


AJAX
Poster un formulaire
en AJAX
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Création d’une base de données et d’une table

• Création d’un formulaire

• Récupérer les données à afficher en BDD

• Envoi des données sans AJAX

• Vérifications et traitement des données en PHP

• Poster le formulaire en AJAX

• Serializer les données à poster avec .serialize()

. Récupérer et afficher les données en fonction de la réponse

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création de la base de donnée

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création du formulaire de commentaires

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Récupérer les données en BDD

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Envoi du formulaire sans AJAX
• Nous allons d’abord envoyer le formulaire sans Javascript

• Puis nous traiterons les données en PHP toujours sans JS

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Vérification des données en PHP

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Poster le formulaire en AJAX

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Serializer les données postées
• La fonction .serialize() de jQuery permet de formater les données à
envoyer, que l’on stockera dans une variable.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Vérifier si la requête est en AJAX

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Récupérer et afficher les erreurs en AJAX

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Récupérer et afficher le succès

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Créer un système de commentaire qui peut fonctionner sans Javascript
et donc sans AJAX
• Ajouter de l’ AJAX pour le confort et permettre de poster sans recharger
la page.
• Comment vérifier si une requête est faite en AJAX

• Récupérer et afficher les données renvoyer par le serveur en JSON, en


fonction du cas où il y’a des erreurs, ou du cas de succès.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


AJAX
Upload de fichier
avec progress bar

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Création d’un formulaire d’upload

• Traitement et enregistrement du fichier posté en PHP

• Poster le fichier en AJAX

• Traquer la progression de l’upload

• Afficher la progression de l’upload dans une progress bar

• Récupérer et afficher le message de succès

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création du formulaire d’upload

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Enregistrer le fichier posté

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Poster le fichier en AJAX

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Traquer la progression de l’upload

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Afficher la progression à l’utilisateur

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Afficher le message de succès

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Création d’un formulaire d’upload de fichier

• Traiter le fichier côté serveur avec PHP

• Poster le fichier en AJAX

• Surveiller la progression du fichier en temps réel

• Afficher la progression de l’upload dans une progress bar

• Récupérer et afficher le message de succès

Formation jQuery, Ajax et jQuery UI alphorm.com™©


AJAX
Navigation AJAX

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Création d’une table en BDD

• Récupérer le contenu de notre table

• Création de la structure HTML et affichage des données en PHP

• Création de la navigation en PHP

• Ajout d’ AJAX à la navigation pour un meilleur confort

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Créer une table en base de données

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Récupérer le contenu de la table

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Créer la structure et insérer les données

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Créer navigation en PHP

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ajout de l’AJAX

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Créer un système de navigation fonctionnel sans javascript

• Améliorer le confort avec l’ajout d’ AJAX à notre système

• Récupérer les données côté serveur au format JSON

• Afficher les données récupérées au format JSON avec effet de style

Formation jQuery, Ajax et jQuery UI alphorm.com™©


AJAX
Todo List

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Création de la table en BDD

• Récupérer des données et les afficher sur la page en PHP

• Ajouter des données en AJAX

• Mettre à jour des données en AJAX

• Effacer des données en AJAX

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Créer une table en BDD

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Afficher les données

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ajouter des données

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Mettre à jour les données

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Effacer les données

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Créer un système de todo list

• Ajouter des données en AJAX

• Modifier des données en AJAX

• Effacer des données en AJAX

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Plugins jQuery
Utiliser un plugin

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Un plugin c’est quoi ?

• Chercher et trouver un plugin jQuery

• Présentation du plugin Gmaps

• Intégrer un plugin jQuery

• Utiliser un plugin jQuery dans une application avec Google Maps

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Un plugin c’est quoi ?
• Un plugin jQuery est une simple extension de jQuery

• C’est un fichier javascript contenant des fonctions prêtes à l’emploi qui


vont nous permettre tout comme jQuery de gagner du temps

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Où trouver des plugins jQuery
• En cherchant sur Google

• Dans la partie plugins du site officiel http://plugins.jquery.com/

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Plugin Gmaps

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Intégrer le plugin à notre document

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Utiliser le plugin

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Nous avons vu ce qu’était un plugin

• Comment trouver un plugin

• Comment intégrer un plugin

• Comment utiliser un plugin dans une application de geolocation

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Plugins jQuery
Créer un plugin

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Créer un simple plugin jQuery

• Intégrer notre plugin

• Utiliser notre plugin

• Ajouter des options paramétrables à notre plugin

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Création d’un plugin jQuery

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Intégration du plugin au document

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Utiliser notre plugin

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ajouter des option à notre plugin

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Comment créer un plugin jQuery

• Comment intégrer ce plugin

• Comment utiliser notre plugin

• Comment ajouter des options paramétrables à notre plugin

Formation jQuery, Ajax et jQuery UI alphorm.com™©


jQuery UI
Présentation de
jQuery UI
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Présentation de jQuery UI

• Les interactions

• Les widgets

• Les effects

• Les utilities

Formation jQuery, Ajax et jQuery UI alphorm.com™©


jQuery UI c’est quoi ?
• jQuery UI est un module externe à jQuery, développé par les développeurs de
jQuery.
• UI signifie « User Interface », interface utilisateur en français, et va nous
permettre d’améliorer l’interactivité entre notre application et l’utilisateur.
• jQuery UI est doté de la même syntaxe que jQuery et va nous permettre de
créer des fonctionnalités très simplement et rapidement.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les interactions

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les widgets

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les effects

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Les utilities

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Ce qu’est jQuery UI

• Les interactions

• Les widgets

• Les effects

• Les utilities

Formation jQuery, Ajax et jQuery UI alphorm.com™©


jQuery UI
Utilisation de
jQuery UI
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Télécharger jQuery UI

• Intégrer jQuery UI

• Utiliser le widget datepicker de jQuery UI

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Télécharger jQuery UI

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Intégrer jQuery UI

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Utiliser le widget datepicker
• Pour simplifier la saisie d’une date, utilisons un datepicker

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Télécharger jQuery UI

• Intégrer jQuery UI à notre document

• Utiliser le widget datepicker pour la saisie de date

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Aide et ressources
Ressources

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Trouver des ressources sur le web pour apprendre
et progresser.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Trouver des ressources
• La doc officielle de jQuery : http://api.jquery.com/

• Le learning center de jQuery : http://learn.jquery.com/

• Openclassroom tutoriel jQuery :


http://openclassrooms.com/courses/simplifiez-vos-developpements-
javascript-avec-jquery
• Openclassroom tutoriel jQuery UI :
http://openclassrooms.com/courses/decouvrez-la-puissance-de-jquery-
ui
• Grafikart jQuery : http://www.grafikart.fr/tutoriels/jquery

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
. Où trouver des ressources de qualité pour apprendre et
progresser.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Aide et ressources
Problèmes et solutions

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Plan
• Où trouver des solutions aux problèmes.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Où chercher de l’aide
• Stackoverflow : http://stackoverflow.com/questions/tagged/jquery

• Forum javascript openclassroom :


http://openclassrooms.com/forum/categorie/javascript

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
. Comment trouver de l’aide en cas de besoin.

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Formation jQuery
Conclusion

Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : http://www.alphorm.com/forum indépendant
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Ce qu’on a couvert
• La sélection et la manipulation des élément d’une page

• L’ajout, la modification et la suppression d’élément d’une page

• Trouver la position d’élément sur une page

• Trouver et modifier les dimensions d’élément

• Afficher et masquer les éléments

• Réalisation d’une navigation par onglets

• Réalisation d’un système de question-réponse

• Animation d’élément

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Création d’une fiche produit et modification des images et des liens

• Ecoute d’événement sur la souris

• Ecoute d’événement sur le clavier

• Ecoute d’événement sur un formulaire

• Ecoute d’événement sur le navigateur

• La sélection d’élément de formulaire

• La sélection avancée d’élément sur un tableau

• La validation de formulaire côté client avec jQuery

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Envoyer des données en AJAX par GET

• Envoyer des données AJAX par GET et retour en JSON

• Poster un formulaire en AJAX

• Uploader un fichier en AJAX et suivre sa progression

• Naviguer dans un site en AJAX

• Créer une todo list

• Utiliser un plugin jQuery dans une application Google Maps

• Créer son propre plugin jQuery

Formation jQuery, Ajax et jQuery UI alphorm.com™©


Ce qu’on a couvert
• Découvert de jQuery UI

• Utiliser jQuery UI dans la mise en place d’un datepicker

• Où trouver des ressources pour progresser

• Où trouver des solutions et de l’aide en cas de besoin

Formation jQuery, Ajax et jQuery UI alphorm.com™©


A bientôt

Contact
Twitter : https://twitter.com/simpledevMe
Email : lcorrefabien@gmail.com

Formation jQuery, Ajax et jQuery UI alphorm.com™©

Vous aimerez peut-être aussi