jQuery : introduction au framework JavaScript
Présentation de jQuery
Pourquoi jQuery
La librairie (ou bibliothèque) jQuery a été inventée par John Resig en 2006.
Constatant que le code Javascript pouvait devenir très complexe pour fonctionner avec les différents navigateurs il imagine de créer une bibliothèque
de fonctions prêtes à l'emploi et compatibles avec tous les navigateurs.
En effet si désormais le JavaScript est standardisé ce n'était guère le cas en 2006 ; en particulier Internet Explorer avait ses propres méthodes.
A ce jour jQuery reste à ce jour toujours très utile malgré la standardisation du JS et la montée en puissance du CSS avec sa version 3.
Récupération de la bibliothèque
La fameuse bibliothèque jQuery c'est un fait un simple fichier Javascript (extension .js) de 100 ou 300 KO.
Comment récupérer ce fichier ?
Il suffit d'aller sur le site officiel (jquery.com) et de cliquer sur le gros bouton légendé "Download jQuery".
Vous pouvez télécharger soit la version compressée (moins de 100 KO) soit la version décompressée (avec des commentaires et des sauts de ligne) qui est
trois fois plus lourde.
Si, par exemple, vous téléchargez la version compressée vous récupérez, en ce début d'année 2017, un fichier nommé jquery-3.2.1.min.js (version qui
date de mars 2017).
Tranférez ce fichier dans le dossier contenant vos scripts Javascript et vous pouvez lui donner un nom plus simple; par exemple : jquery.js.
Extrait du fichier jQuery compressé :
C'est illisible pour un humain.
Extrait du fichier jQuery avec commentaires et sauts de ligne :
C'est compréhensible pour un surdoué en JavaScript (lol).
Programmation en JS-jQuery
Si dans une page vous voulez programmer en JS-jQuery plutôt qu'en JS traditionnel vous devez charger la fameuse bibliothèque dans la page web c'est à dire
la version compréssée ou décompressée.
Il suffit d'insérer dans la partie HEAD un script qui se présente comme suit :
Le texte entre les balises ouvrante et fermante est facultatif et fait fonction de commentaire ; n'est pas affiché par le navigateur.
Exemple
Imaginons que dans une page on veuille changer le contenu de trois noeuds (texte de ces noeuds doit être tantôt en Français et tantôt en Anglais).
Le code HTML (extraits)
Dans la partie HEAD chargement de la librairie jQuery via la balise SCRIPT. Ici on suppose que la bibliothèque jQuery a été renommée "jquery.js" et se trouve dans le même dossier que la page web.
Appel d'une fonction sur chargement de la page : body onload ="ffrancais()"
La page contient trois noeuds vides et deux images miniatures : une appelant la fonction de traduction en anglais et l'autre appelant la fonction de traduction en français.
Le code des deux fonctions
function ffrancais()
{
var texte_francais = "Mon patron est riche et sa femme est très jolie." ;
document.querySelector("h2").textContent = "Titre";
document.querySelector("p").textContent = texte_francais ;
document.querySelectorAll("p")[1].textContent = "Je suis pauvre et ma femme est moche." ;
}
function fanglais()
{
var texte_anglais = "My boss is rich and his wife is very pretty." ;
jQuery("h2").html("Title") ;
$("p:first").html(texte_anglais);
$("p:last").html("I am poor and my wife is ugly.");
}
La fonction ffrancais est écrite en JavaScript traditionnel.
La fonction fanglais est écrite en Javascript-jQuery !
Vous pouvez constater que le code est plus concis dans la deuxième fonction.
Examinons de plus près les instructions jQuery !
A chaque fois il suffit simplement d'appeler la fonction jQuery (ou son alias : $).
J'utiliserai pas la suite toujours $ plutôt que JQuery !
Attention si vous préférez utiliser jQuery respectez la casse : Q en majuscule !
La syntaxe d'un instruction jQuery est très simple.
Prenons deux exemples :
$("h2").html("title");
$("p:last").html("I am poor and my wife is ugly.");
Donc la fonction $ est argumentée avec un sélecteur qui référence un noeud (voire plusieurs).
Si vous connaissez les sélecteurs CSS vous n'aurez aucune difficulté à appréhender les sélecteurs jQuery.
Sachez que les sélecteurs jQuery sont encore plus sophistiqués que ceux de CSS.
Donc dans le premier exemple il s'agit d'un sélecteur de balise ; $("h2") sélectionne toutes les balises H2 de la page.
Dans le deuxième exemple $("p:last") sélectionne la derniere balise P de la page.
Donc avec jQuery la sélection des noeuds du DOM est beaucoup plus simple qu'en JS traditionnel.
Ensuite il y a une méthode jQuery (ici c'est la méthode html) qui modifie le contenu du noeud sélectionné.
Le paramètre de cette méthode doit être le nom d'une variable JS ou une chaîne (donc entre quotes).
Importer jQuery à partir du site google.com
Il y a une autre façon d'intégrer le framework jQuery dans vos pages.
Il suffit de télécharger la librairie à partir du site google.com. Ainsi vous avez toujours accès à la dernière version de jQuery.
Reprenons l'exemple précédent. Le code de la page devient :
- Deux étapes sont nécessaires pour charger jQuery à partir du site google.com.
- charger l'API Google
- Charger jQuery dans l'API google via la méthode load()
Sans le savoir vous exécutez une requête AJAX (load() est une méthode de jQuery pour AJAX).
Il y a un chapitre sur AJAX dans le tuto sur jQuery.
Ici les deux fonctions ont été écrites avec jQuery.
Testez l'exemple avec téléchargement de la bibliothèque à partir de google.com
Evidemment cette solution ne fonctionne que si vous avez une connection internet ou à défaut si vous n'avez pas encore vidé la "mémoire cache. En effet la librairie jQuery est stockée dans la mémoire cache du navigateur.
Exemple 2
Je vais vous montrer dans cet exemple qu'il est très facile de créer une feuille de style en jQuery.
Attention mon but est ici de vous familiariser avec la syntaxe jQuery et non pas de vous dire qu'il faut maintenant écrire la
feuille de style en jQuery à la place du CSS ...
Ce qui serait absurde ! N'oubliez jamais que l'exécution d'un script peut être bloquée par le navigateur ...
Le code HTML de la page
Dans la partie HEAD il y a bien sûr chargement de la bibliothèque jQuery !
Par contre il n'y a ni lien vers une fichier CSS ni de feuille de style interne !
- Donc le navigateur va appliquer la mise en forme par défaut prévue par HTML :
- ainsi la page aura la largeur de l'écran, le texte sera en noir, TNR, 10pt.
- les blocs seront aligné à gauche, le texte dans les blocs sera aligné à gauche.
- les images seront affichées avec leur taille native
- les liens seront côté à côté (A : balise inline)
- etc.
Pour parler simple ce sera très moche !
Le code de la partie BODY :
Remarquez que la première instruction HTML est un bouton de commande qui appelle une fonction JS (utilisation du gestionnaire d'évènements de HTML).
Pour le reste du code : rien de compliqué ; des titres, du corps de texte, des listes, un tableau, des images, des liens.
Le script écrit en jQuery :
function fstyle()
{
$("*").css("fontFamily","arial");
$("*").css("color","navy");
$("body").css("width","900px");
$("body").css("border","2px solid navy");
$("body").css("margin","20px auto 20px auto");
$(":header").css("textAlign","center");
$("p").css("padding", "10px");
$("ul,ol").css("fontStyle", "italic");
$("table").css("width","500px").css("margin","20px auto 20px auto");
$("td").css("border","1px solid black").css("paddingLeft","10px");
$("tr").css("height","50px").css("verticalAlign","middle");
$("tr:even").css("background","lime");
$("tr:odd").css("background","yellow");
$("a,img").css("width", "300px");
$("a,img").css("display", "block").css("margin","10px auto 10px auto");
$("button").css("display", "none");
}
Si vous connaissez les sélecteurs CSS vous n'avez aucune difficulté à comprendre ce code.
:header sélecteur qui référence toutes les balises "titre" de la page (h1 à h6); c'est très pratique !
Dans toutes les instructions on applique des mises en forme aux éléments sélectionnés. Donc la méthode est css.
A chaque fois il faut paramétrer cette méthode avec la propriété de mise en forme suivie de la valeur.
Il faut écrire la propriété de mise en forme avec la syntaxe javaScript : pas de tiret ; la lettre qui suit le tiret supprimé est mise en majuscule (exemple : verticalAlign et non pas vertical-align).
Pour limiter les lignes de code on peut chaîner les mises en formes qui s'appliquent au même sélecteur c'est à dire indiquer plusieurs fois la méthode css après le sélecteur.
Dans ce script je vous rappelle que les balises A et IMG sont des balises nativement inline. Donc pour centrer horizontalement des éléments inline il faut les transformer en boîtes (display : block) et leur affecter une largeur.
Notez aussi que dès que vous avez cliqué sur le bouton de commande ce dernier disparaît grâce à la dernière instruction du script: $("button").css("display", "none"). Ainsi la commande ne peut s'appliquer qu'une fois !
Observez très attentivement la mise en forme avant de cliquer sur le bouton de commande.
Variante
Pour une exécution automatique de la fonction de mise en forme il suffit de supprimer dans le code HTML la balise button et d'écrire
dans le script à la place de function fstyle() :
$("body").load() ou encore $(window).load() ou encore $(document).load()
Dans ce cas il faut aussi supprimer la dernière instruction : celle relative au masquage du bouton de commande.
this, window, document sont des mots réservés en jQuery
Testez le code avec application automatique de la feuille de style
Exercice : êtes vous en mesure de créer un script jQuery ?
Le code CSS & HTML de la page
Par défaut les images sexy sont masquées puisqu'elle sont contenues dans des balises figure qui sont masquées !
Travail à faire
Vous devez concevoir le script (en jQuery).
- Deux fonctions :
- Une fonction qui démasque les balises figure donc de facto les images incluses
- Une fonction qui masque de nouveau les balise figure
Ce thème a déjà été traité dans une autre page en JavaScript traditionnel. Dans chaque fonction il y avait une boucle pour traiter successivement chaque image.
Avec jQuery c'est inutile puisque le sélecteur peut référencer plusieurs éléments (même balisage, même classe). Ainsi $("figure") désigne
toutes les balises figure de la page.
Le rendu que vous devez obtenir
Pour ceux qui n'ont pas trouvé
Le script est d'une simplificité déconcertante !
Le script (sans le balisage SCRIPT) :
function fafficher() {$("figure").css("display", "block");}
function fmasquer() {$("figure").css("display", "none");}
Reconnaissez que c'est simple. Commencez vous à apprécier la puissance de jQuery ?
jQuery : la puissance de l'outil
Je vais tenter maintenant de vous convaincre d'employer cet outil , vous montrer que dans de nombreux cas il simplifie énormément la programmation JavaScript.
Je vais vous parler du mot magique this comme en JS traditionnel.
Dans les chapitres suivants j'aurai l'occasion de revenir sur les méthodes évoquées.
Exemple 1
Une page comprend N images miniatures et pratiquement transparentes.
Dès qu'une image est survolée sa taille doit être triplée et elle doit devenir parfaitement opaque ; la source de l'élément IMG change ... pour
une photo plus décente (lol).
Ci-dessous rappel du code utilisé dans le cadre d'une programmation JS traditionnelle
Le code HTML est lourd du fait du recours au gestionnaire d'évènements.
Par contre le script est léger.
Notez le passage de paramètre dans chaque fonction. La variable image désigne l'image courante.
La solution avec JS-jQuery
Le code CSS & HTLM :
Le HTML est d'une simplificité déroutante ; plus besoin d'utiliser les attributs événementiels ; la gestion des évènements sera assurée par le script.
Le script :
$("img").mouseover(function()
{
$(this).css("width", "30%").css("opacity",1);
$(this).attr("src",'../images/burkini.jpg').attr("title","vieux vicieux");
});
$("img").mouseout(function() {$(this).css("width", "10%").css("opacity",0.2)});
Admirez la concision du script alors qu'il est aussi chargé de gérer les évènements.
On combine le sélecteur $("img") et le sélecteur $(this) dans la même instruction.
Traduisons en Français la première fonction (deux instructions) : si survol d'une image par la
souris celle-ci se voit modifier deux propriétés CSS : width et opacity
ET l'image courante se voit modifier deux valeurs d'attributs : src & title.
La deuxième fonction anonyme ne comprend qu'une instruction : en fin de survol retour au formatage initial ; mais la source ne change plus.
J'aurai l'occasion de revenir sur certaines méthodes jQuery.
Notez cependant que pour modifier des valeurs de propriétés CSS il faut utiliser la méthode css("propriété","nouvelle valeur") et
que pour modifier des valeurs d'attributs il faut utiliser la méthode attr("attribut","nouvelle valeur").
Tout cela est donc très logique, très intuitif.
Boucle avec jQuery
Imaginons que nous voulions successivement examiner chaque image de la page pour afficher sa source et son éventuel texte alternatif.
En JavaScript traditionnel il faut réaliser une boucle. Le code donne ceci :
var images = document.querySelectorAll('img') ;
var vnombre = images.length ; // nombre d'éléments du tableau images
for(i = 0 ; i<= vnombre ; i++)
{
alert(images[i].src);
alert(images[i].alt);
}
En jQuery nous avons la structure each ! Nous allons la présenter via un exemple.
Le code de l'exemple
Il y a quatre images.
Toutes les images ont l'attribut src mais l'attribut alt n'existe que pour les deux premières images.
Quand vous cliquez sur le bouton de commande la boite de dialogue alert est affichée quatre fois.
Pour un attribut non utilisé la réponse est "undefined".
On a donc bien réalisé une boucle !
Notez bien la syntaxe :
$("sélecteur").each(function() {instruction1 ; instruction2; ... }); .
Le sélecteur utilisé doit bien sûr désigner une collection d'éléments (ici l'ensemble des balises img).
$(document).ready(function()
Dans de nombreux sites et ouvrages traitant de jQuery il vous est indiqué que le script jQuery doit démarrer ainsi :
Hors dans mes scripts je n'utilise jamais $(document).ready(function() {...}); et pourtant ça marche ...
Cette instruction veut dire que le jQuery doit être exécuté seulement lorsque la page est chargée (et donc le DOM constitué).
Ce qui tout à fait logique. En effet si vous tentez via jQuery de manipuler des noeuds du DOM alors que ce dernier n'a pas été créé
il y aura forcément "plantage" !
Cette instruction est indispensable si le script jQuery se situe dans la partie HEAD de la page.
Or mon script jQuery n'est jamais dans la partie HEAD mais toujours dans la partie BODY et juste avant </body> donc après
tout le code HTML.
Donc il est exécuté seulement après que la page ait été chargée (et le DOM construit).
Donc l'instruction $(document).ready(function() est alors totalement inutile !
Menus déroulants
Dans un exemple précédent j'ai utilisé la propriété de style display pour masquer/démasquer des éléments.
Mais il y a plus simple en jQuery !
En effet il a les méthodes hide() & show().
Nous allons utiliser ces deux méthodes pour réaliser des menus horizontaux déroulants.
Si vous avez lu dans mon site le tuto "HTML & CSS pour débutants" ou le tuto "CSS3" vous savez qu'il est possible de réaliser des menus
déroulants sans recourir au JavaScript mais uniquement en HTML & CSS.
Mais vous avez pu remarquer que c'est de la "bidouille". Il faut utiliser plusieurs astuces en jouant sur plusieurs propriétés de style. Bref c'est pas très simple. Dans ce chapitre je vous propose une solution plus cartésienne en utilisant jQuery.
Menu déroulant - première version
Le code CSS & HTML
Chaque menu correspond à un DIV qui contient une balise P et une liste à puces (UL).
Les liste(balise UL) sont par défaut masquées.
Les boites DIV se positionnent côte à côte (display : inline-block)
Chaque lien est contenu dans un item de liste.
Dans le cadre d'un site adaptatif la largeur de chaque DIV et des marges exprimée en %.
Le script
$("p").mouseover(function() {$(this).next("ul").show();});
$("p").mouseout(function() {$(this).next("ul").hide();});
Oui, vous ne rêvez pas. Il n'y a que deux instructions mais deux instructions d'une puissance exceptionnelle !
$("p").mouseover(function() {$(this).next("ul").show();}); : si survol avec la souris d'une balise P la liste à puces (UL) qui suit la balise P courante (sélecteur : $(this).next("ul")) est affichée (méthode : show()).
Nous avons utilisé la méthode next() argumentée avec le sélecteur "ul" pour sélectionner la liste à puces qui suit le paragraphe pointé.
Essayez de programmer la même chose en JS traditionnel ... Je vous souhaite beaucoup de courages et de tasses de café et de nuits blanches ...
Essayez les menus déroulants en Jquery !
Le problème c'est que le menu s'affiche puis disparaît de façon instantanée.
Il serait préférable qu'il y ait une transition : affichage et disparition lente ou bien un effet "fondu" (menu de plus en plus opaque
puis de plus en plus transparent).
Si vous avez visité le tuto "CSS 3" vous savez qu'il est possible désormais en CSS d'effectuer des transitions.
En fait c'est CSS3 qui s'est inspiré de Jquery car le Jquery a été inventé entre autres pour permettre la programmer facilement ces effets.
Menus déroulants avec transitions
Nous voulons que le menu se déroule lentement et disparaîsse tout aussi lentement.
Le code CSS & HTML ne change pas !
Le script
$("p").mouseover(function() {$(this).next("ul").slideDown(1000);});
$("p").mouseout(function() {$(this).next("ul").slideUp(1000);});
slideDown(1000) : l'objet sélectionné s'affiche lentement (en 1000 millisecondes ou un seconde).
slideUp(1000) : l'objet sélectionné disparaît lentement (en 1000 millisecondes ou 1 seconde).
Essayez les menus déroulants avec transitions !
Menus déroulants avec effet "fondu"
Nous voulons maintenant un effet "fondu" c'est à dire que l'objet est de plus en plus opaque puis de plus en plus transparent jusqu'à disparaître (opacité = 0).
Toujours pas de changement dans le HTML & CSS !
Il faut alors écrire le script de la façon suivante :
$("p").mouseover(function() {$(this).next("ul").fadeIn(1000);});
$("p").mouseout(function() {$(this).next("ul").fadeOut(1000);});
Testez les menus déroulants avec effet "fondu" !
Simplification de la syntaxe
Lorsque vous devez modifier plusieurs propriétés de style ou plusieurs attributs il peut devenir fastidieux d'indiquer à chaque fois la méthode css ou la méthode attr.
Thème
Si une image est survolée elle est agrandie et devient plus opaque (deux propriétés de style modifiées)
Si double clic sur une image elle est remplacée par celle d'une baigneuse en burkini et un message moralisateur apparaît si survol de cette nouvelle image.
Le code (extraits) :
Testez cet exemple moralisateur !
Dans les première et deuxième instructions la méthode css n'est pas répétée deux fois ; elle est mise en facteur commun.
On utilise la même syntaxe mais avec la méthode attr cette fois dans la troisième instruction.
N'oubliez pas les accolades !
Cette syntaxe doit vous faire penser à quelque chose ...
En fait on a utilisé la fameuse notation JSON que j'ai déjà utilisé pour définir les variables indicées (voir tuto de JavaScript traditionnel).
En définitive la syntaxe est :
css/attr({"propriété/attribut":"valeur","propriété/attribut":"valeur", "propriété/attribut":"valeur", ...})
Notez que la commande width est exprimée en %.
Le "slideshow" (diaporama)
Reprenons le thème du SLIDESHOW traité en JS traditionnel.
Vous allez voir que jQuery permet de simplifier non seulement le script mais aussi le code HTML.
Le code CSS & HTML :
Plus besoin d'utiliser le gestionnaire d'évènements de HTML. Donc les "onclick ... " ont disparu de chaque balise img.
C'est le script qui gère les évènements.
Le script :
$("img").click(function()
{
var source = $(this).attr("src");
source ="url(" + source +")" ;
$("div").css("backgroundImage", source);
var texte = $(this).attr("alt");
$("h4").text(texte);
}
);
- Si clic sur une vignette (petite image) :
- la boîte DIV a pour background la source de la vignette
- La balise H4 a pour texte le texte alternatif de la vignette