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

jQuery : introduction au célèbre Framework JavaScript

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

Présentation du Framework

Genèse du projet

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 populaire 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 mais aussi par les progrès du JavaScript natif.
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.

Récupération de la bibliothèque

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).

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 compressée ou décompressée.
Il suffit d'insérer dans la partie HEAD un script qui se présente comme suit :

<script src ="chemin relatif vers la bibliothèque">charger jquery</script>

Exemple de scripts jQuery

Exemple 1

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).

Le code CSS & HTML

Il faut télécharger le framework. Ici on suppose que le fichier unique correspondant au framework se nomme "jquery.js" et se trouve dans le même dossier que la page web qui l'appelle.

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".

Le script en JS natif

Le code serait assez lourd. var collection = document.querySelectorAll('img'); for (var i in collection) { collection[i].className +=" cadre"; }

Il faut parcourir la collection d'image donc il faut une boucle.

Notez bien la syntaxe de l'instruction unique de la boucle : collection[i+].className +=" cadre"
Pour ajouter une nouvelle classe (sans supprimer celle qui existe déja) il faut employer "+=" (et non pas =) et " cadre" (avec un espace entre " et cadre).
En effet en JS natif il n'y a qu'une méthode pour remplacer OU rajouter une classe : className !
Si on écrivait collection[i+].className ="cadre" on remplacerait "image" par "cadre" !

Le script en jQuery

Il est beaucoup plus succinct.

$("img").addClass("cadre");

Une seule instruction !

C'est le gros avantage de jQuery par rapport à JS natif : la syntaxe de Jquery est très compacte.
On peut manipuler directement une collection d'éléments, ce qui est impossible en JS natif.

Exemple 2

Ce deuxième exemple de script jQuery a pour objet de vous familiariser avec la syntaxe très concise de ce Framework.

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 : ... <button onclick ="fstyle()">Mettez en forme cette page si vous le désirez !</button> <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. <br>Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3</h3> <p>Corps de texte associé au titre de niveau 3. <br>Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3 </h3> <p>Corps de texte associé au titre de niveau 3. <br>Blabla blabla Blabla blabla Blabla ... <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. <br>Blabla blabla Blabla blabla Blabla ... <h2>Les listes</h2> <ul>Une liste à puces : <li>item 1 de la liste</li><li>item 2 de la liste</li><li>item 3 de la liste</li> </ul> <ol>Une liste numérotée : <li>item 1 de la liste</li><li>item 2 de la liste </li><li>item 3 de la liste </li> </ol> <hr> <h2>Un tableau</h2> <table> <tr> <th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th> </tr> <tr> <td >contenu cellule</td><td>contenu cellule</td><td>contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td >contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td>contenu cellule</td> </tr> </table> <h2>Les images</h2> <img src ="../images/tortue.jpg" > <img src ="../images/toucan.jpg" > <hr> <h2>Les liens hypertextes </h2> <a href = 'https://darchevillepatrick.info' target ='_blank'>Mon site sur la programmation web </a> <a href = "https://darchevillepatrick.info/bio/bio_index.php" target ='_blank' >Mon tuto de biologie aquatique</a> ...

Remarquez que la première instruction HTML est un bouton de commande qui appelle une fonction JS (utilisation d'un attribut évenementiel).
Rien n'interdit, en effet, dans une page web de combiner du JS natif et du JS-jQuery.
Pour le reste du code : rien de compliqué ; des titres, du corps de texte, des listes, un tableau, des images, des liens.

Le script jQuery

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 JS est activé et si je clique sur le bouton de commande.

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 ("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 les appels de méthodes. La syntaxe devient :
$(sélecteur).méthode().méthode().methode() ... ;

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 !

Testez le code

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()
Il faut aussi supprimer dans le script la dernière instruction : celle relative au masquage du bouton de commande. $("body").load() { // le reste est inchangé sauf la dernière ligne de code ... $("button").css("display", "none"); }

Testez le code avec application du script qui fait fonction de feuille de style

Importer jQuery à partir du site google.com

Il y a une autre façon de charger 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.

Le code dans la partie HEAD de la page

Deux instructons sont nécessaires. ... <script src ="https://www.google.com/jsapi">Importer jquery à partir de google</script> <script>google.load("jquery","1"); </script> ... </head> ...

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. En effet load() est une méthode de jQuery pour AJAX.
Il y a tout un chapitre sur AJAX dans ce tuto sur 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.

Le code de l'exemple (extraits)

Le code HTML et JS-jquery de cette page est intéressant. Vous allez voir comment remplir des éléments HTML via un script. ... <script src ="https://www.google.com/jsapi">Importer jquery à partir de google</script> <script>google.load("jquery","1"); </script> <style> img {width : 10%; display : inline-block;} </style> </head> <body onload ="ffrancais()" > <h2></h2> <p></p> <p></p> <img src ="../images/anglais.jpg" onclick ="fanglais()" /> <img src ="../images/francais.jpg" onclick ="ffrancais()" /> <script> function ffrancais() { var texte_francais = "Mon patron est riche et sa femme est très jolie." ; $("h2").html("Titre"); $("p:first").html(texte_francais) ; $("p:last").html( "Je suis pauvre et ma femme est moche." ); } function fanglais() { var texte_anglais = "My boss is rich and his wife is very pretty." ; $("h2").html("Title") ; $("p:first").html(texte_anglais); $("p:last").html("I am poor and my wife is ugly."); } </script> ...

Dans le code HTML il y a des éléments vides (un titre H2 et deux paragraphes).
Deux images miniatures et cliquables.
Ces éléments vides seront remplis via le script et grâce à la méthode html() de jQuery tantôt avec un texte en français et tantôt avec un texte en anglais.

Les deux fonctions sont écrites en jQuery mais l'appel de ces fonctions et réalisé via le HTML (attribut évenementiel).

Une partie de la syntaxe vous échappe. En particulier certains sélecteurs. Lisez les chapitres suivants !

L'instruction : $(document).ready(function()

Dans de nombreux sites et ouvrages traitant de jQuery il vous est indiqué que le script jQuery doit démarrer ainsi : <script> $(document).ready(function() { // le code Jquery est ici }) ; </script>

Or dans les scripts jQuery que je vous ai montré, 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 mes script jQuery ne sont 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 !