Ir al contenido principal

Cómo ejecutar código JavaScript

Introducción

Una de las grandes ventajas de JavaScript es su accesibilidad: para empezar a programar no necesitas instalar complicados entornos de desarrollo ni compiladores. Como lenguaje interpretado, JavaScript puede ejecutarse directamente en cualquier navegador web moderno, lo que lo convierte en una excelente opción para quienes se inician en la programación. En este artículo, exploraremos las diferentes formas de ejecutar código JavaScript, desde las más sencillas hasta las más avanzadas. Aprenderás a poner en marcha tus primeros scripts y descubrirás cuál es el método que mejor se adapta a tus necesidades y nivel de experiencia.

En navegadores web

Los navegadores web son el entorno natural de JavaScript, y proporcionan varias maneras de ejecutar código:

La consola del navegador

La consola del navegador es una herramienta incorporada en todos los navegadores modernos que permite ejecutar código JavaScript de forma inmediata. Es ideal para probar pequeños fragmentos de código, experimentar con nuevos conceptos o depurar problemas.

Para acceder a la consola:

  • Google Chrome: Pulsa F12 o Ctrl+Shift+J (en Windows/Linux) o Cmd+Option+J (en Mac)
  • Mozilla Firefox: Pulsa F12 o Ctrl+Shift+K (en Windows/Linux) o Cmd+Option+K (en Mac)
  • Microsoft Edge: Pulsa F12 o Ctrl+Shift+J
  • Safari: Primero debes activar el "Menú de desarrollo" en Preferencias > Avanzado, y luego seleccionar "Mostrar consola JavaScript"

Una vez abierta la consola, puedes escribir código JavaScript y ver los resultados inmediatamente:

// Escribe esto en la consola y pulsa Enter
console.log("¡Hola desde la consola!");

// Puedes realizar operaciones matemáticas
console.log(5 + 3);

// O crear variables y usarlas
let nombre = "Ana";
console.log("Hola, " + nombre);

La consola mostrará los resultados de cada instrucción justo debajo del código. También muestra errores, advertencias y cualquier otro mensaje generado por tu código o por la página web.

Etiqueta script en HTML

La forma más común de incluir JavaScript en una página web es mediante la etiqueta <script>. Esta etiqueta puede colocarse en el <head> o en el <body> del documento HTML, aunque generalmente se recomienda ponerla justo antes del cierre del <body> para mejorar el rendimiento de carga de la página.

Para crear un archivo HTML básico con JavaScript:

  1. Abre un editor de texto simple (como el Bloc de notas en Windows, TextEdit en Mac, o cualquier editor de código)
  2. Crea un nuevo archivo con el siguiente contenido:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página con JavaScript</title>
</head>
<body>
    <h1>Hola Mundo con JavaScript</h1>
    
    <!-- JavaScript incrustado en la página -->
    <script>
        // Este código se ejecutará cuando la página cargue
        alert("¡Bienvenido a mi página!");
        
        // Podemos modificar el contenido de la página
        document.querySelector("h1").style.color = "blue";
    </script>
</body>
</html>
  1. Guarda el archivo con un nombre como index.html
  2. Abre el archivo en tu navegador (normalmente haciendo doble clic sobre él)

Cuando la página se cargue, verás una alerta con el mensaje "¡Bienvenido a mi página!" y el título "Hola Mundo con JavaScript" cambiará a color azul.

Archivos JavaScript externos

Para proyectos más grandes o cuando quieres reutilizar código en varias páginas, lo más recomendable es colocar el código JavaScript en archivos externos. Esto mejora la organización del código y permite que el navegador almacene en caché los archivos JavaScript, mejorando el rendimiento.

Vamos a crear un proyecto sencillo con archivos separados:

  1. Crea un archivo HTML llamado index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>JavaScript externo</title>
</head>
<body>
    <h1>Mi página web</h1>
    <button id="miBoton">Haz clic aquí</button>
    
    <!-- Enlazamos el archivo JavaScript externo -->
    <script src="app.js"></script>
</body>
</html>
  1. Crea un archivo JavaScript llamado app.js en la misma carpeta:
// Este código se ejecutará cuando la página cargue
console.log("Archivo JavaScript cargado");

// Seleccionamos el botón y añadimos un evento
const boton = document.getElementById("miBoton");

boton.addEventListener("click", function() {
    alert("¡Has hecho clic en el botón!");
});
  1. Abre el archivo index.html en tu navegador
  2. Cuando hagas clic en el botón, verás la alerta con el mensaje

La ventaja de este enfoque es que puedes editar el código JavaScript sin tocar el HTML, y reutilizar el mismo código en múltiples páginas simplemente enlazando el archivo.

Mediante Node.js

Node.js es un entorno de ejecución de JavaScript basado en el motor V8 de Chrome que permite ejecutar código JavaScript fuera del navegador. Esto amplía enormemente las capacidades de JavaScript, permitiéndote crear aplicaciones de servidor, herramientas de línea de comandos, aplicaciones de escritorio y mucho más.

Instalación de Node.js

Para usar Node.js, primero debes instalarlo en tu sistema:

  1. Visita la página oficial de Node.js: https://nodejs.org/
  2. Descarga la versión LTS (Long Term Support) recomendada para la mayoría de usuarios
  3. Sigue las instrucciones de instalación para tu sistema operativo

Para verificar que Node.js se ha instalado correctamente, abre una terminal o línea de comandos y escribe:

node -v

Esto mostrará la versión de Node.js instalada, como por ejemplo v18.12.1.

Ejecutar scripts con Node.js

Existen dos formas principales de ejecutar código JavaScript con Node.js:

1. Modo REPL (Read-Eval-Print Loop)

Node.js incluye un entorno interactivo similar a la consola del navegador:

  1. Abre una terminal o línea de comandos
  2. Escribe node y pulsa Enter
  3. Ahora puedes escribir código JavaScript y ver los resultados inmediatamente:
> console.log("Hola desde Node.js")
Hola desde Node.js
undefined
> let suma = 5 + 3
undefined
> console.log(suma)
8
undefined
> process.exit()  // Para salir del modo REPL

El modo REPL es excelente para probar pequeños fragmentos de código o aprender nuevos conceptos.

2. Ejecutar archivos JavaScript

Para proyectos más grandes, crearás archivos .js y los ejecutarás con Node:

  1. Crea un archivo llamado hola.js con el siguiente contenido:
// Un simple script de Node.js
console.log("¡Hola desde un archivo Node.js!");

// Podemos usar características específicas de Node.js
const os = require("os");
console.log("Estás usando: " + os.platform());
console.log("Tu nombre de usuario es: " + os.userInfo().username);
  1. Abre una terminal en la carpeta donde guardaste el archivo
  2. Ejecuta el script con:
node hola.js

Verás la salida del programa en la terminal.

Este método te permite crear scripts más complejos, utilizar módulos externos y construir aplicaciones completas.

Usando editores online

Si no quieres instalar nada en tu ordenador, los editores online son una excelente alternativa para empezar a programar en JavaScript. Estos servicios proporcionan un entorno completo de desarrollo en tu navegador.

JSFiddle

JSFiddle es una plataforma que permite crear y compartir pequeños proyectos web:

  1. Visita JSFiddle.net
  2. Verás cuatro paneles: HTML, CSS, JavaScript y Resultado
  3. Escribe tu código JavaScript en el panel correspondiente
  4. Haz clic en "Run" para ejecutar el código y ver el resultado
  5. Puedes guardar tu "fiddle" y compartirlo mediante un enlace

Es ideal para ejemplos pequeños o para compartir código con otros.

CodePen

CodePen es similar a JSFiddle pero con una interfaz diferente y más características sociales:

  1. Visita CodePen.io
  2. Crea una cuenta o utiliza la versión gratuita
  3. Crea un nuevo "Pen" con el botón correspondiente
  4. Escribe tu código HTML, CSS y JavaScript en los paneles correspondientes
  5. El resultado se actualiza automáticamente (o puedes configurarlo para actualizarse manualmente)

CodePen es muy popular entre diseñadores y desarrolladores front-end para mostrar efectos y componentes interactivos.

StackBlitz

StackBlitz va un paso más allá, ofreciendo un entorno de desarrollo completo en el navegador:

  1. Visita StackBlitz.com
  2. Puedes comenzar con una plantilla (como JavaScript, React, Angular, etc.)
  3. Verás un editor de código completo con estructura de archivos
  4. El resultado se muestra en una ventana integrada

StackBlitz es especialmente útil para proyectos más grandes o para trabajar con frameworks como React, Angular o Vue.

Jupyter Notebooks (Observable)

Observable es una plataforma basada en notebooks (similar a Jupyter) específicamente diseñada para JavaScript:

  1. Visita Observable.hq
  2. Puedes explorar notebooks existentes o crear uno nuevo
  3. Escribe código JavaScript en celdas individuales
  4. Cada celda se ejecuta independientemente y puede mostrar resultados

Observable es excelente para análisis de datos, visualizaciones y para explicar conceptos paso a paso.

Entornos de sandbox

Los entornos de sandbox son plataformas que te permiten ejecutar código en un entorno aislado, lo que es ideal para aprender y experimentar.

RunJS

RunJS es una aplicación de escritorio para macOS y Windows diseñada específicamente para experimentar con JavaScript:

  1. Descarga e instala RunJS desde su sitio web oficial
  2. Escribe código JavaScript en el editor
  3. Los resultados se muestran automáticamente en el panel derecho
  4. Soporta módulos ES6, consola interactiva y más

RunJS es como tener una consola de navegador mejorada con un editor de código incorporado.

Replit

Replit es una plataforma de desarrollo colaborativo en la nube:

  1. Visita Replit.com y crea una cuenta gratuita
  2. Crea un nuevo "Repl" y selecciona JavaScript como lenguaje
  3. Escribe y ejecuta código en el editor integrado
  4. Puedes incluso ejecutar aplicaciones Node.js completas

Replit es especialmente útil para proyectos educativos y para colaborar con otros programadores en tiempo real.

Comparativa de métodos

Aquí tienes una tabla que resume las diferentes formas de ejecutar JavaScript para ayudarte a elegir la más adecuada según tu caso:

Método Ventajas Desventajas Ideal para
Consola del navegador No requiere instalación, inmediato Limitado, no guarda el código Pruebas rápidas, depuración
Script en HTML Fácil de empezar, muestra resultados visuales Mezcla HTML y JS, puede ser desordenado Páginas web simples, aprender DOM
Archivos JS externos Organizado, reutilizable, profesional Requiere servidor para algunas características Proyectos web reales
Node.js Potente, acceso a sistema de archivos y más Requiere instalación, curva de aprendizaje Aplicaciones de servidor, herramientas
Editores online Sin instalación, fácil compartir Depende de conexión a internet Pruebas, ejemplos, aprendizaje
Entornos sandbox Entorno controlado, configurado Algunos son de pago Experimentación, prototipado

Recomendaciones según tu nivel

Dependiendo de tu experiencia, estos son los métodos que te recomendamos:

Para principiantes absolutos:

  1. Consola del navegador: Para tus primeros pasos y entender conceptos básicos
  2. Editores online como JSFiddle o CodePen: Para crear ejemplos pequeños sin preocuparte por configuraciones

Para principiantes con algo de experiencia:

  1. Scripts en HTML: Para entender cómo se integra JavaScript en páginas web
  2. Archivos JavaScript externos: Para aprender a estructurar mejor tu código

Para nivel intermedio:

  1. Node.js: Para explorar JavaScript más allá del navegador
  2. StackBlitz o Replit: Para proyectos más complejos sin configuración local

Resumen

En este artículo hemos explorado las diversas formas de ejecutar código JavaScript, desde la simple consola del navegador hasta entornos más complejos como Node.js. Cada método tiene sus propias ventajas y casos de uso ideales. La buena noticia es que JavaScript es increíblemente flexible y accesible, lo que te permite empezar a programar sin importar tus circunstancias o nivel de experiencia.

Para seguir este tutorial, te recomendamos comenzar con la consola del navegador para los ejemplos simples, y luego avanzar hacia archivos HTML y JavaScript para proyectos más estructurados. A medida que adquieras confianza, puedes experimentar con Node.js para ampliar tus horizontes.

En el próximo artículo, exploraremos las herramientas básicas que harán tu experiencia de desarrollo con JavaScript más eficiente y agradable, desde editores de código hasta extensiones y ayudantes de productividad.

Volver arriba