La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

JQuery Document original de François BONNEVILLE Laboratoire d'Informatique de lUniversité de Franche-Comté, ajouts par Michel Buffa,

Présentations similaires


Présentation au sujet: "JQuery Document original de François BONNEVILLE Laboratoire d'Informatique de lUniversité de Franche-Comté, ajouts par Michel Buffa,"— Transcription de la présentation:

1 JQuery Document original de François BONNEVILLE Laboratoire d'Informatique de lUniversité de Franche-Comté, ajouts par Michel Buffa, Université de Nice

2 Cours applications web M1 Miage 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 Standard ECMA-262.

3 Cours applications web M1 Miage 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 (aujourdhui 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 dimplémentation suivant le navigateur…

4 Cours applications web M1 Miage JavaScript devenu incontournable Les spécifications ECMAScript ont permis de pérenniser JavaScript JavaScript permet de contrôler quasiment tous les paramètres dune page WEB Cest le seul langage, coté client, capable de changer dynamiquement laspect dune page WEB Avec larrivée de lobjet XMLHttpRequest permettant le développement dapplications AJAX, JavaScript est devenu incontournable dans le développement dinterfaces WEB évoluées (WEB2.0)

5 Cours applications web M1 Miage 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 - script.aculo.us Mootools - mootools.net DoJo Toolkit - Yahoo UI - developer.yahoo.com/yui/ ExtJS - UIZE -

6 Cours applications web M1 Miage 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

7 John Resig John Resig est un développeur doutils JavaScript pour Mozilla Corporation et auteur du livre Pro JavaScript Techniques. Il est également le créateur et développeur principal de la jQuery JavaScript library.Mozilla CorporationPro JavaScript TechniquesjQuery JavaScript library Il vit à Boston, MA. Il a publié son second livre : Secrets of the JavaScript Ninja, en 2009.Secrets of the JavaScript Ninja Il a porté le langage processing en javascript lannée dernière (http://processingjs.org/),http://processingjs.org/ Il a créé également jQuery Mobile (http://jquerymobile.com/) Microsoft et Nokia incluent jQuery sur leurs plateformes,[1] Microsoft dansVisual Studio[2] pour lutiliser avec les frameworks ASP.NET AJAX et ASP.NET MVC Framework alors que Nokia la intégré dans sa plateformeWeb Run- Time.MicrosoftNokia[1]Visual Studio[2]ASP.NET AJAXASP.NET MVC Framework

8 Ce que jQuery nest pas Un substitut pour apprendre JavaScript jQuery 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 jQuery, novice to ninja (google est votre ami) Une réponse à tout Utilisez jQuery uniquement lorsque cest nécessaire. On commence toujours par HTML+CSS avant de chercher des plugins jQuery magiques. De nombreuses UI sont pures html+CSS

9 Cours applications web M1 Miage une simple bibliothèque à importer Disponible sur le site de Jquery Ou directement sur Google code

10 Cours applications web M1 Miage La fonction jQuery() jQuery repose sur une seule fonction : jQuery() ou $(). Cest une fonction JavaScript Elle accepte des paramètres Elle retourne un objet $ : Syntaxe issue de « Prototype »

11 Cours applications web M1 Miage Selecteur magique : $('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')

12 Cours applications web M1 Miage $(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]'

13 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.cross-platformobjetsHTMLXHTMLXML

14 Cours applications web M1 Miage Exemple de manipulation du DOM Bonjour disparition

15 Cours applications web M1 Miage 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 !

16 Nombreux exemples interactifs Les selecteurs jQuery sont illustrés par de nombreux tutoriaux interactifs, par exemple : Ici : Et là : y y Cours applications web M1 Miage

17 jQuery example dutilisation 1 Changed First item Second item Changed Third item First item Second item Third item Changed First item Second item Changed Third item $(li:odd).prepend( Changed ).css({background:red});

18 jQuery example dutilisation 2 Some text More text Some text More text Goodbye cruel world. Some text More text Goodbye cruel world. $(div:hidden).find(.foo).empty().text(Changed).end().show(); Some text More text Changed Some text More text Changed Some text More text Changed

19 Determiner si une checkbox est cochée If ($(#total).attr(checked)) { //Traitement si cochée } else { //Traitement si non cochée } jQuery example dutilisation 3

20 Intercepter le bouton submit dun formulaire : $(document).ready(function() { $(#ok).submit(function() { if ($(#login).val() ==) { alert (Entrer un login); return false; } }) }); jQuery example dutilisation 4

21 Effacer le contenu dun champs de texte lorsquil a le focus $(#nom).focus(function() { var field = $(this); field.val(); }); jQuery example dutilisation 5

22 Tester le clic sur nimporte quel bouton radio : $(:radio).click(function() { //do stuff }); Donner le focus au premier élément dun formulaire: $(nom).focus; jQuery example dutilisation 6

23 jQuery example dutilisation 7 Select All Select None Select All Select None $(span.none).click( function(){ $(this).siblings(:checkbox).removeAttr(checked); } ); $(span.all).click( function(){ $(this).siblings(:checkbox).attr(checked,checked); } ); $(span).click( function(){ if($(this).text()==Select All)) $(this).siblings(:checkbox).attr(checked,checked); else if ($(this).attr(class)==none) $(this).siblings(:checkbox).removeAttr(checked); } ); or

24 Cours applications web M1 Miage 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} });

25 Tutorial ajax/jQuery très complet ! Ici : tutorial-example-ajax-jquery-development.htmlhttp://viralpatel.net/blogs/2009/04/jquery-ajax- tutorial-example-ajax-jquery-development.html Cours applications web M1 Miage

26 jQuery AJAX Exemple AJAX Demo var cnt = 0; $(function(){ $.ajaxSettings({ error:function(){alert(Communication error!);} }); $(:button).click(function(){ var input = {in:$(:textbox).val(),count:cnt}; $.getJSON(ajax.php,input,function(json){ cnt = json.cnt; $(.cnt).text(cnt) $(.msg).text(json.out); }); Input: Output # : $output, cnt => $count ) ); exit; ?>

27 jQuery AJAX Fonctions $.func(url[,params][,callback]) $.get $.getJSON $.getIfModified $.getScript $.post $(selector), inject HTML load loadIfModified $(selector), ajaxSetup alts ajaxComplete ajaxError ajaxSend ajaxStart ajaxStop ajaxSuccess $.ajax, $.ajaxSetup async beforeSend complete contentType data dataType error global ifModified processData success timeout type url

28 Cours applications web M1 Miage Inconvénients dAJAX / 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 += " #"+id +" - "+name+" : " +price+" "; }); $("#cousesList").html(html); }});

29 Cours applications web M1 Miage Inconvénients dAJAX / 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 ! Doù lidée de définir un modèle de données sous la forme dobjet Javascript JSON Voir :

30 Cours applications web M1 Miage 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 lIETF. Exemple : { "Image": { "Width": 800, "Height": 600, "Title": "Vue du 15ème étage", "Thumbnail": { "Url": "http://www.example.com/ ", "Height": 125, "Width": "100" }, "IDs": [116, 943, 234, 38793] } }

31 Cours applications web M1 Miage 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) Standard dans les web services.Net, Java EE, etc.

32 Cours applications web M1 Miage 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 langagesjson.org Il peut aussi être utilisé pour : la sérialisation et déserialisation d'objets ; lencodage de documents ;

33 Cours applications web M1 Miage jQuery et JSON jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ) Exemple : $.getJSON("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){ $(" ").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; });

34 Cours applications web M1 Miage jQuery UI Un ensemble de composants graphiques téléchargeable à l'adresse un noyau (Core) des « comportements » ( interactions ) draggable : pour glisser-déplacer un élément droppable : pour « déposer » un élément resizable : pour redimensionner un élément selectable : pour sélectionner des éléments à la souris sortable : pour trier des éléments

35 Cours applications web M1 Miage jQuery UI des « widgets » « accordéon » « calendrier » boîte de dialogue barre de progression curseur onglets des « effets » Clignotement, disparition, apparition, éclatement, transition… Une collection de thèmes

36 Cours applications web M1 Miage 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 des menus Galerie photo : VisualLightbox

37 Cours applications web M1 Miage Conclusion jQuery est un framework complet et facile à utiliser Bibliothèque légère à charger Simplifier et unifie la syntaxe daccès au DOM Permet de faire des requètes AJAX simplement UI et nombreux plugins complémentaires Dautres 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)

38 jQuery ressources intéressantes Site officiel Learning Center Support mailing list archive irc.freenode.net irc room: #jquery irc.freenode.net Documentation jQuery Success Stories


Télécharger ppt "JQuery Document original de François BONNEVILLE Laboratoire d'Informatique de lUniversité de Franche-Comté, ajouts par Michel Buffa,"

Présentations similaires


Annonces Google