This content originally appeared on DEV Community and was authored by Martín Aguirre
Introducción
JavaScript es un lenguaje de programación orientado a objetos, de tipado dinámico, principalmente eficaz para el desarrollo de proyectos web interactivos. Puede manipular poderosamente la estructura de las páginas web y ofrece una amplia gama de funciones y flexibilidades. Por otro lado, con la ayuda de Node.js, también puede funcionar elegantemente en el servidor como una alternativa de desarrollo backend a otros lenguajes, destacando por su velocidad, asincronismo y modularidad.
Navegador vs Node.js
JavaScript se creó originalmente para ejecutarse en el navegador, donde da vida a los sitios web mediante interactividad, animaciones y comportamiento dinámico. Todos los navegadores modernos actuales cuentan con un motor JavaScript integrado que lo hace posible.
Pero JavaScript no se limita solo al navegador. Gracias a Node.js, también puede ejecutarse directamente en tu computadora, fuera de una página web. Esto abrió la puerta a su uso en el backend, potenciando servidores, gestionando archivos y creando aplicaciones que van mucho más allá del navegador.
En este artículo, exploraremos ambos enfoques. Comenzaremos con el navegador, el entorno tradicional de JavaScript, y luego pasaremos a Node.js para ver cómo se puede usar el mismo lenguaje en un entorno completamente diferente.
JavaScript en el Navegador
La manera tradicional:
- Crear una carpeta o directorio
- Abrirlo usando un editor de texto (Visual Studio Code, como recomendación principal)
- Crear un archivo HTML denominado
index.html - Crear un archivo JavaScript denominado
script.js - Agregar tu código dentro de
script.jsy conectarlo al archivo HTML
Código HTML mínimo para copiar y pegar en tu archivo index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Práctica en JavaScript</title>
</head>
<body>
<!-- JavaScript se cargará al final -->
<script src="script.js"></script>
</body>
</html>
Tenemos una estructura HTML básica, con una etiqueta script donde se inyecta el código JavaScript con la ayuda del atributo src donde referenciamos la ubicación de nuestro archivo script.js, que en este caso está en la misma carpeta que index.html.
Código JavaScript mínimo para copiar y pegar en tu archivo script.js:
console.log('Hola Mundo Desde Script.js')
Ahora, abrí el archivo index.html en tu navegador.
Para ver el resultado, abrí la consola en herramientas para desarrolladores:
- En Windows/Linux: presionar F12 o Ctrl + Shift + I
- En macOS: presionar Cmd + Option + I
En este punto, deberías ver “Hola Mundo Desde Script.js” impreso en la consola de tu navegador.
Por ejemplo:
Un Poco Más de Interacción
Imprimir en la consola es un recurso muy útil en JavaScript, pero ahora modifiquemos algo en la página. Actualizá el ‘cuerpo‘ (body) de tu HTML así:
<body>
<h1 id="title">¡Bienvenido!</h1>
<button onclick="changeText()">Clickeame</button>
<script src="script.js"></script>
</body>
Y dentro de script.js:
function changeText() {
const title = document.getElementById("title")
title.textContent = "¡Hiciste click en el botón!"
}
Ahora, cuando abras la página y hagas click en el botón, el texto en el <h1> se actualizará.
¡Felicitaciones! — Acabás de aprender un poco sobre la manipulación del DOM y sobre eventos, dos de las ideas más importantes en JavaScript ejecutado en el navegador.
Otras Maneras de Mostrar Mensajes
Aparte de console.log, JavaScript también proporciona ventanas emergentes:
alert("¡Hola Mundo!") // Muestra un 'alert' en el navegador
prompt("¿Cuál es tu nombre?") // Solicita al usuario que ingrese un valor
Estas son bastante buenas para experimentar, pero en proyectos reales, los desarrolladores generalmente prefieren actualizar o modificar la página, o usar la consola.
Consejo Sobre Herramientas Para Desarrolladores
La consola del navegador no solo sirve para registrar mensajes; también es donde aparecen errores y advertencias.
Si algo no funciona, revisá primero la consola. Es tu mejor aliada para la depuración.
En este punto, ya entendés cómo:
- Ejecutar JavaScript en el navegador
- Registrar mensajes y errores
- Interactuar con la página (manipulación del DOM)
- Gestionar eventos simples de usuario
Esto ya sienta unas bases sólidas. A continuación, veamos cómo se puede ejecutar JavaScript fuera del navegador con Node.js.
JavaScript en Node.js
Hasta ahora, hemos visto cómo se ejecuta JavaScript dentro del navegador. Pero JavaScript también puede ejecutarse fuera del navegador gracias a Node.js.
Node.js es un entorno de ejecución que te permite ejecutar JavaScript directamente en tu computadora. Esto es extremadamente potente, ya que te permite crear servidores backend, APIs, herramientas de procesamiento de archivos y muchas más funciones espectaculares que el navegador por sí solo no puede hacer.
Instalar Node.js
- Ir a https://nodejs.org
- Descargar la versión Long-Term Support, o LTS. (recomendada para la mayoría de los usuarios)
- Instalar todo siguiendo el asistente de configuración (la configuración predeterminada está bien)
- Verificar la instalación abriendo la terminal (o símbolo del sistema) y escribiendo:
node -v
Si todo salió bien, debería imprimirse el número de versión instalada (por ejemplo: v20.0.0).
Tu Primer Script en Node.js
Creamos una nueva carpeta y un archivo llamado app.js:
// app.js
console.log("Hola Mundo Desde Node.js")
Ahora, abrí la terminal y ejecutá el siguiente comando:
node app.js
El resultado que deberías ver:
Hola Mundo Desde Node.js
¡Felicitaciones! — Acabas de ejecutar JavaScript fuera del navegador con Node.js.
¿Cuál Es La Diferencia?
En el navegador, JavaScript tiene acceso al DOM (estructura de la página web), eventos como onclick y APIs específicas del navegador como alert o prompt.
En Node.js, esos recursos no existen. En cambio, Node te da acceso a cosas como:
- El sistema de archivos (lectura/escritura de archivos)
- La información del sistema operativo de su computadora
- Redes (creación de servidores, gestión de solicitudes HTTP)
Un Ejemplo Simple de Servidor HTTP
Una de las cosas más comunes que se hacen con Node.js es crear un servidor web simple. Acá tenés el ejemplo más pequeño usando el módulo http integrado de Node:
// server.js
const http = require("http")
const server = http.createServer((req, res) => {
res.writeHead(200, { "Content-Type": "text/plain" })
res.end("Hola Mundo Desde Mi Servidor En Node.js!")
})
server.listen(3000, () => {
console.log("Servidor corriendo en http://localhost:3000")
})
Ejecutá el servidor con:
node server.js
Luego, abrí el navegador y visitá http://localhost:3000
Deberías ver lo siguiente:
Hola Mundo Desde Mi Servidor En Node.js!
Por ejemplo:
Finalmente, presioná Ctrl + C para detener el servidor y liberar el puerto.
En este punto, ya tenés una comprensión básica de:
- Cómo instalar y ejecutar Node.js
- La diferencia entre ejecutar JavaScript en el navegador y en Node.js
- Cómo crear y ejecutar tu primer servidor web sencillo en Node.js
Conclusión
En este artículo, aprendiste a ejecutar JavaScript en dos entornos diferentes:
- Dentro del navegador, donde puede interactuar con páginas web, gestionar eventos de usuario y actualizar el DOM.
- Dentro de Node.js, donde se ejecuta directamente en tu computadora y puede trabajar con archivos, redes y servidores.
Es importante comprender ambos aspectos, ya que JavaScript es uno de los pocos lenguajes que pueden impulsar todo el stack web, desde la interfaz de usuario hasta la lógica del servidor que se ejecuta detrás del telón.
Gracias por tu tiempo.
Si te interesa apoyar mis escritos, podés comprarme un café aquí: PayPal.me/martinxcvi 
Foto de portada por Growtika en Unsplash
This content originally appeared on DEV Community and was authored by Martín Aguirre