Benutzer:Klaus Quappe/Work

SELFHTML 8.1.2 Sprachelemente Index

Sinnvolle Vorkenntnisse zum Verständnis: HTML und Einführung in JavaScript und DOM.
Dieser Abschnitt beschreibt den grundsätzlichen Aufbau von JavaScript. Die Sprachelemente von JavaScript müssen Sie kennen und verstehen, um selbst in JavaScript programmieren zu können.

Der Abschnitt besteht aus folgenden Seiten:

• Doku:JavaScript/Sprachelemente
• Doku:JavaScript/Sprachelemente/Allgemeine Regeln für JavaScript
• Doku:JavaScript/Sprachelemente/Variablen und Werte
• Doku:JavaScript/Sprachelemente/Objekte, Eigenschaften und Methoden
• Doku:JavaScript/Sprachelemente/Funktionen
• Doku:JavaScript/Sprachelemente/Steuerzeichen und besondere Notationen
• Doku:JavaScript/Sprachelemente/Operatoren
• Doku:JavaScript/Sprachelemente/Bedingte Anweisungen (if-else/switch)
• Doku:JavaScript/Sprachelemente/Schleifen (while/for/do-while)
• Doku:JavaScript/Sprachelemente/Reservierte Wörter
• Doku:JavaScript/Sprachelemente/Event-Handler

Allgemeine Regeln für JavaScript

Anweisungen notieren

JavaScript besteht letztendlich aus einer kontrollierten Anordnung von Anweisungen. Das sind Befehle, die der JavaScript-Interpreter des WWW-Browsers bewertet und in Maschinencode umsetzt, der auf dem Rechner des Anwenders ausführbar ist.

Es gibt einfache und komplexere Anweisungen.

1

Zahl = 42;

2

Quadrat = Zahl * Zahl;

3

if (Zahl > 1000) Zahl = 0;

4

alert("Das Quadrat von " + Zahl + " = " + Ergebnis);

Eine Anweisung in JavaScript besteht immer aus einem Befehl, der mit einem Strichpunkt ; oder einem Zeilenumbruch abgeschlossen wird. In neueren Netscape-Dokumentationen zu JavaScript wird der Strichpunkt am Ende von einfachen Anweisungen zwar häufig weggelassen, aber um unnötige Fehler zu vermeiden ist es ratsam, sich von vornherein anzugewöhnen, alle Anweisungen auf diese Weise abzuschließen.

Eine Anweisung ist zum Beispiel:

wenn Sie einer Seite Variablen einen Wert zuweisen, wie in Beispiel 1. wenn Sie mit Variablen oder Werten eine Operation durchführen, wie in Beispiel 2. wenn Sie einen Befehl nur unter bestimmten Bedingungen ausführen, wie in Beispiel 3 (siehe hierzu die Abschnitte über Seite bedingte Anweisungen und über Seite Schleifen).

wenn Sie eine Seite selbst definierte Funktion oder eine Objektmethode aufrufen, bzw. wenn Sie eine Objekteigenschaft auslesen oder ändern (siehe hierzu den Abschnitt Seite Objekte, Eigenschaften und Methoden), wie in Beispiel 4.

Anweisungsblöcke notieren

Ein Anweisungsblock besteht aus einer oder mehreren Anweisungen, die innerhalb einer übergeordneten Anweisung oder innerhalb einer Funktion stehen. So können Anweisungsblöcke beispielsweise unterhalb einer Seite bedingten Anweisung oder einer Seite Schleife stehen. Auch alle Anweisungen, die innerhalb einer Seite selbst definierten Funktion stehen, bilden einen Anweisungsblock.

1

if (Zahl > 1000) { Zahl = 0; Neustart(); }

2

while (i <= 99) { Quadrat(i); i = i + 1; }

3

function SageQuadrat (x) { var Ergebnis = x * x; alert(Ergebnis); }

4

function SagEinmaleins (x) { var Ergebnis = x * x; if(Ergebnis > 100) { Ergebnis = 0; Neustart(); } alert(Ergebnis); }

Ein Anweisungsblock wird durch eine öffnende geschweifte Klammer { begonnen und durch eine schließende geschweifte Klammer } beendet. Sie können die geschweiften Klammern jeweils in eine eigene Zeile schreiben, wie in den obigen Beispielen. Es ist aber auch erlaubt, die Klammern in derselben Zeile zu notieren wie die Anweisungen.

Bei bedingten Anweisungen (wie in Beispiel 1) oder bei Schleifen (wie in Beispiel 2) müssen Sie solche Anweisungsblöcke notieren, sobald mehr als eine Anweisung von der Bedingung oder der Schleifenbedingung abhängig ausgeführt werden soll. Bei Funktionen (wie in Beispiel 3) müssen Sie Anfang und Ende der Funktion durch geschweifte Klammern markieren. Alles, was innerhalb der Funktion steht, ist daher ein Anweisungsblock.

Anweisungsblöcke können auch verschachtelt sein, wie in Beispiel 4 oben.

Selbstvergebene Namen

An vielen Stellen in JavaScript müssen Sie selbst Namen vergeben, zum Beispiel für Seite selbst definierte Funktionen, Seite eigene Objekte oder Seite Variablen.

Beispiel

<html> <head> <title> Test </title> <script type="text/javascript"> function Schlaue_Frage () { var i = 1; var Eingabe = ""; while (Eingabe != "SELFHTML" && i <= 3) { Eingabe = window.prompt("Wie heißt diese Dokumentation?", ""); i++; } } </script> </head> <body> <a href="javascript:Schlaue_Frage()">wollen Sie eine Frage beantworten?</a> </body> </html>

Im Beispiel ist in einem Seite JavaScript-Bereich eine Funktion mit Namen Schlaue_Frage notiert. Darin werden zwei Variablen mit den Namen i und Eingabe deklariert und verwendet. Das Beispiel ruft beim Anklicken des HTML-Verweises die Funktion Schlaue_Frage auf. Darin wird ein Dialogfenster ausgegeben, in dem der Anwender bis zu dreimal auf die Frage antworten kann, wie dieses Dokument heißt. Namen vergeben müssen Sie also recht häufig in JavaScript.

Beachten Sie: Bei selbst vergebenen Namen gelten folgende Regeln:

sie dürfen keine Leerzeichen enthalten sie dürfen nur aus Buchstaben und Ziffern bestehen - das erste Zeichen muss ein Buchstabe sein; es sind Groß- und Kleinbuchstaben erlaubt. Groß- und Kleinschreibung werden unterschieden! sie dürfen keine deutschen Umlaute oder scharfes S enthalten sie dürfen als einziges Sonderzeichen den Unterstrich "_" enthalten sie dürfen nicht mit einem Seite reservierten Wort identisch sein.

Vergeben Sie sprechende Namen, die Ihnen auch ein halbes Jahr, nachdem Sie das Script geschrieben haben, noch signalisieren, welche Bedeutung sie haben. Es dürfen ruhig auch deutschsprachige Wörter sein, solange die genannten Regeln eingehalten werden.

Kommentare in JavaScript

Bei komplexeren Programmteilen können Sie Kommentare benutzen, um einzelne Anweisungen zu erklären. Auch wenn Sie Ihre Copyright-Angaben innerhalb eines selbst geschriebenen JavaScript-Codes unterbringen wollen, können Sie dies mit Hilfe eines Kommentars tun. Kommentare werden vom JavaScript-Interpreter des WWW-Browsers ignoriert.

Beispiel

while (i <= 99) { Quadrat = i * i; /* solange i kleiner gleich 99, Quadrat von i bilden */ i = i + 1; // i um eins erhoehen, damit es irgendwann 99 ist }

Einen wahlweise ein- oder mehrzeiligen Kommentar leiten Sie mit /*, also einem Schrägstrich, gefolgt von einem Sternzeichen, ein. Mit der umgekehrten Folge */, also einem Sternzeichen, gefolgt von einem Schrägstrich, beenden Sie den Kommentar. Einen einzeiligen Kommentar starten Sie mit der Zeichenfolge //. Der Browser ignoriert dann den nachfolgenden Text bis zum nächsten Zeilenende.

Beachten Sie:

Variablen und Werte

Variablen definieren

Variablen sind Speicherbereiche, in denen Sie Daten, die Sie im Laufe Ihrer Programmprozeduren benötigen, speichern können. Der Inhalt, der in einer Variablen gespeichert ist, wird als "Wert" bezeichnet. Sie können den Wert einer Variablen jederzeit ändern. Um mit Variablen arbeiten zu können, müssen Sie die benötigten Variablen zuerst definieren.

Beispiel

<html> <head> <title>Test</title> </head> <body> <script type="text/javascript"> var Hinweis = "Gleich werden Quadratzahlen ausgegeben"; alert(Hinweis); function SchreibeQuadrate () { var SinnDesLebens = 42; var i, x; var Satzteil = "Das Quadrat von "; for (i = 1; i <= SinnDesLebens; ++i) { x = i * i; document.write(Satzteil + i + " ist " + x + "<br>"); } } SchreibeQuadrate(); </script> </body> </html>

Das Beispiel gibt beim Aufruf der Seite eine Meldung aus, dass gleich Quadratzahlen ausgegeben werden. Bestätigt der Anwender das Meldungsfenster, werden die Quadrate der Zahlen von 1 bis 42 ausgegeben.

Es gibt globale Variablen und lokale Variablen. Eine lokale Variable erhalten Sie durch die Deklaration der Variablen mit var innerhalb einer Seite Funktion. Im obigen Beispiel sind die Variablen SinnDesLebens, i, x und Satzteil innerhalb der Funktion SchreibeQuadrate() 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 übergeben 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 Sie innerhalb von Funktionen Variablen ohne das Schlüsselwort var deklarieren, dann sind diese Variablen global.

Jede Variablendeklaration wird mit einem Strichpunkt abgeschlossen, da sie eine ganz normale Seite 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 notieren Sie hinter dem Variablennamen ein Istgleichzeichen und dahinter den Wert, den Sie der Variablen zuweisen wollen.

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

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. Sie könnten z.B. eine Variable Nummer = 1; und eine Variable Zeichen = "1"; definieren. Der Unterschied ist, dass Sie mit der Variablen Nummer Rechenoperationen anstellen können, mit der Variablen Zeichen nicht. Dafür können Sie mit Zeichenkettenvariablen Zeichenkettenoperationen durchführen, etwa das Extrahieren einer Teilzeichenkette, was mit numerischen Variablen nicht möglich ist.

Beachten Sie: Bei der Vergabe von Variablennamen gelten die Regeln für Seite selbstvergebene Namen.

Variablen in JavaScript sind nicht so streng an Typen gebunden wie in vielen anderen Programmiersprachen. Einfache Variablentypen, wie Zahlen, Zeichenketten oder Wahrheitswerte, werden lediglich nach numerischen 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 können Sie aber mit Zeichenketten, z.B. Werten aus Formularfeldern, nicht immer automatisch rechnen, sondern müssen sie vorher explizit in Zahlen umwandeln. Für die explizite Typumwandlung gibt es verschiedene Seite objektunabhängige Funktionen.

Werte von Variablen ändern

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

Beispiel

<html> <head> <title>Sinn des Lebens zum Quadrat</title> </head> <body> <script type="text/javascript"> function SchreibeTabelle () { var SinnDesLebens = 42; var i, x, y; document.write('<table border="1"><tr>'); document.write('<td bgcolor="#EEEEEE">Wert<\/td>'); document.write('<td bgcolor="#EEEEEE">Wert<sup>2<\/sup><\/td>'); document.write('<td bgcolor="#EEEEEE">Wert<sup>3<\/sup><\/td><\/tr>'); for (i=1; i <= SinnDesLebens; ++i) { x = i * i; y = i * i * i; document.write("<tr><td>" + i + "<\/td>"); document.write("<td>" + x + "<\/td>"); document.write("<td>" + y + "<\/td><\/tr>"); } document.write("<\/table>"); } SchreibeTabelle(); </script> </body> </html>

Das Beispiel und erzeugt dynamisch eine Tabelle mit 3 Spalten und 42 Zeilen plus einer Kopfzeile. In die Zellen der Tabelle werden für die Zahlen von 1 bis 42 der Quadratwert und der Kubikwert geschrieben. Zum Ausgeben dieser Tabelle benutzt das Script die Seite Methode Seite document.write.

Die Variable SinnDesLebens wird während des Programmablaufs zwar benutzt, aber ihr Wert wird nicht geändert. Die Variablen i, x und y dagegen ändern ihren Wert laufend. Das liegt daran, dass sie innerhalb einer Seite for- Schleife bei jedem Schleifendurchlauf neue Werte zugewiesen bekommen.

Die Wertzuweisung erfolgt, indem Sie den Variablennamen, dahinter ein Istgleichzeichen und dahinter den gewünschten Wert notieren. Bei dem Wert, den Sie zuweisen, können Sie anstelle einer bestimmten Zahl oder einer Zeichenkette auch Namen anderer Variablen notieren. So wird im Beispiel der Variablen x bei jedem Schleifendurchlauf als Wert das Ergebnis der mit sich selbst multiplizierten Variablen i zugewiesen und y das Ergebnis von i * i * i.

Beachten Sie:

Objekte, Eigenschaften und Methoden

Vordefinierte JavaScript-Objekte

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

Dass JavaScript eine Erweiterung von HTML darstellt, liegt vor allem an den vordefinierten Objekten, die Ihnen in JavaScript zur Verfügung stehen. Über diese vordefinierten Objekte können Sie 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 Fensterobjekt (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 Sie einzelne Felder und andere Elemente innerhalb eines Formulars ansprechen können.

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 finden Sie in der Kapitel JavaScript-Objektreferenz. Dort werden zu jedem Objekt die verfügbaren nach unten Eigenschaften und nach unten Methoden vorgestellt.

Vordefinierte JavaScript-Objekte verwenden

JavaScript-Objekte können Sie jederzeit verwenden.

Beispiel

<html> <head> <title> Test </title> </head> <body> <script type="text/javascript"> 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>

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

Zuerst muss dazu eine neue Seite 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 Ist-Gleich-Zeichen hinter dem Variablennamen. Dahinter folgt das Seite reservierte Wort new, und dahinter, durch ein Leerzeichen getrennt, der Aufruf 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.

Beachten Sie: Die einzelnen Methoden des im Beispiel verwendeten Objekts Date, wie zum Beispiel getDate(), werden bei der Referenz des Objekts Seite Date beschrieben.

Eigene Objekte definieren

Sie können eigene Objekte definieren, wenn Sie streng objektorientiert in JavaScript programmieren wollen.

Um ein eigenes Objekt anzulegen, sind zwei Schritte nötig. Zuerst müssen Sie das Objekt selbst und seine Eigenschaften "deklarieren". Im zweiten Schritt können Sie anschließend eine Instanz dieses Objekts definieren. Mit dieser Objektinstanz können Sie dann Programmprozeduren durchführen.

Beispiel

<html> <head> <title> Test </title> <script type="text/javascript"> 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()">Hintergrundfarbe wechseln</a> </body> </html>

Um ein neues Objekt und seine Eigenschaften anzulegen, müssen Sie innerhalb eines Seite JavaScript-Bereichs oder innerhalb einer Seite separaten JavaScript-Datei eine eigene Seite Funktion definieren, die so aussehen kann wie im Beispiel die Funktion Farbe(...). Der Name, den Sie der Funktion geben (im Beispiel der Name Farbe) ist zugleich der Name des Objekts, das Sie mit dieser Funktion anlegen. Als Parameter, die die Funktion erwartet, notieren Sie die Eigenschaften, die Ihr 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 Seite selbstvergebene Namen! Innerhalb der Funktion notieren Sie alle Anweisungen so wie im Beispiel gezeigt: für jede Eigenschaft, die bei den Funktionsparametern festgelegt wurde, notieren Sie eine Anweisung, beginnend mit dem Seite reservierte JavaScript Wort this, gefolgt von einem Punkt und dem Parameternamen. Dahinter notieren Sie ein Gleichheitszeichen, und hinter dem Gleichheitszeichen nochmals den Parameternamen. Am Ende jeder Anweisung muss ein Strichpunkt stehen.

Natürlich können Sie 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. Notieren Sie dazu hinter dem Eigenschaftsnamen den jeweiligen Wert der Eigenschaft.

Nachdem das Objekt angelegt ist, können Sie an anderen Stellen innerhalb Ihres JavaScripts Instanzen dieses Objekt definieren. Dies geschieht mit Hilfe einer Seite Variablen und dem reservierten 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 Gleichheitszeichen 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.

Beachten Sie: Bereits Opera 5 erlaubt das Definieren von eigenen Objekten. Das obige Beispiel wird allerdings erst im Opera 7 korrekt ausgeführt. Dies liegt daran, dass Opera erst ab Version 7 die Eigenschaft document.bgColor unterstützt.

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 Seite 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 können Sie innerhalb Ihres JavaScript-Codes jederzeit auslesen, und in vielen Fällen können Sie die Werte von Eigenschaften auch ändern. So können Sie beispielsweise dem im Browser-Fenster angezeigten Dokument einen neuen, gültigen Seite URI zuweisen. Dadurch erreichen Sie, dass der WWW-Browser einen Sprung zu der zugewiesenen Adresse so ausführt, als ob der Anwender auf einen entsprechenden Verweis klicken würde.

Beispiel

<html><head><title>Test</title></head><body> <h1>Die Seite, die Sie genau erkennt</h1> <script type="text/javascript"> 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>

Im Beispiel werden innerhalb eines Seite JavaScript-Bereichs zwei Eigenschaften des vordefinierten JavaScript- Objekts Seite navigator in zwei entsprechenden Variablen namens BrowserName und BrowserVersion gespeichert. Das navigator-Objekt stellt Ihnen ü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.

Beachten Sie: Objekteigenschaften sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter einen Punkt, und dahinter den Namen der Eigenschaft. Dabei sind keine Leerzeichen erlaubt!

Objektmethoden

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

Beispiel

<html><head><title>Geh wo hin</title></head><body> <p><a href="javascript:history.back();">Geh hin wo Du herkommst</a></p> </body> </html>

Das Beispiel enthält einen Verweis mit einer speziellen Syntax. Diese Syntax erlaubt Ihnen, beim Anklicken des Verweises JavaScript-Code aufzurufen. Im Beispiel ist das ein Aufruf der Methode back() des Objekts history. Objektmethoden sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, 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 müssen Sie dann zwischen der öffnenden und der schließenden Klammer übergeben.

Beachten Sie: Mehr zu der Aufrufsyntax bei Verweisen erfahren Sie im Abschnitt über Seite Event-Handler.

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, das 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><title>Test</title> </head> <body> <h1>Objekt-Abfrage</h1> <script type="text/javascript"> 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("Ihr Browser kennt Microsofts all-Objekt!<\/p>"); } else { document.write("Ihr Browser kennt nicht Microsofts all-Objekt.<\/p>"); } </script> </body> </html>

Mit einer Seite bedingten Anweisung if (...) können Sie überprüfen, ob ein Objekt verfügbar ist. Als Ausdruck für die Bedingung notieren Sie innerhalb der Klammern hinter if einfach das Objekt, nach dem Sie fragen. 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, können Sie dann loslegen und zum Beispiel Befehle verwenden, die dieses Objekt verwenden. In dem anderen Zweig der if-else-Abfrage können Sie 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 Seite 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 Seite document.all abgefragt, das nur einigen Browsern bekannt ist, unter anderem dem Internet Explorer. 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.

Beachten Sie:

Mehrere Anweisungen mit einem Objekt ausführen (with)

Hin und wieder kommt es vor, dass Sie mehrere Anweisungen in Folge notieren, die alle mit dem gleichen Objekt arbeiten. Für diesen Zweck können Sie, wenn Sie wollen, eine spezielle verkürzte Schreibweise verwenden.

Beispiel

<html> <head> <title> Test </title> </head><body> <script type="text/javascript"> with (document) { open(); write("<p>Diese Seite hat den Titel " + title + "<\/p>"); close(); } </script> </body> </html>

Mit with (Objektname) leiten Sie eine solche Schreibweise ein (with = mit). Da normalerweise mehrere Anweisungen folgen, die dieses Objekt verwenden, müssen Sie alle diese Anweisungen in geschweifte Klammern einschließen.

Im obigen Beispiel wird mit dem Seite 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 müssten Sie notieren: document.open() oder document.title. Durch die spezielle Syntax mit with

(document) entfällt dies.

Beachten Sie: Es ist auch möglich, untergeordnete Objekte auf diese Weise anzusprechen, z.B.:

with (document.MeinFormular.Feld_1) value = "Stefan";

Achten Sie darauf, dass die aufgerufene Eigenschaft auch tatsächlich existiert. Wenn diese fehlt, erhalten Sie 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 können Sie eine verkürzte Schreibweise benutzen.

Beispiel

<html> <head> <title> Test </title> </head><body> <form name="Eingabe"> <input type="text" name="Feld"> <input type="button" value="OK" onclick="alert(this.form.Feld.value)"> </form> </body> </html>

Mit dem Schlüsselwort this können Sie 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 Seite 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, dürfen Sie auch schreiben: alert(this.form.Feld.value)

Das Wort form ist dabei vom Seite forms-Objekt abgeleitet.

Beachten Sie:

Funktionen

Funktion definieren

Mit Hilfe von Funktionen können Sie eigene, in sich abgeschlossene JavaScript-Prozeduren programmieren, die Sie dann über den Aufruf der Funktion ausführen können. Dabei können Sie bestimmen, bei welchem Ereignis (zum Beispiel, wenn der Anwender einen Button anklickt) die Funktion aufgerufen und ihr Programmcode ausgeführt wird. JavaScript- Code, der nicht innerhalb einer Funktion steht, wird beim Einlesen der Datei vom WWW-Browser sofort ausgeführt!

Eine Funktion ist ein Seite Anweisungsblock. Sie können eigene Funktionen innerhalb eines Seite JavaScript-Bereichs oder in einer Seite separaten JavaScript-Datei definieren. An erlaubten Stellen, z.B. innerhalb der einleitenden HTML-Tags <body...> und <a href...>, oder in einem Formular-Tag wie <input...>, können Sie eine solche selbst definierte Funktion dann mit Hilfe eines Seite Event-Handlers aufrufen. Oder Sie rufen eine Funktion innerhalb einer anderen Funktion auf.

Beispiel einer JavaScript-Funktion:

Beispiel

function PrimzahlCheck (Zahl) { if (Zahl >= 2) { var Grenzzahl = Zahl / 2; var Check = 1; for (var i = 2; i <= Grenzzahl; i++) if (Zahl % i == 0) { alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i); Check = 0; } if (Check == 1) alert(Zahl + " ist eine Primzahl!"); } else { alert("Bitte geben Sie eine natürliche Zahl größer als 1 ein!"); } }

Mit dem Schlüsselwort function leiten Sie die Definition einer Funktion ein. Dahinter folgt, durch ein Leerzeichen getrennt, ein frei wählbarer Funktionsname, im Beispiel: PrimzahlCheck. Vergeben Sie einen Funktionsnamen, der das, was die Funktion leistet, ungefähr beschreibt. Beachten Sie dabei die Regeln für Seite selbst vergebene Namen.

Unmittelbar hinter dem Funktionsnamen folgt eine öffnende Klammer. Wenn die Funktion keine Parameter erwarten soll, notieren Sie dahinter sofort wieder eine schließende Klammer. Wenn die Funktion Parameter übergeben bekommen soll, notieren Sie innerhalb der Klammer die Namen der Parameter. Die Namen der Parameter sind frei wählbar. Bei den Parameternamen gelten die gleichen Regeln wie beim Funktionsnamen. Mehrere Parameter werden durch Kommata voneinander getrennt. Im obigen Beispiel erwartet die Funktion PrimzahlCheck einen Parameter Zahl.

Der gesamte Inhalt der Funktion wird in geschweifte Klammern { und } eingeschlossen. Diese Klammern dürfen niemals fehlen!

Die Anweisungen innerhalb der Funktion können sehr unterschiedlicher Natur sein. Da können Sie z.B. Seite Objekte manipulieren, übergebene Parameter verarbeiten und ändern, Berechnungen anstellen usw. Sie können innerhalb von Funktionen auch andere Funktionen aufrufen. Welche Anweisungen innerhalb einer Funktion stehen, hängt davon ab, was die Funktion leisten soll. Im obigen Beispiel wird ermittelt, ob die übergebene Zahl eine Primzahl ist. Wenn es keine ist, wird für jede Zahl, durch die sie teilbar ist, eine entsprechende Meldung ausgegeben. Wenn es eine Primzahl ist, wird am Ende ausgegeben, dass es sich um eine Primzahl handelt.

Beachten Sie:

Funktion aufrufen

Sie können eine selbst definierte Funktion aufrufen, um den darin enthaltenen JavaScript-Code auszuführen.

Beispiel

<html> <head> <title>Test</title> <script type="text/javascript"> function PrimzahlCheck (Zahl) { Zahl = parseInt(Zahl, 10); if (isNaN(Zahl)) { alert("Sie müssen eine Zahl eingeben!"); return; } var Grenzzahl = Zahl / 2; var Check = 1; for (var i = 2; i <= Grenzzahl; i++) if (Zahl % i == 0) { alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i); Check = 0; } if (Check == 1) alert(Zahl + " ist eine Primzahl!"); } </script> </head> <body> <form name="PrimzahlFormular" action=""> <p>Geben Sie eine Zahl ein. Es wird geprüft, ob es sich um eine Primzahl handelt.</p> <input type="text" name="Eingabezahl"> <input type="button" value="auf Primzahl checken" onclick="PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)"> </form> </body> </html>

Das obige Beispiel zeigt eine komplette HTML-Datei. Darin ist ein JavaScript-Bereich definiert, in dem wiederum die Funktion PrimzahlCheck() definiert ist. Im Dateikörper der HTML-Datei steht ein Formular mit einem Eingabefeld und einem Button. Im Eingabefeld kann der Anwender eine Zahl eingeben. Wenn er auf den Button klickt, wird die JavaScript-Funktion aufgerufen und ermittelt, ob es sich bei der Eingabe um eine Primzahl handelt. Dazu enthält der Button den Seite Event-Handler onclick (= beim Anklicken). Dahinter wird die JavaScript-Funktion mit der eingegebenen Zahl aufgerufen. Die Funktion rufen Sie mit ihrem Funktionsnamen auf. Dahinter folgt die öffnende Klammer. Wenn die Funktion keine Parameter erwartet, notieren Sie hinter der öffnenden gleich eine schließende Klammer. Wenn die Funktion Parameter erwartet, müssen Sie für jeden Parameter einen erlaubten Wert übergeben. Im Beispiel erwartet die Funktion einen Parameter. Wenn Sie mehrere Parameter übergeben, trennen Sie diese durch Kommata.

Beachten Sie:

Funktion mit Rückgabewert und solche Funktion aufrufen

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

Beispiel

<html> <head> <title>Test</title> <script type="text/javascript"> 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> <form name="BruttoForm" action=""> <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>

Das obige Beispiel zeigt eine HTML-Datei, in deren Dateikopf ein Seite 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(...) ihr errechnetes Ergebnis an die aufrufende Instanz zurückgibt, wird in SchreibeBrutto(...) eine Seite 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.

Beachten Sie:

Vordefinierte JavaScript-Funktionen

Es gibt ein paar Funktionen, die bereits in JavaScript integriert sind. Solche Funktionen können Sie aufrufen, ohne sie selbst zu definieren.

Beispiel

<html> <head> <title>Test</title> <script type="text/javascript"> function Rechne (Operation) { var Ergebnis = eval(Operation); alert("Ergebnis: " + Ergebnis); } </script> </head> <body> <form name="Formular"> <p>Geben Sie eine Rechenaufgabe (z.B. 8*5) ein:</p> <input type="text" name="Eingabe"> <input type="button" value="OK" onclick="Rechne(document.Formular.Eingabe.value)"> </form> </body> </html>

Das obige Beispiel zeigt eine HTML-Datei mit einem Seite JavaScript-Bereich, in dem wiederum eine Funktion 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 Klick-Buttons wird die Funktion Rechne() aufgerufen. Sie erwartet 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.

Beachten Sie: Eine Übersicht aller vordefinierten JavaScript-Funktionen finden Sie im Abschnitt Seite Objektunabhängige Funktionen.

Steuerzeichen und besondere Notationen

Steuerzeichen bei Zeichenketten

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

Beispiel

<script type="text/javascript"> var Variable1 = "Hier erfolgt ein\"Anführungszeichen"; var Variable2 = "Hier erfolgt ein\\Backslash"; var Variable3 = "Hier erfolgt ein\nZeilenvorschub (Linefeed, LF)"; var Variable4 = "Hier erfolgt ein\rWagenrücklauf (Carriage Return, CR)"; var Variable5 = "Hier erfolgt ein\tTabulator"; var Variable6 = "Hier erfolgt ein\bBackspace"; var Variable7 = "Hier erfolgt ein\fSeitenvorschub (Formfeed, FF)"; </script>

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

Die Zeichenfolge \" müssen Sie notieren, wenn Sie innerhalb einer Zeichenkette ein Anführungszeichen verwenden möchten. Die Zeichenfolge \\ müssen Sie notieren, um einen einzelnen Backslash zu erhalten. Die Zeichenfolge \n ist z.B. in Seite alert-Meldungen sinnvoll, um innerhalb des auszugebenden Textes einen Zeilenumbruch einzufügen. Die Zeichenfolge \r ist in Kombination mit \n als Zeilenvorschub in DOS-Systemen vorgesehen. Ihre Verwendung in JavaScript ist auch unter Windows im Allgemeinen nicht notwendig. Die Zeichenfolge \t ist als Tabulatorzeichen z.B. sinnvoll, um etwa innerhalb einer alert(...)-Meldung tabellarische Information auszugeben. Die Zeichenfolge \b entspricht der Backspace-Taste der Tastatur und löscht das vorhergehende Zeichen in der Ausgabe.

Die Zeichenfolge \f dient bei Druckern dazu, die aktuell bedruckte Seite auszuwerfen und auf einer frischen Seite weiterzudrucken. Sie dürfte in der Praxis keinerlei Relevanz für JavaScriptanwendungen haben.

Beachten Sie:

Notation numerischer Werte

Sie können Zahlen ganz normal notieren. Beachten Sie 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

<script type="text/javascript"> var a = 1E1; var b = 1.2345E4; var c = 2e-3; </script>

Mit e oder E bestimmen Sie 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, das hinter dem e folgt.

Beachten Sie:

Operatoren

Operatorenrangfolge

Operator zur Typenbestimmung

void-Operator

Operator zum Löschen von Objekten

Zuweisungsoperator

Sie können zum Beispiel einer Variablen einen Wert zuweisen. Der Zuweisungsoperator dafür ist ein Istgleichzeichen.

Beispiel

<script type="text/javascript"> var SinnDesLebens = 42; </script>

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

Beachten Sie:

Vergleichsoperatoren

Vergleichsoperatoren brauchen Sie, wenn Sie zwei Werte vergleichen wollen, z.B. den aktuellen Inhalt einer Seite Variablen mit einem fixen Wert. Vor allem bei Seite bedingten Anweisungen und Seite Schleifen kommt das vor.

Beispiel

<script type="text/javascript"> 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>

Um abzufragen, ob zwei Werte gleich sind, notieren Sie zwei Istgleichzeichen == nebeneinander.

Um abzufragen, ob zwei Werte unterschiedlich sind, notieren Sie zwischen beiden Werten die Zeichen !=. Um abzufragen, ob ein Wert größer oder gleich ist als ein anderer, notieren Sie die Zeichen >=. Um abzufragen, ob ein Wert in jedem Fall größer ist als ein anderer, notieren Sie das Zeichen >. Um abzufragen, ob ein Wert kleiner oder gleich ist als ein anderer, notieren Sie die Zeichen <=. Um abzufragen, ob ein Wert in jedem Fall kleiner ist als ein anderer, notieren Sie das Zeichen <. Nähere Information zu der If-Abfrage erhalten Sie im Abschnitt über bedingte Anweisungen.

Ab der JavaScript-Version 1.2 können Sie 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ücksichtigen Sie bei der Verwendung dieser Operatoren, dass ältere Browser darauf mit einer Fehlermeldung reagieren.

Beachten Sie:

Berechnungsoperatoren

Um mit numerischen Werten Berechnungen durchzuführen, brauchen Sie Berechnungsoperatoren.

Beispiel

<script type="text/javascript"> 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>

Mathematische Operatoren notieren Sie mit den dafür üblichen Zeichen. Mit + notieren Sie 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 Sie z.B. 13 % 5 notieren, erhalten Sie als Ergebnis 3, weil 13 geteilt durch 5 gleich 2 Rest 3 ergibt. Diese 3 ist es, die als Ergebnis einer Modulo-Division herauskommt.

Sie können mehrere Operationen in Reihe notieren. Dabei gilt die übliche "Punkt-vor-Strich-Regel". Wenn Sie eine andere Regel erzwingen wollen, müssen Sie Klammern verwenden, so wie im vierten der obigen Beispiele.

Die besonderen Notationen, die in den obigen Beispielen vorkommen, können Sie verwenden, wenn Sie Additionen oder Subtraktionen abkürzen wollen: 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;

Beachten Sie:

Logische Operatoren

Logische Operatoren brauchen Sie, wenn Sie komplexere Bedingungen für Seite bedingte Anweisungen oder Seite Schleifen formulieren wollen.

Beispiel

<script type="text/javascript"> var PLZ = 81000; var x = 20, y = 8; var name = ""; if (PLZ >= 80000 && PLZ <= 82000) alert("Sie wohnen wohl in Muenchen oder Umgebung!"); if (x > 100 || y == 0) break; if (!name) alert("Sie haben vergessen, einen Namen einzugeben!"); </script>

Mit dem logischen Operator && verknüpfen Sie 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üpfen Sie 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.

Der logische Operator ! (engl. not) prüft, ob ein Ausdruck unwahr ist. Der Ausdruck if (!name) trifft zu, wenn name gleich null, 0, ein Leerstring oder undefiniert ist.

Beachten Sie:

Bit-Operatoren

Bit-Operatoren sind nur etwas für Profis. Um Bit-Operatoren richtig einzusetzen, müssen Sie 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

~ bitweiser Nicht-Operator, tauscht alle Nullen in Einsen und umgekehrt

Operator zur Zeichenkettenverknüpfung

Mit einem einfachen Pluszeichen + können Sie eine Zeichenkette an eine andere anhängen.

Beispiel

<script type="text/javascript"> var Vorname = "Stefan "; var Zuname = "Muenz"; var Name = Vorname + Zuname + ", der Autor dieses Dokuments"; </script>

Sie können sowohl Zeichenkettenvariablen als auch direkte Zeichenkettenangaben mit + aneinanderhängen.

Beachten Sie:

Operatorenrangfolge

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

Rangstufe: , (Aneinanderreihung)

Rangstufe: = += -= <<= >>= &= ^= |=

Rangstufe: ?: (Seite 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, können Sie die Rangfolge bei den Operatoren beeinflussen und Ausdrücke so bewerten, wie Sie es wünschen.

Beispiel

<script type="text/javascript"> var OffizielleStatistik = 3.29 * 3 + 4.71; var MeineStatistik = 3.29 * (3 + 4.71); </script>

Das Beispiel zeigt, wie Sie durch Setzen von Klammern das Ergebnis einer Rechenoperation beeinflussen können.

Beachten Sie:

Operator zur Typenbestimmung

Methoden Seite vordefinierter Objekte sind an feste Variablentypen gebunden. Bevor Sie diese verwenden können, sollten Sie im Zweifelsfall den Typ der Variable prüfen. Mit dem Operator typeof steht Ihnen ein Werkzeug zur Typenüberprüfung zur Verfügung.

Beispiel

<script type="text/javascript"> var Zahl = 2505; alert(typeof Zahl); </script>

Der Operator typeof wertet den nachfolgenden Operanden hinsichtlich seines Typs aus. Der Rückgabewert dieses Operators ist ein String, den Sie abfragen können. 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).

Beachten Sie:

void-Operator

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

Beispiel

<script type="text/javascript"> var Zahl = 2505; void Zahl++; </script>

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

Beachten Sie:

Operator zum Löschen von Objekten

Nicht mehr benötigte Objekte bzw. Objekteigenschaften werden mit dem Operator delete gelöscht. Sie können 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

<script type="text/javascript"> SinnDesLebens = 42; delete SinnDesLebens; alert(typeof SinnDesLebens); </script>

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.

Beachten Sie: In 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 Objekteigenschaften wie z.B. Math.PI können Sie diesen Operator nicht anwenden.

Bedingte Anweisungen (if-else/switch)

Wenn-Dann-Bedingungen mit "if"

Sie können die Ausführung von Anweisungen von Bedingungen abhängig machen.

Beispiel

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Passwort = Traumtaenzer) <html> <head> <title> Test </title> <script type="text/javascript"> function Geheim () { var Passwort = "Traumtaenzer"; var Eingabe = window.prompt("Bitte geben Sie das Passwort ein", ""); if (Eingabe != Passwort) { alert("Falsches Passwort!"); } else { location.href = "geheim.htm"; } } </script> </head><body onload="Geheim()"> <h1>Hier kommen Sie nur mit Passwort rein ;-)</h1> </body> </html>

Das Beispiel stellt eine einfache Passwortabfrage dar. Das Script ist in einer Seite Funktion namens Geheim() notiert, die aufgerufen wird, sobald die HTML-Datei vollständig geladen ist. Dazu ist im einleitenden <body>-Tag der Seite 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. Im anderen Fall (else), wenn Eingabe und Passwort den gleichen Wert haben, wird mit Seite location.href eine andere Seite aufgerufen, nämlich die "geschützte" Seite.

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

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

Beachten Sie: Eine Passwortabfrage wie im Beispiel stellt keine zuverlässige Möglichkeit dar, um Zugriffe auf eine Webseite zu kontrollieren. Denn das Passwort steht für jeden lesbar im Quelltext und die "geschützte" Seite kann unter Umgehung der Passwortabfrage aufgerufen werden. Verwenden Sie deshalb in der Praxis "richtige" Schutzmechanismen wie beispielsweise eine Seite Zugriffskontrolle mit .htaccess.

Einfache Entweder-Oder-Abfrage

Für einfache Entweder-Oder-Bedingungen gibt es eine spezielle Syntax, die Sie alternativ zur if/else-Anweisung verwenden können.

Beispiel

<html> <head> <title> Test </title> <script type="text/javascript"> 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> <form name="Formular"> <p>Was ist der Sinn des Lebens?</p> <input type="text" name="Eingabe" size="40"> <input type="button" value="OK" onclick="Antwort()"> </form> </body> </html>

Das Beispiel enthält eine JavaScript-Seite Funktion namens Antwort(). Aufgerufen wird diese Funktion, wenn der Anwender in dem weiter unten notierten HTML-Formular auf den Klick-Button mit der Aufschrift OK klickt, und zwar mit dem Seite 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 Seite 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-Abfrage in der Regel eine Seite 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, brauchen Sie Seite Vergleichsoperatoren.

Beachten Sie:

Fallunterscheidung mit "switch"

Mit if und else können Sie genau zwei Fälle unterscheiden. Wenn Sie feiner differenzieren, also zwischen mehreren Fällen unterscheiden wollen, können Sie zwar mehrere if-Abfragen hintereinander notieren, aber es gibt noch eine elegantere Möglichkeit: die Fallunterscheidung mit "switch". Diese Syntax, die 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

<html> <head> <title> Test </title> </head><body> <script type="text/javascript"> 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>

Mit switch leiten Sie eine Fallunterscheidung ein (switch = Schalter). Dahinter folgt, in runde Klammern eingeschlossen, eine Variable oder ein Ausdruck, für dessen aktuellen Wert Sie die Fallunterscheidung durchführen. 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 Sie abfragen möchten, werden innerhalb geschweifter Klammern notiert. Jeden einzelnen Fall leiten Sie mit case ein (case = Fall). Dahinter folgt die Angabe des Wertes, auf den Sie prüfen wollen. 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.

Beachten Sie: Wichtig ist dabei auch das Wort break am Ende jedes Falls (break = abbrechen). Wenn Sie das Wort weglassen, werden nämlich alle nachfolgenden Fälle auch ausgeführt, aber das wollen Sie ja in der Regel nicht. Für den Fall, dass keiner der definierten Fälle zutrifft, können Sie am Ende der Fallunterscheidung den Fall default: definieren. Die darunter stehenden Anweisungen werden ausgeführt, wenn keiner der anderen Fälle zutrifft.

Schleifen (while/for/do-while)

Schleifen mit "while"

Mit Hilfe von while-Schleifen können Sie Programmanweisungen solange wiederholen, wie die Bedingung, die in der Schleife formuliert wird, erfüllt ist. Solche Schleifen eignen sich dann, wenn Sie nicht wissen, wie oft die Schleife durchlaufen werden soll.

Beispiel

<html> <head> <title> Test </title> </head><body> <script type="text/javascript"> 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>

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 Seite 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, brauchen Sie Seite 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. Notieren Sie alle Anweisungen innerhalb geschweifter Klammern { und }, so wie im Beispiel (siehe auch den Abschnitt über Seite Anweisungsblöcke).

Beachten Sie: Achten Sie bei while-Schleifen immer darauf, dass es mindestens eine Möglichkeit gibt, um die Schleife nach einer angemessenen Zeit zu beenden. Andernfalls erzeugen Sie 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, brauchen Sie 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.

Weitere Möglichkeiten, um Schleifen abzubrechen, werden nach unten weiter unten beschrieben.

Schleifen mit "for"

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

Beispiel

<html> <head> <title> Test </title> </head><body> <script type="text/javascript"> var Ausgabe = ""; for (var i = 10; i <= 36; i++) Ausgabe = Ausgabe + '<span style="font-size:' + i + 'px">Schrift mit ' + i + ' Pixel Größe<\/span><br>'; document.write(Ausgabe); </script> </body> </html>

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 Kapitel 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:10px bis font-size:36px erzeugt werden. Das Ergebnis wird am Ende ausgegeben. Zum Verständnis der zusammengesetzten Teile bei Ausgabe siehe auch Seite Operator für Zeichenkettenverknüpfung. 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 für den Schleifenablauf; die Schleife wird ausgeführt, wenn und solange diese zutrifft. Dazu brauchen Sie Seite 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

<html> <head> <title> Test </title> </head><body> <script type="text/javascript"> 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>

Das Beispiel zeigt, wie Sie mit Hilfe einer for-in-Schleife einiges über die JavaScript-Fähigkeiten Ihres Browsers herausbekommen können. 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 können Sie sich mit Objektname[Eigenschaft] ausgeben lassen. Die Schleife läuft so lange, wie es verfügbare Objekteigenschaften gibt - dies bedeutet das for in.

Beachten Sie: Wenn Sie mehr als eine Anweisung von einer for-Schleifenbedingung abhängig machen wollen, müssen Sie die Anweisungen wie üblich in geschweifte Klammern einschließen. Die for-in-Schleife können Sie in Opera bis einschließlich Version 6 nur auf selbstdefinierte Objekte und Variablen anwenden. Bei vordefinierten Objekten bleibt die Schleife wirkungslos. Der Internet Explorer kennt diese Schleifenart erst ab Version 4.01. Mozilla Firefox kennt zwar die for-in-Schleife, das Beispiel bricht jedoch beim Lesen der Eigenschaft document.domConfig mit einem Zugriffsfehler ab.

Schleifen mit "do-while"

Die do-while-Schleife ist eine Variante der normalen nach oben 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 können Sie 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: <script type="text/javascript"> var x = 10; do { document.write("<br>x * x = " + (x * x)); x = x + 1; } while (x < 10); </script> Und einmal so: <script type="text/javascript"> var x = 10; while (x < 10) { document.write("<br>x * x = " + (x * x)); x = x + 1; } </script>

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.

1

<script type="text/javascript"> var i = 0; while (i < 6) { if (i == 3) break; i++; alert("i = " + i); } </script>

Mit break können Sie eine Schleife sofort beenden. Dazu müssen Sie innerhalb des Schleifenkörpers eine if-Abfrage 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.

2

<script type="text/javascript"> var i = 0; Ende: while (i < 6) { if (i == 3) { alert("Das war's, denn i ist gleich " + i); break Ende; } i++; } </script>

Dies ist eine besondere Variante von break. Sie können vor einer Schleife, auf die sich eine break-Anweisung beziehen soll, ein "Label" notieren. Das ist ein selbstvergebener Name mit einem Doppelpunkt dahinter, im Beispiel Ende:. Hinter dem Wort break können Sie dann den Namen des Labels angeben. So stellen Sie im Beispiel sicher, dass sich die break-Anweisung auf jeden Fall auf diese bestimmte while-Schleife bezieht. In einfachen Fällen wie dem obigen ist das eigentlich überflüssig. Aber behalten Sie die Möglichkeit im Auge, falls Sie einmal verschachtelte Schleifen programmieren und darin break-Anweisungen benutzen. Beachten Sie jedoch, dass diese Variante der break- Anweisung Bestandteil von JavaScript 1.2 ist und bei älteren Browsern zu einer Fehlermeldung führt.

3

<script type="text/javascript"> 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>

Mit continue erzwingen Sie 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.

Reservierte Wörter

Übersicht reservierter Wörter

JavaScript enthält eine Reihe von Schlüsselwörtern mit bestimmter Bedeutung. Diese "reservierten Wörter" sollten Sie kennen, um nicht versehentlich gleichnamige Seite Variablen oder Seite Funktionen zu definieren. Denn dies ist nicht erlaubt. Einige der reservierten Wörter der folgenden Liste sind bereits in Gebrauch, andere sind für den zukünftigen Sprachausbau von JavaScript geplant. Auch noch nicht benutzte reservierte Wörter dürfen Sie nicht als Variablen- oder Funktionsnamen verwenden.

Reserviertes Wort Erläuterung

abstract Noch nicht verwendet

boolean Noch nicht verwendet

break Als Anweisung: Abbruch in Seite Schleifen

byte Noch nicht verwendet

case Für Seite Fallunterscheidungen

catch Für Seite Fehlerbehandlung mit try..catch

char Noch nicht verwendet

class Noch nicht verwendet

const Dient zur Deklaration von Konstanten (ab JavaScript-Version 1.5)

continue Als Anweisung: Fortsetzung in Seite Schleifen

default Für Seite Fallunterscheidungen

delete Operator: Seite Objekte und Objekteigenschaften löschen

do Für Seite Schleifen mit "do-while"

double Noch nicht verwendet

else Sonst-Fall in Seite bedingten Anweisungen mit "if"

export Als Anweisung: Objekte oder Funktionen für fremde Scripts ausführbar machen

extends Noch nicht verwendet

false Boolescher Wert: falsch

final Noch nicht verwendet

finally Für Seite Fehlerbehandlung mit try..catch

float Noch nicht verwendet

for Für Seite Schleifen mit "for"

function Für Seite Funktionen

goto Noch nicht verwendet

if Für Seite bedingte Anweisungen mit "if"

implements Noch nicht verwendet

in Für Seite spezielle Schleifen mit "for"

instanceof Prüft, ob ein Objekt eine Instanz eines Prototyp-Objektes ist (ab JavaScript-Version 1.4)

int Noch nicht verwendet

long Noch nicht verwendet

native Noch nicht verwendet

new Dient zum Seite Definieren von Objekten

null Spezieller Null-Wert z.B. für Eigenschaften, die keinen Wert haben, oder als Rückgabewert einer Funktion

package Noch nicht verwendet

private Noch nicht verwendet

protected Noch nicht verwendet

public Noch nicht verwendet

return Für Seite Rückgabewerte in Funktionen

short Noch nicht verwendet

static Noch nicht verwendet

super Noch nicht verwendet

switch Für Seite Fallunterscheidungen

synchronized Noch nicht verwendet

this Für Bezug auf das Seite aktuelle Objekt

throw Als Anweisung: Nutzerdefinierte Ausnahme (ab JavaScript-Version 1.4)

throws Noch nicht verwendet

transient Noch nicht verwendet

true Boolescher Wert: wahr

try Für Seite Fehlerbehandlung mit try..catch

typeof Operator: liefert den Seite Typ eines Elementes

undefined Der Wert undefiniert. Eine Variable, die ohne eine Zuweisung deklariert wird (var variable;), erhält diesen Wert (ab JavaScript-Version 1.3)

var Für Seite Variablendefinitionen

void Operator: Seite unterdrückt Rückgabewerte

while Für Seite Schleifen mit "while"

with Um Seite mehrere Anweisungen mit einem Objekt durchzuführen

Event-Handler

Allgemeines zu Event-Handlern

onabort (bei Abbruch)

onblur (beim Verlassen)

onchange (bei erfolgter Änderung)

onclick (beim Anklicken)

ondblclick (bei doppeltem Anklicken)

onerror (im Fehlerfall)

onfocus (beim Aktivieren)

onkeydown (bei gedrückter Taste)

onkeypress (bei gedrückt gehaltener Taste)

onkeyup (bei losgelassener Taste)

onload (beim Laden einer Datei)

onmousedown (bei gedrückter Maustaste)

onmousemove (bei weiterbewegter Maus)

onmouseout (beim Verlassen des Elements mit der Maus)

onmouseover (beim Überfahren des Elements mit der Maus)

onmouseup (bei losgelassener Maustaste)

onreset (beim Zurücksetzen des Formulars)

onselect (beim Selektieren von Text)

onsubmit (beim Absenden des Formulars)

onunload (beim Verlassen der Datei)

javascript: (bei Verweisen)

Allgemeines zu Event-Handlern

Event-Handler (Ereignisbehandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Da es sich um Bestandteile handelt, die innerhalb von HTML vorkommen, hat das W3-Konsortium die Event-Handler mittlerweile auch in den HTML-Sprachstandard mit aufgenommen (siehe auch Kapitel Universalattribute: Seite Event-Handler). Dort wird auch festgelegt, in welchen HTML-Tags welcher Event-Handler vorkommen darf. Das Problem dabei ist jedoch, dass die Praxis derzeit noch stark davon abweicht - zumindest bei Netscape 4.x. Der Internet Explorer dagegen interpretiert Event-Handler seit seiner Version 4.x weitgehend so universell wie vom W3-Konsortium vorgesehen. Bei den Beschreibungen der Event-Handler auf dieser Seite wird jeweils versucht, auf die Problematik einzugehen. Letztendlich hilft aber nur: selber im Einzelfall mit mehreren verschiedenen Browsern testen und ausprobieren.

Event-Handler erkennen Sie daran, dass solche HTML-Attribute immer mit on beginnen, zum Beispiel onclick. Hinter dem Istgleichzeichen notieren Sie - in Anführungszeichen, eine JavaScript-Anweisung. Wenn Sie mehrere Anweisungen ausführen wollen, dann definieren Sie sich dazu am besten in einem JavaScript-Bereich eine Seite Funktion und rufen hinter dem Istgleichzeichen diese Funktion auf, also z.B. onclick="Umrechnen()".

Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onclick etwa für das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, in dem der Event-Handler notiert ist, ist das auslösende Element. Wenn der Event-Handler onclick beispielsweise in einem Formular-Button notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt. Das mag Ihnen jetzt selbstverständlich vorkommen. Ist es auch, solange es beispielsweise um Formular-Buttons geht. Aber nach dem erweiterten Modell von HTML 4.0 kann etwa auch ein HTML-Bereich, der mit

...

definiert wird, einen Event-Handler wie onclick enthalten.

Es wurden nur solche Event-Handler aufgenommen, die auch tatsächlich in HTML-Tags vorkommen können und im HTML-4.0 -Standard erwähnt sind (mit Ausnahme von onabort und onerror). Das sind weniger, als Netscape und der Internet Explorer kennen. Bei Netscape kommt verwirrenderweise hinzu, dass einige Event-Handler zwar so bezeichnet werden, aber eigentlich gar nicht innerhalb von HTML-Tags vorkommen können. Es ist zu hoffen, dass es hierbei in Zukunft mehr Übereinstimmungen zwischen Sprachstandards und Browser-Implementierungen geben wird.

onabort (bei Abbruch)

Ist für den Fall gedacht, dass ein Anwender im Browser den Stop-Button drückt, obwohl noch nicht alle Grafiken geladen wurden.

Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag: <img>

Beispiel

Beispiel-Seite Anzeigebeispiel: So sieht's aus (beim Aufruf sofort ESC drücken!) <html> <head> <title> Test </title> </head><body> <img src="onabort.jpg" width="400" height="600" alt="Grafik" onabort="alert('Schade, dass Sie das Bild nicht sehen wollen')"> </body> </html>

Im Beispiel wird eine Grafik in HTML referenziert. Für den Fall, dass der Anwender den Stop-Button im Browser drückt, bevor die Grafik ganz geladen ist, wird mit alert() eine Meldung ausgegeben.

Beachten Sie: Dieser Event-Handler gehört nicht zum HTML-Standard und wird von Netscape 6, Opera, Mozilla Firefox, Safari und Konqueror nicht interpretiert.

onblur (beim Verlassen)

Für den Fall, dass ein Element zuvor aktiviert war und der Anwender es jetzt verlässt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <body> <frameset> <input> <layer> <select> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <area> <button> <input> <label> <select> <textarea>

Beispiel

<html> <head> <title> Test </title> </head><body> <form name="Test" action=""> Name: <input type="text" name="Eingabe" onblur="PruefeInhalt(this.value)"><br> Geben Sie irgendetwas ein und klicken Sie dann woanders hin, um das Eingabefeld zu verlassen! </form> <script type="text/javascript"> document.Test.Eingabe.focus(); function PruefeInhalt (Feld) { if (Feld == "") { alert("Das Namensfeld muss einen Inhalt haben!"); document.Test.Eingabe.focus(); return false; } } </script> </body> </html>

Im Beispiel wird ein Formular definiert, das ein Eingabefeld enthält. Unterhalb des Formulars ist ein JavaScript- Bereich notiert. Der Bereich wird deshalb unterhalb des Formulars definiert, weil zu Beginn des Bereichs gleich eine Anweisung ausgeführt wird, die die Existenz des Formulars bereits voraussetzt. Diese Anweisung (document.Test.Eingabe.focus();) setzt den Cursor in das Eingabefeld. Dort soll der Anwender seinen Namen eingeben. Klickt er dann irgendwo anders hin, wird der Event-Handler onblur aktiv, der im HTML-Tag des Eingabefeldes notiert ist. Dabei wird die Funktion PruefeInhalt() aufgerufen, die ebenfalls in dem JavaScript-Bereich notiert ist. Diese Funktion fragt ab, ob die ihr übergebene Zeichenkette, der Inhalt des Namensfeldes, leer ist. Wenn ja, wird ein Meldungsfenster ausgegeben, und der Cursor wird wieder in das Feld positioniert.

Beachten Sie: Unter Opera 5.02 erzeugt die Verwendung dieses Beispieles eine unendliche Schleife, da die Bestätigung des Meldungsfensters ebenfalls den Event-Handler auslöst. Mit Opera 5.12 wurde dieses Problem behoben.

onchange (bei erfolgter Änderung)

Für den Fall, dass ein Element einen geänderten Wert erhalten hat.

Nach HTML 4.0 und JavaScript 1.2 (Netscape) erlaubt in folgenden HTML-Tags: <input> <select> <textarea>

Beispiel

<html> <head> <title> Test </title> </head><body> <form name="Test" action=""> <textarea rows="5" cols="40" onchange="alert(this.value)">Bearbeiten Sie diesen Text hier und klicken Sie dann woanders hin! Oder lassen Sie ihn unbearbeitet und klicken dann woanders hin!</textarea> </body> </html>

Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert. Wenn der Anwender irgendetwas in das Feld eingibt und anschließend woanders hin klickt, wird der Event-Handler onchange aktiv, der im HTML-Tag des mehrzeiligen Eingabefeldes notiert ist. Im Beispiel wird einfach der aktuelle geänderte Inhalt des Feldes in einem Meldungsfenster ausgegeben.

Beachten Sie: Dieser Event-Handler wird nicht sofort bei der Änderung eines Formularfeldes aufgerufen, sondern erst nachdem ein anderes Feld nach der Änderung angewählt wurde. Der Internet Explorer hat einen Bug, der verhindert, dass man mit onchange Änderungen bei Radiobuttons erkennen kann. Der Eventhandler wird aufgerufen, bevor die Änderung in die JavaScript-Eigenschaften übertragen wird. Verwenden Sie hierfür ggf. onclick.

onclick (beim Anklicken)

Für den Fall, dass der Anwender ein Element anklickt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <a> <area> <input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel

<html> <head> <title> Test </title> </head><body> <form name="Test" action=""> <input type="text" size="30" name="Ausgabe" readonly="readonly"><br> <input type="button" value="Letzter Update" onclick="this.form.Ausgabe.value = document.lastModified"> </form> </body> </html>

Erläuterung:

Im Beispiel wird ein Formular mit einem Eingabefeld (das jedoch auf "readonly", also nur Lesen gesetzt wird) und einem Button definiert. Der Button hat die Aufschrift "Letzter Update". Beim Anklicken des Buttons wird der Event-

Handler onclick aktiv, der im HTML-Tag des Buttons definiert ist. Im Beispiel wird daraufhin in das Eingabefeld der Zeitpunkt der letzten Änderung am Dokument geschrieben.

Beachten Sie: Konqueror 3.1 interpretiert zwar diesen Event-Handler, kann aber das Anzeigebeispiel nicht darstellen, da Seite lastModified nicht interpretiert werden kann.

ondblclick (bei doppeltem Anklicken)

Für den Fall, dass der Anwender ein Element doppelt anklickt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <a> <area> <input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel

<html> <head> <title> Test </title> </head><body> <form name="Rechnen" action=""> Wert: <input type="text" size="10" name="Wert"> <input type="button" value="Doppelklick = hoch 2" ondblclick="document.Rechnen.Wert.value = document.Rechnen.Wert.value * document.Rechnen.Wert.value"> </form> </body> </html>

Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Im Button ist der Event-Handler ondblclick notiert. Der Button reagiert daher nur auf Doppelklick. Wenn der Anwender doppelt auf den Button klickt, wird von dem Wert, den er in dem Eingabefeld eingegeben hat, das Quadrat errechnet, und das Ergebnis wird wiederum in das Eingabefeld geschrieben.

Beachten Sie: Bei Netscape-Browsern 4.x unter Macintosh ist dieser Event-Handler nicht verfügbar! Safari 1.0 erkennt diesen Event-Handler nicht an Buttons.

onerror (im Fehlerfall)

Eignet sich zum Abfangen von Fehlermeldungen und zum Ersetzen solcher Meldungen durch eigene. Beachten Sie jedoch, dass dadurch nicht die Fehler selbst beseitigt werden! onerror ist vor allem zum Handling von Fehlern beim Laden von Grafiken gedacht.

Nach JavaScript erlaubt in folgendem HTML-Tag: <img>

Beispiel

<html> <head> <title> Test </title> </head><body> <img src="gibtsnicht.gif" onerror="alert('an dieser Stelle sollte eine Grafik stehen,\n doch leider kann sie nicht angezeigt werden!')"> </body> </html>

Im Beispiel wird in einer Grafikreferenz der Event-Handler onerror notiert. Er wird dann aktiv, wenn die Grafikdatei nicht existiert oder nicht angezeigt werden kann. Im Beispiel wird dann ein entsprechendes Meldungsfenster ausgegeben.

Beachten Sie:

onfocus (beim Aktivieren)

Tritt ein, wenn der Anwender ein Element aktiviert.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <body> <frame> <input> <layer> <select> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <area> <button> <input> <label> <select> <textarea>

Beispiel

<html> <head> <title> Test </title> </head><body> <form name="Test" action=""> <input type="text" size="30" onfocus="this.value = 'Hier Ihren Namen eingeben'"><br> <input type="text" size="30" onfocus="this.value = 'Hier Ihren Wohnort eingeben'"><br> <input type="text" size="30" onfocus="this.value = 'Hier Ihr Alter eingeben'"><br> </form> </body> </html>

In dem Beispiel wird ein Formular definiert, das drei Eingabefelder enthält. Da die Felder unbeschriftet sind, hat der Anwender keine Ahnung, was in die einzelnen Felder eingeben kann. Bewegt er den Cursor aus Neugier doch in eines der Eingabefelder, wird der Event-Handler onfocus des jeweiligen Feldes aktiv. Dabei wird in das jeweilige Feld eine Aufforderung geschrieben, was in dem Feld einzugeben ist.

Beachten Sie:

onkeydown (bei gedrückter Taste)

Tritt ein, wenn der Anwender, während er ein Element aktiviert hat, eine Taste drückt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel

<html> <head> <title> Test </title> <script type="text/javascript"> function Aktualisieren () { document.Test.Kontrolle.value = document.Test.Eingabe.value.length + 1; return true; } </script> </head><body> <form name="Test" action=""> Kurzbeschreibung Ihrer Homepage (max 50 Zeichen):<br> <input type="text" name="Eingabe" size="40" onkeydown="Aktualisieren(this.value)"> <input type="text" value="0" readonly="readonly" size="3" name="Kontrolle"><br> <input type="reset"> </form> </body> </html>

Im Beispiel wird ein Formular definiert, in dem der Anwender eine Kurzbeschreibung seiner Homepage in einem Eingabefeld abliefern kann. Der Text soll maximal 50 Zeichen lang sein. Damit der Anwender nicht mitzählen muss, gibt es ein kleines Eingabefeld nebendran, in dem nach jedem Tastendruck ausgegeben wird, wie viele Zeichen bereits eingegeben wurden. Dazu ist in dem Eingabefeld mit Namen Eingabe der Event-Handler onkeydown notiert. Er bewirkt, dass, solange der Anwender in dem Formularfeld etwas eingibt, bei jedem Tastendruck die Funktion Aktualisieren() aufgerufen wird, die im Dateikopf in einem Script-Bereich definiert ist. Diese Funktion errechnet aus document.Test.Eingabe.value.length + 1, wie viele Zeichen bereits eingegeben wurden, und schreibt eine entsprechende Ausgabe in das dafür vorgesehene "Eingabe"-Feld.

Beachten Sie:

onkeypress (bei gedrückt gehaltener Taste)

Tritt ein, wenn der Anwender eine Taste drückt und diese gedrückt hält.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel

<html> <head> <title> Test </title> </head><body> <form name="Test" action=""> <input type="text" size="30" name="Eingabe" onkeypress="alert(this.value)"> </form> </body> </html>

Im Beispiel ist ein Formular mit einem Eingabefeld definiert. Wenn der Anwender in dem Eingabefeld etwas eingibt, wird bei jedem Tastendruck in einem Meldungsfenster der aktuelle Wert des Formularfeldes ausgegeben. Dazu ist in dem Eingabefeld der Event-Handler onkeypress notiert. Er tritt in Aktion, wenn eine Taste gedrückt und gedrückt gehalten wird. In Netscape 4.x und Opera 5 wird dieser Event-Handler stets nach dem Event-Handler onkeydown ausgeführt. Gibt der Event-Handler onkeydown den Wert false zurück, so wird unter Netscape die Ausführung des Event-Handlers onkeypress unterdrückt. Im Internet Explorer unterdrückt der Event-Handler onkeypress den Event-Handler onkeydown.

Beachten Sie:

onkeyup (bei losgelassener Taste)

Tritt ein, wenn der Anwender eine Taste gedrückt hat und diese wieder loslässt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel

<html> <head> <title> Test </title> </head><body> <form name="Test" action=""> <input type="text" size="30" name="Eingabe" onkeyup="this.form.Ausgabe.value = this.value"><br> <input type="text" readonly="readonly" size="30" name="Ausgabe"><br> <input type="reset"> </form> </body> </html>

Im Beispiel wird ein Formular definiert, das zwei Eingabefelder mit den Namen Eingabe und Ausgabe enthält. Wenn der Anwender in dem oberen Feld, also dem, das für die Eingabe gedacht ist, etwas eingibt, wird der Wert automatisch Zeichen für Zeichen in das untere, also das Ausgabefeld übernommen. Dazu ist im Eingabefeld der Event-Handler onkeyup notiert. Dieser Event-Handler tritt in Aktion, wenn der Anwender in dem Feld eine Taste gedrückt und wieder losgelassen hat, was ja bei jedem eingegebenen Zeichen der Fall ist. Mit this.form.Ausgabe.value=this.value wird dem Ausgabefeld der aktuelle Wert des Eingabefeldes zugewiesen.

Beachten Sie:

onload (beim Laden einer Datei)

Tritt ein, wenn eine HTML-Datei geladen wird.

Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags: <frameset> <body>

Beispiel

<html> <head> <title> Test </title> <script type="text/javascript"> function NaviFenster () { Navigation = window.open("navigat.htm", "Navigation", "height=200,width=300"); Navigation.focus(); } </script> </head> <body onload="NaviFenster()"> <h1>Seite mit "Fernbedienung"</h1> </body> </html> Beispiel - Datei navigat.htm: <html> <head> <title> Test </title> </head><body> <a href="javascript:void(opener.location.href = '../../../index.htm');">SELFHTML</a><br> <a href="javascript:void(opener.location.href = '../../index.htm');">JavaScript</a><br> <a href="javascript:void(opener.location.href = '../index.htm');">Sprachelemente</a><br> </body> </html>

Im Beispiel wird beim Einlesen der HTML-Datei ein zweites Fenster geöffnet, das zum Beispiel als "Fernbedienung" des Hauptfensters dienen könnte. Dazu ist im einleitenden <body>-Tag der Event-Handler onload notiert. Er ruft die Funktion NaviFenster() auf, die in einem JavaScript-Bereich im Dateikopf definiert ist. Innerhalb dieser Funktion steht der Befehl zum Öffnen des Zweitfensters. Das Fenster erhält auch gleich den Fokus (wird zum aktiven Fenster), sodass es im Vordergrund des Hauptfensters zu sehen ist. Ins Zweitfenster wird die Datei navigat.htm geladen. Diese enthält Verweise mit dem "Event-Handler" nach unten javascript:. Beim Ausführen des Verweises wird im Elternfenster des Zweitfensters, markiert durch den reservierten Fensternamen opener, mit document.location.href eine Seite geladen. Die Anweisung opener.location.href='../index.htm' gibt den URI der zu ladenen Datei zurück. Mit Hilfe des Operators Seite void wird dieser unterdrückt. Dadurch werden Anzeigefehler vermieden.

Beachten Sie:

onmousedown (bei gedrückter Maustaste)

Tritt ein, wenn der Anwender die Maustaste gedrückt hält.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <input type="button"> <a>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel

Beispiel-Seite Anzeigebeispiel: So sieht's aus (auf Verweis klicken, Maus gedrückt halten und auf Statuszeile achten!) <html> <head> <title> Test </title> </head><body> <p>Klicken Sie auf den Button und lassen Sie die Maustaste einige Zeit heruntergedrückt, um den Event-Handler in Aktion zu sehen:</p> <input type="button" value="Klick mich!" onmousedown="this.value = 'Maustaste wurde gedrückt!';" onmouseup="this.value = 'Maustaste wurde losgelassen!';"> </body> </html>

Das Beispiel enthält einen Klick-Button. Sobald der Anwender die Maustaste drückt, während sich der Mauszeiger über dem Button befindet, tritt der Event-Handler onmousedown in Aktion, der im input-Tag notiert ist. Im Beispiel wird dabei der Text des Buttons geändert. Beim Loslassen der Maustaste tritt der Event-Handler nach unten onmouseup in Aktion, der den Text des Buttons ebenfalls abändert.

Beachten Sie:

onmousemove (bei weiterbewegter Maus)

Tritt ein, wenn der Anwender die Maus bewegt, unabhängig davon, ob die Maustaste gedrückt ist oder nicht.

Nach JavaScript (Netscape) bislang nicht in HTML-Tags möglich, sondern nur im Zusammenhang mit dem Seite event-Objekt.

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Maus über den Text bewegen und auf Statuszeile achten!) <html> <head> <title> Test </title> <script type="text/javascript"> function Mauskontrolle (Element) { var Pos = Element.offsetLeft + "/" + Element.offsetTop; window.status = Pos; return true; } </script> </head><body> <p onmousemove="Mauskontrolle(this)">Hier ein kleiner Text</p> </body> </html>

Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das früher nicht möglich war. In dem Beispiel wird ein Textabsatz definiert. Innerhalb des Textabsatzes ist der Event-Handler onmousemove notiert. Der Event-Handler tritt in Aktion, solange der Anwender die Maus im Anzeigebereich des Textabsatzes bewegt. Dann wird so oft wie möglich die Funktion Mauskontrolle() aufgerufen, die in einem Script-Bereich im Dateikopf notiert ist. Dieser Funktion wird als Parameter mittels this das betroffene Element übergeben. Die Funktion bewirkt, dass in der Statuszeile des Browsers jeweils die Koordinaten der linken oberen Ecke des Elementes angezeigt werden.

Beachten Sie: Opera 5 kennt den Event-Handler onmousemove zwar, interpretiert das obige Beispiel aber nicht, weil Opera die Eigenschaft window.status erst ab Version 6 unterstützt.

onmouseout (beim Verlassen des Elements mit der Maus)

Tritt ein, wenn der Anwender mit der Maus über ein Element fährt und dieses dabei verlässt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <a> <area>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Maus über den Link und wieder weg bewegen!) <html> <head> <title> Test </title> </head><body> <a href="http://aktuell.de.selfhtml.org/weblog/" onmouseout="alert('Die News sollten Sie ruhig mal besuchen')"><b>News</b></a> </body> </html>

Im Beispiel ist ein Verweis definiert. Wenn der Anwender mit der Maus über den Verweis fährt, ihn dann aber nicht anklickt, sondern die Maus doch wieder von dem Verweis entfernt, tritt der Event-Handler onmouseout in Aktion. Im Beispiel wird dann ein Meldungsfenster ausgegeben, dass den Anwender darauf hinweist, dass er die News-Seite ruhig mal aufrufen soll.

Beachten Sie:

onmouseover (beim Überfahren des Elements mit der Maus)

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <a> <area>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel

<html> <head> <title> Test </title> </head><body> <h1 id="Test" onmouseover="this.innerHTML = 'Sehen Sie?'" onmouseout="this.innerHTML = 'Ich bin dynamisch'">Ich bin dynamisch</h1> </body> </html>

Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das bislang nicht möglich war. Das Beispiel funktioniert mit dem Internet Explorer ab Version 4.x und im Netscape Navigator ab Version 6, welche die Event-Handler nach HTML 4.0 weitgehend interpretieren. In dem Beispiel wird eine Überschrift erster Ordnung definiert. Innerhalb der Überschrift sind die Event-Handler onmouseover und onmouseout notiert. Der Event-Handler onmouseover tritt in Aktion, wenn der Anwender die Maus in den Anzeigebereich der Überschrift bewegt, und onmouseout wird aktiv, wenn er die Maus wieder aus dem Anzeigebereich herausbewegt. Mit Hilfe von this nehmen Sie Bezug auf das Seite aktuelle Objekt und können mittels der Eigenschaft innerHTML mit jedem Aktivwerden eines der beiden Event-Handler den Text der Überschrift dynamisch austauschen. Bei onmouseover wird ein anderer Text angezeigt, bei onmouseout wieder der ursprüngliche Text.

Beachten Sie: Auch Opera ab Version 5 interpretiert den Event-Handler nach HTML 4.0. Er kennt jedoch nicht die Eigenschaft innerHTML.

onmouseup (bei losgelassener Maustaste)

Tritt ein, wenn der Anwender die Maustaste gedrückt hat und sie nun wieder loslässt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <input type="button"> <a>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel

<html> <head> <title> Test </title> </head><body> <input type="button" value="Klick mich!" onmouseup="this.value = 'Button wurde angeklickt, Maustaste wurde losgelassen!';"> </body> </html>

Das Beispiel enthält einen Klick-Button. Sobald der Anwender auf den Button klickt, indem er die Maustaste herunterdrückt und wieder loslässt, tritt der Event-Handler onmousedown in Aktion, der im input-Tag notiert ist. Im Beispiel wird dabei der Text des Buttons geändert.

Beachten Sie:

onreset (beim Zurücksetzen des Formulars)

Tritt ein, wenn der Anwender Eingaben in einem Formular verwerfen will.

Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag: <form>

Beispiel

<html> <head> <title> Test </title> <script type="text/javascript"> function ResetCheck () { var chk = window.confirm("Wollen Sie alle Eingaben loeschen?"); return (chk); } </script> </head><body> <form name="Test" onreset="return ResetCheck()" action=""><pre> Name: <input type="text" size="30"><br> Idee: <input type="text" size="30"><br> <input type="reset"> </pre></form> </body> </html>

Das Beispiel enthält ein Formular, das unter anderem einen Abbrechen-Button (Reset-Button) enthält. Beim Anklicken dieses Buttons werden normalerweise alle Eingaben im Formular gelöscht. Im Beispiel ist jedoch im einleitenden <form>-Tag der Event-Handler onreset notiert. Dieser tritt in Aktion, wenn der Reset-Button angeklickt wird. Im Beispiel wird dann die Funktion ResetCheck() aufgerufen, die in einem Script-Bereich im Dateikopf steht. Diese Funktion fragt den Anwender in einem Bestätigungsfenster (window.confirm()), ob er wirklich alle Eingaben in dem Formular löschen will. Bestätigt er den Löschwunsch, gibt das Bestätigungsfenster den Wert true zurück. Verneint er den Löschwunsch, wird false zurückgegeben. Der Rückgabewert wird in der Variablen chk gespeichert und diese wird wiederum von der Funktion ResetCheck() an den aufrufenden Event-Handler zurückgegeben. Der Effekt ist, dass die Formulareingaben nur gelöscht werden, wenn true zurückgegeben wird.

Beachten Sie:

onselect (beim Selektieren von Text)

Vorlage:IconsetOpera 7Mozilla Firefox 1Konqueror 3.3Safari WebKit (Entwicklerversion)

Vorlage:IconsetOpera 7Mozilla Firefox 1Konqueror 3.3Safari WebKit (Entwicklerversion) Tritt ein, wenn der Anwender Text selektiert.

Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags: <input> <textarea>

Beispiel

<html> <head> <title> Test </title> </head><body> <form name="Test" action=""> <textarea cols="40" rows="10" name="Eingabe" onselect="alert('Text wurde ausgewählt!');"> Markieren Sie einfach irgendwelchen Text aus diesem Text hier! </textarea> </form> </body> </html>

Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert, das mit Text vorbelegt ist. Wenn der Anwender Text in diesem Feld selektiert, wird über onselect ein Dialogfenster geöffnetet. Darin kann z.B. stehen, was der Anwender nun tun kann.

Beachten Sie: Opera 5 und Netscape 4.x interpretieren diesen Event-Handler nicht.

onsubmit (beim Absenden des Formulars)

Tritt ein, wenn der Anwender ein Formular absendet.

Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag: <form>

Beispiel

Beispiel-Seite Anzeigebeispiel: So sieht's aus (nicht alle Felder ausfüllen und Formular dann absenden!) <html> <head> <title> Test </title> <script type="text/javascript"> function CheckInput () { for (i = 0; i < document.forms[0].elements.length; ++i) if (document.forms[0].elements[i].value == "") { alert("Es wurden nicht alle Felder ausgefuellt!"); document.forms[0].elements[i].focus(); return false; } return true; } </script> </head><body> <form action="onsubmit.htm" onsubmit="return CheckInput();"> Feld 1: <input type="text" size="30"><br> Feld 2: <input type="text" size="30"><br> Feld 3: <input type="text" size="30"><br> <input type="submit" value="absenden"> </form> </body> </html>

Das Beispiel enthält ein Formular mit mehreren Eingabefeldern. Beim Absenden des Formulars, also beim Klicken auf den Submit-Button, wird jedoch erst mal überprüft, ob in allen Feldern etwas eingegeben wurde. Wenn eines der Felder leergelassen wurde, wird das Formular nicht abgesendet. Stattdessen wird eine Fehlermeldung ausgegeben, und der Cursor wird in das erste nicht ausgefüllte Eingabefeld positioniert. Dazu ist im einleitenden <form>-Tag der Event-Handler onsubmit notiert. Beim Absenden des Formulars wird dadurch die Funktion CheckInput() aufgerufen, die in einem Script-Bereich im Dateikopf notiert ist. Diese Funktion prüft in einer Seite for-Schleife alle einzelnen Formularfelder, ob diese einen leeren Inhalt haben (leere Zeichenkette ""). Ist das der Fall, wird die Fehlermeldung ausgegeben und auf das entsprechende Formularfeld positioniert. An den aufrufenden Event-Handler onsubmit wird der Wert false zurückgegeben. Nur wenn alle Formularfelder ausgefüllt wurden, wird true zurückgegeben. Dadurch wird entschieden, ob das Formular abgeschickt wird oder nicht.

Beachten Sie:

onunload (beim Verlassen der Datei)

Tritt ein, wenn eine HTML-Datei verlassen wird.

Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags: <frameset> <body>

Beispiel

<html> <head> <title> Test </title> <script type="text/javascript"> var Start = new Date(); var Startzeit = Start.getTime(); function Aufenthalt () { var Ende = new Date(); var Endzeit = Ende.getTime(); var Aufenthalt = Math.floor((Endzeit - Startzeit) / 1000); alert("Sie waren " + Aufenthalt + " Sekunden auf dieser Seite"); } </script> </head> <body onunload="Aufenthalt()"> <h1>Einen langen Aufenthalt auf dieser Seite!</h1> <p><a href="../../../index.htm">Und dann aber nix wie weg!</a></p> </body> </html>

Im Beispiel ist im Dateikopf ein JavaScript-Bereich definiert. Gleich beim Einlesen der Datei wird mit Hilfe des Seite Date-Objekts der aktuelle Zeitpunkt ermittelt und in der Variablen Startzeit gespeichert. Im einleitenden <body>-Tag der Datei ist der Event-Handler onunload notiert. Er tritt in Aktion, wenn die Datei - zum Beispiel durch Anklicken eines Verweises zu einer anderen Seite - verlassen wird. In diesem Fall wird im Beispiel die Funktion Aufenthalt() aufgerufen, die ebenfalls in dem Script-Bereich im Dateikopf steht. Diese Funktion ermittelt wieder den aktuellen Zeitpunkt, ermittelt dann aber noch die Differenz zwischen gespeicherter Startzeit und der jetzt ermittelten "Endzeit" und gibt das Ergebnis in einem Meldungsfenster aus.

Beachten Sie:

javascript: (bei Verweisen)

Dies ist kein Event-Handler im engeren Sinn. Es handelt sich um eine Syntax, die eingeführt wurde, um JavaScript- Code als Verweisziel zu notieren.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <a> <area>

Beispiel

<html> <head> <title> Test </title> </head> <body> <a href="javascript:alert(document.lastModified)">Letzter Update</a> </body> </html>

Das Beispiel gibt bei Anklicken des Verweises ein Meldungsfenster mit dem Zeitpunkt des letzten Updates der Datei aus. Um einen Verweis dieser Art zu notieren, notieren Sie hinter dem Attribut href in Anführungszeichen das Schlüsselwort javascript, gefolgt von einem Doppelpunkt : und dahinter eine oder mehrere JavaScript-Anweisungen. Bei mehreren Anweisungen ist es jedoch besser, diese in einer Funktion zu notieren und beim Verweis dann diese Funktion aufzurufen.

Beachten Sie: Diese Form des Aufrufes erfordert zwingend den Rückgabewert undefined. Ist dies nicht der Fall, wird der jeweilige Rückwert der JavaScript-Anweisung in das Dokument geschrieben und die aktuelle Seite gelöscht. Sie können gegebenenfalls unter Verwendung des Operators Seite void den Rückgabewert einer Anweisung unterdrücken und auf undefined setzen.