Web-Anwendungen mit JavaScript entwickeln

Überblick

Mit JavaScript können Sie Befehle in eine HTML-Seite einbetten. Diese Befehle werden ausgewertet, wenn der Endbenutzer die Page in seinen Browser lädt. Die Ausführung der Befehle erfolgt, wenn der Benutzer Eingaben oder Aktionen in der Page durchführt, z. B. Anklicken von Schaltflächen oder Eingaben in Textfelder.

Sie erinnern sich vielleicht an den Begriff LiveScript. Das ist die frühere Bezeichnung für JavaScript. Da immer mehr Entwickler von Web-Pages und Programmierer von Unternehmen Skripte erstellen, die das Verhalten von Objekten definieren, die sowohl auf Clients als auch auf Servern ausgeführt werden, kann man davon ausgehen, daß die Sprache laufend verbessert wird. Falls Sie an den neuesten Entwicklungen und Erweiterungen interessiert sind, sehen Sie sich bei der Home-Page von Netscape unter http://home.netscape.com/ um oder, noch besser, erstellen Sie für diese Page ein Lesezeichen.

Einführung in JavaScript

Einige Programmiersprachen werden kompiliert. Sie führen das Programm durch einen Compiler aus, der das im Klartext erfaßte Programm einmal in eine Binärsprache übersetzt, die der Computer versteht und ausführen kann. JavaScript ist eine interpretierte Sprache. Das bedeutet, daß der Computer das Programm jedesmal auswerten muß, wenn es ausgeführt wird. Die JavaScript-Befehle werden in eine HTML-Page eingebettet. Jeder Browser, der JavaScript unterstützt, kann die Befehle interpretieren und sich entsprechend verhalten.

Lassen Sie sich aber durch diese Fachsimpelei nicht einschüchtern. Gleichgültig, ob Sie Erfahrung im Programmieren mit dBase oder Visual Basic haben oder nicht, werden Sie gleich feststellen, daß JavaScript sehr einfach ist und keine Programmierkenntnisse voraussetzt.

Java weist verschiedene Merkmale der Programmiersprache C++ auf, die in JavaScript absichtlich weggelassen wurden, um die Sprache einfach zu halten und potentielle Fehlerquellen auszuschließen.

Wozu eine Skriptsprache verwenden?

HTML bietet Web-Autoren zwar viel Flexibilität, ist selbst aber statisch. Ein einmal geschriebenes HTML-Dokument kann weder mit dem Benutzer interagieren noch irgendwelche Hyperlinks darstellen. Die kreative Verwendung von CGI-Skripten (die auf Web-Servern laufen) hat es ermöglicht, daß interessantere und wirklich interaktive Web-Sites Interaktivitaetentwickelt werden können. Einige Anwendungen setzen jedoch clientseitige Skripte voraus.

JavaScript wurde entwickelt, um Web-Autoren eine Möglichkeit zu bieten, kleine Skripte zu schreiben, die nicht auf dem Server, sondern im Browser der Benutzer ausgeführt werden. So sammelt eine Anwendung beispielsweise Daten aus einem Formular und sendet sie an den Server zur Verarbeitung. Das bedeutet eine erhebliche Leistungsverbesserung in Browser-Sitzungen, die der gesamte Prozeß schneller abläuft. Nachfolgend eine Zusammenstellung möglicher Anwendungsbereiche für JavaScript:

JavaScript kann Formulare auf Vollständigkeit prüfen, bevor der Benutzer das Formular an den Server sendet.
In Web-Pages können Inhalte vom Computer des Benutzers angezeigt werden, ohne daß dadurch Daten an den Server gesendet werden. Eine Bank könnte z. B. JavaScript-Befehle in ihre Pages einbinden, die Daten aus einer Quicken-Datei holen, die sich auf der Festplatte des Benutzers befindet.
Da JavaScript die Einstellungen von in Java geschriebenen Applets ändern kann, haben Web-Autoren die Möglichkeit, Aussehen und Verhalten von Plug-Ins im Browser zu steuern. Eine Seite mit einer Director-Animation könnte z. B. ein JavaScript-Element nutzen, um das entsprechende Plug-In zu aktivieren.

Was bietet JavaScript?

JavaScript bietet eine Fülle von Funktionen und Befehlen. Die in JavaScript erstellten Skripte können HTML im Browser anzeigen, mathematische Berechnungen durchführen, Sound abspielen, neue URL-Adressen öffnen und sogar Schaltflächen in Formularen anklicken.

Eine Funktion ist ein kleines Programm, das etwas ausführt, und eine Methode ist eine Funktion, die zu einem Objekt gehört.

Der zur Ausführung solcher Aktionen erforderliche Code kann in eine Page eingebettet werden und wird beim Laden der Page ausgeführt. Sie können auch Methoden schreiben, die Code enthalten, der beim Eintritt des betreffenden Ereignisses ausgelöst wird. Sie können beispielsweise eine JavaScript-Methode schreiben, die aufgerufen wird, wenn der Benutzer auf die Submit-Schaltfläche in einem Formular klickt.

JavaScript kann auch die Attribute oder Eigenschaften von Java-Applets setzen, die im Browser laufen. Das vereinfacht dem Web-Autor das Ändern der Eigenschaften von Plug-Ins oder anderen Objekten, ohne in die Tiefen der Programmierung abzutauchen. Ein JavaScript-Code kann z. B. eine eingebettete QuickTime- oder AVI-Datei abspielen, wenn der Benutzer auf die betreffende Schaltfläche klickt.

Wie sieht JavaScript aus?

JavaScript-Befehle werden in HTML-Dokumente direkt oder über einen URL eingebettet. Hierfür wird nur das öffnende <SCRIPT> und das schließende </SCRIPT> benötigt.

Das <SCRIPT>-Element kann zwei Attribute haben. LANGUAGE spezifiziert die Skriptsprache, die zur Auswertung der Skripte herangezogen wird. SRC spezifiziert einen URL, von dem das Skript geladen wird. Das Attribut LANGUAGE ist immer erforderlich, es sei denn, die Sprache wird im URL des SRC-Attributs angegeben. LANGUAGE und SRC können auch kombiniert werden, z. B.:


<SCRIPT LANGAUGE="JavaScript">...</SCRIPT>

<SCRIPT SRC=" http://www.fairgate.com/scripts/common.js ">

...

</SCRIPT>

Aus Sicherheitsgründen wurde das SRC-Attribut in früheren Versionen des Netscape Navigators nie implementiert. Ab Navigator 3.0, Betaversion 5, wird es unterstützt.

JavaScript ähnelt den bekannten Programmiersprachen wie C, C++, Pascal, HyperTalk, Visual Basic und dBase. Die Sprache ist nach folgenden Regeln strukturiert:

JavaScript behandelt alle Buchstaben in Großschreibung (außer zwischen Anführungszeichen stehende Zeichenketten). Das heißt, daß document.write() und DOCUMENT.WRITE() identisch sind.
JavaScript ist in bezug auf Anweisungen flexibel. Eine einzelne Anweisung kann mehrere Zeilen abdecken, und mehrere kurze Anweisungen können in einer Zeile zusammengefaßt werden. In diesem Fall müssen sie durch ein Semikolon (;) getrennt werden.
Anweisungen werden mit geschweiften Klammern ({ }) in Blöcke gruppiert. Ein Block kann der BODY einer Funktion oder ein Codeabschnitt sein, der in einer Schleife als Teil eines Bedingungstests ausgeführt wird.

In Abbildung 25.1 sehen Sie einen kurzen JavaScript-Code in einer HTML-Page. Das vordere Fenster enthält die HTML-Originaldatei und im Navigator-Fenster erscheint die Ausgabe.

Abbildung 25.1: Beispiel eines HTML-Codes und der entsprechenden Ausgabe im Navigator-Fenster

siehe Abbildung

JavaScript-Programmierregeln

Trotz seiner einfachen Struktur ist JavaScript eine ausdrucksvolle Sprache. In diesem Abschnitt werden verschiedene einfache Regeln und Konventionen der Sprache behandelt.

Skripte verbergen

Sie werden sicherlich auch einmal Pages entwickeln, die in Browsern angezeigt werden können, die JavaScript nicht unterstützen. Um diese Browser davon abzuhalten, JavaScript-Befehle als HTML zu interpretieren, werden Skripte eingebunden, wie Listing 25.1 aufzeigt.

Listing 25.1: Verbergen von Skripten vor Browsern, die JavaScript nicht unterstützen


<SCRIPT LANGUAGE="JavaScript">

<!-- this line opens an HTML comment

document.write("You can see this script's output, " + 

               "but not its source.");

// this line closes the HTML comment -->

</SCRIPT>

Alles, was zwischen den Kommentarzeichen  steht, wird vom Browser ignoriert. Sorgfalt ist aber beim <SCRIPT>-Tag nötig. Wenn Sie versehentlich den Block <SCRIPT> ... </SCRIPT> zwischen Kommentarzeichen stellen, wird der Code nicht ausgeführt!

Sie haben vielleicht bemerkt, daß die schließende Kommentarzeile in Listing 25.1 mit einem doppelten Schrägstrich (//) beginnt. Das ist der JavaScript-Bezeichner für Kommentare. Er ist erforderlich, weil ab dem <SCRIPT>-Tag alle Codezeilen bis zum schließenden </SCRIPT>-Tag als Code verarbeitet werden. Mit dem Kommentarbezeichner können also in das Skript Elemente eingegeben werden, die nicht als Code ausgeführt werden.

Kommentare

In jedes gute Programm werden Kommentare eingefügt, um im Hinblick auf spätere Änderungen und zur allgemeinen Klarheit die verschiedenen Codeteile kurz zu erklären. JavaScript bildet da keine Ausnahme. Der JavaScript-Interpreter ignoriert den gesamten Text, der zwischen Kommentarbezeichnern steht. Halten Sie sich also nicht zurück, sondern geben Sie zu Ihren Codes die entsprechenden Erklärungen ein. Kommentare können ein- oder mehrzeilig sein.

Einzeilige Kommentare beginnen mit zwei Schrägstrichen (//). Mehrzeilige Kommentare beginnen mit /* in der ersten und enden mit */ in der letzten Zeile. Beispiele davon sehen Sie in Listing 25.2.

Listing 25.2: Beispiele von Kommentaren in JavaScript-Code


// Das ist ein zulässiger einzeiliger Kommentar

/ Dieser Kommentar ist ungültig, weil ein Schrägstrich fehlt

/* Mehrzeilige Kommentare können sich

über mehrere Zeilen erstrecken, müssen

aber korrekt abgeschlossen werden. */

/* Dieser Kommentar ist ungültig, weil er nicht beendet wird!

// Dieser Kommentar ist gültig, weil das Ende bei einzeiligen Kommentaren ignoriert wird. //

Die JavaScript-Sprache

JavaScript hat viel Ähnlichkeit mit Java und damit mit den Programmiersprachen C und C++. Java unterscheidet sich dahingehend, daß es als allgemeine objektorientierte Sprache dient. Bei JavaScript liegt die Absicht darin, eine schnelle und einfachere Sprache zur Erweiterung von Web-Pages bereitzustellen. In diesem Abschnitt werden die Bausteine von JavaScript und deren Kombination zum Schreiben von JavaScript-Programmen behandelt.

Bezeichner verwenden

Ein Bezeichner ist ein eindeutiger Name, den JavaScript benutzt, um eine Variable, eine Methode oder ein Objekt in einem Programm zu identifizieren. Wie bei anderen Programmiersprachen setzt JavaScript einige Regeln in bezug auf die zu verwendenden Namen auf. Alle JavaScript-Namen müssen mit einem Buchstaben oder einem Unterstrich (_) beginnen. Sie können Groß- und Kleinbuchstaben und die Ziffern 0 bis 9 enthalten. Wie eingangs erwähnt wurde, unterscheidet JavaScript nicht zwischen Groß- und Kleinschreibung.

In JavaScript können Werte auf zwei Arten dargestellt werden: als Literale oder Variablen. Literale sind feste Werte, die sich bei der Ausführung des Skripts nicht ändern. Variablen enthalten Daten, die sich jederzeit ändern können.

Literale und Variablen werden wiederum in Typen unterschieden. Der jeweilige Typ hängt von den in Literalen und Variablen enthaltenen Daten ab. JavaScript unterstützt folgende Typen:

Ganzzahlen: Aus einer Reihe von Ziffern bestehende Zahlen von 0 bis über 2 Milliarden.
Gleitpunktzahlen: Zahlen mit Dezimalstellen, z. B. 10.5 im Gegensatz zur Ganzzahl 10. Gleitpunktzahlen können positiv oder negativ sein, und sie können positive oder negative Exponenten enthalten (ein e in der Zahl).
Zeichenketten: Buchstaben, die zwischen doppelten (") oder einfachen (') Anführungszeichen stehen.
Boolesche Werte: Literale, die wahre (true) oder falsche (false) Werte haben können.

Funktionen, Objekte und Eigenschaften

Eine Funktion ist ein Codeteil, der etwas bewirkt, z. B. das Abspielen von Sound, das Berechnen einer Gleichung oder das Versenden einer E-Mail. Ein Objekt ist eine Sammlung von Daten und Funktionen, die gruppiert wurden. Die Funktionen eines Objekts nennt man Methoden, und seine Datenwerte sind Eigenschaften. JavaScript-Programme haben Eigenschaften und Methoden, die mit den vom Browser bereitgestellten Objekten und seinen Plug-Ins oder Applets interagieren.

Hier eine einfache Faustregel: Eigenschaften sind Dinge, die ein Objekt kennt, und Methoden sind Dinge, die es ausführen kann.

Integrierte Objekte und Funktionen verwenden

Einzelne JavaScript-Elemente sind Objekte. Zeichenkettenliterale sind beispielsweise string-Objekte, und sie haben Methoden, die Sie benutzen können, um etwas zu bewirken. JavaScript bietet auch verschiedene Objekte, um das Browser-Fenster, die momentan angezeigte Page und andere Elemente einer Browser-Sitzung darzustellen.

Auf Objekte wird mit dem Namen zugegriffen. Das aktive Dokument ist beispielsweise ein Objekt namens document. Sie benutzen die Eigenschaften oder Methoden des Dokuments, indem Sie einen Punkt und den Namen der gewünschten Eigenschaft oder Methode eingeben. document.title ist z. B. die Eigenschaft title des Objekts document.

Eigenschaften verwenden

Jedes Objekt hat Eigenschaften, auch Literale. Um auf eine Eigenschaft zuzugreifen, benutzen Sie den Objektnamen, gefolgt von einem Punkt und dem Namen der Eigenschaft. Möchten Sie die Länge einer Zeichenkette namens address holen, schreiben Sie


address.length

und erhalten damit eine Ganzzahl, die der Anzahl der Zeichen in der Zeichenkette entspricht. Hat das betreffende Objekt Eigenschaften, die geändert werden können, verfahren Sie genauso. Um die Eigenschaft bgColor (Hintergrundfarbe) des Objekts document zu ändern, schreiben Sie z. B.:


document.bgColor = "blue";

Sie können auch neue Eigenschaften für ein Objekt hinzufügen, indem Sie sie benennen. Nehmen wir an, Sie definieren das Objekt customer für eine Page, dann könnten Sie wie folgt Eigenschaften hinzufügen:


customer.name = "Scott Walter";

customer.address = "Somewhere out there";

customer.zip = "55122";

Die Methoden eines Objekts sind im Grunde Eigenschaften, so daß Sie mühelos neue Eigenschaften hinzufügen können, indem Sie eine eigene Funktion schreiben und mit dem Namen dieser Funktion eine neue Eigenschaft für das Objekt anlegen. Möchten Sie die Methode Bill() zum Objekt customer hinzufügen, könnten Sie das mit der Funktion BillCustomer(), z. B.:


customer.Bill = BillCustomer;

Um die neue Methode aufzurufen, schreiben Sie:

customer.Bill();

Array- und Objekteigenschaften

JavaScript-Objekte speichern ihre Eigenschaften in einer internen Tabelle, auf die Sie in zweifacher Art Zugriff haben. Die erste Zugriffsmethode haben Sie bereits kennengelernt: Eingabe des Namens der Eigenschaft. Die zweite Methode heißt Array und bedeutet, daß Sie auf alle Eigenschaften eines Objekts nacheinander zugreifen können. Die Funktion in Listing 25.3 gibt alle Eigenschaften des bezeichneten Objekts aus.

Listing 25.3: Anzeigen der Eigenschaften eines Objekts


function DumpProperties(obj, objName) {

   var result = "";

   for (i in obj) {

      result += objName + "." + i + " = " + obj[i] + "\n";

   }



   return result;

}

Auch HTML-Elemente haben Eigenschaften

JavaScript bietet Objekte zum Zugreifen auf HTML-Formulare und Formularfelder. Das ist besonders nützlich zum Schreiben von Skripten, die Daten in Formularen prüfen oder ändern. Mit JavaScript-Eigenschaften können Sie Daten von Formularelementen holen und setzen und auszuführende Aktionen definieren.

JavaScript und der Browser

Nachdem Sie nun gelesen haben, wie JavaScript Skripte ausfuehrenfunktioniert, betrachten wir die Unterstützung von Browsern durch JavaScript.

Wann Skripte ausgeführt werden

Wenn Sie einen JavaScript-Code in eine Page einfügen, wertet der im Browser integrierte JavaScript-Interpreter den Code aus, konvertiert ihn in ein effizienteres internes Format und bereitet ihn so auf die spätere Ausführung vor. Das ist etwa vergleichbar mit der Verarbeitung von HTML-Code.

Dabei werden Funktionen zur späteren Verwendung gespeichert. Sie müssen aber nach wie vor explizit aufgerufen werden, um sie auszuführen. Einige Funktionen sind an Objekte angehängt, z. B. Schaltflächen oder Textfelder mit Formularen. Sie werden aufgerufen, wenn auf der Schaltfläche oder dem Textfeld ein Ereignis ausgelöst wird. Sie können aber auch veranlassen, daß bestimmte Funktionen während der Auswertung der Page ausgeführt werden, z. B.:


<SCRIPT LANGUAGE="JavaScript">

<!--

myFunction();

// -->

</SCRIPT>

Wo Skripte abgelegt werden

Sie können Skripte irgendwo auf einer HTML-Page abstellen. Wichtig ist nur, daß sie zwischen dem Tag-Paar <SCRIPT> und </SCRIPT> stehen. Viele JavaScript-Programmierer setzen Funktionen, die mehr als einmal ausgeführt werden, in das <HEAD>-Element. Das ist ein sehr praktischer Platz. Da das <HEAD>-Element am Anfang der Datei steht, werden alle Funktionen und JavaScript-Codes, die dort stehen, vor dem Laden des restlichen Dokuments ausgewertet.

Manchmal soll ein Code aber erst nach dem Parsing und der Anzeige des HTML-Codes der Page ausgeführt werden. Ein Beispiel dafür ist die Funktion DumpURL(). Sie gibt alle in der Page enthaltenen URLs aus. Wird die Funktion ausgewertet, bevor der HTML-Code der Page ganz geladen wurde, fehlen eventuell einige URLs, deshalb muß die Funktion am Ende der Page aufgerufen werden.

Objekte und Ereignisse

Abgesehen davon, daß der Browser JavaScript erkennt, wenn er auf das Tag <SCRIPT> stößt, handhabt er auch einige Objekte (und deren Methoden und Eigenschaften), die in JavaScript-Programmen enthalten sind. Außerdem werden Methoden auch ausgelöst, wenn der Benutzer im Browser bestimmte Handlungen durchführt, also durch Ereignisse.

Das location-Objekt

Im location-Objekt steht der aktuelle URL mit Hostnamen, Pfad, CGI-Skript und Protokoll. Tabelle 25.1 ist eine Zusammenstellung der Eigenschaften des location-Objekts.

Tabelle 25.1: Eigenschaften des location-Objekts

Eigenschaft	Typ	Zweck
href	Zeichenkette	Enthält den gesamten URL, z. B. http://home.netscape.com:80/index.html
protocol	Zeichenkette	Enthält das Protokollfeld des URL mit dem Doppelpunkt, z. B. http:
hostname	Zeichenkette	Enthält nur den Domänennamen, z. B. home.netscape.com
port	Zeichenkette	Enthält den Port (falls angegeben, z. B. 80). Wird kein Port angegeben, bleibt diese Eigenschaft leer.
host	Zeichenkette	Enthält den Hostnamen und die Portnummer, z. B. home.netscape.com:80
path	Zeichenkette	Enthält den Pfad (das Verzeichnis) zum Dokument, z. B. / für das Root-Verzeichnis
hash	Zeichenkette	Enthält CGI-Argumente nach dem ersten # im URL
search	Zeichenkette	Enthält CGI-Argumente nach dem ersten ? im URL
toString()	Methode	Gibt location.href aus; mit dieser Funktion kann der gesamte URL geholt werden
assign()	Methode	Setzt location.href auf den angegebenen Wert

Das document-Objekt

Das document-Objekt umfaßt alle Eigenschaften und Methoden für das aktive Dokument (siehe Tabelle 25.2).

Tabelle 25.2: Eigenschaften des document-Objekts

Eigenschaft	Typ	Zweck
title	Zeichenkette	Enthält den Titel der aktuellen Page (aus dem HTML-Tag <TITLE>) oder Untitled, falls kein Titel vorhanden ist
location	Zeichenkette	Definiert eine bestimmte Stelle in der aktuellen Page
lastModified	Zeichenkette	Enthält das Datum der letzten Änderung der Page
forms[]	Array	Enthält alle Formulare der aktuellen Page
links[]	Array	Enthält alle Hyperlinks der aktuellen Page
write()	Methode	Schreibt HTML-Code in das aktuelle Dokument in der Reihenfolge des Skripts

Das history-Objekt

Alle Pages, die ein Benutzer in seinem Browser in der aktuellen Sitzung bereits durchwandert hat, werden in einer Verlaufsliste zusammengefaßt. Diese Liste ist über das history-Objekt zugänglich. Ihre JavaScript-Programme können die Pages der Liste mit den in Tabelle 25.3 aufgeführten Eigenschaften und Funktionen durchwandern.

Tabelle 25.3: Eigenschaften des history-Objekts

Eigenschaft	Typ	Zweck
back()	Methode	Enthält den URL des vorherigen History-Stapels
forward()	Methode	Enthält den URL des nächsten History-Stapels
go(x)	Methode	Verschiebt x Einträge im History-Stapel vorwärts (x > 0) oder rückwärts (x < 0)

Das window-Objekt

Das window-Objekt hängt mit dem Fenster zusammen, in dem ein Dokument angezeigt wird. Stellen Sie sich das window-Objekt als Windows- oder Macintosh-Fenster und das document-Objekt als Inhalt dieses Fensters vor. Um in einem Fenster etwas zu bewirken, stellt JavaScript folgende Methoden bereit:

alert(strMessage): Generiert ein Dialogfenster mit der durch strMessage definierten Warnmeldung. Der Benutzer muß die OK-Schaltfläche des Dialogfensters anklicken, um fortfahren zu können.
confirm(strMessage): Generiert ein Dialogfenster mit der durch strMessage definierten Bestätigungsmeldung und zwei Schaltflächen. Klickt der Benutzer auf OK, wird die Aktion bestätigt (confirm() ist wahr). Klickt er auf Abbrechen, wird die Aktion abgebrochen (confirm() ist dann falsch).
prompt(strMessage): Generiert ein Dialogfenster mit einem Texteingabefeld und zwei Schaltflächen sowie der durch strMessage definierten Meldung. Klickt der Benutzer auf OK, werden die von ihm eingegebenen Daten an JavaScript zur Verarbeitung abgegeben.
open(...): Öffnet ein zweites Browser-Fenster und lädt ein Dokument in dieses Fenster.
close(): Schließt das aktive Browser-Fenster oder die Browser-Anwendung.

HTML-Objekte und -Ereignisse

JavaScript bietet Ihnen Zugang zu einzelnen HTML-Elementen in Form von Objekten mit jeweils eigenen Eigenschaften und Methoden. Dadurch können Sie das Verhalten Ihrer Pages individuell und einfach steuern.

Eigenschaften, die alle Objekte haben

Die in diesem Abschnitt beschriebenen Methoden und Eigenschaften betreffen mehrere HTML-Tags (siehe Tabelle 25.4). Anschließend werden Eigenschaften für Anker und Formulare beschrieben.

Tabelle 25.4: Eigenschaften und Methoden von HTML-orientierten JavaScript-Objekten

Eigenschaft/Methode	Typ	Zweck
onFocus	Ereignis	Wird aufgerufen, wenn der Benutzer das Feld über die TAB-Taste oder einen Mausklick aktiviert
onBlur	Ereignis	Wird aufgerufen, wenn der Benutzer dieses Feld verläßt
onSelect	Ereignis	Wir aufgerufen, wenn der Benutzer Text in dem Feld markiert
onChange	Ereignis	Wird nur aufgerufen, wenn der Benutzer nach dem Ändern des Inhalts das Feld verläßt. Diese Funktion eignet sich zum Auslösen eines Validierungstests.
onSubmit	Ereignis	Wird aufgerufen, wenn der Benutzer in einem Formular auf die Submit-Schaltfläche klickt
onClick	Ereignis	Wird aufgerufen, wenn der Benutzer (in einem Formular) auf eine Schaltfläche klickt
focus()	Methode	Aktiviert das damit in Verbindung stehende Objekt
blur()	Methode	Deaktiviert das damit in Verbindung stehende Objekt (und gibt die Kontrolle an das nächste Objekt in Folge ab)
select()	Methode	Wählt das bezeichnete Objekt
click()	Methode	Simuliert das Drücken der damit verbundenen Schaltfläche
enable()	Methode	Aktiviert das damit verbundene Objekt
disable()	Methode	Deaktiviert das damit verbundene Objekt

Die Funktionen focus(), blur(), select(), click(), enable() und disable() sind Objektmethoden. Sie können mit dem Namen des Objekts aufgerufen werden. Um beispielsweise die Schaltfläche Suchen auszuschalten, geben Sie form.suchen.disable(); ein.

Anker-Objekte

Hypertext-Anker haben nicht alle oben aufgeführten Eigenschaften, sondern nur die Methoden onFocus, onBlur und onClick. Sie können diese Methoden auf die übliche Art setzen und ändern. Gleichgültig, welchen Code Sie anhängen, folgt der Browser nach der Ausführung des Codes dem angeklickten Link.

Formular-Objekte

In Tabelle 25.5 werden die Eigenschaften für form-Objekte aufgeführt. Später werden verschiedene Methoden beschrieben, die Sie übergehen können, um JavaScript-Routinen aufzurufen, wenn in bezug auf ein Objekt auf der Page Ereignisse ausgelöst werden.

Tabelle 25.5: Eigenschaften von Formularobjekten

Eigenschaft/Methode	Typ	Zweck
name	Zeichenkette	Enthält den Wert des NAME-Attributs des Formulars
length	Ganzzahl	Enthält die Anzahl der Elemente des Formulars (und ist damit das Array elements[])
method	Ganzzahl	Enthält den Wert des METHOD-Attributs des Formulars (0 für GET, 1 für POST)
action	Zeichenkette	Enthält den Wert des ACTION-Attributs des Formulars
encoding	Zeichenkette	Enthält den Wert des ENCTYPE-Attributs des Formulars
target	Fenster	Bezeichnet das Zielfenster nach der Übertragung der Formulardaten
elements[]	Array	Enthält alle Objekte, aus denen das Formular besteht
onSubmit	Ereignis	Wird aufgerufen, wenn der Benutzer auf die Submit-Schaltfläche eines Formulars klickt. Ist der Wert der Ausgabe dieses Ereignisses falsch (false), wird die Übertragung abgebrochen.
submit()	Methode	Erzwingt die Übertragung des betreffenden Formulars

Objekte in einem Formular

Eine der besten Verwendungsarten für JavaScript sind Formulare, da Sie Skripte schreiben können, die mit den vom Benutzer eingegebenen Daten Berechnungen verarbeiten, prüfen und ausführen. JavaScript unterstützt für Eingabefelder (INPUT) und Schaltflächen verschiedene Eigenschaften.

INPUT-Elemente werden in Formularen verwendet, damit der Benutzer Daten eingeben kann. Die für diese Textfelder unterstützten Eigenschaften und Methoden sind in Tabelle 25.6 aufgeführt.

Tabelle 25.6: Eigenschaften von INPUT-Objekten

Eigenschaft/Methode	Typ	Zweck
name	Zeichenkette	Enthält den Wert des NAME-Attribut des Feldes
value	Zeichenkette	Enthält den Inhalt des Feldes
default	Zeichenkette	Enthält den Vorgabeinhalt des Feldes (gemäß dem VALUE-Attribut)
onFocus	Ereignis	Wird aufgerufen, wenn der Benutzer das Feld durch Drücken der [_ÿ]-Taste oder Anklicken mit der Maus aktiviert
onBlur	Ereignis	Wird aufgerufen, wenn der Benutzer das Feld verläßt
onSelect	Ereignis	Wird aufgerufen, wenn der Benutzer den Text im Feld markiert
onChange	Ereignis	Wird aufgerufen, wenn der Benutzer nach der Änderung der Felddaten das Feld verläßt; diese Funktion kann benutzt werden, um einen Validierungstest auszulösen.

Auch die einzelnen Schaltflächen und Kontrollfelder haben Eigenschaften. JavaScript bietet Eigenschaften, um Zeichenketten mit den Daten von Schaltflächen sowie Methoden zur Reaktion auf Handlungen des Benutzers zu holen. Die Eigenschaften und Methoden für Schaltflächen sind in Tabelle 25.7 aufgeführt.

Tabelle 25.7: Eigenschaften von Schaltflächenobjekten

Eigenschaft/Methode	Typ	Zweck
name	Zeichenkette	Enthält den Wert des NAME-Attributs der Schalt- fläche
value	Zeichenkette	Enthält das VALUE-Attribut der Schaltfläche
onClick	Ereignis	Wird aufgerufen, wenn der Benutzer auf die betreffende Schaltfläche klickt
click()	Methode	Simuliert das Anklicken der betreffenden Schaltfläche

Optionsfelder bieten dem Benutzer sich gegenseitig ausschließende Optionen zur Auswahl. Da alle Optionsfelder einer Gruppe den gleichen Namen haben, gibt es in JavaScript die spezielle Eigenschaft INDEX zur Unterscheidung der Optionsfelder. Die Abfrage der INDEX-Eigenschaft eines Optionsfeldobjekts gibt eine Zahl (beginnend mit 0 für das erste Feld) aus, die dem gewählten Optionsfeld der Gruppe entspricht.

Soll beispielsweise der Cursor automatisch in das erste Textfeld eines Formulars springen, so daß der Benutzer das Feld nicht gezielt auswählen muß, können Sie das erste Textfeld namens UserName wie folgt definieren:


form.UserName.focus()

Programmieren mit JavaScript

Wie in früheren Kapiteln erwähnt, hat JavaScript Web-Autoren eine Menge zu bieten. JavaScript ist nicht so flexibel wie C oder C++, dafür aber schneller und einfacher. Vor allem aber läßt es sich leicht in Web-Pages einbetten. In diesem Abschnitt befassen wir uns mit den Einzelheiten der JavaScript-Programmierung.

Ausdrücke

Ein Ausdruck ist etwas, das bewertet werden kann, um einen einzelnen Wert zu ermitteln. Ausdrücke können Zeichenketten, numerische Literale, Operatoren usw. enthalten, und reichen von einfach bis relativ komplex. Zum Beispiel ist x = 7; ein Ausdruck, der den Zuweisungsoperator nutzt, um das Ergebnis z der Variablen x zuzuweisen. Demgegenüber ist


(quitFlag == true) && (formComplete == false)

ein komplexerer Ausdruck, dessen endgültiger (boolescher) Wert von den Werten der Variablen quitFlag und formComplete abhängt.

Operatoren

Operatoren wirken sich auf Variablen und Literale aus. Die Elemente, auf die ein Operator einwirkt, sind die Operanden. Es gibt folgende Operatoren:

Binäre Operatoren: Diese Operatoren brauchen zwei Operanden. Die vier mathematischen Operatoren, die wir alle in der Schule gelernt haben (+ für Addition, – für Subtraktion, * für Multiplikation und / für Division) sind binäre Operatoren, ebenso wie der oben angeführte Zuweisungsoperator (=).
Unäre Operatoren: Diese Operatoren erfordern einen Operanden. Der Operator kann vor oder nach dem Operand stehen. Beispielsweise subtrahiert der --Operator vom Operanden.

Zuweisungsoperatoren

Zuweisungsoperatoren weisen das Ergebnis eines Ausdrucks einer Variablen zu. JavaScript hat ein Merkmal, das die meisten anderen Programmiersprachen nicht haben: Der Typ einer Variablen kann im Flug geändert werden, wie aus Listing 25.4 hervorgeht.

Listing 25.4: Typ einer Variablen ändernVariablentyp aendern


function TypeDemo() {

   // first, pi is a floating-point

   var pi = 3.1415926;

   document.write("Pi is " + pi + "\n");



   // now, pi is changed to a Boolean

   pi = false;

   document.write("Pi is now " + pi + "\n");

}

Bei diesem kurzen Beispiel wird zuerst der Wert von pi ausgegeben. Bei den meisten anderen Sprachen würde der Versuch, eine Gleitpunktvariable einem booleschen Wert zuzuweisen, entweder einen Kompilier- oder einen Laufzeitfehler erzeugen. JavaScript akzeptiert die Änderung ohne Murren und gibt den neuen Wert false für pi aus.

Der häufigste Zuweisungsoperator = weist den Wert der rechten Seite eines Ausdrucks dessen linker Seite zu. In Listing 25.4 hat die Variable pi den Gleitpunktwert 3.1415926 erhalten, nachdem der erste Ausdruck ausgewertet wurde. JavaScript definiert weitere Operatoren, die übliche mathematische Operationen mit Zuweisung kombinieren (siehe Tabelle 25.8).

Tabelle 25.8: JavaScript-Operatoren

Operator	Beispiel	Entsprechung
+=	x += y	x = x + y
-=	x -= y	x = x – y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
++	x++	x = x + 1
--	x--	x = x – 1

Mathematische Operatoren

Mathematische Operationen können in JavaScript entweder mit Zuweisungen kombiniert (siehe Tabelle 25.8) oder einzeln benutzt werden. Die vier mathematischen Basisfunktionen (Addition, Subtraktion, Multiplikation und Division) funktionieren wie auf einer normalen Rechenmaschine.

Der Negationsoperator (-) ist ein unärer Operator, der das Zeichen seines Operanden negiert. Der Negationsoperator muß vor dem Operanden stehen.

Ferner unterstützt JavaScript zwei nützliche unäre Operatoren – den Dekrement- (--) und den Inkrementoperator (++). Diese Operatoren haben eine zweifache Wirkung: Sie ändern den Wert ihres Operanden und geben den neuen Wert aus. Außerdem haben beide eine einzigartige Eigenschaft: Sie können vor oder nach ihrem Operanden benutzt werden. Steht der Operator nach dem Operanden, gibt JavaScript den Wert des Operanden aus und ändert ihn dann. Steht der Operator vor dem Operanden, ändert JavaScript zuerst den Operanden und gibt dann den geänderten Wert aus. Nachfolgend ein kleines Beispiel:


x = 7;     // x set to 7

a = --x;   // x set to 6, THEN a set to 6

b = a++;   // b set to 6, THEN a set to 7

x++;       // x set to 7

Vergleichsoperatoren

JavaScript bietet mehrere Vergleichsoperatoren, die zwei Operanden hernehmen und wahr (true) oder falsch (false) ausgeben. Die Vergleichsoperatoren von JavaScript (siehe Tabelle 25.9) dienen zum Vergleichen des Wertes zweier Ausdrücke auf größer, kleiner oder gleich.

Tabelle 25.9: JavaScript-Vergleichsoperatoren

Operator	Gibt wahr (true) aus, wenn
==	die zwei Operanden gleich sind
!=	die zwei Operanden nicht gleich sind
<	der linke Operand kleiner ist als der rechte
<=	der linke Operand kleiner als oder gleich wie der rechte ist
>	der linke Operand größer ist als der rechte
>=	der linke Operand größer als oder gleich wie der rechte ist

Die Vergleichsoperatoren können auch in Zeichenketten benutzt werden. Die Ergebnisse hängen von der lexikographischen Anordnung ab.

Logische Operatoren

Vergleichsoperatoren vergleichen die Menge oder den Inhalt auf numerische oder Zeichenkettenausdrücke. Manchmal muß man aber einen logischen Wert testen. Die logischen Operatoren von JavaScript ermöglichen Ihnen, Ausdrücke zu vergleichen, die logische Werte ausgeben. Die logischen Operatoren in JavaScript sind:

&& (und): Der binäre Operator und gibt nur wahr aus, wenn beide Operanden wahr sind. Ist der erste Operand falsch, gibt und sofort falsch aus, ohne den zweiten Operanden zu bewerten.
|| (oder): Der binäre Operator oder gibt wahr aus, wenn einer der Operanden wahr ist.
! (nicht): Der unäre Operator nicht gibt wahr aus, wenn sein Operand falsch ist, und umgekehrt.

Beachten Sie, daß die Operatoren und und oder den zweiten Operanden nicht bewerten, wenn der erste Operand ausreichend Informationen liefert, um einen Wert auszugeben. Diese Kurzbewertung kann wichtig sein, wenn der zweite Operand ein Funktionsaufruf ist, z. B. keepGoing = userQuit && theForm.Submit();. Ist userQuit falsch, wird der zweite Operand, der das aktive Formular bereitstellt, nicht ausgewertet, was bedeutet, daß in diesem Fall die Methode nicht ausgeführt wird.

Steuern der Skripte in JavaScript

Ein Teil der Skripte, die man für seine Web-Pages entwickelt, sind einfach. Sie werden jedesmal Seite für Seite gleich ausgeführt, und setzen nicht voraus, daß irgendwelche Bedingungen ausgewertet werden müssen. Dann gibt es aber auch anspruchsvolle Skripte, für die man je nach Zusammenhang verschiedene Aktionen benötigt. Eventuell muß auch der eine oder andere Codeblock mehrmals ausgeführt werden, bis eine Bedingung wahr ist. JavaScript unterstützt Gebilde zum Steuern des Ausführungsflusses der Skripte auf der Grundlage von Bedingungen und zum Wiederholen von Abfolgen.

Bedingungen testen

In JavaScript ist if ... else die einzige Anweisung für Entscheidungen. Um eine Entscheidung zu treffen, liefern Sie einen Ausdruck, der wahr oder falsch ermittelt. Welcher Code ausgeführt wird, hängt davon ab, was Ihr Ausdruck ermittelt.

Die einfachste Form von if ... else hat nur den Teil if. Ist die spezifizierte Bedingung wahr, wird der nach der Bedingung folgende Code ausgeführt, andernfalls wird er übersprungen. In dem folgenden Codeteil


if(document.lastModified.year < 1995) 

   document.write("Danger!  This is a mighty old document.");

erscheint die Nachricht nur, wenn die Bedingung (d. h. die Eigenschaft lastModified des Dokuments war vor 1995) wahr ist. Sie können als Bedingung jeden beliebigen Ausdruck benutzen. Da Ausdrücke verschachtelt und mit logischen Operatoren kombiniert werden können, sind relativ anspruchsvolle Tests möglich, z. B.:


if((document.lastModified.year == 1996) &&

   (document.lastModified.month >= 10)) {

   document.write("This document is reasonably current.");

}

Mit der Klausel else können Sie mehrere Anweisungen zur Ausführung definieren, wenn die Bedingung falsch ist.

Aktionen wiederholen

Möchten Sie eine Aktion mehrmals wiederholen, haben Sie mit JavaScript Glück, weil die Sprache dafür zwei Schleifenarten unterstützt.

Mit der Schleife for können Sie eine Reihe von Anweisungen mehrmals ausführen. Sie definieren drei Ausdrücke: Einen Anfangswert für die verwendeten Variablen, eine Bedingung, die das Ende der Schleife bestimmt, und einen Inkrementausdruck, der eventuell Variablen ändert. Hier ein einfaches Beispiel:


for(count=0; count<100; count++

   document.write("Count is " + count);

Diese Schleife wird 100mal ausgeführt und gibt jedesmal eine Zahl aus. Der Anfangsausdruck setzt den Zähler count auf Null. Der Bedingungstest prüft, ob count weniger als 100 ist, und der Inkrementausdruck erhöht den Zähler count.

Sie können für jeden dieser Ausdrücke mehrere Anweisungen benutzen, z. B.:


for (i=0, numFound=0; (i<100 && (numFound<3); i++) {

   if(someObject.found())

      numFound++;

}

Diese Schleife wird entweder 100mal oder so oft ausgeführt, bis drei Elemente »gefunden« werden. Die Schleifenbedingung bestimmt, wann i >= 100 oder numFound >=3 ist.

Die zweite Schleifenart ist while. Sie führt Anweisungen so lange aus, bis die Bedingung wahr ist. Die erste for-Schleife könnten Sie z. B. wie folgt schreiben:


count = 0;

while(count < 100) {

   document.write("Count is " + count);

   count++;

}

Welche Form bevorzugt angewandt wird, hängt von Aufgabe und Zweck ab. for-Schleifen sind nützlich, wenn man eine Aktion wiederholen will (und genau weiß, wie oft sie wiederholt werden soll). while-Schleifen eignen sich am besten, wenn etwas so lange wiederholt werden soll, solange die Bedingung wahr ist.

Reservierte Wörter in JavaScript

In JavaScript sind bestimmte Schlüsselwörter für die Reservierte WoerterSprache selbst reserviert. Sie können keine Methoden oder Eigenschaften mit diesen Wörtern definieren. Die derzeit reservierten Wörter sind in Tabelle 25.10 zusammengefaßt:

Tabelle 25.10: Reservierte Wörter in JavaScript

abstract	extends	int	super
boolean	false	interface	switch
break	final	long	synchronized
byte	finally	native	this
case	float	new	throw
catch	for	null	throws
char	function	package	transient
class	goto	private	true
const	if	protected	try
continue	implements	public	var
default	import	return	void
do	in	short	while
double	instanceof	static	with
else

JavaScript-Befehle

In diesem Abschnitt werden die JavaScript-Befehle behandelt, die ab Navigator 3.0 und Internet Explorer 3.0 implementiert wurden. Die Befehle sind alphabetisch aufgeführt und zu den meisten finden Sie praktische Beispiele.

break

Die Anweisung break bestimmt die aktuelle while- oder for-Schleife und gibt die Programmsteuerung an die Anweisung ab, die der beendeten Schleife folgt.

Syntax: break

Beispiel: Folgende Funktion tastet eine Liste mit URLs im aktuellen Dokument ab und stoppt, wenn sie alle URLs durchgesehen hat oder einen URL findet, der mit dem Eingabeparameter searchName übereinstimmt.


function findURL(searchName) {

   var i=0;



   for(i=0; i<document.links.length; i++) {

      if(document.links[i] == searchName)

         break;

   }



   if(i < document.links.length) {

      alert("Found " + searchName + " in position " + i);

   } else {

      alert("" + searchName + " not found!");

   }

}

continue

Die Anweisung continue stoppt die Ausführung der Anweisungen in einer while- oder for-Schleife und springt zur nächsten Schleifenwiederholung. Sie stoppt nicht vollständig wie die Anweisung break. Sie springt bei der while-Schleife zu der Bedingung zurück und in einer for-Schleife zum Aktualisierungsausdruck.

Syntax: continue

Beispiel: Folgende Funktion gibt die ungeraden Zahlen zwischen 1 und x aus. Ihre continue-Anweisung fährt mit der nächsten Wiederholung fort, wenn i gerade ist.


function printOddNumbers(x) {

   var i=0;



   while(i < x) {

      if((++i % 2) == 0)

         continue;

      else

         document.write("" + i + "\n");

   }

}

for

Eine for-Schleife besteht aus drei optionalen Ausdrücken, die zwischen Klammern stehen und durch je ein Semikolon getrennt sind, und denen ein Anweisungsblock folgt, der in der Schleife ausgeführt wird. Diese Teile bewirken folgendes:

Der Anfangsausdruck initialExpr wird vor Beginn der Schleife ausgewertet. Er wird vorwiegend zur Initialisierung der Variablen von Schleifenzählern benutzt. Sie können hier das Schlüsselwort var verwenden, um neue Variablen zu deklarieren.
Eine Bedingung wird bei jedem Durchgang durch die Schleife bewertet. Ist die Bedingung wahr, werden die Anweisungen in der Schleife ausgeführt. Sie können die Bedingung weglassen und müssen immer auf wahr testen. Hierbei müssen Sie zum Beenden break in der Schleife verwenden.
Der Aktualisierungsausdruck updateExpr wird normalerweise benutzt, um die Zählervariable oder andere in der Bedingung benutzte Variablen zu aktualisieren oder zu erhöhen. Dieser Ausdruck ist optional. Sie können Variablen nach Bedarf in der Schleife aktualisieren.
Ein Anweisungsblock wird ausgeführt, solange die Bedingung wahr ist. Dieser Block kann eine oder mehrere Anweisungen enthalten.

Syntax:


for ([initialExpr ;] [condition ;] [updateExpr]) {

   statements

}

Beispiel: Diese einfache Anweisung gibt die Zahlen von 0 bis 9 aus. Sie beginnt mit der Deklaration der Variablen i für den Schleifenzähler und setzt ihn auf Null zurück. Solange i kleiner ist als 10, wird i durch den Aktualisierungsausdruck erhöht, und die Anweisungen im Schleifenkörper werden ausgeführt.


for (var i=0; i<10; i++) {

   document.write("" + i + "\n");

}

for ... in

Das ist eine spezielle Form für die for-Schleife, die die Variable variableName auf allen Eigenschaften des Objekts objectName wiederholt. Für jede Eigenschaft führt sie die in der Schleife befindlichen Anweisungen aus.

Syntax:


for (variableName in objectName) {

   statements

}

Beispiel: Die folgende Funktion nimmt als Argumente ein Objekt und dessen Namen. Dann benutzt sie die Schleife for ... in, um sich durch alle Eigenschaften des Objekts zu wiederholen. Am Ende gibt sie eine Zeichenkette aus, die die Namen und Werte der Eigenschaften auflistet.


function dumpProps(obj, objName) {

   var result = "";



   for (i in obj) {

      results += objName + "." + i + " = " + obj[i] + "\n";



   return result;

}

function

Die Anweisung function deklariert eine JavaScript-Funktion. Die Funktion kann wahlweise einen oder mehrere Parameter annehmen. Um einen Wert auszugeben, muß die Funktion die Anweisung return enthalten, die den auszugebenden Wert bezeichnet. Alle Parameter werden an Funktionen nach Wert abgegeben. Die Funktion holt den Wert des Parameters, kann den Ursprungswert aber nicht ändern.

Syntax:


function name([param] [, param [..., param]]) {

   statements

}

Beispiel:


// This function returns true if the active document has the title

// specified in the theString parameter and false otherwise

//

function PageNameMatches(theString) {

   return (document.title == theString);

}

if ... else

Die Anweisung if ... else ist eine Bedingungsanweisung, die die Anweisungen von statementsBlock1 ausführt, wenn die Bedingung wahr ist. In der wahlweisen else-Klausel führt sie die Anweisungen von statementsBlock2 aus, wenn die Bedingung falsch ist. Die Anweisungsblöcke können beliebige JavaScript-Anweisungen enthalten, auch weiter verschachtelte if ... else.

Syntax:


if (condition) {

   statementsBlock1

} [else {

   statementsBlock2

}]

Beispiel:


if (Message.IsEncrypted()) {

   Message.Decrypt (SecretKey);

  else {

   Message.Display();

}

return

Die Anweisung return spezifiziert den von einer Funktion auszugebenden Wert.

Syntax: return expression;

Beispiel: Die folgende einfache Funktion gibt die Wurzel ihres Arguments x aus, wobei x eine beliebige Zahl ist.


function square(x) {

   return x * x;

}

this

this ist ein spezielles Wort, das sich immer auf das aktuelle Objekt bezieht. this wird verwendet, um auf Methoden oder Eigenschaften eines Objekts aus den Methoden des Objekts heraus zuzugreifen.

Syntax: this property

Beispiel:

Ist setSize() eine Methode des Objekts document, dann bezieht sich this auf das spezifische Objekt, dessen setSize()-Methode aufgerufen wird.


function setSize(x, y) {

   this.horzSize = x;

   this.vertSize  = y;

}

Diese Methode setzt die Größe eines Objekts, wenn sie wie folgt aufgerufen wird:


document.setSize(640, 480);

var

Die Anweisung var deklariert die Variable varName und initialisiert wahlweise auf den Wert val. Der Variablenname varName kann ein beliebiger JavaScript-Bezeichner sein, und val kann ein beliebiger gültiger Ausdruck sein (auch Literale).

Syntax:


var varName [= val] [, varName [= val] [..., varName [= val]]];

Beispiel:


var numHits = 0, custName = "Scotty";

while

Die Anweisung while enthält eine Bedingung und einen Anweisungsblock. Ist die Bedingung wahr, wird der Körper ausgeführt. Anschließend wird die Bedingung erneut bewertet und der Körper wird wiederum ausgeführt (falls die Bedingung wahr ist). Dieser Prozeß wird so lange wiederholt, bis die Bedingung falsch ergibt. An diesem Punkt fährt die Programmausführung mit der nächsten Anweisung nach der Schleife fort.

Syntax:


while (condition) {

   statements

}

Beispiel: Die folgende einfache while-Schleife wird so lange wiederholt, bis sie ein Formular im aktuellen Dokument findet, dessen Name OrderForm ist, oder bis im Dokument keine Formulare mehr abzutasten sind.


var x = 0;

while ((x < document.forms.length) &&

       (document.forms[x].name != "OrderForm")) {

   x++;

}

with

Die Anweisung with definiert object als Vorgabeobjekt für die Anweisungen im Block. Hinsichtlich eventueller Referenzen auf Eigenschaften ohne explizit identifiziertes Objekt wird davon ausgegangen, daß sie zu object gehören.

Syntax:


with (object) {

   statements

}

Beispiel:


with (document) {

   write("Inside a with block, you don't need to " +

         "specify the object.");

   bgColor = "gray";

}

Beispiel eines JavaScript-Codes

Meiner Meinung nach ist es schwierig, eine völlig neue Programmiersprache zu erlernen, auch wenn man mit dem Programmieren reichlich Erfahrung hat. Aus diesem Grund habe ich in diesem Abschnitt einige Beispiele zusammengestellt, die es Ihnen vereinfachen sollen, die Codes und Funktionen von JavaScript für Ihre eigenen Web-Pages umzusetzen. Jedes Beispiel zeigt ein praktisches Konzept auf.

Einfügen der Eigenschaften eines Objekts

In Listing 25.3 habe ich eine kleine Funktion – DumpProperties() – verwendet, die alle Namen und Werte von Eigenschaften einholt. Wir betrachten diese Funktion erneut aus Sicht des inzwischen hinzugekommenen Lehrstoffs.


function DumpProperties(obj, objName) {

   var result = ""; // set the result string to blank



   for (i in obj)

      result += objName + "." + i + " = " + obj[i] + "\n";



   return result;

}

Wie alle JavaScript-Funktionen beginnt auch diese mit der Definition ihrer Variablen anhand des Schlüsselwortes var. Sie liefert auch einen Anfangswert, was immer einen guten Einstieg bietet. Der Kern der Funktion ist die Schleife for ... in, die auf alle Eigenschaften des spezifischen Objekts wiederholt wird. Für jede Eigenschaft sammelt die Schleife den Objektnamen, den Eigenschaftsnamen (der vom Schleifenzähler in der Schleife for ... in bereitgestellt wird) und den Wert der Eigenschaft. Um alle Eigenschaften einzubeziehen, greifen wir auf sie nicht nach Namen, sondern als indexiertes Array zu.

Beachten Sie, daß diese Funktion nichts ausgibt. Möchten Sie eine Ausgabe sehen, stellen Sie sie in eine Page (nicht vergessen: sie muß zwischen <SCRIPT> und </SCRIPT> stehen!), dann verwenden Sie am Ende der Page


document.writeln(DumpProperties(obj, objName));

wobei obj das uns interessierende Objekt und objName sein Name ist.

Aufbauen einer Link-Tabelle

Eventuell ist eine Möglichkeit wünschenswert, eine Liste mit allen Links einer Page automatisch zu generieren, etwa, um sie am Ende der Page in einem separaten Abschnitt anzuzeigen (siehe Abbildung 25.2). Das genau wird von DumpURL() in Listing 25.5 bewirkt. Die Ausgabe ist eine nette formatierte Numerierungsliste mit dem Hostnamen jedes darin vorkommenden Links.

Listing 25.3: DumpURL() zeigt eine Numerierungsliste aller URLs einer Page an


function DumpURL() {

   // declare the variables we'll use

   var linkCount = document.links.length;

   var result = "";



   // build our summary line

   result = "<hr>\nLink summary: this page has links to <b>" +

            linkCount + "</b> hosts<br>\n";



   result += "<ol>\n";



   // for each link in the document, print a list item with it's hostmane

   for(var i=0; i<linkCount; i++)

      result += "<li> " + document.links[i].hostname + "\n";



   // add thye closing HTML for our list

   result += "</ol><hr>\n";



   return result;

}

Abbildung 25.2: Die Funktion DumpURL() fügt eine Numerierungsliste aller Links einer Page am Ende der Page ein

siehe Abbildung

Diese Funktion beginnt mit der Deklaration der darin benutzten Variablen. In JavaScript müssen die meisten Variablen vor ihrer Verwendung deklariert werden. Das entspricht auch einer guten Programmierpraxis. Anschließend stellt man die Übersichtszeile für die Tabelle auf, indem man eine Zeichenkette voller HTML-Code der resultierenden Variablen zuweist. Sie verwenden eine for-Schleife, um durch alle Links im aktuellen Dokument zu wiederholen und fügen eine Liste pro Ergebnisvariable ein. Wenn Sie fertig sind, fügen Sie das schließende HTML für die Liste ein.

Aktualisieren der Daten in Formularfeldern

Die Vorteile der Verwendung von JavaScript zum Prüfen und Ändern von Daten in HTML-Formularen wurden bereits mehrmals erwähnt. Wir betrachten nun ein Beispiel, bei dem der Wert eines Textfeldes auf der Grundlage der Auswahl des Benutzers aus mehreren Schaltflächen dynamisch aktualisiert wird.

Damit das alles funktioniert, brauchen wir zwei Teile: Ein einfaches Stückchen JavaScript, das die Werteigenschaft eines Objekts auf das aktualisiert, was immer einfließt. Das sieht so aus:


function change(input, newValue) {

   input.value = newValue;

}

Dann müssen wir die Methode onClick für jede einzubeziehende Schaltfläche ändern, damit sie die Funktion change() aufruft. Hier als Beispiel die Definition einer Schaltfläche:


<input type=button value="Mac"

       onClick="change(this.form.display, 'Macintosh')">

Wird die Schaltfläche angeklickt, ruft JavaScript die Methode onClick auf, was auf die Funktion zeigt. Das Objekt this.form.display zeigt auf ein Textfeld namens display. this bezieht sich auf das aktive Dokument, form bezieht sich auf das Formular im aktiven Dokument und display bezieht sich auf das Formularfeld display.

Selbstverständlich setzt das voraus, daß Sie ein Eingabedings für das Formular namens display haben!

Validieren der Daten in Formularfeldern

Holt man Daten von Benutzern in Formularen ein, muß man in der Regel prüfen, ob die Daten korrekt und/oder vollständig sind, bevor Mail versendet wird, die Daten in einer Datenbank erfaßt werden oder sonst etwas damit geschehen soll. Ohne JavaScript müssen Sie die Daten mit POST einholen und einem CGI-Skript auf dem Server die Entscheidung überlassen, ob alle Felder richtig ausgefüllt wurden. Statt dessen gibt es aber einen schlaueren Weg. Sie schreiben JavaScript-Funktionen, die auf dem Client die Daten im Formular prüfen. Auf diese Weise können sie davon ausgehen, daß die eingeholten Daten korrekt sind.

Als Beispiel nehmen wir an, daß der Benutzer in unserem Formular die zwei Felder zipcode (Postleitzahl) und areacode (Vorwahl) ausfüllt. Weiterhin hat unser Formular Felder, die der Benutzer wahlweise ausfüllen kann. Erstens brauchen wir eine Funktion, die wahr ausgibt, wenn etwas im Feld steht, und falsch, wenn das Feld leer ist:


function isFilled(input) {

   return (input.value.length != 0);

}

Für jedes Feld, das der Benutzer ausfüllen soll, hängen Sie den Ereignishandler onBlur daran. onBlur wird ausgelöst, wenn der Benutzer das spezifizierte Feld verläßt. Und so sollten unsere Buttons aussehen:


<input name="zipcode" value=""

       onBlur="if(!isFilled(form.zipcode)) {

                  alert('You must put your zipcode here!');

                  form.zipcode.focus();

               }">

Verläßt der Benutzer das Feld zipcode (Postleitzahl), wird der mit dem Ereignis onBlur verbundene Code aufgerufen. Dieser Code prüft das Feld auf Vollständigkeit und nervt den Benutzer so lange, bis dieser schließlich die Postleitzahl eingegeben hat.

Selbstverständlich kann man auch ein feineres Validierungsschema umsetzen. Eine Möglichkeit, ohne Holzhammermethode das gleiche Ergebnis zu erreichen, wäre das Anhängen eines Java-Skripts an die Submit-Schaltfläche des Formulars:


<script langage="JavaScript">

<!--

function areYouSure() {

   return confirm("Are you sure you want to submit " +

                  "these answers?");

}

// -->

</script>

...

<form method=post action="..." onSubmit="return areYouSure();">

Ein pseudowissenschaftlicher Rechner

Fragen Sie einen Ingenieur in einem gewissen Alter, welchen Rechner er oder sie in der Schule benutzt hat, lautet die Antwort höchstwahrscheinlich »Hewlett Packard«. HP-Taschenrechner unterscheiden sich irgendwie vom Rest der Gattung. Um Berechnungen auszuführen, kann man die Reverse Polish Notation oder RPN anwenden.

Abbildung 25.3: Die Felder auf dieser Seite sind mit JavaScript-Funktionen verknüpft wobei der Anwender alle Felder ausfüllen muß

siehe Abbildung

Bei einem normalen Taschenrechner sitzt der Operator zwischen den Operanden. Um 3 und 7 zu addieren, drückt man die 3, die +-Taste und die 7 und schließlich =, um das Ergebnis zu erhalten. Bei einem RPN-Rechner gibt man den Operator nach beiden Operanden ein. Um die gleiche Rechnung wie oben auf einem solchen Rechner durchzuführen, müssen Sie die 3 und dann ENTER drücken (wodurch der erste Operand in den internen Stapel gestellt wird). Dann drücken Sie die 7 und das Pluszeichen, wonach Sie die Lösung erhalten. Diese seltsame Rechenmethode ist mehr als gewöhnungsbedürftig, beschleunigt aber komplexe Berechnungen, da Zwischenergebnisse im Stapel gespeichert werden.

Hier ein RPN-Beispiel. Um


((1024 * 768) / 3.14159)2

zu berechnen, würden Sie


1024, Enter, 768, *, 3.14159, /, x2

eingeben, und erhielten die korrekte Antwort: 6.266475 x 1010 bzw. ca. 6,3 Milliarden.

Für JavaScript bietet Netscape einen RPN-Taschenrechner. Wir sehen uns jetzt an, wie er funktioniert. Listing 25.2 zeigt das JavaScript selbst auf (eigentlich handelt es sich um die gleiche Datei, die ich zur besseren Übersicht aufgeteilt habe). Abbildung 25.4 zeigt den Taschenrechner im Navigator.

Abbildung 25.4: Der Navigator zeigt den RPN-Rechner als Tabelle mit Druckknöpfen, dem Akkumulator (Antwort) und dem Stapel an

siehe Abbildung

Die HTML-Seite

Listing 25.6 enthält den HTML-Code unserer Berechnungsseite. Zur genauen Ausrichtung wurden alle Buttons in einer Tabelle gruppiert. Der Akkumulator (wo die Lösung angezeigt wird) und der Stapel (wo die Operanden gespeichert werden) befinden sich oben.

Listing 25.4: HTML-Definition für das Beispiel mit dem RPN-Rechner


<form method="post">

<table border=1 align=center>

   <tr align=center>

   <td colspan=4>



      <table border=0>

         <tr>

            <td align=right>Stack:</td>

            <td><input name="stack" value="0"></td>

         </tr>

         <tr>

            <td align=right>Acc:</td>

            <td><input name="display" value="0"></td>

         </tr>

      </table>



   </td>

   </tr>



   <tr align=center>

      <td>

         <input type="button" value=" 7 "

            onClick="addChar(this.form.display, '7')">

      </td>

      <td>

         <input type="button" value=" 8 "

            onClick="addChar(this.form.display, '8')">

      </td>

      <td>

         <input type="button" value=" 9 "

            onClick="addChar(this.form.display, '9')">

      </td>

      <td>

         <input type="button" value=" / "

            onClick="divide(this.form)">

      </td>

   </tr>



   <tr align=center>

      <td>

         <input type="button" value=" 4 "

            onClick="addChar(this.form.display, '4')">

      </td>

      <td>

         <input type="button" value=" 5 "

            onClick="addChar(this.form.display, '5')">

      </td>

      <td>

         <input type="button" value=" 6 "

            onClick="addChar(this.form.display, '6')">

      </td>

      <td>

         <input type="button" value=" * "

            onClick="multiply(this.form)">

      </td>

   </tr>



   <tr align=center>

      <td>

         <input type="button" value=" 1 "

            onClick="addChar(this.form.display, '1')">

      </td>

      <td>

         <input type="button" value=" 2 "

            onClick="addChar(this.form.display, '2')">

      </td>

      <td>

         <input type="button" value=" 3 "

            onClick="addChar(this.form.display, '3')">

      </td>

      <td>

         <input type="button" value=" – "

            onClick="subtract(this.form)">

      </td>

   </tr>



   <tr align=center>

      <td>

         <input type="button" value=" 0 "

            onClick="addChar(this.form.display, '0')"> 

      </td>

      <td>

         <input type="button" value=" . "

            onClick="addChar(this.form.display, '.')"> 

      </td>

      <td>

         <input type="button" value="+/-"

            onClick="changeSign(this.form.display)">

      </td>

      <td>

         <input type="button" value=" + "

            onClick="add(this.form)">

      </td>

   </tr>



   <tr align=center>

      <td colspan="2">

         <input type="button" value=" Enter " name="enter"

            onClick="pushStack(this.form)">

      </td>

      <td>

         <input type="button" value=" C "

            onClick="this.form.display.value = 0 ">

      </td>

      <td>

         <input type="button" value=" <- "

            onClick="deleteChar(this.form.display)">

      </td>

   </tr>



</table>

</form>

Beachten Sie, daß es zu jedem Button einen onClick-Ereignishandler gibt. Die Ziffern 0 bis 9 rufen die JavaScript-Funktion addChar() auf. Die Editierbuttons (C für Clear und <- für Rückschritt) rufen Funktionen auf, die den Wert des Akkumulators ändern. Der ENTER-Button speichert den aktuellen Wert im Stapel, und der Button +/- ändert das Zeichen des Akkumulators.

Selbstverständlich rufen auch die Operatoren ihrerseits JavaScript-Funktionen auf, z. B. wird die Funktion Multiply() mit * aufgerufen. Die Definitionen sind an sich keine Funktionen. Sie beinhalten Funktionsaufrufe (wie bei Zifferntasten) oder einzelne Anweisungen (wie die Clear-Taste).

Das JavaScript

Für alle onClick-Ereignisse im obigen Abschnitt sind JavaScript-Routinen erforderlich, um sie aufzurufen. Listing 25.7 enthält die JavaScript-Funktionen, mit denen der Rechner eigentlich implementiert wird.

Listing 25.5: JavaScript-Code für Code fuer PRN-Rechnerden RPN-Rechner


<script language="JavaScript">

<!-- hide from non-JavaScript browsers



// keep track of whether we just computed display.value

//

var computed = false



// push the the accumulator (display) onto the stack

//

function pushStack(form) {

   form.stack.value   = form.display.value;

   form.display.value = 0;

}



// add a new character to the display

//

function addChar(input, character) {

   // auto-push the stack if the last value was computed

   //

   if(computed) {

      pushStack(input.form);

      computed = false;

   }



   // make sure input.value is a string

   //

   if(input.value == null || input.value == "0")

      input.value = character;

   else

      input.value += character;

}

function deleteChar(input) {

   input.value = input.value.substring(0, 

                 input.value.length – 1);

}



function add(form) {

   form.display.value = parseFloat(form.stack.value)

                      + parseFloat(form.display.value);

   computed = true;

}



function subtract(form) {

   form.display.value = form.stack.value 

                      – form.display.value;

   computed = true;

}



function multiply(form) {

   form.display.value = form.stack.value 

                      * form.display.value;

   computed = true;

}



function divide(form) {

   var divisor = parseFloat(form.display.value);



   if(divisor == 0) {

      alert("Don't divide by zero, pal...");

      return;

   }



   form.display.value = form.stack.value / divisor;

   computed = true;

}



function changeSign(input) {

   if(input.value.substring(0, 1) == "-")

      input.value = input.value.substring(1, input.value.length)

   else

      input.value = "-" + input.value

}



// done hiding from old browsers -->

</script>

Sie sehen am obigen HTML-Listing, daß jeder Button mit einer bestimmten Funktion verbunden ist. Die Funktionen addChar() und deleteChar() ändern unmittelbar den Inhalt des Formularfeldes display – des Akkumulators –, ebenso wie die Operatoren add(), subtract(), multiply() und divide().

Dieser Code zeigt ein paar feine, aber beträchtliche Vorteile von JavaScript auf, die mit CGI-Skripten schwer oder überhaupt nicht realisiert werden können. Beachten Sie, daß die Funktion divide() auf Division mit Nullen prüft und eine Warnmeldung ausgibt.

Ganz wichtig ist bei diesem Beispiel, daß die gesamte Verarbeitung beim Client erfolgt. Das wäre eine gute Anwendung für eine interaktive Steuererklärung, bei der alle Berechnungen im Browser erfolgen und nur die vollständigen geprüften Daten mit POST an den Server gesendet werden.

⌐ 1997 Que
Ein Imprint des Markt&Technik Buch- und Software- Verlag GmbH
Elektronische Fassung des Titels: Special Edition: Internet, ISBN: 3-8272-1003-8