Alphorm.com Formation jQuery

8 751 vues

Publié le

Formation complète ici:
http://www.alphorm.com/tutoriel/formation-en-ligne-jquery

Dans cette formation jQuery, vous découvrirez toute la puissance de cette bibliothèque Javascript, qui vous permettra de créer des applications dynamiques très rapidement et simplement.

Vous apprendrez à sélectionner, manipuler et animer les éléments de vos pages web, afin d’offrir plus d’interactivité sur vos sites.

Vous réaliserez aux travers de travaux pratiques, de petites applications permettant d’améliorer grandement le confort de navigation de vos visiteurs.

Vous apprendrez également à concevoir des applications AJAX, permettant de mettre à jour vos pages web sans aucun rechargement de page, offrant ainsi à vos visiteurs une plus grande rapidité et une meilleure expérience.

Vous découvrirez aussi toute la puissance des plugins jQuery, vous permettant de mettre en œuvre des fonctionnalités à la base complexes, très simplement et très rapidement.

Enfin, vous apprendrez à vous servir de la bibliothèque jQuery UI, complémentaire à jQuery, et qui vous permettra de mettre en place une meilleure interface utilisateur.

Publié dans : Technologie
0 commentaire
7 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
8 751
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4 939
Actions
Partages
0
Téléchargements
321
Commentaires
0
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Alphorm.com Formation jQuery

  1. 1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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™©
  14. 14. Les autres formations dév sur Alphorm Formation jQuery, Ajax et jQuery UI alphorm.com™©
  15. 15. Les autres formations dév sur Alphorm Formation jQuery, Ajax et jQuery UI alphorm.com™©
  16. 16. Write less, do more Formation jQuery, Ajax et jQuery UI alphorm.com™© GO
  17. 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. 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. 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. 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. 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. 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. 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. 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™©
  25. 25. Seléction Formation jQuery, Ajax et jQuery UI alphorm.com™©
  26. 26. Stocker dans des variables Formation jQuery, Ajax et jQuery UI alphorm.com™©
  27. 27. Eléments parent > enfant Formation jQuery, Ajax et jQuery UI alphorm.com™©
  28. 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. 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. 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
  31. 31. Ajouter, modifier, supprimer Formation jQuery, Ajax et jQuery UI alphorm.com™©
  32. 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. 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. 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™©
  35. 35. Récupérer une position Formation jQuery, Ajax et jQuery UI alphorm.com™©
  36. 36. Modifier une position Formation jQuery, Ajax et jQuery UI alphorm.com™©
  37. 37. Scroll To Formation jQuery, Ajax et jQuery UI alphorm.com™©
  38. 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. 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. 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™©
  41. 41. Récupérer les dimensions d’une image Formation jQuery, Ajax et jQuery UI alphorm.com™©
  42. 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. 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. 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. 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. 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. 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
  48. 48. Afficher et cacher un élément Formation jQuery, Ajax et jQuery UI alphorm.com™©
  49. 49. Appliquer un style de fadeIn fadeOut Formation jQuery, Ajax et jQuery UI alphorm.com™©
  50. 50. Appliquer un style de slide Formation jQuery, Ajax et jQuery UI alphorm.com™©
  51. 51. Utiliser la fonction slideToggle() Formation jQuery, Ajax et jQuery UI alphorm.com™©
  52. 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. 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. 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. 55. Création de la structure HTML Formation jQuery, Ajax et jQuery UI alphorm.com™©
  56. 56. Masquer du contenu au chargement Formation jQuery, Ajax et jQuery UI alphorm.com™©
  57. 57. Afficher le contenu désiré Formation jQuery, Ajax et jQuery UI alphorm.com™©
  58. 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. 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. 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. 61. Création de la structure Formation jQuery, Ajax et jQuery UI alphorm.com™©
  62. 62. Masquer les réponses en CSS Formation jQuery, Ajax et jQuery UI alphorm.com™©
  63. 63. Afficher et masquer les réponses Formation jQuery, Ajax et jQuery UI alphorm.com™©
  64. 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. 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. 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. 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. 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. 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. 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™©
  71. 71. Création d’une fiche produit Formation jQuery, Ajax et jQuery UI alphorm.com™©
  72. 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. 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. 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. 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. 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™©
  77. 77. Le click utilisateur Formation jQuery, Ajax et jQuery UI alphorm.com™©
  78. 78. L’entrée de la souris sur un élément Formation jQuery, Ajax et jQuery UI alphorm.com™©
  79. 79. La sortie de la souris Formation jQuery, Ajax et jQuery UI alphorm.com™©
  80. 80. Quand la souris est sur un élément Formation jQuery, Ajax et jQuery UI alphorm.com™©
  81. 81. Ce qu’on a couvert •Ecouter les actions de l’utilisateur avec la souris Formation jQuery, Ajax et jQuery UI alphorm.com™©
  82. 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. 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™©
  84. 84. Création d’un simple champ formulaire Formation jQuery, Ajax et jQuery UI alphorm.com™©
  85. 85. L’événement keyup Formation jQuery, Ajax et jQuery UI alphorm.com™©
  86. 86. L’événement keypress Formation jQuery, Ajax et jQuery UI alphorm.com™©
  87. 87. L’événement focusout Formation jQuery, Ajax et jQuery UI alphorm.com™©
  88. 88. Ce qu’on a couvert • Ecouter les interactions de l’utilisateur avec le clavier Formation jQuery, Ajax et jQuery UI alphorm.com™©
  89. 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. 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
  91. 91. Création d’un formulaire Formation jQuery, Ajax et jQuery UI alphorm.com™©
  92. 92. Ecouter la soumission du formulaire Formation jQuery, Ajax et jQuery UI alphorm.com™©
  93. 93. Ecouter le focus sur un champ Formation jQuery, Ajax et jQuery UI alphorm.com™©
  94. 94. Ecouter la sortie d’un champ Formation jQuery, Ajax et jQuery UI alphorm.com™©
  95. 95. Ecouter un changement de valeur Formation jQuery, Ajax et jQuery UI alphorm.com™©
  96. 96. Ce qu’on a couvert • Ecouter les interactions de l’utilisateur avec un formulaire Formation jQuery, Ajax et jQuery UI alphorm.com™©
  97. 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. 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
  99. 99. Chargement du document Formation jQuery, Ajax et jQuery UI alphorm.com™©
  100. 100. Fermeture de la page Formation jQuery, Ajax et jQuery UI alphorm.com™©
  101. 101. Le chargement d’une image avec load Formation jQuery, Ajax et jQuery UI alphorm.com™©
  102. 102. Redimensionnement de la fenêtre Formation jQuery, Ajax et jQuery UI alphorm.com™©
  103. 103. Le scroll a bougé Formation jQuery, Ajax et jQuery UI alphorm.com™©
  104. 104. Ce qu’on a couvert • Ecouter les interactions entre l’utilisateur et le navigateur Formation jQuery, Ajax et jQuery UI alphorm.com™©
  105. 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. 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
  107. 107. Création d’un formulaire Formation jQuery, Ajax et jQuery UI alphorm.com™©
  108. 108. Ecouter le focus sur un champ Formation jQuery, Ajax et jQuery UI alphorm.com™©
  109. 109. Ecouter les checkbox Formation jQuery, Ajax et jQuery UI alphorm.com™©
  110. 110. Ecouter les boutons radio Formation jQuery, Ajax et jQuery UI alphorm.com™©
  111. 111. Ecouter les select Formation jQuery, Ajax et jQuery UI alphorm.com™©
  112. 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. 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. 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. 115. Un élément sur 2 Formation jQuery, Ajax et jQuery UI alphorm.com™©
  116. 116. Elément par son indice Formation jQuery, Ajax et jQuery UI alphorm.com™©
  117. 117. Le premier élément Formation jQuery, Ajax et jQuery UI alphorm.com™©
  118. 118. Elément dont l’indice est supérieur à Formation jQuery, Ajax et jQuery UI alphorm.com™©
  119. 119. Eléments de type header Formation jQuery, Ajax et jQuery UI alphorm.com™©
  120. 120. Le dernier élément Formation jQuery, Ajax et jQuery UI alphorm.com™©
  121. 121. Elément d’indice inférieur à Formation jQuery, Ajax et jQuery UI alphorm.com™©
  122. 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. 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. 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
  125. 125. Création d’un formulaire Formation jQuery, Ajax et jQuery UI alphorm.com™©
  126. 126. Ecouter la soumission du formulaire Formation jQuery, Ajax et jQuery UI alphorm.com™©
  127. 127. Valider un champ de type text Formation jQuery, Ajax et jQuery UI alphorm.com™©
  128. 128. Afficher les messages d’erreur Formation jQuery, Ajax et jQuery UI alphorm.com™©
  129. 129. Valider un champ select Formation jQuery, Ajax et jQuery UI alphorm.com™©
  130. 130. Valider un champ de type checkbox Formation jQuery, Ajax et jQuery UI alphorm.com™©
  131. 131. Valider un champ de type radio Formation jQuery, Ajax et jQuery UI alphorm.com™©
  132. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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™©
  142. 142. Traiter les données côté serveur Formation jQuery, Ajax et jQuery UI alphorm.com™©
  143. 143. Renvoyer une réponse au client Formation jQuery, Ajax et jQuery UI alphorm.com™©
  144. 144. Récupérer la réponse du serveur Formation jQuery, Ajax et jQuery UI alphorm.com™©
  145. 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. 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. 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. 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. 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™©
  150. 150. Traiter les données en PHP Formation jQuery, Ajax et jQuery UI alphorm.com™©
  151. 151. Retourner les données au format JSON Formation jQuery, Ajax et jQuery UI alphorm.com™©
  152. 152. Traiter les données JSON côté client Formation jQuery, Ajax et jQuery UI alphorm.com™©
  153. 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. 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. 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. 156. Création de la base de donnée Formation jQuery, Ajax et jQuery UI alphorm.com™©
  157. 157. Création du formulaire de commentaires Formation jQuery, Ajax et jQuery UI alphorm.com™©
  158. 158. Récupérer les données en BDD Formation jQuery, Ajax et jQuery UI alphorm.com™©
  159. 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™©
  160. 160. Vérification des données en PHP Formation jQuery, Ajax et jQuery UI alphorm.com™©
  161. 161. Poster le formulaire en AJAX Formation jQuery, Ajax et jQuery UI alphorm.com™©
  162. 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. 163. Vérifier si la requête est en AJAX Formation jQuery, Ajax et jQuery UI alphorm.com™©
  164. 164. Récupérer et afficher les erreurs en AJAX Formation jQuery, Ajax et jQuery UI alphorm.com™©
  165. 165. Récupérer et afficher le succès Formation jQuery, Ajax et jQuery UI alphorm.com™©
  166. 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. 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. 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
  169. 169. Création du formulaire d’upload Formation jQuery, Ajax et jQuery UI alphorm.com™©
  170. 170. Enregistrer le fichier posté Formation jQuery, Ajax et jQuery UI alphorm.com™©
  171. 171. Poster le fichier en AJAX Formation jQuery, Ajax et jQuery UI alphorm.com™©
  172. 172. Traquer la progression de l’upload Formation jQuery, Ajax et jQuery UI alphorm.com™©
  173. 173. Afficher la progression à l’utilisateur Formation jQuery, Ajax et jQuery UI alphorm.com™©
  174. 174. Afficher le message de succès Formation jQuery, Ajax et jQuery UI alphorm.com™©
  175. 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. 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. 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. 178. Créer une table en base de données Formation jQuery, Ajax et jQuery UI alphorm.com™©
  179. 179. Récupérer le contenu de la table Formation jQuery, Ajax et jQuery UI alphorm.com™©
  180. 180. Créer la structure et insérer les données Formation jQuery, Ajax et jQuery UI alphorm.com™©
  181. 181. Créer navigation en PHP Formation jQuery, Ajax et jQuery UI alphorm.com™©
  182. 182. Ajout de l’AJAX Formation jQuery, Ajax et jQuery UI alphorm.com™©
  183. 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. 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. 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. 186. Créer une table en BDD Formation jQuery, Ajax et jQuery UI alphorm.com™©
  187. 187. Afficher les données Formation jQuery, Ajax et jQuery UI alphorm.com™©
  188. 188. Ajouter des données Formation jQuery, Ajax et jQuery UI alphorm.com™©
  189. 189. Mettre à jour les données Formation jQuery, Ajax et jQuery UI alphorm.com™©
  190. 190. Effacer les données Formation jQuery, Ajax et jQuery UI alphorm.com™©
  191. 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. 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. 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. 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. 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™©
  196. 196. Plugin Gmaps Formation jQuery, Ajax et jQuery UI alphorm.com™©
  197. 197. Intégrer le plugin à notre document Formation jQuery, Ajax et jQuery UI alphorm.com™©
  198. 198. Utiliser le plugin Formation jQuery, Ajax et jQuery UI alphorm.com™©
  199. 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. 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. 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™©
  202. 202. Création d’un plugin jQuery Formation jQuery, Ajax et jQuery UI alphorm.com™©
  203. 203. Intégration du plugin au document Formation jQuery, Ajax et jQuery UI alphorm.com™©
  204. 204. Utiliser notre plugin Formation jQuery, Ajax et jQuery UI alphorm.com™©
  205. 205. Ajouter des option à notre plugin Formation jQuery, Ajax et jQuery UI alphorm.com™©
  206. 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. 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. 208. Plan • Présentation de jQuery UI • Les interactions • Les widgets • Les effects Formation jQuery, Ajax et jQuery UI alphorm.com™© • Les utilities
  209. 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.
  210. 210. Les interactions Formation jQuery, Ajax et jQuery UI alphorm.com™©
  211. 211. Les widgets Formation jQuery, Ajax et jQuery UI alphorm.com™©
  212. 212. Les effects Formation jQuery, Ajax et jQuery UI alphorm.com™©
  213. 213. Les utilities Formation jQuery, Ajax et jQuery UI alphorm.com™©
  214. 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. 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. 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™©
  217. 217. Télécharger jQuery UI Formation jQuery, Ajax et jQuery UI alphorm.com™©
  218. 218. Intégrer jQuery UI Formation jQuery, Ajax et jQuery UI alphorm.com™©
  219. 219. Utiliser le widget datepicker • Pour simplifier la saisie d’une date, utilisons un datepicker Formation jQuery, Ajax et jQuery UI alphorm.com™©
  220. 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. 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
  222. 222. Plan •Trouver des ressources sur le web pour apprendre et progresser. Formation jQuery, Ajax et jQuery UI alphorm.com™©
  223. 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. 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. 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. 226. Plan • Où trouver des solutions aux problèmes. Formation jQuery, Ajax et jQuery UI alphorm.com™©
  227. 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. 228. Ce qu’on a couvert . Comment trouver de l’aide en cas de besoin. Formation jQuery, Ajax et jQuery UI alphorm.com™©
  229. 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. 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. 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. 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. 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. 234. A bientôt Contact Twitter : https://twitter.com/simpledevMe Email : lcorrefabien@gmail.com Formation jQuery, Ajax et jQuery UI alphorm.com™©

×