JavaScript

Début

Le langage a été créé en dix jours, en mai 1995, pour le compte de la Netscape Communications Corporation par Brendan Eich. Il s'est inspiré de nombreux langages, notamment de Java, en simplifiant la syntaxe pour les débutants^[10]. Brendan Eich a initialement développé un langage de script côté serveur, appelé LiveScript, pour renforcer l'offre commerciale de serveur HTTP. 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. Le 4 décembre 1995 Netscape et Sun Microsystems annoncent^[11] la sortie de JavaScript, décrit comme un complément à Java, dans un communiqué de presse commun. 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 de nos jours.

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.

« JavaScript » devient une marque déposée par Sun Microsystems aux États-Unis en mai 1997^[12],[13].

Standardisation

Netscape soumet alors JavaScript à Ecma International pour standardisation.

Hello world

Il est possible dans un script en langage Javascript, d'afficher le texte hello world sur la console de debug de l’application. Ceci peut être utilisé par des développeurs en phase de mise au point^[23]. :

window.console.log('Hello world'); window.console.exp(hello world)
// ou
global.console.log('Hello world'); window.console.log(hello world)

Dans une application hôte d'un navigateur, console est une des méthodes de l'objet global window^[24]. Dans d'autres applications hôtes comme Node.js, l'objet global est global^[25]. Les méthodes de l'objet global étant accessibles sans préfixe, window et global sont facultatifs.

La syntaxe

console.log('Hello world');

aura donc exactement le même résultat en plus d'être compatible sur tous les environnements.

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 applications dynamiques, des transitions, des animations ou manipuler des données réactives, à des fins ergonomiques ou cosmétiques.

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

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

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

{
    "clef1": "valeur",
    "clef2": 12345,
    "clef3": true,
    "clef4": {
        "clef5": "valeur"
    }
}

Autres utilisations

Liaison des identifiants

En JavaScript, toutes les expressions (identifiants, littéraux et opérateurs et leurs opérandes) sont de type référence (comme en Python et Ruby, mais à la différence du C++, Java, C#, Swift et OCaml qui possèdent aussi des expressions de type valeur), c'est-à-dire que leur évaluation ne produit pas une donnée directement mais une référence vers une donnée. La référence se nomme le référent de l’expression et la donnée le référé de l’expression.

En JavaScript, l'affectation d'une variable modifie son référent, autrement dit, elle lie la variable à une autre donnée : on parle de changement de liaison de la variable (en anglais variable rebinding).

var maVariable1 = 0;           // lie `maVariable1` à une donnée de valeur 0
var maVariable2 = maVariable1; // lie `maVariable2` à la donnée liée à `maVariable1`
maVariable1++;                 // équivalent à `maVariable1 = maVariable1 + 1;`, relie `maVariable1` à une nouvelle donnée de valeur maVariable1 + 1 (affectation) juin
alert(maVariable1);            // affiche 1
alert(maVariable2);            // affiche 0

var maVariable3 = [1, 2, 3];   // lie `maVariable3` à une donnée de valeur [1, 2, 3]
var maVariable4 = maVariable3; // lie `maVariable4` à la donnée liée à `maVariable3`
maVariable3 = [4, 5, 6];       // relie `maVariable3` à une nouvelle donnée de valeur [4, 5, 6] (affectation)
alert(maVariable3);            // affiche [4, 5, 6]
alert(maVariable4);            // affiche [1, 2, 3]

var maVariable5 = [1, 2, 3];   // lie `maVariable5` à une donnée de valeur [1, 2, 3]
var maVariable6 = maVariable5; // lie `maVariable6` à la donnée liée à `maVariable5`
maVariable5.push(4);           // modifie la donnée liée à `maVariable5` et `maVariable6`
alert(maVariable5);            // affiche [1, 2, 3, 4]
alert(maVariable6);            // affiche [1, 2, 3, 4]

Portée lexicale des variables

La portée lexicale d'une variable est la partie d'un programme où la liaison entre son identifiant et sa donnée est valide. En JavaScript, la portée lexicale d'une variable peut être de deux types, selon le mot-clé utilisé pour la déclarer :

• var : au niveau de la fonction (ou de l'espace global) où elle est déclarée (comme en Python, Ruby) ;
• let ou const (introduits dans ECMAScript 6) : au niveau du bloc où elle est déclarée (comme en C++, Java, C#) — une fonction étant un bloc particulier.

Depuis le support de let par les navigateurs modernes, var ne doit plus être utilisé et son utilisation est considéré comme une mauvaise pratique^[28].

// 1. Déclaration dans un bloc

if (true) {            // début du bloc
    var maVariable1;   // déclaration de la variable
    let maVariable2;   // déclaration de la variable
    const maVariable3; // déclaration de la variable
}                      // fin du bloc mais pas de la portée de maVariable1

alert(maVariable1);    // ne soulève pas d'erreur
alert(maVariable2);    // erreur : la variable est hors de sa portée
alert(maVariable3);    // erreur : la variable est hors de sa portée

// 2. Déclaration dans une fonction

function maFunction() { // début de la fonction
    var maVariable4;    // déclaration de la variable
    let maVariable5;    // déclaration de la variable
    const maVariable6;  // déclaration de la variable
}                       // fin de la fonction et de la portée des variables

alert(maVariable4);     // erreur : la variable est hors de sa portée
alert(maVariable5);     // erreur : la variable est hors de sa portée
alert(maVariable6);     // erreur : la variable est hors de sa portée

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

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

// 1. Affectation

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

alert(maVariable1);      // affiche 0
maFonction1();           // affecte la variable parente
alert(maVariable1);      // 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

Déclaration des variables

En JavaScript, quel que soit le lieu de la déclaration d'une variable dans sa portée lexicale, la variable est créée au début de l'évaluation de sa portée lexicale.

Les variables déclarées avec le mot-clé var sont en plus pré-initialisées à la valeur undefined lors de leur création, et donc accessibles dès le début de leur portée lexicale. On parle de remontée de la 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 lexicale :

alert(maVariable); // affiche undefined
var maVariable = 0;
alert(maVariable); // affiche 0

Les variables déclarées avec le mot-clé let ou const (ECMAScript 6) ne sont pas pré-initialisées, et donc inaccessibles avant leur déclaration. Si une variable déclarée avec le mot-clé let ne possède pas d'initialiseur, elle est initialisée à la valeur undefined lors de l'évaluation de la déclaration, sinon elle est initialisée avec l'initialiseur lors de l'évaluation de la déclaration. Si une variable déclarée avec le mot-clé const ne possède pas d'initialiseur, une erreur est levée lors de l'évaluation de la déclaration, sinon elle est initialisée avec l'initialiseur lors de l'évaluation de la déclaration :

// 1. Avec initialiseur

alert(maVariable1); // erreur : accès impossible avant l'initialisation
alert(maVariable2); // erreur : accès impossible avant l'initialisation
let maVariable1 = 5;
const maVariable2 = 8;
alert(maVariable1); // affiche 5
alert(maVariable2); // affiche 8

// 2. Sans initialiseur

alert(maVariable3); // erreur : accès impossible avant l'initialisation
alert(maVariable4); // erreur : accès impossible avant l'initialisation
let maVariable3;
const maVariable4;  // erreur : initialisation manquante
alert(maVariable3); // affiche undefined
alert(maVariable4); // erreur : initialisation manquante

De plus, JavaScript autorise la redéclaration de la même variable dans sa portée lexicale, mais uniquement avec le mot-clé var :

var maVariable = 2;
var maVariable = 9;

Variables globales

En JavaScript, il existe plusieurs façons de déclarer une variable globale, et certaines interagissent avec l'objet global (nommé window dans les navigateurs) :

var maVariable1 = 0;    // propriété ou méthode de l'objet global qui ne peut pas être détruite par l'opérateur delete
let maVariable2 = 0;    // pas une propriété ou méthode de l'objet global
const maVariable3 = 0;  // pas une propriété ou méthode de l'objet global
maVariable4 = 0;        // propriété ou méthode de l'objet global qui peut être détruite par l'opérateur delete
window.maVariable5 = 0; // propriété ou méthode de l'objet global qui peut être détruite par l'opérateur delete
this.maVariable6 = 0;   // propriété ou méthode de l'objet global qui peut être détruite par l'opérateur delete

Une variable initialisée sans déclaration est traitée comme une variable globale :

function maFonction() {
    maVariable = 5;
}

maFonction();
alert(maVariable); // affiche 5

Fonctions anonymes

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

Celle-ci est donnée en paramètre à la fonction setTimeout, qui permet de définir une durée avant d'afficher le message.

Fermetures lexicales

Un environnement lexical est l'ensemble des variables valides dans une partie du programme. Il est composé de l'environnement lexical interne (les variables locales) et d'une référence à l'environnement lexical externe (les variables non locales).

Une fermeture lexicale (lexical closure en anglais) est une fonction accompagnée de son environnement lexical externe, c'est-à-dire de l'ensemble des variables non locales qu'elle a capturé, soit par valeur (conservation d'une copie de chaque donnée liée aux variables non locales), soit par référence (conservation d'une référence à chaque donnée liée aux variables non locales). Comme en JavaScript toutes les variables sont de type référence (cf. la section Liaison des identifiants), JavaScript n'utilise que la capture par référence — ce qui correspond en C++ 11 à la syntaxe [&](…) { … }; —, et la durée de vie des variables non locales capturées par une fonction est étendue à la durée de vie de la fonction — ce qui n'est pas le cas en C++ 11, quel que soit le type de capture :

function maFonction() {
    var maVariable = 4; // variable parente

    return function () {
        alert(maVariable);
    }
}

var maFermeture = maFonction(); // capture de la variable parente par référence
maFermeture();                  // affiche 4

Expressions de fonctions immédiatement invoquées

Jusqu'à ECMAScript 6, JavaScript ne proposait pas nativement de portée des variables au niveau des blocs (pas de mots-clé let ou const), ni de modules. Pour éviter de polluer l'espace global, une méthode consistait à 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)^[29].

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

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

L'opérateur d'invocation 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é function est traité 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 maVariable = function (…) { … }(…);
• true && function (…) { … }(…);
• 0, function (…) { … }(…);

Une utilisation importante des expressions de fonctions immédiatement invoquées est pour la création de modules. Les modules 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

Prototypes

Les prototypes sont des objets utilisés lors d'un échec de résolution de nom. Ce mécanisme est un type d'héritage : l'héritage par prototype. En JavaScript, tout objet possède un prototype, accessible via la méthode Object.getPrototypeOf (ou via la propriété historique __proto__ standardisée dans ECMAScript 6 pour assurer la compatibilité entre les navigateurs mais non recommandée). De plus, l'opérateur new permet de transformer l'invocation d'une fonction constructeur en un objet (instanciation) dont le prototype est égal à la propriété prototype de la fonction constructeur :

function MonConstructeur() {
    this.maPropriete1 = 3;
}

const monInstance = new MonConstructeur();
alert(monInstance.maPropriete1);                                         // affiche 3
alert(Object.getPrototypeOf(monInstance) === MonConstructeur.prototype); // affiche true
MonConstructeur.prototype.maPropriete2 = 5;
alert(monInstance.maPropriete2);                                         // affiche 5

Toute instance de MonConstructeur (monInstance ici) possède un prototype égal à MonConstructeur.prototype. Lors de l'utilisation d'une propriété ou d'une méthode d'une instance de MonConstructeur (monInstance.maPropriete1 et monInstance.maPropriete2 ici), si l'instance ne possède pas la propriété ou la méthode recherchée, la recherche se poursuit dans le prototype de l'instance (MonConstructeur.prototype ici). Si la recherche échoue aussi avec cet objet, la recherche se poursuit dans le prototype de cet objet, et ainsi de suite jusqu'à arriver à la première fonction constructeur. Si la recherche échoue encore, cette première fonction constructeur étant une fonction donc une instance de la fonction constructeur Function du langage, la recherche se poursuit dans son prototype qui est égal à Function.prototype. Si la recherche échoue à nouveau, Function.prototype étant un objet donc une instance de la fonction constructeur Object du langage, la recherche se poursuit dans son prototype qui est égal à Object.prototype. Si la recherche échoue cette fois, comme le prototype de Object.prototype est égal à null, la recherche s'arrête et JavaScript génère une erreur de résolution de nom. Ce mécanisme de recherche parcourt ce qu'on appelle la chaîne de prototypes.

Le code de l'opérateur instanceOf illustre bien ce mécanisme. A instanceOf B (ou de manière équivalente : instanceOf.call(A, B)) renvoie true si A est une instance de B, c'est-à-dire si B.prototype est trouvé dans le chaîne de prototypes de A, et false sinon :

function instanceOf(f) {
    let o = this;

    while (o !== null) {
        o = Object.getPrototypeOf(o);

        if (o === f.prototype) {
            return true;
        }
    }

    return false;
}

Par ailleurs, la méthode Object.create introduite dans ECMAScript 5 permet d'éviter d'utiliser directement les fonctions constructeurs, leurs propriétés prototype et l'opérateur new, pour ne travailler qu'avec des objets. L'utilisation de cette méthode simplifie grandement la complexité du code et est donc recommandée. La méthode Object.create est définie par

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

L'exemple précédent peut alors être réécrit

const MonObjet = {
    function initialiser() {
        this.maPropriete1 = 3;
    }
}

const monInstance = Object.create(MonObjet);
monInstance.initialiser();
alert(monInstance.maPropriete1); // affiche 3
MonObjet.maPropriete2 = 5;
alert(monInstance.maPropriete2); // affiche 5

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^[31] :

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 :

maVariable1 = maVariable2 + maVariable3

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

est traité comme

maVariable1 = 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.

Articles connexes

• Syntaxe JavaScript
• Moteur JavaScript
• Spécification de JavaScript
• Sécurité du navigateur (en)
• jQuery
• DataTables
• TypeScript

Liens externes

• (en) Standard ECMA-262, ECMAScript 2016 Language Specification
• Mozilla Developer Center - JavaScript
• (en) Microsoft MSDN - JScript
• (en) Exemples d'utilisation avancée du langage JavaScript
• Open Directory - JavaScript
• JavaScript éloquent, Une introduction au langage de programmation JavaScript et à la programmation en général.
• (en) JSFiddle pour tester vos codes
• JavaScript obfuscator
• Javascript Deobfuscator

Notes et références

v · m JavaScript
Analyse statique de programmes	ESLint JSHint JSLint
Compilateur source à source	Babel.js CoffeeScript Dart Emscripten Google Closure Compiler Google Web Toolkit Morfik TypeScript AtScript Opa Nim Haxe Clojure WebSharper
Concepts	Ajax Client-side HTML dynamique Framework JavaScript Syntaxe JavaScript Javascript discret
Débogueur	Firebug Komodo IDE Microsoft Script Debugger Microsoft Script Editor Opera Dragonfly Venkman Web Inspector
Générateur de documentation	JSDoc
Éditeurs (comparaison (en))	Ace Cloud9 IDE Atom CodeMirror Light Table Brackets Koding Orion PhpStorm Visual Studio Visual Studio Express Visual Studio Code Visual Studio Team Services
Moteur	Moteur JavaScript
Framework	Comparaison des frameworks JavaScript
Technologie associée	Feuilles de style en cascade Document Object Model HTML JSON WebAssembly
Gestionnaire de paquets	npm NuGet Yarn
Côté serveur	Active Server Pages Bun CommonJS JSGI Node.js Deno Wakanda
Test unitaire	Jasmine Mocha QUnit
Personnalité	Douglas Crockford Brendan Eich John Resig

v · m Langages de programmation
Concurrents	Ada Erlang Go Modula-2
Déclaratifs	Clips Prolog Mercury
Fonctionnels	Clojure Common Lisp Erlang F# Gallina Haskell Lisp ML OCaml Opa Scheme Standard ML
Impératifs	Algol APL Assembleur Basic BCPL C Cobol DOPE Forth Fortran Julia Limbo Lua Modula-2 MUMPS Natural NQC NXC OPL Pascal Perl PL/I RPG PowerShell Rust Tcl WLangage
Orientés objet	ActionScript AppleScript C++ Common Lisp C# CoffeeScript D Delphi Eiffel Groovy Haxe Java JavaScript Lisaac Logo Objective-C PHP Python Ruby Scala Scratch Simula Smalltalk Swift Kotlin Visual Basic
Liste de langages de programmation

v · m Accessibilité du web
Acteurs internationaux	Web Accessibility Initiative (W3C)
Standards	WCAG ATAG UAAG ARIA
Acteurs nationaux	WebAIM RNIB Accessiweb
Technologies compatibles	HTML XHTML HTML5 CSS JavaScript SMIL PDF Flash
Méthodes d'application	Section 508 RGAA Accessiweb Renow

• Portail de la programmation informatique