Introduktion till JavaScript

Introduktion till JavaScript
Del 4

Nu ska jag visa hur man skriver text på statusraden (raden längst ner i din läsare, där URL:er visas) och självklart ska jag förklara hur en rullande text fungerar även om de redan är hatade (jag ska förklara varför senare).
Till att börja med, hur 'adresserar' man statusraden? Det här scriptet visar hur man kan skriva en enkel text på statusraden:

Trevligt va´? Här är scriptet:

<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
   window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Write!" onclick="statbar('Hi! This is the statusbar!');">
<input type="button" name="erase" value="Erase!" onclick="statbar('');">
</form>
</body>
</html>

Vi skapar två knappar vilka båda anropar funktionen statbar(txt). Txt innanför paranteserna visar att funktionen får variabler från funktionsanropet. (Jag kallade det för txt, men det kunde ha varit vad som helst.) Om du tittar på <form>-koden där knapparna skapas, kan du se att funktionen statbar(txt)anropas, men vi skriver inte txt där. Vi skriver den text vi vill att läsaren ska visa på statusraden. Så här kan man se det. Funktionen anropas och definierar variabeln txt som får 'värdet' du gav den genom funktionsanropet. Så när du trycker på knappen 'Write!' anropas funktionen statbar(txt) och txt lagrar strängen 'Hi! This is the statusbar'. Nu kan man använda variabeln txt som vanligt. Den här metoden att ge variabler till en funktion gör funktionen mycket flexibel. Titta på den andra knappen. Den anropar samma funktion. Utan att ge variabler skulle vi behöva 2 olika funktioner.
Vad gör funktionen statbar(txt)? Tja, det är enkelt. Du skriver innehållet i txt till variabeln window.status. Detta görs med window.status = txt;. Om man skriver en tom sträng på statusraden töms den. Lägg märke till att vi måste använda enkla citat-tecken ' eftersom vi använder dubbla citat-tecken " när vi definierar onClick. Internet-läsaren måste veta vilka citat-tecken som hör ihop. Därför är man tvungen att alternera mellan enkla och dubbla citat-tecken. Jag tycker att det är ganska tydligt.

Du känner redan till egenskapen onMouseOver från del 2 av min introduktion:
<a href="stupid.htm" onMouseOver="window.status='Just another stupid link...'; return true">
Visst ogillar du att texten i statusraden inte försvinner när muspekaren inte pekar på länken längre? Jag har en ganska enkel lösning. Vi skriver en liten funktion som använder samma teknik som den här ovanför, för att tömma statusraden. Men, hur anropar man rensnings-funktionen? Vi har ingen metod eller egenskap som vi kan använda för att känna om muspekaren flyttas ifrån en länk. En timer är lösningen.

Prova följande script här. Rör bara musen över den, klicka inte!

Tjusigt, eller hur? Titta på koden så ser du att det är enklare än du tror.

<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('Disappearing!');return true;">
link</a>
</body>
</html>

Du kommer att känna igen många bitar av det här scriptet. Funktionen mouseover(txt) är egentligen funktionen statbar(txt) efter lite kopiera/klistra in! Nästan samma sak inträffade med funktionen erase(). I <body> på HTML-sidan skapar vi en länk med den kända egenskapen onMouseOver. Vår funktion moveover(txt) anropas och strängen 'Disappearing!' lämnas över till variabeln txt. Window.status får värdet från txt. Det är samma sak som med funktionen statbar(txt). Funktionen setTimeout(...) är däremot ny. Funktionen utför en nedräkning. Vem hade väntat sig det? Funktionen setTimeout(...) definierar hur länge timern ska räkna och vad som ska hända när tiden är ute. I vårt exempel anropas funktionen erase() efter 1000 milli-sekunder (det är en sekund för er som inte är några höjdare på matte). Det här är en phantastisk finess! Funktionen mouseover(txt) är klar när timern har startats. Läsaren anropar funktionen erase() automatiskt efter 1 sekund. (Ser framför mig en sida som säger till användaren: Om du inte gör så här kommer din hårddisk att förstöras om 10 sekunder! ???)
När timern har räknat ner börjar den inte om från början igen, men du kan förstås anropa den igen i funktionen erase(). Det leder oss direkt in på de så uppskattade rullande texterna.

Eftersom du redan vet hur man skriver på statusraden och hur funktionen setTimeout fungerar blir det inga problem att förstå hur de rullande texterna fungerar.

Klicka på den här knappen för att se min rullande text. Scriptet måste läsas från servern så ha lite tålamod om texten inte syns omedelbart.

Titta på scriptet:

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

var scrtxt="Here goes your message the visitors to your page will "+
"look at for hours in pure fascination...";
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;">
Here goes your cool page!
</body>
</html>

Det här scriptet använder samma (eller delar av) funktioner som vi redan har använt. setTimeout(...) säger åt timern att anropa funktionen scroll() när tiden är ute. Den rullande texten rör sig ett steg. I början sker en massa beräkningar, men de är inte viktiga för att förstå hur scriptet fungerar. Beräkningarna är till för att ta reda på i vilken position den rullande texten ska börja. Om det är i början måste scriptet lägga till några mellanslag för att texten ska hamna rätt.

Jag sa i början av den här delen av min introduktion att rullande texter inte är särskilt populära eller att de inte kommer att vara det särskilt länge till. Det finns några anledningar. Jag räknar upp några här, men det finns många fler.
Om du ser effekten för första gången kanske den är kul att titta på, men den miljonte gången är det inte så roligt längre. Det är kanske ingen bra anledning eftersom det gäller nästan alla tuffa trick på dina sidor.
Det finns allvarligare problem. En sak som jag inte gillar är att den ändrar hastighet när du rör på musen (den rör sig fortare!). Så är det i alla fall för mig. Effekten blir mycket tydligare när du vill göra så att texten rullar fortare genom att ändra timeout-tiden. Det allra värsta är att om du låter scriptet köra ett tag kommer du att få Out of memory error. Det ser verkligen illa ut. Det verkar vara ett problem i Netscape Navigator 2.0. Kanske kommer buggen att vara rättad i en senare version.

Det finns många andra program ute på nätet. Jag har sett rullande texter i fönster i frame-dokument. Det borde inte vara så svårt att göra ett så'nt program.

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

Översatt till svenska av Niklas Johansson 1996