From 63f8bb23a3151aa3bcb1872389dd0276d01afc24 Mon Sep 17 00:00:00 2001
From: Sergio Madera De Marco <37299705@terciariourquiza.edu.ar>
Date: Sun, 24 May 2026 14:37:45 -0300
Subject: [PATCH 1/6] ejercicio 1: contador de clicks con addEventListener
---
clase-9.js | 10 +++++++++-
index.html | 3 ++-
2 files changed, 11 insertions(+), 2 deletions(-)
diff --git a/clase-9.js b/clase-9.js
index 6df1007..217d83c 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -1 +1,9 @@
-// Agregar acá el código javascript para los ejercicios
+// Ejercicio 1 - Contador de clics
+let clickCount = 0;
+const boton = document.getElementById('miBoton');
+const parrafo = document.getElementById('contadorClicks');
+
+boton.addEventListener('click', function() {
+ clickCount++;
+ parrafo.textContent = `Botón clickeado ${clickCount} veces`;
+});
diff --git a/index.html b/index.html
index 2a6b85f..6ba8d93 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,8 @@
Clase 9 - Eventos
-
+
+
Botón clickeado 0 veces
--
2.49.1
From e2d03163cb5ab4c19f51fafbbafc6428715cfb09 Mon Sep 17 00:00:00 2001
From: Sergio Madera De Marco <37299705@terciariourquiza.edu.ar>
Date: Sun, 24 May 2026 14:44:53 -0300
Subject: [PATCH 2/6] ejercicio 2: contador de caracteres en tiempo real
---
clase-9.js | 8 ++++++++
index.html | 4 +++-
2 files changed, 11 insertions(+), 1 deletion(-)
diff --git a/clase-9.js b/clase-9.js
index 217d83c..4b40054 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -7,3 +7,11 @@ boton.addEventListener('click', function() {
clickCount++;
parrafo.textContent = `Botón clickeado ${clickCount} veces`;
});
+
+// Ejercicio 2 - Contador de caracteres en tiempo real
+const campoTexto = document.getElementById('campoTexto');
+const contadorCaracteres = document.getElementById('contadorCaracteres');
+
+campoTexto.addEventListener('input', function() {
+ contadorCaracteres.textContent = `Caracteres ingresados: ${campoTexto.value.length}`;
+});
diff --git a/index.html b/index.html
index 6ba8d93..389860b 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,9 @@
-
+
+
+
Caracteres ingresados: 0
--
2.49.1
From afda7e5f0d2fd64197be0f8db2e7ecabfb781db2 Mon Sep 17 00:00:00 2001
From: Sergio Madera De Marco <37299705@terciariourquiza.edu.ar>
Date: Sun, 24 May 2026 14:50:02 -0300
Subject: [PATCH 3/6] ejercicio 3: seleccion de elementos con delegacion de
eventos
---
clase-9.js | 15 +++++++++++++++
estilo.css | 18 ++++++++++++++++++
index.html | 8 +++++++-
3 files changed, 40 insertions(+), 1 deletion(-)
diff --git a/clase-9.js b/clase-9.js
index 4b40054..131673e 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -15,3 +15,18 @@ const contadorCaracteres = document.getElementById('contadorCaracteres');
campoTexto.addEventListener('input', function() {
contadorCaracteres.textContent = `Caracteres ingresados: ${campoTexto.value.length}`;
});
+
+// Ejercicio 3 - Selección única en la lista con delegación de eventos
+const listaItems = document.getElementById('listaItems');
+
+listaItems.addEventListener('click', function(event) {
+ const item = event.target.closest('li');
+ if (!item || !listaItems.contains(item)) {
+ return;
+ }
+
+ listaItems.querySelectorAll('li').forEach(function(li) {
+ li.classList.remove('seleccionado');
+ });
+ item.classList.add('seleccionado');
+});
diff --git a/estilo.css b/estilo.css
index 19d93f8..f4f6680 100644
--- a/estilo.css
+++ b/estilo.css
@@ -3,3 +3,21 @@ div {
padding: 10px;
margin: 10px;
}
+
+#listaItems {
+ list-style: none;
+ padding: 0;
+}
+
+#listaItems li {
+ cursor: pointer;
+ padding: 6px;
+ margin: 4px 0;
+ border: 1px solid #8a8a8a;
+}
+
+#listaItems li.seleccionado {
+ background-color: #7daa3c;
+ color: #ffffff;
+}
+
diff --git a/index.html b/index.html
index 389860b..8213110 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,13 @@
-
+
+ - Ítem 1
+ - Ítem 2
+ - Ítem 3
+ - Ítem 4
+ - Ítem 5
+
--
2.49.1
From 930ee7ee56397028cf83279ff59e4c45ac54ba8a Mon Sep 17 00:00:00 2001
From: Sergio Madera De Marco <37299705@terciariourquiza.edu.ar>
Date: Sun, 24 May 2026 14:53:40 -0300
Subject: [PATCH 4/6] ejercicio 4: bubbling y captura de eventos
---
index.html | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 8213110..a8c0853 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,11 @@
--
2.49.1
From 0de98801ca01a03a09cc99d84de9494b1f109016 Mon Sep 17 00:00:00 2001
From: Sergio Madera De Marco <37299705@terciariourquiza.edu.ar>
Date: Sun, 24 May 2026 14:56:15 -0300
Subject: [PATCH 5/6] ejercicio 5: formulario con validaciones y eventos
---
clase-9.js | 21 +++++++++++++++++++++
1 file changed, 21 insertions(+)
diff --git a/clase-9.js b/clase-9.js
index 131673e..814733f 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -30,3 +30,24 @@ listaItems.addEventListener('click', function(event) {
});
item.classList.add('seleccionado');
});
+
+// Ejercicio 4 - Bubbling y capturing
+const externo = document.getElementById('externo');
+const interno = document.getElementById('interno');
+const botonCaptura = document.getElementById('botonCaptura');
+
+externo.addEventListener('click', function() {
+ console.log('bubbling: externo');
+});
+
+interno.addEventListener('click', function() {
+ console.log('bubbling: interno');
+});
+
+botonCaptura.addEventListener('click', function() {
+ console.log('bubbling: button');
+});
+
+externo.addEventListener('click', function() {
+ console.log('capturing: externo');
+}, true);
--
2.49.1
From d347427c7f27e4d43c452a4e592336f673460687 Mon Sep 17 00:00:00 2001
From: Sergio Madera De Marco <37299705@terciariourquiza.edu.ar>
Date: Sun, 24 May 2026 14:58:33 -0300
Subject: [PATCH 6/6] ejercicio 5: formulario con validaciones y eventos
---
clase-9.js | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
estilo.css | 12 +++++++++++
index.html | 20 ++++++++++++++++++-
3 files changed, 89 insertions(+), 1 deletion(-)
diff --git a/clase-9.js b/clase-9.js
index 814733f..453d444 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -51,3 +51,61 @@ botonCaptura.addEventListener('click', function() {
externo.addEventListener('click', function() {
console.log('capturing: externo');
}, true);
+
+// Ejercicio 5 - Validación de formulario
+const formulario = document.getElementById('formulario');
+const nombreInput = document.getElementById('nombre');
+const edadInput = document.getElementById('edad');
+const mensajeInput = document.getElementById('mensaje');
+const errorNombre = document.getElementById('errorNombre');
+const errorEdad = document.getElementById('errorEdad');
+const errorMensaje = document.getElementById('errorMensaje');
+const formResultado = document.getElementById('formResultado');
+
+function limpiarErrores() {
+ errorNombre.textContent = '';
+ errorEdad.textContent = '';
+ errorMensaje.textContent = '';
+ formResultado.textContent = '';
+}
+
+formulario.addEventListener('submit', function(event) {
+ event.preventDefault();
+ limpiarErrores();
+
+ let esValido = true;
+ const nombre = nombreInput.value.trim();
+ const edadValor = edadInput.value.trim();
+ const mensaje = mensajeInput.value.trim();
+
+ if (!nombre) {
+ errorNombre.textContent = 'El nombre no puede estar vacío.';
+ esValido = false;
+ }
+
+ if (!edadValor) {
+ errorEdad.textContent = 'La edad no puede estar vacía.';
+ esValido = false;
+ } else if (!/^[0-9]+$/.test(edadValor)) {
+ errorEdad.textContent = 'La edad debe ser un número entero positivo.';
+ esValido = false;
+ } else {
+ const edad = parseInt(edadValor, 10);
+ if (edad <= 0 || edad >= 120) {
+ errorEdad.textContent = 'La edad debe ser mayor que 0 y menor que 120.';
+ esValido = false;
+ }
+ }
+
+ if (!mensaje) {
+ errorMensaje.textContent = 'El mensaje no puede estar vacío.';
+ esValido = false;
+ }
+
+ if (esValido) {
+ formResultado.textContent = 'Formulario enviado con éxito.';
+ nombreInput.value = '';
+ edadInput.value = '';
+ mensajeInput.value = '';
+ }
+});
diff --git a/estilo.css b/estilo.css
index f4f6680..5bb4148 100644
--- a/estilo.css
+++ b/estilo.css
@@ -21,3 +21,15 @@ div {
color: #ffffff;
}
+.error {
+ color: #b30000;
+ font-size: 0.9em;
+ display: block;
+ margin-top: 4px;
+}
+
+.success {
+ color: #0a6f0a;
+ font-weight: bold;
+ margin-top: 10px;
+}
diff --git a/index.html b/index.html
index a8c0853..fb71c61 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,25 @@
--
2.49.1