Présentation de Prototype…

Prototype est le framework javascript statistiquement le plus utilisé.
Dans cet article, nous allons passer en revue les fonctionnalités les plus intéressantes de ce framework et vous verrez rapidement que après avoir commencé à l'utiliser, vous ne pourrez plus vous en passer.

La fonctionnalité la plus importante de Prototype est son extension du DOM. Il s'agit principalement des fonction $() et $$().

La fonction $()

Vous pouvez passer deux types de paramètres à cette fonction.
Vous pouvez donc lui passer une chaine de caractère auquel cas elle fera l'équivalent d'un document.getElementById (récupèrera l'élément portant l'identifiant de cette chaine de caractères).
Ou bien simplement lui passer directement une variable pointant sur un élément.
Quoi qu'il en soit, elle vous retournera cet élément enrichi afin de vous renvoyer un élément étendu.

La plupart des fonctions de prototype acceptant des éléments en arguments commencent ainsi par les passer à $, afin d'accepter des identifiants ainsi que des éléments déjà récupérés et d'être certaines d'utiliser leur version étendue.

La fonction $$()

Combien de fois avez-vous voulu récupérer des éléments en fonction de leur attribut CSS ? C'est assez facile à faire tant que l'on a une classe sur cet élément avec document.getElementsByClassName(). Mais allez-vous vous amuser à placer une classe à chacun des li d'un ul afin de les récupérer ? Pas très propre !

C'est ce que fait $$(). En lui passant une règle css, il vous rendra un tableau contenant tous les éléments (étendus) compris dans cette règle.
Ainsi, pour récupérer tous les li de notre ul et les masquer il nous suffira de faire :

$$('#myUL li').each(function(p) { 
    p.hide(); //hide est disponible car p est un élément étendu.
});
Voici pour les fonctionnalités les plus utilisées. Mais ce n'est pas tout !

La fonction $F()

Vous avez déjà essayé de récupérer la valeur d'un champ input ? Et d'un textarea ? C'est assez agacant de devoir toujours faire des exceptions pour les récupérer car les méthodes sont différentes !

Oubliez cela, utiliser $F(). Il suffit d'y passer un élément (pas un nom d'élément attention) pour récupérer sa valeur.

Par exemple :

alert($F($('myID');
Une seule exception à cette fonction. Si l'élément indiqué est un select, un tableau de valeurs vous sera alors retourné.

La fonction $A()

Cette fonction prend un argument susceptible d'être transformé en tableau et en retourne un objet Array.
Reste à savoir ce qui constitue un argument susceptible d'être transformé en tableau. $A fonctionne comme ceci :

  1. Si on lui passe null ou undefined, elle renvoie un tableau vide.
  2. Si l'objet reçu implémente la méthode toArray(), elle utilise cette méthode. Cela permet à nos classes de controller leur transformation en tableau si nécessaire.
  3. Sinon, l'objet doit disposer de la propriété length afin de pouvoir être indexé comme un tableau.

La fonction $H()

Prototype définit un objet Hash qui représente un tableau associatif (comme les tableaux en PHP par exemple).
La fonction $H() vous retourne un tableau associatif basé sur un objet "normal".

Conclusion

Evidemment, cette liste de fonction n'est pas la liste exhaustive de toutes les fonctionnalités offertes par Prototype. Si vous désirez en savoir plus, je vous conseile l'excellent Bien développer pour le Web 2.0 de Christophe Porteneuve (le francophone de l'équipe de développement de Prototype).
Par ailleurs, vous pourrez trouver de nombreux sites sur ce sujet en vous rendant sur la catégorie JavaScript de l'annuaire dmoz.
Et de temps en temps vous pourrez trouver des astuces pour l'utilisation de Prototype sur mon blog développement web.