En este artículo seguiremos con los condicionales realizando nuevos ejemplos de forma que se pueda entender para qué sirven y que son los condicionales en programación.
Como ya se indicó en el artículo anterior REVIT ARCHITECTURE (468) – Programación (16) Conceptos básicos. Condicionales (1) por medio de condicionales hemos conseguido acceder a una página que contiene la información que necesitamos. Ahora, siguiendo con la utilización de condicionales, y realizando clic en unas flechas que están situadas en el extremo izquierdo y derecho, se conseguirá que realizando clic sobre dichas flechas se pueda acceder a nuevos contenidos, que en este ejemplo se trata de renders de Revit de diferentes edificios.
Se crean dos variables:
- la variable imagen, a la que se le asigna la imagen que se muestre en cada momento ( y tendrá el valor de un número).
- la variable total, a la cual se le asigna el valor numérico del número total de todas las imágenes que en el ejemplo va a ser 7.
Se asigna un valor a la variable imagen de 1, para que sea a partir de la cual se empiece a contar o tener como referencia el resto de imágenes. Sino, no se podrán realizar las operaciones con operadores-
Cuando se cargan todos los elementos del Body se ejecuta la función inicio. Y en esta función vamos a tener los eventos de la página.
Tendremos dos eventos onclick, que son dos botones: «anterior» es el botón con la flecha situada en la izquierda, y que al hacer click sobre el mismo nos permitirá volver hacia atrás, y «siguiente» es el botón con la flecha situada en la derecha, y que al realizar click en el mismo nos permitirá avanzar hacia delante.
Cada botón tiene una función asociada. Imagen anterior e imagen siguiente.
Por ejemplo, realizamos primero la función imagen anterior. En esta función encontraremos:
- imagen–;Resta en 1 la variable imagen por medio del operador — asignado a la variable imagen.
- actualizar(); actualiza todos los cambios. Lo veremos con detalle.
Para poder establecer un tope a esta resta, de forma que cuando se utiliza el botón de ir para atrás, se llegue a la primera imagen y no se pueda ir más para atrás (ya que no hay más imágenes), se va a utilizar un condicional.
El mismo caso para la función imagen siguiente, aunque se trata de que cuando se llegue a la última imagen, no se pueda seguir avanzando.
De esta forma cuando se llega a la primera imagen no se puede retroceder más y cuando se llega a la última imagen no se puede avanzar más.
La función actualizar que antes hemos indicado que miraríamos con detalle es la siguiente:
Donde para la caja del archivo html «numero» se tiene el valor de la imagen en número y el valor total en número de imágenes. Por eso se utilizan las variables imagen y total creadas al inicio.
Y para la caja «img» que contiene propiamente la imagen, se tiene la imagen que se encuentra en la carpeta img/ (nombre de la imagen)+variable imagen+extensión de la imagen que en este caso es .png.
De esta manera los operadores ++ y — por medio de la función actualizar cogen los valores actualizados una vez realizada la función del operador, que para — es restar 1 y para ++ es sumar 1.
En el caso de que se quieran utilizar teclas del teclado para avanzar o volver atrás, o incluso volver a la página inicial donde se introduce la contraseña se pueden utilizar las siguientes funciones:
Con la tecla 37 , se consigue avanzar colocando el cursor del ratón encima del botón de avanzar y utilizando la tecla flecha hacia delante -> que tiene el teclado.
Con la tecla 39 lo mismo pero en sentido contrario, es decir, volver atrás <-
Y con la tecla 32 que es el enter cuando se pulsa se vuelve a la página inicial donde se introduce la contraseña.
Para todos estos casos se utiliza e.keyCode como el valor de la variable local codigo_tecla.
En la función inicio ha que tener el evento:
window.onkeydown=teclado; al que se le asigna la función teclado, de la cual se han comentado antes todos los condicionales creados con los números de teclas.
El resultado total sería el siguiente:
Contenido Web de Yolanda Muriel está sujeto bajo Licencia Creative Commons Atribución-NoComercial-SinDerivadas 3.0 Unported.
yolandamuriel.com 
2 Comments