Modul 7.2 Multimediakurs: JavaScript-Level 1

Vorabbemerkung: Für dieses Teilmodul wird der Kursleiter von allen JavaScript-Lehrern und Programmierern wohl nur ein verächtliches Achselzucken einheimsen. Einfach nur vorhandene JavaScripte weiterverwenden, ohne zu verstehen, worum es da geht, das kann ja kaum gut gehen! Der Kursleiter hat jedoch die Erfahrung gemacht, dass das Interesse an JavaScript, auch an dessen Syntax durch nichts so rasch geweckt werden kann, als durch schnelle Erfolgserlebnisse bei der Verwendung von Skripten. Außerdem genügen für viele Zwecke sehr einfache Skripte, bei deren Benutzung man eigentlich wenig falsch machen kann. Dennoch hofft auch der Kursleiter, dass Sie als virtueller Kursteilnehmer im Selbststudium weiter in die (gar nicht so geheimnisvollen) Geheimnisse der JavaScript-Sprache noch weiter einsteigen. Sollte der Einbau eines vorhandenen Skriptes nicht funktionieren bzw. gar lauter Fehlermeldungen hervorrufen, müssen Sie sowieso in Level 2 oder 3 dieses kleinen JavaScript-Kurses einsteigen.

Um möglichst rasch zu guten Ergebnissen zu kommen, müssen Sie nachfolgende Punkte unbedingt berücksichtigen.

Grundwissen über die Fähigkeiten (und fehlenden Fähigkeiten) von html (vermittelt in früheren Kursmodulen)

Übersicht über die Möglichkeiten (und fehlenden Fähigkeiten) von JavaScript (vermittelt im vorhergehenden Kursmodul 7.1)

Grundsätzlich zum Aufbau und Verwendung von JavaScripten (siehe untenstehend).

Beachten Sie die Copyright-Bestimmungen und ändern Sie diese nicht (s.u.)

Testen Sie Ihr so eingebautes Skript mit möglichst vielen verschiedenen Browsern, um zu sehen, ob es irgendwo zu hässlichen Fehlermeldungen kommt.

Grundsätzliches zum Aufbau und Verwendung von JavaScripten

Ein JavaScript ist, wie Sie aus der Einführung wissen, ein kleines Programm, welches als reiner Text (ascii-code, wie bei html) direkt in den Quellcode der html-Seite geschrieben wird (oder auch ähnlich wie bei StyleSheets ausgelagert werden kann, siehe Level 2). Mit Copy und Paste können derartige Programme direkt aus dem Source-Code von Webseiten herauskopiert werden und in eigene Seiten eingesetzt werden (zu Copyright-Bestimmungen und "Netiquette"-Regelungen siehe unten).

Das JavaScript-Programm steht im Normalfall zwischen den Tags <script> und </script>. In der Regel ist für JavaScripte zusätzlich das Attribute language angegeben, also <script language="JavaScript"> ....</script>. Manchmal ist auch die Versionsnummer von JavaScript mit angegeben.

Das JavaScript-Programm kann zwar an beliebigen Stellen in der html-Seite stehen (also im Head-Teil, zwischen dem </head> und <body> tag oder irgendwo im Body-Teil). In der Regel sollte es aber im Head-Teil stehen (z.B. nach dem </title>-Tag). Damit wird das Programm beim Start der Seite als erstes geladen und kann dann bei Bedarf gleich ausgeführt werden. In der Regel wird es aber erst aufgrund eines Ereignisses (Events) ausgeführt (s.u.). Nur wenn JavaScript direkt an eine bestimmte Stelle in den bestehenden Text schreiben soll, muss das Script auch an dieser Stelle stehen (z.B. Ausgabe der Browserversion, siehe unten).

Damit das Skript nicht von nichtskriptfähigen Browsern versehentlich als Text oder sonstige Anweisung fehlinterpretiert wird, sollte der komplette Skriptinhalt mit einem Kommentartag (nachstehend in rot markiert) umspannt werden, also z.B. so:

<script language="JavaScript">  </script> </head> <body>

Steht das Skript im Header (wie im obigen Beispiel), könnte ein alter Browser oder auch ein TV- bzw. Palmtop-Browser ohne derartige Kommentartags ggf. Schwierigkeiten bekommen. Stünde das Skript gar im Body-Teil, würde ein Browser, der das Script-Tag nicht kennt, den Programmcode einfach als html-Text verstehen und so auf der Webseite ausgeben. Die Kommentartags verhindern dies.

Auch innerhalb des Programmcodes können Kommentare stehen. Diese dienen nur zur Information und werden nicht als Teil des Programms abgearbeitet. Die Markierung solcher Skriptkommentare ist jedoch anders als vorhergehend:

// markiert einen einzeiligen Kommentar

/* markiert einen mehrzeiligen Kommentar. Gilt, bis das Kommentar- zeichen wieder entsprechend geschlossen wird */

In diesen Angaben sehten häufig Kommentare zur jeweiligen Funktion des Skripts. Außerdem sind hier oft Copyright- und Angaben zu den Verwendungsmöglichkeiten angegeben.

Wichtig: Wenn im Skript steht, dass Sie dieses nicht weiterverwenden dürfen, lassen Sie dies bitte auch sein, Sie machen sich ansonsten strafbar. Wenn via Kommentar drinsteht, dass sie es verwenden dürfen, lassen Sie bitte unbedingt auch den diesbezüglichen Kommentar mit drin. Wenn gar nichts drin steht, dürfen Sie es wahrscheinlich weiterverwenden, sofern nichts gegenteiliges andernorts auf der Website angegeben ist (sehen Sie ggf. in einem Impressum nach). Ich empfehle Ihnen, auch bei einem nicht näher geschützten Skript in einem Kommentartag auch den Autor des Skripts sowie dessen Webseite mit anzugeben. Ggf. fragen Sie beim Webmaster nach, ob Sie dessen Skripte verwenden dürfen. Das ist nicht nur "nettiquette", sondern würdigt auch die Arbeit, die mit dem Erstellen dieses Skripts verbunden war. Wenn Sie ein Skript entsprechend abändern (sofern dies nicht untersagt war), können Sie ja zusätzlich zum Originalautor noch Ihren Namen mit angeben ("mit Änderungen durch .."). Wenn Sie selbst mal ein paar kleine Skripte entworfen haben sollten, werden Sie sehen, mit wievielen Mühen dies verbunden sein kann und werden obiges sicherlich besser verstehen. Am besten verwenden Sie nur Skripte, die sich in Skriptverzeichnissen im Web befinden. Einige entsprechende Links finden Sie am Ende dieser Seite. Beachten Sie aber auch hier evtl. Bestimmungen innerhalb der Skripte.

Außer im script-Tag ist JavaScript sensitiv gegenüber Groß- und Kleinschreibung. Sollten Sie ein Skript also abtippen, müssen Sie auch die Groß- und Kleinschreibung übernehmen.

Ein Skript besteht in der Regel aus mindestens einer Funktion. Diese erkennen Sie im Script an dem entsprechenden (kleingeschriebenen) Schlüsselwort function. Eine Funktion wird dort mit einem beliebigen Namen versehen, an den () gehängt wird, also z.B.

<html> <title>mein erstes Skript</title> <script language="JavaScript">  </script> </head>

"Eventhandler": Wenn Sie dieses Skript nun in den Sourcecode Ihrer Homepage kopieren, wird beim Laden der Seite gar nichts passieren, obwohl das Skriptprogramm durch das Laden quasi abrufbereit ist (aber eben noch nicht abgerufen wurde). Die tatsächliche Ausführung einer Funktion muss durch ein "Ereignis" (Event) ausgelöst werden. Dies kann das Laden der Seite sein, das Klicken auf einen Link, das Berühren eines Links mit der Maus oder das Verlassen der Seite (es gibt noch einige weitere Möglichkeiten, die in den nachfolgenden "Leveln" behandelt werden). Sie müssen also angeben, welches Ereignis das obige Skript wirklich in Aktion bringen soll (auslösen soll). Dazu müssen Sie sogenannte Eventhandler mit angeben (bzw. mit kopieren). Wir machen mal mehrere Beispiele, die allesamt obiges Skriptbeispiel aufrufen würden.

1. Beim Laden der Seite: Eventhandler onload

<body onload="willkommen()"> beliebiger Inhalt </body> </html>

2. Beim Klicken auf einen Link: Eventhandler onclick

<body> beliebiger Inhalt Hier kommt noch ein <a href="#" onclick="willkommen()">Link</a> </body> </html>

3. Beim Berühren eines Links (hier Linkverknüpfung für ein Bild): Eventhandler onmouseover

<body> beliebiger Inhalt Hier kommt noch ein <a href="naechsteSeite.html" onmouseover="willkommen()"><img src="icon.gif" width="30" height="30">Link</a> </body> </html>

4. Beim Verlassen der Seite: Eventhandler onunload

<body onunload="willkommen()"> beliebiger Inhalt </body> </html>

Wie Sie gesehen haben, rufen die Eventhandler die jeweilige, im JavaScript definierte Funktion auf. Dazu muss der Namen gleich lauten. Alle Eventhandler rufen bei Eintritt des entsprechenden Ereignisses dasselbe Skript mit Namen willkommen ab. Dabei öffnet sich ein kleines Hinweisfenster mit dem Text: Klasse, dies ist mein erstes Skript. Probieren Sie es aus.

Erläuterung zu 2: Hier ist als Link nur ein # eingetragen. Beim Anklicken wird damit keine neue html-Seite geladen, sondern nur das Hinweisfenster gezeigt.

Erläuterung zu 3: Hier ist ein richtiger Link eingetragen. Beim Anklicken wird die Seite "naechsteSeite.html" aufgerufen. Wenn Sie aber nur mit der Maus auf den Link rutschen, kommt das Hinweisfensterchen.

Erläuterung zu 4: wird die Seite verlassen, indem z.B. ein Link auf eine andere Seite angeklickt wird, kommt zuvor noch das entsprechende Hinweisfensterchen.

Sie könnten also das Skript einfach kopieren, einen entsprechenden Eventhandler einbauen und dann noch den Ausgabetext des Hinweisfensters selbst ändern (der steht zwischen " und " in der function willkommen. Häufig können Sie Angaben, die zwischen " und " oder ' und ' im Skript eingegeben sind, selbst ändern (es handelt sich hier um sog. Werte). Dies ist aber nicht immer der Fall. Wenn Sie ein "Level-1"-User bleiben wollen, hilft hier nur ausprobieren.

Wenn Sie weitere Skripte auf derselben Seite einbauen, können Sie jedes einzelne Skript von den Skripttags umschließen lassen, sie können aber auch nur die entsprechende Funktion kopieren und innerhalb des bereits vorhandenen Skripttags einbauen. Beide nachfolgend gezeigten Möglichkeiten bestehen also:

Möglichkeit 1: zwei getrennte Skripte im Header

<html> <title>mein erstes Skript</title> <script language="JavaScript">  </script>

<script language="JavaScript">  </script> </head>

Möglichkeit 2: zwei Funktionen in einem Skript

<html> <title>mein erstes Skript</title> <script language="JavaScript">  </script> </head>

Entsprechende Eventhandler könnten z.B. lauten:

<body onload="willkommen ()"> <p>beliebiger Inhalt </p> <p>Hier kommt noch ein <a href="#" onclick="fensterln()">JavaScript-Beispiel</a></p> </body> </html>

Das Ergebnis ist in beiden Fällen das gleiche. Probieren Sie es aus. Möglichkeit 2 können Sie auch hier abrufen.

Hier nun aber drei wichtige Ergänzungen:

In etlichen Fällen werden mehrere Funktionen auch von einem Scriptprogramm benötigt. Sie können diese also nicht ohne weitereres löschen, auch wenn im Eventhandler nur eine Funktion aufgerufen wird. Hier finden Sie ein entsprechendes Beispiel.

Einfache Skripte werden teilweise auch ohne Script-Tags direkt in den Eventhandler geschrieben. Auch dies können Sie verwenden, obwohl es nicht den "Konventionen" des Gebrauchs von JavaScript entspricht. Für kurze Skriptaktionen (z.B. Hinweis-Fenster, oder Angaben in der Statusleiste ist dies aber teilweise durchaus sinnvoll.

Hier unser erstes Beispiel in dieser Form:

<body onload="alert ('Klasse, dies ist mein erstes Skript');">

Die Umsetzung sieht so aus.

Auch derartige Skripte können Sie ggf. kopieren, in Ihre Seiten einsetzen und die Ausgabewerte anpassen.

Inline Skripte: In manchen Fällen, so z.B. in dem im Einleitungsteil verwendeten Beispiel zur Ausgabe des Browsertyps direkt im Text des html-Dokuments muss das Skript direkt innerhalb des html-Textes im Bodyteil stehen, da in diesem Fall kein onload-Handler zur Verfügung steht und der Skript-generierte Text eben direkt an dieser Stelle eingelesen werden muss. Das ganze sieht dann so aus.

(Man könnte ein als function gestaltetes entsprechendes Skript auch in den Header schreiben, dann müsste es aber durch einen event-handler aufgerufen werden. Ein onload-Handler würde den Ausgabetext dann aber sofort an den Anfang der Seite schreiben. Alternativ könnte man den Text auch auf einem Hinweisfensterchen, in einem neuen html-Fenster, in der Statusleiste oder einem Formular ausgeben lassen (vgl. Level 2, 3).

Tipp und Beispiel für Inline Skript: Hinweis bei deaktiviertem JavaScript: Es ist sicherlich wichtig, den Webbenutzer darauf hinzuweisen, dass er JavaScript benutzen soll. Sinnvoll ist insbesondere eine Fehlermeldung, wenn er JavaScript nicht benutzt. Auch dies können wir mit JavaScript bewerkstelligen (selbst wenn es nicht aktiviert sein sollte). Wir verwenden dazu den <noscript>-Tag, der nur ausgelesen ist, falls JavaScript im Browser deaktiviert ist. Hier das Beispiel

>> Modul 7.3: "Level 2": JavaScript Syntax vom Prinzip her verstehen und vorhandene Skripte anpassen.