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

JavaScript
Dirk 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 sowie
ein 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.

JavaScript
Dirk Husung

Einleitung (2)

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

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

1

und ISO-16262

2

.

Der MS Internet-Explorer interpretiert tatsächlich
eine 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 öffnen
und zu schließen.

1

ECMA: European Computer Manufacturers Association

2

ISO: International Organization for Standards

JavaScript
Dirk Husung

Einleitung (3)

•

Im einfachsten Fall lassen sich vordefinierte
Popup-Dialogboxen anzeigen, etwa bevor ein
Benutzer 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 auf
eine Hierarchie von Objekten, entsprechend
dem Inhalt einer Web-Seite.

Unter Ausnutzung des Dokument-Objekt-Mo-
dells ist es möglich, Dokumente von Grund auf
vollstä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 analysiert
wird.

•

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

JavaScript
Dirk Husung

Einleitung (4)

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

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

•

JavaScript kann steuern, welche Web-Seiten im
Browser angezeigt werden.

•

Das History-Objekt stellt die Funktionalität des
Forward- 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 und
zu lesen: einige wenige Zustandsdaten, die tem-
porär oder dauerhaft durch den Client gespei-
chert werden.

JavaScript
Dirk Husung

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 Farbtiefe
des verwendeten Bildschirms

•

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

JavaScript
Dirk Husung

Einleitung (6)

Was kann JavaScript nicht?

•

JavaScript bietet keine Grafikfunktionen über die
vordefinierten 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.0

JavaScript 1.1 Navigator 3.0

Explorer 4.0

JavaScript 1.2 Navigator 4.0–4.05 Explorer 4.0, teilw.

JavaScript 1.3 Navigator 4.06–4.5

JavaScript
Dirk Husung

Einleitung (7)

1.1

Einführendes Beispiel

Einfache JavaScript-Eingaben können über ein
JavaScript-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">
<!--

function Quadrat (Zahl) {

Ergebnis = Zahl * Zahl;
alert (Zahl + "^2 = " + Ergebnis);

}

//-->
</script>
</head><body>
<form>
<input type=button

value="Quadrat von 7 errechnen"
onClick="Quadrat(7)">

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

JavaScript
Dirk Husung

Einführendes Beispiel (1)

Alternativ können JavaScripte in eigenen Dateien
gespeichert werden:

<html><head>
<title>JavaScript-Test</title>
<script language="JavaScript"

src="quadrat.js" type="text/javascript">

</script>
</head><body>
<form>
<input type=button

value="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/

JavaScript
Dirk Husung

Einführendes Beispiel (2)

2

Lexikalische Elemente

•

JavaScript ignoriert Zwischenraumzeichen zwi-
schen Sprachelementen.

•

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

Kommentare

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

nicht schachtelbar */

<!-- Kommentar bis zum Zeilenende
//-->

Bezeichner

•

Folge von Buchstaben und Ziffern, beginnend
mit einem Buchstaben; „

_

“ und „

$

“ (seit Java-

Script 1.1) zählen zu den Buchstaben. Zulässig
sind nur ASCII-Zeichen (keine Umlaute).

JavaScript
Dirk Husung

Lexikalische Elemente (1)

•

Unterscheidung zwischen Groß- und Kleinbuch-
staben (im Gegensatz zu HTML).
Ausnahmen sind bei Client-seitigem JavaScript
möglich (JavaScript Style-Sheets in Navigator 4:

document.tag.BODY.COLOR = "red";

)

•

Maximallänge 32 Zeichen

Reservierte Schlüsselwörter

abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double

else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in

instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super

switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with

JavaScript
Dirk Husung

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.

JavaScript
Dirk Husung

Datentypen (1)

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

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

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

JavaScript
Dirk Husung

Datentypen (2)

3.1

Zahlen

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

Es gibt keinen gesonderten Ganzzahltyp, auch
wenn die meisten ganzzahligen Operationen auf
32-Bit-Werten ausgeführt werden.

•

Die mathematischen Standardfunktionen sind
als 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 Zahl

Number.MIN_VALUE

kleinste negative Zahl

Number.NaN

„not a number“

Number.POSITIVE_INFINITY

+∞

Number.NEGATIVE_INFINITY

−∞

JavaScript
Dirk Husung

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 in
eine Zeichenkette umgewandelt.

Achtung:

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

•

s.length

liefert die Anzahl der Zeichen einer

Zeichenkette

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];

JavaScript
Dirk Husung

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 im
Bedarfsfall eine implizite Typumwandlung von

false

in

0

und von

true

in

1

.

JavaScript
Dirk Husung

Boolsche Werte (2)

3.4

Objekte

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

image.width
image.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 };

JavaScript
Dirk Husung

Objekte (1)

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

Wrapper-Objekte

Zu jedem der primitiven Datentypen gibt es eine
ensprechende 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-Objekte
und umgekehrt.

len = s.length;

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

JavaScript
Dirk Husung

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 beliebige
Ausdrücke angegeben werden.

Auslassen eines Initialwertes bewirkt ein undefinier-
tes Element.

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

JavaScript
Dirk Husung

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 Objekts
gespeichert ist, heißt Methode.

Event-Handler sind Methoden spezieller Objekte
in Client-seitigem JavaScript, die vom Web-Browser
aufgrund entsprechender Benutzeraktionen aufge-
rufen werden.

function square(x) {

return x*x;

}

Seit JavaScript 1.2 können Funktionsdefinitionen
geschachtelt werden.

Eine Funktion kann mit einem Konstruktor erzeugt
werden.

var square =

new Function ("x", "return x*x");

JavaScript
Dirk Husung

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, eine
Konstantenschreibweise für Funktionen:

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

JavaScript
Dirk Husung

Funktionen (2)

3.7

null

und

undefined

Der Wert

null

bedeutet, daß eine Variable keinen

gü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

als

gleich behandelt, der

typeof

-Operator (ab Java-

Script 1.1) liefert jedoch:

type = typeof null;

// "object"

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

JavaScript
Dirk Husung

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 einem

Backslash zu schreiben.

JavaScript
Dirk Husung

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 von
Paaren aus Schlüsselnamen und assoziierten Wer-
ten, eingeschlossen in „

{ }

“.

JavaScript
Dirk Husung

Konstanten (2)

var Sales = "Toyota";

function CarTypes(name) {

if(name == "Honda")

return name;

else

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

}
car = {myCar: "Saturn",

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

document.write(car.myCar);

// Saturn

document.write(car.getCar);

// Honda

document.write(car.special); // Toyota

Spezielle Konstanten

null

JavaScript
Dirk Husung

Konstanten (3)

3.9

Variablen

Eine Variable verknüpft einen Namen mit einem Wert.

Dynamische Typisierung

In JavaScript können derselben Variablen Werte
unterschiedlichen 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ärt
werden.

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.

JavaScript
Dirk Husung

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 initialisiert
werden.

var i = 0, k = 0;

Wird eine Variable nicht initialisiert, so erhält sie
den Wert

undefined

oder

NaN

in numerischem

Kontext.

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

JavaScript
Dirk Husung

Variablen (2)

Eine globale Variable ist programmweit sichtbar, ei-
ne lokale Variable innerhalb der Funktion, in der sie
deklariert 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); // undefined
var scope = "local";
document.write (scope); // "local"

}

Variablen sollten am Beginn einer Funktion dekla-
raiert werden.

Namensauflösung

Jede globale Variable wird als Komponente eines
globalen Objekts angelegt. Im Client-seitigen Ja-
vaScript dient das

window

-Objekt als globales Ob-

jekt. Es besitzt eine sich selbst referenzierende

window

-Komponente.

JavaScript
Dirk Husung

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. Teil
dieses Kontextes ist das Aufruf-Objekt.

Es werden verschiedene globale Ausführungskon-
texte unterstützt, jeder mit einem eigenen globalen
Objekt. 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.

JavaScript

sucht den Wert einer Variablen entlang dieser Ket-
te.

Garbage Collection

JavaScript besitzt eine automatische Speicherfrei-
gabe.

JavaScript
Dirk Husung

Variablen (4)

3.10

Operatoren

Operator-Priorität

Operatorart

Operatoren

Komponetenzugriff

. []

Instantiierung

new

Unterprogrammaufruf

()

Negation/Inkrement

! ~ - + ++ -- typeof void

delete

Multiplikation/Division

* / %

Addition/Subtraktion

+ -

bitweiser Shift

<< >> >>>

Vergleich

< <= > >=

Gleichheit

== !=

bitweises Und

&

bitweises Exklusiv-Oder

^

bitweises Oder

|

logisches Und

&&

logisches Oder

||

Bedingter Ausdruck

?:

Zuweisung

= += -= *= /= %= <<= >>=

>>>= &= ^= |=

Komma

,

JavaScript
Dirk Husung

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 des
rechten 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

JavaScript
Dirk Husung

Operatoren (2)

Zwei Operanden werden wie folgt auf Gleichheit
verglichen:

•

Besitzen die Operanden denselben Typ, werden
ihre Werte verglichen.

Besitzt einer der Operanden den Wert

NaN

, sind

die 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 andere

undefined

, 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 eine
Zahl konvertiert und der Vergleich erneut durch-
geführt.

Besitzt einer der Operanden einen boolschen
Wert, wird

false

nach

0

,

true

nach

1

kon-

vertiert und der Vergleich erneut durchgeführt.

JavaScript
Dirk Husung

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

false

zu liefern.

•

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

•

Der strikte Vergleichsoperator „

===

“, implemen-

tiert in IE 4, entspricht einem Vergleich auf
Gleichheit ohne vorherige Typkonvertierung der
Operanden.

null

und

undefined

werden nicht als gleich

bertrachtet.

JavaScript
Dirk Husung

Operatoren (4)

•

Die Operatoren „

<

“, „

<=

“, „

>

“, „

>=

“ erlauben Ope-

randen beliebigen Typs, sind jedoch nur für Zah-
len und Zeichenketten erklärt; die Operanden
werden ggf. konvertiert.

Arithmetische Operatoren

Im wesentlichen wie in C, aber:

•

Bei „+“-Verknüpfung einer Zeichenketten mit
Zahl, 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.

JavaScript
Dirk Husung

Operatoren (5)

Bitweise Operatoren

Operator Beschreibung

&

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 ihre

Operanden 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 linken

Operanden, sonst den des rechten.

JavaScript
Dirk Husung

Operatoren (6)

•

Kann der linke Operand von „

||

“ zu

true

kon-

vertiert werden, liefert „

||

“ den Wert des linken

Operanden, sonst den des rechten.

Spezielle Operatoren

Operator Beschreibung

new

Instantiierung eines Objekts

delete

Löschen eines Objekts, eines Objektattributs oder
eines Feldelements

this

Referenz auf das aktuelle Objekt

typeof

Typkennung (als Zeichenkette)

void

Ausdrucksauswertung ohne Ergebnisrückgabe

Anmerkungen:

•

Objekte und Felder werden mit dem

new

-Operator

erzeugt:

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 Wert

von

this

übergeben wird.

JavaScript
Dirk Husung

Operatoren (7)

•

delete

dient dem Löschen einer Objektkom-

ponente. Bei einigen vordefinierten und einigen
Client-seitigen

Objektkomponenten

bleibt

delete

wirkungslos. Ein Aufruf von

delete

fü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 primitiven

Datentypen,

"object"

für Objekte, Felder und

null

,

"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>

JavaScript
Dirk Husung

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();

}

JavaScript
Dirk Husung

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++;

}

JavaScript
Dirk Husung

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);

JavaScript
Dirk Husung

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();

}

JavaScript
Dirk Husung

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ähligen
Argumente ignoriert.

•

Wird eine Funktion mit weniger Argumenten auf-
gerufen als vereinbart, erhalten die restlichen
Paramter 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:

JavaScript
Dirk Husung

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

-Objekt

verweist. 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:

JavaScript
Dirk Husung

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 Komponenten

callee

(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 ergibt
sich mit

arguments.caller.callee

.

5.3

Funktions-Objekt

Die

length

-Komponente eines Funktions-Objekts

liefert die Zahl definierter Parameter. Seit Java-
Script 1.2 wird die Verwendung von

arity

statt

length

empfohlen (mit gleicher Bedeutung).

JavaScript
Dirk Husung

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 die
Methoden

apply()

und

call()

. Sie erlauben die

betreffenden Funktion aufzurufen, als sei sie Me-
thode eines anderen Objekts:

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

oder

f.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; ihr

Wert besteht über einen Funktionsaufruf hinaus.

uniqueInteger.counter = 0;

function uniqueInteger() {

return uniqueInteger.counter++;

}

JavaScript
Dirk Husung

Funktions-Objekt (1)

5.4

Prototyp-Objekt

Ein Funktionsobjekt besitzt eine

prototype

-Kom-

ponente, die auf ein vordefiniertes Prototyp-Objekt
verweist.

JavaScript
Dirk Husung

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 einer
Literalschreibweise.

•

Auf Objekt-Komponenten wird mit dem „

.

“-Ope-

rator zugegriffen.

•

Der Versuch, den Wert einer nicht definierten
Komponente zu lesen, liefert

undefined

.

•

Eine Objekt-Komponente wird durch einfache
Wertzuweisung 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);

}

JavaScript
Dirk Husung

Objekte (1)

6.1

Konstruktor-Funktionen

Eine Konstruktor-Funktion dient der Initialisierung
eines neu erzeugten Objekts.

Sie wird durch den

new

-Operator aufgerufen und

erhält einen Verweis auf ein neu erzeugtes, leeres
Objekt als Wert der vordefinierten

this

-Variable.

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

new

-Operators.

6.2

Methoden

Eine Methode ist eine JavaScript-Funktion, deren
Aufruf an ein Objekt geknüpft ist. Über die vordefi-
nierte

this

-Variable erhält die Methode Zugriff auf

dieses Objekt.

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

JavaScript
Dirk Husung

Methoden (1)

Allerdings gilt: Eine Funktion speichert ihren Wert
in einer Variablen. Jede globale Variable wird als
Komponente eines globalen Objekts gespeichert.
Eine Funktion ist damit zunächst Methode dieses
globalen Objekts,

this

verweist innerhalb der Funk-

tion auf das globale Objekt.

Der Unterschied liegt in der Intention: Methoden
wirken vorrangig auf das Objekt, an das ihr Aufruf
geknüpft ist, Funktionen sind eigenständig.

6.3

Prototyp-Objekt

Es ist ineffizient, mittels einer Konstruktor-Funktion
dieselben Methoden in jedem einzelnen Objekt ein-
zutragen; eine Lösung bietet seit JavaScript 1.1
das 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

JavaScript
Dirk Husung

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 zur
Speicherung 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-Objekt
dagegen unberücksichtigt, es wird eine Komponen-
te in dem betreffenden Objekt angelegt, die eine
gleichnamige Komponente des Prototyp-Objekts ver-
deckt.

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

JavaScript
Dirk Husung

Prototyp-Objekt (1)

6.4

Vererbung

Ein Prototyp-Objekt ist selbst ein Objekt, erzeugt
mittels

new Object()

, besitzt damit seinerseits

ein Prototyp-Objekt. Es ist möglich, eine Klasse zur
abgeleiteten 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-Funktion

für

Car

verweist.

Die

constructor

-Komponente ist häufig hilfreich

zur Identifizierung eines Objekttyps.

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

Car.prototype.__proto__ =

new Vehicle.prototype;

JavaScript
Dirk Husung

Vererbung (1)

6.5

Vergleich C++,Java – JavaScript

C++, Java

JavaScript

klassenbasierte Vererbung prototypbasierte Vererbung
Klasse

Konstruktor-Funktion, Prototyp

Instanzvariablen

gesetzt in Konstruktor-Funktion

Instanzmethode

Komponente des Prototyp-Ob-

jekts

Klassenvariable

Komponente des Konstruktor-

Funktionsobjekts

Klassenmethode

Komponente des Konstruktor-

Funktionsobjekts

6.6

Einige Methoden

Jedes Objekt erbt die für

Object

definierten Kom-

ponenten.

toString()

, angewandt auf ein Objekt

o

, liefert

einige interne Information über

o

, unter Navigator 4

fü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

JavaScript
Dirk Husung

Einige Methoden (2)

Object.prototype.toString.apply(o);

aufgerufen werden.

valueOf()

, angewandt auf ein Objekt

o

, liefert

das 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-Interpreter
eine benutzerdefinierte Funktion aufgerufen:

function readOnlyHandler (

property, oldValue, newValue) {

if (newValue != oldValue)

alert (property + "is read only");

}

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

JavaScript
Dirk Husung

Einige Methoden (3)

7

Felder

7.1

Array-Definition

Felder können auf unterschiedliche Weise erkärt
werden:

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 jedoch
für Felder typische Komponenten (etwa

length

).

JavaScript
Dirk Husung

Array-Definition (1)

7.2

Array-Methoden

join()

konvertiert alle Elemente eines Felder zu

Zeichenketten 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 („in

Place“), 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).

JavaScript
Dirk Husung

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 den
Index des ersten Elements, das zweite Argument
verringert um 1 den Index des letzten Elements an.
Ein negatives Argument

i

wird als

length-|i|

behandelt. Fehlt das zweite Argument, wird

length

verwandt.

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

// [2, 3];

toString()

liefert grundsätzlich dasselbe wie

join()

, unter Navigator 4 für JavaScript 1.2 je-

doch eine Literaldarstellung. Ab JavaScript 1.3 soll-
te

toSource()

statt

toString()

benutzt wer-

den.

JavaScript
Dirk Husung

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ür
sich 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

JavaScript
Dirk Husung

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,}

JavaScript
Dirk Husung

Muster (2)

Es können Alternativen angegeben und Teile von
Mustern 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 bestimmte
Positionen 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

JavaScript
Dirk Husung

Muster (3)

8.2

String

-Methoden

search()

liefert den Index des ersten Zeichens

einer Zeichenkette, ab der ein gegebenes Muster
paß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 bei

nicht gesetztem

g

-Attribut ein Feld, dessen erste

Komponente den gesamten passenden Teil der Zei-
chenkette enthält und dessen folgende Komponen-
ten die zu den Gruppen des Musters passenden
Teile enthalten.

Bei gesetztem

g

-Attribut liefert

match()

ein Feld

mit den Teilen einer Zeichenkette, die auf das ge-
gebene Muster passen.

JavaScript
Dirk Husung

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);

JavaScript
Dirk Husung

RegExp

-Methoden (1)

Wird das

g

-Attribut angegeben, setzt

exec()

die

lastIndex

-Komponente des

RegExp

-Objekts auf

das erste Zeichen hinter der Teilzeichenkette, auf
die das Muster paßt.

Ein erneuter Aufruf von

exec()

beginnt seine Su-

che ab der

lastIndex

-Position.

Wird keine passende Teilzeichenkette gefunden, so
wird

lastIndex

auf

0

zurückgesetzt.

JavaScript
Dirk Husung

RegExp

-Methoden (2)

9

Windows und Frames

Das

window

-Objekt stellt das globale Objekt in

Client-seitigem JavaScript dar; es speichert alle glo-
balen Variablen.

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

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 bei
IE 4).

JavaScript
Dirk Husung

Windows und Frames (1)

Komponente Beschreibung

location

Verweis auf das

location

-Objekt, das die

URL des angezeigten Dokuments repräsen-
tiert. Durch Wertzuweisung kann eine andere
Seite geladen werden.

locationbar

,

menubar

,

personalbar

,

scollbars

,

statusbar

,

toolbar

legt die Sichtbarkeit der entsprechenden Teile
eines 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 eines
Frame.

self

Verweis auf das

window

-Objekt selbst.

top

Verweis auf das oberste Fenster einer Frame-
Hierarchie

window

Verweis auf das

window

-Objekt selbst.

Methoden

Methode

Beschreibung

alert()

,

confirm()

,

prompt()

einfache vordefinierte Popup-Dialogboxen.

close()

schließt ein Fenster.

JavaScript
Dirk Husung

Windows und Frames (2)

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. gibt
ihn 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 gegebenen
Zeit aufgerufen wird bzw. dies nicht mehr erfolgt.

JavaScript
Dirk Husung

Windows und Frames (3)

9.1

Einfache Dialoge

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

if (confirm (msg))

location.replace ("hires.htm");

else

location.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, um

die Standardaktion des Browsers zu unterdrücken,
die URL in der Statuszeile anzuzeigen.

Der Standardtext der Statuszeile kann durch Zu-
weisung an

defaultStatus

gesetzt werden.

JavaScript
Dirk Husung

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();">
<!-- HTML Dokument -->
</BODY>
</HTML>

JavaScript
Dirk Husung

Periodische Aktionen (2)

9.4

navigator

-Objekt

Die

window.navigator

-Komponente verweist auf

ein

navigator

-Objekt, das Informationen über den

verwendeten Browser liefert:

Komponente

Beschreibung

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

in

IE 4).

Anzeige aller Browser-Informationen:

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

browser +=

item + ": " + navigator[item] + "\n";

alert (browser);

JavaScript
Dirk Husung

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();

JavaScript
Dirk Husung

Fenster-Kontrolle (1)

10

Dokument-Objekt-Modell

Das

document

-Objekt stellt eine Reihe nützlicher

Komponenten bereit:

Komponente

Beschreibung

alinkColor

Farbe eines aktivierten Links (während des
Anklickens).

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.

JavaScript
Dirk Husung

Dokument-Objekt-Modell (1)

Komponente

Beschreibung

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ß vor
einer untergeordneten HTML-Seite zuerst die auf
oberster 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>

JavaScript
Dirk Husung

Dokument-Objekt-Modell (2)

Das folgende Beispiel erstellt ein Verzeichnis aller
Ankerpunkte 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

else

text = 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();

}

JavaScript
Dirk Husung

Dokument-Objekt-Modell (4)

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 oder
mehrerer Einträge;

onChange

<input type=submit>

Druckknopf zum Absenden ei-
nes Formulars;

onClick

<input type=text>

einzeiliges Textfeld;

onChange

<textarea>

mehrzeiliges Textfeld;

onChange

JavaScript
Dirk Husung

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";

}

JavaScript
Dirk Husung

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>

JavaScript
Dirk Husung

Formularüberprüfung (2)

12

Ereignisbehandlung

Ereignis

Eintreten

onAbort

bei Abbruch

onBlur

beim Verlassen eines Elements

onChange

bei erfolgter Änderung

onClick

beim Anklicken; Rückgabe von

false

, um

Standardaktion zu unterdrücken

onDblClick

bei doppeltem Anklicken

onError

im Fehlerfall

onFocus

beim Aktivieren eines Elements

onKeyDown

bei gedrückter Taste; Rückgabe von

false

zum Abbruch

onKeyPress

bei erfolgtem Tastendruck; Rückgabe von

false

zum Abbruch

onKeyUp

bei losgelassener Taste

onLoad

nach volständigem Laden einer Datei

onMouseDown

bei gedrückter Maustaste; Rückgabe von

false

zum Abbruch

onMouseMove

bei weiterbewegter Maus

onMouseOut

beim Verlassen des Elements mit der Maus

onMouseOver

beim Überfahren des Elements mit der
Maus; Rückgabe von

true

, um die Anzeige

einer URL in der Statuszeile zu verhindern

onMouseUp

bei losgelassener Maustaste; Rückgabe von

false

zum Abbruch

JavaScript
Dirk Husung

Ereignisbehandlung (1)

Ereignis

Eintreten

onReset

beim Zurücksetzen des Formulars; Rückga-
be von

false

zum Abbruch

onRsize

beim Ändern der Fenstergröße

onSelect

beim Selektieren von Text

onSubmit

beim Absenden des Formulars; Rückgabe
von

false

zum Abbruch

onUnload

beim Verlassen der Datei

javascript:

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>

JavaScript
Dirk Husung

Eventhandler als JavaScript-Komponenten (2)

Vorsicht: In diesem Fall sind gegenüber oben

Button

,

Form

und

Document

nicht Bestandteil der

Sichtbarkeitskette des Eventhandlers.

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

JavaScript
Dirk Husung

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 zu
speichern (für Schlüssel und Wert zusammen).

Ein Cookie-Wert darf kein Semikolon, Komma oder
Zwischenraumzeichen enthalten.

Deshalb emp-

fiehlt sich die Verwendung der JavaScript-Funktio-
nen

escape()

und

unescape()

zur Ver- und Ent-

schlüsselung eines Cookie-Wertes.

JavaScript
Dirk Husung

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 folgende
Attribute gesetzt werden:

expires=Datum

standardmäßig bleiben Cookies nur bis zum Ende einer
Web-Browser-Sitzung erhalten.

path=Pfad

standardmäßig ist ein Cookie nur Web-Seiten in demsel-
ben Verzeichnis und dessen Unterverzeichnissen zugäng-
lich.

Durch Angabe eines verkürzten Pfades kann ein

Cookie auch übergeordneten Verzeichnissen und deren
Unterverzeichnissen zugänglich gemacht werden

domain=Domäne

standardmäß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.

secure

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

JavaScript
Dirk Husung

Speichern eines Cookies (2)

Ein Cookie kann gelöscht werden, indem er mit
demselben Schlüssel, einem beliebigen Wert und
einem bereits verstrichenen Verfallsdatum erneut
geschrieben 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!");

}

JavaScript
Dirk Husung

Lesen eines Cookies (1)

15

Beispiele

15.1

Ereignisse

<html><head><title>Events</title>
<script language="JavaScript">
<!--
if ( navigator.appName == ’Netscape’ &&

parseFloat(navigator.appVersion) >= 3

|| parseFloat(navigator.appVersion) >= 4)
version = "ro";

else

version = "noro";

if (version == "ro") {

Picture = new Array(2);
for(i = 0; i < 2; i++) {

Picture[i] = new Image();
Picture[i].src = "welcome"+i+".gif";

}

}

function picChange (name,number) {

if (version == "ro")

name.src = Picture[number].src;

}
//-->
</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>

JavaScript
Dirk Husung

Ereignisse (1)

15.2

Cookies

<html><head><title>Cookies</title>
<script language="JavaScript">
<!--
function readValue () {

var value = "";
if (document.cookie) {

var valueStart =

document.cookie.indexOf ("=") + 1;

var valueEnd =

document.cookie.indexOf (";");

if (valueEnd == -1)

valueEnd = document.cookie.length;

value = document.cookie.substring (

valueStart, valueEnd);

}
return Wert;

}

function writeValue (ident, value, lifetime) {

var now = new Date();
var timeout = new Date (

now.getTime() + lifetime);

document.cookie = ident + "=" + Wert

+ "; expires=" + timeout.toGMTString()
+ ";";

}

JavaScript
Dirk Husung

Cookies (2)

function access() {

var lifetime = 1000*60*60*24*365;
var count = readValue();
var counter = 0;
if (count != "")

counter = parseInt (count);

if (document.cookie)

counter = counter + 1;

else

counter = 1;

writeValue ("Counter", counter, lifetime);
alert ("Dies ist Ihr " + counter

+ ". Besuch auf dieser Seite!");

}
//-->
</script>
</head><body onLoad="access()">
Inhalt der Datei
</body></html>

JavaScript
Dirk Husung

Cookies (3)

15.3

Formulare

<html><head><title>Seitentitel</title>
<script language="JavaScript">
<!--
function checkForm() {

if (document.Formular.User.value == "") {

alert("Bitte Ihren Namen eingeben!");
document.Formular.Name.focus();
return false;

}
if (document.Formular.Mail.value == "") {

alert("Bitte Ihre eMail-Adresse eingeben!");
document.Formular.Mail.focus();
return false;

}
if (document.Formular.Alter.value == "") {

alert("Bitte Ihr Alter eingeben!");
document.Formular.Alter.focus();
return false;

}

if (document.Formular.Mail.value.indexOf(’@’)

== -1) {

alert("Keine E-Mail-Adresse!");
document.Formular.Mail.focus();
return false;

}

JavaScript
Dirk Husung

Formulare (1)

with (document.Formular.Alter) {

var ok = true;
for(i=0; i < value.length; ++i)

if (

value.charAt(i) < "0"

|| value.charAt(i) > "9")

ok = false;

if(!ok) {

alert("Altersangabe keine Zahl!");
focus();
return false;

}

}

}
//-->
</script>
</head><body>
<form name="Formular"

action="mailto:[e-mail]"
method=post
onSubmit="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>

JavaScript
Dirk Husung

Formulare (2)