JavaScript en el navegador y en el servidor

Angela Sofíá Osorio

Tiempo de lectura 3 minutes

Fecha de publicación 11 de agosto de 2025

JavaScript es el lenguaje más popular del desarrollo web moderno. Está presente tanto en el frontend (navegador) como en el backend (servidor), y permite crear desde botones interactivos hasta aplicaciones web completas con bases de datos.

En este artículo aprenderás:

Cómo probar JavaScript en la consola del navegador
Cómo usarlo en archivos HTML
Cómo trabajar con Node.js en tu computadora
La diferencia entre ejecutarlo en el navegador y en el servidor

🧪 1. JavaScript en la consola del navegador

¿Sabías que puedes ejecutar código JavaScript sin instalar nada? Solo necesitas un navegador moderno.

📍 ¿Cómo abrir la consola?

Abre Chrome, Firefox o Edge.
Presiona F12 o Ctrl + Shift + I (Windows/Linux) o Cmd + Option + I (Mac).
Ve a la pestaña “Consola” (Console).

Ahí puedes escribir y ejecutar código JS de inmediato.

✏️ Ejemplos rápidos

2 + 2
// ➜ 4

console.log('¡Hola mundo!')
// ➜ ¡Hola mundo!

document.body.style.backgroundColor = 'lightgreen'
// Cambia el fondo de la página actual

2 + 2
// ➜ 4

console.log('¡Hola mundo!')
// ➜ ¡Hola mundo!

document.body.style.backgroundColor = 'lightgreen'
// Cambia el fondo de la página actual

JavaScript

La consola es ideal para experimentar y entender cómo funciona JavaScript, especialmente cuando estás empezando.p

🌐 2. JavaScript en el navegador (HTML + JS)

Cuando visitas una página web, probablemente hay JavaScript ejecutándose para dar vida a botones, formularios, animaciones y más.

🔌 Opción 1: Código JS dentro del HTML

<!DOCTYPE html>
<html <em>lang</em>="es">
<head>
  <meta <em>charset</em>="UTF-8" />
  <title>JS en el navegador</title>
</head>
<body>
  <h1>Hola desde el navegador</h1>
  <script>
    alert('¡Hola desde JavaScript!');
  </script>
</body>
</html>

<!DOCTYPE html>
<html <em>lang</em>="es">
<head>
  <meta <em>charset</em>="UTF-8" />
  <title>JS en el navegador</title>
</head>
<body>
  <h1>Hola desde el navegador</h1>
  <script>
    alert('¡Hola desde JavaScript!');
  </script>
</body>
</html>

JavaScript

📁 Opción 2: Archivo JavaScript externo

<!DOCTYPE html>
<html <em>lang</em>="es">
<head>
  <meta <em>charset</em>="UTF-8" />
  <title>JS externo</title>
</head>
<body>
  <h1>Archivo JavaScript</h1>
  <script <em>src</em>="main.js"></script>
</body>
</html>

<!DOCTYPE html>
<html <em>lang</em>="es">
<head>
  <meta <em>charset</em>="UTF-8" />
  <title>JS externo</title>
</head>
<body>
  <h1>Archivo JavaScript</h1>
  <script <em>src</em>="main.js"></script>
</body>
</html>

JavaScript

Archivo main.js:

Copy

console.log('¡Este mensaje viene de main.js!');

console.log('¡Este mensaje viene de main.js!');

JavaScript

💡 Mini ejemplo interactivo

<button id="miBotonHaz clic"> </button>

<script>
  const boton = document.getElementById('miBoton');
  boton.addEventListener('click', () => {
    boton.textContent = '¡Gracias por hacer clic!';
  });
</script>

<button id="miBotonHaz clic"> </button>

<script>
  const boton = document.getElementById('miBoton');
  boton.addEventListener('click', () => {
    boton.textContent = '¡Gracias por hacer clic!';
  });
</script>

JavaScript

🖥️ 3. JavaScript en el servidor con Node.js

JavaScript también puede ejecutarse fuera del navegador, gracias a Node.js. Con él puedes crear servidores, conectarte a bases de datos o crear APIs.

📦 ¿Qué necesitas?

Instalar Node.js
Instalar Visual Studio Code (VSCode)

🧑‍💻 Paso a paso con Node y VSCode

1. Crea un archivo `app.js`

// app.js
console.log('¡Hola desde Node.js!');

// app.js
console.log('¡Hola desde Node.js!');

JavaScript

2. Abre la terminal de VSCode

Presiona Ctrl + ñ o desde el menú: Terminal > Nueva terminal.

3. Ejecuta el archivo con Node

node app.js

node app.js

JavaScript

Verás esto en la terminal:

¡Hola desde Node.js!

¡Hola desde Node.js!

JavaScript

🧠 Otro ejemplo más práctico

const nombre = 'Sofía';
console.log(`Bienvenida, ${nombre}!`);

const suma = (<em>a</em>, <em>b</em>) => a + b;
console.log('Resultado:', suma(10, 5)); // Resultado: 15

const nombre = 'Sofía';
console.log(`Bienvenida, ${nombre}!`);

const suma = (<em>a</em>, <em>b</em>) => a + b;
console.log('Resultado:', suma(10, 5)); // Resultado: 15

JavaScript

🌍 Servidor básico con Node

// servidor.js
const http = require('http');

const servidor = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('¡Hola desde el servidor con Node.js!');
});

servidor.listen(3000, () => {
  console.log('Servidor corriendo en http://localhost:3000');
});

// servidor.js
const http = require('http');

const servidor = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('¡Hola desde el servidor con Node.js!');
});

servidor.listen(3000, () => {
  console.log('Servidor corriendo en http://localhost:3000');
});

JavaScript

Ejecuta con:

node servidor.js

node servidor.js

JavaScript

Y visita http://localhost:3000 en tu navegador.

🆚 4. Diferencias entre JS en el navegador y en el servidor

Característica	Navegador	Node.js
Entorno	Chrome, Firefox, Edge…	Servidor local o en la nube
Acceso al DOM	✅ Sí	❌ No
Acceso al sistema de archivos	❌ No	✅ Sí
Uso común	UI, eventos, interacciones	APIs, bases de datos, lógica
Módulos	`import/export`	`require()` o `import`

🧭 Conclusión

JavaScript es un lenguaje versátil y poderoso que puedes usar:

En el navegador, para interactuar con el usuario
En el servidor, para manejar la lógica de tu aplicación

💬 Empieza experimentando en la consola del navegador, crea archivos .js en VSCode, y poco a poco profundiza en el desarrollo web moderno con Node.js y frameworks como Express.p

✅ Recursos recomendados

Contents

1 🧪 1. JavaScript en la consola del navegador
- 1.1 📍 ¿Cómo abrir la consola?
- 1.2 ✏️ Ejemplos rápidos
2 🌐 2. JavaScript en el navegador (HTML + JS)
3 🖥️ 3. JavaScript en el servidor con Node.js
4 🆚 4. Diferencias entre JS en el navegador y en el servidor
5 🧭 Conclusión
- 5.1 ✅ Recursos recomendados