JavaScript

Un article de Wikipédia, l'encyclopédie libre.

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 est 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^[1]. 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 4eme version du standard ECMA.

[modifier] Histoire

JavaScript a été créé par Brendan Eich pour le compte de la Netscape Communications Corporation. JavaScript s'appelait à l'origine LiveScript.

[modifier] LiveScript et Mosaic Communications Corporation

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

Netscape travailla alors au développement d'une version orientée client de LiveScript. Quelques jours avant sa sortie, Netscape changea le nom de LiveScript pour JavaScript. Sun 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, et Sun promit de ne pas poursuivre Netscape.

[modifier] Netscape et ECMAScript

En décembre 1995, Sun et Netscape annoncent^[2] 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 à l'ECMA 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.

[modifier] Concepts

JavaScript est décrit comme un complément à Java dans un communiqué de presse^[2] 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.

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

[modifier] Le standard ECMAScript

JavaScript met en œuvre les spécifications du langage ECMAScript, un standard rédigé par l'ECMA dans le document ECMA-262.

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

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

[modifier] Versions

Les versions du langage JavaScript ont pour origine les spécifications de la norme ECMA-262 définissant ECMAScript. JavaScript est un sur-ensemble d'ECMAScript, plus les fonctionnalités suivantes :

[modifier] 1.5

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

[modifier] 1.6

Toutes les fonctionnalités de la version 1.5 plus:

• E4X
• Extension de l'objet Array
• Rapprochement des objets String et Array

pour en savoir plus (en)

[modifier] 1.7

Toutes les fonctionnalités de la version 1.6 plus:

• 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())

pour en savoir (en)

[modifier] 1.8

Toutes les fonctionnalités de la version 1.7 plus:

• Extension des Fermetures d'expressions
• Extension des Expressions génératrices
• Plus d'extras pour les tableaux

pour en savoir (en)

[modifier] 2.0

Interpréteur basé sur les spécifications du langage ECMAScript Edition 4, un standard rédigé par l'ECMA dans le document ECMA-262 4^e édition.

• Mise en œuvre des spécifications ES4 en collaboration avec Adobe: projet Tamarin.

[modifier] Utilisation

[modifier] 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 petits bouts de 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 DOM, fournie par le navigateur (on parle alors parfois d'HTML dynamique). Il est aussi utilisé pour réaliser des services dynamiques, parfois futiles ou strictement cosmétiques.

Une autre façon méconnue d'utiliser JavaScript est SVG et XUL et autre dialecte XML .

[modifier] 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. Le plus souvent, elles sont dues non à des problèmes de portabilité du langage, les différentes mises en œuvre respectant assez bien la norme ECMAScript, mais au support des différentes versions des modèles d'objets (DOM) fournis par les navigateurs.

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 à verifier, coté serveur, le navigateur utilisé par le client et d'envoyer le code correspondant.

[modifier] AJAX

JavaScript est actuellement (novembre 2005) un des composants essentiels de la « technologie » AJAX (Asynchronous Javascript And XML). La plupart des applications AJAX utilisent l'objet XMLHTTPRequest (XHR) pour envoyer une requête à un script serveur, et parser dynamiquement les résultats de ce dernier via DOM. Internet Explorer est le premier à proposer ce composant, sous forme d'un ActiveX, et ce dès la fin des années 90. Ce n'est qu'en 2002 que les développeurs commencent massivement à l'utiliser. Les versions d'Internet Explorer antérieures à la 7 ne géraient pas l'objet XHR tel que décrit dans les standards du W3C mais proposaient un contrôle ActiveX équivalent (à partir de la version 5), ce qui impose des fourches dans le code, tel que montré ci-dessus.

AJAX est une des technologies phares du mouvement web 2.0 qui définit les interfaces riches permettant à l'internaute une plus grande interactivité avec la page web.

[modifier] JSON

JSON (JavaScript Object Notation) est un format utilisant la notation des objets JavaScript pour transmettre de l'information structurée, dans une notation similaire, mais plus compacte et plus proche des langages de programmation, que l'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.

Toutes ces raisons sont probablement la cause de l'existence de l'acronyme AJAJ, en marge d'AJAX, où le format JSON est utilisé à la place du format XML, pour des résultats identiques.

[modifier] Événements

Javascript permet de contrôler les événements se produisant dans le contexte d'un document. Ces événements sont :

[modifier] Événements page et fenêtre

• onabort - s'il y a une interruption dans le chargement
• onerror - en cas d'erreur pendant le chargement de la page
• onload - après la fin du chargement de la page
• onbeforeunload - se produit juste avant de décharger la page en cours (par changement de page, en quittant)
• onunload - se produit lors du déchargement de la page (par changement de page, en quittant)
• onresize - quand on redimensionne la fenetre

[modifier] Événements souris

• onclick - sur un simple clic
• ondblclick - sur un double clic
• onmousedown - lorsque que l'on enfonce le bouton de la souris, sans forcément le relâcher
• onmousemove - lorsque l'on déplace la souris
• onmouseout - lorsque la souris sort de l'élément
• onmouseover - lorsque la souris est sur l'élément
• onmouseup - lorsque l'on relâche le bouton de la souris

[modifier] Événements clavier

• onkeydown - lorsque l'on appuie sur une touche (avant les fonctions navigateurs tab, F5, etc...)
• onkeypress - lorsque l'on appuie sur une touche (après les fonctions navigateurs tab, F5, etc...)
• onkeyup - lorsque l'on relâche une touche

[modifier] Événements formulaire

• onblur - à la perte du focus
• onchange - a la perte du focus si la valeur a changée
• onfocus - l'élément prend le focus (ou devient actif)
• onreset - lors de la remise à zéro du formulaire (via bouton reset ou fonction reset())
• onselect - quand on sélectionne du texte
• onsubmit - quand on valide un formulaire (via bouton bouton type submit ou fonction submit())

[modifier] Événements serveur

Le WHATWG travaille actuellement sur une technologie permettant d'associer des gestionnaires d'événements avec des événements initiés par le serveur. Ceux-ci permettent, de manière "propre", de concevoir des applications client-serveur, et de modifier le contenu d'une page non plus en fonction des actions de l'utilisateur mais d'événements gérés par le serveur. Le premier navigateur mettant en œuvre cette possibilité est Opera (version 9), ainsi qu'annoncé dans Event Streaming to web Browsers.

[modifier] Autres utilisations

JavaScript peut également être utilisé comme langage de programmation sur un serveur HTTP. Initialement, il é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 IIS de Microsoft. JScript peut d'ailleurs servir pour scripter une plate-forme Microsoft Windows via WSH.

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

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

Javascript peut être utilisé pour scripter les applications Adobe (Photoshop, Illustrator...) ce qui permet d'avoir des scripts indépendant de la plate-forme (Mac/Windows).

Il faut savoir aussi que JavaScript est aussi utilisable en shell. voir l'article ^[3].

[modifier] Particularités du langage

[modifier] Fonctions anonymes

Une fonction anonyme est, comme son nom l'indique, une fonction qui n'est pas identifiée par un 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 demi' ) 
    }, 1500 );">
  </body>
</html>

[modifier] Closures

Les closure(en) (fermeture(fr)) sont une caractéristique aussi puissante que méconnue du langage ECMAScript. Il s'agit de la possibilité, pour une expression, d'accéder à des variables qui ne sont plus à sa portée.

Exemple de closure:

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 à l'argument nombre malgré le fait que l'appel à la fonction ajouteur soit terminé.

Cette caractéristique peut être très intéressante mais aussi très gênante.

Exemple 1 :

function testA(nombre)
{
  i = nombre; // on stocke nombre dans i
  return i*2;
}
 
function testB(nombre)
{
  var i = nombre; // on déclare i contenant nombre
  return i*2;
}
 
var i = 1; // on déclare i contenant 1.
alert(testA(2)); // On affiche testA(2) qui vaut 2*2 donc 4.
alert(i); // On affiche i qui vaut maintenant 2 car testA a modifié i. i n'étant pas déclaré dans la portée de la fonction, javascript utilise la variable i dans la portée parente.
alert(testB(3)); // On affiche testB(3) qui vaut 2*3 donc 6.
alert(i); // On affiche i qui vaut toujours 2 car testB n'a pas modifié i. testB redéclare un i dans sa portée qui sera détruit à la fin de la fonction.

Exemple 2 :

var i = 256; // on déclare i contenant 10
var a = 0;
[...]
// a ce stade i vaut 256
for(var i=1;i<10;i++)
  a = i+a;
// a ce stade i vaut toujours 256 car le i du for a été déclaré dans sa portée
for(i=1;i<10;i++)
  a = i+a;
// a ce stade i vaut 10 car i n'étant pas déclaré dans le for, il a utilisé la variable dans la portée parente et donc a écrasé le 256

Il est donc très important de déclarer les variables quand on les utilise pour la première fois ou dans des boucles.

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

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

 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.

[modifier] 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 l'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"

[modifier] Voir aussi

• Syntaxe JavaScript
• E4X
• Ajax

[modifier] Références

[modifier] Liens externes

Wikibooks propose un ouvrage abordant ce sujet : la programmation JavaScript.

• Documentation officielle sur le site de Mozilla
• Catégorie javascript de l’annuaire dmoz.
• (en) ECMAScript programming langage 3^e édition (décembre 1999)
• (en) Microsoft MSDN - JScript
• (en) Exemples d'utilisation avancée du langage JavaScript

• Portail de la programmation informatique