Primeros pasos con JavaScript

1.Qué es JavaScript

JavaScript es el lenguaje de programación de la web. Mientras HTML da la estructura y CSS el aspecto, JavaScript da el comportamiento: reacciona cuando alguien pulsa un botón, valida un formulario, muestra datos que llegan de internet, guarda información, anima elementos y mucho más.

Un lenguaje de programación te permite dar instrucciones a la computadora: guardar datos, tomar decisiones, repetir tareas y reaccionar a lo que ocurre. Esa es la diferencia con HTML y CSS, que solo describen.

Qué vas a poder hacer al final del curso

• Escribir programas con variables, decisiones, bucles y funciones.
• Trabajar con listas de datos (arrays) y objetos.
• Cambiar la página en vivo y reaccionar a clics, teclas y formularios.
• Pedir datos a internet y guardar información en el navegador.
• Construir una aplicación de tareas completa.

2.Tu primer programa: la consola

Antes de tocar la página, empecemos por lo más simple: pedirle a JavaScript que escriba un mensaje. Para eso existe console.log(), que muestra cualquier valor en la consola, una herramienta pensada para desarrolladores.

Pulsa Ejecutar y mira la consola de abajo. Cambia los mensajes y vuelve a ejecutar. Equivocarte aquí no cuesta nada.

La consola de tu navegador

Todos los navegadores traen una consola real. Ábrela con F12 y elige la pestaña Consola. Puedes escribir código ahí y ejecutarlo con Enter, y es donde aparecen los errores de cualquier página.

▶ Ver animación

3.Dónde se escribe JavaScript en una página

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi página</title>
  <script src="js/app.js" defer></script>
</head>
<body>
  <h1 id="titulo">Hola</h1>
</body>
</html>

4.Las reglas básicas de escritura

Prueba a quitar los // de la tercera línea y vuelve a ejecutar. Comentar código es la forma rápida de desactivar algo sin borrarlo.

5.Leer los errores: tu mejor maestro

Al programar vas a ver muchos errores. Es completamente normal y todo el mundo los ve, siempre. La consola te dice qué pasó y dónde. Aprender a leerlos es la habilidad más útil de este curso.

Lee el mensaje rojo de la consola. Arréglalo creando la variable (const nombre = "Ana"; antes de usarla) y vuelve a ejecutar.

1. Lee el mensaje completo, no solo el principio.
2. Fíjate en la línea que indica.
3. Busca la errata más probable: nombres, comillas, paréntesis.
4. Prueba con console.log para ver qué valen las variables.

6.Tu primera interacción con la página

JavaScript puede leer y cambiar el HTML. Para empezar, una sola idea: buscar un elemento por su id y cambiar su texto.

const saludo = document.getElementById("saludo");   // 1. buscar el elemento
saludo.textContent = "¡Hola desde JavaScript!";      // 2. cambiar su texto

Verás cómo cambia el contenido de la Página (resultado). En la lección 8 estudiaremos el DOM a fondo; por ahora basta con que sepas que document representa la página y que con él puedes tocar cualquier elemento.

7.alert, confirm y prompt: pequeños diálogos

JavaScript puede abrir ventanas del navegador para avisar (alert), preguntar sí o no (confirm) y pedir un texto (prompt):

alert("¡Hola!");                                  // un aviso
const ok = confirm("¿Quieres continuar?");         // true o false
const nombre = prompt("¿Cómo te llamas?");         // el texto, o null si cancela

8.Buenas costumbres desde el primer día

• Escribe poco y prueba seguido. Ejecuta cada pocas líneas.
• Nombra las cosas con claridad: precioTotal en vez de x.
• Usa console.log para investigar: mira qué valen las cosas.
• Comenta el «por qué», no el «qué».
• Sangra (indenta) el código para que se lea.
• Lee la documentación: MDN es tu mejor aliada.
• Equivocarse es parte del proceso. Nadie escribe programas perfectos a la primera.

9.Errores frecuentes al empezar

• Olvidar cerrar una comilla, paréntesis o llave.
• Confundir mayúsculas y minúsculas: getElementById, no getelementbyid.
• Ejecutar el script antes de que exista el elemento (olvidar defer o ponerlo antes del HTML).
• Esperar que el código «recuerde» algo que no guardaste en una variable.
• No mirar la consola cuando algo no funciona.
• Copiar y pegar sin entender: cambia algo del ejemplo y observa qué pasa.
• Usar comillas «tipográficas» (“ ”) copiadas de un documento: JavaScript solo entiende las rectas (" ").

10.Glosario