Présentation de la formation :

jQuery, Ajax et jQuery UI

Site : [Link] Fabien LE CORRE

Blog : [Link] Développeur, Formateur et
Forum : [Link] Consultant indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Présentation du formateur
• Fabien LE CORRE

• Développeur et formateur PHP MySQL jQuery

• Email : lcorrefabien@[Link]

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 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 [Link]™©

 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 [Link]™©

 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 [Link]™©

 Logiciels nécessaires
• Un éditeur de texte comme par exemple sublimetext :
[Link]
• 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
[Link]

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ressources recommandées
• Sites/Blogs
Learning center jQuery [Link]
Openclassroom (Site du zéro) [Link]
ecrivez-moins-pour-faire-plus

• Livres
Javascript : The good parts : [Link]
Crockford/dp/0596517742 (Une référence)

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 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 [Link]™©

 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 [Link]™©

 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 [Link]™©

 Les autres formations dév sur Alphorm

Formation jQuery, Ajax et jQuery UI [Link]™©

 Les autres formations dév sur Alphorm

Formation jQuery, Ajax et jQuery UI [Link]™©

 Write less, do more

GO
Formation jQuery, Ajax et jQuery UI [Link]™©
 Environnement de travail
Préparation du terrain

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 Plan
• Création de notre dossier de travail

• Télécharger jQuery [Link]

• 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 [Link]™©

 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 [Link]™©

 Environnement de travail
Premier programme

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 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 [Link]™©

 Sélection simple
Sélection
et manipulation
Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Seléction

Formation jQuery, Ajax et jQuery UI [Link]™©

 Stocker dans des variables

Formation jQuery, Ajax et jQuery UI [Link]™©

 Eléments parent > enfant

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

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

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Ajouter, modifier, supprimer

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

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

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Récupérer une position

Formation jQuery, Ajax et jQuery UI [Link]™©

 Modifier une position

Formation jQuery, Ajax et jQuery UI [Link]™©

 Scroll To

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 Les dimensions
Trouver et modifier
les dimensions

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Récupérer les dimensions d’une image

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 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 [Link]™©

 Afficher et cacher
Jouer à cache cache

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Afficher et cacher un élément

Formation jQuery, Ajax et jQuery UI [Link]™©

 Appliquer un style de fadeIn fadeOut

Formation jQuery, Ajax et jQuery UI [Link]™©

 Appliquer un style de slide

Formation jQuery, Ajax et jQuery UI [Link]™©

 Utiliser la fonction slideToggle()

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 Cas concrets et animations
Réaliser une navigation
par onglet

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Création de la structure HTML

Formation jQuery, Ajax et jQuery UI [Link]™©

 Masquer du contenu au chargement

Formation jQuery, Ajax et jQuery UI [Link]™©

 Afficher le contenu désiré

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

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

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Création de la structure

Formation jQuery, Ajax et jQuery UI [Link]™©

 Masquer les réponses en CSS

Formation jQuery, Ajax et jQuery UI [Link]™©

 Afficher et masquer les réponses

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 Cas concrets et animations
Animer un élément

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 Cas concrets et animations
Créer une fiche produit

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Création d’une fiche produit

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 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 [Link]™©

 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 [Link]™©

 Les évènements
Evènements sur la souris

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Le click utilisateur

Formation jQuery, Ajax et jQuery UI [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 La sortie de la souris

Formation jQuery, Ajax et jQuery UI [Link]™©

 Quand la souris est sur un élément

Formation jQuery, Ajax et jQuery UI [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 Les évènements
Evènements clavier

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Création d’un simple champ formulaire

Formation jQuery, Ajax et jQuery UI [Link]™©

 L’événement keyup

Formation jQuery, Ajax et jQuery UI [Link]™©

 L’événement keypress

Formation jQuery, Ajax et jQuery UI [Link]™©

 L’événement focusout

Formation jQuery, Ajax et jQuery UI [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 Les évènements
Evènements formulaire

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Création d’un formulaire

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ecouter la soumission du formulaire

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ecouter le focus sur un champ

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ecouter la sortie d’un champ

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ecouter un changement de valeur

Formation jQuery, Ajax et jQuery UI [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 Les évènements
Evènements navigateur

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Chargement du document

Formation jQuery, Ajax et jQuery UI [Link]™©

 Fermeture de la page

Formation jQuery, Ajax et jQuery UI [Link]™©

 Le chargement d’une image avec load

Formation jQuery, Ajax et jQuery UI [Link]™©

 Redimensionnement de la fenêtre

Formation jQuery, Ajax et jQuery UI [Link]™©

 Le scroll a bougé

Formation jQuery, Ajax et jQuery UI [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 Les sélecteurs avancés
Les formulaires

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Création d’un formulaire

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ecouter le focus sur un champ

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ecouter les checkbox

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ecouter les boutons radio

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ecouter les select

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

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

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Un élément sur 2

Formation jQuery, Ajax et jQuery UI [Link]™©

 Elément par son indice

Formation jQuery, Ajax et jQuery UI [Link]™©

 Le premier élément

Formation jQuery, Ajax et jQuery UI [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 Eléments de type header

Formation jQuery, Ajax et jQuery UI [Link]™©

 Le dernier élément

Formation jQuery, Ajax et jQuery UI [Link]™©

 Elément d’indice inférieur à

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

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

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Création d’un formulaire

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ecouter la soumission du formulaire

Formation jQuery, Ajax et jQuery UI [Link]™©

 Valider un champ de type text

Formation jQuery, Ajax et jQuery UI [Link]™©

 Afficher les messages d’erreur

Formation jQuery, Ajax et jQuery UI [Link]™©

 Valider un champ select

Formation jQuery, Ajax et jQuery UI [Link]™©

 Valider un champ de type checkbox

Formation jQuery, Ajax et jQuery UI [Link]™©

 Valider un champ de type radio

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 AJAX
Présentation d’Ajax

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 Plan
• Qu’est ce que l’ AJAX

• Quels sont les avantages pour l’utilisateur

• jQuery et AJAX

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 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 [Link]™©

 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 [Link]™©

 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 [Link]™©

 AJAX
Envoyer des données
par GET

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 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 [Link]™©

 Traiter les données côté serveur

Formation jQuery, Ajax et jQuery UI [Link]™©

 Renvoyer une réponse au client

Formation jQuery, Ajax et jQuery UI [Link]™©

 Récupérer la réponse du serveur

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 AJAX
Envoi par GET
et réponse JSON

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 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 [Link]™©

 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 [Link]™©

 Traiter les données en PHP

Formation jQuery, Ajax et jQuery UI [Link]™©

 Retourner les données au format JSON

Formation jQuery, Ajax et jQuery UI [Link]™©

 Traiter les données JSON côté client

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 AJAX
Poster un formulaire
en AJAX
Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Création de la base de donnée

Formation jQuery, Ajax et jQuery UI [Link]™©

 Création du formulaire de commentaires

Formation jQuery, Ajax et jQuery UI [Link]™©

 Récupérer les données en BDD

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 Vérification des données en PHP

Formation jQuery, Ajax et jQuery UI [Link]™©

 Poster le formulaire en AJAX

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 Vérifier si la requête est en AJAX

Formation jQuery, Ajax et jQuery UI [Link]™©

 Récupérer et afficher les erreurs en AJAX

Formation jQuery, Ajax et jQuery UI [Link]™©

 Récupérer et afficher le succès

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 AJAX
Upload de fichier
avec progress bar

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Création du formulaire d’upload

Formation jQuery, Ajax et jQuery UI [Link]™©

 Enregistrer le fichier posté

Formation jQuery, Ajax et jQuery UI [Link]™©

 Poster le fichier en AJAX

Formation jQuery, Ajax et jQuery UI [Link]™©

 Traquer la progression de l’upload

Formation jQuery, Ajax et jQuery UI [Link]™©

 Afficher la progression à l’utilisateur

Formation jQuery, Ajax et jQuery UI [Link]™©

 Afficher le message de succès

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 AJAX
Navigation AJAX

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Créer une table en base de données

Formation jQuery, Ajax et jQuery UI [Link]™©

 Récupérer le contenu de la table

Formation jQuery, Ajax et jQuery UI [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 Créer navigation en PHP

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ajout de l’AJAX

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 AJAX
Todo List

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Créer une table en BDD

Formation jQuery, Ajax et jQuery UI [Link]™©

 Afficher les données

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ajouter des données

Formation jQuery, Ajax et jQuery UI [Link]™©

 Mettre à jour les données

Formation jQuery, Ajax et jQuery UI [Link]™©

 Effacer les données

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 Plugins jQuery
Utiliser un plugin

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 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 [Link]™©

 Où trouver des plugins jQuery
• En cherchant sur Google

• Dans la partie plugins du site officiel [Link]

Formation jQuery, Ajax et jQuery UI [Link]™©

 Plugin Gmaps

Formation jQuery, Ajax et jQuery UI [Link]™©

 Intégrer le plugin à notre document

Formation jQuery, Ajax et jQuery UI [Link]™©

 Utiliser le plugin

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 Plugins jQuery
Créer un plugin

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 Création d’un plugin jQuery

Formation jQuery, Ajax et jQuery UI [Link]™©

 Intégration du plugin au document

Formation jQuery, Ajax et jQuery UI [Link]™©

 Utiliser notre plugin

Formation jQuery, Ajax et jQuery UI [Link]™©

 Ajouter des option à notre plugin

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 jQuery UI
Présentation de
jQuery UI
Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 Plan
• Présentation de jQuery UI

• Les interactions

• Les widgets

• Les effects

• Les utilities

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 Les interactions

Formation jQuery, Ajax et jQuery UI [Link]™©

 Les widgets

Formation jQuery, Ajax et jQuery UI [Link]™©

 Les effects

Formation jQuery, Ajax et jQuery UI [Link]™©

 Les utilities

Formation jQuery, Ajax et jQuery UI [Link]™©

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

• Les interactions

• Les widgets

• Les effects

• Les utilities

Formation jQuery, Ajax et jQuery UI [Link]™©

 jQuery UI
Utilisation de
jQuery UI
Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 Plan
• Télécharger jQuery UI

• Intégrer jQuery UI

• Utiliser le widget datepicker de jQuery UI

Formation jQuery, Ajax et jQuery UI [Link]™©

 Télécharger jQuery UI

Formation jQuery, Ajax et jQuery UI [Link]™©

 Intégrer jQuery UI

Formation jQuery, Ajax et jQuery UI [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 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 [Link]™©

 Aide et ressources
Ressources

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 Plan
• Trouver des ressources sur le web pour apprendre
et progresser.

Formation jQuery, Ajax et jQuery UI [Link]™©

 Trouver des ressources
• La doc officielle de jQuery : [Link]

• Le learning center de jQuery : [Link]

• Openclassroom tutoriel jQuery :

[Link]
javascript-avec-jquery
• Openclassroom tutoriel jQuery UI :
[Link]
ui
• Grafikart jQuery : [Link]

Formation jQuery, Ajax et jQuery UI [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 Aide et ressources
Problèmes et solutions

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 Plan
• Où trouver des solutions aux problèmes.

Formation jQuery, Ajax et jQuery UI [Link]™©

 Où chercher de l’aide
• Stackoverflow : [Link]

• Forum javascript openclassroom :

[Link]

Formation jQuery, Ajax et jQuery UI [Link]™©

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

Formation jQuery, Ajax et jQuery UI [Link]™©

 Formation jQuery
Conclusion

Site : [Link]
Blog : [Link]
Fabien LE CORRE
Développeur, Formateur et Consultant
Forum : [Link] indépendant
Formation jQuery, Ajax et jQuery UI [Link]™©
 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 [Link]™©

 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 [Link]™©

 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 [Link]™©

 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 [Link]™©

 A bientôt

Contact
Twitter : [Link]
Email : lcorrefabien@[Link]

Formation jQuery, Ajax et jQuery UI [Link]™©