A aujourd’hui, le JavaScript est incontournable. Il est devenu un langage indispensable dans le développement web. La quasi totalité des pages web contiennent maintenant du JavaScript.

Un petit rappel via Wikipedia ne fera pas de mal :

JavaScript est un langage de programmation de scripts principalement utilisé pour les pages web interactives. C’est un langage orienté objets à prototype, c’est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas instanciés au sein de classes mais qui sont chacun équipés de constructeurs permettant de générer leurs propriétés, et notamment une propriété de prototypage qui permet d’en générer des objets héritiers personnalisés.

Le langage a été créé en 1995 par Brendan Eich, qui s’est inspiré de nombreux langages, notamment de Java mais en simplifiant la syntaxe pour les débutants. Le langage actuellement à la version 1.7 est une implémentation du standard ECMA-262. La version 1.8 est en développement et intégrera des éléments du langage python. La version 2.0 du langage est prévue pour intégrer la 4e version du standard ECMA.

L’une des méthodes les plus utilisées en JavaScript est XMLHttpRequest qui permet d’effectuer des requêtes Ajax très facilement. Il est également possible, via ce langage, de gérer un grand nombre d’événements comme les éléments associés au clavier, à la souris, des événements sonores, ou bien la manipulation d’images. Des cheat sheets permettent de visualiser rapidement l’ensemble des commandes et méthodes JavaScript.

De nombreux Framework existent afin de faciliter l’utilisation de JavaScript comme

• JQuery,
• Prototype,
• Mootools,
• OpenRico.

Ces outils permettent de manipuler des objets, effectuer des requêtes Ajax, ou même ajouter des évènements très facilement sur vos pages Web. Il existe sur Internet une multitude d’exemples comme un iTunes en JQuery ou bien un Pacman via la librairie Yahoo UI.

JavaScript reste un langage de script orienté objet utilisable via des prototypes. Ce qui n’est pas le plus simple d’utilisation. Il faut produire beaucoup de code pour réaliser peu de choses.

Joose, une librairie orientée Objets…

Joose est une librairie JavaScript permettant d’utiliser et déclarer du code JavaScript plus facilement via l’utilisation de classes. Il en résulte un gain en clarté et en productivité. Prenons l’exemple de la fameuse classe Point (deux coordonnées X et Y)…

Avant Joose :

(Test == null) {
    Test = {};
}

Test.StandardPoint = function (x, y) {
    this.x = x || 0
    this.y = y || 0
}

Test.StandardPoint.prototype = {
    getX: function () {
        return this.x
    },
    setX: function (x) {
        this.x = x
    },
    getY: function () {
        return this.y
    },
    setY: function (y) {
        this.y = y;
    },
    clear: function () {
        this.setX(0)
        this.setY(0)
    }
}

Avec Joose :

Module("Test", function (m) {
    Class("Point", {
        has: {
            x: {
                is:   "rw",
                init: 0
            },
            y: {
                is:   "rw",
                init: 0
            }
        },
        methods: {
            clear: function () {
                this.setX(0);
                this.setY(0);
            }
        }
    })
})

Comme on peut le constater, le code est plus concis. Les setters/getters sont générés et masqués par la déclaration des attributs. Seule la méthode “clear” non générique reste à écrire.

JSINQ, des requêtes SQL-like simplifiées…

JSINQ est une librairie JavaScript permettant d’effectuer des requêtes tout comme en SQL sur des tableaux et des noeuds DOM. Un exemple permet de se rendre compte très rapidement de la puissance des fonctions fournies par JSINQ. Voici un exemple de requête avec JSINQ :

var query = new jsinq.Query(' \
	from name in $0 \
	where name.toLowerCase().indexOf("a") > -1 \
	orderby name descending \
	select name \
');
query.setValue(0, enumerable);
var result = query.execute();

Des requêtes Ajax mise en caches avec Prototype…

Ajax.cachedRequest : J’en avais déjà parlé succinctement il y a un an. Il s’agit d’un procéder permettant de mettre en cache le résultat de requêtes Ajax basé sur la librairie Prototype 1.6. Cette fonctions se base sur la fonction prototype “Ajax.request”. Un bout de code succins mais redoutablement efficace…

Ajax.CachedRequest = Class.create(Ajax.Request, {
  initialize: function($super, url, options) {
    options = options || {};
    var onSuccess = options.onSuccess || Prototype.K;
    if (!Ajax.CachedRequest.cache[url] || options.reload) {
      options.onSuccess = function(transport) {
        Ajax.CachedRequest.cache[url] = transport.responseText;
        onSuccess(transport);
      }
      $super(url, options);
    } else {
      eval(Ajax.CachedRequest.cache[url]);
      this.dispatch.defer();
      [onSuccess, options.onComplete].each(function(m) { m && m() });
    }
  },

  dispatch: function() {
    Ajax.Responders.dispatch('onComplete', null);
  }
});

Ajax.CachedRequest.cache = {};

A travers ses fonctions, on peut s’apercevoir que JavaScript est un langage plutôt puissant. Il permet de faire de grandes choses. Sa programmation est tout de même assez fastidieuse. La multitude de librairies JavaScript existant n’aide pas forcément. La compatibilité avec l’ensemble des navigateurs non plus. Programmer avec javascript, c’est savoir réellement ce que l’on veut et surtout connaitre la cible visée. Un programme réalisé avec une librairie spécifique sous Firefox n’est pas forcément fonctionnel sous Internet Explorer. Heureusement, il existe un certains nombre d’outils permettant de loguer et débugger les erreurs commises comme l’excellent Firebug pour Firefox.