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 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
F12oCtrl+Shift+J(Cmd+Option+Jen Mac). - Firefox: pulsa
F12oCtrl+Shift+K(Cmd+Option+Ken 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?
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.htmlcon el código de arriba. - Ábrelo en el navegador y abre la consola con F12.
- Cambia el texto del
console.logpor 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.
