From 4a0f14107140e11512387c9cd939a301f0883483 Mon Sep 17 00:00:00 2001
From: Nery Benincasa <42608796@terciariourquiza.edu.ar>
Date: Thu, 21 May 2026 22:29:23 -0300
Subject: [PATCH 1/6] Ejercicio 1
---
clase-9.js | 15 +++++++++++++++
index.html | 4 ++++
2 files changed, 19 insertions(+)
diff --git a/clase-9.js b/clase-9.js
index 6df1007..603ed90 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -1 +1,16 @@
// Agregar acá el código javascript para los ejercicios
+
+// 1. Inicialización del estado
+let contador = 0;
+
+// 2. Selecciono los elementos del DOM
+const boton = document.getElementById('boton-contador');
+const parrafo = document.getElementById('texto-contador');
+
+// 3. Registro del Event Listener utilizando una función clásica
+boton.addEventListener('click', function () {
+ // Incremento el valor de la variable en 1
+ contador++;
+ // Actualizo el contenido de texto del párrafo
+ parrafo.textContent = `Botón clickeado ${contador} veces.`;
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 2a6b85f..4bf9034 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,14 @@
Clase 9 - Eventos
+
+
Botón clickeado 0 veces.
+
+
--
2.49.1
From d758c4cd8d2581da8579b3be7ca515a2d86a14c0 Mon Sep 17 00:00:00 2001
From: Nery Benincasa <42608796@terciariourquiza.edu.ar>
Date: Thu, 21 May 2026 22:39:02 -0300
Subject: [PATCH 2/6] Ejercicio 2
---
clase-9.js | 16 ++++++++++++++++
index.html | 4 ++--
2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/clase-9.js b/clase-9.js
index 603ed90..0d2dde8 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -1,5 +1,6 @@
// Agregar acá el código javascript para los ejercicios
+//EJERCICIO 1
// 1. Inicialización del estado
let contador = 0;
@@ -13,4 +14,19 @@ boton.addEventListener('click', function () {
contador++;
// Actualizo el contenido de texto del párrafo
parrafo.textContent = `Botón clickeado ${contador} veces.`;
+});
+
+//EJERCICIO 2
+// 1. Selección de los elementos del DOM
+const campo = document.querySelector("#campo-texto");
+const contadorcaracteres = document.querySelector("#contador-caracteres");
+
+// 2. Registro del Event Listener utilizando una función clásica
+campo.addEventListener("input", function (e) {
+ // Obtengo el texto actual del campo
+ const textoActual = e.target.value;
+ // Calculo la longitud del texto
+ const cantidadCaracteres = textoActual.length;
+ // Actualizo el contenido del párrafo
+ contadorcaracteres.textContent = `Caracteres ingresados: ${cantidadCaracteres}`;
});
\ No newline at end of file
diff --git a/index.html b/index.html
index 4bf9034..8ec919f 100644
--- a/index.html
+++ b/index.html
@@ -16,8 +16,8 @@
-
-
+
+
Caracteres ingresados: 0
--
2.49.1
From e86ab32d2970e32822317e59d97c20935147c99d Mon Sep 17 00:00:00 2001
From: Nery Benincasa <42608796@terciariourquiza.edu.ar>
Date: Thu, 21 May 2026 22:51:26 -0300
Subject: [PATCH 3/6] Ejercicio 3
---
clase-9.js | 24 ++++++++++++++++++++++++
index.html | 7 +++++++
2 files changed, 31 insertions(+)
diff --git a/clase-9.js b/clase-9.js
index 0d2dde8..abf5fc7 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -29,4 +29,28 @@ campo.addEventListener("input", function (e) {
const cantidadCaracteres = textoActual.length;
// Actualizo el contenido del párrafo
contadorcaracteres.textContent = `Caracteres ingresados: ${cantidadCaracteres}`;
+});
+
+//EJERCICIO 3
+
+// 1. Seleccionar el elemento padre (la lista)
+const lista = document.querySelector("#lista-items");
+
+// 2. Registrar un único listener en el elemento padre
+lista.addEventListener("click", function (e) {
+
+ // Validar si el elemento exacto que recibió el clic es un
+ if (e.target.tagName === "LI") {
+
+ // Buscar si existe actualmente algún ítem con la clase 'seleccionado'
+ const itemSeleccionadoPrevio = lista.querySelector(".seleccionado");
+
+ // Si se encuentra un ítem seleccionado, se le remueve la clase
+ if (itemSeleccionadoPrevio) {
+ itemSeleccionadoPrevio.classList.remove("seleccionado");
+ }
+
+ // Agregar la clase 'seleccionado' al ítem que disparó el evento
+ e.target.classList.add("seleccionado");
+ }
});
\ No newline at end of file
diff --git a/index.html b/index.html
index 8ec919f..2884a7f 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,13 @@
+
+
Ítem número 1
+
Ítem número 2
+
Ítem número 3
+
Ítem número 4
+
Ítem número 5
+
--
2.49.1
From ef9ff87b356cb10c7fed1e2c7ec4e9dc02815435 Mon Sep 17 00:00:00 2001
From: Nery Benincasa <42608796@terciariourquiza.edu.ar>
Date: Thu, 21 May 2026 22:52:07 -0300
Subject: [PATCH 4/6] Ejercicio 3
---
clase-9.js | 16 ++++++----------
1 file changed, 6 insertions(+), 10 deletions(-)
diff --git a/clase-9.js b/clase-9.js
index abf5fc7..ed51aff 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -33,24 +33,20 @@ campo.addEventListener("input", function (e) {
//EJERCICIO 3
-// 1. Seleccionar el elemento padre (la lista)
+// 1. Selecciono el elemento padre (la lista)
const lista = document.querySelector("#lista-items");
-// 2. Registrar un único listener en el elemento padre
+// 2. Registro un único listener en el elemento padre
lista.addEventListener("click", function (e) {
-
- // Validar si el elemento exacto que recibió el clic es un
+ // Valido si el elemento exacto que recibió el clic es un
if (e.target.tagName === "LI") {
-
- // Buscar si existe actualmente algún ítem con la clase 'seleccionado'
+ // Busco si existe actualmente algún ítem con la clase 'seleccionado'
const itemSeleccionadoPrevio = lista.querySelector(".seleccionado");
-
// Si se encuentra un ítem seleccionado, se le remueve la clase
if (itemSeleccionadoPrevio) {
itemSeleccionadoPrevio.classList.remove("seleccionado");
}
-
- // Agregar la clase 'seleccionado' al ítem que disparó el evento
+ // Agrego la clase 'seleccionado' al ítem que disparó el evento
e.target.classList.add("seleccionado");
}
-});
\ No newline at end of file
+});
--
2.49.1
From 5eb8b72c92aecee233aafd948056e703088cb36a Mon Sep 17 00:00:00 2001
From: Nery Benincasa <42608796@terciariourquiza.edu.ar>
Date: Thu, 21 May 2026 23:12:10 -0300
Subject: [PATCH 5/6] Ejercicio 4
---
clase-9.js | 28 ++++++++++++++++++++++++++++
index.html | 5 +++++
2 files changed, 33 insertions(+)
diff --git a/clase-9.js b/clase-9.js
index ed51aff..73a911d 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -50,3 +50,31 @@ lista.addEventListener("click", function (e) {
e.target.classList.add("seleccionado");
}
});
+
+//EJERCICIO 4
+
+// 1. Selecciono los tres elementos del DOM utilizando sus IDs y etiquetas
+const externo = document.querySelector("#externo");
+const interno = document.querySelector("#interno");
+const botonej4 = document.querySelector("#boton-ej4");
+
+// 2. Registro de un listener en fase de Capturing (Descenso). Al pasar 'true' como tercer argumento, este código se ejecuta primero,
+// cuando el evento baja desde la raíz del DOM hacia el botón.
+externo.addEventListener("click", function () {
+ console.log("externo capturing");
+}, true);
+
+// 3. Registro de listeners en fase de Bubbling (Ascenso)
+// Estos listeners no tienen un tercer argumento (o es 'false' por defecto),
+// por lo que se ejecutan cuando el evento sube desde el elemento origen.
+botonej4.addEventListener("click", function () {
+ console.log("boton");
+});
+
+interno.addEventListener("click", function () {
+ console.log("interno");
+});
+
+externo.addEventListener("click", function () {
+ console.log("externo");
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 2884a7f..bf8fb0a 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,11 @@
+
+
+
+
+
--
2.49.1
From c084541147deb2fcf0545dc77fb1331fb8a9c5a9 Mon Sep 17 00:00:00 2001
From: Nery Benincasa <42608796@terciariourquiza.edu.ar>
Date: Thu, 21 May 2026 23:20:13 -0300
Subject: [PATCH 6/6] Ejercicio 5
---
clase-9.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 19 ++++++++++++++
2 files changed, 96 insertions(+)
diff --git a/clase-9.js b/clase-9.js
index 73a911d..f5d7ed3 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -77,4 +77,81 @@ interno.addEventListener("click", function () {
externo.addEventListener("click", function () {
console.log("externo");
+});
+
+//EJERCICIO 5
+
+// 1. Selecciono el formulario y contenedores globales del DOM
+const formulario = document.querySelector("#formulario-contacto");
+const mensajeExito = document.querySelector("#mensaje-exito");
+
+// 2. Registro el Event Listener para el evento "submit"
+formulario.addEventListener("submit", function (e) {
+ // Evito el comportamiento por defecto de recargar la página
+ e.preventDefault();
+
+ // 3. Selecciono los elementos de entrada de datos
+ const inputNombre = document.querySelector("#nombre");
+ const inputEdad = document.querySelector("#edad");
+ const inputMensaje = document.querySelector("#mensaje");
+
+ // 4. Selecciono los elementos contenedores de error
+ const errorNombre = document.querySelector("#error-nombre");
+ const errorEdad = document.querySelector("#error-edad");
+ const errorMensaje = document.querySelector("#error-mensaje");
+
+ // 5. Obtengo y limpio los valores ingresados (eliminando espacios)
+ const nombreVal = inputNombre.value.trim();
+ const edadVal = inputEdad.value.trim();
+ const mensajeVal = inputMensaje.value.trim();
+
+ // Variable de control para el estado de la validación
+ let formularioValido = true;
+
+ // 6. Limpio mensajes de error anteriores y el mensaje de éxito
+ errorNombre.textContent = "";
+ errorEdad.textContent = "";
+ errorMensaje.textContent = "";
+ mensajeExito.style.display = "none";
+ mensajeExito.textContent = "";
+
+ // 7. Valido el campo Nombre (No vacío)
+ if (nombreVal === "") {
+ errorNombre.textContent = "El nombre no puede estar vacío.";
+ formularioValido = false;
+ }
+
+ // 8. Valido el campo Edad (No vacío, entero positivo y menor a 120)
+ // Convierto el string a número entero para las comprobaciones numéricas
+ const edadEntero = parseInt(edadVal, 10);
+
+ if (edadVal === "") {
+ errorEdad.textContent = "La edad no puede estar vacía.";
+ formularioValido = false;
+ } else if (isNaN(edadEntero) || Number(edadVal) !== edadEntero || edadEntero <= 0) {
+ // Valida que sea un número válido, que no tenga decimales y sea mayor a 0
+ errorEdad.textContent = "La edad debe ser un número entero positivo.";
+ formularioValido = false;
+ } else if (edadEntero >= 120) {
+ errorEdad.textContent = "La edad debe ser menor que 120.";
+ formularioValido = false;
+ }
+
+ // 9. Valido el campo Mensaje (No vacío)
+ if (mensajeVal === "") {
+ errorMensaje.textContent = "El mensaje no puede estar vacío.";
+ formularioValido = false;
+ }
+
+ // 10. Si todos los campos son válidos, proceso el formulario
+ if (formularioValido) {
+ // Muestro mensaje de éxito en la página
+ mensajeExito.textContent = "¡Formulario enviado con éxito!";
+ mensajeExito.style.display = "block";
+
+ // Limpio el contenido de cada uno de los campos expuestos del formulario
+ inputNombre.value = "";
+ inputEdad.value = "";
+ inputMensaje.value = "";
+ }
});
\ No newline at end of file
diff --git a/index.html b/index.html
index bf8fb0a..acf76ec 100644
--- a/index.html
+++ b/index.html
@@ -42,6 +42,25 @@