jQuery - GTI780 & MTI780 - ETS - A08

Automne 2008Automne 2008TutorielTutorieljQueryjQuery

Jquery : bibliothèque JavaScriptJquery : bibliothèque JavaScriptFaites davantage avec moins de code!Faites davantage avec moins de code!

jQueryWrite Less, Do More.

Sujets spéciaux en TISujets spéciaux en TILe Web 2.0 : concepts et outilsLe Web 2.0 : concepts et outilsÉcole de technologie supérieureÉcole de technologie supérieure

parparClaude Coulombe Claude Coulombe


jQuery - jQuery - Write less, do more.Write less, do more.

jQuery est une bibliothèque JavaScript qui jQuery est une bibliothèque JavaScript qui retient l’attention en raison de sa syntaxe retient l’attention en raison de sa syntaxe astucieuse, de ses performances, de sa astucieuse, de ses performances, de sa compacité et de son approche modulaire à compacité et de son approche modulaire à base de plugins. base de plugins.

http://www.jQuery.com



jQuery – Concepts de basejQuery – Concepts de base• Enveloppe logicielle (Wrapper) jQuery ou $Enveloppe logicielle (Wrapper) jQuery ou $• Emploi intelligent de sélecteurs basés sur CSS 3 pour Emploi intelligent de sélecteurs basés sur CSS 3 pour

sélectionner des objets DOM dans une page websélectionner des objets DOM dans une page web• Retour par les fonctions jQuery de tableaux (Array) Retour par les fonctions jQuery de tableaux (Array)

d’objetsd’objets• Puissantes fonctions de manipulation d’objets du DOMPuissantes fonctions de manipulation d’objets du DOM• Opération sur l’ensemble des objets d’un tableau Opération sur l’ensemble des objets d’un tableau

d’objets sans utiliser de boucle explicited’objets sans utiliser de boucle explicite• Chaînage des opérationsChaînage des opérations• http://docs.http://docs.jqueryjquery.com/Main_Page.com/Main_Page

http://docs.jquery.com/Main_Page




jQuery – Sélecteurs d’objets DOMjQuery – Sélecteurs d’objets DOM

• Sélection par identifiant (id)Sélection par identifiant (id)

jQuery("#monId")jQuery("#monId")• Sélection par classe (CSS class)Sélection par classe (CSS class)

jQuery(".maClasse")jQuery(".maClasse")• Sélection par balise (tag)Sélection par balise (tag)

jQuery("div")jQuery("div")• DocumentationDocumentation

http://docs.http://docs.jqueryjquery.com/Selectors.com/Selectors

http://docs.jquery.com/Selectors




jQuery – Filtres d’objets DOMjQuery – Filtres d’objets DOM

• Emploi de filtres pour réduire les Emploi de filtres pour réduire les tableaux d’objets (opérateur “:”)tableaux d’objets (opérateur “:”)

jQuery("div:eq(1)")jQuery("div:eq(1)")

jQuery("span:not(#monId)")jQuery("span:not(#monId)")

jQuery("p:first").hasClass("myClass")jQuery("p:first").hasClass("myClass")


jQuery – jQuery – Manipulation d’objets DOMManipulation d’objets DOM

• Création d’un fragment de HTML et ajout à la fin du Création d’un fragment de HTML et ajout à la fin du documentdocument

jQuery("<p>Qu’est-ce que jQuery?</p>").appendTo("body")jQuery("<p>Qu’est-ce que jQuery?</p>").appendTo("body")

• Changement de CSSChangement de CSS

jQuery("#monId").toggleClass("surbrillance")jQuery("#monId").toggleClass("surbrillance")

jQuery("tr").toggleClass("couleurLigne")jQuery("tr").toggleClass("couleurLigne")• Changement de texteChangement de textejQuery(".classeTexte").text("texte de remplacement")jQuery(".classeTexte").text("texte de remplacement")

• DocumentationDocumentation

http://docs.http://docs.jqueryjquery.com/Manipulation.com/Manipulation


http://docs.jquery.com/Manipulation




jQuery – jQuery – Chaînage des opérationsChaînage des opérations

Chaque opération jQuery retourne une référence à un Chaque opération jQuery retourne une référence à un tableau d’objets auquel on peut appliquer une autre tableau d’objets auquel on peut appliquer une autre opération, voir un enchaînement d’opérations.opération, voir un enchaînement d’opérations.

Par exemplePar exemple

jQuery("#monId").addClass(jQuery("#monId").addClass(""maClasseCSS");maClasseCSS");

jQuery(jQuery(""#monId#monId"").show();).show();

DevientDevient

jQuery(jQuery(""#monId#monId"").addClass().addClass(""maClasseCSSmaClasseCSS"").show();).show();


jQuery – jQuery – Boucle impliciteBoucle implicite

Certaines instructions de jQuery réalisent des boucles Certaines instructions de jQuery réalisent des boucles implicites sur des ensembles de données.implicites sur des ensembles de données.

Par exemple :Par exemple :

jQuery.each([0,1,2,3,4], function() {jQuery.each([0,1,2,3,4], function() {

document.write(this + 1);document.write(this + 1);

});});

Écrit :Écrit :

1234512345


jQuery – jQuery – Initialisation au chargementInitialisation au chargement

Au moment du chargement d’une page jQuery fournit le Au moment du chargement d’une page jQuery fournit le contrôleur contrôleur readyready. Le contrôleur . Le contrôleur readyready initie l’exécution du code initie l’exécution du code lorsque le document est chargé mais sans attendre le lorsque le document est chargé mais sans attendre le

chargement des images et l’exécution du contrôleur chargement des images et l’exécution du contrôleur onloadonload..

jQuery(document).ready( function() {jQuery(document).ready( function() {

// code à exécuter au moment du chargement// code à exécuter au moment du chargement

});});

Note : Note : Quand les contrôleurs Quand les contrôleurs readyready et et onloadonload sont utilisés dans la même page, les 2 contrôleurs sont utilisés dans la même page, les 2 contrôleurs vont s’exécuter, le contrôleur vont s’exécuter, le contrôleur readyready s’exécutant avant le contrôleur s’exécutant avant le contrôleur onloadonload..


jQuery – jQuery – AjaxAjaxjQuery fournit plusieurs fonctions Ajax pour jQuery fournit plusieurs fonctions Ajax pour différents besoins dont load(...) et ajax(...)différents besoins dont load(...) et ajax(...)

La fonction load(...)La fonction load(...)

jQuery('#nombre').load('/ServeurAjaxSimple/reponse');jQuery('#nombre').load('/ServeurAjaxSimple/reponse');

Ou la fonction ajax(...)Ou la fonction ajax(...)

jQuery.ajax( { type: "POST",jQuery.ajax( { type: "POST",

url: "/ServeurAjaxSimple/reponse",url: "/ServeurAjaxSimple/reponse",

data: "param1=valeur1&param2=valeur2",data: "param1=valeur1&param2=valeur2",

success: function(rep){ success: function(rep){ /* callback *//* callback */

alert( "Donnée traitées: " + rep ); }alert( "Donnée traitées: " + rep ); }

});});


jQuery - AvantagesjQuery - Avantages

jQueryGEEK

* Source Clipart : http://www.clipart.com* Source Clipart : http://www.clipart.com


jQuery - AvantagesjQuery - Avantages• Assure la compatibilité entre les différents fureteursAssure la compatibilité entre les différents fureteurs• Syntaxe efficace, peu verbeuse, instruction puissante*Syntaxe efficace, peu verbeuse, instruction puissante*• Bibliothèque compacte (version de base 15 Ko)Bibliothèque compacte (version de base 15 Ko)• Emploi intelligent de sélecteurs basés sur CSS 3 pour Emploi intelligent de sélecteurs basés sur CSS 3 pour

sélectionner des objets DOM dans une page websélectionner des objets DOM dans une page web• Opération sur l’ensemble des objets d’un tableau d’objets Opération sur l’ensemble des objets d’un tableau d’objets

sans utiliser de boucle explicitesans utiliser de boucle explicite• Chaînage des opérationsChaînage des opérations• Structure modulaire et extensible par plugiciels (Plugins)Structure modulaire et extensible par plugiciels (Plugins)


* D'où le slogan : Write Less, Do More.* D'où le slogan : Write Less, Do More.


jQuery - inconvénientsjQuery - inconvénients

• Les experts jQuery et JS sont rares...Les experts jQuery et JS sont rares...• JS trop permissif et difficile à déboguerJS trop permissif et difficile à déboguer• JS n’a pas été conçu pour de gros logicielsJS n’a pas été conçu pour de gros logiciels• Pas de bon support par les IDEsPas de bon support par les IDEs• Même modularisé, le code peut devenir très grosMême modularisé, le code peut devenir très gros


Ressources - LivresRessources - Livres

Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniquespar Karl Swedberg, Jonathan Chaffer380 pagesPackt Publishing(29 juin, 2007) www.packtpub.com/jQuery/book#indetail

jQuery in Actionpar Bear Bibeault, Yehuda Katz376 pagesManning Publications(7 février, 2008)www.manning.com/bibeault/


QuestionsQuestions

??

* Source Clipart : http://www.clipart.com* Source Clipart : http://www.clipart.com

jQuery - GTI780 & MTI780 - ETS - A08

Documents

Transcript of jQuery - GTI780 & MTI780 - ETS - A08