JavaScript: window-Objekt (2)

Nach dem Einstieg in das window-Objekt folgt nun die ereignisreiche Fortsetzung.

Das window-Objekt hat viele Eigenschaften und Funktionen, von denen wir im Rahmen dieses Kurses nicht alle behandeln werden. Hauptthema soll diesmal die Event-Verwaltung sein. Dies ist auch der erste Bereich, in dem ernsthaft die Tücken der Browser-Unterschiede auftauchen.

Events

Events sind Systemereignisse. Ein Mausklick ist bspw. ein Event und wird vom System verarbeitet. Der Computer ist also in diesem Fall sehr genügsam, was die Qualität der "Events" betrifft, wenn man die Events aus dem normalen Sprachgebrauch denkt. Einen Großteil der Events verarbeitet der Computer, so das eine eigene kleine Events-Verarbeitung in JavaScript erst dann aufgebaut werden muß, wenn Spezialaufgaben anstehen.

Eine solche Spezialaufgabe wäre z.B. ein Timer, der nach einer bestimmten Zeit eine Aktion auslöst.

Lösung in JavaScript

Die Event-Funktionen sind größtenteils mit der vierten Browser-Generation von IE und Netscape eingeführt worden und sind Sprachbestandteil von JavaScript 1.2. Bei einigen Event-Funktionen gibt es zudem große Unterschiede zwischen den Browsern.

Der Einstieg soll mit der ältesten Event-Funktion gewählt werden. setTimeout wartet eine bestimmte Anzahl von Millisekunden und führt dann eine JS-Funktion aus. Diese Funktion gehört zu JavaScript 1.0.

Beispiel:

<script language="JavaScript">
<!--
function schlaf()
{
    alert("Es besteht die Gefahr, das Sie vor 
    dem Bildschirm einnicken. Wir leiten sie 
    nun an unseren Weckdienst weiter.");
document.location.href="http://www.metallica.com";
}
window.setTimeout("schlaf()", 1000);
//-->
</script>

Jeder, der einen Blick auf die angegebene Zahl wirft, wird wohl merken, das hier nur der berühmt-berüchtigte "Sekundenschlaf" abgefangen wird. Die angegebene Zahl kann weiter erhöht werden, aber zu Testzwecken sollte sie eher niedrig gewählt werden. Wird das Script im Browser ausgeführt, erscheint nach einer Sekunde die Hinweisbox. Nach einem Klick auf "OK" wird der Browser auf die Metallica-Homepage weitergeleitet.

Die einzige Anweisung, die der Browser zunächst ausführt, ist "setTimeout". setTimeout benötigt zwei Parameter: die gewünschte JavaScript-Funktion und eine Zeitangabe in Millisekunden (1/1000 Sekunde). Ist die angegebene Zeit verstrichen, wird die angegebene Funktion, also "schlaf()", aufgerufen.

Es ist übrigens auch möglich, den Timer zu stoppen. Damit der Browser den Timer stoppen kann, muß der Aufruf leicht verändert werden:

schlafen = window.setTimeout("schlaf()", 1000);

Nun kann der Timer mit folgender Zeile gestoppt werden:

window.clearTimeout(schlafen);

Um den Timer-Event beizubehalten, müßte erneut setTimeout aufgerufen werden. Das Beispiel benutzt zwar nur einen Timer, aber es ist problemlos möglich, mehrere Timer zu definieren. Eine elegantere Lösung wurde mit JavaScript 1.2 eingeführt: Intervalle.

Intervalle

JS-Intervalle rufen in einer gewählten Zeit immer wieder eine bestimmte Funktion auf. Sie sind im wesentlichen eine Vereinfachung von setTimeout, d.h. mit etwas mehr Aufwand lassen sich Intervalle auch durch sich wiederholende setTimeout-Aufrufe ersetzen. Intervalle sind insbesondere für Spiele unerläßlich, denn mit Schleifen o.ä. ist nur eine ungenaue Zeitsteuerung möglich. Weitere Anwendungsgebiete sind z.B. Werbebanner oder Textscroller.

Um ein Intervall zu setzen, gibt es setInterval(). Das folgende Beispiel verdeutlicht die Anwendung:

<script language="JavaScript">
<!--
neu = window.setInterval("schau()",1000);
i = 0;
function schau()
{
if (i == 0) {
text="Heute";
} else if (i==1) {
text="in Ihrem";
} else if (i==2) {
text="Computerkino";
} else if (i==3) {
text="Der";
} else if (i==4) {
text="Herr";
} else if (i==5) {
text="der";
} else if (i==6) {
text="Scripte";
    }
document.Test.schauspieler = text;
i=i+1;
if (i==7) { i=0; }
}
//-->
</script>
<form name="Test">
<input type="text" size="40" name="schauspieler">
</form>

In diesem Beispiel wird durch ein Intervall der Text des Eingabefeldes geändert. Versierte JS-Programmierer bekommen in einem Eingabefeld die seltsamsten Animationen hin, teilweise ist dann aber der Code der Animationsroutine größer als der HTML-Quelltext.

Ein Vorteil einer solchen Anzeige ist die Platzersparnis - die letzten Änderungen an der Seite könnten auf diese Weise z.B. angezeigt werden. Auch ein Börsenticker kann - mit etwas mehr Aufwand - so dargestellt werden. Im Eingabefeld sind allerdings kaum sanfte Animationen möglich.

Eine Funktion, die nicht im Beispiel auftaucht, ist clearInterval().

Dazu ein Beispiel: ein Weltraumspiel soll in JavaScript programmiert werden. Der Spieler feuert einen Schuß auf ein feindliches Ufo ab. Für jedes dieser drei Objekte läuft ein eigenes Intervall. Wenn das Ufo getroffen wird, sollen der Schuß und natürlich auch das Ufo nicht weiterfliegen.

Das Spiel soll (noch) nicht programmiert werden, aber möchte man das "Computerkino"-Intervall stoppen, müßte folgendes eingegeben werden:

window.clearInterval(neu);

Damit erklärt sich auch die Bedeutung des "neu" vor dem setInterval(). Jedes Intervall bekommt eine eigene Kennung. Light of Adamas unterstützt in der aktuellen Version noch keine Intervalle.

Events abfangen

Netscape kennt eine JS-Funktion, um Events "abzufangen". Diese Event-Routinen können komfortabel dazu verwendet werden, z.B. das Betreten eines Fensters zu überwachen:

<script type="text/javascript"> 
<!-
window.captureEvents(Event.CLICK); 
window.onclick = alarm; 
function alarm(Parameter) { 
alert("Hallo!"); 
} 
//--> 
</script>

Dieses Beispiel läuft nur ab Netscape 4. Das Beispiel überwacht das Browserfenster. Wird innerhalb des Browserfensters mit der Maus geklickt, erscheint eine Hinweisbox. Die Ereignisse, die abgefangen werden können, sind:

window.captureEvents(Event.CLICK
Event.MOVE);

Jetzt waren die bisherigen Beispiele Netscape-exklusiv, aber auch der IE kennt die Eventüberwachung:

<script>
<!--
    a=window.event.keyCode;
    alert(a);
//-->
</script>

Dieses kleine Beispiel fragt ab, welche Taste gedrückt wurde. Zurückgegeben wird der Tastencode, der z.B. für die "Pfeil-Links"-Taste 100 beträgt. Als weitere Eigenschaften stehen u.a. altKey, shiftKey und ctrlKey, um den Status der Umschalttasten abzufragen, zur Verfügung. Mit der Tastatursteuerung lassen sich schon nette Scripte programmieren, z.B. ein kleines Botenspiel (siehe Bild). In dem Spiel kann die Figur mit den Cursortasten geholt werden, um Pakete von A nach B zu bringen. Ein Intervall sorgt dafür, das die Abholstelle nach ein paar Sekunden wechselt.

Wie Sie allerdings sehen, ist die Verwaltung völlig anders und deshalb ist es auch kein Wunder, das diese Art der Event-Abfrage im Web nicht sonderlich verbreitet ist. Nun könnte man zwar mit Browserabfragen versuchen, eine Lösung zu finden, die auf allen Browsern funktionieren, aber Opera 5 kann sich z.B. als IE oder Netscape ausgeben. Ärger ist da vorprogrammiert und deshalb verwenden z.B. JavaScript-Spiele größtenteils nur die Maus oder umständliche Steuerungsmöglichkeiten (z.B. Formularbuttons).

Einfacher und browserunabhängiger - sofern die entsprechende Option installiert und aktiviert ist -, sind Lösungen wie Java oder Flash.

Dies war allerdings noch nicht alles aus dem Bereich Events, denn es gibt - und jetzt jubilieren alle JS-Programmierer - tatsächlich Event-Mechanismen, die vom W3C standardisiert wurden. Mit diesen sind z.B. die beliebten Rollover, d.h. Bilder, die sich beim Überfahren mit der Maus austauschen, möglich.

Manche Webseiten fangen per Event-Abfrage die rechte Maustaste ab, um ein Kopieren ihrer Inhalte zu verhindern. Das funktioniert allerdings nur so lange, wie der User nicht auf die Idee kommt, die komplette Webseite abzuspeichern oder - auf Windows-PCs - die Kontextmenü-Taste zu benutzen.


Mia Jaap
Aus:ST-Computer 04 /2002, Seite
Links
Copyright-Bestimmungen: siehe Über diese Seite