Bedingte Anweisungen
Was ist wahr und was ist falsch
Der Spezialfall undefined
In einer if Bedingung die Existenz eines Objektes überprüfen
Auf beliebig viele Szenarien reagieren: switch
if elseif und else
Der ternary operator

Bedingte Anweisungen

nach oben

Bedingte Anweisungen sind Anweisungen, die nur ausführt werden, wenn eine bestimmte Bedingungen erfüllt ist. Ein besonders einfacher Fall sieht so aus.

<script language="javascript">
function geburt(a)
{
if(a == "1749")
{
alert("Thats right ! Goethe wurde 1749 geboren.");
}
else
{
alert("Kulturbanause !! ");
}
}
</script>
<A href=javascript:geburt("1749")>hier</a>

Was das Programm macht, kann man austesteten indem man einmal hier hier und einmal hier clickt. Es gibt zu diesem Fall eigentlich nichts zu sagen. Einmal wird als Wert des Parameters 1749 übergeben, was tatsächlich das Geburtsjahr Goethes ist, mit der Konsequenz, dass die if Bedingung true, also wahr ist. Das andere Mal wird 1759 übergeben, was falsch ist, den dies ist das Geburtsjahr Schillers. In diesem Fall ist die if Bedingung nicht richtig, was dann zur Konsequenz hat, dass das von der else Bedingung Umklammerte ausgeführt wird. Wer noch nie was mit Programmierung zu tun hatte, der sollte vielleicht darauf achten, dass der Vergleich über den Vergleichsoperator "==" ausgeführt wird, der mit dem Zuweisungsoperator "=" wenig bis nichts gemeinsam hat.

Was ist wahr und was ist falsch

nach oben

Interessant ist höchstens die Frage, was eigentlich wahr ist. Wer jetzt einen philosophischen Exkurs erwartet, der irrt. Für JavaScript stellen sich die Verhältnisse in verwirrender Simplizität dar. Wahr ist jede Zahl, die ungleich 0 oder true. Falsch ist 0 und false. Machen wir uns das anhand des folgenden Programmes klar.

<script language=javascript>
function wahrheit()
{
testomat=document.klarheit.wf[document.klarheit.wf.selectedIndex].value;

if(testomat !="banane" && testomat !="Wähl mal was")
{
karotte=eval(testomat);
}
else
{
karotte=testomat;
}

himbeere=typeof(karotte);

if(karotte)
{
alert("Für JavaScript hat "+testomat+ " den Wert wahr. Typ: "+himbeere);
}
else
{
alert("Für JavaScript hat "+testomat+ " den Wert falsch.Typ: "+himbeere);
}
}
</script>
<form name=klarheit>
<select name=wf onchange=wahrheit() >
<option value="Wähl mal was">Wähl mal was
<option value=0>0
<option value=1>1
<option value=-1>-1
<option value=true>true
<option value=false>false
<option value="banane">banane
<option value=3456>3456
</select>
</form>

Man kann jetzt mal ein bisschen rumspielen mit den Werten. Dann wird man sehen, was passiert.

Da also alle Werte, die aus einem Formular gezogen werden erstmal vom Typ string ist, was ja immer wahr ist, müssen wir die Werte erstmal in den richtigen Datentyp konvertieren. Das machen wir in dieser Zeile.

karotte=eval(testomat);

Mit der Funktion eval(), der wir den aus dem Formular gezogenen Wert als Parameter übergeben, konvertieren wir den Wert in den "eigentlich" gemeinten Datentyp. Das Problem dabei ist, dass eval() eine Fehlermeldung liefert, wenn es sich um einen string, eine Zeichenkette, handelt. Wir müssen also vorher dafür sorgen, dass die Funktion eval() nur ausgeführt wird, wenn es sich nicht um einen string handelt. Das machen wir indem wir
durch eine if Bedingung sicher stellen, dass die Funktion eval() nur ausgeführt wird, wenn es sich nicht um "banane" und nicht (&&) um "Wähl mal was" handelt. Aus didaktischen Grüden ermitteln wir dann anschliessend noch mit typeof() den Datentyp und zeigen ihn auch an. Dieses Beispiel zeigt dann, was für JavaScript alles wahr und was alles falsch ist.

Der Spezialfall undefined

nach oben

Es kann vorkommen, dass irgendetwas nicht definiert ist. Meistens will man das natürlich nicht haben, aber leider passiert es. In so einer Situation sucht man dann
meistens nach einer Möglichkeit, bestimmte Routinen nicht auszuführen, bzw. andere Routinen auszuführen. Man kann das nach unten stehendem Schema machen.

<script language="JavaScript">
function undefiniert()
{
alert(typeof(banane));

if(typeof(banane) != "undefined")
{
alert("Da kommen wir nie rein");
}
else
{
alert("Ne, wir wissen nicht was banane ist");
}
}
</script>
<A href=javascript:undefiniert()>hier</A>

Wie üblich drücken wir hier um zu sehen, was das Programm macht. Wir stellen fest, dass JavaScript hier anders reagiert als z.B. Perl. Während bei Perl "undef" an sich schon false ist, ist dies bei Javascript nicht der Fall, ist "undef" für JavaScript erstmal true. Ein Konstrukt wie dieses hier.

if(typeof(banane)
{
alert("DA KÄME MAN REIN");
}

würde also bei JavaScript ausgeführt.

In einer if Bedingung die Existenz eines Objektes überprüfen

nach oben

Bei der Cross Browser Programmierung, also bei dem Versuch, ein Programm so zu schreiben, dass es sowohl vom Explorer als auch von Netscape verstanden wird (möglichst noch in deren unterschiedlichen Versionen) muss man feststellen können, ob ein Objekt überhaupt vorhanden ist. Da Objekte in dem einen Browser vorhanden sind und im anderen nicht, lässt dies dann einen Rückschluss darauf zu, mit welchem Browser man es gerade zu tun hat. Auch hier gilt, was bei JavaScript fast immer gilt. Ist überhaupt irgendetwas da, dann wird das als true, wahr gewertet, wie folgendes Beispiel zeigt.

<script language="javascript">
function testo()
{
alert(document.all);
alert(typeof(document.all));
if(document.all)
{
alert("Hurra, zumindest der Explorer kennt document.all");
}
else
{
alert("Pech für die deutsche Elf, Sie verwenden Netscape");
}
}
</script>
<A href=javascript:testo()>hier</a>

Wer sich von der Richtigkeit der oben angeführten Behauptungen überzeugen will, der kann hier clicken.

Auf beliebig viele Szenarien reagieren: switch

nach oben

Bis jetzt hatten wir nur den Fall, dass entweder das eine oder das eingetreten ist. Wir hatten also etwas in der Art wenn dies und das passiert mach das und wenn jenes eintritt was anderes. Wie sich unschwer denken läßt, gibt es auch kompliziertere Fälle. Wenn wir z.B. die Umsatzsteuer in den jeweiligen Ländern berechnen wollen, die ja unterschiedlich ist, könnte man das mit einem Programm machen, dass so ähnlich aussieht wie dieses. Die Werte, die für die Berechnung verwendet werden, entsprechen übrigens nicht den tatsächlichen Werten. Die Verhältnisse sind in der Praxis sehr viel komplizierter. Das Beispielprogramm sieht dann so aus.

<script language=javascript>
function umsatzsteuer2()
{
land=document.MwSt.land[document.MwSt.land.selectedIndex].value;
summe=document.MwSt.summe.value;
switch(land)
{
case "Spanien":
ergebnis=summe* 12/100;
getroffen=1;
break;
case "Frankreich":
ergebnis=summe* 20/100;
getroffen=1;
break;
case "Deutschland":
ergebnis=summe* 16/100;
getroffen=1;
break;
case "Dänemark":
ergebnis=summe* 22/100;
getroffen=1;
break;
default:
drucken="Dieses Land haben wir nicht im Angebot";
getroffen=0;

}
if(getroffen)
{
drucken="Eine Summe von "+ summe+" € führt in " + land+ "zu einer Umsatzsteuer von "+ergebnis+" €";
}
alert(drucken);
}
</script>

Wir ziehen also im ersten Schritt aus dem Formular das Land und die Summe, Details hierzu unter Zugriffe auf Formularelemente. Die Variable land kann dann die Werte Spanien, Frankreich, Deutschland und England annehmen. In der switch Anweisung teilen wir erstmal mit, mit welcher Variable wir arbeiten bzw. welchen Wert diese Variable hat. Anschliessend wird dann die hierzu passende case Bedingung gesucht. Innerhalb der case Anweisung sollte dann in der Regel break stehen, weil sonst die anderen Bedingungen auch noch abgeprüft werden. Allerdings lohnt es sich genau zu betrachten, was dann eigentlich passiert. Lässt man break z.B. nach Spanien weg, wird mit dem Wert für Frankreich gerechnet, also mit 20 anstatt mit 12. Hier nochmal das gleiche Programm, bei der allerdings die case Anweisung für Spanien kein break hat.

<script language=javascript>
function umsatzsteuer2()
{
land=document.MwSt.land[document.MwSt.land.selectedIndex].value;
summe=document.MwSt.summe.value;
switch(land)
{
case "Spanien":
ergebnis=summe* 12/100;
getroffen=1;
case "Frankreich":
ergebnis=summe* 20/100;
getroffen=1;
break;
case "Deutschland":
ergebnis=summe* 16/100;
getroffen=1;
break;
case "Dänemark":
ergebnis=summe* 22/100;
getroffen=1;
break;
default:
drucken="Dieses Land haben wir nicht im Angebot";
getroffen=0;

}
if(getroffen)
{
drucken="Eine Summe von "+ summe+" € führt in " + land+ "zu einer Umsatzsteuer von "+ergebnis+" €";
}
alert(drucken);
}
</script>

if elseif und else

nach oben

Wesentlich flexibler als switch, wir kommen darauf noch zurück, ist if in Verbindung mit elseif. Bei elseif kann jeweils wieder eine neue, komplexe Bedingung deklariert werden. Will man zum Beispiel dem User nicht nur mitteilen, dass die eingegebene email Adresse falsch ist, sondern auch was falsch ist, dann kann man das nur mit if in Verbindung mit else if machen, weil für eine präzise Fehleranalyse mehrere Bedingungen formuliert werden müssen. Das Skript verwendet regular expression, mehr zu regular expression unter Regular Expressions und deren praktische Anwendung.

<script language=javascript>
function pruefen()
{
zeichenkette=document.emailito.mailin.value;

reg_ex=/^[a-zA-Z0-9]\w[\w|\.|\-]+@\w[\w|\.|\-]+\.[a-zA-Z]{2,4}$/;
reg_ex1=/^[a-zA-Z\d]/;
reg_ex2=/@/;
reg_ex3=/^[\w|\.|\-]+@/;
reg_ex4=/^[a-zA-Z\d]\w[\w|\.|\-]+@\w[\w|\.|\-]+/;
reg_ex5=/\.[a-zA-Z]{2,4}$/;

if(reg_ex.test(zeichenkette))
{
alert("Die email Adresse ist gültig");
}
else if(!reg_ex1.test(zeichenkette))
{
alert("Emails müssen mit einem Buchstaben oder einer Zahl beginnen, aber nur mit den Buchstaben, die auch Bestandteil einer Url sein können");
}
else if(!reg_ex2.test(zeichenkette))
{
alert("Es fehlt das @ Zeichen. Alle email Adressen haben ein @ Zeichen");
}
else if(!reg_ex3.test(zeichenkette))
{
alert("Vor dem @ Zeichen steht ein Zeichen, dass weder ein wordelement, noch ein Punkt noch ein Unterstrich noch ein Bindestrich ist. Das ist nicht möglich");
}
else if(!reg_ex4.test(zeichenkette))
{
alert("Nach dem @ Zeichen steht entweder gar nichts, oder ein Zeichen, dass weder ein wordelement, noch ein Punkt noch ein Unterstrich noch ein Bindestrich ist. Das ist nicht möglich");
}
else if(!reg_ex5.test(zeichenkette))
{
alert("Eine email Adresse endet immer mit einem Punkt auf den mindestens zwei, aber höchstens vier Buchstaben folgen, wobei Sonderbuchstaben nicht erlaubt sind.");
}
}
</script>
<form name=emailito>
email <input type=text name=mailin><input type=button value="email prüfen" onClick=pruefen()></form>

Wer sich davon überzeugen will, dass das funktionniert, der kann ja ein bisschen damit rumspielen. Also irgendwelche syntaktisch falschen email Adressen eingeben und schauen was passiert.

Wie es funktionniert ist relativ klar. Wir haben zu Beginn eine if Bedingung. Die Funktion test als eine Methode eines Objektes (in diesem Fall der regular expression) liefert den Wert 1, wenn das in der regular expression beschriebene Muster sich mit der Zeichenkette deckt. Wenn es sich also tatsächlich um eine syntaktisch gültige
email Adresse handelt, ist die if Bedingung 1, also true,also wahr und der Fall ist erledigt. Wenn nicht, wird eine else if Bedingung nach der anderen abgeprüft. Bei der else if Bedingung müssen wir dann das Ergebniss verneinen. Das heisst, trifft die regular expresson nicht zu, dann wollen wir, dass das von der else if Bedingung
Umklammerte ausgeführt wird. Wir müssen also aus true false und aus false true machen. Dies erreichen wir durch das vorangestellte Ausrufezeichen. Wir finden in der Literatur oft die Behauptung, dass eine switch Anweisung eine Alternative zu einer if /else if Bedingung darstellt. Es stellt sich die Frage, ob
das überhaupt richtig ist. Eigentlich funktionniert die switch Anweisung total anders. Jedes Problem, dass sich mit einer switch Anweisung lösen lässt, lässt sich auch mit einer if / else if Bedingung lösen, aber nicht umgekehrt. case erlaubt nicht die Formulierung einer neuen Bedingung, was wir für die Lösung des Problems oben aber benötigen.

Der ternary operator

nach oben

Der ternary operator ist eine Kurzform einer if else Bedingung. Er hat folgende Syntax.
bedingung?wenn wahr mach das:wenn falsch mach jenes Beispiel

<script language="javascript">
function jahreszeiten()
{
watnu=((document.jahr.zeit[document.jahr.zeit.selectedIndex].value=="Winter")?"Ins Bett legen und warten bis es vorbei ist":"Schwimmen,Rad fahren, ins Café gehen, sich des Lebens freuen");
alert(watnu);
}
</script>
<form name=jahr>
<select name=zeit onChange=jahreszeiten()>
<option value="Herbst">Herbst
<option value="Frühling">Frühling
<option value="Sommer">Sommer
<option value="Winter">Winter
</select>
</form>

if(Name == "Andres" && Wohnort=="Berlin" || Plz=="13189") { }

mit

if(Name="Andres" && (Wohnort="Berlin" || Plz=="13189")) { }

Im ersten Fall reicht es, wenn Plz "13189" ist, damit der ganze Ausdruckt wahr ist. Im zweiten Fall reicht es nicht. Hier muss zusätzlich noch Name Andres sein.

vorhergehendes Kapitel	nach oben	nächstes Kapitel