Je présente ici un court historique du HTML et de Javascript afin de présenter jQuery dans un contexte où il montre sa facilité d'usage et sa puissance. J'en profite aussi pour introduire le « Document Object Model »
Netscape a mis au point le Javascript et l'a mis sur le marché avec Navigator 2.0 en 1996. La même année, Microsoft mettait sur le marché Internet Explorer 3.0 avec une variété de Javascript appelé JScript alors qu'en 1997, deux compétiteurs ajoutaient le support pour le DHTML et le CSS. Il s'agit d'un langage "script" orienté-objet et interprété du côté client par les fureteurs qui transforme une page statique en une page dynamique, intéractive et vivante.
JavaScript peut être puissant à utiliser dans des pages web en complément des langages HTML et CSS, mais, lors de développement d'application complexe, le code devient très lourd même pour les choses les plus simples. Cependant, le plus grand problème de Javascript vient du fait qu'il est interprété de façons plus ou moins différentes par les différents fureteurs (Internet Explorer est célèbre pour ses divergences d'interprétation). En utilisant Javascript, il faut faire une série de test du code sur plusieurs fureteurs pour vérifier son fonctionnement sur chacun d'eux car il est souvent nécessaire d'écrire plusieurs portions de code pour pallier aux différentes interprétations des multiples moteurs JavaScript.
À l'heure du Web 2.0 et bientôt du Web 3.0, les bibliothèques et frameworks JavaScript jaillissent pour combler la complexité et le manque de souplesse du langage. L'une des plus célèbres et répandues s'appelle jQuery. Ce n'est pas un langage, mais bien une bibliothèque JavaScript! Développée principalement par John Resig, elle est gratuite, elle est rapide, elle est concise, elle est rendue correctement par tous les fureteurs et offre une simplification de l'écriture et de lecture du code. C'est du code Javascript tout prêt qui permet de simplifier le travail afin de pouvoir développer plus rapidement le code de la page. Bien entendu, pour que jQuery fonctionne, il faut que Javascript soit activé au sein du fureteur du client pour que les "scripts" fonctionnent. Il est très simple à comprendre et facile à utiliser. Toutefois, il est préférable d'avoir des connaissances dans les langages HTML5 & CSS ainsi que JavaScript [voir "Mais... c'est quoi jQuery ? " par Anthony Dugois et Nassim Kebbani pour tutoriel très intéressant - à lire...].
Cependant, avant de se lancer dans l'étude détaillée de jQuery, il faut parler un peu de la structure générale d'une page Web car Javascript et jQuery sont des langages qui ont été créés pour scruter et manipuler cette structure hiérarchique appelée le Document Object Model (DOM)
Le Document Object Model
Une page Web est constituée de balises qui sont hiérarchisées en une structure interne décrite par le Document Object Model (ou DOM), une interface de programmation qui est indépendante de tout langage de programmation et de toute plate-forme. Il définit la structure logique arborescente d'un document (interprété dans son sens le plus général) en terme de noeuds et d'éléments qui peuvent être accédés et manipulés.
Le contenu d'une page HTML est organisé en balises imbriquées, c'est à dire que les éléments sont contenus dans des éléments plus gros. Le parent est un élément qui en contient d'autres (les enfants). Dans le modèle DOM (je simplifie beaucoup ici), les balises sont des noeuds de l'arborescence. En fait, <html> est le noeud racine de l'arborescence. alors que les noeuds <head> et <body> sont au deuxième niveau. L'arborescence des noeuds se poursuit ainsi vers le bas avec tous les noeuds de la page comme illustré dans le diagramme qui suit
Contenu des balises
Une balise peut avoir des propriétés mais la plupart ont aussi un contenu (<br />, <hr /> et quelques autres balises n'en ont pas). Pour des balises comme <a> ou <p>, il s'agit de texte mais généralement un énoncé comme <a ...>contenu de la balise</a>, "contenu de la balise" est un noeud du diagramme DOM (ils ont été sous-entendu dans le diagramme montré plus haut). Pour beaucoup de balises, ce contenu peut consister en du texte et/ou d'autres balises.
Par exemple, le contenu de la balise <html> est la page complète alors que pour les balises <p> et <a>, il peut s'agir de texte qui, lui même, peut contenir des balises.
 |
Éléments du DOM
Dans le modèle DOM, tous les noeuds sont des éléments qui peuvent être atteints et manipulés. Cependant, les propriétés des balises sont aussi des éléments qui, eux aussi peuvent être atteints et manipulés. Dans l'exemple (un peu farfelu) qui suit,
<a id="mon_id" class="ma_classe" title="mon_titre" name="mon_nom" type="mon_type">Mon lien</a>la balise "a" est un élément mais l'identificateur (id) "mon_id" en est un aussi de même que la classe (class) "ma_classe". Il en va de même de l'attribut title et de l'attribut name. Il faut aussi noter que dans cet exemple, "Mon lien" est aussi un élément appelé élément contenu et c'est celui qui sera affecté lorsqu'une ou des règles de style s'appliqueront.
Note de l'auteur
Pour ceux qui sont curieux d'en savoir plus sur le DOM, je recommande la lecture de Document Object Model sur Wikipedia et de Document Object Model (DOM) sur le site de W3C Architecture Domain.
