Prácticas con el DOM.
Aplicaciones Telemáticas, 2023-2024
Grado en Ingeniería Telemática
Escuela de Ingeniería de Fuenlabrada
Universidad Rey Juan Carlos
Crea un directorio ~/at/practica04 para los ejercicios de esta práctica
Crea un directorio ~/at/practica04/images para las imágenes de esta práctica
Ahora escribirás ficheros .html que utilizarán ficheros .js de la práctica 3.
En el fichero .html de cada práctica 4, añade una referencia al fichero .js correspondiente indicando su trayecto relativo. Ejemplo <script src="../practica03/blabla.js"><script>
Escribe una página web con Bootstrap 5 y código JavaScript contemporáneo en los ficheros
~/at/practica04/botones.html
~/at/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.
Escribe los ficheros ficheros ~/at/practica04/unidades.html ~/at/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.
Escribe los ficheros ficheros ~/at/practica04/tablaRandom.html ~/at/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
7 Tiradas de una máquina tragaperras
10 Cartas al azar de la baraja francesa (o un subconjunto)
4 Cartas al azar de alguna baraja de tarot (o un subconjunto)
5 Fichas de dominó
4 Piezas de ajedrez
Algún otro ejemplo similar. Pero que no sea la baraja española.
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.
Guarda una copia de tu práctica anterior (por si rompes algo) y ahora modifícala de forma que:
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.
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.
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)
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.
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
Texto con repetición.
Texto sin repetición.
Imagen con repetición.
Imagen sin repetición.
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.
En este ejercicio vas a practicas el mostrar y ocultar controles usando el DOM. Escribe los ficheros ~/at/practica04/ocultar.html ~/at/practica04/ocultar.js según la siguiente especificación
Elige uno de tus ficheros HTML de las prácticas 2.9 o 2.10. Cópia el código en este fichero y modifícalo.
Añádele algún elemento (botón, tarjeta, etc) si lo crees necesario.
Añade botones (entre uno y tres) para que el usuario pueda mostrar u ocultar distintas partes del interfaz de usuario. Puedes organizarlo por complejidad (p.e. modo simplificado, modo normal, modo avanzado). También puedes organizarlo por funcionalidad, esto es, mostrar u ocultar los controles que se ocupen de tareas que estén relacionadas.
Modifica tu fichero tablaRandom.js para que el botón nuevo mazo no se vea en modo con repeticion.
Escribe los ficheros ~/at/practica04/cambiaBoton.html y ~/at/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.
Puedes usar una variable booleana que vaya cambiando de estado. Cada vez que pulses el botón, invierte el estado (con el operador de negación). Según el estado, muestras la foto o no e invocas a text() con el valor que corresponda.
Podrías leer el valor del texto del botón. Pero esto no sería un buen diseño, estarías mezclando lógica de negocio con interface de usuario. Piensa por ejemplo en qué pasaría si quisieras portar este programa a un entorno gráfico diferente, o simplemente traducirlo.
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:
El usuario pueda marcar o seleccionar o voltear las imágenes haciendo clic sobre ellas. Cuando una imagen reciba un clic, su aspecto cambiará. Por ejemplo, si es una baraja, cambia para mostrar el reverso de la carta. O un comodín, o un cuadro negro o cualquier otra imagen que prefieras. Pero siempre la misma imagen en todos los casos.
Cuando el usuario haga clic sobre una imagen marcada, la imagen se des-seleccionará y volverá a su aspecto normal.
Esta selección solo funciona en modo imagen. Si el usuario hace clic sobre la figura en modo texto, no sucederá nada.
La aplicación guardará en la estructura de datos que prefieras la relación de elementos que están marcados. Esta estructura la mostrarás en la consola, como una traza. Al marcar una figura, la añadirás a la estructura. Al desmarcar una figura, la quitarás
Esta estructura de datos contendrá indentificadores. Importante: estos identificadores tienen que resultar claros para una persona que los lea. Por ejemplo figura3, figura4, no es claro a la vista. ReinaPicas, 3Treboles sí sería claro.
Práctica opcional: imagen de selección individualizada.
En el caso básico, todas las figuras pasan a tener el mismo aspecto cuando son seleccionadas. Por ejemplo, con el reverso de una baraja. En esta práctica opcional, cuando la imagen sea seleccionada, se verá una versión modificada de esa imagen en particular. Por ejemplo, en blanco y negro, o en negativo, o con colores más pálidos, o más intensos, etc
Para ello, busca una librería de procesamiento de imágenes (del lenguaje de programación que prefieras) y prepara una versión modificada de cada una de tus figuras. (podría hacerse a mano con un programa de retoque de imágenes como por ejemplo Gimp, pero no lo hagas, busca un método automático)
Por lo demás, la práctica funcionará igual: al marcar la figura se verá modificada y aparecerá en la estructura de atos. Al volver a hacer clic, volverá a su aspecto normal y saldrá de la estructura