Determinar las variables de la aplicación
Lo primero que debemos hacer nada más ver qué es lo que hará nuestro programa, debemos determinar las variables que vamos a usar; en nuestro caso nosotros lo que queremos es que un texto vaya de un lado a otro de la barra de estado, pues entonces, la primera variable que vamos a necesitar será una que guarde el mensaje. Después, otra de las variables que más saltan a la vista, es la de la velocidad de retardo del scroll, y también el ancho del scroller, por lo tanto tendremos tres variables que vamos a utilizar para configurar nuestro script:
var mensaje = "* ManualdeJavaScript.com *";
var velocidad = 25;
var ancho = 50;
Determinar el método que se va a usar
Bueno, en esta parte del script debemos determinar la forma de mover el texto de un lado a otro, y la forma de hacerlo, será poniendo delante de la variable mensaje una variable que contenga tantos espacios como el ancho de la barra, pero para que "eso se mueva", tenemos que usar un contador, y añadir delante de mensaje una subcadena de una variable delante ( por ejemplo ) desde el principio, contador:
var delante = "";
var cnt = 0;
for ( var i = 0 ; i < ancho-mensaje.length ; i++ )
delante += ' ';
Determinar el número de funciones y desarrollarlas
Está claro que en este script, vamos a usar dos funciones aunque se podría usar solo una, pero es más cómodo e igual de rápido usar dos, una que mueva el texto hacia la derecha y otra que lo mueva hacia la izquierda. Pero antes debemos declarar una variable más que nos ahorrará quebraderos de cabeza y que luego no entendamos nuestro código, se usará para guardar la información a mostrar ( ej.: muestra ):
var muestra, max = ancho-mensaje.length;
La primera función sería de la siguiente manera:
function derecha()
{
if ( cnt == 0 )
{
muestra = mensaje;
setTimeout("derecha()", velocidad);
}
if ( cnt >= 1 )
{
muestra = delante.substring(0,cnt) + mensaje;
setTimeout("derecha()", velocidad);
}
if ( cnt == max )
{
cnt = -2;
setTimeout("izquierda()", velocidad);
}
cnt++;
window.status = muestra;
}
En el primer if, lo que se comprueba es si el mensaje está al principio de la barra de estado, entonces se muestra el mensaje tal cual y se llama otra vez a la misma función con un retardo de tiempo igual a velocidad. En el segundo, se comprueba si cnt es distinto de 0, y se muestra una subcadena de delante que va desde el principio de delante hasta la posición cnt y mensaje; y por último se vuelve a llamar a la función derecha con el retardo de tiempo equivalente a tiempo.
muestra = delante.substr(0,cnt) + mensaje;
setTimeout("derecha()", velocidad);
En la tercera condición se evalúa si el texto está al final, en cuyo caso se llamaría a la función izquierda que es la segunda función de nuestro script. Y la segunda función sería algo así:
function izquierda()
{
if ( cnt == 0 )
{
muestra = delante + mensaje;
setTimeout("izquierda()", velocidad);
}
if ( cnt >= 1 )
{
muestra = delante.substring(0,(max-cnt)) + mensaje;
setTimeout("izquierda()", velocidad);
}
if ( cnt == max )
{
cnt = -2;
setTimeout("derecha()", velocidad);
}
cnt++;
window.status = muestra;
}
Esta función hace prácticamente lo mismo que la anterior a excepción de la segunda condición, en la cual la subcadena que se pone delante de mensaje se construye desde 0 hasta max-cnt, es decir cada vez uno menos en lugar de una más. Sólo queda inicializar el script mediante una llamada a derecha() o a izquierda(), si quieren ver el script en funcionamiento, pulsen en el siguiente botón:
|