création d'un site Internet
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.

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

Manipuler le DOM instinctivement

Contenu du DIV
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
Contenu du DIV 1

Contenu du DIV 2
Contenu du DIV 3
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.

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

Appeller une fonction à intervalle régulier

calque 1
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

agence creation sites  | 
agence web la rochelle  | 
creation site referencement  | 
creation sites  | 
developpeur web  | 
dictionnaire  | 
jQuery  | 
scriptaculous  | 
xhtml