Cesar Aguirre Sebastian 4TPROG-AV

Betancourt Vera David Aaron

INVESTIGACIÓN JAVASCRIPT

Cecyteq N°6 Corregidora

M3S2
Qué son los entornos de ejecución para JS .
Ejemplos más comunes de entornos de ejecución para JS
Requerimientos de instalación para JS
Usos JS
 Cesar Aguirre Sebastian 4TPROG-AV
Betancourt Vera David Aaron

Qué son los entornos de ejecución para JS .

JavaScript es un lenguaje de programación popular y ampliamente utilizado en el
desarrollo web. Para poder ejecutar el código JavaScript, se necesita un entorno de
ejecución. Un entorno de ejecución es un conjunto de herramientas y tecnologías que
permiten la interpretación y ejecución del código JavaScript.
Los entornos de ejecución para JavaScript se dividen en dos categorías principales: los
entornos de servidor y los entornos de navegador.
Los entornos de servidor, como Node.js, permiten que el código JavaScript se ejecute en el
servidor. Esto permite que los desarrolladores creen aplicaciones web dinámicas y
escalables en el lado del servidor utilizando JavaScript. Node.js es un entorno de ejecución
de JavaScript del lado del servidor que permite a los desarrolladores utilizar JavaScript
para escribir aplicaciones en el lado del servidor. Node.js incluye un motor de JavaScript de
alto rendimiento llamado V8, que fue desarrollado por Google y es utilizado en el
navegador Google Chrome.
Los entornos de navegador, como Google Chrome, Firefox, Safari y otros, proporcionan un
entorno de trabajo para la ejecución de JavaScript en el navegador. Los navegadores web
utilizan motores de JavaScript internos para interpretar y ejecutar el código JavaScript.
Cada motor de JavaScript tiene sus propias características y rendimiento. Algunos motores
de JavaScript populares incluyen V8 (utilizado en Google Chrome y Node.js),
SpiderMonkey (utilizado en Firefox) y JavaScriptCore (utilizado en Safari).
Además de los entornos de ejecución de JavaScript mencionados anteriormente, también
hay entornos de ejecución de JavaScript móviles, como React Native, que permiten a los
desarrolladores crear aplicaciones móviles utilizando JavaScript. Estos entornos utilizan
motores de JavaScript específicos para dispositivos móviles.

Ejemplos más comunes de entornos de ejecución para JS

NODE.JS
Requerimientos de instalación
Verifique los requisitos del sistema.
Verifique que la implementación incluye un editor de código o un compilador para el Agente
de la sonda:
Windows
Microsoft Visual C++ Redistributable de 64 bits y de 32 bits en función de la configuración
del sistema operativo, Visual Studio Express o Node Package Manager (NPM).
Ejecute el siguiente comando para descargar NPM:
npm install – global windows-build-tool
 Cesar Aguirre Sebastian 4TPROG-AV
Betancourt Vera David Aaron
Mac OS: Xcode
Linux: GNU Compiler Collection (gcc), g++ o MakePor lo general, los sistemas Linux incluyen
un compilador GNU preinstalado.
Node Package Manager (NPM) está instalado. NPM es un gestor de paquetes para JavaScript
y es el gestor de paquetes predeterminado para Node.js. Se utiliza NPM para descargar el
Agente de la sonda Node.js. El gestor de paquetes NPM se incluye en todas las versiones
recientes de Node.js.
Asegúrese de que el conjunto de NPM incluye la versión de Python necesaria.
3.7 para UNIX, Mac OS y Windows.
Herramientas
Webpack
Webpack es un práctico bundler que se utiliza para simplificar el desarrollo del front-end.
Detecta los módulos con dependencias y los transforma en assets estáticos que representan
los módulos.
Puedes instalar la herramienta a través del npm o del gestor de paquetes de hilos.
Webpack crea paquetes individuales o cadenas múltiples de assets que pueden ser
cargados asincrónicamente en tiempo de ejecución. Cada asset no tiene que ser cargado
individualmente. Agrupar y servir assets se vuelve rápido y eficiente con la herramienta,
haciendo que la experiencia general del usuario sea mejor y reduciendo las molestias del
desarrollador en la gestión del tiempo de carga.

Strapi
Strapi es un sistema de gestión de contenidos (CMS) sin encabezado, de código abierto. Un
CMS sin encabezado es básicamente un software que te permite administrar tu contenido
sin un frontend preconstruido. Es un sistema sólo de respaldo que funciona usando APIs
RESTful.
Se puede instalar Strapi a través de paquetes de Yarn o npx.
El objetivo de Strapi es recoger y presentar su contenido de forma estructurada en cualquier
dispositivo. El CMS facilita la gestión del contenido de sus aplicaciones y asegura que sean
dinámicas y accesibles a través de cualquier dispositivo.

Broccoli
Broccoli es una poderosa herramienta de construcción que se ejecuta en un módulo ES6.
Las herramientas de construcción permiten reunir todos los diferentes assets dentro de un
aplicación o sitio web, por ejemplo, imágenes, CSS, JavaScript, etc., en un formato
distribuible. Broccoli se marca a sí mismo como el " canal de recursos para aplicaciones
ambiciosas".
 Cesar Aguirre Sebastian 4TPROG-AV
Betancourt Vera David Aaron
La versión actual de Node.js sería la mejor para la herramienta ya que proporciona un
soporte a largo plazo. Esto ayudará a evitar la molestia de actualizar y reinstalar
continuamente. Una vez completado el proceso de instalación, se puede incluir la
especificación de construcción encciones que Facebook y Google han enfrentado
recientemente por parte de los gobiernos.

Danger
Danger es una herramienta de código abierto muy útil para agilizar las comprobaciones de
las solicitudes de extracción (PR). Como dice la descripción de la biblioteca de Danger, la
herramienta te ayuda a "formalizar" tu sistema de revisión de código administrando los
chequeos PR. Danger se integra con tu CI y te ayuda a acelerar el proceso de revisión.
La integración de Danger con un proyecto es un proceso sencillo que se realiza paso a paso:
sólo hay que incluir el módulo Danger y crear un archivo para cada proyecto. Sin embargo,
es más conveniente crear una cuenta en el mismo Danger (a través de GitHub o Bitbucket),
y luego configurar los tokens de acceso.
Usos
Node.js sirve para crear sitios web dinámicos muy eficientes, escritos con el lenguaje de
programación JavaScript. Normalmente, los desarrolladores se decantan por este entorno
de ejecución cuando buscan que los procesos se ejecuten de forma ágil y sin ningún tipo de
bloqueo cuando las conexiones se multiplican.
Por ejemplo, en aplicaciones IOT (Internet de las cosas), aplicaciones de transmisión de
datos, aplicaciones basadas en REST API o aplicaciones de mensajería instantánea lo más
utilizado es Node.js, ya que resulta muy estable y rápido frente a miles de conexiones
simultáneas.
Para que te hagas una idea, estas aplicaciones y sitios web están ejecutados en Node.js:
 Twitter
 Adobe
 Spotify
 Github.com
 Nytimes.com
 Medium.com
Google Chrome
Requerimientos de instalación
Windows:
Para utilizar el navegador Chrome en Windows, necesitas:
Windows 10 o una versión posterior, o Windows Server 2016 o una versión posterior
Un procesador Intel Pentium 4 o superior compatible con SSE3
 Cesar Aguirre Sebastian 4TPROG-AV
Betancourt Vera David Aaron
Mac:
Para utilizar el navegador Chrome en Mac, necesitas:
MacOS High Sierra 10.13 o una versión posterior
Linux:
Para utilizar el navegador Chrome en Linux, necesitas:
64-bit Ubuntu 18.04, Debian 10, openSUSE 15.2, Fedora Linux 32 o cualquier otra versión
de 64 bits posterior a estas
Un procesador Intel Pentium 4 o superior compatible con SSE3
Android:
Para utilizar el navegador Chrome en Android, necesitas:
Android 7.0 Nougat
Herramientas
Chrome Developer Tool:
La herramienta de desarrollo de Chrome, también conocido como DevTools es un set de
herramientas útiles para desarrollo web y herramientas para debug dentro de Chome.
Incluyen paneles para elementos, conectividad, fuentes, línea de tiempo, perfiles, recursos,
auditorias y consolas.
Puedes abrir DevTools al seccionar el menú hamburguesa de Chrome en la esquina superior
derecha del explorador, luego seleccionando More Tools > Develope Tools.
Alternativamente puedes usar Ctrl+Shift+I o Cmd+Opt+I en Mac. Una vez que está abierto
el DevTools, puedes usar Ctrl+ para ir de panel a panel.
Uno de los usos más comunes para esta herramienta es examinar el HTML y el CSS de un
elemento de una página web que esté abierta en Chrome, esto se lograr al hacer click en la
tabla del elemento en la barra de navegación del DevTools.
Consola de JavaScript:
La consola de JavaScript es el lugar para buscar mensajes de error de JavaScript, adicional a
otros tipos de mensajes que te ayudarán a resolver los problemas de tu código. También
podrás interactuar con el contexto actual desde esta consola; eso incluye evaluar
expresiones e invocar al debugger. Esta herramienta se usa regularmente como una forma
rápida de invocar y probar un API que se está desarrollando.Puedes abrir esta consola desde
la barra de navegación del DevTools al hacer clic en la consola o directamente con
Ctrl+Shift+J o Cmd+Iot+J en Mac.
Audits:
La tabla de auditorías del DevTools es una de la docena de maneras que tienes para ver
sugerencias para mejorar el desempeño de una página web en Chrome. La larga lista de este
ejemplo muestra un sitio comercial típico.
 Cesar Aguirre Sebastian 4TPROG-AV
Betancourt Vera David Aaron
Por ejemplo, “minifying” tu CCS y archivos de JavaScript para reducir la cantidad de espacios
en blanco y la combinación de los archivos minimizados para reducir el número de
peticiones GET necesarios para cargarlos es una práctica estándar en la producción de sitios
web, y puede hacer una gran diferencia en el desempeño del sitio.
Usos
Por lo general, al utilizar productos de Google Workspace como Gmail y Google Calendar en
el trabajo o en un centro educativo, trabajas en un navegador web.
Con el navegador Chrome, puedes hacer lo siguiente:
Obtener resultados de búsqueda personalizados que aparecen a medida que introduces
texto.
Sincronizar marcadores y ajustes en todos tus dispositivos.
Usar productos de Google Workspace, como Documentos, Hojas de cálculo o
Presentaciones de Google.
Instalar extensiones de Chrome Web Store para añadir más funciones a tu navegador, como
editores de fotos o herramientas de gestión de proyectos.
Mozilla Firefox
Requerimientos de instalación
 Procesador a 233 Mhz (Linux y Windows)
 64 MB de RAM (Linux y Windows, 128 MB de RAM para MAC)
 50 MB de espacio libre en disco (Linux y Windows, 70 MB de espacio libre en disco
para MAC)
 Microsoft 98 o superior
 Kernel Linux 2.2.14 (con glibc 2.3.2, XFree86-3.3.6, gtk+2.0, fontconfig/xft y
libstdc++5) (Linux)
 Procesador PowerPC G3 (MAC)
Herramientas
El inspector: explorador del DOM y editor CSS:
Las herramientas del desarrollador, generalmente se abren de forma predeterminada en el
inspector, parecido a la siguiente captura de pantalla. Esta herramienta muestra cómo se ve
el HTML en tu página en tiempo de ejecución, así como qué CSS se aplica a cada elemento
de la página. También te permite modificar instantáneamente el HTML y CSS y ver los
resultados de tus cambios reflejados en vivo en la ventana del navegador.
Explorando el DOM con el inspector:
Para empezar, haz clic con el botón derecho (Ctrl+clic) en un elemento HTML en el inspector
del DOM y observa el menú contextual. Las opciones disponibles en el menú varían según
el navegador, pero en su mayoría, las más importantes son las mismas:
 Eliminar nodo (A veces Eliminar elemento). Elimina el elemento actual.
 Cesar Aguirre Sebastian 4TPROG-AV
Betancourt Vera David Aaron
 Editar como HTML (A veces Agregar atributo/Editar texto). Te permite cambiar el
HTML y ver los resultados en tiempo real. Muy útil para depurar y probar.
 :hover/:active/:focus. Obliga a que se activen los estados de los elementos, para que
puedas ver cómo se vería su estilo.
 Copiar/Copiar como HTML. Copie el HTML seleccionado actualmente.
 Algunos navegadores también disponen de Copiar ruta CSS y Copiar XPath, para
permitirte copiar el selector CSS o la expresión XPath que seleccionaría el elemento
HTML actual.
Explorar el editor CSS:
De manera predeterminada, el editor CSS muestra las reglas CSS aplicadas al elemento
seleccionado actualmente:
 Las reglas aplicadas al elemento actual se muestran en orden de mayor a menor
especificidad.
 Haz clic en las casillas de verificación junto a cada declaración para ver qué pasaría
si eliminaras la declaración.
 Haz clic en la pequeña flecha al lado de la abreviatura de cada propiedad para
mostrar los nombres completos equivalentes de la propiedad.
 Haz clic en el nombre o valor de una propiedad para que aparezca un cuadro de
texto, donde puedes ingresar un nuevo valor para obtener una vista previa en vivo
de un cambio de estilo.
 Junto a cada regla está el nombre del archivo y el número de línea en el que se define
la regla. Al hacer clic en esa regla, las herramientas de desarrollo saltan para
mostrarlas en su propia vista, donde generalmente puedes editar y guardar.
Usos
El navegador que nos ocupa este artículo nos ofrece las mejores combinaciones de
características posibles hoy en día, como pueden ser la navegación con pestañas o el
bloqueo de ventanas emergentes, entre otras muchas posibilidades.
Navegar con pestañas:
El navegador Mozilla Firefox facilita la navegación sobremanera y con ello consigue que
cualquier usuario se encuentre cómodo en su utilización rápidamente. Esta mejora se debe
en parte a la navegación con pestañas que encontramos en su uso. Esta navegación con
pestañas varia la manera en que usamos Internet al permitirnos abrir los enlaces de las
diferentes páginas en "pestañas" en un segundo plano para luego verlas cuando estén
preparadas.
Bloquea las ventanas emergentes:
Al usar Mozilla Firefox, conseguimos parar los popups que tanto molestan, para llegar a
navegar de una manera más amigable.
Existen bastantes sitios que usan legítimamente ventanas emergentes, lo que este
navegador hace es bloquear una de estas ventanas, mostrando una barra debajo de la barra
 Cesar Aguirre Sebastian 4TPROG-AV
Betancourt Vera David Aaron
de navegación, con un botón que nos ofrece varias opciones para configurar el bloqueo de
popups.
Óptimos marcadores
Con Mozilla Firefox se facilita la tarea de coordinar nuestros marcadores con el
administrador de marcadores, gracias al cual podemos crear carpetas para apilar ítems
análogos. También se pueden adjuntar anotaciones particulares para recordarnos porqué
hemos marcado un ítem en particular.
Existen numerosas opciones de propiedades para la ordenación, como por nombre,
dirección, fecha de la última visita, etc. Mozilla Firefox, además nos permite asociar una
palabra clave a cualquier marcador, y así abrirlo con sólo escribir la palabra clave en la barra
de direcciones del navegador. También se pueden abrir los marcadores en un panel lateral
con CTRL+B.
NetBeans
Requerimientos de instalación
Windows:
 Windows 10 (8u51 y superiores)
 Windows 8.x (escritorio)
 Windows 7 SP1
 Windows Vista SP2
 Windows Server 2008 R2 SP1 (64 bits)
 Windows Server 2012 y 2012 R2 (64 bits)
 RAM: 128 MB
 Espacio en disco: 124 MB para JRE; 2 MB para Java Update
 Procesador: Mínimo Pentium 2 a 266 MHz
 Exploradores: Internet Explorer 9 y superior, Firefox
Mac OS X:
 Mac con Intel que ejecuta Mac OS X 10.8.3+, 10.9+
 Privilegios de administrador para la instalación
 Explorador de 64 bits
 Se requiere un explorador de 64 bits (Safari, por ejemplo) para ejecutar Oracle Java
en Mac.
Linux:
 Oracle Linux 5.5+1
 Oracle Linux 6.x (32 bits), 6.x (64 bits)2
 Oracle Linux 7.x (64 bits)2 (8u20 y superiores)
 Red Hat Enterprise Linux 5.5+1 6.x (32 bits), 6.x (64 bits)2
 Red Hat Enterprise Linux 7.x (64 bits)2 (8u20 y superiores)
 Suse Linux Enterprise Server 10 SP2+, 11.x
 Cesar Aguirre Sebastian 4TPROG-AV
Betancourt Vera David Aaron
 Suse Linux Enterprise Server 12.x (64 bits)2 (8u31 y superiores)
 Ubuntu Linux 12.04 LTS, 13.x
 Ubuntu Linux 14.x (8u25 y superiores)
 Ubuntu Linux 15.04 (8u45 y superiores)
 Ubuntu Linux 15.10 (8u65 y superiores)
 Exploradores: Firefox
Herramientas
Gestión organizada de los proyectos: NetBeans permite que todas tus aplicaciones estén
bien organizadas en un servicio de carpetas. Eso facilita mucho el trabajo colaborativo con
otros desarrolladores, que sin esa estructura estarían muy perdidos dentro de los distintos
proyectos. En esa gestión es esencial el control de versiones, por eso NetBeans integra
herramientas como Mercurial, Subversion o Git.
Desarrollo rápido de interfaz de usuario: NetBeans cuenta con su propia interfaz gráfica de
usuario (GUI) para Java, HTML5, PHP o C/C++. Esa interfaz tiene sencillas herramientas de
arrastrar y soltar para el diseño de las aplicaciones, lo que la convierte en algo muy intuitivo.
Depurador de errores: no sólo dispone de un depurador que alerta de posibles errores de
programación, también cuenta con herramientas para optimizar las aplicaciones en
velocidad y uso de memoria. Con esto se puede desarrollar aplicaciones que cumplan con
una condición indispensable con el uso de datos y el consumo de información actual: la
escalabilidad.
Usos
NetBeans ayuda en el desarrollo de cualquier tipo de software y en sus distintas fases. A los
programadores les sirve como medio para la escritura, compilación o, simplemente, para
hallar errores en programas basados en los anteriores lenguajes.
Es útil para ejecutar programas en diferentes dispositivos electrónicos, tanto móviles como
PC. Asimismo, NetBeans permite a través de Bookmarking marcar las líneas de código que
a posteriori se modificarán.
Por otro lado, proporciona una librería visual donde conseguir los diferentes widgets y
permite gestionar el almacenamiento de los datos de una forma óptima.