0
Jquery : bibliothèque JavaScript
              Faites davantage avec moins de code!




                   Sujets spéciaux...
jQuery - Write less, do more.

   jQuery est une bibliothèque JavaScript qui
   retient l’attention en raison de sa syntax...
jQuery – Concepts de base
•   Enveloppe logicielle (Wrapper) jQuery ou $
•   Emploi intelligent de sélecteurs basés sur CS...
jQuery – Sélecteurs d’objets DOM
•   Sélection par identifiant (id)
    jQuery(quot;#monIdquot;)
•   Sélection par classe ...
jQuery – Filtres d’objets DOM
•   Emploi de filtres pour réduire les
    tableaux d’objets (opérateur “:”)

    jQuery(quo...
jQuery – Manipulation d’objets DOM
•   Création d’un fragment de HTML et ajout à la fin du
    document
    jQuery(quot;<p...
jQuery – Chaînage des opérations
 Chaque opération jQuery retourne une référence à un
 tableau d’objets auquel on peut app...
jQuery – Boucle implicite
   Certaines instructions de jQuery réalisent des boucles
   implicites sur des ensembles de don...
jQuery – Initialisation au chargement
   Au moment du chargement d’une page jQuery fournit le
   contrôleur ready. Le cont...
jQuery – Ajax
   jQuery fournit plusieurs fonctions Ajax pour
   différents besoins dont load(...) et ajax(...)

La foncti...
jQuery - Avantages




           jQuery
            GEEK




Tutoriel
jQuery                                             ...
jQuery - Avantages
•   Assure la compatibilité entre les différents fureteurs
•   Syntaxe efficace, peu verbeuse, instruct...
jQuery - inconvénients
•     Les experts jQuery et JS sont rares...
•     JS trop permissif et difficile à déboguer
•     ...
Ressources - Livres
jQuery in Action
par Bear Bibeault, Yehuda Katz
376 pages
Manning Publications
(7 février, 2008)
www.m...
Questions




                           ?

Tutoriel
jQuery                                                  Automne 2008
...
Upcoming SlideShare
Loading in...5
×

jQuery - GTI780 & MTI780 - ETS - A08

2,136

Published on

Présentation de la bibliothèque JavaScript jQuery dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l\'École de technologie supérieure, Montréal, Automne 2008

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,136
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
63
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery - GTI780 & MTI780 - ETS - A08"

  1. 1. Jquery : bibliothèque JavaScript Faites davantage avec moins de code! Sujets spéciaux en TI Le Web 2.0 : concepts et outils École de technologie supérieure par Claude Coulombe jQuery Write Less, Do More. Tutoriel jQuery Automne 2008
  2. 2. jQuery - Write less, do more. jQuery est une bibliothèque JavaScript qui retient l’attention en raison de sa syntaxe astucieuse, de ses performances, de sa compacité et de son approche modulaire à base de plugins. jQuery Write Less, Do More. http://www.jQuery.com Tutoriel jQuery Automne 2008
  3. 3. jQuery – Concepts de base • Enveloppe logicielle (Wrapper) jQuery ou $ • Emploi intelligent de sélecteurs basés sur CSS 3 pour sélectionner des objets DOM dans une page web • Retour par les fonctions jQuery de tableaux (Array) d’objets • Puissantes fonctions de manipulation d’objets du DOM • Opération sur l’ensemble des objets d’un tableau d’objets sans utiliser de boucle explicite • Chaînage des opérations • http://docs.jquery.com/Main_Page Tutoriel jQuery Automne 2008
  4. 4. jQuery – Sélecteurs d’objets DOM • Sélection par identifiant (id) jQuery(quot;#monIdquot;) • Sélection par classe (CSS class) jQuery(quot;.maClassequot;) • Sélection par balise (tag) jQuery(quot;divquot;) • Documentation http://docs.jquery.com/Selectors Tutoriel jQuery Automne 2008
  5. 5. jQuery – Filtres d’objets DOM • Emploi de filtres pour réduire les tableaux d’objets (opérateur “:”) jQuery(quot;div:eq(1)quot;) jQuery(quot;span:not(#monId)quot;) jQuery(quot;p:firstquot;).hasClass(quot;myClassquot;) Tutoriel jQuery Automne 2008
  6. 6. jQuery – Manipulation d’objets DOM • Création d’un fragment de HTML et ajout à la fin du document jQuery(quot;<p>Qu’est-ce que jQuery?</p>quot;).appendTo(quot;bodyquot;) • Changement de CSS jQuery(quot;#monIdquot;).toggleClass(quot;surbrillancequot;) jQuery(quot;trquot;).toggleClass(quot;couleurLignequot;) • Changement de texte jQuery(quot;.classeTextequot;).text(quot;texte de remplacementquot;) • Documentation http://docs.jquery.com/Manipulation Tutoriel jQuery Automne 2008
  7. 7. jQuery – Chaînage des opérations Chaque opération jQuery retourne une référence à un tableau d’objets auquel on peut appliquer une autre opération, voir un enchaînement d’opérations. Par exemple jQuery(quot;#monIdquot;).addClass(quot;maClasseCSSquot;); jQuery(quot;#monIdquot;).show(); Devient jQuery(quot;#monIdquot;).addClass(quot;maClasseCSSquot;).show(); Tutoriel jQuery Automne 2008
  8. 8. jQuery – Boucle implicite Certaines instructions de jQuery réalisent des boucles implicites sur des ensembles de données. Par exemple : jQuery.each([0,1,2,3,4], function() { document.write(this + 1); }); Écrit : 12345 Tutoriel jQuery Automne 2008
  9. 9. jQuery – Initialisation au chargement Au moment du chargement d’une page jQuery fournit le contrôleur ready. Le contrôleur ready initie l’exécution du code lorsque le document est chargé mais sans attendre le chargement des images et l’exécution du contrôleur onload. jQuery(document).ready( function() { // code à exécuter au moment du chargement }); Note : Quand les contrôleurs ready et onload sont utilisés dans la même page, les 2 contrôleurs vont s’exécuter, le contrôleur ready s’exécutant avant le contrôleur onload. Tutoriel jQuery Automne 2008
  10. 10. jQuery – Ajax jQuery fournit plusieurs fonctions Ajax pour différents besoins dont load(...) et ajax(...) La fonction load(...) jQuery('#nombre').load('/ServeurAjaxSimple/reponse'); Ou la fonction ajax(...) jQuery.ajax( { type: quot;POSTquot;, url: quot;/ServeurAjaxSimple/reponsequot;, data: quot;param1=valeur1&param2=valeur2quot;, success: function(rep){ /* callback */ alert( quot;Donnée traitées: quot; + rep ); } Tutoriel jQuery }); Automne 2008
  11. 11. jQuery - Avantages jQuery GEEK Tutoriel jQuery Automne 2008 * Source Clipart : http://www.clipart.com
  12. 12. jQuery - Avantages • Assure la compatibilité entre les différents fureteurs • Syntaxe efficace, peu verbeuse, instruction puissante* • Bibliothèque compacte (version de base 15 Ko) • Emploi intelligent de sélecteurs basés sur CSS 3 pour sélectionner des objets DOM dans une page web • Opération sur l’ensemble des objets d’un tableau d’objets sans utiliser de boucle explicite • Chaînage des opérations • Structure modulaire et extensible par plugiciels (Plugins) jQuery Write Less, Do More. Tutoriel jQuery Automne 2008 * D'où le slogan : Write Less, Do More.
  13. 13. jQuery - inconvénients • Les experts jQuery et JS sont rares... • JS trop permissif et difficile à déboguer • JS n’a pas été conçu pour de gros logiciels • Pas de bon support par les IDEs • Même modularisé, le code peut devenir très gros Tutoriel jQuery Automne 2008
  14. 14. Ressources - Livres jQuery in Action par Bear Bibeault, Yehuda Katz 376 pages Manning Publications (7 février, 2008) www.manning.com/bibeault/ Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques par Karl Swedberg, Jonathan Chaffer 380 pages Packt Publishing (29 juin, 2007) www.packtpub.com/jQuery/book#indetail Tutoriel jQuery Automne 2008
  15. 15. Questions ? Tutoriel jQuery Automne 2008 * Source Clipart : http://www.clipart.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×