 |
Einführung in Javascriptvon Prof. Jürgen Plate |
|
Einführung in Javascriptvon Prof. Jürgen Plate |
Anmerkung: An etlichen Stellen im Script finden Sie folgenden "Button",
| Ausprobieren |
|---|
mit dem Sie die besprochenen Sprachkonstrukte ausprobieren können. Es wird ein neues Fenster mit dem Beispiel geöffnet. Um zum Text zurück zu gelangen, schließen Sie einfach das Browserfenster.
JavaScript-Code kann an verschiedenen Stellen innerhalb einer HTML-Datei vorkommen. Wichtig ist zu unterscheiden, welche JavaScript-Anweisungen an welchen Stellen innerhalb einer HTML-Datei möglich sind. Das folgende Komplettbeispiel zeigt typische Möglichkeiten der Einbindung von JavaScript-Anweisungen in einer HTML-Datei. Studieren Sie das folgende Beispiel aufmerksam und lesen Sie anschließend die Erläuterungen dazu. Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen.
<html>
<head>
<title>Beispiel mit JavaScript</title>
(1) <script language="JavaScript">
<!--
(2) function MeinKommentar(Text,DateidatumJaNein)
{
(3) if (DateidatumJaNein==0)
alert(Text);
else
alert(Text + '\nDatum/Uhrzeit: ' + document.lastModified);
}
// -->
</script>
</head>
(4) <body onload="MeinKommentar('Hallo Alter!',0)">
(5) <a href="http://www.netzmafia.de/index.html"
onClick="MeinKommentar('Der Link zu www.netzmafia.de
funktioniert nicht mehr! Wird in Kuerze aktualisiert!',1)">
Netzmafia-Server</a>
<p>
(6) <a href="index.htm" onMouseOver="window.status='Zur
Homepage zurueckspringen!';return true">Zurück</a>
</body>
</html>
Das voranstehende Beispiel zeigt eine komplette HTML-Datei. Beim Aufrufen der Datei erhält der Anwender einen Hinweis am Bildschirm:
Diese Ausgabe wird durch (4) ausgelöst. Mit "onload" wird veranlaßt, daß bei Laden der Seite die Alertbox angezeigt wird. Ein JavaScript wird durch die Tags
<SCRIPT> ... </SCRIPT>eingeschlossen. Optional kann im öffnenden Tag die Sprache angegeben werden. Die Ausgabefunktion selbst wird im Header des Dokuments definiert (1 und 2). Die Positionierung im Header hat zwei Gründe: Erstens wird beim Laden des Dokuments dieser Teil zuerst geladen. Somit stehen die Funktionen sofort innerhalb des Dokumenten-Body zur Verfügung. Außerdem wird der Text nicht angezeigt. Damit nicht doch irgendein Browser auf die Idee kommt, den Quelltext zu zeigen, wird er in HTML-Kommentare eingeschlossen.
Die Funktion "MeinKommentar" (2 und 3) ist recht einfach gehalten (auf die einzelnen Strukturen der Programmiersprache kommen wir noch zu sprechen). Sie besitzt einen Parameter, der die Form der Ausgabe bestimmt.
Der Body enthält im Beispiel der Einfachheit halber nur zwei Verweise: einen zu "www.netzmafia.de" und einen zur eigenen Projekt-Homepage. Nun hat der Autor festgestellt, daß der Verweis zu "www.netzmafia.de" nicht mehr funktioniert. Die neue URL-Adresse hat er noch nicht herausbekommen. Der Verweis soll für den Anwender jedoch sichtbar bleiben. Mit Hilfe von JavaScript erreicht man, daß der Anwender beim Anklicken dieses Verweises eine Hinweismeldung erhält, die ihn über den Sachverhalt informiert (der JavaScript-Code wird direkt in das Link eingebettet (5) und beim Anklicken aktiviert):
In der Hinweismeldung steht zur Kontrolle auch, wann die aktuelle HTML-Datei zum letzten Mal bearbeitet wurde - gesteuert über den Parameter der Funktion).
Der zweite Verweis im HTML-Dokument (6) ist ein
Rücksprung zur eigenen Homepage. Wenn der Anwender mit der
Maus über den Verweis fährt, wird zusätzlich zum
Verweistext in der Statuszeile des WWW-Browsers ein Langtext
ausgegeben, der den Verweis näher kommentiert:
Die dritte Möglichkeit, JavaScript in einer HTML-Seite unterzubringen, die Verknüpfung mit einen Formular, werden Sie später kennenlernen.
Anstatt das komplette JavaScript-Programm zwischen <SCRIPT language="JavaScript"> ... </SCRIPT> zu schreiben, kann man das Programm auch in eine eigene Datei (hier z.B. "xyz.js") schreiben und aus der HTML-Datei heraus hinzuladen:
<script language="JavaScript" src="xyz.js" type="text/javascript"></script>
Die Datei sollte die Endung ".js" haben, und es gelten die gleichen Regeln beim Einbinden wie bei Bildern. Durch diese Art der Einbindung ist es möglich, JavaScript-Programme in mehreren HTML-Dateien gleichzeitig zu verwenden und zentral zu verwalten.
Auch für die Programmierung brauchen Sie keine anderen Hilfsmittel wie beim Schreiben von HTML-Dokumenten. Wenn das Script fehlerhaft ist, liefert der Browser eine Erläuterung der Fehlerstellen. Sie sollten auf jeden Fall Ihre fertiken Scripts mit verschiedenen Browsern testen, um sicher zu sein, daß es bei allen "Kunden" klappt. Nichts ist ärgerlicher, als wenn man auf einer Webseite mit einem JavaScript-Error abgefertigt wird.
Nach diesem kleinen Ausflug in JavaScript wenden wir uns nun detailliert den Elementen der Sprache zu.
Die Definition von Variablen verläuft bei JavaScript recht freizügig. JavaScript unterscheidet nur zwei Arten von elementaren Variablen, Zahlen und Zeichenketten, und versucht herauszufinden, von welchem Typ eine Variable ist. Betrachten Sie dazu die folgenden Wertzuweisungen:
i = 10;
j = 1.3;
a = "Hallo";
Die Variablen i und j werden als Zahlen interpretiert, die Variable a als Zeichenkette. Kurz gesagt, alles was mit Gänsefüßchen eingeschlossen wird, ist eine Zeichenkette. Variable werden mittels des reservierten Worts "var" definiert. Daher sollte man obiges Beispiel eigentlich folgendermaßen schreiben (wenn es das erste Auftreten der Variablen i, j und a ist):
var i = 100;
var pi = 3.14;
var str = "Hallo";
Eine der Ungenauigkeiten von JavaScript ist, daß "var" nicht unbedingt verwendet werden muß. Im obigen Beispiel werden die Variablen definiert und es werden ihnen sofort Werte zugewiesen. Man kann Variable aber auch nur definieren und ihnen erst später Werte zuweisen:
var i, j, a;
txt = "Hallo";
Alle JavaScript-Kommandos, die wir bisher betrachtet haben, werden als Anweisungen bezeichnet. JavaScript-Anweisungen werden grundsätzlich mit einem Strichpunkt abgeschlossen. (Bis auf die letzte Anweisung, aber es ist besserer Programmierstil, alle Anweisungen mit Strichpunkt abzuschließen.) Weist man einer Variablen eine Zahl zu, so kann mit dieser Variablen gerechnet werden, d.h. man kann addieren, subtrahieren, usw. Enthält die Variable hingegen eine Zeichenkette, so kann eine weitere Zeichenkette angehängt werden - oder andere Zeichenketten-Operationen durchgeführt werden. Das Programm:
var i = 1;
var j = i + 5;
alert(j);
Gibt als Ergebnis den Wert 6 aus. Dagegen liefert das Programm
var i = "1";
var j = i + 5;
alert(j);
der Wert "15", denn die Zeichenkette "5" wird durch das "+"-Zeichen and die Zeichenkette "1" angehängt. Zeichenketten werden übrigens immer in Anführungszeichen eingeschlossen.
Zahlen-Variablen können entweder ganze Zahlen oder "Gleitpunktzahlen" enthalten. Diese Zahlen entsprechen unseren gebrochenen Zahlen mit Nachkommastellen, wobei in JavaScript die Zahlen mit Punkt geschrieben werden, also z.B. 1.57. Neben Addition und Subtraktion gibt es Multiplikation, Division und Division mit Rest. Dazu ein Beispiel:
var a = 2 * 7; /* Ergebnis: 14 */
var b = a / 3; /* Ergebnis 4.666666666666667 */
var c = a % 4; /* Ergebnis 2: Rest von 14 / 4 */
Damit kennen Sie auch gleich die Kommentar-Begrenzer von JavaScript, "/*" und "*/".
Oft erhöht oder verringert man den Wert einer Variablen um den Wert 1. Statt "a = a + 1;" kann man noch kürzer "a++;" schreiben. Analog dazu wird "a--;" für "a = a - 1;" eingesetzt. Dazu gibt es noch die Varianten "++a;" und "--a;". Der Unterschied liegt im Zeitpunkt der Werte-Änderung. Bei "alert(a++);" wird zuerst der Wert der Variablen a ausgegeben und danach ihr Wert um eins erhöht. Bei "alert(++a);" wird der Wert der Variablen a zuerst um eins erhöht, danach wird sie ausgegeben.
Mit Zahlen können Sie rechnen, aber was kann man mit Zeichenketten (Strings) machen? Ein String beginnt und endet in JavaScript immer mit einem Anführungszeichen. Beispiele:
"London"
" "
""
Im ersten String steht einfach nur Text, im zweiten String steht nur ein Leerzeichen, und im dritten String steht gar nichts, es ist der sogenannte "Nullstring". Strings kann man vergleichen, hintereinanderhängen ("Haus" + "und" + "Hof" ergibt dann "Haus und Hof" oder manipulieren. Einige Stringfunktionen:
In Zeichenketten lassen sich auch noch bestimmte Sonderzeichen verwenden:
Es gibt nur wenige Anweisungsstrukturen. Die erste ist die bedingte Anweisung oder Verzweigung. Abhängig von einer Bedingung witd im Programm verzweigt. Nur wenn die Bedingung "wahr" ergibt, werden die Anweisungen hinter dem "if"-Teil ausgeführt.
if (Bedingung)
{
Anweisungen
}
Die Bedingung kann auch zweiseitig sein, also einen "wahr"- und einen "falsch"-Teil enthalten:
if (Bedingung)
{
Anweisungen des wahr-Teils
}
else
{
Anweisungen des falsch-Teils
}
Verzweigungen können auch beliebig verschachtelt werden, man sollte aber auf eine korrekte Klammerung der Blöcke achten. Die Bedingung beim "if" ist meist ein Vergleich zweier Werte oder Variablen. Werden String-Variablen (Zeichenkette) verglichen, so gilt die lexikographische Ordnung. Folgende Vergleichsmöglichkeiten stehen zur Verfügung: < kleiner als <= kleiner oder gleich > größer >= größer oder gleich == gleich != ungleich Achtung: Eine der häufigsten Fehlerquellen ist das Verwechseln von Vergleich (==) und Zuweisung (=). Die wichtigsten Möglichkeiten, um zwei Bedingungen zu verknüpfen, sind die "und"-Verknüpfung mit "&&" und die "oder"-Verknüpfung mit "||". Beispielsweise wollen wir testen, ob eine Zahl x zwischen 0 und 10 liegt:
if ( x>=0 && x<=10 )
{
alert("x liegt zwischen 0 und 10.");
}
Oder wir testen, ob x gleich 2 oder 4 ist:
if ( x==2 || x==4 )
{
alert("x ist gleich 2 oder x ist gleich 4.");
}
Eine Vereinfachung von tief verschachtelten Verzweigungen ist manchmal mit der
"case"-Anweisung möglich. Hier sind jedoch keine beliebigen Bedingungen
möglich, sondern nur der Vergleich eines Variableninhaltes mit
verschiedenen (konstanten) Werten:
switch(x)
{
case 1:
alert("x ist 1");
break;
case 2:
alert("x ist 2");
break;
case 3:
alert("x ist 3");
break;
case 4:
alert("x ist 4");
break;
case 5:
alert("x ist 5");
break;
default:
alert("x ist anders");
break;
}
Die Marke "default" trifft auf jeden Wert zu, weshalb sie auch ganz zum Schluß kommt, denn bei der case-Anweisung wird von oben her verglichen, bis eine Marke "passt". Die Anweisung "break" sorgt dafür, daß die case-Anweisung an dieser Stelle verlassen wird. Fehlt sie, werden die folgenden Anweisungen abgearbeitet. Dazu ein Beispiel:
switch(x)
{
case 1:
case 3:
case 5:
alert("x ist ungerade");
break;
case 2:
case 4:
case 6:
alert("x ist gerade");
break;
default:
alert("x ist anders");
break;
}
Alle weiteren Anweisungsstrukturen von JavaScript sind Wiederholungsanweisungen oder Schleifen. Die for-Schleife ist die am häufigsten verwendete Wiederholungsanweisung. Sie besitzt eine Initialisierung (z. B. Setzen des Anfangswertes einer Zählvariablen), eine Abbruchbedingung (z. B. Endwert der Zählvariablen) und eine Anweisung zum Hochzählen. Alle drei Anweisungen werden zusammen in einer Zeile festgelegt, wobei keine zwingend notwendig ist. Zum Beispiel:
for (i=0; i<10; i++)
{
document.write(i+"<BR>");
}
Die Befehlsfolge schreibt die Werte der Variablen i von 0 bis 9 direkt in die HTML-Seite (an der Stelle, an der der Befehl steht). (Der Befehl "document.write" gibt eine Zeichenkette in die HTML-Seite aus. Hätte ich "alert" verwendet, müßten Sie nun bei 10 Alert-Boxen den OK-Button anklicken). Die Schleife bezieht sich auf den gesamten Block, der durch die Klammern { und } bezeichnet ist.
Mit anderen Wiederholungsanweisungen kann man den gleichen Effekt erreichen. So gibt es in JavaScript die while-Schleife als universelle Wiederholungsanweisung. Das obige Beispiel läßt sich damit folgendermaßen formulieren:
i=0;
while (i<10)
{
document.write(i+"<BR>");
i++;
}
Man nennt diese Schleife auch "abwweisende Wiederholungsanweisung", weil zuerst die Bedingung geprüft und dann der Block der Schleife durchlaufen wird. Es geht aber auch andersrum:
i=0;
do
{
document.write(i+"<BR>");
i++;
}
while (i<10);
Diese Schleife nennt sich "nichtabweisende Wiederholungsanweisung", weil - egal wie der Wert von i zu Beginn ist - die Schleife mindestens einmal durchlaufen wird. Zum Beenden bzw. Abkürzen von Schleifen dienen die Befehle "break" oder "continue". Mit "break" wird die Schleife sofort verlassen. Mit "continue" kann man erreichen, daß ein neuer Schleifendurchlauf gestartet wird.
Eigenschaften von Objekten können wiederum Objekte sein. Zum Beispiel ist ein HTML-Formular eine Eigenschaft des HTML-Dokumentes in dem es sich befindet. Ein Formular-Button ist eine Eigenschaft eines HTML-Formulars. Typische Objekte in JavaScript sind zum Beispiel:
Wollen Sie auf ein Objekt zugreifen, so gelten folgende Regeln:
... <form name="formular" ...> <input type="text" name="eingabe" ...> ... </form> ...
Sie können auf den Eintrag im Textfeld "eingabe" zugreifen, indem Sie vom Dokument über das Formular zum Eingabefeld gehen. In JavaScript lautet der Zugriff "document. formular. eingabe". Wollen Sie den Inhalt des Formulars abfragen, so müssen wir die Eigenschaft "value" des Eingabefeld-Objekts mit "document.formular.eingabe.value" abfragen. Die Eigenschaften eines Objektes können immer abgefragt werden, manchmal können Sie auch verändert werden.
Ein wichtiges Objekt in JavaScript ist "document", das Informationen über das HTML-Dokument, das gerade betrachtet wird, enthält. Man kann z.B. die Hintergrundfarbe des Dokumentes über "document.bgColor" erfragen oder einen roten Hintergrund durch die Anweisung
document.bgColor = "#FF0000";erzeugen. Ein Beipiel für eine Funktion, die speziell für das Objekt "document" existiert, habeb Sie schon kennengelernt:
document.write("Hallo");
Dieser Befehl schreibt an der Stelle, an der er
steht, den Text "Hallo".
Normalerweise muß man nicht alle Ereignisse,
Methoden und Eigenschaften aller JavaScript-Objekte auswendig
kennen. Fast alle Bücher über JavaScript beinhalten eine
Beschreibung der vorhandenen Objekte. Auch auf der Webseite von
Netscape befindet sich eine umfassende englischsprachige
Dokumentation.
Das Objekt "window"verwendet der Browser, um Inhalte anzuzeigen. Zum Beispiel öffnet der folgende Befehl ein neues Fenster mit dem entsprechenden URL:
window.open("http://www.netzmafia.de");
Man kann dem neuen Fenster auch einen Namen geben, um mit dem target-Befehl in Frames darauf zugreifen zu können:
window.open("http://www.netzmafia.de","Neu");
Zur window-open-Funktion gibt es eine Menge zusätzlicher Optionen,
die in einer Zeichenkette übergeben werden können, z. B.:
window.open("http://www.netzmafia.de","Neu","width=200,height=300");
In allen Browsern verfügbare Optionen sind:
Bei Angabe von mehreren Optionen werden diese jeweils durch Komma voneinander getrennt. Ist keine Option angegeben, werden alle Schalter standardmäßig auf "yes" gesetzt. Wenn mindestens eine Option angegeben wird, werden alle nicht angegebenen Optionen auf "no" gesetzt. Zulässige Werte für die Schalter sind "yes" oder "1" bzw. "no" oder "0". Wenn ein Schalter ohne Wert angegeben wird, dann wird "yes" angenommen. Das folgende Skript kann Fenster auf- und zumachen:
<script language="JavaScript">
function mini(text)
{
klein=window.open("","MiniFenster","menubar=no,width=250,height=150");
klein.document.open();
klein.document.write("<html><body><h1>Minifenster</h1>");
klein.document.write(text + "<br></body></html>");
klein.document.close();
}
</script>
Der Aufruf sieht dann beispielsweise so aus:
<form>
<input type="button" value="Minifenster auf"
onclick="mini('Klein aber fein, so soll es sein!')"><BR>
<input type="button" value="Minifenster zu"
onclick="klein.close()"><BR>
</form>
Wollen Sie das aktuelle Browser-Fenser auch zumachen? Dazu genügt folgende Befehlssequenz:
<form>
<input type=SUBMIT value="Close"
onClick="window.close();return false;">
</form>
| Ausprobieren |
|---|
Wird innerhalb der Ausgabe mit "write" ein Anführungszeichen benötigt, können wir das mit der Zeichenfolge \" erreichen. Durch den Backslash wird das Gänsefüßchen von JavaScript nicht als Anführungszeichen ausgewertet, sondern es wird das Zeichen" an die HTML-Seite weitergeleitet. Man nennt dies Maskieren von Sonderzeichen. Bei in HTML eingebetteten Befehlen kann man auch das einfache Anführungszeichen ( ' ) verwenden.
Man kann auch eine Auswahlbox zusammen mit Javascript verwenden. Betrachten Sie folgendes Formular:
<form name="auswahl">
<select name="links" onChange="surfto()">
<option>Themen
<option value="1">Thema 1
<option value="2">Thema 2
<option value="2">Thema 3
</select>
</form>
Beim Anklicken öffnet sich ein Menü:
Es ist kein Extra-Klick "GO" oder so erforderlich; nach Anklicken eines Menüpunktes wird sofort zur ausgewählten Seite verzweigt. Im Script müssen die Ziele angegeben werden. Es lautet beispielsweise:
<script type="text/javascript" language="JavaScript">
function surfto()
{
if (document.auswahl.links.selectedIndex=="1")
{window.location.href="ziel-1.html" }
if (document.auswahl.links.selectedIndex=="2")
{window.location.href="ziel-2.html" }
if (document.auswahl.links.selectedIndex=="3")
{window.location.href="ziel-3.html" }
}
</script>
Die Beispielseite ist auf diese Weise gestaltet.
Man kann in einem Formular auch Rechnen. Das Formular sieht dann so aus:
<form>
Bitte einen Rechenausdruck eingeben:
<input type="text" name="expr" size=15>
<input type="button" value="Ausrechnen" onclick="ausrechnen(this.form)">
<br>
Ergebnis: <input type="text" name="result" size=15>
<br>
</form>
Im Browser sieht man zwei Textfelder und einen Button:
Dazu gehört dann ein winziges Skript:
<script language="JavaScript">
function ausrechnen(form)
{
dmark = document.Beispiel.DM.value;
euro = dmark / 1.95583;
form.result.value = eval(form.expr.value);
}
</script>
Zum Ausprobieren wurde das Programm etwas modifiziert.
| Ausprobieren |
|---|
fenster = new window("");
fenster.document...
wird ein weiteres Fenster geöffnet, auf das wir mit dem Namen "fenster"
zugreifen können. Ein window-Objekt hat einige nützliche Eigenschaften:
<a href="http://www.netzmafia.de"
onMouseOver="window.status='http://www.microsoft.de';">
Microsoft</a>
fenster=window.open();
function foc(f)
{
f.focus();
}
function bl(f)
{
f.blur();
}
...
<input type=button value="a" onClick="foc(fenster)">
<input type=button value="b" onClick="bl(fenster)">
Sie haben bereits alert() kennengelernt. Dies ist eine Methode des window-Objekts. Daneben gibt es noch:
var erg = prompt("Festplatte löschen?","Ja");
alert(erg);
window.setTimeout("alert('Hallo')",2000);
i = 0;
function zaehle()
{
i++;
z = window.setTimeout("zaehle()",1000);
}
z = window.setTimeout("zaehle()",1000);
...
<form>
<input type=button value="Stop" onClick="window.clearTimeout(z);">
</form>
i = 0;
function setzeFarbe()
{
if (i==0) document.bgColor="red";
else document.bgColor="blue";
i = 1-i;
}
z = setInterval("setzeFarbe()",2000);
<form> <
input type=button value="Stop" onClick="window.clearInterval(z);">
</form>
Will man beispielsweise den natürlichen Logarithmus der Zahl 10 berechnen, so lautet der Befehl Math.log(10)".
<script language="JavaScript">
function tuwas()
{
alert("Hier kommt die Maus!");
...
}
</script>
Diese Funktionsdefinition kann an einer beliebigen Stelle des HTML-Dokuments stehen. Damit die Funktionsdefinitionen auf alle Fälle bereitstehen, wenn die HTML-Seite angezeigt werden, packt man die Definition meist zwischen <HEAD>...</HEAD>. Diese Funktion kann dann überall im Dokument verwendet werden, z. B. als Reaktion auf ein Ereignis:
<input type="button" value="Drück mich" onClick="tuwas();">
Bei der Definition von Funktionen ist zu beachten:
function warnung(text)
{
alert("WARNUNG: " + text);
}
Diese Funktion kann man zum Beispiel folgendermaßen verwenden:
meldung = "Hier kommt die Maus!";
warnung(meldung);
warnung("Die Katze wartet schon!");
Natürlich können auch mehrere Parameter verschiednene Typs übergeben
werden. Diese werden durch Komma getrennt:
function ausgabe(text, zahl)
{
alert(text + zahl);
}
...
ausgabe("Die Kreiszahl ist: ",3.1415);
Bei einer Funktion werden normalerweise alle Anweisungen bis zur geschweiften Klammer
ausgeführt. Man kann aber den Programmablauf mitten in einer Funktion mit der
Anweisung "return" abbrechen:
function wumpa(eingabe)
{
if (eingabe < 0)
{
return; /* Verlassen der Funktion */
}
else
{
...
}
}
Es kann auch irgendein Wert in einer Funktion berechnet (oder irgendwie erzeugt)
werden, der dann zurückgegeben wird:
function prozent(wert, prozentsatz)
{
var x = wert*(1.0 + prozentsatz/100.0);
return(x);
}
...
MWSt = prozent(NettoPreis,16);
alert(MWSt);
...
Beachten Sie die Definition "var x = ...". Weiter oben wurde gesagt, daß
bei der Definition von Variablen die Variablendefinition mit "var" nicht unbedingt
verwendet werden muß. In Funktionen ist hat "var" jedoch eine Bedeutung:
Wenn, wie in "prozent", die Variable x mit "var" definiert wird, so ist die
Variable x nur innerhalb der Funktion "prozent" bekannt. Außerhalb der
Funktion gilt die Variable x als nicht definiert. Notwendig ist dies zum Beispiel,
wenn eine Variable x im Hauptprogramm definiert ist (die Variable ist global),
in einer Funktion aber auch eine Variable x verwendet werden soll, die aber nicht
identisch mit der Variablen x des Hauptprogramms sein soll. Mit dem "var"-Befehl
in der Funktion wird eine lokale Variable x definiert, die nur in der
Funktion Gültigkeit hat.
<html>
<head>
<title>JavaScript: Beispiel</title>
<script LANGUAGE="JavaScript">
function compute(form)
{
form.result.value = eval(form.expr.value)
}
</script>
</head>
<body>
<h1>JavaScript-Rechner</h1>
Hier wird beim Drücken auf den "Berechnen"-Button eine
Messagebox geöffnet. Die Funktion "compute" wertet die
Eingabe aus und zeigt das Ergebnis.
<p>
<form>
Eingabe: <input TYPE="text" NAME="expr" SIZE=15 >
<input TYPE="button" VALUE="Berechnen" ONCLICK="compute(this.form)">
<br>
Ergebnis: <input TYPE="text" NAME="result" SIZE=15 >
</form>
</body>
</html>
| Ausprobieren |
|---|
<html>
<head>
<title>JavaScript: Beispiel</title>
<script>
var speed = 1000;
var tid = 0;
function dodate()
{
f.date.value=new Date();
tid=window.setTimeout("dodate()",speed);
}
function start(x)
{
f=x;
tid=window.setTimeout("dodate()",speed);
}
</script>
</head>
<body>
<h1>JavaScript-Uhr</h1>
Diese Funktion stellt eine kleine Uhr mit Datum dar.
<p>
<FORM name=dateform>
<input name=date size=28 value="">
</FORM>
<script>start(document.dateform);</script>
</body>
</html>
| Ausprobieren |
|---|
<html>
<head>
<title>JavaScript: Beispiel</title>
<script language="JavaScript">
function checkLength(mytext)
{
var tmplen = mytext.my_name.value.length
if (tmplen > 10) mytext.len.value = 'zu lang!'
else if (tmplen < 5) mytext.len.value = 'zu kurz!'
else mytext.len.value = tmplen
}
</script>
</head>
<body>
<h1>Feldlängenprüfung</h1>
<form>
Geben Sie etwas ein und klicken Sie irgendwo auf die Seite.<br>
Eingabe: <input type="text" name="my_name" size=20
onChange="checkLength(this.form)">
<br>
Länge: <input type="text" name="len" size=3>
</form>
</body>
</html>
<script language="JavaScript">
function ZweiFrames(URL1,Fr1Nummer,URL2,Fr2Nummer)
{
parent.frames[Fr1Nummer].location.href=URL1;
parent.frames[Fr2Nummer].location.href=URL2;
}
</script>
Innerhalb eines Links wird die Funktion dann wie folgt aufgerufen:
<a href="javascript:ZweiFrames('URL',Frameindex,'URL',Frameindex)">
Link zum ändern zweier Frames</a>
Für "URL" ist die gewünschte Webseite anzugeben, die dann der
Funktion übergeben wird. Frameindex bezieht sich auf die Reihenfolge der
definierten Frames in der Frameset-Definition. Der erste definierte Frame hat
dabei den Index 0!
| Ausprobieren |
|---|
<html>
<head>
<title>JavaScript: Beispiel</title>
<SCRIPT LANGUAGE="JavaScript">
var msg = " Lauftext in Statuszeile und Textfeld * ";
var txt = msg;
function lauftext()
{
window.document.lauf.text.value = txt;
self.defaultStatus = txt;
// Lauftext um ein Zeichen nach links schieben
txt = txt.substring(1, txt.length) + txt.substring(0, 1);
// Timeout fuer naechste Ausgabe setzen
Text=window.setTimeout("lauftext()", 200);
}
function stop()
{
window.clearTimeout(Text);
window.document.lauf.text.value = '';
self.defaultStatus = 'JavaScript-Anwendungsbeispiele';
}
</script>
</head>
<body>
<h1>Laufschrift</h1>
<form name=lauf>
<input type=button onClick=lauftext() value="Lauftext anzeigen">
<input type=button onClick=stop() value="Lauftext aufheben"><p>
<input type=text name=text size=30>
</form>
</body>
</html>
| Ausprobieren |
|---|
for (i=0;i<xyz.length;i++)
{
document.write(xyz[i] + "<BR>");
}
Genauso wie auf Arrayelemente können Sie auch auf Images (<IMG SRC= ...>),
Links (<A HREF=...>) und auf Formulare (<FORM> ...</FORM>) in einem
Dokument zugreifen. Zum Beispiel erhalten Sie mit
document.forms[0]
das erste Formular in einer HTML-Seite. Jedes Formular enthält als Unterobjekt
ein Array der Eingabefelder. Diese besitzen wiederum eine Eigenschaft"value". Wollen
Sie beispielsweise die Eingabe aller Felder im ersten Formular einer HTML-Seite ausgeben,
so könnte dies folgendermaßen programmiert werden:
for (i=0; i<document.forms[0].elements.length; i++)
{
document.write(document.forms[0].elements[i].value + "<BR>");
}
Ebenso kann man auf die Namen und andere Eigenschaften des Formulars zugreifen. Ein
Unterobjekt des Objektes "document" ist ein Array der Links, die das Dokument
enthält. Die Anzahl der Links auf einer Seite erhalten Sie mit
"document.links.length" und die Verweise selbst können Sie durch
document.links[0];
document.links[1];
...
document.links[document.links.length-1];
erfragen. Genauso gibt es ein Array namens "images", das die Verweise auf Bilder
in einem Dokument enthält.
Auf die Array-Unterobjekte eines Dokuments kann auch noch mit dem Namen des jeweiligen Objektes zugegriffen werden. Für die beiden Objekte des dritten Formulars der Seite:
document.meinform.elements.length
document.meinform.eingabe1.value
gibt noch zwei Möglichkeiten, als Array darauf zuzugreifen. Erstens:
document.forms[2].elements.length
document.forms[2].elements[0].value
oder
document.forms["meinform"].elements.length
document.forms["meinform"].elements["eingabe1"].value
Es sind also auch die Objektnamen zur Auswahl des Arryelementes erlaubt. Diese
Möglichkeit beugt Programmierfehlern vor, die entstehen, wenn in der HTML-Seite
die Reihenfolge der Formulare oder Eingabefelder verändert wird.
Wenn wir ein eigenes Array benötigen, so muß dieses Array zuerst erzeugt werden:
var a = new Array();
JavaScript ist zwar nicht vollständig objektorientiert, aber doch objektbezogen.
Der Konstructor "new" erzeugt ein neues Objekt, in diesem Fall ein Array. Jedes Objekt
hat üblicherweise eine Methode mit dem gleichen Namen wie das Objekt selbst - den
sogenannten Konstruktor. Durch Aufruf dieses Konstruktors wird ein neues Objekt von
diesem Typ erzeugt, bzw. eine neue Instanz dieses Objekts generiert. Danach kann dieses
Feld mit Daten gefüllt werden:
for (i=0;i<100;i++) a[i] = i*i;
Ein Array kann aber auch gleich bei der Erzeugung vorbelegt werden:
var a = new Array(1,2,4,9,16);
<form>
<input type=button value="Klick" onClick="alert('Hallo');">
</form>
Folgende Standard-Ereignisse kennt JavaScript, allerdings sind nicht alle Ereignisse
für jedes graphische Objekt relevant. Außerdem kennt nicht jede Version
jedes Browsers all diese Ereignisse, bzw. es gibt weitere, nur teilweise realisierte
Ereignisse.
| Event | Beschreibung | Tags |
|---|---|---|
| onAbort | Anwender drückt auf STOP, bevor alle Bilder geladen wurden. | img |
| onBlur | Element verliert den Fokus | body, input, select, textarea, u. a. |
| onFocus | Element erhält Focus, siehe onBlur | |
| onChange | Benutzer verändert Eintrag | input, select, textarea |
| onClick | Benutzer klickt auf Element | button, checkbox, radio, submit, u. a. |
| onLoad | Tritt ein, nachdem eine HTML-Datei vollständig geladen wurde. | body, frameset |
| onUnload | tritt ein, wenn eine HTML-Datei verlassen wird | body, frameset |
| onMouseover | tritt ein, wenn die Maus über das Element geführt wird | sehr viele Elemente |
| onReset | Beim Auslösen des Reset-Befehls in einem Formular | form |
| onSelect | tritt ein, wenn der Benutzer Text selektiert | input, textarea |
| onSubmit | tritt ein, wenn ein Formular abgeschickt wird | form, table |
Ein Beispiel: Man definiert zwei Funktionen "start" und "ende":
var s,e;
function start()
{
alert("Herzlich willkommen!");
}
function ende()
{
alert("Auf Wiedersehen!");
}
Diese Funktionen werden im body-Tag nach dem Laden der Seite, bzw. beim Verlassen
der Seite aufgerufen, indem man folgende Event-Handler vereinbart:
<body onLoad="start();" onUnload="ende();" >
Weiteres Beispiel: Falls der Benutzer mit der Maus über einen Verweis fährt, wird in der Statuszeile ein entsprechender Text angezeigt:
<a href="xxx.htm"
onMouseover="status='Klick mich';">Verweis</a>
Man kann mit solchen Event-Handlern die Funktionsweise von HTML-Objekten an seine Bedürfnisse anpassen. Dazu muß man JavaScript mitteilen, ob die ursprünglich vorgesehene Aktion noch ausgeführt werden soll. Wenn man nur das Meldungsfenster angezeigt haben will, so muß man zusätzlich "return false" an JavaScript zurückgeben:
<a href="xxx.htm"
onClick="alert('Klick mich');return false;">Verweis</a>
Dadurch wird verhindert, daß der Link verfolgt wird.
Ein weiteres Beispiel dazu ist "onSubmit". Wir können z.B. nochmals nachfragen, ob ein Formular wirklich abgeschickt werden soll.
<form ... onSubmit="return confirm('wirklich abschicken?')">
...
</form>
| Ausprobieren |
|---|
"confirm()" erzeugt wie "alert()" ein Meldungsfenster. Zusätzlich wird true oder false zurückgegeben, je nachdem ob auf "OK" oder "Abbruch" geklickt wird.
Beispiel: Mit Hilfe des Standardobjekts "history" kann nun in den einzelnen Frames ein Back-Knopf definiert werden:
<form>
<Input type="button" value="BACK" onClick="self.history.back()">
</form>
Ebenso funktioniert ein Forward-Knopf, falls man zuvor den Back-Knopf benutzt hatte.
Man kann diesen Knopf natürlich auch in einen anderen Frame setzen, um nicht
jedesmal den Knopf bei sich ändernden Seiten in die neuen Texte integrieren
zu müßen. Wenn man z.B. zwei Frames benutzt, wobei das erste ein
Inhaltsverzeichnis darstellt, mit dem Back-Knopf versehen, und im zweiten die
einzelnen Seiten geblättert werden, so müßte der Ausdruck für
den Event-Handler folgendermaßen lauten:
parent.frames[1].history.back()
Betrachten Sie nun die einzelnen Handler etwas genauer:
<form>
<input type="password" onBlur="alert(Danke sehr!')">
</form>
<form>
<select name="Farbe1" onChange="alert('Danke')">
<option selected>Rot
<option>Blau
<option>Grün
<option>Gelb
</select>
</form>
<form>
<input type="radio" name="Farbe" value="Rot"
checked onClick="alert('Rot ist die Liebe')">ROT
<input type="radio" name="Farbe" value="Gelb"
checked onClick="alert('Gelb ist der Neid')">GELB
</form>
<form>
<input type="text" name="bsp"
onFocus="form.bsp.value='Das war´s!'">
</form>
Das folgende Beispiel expandiert das Browserfenster auf volle Bildschirmgrösse:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function expand()
{
for(x = 0; x < 50; x++)
{
window.moveTo(screen.availWidth * -(x - 50) / 100, screen.availHeight * -(x - 50) / 100);
window.resizeTo(screen.availWidth * x / 50, screen.availHeight * x / 50);
}
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
//-->
</script>
</head>
<body onLoad="expand()">
....
</body></html>
<a href="URL"
onMouseOver="self.status='Zur URL';return true">URL</a>
Bei einigen Browser-Versionen scheint dieser Event-Handler bei einem Reload der
Seite nicht zu funktionieren, man muß die Seite erneut aufrufen (das
URL-Fenster anklicken am Ende des URL die Enter-Taste) bzw. die Shift-Taste
gedrückt halten und dann auf "Reload" klicken (Netscape). Mehr zu diesem
Event finden Sie weiter unten beim Abschnitt über das Imafe-Objekt.
| Ausprobieren |
|---|
Normalerweise soll auf der HTML-Seite das linke Bild angezeigt werden. Fährt man mit der Maus über das Bild, soll das rechte Bild angezeigt werden. Zuerst wird ein Script geschrieben, das zwei Bildobjekte anlegt und ihnen die beiden Bilder ("over.gif" und "out.gif") zuordnet. Das Script hat gleichzeitig den Effekt, daß die Bilder bereit beim Lesen der Headers geladen werden und bereits im Browser-Cache stehen, wenn sie benötigt werden. Beachten Sie auch, daß im Beispiel das Bild des Schalters das erste auf der Webseite ist - sonst muß der Index angepaßt werden. Die Funktionen laden jeweils das passende Bild.
<script language=JavaScript>
ov = new Image();
ou = new Image();
ov.src = "over.gif";
ou.src = "out.gif";
function over()
{
this.document.images[0].src = ov.src;
}
function out()
{
this.document.images[0].src = ou.src;
}
</script>
Nun fügen wir dem Link-Befehl die beiden Event-Handler onMouseOver
und onMouseOut hinzu:
<a href="URL"
onMouseOver="over();
onMouseOut="out();">
<IMG src="out.gif" border=0></a>
Fährt man mit der Maus über das Bild, bzw. verläßt die Maus
das Bild, so wird das Bild gewechselt.
| Ausprobieren |
|---|
Man könnte das auch noch einfacher haben:
<a href="URL"
onMouseOver="window.document.images[0].src = 'over.gif';"
onMouseOut="window.document.images[0].src = 'out.gif';">
<IMG src="out.gif" border=0></a>
Dann besteht aber die Gefahr, daß das Bild "over.gif" erst geladen wird, wenn der
Mauszeiger über "out.gif" steht, was zu einem unschönen Effekt führt.
Im obigen Beispiel werden die Bilder vorab geladen und stehen damit sofort zur
Verfügung.
Im Beispiel oben wurde das erste Bild der Seite ausgewählt (Index 0). Das ist nicht immer praktisch, denn wenn der Rollover-Effekt mit etlichen Bildern in einer größeren Seite programmiert werden soll. Nehmen wir noch einmal das einfache Beispiel oben. Hier wurde ein HTML-Element über seine Nummer angesprochen. Besser ist es, Elemente über ihren Namen anzusprechen. Das hat den Vorteil, daß man die Bilder nicht abzählen muß und man nicht sämtliche Nummern ändern muß, wenn noch ein weiteres Bild vorne eingefügt wird. Sehen wir uns das gleiche Beispiel nochmals mit Namen an:
<a href="URL"
onMouseOver="window.document.button1.src = 'over.gif';"
onMouseOut="window.document.button1.src = 'out.gif';">
<IMG src="out.gif" name="button1" border=0></a>
Neu dazugekommen ist, daß das Bild nun mit den "name"-Attribut einen Namen
bekommen hat. Über diesen Namen kann das Bild dann in den nächsten Zeilen
angesprochen werden.
Weitere Eigenschaften des Image-Objekts entsprechen den Attributen des IMG-Tags, es sind:
Mit JavaScript läßt sich auch eine kleine Diashow basteln. Die Elemente eines Bilder-Arrays werden zyklisch angezeigt.
<img name="anzeige" src="bild1.gif">
<script language="JavaScript">
var bildarray = new Array();
bildarray[0] = new Image(); bildarray[0].src="bild1.gif";
bildarray[1] = new Image(); bildarray[1].src="bild2.gif";
bildarray[2] = new Image(); bildarray[2].src="bild3.gif";
bildarray[3] = new Image(); bildarray[3].src="bild4.gif";
var i = 0;
function film()
{
if (i > 3) i = 0;
document.anzeige.src = bildarray[i].src;
i++;
window.setTimeout("film()",1000);
}
window.setTimeout("film()",1000);
</script>
| Ausprobieren |
|---|
var request = new XMLHttpRequest();
request.open('post', 'MeineSeite.php', true);
request.send(null);
In der ersten Zeile wird ein neues Request-Objekt erzeugt, das dann in der
zweiten Zeile geöffnet wird. Der erste Parameter gibt die Requestmethode (POST)
an. Der zweite Parameter definiert das Ziel, also die Adresse an die Sie Ihren
Request verschicken wollen. Der dritte Parameter ist optional (Standardwert true).
Wird hier false eintragen, bedeutet dies, dass die Anfragen nicht asynchron
laufen und der User so lange warten muss, bis der aktive Request abgeschlossen
ist. In der dritten Zeile wird der Request gesendet - im Beispiel ohne Parameter (null).
Nun widmen wir uns XMLHttpRequest-Eigenschaften und der Status-Abfrage für diesem Request. Dabei erhalten wir Unterstützung von den Funktionen onreadystatechange, responseText, responseXML und status. Der Event-Handler onreadystatechange wird bei jeder Statusänderung aufgerufen und kann folgende Werte enthalten:
0 = uninitialized 1 = loading 2 = loaded 3 = interactiv 4 = completeDer Event-Handler responseText enthält die reinen Textdaten aus dem Antwortpaket. Der Event-Handler responseXML liefert ein DOM-Objekt mit der Antwort des Servers (sofern ein XML-Dokument gesendet wurde) aus den XML-Daten. Der Event-Handler status liefert den numerischer Statuscode des Antwortpakets, z.B. 404 = Not Found oder 200 = OK. Das folgende Beispiel zeigt die Anwendung der Event-Handler:
function interpretRequest()
{
switch (request.readyState)
{
// readyState 4 und request.status 200:
// alles korrekt gelaufen
case 4:
if (request.status != 200)
{ alert("Fehler:"+request.status); }
else
{
var content = request.responseText;
// den Inhalt des Requests in einen
// <div>-Container schreiben
document.getElementById('content').innerHTML
= content;
}
break;
default: // alle anderen Fehler/Statusmeldungen
break;
}
}
Zum Empfang des Requests ist auf der Webseite nur ein <div id="content"> </div>
nötig. Leider ist es in der Praxis nicht so einfach, weil beispielsweise der Internet-Explorer
das XMLHttpRequest-Objekt bis Version 7 nicht kennt, sondern nur ActivX-Objekte. Also ist beim
Absenden des Requests eine Browserweiche notwendig:
function setRequest()
{
if (window.XMLHttpRequest)
{
request = new XMLHttpRequest(); // Mozilla, Safari, Opera
}
else
if (window.ActiveXObject)
{ // Internet Explorer 5
try { request = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{ // IE 6
try { request = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e) {}
}
}
if (!request)
{
alert("Kann keine XMLHTTP-Instanz erzeugen");
return false;
}
else
{
var url = "MeineSeite.php";
request.open('post', url, true);
request.send(null);
request.onreadystatechange = interpretRequest;
}
}
In der Browserweiche müssen Sie mit try und catch arbeiten, denn es kann ja
sein, dass der User seinem Internet Explorer so konfiguriert hat, dass er keine ActivX-Objecte
akzeptiert und das würde zu einem Fehler führen! In der letzten Abfrage wird überprüft ob der
Request erzeugt werden konnte. Ist das nicht der Fall, bedeutet das, dass der User einen
veralterten Browser hat oder das sein Internet Explorer keine ActivX-Objekte akzeptiert.
Das nun folgende Beispiel zeigt, wie die oben beschriebenen Funktionen mit der abzurufenden Seite zusammenarbeiten:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajax Beispiel</title>
<script type="text/javascript">
var request = false;
function setRequest()
{
// Request erzeugen, siehe oben
...
}
function interpretRequest()
{
// Request auswerten, siehe oben
...
}
</script>
</head>
<body>
<a href="javascript:setRequest()">Klick mich und staune! </a>
<div id="content">
</div>
</body>
</html>
Der komplette Code der abgerufenen Seite (hier als PHP-Script, siehe Kapitel 6) lautet:
<?php
header('Content-Type: text/html; charset=utf-8');
// sorgt für die korrekte Kodierung
header('Cache-Control: must-revalidate, pre-check=0, no-store,
no-cache, max-age=0, post-check=0'); // wichtig wegen IE
echo "Hallo Welt - wie immer das erste Programm";
?>
Damit wurde aber nur die Oberfläche von Ajax "angekratzt", denn komplexere Anwendungen
erfordern natürlich nicht nur tiefere Kenntnisse von JavaScript, sondern auch noch
mehr Wissen über das HTTP-Protokoll.