durso.bruno/clase-9-eventos
1
0
Fork 0
forked from marquez.juan/clase-9-eventos
Code Pull Requests Activity

Subir archivos a "/"

Browse Source
This commit is contained in:
durso.bruno
2026-05-22 00:41:58 +00:00
parent ddefc238dc
commit 65aabe2186
5 changed files with 171 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
COMMIT_EDITMSG Normal file
View File

@@ -0,0 +1,8 @@
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# On branch olquifo-eventos
# Changes to be committed:
# modified: clase-9.js
#

98
README.md
View File

@@ -1,49 +1,49 @@
0. Seguir los pasos habituales para gestionar con git estos ejercicios: 0. Seguir los pasos habituales para gestionar con git estos ejercicios:
- Hacer un fork de este repositorio (noten que tiene 'marquez.juan' en la URL) - Hacer un fork de este repositorio (noten que tiene 'marquez.juan' en la URL)
- Clonar **tu fork**. (No debería figurar `marquez.juan` en la URL). - Clonar **tu fork**. (No debería figurar `marquez.juan` en la URL).
- Crear una nueva rama con `switch -c nombre-de-tu-rama` - Crear una nueva rama con `switch -c nombre-de-tu-rama`
- Hacer `git push origin nombre-de-tu-rama` - Hacer `git push origin nombre-de-tu-rama`
- Desde gitea, crear el pull request, desde la rama recién creada de tu fork - Desde gitea, crear el pull request, desde la rama recién creada de tu fork
hacia la rama `main` del repositorio que pertenece a `marquez.juan`. De esta hacia la rama `main` del repositorio que pertenece a `marquez.juan`. De esta
manera el docente puede ir siguiendo tu trabajo y respondiendo las consultas manera el docente puede ir siguiendo tu trabajo y respondiendo las consultas
más fácilmente. más fácilmente.
- Comenzar a resolver los ejercicios, en el archivo `ejercicios.js`. - Comenzar a resolver los ejercicios, en el archivo `ejercicios.js`.
- Hacer al menos un commit por cada uno de los ejercicios que siguen. - Hacer al menos un commit por cada uno de los ejercicios que siguen.
- Al finalizar cada sesión de trabajo, hacer `git push origin - Al finalizar cada sesión de trabajo, hacer `git push origin
nombre-de-tu-rama` nombre-de-tu-rama`
1. Agregar a la página un botón y un párrafo que diga `Botón clickeado 0 1. Agregar a la página un botón y un párrafo que diga `Botón clickeado 0
veces`. Cada vez que se haga clic en el botón, el texto del párrafo debe veces`. Cada vez que se haga clic en el botón, el texto del párrafo debe
cambiar al mensaje `"Botón clickeado N veces"`, donde N es el número de cambiar al mensaje `"Botón clickeado N veces"`, donde N es el número de
veces que se hizo clic. veces que se hizo clic.
2. Agregar un campo de texto a la página. A medida que el usuario escribe, 2. Agregar un campo de texto a la página. A medida que el usuario escribe,
mostrar en tiempo real la cantidad de caracteres ingresados debajo del campo. mostrar en tiempo real la cantidad de caracteres ingresados debajo del campo.
3. Crear una lista con cinco ítems. Usando delegación de eventos, hacer que al 3. Crear una lista con cinco ítems. Usando delegación de eventos, hacer que al
hacer clic en cualquier ítem se le agregue la clase `"seleccionado"` y se hacer clic en cualquier ítem se le agregue la clase `"seleccionado"` y se
la quite a los demás (es decir, solo un ítem puede estar seleccionado a la la quite a los demás (es decir, solo un ítem puede estar seleccionado a la
vez). vez).
4. Agregar a la página los siguientes elementos: 4. Agregar a la página los siguientes elementos:
```html ```html
<div id="externo"> <div id="externo">
<div id="interno"> <div id="interno">
<button>Click</button> <button>Click</button>
</div> </div>
</div> </div>
``` ```
Registrar listeners de bubbling en los tres elementos y verificar en consola Registrar listeners de bubbling en los tres elementos y verificar en consola
el orden en que se ejecutan al hacer clic en el botón. Luego, agregar un el orden en que se ejecutan al hacer clic en el botón. Luego, agregar un
listener de capturing en `#externo` y observar cómo cambia el orden. listener de capturing en `#externo` y observar cómo cambia el orden.
5. Crear un formulario con los campos nombre, edad y mensaje (textarea). Al 5. Crear un formulario con los campos nombre, edad y mensaje (textarea). Al
enviarlo: enviarlo:
- Verificar que ningún campo esté vacío. - Verificar que ningún campo esté vacío.
- Verificar que la edad sea un número entero positivo, menor que 120. - Verificar que la edad sea un número entero positivo, menor que 120.
- Si hay errores, mostrarlos en la página junto al campo correspondiente. - Si hay errores, mostrarlos en la página junto al campo correspondiente.
- Si todo es válido, mostrar un mensaje de éxito y limpiar el formulario. - Si todo es válido, mostrar un mensaje de éxito y limpiar el formulario.
Para limpiar un campo se puede asignar un string vacío a su propiedad Para limpiar un campo se puede asignar un string vacío a su propiedad
`value`: `value`:
```js ```js
document.querySelector("#nombre").value = ""; document.querySelector("#nombre").value = "";
``` ```

78
clase-9.js
View File

@@ -1 +1,77 @@
// Agregar acá el código javascript para los ejercicios
//Ejercicio 1
const boton = document.querySelector("button");
boton.addEventListener("click", function () {
console.log("Botón clickeado 0 veces");
});
boton.addEventListener("click", (event) => {
console.log(event.target.textContent)("Botón clickeado N veces");
});
//Ejercicio 2
const select = document.querySelector("select");
select.addEventListener("change", (e) => {
console.log(e.target.value);
});
const checkbox = document.querySelector("input[type='checkbox']");
checkbox.addEventListener("change", (e) => {
console.log(e.target.checked);
});
//Ejercicio 3
document.addEventListener("keydown", (e) => {
console.log(e.key);
});
//Ejercicio 4
<div id="externo">
<div id="interno">
<button>Click</button>
</div>
</div>
//Ejercicio 5
const input = document.querySelector("#nombre");
console.log(input.value);
const checkbox = document.querySelector("#acepto");
console.log(checkbox.checked);
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
});
form.addEventListener("submit", (e) => {
e.preventDefault();
const nombre = document.querySelector("#nombre").value;
if (nombre.trim() === "") {
console.log("El nombre no puede estar vacío");
return;
}
console.log("Formulario válido:", nombre);
});
form.addEventListener("submit", (e) => {
e.preventDefault();
const nombre = document.querySelector("#nombre").value;
if (nombre.trim() === "") {
console.log("El nombre no puede estar vacío");
return;
}
console.log("Formulario válido:", nombre);
});

10
estilo.css
View File

@@ -1,5 +1,5 @@
div { div {
background-color: #DAE889; background-color: #DAE889;
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }

64
index.html
View File

@@ -1,32 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Clase 9 - Eventos</title> <title>Clase 9 - Eventos</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Clase 9 - Eventos</h1> <h1>Clase 9 - Eventos</h1>
<div id="ejercicio-1"> <div id="ejercicio-1">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 1 --> <!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
</div> </div>
<hr> <hr>
<div id="ejercicio-2"> <div id="ejercicio-2">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 2 --> <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
</div> </div>
<hr> <hr>
<div id="ejercicio-3"> <div id="ejercicio-3">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 3 --> <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
</div> </div>
<hr> <hr>
<div id="ejercicio-4"> <div id="ejercicio-4">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 4 --> <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
</div> </div>
<hr> <hr>
<div id="ejercicio-5"> <div id="ejercicio-5">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 5 --> <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
</div> </div>
<script src="clase-9.js"></script> <script src="clase-9.js"></script>
</body> </body>
</html> </html>