Alphorm.com Formation jQuery
-
Upload
alphormcom -
Category
Technology
-
view
1.508 -
download
31
Transcript of Alphorm.com Formation jQuery
-
Prsentation de la formation : jQuery, Ajax et jQuery UI
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
jQuery, Ajax et jQuery UI
-
Plan
. Prsentation du formateur
. Publics concerns
. Connaissances requises
. Quest ce que jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com
. Avantages utiliser jQuery
. Logiciels ncessaires
. Rsum de la formation
-
Prsentation du formateur
Fabien LE CORRE
Dveloppeur et formateur PHP MySQL jQuery
Email : [email protected]
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Publics concerns
Tous les dveloppeurs et apprentis dveloppeurs qui souhaitent amliorer le confort et lexprience des utilisateurs de leurs site web.
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Connaissances requises
Vous devez imprativement connatre les langage HTML et CSS pour pouvoir suivre cette formation.
Avoir des bases en Javascript est un plus.
Vous devez galement connatre le PHP et MySQL qui seront utiliss dans la partie AJAX de la formation.
Connatre la diffrence entre le client (le navigateur) et
Formation jQuery, Ajax et jQuery UI alphorm.com
Connatre la diffrence entre le client (le navigateur) et le serveur (apache, nginx).
-
Quest ce que jQuery?
jQuery est une bibliothque JavaScript cre en 2006 par John Resing, cest un simple fichier JavaScript que lon va inclure dans nos document HTML ou PHP comme nimporte quel fichier JavaScript.
jQuery va nous permettre de parcourir nos documents, de slectionner les lments, de les manipuler, de modifier leur apparence, dcouter les actions de lutilisateur comme par exemple le click de la souris, de crer des effets visuels et des animations sur la page, et de faire de lAJAX que lon dcouvrira dans
Formation jQuery, Ajax et jQuery UI alphorm.com
et des animations sur la page, et de faire de lAJAX que lon dcouvrira dans cette formation, ce qui nous permettra de faire de lchange de donnes entre client et serveur et vice versa, sans avoir recharger la page.
-
Avantages utiliser jQuery
Utiliser une bibliothque telle que jQuery, va vous permettre de crer vos applications beaucoup plus rapidement et simplement que si vous la codiez en pur JavaScript. jQuery va vous permettre darriver au mme rsultat en crivant beaucoup moins de code, avec une syntaxe beaucoup plus simple et agrable que celle du pur JavaScript.
Lautre avantage est que vous naurez plus vous soucier de la compatibilit entre les diffrents navigateurs, jQuery sen occupe votre place et vous vitera
Formation jQuery, Ajax et jQuery UI alphorm.com
entre les diffrents navigateurs, jQuery sen occupe votre place et vous vitera donc dventuelles heures perdues dboguer votre application
De plus la communaut est immense et trs active et vous naurez aucun mal trouver de laide en cas de besoin.
-
Logiciels ncessaires
Un diteur de texte comme par exemple sublimetext : http://www.sublimetext.com/
PHP, MySQL, phpmyadmin pour administrer notre base de donnes, ainsi quun serveur Apache ou Nginx, dfaut une installation MAMP ou WAMP selon votre environnement de dveloppementhttp://www.mamp.info/de/
Formation jQuery, Ajax et jQuery UI alphorm.com
http://www.mamp.info/de/
-
Ressources recommandes
Sites/Blogs
Learning center jQuery http://learn.jquery.com/
Openclassroom (Site du zro) 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 rfrence)
-
Rsum de la formation
1. Slectionner les divers lments dune page
2. Ajouter, modifier et supprimer les lments dune page
3. Rcuprer et modifier la position dun lment
4. Rcuprer et modifier les dimensions dun lment
Formation jQuery, Ajax et jQuery UI alphorm.com
5. Faire apparatre et disparatre un lment
6. Crer un systme de navigation par onglet
7. Crer un systme de FAQ amlior par jQuery
8. Animer un lment
-
Rsum de la formation
9. Cration dune fiche produit
10. Ecouter les vnements sur la souris
11. Ecouter les vnements sur le clavier
12. Ecouter les vnements sur un formulaire
Formation jQuery, Ajax et jQuery UI alphorm.com
13. Ecouter les vnements sur le navigateur
14. Les slecteurs sur formulaire
15. Slectionner les lments dun tableau
16. Valider un formulaire avec jQuery
-
Rsum de la formation
17. Premire requte en AJAX par GET
18. Requte 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. Systme de navigation en AJAX
22. Crer un systme de todo list en AJAX
23. Utiliser un plugin jQuery (application google maps)
24. Crer son propre plugin jQuery
-
Rsum de la formation
25. Prsentation de jQuery-UI
26. Tlchargement et intgration de jQuery-UI
27. Utilisation du widget datepicker de jQuery-UI
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Les autres formations dv sur Alphorm
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Les autres formations dv sur Alphorm
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Write less, do more
Formation jQuery, Ajax et jQuery UI alphorm.com
GO
-
Prparation du terrain
Environnement de travail
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Prparation du terrain
-
Plan
Cration de notre dossier de travail
Tlcharger jQuery http://jquery.com
O trouver la documentation si besoin?
Prsentation de la feuille de style bootstrap utilise pour la formation
Formation jQuery, Ajax et jQuery UI alphorm.com
Intgration de jQuery notre document
-
Ce quon a couvert
. Cration de notre environnement de travail
. Le tlchargement et linstallation 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
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Premier programme
-
Plan
Crer un premier programme jQuery (Hello World)
Prsentation de la console JavaScript du navigateur
Afficher des informations dans la console
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Afficher une bote dalert aprs le chargement du document
Utiliser la console javascript afin dafficher des informations
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Slection
Slection simple
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Slection et manipulation
-
Plan
Slectionner un lment pour le manipuler
Slectionner plusieurs lments et les manipuler
Bonne pratique, stocker les lments dans des variables
Slectionner des lments par rapport leur parent ou enfant
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Selction
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Stocker dans des variables
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Elments parent > enfant
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Slectionner des lment et les manipuler
Stocker les lments dans des variable pour plus de rapidit
Comprhension de la notion parent > enfant dans le document
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ajouter, modifier
Slection simple
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Ajouter, modifier et supprimer des lments
-
Plan
Ajouter un lment
Modifier un lment
Supprimer un lment
Ajouter un classe un lment
Formation jQuery, Ajax et jQuery UI alphorm.com
Modifier la classe dun lment
Supprimer la classe dun lment
-
Ajouter, modifier, supprimer
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Comment ajouter, modifier et supprimer un lment
Comment ajouter, modifier et supprimer la classe dun lment
Formation jQuery, Ajax et jQuery UI alphorm.com
-
La position des lments
O est mon lment
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
La position des lments
-
Plan
Rcuprer la position dun lment
Modifier la position dun lment
Scroller jusqu un lment et jusquen haut de la page
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Rcuprer 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 quon a couvert
Rcuprer la position dun lment et la modifier
Se rendre la position dun lment de la page
Se rendre en haut de la page
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Trouver et modifier
Les dimensions
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Trouver et modifier les dimensions
-
Plan
Rcuprer les dimensions des lments
Modifier les dimensions des lments
Un formulaire pour redimensionner une image
Rcuprer les dimensions de lcran, du document et de la fentre
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Rcuprer les dimensions dune image
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Modifier les dimensions dune image
Pour modifier les dimensions dun lment il suffit de faire passer en paramtres des fonction width() et height() de jQuery la largeur et la hauteur souhaites.
$(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 lcran et du document
On peut rcuprer les dimensions de lcran, du document et de la fentre du navigateur.
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
On a vu comment rcuprer les dimensions dlments
On a vu comment modifier les dimensions des lments
On a vu comment poster un formulaire et rcuprer les valeur afin de modifier les dimensions dune image
On a vu comment rcuprer les dimensions de lcran, du document et
Formation jQuery, Ajax et jQuery UI alphorm.com
On a vu comment rcuprer les dimensions de lcran, du document et de la fentre
-
Jouer cache cache
Afficher et cacher
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Jouer cache cache
-
Plan
Afficher et masquer un lment
Appliquer un style de fadeIn-fadeOut lors du masquage et de laffichage dun lment
Appliquer un style de slideUp-slideDown lors du masquage et de laffichage dun lment
Formation jQuery, Ajax et jQuery UI alphorm.com
Utilisation de la fonction slideToggle() pour inverser automatiquement leffet masquage / affichage lors du click sur un bouton
-
Afficher et cacher un lment
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 quon a couvert
Nous avons vu comment masquer un lment visible
Comment afficher un lment cach
Comment appliquer diffrents styles lors du masquage et de laffichage dun lment
Comment utiliser la fonction slideToggle() de jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com
Comment utiliser la fonction slideToggle() de jQuery
-
Raliser une navigation
Cas concrets et animations
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Raliser une navigation par onglet
-
Plan
Crer notre structure HTML
Masquer du contenu au chargement de la page
Afficher du contenu lors du click sur un menu
Modifier la classe dun lment pour le rendre actif
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Cration 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 dsir
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Nous avons vu comment crer un systme de navigation par onglet
Nous avons vu comment masquer plusieurs lments au chargement du document
Nous avons vu comment afficher un contenu spcifique lors du click sur un onglet
Formation jQuery, Ajax et jQuery UI alphorm.com
Nous avons vu comment modifier et supprimer les classes des lments pour les rendre actifs ou inactifs
-
Cas concrets et animations
Raliser un systme
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Raliser un systme de question rponse
-
Plan
Crer notre structure HTML
Masquer nos rponses en CSS
Afficher la rponse lors du click sur une question et masquer les autres rponses
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Cration de la structure
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Masquer les rponses en CSS
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Afficher et masquer les rponses
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Nous avons vu comment crer un systme de questions rponses
Comment masquer les rponses en CSS au chargement de la page
Comment afficher la rponse 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 lment
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Animer un lment
-
Plan
Utiliser la fonction animate() pour animer un lment
Changer la taille dun lment
Modifier lopacit dun lment
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Animer un lment
Modifier la taille et lopacit dun lment avec une animation
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Comment utiliser la fonction animate
Comment modifier la taille dun lment
Comment modifier son opacit
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Cas concrets et animations
Crer une fiche produit
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Crer une fiche produit
-
Plan
Cration de notre fiche produit
Modifier lattribut source dune image
Modifier lattribut href dun lien hypertext
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Cration dune fiche produit
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Modifier lattribut src dune image
Lors du click sur une image miniature, on modifie lattribut src de la grande image pour la modifier avec la source de limage slectionne
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Modifier lurl dun lien
Lors du click sur la miniature, on modifie le lien de la grande image pour quil corresponde avec celui de limage slectionne
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Comment crer une fiche produit
Comment modifier les sources des images
Comment modifier les url des liens
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Evnements sur la souris
Les vnements
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Evnements sur la souris
-
Plan
Ecouter le click utilisateur
Ecouter la souris rentrer sur un lment
Ecouter la souris sortir dun lment
Ecouter quand la souris est sur un lment
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Le click utilisateur
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Lentre de la souris sur un lment
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 lment
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Ecouter les actions de lutilisateur avec la souris
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Les vnements
Evnements clavier
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Evnements clavier
-
Plan
Crer un simple formulaire
Ecouter lvnement keyup, lorsque lutilisateur relche une touche
Ecouter lvnement keypress, lorsque lutilisateur presse une touche
Ecouter lvnement focusout, lorsque lutilisateur sort dun champ
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Cration dun simple champ formulaire
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Lvnement keyup
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Lvnement keypress
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Lvnement focusout
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Ecouter les interactions de lutilisateur avec le clavier
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Les vnements
Evnements formulaire
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Evnements formulaire
-
Plan
Crer un formulaire avec diffrents types de champ
Ecouter la soumission du formulaire
Ecouter le focus sur un champ
Ecouter la sortie dun champ
Formation jQuery, Ajax et jQuery UI alphorm.com
Ecouter le changement de valeur dun champ
-
Cration dun 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 dun champ
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ecouter un changement de valeur
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Ecouter les interactions de lutilisateur avec un formulaire
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Evnements navigateur
Les vnements
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Evnements navigateur
-
Plan
Ecouter le chargement du document
Ecouter la fermeture de la page et confirmer avant de quitter
Ecouter le chargement dune image
Ecouter le redimensionnement de la fentre
Formation jQuery, Ajax et jQuery UI alphorm.com
Ecouter le mouvement sur la scroll bar
-
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 dune image avec load
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Redimensionnement de la fentre
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Le scroll a boug
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Ecouter les interactions entre lutilisateur et le navigateur
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Les formulaires
Les slecteurs avancs
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Les formulaires
-
Plan
Cration dun formulaire
Slectionner les diffrents types de champ
Ecouter le focus sur un champ
Ecouter lorsque lutilisateur coche une checkbox
Formation jQuery, Ajax et jQuery UI alphorm.com
Ecouter lorsque lutilisateur coche un bouton radio
Ecouter le changement de valeur dun champ select
-
Cration dun 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 quon a couvert
Ecouter les interactions de lutilisateur avec un formulaire
Comment vrifier si une champ change de valeur
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Les tableaux (et autres)
Les slecteurs avancs
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Les tableaux (et autres)
-
Plan
Slectionner un lment sur 2
Slectionner un lment par son indice
Slectionner le premier lment
Slectionner les lments dont lindice est suprieur
Formation jQuery, Ajax et jQuery UI alphorm.com
Slectionner les lment de type header
Slectionner le dernier lment
Slectionner les lments don lindice est infrieur
-
Un lment sur 2
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Elment par son indice
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Le premier lment
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Elment dont lindice est suprieur
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Elments de type header
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Le dernier lment
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Elment dindice infrieur
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Slectionner un lment sur 2
Slectionner un lment par son indice
Slectionner les lments de type header, h1, h2, h3,
Slectionner les lment dont lindice est suprieur et infrieur
Formation jQuery, Ajax et jQuery UI alphorm.com
Slectionner le premier lment dans le document
Slectionner le dernier lment dans le document
-
Les slecteurs avancs
Validation
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Validation dun formulaire
-
Plan
Crer un formulaire avec diffrents types de champ
Ecouter la soumission du formulaire
Valider un champ de type text
Afficher un message derreur lutilisateur
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
-
Cration dun 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 derreur
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 quon a couvert
Validation dun champ texte
Validation dun champ select
Validation dun champ checkbox
Validation dun champ bouton radio
Formation jQuery, Ajax et jQuery UI alphorm.com
Afficher un message derreur au visiteur
-
Prsentation dAjax
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Prsentation dAjax
-
Plan
Quest ce que l AJAX
Quels sont les avantages pour lutilisateur
jQuery et AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
-
AJAX cest quoi ?
AJAX nest ni un langage, ni une technologie, cest un concept de programmation qui repose sur plusieurs langages dont le JS.
AJAX est lacronyme de Asynchronous Javascript And XML que lon peut traduire par Javascript et XML Asynchrone.
.Asynchrone, cest la capacit dchanger des donnes entre le client et le serveur sans recharger la page.
Formation jQuery, Ajax et jQuery UI alphorm.com
serveur sans recharger la page.
Aujourdhui XML est plutt dlaiss car on lui prfre un autre format de donnes, le JSON (Javascript Object Notation) quon verra plus loin.
-
Quels sont les avantages
La rapidit. Seul les donnes ncessaires sont changes, on ne recharge pas toute la page avec toutes les autres donnes.
Une meilleure ractivit donc, une meilleure interactivit et donc un meilleur confort pour lutilisateur.
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 lAJAX dans notre application.
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Nous avons vu ce qutait AJAX
Quels sont les avantages pour lutilisateur
Ce que jQuery apporte dans la mise en uvre de l AJAX dans nos applications
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Envoyer des donnes
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Envoyer des donnes par GET
-
Plan
Envoyer une requte AJAX par GET au serveur
Traiter les donnes ct serveur
Envoyer une rponse du serveur vers le client
Rcuprer la rponse du serveur et la logger dans la console
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Envoyer une requte par GET
Nous allons utiliser la fonction .get() de jQuery afin denvoyer une chane de caractres depuis le client vers le serveur.
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Traiter les donnes ct serveur
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Renvoyer une rponse au client
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Rcuprer la rponse du serveur
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Envoyer une requte en AJAX par GET
Traiter les donnes envoyes par le client, en PHP ct serveur
Renvoyer des donnes du serveur vers le client
Rcuprer les donnes renvoyes par le serveur
Formation jQuery, Ajax et jQuery UI alphorm.com
Logger ces donnes dans la console
-
Envoi par GET
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Envoi par GET et rponse JSON
-
Plan
Quest ce que le format JSON
Envoyer des donnes en AJAX avec .getJSON()
Traiter les donnes ct serveur
Retourner des donnes du serveur vers le client au format JSON
Formation jQuery, Ajax et jQuery UI alphorm.com
Traiter ces donnes ct client
-
JSON cest quoi ?
JSON cest un format de donnes textuel driv de la notation objet de javascript qui permet dchanger des donnes entre le client et le serveur.
JSON = Javascript Object Notation
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Envoyer des donnes par GET
Nous allons envoyer des donnes par GET et attendre un retour au format JSON grce la fonction .getJSON() de jQuery.
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Traiter les donnes en PHP
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Retourner les donnes au format JSON
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Traiter les donnes JSON ct client
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Ce qu tait le format JSON
Envoyer des donnes en AJAX par GET et retour JSON
Renvoyer des donnes du serveur vers le client au format JSON
Rcuprer ces donnes ct client et les logger dans la console
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Poster un formulaire
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Poster un formulaire en AJAX
-
Plan
Cration dune base de donnes et dune table
Cration dun formulaire
Rcuprer les donnes afficher en BDD
Envoi des donnes sans AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
Vrifications et traitement des donnes en PHP
Poster le formulaire en AJAX
Serializer les donnes poster avec .serialize()
. Rcuprer et afficher les donnes en fonction de la rponse
-
Cration de la base de donne
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Cration du formulaire de commentaires
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Rcuprer les donnes en BDD
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Envoi du formulaire sans AJAX
Nous allons dabord envoyer le formulaire sans Javascript
Puis nous traiterons les donnes en PHP toujours sans JS
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Vrification des donnes 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 donnes postes
La fonction .serialize() de jQuery permet de formater les donnes envoyer, que lon stockera dans une variable.
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Vrifier si la requte est en AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Rcuprer et afficher les erreurs en AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Rcuprer et afficher le succs
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Crer un systme de commentaire qui peut fonctionner sans Javascriptet donc sans AJAX
Ajouter de l AJAX pour le confort et permettre de poster sans recharger la page.
Comment vrifier si une requte est faite en AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
Rcuprer et afficher les donnes renvoyer par le serveur en JSON, en fonction du cas o il ya des erreurs, ou du cas de succs.
-
Upload de fichier
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Upload de fichier avec progress bar
-
Plan
Cration dun formulaire dupload
Traitement et enregistrement du fichier post en PHP
Poster le fichier en AJAX
Traquer la progression de lupload
Formation jQuery, Ajax et jQuery UI alphorm.com
Afficher la progression de lupload dans une progress bar
Rcuprer et afficher le message de succs
-
Cration du formulaire dupload
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 lupload
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Afficher la progression lutilisateur
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Afficher le message de succs
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Cration dun formulaire dupload de fichier
Traiter le fichier ct serveur avec PHP
Poster le fichier en AJAX
Surveiller la progression du fichier en temps rel
Formation jQuery, Ajax et jQuery UI alphorm.com
Afficher la progression de lupload dans une progress bar
Rcuprer et afficher le message de succs
-
Navigation AJAX
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Navigation AJAX
-
Plan
Cration dune table en BDD
Rcuprer le contenu de notre table
Cration de la structure HTML et affichage des donnes en PHP
Cration de la navigation en PHP
Formation jQuery, Ajax et jQuery UI alphorm.com
Ajout d AJAX la navigation pour un meilleur confort
-
Crer une table en base de donnes
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Rcuprer le contenu de la table
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Crer la structure et insrer les donnes
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Crer navigation en PHP
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ajout de lAJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Crer un systme de navigation fonctionnel sans javascript
Amliorer le confort avec lajout d AJAX notre systme
Rcuprer les donnes ct serveur au format JSON
Afficher les donnes rcupres au format JSON avec effet de style
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Todo List
AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Todo List
-
Plan
Cration de la table en BDD
Rcuprer des donnes et les afficher sur la page en PHP
Ajouter des donnes en AJAX
Mettre jour des donnes en AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
Effacer des donnes en AJAX
-
Crer une table en BDD
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Afficher les donnes
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ajouter des donnes
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Mettre jour les donnes
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Effacer les donnes
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Crer un systme de todo list
Ajouter des donnes en AJAX
Modifier des donnes en AJAX
Effacer des donnes en AJAX
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Utiliser un plugin
Plugins jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Utiliser un plugin
-
Plan
Un plugin cest quoi ?
Chercher et trouver un plugin jQuery
Prsentation du plugin Gmaps
Intgrer un plugin jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com
Utiliser un plugin jQuery dans une application avec Google Maps
-
Un plugin cest quoi ?
Un plugin jQuery est une simple extension de jQuery
Cest un fichier javascript contenant des fonctions prtes lemploi 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
-
Intgrer le plugin notre document
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Utiliser le plugin
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Nous avons vu ce qutait un plugin
Comment trouver un plugin
Comment intgrer un plugin
Comment utiliser un plugin dans une application de geolocation
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Crer un plugin
Plugins jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Crer un plugin
-
Plan
Crer un simple plugin jQuery
Intgrer notre plugin
Utiliser notre plugin
Ajouter des options paramtrables notre plugin
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Cration dun plugin jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Intgration 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 quon a couvert
Comment crer un plugin jQuery
Comment intgrer ce plugin
Comment utiliser notre plugin
Comment ajouter des options paramtrables notre plugin
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Prsentation de
jQuery UI
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Prsentation de jQuery UI
-
Plan
Prsentation de jQuery UI
Les interactions
Les widgets
Les effects
Formation jQuery, Ajax et jQuery UI alphorm.com
Les utilities
-
jQuery UI cest quoi ?
jQuery UI est un module externe jQuery, dvelopp par les dveloppeurs de jQuery.
UI signifie User Interface , interface utilisateur en franais, et va nous permettre damliorer linteractivit entre notre application et lutilisateur.
jQuery UI est dot de la mme syntaxe que jQuery et va nous permettre de crer des fonctionnalits trs simplement et rapidement.
Formation jQuery, Ajax et jQuery UI alphorm.com
crer des fonctionnalits trs simplement et rapidement.
-
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 quon a couvert
Ce quest jQuery UI
Les interactions
Les widgets
Les effects
Formation jQuery, Ajax et jQuery UI alphorm.com
Les utilities
-
Utilisation de
jQuery UI
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Utilisation de jQuery UI
-
Plan
Tlcharger jQuery UI
Intgrer jQuery UI
Utiliser le widget datepicker de jQuery UI
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Tlcharger jQuery UI
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Intgrer jQuery UI
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Utiliser le widget datepicker
Pour simplifier la saisie dune date, utilisons un datepicker
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ce quon a couvert
Tlcharger jQuery UI
Intgrer jQuery UI notre document
Utiliser le widget datepicker pour la saisie de date
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Ressources
Aide et ressources
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Ressources
-
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
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
-
Ce quon a couvert
. O trouver des ressources de qualit pour apprendre et progresser.
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Problmes et solutions
Aide et ressources
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Problmes et solutions
-
Plan
O trouver des solutions aux problmes.
Formation jQuery, Ajax et jQuery UI alphorm.com
-
O chercher de laide
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 quon a couvert
. Comment trouver de laide en cas de besoin.
Formation jQuery, Ajax et jQuery UI alphorm.com
-
Conclusion
Formation jQuery
Formation jQuery, Ajax et jQuery UI alphorm.com
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Fabien LE CORREDveloppeur, Formateur et Consultant indpendant
Conclusion
-
Ce quon a couvert
La slection et la manipulation des lment dune page
Lajout, la modification et la suppression dlment dune page
Trouver la position dlment sur une page
Trouver et modifier les dimensions dlment
Formation jQuery, Ajax et jQuery UI alphorm.com
Afficher et masquer les lments
Ralisation dune navigation par onglets
Ralisation dun systme de question-rponse
Animation dlment
-
Ce quon a couvert
Cration dune fiche produit et modification des images et des liens
Ecoute dvnement sur la souris
Ecoute dvnement sur le clavier
Ecoute dvnement sur un formulaire
Formation jQuery, Ajax et jQuery UI alphorm.com
Ecoute dvnement sur le navigateur
La slection dlment de formulaire
La slection avance dlment sur un tableau
La validation de formulaire ct client avec jQuery
-
Ce quon a couvert
Envoyer des donnes en AJAX par GET
Envoyer des donnes 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
Crer une todo list
Utiliser un plugin jQuery dans une application Google Maps
Crer son propre plugin jQuery
-
Ce quon a couvert
Dcouvert de jQuery UI
Utiliser jQuery UI dans la mise en place dun datepicker
O trouver des ressources pour progresser
O trouver des solutions et de laide en cas de besoin
Formation jQuery, Ajax et jQuery UI alphorm.com
-
A bientt
Contact
Twitter : https://twitter.com/simpledevMe
Email : [email protected]
Formation jQuery, Ajax et jQuery UI alphorm.com