Une série de TP pour découvrir jquery. Le source des exemples est sur github. Lien sur la premiere page
- 1. Introduction jquery german.eric at gmail.com
- 2. Les TP 1 8
-
- Le HTML et le CSS sont dans des fichiers (jquery101.html
108)
- 3. Le javascript est dans les fichiers onglet102 108.js
-
-
https://github.com/germanlinux/Lemon-labs/tree/master/Javascript/TPjquery
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
- Rpertoire 'tablettes' ou google (cheatsheet)
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
- Ils sont 'libres'(en nombre, en forme)
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
- Ralisation d'un menu par onglet.
Dpart:Arrive: 30. TP 1O1 Dpart:
- Rcuprer jquery (version normale ou min)
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
- Tlcharger jqueryhttp://jquery.com/
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?
- Le slecteur permet de se positionner dans le DOMsur un (ou des)
lment(s) et d'appliquer des actions:
44. Ajout d'vnements 45. Effets 46. Etc.. 47. TP 103
- Au chargement, faire passer l'onglet numro 1 actif.
48. Aide: changement de classe. 49. TP 104
- Modifier le curseur de la souris (forme de main)
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
- Fixer le comportement de la souris
53. Ajouter dynamiquement un texte pour chaque onglet. 54. TP
106
- Prparer 3 div et les charger avec du texte
55. Les afficher en fonction du numro d'onglet. 56. Ajouter un
effet (slideUpetc..) 57. TP 107
- Ajouter un bouton qui ouvre une fentre d'alerte
58. TP 108
- Ajouter un bouton sur l'onglet 2 qui lance une tache et qui gre
sa fin.
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
