Implémentation de JavaScript

Le cœur ECMAScript de JavaScript décrit la syntaxe et les objets de base de ce langage ;

DOM décrit les méthodes et les interfaces pour traiter le contenu du site web ;

BOM décrit les méthodes et les interfaces pour interagir avec le navigateur.

ECMAScript, DOM et BOM

Bien que ECMAScript soit une norme importante, ce n'est pas la seule partie de JavaScript, bien sûr, ce n'est pas non plus la seule partie standardisée. En réalité, une implémentation complète de JavaScript est composée de trois parties différentes :

JavaScript inclut ECMAScript, DOM et BOM

ECMAScript

ECMAScript n'est pas lié à aucun navigateur spécifique, en réalité, il ne mentionne pas non plus les méthodes d'entrée et de sortie utilisateur (ce qui est différent de C, qui doit dépendre de bibliothèques externes pour accomplir de telles tâches). Alors, qu'est-ce que ECMAScript ? La description de la norme ECMA-262 (deuxième section) est la suivante :

“ECMAScript peut fournir des capacités de programmation de script pour différents environnements d'hôte, par conséquent, le langage de script de base est défini indépendamment de tout environnement d'hôte spécifique... ...”

Les navigateurs Web sont un environnement d'hôte pour ECMAScript, mais ce n'est pas le seul. En fait, il y a d'innombrables autres environnements variés (par exemple, Nombas ScriptEase, ainsi que ActionScript utilisé par Macromedia dans Flash et Director MX) qui peuvent contenir des implémentations ECMAScript. Alors, qu'est-ce que ECMAScript réglemente en dehors des navigateurs ?

En termes simples, ECMAScript décrit ce qui suit :

  • Grammaire
  • Types
  • Instructions
  • Mots-clés
  • Mots réservés
  • Opérateurs
  • Objets

ECMAScript n'est qu'une description, définissant toutes les propriétés, méthodes et objets du langage de script. D'autres langages peuvent réaliser ECMAScript comme point de référence pour les fonctionnalités, JavaScript en est un exemple :

ECMAScript, JavaScript, ActionScript, ScriptEase

Chaque navigateur a sa propre implémentation d'interface ECMAScript, puis cette implémentation est étendue, incluant DOM et BOM (qui seront discutés dans les prochaines sections). Bien sûr, il y a d'autres implémentations et extensions du langage ECMAScript, par exemple, Windows Scripting Host (WSH), ActionScript de Macromedia dans Flash et Director MX, ainsi que Nombas ScriptEase.

1. Version de ECMAScript

ECMAScript est divisé en plusieurs versions différentes, définies dans une norme appelée ECMA-262. Comme d'autres normes, ECMA-262 est révisée et mise à jour. Lorsque des mises à jour importantes sont disponibles, une nouvelle version de la norme est publiée. La dernière version de ECMA-262 est 5.1, publiée en juin 2011.

La première version de ECMA-262 est essentiellement la même que JavaScript 1.1 de Netscape, à la différence que tous les codes liés aux navigateurs ont été supprimés, ainsi qu'un certain nombre de réglages mineurs. Tout d'abord, ECMA-262 nécessite le soutien des normes Unicode (pour la prise en charge des langues multiples). Deuxièmement, il exige que les objets soient indépendants de la plateforme (le JavaScript 1.1 de Netscape, en fait, a différentes implémentations d'objets, par exemple, l'objet Date, dépend de la plateforme). C'est pourquoi JavaScript 1.1 et 1.2 ne correspondent pas au premier ensemble de normes ECMA-262.

La plupart des mises à jour de la deuxième version de ECMA-262 sont d'ordre éditorial. Cette mise à jour de la norme visait à assurer une concordance stricte avec ISO/IEC-16262, sans ajouter, modifier ou supprimer de contenu spécifique. ECMAScript ne suit généralement pas la deuxième version.

La troisième version de ECMA-262 est la première mise à jour véritable de cette norme. Elle apporte des mises à jour pour la gestion des chaînes, les définitions des erreurs et les sorties numériques. Elle ajoute également le support des expressions régulières, des nouveaux instructions de contrôle, du traitement des exceptions try...catch, et quelques modifications mineures pour la internationalisation de la norme. En général, elle marque le passage d'ECMAScript à une véritable langue de programmation.

2. Qu'est-ce que la conformité ECMAScript ?

Dans ECMA-262, la conformité ECMAScript est clairement définie. Un langage de script doit répondre aux quatre principes fondamentaux suivants :

  • Les implémentations conformes doivent suivre les
  • Les implémentations conformes doivent prendre en charge la norme Unicode (UCS)
  • Les implémentations conformes peuvent ajouter des
  • Les implémentations conformes peuvent prendre en charge les

Toutes les implémentations d'ECMAScript doivent se conformer aux normes ci-dessus.

3. Support de ECMAScript dans les navigateurs web

Le navigateur Netscape Navigator 3.0, qui intégrait JavaScript 1.1, a été lancé en 1996. Puis, la norme JavaScript 1.1 a été soumise en tant que projet de nouvelle norme à l'EMCA. Grâce à la popularité explosive de JavaScript, Netscape a commencé à développer la version 1.2 avec beaucoup d'enthousiasme. Mais il y avait un problème : l'ECMA n'a pas accepté le projet de Netscape. Peu de temps après la sortie du Netscape Navigator 3.0, Microsoft a lancé Internet Explorer 3.0. Cette version d'IE intégrait JScript 1.0 (le nom de l'implémentation de JavaScript propre à Microsoft), qui était initialement prévu pour être comparable à JavaScript 1.1. Cependant, en raison de la documentation insuffisante et de certaines caractéristiques redondantes, JScript 1.0 n'a pas atteint le niveau de JavaScript 1.1.

Avant la finalisation de la première version d'ECMA-262, le Netscape Navigator 4.0 contenant JavaScript 1.2 a été publié en 1997. Plus tard dans l'année, la norme ECMA-262 a été acceptée et standardisée. Par conséquent, JavaScript 1.2 n'est pas compatible avec la première version d'ECMAScript, bien que ECMAScript devrait être basé sur JavaScript 1.1.

La prochaine étape de JScript était l'intégration de JScript 3.0 dans IE 4.0 (la version 2.0 était publiée avec IIS 3.0, mais n'était pas incluse dans le navigateur). Microsoft a fortement promu JScript 3.0 comme étant le premier langage de script véritablement conforme aux normes ECMA au monde. À cette époque, ECMA-262 n'était pas encore finalisé, donc JScript 3.0 a subi le même sort que JavaScript 1.2 - il n'a pas réussi à correspondre à la norme ECMAScript finale.

Netscape a choisi de mettre à jour son implémentation JavaScript dans Netscape Navigator 4.06. JavaScript 1.3 a permis à Netscape de devenir pleinement conforme à la première version d'ECMAScript. Netscape a ajouté le soutien aux normes Unicode, et a permis à tous les objets de conserver les nouvelles fonctionnalités introduites dans JavaScript 1.2 tout en réalisant une indépendance de plate-forme.

Lorsque Netscape a rendu public son code source sous le projet Mozilla, il était prévu que JavaScript 1.4 serait intégré dans Netscape Navigator 5.0. Cependant, une décision audacieuse - redessiner complètement le code de Netscape, a compromis ce travail. JavaScript 1.4 n'a été publié que comme langage de script serveur pour Netscape Enterprise Server, et n'a pas été intégré dans les navigateurs par la suite.

Aujourd'hui, tous les navigateurs Web populaires respectent la troisième version de ECMA-262.

Le tableau suivant liste la prise en charge de ECMAScript dans la plupart des navigateurs Web populaires :

Navigateur Compatibilité DOM
Netscape Navigator 2.0 -
Netscape Navigator 3.0 -
Netscape Navigator 4.0 - 4.05 -
Netscape Navigator 4.06 - 4.79 Édition 1
Netscape 6.0+ (Mozilla 0.6.0+) Édition 3
Internet Explorer 3.0 -
Internet Explorer 4.0 -
Internet Explorer 5.0 Édition 1
Internet Explorer 5.5+ Édition 3
Opera 6.0 - 7.1 Édition 2
Opera 7.2+ Édition 3
Safari 1.0+/Konqueror ~ 2.0+ Édition 3

DOM

DOM (Document Object Model) est une interface d'application (API) pour HTML et XML. Le DOM réorganise tout le site en un document constitué de nœuds hiérarchiques. Chaque partie d'une page HTML ou XML est une dérivée d'un nœud. Considérez l'exemple suivant de page HTML :

<html>
  <head>
    <title>Page d'exemple</title>
  </head>
  <body>
    <p>hello world!</p>
  </body>
</html>

Ce code peut être dessiné en une hiérarchie de nœuds avec DOM :

Arbre hiérarchique des nœuds DOM

DOM représente le document par un arbre, ce qui donne aux développeurs un contrôle inégalé sur le contenu et la structure du document. Les API DOM permettent de supprimer, d'ajouter et de remplacer les nœuds de manière simple.

1. Pourquoi le DOM est-il indispensable

Depuis IE 4.0 et Netscape Navigator 4.0, qui ont commencé à prendre en charge différents types de HTML dynamique (DHTML), les développeurs ont pu pour la première fois modifier l'apparence et le contenu du site sans reload la page. C'est une grande avancée technologique sur le Web, mais cela a également apporté de graves problèmes. Netscape et Microsoft ont chacun développé leur propre DHTML, ce qui a mis fin à l'époque où les développeurs Web n'avaient qu'à écrire une seule page HTML pour être accessibles sur tous les navigateurs.

L'industrie a décidé qu'il fallait faire quelque chose pour maintenir la caractéristique de plate-forme du Web, ils s'inquiètent que si on laisse Netscape et Microsoft agir ainsi, le Web serait divisé en deux parties indépendantes, chacune ne fonctionnant qu'avec des navigateurs spécifiques. Par conséquent, le groupe responsable de la spécification des normes de communication Web, le W3C (World Wide Web Consortium), a commencé à élaborer le DOM.

2. Les différents niveaux du DOM

DOM Level 1 a été proposé par le W3C en octobre 1998. Il se compose de deux modules, à savoir DOM Core et DOM HTML. Le premier fournit une carte de structure de document basée sur XML pour accéder et manipuler n'importe quelle partie du document ; le second ajoute des objets et des méthodes spécifiques à HTML, étendant ainsi le DOM Core.

Notez que le DOM n'est pas exclusif à JavaScript, en réalité, de nombreux autres langages l'ont mis en œuvre. Cependant, le DOM dans les navigateurs Web est déjà mis en œuvre avec ECMAScript, et est maintenant une grande partie du langage JavaScript.

DOM Level 1 n'est qu'un objectif, à savoir planifier la structure du document, tandis que l'objectif de DOM Level 2 est beaucoup plus large. L'extension de l'original DOM ajoute le support pour les événements de souris et d'interface utilisateur (DHTML en offre un soutien riche), les plages, les parcours (méthodes répétées sur le document DOM) et ajoute le support pour CSS (tableaux de styles en cascade) via des interfaces d'objets. Le DOM Core original introduit par Level 1 a également ajouté le support pour les espaces de noms XML.

DOM Level 2 a introduit plusieurs nouveaux modules DOM pour traiter de nouveaux types d'interfaces :

  • Vue DOM - Description des différentes vues du document (c'est-à-dire le document avant et après la stylisation CSS)
  • Événements DOM - Description des interfaces pour les événements
  • Style DOM - Description des interfaces pour traiter les styles basés sur CSS
  • Parcourir et étendre le DOM - Description des interfaces pour parcourir et manipuler l'arbre de document

DOM Level 3 introduit des méthodes pour charger et conserver de manière uniforme les documents (inclues dans le module DOM Load and Save) ainsi que des méthodes pour valider les documents (Validation DOM), ce qui élargit davantage le DOM. Au niveau 3, le DOM Core est étendu pour prendre en charge toutes les caractéristiques de XML 1.0, y compris XML Infoset, XPath et XML Base.

Lors de l'étude du DOM, il peut y avoir des personnes qui citent DOM Level 0. Notez que le DOM Level 0 n'est pas une norme réelle, c'est simplement un point de référence historique du DOM (le DOM Level 0 fait référence aux DHTML pris en charge par IE 4.0 et Netscape Navigator 4.0).

3. Autres DOM

En plus du DOM Core et du DOM HTML, d'autres langages ont publiés leurs propres normes DOM. Ces langages sont basés sur XML, et chaque DOM ajoute des méthodes et des interfaces spécifiques à la langue correspondante :

  • Langage vectoriel scalable (SVG) 1.0
  • Langage de balisage numérique (MathML) 1.0
  • Langage d'intégration multimédia synchronisée (SMIL)

Remarque :Si vous souhaitez en apprendre davantage sur ce sujet, veuillez visiter CodeW3C Tutoriel SMIL et Tutoriel SVG.

De plus, d'autres langages ont également développé leurs propres implémentations DOM, comme le langage d'interface utilisateur XML de Mozilla (XUL). Cependant, seuls les langages mentionnés ci-dessus sont recommandés par le W3C.

Support DOM dans les navigateurs Web

DOM était déjà une norme avant que les navigateurs Web ne commencent à l'implémenter. La première tentative d'IE avec DOM a été dans la version 5.0, mais en réalité, ce n'est qu'à partir de la version 5.5 que IE a réellement intégré le support DOM, en implémentant le Niveau 1 de DOM. Depuis lors, IE n'a pas introduit de nouvelles fonctionnalités DOM.

Netscape n'a intégré le support DOM qu'à partir de la version 6 (Mozilla 0.6.0). Actuellement, Mozilla dispose du meilleur support DOM, ayant mis en œuvre le Niveau 1 complet, presque tout le Niveau 2 et une partie du Niveau 3 (l'objectif du groupe de développement de Mozilla est de construire un navigateur compatible à 100% avec les normes, et leurs efforts ont été récompensés).

Opera n'a intégré le support DOM qu'à partir de la version 7.0, et Safari a également mis en œuvre la plupart des fonctionnalités du Niveau 1. Ils sont presque au même niveau que IE 5.5, et dans certains cas, même supérieurs. Cependant, en ce qui concerne le support DOM, tous les navigateurs sont bien en retard par rapport à Mozilla. Le tableau suivant liste le support de DOM des navigateurs courants.

Navigateur Compatibilité DOM
Netscape Navigator 1.0 - 4.x -
Netscape 6.0+ (Mozilla 0.6.0+) Niveau 1, Niveau 2, Niveau 3 (partiel)
IE 2.0 - 4.x -
IE 5.0 Niveau 1 (minimum)
IE 5.5+ Niveau 1 (presque tout)
Opera 1.0 - 6.0 -
Opera 7.0+ Niveau 1 (presque tout), Niveau 2 (partiel)
Safari 1.0+/Konqueror ~ 2.0+ Niveau 1

Remarque :Si vous souhaitez approfondir vos connaissances sur DOM, veuillez visiter CodeW3C Tutoriel HTML DOM et Tutoriel XML DOM.

BOM

IE 3.0 et Netscape Navigator 3.0 ont fourni une fonctionnalité - BOM (Browser Object Model), permettant d'accéder et de manipuler les fenêtres du navigateur. En utilisant BOM, les développeurs peuvent déplacer les fenêtres, modifier le texte de la barre d'état et exécuter d'autres actions non directement liées au contenu de la page. Ce qui rend BOM unique et souvent suspect, c'est qu'il ne fait que faire partie de JavaScript, sans aucune norme pertinente.

Le BOM traite principalement des fenêtres et des cadres du navigateur, mais les extensions JavaScript spécifiques aux navigateurs sont généralement considérées comme faisant partie du BOM. Ces extensions incluent :

  • Ouvrir une nouvelle fenêtre de navigateur
  • Déplacer, fermer la fenêtre du navigateur et ajuster la taille de la fenêtre
  • Objet de localisation fournissant des informations détaillées sur le navigateur Web
  • Objet écran fournissant des informations détaillées sur la résolution de l'écran de l'utilisateur
  • Prise en charge des cookies
  • IE a étendu BOM en ajoutant la classe ActiveXObject, permettant d'instancier des objets ActiveX via JavaScript

En l'absence de normes BOM pertinentes, chaque navigateur a sa propre implémentation BOM. Il existe certains standards de facto, tels qu'un objet fenêtre et un objet navigation, mais chaque navigateur peut définir ses propres attributs et méthodes pour ces objets ou d'autres objets.

Voir :