Tp-jquery

2 973 vues

Publié le

Une série de TP pour découvrir jquery. Le source des exemples est sur github. Lien sur la premiere page

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 973
Sur SlideShare
0
Issues des intégrations
0
Intégrations
151
Actions
Partages
0
Téléchargements
78
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Tp-jquery

  1. 1. Introduction à jquery german.eric at gmail.com <ul><li>Les prérequis
  2. 2. Les TP 1 à 8 </li></ul><ul><ul><li>Le HTML et le CSS sont dans des fichiers (jquery101.html à 108)
  3. 3. Le javascript est dans les fichiers onglet102 à 108.js </li></ul></ul><ul><ul><li>Source disponible : </li><ul><li>https://github.com/germanlinux/Lemon-labs/tree/master/Javascript/TPjquery </li></ul></ul></ul>
  4. 4. Prérequis <ul><li>Le X/HTML
  5. 5. Le CSS
  6. 6. Kompozer ou autre
  7. 7. Firefox et firebug
  8. 8. Un éditeur avec coloration syntaxique
  9. 9. Éléments de javascript </li></ul>
  10. 10. Le X/HTML et Le CSS <ul><li>Répertoire 'tablettes' ou google (cheatsheet)
  11. 11. http://cssmate.com/csseditor.html
  12. 12. Le fichier jquery101.html
  13. 13. outil conseillé : kompozer (éditeur HTLM/CSS) </li></ul>
  14. 14. Firefox-Firebug (F12)
  15. 15. Éditeur <ul><li>Eclipse
  16. 16. Pspad (win)
  17. 17. Gedit,jedit (java)
  18. 18. Notepad </li></ul>
  19. 19. Éléments de javascript <ul><li>L'appel de fonction
  20. 20. Les fonctions nommées et anonymes
  21. 21. Le passage de paramètre </li></ul>
  22. 22. Appel de fonction : mafonction() ; mafonction(p1) ; Ne pas confondre : - var a= mafonction ; // a contient la fonction (appel par a(p1) ; Avec var a=mafonction() ; // a contient le résultat de l'appel de la fonction . Règle  : les parenthèses qui suivent le nom de la fonction provoquent l'appel de la fonction SAUF dans le code de sa déclaration (function mafonction() ..) Déclaration : 2 formes principales. -function mafonction(p1,p2){ //corps de la fonction nommée } -function(p1,p2){//corps de la fonction anonyme }
  23. 23. Les paramètres d'une fonction <ul><li>Ils sont 'libres' (en nombre, en forme)
  24. 24. Les paramètres se trouvent dans un tableau interne à disposition de la fonction : arguments[] </li></ul>
  25. 25. function mafonction(){ // declaration d'une fonction // pas de parametre précis à passser // fait un truc for (var attr in arguments ) { console.log( attr + &quot;==>&quot; + arguments[attr]); } } // appel de la fonction mafonction(); mafonction('eric','un autre',2); /* résultat 0==>eric 1==>un autre 2==>2 */
  26. 26. function mafonction2(p1,p2){ // declaration d'une fonction // espere deux parametres précis à passser // fait un truc for (var attr in arguments ) { console.log( attr + &quot;==>&quot; + arguments[attr]); } return p1 + p2; } // appel de la fonction console.log('-----------------------'); console.log(mafonction2()); console.log(mafonction2('eric','un autre')); console.log(mafonction2('eric')); /* execution ----------------------- NaN 0==>eric 1==>un autre ericun autre 0==>eric ericundefined */ Quel sera le résultat de Mafonction2(2,4) ?
  27. 27. Donc à retenir console.log('-----------------------'); var a=mafonction2('eric ','german'); console.log(a); var b= mafonction2; console.log(b(1,2)); /* execution ----------------------- eric german 3 */ Les fonction anonymes sont utilisées pour faire des callbacks. Fonction : appel ou affectation Déclaration
  28. 28. Paramètres nommés function mesnoms(nom,prenom){ tprenom = prenom.charAt(0).toUpperCase()+ prenom.substring(1); return ( nom.toUpperCase()+&quot; &quot; + tprenom ); } console.log(mesnoms('german','eric')); function mesnoms2( pnomme ){ tprenom = pnomme.prenom.charAt(0).toUpperCase()+ pnomme.prenom.substring(1); return ( pnomme.nom.toUpperCase()+&quot; &quot; + tprenom ); } console.log(mesnoms2( {nom: 'german',prenom : 'eric'} )); console.log(mesnoms2( {prenom: 'eric',nom : 'german'} ));
  29. 29. TP 1 à 8 <ul><li>Réalisation d'un menu par onglet. </li></ul>Départ : Arrivée :
  30. 30. TP 1O1 Départ : <ul><li>Récupérer jquery (version normale ou min)
  31. 31. Créer un script .js et l'ajouter à la page
  32. 32. Lancer une alerte pour vérifier le bon chargement de l'ensemble </li></ul>Jquery est simplement une librairie javascript.
  33. 33. Utiliser jquery <ul><li>Télécharger jquery http://jquery.com/
  34. 34. Choisir entre la version 'normale' et la version compressée (min)
  35. 35. L'installer dans un répertoire avec une page html (slide suivant) et un exemple de script
  36. 36. Faire charger votre page html en local par le navigateur (fichier-> ouvrir -> fichier) </li></ul>
  37. 37. Correction (102) $(function() { alert(&quot;jquery a bordeaux!&quot;); }); $('fonction anonyme) ; Avec $ est un alias pour jquery jquery(fonction anonyme) est un alias pour Jquery (document) .ready(function(){ Your code here... }); (syntaxe chainée) Expliquer : l'alias Syntaxe chainée Firebug
  38. 38. Les sélecteurs <ul><li>Le DOM- l'objet window
  39. 39. $('#codeButton1'). //sur un ID
  40. 40. $('.bouton'). //Sur une classe CSS
  41. 41. $('div'). //sur un TAG html
  42. 42. $(':button'). //Sur un type de form </li></ul>Les sélecteurs proposent un système de navigation et d'itérateur
  43. 43. Et après ? <ul><li>Le sélecteur permet de se positionner dans le DOM sur un (ou des) élément(s) et d'appliquer des actions : </li><ul><li>Modifications
  44. 44. Ajout d'événements
  45. 45. Effets
  46. 46. Etc.. </li></ul></ul>
  47. 47. TP 103 <ul><li>Au chargement, faire passer l'onglet numéro 1 à actif.
  48. 48. Aide : changement de classe. </li></ul>
  49. 49. TP 104 <ul><li>Modifier le curseur de la souris (forme de main)
  50. 50. Changer à la volée l'état des onglets en fonction de la localisation du pointeur
  51. 51. Aide : mouseenter, mouseleave, mouseover etc.. (=> hover) </li></ul>Évoquer le 'this' et le 'bind' et les effets en cascade/bulle
  52. 52. TP 105 <ul><li>Fixer le comportement de la souris
  53. 53. Ajouter dynamiquement un texte pour chaque onglet. </li></ul>
  54. 54. TP 106 <ul><li>Préparer 3 div et les charger avec du texte
  55. 55. Les afficher en fonction du numéro d'onglet.
  56. 56. Ajouter un effet (slideUp etc..) </li></ul>
  57. 57. TP 107 <ul><li>Ajouter un bouton qui ouvre une fenêtre d'alerte </li></ul>
  58. 58. TP 108 <ul><li>Ajouter un bouton sur l'onglet 2 qui lance une tache et qui gère sa fin. </li></ul>
  59. 59. Si la déclaration de la fonction se termine par (..) ;  la fonction sera immédiatement exécutée après sa déclaration ( autoexecutée ) -function mafonction(p1,p2){ //corps de la fonction nommée }(3,4) ; //autoexecutée Bonus <ul><li>Beautifier
  60. 60. Jsint
  61. 61. jsmin </li></ul>

×