Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

jQuery - introduction au célèbre framework JS

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 JavaScript, HTML & CSS.

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 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 reste à ce jour toujours très populaire malgré la standardisation du JavaScript et la montée en puissance du CSS et de HTML.
jQuery est aussi concurrencé par de nouveaux frameworks JS tels React & Vue.js mais aussi par les progrès du JavaScript natif.

Avenir de jQuery

Avec les méthodes querySelector(sélecteur CSS) & querySelectorAll(sélecteur CSS) de JS natif, jQuery a perdu de son intérêt en matière de sélection des noeuds du DOM.
Quant aux effets visuels proposés par jQuery, le CSS version 3 propose des solutions équivalentes.
Des "widgets" jQuery sont devenus obsolètes à cause des progrès réalisés par HTML ; un seul exemple, la méthode datepicker() est supplantée par le input type date proposé par la spécification HTML version 5.
Par ailleur jQuery présente un inconvénient ; il ralentit le temps d'exécution du script puisqu'on rajoute une couche logicielle.

Maintenant jQuery reste très pertinent dans certaines circonstances. Réaliser un "glisser-déposer" via jQuery est un jeu d'enfant alors qu'en JS natif c'est plus complexe ... ; même constat pour les requêtes AJAX.

Donc je vous conseille de lire dans ce tuto jQuery au moins trois chapitres :
• ce chapitre introductif afin de vous faire votre propre opinion
• le chapitre sur jQuery-UI, extension de jQuery qui présente entre autres le widget "drag & drop"
• le chapitre sur jQuery & AJAX

Installation du framework sur votre PC

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.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 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 charger le fichier correspondant à ce framework.

Exemples de scripts jQuery

Dans le paragraphe qui suit je vous présente deux pages web contenant un script écrit en 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 de la page (à l'exclusion du script)

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

Le script en jQuery

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 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"; }

Exemple 2

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.

Le code HTML

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 !

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

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

Le rendu dans un Iframe

Cliquez sur le bouton de commande pour mettre en forme le texte !

Variante

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

Télécharger le framework à partir d'un CDN

Dans cette page je vous propose une autre solution pour disposer du framework : 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 que vous ayez une connexion internet.

Le code HTML

Dans la partie HEAD téléchargement du framework jQuery à partir du CDN Google.
Il faut deux instructions "script" : connection 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 seront remplis via le script.

Le script

Tout le code JS est centralisé dans le script.

Les deux fonctions sont écrites en JS-jQuery mais sont appelées en JS natif : gestionnaire d'événements de JS. Je vous montre ainsi qu'on peut mélanger dans un script du JS natif et du JS-jQuery ;

Le rendu dans un Iframe

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