Você está na página 1de 4

Introduction to JavaScript - Part 4

1996 Copyright by Stefan Koch. All rights reserved.


Writing to the statusbar
Now I want to show you how to write text to the statusbar (the bar on the bottom of
your browser where the URLs are shown) and of course I will explain how a scroller
works- although they are already hated in the a!a"cript scene (I tell you why later
on)# $t first how is the statusbar %addressed% & 'his script shows you how one can
write a simple text to the statusbar(
<ht ml >
<head>
<scri pt language="JavaScript" >
<! - - Hide
function statbar(txt !
"indo"#status = txt$
%
&& - - >
<&scri pt >
<&head>
<bod'>
<form>
<i nput t'pe="but ton" name="l oo(" value=")ri te! "
onclic(="statbar(* Hi ! +his is the statusbar!* $" >
<i nput t'pe="but t on" name="erase" value=",rase!"
onclic(="statbar(* * $" >
<&form>
<&bod'>
<&ht ml >
)e create two buttons which call both the function statbar(txt)# 'he txt in the brackets
shows that the function gets a !ariable passed o!er from the function call# (I called this
*ust txt- it could as well be anything totaly different#) )hen you look at the +form,
tag where the buttons are created you can see that the function statbar(txt) is called#
-ut we don%t write txt there# )e *ust put the text there we want the browser to show in
the statusbar# .ou can see it this way( 'he function is called and defines the !ariable
txt- it gets the %!alue% you passed o!er by the function call# "o when pressing the
%)rite/% button the statbar(txt) function is called and txt stores the string %0i/ 'his is
the statusbar%# .ou can now use the !ariable txt as usual# 'his method of passing
!ariables to a function makes the function !ery flexible# Look at the second button# It
calls the same function# )ithout !ariable passing we would need 1 different functions#
Now what does the function statbar(txt) do& )ell this is simple# .ou *ust write the
contents of txt to the !ariable window#status# 'his is done by window#status 2 txt3#
4 - 5
)riting an empty string (%%) to the statusbar erases it# Notice that we ha!e to use these
single 6uotes % because we use double 6uotes 7 for defining on8lick# 'he browser
needs to know which 6uotes belong together- so you ha!e to alternate with single and
double 6uotes# I think this is 6uite clear#
Working ith ti!ers
.ou know already the on9ouse:!er- property from part 1 of my tutorial(
<a href ="stupi d#ht m" on-ouse.ver =""i ndo"#status=*Just another
stupid lin(###*$ return true" >
;on%t you hate it that the statusbar does not erase the text when the mousepointer does
not point on the link any longer& I ha!e 6uite a simple solution# )e *ust write a small
function which uses the same techni6ue to erase the statusbar as shown abo!e# -ut
how can the erase- function be called& )e don%t ha!e a method or property which we
can use for detecting if the mouse pointer is mo!ing from a link# "etting a timer is the
solution#
<ht ml >
<head>
<scri pt language="JavaScript" >
<! - - Hide
function moveover(txt !
"indo"#status = txt$
set+i meout("erase("/0111$
%
function erase( !
"indo"#status=""$
%
&& - - >
<&scri pt >
<&head>
<bod'>
<a href ="dontcl c(#ht m"
on-ouse.ver=" moveover(* 2isappearing!* $return true$">
lin(<&a>
<&bod'>
<&ht ml >
.ou will recogni<e many parts of this script# 'he mo!eo!er(txt) function is *ust the
statbar(txt) function after some copy=paste work on it/ Nearly the same happend to the
erase() function# In the of the 0'9L- page we create a link with the known
on9ouse:!er- property# :ur mo!eo!er(txt) function is called with the string
%;isappearing/% being passed o!er to the txt !ariable# 'he window#status gets the
4 - 1
contents of txt# 'his the same thing as in the statbar(txt) function# 'he set'imeout(###)
function call is new though# 'his function sets a timeout# )ho was expecting this&
'he set'imeout(###) function defines how long the timer is going to run and what will
happen when the time is o!er# In our example the erase() function is called after 5>>>
milliseconds (that%s a second for all math- cracks out there)# 'his is a phantastic
feature/ .our function mo!eo!er(txt) function is finished after the timer is set# 'he
browser calls the function erase() automatically after 5 second# ($lready thinking of a
page telling the user( If you don%t do this your harddri!e is going to be destroyed in 5>
seconds/ &&&) $fter the timeout is finished the timer does not restart again# -ut you
could of course call it again in the erase() function# 'his leads us directly to the
all-o!er liked scrollers#
"rogra!!ing a scroller
$s you already know how to write to the statusbar and how the set'imeout- function
works the scroller will be easy for you to understand# In the online !ersion you ha!e
the possibility to watch this scroller code in work# 0a!e a look at the script(
<ht ml >
<head>
<scri pt language="JavaScript" >
<! - - Hide
var scrtxt ="Here goes 'our message the visitors to 'our page "ill "3
"loo( at for hours in pure fascination###"$
var lentxt =scrt xt#l ength$
var "idth=011$
var pos=0 - "idth$
function scroll( !
pos33$
var scroller=""$
if (pos==l ent xt !
pos=0 - "idth$
%
if (pos<1 !
for (var i =0$ i <=-ath#abs(pos$ i 33 !
scroller =scroller 3" "$ %
scroller=scroller 3scrtxt#substri ng(1/"i dth - i 30$
%
else !
scroller=scroller 3scrtxt#substri ng(pos/"idth3pos$
%
"indo"#status = scroller$
set+i meout("scroll("/041$
%
4 - ?
&& - - >
<&scri pt >
<&head>
<bod' on5oad="scroll($return true$">
Here goes 'our cool page!
<&bod'>
<&ht ml >
'his script uses the same functions (or parts of it) we already used abo!e# 'he
set'imeout(###) %tells% the timer to call the scroll() function when the time is up# 'he
scroller will mo!e one step further# $t the beginning there are a lot of calculations but
these are not too important for understanding how the script works# 'he calculations
are there for getting the position where the scroller ought to start# If it is *ust at the
start the script has to add some spaces in order to place the text right#
I told you at the beginning of this part of my introduction that scrollers are not !ery
popular or if they are still popular they won%t be it !ery long anymore# 'here are some
reasons# I list se!eral here but there are certainly more# If you see this effect for the
first time it might be 6uite nice but looking at it the 5 million and second time it is not
that fun anymore# )ell@ this is no good argument indeed because this affects nearly
e!ery cool trick used in your pages# 'here are more se!ere problems# )hat I don%t like
is that it changes the speed when you mo!e the mouse (It gets faster/)# $t least it does
that for me# 'his effect gets a lot stronger when you want to make the scroller little bit
faster by changing the set'imeout- !alue# 9aybe there is a way around this problem#
-ut the worst is that if you let this script run some time you get an :ut of memory
error# $nd this is really ugly# It seems to be a problem of the Netscape Na!igator 1#>#
9aybe a higher !ersion will ha!e this bug fixed#
'here are many other routines out there on the Net# I%!e seen some scrollers writing
the text to a frame# Arogramming this shouldn%t be too difficult with the techni6ues
described in this tutorial#
Last changed: 11.May'96
1996 by Stefan Koch
4 - 4