Mensaje de texto animado en la barra de estado y título.
| Descripción del ejemplo JavaScript
Este Script utiliza 5 variables:
Mensajes: Es el texto separado por coma de los mensajes que queremos mostrar en ambas barras. Es indispensable utilizar la coma como símbolo separador de los mensajes ya que el Script utiliza el método Split().
MensajeActual: En esta variable almacenamos el valor de un array de la variable anterior. Vemos que es acá donde se utiliza el método split() donde indicamos que cada cadena está separada por el símbolo , (coma). En este caso el ejemplo tiene 3 mensajes por lo que el array quedará de esta manera:
MensajeActual[0]="Bienvenido a"
MensajeActual[1]="Código JavaScript"
MensajeActual[2]="www.codigojavascript.com"
CantidadMsg: Es un número y corresponde a la cantidad de mensajes a mostrar en la barra de estado y título. En nuestro ejemplo el valor será 3.
Muestreo: Esta variable almacena un valor inicial de 0 (cero). Más adelante irá cambiando y según el valor que tenga nos permitirá mostrar uno u otro texto en la animación.
i: Es la variable que utilizamos para mostrar el mensaje correspondiente según el array creado. Más adelante explicaremos porqué damos un valor inicial de -1.
El JavaScript tiene una función llamada BarraAnimada() la cual es llamada desde el evento onLoad de la etiqueta <BODY>. Lo primero que realiza el Script es asignar un nuevo valor a la variable i. Mediante i++ incrementamos su valor en una unidad, por lo que el nuevo valor será 0 (cero). Este valor corresponde al primer array de la variable MensajeActual. La condición que sigue la explicaremos más adelante.
Lo próximo que hacemos es asignar el valor de MensajeActual[i] a la barra de estado. Como en este caso el valor de i es 0 (cero) se mostrará el primer mensaje "Bienvenido a". La próxima línea de código la utilizamos para mostrar el mismo texto también en la barra de título del navegador. Una vez que tenemos escrito el primer mensaje en ambas barras debemos pasar a la función que anima el texto. Esto lo hacemos con la función setTimeout() de JavaScript. Con ella ejecutamos la función Animacion() en 1 milisegundo (0,001 segundo).
Lo primero que realiza esta función es asignar un nuevo valor a Muestreo. En nuestro ejemplo esta variable valía 0 (cero) por lo que ahora valdrá 1. La primera condición verifica que esta variable sea igual a 1. Si es así escribe un nuevo texto en la barra de estado. Como las demás condiciones no son verdaderas se salta a la línea donde se asigna el mismo valor a la barra de título. La última condición verifica que Muestreo sea menor o igual a 6 & diferente a 0 (cero), es decir que esté entre los valores 1 y 6. En este caso el valor de esta variable es 1 por lo que se ejecutará el setTimeout() que ejecuta nuevamente la función al cabo de 250 milisegundos.
Al ejecutarse nuevamente la función Animación(), se incrementa nuevamente el valor de Muestreo en una unidad, por lo que ahora valdrá 2. De las 7 condiciones primeras se ejecutará solo en la que Muestreo valga 2. De esta manera se consigue animar el texto en ambas barras del navegador.
Todo este primer proceso se realiza para el valor 0 de la variable i, es decir para el primer mensaje. Para lograr mostrar el segundo mensaje una vez terminada la animación del primero, utilizamos la condición donde Muestreo vale 7. Acá se da nuevamente el valor 0 (cero) a esta variable y se ejecuta la función BarraAnimada(). La última condición no es ejecutada ya que Muestreo no está entre los valores 1 a 6.
Al comenzar nuevamente la función BarraAnimada() se asigna un nuevo valor a i incrementando su valor en 1 unidad, por lo que ahora valdrá 1. Con esto estaremos comenzando nuevamente todo el proceso para mostrar el mensaje número 2, es decir el valor de MensajeActual[i] para cuando i vale 1.
Había quedado pendiente la explicación de la condición if (i==CantidadMsg) {i=0;}. Una vez que i vale 2, que en nuestro ejemplo es el último mensaje a mostrar, debemos buscar una manera de mostrar nuevamente el primer mensaje. Para esto debemos darle a i el valor 0 (cero). Cuando i vale 2 y se le incrementa el valor en una unidad pasando a valer 3 se ejecuta esta condición, asignando el valor 0 a esta variable. El valor de CantidadMsg será siempre la cantidad de mensajes a mostrar en la barra de estado y título del navegador.
Información relativa al Script
Ejemplo JavaScript para mostrar un mensaje de texto animado en la barra de estado y título del navegador.
Código fuente del script:
