Crear y ejecutar un archivo JavaScript en Chrome

1. Crear y ejecutar un archivo JavaScript en Chrome usando las herramientas para desarrolladores
2. Cree y ejecute un archivo JavaScript en Chrome usando node.js

Como desarrollador web, sin importar lo que haga, ya sea front-end o back-end, siempre tiene que trabajar con JavaScript de una forma u otra.

Escribir, ajustar y ejecutar el código JavaScript dentro del navegador Chrome siempre se realiza durante nuestro desarrollo. Generalmente, ejecutamos archivos JavaScript dentro del navegador conectando el archivo JavaScript con el documento HTML.

Pero este no es siempre el caso. A veces, necesitamos ejecutar los archivos JS dentro del navegador sin la ayuda de un documento HTML.

Entonces, para ejecutar los archivos JavaScript dentro del navegador Chrome, hay dos formas. Una forma es crear un archivo JavaScript dentro de las herramientas de desarrollo de Chrome o en el sistema local y luego ejecutar el archivo dentro del navegador Chrome.

Veremos prácticamente ambas formas a continuación.

Crear y ejecutar un archivo JavaScript en Chrome usando las herramientas para desarrolladores

La forma más sencilla de crear y ejecutar un archivo JavaScript es mediante las herramientas para desarrolladores de Chrome.

Pasos para crear y ejecutar archivos JavaScript en herramientas de desarrollo:

• Abra un navegador Chrome y presione F12 en su teclado para abrir las herramientas de desarrollo de Chrome. Alternativamente, también puede hacer clic con el botón derecho en cualquier lugar dentro del navegador y seleccionar Inspect de la lista para abrir las herramientas de desarrollo, como se muestra a continuación.

• Después de que las herramientas de desarrollo de Chrome estén abiertas, haga clic en la pestaña Sources, luego seleccione la pestaña Snippets. Si no puede ver la pestaña de fragmentos, haga clic en la flecha en la parte superior para acceder a ella.

• Para crear un archivo JavaScript, haga clic en New Snippet para crear y dar cualquier nombre a ese archivo. Aquí, le hemos dado myFile como nombre de archivo.

• Aquí dentro, puede escribir o pegar su código JavaScript usando la combinación de teclas Ctrl + V.

A continuación se muestra el código que hemos escrito dentro de las herramientas de desarrollo.

Aquí, acabamos de crear un elemento h1 y agregamos una oración dentro de él. Luego mostramos este texto en la parte superior dentro de la etiqueta body usando el método de prefijo.

var text = document.createElement('h1');
text.innerHTML = 'This is Google\'s webpage';

document.body.prepend(text);

También puede actualizar la página mientras realiza cambios dentro del archivo.

Esto no vaciará el código dentro del archivo. Para ejecutar el código JavaScript que ha escrito, puede presionar Ctrl + Enter en la palabra clave.

Si tiene algunas declaraciones de la consola en su código, esas cosas se mostrarán dentro de la ventana de la consola en la parte inferior de la pantalla, como se muestra en la imagen de arriba. Tenga en cuenta que cualquier código que escriba dentro de este archivo solo estará disponible para usted hasta que se abra el navegador.

Tan pronto como cierre el navegador Chrome, todos sus cambios se perderán. Por lo tanto, siempre es mejor crear un archivo separado y luego ejecutarlo dentro del navegador Chrome.

Esto es lo que veremos en la siguiente sección.

Cree y ejecute un archivo JavaScript en Chrome usando node.js

Almacenar código JavaScript dentro de un archivo separado siempre es mejor. Así es como lo hacemos normalmente cuando creamos sitios web listos para producción.

Crear un archivo JavaScript es simple y todos saben cómo hacerlo. Simplemente agregue la extensión .js al final del nombre del archivo y boom, el archivo ahora es un archivo JavaScript.

Aunque, la parte más difícil para la mayoría de las personas es cómo ejecutar este archivo JavaScript dentro del navegador. Las personas generalmente conectan JavaScript a un documento HTML y luego lo ejecutan dentro del navegador Chrome.

Pero aquí no nos interesa eso. Aquí, nos centraremos en ejecutar directamente el archivo JavaScript dentro del navegador.

Esto es posible con la ayuda de node.js, que es un marco de JavaScript. Puede descargar el marco node.js desde el sitio web oficial.

Después de instalar el node.js en su sistema, debe abrir la ventana de la terminal y navegar hasta la ubicación donde se almacena el archivo JavaScript. Aquí, también necesitaremos una biblioteca llamada express.js.

Para instalar express usando el siguiente comando.

npm i express

Luego, dentro del archivo JavaScript, importe la biblioteca express e inicialice una aplicación express como se muestra a continuación.

const express = require('express');
const app = express();

app.get('/', (req, res) => {res.send('<h1>This is Google\'s webpage</h1>')})

app.listen(4000, () => {
  console.log(`Server is running on port 4000`);
});

Aquí, también tenemos que especificar el puerto en el que se ejecutará nuestro servidor. Hemos utilizado 4000 como número de puerto en este caso.

Puede especificar cualquier número como número de puerto y, luego, mediante la solicitud de obtención en la ruta /, puede enviar el código JavaScript. Este código se mostrará en el navegador Chrome.

Aquí, imprimiremos un texto dentro de la ventana de la consola del navegador escribiendo el código anterior dentro de un archivo llamado index.js, y luego ejecutaremos este archivo usando node.js.

Para ejecutar el archivo JavaScript, ejecute el comando node filename.js. Asegúrese de reemplazar el filename con el nombre de archivo de JavaScript que desea ejecutar, como se muestra a continuación.

node index.js

Ahora dirígete a la URL localhost:4000, que verás como salida en el navegador.

El contenido que hayamos enviado mediante el método send() se mostrará en pantalla. Así es como creamos y ejecutamos un archivo JavaScript dentro del navegador Chrome usando node.js y express.js.