• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Avant de commencer

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Si vous vous intéressez un tant soit peu à la création de sites Web, vous avez forcément entendu parler de jQuery et vous connaissez certainement plusieurs personnes qui vantent ses mérites. Mais voilà, vous pensez que seuls les experts peuvent en tirer quelque chose, et vous avez peur de ne pas avoir le niveau nécessaire ! Je vous rassure tout de suite : jQuery est loin d'être inabordable, surtout si vous avez quelques notions (même sommaires) de HTML, CSS et JavaScript.

Mais au fait, qu'est-ce que jQuery ? Comment est-il apparu ? Comment vous le procurer ? De quel environnement matériel et logiciel avez-vous besoin pour développer en jQuery ? Autant de questions qui trouveront une réponse dans ce premier chapitre.

Historique du Web : de HTML à jQuery

Certains d'entre vous ont certainement connu le monde de la micro-informatique avant l'avènement d'Internet. À cette époque, les ordinateurs évoluaient en solo et les ouvrages papier étaient légion. Aujourd'hui, nous vivons dans un monde interconnecté, où l'information ne se trouve plus dans l'ordinateur, la tablette ou le téléphone, mais sur un vaste réseau planétaire dont la capacité de stockage a de quoi donner le vertige ! Tout ce petit monde communique en utilisant des langages informatiques spécifiques, tels que HTML, CSS, JavaScript, PHP, MySQL, etc.

Pour bien comprendre le fonctionnement de jQuery, il est important d'avoir à l'esprit la technique client-serveur, utilisée pour échanger des informations sur le Web. Le terme « client » désigne tout ordinateur, tablette, téléphone ou autre périphérique qui consomme des données. Inversement, le terme « serveur » désigne tout ordinateur qui délivre des données. Ainsi, lorsque vous tapez une adresse dans votre navigateur, vous utilisez un client Web. Ce client envoie une demande d'informations au serveur correspondant. Les informations sont recherchées sur le serveur, acheminées jusqu'au client et finalement affichées dans le navigateur, comme le montre la figure suivante.

Fonctionnement entre un serveur et des clients
Fonctionnement entre un serveur et des clients

Mais pourquoi est-ce que je vous parle de cela, me direz-vous ? Eh bien, parce qu'il est important de comprendre que le code jQuery s'exécute côté client. Dans la plupart des cas, il n'y aura aucun échange avec un serveur et donc quasiment aucun délai entre le début et la fin de l'exécution du code jQuery. Ce que je viens de dire est à prendre avec des pincettes. En effet, un code jQuery mal écrit et/ou non optimisé peut nécessiter de nombreuses secondes (voire minutes !) pour s'exécuter. Ce qu'il faut retenir de cela, c'est qu'avec jQuery vous n'êtes pas soumis à la disponibilité d'un quelconque serveur et qu'en général les temps d'exécution sont vraiment très courts.

Vous savez maintenant à quoi correspond le modèle client-serveur. Je peux donc poursuivre en parlant de HTML, JavaScript, AJAX et jQuery :

  • HTML est le langage de base du Web. Apparu en août 1991, il utilise un ensemble de balises pour décrire les données à afficher.

  • CSS est un langage consacré à la mise en forme des contenus HTML. Apparu vers le milieu des années 90, c'est aujourd'hui un complément essentiel de tout site Web qui se respecte. Il assure l'uniformité des pages et facilite leur maintenance.

  • JavaScript a été développé par Netscape en 1995. Il a vu le jour sous le nom « LiveScript » et a été utilisé pour la première fois dans Netscape 1.0. Ce n'est que lors de la sortie de Netscape 2.0 que le nom « JavaScript » est apparu. Exécuté côté client, il ajoute de l'interactivité aux pages Web.

  • AJAX est également apparu en 1995. Son utilisation est très intéressante, car elle permet de mettre à jour une partie (et une partie seulement) d'une page Web en demandant les données nécessaires à un serveur. Les échanges client/serveur sont donc limités et les pages Web sont affichées plus rapidement, pour le plus grand plaisir des internautes.

  • jQuery est une bibliothèque (c'est-à-dire un ensemble de codes prêts à l'emploi) conçue pour simplifier l'écriture de codes JavaScript et AJAX. Créée en 2006 par John Resig, cette bibliothèque est la plus célèbre et la plus utilisée à ce jour.

J'espère que je ne vous ai pas trop ennuyés avec cette énumération. Mais je pense que c'était une étape nécessaire pour comprendre comment jQuery se positionne dans le petit monde de la programmation Web. L'image suivante schématise ce qui vient d'être dit afin de bien matérialiser les choses.

Fonctionnement de jQuery
Fonctionnement de jQuery

Ce schéma suppose qu'une page Web est affichée sur l'ordinateur, la tablette ou le téléphone client (1). Le code jQuery peut mettre à jour la page sans accéder au serveur. Mais il peut également mettre à jour la page en demandant l'aide du serveur. Il se comporte alors comme du code AJAX (2 et 3).

Qu'est-ce que jQuery ?

Si vous avez lu ce qui précède, vous savez que jQuery est une bibliothèque qui permet d'agir sur le code HTML, CSS, JavaScript et AJAX. Tout ceci est parfaitement exact, mais un peu vague. Précisons les choses : jQuery permet de manipuler les éléments mis en place en HTML (textes, images, liens, vidéos, etc.) et mis en forme en CSS (position, taille, couleur, transparence, etc.) en utilisant des instructions simples qui donnent accès aux immenses possibilités de JavaScript et d'AJAX. Mais alors, pourquoi ne pas utiliser directement JavaScript et AJAX, me direz-vous ? Ceux qui se posent cette question n'ont certainement jamais tenté l'aventure. JavaScript et AJAX sont certes puissants, mais également très … susceptibles dans leur syntaxe et vraiment très verbeux. Entendez par là :

  1. Que toute erreur insignifiante dans la syntaxe provoque généralement la non-exécution de l'instruction correspondante.

  2. Qu'il est souvent nécessaire d'écrire de nombreuses lignes pour faire un simple petit traitement !

Heureusement, la devise de jQuery est « Write less, do more », ce qui signifie « Écrivez moins pour faire plus ». Cela devrait convenir à bon nombre de programmeurs. En effet, en écrivant moins de code, les erreurs seront moins fréquentes. Qui s'en plaindrait ?

Le logo de jQuery avec son slogan
Le logo de jQuery avec son slogan

S'il est vrai que la syntaxe utilisée en jQuery a de quoi laisser perplexe de prime abord, vous verrez qu'elle est logique, facile à mettre en œuvre, et qu'elle devient vite une seconde nature pour le programmeur. Et pour vous mettre un peu plus l'eau à la bouche, sachez qu'une seule instruction jQuery peut remplacer plusieurs dizaines d'instructions JavaScript !

Vous devriez normalement avoir un éditeur de code ou un logiciel FTP avec lequel vous avez l'habitude de travailler. jQuery ne change rien à tout ça, vous pouvez continuer à les utiliser. Essayez de tester vos codes avec le plus de navigateurs possibles, en tout cas les gros du marché (Firefox, Chrome, Internet Explorer, Safari, Opera). Enfin, n'hésitez pas à visiter les deux liens ci-dessous :

Ce qui rend jQuery si puissant et universel

Le langage JavaScript est né en 1995. Depuis lors, son implémentation dans les différents navigateurs du marché s'est faite d'une façon plutôt anarchique : au fil des différentes versions (tant du langage que des navigateurs), certaines fonctionnalités ont été retenues, d'autres non. C'est ainsi qu'une même instruction JavaScript peut être reconnue dans un navigateur et pas dans un autre, voire même dans une certaine version d'un navigateur et pas dans une autre. Quel casse-tête pour le programmeur !

Heureusement, jQuery vient à la rescousse : en définissant son propre jeu d'instructions, il agit comme une surcouche aux différentes versions de JavaScript, qu'elles soient existantes ou à venir. D'autre part, il tient compte des navigateurs présents sur le marché, de leurs multiples versions et de leur compatibilité avec les instructions des langages JavaScript et AJAX.

Pour qu'un traitement écrit en JavaScript s'exécute correctement sur les différentes versions de chaque navigateur, le programmeur doit mettre en place une batterie de tests et exécuter un code spécifique à chaque navigateur et à chaque version, comme schématisé dans la figure suivante.

Un code JavaScript classique doit s'adapter à chaque navigateur
Un code JavaScript classique doit s'adapter à chaque navigateur

En jQuery, ces tests sont inutiles : il suffit d'exécuter les instructions nécessaires, sans se préoccuper du navigateur utilisé, ni de la version du langage JavaScript compatible avec ce navigateur. Le cas échéant, tous ces tests sont réalisés de façon transparente par jQuery. En ce qui vous concerne, vous n'avez qu'à vous préoccuper du code.

Mais que se passe-t-il lorsqu'une nouvelle version de JavaScript voit le jour ? Eh bien, les instructions jQuery sont complétées en conséquence. Vous pouvez continuer à utiliser les instructions avec lesquelles vous avez l'habitude de travailler et/ou consulter la documentation sur les nouvelles instructions disponibles. Quelle que soit votre démarche, toutes les instructions jQuery utilisées fonctionneront dans tous les navigateurs disponibles. Cette approche est un vrai bonheur pour le programmeur, qu'il soit néophyte ou confirmé.
J'ajouterai quelques autres détails qui vont à coup sûr vous convaincre que vous avez fait le bon choix en décidant de vous mettre à l'apprentissage de jQuery :

  • La documentation officielle est très fournie et de grande qualité ;

  • La communauté qui gravite autour de jQuery est en perpétuelle expansion et elle fournit un support de qualité ;

  • De nombreux acteurs de premier plan du Web (Microsoft, Google, Amazon, Twitter, Mozilla, etc.) utilisent jQuery ;

  • Une foultitude de plugins est disponible afin d'augmenter les possibilités de base de jQuery.

Bienvenue dans le monde merveilleux de jQuery !

Installer jQuery

jQuery est une bibliothèque JavaScript. En d'autres termes, un fichier d'extension .js. Pour l'utiliser dans une page HTML, il vous suffit d'y faire référence en utilisant une balise <script>, comme ceci :

<script src="jquery.js"></script>

Dans cet exemple, l'attribut src vaut jquery.js. Comme vous pouvez le voir, l'emplacement du fichier n'est pas précisé dans l'attribut. Cela signifie qu'il devra se trouver dans le même dossier que le document HTML.

Mais le fichier jquery.js n'est pas sur mon ordinateur. Est-ce que ce code va quand même fonctionner ?

Eh bien non ! Si vous utilisez l'instruction précédente, la bibliothèque jQuery ne sera pas utilisable. Deux solutions s'offrent à vous :

  1. Si votre ordinateur n'est pas toujours relié à Internet et/ou si votre connexion Internet n'est pas rapide, vous pouvez télécharger la bibliothèque jQuery dans un dossier quelconque et y faire référence localement.

  2. Si votre ordinateur est toujours connecté à Internet, vous pouvez faire référence à la bibliothèque jQuery en indiquant une adresse Web.

Examinons ces deux solutions.

Téléchargement de jQuery sur votre ordinateur

Rendez-vous sur le site de jQuery et téléchargez la dernière version en date en cliquant sur le lien jquery.js, dans le cadre Recent Stable Versions, comme à la figure suivante..

Téléchargement de jQuery sur le site officiel
Téléchargement de jQuery sur le site officiel

Si vous utilisez Internet Explorer, la boîte de dialogue Afficher les téléchargements indique que l'éditeur du fichier jquery.js n'a pas pu être vérifié, comme à l'image suivante.

Internet Explorer envoie une alerte lors du téléchargement
Internet Explorer envoie une alerte lors du téléchargement

N'ayez crainte, le fichier jquery.js est sans danger s'il est téléchargé depuis le site officiel.

Sur le site officiel, deux versions de la bibliothèque jQuery sont proposées : jquery.js et jquery.min.js. Pourquoi a-t-on choisi la première version ? La deuxième est-elle moins complète ?

Ces deux fichiers sont strictement identiques d'un point de vue fonctionnel. Par contre, le deuxième a une taille inférieure au premier. Pour cela, les espaces, tabulations, et commentaires y ont été supprimés, et les noms des variables et des fonctions ont été raccourcis, comme le montre la figure suivante.

À gauche le code avec espaces, tabulations et commentaires, à droite sans
À gauche le code avec espaces, tabulations et commentaires, à droite sans

En règle générale, vous utiliserez le fichier jquery.js en développement et le fichier jquery.min.js en production, c'est-à-dire lorsque votre code aura été testé, débogué et placé sur le Web.

Rendez-vous dans le dossier de téléchargement et déplacez le fichier jquery.js dans le dossier où vous développerez vos codes jQuery. À l'image suivante par exemple, le fichier est déplacé dans le dossier data\Site du Zéro\jQuery\dev.

Le fichier est déplacé dans le dossier de développement
Le fichier est déplacé dans le dossier de développement

Faire référence à jQuery en ligne

Le plus simple consiste à faire référence au fichier jquery.js sur un CDN (pour Content Delivery Network). Constitués d'ordinateurs reliés en réseau via Internet, ces éléments d'infrastructure coopèrent pour mettre à disposition aussi vite que possible la bibliothèque jQuery. Vous pouvez utiliser les CDN jQuery, Google ou Microsoft. Voici les adresses correspondantes :

CDN

Version non minimisée

Version minimisée

jQuery

http://code.jquery.com/jquery.js

http://code.jquery.com/jquery.min.js

Google

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

http://ajax.googleapis.com/ajax/libs/j [...] jquery.min.js

Microsoft

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js

L'utilisation d'un CDN est intéressante en production, c'est-à-dire lorsque votre code jQuery a été testé et est hébergé sur un serveur Web. En effet, en faisant référence à un fichier externe à votre site, vous n'entamez pas sa bande passante. D'autre part, étant donné que les CDN ont une grande bande passante, ils sont très réactifs. Enfin, le fichier jquery.min.js issu d'un CDN est bien souvent déjà présent dans la mémoire cache du navigateur. Ces trois raisons font que votre page se chargera plus rapidement.

Par contre, en phase de développement, c'est-à-dire lorsque vous mettez au point votre code jQuery sur votre ordinateur local, je vous conseille de télécharger le fichier jquery.js et d'y faire référence localement. En effet, même si les CDN ont une excellente bande passante, l'utilisation d'un fichier local sera bien plus rapide.

  • En règle générale, le code jQuery s'exécute sur les ordinateurs clients. Cependant, il peut parfois demander à un serveur de mettre à jour une partie d'une page en utilisant du code AJAX.

  • La meilleure technique pour développer du code jQuery sur son ordinateur consiste à télécharger le fichier jquery.js, à le placer dans un dossier de son disque dur et à faire référence à ce fichier dans une balise <script>.

  • Lorsque le code a été testé et débogué, vous le placerez sur un serveur Web avec votre client FTP et vous ferez référence au fichier jquery.min.js stocké sur un CDN pour améliorer les temps de réponse sans grignoter la bande passante de votre serveur.

Exemple de certificat de réussite
Exemple de certificat de réussite