Javalogo.gif (2815 bytes)
Introducción a JavaScript
Parte 4

 

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

No le parece vacanísimo? 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 quien le pertenecen las comillas, por eso se tiene que alternan con comillas sencillas y dobles. Creo que esto está completamente calro.

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 alli 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(...) is nueva. Esta funció configura un tiempo de finalización. Quién estaba esperando eso? La funció 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() automaticamente luego de un segundo. (Todavía sigue pensando en una página que diga al usuario:Cuando usted no haga esto su disco duro será destruido en 10 segundos! ???)
Luego de que el tiempo de finalización a concluido, 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 como escribir cosas en la barra de estado y como 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 mas 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óon 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 por diezmillonésima vez, no es tan divertido. Bueno esto no es un buen argumento además puede que esté afectando algún truco usado en sus páginas.
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 mi. Este efecto se torna mas 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. Esto es realmente horrible, parece ser un problema de Netscape Navigator 2.0. Talvez la versión 2.01 tenga este problema solucionado.

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

halt.gif (2137 bytes)