HTML-Dateien selbst erstellen: Inhaltsverzeichnis


Allgemeines zu JavaScript und ein Beispiel

 Allgemeines zu JavaScript
 JavaScript - ein Beispiel
 Bemerkungen zum Umgang mit JavaScript


Allgemeines zu JavaScript

JavaScript ist eine von Netscape entwickelte Programmiersprache. Die Sprache lehnt sich in der Syntax an die von Sun Microsystems entwickelte Programmiersprache Java an. JavaScript ist jedoch anspruchsloser im Aufbau als Java, eingeschränkter in den Möglichkeiten und für andere Zwecke gedacht. JavaScript ist im Gegensatz zu Java eine unmittelbare Ergänzung und Erweiterung zu HTML. JavaScript bietet sich für folgende Zwecke an: JavaScript-Programme werden im Gegensatz zu Java-Programmen direkt in der HTML-Datei notiert. Sie werden auch nicht - wie Java-Programme - compiliert, sondern als Quelltext zur Laufzeit interpretiert, also ähnlich wie Batchdateien bzw. Shellscripts.

Dadurch bleibt JavaScript unkompliziert für den Programmierer, doch kritisch für den Anwender. Das Interpretieren von Quellcode ist ungleich langsamer als das Interpretieren von compiliertem Code. Deshalb ist JavaScript nur für kleine und einfache Programmabläufe sinnvoll. Da kein Compilierungslauf und somit keine Fehlerprüfung stattfindet, gibt es bei JavaScript auch keinen Schutz vor schweren Programmfehlern, z.B. vor "Endlosschleifen", die beim Anwender zum Systemabsturz führen können.

Hinweis: JavaScript wird derzeit nur von Netscape ab Version 2.0 interpretiert. Die Fähigkeiten des Netscape JavaScript-Interpreters sind derzeit allerdings noch nicht ganz ausgereift. Unvollständige oder fehlerhafte Code-Interpretationen sind ebenso wie unvermittelte Programmabstürze möglich. JavaScript ist selbst noch in Entwicklung. Für das korrekte Funktionieren der hier vorgestellten Beispiele, die mit Netscape 3.0 beta getestet wurden, kann daher keine Gewähr übernommen werden.

Weitere Informationen und Beispielsammlungen zu JavaScript finden Sie im WWW:

 JavaScript Authoring Guide
Die offizielle JavaScript-Dokumentation von Netscape

 JavaScript (auch in  deutscher Übersetzung - )
Die praxisorientierte Einführung von Stefan Koch

 JavaScript Examples
Interessante Beispielprogramme mit JavaScript

 JavaScript Pro
Profi-Forum zum Thema JavaScript. Möglichkeit, selbst Fragen zu stellen.

 Gamelan
Weltweit größte Sammlung von Java-Appletts und JavaScript-Beispielen.


 Seitenanfang


JavaScript - ein Beispiel

JavaScript-Code kann an verschiedenen Stellen innerhalb einer HTML-Datei vorkommen. Wichtig ist zu unterscheiden, welche JavaScript-Anweisungen an welchen Stellen innerhalb einer HTML-Datei möglich sind. Das folgende Komplettbeispiel zeigt typische Möglichkeiten der Einbindung von JavaScript-Anweisungen in einer HTML-Datei. Weitere  Anwendungsbeispiele für JavaScript finden Sie an anderer Stelle dieser Einführung.
Studieren Sie das folgende Beispiel aufmerksam und lesen Sie anschließend die Erläuterungen dazu. Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. (1).

Beispiel


  <html>
  <head>
  <title>Beispiel mit JavaScript</title>
  (1) <script language="JavaScript">
  <!-- 
  (2) function MeinKommentar(Text,DateidatumJaNein)
   {
    (3) if (DateidatumJaNein==0)
      alert(Text);
    else
      alert(Text + '\nDatum/Uhrzeit: ' + document.lastModified);
   }
  // -->  
  </script>
  </head>
  (4) <body onload="MeinKommentar('Willkommen auf meiner Linkpage!',0)">
  (5) <a href="http://www.cs.yale.edu/homes/sjl/clipart.html" 
  onClick="MeinKommentar('Der Link zu Sandras Clipart-Server
  funktioniert nicht mehr! Wird in Kuerze aktualisiert!',1)">Sandra's Clipart-Server</a>
  <p>
  (6) <a href="index.htm" onMouseOver="window.status='Zur 
  Einstiegsseite dieses Projekts zurueckspringen!';return true")">Zur&uuml;ck</a>
  </body>
  </html>

Erläuterungen zum Beispiel

Was das Beispiel bewirkt:
Das voranstehende Komplettbeispiel zeigt eine komplette HTML-Datei. Beim Aufrufen der Datei erhält der Anwender einen Hinweis am Bildschirm: "Willkommen auf meiner Linkpage!". Die Datei enthält im Beispiel der Einfachheit halber nur zwei Verweise: einen zu "Sandra's Clipart-Server" und einen zur eigenen Projekt-Homepage. Nun hat der Autor festgestellt, daß der Verweis zu Sandra's Clipart-Server nicht mehr funktioniert. Die neue URL-Adresse hat er noch nicht herausbekommen. Der Verweis soll für den Anwender jedoch sichtbar bleiben. Mit Hilfe von JavaScript erreicht der Autor, daß der Anwender beim Anklicken dieses Verweises eine Hinweismeldung erhält, die ihn über den Sachverhalt informiert: "Der Link zu Sandras Clipart-Server funktioniert nicht mehr! Wird in Kuerze aktualisiert!". In der Hinweismeldung steht zur Kontrolle auch, wann die aktuelle HTML-Datei zum letzten Mal bearbeitet wurde. Der zweite Verweis in der Datei ist ein Rücksprung zur eigenen Homepage. Wenn der Anwender mit der Maus über den Verweis fährt, wird zusätzlich zum Verweistext in der Statuszeile des WWW-Browsers ein Langtext ausgegeben, der den Verweis näher kommentiert: "Zur Einstiegsseite dieses Projekts zurueckspringen!"

JavaScript definieren:
Im  Beispiel an Stelle (1).
JavaScript-Anweisungen in einer HTML-Datei werden durch <script language="JavaScript"> eingeleitet. Wie Sie erkennen können, ist in dieser Syntax auch vorgesehen, daß damit neben JavaScript auch andere, künftige Scriptsprachen unterstützt werden. Hinter dem einleitenden Tag folgt der JavaScript-Code. Durch </script> wird der Abschnitt mit JavaScript-Code abgeschlossen.
Beachten Sie, daß unterhalb des einleitenden <script>-Tags ein  HTML-Befehl für einen Kommentar <!-- notiert wird und vor dem abschließenden Tag </script> ein entsprechendes Kommentarendezeichen //-->>. Der gesamte JavaScript-Code steht also innerhalb eines Kommentars! Diese Maßnahme ist leider nötig, damit WWW-Browser, die kein JavaScript kennen, den Inhalt des JavaScript-Codes nicht am Bildschirm anzeigen.
Das <script>-Tag kann im  Dateikopf einer HTML-Datei und innerhalb des Dateikörpers stehen. In den meisten Fällen wird das Tag im Dateikopf notiert.

Die Funktion im Dateikopf:
Im  Beispiel an Stelle (2).
In JavaScript können Sie eigene  Funktionen definieren. Innerhalb von Funktionen können Sie logisch zusammengehörige JavaScript-Anweisungen notieren. Im Beispiel wird eine Funktion mit Namen MeinKommentar(...) definiert. In der Klammer dahinter werden die Parameter angegeben, die die Funktion erwartet: Text und DateidatumJaNein. Die Namen der Parameter werden an dieser Stelle frei vergeben. Innerhalb der Funktion werden die Parameter dann verarbeitet. Jeder Aufruf dieser Funktion muß die beiden definierten Parameter übergeben, d.h. für jeden der Parameter einen sinnvollen Wert angeben.

Anweisungen innerhalb der Funktion:
Im  Beispiel ab Stelle (3).
Die im Beispiel definierte Funktion MeinKommentar(Text,DateidatumJaNein) gibt eine Message-Box mit einer Meldung am Bildschirm aus. Den Text, der angezeigt werden soll, bekommt die Funktion beim Aufruf im Parameter Text übergeben. Mit der If-Anweisung wird der Wert des zweiten übergebenen Parameters, DateidatumJaNein, abgefragt. Wenn der Wert gleich 0 ist, wird nur der angegebene Text ausgegeben. Wenn der Wert ungleich 0 ist, werden zusätzlich Datum und Uhrzeit der letzten Änderung der aktuellen HTML-Datei mit ausgegeben. Um den übergebenen Text in der Message-Box am Bildschirm auszugeben, wird eine  JavaScript-Methode aufgerufen: die Methode alert(...). Diese Methode erwartet als Parameter den auszugebenden Text. Je nachdem, ob Datum und Uhrzeit der HTML-Datei mit ausgegeben werden sollen, wird diese Methode in beiden Verzweigungen der If-Else-Anweisung unterschiedlich aufgerufen. Der Aufruf im zweiten Fall ist etwas komplexer. Dort werden mehrere Meldungsteile (Zeichenketten, auch "Strings" genannt) mit + aneinandergereiht. Die einzelnen Teile werden in einfache Anführungszeichen gesetzt. Die Zeichenfolge \n vor Datum/Uhrzeit hat besondere Bedeutung: sie stellt ein Steuerzeichen dar, das einen Zeilenumbruch darstellt.

Aufruf der Funktion beim Start der Datei:
Im  Beispiel an Stelle (4).
Um JavaScript-Anweisungen, die im Dateikopf notiert wurden, gleich beim Aufruf der HTML-Datei auszuführen, besteht die Möglichkeit, im einleitenden  <body>-Tag der HTML-Datei einen entsprechenden Aufruf zu notieren. Dies geschieht durch die Zusatzangabe onload=. Dahinter folgt, in Anführungszeichen gesetzt, ein JavaScript-Funktionsaufruf. Es kann sich um eine JavaScript-Methode oder Standardfunktion handeln, oder um eine eigene Funktion, die zuvor im Dateikopf definiert wurde. Im obigen Beispiel wird die selbst definierte Funktion MeinKommentar(...) aufgerufen. Der Funktion werden die beiden erwarteten Parameter übergeben. Der erste Parameter ist der auszugebende Text, im Beispiel: Hier wird gewarnt und kommentiert!. Als zweiter Parameter wird 0 übergeben. Dadurch wird erreicht, daß nur der Text des ersten Parameters und sonst nichts am Bildschirm ausgegeben wird. Beachten Sie, daß der erste Parameter, eine Zeichenkette, in einfachen Anführungszeichen steht, und der zweite Parameter, ein numerischer Wert, ohne Anführungszeichen übergeben wird. Mehr dazu im Abschnitt über  Funktionen.

Aufruf der Funktion beim ersten der beiden Verweise:
Im  Beispiel ab Stelle (5).
Beim ersten der beiden Verweise, demjenigen zu Sandra's Clipart-Server, wird die gleiche Funktion MeinKommentar(...) aufgerufen wie beim Aufruf der Datei. Der Unterschied besteht darin, daß die Funktion hier nur beim Anklicken des Verweises aufgerufen wird, und daß neben dem Meldungstext auch noch Datum und Uhrzeit der letzten Speicherung der HTML-Datei mit ausgegeben werden. Dazu wird der Funktion als erster Parameter wieder der auszugebende Text übergeben, hier: Der Link zu Sandras Clipart-Server funktioniert nicht mehr! Wird in Kuerze aktualisiert!. Als zweiter Parameter wird der Wert 1 übergeben. Dadurch wird innerhalb der Funktion MeinKommentar(...) der "else-Zweig" aufgerufen. Deshalb wird in diesem Fall der Zeitpunkt der letzten Änderung der HTML-Datei mit am Bildschirm ausgegeben.
Um eine Funktion beim Anklicken eines Verweises aufzurufen, wird im einleitenden Verweis-Tag <a href=....> die Zusatzangabe onClick= notiert. Dahinter folgt, in Anführungszeichen, der Aufruf der Funktion.

Zusatzinformation zum zweiten Verweis in der Statuszeile:
Im  Beispiel ab Stelle (6).
Bei Verweisen ist es auch möglich, nicht erst beim Anklicken JavaScript-Code aufzurufen, sondern bereits, wenn der Anwender mit der Maus über den verweis-sensitiven Bereich fährt. Im zweiten Verweis wird dies durch die Zusatzangabe onMouseOver= im einleitenden Tag des Verweises (<a href=....>) erreicht. Im Beispiel wird diesmal nicht die selbst definierte Funktion im Dateikopf aufgerufen, sondern ein  Standardobjekt von JavaScript: das Standardobjekt window und seine Eigenschaft status. Damit ist die Statuszeile des WWW-Browsers gemeint. Objekt und Eigenschaft werden durch einen Punkt voneinander getrennt, also window.status. Mehr darüber im Abschnitt  Objekte und Eigenschaften. Der Objekteigenschaft window.status wird im Beispiel ein Text zugewiesen: Zur Einstiegsseite dieses Projekts zurueckspringen!. Das ist der Text, der in der Statuszeile angezeigt werden soll, wenn der Anwender mit der Maus über den Verweis fährt. Dahinter steht, durch ein Semikolon getrennt, die zusätzliche Anweisung return true. Diese Zusatzanweisung ist nötig, damit der WWW-Browser den aktuellen Inhalt der Statuszeile tatsächlich löscht und mit dem gewünschten Text überschreibt.


 Seitenanfang


Bemerkungen zum Umgang mit JavaScript

JavaScript ist im Gegensatz zu HTML keine Beschreibungssprache, sondern eine richtige Programmiersprache. In einer Programmiersprache gibt es für Anfänger viele verwirrende Elemente: Sonderzeichen, Variablen, Wenn-Dann-Anweisungen, Schleifen, Funktionen, Methoden, Parameter, Objekte, Eigenschaften und anderes mehr. Um mit diesen Elementen richtig umgehen zu können, müssen Sie lernen sich vorzustellen, was im Computer passiert, wenn der Programmcode ausgeführt wird. Das ist ein langwieriger Lernprozeß, den Anfänger nur durch viel Übung bewältigen. JavaScript ist dazu allerdings hervorragend geeignet, weil es eine vergleichsweise einfache Sprache ist, bei der viele Aufgabenbereiche einer "großen" Programmiersprache fehlen, z.B. Dinge wie Arbeitsspeicherverwaltung oder Dateioperationen. Außerdem setzt JavaScript auf einer bestimmten Umgebung auf, nämlich auf einer anzuzeigenden oder angezeigten WWW-Seite.

Bevor Sie daran gehen, neuen, eigenen JavaScript-Code zu programmieren, müssen Sie sich exakt darüber im klaren sein, welches Problem Sie damit lösen wollen. Dazu müssen Sie erst einmal wissen, was man mit HTML selbst alles machen kann, und wo die Grenzen von HTML liegen. Von JavaScript müssen Sie dann so viel wissen, daß Sie entscheiden können, ob das Problem mit JavaScript überhaupt lösbar ist. Mit JavaScript können Sie z.B. nicht die typischen Aufgaben von  CGI-Scripts lösen!

Ferner sollten Sie sich im WWW umsehen, ob es nicht schon frei verfügbare JavaScript-Beispiele gibt, die genau Ihr Problem lösen. Denn es ist immer besser, auf Code zurückzugreifen, der sich in der Praxis bereits bewährt hat, als neuen Code zu erstellen, dessen "heimliche Tücken" einem noch nicht bekannt sind. In vielen Fällen genügt es, vorhandene JavaScripts den eigenen Erfordernissen anzupassen. Dazu müssen Sie allerdings so viel von JavaScript verstehen, daß Sie genau wissen, welche Variablen oder festen Werte Sie verändern oder welche Funktion Sie ergänzen wollen.

Eine Bitte noch: stellen Sie keine WWW-Seiten mit ungeprüftem JavaScript-Code ins WWW. Für einen Anwender ist es sehr ärgerlich, wenn er Fehlermeldungen des JavaScript-Interpreters am Bildschirm erhält und in schlimmeren Fällen einen Programmabsturz des WWW-Browsers oder gar einen Systemabsturz hat, was bei Online-Sitzungen besonders unangenehm ist.


 HTML-Dateien selbst erstellen: Inhaltsverzeichnis
 Seitenanfang

Blättern:
Formulare auswerten und weiterverarbeiten  |  Sprachelemente von JavaScript


© 1996  Stefan Münz