1. ¿Qué es JavaScript? (10 minutos)
Explicación:
JavaScript es un lenguaje de programación que añade interactividad a las páginas web: botones que responden a clics, formularios que validan datos, contenido que cambia sin recargar la página. Mientras HTML define la estructura y CSS el estilo, JavaScript es el cerebro que controla el comportamiento.
Por qué es importante:
- Permite crear experiencias dinámicas (por ejemplo, mostrar alertas o actualizar texto).
- En Laravel, usarás JavaScript para mejorar vistas Blade, como validar formularios o cargar datos sin recargar.
Cómo añadir JavaScript:
- Interno: Dentro de <script> en <head> o al final de <body>.
<script> console.log("Hola, JavaScript!"); </script> - Externo: En un archivo .js vinculado con <script src="...">.
<script src="script.js"></script>- Colócalo al final de <body> para que el HTML cargue primero.
Herramienta clave: La consola del navegador (F12 > Console) muestra mensajes y errores. Prueba:
console.log("¡Probando JavaScript!");
Analogía: Si HTML es el cuerpo y CSS la ropa, JavaScript es el sistema nervioso: hace que la página reaccione.
Punto clave: JavaScript es esencial para aplicaciones web modernas, incluyendo las que construirás con Laravel.
Actividad rápida (2 minutos):
Piensa en una página web interactiva (por ejemplo, un formulario de registro). Escribe en papel 1 cosa que JavaScript podría hacer. Ejemplo:
- Mostrar un mensaje al enviar el formulario.
Variables: let y const (10 minutos)
Explicación:
Las variables almacenan datos (como números, texto) para usarlos y manipularlos en el programa.
Tipos de variables:
- let: Para valores que pueden cambiar.
let contador = 0; contador = contador + 1; // Ahora es 1 - const: Para valores que no cambian.
const nombre = "Ana"; // nombre = "Luis"; // Error: no se puede reasignar
Cómo declarar:
- Usa nombres descriptivos (por ejemplo, edad en lugar de x).
- Los valores pueden ser:
- Números: let edad = 25;
- Texto (strings): const saludo = "Hola";
- Booleanos: let activo = true;
Ejemplo:
let mensaje = "Bienvenido";
const sitio = "Mi Página";
console.log(mensaje); // Muestra: Bienvenido
mensaje = "Hola de nuevo";
console.log(mensaje); // Muestra: Hola de nuevo
console.log(sitio); // Muestra: Mi Página
Punto clave: Las variables son la base para manipular datos en JavaScript, como en formularios de Laravel.
Actividad rápida (3 minutos):
Escribe en papel o consola una variable let para tu edad y cámbiala. Solución sugerida:
let edad = 20;
edad = 21;
console.log(edad); // Muestra: 21
Funciones y eventos básicos (15 minutos)
Explicación:
Funciones son bloques de código reutilizables que realizan una tarea. Eventos son acciones del usuario (como clics) que activan funciones.
Funciones:
- Declaración:
function saludar() { console.log("¡Hola, mundo!"); } - Llamada:
saludar(); // Muestra: ¡Hola, mundo! - Con parámetros:
function mostrarMensaje(texto) { console.log(texto); } mostrarMensaje("Aprendiendo JavaScript"); // Muestra: Aprendiendo JavaScript
Eventos básicos:
- Clic: Se activa con onclick en HTML o addEventListener en JavaScript.
- Ejemplo con onclick:
<button onclick="saludar()">Haz clic</button> <script> function saludar() { console.log("Botón clicado"); } </script>
Ejemplo práctico (como pide la lección):
Cambiar el texto de un párrafo al hacer clic en un botón:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Cambiar Texto</title>
</head>
<body>
<p id="miParrafo">Texto inicial</p>
<button onclick="cambiarTexto()">Cambiar</button>
<script>
function cambiarTexto() {
let parrafo = document.getElementById("miParrafo");
parrafo.textContent = "¡Texto cambiado!";
}
</script>
</body>
</html>
Cómo funciona:
- <p id="miParrafo">: Párrafo con un ID único.
- <button onclick="cambiarTexto()">: Llama a la función al hacer clic.
- document.getElementById("miParrafo"): Selecciona el párrafo.
- textContent: Cambia el texto del párrafo.
Cómo probarlo:
- Crea un archivo cambiar_texto.html en VS Code.
- Copia el código y guárdalo.
- Ábrelo en un navegador.
- Haz clic en el botón y verifica que el texto cambia.
- Abre la consola (F12 > Console) para depurar si hay errores.
- Alternativa: Pega en CodePen (pestaña HTML/JS) y prueba.
Resultado esperado:
- Un párrafo que dice "Texto inicial".
- Al hacer clic en el botón, cambia a "¡Texto cambiado!".
Punto clave: Las funciones y eventos permiten interactividad en Laravel, como validar formularios o actualizar vistas dinámicamente.
Actividad rápida (3 minutos):
Modifica el ejemplo (en papel o editor) para que el texto cambie a "¡Hola, JavaScript!". Solución sugerida:
function cambiarTexto() {
let parrafo = document.getElementById("miParrafo");
parrafo.textContent = "¡Hola, JavaScript!";
}
Resumen y preparación para la tarea (10 minutos)
Resumen:
- JavaScript: Añade interactividad a páginas web.
- Variables: let para datos cambiantes, const para fijos.
- Funciones: Bloques de código reutilizables.
- Eventos: Responden a acciones como clics.
- Ejemplo: Cambiamos el texto de un párrafo con un clic.
Preparación para la tarea:
La tarea pide añadir un botón que muestre una alerta (mensaje emergente).
- Usa la función alert("mensaje") para mostrar un cuadro de diálogo.
- Conecta el botón con onclick a una función.
- Basado en el formulario de la Lección 2 (Módulo 2), puedes añadir el botón al HTML existente o crear uno nuevo.
Ejemplo inicial:
<button onclick="mostrarAlerta()">Mostrar Alerta</button>
<script>
function mostrarAlerta() {
alert("¡Hola, usuario!");
}
</script>
Punto clave: Las alertas son una forma simple de interactividad, útil para notificaciones en aplicaciones Laravel.
Tarea práctica: Añade un botón que muestre una alerta
Instrucciones:
- Crea un nuevo archivo HTML o modifica el formulario de la Lección 2 (registro.html con 4 campos: nombre, email, contraseña, edad).
- Añade un botón que, al hacer clic, muestre una alerta con un mensaje (por ejemplo, "¡Formulario listo!").
- Asegúrate de:
- Usar <script> para el JavaScript.
- Conectar el botón con onclick a una función.
- Usar alert() para el mensaje.
- Usa el siguiente código como guía:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formulario con Alerta</title>
</head>
<body>
<h1>Regístrate</h1>
<form action="/registro" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Tu correo">
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" placeholder="Tu contraseña">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" placeholder="Tu edad">
<button type="submit">Registrarse</button>
<button type="button" onclick="mostrarAlerta()">Mostrar Alerta</button>
</form>
<script>
function mostrarAlerta() {
alert("¡Formulario listo!");
}
</script>
</body>
</html>
- Prueba el archivo:
- Guarda como alerta.html.
- Ábrelo en un navegador.
- Haz clic en el botón "Mostrar Alerta" y verifica que aparece el mensaje.
- Usa la consola (F12 > Console) para depurar si no funciona.
- Alternativa: Pega en CodePen y prueba.
Ejemplo de solución esperada:
El código anterior es funcional. En el navegador:
- Un formulario con 4 campos y dos botones.
- Al hacer clic en "Mostrar Alerta", aparece un cuadro con "¡Formulario listo!".
Tiempo estimado: 15-20 minutos (puedes hacerlo después de la lección).
Entregable: Archivo alerta.html con un botón que muestra una alerta. Puedes compartir el código o describirlo para que lo revise.
Consejo: Prueba diferentes mensajes en alert() y asegúrate de que el botón no interfiera con el envío del formulario (usa type="button" para el botón de la alerta).