Clase 9: Retroalimentación de JavaScript y manejo del DOM

Variables, constantes, funciones, eventos y manipulación de elementos HTML

"JavaScript conecta la lógica del programa con lo que el usuario ve y usa en la página"

Introducción Variables Funciones DOM Eventos Ejemplos Resumen Quiz

1) Introducción

Esta clase es una retroalimentación de los temas principales de JavaScript: variables, constantes, funciones y manipulación del DOM. La meta es unir la lógica del lenguaje con elementos reales de una página web.

Hasta ahora hemos usado JavaScript para guardar datos, hacer cálculos, tomar decisiones y crear funciones. En esta clase llevaremos esos conocimientos al navegador: leeremos valores de formularios, cambiaremos texto, modificaremos clases CSS y responderemos a acciones del usuario.

Idea central: una página interactiva nace cuando una función de JavaScript modifica el DOM como respuesta a una acción del usuario.
let y const Funciones document.querySelector Eventos Validación

2) Variables y constantes

Una variable guarda un dato que puede cambiar durante la ejecución del programa. Una constante guarda un dato que no debe reasignarse. En JavaScript moderno se recomienda usar const por defecto y usar let cuando el valor cambiará.

Declaración Uso recomendado Ejemplo
let Cuando el valor se actualizará. let contador = 0;
const Cuando el identificador no se reasignará. const iva = 0.13;
var Código antiguo. Evitarlo en proyectos nuevos. var nombre = "Ana";

Ejemplo: contador con variable

let contador = 0;

contador = contador + 1;
contador = contador + 1;

console.log(contador); // Output: 2

Ejemplo: constante para un valor fijo

const porcentajeIVA = 0.13;
let precio = 100;
let total = precio + (precio * porcentajeIVA);

console.log(total); // Output: 113

Ejemplo: Calcular total con IVA

Escribe un precio y observa cómo JavaScript usa variables, constantes y una función.

Presiona el botón para calcular.

3) Funciones

Una función permite agrupar instrucciones con un nombre. Sirve para evitar repetición, separar tareas y hacer que el código sea más fácil de leer. En una página web, muchas funciones se ejecutan cuando el usuario hace clic, escribe, envía un formulario o cambia una opción.

Entrada

Los parámetros reciben datos que la función necesita para trabajar.

Proceso

El cuerpo de la función contiene cálculos, validaciones o cambios al DOM.

Salida

Una función puede devolver un resultado con return.

Ejemplo: función pura

function calcularPromedio(nota1, nota2, nota3) {
let suma = nota1 + nota2 + nota3;
return suma / 3;
}

let promedio = calcularPromedio(8, 9, 10);
console.log(promedio); // Output: 9

Esta función se considera "pura" porque recibe datos, calcula y retorna un valor. No cambia la página ni depende directamente de elementos HTML.

Ejemplo: función que modifica la página

function mostrarResultado(mensaje) {
const caja = document.querySelector("#resultado");
caja.textContent = mensaje;
}

Esta función sí interactúa con el DOM. Busca un elemento y cambia su contenido visible.

4) ¿Qué es el DOM?

El DOM significa Document Object Model. Es la representación en forma de árbol de los elementos HTML de una página. JavaScript puede leer, crear, modificar o eliminar partes de ese árbol.

Seleccionar

Encontrar un elemento con getElementById o querySelector.

Modificar

Cambiar texto, HTML, estilos, atributos o clases CSS.

Escuchar

Responder a eventos como clics, escritura, cambios o envíos de formulario.

Selección de elementos

const titulo = document.getElementById("titulo");
const boton = document.querySelector(".boton");
const items = document.querySelectorAll(".item");

Modificar texto, clases y estilos

titulo.textContent = "Nuevo título";
titulo.classList.add("activo");
boton.style.backgroundColor = "blue";
Recomendación: para cambiar apariencia, es mejor agregar o quitar clases con classList que escribir muchos estilos desde JavaScript.

5) Eventos: conectar acciones con funciones

Un evento ocurre cuando el usuario interactúa con la página o cuando el navegador detecta un cambio. Por ejemplo: hacer clic, escribir en un input, enviar un formulario o cargar la página.

Forma 1: usar onclick en HTML

<button onclick="saludar()">Saludar</button>

<script>
function saludar() {
console.log("Hola");
}
</script>

Forma 2: usar addEventListener

const boton = document.querySelector("#btnSaludar");

boton.addEventListener("click", function () {
console.log("Hola desde un evento");
});

Para proyectos más organizados, addEventListener suele ser la opción más limpia porque separa mejor el HTML de la lógica de JavaScript.

6) Ejemplos

Ejemplo 1: Mostrar un saludo personalizado

<input id="nombre" placeholder="Escribe tu nombre">
<button onclick="saludarUsuario()">Saludar</button>
<p id="saludo"></p>

<script>
function saludarUsuario() {
const nombre = document.querySelector("#nombre").value;
const saludo = document.querySelector("#saludo");

saludo.textContent = "Hola, " + nombre + ". Bienvenido a JavaScript.";
}
</script>

Qué practica este ejemplo

Leer el valor de un input, guardar el dato en una constante y modificar el texto de un párrafo.

Ejemplo 2: Validar un formulario sencillo

function validarEdad() {
const edad = Number(document.querySelector("#edad").value);
const resultado = document.querySelector("#resultadoEdad");

if (edad >= 18) {
resultado.textContent = "Puede registrarse.";
} else {
resultado.textContent = "Debe ser mayor de edad.";
}
}

Qué practica este ejemplo

Convertir datos de entrada, usar condicionales y entregar retroalimentación al usuario.

Ejemplo 3: Alternar una clase CSS

function cambiarEstado() {
const tarjeta = document.querySelector("#tarjeta");
tarjeta.classList.toggle("active");
}

Demo interactiva: manipular el DOM

Escribe un mensaje, actualiza la tarjeta y cambia su estado visual.

Tarjeta de práctica

Este texto cambiará con JavaScript.

7) Resumen

Variables

Usa let cuando el valor cambiará durante el programa.

Constantes

Usa const para valores o referencias que no se reasignarán.

Funciones

Organizan código, reciben parámetros y pueden retornar resultados.

DOM

Permite que JavaScript lea y modifique los elementos HTML de la página.

Eventos

Conectan acciones del usuario con funciones de JavaScript.

Validación

El usuario recibe mensajes claros cuando falta información o hay errores.

Recuerda: primero selecciona el elemento, luego lee o modifica sus propiedades, y por último conecta la función con un evento.

8) Cuestionario

Pregunta 1: ¿Cuándo conviene usar let?

Pregunta 2: ¿Qué hace document.querySelector("#titulo")?

Pregunta 3: ¿Qué propiedad se usa para leer el dato escrito en un input?

Pregunta 4: ¿Para qué sirve classList.toggle?

Pregunta 5: ¿Qué conecta una acción del usuario con una función?

Pregunta 6: ¿Qué método es recomendable para escuchar un clic desde JavaScript?

Pregunta 7: ¿Qué significa DOM?

Pregunta 8: ¿Por qué se recomienda usar funciones pequeñas?