JQuery Document original de François BONNEVILLE francois@aricia. fr, Laboratoire d'Informatique de l’Université de Franche-Comté, ajouts par Michel Buffa, buffa@unice. fr, Université de Nice
De Java. Script… à j. Query • La naissance de Java. Script ¨ 1995 : Brendan Eich développe pour Netscape Communications Corporation, un langage de script, appelé Mocha, puis Live. Script et finalement Java. Script ¨ Javascript est intégré dans le navigateur Netscape 2. Succès immédiat. • La guerre des navigateurs ¨ Netscape et Microsoft (avec JScript dans Internet Explorer) ont développé leur propre variante de Java. Script avec des fonctionnalités supplémentaires et incompatibles, notamment dans la manipulation du DOM (modèle objet du navigateur WEB) ¨ 1997 : Adoption du standard ECMAScript. Les spécifications sont rédigées dans le document Standard ECMA-262. Cours applications web M 1 Miage 2011 2
La naissance de la fondation Mozilla • Netscape perd des parts de marché face à Microsoft • Malgré un procès pour concurrence déloyale, Netscape, racheté par AOL est dissoute en 2004 • Netscape, dans ses dernières forces, fonde la fondation principauté Mozilla, et lui livre le code source de Netscape Navigator 5, qui contient les premières briques du moteur de rendu Gecko (aujourd’hui au coeur de Firefox). • Actuellement, les navigateurs web modernes supportent tous les spécifications ECMAScript • Mais chacun a étendu les spécifications pour utiliser au mieux son propre navigateur, ce qui a amené à des différences d’implémentation suivant le navigateur… Cours applications web M 1 Miage 2011 3
Java. Script devenu incontournable • Les spécifications ECMAScript ont permis de pérenniser Java. Script • Java. Script permet de contrôler quasiment tous les paramètres d’une page WEB • C’est le seul langage, coté client, capable de changer dynamiquement l’aspect d’une page WEB • Avec l’arrivée de l’objet XMLHttp. Request permettant le développement d’applications AJAX, Java. Script est devenu incontournable dans le développement d’interfaces WEB évoluées (WEB 2. 0) Cours applications web M 1 Miage 2011 4
Les premiers « Frameworks » • Comme il était devenu difficile de coder du javascript pour tous les navigateurs, sont apparus des « Frameworks » permettant une spécification unique, indépendante du navigateur ¨ Prototype. JS - www. prototypejs. org Ø script. aculo. us ¨ Mootools - mootools. net ¨ Do. Jo Toolkit - www. dojotoolkit. org ¨ Yahoo UI - developer. yahoo. com/yui/ ¨ Ext. JS - www. extjs. com ¨ UIZE - www. uize. com Cours applications web M 1 Miage 2011 5
JQuery • Une bibliothèque javascript open-source et crossbrowser • Elle permet de traverser et manipuler très facilement l'arbre DOM des pages web à l'aide d'une syntaxe fortement similaire à celle d'XPath. • JQuery permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc. • Gérer les événements javascript • Faire des requêtes AJAX simplement Cours applications web M 1 Miage 2011 6
John Resig • John Resig est un développeur d’outils Java. Script pour Mozilla Corporation et auteur du livre Pro Java. Script Techniques. Il est également le créateur et développeur principal de la j. Query Java. Script library. • Il vit à Boston, MA. Il a publié son second livre : Secrets of the Java. Script Ninja, en 2009. • Il a porté le langage processing en javascript l’année dernière (http: //processingjs. org/), • Il a créé également j. Query Mobile (http: //jquerymobile. com/) • Microsoft et Nokia incluent j. Query sur leurs plateformes, [1] Microsoft dans. Visual Studio[2] pour l’utiliser avec les frameworks ASP. NET AJAX et ASP. NET MVC Framework alors que Nokia l’a intégré dans sa plateforme. Web Run. Time.
Ce que j. Query n’est pas • Un substitut pour apprendre Java. Script ¨ j. Query est très puissant et très pratique, mais vous devez néanmoins connaitre les bases de Javascript, notamment la partie “objet” du langage. ¨ Voir des vlivres comme : Ø “Object Oriented Javascript de Stoyan Stefanov” ou Ø “j. Query, novice to ninja” (google est votre ami) • Une réponse à tout ¨ Utilisez j. Query uniquement lorsque c’est nécessaire. On commence toujours par HTML+CSS avant de cher des plugins j. Query magiques. ¨ De nombreuses UI sont pures html+CSS
une simple bibliothèque à importer • Disponible sur le site de Jquery http: //jquery. com/ <script type="text/javascript" src="jquery. js"></script> • Ou directement sur Google code <script type="text/javascript" src="http: //ajax. googleapis. com/ajax/libs/jquery/1/jquery. min. j s"> </script> Cours applications web M 1 Miage 2011 9
La fonction j. Query() • j. Query repose sur une seule fonction : j. Query() ou $(). • C’est une fonction Java. Script • Elle accepte des paramètres • Elle retourne un objet • $ : Syntaxe issue de « Prototype » Cours applications web M 1 Miage 2011 10
Selecteur magique : $('anything') ! • $ accepte un sélecteur CSS en argument • $ accepte des ID : ¨ $('#nom. ID') retourne un élément <-> document. get. Element. By. Id • $ accepte des classes : ¨ $('. nom. Classe') retourne tous les éléments qui correspondent à cette classe • $ accepte plusieurs sélecteurs ¨ $('. article, . nouvelles, . edito') Cours applications web M 1 Miage 2011 11
$(anything) • $ accepte des sélecteurs spécifiques : ¨ $(': radio'), $(': header'), $(': first-child') • des sélecteurs en forme de filtres : ¨ $(': checked'), $(': odd'), $(': visible') ¨ plus fort: $(': contains(du texte)') • des attributs ¨ $('a[href]'), $('a[href^=http: //'), $('img[src$=. png]' Cours applications web M 1 Miage 2011 12
Rappel sur le DOM • “Le Document Object Model (DOM) est une convention cross-platform et independente du langage pour representier and interagir avec des objets dans des documents en HTML, XHTML ou XML.
Exemple de manipulation du DOM <html> <script type="text/javascript" src="http: //ajax. googleapis. com/ajax/libs/ jquery/1/jquery. min. js"> </script> <body> <div id="mon. Div">Bonjour</div> <a href="#" on. Click="$('#mon. Div'). hide(); "> disparition</a> </body> </html> Cours applications web M 1 Miage 2011 14
j. Query: un objet • les méthodes s'appliquent généralement à tous les éléments sélectionnés ¨ $('. classe'). hide(); ¨ $('. classe'). show(); • de nombreuses méthodes utilitaires ¨ parcourir le DOM: . parent(), . next(), . children(), . parents() ¨ ajouter ou retirer des classes CSS: add. Class, remove. Class ¨ manipuler: append, wrap, prepend • Intérêt fondamental: la plupart des méthodes de l'objet retournent l'objet lui-même ¨ on peut chaîner les appels ! ¨ $('anything'). parent(). find('still anything'). show(); ¨ Cette propriété est extrêmement puissante ! Cours applications web M 1 Miage 2011 15
Nombreux exemples interactifs • Les selecteurs j. Query sont illustrés par de nombreux tutoriaux interactifs, par exemple : ¨ Ici : http: //www. w 3 schools. com/jquery_examples. asp ¨ Et là : http: //docs. jquery. com/Tutorials: Live_Examples_of_j. Quer y Cours applications web M 1 Miage 2011 16
j. Query example d’utilisation 1 $(“li: odd”). prepend(‘<span>Changed</span>’). css({background: “red”}); <ul> <li> First item </li> <li> Second item </li> <li> Third item </li> </ul> <li> <span>Changed</span> First item </li> <li> Second item </li> <span>Changed</span> Third item </li> </ul> <li style=“background: red; ”> <span>Changed</span> First item </li> <li> Second item </li> <li style=“background: red; ”> <span>Changed</span> Third item </li> </ul>
j. Query example d’utilisation 2 $(“div: hidden”). find(“. foo”). empty(). text(“Changed”). end(). show(); <div> <span class=“foo”> Some text </span> </div> <div style=“display: none”> <span> More text </span> <span class=“foo”> Goodbye cruel world. </span> </div> <div> <span class=“foo”> Some text </span> </div> <div style=“display: none”> <span> More text </span> <span class=“foo”> Changed </span> </div> <span class=“foo”> Some text </span> </div> <div style=“display: block”> <span> More text </span> <span class=“foo”> Changed </span> </div>
j. Query example d’utilisation 3 Determiner si une checkbox est cochée If ($(‘#total’). attr(‘checked’)) { //Traitement si cochée } else { //Traitement si non cochée }
j. Query example d’utilisation 4 Intercepter le bouton submit d’un formulaire : $(document). ready(function() { $(‘#ok’). submit(function() { if ($(‘#login’). val() ==‘’) { alert (‘Entrer un login’); return false; } }) });
j. Query example d’utilisation 5 Effacer le contenu d’un champs de texte lorsqu’il a le focus <input name=“nom” type=“text” id=“nom” value=“Entrez votre nom”> $(‘#nom’). focus(function() { var field = $(this); field. val(‘’); });
j. Query example d’utilisation 6 Tester le clic sur n’importe quel bouton radio : $(‘: radio’). click(function() { //do stuff }); Donner le focus au premier élément d’un formulaire: $(‘nom’). focus;
j. Query example d’utilisation 7 $(“span. none”). click( function(){ $(this). siblings(“: checkbox”). remove. Attr(“checked”); } ); $(“span. all”). click( function(){ $(this). siblings(“: checkbox”). attr(“checked”, “checked”); } ); <div> <span class=“all”>Select All</span> <span class=“none”>Select None</span> <input name=“chk 1” type=“checkbox”/> <input name=“chk 2” type=“checkbox”/> <input name=“chk 3” type=“checkbox”/> </div> <span class=“all”>Select All</span> or <span class=“none”>Select None</span> <input name=“chk 4” type=“checkbox”/> <input name=“chk 5” type=“checkbox”/> $(“span”). click( function(){ if($(this). text()==“Select All”)) $(this). siblings(“: checkbox”). attr(“checked”, “checked”); else if ($(this). attr(“class”)==“none”) $(this). siblings(“: checkbox”). remove. Attr(“checked”); } ); <input name=“chk 6” type=“checkbox”/> </div>
Ajax • JQuery possède toute une panoplie de fonctions permettant de simplifier les requêtes Ajax • La plus simple : $('#ma. Div'). load('page. html'); • Plus complexe : $. get('test. html', function(data) {faire quelque chose); • Générale : $. ajax({ url: 'document. xml', type: 'GET', data. Type: 'xml', timeout: 1000, error: function(){alert('Erreur chargement'); }, success: function(xml){faire quelque chose} }); Cours applications web M 1 Miage 2011 24
Tutorial ajax/j. Query très complet ! • Ici : http: //viralpatel. net/blogs/2009/04/jquery-ajaxtutorial-example-ajax-jquery-development. html Cours applications web M 1 Miage 2011 25
j. Query AJAX Exemple <html> <head> <title>AJAX Demo</title> <script type=“text/javascript” src=“jquery. js”> </script> <script type=“text/javascript”> var cnt = 0; $(function(){ $. ajax. Settings({ error: function(){alert(“Communication error!”); } }); $(“: button”). click(function(){ var input = {in: $(“: textbox”). val(), count: cnt}; $. get. JSON(“ajax. php”, input, function(json){ cnt = json. cnt; $(“. cnt”). text(cnt) $(“. msg”). text(json. out); }); }); </script> </head> <body> <p> Input: <input type=“textbox”/> <input type=“button” value=“Send”/> Output # <span class=“cnt”></span>: <span class=“msg”></span> </p> </body> </html> <? php $output = ‘’; switch($_REQUEST[‘in’]) { case ‘hello’: $output = ‘Hello back. ’; break; case ‘foo’: $output = ‘Foo you, too. ’; break; case ‘bar’: $output = ‘Where Andy Capp can be found. ’; break; case ‘foobar’: $output = ‘This is German, right? ’; break; default: $output = ‘Unrecognized string. ’; } $count = $_REQUEST[‘count’]+1; echo json_encode( array( ‘out’ => $output, ‘cnt’ => $count ) ); exit; ? >
![j. Query AJAX Fonctions • $. ajax, $. ajax. Setup • $. func(url[, params][,](https://present5.com/presentation/ff0ed135c6acd03fb71e1b9209efe232/image-27.jpg "j. Query AJAX Fonctions • $. ajax, $. ajax. Setup • $. func(url[, params][,")
j. Query AJAX Fonctions • $. ajax, $. ajax. Setup • $. func(url[, params][, callback]) ¨ ¨ ¨ $. get. JSON $. get. If. Modified $. get. Script $. post • $(selector), inject HTML ¨ load. If. Modified • $(selector), ajax. Setup alts ¨ ¨ ¨ ajax. Complete ajax. Error ajax. Send ajax. Start ajax. Stop ajax. Success ¨ ¨ ¨ ¨ async before. Send complete content. Type data. Type error global if. Modified process. Data success timeout type url
Inconvénients d’AJAX / XML • XML est délicat à parser en Javascript/j. Query $. ajax({ type: "GET", url: "courses. xml", data. Type: "xml", complete : function(data, status) { var products = data. response. XML; var html = ""; $(products). find('product'). each(function(){ var id = $(this). attr('id'); var name = $(this). find('name'). text(); var price =$(this). find('price'). text(); html += "<li>#"+id +" - <strong>"+name+"</strong> : " +price+"</li>"; }); $("#couses. List"). html(html); }}); Cours applications web M 1 Miage 2011 28
Inconvénients d’AJAX / Sécurité • pour des raisons de sécurité, les navigateurs interdisent de faire du « cross-domain » avec XMLHttp. Request dont le résultat serait du XML (et donc du HTML) …. mais pas pour des scripts Javascript ! • D’où l’idée de définir un modèle de données sous la forme d’objet Javascript ¨ JSON • Voir : http: //www. jsonpexamples. com/ Cours applications web M 1 Miage 2011 29
JSON (Java. Script Object Notation) • format de données textuel, générique, dérivé de la notation des objets de Java. Script • permet de représenter de l'information structurée. • décrit par la RFC 4627 de l’IETF. • Exemple : { "Image": { "Width": 800, "Height": 600, "Title": "Vue du 15ème étage", "Thumbnail": { "Url": "http: //www. example. com/481989943", "Height": 125, "Width": "100" }, "IDs": [116, 943, 234, 38793] } } Cours applications web M 1 Miage 2011 30
Les avantages de JSON • Type de données générique et abstrait pouvant ¨ être représenté dans n'importe quel langage de programmation ¨ représenter n'importe quelle donnée concrète. • simple à mettre œuvre tout en étant complet. • peu verbeux, lisible aussi bien par un humain que par une machine • facile à apprendre, syntaxe réduite • types de données sont connus et simples à décrire • indépendant du langage de programmation (bien qu'utilisant une notation Java. Script) • Le type MIME application/json est utilisé pour le transmettre par le protocole HTTP (notamment en Ajax) ¨ Standard dans les web services. Net, Java EE, etc. Cours applications web M 1 Miage 2011 31
Les avantages de JSON • Vis-à-vis de Java. Script, un document JSON représente un objet, d'où son nom. Il est donc plus facile à interpréter qu'un XML. var donnees = eval('('+donnees_json+')'); • Le site json. org fournit une liste de parseurs pour d'autres langages • Il peut aussi être utilisé pour : ¨ la sérialisation et déserialisation d'objets ; ¨ l’encodage de documents ; Cours applications web M 1 Miage 2011 32
![j. Query et JSON j. Query. get. JSON( url, [ data ], [ callback(data,](https://present5.com/presentation/ff0ed135c6acd03fb71e1b9209efe232/image-33.jpg "j. Query et JSON j. Query. get. JSON( url, [ data ], [ callback(data,")
j. Query et JSON j. Query. get. JSON( url, [ data ], [ callback(data, text. Status) ] ) Exemple : <html><head> <script src="jquery. min. js"></script> </head> <body> <div id="images" style="height: 300 px"></div> <script> $. get. JSON("http: //api. flickr. com/services/feeds/photos_public. gne? tag s=besancon&tagmode=any&format=json&jsoncallback=? ", function(data){ $. each(data. items, function(i, item){ $("<img/>"). attr("src", item. media. m). append. To("#images"); if ( i == 3 ) return false; }); </script> </body></html> Cours applications web M 1 Miage 2011 33
j. Query UI • http: //jqueryui. com/ • Un ensemble de composants graphiques téléchargeable à l'adresse http: //jqueryui. com/download. ¨ un noyau (Core) ¨ des « comportements » (interactions) Ø draggable : pour glisser-déplacer un élément http: //jqueryui. com/demos/draggable/ Ø droppable : pour « déposer » un élément http: //jqueryui. com/demos/droppable/ Ø resizable : pour redimensionner un élément http: //jqueryui. com/demos/resizable/ Ø selectable : pour sélectionner des éléments à la souris http: //jqueryui. com/demos/selectable/ Ø sortable : pour trier des éléments http: //jqueryui. com/demos/selectable/ Cours applications web M 1 Miage 2011 34
j. Query UI ¨ des « widgets » Ø « accordéon » http: //jqueryui. com/demos/accordion/ Ø « calendrier » http: //jqueryui. com/demos/datepicker/ Ø boîte de dialogue http: //jqueryui. com/demos/dialog/ Ø barre de progression http: //jqueryui. com/demos/progressbar/ Ø curseur http: //jqueryui. com/demos/slider/ Ø onglets http: //jqueryui. com/demos/tabs/ ¨ des « effets » http: //jqueryui. com/demos/effect/ Ø Clignotement, disparition, apparition, éclatement, transition… • Une collection de thèmes http: //jqueryui. com/themeroller/ Cours applications web M 1 Miage 2011 35
j. Query Plugins • On peut étendre facilement j. Query en utilisant des « plugins » • Les méthodes ajoutées sont au même niveau que les méthodes natives • Ils conservent les mêmes sémantiques que les méthodes natives: retourner l'objet j. Query, appliquer la méthode à tous les éléments représentés • Des centaines plugins existent d'ores et déjà, de qualité variable; certains mis en avant par l'équipe de développement • http: //plugins. jquery. com/ ¨ des menus http: //apycom. com/ http: //www. wizzud. com/jq. Dock/ ¨ Galerie photo : Visual. Lightbox http: //visuallightbox. com Cours applications web M 1 Miage 2011 36
Conclusion • • • j. Query est un framework complet et facile à utiliser Bibliothèque légère à charger Simplifier et unifie la syntaxe d’accès au DOM Permet de faire des requètes AJAX simplement UI et nombreux plugins complémentaires • D’autres frameworks sont disponibles et ne sont pas à oublier : il est possible de combiner les frameworks ¨ Dojo recommandé pour application riche en widgets et nécessitant une forte cohérence (widgets MVC notamment) Cours applications web M 1 Miage 2011 37
j. Query ressources intéressantes • Site officiel ¨ http: //www. jquery. com • Learning Center ¨ ¨ http: //docs. jquery. com/Tutorials http: //www. learningjquery. com/ http: //15 daysofjquery. com/ http: //www. roseindia. net/ajax/jquery/ • Support ¨ http: //docs. jquery. com/Discussion ¨ http: //www. nabble. com/JQuery-f 15494. html mailing list archive ¨ irc. freenode. net irc room: #jquery • Documentation ¨ http: //docs. jquery. com/Main_Page ¨ http: //www. visualjquery. com ¨ http: //jquery. bassistance. de/api-browser/ • j. Query Success Stories ¨ http: //docs. jquery. com/Sites_Using_j. Query
Скачать презентацию JQuery Document original de François BONNEVILLE francois aricia fr
ff0ed135c6acd03fb71e1b9209efe232.ppt