From 2008e7f87f581d79c726ab7259303d4224edca27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Blas=20Alarc=C3=B3n?= <47840816@terciariourquiza.edu.ar> Date: Thu, 21 May 2026 19:04:05 -0300 Subject: [PATCH 1/5] Agregue un boton y un parrafo que dice cuantas veces se clickeo --- clase-9.js | 9 +++++++++ index.html | 3 ++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/clase-9.js b/clase-9.js index 6df1007..ec87ff6 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1 +1,10 @@ // Agregar acá el código javascript para los ejercicios +const boton = document.querySelector("button"); +const parrafo = document.querySelector("p"); +var i = 0 + +boton.addEventListener("click", function () { + i = i + 1 + parrafo.textContent = `Este boton ha sido clickeado ${i} veces`; + console.log(`El botón fue clickeado ${i} veces`); +}); \ No newline at end of file diff --git a/index.html b/index.html index 2a6b85f..f27efa8 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@

Clase 9 - Eventos

- + +

Este boton ha sido clickeado 0 veces

-- 2.49.1 From 180cfa585c93a70e1d5ceb1e7c84fcc201a06b67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Blas=20Alarc=C3=B3n?= <47840816@terciariourquiza.edu.ar> Date: Thu, 21 May 2026 19:22:04 -0300 Subject: [PATCH 2/5] Agregue un campo de texto a la pagina y abajo un parrafo que cuenta cuantos caracteres hay ingresados en el campo --- clase-9.js | 16 ++++++++++++---- index.html | 3 ++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/clase-9.js b/clase-9.js index ec87ff6..50640d9 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1,10 +1,18 @@ // Agregar acá el código javascript para los ejercicios -const boton = document.querySelector("button"); -const parrafo = document.querySelector("p"); +const boton1 = document.querySelector("button"); +const parrafo1 = document.querySelector("p"); var i = 0 -boton.addEventListener("click", function () { +boton1.addEventListener("click", function () { i = i + 1 - parrafo.textContent = `Este boton ha sido clickeado ${i} veces`; + parrafo1.textContent = `Este boton ha sido clickeado ${i} veces`; console.log(`El botón fue clickeado ${i} veces`); +}); + +const campo = document.querySelector("input"); +const parrafo2 = document.querySelector("#contadorCaracteres"); + +campo.addEventListener("input", (e) => { + parrafo2.textContent = `El campo de texto tiene ${e.target.value.length} caracteres`; + console.log(e.target.value); }); \ No newline at end of file diff --git a/index.html b/index.html index f27efa8..43bee2d 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,8 @@
- + +

El campo de texto tiene 0 caracteres.

-- 2.49.1 From 93fd449b17b3cbd28b950bcb1feecdbfd092d824 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Blas=20Alarc=C3=B3n?= <47840816@terciariourquiza.edu.ar> Date: Thu, 21 May 2026 20:12:35 -0300 Subject: [PATCH 3/5] Cree una lista con cinco items, y use delegacion de eventos para que cuando haga click en un elemento agregue la clase seleccionado y se la quite a los demas --- clase-9.js | 15 +++++++++++++++ index.html | 8 +++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/clase-9.js b/clase-9.js index 50640d9..d7804ba 100644 --- a/clase-9.js +++ b/clase-9.js @@ -15,4 +15,19 @@ const parrafo2 = document.querySelector("#contadorCaracteres"); campo.addEventListener("input", (e) => { parrafo2.textContent = `El campo de texto tiene ${e.target.value.length} caracteres`; console.log(e.target.value); +}); + +const lista = document.querySelector("ul"); + +lista.addEventListener("click", (e) => { + if (e.target.tagName === "LI") { + const items = document.querySelectorAll("li") + for (const item of items) { + item.classList.remove("seleccionado"); + } + + e.target.classList.add("seleccionado"); + + console.log(e.target.textContent); + } }); \ No newline at end of file diff --git a/index.html b/index.html index 43bee2d..7bb9aeb 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,13 @@
- +
-- 2.49.1 From 5b5ed15a7fde8d0c6c704ac5a6fbe2a814b05c45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Blas=20Alarc=C3=B3n?= <47840816@terciariourquiza.edu.ar> Date: Thu, 21 May 2026 20:40:19 -0300 Subject: [PATCH 4/5] Agregue al html lo indicado y en el js registre listeners de bubbling en los 3 elementos y luego agregue un listener de capturing en externo --- clase-9.js | 12 +++++++++++- index.html | 6 +++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/clase-9.js b/clase-9.js index d7804ba..9e2daa2 100644 --- a/clase-9.js +++ b/clase-9.js @@ -27,7 +27,17 @@ lista.addEventListener("click", (e) => { } e.target.classList.add("seleccionado"); - + console.log(e.target.textContent); } +}); + +document.querySelector("#externo").addEventListener("click", () => { + console.log("externo"); +}, true); +document.querySelector("#interno").addEventListener("click", () => { + console.log("interno"); +}); +document.querySelector("#boton").addEventListener("click", () => { + console.log("boton"); }); \ No newline at end of file diff --git a/index.html b/index.html index 7bb9aeb..4a36455 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,11 @@
- +
+
+ +
+
-- 2.49.1 From b1acc7ba7d85dbecc798051fb46071249db5d0c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Blas=20Alarc=C3=B3n?= <47840816@terciariourquiza.edu.ar> Date: Thu, 21 May 2026 23:44:40 -0300 Subject: [PATCH 5/5] Cree un formulario con los campos nombre, edad y mensaje que cumpliese con lo requerido --- clase-9.js | 37 +++++++++++++++++++++++++++++++++---- index.html | 15 +++++++++++++-- 2 files changed, 46 insertions(+), 6 deletions(-) diff --git a/clase-9.js b/clase-9.js index 9e2daa2..e9bda6e 100644 --- a/clase-9.js +++ b/clase-9.js @@ -5,16 +5,14 @@ var i = 0 boton1.addEventListener("click", function () { i = i + 1 - parrafo1.textContent = `Este boton ha sido clickeado ${i} veces`; - console.log(`El botón fue clickeado ${i} veces`); + parrafo1.textContent = `Este boton ha sido clickeado ${i} veces.`; }); const campo = document.querySelector("input"); const parrafo2 = document.querySelector("#contadorCaracteres"); campo.addEventListener("input", (e) => { - parrafo2.textContent = `El campo de texto tiene ${e.target.value.length} caracteres`; - console.log(e.target.value); + parrafo2.textContent = `El campo de texto tiene ${e.target.value.length} caracteres.`; }); const lista = document.querySelector("ul"); @@ -40,4 +38,35 @@ document.querySelector("#interno").addEventListener("click", () => { }); document.querySelector("#boton").addEventListener("click", () => { console.log("boton"); +}); + +formulario.addEventListener("submit", function(e) { + e.preventDefault(); + + const nombre = document.querySelector("#nombre"); + const mensaje = document.querySelector("#mensaje"); + const errorNombre = document.querySelector("#errorNombre"); + const errorMensaje = document.querySelector("#errorMensaje"); + const resultado = document.querySelector("#resultado"); + + errorNombre.textContent = ""; + errorMensaje.textContent = ""; + resultado.textContent = ""; + + let hayErrores = false; + + if (nombre.value.trim() === "") { + errorNombre.textContent = "El nombre no puede estar vacío"; + hayErrores = true; + } + + if (mensaje.value.trim() === "") { + errorMensaje.textContent = "El mensaje no puede estar vacío"; + hayErrores = true; + } + + if (!hayErrores) { + resultado.textContent = "Formulario enviado correctamente"; + formulario.reset(); + } }); \ No newline at end of file diff --git a/index.html b/index.html index 4a36455..4a1770f 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@

Clase 9 - Eventos

-

Este boton ha sido clickeado 0 veces

+

Este boton ha sido clickeado 0 veces.

@@ -37,7 +37,18 @@
- +
+
+ +

+ +

+ +

+
+ +

+
-- 2.49.1