REVIT ARCHITECTURE (474) – Programación (17) Conceptos básicos. Condicionales (2)

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.

El pase de diapositivas requiere JavaScript.

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.

 

1851.jpg

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.

 

1852.jpg

 

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.

 

1855

 

 

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.

 

1854.jpg

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.

 

1856.jpg
Una vez llegamos a la última imagen que es la número 7, ya no se puede avanzar más

 

La función actualizar que antes hemos indicado que miraríamos con detalle es la siguiente:

 

1857.jpg

 

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.

 

1858.jpg

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:

1860.jpg

1859.jpg

 

Licencia Creative Commons Contenido Web de Yolanda Muriel está sujeto bajo Licencia Creative Commons Atribución-NoComercial-SinDerivadas 3.0 Unported.

2 Comments

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s