jQuery ou JavaScript : Pourquoi la question ne se pose pas

J’ai déjà décrit dans un autre article de ce blog, l’interaction entre HTML, CSS et JavaScript. Lors de ce précédent article, je déclarais que JavaScript était responsable de la « dynamique » sur les sites Web. Chaque fois que quelque chose doit changer, on peut définir au moyen de JavaScript ce qui doit changer et comment cela doit changer. Dans ce dernier cas, en faisant varier soit le contenu et la structure (donc HTML) ou soit l’aspect et la présentation (c’est-à-dire CSS) des éléments HTML individuels.

Je suis confronté de temps en temps à la déclaration que JavaScript est obsolète. On serait sensé utiliser jQuery actuellement pour résoudre les défis correspondants. Si quelqu’un suit le cours « Web Developer Basic (HTML, CSS, JavaScript) », on me demande “Que dois-je faire ? jQuery ou JavaScript ? ”

Pourquoi la question ne se pose pas ou pourquoi la question est mal posée, sera clairement expliqué dans le présent document (espérons-le).

Comment on écrit du code – une introduction

Que fait-on lorsque l’on écrit du code ? Eh bien cela est un peu comme quand je dis à une de mes filles qu’elle devrait pousser le vase sur la table, un peu plus loin vers la droite. Je donne des instructions. En français je formule la phrase comme suit :

Il y a un vase sur la table à manger. S'il te plaît pousse-le de sorte qu'il soit à 30 cm à partir du bord de la table !

Même quand je programme, j’utilise un langage pour donner des instructions à savoir un langage de programmation. JavaScript est un langage de programmation. Si ma fille comprenait JavaScript, je pourrais à la place d’une phrase en français plutôt l’instruire comme suit :

Maison.Salon.Table.Vase.Style.DistanceDuBordGauche = 30cm;

Même sans connaissance de la programmation, cette ligne peut être plus ou moins comprise. Et vous voyez, dans JavaScript, vous pouvez exprimer quelque chose un peu plus techniquement et omettre le “s’il vous plaît”.

Plusieurs instructions donnent un programme

Avec une seule instruction je n’ai encore aucun programme. Pour cela, je dois enchaîner plusieurs instructions. En quelque sorte comme l’enchainement d’une séquence de pas coordonnés comme des pas de danse. Par exemple, si je veux que ma fille pousse le vase à travers la table alors ce serait quelque chose qui ressemblerait en français à ceci :

Il y a un vase sur la table.
Pousse-le de sorte à ce qu’il soit éloigné de 1 mm du bord !
Attends 7 millisecondes !
Pousse-le de sorte à ce qu’il soit éloigné de 2 mm du bord !
Attends 7 millisecondes !
Pousse-le de sorte à ce qu’il soit éloigné de 3 mm du bord !
Attends 7 millisecondes !...
Pousse-le de sorte à ce qu’il soit éloigné de 4 mm du bord !
Attends 7 millisecondes !
...

… et ainsi de suite. De l’extérieur, cela crée un mouvement fluide du vase sur la table. Tandis chez ma fille, on sent se développer la colère.

Pour être complet, voici le programme dans notre pseudo-JavaScript :

leVase = Maison.Salon.Table.Vase;
attendrePuisExecuterEnsuite("leVase.Style.DistanceDuBordGauche = 1mm", 7 millisecondes);
attendrePuisExecuterEnsuite("leVase.Style.DistanceDuBordGauche = 2mm", 7 millisecondes);
attendrePuisExecuterEnsuite("leVase.Style.DistanceDuBordGauche = 3mm", 7 millisecondes);
attendrePuisExecuterEnsuite("leVase.Style.DistanceDuBordGauche = 4mm", 7 millisecondes);
...

Le résultat est similaire. Contrairement à ma fille, JavaScript n’explose pas de colère.

Pourquoi on n’aime pas trop travailler avec JavaScript si on doit beaucoup programmer ?

Il y avait (et il y a encore) dans JavaScript trois situations qui compliquent la vie d’un programmeur :

1. JavaScript comprend difficilement quels éléments on souhaite déplacer.
2. Il faut formuler chaque étape individuellement (= chaque instruction).
3. Dans JavaScript, je dois dire à chaque élément individuel ce qu’on veut de lui, même si je l’ai déjà dit à un autre.

Et c’est justement ici que jQuery entre en jeu. JQuery n’est en fait rien de plus qu’une collection très complète de morceaux de programme pour la manipulation d’éléments sur les pages Web. Le mot d’ordre de cette collection est “Ecrire moins. Faire plus! ”

Je vais expliquer brièvement comment jQuery réalise cela. Peut-être que certains parents parmi nous développeront de nouvelles méthodes d’enseignement.

Pourquoi jQuery a tant de succès

JQuery résout les trois défis énumérés ci-dessus avec les mots magiques :

1. Sélecteur – CSS
2. Méthodes prédéfinies
3. Itérations implicites

Puisque même mes enfants ne comprennent pas ces mots magiques, voici un exemple pour chacun d’entre eux :

1. Sélectionneurs – CSS

Si vous connaissez CSS, vous savez ce que c’est un « Sélecteur ». Sinon, imaginez-vous, qu’à la place de « Le vase sur la table dans le salon » j’aurais pu dire « tout ce qui est sur la table » ou « tout ce qui est en verre » ou « ça, là-bas » ou même « tout ce qui est en verre mais seulement si c’est sur la table et que c’est un héritage de la grand-mère ». Ma fille pourrait comprendre cela. CSS comprend aussi une telle façon de sélectionner des éléments (= sélectionner) et propose une variété de sélecteurs.

JavaScript ne connait pas cela.

Dans JavaScript j’écris donc :

Maison.Salon.Table.Vase;

Dans jQuery je raccourcis cela ainsi :

jQuery("Vase");

Et l’héritage de la grand-mère ?

JavaScript nécessite là x lignes de code :

leVase = Maison.Salon.Table.chercheQuelqueChoseAvecUnNom("Vase");
ou ( leVase.Materiel == Verre ET leVase.Origine == HeritageGrandMere) {
...maintenant tu peux faire quelque chose avec...
}

A jQuery cela ne coûte qu’un sourire ennuyeux :

jQuery("Vase[materiel.HeritageGrandMere")

Cela paraît un peu “crypté”, mais la devise reste: “Ecrire moins. Faire plus”. Ce qui est bien le cas.

2. Méthodes prédéfinies

Si nous regardons le petit programme pour ma fille (voir ci-dessus), on se souvient que cela a pris un nombre relativement important de lignes de code. Bien sûr, vous pourriez par exemple, le raccourcir avec une boucle. Toutefois, la manière aussi simple et élégante qu’utilise jQuery pour résoudre le problème décourage toute tentative de modification du code.

jQuery("Vase").animate({"DistanceDeGauche":"30cm"},3000);

Le vase sera déplacé dans un délai de 3 secondes (= 3000ms) à une distance de 30 cm depuis le côté gauche. Et ce, peu importe où il était ! animate() est l’abréviation pour une collection de codes préfabriqués qui prend soin de l’ensemble. Pratique et efficace !

3. Itérations implicites

L’itération implicite est un de mes mots préférés et j’aurais souhaité que mes filles sachent ce que c’est.
Une itération est une répétition donc une boucle. Je dois parfois dire certaines choses à mes filles et cela d’une manière explicite à chacune d’entre elles, ce qui correspond à une itération explicite. Si je pouvais dire « ranger la chambre » et que chacune de mes filles se sentirait concernée, cela serait une itération implicite, une itération que je ne devrais pas énoncer explicitement.

Si je veux que tout disparaisse sur la table, j’écrierais dans jQuery :

jQuery(" Table Chose ").hide();

Il est donc égal si sur la table, il y avait 1 élément, 57 éléments ou rien du tout.

Retour à la question d‘origine

Si vous lisez cette phrase, cela signifie que vous comprenez toujours à mi-chemin de quoi il se retourne. Il est aussi probable que vous ne vous posiez plus la question ” JQuery ou JavaScript ?”. JQuery a prouvé au fil des explications sa simplicité et son efficacité. Mais vous ne vous débarrasserez pas de JavaScript car jQuery est écrit en JavaScript. Si vous voulez utiliser jQuery sans connaissance de JavaScript, cela serait équivalent à vouloir écrire de la poésie sans parler la langue.

Celui qui veut donc apprendre d’abord le français, suivra le cours Programmation-JavaScript ou le cours Web Developer Basic (HTML, CSS, JavaScript) afin de comprendre la connexion entre CSS et HTML.

Ceux qui parlent déjà le français, donc JavaScript, peuvent suivre le cours Elaboration d’applications Web dynamiques avec jQuery.

Pour ma part, je vais surveiller ma fille pour qu’ elle débarrasse la table et qu’elle ne fasse pas tomber le vase. Regardons si jQuery("Table").nettoyer("attentivement") suffirait à cela…