Prototype est le 1er framework javascript à avoir vu le jour. Son but est de faciliter le développement d’applications javascript « cross-browser », c’est-à-dire sans avoir à se soucier du navigateur qui va exécuter le code, de faciliter l’utilisation d’AJAX et d’étendre les fonctions du DOM.
Pour vous procurer la dernière version de Prototype, rendez-vous sur la page de téléchargement.
La fonction $() : la base de Prototype
Prototype défini la fonction fondamentale $(). Pour bon nombre de débutants, cette fonction tend à être un raccourci du classic document.getElementByID(); si connu. Il n’en est rien !
Certes, elle réalise le même travail qui est de récupérer l’élément unique de la page ayant pour valeur d’attribut id le paramètre passé à la fonction :
<div id="monDiv">...</div> <script type="text/javascript"> // Javascript standard var monDiv = document.getElementById( 'monDiv' ); // Avec Prototype var monDiv = $( 'monDiv' );
On a effectivement dans notre variable monDiv l’élément div sur lequel on peut effectuer des opérations grâce à javascript. Mais le fait de l’avoir récupéré avec la fonction de Prototype a permis de lui attribuer toutes les fonctionnalités offertes par le Framework, qui sont, je vous l’assure, aussi nombreuses que puissantes :
// Cacher l'élément
monDiv.style.display = 'none'; // Standard
monDiv.hide(); // Prototype
/* Facile, je l'accorde ! */
// Afficher l'élément
monDiv.style.display = 'block; // Standard
monDiv.show(); // Prototype
/* Aussi simple ! */
/* Affiche ou cache un élément
* selon son état actuel
*/
function myToggle( el ) {
el = document.getElementById( el );
if( 'block' === el.style.display ) {
el.style.display = 'none';
}
else {
el.style.display = 'block';
}
}
// Prototype
monDiv.toggle();
<div id="unDiv">...</div>
<p id="unP">...</p>
<ul id="unUl"></ul>
myToggle( 'unDiv' );
myToggle( 'unP');
myToggle( 'unUl' );
// Prototype
$( 'unDiv', 'unP', 'unUl' ).invoke( 'toggle' );
/* Ah ouai, quand même! */
Bien sûr, ces exemples ne sont là que pour vous présenter rapidement les fonctionnalités de Prototype et j’aurai tout le loisir de vous en proposer des biens plus élaborés afin de vous persuader de l’utilité d’une telle bibliothèque!
$$(), presque comme $() … mais en mieux!
la fonction $$() de Prototype permet elle aussi de récupérer facilement des éléments du DOM. Sa particularité et qu’au lieu de lui passer l’identifiant d’un élément HTML, on lui passe directement un sélecteur CSS. Je vous laisse imaginer toute la puissance de cette fonction :
$$( 'p' ); // Tous les éléments "p" de la page $$( 'ul#nav a.select' ); // Tous les liens possédant la class "select" de la liste identifiée par #nav $$( 'a[href="#"]' ); // tous les liens de la page dont la balise href vaut #
Depuis la version 1.5.1 de Prototype, tous les sélecteurs CSS3 sont émulés!
Comme avec $(), tous les éléments renvoyés sont automatiquement étendu pour bénéficier des fonctionnalités de Prototype.
Simplifiez-vous AJAX avec Prototype
Une autre particularité de Prototype est la facilité d’intégration d’AJAX au sein de vos pages. Plus besoin d’effectuer autant de tests que de navigateurs existant pour instancier un objet XMLHttpRequest, Prototype s’occupe de tout !
new Ajax.Request( 'http://www.monsite.com/ajax_server.php', {
onComplete: function( oResponse ) {
// met à jour div#monDiv avec le texte renvoyé
$( 'monDiv' ).update( oResponse.responseText );
},
onFailure: function() {
alert( 'Oups! Il y a eu un petit problème !' );
}
});
Gérer les événements javascript
La gestion des événements en javascript est peut-être ce qu’il y a de plus compliqué car vraiment différente selon les navigateurs. Prototype propose de résoudre cette difficulté à travers plusieurs fonctions dont vous ne pourrez plus vous passer :
// Une utilisation très répandu
<a href="http://www.un-site-externe.com/" onclick="window.open(this.href);return false;">clic</a>
// Avec Prototype
<a href="http://www.un-site-externe.com/">clic</a>
<script type="text/javascript">
$$( 'a' ).each(function( link ) {
if(is_externe( link ) ) { // is_externe est a implémenter
link.observe( 'click', function( event ) {
// Stope la propagation et prévient de l'action par défaut
event.stop();
// Ouvre le lien dans une nouvelle fenêtre
window.open( event.element().href );
});
}
});
</script>
Tout ceci n’est qu’une mise en bouche de tout ce que nous pourrons voir ensemble sur les fonctionnalités de Prototype. D’autres articles devraient bientôt suivre.
Une fois de plus, je vous renvoie vers la documentation officielle, contenant énormément d’exemples sur la mise en pratique de la librairie.
