Alphorm.com Formation jQuery

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

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

Présentation du formateur
• Fabien LE CORRE
• Développeur et formateur PHP MySQL jQuery
• Email : lcorrefabien@gmail.com

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

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
• Connaître la différence entre le client (le navigateur) et
le serveur (apache, nginx).

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
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.

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
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.

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/
http://www.mamp.info/de/

Ressources recommandées
• Sites/Blogs
Learning center jQuery http://learn.jquery.com/
Openclassroom (Site du zéro) http://openclassrooms.com/courses/jquery-
ecrivez-moins-pour-faire-plus
• Livres
Javascript : The good parts : http://www.amazon.fr/Javascript-Good-Parts-D-
Crockford/dp/0596517742 (Une référence)

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

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

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

25. Présentation de jQuery-UI
26. Téléchargement et intégration de jQuery-UI
27. Utilisation du widget datepicker de jQuery-UI

Les autres formations dév sur Alphorm

Write less, do more
GO

Préparation du terrain
Environnement de travail
Fabien LE CORRE
Développeur, Formateur et Consultant
indépendant
Préparation du terrain

Plan
• Création de notre dossier de travail
• Télécharger jQuery http://jquery.com
• Où trouver la documentation si besoin?
• Présentation de la feuille de style bootstrap utilisée pour la formation
• Intégration de jQuery à notre document

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

Environnement de travail
Premier programme
Fabien LE CORRE
indépendant
Premier programme

Plan
• Créer un premier programme jQuery (Hello World)
• Présentation de la console JavaScript du navigateur
• Afficher des informations dans la console

• Afficher une boîte d’alert après le chargement du document
• Utiliser la console javascript afin d’afficher des informations

Sélection
Sélection simple
Fabien LE CORRE
indépendant
Sélection
et manipulation

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

Seléction

Stocker dans des variables

Eléments parent > enfant

• 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

Ajouter, modifier
Sélection simple
Fabien LE CORRE
indépendant
Ajouter, modifier
et supprimer des éléments

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

Ajouter, modifier, supprimer

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

La position des éléments
Où est mon élément
Fabien LE CORRE
indépendant
La position des éléments

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

Récupérer une position

Modifier une position

Scroll To

• 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

Trouver et modifier
Les dimensions
Fabien LE CORRE
indépendant
Trouver et modifier
les dimensions

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

Récupérer les dimensions d’une image

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);

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

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.

• 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
• On a vu comment récupérer les dimensions de l’écran, du document et
de la fenêtre

Jouer à cache cache
Afficher et cacher
Fabien LE CORRE
indépendant
Jouer à cache cache

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

Afficher et cacher un élément

Appliquer un style de fadeIn fadeOut

Appliquer un style de slide

Utiliser la fonction slideToggle()

• 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
• Comment utiliser la fonction slideToggle() de jQuery

Réaliser une navigation
Cas concrets et animations
Fabien LE CORRE
indépendant
Réaliser une navigation
par onglet

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

Création de la structure HTML

Masquer du contenu au chargement

Afficher le contenu désiré

• 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

Réaliser un système
Fabien LE CORRE
indépendant
Réaliser un système
de question réponse

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

Création de la structure

Masquer les réponses en CSS

Afficher et masquer les réponses

• 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

Animer un élément
Fabien LE CORRE
indépendant
Animer un élément

Plan
• Utiliser la fonction animate() pour animer un élément
• Changer la taille d’un élément
• Modifier l’opacité d’un élément

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

• Comment utiliser la fonction animate
• Comment modifier la taille d’un élément
• Comment modifier son opacité

Créer une fiche produit
Fabien LE CORRE
indépendant
Créer une fiche produit

Plan
• Création de notre fiche produit
• Modifier l’attribut source d’une image
• Modifier l’attribut href d’un lien hypertext

Création d’une fiche produit

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

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

• Comment créer une fiche produit
• Comment modifier les sources des images
• Comment modifier les url des liens

Evènements sur la souris
Les évènements
Fabien LE CORRE
indépendant
Evènements sur la souris

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

Le click utilisateur

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

La sortie de la souris

Quand la souris est sur un élément

•Ecouter les actions de l’utilisateur avec la souris

Les évènements
Evènements clavier
Fabien LE CORRE
indépendant
Evènements clavier

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

Création d’un simple champ formulaire

L’événement keyup

L’événement keypress

L’événement focusout

• Ecouter les interactions de l’utilisateur avec le clavier

Les évènements
Evènements formulaire
Fabien LE CORRE
indépendant
Evènements formulaire

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

Création d’un formulaire

Ecouter la soumission du formulaire

Ecouter le focus sur un champ

Ecouter la sortie d’un champ

Ecouter un changement de valeur

• Ecouter les interactions de l’utilisateur avec un formulaire

Evènements navigateur
Les évènements
Fabien LE CORRE
indépendant
Evènements navigateur

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

Chargement du document

Fermeture de la page

Le chargement d’une image avec load

Redimensionnement de la fenêtre

Le scroll a bougé

• Ecouter les interactions entre l’utilisateur et le navigateur

Les formulaires
Les sélecteurs avancés
Fabien LE CORRE
indépendant
Les formulaires

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

Ecouter les checkbox

Ecouter les boutons radio

Ecouter les select

• Ecouter les interactions de l’utilisateur avec un formulaire
• Comment vérifier si une champ change de valeur

Les tableaux (et autres)
Fabien LE CORRE
indépendant
Les tableaux (et autres)

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 à

Un élément sur 2

Elément par son indice

Le premier élément

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

Eléments de type header

Le dernier élément

Elément d’indice inférieur à

• 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

Validation
Fabien LE CORRE
indépendant
Validation
d’un formulaire

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

Valider un champ de type text

Afficher les messages d’erreur

Valider un champ select

Valider un champ de type checkbox

Valider un champ de type radio

• 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

Présentation d’Ajax
AJAX
Fabien LE CORRE
indépendant
Présentation d’Ajax

Plan
• Qu’est ce que l’ AJAX
• Quels sont les avantages pour l’utilisateur
• jQuery et AJAX

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.
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.

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.

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.

• 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

Envoyer des données
AJAX
Fabien LE CORRE
indépendant
Envoyer des données
par GET

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

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.

Traiter les données côté serveur

Renvoyer une réponse au client

Récupérer la réponse du serveur

• 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

Envoi par GET
AJAX
Fabien LE CORRE
indépendant
Envoi par GET
et réponse JSON

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

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

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.

Traiter les données en PHP

Retourner les données au format JSON

Traiter les données JSON côté client

• 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

Poster un formulaire
AJAX
Fabien LE CORRE
indépendant
Poster un formulaire
en AJAX

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

Création de la base de donnée

Création du formulaire de commentaires

Récupérer les données en BDD

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

Vérification des données en PHP

Poster le formulaire en AJAX

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.

Vérifier si la requête est en AJAX

Récupérer et afficher les erreurs en AJAX

Récupérer et afficher le succès

• 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.

Upload de fichier
AJAX
Fabien LE CORRE
indépendant
Upload de fichier
avec progress bar

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

Création du formulaire d’upload

Enregistrer le fichier posté

Poster le fichier en AJAX

Traquer la progression de l’upload

Afficher la progression à l’utilisateur

Afficher le message de succès

• 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

Navigation AJAX
AJAX
Fabien LE CORRE
indépendant
Navigation AJAX

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

Créer une table en base de données

Récupérer le contenu de la table

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

Créer navigation en PHP

Ajout de l’AJAX

• 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

Todo List
AJAX
Fabien LE CORRE
indépendant
Todo List

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

Créer une table en BDD

Afficher les données

Ajouter des données

Mettre à jour les données

Effacer les données

• 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

Utiliser un plugin
Plugins jQuery
Fabien LE CORRE
indépendant
Utiliser un plugin

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

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

Où trouver des plugins jQuery
• En cherchant sur Google
• Dans la partie plugins du site officiel http://plugins.jquery.com/

Plugin Gmaps

Intégrer le plugin à notre document

Utiliser le plugin

• 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

Créer un plugin
Plugins jQuery
Fabien LE CORRE
indépendant
Créer un plugin

Plan
• Créer un simple plugin jQuery
• Intégrer notre plugin
• Utiliser notre plugin
• Ajouter des options paramétrables à notre plugin

Création d’un plugin jQuery

Intégration du plugin au document

Utiliser notre plugin

Ajouter des option à notre plugin

• Comment créer un plugin jQuery
• Comment intégrer ce plugin
• Comment utiliser notre plugin
• Comment ajouter des options paramétrables à notre plugin

Présentation de
jQuery UI
Fabien LE CORRE
indépendant
Présentation de
jQuery UI

Plan
• Présentation de jQuery UI
• Les interactions
• Les widgets
• Les effects
• Les utilities

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.
créer des fonctionnalités très simplement et rapidement.

Les interactions

Les widgets

Les effects

Les utilities

• Ce qu’est jQuery UI
• Les interactions
• Les widgets
• Les effects
• Les utilities

Utilisation de
jQuery UI
Fabien LE CORRE
indépendant
Utilisation de
jQuery UI

Plan
• Télécharger jQuery UI
• Intégrer jQuery UI
• Utiliser le widget datepicker de jQuery UI

Télécharger jQuery UI

Intégrer jQuery UI

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

• Télécharger jQuery UI
• Intégrer jQuery UI à notre document
• Utiliser le widget datepicker pour la saisie de date

Ressources
Aide et ressources
Fabien LE CORRE
indépendant
Ressources

Plan
•Trouver des ressources sur le web pour apprendre
et progresser.

Trouver des ressources
• La doc officielle de jQuery : http://api.jquery.com/
• Le learning center de jQuery : http://learn.jquery.com/
• Openclassroom tutoriel jQuery :
http://openclassrooms.com/courses/simplifiez-vos-developpements-
javascript-avec-jquery
• Openclassroom tutoriel jQuery UI :
http://openclassrooms.com/courses/decouvrez-la-puissance-de-jquery-
ui
• Grafikart jQuery : http://www.grafikart.fr/tutoriels/jquery

. Où trouver des ressources de qualité pour apprendre et
progresser.

Problèmes et solutions
Aide et ressources
Fabien LE CORRE
indépendant
Problèmes et solutions

Plan
• Où trouver des solutions aux problèmes.

Où chercher de l’aide
• Stackoverflow : http://stackoverflow.com/questions/tagged/jquery
• Forum javascript openclassroom :
http://openclassrooms.com/forum/categorie/javascript

. Comment trouver de l’aide en cas de besoin.

Conclusion
Formation jQuery
Fabien LE CORRE
indépendant
Conclusion

• 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

• 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

• 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

• 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

A bientôt
Contact
Twitter : https://twitter.com/simpledevMe
Email : lcorrefabien@gmail.com

Alphorm.com Formation jQuery

Contenu connexe

Tendances

En vedette

Similaire à Alphorm.com Formation jQuery

Plus de Alphorm

Alphorm.com Formation jQuery