SlideShare une entreprise Scribd logo
Jquery : bibliothèque JavaScript
    Faites davantage avec moins de code!




GTI780 / MTI780 - 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.

                                           Automne 2009
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 plugiciels.

                          jQuery
                           Write Less,
                           Do More.


                  http://www.jQuery.com

Présentation
  jQuery                                   Automne 2009
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


Présentation
  jQuery                                        Automne 2009
jQuery – Sélecteurs d’objets DOM
 •   Sélection par identifiant (id)
     jQuery("#monId")
 •   Sélection par classe (CSS class)
     jQuery(".maClasse")
 •   Sélection par balise (tag)
     jQuery("div")
 •   Documentation
      http://docs.jquery.com/Selectors


Présentation
  jQuery                                 Automne 2009
jQuery – Filtres d’objets DOM
 •   Emploi de filtres pour réduire les
     tableaux d’objets (opérateur “:”)

      jQuery("div:eq(1)")

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

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

Présentation
  jQuery                                  Automne 2009
jQuery –       Manipulation d’objets DOM
 •   Création d’un fragment de HTML et ajout à la fin du
     document
     jQuery("<p>Qu’est-ce que jQuery?</p>").appendTo("body")
 •   Changement de CSS
     jQuery("#monId").toggleClass("surbrillance")
     jQuery("tr").toggleClass("couleurLigne")
 •   Changement de texte
     jQuery(".classeTexte").text("texte de remplacement")
 •   Documentation
     http://docs.jquery.com/Manipulation

Présentation
  jQuery                                            Automne 2009
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("#monId").addClass("maClasseCSS");
     jQuery("#monId").show();
     Devient
     jQuery("#monId").addClass("maClasseCSS").show();


Présentation
  jQuery                                      Automne 2009
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


Présentation
  jQuery                                         Automne 2009
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.

Présentation
  jQuery                                                                       Automne 2009
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: "POST",
                     url: "/ServeurAjaxSimple/reponse",
                     data: "param1=valeur1&param2=valeur2",
                     success: function(rep){ /* callback */
                       alert( "Donnée traitées: " + rep ); }
Présentation
  jQuery       });                                     Automne 2009
jQuery - Avantages




               jQuery
                GEEK




Présentation
  jQuery                                                   Automne 2009
               * Source Clipart : http://www.clipart.com
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.


Présentation
  jQuery                                                          Automne 2009
                        * D'où le slogan : Write Less, Do More.
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




Présentation
  jQuery                                              Automne 2009
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
Présentation
  jQuery                                           Automne 2009
Questions




                              ?

Présentation
  jQuery                                                   Automne 2009
               * Source Clipart : http://www.clipart.com

Contenu connexe

Tendances

Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
StrasWeb
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
Voyelle Voyelle
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
∞ François CHERPION ∞
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
Soufiene Bouzid
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
Yacine Rezgui
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
TelecomValley
 
comprendre angularJS en 10 minutes
comprendre angularJS en 10 minutescomprendre angularJS en 10 minutes
comprendre angularJS en 10 minutes
David Bo
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
Safwen Chibeni
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
yllieth
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
Horacio Gonzalez
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
Rossi Oddet
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
VISEO
 
L'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJSL'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJSDavid Bottiau
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
Pierric Cistac
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJS
Frédéric DUPERIER
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
kadzaki
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
Kristen Le Liboux
 

Tendances (20)

Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
 
comprendre angularJS en 10 minutes
comprendre angularJS en 10 minutescomprendre angularJS en 10 minutes
comprendre angularJS en 10 minutes
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
 
L'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJSL'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJS
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJS
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 

En vedette

Les nouvelles formes d'apprentissage grenoble digital society forum
Les nouvelles formes d'apprentissage grenoble   digital society forumLes nouvelles formes d'apprentissage grenoble   digital society forum
Les nouvelles formes d'apprentissage grenoble digital society forum
espenel
 
L’environnement personnel d’apprentissage : entre continuités et discontinuit...
L’environnement personnel d’apprentissage : entre continuités et discontinuit...L’environnement personnel d’apprentissage : entre continuités et discontinuit...
L’environnement personnel d’apprentissage : entre continuités et discontinuit...
Caféine.Studio
 
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Claude Coulombe
 
Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15
Claude Coulombe
 
Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!
Claude Coulombe
 
MOOC : Pourquoi les acteurs de la formation continue sont concernés ?
MOOC : Pourquoi les acteurs de la  formation continue sont concernés ?MOOC : Pourquoi les acteurs de la  formation continue sont concernés ?
MOOC : Pourquoi les acteurs de la formation continue sont concernés ?
FFFOD
 
#MOOC GdP – 14 - Retour d'expérience sur deux MOOC 24-10-2013
#MOOC GdP – 14 - Retour d'expérience sur deux MOOC 24-10-2013#MOOC GdP – 14 - Retour d'expérience sur deux MOOC 24-10-2013
#MOOC GdP – 14 - Retour d'expérience sur deux MOOC 24-10-2013
Rémi Bachelet
 
x-c-Mooc : Innovation pédagogique ? Quelles perspectives pour la formation pr...
x-c-Mooc : Innovation pédagogique ? Quelles perspectives pour la formation pr...x-c-Mooc : Innovation pédagogique ? Quelles perspectives pour la formation pr...
x-c-Mooc : Innovation pédagogique ? Quelles perspectives pour la formation pr...
Pascal Vangrunderbeeck
 

En vedette (8)

Les nouvelles formes d'apprentissage grenoble digital society forum
Les nouvelles formes d'apprentissage grenoble   digital society forumLes nouvelles formes d'apprentissage grenoble   digital society forum
Les nouvelles formes d'apprentissage grenoble digital society forum
 
L’environnement personnel d’apprentissage : entre continuités et discontinuit...
L’environnement personnel d’apprentissage : entre continuités et discontinuit...L’environnement personnel d’apprentissage : entre continuités et discontinuit...
L’environnement personnel d’apprentissage : entre continuités et discontinuit...
 
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
 
Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15
 
Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!
 
MOOC : Pourquoi les acteurs de la formation continue sont concernés ?
MOOC : Pourquoi les acteurs de la  formation continue sont concernés ?MOOC : Pourquoi les acteurs de la  formation continue sont concernés ?
MOOC : Pourquoi les acteurs de la formation continue sont concernés ?
 
#MOOC GdP – 14 - Retour d'expérience sur deux MOOC 24-10-2013
#MOOC GdP – 14 - Retour d'expérience sur deux MOOC 24-10-2013#MOOC GdP – 14 - Retour d'expérience sur deux MOOC 24-10-2013
#MOOC GdP – 14 - Retour d'expérience sur deux MOOC 24-10-2013
 
x-c-Mooc : Innovation pédagogique ? Quelles perspectives pour la formation pr...
x-c-Mooc : Innovation pédagogique ? Quelles perspectives pour la formation pr...x-c-Mooc : Innovation pédagogique ? Quelles perspectives pour la formation pr...
x-c-Mooc : Innovation pédagogique ? Quelles perspectives pour la formation pr...
 

Similaire à jQuery GTI780 & MTI780 ETS A09

Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
Ouadie LAHDIOUI
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
Esokia
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
Tugdual Grall
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575kate2013
 
Angluars js
Angluars jsAngluars js
Angluars js
RYMAA
 
HTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilitéHTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilité
Julien Dubois
 
jQuery Mobile & Applications Web
jQuery Mobile & Applications WebjQuery Mobile & Applications Web
jQuery Mobile & Applications Web
Nicolas Hoffmann
 
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!OCTO Technology
 
Présentation de BackBone.JS
Présentation de BackBone.JSPrésentation de BackBone.JS
Présentation de BackBone.JSNoirdes
 
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
Romain Linsolas
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
maru.maru
 
Gwt oxiane-novae-lr
Gwt oxiane-novae-lrGwt oxiane-novae-lr
Gwt oxiane-novae-lr
oxmed
 
Framework JavaScript Web - Brief techno
Framework JavaScript Web - Brief technoFramework JavaScript Web - Brief techno
Framework JavaScript Web - Brief techno
JEAN-GUILLAUME DUJARDIN
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon
 
Du JavaScript propre ? Challenge accepted!
Du JavaScript propre ? Challenge accepted!Du JavaScript propre ? Challenge accepted!
Du JavaScript propre ? Challenge accepted!
OCTO Technology
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursHoracio Gonzalez
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 

Similaire à jQuery GTI780 & MTI780 ETS A09 (20)

Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575
 
Angluars js
Angluars jsAngluars js
Angluars js
 
HTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilitéHTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilité
 
jQuery Mobile & Applications Web
jQuery Mobile & Applications WebjQuery Mobile & Applications Web
jQuery Mobile & Applications Web
 
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
 
Présentation de BackBone.JS
Présentation de BackBone.JSPrésentation de BackBone.JS
Présentation de BackBone.JS
 
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Gwt oxiane-novae-lr
Gwt oxiane-novae-lrGwt oxiane-novae-lr
Gwt oxiane-novae-lr
 
Manualjquery
ManualjqueryManualjquery
Manualjquery
 
Framework JavaScript Web - Brief techno
Framework JavaScript Web - Brief technoFramework JavaScript Web - Brief techno
Framework JavaScript Web - Brief techno
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
Du JavaScript propre ? Challenge accepted!
Du JavaScript propre ? Challenge accepted!Du JavaScript propre ? Challenge accepted!
Du JavaScript propre ? Challenge accepted!
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Gradle_LyonJUG
Gradle_LyonJUGGradle_LyonJUG
Gradle_LyonJUG
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
 

Plus de Claude Coulombe

Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013
Claude Coulombe
 
De nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMDe nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOM
Claude Coulombe
 
Infonuagique retour d'expérience
 Infonuagique   retour d'expérience Infonuagique   retour d'expérience
Infonuagique retour d'expérienceClaude Coulombe
 
De nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCsDe nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCs
Claude Coulombe
 
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
Claude Coulombe
 
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
Claude Coulombe
 
Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011
Claude Coulombe
 
Gwt intro-101
Gwt intro-101Gwt intro-101
Gwt intro-101
Claude Coulombe
 
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Normes avancées du Web  - GTI780 & MTI780 - ETS - A09Normes avancées du Web  - GTI780 & MTI780 - ETS - A09
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
GWT Approfondissement  - GTI780 & MTI780 - ETS - A09GWT Approfondissement  - GTI780 & MTI780 - ETS - A09
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
Claude Coulombe
 
Ajax GTI780 & MTI780 ETS A09
Ajax  GTI780 & MTI780  ETS  A09Ajax  GTI780 & MTI780  ETS  A09
Ajax GTI780 & MTI780 ETS A09
Claude Coulombe
 
Web 2.0 GTI780 & MTI780 ETS A09
Web 2.0  GTI780 & MTI780  ETS  A09Web 2.0  GTI780 & MTI780  ETS  A09
Web 2.0 GTI780 & MTI780 ETS A09
Claude Coulombe
 
Mcetech 2009 - Open Social
Mcetech 2009 - Open SocialMcetech 2009 - Open Social
Mcetech 2009 - Open Social
Claude Coulombe
 
Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 

Plus de Claude Coulombe (20)

Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013
 
De nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMDe nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOM
 
Infonuagique retour d'expérience
 Infonuagique   retour d'expérience Infonuagique   retour d'expérience
Infonuagique retour d'expérience
 
De nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCsDe nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCs
 
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
 
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
 
Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011
 
Gwt intro-101
Gwt intro-101Gwt intro-101
Gwt intro-101
 
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
 
Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09
 
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Normes avancées du Web  - GTI780 & MTI780 - ETS - A09Normes avancées du Web  - GTI780 & MTI780 - ETS - A09
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
GWT Approfondissement  - GTI780 & MTI780 - ETS - A09GWT Approfondissement  - GTI780 & MTI780 - ETS - A09
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
 
Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09
 
Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09
 
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Ajax GTI780 & MTI780 ETS A09
Ajax  GTI780 & MTI780  ETS  A09Ajax  GTI780 & MTI780  ETS  A09
Ajax GTI780 & MTI780 ETS A09
 
Web 2.0 GTI780 & MTI780 ETS A09
Web 2.0  GTI780 & MTI780  ETS  A09Web 2.0  GTI780 & MTI780  ETS  A09
Web 2.0 GTI780 & MTI780 ETS A09
 
Mcetech 2009 - Open Social
Mcetech 2009 - Open SocialMcetech 2009 - Open Social
Mcetech 2009 - Open Social
 
Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08
 

jQuery GTI780 & MTI780 ETS A09

  • 1. Jquery : bibliothèque JavaScript Faites davantage avec moins de code! GTI780 / MTI780 - 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. Automne 2009
  • 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 plugiciels. jQuery Write Less, Do More. http://www.jQuery.com Présentation jQuery Automne 2009
  • 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 Présentation jQuery Automne 2009
  • 4. jQuery – Sélecteurs d’objets DOM • Sélection par identifiant (id) jQuery("#monId") • Sélection par classe (CSS class) jQuery(".maClasse") • Sélection par balise (tag) jQuery("div") • Documentation http://docs.jquery.com/Selectors Présentation jQuery Automne 2009
  • 5. jQuery – Filtres d’objets DOM • Emploi de filtres pour réduire les tableaux d’objets (opérateur “:”) jQuery("div:eq(1)") jQuery("span:not(#monId)") jQuery("p:first").hasClass("myClass") Présentation jQuery Automne 2009
  • 6. jQuery – Manipulation d’objets DOM • Création d’un fragment de HTML et ajout à la fin du document jQuery("<p>Qu’est-ce que jQuery?</p>").appendTo("body") • Changement de CSS jQuery("#monId").toggleClass("surbrillance") jQuery("tr").toggleClass("couleurLigne") • Changement de texte jQuery(".classeTexte").text("texte de remplacement") • Documentation http://docs.jquery.com/Manipulation Présentation jQuery Automne 2009
  • 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("#monId").addClass("maClasseCSS"); jQuery("#monId").show(); Devient jQuery("#monId").addClass("maClasseCSS").show(); Présentation jQuery Automne 2009
  • 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 Présentation jQuery Automne 2009
  • 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. Présentation jQuery Automne 2009
  • 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: "POST", url: "/ServeurAjaxSimple/reponse", data: "param1=valeur1&param2=valeur2", success: function(rep){ /* callback */ alert( "Donnée traitées: " + rep ); } Présentation jQuery }); Automne 2009
  • 11. jQuery - Avantages jQuery GEEK Présentation jQuery Automne 2009 * Source Clipart : http://www.clipart.com
  • 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. Présentation jQuery Automne 2009 * D'où le slogan : Write Less, Do More.
  • 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 Présentation jQuery Automne 2009
  • 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 Présentation jQuery Automne 2009
  • 15. Questions ? Présentation jQuery Automne 2009 * Source Clipart : http://www.clipart.com