Variablen

In etwas abgeänderter, erweiterter Weise kann das Skript auch so geschrieben werden, was dasselbe bewirkt:

1) <html>
2) <script>
3) v="Hallo";
4) alert(v);
5) </script>
6) </html>


Hier ist die Zeile 3 v="Hallo" eingefügt. In Zeile 4 steht innerhalb der Klammer nur v. Das kleine v ist hier eine frei gewählte Benennung, eine sogen. Variable. Hinter dem Gleichheitszeichen folgt die in Anführungszeichen stehende Zeichenfolge Hallo, ein sogen. String. Die Anweisung in Zeile 3 bewirkt, daß der Computer die in Anführungszeichen gesetzte Zeichenfolge Hallo in der Variablen v speichert. Beachten Sie hierbei das Gleichheitszeichen, das hier im Sinne einer Zuweisung gebraucht wird. Ein JavaScript besteht zu einem großen Teil aus solchen mit einem Gleichheitszeichen ausgedrückten Zuweisungen, wobei jeweils eine Zeichenfolge, ein Wert oder ein Objekt einer Variablen zugewiesen wird. In diesem Beispiel wird die Variable mit der frei gewählten Benennung v bezeichnet. Anstatt v könnte hier auch eine andere Benennung stehen, etwa S oder Z, oder irgendein Wort wie z.B. Zeichen. Wichtig ist dabei, daß kein reserviertes Wort der Programmiersprache JavaScript gewählt wird, z.B. string, das die festgelegte Benennung für das Stringobjekt ist . Außerdem sollte für Sie selbst die Benennung merkfähig sein, um in einem längeren Programm nicht die Übersicht zu verlieren und um nicht etwa Benennungen doppelt zu vergeben. Im weiteren Programmverlauf beinhaltet v also immer die dieser Variablen zugewiesene Zeichenfolge "Hallo". So können auch sehr lange Zeichenfolgen mit einer kurzen, frei gewählten Benennung, eben einer Variablen, bezeichnet werden. Im weiteren Verlauf kann das Programm auf diese Variable v wieder zugreifen und etwa den in ihr gespeicherten Wert oder wie hier den String Hallo verändern, so daß die Variable zu einer echten Variablen wird, während sie in diesem Beispiel unverändert bleibt.

Was geschieht in diesem Beispiel innerhalb des Computers? Die Zeichenfolge Hallo wird als Stringobjekt der Variablen v zugewiesen. Der Computer speichert dann in einem Speicherplatz mit dem Namen v diese Zeichenfolge. In der nächsten Zeile wird der Computer angewiesen mit der Methode alert auf diesen Speicherplatz v zuzugreifen, den in v gespeicherten Wert auszulesen und das Ergebnis in einem Meldefenster anzuzeigen.

Wie in anderen Programmiersprachen werden in JavaScript also sowohl feststehende Benennungen als auch frei gewählte Benennungen verwendet. Feststehende Benennungen werden für eine Anzahl von Objekten gebraucht, die im einzelnen noch erläutert werden, vor allem aber für die durchzuführenden Methoden oder Funktionen, die an einem Objekt (manchmal auch unabhängig von einem Objekt) ausgeführt werden. Solche Methoden besitzen ausschließlich feste Benennungen.

Für Variable verwenden Sie grundsätzlich nur frei gewählte Benennungen, denen Sie irgendwelche Werte oder Daten zuweisen. Das können Zahlenwerte, eine Zeichenfolge wie im vorigen Beispiel, Texte usw. sein, die im weiteren Programm entweder verändert werden oder auch unverändert bleiben können. Die Veränderung kann auf zweifache Weise geschehen:

1. Der in der Variablen gespeicherte Wert, z.B. eine Zeichenkette, ein String, wird verändert. Zum Beispiel aus "sehr schön" wird "Sehr Schön". Dann muß der veränderte String in einer neuen Variablen, z.B. in va, gespeichert werden. Ein Beispiel:

v="datenbanken";
va=v.toUpperCase();
document.write(va);

In Zeile 1 wird die Zeichenfolge datenbanken in v gespeichert. In Zeile 2 wird der in v gespeicherte Wert mit der Methode toUpperCase() in Großbuchstaben verwandelt und in der neuen Variablen va gespeichert. In Zeile 3 wird va ausgeschrieben, d.h. auf dem Bildschirm erscheint DATENBANKEN.

2. Der Variablen werden im Programmverlauf verschiedene Werte zugewiesen. Zum Beispiel wird aus einer Datenbankergebnisliste zu jedem Einzeltitel in einer Variablen das Jahr der Veröffentlichung gespeichert und dieses später wieder abgefragt. Diese Zuweisung verschiedener Werte zu einer Variablen wird in den Beispielen von Teil II ausführlich erläutert.

Objekte. Methoden. Eigenschaften

Ein weiteres kleines Programm kann etwa so aussehen:

1) <html>
2) <script>
3) v="Hallo";
4) document.write (v);
5) </script>
6) </html>

Hier wurde Zeile 4 des vorigen Beispiels in alert (v); in document.write (v); abgeändert. document ist die feste Benennung für das im Browserfenster geöffnete aktuelle Dokument, eines von vielen in JavaScript vordefinierten Objekten mit feststehenden Benennungen. Objekte sind einfach Gegenstände, die mit JavaScript bearbeitet werden können. Das können Zeichenfolgen, sogen. Stringobjekte, Frameabschnitte, Formularelemente, URL-Adressen, mathematische Objekte usw. sein.

Das hinter dem Punkt stehende write ist eine der vielen Methoden, eine Funktion, die verursacht, daß der in Klammern angegebene Text oder der in der Variablen v gespeicherte Text im geöffneten Dokument ausgeschrieben wird. Wenn Sie das kleine Programm starten, so erscheint im Browserfenster das Dokument mit dem ausgeschriebenen Hallo. write ist eine festgelegte Methoden-Benennung und immer nur mit dem Objekt document verbunden. Die Anweisung document.write ist ziemlich häufig und taucht bei allen in diesem Buch besprochenen Beispielen auf. Methoden sind fast immer an ein bestimmtes Objekt gebunden und werden hinter einem Punkt an das zugehörige Objekt angefügt. Einige Methoden des Objektes window werden ohne vorhergehende Objektbenennung geschrieben. Dazu gehört das oben benutzte alert.

Objekthierarchie

Objekte von JavaScript sind wie in einer hierarchischen Struktur einander über- und untergeordnet. So ist das Objekt document dem Objekt window, das an der obersten Stelle dieser Struktur steht, untergeordnet. Diese Reihenfolge ist bei allen Anweisungen immer zu beachten. So ist das Formularobjekt forms dem Objekt document untergeordnet, und ein einzelnes Formularfeld, z.B. ein Texteingabefeld ist eine Objekteigenschaft von forms, die mit elements benannt wird.

Andererseits ist es nicht immer nötig, das oberste Objekt window anzugeben. So müßte die oben genannte Anweisung streng genommen window.document.write geschrieben werden. Es ist aber üblich, hier die Objektbenennung window einfach wegzulassen.

Die für ein bestimmtes Objekt möglichen Bearbeitungsmethoden oder Funktionen sowie Eigenschaften werden hinter der Objektbenennung hinter einem Punkt angefügt. Benennungen von Objekten können entweder festgelegt sein, wie etwa die Objekte window, document oder location, oder frei gewählt werden. Häufig wird ein Objekt mit einer Methode bearbeitet und das Ergebnis einer Variablen mit freier Benennung zugewiesen. In den folgenden Programmbeispielen werden besonders häufig String- und Array-Objekte verwendet. So ist die in Anführungszeichen gesetzte Zeichenkette hallo, bereits ein Stringobjekt und wird, ohne daß die feste Objektbezeichnung String verwendet wird, in einer freien Variablenbezeichnung gespeichert. Damit ist das Objekt bereits erzeugt, wie es in der Fachsprache heißt. Im weiteren Verlauf kann das Stringobjekt mit verschiedenen Methoden verändert und selbstgewählten Variablenbezeichnungen zugewiesen werden.

Beim Arrayobjekt ist es ähnlich. Die Methode split auf einen String angewandt erzeugt bereits ein Array, ohne daß der Objektname Array verwendet wird. Das Array wird in einer beliebigen Variablenbezeichnung gespeichert und kann mit weiteren Methoden weiterbearbeitet werden, z.B. mit der Sort-Methode.


Beispiel:

<script>
1) T="AB BC BE AF GH BB";
2) TA=T.split(" ");
3) TB=TA.sort();
4) document.write(TB);
</script>

In Zeile 1 wird die Zeichenkette AB BC DE EF GH IJ in Anführungszeichen gesetzt, womit ein Stringobjekt erzeugt wird, und in der Variablen T gespeichert.
In Zeile 2 wird mit der Splitmethode dieser String in einzelne Teile zerlegt, d.h. ein Array wird erzeugt. In der Klammer hinter split ist das Trennungszeichen angegeben, in diesem Fall eine Leerstelle, ausgedrückt durch eine Leerstelle zwischen zwei Anführungszeichen. Das Ergebnis wird in der neuen Variablen TA gespeichert.
In Zeile 3 wird mit der Sortmethode das Array alphabetisch geordnet. Das Ergebnis in TB gespeichert.
In Zeile 4 wird das Ergebnis ausgeschrieben.
Im Browser wird AB,AF,BB,BC,BE,GH angezeigt. Die einzelnen Teile eines Arrays werden durch Kommata voneinander getrennt.

Über die Erzeugung eines Arrays mit einem Konstruktor (Objektname + Schlüsselwort new) siehe S.

Neben Methoden gibt es auch noch Eigenschaften von Objekten, die ebenfalls nach einem Punkt an das Objekt angehängt werden. Auf die Methodenbezeichnung folgt jeweils in Klammern die Parameterangabe, d.h. die zu bearbeitenden Werte. Eigenschaften sind von Methoden nicht immer leicht zu unterscheiden, außer formal dadurch, daß Eigenschaften keine Parameterwerte in Klammern aufweisen. Eigenschaften können herausgelesen und vielfach auch verändert werden.

Beim Programmieren in JavaScript wird ein gegebenes Objekt mit einer mit diesem Objekt verbundenen Methode oder Eigenschaft bearbeitet, verändert usw. und das Ergebnis in einer selbstgewählten Variablenbenennung gespeichert. Das Objekt entsteht entweder automatisch wie z.B. vielfach beim String- und Arrayobjekt, oder es wird durch einen Konstruktor erzeugt mit dem Schlüsselwort new, was häufig bei Arrays und sogen. regulären Ausdrücken (regular expressions) geschieht.

Objekte sind im Grunde nichts anderes als Variablen, auf die bestimmte Prozeduren oder Methoden angewandt werden. Variablen können zu Objekten werden. So wird eine Zeichenkette in einer Variablen gespeichert. Diese Variable wiederum steht dann für ein Stringobjekt, an dem weitere Methoden und damit Änderungen durchgeführt und das Ergebnis in einer neuen Variablen gespeichert wird, usw. Es gibt aber auch Variablen, auf die keine bestimmten Prozeduren angewandt werden können. So ist der bei einem String mit der Index-Methode ermittelte Wert eine reine Variable, ein Zahlenwert, mit dem wohl weiter verfahren, z.B. gerechnet, auf die aber keine Methode angewandt werden kann.

Variablen sind alle Benennungen in einem Skript, denen veränderliche Werte zugewiesen werden. Insofern sind auch Benennungen von Objekten Variablen. So kann das mit einer Benennung bezeichnete Stringobjekt durch Replace-Funktionen verändert werden, d.h. der in einer Benennung gespeicherte Wert kann verändert und die Veränderung in einer neuen Benennung = Variablen gespeichert werden.

Funktionen

In den vorangehenden Beispielen wurde das JavaScript automatisch beim Starten des Browsers ausgeführt. In den kleinen Skripten befinden sich zwischen den beiden Tags <script> und </script> jeweils die einzelnen Befehle. Ein solches JavaScript ohne eine Einbettung in eine Funktion kann auch aus sehr vielen Befehlen oder Anweisungen bestehen, die einfach mit dem Laden der Datei automatisch ausgeführt werden. Das ist in der Praxis aber eher die Ausnahme. In den meisten Fällen wird das Ausführen eines Programms oder Programmteils von einer bestimmten Bedingung abhängig gemacht, je nachdem ob man diesen oder jenen Schalter oder Hyperlinkverweis anklickt z.B., oder ob innerhalb einer Folge von Anweisungen eine Bedingung enthalten ist, die zur Ausführung des Teilprogramms führt. In allen diesen Fällen muß das auszuführende Skript in einer Funktion mit entsprechender Funktionsbezeichnung eingebettet sein, damit das Skript aufgerufen und ausgeführt wird.

Ein JavaScript kann aus einer oder auch aus vielen Funktionen bestehen. Die auszuführenden Programmanweisungen werden mit function eingeleitet und erhalten einen Namen, der nach einer Leerstelle folgt als frei gewählte Bezeichnung mit folgenden Klammerzeichen (). Die Programmanweisungen werden außerdem durch die geschweiften Klammerzeichen { und } eingeleitet und abgeschlossen, so daß das oben angegebene Skript innerhalb einer Funktion in folgender Weise geschrieben wird:

1) <html>
2) <script>
3) function hallo()
4) {
5) v="Hallo";
6) document.write (v);
7) }
8) </script>
9) </html>

Eventhandler

Wenn Sie eine Datei mit diesen Zeilen als Quellcode starten, geschieht aber zunächst gar nichts. Es fehlt noch eine Anweisung, die veranlaßt, daß diese Funktion ausgeführt wird. Eine solche Anweisung, wenn sie sich außerhalb des Skriptbereichs, aber innerhalb des HTML-Codes befindet, wird auch als Event-Handler bezeichnet. Soll die Programmfunktion in diesem Beispiel zusammen mit dem Browser gestartet werden, so wird dies innerhalb der Bodytags des HTML-Codes so angegeben:

<body onload="hallo()">

Die Anweisung onload ist einer der vielen Eventhandler von JavaScript. Hinter dem Ist-Zeichen folgt der Name der aufzurufenden Funktion in Anführungszeichen und mit Klammern, also hallo().

Die ganze Programmdatei in vollständiger Schreibweise:

1) <html>
2) <head>
3) <meta http-equiv="Content-Type"
4) content="text/html; charset=iso-8859-1">
5) <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
6) <title></title>
7) </head>

8) <body onload="hallo()">
9) <script language="JavaScript"><!--

10) function hallo()
11) {
12) v="Hallo";
13) document.write (v);
14) }
15) // --></script>
16) </body>
17) </html>

So sieht der vollständige Quellcode aus, wenn man den Script-Code und den HTML-Code in den Front Page Express schreibt und das Ganze in einer Datei speichert. Man erkennt die nicht unbedingt notwendigen und sonst von mir weggelassenen Ergänzungen zwischen <head> und </head>, den Zusatz language="JavaScript" und die Kommentarzeichen <!-- und // --> für Browser, die JavaScript nicht lesen können.

Das String-Objekt. Zeichenketten bearbeiten

Im vorigen Beispiel wurde eine Zeichenkette, ein sogen. String, bearbeitet. Das Stringobjekt ist eines der fundamentalen Objekte in JavaScript, das besonders viele Methoden besitzt. In den in diesem Buch dargestellten Beispielen spielt es eine hervorragende Rolle. Immer wenn Texte oder Listen zu bearbeiten sind, kommt das String-Objekt vorrangig zum Einsatz. Anstatt des sehr kurzen Strings Hallo, können Strings auch sehr lang sein. Es können ganze Sätze, ja ganze Texte und Listen von Hunderten von Seiten als String behandelt werden. Das Stringobjekt wird automatisch dadurch erzeugt, daß die zu bearbeitende Zeichenkette in Anführungszeichen gesetzt und einer frei gewählten Variablen zugewiesen wird. So z.B. in dem folgenden Beispiel:

<html>
<script>
S="Das ist aber sehr schön";
alert (S);
</script>
</html>

Wenn Sie dieses Skript als Datei speichern und danach öffnen, so wird in dem Alert-Fenster der String S angezeigt:

Das ist aber sehr schön

Sie können längere Sätze oder ganze Texte nur als String verwenden, wenn diese keinen manuellen Zeilenumbruch aufweisen. Sobald Sie einen solchen verwenden, z.B. in den Editor schreiben:

document.write ("Mit print kann man
schreiben und rechnen:")

erhalten Sie die in Abb. gezeigte Fehlermeldung:

Abb. 3 Fehlermeldung im Debugger des Internet Explorer

Im Netscape Communicator wird der Fehler etwas genauer angezeigt:

JavaScript Error:
file:/D|/EIGENE~1/JAVASC~1/PRINT.HTM, line 4:

unterminated string literal.

document.write ("Mit print kann man
................^

Methoden des Stringobjektes.
Substring ( )

Mit dieser Methode wird aus einem gegebenen String ein Teilstück ermittelt. Dieses Teilstück wird in Klammern mit zwei Positionen angegeben: die Position des ersten Zeichens des Teilstücks und die Position, die auf das letzte Zeichen des Teilstücks folgt.

Beispiel:

<script>
T="Das ist aber sehr schön";
TS=T.substring(0,4);
alert(TS);
</script>

Das Teilstück beginnt mit der Position des Anfangszeichens D des Strings T und endet vor der Position 4 des Strings. Position 4 ist hier die Leerstelle hinter Das. Als Teilstück wird mit alert Das angezeigt.

substr() stellt eine Variante der vorigen Methode dar. Hierbei gibt der zweite Wert in der Klammer die Länge des Teilstücks an, dessen Anfangsposition mit dem ersten Wert angegeben wird.

Slice ( )

Ist eine ähnliche Methode wie die vorigen, nur daß hier aus einer Zeichenkette ein Teilstück ab einer angegebenen Position herausgeschnitten und in einer Variablen gespeichert wird. Wird in der Klammer nur der Wert dieser Position angegeben, so wird das Teilstück von dieser Position an bis zum Ende herausgeschnitten. Wird nach einem Komma ein zweiter Wert angegeben, so gibt dieser die Position des letzten auszuschneidenden Zeichens an. Im Unterschied dazu gibt bei substring der zweite Wert die auf das Ende des Teilstücks folgende Position an.

<script>
T="Das ist aber sehr schön";
TS=T.slice(4);
alert(TS);
</script>

Mit alert wird der String ist aber sehr schön angezeigt.

Replace ( )

Eine der wichtigsten Methoden des Stringobjekts ist die Methode replace. Auch bei dieser Methode folgt eine Klammer. In dieser wird die Zeichenfolge (String), die ersetzt werden soll, und nach einem Komma die Zeichenfolge, die diese ersetzt, angegeben.

1) <html>
2) <script>
3) S="Das ist aber sehr schön und sehr gut";
4) Sa=S.replace("sehr", "nicht");
5) alert (Sa);
6) </script>
7) </html>

Der zu verändernde String wird der Vaiablen S zugewiesen (3), der geänderte String der Variablen Sa (4). In Klammern der zu ersetzende und der ersetzende String. Das Wort sehr wird durch nicht ersetzt. Schließlich wird der geänderte Satz durch die Alert-Methode angezeigt (5).

Sollen Zeichen, Wörter oder Teilstrings, so oft sie in einem Satz oder Text vorkommen, ersetzt werden, z.B. in dem Satz Das ist aber sehr schön und sehr gut das sehr überall durch nicht ersetzt werden, so muß Zeile 3 so geschrieben werden:

Sa=S.replace(/sehr/g, "nicht");

Die Schrägstriche bezeichnen einen sogen. regulären Ausdruck. Ein regulärer Ausdruck ist ein Suchmuster, mit dessen Hilfe Zeichenfolgen in einem Stringobjekt wie hier mit der Replace-Methode durch eine andere Zeichenfolge ersetzt werden. Das auf den Schrägstrich folgende g bedeutet, daß der reguläre Ausdruck global, also überall durch den in Anführungszeichen stehenden String ersetzt werden soll. Häufige Anwendungen des regulären Ausdrucks finden auch bei der Match- und Search-Methode statt (s.u.).
Die Suchmethoden indexOf, search und match

Es gibt eine Reihe von Suchmethoden, von denen hier die wichtigsten vorgestellt werden. Die beiden Methoden indexOf und search werden hierbei in ähnlicher Weise angewandt, während sich die Methode Match wesentlich davon unterscheidet.

Folgendes Beispiel zeigt die Anwendung von indexOf ( ):

1) <html>
2) <script>
3) S="Das ist aber sehr schön und sehr gut";
4) P=S.indexOf("sehr");
5) alert (P);
6) </script>
7) </html>

Wenn Sie diese Datei starten, zeigt das Alertfenster 13 an. 13 ist die Position des ersten Zeichens von sehr innerhalb des Strings S gespeichert in P. Das erste Zeichen des gesamten Strings hat die Position 0. Ein Leerraum zwischen den Wörtern wird als 1 Zeichen gezählt.

Bei der IndexOf-Methode kann man außerdem eine Zeichenfolge ab einer bestimmten Position suchen. Dies ist eine besondere Erweiterungsmöglichkeit dieser Methode, die bei der Search-Methode nicht vorhanden ist. Die maßgebliche Position wird nach einem Komma in der Klammer angegeben (s. Zeile 5):

1) <html>
2) <script>
3) S="Das ist aber sehr schön und sehr gut";
4) P1=S.indexOf("sehr");
5) P2=P2=S.indexOf("sehr",P1+1);
6) alert (P2);
7) </script>
8) </html>

P1 ist die Position des ersten Treffers, wie im vorigen Beispiel =13. P2 ist die Position des 2. Treffers, gesucht von der Position des 1. Treffers aus: P1+1. Die 1 muß hinzu addiert werden, sonst würde wieder nur der erste Treffer an der Position P1 gefunden. Die Position des 2. Treffers ist 28.

Das folgende Beispiel zeigt die Anwendung von search. Auch hierbei wird wie bei der IndexOf-Methode nach der Position des ersten Zeichens eines Strings gesucht.

1) <html>
2) <script>
3) S="Das ist aber sehr schön und sehr gut";
4) P=S.search("sehr");
5) alert (P);
6) </script>
7) </html>

Durch alert(P) wird der Wert P angezeigt, der die erste Position der Zeichenfolge sehr im String S angibt, in diesem Fall ist dies wieder 13. Mit search lassen sich immer nur die ersten Position von mehrfach in einem String enthaltenen Zeichenfolgen suchen.

Suchen mit regulären Ausdrücken

search()

Diese Methode bietet ebenso wie die weiter unten dargestellte Match-Methode die Möglichkeit mit regulären Ausdrücken zu suchen. Ein Beispiel:

1) <html>
2) <script>
3) S="Das ist aber sehr schön und sehr gut";
4) P=S.search(/se\w+/);
5) alert (P);
6) </script>
7) </html>

In der Klammer ist innerhalb von Schrägstrichen / das zu suchende Suchmuster angegeben /se\w+/. Die Buchstaben se sind die zu suchenden Zeichen, gefolgt von einem oder mehreren beliebigen Zeichen, ausgedrückt durch \w+. Beliebige Ziffern, Buchstaben, Leerstellen oder Umbrüche werden mit dem Backlash \ eingeleitet und dahinter die entsprechende Bezeichung für Buchstaben, Ziffern, Leerstellen, Zeilenumbrüche, Neue Zeilen usw.

*match()

Ein Beispiel:

1) <html>
2) <script>
3) S="Das ist aber sehr schön und sehr gut";
4) Treffer=S.match(/s\w+/g);
5) alert (Treffer);
6) </script>
7) </html>

Dieses Beispiel zeigt die Verwendung der Methode match, angewandt auf das in der Variablen S gespeicherte Stringobjekt. Auch hier wird die Variable wiederum zum Objekt. In der Klammer wurde zu dem regulären Ausdruck noch ein g hinzugefügt, was bedeutet, daß der reguläre Ausdruck global, d.h. im gesamten Text gesucht werden soll. Das Ergebnis wird in Treffer gespeichert und mit der Alertmethode angezeigt. In diesem Fall wird als Ergebnis sehr, sehr angezeigt. Beachten Sie, daß das Ergebnis ein sogen. Array ist, eine Folge von gleichartigen Elementen. Mehr darüber siehe weiter unten.

Fortsetzung

Zurück