Traduction
Tutoriel JavaScript & jQuery - sommaire
Tutoriel JavaScript & jQuery - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts dans les pages web.
La première version est lancée en janvier 2006 par John Resig.
Attention, programmer en jQuery c'est toujours programmer en JavaScript mais en utilisant entre autres des fonctions de haut niveau (qui évitent
beaucoup de lignes de code). Donc pour aborder ce tuto vous devez avoir quelques notions de JavaScript ...
Constatant que le code Javascript pouvait devenir très complexe pour fonctionner avec les différents navigateurs,
John Resig imagine de créer une bibliothèque
de fonctions prêtes à l'emploi et compatible avec tous les navigateurs.
En effet, si désormais le JavaScript est standardisé, ce n'était guère le cas en 2006 ... Il dépendait des navigateurs.
A ce jour jQuery reste à ce jour toujours très utile malgré la standardisation du JavaScript et la montée en puissance du CSS avec sa version 3.
jQuery est aussi concurrencé par de nouvelles bibliothèques telles que React et Vue.js ...
Maintenant jQuery reste très utile dans certaines circonstances. Je prendrai un seul exemple : faire un "glisser-déposer" via jQuery est un jeu d'enfant alors
que si c'est possible avec les dernières versions de JavaScript, ça reste beaucoup plus lourd.
La fameuse librairie jQuery c'est un fait un simple fichier Javascript (extension .js) de 100 ou 300 KO.
Pour 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 2021, un fichier nommé jquery-3.6.1.min.js (version qui
date de mars 2021).
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 de la version décompressée :
C'est compréhensible pour un surdoué en JavaScript (lol).
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 compressée ou décompressée.
Il suffit d'insérer dans la partie HEAD un script qui se présente comme suit :
Imaginons que dans une page on veuille changer le contenu de trois éléments HTML (texte de ces balises doit être tantôt en Français et tantôt en Anglais).
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.
La fonction ffrancais est écrite en JavaScript traditionnel.
La fonction fanglais est écrite en Javascript-jQuery !
Vous constatez que le code est plus concis dans la deuxième fonction mais surtout que la syntaxe est plus intuitive.
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.
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 dernière balise P de la page.
Donc avec jQuery la sélection des noeuds du DOM est beaucoup plus intuitive 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).
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 :
Sans le savoir vous exécutez une requête AJAX. En effet load() est une méthode de jQuery pour AJAX.
Il y a tout un chapitre sur AJAX dans ce 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 connexion 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.
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 alors que le CSS est toujours exécuté.
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 !
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 :
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 boites (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.
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
Par défaut les images sexys sont masquées puisqu'elle sont contenues dans des balises figure qui sont masquées !
Vous devez concevoir le script (en jQuery).
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
Le script est d'une simplificité déconcertante !
Le script :
Reconnaissez que c'est simple. Commencez vous à apprécier la puissance de jQuery ?
Si vous n'êtes pas encore convaincu, lisez la suite !
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.
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).
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.
Le code CSS & HTLM :
Le HTML est d'une simplificité déroutante ; plus besoin d'utiliser les attributs événementiels du langage HTML ; la gestion des évènements sera assurée par le script.
Le script :
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.
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 :
En jQuery nous avons la structure each ! Nous allons la présenter via un 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).
Dans de nombreux sites et ouvrages traitant de jQuery il vous est indiqué que le script jQuery doit démarrer ainsi :
Or dans mes scripts je n'utilise jamais $(document).ready(function() {...}); et ceux-ci fonctionnent ...
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 mon script est exécuté seulement après que la page ait été chargée (et le DOM construit).
Donc l'instruction $(document).ready(function() est dans ce contexte inutile !
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.
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 %.
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.
Nous voulons que le menu se déroule lentement et disparaîsse tout aussi lentement.
Le code CSS & HTML ne change pas !
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 !
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 :
Testez les menus déroulants avec effet "fondu" !
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.
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 j'ai utilisé la fameuse notation JSON.
Reprenons le thème du SLIDESHOW traité en JavaScript 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 lui-même les évènements.
Le script :