Manual de Javascript

 
 
 

Mapa Web

 
borde   borde
Portada Lista de Códigos JavaScript Scroller para la barra de estado

 

Scroller para la barra de estado Imprimir E-mail

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:


 

 
Portada
Capítulos del Manual de JavaScript
Introdución
Javascript para aplicaciones cliente
Javascript en documentos HTML
Archivos de código Javascript
Javascript para aplicaciones servidor
Valores Javascript
Literales Javascript
Objetos Javascript
Métodos Javascript
Operadores Javascript
Condicionales Javascript
Bucles Javascript
Funciones Javascript
Parámetros de las funciones
Funciones de ventanas y funciones matemáticas
Gestión de eventos
Ejemplos de eventos
Captura de eventos
Cookies
Configurar y borrar cookies
Practicar en línea
Lista de prácticas en línea
FAQ
Preguntas frecuentes
Códigos JavaScript
Lista de Códigos JavaScript
Foros
Foros JavaScript
Otros Manuales
Manuales de otros lenguajes
 
   
 
 
Alojamiento web en Hostalia