Benutzer:Klaus Quappe/Work
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
Inhaltsverzeichnis
- 1 Allgemeine Regeln für JavaScript
- 2 Variablen und Werte
- 3 Objekte, Eigenschaften und Methoden
- 3.1 Vordefinierte JavaScript-Objekte
- 3.2 Vordefinierte JavaScript-Objekte verwenden
- 3.3 Eigene Objekte definieren
- 3.4 Eigenschaften von Objekten
- 3.5 Objektmethoden
- 3.6 Abfragen ob ein Objekt existiert
- 3.7 Mehrere Anweisungen mit einem Objekt ausführen (with)
- 3.8 Auf aktuelles Objekt Bezug nehmen (this)
- 4 Funktionen
- 5 Steuerzeichen und besondere Notationen
- 6 Operatoren
- 7 Bedingte Anweisungen (if-else/switch)
- 8 Schleifen (while/for/do-while)
- 9 Reservierte Wörter
- 10 Event-Handler
- 10.1 Allgemeines zu Event-Handlern
- 10.2 onabort (bei Abbruch)
- 10.3 onblur (beim Verlassen)
- 10.4 onchange (bei erfolgter Änderung)
- 10.5 onclick (beim Anklicken)
- 10.6 ondblclick (bei doppeltem Anklicken)
- 10.7 onerror (im Fehlerfall)
- 10.8 onfocus (beim Aktivieren)
- 10.9 onkeydown (bei gedrückter Taste)
- 10.10 onkeypress (bei gedrückt gehaltener Taste)
- 10.11 onkeyup (bei losgelassener Taste)
- 10.12 onload (beim Laden einer Datei)
- 10.13 onmousedown (bei gedrückter Maustaste)
- 10.14 onmousemove (bei weiterbewegter Maus)
- 10.15 onmouseout (beim Verlassen des Elements mit der Maus)
- 10.16 onmouseover (beim Überfahren des Elements mit der Maus)
- 10.17 onmouseup (bei losgelassener Maustaste)
- 10.18 onreset (beim Zurücksetzen des Formulars)
- 10.19 onselect (beim Selektieren von Text)
- 10.20 onsubmit (beim Absenden des Formulars)
- 10.21 onunload (beim Verlassen der Datei)
- 10.22 javascript: (bei Verweisen)
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.
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.
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.
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.
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.
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.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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.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.
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.
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:
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.
Funktion aufrufen
Sie können eine selbst definierte Funktion aufrufen, um den darin enthaltenen JavaScript-Code auszuführen.
Funktion mit Rückgabewert und solche Funktion aufrufen
Eine Funktion kann einen ermittelten Wert an die aufrufende Instanz zurückgeben.
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.
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.
Steuerzeichen und besondere Notationen
Steuerzeichen bei Zeichenketten
Bei Zeichenkettenvariablen gibt es die Möglichkeit, Steuerzeichen in den Variablenwert einzufügen.
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.
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.
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.
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.
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.
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.
Berechnungsoperatoren
Um mit numerischen Werten Berechnungen durchzuführen, brauchen Sie Berechnungsoperatoren.
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;
Logische Operatoren
Logische Operatoren brauchen Sie, wenn Sie komplexere Bedingungen für Seite bedingte Anweisungen oder Seite Schleifen formulieren wollen.
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.
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.
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.
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.
boolean (Ja/Nein-Variable), string (Zeichenkettenvariable), number (numerische Variable), function (Funktion), object (Objekt), undefined (unbestimmter Typ).
Anweisungen müssen in Klammern eingeschlossen werden, z.B. typeof(Zahl=Zahl+2).
void-Operator
Der Operator void wird dann verwendet, wenn eine Anweisung ausgeführt 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.
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.
Bedingte Anweisungen (if-else/switch)
Wenn-Dann-Bedingungen mit "if"
Sie können die Ausführung von Anweisungen von Bedingungen abhängig machen.
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).
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.
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.
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.
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.
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).
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.
Eine spezielle Abart der for-Schleife ist die for-in-Schleife.
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.
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.
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 mitEs 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>
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>
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>
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>
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.
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
onselect (beim Selektieren von Text)
Opera 7Mozilla Firefox 1Konqueror 3.3Safari WebKit (Entwicklerversion) Opera 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>
onsubmit (beim Absenden des Formulars)
Tritt ein, wenn der Anwender ein Formular absendet.
Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag: <form>
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>
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>
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.