LP
IMApp

Scripts
Clients

Leçon 10

Leçon 10 : Introduction à JQuery

Contenu :

Cette leçon présente JQuery et compare cette librairie avec les fonctions équivalente du DOM. Cette introduction est illustrée par quelques exercices choisis mais doit être complétée par une étude et une pratique plus approfondie de cette librairie

Objectifs :

Comprendre la structure et les principes fondamentaux de JQuery. Utiliser JQuery pour dynamiser des pages HTML de structure simple

Utiliser JQuery

JQuery est une librairie JavaScript très populaire qui simplifie notablement (la plupart du temps) l'écriture du code JavaScript et qui permet de réaliser des codes complexes en seulement quelques appels de fonctions. JQuery est une écrit en JavaScript et doit être inclus dans une page HTML comme n'importe quel code JavaScript. Pour celà, deux possibilités s'offrent à vous, et vous pouvez, au choix : 

<head>
  ...		
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

Syntaxe JQuery

JQuery est une librairie JavaScript et la syntaxe est donc la même que celle de JavaScript. Néanmoins, le style du code JQuery est assez particulier et nécessite une adaptation. On peut résumer ce style avec l'expression générale suivante : 

$(selecteur).action(parametres);
Dans cette expression, selecteur est un sélecteur CSS, un nom de tag HTML ou bien un élément du DOM, action est une fonction (appelée aussi méthode) et parametres une suite de zéro, un ou plusieurs paramètres. JQuery utilise de façon intensive la notation pointée propre aux objets et un style de programmation fonctionnelle. La fonction $ est une fonction particulière en JQuery qui sert à sélectionner des éléments ou bien à jqueryfier un élément existant (i.e. le rendre compatible avec les fonctions et méthodes JQuery).

Les sélecteurs

JQuery offre beaucoup de possibilités pour accéder aux éléments HTML. On donne ici quelques exemples parmi les plus utilisés mais il conviendra de se reporter à la documentation pour une liste exhaustive des sélecteurs :

La fonction $ permet également de sélectionner des éléments de façon contextuelle : Il existe un grand nombre de sélecteurs possibles et il faut vous référer à la documentation pour explorer toutes les possibilités.

Les évènements

Tous les évènements du DOM sont pris en charge par JQuery. La différence avec le JavaScript classique est qu'en JQuery,les évènements sont asscoiés aux éléments en JQuery (et non pas dans le HTML). Il est bien sûr possible (et même recommandé) de faire de même en JavaScript mais ce n'est pas obligatoire et beaucoup de codes HTML contiennent les évènements (et le JavaScript associé). Par exemple, on peut associer la fonction calculer à l'évènement onclick sur l'élément d'identifiant action avec le code suivant : 

$("#action").click(calculer);
La syntaxe reste identique quelquesoit le résultat de la sélection. Par exemple, le code suivant : 
$("p").click(cacher);
va associer la fonction cacher à l'évènement onclick sur tous les éléments p du document HTML. Souvent, l'action (la fonction) associée à l'évènement est très simple (juste une instruction) ou bien n'apparait qu'une seule fois. Dans ce cas, on utilise fréquemment des fonctions anonymes. Par exemple, le code suivant : 
$("p").click(function(){
    $(this).hide();
});
associe à l'évènement onclick sur tous les éléments HTML p du document, une fonction (anonyme) qui applique la fonction JQuery hide à l'élément sur lequel on a cliqué (cette fonction cache l'élément). Remarquez l'utilisation de la forme $(this) : le mot-clef this a été présenté à la leçon 9. Il permet dynamiquement d'identifier l'élément sur lequel l'évènement (qui a déclenché l'appel de la fonction utilisant le mot-clef this) a été produit. Ici, le mot-clef this conserve bien sûr son rôle mais afin de pouvoir lui appliquer la fonction hide qui est une fonction JQuery, il faut le jqueryfier en lui appliquant la fonction $ !

JQuery intègre tous les évènements du DOM et propose plusieurs fonctions pour les gérer. On donne ici quelques exemples parmi les plus utilisés mais il conviendra de se reporter à la documentation pour une liste exhaustive des évènements et des fonctions qui s'y rattachent :

Il existe une syntaxe alternative pour définir les évènements sur les éléments et leur associer des fonctions, avec la fonction on. Par exemple, le code suivant : 
$("p").click(function(){
    $(this).hide();
});
est équivalent au code suivant : 
$("p").on("click", function(){
    $(this).hide();
});

Il existe un évènement important en JQuery équivalent à l'évènement onload de JavaScript, c'est l'évènement ready. Il s'utilise avec la version jqueryfiée de l'objet document : 

$(document).ready(function(){

   // tout le code JQuery est placé ici

});
Cette forme est (presque) l'équivalent de la version JavaScript : 
window.onload = function(){

   // tout le code JavaScript est placé ici

});

Manipulation du DOM

JQuery permet de manipuler le DOM avec des fonctions diverses et variées, qui, dans bien des situations, simplifient notablement le code. Nous donnons ici un aperçu des (très nombreuses) fonctions disponibles et il faudra vous référer à la documentation pour une liste exhaustive.

La fonction text

Cette fonction permet de lire ou de modifier le contenu textuel d'un élément. Par exemple, le code suivant : 

$("#resultat").text( $("#resultat").text() + " !!!!" );
modifie le contenu textuel de l'élément d'identifiant resultat en lui ajoutant la chaîne de caractères " !!!!".

La fonction html

Identique à la fonction text, cette fonction permet en plus de lire ou de modifier le contenu d'un élément avec du code HTML sous la forme d'une chaîne de caractères. Par exemple, en supposant que liste est l'identifiant d'un élément ul, le code suivant : 

$("#liste").html( $("#liste").html() + "<li>Nouvel élément</li>" );
ajoute un nouvel élément à la liste.

La fonction val

Identique aux deux fonctions précédentes, elle permet de lire ou de modifier la valeur de l'attribut value d'un élément input.

La fonction attr

Cette fonction permet de lire ou de modifier la valeur de n'importe quel attribut d'un élément donné. Par exemple, le code suivant : 

$("#lien").attr( "href", "http://www.polytech.unice.fr/~gaetano/imapp/" );
permet de modifier la valeur de l'attribut href du lien d'identifiant lien.

La fonction css

Cette fonction permet de lire ou de modifier la valeur de n'importe quelle propriété CSS d'un élément donné. Par exemple, le code suivant : 

$("p").css( "color", $("#couleur").css( "color" ) );
définit la couleur du texte de tous les éléments p comme la couleur de l'élément d'identifiant couleur.

Fonctions d'accès

En plus de la fonction $ et de ses nombreux paramètres, JQuery offre plusieurs fonctions pour accéder aux éléments HTML en utilisant les propriétés structurelles du DOM. Nous donnons ici un aperçu des fonctions disponibles et il faudra vous référer à la documentation pour plus de précisions.

La fonction parent

Cette fonction retourne l'élément parent (le contenant) de l'élément sur lequel on l'applique. Par exemple, le code suivant : 

$("span").parent().css( "color", "red" );
définit la couleur du texte de tous les éléments contenant (au moins) un élément span à red.

La fonction children

Cette fonction retourne tous les sous-éléments directs (les enfants) d'un élément donné. Par exemple, le code suivant : 

$("#main").children();
retourne tous les sous-éléments directs de l'élément d'identifiant main. Il est possible d'invoquer cette fonction avec un paramètre pour filtrer les sous-éléments désirés. Par exemple, le code suivant : 
$("#main").children( "div" );
retourne tous les éléments div, sous-éléments directs de l'élément d'identifiant main.

La fonction find

Cette fonction est identique à la fonction children mais retourne tous les sous-éléments, quelquesoit leur niveau (et pas seulement les sous-éléments directs). On appelle ces sous-éléments les descendants.

Ajout/Suppression d'éléments

Exploitant toutes les possibilités offertes par le DOM, JQuery possède plusieurs fonctions pour ajouter ou supprimer des éléments. Nous donnons ici un aperçu et il faudra vous référer à la documentation pour la liste complète de ces fonctions.

La fonction append

Cette fonction permet d'ajouter de nouveaux sous-éléments HTML directs (des enfants) à la suite des sous-éléments existants. Cette fonction est très permissive et admet un nombre variable d'arguments qui peuvent être de nature très différente :

Par exemple, le code suivant : 
$("#liste").append( "<li>Nouvel élément</li>" );
ajoute un nouvel élément à l'élément ul d'identifiant liste.

La fonction prepend

Cette fonction est identique à la précédente, mais ajoute devant les sous-éléments existants.

La fonction remove

Cette fonction permet de supprimer l'élément sur lequel on l'applique. La fonction supprime l'élément et bien sûr son contenu. Par exemple, le code suivant : 

$("span.note").remove();
supprime du document HTML tous les éléments span dont l'attribut class vaut note. Il est possible de passer un paramètre à la fonction remove pour filtrer les éléments à supprimer. Par exemple le code suivant : 
$("p").remove( ".test, .demo" );
supprime du document HTML tous les éléments p qui ont la classe test et la classe demo.

La fonction empty

Cette fonction permet de supprimer le contenu de l'élément sur lequel on l'applique. La fonction supprime donc le contenu de l'élément mais pas l'élément lui-même. Comme pour la fonction précédente, il est possible de passer un paramètre à la fonction empty pour filtrer les éléments à supprimer.

L'itérateur each

La fonction $ de JQuery retourne éventuellement plusieurs éléments sur lesquels on peut vouloir effectuer un traitement particulier. Cette situation est semblable à celle produite par des fonctions comme querySelectorAll en JavaScript. JQuery permet de s'abstraire de la structure de données utilisée pour stocker ces éléments en utilisant la fonction each. Cette fonction est appelée un itérateur car elle permet de parcourir un ensemble d'éléments et de leur appliquer un traitement particulier. Par exemple, le code suivant : 

$("#liste li").each(function(){
	alert( $(this).text() );
});
va afficher dans des alertes successives le contenu textuel des éléments li contenus dans l'élément d'identifiant liste (supposemment un élément ul ou ol). Il est possible de passer deux paramètres à la fonction passée en paramètre à la fonction each, l'indice de l'élément et sa valeur. Par exemple, le code suivant : 
$("#liste li").each(function(i,v){
	alert( i + ". " + $(v).text() );
});
va afficher dans des alertes successives le contenu textuel des éléments li contenus dans l'élément d'identifiant liste (supposemment un élément ul ou ol) précédé de l'indice de l'élément li en question (le premier élément li ayant l'indice 0).

Exercice 1

Complétez le fichier exo1JQ.js de façon que la page HTML exo1.html propose à l'utilisateur une feuille de calcul de moyenne par trimestre, pour trois trimestre. Une fois la moyenne calculée, elle apparait dans l'élément adéquat. Si une des notes saisies est incorrecte, une alerte le signale. Dans cet exercice, comme dans les exercices suivants, il est interdit de modifier le fichier HTML exo1.html, ce qui implique qu'il faut ajouter les évènements aux éléments HTML adéquats dans le JQuery !

Fonctions JQuery utiles : click, css, each, find, html, parent, val

Fichier(s)

exo1.html , exo1JQ.js

Exercice 2

Complétez le fichier exo2JQ.js de façon que la page HTML exo2.html propose à l'utilisateur une feuille de calcul de moyenne par trimestre, pour trois trimestre, plus le calcul de la moyenne générale. Une fois la moyenne calculée, elle apparait dans l'élément adéquat. Si une des notes saisies est incorrecte, une alerte le signale. Dans cet exercice, comme dans le précédent et comme dans les suivants, il est interdit de modifier le fichier HTML exo2.html, ce qui implique qu'il faut ajouter les évènements aux éléments HTML adéquats dans le JQuery !

Fonctions JQuery utiles : children, click, css, each, find, html, last, parent, val

Fichier(s)

exo2.html , exo2JQ.js

Exercice 3

Complétez le fichier exo3JQ.js de façon que la page HTML exo3.html propose à l'utilisateur une page pour gérer une liste de participants à un évènement. Il est possible d'ajouter un nouveau particpant en renseignant les éléments de formulaire (nom, prénom, sexe) et en cliquant sur le bouton ajouter : les nom et prénom du nouveau participant normalisés (en minuscules sauf la première lettre) précédés de la civilité (M. ou Mme.) apparaissent sur une nouvelle ligne comme nouvel élément de la liste des participants.

Fonctions JQuery utiles : append, attr, click, html, prop, val

Fichier(s)

exo3.html , exo3JQ.js

Exercice 4

Complétez le fichier exo4JQ.js de façon que la page HTML exo4.html se comporte comme la page précédente mais maintenant, il est possible de supprimer un participant en cliquant simplement sur la ligne correspondante. Avant la suppression, une confirmaton est demandée à l'utilisateur (à l'aide de la fonction confirm). Ajouter ensuite une dernière fonctionnalité : lors de l'ajout d'une nouvelle personne, la liste des participants est maintenue triée par ordre alphabétique. Vous utiliserez la méthode JQuery sort qui peut s'appliquer à un tableau d'éléments HTML, en passant en paramètre la fonction de comparaison adéquate. Ici, cette fonction doit prendre en paramètres des éléments li et doit comparer (lexicographiquement) leur contenu (des chaînes de caractères) simplement avec les opérateurs <, > et =.

Fonctions JQuery utiles : append, attr, children, click, html, prop, sort, val

Fichier(s)

exo4.html , exo4JQ.js

Exercice 5

Complétez le fichier exo5JQ.js de façon que la page HTML exo5.html, juste après son chargement, génère automatiquement la table des matières correspondante au document HTML. Remarquez que la structure du document HTML est uniforme : un élément section correspond à une entrée dans la table des matières. Il contient toujours un élément h* (h1, h2 ou h3) comme premier fils, puis un élément p (du contenu) éventuellement suivi de sous-sections (et récursivement). La table des matières elle-même est définie dans l'élément nav d'identifiant tdm déjà présent dans le document (mais vide).

Fonctions JQuery utiles : addClass, append, children, each, html, prop

Fichier(s)

exo5.css , exo5.html , exo5JQ.js

Exercice 6

Complétez le fichier exo6JQ.js de façon que la page HTML exo6.html se comporte comme la page précédente, mais maintenant, les entrées de la table des matières sont des liens qui amènent vers les sections correspondantes. En conséquence, votre code va devoir maintenant modifier le code HTLM (hors table des matières) et ajouter les ancres adéquates autour du contenu des éléments h* (h1, h2 ou h3).

Fonctions JQuery utiles : addClass, append, children, each, html, prop

Fichier(s)

exo6.html , exo6JQ.js

Exercice 7

Complétez le fichier exo7JQ.js de façon que la page HTML index.html du dossier exo7 embarque un diaporama avec fondu-enchaïné. Vous devez programmer vous-même cet effet en utilisant la fonction JQuery fadeOut, et bien sûr la fonction JavaScript setInterval. Pour réaliser ce diaporama, on utilise le principe suivant :
  • les images sont contenues dans un élément div particulier
  • les images sont toutes exactement superposées grâce au code CSS (fourni)
  • on passe d'une image à l'autre successivement en changeant la valeur de l'attribut z-index
  • on fait disparaître une image avec la fonction fadeOut
Le principe détaillé sera expliqué en cours et sera illustré par une démo.

Fonctions JQuery utiles : css, fadeOut, next, removeClass, show

Fichier(s)

exo7.zip