Los valores introducidos por el usuario se deben comprobar y, si los valores no son correctos, no se debe indicar nada al usuario, pero sí tomar un valor predeterminado.
En los ejercicios 1, 2, 3 y 4 los botones Enviar de los formularios son botones <button> que incluyen la imagen sobre la que se hace clic.
Imágenes 1 - La Torre de Babel, de Peter Bruegel el viejo
Escriba un programa que muestre en orden una de las cinco imágenes que muestran un fragmento del cuadro La Torre de Babel de Pieter Bruegel el viejo. Al hacer clic en las flechas se muestra la imagen anterior o la siguiente.
Las imágenes del cuadro utilizadas en esta página se llaman bruegel-1-X.jpg, donde X es un número de 1 a 5.
El formulario contiene dos botones Enviar que envían el número de imagen que debe mostrarse a continuación (la anterior o la siguiente). Los botones contienen una imagen svg.
Al mostrar la primera (o la última) imagen el botón que envía a la imagen anterior (o siguiente) contiene un número que no corresponde a ninguna imagen, 0 (o 6). En la validación ese valor debe corregirse a 1 (o a 5).
El formulario envía los datos a la misma página.
Cuando no se reciben datos (por ejemplo, cuando se abre la página por primera vez), hay que mostrar la primera imagen.
Imágenes 2 - Tres cuadros de Peter Bruegel el viejo (1)
Escriba un programa que muestre en orden uno de tres cuadros de Pieter Bruegel el viejo y para cada uno de ellos en orden una de las cinco imágenes que muestran un fragmento del cuadro. Al hacer clic en las flechas se muestra la imagen anterior o la siguiente.
La página contiene dos formularios:
El primer formulario muestra los cuadros completos. Los nombres de las imágenes de los cuadros son bruegel_X.jpg (X: 1, 2, 3).
El segundo formulario muestra un detalle del cuadro elegido en el primer formulario. Los nombres de las imágenes de los detalles de los cuadros son bruegel_X_Y.jpg (X: 1, 2, 3; Y: 1, 2, 3, 4, 5).
El primer formulario tiene dos botones que envían el número de cuadro anterior o siguiente.
Cuando se cambia de cuadro, el segundo formulario pasa a mostrar el primer detalle
El segundo formulario tiene dos botones que envían el número de detalle anterior o siguiente.
En el segundo formulario se debe incluir un control oculto con el número del cuadro.
En la validación de los números recibidos, se deben corregir los valores fuera de rango.
Imágenes 3 - Tres cuadros de Peter Bruegel el viejo (2)
Este ejercicio es como el ejercicio anterior, con las siguientes diferencias:
Cuando se llega al primer cuadro o a la primera imagen, ya no se muestra el botón para pasar a la imagen anterior.
Cuando se llega al último cuadro o a la última imagen, ya no se muestra el botón para pasar a la imagen siguiente.
Imágenes 4 - Selector de color
Escriba un programa que muestre una imagen con cuatro colores. Al hacer clic en la imagen, se indica si se ha hecho clic sobre algún color o no y se vuelve a mostrar la imagen.
La imagen se muestra en un control de tipo imagen (<inputtype="image" .. >) que se comenta en la lección Controles en formularios.
El programa debe comprobar si las coordenadas requeridas corresponden a alguno de los cuadrados de color. En la imagen original, de 150px los cuadrados tienen 60px de ancho y las franjas blancas tienen 10px de ancho, por lo que las coordenadas X e Y de los cuadrados están entre 10 y 70 o 80 y 140 (depende del cuadro).
