• @manikManik
• ¿Qué es un tiempo de ejecución de JavaScript o un host de JavaScript?
• El tiempo de ejecución de JavaScript en el navegador para el desarrollo web
• Las Funciones IO del Núcleo Basadas en ECMAScript
• Modelo de Objetos de Documento o el DOM
• ¿Por qué era necesario el Modelo de Objetos del Documento (DOM)?
• Modelo de Objetos del Navegador o el BOM
• Etiquetas

@manikManik

Out Of The Box Thinker, Amor para escribir Javascript y Python. “🍺🍻 gulp watch”

JavaScript es, sin duda, uno de esos lenguajes de programación con los que puedes iniciarte en pocas horas debido a su sencilla sintaxis, pero que probablemente te llevaría años dominar.

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, el motor de JavaScript y el tiempo de ejecución de JavaScript.

Todo comienza con la comprensión de lo que es ECMAScript y cómo es diferente de JavaScript y seguido por una comprensión del motor de JavaScript y el tiempo de ejecución de JavaScript. Es debido al tiempo de ejecución de JavaScript que NodeJS y Google Chrome pueden utilizar el mismo motor de JavaScript y, sin embargo, tienen implementaciones muy diferentes de JavaScript 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) se puede entender como un contenedor que utiliza el motor de JavaScript para generar APIs que pueden ser utilizadas por los desarrolladores de software para crear aplicaciones utilizando 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 utilizando JavaScript.

El tiempo de ejecución de JavaScript en el navegador para el 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 base de JavaScript con todas las funciones de entrada y salida que los desarrolladores pueden utilizar.
• Modelo de Objetos del Documento (DOM) – Esto es lo que el navegador representa como una jerarquía de nodos que se muestran 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. Usando el BOM los desarrolladores pueden acceder a las características del navegador y manipularlas fuera del contexto del DOM o de la página que se está renderizando.

Vamos a profundizar para entender cada uno de estos componentes en detalle.

Las Funciones IO del Núcleo Basadas en ECMAScript

Un poco de comprensión de la historia de JavaScript dejaría claro qué es ECMAScript. ECMAScript es un lenguaje de scripting de propósito general que ha sido construido sobre los estándares definidos en ECMA-262 por la European Computer Manufacturers Association (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 tienen que adherirse a ECMAScript mientras crean su motor de JavaScript y entornos de ejecución. ECMAScript no contiene ninguna función IO, en cambio, es el JavaScript el que implementa las diversas funciones utilizando las directrices establecidas por ECMAScript. ECMAScript y JavaScript son diferentes entre sí. ECMAScript es un lenguaje de scripting basado en los estándares definidos en ECMA-262 y no está ligado a los navegadores web. Es sobre la base de ECMAScript que se ha construido un lenguaje de scripting más robusto como JavaScript.

Modelo de Objetos de Documento o el DOM

El Modelo de Objetos de Documento es una interfaz de lenguaje neutral para XML así como para HTML que mapea todo el documento como una jerarquía de nodos creando una representación tipo árbol. El código HTML que se muestra 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é era necesario el Modelo de Objetos del 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 la ejecución del mismo código HTML en distintos navegadores. Ante el creciente temor de que la web perdiera su carácter multiplataforma, se creó un nuevo organismo independiente llamado World Wide Web Consortium (W3C). El W3C tenía la responsabilidad de mantener los estándares de comunicación de la web y fue entonces cuando empezó a trabajar en el DOM. Es gracias al DOM que JavaScript obtiene la capacidad de crear HTML dinámico y un desarrollador puede manipular los diversos nodos de un documento.

Hay varios métodos proporcionados por el DOM como una interfaz de programación que le permite alterar el documento HTML de la manera que usted querrí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 basado en 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 añadir los oyentes de eventos.
• La capacidad de añadir o eliminar nodos HTML.
• Y así sucesivamente

Se puede acceder al DOM utilizando el objeto

document

en el navegador. Aquí hay un ejemplo sencillo de acceso a un elemento con

id="demo

” con la ayuda del objeto

document

en el navegador usando JavaScript.

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

Modelo de Objetos del Navegador o el BOM

Así como 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 propio documento. El BOM se consideraba 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 el BOM se convirtieron en parte del estándar oficial de HTML5, lo que llevó a una reducción masiva de la confusión que rodea al BOM.

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

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

Aquí hay algunos ejemplos de las características que ofrece la API de la lista de materiales:

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

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 dan una API para interactuar con el motor de JavaScript. Por favor, difunde un poco de amor dando un pulgar arriba a este artículo si te ha gustado, mantenme motivado. Puedes ver este espacio para el próximo artículo o puedes suscribirte a mi Newsletter y te notificaré tan pronto como el próximo artículo sea publicado. ¡No olvides dejar un like o compartir el artículo si te ha sido útil!

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

Etiquetas