Tp-jquery

1. Introduction à jquery german.eric at gmail.com Les prérequis

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 Source disponible : https://github.com/germanlinux/Lemon-labs/tree/master/Javascript/TPjquery

4. Prérequis Le X/HTML

5. Le CSS

6. Kompozer ou autre

7. Firefox et firebug

8. Un éditeur avec coloration syntaxique

9. Éléments de javascript

10. Le X/HTML et Le CSS Répertoire '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 Eclipse

16. Pspad (win)

17. Gedit,jedit (java)

18. Notepad

19. Éléments de javascript L'appel de fonction

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 }

23. Les paramètres d'une fonction Ils sont 'libres' (en nombre, en forme)

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

29. TP 1 à 8 Réalisation d'un menu par onglet. Départ : Arrivée :

30. TP 1O1 Départ : Récupérer jquery (version normale ou min)

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.

33. Utiliser jquery Télécharger jquery http://jquery.com/

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

38. Les sélecteurs Le DOM- l'objet window

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

43. Et après ? Le sélecteur permet de se positionner dans le DOM sur un (ou des) élément(s) et d'appliquer des actions : Modifications

44. Ajout d'événements

45. Effets

46. Etc..

47. TP 103 Au chargement, faire passer l'onglet numéro 1 à actif.

48. Aide : changement de classe.

49. TP 104 Modifier le curseur de la souris (forme de main)

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

52. TP 105 Fixer le comportement de la souris

53. Ajouter dynamiquement un texte pour chaque onglet.

54. TP 106 Préparer 3 div et les charger avec du texte

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

56. Ajouter un effet (slideUp etc..)

57. TP 107 Ajouter un bouton qui ouvre une fenêtre d'alerte

58. TP 108 Ajouter un bouton sur l'onglet 2 qui lance une tache et qui gère sa fin.

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 Beautifier

60. Jsint

61. jsmin

Tp-jquery

Contenu connexe

Tendances (18)

Similaire à Tp-jquery (20)

Plus de eric German (19)

Tp-jquery