Prototype.js

Demonstration

Utiliser AJAX simplement

On créé un objet Ajax, on appel l'url "flux01.php" et on affiche le flux retourné par le fichier "flux01.php" directement dans le calque.

function tester1()
{
	new Ajax.Updater($('div_1'),"flux01.php",{method: 'get'});
}

Manipuler le DOM instinctivement

function tester2()
{
	new Insertion.Top("div_2","ICI ");
}

Trouver facilement la position et les dimensions d'un élément du DOM

Un peu de texte qui décale de calque 1

function tester3()
{
	elementHTML = document.getElementById("div_3");
	alert(Position.positionedOffset(elementHTML));
	
	elementHTML = document.getElementById("div_4");
	alert(Position.positionedOffset(elementHTML));
	
	elementHTML = document.getElementById("div_5");
	alert(Position.positionedOffset(elementHTML));
}

Utiliser les gestionnaires d'évènements facilement

Appuyer sur le bouton "Tester 4" et cliquez sur le calque. A chaque fois que vous cliquez sur le bouton "Tester", vous ajoutez un gestionnaire d'évènement.

function tester4()
{
	Event.observe("div_6","click",afficherTexte);
	function afficherTexte()
	{
		alert("On a cliqué!");	
	}
}

Appeller une fonction à intervalle régulier

function tester5()
{
	function f1()
	{
		document.getElementById("div_7").innerHTML = document.getElementById("div_7").innerHTML+"Coucou";
	}
	var periode = new PeriodicalExecuter(f1,1);
}

Creer une classe

function tester6()
{
	// On déclare la classe
	var MaClasse = Class.create();
	
	// On définit les méthodes et propriétés de la classe (initialize joue le role de constructeur)
	// C'est dans le constructeur qu'on déclare les propriétés de la classe.
	MaClasse.prototype = {	
	   // constructeur
	   initialize: function(message) {
			this.message = message;
			this.longueur = 13;
			this.largeur = 50;
	   },
	   // méthode 1	
	   afficherTexte: function() {
	      alert(this.message);
	   },
	   // méthode 2
	   afficherLargeur: function() {
	      alert("La largeur est de "+this.largeur);
	   },
	   // méthode 3
	   afficherLongueur: function() {
	      alert("La longueur est de "+this.longueur);
	   },
	   // méthode 4
	   afficherPerimetre: function() {
	      alert("La périmetre est de "+(this.longueur+this.largeur)*2);
	   }
	};	
	
	// Maintenant on instancie un objet grace à notre classe
	var monObjet = new MaClasse('Cette chaine est la valeur stockée dans la propriété "message" de la classe "MaClasse"');
	
	// Puis, on utilise l'objet
	monObjet.afficherTexte(); 
	monObjet.afficherLargeur(); 
	monObjet.afficherLongueur();
	monObjet.afficherPerimetre(); 
}

Contacter le webmaster