Documentation de la librairie prototype, version 1.4.0

Traduction pour http://www.developpez.com par SpaceFrog (Steven K. Martin), Olivier Lance ( Accueil ) et Denis Cabasson ( Developpez.com ) du document

Developer Notes for prototype.js de Sergio Pereira.
Un grand merci à Bisûnûrs pour sa relecture complète de l'article.

Date de publication : 24/04/2007 , Date de mise à jour : 25/04/2007

Par Sergio Pereira (Sergio Pereira)

Prototype est une librairie Javascript de bas niveau permettant de faire des manipulations DOM ou de l'AJAX facilement. Elle permet de faire abstraction complète des différents navigateurs et de leurs bugs ou spécificités en proposant des méthodes fonctionnant sur tous les navigateurs.
Toutes les opérations les plus courantes sont outillées de façon appropriée pour pouvoir être utilisées facilement.
Ce framework est de plus fortement orienté objet, ce qui en rend la lecture et l'utilisation d'autant plus aisées et naturelles pour tous les développeurs habitués à ce type de programmation.

Version PDF (Miroir) Version hors-ligne (Miroir)

De quoi s'agit-il ?
1. Les fonctions utilitaires
1-A. Utilisation de la fonction $()
1-B. Utilisation de la fonction $F()
1-C. Utilisation de la fonction $A()
1-D. Utilisation de la fonction $H()
1-E. Utilisation de la fonction $R()
1-F. Utilisation de la fonction Try.these()
2. L'objet Ajax
2-A. Utilisation de la classe Ajax.Request
2-B. Utilisation de la classe Ajax.Updater
3. Enumérer... Youhou ! Super ! Génial !
3-A. Boucles en syntaxe Ruby
3-B. Vos tableaux dopés aux stéroïdes
4. Des livres que je recommande fortement
5. Référence de prototype.js
5-A. Extensions des classes JavaScript existantes
5-A-1. Extensions pour la classe Object
5-A-2. Extensions pour la classe Number
5-A-3. Extensions pour la classe Function
5-A-4. Extensions pour la classe String
5-A-5. Extensions pour la classe Array
5-A-6. Extensions pour l'objet DOM document
5-A-7. Extensions pour l'objet Event
5-B. Nouveaux objets et classes définis par prototype.js
5-B-1. L'objet PeriodicalExecuter
5-B-2. L'objet Prototype
5-B-3. L'objet Enumerable
5-B-4. L'objet Hash
5-B-5. La classe ObjectRange
5-B-6. L'objet Class
5-B-7. L'objet Ajax
5-B-7-a. L'objet Ajax.Responders
5-B-7-b. La classe Ajax.Base
5-B-7-c. La classe Ajax.Request
5-B-7-d. L'objet/argument options
5-B-7-e. La classe Ajax.Updater
5-B-7-f. La classe Ajax.PeriodicalUpdater
5-B-8. L'objet Element
5-B-8-a. La classe Element.ClassNames
5-B-9. L'objet Abstract
5-B-9-a. La classe Abstract.Insertion
5-B-10. L'objet Insertion
5-B-10-a. La classe Insertion.Before
5-B-10-b. La classe Insertion.Top
5-B-10-c. La classe Insertion.Bottom
5-B-10-d. La classe Insertion.After
5-B-11. L'objet Field
5-B-12. L'objet Form
5-B-12-a. L'objet Form.Element
5-B-12-b. L'objet Form.Element.Serializers
5-B-13. La classe Abstract.TimedObserver
5-B-13-a. La classe Form.Element.Observer
5-B-13-b. La classe Form.Observer
5-B-14. La classe Abstract.EventObserver
5-B-14-a. La classe Form.Element.EventObserver
5-B-14-b. La classe Form.EventObserver

De quoi s'agit-il ?

Au cas où vous ne l'auriez pas encore utilisée, prototype.js est une librairie JavaScript écrite par Sam Stephenson. Ce code très bien pensé et bien écrit, conforme aux standards, facilite la création de pages riches et hautement interactives en Web 2.0.

Si vous avez essayé d'utiliser cette librairie récemment, vous avez pu vous rendre compte que sa documentation n'est pas son point fort. Comme de nombreux développeurs avant moi, j'ai apprivoisé prototype.js en lisant la source du code et en l'expérimentant. J'ai pensé qu'il serait sympa de prendre des notes au fur et à mesure de mon apprentissage et de les partager avec tout le monde.

Je propose également une référence non officielle pour les objets, classes et extensions fournis par cette librairie.

En lisant les exemples et les références, les développeurs familiers du langage Ruby pourront constater une similitude intentionnelle entre les classes Ruby et de nombreuses extensions mises en oeuvre dans cette librairie.

1. Les fonctions utilitaires

La librairie comporte de nombreux objets prédéfinis et fonctions utilitaires. Le but évident de ces fonctions est de vous épargner des frappes répétées.

1-A. Utilisation de la fonction $()

La fonction $() est un raccourci pratique pour la fonction DOM très souvent utilisée document.getElementById(). Tout comme la fonction DOM, celle-ci retourne l'élément dont l'id est passé en paramètre.

Contrairement à la fonction DOM, celle-ci va plus loin. Vous pouvez lui passer plus d'un seul id et $() retournera un tableau (Array) des éléments requis. L'exemple ci-dessous illustre cela :

<html>
<head>
<title> Page de Test </title>
<script type='text/javascript' src="prototype-1.4.0.js"></script>

<script type='text/javascript'>
	function test1()
	{
		var d = $('monDiv');
		alert(d.innerHTML);
	}

	function test2()
	{
		var divs = $('monDiv','monAutreDiv');
		for(i=0; i<divs.length; i++)
		{
			alert(divs[i].innerHTML);
		}
	}
</script>
</head>

<body>
	<div id="monDiv">
		<p>Ceci est un paragraphe</p>
	</div>
	<div id="monAutreDiv">
		<p>Ceci est un autre paragraphe</p>
	</div>

	<input type="button" value="Test1" onclick="test1();"><br>
	<input type="button" value="Test2" onclick="test2();"><br>

</body>
</html>

Une autre chose appréciable avec cette fonction, c'est que l'on peut aussi lui passer indifféremment l'id de l'élément ou l'élément lui-même, ce qui la rend très utile lors de la création d'autres fonctions qui acceptent également l'une ou l'autre forme de paramètres.

1-B. Utilisation de la fonction $F()

La fonction $F() est un autre raccourci appréciable. Elle retourne la valeur de n'importe quel contrôle de saisie, tel que input type='text' ou select. La fonction accepte indifféremment en argument l'id de l'élément ou l'élément lui-même.

<script type='text/javascript'>
	function test3()
	{
		alert(  $F('utilisateur')  );
	}
</script>

<input type="text" id="utilisateur" value="Marc Assin"><br>
<input type="button" value=Test3 onclick="test3();"><br>

1-C. Utilisation de la fonction $A()

La fonction $A() convertit l'unique paramètre qu'elle reçoit en un objet Array.

Cette fonction, combinée avec les extensions de la classe Array, facilite la conversion de n'importe quelle liste énumérable en tableau (Array) ou sa copie. Une suggestion d'utilisation est de convertir une NodeList DOM en un tableau (Array) qui pourra être parcouru plus efficacement. Voir l'exemple ci-dessous :

<script type='text/javascript'>

	function MontreOptions(){
		var LaNodeList = $('Employes').getElementsByTagName('option');
		var Noeuds = $A(LaNodeList);

		Noeuds.each(function(noeud){
				alert(noeud.nodeName + ': ' + noeud.innerHTML);
			});
	}
</script>

<select id="Employes" size="10" >
	<option value="5">Martin, Steven</option>
	<option value="8">Hauchon, Paul  </option>
	<option value="1">Dupré, Jean</option>
</select>

<input type="button" value="Afficher les options" onclick="MontreOptions();" >

1-D. Utilisation de la fonction $H()

La fonction $H() convertit les objets en objets Hash énumérables qui s'apparentent à des tableaux associatifs.

<script type='text/javascript'>
	function testHash()
	{
		//creation de l'objet
		var a = {
			premier: 10,
			second : 20,
			troisieme : 30
			};

		// maintenant transformons le en hash
		var h = $H(a);
		alert(h.toQueryString()); //affiche: premier=10&second=20&troisieme=30
	}

</script>

1-E. Utilisation de la fonction $R()

La fonction $R() est simplement un raccourci pour new ObjectRange(limitebasse,limitehaute, exclurelimites).

Se référer à la documentation sur la classe ObjectRange pour une explication complète de cette classe. Toutefois, étudions un exemple simple qui montre également l'utilisation d'itérations au travers de la méthode each. Vous trouverez plus d'informations sur cette méthode dans la documentation sur l'objet énumérable.

<script type='text/javascript'>
	function demoDollar_R(){
		var indice = $R(10, 20, false);
		indice.each( function(valeur, index) {
			alert(value);
		});
	}
</script>

<input type="button" value="Comptage Count" onclick="demoDollar_R();" >

1-F. Utilisation de la fonction Try.these()

La fonction Try.these() facilite l'appel à différentes fonctions ... heu ... jusqu'à ce que l'une d'entre elles fonctionne. Elle accepte plusieurs fonctions en paramètre et les appelle l'une après l'autre dans l'ordre jusqu'à ce que l'une d'entre elles fonctionne, elle retourne alors le résultat de la fonction dont l'appel à été fructueux.

Dans l'exemple ci-dessous, la fonction xmlNode.text est implémentée dans certains navigateurs et xmlNode.textContent est implémentée dans les autres navigateurs. En utilisant la fonction Try.These() il nous est possible d'obtenir le résultat de celle qui fonctionne.

<script>
function getValeurNoeud(noeudXML){
	return Try.these(
		function() {return noeudXML.text;},
		function() {return noeudXML.textContent;}
	);
}
</script>

2. L'objet Ajax

Les fonctions utilitaires évoquées ci-dessus sont sympathiques, mais soyons honnêtes elles ne sont pas des plus avancées. Vous pourriez probablement en faire autant, et vous avez peut-être des fonctions similaires dans vos propres scripts. Mais ces fonctions ne sont que la partie émergée de l'iceberg.

Je suis sûr que votre intérêt pour prototype.js est principalement dirigé vers ses capacités en AJAX. Alors je vais vous expliquer en quoi cette librairie va vous faciliter la vie pour implémenter AJAX.

L'objet Ajax est un objet prédéfini créé par la librairie pour englober et simplifier le code compliqué nécessaire pour la mise en oeuvre de la technologie AJAX. Cet objet comporte de nombreuses classes qui intègrent les fonctionnalités de la technologie AJAX. Passons en revue certaines de ces classes.

2-A. Utilisation de la classe Ajax.Request

Si vous n'utilisez pas de librairie, vous devez certainement avoir recours à un code important pour créer un objet XMLHttpRequest, puis suivre son statut de façon asynchrone, puis en extraire la réponse et enfin traiter la réponse. Et estimez-vous heureux si vous n'avez pas à implémenter cela pour plusieurs navigateurs.

Pour faciliter les fonctionnalités d'AJAX, la bibliothèque définit la classe Ajax.Request.

Admettons que vous ayez une application qui communique avec le serveur au travers de l'url http://votreserveur/application/cherche_ventes?idEmploye=1234&annee=1998, qui retourne une réponse XML comme suit :

<?xml version="1.0" encoding="utf-8" ?>
<reponse-ajax>
	<reponse type="object" id="detailsProduit">
		<ventes-mensuelles>
			<ventes-employe>
				<id-employe>1234</id-employe>
				<annee-mois>1998-01</annee-mois>
				<ventes>$8,115.36</ventes>
			</ventes-employe>
			<ventes-employe>
				<id-employe>1234</id-employe>
				<annee-mois>1998-02</annee-mois>
				<ventes>$11,147.51</ventes>
			</ventes-employe>
		</ventes-mensuelles>
	</reponse>
</reponse-ajax>

Communiquer avec le serveur pour récupérer ce XML est relativement simple en utilisant l'objet Ajax.Request. L'exemple ci-dessous montre comment :

<script>
	function rechercheVentes() {

		var idEmploye = $F('listeEmployes');
		var annee = $F('listeAnnees');
		var url = 'http://votreserveur/application/cherche_ventes';
		var parametres = 'idEmploye=' + idEmploye + '&annee=' + annee;

		var myAjax = new Ajax.Request(
			url,
			{
				method: 'get',
				parameters: parametres,
				onComplete: afficheReponse
			}
		);

	}

	function afficheReponse(requete) {
		//affiche le XML dans le textarea
		$('resultat').value = requete.responseText;
	}
</script>

<select id="listeEmployes" size="10" onchange="rechercheVentes()">
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>
<select id="listeAnnees" size="3" onchange="rechercheVentes()">
	<option selected="selected" value="1996">1996</option>
	<option value="1997">1997</option>
	<option value="1998">1998</option>
</select>
<br>
<textarea id='resultat' cols=60 rows=10 ></textarea>

Avez-vous vu le second paramètre passé au constructeur de l'objet Ajax.Request ? Le paramètre {method: 'get', parameters: pars, onComplete: afficheReponse} represente un objet anonyme en notation littérale (aussi connu sous le nom de JSON). Ce que je veux dire c'est que nous passons un objet qui possède une propriété nommée method qui contient le string 'get', une autre propriété nommée parameters qui contient la chaîne d'interrogation de la requête HTTP et une propriété/méthode onComplete qui contient la fonction afficheReponse.

Il y a d'autres propriétés que l'on peut renseigner dans cet objet, telle que asynchronous qui peut prendre les valeurs true ou false et détermine si l'appel AJAX vers le serveur doit être fait de façon asynchrone ou non (la valeur par default est true).

Ce paramètre définit les options pour l'appel AJAX. Dans notre exemple, nous appelons l'URL dans le premier paramètre par une commande HTTP GET, en passant la chaîne d'interrogation contenue dans la variable parameters, et l'objet Ajax.Request appellera la fonction afficheReponse lorsqu'elle aura terminé la récupération de la réponse.

Comme vous le savez, XMLHttpRequest rend compte de sa progression au cours de l'appel HTTP. Cet avancement se décompose en quatre étapes différentes : Loading (En Chargement), Loaded (Chargé), Interactive (Interactif) ou Complete (Achevé). On peut demander à l'objet Ajax.Request d'appeler une fonction personnelle à n'importe laquelle de ces étapes, l'étape Complete étant la plus utilisée. Pour informer l'objet de la fonction, ajouter simplement la propriété/méthode appelée onXXXXX dans les options de requête, tout comme le onComplete dans notre exemple. La fonction passée sera appelée par l'objet avec deux paramètres, le premier sera le XMLHttpRequest (aussi connu sous l'appellation de XHR) lui-même, le second sera l'évaluation X-JSON du header HTTP de la réponse (s'il y en a un).

<script>
	var mesGestionnairesGlobaux = {
		onCreate: function(){
			Element.show('systemeAttente');
		},

		onComplete: function() {
			if(Ajax.activeRequestCount == 0){
				Element.hide('systemeAttente');
			}
		}
	};

	Ajax.Responders.register(mesGestionnairesGlobaux);
</script>

<div id='systemeAttente'>
	<img src='sablier.gif'>Chargement en cours...
</div>

2-B. Utilisation de la classe Ajax.Updater

Si vous avez un script serveur qui peut renvoyer des informations préformatées en HTML, alors la bibliothèque peut vous rendre la vie encore plus facile avec la classe Ajax.Updater. Avec celle-ci, vous n'avez qu'à indiquer quel élément doit être alimenté par le code HTML renvoyé par l'appel AJAX. Un exemple vaut mieux qu'un long discours :

<script>
	function chercheHTML() {

		var url = 'http://votreserveur/application/chercheHTML';
		var parametres = 'unParametre=ABCD';

		var myAjax = new Ajax.Updater(
			'emplacement',
			url,
			{
			method: 'get',
			parameters: parametres
			}
		);

	}
</script>

<input type='button' value='ChercheHTML' onclick="chercheHTML()">
<div id="emplacement"></div>

Comme vous pouvez le voir, le code ressemble beaucoup à l'exemple précédent, à l'exception de la fonction onComplete et de l'id de l'élément passé au constructeur. Changeons un peu ce code pour montrer comment il est possible de gérer les erreurs serveur côté client.

Nous allons ajouter quelques options supplémentaires à l'appel, en spécifiant une fonction qui sera appelée en cas d'erreur. Cela se fait grâce à l'option onFailure. Nous préciserons également que notre élément emplacement ne doit être alimenté qu'en cas de succès de l'appel. Pour parvenir à nos fins, nous allons transformer le premier paramètre d'un simple id d'élément à un objet possédant deux propriétés, success (à utiliser quand tout s'est bien passé) et failure (à utiliser quand quelque chose se passe mal). Nous n'utiliserons pas la propriété failure dans notre exemple, mais uniquement la fonction rapporteErreur dans l'option onFailure.

<script>
	function chercheHTML() {

		var url = 'http://votreserveur/application/chercheHTML';
		var parametres = 'unParametre=ABCD';

		var myAjax = new Ajax.Updater(
			'emplacement',
			url,
			{
			method: 'get',
			parameters: parametres,
			onFailure: rapporteErreur
			}
		);
	}

	function rapporteErreur(requete) {
		alert('Désolé, une erreur s'est produite.');
	}
</script>

<input type='button' value='ChercheHTML' onclick="chercheHTML()">
<div id="emplacement"></div>

Si les balises HTML renvoyées par votre code côté serveur sont accompagnées de code JavaScript, l'objet Ajax.Updater peut évaluer ce dernier. Afin que l'objet interprète la réponse comme du code JavaScript, ajoutez simplement evalScripts: true; à la liste des propriétés du dernier paramètre du constructeur de l'objet. Un avertissement toutefois : ces blocs de script ne seront pas ajoutés aux scripts de la page. Comme l'option evalScripts le suggère les scripts seront évalués. Quelle est la différence vous demandez-vous ? Imaginons que la requête exécutée renvoie quelque chose comme :

<script language="javascript" type="text/javascript">

	function disBonjour(){
		alert('Bonjour!');
	}

</script>

<input type=button value="Clique Moi" onclick="disBonjour()">

Si vous avez essayé cela auparavant, vous savez que cela ne fonctionne pas. La raison en est que le bloc de script sera évalué, et évaluer un script tel que le précédent ne créera pas de fonction nommée disBonjour. Cela ne fera rien. Pour créer cette fonction nous devons changer notre script pour créer la fonction. Voyez ci-dessous :

<script language="javascript" type="text/javascript">

	disBonjour = function(){
		alert('Bonjour!');
	};

</script>

<input type=button value="Clique Moi" onclick="disBonjour()">

Notez que dans l'exemple précédent nous n'utilisons pas le mot-clef var. Si nous l'avions utilisé, cela aurait créé un objet fonction qui aurait été local au bloc de script (dans IE tout du moins). Sans le mot-clef var, l'objet fonction est global à la fenêtre, ce que nous souhaitons.

3. Enumérer... Youhou ! Super ! Génial !

Nous sommes tous habitués aux boucles for. Vous savez, créer un tableau à la main, le remplir avec des éléments du même type, créer une boucle de contrôle (for, foreach, while, repeat, etc), accéder à chaque élément de manière séquentielle, par son index numérique, et faire quelque chose avec cet élément.

Si vous y réfléchissez bien, chaque fois que vous utilisez un tableau dans votre code, cela signifie que, tôt ou tard, vous utiliserez ce tableau dans une boucle.
Ne serait-ce pas agréable si ces tableaux offraient plus de fonctionnalités quant à ces itérations ? Oui, ce le serait, et bon nombre de langages de programmation fournissent de telles fonctionnalités pour leurs tableaux ou leurs structures équivalentes (comme les collections et les listes).

Eh bien justement prototype.js nous propose l'objet Enumerable, qui implémente pour nous une pléthore de trucs et astuces à utiliser lors des itérations sur les données.
La bibliothèque prototype.js va un peu plus loin, et étend la classe Array avec toutes les méthodes de Enumerable.

3-A. Boucles en syntaxe Ruby

Classiquement en JavaScript, si vous vouliez afficher les éléments d'un tableau de manière séquentielle, vous pouviez tout à fait écrire quelque chose comme ceci :

<script>
	function montreListe() {
		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];

		for(i=0;i<simpsons.length;i++){
			alert(simpsons[i]);
		}

	}

</script>

<input type="button" value="Montre la liste" onclick="montreListe();" >

Avec notre nouveau meilleur ami, prototype.js, nous pouvons réécrire la boucle ainsi :

function montreListe(){
	var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];

	simpsons.each(
		function(membreDeLaFamille){
			alert(membreDeLaFamille);
		}
	);

}

Vous pensez sans doute "mon dieu... quelle syntaxe étrange pour faire la même chose". Bon, dans l'exemple d'au-dessus, oui, il n'y a rien de bien extraordinaire. Après tout, il n'y a pas grand chose à modifier dans un exemple aussi trivial. Mais continuez de lire néanmoins.

Afin de continuer : vous voyez cette fonction qui est passée en argument à la méthode each ? Commençons dès maintenant à la désigner comme fonction itératrice.

3-B. Vos tableaux dopés aux stéroïdes

Comme nous l'avons mentionné auparavant, il est très courant que tous les éléments de vos tableaux soient du même type, avec les mêmes propriétés et méthodes. Voyons comment nous pouvons tirer partie des fonctions itératrices avec nos tout nouveaux tableaux.

Trouver un élément suivant un critère :

<script>
	function trouveEmployeParId(idEmploye){
		var listeBox = $('listeEmployes')
		var options = listeBox.getElementsByTagName('option');
		options = $A(options);
		var opt = options.find(
			function(employe){
				return (employe.value == idEmploye);
			}
		);
		alert(opt.innerHTML); //affiche le nom de l'employe
	}
</script>

<select id="listeEmployes" size="10" >
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>

<input type="button" value="Trouve Laura" onclick="trouveEmployeParId(8);" >

Maintenant, améliorons-le encore un peu. Voyons comment filtrer des éléments dans des tableaux, pour ne retrouver qu'un membre de chaque élément.

<script>
	function montreLiensLocaux(paragraphe){
		paragraphe = $(paragraphe);
		var liens = $A(paragraphe.getElementsByTagName('a'));
		//trouve les liens qui ne commencent pas par 'http'
		var liensLocaux = liens.findAll( function(lien){
			var debut = lien.href.substring(0,4);
			return debut !='http';
			});
		//maintenant, les textes des liens
		var textes = liensLocaux.pluck('innerHTML');
		//rassemblons les dans une seule chaîne
		var resultat = textes.inspect();
		alert(resultat);
	}
</script>

<p id="duTexte">
Ce <a href="http://unAutreSite.com/page.html">texte</a> a
<a href="#ancreLocal">beaucoup</a> de
<a href="#autreAncre">liens</a>. Certain sont
<a href="http://ouVousVoulez.com/page.html">externes</a>
et d'autre sont <a href="#uneAncre">locaux</a>
</p>
<input type=button value="Trouve les liens locaux" onclick="montreLiensLocaux('duTexte')">

Cela ne demande qu'un peu de pratique pour devenir complètement dépendant de cette syntaxe. Voyez les références des objets Enumerable et Array pour toutes les fonctions disponibles.

4. Des livres que je recommande fortement

Certains livres sont tout simplement trop bons pour ne pas passer le mot. Les livres suivants m'ont beaucoup aidé à acquérir les nouvelles compétences nécessaires pour créer des applications AJAX, et aussi consolider les compétences que je pensais déjà maîtriser. Je pense qu'un bon livre constitue un bon investissement, qui est vite rentabilisé.

converture du livre 'Javascript For Web Developers'

converture du livre 'Designing with Web Standards'

converture du livre 'Essential ASP.NET With Examples in C#'

5. Référence de prototype.js

5-A. Extensions des classes JavaScript existantes

Une des façons pour la bibliothèque prototype.js d'ajouter des fonctionnalités est d'étendre les classes JavaScript existantes.

5-A-1. Extensions pour la classe Object

méthode	type	arguments	description
extend(destination,source)	statique	destination : un objet, source: un objet	Propose une solution pour implémenter l'héritage en copiant toutes les propriétés et méthodes de source vers destination.
inspect(objetCible)	statique	objetCible : un objet	Retourne une chaîne lisible représentant objetCible. Par défaut, retourne la valeur de toString si l'objet donné n'a pas de définition d'une méthode d'instance inspect.

5-A-2. Extensions pour la classe Number

méthode	type	arguments	description
toColorPart()	instance	(aucun)	Retourne la représentation hexadécimale de ce nombre. Particulièrement utile pour convertir les composants RVB dans leur représentation HTML.
succ()	instance	(aucun)	Retourne le nombre suivant. Cette fonction est utilisée dans le cas d'une itération.
times(iterateur)	instance	iterateur: un objet fonction conforme à Function(index)	Appelle la méthode iterateur de façon répétée en lui passant l'index courant comme argument index.

démonstration de Number.times()

<script>
	function demoTimes(){
		var n = 10;
		n.times(function(index){
			alert(index);
		});
		/***************************
		 * on aurait également pu utiliser:
		 *           (10).times( .... );
		 ***************************/
	}

</script>

<input type=button value="Test Number.times()" onclick="demoTimes()">

5-A-3. Extensions pour la classe Function

méthode	type	arguments	description
bind(objet)	instance	objet: l'objet qui possède la méthode	Retourne une instance de la fonction pré-liée à l'objet propriétaire de la fonction (=méthode). La fonction retournée aura les mêmes arguments que l'originale.
bindAsEventListener(objet)	instance	objet: l'objet qui possède la méthode	Retourne une instance de la fonction pré-liée à l'objet propriétaire de la fonction (=méthode). La fonction retournée aura l'objet event courant comme argument.

Voyons une des ces extensions en action:

démonstration de Function.bindAsEventListener()

<input type='checkbox' id='maChk' value=1> Test?
<script>
	//déclaration de la classe
	var SurveillantCheckbox = Class.create();

	//définition de l'implémentation de notre classe
	SurveillantCheckbox.prototype = {

		initialise: function(chkBox, message) {
			this.chkBox = $(chkBox);
			this.message = message;

			//assignement de notre méthode à l'évenement
			this.chkBox.onclick =
	   			this.montreMessage.bindAsEventListener(this);
			},

	   	montreMessage: function(evt) {
	  		alert(this.message + ' (' + evt.type + ')');
	   }
	};

	var surveillant = new SurveillantCheckbox('maChk', 'Changement');
</script>

5-A-4. Extensions pour la classe String

méthode	type	arguments	description
stripTags()	instance	(aucun)	Retourne la chaîne de caractères avec les balises HTML ou XML supprimées.
stripScripts()	instance	(aucun)	Retourne la chaîne de caractères avec les blocs <script /> supprimés.
escapeHTML()	instance	(aucun)	Retourne la chaîne de caractères avec les caractères spéciaux HTML propres.
unescapeHTML()	instance	(aucun)	L'inverse de escapeHTML().
extractScripts()	instance	(aucun)	Retourne un objet Array contenant tous les blocs <script /> trouvés dans la chaîne de caractères.
evalScripts()	instance	(aucun)	Evalue chacun des blocs <script /> trouvés dans la chaîne de caractères.
toQueryParams()	instance	(aucun)	Sépare une chaîne d'interrogation en Array associatif, indexé par le nom du paramètre (semblable à une table de hachage).
parseQuery()	instance	(aucun)	Même chose que toQueryParams().
toArray()	instance	(aucun)	Sépare la chaîne de caractères en un Array de ses caractères.
camelize()	instance	(aucun)	Convertit une chaîne délimitée par des tirets en une chaîne en camelCase. Cette méthode est utile, par exemple, dans le cas des propriétés de style.

5-A-5. Extensions pour la classe Array

Pour commencer, Array hérite de Enumerable, si bien que toutes les méthodes pratiques, définies dans les objets Enumerable, sont disponibles. De plus, les méthodes ci-dessous sont également implémentées.

méthode	type	arguments	description
clear()	instance	(aucun)	Vide ce tableau et le retourne.
compact()	instance	(aucun)	Retourne ce tableau sans les éléments qui sont null ou undefined. Cette méthode ne modifie pas le tableau lui-même.
first()	instance	(aucun)	Retourne le premier élément du tableau.
flatten()	instance	(aucun)	Retourne une version plate, à une dimension du tableau. Cet aplatissage se fait en cherchant tous les éléments qui sont eux-mêmes des tableaux et en ajoutant leurs éléments dans le tableau final, récursivement.
indexOf(valeur)	instance	valeur : ce que vous recherchez	Retourne la position (commençant à 0) de la valeur donnée si elle est présente dans le tableau. Retourne -1 si la valeur n'est pas trouvée.
inspect()	instance	(aucun)	Surchargée pour retourner une chaîne formatée représentant le tableau et ses éléments.
last()	instance	(aucun)	Retourne le dernier élément du tableau.
reverse([aSoiMeme])	instance	aSoiMeme : indique si le tableau lui-même doit être inversé	Retourne le tableau dans l'ordre inverse. Si aucun argument n'est fourni, ou que l'argument est true, le tableau lui-même est inversé. Sinon, il reste inchangé.
shift()	instance	(aucun)	Retourne le premier élément et le supprime du tableau, réduisant la taille du tableau de 1.
without(valeur1 [, valeur2 [, .. valeurN]])	instance	valeur1 ... valeurN : les valeurs à exclure du tableau si présentes.	Retourne le tableau, à l'exception des éléments qui sont dans la liste des arguments.

5-A-6. Extensions pour l'objet DOM document

méthode	type	arguments	description
getElementsByClassName(nomClasse [, elementParent])	instance	nomClasse : nom de la classe CSS associée aux éléments, elementParent : élément ou id de l'élément contenant les éléments recherchés	Retourne tous les éléments qui sont associés au nom de classe CSS donné. Si aucun elementParent n'est don