a/X web 2 development

JavaScript est un langage de programmation orienté objet qui s'exécute coté navigateur (client).

Malgré l'apparente simplicité de sa spécification, c'est un langage très puissant. Cette puissance est encore augmentée par l'interaction entre ce langage et la spécification du DOM, qui lui permet d'accéder dynamiquement à tous les éléments qui composent une page web, et ainsi de les modifier.

JavaScript est à la base de toutes les avancées visibles dans le confort d'interaction entre l'utilisateur et une application web. Il existe plusieurs bibliothèques logicielles utilisant JavaScript pour construire des outils réutilisables.

Ce site utilise Prototype, bibliothèque de fonctions de premier niveau, et script.aculo.us, au niveau supérieur pour les effets visuels, glisser-déposer etc.

J'ai récemment adopté jQuery. On peut en voir un exemple de mise en œuvre sur le diaporama du site de l'artiste peintre Alina Cociere

Démo : vous pouvez faire glisser les paragraphes de cette page pour les réordonner.

Voir le JavaScript utilisé (on ne montre pas les sources de bibliothèques!).

La simplicité de cet exemple de code illustre bien le bénéfice de l'utilisation de ces bibliothèques, mais ne reflète pas la complexité d'une application réelle. Le code du menu « automatique » est déjà plus significatif.

Sortable.create('glissable', {tag: 'p'});
		

//at page load
Event.observe(window,'load', function () {
	$A($('menu_g').getElementsByTagName('a')).each(function (a_cour) {
		if (!Element.hasClassName(a_cour.parentNode, 'actif'))
			Event.observe(a_cour, 'mouseover', set_a_over_event);
	});
});

function set_a_over_event(ev_cour) {
	a_faire = setTimeout(function () {
		li_prec = $('menu_g').getElementsByClassName('actif')[0];
		Effect.Fade($('travail')); // , {queue: 'front'}
		Element.removeClassName(li_prec, 'actif');
		Event.observe(li_prec.firstChild, 'mouseover', set_a_over_event)
		Element.addClassName(this.parentNode, 'actif');
		setTimeout(function () {
			//here is the ajax request
			new Ajax.Updater('travail', 'ajax/' + this.href.replace(/^.*\//, ''), {evalScripts: true, onComplete: function () {
				Effect.Appear($('travail'), {queue: 'end'});
				Event.stopObserving(this, 'mouseover', set_a_over_event);
				masquer();
			}.bind(this)} );
		}.bind(this), 1000);
	}.bind(Event.element(ev_cour)), 1000);
	Event.observe(Event.element(ev_cour), 'mouseout', function (event) {
		clearTimeout(a_faire);
		});
}