JavaScript Lernen – Tutorial Teil 3: Bedingungen

java-script-tutorial-teil-3-bedingungenDieser dritte Teil knüpft direkt an den zweiten Teil des JavaScript Tutorials an. In diesem haben wir uns Schleifen angeschaut und hatten das Problem, dass wenn wir bei einer Ausgabe von einer bestimmten Anzahl an Zahlen, jede Zahl mit einem Komma trennen möchten, wir am Ende der Zahlenreihe noch ein zusätzliches Komma haben, ohne das noch eine Zahl folgt. Das stört aus ästhetischen Gründen erst mal sehr. Wir haben uns damit beholfen, dass wir einfach alle Zahlen samt Komma bis zur letzten Zahl ausgegeben haben und diese letzte Zahl ohne Komma dann noch einmal separat. Das sah folgendermaßen aus:

for(var start=1; start<=9; start++) {
	document.write(start + ", ");
}
document.write(start);

Nun kann man das viel eleganter lösen und zwar mit einer Bedingung. Eine Bedingung die sagt, gebe jeweils die Zahl gefolgt von einem Komma aus, bei der letzten Zahl hingegen nicht. Eine Bedingung haben wir übrigens schon bei den Schleifen kennen gelernt, nämlich die Abbruchbedingung. Allgemein leitet man eine Bedingung mit dem Schlüsselwort if(…) ein. Anschließend folgt in den geschwungenen Klammern, der Code der ausgeführt werden soll, wenn die Bedingung zutrifft. Trifft die Bedingung nicht zu, kann entweder mit dem nachfolgenden Code weiter gemacht werden, oder man sagt explizit mit dem Schlüsselwort else {} was gemacht werden soll, wenn die Bedingung eben nicht zutrifft. Eine solche if-else-Bedingung könnte lauten:

if(alter > 18) {
	document.write("Du darfst auch noch nach 0:00 Uhr in die Disco");
} else {
	document.write("Du darfst nicht in die Disco, sondern musst ins Bett!");
}

Setzen wir nun das obere Beispiel mit der Zahlenausgabe mit einer if-Bedingung um, dann sieht der Code erweitert folgendermaßen aus:

for(var start=1; start<=10; start++) {
	if (start < 10) {
		document.write(start + ", ");
	}else document.write(start);
}

Wie man sieht, erhält man wieder folgende Ausgabe: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

Bedingung sind im weiteren Verlauf sehr wichtig, da man mit ihnen genau vorschreiben kann, wie ein Programm zu reagieren hat. Mit Bedingungen kann man auf Gleichheit (==)/Ungleichheit (!=), auf größer (>) oder kleiner(<) als bzw. größer gleich(>=) oder kleiner gleich (<=), aber auch auf wahr oder falsch prüfen. Wollen wir beispielsweise überprüfen, ob 1=2 ist, dann schreiben wir die Bedingungen

if(1==2) {
	document.write("1 ist gleich 2");
}else {
	document.write("1 ist nicht gleich 2");
}

Da das einfache Gleichheitszeichen schon vergeben ist, muss man für die Überprüfung der Gleichheit auf zwei Gleichheitszeichen hintereinander zurückgreifen. Möchte man zwei Strings vergleichen, dann müssen die Strings jeweils in Hochkommas gesetzt werden, also bspw. if(„eins“==“zwei“){…}. Am Anfang ist es ein beliebter Fehler statt zwei nur ein Gleichheitszeichen zu machen. Doppelt ärgerlich ist dann, dass der Browser bei der Ausführung gar nicht abbricht und so signalisiert, dass etwas falsch ist. Denn beispielsweise if(variable = 1) ist syntaktisch ebenfalls korrekt. Nur findet hier keine Überprüfung auf den Wert, sondern eine Zuweisung des Werts auf die Variable statt. Dieses Beispiel macht auch klar, dass ein Bedingung nicht unbedingt einen Vergleich enthalten muss, sondern lediglich einen Ausdruck, der wahr oder falsch ist. Die einfache Zuweisung variable = 1 ist dabei (fast) immer wahr (true). Nicht true ist eine Zahl oder ein String, wenn sie 0 oder einen leeren String als Variable haben.

Während also:

if(variable=1) {
	document.write(variable);
}

die Zahl 1 ausgibt, gibt:

if(variable=0) {
	document.write(variable);
}

nichts aus, da der Wert der Variablen eben 0 ist und damit nicht wahr. Neben Strings und Zahlen gibt es auch noch Boole’sche Variablen, diese spezielle Variablen können jeweils nur einen der beiden Zustände true oder false besitzen. Nachfolgender Code würde beispielsweise keine Ausgabe geben, da die Variable mit false initialisiert wird und in der Bedingung geprüft wird, ob die Variable true ist. Da sie es nicht ist, wird die Ausführung der Ausgabe übersprungen und man befindet sich am Ende der Bedingung.

variable=false;
if(variable) {
	document.write(variable);
}

Im nachfolgenden Kapitel werden wir uns noch einmal ausführlich mit den unterschiedlichen Variablentypen auseinandersetzen.

9 Gedanken zu „JavaScript Lernen – Tutorial Teil 3: Bedingungen“

  1. Hey Leonard,
    freut mich, dass die das Tutorial bisher gut gefällt. Tatsächlich habe ich noch ein paar Teile geplant und es sind auch schon ein paar fertig geschrieben, allerdings überlege ich gerade ob ich die ganzen Tutorials nicht lieber in ein Dokument packen soll, deshalb kann ich dich gerade leider nur vertrösten :/

    Beste Grüße
    Christian

    Antworten
    • Danke für die schnelle Antwort.
      Das ist deine Entscheidung. Ich lese gerne hier aber in einem Dokument wäre es auch okay. 🙂
      Bin gespannt was noch kommt. ^^

      Antworten
    • Hi Johanna,

      also hier werden definitiv keine Teile mehr veröffentlicht werden. Ich habe aber wie gesagt noch schon zwei fertig geschriebene Teile und würde das ganze schon gerne abschließen, dann aber in einem kompletten Dokument als eBook. Ist aber zeitlich momentan nicht ganz einfach …

      Wenn es soweit ist, kannst du mir gerne auf Twitter folgen: https://twitter.com/stobitzer dort werde ich das auf jeden Fall ankündigen wenn es soweit ist oder falls du Interesse hast, die schon erschienenen Teile zu lesen, kann ich sie dir gerne auch per Mail schicken. Im Gegenzug für eine Korrektur 😉

      Beste Grüße
      Christian

      Antworten
  2. Hallo Christian,

    ich wollte mal fragen ob da E-Book schon draußen ist, denn mir gefällt dein Tutorial sehr.
    Es ist ja jetzt schon einige Zeit vergangen seitdem du die ersten 3 Teile Released hast.
    ich würde mich über eine Antwort freuen

    MfG Max

    Antworten

Schreibe einen Kommentar zu WebWorker Antworten abbrechen