Statusbalk, timer en scroller

De statusbalk

Via JavaScript kunnen we schrijven naar de statusbalk - dit is de balk onderaan ons browser venster. Al wat we moeten doen is een tekststring toekennen aan window.status. Het volgende voorbeeld toont twee knoppen die elk een tekst schrijven naar de statusbalk om hem vervolgens terug uit te vegen.

Het script ziet er als volgt uit: 

<html>
<head>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

function statbar(txt) {
   window.status = txt;
}

// -->
</script>
</head>
<body>

<form>
  <input type="button" name="waar" value="Waar is de statusbalk ?" 
    onClick="statbar('Hallo! Dit is de statusbalk!');">
  <input type="button" name="wissen" value="Wissen" 
    onClick="statbar('');">
</form>

</body>
</html>
We creerden een formulier met twee knoppen. Beide knoppen roepen de functie statbar() op.. We zien verder dat de wanneer de gebruiker klikt op de knop Waar is de statusbalk ? volgende functie wordt uitgevoerd: 
statbar('Hallo! Dit is de statusbalk!');
Binnen de ronde haakjes specifieren we de string 'Hallo! Dit is de statusbalk!' Dit betekent dat deze string wordt doorgegeven aan de functie statbar(). De functie statbar() is als volgt gedefinieerd: 
function statbar(txt) {
   window.status = txt;
}
Wat is nieuw hier? We gebruiken hier txt binnen de haken van onze functie. Dit betekent dat we de string die we doorgeven aan de functie gestockeerd wordt in de variabele txt.
Het doorgeven van variabelen aan functies is wat het gebruik van functies zo krachtig en flexibel maakt. Het is tevens mogelijk meerdere waarden door te geven aan een functie - we hoeven enkel een comma te plaatsen tussen de verschillende waarden die we wensen door te geven aan de functie.
De string txt wordt getoond in de statusbalk dmv window.status = txt.
Het uitwissen van de tekst in de statusbalk gebeurt dmv een lege string toe te kennen aan window.status.

Het tonen van een tekst in de statusbalk wordt dikwijls gebruikt in combinatie met hyperlinks. In plaats van de URL van een hyperlink geven we een beetje uitleg over de volgende pagina. Bijvoorbeeld : link Het volgende voorbeeld toont demonstreert dit - ga met de muiswijzer over de link en zie wat er gebeurt. De code volgt: 

<a href="pcaktief.htm" 
  onMouseOver="window.status='PC Aktief Computerclub'; return true;"
  onMouseOut="window.status='';">link</a>
Hier gebruiken we onMouseOver en onMouseOut om te detecteren of de muiswijzer over de hyperlink passeert.
U vraagt zich misschien af waarom we return true schrijven in de onMouseOver property. Dit betekent dat de browser niet zijn eigen code uitvoert als reactie op het MouseOver event maar wel datgene wat wij geprogrammeerd hebben. Normaal gezien toont de browser de URL van de hyperlink in de statusbalk. Als we niet return true schrijven dan zal de browser onmiddelijk na het uitvoeren van onze eigen geschreven code zijn ding doen en alzo onze tekst overschrijven. In het algemeen kunnen we stellen dat we return true schrijven in de event-handler om acties van de browser uit te schakelen.
onMouseOut bestaat niet in JavaScript 1.0. Indien we nog Netscape Navigator 2.x gebruiken dan zullen we verschillende resultaten krijgen afhankelijk van het platform. Op een Unix-platform bijvoorbeeld zal de tekst in de statusbalk na een tijdje verdwijnen ook al kent de browser OnMouseOut niet. Onder Windows verdwijnt de tekst niet. Als we ons script willen in Netscape 2.x onder Windows gebruiken dan kunnen we bijvoorbeeld een functie schrijven die een tekst schrijft in de statusbalk en die tekst na een bepaalde tijd uitveegt. Dit programmeren we dmv een zogenaamde timeout. Hierover zien we meer in de volgende paragraaf.

Timeouts

Met de hulp van timeouts (of timer) kunnen we de computer een bepaalde code laten uitvoeren na een bepaalde tijd. In het volgende voorbeeld verschijnt een popup-window 3 seconden na het klikken op de knop:

Het script ziet er als volgt uit: 

<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

function timer() {
  setTimeout("alert('Tijd is om!')", 3000);
}

// -->
</script>

...

<form>
  <input type="button" value="Timer" onClick="timer()">
</form>
setTimeout() is een methode van het window-object. Het plaatst een timeouts - even niets doen. Het eerste argument is de Javascript code die we wensen uit te voeren nadat er een bepaalde tijd verstreken is. In ons geval is het argument alert('Tijd is om!')".
Het tweede argument vertelt de computer wanneer de code dient uitgevoerd te worden. We moeten hier de tijd aangeven in milliseconden (3000 milliseconden = 3 seconden).

Scroller

Nu we weten hoe we iets moeten schrijven naar de statusbalk en hoe te werken met timeouts kunnen we proberen een 'scroller' te schrijven. Dit is een bewegende tekst in de statusbalk. Dit wordt veelvuldig (soms te veel) gebruikt op het WWW. We zullen hier zien hoe we zo een scroller programmeren.
Scrollers zijn vrij simpel te implementeren. De idee van een bewegende tekst bestaat erin een tekst te schrijven naar de statusbalk en na een bepaalde tijd dezelfde tekst te sturen naar de statusbalk maar nu een beetje meer naar links. Als we dit altijd blijven herhalen dan zal dit de indruk geven van een bewegende tekst.

Volgend voorbeeld zal dit verduidelijken:

Hier volgt de sourcecode voorzien van de nodige commentaar:

<html>
<head>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers


// definieer de tekst in de scroller
var scrtxt = "Welkom bij PC Aktief Computerclub - " +
             "de tofste computerclub van het Waasland "; 
var length = scrtxt.length;
var width = 100;
var pos = -(width + 2);

function scroll() {

  // display the tekst uiterst rechts en wacht een beetje

  // ga een stap verder
  pos++;

  // bereken het deel van de tekst dat getoond wordt
  var scroller = "";
  if (pos == length) {
    pos = -(width + 2);
  }

  // Indien de tekst nog niet volledig links is aangekomen dan moeten we
  // spaties toevoegen - indien niet dan moeten we een deel van de
  // tekst afkappen (het gedeelte wat links verdwenen is)
  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);
  }

  // toon de tekst in de statusbalk
  window.status = scroller;

  // wacht gedurende 100 milliseconden
  setTimeout("scroll()", 100);
}

// -->
</script>
</head>

<body onLoad="scroll()">
Dit is een voorbeeld van een JavaScript scroller.
</body>
</html>
Het grootste gedeelte van de scroll() functie is nodig voor het berekenen van het deel van de tekst dat we gaan tonen.
Om de scroller op te starten maken we gebruik van de onLoad event-handler in de <body> tag. Dit betekent dat de functie scroll() wordt opgeroepen nadat onze HTML-pagina geladen is.
De eerste maal wordt de scroll() functie opgeroepen dmv de onLoad property. De eerste stap wordt berekend en de tekst wordt getoond in de statusbalk. Aan het einde van de scroll() functie wordt een timeout aangevraagd. Hierdoor wordt de functie stopgezet gedurende 100 milliseconden. De tekst wordt een stap verder naar links verplaatst en de functie wordt hernomen. Dit gaat zo eeuwig door.
(Er zijn al problemen gerezen met dit type scroller onder Netscape Navigator 2.x. Soms veroorzaakt dit een 'Out of memory'-error.)
Scrollers worden veelvuldig gebruikt op het Internet. Er bestaat het risico dat mensen het een vervelend iets vinden en het gebruik ervan onpopulair wordt. Zeer vervelend is het feit dat men de URL's niet meer ziet wanneer men er met de muiswijzer over heen gaat. Dit kunnen we oplossen door de scroller te stoppen wanneer er zich een MouseOver event voordoet - nadien kunnen we de scroller terug opstarten dmv een onMouseOut event. Met een beetje fantasie kunnen we varianten maken op de scrollerfunctie bijvoorbeeld een deel van de tekst komt links in beeld en een ander deel van de tekst komt rechts in beeld totdat ze beiden samen komen.

[vorig hoofdstuk] [inhoud] [volgend hoofdstuk]

Site monitored 
by 
   

webdesign by

© 1998