« Article précédent : Article suivant : »

Le framework JavaScript jQuery… pour les nuls

Par 23 mar, 2009

Aujourd’hui, je me lance le défi d’expliquer ce qu’est jQuery à nos lecteurs lambda mais également de le présenter à notre lectorat de geeks férus de développement.

Disclaimer : merci de rectifier toute information erronée ci-dessous par une petite notification en commentaire icon wink Le framework JavaScript jQuery... pour les nuls grey Le framework JavaScript jQuery... pour les nuls

Pour commencer par le définir exactement, jQuery (avec un j minuscule) est un cadre de développement (ou framework) qui permet de faire gagner du temps aux programmeurs car il constitue une sorte de guide le développement en javascript. Son but est de simplifier le travail des développeurs d’application web et des webmasters.

De JavaScript… à jQuery

Pour expliquer jQuery aux plus néophytes d’entre vous, je vais tout d’abord vous raconter une petite histoire !

La naissance de JavaScript

Il était une fois Brendan Eich, un ingénieur qui vivait dans le royaume de Mosaic Communications Corporation (plus tard connue sous le nom de Netscape Communications Corporation, ou Netscape tout court). Il mit au point, pour le compte de son roi, un langage de scripts qui porta le nom de LiveScript… avant d’être rebaptisé JavaScript, suite à un accord du royaume de Netscape avec celui de Sun Microsystems. Ce dernier royaume, à l’origine du langage Java, commençait à promouvoir son langage de programmation dont tout le monde entend encore parler aujourd’hui).

Son langage était prometteur. Si bien que peu de temps après, son langage fut intégré au navigateur phare de l’époque « Netscape Navigator 2″ et son succès auprès des internautes fut immédiat.

The browser wars

Il y a très très longtemps, dans une galaxie très très lointaine…

A cette époque, le royaume Microsoft livrait bataille contre celui de Netscape car il souhaitait que son navigateur web « Internet Explorer » (ou IE pour les intimes) soit le seul et unique navigateur de toutes les contrées d’orient et d’occident. Son roi eut alors une idée : concurrencer le tout nouveau langage JavaScript par un autre, très proche, nommé « JScript » qui ne serait évidemment pas compatible avec Netscape Navigator mais uniquement avec son produit phare : « IE 3″

Une spécification unique pour les gouverner tous…

grey Le framework JavaScript jQuery... pour les nuls

L'image n'a pas trop de rapport avec l'article, mais ça me fait plaisir de la mettre icon smile Le framework JavaScript jQuery... pour les nuls

Du coup, les internautes du monde entier disposaient de JavaScript avec Netscape, et de JScript avec IE, mais chaque navigateur ne marchait pas avec le langage concurrent. Et il y avait des sites web optimisés pour Netscape Navigator et d’autres pour IE. Devant tout ce merdier, le roi de Netscape envisagea de contourner la guerre d’une façon plus intelligente que d’essayer d’imposer sa loi jusqu’à ce que Microsoft cède au détriment des honnêtes internautes… C’est alors qu’un autre royaume totalement neutre, l’ECMA International mit au point, à la demande du roi de Netscape, des spécifications auxquelles devraient se conformer tous les navigateurs de demain. Ces spécifications furent réunies sous la dénomination de ECMAScript.

Plus tard, ces mêmes spécifications furent utilisées par d’autres langages tel qu’ »ActionScript » du royaume Adobe…

La naissance de la fondation Mozilla et la déchéance de Netscape

Malheureusement, quelques temps plus tard, Netscape perdit face à Microsoft et fut contraint d’abandonner son bébé Netscape Navigator qui devint de moins en moins populaire face aux évolutions d’IE… Netscape perdait des parts de marché mais on ne dira pas que le royaume Microsoft utilisait ses plus sombres atouts issus du côté obscur de la Force pour parvenir à étouffer son concurrent. D’ailleurs, ses pratiques commerciales déloyales lui valurent un procès. Mais il était trop tard !
Et Netscape, dans ses dernières forces, fonda alors la fondation principauté Mozilla dans l’unique but sera de prendre sa revanche plus tard, et lui livra le code source de Netscape Navigator 5, qui contenait dans son coeur les prémices de sa nouvelle arme, les premières briques de ce que sera le moteur de rendu Gecko (aujourd’hui au coeur de Firefox…).

Pour le navigateur de Netscape, autrefois superstar du web, s’ensuivit une lente agonie qui durera jusqu’à l’aube de notre époque actuelle…

De nos jours, les navigateurs web modernes, respectueux des standards, que sont Mozilla Firefox, Google Chrome, Safari ou Opera (comment ça, j’en ai oublié un ?) supportent tous sans condition les spécifications ECMAScript… à une condition près : chacun a étendu les spécifications pour utiliser au mieux son propre navigateur, ce qui a amené à des différences d’implémentation suivant le navigateur…

Heureusement, des outils, partant du constat qu’il était devenu difficile de coder du javascript pour tous les navigateurs, sont apparus (sur leur blanc destrier). Leur nom : jQuery, PrototypeJS, Mootools, DoJo, etc.

Qu’est-ce qu’on en fait de jQuery ?

Si vous avez lu jusqu’ici, bravo ! Vous êtes très courageux… le commun des mortels devrait s’arrêter de lire ici car ça devient technique. Les autres, ne paniquez pas, je ne vais pas aller très loin dans le détail.

L’un des buts de jQuery (et des autres frameworks JavaScript de son espèce, comme PrototypeJS, MooTools, Dojo, Scriptaculous dont je ne parle pas ici) est de faciliter le développement de scripts JavaScript pour TOUS les navigateurs.

Une seule fonction nommée « $ » permet d’écrire indifféremment pour IE, Firefox ou tout autre navigateur car jQuery est cross-browsing (c’est-à-dire compatible avec tous les navigateurs).

L’autre but est de simplifier le développement en permettant, grâce au « chainage d’actions », d’écrire en une seule ligne ce que l’on ferait avec dix.

Comment (bien) l’utiliser ?

jQuery c’est un tout petit fichier JavaScript à inclure de cette façon :

<script type=« text/javascript » src=« http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js »></script>

Cette syntaxe-ci est celle qui est préconisée. Il est déconseillé d’héberger sur son propre espace le fichier de jQuery car, outre le coût supplémentaire que cela représente pour votre serveur, cela rallonge le temps de chargement de la page… Par convention, on utilise un hébergement (appelé CDN) optimisé pour ce genre de fichier courant pour éviter à nos internautes de re-télécharger jQuery au cas où ils l’auraient déjà dans leur cache.

Bien entendu, on utilisera le fichier jquery-1.3.2.min.js au lieu de jquery-1.3.2.js. La version « minifiée » étant une version compressée, la version standard est une version lisible qui ne devrait servir qu’en environnement de développement pour des raisons de test ou de debugging.

Sélectionner comme en CSS

Ceux qui ont déjà écrit une Cascading StyleSheet connaissent les sélecteurs. En CSS, on peut désigner une balise particulière en la nommant directement…
p
sélectionne <p>…</p>
div
sélectionne <div>…</div>

On écrit un # si l’on veut spécifier une balise particulière par son ID.
#titre
sélectionne <p id= »titre »>…</p>
#titre
sélectionne <div id= »titre »>…</div>

On écrit un « . » si l’on veut spécifier un groupe de balises correspondant à une classe particulière
.important
sélectionne <p class= »important »>…</p> et <div class= »important »>…</div>

Ou on peut combiner les 2…
p.important
sélectionne toutes les balises <p class= »important »>…</p>

Mais je suis sûr que vous saviez déjà tout ça… Transposons ceci en jQuery !

Il suffira de passer le sélecteur CSS à la fonction $ comme ceci.
$("p.titre").show("slow");

Cela a pour effet de dérouler lentement de haut en bas tous les paragraphes ayant la classe titre, autrement dit cela anime un paragraphe HTML tout simple.

Venons-en au chainage. Avec jQuery, chaque fonction retourne l’élément jQuery qui l’a appelé.
$(« p.titre »).show(« slow »)
retourne une référence sur $(« p.titre »). En clair, on pourra donc appeler de nouveau une fonction sur celle-ci !

On pourra par exemple écrire
$("p.titre").show("slow").
addClass("important");

Conclusion

Bien entendu, l’intérêt de jQuery ne s’arrête pas là et il y a de nombreux aspects que j’ai omis ici (l’Ajax, l’animation, la manipulation du DOM, jQuery UI, etc.). Mais j’espère, avec ce petit article, avoir donné l’envie, aux développeurs de sites web ou d’applications web, de tester jQuery. Le sujet est vaste et je pourrai écrire des tas d’articles là-dessus…

Enfin, si vous souhaitez en savoir plus, sachez que notre ami blogueur Jarodxxx a développé un site très complet à propos de jQuery. Bonne semaine à tous !

Sources

 

Vous devriez nous suivre sur Twitter ici et rejoindre notre groupe sur Facebook ici.

Mots-clefs : Catégories : article, high-tech, logiciel
23 commentaires

Dommage que l’article soit plus historique que réellement consacré à jQuery… ca appelle une suite.

Laurent (le 23 mars 2009)  - #1

Je suis d’accord avec Laurent ! :-) On veut la suite !!!!!

José (le 23 mars 2009)  - #2

Alors suite il y aura… :)

Soso (le 23 mars 2009)  - #3

Merci pour la citation :) et l’article est vraiment mais c’est vrai qu’il faut creuser

jarodxxx (le 23 mars 2009)  - #4

Je pensais faire une intro à jQuery. Qui dit intro, dit article bref… mais OK, si vous en voulez encore, on va creuser plus profondément !
En attendant, ceux qui veulent creuser peuvent aller sur ton site Jarod :)

Soso (le 24 mars 2009)  - #5

Le Jquery est quand même d’une puissance incroyable. L’essayer, c’est l’adopter. Quand tu vois les trucs que tu peux faire avec en écrivant trois lignes alors qu’il t’en faudrait 5 fois plus en javascript, ça laisse rêveur…

Olivier (le 24 mars 2009)  - #6

Très bon historique sur JavaScript! Original et bien écrit vraiment…
Une petite précision à mon avis sur le passage du CDN:

> Par convention, on utilise un hébergement (appelé CDN) optimisé pour ce genre de fichier courant pour éviter à nos internautes de re-télécharger jQuery au cas où ils l’auraient déjà dans leur cache.

Ce n’est pas tant pour éviter de re-télécharger le script qu’est utile le CDN mais bien plutôt la proximité du serveur par rapport à l’internaute. Le CDN étant un ensemble de serveurs dispersés géographiquement, l’internaute téléchargera le script depuis le serveur le plus proche ce qui sera plus rapide. Mais le CDN ne gère pas forcément le cache client.

Valentin Jacquemin (le 26 mars 2009)  - #7

@Valentin Jacquemin C’est tout à fait vrai…
Ce que je voulais dire c’est que l’avantage (du à un effet de bord…) est que si tous les sites utilisaient la même URL pour faire charger JQuery, le client n’aurait jamais besoin de le retélécharger.

Soso (le 26 mars 2009)  - #8

Merci pour cette article :)

Alune (le 2 avril 2009)  - #9

Je suis d’accord avec Laurent

ek gelir (le 9 août 2009)  - #10

En fait, le $ de JQUERY est des autres était déjà existant dans une fonction standard au JS : document.getElementByID.
C’est juste que le $ est bcp plus puissant car il recherche aussi dans les classes, ce que fait la fonction standard getElementByClassName, bcp + rapide !

Sinon, on peut faire aussi simple, plus rapide, plus compréhensible sans JQUERY :

var obj=document.getElementById(‘titre’);
obj.style.visibility=’visible’;
obj.className=’important’;

Et ça a aussi l’avantage d’être standard !

elo (le 28 mars 2010)  - #11

@elo

var obj=document.getElementById(‘titre’);
obj.style.visibility=’visible’;
obj.className=’important’;

Ce que tu fais c’est sélectionner 1 SEUL élément du dom dont l’attribut « id » vaut « titre », de le rendre visible (SANS ANIMATION) et de REMPLACER toutes ses éventuelles classes par « important ».

Pour animer l’ouverture de tous les paragraphes d’une page html et de leurs ajouter une classe, le code Javascript natif à écrire ne sera certainement pas aussi simple, plus rapide et plus compréhensible que cette jolie et concise ligne :
(« p.titre »).show(« slow »).addClass(« important »);
De plus, faire des animations cross browser en javascript natif coute chère en aspirine.

tom (le 15 octobre 2010)  - #12

Oui Tom, je sais que que ça fait.

Mais (« p.titre »).show(« slow »).addClass(« important »); n’est pas syntaxiquement correct en programmation (appliquer deux fonctions qui s’enchaînent sur un objet est illogique). Et pas très joli en plus.

Ca a le mérite d’être court, mais niveau compréhension (et maintenance), c’est zéro pointé.

elo (le 15 octobre 2010)  - #13

@elo: Bon, niveau compréhension, je trouve ça mieux du moment que l’on connait un minimum jQuery. Au niveau maintenance, je trouve que c’est kiff-kiff mais jQuery a l’avantage d’être cross-browser. Ca évite les bouts de code par navigateur…

Soso (le 15 octobre 2010)  - #14

A partir du moment où un code Javascript ne passe pas sur un navigateur, c’est qu’il y a un problème. jquery ou pas, ça n’a rien à voir.

Je maitrise le JS à 100% (facile pour un langage qui n’évolue plus) et très peu jquery. Je trouve que la syntaxe n’est pas propre du tout.

Je préfèrerai, à la limite :
var obj=rechercheObjet({balise:’p', class:’titre »);
obj.show();
obj.addClas(‘important’);

C’est beaucoup plus propre, plus clair mais un poil plus long.

Mais bon, ça n’engage que moi, je ne suis développeur que depuis 20 ans.

elo (le 15 octobre 2010)  - #15

Au risque de tomber dans le troll @elo, avec tout mon respect (je n’ai qu’une petite dizaine d’années de dev dans les pattes), dire que $(« p.titre »).show(« slow »).addClass(« important »); n’est pas syntaxiquement correct c’est du pur mensonge. Si il y avait erreur de syntaxe, ce code ne fonctionnerait pas. Tout simplement.

De plus, enchainer plusieurs appels de fonctions à la suite n’a rien d’illogique cela joue d’ailleurs un rôle central dans ce que sont les DSL (pour domain specific language, pour t’en convaincre: http://martinfowler.com/bliki/FluentInterface.html).

Et dire que la syntaxe n’est pas propre du tout on arrive, il me semble, dans la partie subjective de ton raisonnement qui n’amène pas réel débat.

Si ton argument proposait d’utiliser du javascript sans jquery parce qu’il n’y a pas forcément besoin d’utiliser un framework tout le temps je n’aurais rien eu à redire. Par contre jquery simplifie grandement les choses quant à la compatibilité des browsers et pour un développeur qui a 20 ans d’expérience et qui connaît JS à 100%, ignorer ce point m’étonne vachement! Un code js qui n’est pas 100% compatible n’est pas un code qui a un problème comme tu le dis, c’est simplement un code incomplet qui ne prend pas en compte certaines spécificités. Spécificités qui sont souvent liées à l’implémentation du DOM dans les browsers mais là je m’égare… Utiliser jquery pour s’abstraire des problèmes de compatibilité est pour moi la raison n°1 de l’utiliser (jquery ou bien tout autre framework js)!

My 2 cents,
Valentin

Valentin (le 16 octobre 2010)  - #16

Ce n’est pas vraiment syntaxiquement incorrect, je me suis mal exprimé, c’est une syntaxe à éviter, tout comme il faut éviter les GOTO dans d’autres langages.

Sinon, on pourrait imaginer a.b().c().d().e()… Bref, ce n’est pas du code propre.

Un peu comme les gens qui confondent while et for. Ou qui sortent de boucle for. On sait que c’est possible mais ce n’est pas bon algorithmiquement parlant.

jquery et les autres simplifient les choses à l’écriture, c’est justement mon reproche. Imagine juste maintenir un tel code dans 3 ans (pris dans la doc jquery) :

$(document).ready(function() {
$(‘#faq’).find(‘dd’).hide().end().find(‘dt’).click(function() {
$(this).next().slideToggle();
});
});

C’est juste un gros merdier imbitable.
Les avantages de jquery sont en fait son inconvénient : sa rapidité d’écriture implique une lenteur de compréhension car on n’est pas habitué à ça.

Tout comme prototype, qui prototype les objets de base, alourdissant chaque objet.

Après, la compatibilité entre navigateurs (surtout IE6) est une autre histoire. Mais ce n’est rien de bien méchant comparé au code jquery.

Pour info, j’ai travaillé sur différents langages (C, C++, Turbo Pascal, Assembleur, .NET, PHP, NSDK…), je ne me cantonne pas au JS.

elo (le 18 octobre 2010)  - #17

J’imagine qu’avec le temps, j’arrive à m’habituer à ce gros merdier imbitable parce que ton bout de code, il me semble clair comme de l’eau de roche :)

Soso (le 19 octobre 2010)  - #18

Tant mieux pour toi.
On en reparlera dans 5 ans, quand jquery sera aux oubliettes, remplacé par un autre.

elo (le 19 octobre 2010)  - #19

Parfait merci, tu viens de me faire avancer d’un grand pas!
Très bon post.
A+

Nicolas (le 8 juin 2011)  - #20

oui mais meme s’il est plus long utiliser sur mon hebergeur je voudrais quand meme pouvoir le telecharger mais malheureusement c’est impossible .quelqu’un peut m’aider à le telecharger plus simplement?

vanis (le 9 septembre 2011)  - #21
Merci de laisser un commentaire !

(obligatoire)

(obligatoire)