JavaScript

Un article de Wikipédia, l'encyclopédie libre.
Aller à : navigation, rechercher
Page d'aide sur l'homonymie Ne doit pas être confondu avec Java (langage).
JavaScript
Logo.

Date de première version 1995
Auteur Brendan Eich
Développeurs Netscape Communications Corporation, Mozilla Foundation
Dernière version 1.8.5 ()[1]Voir et modifier les données sur Wikidata
Paradigme Multi-paradigme: script, orienté objet (orienté prototype), impératif, fonctionel
Typage dynamique, faible
Normes ECMA-262
ISO/CEI 16262
Dialectes JavaScript, JScript, ECMAScript
Influencé par Self, Scheme[2], Perl, C, Java, Python
A influencé JScript, JScript .NET, Objective-J, TIScript, Swift
Implémentations SpiderMonkey, Rhino, KJS, JavaScriptCore, V8
Site web Mozilla

JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs[3]. 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 créer leurs propriétés, et notamment une propriété de prototypage qui permet d’en créer des objets héritiers personnalisés. En outre, les fonctions sont des objets de première classe.

Ce langage, créé en 1995 par Brendan Eich, est actuellement à la version 1.8.2. C'est une implémentation de la troisième 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 cinquième version du standard ECMA[4].

Histoire[modifier | modifier le code]

Le langage a été créé en dix jours en mai 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[5].

LiveScript et Mosaic Communications Corporation[modifier | modifier le code]

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ù le 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[modifier | modifier le code]

En , Sun et Netscape annoncent[6] la sortie de JavaScript. En , 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 pour la sortie de son navigateur.

Netscape soumet alors JavaScript à Ecma International pour standardisation. Les travaux débutent en , et se terminent en 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[6] commun de Netscape et Sun Microsystems, daté du . 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 au début des années 2010.

Mise en œuvre[modifier | modifier le code]

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[modifier | modifier le code]

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

Hello world[modifier | modifier le code]

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[modifier | modifier le code]

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[modifier | modifier le code]

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

Version 1.6[modifier | modifier le code]

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

Liste plus complète

Version 1.7[modifier | modifier le code]

  • 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[modifier | modifier le code]

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

Liste plus complète

Version 2.0[modifier | modifier le code]

Le développement d'une version 2 de JavaScript basée sur les spécifications du langage ECMAScript Édition 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 4e édition est en effet obsolète et a été remplacée par ES5[7].

Utilisation[modifier | modifier le code]

Dans une page web[modifier | modifier le code]

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[modifier | modifier le code]

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 (typeof monObjet.methode === "function") {
  monObjet.methode();
} else if (typeof monObjet.methode2 === "function") {
  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[modifier | modifier le code]

Article détaillé : Ajax (informatique).

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 phares du mouvement Web 2.0.

JSON[modifier | modifier le code]

Article détaillé : JavaScript Object Notation.

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[8] l'intègrent respectivement dès les versions 3.5 et 8.

Autres utilisations[modifier | modifier le code]

Sur un serveur web[modifier | modifier le code]

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).

Il existe par ailleurs des projets indépendants et Open Source d'implémentation de serveurs en JavaScript. Parmi eux, on pourra distinguer Node.js, une plateforme polyvalente de développement d'applications réseau se basant sur le moteur JavaScript V8 et les spécifications CommonJS.

Autres supports[modifier | modifier le code]

ActionScript, utilisé dans Adobe Flash, 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 d'autres applications Adobe (Photoshop, Illustrator, …), ce qui permet d'avoir des scripts indépendants de la plate-forme (Microsoft Windows, Apple OSX, Linux…).

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 à la communication interne (ex. : 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 permettent 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.

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

Enfin, JavaScript est également utilisé pour dynamiser le QML de la bibliothèque graphique Qt.

Particularités du langage[modifier | modifier le code]

Portée des variables[modifier | modifier le code]

En JavaScript, la portée lexicale d'une variable n'est pas limitée au bloc où elle est déclarée comme en Java (ou dans de nombreux autres langages), mais à la fonction (ou à l'espace global) où elle est déclarée.

// 1. Déclaration dans un bloc

if (true) {          // début du bloc
    var maVariable;  // declaration de la variable
}                    // fin du bloc mais pas de la portée de la variable

alert(maVariable);   // ne soulève pas d'erreur

// 2. Déclaration dans une fonction

function maFunction() {  // début de la fonction
    var maVariable2;     // declaration de la variable
}                        // fin de la fonction et de la portée de la variable

alert(maVariable2);      // soulève une erreur (la variable est hors de sa portée)

Une variable peut être affectée où masquée par une fonction enfant de la fonction (ou de l'espace global) où elle est déclarée.

var maVariable = 0;  // définition de la variable parente

// 1. Affectation

function maFonction() {  // fonction enfant
    maVariable = 1;      // affectation de la variable parente
}

alert(maVariable);  // affiche 0
maFonction();       // affecte la variable parente
alert(maVariable);  // affiche 1

// 2. Masquage

var maVariable2 = 0;  // définition de la variable parente

function maFonction2() {  // fonction enfant
    var maVariable2;      // déclaration de la variable enfant masquant la variable parente
    maVariable2 = 1;      // affectation de la variable enfant
}

alert(maVariable2);  // affiche 0
maFonction2();
alert(maVariable2);  // affiche 0

Remontée des déclarations de variables[modifier | modifier le code]

Les déclarations (pas les initialisations) de variables sont traitées avant n'importe quelle autre partie du code. Ainsi, déclarer une variable n'importe où dans sa portée équivaut à la déclarer au début de sa portée. Cela signifie qu'une variable peut être utilisée avant d'avoir été déclarée. Ce comportement est appelé remontée de variable (variable hoisting en anglais) car cela se passe comme si la déclaration de la variable était « remontée » au début de sa portée.

maVariable = 14;
var maVariable;

// est implicitement traité comme :
// var maVariable;
// maVariable = 14;

C'est pour cette raison que, afin de mieux voir quelles variables font partie d'une fonction et lesquelles proviennent de la chaîne de portées des fonctions parentes, certains développeurs choisissent par convention de déclarer toutes les variables d'une fonction au début de celle-ci.

De plus, Javascript autorise la redéclaration de la même variable dans la même portée.

var maVariable = 2;
var maVariable = 9;

Fonctions anonymes[modifier | modifier le code]

Les fonctions anonymes sont, comme leur nom l'indique, des fonctions qui ne portent pas de nom.

setTimeout(function () {
    alert("Trois secondes se sont écoulées.");
}, 3000);

Expressions de fonctions immédiatement invoquées[modifier | modifier le code]

JavaScript ne propose pas nativement de portée des variables au niveau des blocs, ni d'espaces de noms. Pour éviter de polluer l'espace global, une méthode consiste à encapsuler son code dans une fonction pour s'appuyer sur la portée des variables qui a lieu au niveau des fonctions en JavaScript, puis à invoquer cette fonction juste après. Pour regrouper les deux étapes (définition de la fonction et invocation) et ne pas ajouter un nom de fonction supplémentaire dans l'espace global, le langage permet les expressions de fonctions immédiatement invoquées (EFII ; en anglais immediately-invoked function expressions, IIFE)[10].

Plusieurs syntaxes sont possibles pour ce type d'expression, les plus répandues étant :

  • (function (…) { … }(…)); (syntaxe recommandée par Douglas Crockford pour sa lisibilité)[11] ;
  • (function (…) { … })(…);

L'opérateur d'appel de fonction () à la fin permet l'exécution immédiate de la fonction. Les parenthèses en gras indiquent à l'analyseur syntaxique qu'elles contiennent une expression, car en JavaScript les parenthèses ne peuvent pas contenir de déclaration. Autrement, dans la plupart des situations, le mot clé fonction est traité par l'analyseur syntaxique comme une déclaration de fonction, et pas comme une expression de fonction. Il existe d'autres façons pour forcer une expression de fonction :

  • !function (…) { … }(…);
  • ~function (…) { … }(…);
  • -function (…) { … }(…);
  • +function (…) { … }(…);

Dans les contextes où une expression est attendue il n'est pas nécessaire d'utiliser les parenthèses en gras :

  • var f = function (…) { … }(…);
  • true && function (…) { … }(…);
  • 0, function (…) { … }(…);

Une utilisation importante des expressions de fonctions immédiatement invoquées est pour la création de modules. Il permettent à la fois de rassembler des propriétés et des méthodes dans un espace de nom et de rendre certains membres privés.

var compteur = (function () {
    var i = 0;  // propriété privée

    return {  // méthodes publiques
        obtenir: function () {
            alert(i);
        },
        mettre: function (valeur) {
            i = valeur;
        },
        incrementer: function () {
            alert(++i);
        }
    };
})();  // module

compteur.obtenir();      // affiche 0
compteur.mettre(6);
compteur.incrementer();  // affiche 7
compteur.incrementer();  // affiche 8
compteur.incrementer();  // affiche 9

Fermetures[modifier | modifier le code]

Les fermetures (closures en anglais) constituent une caractéristique particulièrement puissante du JavaScript mais souvent méconnue des débutants. Une fermeture est une fonction accompagnée de son environnement lexical. L'environnement lexical d'une fonction est l'ensemble des variables non locales qu'elle a capturé, soit par valeur (c'est-à-dire par copie des valeurs des variables), soit par référence (c'est-à-dire par copie des adresses mémoires des variables). JavaScript n'utilise que la capture par référence, ce qui correspond en C++11 à la syntaxe [&](…) { … };

var maVariable = 0;  // définition de la variable parente

function maFonction() {  // fonction enfant
    alert(maVariable);   // capture la variable parente par référence
}

maFonction();    // affiche 0
maVariable = 1;  // affectation de la variable parente
maFonction();    // affiche 1

Il est néanmoins possible de simuler la capture par valeur en JavaScript à partir de la capture par référence et d'une expression de fonction immédiatement invoquée. C++11 fournit la capture par valeur nativement avec la syntaxe [=](…) { … };

var maVariable = 0;

var maFonction = (function (x) {
    return function () { alert(x); }
})(maVariable);  // expression de fonction immédiatement invoquée

maFonction();  // affiche 0
maVariable = 1;
maFonction();  // affiche 0

Prototypes[modifier | modifier le code]

Les prototypes sont des objets utilisés lors d'un échec de résolution d'un nom sur un 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;    // affiche 1
monObjet.b();  // affiche "prototype"
monObjet.c;    // affiche 2
monObjet.d();  // affiche "classe"
monObjet.e;    // affiche 4

Séparation des instructions[modifier | modifier le code]

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[12].

return
    true;

Le parseur comprend cela comme deux instructions

return;
true;

Les expressions de fonctions immédiatement invoquées lorsque le programmeur s'appuie sur les fins d'instruction implicites rencontrent également ce genre de problème avec l'usage des parenthèses :

maVariable = maVariable2 + maVariable3

(function () { 
    // code
})()

est interprété par le parseur comme

maVariable = maVariable2 + maVariable3(function () { /* code */ })();

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[modifier | modifier le code]

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[modifier | modifier le code]

Voir aussi[modifier | modifier le code]

Articles connexes[modifier | modifier le code]

Liens externes[modifier | modifier le code]

Sur les autres projets Wikimedia :