JavaScript und HTML

1
JavaScript und HTML
JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache.
Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug
in die Hand zu geben, mit dessen Hilfe sich WWW-Seiten optimieren lassen.
JavaScript-Programme werden wahlweise direkt in der HTML-Datei oder in separaten
Dateien notiert. Sie werden nicht - wie etwa Java-Programme - compiliert, sondern als
Quelltext zur Laufzeit interpretiert, also ähnlich wie Batchdateien bzw. Shellscripts. Dazu
besitzen moderne WWW-Browser wie Netscape oder Microsoft Internet Explorer
entsprechende Interpreter-Software.
In einer Programmiersprache wie JavaScript gibt es für Anfänger viele verwirrende Elemente:
Sonderzeichen, Variablen, Wenn-Dann-Anweisungen, Schleifen, Funktionen,
Methoden, Parameter, Objekte, Eigenschaften und anderes mehr.
JavaScript, JScript, ECMA-262, Sprachversionen
JavaScript ist eine Scriptsprache, die von Netscape eingeführt wurde und von Netscape
lizenziert ist. Deshalb beherrschen die jeweils neuen Versionen des Netscape-Browsers auch
immer etwas mehr JavaScript als die Konkurrenz, die nur abwarten kann, was Netscape an
Neuigkeiten implementiert.
Netscape 2.0 interpretiert den seinerzeit eingeführten JavaScript-Sprachstandard 1.0. Der MS
Internet Explorer versteht diesen Sprachstandard weitgehend seit der Version 3.0.
Netscape interpretiert seit Version 3.0 den JavaScript-Standard 1.1. Der MS Internet Explorer
interpretiert diesen Sprachumfang von JavaScript weitgehend seit der Produktversion 4.0.
Netscape interpretiert seit Version 4.0 den JavaScript-Standard 1.2. Einige Befehle dieser
Sprachversion werden auch vom MS Internet Explorer 4.0 interpretiert.
Weiterhin unterscheiden sich Netscape und der MS Internet Explorer in der Interpretation
einzelner Objekteigenschaften. So funktionieren beispielsweise Cookies (ein bekanntes
JavaScript-Feature) bei Netscape auch lokal, während der MS Internet Explorer, zumindest in
der Version 3.x, eine HTTP-Verbindung voraussetzt, um Cookies zu unterstützen. Auch bei
internen Abläufen, etwa bei vielfach zu durchlaufenden Schleifen, gibt es Unterschiede
zwischen einzelnen Browsern und Browser-Versionen.
Der MS Internet Explorer 4.x interpretiert zwar JavaScript, daneben aber auch die Microsofteigene Sprachvariante JScript, die spezielle Befehle für die Betriebssystemerweiterungen des
MS Internet Explorers bereitstellt.
Sowohl Netscape als auch Microsoft betonen, daß sie sich mit ihren Sprachinterpretern am
Standard für Internet-Scriptsprachen, an ECMA-262, orientieren. Das ECMA-Kommittee,
dem verschiedene Software-Hersteller, unter anderem Microsoft und Netscape, angehören, ist
bemüht, auch im Bereich der Scriptsprachen einen allgemeingültigen Standard zu definieren,
so wie es bei HTML oder CSS Style Sheets der Fall ist.
2
JavaScript-Bereiche in HTML definieren
Das folgende Beispiel verdeutlicht, wie JavaScript-Programmabschnitte in HTML Bereiche
definiert werden.
<html>
<head>
<title>Test</title>
<script language="JavaScript">
<!-alert("Hallo Welt!");
//-->
</script>
</head>
<body>
</body>
</html>
Erläuterung:
Mit <script language="JavaScript"> leiten Sie einen Bereich für JavaScript innerhalb einer
HTML-Datei ein (script =Quelltext, language = Sprache). Dahinter - am besten in der
nächsten Zeile - sollten Sie mit  den Kommentar und mit </script>
den Bereich für den Programmcode.
Es gibt keine festen Vorschriften dafür, an welcher Stelle einer HTML-Datei ein JavaScriptBereich definiert werden muß. Es ist unter JavaScript-Programmierern zur Gewohnheit
geworden, einen solchen Bereich im Kopf der HTML-Datei, also zwischen <head> und
</head> zu definieren. Dadurch ist am ehesten sichergestellt, daß der Code vom WWWBrowser bereits eingelesen ist und zur Verfügung steht, wenn er ausgeführt werden soll.
JavaScript-Code kann automatisch beim Einlesen der HTML-Datei ausgeführt werden. Das
ist dann der Fall, wenn JavaScript-Befehle in einem JavaScript-Bereich außerhalb jeder selbst
definierten Funktion stehen, so wie im obigen Beispiel.
In solchen Fällen ist es manchmal auch erforderlich, den Script-Bereich innerhalb des HTMLDateikörpers, also innerhalb von <body>...</body>, zu notieren. Zum Beispiel, wenn Sie am
Ende der Datei mit JavaScript dynamisch Datum und Uhrzeit der letzten Änderung an der
Datei schreiben wollen.
JavaScript-Elemente in HTML-Tags
JavaScript kann auch innerhalb herkömmlicher HTML-Tags vorkommen. Das ist dann kein
komplexer Programmcode, sondern in der Regel nur der Aufruf bestimmter Methoden,
Funktionen, Objekte, Eigenschaften. Für den Aufruf gibt es sogenannte Event-Handler. Das
3
sind JavaScript-eigene Attribute in HTML-Tags. Für jeden der möglichen Event-Handler ist
festgelegt, in welchen HTML-Tags er vorkommen darf.
Beispiel:
<html>
<head>
<title>JavaScript-Test</title>
<script language="JavaScript">
<!-function Quadrat(Zahl)
{
Ergebnis = Zahl * Zahl;
alert("Das Quadrat von " + Zahl + " = " + Ergebnis);
}
//-->
</script>
</head>
<body>
<form>
<input type=button value="Quadrat von 6 errechnen" onClick="Quadrat(6)">
</form>
</body>
</html>
Erläuterung:
Das obige Beispiel zeigt eine komplette HTML-Datei. Im Dateikopf ist ein JavaScriptBereich definiert. Innerhalb dieses Bereichs steht eine selbst definierte Funktion, die
Funktion mit dem Namen Quadrat(x). Die Funktion bekommt beim Aufruf eine Zahl x
übergeben. Sie errechnet das Quadrat dieser Zahl und gibt das Ergebnis in einem
Meldungsfenster aus. Dieser JavaScript-Code wird aber nur ausgeführt, wenn die Funktion
explizit aufgerufen wird. Im obigen Beispiel erfolgt der Aufruf mit Hilfe eines Klick-Buttons.
Wenn der Anwender auf den Button klickt, wird die Funktion ausgeführt.
Im Unterpunkt Event-Handler wird beschrieben, was solche Angaben wie onClick= (wie im
obigen Beispiel) bedeuten, und in welchen HTML-Tags sie vorkommen dürfen.
JavaScripts in separaten Dateien
Seit der Sprachversion 1.1 von JavaScript (und auch seit HTL 4.0) ist es möglich, JavaScriptCode in separaten Dateien zu notieren.
Das ist sehr nützlich, wenn Sie gleiche JavaScript-Funktionen in mehreren HTML-Dateien
verwenden wollen. Denn so brauchen Sie den Code nur einmal notieren und können ihn in
mehreren HTML-Dateien referenzieren.
Beispiel: (HTML-Datei)
<html>
<head>
<title>JavaScript-Test</title>
<script language="JavaScript" src="quadrat.js" type="text/javascript">
</script>
</head>
4
<body>
<form>
<input type=button value="Quadrat von 6 errechnen" onClick="Quadrat(6)">
</form>
</body>
</html>
Beispiel (separate JavaScript-Datei):
function Quadrat(Zahl)
{
Ergebnis = Zahl * Zahl;
alert("Das Quadrat von " + Zahl + " = " + Ergebnis);
}
Erläuterung:
Das Beispiel tut das gleiche, wie das Beispiel im Abschnitt zuvor. Der Unterschied ist
lediglich, daß der JavaScript-Code in einer separaten Datei steht. Dazu notiert man im
einleitenden <script>-Tag die Angabe src= (src = source = Quelle). Dahinter folgt, in
Anführungszeichen, der Name der separaten Datei mit dem Quellcode. Ebenfalls muß die
Angabe zum Mime-Type der eingebundenen Datei notiert werden. Mit type="text/javascript"
wird der Mime-Type für JavaScript-Dateien bestimmt.
Die Datei mit dem Quellcode muß eine reine ASCII-Datei sein und sollte die
Dateinamenerweiterung .js erhalten. Die Datei sollte nichts anderes als JavaScript-Code
enthalten.
Beim Referenzieren von separaten JavaScript-Dateien, die sich in anderen Verzeichnissen
oder auf anderen Server-Rechnern im Internet befinden, gelten die gleichen Regeln wie beim
Einbinden von Grafiken.
Es kann passieren, daß ein JavaScript, das in einer separaten Datei notiert ist, lokal
funktioniert, aber nach dem Hochladen der Dateien auf einen WWW-Server plötzlich nicht
mehr. In diesem Fall ist auf dem Server der Mime-Type text/javascript für Dateien mit der
Endung .js in die Konfiguration des Web-Servers mit aufzunehmen.
Allgemeine Notationsregeln
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.
Beispiel 1:
Zahl = 42;
Beispiel 2:
Quadrat = Zahl * Zahl;
Beispiel 3:
if(Zahl > 1000)
5
Zahl = 0;
Beispiel 4:
alert("Das Quadrat von " + Zahl + " = " + Ergebnis);
Erläuterung:
Eine Anweisung in JavaScript besteht immer aus einem Befehl, der mit einem Strichpunkt ;
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 vorneherein anzugewöhnen, alle
Anweisungen auf diese Weise abzuschließen.
Anweisungen sind daher:

Wertzuweisung an eine Variable (Beispiel 1)

Operationen mit Variablen oder Werten (Beispiel 2)

Bedingte Ausführung von Befehlen (Beispiel 3; siehe hierzu die Abschnitte über bedingte
Anweisungen und über Schleifen).

Aufruf selbst definierter Funktionen oder Objektmethoden, bzw. Auslesen oder Änderung
einer Objekteigenschaft (siehe hierzu den Abschnitt Objekte, Eigenschaften und
Methoden).
Anweisungsblöcke notieren
Ein Anweisungsblock besteht aus zwei oder mehreren Anweisungen, die innerhalb einer
übergeordneten Anweisung oder innerhalb einer Funktion stehen. So können
Anweisungsblöcke beispielsweise innerhalb einer bedingten Anweisung oder innerhalb einer
Schleife stehen. Auch alle Anweisungen, die innerhalb einer selbst definierten Funktion
stehen, bilden einen Anweisungsblock.
Beispiel 1:
if(Zahl > 1000)
{
Zahl = 0;
Neustart();
}
Beispiel 2:
while(i <= 99)
{
Quadrat(i);
i = i + 1;
}
Beispiel 3:
function SageQuadrat(x)
{
var Ergebnis = x * x;
alert(Ergebnis);
}
6
Beispiel 4:
function SagEinmaleins(x)
{
var Ergebnis = x * x;
if(Ergebnis > 100)
{
Ergebnis = 0;
Neustart();
}
alert(Ergebnis);
}
Erläuterung:
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, so wie in den obigen Beispielen. Es ist aber auch
erlaubt, die Klammern in der gleichen Zeile zu notieren wie die Anweisungen.
Bei bedingten Anweisungen (wie in Beispiel 1 oben) oder bei Schleifen (wie in Beispiel 2
oben) 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 oben) 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 natürlich auch verschachtelt sein (Beispiel 4).
Selbstvergebene Namen
An vielen Stellen in JavaScript müssen Sie selbst Namen vergeben, zum Beispiel für selbst
definierten Funktionen, eigene Objekte oder Variablen.
Beispiel:
<html><head><title>Test</title>
<script language="JavaScript">
<!-function FensterZu(Fensternummer)
{
parent.frames[Fensternummer].close();
}
//-->
</script>
</head><body>
</body></html>
Erläuterung:
Bei selbst vergebenen Namen gelten folgende Regeln:


sie dürfen keine Leerzeichen enthalten
sie sollten maximal 32 Zeichen Länge haben
7




sie dürfen nur aus Buchstaben und Ziffern bestehen - das erste Zeichen sollte 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 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 Copyrightangaben 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 */
}
Erläuterung:
Einen 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.
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>Sinn des Lebens zum Quadrat</title>
<script language="JavaScript">
<!-var Hinweis = "Gleich werden Quadratzahlen ausgegeben";
alert(Hinweis);
8
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>");
}
}
// -->
</script>
</head>
<body onLoad="SchreibeQuadrate()">
</body>
</html>
Erläuterung:
Variablen können mit Hilfe des reservierten Wortes var definiert werden. Dieses
Schlüsselwort ist zwar nicht zwingend notwendig, macht den Quellcode aber lesbarer, da es
signalisiert, daß an der betreffenden Stelle eine neue Variable definiert wird.
Jede Variablendefinition wird mit einem Strichpunkt abgeschlossen, genau wie eine
Anweisung (betrachten Sie eine Variablendefinition einfach als eine Anweisung!).
Es gibt globale Variablen und Variablen, die innerhalb einer Funktion definiert sind. Im
obigen Beispiel ist die Variable Hinweis global, während die Variablen SinnDesLebens, i, x
und Satzteil funktionsgebunden sind. Eine globale Variable steht jederzeit zur Verfügung,
während eine Variable, die innerhalb einer Funktion definiert wird, nur innerhalb dieser
Funktion zur Verfügung steht.
Man spricht in diesem Zusammenhang auch von der "Lebensdauer" von Variablen.
Variablen können mit oder ohne weitere Wertzuweisung definiert 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, daß 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, daß Sie mit der Variablen Nummer Rechenoperationen
9
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.
Bei der Vergabe von Variablennamen gelten die Regeln für selbstvergebene Namen.
Variablen in JavaScript sind nicht so streng "getypt" wie in vielen anderen
Programmiersprachen. Außer der Unterscheidung von numerischen und nicht-numerischen
Variablen gibt es keine Unterscheidung. 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.
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 bedingten Anweisungen oder 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>
<script language="JavaScript">
<!-function SchreibeQuadrate()
{
var SinnDesLebens = 42;
var i, x;
var Satzteil = "Das Quadrat von ";
document.close();
document.open("text/html");
for(i=1; i <= SinnDesLebens; ++i)
{
x = i * i;
document.write(Satzteil + i + " ist " + x + "<br>");
}
}
// -->
</script>
</head>
<body onLoad="SchreibeQuadrate()">
</body>
</html>
Erläuterung:
10
Das obige Beispiel leert das Anzeigefenster des WWW-Browsers und schreibt HTMLformatiert in das leere Fenster untereinander die Quadrate von 1 bis zum Sinn des Lebens
(42). Dazu dienen Methoden des Objekts document.
Die Variablen SinnDesLebens und Satzteil werden während des Programmablaufs zwar
benutzt, aber ihr Wert wird nicht geändert. Die Variablen i und x dagegen ändern ihren Wert
laufend. Das liegt daran, daß sie innerhalb einer for-Schleife bei jedem Schleifendurchlauf
neue Werte zugewiesen bekommen.
Die Wertzuweisung erfolgt, indem Sie den Variablennamen, dahinter ein Istgleichzeiten 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.
Objekte, Eigenschaften und Methoden
Vordefinierte JavaScript-Objekte
Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit
objektgebundenen Funktionen (Methoden). Daß 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
Fenster-Objekt (window). Fenster haben Eigenschaften wie einen Titel, 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 JavaScript ObjektReferenz. Dort werden zu jedem Objekt die verfügbaren Eigenschaften und Methoden
vorgestellt.
Vordefinierte JavaScript-Objekte verwenden
JavaScript-Objekte können Sie jederzeit verwenden.
Beispiel:
<html><head><title>Test</title>
<script language="JavaScript">
11
<!-function SagDatumUndZeit()
{
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" : ":");
alert("Guten Tag!\nHeute ist der "
+ Tag + "." + Monat + "." + Jahr + "\nEs ist jetzt "
+ Stunden + NachVoll + Minuten + " Uhr");
}
// -->
</script>
</head>
<body onload="SagDatumUndZeit()">
</body></html>
Erläuterung:
Im Beispiel wird innerhalb eines JavaScript-Bereichs mit Hilfe des vordefinierten JavaScriptObjekts Date das aktuelle Datum und die aktuelle Uhrzeit ermittelt. Beim Einlesen der Datei
wird das Ergebnis zusammen mit einem Begrüßungstext sauber formatiert in einem
Meldungsfenster ausgegeben.
Zuerst muß eine dazu neue Variable angelegt werden. Im Beispiel ist dies die Variable Jetzt.
Diese Variable soll auf Daten des Date-Objekts zugreifen können. Dies geschieht durch ein
Istgleichzeichen hinter dem Variablennamen. Dahinter folgt das reservierte JavaScript Wort
new und dahinter, durch ein Leerzeichen getrennt, der Aufruf der von Date() zum Erzeugen
einer neuen Instanz des Objekts Date.
Um die einzelnen Daten der Objektinstanz von Date, also Tag, Monat, Jahr usw.
anzusprechen, stehen entsprechende Methoden zur Verfügung. Diese Methoden, z.B.
getDate() oder getHours(), haben als Rückgabewert jeweils einen Datums/UhrzeitBestandteil. So liefert getDate() beispielsweise den aktuellen Tag des Monats und getHours()
die aktuelle Stundenzahl des Tages. Im Beispiel wird für jeden der benötigten Bestandteile
eine Variable definiert. In der Variablen Tag wird beispielsweise durch Aufruf von
Jetzt.getDate() der aktuelle Tag des Monats gespeichert.
Die Anweisung im Beispiel, die mit NachVoll ... beginnt, kann an dieser Stelle nicht näher
erläutert werden. Die Anweisung ist eine Vorbereitung zur sauberen Formatierung der
Uhrzeit.
Die einzelnen Methoden des im Beispiel verwendeten Objekts Date, wie zum Beispiel
getDate(), werden bei der Referenz des Objekts 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
12
eine Instanz dieses Objekts definieren. Mit dieser Objekt-Instanz können Sie dann
Programmprozeduren durchführen.
Beispiel:
<html>
<head>
<title>Beispiel mit JavaScript</title>
<script language="JavaScript">
<!-function Farbe(Farbwert_R, Farbwert_G, Farbwert_B)
{
this.Farbwert_R = Farbwert_R;
this.Farbwert_G = Farbwert_G;
this.Farbwert_B = Farbwert_B;
}
function TestObjekt()
{
Test = new Farbe("33","99","C0");
alert("Der Rotwert meiner Farbe ist Hexadezimal " + Test.Farbwert_R);
}
// -->
</script>
</head>
<body onload="TestObjekt()">
</body>
</html>
Erläuterung:
Um ein neues Objekt und seine Eigenschaften anzulegen, müssen Sie innerhalb eines
JavaScript-Bereichs oder innerhalb einer separaten JavaScript-Datei eine eigene Funktion
definieren, die so aussieht 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 Farbwert_R, Farbwert_G und
Farbwert_B, denn es soll ein Objekt angelegt werden, das Rot-, Grün- und Blauwert einer
Farbe speichern kann. Innerhalb der Funktion notieren Sie alle Anweisungen so wie im
Beispiel: für jede Eigenschaft, die bei den Funktionsparametern festgelegt wurde, notieren Sie
eine Anweisung, beginnend mit dem reservierte JavaScript Wort this, gefolgt von einem
Punkt und dem Parameternamen. Dahinter notieren Sie ein Istgleichzeichen, und hinter dem
Istgleichzeichen nochmals den Parameternamen. Am Ende jeder Anweisung muß ein
Strichpunkt stehen.
Nachdem das Objekt angelegt ist, können Sie an anderen Stellen innerhalb Ihres JavaScripts
Instanzen dieses Objekt definieren. Dies geschieht mit Hilfe einer Variablen und dem
reservierte JavaScript Wort new. Im Beispiel wird zu Testzwecken eine zweite Funktion
TestObjekt() definiert. Darin wird zunächst eine Variable Test angelegt. Diese Variable soll
Daten des angelegten Objekts Farbe enthalten. Dies geschieht durch ein Istgleichzeichen
hinter dem Variablennamen. Dahinter folgt das reservierte JavaScript Wort new und dahinter,
13
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). Der Rot-Wert der Farbe wird beim
Einlesen der HTML-Datei in einem Meldungsfenster ausgegeben.
Eigenschaften von Objekten
Objekte können Eigenschaften haben. Ein selbst definiertes Objekt "Mensch" könnte zum
Beispiel die Eigenschaften Name, Alter, Geschlecht und Muttersprache haben. Vordefinierte
JavaScript-Objekte haben ebenfalls Eigenschaften. So hat das Objekt Math zum Beispiel eine
Eigenschaft "PI" (Math.PI). Auf diese Weise läßt 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 eine neue, gültige URLAdresse zuweisen. Dadurch bewirken Sie, daß der WWW-Browser einen Sprung zu der
zugewiesenen URL-Adresse ausführt, genau so, wie wenn der Anwender auf einen
entsprechenden Verweis klicken würde.
Beispiel:
<html>
<head>
<title>Browser des Anwenders auslesen</title>
<script language="JavaScript">
<!-var BrowserName = navigator.appName;
var BrowserVersion = navigator.appVersion;
alert("Ah ja, Sie verwenden also den " + BrowserName +
", und zwar in der Version " + BrowserVersion);
// -->
</script>
</head>
<body>
</body>
</html>
Erläuterung:
Im Beispiel werden innerhalb eines JavaScript-Bereichs zwei Eigenschaften des
vordefinierten JavaScript-Objektsnavigator in zwei entsprechenden Variablen 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 in einem
Meldungsfenster am Bildschirm ausgegeben.
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!
14
Da im obigen Beispiel keine Funktion definiert worden ist, wird der JavaScript-Code beim
Einlesen der Datei einfach ausgeführt.
Objekt-Methoden
Objekten können Methoden haben. Das sind Funktionen, die Aktionen ausführen, aber im
Gegensatz zu alleinstehenden Funktionen an ein bestimmtes Objekt gebunden sind. Viele
vordefinierte JavaScript-Objekte haben Methoden. So gibt es zum Beispiel das vordefinierte
JavaScript-Objekt history, in dem die bereits besuchten URL-Adressen eines BrowserFensters gespeichert sind. Dazu gibt es eine Methode history.back(), mit der Sie in JavaScript
einen Rücksprung zu einer bereits besuchten URL-Adresse erzwingen können.
<html>
<head>
<title>Geh hin wo Du herkommst</title>
</head>
<body>
<a href="javascript:history.back();">Geh hin wo Du herkommst</a>
</body>
</html>
Erläuterung:
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.
Mehr zu der Aufrufsyntax bei Verweisen erfahren Sie im Abschnitt über Event-Handler.
Abfragen ob ein Objekt existiert
Es gibt mittlerweile ziemlich 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,
daß ein Script, daß mit Netscape 4.x wunderbar funktioniert, bei Netscape 3.x 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>
15
<title>Objekte abfagen</title>
<script language="JavaScript">
<!-if(! document.images)
alert("Schade, Ihr Browser kennt das image-Objekt nicht - Sie verpassen was!");
else
alert("Hurra, Ihr Browser kennt das image-Objekt");
if(document.all)
alert("Aha, Microsoft!");
else
alert("Aha, nicht Microsoft!");
// -->
</script>
</head>
<body>
</body>
</html>
Erläuterung:
Mit einer bedingten Anweisung if(...) können Sie überprüfen, ob ein Objekt oder eine
Eigenschaft/Methode des Objekts verfügbar ist. Als Ausdruck für die Bedingung notieren Sie
innerhalb der Klammern hinter if einfach das Objekt, nach dem Sie fragen, bzw. das Objekt
plus die Eigenschaft/Methode, nach der Sie fragen wollen. 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, daß dieses JavaScript leider Befehle verwendet, die der
Browser des Anwenders nicht interpretiert.
Im obigen Beispiel wird zunächst gefragt, ob das images-Objekt nicht verfügbar ist (die
verneinte Abfrage ergibt sich durch das Ausrufezeichen vor dem Objekt). Ist das Objekt also
nicht verfügbar, wird im Beispiel die Meldung ausgegeben, daß dies sehr schade sei usw. Im
anderen Fall, also wenn das Objekt verfügbar ist, wird eine Hurra-Meldung ausgegeben.
Im zweiten Teil des Beispiels wird eine Eigenschaft des document-Objekts abgefragt,
nämlich die Eigenschaft all (die selbst wieder ein Objekt ist, aber nur vom MS Internet
Explorer interpretiert wird). Auch dabei werden im Beispiel wieder je nach Verfügbarkeit
zwei unterschiedliche Meldungen ausgegeben.
Mehrere Anweisungen mit einem Objekt ausführen (with)
Hin und wieder kommt es vor, daß Sie mehrere Anweisungen in Folge notieren, die alle mit
dem gleichen Objekt arbeiten. Für diesen Zweck können Sie wenn Sie wollen eine verkürzte,
spezielle Schreibweise verwenden.
Beispiel:
<html><head><title>Test</title>
</head><body>
<script language="JavaScript">
with(document)
{
16
open();
write("Diese Seite hat die Hintergrundfarbe " + bgColor);
close();
}
</script>
</body></html>
Erläuterung:
Mit with(Objektname) leiten Sie eine solche Schreibweise ein (with = mit). Da normalerweise
mehrere Anweisungen folgen, die dieses Objekt verwenden, müssen Sie all diese
Anweisungen in geschweifte Klammern einschließen.
Im obigen Beispiel wird mit dem document-Objekt gearbeitet. Innerhalb der geschweiften
Klammern werden die Methoden open(), write() und close() sowie die Eigenschaft bgColor
verwendet. Sie alle gehören zum document-Objekt. Normalerweise müßten Sie notieren:
document.open() oder document.bgColor. Durch die spezielle Syntax mit with(document)
entfällt dies.
Natürlich ist es auch möglich, untergeordnete Objekte auf diese Weise anzusprechen, z.B.:
with(document.MeinFormular.Feld_1) value = Stefan
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>
Erläuterung:
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 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 forms-Objekt abgeleitet.
17
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 Anweisungsblock. Sie können eigene Funktionen innerhalb eines
JavaScript-Bereichs oder in einer 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 Event-Handlers aufrufen. Oder Sie rufen eine Funktion innerhalb einer anderen
Funktion auf.
Beispiel:
function PrimzahlCheck(Zahl)
{
var Grenzzahl = Zahl / 2;
var Check = 1;
for(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>
Erläuterung:
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 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!
18
Die Anweisungen innerhalb der Funktion können sehr unterschiedlicher Natur sein. Da
können Sie z.B. 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, daß es sich um
eine Primzahl handelt.
Funktion aufrufen
Sie können eine selbst definierte Funktion aufrufen, um den darin enthaltenen JavaScriptCode auszuführen.
Beispiel:
<html>
<head>
<title>Zahl auf Primzahl checken</title>
<script language="JavaScript">
<!-function PrimzahlCheck(Zahl)
{
var Grenzzahl = Zahl / 2;
var Check = 1;
for(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">
Geben Sie eine Zahl ein, die Zahl wird auf Primzahl gecheckt:<br>
<input type=text name="Eingabezahl">
<input type=button value="auf Primzahl checken"
onClick="PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)">
</form>
</body>
</html>
Erläuterung:
19
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 JavaScriptFunktion aufgerufen und ermittelt, ob es sich bei der Eingabe um eine Primzahl handelt..
Dazu enthält der Button den 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.
Funktion mit Rückgabewert und solche Funktion aufrufen
Eine Funktion kann einen ermittelten Wert an die aufrufende Instanz zurückgeben.
Beispiel:
<html>
<head>
<title>Bruttobetrag aus Nettobetrag errechnen</title>
<script language="JavaScript">
<!-function BruttoBetrag(Netto, Prozente)
{
var Ergebnis = Netto * (1 + (Prozente / 100));
return Ergebnis;
}
function SchreibeBrutto(Betrag, Prozentsatz)
{
var Wert;
Wert = BruttoBetrag(Betrag, Prozentsatz);
document.BruttoForm.Ergebnisfeld.value = Wert;
}
//-->
</script>
</head>
<body>
<form name="BruttoForm">
Nettobetrag: <input type=text name="NettoEingabe"><br>
Prozentsatz: <input type=text name="ProzentEingabe"><br>
<p>Kommabetrag mit Punkt eingeben!</p>
<input type=button value="Brutto ermitteln"
onClick="SchreibeBrutto(document.BruttoForm.NettoEingabe.value,document.BruttoForm.P
rozentEingabe.value)">
<p>
Ergebnis: <input type=text name="Ergebnisfeld">
</form>
</body>
20
</html>
Erläuterung:
Das obige Beispiel zeigt eine komplette HTML-Datei. Darin ist ein JavaScript-Bereich
definiert, 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 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.
Beispiel:
<html>
<head>
<title>Bruttobetrag aus Nettobetrag errechnen</title>
<script language="JavaScript">
<!-function Simple()
{
var Ergebnis = eval("1+1");
alert("1 + 1 = " + Ergebnis);
}
//-->
</script>
</head>
<body>
<a href="javascript:Simple()">Wieviel ist 1+1?</a>
</body>
</html>
Erläuterung:
Das obige Beispiel zeigt eine komplette HTML-Datei. Darin ist ein JavaScript-Bereich
definiert, in dem wiederum eine Funktionen Simple() definiert ist. Innerhalb des Dateikörpers
der HTML-Datei steht ein Verweis. Beim Anklicken dieses Verweises wird die Funktion
aufgerufen. Sie gibt das Ergebnis von 1+1 in einem Meldungsfenster aus. Zur Berechnung des
Ergebnisses wird zuvor die JavaScript-Standardfunktion eval(...) aufgerufen (eval = evaluate
= berechne).
Die Syntax, um in Verweisen JavaScript-Funktionen aufzurufen, wird bei den EventHandlern näher beschrieben.
21
Eine Übersicht aller JavaScript-Standardfunktionen finden Sie im Abschnitt
Objektunabhängige Funktionen.