Introducción al lenguaje JavaScript

Persiana de texto auto deslizante

Descripción
	Esta es un nueva versión de la aplicación que te permite colcocar en tu página ventanas con texto autodeslizante, esta versión posee unos botones para controlar el desplazamiento del texto. Es compatible con NS 4.7 y con los navegadores modernos (IE5, NS6).

Como usarlo

El texto comienza a deslizarse por la ventana de abajo arriba, pero con los botones podemos hacer que el texto cambie de sentido de movimiento o incluso que se detenga. Para usarlo debemos hacer lo siguiente:

1. Definición de estilos CSS
Se necesitan dos estilos: uno para la ventana y otro para los botones. En el estilo de la ventana podéis definir los atributos de texto, colores y bordes. En la zona de botones lo habitual será colocar el color de fondo y los bordes.

2. Colocar elementos HTML en la página
En esta fase colocáis en la página los bloques DIV que vayáis a usar para la ventana y para los controles. Un ejemplo títpico podría ser
< DIV id = "persiana" class="marco" style="top: 10; left:20"></DIV>
< DIV id = "control" class="control" style="top: 10; left:200"></DIV>
La primera sería para el texto deslizante y la segunda para los controles. Recuerda los ID,s pues los deberás usar mas adelante en el código del script.

3. Declarar una variable global para el oPersiana
Declaramos la variable que vaya a usarse para la persiana. Esta variable es un objeto que deberá depender directamente de window, por ello será una variable global (declarada fuera de cualquier bloque function). Basta con poner:
var mipersiana = null; //mas adelante se instanciará con el objeto oPersiana

4. Escribir la función de inicio de la persiana.
Es una función donde se da valor (se instancia) la variable definida en el punto anterior. Los siguientes pasos van dentro de la función.

function iniPersiana( )
{

}

4.1. Preparar los textos

Defines un array donde guardarás los textos que irán rotando por la ventana. Por ejemplo

var textos = new Array();
textos[0] = "Este será el primer texto a mostrar"
textos[1] = "Este será el segundo texto a mostrar"

Recuerda que en el texto puedes introducir códigos HTML, con lo que puedes colocar imágenes o hipervínculos.

4.2 Instanciar la variable

Consiste en crear el objeto oPersiana y guardarlo en la variable definida en el paso 3

mipersiana = new oPersiana('persiana', 30, textos, -1, 60, 'marco');

Los argumentos son:
Atributo ID del bloque DIV creado para la persiana
Velocidad de paso del texto
Array con los textos
Sentido del movimiento (-1 hacia arriba, 1 hacia abajo)
Tiempo de pausa cuando termine de pasar un texto
Nombre del estilo CSS que se definió en el paso 1 para la persiana

4.3 Crear el control
Si quieres colocar botones de control ahora es cuando se le añade a la persiana:

mipersiana.ctrl = new oControl('mipersiana', 'control', 'btsubir.gif', 'btparar.gif','btbajar.gif', 'control');

Los argumentos son:
Nombre de la variable usada para la persiana
Atributo ID del bloque DIV usado para los botones del control
Imagen texto arriba: URL de la misma
Imagen parar texto: URL de la misma
Imagen texto abajo: URL de la misma
Nombre del estilo definido para este bloque

5. Activar la persiana
Este es el último paso y es el que inicia la actualización de la persiana. Su único argumento es el nombre de la variable usada para la persiana.

mipersiana.actualizar('mipersiana')

6.Vincular el evento
Sólo resta usar un evento para lanzar la aplicación, este evento puede ser el onload de body, que se dispara cuando el documento ha sido cargado por completo.

< body onload="iniPersiana( )" >

Como es habitual el archivo zip contiene una página de ejemplo que puedes usar como base para tu propia página.

Si miras la página de muestra comprobarás que esto es sencillo de construir, el ponerlo tan detallado puede hacer que parezca más complejo, pero conocer estos detalles puede serviros para modificar el programa y personificarlo a vuestro gusto y además os permite aprender un poquito más.

Como funciona

He aquí una descripción del objeto oPersiana, el protagonista de esta aplicación. Como siempre esta descripción es un tanto técnica y no es imprescindible para usar el script, pero es interesante para aprender algo más o para modificarlo.
Es el objeto que engloba las propiedades del bloque donde se muestra el texto, el propio texto y algunos métodos para su manejo. El funcionamiento se basa en una ventana contenedora fija a traves de la que se leerá el texto, texto colocado en dos ventanas hijas que son las que se desplazan verticalmente y logran el efecto de texto deslizante. El proceso del movimiento es muy simple: primero se rellena con el texto y se sitúa una de las dos ventanas hijas, esta ventana va desplazándose verticalmente, al llegar al borde de la ventana contenedora se produce una pausa, durante la cual se rellena y sitúa la otra ventana hija. Tras la pausa ambas ventanas se desplazarán, la primera irá saliendo del marco contenedor y la segunda irá entrando. Este proceso se repite indefinidamente. Para el nuevo añadido, los controles, se usa una capa que se rellena con una tabla donde se sitúan tres imágenes o botones, cada uno activa un nuevo método del objeto oPersiana denominado cambiaMovto( como ), donde como es un argumento para indicar si se para el texto (0) se mueve hacia arriba (-1) o se mueve hacia abajo (1). Para este añadido se han definido algunas nuevas propiedades que se incluyen en el cuadro siguiente

Propiedades
marco	Marco ventana principal o contenedora, es un objeto ventana.
identJS	Identificafor Javascript de la variable en que se instancia este objeto
ctrl	Objeto oVentana usado para los botones de control
estilo	nombre de un estilo CSS definido para el marco.
textos	Array conteniendo la lista de textos que recorrerán el marco.
txtind	Indice del texto actual en la lista.
pausa	Pausa entre textos.
cambiar	Indicador booleano para señalar que cambia el sentido de movto.
incTxt	Sentido de incremento del indice de textos a mostrar (+1, -1)
noPausa	Indicador booleano para señalar que no haga pausa
primera	Indicador booleanao para señalar primer barrido de texto
timer	Temporizador utilizado para este objeto.
sent	Sentido del movimiento. 1= Ar-Ab, -1= Ab-Ar.
veloc	Rapidez con que se desplaza el texto.
movil	Una lista con dos ventanas, las que se mueven con el texto.

Métodos

actualizar() Es el método que va moviendo las ventanas hijas

preparaHija() Es el encargado de preparar cada ventana hija, colocándole el texto y situándola en la posición de salida inicial, que será bajo la ventana que en un momento dado está siendo mostrada y por supuesto fuera del cuadro contenedor.

cambMovto Modifica el sentido del movimiento del texto o lo detiene

Las funciones externas necesarias están contenidas en el fichero rutbasicas.js que acompaña a este archivo.
Como siempre cualquier duda podéis enviarla por e-mail a la dirección de la portada.


	Bajarlo	Verlo