JavaScript

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 WWWBrowser interpretierte, in HTML integrierbare Programmiersprache, von Netscape entwickelt und lizensiert.
Unterschieden werden JavaScript-Kern, Client-seitiges („LiveScript“), und Server-seitiges JavaScript
(„LiveWire“, Active Server Pages (ASP) bei Microsoft).
Client-seitiges JavaScript umfaßt neben dem JavaScript-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 bildet (eine herstellerabhängige) Alternative zu CGISkripten.
Im folgenden sollen der JavaScript-Kern und Clientseitiges 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 konform zu den internationalen Standards ECMA-2621
und ISO-162622.
Der MS Internet-Explorer interpretiert tatsächlich
eine Sprachvariante, JScript, die spezielle Befehle für Betriebssystemerweiterungen bereitstellt.
Was kann JavaScript?
• JavaScript stellt eine vollwertige Programmiersprache dar.
Es unterstützt beliebige Berechnungen mit einer Vielzahl von Standardfunktionen.
• Event-Handler erlauben es, auf Benutzereingaben ü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
2
ECMA: European Computer Manufacturers Association
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 sowie Kontrollelemente eines neuen Fensters vorgegeben werden.
• Das Dokument-Objekt-Modell bietet Zugriff auf
eine Hierarchie von Objekten, entsprechend
dem Inhalt einer Web-Seite.
Unter Ausnutzung des Dokument-Objekt-Modells ist es möglich, Dokumente von Grund auf
vollständig aufzubauen.
IE 4 unterstützt ein vollständiges Dokument-Objekt-Modell, das es gestattet, Inhalt und Aussehen eines jeden Elements zu modifizieren.
• document.write() fügt beliebigen HTMLCode in ein Dokument ein, zu dem Zeitpunkt,
zu dem die Seite von dem Browser analysiert
wird.
• Das Form-Objekt erlaubt den Zugriff auf HTMLFormulare, 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 Statuszeile des Browser-Fensters anzuzeigen, etwa wenn der Benutzer die Maus über einen Hypertextlink 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 temporär oder dauerhaft durch den Client gespeichert werden.
JavaScript
Dirk Husung
Einleitung (5)
Seit JavaScript 1.1:
• Austausch eines per IMG-Tag angezeigten Bildes
• 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 Fenstern
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 gestatten, Frames direkt zu erzeugen oder zu verändern.
Versionen
JavaScript
Navigator
JavaScript 1.0
JavaScript 1.1
JavaScript 1.2
JavaScript 1.3
Navigator 2.0
Explorer 3.0
Navigator 3.0
Explorer 4.0
Navigator 4.0–4.05 Explorer 4.0, teilw.
Navigator 4.06–4.5
JavaScript
Dirk Husung
Internet Explorer
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 Eingabe 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 zwischen Sprachelementen.
• Grundsätzlich wird jede Anweisung durch ein
Semikolon abgeschlossen. Ein Semikolon hinter der letzten Anweisung einer Zeile ist optional.
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 JavaScript 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 Kleinbuchstaben (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
JavaScript
Dirk Husung
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
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 eine feste Speicherplatzgröße.
JavaScript
Dirk Husung
Datentypen (1)
Ein Referenz-Datentyp speichert einen Verweis auf
seinen Wert; Variablen desselben Referenz-Datentyps können unterschiedlich viel Speicherplatz belegen. Verschiedene Referenzvariablen können auf
denselben Wert verweisen.
Objekte, Felder und Funktionen sind als Referenzdatentypen implementiert.
Zeichenketten können als unveränderlicher Referenztyp betrachtet werden.
JavaScript
Dirk Husung
Datentypen (2)
3.1 Zahlen
stellt JavaScript stets im 8-Byte-IEEE-Gleitkommaformat 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 Zeichenkette konvertiert werden:
x = 10;
s = x.toString(2); // zur Basis 2
Spezielle Werte
Wert
Bedeutung
Number.MAX_VALUE
Number.MIN_VALUE
Number.NaN
Number.POSITIVE_INFINITY
Number.NEGATIVE_INFINITY
größte darstellbare Zahl
kleinste negative Zahl
„not a number“
+∞
−∞
JavaScript
Dirk Husung
Zahlen (1)
3.2 Zeichenketten
(Konstantenschreibweise s.u.)
JavaScript kennt keinen gesonderten Zeichentyp.
• „+“ dient dem Aneinanderhängen von Zeichenketten; 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 Zugriff 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 Vergleichsoperatoren.
Obwohl JavaScript im Gegensatz zu C einen eigenstä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 (Verhalten) sein.
image.width
image.height
document.write("text");
Objekte in JavaScript können als assoziative Felder dienen.
image["width"]
image["height"]
Objekte werden durch spezielle Konstruktorfunktionen erzeugt:
var o = new Object();
Seit JavaScript 1.2 können Objekte mit einer Intitialisierungssyntax 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 WrapperObjekt nimmt den Wert einer Variable eines primitiven Typs auf, stellt jedoch zusätzliche Komponenten zur Verfügung.
JavaScript konvertiert implizit je nach Kontext primitive 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, beginnend bei 0. Die Feldelemente können beliebigen 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 Initialisiserungssyntax 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 undefiniertes Element.
Achtung:Navigator 4 besitzt folgenden Fehler: Wird
in der Initialisierungssyntax nur ein einzelnes Element 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 gespeichert 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 aufgerufen 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 Funktion, 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 einer nicht existierenden oder nicht initialisierten Variable oder Methode.
Es gibt kein Schlüsselwort undefined. Bei einem Vergleich werden null und undefined als
gleich behandelt, der typeof-Operator (ab JavaScript 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 verwendet, sind für JavaScript einfache empfehlenswert. Ein Apostroph ist dann als „\’“ mit einem
Backslash zu schreiben.
JavaScript
Dirk Husung
Konstanten (1)
Spezielle Zeichen
\b
\f
\n
\r
\t
\\
\’
\"
\ddd
\xdd
\udddd
Backspace
Seitenvorschub (form feed)
Zeilenende (new line)
Zeilenrücklauf (carriage return)
horizontaler Tabulator
Fluchtsymbol (backslash)
Apostroph (quote)
Anführungszeichen (double quote)
ASCII-Zeichen in oktaler Notation
ASCII-Zeichen in hexidezimaler Notation
Unicode-Zeichen in hexidezimaler Notation (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 Werten, 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 Typkonvertierungen durch.
null bedeutet 0 in numerischem, false in boolschem Kontext,
undefined bedeutet false in boolschem Kontext.
Deklaration
Variablen können außerhalb von Funktionen (global) oder innerhalb einer Funktion (lokal) erklärt
werden.
Globale Variablen lassen sich durch einfache Wertzuweisung einführen, optional mit dem Schlüsselwort var, lokale Variablen sind stets mit var einzuführen.
JavaScript
Dirk Husung
Variablen (1)
var i;
Eine Wertzuweisung an eine nicht mit var deklarierte Variable definiert ein globale Variable.
Der Versuch, den Wert einer nicht mit var deklarierten Variable zu lesen, führt zu einem Laufzeitfehler.
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 initialisiert werden.
Sichtbarkeitsbereich
JavaScript
Dirk Husung
Variablen (2)
Eine globale Variable ist programmweit sichtbar, eine lokale Variable innerhalb der Funktion, in der sie
deklariert ist, auch vor ihrer Deklaration. Im Falle geschachtelter Funktionsdefinitionen besitzt jede Funktion ihren eigenen Sichtbarkeitsbereich.
Eine lokale Variable verdeckt eine gleichnamige globale.
var scope = "global";
function checkscope() {
document.write (scope); // undefined
var scope = "local";
document.write (scope); // "local"
}
Variablen sollten am Beginn einer Funktion deklaraiert werden.
Namensauflösung
Jede globale Variable wird als Komponente eines
globalen Objekts angelegt. Im Client-seitigen JavaScript dient das window-Objekt als globales Objekt. Es besitzt eine sich selbst referenzierende
window-Komponente.
JavaScript
Dirk Husung
Variablen (3)
Parameter und lokale Variablen einer Funktion werden als Komponenten eines Aufruf-Objekts angelegt.
Bei Aufruf einer Funktion erzeugt der JavaScriptInterpreter einen neuen Ausführungskontext. Teil
dieses Kontextes ist das Aufruf-Objekt.
Es werden verschiedene globale Ausführungskontexte unterstützt, jeder mit einem eigenen globalen
Objekt. Zwischen diesen Kontexten ist ein Datenaustausch möglich (Sicherheitproblem!)
Jedem Ausführungskontext ist eine Sichtbarkeitskette zugeordnet: Dazu sind die Aufruf-Objekte entsprechend der lexikalischen Struktur der zugehörigen Funktionsdefinitionen verkettet. JavaScript
sucht den Wert einer Variablen entlang dieser Kette.
Garbage Collection
JavaScript besitzt eine automatische Speicherfreigabe.
JavaScript
Dirk Husung
Variablen (4)
3.10 Operatoren
Operator-Priorität
Operatorart
Operatoren
Komponetenzugriff
Instantiierung
Unterprogrammaufruf
Negation/Inkrement
. []
new
()
! ~ - + ++ -- 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 geeigneten 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 Typkonvertierung
true bei ungleichem Wert, selbst nach Typkonvertierung
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 Objekte, sind sie ungleich, selbst wenn beide Objekte zu gleichen primitiven Datentypen konvertiert werden könnten.
• Ist einer der Operanden null und der andere
undefined, sind die Operanden gleich.
• Andernfalls wird versucht, die Operanden in gleiche Typen zu konvertieren:
Ist der eine Operand eine Zahl, der andere eine Zeichenkette, wird die Zeichenkette in eine
Zahl konvertiert und der Vergleich erneut durchgeführt.
Besitzt einer der Operanden einen boolschen
Wert, wird false nach 0, true nach 1 konvertiert und der Vergleich erneut durchgeführt.
JavaScript
Dirk Husung
Operatoren (3)
Ist einer der Operanden ein Objekt und der andere eine Zahl oder Zeichenkette, wird versucht,
das Objekt mittels valueof() oder toString()
zu konvertieren; danach wird der Vergleich erneut ausgeführt.
In allen anderen Fällen liefert der Vergleich ungleich.
Anmerkungen:
• Wenn Navigator 3 bei einem Vergleich eine Zeichenkette 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 Vergleich auf Gleichheit keine Typ-Konvertierung
durch.
• Der strikte Vergleichsoperator „===“, implementiert 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 Operanden beliebigen Typs, sind jedoch nur für Zahlen 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 konvertiert, und die Zeichenketten werden aneinandergehängt.
s = "1" + 2 // "12"
• Die Division ganzer Zahlen erfolgt gleitpunktmäßig.
• Der Modulo-Operator ist auch für Gleitpunkt-Datentypen 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 32Bit-Werte darstellbar sind.
Logische Operatoren
Anmerkungen:
• Kann der linke Operand von „&&“ zu false konvertiert werden, liefert „&&“ den Wert des linken
Operanden, sonst den des rechten.
JavaScript
Dirk Husung
Operatoren (6)
• Kann der linke Operand von „||“ zu true konvertiert werden, liefert „||“ den Wert des linken
Operanden, sonst den des rechten.
Spezielle Operatoren
Operator Beschreibung
new
delete
this
typeof
void
Instantiierung eines Objekts
Löschen eines Objekts, eines Objektattributs oder
eines Feldelements
Referenz auf das aktuelle Objekt
Typkennung (als Zeichenkette)
Ausdrucksauswertung ohne Ergebnisrückgabe
Anmerkungen:
• Objekte und Felder werden mit dem new-Operator
erzeugt:
new constructor
Der constructor muß die Form eines Funktionsaufrufs besitzen. Falls keine Argumente angegeben werden, können die Klammern entfallen.
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 Objektkomponente. Bei einigen vordefinierten und einigen
Client-seitigen
Objektkomponenten
bleibt
delete wirkungslos. Ein Aufruf von delete
für mittels var deklarierte Variablen führt zu einer Fehlermeldung.
• Der typeof-Operator (seit Navigator 3 und IE 3)
liefert eine Zeichenkette, die den Typ des Operanden 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 uninitialisierte Komponenten.
Um verschiedene Objekttypen zu unterscheiden,
kann meist die constructor-Komponente herangezogen werden:
if (typeof d == "object" &&
d.constructor == Date) {
...
}
• void liefert für beliebige Operanden das Ergebnis undefined. Dies kann nützlich sein innerhalb 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 aufgerufen als vereinbart, werden die überzähligen
Argumente ignoriert.
• Wird eine Funktion mit weniger Argumenten aufgerufen als vereinbart, erhalten die restlichen
Paramter den Wert undefined.
• Enthält eine Funktionsdefinition keine returnAnweisung, liefert sie den Wert undefined zurück.
Obige Funktionsdefinition erzeugt ein Funktionsobjekt und weist es der Variablen square zu; entsprechend ist zulässig:
JavaScript
Dirk Husung
Funktionsdefinition (1)
var f = square;
var y = f(2);
Funktionen können an Objektkomponenten zugewiesen 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 werden als Komponenten eines Aufruf-Objekts angelegt.
Ein Aufruf-Objekt definiert außerdem eine Komponente arguments, die auf ein arguments-Objekt
verweist. Dieses Objekt stellt ein Feld dar:
arguments.length liefert die Anzahl aktueller Argumente, arguments[i] das i-te Argument.
Damit sind Funktionen für beliebige Argumentanzahl 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 Navigator 4 mit geänderter Bedeutung):
arguments.callee verweist auf die aktuell ausgeführte Funktion. Damit kann eine anonyme Funktion rekursiv aufgerufen werden.
arguments.caller verweist auf das ArgumentObjekt der Funktion, die die aktuell ausgeführte aufgerufen 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 JavaScript 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 Methode 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 Funktionsobjekts 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-Komponente, die auf ein vordefiniertes Prototyp-Objekt
verweist.
JavaScript
Dirk Husung
Prototyp-Objekt (2)
6 Objekte
• Objekte können erzeugt werden mit dem newOperator gefolgt von dem Aufruf einer Konstruktor-Funktion oder seit JavaScript 1.2 mit einer
Literalschreibweise.
• Auf Objekt-Komponenten wird mit dem „.“-Operator 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-Komponente mit delete gelöscht werden.
• Mit der for/in-Schleife können alle benutzerdefinierten Komponenten eines Objekts durchlaufen werden; einige vordefinierte Komponenten 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ückgabewert 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 vordefinierte this-Variable erhält die Methode Zugriff auf
dieses Objekt.
Einer Methode wird auf diese Weise stets ein zusä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 Funktion 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 einzutragen; eine Lösung bietet seit JavaScript 1.1
das Prototyp-Objekt.
Zu jeder Konstruktor-Funktion wird ein PrototypObjekt erzeugt und jedes mit einer KonstruktorFunktion initialisierte Objekt erbt alle Komponenten dieses Prototyp-Objekts; die Komponenten des
JavaScript
Dirk Husung
Prototyp-Objekt (1)
Prototyp-Objekts erscheinen unmittelbar als Komponenten des Objekts, auch wenn sie dem Prototyp-Objekt nach Erzeugung des Objekts hinzugefügt werden.
Damit eignet sich das Prototyp-Objekt ideal zur
Speicherung von Konstanten und Methoden.
Wird lesend auf eine Objekt-Komponente zugegriffen, so wird die Komponente zunächst in dem Objekt, dann in dessen Prototyp-Objekt gesucht.
Bei einer Wertzuweisung bleibt das Prototyp-Objekt
dagegen unberücksichtigt, es wird eine Komponente in dem betreffenden Objekt angelegt, die eine
gleichnamige Komponente des Prototyp-Objekts verdeckt.
In Navigator 4 wird zu jeder Funktion ein PrototypObjekt erzeugt, für den Fall, daß die Funktion als
Konstruktor-Funktion dient. Navigator 3 erzeugt ein
Prototyp-Objekt erst bei der tatsächlichen Verwendung 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 abgeleiteten Klasse setzt:
Car.prototype = new Vehicle();
Damit verliert man jedoch die von JavaScript generierte constructor-Komponente des PrototypObjekts 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 erklären:
Car.prototype.__proto__ =
new Vehicle.prototype;
JavaScript
Dirk Husung
Vererbung (1)
6.5 Vergleich C++,Java – JavaScript
C++, Java
JavaScript
klassenbasierte Vererbung
Klasse
Instanzvariablen
Instanzmethode
prototypbasierte Vererbung
Konstruktor-Funktion, Prototyp
gesetzt in Konstruktor-Funktion
Komponente des Prototyp-Objekts
Komponente des KonstruktorFunktionsobjekts
Komponente des KonstruktorFunktionsobjekts
Klassenvariable
Klassenmethode
6.6 Einige Methoden
Jedes Objekt erbt die für Object definierten Komponenten.
toString(), angewandt auf ein Objekt o, liefert
einige interne Information über o, unter Navigator 4
für JavaScript 1.2 eine Literal-Darstellung des Objekts. Ab JavaScript 1.3 sollte toSource() stattdessen benutzt werden.
Wurde die originale toString()-Methode überdefiniert, 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 werden: Im Fall einer Wertzuweisung an eine Objektkomponente 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 JavaScript 1.2 statt eines 10-elementigen Feldes ein 1elementiges mit dem Wert 10 an.
Die Anzahl der Elemente eines Feldes kann jederzeit geändert werden durch Zuweisung von Feldelementen oder Setzen der length-Komponente.
Feldelemente können beliebigen Objekten hinzugefü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, standardmäß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 eines 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 Reihenfolge.
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 angegbenen Argumente an ein Feld an; Felder werden dabei 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 Teilbereich 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 jedoch eine Literaldarstellung. Ab JavaScript 1.3 sollte toSource() statt toString() benutzt werden.
JavaScript
Dirk Husung
Array-Methoden (3)
8 Reguläre Ausdrücke
8.1 Muster
Muster bestehen aus Zeichenfolgen, eingeschlossen zwischen zwei „/“.
In einem Muster steht ein einzelnes Zeichen für
sich selbst, mit Ausnahme folgender Sonderzeichen
Zeichen steht für
\f
\n
\r
\t
\v
\c
\ddd
\xdd
\cX
Seitenvorschub (form feed)
Zeilenende (new line)
Zeilenrücklauf (carriage return)
horizontaler Tabulator
vertikaler Tabulator
c selbst für c aus / \ . * + ? | ( ) [ ] { }
ASCII-Zeichen in oktaler Notation
ASCII-Zeichen in hexadezimaler Notation
Kontrollzeichen ^X
JavaScript
Dirk Husung
Muster (1)
Es lassen sich Zeichenklassen bilden:
Zeichen steht für
[. . . ]
[^. . . ]
.
\w
\W
\s
\S
\d
\D
[\b]
jedes Zeichen zwischen den Klammern
jedes Zeichen nicht zwischen den Klammern
[^\n ]
[a-zA-Z0-9]
[^a-zA-Z0-9]
[ \t\n\r\f\v]
[^ \t\n\r\f\v]
[0-9]
[^0-9]
Rückschritt (backspace), Sonderfall
Für vorangehende Teile von Mustern kann die Mindest- und Höchstzahl ihrer Wiederholung angegeben werden:
Zeichen Bedeutung
{n,m}
{n,}
{n}
?
+
*
mindestens n, höchstens m mal
mindestens n mal
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 Bezug genommen werden.
Zeichen Bedeutung
|
(. . . )
\n
entweder vorangehender oder nachfolgender Teilausdruck
Gruppierung
n-te Gruppe. Gruppennummern werden durch Abzählen ihrer öffnenden Klammern vergeben
Für das Auftreten von Mustern können bestimmte
Positionen vorgeschrieben werden:
Zeichen Bedeutung
^
$
\b
\B
Anfang einer Zeichenkette/Zeile
Ende einer Zeichenkette/Zeile
Wortgrenze
keine Wortgrenze
Schließlich können einem Muster Attribute angehängt werden:
Zeichen Bedeutung
i
g
Mustervergleich ohne Beachtung von Groß/Kleinschreibung
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 gegebenen 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 Zeichenkette enthält und dessen folgende Komponenten 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 gegebene 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 Trennung einer Zeichenkette und liefert ein Feld der resultierenden Teilzeichenketten.
"1,2, 3".split(/\s*,\s*/) // ["1", "2", "3"]
8.3 RegExp-Methoden
test() prüft, ob das Muster eines RegExp-Objektes 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 Suche 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 globalen Variablen.
Daneben besitzt es eine Reihe vordefinierter Komponenten, 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
Verweis auf das location-Objekt, das die
URL des angezeigten Dokuments repräsentiert. 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 FrameHierarchie
window
Verweis auf das window-Objekt selbst.
location
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 NavigatorButtons (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 Zeitabständen aufgerufen wird bzw. dies nicht länger erfolgt.
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 Zuweisung 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
Name des Browsers.
Versionsnummer des Browsers.
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).
appName
appVersion
userAgent
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
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 derselben Internet-Domäne, Sicherheitsbeschrä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 Änderungsdatum.
linkColor
Farbe nicht besuchter Links.
links[]
Feld von Link-Objekten.
location
statt location sollte URL verwandt werden.
alinkColor
JavaScript
Dirk Husung
Dokument-Objekt-Modell (1)
Komponente
Beschreibung
URL des Dokuments, von dem aus das aktuelle 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.
referrer
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)
Die folgende Funktion listet die Links eines Dokuments:
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();
}
JavaScript
Dirk Husung
Dokument-Objekt-Modell (3)
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
Druckknopf; onClick
Option; onClick
Eingabefeld; onChange
Daten, die zusammen mit einem Formular verschickt werden, unsichtbar für den Benutzer; kein Ereignis
<option>
Eintrag innerhalb eines selectElements; 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 eines Formulars; onClick
<input type=text>
einzeiliges Textfeld; onChange
<textarea>
mehrzeiliges Textfeld;
onChange
<input
<input
<input
<input
type=button>
type=checkbox>
type=file>
type=hidden>
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
bei Abbruch
beim Verlassen eines Elements
bei erfolgter Änderung
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
onAbort
onBlur
onChange
onClick
JavaScript
Dirk Husung
Ereignisbehandlung (1)
Ereignis
Eintreten
beim Zurücksetzen des Formulars; Rückgabe 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
onReset
12.1 Eventhandler als JavaScriptKomponenten
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 vollstä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 Speicherung kleiner Datenmengen.
• Ein Web-Browser braucht nicht mehr als insgesamt 300 Cookies zu speichern,
• er braucht nicht mehr als 20 Cookies je WebServer (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 empfiehlt sich die Verwendung der JavaScript-Funktionen escape() und unescape() zur Ver- und Entschlü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 demselben Verzeichnis und dessen Unterverzeichnissen zugänglich. 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 desselben Servers zugänglich. Durch Angabe einer übergeordneten Domäne kann ein Cookie auch für Web-Seiten anderer Server zugänglich gemacht werden.
secure
Die Übertragung eines Cookies erfolgt nur über ein vergleichsweise 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:[email protected]"
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)