Webseiten erstellen mit Javascript
Kapitel 2: Javascript
Inhaltsverzeichnis
Dieses Buch ist unter einer Creative Commons-Lizenz lizensiert.
2.1 Allgemeines
Bestandteile einer Programmiersprache
Um auf Elemente in Webseiten zuzugreifen und diese dynamisch verändern zu können, sind Kenntnisse in einer Programmiersprache notwendig. Nur mit einer Programmiersprache lassen sich Verfahren zur dynamischen Informationsverarbeitung erstellen.
Javascript besteht aus den gleichen Elementen wie andere Programmiersprachen auch. Besitzen Sie bereits Kenntnisse in einer anderen Programmiersprache, müssen Sie sich lediglich an die Syntax in Javascript gewöhnen.
Programmiersprachen ermöglichen, wie Sie bereits wissen, die Verarbeitung von Informationen. Um Informationen verarbeiten zu können, müssen Programme grundsätzlich in der Lage sein, Informationen zu speichern. Dies erfolgt mit Hilfe von Variablen.
Während Informationen in Variablen gespeichert werden können, müssen zusätzlich Werkzeuge bereitgestellt werden, um die in Variablen gespeicherten Informationen zu verarbeiten. Eine derartige Verarbeitung erfolgt mit Operatoren.
Mit Hilfe von Variablen und Operatoren können Programme erstellt werden, die Informationen linear verarbeiten. Es ist jedoch nicht möglich, abhängig von bestimmten Bedingungen Informationen auf unterschiedliche Weise zu verarbeiten oder aber einen Verarbeitungsvorgang zu wiederholen. Erst Kontrollstrukturen ermöglichen dies.
Programme, die aus Variablen, Operatoren und Kontrollstrukturen bestehen, können bereits enorm leistungsstark sein. Größere Programme werden jedoch schnell unübersichtlich. Funktionen ermöglichen das Zusammenstellen von Anweisungen zu einem Paket, das über einen Namen aufgerufen und ausgeführt werden kann.
JScript besteht aus den gleichen Bestandteilen wie Javascript. Dieses Kapitel kann demnach, soweit nichts anderweitig angegeben ist, auch auf JScript bezogen werden.
2.2 Variablen
Informations-Töpfe
Um Informationen in Javascript speichern zu können, benötigen Sie Variablen. Eine Variable können Sie sich hierbei als einen Topf vorstellen, in den Sie eine Information hineinlegen können. Pro Topf können Sie auch nur tatsächlich eine Information speichern. Wollen Sie zwei Informationen in Ihrem Programm speichern, benötigen Sie zwei Töpfe - sprich zwei Variablen.
Um Variablen in einem Programm nutzen zu können, müssen diese erst angelegt werden. Sie müssen also zuerst einen Topf aus dem Nichts herbeizaubern, bevor Sie etwas in diesen hineinlegen können.
var datentopf;
Mit obiger Code-Zeile legen Sie eine Variable datentopf an. Die Variablendefinition findet immer auf dem gleichen Wege statt: Zuerst geben Sie das Schlüsselwort var an, dahinter ein Leerzeichen, dahinter dann den Namen der Variable. Der Name der Variable kann beliebig gewählt werden, sollte jedoch möglichst aussagekräftig sein, damit Sie anhand des Namens erkennen, wozu Sie die Variable in Ihrem Programm eigentlich benötigen.
Schliessen Sie Variablendefinitionen grundsätzlich mit einem Semikolon ab. Dieses Semikolon ist das Zeilen-Ende-Zeichen in Javascript. Wenn Sie das Semikolon vergessen, meckern heutige Browser zwar nicht, Sie können ohne Semikolon jedoch manchmal die Bedeutung von aufeinanderfolgenden Javascript-Code-Zeilen verdrehen. Auch wenn heutige Browser also weniger kritisch sind - setzen Sie das Semikolon am Ende von Variablendefinitionen.
var datentopf; var datentopf2; var noch_eine_Variable; var EineAndereVariable;
Benötigen Sie mehrere Variablen, können Sie diese einfach in mehreren Zeilen anlegen.
var datentopf, datentopf2, noch_eine_Variable, EineAndereVariable;
Sie können mehrere Variablen auch wie oben definieren, indem Sie die Variablennamen durch Komma getrennt hinter dem Schlüsselwort var angeben.
Variablen, haben Sie gelernt, sind Töpfe, in die Informationen hineingelegt werden können. Wie sieht dieses Hineinlegen aus?
var datentopf; datentopf = 42;
Nachdem Sie eine Variable angelegt haben, können Sie auf diese Variable zugreifen und eine Information in ihr speichern. Der Vorgang der Informationsspeicherung sieht immer gleich aus: Sie geben zuerst die Variable an, dann ein Gleichheitszeichen, dann die zu speichernde Information. Wichtig ist: Das, was gespeichert werden soll, steht rechts vom Gleichheitszeichen. Das, wohin gespeichert werden soll, steht links davon. Rechts steht die Quelle, links das Ziel.
Beachten Sie, dass das Schlüsselwort var ausschließlich bei der Variablendefinition angegeben wird. Spätere Zugriffe auf Variablen erfolgen nur über den Variablennamen.
Was für Arten von Informationen kann man in Variablen speichern? Sie können in Variablen Zahlen speichern, einzelne Zeichen oder Zeichenketten, also beispielsweise Wörter oder ganze Sätze. Variablen können noch eine andere Funktion annehmen, die Sie jedoch erst im Zusammenhang mit Objekthierarchien näher kennenlernen werden.
var datentopf; datentopf = 42;
Zahlen werden in Variablen gespeichert, indem Sie die Zahl direkt hinter dem Gleichheitszeichen angeben. Obige zwei Code-Zeilen definieren also zuerst eine Variable datentopf, in die dann die Zahl 42 hineingelegt wird.
var datentopf; datentopf = 'A'; datentopf = "A"; datentopf = 'Hallo, Welt!'; datentopf = "Hallo, Welt!";
Um ein einzelnes Zeichen oder eine Zeichenkette in einer Variablen zu speichern, müssen Sie das Zeichen bzw. die Zeichenkette in Anführungszeichen einschließen. Es spielt im Gegensatz zu anderen Programmiersprachen in Javascript keine Rolle, ob Sie einfache oder doppelte Anführungszeichen verwenden.
var datentopf, datentopf2; datentopf = 42; datentopf2 = "42";
Beachten Sie obiges Beispiel: In einer Variablen datentopf wird die Information 42 als Zahl hineingelegt, in die Variable datentopf2 die Information 42 als Zeichenkette. Obwohl in beiden Variablen also die Information 42 liegt, handelt es sich um verschiedene Informationsarten. Der Fachbegriff lautet Datentyp. Während die Variable datentopf eine Information vom Datentyp Zahl speichert, speichert die Variable datentopf2 eine Information vom Datentyp Zeichenkette. Im Zusammenhang mit Operatoren ist es wichtig, dass Sie Datentypen kennen und verstehen, was damit gemeint ist.
Der Datentyp Zeichenkette heißt in vielen Programmiersprachen wie auch in Javascript String.
var datentopf, datentopf2; datentopf = true; datentopf2 = false;
Es gibt noch einen speziellen Datentyp in Javascript namens Bool. Der Datentyp Bool kann genau zwei Informationen speichern - nämlich die Wahrheitswerte true oder false. Diese Informationen werden direkt als Schlüsselwörter hinter dem Gleichheitszeichen angeben, um sie in den Variablen datentopf und datentopf2 zu speichern. Beachten Sie, wenn beispielsweise true in Anführungszeichen angegeben würde, dass es sich nicht um einen Datentyp Bool, sondern um einen Datentyp String handeln würde.
var datentopf; datentopf = 42; datentopf = "Hallo, Welt!"; datentopf = true;
Es ist in Javascript problemlos möglich, Informationen von unterschiedlichen Datentypen ein- und derselben Variablen zuzuweisen. Natürlich geht bei jeder erneuten Zuweisung der bis dato gespeicherte Wert verloren. Im Gegensatz zu anderen Programmiersprachen kommt es jedoch nicht darauf an, dass alle Informationen, die einer Variable zugewiesen werden, den gleichen Datentyp besitzen.
var datentopf = 42;
Weil Programmierer faule Leute sind, kann eine Variablenzuweisung in der gleichen Zeile wie eine Variablendefinition erfolgen. In diesem Fall wird also zuerst eine Variable datentopf angelegt, der dann die Zahl 42 zugewiesen wird. Man spricht hierbei von einer Initialisierung: Die Variable datentopf wird mit dem Wert 42 initialisiert.
var datentopf = null;
Das Schlüsselwort null ist eine besondere Information. Es handelt sich hierbei um einen Wert, der sich keinem Datentyp zuordnen läßt. Eine Variable mit null zu initialisieren macht nicht viel Sinn. Sie lernen null jedoch im Zusammenhang mit einigen Funktionen später kennen.
2.3 Operatoren
Informationen verarbeiten
Mit Operatoren lassen sich Variablen und Informationen verknüpfen. Während Variablen Informationen speichern, machen Operatoren eine Informationsverarbeitung möglich.
Jede Programmiersprache, so auch Javascript, bietet eine ganze Reihe an Operatoren an, um Informationen verarbeiten zu können. In Javascript stehen dem Programmierer etwa 40 Operatoren zur Verfügung, wovon jedoch nur ein Teil ständig benötigt wird.
var i = 10, j = 5, r; r = -i; r = i + j;
Operatoren können in zwei Gruppen aufgeteilt werden: Es gibt Operatoren, die einen Operanden erwarten, und Operatoren, die zwei Operanden erwarten. Erstere nennt man unäre Operatoren, letztere binäre Operatoren.
Im obigen Code-Beispiel sehen Sie einen unären und einen binären Operator. Das Minus-Zeichen vor der Variablen i ist ein Operator, um das Vorzeichen des Wertes in der Variablen i umzudrehen. Nachdem bei der Variablendefinition von i der Wert 10 gespeichert wurde, wird durch das Minus-Zeichen der negative Wert -10 in der Variablen r gespeichert. Es handelt sich bei diesem Minus-Zeichen um einen unären Operator, weil lediglich ein Operand angegeben ist - nämlich die Variable i hinter dem Minus-Zeichen.
In der letzten Zeile im obigen Code-Bespiel wird Ihnen die Anwendung eines binären Operators vorgestellt. Das Plus-Zeichen erwartet sowohl links als auch rechts einen Operanden, also genau zwei. Die Werte der beiden Operanden werden addiert, die Summe in der Variablen r gespeichert. Im Gegensatz zu unären Operatoren, die genau einen Operanden erwarten, muss bei binären Operatoren auf beiden Seiten des Zeichens ein Operand angegeben sein - insgesamt eben genau zwei.
var i = 10, j = 5, r; r = i + j; r = i - j; r = i * j; r = i / j; r = i % j;
Javascript bietet arithmetische Operatoren für die vier Grundrechenarten an. Mit dem Plus-Zeichen lassen sich zwei Werte addieren, mit dem Minus-Zeichen lassen sich zwei Werte subtrahieren, mit dem Sternchen lassen sich zwei Werte multiplizieren, und mit dem Schrägstrich können zwei Werte dividiert werden. Das Prozentzeichen ist der Modulo-Operator. Er führt wie der Schrägstrich eine Division aus, speichert jedoch den ganzzahligen Restwert der Division in r.
Bei allen fünf Operatoren handelt es sich um binäre Operatoren, die als Ergebnis eine Information vom Typ Zahl zurückgeben.
var i = true, j = false, r; r = i && j; r = i || j; r = !i;
Logische Operatoren ermöglichen das Verknüpfen von Wahrheitswerten. Das logische UND && gibt als Ergebnis dann true zurück, wenn genau beide Operanden true sind. Das logische ODER || gibt als Ergebnis dann true zurück, wenn mindestens einer der beiden Operanden true ist. Das logische NICHT ! gibt true zurück, wenn der Operand false ist, und false, wenn der Operand true ist.
Das logische UND und das logische ODER sind binäre Operatoren, das logische NICHT ist ein unärer Operator. Alle Operatoren geben als Ergebnis eine Information vom Typ Bool zurück.
Logische Operatoren werden vor allem im Zusammenhang mit Kontrollstrukturen eingesetzt.
var i = 10, j = 5, r; r = i == j; r = i != j; r = i > j; r = i >= j; r = i < j; r = i <= j;
Vergleiche zwischen Werten sind mit Vergleichsoperatoren möglich. Es kann mit == auf Gleichheit, mit != auf Ungleichheit, mit > auf Größer, mit >= auf Größer-Gleich, mit < auf Kleiner und mit <= auf Kleiner-Gleich überprüft werden.
Vergleichsoperatoren sind binäre Operatoren, die alle ein Ergebnis vom Typ Bool zurückgeben - also entweder true oder false.
var i = 10, r; r = ++i; r = i++; r = --i; r = i--;
Um Variablen um den Wert 1 zu erhöhen oder zu verringern, stehen der Inkrement- und Dekrement-Operator zur Verfügung. Beides sind unäre Operatoren. Der Operand kann jeweils vor oder hinter dem Operator angegeben werden. Auf den Operanden selber hat dies keinen Einfluß, jedoch auf den Rückgabewert.
Betrachten Sie obiges Code-Beispiel. Die Variable i wird mit dem Wert 10 initialisiert. In einem ersten Schritt wird die Variable i mit dem Inkrement-Operator ++ um 1 erhöht. Der Inkrement-Operator steht vor der Variablen. Das heißt, i wird auf den Wert 11 gesetzt und der Wert 11 wird der Variablen r zugewiesen.
In der nächsten Zeile wird der Inkrement-Operator nochmal auf i angewandt. Diesmal steht ++ jedoch hinter dem Variablennamen. Das bedeutet, die Variable i wird auf den Wert 12 erhöht, jedoch 11 - also er ursprüngliche Wert - wird der Variablen r zugewiesen. Der Rückgabewert ist also unterschiedlich, je nachdem, ob der Inkrement-Operator vor oder hinter der Variablen steht. Dies gilt natürlich auch genauso für den Dekrement-Operator --.
var i; i = 10;
Ein Operator, der bis dato mehr oder weniger selbstverständlich eingesetzt wurde, ist der Zuweisungsoperator =. Die Bedeutung des Zuweisungsoperators kennen Sie bereits, nicht aber die der kombinierten Zuweisungsoperatoren.
var i = 10, j = 5; i = i + j;
Im obigen Beispiel werden die Variablen i und j addiert, das Ergebnis wird in der Variablen i gespeichert. Mit Hilfe eines kombinierten Zuweisungsoperators läßt sich diese Operation auch wie folgt schreiben.
i += j;
Es handelt sich schlichtweg um eine abgekürzte Schreibweise. Genauso wie sich die Addition inklusive Zuweisung abkürzen läßt, stehen weitere kombinierte Zuweisungsoperatoren zur Verfügung, um andere Operationen auf die gleiche Art und Weise abzukürzen: -=, *=, /= und %=.
var i = 10, j = "abc", k = true, r; r = typeof i; r = typeof j; r = typeof k;
Der unäre Operator typeof gibt einen Rückgabewert vom Typ String zurück, der angibt, welchen Typ der Operand besitzt. Die Variable i speichert im obigen Beispiel eine Zahl, nämlich 10. typeof gibt für i als Ergebnis den Wert "number" zurück, der in der Variablen r gespeichert wird. Für die Variable j, die einen String speichert, gibt typeof den Wert "string" zurück. Für die Variable k wiederum, die einen Wert vom Typ Bool speichert, gibt typeof "boolean" zurück. Falls Sie in einem Programm also den Datentyp einer Variablen ermitteln müssen, können Sie dies mit Hilfe von typeof in Javascript problemlos machen.
Wieso kann es wichtig sein zu wissen, welchen Datentyp eine Variable besitzt? Operatoren können grundsätzlich nur auf Operanden vom gleichen Datentyp angewandt werden. Es macht keinen Sinn, eine Zahl mit einem Wahrheitswert zu multiplizieren. In diesem Fall meckert der Browser und meldet einen Fehler.
Was jedoch viel schlimmer ist, wenn der Operator auf die Operanden angewandt werden kann, diese jedoch versehentlich einen falschen Typ besitzen und der Operator daher eine völlig andere Operation ausführt. Das Programm funktioniert also, errechnet jedoch ein völlig unerwartetes Ergebnis.
var i = "10", j = "5", r; r = i + j;
Den arithmetischen Operator + haben Sie bereits kennengelernt. Sie setzen ihn ein, um Additionen mit zwei Zahlen durchzuführen. Im obigen Beispiel handelt es sich jedoch nicht um zwei Zahlen, die addiert werden sollen, sondern um zwei Variablen vom Typ String, die mit dem Operator + hintereinander gehängt werden. Während + im Zusammenhang mit Zahlen wie gewünscht eine Addition durchführt, werden Operanden vom Typ String verknüpft. In diesem Fall enthält die Variable r als Ergebnis den Wert "105".
Achten Sie vor allem im Zusammenhang mit dem Plus-Operator darauf, welchen Typ die beiden Operanden haben. Andere Operatoren machen hier keine Schwierigkeiten, sondern werden direkt als Fehler vom Browser gemeldet.
var r; r = 10 + 5 * 2;
Die Ausführungsreihenfolge von Operatoren wird durch die sogenannte Präzedenz-Tabelle festgelegt. In dieser Tabelle definiert jede Programmiersprache, welche Prioritäten die Operatoren besitzen, ob ein Operator also gegenüber einem anderen Operator bevorzugt ausgeführt wird oder nicht.
Prioritäten sind normalerweise so verteilt, dass zum Beispiel die Operatoren * und / eine höhere Priorität besitzen als + und -. Das heißt, die Multiplikation und Division wird bevorzugt ausgeführt. Dies entspricht der mathematischen Regel "Punkt vor Strich". Obiges Code-Beispiel ergibt also auch in Javascript den Wert 20 und nicht 30.
Was machen Sie aber, wenn Sie möchten, dass zuerst addiert und dann multipliziert wird?
var r; r = (10 + 5) * 2;
Der Operator mit der höchsten Priorität ist die runde Klammer (). Mit Hilfe der runden Klammern können Sie jederzeit in die standardmäßige Ausführungsreihenfolge von Operatoren eingreifen und sie anpassen.
Der Zuweisungsoperator = sowie die kombinierten Zuweisungsoperatoren besitzen eine sehr niedrige Priorität. Das bedeutet, dass normalerweise erst alle anderen Operatoren ausgeführt werden und nach diesen in einem letzten Schritt das Ergebnis zugewiesen wird.
2.4 Kontrollstrukturen
Verzweigungen und Schleifen
Kontrollstrukturen ermöglichen es, die lineare Informationsverarbeitung aufzubrechen und in Abhängigkeit von Bedingungen unterschiedlichen Code oder Code wiederholt auszuführen.
Schlüsselwort (Bedingung) {
Anweisungsblock
}
Kontrollstrukturen haben in Javascript immer den gleichen Aufbau: Hinter einem Schlüsselwort findet die Überprüfung einer Bedingung statt, und zwar häufig mit Hilfe von Vergleichsoperatoren. Liefert die Bedingung true zurück, werden die Anweisungen zwischen den geschweiften Klammern ausgeführt. Anweisungen, die zwischen geschweiften Klammern stehen, bezeichnet man als Block.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var OK = confirm("Klicken Sie auf OK.");
if (OK == true) {
alert("Sie haben auf OK geklickt.");
}
</script>
</head>
<body>
</body>
</html>
Die if-Kontrollstruktur führt einen Anweisungsblock dann aus, wenn die zu überprüfende Bedingung wahr ist. Ist die Bedingung wahr, wird der Anweisungsblock genau einmal ausgeführt. Das Programm wird danach hinter dem Anweisungsblock fortgeführt. Ist die Bedingung falsch, wird der Anweisungsblock übersprungen und das Programm direkt hinter dem Anweisungsblock fortgeführt.
Obiges Beispielprogramm ruft eine in Javascript integrierte Funktion confirm() auf. Diese Funktion zeigt eine Meldung an, die in Anführungszeichen - also als String - zwischen runden Klammern übergeben werden kann. Darüberhinaus erscheinen im Meldungsfenster zwei Schaltflächen, nämlich und . Klickt der Anwender auf , wird der Wahrheitswert true zurückgegeben, klickt er auf , wird false zurückgegeben. Der Rückgabewert wird im obigen Beispiel in der Variablen OK gespeichert.
Innerhalb der runden Klammern nach dem Schlüsselwort if wird mit Hilfe des Vergleichsoperators == überprüft, ob in der Variablen OK der Wahrheitswert true gespeichert ist. Dies ist dann der Fall, wenn der Anwender auf geklickt hat. Ist die Bedingung wahr, wird daraufhin der Anweisungsblock ausgeführt, der in diesem Fall aus dem Funktionsaufruf alert() besteht. Mit dieser Funktion wird eine Meldung auf den Bildschirm ausgegeben, die als String wiederum zwischen den runden Klammern an die Funktion übergeben wird.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var OK = confirm("Klicken Sie auf OK.");
if (OK == true) {
alert("Sie haben auf OK geklickt.");
} else {
alert("Sie haben auf Abbruch geklickt.");
}
</script>
</head>
<body>
</body>
</html>
Die if-Kontrollstruktur kann um einen else-Block erweitert werden. Dieser wird einfach hinter den if-Block gestellt. Der else-Block wird dann ausgeführt, wenn die zu überprüfende Bedingung false ergibt.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var Zahl = parseInt(prompt("Geben Sie eine Zahl ein.", ""));
if (Zahl < 0) {
alert("Die eingegebene Zahl ist kleiner als 0.");
} else if (Zahl < 100) {
alert("Die eingegebene Zahl ist kleiner als 100.");
} else {
alert("Die eingegebene Zahl ist größer oder gleich 100.");
}
</script>
</head>
<body>
</body>
</html>
Es ist möglich, mehrere if-else-Kontrollstrukturen zu verketten. Dazu wird einfach die nachfolgende if-else-Kontrollstruktur an das vorherige else angehängt. Auf diese Weise können mehrere Bedingungen hintereinander überprüft werden, bis eine Bedingung true ergibt oder bis der optionale else-Zweig kommt.
Obiges Beispiel verlangt vom Anwender mit Hilfe der Funktion prompt() die Eingabe einer Zahl. Der Funktion werden zwei Parameter vom Typ String übergeben, die durch ein Komma getrennt werden. Der erste Parameter gibt die Meldung im Fenster an, der zweite Parameter ist ein Vorgabewert für die Eingabe. Der zweite Parameter ist im Beispiel eine leere Zeichenkette, so dass kein Wert vorgegeben wird.
Nachdem die Funktion ein Ergebnis vom Datentyp String zurückgibt, wird das Ergebnis mit der Funktion parseInt() in einen Wert vom Typ Zahl umgewandelt und in der Variablen Zahl gespeichert. Daraufhin wird überprüft, ob die Zahl kleiner als 0 ist oder kleiner als 100. Ist keine der Bedingungen wahr, wird der else-Block ausgeführt.
Während die if-Kontrollstruktur genau einmal eine Bedingung überprüft und auch nur maximal einmal einen Anweisungsblock ausführt, wiederholt die while-Schleife einen Anweisungsblock, solange die zu überprüfende Bedingung true ergibt.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var OK = confirm("Klicken Sie auf OK.");
while (OK == false) {
OK = confirm("Sie sollen doch auf OK klicken.");
}
</script>
</head>
<body>
</body>
</html>
Die while-Kontrollstruktur funktioniert erstmal genauso wie die if-Kontrollstruktur: Es wird eine Bedingung überprüft, und nur wenn die Bedingung true ergibt, wird der Anweisungsblock ausgeführt. Ist die Bedingung true und der Anweisungsblock ausgeführt worden, setzt das Programm mit der Ausführung nicht hinter dem Anweisungsblock fort, sondern überprüft die Bedingung erneut. Ist die Bedingung wieder true, wird der Anweisungsblock ein zweites Mal ausgeführt. Auch nach dem zweiten Durchlauf des Anweisungsblocks wird die Bedingung erneut überprüft, mit eventuell anschließendem erneuten Durchlauf des Anweisungsblocks. Dies wiederholt sich, solange die Bedingung true ist bzw. bis die Bedingung false ergibt.
Im obigen Code-Beispiel wird die Schleife also ausgeführt, solange der Anwender auf klickt. Jedesmal, wenn der Anwender auf klickt, wird die Variable OK auf false gesetzt, und die Bedingung ist ständig true. Erst bei einem Klick auf wird der Anwender aus der Schleife entlassen.
Im Zusammenhang mit Schleifen ist entscheidend, dass innerhalb des zu wiederholenden Anweisungsblocks Variablen geändert werden, die in der Bedingung überprüft werden. Wenn die Bedingung sich nicht durch eine entsprechende Programmlogik im Anweisungsblock auf false setzen läßt, wird die Schleife unendlich oft ausgeführt und nicht mehr beendet. Es handelt sich hierbei um einen Programmierfehler, der auch als Endlosschleife bekannt ist.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var Anzahl = 0;
var OK = confirm("Klicken Sie auf OK.");
while (OK == false) {
if (++Anzahl > 3) {
break;
}
OK = confirm("Sie sollen doch auf OK klicken.");
}
</script>
</head>
<body>
</body>
</html>
Mit Hilfe des Schlüsselworts break können Schleifen sofort abgebrochen werden. Stößt die Programmausführung auf break, wird die Schleife sofort beendet, und das Programm wird hinter dem Anweisungsblock fortgesetzt.
Im obigen Beispielprogramm wird eine Variable Anzahl in jedem Schleifendurchgang mit Hilfe des Inkrement-Operators ++ um den Wert 1 erhöht. Außerdem wird überprüft, ob der Wert der Variablen Anzahl größer als 3 ist. Die Überprüfung erfolgt mit der bereits bekannten if-Kontrollstruktur. Ist die Bedingung wahr - enthält also die Variable Anzahl einen Wert größer als 3 - so wird der Anweisungsblock hinter if ausgeführt. Nachdem dort break steht, wird die gesamte Schleife sofort abgebrochen. Das Beispielprogramm wird also nach spätestens drei Schleifendurchläufen automatisch beendet.
Das Schlüsselwort break kann ausschließlich innerhalb eines Anweisungsblocks einer Schleife verwendet werden. Andernfalls meldet der Browser einen Fehler.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var OK;
do {
OK = confirm("Klicken Sie auf OK.");
} while (OK == false);
</script>
</head>
<body>
</body>
</html>
Die do-while-Schleife ist eine Abwandlung der while-Schleife. Die Bedingung wird nun am Ende des Schleifendurchgangs überprüft. Das bedeutet, dass der Anweisungsblock mindestens einmal ausgeführt wird. Erst danach wird entschieden, ob der Anweisungsblock ein zweites Mal ausgeführt werden soll oder nicht.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var Anzahl;
for (Anzahl = 0; Anzahl < 3; ++Anzahl) {
alert("Sie müssen insgesamt dreimal auf OK klicken.");
}
</script>
</head>
<body>
</body>
</html>
Die for-Kontrollstruktur ist ebenfalls eine Schleife. Während bei der while-Schleife jedoch mehr oder weniger nicht abzuschätzen ist, wann eine Bedingung falsch wird und die Schleife abgebrochen werden muss, steht für die for-Schleife eigentlich fest, wie oft sie wiederholt werden muss.
Der Schleifenkopf besteht nicht mehr nur aus der Überprüfung einer Bedingung, sondern aus drei verschiedenen Bereichen. Die Bereiche sind durch Semikolons getrennt. Im mittleren Bereich findet die Überprüfung der Bedingung statt.
Der erste Bereich (zwischen Klammer und erstem Semikolon) ist der Initialisierungsbereich. Dieser Bereich wird bei Eintritt in die Schleife genau einmal ausgeführt und danach nie wieder. Wurde der Initialisierungsbereich durchlaufen, wird die Bedingung überprüft, die wie bereits gesagt zwischen den Semikolons in der Mitte steht. Ist die Bedingung wahr, wird der Anweisungsblock der Schleife ausgeführt. Ist die Bedingung falsch, wird die Programmausführung hinter der Schleife fortgesetzt.
Nach jedem Schleifendurchlauf wird der dritte Bereich (zwischen zweitem Semikolon und der Klammer) ausgeführt. In diesem Bereich wird für gewöhnlich eine Variable in- oder dekrementiert, die in der Bedingung überprüft wird. Ist dieser dritte Bereich ausgeführt worden, wird wiederum die Bedingung im zweiten Bereich überprüft. Davon hängt ab, ob der Anweisungsblock nochmal ausgeführt wird oder nicht.
Obiges Beispielprogramm führt also die Schleife genau dreimal aus. Nach jedem Schleifendurchgang wird die Variable Anzahl inkrementiert, bis sie nicht mehr kleiner als 3 ist. Dann wird die Schleife abgebrochen. Der Anwender muss also dreimal das Meldungsfenster wegklicken, das mit der Funktion alert() auf seinem Bildschirm ausgegeben wird.
Beachten Sie, dass Sie Kontrollstrukturen beliebig verschachteln können.
Mit Hilfe logischer Operatoren können Bedingungen verknüpft werden.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var Zahl = parseInt(prompt("Geben Sie eine Zahl größer als 10 und kleiner als 20 ein.", ""));
if (Zahl > 10 && Zahl < 20) {
alert("Die eingegebene Zahl ist größer als 10 und kleiner als 20.");
}
</script>
</head>
<body>
</body>
</html>
Damit mit alert() die entsprechende Meldung ausgegeben wird, müssen zwei Bedingungen wahr sein. Die eingegebene und in der Variablen Zahl gespeicherte Zahl muss größer als 10 und kleiner als 20 sein. Die beiden Bedingungen sind hierfür mit dem logischen UND && verknüpft.
2.5 Funktionen
Anweisungen zu Paketen bündeln
Funktionen ermöglichen das Zusammenstellen mehrerer Anweisungen zu einem Anweisungsblock. In diesem Anweisungsblock können beliebig Variablen, Operatoren und Kontrollstrukturen verwendet werden. Dem Anweisungsblock wird ein Funktionsname gegeben, über den der Block jederzeit an verschiedenen Stellen im Programm aufgerufen und ausgeführt werden kann. Zusätzlich können einer Funktion Parameter übergeben werden, mit denen die Funktion dann arbeiten kann.
function Name(Parameterliste) {
Anweisungsblock
}
Um eine Funktion in einem Programm verwenden zu können, muss diese erstmal definiert werden. Oben sehen Sie eine allgemeine Funktionsdefinition in Javascript. Zuerst wird das Schlüsselwort function angegeben, danach der Funktionsname, gefolgt von einer optionalen Parameterliste zwischen runden Klammern. Hinter diesem Funktionskopf wird zwischen geschweiften Klammern der Anweisungsblock der Funktion angegeben.
Name(Parameter);
Ist die Funktion definiert, kann sie jederzeit an verschiedenen Stellen im Programm aufgerufen werden. Dies erfolgt über den Funktionsnamen und unter Angabe optionaler Parameter. Wie viele Parameter angegeben werden müssen, hängt von der Funktionsdefinition ab, nach der sich der Aufruf richten muss.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
function hallo() {
alert("Hallo!");
}
hallo();
</script>
</head>
<body>
</body>
</html>
Im obigen Code-Beispiel sehen Sie die Definiton einer Funktion namens hallo(). Die Funktion erwartet keine Parameter, die runden Klammern sind daher leer. Das einzige, was die Funktion macht, ist mit alert() die Meldung Hallo auf den Bildschirm auszugeben.
Der Aufruf der Funktion hallo() erfolgt über den Funktionsnamen und leeren runden Klammern.
Entscheidend ist: Die Funktionsdefinition ist tatsächlich nicht mehr als eine Definition. Eine Definition alleine macht gar nichts. Erst der Aufruf der Funktion führt die Anweisungen aus. Eine Funktion zu definieren, ohne sie aufzurufen, ist nutzlos. Und eine Funktion aufzurufen, die nicht definiert ist, führt zu einem Fehler.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
function add(a, b) {
var r = a + b;
alert(r);
}
var Zahl1 = parseInt(prompt("Geben Sie eine Zahl ein.", ""));
var Zahl2 = parseInt(prompt("Geben Sie eine zweite Zahl ein.", ""));
add(Zahl1, Zahl2);
</script>
</head>
<body>
</body>
</html>
Nun wird eine Funktion namens add() definiert. Diese Funktion erwartet zwei Parameter: Die Parameterliste besteht aus a und b, getrennt durch ein Komma. Die Definition bedeutet, dass beim Funktionsaufruf genau zwei Werte oder Variablen in Klammern angegeben werden müssen. Der Funktionsaufruf im obigen Programm sieht daher auch so aus, dass der Funktion add() zwei Variablen Zahl1 und Zahl2 übergeben werden.
Nun passiert folgendes: Der als erstes angegebene Wert im Funktionsaufruf wird in den ersten Parameter der Funktionsdefinition hinüberkopiert. Der als zweites angegebene Wert im Funktionsaufruf wird in den zweiten Parameter der Funktionsdefinition kopiert. Im Beispiel wird also der Wert in der Variablen Zahl1 nach a, der Wert der Variablen Zahl2 nach b kopiert.
Für die Funktion selber stellen die Parameter lediglich ganz normale Variablen dar. Durch den Funktionsaufruf werden die Variablen auf einen bestimmten Wert gesetzt, mit dem dann innerhalb der Funktion gearbeitet wird. Die Funktion add() führt mit dem Plus-Operator eine Addition durch und zeigt das Ergebnis daraufhin am Bildschirm mit Hilfe der Funktion alert() an.
Obiges Beispiel erwartet also die Eingabe zweier Zahlen durch den Anwender, die an die Funktion add() übergeben werden. Dort werden die Zahlen addiert und die Summe am Bildschirm ausgegeben.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
function add(a, b) {
var r = a + b;
return r;
}
var Zahl1 = parseInt(prompt("Geben Sie eine Zahl ein.", ""));
var Zahl2 = parseInt(prompt("Geben Sie eine zweite Zahl ein.", ""));
var Summe = add(Zahl1, Zahl2);
alert(Summe);
</script>
</head>
<body>
</body>
</html>
Das Schlüsselwort return ermöglicht die Rückgabe eines Wertes. Hinter return wird dazu in der Funktion ein Wert oder eine Variable angegeben, die als Ergebnis zurückgegeben wird. Im obigen Beispiel wird das Ergebnis von add(), nämlich die Summe der beiden übergebenen Zahlen, in der Variablen Summe gespeichert.
Eine Funktion kann mehrere return-Anweisungen enthalten. Trifft die Codeausführung auf ein return, wird die Funktion sofort abgebrochen und der angegebene Wert als Ergebnis zurückgegeben.
Funktionen, die Rückgabewerte liefern, können verschachtelt werden. Sehen Sie sich im Code-Beispiel die Funktion prompt() an. Diese Funktion liefert einen Rückgabewert, der nicht in irgendeiner Variablen gespeichert wird, sondern der direkt als Parameter an die Funktion parseInt() weitergegeben wird. Der Funktionsaufruf findet zwischen den runden Klammern von parseInt() statt - also genau da, wo der Übergabewert für die Funktion angegeben werden muss. Anstatt also eine Variable einer Funktion zu übergeben, kann der Funktion auch der Rückgabewert einer anderen Funktion übergeben werden. Diese Verschachtelung von Funktionen ist sinnvoll, wenn der Rückgabewert einer Funktion anderweitig nicht mehr benötigt wird und daher nicht zusätzlich in einer eigenen Variablen gespeichert werden muss.
2.6 Eingebaute Javascript-Funktionen
Datentypen umwandeln und andere Helfer-Funktionen
Javascript besitzt eine Menge an Built-In-Funktionen. Diese Funktionen können in Javascript aufgerufen werden, ohne dass sie vorher definiert werden müssen. Sie haben bereits eine derartige in Javascript eingebaute Funktion genutzt gehabt: parseInt() erwartet einen Parameter vom Typ String und gibt die im String enthaltene Zahl als Wert vom Typ Zahl zurück.
Eine mit parseInt() verwandte Funktion ist parseFloat(): Während parseInt() nur Ganzzahlen vom Typ String in den Typ Zahl umwandeln kann, akzeptiert parseFloat() auch Kommazahlen und liefert als Ergebnis auch Kommazahlen zurück. Übergeben Sie parseInt() eine Kommazahl zur Umwandlung, ignoriert diese Funktion den Nachkommaanteil einfach.
Wenn parseInt() und parseFloat() die übergebene Zeichenkette nicht in eine Zahl umwandeln können, weil der String beispielsweise keine Ziffern, sondern nur Buchstaben enthält, so wird als Ergebnis der besondere Wert NaN zurückgegeben. NaN bedeutet Not a Number. Um zu überprüfen, ob in einer Variable der Wert NaN gespeichert ist, greifen Sie auf die in Javascript eingebaute Funktion isNaN() zurück. Dieser Funktion wird als einziger Parameter die Variable übergeben, die auf den Wert NaN überprüft werden soll. Ist in der Variablen NaN gespeichert, gibt isNaN() den Wahrheitswert true zurück, andernfalls false. Auf diese Weise können Sie sicherstellen, dass Ihr Programm beispielsweise nicht mit einer Variable zu rechnen versucht, in der gar keine Zahl, sondern der Wert NaN enthalten ist.
Innerhalb von Javascript (und besonders in JScript) sind weitere Built-In-Funktionen definiert, die jedoch für die alltägliche Arbeit nicht unbedingt notwendig sind. Die Funktionen parseInt() und parseFloat() gehören zu den wichtigsten Vertretern. Andere Built-In-Funktionen können in diversen Referenzen nachgeschlagen werden.
2.7 Objekte
Zugriff auf Eigenschaften und Methoden
Javascript ermöglicht das Definieren und Erstellen eigener Objekte, was jedoch in der Praxis äußerst selten gemacht wird. Objekte sind hilfreich, um in komplexen Programmen nicht den Überblick zu verlieren. Nachdem Javascript-Anwendungen jedoch normalerweise aus wenigen Code-Zeilen bestehen, hat die Verwendung eigener Objekte wenig Sinn.
Dennoch müssen Sie wissen, was Objekte sind und wie Sie auf Objekte in Javascript zugreifen können. Denn die Mechanismen, um auf Informationen in Webseiten zuzugreifen, basieren alle auf Objekten.
Ein Objekt in einer Programmiersprache repräsentiert letztendlich irgendein Ding aus der Realität. Mit Ding kann wirklich alles gemeint sein: Ein Objekt kann eine Repräsentation eines Gegenstands sein, eines Zustands, von irgendetwas Abstrakten, letztendlich von allem. Unter Repräsentation können Sie sich vorstellen, dass ein Objekt eine Nachahmung eines Teilausschnitts aus der Realität darstellt. Das Objekt ermöglicht es, mit dem Ding, das nachgeahmt wird, innerhalb einer Programmiersprache genauso zu verfahren wie mit dem Ding in der Wirklichkeit. Die Objektorientierung versucht, Objekte eines Problems oder einer Aufgabenstellung eins zu eins in ein Programm zu übertragen.
Betrachten wir ein praktisches Beispiel. Webseiten bestehen aus Informationen, die in einem Browser angezeigt werden. Das, was Sie im Browser sehen, könnte man als Dokument bezeichnen. Die Objekthierarchie DOM 0 enthält tatsächlich ein Objekt namens document. Dieses Objekt document repräsentiert also das Dokument, das Sie im Browser sehen. Indem Sie in der Programmiersprache Javascript nun das Objekt document bearbeiten, bearbeiten Sie das Dokument, das Sie im Browser sehen, nachdem document ja genau dieses repräsentiert.
Wenn Sie sich eine Webseite näher ansehen, stellen Sie fest, dass das angezeigte Dokument eine ganz bestimmte Hintergrundfarbe hat. Die Hintergrundfarbe ist eine Eigenschaft des Dokuments. Das aus der Objekthierarchie DOM 0 stammende Objekt document bietet tatsächlich den Zugriff auf eine Eigenschaft namens bgColor an, in der die Hintergrundfarbe gespeichert ist.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
</head>
<body bgcolor="#0000CC">
<script type="text/javascript">
alert(document.bgColor);
</script>
</body>
</html>
Betrachten Sie obiges Beispiel. Der Funktion alert() wird die Eigenschaft bgColor des Objekts document übergeben. Der Zugriff auf Eigenschaften eines Objekts erfolgt hierbei in Javascript immer über den Zugriffsoperator .: Zuerst wird das Objekt angegeben, dann der Punkt, dann die Eigenschaft. Im obigen Beispiel wird demnach der Wert der Hintergrundfarbe mit alert() in einem eigenen Fenster ausgegeben.
Beachten Sie, dass der Funktionsaufruf von alert() im <body>-Tag erfolgen muss. Zu diesem Zeitpunkt ist im <body>-Tag bereits die Hintergrundfarbe gesetzt worden. Würde der Funktionsaufruf im Kopfbereich der Webseite erfolgen, wäre die Hintergrundfarbe noch gar nicht definiert und es würde der Standardwert für die Hintergrundfarbe im Browser angezeigt werden.
In technischer Hinsicht stellt bgColor eine Variable dar, die zum Objekt document gehört. Sie können demnach mit bgColor genauso verfahren wie mit anderen Variablen auch - nur dass der Zugriff eben immer mit vorangestelltem Objektnamen erfolgt.
So wie Objekte also den Zugriff auf bestimmte Variablen ermöglichen, ermöglichen sie auch den Aufruf bestimmter Methoden. Man spricht hierbei von Fähigkeiten eines Objekts. Das bereits kennengelernte Objekt document bietet eine Methode an, mit der sich Text direkt in das Dokument schreiben läßt.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
document.write("Hallo, Welt!");
</script>
</head>
<body>
</body>
</html>
Sie haben die Methode write() bereits in einem anderen Beispiel verwendet gehabt. Nun lernen Sie die genaue Bedeutung kennen. Diese Methode ist eine Fähigkeit des Objekts document - deswegen müssen Sie wiederum vor der Methode den Objektnamen angeben und Objektnamen und Methodennamen mit dem Zugriffsoperator . trennen.
Im Zusammenhang mit Objekten und deren Eigenschaften gibt es eine spezielle Kontrollstruktur - eine Art Schleife, die alle Eigenschaften eines Objektes durchläuft. Betrachten Sie folgendes Beispiel.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var element;
for (element in document) {
document.write(element + "<br>");
}
</script>
</head>
<body>
</body>
</html>
Mit Hilfe des Schlüsselwortes for kann eine Schleife konstruiert werden, die in jedem Schleifendurchgang einer Variablen den Namen einer Eigenschaft eines Objekts zuweist. Die Variable, die in jedem Schleifendurchgang einen anderen Namen einer Eigenschaft erhalten soll, wird zuerst in runden Klammern hinter dem Schlüsselwort for angegeben. Hinter dem Variablennamen folgt das Schlüsselwort in. Und hinter in folgt der Name des Objektes, dessen Eigenschaften durchlaufen werden sollen.
Wenn Sie obiges Javascript-Programm im Browser ablaufen lassen, sehen Sie eine Auflistung aller Eigenschaften des Objekts document, die Ihre Browser-Version unterstützt. Der Name jeder Eigenschaft, der jeweils in der Variablen element gespeichert wird, wird mit der Methode write() des Objekts document in die Webseite geschrieben. Hinter dem Namen der Eigenschaft wird ein <br>-Tag zusätzlich in die Webseite geschrieben, um die Namen jeweils in einer neuen Zeile auszugeben.
Verschiedene Objekthierarchien bieten unterschiedliche Objekte mit unterschiedlichen Eigenschaften und Fähigkeiten an. Um auf Elemente der Webseite in unterschiedlichen Browsern zugreifen zu können und jeweils in jedem Browser das Javascript-Programm wie gewünscht ablaufen lassen zu können, müssen Sie sich in mehreren Objekthierarchien auskennen. Der Zugriff auf Eigenschaften und Fähigkeiten eines Objekts erfolgt jedoch immer auf dieselbe Art, nämlich wie bereits bekannt über den Punkt als Zugriffsoperator.
2.8 Eingebaute Javascript-Klassen
Objekte erstellen und verwenden
So wie Javascript mehrere Built-In-Funktionen definiert, haben Sie auch die Möglichkeit, auf eingebaute Objekte zuzugreifen. Genaugenommen greifen Sie nicht auf eingebaute Objekte zu, sondern auf eingebaute Klassen: Sie erstellen neue Objekte auf Basis von in Javascript eingebauten Klassen. Der genaue Unterschied zwischen Klasse und Objekt spielt im Rahmen dieses Buchs keine Rolle. Der Einfachheit halber können Sie sich unter einer Klasse einen Bauplan vorstellen. Indem Sie auf den Bauplan eines Objekts zugreifen, erstellen Sie ein Objekt, mit dem Sie dann im Folgenden arbeiten können. Der Bauplan beschreibt, wie das Objekt aussieht und was das Objekt kann. Welche Baupläne in Javascript eingebaut sind, wird Ihnen im Folgenden ein wenig vorgestellt.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var HalloWelt = new String("Hallo, Welt!");
alert(HalloWelt.toUpperCase());
</script>
</head>
<body>
</body>
</html>
Um ein Objekt zu erstellen, geben Sie das Schlüsselwort new an und dahinter die Klasse, von der Sie ein Objekt erstellen wollen. Hinter der Klasse müssen Sie zwei runde Klammern angeben. Je nach Klasse können Sie zwischen den runden Klammern einen Wert übergeben, mit dem das Objekt initialisiert werden soll. Ansonsten geben Sie einfach leere runde Klammern an.
Wenn Sie wie oben beschrieben mit new ein neues Objekt erzeugt haben, müssen Sie dieses einer Variablen zuweisen. Denn irgendwie müssen Sie ja mit Ihrem neuen Objekt im Programm arbeiten können. Dies geschieht über Variablen.
Wie Sie bereits wissen stellt jedes Objekt verschiedene Eigenschaften und Methoden bereit. Objekte, die auf der Klasse String basieren, ermöglichen den Aufruf einer Methode toUpperCase(). Wie Sie ebenfalls bereits wissen müssen Sie, um eine Methode aufzurufen, zuerst den Objektnamen angeben, dann den Punkt als Zugriffsoperator und dann den Methodennamen. Die Methode toUpperCase() der Klasse String wandelt eine enthaltene Zeichenkette in Großbuchstaben um. Obiges Beispielprogramm gibt also die Meldung HALLO, WELT! mit alert() in einem eigenen Fenster aus.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var HalloWelt = "Hallo, Welt!";
alert(HalloWelt.toUpperCase());
</script>
</head>
<body>
</body>
</html>
Den Datentyp String hatten Sie bereits kennengelernt. In Javascript müssen Sie nicht unbedingt ein Objekt vom Typ String mit new erstellen - es reicht, wenn Sie einfach eine Zeichenkette einer Variable zuweisen. Javascript erstellt hierbei automatisch im Hintergrund ein Objekt, so dass Sie auf die Variable die Methoden der Klasse String anwenden können, selbst wenn Sie nicht explizit mit new ein neues Objekt erstellt haben.
Eine andere interessante in Javascript eingebaute Klasse ist Date.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var Datum = new Date();
alert("Es ist " + Datum.getHours() + ":" + Datum.getMinutes() + " Uhr.");
</script>
</head>
<body>
</body>
</html>
Wenn Sie mit new ein Objekt der Klasse Date erstellen und in Klammern keinen Initialisierungswert angeben, speichert das Objekt automatisch die aktuelle Uhrzeit und das aktuelle Datum. Über verschiedene Methoden ist es möglich, einzelne Werte des Objekts abzufragen oder auch zu setzen.
Im obigen Beispiel wird über die Methoden getHours() und getMinutes() die Stunden- und Minutenzahl abgefragt und mit alert() auf den Bildschirm ausgegeben.
Eine enorm wichtige Klasse ist Array. Ein Array ist ein Datenfeld. Kann in einer Variablen nur genau eine Information gespeichert werden, so können in einem Array mehrere Informationen abgelegt werden. Auf das Array wird hierbei über eine Variable zugegriffen, auf einzelne Elemente im Array über einen Index, eine Art Hausnummer.
<html>
<head>
<title>Webseiten erstellen mit Javascript</title>
<script type="text/javascript">
var Namen = new Array();
Namen[0] = "Anton";
Namen[1] = "Boris";
Namen[2] = "Caesar";
for (var i = 0; i < Namen.length; ++i) {
document.write(Namen[i] + "<br>");
}
</script>
</head>
<body>
</body>
</html>
Was passiert im obigen Beispiel? Zuerst wird ein Objekt der Klasse Array erstellt und dieses der Variablen Namen zugewiesen. Das Objekt ist nicht initialisiert, also leer. Nun wird auf einzelne Elemente im Objekt zugegriffen und diesen ein Wert zugewiesen. Dies erfolgt, indem der Name des Arrays angegeben wird und dahinter in eckigen Klammern der Index. Der Index ist vergleichbar mit einer Hausnummer, die ein Element im Array eindeutig identifiziert. Das erste Element in einem Array besitzt den Index 0.
Den ersten drei Elementen im Array werden die Strings "Anton", "Boris" und "Caesar" zugewiesen. Ein Element in einem Array kann wie eine ganz gewöhnliche Variable behandelt werden. Die Zuweisung erfolgt daher auch wie gewohnt über den Zuweisungsoperator =.
Nach der Zuweisung der drei Strings wird in einer for-Schleife auf das Array derart zugegriffen, dass die einzelnen Elemente des Arrays in die Webseite mit document.write() hineingeschrieben werden. Der Zugriff erfolgt wiederum über die Angabe eines Index. In diesem Fall handelt es sich jedoch nicht um eine festangegebene Zahl, sondern um die Schleifen-Variable i. Nachdem in dieser Variable in jedem Schleifendurchgang ein anderer Wert angegeben ist, wird in jedem Schleifendurchlauf auf ein anderes Element im Array zugegriffen und ein anderer Name ausgelesen.
Werfen Sie noch einen Blick auf den Schleifenkopf. Die Schleifenbedingung ist derart definiert, dass die Schleife beendet werden soll, wenn in der Variablen i nicht mehr ein kleinerer Wert gespeichert ist als in Namen.length. length ist eine Eigenschaft jedes Arrays, die angibt, wie viele Elemente eigentlich im Array gerade gespeichert sind. Nachdem im obigen Beispiel in drei Elementen Werte gespeichert wurden, enthält Namen.length den Wert 3. Somit ist sichergestellt, dass innerhalb der Schleife nur auf Elemente zugegriffen wird, die auch tatsächlich einen Wert enthalten.
Das Verständis von Arrays ist wichtig für die folgenden Kapitel. In Objekthierarchien wird teilweise sehr viel mit Arrays gearbeitet, so dass Sie im Umgang mit Arrays sicher sein sollten.
2.9 Aufgaben
Übung macht den Meister
Sie können die Lösungen zu allen Aufgaben in diesem Buch als ZIP-Datei erwerben.
Entwickeln Sie eine Javascript-Anwendung, die den Anwender zur Eingabe eines Passworts auffordert. Wenn das gültige Passwort eingegeben wird, soll eine entsprechende Meldung ausgegeben werden. Legen Sie zum Testen Ihres Programms ein beliebiges Passwort fest.
Erweitern Sie Ihr Javascript-Programm aus Aufgabe 1 dahingehend, dass bei Eingabe eines ungültigen Passworts ebenfalls eine entsprechende Meldung ausgegeben wird.
Erstellen Sie eine Javascript-Anwendung, die den Anwender zur Eingabe eines Passworts auffordert. Wenn das gültige Passwort eingegeben wird, soll eine entsprechende Meldung ausgegeben werden. Wenn kein gültiges Passwort eingegeben wird, soll der Anwender erneut zur Eingabe eines Passworts aufgefordert werden - bis er das richtige Passwort eingegeben hat. Legen Sie zum Testen Ihres Programms ein beliebiges Passwort fest.
Erweitern Sie Ihr Javascript-Programm aus Aufgabe 3 dahingehend, dass nach drei ungültigen Eingaben das Programm mit einer entsprechenden Fehlermeldung beendet wird.
Erstellen Sie eine Javascript-Anwendung, die den Anwender zur Eingabe zweier Kommazahlen auffordert. Addieren Sie die Kommazahlen in Ihrem Programm und geben Sie das Ergebnis mit Hilfe der Methode
write()des Objekts document in den Browser aus.Schreiben Sie Ihr Javascript-Programm aus Aufgabe 5 so um, dass die Addition der Kommazahlen in einer Funktion durchgeführt wird, die die Summe als Ergebnis zurückgibt.
Erstellen Sie eine Javascript-Anwendung, die den Anwender zur Eingabe von drei Ganzzahlen auffordert. Speichern Sie die eingegebenen Werte in einem Array. Multiplizieren Sie dann mit Hilfe einer Schleife die im Array gespeicherten Werte und geben Sie das Ergebnis auf den Bildschirm aus.
Für Experten: Erweitern Sie Ihr Javascript-Programm aus Aufgabe 7 dahingehend, dass der Anwender selber festlegen kann, wie viele Zahlen er eingeben möchte. Fordern Sie dazu den Anwender zuallererst zur Eingabe einer Zahl auf, die festlegt, wie viele Zahlen er für die Multiplikation eingeben möchte.
Für Experten: Erstellen Sie eine Javascript-Anwendung, die mit der Methode
write()des Objekts document das Datum des jeweils nächsten Tages in die Webseite schreibt - egal, an welchem Tag im Jahr die Webseite aufgerufen wird. Das Datum soll Tag, Monat und Jahr enthalten.Für Experten: Erstellen Sie eine Javascript-Anwendung, die den Text einer Webseite langsam einblendet. Der Effekt soll hierbei wie folgt bewerkstelligt werden: Der Text als auch der Hintergrund der Webseite sind schwarz. Beim Laden der Webseite verändert jedoch ein Javascript-Programm die Hintergrundfarbe derart, dass die Webseite immer heller wird, bis die Hintergrundfarbe schließlich komplett weiß ist. Dieser Einblendeffekt soll derart gestaltet sein, dass der Farbübergang von schwarz über grau zu weiß verläuft und keine anderen Farben im Hintergrund zu sehen sein sollen.