Prácticas con el DOM.
Aplicaciones Telemáticas
Grado en Ingeniería Telemática, 2021-2022
Escuela Técnica Superior de Ingeniería de Telecomunicación
Universidad Rey Juan Carlos
Crea un directorio ~/at/practica04 para los ejercicios 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.9.
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
5 Cartas al azar de la baraja española (o un subconjunto de la baraja)
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
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.
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.
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 plicació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)
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.
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.
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 5.
En una zona de la pantalla se verá, en tamaño relativamente grande, la carta, pieza o tirada que se está generando actualmente. Al generar cada nuevo valor, no se mostrará sin más, sino añadiendo un efecto al que llamaremos barajando. Consistirá en que, antes de var el valor definitivo, se irán viendo algunos otros valores.
Si el programa está en modo con repetición, se verán valores aleatorios cualquiera.
Si el programa está en modo sin repetición, se verán valores de entre los disponibles, lo que aún no hayan salido.
Similar a una máquina tragaperras, en la que antes de ver qué valor sale de nuetra jugada, vamos viendo otros valores. O similar a una persona que va pasando las cartas de un mazo, enseñándolas de una en una, y parando en un momento aleatorio.
El número de estados que se enseñan y durante cuánto tiempo queda a tu criterio.
En otra zona de la pantalla, en tamaño más pequeño, tu aplicación mostrará la tabla con el histórico de valores. El último valor aparecerá en ambas zonas de la pantalla: la del valor actual y la de los históricos.
Escribe en los ficheros ~/at/practica04/valida.html y ~/at/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.
Escribe en los ficheros ~/at/practica04/paradoja.html y ~/at/practica04/paradoja.js el código necesario para ejecutar dentro del navegador tu práctica sobre la paradoja del cumpleaños. No repitas código, haz llamadas al javascript de tu práctica 3. Usa Bootstrap 5.
Tienes libertad para diseñar los detalles de este interface.