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. tiempo de de JavaScript 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 ejecución . 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: : la implementación básica de JavaScript con todas las funciones de entrada y salida que los desarrolladores pueden usar. El núcleo basado en ECMAScript : 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 de documento (DOM) : 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. Modelo de objetos del navegador (BOM) 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 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. historia de JavaScript 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. My First Heading My first paragraph. <!DOCTYPE html> < > html < > body < > h1 </ > h1 < > p </ > 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 objeto en el navegador. Aquí hay un ejemplo simple de acceder a un elemento con "con la ayuda de la objeto en el navegador usando JavaScript. document id="demo document Aquí está la del objeto de documento en el navegador. lista oficial de todas las propiedades y métodos 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 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. fuera 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 w = .innerWidth || .documentElement.clientWidth || .body.clientWidth; h = .innerHeight || .documentElement.clientHeight || .body.clientHeight; x = .getElementById( ); x.innerHTML = + w + + h + ; var window document document var window document document var document "demo" "Browser inner window width: " ", height: " "." </ > 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 del modelo de objetos del navegador. lista oficial de todas las propiedades y métodos 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 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! suscribirte a mi boletín Publicado anteriormente en https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/

Google

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - DEVELOPER.

HackerNoon Mobile

Tres componentes principales de JavaScript

Demasiado Largo; Para Leer

People Mentioned

Company Mentioned

@manik

HISTORIAS RELACIONADAS