JavaScript Einfuhrungskurs¨ - barmetler.debarmetler.de/js-tutorial/script und...

JavaScriptEinfuhrungskurs

c© 2001, Thomas Barmetler

Stand: 11. September 2001

Regelmaßig aktualisierte Version unter:www.barmetler.de/js-tutorial

Kontakt:[email protected]

c© 2001, Thomas Barmetler JavaScript Einfuhrungskurs

Inhaltsverzeichnis

1 Einfuhrung in JavaScript 5

1.1 Was ist JavaScript - und wie lerne ich es? . . . . . . . . . . . . . 5

1.2 Fehlersuche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.3 Das Grundgerust . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

1.4 Das erweiterte Grundgerust . . . . . . . . . . . . . . . . . . . . . 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 Worter . . . . . . . . . . . . . . . . . . . . . . . . . . 12

1.10 Optionaler Strichpunkt . . . . . . . . . . . . . . . . . . . . . . . . 12

1.11 Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

1.12 Escape-Sequenzen bei Strings . . . . . . . . . . . . . . . . . . . . 13

2 Operatoren 15

2.1 Arithmetische Operatoren . . . . . . . . . . . . . . . . . . . . . . 16

2.2 String Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.3 Vergleichsoperatoren . . . . . . . . . . . . . . . . . . . . . . . . . 18

2.4 Logische Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.5 Bit Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

2.6 Zuweisungs-Operatoren . . . . . . . . . . . . . . . . . . . . . . . 21

2.7 Weitere Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . 22

2.8 Rangfolge der Operatoren . . . . . . . . . . . . . . . . . . . . . . 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.10 String.toUpperCase() . . . . . . . . . . . . . . . . . . . . . . . . . 28

4 Regular Expressions 29

4.1 Statische Abfragen . . . . . . . . . . . . . . . . . . . . . . . . . . 29

4.2 Dynamische Abfragen . . . . . . . . . . . . . . . . . . . . . . . . 30

4.3 RegExp Methode: test() . . . . . . . . . . . . . . . . . . . . . . . 31

4.4 RegExp Methode: exec() . . . . . . . . . . . . . . . . . . . . . . . 31

4.5 RegExp Eigenschaften . . . . . . . . . . . . . . . . . . . . . . . . 31

4.6 Patterns formulieren . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.7 Escape Zeichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

4.8 Beispiele fur Pattern . . . . . . . . . . . . . . . . . . . . . . . . . 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.10 Continue-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 Cookie speichern . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

6.6 Cookie auslesen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

7 Objekte 50

3


7.1 Definition von Objekten . . . . . . . . . . . . . . . . . . . . . . . 50

7.2 Eigenschaften von Objekten . . . . . . . . . . . . . . . . . . . . . 50

7.3 Referenz auf ein Objekt . . . . . . . . . . . . . . . . . . . . . . . 51

7.4 Methoden eines Objektes . . . . . . . . . . . . . . . . . . . . . . 52

8 Document Object Model (DOM) 54

8.1 Das Screen-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . . 55

8.2 Das Navigator-Objekt . . . . . . . . . . . . . . . . . . . . . . . . 55

8.3 Das Window-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . 56

8.4 Das Frames-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . . 56

8.5 Das Location-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . 57

8.6 Das Document-Object . . . . . . . . . . . . . . . . . . . . . . . . 57

8.7 Das Formular-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . 58

8.8 Das Image-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . . 59

9 Weitere Infos 60

9.1 Links ins WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

9.2 Editoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

9.3 Bucher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

A Angaben fur Ubungen 61

B Losungsvorschlage fur die Ubungen 64

4


1 Einfuhrung in JavaScript

Zu Beginn sollen ein paar grundlegende Begriffe erwahnt werden und gleich imAnschluß daran soll gezeigt werden wie man JavaScript Code in eine HTMLDatei einbettet.

1.1 Was ist JavaScript - und wie lerne ich es?

• Erstens: JavaScript ist nicht Java!Wahrend eine Java Anwendung meist in einem speziellen Programm -

der sogenannten Entwicklungsumgebung - erzeugt wird, kann JavaScriptin jedem beliebigen Texteditor eingegeben werden. Ein weiterer gravieren-der Unterschied liegt in der Ausfuhrung: Eine Java Applikation muss nachdem programmieren erst einmal kompiliert, also in eine fur den Compu-ter verstandliche Sprache ubersetzt werden. JavaScript hingegen ist eineScript Sprache. Dies bedeutet, dass alle Anweisungen erst zur Laufzeitinterpretiert werden.

• Zweitens: Manchmal ist auch JavaScript nicht gleich JavaScript!Was sich wohl zunachst etwas verwirrend anhort stimmt - leider. Es zeigtsich, dass verschiedene Browser manche Anweisungen einfach anders in-terpretieren. Ja, es geht sogar soweit, dass verschiedene Versionen desgleichen Browsers einzelne Elemente unterschiedlich interpretieren. Des-halb sollte man sich stets im Klaren sein, fur welches Publikum man seineWebseiten erstellt. Ist es nur ein lokales Unternehmensnetz, in dem eineeinheitliche Plattform vorherrscht, oder will man seine Seiten uber dasInternet der ganzen Welt zur Verfugung stellen? Im zweiten Fall sollteunbedingt ein sorgfaltiger Cross-Browser-Check erfolgen.

• Drittens: Diese Kurzeinfuhrung ist mit Sicherheit kein Ersatzfur (mindestens) ein gutes JavaScript Buch.Bei der Anschaffung sollte besonders auf einen guten und ausgedehntenReferenzteil Wert gelegt werden. Aufgrund standiger Anderungen undNeuerscheinungen wurde hier bewußt auf die Angabe einer Literaturlisteverzichtet. Nach meiner Erfahrung sind jedoch besonders Bucher aus demO’Reilly oder dem Addison-Wesley Verlag empfehlenswert.

• Viertens: Studieren sie Quelltexte!Nutzen sie die Moglichkeit dass der Code von JavaScript - ubrigens genauwie alle HTML-Anweisungen - stets einsehbar ist. Dies geschieht einfachdurch einen Klick auf die rechte Maustaste in ihrem Browser und demdortigen Menupunkt Quelltext anzeigen bzw. in den englischen VersionenView Source.

• Und schlussendlich:Experimentieren sie! Seien sie offen gegenuber neuen Ideen und probie-ren sie diese einfach einmal aus. Denn der beste und effektivste WegJavaScript zu lernen ist “Learning by doing“.

5


1.2 Fehlersuche

Sie werden sich vielleicht wundern: Da wird mir noch nicht mal ein einzigerJavaScript Befehl gezeigt, und trotzdem ist man bereits beim Kapitel Fehler-suche!

Doch das hat so schon seine Richtigkeit. Bevor wir mit JavaScript uberhauptbeginnen, sollte man wissen, wie man die haufigsten Fehler vermeidet, oder sieim Fall der Falle wenigstens aufspuren kann.

Die haufigsten Fehler

• Zuweisung contra VergleichBeachten sie bitte, dass das einfache Gleichheitszeichen (=) in JavaScriptein Zuweisungsoperator und kein Vergleichsoperator ist! Nur das doppelteGleichheitszeichen (==) 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 er-scheint. Da alle Werte ausser Null so viel wie true bedeuten wird dieZuweisung Test = 1 erfolgreich ausgefuhrt, als true gewertet, und dieAusgabe geschrieben.

• Groß contra kleinJavaScript ist case-sensitiv! Beachten sie also bei jedem Zeichen einesVariablen- oder Funktionsnamen die Groß- oder Kleinschreibung. Anson-sten werden sie vom JavaScript-Interpreter eine Fehlermeldung erhalten.

Aufspuren von Fehlern

Sollte ein Script doch mal nicht auf Anhieb so funktionieren wie es soll, danngilt es vor allem Ruhe zu bewahren, und strukturiert vorgehen. Einen erstenAnsatzpunkt bringen die Browser Internet Explorer und Netscape Navigatorbereits von Haus aus mit. Im allgemeinen pruft letzterer das Script wesentlichgenauer und liefert auch detailliertere Fehlermeldungen.

• Nescape NavigatorDurch eintippen der Zeile javascript: (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 sichdann Angaben wie Zeilennummer, Datei und Art des Fehlers.

• Internet ExplorerIn der Statuszeile des Browsers erscheint ein Fehlersymbol (vgl. Abbil-

Abbildung 2: Fehlerdiagnose mit Internet Explorer

dung 2) falls ein Script nicht ordnungsgemaß arbeitet. Per Doppelklickauf dieses Symbol offnet sich ein weiteres Fenster mit einer detailliertenFehlermeldung.

7

1.3 Das Grundgerust

JavaScript Code kann prinzipiell uberall in einem HTML-Dokument eingefugtwerden. Um die Programmierung jedoch sauberer und ubersichtlicher zu ge-stalten sollte man moglichst viel davon am Anfang jeder Datei unterbringen.Genauer gesagt zwischen dem <\TITLE> und dem <HEAD> Tag. Die Vorteiledieser fruhen Definition werden spater 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 Grundgerust

Leider hat das oben vorgestellte Grundgerust noch einen Nachteil. Bei alterenBrowsern, die kein <script> Tag verstehen, werden alle Zeilen die dazwischenstehen als normaler HTML Code interpretiert. Dies hat zur Folge, dass alleJavaScript 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"></script>

</HEAD><BODY>


Glucklicherweise ist in JavaScript die Zeichenfolge <!-- die Anweisung umdahinter eine Zeile Kommentar zu schreiben. Dies bedeutet, dass alles wasin einer Zeile hinter dieser Zeichenfolge kommt nicht als Code interpretiert

8


wird. In HTML dagegen ist genau dies der Beginn eines Kommentarblocks, dersich uber mehrere Zeilen erstreckt. Um das Ende des Blockes zu kennzeichnenbedarf es eines erneuten Kniffs: da zwar HTML die Anweisung --> als dasEnde eines Kommentarblockes kennt, JavaScript aber versuchen wurde dies alseinen Befehl zu interpretieren, muss man die Zeile vor dem <\script> zuerstals JavaScript Kommentar markieren, um darin maskiert das Ende des HTMLKommentarblockes unterzubringen.

1.5 Recycling von Scripten

Da so manche programmierte Funktion oder Prozedur nicht nur in einer, son-dern vielleicht in mehreren Seiten Verwendung finden soll, ist es manchmaleinfach lastig alles per copy and paste wieder zu ubernehmen. Besonders beiAnderungen am Code kann dies schnell zu einer sehr unubersichtlichen Ange-legenheit werden. Doch es gibt eine einfache Moglichkeit all diese Probleme zuumgehen.

Der Code wird nicht mehr direkt in die HTML-Datei geschrieben sondern ineiner eigenstandigen Datei mit der Endung .js abgelegt. In der HTML-Dateifindet sich nur noch ein Aufruf dieses Codes. Beachtet werden muss dabei nur,dass sich in der Datei mit dem JavaScript Code keine <script> Tags mehrbefinden, 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 derHTML Datei aus gesehen ein Verzeichnis hoher - gekennzeichnet durch zweiPunkte in der Pfadangabe - und dort in einem Unterverzeichnis scripts liegt.Die Datei selbst heißt beispiel.js. Der zweite eingebundene Code liegt im glei-chen Verzeichnis - gekennzeichnet durch einen Punkt in der Pfadangabe - wiedie HTML Datei und heißt eingabe.js.

1.6 Deaktiviertes JavaScript - was nun?

Angenommen auf einer Web-Seite seien sehr viele Funktionen mit JavaScriptrealisiert. Dann mochte der Programmierer naturlich nicht, dass ein Besu-cher auf diese Seite gelangt, der in seinem Browser JavaScript abgeschaltet

9

hat. Schließlich wurde dieser nur viele Fehlermeldungen oder Fehlfunktionenbekommen, und die Seite erschiene in einem schlechten Licht. Abhilfe schaffthier eine Einstiegsseite, die eigentlich keinen darstellbaren Inhalt enthalt unddoch unheimlich wichtig sein kann.

Diese Einstiegsseite hatte dann einen Code wie folgt:

<HTML><HEAD>

<TITLE>Hier steht der Seitentitel</TITLE><script LANGUAGE="JavaScript"></script><noscript>Bei ihrem Browser ist JavaScript deaktiviert! <br>Bitte ändern sie dies und besuchen uns dann erneut.

</noscript></HEAD><BODY>


Was passiert? Beim Aufruf der Seite wird sofort der JavaScript Codeabgearbeitet. Die Anweisung window.location.href=’./neue seite.html’;weist den Browser an, eine andere Datei - namlich die mit der Adresse ./neue seite.html- im momentan aktiven Fenster darzustellen. Sollte jedoch JavaScript deakti-viert sein, so werden samtliche Angaben zwischen den <script> Tags ignoriert.Stattdessen wird der Text zwischen den <noscript> Tags wie ganz gewohnlichesHTML ausgegeben.

1.7 Kommentare

Kommentare sind (kurze) Anmerkungen neben dem eigentlichen Code, die dasVerstandis desselben fordern sollen. Sparen sie nicht damit! Egal ob es furjemand anderen ist, der spater mit ihrem Quelltext arbeiten muss, oder obsie selbst drei Monate spater noch einmal Veranderungen vornehmen mussen:Kommentare erleichtern die Arbeit ungemein!

Es muss zwischen ein- und mehrzeiligen Kommentaren unterschieden wer-den. Ein einzeiliger Kommentar beginnt stets mit // und geht bis zum Endederselben Zeile. Ein mehrzeiliger Kommentar wird dagegen von /* ... */eingefasst.

In der Praxis sieht das wie folgt aus:

// Dies ist ein einzeiliger Kommentar

10


/* Hier beginnt mehrzeiligerKommentar, und erstrecktsich ueber drei Zeilen */

1.8 Variable

Variable sind ganz grundlegende Elemente einer Programmiersprache. Sie bil-den sozusagen einen Platzhalter fur Werte, die man innerhalb einer Funktionbraucht. Um diese Platzhalter mit einem Wert zu belegen, oder einen Wertwieder auszulesen, mussen ihnen Namen zugewiesen werden.

Fur die Vergabe von Variablennamen gelten folgende Regeln:

• Variablennamen sind case-sensitiv. Das heißt, dass zwischen Gross- undKleinbuchstaben sehr wohl unterschieden wird.

• Variablennamen mussen mit einem Buchstaben (egal ob groß- oder klein-geschrieben) oder einem Unterstrich ( ) beginnen

• Der Rest des Namens kann nur Buchstaben, Ziffern und als einziges Son-derzeichen den Unterstrich ( ) enthalten - Leerzeichen, Umlaute und son-stige Satzzeichen sind nicht erlaubt!

• Namen sollten maximal eine Lange von 32 Zeichen haben. Keines derreservierten Worter aus Kapitel 1.9 darf als Variablenname verwendetwerden.

Variablenname gultig/ungultig Begrundung2 Test Wert gultig nur Buchstaben, Zahlen und Unter-

strich verwendetcase ungultig reserviertes Wortem@il adresse ungultig das Sonderzeichen @ ist nicht er-

laubtAepfel gultig nur Buchstaben verwendetdoppel-name ungultig das Sonderzeichen - ist nicht erlaubt

(nur der Unterstrich)fahre ungultig Umlaute sind nicht erlaubt

Um ein Programm verstandlicher zu schreiben ist es sinnvoll, Variablen zuBeginn mit einem einleitenden var zu definieren, und gleich auch zu initialisie-ren - das heißt: mit einem Anfangswert zu belegen.

11


Code Erlauterungvar USA; Definition der Variable USA ohne Initiali-

sierungUSA = “Land“; Verspatete Initialisierung oder Wertzuwei-

sungvar USA = 50; Definition und gleichzeitige Initialisierung

der Variablen USA mit einer Zahlvar Land=“Deutschland“,Einwohner=82E6;

Definition und Initialisierung einer Listevon Variablen, die durch Kommas syntak-tisch getrennt werden.

Des weiteren ist es ganz entscheidend wo eine Variable definiert wird. Bei ei-ner Definition innerhalb eines Anweisungsblockes (siehe Kapitel 5.1) bzw. einerFunktion (siehe Kapitel 5.2) ist die Variable auch nur innerhalb dieser Struk-tur sichtbar und verwendbar. Man spricht dann von einer lokalen Variablen.Wird die Variable jedoch außerhalb eines solchen Codeblockes eingefuhrt, dannhandelt es sich um eine globale Variable, auf die von allen nachfolgenden An-weisungsblocken, Funktionen und auch freien Codestucken zugegriffen werdenkann.

1.9 Reservierte Worter

Folgende Worter durfen nicht als Variablen- oder Funktionsnamen verwendetwerden:

abstract else instanceof superboolean export int switchbreak extends interface synchronizedbyte false long thiscase final native throwcatch finally new throwschar float null transientclass for package trueconst function private trycontinue goto protected typeofdefault if public vardelete implements return voiddo import short whiledouble in static with

1.10 Optionaler Strichpunkt

Ublicherweise sollte jede Anweisung in JavaScript mit einem Strichpunkt abge-schlossen werden!

Da es theoretisch aber erlaubt ist bei einzeiligen Anweisungen auf ihn zuverzichten, entsprechen die zwei folgenden Zeilen einander in der Wirkung ex-akt:

12


a = 3;a = 3

Sobald zwei Befehle jedoch auf einer Zeile zusammengefasst werden, wirdzumindest der erste Strichpunkt zwingend notwendig:a = 3; b = 5;

Um ungewollte Programmausfuhrungen und damit aufwandige Fehlersuchevon vornherein auszuschließen, sollte der Strichpunkt am Ende einer jeden An-weisung einfach zur Gewohnheit werden. Hier ein Beispiel, wie es sonst leichtschief gehen kann:

returntrue

Was ist denn nun gemeint?return true; oder return; true;

1.11 Strings

Mit dem allgemein ublichen Begriff string sind Zeichenketten, bestehend ausBuchstaben und/oder Zahlen, mit einer maximalen Lange von 255 Zeichen, ge-meint. Stringwerte stehen stets in einfachen (’) oder doppelten (“) Anfuhrungszeichen.

Hier zwei Beispiele fur Stringzuweisungen:var text = "Kennen sie eine gute Suchmaschine?";var eingabe = ’Guten Morgen’;

Selbst wenn einer Variablen vom Typ String nun (scheinbar) ein Zahlenwertzugewiesen wird, so lasst sich mit dieser keine Berechnungsoperation durchfuhren!Darum ist streng darauf zu achten, dass a = 5; eben nicht das gleiche ist wiea = ”5”;Die erste Zuweisung ist eine Wertzuweisung, wahrend die zweite eine Stringzu-weisung reprasentiert.

1.12 Escape-Sequenzen bei Strings

Der Backslash (\) hat in JavaScript eine besondere Bedeutung: es erlaubt ausder ublichen Interpretation eines Zeichen auszusteigen.

Zum Beispiel wurde folgende Anweisung nicht korrekt sein:var aussage = ’Mark sagte: ’Hallo Tom’’;

Das Problem bei obigem Beispiel ist, dass innerhalb der Anfuhrungszeichen,die den kompletten String umgeben noch andere stehen, welche die direkte Redeeinschließen. Klar, dass man hier die außeren Anfuhrungszeichen durch dop-pelte ersetzen konnte, doch es gibt auch Falle, wo dies nicht moglich ist. Unddann hilft das Escape-Zeichen (\). Obiger Problemfall sahe dann folgenderma-

13


ßen aus:var aussage = ’Mark sagte: \’Hallo Tom\’’;

Nachfolgend eine Tabelle mit den moglichen Escape-Sequenzen:

Sequenz Dargestelltes Zeichen\b Backspace: zeichenweises Zuruckschalten\f Form feed: Seitenvorschub\n New line: Zeilenumbruch\r Carriage return: Wagenrucklauf\t Tabulator\’ Apostroph oder einfaches Anfuhrungszeichen\“ Doppeltes Anfuhrungszeichen\XXX Das Zeichen, welches in der Latin 1 Codierung durch die

drei dezimalen Ziffern XXX reprasentiert wird.\xXX Das Zeichen, welches in der Latin 1 Codierung durch die

zwei hexadezimalen Ziffern XX reprasentiert wird.\uXXXX Das Zeichen, welches in der Unicode Codierung durch die

vier dezimalen Ziffern XXXX reprasentiert wird. (Wird vomNavigator 4 noch nicht unterstutzt!)

14


2 Operatoren

In diesem Kapitel sollen die wichtigsten Operatoren - aufgeschlusselt nach denVariablentypen auf die sie wirken - vorgestellt werden.

Es ist wichtig zu wissen, dass Variable in JavaScript bei ihrer Initialisie-rung nicht auf einen bestimmten Datentyp festgelegt werden mussen! Dieshat jedoch auch zur Folge, dass bei bestimmten Operationen eine automati-sche Typkonvertierung erfolgen kann, was oftmals zu scheinbar unerklarlichenFehlern fuhrt.

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 vonder 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 diezweite Zahl

x = 15;y = 3;z = x / y;→ z hat nun den Wert 5

% Division der ersten durch diezweite Zahl und Ruckgabe desRestes (Modulorechnung)

x = 15;y = 6;z = x % y;→ z hat nun den Wert 3

++ Erhohung einer Zahl um eins(Inkrementierung)Die Position des Operators

ist entscheidend: y = ++x istnicht das gleiche wie y = x++

Bei der ersten Variantewird x erst um eins erhohtund dieser erhohte Wert wirdy zugewiesen. Bei der zweitenVariante wird das alte x auf yzugewiesen und anschließendwird x um eins erhoht.

x = 9;y = ++x;→ y hat nun den Wert 10

x = 9;y = x++;→ y hat nun den Wert 9

– Erniedrigung einer Zahl umeins (Dekrementierung)Wie bei ++ ist auch hier die

Position wichtig!

2.2 String Operatoren

Die oben beschriebenen Vergleiche finden nur statt, wenn beide OperatorenStrings sind.

Die Vergleichsoperatoren ’==’ und ’!=’ haben hier die gleiche Wirkungwie im Abschnitt Vergleichsoperatoren auf Seite 18 beschrieben.

Besonders beim ’+’ Operator ist etwas Vorsicht geboten. Wie in der Einlei-

16


tung zu den Operatoren erwahnt, findet bei unterschiedlichen Variablentypeneine Typkonvertierung statt. Sollte jedoch ein String mit einem anderen Typzusammentreffen, so uberwiegt stets der String!

Ferner muss die Reihenfolge der Befehlsabarbeitung berucksichtigt werden:solange keine Klammern gesetzt werden geschieht die Ausfuhrung der Anwei-sungen stets von links nach rechts, was manchmal verwirrende Auswirkungenhaben kann:

JavaScript Anweisung Variable s enthalt nun folgen-den Text

s = 1 + 2 + “ Kugeln Eis“; 3 Kugeln Eiss = “Anzahl Eiskugeln: “+ 1 + 2; Anzahl Eiskugeln: 12

Die wichtigsten Operatoren fur Strings:

Operator Beschreibung Beispiel+ Verbindet zwei Strings zu ei-

nemx = “Java“;y = “Script“;z = x + y;→ z enthalt nun “JavaScript“

< Vergleich auf alphabetischeReihenfolge:liefert true falls der ersteOperand im Alphabet vordem zweiten kommt, sonstfalse.

x = “JavaScript“;y = “HTML“;x <y;→ Auswertung ergibt false

> Vergleich auf alphabetischeReihenfolge:liefert true falls der ersteOperand im Alphabet nachdem zweiten kommt, sonstfalse.

x = “JavaScript“;y = “HTML“;x >y;→ Auswertung ergibt true

17


2.3 Vergleichsoperatoren

Operator Beschreibung Beispiel== Vergleich zweier Variablen bezuglich

ihres Wertes. Bei Gleichheit wirdtrue zuruckgegeben, sonst false.Falls die zwei Variablen unterschied-lichen Typs sind, findet eine Typ-konvertierung statt. Objekte, Ar-rays und Funktionen werden nachReferenz verglichen. Dies bedeu-tet dass zwei Elemente diesen Typsnur gleich sein konnen wenn sie aufdas gleiche Objekt verweisen. Ist ei-ne Variablen mit null belegt unddie andere undefiniert werden sie alsgleich angesehen.

x = 1;y = 4;x == y;→ Auswertung ergibt false

!= Vergleich zweier Variablen bezuglichihres Wertes. Bei Ungleichheit wirdtrue zuruckgegeben. Die Regelnfur den Vergleich sind identisch zum’==’ Operator.

x = 1;y = 4;x ! = y;→ Auswertung ergibt true

=== Zwei Variablen werden auf Iden-titat verglichen. Bei Gleichheit wirdtrue zuruckgegeben. Die Regelnfur den Vergleich sind identisch zum’==’ Operator allerdings findet kei-ne Typkonvertierung statt und einemit null belegte Variable wird voneiner undefinierten unterschieden!

!== Falls keine Identitat vorliegt wirdtrue zuruckgegeben.

< Ruckgabewert ist true falls der er-ste Operand kleiner ist als der zwei-te, sonst false.

x = 15;y = 6;x<y;→ Auswertung ergibt false

> Ruckgabewert ist true falls der er-ste Operand großer ist als der zwei-te, sonst false.

x = 15;y = 6;x>y;→ Auswertung ergibt true

<= Ruckgabewert ist true falls der er-ste Operand kleiner oder gleich istals der zweite, sonst false.

>= Ruckgabewert ist true falls der er-ste Operand großer oder gleich istals der zweite, sonst false.

18


2.4 Logische Operatoren

Operator Beschreibung Beispiel&& Bool’sche UND-Verknupfung.

Es wird zuerst der Ausdrucklinks des Operators ausgewertet.Sollte dieser true ergeben - undauch nur dann - so wird auchder rechte Ausdruck ausgewertet.Ergibt dieser ebenfalls true, soist der Ruckgabewert true, sonstfalse.

x = 1;y = 7;x < 5 && y > 5;→ Auswertung ergibt true

‖ Bool’sche ODER-Verknupfung.Es wird zuerst der Ausdrucklinks des Operators ausgewertet.Sollte dieser false ergeben - undnur dann - wird auch der rech-te Ausdruck ausgewertet. Soll-te dieser true sein, so ist auchder Ruckgabewert true, sonstfalse.

x = 1;y = 7;x > 5 ‖ y < 5;→ Auswertung ergibt false

! Invertierung eines Wertes. x = true;y = !x;→ y ist nun false

19


2.5 Bit Operatoren

Diese Operatoren dienen der Low-level Bearbeitung von Binarzahlen und wer-den in JavaScript ublicherweise nicht verwendet. Sie sind hier nur der Vollstandigkeithalber aufgelistet.

Operator Beschreibung Beispiel<< Alle Bits des ersten Operanden werden

um die Anzahl Stellen, wie sie derzweite Operand angibt (0 .. 31) nachlinks geschoben. Enthalt der ersteOperand eine positive Zahl, so werdenrechts Nullen nachgeschoben, ist erdagegen negativ, so werden Einseneingefugt. Das Verschieben von Bitsentspricht pro verschobener Stelle derMultiplikation mit zwei.

Um das Beispiel gut zu verstehenempfiehlt sich die Umwandlung derZahlenwerte in Binarschreibweise!

x = 3;x << 1;→ Nun enthalt x den Wert 6

>> Bitweises nach rechts schieben (ver-gleiche mit dem << Operator). DasVerschieben von Bits entspricht proverschobener Stelle der Division durchzwei, wobei dann nur der Wert vor demKomma zur Verfugung steht.

x = 3;x >> 1;→ Nun enthalt x den Wert 1

>>> Wie >>= Operator, nur dass von linksgenerell Nullen nachgeschoben werden.

& Bitweise UND-Verknupfung.Das bedeutet, dass entweder das Bitin Operand eins, und das korrespon-dierende Bit in Operand zwei eins seinmussen um bei der Verknupfung ge-setzt zu werden.

| Bitweise ODER-Verknupfung.Das bedeutet, dass entweder das Bitin Operand eins, oder in Operand zweioder jedoch beide eins sein mussen umbei der Verknupfung gesetzt zu werden.

ˆ Bitweise Exklusiv-ODER Ver-knupfung.Das bedeutet, dass entweder das Bitin Operand eins, oder das korrespon-dierende Bit in Operand zwei eins seinmuss (aber nicht beide), um bei derVerknupfung dieses Bit zu setzen.

20


2.6 Zuweisungs-Operatoren

Nachfolgende Tabelle soll lediglich die Wirkung der verkurzten Schreibweisenaher bringen. Selbstverstandlich kann diese Verbindung von Operator undZuweisung auch mit den restlichen Operatoren (zum Beispiel den bitweisenOperatoren) erfolgen.

Operator Beschreibung Beispiel= Einfache Zuweisung.

Die Ausfuhrung geschieht stets vonrechts nach links.

x = 5;y = 3;z = 2;y = z = x;→ x, y und z haben Wert 5

+ = Addition und Zuweisung auf eineder beiden Variablen

a + = b;entspricht: a = a + b

− = Subtraktion und Zuweisung auf eineder beiden Variablen.

a − = b;entspricht: a = a − b

∗ = Multiplikation und Zuweisung aufeine der beiden Variablen

a ∗ = b;entspricht: a = a ∗ b

/ = Division und Zuweisung auf eine derbeiden Variablen

a / = b;entspricht: a = a/b

% = Modulo Operation und Zuweisungauf 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 mitdrei Operanden. Erst wird der Aus-druck vor dem ? ausgewertet. Istdieser true, so wird der Wert deszweiten Operanden (oder Operati-on) zuruckgegeben, ansonsten derWert der letzten Operation.

a < 0?a + 1 : a/5→ Falls a kleiner Null, gib a+1 zuruck, sonst das Ergebnisder Division a/5

, Komma-Operator.Zum Abtrennen verschiedener An-weisungen innerhalb eines Aus-drucks.

a = 1, b = 9, c = 5;

. Punkt-Operator.Zum Ansprechen von Eigenschaftenoder Methoden eines Objektes.

document.lastModifieddocument.write(’Helloworld’)frames[0].length

[ ] Wie Punkt-Operator und zusatzlichzum Ansprechen von Array-Elementen.

document[’lastModified’]arrayElement[i]document.forms[j+1]

( ) Operator zum Funktionsaufruf. document.close()Math.sin(x)window.open()

typeof Aufgrund der automatischenTypkonvertierung kann es passie-ren, dass der aktuelle Typ einerVariablen nicht eindeutig klar ist.Der typeof Operator liefert danneinen von drei moglichen Stringszuruck.

var Zahl 5;Typ = typeof Zahl;→ Ruckgabewert: “number“

var Zeichen = ’Hallo’;Typ = typeof Zeichen;→ Ruckgabewert: “string“

var istWahr = trueTyp = typeof istWahr;→ Ruckgabewert: “boolean“

2.8 Rangfolge der Operatoren

Wie es in der herkommlichen Mathematik die bekannte Punkt-vor-Strich-Regelgibt, so ist auch in JavaScript die Reihenfolge der Abarbeitung verschiedenerOperatoren genau festgelegt.

Die Klammern besitzen dabei die besondere Bedeutung aufgrund ihrer hochstenPrioritat die Abarbeitung von Operationen zu beeinflussen.

22


Rang Operator-zeichen

Operatorname Operatortyp

1 ( ) [ ] Klammer Gruppierung2 !

+ + −−−∼

NichtInkrement, DekrementNegationNicht

Logischer OperatorArithmetischer OperatorArithmetischer OperatorBit Operator

3 ∗/%

MultiplikationDivisionModulo-Operation

Arithmetische Operatoren

4 + Aneinanderreihung String Operator5 +

−AdditionSubtraktion

Arithmetische Operatoren

6 <<>>>>>

LinksverschiebungRechtsverschiebungNull-fill-Rechtsverschiebung

Bit-Operatoren

7 <><=

>=

Erster Wert ist kleinerErster Wert ist großerErster Wert ist kleineroder gleichErster Wert ist großeroder gleich

Vergleichsoperatoren

8 ==! = <>

Werte sind gleichWerte sind ungleich

Vergleichsoperatoren

9 & UND Bit-Operator10 ˆ Exklusiv-Oder Bit-Operator11 | ODER Bit-Operator12 && UND Logischer Operator13 ‖ ODER Logischer Operator14 ? : Bedingung Konditionaler Operator15 =

+ =− =/ =& =% =ˆ=|=<<=>>=>>>=

Zuweisungsoperatoren Zuweisungsoperatoren

16 , (Komma) Aneinanderreihung

23


3 Arbeiten mit Zeichenketten (Strings)

Nach meiner Erfahrung ist eine der haufigsten Einsatzgebiete von JavaScriptdie Uberprufung von Formulareingaben. Da es sich hierbei sehr oft um tex-tuale (=string) Werte handelt, sollen hier einige Moglichkeiten zur Zerlegung,Uberprufung und Auswertung vorgestellt werden. Ich betone ausdrucklich, dassdies eine Einfuhrung und deshalb nicht vollstandig ist!

Soweit nicht ausdrucklich darauf hingewiesen wird, werden bei allen vorge-stellten Methoden die Zeichen jedes String beginnend mit Null durchgezahlt.Das bedeutet, dass in dem String “JavaScript“ das Zeichen “S“ den Index 4hat!

Die in eckigen Klammern [ ] aufgefuhrten Argumente sind optional, d.h. siesind nicht zwingend erforderlich.

3.1 String.charAt(n)

Argumenten Index des Zeichens das zuruck gegeben werden soll.

RuckgabewertDas n-te Zeichen der Zeichenkette String.

ErlauterungFalls n nicht zwischen 0 und string.length-1 liegt, dann wird ein leerer Stringzuruck gegeben. Da JavaScript keine leeren Strings im engsten Sinn kennt, hatauch dieser Ruckgabewert die Lange 1.

Beispielvar text = ’JavaScript’;text.charAt(2); → Ruckgabewert: “v“text.charAt(4); → Ruckgabewert: “S“

3.2 String.concat(value, . . . )

Argumentevalue, . . . Ein oder mehrere Werte, die an die Zeichenkette

String angefugt werden sollen.

RuckgabewertEin neuer String, der durch das anfugen samtlicher Argumente entstanden ist.

Erlauterungconcat() konvertiert falls notig zuerst samtliche Argumente zu Zeichenkettenbevor sie an String angefugt werden. Die ursprungliche Zeichenkette Stringwird nicht verandert, sondern ein neuer String zuruck gegeben!

24


Beispielvar text1 = ’1 plus 2’;var text2 = ’ macht ’;text1.concat(text2, ’3’); → Ruckgabewert: “1 plus 2 macht 3“

3.3 String.indexOf(substring, [start])

Argumentesubstring Die Zeichenkette, nach der innerhalb von String ge-

sucht werden soll.start Optionaler Ganzzahlwert, der eine Startposition in-

nerhalb von String angibt, ab der nach substringgesucht werden soll.

RuckgabewertFalls substring innerhalb von String gefunden wurde, wird der Index des er-sten Zeichens von substring an der ersten Fundstelle zuruck gegeben. Bleibtdie Suche erfolglos, so ist der Ruckgabewert −1.

ErlauterungIn Navigator 2 und 3 wird bei einem Startwert, der großer ist als die Lange derZeichenkette ein leerer String anstatt −1 zuruck gegeben.

Beispielevar text = ’abcxxabcxxabc’;text.indexOf(’xx’); → Ruckgabewert: “3“text.indexOf(’xx’,4); → Ruckgabewert: “8“text.indexOf(’xx’,10);→ Ruckgabewert: “-1“

3.4 String.lastIndexOf(substring, [start])

Argumentesubstring Die Zeichenkette, nach der innerhalb von String ge-

sucht werden soll.start Optionaler Ganzzahlwert, der eine Startposition in-

nerhalb von String angibt, ab der nach substringgesucht werden soll.

RuckgabewertFalls substring innerhalb von String gefunden wurde, wird der Index des er-sten Zeichens von substring an der letzten Fundstelle zuruck gegeben. Bleibtdie Suche erfolglos, so ist der Ruckgabewert −1.

ErlauterungDie Suche innerhalb String erfolgt von rechts nach links! Da die Indexierungder einzelnen Zeichen innerhalb des String jedoch weiterhin von links nach

25


rechts erfolgt gibt der Ruckgabewert die letzte Position des substring vor derPosition start an.

Beispielevar text = ’abcxxabcxxabc’;text.lastIndexOf(’xx’); → Ruckgabewert: “8“text.lastIndexOf(’xx’,8); → Ruckgabewert: “8“text.lastIndexOf(’xx’,9); → Ruckgabewert: “8“text.lastIndexOf(’xx’,6); → Ruckgabewert: “3“

3.5 String.length

RuckgabewertAnzahl der Zeichen von String.

ErlauterungDiese String Eigenschaft ist nur lesbar und kann nicht verandert werden. DerAufruf dieser Eigenschaft erfolgt ohne runde Klammern! Der Index des letztenZeichens von String ist stets String.length - 1.

Beispielvar text = ’JavaScript’;text.length; → Ruckgabewert: “10“

3.6 String.split(delimiter)

Argumentedelimiter Ein Zeichen oder eine Zeichenkette, an welcher String

aufgeteilt werden soll. Sollte kein Argument angege-ben sein, enthalt das zuruck gegebene Array lediglichein Element: String. Wird dagegen ein Leerzeichen(“ “) als Argument ubergeben, so wird String nachjedem einzelnen Zeichen auseinander gebrochen.

RuckgabewertEin Array mit Zeichen(ketten), die beim auseinanderbrechen von String anden durch das Argument vorgegebenen Grenzen entstanden sind.

ErlauterungDas Begrenzungszeichen selbst wird nicht im Array abgelegt.

Beispielevar 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])

Argumentestart Gibt den Startindex der zu extrahierenden Zeichenket-

te an. Falls dieser Wert negativ ist, so wird von rechtsnach links gezahlt, wobei das letzte Zeichen −1, dasvorletzte Zeichen −2, usw. entspricht.

length Anzahl der Zeichen die ausgehend vom Startindex ex-trahiert werden sollen. Wird dieser Wert nicht angege-ben, so werden ausgehend vom Startindex alle Zeichenbis zum Ende von String zuruck gegeben.

RuckgabewertDer Teil der Zeichenkette String, welcher durch die Indizes start und even-tuell length bestimmt sind.

ErlauterungDie original Zeichenkette String wird durch diese Operation nicht verandert.

Beispielevar text = ’abcdefg’text.substr(2,2); → Ruckgabewert: “cd“text.substr(3); → Ruckgabewert: “defg“text.substr(-3,2) → Ruckgabewert: “ef“

3.8 String.substring(from, [to])

Argumentefrom Gibt den Index des ersten zu extrahierenden Zeichens

an. Der Wert muss zwischen 0 und string.length-1liegen.

to Index des ersten nicht mehr zu extrahierenden Zei-chens! Muss um mindestens eins großer sein als from.Der Wert muss zwischen 1 und string.length liegen.

RuckgabewertDer Teil der Zeichenkette String, welcher durch die Indizes from und eventuellto bestimmt sind.

27


ErlauterungDie original Zeichenkette String wird durch diese Operation nicht verandert.Sollte der Wert from großer sein als to, so werden die zwei Werte automatischgetauscht, und erst anschließend die Operation ausgefuhrt.

Beispielevar text = ’abcdefg’text.substring(2,4); → Ruckgabewert: “cd“text.substring(3); → Ruckgabewert: “defg“text.substring(3,2); → Ruckgabewert: “c“

3.9 String.toLowerCase()

RuckgabewertEinen neuen String, in dem alle Buchstaben ausschließlich als Kleinbuchstabenenthalten sind.

Beispielvar text = ’JavaScript Tutorial’text.toLowerCase(); → Ruckgabewert: “javascript tutorial“

3.10 String.toUpperCase()

RuckgabewertEinen neuen String, in dem alle Buchstaben ausschließlich als Großbuchstabenenthalten sind.

Beispielvar text = ’JavaScript Tutorial’text.toUpperCase(); → Ruckgabewert: “JAVASCRIPT TUTORIAL“

28


4 Regular Expressions

’Regular Expressions’ erlauben die sehr flexible Formulierung von Mustern (eng-lisch: patterns) nach welchen innerhalb einer Zeichenkette gesucht werden soll.

Aber warum denn schon wieder etwas um Zeichenketten zu bearbei-ten?!?! Da wurden doch bereits im Kapitel 3 so viele Moglichkeitenvorgestellt.

Um diese Frage zu beantworten mochte ich ein kleines Beispiel vorstellen:Stellen sie sich vor, dass in ein Formular eine Email Adresse eingetragen werdensoll. Bevor das Formular an den Server geschickt wird soll die Syntax der EmailAdresse uberpruft werden. Da es sich hierbei um eine außerst komplexe Aufgabehandelt sollen lediglich folgende Punkte gepruft werden:

1. Es mussen mindestens drei Zeichen vor dem @ Symbol stehen (erlaubtsind Groß- und Kleinbuchstaben sowie Zahlen)

2. Nach den @ Symbol mussen wiederum mindestens drei der im vorherigenPunkt genannten Zeichen stehen

3. Zum Abschluss folgt ein Punkt mit darauf folgenden zwei, drei oder vierBuchstaben (keine Zahlen mehr erlaubt!) als Top-Level Domain

So, und nun versuchen sie einmal die Einhaltung dieser Bedingungen mitden bisher vorgestellten Moglichkeiten zu uberprufen. Dafur ist ein erheblicherAufwand notig.

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 aufwandig - und auch kryptisch - aus,aber am Ende dieses Kapitels werden die einzelnen Ausdrucke verstandlich sein(siehe auch Ubung 1).

Noch ein Tip: da sich die Notation von Regular Expressions in JavaScriptfast komplett an die Notation in der Skriptsprache Perl anlehnt, konnen vieleweitere Infos und Beispiele zu Suchmustern im Internet gefunden werden.

4.1 Statische Abfragen

Statische Abfragen werden hart codiert - d.h., sie konnen nicht zur Laufzeitverandert werden. Dafur haben sie aber den Vorteil sehr einfach in der Hand-habung zu sein.

Genau so wie Strings stets in Anfuhrungszeichen angegeben werden, so ste-hen die Suchmuster, die gefunden werden sollen, stets in einen fuhrenden und

29


einen folgenden Schragstrich (/) gepackt. Der folgende Ausdruck wurde also te-sten, 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, enthalt die Variable pos den Index desersten Zeichens der ersten Fundstelle (hier: 12). Achtung: auch hier hat daserste Zeichen des String den Index 0! Kommt das Suchmuster in dem Stringnicht vor, dann wird der Wert -1 zuruck gegeben.

Hinter dem schließenden Schragstrich kann noch eines oder beide der zweierlaubten Attribute angefugt werden. Ein “g“ um eine globale Suche durch-zufuhren und somit alle Fundstellen des Musters zu erhalten (ublicherweisebricht der Suchvorgang nach dem ersten Fund ab), ein “i“ fur eine case-insensitiveSuche (d.h., die Gross- und Kleinschreibung wird nicht berucksichtigt), oder ein“gi“ um beide gleichzeitig anzuwenden.

4.2 Dynamische Abfragen

Dynamische Abfragen konnen variabel erzeugt werden. So ist es denkbar, dassein Besucher einer Webseite in ein Formular das Suchmuster eintragt, und dieserFormularwert fur eine Suche verwendet wird.

Dafur dient der RegExp()-Konstruktor. Er nimmt ein oder zwei Argumen-te, und generiert damit ein neues Suchmuster. Das erste Argument ist dieZeichenkette, nach der gesucht werden soll - also der Teil, welcher bei stati-schen Abfragen zwischen den Schragstrichen (/) steht. Das zweite Argumentist optional und bestimmt den Suchraum.

Beim ersten Argument ist etwas Vorsicht geboten: es wird stets als Stringin Anfuhrungszeichen ubergeben. Braucht man innerhalb der Definition desSuchmusters jedoch einen Backslash (\), so muss dieser stets durch einen wei-teren Backslash escaped werden. Das liegt daran, dass in Strings der Backslashals 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 Moglichkeiten: es ist ein “g“ (furglobale Suche), ein “i“ (fur case-insensitive Suche - d.h., die Gross- und Klein-schreibung wird nicht berucksichtigt), ein “gi“ um beide zu gleichzeitig anzu-wenden oder man lasst es weg.

Um also alle Stellen mit drei aufeinander folgenden Ziffern innerhalb desStrings 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 diecompile() Methode notig. Sollen also auf einmal funf statt drei aufeinanderfolgende 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() dieeinfachere. Sie ubernimmt als Argument einen String, und testet, ob in diesemString das durch RegExp() definierte Suchmuster vorkommt. Ist das patternvorhanden, wird true zuruck gegeben, sonst false.

var pattern = /java/i;var abfrage = pattern.test("JavaScript ist gut!");

Durch Anwendung des “i“ Attributes fuhrt obige Abfrage zu einem Treffer,und die Variable abfrage enthalt den Wert true.

4.4 RegExp Methode: exec()

Die Methode exec() ubernimmt einen String als Argument und sucht darinnach dem durch RegExp() definierten Suchmuster. Wird das Muster nicht ge-funden wird null zuruck gegeben, ansonsten ein Array. Das Arrayelement mitIndex 0 enthalt den gefundenen Suchstring, alle weiteren Arrayelemente enthal-ten die Teilstrings, welche durch die geklammerten pattern definiert werden.

Des weiteren enthalt die index Eigenschaft den Index der Fundstelle, unddie 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 unmit-telbar dem gefundenen Suchmuster folgt. Wird exec() nun ein weiteres Malfur die selbe RegExp aufgerufen, wird die Suche nicht am Anfang des Stringsbegonnen, sondern an der Stelle, die durch lastIndex bestimmt ist. Wurdehingegen kein Treffer gelandet, so wird lastIndex auf 0 gesetzt. Dies erlaubteinem alle moglichen 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 nutzliche Eigenschaften des RegExp Objektes vorgestelltwerden:

31


Eigenschaft Beschreibungsource Read-only String, der das reine Suchmuster enthaltglobal Read-only Eigenschaft, die angibt, ob die Suche das

“g“ Attribut enthaltignoreCase Read-only Eigenschaft, die angibt, ob die Suche das

“i“ Attribut enthaltlastIndex Lese- und schreibbare Eigenschaft, welche den Index

des ersten Zeichens nach einem gefundenen Suchstringenthalt

leftContext Der Text links vom zuletzt gefundenen SuchstringrightContext Der Text rechts vom zuletzt gefundenen SuchstringlastMatch Den zuletzt gefundenen SuchstringlastParen Den Suchstring, welcher durch den letzten geklammer-

ten Ausdruck des patterns bestimmt wird$1, $2, ..., $9 Die Suchstrings, welche durch die ersten neun geklam-

merten Ausdrucke des patterns bestimmt werden

4.6 Patterns formulieren

Wie bereits mehrfach in Beispielen gezeigt, wird das einfachste Suchmusterdurch die Aneinanderreihung von Buchstaben, Zahlen und eventuell Zeichenaufgebaut. Um also nach der Zeichenkette “Java“ zu suchen lautet die Anwei-sung:

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 zu-sammen 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 lasst 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

ofters als m mal{n,} Finde das voranstehende Zeichen mindestens n mal (oder eben

ofters){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 ent-

spricht {1,}* Finde das voranstehende Zeichen kein oder mehrmals. Dies

entspricht {0,}

Außerdem gibt es noch die Moglichkeit Zeichen zu gruppieren, Alternativenzu 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 samtlicheWiederholungszeichen wie ?, +, *, ... anwenden kann. Außer-dem werden geklammerte Ausdrucke fur eine spatere Referen-zierung gemerkt.

| Alternative. Finde entweder den Ausdruck links des senkrech-ten Strichs, oder den rechts davon.

\n Referenz. Findet die gleiche Zeichenfolge (nicht das allgemeinformulierte Pattern!) welches bereits bei der n-ten rundenKlammer gefunden wurde. Die Gruppierungen werden anhandder linken, geoffneten Klammern von links nach rechts durch-numeriert.

Zu guter Letzt kann auch noch die Position der gewunschten Fundstellevorgegeben werden:

33


Ausdruck Bedeutungˆ Finde nachfolgendes Pattern am Anfang eines Strings, bzw. bei

einer Suche uber mehrzeiligen Text am Anfang jeder Zeile$ Finde voranstehendes Pattern am Ende eines Strings, bzw. bei

einer Suche uber mehrzeiligen Text am Ende jeder Zeile\b Finde eine Wortbegrenzung. Das heisst, es wird die Grenze zwi-

schen einem \w und einem \W Zeichen gefunden. Dies hilft umein einzelnes Wort zu suchen. Soll z.B. nur der String “Java“gefunden werden, ohne jeglichen Zusatz wie “Script“ so mussteman nach /\sJava\s/ suchen. Dadurch hatte man aber stetsein fuhrendes und ein folgendes Leerzeichen! Besser ist dasPattern /\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 beson-dere Bedeutung haben (wie z.B. der Punkt oder das Fragezeichen), gesuchtwerden, so mussen diese durch ein Escape Zeichen gekennzeichnet werden:

EscapeZeichen

Was wird gesucht?

\f Form feed: Wagenvorlauf\n Newline: Zeilenumschaltung\r Carriage return: Harte Zeilenumschaltung\t Tabulator\v Vertikaler Tabulator\/ Schragstrich: /\\ Backslash: \\. Punkt: .\* Stern: *\+ Plus: +\? Fragezeichen: ?\ | Senkrechter Strich: |$ Geoffnete runde Klammer: ($ Geschlossene runde Klammer: )\[ Geoffnete eckige Klammer: [\] Geschlossene eckige Klammer: ]\{ Geoffnete 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 be-

stimmt wird

34


4.8 Beispiele fur Pattern

Nachfolgend sind einige Beispiele, die zum besseren Verstandnis beitragen sol-len:

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 optionalnoch eine weitere Zahl folgen kann

/\s+java\s+/ Finde genau den String “java“ mit einem oder mehrerenfuhrenden und folgenden Leerzeichen

/[ˆ“]*/ Finde keines oder mehrere Zeichen, die jedoch keinAnfuhrungszeichen sein durfen

/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 Anfuhrungszeichen steht.

Dazu wird zuerst nach einem einfachen oder doppel-ten Anfuhrungszeichen gesucht. Dann kann (muss abernicht) eine beliebig lange Zeichenkette folgen, die allesaußer eben Anfuhrungszeichen enthalten darf. Am En-de muss wieder ein Anfuhrungszeichen stehen, und zwar(durch die Referenz \1 bestimmt) genau das gleiche wieam Anfang, also ein einfaches oder ein doppeltes.

/ˆ(mo)/i Finde am Anfang eines Strings (bzw. bei mehrzeiliger Su-che am Anfang jeder Zeile) die Buchstabenkombination“mo“ egal ob sie klein oder groß geschrieben ist.

/[\.!\?]$/ Finde am Ende eines Strings (bzw. bei mehrzeiligerSuche am Ende jeder Zeile) entweder einen Punkt, einAusrufe- oder ein Fragezeichen. Der Punkt und das Fra-gezeichen mussen im Pattern escaped werden!

/ˆJavaScript$/ Finde den String “JavaScript“ wenn er allein in einerZeile steht (da er gleichzeitig am Zeilenanfang und amEnde stehen muss).

35


5 Programmablauf steuern

Ublicherweise erfolgt die Abarbeitung der JavaScript Befehle sequentiell - dasheisst: einer nach dem anderen, genau in der Reihenfolge, wie sie beim Pro-grammieren eingegeben wurden.

Oft sollen aber manche Anweisungen mehrmals hintereinander durchgefuhrtwerden, oder nur dann, wenn eine bestimmte Bedingung erfullt ist. Genau dieskann man mit Anweisungsblocken und Schleifen erreichen.

In diesem Kapitel sollen anhand ganz einfacher - und dadurch uberschaubarer- Beispiele die wichtigsten Strukturen zum Beeinflussen des Programmablaufsvorgestellt werden.

5.1 Anweisungsblock

Um zwei oder mehr Anweisungen, die mehrmals auf der selben Seite benotigtwerden, nicht wiederholt eintippen zu mussen bedient man sich Anweisungs-blocken.

Anweisungsblocke beginnen stets mit dem Schlusselwort function. An-schließend folgt der Name des Blockes, fur den die gleichen Namenskonven-tionen gelten wie fur Variable (siehe Seite 11). Direkt dahinter folgt ein Paarrunde Klammern: ( ). Der eigentliche Anweisungsblock steht dagegen in einemPaar aus geschweiften Klammern: { }.

Den Anweisungsblocken konnen auch Werte, die sie fur die Bearbeitungbrauchen, ubergeben werden. Diese Werte nennt man Parameter. Sie stehenimmer in den runden Klammern direkt hinter dem Namen. Um mehrere Wertean einen Anweisungsblock zu ubergeben werden sie durch Kommas separiertaufgelistet.

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 Fenstererscheinen lassen, das aber jedes Mal eine andere Meldung ausgibt. Dann solltensie sich einen Anweisungsblock schreiben, dem sie den entsprechenden Textubergeben, und dann von dem Code innerhalb des Blockes das Meldungsfensterausgeben lassen.

Der Anweisungsblock nach dem </TITLE> Tag in <SCRIPT>-Tags lautethierfur:

36

Und hier zwei mogliche Aufrufe des Anweisungsblockes:

meldung("Sie haben die Demo gestartet!");meldung("Schon wieder ein Pop-up");

5.2 Funktion

Was ist jetzt aber zu tun, wenn man zwar mehrmals den gleichen Code aufeiner Seite braucht, aber jedesmal auf einen Ruckgabewert angewiesen ist?

Dann bedient man sich der Funktionen! Der Unterschied zu den reinen An-weisungsblocken besteht einzig und allein darin, dass Funktionen stets einenkonkreten Wert zuruck liefern, wahrend reine Anweisungsblocke autonom eineFunktion erfullen. Welcher Wert zuruckgeliefert wird bestimmt das Schlusselwortreturn.

Nehmen wir mal an, sie haben des ofteren zwei Eingabefelder: eines fur denVornamen und eines fur den Nachnamen. Aus irgendeinem Grund benotigen sieden Namen aber in einer Variablen. Dann werden sie sich einfach eine Funktionschreiben:

function zusammenfuegen(vn, nn){return (vn + " " + nn);

}

Sollten sie nun auch noch regelmaßig die Lange des zusammengesetztenNamens wissen wollen, dann konnte einfach eine weitere Funktion aufgerufenwerden, die ihrerseits wieder auf die erste zuruckgreift:

function laenge(vn, nn){text = zusammenfuegen(vn, nn);return (text.length);

}

Der Einfachheit halber wird im weiteren Verlauf dieses Kurses nicht mehrstrikt zwischen Anweisungsblocken und Funktionen unterschieden.

5.3 If-Abfrage

Sollen bestimmte Befehle nur ausgefuhrt werden wenn eine Bedingung erfulltist, so verwendet man eine if Abfrage: Wenn die Bedingung erfullt ist, dannwerden die Anweisungen ausgefuhrt.

37


Die Grundnotation einer if-Abfrage:

if (Bedingung) {Anweisung 1;Anweisung 2;...

}

Zur Syntax:

• Das Schlusselwort if leitet die Bedingung ein.

• Die Bedingung steht in runden Klammern.

• Als Bedingung ist ein logischer Ausdruck anzugeben, der zu true oderfalse ausgewertet werden kann.

• Wird die Bedingung zu false ausgewertet werden alle Anweisungen inden geschweiften Klammern ignoriert.

• Nach dem Ende des Anweisungsblockes werden alle weiteren Befehle wiegewohnt der Reihe nach abgearbeitet.

• Im Sonderfall, dass nur eine Anweisung der Bedingung folgt, kann auf diegeschweiften Klammern verzichtet werden.

Bei nachfolgendem Beispiel wird nach Eingabe einer Zahl in der if-Abfrageentschieden, ob diese Zahl gerade oder ungerade ist. Dies geschieht durch dieModulo-Rechnung, bei welcher der Rest einer Division zuruck gegeben wird.Selbst wenn die eingebebene Zahle grosser 20 ist (wie eigentlich verlangt) erfolgtkeine Fehlermeldung. Eine Ausgabe erfolgt nur bei gerader Zahl.

function if_beispiel() {zahl = prompt("Geben sie eine Zahl kleiner 20 ein: ","");

if (zahl % 2 == 0)alert(zahl + " ist eine gerade Zahl.");

}

5.4 If...else-Abfrage

Die if...else Abfrage legt nicht nur fest was passieren soll falls eine Bedingungerfullt ist, sondern auch was bei Nichterfullung geschieht. Dazu wird dem An-weisungsblock der if-Anweisung ein weiterer Block nachgestellt, der durch dasSchlusselwort else eingeleitet wird: Wenn die Bedingung erfullt ist, dann fuhredie Anweisungen des ersten Blockes aus, sonst die Befehle im zweiten Block.

Die Grundnotation einer if...else-Abfrage:

38


if (Bedingung) {Anweisung A1;Anweisung A2;...

} else {Anweisung B1;Anweisung B2;...

}

Zur Syntax: Fur die if-Bedingung gelten die gleichen Regeln wie bei dereinfachen if-Anweisung. Trifft die Bedingung zu, so werden die Befehle in demnachfolgenden Block abgearbeitet, ansonsten werden nur die Anweisungen inden geschweiften Klammern hinter dem else beachtet.

Auch bei nachfolgendem Beispiel wird die Eingabe mit einer if-Abfrageuberpruft. Sollte hier eine Zahl grosser 20 eingegeben werden, so erscheint eineFehlermeldung. Ansonsten wird die Ausgabe fur gerade und ungerade Zahlenunterschiedlich gestaltet.

function if_then_beispiel() {zahl = prompt("Geben sie eine Zahl kleiner 20 ein: ","");

if (zahl >= 20) {alert("Sollte die Zahl nicht kleiner 20 sein?");

}else if (zahl % 2 == 0) {alert(zahl + " ist eine gerade Zahl.");

}else {alert(zahl + " ist eine ungerade Zahl!");alert("Ihre Wurzel ist " + Math.sqrt(zahl));

}}

5.5 Switch-Abfrage

Soll eine Variable auf verschiedene (bekannte) Werte gepruft werden, so lasstsich diese Aufgabe mit einer switch-Anweisung kurzer und ubersichtlicher erle-digen als mit hintereinander folgenden if- Anweisungen.

Das Schlusselwort switch und die in runder Klammer folgende zu uberprufendeVariable leiten den Anweisungsblock ein, der beliebig viele case-Verzweigungenenthalten kann. Einem case folgen mogliche Werte der Variablen und durcheinen Doppelpunkt getrennt die JavaScript-Befehle, die ausgefuhrt werden sol-len, falls die Variable eben diesen Wert enthalt. Am Ende der Anweisungenkann ein break stehen, um zu verhindern, dass weiter gepruft wird, nachdem

39


die Variable schon in einem Fall abgehandelt wurde. Ganz zum Schluss kannhinter dem Schlusselwort default noch ein Anweisungsblock angegeben wer-den, der dann abgearbeitet wird, falls keine der davor aufgelisteten Werte mitdem Wert der Variablen ubereinstimmt.

Dies klingt zwar alles hochkompliziert, doch die Umsetzung gestaltet sichnicht so schwierig. Sehen sie sich am besten das nachfolgende Beispiel an.

Nach Eingabe einer Zahl wird eine darauf abgestimmte Ausgabe vorgenom-men. Sollte ein Wert außerhalb des erlaubten Bereichs eingegeben worden seinerfolgt eine Fehlermeldung.

function switch_beispiel() {zahl = prompt("Geben sie eine Zahl zwischen 1 und 3 ein: ","");

switch(zahl) {case "1":

alert("1 ist die niedrigste Zahl.");break;

case "2":alert("Die mittlere ist gewaehlt.");break;

case "3":alert("Musste es die hoechste sein?");break;

default:alert("Ihre Eingabe ist falsch!");break;

}}

5.6 While-Schleife

Eine while-Schleife wird so lange wiederholt wie die Bedingung erfullt bleibt.Ist diese schon beim ersten Test nicht erfullt, werden die Anweisungen innerhalbdes Schleifenrumpfes gar nicht ausgefuhrt.

Die Variablen der Bedingung mussen innerhalb des Schleifenblockes verandertwerden, da die Bedingung sonst immer erfullt ware, und dies zu einer Endlos-schleife fuhren wurde.

Merke: Die while-Schleife ist eine keine oder mehrmals zu durchlaufendeSchleife!

Das Gerust einer while-Schleife:

while (Bedingung) {Anweisung 1;Anweisung 2;

40


...Veraendern der Bedingung;

}

Im folgenden Beispiel dient die Begrenzung der einzugebenden Zahl auf 50lediglich dazu die Lange der Ausgabeliste zu beschranken! Die Funktion istexakt die selbe wie beim Beispiel zur for-Schleife (siehe Seite 42).

function while_beispiel() {text = "";eingabe = prompt("Bitte eine Zahl zwischen 0 und 50 eingeben: ","");zahl = parseFloat(eingabe);zaehler = 0;while (2*zaehler < zahl) {text = text + (2 * zaehler) + " ";zaehler++;

}alert("Alle geraden Zahlen kleiner " + zahl + ":\n\n" + text);

}

5.7 Do...while-Schleife

Wahrend eine while-Schleife zuerst pruft ob eine Bedingung erfullt ist, wird diedo...while-Schleife immer zuerst einmal durchlaufen, und am Ende des Anwei-sungsblockes wird die Einhaltung der Bedingung gepruft.

Auch hier mussen die Variablen der Bedingung innerhalb des Schleifen-blockes verandert werden, da die Bedingung sonst immer erfullt ware, und dieszu einer Endlosschleife fuhren wurde.

Merke: Die do...while-Schleife ist eine einmal oder mehrmals zu durchlau-fende Schleife!

Das Gerust einer do...while-Schleife:

do {Anweisung 1;Anweisung 2;...Veraendern der Bedingung;

} while (Bedingung);

Im folgenden Beispiel dient die Beschrankung auf eine Maximalzahl von100 lediglich zur Begrenzung der Ausgabeliste. Die do-while-Schleife hat denNachteil, dass sie immer mindestens einmal durchlaufen wird! Dies fuhrt leichtzu ungewollten Ergebnissen. Wird in diesem Beispiel der Wert 1 eingegeben, soerscheint in der Ausgabe ebenfalls 1, obwohl dies sicher nicht kleiner sonderngleich der Eingabe ist!

41


document.write("Hoppla");if (i==2){i++;continue;

}document.write("Hopp");i++;

}

Dieses Beispiel liefert folgende Ausgabe (Beachten Sie den Unterschied zumBeispiel der break Anweisung!):HopplaHoppHopplaHoppHopplaHopplaHoppHopplaHopp

44


6 Cookies

Meist werden Cookies benutzt um Webseiten zu personalisieren, Vorlieben einesBenutzers festzuhalten oder mitzuloggen zum wievielten Mal ein Surfer aufdieser Webseite vorbei kommt.

Cookies sind einfach kleine Dateneinheiten mit maximal 4 Kilobyte, die lokalvom Webbrowser in einem speziellen Verzeichnis gespeichert werden. Sie sindmit einer festen Webseite bzw. einer festen Domain verknupft, und konnen nurvon dieser Adresse ausgehend gelesen bzw. neu beschrieben werden.

Jedes Cookie verfugt uber einen Namen, einen Wert und vier optionale At-tribute, die seine Lebensdauer (expires), seine Sichtbarkeit (path und domain)und die Sicherheit (secure) der Datenubertragung beeinflussen.

6.1 Cookie Attribut: expires

Cookies werden standardmassig nicht dauerhaft gespeichert. Sobald der Web-browser geschlossen wird, sind auch die eben erst gesetzten Cookies geloscht.Um dies zu verhindern, muss ein Verfallsdatum vorgegeben werden. Dies ge-schieht ublicherweise durch die Ermittlung der aktuellen Uhrzeit, des heutigenTages oder des momentanen Jahres, um dazu die erwunschte Lebensdauer ad-dieren zu konnen.

Will man also erreichen, dass das Cookie praktisch fur ewig erhalten bleibt,so setzt man die Verfallsspanne einfach auf zehn Jahre.

Es ist zu beachten, dass bei der Addition von Zeiten stets Millisekundenhinzugezahlt werden! Das hat zur Folge, dass stets eine Multiplikation mit1000 erfolgen muss, sobald man auf volle Sekunden, Minuten, Stunden, usw.kommen will. Hier ein paar Beispiele:

var verfall = new Date();

• Verfallsspanne in einer Stunde:verfall.setTime(verfall.getTime() + 60*60*1000);verfall.setTime(verfall.getHours() + 1);

• Verfallsspanne in einem Tag:verfall.setTime(verfall.getTime() + 60*60*24*1000);

• Verfallsspanne in einem Jahr:verfall.setTime(verfall.getTime() + 60*60*24*365+1000);verfall.setFullYear(verfall.getFullYear() + 1);

6.2 Cookie Attribut: path

Cookies sind stets mit den Webseiten, von welchen aus sie gespeichert wurden,assoziiert. Das hat zur Folge, dass das Cookie auch ausschliesslich von dieser

45


Webseite, den Seiten im gleichen Verzeichnis, oder in Unterverzeichnissen dazuaufgerufen und verandert werden konnen.

Wird also ein Cookie von einer Webseite mit der URLwww.barmetler.de/javascript/uebungen/beispiel1.html gesetzt, dann istes nur von folgenden Dateien erreichbar:

1. Der Datei beispiel.html.

2. Allen Dateien im Verzeichnis www.barmetler.de/javascript/uebungen/.

3. Allen Dateien in Unterverzeichnissen vonwww.barmetler.de/javascript/uebungen/. Das konnte alsowww.barmetler.de/javascript/uebungen/schleifen/anwendung.htmlsein.

Wird das Attribut path auf “/“ gesetzt, dann ist das Cookie fur alle Dateienauf dem Server sichtbar. Im obigen Beispiel entsprache dies www.barmetler.de.

6.3 Cookie Attribut: domain

Gerade bei großen Webauftritten ist es ublich die Inhalte in sogenannte Subdo-mains zu gliedern. Da finden sich dann die Katalogseiten eines Internetshopsunter www.catalog.barmetler.de, die Bestellseiten unter www.order.barmetler.deund der Warenkorb vielleicht unter www.basket.barmetler.de.

Hat sich ein Benutzer einmal in diesem Shop angemeldet, sollen seine Datennaturlich auf allen Seiten gleichermaßen verwendbar sein. Darum muss auchein Cookie von all diesen Adressen zuganglich sein. Hier kommt das domainAttribut ins Spiel.

Wird ein Cookie beispielsweise von einer Seite unterwww.catalog.barmetler.de gesetzt, sein path Attribut ist auf “/“ gesetzt,und sein domain Attribut lautet barmetler.de, dann ist es auch von allenanderen Subdomains aus erreichbar.

Ein Hinweis noch: es ist nicht moglich das domain Attribut auf einen ande-ren Wert zu setzten als die Domain des eigenen Servers!

6.4 Cookie Attribut: secure

Das letzte Cookie Attribut gibt an, wie die Werte eines Cookie uber das Netz-werk geschickt werden.

Standardmassig ist dieses Attribut auf “unsicher“ (=false) gestellt. Wirddas Attribut beim speichern des Cookie auf true gesetzt, dann werden seineWerte nur noch dann ubertragen, wenn der Browser mit dem Webserver viaHTTPS oder einem anderen sicheren Protokoll kommuniziert.

46


6.5 Cookie speichern

Um beispielsweise die Version einer Webseite in einem Cookie abzuspeicherngenugt bereits die einfache Anweisung:

document.cookie = "version="+ escape(document.lastModified);

Was wurde hier gemacht?Zunachst wurde mit document.lastModified der Erstellungszeitpunkt (Da-tum und Uhrzeit) des HTML Dokumentes ermittelt. Da in den Werten in ei-nem Cookie keine Leerzeichen und Sonderzeichen vorkommen durfen, wird dieescape Funktion darauf angewandt. Somit werden alle nicht ASCII-Zeichen indie Form “&xx“ umgewandelt, wobei xx den Hexadezimalwerten des ISO-8859-1 (Latin-1) Codes entspricht. Damit wird ein Ausrufezeichen (“!“) zu “%21“und ein Leerzeichen wird zu “%20“. Mit diesem Procedere wird ein Cookieplattformubergreifend benutzbar.

Um das Cookie nicht nur fur eine Session sondern fur langere Zeit zu spei-chern muss noch ein Verfallszeitpunkt angegeben werden. Dieser sollte unbe-dingt mit der Funktion Date.toGMTString() in das korrekte Format gebrachtwerden. Soll das Cookie also erst in einem Jahr verfallen, so muss obige An-weisung nun folgendermassen aussehen:

var verfall = new Date();verfall.setFullYear(verfall.getFullYear() + 1);var erstellt = escape(document.lastModified);document.cookie = "version=" + erstellt + "; expires=" + verfall.toGMTString();

Die weitern Attribute konnen bei Bedarf einfach durch Strichpunkte ge-trennt angehangt werden:

; path=path; domain=domain; secure

Wie hier gezeigt wurde, sind die einzelnen Attribute durch Strichpunktevoneinander zu trennen. Deshalb darf im eigentlichen Wert des Cookie auchweder ein Strichpunkt, noch ein Gleichheitszeichen vorkommen. Sollen mehre-re Werte in einem Cookie festgehalten werden, dann empfiehlt sich z.B. eineNotation wie folgt:

document.cookie = "benutzer=vorname:Peter&nachname:Geiger&alter:28";

Um an die einzelnen Werte vorname, nachname und alter zu gelangenmuss der Wertestring nach dem Auslesen naturlich wieder entsprechend zerlegtwerden (siehe Ubung 2).

47


6.6 Cookie auslesen

Durch den Aufruf der cookie-Eigenschaft eines Dokumentes erhalt man einenString zuruck, der alle Cookies enthalt, die mit diesem Dokument abgespei-chert wurden. Dieser String ist eine Zeichenkette aus name=wert Paaren, wel-che durch Strichpunkte voneinander getrennt sind. Die anderen Attribute desCookie sind nicht auslesbar!

Aus dieser langen Zeichenkette gilt es nun, mittels geeigneter String-Funktionenund Methoden, das gesuchte name=wert Paar heraus zu holen. Die nachfolgendvorgestellte Funktion lost diese Aufgabe exemplarisch:

function cookie_auslesen(name){// Auslesen der cookie Eigenschaftvar allePaare = document.cookie;

// Suche nach dem Startindex des gesuchten name=wert Paaresvar pos = allePaare.indexOf(name + "=");

// Wird ein entsprechender Eintrag gefunden, dann extrahierenif (pos != -1) {var start = pos + name.length + 1;var ende = allePaare.indexOf(";",start);if (ende == -1) ende = allePaare.length;var wert = allePaare.substring(start, ende);wert = unescape(wert);return wert;

}}

Eine kurze Erklarung:

1. Zuerst werden alle jemals mit diesem Dokument abgespeicherten name=wertPaare ausgelesen.

2. Dann wird nach dem Startindex des Names des gewunschten Wertes ge-sucht. Dabei wird auch das Gleichheitszeichen zum Suchstring hinzu-gefugt, da ja genau der gesuchte Name in einem anderen name=wertPaar als Wert vorkommen konnte.

3. Der Startindex des gewunschten Wertes ist naturlich genau um die Anzahlder Zeichen des Namens plus des Gleichheitszeichens langer.

4. Der gesuchte Wert endet beim nachsten Strichpunkt nach dem Startindexdes Wertes.

5. Wird kein Strichpunkt gefunden, so handelt es sich um den letzten ge-speicherten Wert, und dieser geht bis zum Ende der Zeichenkette.

48


6. Der gesuchte Wert wird aus der Zeichenkette durch Angabe des Start-und Endeindex herauskopiert.

7. Die Sonderzeichen werden durch unescape wieder von ihrer Latin-1 Co-dierung zuruck verwandelt (auf Seite 47 wird die Codierung durch dieescape Funktion genauer erklart).

8. Der gewunschte Wert wird zuruck geliefert.

49


7 Objekte

Objekte sind eigentlich eine Ansammlung an Daten, welche unter einem Ober-begriff - namlich dem Objekt - zusammengefaßt sind. Die Daten an sich bildendie Eigenschaften (properties) des Objektes, und die Moglichkeiten diese Datenzu verandern sind die Methoden (methods) des Objektes.

Sobald sie dieses Kapitel verstanden haben sollten sie auch mal einen kur-zen Blick in den Abschnitt “Document Object Model (DOM)“ ab Seite 54werfen. Dort wird anhand von Baumdarstellungen noch einmal in aller Kurzeauf die Zugehorigkeit von Eigenschaften und Methoden zu den in den Browsernvordefinierten Objekten eingegangen.

7.1 Definition von Objekten

Folgende Erklarung mag auf den ersten Blick recht kompliziert klingen, solljedoch trotzdem aus Grunden der Vollstandigkeit zu Beginn dieses Kapitelsaufgenommen werden. Anhand der nachfolgenden Erklarungen und Beispielewird sich vieles von dem hier in Kurze geschilderten von selbst erklaren.

Zur Definition eines Objektes muss zuerst eine Konstruktor-Funktion er-stellt werden, welche die Definition der Eigenschaften und Methoden des Ob-jektes enthalt. Mit Hilfe des Konstruktors konnen dann so genannte Instanzendes Objektes erzeugt werden. Etwas laienhaft gesagt kann man sich darunterso eine Art Kopie von einer Mustervorlage vorstellen. Wahrend das Musterjedoch stets gut behutet im Schrank verbleibt, um somit nicht abgenutzt zuwerden und immer wieder als Vorlage dienen zu konnen, wird mit der Kopiewirklich gearbeitet.

7.2 Eigenschaften von Objekten

Wie bereits gelernt sind Instanzen also “Kopien“ oder wie meist in der Literaturausgedruckt “Vertreter“ einer Objektart. So ware beispielsweise ein blaues Mo-torboot mit dem Namen Mucki ein Vertreter des allgemeinen Objektes Schiff.

Die selbstgestellte Aufgabe lautet nun eine einfache Konstuktor Funktionfur Schiffe zu erstellen. Dabei sollen alle Instanzen (=Vertreter) durch zweiEigenschaften charakterisiert werden: den Namen und die Farbe.

Somit lautet die Konstruktor Funktion fur Schiffe:

function Schiff(nam, col) {this.name = nam;this.farbe = col;

}

Wenn nun eine neue Instanz angelegt werden soll, geschieht dies durch einenAufruf wie:

50


var boot1 = new Schiff("Mucki","blau");

Was geschieht hier im einzelnen? Eine neue Variable boot1 wird deklariert.Anschließend wird durch das Schlusselwort new ein neues Objekt mit dem Kon-struktor Schiff instanziiert. Diesem werden die zwei Werte Mucki und blauubergeben. Die oben bereits definierte Konstruktorfunktion erzeugt nun dasObjekt im Speicher, und belegt die Eigenschaften Name und Farbe mit denubergebenen Werten.

Abschließend liefert sie eine Referenz auf die Speicherstelle des Objektesan die Variable boot1 zuruck. Das dabei verwendete Schlusselwort this stelltquasi einen Platzhalter fur den Variablennamen dar, dem beim Instanziierendie Referenz fur das Objekt ubergeben wird (hier also boot1).

Von nun an kann das neue Objekt uber seinen Variablennamen angespro-chen werden:

Anweisung Erklarungdocument.write(boot1.farbe); Ausgabe auf dem Bildschirm: blauboot1.name = ’Mucki5’; Der gespeicherte Name des Bootes

wird verandert.

7.3 Referenz auf ein Objekt

Wie unter dem Abschnitt Eigenschaften erlautert, wird beim Anlegen einesneuen Objektes nur eine Referenz auf das Objekt an die Variable im Instanzi-ierungsaufruf zuruckgegeben.

Was bedeutet das genau?Sobald das neue Objekt angelegt ist, und die Eigenschaften mit Werten belegtsind, muss ja etwas abgespeichert werden. Dies geschieht aber nicht etwa in derVariable die im Instanziierungsaufruf steht, sondern dort, wo die KonstruktorFunktion gerade Platz dafur findet. Die an die Variable zuruckgegebene Refe-renz ist dann nur noch so eine Art Wegweiser, welcher der Variable sagt: ”Hiermusst du nachsehen, wenn du auf konkrete Werte zugreifen willst”.

Um den Vorteil dieses Verfahrens zu verdeutlichen, soll unser bereits defi-niertes Objekt Schiff nun auch noch einen Kapitan bekommen. Dazu legen wiraber erst einmal ein weiters Objekt Person an:

Somit lautet die Konstruktor Funktion fur Person :

function Person(vn, nn) {this.vorname = vn;this.nachname = nn;

}

Nun wird ein neuer Kapitan bestimmt:

var kap1 = new Person("Peter","Hansen");

51


Dann wird noch unser Schiff-Objekt angepasst:

function Schiff(nam, col, kp) {this.name = nam;this.farbe = col;this.kapitaen = kp;

}

Und nun wird endlich ein neues Schiff mit Kapitan instanziiert:

var boot2 = new Schiff("Sunshine","weiss",kap1);

Wie man sieht wird dem Schiff Konstruktor kein Wert fur den Kapitanubergeben, sondern lediglich die Referenz auf die bereits bestehende Instanz.Die daraus resultierende Wirkung soll durch die folgende Tabelle verdeutlichtwerden:

Anweisung Erklarungdocument.write(boot2.kapitaen.vorname);document.write(kap1.vorname);

Beide Anweisungen haben die glei-che Wirkung. Jedesmal erscheintdie Ausgabe auf dem Bildschirm:Peter

boot2.kapitaen.vorname = "Hans";kap1.vorname = "Hans";

Beide Anweisungen haben die glei-che Wirkung. Der gespeicherte Vor-name des Kapitans wird verandert.

Und der Vorteil dieser ganzen umstandlichen Prozedur?Nun ja, stellen sie sich einfach vor sie haben die Daten eines ganzen Hafenserfasst. Neben der Schiff ↔ Kapitan Zugehorigkeit haben sie aber auch nocheine Verbindung: Liegeplatz ↔ dafur verantworlicher Person gespeichert. Ohnenun die Daten fur die Person erneut eingeben zu mussen konnen sie einfach demLiegeplatz Objekt eine Referenz auf die entsprechende Person ubergeben - ebengenau so wie es bereits bei unserem Schiff geschehen ist.

7.4 Methoden eines Objektes

Methoden sind in JavaScript Funktionen, die Objekten als Eigenschaften zuge-wiesen wurden.

Eigentlich sagt obiger Satz bereits alles wesentliche aus, doch auch hier sollein Beispiel zum Verstandnis beitragen. Wir wollen eine Methode schreiben,die unser Schiff sinken lasst.

Dazu definieren wir erst einmal unser Funktion zum sinken:

function untergehen(Meter) {this.Tiefe = this.Tiefe - Meter;document.write(this.name + " ist " + Meter +

52


" Meter auf " + this.Tiefe + " Meter gesunken!");}

Dann legen wir die angepasste Konstruktor Funktion fur Schiffe fest:

function Schiff(nam, col) {this.name = nam;this.farbe = col;this.tiefe = 0;this.untergehen = untergehen;

}

Hier wurde eine neue Eigenschaft Tiefe definiert, die bei der Instanziie-rung auf Null gesetzt wird. Weiterhin erhalt jedes Schiffsobjekt eine Methodeuntergehen, der die vorher definierte Funktion untergehen(Meter) zugewie-sen wird. Beachten sie hierbei bitte: Die Funktion wird hier nur mit ihremNamen (also ohne die Klammern) verwendet! Wurde hier untergehen() zu-gewiesen, so wurde der vermeintliche Ruckgabewert der Funktion anstatt dieFunktion selbst verwendet werden.

Durch Instanziierung lauft unser Schiff nun vom Stapel zur Jungfernfahrt:

var boot26 = new Schiff("Titanic","rot");

Da sich die Geschicht jedoch nicht umschreiben laßt dauert diese erste Fahrtauch hier nicht lange:

Anweisung Erklarungtitanic.untergehen(50); Nach dem ersten Aufruf erfolgt die Ausgabe auf

dem Bildschirm:Titanic ist 50 Meter auf -50 Meter gesunken!

titanic.untergehen(50); Nach dem zweiten Aufruf erfolgt die Ausgabeauf dem Bildschirm:Titanic ist 50 Meter auf -100 Meter gesunken!

53


8 Document Object Model (DOM)

Was ist DOM eigentlich?

Um es moglichst einfach auszudrucken: DOM beschreibt den Aufbau einerWebseite mit deren Eigenschaften und Methoden. Durch den hiermit struktu-rierten Aufbau werden Anderungen und Aufrufe stark vereinfacht.

Eine Webseite hat als oberstes Objekt stets das window. Deshalb wirdes - obwohl dies eigentlich nur eine schlampige Programmierung ist - meistweggelassen. So bekommt man also mit beiden der folgenden Aufrufen dasselbe Hinweisfenster:

window.alert("Welch toller JavaScript Kurs!");alert("Welch toller JavaScript Kurs!");

Beispielsweise offnet man mit der Methode open() (an den runden Klam-mern erkennt man dass es eine Methode und keine Eigenschaft ist) des Objekteswindow ein neues Browserfenster. Der komplette Befehl sieht dann folgender-maßen aus: window.open().

Ein weiteres Beispiel: um den Text “Willkommen auf dieser Homepage“in der Statusleiste des Browsers erscheinen zu lassen belegt man einfach dieEigenschaft status mit einem String:

window.status = "Willkommen auf dieser Homepage";

Es hort sich vielleicht momentan kompliziert an, aber anhand der Seitendieses Kapitels, und dem Studium einiger Beispiele werden sie recht schnellhinter das Geheimnis des ominosen DOM kommen!

Die Ubersichten dieses Kapitels sind in zweierlei Hinsicht unvollstandig:

• Es wurde Wert darauf gelegt nur die wichtigsten und browserunabhangigenEigenschaften darzustellen. Das bedeutet jedoch auf der anderen Sei-te dass einige proprietare Objekte und Eigenschaften fehlen. (Objekte,die gelistet sind, jedoch nur in einem Browser vorhanden sind, wurdengekennzeichnet).

• Es erscheinen viele Eigenschaften, die in diesem Einfuhrungskurs nichtbehandelt wurden. Ein tieferes Eingehen auf alle Aspekte wurde jedochden Rahmen eines Einfuhrungskurses bei weitem sprengen. Ich kann hiernur auf die weiterfuhrenden Links und Literatur verweisen.

54


8.1 Das Screen-Objekt

screen� availLeft: integer (Nur Navigator)� availTop: integer (Nur Navigator)� availHeight: integer� availWidth: integer� colorDepth: integer� height: integer� pixelDepth: integer (Nur Navigator)� width: integer

8.2 Das Navigator-Objekt

navigator� appCodeName: string� appName: string� appVersion: string� userAgent: string� javaEnabled: boolean� plugIns: [Array] (Nur Navigator)� mimeTypes: [Array] (Nur Navigator)

55


8.3 Das Window-Objekt

window� frames: [Array]� document: [Object]� event: [Object] (Nur IE)� history: [Object]� location: [Object]� defaultStatus: string� opener: [Object:window]� self: [Object:window]� status: string|� alert(message: string)� blur()� clearInterval(intervalID)� clearTimeout(timeoutID)� close()� confirm(message: string): boolean� focus()� moveBy(x,y: integer)� moveTo(x,y: integer)� open(URL,windowName[,windowFeatures]: string)� prompt(message,defaultReply: string): string� scroll(x,y: integer)� scrollBy(x,y: integer)� setInterval(Code: string,mxec: integer): intervalID� setTimeout(Code: string,msec: integer): intervalID

8.4 Das Frames-Objekt

window� frames| � length: integer� frames[index]

� parent: [Object: frame]� self: [Object: frame]� top: [Object: window]

56


8.5 Das Location-Objekt

window� location

� protocol: string� hostname: string� port: string� pathname: string� search: string� hash: string� href: string� host: string|� assign(URL: string)� reload()� replace(URL: string)

8.6 Das Document-Object

window� document

� all: [Array] (Nur IE)� anchors: [Array]� applets: [Array]� forms: [Array]� images: [Array]� layers: [Array] (Nur Navigator)� links: [Array]� bgColor: string� fgColor: string� linkColor: string� alinkColor: string� vlinkColor: string� lastModified: string� location: string� referrer: string� title: string� cookie: string|� clear()� close()� open(MIMEType: string[,replace”])� write(text: string)� writeln(text: string)

57


8.7 Das Formular-Objekt

window� document

� forms| � length: integer� forms[index]

� action: string� encoding: string� method: string� name: string� target: string� length: integer� elements: [Array]| � length: integer� elements[index]| � checked: boolean (bei checkbox und radio)| � defaultChecked: boolean (bei checkbox und radio)| � defaultValue: string (bei textbox)| � name: string| � value: string| � options: [Array] (bei selectbox)| | � length: integer| � options[index] (bei selectbox)| | � index: integer| | � defaultSelected: boolean| | � selectedIndex: integer| | � selected: boolean| | � text: string| || � blur ( )| � click ( ) (bei button und radio)| � focus ( )| � select ( )� reset ( )� submit ( )

58


8.8 Das Image-Objekt

window� document

� images[index]� border: integer� complete: boolean� height: integer� hspace: integer� lowsrc: string� name: string� src: string� vspace: integer� width: integer

59


9 Weitere Infos

9.1 Links ins WWW

Nachfolgende Links sollen bei der weiteren Auseinandersetzung mit dem The-ma JavaScript helfen, und durch das eine oder andere fertige Script die Zeit zurErstellung eigener Webseiten verkurzen.

Zum Thema JavaScript:Name URLMichael Mailers JavaScripts www.webaid.de/js/index.shtmlMicrosoft Web Workshop msdn.microsoft.com/workshop/JavaScript Tip of the Week webreference.com/javascriptJavaScript Programmes www.scriptsearch.com/pages/l4.shtmlJavaScript Tutorials www.htmlgoodies.com/beyond/js.htmlScriptSearch www.scriptsearch.com/index.shtml

Zum Thema (D)HTML:Name URLSelfHTML selfhtml.teamone.deHTML Tag list utopia.knoware.nl/users/schluter/doc/tags/index.htmlDynamic Drive DHTML dynamicdrive.com/Fertige ’Regular Expression’Abfragen

aspsmith.com/re

9.2 Editoren

Name Kommentar URLUltraEdit 32 Ein sehr empfehlenswerter, universeller Edi-

tor; individuell anpassbar; beherrscht Syntax-Highlighting fur sehr viele Programmiersprachen

www.ultraedit.com

Phase 52

HTML EditorBesonders fur Anfanger sehr empfehlenswerteFreeware! Beherrscht Syntax-Highlighting, Auto-Insert; viele freie Plug-Ins fur Sonderfunktionenerhaltlich

www.meybohm.de

9.3 Bucher

Da ich selbst immer nur mit einem Buch arbeite, kann ich auch nur dieses emp-fehlen (auch wenn es bestimmt noch andere auf dem Markt gibt!):

JavaScript The Definitive GuideVerlag: O’ReillyAutor: David FlanaganISBN: 1-56592-392-8

60


A Angaben fur Ubungen

Die nachfolgenden Ubungen sollen zum vertiefen der vorgestellten Themen die-nen, und haben deshalb lediglich Lehrcharakter!

Da die Ubungen aufeinander aufbauen empfiehlt sich ein sequentielles Vor-gehen. Die zu Beginn vorliegenden Dateien im Verzeichnis “00 - Vorgabe“bestehen aus reinem HTML-Code, ohne jegliches JavaScript:

1. index.html: Hier wird ein Frameset mit drei Frames definiert. Der ersteoben quer um einen gewissen Abstand zur Oberkante des Browserfensterszu erhalten, darunter zwei vertikal getrennte Frames zur Darstellung desMenus (links) und des Inhalts (rechts). Die Namen der Frames lautenentsprechend “top“ , “menue“ und “inhalt“.

2. leer.html: Diese Datei enthalt keinen Inhalt und fullt lediglich das oberequerliegende Frame.

3. begruessung.html: Ein kurzer Willkommenstext, der sofort beim Aufrufder Indexseite im rechten Frame angezeigt wird.

4. menue.html: Das Menu wird im linken Frame angezeigt und bietet uberdrei Grafiken die Moglichkeit auf die Seiten “Begrussung“ , “Konfiguration“oder “Bilderalbum“ zu verzweigen.

5. bilderalbum.html: Vier Fotos werden in einer quadratischen Anordnunggezeigt.

6. konfiguration.html: Ein Formular zur Auswahl der Anrede (Frau/Herr)sowie zur Eingabe des Nachnamens, der Email-Adresse und zur Auswahlder gewunschten Hintergrundfarbe wird geboten.

7. 01.jpg, 02.jpg, 03.jpg, 04.jpg: Die vier auf der Seite “Bilderalbum“gezeigten Fotos.

8. normal begruessung.gif, normal bilderalbum.gif, normal konfiguration.gif:Die Grafiken fur das Menu.

Ubung 1

Erweitern sie die Funktionalitat der Konfigurationsseite derart, dass:

1. Gepruft wird, ob eine Anrede gewahlt wurde.

2. Gepruft wird ob der eingegebene Nachname mindestens vier Zeichen langist.

3. Die Email Adresse auf korrekte Syntax uberpruft wird. Dafur sollen fol-gende vereinfachte Regeln gelten:

61


• Es mussen mindestens drei Zeichen vor dem @ Symbol stehen (er-laubt sind Groß- und Kleinbuchstaben sowie Zahlen).

• Nach dem @ Symbol mussen wiederum mindestens drei der im vor-herigen Punkt genannten Zeichen stehen.

• Zum Abschluss folgt ein Punkt mit darauf folgenden zwei, drei odervier Buchstaben (keine Zahlen mehr erlaubt!) als Top-Level Domain.

Sollte eine dieser Bedingungen nicht erfullt sein, so geben sie eine Meldungaus dass die Eingabe falsch sei, und aktivieren auf der Webseite das entspre-chende Feld.

Ubung 2

Nun sollen folgende Features hinzugefugt werden:

1. Die auf der Konfigurationsseite eingegebenen Daten sollen lokal gespei-chert werden, so dass sie bei einem erneuten Besuch dieser Seite zurVerfugung stehen.

2. Die Seiten (Top, Menu und Inhalt) sollen ihre Hintergrundfarbe entspre-chend der gewahlten Konfiguration einstellen.

3. Beim erneuten Aufruf der Begrußungsseite soll der Surfer mit dem zuvoreingegebenen Namen begrußt werden. Wurde (noch) kein Name eingege-ben erfolgt eine neutrale Begrußung.

4. Alle Konfigurationsangaben sollen auch nach dem schließen und erneutenoffnen des Browsers zur Verfugung stehen, und sofort angewandt werden.

Ubung 3

Ruft der User eine Inhaltsseite direkt auf (z.B. im Windows Explorer per Dop-pelklick auf die Datei “bilderalbum.html“), dann erscheint diese im Webbrow-ser ohne das dazugehorige Menu.

Die Aufgabe lautet, dies zu verhindern indem stets die gesamte Framestruk-tur mit aufgebaut wird.

Ubung 4

Die Grafiken im Menu sollen animiert werden. Sobald der Benutzer mit derMaus uber eine der Grafiken fahrt, verandert sich genau diese, und fallt erstdann wieder in den Ursprungszustand zuruck, wenn die Maus wieder herun-ter fahrt, oder wenn der Benutzer den Menupunkt anklickt. Verwenden siedazu die weiteren Dateien dark begruessung.gif, dark bilderalbum.gif,dark konfiguration.gif.

62


Ubung 5

Gestalten sie das Bilderalbum derart um, dass:

1. Zu Beginn eine Willkommensgrafik gezeigt wird (benutzen sie die Dateiwelcome.jpg)

2. Unterhalb der Willkommensgrafik werden vier Buttons mit folgendenFunktionen angezeigt:

• back : Das vorhergehende Bild zeigen.

• next : Das nachste Bild zeigen.

• play : Die Bilder automatisch alle drei Sekunden wechseln lassen.

• stop: Die automatische Wiedergabe anhalten.

3. Es sollen nur der oder die Buttons aktiv sein, welche gerade in den Kontextpassen.

Es kann davon ausgegangen werden, dass alle Fotos die gleiche und un-veranderbare Breite und Hohe haben. Dies vereinfacht die Programmierungbesonders im Hinblick darauf, dass die gewunschte Diashow sowohl mit demInternet Explorer, als auch mit Netscape lauffahig sein soll.

Fur diese Ubung liegen die Grafiken der aktiven und passiven Buttons vor.

63

B Losungsvorschlage fur die Ubungen

Der gesamte nachfolgend vorgestellte Code ist jeweils nur ein Losungsvorschlag.Es gibt mit Sicherheit noch etliche andere Ansatze, wie die gleiche Funktiona-litat zu erzielen ist.

Auf erklarende Kommentare innerhalb des Codes wurde aus Grunden derUbersichtlichkeit großtenteils verzichtet.

Ubung 1

Bekannte Schwierigkeit bei dieser Ubung ist:

• Der Wert der Auswahlliste ist nicht direkt abfragbar. Deshalb wird derIndex des gewahlten Eintrages abgefragt, und aufgrund von diesem Wertdie Variable mit einem String belegt.

********************** Im <HEAD> Bereich ***************************************** in "konfiguration.html" *******************

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--var Anrede;var Nachname;var Email;

function checkFormular(){Anrede = document.Formular.Anrede.selectedIndex;Nachname = document.Formular.Nachname.value;Email = document.Formular.EMail.value;var eingabenOK = true;eingabenOK = checkAnredeUndName();if (eingabenOK){eingabenOK = checkEmail();

}if (eingabenOK){return true;

} else {return false;

}}

function checkAnredeUndName(){if (Anrede == "0"){alert("Bitte waehlen sie eine Anrede!");document.Formular.Anrede.focus();

64


return false;}else {(Anrede == 1)?Anrede = "Frau" : Anrede = "Herr";

}if (Nachname.length <= 3){alert("Bitte geben sie einen korrekten Nachnamen ein!");document.Formular.Nachname.focus();return false;

}return true;

}

function checkEmail(){

var pos = Email.search(/\w{3,}@\w{3,}\.[a-zA-Z]{2,4}/);if (pos > -1){return true;

}else {alert("Bitte geben sie eine korrekte Email-Adresse ein!");document.Formular.EMail.focus();return false;

}}// --></SCRIPT>

********************** Im <BODY> Bereich ***************************************** in "konfiguration.html" *******************

<form name="Formular" method=get onSubmit="return checkFormular()">

65


Ubung 2

Bekannte Schwierigkeit bei dieser Ubung ist:

• Der Wert der Radio-Buttons kann nicht einfach perdocument.Formular.Farbe.value ausgelesen werden wie das analog beiden Textfeldern moglich ist. Statt dessen wird ein Trick angewandt: Beijedem der Radio-Buttons wird das onClick-Event abgefragt und mit die-sem eine Funktion aufgerufen. In dieser Funktion wird der Wert einerglobalen Variablen verandert, womit stets der momentan gewahlte Wertabrufbar ist. Die Variable wird beim initialisieren mit dem Wert vorbe-legt, welcher bei den Radio-Buttons als Vorauswahl eingestellt ist.

********************* Im <SCRIPT> Bereich **************************************** in "konfiguration.html" *******************

var Farbe="#E3FFE3";

function aendereFarbe(wert){Farbe = wert;

}

function checkFormular(){Anrede = document.Formular.Anrede.selectedIndex;Nachname = document.Formular.Nachname.value;Email = document.Formular.EMail.value;var eingabenOK = true;eingabenOK = checkAnredeUndName();if (eingabenOK){eingabenOK = checkEmail();

}if (eingabenOK){var daten = "Anrede:" + Anrede + "&Nachname:" + Nachname + _

"&Email:" + Email + "&Farbe:" + Farbe;cookieSpeichern(daten);return true;

} else {return false;

}}

function cookieSpeichern(wert){wert = escape(wert);var verfall = new Date();verfall.setFullYear(verfall.getFullYear() + 1);document.cookie = "benutzerdaten=" + wert + "; expires=" +_

verfall.toGMTString();

66

alert("Vielen Dank f\"{u}r ihre Angaben!");parent.frames[0].document.bgColor = Farbe;parent.frames[1].document.bgColor = Farbe;

}

***************** Neue Datei "cookieLesen.js" ********************************************************************************

<!--var gespeichertAnrede = "";var gespeichertName = "";var gespeichertEmail = "";cookieLesen();

function cookieLesen(){if (document.cookie.length > 0) {

// Suche nach dem Startindex des gesuchten name=wert Paaresvar pos = document.cookie.indexOf("benutzerdaten=");

// Wird ein entsprechender Eintrag gefunden, dann extrahierenif (pos != -1) {

var start = pos + 14;var ende = document.cookie.indexOf(";",start);if (ende == -1) ende = document.cookie.length;var alleWerte = document.cookie.substring(start, ende);alleWerte = unescape(alleWerte);

// Daten wieder in einzelne name=wert Paare aufspaltenvar paare = alleWerte.split("&");for (var i=0; i<=3; i++){

var pos = paare[i].indexOf(’:’);var name = paare[i].substring(0,pos);var wert = paare[i].substring(pos+1);switch (name){

case "Anrede":gespeichertAnrede = wert;break;

case "Nachname":gespeichertName = wert;break;

case "Email":gespeichertEmail = wert;break;

case "Farbe":document.bgColor = wert;break;

67


}}

}}

}// -->

********************** Im <BODY> Bereich ***************************************** in "konfiguration.html" *******************

<TABLE width="400" border="1"><TR align="center"><TD bgcolor="#FFFFFF"><input type=radio name="Farbe" _

value="#FFFFFF" onClick="aendereFarbe(’#FFFFFF’);"><br>weiss</TD><TD bgcolor="#5D61FD"><input type=radio name="Farbe" _

value="#5D61FD" onClick="aendereFarbe(’#5D61FD’);"><br>blau</TD><TD bgcolor="#E3FFE3"><input checked type=radio name="Farbe"_

value="#E3FFE3" onClick="aendereFarbe(’#E3FFE3’);"><br>grün</TD><TD bgcolor="#FFFF40"><input type=radio name="Farbe"_

value="#FFFF40" onClick="aendereFarbe(’#FFFF40’);"><br>gelb</TD><TD bgcolor="#E22000"><input type=radio name="Farbe"_

value="#E22000" onClick="aendereFarbe(’#E22000’);"><br>rot</TD></TR>

</TABLE>

********************** Im <BODY> Bereich ********************************* Neu in jeder Seite (ausser "index.html") **********

<script LANGUAGE="JavaScript" SRC="./cookieLesen.js"></script>

************************ Der <H2> Tag ********************************************* in "begruessung.html" ********************

<H2>Hallo und herzlich willkommen <SCRIPT language="JavaScript">_(gespeichertAnrede == "")?document.write("..."):_document.write(gespeichertAnrede + " " + gespeichertName);</SCRIPT></H2>

68

Ubung 3

********************** Im <HEAD> Bereich ********************************************* in "index.html" ***********************

<SCRIPT LANGUAGE="JavaScript"></SCRIPT>

********************** Im <HEAD> Bereich ****************************************** in "begruessung.html" ********************

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

********************** Im <HEAD> Bereich ***************************************** in "konfiguration.html" *******************


{window.location.href=’./index.html?konfiguration.html’}//-->

</SCRIPT>

********************** Im <HEAD> Bereich ****************************************** in "bilderalbum.html" ********************

69



{window.location.href=’./index.html?bilderalbum.html’}//-->

</SCRIPT>

70

Ubung 4

Die Funktionsaufrufe bei onMouseover, onClick und onMouseout mussen im<a href . . . > Tag definiert sein, und nicht im <img src . . . > Tag, da sonstFehlfunktionen im Netscape Browser auftreten.

*********************** Komplette Datei ********************************************** "menue.html" **************************

<HTML><HEAD>

<TITLE>Menue</TITLE>

<SCRIPT language="JavaScript"></SCRIPT>

</HEAD>

<BODY BGCOLOR="#E3FFE3"><script LANGUAGE="JavaScript" src="./cookieLesen.js"></script>

<center><a href="./begruessung.html" target="inhalt" onMouseover="Bildwechsel_

(0,Highlight0)" onClick="Bildwechsel(0,Normal0)"_onMouseout="Bildwechsel(0,Normal0)">_<img src="./normal_begruessung.gif" width="126"_height="31" border="0" alt="Begr\"{u}ssung"></a>

71


<br><br><a href="./konfiguration.html" target="inhalt" onMouseover="Bildwechsel_

(1,Highlight1)" onClick="Bildwechsel(1,Normal1)"_onMouseout="Bildwechsel(1,Normal1)">_<img src="./normal_konfiguration.gif" width="126"_height="31" border="0" alt="Konfiguration"></a>

<br><br><a href="./bilderalbum.html" target="inhalt" onMouseover="Bildwechsel_

(2,Highlight2)" onClick="Bildwechsel(2,Normal2)"_onMouseout="Bildwechsel(2,Normal2)">_<img src="./normal_bilderalbum.gif" width="126"_height="31" border="0" alt="Bilderalbum"></a>

<br><br></center>

</BODY></HEAD></HTML>

72

Ubung 5

<HTML><HEAD>

<TITLE>Bilderalbum</TITLE>


{window.location.href=’./index.html?bilderalbum.html’}//--></SCRIPT>

<SCRIPT language="JavaScript"><!--window.status = "Viel Spass auf meiner Homepage ...";

var number = 0;timeout_id = null;var numberOfPictures;

// All the pictures have to have a width / hight of 470x320 pixelsvar pix = new makeArray ("01.jpg","02.jpg","03.jpg","04.jpg");

function makeArray() {numberOfPictures = makeArray.arguments.lengthfor (var i = 0; i < numberOfPictures; i++) this[i] =_

makeArray.arguments[i];}

function next() {if (timeout_id != null){ // If automatic slide show is running, do nothing!

return;}if (number == numberOfPictures-1) {

number = 0;}else {

number += 1;}document.image.src = pix[number];

}

function previous() {if (timeout_id != null){ // If automatic slide show is running, do nothing!

return;}

73


if (number == 0) {number = numberOfPictures-1;

}else {

number -= 1;}document.image.src = pix[number];

}

function stop(){if (timeout_id != null){ // If automatic slide show is running, react!

document.next.src = "./nextButton.gif";document.back.src = "./backButton.gif";document.start.src = "./startButton.gif";document.stop.src = "./stopButton_inactive.gif";clearTimeout(timeout_id);timeout_id = null;

}}

function start() {document.next.src = "./nextButton_inactive.gif";document.back.src = "./backButton_inactive.gif";document.start.src = "./startButton_inactive.gif";document.stop.src = "./stopButton.gif";change();

}

function change() {document.image.src = pix[number];

timeout_id = setTimeout("slide()", 3000);}

function slide(){number += 1;if (number == numberOfPictures){

number = 0;}start();

}//--></SCRIPT>

</HEAD>

<BODY BGCOLOR="#E3FFE3"><script LANGUAGE="JavaScript" SRC="./cookieLesen.js"></script>

74


<H2>Bilderalbum</H2><br><CENTER><IMG name="image" width="470" height="320" border="0" src="./welcome.jpg"><br><br>

<a href="javascript: previous();"><IMG name="back" alt="Vorhergehendes"_src="./backButton.gif" border="0" width="42"_height="18"></a>

<a href="javascript: stop();"><IMG name="stop" alt="Halt"_src="./stopButton_inactive.gif" border="0"_width="42" height="18"></a>

<a href="javascript: start();"><IMG name="start" alt="Wiedergabe"_src="./startButton.gif" border="0" width="42"_height="18"></a>

<a href="javascript: next();"><IMG name="next" alt="N\"{a}chstes"_src="./nextButton.gif" border="0" width="42"_height="18"></a>

</CENTER></BODY></HEAD></HTML>

75

Index

\B, 34\D, 32\S, 32\W, 32\b, 34\d, 32\n, 33\s, 32\w, 32|, 33(. . . ), 33*, 33+, 33?, 33[. . . ], 32$, 34$1, $2, . . . , 32ˆ, 32, 34

alert, 40Anweisungsblock, 36

break, 39, 43

charAt, 24concat, 24continue, 43Cookie, 45

abspeichern, 47auslesen, 48

Deaktiviertes JavaScript, 9Debugging, 6

Internet Explorer, 7Netscape Navigator, 6

default, 40Dekrementierung, 16do...while, 41Document Object Model (DOM), 54domain, 46

Eigenschaften, 50Einbinden von Skripten, 9Eingabeaufforderung, 38else, Befehl, 38

escape, 47Escape-Sequenzen, 13expires, 45

Fehlersuche, 6Internet Explorer, 7Netscape Navigator, 6

for, 42Funktionen, 37

global, 32Grundgerust, 8

if-Abfrage, 37if...else, 38ignoreCase, 32index, 31indexOf, 25Inkrementierung, 16input, 31Instanzen, 50

Java contra JavaScript, 5

Kommentare, 10Konstruktor, 50

lastIndex, 31, 32lastIndexOf, 25lastMatch, 32lastParen, 32leftContext, 32length, 26

Meldungsfenster ausgeben, 36Methoden, 50, 52methods, 50Modulo-Rechnung, 38

Objekte, 50Operatoren

arithmetische, 16bitweise, 20logische, 19Rangfolge, 22string, 16

76


vergleichende, 18zuweisende, 21

parseFloat, 42path, 45pattern, 29Pop-up

alert, 40prompt, 38

prompt, 38properties, 50

Referenz, 51RegExp Methode, 31RegExp(), 30Regular Expressions, 29Reservierte Worter, 12return, 37rightContext, 32

secure, 46source, 32split, 26Strichpunkt, 12Strings, 13substr, 27substring, 27switch, 39

this, 51toLowerCase, 28toUpperCase, 28

unescape, 49

Variable, 11globale, 12lokale, 12

Werteubergabe, 36while, 40

Zeichenketten, 13

77

JavaScript Einfuhrungskurs¨ - barmetler.debarmetler.de/js-tutorial/script und...

Documents

Transcript of JavaScript Einfuhrungskurs¨ - barmetler.debarmetler.de/js-tutorial/script und...