Contenu connexe Similaire à Alphorm.com Formation jQuery (20) Alphorm.com Formation jQuery1. Présentation de la formation :
jQuery, Ajax et jQuery UI
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et
Consultant indépendant
jQuery, Ajax et jQuery UI
2. Plan
. Présentation du formateur
. Publics concernés
. Connaissances requises
. Qu’est ce que jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com™©
. Avantages à utiliser jQuery
. Logiciels nécessaires
. Résumé de la formation
3. 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™©
4. 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™©
5. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Connaître la différence entre le client (le navigateur) et
le serveur (apache, nginx).
6. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
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.
7. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
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.
8. 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™©
http://www.mamp.info/de/
9. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Livres
Javascript : The good parts : http://www.amazon.fr/Javascript-Good-Parts-D-
Crockford/dp/0596517742 (Une référence)
10. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
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
11. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
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
12. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
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
13. 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™©
16. Write less, do more
Formation jQuery, Ajax et jQuery UI alphorm.com™©
GO
17. Préparation du terrain
Environnement de travail
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Préparation du terrain
18. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Intégration de jQuery à notre document
19. 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™©
20. Environnement de travail
Premier programme
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Premier programme
21. 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™©
22. 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™©
23. Sélection
Sélection simple
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Sélection
et manipulation
24. 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™©
26. Stocker dans des variables
Formation jQuery, Ajax et jQuery UI alphorm.com™©
28. 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™©
29. Ajouter, modifier
Sélection simple
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Ajouter, modifier
et supprimer des éléments
30. Plan
• Ajouter un élément
• Modifier un élément
• Supprimer un élément
• Ajouter un classe à un élément
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Modifier la classe d’un élément
• Supprimer la classe d’un élément
32. 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™©
33. La position des éléments
Où est mon élément
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
La position des éléments
34. 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™©
38. 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™©
39. Trouver et modifier
Les dimensions
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Trouver et modifier
les dimensions
40. 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™©
42. 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™©
43. 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™©
44. 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™©
45. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• On a vu comment récupérer les dimensions de l’écran, du document et
de la fenêtre
46. Jouer à cache cache
Afficher et cacher
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Jouer à cache cache
47. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Utilisation de la fonction slideToggle() pour inverser automatiquement
l’effet masquage / affichage lors du click sur un bouton
49. Appliquer un style de fadeIn fadeOut
Formation jQuery, Ajax et jQuery UI alphorm.com™©
52. 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™©
• Comment utiliser la fonction slideToggle() de jQuery
53. Réaliser une navigation
Cas concrets et animations
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Réaliser une navigation
par onglet
54. 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™©
55. Création de la structure HTML
Formation jQuery, Ajax et jQuery UI alphorm.com™©
58. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Nous avons vu comment modifier et supprimer les classes des éléments
pour les rendre actifs ou inactifs
59. Cas concrets et animations
Réaliser un système
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Réaliser un système
de question réponse
60. 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™©
61. Création de la structure
Formation jQuery, Ajax et jQuery UI alphorm.com™©
64. 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™©
65. Cas concrets et animations
Animer un élément
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Animer un élément
66. 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™©
67. 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™©
68. 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™©
69. Cas concrets et animations
Créer une fiche produit
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Créer une fiche produit
70. 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™©
72. 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™©
73. 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™©
74. 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™©
75. Evènements sur la souris
Les évènements
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Evènements sur la souris
76. 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™©
78. L’entrée de la souris sur un élément
Formation jQuery, Ajax et jQuery UI alphorm.com™©
79. La sortie de la souris
Formation jQuery, Ajax et jQuery UI alphorm.com™©
80. Quand la souris est sur un élément
Formation jQuery, Ajax et jQuery UI alphorm.com™©
81. Ce qu’on a couvert
•Ecouter les actions de l’utilisateur avec la souris
Formation jQuery, Ajax et jQuery UI alphorm.com™©
82. Les évènements
Evènements clavier
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Evènements clavier
83. 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™©
88. Ce qu’on a couvert
• Ecouter les interactions de l’utilisateur avec le clavier
Formation jQuery, Ajax et jQuery UI alphorm.com™©
89. Les évènements
Evènements formulaire
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Evènements formulaire
90. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Ecouter le changement de valeur d’un champ
93. Ecouter le focus sur un champ
Formation jQuery, Ajax et jQuery UI alphorm.com™©
96. Ce qu’on a couvert
• Ecouter les interactions de l’utilisateur avec un formulaire
Formation jQuery, Ajax et jQuery UI alphorm.com™©
97. Evènements navigateur
Les évènements
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Evènements navigateur
98. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Ecouter le mouvement sur la scroll bar
100. Fermeture de la page
Formation jQuery, Ajax et jQuery UI alphorm.com™©
103. Le scroll a bougé
Formation jQuery, Ajax et jQuery UI alphorm.com™©
104. Ce qu’on a couvert
• Ecouter les interactions entre l’utilisateur et le navigateur
Formation jQuery, Ajax et jQuery UI alphorm.com™©
105. Les formulaires
Les sélecteurs avancés
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Les formulaires
106. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Ecouter lorsque l’utilisateur coche un bouton radio
• Ecouter le changement de valeur d’un champ select
108. Ecouter le focus sur un champ
Formation jQuery, Ajax et jQuery UI alphorm.com™©
112. 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™©
113. Les tableaux (et autres)
Les sélecteurs avancés
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Les tableaux (et autres)
114. 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 à
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• 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 à
115. Un élément sur 2
Formation jQuery, Ajax et jQuery UI alphorm.com™©
116. Elément par son indice
Formation jQuery, Ajax et jQuery UI alphorm.com™©
122. 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 à
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Sélectionner le premier élément dans le document
• Sélectionner le dernier élément dans le document
123. Les sélecteurs avancés
Validation
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Validation
d’un formulaire
124. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Valider un champ de type select
• Valider un champ de type checkbox
• Valider un champ de type bouton radio
127. Valider un champ de type text
Formation jQuery, Ajax et jQuery UI alphorm.com™©
130. Valider un champ de type checkbox
Formation jQuery, Ajax et jQuery UI alphorm.com™©
131. Valider un champ de type radio
Formation jQuery, Ajax et jQuery UI alphorm.com™©
132. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Afficher un message d’erreur au visiteur
133. Présentation d’Ajax
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Présentation d’Ajax
134. 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™©
135. 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.
Formation jQuery, Ajax et jQuery UI alphorm.com™©
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.
136. 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™©
137. 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™©
138. 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™©
139. Envoyer des données
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Envoyer des données
par GET
140. 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™©
141. 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™©
145. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Logger ces données dans la console
146. Envoi par GET
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Envoi par GET
et réponse JSON
147. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Traiter ces données côté client
148. 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™©
149. 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™©
153. 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™©
154. Poster un formulaire
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Poster un formulaire
en AJAX
155. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• 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
156. Création de la base de donnée
Formation jQuery, Ajax et jQuery UI alphorm.com™©
159. 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™©
162. 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™©
163. Vérifier si la requête est en AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com™©
166. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• 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.
167. Upload de fichier
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Upload de fichier
avec progress bar
168. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Afficher la progression de l’upload dans une progress bar
• Récupérer et afficher le message de succès
175. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Afficher la progression de l’upload dans une progress bar
• Récupérer et afficher le message de succès
176. Navigation AJAX
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Navigation AJAX
177. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Ajout d’ AJAX à la navigation pour un meilleur confort
178. Créer une table en base de données
Formation jQuery, Ajax et jQuery UI alphorm.com™©
180. Créer la structure et insérer les données
Formation jQuery, Ajax et jQuery UI alphorm.com™©
183. 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™©
184. Todo List
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Todo List
185. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Effacer des données en AJAX
186. Créer une table en BDD
Formation jQuery, Ajax et jQuery UI alphorm.com™©
189. Mettre à jour les données
Formation jQuery, Ajax et jQuery UI alphorm.com™©
191. 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™©
192. Utiliser un plugin
Plugins jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Utiliser un plugin
193. Plan
• Un plugin c’est quoi ?
• Chercher et trouver un plugin jQuery
• Présentation du plugin Gmaps
• Intégrer un plugin jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Utiliser un plugin jQuery dans une application avec Google Maps
194. 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™©
195. 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™©
197. Intégrer le plugin à notre document
Formation jQuery, Ajax et jQuery UI alphorm.com™©
199. 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™©
200. Créer un plugin
Plugins jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Créer un plugin
201. 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™©
206. 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™©
207. Présentation de
jQuery UI
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Présentation de
jQuery UI
208. Plan
• Présentation de jQuery UI
• Les interactions
• Les widgets
• Les effects
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Les utilities
209. 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™©
créer des fonctionnalités très simplement et rapidement.
214. Ce qu’on a couvert
• Ce qu’est jQuery UI
• Les interactions
• Les widgets
• Les effects
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Les utilities
215. Utilisation de
jQuery UI
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Utilisation de
jQuery UI
216. 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™©
219. Utiliser le widget datepicker
• Pour simplifier la saisie d’une date, utilisons un datepicker
Formation jQuery, Ajax et jQuery UI alphorm.com™©
220. 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™©
221. Ressources
Aide et ressources
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Ressources
223. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• Openclassroom tutoriel jQuery UI :
http://openclassrooms.com/courses/decouvrez-la-puissance-de-jquery-
ui
• Grafikart jQuery : http://www.grafikart.fr/tutoriels/jquery
224. Ce qu’on a couvert
. Où trouver des ressources de qualité pour apprendre et
progresser.
Formation jQuery, Ajax et jQuery UI alphorm.com™©
225. Problèmes et solutions
Aide et ressources
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Problèmes et solutions
226. Plan
• Où trouver des solutions aux problèmes.
Formation jQuery, Ajax et jQuery UI alphorm.com™©
227. 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™©
228. Ce qu’on a couvert
. Comment trouver de l’aide en cas de besoin.
Formation jQuery, Ajax et jQuery UI alphorm.com™©
229. Conclusion
Formation jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Conclusion
230. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• 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
231. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• 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
232. 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
Formation jQuery, Ajax et jQuery UI alphorm.com™©
• 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
233. 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™©
234. A bientôt
Contact
Twitter : https://twitter.com/simpledevMe
Email : lcorrefabien@gmail.com
Formation jQuery, Ajax et jQuery UI alphorm.com™©