jquery - gti780 & mti780 - ets - a08
Post on 29-Nov-2014
3.291 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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
jQueryWrite Less, Do More.
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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")
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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();
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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..
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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¶m2=valeur2",data: "param1=valeur1¶m2=valeur2",
success: function(rep){ success: function(rep){ /* callback *//* callback */
alert( "Donnée traitées: " + rep ); }alert( "Donnée traitées: " + rep ); }
});});
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
jQuery - AvantagesjQuery - Avantages
jQueryGEEK
* Source Clipart : http://www.clipart.com* Source Clipart : http://www.clipart.com
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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)
jQueryWrite Less, Do More.
* D'où le slogan : Write Less, Do More.* D'où le slogan : Write Less, Do More.
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
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/
Automne 2008Automne 2008TutorielTutorieljQueryjQuery
QuestionsQuestions
??
* Source Clipart : http://www.clipart.com* Source Clipart : http://www.clipart.com
top related