Utilisez 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>

Ouvrez jsbin et collez ce texte dans la zone html à droite. Sauvegardez votre projet (bouton save de jsBin).

Maintenant nous devons écrire en javascript (dans la colonne de gauche) le code jQuery pour effectuer les actions correspondants au titre des boutons !

Vous devez coder les fonctions suivantes :

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 :

Modifier à la volée la css de cette classe d'éléments (voir le cours interactif : http://ejohn.org/apps/workshop/intro/#11 et la page suivante pour la modification de style via css),
Ne pas modifier forcément le style mais rajouter des balises <i>, <b>, etc. autours du texte trouvé par le selecteur. Pour cela on pourra utiliser la fonction wrap(<balise></balise>);. Par exemple : essayer d'écrire une fonction qui lorsqu'elle est invoquée fait : $("#contenu").wrap(<h1></h1>); Voilà, vous avez compris le principe.

Remarque : laquelle des deux méthodes est la plus élégante ?

Pour d'autres opérations, vous devrez utiliser d'autres fonctions applicables sur les objets trouvés par les sélecteurs :

hide() pour cacher,
show() pour montre,
remove() pour supprimer définitivement,
empty() pour "vider" le contenu,
html() pour récupérer le contenu html,
text() pour récupérer le contenu texte,
html("du html ici") pour remplacer le contenu html,
clone() pour cloner le contenu trouvé,
appendTo("p" ou autre) pour ajouter à un élément du dom,
wrap("<h1></h1>") pour encadrer par des h1,
wrapAll("<h1></h1>") pour encadrer tous les objets trouvés en les regroupant entre des h1,
css("border","3px solid red") pour changer le style, etc
Etc

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.

Utilisation d'extensions de vos navigateurs pour debugger tester...

Je vous conseille fortement d'utiliser l'extension firebug pour firefox 3.6 (attention, ça merdouille sévère dans firefox 4 pour le moment !), c'est une excellent outil de debug.

Ou encore le debugger de chrome (qu'on appelle avec ctrl-shift i), 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 3.6 et firebug, vous pouvez faire de même en utilisant la scriplet jQueryfy : http://www.learningjquery.com/2009/0...fy-bookmarklet

Exercice :

Allez sur la 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 Ajax

Voici 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) :

<form name="loginForm" id="loginForm" 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>

Et voici un code jQuery qui va invoquer une Servlet de vérificatiion de login :

$( 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(reponse){ // callback, appelé lorsque la réponse arrive
				if(reponse==true) // si la connexion est ok
				{
					$("div#messageLogin").html("<span id=\"confirmMsg\">Vous &ecirc;tes maintenant connect&eacute;.</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
				{
					$("div#messageLogin").html("<img src=\"bomb.png\" style=\"float:left;\" />&nbsp;Erreur lors de la connexion, veuillez v&eacute;rifier votre login et votre mot de passe.");
				}
		   }
		});
		return false; // permet de rester sur la même page à la soumission du formulaire
	});
});

Travail à faire :

tester/arranger ce code pour ajouter à votre dernier TP java EE la vérification de login/password en ajax.
Essayer de réduire au maximum le code de l'appel ajax en jQuery en particulier en étudiant les exemples de ce tutorial : http://viralpatel.net/blogs/2009/04/...velopment.html

Récupéré depuis "http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Option_web_2.0_Master_1_informatique_2011/TP_jQuery"