Introducción a JavaScript

¡JavaScript es lo que hace las páginas interactivas! Vamos a empezar tu jornada de programación.

Qué Hace JavaScript

Responde a clics
Valida formularios
Crea animaciones
Carga datos sin recargar
Prácticamente todo lo interactivo

Dónde Escribir JavaScript

1. En HTML (etiqueta script)

html

<body>    <h1>Mi Página</h1>     <script>        alert("¡Hola, Mundo!");    </script></body>

2. Archivo externo (recomendado)

html

<body>    <h1>Mi Página</h1>     <script src="script.js"></script></body>

javascript

// script.jsalert("¡Hola, Mundo!");

Importante: ¡Pon <script> al final del body para que HTML cargue primero!

Consola: Tu Mejor Amigo

Abre el navegador (F12 → Console) y escribe:

javascript

console.log("¡Hola!");

console.log() muestra mensajes en la consola. ¡Super útil para probar!

Comentarios

javascript

// Comentario de una línea /*   Comentario   de múltiples   líneas*/

Tu Primer Programa

Crea script.js:

javascript

// Mostrar mensaje en consolaconsole.log("¡El script está funcionando!"); // Variableslet nombre = "María";let edad = 25; // Mostrar variablesconsole.log("Nombre:", nombre);console.log("Edad:", edad); // Cálculolet añoNacimiento = 2026 - edad;console.log("Año de nacimiento:", añoNacimiento);

¡Abre la página y revisa la consola!

Interactuando con el Usuario

alert - Mostrar mensaje

javascript

alert("¡Bienvenido a mi sitio!");

confirm - Pregunta Sí/No

javascript

let respuesta = confirm("¿Quieres continuar?");console.log(respuesta); // true o false

prompt - Obtener entrada

javascript

let nombre = prompt("¿Cuál es tu nombre?");console.log("Hola, " + nombre);

Práctica: Saludo Interactivo

javascript

// Obtener nombrelet nombre = prompt("¿Cuál es tu nombre?"); // Obtener edadlet edad = prompt("¿Cuántos años tienes?"); // Mostrar saludolet mensaje = "Hola, " + nombre + "! Tienes " + edad + " años.";alert(mensaje); // Calcular año de nacimientolet añoNacimiento = 2026 - edad;console.log(nombre + " nació alrededor de " + añoNacimiento);

Template Literals (Moderno)

En vez de concatenar con +, usa comillas invertidas:

javascript

let nombre = "María";let edad = 25; // Antiguo (concatenación)let msg1 = "Hola, " + nombre + "! Tienes " + edad + " años."; // Moderno (template literal)let msg2 = `Hola, ${nombre}! Tienes ${edad} años.`;

¡Mucho más fácil de leer!

Resumen

✅ JavaScript agrega interactividad
✅ console.log() para depurar
✅ alert, confirm, prompt para interacción
✅ Template literals con comillas invertidas ``

¡En la próxima lección, profundizaremos en variables y tipos! 🚀