1 / 23

IHM

IHM. JQuery François BONNEVILLE aricia - francois@aricia.fr Laboratoire d'Informatique de l’Université de Franche-Comté. De JavaScript… à jQuery. La naissance de JavaScript

hadley-franco
Download Presentation

IHM

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IHM JQuery François BONNEVILLE aricia - francois@aricia.fr Laboratoire d'Informatiquede l’Université de Franche-Comté

  2. De JavaScript… à jQuery • La naissance de JavaScript • 1995 : Brendan Eich développe pour Netscape Communications Corporation, un langage de script, appelé Mocha, puis LiveScript et finalement JavaScript • 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 JavaScript 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 StandardECMA-262. Intefaces Hommes-Machines - François Bonneville

  3. 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… Intefaces Hommes-Machines - François Bonneville

  4. JavaScript devenu incontournable • Les spécifications ECMAScript ont permis de pérenniser JavaScript • JavaScript 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 XMLHttpRequest permettant le développement d’applications AJAX, JavaScript est devenu incontournable dans le développement d’interfaces WEB évoluées (WEB2.0) Intefaces Hommes-Machines - François Bonneville

  5. 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 • PrototypeJS - www.prototypejs.org • script.aculo.us • Mootools - mootools.net • DoJo Toolkit - www.dojotoolkit.org • Yahoo UI - developer.yahoo.com/yui/ • ExtJS - www.extjs.com • UIZE - www.uize.com Intefaces Hommes-Machines - François Bonneville

  6. JQuery • Une bibliothèque javascript open-source et cross-browser • 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 Intefaces Hommes-Machines - François Bonneville

  7. 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.js"> </script> Intefaces Hommes-Machines - François Bonneville

  8. La fonction jQuery() • jQuery repose sur une seule fonction :jQuery() ou $(). • C’est une fonction JavaScript • Elle accepte des paramètres • Elle retourne un objet • $ : Syntaxe issue de «  Prototype » Intefaces Hommes-Machines - François Bonneville

  9. $('anything') • $ accepte un sélecteur CSS en argument • $ accepte des ID : • $('#nomID') retourne un élément <-> document.getElementById • $ accepte des classes : • $('.nomClasse') retourne tous les éléments qui correspondent à cette classe • $ accepte plusieurs sélecteurs • $('.article, .nouvelles, .edito') Intefaces Hommes-Machines - François Bonneville

  10. $(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]' Intefaces Hommes-Machines - François Bonneville

  11. Exemple <html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <body> <div id="monDiv">Bonjour</div> <a href="#" onClick="jQuery('#monDiv').hide();"> disparition</a> </body> </html> Intefaces Hommes-Machines - François Bonneville

  12. jQuery: 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: addClass, removeClass • 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 ! Intefaces Hommes-Machines - François Bonneville

  13. Ajax • JQuery possède toute une panoplie de fonctions permettant de simplifier les requêtes Ajax • La plus simple : $('#maDiv').load('page.html'); • Plus complexe : $.get('test.html',function(data) {faire quelque chose); • Générale : $.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Erreur chargement'); }, success: function(xml){faire quelque chose}}); Intefaces Hommes-Machines - François Bonneville

  14. Inconvénients d’AJAX / XML • XML est délicat à parser en Javascript/jQuery $.ajax({ type: "GET", url: "courses.xml", dataType: "xml", complete : function(data, status) { var products = data.responseXML; 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>"; }); $("#cousesList").html(html); }}); Intefaces Hommes-Machines - François Bonneville

  15. Inconvénients d’AJAX / Sécurité • pour des raisons de sécurité, les navigateurs interdisent de faire du « cross-domain » avec XMLHttpRequest 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 Intefaces Hommes-Machines - François Bonneville

  16. JSON (JavaScript Object Notation) • format de données textuel, générique, dérivé de la notation des objets de JavaScript • 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] } } Intefaces Hommes-Machines - François Bonneville

  17. 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 JavaScript) • Le type MIME application/json est utilisé pour le transmettre par le protocole HTTP (notamment en Ajax) Intefaces Hommes-Machines - François Bonneville

  18. Les avantages de JSON • Vis-à-vis de JavaScript, 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 ; Intefaces Hommes-Machines - François Bonneville

  19. jQuery et JSON jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ) Exemple : <html><head> <script src="jquery.min.js"></script> </head> <body> <div id="images" style="height: 300px"></div> <script> $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=besancon&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); }); </script> </body></html> Intefaces Hommes-Machines - François Bonneville

  20. jQuery 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émenthttp://jqueryui.com/demos/draggable/ • droppable : pour « déposer » un élémenthttp://jqueryui.com/demos/droppable/ • resizable : pour redimensionner un élémenthttp://jqueryui.com/demos/resizable/ • selectable : pour sélectionner des éléments à la sourishttp://jqueryui.com/demos/selectable/ • sortable : pour trier des éléments http://jqueryui.com/demos/selectable/ Intefaces Hommes-Machines - François Bonneville

  21. jQuery 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èmeshttp://jqueryui.com/themeroller/ Intefaces Hommes-Machines - François Bonneville

  22. jQuery Plugins • On peut étendre facilement jQuery 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 jQuery, 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 menushttp://apycom.com/http://www.wizzud.com/jqDock/ • Galerie photo : VisualLightboxhttp://visuallightbox.com Intefaces Hommes-Machines - François Bonneville

  23. Conclusion • jQuery 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 Intefaces Hommes-Machines - François Bonneville

More Related