4. Prrequis
5. Le CSS 6. Kompozer ou autre 7. Firefox et firebug 8. Un diteur avec coloration syntaxique 9. lments de javascript 10. Le X/HTML et Le CSS
11. http://cssmate.com/csseditor.html 12. Le fichier jquery101.html 13. outil conseill: kompozer (diteur HTLM/CSS) 14. Firefox-Firebug (F12) 15. diteur
16. Pspad (win) 17. Gedit,jedit (java) 18. Notepad 19. lments de javascript
20. Les fonctions nommes et anonymes 21. Le passage de paramtre 22. Appel de fonction:mafonction();mafonction(p1);Ne pas confondre: - var a= mafonction; // a contient la fonction (appel par a(p1);Avec vara=mafonction(); // a contient le rsultat de l'appel de la fonction . Rgle : les parenthses qui suivent le nom de la fonction provoquent l'appel de la fonction SAUFdans le code de sa dclaration (function mafonction() ..) Dclaration: 2 formes principales. -function mafonction(p1,p2){ //corps de la fonction nomme } -function(p1,p2){//corps de la fonction anonyme } 23. Les paramtres d'une fonction
24. Les paramtres se trouvent dans un tableau interne disposition de la fonction: arguments[] 25. function mafonction(){ // declaration d'unefonction// pas de parametre prcis passser // fait un trucfor (var attr in arguments ) { console.log( attr + "==>"+ arguments[attr]); } } // appel de la fonctionmafonction(); mafonction('eric','un autre',2); /* rsultat0==>eric 1==>un autre 2==>2 */ 26. function mafonction2(p1,p2){ // declaration d'unefonction// espere deuxparametres prcis passser // fait un trucfor (var attr in arguments ) { console.log( attr + "==>"+ arguments[attr]); } return p1 + p2; } // appel de la fonctionconsole.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 rsultat 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 utilises pour faire des callbacks. Fonction: appel ou affectation Dclaration 28. Paramtres nomms 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'} )); 29. TP 1 8
Dpart:Arrive: 30. TP 1O1 Dpart:
31. Crer un script .js et l'ajouter la page 32. Lancer une alerte pour vrifier le bon chargement de l'ensemble Jquery est simplement une librairie javascript. 33. Utiliser jquery
34. Choisir entre la version 'normale' et la version compresse (min) 35. L'installer dans un rpertoire 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 aliaspour Jquery (document) .ready(function(){ Your code here... }); (syntaxe chaine)Expliquer: l'alias Syntaxe chaine Firebug 38. Les slecteurs
39. $('#codeButton1'). //sur un ID 40. $('.bouton').//Sur une classe CSS 41. $('div').//sur un TAGhtml 42. $(':button').//Sur un type de form Les slecteurs proposent un systme de navigation et d'itrateur 43. Et aprs?
44. Ajout d'vnements 45. Effets 46. Etc.. 47. TP 103
48. Aide: changement de classe. 49. TP 104
50. Changer la vole 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 52. TP 105
53. Ajouter dynamiquement un texte pour chaque onglet. 54. TP 106
55. Les afficher en fonction du numro d'onglet. 56. Ajouter un effet (slideUpetc..) 57. TP 107
58. TP 108
59. Si ladclaration de lafonction se termine par (..); la fonction seraimmdiatement excute aprs sa dclaration ( autoexecute )-function mafonction(p1,p2){ //corps de la fonction nomme }(3,4); //autoexecuteBonus
60. Jsint 61. jsmin
Top Related