Introduction à prototype.js

J'ai commencé à utiliser la librarie prototype.js quelque part en 2006 et dès le départ, j'ai apprécié la facilité à laquelle je pouvais écrire du code et la clareté des énoncés. Le DHTML et le Ajax étant maintenant devenus des incontournables dans des Rich Internet Applications (RIA), les programmeurs qui font aujourd'hui le saut à prototype doivent changer leurs habitudes et intégrer les nouvelles façons de faire.

Notion fondamentale de la librairie
La notation utilisée dans prototype permet d'utiliser le raccourci $ pour accéder à un élément par son id. Ainsi, les deux notations suivantes sont équivalentes :

/* Sans prototype */
document.getElementById('divContent')

/* Avec prototype */
$('divContent')

Un premier appel
Le framework de prototype met à la disposition des programmeurs plusieurs objets pratiques dont Element, qui permet de modifier directement le DOM (Document Object Model) d'une page web. Par exemple, pour cacher une portion de la page en JavaScript pur, on utilisait généralement quelque chose comme ceci :

/* Cacher l'élément */
document.getElementById('divContent').style.display = 'none';

/* Afficher l'élément */
document.getElementById('divContent').style.display = '';

Tandis que prototype nous permet d'y aller plus simplement :

/* Cacher l'élément */
Element.hide('divContent'); ou $('divContent').hide();

/* Afficher l'élément */
Element.show('divContent'); ou $('divContent').show();

Attacher des événements
Prototype permet aussi de détacher le code JavaScript initialement placé "inline" dans le code HTML. Ainsi, une fonction attachée à un événement onClick d'un bouton pourra être remplacée comme ceci:

Fonction JavaScript attachée inline dans le HTML
<input type="button" id="btn" onClick="myFunction()" />

La portion onClick="myFunction()" de l'exemple ci-dessus pourra être remplacée par une fonction attachée à l'événement click par prototype
Event.observe('btn', 'click', myFunction);

Une fois ces notions de base assimilées, le vrai plaisir commence...

Tags: JavaScript