REVIT ARCHITECTURE (481) – Programación (19) Conceptos básicos. Condicionales (4)

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.

var imagen=1;
var total=5;

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:

<body>
    <div id=”caja2″>
        <div class=”flecha”>
            <img id=”anterior” 
        <div class=”flecha”>
            <img id=”siguiente”

 


 

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.

function inicio(){

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.

document.getElementsByClassName(“flecha”)[0].style.visibility=”hidden”;

 

 

1883.jpg

 

De esta forma tenemos:

1884
Posición de la flecha anterior, donde se ha ocultado el botón anterior

 

1885
resultado en el inicio, tras ocultar el botón

 

El paso siguiente es realizar los condicionales. Para avanzar y retroceder tenemos funciones. Empezaremos por la función


function imagen_siguiente(){

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).

 

1888.jpg

 

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.

1886
Avanzamos con el botón avanzar (derecho) para pasar de una imagen a otra
1887
última imagen donde desaparece el botón avanzar

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:

document.getElementsByClassName(“flecha”)[0].style.visibility=”visible”;

De esta forma la función quedaría:

1889.jpg

 

Ahora sí funciona:

1890
cuando estamos en posiciones intermedias de imágenes, están los dos botones de avanzar y retroceder
1891
Cuando llegamos a la imagen final, desaparece el botón de avanzar pero permanece el botón de retroceder

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.

 

1892.jpg

 

La función actualizar desarrollada sería:

 

1893.jpg

 

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.

 

 

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

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