JavaScript

Einführung in JavaScript Teil 3 (JavaScript Tutorial)

Tutorial erstellt von Dac-XP, letzte Änderung am 28.03.2008

Im dritten Einsteigertutorial behandeln wir die gängigen Kontrollstrukturen von JavaScript.
Unter Kontrollstrukturen versteht man den Teil der Syntax, mit dessen Hilfe man Einfluss auf den Ablauf des Programms nehmen kann. Also Bedingungen und Schleifen.

Bedingungen

Wie jede andere Programmiersprache (bzw. Scriptsprache) bietet JavaScript die Möglichkeit an, Vergleiche aufzustellen und dem Ergebnis entsprechend fortzufahren. - Die einfachste der Bedingungen ist die if-else-Anweisung.


If-else-Anweisung

Diese Anweisung überprüft eine Bedingung und führt die nächste Anweisung aus, wenn diese Bedingung wahr ist, oder überspringt diese, falls die Bedingung nicht erfüllt ist.
Optional ist es auch noch möglich festzulegen, was nur gemacht werden soll, wenn die Bedingung nicht erfüllt wurde.

Syntax:
Code:
if([Bedingung])
  [Anweisung, wenn Bedingung erfüllt ist]
else
  [Anweisung, wenn Bedingung nicht erfüllt ist]


Beispiel:
Code:
var variable = 1;

if(variable == 1)        // Wenn der Wert von „variable“ 1 ist…
  document.write("Der Wert der Variable ist 1");
else                      // Wenn der Wert von „variable“ nicht eins ist …
  {
    document.write("Der Wert der Variable ist NICHT 1");
    variable = 1;
  }

document.write(variable);


Erläuterung:

var variable = 1;
Diese Zeile kennen wir bereits aus dem zweiten Einsteigertutorial und besagt, dass wir eine Variable „variable“ definieren und mit dem Wert 1 füllen.

if(variable == 1)
Hier sehen wir das soeben gelernte „if“ in Aktion. Es wird verglichen, ob der Wert auf der linken Seite des Vergleichoperators (siehe Einsteigertutorial 2) dem Wert auf der rechten Seite entspricht.

document.write("Der Wert der Variable ist 1");
Diese Funktion ist neu für uns. Im Prinzip machen wir aber nichts anderes, als einen Text in unseren HTML-Code zu schreiben, der dann auf der Seite im Browser angezeigt wird.

else
„else“ ist das Schlüsselwort für den Befehl(block), der ausgeführt werden soll, falls die Bedingung nicht zutreffen sollte. In diesem Beispiel wird dann wieder ein passender Text ausgegeben, und „variable“ dann die 1 zugewiesen.

document.write(variable);
Wir geben hier einfach zur Kontrolle nochmal den Wert der Variablen aus. Es sollte auf jeden Fall 1 ausgegeben werden.


Switch-case

Neben der if-else-Anweisung, die wir soeben kennen gelernt haben, gibt es auch noch die Fallunterscheidung mit switch und case. Diese Möglichkeit bietet sich erst ab JavaScript-Version 1.2 und funktioniert demnach bei älteren Browsern nicht. In neueren Browsern ist diese Funktion allerdings eine sehr komfortable Möglichkeit, um mehrere Vergleiche anzustellen.

Syntax:
Code:
var zahl = 1;

switch (zahl)
{
  case "1":
    alert("Die Zahl ist eins");
    break;
  case "2":
    alert("Die Zahl ist zwei");
    break;
  case "3":
    alert("Die Zahl ist drei");
    break;
  default:
    alert("Die Zahl ist nicht eins, zwei oder drei");
    break;
}


Wie man leicht sehen kann, leitet die Funktion switch() die Fallunterscheidung an. In den Klammern steht dabei die Variable (oder Konstante oder ein Wert), die verglichen werden soll. Im anschließenden Code-Block stehen die einzelnen Fälle, die behandelt werden sollen.

case [Vergleichswert]:
Diese Zeile beschreibt den Wert, mit dem verglichen werden soll

break;
Dieses Schlüsselwort sorgt dafür, dass das Programm aus dem switch-Block springt, damit die default-Anweisung nicht ausgeführt wird.

default:
diese Bedingung ersetzt sozusagen das else und wird ausgeführt, wenn keine der Vergleiche zutreffend war.

Schleifen

Eine weitere Möglichkeit den Ablauf des Programms zu beeinflussen sind die sogenannten Schleifen. Hierbei handelt es sich um Anweisungen, die einen gewissen Block an Befehlen so lange wiederholen, wie eine Bedingung erfüllt ist.

Es gibt drei Arten von Schleifen. Die for-Schleife, die while-Schleife und die for-in-Schleife. Die for-in-Schleife behandeln wir allerdings erst in einem der folgenden Kapitel, da man dazu erstmal das Prinzip der Arrays kennen muss.


Die for-Schleife

Die for-Schleife ist eine Schleife, die gleichzeitig die Bedingung darstellt. Gucken wir uns zum besseren Verständnis erst mal ein Beispiel an:

Code:
for(i = 0; i < 100; i++)
  {
    document.write(i + "<br />");
  }


Dieses Beispiel stellt eine Zählschleife dar, die eine Variable von 0 bis 100 in Einerschritten hochzählt.

for(
Schlüsselwort zum Beginn einer for-Schleife.

i=0;
Initialisieren einer Zählvariable. Falls die Variable vorher schon existiert, muss hier nicht unbedingt eine Wertezuweisung stattfinden.

i < 100
Dies stellt die Bedingung dar, nach der die Schleife durchlaufen werden soll. Hier: Durchlaufe diese Schleife genau so lange, wie „i“ kleiner 100 ist.

i++;
Anweisung zum Berechnen des nächsten Variablenwertes. Hier ginge zum Beispiel auch: „i--“ oder „i += 2“.

Der anschließende Codeblock wird solange wiederholt, wie die Bedingung  (i < 100) erfüllt ist, und macht nichts anderes, als „i“ jedesmal auszugeben.


Die while-Schleife

Die while-Schleife ist der nicht so häufig genutzte Vertreter der Schleifen, die auch nur aus einer Bedingung besteht, und keine integrierte Zählfunktion besitzt. Wir fangen also erst mal wieder mit einem kleinen Beispiel an, dessen Ergebnis dasselbe ist, wie das des Beispiels der for-Schleife.

Code:
var zaehler = 0;

while(zaehler  <  100)
  {
    zaehler++;
    document.write(zaehler + "<br />");
  }


Wie man eventuell schon erahnen kann, steht in den Klammern hinter dem Schlüsselwort „while“ die Durchlaufbedingung der Schleife. Aber alles der Reihe nach:

var zaehler = 0;
Hier wird eine Zählvariable deklariert und mit 0 initialisiert.

while(
Dies ist das Schlüsselwort, das die while-Schleife einleitet.

zaehler < 100)
Dies bezeichnet die Durchlaufbedingung der Schleife. Hier: Durchlaufe die Schleife, solange die Variable „zaehler“ einen Wert kleiner als 100 hat.

zaehler++;
Hier wird die Zählvariable „zaehler“ um eins inkrementiert.

document.write(zaehler + "<br />");
Ausgabe der Zählvariable.

Wenn man das Ergebnis nun mit dem der for-Schleife vergleicht, sieht man, dass die for-Schleife von 0 bis 99 zählt, die while-Schleife aber von 1 bis 100. Das liegt daran, dass die for-Schleife erst inkrementiert, wenn die Schleife durchlaufen wurde. Bei der while-Schleife kann man den Zeitpunkt der Inkrementierung selber festlegen. Und hier im Beispiel haben wir vor der Ausgabe inkrementiert.

Die for-in-Schleife erkläre ich wie gesagt erst in dem Kapitel, in dem ich auch Arrays erkläre.

MfG Dac-XP!


>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!

Impressum / Datenschutzerklärung          © der-Webdesigner.net 2002 - 2008           top ▲