JavaScript

 Ne doit pas être confondu avec Java (langage).

JavaScript
Apparu en	1995
Auteur	Brendan Eich
Développeurs	Netscape Communications Corporation, Mozilla Foundation
Dernière version	[+/−]
Paradigme	Multi-paradigme
Typage	dynamique, faible
Normes	ECMA-262 ISO/IEC 16262
Dialectes	JavaScript, JScript, ECMAScript
Influencé par	Self, Perl, C, Java, Python
A influencé	JScript, JScript .NET, Objective-J, TIScript
Implémentations	SpiderMonkey, Rhino, KJS, JavaScriptCore, V8
Site web	Mozilla

JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi côté serveur^[1]. C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances 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 pour le compte de Netscape Communications Corporation. Le langage, actuellement à la version 1.8.2 est une implémentation de la 3^e version de la norme ECMA-262 qui intègre également des éléments inspirés du langage Python. La version 1.8.5 du langage est prévue pour intégrer la 5^e version du standard ECMA^[2].

Histoire

Le langage a été créé en 1995 par Brendan Eich pour le compte de la Netscape Communications Corporation, qui s'est inspiré de nombreux langages, notamment de Java mais en simplifiant la syntaxe pour les débutants^[3].

LiveScript et Mosaic Communications Corporation

Brendan Eich a initialement développé un langage de script côté serveur, appelé LiveScript, pour renforcer l'offre commerciale de serveur HTTP de Mosaic Communications Corporation. La sortie de LiveScript intervient à l'époque où la NCSA force Mosaic Communications Corporation à changer de nom pour devenir Netscape Communications Corporation.

Netscape travaille alors au développement d'une version orientée client de LiveScript. Quelques jours avant sa sortie, Netscape change le nom de LiveScript pour JavaScript. Sun Microsystems et Netscape étaient partenaires, et la machine virtuelle Java de plus en plus populaire. Ce changement de nom servait les intérêts des deux sociétés.

Netscape et ECMAScript

En décembre 1995, Sun et Netscape annoncent^[4] la sortie de JavaScript. En mars 1996, Netscape met en œuvre le moteur JavaScript dans son navigateur Web Netscape Navigator 2.0. Le succès de ce navigateur contribue à l'adoption rapide de JavaScript dans le développement web orienté client. Microsoft réagit alors en développant JScript, qu'il inclut ensuite dans Internet Explorer 3.0 en août 1996 pour la sortie de son navigateur.

Netscape soumet alors JavaScript à Ecma International pour standardisation. Les travaux débutent en novembre 1996, et se terminent en juin 1997 par l'adoption du nouveau standard ECMAScript. Les spécifications sont rédigées dans le document Standard ECMA-262.

JavaScript est décrit comme un complément à Java dans un communiqué de presse^[4] commun de Netscape et Sun Microsystems, daté du 4 décembre 1995. Cette initiative a contribué à créer auprès du public une certaine confusion entre les deux langages, proches syntaxiquement mais pas du tout dans leurs concepts fondamentaux, et qui perdure encore aujourd'hui.

Mise en œuvre

La troisième édition d'ECMAScript, parue en 1999 correspond à la version 1.5 de JavaScript. Sa mise en œuvre par Microsoft est JScript. Adobe pour sa part, met en œuvre ces spécifications dans son langage ActionScript.

SpiderMonkey est le nom de la mise en œuvre en langage C, sous la licence « MPL/GPL/LGPL tri-license », du langage JavaScript utilisé dans Gecko, le moteur de rendu développé par Mozilla.

Concepts

Le propos de JavaScript est de manipuler de façon simple des objets, au sens informatique, fournis par une application hôte.

Hello world

Voici l'exemple classique du "Hello world" en JavaScript, lorsque l'application hôte est un navigateur Web.

alert("Hello world");

Dans l'application hôte, alert est une méthode de la classe DOM window, mais celle-ci étant récurrente, c'est une des seules classes dont on ne doit pas forcément préciser le nom pour utiliser ses méthodes.

La syntaxe

window.alert("Hello world");

aura donc exactement le même résultat.

Versions du langage

Les versions récentes du langage JavaScript ont pour origine les spécifications de la norme ECMA-262 définissant ECMAScript. JavaScript est un sur-ensemble d'ECMAScript développé par la fondation Mozilla et par Adobe lui ajoutant les fonctionnalités suivantes :

Version 1.5

Interpréteur basé sur les spécifications ECMA-262 3^e édition.

Version 1.6

• E4X
• extension de l'objet Array
• rapprochement des objets String et Array

Liste plus complète

Version 1.7

• générateurs (instruction yield)
• itérateurs
• définition de tableaux par compréhension (var evens = [i for (i in range(0, 21)) if (i% 2 == 0)];)
• définition de portée locale (instruction let)
• assignation déstructurante (renvoi de valeurs multiples : [a,b] = maFonction())

Liste plus complète

Version 1.8

• extension des fermetures d'expressions
• extension des expressions génératrices
• plus d'extras pour les tableaux

Liste plus complète

Version 2.0

Le développement d'une version 2 de JavaScript basée sur les spécifications du langage ECMAScript Edition 4 en collaboration avec Adobe, le projet Tamarin, a aujourd'hui été abandonné. La norme un temps rédigée par l'ECMA dans le document ECMA-262 4^e édition est en effet obsolète et a été remplacée par ES5^[5].

Utilisation

Dans une page Web

Du code JavaScript peut être intégré directement au sein des pages Web, pour y être exécuté sur le poste client. C'est alors le navigateur Web qui prend en charge l'exécution de ces programmes appelés scripts.

Généralement, JavaScript sert à contrôler les données saisies dans des formulaires HTML, ou à interagir avec le document HTML via l'interface Document Object Model, fournie par le navigateur (on parle alors parfois de HTML dynamique ou DHTML). Il est aussi utilisé pour réaliser des services dynamiques, parfois futiles, strictement cosmétiques ou à des fins ergonomiques.

JavaScript n'est pas limité à la manipulation de documents HTML et peut aussi servir à manipuler des documents SVG, XUL et autres dialectes XML .

Incompatibilités

Netscape et Microsoft (avec JScript dans Internet Explorer) ont développé leur propre variante de ce langage qui chacune supporte presque intégralement la norme ECMAScript mais possède des fonctionnalités supplémentaires et incompatibles, rarement utilisées dans le cadre de la programmation de pages web. Pourtant les scripts JavaScript sont souvent la source de difficultés. Elles sont plus souvent dues à la prise en charge des différentes versions des modèles d'objets (DOM) fournis par les navigateurs, qu'à des problèmes de portabilité du langage (les différentes mises en œuvre respectant relativement bien la norme ECMAScript).

Face à ce problème on utilise souvent une construction du type :

if (monObjet.methode) { 
  monObjet.methode();
}

Il est toutefois préférable d'utiliser une comparaison sur le type :

if (typeof monObjet.methode !== 'undefined') {
  monObjet.methode();
}

Ou mieux encore :

if (typeof monObjet.methode === 'function') {
  monObjet.methode();
}

On vérifie ainsi que monObjet a bien une mise en œuvre de methode que l'on peut alors utiliser. Le plus souvent, si un navigateur ne gère pas la methode de monObjet, il gère une méthode comparable methode2, et on peut alors adapter le code JavaScript au navigateur qui l'exécute :

if (monObjet.methode) {
  monObjet.methode();
}
else if (monObjet.methode2) {
  monObjet.methode2();
}

Une autre méthode consiste à vérifier, côté serveur, le navigateur utilisé par le client et d'envoyer le code correspondant. Cela n'est toutefois pas recommandable, car il est largement préférable de tester directement l'existence, le comportement d'une fonction, d'une propriété, etc. plutôt que de faire des présomptions basées sur la détection du navigateur.

Ajax

JavaScript est utilisé dans la méthode Ajax (de l'anglais Asynchronous Javascript And XML) qui sert à modifier le contenu des pages web par programmation. Suite à des manipulations de l'utilisateur, des scripts en langage JavaScript vont envoyer des demandes au serveur Web en utilisant l'objet XMLHTTPRequest. Puis des scripts vont modifier le contenu de la page web en fonction de la réponse reçue; la réponse est en format XML et le script manipule l'ensemble d'objets DOM qui représente le contenu de la page. Les technologies XMLHTTPRequest, XML et DOM ont été ajoutées aux navigateurs web entre 1995 et 2005. La méthode Ajax permet de réaliser des applications Internet riches, offrant une maniabilité et un confort supérieur; c'est un des sujets phare du mouvement Web 2.0.

JSON

JSON (JavaScript Object Notation) est un format utilisant la notation des objets JavaScript pour transmettre de l'information structurée, d'une façon plus compacte et plus proche des langages de programmation, que XML.

Malgré l'existence du DOM et l'introduction récente de E4X (voir ci-dessous) dans la spécification du langage JavaScript, JSON reste le moyen le plus simple d'accéder à des données, puisque chaque flux JSON n'est rien d'autre qu'un objet JavaScript sérialisé. De plus, malgré son lien historique (et technique) avec JavaScript, JSON reste un format de données structurées, et peut être utilisé facilement par tous les langages de programmation.

Depuis 2009, les navigateurs commencent à intégrer un support natif du format JSON, ce qui facilite sa manipulation, la sécurité (contre l'évaluation de scripts malveillants inclus dans une chaine JSON), et la rapidité de traitement. Ainsi les navigateurs Firefox et IE^[6] l'intègrent respectivement dès les versions 3.5 et 8.

Autres utilisations

Sur un serveur web

JavaScript peut également être utilisé comme langage de programmation sur un serveur HTTP à l'image des langages comme PHP, ASP, etc. D'ailleurs le projet CommonJS travaille dans le but de spécifier un écosystème pour JavaScript en dehors du navigateur (par exemple sur le serveur ou pour les applications de bureau natives). Le projet a été lancé par Kevin Dangoor en janvier 2009. Le projet CommonJS n'est pas affilié avec le groupe de l'Ecma International TC39 travaillant sur ECMAScript, mais certains membres du TC39 participent au projet.

Historiquement, JavaScript était proposé sur les serveurs de Netscape, par la suite distribués par Sun Microsystems sous les noms iPlanet et Sun ONE, mais JScript peut aussi être utilisé sur les serveurs Internet Information Services de Microsoft. JScript peut d'ailleurs servir pour scripter une plate-forme Microsoft Windows via Windows Scripting Host (WSH).

Autres supports

On peut encore citer ActionScript, utilisé dans Macromedia Flash qui est aussi une mise en œuvre d'ECMAScript. Il permet de manipuler tous les éléments de l'animation, considérés comme des objets. JavaScript peut être utilisé pour scripter les applications Adobe (Photoshop, Illustrator...), ce qui permet d'avoir des scripts indépendants de la plate-forme (Mac/Windows).

JavaScript est enfin utilisé dans la plate-forme de développement Mozilla, sur laquelle sont basés plusieurs logiciels comme des navigateurs Web, pour des tâches relatives à l'interface utilisateur et de communication interne (exemple : les extensions de Firefox et Thunderbird sont installées à base de fichiers XPI utilisant le JavaScript. Voir aussi Prefs.js).

Depuis 2004, l'objet "js" de l'environnement de programmation graphique Max/MSP, permet d'ouvrir une fenêtre pour programmer en JavaScript, au sein même d'un programme Max/MSP.

Les logiciels ImageJ et CaRMetal sont munis de consoles JavaScript, qui leur permet d'écrire des scripts dans un contexte graphique. Et Algobox utilise JavaScript pour la syntaxe de ses fonctions.

JavaScript est aussi utilisé dans un contenu BIFS pour l'exploitation des événements. Pour cela la spécification BIFS fournit un nœud Script pour incorporer de l'ECMAScript.

La suite bureautique OpenOffice.org permet d'utiliser JavaScript comme langage de macros (Linux/Mac/Solaris/Windows).

JavaScript est aussi utilisable en shell^[7] ou avec les gadgets Vista.

Particularités du langage

Portée des variables

En Javascript il n'existe pas de portée lexicale de type bloc comme en Java (ou dans de nombreux autres langages). La portée des variables est au niveau de la fonction où elles sont déclarées, c'est-à-dire que toute variable déclarée dans le corps d'une fonction y est utilisable, peu importe où se situe sa déclaration :

function test() {
    i = 1; // cette affectation affectera la variable locale i (qui est déclarée plus loin)
    {
        for(var j = i; j > 0; j--) { // déclaration de la variable locale j
            var k = j*2; // déclaration de la variable locale k
            l = 42; // aucune variable locale ne s'appelant l, c'est la propriété l du Global Object qui va être changée
        }
        var i; // déclaration de la variable locale i
    }
    return [i, j, k]; // toutes les variables déclarées dans la fonction sont utilisables ici (même en dehors de leur bloc)
}

Toute variable déclarée n'importe où dans le corps de la fonction étant déclarée dans toute la fonction, certains développeurs choisissent par convention de toutes les déclarer au début de celle-ci (comme en ANSI C). Le code source précédent est donc équivalent à celui-ci :

function test() {
    var i = 1, j, k; // déclaration (et affectation éventuelle) de toutes les variables
    for(j = i; j > 0; j--) {
        k = j*2;
        l = 42;
    }
    return [i, j, k];
}

La portée lexicale d'une variable locale à une fonction A s'étend aux déclarations de fonctions faites à l'intérieur de A, et ainsi de suite. L'inverse n'est pas vrai :

function A() {
    var p = 2; // déclaration d'une variable p locale à A
    function B(p) { // le paramètre p se comporte en portée comme une variable locale à B, qui masque la variable p de A.
        var j = p; // déclaration de la variable j locale à B
        return j - i; // B à accès à la variable i déclarée dans A
    }
    var i = 5; // déclaration (et affectation) de i
    alert( B(p*3) ); // appelle B(2*3) car p fait ici référence à la variable locale à A ; affichera 1 (2*3 - 5)
    return j; // cette ligne provoquera une ReferenceError: A n'a pas accès à la variable j locale à B
}

C'est ce qu'on appelle la chaîne de portée (scope chain). Lorsque l'on fait référence à une variable, celle-ci est d'abord cherchée dans la fonction courante. Si elle n'y est pas, elle est cherchée dans la fonction ayant déclaré la fonction courante, et ainsi de suite jusqu'à la portée globale (global scope). Si elle reste introuvable, une exception de type ReferenceError est levée.

Fonctions anonymes

Une fonction anonyme est, comme son nom l'indique, une fonction qui n'a pas de nom.

//Exemple 1
 
var maFonction = function(message) {
  alert(message);
};
 
// affiche: ceci est un test
maFonction('ceci est un test');

<!-- Exemple 2 -->
<html>
  <body onload="setTimeout( function() { 
    alert( 'chargement de la page terminé il y a une seconde et demie' ) 
    }, 1500 );">
  </body>
</html>

Fermetures

Les fermetures, plus couramment désignées par leur dénomination anglaise « closures », constituent une caractéristique particulièrement puissante du langage mais souvent méconnue des débutants. Il s'agit de la possibilité, pour une expression, d'accéder à des variables qui ne sont plus à sa portée.

//Exemple de fermeture
 
function ajouteur(nombre) {
  function ajoute(valeur) {
    return valeur + nombre;
  }
  return ajoute;
}
 
var ajoute10 = ajouteur(10);
ajoute10(1); // retourne 11

Dans l'exemple ci-dessus, la fonction interne ajoute10 a toujours accès au paramètre effectif nombre malgré le fait que l'appel à la fonction ajouteur soit terminé.

Prototypes

Un prototype est un objet JavaScript qui est utilisé lors d'un échec de résolution d'un nom sur son objet parent. Ce mécanisme est un type d'héritage : l'héritage par prototype.

 function MonPrototype() {
   this.a = 1;
   this.b = function() {
     return 'prototype';
   };
   this.e = 3;
 }
 function MaClasse() {
   this.c = 2;
   this.d = function() {
     return 'classe';
   };
 
this.e = 4;
 }
 
 MaClasse.prototype = new MonPrototype();
 
 monObjet = new MaClasse();
 
 monObjet.a;   // 1
 monObjet.b(); // 'prototype'
 monObjet.c;   // 2
 monObjet.d(); // 'classe'
 monObjet.e;   // 4

Séparation des instructions

En C, chaque instruction se termine par un point-virgule. Cette pratique a fait du point-virgule une obligation dans de nombreux langages inspirés de la syntaxe du C.

JavaScript est plus souple, permettant à une fin de ligne de marquer implicitement la fin d'une instruction. Le but est de faciliter l'usage du langage aux personnes inexpérimentées en programmation informatique. Mais cette souplesse introduit des effets inattendus^[8] :

 return
   true;

Le parseur JavaScript comprend cela comme deux instructions :

 return;
 true;

alors que le programmeur pensait plus probablement à la seule instruction :

 return true;

Les ouvrages de programmation avancés en JavaScript mettent en garde contre les effets inattendus de la déduction automatique de fin d'instruction et conseillent d'écrire un point-virgule à la fin de chaque instruction, ce qui n'empêche pas les surprises lorsqu'on oublie le point-virgule, d'autant plus quand la compression du code impose le retrait des retours chariot.

E4X

Les versions récentes de la mise en œuvre du langage JavaScript de SpiderMonkey supportent l'E4X. Il s'agit d'un support natif de XML ainsi que d'un support natif d'une syntaxe d'accès aux données XML (sorte de XPath)

Exemple :

var xml = <menu id="file" value="File">
  <popup>
    <menuitem value="New" onclick="CreateNewDoc()" />
    <menuitem value="Open" onclick="OpenDoc()" />
    <menuitem value="Close" onclick="CloseDoc()" />
  </popup>
</menu>

Exemple d'accès aux données :

xml.popup.menuitem.(@value == 'New').@onclick  

L'exemple ci-dessus récupère la fonction correspondant à l'action "New". Le résultat de l'évaluation est "CreateNewDoc()".

Autre exemple :

var item = 2;
xml.popup.menuitem[item].@value

Le résultat de l'évaluation est "Close".

Notes et références

Voir aussi

Articles connexes

• Syntaxe JavaScript
• ECMAScript pour XML
• Asynchronous JavaScript and XML
• JSAN

Liens externes

• Mozilla Developer Center — JavaScript
• Outil pour voir les codes JavaScript des pages Web visitées
• ECMAScript programming langage édition 5.1 (juin 2011) (en)
• Open Directory — JavaScript
• (en) Microsoft MSDN - JScript
• (en) Exemples d'utilisation avancée du langage JavaScript

• Portail de la programmation informatique