|
Kurzbeschreibung
Quellcode
Erläuterungen zum Quellcode
Beispiel testen: so sieht's aus
Der Quellcode zeigt die komplette HTML-Datei. Studieren Sie das Beispiel aufmerksam und lesen Sie anschließend die Erläuterungen dazu. Zur besseren Orientierung enthält das Quellcode-Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. (1). Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.
(1) Wichtige Variablen mit festem Ausgangswert
(2) Funktion definieren
(3) Ausgabeposition nach links verschieben
(4) Textzustand (neu) definieren
(5) Position zurücksetzen, wenn Text links verschwunden ist
(6) Text Zeichen für Zeichen von rechts her aufbauen
(7) Text am linken Rand verschwinden lassen
(8) Text am Bildschirm ausgeben
(9) Nächsten Durchlauf aufrufen
(10) Lauftext beim Laden der HTML-Datei starten
Kurzbeschreibung
Das Beispiel bewirkt, daß in der Statuszeile des WWW-Browsers ein "Ticker-Text", also ein Laufbandtext angezeigt wird. Dies ist z.B. sinnvoll, um auf letzte Neuigkeiten aufmerksam zu machen.
Das Beispiel beruht im wesentlichen auf dem Beispiel der hervorragenden JavaScript-Einführung von Stefan Koch .
Quellcode
Anzeigebeispiel: So sieht's aus
Quellcode:
<html>
<head>
<title>Hier den Titel der Datei eingeben</title>
<script language="JavaScript">
<!--
(1) var Text = "Hier den Lauftext eingeben";
var Geschwindigkeit = 150; /*** Nach Bedarf erhoehen oder erniedrigen ***/
var Breite = 100; /*** Nach Bedarf erhoehen oder erniedrigen ***/
var TextLaenge = Text.length; /*** Bitte nicht aendern ***/
var Position = 1 - Breite; /*** Bitte nicht aendern ***/
(2) function StatusLauftext() /*** ab hier bitte nichts aendern ***/
{
(3) Position++;
(4) var Textzustand="";
(5) if (Position == TextLaenge)
{
Position = 1 - Breite;
}
(6) if (Position < 0)
{
for (var Zaehler=1; Zaehler <= Math.abs(Position); Zaehler++)
{
Textzustand = Textzustand + " ";
};
Textzustand = Textzustand + Text.substring(0, Breite - Zaehler + 1);
}
(7) else
{
Textzustand = Textzustand + Text.substring(Position, Breite + Position);
}
(8) window.status = Textzustand;
(9) setTimeout("StatusLauftext()",Geschwindigkeit);
}
//-->
</script>
</head>
(10) <body onLoad="StatusLauftext();return true">
Hier den Inhalt der HTML-Datei eingeben
</body>
</html>
Erläuterungen zum Quellcode
Der gesamte JavaScript-Code für den Lauftext in der Statuszeile wird im Kopf der HTML-Datei notiert, also zwischen <head> und </head> mit dem dafür vorgesehenen HTML-Tag <script language="JavaScript"> .... </script>.
Zunächst werden im Quellcode ein paar wichtige Variablen definiert. Diese Variablen werden außerhalb der Funktion StatusLauftext() definiert, da die Funktion selbst iterativ ist, d.h. die Funktion ruft sich am Ende selbst auf, um den Endlos-Effekt des Lauftextes zu bewerkstelligen. Die Variablen dürfen jedoch nur einmal definiert werden, da sie feste Ausgangswerte bereitstellen, die dann bei jedem Aufruf der Funktion weiter verarbeitet werden.
Die Variable Text definiert den Text, der als Lauftext in der Statuszeile angezeigt werden soll.
Die Variable Geschwindigkeit definiert die Laufgeschwindigkeit des Textes. Die Wertzuweisung erfolgt in Millisekunden, da sie innerhalb der Funktion an die Methode setTimeout() übergeben wird, die eine Angabe in Millisekunden erwartet. Der Wert 100 bedeutet also eine zehntel Sekunde. In diesem Rhythmus erfolgt ein Refresh. Wenn Sie den Wert erhöhen, wird die Laufgeschwindigkeit erniedrigt, wenn Sie ihn erniedrigen, wird die Laufgeschwindigkeit erhöht.
Die Variable Breite definiert die Länge des Lauftextwegs innerhalb der Statuszeile in Anzahl Zeichen. Erhöhen Sie den Wert, wenn Ihr Lauftext ziemlich lang ist. Erniedrigen Sie den Wert, wenn Sie einen kurzen Text haben und mehr Laufdurchgänge wünschen.
Die beiden Variablen TextLaenge und Position werden für Berechnungen innerhalb der Funktion StatusLauftext() benötigt. Dabei erhält TextLaenge die Anzahl Zeichen des in Text angegebenen Textes zugewiesen. Position wird im Beispiel auf -99 (1 - Breite) gesetzt. Innerhalb der Funktion StatusLauftext() wird diese Variable dazu verwendet, um die aktuelle Position des auszugebenden Textes innerhalb der definierten Breite zu speichern. Mit dem Anfangswert -99 wird der Beginn des auszugebenden Textes an den rechten Rand des Ausgabebereichs positioniert. Denn der Lauftext soll ja von rechts nach links laufen.
Die Funktion StatusLauftext() im Quellcode leistet die eigentliche Arbeit, d.h. sie sorgt für den Lauftext-Effekt aufgrund der zuvor definierten Variablen. Die Variablen stehen innerhalb der Funktion zur Verfügung, weil sie im gleichen <script>...<script>-Bereich stehen wie die Funktion und selbst außerhalb jeder Funktion definiert wurden.
Bei allen Anweisungen innerhalb der Funktion StatusLauftext() im Quellcode müssen Sie sich vergegenwärtigen, daß sich die Funktion immer wieder selbst aufruft. Dadurch werden alle Anweisungen immer wieder abgearbeitet. Die Ausgabeposition des Textes, die am Anfang bei -99 steht, wird mit der Anweisung Position++ bei jedem Funktionsdurchlauf um 1 erhöht. Gleichzeitig wird weiter unten in der Funktion dafür gesorgt, daß entsprechend viele Zeichen des Textes ausgegeben werden. Durch das Erhöhen der Ausgabeposition auf -98, -97, -96 usw. wird bewirkt, daß der Text bei jedem Anzeige-Refresh immer weiter links beginnt.
Was dem Anwender als laufender Text erscheint, ist in Wirklichkeit eine Zeichenkette, die mit vielen Leerzeichen beginnt. Bei jedem Anzeige-Refresh wird eines der führenden Leerzeichen weggenommen, wodurch der sichtbare Text Zeichen für Zeichen nach links rutscht. Die Zeichenkette mit den führenden Leerzeichen und dem eigentlichen Text, der an einer bestimmten Stelle beginnt, muß in einer Variablen gespeichert werden. Dies ist im Quellcode die Variable Textzustand. Die Anzahl der führenden Leerzeichen und den auszugebenden Text bekommt diese Variable bei jedem Funktionsdurchlauf von StatusLauftext() neu zugewiesen. Dies geschieht weiter unten in der Funktion. Hier, am Beginn, wird die Variable einfach neu definiert und mit "keinem Inhalt" vorbelegt. Da die Funktion iterativ ist, wird diese Variable also jedesmal neu erzeugt.
Bei jedem Funktionsdurchlauf von StatusLauftext() im Quellcode wird die Variable Position, ausgehend von ihrem Anfangswert 1 - Breite, also -99, um 1 erhöht. Irgendwann erreicht sie auf diese Weise 0. Dann steht der Text, der rechts zu laufen beginnt, exakt am linken Rand. Danach soll der Text jedoch Zeichen für Zeichen links verschwinden, bevor er rechts wieder auftaucht. Vollständig verschwunden ist er links, wenn der Positionszähler 0 + die Länge des Textes beträgt, also identisch mit dem festen Wert der Variablen TextLaenge ist. Sobald dies der Fall ist, wird der Positionszähler wieder auf den Anfangswert 1 - Breite (also -99) gesetzt, damit der nächste Laufdurchgang von rechts beginnen kann.
Solange der Positionszähler, der im Quellcode bei -99 nach oben zu zählen beginnt, kleiner als 0 bleibt, muß der Text Zeichen für Zeichen von rechts her nach links verschoben werden. Dazu muß die Statuszeile von links her bis zu der Position, an der der Text im aktuellen Zustand beginnen soll, mit Leerzeichen aufgefüllt werden. Dies geschieht in einer for-Schleife. Nachdem in der Variablen Textzustand die berechnete Anzahl Leerzeichen gespeichert ist, wird ihr noch der eigentlich auszugebende Text angehängt. Dies geschieht durch Aufruf der Methode substring, angewendet auf das String-Objekt (die Variable) Text. Der Text wird von Zeichen 0 bis zu einem berechneten Zeichen (Breite - Zaehler + 1) ausgegeben.
Wenn im Quellcode der Positionszähler gleich 0 ist, ist der Text am linken Rand angelangt. Ab diesem Moment müssen keine führenden Leerzeichen mehr erzeugt werden. Stattdessen muß bei jedem neuen Durchlauf vorne beim Text ein Zeichen verschwinden, so daß der Eindruck entsteht, der Text verschwinde am linken Rand. Auch dies geschieht durch Aufruf der Methode substring, angewendet auf das String-Objekt (die Variable) Text. Wenn der Positionszähler nun größer als 0 ist, z.B. 3, wird der Text erst ab Zeichen 3 (Position) ausgegeben.
Der Text wird bis zu einem berechneten Zeichen (Breite + Position) ausgegeben.
Was im Quellcode bislang passierte, geschah im Speicher der definierten Variablen ohne sichtbare Wirkung am Bildschirm. Nachdem die Position des jeweils auszugebenden Textes berechnet und die Zeichenkette, die letztendlich in der Statuszeile angezeigt werden soll, erzeugt worden ist, kann sie ausgegeben werden. Dazu wird der Objekteigenschaft window.status wird der Wert der auszugebenden Variablen Textzustand zugewiesen.
Nachdem der aktuelle Zustand des Lauftextes im Quellcode in die Statuszeile geschrieben ist, ruft sich die Funktion StatusLauftext() am Ende selbst auf (Iteration). Das tut sie jedoch nicht sofort, sondern sie wartet so lange, wie es in der Variablen Geschwindigkeit eingestellt ist. In Wirklichkeit ist der Wert der Variablen Geschwindigkeit also die Verzögerungszeit zwischen einem Zustand und dem nächsten. Mit der Methode setTimeout() ist dieser verzögerte Funktionsaufruf möglich.
Da der Statuszeilen-Lauftext im Quellcode gleich beim Aufruf des Dokuments starten soll, wird der Aufruf der Funktion StatusLauftext() gleich im einleitenden <body>-Tag der HTML-Datei mit Hilfe des Event-Handlers onLoad aufgerufen. Der Lauftext funktioniert nun, solange der Anwender die Datei am Bildschirm anzeigt.
Blättern:
Objektunabhängige Funktionen
Zwei Frames gleichzeitig ändern
HTML-Dateien selbst erstellen
Dokumentation: JavaScript
JavaScript Anwendungsbeispiele