11,346 lecturas

Tres componentes principales de JavaScript

por Manik5m2020/09/21

Demasiado Largo; Para Leer

El ecosistema central de JavaScript consta de 3 componentes principales que son ECMAScript, JavaScript Engine y JavaScript Runtime. NodeJS y Google Chrome pueden usar el mismo motor de JavaScript y, sin embargo, tienen implementaciones de JavaScript muy diferentes para los desarrolladores. El modelo de objeto del documento es una interfaz independiente del lenguaje para XML y HTML que mapea todo el documento como una jerarquía de nodos que crean una representación en forma de árbol. JavaScript es un lenguaje de secuencias de comandos basado en los estándares definidos en ECMA-262 y no está vinculado a los navegadores web.

People Mentioned

Company Mentioned

featured image - Tres componentes principales de JavaScript

JavaScript es sin duda uno de esos lenguajes de programación que puede comenzar en unas pocas horas debido a su sintaxis simple, pero probablemente le llevará años dominarlo.

Para dominar JavaScript, se requiere una comprensión profunda de cómo funciona todo el ecosistema. El ecosistema central de JavaScript consta de 3 componentes principales que son ECMAScript, JavaScript Engine y JavaScript Runtime.

Todo comienza con la comprensión de qué es ECMAScript y en qué se diferencia de JavaScript , seguido de una comprensión del motor de JavaScript y el tiempo de ejecución de JavaScript . Debido al tiempo de ejecución de JavaScript , NodeJS y Google Chrome pueden usar el mismo motor de JavaScript y, sin embargo, tienen implementaciones de JavaScript muy diferentes para los desarrolladores.

¿Qué es un tiempo de ejecución de JavaScript o un host de JavaScript?

Un tiempo de ejecución de JavaScript (o un host de JavaScript) puede entenderse como un contenedor que usa el motor de JavaScript para generar API que los desarrolladores de software pueden usar para crear aplicaciones usando JavaScript. Tomando un ejemplo de un tiempo de ejecución de JavaScript en un navegador, normalmente contendría las implementaciones de JavsScript que son más específicas para un navegador. Mientras que un tiempo de ejecución para algo como NodeJs tendría implementaciones específicas que son más específicas para ejecutar y construir una aplicación del lado del servidor usando JavaScript.

Tiempo de ejecución de JavaScript en su navegador para desarrollo web

El tiempo de ejecución de JavaScript en el navegador tiene la implementación de JavaScript que permite a los desarrolladores desarrollar aplicaciones para la web. El tiempo de ejecución del navegador web tiene los siguientes tres componentes importantes:

El núcleo basado en ECMAScript : la implementación básica de JavaScript con todas las funciones de entrada y salida que los desarrolladores pueden usar.
Modelo de objetos de documento (DOM) : esto es lo que el navegador representa como una jerarquía de nodos que se mostrarán al cliente o al usuario para XML y HTML.
Modelo de objetos del navegador (BOM) : esto es lo que permite a los desarrolladores manipular la ventana del navegador. Con el BOM, los desarrolladores pueden acceder a las funciones del navegador y manipularlas fuera del contexto del DOM o de la página que se está representando.

Profundicemos más para comprender cada uno de estos componentes en detalle.

Las funciones principales de E/S basadas en ECMAScript

Un poco de comprensión de la historia de JavaScript aclararía qué es ECMAScript. ECMAScript es un lenguaje de secuencias de comandos de propósito general que se ha construido sobre los estándares definidos en ECMA-262 por la Asociación Europea de Fabricantes de Computadoras (ECMA). Esto se hizo con el objetivo de estandarizar JavaScript a partir del año 1997.

JavaScript es una implementación de ECMAScript y todos los navegadores web deben adherirse a ECMAScript al crear su motor de JavaScript y entornos de tiempo de ejecución. ECMAScript no contiene ninguna función IO, sino que es el JavaScript el que implementa las diversas funciones utilizando las pautas establecidas por ECMAScript. ECMAScript y JavaScript son diferentes entre sí. ECMAScript es un lenguaje de secuencias de comandos basado en los estándares definidos en ECMA-262 y no está vinculado a los navegadores web. Se basa en ECMAScript que se ha construido un lenguaje de secuencias de comandos más robusto como JavaScript.

Modelo de objetos de documento o el DOM

El modelo de objeto del documento es una interfaz independiente del lenguaje para XML y HTML que mapea todo el documento como una jerarquía de nodos que crean una representación en forma de árbol. El código HTML que se proporciona a continuación es un ejemplo perfecto de una jerarquía de nodos.

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

¿Por qué se necesitaba el modelo de objeto de documento (DOM)?

Durante los primeros años de Internet, había un navegador entre Netscape Navigator 4 e Internet Explorer 4. Ambos navegadores seguían una versión diferente de HTML dinámico (DHTML), lo que dificultaba ejecutar el mismo código HTML en diferentes navegadores. Con el aumento de los temores de que la web pierda su naturaleza multiplataforma, se creó un nuevo organismo independiente llamado World Wide Web Consortium (W3C). Era responsabilidad del W3C mantener los estándares de comunicación web y eso cuando comenzó a trabajar en el DOM. Gracias al DOM, JavaScript tiene la capacidad de crear HTML dinámico y un desarrollador puede manipular los distintos nodos de un documento.

Hay varios métodos proporcionados por el DOM como una interfaz de programación que le permite modificar el documento HTML de la manera que le gustaría como desarrollador. Aquí hay algunos ejemplos de características de la API DOM:

La capacidad de encontrar un elemento en la página web en función de su id o clase.
La capacidad de cambiar el estilo o el contenido entre las etiquetas.
La capacidad de rastrear varios eventos en la página y agregar los detectores de eventos.
La capacidad de agregar o eliminar nodos HTML.
y así

Se puede acceder al DOM usando el

 document

objeto en el navegador. Aquí hay un ejemplo simple de acceder a un elemento con

 id="demo

"con la ayuda de la

 document

objeto en el navegador usando JavaScript.

Aquí está la lista oficial de todas las propiedades y métodos del objeto de documento en el navegador.

Modelo de objetos del navegador o BOM

Al igual que el DOM es una interfaz para interactuar con el documento, el modelo de objetos del navegador es la interfaz para interactuar con el navegador fuera del contexto del documento mismo. Se consideró que el BOM era bastante problemático debido a que era la única parte de JavaScript que no tenía un estándar que lo rigiera. Sin embargo, con el lanzamiento de HTML5, la mayoría de las características relacionadas con la lista de materiales se convirtieron en parte del estándar oficial de HTML5, lo que condujo a una reducción masiva de la confusión que rodeaba a la lista de materiales.

Se puede acceder a la lista de materiales utilizando el objeto de ventana que representa la ventana del navegador. Todas las variables globales son parte del objeto de ventana en los navegadores. Veamos cómo puede acceder al objeto ventana y sus propiedades:

 <!DOCTYPE html> < html > < body > < p id = "demo" > </ 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 >

Estos son algunos ejemplos de las funciones que ofrece la API de BOM:

Abrir o cerrar una ventana.
Mover o cambiar el tamaño de la ventana.
Obtener las dimensiones de la ventana.
Solicitar la ubicación del usuario.
Obtener el historial del navegador.
Accediendo a las cookies
y así

Aquí está la lista oficial de todas las propiedades y métodos del modelo de objetos del navegador.

Estos tres componentes forman el tiempo de ejecución de JavaScript en el navegador y le brindan una API para interactuar con el motor de JavaScript. Difunde un poco de amor dando a este artículo un pulgar hacia arriba si te gustó, mantenme motivado. Puedes mirar este espacio para el próximo artículo o puedes suscribirte a mi boletín y te notificaré tan pronto como se publique el próximo artículo. ¡No olvides dejar un me gusta o compartir el artículo si te fue útil!

Publicado anteriormente en https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/