JavaScript/Introduction à Prototype

Leçons de niveau 16
Une page de Wikiversité, la communauté pédagogique libre.
Début de la boite de navigation du chapitre
Introduction à Prototype
Icône de la faculté
Chapitre no 8
Leçon : JavaScript
Chap. préc. :Introduction au DHTML
Chap. suiv. :jQuery
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Introduction à Prototype
JavaScript/Introduction à Prototype
 », n'a pu être restituée correctement ci-dessus.

Prototype[modifier | modifier le wikicode]

Qu'est-ce que Prototype ?[modifier | modifier le wikicode]

Prototype est une librairie (ensemble de classes et de fonctions) JavaScript gratuite et libre qui facilite le travail des développeurs de site web 2.0 (sites basés en partie sur les nouvelles technologies telle qu'Ajax). En effet, cette bibliothèque permet de s'épargner les tâches répétitives telle que l'écriture incessante et pénible du célèbre document.getElementById. Nous allons donc découvrir les bases de cette librairie très intéressante.

Télécharger Prototype[modifier | modifier le wikicode]

Télécharger la librairie Prototype est très simple puisqu’il ne s'agit que d'un seul fichier nommé "prototype.js". Voici le lien : http://www.prototypejs.org/download

Les fonctions de bases[modifier | modifier le wikicode]

Découvrons à présent les fonctions de bases fournies dans Prototype :

$()[modifier | modifier le wikicode]

Et bien oui, ceci est bien une fonction JavaScript ! Et justement, c’est une des fonctions les plus pratiques de Prototype, vous allez tout de suite voir pourquoi... Voici deux codes identiques :

// Sans Prototype :
var content = document.getElementById('id_champ_de_texte').value;
// Avec Prototype...
var content = $('id_champ_de_texte').value;

Bon, ça n'a peut-être pas l'air comme ça, mais vous allez voir que cette fonction de base simplifie énormément le travail des codeurs JS.

$F()[modifier | modifier le wikicode]

Rassurez-vous tout de suite, toutes les fonctions de Prototype ne sont pas de la sorte. La fonction $F() renvoie simplement la valeur de l'élément fourni en paramètre. Par exemple si vous voulez connaître la valeur de paragraphe;

<p id="paragraphe">Lorem ipsum</p>

... il faudra procéder ainsi :

var content = $F('paragraphe');
document.write(content);

Et voilà, cela va écrire "Lorem ipsum".