Traduction
Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js
Recherche dans ce tuto
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 connaitre HTML, CSS et avoir de bonnes notions en JS natif.
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 compatibles 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 est menacé par les réels progrès de CSS3 et du Javascript natif.
jQuery est aussi concurrencé par de nouveaux frameworks JS tels React & Vue.js.
Mais il faut tenir compte de l'existant ; plus de la moitié des sites utilisent encore cette librairie.
Donc un développeur web "front-end" se doit de connaitre cet outil.
Par ailleurs l'emploi de jQuery reste très pertinant dans de nombreux registres : drag & drop, sélection d'éléments du DOM,
requête AJAX, etc.
Ce framework c'est un fait un simple fichier (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 un fichier nommé jquery-3.7.1.min.js (version qui
date de 2023).
Tranférez ce fichier dans le dossier contenant vos scripts Javascript et vous pouvez lui donner un nom plus simple : jquery.js
, par exemple.
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 une page web comprend un script avec des instructions écrites en JS-jQuery il faut rajouter une instruction dans la partie HEAD de la page :
<script src ="jquery.js">charger jquery</script>
Il faut bien sûr que ce fichier soit dans le même dossier que la page web.
Dans le paragraphe qui suit je vous présente deux documents HTML contenant un script écrit en jQuery.
Imaginons que nous voulons rajouter une classe "cadre" à toutes les images de la page qui bénéficient déja de la classe "image" (et doivent la conserver).
Il faut charger le framework. Ici on suppose que le fichier correspondant au framework a été renommé "jquery.js" et se trouve dans le même dossier que la page web.
Chaque image a déjà la classe "image" ; classe qui définit une taille, le positionnement des images, etc.
Il faut via un script rajouter la classe "cadre" mais sans supprimer la classe "image".
Il est beaucoup plus succinct et se résume en une instruction unique !
$("img").addClass("cadre");
Une seule instruction !
Ce n'est pas par hasard si le slogan de JQuery est : "Write less, do more". Ce qui signifie : Ecrire moins, faire plus.
$('img') désigne la collection de toutes les images de la page.
Une instruction jQuery a la structure suivante : sélecteur.méthode().méthode() ...
On peut en effet chainer plusieurs méthodes.
L'objet $ est omniprésent ; tout sélecteur d'éléments de la page doit être préfixé par $ afin de préciser qu'il s'agit d'une
instruction jQuery. En effet rien n'interdit dans un script de mélanger des instructions en JS-jQuery et des instructions en
JS natif.
En JS natif le script aurait été un peu plus long :
var collection = document.querySelectorAll('img');
for (var i in collection)
{
collection[i].className +=" cadre";
}
Ce deuxième exemple de page web avec script en jQuery a pour objet de vous familiariser avec la syntaxe très concise de ce Framework.
Rappel : dans la partie HEAD il y a bien sûr chargement de la bibliothèque jQuery !
Par contre dans cette partie HEAD, 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.
function fstyle()
{
$("*").css("fontFamily","arial");
$("*").css("color","navy");
$("body").css("margin","20px auto");
$(":header").css("textAlign","center");
$("p").css("padding", "10px");
$("ul,ol").css("fontStyle", "italic");
$("table").css("width","500px").css("margin","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");
$("button").css("display", "none");
}
Si vous connaissez les sélecteurs CSS vous n'avez aucune difficulté à comprendre ce code.
Il existe cependant un sélecteur spécifique à jQuery : :header
qui référence toutes les balises "titre" de la page (h1 à h6); c'est très pratique !
Ce script c'est en fait une feuille de style écrite en jQuery (et non pas en CSS).
Mais alors que le CSS s'applique automatiquement, cette mise en forme ne s'appliquera que si je clique sur le bouton de commmande.
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 "camelCase" : 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 chainer plusieurs fois la méthode css() après le sélecteur. La syntaxe devient :
$(sélecteur).css().css().css() ... ;
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 "block" (display : block) et leur affecter des marges externes.
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 !
Cliquez sur le bouton de commande pour mettre en forme le texte !
Pour une exécution automatique de la fonction de mise en forme il suffit de supprimer la balise button
et d'écrire dans le script à la place de function fstyle() :
$("body").load() ou encore $(window).load() ou encore $(document).load()
$("body").load()
{
// le reste est inchangé sauf la dernière ligne de code (suppresion du bouton de commande)
}
Dans ce nouvel exemple je vous propose une autre solution pour disposer de la version la plus récente de jQuery :
télécharger à partir d'un CDN
Un CDN (Content Delivery Network) est un site qui héberge des bibliothèques et autres outils de développement.
Importer jQuery à partir d'un CDN suppose bien sûr que vous ayez une connexion internet.
Il faut deux instructions SCRIPT : connexion au CDN puis chargement du framework.
Dans le code HTML il y a trois éléments vides (un titre H2 et deux paragraphes) et deux images miniatures et cliquables.
Ces éléments vides de contenu seront remplis grâce au script.
document.body.onload = ffrancais;
document.querySelector('img').onclick = fanglais;
document.querySelectorAll('img')[1].onclick = ffrancais;
function ffrancais()
{
var texte_francais =
"Mon patron est riche, son épouse est très jolie, sa voiture est superbe
et il possède une magnifique maison avec piscine." ;
$("h2").html("Titre");
$("p:first").html(texte_francais) ;
$("p:last").html( "Je suis pauvre, ma femme est moche et
j'ai une vieille voiture et un appartement minable." );
}
function fanglais()
{
var texte_anglais =
"My boss is rich, his wife is very pretty, his car is superb
and he has a magnificent house with a swimming pool." ;
$("h2").html("Title") ;
$("p:first").html(texte_anglais);
$("p:last").html("I'm poor, my wife is ugly and
I have an old car and a lousy apartment.");
}
...
Les deux fonctions sont écrites en JS-jQuery mais sont appelées en JS natif (gestionnaire d'événements de JS). Donc on peut mélanger dans un script du JS natif et du JS-jQuery.
Dans de nombreux sites et ouvrages traitant de jQuery il vous est indiqué que le script jQuery doit démarrer ainsi :
$(document).ready(function() {
// le code Jquery est ici
}) ;
Or dans mes scripts je n'utilise jamais $(document).ready(function() {...}); et ceux-ci fonctionnent quand même ...
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 éléments 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 mes scripts ne sont jamais dans la partie HEAD mais toujours en fin de page 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).
Dans ce cas l'instruction "$(document).ready(function()" est inutile.
'Boite à couleurs' et calculette
Vous pouvez faire de cette page un favori.
Vous disposerez alors d'un composeur graphique de codes RGBA et d'une calculette sur votre PC.
Un composeur de couleurs vous permet de "sortir des couleurs de base".