Télécharger et inclure jQuery
jQuery est une librairie JavaScript, c’est-à-dire un ensemble de code prêts à l’emploi. Pour pouvoir utiliser ces codes, il va falloir les inclure d’une façon ou d’une autre dans nos pages.
La première manière de faire cela va être d’aller sur le site officiel de jQuery et de télécharger la dernière version jQuery disponible en date.
Sur la page de téléchargement, deux types de fichiers vont vous être proposés : des fichiers compressés et des fichiers non compressés.
La copie de jQuery compressée ne contient aucun espace entre les codes. Le but est de réduire le poids total de la librairie afin d’améliorer les performances de votre site. C’est la version que nous placerons généralement sur notre site « live » (en production).
Cependant, pour travailler, je vous conseille plutôt la version non compressée, qui est une version lisible de la librairie (avec notamment des commentaires, une bonne indentation, etc.).
Cela vous permettra d’étudier plus facilement, si vous le souhaitez, les scripts composant la librairie jQuery.
Note : A l’heure de ce tutoriel, la dernière version jQuery qui m’est proposée est la version 3.4.1. C’est donc la version que j’utiliserai. Il est possible que la version que vous téléchargerez soit plus récente. Pas d’inquiétude cependant : cela ne rend pas ce cours obsolète.
En effet, chaque nouvelle version de jQuery n’amène généralement que des correctifs mineurs qui n’impactent pas le cœur de jQuery. De plus, les librairies comme jQuery mettent toujours en place une compatibilité ascendante, ce qui signifie qu’un code plus ancien fonctionnera toujours avec une version plus récente de la librairie. Dans tous les cas, en cas de grande nouveauté, ce cours sera mis à jour.
Une fois le fichier téléchargé, je vous conseille de le placer dans le même dossier que les fichiers qui vont utiliser cette librairie pour une plus grande simplicité.
Il va ensuite falloir créer un lien entre notre fichier jQuery et les fichiers qui vont l’utiliser. On va pour cela utiliser un élément script avec son attribut src.
Créons immédiatement un fichier HTML et incluons notre fichier jQuery dans celui-ci (le nom de votre fichier jQuery peut être différent du mien si vous avez téléchargé une version différente ou si vous avez renommé le fichier).
Inclure jQuery via un CDN
Une autre façon d’utiliser jQuery est de l’inclure depuis un CDN plutôt que de télécharger et d’héberger les fichiers jQuery nous-mêmes.
Un CDN (Content Delivery Network ou réseau de distribution de contenu) correspond à un ensemble de serveurs reliés et formant donc un réseau et dont le but est de fournir un accès à du contenu très rapidement.
Il existe aujourd’hui de nombreux CDN qui hébergent des fichiers jQuery dont notamment ceux de Google ou Microsoft. jQuery lui-même possède également son CDN via StackPath.
Utiliser un CDN plutôt que de télécharger et d’héberger soi-même ses fichiers possèdent deux avantages notables : ne pas avoir à stocker les fichiers bien sûr mais également optimiser les performances de votre site.
En effet, lorsqu’un visiteur cherche à accéder à une page de notre site, son navigateur va télécharger les ressources nécessaires à l’affichage de la page. Plus une page va avoir besoin de ressources pour fonctionner, plus son affichage va être lent.
Dans le cas où on inclut jQuery via un CDN, les fichiers jQuery proviennent d’une URL commune (qui est celle du CDN) qui est potentiellement utilisée par de nombreux autres sites.
Si un visiteur a visité par le passé un autre site utilisant le même CDN pour inclure le même fichier, il est alors probable que le fichier soit toujours en cache dans son navigateur et qu’il n’ait donc pas à le télécharger à nouveau, ce qui va faire que notre page va s’afficher plus vite.
Pour cette raison, la plupart des sites ont tendance à privilégier le recours aux CDN lors de l’inclusion de ressources externes. Je vous propose donc d’utiliser ici le CDN proposé par jQuery.
Il vous suffit de cliquer sur la ressource souhaitée et d’inclure le code fourni dans vos pages HTML comme ceci :
