Das Script, das im HEAD-Teil des Sourcecodes untergebracht wird, sieht so aus:
1 <SCRIPT LANGUAGE="JavaScript">
2 <!--
3 var nspaces = 75
4 var timer
5 var msg = ""
6 var name = ""
7
8 function scrollMaster() {
9 clearTimeout(timer)
10 name = document.form.input.value
11 msg = "Willkommen beim Windows Guide Online, " + name + ", und viel Vergnügen!"
12 for (var i = 0; i < nspaces; i++) {
13 msg = " " + msg
14 }
15 scrollMe()
16 }
17 function scrollMe() {
18 document.form.text.value = msg
19 msg = msg.substring(1, msg.length) + msg.substring(0,1)
20 timer = setTimeout("scrollMe()", 100)
21 }
22 // -->
23 </SCRIPT>
In den Zeilen 3 bis 6 werden zunächst die benötigten Variablen definiert. nspaces fügt zusammen mit der Schleife in Zeile 12 vor der Nachricht eine Anzahl Leerzeichen ein, damit diese am rechten Rand zu scrollen beginnt. timer ist die Variable für das Scrolltempo, msg und name, die zunächst leer bleiben sollen, sind die Container für die vordefinierte Nachricht und den User-Input.
Zeile 8 bis 16 definiert dann eine Master-Funktion, die die Nachricht für die Anzeige vorbereitet. Zeile 10 holt die Eingabe des Besuchers aus dem Formular und weist sie der Variable name zu. Der Variablen msg wird in Zeile 11 eine vorgegebene Nachricht zugewiesen, die auch die Variable name beinhaltet. Zeile 12 bis 14 bilden eine Schleife, die wiederholt wird, bis die Bedingung (i < nspaces) nicht mehr erfüllt ist. Dabei wird i bei jedem Durchgang um 1 grösser, während gleichzeitig der Variable msg vorne ein Space hinzugefügt wird. Sobald i gleich 75 ist, wird die zweite Funktion scrollMe aufgerufen.
Die Funktion scrollMe besteht aus den Zeilen 17 bis 21. Zeile 18 definiert das Ausgabefeld für die Nachricht, nämlich das zweite Textfeld des Formulars. Die eigentliche Scroll-Funktion ist die Zeile 19. Hier wird definiert, dass jeweils das erste Zeichen der Nachricht an den Schluss der Nachricht verschoben wird - das schiebt dann die ganze Nachricht um eine Stelle nach links. In Zeile 20 schliesslich wird der Scrolleffekt gebremst, indem die Funktion mit einer Verzögerung von 100 Millisekunden neu aufgerufen wird. Durch diese Wiederholung wird die Meldung erst richtig gescrollt - wenn sie nicht gestoppt wird, bis in ewige Zeiten.
Der zweite Teil des Beispiels, das Eingabe-/Ausgabe-Formular, wird normal im BODY-Teil des HTML-Dokuments untergebracht. Es handelt sich dabei um ein ganz geöhnliches HTML-Formular:
<FORM NAME="form">
<H3>Geben Sie bitte Ihren Namen ein und klicken Sie auf den Start-Button!</H3>
<INPUT TYPE="text" NAME="input" SIZE=30><P>
<INPUT TYPE="button" VALUE="Start" onClick="scrollMaster()"><P>
<INPUT TYPE="text" NAME="text" SIZE=30 onFocus="blur()">
</FORM>
Zu beachten ist insbesondere die saubere Namensgebung. Jeder Teil des Formulars muss ein Attribut mit seinem Namen haben, der im Script als Adresse verwendet werden kann. Im Beispiel sind das form, input und text, die in den Zeilen 10 und 18 zum Einlesen der Eingabe sowie für die Anzeige der Nachricht benutzt werden.
Gestartet wird das Script schliesslich durch den onClick-event handler, der sich hinter dem Startbutton verbirgt.
Der onFocus-event handler schlussendlich sorgt zusammen mit der blur()-Methode dafür, dass das Ausgabefeld wirklich nur für die Ausgabe der Nachricht verwendet werden kann. Allfällige Eingaben des Besuchers werden einfach ignoriert.