![]() |
![]() |
Accueil > Intranet Michel Buffa > Option web 2.0 Master 1 informatique 2011 > TP jQuery
TP jQueryDe $1Table des matières
Regarder des exemples interactifsCommencez par faire tourner et étudier le code des exemples de cette page web : http://www.w3schools.com/jquery/jquery_examples.asp Les exemples tournent dans un mini IDE inclu dans une page web, ils vous serviront pour les exercices suivants. Manipulation des sélecteursUtilisez pour tester l'IDE en ligne http://jsbin.com/, vous ferez des copier/coller du code html et javascript dans cet outil, vous le testerez et à la fin vous créerez une page html contenant le javascript pour la tester dans votre navigateur. Nous allons jouer sur un fichier html de test qui est annoté par des balises sans effet pour le moment : <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <title>Exercice sur les selecteurs jQuery</title> </head> <body> <p id="contenu"> La couleur <span class="vert">verte</span> est jolie, <span class="titre2"> surtout en titre2</span>, <a href="#">ou en lien href</a>. <span class="rouge">Le rouge</span> est pas mal aussi <span class="orange">mais le orange me plait bien</span> surtout, <span class="titre2">en titre2 </span> vous êtes d'accord avec moi ?<span class="gras">On peut aussi écrire en gras </span> et même en <span class="titre1">gros comme dans ce titre1</span>. L'écriture <span class="souligne">en souligné</span>, ou en <span class="barre">barré</span> est aussi possible en html. <span class="souligne">Le souligné </span> <span class="bleu"> ou le bleu</span> <span class="gras"> et le gras</span>. sont sympas, <span class="italique"> mais l'italique</span> est pratique, <span class="barre"> tout comme le barré</span> surtout quand on colorie, <span class="vert"> en vert</span> le texte. <span class="italique">L'italique</span> est très joli comme style. <span> Ici j'ai un span html sans rien</span> et là le même <span class="vert">de la classe vert</span> ici <a href="#">j'ai un lien a</a>, que j'aimerais bien transformer en bouton. <span class="vert">Le vert</span> peut aussi egayer les pages. <span class="titre1">J'aimerais devenir un titre 1</span> moi. Et ce texte <span class="vert">deviendra vert</span> lorsqu'on cliquera sur le bon bouton <a href="#">de même que ce lien deviendra un bouton</a> si on clique au bon endroit <span class="bleu">quand à ce texte il deviendra bleu</span>. Pourquoi ne pas, <span class="souligne">souligner</span> le fait que, <span class="vert">le vert</span> est la couleur de la nature. Et que le <span class="bleu">bleu celui du ciel</span>. <span class="souligne">Je souligne le fait que le lien qui suit</span> doit devenir un <a href="#">bouton.</a> Le vert aimerais devenir très présent <span class="vert">dans ce texte</span>, <span class="bleu">mais moins que le bleu </span>. Allez, <span class="italique">faites que cela </span> <span class="rouge">fonctionne.</span> </p> <button onclick="semantique()">Faire apparaitre le gras, l'italique et le souligné au bons endroits</button> <br/> <button onclick="colorer()">Colorer le texte</button> <br/> <button onclick="mettreTitres()">Mettre des titres</button> <br/> <button onclick="liensEnBoutons()">Transformer les liens en boutons</button> <br/> <button onclick="dupliquerTexte()">Dupliquer le texte</button> <br/> <button onclick="regrouperTitres()">Regrouper les titres</button> <br/> <button onclick="regrouperLiens()">Regrouper les liens</button> <br/> <button onclick="viderBoutons()">Vider les boutons</button> <br/> <button onclick="enleverLiens()">Enlever les liens</button> <br/> <button onclick="enleverGras()">Enlever le texte en gras</button> <br/> <button onclick="enleverItalique()">Enlever le texte en italique</button> <br/> <button onclick="enleverDecor()">Enlever le texte décoré</button> <br/> <button onclick="voirCode()">Voir le code</button><br/> </body> </html> Vous remarquerez qu'on a des attributs class= dans ce document. Ils correspondent à des classes CSS. Vous ajouterez des règles CSS à la volée avec jQuery en vous inspirant de cet exemple qui selectionne la classe "vert" et lui applique la règle css color:green : function colorer() { $(".vert").css("color", "green"); } Ouvrez jsbin.com et collez ce texte dans la zone html . Sauvegardez votre projet (menu jsbin/create milestone de jsBin). Si vous voulez conserver votre travail, il faudra copier/coller l'URL et le conserver quelque part avant de fermer l'onglet jsbin. Dans ce code on ajoute directement la librairie jQuery depuis les repositories de Google (au passage, dans le code c'est une vieille version de jQuery, mais pour ce que l'on fait cela n'a pas d'importance). N'oubliez pas de cocher la case 'autorun JS' si vous voulez voir en temps réel les résultats de vos modifications. Maintenant nous devons écrire en javascript (onglet javascript) le code jQuery pour effectuer les actions correspondants au titre des boutons ! Vous devez coder les fonctions suivantes (dans une balise <script>...</script> dans le document html : function enleverLiens() { } function enleverGras() { } function enleverItalique() { } function enleverDecor() { } function viderBoutons() { } function voirCode() { } function liensEnBoutons() { } function dupliquerTexte() { } function regrouperLiens() { } function mettreTitres() { } function regrouperTitres() { } function colorer() { } function semantique() { } Par exemple, le premier bouton doit mettre de l'italique, du gras du souligné et du style barré autours des textes dont la classe est "gras", "italique", etc. On a "classifié" des bouts de texte à l'aide de balises <span class="italique">, etc. Vous avez deux possibilités pour modifier le style d'un texte :
Remarque : laquelle des deux méthodes est la plus élégante ? Un exemple de correction: function colorer() { $('#contenu .rouge').wrap('<span style="color:red"></span>'); $('#contenu .vert').wrap('<span style="color:green"></span>'); $('#contenu .orange').wrap('<span style="color:orange"></span>'); $('#contenu .bleu').wrap('<span style="color:blue"></span>'); } Pour d'autres opérations, vous devrez utiliser d'autres fonctions applicables sur les objets trouvés par les sélecteurs :
Pour les questions plus difficiles (enlever les éléments décorés, par exemple), relire les ressources sur les selecteurs depuis la page Ressources JQuery. Ne passez pas plus de 25mns sur cet exercice, si vous n'y arrivez pas, allez voir une correction ici : http://jsbin.com/udihez/9/edit
Changment des attributs des balises et travail avec des classes CSSDans chaque balise html, nous retrouvons des attributs différents comme : title, alt, width, height etc. JQuery permet de manipuler ces attributs facilement à l'aide de la fonction .attr("name","parametre"); Regardons un exemple : http://jsbin.com/uxejug/14/edit dont voici quelques extraits du code html/css/js : <img style="background-color: black" class="show"><br><br> <button id="letsshow">show me / hide me</button> code CSS : .borders { border: 3px solid red; } .show { } .hidden { } JavaScript : $("img").attr("src","http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"); $(function() { Change the class on mouse enter or leave */ $("img").mouseenter(function() { $(this).addClass("borders"); }); $("img").mouseleave(function() { if ($(this).hasClass("borders")) { $(this).removeClass("borders"); } }); /* hide / show img on ajoute un écouteur de clic sur le bouton d'id letsshow */ $("#letsshow").click(function(){ $("img").toggle() ; // regarder la doc jquery api }); }); Utilisation d'extensions de vos navigateurs pour debugger tester...Je vous conseille fortement d'utiliser l'extension firebug pour firefox c'est une excellent outil de debug. Ou encore le debugger de Chrome (qu'on appelle avec ctrl-shift i ou F12), depuis la console de ces deux debuggers, vous pourrez taper des commandes JavaScript. Mais pour chrome et jQuery il y a une extension très pratique : jQuery Shell. Lancez chrome et allez sur le site de gestion des extensions : https://chrome.google.com/extensions/search?itemlang=&hl=en&q=jquery+shell Installez ces deux extensions. Vous devriez avoir deux boutons en haut à droite de Chrome. Elles permettent de tester des commandes jQuery sur n'importe quelle page web, même si elle n'utilise pas jQuery. La première extension (jQuery Shell) ouvre une jolie fenêtre pour taper des commandes, l'autre permet de le faire depuis le debugger Chrome, en entrant les commandes dans la console. Pour ceux qui sont avec firefox firebug, vous pouvez faire de même en utilisant la scriplet jQueryfy : http://www.learningjquery.com/2009/0...fy-bookmarklet Exercice : Allez sur la home page de Michel Buffa, la vieille page qui date du siècle dernier ;-) et ouvrez le jQuery Shell, tapez dans la console $("h1").hide(); par exemple, vous voyez l'intérêt ? Utilisez également le debugger (ctrl-shift-i) pour inspecter le code html de la page, comprendre sa structure et tester vos sélecteurs jQuery. Vérification de login/password en AjaxVoici un formulaire de saisie HTML, légèrement amélioré pour qu'on puisse référencer les champs depuis du javascript (on a rajouté des ids), et au début un code javascript/jQuery qui intercepte l'envoi du formulaire pour le faire en ajax (noter que la réponse renvoyée par la servlet est soit 0 soit 1 qui sont en javascript assimilables à true ou false) : <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <title>Exercice Ajax jQuery</title> <script type="text/javascript"> $(function () { // appelé dès que la page est chargée $("#loginForm").submit(function() { // appelé lors de la soumission du formulaire $.ajax( { type: "POST", url: "ServletLogin", // url de la Servlet de vérifiaction data: "login="+$("#login").val()+"&pass="+$("#pass").val(), // paramètres du formulaire success: function(response) { // callback, appelé lorsque la réponse arrive if(response==true) // si la connexion est ok, response vaut "1" { $("div#messageLogin").html("<span id=\"confirmMsg\">Vous êtes maintenant connecté.</span>"); // A faire : on désactive l'affichage du formulaire et on affiche un message de bienvenue à la place } else // si les identifiants sont incorrects, response vaut "0" ou n'importe quoi différent de "1"' { $("div#messageLogin").html("<img src=\"bomb.png\" style=\"float:left;\" /> Erreur lors de la connexion, veuillez vérifier votre login et votre mot de passe."); } } }); return false; // permet de rester sur la même page à la soumission du formulaire }); // du submit }); // du function </script> </head> <body> <h1>Formulaire Ajax JQuery</h1> <form name="loginForm" id="loginForm" method="post" action="#"> Nom d'utilisateur : <input type="text" name="login" id="login" /> Mot de passe : <input type="password" name="pass" id="pass" /> <input type="submit" value="Connecter"/> </form> <div id="messageLogin"></div> </body> </html> Et voici le code issu de la Servlet correspondante (ici on renvoie 1 si login/password = toto/toto) : protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ServletOutputStream out = response.getOutputStream(); String login = request.getParameter("login"); String password = request.getParameter("pass"); System.out.println("login = " + login + " password = " + password); response.setContentType("text/plain"); if(login.equals("toto") && password.equals("toto")) { out.println(1); } else { out.println(0); } } Travail à faire :
jQuery et JSONDe nombreux web services sur le web public sont accessible en REST de manière simple et savent exporter leurs résultats en JSON. L'exemple du cours qui affiche des photos en provenance de flickr est le suivant : http://jsbin.com/ezogeq/2/edit et voici son code : <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/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=biot&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); }); });</script> </body> </html> Cet exemple invoque l'url : Qui renvoie un objet json contenant des définitions d'images de Biot. Invoquez à la main cet URL et regardez le résultat retourné. C'est un objet javascript sous forme de chaine de caractère, le format s'appelle JSON ! jQuery propose des fonctions toute faites pour 1) appeler des web services qui renvoient du JSON c'est le $.getJSON(url, callback), et 2) cette fonction admet en second argument un callback qui reçoit en paramètre l'objet javascript correspondant à la chaine JSON reçue. Rappel, en javascript une chaine n'est pas un objet. Voir le cours ou la doc sur JSON (site de référence : http://json.org) Travail à faire : faire tourner l'exemple ci-dessus dans dans une de vos pages html + js, trouver la donc de l'api REST de flickr sur le web et comprendre comment on a pu trouver l'URL à invoquer. Jouons un peu avec un plugin jQuery d'affichage d'imagesJe vous propose de travailler sur une gallerie de photos. On vous propose un joli plugin jQuery : http://sorgalla.com/projects/jcarousel/ il permet de présenter élégamment des photos. Travail à faire :
Bonne chance ! Autre exemple : un plugin pour Google Maps : JMappingLa page officiel de ce plugin : https://github.com/vigetlabs/jmapping TESTEZ LES EXEMPLES SUR LE SITE, ILS MARCHENT, VIEW SOURCE etc... Ce plugin a des dépendences vers quelques autres plugins :
Pour pouvoir utiliser JMapping, il faut donc inclure tous les fichiers javascript de ces plugins : <script type = "text/javascript" src = "http://maps.google.com/maps/api/js?v=3.3&sensor=false" > < /script> <script type="text/javascript" src="markermanager.js "></script> <script type="text/javascript" src="StyledMarker.js "></script> <script type="text/javascript "src="http: //ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type = "text/javascript" src = "jquery.metadata.js"> </script> <script type="text/javascript" src="jquery.jmapping.js"></script> Le code HTML <div id="map" style="width: 600px; height: 460px; float: left;"></div> <div id="map-side-bar"> <div class="map-location" data-jmapping="{id: 1, point: {lng: -122.2678847, lat: 37.8574888}, category: 'market'}"> <a href="#" class="map-link">Berkeley Bowl</a> <div class="info-box"> <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p> </div> </div> <div class="map-location" data-jmapping="{id: 2, point: {lng: -122.4391131, lat: 37.7729943}, category: 'restaurant'}"> <a href="#" class="map-link">Nopalito</a> <div class="info-box"> <p>The best authentic Mexican restaurant in San Francisco.</p> </div> </div> <div class="map-location" data-jmapping="{id: 3, point: {lng: -122.4481651, lat: 37.8042096}, category: 'museum'}"> <a href="#" class="map-link">Exploratorium</a> <div class="info-box"> <p>A hands-on museum of science, art, and human perception in San Francisco.</p> </div> </div> </div> JavaScript pour afficher la carte, on utilise les microdatas de HTML5 dans les balises, ce sont des attributs speciaux du standard html5 pour la géolocalisation, les plus curieux peuvent aller voir la page des ressources HTML5 que Michel Buffa a compilées pour un autre cours : ressources HTML5, la partie métadonnées/sémantique... $(document).ready(function() { $('#map').jMapping({ metadata_options: { type: 'html5' } }); }); Travail à faire :
AJAX + JQuery UILes thèmes de jQuery UI : http://jqueryui.com/themeroller/ Nous allons créer une page qui doit contenir : un search box, une table avec les résultats de recherche, une table avec les résultats sélectionnés
PS: pour les icones : http://www.petefreitag.com/cheatsheets/jqueryui-icons/
Mots clés:
|
Powered by MindTouch Deki Open Source Edition v.8.08 |