AMIGA-Magazin

Moderne Homepages kommen heute nicht mehr ohne JavaScript aus. Grafikeffekte, interaktive Elemente oder professionelle Informationsaufbereitung sind die häufigsten Anwendungsgebiete dieser Skriptsprache fürs Web. Unser Kurs hilft Ihnen beim Einstieg in JavaScript.

von Hartwig Tauber

JavaScript ist ein mächtiges Werkzeug um HTML-Seiten im Internet mit einfachen Mitteln mit vielerlei Spezialeffekten und interaktiven Elementen zu versehen. Einsteiger haben dabei sehr oft ein wenig Scheu vor JavaScript, da mit dem Thema Java häufig komplexe Programmierung und objektorientierte Anwendungsentwicklung verbunden wird. Doch keine Angst, dies ist bei JavaScript nicht der Fall (s. Kasten: »Java und JavaScript«). Denn JavaScript ist einfach zu erlernen und bereits mit wenigen Grundelementen lassen sich vielfältige Effekte und Anwendungen zaubern.

Java und JavaScript

Auch wenn Java und JavaScript ähnlich klingen, die Unterschiede zwischen diesen beiden Programmiersprachen sind in Wirklichkeit beträchtlich. Die Programmiersprache Java stellt eine vollständige, objektorientierte Programmiersprache dar. Um in Java zu entwickeln ist ein eigenes Entwicklungssystem inklusive Compiler notwendig, das aus dem erstellten Programmcode ein lauffähiges Programm macht.
JavaScript dagegen ist eine typische Skriptsprache. Für sie gibt es keinen Compiler, die Übersetzung des Codes wird vom jeweiligen Internetbrowser Zeile für Zeile durchgeführt. Die Entwicklung mit JavaScript ist deshalb vergleichsweise einfach, der Programmcode wird einfach in das HTML-Dokument eingefügt und beim Anzeigen der Seite ausgeführt.
Ähnlich sind die Anweisungsstrukturen von Java und JavaScript. Das heißt, die Befehle für Bedingungen (if...then), Schleifen (z.B. for...next) etc. sind gleich aufgebaut. Aus diesem Grund kann JavaScript durchaus auch einen guten Einstieg in die Java-Programmierung darstellen, da man einerseits schnelle Erfolge erzielt und andererseits Gefühl für die Programmiersprache bekommt.

Im Rahmen dieses Kurses zeigen wir Ihnen die notwendigen Grundlagen, um mit JavaScript ihre Web-Seiten weiter zu verfeinern. In den nächsten Ausgaben werden dann immer wieder praktische JavaScripts vorgestellt, die sie noch weiter in die Materie einführen. Voraussetzung sind zumindest grundlegende Kenntnisse einer beliebigen Programmiersprache beziehungsweise das Wissen um die wichtigsten Elemente eines Programmes.

Den Beginn macht auch bei JavaScript ein einfaches Listing, dessen einzige Aufgabe es ist, den Text »Hello World« auf einer Web- seite auszugeben. Das dazugehörige Skript ist im Listing 1 zu sehen. Es enthält bereits eine ganze Reihe von typischen Elementen, die für die Programmierung mit JavaScript notwendig sind. Auf den ersten Blick zu erkennen ist, dass das Skript in eine herkömmliche HTML-Seite eingebettet ist. Man kann zwar auch JavaScripte auslagern und per Befehl nachlagern, damit wollen wir uns an dieser Stelle nicht befassen.

Das Skript selbst wird mit dem <script>-Tag eingeleitet und entsprechend den üblichen Konventionen von HTML mit </script> wieder beendet. Der optionale Zusatz LANGUAGE="JavaScript" weist darauf hin, dass die folgenden Zeilen in der angegebenen Skriptsprache erstellt wurden. Es empfiehlt sich, diesen Zusatz immer anzugeben, um Interpretationsfehler bei unterschiedlichen Browsertypen zu vermeiden.

Die Zeichenkombination <! am Beginn und > am Ende des Skripts sind ebenfalls optional. Sie umfassen normalerweise Kommentare in HTML-Seiten und werden deshalb verwendet, um zu vermeiden, dass Browser, die JavaScript nicht unterstützen, den Code wie herkömmlichen HTML-Text behandeln und einfach auf der Seite ausgeben. Wich- tig ist dabei übrigens, dass <! immer nach dem <script>-Tag und > immer vor dem <script>-Tag eingefügt weren. Andernfalls werden auch diese beiden Tags als Kommentar interpretiert und deshalb der gesamte Code von allen Browsern ignoriert.

JavaScript und Amiga

Die aktuellen Versionen der Amiga-Browser unterstützen ebenfalls JavaScript. Dabei beschränkt sich diese Unterstützung in der Regel auf die Standardbefehle der JavaScript-Referenzversionen 1.0 bzw. 1.1. Diese stellen einen kleinsten gemeinsamen Nenner fürJavaScript-Programmierer dar. Leider hat es sich eingebürgert, dass die beiden Hauptakteure am Browser-Markt (Microsoft und Netscape) eigenmächtig immer wieder Spezialfunktionen erfinden, die jeweils nur vom eigenen Browser unterstützt werden. Auch gibt es einige Hacks, das heißt inoffizielle Befehle und Tricks, die sowohl mit Netscape als auch mit dem Internet-Explorer funktionieren, bei denen die Amiga-Vertreter jedoch passen müssen.
Aus diesem Grund findet man im Internet immer wieder Seiten, die mit Amiga-Browsern nicht dargestellt werden können. Im Rahmen dieses Kurses werden ausschließlich Befehle und Beispiele behandelt, die sich an die JavaScript-Grundlagen halten und deshalb auch am Amiga funktionieren. Die im Artikel vorgestellten Beispielskripts wurden mit AWeb in der Version 3.2 entwickelt.

Das Skript selbst besteht in unserem ersten Beispiel lediglich aus einer einzigen Zeile. Mit Hilfe der Anweisung write wird der gewünschte Text auf der HTML-Seite ausgegeben. Dabei machten wir erstmals mit dem objektorientierten Ansatz von Java Bekanntschaft, der auch in JavaScript übernommen wurde. Der Befehl write, der in der objektorientierten Sprache als Methode bezeichnet wird, kann nur in Zusammenhang mit einem Objekt, in dem die Ausgabe stattfinden soll, aufgerufen werden. In unserem Fall ist dies das vordefinierte Objekt document, das immer die gerade aktuelle HTML-Seite bzw. den aktuellen Frame beschreibt.

Auch wenn dies auf den ersten Blick kompliziert erscheinen mag, erweist sich dieses Konzept in der Folge als sehr flexibel. Denn dieselbe Methode write kann ebenso auf einen anderen Frame einer HTML-Seite angewendet werden oder auf ein Cookie oder eine Datei. Der Aufruf bleibt immer derselbe, lediglich das vorangestellte Objekt wird angegeben. Für Programmierer, die sich noch nicht mit objektorientierter Theorie auseinandergesetzt haben, ist der folgende Gedankengang wahrscheinlich der einfachste: Beim Aufruf einer Methode wird immer zuerst angegeben, worauf sich der Befehl auswirken soll, danach kommt, durch einen Punkt getrennt, der eigentliche Befehl.

Die letzte wichtige Eigenschaft von JavaScript, die sich aus unserem ersten Beispiel ersehen lässt ist, dass jede Befehlszeile mit einem Semikolon abgeschlossen wird. Theoretisch funktionieren alle JavaScripts auch ohne dieses Abschlusszeichen, in der Praxis hat sich jedoch gezeigt, dass sowohl Netscape als auch der Internet-Explorer bei komplexen Anweisungen Probleme mit der Interpretation haben, wenn das Semikolon fehlt.

Während das erste Beispiel noch keinen praktischen Nutzen hatte, liegt mit unserem zweiten Listing bereits ein Programm vor, das für die private Homepage äußerst nützlich sein kann. Dieses Skript erlaubt es, den Surfer abhängig von der jeweiligen Uhrzeit immer mit dem richtigen Text zu begrüßen. Dazu wird im ersten Schritt mit Hilfe der in JavaScript bereits vordefinierten Funktion Date() das aktuelle Datum samt der Uhrzeit ermittelt. Das Ergebnis wird in der Variable zeit gespeichert. In JavaScript werden die Variablen automatisch bei der ersten Verwendung erzeugt, das heißt, es ist nicht notwendig, diese zuvor mit einem eigenen Befehl zu definieren. Für die weitere Arbeit ist wichtig, dass unsere Variable in JavaScript gleichzeitig auch als Objekt angesehen wird, auf das unterschiedliche Methoden angewendet werden können.

Vergleichsoperatoren in JavaScript

Operator	Funktion
x == y	x ist gleich y
x != y	x ist nicht gleich y
x > y	x ist größer als y
x < y	x ist kleiner als y
x >= y	x ist größer oder gleich y
x <= y	x ist kleiner oder gleich y
x > 1000 && x < 2000	x ist größer als 1000 und kleiner als 2000
x > 1000 \|\| x < 500	x ist größer als 1000 oder kleiner als 500

Da uns lediglich die Stunde interessiert, greifen wir auf eine weitere Funktion zurück, die aus der Uhrzeit die Stunde ermittelt. Diese ist ebenfalls bereits in JavaScript vordefiniert und trägt den Namen getHours(). Bei dieser Funktion begegnet uns wiederum das objektorientierte Konzept. Zuerst wird angegeben, dass die Funktion auf das Objekt zeit angewendet wird, danach erfolgt der eigentliche Aufruf.

In der Folge wird das Ergebnis mit Hilfe einer if...then-Konstruktion abgefragt. Die Befehle, die ausgeführt werden sollen, falls die Bedingung zutrifft, wurden in den ersten drei Fällen mit Hilfe von Anweisungsblöcken programmiert. Diese Blöcke werden jeweils von geschwungenen Klammern eingefasst und zeigen zusammengehörige Anweisungen an. Normalerweise werden diese Blöcke dann genutzt, wenn auf eine wahre Bedingung mehrere Befehle folgen. Ist die Reaktion auf eine wahre Bedingung lediglich ein einziger Befehl, so kann auch eine verkürzte Version, wie sie in den beiden letzten Zeilen der Abfrage verwendet wurde, zum Einsatz kommen. Hier folgt der Befehl direkt auf die Bedingung, die Zeile wird mit einem Semikolon abgeschlossen.

Die verschiedenen Vergleichsoperatoren von JavaScript finden Sie in Tabelle »Vergleichsoperatoren in JavaScript« zusammengefasst. Diese sind sehr stark an die Programmiersprache C angelehnt. Beachten sie übrigens, dass JavaScript zwischen Groß- und Kleinschreibung unterscheidet. Aus diesem Grund ist es wichtig, dass in unserem Beispiel die Variable Stunde tatsächlich immer groß geschrieben wird.

Das dritte Beispiel erfüllt denselben Zweck wie unser zweites Listing, wurde jedoch dahingehend verändert, dass das Programm in eine JavaScript-Funktion verlagert wurde. Dies hat mehrere entscheidende Vorteile. Eine Funktion kann innerhalb einer Seite beliebig oft aufgerufen werden. Wenn es also notwendig wäre, den Begrüßungstext ein zweites Mal auszugeben, hätte bislang der gesamte Code noch einmal in die Seite eingefügt werden müssen. Als Funktion genügt es, den jeweiligen Aufruf, der lediglich eine Zeile umfasst, entsprechend oft im HTML-Code einzufügen. Hinzu kommt, dass auf diese Weise eine Änderung im Code der Funktion automatisch für alle Aufrufe auf dieser Seite wirksam wird, ohne dass deshalb jeder Aufruf einzeln bearbeitet werden muss.

Ein weiterer, oft genutzter Vorteil liegt in der einfachen Kopierbarkeit des Codes auf andere Seiten. Es genügt, einfach die gesamte Funktion in eine andere Seite zu übernehmen und schon steht sie auch dort zur Verfügung.

Ausgewählte EventHandler für JavaScript

Handler	Funktion
onClick	reagiert auf das Anklicken des Elementes (d.h. Drücken und Loslassen der Maustaste)
onDblClick	reagiert auf das Doppelklicken des Elements
onLoad	wird aufgerufen, sobald die Seite fertig geladen wurde
onMouseDown	die Maustaste wird über dem Objekt gedrückt
onMouseOver	der Mauszeiger wird über das Objekt geschoben
onMouseOut	der Mauszeiger verlässt den Objektbereich
onMouseUp	die Maustaste wird über dem Objekt losgelassen

Funktionen sind immer im <head>-Bereich der HTML-Seite untergebracht. Dadurch wird sichergestellt, dass sie bereits geladen sind, wenn die Funktion das erste Mal aufgerufen wird. Die Definition einer Funktion erfolgt mit Hilfe des Schlüsselwortes function, wobei der Name derselben frei gewählt werden kann. Allerdings ist zu beachten, dass keine Sonderzeichen verwendet werden dürfen. Zwischen den Klammern können etwaige Parameter übergeben werden, die von der Funktion benötigt werden. Die Anweisung "return" sorgt schließlich dafür, dass das Ergeb- nis der Funktion wieder an den Aufruf übergeben wird.

Es gehört zur guten Sitte, die Aufgaben der Funktion mit Hilfe eines kurzen Textes zu beschreiben. Kommentare werden dabei durch // eingeleitet. Auf diese Weise stellen sie sicher, dass auch später sehr schnell erkannt werden kann, wie die Funktion korrekt aufgerufen wird und wofür sie eingesetzt werden kann. Dabei sollte man sich immer bewusst sein, dass JavaScripts im Internet immer eingesehen werden können. Ein JavaScript, das auf einer ihrer Seiten untergebracht wird, ist für jeden Surfer einsehbar, der sich den Quelltext der Seite ansieht. Eine gute Dokumentation kann deshalb auch anderen Personen helfen, die aus ihren Skripts lernen möchten oder diese vielleicht sogar auf eigenen Seiten einsetzen wollen.

<html> 
<head> 
<title>Test</title> 
</head> 
<body> Ab hier steht die Ausgabe meines ersten 
JavaScript-Programmes:<p> 
<script language="JavaScript"> 
<!-- 
       document.write("Hello World!"); 
// --> 
</script> 
</body> 
</html>

Listing 1: Das erste JavaScript mit der "unvermeidlichen" "Hello World"-Ausgabe

Die wahrscheinlich bekannteste Anwendung für JavaScript sind die sogenannten Rollover-Effekte. Bei diesen verändert sich eine Grafik, wenn mit der Maus über diese gefahren wird. Besonders bei Links, die hervorgehoben werden sollen, kommt dies zur Anwendung. Die einfachste Version des Rollover-Effektes ist in unserem vierten Listing dargestellt. Dort wird der Effekt gleich im Rahmen des <a>-Tags abgearbeitet.

Dabei kommen erstmals sogenannte EventHandler von JavaScript in Aktion. Unter Events versteht man dabei vordefinierte Ereignisse, die bei einem Objekt auftreten und auf die mit einem Programm reagiert werden kann. Im Beispiel werden die beiden Events onMouseover und onMouseout verwendet. Der Browser überprüft dabei laufend, ob sich der Mauszeiger gerade im Bereich des Links, der zwischen <a> und </a> definiert wurde, befindet. Sobald die Maus über diesen Bereich gelangt, wird das Event onMouseover des Objektes ausgelöst und die zugewiesene Aktion ausgeführt. Dasselbe gilt für den Fall, dass die Maus diesen Bereich wieder verlässt. Dann kommt der Aufruf, der onMouseout zugewiesen ist, zur Ausführung. In JavaScript sind bereits eine ganze Reihe von solchen EventHandlern integriert. Die wichtigsten sind in der Tabelle 2 zusammengefasst.

Im Beispiel wird, sobald sich die Maus über dem Linkbereich befindet, die Quelle für die Grafik, der der Name Link1 zugewiesen wurde, ausgetauscht. Dadurch wird sofort ein anderes Bild angezeigt. Verlässt die Maus diesen Bereich wieder, wird zum ursprünglichen Bild zurückgeschaltet. Der Rollover-Effekt ist damit bereits fertig definiert. Es empfiehlt sich, die Größe der beiden Grafiken gleich zu definieren. Viele Browser verkraften zwar auch unterschiedliche Größen, allerdings kann es dann zu ungewollten Darstellungsfehlern kommen, da genaugenommen die ganze Seite neu aufgebaut werden müsste. Ein Rollover-Effekt muss sich übrigens nicht unbedingt direkt auf die nachfolgende Grafik beziehen. Er kann theoretisch auf jede beliebige Grafik auf der Seite angewendet werden. Das heißt, wenn sich der Mauszeiger über einen Link bewegt, ist es ebenso möglich, dass an einer völlig anderen Stelle eine Grafik erscheint, die z.B. zusätzliche Informationen über diesen Link enthält.

Entsprechend der JavaScript-Definition sollte es möglich sein, die typischen EventHandler wie onMouseover direkt in einem <img>-Tag zu verwenden. Doch bis auf den Internet-Explorer von Microsoft unterstützt dieses Feature bisher kein Browser. Deshalb sollte, vor allem auch um die Darstellung auf Amiga-Browsern sicherzustellen, der Aufruf der EventHandler mit dem <a>-Tag erfolgen.

Der einfache Rollover-Effekt mittels direkter Definition im <a>-Tag hat einige Nachteile. So haben einige Browser, wie z.B. AWeb ein Problem, wenn auf den Link geklickt wird und danach per Zurück-Funktion des Browsers wieder zurückgeblättert wird. AWeb stellt dann von vorne herein jene Grafik dar, die vor dem Verzweigen zu sehen war also jene, die erscheint, wenn sich der Mauszeiger über dem Link befindet. Zusätzlich kommt auch der interne Handler durcheinander und liefert, sobald man nun erneut die Maus in den Linkbereich bewegt, eine Fehlermeldung.

Bei umfangreicheren Seiten kommt noch ein weiterer Nachteil hinzu. Falls die Grafik, die beim Rollover dargestellt werden soll mit der Übertragung einige Zeit benötigt, wird sie nicht gleich angezeigt. Abhängig vom Browser tut sich nun entweder so lange nichts, bis die Grafik geladen wurde, oder es wird für einige Sekunden ein leeres Rechteck angezeigt. Beides ist nicht gewünscht. Ein weiterer Nachteil liegt in der geringen Flexibilität der direkten Methode. Eine Änderung des Effektes bedeutet eine Bearbeitung aller betroffener Links auf der Seite.

Alle diese Probleme werden im fünften Beispiel behoben. Dazu wird von der Möglichkeit, Grafiken schon vor der Darstellung in den Cache zu laden, Gebrauch gemacht. Dies geschieht, indem gleich am Beginn der Seite ein Image()-Objekt generiert wird. Dieses in JavaScript vordefinierte Objekt kann danach direkt mit dem zugewiesenen Namen angesprochen werden. Mit Hilfe der .src-Eigenschaft wird dem Objekt die Bilddatei zugewiesen, die dabei gleichzeitig auch geladen wird.

Die zweite Änderung besteht darin, dass der Rollover-Effekt nun in eine Funktion ausgelagert wurde. Dieser Funktion wird der Name des Bildes innerhalb der HTML-Seite sowie der Name des anzuzeigenden Bildobjektes übergeben und sie übernimmt den Austausch. Dazu muss zu einem kleinen Trick gegriffen werden, da nun auf Objekte zugegriffen wird. Diese sind eigentlich als Parameter an die Funktion zu übergeben und stehen deshalb innerhalb der Funktion als Variable zur Verfügung. Um nun den Objektzugriff zu ermöglichen, wird auf die eval()-Funktion zurückgegriffen. Diese liefert als Ergebnis des übergebenen Strings das gewünschte Objekt. Die Zeile obj.src = obj2; steht somit im Beispiel für den onMouseover-Aufruf für document.Link1.src = Bild2.src;.

Aufgerufen wird die Rollover-Funktion nun auf die gewohnte Weise, indem der Funktionsname nach dem jeweiligen Eventhandler mit den notwendigen Parametern angeführt wird. Mit dieser Lösung wurden alle beschriebenen Probleme beseitigt, und zudem ist eine Veränderung des Effektes flexibel möglich. Nicht zu vergessen ist der Vorteil, dass diese Funktion auch sehr einfach in andere HTML-Seiten integriert werden kann.

Wie Sie gesehen haben, sind die ersten Schritte in JavaScript gar nicht schwer. In der nächsten Folge des Kurses gehen wir einen Schritt weiter und beschäftigen uns mit den Möglichkeiten, die interaktive Formulare bieten und wie JavaScript genutzt werden kann, um Benutzereingaben zu überprüfen. Übrigens: Alle vorgestellten Beispiele, die dazugehörigen Grafiken etc. finden Sie auf der Amiga-Magazin-CD-ROM in der Ausgabe 8/2000 und im Internet auf den Seiten des Amiga-Magazins. Wer in der Zwischenzeit weitere Informationen zu JavaScript nachlesen möchte, sollte einen Blick auf http://www.teamone.de/selfhtml/ werfen.

<html> 
<head> 
<title>Der Rollover-Effekt mit Funktion</title> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var Bild1 = new Image(); Bild1.src = "Bild1.gif"; 
var Bild2 = new Image(); Bild2.src = "Bild2.gif"; 

function rolloverswap(linkname,bildname) 
{ // Diese Funktion tauscht den das unter "linkname" angegeben Bild gegen 
  // ein vorausgeladenes Bild, das im Objekt "bildname" definiert wurde 
  objstr='document.'+ linkname; 
  obj = eval(objstr); 
  obj2str = bildname + '.src'; 
  obj2 = eval(obj2str); 
  obj.src = obj2; } 
// --> 
</SCRIPT> 
</head> 
<body> 
<a href="Test1.htm" 
  onMouseover="rolloverswap('Link1','Bild2')" 
  onMouseout="rolloverswap('Link1','Bild1')"> 
  <img src="Bild1.gif" name="Link1" Border="0">
</a> 
<p>Fahren Sie doch mal mit der Maus über den Link da oben! 
</body> 
</html>

Listing 5: Auch der Rollover-Effekt kann in eine Funktion verpackt werden

Kommentare, Fragen, Korrekturen und Kritik bitte an Webmaster AMIGA schicken.
Zuletzt aktualisiert am 28. Mai 2000.

6/00

Kaffee in Zeilen