JavaScript Einführungskurs

JavaScript Einführungskurs c 2001, Thomas Barmetler Stand: 11. September 2001 Regelmäßig aktualisierte Version unter: www.barmetler.de/js-tutorial Kontakt: JS-Tutorial@barmetler.de

Inhaltsverzeichnis 1 Einführung in JavaScript 5 1.1 Was ist JavaScript - und wie lerne ich es?............. 5 1.2 Fehlersuche... 6 1.3 Das Grundgerüst... 8 1.4 Das erweiterte Grundgerüst... 8 1.5 Recycling von Scripten... 9 1.6 Deaktiviertes JavaScript - was nun?................ 9 1.7 Kommentare... 10 1.8 Variable... 11 1.9 Reservierte Wörter... 12 1.10 Optionaler Strichpunkt... 12 1.11Strings... 13 1.12Escape-SequenzenbeiStrings... 13 2 Operatoren 15 2.1 ArithmetischeOperatoren... 16 2.2 StringOperatoren... 16 2.3 Vergleichsoperatoren... 18 2.4 LogischeOperatoren... 19 2.5 BitOperatoren... 20 2.6 Zuweisungs-Operatoren... 21 2.7 WeitereOperatoren... 22 2.8 RangfolgederOperatoren... 22 3 Arbeiten mit Zeichenketten (Strings) 24 3.1 String.charAt(n)... 24 3.2 String.concat(value,... )... 24 3.3 String.indexOf(substring, [start])... 25 3.4 String.lastIndexOf(substring, [start])................ 25 3.5 String.length... 26 3.6 String.split(delimiter)... 26 3.7 String.substr(start, [length])... 27 2

3.8 String.substring(from, [to])... 27 3.9 String.toLowerCase()... 28 3.10String.toUpperCase()... 28 4 Regular Expressions 29 4.1 StatischeAbfragen... 29 4.2 DynamischeAbfragen... 30 4.3 RegExpMethode:test()... 31 4.4 RegExp Methode: exec()...... 31 4.5 RegExpEigenschaften... 31 4.6 Patterns formulieren.... 32 4.7 EscapeZeichen... 34 4.8 Beispiele fürpattern... 35 5 Programmablauf steuern 36 5.1 Anweisungsblock... 36 5.2 Funktion... 37 5.3 If-Abfrage... 37 5.4 If...else-Abfrage... 38 5.5 Switch-Abfrage... 39 5.6 While-Schleife... 40 5.7 Do...while-Schleife... 41 5.8 For-Schleife... 42 5.9 Break-Anweisung... 43 5.10Continue-Anweisung... 43 6 Cookies 45 6.1 Cookie Attribut: expires...... 45 6.2 Cookie Attribut: path... 45 6.3 Cookie Attribut: domain...... 46 6.4 Cookie Attribut: secure...... 46 6.5 Cookiespeichern... 47 6.6 Cookieauslesen... 48 7 Objekte 50 3

7.1 DefinitionvonObjekten... 50 7.2 EigenschaftenvonObjekten... 50 7.3 Referenz auf ein Objekt...... 51 7.4 MethodeneinesObjektes... 52 8 Document Object Model (DOM) 54 8.1 Das Screen-Objekt..... 55 8.2 DasNavigator-Objekt... 55 8.3 DasWindow-Objekt... 56 8.4 DasFrames-Objekt... 56 8.5 DasLocation-Objekt... 57 8.6 DasDocument-Object... 57 8.7 DasFormular-Objekt... 58 8.8 DasImage-Objekt... 59 9 Weitere Infos 60 9.1 LinksinsWWW... 60 9.2 Editoren... 60 9.3 Bücher... 60 AAngabenfür Übungen 61 B Lösungsvorschläge für die Übungen 64 4

1 Einführung in JavaScript Zu Beginn sollen ein paar grundlegende Begriffe erwähnt werden und gleich im Anschluß daran soll gezeigt werden wie man JavaScript Code in eine HTML Datei einbettet. 1.1 Was ist JavaScript - und wie lerne ich es? Erstens: JavaScript ist nicht Java! Während eine Java Anwendung meist in einem speziellen Programm - der sogenannten Entwicklungsumgebung - erzeugt wird, kann JavaScript in jedem beliebigen Texteditor eingegeben werden. Ein weiterer gravierender Unterschied liegt in der Ausführung: Eine Java Applikation muss nach dem programmieren erst einmal kompiliert, also in eine für den Computer verständliche Sprache übersetzt werden. JavaScript hingegen ist eine Script Sprache. Dies bedeutet, dass alle Anweisungen erst zur Laufzeit interpretiert werden. Zweitens: Manchmal ist auch JavaScript nicht gleich JavaScript! Was sich wohl zunächst etwas verwirrend anhört stimmt - leider. Es zeigt sich, dass verschiedene Browser manche Anweisungen einfach anders interpretieren. Ja, es geht sogar soweit, dass verschiedene Versionen des gleichen Browsers einzelne Elemente unterschiedlich interpretieren. Deshalb sollte man sich stets im Klaren sein, für welches Publikum man seine Webseiten erstellt. Ist es nur ein lokales Unternehmensnetz, in dem eine einheitliche Plattform vorherrscht, oder will man seine Seiten über das Internet der ganzen Welt zur Verfügung stellen? Im zweiten Fall sollte unbedingt ein sorgfältiger Cross-Browser-Check erfolgen. Drittens: Diese Kurzeinführung ist mit Sicherheit kein Ersatz für (mindestens) ein gutes JavaScript Buch. Bei der Anschaffung sollte besonders auf einen guten und ausgedehnten Referenzteil Wert gelegt werden. Aufgrund ständiger Änderungen und Neuerscheinungen wurde hier bewußt auf die Angabe einer Literaturliste verzichtet. Nach meiner Erfahrung sind jedoch besonders Bücher aus dem O Reilly oder dem Addison-Wesley Verlag empfehlenswert. Viertens: Studieren sie Quelltexte! Nützen sie die Möglichkeit dass der Code von JavaScript - übrigens genau wie alle HTML-Anweisungen - stets einsehbar ist. Dies geschieht einfach durch einen Klick auf die rechte Maustaste in ihrem Browser und dem dortigen Menüpunkt Quelltext anzeigen bzw. in den englischen Versionen View Source. Und schlussendlich: Experimentieren sie! Seien sie offen gegenüber neuen Ideen und probieren sie diese einfach einmal aus. Denn der beste und effektivste Weg JavaScript zu lernen ist Learning by doing. 5

1.2 Fehlersuche Sie werden sich vielleicht wundern: Da wird mir noch nicht mal ein einziger JavaScript Befehl gezeigt, und trotzdem ist man bereits beim Kapitel Fehlersuche! Doch das hat so schon seine Richtigkeit. Bevor wir mit JavaScript überhaupt beginnen, sollte man wissen, wie man die häufigsten Fehler vermeidet, oder sie im Fall der Fälle wenigstens aufspüren kann. Die häufigsten Fehler Zuweisung contra Vergleich Beachten sie bitte, dass das einfache Gleichheitszeichen (=) in JavaScript ein Zuweisungsoperator und kein Vergleichsoperator ist! Nur das doppelte Gleichheitszeichen (==) vergleicht auch wirklich zwei Werte miteinander. var Test = 0; if (Test = 1) document.write("test war O.K.!"); Die Ausgabe lautet hier: Test war O.K.! Leider stimmt die obige Ausgabe nicht, obwohl keine Fehlermeldung erscheint. Da alle Werte ausser Null so viel wie true bedeuten wird die Zuweisung Test = 1 erfolgreich ausgeführt, als true gewertet, und die Ausgabe geschrieben. Groß contra klein JavaScript ist case-sensitiv! Beachten sie also bei jedem Zeichen eines Variablen- oder Funktionsnamen die Groß- oder Kleinschreibung. Ansonsten werden sie vom JavaScript-Interpreter eine Fehlermeldung erhalten. Aufspüren von Fehlern Sollte ein Script doch mal nicht auf Anhieb so funktionieren wie es soll, dann gilt es vor allem Ruhe zu bewahren, und strukturiert vorgehen. Einen ersten Ansatzpunkt bringen die Browser Internet Explorer und Netscape Navigator bereits von Haus aus mit. Im allgemeinen prüft letzterer das Script wesentlich genauer und liefert auch detailliertere Fehlermeldungen. Nescape Navigator Durch eintippen der Zeilejavascript: (incl. des Doppelpunktes!) in die Adresszeile des Browsers (vgl. Abbildung 1) erscheint ein neues Fenster 6

Abbildung 1: Fehlerdiagnose mit Netscape Navigator das alle Meldungen des JavaScript-Interpreters anzeigt. Dort finden sich dann Angaben wie Zeilennummer, Datei und Art des Fehlers. Internet Explorer In der Statuszeile des Browsers erscheint ein Fehlersymbol (vgl. Abbil- Abbildung 2: Fehlerdiagnose mit Internet Explorer dung 2) falls ein Script nicht ordnungsgemäß arbeitet. Per Doppelklick auf dieses Symbol öffnet sich ein weiteres Fenster mit einer detaillierten Fehlermeldung. 7

1.3 Das Grundgerüst JavaScript Code kann prinzipiell überall in einem HTML-Dokument eingefügt werden. Um die Programmierung jedoch sauberer und übersichtlicher zu gestalten sollte man möglichst viel davon am Anfang jeder Datei unterbringen. Genauer gesagt zwischen dem <\TITLE> und dem <HEAD> Tag. Die Vorteile dieser frühen Definition werden später noch offensichtlich. So sollte das dann aussehen: <HTML> <HEAD> <TITLE>Hier steht der Seitentitel</TITLE> <script language="javascript"> Hier kommen die JavaScript Anweisungen </script> </HEAD> <BODY> Hier kommen die HTML Anweisungen </BODY> </HTML> 1.4 Das erweiterte Grundgerüst Leider hat das oben vorgestellte Grundgerüst noch einen Nachteil. Bei älteren Browsern, die kein <script> Tag verstehen, werden alle Zeilen die dazwischen stehen als normaler HTML Code interpretiert. Dies hat zur Folge, dass alle JavaScript Angaben einfach auf den Bildschirm geschrieben werden. Doch es gibt einen kleinen Trick um dies zu umgehen: <HTML> <HEAD> <TITLE>Hier steht der Seitentitel</TITLE> <script language="javascript"> <!-- Verstecke nachfolgendes vor aelteren Browsern Hier kommen die JavaScript Anweisungen // beende das Versteckspiel --> </script> </HEAD> <BODY> Hier kommen die HTML Anweisungen </BODY> </HTML> Glücklicherweise ist in JavaScript die Zeichenfolge <!-- die Anweisung um dahinter eine Zeile Kommentar zu schreiben. Dies bedeutet, dass alles was in einer Zeile hinter dieser Zeichenfolge kommt nicht als Code interpretiert 8

wird. In HTML dagegen ist genau dies der Beginn eines Kommentarblocks, der sich über mehrere Zeilen erstreckt. Um das Ende des Blockes zu kennzeichnen bedarf es eines erneuten Kniffs: da zwar HTML die Anweisung --> als das Ende eines Kommentarblockes kennt, JavaScript aber versuchen würde dies als einen Befehl zu interpretieren, muss man die Zeile vor dem <\script> zuerst als JavaScript Kommentar markieren, um darin maskiert das Ende des HTML Kommentarblockes unterzubringen. 1.5 Recycling von Scripten Da so manche programmierte Funktion oder Prozedur nicht nur in einer, sondern vielleicht in mehreren Seiten Verwendung finden soll, ist es manchmal einfach lästig alles per copy and paste wieder zu übernehmen. Besonders bei Änderungen am Code kann dies schnell zu einer sehr unübersichtlichen Angelegenheit werden. Doch es gibt eine einfache Möglichkeit all diese Probleme zu umgehen. Der Code wird nicht mehr direkt in die HTML-Datei geschrieben sondern in einer eigenständigen Datei mit der Endung.js abgelegt. In der HTML-Datei findet sich nur noch ein Aufruf dieses Codes. Beachtet werden muss dabei nur, dass sich in der Datei mit dem JavaScript Code keine <script> Tags mehr befinden, da diese bereits in der HTML-Datei stehen: <HTML> <HEAD> <TITLE>Hier steht der Seitentitel</TITLE> <script LANGUAGE="JavaScript" SRC="../scripts/beispiel.js"></script> <script LANGUAGE="JavaScript" SRC="./eingabe.js"></script> </HEAD> <BODY> Und hier der HTML Code </BODY> </HTML> In diesem Beispiel erkennt man, dass die erste JavaScript Datei von der HTML Datei aus gesehen ein Verzeichnis höher - gekennzeichnet durch zwei Punkte in der Pfadangabe - und dort in einem Unterverzeichnis scripts liegt. Die Datei selbst heißt beispiel.js. Der zweite eingebundene Code liegt im gleichen Verzeichnis - gekennzeichnet durch einen Punkt in der Pfadangabe - wie die HTML Datei und heißt eingabe.js. 1.6 Deaktiviertes JavaScript - was nun? Angenommen auf einer Web-Seite seien sehr viele Funktionen mit JavaScript realisiert. Dann möchte der Programmierer natürlich nicht, dass ein Besucher auf diese Seite gelangt, der in seinem Browser JavaScript abgeschaltet 9

hat. Schließlich würde dieser nur viele Fehlermeldungen oder Fehlfunktionen bekommen, und die Seite erschiene in einem schlechten Licht. Abhilfe schafft hier eine Einstiegsseite, die eigentlich keinen darstellbaren Inhalt enthält und doch unheimlich wichtig sein kann. Diese Einstiegsseite hätte dann einen Code wie folgt: <HTML> <HEAD> <TITLE>Hier steht der Seitentitel</TITLE> <script LANGUAGE="JavaScript"> <!-- Verstecke nachfolgendes vor aelteren Browsern window.location.href=./neue_seite.html ; // beende das Versteckspiel --> </script> <noscript> Bei ihrem Browser ist JavaScript deaktiviert! <br> Bitte ändern sie dies und besuchen uns dann erneut. </noscript> </HEAD> <BODY> Hier kommen die HTML Anweisungen </BODY> </HTML> Was passiert? Beim Aufruf der Seite wird sofort der JavaScript Code abgearbeitet. Die Anweisung window.location.href=./neue seite.html ; weist den Browser an, eine andere Datei - nämlich die mit der Adresse./neue seite.html - im momentan aktiven Fenster darzustellen. Sollte jedoch JavaScript deaktiviert sein, so werden sämtliche Angaben zwischen den <script> Tags ignoriert. Stattdessen wird der Text zwischen den <noscript> Tags wie ganz gewöhnliches HTML ausgegeben. 1.7 Kommentare Kommentare sind (kurze) Anmerkungen neben dem eigentlichen Code, die das Verständis desselben fördern sollen. Sparen sie nicht damit! Egal ob es für jemand anderen ist, der später mit ihrem Quelltext arbeiten muss, oder ob sie selbst drei Monate später noch einmal Veränderungen vornehmen müssen: Kommentare erleichtern die Arbeit ungemein! Es muss zwischen ein- und mehrzeiligen Kommentaren unterschieden werden. Ein einzeiliger Kommentar beginnt stets mit // und geht bis zum Ende derselben Zeile. Ein mehrzeiliger Kommentar wird dagegen von /*... */ eingefasst. In der Praxis sieht das wie folgt aus: // Dies ist ein einzeiliger Kommentar 10

/* Hier beginnt mehrzeiliger Kommentar, und erstreckt sich ueber drei Zeilen */ 1.8 Variable Variable sind ganz grundlegende Elemente einer Programmiersprache. Sie bilden sozusagen einen Platzhalter für Werte, die man innerhalb einer Funktion braucht. Um diese Platzhalter mit einem Wert zu belegen, oder einen Wert wieder auszulesen, müssen ihnen Namen zugewiesen werden. Für die Vergabe von Variablennamen gelten folgende Regeln: Variablennamen sind case-sensitiv. Das heißt, dass zwischen Gross- und Kleinbuchstaben sehr wohl unterschieden wird. Variablennamen müssen mit einem Buchstaben (egal ob groß- oder kleingeschrieben) oder einem Unterstrich ( ) beginnen Der Rest des Namens kann nur Buchstaben, Ziffern und als einziges Sonderzeichen den Unterstrich ( ) enthalten - Leerzeichen, Umlaute und sonstige Satzzeichen sind nicht erlaubt! Namen sollten maximal eine Länge von 32 Zeichen haben. Keines der reservierten Wörter aus Kapitel 1.9 darf als Variablenname verwendet werden. Variablenname gültig/ungültig Begründung 2 Test Wert gültig nur Buchstaben, Zahlen und Unterstrich verwendet case ungültig reserviertes Wort em@il adresse ungültig das Sonderzeichen @ ist nicht erlaubt Aepfel gültig nur Buchstaben verwendet doppel-name ungültig das Sonderzeichen - ist nicht erlaubt (nur der Unterstrich) fähre ungültig Umlaute sind nicht erlaubt Um ein Programm verständlicher zu schreiben ist es sinnvoll, Variablen zu Beginn mit einem einleitenden var zu definieren, und gleich auch zu initialisieren - das heißt: mit einem Anfangswert zu belegen. 11

Code var USA; USA = Land ; var USA = 50; var Land= Deutschland, Einwohner=82E6; Erläuterung Definition der Variable USA ohne Initialisierung Verspätete Initialisierung oder Wertzuweisung Definition und gleichzeitige Initialisierung der Variablen USA mit einer Zahl Definition und Initialisierung einer Liste von Variablen, die durch Kommas syntaktisch getrennt werden. Des weiteren ist es ganz entscheidend wo eine Variable definiert wird. Bei einer Definition innerhalb eines Anweisungsblockes (siehe Kapitel 5.1) bzw. einer Funktion (siehe Kapitel 5.2) ist die Variable auch nur innerhalb dieser Struktur sichtbar und verwendbar. Man spricht dann von einer lokalen Variablen. Wird die Variable jedoch außerhalb eines solchen Codeblockes eingeführt, dann handelt es sich um eine globale Variable, auf die von allen nachfolgenden Anweisungsblöcken, Funktionen und auch freien Codestücken zugegriffen werden kann. 1.9 Reservierte Wörter Folgende Wörter dürfen nicht als Variablen- oder Funktionsnamen verwendet werden: abstract else instanceof super boolean export int switch break extends interface synchronized byte false long this case final native throw catch finally new throws char float null transient class for package true const function private try continue goto protected typeof default if public var delete implements return void do import short while double in static with 1.10 Optionaler Strichpunkt Üblicherweise sollte jede Anweisung in JavaScript mit einem Strichpunkt abgeschlossen werden! Da es theoretisch aber erlaubt ist bei einzeiligen Anweisungen auf ihn zu verzichten, entsprechen die zwei folgenden Zeilen einander in der Wirkung exakt: 12

a =3; a =3 Sobald zwei Befehle jedoch auf einer Zeile zusammengefasst werden, wird zumindest der erste Strichpunkt zwingend notwendig: a =3; b =5; Um ungewollte Programmausführungen und damit aufwändige Fehlersuche von vornherein auszuschließen, sollte der Strichpunkt am Ende einer jeden Anweisung einfach zur Gewohnheit werden. Hier ein Beispiel, wie es sonst leicht schief gehen kann: return true Was ist denn nun gemeint? return true; oder return; true; 1.11 Strings Mit dem allgemein üblichen Begriff string sind Zeichenketten, bestehend aus Buchstaben und/oder Zahlen, mit einer maximalen Länge von 255 Zeichen, gemeint. Stringwerte stehen stets in einfachen ( ) oder doppelten ( ) Anführungszeichen. Hier zwei Beispiele für Stringzuweisungen: var text = "Kennen sie eine gute Suchmaschine?"; var eingabe = Guten Morgen ; Selbst wenn einer Variablen vom Typ String nun (scheinbar) ein Zahlenwert zugewiesen wird, so lässt sich mit dieser keine Berechnungsoperation durchführen! Darum ist streng darauf zu achten, dass a =5; eben nicht das gleiche ist wie a = 5 ; Die erste Zuweisung ist eine Wertzuweisung, während die zweite eine Stringzuweisung repräsentiert. 1.12 Escape-Sequenzen bei Strings Der Backslash (\) hat in JavaScript eine besondere Bedeutung: es erlaubt aus der üblichen Interpretation eines Zeichen auszusteigen. Zum Beispiel würde folgende Anweisung nicht korrekt sein: var aussage = Mark sagte: Hallo Tom ; Das Problem bei obigem Beispiel ist, dass innerhalb der Anführungszeichen, die den kompletten String umgeben noch andere stehen, welche die direkte Rede einschließen. Klar, dass man hier die äußeren Anführungszeichen durch doppelte ersetzen könnte, doch es gibt auch Fälle, wo dies nicht möglich ist. Und dann hilft das Escape-Zeichen (\). Obiger Problemfall sähe dann folgenderma- 13

ßen aus: var aussage = Mark sagte: \ Hallo Tom\ ; Nachfolgend eine Tabelle mit den möglichen Escape-Sequenzen: Sequenz Dargestelltes Zeichen \b Backspace: zeichenweises Zurückschalten \f Form feed: Seitenvorschub \n New line: Zeilenumbruch \r Carriage return: Wagenrücklauf \t Tabulator \ Apostroph oder einfaches Anführungszeichen \ Doppeltes Anführungszeichen \XXX Das Zeichen, welches in der Latin 1 Codierung durch die drei dezimalen Ziffern XXX repräsentiert wird. \xxx Das Zeichen, welches in der Latin 1 Codierung durch die zwei hexadezimalen Ziffern XX repräsentiert wird. \uxxxx Das Zeichen, welches in der Unicode Codierung durch die vier dezimalen Ziffern XXXX repräsentiert wird. (Wird vom Navigator 4 noch nicht unterstützt!) 14

2 Operatoren In diesem Kapitel sollen die wichtigsten Operatoren - aufgeschlüsselt nach den Variablentypen auf die sie wirken - vorgestellt werden. Es ist wichtig zu wissen, dass Variable in JavaScript bei ihrer Initialisierung nicht auf einen bestimmten Datentyp festgelegt werden müssen! Dies hat jedoch auch zur Folge, dass bei bestimmten Operationen eine automatische Typkonvertierung erfolgen kann, was oftmals zu scheinbar unerklärlichen Fehlern führt. 15

2.1 Arithmetische Operatoren Operator Beschreibung Beispiel + Addition zweier Zahlen x=1; y=x+1; y hat nun den Wert 2 - Subtraktion der zweiten von der ersten Zahl x=5; y=x-1; y hat nun den Wert 4 * Multiplikation zweier Zahlen x=y=3; z=x*y; z hat nun den Wert 9 / Division der ersten durch die zweite Zahl % Division der ersten durch die zweite Zahl und Rückgabe des Restes (Modulorechnung) ++ Erhöhung einer Zahl um eins (Inkrementierung) Die Position des Operators ist entscheidend: y = ++x ist nicht das gleiche wie y = x++ Bei der ersten Variante wird x erst um eins erhöht und dieser erhöhte Wert wird y zugewiesen. Bei der zweiten Variante wird das alte x auf y zugewiesen und anschließend wird x um eins erhöht. Erniedrigung einer Zahl um eins (Dekrementierung) Wie bei ++ ist auch hier die Position wichtig! x = 15; y=3; z=x/y; z hat nun den Wert 5 x = 15; y=6; z=x%y; z hat nun den Wert 3 x=9; y = ++x; y hat nun den Wert 10 x=9; y = x++; y hat nun den Wert 9 2.2 String Operatoren Die oben beschriebenen Vergleiche finden nur statt, wenn beide Operatoren Strings sind. Die Vergleichsoperatoren == und!= haben hier die gleiche Wirkung wie im Abschnitt Vergleichsoperatoren auf Seite 18 beschrieben. Besonders beim + Operator ist etwas Vorsicht geboten. Wie in der Einlei- 16

tung zu den Operatoren erwähnt, findet bei unterschiedlichen Variablentypen eine Typkonvertierung statt. Sollte jedoch ein String mit einem anderen Typ zusammentreffen, so überwiegt stets der String! Ferner muss die Reihenfolge der Befehlsabarbeitung berücksichtigt werden: solange keine Klammern gesetzt werden geschieht die Ausführung der Anweisungen stets von links nach rechts, was manchmal verwirrende Auswirkungen haben kann: JavaScript Anweisung Variable s enthält nun folgenden Text s=1+2+ KugelnEis ; 3KugelnEis s = Anzahl Eiskugeln: + 1 + 2; Anzahl Eiskugeln: 12 Die wichtigsten Operatoren für Strings: Operator Beschreibung Beispiel + Verbindet zwei Strings zu einem x= Java ; y = Script ; z=x+y; zenthält nun JavaScript < Vergleich auf alphabetische Reihenfolge: liefert true falls der erste Operand im Alphabet vor dem zweiten kommt, sonst false. > Vergleich auf alphabetische Reihenfolge: liefert true falls der erste Operand im Alphabet nach dem zweiten kommt, sonst false. x = JavaScript ; y= HTML ; x <y; Auswertung ergibt false x = JavaScript ; y= HTML ; x >y; Auswertung ergibt true 17

2.3 Vergleichsoperatoren Operator Beschreibung Beispiel == Vergleich zweier Variablen bezüglich x =1; ihres Wertes. Bei Gleichheit wird y =4; true zurückgegeben, sonst false. Falls die zwei Variablen unterschiedlichen x == y; Auswertung ergibt false Typs sind, findet eine Typ- konvertierung statt. Objekte, Arrays und Funktionen werden nach Referenz verglichen. Dies bedeutet dass zwei Elemente diesen Typs nur gleich sein können wenn sie auf das gleiche Objekt verweisen. Ist eine Variablen mit null belegt und die andere undefiniert werden sie als gleich angesehen.!= Vergleich zweier Variablen bezüglich ihres Wertes. Bei Ungleichheit wird x =1; y =4; true zurückgegeben. Die Regeln x!=y; für den Vergleich sind identisch zum Auswertung ergibt true == Operator. === Zwei Variablen werden auf Identität verglichen. Bei Gleichheit wird true zurückgegeben. Die Regeln für den Vergleich sind identisch zum == Operator allerdings findet keine Typkonvertierung statt und eine mit null belegte Variable wird von einer undefinierten unterschieden!!== Falls keine Identität vorliegt wird true zurückgegeben. < Rückgabewert ist true falls der erste Operand kleiner ist als der zweite, sonst false. > Rückgabewert ist true falls der erste Operand größer ist als der zweite, sonst false. <= Rückgabewert ist true falls der erste Operand kleiner oder gleich ist als der zweite, sonst false. >= Rückgabewert ist true falls der erste Operand größer oder gleich ist als der zweite, sonst false. x = 15; y =6; x<y; Auswertung ergibt false x = 15; y =6; x>y; Auswertung ergibt true 18

2.4 Logische Operatoren Operator Beschreibung Beispiel && Bool sche UND-Verknüpfung. x =1; Es wird zuerst der Ausdruck y =7; links des Operators ausgewertet. Sollte dieser true ergeben - und x<5&&y>5; Auswertung ergibt true auch nur dann - so wird auch der rechte Ausdruck ausgewertet. Ergibt dieser ebenfalls true, so ist der Rückgabewert true, sonst false. Bool sche ODER-Verknüpfung. Es wird zuerst der Ausdruck links des Operators ausgewertet. Sollte dieser false ergeben - und nur dann - wird auch der rechte Ausdruck ausgewertet. Sollte dieser true sein, so ist auch der Rückgabewert true, sonst false. x =1; y =7; x>5 y<5; Auswertung ergibt false! Invertierung eines Wertes. x = true; y =!x; yistnunfalse 19

2.5 Bit Operatoren Diese Operatoren dienen der Low-level Bearbeitung von Binärzahlen und werden in JavaScript üblicherweise nicht verwendet. Sie sind hier nur der Vollständigkeit halber aufgelistet. Operator Beschreibung Beispiel << Alle Bits des ersten Operanden werden um die Anzahl Stellen, wie sie der zweite Operand angibt (0.. 31) nach x =3; x<<1; Nun enthält x den Wert 6 links geschoben. Enthält der erste Operand eine positive Zahl, so werden rechts Nullen nachgeschoben, ist er dagegen negativ, so werden Einsen eingefügt. Das Verschieben von Bits entspricht pro verschobener Stelle der Multiplikation mit zwei. Um das Beispiel gut zu verstehen empfiehlt sich die Umwandlung der Zahlenwerte in Binärschreibweise! >> Bitweises nach rechts schieben (vergleiche mit dem << Operator). Das Verschieben von Bits entspricht pro verschobener Stelle der Division durch zwei, wobei dann nur der Wert vor dem Komma zur Verfügung steht. >>> Wie >>= Operator, nur dass von links generell Nullen nachgeschoben werden. & Bitweise UND-Verknüpfung. Das bedeutet, dass entweder das Bit in Operand eins, und das korrespondierende Bit in Operand zwei eins sein müssen um bei der Verknüpfung gesetzt zu werden. Bitweise ODER-Verknüpfung. Das bedeutet, dass entweder das Bit in Operand eins, oder in Operand zwei oder jedoch beide eins sein müssen um bei der Verknüpfung gesetzt zu werden. ˆ Bitweise Exklusiv-ODER Verknüpfung. Das bedeutet, dass entweder das Bit in Operand eins, oder das korrespondierende Bit in Operand zwei eins sein muss (aber nicht beide), um bei der Verknüpfung dieses Bit zu setzen. x =3; x>>1; Nun enthält x den Wert 1 20

2.6 Zuweisungs-Operatoren Nachfolgende Tabelle soll lediglich die Wirkung der verkürzten Schreibweise näher bringen. Selbstverständlich kann diese Verbindung von Operator und Zuweisung auch mit den restlichen Operatoren (zum Beispiel den bitweisen Operatoren) erfolgen. Operator Beschreibung Beispiel = Einfache Zuweisung. Die Ausführung geschieht stets von rechts nach links. x =5; y =3; z =2; y = z = x; x, y und z haben Wert 5 += Addition und Zuweisung auf eine der beiden Variablen a += b; entspricht: a = a + b = Subtraktion und Zuweisung auf eine der beiden Variablen. a = b; entspricht: a = a b = Multiplikation und Zuweisung auf eine der beiden Variablen a = b; entspricht: a = a b / = Division und Zuweisung auf eine der beiden Variablen a/= b; entspricht: a = a/b %= Modulo Operation und Zuweisung auf eine der beiden Variablen a %= b; entspricht: a = a % b 21

2.7 Weitere Operatoren Operator Beschreibung Beispiel?: Bedingungs-Operator. Dies ist der einzige Operator mit drei Operanden. Erst wird der Ausdruck vor dem? ausgewertet. Ist a<0?a +1:a/5 Falls a kleiner Null, gib a+ 1zurück, sonst das Ergebnis der Division a/5 dieser true, so wird der Wert des zweiten Operanden (oder Operation) zurückgegeben, ansonsten der Wert der letzten Operation., Komma-Operator. Zum Abtrennen verschiedener Anweisungen a =1,b=9,c=5; innerhalb eines Aus- drucks.. Punkt-Operator. Zum Ansprechen von Eigenschaften oder Methoden eines Objektes. [ ] Wie Punkt-Operator und zusätzlich zum Ansprechen von Array- Elementen. document.lastmodified document.write( Hello world ) frames[0].length document[ lastmodified ] arrayelement[i] document.forms[j+1] () Operator zum Funktionsaufruf. document.close() Math.sin(x) window.open() typeof Aufgrund der automatischen Typkonvertierung kann es passieren, dass der aktuelle Typ einer Variablen nicht eindeutig klar ist. Der typeof Operator liefert dann einen von drei möglichen Strings zurück. var Zahl 5; Typ = typeof Zahl; Rückgabewert: number var Zeichen = Hallo ; Typ = typeof Zeichen; Rückgabewert: string var istwahr = true Typ = typeof istwahr; Rückgabewert: boolean 2.8 Rangfolge der Operatoren Wie es in der herkömmlichen Mathematik die bekannte Punkt-vor-Strich-Regel gibt, so ist auch in JavaScript die Reihenfolge der Abarbeitung verschiedener Operatoren genau festgelegt. Die Klammern besitzen dabei die besondere Bedeutung aufgrund ihrer höchsten Priorität die Abarbeitung von Operationen zu beeinflussen. 22

Rang Operatorzeichen Operatorname Operatortyp 1 () [] Klammer Gruppierung 2! ++ Nicht Inkrement, Dekrement Logischer Operator Arithmetischer Operator Negation Nicht Arithmetischer Operator Bit Operator 3 / % Multiplikation Division Modulo-Operation Arithmetische Operatoren 4 + Aneinanderreihung String Operator 5 + Addition Arithmetische Operatoren Subtraktion 6 << >> >>> Linksverschiebung Rechtsverschiebung Null-fill- Rechtsverschiebung Bit-Operatoren 7 < > <= >= Erster Wert ist kleiner Erster Wert ist größer Erster Wert ist kleiner oder gleich Erster Wert ist größer oder gleich Werte sind gleich Werte sind ungleich Vergleichsoperatoren 8 == Vergleichsoperatoren!= <> 9 & UND Bit-Operator 10 ˆ Exklusiv-Oder Bit-Operator 11 ODER Bit-Operator 12 && UND Logischer Operator 13 ODER Logischer Operator 14?: Bedingung Konditionaler Operator 15 = += = / = &= %= ˆ= = <<= >>= >>>= Zuweisungsoperatoren 16, (Komma) Aneinanderreihung Zuweisungsoperatoren 23

3 Arbeiten mit Zeichenketten (Strings) Nach meiner Erfahrung ist eine der häufigsten Einsatzgebiete von JavaScript die Überprüfung von Formulareingaben. Da es sich hierbei sehr oft um textuale (=string) Werte handelt, sollen hier einige Möglichkeiten zur Zerlegung, Überprüfung und Auswertung vorgestellt werden. Ich betone ausdrücklich, dass dies eine Einführung und deshalb nicht vollständig ist! Soweit nicht ausdrücklich darauf hingewiesen wird, werden bei allen vorgestellten Methoden die Zeichen jedes String beginnend mit Null durchgezählt. Das bedeutet, dass in dem String JavaScript das Zeichen S den Index 4 hat! Die in eckigen Klammern [ ] aufgeführten Argumente sind optional, d.h. sie sind nicht zwingend erforderlich. 3.1 String.charAt(n) Argumente n Index des Zeichens das zurück gegeben werden soll. Rückgabewert Das n-te Zeichen der Zeichenkette String. Erläuterung Falls n nicht zwischen 0 und string.length-1 liegt, dann wird ein leerer String zurück gegeben. Da JavaScript keine leeren Strings im engsten Sinn kennt, hat auch dieser Rückgabewert die Länge 1. Beispiel var text = JavaScript ; text.charat(2); Rückgabewert: v text.charat(4); Rückgabewert: S 3.2 String.concat(value,... ) Argumente value,... Ein oder mehrere Werte, die an die Zeichenkette String angefügt werden sollen. Rückgabewert Ein neuer String, der durch das anfügen sämtlicher Argumente entstanden ist. Erläuterung concat() konvertiert falls nötig zuerst sämtliche Argumente zu Zeichenketten bevor sie an String angefügt werden. Die ursprüngliche Zeichenkette String wird nicht verändert, sondern ein neuer String zurück gegeben! 24

Beispiel var text1 = 1 plus 2 ; var text2 = macht ; text1.concat(text2, 3 ); Rückgabewert: 1 plus 2 macht 3 3.3 String.indexOf(substring, [start]) Argumente substring start Die Zeichenkette, nach der innerhalb von String gesucht werden soll. Optionaler Ganzzahlwert, der eine Startposition innerhalb von String angibt, ab der nach substring gesucht werden soll. Rückgabewert Falls substring innerhalb von String gefunden wurde, wird der Index des ersten Zeichens von substring an der ersten Fundstelle zurück gegeben. Bleibt die Suche erfolglos, so ist der Rückgabewert 1. Erläuterung In Navigator 2 und 3 wird bei einem Startwert, der größer ist als die Länge der Zeichenkette ein leerer String anstatt 1 zurück gegeben. Beispiele var text = abcxxabcxxabc ; text.indexof( xx ); Rückgabewert: 3 text.indexof( xx,4); Rückgabewert: 8 text.indexof( xx,10); Rückgabewert: -1 3.4 String.lastIndexOf(substring, [start]) Argumente substring start Die Zeichenkette, nach der innerhalb von String gesucht werden soll. Optionaler Ganzzahlwert, der eine Startposition innerhalb von String angibt, ab der nach substring gesucht werden soll. Rückgabewert Falls substring innerhalb von String gefunden wurde, wird der Index des ersten Zeichens von substring an der letzten Fundstelle zurück gegeben. Bleibt die Suche erfolglos, so ist der Rückgabewert 1. Erläuterung Die Suche innerhalb String erfolgt von rechts nach links! Da die Indexierung der einzelnen Zeichen innerhalb des String jedoch weiterhin von links nach 25

rechts erfolgt gibt der Rückgabewert die letzte Position des substring vor der Position start an. Beispiele var text = abcxxabcxxabc ; text.lastindexof( xx ); Rückgabewert: 8 text.lastindexof( xx,8); Rückgabewert: 8 text.lastindexof( xx,9); Rückgabewert: 8 text.lastindexof( xx,6); Rückgabewert: 3 3.5 String.length Rückgabewert Anzahl der Zeichen von String. Erläuterung Diese String Eigenschaft ist nur lesbar und kann nicht verändert werden. Der Aufruf dieser Eigenschaft erfolgt ohne runde Klammern! Der Index des letzten Zeichens von String ist stets String.length - 1. Beispiel var text = JavaScript ; text.length; Rückgabewert: 10 3.6 String.split(delimiter) Argumente delimiter Ein Zeichen oder eine Zeichenkette, an welcher String aufgeteilt werden soll. Sollte kein Argument angegeben sein, enthält das zurück gegebene Array lediglich ein Element: String. Wird dagegen ein Leerzeichen ( ) als Argument übergeben, so wird String nach jedem einzelnen Zeichen auseinander gebrochen. Rückgabewert Ein Array mit Zeichen(ketten), die beim auseinanderbrechen von String an den durch das Argument vorgegebenen Grenzen entstanden sind. Erläuterung Das Begrenzungszeichen selbst wird nicht im Array abgelegt. Beispiele var text = Dies ist ein - sehr gutes - JavaScript Tutorial! 26

a = text.split( - ); a = text.split( ); a[0] = Dies ist ein ; a[0] = D ; a[1] = sehr gutes ; a[1] = i ; a[2] = JavaScript Tutorial! ; a[2] = e ; a[3] = s ;. 3.7 String.substr(start, [length]) Argumente start length Gibt den Startindex der zu extrahierenden Zeichenkette an. Falls dieser Wert negativ ist, so wird von rechts nach links gezählt, wobei das letzte Zeichen 1, das vorletzte Zeichen 2, usw. entspricht. Anzahl der Zeichen die ausgehend vom Startindex extrahiert werden sollen. Wird dieser Wert nicht angegeben, so werden ausgehend vom Startindex alle Zeichen bis zum Ende von String zurück gegeben. Rückgabewert Der Teil der Zeichenkette String, welcher durch die Indizes start und eventuell length bestimmt sind. Erläuterung Die original Zeichenkette String wird durch diese Operation nicht verändert. Beispiele var text = abcdefg text.substr(2,2); Rückgabewert: cd text.substr(3); Rückgabewert: defg text.substr(-3,2) Rückgabewert: ef 3.8 String.substring(from, [to]) Argumente from to Gibt den Index des ersten zu extrahierenden Zeichens an. Der Wert muss zwischen 0 und string.length-1 liegen. Index des ersten nicht mehr zu extrahierenden Zeichens! Muss um mindestens eins größer sein als from. Der Wert muss zwischen 1 und string.length liegen. Rückgabewert Der Teil der Zeichenkette String, welcher durch die Indizes from und eventuell to bestimmt sind. 27

Erläuterung Die original Zeichenkette String wird durch diese Operation nicht verändert. Sollte der Wert from größer sein als to, so werden die zwei Werte automatisch getauscht, und erst anschließend die Operation ausgeführt. Beispiele var text = abcdefg text.substring(2,4); Rückgabewert: cd text.substring(3); Rückgabewert: defg text.substring(3,2); Rückgabewert: c 3.9 String.toLowerCase() Rückgabewert Einen neuen String, in dem alle Buchstaben ausschließlich als Kleinbuchstaben enthalten sind. Beispiel var text = JavaScript Tutorial text.tolowercase(); Rückgabewert: javascript tutorial 3.10 String.toUpperCase() Rückgabewert Einen neuen String, in dem alle Buchstaben ausschließlich als Großbuchstaben enthalten sind. Beispiel var text = JavaScript Tutorial text.touppercase(); Rückgabewert: JAVASCRIPT TUTORIAL 28

4 Regular Expressions Regular Expressions erlauben die sehr flexible Formulierung von Mustern (englisch: patterns) nach welchen innerhalb einer Zeichenkette gesucht werden soll. Aber warum denn schon wieder etwas um Zeichenketten zu bearbeiten?!?! Da wurden doch bereits im Kapitel 3 so viele Möglichkeiten vorgestellt. Um diese Frage zu beantworten möchte ich ein kleines Beispiel vorstellen: Stellen sie sich vor, dass in ein Formular eine Email Adresse eingetragen werden soll. Bevor das Formular an den Server geschickt wird soll die Syntax der Email Adresse überprüft werden. Da es sich hierbei um eine äußerst komplexe Aufgabe handelt sollen lediglich folgende Punkte geprüft werden: 1. Es müssen mindestens drei Zeichen vor dem @ Symbol stehen (erlaubt sind Groß- und Kleinbuchstaben sowie Zahlen) 2. Nach den @ Symbol müssen wiederum mindestens drei der im vorherigen Punkt genannten Zeichen stehen 3. Zum Abschluss folgt ein Punkt mit darauf folgenden zwei, drei oder vier Buchstaben (keine Zahlen mehr erlaubt!) als Top-Level Domain So, und nun versuchen sie einmal die Einhaltung dieser Bedingungen mit den bisher vorgestellten Möglichkeiten zu überprüfen. Dafür ist ein erheblicher Aufwand nötig. Mit einer Regular Expression sieht das dann so aus: Email.search(/\w{3,@\w{3,\.[a-zA-Z]{2,4/); Zugegeben: das sieht auch etwas aufwändig - und auch kryptisch - aus, aber am Ende dieses Kapitels werden die einzelnen Ausdrücke verständlich sein (siehe auch Übung 1). Noch ein Tip: da sich die Notation von Regular Expressions in JavaScript fast komplett an die Notation in der Skriptsprache Perl anlehnt, können viele weitere Infos und Beispiele zu Suchmustern im Internet gefunden werden. 4.1 Statische Abfragen Statische Abfragen werden hart codiert - d.h., sie können nicht zur Laufzeit verändert werden. Dafür haben sie aber den Vorteil sehr einfach in der Handhabung zu sein. Genau so wie Strings stets in Anführungszeichen angegeben werden, so stehen die Suchmuster, die gefunden werden sollen, stets in einen führenden und 29

einen folgenden Schrägstrich (/) gepackt. Der folgende Ausdruck würde also testen, ob sich innerhalb des Strings der Variablen text das Wort Java befindet: var text = "Ein Irrtum: JavaScript ist gleich Java!"; var pos = text.search(/java/); Wird das Suchmuster gefunden, enthält die Variable pos den Index des ersten Zeichens der ersten Fundstelle (hier: 12). Achtung: auch hier hat das erste Zeichen des String den Index 0! Kommt das Suchmuster in dem String nicht vor, dann wird der Wert -1 zurück gegeben. Hinter dem schließenden Schrägstrich kann noch eines oder beide der zwei erlaubten Attribute angefügt werden. Ein g um eine globale Suche durchzuführen und somit alle Fundstellen des Musters zu erhalten (üblicherweise bricht der Suchvorgang nach dem ersten Fund ab), ein i für eine case-insensitive Suche (d.h., die Gross- und Kleinschreibung wird nicht berücksichtigt), oder ein gi um beide gleichzeitig anzuwenden. 4.2 Dynamische Abfragen Dynamische Abfragen können variabel erzeugt werden. So ist es denkbar, dass ein Besucher einer Webseite in ein Formular das Suchmuster einträgt, und dieser Formularwert für eine Suche verwendet wird. Dafür dient der RegExp()-Konstruktor. Er nimmt ein oder zwei Argumente, und generiert damit ein neues Suchmuster. Das erste Argument ist die Zeichenkette, nach der gesucht werden soll - also der Teil, welcher bei statischen Abfragen zwischen den Schrägstrichen (/) steht. Das zweite Argument ist optional und bestimmt den Suchraum. Beim ersten Argument ist etwas Vorsicht geboten: es wird stets als String in Anführungszeichen übergeben. Braucht man innerhalb der Definition des Suchmusters jedoch einen Backslash (\), so muss dieser stets durch einen weiteren Backslash escaped werden. Das liegt daran, dass in Strings der Backslash als Escape-Sequenz dient (z.b. um mit \n einen Zeilenumbruch anzugeben). Um also nach einer Ziffer zu suchen muss statt \d das Argument \\d lauten. Beim zweiten Argument gibt es nur vier Möglichkeiten: es ist ein g (für globale Suche), ein i (für case-insensitive Suche - d.h., die Gross- und Kleinschreibung wird nicht berücksichtigt), ein gi um beide zu gleichzeitig anzuwenden oder man lässt es weg. Um also alle Stellen mit drei aufeinander folgenden Ziffern innerhalb des Strings text zu finden sieht der Code folgendermassen aus: var pattern = new RegExp("\\d{3", "g"); Um das RegExp()-Objekt mit einem neuen Suchmuster zu belegen ist die compile() Methode nötig. Sollen also auf einmal fünf statt drei aufeinander folgende Ziffern gefunden werden, so lautet der Code: 30

pattern.compile("\\d{5", "g"); 4.3 RegExp Methode: test() Von den zwei durch das RegExp()-Objekt definieren Methoden ist test() die einfachere. Sie übernimmt als Argument einen String, und testet, ob in diesem String das durch RegExp() definierte Suchmuster vorkommt. Ist das pattern vorhanden, wird true zurück gegeben, sonst false. var pattern = /java/i; var abfrage = pattern.test("javascript ist gut!"); Durch Anwendung des i Attributes führt obige Abfrage zu einem Treffer, und die Variable abfrage enthält den Wert true. 4.4 RegExp Methode: exec() Die Methode exec() übernimmt einen String als Argument und sucht darin nach dem durch RegExp() definierten Suchmuster. Wird das Muster nicht gefunden wird null zurück gegeben, ansonsten ein Array. Das Arrayelement mit Index 0 enthält den gefundenen Suchstring, alle weiteren Arrayelemente enthalten die Teilstrings, welche durch die geklammerten pattern definiert werden. Des weiteren enthält die index Eigenschaft den Index der Fundstelle, und die input Eigenschaft verweist auf den String in dem gesucht wurde. Wird exec() zusammen mit einem globalen RegExp-Objekt verwendet, dann setzt es seine lastindex Eigenschaft auf das Zeichen, welches unmittelbar dem gefundenen Suchmuster folgt. Wird exec() nun ein weiteres Mal für die selbe RegExp aufgerufen, wird die Suche nicht am Anfang des Strings begonnen, sondern an der Stelle, die durch lastindex bestimmt ist. Wurde hingegen kein Treffer gelandet, so wird lastindex auf 0 gesetzt. Dies erlaubt einem alle möglichen Fundstellen innerhalb des Strings aufzurufen: var pattern = /Java/g; var text = "Ein Irrtum: JavaScript ist gleich Java!"; var ergebnis; while((ergebnis = pattern.exec(text))!= null) { alert("gefunden: " + ergebnis[0] + "\n An Position: " + ergebnis.index); 4.5 RegExp Eigenschaften Es sollen noch einige nützliche Eigenschaften des RegExp Objektes vorgestellt werden: 31

Eigenschaft Beschreibung source Read-only String, der das reine Suchmuster enthält global Read-only Eigenschaft, die angibt, ob die Suche das g Attribut enthält ignorecase Read-only Eigenschaft, die angibt, ob die Suche das i Attribut enthält lastindex Lese- und schreibbare Eigenschaft, welche den Index des ersten Zeichens nach einem gefundenen Suchstring enthält leftcontext Der Text links vom zuletzt gefundenen Suchstring rightcontext Der Text rechts vom zuletzt gefundenen Suchstring lastmatch Den zuletzt gefundenen Suchstring lastparen Den Suchstring, welcher durch den letzten geklammerten Ausdruck des patterns bestimmt wird $1, $2,..., $9 Die Suchstrings, welche durch die ersten neun geklammerten Ausdrücke des patterns bestimmt werden 4.6 Patterns formulieren Wie bereits mehrfach in Beispielen gezeigt, wird das einfachste Suchmuster durch die Aneinanderreihung von Buchstaben, Zahlen und eventuell Zeichen aufgebaut. Um also nach der Zeichenkette Java zu suchen lautet die Anweisung: pos = text.search(/java/); Es gibt allerdings einige Vereinfachungen. Bestimmte Typen von Zeichen, wie z.b. nur Buchstaben, oder nur Zahlen, sind zu so genannten Klassen zusammen gefasst: Klasse Bedeutung [...] Irgend eines der in eckigen Klammern aufgelisteten Zeichen [ˆ...] Alle Zeichen außer den in eckigen Klammern aufgelisteten. Irgend ein einzelnes Zeichen außer der Zeilenumschaltung (newline). Dies entspricht [ˆ\n] \w Irgend ein Buchstabe oder eine Zahl. Dies entspricht [a-za-z0-9] \W Irgend ein Zeichen außer Buchstabe oder Zahl. Dies entspricht [ˆa-zA-Z0-9] \s Irgend ein nicht druckbares Zeichen. Dies entspricht [ \t\n\r\f\v] \S Irgend ein Zeichen außer den nicht druckbaren. Dies entspricht [ˆ \t\n\r\f\v] \d Irgend eine Zahl. Dies entspricht [0-9] \D Irgend ein Zeichen außer einer Zahl. Dies entspricht [ˆ0-9] 32

Des weiteren lässt sich auch noch angeben, wie oft ein bestimmtes Zeichen, oder eben eine Klasse von Zeichen, gefunden werden soll: Ausdruck Bedeutung {n,m Finde das voranstehende Zeichen mindestens n, aber nicht öfters als m mal {n, Finde das voranstehende Zeichen mindestens n mal (oder eben öfters) {n Finde das voranstehende Zeichen genau n mal.? Finde das voranstehende Zeichen kein oder ein mal. Das heißt, dass das Zeichen optional ist. Dies entspricht {0,1 + Finde das voranstehende Zeichen ein oder mehrmals. Dies entspricht {1, * Finde das voranstehende Zeichen kein oder mehrmals. Dies entspricht {0, Außerdem gibt es noch die Möglichkeit Zeichen zu gruppieren, Alternativen zu formulieren, und auf bereits vorher gefundene Zeichen zu referenzieren: Ausdruck Bedeutung (...) Gruppierung. Die Zeichen in der Klammer werden als Gruppe gesucht. Praktisch, da man auf diese Gruppen auch sämtliche Wiederholungszeichen wie?, +, *,... anwenden kann. Außerdem werden geklammerte Ausdrücke für eine spätere Referenzierung gemerkt. Alternative. Finde entweder den Ausdruck links des senkrechten Strichs, oder den rechts davon. \n Referenz. Findet die gleiche Zeichenfolge (nicht das allgemein formulierte Pattern!) welches bereits bei der n-ten runden Klammer gefunden wurde. Die Gruppierungen werden anhand der linken, geöffneten Klammern von links nach rechts durchnumeriert. Zu guter Letzt kann auch noch die Position der gewünschten Fundstelle vorgegeben werden: 33

Ausdruck Bedeutung ˆ Finde nachfolgendes Pattern am Anfang eines Strings, bzw. bei einer Suche über mehrzeiligen Text am Anfang jeder Zeile $ Finde voranstehendes Pattern am Ende eines Strings, bzw. bei einer Suche über mehrzeiligen Text am Ende jeder Zeile \b Finde eine Wortbegrenzung. Das heisst, es wird die Grenze zwischen einem \w und einem \W Zeichen gefunden. Dies hilft um ein einzelnes Wort zu suchen. Soll z.b. nur der String Java gefunden werden, ohne jeglichen Zusatz wie Script so müsste mannach/\sjava\s/ suchen. Dadurch hätte man aber stets ein führendes und ein folgendes Leerzeichen! Besser ist das Pattern /\bjava\b/. \B Finde eine Position, die keine Wortbegrenzung ist. 4.7 Escape Zeichen Soll nach Zeichen, die bei der Formulierung von Pattern eigentlich eine besondere Bedeutung haben (wie z.b. der Punkt oder das Fragezeichen), gesucht werden, so müssen diese durch ein Escape Zeichen gekennzeichnet werden: Escape Was wird gesucht? Zeichen \f Form feed: Wagenvorlauf \n Newline: Zeilenumschaltung \r Carriage return: Harte Zeilenumschaltung \t Tabulator \v Vertikaler Tabulator \/ Schrägstrich: / \\ Backslash: \ \. Punkt:. \* Stern: * \+ Plus: + \? Fragezeichen:? \ Senkrechter Strich: \( Geöffnete runde Klammer: ( \) Geschlossene runde Klammer: ) \[ Geöffnete eckige Klammer: [ \] Geschlossene eckige Klammer: ] \{ Geöffnete geschweifte Klammer: { \ Geschlossene geschweifte Klammer: \xxx Das ASCII Zeichen, welches durch die Oktalzahl xxx bestimmt wird \xnn Das ASCII Zeichen, welches durch die Hexadezimalzahl nn bestimmt wird 34

4.8 Beispiele für Pattern Nachfolgend sind einige Beispiele, die zum besseren Verständnis beitragen sollen: Pattern Ergebnis /\d{2,4/ Finde Gruppen mit mindestens zwei, und maximal vier Zahlen /\w{3\d?/ Finde exakt drei aufeinander folgende Zeichen aus der Gruppe der Buchstaben und Zahlen, welchen optional noch eine weitere Zahl folgen kann /\s+java\s+/ Finde genau den String java mit einem oder mehreren führenden und folgenden Leerzeichen /[ˆ ]*/ Finde keines oder mehrere Zeichen, die jedoch kein Anführungszeichen sein dürfen /ab cd ef/ Finde entweder den String ab oder cd oder ef /ef (ab cd)+/ Finde entweder den String ef oder mindestens eine Wiederholung von einem der Strings ab oder cd /\d{3 [a-z]{4/ Finde entweder drei aufeinander folgende Zahlen, oder vier aufeinanderfolgende Kleinbuchstaben /java(script)?/ Finde den String java gefolgt von einem optionalen String script /([ ])[ˆ ]*\1/ Finde einen Ausdruck, der in Anführungszeichen steht. Dazu wird zuerst nach einem einfachen oder doppelten Anführungszeichen gesucht. Dann kann (muss aber nicht) eine beliebig lange Zeichenkette folgen, die alles außer eben Anführungszeichen enthalten darf. Am Ende muss wieder ein Anführungszeichen stehen, und zwar (durch die Referenz \1 bestimmt) genau das gleiche wie am Anfang, also ein einfaches oder ein doppeltes. /ˆ(mo)/i Finde am Anfang eines Strings (bzw. bei mehrzeiliger Suche am Anfang jeder Zeile) die Buchstabenkombination mo egal ob sie klein oder groß geschrieben ist. /[\.!\?]$/ Finde am Ende eines Strings (bzw. bei mehrzeiliger Suche am Ende jeder Zeile) entweder einen Punkt, ein Ausrufe- oder ein Fragezeichen. Der Punkt und das Fragezeichen müssen im Pattern escaped werden! /ˆJavaScript$/ Finde den String JavaScript wenn er allein in einer Zeile steht (da er gleichzeitig am Zeilenanfang und am Ende stehen muss). 35

5 Programmablauf steuern Üblicherweise erfolgt die Abarbeitung der JavaScript Befehle sequentiell - das heisst: einer nach dem anderen, genau in der Reihenfolge, wie sie beim Programmieren eingegeben wurden. Oft sollen aber manche Anweisungen mehrmals hintereinander durchgeführt werden, oder nur dann, wenn eine bestimmte Bedingung erfüllt ist. Genau dies kann man mit Anweisungsblöcken und Schleifen erreichen. In diesem Kapitel sollen anhand ganz einfacher - und dadurch überschaubarer - Beispiele die wichtigsten Strukturen zum Beeinflussen des Programmablaufs vorgestellt werden. 5.1 Anweisungsblock Um zwei oder mehr Anweisungen, die mehrmals auf der selben Seite benötigt werden, nicht wiederholt eintippen zu müssen bedient man sich Anweisungsblöcken. Anweisungsblöcke beginnen stets mit dem Schlüsselwort function. Anschließend folgt der Name des Blockes, für den die gleichen Namenskonventionen gelten wie für Variable (siehe Seite 11). Direkt dahinter folgt ein Paar runde Klammern: ( ). Der eigentliche Anweisungsblock steht dagegen in einem Paar aus geschweiften Klammern: {. Den Anweisungsblöcken können auch Werte, die sie für die Bearbeitung brauchen, übergeben werden. Diese Werte nennt man Parameter. Sie stehen immer in den runden Klammern direkt hinter dem Namen. Um mehrere Werte an einen Anweisungsblock zu übergeben werden sie durch Kommas separiert aufgelistet. Ein Anweisungsblock sieht demnach prinzipiell folgendermaßen aus: function Name(Parameter1, Parameter2,...) { JAVASSCRIPT BEFEHLE Und die Funktion wird so aufgerufen: Name(Parameter1, Parameter2,...); Nehmen wir an, sie wollen bei bestimmten Ereignissen ein Pop-Up Fenster erscheinen lassen, das aber jedes Mal eine andere Meldung ausgibt. Dann sollten sie sich einen Anweisungsblock schreiben, dem sie den entsprechenden Text übergeben, und dann von dem Code innerhalb des Blockes das Meldungsfenster ausgeben lassen. Der Anweisungsblock nach dem </TITLE> Tag in <SCRIPT>-Tags lautet hierfür: 36