Inhalt dieses Kapitels:
Erhältlich u.a. bei Amazon.de
2
Von Stefan Mintert
In diesem Kapitel geht es um die Sprache JavaScript. Sie werden nun einwenden, dass dieser Hinweis überflüssig sei, da sich das gesamte Buch auf dieses Thema konzentriert. Wir wollen hier, aus gegebenem Anlass, jedoch zwischen der Sprache und den Objekten, mit denen sie arbeitet, unterscheiden.
JavaScript wurde von Netscape selbst als "objektbasiert" bezeichnet. Damit war gemeint, dass einige Ideen aus der objektorientierten Welt übernommen wurden, dass JavaScript aber nicht so ausdrucksstark ist wie zum Beispiel Java.
In den hier betrachteten Anwendungen arbeiten wir mit Objekten. Genauer gesagt, mit solchen, die mit der HTML-Seite, die unserem JavaScript-Programm ein Heim bietet, in Verbindung stehen. Von den Objekten (Formulare, Bilder und so weiter) wird im nächsten Kapitel und im Rest des Buches die Rede sein. Zuerst ist die Sprache an der Reihe, mit der wir die Objekte manipulieren, steuern und beeinflussen.
Um mit der Sprache zu spielen, benötigen wir ein wenig Handwerkszeug, das wir hier ohne große Erklärung vorstellen:
| Gewünschte Wirkung | JavaScript-Ausdruck |
|---|---|
| Ausgabe von Text in der HTML-Seite | document.write("Hallo Welt!"); document.writeln("Hallo Welt!"); |
| Öffnen eines Fensters mit Text | alert("Hallo Du!"); |
| Ja/Nein-Eingabe vom Benutzer erfragen | confirm("Bist Du sicher?"); |
| Freitext-Eingabe vom Benutzer erfragen | prompt("Gib's mir"); |
In der Tabelle sind alle Anweisungen mit einem Semikolon abgeschlossen. Dies ist kein Muss, sollte jedoch eingehalten werden.
Variablen können in JavaScript ohne vorherige Bekanntmachung benutzt werden. Aus Gründen der besseren Lesbarkeit eines Programms empfehle ich jedoch, Variablen
Hier einige Variablendefinitionen:
var kontonummer = 0; var kontoinhaber = ""; var kontostand = 0.0;
Typ einer Variablen
In diesem Beispiel sind alle Variablen mit einem "leeren" Wert vordefiniert. Selbstverständlich können Sie auch gleich "richtige" Werte einsetzen. Sie sehen auch, dass der Typ der Variablen nicht explizit festgelegt wird. Eventuell möchten Sie die Namen so wählen, dass Sie beim späteren Lesen des Programms erkennen können, welcher Typ es sein soll:
var iKontonummer = 0; var sKontoinhaber = ""; var fKontostand = 0.0;
Dabei steht i für eine Ganzzahl (Integer), s für eine Zeichenkette (String) und f für eine Fließkommazahl (float). Dies ist jedoch nur eine Konvention, die Sie selbst anwenden, verändern oder ignorieren können.
Das Rechnen in JavaScript ist relativ intuitiv. Für die Grundrechenarten Addition, Subtraktion, Multiplikation und Division stehen die üblichen Symbole +, -, *, / zur Verfügung. Zahlen können einfach in der folgenden Weise behandelt werden:
var zwischenergebnis = (3 + 4 ) * 5 - 6; var ergebnis = zwischenergebnis * 3;
Es gelten die bekannten Regeln, wie "Punkt- vor Strichrechnung", die Sie durch Klammersetzung verändern können.
Anführungszeichen immer paarweise
Zeichenketten (engl. Strings) werden im Programm in Anführungszeichen eingeschlossen. Sie haben die Wahl zwischen einfachen und doppelten Zeichen, sie müssen aber immer paarweise auftreten. Der wichtigste Operator für Strings ist das Pluszeichen. Damit werden zwei Zeichenketten aneinander gehängt. So besitzt zum Beispiel der Ausdruck
"Hallo" + "Welt"
den Wert HalloWelt. Beachten Sie, dass kein Leerzeichen dazwischen steht, weil es auch in den Teilzeichenketten nicht vorhanden war.
Der Versuch, Zahlen und Strings mit dem Plus zu verknüpfen, sorgt nicht etwa für einen Fehler. Zwar sieht der Ausdruck
"Das Jahr-" + 2000 + "-Problem"
nach einer ungültigen Verknüpfung aus, er ist es aber nicht. JavaScript ist nicht in der Lage, aus "Das Jahr-" und "-Problem" eine Zahl zu machen, aber aus 2000 kann man ganz leicht "2000" machen; und genau das geschieht auch. Das Ergenis ist daher "Das Jahr-2000-Problem".
Diese Eigenschaft kann man gelegentlich dazu benutzen, JavaScript dazu zu bringen, einen Wert unbedingt als String zu behandeln.
Als dritten Typ, neben Zahlen und Zeichenketten, gibt es noch die Wahrheitswerte (Boolean) true und false. Sie werden oft benutzt, um Bedingungen auszuwerten.
Die folgenden Ausdrücke sind alle wahr (true):
3 < 4 ; "a" < "b" ; 10 >= 10 ; "xyz" == "xyz"
Die folgenden Ausdrücke sind alle falsch (false):
3 == 4 ; "a" > "b" ; 10 < 10 ; 5 != 2+3
Während die Kleiner/Größer-Vergleiche offensichtlich sind, müssen wir noch den Test auf Gleichheit und Ungleichheit beachten; ersterer wird mit den Zeichen == notiert, letzterer durch !=.
Zum Steuern eines Programms gibt es eine Reihe von Anweisungen, die vermutlich aus anderen Sprachen schon bekannt sind. Wir erklären Sie anhand von einfachen Beispielen.
for-Schleife
Den Anfang macht die so genannte for-Schleife, die eine Anweisungsfolge für eine bestimmte Anzahl an Durchläufen wiederholt.
var summe = 0;
for (var i=1 ; i<=10 ; i=i+1)
{
summe = summe + 1;
}
document.writeln("Ergebnis ist: ",summe);
Hier werden die Zahlen von 1 bis 10 aufaddiert und das Ergebnis in die Variable summe geschrieben. Die Zählvariable i beginnt bei 1 (i=1), läuft solange i kleiner oder gleich 10 ist (i<=10) und wird bei jedem Durchlauf um 1 erhöht (i=i+1). Anschließend gibt document.writeln das Ergebnis aus.
while-Schleife
Eine andere, allgemeinere Form der Schleife ist die while-Schleife. Ihr Aufbau sieht folgendermaßen aus:
while (bedingung)
{
anweisungen
}
Dabei steht die Bedingung für einen Ausdruck, der entweder wahr (true) oder falsch (false) ist. Solange die Bedingung wahr ist, werden die Anweisungen im Schleifenrumpf ausgeführt.
Hierbei ist unbedingt darauf zu achten, dass in der Schleife etwas passiert, das dafür sorgt, dass die Bedingung irgendwann nicht mehr wahr ist. Andernfalls hätte man eine Endlosschleife konstruiert und das Programm würde niemals beendet werden.
if-then-else
Eine weitere wichtige Anweisung zur Programmsteuereung ist die if-then-else-Anweisung. Sie wird dazu verwendet, in Abhängigkeit einer Bedingung einmal entweder den einen oder den anderen Befehl auszuführen. Die Syntax zeigt das folgende Beispiel:
if (kontostand < 0)
{
document.writeln("Du bist pleite :-(");
}
else
{
if (kontostand == 0)
{
document.writeln("Du hast kein Geld :-|");
}
else
{
document.writeln("Du bist reich :-)");
}
}
Das Beispiel zeigt zwei ineinander verschachtelte if-then-else-Abfragen, die genau drei Fälle unterscheiden. Abgesehen von der fragwürdigen Aussage, dass ein positiver Kontostand gleichbedeutend mit Reichtum ist, sollte die Funktionsweise des Listings keiner weiteren Erklärung bedürfen. Sie müssen jedoch noch wissen, dass der else-Teil weggelassen werden kann, falls er nicht benötigt wird.
Es gibt auch noch eine Kurzform der if-then-else-Abfrage, die folgendermaßen aussieht:
(bedingung ? then-ausdruck : else-ausdruck)
Meist wird diese Form verwendet, um einen Wert in Abhängigkeit einer Bedingung zu ermitteln, wie in folgendem Beispiel.
document.writeln("Du bist ",
(kontostand > 0 ? "liquide" : "zahlungsunfähig"));
Funktion sind für die Strukturierung von Programmen sehr wichtig. Sie erlauben es, mehrfach verwendete Anweisungsfolgen unter einem Namen (dem Funktionsnamen) zusammenzufassen und später durch "Aufruf" der Funktion die Anweisungen auszuführen. Ein Beispiel:
function quadrat(x)
{
return x*x;
}
document.writeln("Das Quadrat von 2 ist ",quadrat(2));
document.writeln("Das Quadrat von 3 ist ",quadrat(3));
document.writeln("Das Quadrat von 5 ist ",quadrat(5));
document.writeln("Das Quadrat von 8 ist ",quadrat(8));
Es empfiehlt sich, Funktionen zu Beginn der HTML-Datei, also im Kopf, unterzubringen. Dadurch ist gewährleistet, dass sie als Erstes definiert werden und beim späteren Aufruf auch tatsächlich zur Verfügung stehen. Das obige Beispiel liest sich vollständig so:
<html>
<head><title>Quadratzahlen</title>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
function quadrat(x)
{
return x*x;
}
// Ende: Inhalt verstecken -->
</script>
</head>
<body>
<h1>Qudratzahlen</h1>
<pre>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
document.writeln("Das Quadrat von 2 ist ",quadrat(2));
document.writeln("Das Quadrat von 3 ist ",quadrat(3));
document.writeln("Das Quadrat von 5 ist ",quadrat(5));
document.writeln("Das Quadrat von 8 ist ",quadrat(8));
// Ende: Inhalt verstecken -->
</script>
</pre>
<noscript>
Ihr Browser kann keine JavaScript-Programme
ausführen. Aus diesem Grund sehen Sie hier
nichts. :-(
</noscript>
</body>
</html>
Listing 2.1: Einsatz der Quadratfunktion - beispiel0201.html -
Sichtbarkeitsbereich von Variablen
Wenn Sie viele Variablen und viele Funktionen in Ihrem Programm verwenden, stellt sich rasch die Frage, in welchem Kontext eine Variable sichtbar ist oder nicht. Die Antwort ist relativ einfach: Eine Variable, die innerhalb einer Funktion mit var deklariert wird, ist nur innerhalb dieser Funktion sichtbar.
<html>
<head><title>Sichtbarkeit von Variablen</title>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
// Definition einer Funktion, die die Variable
// aus dem Hauptprogramm veraendert
function f1()
{
document.writeln("f1: Wert von x ist ",x);
x = 10;
document.writeln("f1: Wert von x ist ",x);
}
// Definition einer Funktion, die eine lokale
// Variable definiert
function f2()
{
document.writeln("f2: Wert von x ist ",x);
var x = 15;
document.writeln("f2: Wert von x ist ",x);
}
// Ende: Inhalt verstecken -->
</script>
</head>
<body>
<h1>Sichtbarkeit von Variablen</h1>
<pre>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
// Definition von x
var x = 5;
// Ausgabe des Wertes von x
document.writeln("HP: Wert von x ist ",x);
// Aufruf der Funktion f1()
f1();
// Ausgabe des Wertes von x
document.writeln("HP: Wert von x ist ",x);
// Aufruf der Funktion f2()
f2();
// Ausgabe des Wertes von x
document.writeln("HP: Wert von x ist ",x);
// Ende: Inhalt verstecken -->
</script>
</pre>
<noscript>
Ihr Browser kann keine JavaScript-Programme
ausführen. Aus diesem Grund sehen Sie hier
nichts. :-(
</noscript>
</body>
</html>
Listing 2.2: Sichtbarkeit von Variablen - beispiel0202.html -
Die Ausgabe, die durch dieses Programm erzeugt wird, zeigt das folgende Listing:
HP: Wert von x ist 5 f1: Wert von x ist 5 f1: Wert von x ist 10 HP: Wert von x ist 10 f2: Wert von x ist undefined f2: Wert von x ist 15 HP: Wert von x ist 10
Es ist leicht zu erkennen, dass sich das Hauptprogramm und die Funktion f1() die Variable x "teilen", sie ist global. Im Gegensatz dazu führt die Deklaration der Variablen x in f2() dazu, dass die Variable lokal ist. Sie besitzt zu Beginn sogar nicht einmal einen Wert, sie ist undefiniert.
Nach Möglichkeit sollten globale Variablen vermieden werden, da durch sie das Programm unübersichtlicher und damit fehleranfälliger wird.
Arrays besitzen wie Variablen einen Namen. Im Unterschied zu Variablen, können Arrays aber nicht nur einen Wert, sondern mehrere Werte speichern. Jeder dieser Werte steht an einer bestimmten Position im Array. Im einfachsten Fall werden diese Positionen einfach durchnummeriert und später über einen numerischen Index angesprochen. Das folgende Beispiel verdeutlicht dies:
// Neues Array definieren:
var meinArray = new Array();
// Array mit Inhalt füllen:
meinArray[0] = "D";
meinArray[1] = "C";
meinArray[2] = "B";
meinArray[3] = "A";
document.writeln("Das Array hat ",
meinArray.length," Einträge");
for (var i = 0; i < meinArray.length; i = i+1)
{
document.writeln("Inhalt von Feld ",
i," ist ",meinArray[i]);
}
Listing 2.3: Ein Array - beispiel0203.html -
Als Ausgabe werden folgende Zeilen angezeigt:
Das Array hat 4 Einträge Inhalt von Feld 0 ist D Inhalt von Feld 1 ist C Inhalt von Feld 2 ist B Inhalt von Feld 3 ist A
Das Beispiel zeigt, dass
Neben der Verwendung von Nummern als Index ist auch ein String erlaubt. So könnte man beispielsweise ein Array namens telefon[] in der Form
telefon["Elisa"] = "0 7372 / 6876"
Assoziative Arrays
mit Werten füllen, die anschließend etwa durch den Ausdruck telefon["Elisa"] abgefragt werden könnten. Solche Arrays heißen assoziative Arrays. Das Durchlaufen mit der for-Schleife funktioniert hierbei natürlich nicht mehr.
leicht
Schreiben Sie ein Programm, das die Quadrate der Zahlen von 0 bis 9 untereinander in einer HTML-Seite ausgibt.
mittel
Schreiben Sie ein Programm, das untereinander die Zeichenfolge "0", "01", "012", "0123", ... , "0123456789" ausgibt. Die Anführungszeichen gehören nicht zur Ausgabe.
leicht
Benutzen Sie die Lösung für Übung 1 und schreiben Sie das Programm so um, dass an Stelle der for-Schleife eine while-Schleife zum Einsatz kommt.
mittel
Schreiben Sie eine HTML-Seite, die den Besucher der Seite beim Laden nach seinem Vornamen fragt und in Erfahrung bringt, ob er mit "Du" oder "Sie" angesprochen werden möchte. Anschließend erscheint ein kurzer Begrüßungstext, der den Namen des Besuchers hervorgehoben (fett) enthält und ihn korrekt mit "Du" oder "Sie" anredet. Zur Hervorhebung des Namens schreiben Sie bitte eine Funktion, die einen beliebigen Text, der als Parameter übergeben wird, in die HTML-Tags <strong> und </strong> einschließt.
leicht
Schreiben Sie ein Programm, das ein assoziatives Array namens adresse[] definiert, dieses für die Indizes name, anschrift, plz, ort mit Werten füllt und die Werte anschließend in einer HTML-Tabelle darstellt.
Vergleichen Sie, was passiert, wenn man das assoziative Array genau so mit einer for-Schleife durchläuft, wie es oben mit dem Array meinArray[] vorgeführt wurde.
leicht
Testen Sie, wie sich der Inhalt des oben gezeigten Arrays meinArray[] ändert, wenn Sie die Anweisung meinArray.sort() ausführen.
Benutzen Sie eine for-Schleife, die von 0 bis 9 hochzählt, den Zähler quadriert und das Ergebnis mit document.writeln() ausgibt.
Verwenden Sie die Lösung aus der vorhergehenden Aufgabe und ändern Sie das Programm so ab, dass der Zähler nicht als Zahl, sondern als Zeichen interpretiert und ausgegeben wird.
Ersetzen Sie die for-Schleife durch eine while-Schleife, definieren Sie vor der Schleife die Zählvariable und erhöhen Sie diese im Schleifenrumpf durch Addition von 1.
Zur Abfrage der Besucherinformationen dienen die zu Beginn des Kapitels genannten Funktionen prompt() und confirm(). Die abgefragten Informationen können als Werte von globalen Variablen gespeichert werden, damit sie überall im Programm zur Verfügung stehen. Die Funktion zur Hervorhebung muss lediglich einen String als Parameter annehmen und als Ergebnis diese Zeichenkette, ergänzt um "<strong>" und "</strong>", mit return als Ergebnis liefern.
Das Hauptprogramm erzeugt mit document.writeln() die Ausgabe, wobei an geeigneter Stelle der Name, durch den Funktionsaufruf hervorgehoben, ausgegeben werden muss. Zur Anrede mit "Du" oder "Sie" macht eine if-then-else-Anweisung eine Fallunterscheidung, die auf die o.g. globale Variable Bezug nimmt.
- uebung0201.html -
<pre>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
document.writeln("Ausgabe der Quadratzahlen von 0 bis 9:");
for (var i=0; i<10; i=i+1)
{
document.writeln("Quadrat von ",i," ist: ",i*i);
}
// Ende: Inhalt verstecken -->
</script>
</pre>
Die Ausgabe des Programms ist:
Ausgabe der Quadratzahlen von 0 bis 9: Quadrat von 0 ist: 0 Quadrat von 1 ist: 1 Quadrat von 2 ist: 4 Quadrat von 3 ist: 9 Quadrat von 4 ist: 16 Quadrat von 5 ist: 25 Quadrat von 6 ist: 36 Quadrat von 7 ist: 49 Quadrat von 8 ist: 64 Quadrat von 9 ist: 81
- uebung0202.html -
<pre>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
document.writeln("Ausgabe der Zeichenketten:");
var ergebnis = "";
for (var i=0; i<10; i=i+1)
{
ergebnis = ergebnis + i;
document.writeln(ergebnis);
}
// Ende: Inhalt verstecken -->
</script>
</pre>
Die Ausgabe des Programms ist:
Ausgabe der Zeichenketten: 0 01 012 0123 01234 012345 0123456 01234567 012345678 0123456789
- uebung0203.html -
<pre>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
document.writeln("Ausgabe der Quadratzahlen von 0 bis 9:");
var i=0;
while (i<10)
{
document.writeln("Quadrat von ",i," ist: ",i*i);
i=i+1;
}
// Ende: Inhalt verstecken -->
</script>
</pre>
Die Ausgabe des Programms ist identisch zur Ausgabe der Lösung zu Übung 1.
- uebung0204.html -
<html>
<head><title>JavaScript-Workshop: Musterlösung</title>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
var besucher_name = "";
var duzen = false;
function strong(text)
{
return "<strong>"+text+"</strong>";
}
function begruessung()
{
besucher_name = prompt("Wie lautet Dein Vorname?","");
duzen = confirm("Darf ich Dich duzen?");
}
// Ende: Inhalt verstecken -->
</script>
</head>
<body>
<h1>Herzlich Willkommen!</h1>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
begruessung();
document.writeln("<p>Hallo ",strong(besucher_name),", ");
if (duzen)
{
document.writeln("ich freue mich, Dich zu sehen!");
}
else
{
document.writeln("ich freue mich, Sie zu sehen!");
}
document.writeln("</p>");
// Ende: Inhalt verstecken -->
</script>
</body>
</html>
Je nachdem, was der Besucher eingibt, erhält er beispielsweise folgende HTML-Seite als Ergebnis:
Abbildung 2.1: Ausgabe der Musterlösung zu Übung 4
- uebung0205.html -
Das folgende Listing zeigt eine Musterlösung für die Übung 5. In der anschließenden Abbildung 2.2 ist die Ausgabe des Programms im Navigator zu sehen. Sie erkennen, dass das Durchlaufen mit numerischem Index nicht funktioniert, weil der length-Wert Null ist.
<html>
<head><title>JavaScript-Workshop: Musterlösung</title>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
var adresse = new Array();
adresse["name"] = "Jackson Browne";
adresse["anschrift"] = "12358 Ventura Boulevard #361";
adresse["ort"] = "Studio City, CA";
adresse["plz"] = "91604";
// Ende: Inhalt verstecken -->
</script>
</head>
<body>
<h1>Assoziative Arrays</h1>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
document.writeln("<table border='1'><tr><th>Name</th>");
document.writeln("<td>",adresse["name"],"</td></tr>");
document.writeln("<tr><th>Anschrift</th>");
document.writeln("<td>",adresse["anschrift"],
"</td></tr>");
document.writeln("<tr><th>PLZ/Ort</th>");
document.writeln("<td>",adresse["plz"]," ",
adresse["ort"],"</td></tr>");
document.writeln("</table>");
// Ende: Inhalt verstecken -->
</script>
<pre><script language="JavaScript"
type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
document.writeln("Das Array hat ",
adresse.length," Einträge");
for (var i = 0; i < adresse.length; i = i+1)
{
document.writeln("Inhalt von Feld ",i,
" ist ",adresse[i]);
}
// Ende: Inhalt verstecken -->
</script>
</pre>
</body>
</html>
Abbildung 2.2: Ausgabe der Musterlösung zu Übung 5
Durch Hinzufügen der Zeilen
meinArray.sort();
document.writeln("Das Array hat ",meinArray.length,
" Einträge");
for (var i = 0; i < meinArray.length; i = i+1)
{
document.writeln("Inhalt von Feld ",i,
" ist ",meinArray[i]);
}
wird die zusätzliche Ausgabe
Das Array hat 4 Einträge Inhalt von Feld 0 ist A Inhalt von Feld 1 ist B Inhalt von Feld 2 ist C Inhalt von Feld 3 ist D
erzeugt. Die Arrayinhalte wurden also umsortiert.
Optimiert für HTML- & CSS-Browser.
Bestes Ergebnis mit Mozilla und Opera.
JavaScript basiert auf W3C-DOM.
Wir unterstützen Standards!
Copyright 2000-2004 Christine Kühnel & Stefan Mintert. Alle Rechte vorbehalten. Online-Fassung: Christine Kühnel http://screenexa.net/
