Lección 3 de 13 · Lectura y práctica

Configurando tu entorno de desarrollo

Preparando tu entorno de desarrollo Antes de escribir código necesitas un lugar donde escribirlo y un lugar donde ejecutarlo. La buena noticia: para empezar con JavaScript solo necesitas dos herramientas gratuitas y tu.

Del concepto a la práctica

Taller de esta lección

Un entorno mínimo debe permitir editar, ejecutar y observar sin añadir herramientas innecesarias. Para una primera prueba basta un archivo local que contenga un script y una salida visible en la consola. La decisión importante es comprobar que el archivo que editas es el mismo que el navegador ejecuta.

Ejemplo resuelto

html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Prueba JavaScript</title>
  </head>
  <body>
    <script>
      const mensaje = "Entorno listo";
      console.log(mensaje);
    </script>
  </body>
</html>

La salida esperada en la consola es Entorno listo.

Pruébalo

Guarda el archivo con una extensión HTML.
Ábrelo localmente en el navegador.
Observa la consola y cambia el mensaje a Prueba 2.
Recarga y verifica que aparece el texto nuevo.

Error frecuente: editar una copia distinta de la que está abierta. Corrige cerrando la pestaña, abre de nuevo el archivo guardado y repite la prueba.

Comprueba tu resultado

La consola debe mostrar exactamente Entorno listo antes del cambio y Prueba 2 después de recargar. Si no cambia, revisa el nombre del archivo y la ruta local; no añadas dependencias para resolver un problema de ubicación.

Diagrama de decisión con ramas Sí y No y un bucle que procesa cada elemento de una lista. — **Cómo avanza un programa**
Una condición decide qué camino ejecuta el programa. Un bucle repite una operación mientras queden elementos, y termina cuando la lista se agota. Separar ambas ideas ayuda a seguir el flujo y comprobar casos límite.
Ver la infografía en tamaño completo ↗

Preparando tu entorno de desarrollo

Antes de escribir código necesitas un lugar donde escribirlo y un lugar donde ejecutarlo. La buena noticia: para empezar con JavaScript solo necesitas dos herramientas gratuitas y tu computadora actual. ¡Es más sencillo de lo que parece!

1. El navegador web

Tu navegador ya incluye todo lo necesario para ejecutar JavaScript. Recomendamos Chrome o Firefox por sus excelentes herramientas de desarrollo. La consola integrada te deja escribir y ejecutar código al instante.

Abrir la consola del navegador

Chrome o Edge: pulsa F12 o Ctrl+Shift+J (Cmd+Option+J en Mac).
Firefox: pulsa F12 o Ctrl+Shift+K (Cmd+Option+K en Mac).

2. Editor de código

Recomendamos Visual Studio Code (VS Code): es gratuito, rápido y tiene extensiones que te ayudan a escribir mejor código.

Extensiones útiles para empezar

ESLint: detecta errores y malas prácticas mientras escribes.
Prettier: formatea el código automáticamente al guardar.
Live Server: recarga la página en el navegador cada vez que guardas.

Consejo

Activa "Format On Save" en VS Code (Configuración → busca format on save) para que Prettier ordene tu código solo. Te ahorra tiempo y evita discusiones de estilo.

3. Tu primer programa

Crea un archivo llamado index.html con este contenido y ábrelo con doble clic en tu navegador:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primer JavaScript</title>
</head>
<body>
  <h1>Hola Mundo</h1>
  <script>
    console.log("¡Hola desde JavaScript!");
    document.querySelector("h1").textContent = "¡Funciona!";
  </script>
</body>
</html>

Al abrirlo verás el título cambiar y, en la consola (F12), aparecerá tu mensaje. ¡Acabas de ejecutar tu primer código JavaScript!

¿Y si quiero ejecutar JavaScript fuera del navegador?

Puedes instalar Node.js desde nodejs.org. Luego, en una terminal, ejecutas node mi-archivo.js y verás la salida directamente. Lo usaremos cuando hablemos del lado del servidor.

¿Qué tecla abre las herramientas de desarrollo en la mayoría de navegadores?

F12 abre las DevTools, donde está la consola. También funcionan los atajos Ctrl+Shift+J (Chrome) o Ctrl+Shift+K (Firefox).

Ejercicio práctico

Objetivo: tener un entorno funcionando y ejecutar tu primer programa.

Instala VS Code y las extensiones ESLint y Prettier.
Crea el archivo index.html con el código de arriba.
Ábrelo en el navegador y abre la consola con F12.
Cambia el texto del console.log por tu nombre y vuelve a cargar la página.

Entregable: una captura de pantalla de tu consola mostrando tu mensaje personalizado.

Para recordar

Solo necesitas un navegador y un editor para empezar.
F12 abre la consola, tu herramienta principal de pruebas.
VS Code + ESLint + Prettier es una base sólida y gratuita.

Sigue con JavaScript Fundamentals

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

← Anterior: Que es JavaScript?Siguiente: La consola y los comentarios →Entrar y guardar mi progreso