Wird der reguläre Ausdruck mit /s\w+/g angegeben, so erscheint als Ergebnis:

Abb. 4

In diesem Fall werden alle Zeichenfolgen gesucht, die mit s beginnen und auf das ein oder mehrere Buchstaben bis zu einem Leerraum folgen. Das Wort schön wird nur bis zu den Buchstaben sch gelesen, weil der Umlaut ö ohne Umwandlung so nicht lesbar ist. Die einzelnen Treffer werden, wie bei einem Array üblich, durch Kommata getrennt.

Mit der Match-Methode kann auch ein längerer Text in seine einzelnen Wörter zerlegt werden. Das erreicht man, indem man den regulären Ausdruck (/\w+/g verwendet. Als Ergebnis wird angezeigt:

Abb. 5

Hier ist der ganze Satz in Form eines Arrays angezeigt, die einzelnen Wörter durch Kommata getrennt. Mit dieser Methode lassen sich auch bestimmte Folgen von Zahlen herauslesen.

Die wichtigsten Sonderzeichen

Reguläre Ausdrücke

Dies sind Suchmuster, mit denen Texte oder Datenbankinhalte sehr effektiv durchsucht werden können. Wollen wir z.B. in einem Text alle mit un beginnenden Wörter suchen, so wäre der entsprechende reguläre Ausdruck dafür

/\bun\w+\s/g

oder:

new RegExp("\\bun\\w+\\s","g").

Bei der ersten Schreibweise werden die zu suchenden Buchstaben un mit den speziellen Bezeichnungen \b für Wortanfang, \w+ für mehrere beliebige alphanumerische Zeichen und \s für eine Leerstelle zwischen Schrägstriche gesetzt, dahinter g als Kennzeichen für eine globale Suche. \bun\w+\s sucht also zunächst un am Wortanfang, dann die weiteren folgenden alphanumerischen Zeichen und schließlich eine Leerstelle, die das Wort im Text abschließt. Diese Schreibweise kann man direkt bei den Methoden match, search und replace anwenden, also z.B.

Tr=T.match(/\bun\w+\s/g);

Der reguläre Ausdruck wird hier als Suchmuster in dem Text T gesucht. Die Treffer werden als Array in Tr gespeichert.

Bei der zweiten Schreibweise muß der über das Schlüsselwort new erzeugte reguläre Ausdruck zunächst in einer Variablen gespeichert werden:

A=new RegExp("\\bun\\w+\\s","g");

Hier sind alle Kennzeichnungen in Anführungszeichen gesetzt. Die speziellen Kennzeichnungen \b, \w und \s werden durch ein zusätzliches \ gekennzeichnet. Das g steht, durch ein Komma getrennt, ebenfalls in Anführungszeichen. Danach kann diese Variable bei einer Methode eingesetzt werden. Das obere Beispiel der Match-Methode kann dann so geschrieben werden:

Tr.T.match(A);

Bei einer vorgegebenen Zeichenkette (hier z.B. un) wird man die erste direkte Schreibweise bevorzugen. Ist dagegen die Zeichenkette eine noch unbekannte Variable, so kann bei dieser Art von Suchmuster nur die zweite Schreibweise, d.h. die mit dem Konstruktor new, angewandt werden.

toUpperCase() -- toLowerCase()

Diese Methoden wandeln einen String in Groß- bzw. Kleinbuchstaben um. In den Klammern werden keine Parameter angegeben.

length

Eine Eigenschaft des Stringobjekts (deshalb ohne Klammer). Ermittelt die Länge, d.h. die Anzahl der Zeichen und Leerzeichen eines Strings.

link ()

Mit dieser Methode wird ein String in einen Hyperlink verwandelt. In der Klammer wird die URL-Adresse mit Anführungszeichen angegeben. Bewirkt dasselbe wie in HTML über das Attribut HREF und die Verwendung der Anker <a> und </a>, zwischen denen der anklickbare Text gesetzt wird.

Beispiel:

1) <script>
2) ZS="Acta Informatica".link("http://link.springer.de/link/service/journals/00236/");
3) document.write(ZS);
4) </script>

In der 2. Zeile wird der Hyperlink gebildet, in der 3. Zeile ausgeschrieben. Abbildung zeigt den anklickbaren Zeitschriftentitel, der zur originalen Internetseite dieser Zeitschrift führt.

Abb. 6

Arrays

Das Arrayobjekt ist eines der wichtigsten JavaScript-Objekte, das in den hier dargestellten Anwendungen immer wieder vorkommt. Array (engl. = Feld) bedeutet soviel wie eine Folge von gleichartigen Teilen oder Elementen. Arrays können z.B. die einzelnen Wörter eines Satzes oder Textes sein, die einzelnen Sätze eines Textes oder die einzelnen Titel einer Bibliographie, die einzelnen Abschnitte eines Aufsatzes usw.

Ein Array wird, wie in dem oberen Match-Beispiel gezeigt, automatisch durch die Anwendung der globalen Match-Methode erzeugt, ebenso bei der Anwendung der Split-Methode auf ein Stringobjekt. Diese kommt in den hier vorgestellten Beispielen besonders häufig vor. Dabei wird jedesmal eine längere oder kürzere Zeichenfolge, ein Text, eine Liste usw. in eine Reihe von gleichartigen Teilen zerlegt. Hinter der Methodenbezeichnung split in Klammern das Trennungselement, das können Buchstabenfolgen, Zahlen, neue Zeilen, Leerstellen sein, wie hier z.B.:

S="Das ist aber sehr schön";
SA=S.split (" ");
alert(SA);

Das Ergebnis ist hier dasselbe wie bei der Match-Methode:

Abb. 7

Unabhängig von der Erzeugung eines Arrays durch die Match- oder Split-Methode eines Strings kann ein Array auch durch das Schlüsselwort new, den Objektnamen Array und der Angabe der einzelnen Teile in Klammern entstehen:

A = new Array ("aber", "das", "ist", "doch", "so");

Hinter der festgelegten Konstruktorbezeichnung new Array in Klammern die einzelnen Elemente des Arrays, in diesem Fall einzelne Wörter, in Anführungszeichen, weil es sich hier um Zeichenfolgen handelt. Das Ergebnis wird in der Variablen A gespeichert.

Die einzelnen Elemente eines Arrays können durch eine Indexnummer in eckigen Klammern angesprochen werden. Der erste Teil eines Arrays hat immer die IndexNr 0, der zweite 1, der dritte 2 usw. Die einzelnen Teile werden also durchnumeriert, beginnend mit 0. Der 4. Teil des Array A wird entsprechend mit A[3] bezeichnet. Soll der vierte Teil des Arrays mit der Alert-Methode angewählt und gezeigt werden, so schreibt man:

alert (A[3]);

Im Alert-Fenster erscheint doch.

Methoden und Eigenschaften des Arrayobjekts

length

Mit dieser Eigenschaft wird die Anzahl der Elemente eines Arrays festgestellt.

Beispiel:

S="das sind immer wieder die gleichen Schritte";
SA=S.split(" ");
alert(SA.length);

Der in Anführungszeichen angegebene Satz ist ein Stringobjekt und wird in der Variablen S gespeichert.
Durch die Split-Methode mit einer Leerstelle als Trennungselement wird daraus der Array SA.
Mit alert wird das Ergebnis von SA.length, d.h. die Zahl der Elemente angezeigt. Diese ist in diesem Fall 7.

join ( )

Mit dieser Methode werden die Elemente eines Arrays zu einem String zusammengefügt. In der Klammer wird ein Trennungszeichen angegeben. Wird z.B. " " für eine Leerstelle angegeben, so werden die Arrayelemente, durch Leerstellen getrennt, hintereinander gereiht. Ohne Trennungszeichen werden die einzelnen Arrayelemente durch Kommata von einander getrennt.

sort ( )

Diese Methode ist eine der effektivsten Methoden von JavaScript überhaupt. Mit einer einzigen kleinen Zeile können umfangreiche, in Arrays verwandelte Datenmengen im Nu sortiert werden.

Soll mit dieser Methode eine alphabetische oder lexikalische Anordnung eines Arrays erreicht werden, so werden in der Klammer keine Werte als Parameter eingegeben. Sollen Zahlen numerisch sortiert werden, so muß eine einfache Vergleichsfunktion verwendet werden, die mit dem frei gewählten Funktionsnamen NumSort so definiert wird:

function Numsort(a,b)
{
return a-b
}

Der Funktionsname wird als Parameter in die Klammer übernommen.

Beispiel:

1) S="1,3,5,4,9,8,12,10";
2) SA=S.split(",");
3) SB=SA.sort(Numsort);
4) function Numsort(a,b)
5) {
6) return a-b
7) }
8) alert(SB);

Mit alert wird die numerische Reihenfolge der Zahlen angezeigt:

Abb. 8

slice ( )

Mit dieser Methode wird ein Teil aus einem Array extrahiert. In der Klammer werden die Indexwerte des ersten und des letzten zu extrahierenden Elementes angegeben.

concat ( )

Mit dieser Methode wird ein Array an einen anderen angehängt. In der Klammer steht der Name des anzuhängenden Arrays.

Statements

Nach der kurzen Darstellung des Arrayobjekts kommen wir zu einer anderen Gruppe von Sprachelementen einer Programmiersprache, den sogen. Statements. Dies sind Schlüsselwörter, die wesentlich für den Programmablauf sind, ohne die kein vollwertiges Programm denkbar ist. In den vorangehenden Beispielen von kleinen linearen Programmabläufen wurde davon noch kein Gebrauch gemacht. Unter einer Reihe von Statements sind es lediglich zwei, die beiden Schlüsselwörtern for und if, die grundlegend sind für die im zweiten Teil dargestellten umfangreichen und komplizierteren Beispiele.

Die For-Schleife

Sobald ein Array durch die o.g. Methoden erzeugt worden ist, können die einzelnen Teile des Arrays mit einer For-Schleife weiter bearbeitet werden. Dadurch werden die gleichen Prozeduren für alle Teile in gleicher Weise angewandt. Daher brauchen die entsprechenden Programmanweisungen nur einmal notiert zu werden. Soll z.B. der oben genannte Satz mit großen Anfangsbuchstaben geschrieben werden, so könnte man dies mit einer For-Schleife so erreichen:

1) <script>
2) S="Das ist doch alles sehr schön";
3) SA=S.split (" ");
4) for (x=0;x<SA.length;x++)
5) {
6) SB=SA[x].substring(0,1);
7) SC=SB.toUpperCase();
8) SD=SA[x].replace(SB,SC);
9) document.write(SD+" ");
10) }
11) </script>

4) In Klammern hinter for wird die Indexvariable x zunächst belegt mit 0. x<SA.length gibt die maximale Größe von x an, die kleiner sein muß als die Gesamtanzahl SA.length und schließlich x++, alles durch Semikolons voneinander getrennt. x=0 bedeutet, die For-Schleife beginnt mit dem Indexwert 0, d.h. dem ersten Teil des Arrays. SA.length ist die Anzahl der Elemente des Arrays S. Lenght ist eine Methode zur Bestimmung der Länge sowohl eines Strings als auch eines Arrays. x<SA.length gibt die maximal zu durchlaufende Anzahl der Durchläufe an, die hier kleiner sein soll als die Anzahl der Elemente des Arrays. Wenn der Satz 6 Wörter hat, wie hier, ist SA.length 6. Es finden also 6 Durchläufe statt. x++ ist eine Schreibweise dafür, daß der Indexwert x jedesmal um eine 1 erhöht wird, ein Inkrement, das Gegenteil davon wäre das Dekrement x--.
5) Nach der Klammer kein Semikolon, sondern eine öffnende geschweifte Klammer und dann die einzelnen Anweisungen, der Anweisungsblock.
6) SB=SA[x].substring(0,1); aus dem Array-Element mit der IndexNr x wird das erste Zeichen mit der Substring-Methode herausgelesen und in SB gespeichert.
7) SC=SB.toUpperCase(); das Stringobjekt SB, also das erste Zeichen wird mit toUpperCase() in einen Großbuchstaben verwandelt, falls kleiner Buchstabe. Ergebnis gespeichert in SC.
8) SD=SA[x].replace(SB,SC); in dem Arrayelement wird das erste Zeichen SB durch SC ersetzt und in SD gespeichert.
9) document.write(SD+" "); ausgeschrieben wird SD gefolgt von einer Leerstelle. Nacheinander wird jedes einzelne Wort mit großem Anfangsbuchstaben und folgendem Zwischenraum ausgeschrieben. Ohne diese Leerstelle würden die Wörter aneinandergereiht ohne Zwischenraum geschrieben.

Die If-Bedingung

Das Ausführen von bestimmten Programmanweisungen wird sehr oft von bestimmten Bedingungen abhängig gemacht. Sollen z.B. nur die Buchstaben a und i im vorigen Programm groß geschrieben werden, so wird diese Bedingung eingeleitet mit if, gefolgt von dem Gegenstand der Bedingung in Klammern, hier also.:

if(SB=="a"||SB=="i")
SC=SB.toUpperCase();

Beachten Sie == ist ein Gleichsetzungszeichen, = ist ein Zuweisungszeichen. || bedeutet oder. Hinter der schließenden Klammer folgt kein Semikolon. Wenn nur eine Anweisung folgt, können die geschweiften Klammern, die bei mehreren Anweisungen stehen müssen, wegfallen.
7) und 8) Falls das erste Zeichen SB ein A oder I ist, soll dieses in Großbuchstaben geschrieben werden.
10) Im anderen Fall, ausgedrückt durch else, soll der Buchstabe nicht verändert werden, hier wird 11) SB unverändert zu SC, was man so schreibt: SC=SB. (Auch hier keine geschweifte Klammer, weil nur eine Anweisung.)
Das ganze Programm würde demnach lauten:

1) <script>
2) S="Das ist aber sehr schön";
3) SA=S.split (" ");
4) alert(SA);
5) alert(SA[3]);
6) for (x=0;x<SA.length;x++)
7) {
8) SB=SA[x].substring(0,1);
9) if(SB=="a"||SB=="i")
10) SC=SB.toUpperCase(); /*Zeichenkette SB wird in Großbuchstaben geschrieben und in SC gespeichert*/
11) else
12) SC=SB;
13) SD=SA[x].replace(SB,SC);
14) document.write(SD+" ");
15) }
16) </script>

Das ausgeschriebene Ergebnis:

Abb. 9

if(SB=="a"||SB=="i") falls SB gleich a oder falls SB gleich i ist (|| = Oder-Operator)

Operatoren

Nach Objekten, Methoden und Statements bilden die Operatoren eine weitere wichtige Gruppe jeder Programmiersprache. In den vorangehenden Beispielen wurden schon einige der wichtigsten Operatoren verwendet. Während, wie schon oben angedeutet, das einfache Gleichheitszeichen als Zuweisungsoperator dient, der am häufigsten in einem Skript verwendete Operator, wobei ein Wert einer Variablenbezeichnung zugewiesen wird, ist das doppelte Gleichheitszeichen einer der sogen. Vergleichsoperatoren. Weitere Vergleichsoperatoren sind != für ungleich, > für größer und < für kleiner. Der Oder-Operator gehört zu den logischen Operatoren, neben dem Und-Operator && und dem Nichtoperator ! Logische und Zuweisungsoperatoren finden z.B. in If-Bedingungen häufig Verwendung. Außerdem gibt es noch die arithmetischen Operatoren +, -, * und ++ als Inkrementierung und -- als Dekrementierung.


Zusammenfassung der bisher besprochenen JavaScript-Elemente

Allgemeine Schreibweise (Einbettung in HTML, Anfang und Ende eines Skripts, Interpunktion, Klammern, Funktionen)

JavaScript kann an beliebiger Stelle innerhalb eines HTML-Doluments stehen.
Einleitung mit <script language=javascript> oder auch nur mit <script>,
Ende mit </script>

Jede Anweisung mit Semikolon abschließen, z.B. document.write(v);
Daneben Verwendung von Kommata, Punkten und Ausrufungszeichen.
Runde Klammern und eckige Klammern. Runde Klammern bei If-Bedingungen, For-Schleifen, bei vielen Stringobjekten. Eckige Klammern zur Indexangabe bei Arrays. Geschweifte Klammern für mehrere zusammengehörige Befehlszeilen, Anweisungsblöcke. Jeder einleitenden Klammer muß eine abschließende Klammer entsprechen.

Funktionen werden mit geschweiften Klammern eingeleitet und beendet.

Variablen

Frei gewählte Benennung für einen zu speichernden Wert (Zeichenfolge, Zahl, bestimmtes Frame oder Fenster, Formularfeld). Der unter einer Variablenbenennung gespeicherte Wert wird sehr oft zu einem Objekt, an dem Methoden, Funktionen, wertverändernde Aktionen ausgeführt werden. Die Variablenbenennung wird so zu einer gleichlautenden Objektbenennung, vor allem bei Stringobjekten, z.B.

v="das ist aber schön";
va=v.replace("schön", schlecht);

Eine Variable wird auch oft einer Methode als auszuführenden Wert zugewiesen, z.B.:

V= "das ist aber schön";
document.write(V);

Neben den frei gewählten Objektbenennungen wie für diese Stringobjekte gibt es vordefinierte Objekte in einer Stufenfolge von dem obersten Objekt window, zu den Objekten document, frame, forms, elements usw.

Methoden sind von wenigen Ausnahmen abgesehen an Objekte gebunden. Es gibt Methoden, die an ganz bestimmte Objekte gebunden sind, wie z.B. die Methode write an das Objekt document. Methoden sind immer vordefiniert.

Eigenschaften sind ähnlich wie Methoden oft an bestimmte Objekte gebunden. Sie können aber auch frei definiert werden. Im Unterschied zu Methoden werden sie ohne folgende Klammer notiert.

Statements

If-Bedingung: nach if folgt in runden Klammern der Inhalt dieser Bedingung, z.B.: if(x<10), d.h. falls x kleiner als 10 ist, d.h. nur für Werte weniger als 10.

For-Schleife: nach for folgen in runden Klammern die einer Variablen (z.B. x) zugewiesenen Indexanfangs- und Indexendwerte (eines Arrays) der zu durchlaufenden Schleife sowie der Zählfaktor , z.B. x++, wenn jeweils der Indexwert um eins erhöht wird. Dazwischen steht jeweils ein Semikolon:

for(x=0; x=A.length; x++)


Operatoren

= Zuweisung
== Gleichheitsoperator
|| oder
> größer
< kleiner
&& und
!= nicht

Einige wichtige Eventhandler

Aufruf einer Funktion

onclick beim Anklicken eines Schalters oder eines Textes

onload beim Laden der Seite

onMouseOver wenn die Maus auf einen bestimmten Bereich einer Seite befindet

onKeyPress wenn eine Taste gedrückt wird

Zurück