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

5. Le CSS

6. Kompozer ou autre

7. Firefox et firebug

8. Un éditeur avec coloration syntaxique

9. Éléments de javascript

11. http://cssmate.com/csseditor.html

12. Le fichier jquery101.html

13. outil conseillé : kompozer (éditeur HTLM/CSS)

14. Firefox-Firebug (F12)

16. Pspad (win)

17. Gedit,jedit (java)

18. Notepad

20. Les fonctions nommées et anonymes

21. Le passage de paramètre

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 }

24. Les paramètres se trouvent dans un tableau interne à disposition de la fonction : arguments[]

25. function mafonction(){ // declaration d'une fonction // pas de parametre précis à passser // fait un truc for (var attr in arguments ) { console.log( attr + "==>" + arguments[attr]); } } // appel de la fonction mafonction(); mafonction('eric','un autre',2); /* résultat 0==>eric 1==>un autre 2==>2 */

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 + "==>" + 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. 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. Paramètres nommés function mesnoms(nom,prenom){ tprenom = prenom.charAt(0).toUpperCase()+ prenom.substring(1); return ( nom.toUpperCase()+" " + tprenom ); } console.log(mesnoms('german','eric')); function mesnoms2( pnomme ){ tprenom = pnomme.prenom.charAt(0).toUpperCase()+ pnomme.prenom.substring(1); return ( pnomme.nom.toUpperCase()+" " + tprenom ); } console.log(mesnoms2( {nom: 'german',prenom : 'eric'} )); console.log(mesnoms2( {prenom: 'eric',nom : 'german'} ));

31. Créer un script .js et l'ajouter à la page

32. Lancer une alerte pour vérifier le bon chargement de l'ensemble Jquery est simplement une librairie javascript.

34. Choisir entre la version 'normale' et la version compressée (min)

35. L'installer dans un répertoire avec une page html (slide suivant) et un exemple de script

36. Faire charger votre page html en local par le navigateur (fichier-> ouvrir -> fichier)

37. Correction (102) $(function() { alert("jquery a bordeaux!"); }); $('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

39. $('#codeButton1'). //sur un ID

40. $('.bouton'). //Sur une classe CSS

41. $('div'). //sur un TAG html

42. $(':button'). //Sur un type de form Les sélecteurs proposent un système de navigation et d'itérateur

44. Ajout d'événements

45. Effets

46. Etc..

48. Aide : changement de classe.

50. Changer à la volée l'état des onglets en fonction de la localisation du pointeur

51. Aide : mouseenter, mouseleave, mouseover etc.. (=> hover) Évoquer le 'this' et le 'bind' et les effets en cascade/bulle

53. Ajouter dynamiquement un texte pour chaque onglet.

55. Les afficher en fonction du numéro d'onglet.

56. Ajouter un effet (slideUp etc..)

60. Jsint

61. jsmin