21 septembre 2020 523 lectures

.

• @manikManik
• Qu’est-ce qu’un runtime JavaScript ou un hôte JavaScript ?
• JavaScript Runtime In Your Browser For Web Development
• Les fonctions IO de base basées sur ECMAScript
• Modèle d’objet de document ou le DOM
• Pourquoi le Document Object Model (DOM) était-il nécessaire ?
• Modèle d’objet du navigateur ou le BOM
• Tags

@manikManik

Penseur “Out Of The Box”, J’aime écrire du Javascript et du Python. “🍺 🍻 gulp watch”

JavaScript est certainement l’un de ces langages de programmation que vous pouvez commencer en quelques heures en raison de sa syntaxe simple, mais qui vous prendrait probablement des années à maîtriser.

Pour maîtriser JavaScript, il faut effectivement une compréhension approfondie du fonctionnement de l’ensemble de l’écosystème. L’écosystème de base de JavaScript se compose de 3 composants principaux qui sont ECMAScript, JavaScript Engine, et le JavaScript Runtime.

Tout commence par la compréhension de ce qu’est l’ECMAScript et en quoi il est différent de JavaScript, puis par la compréhension du JavaScript Engine et du JavaScript Runtime. C’est à cause du runtime JavaScript que NodeJS et Google Chrome peuvent utiliser le même moteur JavaScript et pourtant avoir des implémentations très différentes de JavaScript pour les développeurs.

Qu’est-ce qu’un runtime JavaScript ou un hôte JavaScript ?

Un runtime JavaScript (ou un hôte JavaScript) peut être compris comme un conteneur qui utilise le moteur JavaScript pour générer des API qui peuvent être utilisées par les développeurs de logiciels pour créer des applications utilisant JavaScript. Prenant un exemple d’un runtime JavaScript dans un navigateur, il contiendrait typiquement les implémentations de JavsScript qui sont plus spécifiques à un navigateur. Alors qu’un runtime pour quelque chose comme NodeJs aurait des implémentations spécifiques qui sont plus spécifiques à l’exécution et à la construction d’une application côté serveur utilisant JavaScript.

JavaScript Runtime In Your Browser For Web Development

Le runtime JavaScript dans le navigateur a l’implémentation de JavaScript qui permet aux développeurs de développer des applications pour le web. Le runtime du navigateur web a les trois composants importants suivants :

• Le noyau basé sur ECMAScript – La mise en œuvre de base de JavaScript avec toutes les fonctions d’entrée et de sortie que les développeurs peuvent utiliser.
• Modèle d’objet du document (DOM) – C’est ce que le navigateur rend comme une hiérarchie de nœuds à afficher au client ou à l’utilisateur pour XML et HTML.
• Modèle d’objet du navigateur (BOM) – C’est ce qui permet aux développeurs de manipuler la fenêtre du navigateur. En utilisant le BOM, les développeurs peuvent accéder aux fonctionnalités du navigateur et les manipuler en dehors du contexte du DOM ou de la page qui est rendue.

Plongeons plus profondément pour comprendre chacun de ces composants en détail.

Les fonctions IO de base basées sur ECMAScript

Un peu de compréhension de l’histoire de JavaScript permettrait de comprendre ce qu’est ECMAScript. ECMAScript est un langage de script à usage général qui a été construit sur les normes définies dans ECMA-262 par l’Association européenne des constructeurs d’ordinateurs (ECMA). Cela a été fait avec l’objectif de normaliser JavaScript à partir de l’année 1997.

JavaScript est une mise en œuvre de l’ECMAScript et tous les navigateurs web doivent adhérer à l’ECMAScript tout en créant leur moteur JavaScript et leurs environnements d’exécution. L’ECMAScript ne contient pas de fonctions d’entrée-sortie, au lieu de cela, c’est le JavaScript qui met en œuvre les différentes fonctions en utilisant les directives définies par l’ECMAScript. ECMAScript et JavaScript sont différents l’un de l’autre. ECMAScript est un langage de script basé sur les normes définies dans ECMA-262 et n’est pas lié aux navigateurs Web. C’est sur la base de l’ECMAScript qu’un langage de script plus robuste comme JavaScript a été construit.

Modèle d’objet de document ou le DOM

Le modèle d’objet de document est une interface neutre du point de vue du langage pour XML ainsi que pour HTML qui cartographie le document entier comme une hiérarchie de nœuds créant une représentation arborescente. Le code HTML donné ci-dessous est un parfait exemple d’une hiérarchie de nœuds.

<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>

Pourquoi le Document Object Model (DOM) était-il nécessaire ?

Pendant les premières années de l’internet, il y avait un navigateur était entre Netscape Navigator 4 et Internet Explorer 4. Les deux navigateurs suivaient une version différente du HTML dynamique (DHTML), ce qui rendait difficile l’exécution du même code HTML sur différents navigateurs. Face à la crainte croissante de voir le web perdre sa nature multiplateforme, un nouvel organisme indépendant, le World Wide Web Consortium (W3C), a été créé. Il était de la responsabilité du W3C de maintenir les standards de communication du web et c’est à ce moment qu’il a commencé à travailler sur le DOM. C’est grâce au DOM que JavaScript obtient la capacité de créer du HTML dynamique et qu’un développeur peut manipuler les différents nœuds d’un document.

Il existe différentes méthodes fournies par le DOM comme interface de programmation qui vous permet de modifier le document HTML comme vous le souhaitez en tant que développeur. Voici quelques exemples de fonctionnalités de l’API DOM :

• La possibilité de trouver un élément sur la page web en fonction de son id ou de sa classe.
• La possibilité de modifier le style ou le contenu entre les balises.
• La capacité de suivre divers événements sur la page et d’ajouter les écouteurs d’événements.
• La capacité d’ajouter ou de supprimer des nœuds HTML.
• et ainsi de suite

On peut accéder au DOM en utilisant l’objet

document

dans le navigateur. Voici un exemple simple d’accès à un élément avec

id="demo

” à l’aide de l’objet

document

dans le navigateur en utilisant JavaScript.

Voici la liste officielle de toutes les propriétés et méthodes de l’objet document dans le navigateur.

Modèle d’objet du navigateur ou le BOM

Tout comme le DOM est une interface pour interagir avec le document, le modèle d’objet du navigateur est l’interface pour interagir avec le navigateur en dehors du contexte du document lui-même. Le BOM était considéré comme assez problématique car il s’agissait de la seule partie de JavaScript qui n’était pas régie par une norme. Cependant, avec le lancement de HTML5, la plupart des fonctionnalités liées à la MOB sont devenues partie intégrante de la norme officielle de HTML5, ce qui a conduit à une réduction massive de la confusion entourant la MOB.

La MOB est accessible à l’aide de l’objet fenêtre qui représente la fenêtre du navigateur. Toutes les variables globales font partie de l’objet fenêtre dans les navigateurs. Voyons comment vous pouvez accéder à l’objet fenêtre et à ses propriétés:

<!DOCTYPE html><html><body><p></p><script>var w = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;var x = document.getElementById("demo");x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";</script></body></html>

Voici quelques exemples des fonctionnalités qui sont offertes par l’API de la nomenclature:

• Ouvrir ou fermer une fenêtre.
• Déplacer ou redimensionner la fenêtre.
• Avoir les dimensions de la fenêtre.
• Demander l’emplacement de l’utilisateur.
• Avoir l’historique du navigateur.
• Avoir les cookies
• et ainsi de suite

Voici la liste officielle de toutes les propriétés et méthodes du Browser Object Model.

Ces trois composants forment le runtime JavaScript dans le navigateur et vous donnent une API pour interagir avec le moteur JavaScript. S’il vous plaît répandre un peu d’amour en donnant à cet article un pouce en haut si vous l’avez aimé, gardez-moi motivé. Vous pouvez surveiller cet espace pour le prochain article ou vous pouvez vous inscrire à ma Newsletter et je vous informerais dès que le prochain article sera publié. N’oubliez pas de laisser un like ou de partager l’article s’il vous a été utile !

Précédemment publié à https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/

.

Tags