Introducción a JavaScript
Parte 4



Ahora quiero mostrarle cómo escribir cosas en la barra de estado, (la barra en la parte inferior de su browser donde se ven las URL's) y por supuesto explicaré cómo trabaja un scroller -aunque ellos ya son odiados en la escena del JavaScript (mas adelante les diré por qué). Primero, ¿cómo se referencia la barra de estado? Este script muestra cómo se puede escribir un simple texto en la barra de estado:

 

Aquí está el script: 

<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
   window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Escribir!" onclick="statbar('Hola! esta es la barra de estado!');">
<input type="button" name="erase" value="Borrar!" onclick="statbar('');">
</form>
</body>
</html>

Creamos dos botones, ambos invocan la función statbar(txt).El 'txt' en los paréntesis muestra que la función toma una variable. (Llamé esto txt, pudo haber sido algo totalmente diferente). Cuando se estudia el tag <form>, donde se crean los botones, puede ver que la función statbar(txt) es invocada. Pero allí no escribimos txt. Solo escribimos el texto que queremos que nos muestre la barra de estado. Se puede ver de esta manera: la función es invocada y define la variable txt esta toma el valor ('value') que se puso después del llamado de la función. De esta forma cuando se oprime el boton 'Escribir!', la función statbar(txt) es invocada y txt conserva el valor ('string') 'Hola! esta es la barra de estado!'. Ahora se puede usar la variable txt muy usualmente. Este método de otorgar variables a las funciones las hace muy flexibles. Observe el segundo botón. Este invoca la misma función, si no tuvieramos la variable, necesitariamos dos funciones diferentes.
Ahora, ¿qué hace la función statbar(txt)? Bueno, esto es simple. Usted solo escribe los contenidos de txt a la variable window.status. Esto es hecho por window.status = txt;. Escrbiendo un valor nulo ('') hace que la barra se borre. Note que tenemos que usar las comillas simples ' porque usamos comillas dobles " para definir onClick. El browser necesita saber a quién le pertenecen las comillas, por eso se tiene que alternan con comillas sencillas y dobles. Creo que esto está completamente claro.

Usted ya sabe que la propiedad onMouseOver de la parte dos de este tutorial:
<a href="tpage.html" onMouseOver="window.status='Otro link estupido...'; return true">
No se molesta porque la barra de estado no borra el texto cuando el puntero del mouse no se apunta allí mucho tiempo? Tengo una solución bastante simple. Escribimos una función que usa la misma técnica para borrar la barra de estado mostrada arriba. Pero cómo podemos invocar la función de borrado? No tenemos una propiedad o un método para detectar si el mouse se está moviendo sobre un link. Instalando un 'timer' es la solución.

Ensaye el siguiente script aquí. Sólo mueva el puntero sobre él no haga click

Esto es realmente puro, solo mire la fuente y verá que es más fácil de lo que se ve a primera vista. 

<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
   window.status = txt;
   setTimeout("erase()",1000);
}
function erase() {
   window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.htm" onMouseOver="moveover('Desapareciendo!');return true;">
link</a>
</body>
</html>

Usted reconocerá muchas partes de este script. La función moveover(txt) es solo la función statbar(txt) después de algún trabajo de copiar y pegar sobre ella! Algo similar sucede con la función erase(). En el <body> de la página de HTML creamos un link con la ya conocida propiedad onMouseOver. Nuestra función moveover(txt) es invocada con la string 'Desapareciendo!' pasándola por encima de la variable txt. El window.status toma los contenidos de txt. Lo mismo que la función statbar(txt). Aunque la invocaciónde la función setTimeout(...) es nueva. Esta función configura un tiempo de finalización. La función setTimeout(...) define una hora de arranque y una hora de finalización. En nuestro ejemplo la función erase() es invocada después de 1000 milisegundos (un segundo). Esta es una característica fantástica. Su función moveover(txt) termina luego de que el tiempo es configurado.El browser invoca la función erase() automáticamente luego de un segundo.
Luego de que el tiempo de finalización ha concluído, el tiempo de inicio no arranca de nuevo, claro que se puede invocar otra vez con la función erase(). Esto nos lleva directamente a los scrollers que todos queremos.

Como usted ya sabe cómo escribir cosas en la barra de estado y cómo trabaja la función setTimeout, le será fácil de entender el scroller.

Presione este botón para ver mi scroller. El script debe cargarse desde el servidor. Así que sea paciente si no lo ve inmediatamente.

Un vistazo al script: 

<html>
<head>
<script language="JavaScript">
<!-- Hide

var scrtxt="Aqui va el mensaje, los visitantes de su pagina "+
"la veran por horas totalmente fascinados...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;

function scroll() {
  pos++;
  var scroller="";
  if (pos==lentxt) {
    pos=1-width;
  }
  if (pos<0) {
    for (var i=1; i<=Math.abs(pos); i++) {
      scroller=scroller+" ";}
    scroller=scroller+scrtxt.substring(0,width-i+1);

  }
  else {
    scroller=scroller+scrtxt.substring(pos,width+pos);

  }
  window.status = scroller;

  setTimeout("scroll()",150);
  }
//-->
</script>
</head>
<body onLoad="scroll();return true;">
Aqui va su super pagina!
</body>
</html>

Este script usa las mismas funciones (o parte de ellas) que usamos antes. El setTimeout(...) le dice al 'timer' que invoque la función scroll() cuando el tiempo es el justo. El scroller se moverá un paso más adelante. Al comienzo hay muchos cálculos pero esto no es muy importante para saber como funciona el script. Los cálculos se hacen para determinar la posición donde el scroller debe arrancar. Si se ubica solo al comienzo se deben poner unos espacios en blanco para ubicar el texto correctamente.

Yo le dije al comienzo de mi introducción que los scrollers no son muy populares, o que si ellos aún son populares, no lo serán por mucho tiempo. Existen muchas razones, aquí menciono algunas, pero son muchas más.
Si usted ve este efecto por primera vez es completamente fascinante; pero cuando lo ve muchas veces, no es tan divertido.

Existen varios problemas. Lo que yo quiero es que la velocidad no cambie cuando se mueva el mouse (se acelera). Por lo menos eso me sucede a mí. Este efecto se torna más fuerte cuando se desea hacer un scroller un poco rápido cambiando el valor de 'setTimeout'. Debe ser que hay algo de esto relacionado con este problema. Pero lo peor es que si usted deja este script corriendo por mucho tiempo un error: memoria insuficiente.

Existen muchas otras rutinas por ahí en la red. He visto algunos scrollers escribiendo texto en un frame. Programar esto debe ser un poco o muy difícil.

Index - Parte 1 - Parte 2 - Parte 3 - Parte 5 - Parte 6 - Parte 7