vorheriges KapitelInhaltsverzeichnisIndexInfoseitenächstes Kapitel


JavaScript wird eingeführt

Das <Skript>-Tag

Grundlegende Befehle und Sprachstruktur

Grundlegende JavaScript-Programmierung

Lernen Sie mehr über das Programmieren in JavaScript

Zusammenfassung

Fragen und Antworten



Tag 12


Kapitel 23 - JavaScript

In den letzten paar Tagen haben Sie gelernt, Ihren Webseiten Extramerkmale und Interaktivität hinzuzufügen, unter anderem Abbildungspläne, Formulare und CGI-Skripten. Alle diese Merkmale werden, mit Ausnahme der Client-seitigen Abbildungspläne, von den meisten gegenwärtigen Browsern unterstützt, so daß Sie sie bedenkenlos einsetzen können, ohne sich groß um die Kompatibilität sorgen zu müssen. Diese Merkmale haben jedoch ihren Preis: Fast alle erfordern Interaktion mit einem Web-Server, für Skripten oder die Verarbeitung einfacher Werte und sind aus diesem Grund für viele Arten von Präsentationen nicht die beste Lösung.


Heute und in den nächsten paar Tagen werden Sie neuere Merkmale auf dem Web und in den verschiedenen Browsern kennenlernen, die dem Browser Funktionalität hinzufügen und es Ihnen ermöglichen, neue und interessante interaktive Präsentationen zu erzeugen, die nicht so stark auf Programmen beruhen, die auf der Server-Seite laufen.


JavaScript, das zuvor LiveSkript genannt wurde, ist eine Programmiersprache, die HTML-Seiten Funktionalität und Merkmale hinzufügt. JavaScript-Skripten werden in HTML-Dateien eingebettet und laufen auf der Browser-Seite. JavaScript ist eine Neuerung, die die Unterstützung vieler kommerzieller Organisationen erfährt. JavaScript wird momentan - in der einen oder anderen Form - von einer Handvoll Browsern, darunter Netscape und Microsoft Internet Explorer unterstützt.


Wie die meisten Technologien, die im Internet und speziell im World Wide Web verwendet werden, befindet sich JavaScript im Zustand ständiger Weiterentwicklung und Veränderung. JavaScript hat sich sehr schnell von der Version 1.0 in Netscape 2 zu Version 1.1 in Netscape 3 und schließlich zu Version 1.2 im Netscape Communicator weiterentwickelt. In der Zwischenzeit hat Microsoft JSkript - seine eigene JavaScript-Variante, die im Internet Explorer 3.0 unterstützt wurde - vorgestellt. Jede dieser Variationen und Versionen hatte ihre eigenen feinen Unterschiede und Inkonsistenzen. Anstatt diese Unterschiede zu berücksichtigen, behandle ich JavaScript hier im Hinblick auf die grundlegenden Merkmale, die allen Implementationen von JavaScript gemein sind.


Netscapes JavaScript ist eine Skripting-Sprache, die nur eine entfernte Ähnlichkeit zu Java von Sun Microsystems aufweist. Wegen ihrer Namen werden die beiden aber leicht verwechselt. JavaScript ist eine einfache Sprache, die nur auf Web-Browsern anwendbar ist. Java ist eine umfassendere Programmiersprache, die so gut wie auf allen Betriebssystemen funktioniert. Mehr über Java erfahren Sie morgen an Tag 13, »Java, Plug-Ins und eingebettete Objekte«.

In diesem Kapitel werden Sie die Grundlagen von JavaScript kennenlernen, indem Sie die folgenden Themen erforschen:


Alle JavaScript-Beispiele in diesem Buch erfordern Netscape Navigator 2.0 oder höher. Ich habe Netscape Navigator 2.0 für alle Beispiele verwendet, obwohl die meisten davon auch mit höheren Versionen von Netscape wie auch mit dem Internet Explorer 3.0 oder höher zusammenarbeiten sollten. JavaScript ist kein formaler Bestandteil der HTML-3.2-Spezifikation. Allerdings wird in dem Entwurf zur Cougar/HTML-4.0-Spezifikation der Vorschlag gemacht, das <Skript>-Tag und die Unterstützung von JavaScript und VBSkript (eingeführt von Microsoft mit dem Internet Explorer 3.0) neben anderen Skriptsprachen zu übernehmen.


JavaScript wird eingeführt

Nach den Worten einer Pressemeldung, die von Netscape Communications und Sun Microsystems zusammen herausgegeben wurde, kann man JavaScript folgendermaßen charakterisieren: »JavaScript ist eine leicht anwendbare Objekt-Skripting-Sprache, die dazu entworfen wurde, live-online Anwendungen zu erzeugen, die Objekte und Ressourcen sowohl auf Clients als auch auf Servern miteinander verbinden. JavaScript wurde für die Erstellung von HTML-Seiten und von unternehmungslustigen Anwendungsentwicklern entworfen, um das Verhalten von Objekten, die entweder auf der Client- oder der Server-Seite ausgeführt werden, dynamisch beschreiben zu können.«



Was ist JavaScript?

Einfach ausgedrückt bedeutet dies, daß Sie mit Hilfe von JavaScript Ihren Webseiten Funktionalität hinzufügen können, wozu Sie in der Vergangenheit komplexe CGI-basierte Programme auf einem Web-Server benötigt hätten. In vieler Hinsicht ähnelt JavaScript Visual Basic - der anwenderfreundlichen Programmiersprache, die von Microsoft entwickelt wurde - vor allem deshalb, weil Sie JavaScript auch mit wenig oder keinem Programmierwissen dazu verwenden können, komplexe Web-basierte Anwendungen zu erstellen.


Was JavaScript jedoch unterscheidet ist die einzigartige Weise, in der es sich ins World Wide Web integriert. Anstatt als separate Datei gespeichert zu sein - wie ein CGI-Skript - wird der JavaScript-Code als Teil eines Standard-HTML-Dokuments eingefügt, so wie alle anderen HTML-Tags und -Elemente. Außerdem laufen JavaScript-Skripten im Unterschied zu CGI-Skripten, die auf dem Web-Server laufen, auf dem Browser. Deshalb sind sie auf allen Web-Browsern einsetzbar, die JavaScript unterstützen, unabhängig vom Rechnertyp oder Betriebssystem.


Netscape hat auch eine serverseitige Version von JavaScript entwikkelt, die neben oder anstelle von serverseitigem CGI verwendet werden kann. Serverseitiges JavaScript wurde in der LiveWire-Entwicklungsumgebung implementiert, die in Verbindung mit Netscape's Web-Servern FastTrack bzw. Enterprise läuft. Der Internet Information Server von Microsoft bietet in der Version 3.0 JavaScript auch als serverseitige Entwicklungssprache.


Warum sollte ich JavaScript verwenden?

Die Antwort auf diese Frage hängt zu einem gewissen Ausmaß davon ab, welche Fähigkeiten schließlich in die JavaScript-Sprache aufgenommen werden. Es ist jedoch wahrscheinlich, daß Skripten, die mit JavaScript geschrieben sind, schließlich dazu in der Lage sein werden, alle Aspekte einer Webseite oder eines Web-Formulares zu kontrollieren und auch direkt mit Plug-Ins zu kommunizieren, die auf Webseiten abgebildet werden oder auch mit kompilierten Java-Applets.


Was JavaScript Ihnen abgesehen von solchen futuristischen Möglichkeiten anbietet, ist, daß Sie viele einfache (und nicht so einfache) Programmieraufgaben auf den Web-Browsern (oder Clients) durchführen können, anstatt sich auf CGI-Skripten auf der Web-Server-Seite zu verlassen. Außerdem ermöglicht JavaScript es Ihnen, mit viel größerer Effizienz die Gültigkeit von Informationen zu überprüfen, die von Lesern auf Formularen und anderen Dateneingabebildschirmen eingegeben werden. Und schließlich bringt JavaScript, wenn es mit Frames integriert wird, eine große Vielfalt von neuen Optionen aus dem Bereich des Web-Publizierens mit sich.



Einfache Anwendung

Im Unterschied zu Java wurde JavaScript für Nichtprogrammierer entworfen. Als solches ist es relativ einfach anzuwenden und viel weniger pedantisch bei solchen Einzelheiten wie der Erklärung von Variablentypen. Außerdem brauchen sie den JavaScript-Code nicht zu kompilieren, bevor er verwendet werden kann - was Sie ansonsten bei den meisten anderen Sprachen, einschließlich Java, tun müssen. Dennoch ist JavaScript eine Programmiersprache, bei der die Lernkurve flacher ist als bei HTML (wenn auch nicht so flach wie bei Java). Allerdings ist es möglich, ohne jegliche Programmerierfahrung JavaScript für sehr einfache Aufgaben, wie sie später in diesem Kapitel beschrieben werden, einzusetzen. Komplexere Vorhaben machen es erforderlich, wesentliche Konzepte der Programmierung zu erlernen.



Steigerung der Server-Effizienz

In dem Maß, in dem immer mehr Leute das World Wide Web überfluten, werden viele beliebte Web Sites schnell an die Grenzen ihrer gegenwärtigen Verarbeitungsmöglichkeiten gedrängt. Als Ergebnis davon suchen Web-Operatoren fortwährend nach Wegen, den Verarbeitungsaufwend ihrer Systeme zu reduzieren - um die Notwendigkeit von teuren Rechner-Upgrades abzuwenden. Dies war einer der Hauptgründe für die Einführung von Client-seitigen Abbildungsplänen wie denen, die in Kapitel 17, »Abbildungspläne«, besprochen wurden.


Mit der Einführung von JavaScript wurden einige neue Leistungsoptionen für Web-Publizisten verfügbar. Nehmen wir mal an, daß Sie ein Formular erzeugt haben, mit dem Leute ihre Abrechnungsdetails in Ihr Online-Bestellsystem eingeben können. Wenn dieses Formular übermittelt wird, muß Ihr CGI-Skript als erstes die Informationen überprüfen, die geliefert wurden, um sicherzustellen, daß alle angemessenen Felder korrekt ausgefüllt wurden. Sie müssen überprüfen, daß Name und Adresse eingetragen wurden, daß eine Abrechnungsmethode ausgewählt wurde, daß die Kreditkarteninformationen vollständig ausgefüllt wurden und... - die Liste ist endlos.


Was passiert aber, wenn Ihr CGI-Skript feststellt, daß Informationen fehlen? In diesem Fall müssen Sie den Leser benachrichtigen, daß es Probleme mit der Übermittlung gibt, und ihn dann darum bitten, die Einzelheiten zu bearbeiten und das komplette Formular erneut einzusenden. Dies beinhaltet, daß das Formular zurück zum Browser geschickt wird, dann vom Leser mit der richtigen Information wieder übermittelt wird, dann wieder überprüft wird und daß dieser Vorgang so lange wiederholt wird, bis alles stimmt. Dieser Prozeß ist sehr ressourcenintensiv, sowohl auf der Server-Seite (da jeder Durchlauf des CGI-Programms Rechen- und Speicherkapazität verbraucht) als auch auf der Netzwerkseite, da die Übertragung zwischen Browser und Server wiederholt stattfinden muß.


Indem Sie alle Überprüfungs- und Nachprüfungsprozeduren auf den Web-Browser verlegen - sofern Sie JavaScript anwenden - sind keine zusätzlichen Transaktionen, da es nur eine »echte« Transaktion gibt, die jeweils zurück zum Server übertragen wird. Und da der Web-Server keine eigenen Überprüfungen durchführen muß, sind die Server-Hardware-Anforderungen geringer, da weniger Verarbeitungsressourcen benötigt werden, um ein komplexes Formular zu übermitteln.



JavaScript und Web-Service-Provider

Zu einer Zeit, da viele Web-Service-Provider die Verfügbarkeit von CGI-Skript-Unterstützung aus Sicherheits- oder Leistungsgründen stark beschränken, bietet JavaScript eine Methode, einen großen Teil der fehlenden CGI-Funktionalität zurückzugewinnen. Es ermöglicht die Durchführung von Aufgaben, die bisher von einem serverseitigen CGI-Skript durchgeführt wurden, auf einem Web-Browser.


Die meisten Web-Service-Provider liefern normalerweise eine Art von einfachem CGI-Skript, das ein von einem Leser übermitteltes Formular annehmen und eine grundlegende Verarbeitung daran vornehmen kann, um es z.B. auf der Platte zu speichern oder es an den Eigentümer des Sites zu schicken. Wenn es jedoch um komplexere Formulare geht, waren die einzigen Alternativen bisher, einen anderen Service-Provider zu finden oder Ihren eigenen Web-Server einzurichten. Aber jetzt, mit JavaScript, braucht dies nicht länger der Fall zu sein.


Indem Sie die grundlegenden formularverarbeitenden CGI-Skripten eines Web-Service-Providers, die in der Seite selbst enthalten sind, mit den JavaScript-Routinen verbinden, gibt es nur sehr wenige formularbasierte Aktivitäten, die nicht sogar auf den restriktivsten und sicherheitsbewußtesten Sites eines Web-Service-Providers ausgeführt werden könnten. Wenn die volle Integration von Java, JavaScript und Plug-Ins einmal erreicht ist, werden Sie außerdem dazu in der Lage sein, Dinge auf Webseiten zu tun, die zuvor für unmöglich gehalten wurden, selbst wenn Sie die am meisten fortentwickelten CGI-Skripten eingesetzt hätten.



Das <Skript>-Tag

Um die Einbindung von JavaScript-Programmen in normale HTML-Dokumente zu erleichtern, hat Netscape die Einführung eines neuen <Skript>-Tags vorgeschlagen. Indem Sie ein <Skript>-Tag in einem Dokument plazieren, weisen Sie Netscape an, alle dem Tag folgenden Textzeilen als Skript zu behandeln - und nicht als normalen Webseiteninhalt. Dieser Vorgang geht dann weiter, bis ein korrespondierendes </Skript>-Tag gefunden wird, von dem aus der Browser dann zu seinem normalen Modus operandi zurückkehrt - den Text als Web-Inhalt zu behandeln.


Wenn es in einem Dokument verwendet wird, muß jedes Skript-Tag ein LANGUAGE (Sprachen-)-Attribut enthalten, um die Skripting-Sprache anzugeben, die verwendet werden soll. Momentan sind die zwei möglichen Werte für dieses Attribut LANGUAGE="LiveSkript" und LANGUAGE="JavaScript". Generell sollten Sie jedoch immer die JavaScript-Option verwenden. Als Netscape begann, JavaScript zu entwickeln, nannten sie es LiveSkript. Mit der Veröffentlichung von Netscape 2.0, dem ersten offiziellen Release mit JavaScript-Unterstützung, wurde der Name in JavaScript geändert. Aus diesem Grund sollten Sie die LiveSkript-Option nicht verwenden.


JavaScript gibt es inzwischen in drei Versionen des Netscape Navigator und in zwei Versionen des Microsoft Explorer. Das heißt, daß es diverse mögliche Werte für das LANGUAGE-Attribut gibt. Mit dem Navigator 3 hat Netscape JavaScript auf Version 1.1 erweitert. Der Netscape Communicator erweitert JavaScript noch stärker zu JavaScript 1.2.


Die Struktur eines JavaScript-Skripts

Wenn Sie irgendwelchen JavaScript-Code in ein HTML-Dokument aufnehmen, sollten Sie, abgesehen von der Verwendung des <Skript>-Tags, noch einige andere Konventionen beachten:


Wenn diese drei Punkte berücksichtigt werden, sieht die grundlegende Struktur für die Einbindung von JavaScript-Code innerhalb von HTML-Dokumenten so aus:


<HTML>
<HEAD>
<TITLE>Test Skript</TITLE>
<Script LANGUAGE="JavaScript">
<!- Verwenden Sie das oeffnende Kommentar-Tag, um JavaScript-Code zu verstecken
// Ihr JavaScript-Code gehoert hierher
// schliessen Sie das Kommentar-Tag auf der Zeile direkt vor dem </Skript>-Tag ->
</Skript>
</HEAD>
<BODY>
Ihr Web-Dokument gehoert hierher
</BODY>
</HTML>



Das SRC-Attribut

Neben dem LANGUAGE-Attribut kann das <Skript>-Tag auch ein SRC-Attribut enthalten. Indem Sie ein SRC-Attribut einfügen, können Sie ein JavaScript-Skript in einer separaten Datei speichern, um es in die aktuelle Webseite aufzunehmen. Dies ist eine praktische Option, wenn Sie es mit mehreren Webseiten zu tun haben, die alle denselben JavaScript-Code verwenden, und Sie den Code nicht jedesmal kopieren und einfügen wollen.


Wenn es so angewendet wird, benutzt das <Skript>-Tag die folgende Syntax:


<SCRIPT LANGUAGE="JavaScript« SRC="http://www.myserver.com/Skript.js">


In dieser Form kann SKRIPT eine beliebige relative oder absolute URL sein und .js ist die Dateierweiterung für eine JavaScript-Datei. Dies funktionierte in Netscape 2.0 noch nicht. Erst mit der Einführung von Netscape 3.0 war es funktionsfähig.



Grundlegende Befehle und Sprachstruktur

Im Grunde genommen benutzt JavaScript einen objektorientierten Ansatz zum Computerprogrammieren. Das bedeutet im Prinzip, daß alle Elemente auf einer Webseite als Objekte behandelt werden, die gruppiert werden, woraus sich eine komplette Struktur ergibt.


Wenn diese Struktur verwendet wird, kann davon ausgegangen werden, daß alle Elemente einer einzelnen Webseite in einem Basisobjekt-Container enthalten sind, der Window genannt wird. Innerhalb des window-Objekts gibt es mehrere kleine Container (oder Objekte) die Informationen über die verschiedenen Elemente einer Web-Browser-Seite enthalten. Folgendes sind die Hauptobjekte:


Sie können eine komplette Liste der verfügbaren Objekte in JavaScript als Teil der JavaScript-Dokumentation von Netscape unter http://home.netscape.com/eng/mozilla/Gold/handbook/JavaScript/index.html. erhalten.



Eigenschaften und Methoden

Innerhalb eines jeden Objekt-Containers können Sie auf zwei Haupttypen von Ressourcen zugreifen: Eigenschaften und Methoden.


Eigenschaften sind im wesentlichen Variablen, die einen Wert annehmen, der mit dem Objekt zusammenhängt, an dem Sie interessiert sind. Zum Beispiel befindet sich innerhalb des Dokumenten-Objekts eine Eigenschaft namens title, die den Titel des aktuellen Dokuments enthält und durch das <TITLE>-Tag beschrieben wird.


In JavaScript erhalten Sie den Wert dieser Eigenschaft, indem Sie den Befehl document.title anwenden. Der erste Teil des Befehls gibt JavaScript an, mit welchem Objekt Sie arbeiten wollen, und der zweite Teil - der dem Punkt (.) folgt - repräsentiert den Namen der Eigenschaft selbst.


Eigenschaften sind Variablen, die verschiedene Attribute von Objekten innerhalb von JavaScript enthalten. Sie können den Wert einer Eigenschaft herausfinden, indem Sie den Befehl Objekt.Eigenschaft anwenden.

Folgendes sind einige Beispiele von Eigenschaften, die Sie einfügen können:


Sehen Sie sich die JavaScript-Dokumentation unter http://home.netscape.com/eng/mozilla/Gold/handbook/JavaScript/index.html an, wenn Sie an allen Eigenschaften jedes verfügbaren Objekts interessiert sind.


Abgesehen von den Eigenschaften sind den meisten Objekten auch noch spezielle Funktionen zugeordnet, die Methoden genannt werden. Methoden sind eine Gruppe von Programmierbefehlen, die sich direkt auf ein bestimmtes Objekt beziehen. Zum Beispiel hat das document-Objekt eine Methode namens write zugeordnet, mit der Sie Text direkt auf eine Webseite schreiben können. Diese Methode hat die folgende Syntax


document.write("Hello world");


Wie es schon bei den Eigenschaften der Fall war, führen Sie eine Methode aus oder rufen sie auf, indem Sie zuerst das Objekt angeben, das mit ihr assoziiert ist, gefolgt von einem Punkt und dann dem Namen der eigentlichen Methode. Außerdem folgen den Methodennamen Klammern (). Die Klammern umgeben etwaige Argumente dieser Methode - wenn die Methode z.B. mit Zahlen funktioniert, werden die Klammern diese Zahlen enthalten. In dem "Hello World"-Beispiel verwendet die write()-Methode eine Zeichenfolge (in Anführungszeichen), die als Argument geschrieben wird.


Eine Methode ist eine spezielle Funktion, die eine Operation ausführt, die sich auf ein bestimmtes Objekt bezieht. Sie können eine Methode ausführen oder aufrufen, indem Sie den Namen des Objekts und den Namen der Methode angeben und durch einen Punkt (.) trennen, worauf ein Satz von Klammern folgt, der etwaige Argumente enthält, die zur Ausführung der Methode benötigt werden.

Beachten Sie, daß auch dann, wenn eine Methode keine Argumente annimmt, die Klammern immer noch eingesetzt werden müssen. Beispielsweise wird die toString()-Methode, die zum location-Objekt gehört, dazu verwendet, den URL des gegenwärtigen Dokuments in eine Zeichenkette umzuwandeln, die mit anderen Methoden wie document.write() angewendet werden kann. Es gibt keine Argumente zu dieser Methode; Sie rufen sie einfach mit leeren Klammern auf, so wie hier: location.toString().


So wie bei den Eigenschaften hat jedes Objekt mehrere Methoden, die Sie in Ihren JavaScript-Skripts anwenden können. Die vollständige Liste können Sie von derselben URL erhalten, die die Liste von den zuvor erwähnten Objekten und Eigenschaften enthält; hier sind einige ausgewählte Methoden:


Indem Sie die document.write()- und location.toString()-Methoden mit der document.title-Eigenschaft, die bereits erwähnt wurde, in einem HTML-Dokument wie dem folgenden kombinieren, können Sie ein sehr einfaches JavaScript-Skript wie das hier gezeigte erzeugen. Die Ergebnisse werden in Abbildung 23.1 gezeigt.


Icon

<HTML>
<HEAD>
<TITLE>Test JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!- vor alten Browsern verstecken
document.write(document.title + "<BR>");
document.write(location.toString());
// nicht mehr verstecken ->
</Skript>
</HEAD>
</HTML>


Methode, Eigenschaft, Funktion und Variablennamen sind in JavaScript alle von der Groß- und Kleinschreibung abhängig, das heißt Groß- und Kleinbuchstaben machen einen Unterschied. Wenn Ihr Skript aus Abbildung 23.1 nicht funktionieren will, vergewissern Sie sich, daß Sie location.toString() und nicht location.tostring() geschrieben haben.

Icon

siehe Abbildung

Abbildung 23.1:
Das Ergebnis Ihres ersten JavaScript-Skripts


Ereignisse und JavaScript

Obwohl die Implementierung von solchen Methoden wie document.write() bei der Erstellung von Webseiten nützlich sein kann, liegt die eigentliche Stärke von JavaScript in seiner Fähigkeit, auf Ereignisse zu reagieren.


Ereignisse sind Aktionen, die auf einer Webseite auftreten, normalerweise dann, wenn ein Leser auf irgendeine Weise mit der Seite interagiert. Wenn z.B. eine Person einen Wert in das Textfeld eines Formulars eingibt oder einen Submit-Button anklickt, wird eine Serie von Ereignissen innerhalb des Web-Browsers ausgelöst, die alle von JavaScript-Programmen abgefangen werden können, und zwar gewöhnlich in der Form von Funktionen.


Ereignisse (Events) sind spezielle Aktionen, die von Dingen, die im System passieren, ausgelöst werden (Fenster werden geöffnet, Seiten geladen, Formulare übermittelt) oder auch von Lesereingaben (Text wird eingegeben, Links werden verfolgt, Auswahlfelder werden ausgewählt). Mit JavaScript können Sie verschiedene Operationen als Antwort auf diese Ereignisse durchführen.


Funktionen

Funktionen sind Methoden sehr ähnlich. Der Unterschied liegt jedoch darin, daß, während Methoden einem spezifischen Objekt zugeordnet sind, Funktionen unabhängige Routinen darstellen, die außerhalb der Begrenzungen eines Objekts operieren. Um eine Funktion für die aktuelle Webseite zu definieren, würden Sie etwa folgendes schreiben:


<SCRIPT LANGUAGE="JavaScript">


function functionName( operands ) {
Hierher gehoeren die Aktionen,die von Ihrer Funktion ausgefuehrt werden sollen
}
</Skript>


In diesem Code ist functionName ein beliebiger, von Ihnen gewählter eindeutiger Name, und operands ist eine Liste von Werten, die Sie zu der Funktion senden wollen. Im Anschluß an die Funktionsdefinition und innerhalb des Klammernpaares { } beinhalten sie die Liste von Instruktionen, die Sie durch die Funktion ausführen lassen wollen. Dies kann eine Reihe von Berechnungen, ein Gültigkeitstest für ein Formular oder so ziemlich alles sein, das Ihnen einfällt.


JavaScript enthält auch eine Anzahl von eingebauten Objekten und Funktionen, die es Ihnen ermöglichen, mathematische Funktionen, Zeichenketten-Manipulation und Datum- und Uhrzeit-Berechnungen durchzuführen. Für eine vollständige Liste von eingebauten Funktionen ziehen Sie die Online-JavaScript-Dokumentation zu Rate.


Den Ereignissen Funktionen zuordnen

Nachdem Sie Ihre Funktionen definiert haben, müssen Sie sie als nächstes den verschiedenen Ereignissen zuordnen, die Sie erzielen möchten. Sie tun dies, indem Sie den verschiedenen Elementen der Webseite oder des Formulars die sogenannten Event-Handler (»Behandler von Ereignissen«) zuordnen. Gegenwärtig können Sie die folgenden Event-Handler einsetzen:


Event-Handler

Wann er aufgerufen wird

onBlur

Jedesmal wenn ein Leser ein bestimmtes Feld verläßt

onChange

Jedesmal wenn ein Leser den Inhalt eines bestimmten Felds verändert

onClick

Jedesmal wenn ein Leser einen bestimmten Button anklickt

onFocus

Jedesmal wenn ein Leser ein bestimmtes Feld betritt

onLoad

Jedesmal wenn eine Webseite geladen oder erneut geladen wird

onMouseOver

Jedesmal wenn ein Leser den Maus-Cursor über einem bestimmten Feld plaziert

onSelect

Jedesmal wenn ein Leser den Inhalt eines bestimmten Felds auswählt

onSubmit

Jedesmal wenn ein Leser ein bestimmtes Formular übermittelt

onUnload

Jedesmal wenn die gegenwärtige Webseite verlassen wird

Um die Funktionen zu bestimmen, die mit einem beliebigen dieser Ereignisse assoziiert werden sollen, brauchen Sie bloß den entsprechenden Event-Handler als Attribut des Felds einzufügen, das Sie kontrollieren wollen. Nehmen Sie z.B. ein Standard-Formular mit ein paar Textfeldern und einem Submit-Button, so wie es hier gezeigt wird:


<FORM METHOD="POST" SRC="../cgi-bin/form">
<INPUT TYPE="TEXT" NAME="username">
<INPUT TYPE="TEXT" NAME="emailAddress">
<INPUT TYPE="SUBMIT">
</FORM>


Indem Sie onSubmit="return checkform( this )" zu dem <FORM>-Tag hinzufügen, wird die Funktion namens checkform() ausgeführt werden, bevor Netscape das Formular übermittelt. In checkform() können Sie alle gewünschten Überprüfungen durchführen und, wenn es Probleme gibt, die Formularübermittlung verzögern und den Leser bitten, Berichtigungen durchzuführen. Der this-Parameter, der innerhalb der Klammern (()) enthalten ist, wird benutzt, um der checkform()-Funktion anzugeben, welches Formular-Objekt mit dem <FORM>-Tag zusammenhängt. (Beachten Sie, daß Sie mehr darüber in Kapitel 24, »Mit JavaScript arbeiten«, erfahren werden.)


Zusätzlich können Sie ein Feld nach dem anderen überprüfen, indem Sie einen der beiden Event-Handler onChange oder onBlur in jedem <INPUT>-Tag einfügen. Da der Event-Handler onBlur jedesmal aufgerufen wird, wenn eine Person ein Feld verläßt, ist er ideal für Eingabeüberprüfungen.


Sie können in Buttons wie dem Submit-Button auch onClick-Ereignisse aufnehmen, die aktiviert werden, wenn der Leser den angegebenen Button anklickt. Zum Beispiel würde <INPUT TYPE="SUBMIT" onClick="processclick()"> jedesmal die Funktion namens processclick() aufrufen, wenn der Submit-Button angeklickt wird.


JavaScript führt einen neuen <INPUT>-Typ namens button ein, der einfach einen Button auf einer Webseite plaziert.


Variablen

Abgesehen von den Eigenschaften ermöglicht JavaScript es Ihnen auch, den sogenannten Variablen Werte zuzuordnen oder von ihnen abzurufen. Eine Variable ist im wesentlichen ein benutzerdefinierter Container, der eine Zahl, etwas Text oder ein Objekt enthalten kann. Aber im Unterschied zu den meisten höherentwickelten Sprachen, die Sie dazu zwingen, den Inhalt jeder Variable einem spezifischen Typ zuzuordnen, wird von den JavaScript-Variablen gesagt, daß sie eine Sprache mit lockeren Typen ist. Das bedeutet, daß Sie den Informationstyp, den die Variable beinhaltet, nicht angeben müssen, wenn die Variable erzeugt wird. Tatsächlich kann dieselbe Variable abhängig von Ihren Erfordernissen unterschiedlichen Datentypen zugeordnet werden.


Um eine Variable für ein JavaScript-Programm zu deklarieren, könnten Sie folgendes schreiben:


var variablename = Wert ;


In dieser Form ist variablename jeder eindeutige Name, den Sie wählen. Das Gleichheitszeichen (=), das dem variablename folgt, wird Zuordnungsoperator (assignment operator) genannt. Dieser weist JavaScript an, daß das, was sich auf der rechten Seite des Gleichheitszeichens befindet - also Wert -, der Variablen als Inhalt zugeordnet werden soll. Dieser Wert kann eine Textfolge, eine Zahl, eine Eigenschaft, das Resultat einer Funktion, ein Array, ein Datum oder sogar eine andere Variable sein. Hier kommt ein Beispiel:


var name = "Laura Lemay" ;
var age = 28 ;
var title = document.title ;
var documenturl = location.toString() ;
var myarray = new Array(10);
var todaysdate = new Date();
var myname = anothername ;


Variablennamen (und Funktionsnamen) können aus den Buchstaben a bis z, den Zahlen 0 bis 9 und dem Unterstreichungssymbol (_) bestehen, der Name darf jedoch nicht mit einer Zahl beginnen.

Wenn Sie eine Variable innerhalb einer Funktion deklarieren, werden Sie den Inhalt dieser Variablen nur von innerhalb der Funktion erreichen können. Das wird der Gültigkeitsbereich der Funktion genannt. Wenn Sie andererseits eine Variable innerhalb eines <Skript>-Blocks deklarieren, aber nicht innerhalb einer Funktion, können Sie auf den Inhalt der Variablen von jedem Punkt auf der aktuellen Webseite zugreifen.


Operatoren und Ausdrücke

Nachdem eine Variable definiert wurde, können Sie über ihren Inhalt verfügen oder ihn ändern, indem Sie die sogenannten Operatoren einsetzen. Tabelle 23.1 zählt einige der beliebteren Operatoren auf, die von JavaScript zur Verfügung gestellt werden, und beinhaltet auch jeweils ein Anwendungsbeispiel. (Wie gesagt, können Sie eine vollständige Liste aller unterstützten Operatoren in der Online-JavaScript-Dokumentation finden.)


Die Beispiele, die in der zweiten Spalte von Tabelle 23.1 gezeigt werden, werden Ausdrücke (expressions) genannt. Im Prinzip ist ein Ausdruck eine gültige Menge von Variablen, Operatoren und Ausdrücken, die zu einem einzigen Wert umgerechnet werden. Zum Beispiel wird b+c zu einem einzigen Wert umgerechnet, der a zugeordnet wird.

Es gibt auch einige spezielle Operatoren, die die Zuordnungsfunktion (=) und den Operator in einer einzigen Funktion vereinigen. Solche Operatoren werden Zuordnungsoperatoren genannt. Tabelle 23.2 zählt die Zuordnungsoperatoren auf, die JavaScript beinhaltet.


Tabelle 23.1: JavaScript-Operatoren und -Ausdrücke

Operator

Beispiel

Beschreibung

+

a = b + c

Addiert die Variablen b und c und ordnet das Ergebnis der Variablen a zu.

-

a = b - c

Subtrahiert den Wert der Variablen c von der Variablen b und ordnet das Ergebnis der Variablen a zu.

*

a = b * c

Multipliziert Variable b mit Variable c und ordnet das Ergebnis der Variablen a zu.

/

a = b / c

Teilt Variable b durch Variable c und ordnet das Ergebnis der Variablen a zu.

%

a = b % c

Errechnet b geteilt durch c und ordnet den Rest der Variablen a zu (Moduls).

++

a = ++b

Erhöht den Wert der Variablen b um 1 und ordnet das Ergebnis der Variablen a zu.

--

a = --b

Vermindert Variable b um 1 und ordnet das Ergebnis der Variablen a zu.

Tabelle 23.2: JavaScript-Zuordnungsoperatoren

Zuordnungs-Operator

Beispiel

Beschreibung

+=

a += b

Entspricht a = a + b.

-=

a -= b

Entspricht a = a - b.

*=

a *= b

Entspricht a = a * b.

/=

a /= b

Entspricht a = a / b.

%=

a %= b

Entspricht a = a % b.

Die Operatoren + und += können sowohl mit Zeichenkettenvariablen als auch mit numerischen Variablen verwendet werden. Wenn sie mit Zeichenketten verwendet werden, ist das Ergebnis von a = »text« + »and more text« eine Variable die »text and more text« enthält.


Grundlegende JavaScript-Programmierung

Um alle Event-Handler, Methoden, Parameter, Funktionen, Variablen und Operatoren unter einen Hut zu bringen, enthält JavaScript einige einfache Programmieraussagen, die denen von Java und Basic ähneln.


Wenn Sie schon über ein wenig Programmiererfahrung verfügen, können Sie Ihre ersten JavaScript-Programme bereits schreiben, nachdem Sie einige Minuten damit verbracht haben, die Liste der unterstützten Aussagen zu überfliegen, die in der Online-Dokumentation von Netscape Communication besprochen werden. Für diejenigen unter Ihnen, denen diese Erfahrung fehlt, enthält die folgende Sektion einen Schnellkurs über die Grundlagen der Programmierung.



Was ist ein Programm?

Unabhängig von der verwendeten Sprache besteht ein Programm einfach aus einer Vielzahl von Instruktionen, mit denen Sie Ihrem Computer eine Aktion oder eine Anzahl von Aktionen beschreiben, die Sie ihn ausführen lassen wollen. Im einfachsten Fall wird mit der Instruktion am Anfang einer Code-Liste begonnen und jede Instruktion auf der Liste einzeln abgearbeitet, bis das Ende erreicht ist:


<SCRIPT LANGUAGE="JavaScript">
// Start des Programms - BEACHTEN SIE: zeilen, die mit '//' anfangen,
// werden als Kommentar behandelt
document.write("step one") ;
document.write("step two") ;
// Ende des Programms
</Skript>


Es kommt jedoch selten vor, daß Sie jemals ein Programm ununterbrochen durch ein Reihe von Schritten arbeiten lassen wollen - vor allem in JavaScript -, da es einfacher wäre, die Botschaften auf dem Bildschirm mit HTML zu schreiben, als JavaScript zu verwenden. Aus diesem Grund enthalten die meisten Programmiersprachen verschiedene grundlegende Instruktionen, die es Ihnen ermöglichen, den Fluß der Instruktionen zu kontrollieren.



Die if-Anweisung

Die erste dieser Anweisungen wird if-Aussage genannt. Im Prinzip ermöglicht sie es Ihnen, Tests innerhalb des Programmcodes vorzunehmen, um herauszufinden, welche Teile des Programms in einer bestimmten Situation ausgeführt werden sollten. Nehmen wir mal an, daß Sie z.B. ein Web-Formular haben, das danach fragt, ob eine Person männlich oder weiblich sei. In solchen Fällen wollen Sie der Person vielleicht eine geschlechtsspezifische Antwort geben, die auf dem angegebenen Geschlecht beruht:


if ( form.theSex.value == "male" ) {
document.write("Thank you for your response, Sir" ) ;
}
if ( form.theSex.value == "female") {
document.write("Thank you for your response, Madam" ) ;
}


Wenn dieser Code abliefe und die Eigenschaft form.theSex.value dem Wert "male" zugewiesen worden wäre, wäre die erste document.write()-Methode aufgerufen worden. Wenn es dem Wert "female" zugewiesen worden wäre, wäre die zweite Aussage abgebildet worden. Im Moment brauchen Sie sich keine Gedanken darüber zu machen, wie der Wert form.theSex.value zugeordnet wurde; darüber werden Sie mehr in Kapitel 24 erfahren.


Der Codeblock neben der if-Aussage führt einen Vergleich zwischen der Eigenschaft form.theSex.value und dem Wort "male" durch. Dieser Vergleich wird durch sogenannte Vergleichsoperatoren kontrolliert. In diesem Fall wurde ein Test für Gleichwertigkeit durchgeführt, wie es durch das Symbol == verdeutlicht wird. Tabelle 23.3 führt die Vergleichsoperatoren auf, die gegenwärtig von JavaScript erkannt werden.


Tabelle 23.3: JavaScript-Vergleichsoperatoren

Operator

Operatorbeschreibung

Kommentare

==

Ist gleich

a == b: testet, um herauszufinden, ob a gleich b ist.

!=

Nicht gleich

a != b: testet, um herauszufinden, ob a ungleich b ist.

<

Kleiner als

a < b: testet, um herauszufinden, ob a kleiner als b ist.

<=

Kleiner oder gleich

a <= b: testet, um herauszufinden, ob a kleiner oder gleich b ist.

>=

Größer oder gleich

a >= b: testet, um herauszufinden, ob a größer oder gleich b ist.

>

Größer als

a > b: testet, um herauszufinden, ob a größer als b ist.


Die if...else-Anweisung

Das vorhergehende Beispiel hätte auch in einer leicht abgeänderten Form geschrieben werden können, indem eine unterschiedliche Version der if-Aussage verwendet worden wäre, die eine else-Aussage beinhaltet.


if ( form.theSex.value == "male" ) {
document.write("Thank you for your response, Sir" ) ;
}
else {
document.write("Thank you for your response, Madam" ) ;
}


In diesem Beispiel, bei dem es keine Notwendigkeit für einen zweiten if-Test gibt - da eine Person nur entweder männlich oder weiblich sein kann - wurde die else-Aussage benutzt, um das Programm anzuweisen, die zweite Nachricht abzubilden, wenn der erste Test fehlgeschlagen wäre.


In beiden vorhergehenden Beispielen hätte jedem Ergebnis eine beliebige Anzahl von Aussagen zugeordnet werden können, indem sie innerhalb des entsprechenden Klammernpaars eingefügt worden wären.


Schleifen

Manchmal werden Sie eine Anzahl von Anweisungen mehrfach durchlaufen lassen wollen. Es gibt zwei Schleifenarten von JavaScript, die diese Aufgabe ausführen. Die erste Art von Aussage, die for-Schleife genannt wird, ist ideal für Situationen, in denen Sie eine Gruppe von Instruktionen eine festgelegte Anzahl von Malen wiederholen möchten. Die zweite Art, die while-Schleife, eignet sich besser für Situationen, in denen die Anzahl der erforderlichen Schleifen von einer äußeren Quelle bestimmt wird.



for-Schleifen

Die grundlegende Struktur einer for-Schleife sieht so aus:


for (var count = 1; count <= 10; ++count ) {
Ihre Aussagen gehoeren hierher
}


In diesem Beispiel wird eine Variable namens count aufgestellt und auf einen Wert 1 eingestellt. Dann wird ein Test durchgeführt, um herauszufinden, ob der Wert von count kleiner oder gleich 10 ist. Wenn ja, werden alle Aussagen innerhalb der Klammern {}, die der for-Aussage folgen, einmal ausgeführt. Der Wert von count wird dann durch die Aussage ++count um 1 inkrementiert und dann nochmals der Test count <= 10 durchgeführt. Wenn das Ergebnis immer noch wahr ist, werden alle Anweisungen innerhalb der Klammern nochmals ausgeführt. Dieser Vorgang geht weiter, bis der Wert von count größer als 10 ist, womit die for-Schleife endet.



while-Schleifen

Die grundlegende Struktur einer while-Schleife sieht so aus:


while ( Bedingung ) {
Ihre Aussage gehoert hierher
}


Im Unterschied zur for-Schleife, die einen eingebauten Inkrementierungs-Mechanimus besitzt, ist der einzige erforderliche Test für eine while-Schleife das Ergebnis true (wahr) vom Bedingungs-Test, der der while-Aussage folgt. Dieser Test könnte ein Äquivalenztest sein wie a==b oder jeder der anderen Tests, die bereits bei der if-Aussage erwähnt wurden.


Solange sich diese Bedingung als wahr erweist, werden die Aussagen innerhalb der Klammern, die der while-Schleife folgen, für immer weiterlaufen - oder wenigstens, bis Sie Ihren Web-Browser schließen.


Wenn Sie while-Schleifen verwenden, sollten Sie es vermeiden, Endlosschleifen zu erzeugen. Wenn Sie es doch nicht lassen können, ist so ziemlich Ihr einziger verbleibender Ausweg, um die Schleife anzuhalten, den Web-Browser zu beenden.


Lernen Sie mehr über das Programmieren in JavaScript

Die Liste der Aussagen, Funktionen und Optionen, die in diesem Kapitel enthalten sind, repräsentieren nur einen Teil des Potentials, das von JavaScript angeboten wird. Tatsächlich entwickelt und ändert sich JavaScript immer noch mit jeder neuen Version von Netscapes Navigator-Browser.


Aus diesem Grund kann ich die Wichtigkeit der Online-Dokumentation, die von Netscape Communications geliefert wird (siehe Abbildung 23.2), gar nicht überbetonen. Alle neuen JavaScript-Verbesserungen und Features werden zuerst unter http://home.netscape.com/eng/mozilla/Gold/handbook/JavaScript/index.html dokumentiert. Außerdem sollten Sie sich unter http://home.netscape.com/eng/mozilla/Gold/handbook/JavaScript/index.html informieren, wo noch mehr Informationen über JavaScript im allgemeinen einschließlich Anwendungsbeispielen und zusätzlichen Schritt-für-Schritt-Erklärungen angeboten werden.


siehe Abbildung

Abbildung 23.2:
Das Online-JavaScript-Dokument bei Netscape


Zusammenfassung

JavaScript bietet HTML-Publizisten die Möglichkeit, einfache Programme oder Skripten in einer Webseite einzufügen, ohne sich mit den vielen Schwierigkeiten auseinandersetzen zu müssen, die beim Programmieren in höheren Programmiersprachen wie Java oder C++ auftreten.


In diesem Kapitel haben Sie das <Skript>-Tag und seine Anwendung zur Einbettung von JavaScript-Programmen in HTML-Dokumenten kennengelernt. Außerdem haben Sie auch die grundlegende Struktur und einige der Aussagen und Funktionen der JavaScript-Sprache erkundet.


Nachdem Sie nun dieses grundlegende Wissen hinter sich haben, werden Sie im nächsten Kapitel einige aus dem Leben gegriffene Beispiele von JavaScript kennenlernen und mehr über die Konzepte erfahren, die mit JavaScript zusammenhängen.



Fragen und Antworten

Frage:

Braucht man nicht eine Entwicklungsumgebung, um mit JavaScript arbeiten zu können?

Antwort:

Nein, nein. Genauso wie bei HTML ist alles, was Sie zum Schreiben von JavaScript benötigen, ein Texteditor. Sie verwechseln vielleicht JavaScript mit Java, das eine umfassendere Programmiersprache ist, die zumindest einen Compiler benötigt, um das Programm ausführen zu können.

Frage:

Sind Java und JavaScript kompatibel?

Antwort:

Das hängt davon ab, was Sie als »kompatibel« bezeichnen. Java und JavaScript haben eine ganze Menge der Syntax gemeinsam, dennoch gehen die Ähnlichkeiten zwischen den beiden kaum darüber hinaus. JavaScript-Skripten können nicht mit einem Java-Compiler kompiliert werden, noch können Java-Programme so in einer HTML-Datei aufgenommen werden, wie das bei JavaScript-Skripten der Fall ist. Java-Programme erfordern einen Java-Compiler und werden dann als ausführbare Programme in Webseiten aufgenommen, wohingegen JavaScript-Skripten in Code-Form interpretiert werden, während die HTML-Seite heruntergeladen wird.

Frage:

In Java und C++ war ich daran gewöhnt, Variablen mit Ausdrücken wie int, char und String zu definieren. Warum kann ich dies in JavaScript nicht tun?

Antwort:

Weil das nicht geht. Wie schon gesagt, ist JavaScript eine sehr locker strukturierte Sprache. Das bedeutet, daß alle Variablen jede Form annehmen und sogar dynamisch geändert werden können. Als Ergebnis davon bestimmt der Werttyp, der einer Variable zugeordnet wird, automatisch den Variablentyp.


Copyright ©1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X


vorheriges KapitelTop Of PageInhaltsverzeichnisIndexInfoseitenächstes Kapitel