• 10 heures
  • Facile

Mis à jour le 21/04/2020

jQuery : l'histoire d'un framework !

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

Pour bien nous situer dans cet univers de développement web, il est bon de contextualiser un peu la chose. C'est également le choix que nous souhaitons faire pour ce tutoriel. Avant de chercher à aborder jQuery, commençons déjà par poser les bases de la philosophie du framework dans votre tête. Pas de code ici, juste de l'histoire et des réponses aux questions basiques qui vous trottent dans la tête.

Vous saurez notamment à la fin de ce chapitre ce qu'est jQuery, qui l'utilise, à quoi sert-il... bref ! Une mise à niveau générale pour ceux qui souhaitent apprendre cette technologie, restée trop longtemps hors de portée des Zéros.

Tâchons de répondre dans ce premier chapitre à toutes ces questions. Vous êtes prêts ? C'est maintenant que cela commence ! :pirate:

Mais... c'est quoi jQuery ?

Pour bien commencer à introduire jQuery, commençons donc par le définir, ce sera déjà une bonne chose de faite, vous ne pensez pas ? ;)

jQuery, un framework JavaScript

Vous le savez certainement, vos pages web sont composées de beaucoup de technologies différentes.

Comme si ce n'était pas assez compliqué comme cela, ces satanés informaticiens ont eu en plus la bonne idée de nous compliquer encore plus la tâche, en faisant en sorte que ces technologies puissent interagir entre elles. Parmi ces technologies qui font le web, on retrouve les standards HTML(5) et CSS(3) mais aussi des langages plus "évolués" qui permettent de dynamiser les pages web. L'un d'eux, le plus connu et le plus utilisé, est JavaScript.

Image utilisateur

Un logo de JavaScript

JavaScript ou... jQuery ?

De JavaScript à jQuery

JavaScript est un excellent langage, qui a su au fil des années s'imposer comme une technologie vraiment incontournable dans le web. Le nombre de sites qui utilisent désormais JavaScript est tout simplement gigantesque. La cause ? L'avènement du web 2.0, un web communautaire où les Webmasters cherchent à faire interagir toujours plus l'utilisateur avec le site. JavaScript est un langage tout indiqué pour répondre à ce besoin, expliquant ainsi en partie son succès. Un beau paysage pour JavaScript... seulement voilà, comme on dit : on n'arrête pas le progrès.

Alors très rapidement, ses utilisateurs ont voulu faire évoluer JavaScript, le rendre toujours meilleur. On a voulu que le langage puisse faire toujours plus de choses, toujours plus proprement et toujours plus simplement. C'est dans cet esprit que la communauté de JavaScript a développé des frameworks pour le langage, des "cadres de travail". L'un d'eux est le plus utilisé de tous, celui que l'on retrouve un peu partout sur le web. Et c'est aussi celui que l'on va étudier tout au long de ce cours : jQuery !

jQuery, un framework JavaScript
Image utilisateur

Ci-contre, vous pouvez voir l'un des logos de jQuery où est indiquée sa devise : "jQuery. Write Less, Do More". Cette devise, on peut la traduire tout bêtement par : "jQuery. Ecrivez moins, faites plus". Cela résume vraiment ce que jQuery va vous permettre de faire. En l'utilisant dans votre code JavaScript : vous écrirez moins de code, et vous serez plus productif.

Cela paraît flou, et nous vous comprenons. Vous avez encore du mal à vous représenter ce qu'est jQuery objectivement. Dans notre éternelle bonté, nous allons vous donner une vision plus physique de la chose : jQuery n'est en fait qu'un seul et unique fichier JavaScript, téléchargeable sur le web et qui porte l'extension .js !

Image utilisateur

Et oui ! Ce petit fichier, c'est bien jQuery !

Euh... et c'est ce petit truc de rien du tout qui nécessite un cours entier ? Elle me paraît pas franchement crédible toute cette histoire...

Et pourtant ! :D

jQuery n'est pas n'importe quel fichier JavaScript. C'est une énorme bibliothèque de fonctions JavaScript qui ont été écrites et regroupées en un seul et unique fichier pour plus de simplicité.

Vous êtes intrigué par le contenu de ce fichier... et vous avez du mal à croire qu'il peut à lui seul être l'objet d'autant d'engouement. C'est normal. Cliquez plutôt sur ce lien pour voir le code de jQuery dans sa version 1.7. Plutôt impressionnant non ? Cela prend tout de suite une autre ampleur. :lol:

Ce qu'il faut vous dire, c'est que jQuery est vraiment une grosse boîte à outils, et pas "un petit fichier de rien du tout". Le nombre de fonctions qui sont contenues dans ce simple fichier est vraiment grand. Et ces outils n'ont qu'un seul but : vous permettre d'écrire moins de code JavaScript, pour être toujours plus productif et efficace dans vos développements !

jQuery, un framework ou une librairie ?

Pour cette petite question de vocabulaire, nous allons vous apporter un élément de réponse. Vous avez très certainement au cours de vos visites sur le web entendu parler du mot librairie.

Le cas le plus simple : une librairie

Une librairie, en programmation, est une bibliothèque de fonctions.
Elles sont composées généralement par d'autres personnes qui les ont mises à disposition de tous, pour gagner du temps dans le développement. Elles sont souvent constituées d'un ou de plusieurs fichiers qui contiennent les fonctions. Tout ce que le programmeur a à faire, c'est d'inclure la librairie dans son code. Il peut ainsi commencer à utiliser les fonctions qui s'y trouvent pour avancer dans son code.

Mais alors, jQuery c'est exactement ça non ? Pourquoi est-ce que vous parlez de frameworks depuis tout à l'heure ?

Il existe en fait une petite différence toute simple entre framework et librairie, et cette différence, nous nous proposons de vous l'expliquer dès maintenant pour mieux comprendre l'impact que jQuery va avoir sur votre manière de coder.

Un cas plus complexe : un framework

Un framework, c'est quelque chose de déjà plus complexe qu'une librairie. Les frameworks sont généralement beaucoup plus massifs que les librairies, et pour cause : ils proposent plus de choses.
En fait, lorsque l'on code avec une librairie, ce sont les fonctions qui la compose qui vont s'intégrer à notre code. Avec un framework, ce n'est pas du tout pareil.

Le framework pose les bases d'une application, et il va nous "forcer" à programmer selon les codes qu'il nous impose. Ainsi, on peut dire que c'est notre manière de coder qui s'intègre à la vision du framework. Pour jQuery, c'est exactement ça.

jQuery est plus qu'une simple librairie même s'il en a les traits majeurs, il va vraiment vous faire coder en JavaScript d'une nouvelle manière. Et ceci à tel point qu'il est tout à fait possible de considérer jQuery comme un langage un peu à part, puisqu'il s'agit vraiment d'une redécouverte totale de JavaScript. Lorsque vous commencerez à travailler vraiment avec jQuery, vous comprendrez réellement tout le sens de cette phrase.

Vous voulez un peu savoir ce que ce framework a dans le ventre ? Très bien ! Voyons maintenant à quoi peut (et va !) nous servir jQuery concrètement dans notre site web.

A quoi va nous servir jQuery ?

jQuery est un framework qui va nous simplifier la vie d'une manière générale, et cela va passer par plusieurs fronts.

Nous allons lister quelques petites choses qui feront que demain, cet outil que vous allez apprendre à utiliser vous sera totalement indispensable pour presque tous vos développements en JavaScript.

Les points forts de jQuery

Si vous êtes un habitué du JavaScript, vous savez que chaque navigateur web dispose d'un moteur JavaScript qui lui est propre. Ce moteur, c'est lui qui va "parser" votre code JavaScript, et faire agir le navigateur en fonction de celui-ci.

jQuery et la compatibilité
Image utilisateur

Concrètement, la compatibilité inter-navigateurs signifie qu'un code JavaScript qui fonctionne sur un navigateur web doit fonctionner sur un autre. Et bien devinez quoi ? jQuery uniformise le tout ! Au final, un code JavaScript respectant les normes imposées par jQuery sera compatible sur tous les navigateurs web.

Un gain de temps et d'énergie plus qu’appréciable, vous permettant de vous focaliser vraiment sur le cœur de votre code, plutôt que sur des questions de compatibilité entre navigateurs.

jQuery et l'AJAX
Image utilisateur

Dans le même registre de compatibilité, l'AJAX avec jQuery a été grandement simplifié. AJAX est rendu possible grâce à un objet de JavaScript appelé XmlHttpRequest (XHR)... seulement, instancier un objet XmlHttpRequest peut vite devenir un véritable calvaire, car d'un navigateur à l'autre, cela ne se fait pas du tout de la même manière. Grâce à jQuery, instancier un objet XHR est très simple.
Une seule fonction instancie l'objet, et elle couvre tous les navigateurs, en plus de vous fournir des outils pour gérer au mieux votre requête ! AJAX devient donc étonnamment facile et rapide à utiliser.

jQuery et les animations
Image utilisateur

L'un des éléments incontournables de jQuery et qui a fait son succès est incontestablement la possibilité de créer des effets sur sa page. Envie de faire disparaître un bloc avec un effet de fondu, ou bien faire trembler un bouton submit sur votre page web ? Pas de problème ! jQuery le fait pour vous.

Vous verrez que la masse de fonctions que jQuery vous proposera afin de créer des effets sur vos pages web sera tout simplement impressionnante. Vous verrez aussi que la densité de la documentation en témoignera.

jQuery et les formulaires
Image utilisateur

Un des points forts de jQuery est qu'il va vous permettre d'effectuer un pré-traitement de vos formulaires HTML côté client, de manière très avancée. Nous pourrons ainsi relever quels type de formulaires ont mal été remplis et afficher ceci au visiteur.

Ainsi, ne comptez pas QUE sur jQuery pour valider vos données. Vous devrez également prévoir une validation côté serveur, avec un langage tel que PHP.

Et tout cela, c'est sans parler de toute la panoplie d'outils disponible pour manipuler pleinement le DOM que jQuery vous offre. Pas de doutes, jQuery est le choix pour lequel vous devez opter aujourd'hui pour donner une nouvelle dimension à vos futurs sites.

Nous ne pouvons que vous encourager à vous accrocher et à apprendre cette technologie. Avec ce tuto entre les mains, ce travail d'apprentissage n'en sera que plus facile. :-°

L'histoire du framework

Image utilisateur

Le framework jQuery est à la base l'œuvre d'un seul homme, un programmeur JavaScript hors-pair qui a su, en 2006, initier le projet.

Son nom est John Resig. Depuis 2006, John Resig est resté le chef de projet de jQuery. C'est ainsi lui qui supervise encore aujourd'hui le développement de jQuery.

Il travaillait pour le compte de la Mozilla Corporation en tant que développeur JavaScript.

Malgré le travail colossal que Resig a su faire sur le framework jQuery, vous imaginez bien que cet homme n'a pas pu à lui seul créer un tel outil. Les autres développeurs de jQuery, ce sont les membres de sa communauté.

En effet ! John Resig a publié le framework sous licence MIT et GNU GPL : deux licences libres. Cela signifie concrètement que tout le monde peut travailler sur le framework et participer à son amélioration. Vous verrez notamment plus tard qu'il existe des plug-ins jQuery que vous pourrez créer vous-même, afin de toujours plus compléter le framework... mais nous n'en sommes encore pas là. ^^

A ce jour, jQuery en est à sa version 1.7.2, et a déjà subi beaucoup de mises à jour. La communauté est en effet très active, et les mises à jour se font toujours régulièrement.

Des sites qui utilisent jQuery

jQuery est le framework JavaScript le plus utilisé sur le web, et ce, pour les qualités que nous vous avons présentées plus haut.

Voici quelques grands noms du web qui utilisent aujourd'hui jQuery de manière plus ou moins abondante, cela devrait vous aider à faire définitivement votre choix. :)

  • Site du Zéro

  • Google et ses différents services

  • Mozilla

  • Amazon

  • ...

Sachez également que les CMS les plus répandus sur le web comme Drupal et Wordpress utilisent jQuery !

Cette introduction à jQuery et à son histoire est maintenant achevée. Nous espèrons que cela vous aura plus, et que vous cernez maintenant un peu mieux ce qu'est jQuery.

Nous allons maintenant nous intéresser aux outils dont on va avoir besoin pour coder correctement et efficacement avec jQuery.

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