forked from marquez.juan/clase-10-ejercicios-de-repaso
190 lines
6.7 KiB
Markdown
190 lines
6.7 KiB
Markdown
# Ejercicios de repaso del primer cuatrimestre
|
|
|
|
Estos ejercicios abordan los temas vistos en el cuatrimestre: el lenguaje
|
|
JavaScript, arrays y objetos, el DOM y eventos. Para cada ejercicio, completar
|
|
el archivo HTML con su archivo `.js` vinculado.
|
|
|
|
----
|
|
|
|
Cada carpeta contiene un ejercicio distinto, la idea es que ustedes creen todo
|
|
el contenido que necesiten (archivos HTML, javascript y css).
|
|
|
|
## Ejercicio 0: Uso de git
|
|
|
|
Seguir los pasos habituales para gestionar con git estos ejercicios:
|
|
|
|
- Hacer un fork de [este
|
|
repositorio](https://gitea.juansemarquez.com/marquez.juan/clase-10-ejercicios-de-repaso)
|
|
(noten que tiene '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`
|
|
- Hacer `git push origin nombre-de-tu-rama`
|
|
- 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
|
|
manera el docente puede ir siguiendo tu trabajo y respondiendo las consultas
|
|
más fácilmente.
|
|
- Comenzar a resolver los ejercicios, en el archivo `ejercicioX.js` de cada
|
|
subcarpeta.
|
|
- Hacer al menos un commit por cada uno de los ejercicios que siguen.
|
|
- Al finalizar cada sesión de trabajo, hacer `git push origin
|
|
nombre-de-tu-rama`
|
|
|
|
---
|
|
|
|
## Ejercicio 1: Saludo personalizado
|
|
|
|
Crear una página con un campo de texto y un botón. Al hacer clic en el botón,
|
|
leer el valor del campo y mostrar en la página el mensaje `"Hola, [nombre]!"`.
|
|
Si el campo está vacío, mostrar en su lugar `"Por favor, ingresá tu nombre."`.
|
|
|
|
---
|
|
|
|
## Ejercicio 2: Lista de tareas simple
|
|
|
|
Crear una página con un campo de texto y un botón "Agregar". Cada vez que se
|
|
haga clic en el botón, agregar el texto del campo como un nuevo ítem en una
|
|
lista `<ul>`. Después de agregar el ítem, limpiar el campo.
|
|
|
|
Si el campo está vacío al hacer clic, no agregar nada.
|
|
|
|
---
|
|
|
|
## Ejercicio 3: Resaltador de ítems
|
|
|
|
Crear una lista con al menos seis ítems de cualquier contenido. Al hacer clic
|
|
en un ítem, agregarle la clase `"seleccionado"`. Al hacer clic de nuevo sobre
|
|
el mismo ítem, quitarle la clase.
|
|
|
|
Usar delegación de eventos, incluyendo un solo listener en la lista, no uno por
|
|
ítem.
|
|
|
|
---
|
|
|
|
## Ejercicio 4: Contador con límite
|
|
|
|
Crear una página con tres elementos: un botón "Sumar", un botón "Restar" y un
|
|
párrafo que muestre el valor actual del contador, empezando en `0`.
|
|
|
|
Requisitos:
|
|
- El contador no puede bajar de `0` ni subir de `10`.
|
|
- Cuando el contador llega a `10`, el botón "Sumar" se deshabilita.
|
|
- Cuando el contador llega a `0`, el botón "Restar" se deshabilita.
|
|
- Al volver a un valor intermedio, los botones se vuelven a habilitar.
|
|
|
|
---
|
|
|
|
## Ejercicio 5: Filtro de lista en tiempo real
|
|
|
|
Dado un array de países (al menos diez), construir dinámicamente una lista en
|
|
la página con todos ellos. Es decir: la lista de países no debe estar en el
|
|
archivo html, sino como array en javascript, y a partir de este array se debe
|
|
generar la lista.
|
|
|
|
Agregar un campo de texto arriba de la lista para búsqueda. A
|
|
medida que el usuario escribe, mostrar solo los países cuyo nombre contenga el
|
|
texto ingresado (sin distinguir mayúsculas de minúsculas). Si el campo está
|
|
vacío, mostrar todos.
|
|
|
|
En ningún momento debemos modificar el array original, sino ir reconstruyendo
|
|
la lista en el DOM con cada cambio del campo de búsqueda.
|
|
|
|
---
|
|
|
|
## Ejercicio 6: Tabla dinámica
|
|
|
|
Dado el siguiente array de objetos:
|
|
|
|
```js
|
|
const empleados = [
|
|
{ nombre: "Ana", sector: "Desarrollo", sueldo: 150000 },
|
|
{ nombre: "Luis", sector: "Diseño", sueldo: 120000 },
|
|
{ nombre: "Marta", sector: "Desarrollo", sueldo: 160000 },
|
|
{ nombre: "Carlos", sector: "RRHH", sueldo: 110000 },
|
|
{ nombre: "Julia", sector: "Diseño", sueldo: 130000 }
|
|
];
|
|
```
|
|
|
|
Construir dinámicamente una tabla HTML con una fila por empleado. Agregar una
|
|
fila al final que muestre el sueldo promedio del total de empleados.
|
|
|
|
---
|
|
|
|
## Ejercicio 7: Formulario con validación
|
|
|
|
Crear un formulario con los campos nombre, edad y contraseña. Al enviarlo,
|
|
validar:
|
|
|
|
- Que ningún campo esté vacío.
|
|
- Que la edad contenga números enteros entre 0 y 100.
|
|
- Que la contraseña tenga al menos 8 caracteres.
|
|
|
|
Si hay errores, mostrarlos en la página junto a cada campo. Si todo es válido,
|
|
ocultar los errores y mostrar un mensaje de éxito.
|
|
|
|
---
|
|
|
|
## Ejercicio 8: Carrito de compras
|
|
|
|
Dado el siguiente array de productos:
|
|
|
|
```js
|
|
const productos = [
|
|
{ nombre: "Teclado", precio: 8500 },
|
|
{ nombre: "Mouse", precio: 4200 },
|
|
{ nombre: "Monitor", precio: 62000 },
|
|
{ nombre: "Auriculares", precio: 11000 },
|
|
{ nombre: "Webcam", precio: 15500 }
|
|
];
|
|
```
|
|
|
|
Construir dinámicamente una lista de productos en la página, donde cada ítem
|
|
tenga un botón "Agregar al carrito". Al hacer clic, el producto se agrega a
|
|
una sección "Carrito" visible en la página, junto con su precio. Al pie del
|
|
carrito, mostrar el total actualizado.
|
|
|
|
Si el mismo producto se agrega más de una vez, no duplicarlo: incrementar su
|
|
cantidad y actualizar el total.
|
|
|
|
---
|
|
|
|
## Ejercicio 9: Quiz de opción múltiple
|
|
|
|
Crear un array de al menos cinco preguntas, cada una con la forma:
|
|
|
|
```js
|
|
{
|
|
pregunta: "¿Cuál es la capital de Francia?",
|
|
opciones: ["Madrid", "París", "Roma", "Berlín"],
|
|
correcta: 1 // índice de la opción correcta
|
|
}
|
|
```
|
|
|
|
Mostrar una pregunta por vez, con sus opciones como botones. Al seleccionar
|
|
una opción:
|
|
- Indicar visualmente si fue correcta o incorrecta.
|
|
- Mostrar un botón "Siguiente" para pasar a la próxima pregunta.
|
|
|
|
Al finalizar todas las preguntas, mostrar el puntaje total (`X de Y correctas`)
|
|
y un botón para reiniciar el quiz desde cero.
|
|
|
|
|
|
**Sobre la corrección y calificación:** El pedido de que hagan _push_ de lo que
|
|
van avanzando clase a clase tiene como objetivo ir registrando la actividad de
|
|
cada estudiante. En ese contexto importante que comprendan lo siguiente:
|
|
|
|
- El docente no va a corregir ni calificar _todos_ los ejercicios.
|
|
- El docente sí va a revisar y responder todas las preguntas que se hagan
|
|
acerca del código publicado en gitea.
|
|
- Si alguien hace push de un código que contiene errores, esto **no** impactará
|
|
negativamente en su calificación. Es normal equivocarse, y forma parte del
|
|
aprendizaje.
|
|
- Al finalizar el cuatrimestre:
|
|
- La calificación de lo relacionado con javascript será evaluada en el examen
|
|
parcial (y el recuperatorio, si hiciera falta).
|
|
- La calificación de lo relacionado con git, será evaluada considerando el uso
|
|
de git durante el cuatrimestre: no importa si cada commit contiene código
|
|
correcto o incorrecto, lo que importa es que cada estudiante haya dejado
|
|
registro de su progreso clase a clase.
|
|
- No es necesario tener completo el 100% de la ejercitación, el porcentaje
|
|
debe rondar el mismo que se solicita para la asistencia (75%).
|