JavaScript

Einleitung

JavaScript ist eine „einfache“ Programmiersprache für das Internet, mit der HTML-Seiten mit Funktionen versehen werden können. Das „Script“ steht für Skript, also ein kleines Progrämmchen, und „Java“ ist eine der großen Programmiersprachen fürs Internet. Wichtig an dieser Stelle: Java ist nicht gleich JavaScript! JavaScript orientiert sich in der Syntax an Java, der Aufbau und die Möglichkeiten in Java sind jedoch verschieden.

JavaScript lehnt sich sehr stark an C an, viele Sprachelemente sind völlig identisch. Die Objektorientierung läuft jedoch etwas anders als in C++ oder Java, auch die Kommunikationsfunktionen mit dem Nutzer unterscheiden sich. JavaScript wird vorcompiliert und dann interpretiert, das macht die Programme langsamer als solche, die in das Binärformat des jeweiligen Betriebssystems compiliert werden. Dafür aber ist JavaScript Betriebssystem- und in gewissen Grenzen Browser-unabhängig. Allerdings ist sie aufgrund ihrer Langsamkeit für vorwiegend mathematische und wissenschaftliche Anwendungen ungeeignet, das ist aber auch gar nicht ihr Verwendungszweck.

JavaScript ist im Sprachstandard von HTML nicht direkt enthalten, es handelt sich um eine eigenständige Programmiersprache. Die Sprache wird jedoch heutzutage von fast allen Browsern mehr oder weniger vollständig und korrekt interpretiert.

JavaScript ist eine Scriptsprache, die im Gegensatz zu PHP oder ASP auf der Clientseite abgearbeitet wird. In PHP oder ASP wird der Scriptcode vom Server interpretiert und das Ergebnis wird als HTML-Seite an den Client (Browser) gesandt.
In JavaScript werden die programmierten Funktionen direkt vom Client (Browser) interpretiert.
Aus dieser Tatsache ergeben sich Einschränkungen bzw. Vor- und Nachteile der einzelnen Scriptsprachen. Manches lässt sich mit JavaScript (z.B.: Timer die in regelmäßigen Intervallen Funktionen ausführen) bzw. PHP (z.B.: Datenbankzugriffe) einfach lösen was in der jeweils anderen Sprache schwer oder gar nicht möglich ist.

Wo steht ein JavaScript in deinem HTML-Text?

Am besten zwischen den beiden head-Tags, also im Kopf des Dokumentes. Folgendes einfaches Beispiel zeigt dies:

<html>

<head>

<title> Javascript-Beispiel 1 </title>

<!-- diese zeile ist für browser, die javascript (noch) nicht können

// Ein Kommentar in JavaScript

function dialog()

{

alert("Das erste JavaScript-Beispiel!");

}

//-->

</script>

</head>

</body>

</html>

Dazu einige Erläuterungen:

Das script-Tag klammert ein JavaScript ein, als Argument wird zum Beispiel die Sprache des Skriptes angeben (Hier: JavaScript). An dieser Stelle wären andere Skriptsprachen wie z.B.: VBScript angebbar. Wir behandeln jedoch ausschließlich JavaScript.

Es soll Browser geben, die JavaScript nicht verstehen, also wird das JavaScript in einen HTML- Kommentar eingebaut! Das Kommentar beginnt mit .

Mit // beginnt eine Kommentarzeile in JavaScript. ACHTUNG: Der Kommentar geht nur bis zum Ende der Zeile!

In JavaScript programmiert man Funktionen. Das Schlüsselwort, das eine Funktion kennzeichnet heißt function. Danach kommt der Name der Funktion, hier dialog Und auf den Namen folgt die sogenannte Parameterliste: (), die hier aber leer ist.

Die geschweiften Klammern { } stehen für Anfang und Ende der Funktion. Dazwischen steht dann in JavaScript programmiert, was die Funktion macht.

Zwischen den geschweiften Klammern steht -siehe eben-, was die Funktion macht, sie ruft eine Funktion alert auf und übergibt ihr als Parameter einen Text, der in „Hochkommata“ eingeschlossen ist. Die Funktion alert muss nicht von uns programmiert werden sondern dies ist eine Funktion die JavaScript zur Verfügung stellt.

Die JavaScript-Funktion wird beim Laden der HTML-Seite aufgerufen. Damit der Browser weiß, dass er das tun soll, muss das im HTML-Code der Seite angegeben sein. Die entsprechende Stelle befindet sich im öffnenden body-Tag: onload=dialog(). Das bedeutet, dass der Browser beim Ereignis onload, d.h. beim Laden der Seite, die angegebene Funktion (dialog()) ausführen soll.

Debugging (Fehlersuche)

Sollte es vorkommen, dass in deinem Programmcode Fehler enthalten sind und im Browser nichts passiert bzw. eine Fehlermeldung erscheint, so musst du den Fehler in deinem Code suchen.

Da JavaScript direkt vom Browser interpretiert wird ist die Fehlerbehandlung bei jedem Browser anders. Beim Internet Explorer wird meist eine Fehlermeldung ausgegeben bzw. über einen Doppelklick auf das Explorer- oder Warnungs-Icon ganz unten links im Browserfenster angezeigt. Bei anderen Browsern tut sich schlicht gar nichts wenn im Code ein Fehler steckt.

Hinweise wie man Code debuggen kann findest du im Kapitel Fehlersuche.

Einbindung separater Dateien

Will man die gleichen JavaScript-Funktionen in mehreren HTML-Seiten verwenden oder werden die Scripte größer, sollte der Quelltext besserer Übersichtlichkeit halber in separate Dateien ausgelagert werden:

<html>

<head>

<title>Hello World</title>

</script>

</head>

<body>

</body>

</html>

Nun muss allerdings eine separate Datei mit dem Namen "helloworld.js" angelegt werden. Diese enthält in unserem Fall nur einen Befehl:

alert("Hello World");

Steuerzeichen bei Zeichenketten

Bei Zeichenkettenvariablen gibt es die Möglichkeit, Steuerzeichen in den Variablenwert einzufügen.

Beispiel

<!--

var Variable1 = "Hier erfolgt ein\nZeilenumbruch";

var Variable2 = "Hier erfolgt ein\fWagenrücklauf";

var Variable3 = "Hier erfolgt ein\bBackspace";

var Variable4 = "Hier erfolgt ein\rDOS-Extra-Zeilenumbruch";

var Variable5 = "Hier erfolgt ein\tTabulator";

var Variable6 = "Hier erfolgt ein\"Anführungszeichen";

// -->

</script>

Erläuterung

Steuerzeichen dieser Art werden durch das Zeichen \ eingeleitet. Dahinter folgt ein Buchstabe, der das Steuerzeichen markiert.

Die Zeichenfolge \n ist z.B. in alert-Meldungen sinnvoll, um innerhalb des auszugebenden Textes einen Zeilenumbruch einzufügen.
Die Zeichenfolge \t ist z.B. sinnvoll, um etwa innerhalb einer alert(...)-Meldung tabellarische Information auszugeben.
Die Zeichenfolge \r solltest du zusätzlich zu dem Steuerzeichen \n notieren, wenn \n alleine nicht funktioniert.
Die Zeichenfolge \" musst du notieren, wenn du innerhalb einer Zeichenkette ein Anführungszeichen verwenden möchten (Maskierung des Zeichens, das die Zeichenkette einschließt).

Notation numerischer Werte

Du kannst Zahlen ganz normal notieren. Beachte dabei nur, dass bei Kommazahlen anstelle eines Kommas ein Punkt verwendet werden muss. So wird die Zahl Pi beispielsweise als 3.1415 notiert. Für sehr hohe und sehr niedrige Zahlen und für komplexe Kommazahlen gibt es daneben aber noch andere Notationsmöglichkeiten.

Beispiel

<!--

var a = 1E1;

var b = 1.2345E4;

var c = 2e-3;

// -->

</script>

Erläuterung

Mit e oder E bestimmst du die Zehnerpotenz bzw. die Anzahl Nullen, die hinter der Zahl vor dem e bzw. E stehen.

Die erste Zahl im Beispiel, 1E1, ist eine 1 mit einer 0 dahinter, also 10.
Die zweite Zahl im Beispiel, 1.2345E4, ist eine andere Schreibweise für 12345. Der Dezimalpunkt wird also einfach um so viele Stellen nach rechts verschoben, wie hinter dem E-Zeichen angegeben.
Die dritte Zahl im Beispiel, 2e-3, ist eine andere Schreibweise für 0.002. Der Dezimalpunkt wird also einfach um so viele Stellen nach links verschoben, wie hinter dem E-Zeichen angegeben. Diese umgekehrte Richtung wird durch das Minuszeichen bewirkt, dass hinter dem e folgt.

Variablen

Variablen sind Speicherbereiche, in denen du Daten, die du im Laufe deiner Programmprozeduren benötigst, speichern kannst. Der Inhalt, der in einer Variablen gespeichert ist, wird als "Wert" bezeichnet. Du kannst den Wert einer Variablen jederzeit ändern. Um mit Variablen arbeiten zu können, musst du die benötigten Variablen zuerst definieren.

Beispiel

<html>

<head>

<!--

var Hinweis = "Gleich werden Quadratzahlen ausgegeben";

alert(Hinweis);

function SchreibeQuadrat() {

var SinnDesLebens = 42;

var i, x;

var Satzteil = "Das Quadrat von ";

i = SinnDesLebens;

x = i * i;

alert(Satzteil + i + " ist " + x);

}

//-->

</script>

</head>

</body>

</html>

Erläuterung

Das Beispiel gibt beim Aufruf der Seite eine Meldung aus, dass gleich Quadratzahlen ausgegeben werden. Bestätigt der Anwender das Meldungsfenster, wird das Quadrat der Zahl 42 ausgegeben.

Es gibt globale Variablen und lokale Variablen. Eine lokale Variable erhältst du durch die Deklaration der Variablen mit var innerhalb einer Funktion. Im obigen Beispiel sind die Variablen SinnDesLebens, i, x und Satzteil innerhalb der Funktion SchreibeQuadrat() als lokale Variablen notiert. Diese Variablen sind deshalb nur innerhalb dieser Funktion gültig. Man spricht in diesem Zusammenhang auch von der "Lebensdauer" von Variablen. Parameter, die einer Funktion übergegeben werden, werden ebenfalls als lokale Variablen behandelt.
Die Variable Hinweis ist dagegen eine global Variable. Sie ist im gesamten Dokument gültig und steht jederzeit zur Verfügung. Wenn du innerhalb von Funktionen Variablen ohne das Schlüsselwort var deklarierst, dann sind diese Variablen global.

Jede Variablendeklaration wird mit einem Strichpunkt abgeschlossen, da sie eine ganz normale Anweisung darstellt.

Variablen können mit oder ohne weitere Wertzuweisung deklariert werden. Im obigen Beispiel wird etwa der Variablen SinnDesLebens bei der Definition gleich ein Wert zugewiesen, nämlich 42. Auch die Variable Satzteil erhält eine anfängliche Wertzuweisung, nämlich den Wert "Das Quadrat von ". Die Variablen i und x werden dagegen nicht mit einem Anfangswert versehen. Beim Zuweisen eines Wertes notierst du hinter dem Variablennamen ein Istgleichzeichen und dahinter den Wert, den du der Variablen zuweisen willst.

Du kannst mehrere Variablen auf einmal definieren, so wie die beiden Variablen i und x im Beispiel. Dazu trennst du die Variablennamen durch Kommata. Das ist natürlich auch in Verbindung mit zugewiesenen Anfangswerten möglich.

Folgende Regeln sind zu beachten. Selbst vergebene Namen dürfen:

keine Leerzeichen enthalten
nur aus Buchstaben und Ziffern bestehen – das erste Zeichen muss ein Buchstabe sein; es sind Groß- und Kleinbuchstaben erlaubt. JavaScript ist casesensitive, d.h. Groß- und Kleinschreibung wird unterschieden (Name ist nicht name)
keine deutschen Umlaute oder scharfes s enthalten
als einziges Sonderzeichen den Unterstrich „_“ enthalten
nicht mit einem reserviertem Wort (Schlüsselwort) identisch sein (reservierte Wörter in JavaScript findest du im Anhang)

Sprechende Namen, die auch ein halbes Jahr, nachdem das Skript geschrieben wurde, noch signalisieren, welche Bedeutung die Variable oder Funktion haben, erleichtern das Lesen und die Wartung des Codes erheblich! Namen dürfen ruhig auch deutschsprachige Wörter sein, solange die oben angeführten Regeln eingehalten werden.

Es gibt numerische Variablen und Variablen für Zeichen bzw. Zeichenketten. Im obigen Beispiel sind die Variablen SinnDesLebens, i und x numerische Variablen. Die Variablen Hinweis und Satzteil sind dagegen Zeichenkettenvariablen. Dies ist daran erkennbar, dass der ihnen zugewiesene Wert, ein Text, in Anführungszeichen gesetzt wird. Du kannst z.B. eine Variable Nummer = 1; und eine Variable Zeichen = "1"; definieren. Der Unterschied ist, dass du mit der Variablen Nummer Rechenoperationen anstellen kannst, mit der Variablen Zeichen nicht. Dafür kannst du mit Zeichenkettenvariablen Zeichenkettenoperationen durchführen, etwa das Extrahieren einer Teilzeichenkette, was mit numerischen Variablen nicht möglich ist.

Variablen in JavaScript sind nicht so streng "getypt" wie in vielen anderen Programmiersprachen. Einfache Variablentypen, wie Zahlen, Zeichenketten oder Wahrheitswerte, werden lediglich nach nummerischen und nicht-numerischen Variablen eingeteilt. Kommazahlen und Ganzzahlen benötigen keine unterschiedlichen Typen. Der Inhalt von numerischen Variablen kann ohne vorherige Konvertierung in Zeichenketten auf den Bildschirm oder in Meldungsfenster geschrieben werden. Umgekehrt kannst du aber mit Zeichenketten, z.B. Werten aus Formularfeldern, nicht immer automatisch rechnen, sondern musst sie vorher explizit in Zahlen umwandeln. Für die explizite Typumwandlung gibt es verschiedene objektunabhängige Funktionen.

Werte von Variablen ändern

Wertänderungen von Variablen sind das A & O bei der Programmierung. Du wirst nur dann erfolgreich eigene Programme schreiben können, wenn du jederzeit den Überblick hast, was in einer Variablen an einem bestimmten Punkt des Programmablaufs steht. Besonders, wenn du mit bedingten Anweisungen oder Schleifen arbeitest, werden Sie schnell feststellen, wie leicht der Überblick über den aktuellen Zustand einer Variablen verloren gehen kann.

Beispiel 1

Zahl = 42;

Beispiel 2

Quadrat = Zahl * Zahl;

Erläuterung

Eine Wertzuweisung in JavaScript besteht immer aus einem Istgleichzeichen, einer linken und einer rechten Seite. Abschließend wird ein Strichpunkt ; notiert.
Im Beispiel 1 wird der Variablen Zahl der Wert 42 zugewiesen. Im Beispiel 2 wird der Variablen Quadrat das Ergebnis der Rechenoperation Zahl * Zahl zugewiesen.

Arrays

Array sind ein- oder mehrdimensionale Listen von Variablen, die Werte eines Typs aufnehmen können.

Beispiel 1

</head><body>

<!--

var Elemente = new Array("18","18.1","18,9","abc","1a");

for(var i=0;i<Elemente.length;++i)

alert("Element " + i + " = " + Elemente[i]);

//-->

</script></body></html>

Erläuterung

Die Variable Element wird mittels new Array als Array deklariert. Die Belegung mit Werten kann in der Form new Array(Wert1, Wert2,…) erfolgen. Im weiteren Code kann dieser Liste ein Wert über den Index, d.h. die Position in der Liste zugeordnet werden. Die Numerierung der Arrays beginnt mit 0. D.h. dem ersten Element kann mit Element[0]= ein Wert zugewiesen werden.

Beispiel 2

</head><body>

<!--

var Elemente2 = new Array();

Elemente2[0] = new Array(1);

Elemente2[1] = new Array(1);

Elemente2[0][0]=1;

Elemente2[0][1]=2;

Elemente2[1][0]=3;

Elemente2[1][1]=4;

for(var i=0;i<Elemente2[0].length;++i)

for(var j=0;j<Elemente2[1].length;++j)

alert("Elemente2 [" + i + "]["+j+" ] = " + Elemente2[i][j]);

//-->

</script></body></html>

Erläuterung

Die Variable Element2 wird mittels new Array als mehrdimensionales Array deklariert.
var Elemente2 = new Array();
Elemente2[0] = new Array(1);
Elemente2[1] = new Array(1);
Im weiteren Code kann dieser Liste ein Wert über den Index je Dimension, d.h. die Position in der jeweiligen Dimension (Liste) zugeordnet werden. Die Numerierung der Arrays beginnt mit 0. D.h. dem ersten Element kann mit Element[0][0]= ein Wert zugewiesen werden.

Beispiel Array Methoden

Die Methoden eines Arrays sind im Anhang aufgelistet. Hier wird die Methode sort() herausgegriffen, um zu zeigen wie Arrays sortiert werden können.

Beispiel

</head><body>

<!--

var Elemente = new Array(1000,200,4,5,30);

for(var i=0;i<Elemente.length;++i)

alert("Element " + i + " = " + Elemente[i]);

Elemente = Elemente.sort();

for(var i=0;i<Elemente.length;++i)

alert("Zeichen aufsteigend sortiert Element " + i + " = " + Elemente[i]);

Elemente = Elemente.sort(compareNum);

for(var i=0;i<Elemente.length;++i)

alert("aufsteigend sortiert Element " + i + " = " + Elemente[i]);

Elemente = Elemente.sort(compareNum);

Elemente = Elemente.reverse();

for(var i=0;i<Elemente.length;++i)

alert("absteigend sortiert Element " + i + " = " + Elemente[i]);

function compareNum(a,b) {

return a-b;

}

//-->

</script></body></html>

Erläuterung

Es wird ein Array Elemente mit 5 Zahlen erzeugt. Mit diesem Befehl
for(var i=0;i<Elemente.length;++i)

alert("Element " + i + " = " + Elemente[i]);

werden die Inhalte des Array unsortiert ausgegeben.

Anschließend werden mit diesen Befehlen
Elemente = Elemente.sort();

for(var i=0;i<Elemente.length;++i)

alert("Zeichen aufsteigend sortiert Element " + i + " = " + Elemente[i]);

die Elemente des Arrays sortiert und ausgegeben. Dabei ist zu beachten, dass die Elemente so sortiert wären als ob es Zeichen(Text) und nicht Zahlen wären. Das führt dazu, dass z.B.: 1000 vor 4 kommt weil das erste Zeichen „1“ kleiner als „4“ ist.

Will man Zahlen sortieren, so muss man die Funktion sort() mit einem Parameter befüllen, der eine Rechenoperation aufruft. Die dafür vorgesehene Funktion lautet compareNum:
function compareNum(a,b) {

return a-b;

}

Diese Funktion zieht vom Parameter a den Parameter b ab. Durch die Rechenoperation interpretiert JavaScript die Werte als Zahlen anstatt als Text und sortiert somit mit folgenden Befehlen die Zahlen korrekt aufsteigend:
Elemente = Elemente.sort(compareNum);

for(var i=0;i<Elemente.length;++i)

alert("aufsteigend sortiert Element " + i + " = " + Elemente[i]);

Will man ein Array absteigend sortieren, so kann man dies damit erreichen, dass man ein sortiertes Array umdreht. Dazu dient der Befehl
Elemente = Elemente.reverse();

Operatoren

Zuweisungsoperator

Du kannst zum Beispiel einer Variablen einen Wert zuweisen. Der Zuweisungsoperator dafür ist ein Istgleichzeichen.

Beispiel

<!--

var SinnDesLebens = 42;

// -->

</script>

Erläuterung

Im Beispiel wird eine Variable namens SinnDesLebens definiert. Der Variablen wird mit dem Zuweisungsoperator = der Wert 42 zugewiesen.

Vergleichsoperatoren

Vergleichsoperatoren brauchst du, wenn du zwei Werte vergleichen willst, z.B. den aktuellen Inhalt einer Variablen mit einem fixen Wert.

Beispiel

<!--

var SinnDesLebens=42;

var Alter=8;

if(SinnDesLebens == 42) alert(1);

if(SinnDesLebens != 42) alert(0);

if(SinnDesLebens > 42) alert(0);

if(SinnDesLebens < 42) alert(0);

if(Alter >= 18) alert("SIE duerfen das hier sehen!");

if(Alter <= 17) alert("SIE duerfen das hier NICHT sehen!");

// -->

</script>

Erläuterung

Um abzufragen, ob zwei Werte gleich sind, notierst du zwei Istgleichzeichen == nebeneinander.
Um abzufragen, ob zwei Werte unterschiedlich sind, notierst du zwischen beiden Werten die Zeichen !=.
Um abzufragen, ob ein Wert größer oder gleich ist als ein anderer, notierst du die Zeichen >=.
Um abzufragen, ob ein Wert in jedem Fall größer ist als ein anderer, notierst du das Zeichen >.
Um abzufragen, ob ein Wert kleiner oder gleich ist als ein anderer, notierst du die Zeichen <=.
Um abzufragen, ob ein Wert in jedem Fall kleiner ist als ein anderer, notierst du das Zeichen <.

Ab der JavaScript-Version 1.2 kannst du Gleichheit/Ungleichheit nicht nur mit == bzw. !=, sondern auch mit === bzw. !== abprüfen. In diesem Fall werden die Werte zusätzlich auf ihren Variablentyp hin überprüft. So wird z.B. die Anweisung if (SinnDesLebens === "42") alert(1) nicht ausgeführt. Berücksichtige bei der Verwendung dieser Operatoren, dass ältere Browser darauf mit einer Fehlermeldung reagieren.

Berechnungsoperatoren

Um mit numerischen Werten Berechnungen durchzuführen, brauchst du Berechnungsoperatoren.

Beispiel

<!--

var Zwei = 1 + 1;

var GarNix = 1 - 1;

var AuchNix = 81 / 3 - 27;

var WenigerAlsNix = 81 / (3 - 27);

var SinnDesLebens = 6 * 7;

var MachtAuchSinn = 84 / 2;

var x = Jahr % 4;

if(x == 0)

Schaltjahr = true;

/* Besondere Notationen: */

var Zahl;

Zahl+=3;

Zahl++;

Zahl-=2;

Zahl--;

Zahl*=4;

Zahl/=3;

// -->

</script>

Erläuterung

Mathematische Operatoren notierst du mit den dafür üblichen Zeichen. Mit + notierst du eine Addition, mit - eine Subtraktion, mit * eine Multiplikation, mit / eine Division. Eine Besonderheit stellt der Operator % dar. Damit wird eine so genannte Modulo-Division durchgeführt. Bei einer Modulo-Division werden zwei Werte dividiert. Das Ergebnis ist jedoch im Gegensatz zur normalen Division nur der Restwert der Division. Wenn du z.B. 13 % 5 notierst, erhältst du als Ergebnis 3, weil 13 geteilt durch 5 gleich 2 Rest 3 ergibt. Diese 3 ist es, die als Ergebnis einer Modulo-Division herauskommt.

Du kannst mehrere Operationen in Reihe notieren. Dabei gilt die übliche "Punkt-vor-Strich-Regel". Wenn du eine andere Regel erzwingen willst, musst du Klammern verwenden, so wie im vierten der obigen Beispiele.

Die besonderen Notationen, die in den obigen Beispielen vorkommen, kannst du verwenden, wenn du Additionen oder Subtraktionen abkürzen willst:
Zahl+=3; ist eine Abkürzung für Zahl = Zahl + 3;
Zahl++; ist eine Abkürzung für Zahl = Zahl + 1;
Zahl-=2; ist eine Abkürzung für Zahl = Zahl - 2;
Zahl--; ist eine Abkürzung für Zahl = Zahl - 1;

Der Operator ++ wird auch als Inkremationsoperator bezeichnet, der Operator -- als Dekrementationsoperator.

Logische Operatoren

Logische Operatoren brauchst du, wenn du komplexere Bedingungen für bedingte Anweisungen (z.B.: if) oder Schleifen formulieren willst.

Beispiel

<!--

var PLZ=1000;

var x=20, y=8;

if(PLZ >= 1000 && PLZ <= 1999)

alert("Sie wohnen wohl in Wien oder Umgebung!")

if(x > 100 || y == 0)

break;

// -->

</script>

Erläuterung

Mit dem logischen Operator && verknüpfst du zwei oder mehrere Bedingungen durch "und", d.h. beide bzw. alle Bedingungen müssen erfüllt sein, damit die gesamte Bedingung erfüllt ist.
Mit dem logischen Operator || verknüpfst du zwei oder mehrere Bedingungen inklusiv durch "oder", d.h. es genügt, wenn eine der Bedingungen erfüllt ist, damit die gesamte Bedingung erfüllt ist.

Bit-Operatoren

Bit-Operatoren sind nur etwas für Profis. Um Bit-Operatoren richtig einzusetzen, musst du viel von computer-internen Speichervorgängen verstehen. Deshalb werden die Bit-Operatoren hier nur kurz erwähnt.

>> verschiebt Bits nach rechts
<< verschiebt Bits nach links
& definiert in einer Bitmaske eine Und-Bedingung
| definiert in einer Bitmaske eine inklusive Oder-Bedingung
^ definiert in einer Bitmaske eine exklusive Oder-Bedingung

Operator zur Zeichenkettenverknüpfung

Mit einem einfachen Pluszeichen + kannst du eine Zeichenkette an eine andere anhängen.

Beispiel

<!--

var Vorname = "Stefan "

var Zuname = "Muenz"

var Name = Vorname + Zuname + ", der Autor dieses Dokuments"

// -->

</script>

Erläuterung

Du kannst sowohl Zeichenkettenvariablen als auch direkte Zeichenkettenangaben mit + aneinanderhängen.

Operatorenrangfolge

Unter den Operatoren von JavaScript gibt es eine festgelegte Rangordnung. Wenn du komplexe Rechenoperationen durchführst oder mehrere Bedingungen miteinander verknüpfst, gilt bei der internen Auflösung solcher komplexen Ausdrücke die folgende Rangordnung:

Rangstufe: , (Aneinanderreihung)
Rangstufe: = += -= <<= >>= &= ^= |=
Rangstufe: ?: (Entweder-Oder_Bedingung)
Rangstufe: ||
Rangstufe: &&
Rangstufe: |
Rangstufe: ^
Rangstufe: &
Rangstufe: == === != !==
Rangstufe: < <= > >=
Rangstufe: << >> >>>
Rangstufe: + -
Rangstufe: * / %
Rangstufe: ! ~ - ++ --
Rangstufe: () [] . (Klammerung und Vektoren)

Mit Hilfe von Klammern, die absichtlich die unterste Rangstufe in der Prioritätshierarchie darstellen, kannst du die Rangfolge bei den Operatoren beeinflussen und Ausdrücke so bewerten, wie du es wünscht.

Beispiel

<!--

var OffizielleStatistik = 3.29 * 3 + 4.71;

var MeineStatistik = 3.29 * (3 + 4.71);

// -->

</script>

Erläuterung

Das Beispiel zeigt, wie du durch Setzen von Klammern das Ergebnis einer Rechenoperation beeinflussen kannst.

Operator zur Typenbestimmung

Methoden vordefinierter Objekte (siehe auch im Anhang) sind an feste Variablentypen gebunden. Bevor du diese verwenden kannst, solltest du im Zweifelsfall den Typ der Variable prüfen. Mit dem Operator typeof steht dir ein Werkzeug zur Typenüberprüfung zur Verfügung.

Beispiel

<!--

var Zahl=2505;

alert(typeof Zahl);

// -->

</script>

Erläuterung

Der Operator typeof wertet den nachfolgenden Operanden hinsichtlich seines Typs aus. Der Rückgabewert dieses Operators ist ein String, den du abfragen kannst. Mögliche Rückgabewerte sind:
boolean (Ja/Nein-Variable),
string (Zeichenkettenvariable),
number (numerische Variable),
function (Funktion),
object (Objekt),
undefined (unbestimmter Typ).
Anweisungen müssen in Klammern eingeschlossen werden, z.B. typeof(Zahl=Zahl+2).

void-Operator

Der Operator void wird dann verwendet, wenn eine Anweisung ausgeführt, aber keine Rückgabewerte erzeugt werden dürfen. Das ist z.B. dann der Fall, wenn du so genannte "Bookmarklets" erzeugen möchtest.

Beispiel

<!--

var Zahl=2505;

void Zahl++;

// -->

</script>

Erläuterung

Der Operator void führt die nach ihm notierte Anweisung aus. Der Operator ersetzt dabei die Rückgabewerte der Anweisung stets durch undefined. Du kannst auch eine Anweisung wie z.B. Zahl=Zahl+2 als Operand angeben. In diesem Fall schließt du die Anweisung in Klammern ein, also void(Zahl=Zahl+2).

Operator zum Löschen von Objekten

Nicht mehr benötigte Objekte bzw. Objekteigenschaften werden mit dem Operator delete gelöscht. Du kannst jedoch keine vordefinierten Objekte und Objekteigenschaften löschen. Der Operator gibt im Erfolgsfall den Wert true und bei Misserfolg den Wert false zurück.

Beispiel

<!--

SinnDesLebens = 42;

delete SinnDesLebens;

alert(typeof SinnDesLebens);

// -->

</script>

Erläuterung

Im Beispiel wird der Variablen SinnDesLebens der Wert 42 zugewiesen. Anschließend wird diese Variable mit delete wieder gelöscht. Mit Hilfe des Operators typeof wird überprüft, ob das Löschen der Variablen erfolgreich ist.

Im Netscape bis einschließlich Version 6 können nur Variablen und Objekte gelöscht werden, die nicht mit dem Schlüsselwort var deklariert wurden.

Auf vordefinierte Objekte oder Objeteigenschaften wie z.B. Math.PI kannst du diesen Operator nicht anwenden.

Typumwandlungen (objektunabhängig)

eval()

Interpretiert ein zu übergebendes Argument und gibt das Ergebnis zurück.
Wenn das übergebene Argument als Rechenoperation interpretierbar ist, wird die Operation berechnet und das Ergebnis zurückgegeben. Dabei sind auch komplexe Rechenausdrücke mit Klammerung möglich. Diese Funktionalität ist sehr praktisch, um als Zeichenketten notierte Rechenausdrücke mit einem einzigen Befehl errechnen zu lassen.
Wenn das übergebene Argument als Objekt oder Objekteigenschaft interpretiert werden kann, wird das Objekt bzw. die Objekteigenschaft zurückgegeben. Dies ist wichtig, wenn eine Zeichenkette (z.B. ein Formularfeldinhalt oder ein einer Funktion übergebener Parameter) als Objekt interpretiert werden soll.
Erzeugt eine Fehlermeldung, wenn der übergebene Ausdruck nicht interpretierbar ist.

Beispiel

</head><body>

<input type="button" value="Berechnen"

onClick="alert(eval(this.form.Eingabe.value))">

</form>

</body></html>

Erläuterung

Das Beispiel enthält ein Formular mit einem Eingabefeld und einem Button. In dem Eingabefeld kann der Anwender eine Rechenoperation eingeben, zum Beispiel 1+2+3+4+5+6+7+8+9 oder 12.78*5.13. Beim Klick auf den Button wird der Wert aus dem Formular mit eval() berechnet und in einem Meldungsfenster ausgegeben.

isFinite()

Ermittelt, ob ein Wert sich innerhalb des Zahlenbereichs befindet, den JavaScript verarbeiten kann, also aus Sicht von JavaScript eine gültige Zahl darstellt.
Gibt true zurück, wenn der Wert eine gültige Zahl ist, und false, wenn es keine Zahl ist bzw. die Zahl sich außerhalb des Wertebereiches von JavaScript befindet. Sowohl ganze Zahlen als auch Kommazahlen werden als gültige Zahlen erkannt. Bei Kommazahlen muss das Dezimalzeichen ein Punkt sein.

Beispiel

<!--

var Zahl=Number.MAX_VALUE;

if (!isFinite(Zahl*2)) alert("Die Zahl ist nicht zu verarbeiten.");

//-->

</script>

</head><body>

</body></html>

Erläuterung

Das Beispiel definiert eine Variable Zahl der als Wert Number.MAX_VALUE die größte mögliche Zahl zugewiesen wird. In der anschließenden Abfrage wird geprüft, ob das Produkt dieser Zahl mit 2 sich innerhalb des verarbeitbaren Zahlenbereiches befindet. Ist dies nicht der Fall, so wird eine entsprechende Warnmeldung ausgegeben.

isNaN()

Ermittelt, ob ein zu übergebender Wert eine ungültige Zahl ist (NaN = Not a Number).
Gibt true zurück, wenn der Wert keine Zahl ist, und false, wenn es eine Zahl ist. Sowohl ganze Zahlen als auch Kommazahlen werden als gültige Zahlen anerkannt. Bei Kommazahlen muss das Dezimalzeichen ein Punkt sein.

Beispiel

<!--

function CheckZahl(Wert)

{

if(isNaN(Wert) == true)

{

alert(Wert + " ist keine Zahl!");

return false;

}

else return true;

}

//-->

</script>

</head><body>

<input type="button" value="Check"

onClick="CheckZahl(this.form.Eingabe.value)">

</form>

</body></html>

Erläuterung

Das Beispiel enthält ein Formular mit einem Eingabefeld und einem Button. Beim Klick auf den Button wird die Funktion CheckZahl() aufgerufen. Der Funktion wird der Wert aus dem Eingabefeld des Formulars als Parameter übergeben. CheckZahl() prüft, ob der übergebene Wert eine Zahl ist. Dazu wird isNaN() auf den übergebenen Wert angewendet. Wenn es keine Zahl ist, wird eine Fehlermeldung ausgegeben.

Für diese Methode sind auch Zahlen, die außerhalb des Zahlenbereichs von JavaScript liegen, gültige Zahlen. Zur Überprüfung der Größe von Zahlen musst du die Methode isFinite()verwenden.

parseFloat()

Wandelt eine zu übergebende Zeichenkette in eine Zahl um und gibt diese als numerischen Wert zurück. Wenn sich die Zahl als Kommazahl interpretieren lässt, wird dies berücksichtigt. Als Dezimalzeichen wird jedoch nur der Punkt interpretiert. Sinnvoll, um z.B. Anwendereingaben in Zahlen umzuwandeln, mit denen man anschließend rechnen kann.
Gibt NaN (Not a Number) zurück, wenn die Zeichenkette mit Zeichen beginnt, die sich nicht als Teil einer Zahl interpretieren lassen.
Wenn die Zeichenkette weiter hinten ungültige Zeichen enthält, wird die Zahl bis zum ersten ungültigen Zeichen interpretiert und der interpretierte Teil zurückgegeben.

Beispiel

</head><body>

<!--

var Elemente = new Array("18","18.1","18,9","abc","1a");

alert("Anwendung von parseFloat()");

for(var i=0;i<Elemente.length;++i)

alert(Elemente[i] + " = " + parseFloat(Elemente[i]));

//-->

</script></body></html>

Erläuterung

Das Beispiel definiert einen Array mit verschiedenen Elementen, die teils ganze, teils Kommazahlen, teils gar keine Zahlen darstellen. Dann werden in einer for-Schleife alle Elemente des Arrays mit der write()-Methode dynamisch in die Datei geschrieben. Dabei wird jedoch die Funktion parseFloat() auf das jeweilige Array-Element angewendet.

parseInt()

Wandelt eine zu übergebende Zeichenkette in eine Ganzzahl um und gibt diese als Ergebnis zurück. Sinnvoll, um z.B. Anwendereingaben in Zahlen umzuwandeln, mit denen man anschließend rechnen kann.
Gibt NaN (Not a Number) zurück, wenn die Zeichenkette mit Zeichen beginnt, die sich nicht als Teil einer Zahl interpretieren lassen.
Wenn die Zeichenkette weiter hinten ungültige Zeichen enthält, wird die Zahl bis zum ersten ungültigen Zeichen interpretiert und der interpretierte Teil zurückgegeben. Das gilt bei parseInt() auch für den Punkt.

Beispiel

</head><body>

<!--

var Elemente = new Array("18","18.1","18.9","abc","1a");

alert("Anwendung von parseInt()");

for(var i=0;i<Elemente.length;++i)

alert(Elemente[i] + " = " + parseInt(Elemente[i]));

//-->

</script></body></html>

Erläuterung

Die Methode parseInt() erlaubt einen zweiten, optionalen Parameter radix. Dieser Parameter enthält die Basis des verwendeten Zahlensystems. Der Aufruf parseInt(string,radix) ermittelt aus dem String, der eine Zahl eines anderen Zahlensystems darstellt, die dazugehörige Dezimalzahl. Die Methode parseInt() kann damit gleichzeitig als Umrechner von Zahlen anderer Zahlensysteme in das dezimale Zahlensystem verwendet werden. So ergibt z.B. der Aufruf parseInt("11111",2) die Zahl 31. Der optionale Parameter kann Werte zwischen 2 und 36 annehmen. Mit der Methode toString() des Number-Objektes kannst du umgekehrt Dezimalzahlen in Zeichenketten von Zahlen anderer Zahlensysteme konvertieren. Dabei ist - im Gegensatz zur Methode parseInt() - auch das Umwandeln von Kommazahlen möglich.

Besonders im Bereich der Datumsberechnung werden häufig Zahlen mit führender Null benutzt. Einfache Aufgaben wie alert(08*60) liefern dann scheinbar falsche Ergebnisse oder gar Fehlermeldungen. Des Rätsels Lösung dafür ist, dass JavaScript Zahlen mit führender 0 als Oktalzahlen interpretiert, nicht als Dezimalzahlen. Mit einer Anweisung wie alert(parseInt("08",10)*60) kannst du das Problem vermeiden und erzwingen, dass der Wert dezimal interpretiert wird.

Number()

Konvertiert den Inhalt eines Objekts in eine Zahl und gibt die Zahl zurück. Erwartet den Objektinhalt als Parameter. Wenn sich der übergebene Parameter nicht als Zahl interpretieren lässt, wird NaN (Not a Number) zurückgegeben.

Beispiel

</head><body>

<!--

var d = new Date ("March 15, 1998 08:27:00");

alert(Number(d));

//-->

</script></body></html>

Erläuterung

Das Beispiel definiert ein neues Datumobjekt und initialisiert es mit einem Wert im GMT-Format. Das Datumobjekt wird in der Variablen d gespeichert. Anschließend wird diese Variable der Funktion Number() als Parameter übergeben. Die Funktion Number() hat dabei die gleiche Wirkung wie die Objektmethode d.getTime(), d.h. es wird die Anzahl Millisekunden zwischen dem 1.1.1970 und dem in d gespeicherten Zeitpunkt errechnet. Im Beispiel wird das Ergebnis zur Kontrolle in die Datei geschrieben.

String()

Konvertiert den Inhalt eines Objekts in eine Zeichenkette und gibt die Zeichenkette zurück.

Beispiel

</head><body>

<!--

var d = new Date ();

alert(String(d));

//-->

</script></body></html>

Erläuterung

Das Beispiel definiert ein neues Datumobjekt mit dem aktuellen Zeitpunkt. Das Datumobjekt wird in der Variablen d gespeichert. Anschließend wird diese Variable der Funktion String() als Parameter übergeben. Die Funktion erzeugt daraus eine Zeichenkette, die den gespeicherten Zeitpunkt im GMT-Format darstellt. Im Beispiel wird das Ergebnis zur Kontrolle in die Datei geschrieben.

Dialogfenster

Alert

Du hast sicher schon Webseiten gesehen die Informationen mittels pop-up Fenster anzeigen. Diese pop-up Fenster werden mit der Funktion alert() erzeugt und sind eine der grundlegensten Funktionen von JavaScript.

Diese alert-Fenster werden dazu benutzt, um dem Benutzer Informationen anzuzeigen die der Benutzer mit dem OK-Button zur Kenntnis nehmen muss.

Beispiel

</head><body>

<!--

alert ("Das ist ein JavaScript ALERT-Fenster.");

//-->

</script></body></html>

Erläuterung

Die Funktion alert() erzeugt das pop-up Fenster und der innerhalb der Klammern angegebene Text wird in diesem Fenster ausgegeben.

Confirm

Ein confirm-Fenster wird dann verwendet wenn man eine ja/nein Antwort vom Benutzer abfragen möchte. Die Funktion confirm() erzeugt ein Fenster mit 2 Buttons: einem OK-Button und einem Abbrechen-Button.

Um die Entscheidung des Benutzers abzufragen muss man das Ergebnis der confirm()-Funktion auswerten und entsprechend im Programm fortfahren. Meist wird das Ergebnis in eine Variable geschrieben und diese Variable wird im weiteren Verlauf des Programms ausgewertet.

Beispiel

</head><body>

<!--

var answer = confirm ("Hast du Spaß?");

if (answer)

alert ("Juhuuu! Ich auch.");

else

alert ("Schade. Bleib dran!");

//-->

</script></body></html>

Erläuterung

answer ist die Variable die das Ergebnis der Funktion confirm() enthält. Je nach Reaktion des Benutzers enthält die Variable answer den Wert true oder false.

Die Funktion confirm() erzeugt ein Fenster mit einem OK und einem Abbrechen Button. Der in den Klammern angegebene Text wird in diesem Fenster angezeigt.

So ein confirm()-Fenster kann auch dazu benutzt werden, um den Benutzer auf eine andere Webseite zu lotsen. Das folgende Beispiel verwendet die confirm()-Funktion, um den Benutzer zu fragen, ob er auf der aktuellen Seite bleiben will oder auf die Seite von Yahoo weitergeleitet werden möchte. Damit dies gleich beim Aufruf der Seite passiert wird der Code gleich im <head>- Bereich der Seite eingefügt.

Beispiel

<!--

var answer = confirm ("Drücken Sie auf OK, um auf meiner Seite zu bleiben, oder ABBRECHEN um zu Yahoo zu kommen.");

if (!answer)

window.location="http://www.yahoo.com/";

// -->

</script></head>

Erläuterung

Da der Code im <head>-Bereich steht wird der Code ausgeführt bevor der Browser die Befehle innerhalb der <body>-Tags abgearbeitet werden.

Beachte das Zeichen ! vor der Variable answer in der IF-Anweisung. Das ! bedeutet „nicht“, d.h. der Wert von answer soll „nicht true“ sein, sprich false.

window.location gibt dem Browser an, dass er die folgende URL im aktuellen Browser-Fenster anzeigen soll.

Prompt

Die Funktion prompt() verwendet man, um mehr als eine ja/nein Antwort vom Benutzer zu bekommen.

Beispiel

<!--

var answer = prompt ("Wie heißt du?","");

alert ("Hallo " + answer);

// -->

</script></head>

Erläuterung

answer ist die Variable in der die Eingabe des Benutzers gespeichert wird. Anschließend werden ein kurzer Gruß und der zuvor eingegebenen Name ausgegeben.

Die prompt()-Funktion hat zwei Parameter. Die erste Zeichenkette ist der Text der Frage die im prompt-Fenster ausgegeben wird. Die zweite Zeichenkette gibt den Standardwert für die Antwort vor. In diesem Fall ist es eine leere Zeichenkette, es kann aber natürlich auch Text angegeben werden.

Um die Antwort anstatt in einem alert-Fenster direkt auf der Seite auszugeben kann man folgenden Code verwenden:

Beispiel

<!--

var answer = prompt ("Wie heißt du?","");

document.write ("Hallo " + answer );

// -->

</script></head>

Erläuterung

document.write teilt dem Browser mit, den folgenden Text in das aktuelle Dokument (document) zu schreiben (write).

bedingte Anweisungen (if-else/switch)

Du kannst die Ausführung von Anweisungen von Bedingungen abhängig machen.

Beispiel

(Passwort = Traumtaenzer)

<!--

function Geheim() {

var Passwort = "Traumtaenzer";

var Eingabe = window.prompt("Bitte geben Sie das Passwort ein","");

if(Eingabe != Passwort) {

alert("Falsches Passwort!");

Geheim();

}

else

document.location.href="geheim.htm";

}

// -->

</script>

</head><body onload="Geheim()">

<h1>Hier kommen Sie nur mit Passwort rein ;-)</h1>

</body></html>

Erläuterung

Das Beispiel stellt eine einfache Passwortabfrage dar. Das Script ist in einer Funktion namens Geheim() notiert, die aufgerufen wird, sobald die HTML-Datei vollständig geladen ist. Dazu ist im einleitenden <body>-Tag der Event-Handler onLoad notiert. Innerhalb der Funktion fordert ein Dialogfenster (window.prompt()) den Anwender auf, das Passwort einzugeben. Der Rückgabewert von window.prompt(), das eingegebene Passwort, wird in der Variablen Eingabe gespeichert.
Mit if(Eingabe != Passwort) fragt das Script ab, ob die Eingabe anders lautet als der der Variablen Passwort zuvor zugewiesene Wert Traumtaenzer. Ist dies der Fall, sind also beide Werte nicht gleich, dann war die Eingabe falsch. In diesem Fall wird mit alert() eine entsprechende Meldung ausgegeben. Anschließend wird die Funktion Geheim() erneut aufgerufen, und der Anwender kann das Passwort versuchen neu einzugeben. Im anderen Fall (else), wenn Eingabe und Passwort den gleichen Wert haben, wird mit document.location.href eine andere Seite aufgerufen, nämlich die "geschützte" Seite.

Die verwendeten Methode window.prompt() und die Eigenschaft document.location.href beziehen sich auf die Objekte window bzw. document. Das ist ein kleiner Vorgriff, denn Objekte werden erst in einem späteren Abschnitt behandelt.

Was ein Objekt ist und was Methoden und Eigenschaften sind wird dort erläutert. Zur Zeit begnügen wir uns mit der Verwendung dieser Objekte ohne detaillierte Erklärungen.

Mit if leitest du eine Wenn-Dann-Bedingung ein (if = wenn). Dahinter folgt, in Klammern stehend, die Formulierung der Bedingung. Um solche Bedingungen zu formulieren, brauchst du Vergleichsoperatoren und in den meisten Fällen auch Variablen. Für Fälle, in denen die Bedingung nicht erfüllt ist, kannst du einen "andernfalls"-Zweig definieren. Dies geschieht durch else (else = sonst).

Der Else-Zweig ist nicht zwingend erforderlich. Wenn du mehr als eine Anweisung unterhalb und abhängig von if oder else notieren wollen, musst du die Anweisungen in geschweifte Klammern einschließen (siehe auch den Abschnitt über Anweisungsblöcke).

Einfache Entweder-Oder-Abfrage

Für einfache Entweder-Oder-Bedingungen gibt es eine spezielle Syntax, die du alternativ zur if/else-Anweisung verwenden kannst.

Beispiel

<!--

function Antwort() {

var Ergebnis = (document.Formular.Eingabe.value == "42") ? "RICHTIG!" : "FALSCH!";

document.Formular.Eingabe.value =

"Die Antwort ist " + Ergebnis;

}

// -->

</script>

</head><body>

<h1>Der Sinn des Lebens</h1>

<p>Was ist der Sinn des Lebens?</p>

</form>

</body></html>

Erläuterung

Das Beispiel enthält eine JavaScript-Funktion namens Antwort(). Aufgerufen wird diese Funktion, wenn der Anwender in dem weiter unten notierten HTML-Formular auf den Klickbutton mit der Aufschrift OK klickt, und zwar mit dem Event-Handler onClick. Die Funktion prüft, ob der Wert des Eingabefeldes im Formular (document.Formular.Eingabe.value) den Wert 42 hat. Abhängig davon wird der Variablen Ergebnis entweder der Wert RICHTIG! oder FALSCH! zugewiesen. Anschließend wird in dem Textfeld des Formulars, das zur Eingabe diente, ein entsprechender Satz zusammengesetzt (siehe dazu auch Operator für Zeichenkettenverknüpfung).

Eine einfache Entweder-Oder-Abfrage wird mit einer Bedingung eingeleitet. Die Bedingung muss in Klammern stehen, im Beispiel (document.Formular.Eingabe.value == "42"). Dahinter wird ein Fragezeichen notiert. Hinter dem Fragezeichen wird ein Wert angegeben, der aktuell ist, wenn die Bedingung erfüllt ist. Dahinter folgt ein Doppelpunkt, und dahinter ein Wert für den Fall, dass die Bedingung nicht erfüllt ist. Da es sich um Werte handelt, die für die Weiterverarbeitung nur sinnvoll sind, wenn sie in einer Variablen gespeichert werden, wird einer solchen Entweder-Oder-Abrage in der Regel eine Variable vorangestellt, im Beispiel die Variable Ergebnis. Der Variablen wird durch diese Art von Anweisung das Ergebnis der Entweder-Oder-Abfrage zugewiesen.

Um Bedingungen zu formulieren, brauchst du Vergleichsoperatoren.

Fallunterscheidung mit "switch"

Mit if und else kannst du genau zwei Fälle unterscheiden. Wenn du feiner differenzieren, also zwischen mehreren Fällen unterscheiden willst, kannst du zwar mehrere if-Abfragen hintereinander notieren, aber es gibt noch eine elegantere Möglichkeit: die Fallunterscheidung mit switch. Diese Syntax, die aus der Programmiersprache C entlehnt ist, gibt es in JavaScript aber erst seit der Sprachversion 1.2 - ältere Browser quittieren solche Anweisungen mit einer Fehlermeldung.

Beispiel

</head><body>

<!--

var Eingabe = window.prompt("Geben Sie eine Zahl zwischen 1 und 4 ein:","");

switch(Eingabe) {

case "1":

alert("Sie sind sehr bescheiden");

break;

case "2":

alert("Sie sind ein aufrichtiger Zweibeiner");

break;

case "3":

alert("Sie haben ein Dreirad gewonnen");

break;

case "4":

alert("Gehen Sie auf allen Vieren und werden Sie bescheidener");

break;

default:

alert("Sie bleiben leider dumm");

break;

}

// -->

</script>

</body></html>

Erläuterung

Mit switch leitest du eine Fallunterscheidung ein (switch = Schalter). Dahinter folgt, in runde Klammern eingeschlossen, eine Variable oder ein Ausdruck, für dessen aktuellen Wert du die Fallunterscheidung durchführst. Im Beispiel ist das die Variable mit dem Namen Eingabe. Diese Variable wird vor der Fallunterscheidung mit einem Wert versorgt, denn ein Dialogfenster (window.prompt()) mit einem Eingabefeld fordert den Anwender auf, eine Zahl zwischen 1 und 4 einzugeben. Der eingegebene Wert wird in Eingabe gespeichert.

Die einzelnen Fälle, die du abfragen möchtest, werden innerhalb geschweifter Klammern notiert. Jeden einzelnen Fall leitest du mit case ein (case = Fall). Dahinter folgt die Angabe des Wertes, auf den du prüfen willst. Die Anweisung case "1": im obigen Beispiel bedeutet dann so viel wie: 'wenn die Variable Eingabe den Wert "1" hat'. Im Beispiel wird für jeden Fall eine individuelle Meldung ausgegeben.

Wichtig ist dabei auch das Wort break am Ende jedes Falls (break = abbrechen). Wenn du das Wort wegläßt, werden nämlich alle nachfolgenden Fälle auch ausgeführt, aber das willst du ja in der Regel nicht.

Für den Fall, dass keiner der definierten Fälle zutrifft, kannst du am Ende der Fallunterscheidung den Fall default: definieren. Die darunter stehenden Anweisungen werden ausgeführt, wenn keiner der anderen Fälle zutrifft.

Schleifen

Schleifen mit "while"

Mit Hilfe von while-Schleifen kannst du Programmanweisungen solange wiederholen, wie die Bedingung, die in der Schleife formuliert wird, erfüllt ist. Solche Schleifen eignen sich dann, wenn du nicht weißt, wie oft die Schleife durchlaufen werden soll.

Beispiel

</head><body>

<!--

var Eingabe = "";

var Zaehler = 1;

while(Eingabe != "how to make love" && Zaehler <= 3) {

Eingabe = window.prompt(Zaehler + ". Versuch: Was bedeutet 'HTML'?","");

Zaehler++;

}

if(Eingabe != "how to make love")

document.write("<big>Lernen Sie erst mal HTML! ...<\/big>");

else

document.write("<big>Fein, Sie haben verstanden worum es geht! ...<\/big>");

// -->

</script>

</body></html>

Erläuterung

Das Beispiel bittet den Anwender in einer while-Schleife bis zu drei Mal in einem Dialogfenster (window.prompt()), die Bedeutung der Abkürzung 'HTML' einzugeben. Die Schleife kann aus zwei Gründen beendet werden: entweder der Anwender gibt die richtige Bedeutung der Abkürzung ein, oder die Variable Zaehler, die die Anzahl der Versuche mitzählt, hat einen Wert größer als 3. Wenn die Schleife beendet ist, steht also nicht fest, aus welchen der beiden möglichen Ursachen sie beendet wurde. Um das zu entscheiden, wird im Beispiel deshalb anschließend mit Hilfe einer if-Abfrage nochmals überprüft, ob die Schleife deshalb beendet wurde, weil die Eingabe falsch war. Je nachdem, ob sie falsch oder richtig war, wird mit document.write ins Anzeigefenster des Browsers ein entsprechender Satz geschrieben.

Eine while-Schleife beginnt mit dem Wort while (while = solange). Dahinter folgt, in Klammern stehend, die Bedingung. Um eine Bedingung zu formulieren, brauchst du Vergleichsoperatoren. Der Inhalt der Schleife wird solange wiederholt, wie die Schleifenbedingung wahr ist.

In der Regel enthält eine while-Schleife mehrere Anweisungen, die innerhalb der Schleife stehen. Notiere alle Anweisungen innerhalb geschweifter Klammern { und }, so wie im Beispiel (siehe auch den Abschnitt über Anweisungsblöcke).

Achte bei while-Schleifen immer darauf, dass es mindestens eine Möglichkeit gibt, um die Schleife nach einer angemessenen Zeit zu beenden. Andernfalls erzeugst du eine so genannte "Endlosschleife", aus der der Anwender nur durch gewaltsames Beenden des WWW-Browsers herauskommt. Das ist besonders bei Online-Sitzungen im WWW sehr ärgerlich!

Um Endlosschleifen zu vermeiden, brauchst du irgendetwas, das irgendwann zu einem Ausweg aus der Schleife führt. Meistens werden zu diesem Zweck so genannte "Zähler" definiert, im Beispiel die Variable Zaehler. Diese Variable hat im Beispiel einen Anfangswert von 1 und wird innerhalb der Schleife bei jedem Durchgang mit der Anweisung Zaehler++; um 1 erhöht. Wenn im Beispiel der Zählerstand größer als 3 ist, wird abgebrochen.

Schleifen mit "for"

Die Schleifenbedingung einer for-Schleife sieht von vorneherein einen Zähler und eine Abbruchbedingung vor.

Beispiel

</head><body>

<!--

var Ausgabe = "";

for(var i = 10; i <= 36; i++)

Ausgabe = Ausgabe + "<span style=\"font-size:" + i + "pt\">Schrift mit " + i + " Punkt<\/span><br>";

document.write(Ausgabe);

// -->

</script>

</body></html>

Erläuterung

Das Beispiel definiert eine Variable namens Ausgabe, die im Verlauf einer for-Schleife immer mehr Inhalt erhält und am Ende mit document.write ihren ganzen Inhalt ins Browser-Fenster schreibt. Die for-Schleife wird insgesamt 27 mal durchlaufen, nämlich so oft, wie der Zähler, der in der Variablen i definiert und mit dem Wert 10 initialisiert wird, kleiner oder gleich 36 ist, wobei er bei jedem Schleifendurchlauf um 1 erhöht wird (i++). Mit jedem Schleifendurchgang wird die Variable Ausgabe mit ihrem jeweils bisherigen Wert um etwas HTML-Code mit der CSS-Angabe font-size (Schriftgröße) erweitert. Der Wert, der font-size dabei zugewiesen wird, ist jeweils der Wert von i. So entsteht der Effekt, dass CSS-Angaben von font-size:10pt bis font-size:36pt erzeugt werden. Das Ergebnis wird am Ende ausgegeben.

Eine for-Schleife beginnt mit dem Wort for. Dahinter wird, in Klammern stehend, die Schleifenbedingung formuliert. Bei der for-Schleife gilt dabei eine feste Syntax. Innerhalb der Schleifenbedingung werden drei Anweisungen notiert. In der ersten Anweisung wird ein Schleifenzähler definiert und initialisiert. Im Beispiel wird ein Zähler i definiert und mit dem Wert 10 initialisiert. Die zweite Anweisung enthält die Bedingung, ab der die Schleife beendet wird. Dazu brauchst du Vergleichsoperatoren. In der dritten Anweisung wird der Schleifenzähler so verändert, dass er irgendwann die in der zweiten Anweisung notierte Bedingung erfüllt. Im Beispiel wird der Zähler mit i++ bei jedem Schleifendurchgang um 1 erhöht. An dieser Stelle könnte aber auch so etwas stehen wie i=i+10 (bei jedem Schleifendurchgang um 10 erhöhen).

Eine spezielle Abart der for-Schleife ist die for-in-Schleife.

Beispiel

</head><body>

<!--

var Ausgabe = "";

for (var Eigenschaft in document)

Ausgabe = Ausgabe + "document." + Eigenschaft + ": " + document[Eigenschaft] + "<br>";

document.write("<h1>Eigenschaften des Objekts <i> document <\/i><\/h1>")

document.write(Ausgabe);

// -->

</script>

</body></html>

Erläuterung

Das Beispiel zeigt, wie du mit Hilfe einer for-in-Schleife einiges über die JavaScript-Fähigkeiten Ihres Browsers herausbekommen kannst. Im Beispiel werden die Eigenschaften des Objektes document ausgegeben. Mit jedem Schleifendurchgang wird die Variable Ausgabe um eine Objekteigenschaft erweitert. Den aktuellen Wert der Objekteigenschaft kannst du dir mit Objektname[Eigenschaft] ausgeben lassen. Die Schleife läuft so lange, wie es verfügbare Objekteigenschaften gibt - dies bedeutet das for in.

Wenn du mehr als eine Anweisung von einer for-Schleifenbedingung abhängig machen willst, musst du die Anweisungen wie üblich in geschweifte Klammern einschließen.

Die for in-Schleife kannst du in Opera nur auf selbstdefinierte Objekte und Variablen anwenden. Bei vordefinierte Objekten bleibt die Schleife wirkungslos.

Der MS Internet Explorer kennt diese Schleifenart erst ab Version 4.01.

Schleifen mit "do-while"

Die do-while-Schleife ist eine Variante der normalen while-Schleife. Der Unterschied zwischen beiden ist, dass bei der normalen while-Schleife vor dem Ausführen des Codes die Schleifenbedingung überprüft wird, während bei der do-while-Schleife zuerst der Code ausgeführt und erst danach die Schleifenbedingung überprüft wird. Auf diese Weise kannst du erzwingen, dass Anweisungen innerhalb der Schleife auf jeden Fall mindestens einmal ausgeführt werden, auch wenn sich die Schleifenbedingung gleich am Anfang als unwahr herausstellt.

Beispiel

Einmal so:

<!--

var x = 10;

do {

document.write("<br>x * x = " + (x * x));

x = x + 1;

}

while(x < 10);

// -->

</script>

Und einmal so:

<!--

var x = 10;

while(x < 10) {

document.write("<br>x * x = " + (x * x));

x = x + 1;

}

// -->

</script>

Erläuterung

Im Beispiel werden zwei kleine JavaScript-Bereiche definiert. In beiden Bereichen wird eine Variable x definiert und mit dem Wert 10 vorbelegt. Im ersten Bereich wird solange das Quadrat von x (das bei jedem Schleifendurchlauf um 1 erhöht wird) geschrieben, wie x kleiner als 10 ist. Da x ja schon am Beginn den Wert 10 hat, ist die Abbruchbedingung eigentlich schon von vorneherein erfüllt. Trotzdem wird einmal das Quadrat von x ausgegeben, da die Überprüfung der Schleifenbedingung erst nach dem Ausführen der Anweisungen innerhalb der Schleife erfolgt.
Im zweiten Script-Bereich herrschen die gleichen Bedingungen, jedoch wird dort eine normale while-Schleife notiert. Da x von vorneherein nicht kleiner als 10 ist, werden die Anweisungen der while-Schleife kein einziges Mal ausgeführt. Die Überprüfung der Schleifenbedingung, die am Anfang stattfindet, verhindert dies.

Kontrolle innerhalb von Schleifen - break und continue

Schleifen sind "kritische Faktoren" innerhalb eines Scripts. Bei komplizierteren Aufgaben ist es manchmal nicht einfach, eine Schleife so zu programmieren, dass die Schleife in jedem Fall irgendwann mal abgebrochen wird. Deshalb gibt es zusätzliche Befehle, um innerhalb einer Schleife das Geschehen zu kontrollieren.

Beispiel 1

<!--

var i = 0;

while (i < 6) {

if (i == 3) break;

i++;

}

alert("i = " + i);

// -->

</script>

Erläuterung

Mit break kannst du eine Schleife sofort beenden. Dazu musst du innerhalb des Schleifenkörpers eine if-Abfrage notieren und abhängig davon das Wort break als Anweisung notieren. Im Beispiel bricht die Schleife bereits ab, wenn i den Wert 3 hat, obwohl laut Schleifenbedingung das Hochzählen bis 6 erlaubt ist.

Beispiel 2

<!--

var i = 0;

while (i < 6) {

Ende:

if (i == 3) {

alert("Das war's, denn i ist gleich " + i);

break Ende;

}

i++;

}

// -->

</script>

Erläuterung

Dies ist eine besondere Variante von break. Du kannst vor einer Abfrage, von der du eine break-Anweisung abhängig machst, ein "Label" notieren. Das ist ein selbstvergebener Name mit einem Doppelpunkt dahinter, im Beispiel Ende:. Hinter dem Wort break kannst du dann den Namen des Labels angeben. So stellen Sie im Beispiel sicher, dass sich die break-Anweisung auf jeden Fall auf jene if-Abfrage bezieht, in der abgefragt wird, ob i gleich 3 ist. In einfachen Fällen wie im obigen Beispiel ist das eigentlich überflüssig. Aber behalte die Möglichkeit im Auge, falls du einmal verschachtelte if-Abfragen innerhalb von Schleifen programmieren und dort auch break-Anweisungen benutzen. Beachte jedoch, dass diese Variante der break-Anweisung JavaScript 1.2 ist und bei älteren Browsern zu einer Fehlermeldung führt.

Beispiel 3

<!--

var i = 0, j = 0;

while (i < 6) {

i++;

if (i == 3) continue;

j++;

}

alert("i ist gleich " + i + " und j ist gleich " + j);

</script>

Erläuterung

Mit continue erzwingst du sofort den nächsten Schleifendurchlauf. Nachfolgende Anweisungen innerhalb der Schleife werden bei diesem Schleifendurchlauf nicht mehr ausgeführt. Im Beispiel werden zwei Zähler i und j bei jedem Schleifendurchlauf um 1 erhöht. Wenn i gleich 6 ist, wird die Schleife abgebrochen. Zwischendurch hat i auch mal den Wert 3. Dieser Fall wird mit einer if-Abfrage behandelt. Wenn i gleich 3 ist, wird sofort der nächste Schleifendurchgang gestartet. Die Anweisung j++; wird dadurch in diesem Schleifendurchlauf nicht mehr ausgeführt. Am Ende hat dadurch i den Wert 6 und j nur den Wert 5.

Funktion mit Rückgabewert und solche Funktion aufrufen

Eine Funktion kann einen ermittelten Wert an die aufrufende Instanz zurückgeben.

Beispiel

<html>

<head>

<!--

function BruttoBetrag(Netto, Prozente) {

var Ergebnis = Netto * (1 + (Prozente / 100));

return Ergebnis;

}

function SchreibeBrutto(Betrag, Prozentsatz) {

var Wert = BruttoBetrag(Betrag, Prozentsatz);

document.BruttoForm.Ergebnisfeld.value = Wert;

}

//-->

</script>

</head>

<body>

<pre>

Nettobetrag: <input type="text" name="NettoEingabe">

Prozentsatz: <input type="text" name="ProzentEingabe"></pre>

<p>Kommabetrag mit Punkt eingeben!</p>

<input type="button" value="Brutto ermitteln"

onClick="SchreibeBrutto(document.BruttoForm.NettoEingabe.value,document.BruttoForm.ProzentEingabe.value)">

<pre>

Ergebnis: <input type="text" name="Ergebnisfeld"></pre>

</form>

</body>

</html>

Erläuterung

Das obige Beispiel zeigt eine HTML-Datei, in deren Dateikopf ein JavaScript-Bereich definiert ist, in dem wiederum die zwei Funktionen BruttoBetrag(...) und SchreibeBrutto(...) definiert sind. Im Dateikörper der HTML-Datei steht ein Formular mit je einem Eingabefeld für einen Nettobetrag und einen Prozentwert. Wenn der Anwender auf den darunter definierten Button klickt, wird die Funktion SchreibeBrutto(...) aufgerufen. Diese wiederum ruft die Funktion BruttoBetrag(...) auf.

Da die Funktion BruttoBetrag(...) dein errechnetes Ergebnis an die aufrufende Instanz zurückgibt, wird in SchreibeBrutto(...) eine Variable mit dem Namen Wert definiert, die diesen Rückgabewert speichert. Das Ergebnis, das in dieser Variablen gespeichert ist, schreibt die Funktion schließlich in ein Feld, das innerhalb des Formulars eigens für diesen Zweck eingerichtet wurde: das Eingabefeld mit dem Namen Ergebnisfeld.

Vordefinierte JavaScript-Funktionen

Es gibt ein paar Funktionen, die bereits in JavaScript integriert sind. Solche Funktionen kannst du aufrufen, ohne sie selbst zu definieren.

Beispiel

<html>

<head>

<!--

function Rechne(Operation) {

var Ergebnis = eval(Operation);

alert("Ergebnis: " + Ergebnis);

}

//-->

</script>

</head>

<body>

<p>Geben Sie eine Rechenaufgabe (z.B. 8*5) ein:</p>

<input type="button" value="OK"

onClick="Rechne(document.Formular.Eingabe.value)">

</form>

</body>

</html>

Erläuterung

Das obige Beispiel zeigt eine HTML-Datei mit einem JavaScript-Bereich, in dem wiederum eine Funktionen Rechne() definiert ist. Innerhalb des Dateikörpers der HTML-Datei ist ein Formular mit einem Eingabefeld notiert. In dem Eingabefeld kann der Anwender eine Rechenaufgabe eingeben, z.B. 1 + 1 oder (28.76 - 0.00001) * 7. Beim Anklicken des Klickbuttons wird die Funktion Rechne() aufgerufen. Du erwartest als Parameter eine Rechenaufgabe. Deshalb wird ihr der Inhalt des Formulareingabefeldes beim Aufruf übergeben. Die Funktion Rechne bedient sich zur Berechnung des Ergebnisses der äußerst mächtigen vordefinierten Funktion eval() (eval = evaluate = berechne). Diese kann - unter anderem - Rechenoperationen als solche erkennen und ausrechnen. Das Rechenergebnis wird im Beispiel in einem Meldungsfenster ausgegeben.

Eine Übersicht aller vordefinierten JavaScript-Funktionen findest du im Anhang.

Objekte

Hat man ein Problem aus der uns erfahrbaren Realität zu lösen, so findet man meist leicht Objekte, die diesen Ausschnitt der Realität ausfüllen. Zum Beispiel Auto, Lastkraftwagen, Radfahrer, Fußgänger, Ampel, Straße und Kreuzungim Falle einer Optimierung von Ampelschaltzeiten.

Bei der Programmierung wünscht man sich eine mehr oder weniger direkte Entsprechung der realen Objekte zu den Programmobjekten.

Die Lösung des Problems erfolgt letztlich durch Informationsaustausch zwischen den Objekten. Jedes Objekt weiß, wie es auf die eintreffenden Informationen zu reagieren hat. (Ansonsten, crash!).

Beschrieben werden Objekte durch Daten und durch Methoden . Die Daten kennzeichnen die Eigenschaftendes Objekts und die Methoden arbeiten mit diesen Daten und stellen die Schnittstellen zu anderen Objekten her.

Der Programmablauf besteht darin, daß ein Objekt einem anderen Objekt Nachrichten oder

Botschaften sendet, auf Antwort wartet und/oder weiteren Objekten Botschaften übermittelt. Die adressierten Objekte verstehendie Botschaften und erledigen sie auf ihre eigene Art und Weise. Dabei können sie selbst wieder Botschaften an andere Objekte schicken usw..

Ein Objekt im Sinne der Software-Technik ist eine abgeschlossene Einheit, die Daten (Zustand) und Funktionen (Methode) einkapselt.

Die Schnittstelle (Interface) ist die Gesamtheit der öffentlichen Methoden eines Objektes.

Objektbasierung bedeutet, daß Zustände in Objekte gekapselt werden und nur über wohldefinierte Operationen zugreifbar sind.

Vererbung bedeutet, daß Objekteigenschaften auf der Basis von bereits existierenden Definitionen spezifiziert werden können.

Zwei Grundprinzipien der Objektorientierung sind das Geheimnisprinzip (einige Eigenschaften werden veröffentlicht, andere bleiben geheim) und das Partitionierungsprinzip (System wird in mehrere handhabbare Einheiten (Objekte), die miteinander interagieren zerlegt).

Klassischer Programmentwurf

Objektorientierter Programmentwurf

Vordefinierte JavaScript-Objekte

Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit objektgebundenen Funktionen (Methoden).

Das JavaScript eine Erweiterung von HTML darstellt, liegt vor allem an den vordefinierten Objekten, die dir in JavaScript zur Verfügung stehen. Über diese vordefinierten Objekte kannst du beispielsweise einzelne Elemente eines HTML-Formulars abfragen oder ändern.

Ein Objekt kann eine Teilmenge eines übergeordneten Objekts sein. Die JavaScript-Objekte sind deshalb in einer Hierarchie geordnet. Das hierarchiehöchste Objekt ist in JavaScript das Fenster-Objekt (window). Fenster haben Eigenschaften wie einen Namen, eine Größe usw. Der Inhalt eines Fensters ist das nächstniedrigere Objekt, nämlich das im Fenster angezeigte Dokument (in JavaScript das Objekt document). In der Regel ist der Fensterinhalt eine HTML-Datei. Eine solche Datei kann bestimmte, durch HTML-Tags definierte Elemente enthalten, wie zum Beispiel Formulare, Verweise, Grafikreferenzen usw. Für solche untergeordneten Elemente gibt es wieder eigene JavaScript-Objekte, zum Beispiel das Objekt forms für Formulare. Ein Formular besteht seinerseits aus verschiedenen Elementen, zum Beispiel aus Eingabefeldern, Auswahllisten oder Buttons zum Absenden bzw. Abbrechen. In JavaScript gibt es dafür ein Objekt elements, mit dem du einzelne Felder und andere Elemente innerhalb eines Formulars ansprechen kannst.

Neben den hierarchisch geordneten JavaScript-Objekten gibt es auch solche, die nicht direkt in die Hierarchie passen. Das sind zum Beispiel Objekte für Datums- und Zeitrechnung, für mathematische Aufgaben oder für Zeichenkettenverarbeitung.

Eine Übersicht der vordefinierten JavaScript-Objekte findest du im Anhang. Dort werden zu jedem Objekt die verfügbaren Eigenschaften und Methoden vorgestellt.

Vordefinierte JavaScript-Objekte verwenden

JavaScript-Objekte kannst du jederzeit verwenden.

Beispiel

</head>

<body>

<!--

var Jetzt = new Date();

var Tag = Jetzt.getDate();

var Monat = Jetzt.getMonth() + 1;

var Jahr = Jetzt.getYear();

var Stunden = Jetzt.getHours();

var Minuten = Jetzt.getMinutes();

var NachVoll = ((Minuten < 10) ? ":0" : ":");

if (Jahr<2000) Jahr=Jahr+1900;

document.write("<h2>Guten Tag!<\/h2><b>Heute ist der "

+ Tag + "." + Monat + "." + Jahr + ". Es ist jetzt "

+ Stunden + NachVoll + Minuten + " Uhr<\/b>");

//-->

</script>

</body></html>

Erläuterung

Im Beispiel wird innerhalb eines JavaScript-Bereichs mit Hilfe des vordefinierten JavaScript-Objekts Date das aktuelle Datum und die aktuelle Uhrzeit ermittelt und HTML-formatiert ausgegeben.

Zuerst muss eine dazu neue Variable angelegt werden. Im Beispiel ist das die Variable Jetzt. Diese Variable soll auf Daten des Date-Objekts zugreifen können. Dies geschieht durch ein Istgleichzeichen hinter dem Variablennamen. Dahinter folgt das reservierte JavaScript Wort new, und dahinter, durch ein Leerzeichen getrennt, der Aufruf der von Date() zum Erzeugen einer neuen Instanz des Objekts Date.

Um die einzelnen Daten der Objektinstanz von Date, also Tag, Monat, Jahr usw. anzusprechen, stehen entsprechende Methoden zur Verfügung. Diese Methoden, z.B. getDate() oder getHours(), haben als Rückgabewert jeweils einen Datums/Uhrzeit-Bestandteil. So liefert getDate() beispielsweise den aktuellen Tag des Monats und getHours() die aktuelle Stundenzahl des Tages. Im Beispiel wird für jeden der benötigten Bestandteile eine Variable definiert. In der Variablen Tag wird beispielsweise durch Aufruf von Jetzt.getDate() der aktuelle Tag des Monats gespeichert.

Die Anweisung im Beispiel, die mit NachVoll ... beginnt, kann an dieser Stelle nicht näher erläutert werden. Die Anweisung ist eine Vorbereitung zur sauberen Formatierung der Uhrzeit.

Die einzelnen Methoden des im Beispiel verwendeten Objekts Date, wie zum Beispiel getDate(), werden im Anhang aufgelistet.

Eigene Objekte definieren

Du kannst eigene Objekte definieren, wenn du streng objektorientiert in JavaScript programmieren willst.

Um ein eigenes Objekt anzulegen, sind zwei Schritte nötig. Zuerst musst du das Objekt selbst und seine Eigenschaften "deklarieren". Im zweiten Schritt kannst du anschließend eine Instanz dieses Objekts definieren. Mit dieser Objekt-Instanz kannst du dann Programmprozeduren durchführen.

Beispiel

<!--

function Farbe(R, G, B) {

this.R = R;

this.G = G;

this.B = B;

this.hex="#";

}

function HintergrundWechseln() {

var Hintergrund = new Farbe("E0","FF","E0");

document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;

}

//-->

</script>

</head><body bgcolor="#FFFFFF">

<h1>Das eigene Farb-Objekt mit JavaScript</h1>

<a href="javascript:HintergrundWechseln()"><b>Hintergrundfarbe wechseln</b></a>

</body>

</html>

Erläuterung

Um ein neues Objekt und seine Eigenschaften anzulegen, musst du innerhalb eines JavaScript-Bereichs oder innerhalb einer separaten JavaScript-Datei eine eigene Funktion definieren, die so aussehen kann wie im Beispiel die Funktion Farbe(...). Der Name, den du der Funktion gibst (im Beispiel der Name Farbe) ist zugleich der Name des Objekts, das du mit dieser Funktion anlegst. Als Parameter, die die Funktion erwartet, notierst du die Eigenschaften, die dein Objekt haben soll. Die Parameternamen sind zugleich die Namen der Objekteigenschaften. Im Beispiel sind das die Eigenschaften R, G und B, denn es soll ein Objekt angelegt werden, das Rot-, Grün- und Blauwert einer Farbe speichern kann. R, G und B sind dabei übrigens selbstvergebenen Namen! Innerhalb der Funktion notierst du alle Anweisungen so wie im Beispiel gezeigt: für jede Eigenschaft, die bei den Funktionsparametern festgelegt wurde, notierst du eine Anweisung, beginnend mit dem reservierte JavaScript Wort this, gefolgt von einem Punkt und dem Parameternamen. Dahinter notierst du ein Istgleichzeichen, und hinter dem Istgleichzeichen nochmals den Parameternamen. Am Ende jeder Anweisung muss ein Strichpunkt stehen.
Natürlich kannst du für jedes Objekt auch feste (nicht durch Parameter beeinflusste) Eigenschaften definieren. Im Beispiel ist die Eigenschaft hex eine feste Eigenschaft, die für jede Instanz des Objektes existiert. Notiere dazu hinter dem Eigenschaftsnamen den jeweiligen Wert der Eigenschaft.

Nachdem das Objekt angelegt ist, kannst du an anderen Stellen innerhalb Ihres JavaScripts Instanzen dieses Objekt definieren. Dies geschieht mit Hilfe einer Variablen und dem reservierte JavaScript Wort new. Im Beispiel wird eine zweite Funktion HintergrundWechseln() definiert. Darin wird zunächst eine Variable Hintergrund angelegt. Diese Variable soll Daten des angelegten Objekts Farbe enthalten. Dies geschieht durch ein Istgleichzeichen hinter dem Variablennamen. Dahinter folgt das Wort new und dahinter, durch ein Leerzeichen getrennt, der Name der Funktion, mit der das gleichnamige Objekt angelegt wurde, im Beispiel Farbe. Als Parameter werden dieser Funktion irgendwelche brauchbaren Werte übergeben, im Beispiel "33", "99" und "C0" (typische hexadezimale Farbwerte, wie sie in HTML zum Einsatz kommen).

Anschließend ist die Variable Hintergrund an das Farbobjekt gebunden, und über sie lassen sich die Eigenschaften des Objekts setzen oder abfragen. Im Beispiel steht die Anweisung:
document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;
Damit wird die Hintergrundfarbe der aktuell angezeigten Seite verändert. Normalerweise könnte man document.bgColor so etwas zuweisen wie "#C0C0EE". Auch im Beispiel wird ein Farbwert dieser Art zugewiesen, jedoch zusammengesetzt aus den Einzeleigenschaften des Farbobjekts, das in der Instanz Hintergrund gespeichert ist. Die Funktion HintergrundWechseln() wird aufgerufen, wenn der Anwender auf den Verweis klickt, der in der HTML-Datei enthalten ist.

Eigenschaften von Objekten

Objekte können Eigenschaften haben. Ein selbst definiertes Objekt "Mensch" könnte zum Beispiel die Eigenschaften Name, Alter, Geschlecht und Muttersprache haben. Vordefinierte JavaScript-Objekte haben ebenfalls Eigenschaften. So hat das Objekt Math zum Beispiel eine Eigenschaft "PI" (Math.PI). Auf diese Weise lässt sich mit der mathematischen Konstante PI rechnen, ohne deren genauen Wert zu kennen.

Eigenschaften von Objekten kannst du innerhalb deines JavaScript-Codes jederzeit auslesen, und in vielen Fällen kannst du die Werte von Eigenschaften auch ändern. So kannst du beispielsweise dem im Browser-Fenster angezeigten Dokument einen neuen, gültigen URI zuweisen. Dadurch bewirkst du, dass der WWW-Browser einen Sprung zu der zugewiesenen Adresse ausführt, genau so, wie wenn der Anwender auf einen entsprechenden Verweis klicken würde.

Beispiel

<h1>Die Seite, die Sie genau erkennt</h1>

<!--

var BrowserName = navigator.appName;

var BrowserVersion = navigator.appVersion;

document.write("<p>Ah ja, Sie verwenden also den <b>" + BrowserName +

"<\/b>, und zwar in der Version <b>" + BrowserVersion + "<\/b><\/p>");

//-->

</script>

</body></html>

Erläuterung

Im Beispiel werden innerhalb eines JavaScript-Bereichs zwei Eigenschaften des vordefinierten JavaScript-Objekts navigator in zwei entsprechenden Variablen namens BrowserName und BrowserVersion gespeichert. Das navigator-Objekt stellt dir über seine Eigenschaften verschiedene Informationen über den verwendeten WWW-Browser des Anwenders zur Verfügung. Im obigen Beispiel werden die Eigenschaften des Browser-Namens (gespeichert in der Objekteigenschaft navigator.appName) und der Browser-Version (gespeichert in der Objekteigenschaft navigator.appVersion) ermittelt. Anschließend werden die ermittelten Daten mit document.write() dynamisch ins Browser-Fenster geschrieben.

Objekteigenschaften sprichst du an, indem du zuerst den Namen des Objekts notierst, dahinter einen Punkt, und dahinter den Namen der Eigenschaft. Dabei sind keine Leerzeichen erlaubt!

Objekt-Methoden

Objekten können Methoden haben. Das sind Funktionen, die Aktionen ausführen, aber im Gegensatz zu alleinstehenden Funktionen an ein bestimmtes Objekt gebunden sind. Viele vordefinierte JavaScript-Objekte haben Methoden. So gibt es zum Beispiel das vordefinierte JavaScript-Objekt history, in dem die bereits besuchten URIs eines Browser-Fensters gespeichert sind. Dazu gibt es eine Methode history.back(), mit der du in JavaScript einen Rücksprung zu einer bereits besuchten Adresse erzwingen kannst.

Beispiel

<html>

<head>

</head>

<body>

<a href="javascript:history.back();"><b>Geh hin wo Du herkommst</b></a>

</body>

</html>

Erläuterung

Das Beispiel enthält einen Verweis mit einer speziellen Syntax. Diese Syntax erlaubt dir, beim Anklicken des Verweises JavaScript-Code aufzurufen. Im Beispiel ist das ein Aufruf der Methode back() des Objekts history.

Objektmethoden sprichst du an, indem du zuerst den Namen des Objekts notierst, dahinter einen Punkt, dahinter den Namen der Methode, und dahinter eine öffnende und eine schließende Klammer. Dabei sind keine Leerzeichen erlaubt! Einige Methoden können auch Parameter beim Aufruf erwarten. Diese Parameter musst du dann zwischen der öffnenden und der schließenden Klammer übergeben.

Abfragen ob ein Objekt existiert

Es gibt viele JavaScript-Objekte, und es ist oft schwer durchschaubar, welcher Browser in welcher Version welches Objekt interpretiert. Objekte, die nicht interpretierbar sind, führen in den Browsern zu Fehlermeldungen. So kann es vorkommen, dass ein Script, dass mit Netscape 4.7 oder Internet Explorer 5.0 wunderbar funktioniert, bei Netscape 4.0 oder Internet Explorer 4.0 zu Fehlermeldungen führt, weil ein Objekt nicht bekannt ist. Deshalb gibt es eine Möglichkeit, den Aufruf von Eigenschaften und Methoden eines Objekts von einer Abfrage abhängig zu machen, ob das Objekt dem Browser überhaupt bekannt ist.

Beispiel

<html>

</head>

<body>

<h1>Objekt-Abfrage</h1>

<!--

if(! document.images)

document.write("<p>Schade, Ihr Browser kennt das image-Objekt nicht - Sie verpassen was!<br>");

else

document.write("<p>Gut, Ihr Browser kennt das image-Objekt!<br>");

if(document.all)

document.write("Ach, und Ihr Browser ist von Microsoft ;-)<\/p>");

else

document.write("Ach, und Ihr Browser ist ja gar nicht von Microsoft ;-)<\/p>");

//-->

</script>

</body>

</html>

Erläuterung

Mit einer bedingten Anweisung if(...) kannst du überprüfen, ob ein Objekt verfügbar ist. Als Ausdruck für die Bedingung notierst du innerhalb der Klammern hinter if einfach das Objekt, nach dem du fragst. Wenn das Objekt verfügbar ist, wird intern der Wert true (wahr) zurückgegeben. In dem Zweig der if-else-Abfrage, die diesen Fall verarbeitet, kannst du dann loslegen und zum Beispiel Befehle verwenden, die dieses Objekt verwenden. In dem anderen Zweig der if-else-Abfrage kannst du dann beispielsweise eine eigene Meldung ausgeben, dass dieses JavaScript leider Befehle verwendet, die der Browser des Anwenders nicht interpretiert.

Im obigen Beispiel werden mit document.write unterschiedliche Sätze ins Browser-Fenster geschrieben. Dazu wird zunächst gefragt, ob das Unterobjekt document.images nicht verfügbar ist (die verneinte Abfrage ergibt sich durch das Ausrufezeichen vor dem Objekt). Ist das Objekt also nicht verfügbar, dann wird im Beispiel ausgegeben, dass dies sehr schade sei usw. Im anderen Fall, also wenn das Objekt verfügbar ist, wird eine erfreutere Reaktion ausgegeben.

Im zweiten Teil des Beispiels wird die Verfügbarkeit des Unterobjekts document.all abgefragt, das nur dem MS Internet Explorer bekannt ist. Auch dabei werden im Beispiel wieder je nach Verfügbarkeit zwei unterschiedliche Sätze ausgegeben. An diesem Beispiel ist auch ersichtlich, dass die Abfrage der Verfügbarkeit von Objekten auch zur Browser-Groberkennung dienen kann - vorausgesetzt man kennt sich bei den vordefinierten JavaScript-Objekten aus und weiß, welche Objekte nur von bestimmten Browsern interpretiert werden.

Mehrere Anweisungen mit einem Objekt ausführen (with)

Hin und wieder kommt es vor, dass du mehrere Anweisungen in Folge notierst, die alle mit dem gleichen Objekt arbeiten. Für diesen Zweck kannst du wenn du willst eine verkürzte, spezielle Schreibweise verwenden.

Beispiel

</head><body>

<!--

with(document) {

open();

write("Diese Seite hat den Titel " + title);

close();

}

//-->

</script>

</body></html>

Erläuterung

Mit with(Objektname) leitest du eine solche Schreibweise ein (with = mit). Da normalerweise mehrere Anweisungen folgen, die dieses Objekt verwenden, musst du all diese Anweisungen in geschweifte Klammern einschließen.

Im obigen Beispiel wird mit dem document-Objekt gearbeitet. Innerhalb der geschweiften Klammern werden die Methoden open(), write() und close() sowie die Eigenschaft title verwendet. Sie alle gehören zum document-Objekt. Normalerweise musst du notieren: document.open() oder document.title. Durch die spezielle Syntax mit with(document) entfällt dies.

Es ist auch möglich, untergeordnete Objekte auf diese Weise anzusprechen, z.B.:
with(document.MeinFormular.Feld_1)
value = Stefan

Achte darauf, dass die aufgerufene Eigenschaft auch tatsächlich existiert. Wenn diese fehlt, erhältst du eine JavaScript-Fehlermeldung.

Auf aktuelles Objekt Bezug nehmen (this)

Es gibt Fälle, in denen es eindeutig ist, auf welches Objekt sich ein Befehl bezieht. In solchen Fällen kannst du eine verkürzte Schreibweise benutzen.

Beispiel

</head><body>

</form>

</body></html>

Erläuterung

Mit dem Schlüsselwort this kannst du auf ein aktuelles Objekt Bezug nehmen. Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Wenn der Anwender auf den Button klickt, tritt der Event-Handler onClick= in Aktion, der als Attribut in dem HTML-Tag für den Button notiert ist. Im Beispiel wird in einem Meldungsfenster der Wert ausgegeben, den der Anwender in dem Eingabefeld eingegeben hat. Normalerweise würde der Befehl so notiert:
alert(document.Eingabe.Feld.value)
Da der Befehl jedoch innerhalb des Formulars steht, auf das er sich bezieht, darfst du auch schreiben:
alert(this.form.Feld.value)
Das Wort form ist dabei vom forms-Objekt abgeleitet.

HTML-Formulare

Formularelemente

Im Folgenden werden vier gebräuchliche Formularelemente erläutert.

TextBox

RadioButton

Checkbox

SelectBox

Eine SelectBox beinhaltet mehrere Einträge von denen man einen auswählen kann. Das Beispiel zeigt eine SelectBox mittels der man zu bestimmten Webseiten springen kann.

Beispiel

<!--

function jump(fe){

var opt_key = fe.selectedIndex;

var uri_val = fe.options[opt_key].value;

window.open(uri_val,'_top');

return true;

}

//-->

</script>

<option value="http://www.af-design.com/">Seite angeben</option>

<option value="http://www.google.com/">Google</option>

<option value="http://www.yahoo.com/">Yahoo</option>

</select>

Erläuterung

Die Funktion `jump(fe)` zeigt die in er SelectBox ausgewählte Seite an. Mit dem Parameter `fe` wird das SelectBox-Objekt übergeben. Das passiert im `onChange` Ereignis der SelectBox mit dem Code `"return jump(this);"` durch Übergabe der SelectBox mittels `this`.

In der Variable `opt_key` wird der Index des gewählten Elements der im Parameter `fe` übergebenen SelectBox gespeichert. In der Variable `uri_val` wird dann der Text der ausgewählten URL gespeichert. Dieser wird dann in der Funktion `window.open()` verwendet, um die ausgewählte Seite anzuzeigen.

Das folgende Beispiel zeigt, wie man zur Laufzeit Werte in eine SelectBox eintragen kann:

Beispiel

<!--

function jump(fe){

var opt_key = fe.selectedIndex;

var uri_val = fe.options[opt_key].value;

window.open(uri_val,'_top');

return true;

}

function Eintrag()

/* Funktion schreibt "griechische Buchstaben" in Auswahlliste */

{

/* Eintraege setzen : */

document.jumpto.url.options[0]=new Option("ORF","http://www.orf.at");

document.jumpto.url.options[1]=new Option("TGM","http://www.tgm.ac.at");

document.jumpto.url.options[2]=new Option ("Google", "http://www.google.at");

document.jumpto.url.options[3]=new Option("keine Lust", "http://www.dieseitehatjetztkeinenbock.de");

/* Laenge festsetzen : */

document.jumpto.url.options.length=4;

}

//-->

</script>

</select>

</body>

Erläuterung

In der Funktion `Eintrag()` werden 4 Einträge der SelectBox `url` in der Form `jumpto` eingetragen. Mit dem ersten Parameter der Funktion `new Option()` wird der in der SelectBox angezeigte Text angegeben wobei der zweite Parameter den Wert dieser Option beinhaltet. Sonst wurde das Beispiel gegenüber zuvor nur dahingehend geändert, dass die Werte der SelectBox ausschließlich über die Funktion `Eintrag()` erstellt werden und nicht im `HTML`-Code im `<form>`-Bereich.

Der Befehl `document.jumpto.url.options.length=4;` legt fest, dass 4 Zeilen der Selectbox aufgeblättert werden. Die Angabe `size="1"` im `HTML`-Code der SelectBox gibt an wie viele Zeilen hoch die SelectBox dargestellt werden soll. Bei `size="1"` wird automatisch ein kleiner Button zum Aufblättern hinzugefügt.

Beispiel eines Formulars

JavaScript wird in vielen Fällen dazu verwendet, um HTML-Seiten mit Funktionen zu versehen wie z.B.: eine Eingabeüberprüfung, Berechnungen, usw..

Das Beispiel zeigt die vollständige HTML-Datei mit dem Formular und dem JavaScript zum Überprüfen der Formulareingaben. Das Beispielformular ruft nach erfolgreichem Absenden ein CGI-Script auf dem Server von teamone.de auf.

Beispiel

<html>

<head>

<title>Formulareingaben &uuml;berpr&uuml;fen</title>

<script type="text/javascript">

<!--

function chkFormular()

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

   alert("Bitte Ihren Namen eingeben!");

   document.Formular.User.focus();

   return false;

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

   alert("Bitte Ihren Wohnort eingeben!");

   document.Formular.Ort.focus();

   return false;

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

   alert("Bitte Ihre E-Mail-Adresse eingeben!");

   document.Formular.Mail.focus();

   return false;

 if(document.Formular.Mail.value.indexOf('@') == -1) {

   alert("Keine E-Mail-Adresse!");

   document.Formular.Mail.focus();

   return false;

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

   alert("Bitte Ihr Alter eingeben!");

   document.Formular.Alter.focus();

   return false;

 var chkZ = 1;

 for(i=0;i<document.Formular.Alter.value.length;++i)

   if(document.Formular.Alter.value.charAt(i) < "0"

   || document.Formular.Alter.value.charAt(i) > "9")

     chkZ = -1;

 if(chkZ == -1) {

   alert("Altersangabe keine Zahl!");

   document.Formular.Alter.focus();

   return false;

 var check=0;

 for (i=0; i<2;i++)

        if (document.Formular.Geschlecht[i].checked) check = 1;

 if (check==0) {

   alert("Geschlecht fehlt!");

   document.Formular.Geschlecht[0].focus();

   return false;

//-->

</script>

</head>

<body bgcolor="#EEEEEE" text="#000000">

<h1>Formular</h1>

<form name="Formular" action="http://selfaktuell.teamone.de/cgi-bin/formview.pl" method="post" onSubmit="return chkFormular()">

<pre>

Name:       <input type="text" size="40" name="User">

Wohnort:    <input type="text" size="40" name="Ort">

E-Mail:     <input type="text" size="40" name="Mail">

Alter:      <input type="text" size="40" name="Alter">

Geschlecht: <input type="radio" name="Geschlecht" value="m">

            <input type="radio" name="Geschlecht" value="w">

Formular: <input type="submit" value="Absenden"><input type="reset" value="Abbrechen">

Zum Absenden muss eine Internetverbindung bestehen!

</pre>

</form>

</body>

</html>

Erläuterung

Formular definieren

Im Beispiel wird ein gewöhnliches HTML-Formular mit einigen Eingabefeldern, einem Rest-Button zum Zurücksetzen des Formulars und einem Submit-Button zum Absenden des Formulars definiert. Die einzige Besonderheit ist die Anweisung onSubmit="return chkFormular()" im einleitenden <form>-Tag. Der Event-Handler onSubmit= wird aktiv, wenn der Anwender auf den Submit-Button klickt, um das Formular abzusenden. Dann wird die JavaScript-Funktion chkFormular() aufgerufen, die im Dateikopf in einem JavaScript-Bereich notiert ist. Wenn die Funktion Fehler bei den Eingaben findet, gibt sie den Wert false (falsch) zurück, ansonsten den voreingestellten Wert true (wahr). Mit return wird dieser Wert im einleitenden <form>-Tag an den Browser weitergegeben. Der Browser kennt die beiden Werte true und false. Im Zusammenhang mit onSubmit= reagiert er so, dass er das Formular nur dann abschickt, wenn der Wert true ist. Ist der Wert false, wird das Absenden der Formulardaten verhindert.

Formular überprüfen

Die eigentliche Formularüberprüfung findet im Beispiel in der Funktion chkFormular() statt, die in dem Scriptbereich im Dateikopf notiert ist. Im Beispiel soll jedes Eingabefeld daraufhin überprüft werden, ob es einen Inhalt hat, d.h. ob der Anwender es ausgefüllt hat. Bei der Angabe zur E-Mail-Adresse soll zusätzlich überprüft werden, ob in der Eingabe das Zeichen @ vorkommt. Ist das nicht der Fall, kann man davon ausgehen, dass der Anwender Unsinn eingegeben hat in dem entsprechenden Feld. Bei der Altersangabe schließlich soll zusätzlich überprüft werden, ob die Eingabe eine positive ganze Zahl ist. Andernfalls muss man auch hierbei eine unsinnigen Angabe vermuten.

Mit einer Abfrage wie if(document.Formular.User.value == "") wird ermittelt, ob das entsprechende Formularfeld (im Beispiel also das Feld mit dem Namen User im Formular mit dem Namen Formular) überhaupt einen Inhalt hat. Es wird also auf die leere Zeichenkette "" hin geprüft.

Mit einer Abfrage wie if(document.Formular.Mail.value.indexOf('@') == -1) wird ermittelt, ob in der Eingabe ein bestimmtes Zeichen fehlt (hier das @-Zeichen, das für E-Mail-Adressen charakteristisch ist).

Mit einem Ausdruck wie:
for(i=0;i<document.Formular.Alter.value.length;++i) if(document.Formular.Alter.value.charAt(i) < "0" || document.Formular.Alter.value.charAt(i) > "9")ermittelt man Zeichen für Zeichen, ob ein eingegebener Wert etwas anderes als Ziffern enthält. Wenn ja, wird im Beispiel eine Merkvariable namens chkZ auf den Wert -1 gesetzt.

Mit einem Ausdruck wie:

var check=0;

 for (i=0; i<2;i++)

        if (document.Formular.Geschlecht[i].checked) check = 1;

 }

ermittelt man Zeichen für Zeichen, ob ein eingegebener Wert etwas anderes als Ziffern enthält. Wenn ja, wird im Beispiel eine Merkvariable namens check auf den Wert 1 gesetzt. Wenn kein Radiobutton gesetzt wurde bleibt check auf dem Wert 0 und der User wird aufgefordert ein Geschlecht anzugeben.

Bei allen Abfragen dieser Art werden jeweils drei Anweisungen ausgeführt, wenn die Anwendereingaben der Prüfung nicht standhalten. Zuerst wird mit alert() jeweils in einem Meldungsfenster ausgegeben, was der Anwender falsch gemacht hat. In der zweiten Anweisung wird mit der focus()-Methode auf das Formularelement positioniert, auf das sich der Fehler bezieht. Der Anwender kann seine Feldeingabe also gleich korrigieren. Die dritte Anweisung schließlich gibt false zurück. Dadurch wird das Absenden des Formulars verhindert.

HTML-Ereignisse

Welche Ereignisse von HTML-Objekten ausgelöst werden können ist im Anhang zu finden.

Beispiel: Verweildauer auf einer Seite anzeigen

Hinweise zu diesem Beispiel

Das Beispiel auf dieser Seite zeigt in einem kleinen Feld laufend an, wie viele Minuten und Sekunden seit dem Aufruf der Seite verstrichen sind. Gedacht ist die Anzeige des Feldes vor allem für HTML-Dateien, die innerhalb eines Frame-Fensters ständig angezeigt bleiben, etwa in einem Frame-Fenster mit einem Logo oder mit Verweisen. In solchen Fällen läuft die Uhr während der gesamten Besuchszeit, die der Anwender auf den Seiten verbringt. Man mag das als eine überflüssige Spielerei abtun, aber angenommen, es wird etwas angezeigt, wobei der Anwender schnell die teure Online-Zeit vergisst, etwa ein Spiel oder ein Chat-Fenster. Dann kann eine solche kleine "Erinnerung" in Form einer laufenden Zeituhr durchaus nützlich sein.

Quelltext mit Erläuterungen

Das Beispiel zeigt die HTML-Datei, in der das JavaScript und die Zeitanzeige stehen. Im Anzeigebeispiel ist diese Datei in ein Frameset eingebunden.

Beispiel

<html>

<head>

<title>Aufenthaltsdauer auf Web-Seite anzeigen</title>

<script type="text/javascript">

<!--

var Jetzt = new Date();

var Start = Jetzt.getTime();

function ZeitAnzeigen() {

var absSekunden = Math.round(ZeitBerechnen());

var relSekunden = absSekunden % 60;

var absMinuten = Math.abs(Math.round((absSekunden-30)/60));

var anzSekunden ="" + ((relSekunden > 9) ? relSekunden : "0" + relSekunden);

var anzMinuten ="" + ((absMinuten > 9) ? absMinuten : "0" + absMinuten);

window.document.Anzeige.Zeit.value = anzMinuten + ":" + anzSekunden;

window.setTimeout('ZeitAnzeigen()',1000);

function ZeitBerechnen() {

var Immernoch = new Date();

return((Immernoch.getTime() - Start)/1000);

// -->

</script>

</head>

<body bgcolor="#EEEEEE" text="#000000" onLoad="window.setTimeout('ZeitAnzeigen()',1000)">

<form name="Anzeige" action="">

<input size="7" name="Zeit" value="00:00">

</form>

<p>Viel Spa&szlig mit der Uhr!</p>

</body>

</html>

Erläuterung

Kurzschreibweise einer if-Anweisung

Die im Quelltext angegebenen Kurzform
`var anzSekunden ="" + ((relSekunden > 9) ? relSekunden : "0" + relSekunden);`

entspricht folgender Schreibweise:
`var anzSekunden ="";if (relSekunden > 9) anzSekunden = relSekunden; else anzSekunden = "0" + relSekunden;`

Startzeit ermitteln

Beim Einlesen der Datei wird zunächst der aktuelle Zeitpunkt ermittelt. Dieser Zeitpunkt dient als Startzeit der Anzeige. Mit Jetzt = new Date() wird ein neues Datumsobjekt mit dem aktuellen Zeitpunkt in der Variablen Jetzt gespeichert. Mit Jetzt.getTime wird eine absolute Zahl in Millisekunden ermittelt, die in der Variablen Start gespeichert wird.

Funktion zur Zeitanzeige erstmals aufrufen

Im einleitenden <body>-Tag steht im Beispiel der erste Aufruf der Funktion ZeitAnzeigen(), die die Zeit anzeigt und die Anzeige jede Sekunde aktualisiert. Der erste Aufruf erfolgt nach einer Sekunde. Dazu wird der Funktionsaufruf in die setTimeout()-Methode mit einer Verzögerungszeit von 1000 Millisekunden (1 Sekunde) eingebettet.
Im Dateikörper steht dann ein Formular, das nur aus einem einzigen kleinen Eingabefeld besteht. Dieses Eingabefeld wird als Ausgabefeld für die Zeitanzeige zweckentfremdet. Es wird mit dem Wert 00:00 vorbelegt, damit auch in der ersten Sekunde schon etwas in dem Feld steht.

Zeit anzeigen und Anzeige laufend aktualisieren

Die Funktion ZeitAnzeigen(), die für die laufende Zeitanzeige verantwortlich ist, ruft zunächst die Unterfunktion ZeitBerechnen() auf. Diese Funktion erzeugt bei jedem Aufruf ein neues Datumsobjekt mit dem aktuellen Zeitpunkt. Das Ergebnis wird in der Variablen Immernoch gespeichert. Zurückgegeben wird jedoch nicht der aktuelle Zeitpunkt, sondern die Differenz zwischen dem aktuellen Zeitpunkt und dem Startzeitpunkt, der beim Einlesen der Datei ermittelt wurde. Der Rückgabewert erfolgt in Sekunden. Da beim Datumsobjekt intern in Millisekunden gerechnet wird, wird der Wert durch 1000 geteilt, um Sekunden zu erhalten. Dabei können jedoch Bruchzahlen zustande kommen. Um eine glatte Sekundenzahl zu erhalten, wendet die aufrufende Funktion ZeitAnzeigen() die Methode Math.round() an.

Die absolute Anzahl der vergangenen Sekunden steht dann in der Variablen absSekunden. Von dem darin gespeicherten Wert werden alle folgenden Werte abgeleitet. Mit Math.round((absSekunden-30)/60) wird ermittelt, wie viele Minuten die Sekundenzahl bereits impliziert. Wenn die Sekundenzahl beispielsweise 200 lautet, sind darin 3 Minuten (180 Sekunden) enthalten. Dieser Wert wird in der Variablen absMinuten gespeichert. Da Opera 5.12 in den ersten 30 Sekunden als Ergebnis der Operation -0 zurückliefert, wird zur Unterdrückung des Minuszeichens mit Math.abs der absolute Betrag des Wertes ermittelt. Der Restwert an Sekunden, also bei 200 und 180 etwa der Wert 20, wird mit der Modulo-Division absSekunden % 60 in der Variablen relSekunden gespeichert. Im Falle von 200 steht dann also in absMinuten der Wert 3 und in relSekunden der Wert 20.

Um die Anzeige der Minuten und Sekunden für die Ausgabe ordentlich zu formatieren, werden Zeichenketten erzeugt, die in den Variablen anzSekunden und anzMinuten gespeichert werden. Wenn eine Minuten- oder Sekundenzahl einstellig ist, bekommt sie eine 0 vorangestellt.

Mit der Zuweisung an window.document.Anzeige.Zeit.value wird die ermittelte und formatierte Zeit anschließend in das Formularfeld geschrieben, das zur Zeitanzeige dient. Damit die Zeitanzeige weiterläuft, ruft sich die Funktion ZeitAnzeigen() am Ende mit einer Verzögerungszeit von 1000 Millisekunden, also einer Sekunde, selbst wieder auf. Dadurch wird der gesamte Vorgang wiederholt.

Fehlermanagement

Fehlerbehandlung (try, catch, finally)

Kannst du bei der Verarbeitung deines Codes nicht ausschließen, dass es zu Fehlern kommt (Division durch 0, falsche Benutzereingaben, …) so gibt es in JavaScript eine Konstruktion mit der man Fehler abfangen und bearbeiten kann ohne, dass das Programm den Benutzer mit einer Fehlermeldung belästigt.

Beispiel

<html><head><title>Try-Catch-Finally</title>

</head><body onload="Test();">

<script type="text/javascript">

<!--

function Test() {

try {

eval("6 + * 3"); //fehlerhafte Rechnung

}

catch(fehler) { //Abfangen des Fehlers

alert("Fehler: "+fehler.name+"\nFehlermeldung: "+fehler.message);

//Ausgabe der Fehlerinformationen

}

finally {

alert("Finally wird immer ausgeführt!");

}

//-->

</script>

</body></html>

Erläuterung

Mit try beginnt der Codebereich in dem Fehler abgefangen werden. Der Befehl eval("6 + * 3") erzeugt einen Syntaxfehler der mit dem catch-Befehl abgefangen wird. Der Fehler selbst wird in der Variable fehler gespeichert. Diese Information wird mit der alert()-Funktion ausgegeben. fehler.name und fehler.message beinhalten die Bezeichnung bzw. eine Beschreibung des Fehlers.

Im folgenden Beispiel wird gezeigt wie man selbst Fehler erzeugen kann:

Beispiel

<html><head><title>Try-Catch-Finally</title>

</head><body onload="Test();">

<script type="text/javascript">

<!--

function Test() {

var antwort = prompt("Bitte geben Sie eine Zahl größer als 0 ein!","0");

var erg;

try {

antwort = eval(antwort); //Eingabe in eine Zahl umwandeln

if (antwort <= 0 ) throw "0 eingegeben"; //wenn der Wert 0 eingegeben wurde einen Fehler auslösen

erg = 42/antwort;

alert("42 dividiert durch " + antwort + " = " + erg);

}

catch(fehler) { //Abfangen des Fehlers

//Ausgabe der Fehlerinformationen

if (fehler == "0 eingegeben") alert("Bitte geben Sie doch eine Zahl großer als 0 ein! Danke!");

else

alert("Fehler: "+fehler.name+"\nFehlermeldung: "+fehler.message);

}

finally {

alert("Finally wird immer ausgeführt!");

}

//-->

</script>

</body></html>

Erläuterung

Mit dem Befehl throw kann vom Programm ein Fehler erzeugt werden. Damit der Fehler im catch-Bereich bearbeitet werden kann sollte dem throw-Befehl eine Bezeichnung des Fehlers unter Anführungszeichen angeschlossen werden. Im catch-Bereich kann die Bezeichnung des Abgefangenen Fehlers überprüft werden und auf diese Weise kann der Fehler gesondert abgearbeitet werden.

Fehlervermeidung (reguläre Ausdrücke oder regular expression)

Um Überprüfen zu können, dass Benutzer korrekte Werte eingegeben haben kann man sich „regular expressions“ bedienen. Mit Hilfe von regular expressions kann man festlegen welche Zeichen eine zulässige Eingabe darstellen.

Im folgenden Beispiel dürfen nur 5 Zahlen eingegeben werden.

Beispiel

<html><head>

<title>Regular Expression</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">

<!--

var re=/^[0-9]{1,5}$/;

var zahl = prompt("Bitte geben sie eine positive ganze Zahl mit max. 5 Stellen ein!","0");

if (!re.test(zahl))

{

alert("Bitte positive ganze Zahlen mit max. 5 Stellen eingeben !");

}

else

{

alert("Danke!");

}

//-->

</script>

</head></html>

Erläuterung

Das wesentliche passiert an der Stelle wo der Variable re das Prüfshema zugeordnet durch re=/^[0-9]{1,5}$/; wird. Ob die eingegebene zahl auch diesem Shema entspricht wird mit re.test(zahl) ermittelt. Diese Funktion gibt true zurück wenn die Überprüfung positiv ausgefallen ist und andernfalls false.

In eckigen Klammern können Wertebereiche definiert werden. Z.B.: [12345] lässt nur die Ziffern 1 bis 5 zu. Ebenso kann [1-5] notiert werden. Bereiche können auch Zeichen betreffen, z.B.: [a-z] akzeptiert nur kleine Buchstaben, [A-Z] akzeptiert nur große Buchstaben, [a-zA-Z] akzeptiert große und kleine Buchstaben.

Wichtig ist, dass eine regular expression mit / anfängt und mit / wieder beendet wird. Dazwischen werden dann die Angaben für die zu überprüfenden Ausdrücke eingetragen.

Mit regular expressions besitzt man mehr Möglichkeiten als nur Zahlen zu prüfen. Im Anhang sind alle Zeichen aufgelistet, die bei regular expressions verwendet ewrden können.

Fehlersuche

Da JavaScript-Code direkt vom Browser interpretiert wird und Browser kaum für die Fehlersuche von Programmcode verwendbar sind, gestaltet sich die Fehlersuche in JavaScript ein wenig mühsamer als in dedizierten Entwicklungsumgebungen. Die meisten Browser zeigen bei syntaktischen Fehlern schlicht gar nichts wenn im JavaScript-Code ein Fehler steckt. Manche Browser (z.B.: Internet Explorer) geben wenigstens einen Hinweis auf die Zeile in der der Fehler steckt (manches Mal sind die Fehlermeldungen aber auch irreführend).

Es gilt syntaktische, semantische und Laufzeitfehler zu unterscheiden.

Syntaktische Fehler sind Fehler in der Schreibweise von Befehlen, Irrtümer bei der Groß/Kleinschreibung von Variablen oder vergessene Strichpunkte (;) am Ende einer Befehlszeile. Diese Fehler sind am leichtesten zu finden.

Im Folgenden ein paar Tipps wie man syntaktische Fehler in JavaScript-Code vermeidet bzw. recht schnell findet.

Probiere Änderungen und Erweiterungen des Programmcodes sobald als möglich aus. Falls ein Fehler auftritt sind die hinzugefügten oder geänderten Codezeilen die wahrscheinlichsten Verursacher des Fehlers. Je weniger das sind desto rascher findest du den Fehler.
Kommentiere Codebereiche aus und teste das Programm. Mit den Kommentarzeichen // bzw. /* und */ für Bereiche kannst du Codezeilen bzw. –bereiche auskommentieren. D.h. läuft nach dem Auskommentieren das Programm wieder, dann steckt der Fehler im gerade auskommentierten Code. Reduziere schrittweise die auskommentierten Zeilen, um den Fehler einzugrenzen.

Semantische Fehler sind Fehler in der Programmlogik. D.h. obwohl das Programm syntaktisch in Ordnung ist, macht das Programm nicht das was es soll. Hier hilft nur genaues studieren des Codes. Am besten vergisst man was das Programm tun soll und durchläuft wie ein „dummer“ Computer Schritt für Schritt den Programmcode. Manchmal hilft es auf einem Zettel die aktuellen Werte von Variablen mitzuschreiben damit man sich die Werte nicht merken muss – das ist vor allem bei Schleifen hilfreich.

Laufzeitfehler treten erst auf wenn das Programm läuft. Werden zum Beispiel vom Benutzer Buchstaben eingeben wenn Zahlen erwartet werden, so führt dies erst zur Laufzeit zu Fehlern. Diese Fehler bekommt man nur durch vorausschauendes Programmieren oder durch intensives Testen aus dem Code.

<!--

function Randomize() {

var j;

for(var i = 1; i <= 10; i++)

{

j = Math.random();

if(j <= 0.5) {

alert("j ist 0!");

}

else {

alert("j ist 1!");

}

// -->

</script>

Anhang

Reservierte Wörter

Reserviertes Wort	Erläuterung
`Abstract`	Noch nicht verwendet
`Boolean`	Noch nicht verwendet
`Break`	Als Anweisung: Abbruch in Schleifen
`Byte`	Noch nicht verwendet
`Case`	Für Fallunterscheidungen
`Catch`	Als Anweisung: dient zur Fehlerbehandlung (ab JavaScript-Version 1.4)
`Char`	Noch nicht verwendet
`Class`	Noch nicht verwendet
`Const`	Dient zur Deklaration von Konstanten (ab JavaScript-Version 1.5)
`Continue`	Als Anweisung: Fortsetzung in Schleifen
`Default`	Für Fallunterscheidungen
`Delete`	Operator: Objekte und Objekteigenschaften löschen
`Do`	Für Schleifen mit "do-while"
`Double`	Noch nicht verwendet
`Else`	Sonst-Fall in bedingten Anweisungen mit "if"
`Export`	Als Anweisung: Objekte oder Funktionen für fremde Scripts ausführbar machen
`Extends`	Noch nicht verwendet
`False`	Rückgabewert von Funktionen: falsch
`Final`	Noch nicht verwendet
`Finally`	Noch nicht verwendet
`Float`	Noch nicht verwendet
`For`	Für Schleifen mit "for"
`Function`	Für Funktionen
`Goto`	Noch nicht verwendet
`If`	Für bedingte Anweisungen mit "if"
`Implements`	Noch nicht verwendet
`In`	Für spezielle Schleifen mit "for"
`Instanceof`	Prüft, ob eine Variable eine Instanz eines Objektes ist (ab JavaScript-Version 1.4)
`Int`	Noch nicht verwendet
`Long`	Noch nicht verwendet
`Native`	Noch nicht verwendet
`New`	Dient zum Definieren von Objekten
`Null`	Setzt ein Objekt auf null, ohne das Objekt selbst zu löschen
`Package`	Noch nicht verwendet
`Private`	Noch nicht verwendet
`Protected`	Noch nicht verwendet
`Public`	Noch nicht verwendet
`Return`	Für Rückgabewerte in Funktionen
`Short`	Noch nicht verwendet
`Static`	Noch nicht verwendet
`Super`	Noch nicht verwendet
`Switch`	Für Fallunterscheidungen
`synchronized`	Noch nicht verwendet
`This`	Für Bezug auf das aktuelle Objekt
`Throw`	Als Anweisung: Nutzerdefinierte Ausnahme (ab JavaScript-Version 1.4)
`Throws`	Noch nicht verwendet
`transient`	Noch nicht verwendet
`True`	Rückgabewert von Funktionen: wahr
`Try`	Als Anweisung: testet eine Anweisung auf Ausführbarkeit (ab JavaScript-Version 1.4)
`Typeof`	Operator: liefert den Typ eines Elementes
`Var`	Für Variablendefinitionen
`Void`	Operator: unterdrückt Rückgabewerte
`While`	Für Schleifen mit "while"
`With`	Um mehrere Anweisungen mit einem Objekt durchzuführen

Objekte in JavaScript

Übersicht

Ebene	Objekt/Eigenschaften und Methoden
`1`	window (Anzeigefenster)
`1.1`	frames (Frame-Fenster)
`1.2`	document (Dokument im Anzeigefenster)
`1.2.1`	HTML-Elementobjekte (Alle HTML-Elemente des Dokuments)
`1.2.2`	node (Alle Knoten des Elementbaums)
`1.2.3`	all (Alle HTML-Elemente des Dokuments - Microsoft)
`1.2.3.1`	style (CSS-Attribute von HTML-Elementen)
`1.2.4`	anchors (Verweisanker im Dokument)
`1.2.5`	applets (Java-Applets im Dokument)
`1.2.6`	forms (Formulare im Dokument)
`1.2.6.1`	elements (Formularelemente eines Formulars)
`1.2.6.1.1`	options (Optionen einer Auswahlliste eines Formulars)
`1.2.7`	images (Grafikreferenzen im Dokument)
`1.2.8`	embeds (Multimedia-Referenzen im Dokument)
`1.2.9`	layers (Layer im Dokument - Netscape)
`1.2.10`	links (Verweise im Dokument)
`1.3`	event (Anwenderereignisse)
`1.4`	history (besuchte Seiten)
`1.5`	location (URIs)
`2`	Array (Ketten von Variablen)
`3`	Boolean (Ja-Nein-Variablen)
`4`	Date (Datum und Uhrzeit)
`5`	Function (JavaScript-Funktionen)
`6`	Math (Berechnungen)
`7`	navigator (Browser-Informationen)
`7.1`	mimeTypes (MimeType-Informationen)
`7.2`	plugins (installierte Plugins)
`8`	Number (numerische Werte)
`9`	RegExp (reguläre Ausdrücke)
`10`	Screen (Bildschirm-Informationen)
`11`	string (Zeichenketten)

Eigenschaften und Methoden der Objekte

Ebene	Objekt/Eigenschaften und Methoden
`1`	window (Anzeigefenster)
		Eigenschaften
		closed (geschlossenes Fenster) defaultStatus (Normalanzeige in der Statuszeile) innerHeight (Höhe des Anzeigebereichs) innerWidth (Breite des Anzeigebereichs) locationbar (Adresszeile) menubar (Menüleiste) name (Fenstername) outerHeight (Höhe des gesamten Fensters) outerWidth (Breite des gesamten Fensters) pageXOffset (Fensterstartposition von links) pageYOffset (Fensterstartposition von oben) personalbar (Zeile für Lieblingsadressen) scrollbars (Scroll-Leisten) statusbar (Statuszeile) status (Inhalt der Statuszeile) toolbar (Werkzeugleiste)
		Methoden
		alert() (Dialogfenster mit Infos) back() (zurück in History) blur() (Fenster verlassen) captureEvents() (Ereignisse überwachen) clearInterval() (zeitliche Anweisungsfolge abbrechen) clearTimeout() (Timeout abbrechen) close() (Fenster schließen) confirm() (Dialogfenster zum Bestätigen) disableExternalCapture() (Fremdüberwachung verhindern) enableExternalCapture() (Fremdüberwachung erlauben) find() (Text suchen) focus() (Fenster aktiv machen) forward() (vorwärts in History) handleEvent() (Ereignis übergeben) home() (Startseite aufrufen) moveBy() (bewegen mit relativen Angaben) moveTo() (bewegen mit absoluten Angaben) open() (neues Fenster öffnen) print() (ausdrucken) prompt() (Dialogfenster für Werteingabe) releaseEvents() (Ereignisse abschließen) resizeBy() (Größe verändern mit relativen Angaben) resizeTo() (Größe verändern mit absoluten Angaben) routeEvent() (Event-Handler-Hierarchie durchlaufen) scrollBy() (Scrollen um Anzahl Pixel) scrollTo() (Scrollen zu Position) setInterval() (zeitlische Anweisungsfolge setzen) setTimeout() (Timeout setzen) stop() (abbrechen)
`1.1`	frames (Frame-Fenster)
		Eigenschaften
		length (Anzahl Frames)
		Methoden
		-
`1.2`	document (Dokument im Anzeigefenster)
		Eigenschaften
		alinkColor (Farbe für Verweise beim Anklicken) bgColor (Hintergrundfarbe) charset (verwendeter Zeichensatz) cookie (beim Anwender speicherbare Zeichenkette) defaultCharset (normaler Zeichensatz) fgColor (Farbe für Text) lastModified (letzte Änderung am Dokument) linkColor (Farbe für Verweise) referrer (zuvor besuchte Seite) title (Titel der Datei) URL (URL-Adresse der Datei) vlinkColor (Farbe für Verweise zu besuchten Zielen)
		Methoden
		captureEvents() (Ereignisse überwachen) close() (schließen) createAttribute() (Attributknoten erzeugen) createElement() (Elementknoten erzeugen) createTextNode() (Textknoten erzeugen) getElementById() (HTML-Elementzugriff über id-Attribut) getElementsByName() (HTML-Elementzugriff über name-Attribut) getElementsByTagName() (HTML-Elementzugriff über Elementliste) getSelection() (selektierter Text) handleEvent() (Ereignisse verarbeiten) open() (Dokument öffnen) releaseEvents() (Ereignisse abschließen) routeEvent() (Event-Handler-Hierarchie durchlaufen) write() (ins Dokumentfenster schreiben) writeln() (zeilenweise schreiben)
`1.2.1`	HTML-Elementobjekte (Alle HTML-Elemente des Dokuments)
		Alle HTML-Elemente
		a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1-h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var
`1.2.2`	node (Alle Knoten des Elementbaums)
		Eigenschaften
		attributes (Attribute) childNotes (Kindknoten) data (Zeichendaten) firstChild (erster Kindknoten) lastChild (letzter Kindknoten) nextSibling (nächster Knoten eines Typs) nodeName (Name des Knotens) nodeType (Knotentyp) nodeValue (Wert/Inhalt des Knotens) parentNode (Elternknoten) previousSibling (vorheriger Knoten eines Typs)
		Methoden
		appendChild() (Kindknoten hinzufügen) appendData() (Zeichendaten hinzufügen) cloneNode() (Knoten kopieren) deleteData() (Zeichendaten löschen) getAttribute() (Wert eines Attributknotens ermitteln) getAttributeNode() (Attributknoten ermitteln) hasChildNodes() (auf Kindknoten prüfen) insertBefore() (Knoten einfügen) insertData() (Zeichendaten einfügen) removeAttribute() (Wert eines Attributknotens löschen) removeAttributeNode() (Attributknoten löschen) removeChild() (Knoten löschen) replaceChild() (Kindknoten ersetzen) replaceData() (Zeichendaten ersetzen) setAttribute() (Wert eines Attributknotens setzen) setAttributeNode() (Attributknoten erzeugen)
`1.2.3`	all (Alle HTML-Elemente des Dokuments - Microsoft)
		Eigenschaften
		className (Style-Sheet-Klassenname eines Elements) dataFld (Datenfeld bei Datenanbindung) dataFormatAs (Datentyp bei Datenanbindung) dataPageSize (Anzahl Datensätze bei Datenanbindung) dataSrc (Datenquelle bei Datenanbindung) id (id-Name eines Elements) innerHTML (Inhalt eines Elements als HTML) innerText (Inhalt eines Elements als Text) isTextEdit (Editierbarkeit eines Elements) lang (Sprache eines Elements) language (Scriptsprache für ein Element) length (Anzahl Elemente) offsetHeight (Höhe eines Elements) offsetLeft (Linkswert der linken oberen Elementecke) offsetParent (Elternelement-Position) offsetTop (Obenwert der linken oberen Elementecke) offsetWidth (Breite eines Elements) outerHTML (Elementinhalt plus äußeres HTML) outerText (Elementinhalt plus äußerem Text) parentElement (Elternelement) parentTextEdit (Editierbarkeit des Elternelements) recordNumber (Datensatznummer bei Datenanbindung) sourceIndex (wie vieltes Element) tagName (HTML-Tag des Elements) title (Titel des Elements)
		Methoden
		click() (Element anklicken) contains() (Zeichenkette in Element enthalten) getAttribute() (Attribut in einem Element ermitteln) insertAdjacentHTML() (Element einfügen) insertAdjacentText() (Text einfügen) removeAttribute() (Attribut aus Element entfernen) scrollIntoView() (zu Element scrollen) setAttribute() (Attribut eines Elements einfügen)
`1.2.3.1`	style (CSS-Attribute von HTML-Elementen)
		Eigenschaften
		-
		Methoden
		getAttribute() (Style-Sheet-Angabe ermitteln) removeAttribute() (Style-Sheet-Angabe entfernen) setAttribute() (Style-Sheet-Angabe einfügen)
`1.2.4`	anchors (Verweisanker im Dokument)
		Eigenschaften
		name (Name des Verweisankers) length (Anzahl der Verweisanker) text (Text des Verweisankers) x (horizontale Position des Verweisankers) y (vertikale Position des Verweisankers)
		Methoden
		-
`1.2.5`	applets (Java-Applets im Dokument)
		Eigenschaften
		length (Anzahl Java-Applets)
		Methoden
		-
`1.2.6`	forms (Formulare im Dokument)
		Eigenschaften
		action (Empfängeradresse bei Absenden) encoding (Kodierungstyp) length (Anzahl Formulare in Datei) method (Übertragungsmethode) name (Formularname) target (Zielfenster für CGI-Antworten)
		Methoden
		handleEvent() (Ereignis verarbeiten) reset() (Formulareingaben löschen) submit() (Formular abschicken)
`1.2.6.1`	elements (Formularelemente eines Formulars)
		Eigenschaften
		checked (Angekreuzt) defaultChecked (vorangekreuzt) defaultValue (voreingegebener Wert) form (Name des zugehörigen Formulars) name (Elementname) type (Elementtyp) value (Elementwert/-inhalt)
		Methoden
		blur() (Element verlassen) click() (Element anklicken) focus() (auf Element positionieren) handleEvent() (Ereginis verarbeiten) select() (Text selektieren)
`1.2.6.1.1`	options (Optionen einer Auswahlliste eines Formulars)
		Eigenschaften
		defaultSelected (voreingestellte Auswahl) length (Anzahl der Auswahlmöglichkeiten) selected (aktuelle Auswahl) selectedIndex (Index der aktuellen Auswahl) text (Auswahltext) value (Auswahlwert)
		Methoden
		-
`1.2.7`	images (Grafikreferenzen im Dokument)
		Eigenschaften
		border (Rahmen) complete (Ladezustand) height (Höhe) hspace (horizontaler Abstand) length (Anzahl Grafiken) lowsrc (Vorschaugrafik) name (Name) src (Grafikdatei) vspace (vertikaler Abstand) width (Breite)
		Methoden
		handleEvent() (Ereignis verarbeiten)
`1.2.8`	embeds (Multimedia-Referenzen im Dokument)
		Eigenschaften
		height (Höhe des eingebetteten Objekts) hspace (horizontaler Abstand des eingebetteten Objekts) length (Anzahl eingebetteter Objekte) name (Name des eingebetteten Objekte) src (Quelle des eingebetteten Objekts) width (Breite des eingebetteten Objekts) type (Mimetype des eingebetteten Objekts) vspace (vertikaler Abstand des eingebetteten Objekts)
		Methoden
		play() stop()
`1.2.9`	layers (Layer im Dokument - Netscape)
		Eigenschaften
		above (oberhalb liegender Layer) background (Hintergrundbild eines Layers) bgColor (Hintergrundfarbe eines Layers) below (unterhalb liegender Layer) clip (Anzeigebereich eines Layers) document (document-Objekt eines Layers) left (Links-Wert der linken oberen Ecke relativ) length (Anzahl Layer) name (Name eines Layers) pageX (Links-Wert der linken oberen Ecke absolut) pageY (Oben-Wert der linken oberen Ecke absolut) parentLayer (Objekt des Eltern-Layers) siblingAbove (Objekt des oberhalb liegenden Layers) siblingBelow (Objekt des unterhalb liegenden Layers) src (Externe Datei eines Layers) top (Oben-Wert der linken oberen Ecke relativ) visibility (Sichtbarkeit eines Layers) zIndex (Schichtposition eines Layers)
		Methoden
		captureEvents() (Ereignisse überwachen) handleEvent() (Ereignisse behandeln) load() (externe Datei laden) moveAbove() (über einen anderen Layer legen) moveBelow() (unter einen anderen Layer legen) moveBy() (bewegen um Anzahl Pixel) moveTo() (bewegen zu Position relaitv) moveToAbsolute() (bewegen zu Position absolut) releaseEvents() (Ereignisüberwachung beenden) resizeBy() (Breite und Höhe verändern um Anzahl Pixel) resizeTo() (Breite und Höhe auf Anzahl Pixel setzen) routeEvent() (Event-Handler-Hierarchie durchlaufen)
`1.2.10`	links (Verweise im Dokument)
		Eigenschaften
		name (Name des Verweises) length (Anzahl Verweise) target (Zielfenster des Verweises) text (Text des Verweises) x (horizontale Position des Verweises) y (vertikale Position des Verweises)
		Methoden
		-
`1.3`	event (Anwenderereignisse)
		Eigenschaften
		altKey, ctrlKey, shiftKey (Sondertasten/Microsoft) clientX, clientY (Bildschirmkoordinaten/Microsoft) keyCode (Tastaturcode/Microsoft) layerX, layerY (objekt-relative Koordinaten/Netscape) modifiers (Sondertasten/Netscape) offsetX, offsetY (objekt-relative Koordinaten/Microsoft) pageX, pageY (fenster-relative Koordinaten/Netscape) screenX, screenY (Bildschirmkoordinaten/Netscape) which (Tastatur-/Maustastencode/Netscape) type (Art des Ereignisses/Netscape) x,y (Elternelement-relative Koordinaten/Microsoft)
		Methoden
		-
`1.4`	history (besuchte Seiten)
		Eigenschaften
		length (Anzahl besuchter Seiten)
		Methoden
		back() (zurückspringen) forward() (vorwärtsspringen) go() (zu URI in History springen)
`1.5`	location (URIs)
		Eigenschaften
		hash (Ankername innerhalb eines URI) host (Domain-Name innerhalb eines URI) hostname (Domain-Name innerhalb eines URI) href (URI / Verweis zu URI) pathname (Pfadname innerhalb eines URI) port (Portangabe innerhalb eines URI) protocol (Protokollangabe innerhalb eines URI) search (Parameter innerhalb eines URI)
		Methoden
		reload() (neu laden) replace() (History-Eintrag überschreiben)
`2`	Array (Ketten von Variablen)
		Eigenschaften
		assoziative Arrays (Arrays mit Zeichenketten als Schlüssel) length (Anzahl Elemente)
		Methoden
		concat() (Arrays verketten) join() (Array in Zeichenkette umwandeln) pop() (letztes Array-Element löschen) push() (neue Array-Elemente anhängen) reverse() (Elementreihenfolge umkehren) shift() (Erstes Array-Element entfernen) slice() (Teil-Array extrahieren) splice() (Elemente löschen und hinzufügen) sort() (Array sortieren) unshift() (Elemente am Array-Anfang einfügen)
`3`	Boolean (Ja-Nein-Variablen)
		Eigenschaften
		-
		Methoden
		-
`4`	Date (Datum und Uhrzeit)
		Eigenschaften
		-
		Methoden
		getDate() (Monatstag ermitteln) getDay() (Wochentag ermitteln) getFullYear() (volles Jahr ermitteln) getHours() (Stundenteil der Uhrzeit ermitteln) getMilliseconds() (Millisekunden ermitteln) getMinutes() (Minutenteil der Uhrzeit ermitteln) getMonth() (Monat ermitteln) getSeconds() (Sekundenteil der Uhrzeit ermitteln) getTime() (Zeitpunkt ermitteln) getTimezoneOffset() (Zeitzonenabweichung der Lokalzeit ermitteln) getUTCDate() (Monatstag von UTC-Zeit ermitteln) getUTCDay() (Wochentag von UTC-Zeit ermitteln) getUTCFullYear() (volles Jahr von UTC-Zeit ermitteln) getUTCHours() (Stundenteil der UTC-Uhrzeit ermitteln) getUTCMilliseconds() (Millisekundenteil der UTC-Uhrzeit ermitteln) getUTCMinutes() (Minutenteil der UTC-Uhrzeit ermitteln) getUTCMonth()(Monat von UTC-Uhrzeit ermitteln) getUTCSeconds()(Sekundenteil der UTC-Uhrzeit ermitteln) getYear() (Jahr ermitteln) parse() (Millisekunden seit dem 1.1.1970 ermitteln) setDate() (Monatstag setzen) setFullYear() (volles Jahr setzen) setHours() (Stunden der Uhrzeit setzen) setMilliseconds() (Millisekunden setzen) setMinutes() (Minuten der Uhrzeit setzen) setSeconds() (Sekunden der Uhrzeit setzen) setTime() (Datum und Uhrzeit setzen) setUTCDate() (Monatstag für UTC-Zeit setzen) setUTCDay() (Wochentag für UTC-Zeit setzen) setUTCFullYear() (volles Jahr für UTC-Zeit setzen) setUTCHours() (Stunden der UTC-Zeit setzen) setUTCMilliseconds() (Millisekunden der UTC-Zeit setzen) setUTCMinutes() (Minuten der UTC-Zeit setzen) setUTCMonth() (Monat für UTC-Zeit setzen) setUTCSeconds() (Sekunden der UTC-Zeit setzen) setYear() (Datum und Uhrzeit setzen) toGMTString() (Zeitpunkt in GMT-Format konvertieren) toLocaleString() (Zeitpunkt in lokales Format konvertieren) UTC() (GMT-Zeit seit dem 1.1.1970 ermitteln)
`5`	Function (JavaScript-Funktionen)
		Eigenschaften
		arguments (Argumentnamen-Array) arity (Anzahl Argumente) caller (Namen der aufrufenden Funktion)
		Methoden
		-
`6`	Math (Berechnungen)
		Eigenschaften
		E (Eulersche Konstante) LN2 (natürlicher Logarithmus von 2) LN10 (natürlicher Logarithmus von 10) LOG2E (konstanter Logarithmus von 2) LOG10E (konstanter Logarithmus von 10) PI (Konstante PI) SQRT1_2 (Konstante für Quadratwurzel aus 0,5) SQRT2 (Konstante für Quadratwurzel aus 2)
		Methoden
		abs() (positiver Wert) acos() (Arcus Cosinus) asin() (Arcus Sinus) atan() (Arcus Tangens) ceil() (nächsthöhere ganze Zahl) cos() (Cosinus) exp() (Exponentialwert) floor() (nächstniedrigere ganze Zahl) log() (Anwendung des natürlichen Logarithmus) max() (größere von zwei Zahlen) min() (kleinere von zwei Zahlen) pow() (Zahl hoch Exponent) random() (0 oder 1 per Zufall) round() (kaufmännische Rundung einer Zahl) sin() (Sinus) sqrt() (Quadratwurzel) tan() (Tangens)
`7`	navigator (Browser-Informationen)
		Eigenschaften
		appCodeName (Spitzname des Browsers) appName (offizieller Name des Browsers) appVersion (Browser-Version) cookieEnabled (Cookies erlaubt) language (Browser-Sprache) platform (Plattform, auf der der Browser läuft) userAgent (HTTP-Identifikation des Browsers)
		Methoden
		javaEnabled() (Java-Verfügbarkeit überprüfen)
`7.1`	mimeTypes (MimeType-Informationen)
		Eigenschaften
		description (Beschreibung eines Mime-Types) enabledPlugin (Plugin vorhanden) length (Anzahl Mime-Typen) suffixes (Dateiendungen) type (Mime-Type)
		Methoden
		-
`7.2`	plugins (installierte Plugins)
		Eigenschaften
		description (Beschreibung eines Plugins) filename (Dateiname eines Plugins) length (Anzahl Plugins) name (Produktname eines Plugins)
		Methoden
		-
`8`	Number (numerische Werte)
		Eigenschaften
		MAX_VALUE (größte speicherbare Zahl) MIN_VALUE (kleinste speicherbare Zahl) NaN (keine gültige Zahl) NEGATIVE_INFINITY (Zahl zu klein) POSITIVE_INFINITY (Zahl zu groß)
		Methoden
		toExponential() toFixed() toPrecision() toString()
`9`	RegExp (reguläre Ausdrücke)
		Eigenschaften
		$[1..9] (geklammerte Unterausdrücke)
		Methoden
		exec() (Regulären Ausdruck anwenden) test() (Regulären Ausdruck probehalber anwenden)
`10`	Screen (Bildschirm-Informationen)
		Eigenschaften
		availHeight (verfügbare Höhe) availWidth (verfügbare Breite) colorDepth (Farbtiefe) height (Höhe) pixelDepth (Farbauflösung) width (Breite)
		Methoden
		-
`11`	string (Zeichenketten)
		Eigenschaften
		length (Anzahl Zeichen)
		Methoden
		anchor() (Verweisanker erzeugen) big() (großen Text erzeugen) blink() (blinkenden Text erzeugen) bold() (fetten Text erzeugen) charAt() (Zeichen an einer Position ermitteln) charCodeAt() (Latin-1-Codewert an einer Position) concat() (Zeichenketten zusammenfügen) fixed() (Teletyper-Text erzeugen) fontcolor() (Schriftfarbe erzeugen) fontsize() (Schriftgröße erzeugen) fromCharCode() (Latin-1-Zeichenkette erzeugen) indexOf() (Position eines Zeichens ermitteln) italics() (kursiven Text erzeugen) lastIndexOf() (letzte Position eines Zeichens ermitteln) link() (Verweis erzeugen) match() (Regulären Ausdruck anwenden) replace() (Regulären Ausdruck anwenden und ersetzen) search() (Suchen mit Regulärem Ausdruck) slice() (Teil aus Zeichenkette extrahieren) small() (kleinen Text erzeugen) split() (Zeichenkette aufsplitten) strike() (durchgestrichenen Text erzeugen) sub() (tiefgestellten Text erzeugen) substr() (Teilzeichenkette ab Position ermitteln) substring() (Teilzeichenkette ermitteln) sup() (hochgestellten Text erzeugen) toLowerCase() (alles klein schreiben) toUpperCase() (alles groß schreiben)

Ereignisse von HTML-Objekten

Ereignis	Bedeutung
`onAbort`	`Abbruch vor vollständigem Laden für Bilder (<img> -tag)`
`onBlur`	`Verlassen eines Seitenelementes (normalerweise durch Aktivieren eines anderen Seitenelementes) vorwiegend für Formularelemente wie Textfelder und Buttons (<textarea>, <input>, <select>, <button> -tags), aber auch <a>, <area>, <label> -tags`
`onChange`	`Änderung für Formularelemente (<textarea>, <input>, <select> -tags)`
`onClick`	`Click auf ein Seitenelement für alle sichtbaren Seitenelemente`
`onDblClick`	`Doppelclick auf ein Seitenelement für alle sichtbaren Seitenelemente`
`onError`	`Fehler beim Laden für Bilder (<img>-tag)`
`onFocus`	`Aktivieren eines Seitenelementes vorwiegend für Formularelemente wie Textfelder und Buttons (<textarea>, <input>, <select>, <button> -tags), aber auch <a>, <area>, <label> -tags`
`onKeyDown`	`Hereindrücken einer Taste auf der Tastatur für alle Seitenelemente, die sich aktivieren lassen, im aktivierten Zustand`
`onKeyPress`	`erfolgter Tastendruck (drücken und loslassen) für alle Seitenelemente, die sich aktivieren lassen im aktivierten Zustand`
`onKeyUp`	`Loslassen einer Taste auf der Tastatur für alle Seitenelemente, die sich aktivieren lassen im aktivierten Zustand`
`onLoad`	`erfolgtes Laden einer Seite für Seiten (<body>, <frameset> -tags)`
`onMouseDown`	`Hereindrücken einer Maustaste über einem Seitenelement für alle sichtbaren Seitenelemente`
`onMouseMove`	`Bewegung des Mauszeigers unabhängig von Maustasten für alle Seitenelemente, die sich aktivieren lassen im aktivierten Zustand`
`onMouseOut`	`Mauszeiger verläßt den Anzeigebereich eines Seitenelementes für alle sichtbaren Seitenelemente`
`onMouseOver`	`Mauszeiger bewegt sich auf den Anzeigebereich eines Seitenelementes für alle sichtbaren Seitenelemente`
`onMouseUp`	`Loslassen einer Maustaste über einem Seitenelement für alle sichtbaren Seitenelemente`
`onReset`	`Zurücksetzen eines Formulars Formulare (<form> -tag)`
`onSelect`	`Markieren von Text Text enthaltende Elemente von Formularen (<textarea>, <input> -tags)`
`onSubmit`	`Senden eines ausgefüllten Formulares Formulare (<form> -tag)`
`onUnLoad`	`Verlassen einer Seite für Seiten (<body>, <frameset> -tags)`
`href`	`Aktivieren eines Verweises Verweise (<a> -tag) Dieses Ereignis stellt eine Sonderform dar, da es nicht hauptsächlich für Ausführung von Skriptbefehlen gedacht ist, sondern normalerweise andere HTML-Seiten lädt. Die Notation der Befehlszeile weicht daher von der anderer Eventhandler ab. Dem Befehl muß immer der URL-Bezeichner "javascript:" vorangestellt werden: <a href="javascript: Befehl">`

Syntax regular expression (reguläre Ausdrücke)

Bestandteil	Beispiel	Beschreibung
	`/aus/`	findet "aus", und zwar in "aus", "Haus", "auserlesen" und "Banause".
`^`	`/^aus/`	findet "aus" am Anfang des zu durchsuchenden Wertes, also in "aus" und "auserlesen", sofern das die ersten Wörter im Wert sind.
`$`	`/aus$/`	findet "aus" am Ende des zu durchsuchenden Wertes, also in "aus" und "Haus", sofern das die letzten Wörter im Wert sind.
`*`	`/aus*/`	findet "aus", "auss" und "aussssss", also das letzte Zeichen vor dem Stern 0 oder beliebig oft hintereinander wiederholt.
`+`	`/aus+/`	findet "auss" und "aussssss", also das letzte Zeichen vor dem Stern mindestens einmal oder beliebig oft hintereinander wiederholt.
`.`	`/.aus/`	findet "Haus" und "Maus", also ein beliebiges Zeichen an einer bestimmten Stelle.
`.+`	`/.+aus/`	findet "Haus" und "Kehraus", also eine beliebige Zeichenfolge an einer bestimmten Stelle. Zusammensetzung aus beliebiges Zeichen und beliebig viele davon.
`\b`	`/\baus\b/`	findet "aus" als einzelnes Wort. \b bedeutet eine Wortgrenze.
`\B`	`/\Baus\B/`	findet "aus" nur innerhalb von Wörtern, z.B. in "hausen" oder "Totalausfall". \B bedeutet keine Wortgrenze.
`\d`	`/\d.+\B/`	findet eine beliebige ganze Zahl. \d bedeutet eine Ziffer (0 bis 9)
`\D`	`/\D.+/`	findet "-fach" in "3-fach", also keine Ziffer.
`\f`	`/\f/`	findet ein Seitenvorschubzeichen.
`\n`	`/\n/`	findet ein Zeilenvorschubzeichen.
`\r`	`/\r/`	findet ein Wagenrücklaufzeichen.
`\t`	`/\t/`	findet ein Tabulatorzeichen.
`\v`	`/\v/`	findet ein vertikales Tabulatorzeichen.
`\s`	`/\s/`	findet jede Art von white space, also \f\n\t\v und Leerzeichen.
`\S`	`/\S.+/`	findet ein beliebiges einzelnes Zeichen, das kein white space ist, also kein \f\n\t\v und kein Leerzeichen.
`\w`	`/\w.+/`	findet alle alphanumerischen Zeichen und den Unterstrich (typische Bedingung etwa für programmiersprachengerechte selbstvergebene Namen).
`\W`	`/\W/`	findet ein Zeichen, das nicht alphanumerisch und auch kein Unterstrich ist (typisch zum Suchen nach illegalen Zeichen bei programmiersprachengerechten selbstvergebenen Namen).
`\()`	`/(aus)/`	findet "aus" und merkt es sich intern. Bis zu 9 solcher Klammern (Merkplätze) sind in einem regulären Ausdruck erlaubt.
`/.../g`	`/aus/g`	findet "aus" so oft wie es in dem gesamten zu durchsuchenden Bereich vorkommt. Die Fundstellen werden intern in einem Array gespeichert.
`/.../i`	`/aus/i`	findet "aus", "Aus" und "AUS", also unabhängig von Groß-/Kleinschreibung.
`/.../gi`	`/aus/gi`	findet "aus", so oft wie es in dem gesamten zu durchsuchenden Bereich vorkommt (g) und unabhängig von Groß-/Kleinschreibung (i).

Beispiel Array Methoden

TextBox

RadioButton

Checkbox

SelectBox

Eine SelectBox beinhaltet mehrere Einträge von denen man einen auswählen kann. Das Beispiel zeigt eine SelectBox mittels der man zu bestimmten Webseiten springen kann.

Die Funktion jump(fe) zeigt die in er SelectBox ausgewählte Seite an. Mit dem Parameter fe wird das SelectBox-Objekt übergeben. Das passiert im onChange Ereignis der SelectBox mit dem Code "return jump(this);" durch Übergabe der SelectBox mittels this.

In der Variable opt_key wird der Index des gewählten Elements der im Parameter fe übergebenen SelectBox gespeichert. In der Variable uri_val wird dann der Text der ausgewählten URL gespeichert. Dieser wird dann in der Funktion window.open() verwendet, um die ausgewählte Seite anzuzeigen.

Das folgende Beispiel zeigt, wie man zur Laufzeit Werte in eine SelectBox eintragen kann:

Formular definieren

Formular überprüfen

Kurzschreibweise einer if-Anweisung

Die im Quelltext angegebenen Kurzform var anzSekunden ="" + ((relSekunden > 9) ? relSekunden : "0" + relSekunden);

entspricht folgender Schreibweise: var anzSekunden =""; if (relSekunden > 9) anzSekunden = relSekunden; else anzSekunden = "0" + relSekunden;

Startzeit ermitteln

Funktion zur Zeitanzeige erstmals aufrufen

Zeit anzeigen und Anzeige laufend aktualisieren

Die Funktion `jump(fe)` zeigt die in er SelectBox ausgewählte Seite an. Mit dem Parameter `fe` wird das SelectBox-Objekt übergeben. Das passiert im `onChange` Ereignis der SelectBox mit dem Code `"return jump(this);"` durch Übergabe der SelectBox mittels `this`.

Die im Quelltext angegebenen Kurzform
`var anzSekunden ="" + ((relSekunden > 9) ? relSekunden : "0" + relSekunden);`

entspricht folgender Schreibweise:
`var anzSekunden ="";if (relSekunden > 9) anzSekunden = relSekunden; else anzSekunden = "0" + relSekunden;`