Prácticas con el DOM.
Desarrollo de Aplicaciones Telemáticas, 2024-2025
Grado en Ingeniería en Tecnologías de la Telecomunicación
Grado en Ingeniería en Sistemas de Telecomunicación
Escuela de Ingeniería de Fuenlabrada
Universidad Rey Juan Carlos


Instrucciones generales

  1. Crea un directorio ~/dat/practica04 para los ejercicios de esta práctica

  2. Crea un directorio ~/dat/practica04/images para las imágenes de esta práctica

  3. Ahora escribirás ficheros .html que utilizarán ficheros .js de la práctica 3.

Práctica 4.1. Manejadores

Escribe una página web con Bootstrap 5 y código JavaScript contemporáneo en los ficheros

~/dat/practica04/botones.html

~/dat/practica04/botones.js para probar los manejadores sobre botones y la escritura de contenido en elementos.

Ponle al menos tres botones, y haz que al pulsar cada uno, apareza un texto cualquiera. P.e. botones con el texto Café solo, Café con leche, Chocolate. Al pulsarlos, en algún lugar de la pantalla aparecerá diferentes textos. P.e. Seleccionado café con leche.

No uses este ejemplo, piensa cualquier otra cosa.

Práctica 4.2. Escritura y lectura de datos HTML-JavaScript

Escribe los ficheros ficheros ~/dat/practica04/unidades.html ~/dat/practica04/unidades.js en HTML 5 y JavaScript contemporáneo que contengan el interfaz de usuario del programa que escribiste en la práctica 3.6.

La distancia se supone que la indicará el servidor, por tanto, será un valor escrito en el HTML, tu programa no podrá modificarlo. Para tus pruebas, cambia este valor a mano.

Cumpliendo lo anteriormente indicado, tienes libertad para organizar el HTML como prefieras.

Práctica 4.3. Tabla aleatoria

Escribe los ficheros ficheros ~/dat/practica04/tablaRandom.html ~/dat/practica04/tablaRandom.js en HTML 5 y JavaScript contemporáneo según la siguiente especificación:

Queremos una aplicación web (de momento sin Bootstrap) que, usando número aleatorios, genere una tabla simulando los resultados de extraer al azar una series de valores, por ejemplo

Aunque podrías usar estos ejemplos, mejor piensa algo similar. Por ejemplo similar entendemos algo que dependa de al menos dos valores aleatorios, como carta y palo, número superior y numero inferior (en el dominó), etc. La extracción de p.e. una bola de bingo no sería válido porque es un único número.

De momento, tu aplicación simplemente escribirá el valor. Por ejemplo "Reina picas". Pero en una práctica posterior, tendrás que generar una imagen. En este ejemplo, una imagen de una reina de picas. O una "q" y unas picas.

Por tanto, busca ahora las imágenes que usarás después. Sugerencia: usa palabras clave como free tarot cliparts, free slot machine clip art, free playing card icons, playing card images.

De momento cada tirada es independiente de la anterior, esto es, el mismo valor puede repetirse. Cada tirada debe añadir una nueva fila a la tabla.

Ya sabes que primero tienes que escribir la lógica de negocio en node.js, y luego insertarla en el HTML.

Práctica 4.4. Tabla aleatoria, con imágenes, sin repetición

Guarda una copia de tu práctica anterior (por si rompes algo) y ahora modifícala de forma que:

  1. Tenga un botón que permita elegir entre resultados en modo texto (como hasta ahora) o resultados gráficos. Por omisión, la aplicación mostrará los gráficos.

  2. La aplicación no lanzará varios resultados (7, 5, 10, ...) sino que lanzará 1 resultado cada vez que el usuario pulse un botón. Esto es, cada vez que el usuario pulse un botón, se agregará una nueva fila (o columna) a la tabla.

  3. Tenga un botón que permite elegir entre resultados con repetición o sin repetición. Por omisión, será sin repetición. Esto es, si sale por ejemplo el 3 de bastos, no podrá volver a salir.

    La aplicación debe controlar que ya han salido todos los valores posibles y advertirá que no se puede seguir tirando (implementa esto como prefieras)

  4. La aplicación tendrá un botón llamado nuevo mazo o similar que olvide los valores que ya han salido para permitir volver a empezar (sin borrar lo ya escrito). En el modo con repetición, este botón no será relevante, se puede comportar como consideres adecuado.

  5. Recuerda que cada tirada debe añadir filas a la tabla, sin borrar los valores anteriores.

Sugerencia: para evitar repetidos y controlar si quedan valores por aparecer, genera una lista con todos los valores posibles (por ejemplo todas las cartas del mazo), y vete extrayendo elementos aleatorios de esta lista.

Observación: El programa tendrá 4 modos de funcionamiento

Pero no tendrá 4 botones para controlar esto, sino 2. Cada uno podrá estar activado o desactivado lo que permite indicar los 4 estados. El botón para generar una nueva tirada será único, hará lo correspondiente al estado actual.

Práctica 4.5. Mostrar y ocultar controles

En este ejercicio vas a practicas el mostrar y ocultar controles usando el DOM. Escribe los ficheros ~/dat/practica04/ocultar.html ~/dat/practica04/ocultar.js según la siguiente especificación

Práctica 4.6. Mostrar y ocultar controles (2)

Modifica tu fichero tablaRandom.js para que el botón nuevo mazo no se vea en modo con repeticion.

Práctica 4.7. Modificación de un botón

Escribe los ficheros ~/dat/practica04/cambiaBoton.html y ~/dat/practica04/cambiaBoton.js para hacer algo similar a quita_pon_02.html. Esto es, tendrá un botón para ocultar o mostrar un elemento html. Pero tendrá una funcionalidad nueva: el botón cambiará su texto según corresponda. Por ejemplo indicará Ver foto o Ocultar foto según corresponda.

Hay muchas formas de conseguir esto.

Práctica 4.8. Selección de figuras

Guarda una copia de tu práctica 4.4 (por si rompes algo) y ahora modifícala de forma que use Bootstrap y además:

Práctica opcional: imagen de selección individualizada.

Práctica 4.9. Interface de la validación de contraseña

Escribe en los ficheros ~/dat/practica04/valida.html y ~/dat/practica04/valida.js el código necesario para ejecutar dentro del navagador tu práctica de validación de contraseñas. No repitas nada, haz llamadas al javascript de tu prática 3. Usa Bootstrap 5.

Revisión de los nombres de los ficheros

Ejecuta ~mortuno/revisa practicas dat para comprobar que los nombres de los programas son los correctos.