En Chrome, puedes abrir la consola de desarrollo con Ctrl+Mayús+J (Windows) o Ctrl+Opción+J (Mac), o manualmente desde el menú de configuración seleccionando Más herramientas -> Herramientas de desarrollo. La consola permite ejecutar código en el navegador, de forma similar a como
Vale la pena mencionar que los frameworks como React, Angular, Svelte, etc. se encargarán de la construcción y ejecución de tu aplicación de forma automática y proporcionarán herramientas y pasos específicos para la ejecución del código. En el mundo real, es más probable que utilices las herramientas proporcionadas por el framework para ejecutar tu código, a diferencia de los métodos básicos mostrados en este curso.
Una vez que Chrome recibe nuestro código, V8 hace un rápido escaneo para verificar si tenemos algún error de sintaxis, si no encuentra ninguno, procede a leer nuestro código línea por línea para traducirlo a uno que la computadora entienda, es decir, código binario.
Cuando el motor JS encuentra llamadas a funciones, las añade a la pila de llamadas (siempre que la pila no esté procesando otras llamadas). Si esta función tiene variables, el motor JS las envía al Heap, si tiene otras llamadas (llamadas a funciones) las añade a la parte superior de la Pila, o si es un temporizador o una llamada AJAX, se envía al contenedor de las APIs Web.
Luego comienza a ejecutar el código dentro de cada función y al final de cada una, si no se especificó ningún valor, devuelve indefinido por defecto, por lo que, en este punto, la función se elimina de la Pila, y así sucesivamente hasta que La Pila esté vacía.
La Pila es una estructura de datos que funciona LIFO (Last in first out). Ninguna otra función, sino sólo la que se encuentra en la parte superior de la Pila, estará enfocada o activa, y el motor no se moverá a la siguiente función a menos que la anterior sea eliminada de la Pila.
Para la programación hacen lo mismo que los kits de muebles prefabricados para la construcción de casas: es mucho más fácil coger paneles ya cortados y atornillarlos para hacer una estantería que elaborar el diseño uno mismo, ir a buscar la madera correcta, cortar todos los paneles con el tamaño y la forma adecuados, encontrar los tornillos del tamaño correcto y luego unirlos para hacer una estantería.
Cada pestaña del navegador tiene su propio cubo para ejecutar el código (estos cubos se llaman “entornos de ejecución” en términos técnicos) – esto significa que en la mayoría de los casos el código en cada pestaña se ejecuta completamente por separado, y el código en una pestaña no puede afectar directamente al código en otra pestaña – o en otro sitio web.
Aquí estamos seleccionando un párrafo de texto (línea 1), y luego adjuntando un oyente de eventos a él (línea 3) para que cuando se haga clic en el párrafo, se ejecute el bloque de código updateName() (líneas 5-8). El bloque de código updateName() (este tipo de bloques de código reutilizables se denominan “funciones”) pide al usuario un nuevo nombre, y luego inserta ese nombre en el párrafo para actualizar la pantalla.
Al encontrar este elemento en una página, los navegadores cargarán el archivo myscript.js y lo ejecutarán. Cualquier contenido dentro del elemento script en sí mismo será omitido cuando se proporcione un atributo src. El siguiente ejemplo cargará el archivo myscript.js y ejecutará el código en él, pero no ejecutará la alerta dentro del elemento script en absoluto.
Sin embargo, los beneficios de desarrollo de esto se ven disminuidos por el efecto que esto tiene en el rendimiento de su documento. Esto difiere ligeramente de un navegador a otro, pero el peor de los casos (que lamentablemente sigue siendo el segundo navegador más utilizado) hace lo siguiente:
Una forma de evitarlo es utilizar un script de backend para crear un único archivo a partir de todos los archivos que utilices. De esta manera, se tiene la ventaja de facilitar el mantenimiento y, al mismo tiempo, reducir los retrasos en la visualización de la página web. Hay varios scripts como este en la web – uno de ellos está escrito en PHP y disponible en Ed Eliot.
Los inconvenientes son que sus scripts retrasan la visualización del documento y que el script no tiene acceso al HTML del documento. Por lo tanto, es necesario retrasar la ejecución de cualquier script que cambie el HTML del documento hasta que el documento haya terminado de cargarse. Esto se puede hacer con un manejador onload o con una de las varias soluciones DOMready o contentAvailable que hay en la web – ninguna de las cuales es a prueba de balas y la mayoría de las cuales dependen de hacks específicos del navegador.