Les intégristes

Inauguration de ce nouveau blog !

Eric, Gafour et moi-même, à travers l’expérience que nous accumulons chaque jour, allons essayer de faire quelque chose d’intelligent ici, et c’est loin d’être gagné !

Nous y parlerons standards, accessibilité, technique, organisation et méthodes de travail.

Commençons technique, avec cette bibliothèque Javascript que j’apprécie particulièrement :

jQuery

Il existe déjà quelques tutoriels et présentations sur jQuery, mais je vais essayer d’en expliquer les bases à ma façon, en espérant que ça puisse aider quelqu’un.

jQuery repose sur une seule fonction, c’en est d’ailleurs effrayant de simplicité : $(). C’est tout.
Mmm… d’accord, je vais développer un peu.

Selon les paramètres que l’on va lui passer, cette fonction va réagir de différentes manières. Voici les types de paramètres que l’on peut lui passer :

Une fonction

Dans ce cas, jQuery va charger cette fonction lorsque la page sera chargée par le navigateur.

Mais pourquoi ne pas utiliser le classique window.onload = function(){} ?

Principalement parce que window.onload attend que la page et les éléments qu’elle contient soient complètement chargés, ce qui peut être très long.

Pour reprendre le processus :

1. Le fichier html est téléchargé.
2. Il est lu par le navigateur.
3. Le navigateur commence à télécharger les éléments auxquels le fichier html fait référence (images, css…).
4. Le code situé dans $(function(){}) est exécuté dès que possible.
5. Lorsque tout est téléchargé, le code situé dans window.onload = function(){} est exécuté, en dernier.

Théoriquement, ce code devrait même être exécuté avant l’affichage, mais en réalité le navigateur peut commencer à afficher la page avant qu’elle ne soit complètement téléchargée.
De plus, les téléchargements ne se font pas un par un, car le navigateur n’attend pas qu’une image arrive pour en télécharger une autre, heureusement !

Voilà qui facilite le côté non-intrusif du Javascript :
Si un élément ne doit apparaître qu’au survol de la souris, par exemple, il faut bien que cet élément soit visible lorsque Javascript n’est pas activé : il peut alors simplement être placé dans le code de la page, et dissimulé en Javascript au chargement, pour réapparaître au survol, en une animation à couper le souffle !

On peut l’utiliser en stockant la fonction dans une variable pour la passer ensuite à jQuery :

var ma_fonction = function(){
	// Tout ce qui est ici sera exécuté au chargement du DOM.
};
$(ma_fonction);

Ou, plus directement, en passant simplement une fonction anonyme à jQuery :

$(function(){
	// Tout ce qui est ici sera exécuté au chargement du DOM.
});

Un élément, ou un tableau d’éléments DOM

Vous vous en doutiez, jQuery, cet insolent, n’est pas qu’un “super loader”.
En lui passant des éléments du DOM, la fonction $() va nous renvoyer un objet jQuery qui va contenir les éléments qui lui ont été passés, et sur lesquels on va pouvoir user et abuser de toute la puissance de jQuery.

Un peu comme une grosse boîte magique, dans laquelle on va mettre tout ça.

Il est possible de passer un élément, ou un tableau d’éléments à jQuery.
Il va sans dire que le code suivant doit être placé dans le “chargeur” jQuery, vu juste au-dessus, pour être exécuté :

var mon_element = document.getElementById("id_de_mon_element_html");
var mon_objet_jquery = $(mon_element);

Une chaine de caractères

Notre formidable sens de la déduction nous a immédiatement permis de comprendre la raison du “j”. Mais pourquoi “Query” ?

En passant une chaine de catactères à la fonction $(), nous allons lui demander de nous retourner un objet jQuery rempli d’éléments, sans même avoir à sélectionner préalablement les objets DOM.

- Sorcellerie !

Ecoutez, calmez vous et posez cette fourche, sinon nous allons avoir du mal à avancer.

Plusieurs possibilités vous permettront de sélectionner les éléments désirés : les sélecteurs CSS de niveaux 1 à 3, XPath, ainsi que quelques sélecteurs jQuery.

Les sélecteurs CSS

J’imagine que si vous lisez ceci, vous avez au moins une vague connaissance du langage CSS, et c’est merveilleux !

Prenons cette structure HTML :

<div id="fixe">
<h2>Je suis un titre, j'ai de l'importance.</h2>
<p class="ique">Ca va les chevilles là-haut ?</p>
<p>Lorem ipsum sont des mots qui vont très bien ensemble, très bien ensemble.</p>
</div>

Nous voulons sélectionner le premier élément <p>.
Voici différentes possibilités :

// Sélection des éléments ayant pour classe "ique", dans l'élément ayant pour id "fixe"
var mon_objet_jquery = $("#fixe .ique");      

// Sélection du premier élément <p> de l'élément <div>.
var mon_objet_jquery = $("div p:first-child");      

// Sélection des éléments <p>, enfants directs d'un élement <div> et ayant pour classe "ique".
var mon_objet_jquery = $("div > p.ique");

Le langage CSS offre suffisamment de flexibilité pour permettre une sélection fine et souple.

Que se passe-t-il dans la boîte ? Comme vous vous en doutiez, ces sélecteurs CSS n’ont aucun rapport avec l’interprétation CSS de votre navigateur.

jQuery va lire cette phrase et la transformer en sélection DOM, mixer cette joyeuse troupe d’une façon dont vous n’aurez absolument pas à vous préoccuper, pour vous retourner précisément le résultat de votre requête, et le tout soigneusement emballé dans un objet jQuery, poil au nombril.

Imaginez le cas suivant : vous souhaitez sélectionner tous les éléments p ayant pour classe “ique”.
On peut alors utiliser la méthode getElementsByTagName("p"), qui va nous retourner un tableau d’éléments p.
Nous pourrons ensuite trier ce tableau à l’aide d’une boucle, pour ne garder que ceux ayant pour classe “ique”. On imagine sans peine les quelques lignes nécessaires à une sélection pourtant triviale.

Avec jQuery, une ligne suffit : $("p.ique");.
C’est beau, c’est simple, et cette phrase a un parfum de slogan minable.

Il est bien sûr possible, comme en CSS, d’utiliser plusieurs sélecteurs à la fois :

var mon_objet_jquery = $("#fixe .ique, #fixe :last-child");

Vous trouverez sur la documentation de jQuery une liste des sélecteurs supportés par jQuery, ceux dont la syntaxe diffère légèrement de la spécification CSS, ceux qui n’auraient aucun sens pour jQuery (E:visited, E:first-letter), et ceux qui ne sont pas supportés en raison d’un manque d’utilité réelle :
Documentation des sélecteurs jQuery

XPath

jQuery ajoute à cela une implémentation basique de XPath.

Voici comment sélectionner les éléments p enfants de body, lui-même enfant de html :

$("/html/body//p");

Documentation XPath de jQuery

Les sélecteurs jQuery

Il existe également une série de sélecteurs n’ayant aucun équivalent CSS ou XPath ; ces derniers peuvent se révéler très pratiques comme dans les exemples suivants :

Sélection des éléments impairs :

$("div p:odd");

Sélection des éléments inférieurs à (less than) 4 :

$("div p:lt(4)");

Ou encore la sélection des éléments d’un formulaire (input, select, textarea, button) :

$("div p:input");

Vous trouverez l’intégralité des exemples sur la documentation. Contrairement à XPath que j’utilise finalement assez rarement, ces derniers sont utiles dans de nombreuses situations, pensez-y :
Documentation des sélecteurs propres à jQuery

Chemise sous le chapeau, il est possible de combiner les différents types de sélecteurs que nous venons de voir, dans une même requête !

Voilà, nous avons vu comment remplir notre boîte magique, nous verrons lors du prochain article comment remuer tout ça !

Quelques jQueryfiseries :

• Site de jQuery
• Documentation de jQuery
• Blog officiel de jQuery
• Tutoriels jQuery