JavaScript - files.ifi.uzh.ch... •Im einfachsten Fall lassen sich vordeﬁnierte Popup-Dialogboxen anzeigen, etwa bevor ein Benutzer ein wichtiges Formular versendet. • Im allgemeinen

Gestaltung von Webseiten mit

JavaScript

• Einleitung

• JavaScript-Kern

◦ Datentypen

◦ Kontrollstrukturen

◦ Funktionen

◦ Objekte

◦ Felder

◦ Reguläre Ausdrücke

• Client-seitiges JavaScript

◦ Windows und Frames

◦ Dokument-Objekt-Modell

◦ Formulare

◦ Ereignisbehandlung

◦ Cookies

• Beispiele

JavaScriptDirk Husung

Gestaltung von Webseiten mit JavaScript (1)

1 Einleitung

JavaScript ist eine (typischerweise) durch WWW-Browser interpretierte, in HTML integrierbare Pro-grammiersprache, von Netscape entwickelt und li-zensiert.

Unterschieden werden JavaScript-Kern, Client-sei-tiges („LiveScript“), und Server-seitiges JavaScript(„LiveWire“, Active Server Pages (ASP) bei Micro-soft).

Client-seitiges JavaScript umfaßt neben dem Java-Script-Kern u.a. Window- und Form-Objekte sowieein Dokument-Objekt-Modell.

Server-seitiges JavaScript stellt File-, Database-,Request- und Client-Objekte zur Verfügung und bil-det (eine herstellerabhängige) Alternative zu CGI-Skripten.

Im folgenden sollen der JavaScript-Kern und Client-seitiges JavaScript betrachtet werden.


Einleitung (2)

JavaScript lehnt sich in seiner Syntax (wie Java) anC an.

Ab der Version 1.3 ist JavaScript vollständig kon-form zu den internationalen Standards ECMA-2621

und ISO-162622.

Der MS Internet-Explorer interpretiert tatsächlicheine Sprachvariante, JScript, die spezielle Befeh-le für Betriebssystemerweiterungen bereitstellt.

Was kann JavaScript?

• JavaScript stellt eine vollwertige Programmier-sprache dar.

Es unterstützt beliebige Berechnungen mit ei-ner Vielzahl von Standardfunktionen.

• Event-Handler erlauben es, auf Benutzereinga-ben über Tastatur oder Maus zu reagieren.

• Mit Hilfe des Window-Objekts ist es möglich,neue Browser-Fenster zu erzeugen, zu öffnenund zu schließen.

1ECMA: European Computer Manufacturers Association2ISO: International Organization for Standards


Einleitung (3)

• Im einfachsten Fall lassen sich vordefiniertePopup-Dialogboxen anzeigen, etwa bevor einBenutzer ein wichtiges Formular versendet.

• Im allgemeinen können Größe und Position so-wie Kontrollelemente eines neuen Fensters vor-gegeben werden.

• Das Dokument-Objekt-Modell bietet Zugriff aufeine Hierarchie von Objekten, entsprechenddem Inhalt einer Web-Seite.

Unter Ausnutzung des Dokument-Objekt-Mo-dells ist es möglich, Dokumente von Grund aufvollständig aufzubauen.

IE 4 unterstützt ein vollständiges Dokument-Ob-jekt-Modell, das es gestattet, Inhalt und Ausse-hen eines jeden Elements zu modifizieren.

• document.write() fügt beliebigen HTML-Code in ein Dokument ein, zu dem Zeitpunkt,zu dem die Seite von dem Browser analysiertwird.

• Das Form-Objekt erlaubt den Zugriff auf HTML-Formulare, insbesondere Button-, CheckBox-,


Einleitung (4)

Hidden-, Password-, Radio-, Reset-, Select-,Submit-, Text- und TextArea-Elemente.

Damit gestattet JavaScript die Konsistenzprü-fung von Formularen vor ihrer Versendung unddie Vorverarbeitung von Eingaben.

• JavaScript kann steuern, welche Web-Seiten imBrowser angezeigt werden.

• Das History-Objekt stellt die Funktionalität desForward- und Back-Buttons zur Verfügung.

• Es ist möglich, beliebige Meldungen in der Sta-tuszeile des Browser-Fensters anzuzeigen, et-wa wenn der Benutzer die Maus über einen Hy-pertextlink bewegt.

• Ein Navigator-Objekt liefert Rechner-Plattform,Name und Version des Browsers.

• JavaScript erlaubt es, Cookies zu schreiben undzu lesen: einige wenige Zustandsdaten, die tem-porär oder dauerhaft durch den Client gespei-chert werden.


Einleitung (5)

Seit JavaScript 1.1:

• Austausch eines per IMG-Tag angezeigten Bil-des

• Zusammenarbeit mit Java Applets

• Scrollen von Fensterinhalten

Seit JavaScript 1.2:

• Modell zur Ereignisbehandlung

• Style-Sheets

• dynamische Positionierung

• reguläre Ausdrücke

• switch-Anweisung

• delete-Operator

• Ein Screen-Objekt liefert Größe und Farbtiefedes verwendeten Bildschirms

• Verschieben und Verändern der Größe von Fen-stern


Einleitung (6)

Was kann JavaScript nicht?

• JavaScript bietet keine Grafikfunktionen über dievordefinierten GUI-Elemente hinaus.

• JavaScript kennt keine Methoden, die es gestat-ten, Frames direkt zu erzeugen oder zu verän-dern.

Versionen

JavaScript Navigator Internet Explorer

JavaScript 1.0 Navigator 2.0 Explorer 3.0JavaScript 1.1 Navigator 3.0 Explorer 4.0JavaScript 1.2 Navigator 4.0–4.05 Explorer 4.0, teilw.JavaScript 1.3 Navigator 4.06–4.5


Einleitung (7)

1.1 Einführendes Beispiel

Einfache JavaScript-Eingaben können über einJavaScript-Pseudo-Protokoll erfolgen:

javascript: URL

Bei dem Netscape Navigator öffnet die alleinige Ein-gabe von

javascript:

als URL eine JavaScript-Konsole.

Integration von JavaScript in eine HTML-Datei:

<html><head><title>JavaScript-Test</title><script language="JavaScript"></script></head><body><form><input type=buttonvalue="Quadrat von 7 errechnen"onClick="Quadrat(7)">

</form></body></html>


Einführendes Beispiel (1)

Alternativ können JavaScripte in eigenen Dateiengespeichert werden:

<html><head><title>JavaScript-Test</title><script language="JavaScript"src="quadrat.js" type="text/javascript">

</script></head><body><form><input type=buttonvalue="Quadrat von 6 errechnen"onClick="Quadrat(6)">

</form></body></html>

JavaScript-Debugger stehen zur Verfügung unter:

http://developer.netscape.com/products/jsdebug/http://www.microsoft.com/scripting/debugger/


Einführendes Beispiel (2)

2 Lexikalische Elemente

• JavaScript ignoriert Zwischenraumzeichen zwi-schen Sprachelementen.

• Grundsätzlich wird jede Anweisung durch einSemikolon abgeschlossen. Ein Semikolon hin-ter der letzten Anweisung einer Zeile ist optio-nal.

Kommentare

// Kommentar bis zum Zeilende/* Kommentar über mehrere Zeilen,

nicht schachtelbar */

Bezeichner

• Folge von Buchstaben und Ziffern, beginnendmit einem Buchstaben; „_“ und „$“ (seit Java-Script 1.1) zählen zu den Buchstaben. Zulässigsind nur ASCII-Zeichen (keine Umlaute).


Lexikalische Elemente (1)

• Unterscheidung zwischen Groß- und Kleinbuch-staben (im Gegensatz zu HTML).Ausnahmen sind bei Client-seitigem JavaScriptmöglich (JavaScript Style-Sheets in Navigator 4:document.tag.BODY.COLOR = "red";)

• Maximallänge 32 Zeichen

Reservierte Schlüsselwörter

abstractbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodouble

elseenumexportextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimportin

instanceofintinterfacelongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuper

switchsynchronizedthisthrowthrowstransienttruetrytypeofvarvoidvolatilewhilewith


Lexikalische Elemente (2)

3 Datentypen

JavaScript unterscheidet

• primitive Datentypen

◦ (Gleitkomma-)Zahlen

◦ Boolsche Werte: true und false

◦ Zeichenketten

• zusammengesetzte Datentypen

◦ Objekte

◦ Felder

• Funktionen

Felder und Funktionen stellen spezielle Objekte dar.

Primitive und Referenzdatentypen

Ein primitiver Datentyp speichert seinen Wert selbst;jede Variable eines primitiven Datentyps belegt ei-ne feste Speicherplatzgröße.


Datentypen (1)

Ein Referenz-Datentyp speichert einen Verweis aufseinen Wert; Variablen desselben Referenz-Daten-typs können unterschiedlich viel Speicherplatz be-legen. Verschiedene Referenzvariablen können aufdenselben Wert verweisen.

Objekte, Felder und Funktionen sind als Referenz-datentypen implementiert.

Zeichenketten können als unveränderlicher Refe-renztyp betrachtet werden.


Datentypen (2)

3.1 Zahlen

stellt JavaScript stets im 8-Byte-IEEE-Gleitkomma-format dar.

Es gibt keinen gesonderten Ganzzahltyp, auchwenn die meisten ganzzahligen Operationen auf32-Bit-Werten ausgeführt werden.

• Die mathematischen Standardfunktionen sindals Eigenschaften des Math-Objekts gespeichert.

c = Math.sqrt (a*a + b*b);

• Eine Zahl kann mittels toString() in eine Zei-chenkette konvertiert werden:

x = 10;s = x.toString(2); // zur Basis 2

Spezielle Werte

Wert Bedeutung

Number.MAX_VALUE größte darstellbare ZahlNumber.MIN_VALUE kleinste negative ZahlNumber.NaN „not a number“Number.POSITIVE_INFINITY +∞Number.NEGATIVE_INFINITY −∞


Zahlen (1)

3.2 Zeichenketten

(Konstantenschreibweise s.u.)

JavaScript kennt keinen gesonderten Zeichentyp.

• „+“ dient dem Aneinanderhängen von Zeichen-ketten; ggf. wird dabei ein numerischer Wert ineine Zeichenkette umgewandelt.

Achtung:

"37" + 7 // liefert 377"37" - 7 // liefert 30

• s.length liefert die Anzahl der Zeichen einerZeichenkette s.

• Einige Methoden:

s.charAt(s.length-1);s.substring(1,4);s.indexOf(’a’);

• Navigator 4 (nicht aber IE 4) unterstützt den Zu-griff auf einzelne Zeichen wie auf Feldelemente:

s[s.length-1];


Zeichenketten (1)

3.3 Boolsche Werte

sind in der Regel das Ergebnis von Vergleichsope-ratoren.

Obwohl JavaScript im Gegensatz zu C einen ei-genständigen boolschen Datentyp kennt, erfolgt imBedarfsfall eine implizite Typumwandlung vonfalse in 0 und von true in 1.


Boolsche Werte (2)

3.4 Objekte

stellen eine Sammlung benannter Komponenten dar.Dies können Daten (Zustand) oder Funktionen (Ver-halten) sein.

image.widthimage.height

document.write("text");

Objekte in JavaScript können als assoziative Fel-der dienen.

image["width"]image["height"]

Objekte werden durch spezielle Konstruktorfunktio-nen erzeugt:

var o = new Object();

Seit JavaScript 1.2 können Objekte mit einer Inti-tialisierungssyntax eingeführt werden:

var point = { x:2.3, y:-1.2 };


Objekte (1)

Für die Werte der Komponenten können beliebigeAusdrücke angegeben werden.

Wrapper-Objekte

Zu jedem der primitiven Datentypen gibt es eineensprechende Wrapper-Objektklasse. Ein Wrapper-Objekt nimmt den Wert einer Variable eines primi-tiven Typs auf, stellt jedoch zusätzliche Komponen-ten zur Verfügung.

JavaScript konvertiert implizit je nach Kontext pri-mitive Variablen vorübergehend in Wrapper-Objekteund umgekehrt.

len = s.length;

S = new String ("Hello, World");msg = S + ’!’;


Objekte (2)

3.5 Felder

stellen eine Sammlung indizierter Feldelemente dar.Die Indizierung erfolgt mit natürlichen Zahlen, be-ginnend bei 0. Die Feldelemente können beliebi-gen Typ besitzen (heterogene Felder).

Erzeugen eines Feldes

var a = new Array();a[0] = 1.2;a[1] = "JavaScript";

Seit JavaScript 1.2 können Felder mit einer Initiali-siserungssyntax eingeführt werden:

var a = [ 1.2, "JavaScript" ];

Für die Werte der Feldelemente können beliebigeAusdrücke angegeben werden.

Auslassen eines Initialwertes bewirkt ein undefinier-tes Element.

Achtung: Navigator 4 besitzt folgenden Fehler: Wirdin der Initialisierungssyntax nur ein einzelnes Ele-ment angegeben, legt dessen Wert die anfänglicheZahl der Feldelemente fest.


Felder (1)

3.6 Funktionen

stellen in JavaScript erstrangige Datentypen dar:Sie können in Variablen, Feldern und Objekten ge-speichert und anderen Funktionen als Argumenteübergeben werden.

Eine Funktion, die als Eigenschaft eines Objektsgespeichert ist, heißt Methode .

Event-Handler sind Methoden spezieller Objektein Client-seitigem JavaScript, die vom Web-Browseraufgrund entsprechender Benutzeraktionen aufge-rufen werden.

function square(x) {return x*x;

}

Seit JavaScript 1.2 können Funktionsdefinitionengeschachtelt werden.

Eine Funktion kann mit einem Konstruktor erzeugtwerden.

var square =new Function ("x", "return x*x");


Funktionen (1)

Die führenden Argumente bennen die Parameter,das letzte Argument beschreibt den Funktionsrumpf.

square hält einen Verweis auf die erzeugte Funk-tion, die Funktion selbst ist „anonym“.

JavaScript 1.2 unterstützt Lamda-Funktionen, eineKonstantenschreibweise für Funktionen:

var square = function(x) { return x*x; }


Funktionen (2)

3.7 null und undefined

Der Wert null bedeutet, daß eine Variable keinengültigen Wert besitzt.

Der Wert undefined ergibt sich bei Benutzung ei-ner nicht existierenden oder nicht initialisierten Va-riable oder Methode.

Es gibt kein Schlüsselwort undefined. Bei ei-nem Vergleich werden null und undefined alsgleich behandelt, der typeof-Operator (ab Java-Script 1.1) liefert jedoch:

type = typeof null; // "object"

var undefined;type = typeof undefined; // "undefined"


null und undefined (1)

3.8 Konstanten

Zahlen

ganzzahlige Werte:

42 (Basis 10), 0x1234 (Basis 16), 007 (Basis 8)

Gleitkommawerte:

3.1415, -3.1E12, .1e12, oder 2E-12

Boolsche Werte

true, false

Zeichenketten

"123", ’eins zwei drei’

Da HTML sehr oft doppelte Anführungszeichen ver-wendet, sind für JavaScript einfache empfehlens-wert. Ein Apostroph ist dann als „\’“ mit einemBackslash zu schreiben.


Konstanten (1)

Spezielle Zeichen

\b Backspace\f Seitenvorschub (form feed)\n Zeilenende (new line)\r Zeilenrücklauf (carriage return)\t horizontaler Tabulator\\ Fluchtsymbol (backslash)\’ Apostroph (quote)\" Anführungszeichen (double quote)\ddd ASCII-Zeichen in oktaler Notation\xdd ASCII-Zeichen in hexidezimaler Notation\udddd Unicode-Zeichen in hexidezimaler Notati-

on (ab Version 1.3)

Felder

array = ["eins", , "drei"];// array[0] besitzt den Wert "eins"

Objekte

Eine Objektkonstante besteht aus einer Liste vonPaaren aus Schlüsselnamen und assoziierten Wer-ten, eingeschlossen in „{ }“.


Konstanten (2)

var Sales = "Toyota";

function CarTypes(name) {if(name == "Honda")return name;

elsereturn "Sorry, we don’t sell "+ name + ".";

}car = {myCar: "Saturn",

getCar: CarTypes("Honda"),special: Sales}

document.write(car.myCar); // Saturndocument.write(car.getCar); // Hondadocument.write(car.special); // Toyota

Spezielle Konstanten

null


Konstanten (3)

3.9 Variablen

Eine Variable verknüpft einen Namen mit einem Wert.

Dynamische Typisierung

In JavaScript können derselben Variablen Werteunterschiedlichen Typs zugewiesen werden.

i = 1;i = "one";

Je nach Kontext führt JavaScript implizit Typkonver-tierungen durch.

null bedeutet 0 in numerischem, false in bool-schem Kontext,undefined bedeutet false in boolschem Kon-text.

Deklaration

Variablen können außerhalb von Funktionen (glo-bal) oder innerhalb einer Funktion (lokal) erklärtwerden.

Globale Variablen lassen sich durch einfache Wert-zuweisung einführen, optional mit dem Schlüssel-wort var, lokale Variablen sind stets mit var ein-zuführen.


Variablen (1)

var i;

Eine Wertzuweisung an eine nicht mit var dekla-rierte Variable definiert ein globale Variable.

Der Versuch, den Wert einer nicht mit var dekla-rierten Variable zu lesen, führt zu einem Laufzeit-fehler.

Variablen können bei ihrer Deklaration initialisiertwerden.

var i = 0, k = 0;

Wird eine Variable nicht initialisiert, so erhält sieden Wert undefined oder NaN in numerischemKontext.

Mittels var deklarierte Variablen sind permanent.Sie können nicht mit delete gelöscht werden.

Variablen können mehrfach deklariert und initiali-siert werden.

Sichtbarkeitsbereich


Variablen (2)

Eine globale Variable ist programmweit sichtbar, ei-ne lokale Variable innerhalb der Funktion, in der siedeklariert ist, auch vor ihrer Deklaration. Im Fal-le geschachtelter Funktionsdefinitionen besitzt je-de Funktion ihren eigenen Sichtbarkeitsbereich.

Eine lokale Variable verdeckt eine gleichnamige glo-bale.

var scope = "global";function checkscope() {document.write (scope); // undefinedvar scope = "local";document.write (scope); // "local"

}

Variablen sollten am Beginn einer Funktion dekla-raiert werden.

Namensauflösung

Jede globale Variable wird als Komponente einesglobalen Objekts angelegt. Im Client-seitigen Ja-vaScript dient das window-Objekt als globales Ob-jekt. Es besitzt eine sich selbst referenzierendewindow-Komponente.


Variablen (3)

Parameter und lokale Variablen einer Funktion wer-den als Komponenten eines Aufruf-Objekts ange-legt.

Bei Aufruf einer Funktion erzeugt der JavaScript-Interpreter einen neuen Ausführungskontext. Teildieses Kontextes ist das Aufruf-Objekt.

Es werden verschiedene globale Ausführungskon-texte unterstützt, jeder mit einem eigenen globalenObjekt. Zwischen diesen Kontexten ist ein Daten-austausch möglich (Sicherheitproblem!)

Jedem Ausführungskontext ist eine Sichtbarkeits-kette zugeordnet: Dazu sind die Aufruf-Objekte ent-sprechend der lexikalischen Struktur der zugehöri-gen Funktionsdefinitionen verkettet. JavaScriptsucht den Wert einer Variablen entlang dieser Ket-te.

Garbage Collection

JavaScript besitzt eine automatische Speicherfrei-gabe.


Variablen (4)

3.10 Operatoren

Operator-Priorität

Operatorart Operatoren

Komponetenzugriff . []

Instantiierung new

Unterprogrammaufruf ()

Negation/Inkrement ! ~ - + ++ -- typeof voiddelete

Multiplikation/Division * / %

Addition/Subtraktion + -

bitweiser Shift << >> >>>

Vergleich < <= > >=

Gleichheit == !=

bitweises Und &

bitweises Exklusiv-Oder ^

bitweises Oder |

logisches Und &&

logisches Oder ||

Bedingter Ausdruck ?:

Zuweisung = += -= *= /= %= <<= >>=>>>= &= ^= |=

Komma ,


Operatoren (1)

Anmerkungen:

• JavaScript konvertiert Operanden in die geeig-neten Typen für eine Operation, wenn möglich.

i = "3"*"5" // 15

• Der Zuweisungsoperator liefert den Wert desrechten Operanden.

Vergleichsoperatoren

Operator Beschreibung

== true bei gleichem Wert, ggf. nach Typkonvertie-rung

!= true bei ungleichem Wert, selbst nach Typkon-vertierung

=== true bei gleichem Typ und Wert!== true bei ungleichem Typ oder Wert> größer>= größer oder gleich< kleiner<= kleiner oder gleich


Operatoren (2)

Zwei Operanden werden wie folgt auf Gleichheitverglichen:

• Besitzen die Operanden denselben Typ, werdenihre Werte verglichen.

Besitzt einer der Operanden den Wert NaN, sinddie Operanden ungleich.

Referenzieren die Operanden verschiedene Ob-jekte, sind sie ungleich, selbst wenn beide Ob-jekte zu gleichen primitiven Datentypen konver-tiert werden könnten.

• Ist einer der Operanden null und der andereundefined, sind die Operanden gleich.

• Andernfalls wird versucht, die Operanden in glei-che Typen zu konvertieren:

Ist der eine Operand eine Zahl, der andere ei-ne Zeichenkette, wird die Zeichenkette in eineZahl konvertiert und der Vergleich erneut durch-geführt.

Besitzt einer der Operanden einen boolschenWert, wird false nach 0, true nach 1 kon-vertiert und der Vergleich erneut durchgeführt.


Operatoren (3)

Ist einer der Operanden ein Objekt und der an-dere eine Zahl oder Zeichenkette, wird versucht,das Objekt mittels valueof() oder toString()zu konvertieren; danach wird der Vergleich er-neut ausgeführt.

In allen anderen Fällen liefert der Vergleich un-gleich.

Anmerkungen:

• Wenn Navigator 3 bei einem Vergleich eine Zei-chenkette nicht in eine Zahl konvertieren kann,meldet er einen Fehler statt das Ergebnis falsezu liefern.

• Ist im <SCRIPT>-Tag die JavaScript-Version 1.2angegeben, führt Navigator 4 vor einem Ver-gleich auf Gleichheit keine Typ-Konvertierungdurch.

• Der strikte Vergleichsoperator „===“, implemen-tiert in IE 4, entspricht einem Vergleich aufGleichheit ohne vorherige Typkonvertierung derOperanden.

null und undefined werden nicht als gleichbertrachtet.


Operatoren (4)

• Die Operatoren „<“, „<=“, „>“, „>=“ erlauben Ope-randen beliebigen Typs, sind jedoch nur für Zah-len und Zeichenketten erklärt; die Operandenwerden ggf. konvertiert.

Arithmetische Operatoren

Im wesentlichen wie in C, aber:

• Bei „+“-Verknüpfung einer Zeichenketten mitZahl, wird die Zahl in eine Zeichenkette konver-tiert, und die Zeichenketten werden aneinander-gehängt.

s = "1" + 2 // "12"

• Die Division ganzer Zahlen erfolgt gleitpunktmä-ßig.

• Der Modulo-Operator ist auch für Gleitpunkt-Da-tentypen erklärt.


Operatoren (5)

Bitweise Operatoren


& bitweises Und| bitweises Oder^ bitweises Exklusiv-Oder~ bitweise Negation<< Shift um eine Bitposition nach links>> arithmetischer Shift um eine Bitposition nach

rechts unter Erhalt des Vorzeichens>>> logischer Shift um eine Bitposition nach rechts mit

Einführung einer führenden 0

Anmerkungen:

• Die bitweisen Operatoren liefern NaN, wenn ihreOperanden nicht ganzzahlig oder nicht als 32-Bit-Werte darstellbar sind.

Logische Operatoren

Anmerkungen:

• Kann der linke Operand von „&&“ zu false kon-vertiert werden, liefert „&&“ den Wert des linkenOperanden, sonst den des rechten.


Operatoren (6)

• Kann der linke Operand von „||“ zu true kon-vertiert werden, liefert „||“ den Wert des linkenOperanden, sonst den des rechten.

Spezielle Operatoren


new Instantiierung eines Objektsdelete Löschen eines Objekts, eines Objektattributs oder

eines Feldelementsthis Referenz auf das aktuelle Objekttypeof Typkennung (als Zeichenkette)void Ausdrucksauswertung ohne Ergebnisrückgabe

Anmerkungen:

• Objekte und Felder werden mit dem new-Operatorerzeugt:

new constructor

Der constructor muß die Form eines Funkti-onsaufrufs besitzen. Falls keine Argumente an-gegeben werden, können die Klammern entfal-len.

Der new-Operator erzeugt zunächst ein Objekt,das dann der constructor-Funktion als Wertvon this übergeben wird.


Operatoren (7)

• delete dient dem Löschen einer Objektkom-ponente. Bei einigen vordefinierten und einigenClient-seitigen Objektkomponenten bleibtdelete wirkungslos. Ein Aufruf von deletefür mittels var deklarierte Variablen führt zu ei-ner Fehlermeldung.

• Der typeof-Operator (seit Navigator 3 und IE 3)liefert eine Zeichenkette, die den Typ des Ope-randen beschreibt: "number", "string","boolean" für die entsprechenden primitivenDatentypen, "object" für Objekte, Felder undnull, "function" für Funktionen sowie"undefined" für nicht definierte oder uninitia-lisierte Komponenten.Um verschiedene Objekttypen zu unterscheiden,kann meist die constructor-Komponente her-angezogen werden:

if (typeof d == "object" &&d.constructor == Date) {

...}

• void liefert für beliebige Operanden das Ergeb-nis undefined. Dies kann nützlich sein inner-halb von HTML-Tags:

<A HREF="javascript:void window.open();">New Window</A>


Operatoren (8)

4 Kontrollstrukturen

4.1 Blockanweisung

s.u.

4.2 Verzweigungs-Anweisungen

if- und if-else-Anweisung

var array = new Array();

if (!array[0])initialize();

var input;

if(input === undefined) {doThis();

}else {doThat();

}


Verzweigungs-Anweisungen (1)

switch-Anweisung (ab JavaScript 1.2)

switch(Eingabe) {case "1":alert("Erster Zweig");break;

case "2":alert("Zweiter Zweig");break;

default:alert("Standard");break;

}

4.3 Wiederholungs-Anweisungen

while-Anweisung

var i = 1;

while(i <= 10) {var x = i * i;document.write("<br>" + i + "^2 = " + x);i++;

}


Wiederholungs-Anweisungen (1)

for-Anweisung

for(i = 1; i <= 10; i++) {var x = i * i;document.write("<br>" + i + "^2 ist " + x);

}

var Ergebnis = "";

for (var Eigenschaft in Objekt) {Ergebnis += ObjName + "." + Eigenschaft+ " = " + Objekt[Eigenschaft] + "<br>";

}

do-while-Anweisung

var i = 1;

do {var x = i * i;document.write("<br>" + i + "^2 ist " + x);

} while(i <= 10);


Wiederholungs-Anweisungen (2)

4.4 Spezielle Anweisungen

break- und continue-Anweisung

while (i < 6) {if (i == 3) {alert("Das war’s, i ist gleich " + i);break Ende;

}i++;

}Ende:

with-Anweisung

with(document) {open();write("Hintergrundfarbe: " + bgColor);close();

}


Spezielle Anweisungen (1)

5 Funktionen

5.1 Funktionsdefinition

function square(x) {return x*x;

}

Anmerkungen:

• Wird eine Funktion mit mehr Argumenten auf-gerufen als vereinbart, werden die überzähligenArgumente ignoriert.

• Wird eine Funktion mit weniger Argumenten auf-gerufen als vereinbart, erhalten die restlichenParamter den Wert undefined.

• Enthält eine Funktionsdefinition keine return-Anweisung, liefert sie den Wert undefined zu-rück.

Obige Funktionsdefinition erzeugt ein Funktionsob-jekt und weist es der Variablen square zu; ent-sprechend ist zulässig:


Funktionsdefinition (1)

var f = square;var y = f(2);

Funktionen können an Objektkomponenten zuge-wiesen werden; sie werden damit zu Methoden:

var o = new Object;o.square = function (x) { return x*x; };

5.2 Argument-Objekt

Parameter und lokale Variablen einer Funktion wer-den als Komponenten eines Aufruf-Objekts ange-legt.

Ein Aufruf-Objekt definiert außerdem eine Kompo-nente arguments, die auf ein arguments-Objektverweist. Dieses Objekt stellt ein Feld dar:

arguments.length liefert die Anzahl aktueller Ar-gumente, arguments[i] das i-te Argument.

Damit sind Funktionen für beliebige Argumentan-zahl implementierbar:


Argument-Objekt (1)

function max(){var m = Number.NEGATIVE_INFINITY;

for (var i = 0; i < arguments.length; i++)if (arguments[i] > m)m = arguments[i];

return m;}

arguments besitzt zusätzlich die Komponentencallee (seit JavaScript 1.2) und caller (seit Na-vigator 4 mit geänderter Bedeutung):

arguments.callee verweist auf die aktuell aus-geführte Funktion. Damit kann eine anonyme Funk-tion rekursiv aufgerufen werden.

arguments.caller verweist auf das Argument-Objekt der Funktion, die die aktuell ausgeführte auf-gerufen hat, die aufrufende Funktion selbst ergibtsich mit arguments.caller.callee.

5.3 Funktions-Objekt

Die length-Komponente eines Funktions-Objektsliefert die Zahl definierter Parameter. Seit Java-Script 1.2 wird die Verwendung von arity stattlength empfohlen (mit gleicher Bedeutung).


Funktions-Objekt (1)

Achtung: In Navigator 4 sind arity und length

nur korrekt implementiert für JavaScript 1.2.

Seit Navigator 4 definiert ein Funktionsobjekt dieMethoden apply() und call(). Sie erlauben diebetreffenden Funktion aufzurufen, als sei sie Me-thode eines anderen Objekts:

f.apply (o, [1,2]); oderf.call (o, 1, 2);

vergleichbar mit

o.m = f;o.m(1,2);delete o.m;

Benutzterdefinierte Komponenten eines Funktions-objekts entsprechen static-Variablen aus C; ihrWert besteht über einen Funktionsaufruf hinaus.

uniqueInteger.counter = 0;

function uniqueInteger() {return uniqueInteger.counter++;

}


Funktions-Objekt (1)

5.4 Prototyp-Objekt

Ein Funktionsobjekt besitzt eine prototype-Kom-ponente, die auf ein vordefiniertes Prototyp-Objektverweist.


Prototyp-Objekt (2)

6 Objekte

• Objekte können erzeugt werden mit dem new-Operator gefolgt von dem Aufruf einer Konstruk-tor-Funktion oder seit JavaScript 1.2 mit einerLiteralschreibweise.

• Auf Objekt-Komponenten wird mit dem „.“-Ope-rator zugegriffen.

• Der Versuch, den Wert einer nicht definiertenKomponente zu lesen, liefert undefined.

• Eine Objekt-Komponente wird durch einfacheWertzuweisung erzeugt (ohne var).

• Seit JavaScript 1.2 kann eine Objekt-Komponen-te mit delete gelöscht werden.

• Mit der for/in-Schleife können alle benutzer-definierten Komponenten eines Objekts durch-laufen werden; einige vordefinierte Komponen-ten bleiben unberücksichtigt.

function listPropertyNames (obj) {var names = "";for (var i in obj)

names += i + "\n";alert (names);

}


Objekte (1)

6.1 Konstruktor-Funktionen

Eine Konstruktor-Funktion dient der Initialisierungeines neu erzeugten Objekts.

Sie wird durch den new-Operator aufgerufen underhält einen Verweis auf ein neu erzeugtes, leeresObjekt als Wert der vordefinierten this-Variable.

Konstruktor-Funktionen liefern in aller Regel keinErgebnis. Gegebenenfalls ersetzt der Rückgabe-wert das zuvor angelegte Objekt als Ergebnis desnew-Operators.

6.2 Methoden

Eine Methode ist eine JavaScript-Funktion, derenAufruf an ein Objekt geknüpft ist. Über die vordefi-nierte this-Variable erhält die Methode Zugriff aufdieses Objekt.

Einer Methode wird auf diese Weise stets ein zu-sätzliches implizites Argument übergeben.


Methoden (1)

Allerdings gilt: Eine Funktion speichert ihren Wertin einer Variablen. Jede globale Variable wird alsKomponente eines globalen Objekts gespeichert.Eine Funktion ist damit zunächst Methode diesesglobalen Objekts, this verweist innerhalb der Funk-tion auf das globale Objekt.

Der Unterschied liegt in der Intention: Methodenwirken vorrangig auf das Objekt, an das ihr Aufrufgeknüpft ist, Funktionen sind eigenständig.

6.3 Prototyp-Objekt

Es ist ineffizient, mittels einer Konstruktor-Funktiondieselben Methoden in jedem einzelnen Objekt ein-zutragen; eine Lösung bietet seit JavaScript 1.1das Prototyp-Objekt.

Zu jeder Konstruktor-Funktion wird ein Prototyp-Objekt erzeugt und jedes mit einer Konstruktor-Funktion initialisierte Objekt erbt alle Komponen-ten dieses Prototyp-Objekts; die Komponenten des


Prototyp-Objekt (1)

Prototyp-Objekts erscheinen unmittelbar als Kom-ponenten des Objekts, auch wenn sie dem Proto-typ-Objekt nach Erzeugung des Objekts hinzuge-fügt werden.

Damit eignet sich das Prototyp-Objekt ideal zurSpeicherung von Konstanten und Methoden.

Wird lesend auf eine Objekt-Komponente zugegrif-fen, so wird die Komponente zunächst in dem Ob-jekt, dann in dessen Prototyp-Objekt gesucht.

Bei einer Wertzuweisung bleibt das Prototyp-Objektdagegen unberücksichtigt, es wird eine Komponen-te in dem betreffenden Objekt angelegt, die einegleichnamige Komponente des Prototyp-Objekts ver-deckt.

In Navigator 4 wird zu jeder Funktion ein Prototyp-Objekt erzeugt, für den Fall, daß die Funktion alsKonstruktor-Funktion dient. Navigator 3 erzeugt einPrototyp-Objekt erst bei der tatsächlichen Verwen-dung einer Funktion als Konstruktor-Funktion.


Prototyp-Objekt (1)

6.4 Vererbung

Ein Prototyp-Objekt ist selbst ein Objekt, erzeugtmittels new Object(), besitzt damit seinerseitsein Prototyp-Objekt. Es ist möglich, eine Klasse zurabgeleiteten Klasse einer Basisklasse zu erklären,indem man die prototype-Komponente der ab-geleiteten Klasse setzt:

Car.prototype = new Vehicle();

Damit verliert man jedoch die von JavaScript ge-nerierte constructor-Komponente des Prototyp-Objekts für Car, die auf die Konstruktor-Funktionfür Car verweist.

Die constructor-Komponente ist häufig hilfreichzur Identifizierung eines Objekttyps.

Navigator 4 bietet die Möglichkeit, präziser zu er-klären:

Car.prototype.__proto__ =new Vehicle.prototype;


Vererbung (1)

6.5 Vergleich C++,Java – JavaScript

C++, Java JavaScript

klassenbasierte Vererbung prototypbasierte VererbungKlasse Konstruktor-Funktion, PrototypInstanzvariablen gesetzt in Konstruktor-FunktionInstanzmethode Komponente des Prototyp-Ob-

jektsKlassenvariable Komponente des Konstruktor-

FunktionsobjektsKlassenmethode Komponente des Konstruktor-

Funktionsobjekts

6.6 Einige Methoden

Jedes Objekt erbt die für Object definierten Kom-ponenten.

toString(), angewandt auf ein Objekt o, lieferteinige interne Information über o, unter Navigator 4für JavaScript 1.2 eine Literal-Darstellung des Ob-jekts. Ab JavaScript 1.3 sollte toSource() statt-dessen benutzt werden.

Wurde die originale toString()-Methode über-definiert, kann sie mittels


Einige Methoden (2)

Object.prototype.toString.apply(o);

aufgerufen werden.

valueOf(), angewandt auf ein Objekt o, liefertdas Objekt selbst.

Unter Navigator 4 für JavaScript 1.2 können watch()und unwatch() zu Debug-Zwecken genutzt wer-den: Im Fall einer Wertzuweisung an eine Objekt-komponente wird durch den JavaScript-Interpretereine benutzerdefinierte Funktion aufgerufen:

function readOnlyHandler (property, oldValue, newValue) {

if (newValue != oldValue)alert (property + "is read only");

}

for (i in o) o.watch (i, readOnlyHandler);


Einige Methoden (3)

7 Felder

7.1 Array-Definition

Felder können auf unterschiedliche Weise erkärtwerden:

var a = new Array();var a = new Array(1.2, "JavaScript");var a = new Array(10);

Achtung: Navigator 4 legt im dritten Fall für Java-Script 1.2 statt eines 10-elementigen Feldes ein 1-elementiges mit dem Wert 10 an.

Die Anzahl der Elemente eines Feldes kann jeder-zeit geändert werden durch Zuweisung von Feld-elementen oder Setzen der length-Komponente.

Feldelemente können beliebigen Objekten hinzu-gefügt werden, allgemeinen Objekten fehlen jedochfür Felder typische Komponenten (etwa length).


Array-Definition (1)

7.2 Array-Methoden

join() konvertiert alle Elemente eines Felder zuZeichenketten und hängt sie aneinander, standard-mäßig getrennt durch Kommata.

var a = [1, 2, 3];s = a.join(); // s == "1,2,3"s = a.join(", "); // s == "1, 2, 3"

reverse() kehrt die Reihenfolge der Elemente ei-nes Feldes um („in Place“).

var a = [1, 2, 3];a.reverse(); // [3, 2, 1]

sort() sortiert die Elemente eines Feldes („inPlace“), standardmäßig in alphabetischer Reihen-folge.

var a = [33, 4, 1111, 222];a.sort(); // [1111, 222, 33, 4]a.sort(function(a,b) {return a-b;}); // [4, 33, 222, 1111]

concat() (seit JavaScript 1.2) fügt die angegbe-nen Argumente an ein Feld an; Felder werden da-bei durch ihre Elemente ersetzt (nicht rekursiv).


Array-Methoden (2)

var a = [1, 2, 3];a.concat(4,[5,[6,7]]);

// [1,2,3,4,5,[6,7]]

slice() (seit JavaScript 1.2) liefert einen Teilbe-reich eines Feldes. Das erste Argument gibt denIndex des ersten Elements, das zweite Argumentverringert um 1 den Index des letzten Elements an.Ein negatives Argument i wird als length-|i|

behandelt. Fehlt das zweite Argument, wird lengthverwandt.

var a = [1, 2, 3, 4, 5];a.slice(1,3); // [2, 3];

toString() liefert grundsätzlich dasselbe wiejoin(), unter Navigator 4 für JavaScript 1.2 je-doch eine Literaldarstellung. Ab JavaScript 1.3 soll-te toSource() statt toString() benutzt wer-den.


Array-Methoden (3)

8 Reguläre Ausdrücke

8.1 Muster

Muster bestehen aus Zeichenfolgen, eingeschlos-sen zwischen zwei „/“.

In einem Muster steht ein einzelnes Zeichen fürsich selbst, mit Ausnahme folgender Sonderzeichen

Zeichen steht für

\f Seitenvorschub (form feed)\n Zeilenende (new line)\r Zeilenrücklauf (carriage return)\t horizontaler Tabulator\v vertikaler Tabulator\c c selbst für c aus / \ . * + ? | ( ) [ ] { }

\ddd ASCII-Zeichen in oktaler Notation\xdd ASCII-Zeichen in hexadezimaler Notation\cX Kontrollzeichen ^X


Muster (1)

Es lassen sich Zeichenklassen bilden:

Zeichen steht für

[. . .] jedes Zeichen zwischen den Klammern[^. . .] jedes Zeichen nicht zwischen den Klammern. [^\n ]

\w [a-zA-Z0-9]

\W [^a-zA-Z0-9]

\s [ \t\n\r\f\v]

\S [^ \t\n\r\f\v]

\d [0-9]

\D [^0-9]

[\b] Rückschritt (backspace), Sonderfall

Für vorangehende Teile von Mustern kann die Min-dest- und Höchstzahl ihrer Wiederholung angege-ben werden:

Zeichen Bedeutung

{n,m} mindestens n, höchstens m mal{n,} mindestens n mal{n} genau n mal? {0,1}

+ {1,}

* {0,}


Muster (2)

Es können Alternativen angegeben und Teile vonMustern gruppiert werden; auf Gruppen kann Be-zug genommen werden.

Zeichen Bedeutung

| entweder vorangehender oder nachfolgender Teil-ausdruck

(. . .) Gruppierung\n n-te Gruppe. Gruppennummern werden durch Ab-

zählen ihrer öffnenden Klammern vergeben

Für das Auftreten von Mustern können bestimmtePositionen vorgeschrieben werden:

Zeichen Bedeutung

^ Anfang einer Zeichenkette/Zeile$ Ende einer Zeichenkette/Zeile\b Wortgrenze\B keine Wortgrenze

Schließlich können einem Muster Attribute ange-hängt werden:

Zeichen Bedeutung

i Mustervergleich ohne Beachtung von Groß-/Kleinschreibung

g Behandlung aller passenden Teilzeichenketten


Muster (3)

8.2 String-Methoden

search() liefert den Index des ersten Zeichenseiner Zeichenkette, ab der ein gegebenes Musterpaßt, oder -1.

"JavaScript".search (/script/i);

replace() ersetzt in einer Zeichenkette den Text,auf den ein gegbenes Muster paßt, durch einen ge-gebenen Ersetzungstext.

text.replace (/javascript/ig, "JavaScript");

match() liefert zu einem gegebenen Muster beinicht gesetztem g-Attribut ein Feld, dessen ersteKomponente den gesamten passenden Teil der Zei-chenkette enthält und dessen folgende Komponen-ten die zu den Gruppen des Musters passendenTeile enthalten.

Bei gesetztem g-Attribut liefert match() ein Feldmit den Teilen einer Zeichenkette, die auf das ge-gebene Muster passen.


String-Methoden (1)

"1 plus 2 plus 3".match(/\d+/g)// ["1", "2", "3"]

split() verwendet das gegebene Muster zur Tren-nung einer Zeichenkette und liefert ein Feld der re-sultierenden Teilzeichenketten.

"1,2, 3".split(/\s*,\s*/) // ["1", "2", "3"]

8.3 RegExp-Methoden

test() prüft, ob das Muster eines RegExp-Objek-tes auf eine gegebene Zeichenkette paßt.

var pattern = /java/i;pattern.test("JavaScript");

exec() ähnlich der String-Methode match().

var pattern = /java/ig;var text = "JavaScript oder Java?";var result;

while ((result = pattern.exec(text)) != null)alert ("gefunden: " + result[0]

+ " an Position " + result.index);


RegExp-Methoden (1)

Wird das g-Attribut angegeben, setzt exec() dielastIndex-Komponente des RegExp-Objekts aufdas erste Zeichen hinter der Teilzeichenkette, aufdie das Muster paßt.

Ein erneuter Aufruf von exec() beginnt seine Su-che ab der lastIndex-Position.

Wird keine passende Teilzeichenkette gefunden, sowird lastIndex auf 0 zurückgesetzt.


RegExp-Methoden (2)

9 Windows und Frames

Das window-Objekt stellt das globale Objekt inClient-seitigem JavaScript dar; es speichert alle glo-balen Variablen.

Daneben besitzt es eine Reihe vordefinierter Kom-ponenten, die die Kontrolle des Browser-Fensterserlauben:

Daten-Komponenten

Komponente Beschreibung

closed true, wenn das Fenster geschlossen ist.defaultstatus, status

Inhalt der Statuszeile.document Verweis auf das document-Objekt.frames[] Feld der Frames innerhalb des Fensters.history Verweis auf das history-Objekt.innerHeight, innerWidth, outerHeight,outerWidth

innere und äußere Fenstermaße (nicht beiIE 4).


Windows und Frames (1)


location Verweis auf das location-Objekt, das dieURL des angezeigten Dokuments repräsen-tiert. Durch Wertzuweisung kann eine andereSeite geladen werden.

locationbar, menubar, personalbar,scollbars, statusbar, toolbar

legt die Sichtbarkeit der entsprechenden Teileeines Navigator-Fensters fest (nicht bei IE 4).

name Name des Fensters.opener Verweis auf das öffnende Fenster.pageXOffset, pageYOffset

Ausmaß, um das der Fensterinhalt gescrollt ist(nicht bei IE 4).

parent Verweis auf das umschließende Fenster einesFrame.

self Verweis auf das window-Objekt selbst.top Verweis auf das oberste Fenster einer Frame-

Hierarchiewindow Verweis auf das window-Objekt selbst.

Methoden

Methode Beschreibung

alert(), confirm(), prompt()einfache vordefinierte Popup-Dialogboxen.

close() schließt ein Fenster.



Methode Beschreibung

find(), home(), print(), stop()Funktionalität der entsprechenden Navigator-Buttons (nicht bei IE 4).

focus(), blur()fordert den Tastatur-Focus für ein Fenster bzw. gibtihn frei (nicht bei IE 3).

moveBy(), moveTo()verschiebt ein Fenster.

resizeBy, resizeTo()ändert die Fenstergröße.

scrollBy, scrollTo()scrollt den Fensterinhalt.

setInterval(), clearInterva()bewirkt, daß eine Funktion in gegebenen Zeitab-ständen aufgerufen wird bzw. dies nicht länger er-folgt.

setTimeOut(), clearTimeOut()bewirkt, daß eine Funktion nach einer gegebenenZeit aufgerufen wird bzw. dies nicht mehr erfolgt.



9.1 Einfache Dialoge

var msg = "Grafiken in hoher Auflösung?"

if (confirm (msg))location.replace ("hires.htm");

elselocation.replace ("lowres.htm");

n = prompt ("Wie heißen Sie?");document.write ("<h1>Willkommen, " + n + "</h1>");

9.2 Statuszeile

<a href="sitemap.htm"onMouseOver="status=’Go to Site Map’; return true;"

onMouseOut="status=’’;">Site Map</a>

Der onMouseOver-Handler muß true liefern, umdie Standardaktion des Browsers zu unterdrücken,die URL in der Statuszeile anzuzeigen.

Der Standardtext der Statuszeile kann durch Zu-weisung an defaultStatus gesetzt werden.


Statuszeile (1)

9.3 Periodische Aktionen

Beispiel: Uhr in der Statuszeile

<HTML><HEAD><SCRIPT>function displayTime(){var d = new Date();var h = d.getHours();var m = d.getMinutes();if (m < 10) m = "0" + m;var t = h + ’:’ + m;

defaultStatus = t;

setTimeout("displayTime()", 60000);// 60000 ms = 1 Minute.

}</SCRIPT></HEAD><BODY onLoad="displayTime();"></BODY></HTML>


Periodische Aktionen (2)

9.4 navigator-Objekt

Die window.navigator-Komponente verweist aufein navigator-Objekt, das Informationen über denverwendeten Browser liefert:


appName Name des Browsers.appVersion Versionsnummer des Browsers.userAgent typischerweise Informationen aus appName

und appVersion.appCodeName Codename des Browsers, z.B. „Mozilla“.platform Rechnerplattform (neu in JavaScript 1.2).language Sprachversion des Browsers; z.B.

„en“ für Englisch (neu in Navigator 4,userLanguage, systemLanguage inIE 4).

Anzeige aller Browser-Informationen:

var browser = "Browser-Informationen\n";for (var item in navigator)browser +=item + ": " + navigator[item] + "\n";

alert (browser);


navigator-Objekt (1)

9.5 Fenster-Kontrolle

Öffnen und Schließen eines Fensters:

var win = window.open (’javascript:"<h1>Hello</h1>"’, "hello","width=400,height=350,status,resizeable");

var id = window.setInterval("bounce()", 100);

function bounce() {if (win.closed()) {clearInterval (id);return;

}

//...win.moveTo (x,y);

}

win.close();


Fenster-Kontrolle (1)

10 Dokument-Objekt-Modell

Das document-Objekt stellt eine Reihe nützlicherKomponenten bereit:


alinkColor Farbe eines aktivierten Links (während desAnklickens).

anchors[] Feld von Anker-Objekten.applets[] Feld von Applet-Objekten.bgColor Hintergrundfarbe des Dokuments.cookie erlaubt JavaScript-Programmen Cookies

zu lesen und zu schreiben.domain erlaubt verschiedenen Web-Servern der-

selben Internet-Domäne, Sicherheitsbe-schränkungen wechselseitig zu lockern.

embeds[] Feld eingebetteter Objekte.fgColor Textfarbe des Dokuments.forms[] Feld von Formular-Elementen.images[] Feld von Grafiken.lastModified Zeichenkette mit dem letzten Änderungs-

datum.linkColor Farbe nicht besuchter Links.links[] Feld von Link-Objekten.location statt location sollte URL verwandt wer-

den.


Dokument-Objekt-Modell (1)


referrer URL des Dokuments, von dem aus das aktu-elle Dokument aufgerufen wurde.

title Text zwischen <title> und </title>.URL Zeichenkette mit der URL, von der das

aktuelle Dokument geladen wurde; vgl.location.href.

vlinkColor Farbe besuchter Links.

Auf einfache Weise läßt sich erreichen, daß voreiner untergeordneten HTML-Seite zuerst die aufoberster Ebene angezeigt wird:

if (document.referrer == ""|| document.referrer.indexOf ("mysite.com") == -1)

window.location = "http://home.mysite.com";

Folgende Zeilen implementieren einen Zufalls-Link:

<a href="about:"onMouseOver="status=’click me!’; return true;"

onMouseOut="status=’’"onClick="this.href=document.links[Math.floor(Math.random()*document.links.length)]">

Zufalls-Link</a>



Die folgende Funktion listet die Links eines Doku-ments:

function listlinks(d) {var win = window.open("", "linklist","menubar,scrollbars,resizable,"+"width=600,height=300");

for (var i = 0; i < d.links.length; i++) {win.document.write(’<A HREF="’ + d.links[i].href + ’">’)

win.document.write(d.links[i].href);win.document.write("</A><BR>\n");

}win.document.close();

}



Das folgende Beispiel erstellt ein Verzeichnis allerAnkerpunkte eines Dokuments:

listanchors.nav = true;if (navigator.appName.indexOf(

"Microsoft") != -1)listanchors.nav = false;

function listanchors(d) {var win = window.open("", "navwin","menubar,scrollbars,resizable," +"width=600,height=300");

win.document.writeln("<H1>Navigation Window:<BR>" +document.title + "</H1>");

for(var i = 0; i < d.anchors.length; i++) {var text;var a = d.anchors[i];if (listanchors.nav)text = a.text; // Navigator 4

elsetext = a.innerText; // IE 4

if ((text == null) || (text == ’’))text = a.name;

win.document.write(’<A HREF="#’ + a.name + ’"’ +’ onClick="opener.location.hash=\’’ +a.name + ’\’; return false;">’);

win.document.write(text);win.document.write(’</A><BR>\n’);

}win.document.close();

}



11 Formular-Elemente

HTML-Tag Beschreibung; Ereignis

<input type=button> Druckknopf; onClick<input type=checkbox> Option; onClick<input type=file> Eingabefeld; onChange<input type=hidden> Daten, die zusammen mit ei-

nem Formular verschickt wer-den, unsichtbar für den Benut-zer; kein Ereignis

<option> Eintrag innerhalb eines select-Elements; kein Ereignis

<input type=password> Paßwort-Eingabe; onChange<input type=radio> Alternative; onClick<input type=reset> Druckknopf zum Zurücksetzen

eines Formulars; onClick<select> Liste oder Drop-Down-Menü

zur Auswahl eines Eintrags;onChange

<select multiple> Liste zur Auswahl eines odermehrerer Einträge; onChange

<input type=submit> Druckknopf zum Absenden ei-nes Formulars; onClick

<input type=text> einzeiliges Textfeld; onChange<textarea> mehrzeiliges Textfeld;

onChange


Formular-Elemente (1)

11.1 Formularüberprüfung

function verify(f){var msg;var emptyFields = "";var errors = "";

for(var i = 0; i < f.length; i++) {var e = f.elements[i];if ((e.type == "text"

|| e.type == "textarea")&& !e.optional) {

if (e.value == null || e.value == ""|| isblank (e.value)) {

emptyFields += "\n " + e.name;continue;

}

if (e.numeric|| e.min != null || e.max != null) {

var v = parseFloat(e.value);if (isNaN(v)

|| e.min != null && v < e.min|| e.max != null && v > e.max) {errors += "- The field " + e.name+ " must be a number";

if (e.min != null)errors +=" that is greater than " + e.min;

if (e.max != null && e.min != null)errors += " and less than " + e.max;

else if (e.max != null)errors +=" that is less than " + e.max;

errors += ".\n";}


Formularüberprüfung (1)

}}

}if (!empty_fields && !errors) return true;// ...

}

<form onSubmit="this.firstname.optional = true;this.phonenumber.optional = true;this.zip.min = 0;this.zip.max = 99999;return verify(this);

">

First name:<input type=text name="firstname">Last name:<input type=text name="lastname"><br>Address:<br><textarea name="address" rows=4 colS=40></textarea><br>Zip Code:<input type=text name="zip"><br>Phone Number:<input type=text name="phonenumber"><br><input type=submit></form>


Formularüberprüfung (2)

12 Ereignisbehandlung

Ereignis Eintreten

onAbort bei AbbruchonBlur beim Verlassen eines ElementsonChange bei erfolgter ÄnderungonClick beim Anklicken; Rückgabe von false, um

Standardaktion zu unterdrückenonDblClick bei doppeltem AnklickenonError im FehlerfallonFocus beim Aktivieren eines ElementsonKeyDown bei gedrückter Taste; Rückgabe von false

zum AbbruchonKeyPress bei erfolgtem Tastendruck; Rückgabe von

false zum AbbruchonKeyUp bei losgelassener TasteonLoad nach volständigem Laden einer DateionMouseDown bei gedrückter Maustaste; Rückgabe von

false zum AbbruchonMouseMove bei weiterbewegter MausonMouseOut beim Verlassen des Elements mit der MausonMouseOver beim Überfahren des Elements mit der

Maus; Rückgabe von true, um die Anzeigeeiner URL in der Statuszeile zu verhindern

onMouseUp bei losgelassener Maustaste; Rückgabe vonfalse zum Abbruch


Ereignisbehandlung (1)

Ereignis Eintreten

onReset beim Zurücksetzen des Formulars; Rückga-be von false zum Abbruch

onRsize beim Ändern der FenstergrößeonSelect beim Selektieren von TextonSubmit beim Absenden des Formulars; Rückgabe

von false zum AbbruchonUnload beim Verlassen der Dateijavascript: bei Verweisen

12.1 Eventhandler als JavaScript-Komponenten

Statt Eventhandler in HTML-Tags einzutragen

<input type="button" name="b1"value="Press Me"onClick="alert(’Thanks!’);">

können sie in JavaScript-Code gesetzt werden:

<input type="button" name="b1"value="Press Me">

<script>document.b1.onclick =function () { alert(’Thanks!’); }

</script>


Eventhandler als JavaScript-Komponenten (2)

Vorsicht: In diesem Fall sind gegenüber obenButton, Form und Document nicht Bestandteil derSichtbarkeitskette des Eventhandlers.

In JavaScript sind Eventhandler-Komponenten voll-ständig klein zu schreiben.


Eventhandler als JavaScript-Komponenten (3)

13 Cookies

13.1 Cookie-Beschränkungen

Cookies sind gedacht für die gelegentliche Spei-cherung kleiner Datenmengen.

• Ein Web-Browser braucht nicht mehr als insge-samt 300 Cookies zu speichern,

• er braucht nicht mehr als 20 Cookies je Web-Server (nicht je Seite) zu speichern.

• er braucht nicht mehr als 4 KBytes je Cookie zuspeichern (für Schlüssel und Wert zusammen).

Ein Cookie-Wert darf kein Semikolon, Komma oderZwischenraumzeichen enthalten. Deshalb emp-fiehlt sich die Verwendung der JavaScript-Funktio-nen escape() und unescape() zur Ver- und Ent-schlüsselung eines Cookie-Wertes.


Cookie-Beschränkungen (1)

13.2 Speichern eines Cookies

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

Neben dem Wert eine Cookies können folgendeAttribute gesetzt werden:

expires=Datumstandardmäßig bleiben Cookies nur bis zum Ende einerWeb-Browser-Sitzung erhalten.

path=Pfadstandardmäßig ist ein Cookie nur Web-Seiten in demsel-ben Verzeichnis und dessen Unterverzeichnissen zugäng-lich. Durch Angabe eines verkürzten Pfades kann einCookie auch übergeordneten Verzeichnissen und derenUnterverzeichnissen zugänglich gemacht werden

domain=Domänestandardmäßig ist ein Cookie nur für Web-Seiten dessel-ben Servers zugänglich. Durch Angabe einer übergeord-neten Domäne kann ein Cookie auch für Web-Seiten an-derer Server zugänglich gemacht werden.

secureDie Übertragung eines Cookies erfolgt nur über ein ver-gleichsweise sicheres Protokoll, z.B. HTTPS.


Speichern eines Cookies (2)

Ein Cookie kann gelöscht werden, indem er mitdemselben Schlüssel, einem beliebigen Wert undeinem bereits verstrichenen Verfallsdatum erneutgeschrieben wird.

13.3 Lesen eines Cookies

Beispiel:

var allcookies = document.cookie;var key = "version="var pos = allcookies.indexOf (key);

if (pos != -1) {var start = pos + key.length;var end = allcookies.indexOf (";", start);if (end == -1)end = allcookies.length;

var value = allcookies.substring (start, end);

value = unescape (value);if (value != document.lastModified)alert ("Neue Version!");

}


Lesen eines Cookies (1)

15 Beispiele

15.1 Ereignisse

<html><head><title>Events</title><script language="JavaScript"></script></head><body><a href="event.htm"onMouseOut="picChange(welcome,0)"onMouseOver="picChange(welcome,1)"><img name="welcome" src="welcome1.gif"border=0 width="201" height="210"></a>

</body></html>


Ereignisse (1)

15.2 Cookies

<html><head><title>Cookies</title><script language="JavaScript"></script></head><body onLoad="access()">Inhalt der Datei</body></html>


Cookies (3)

15.3 Formulare

<html><head><title>Seitentitel</title><script language="JavaScript"></script></head><body><form name="Formular"action="mailto:[email protected]"method=postonSubmit="return checkForm()">

<pre>Name: <input type=text size=40 name="User">E-Mail: <input type=text size=40 name="Mail">Alter: <input type=text size=40 name="Alter">Formular: <input type=submit value="Absenden">..<input type=reset value="Loeschen"></pre></form></body></html>


Formulare (2)

Documents

JavaScript - files.ifi.uzh.ch... •Im einfachsten Fall lassen sich vordeﬁnierte Popup-Dialogboxen anzeigen, etwa bevor ein Benutzer ein wichtiges Formular versendet. • Im allgemeinen