Con este artículo cerraremos el apartado introductorio a los condicionales, que se ha ido desarrollando en los artículos REVIT ARCHITECTURE (477) – Programación (18) Conceptos básicos. Condicionales (3), REVIT ARCHITECTURE (474) – Programación (17) Conceptos básicos. Condicionales (2) yREVIT ARCHITECTURE (468) – Programación (16) Conceptos básicos. Condicionales (1).
En este último ejemplo sobre las posibilidades de los condicionales, se va a realizar una condicional que, dado unos botones extremos que ya teníamos, por medio de los cuales se realizaba el paso de un imagen a otra, cuando se posicione sobre la última o primera imagen el botón correspondiente desaparezca y no sea visible (última imagen, el botón de la derecha, y primera imagen, el botón de la izquierda).
En este caso se crearán dos variables: la var imagen= a la imagen que se ve en la pantalla, y var total= número total de imágenes.
La primera imagen a la que se accederá es la imagen 1, y el «botón anterior» tiene que estar oculto (botón de retroceso, dado que ya no se puede retroceder más). Cuando se acceda a las siguientes imágenes este botón anterior estará visible.
Para poder actuar sobre la «visibility» del botón, hay que analizar qué tipo de botón es. Si vamos a html, nos encontramos en el «body» la siguiente estructura para el botón:
Se trata por tanto de un botón class. Para Los elementos class se usa «getElementsClassName» (en vez de «getElementById»), añadiendo el nº de elemento entre corchetes [?], teniendo en cuenta que el primero es siempre [0].
Volvemos a la función inicio, que es la que muestra todos los eventos de la página.
En esta función vamos a hacer que el botón anterior, no sea visible. De la clase flecha cogemos la información del elemento 0, y en este caso, se trata de ocultar su visibilidad.
De esta forma tenemos:
El paso siguiente es realizar los condicionales. Para avanzar y retroceder tenemos funciones. Empezaremos por la función
Para poder ir avanzando en las imágenes necesitamos como siempre el operador ++, que añade el valor de 1 al de la variable. En este caso tenemos imagen++; en esta función además tenemos otra función que se llama actualizar que como su nombre indica va actualizando los cambios a medida que se avanza con el botón una unidad de valor (esta función está resumida y desarrollada independientemente ya que de esta forma se ahorra código, al utilizar la función actualizar en varias funciones).
Nos encontramos en este momento en esta situación, en la que vamos avanzando con el botón de avanzar (derecho) y al llegar a la última imagen, desaparece el botón de avanzar por el condicional que hemos realizado.
Como se puede ver, desaparece el botón de la izquierda en todas las imágenes (botón retroceder), por lo que la función no está acabada. Se necesita que una vez que se ha superado la posición de la primera imagen, en el resto de imágenes aparezca también el botón de retroceder junto con el botón de avanzar, de forma que en las posiciones intermedias de imágenes, se pueda tanto avanzar como retroceder. En las posiciones extremas, como se ha indicado anteriormente, solamente se verá un botón, el que corresponda (avance o retroceso).
Lo que haremos será que en la función imagen-siguiente, se va a coger el elemento [0] que corresponde al botón de retroceso (class) y lo vamos a hacer visible, con la siguiente expresión:
Ahora sí funciona:
La función de retroceso quedaría de la siguiente forma, de forma que cuando la imagen se encuentre en la posición de primera imagen la flecha de retroceso estará oculta pero la flecha de avance [1] class, siempre estará visible.
La función actualizar desarrollada sería:
Con esto se ha visto para qué sirven los condicionales, y para qué se pueden utilizar de una forma introductoria.
Seguiremos más adelante con las arrays.
Contenido Web de Yolanda Muriel está sujeto bajo Licencia Creative Commons Atribución-NoComercial-SinDerivadas 3.0 Unported.
yolandamuriel.com 