Bedingte Anweisungen und Schleifen

if-else

Syntax:

if (BEDINGUNG) {
	Javascript-Code, der ausgeführt wird, wenn BEDINGUNG wahr ist.
} else {
	Javascript-Code, der ausgeführt wird, wenn BEDINGUNG falsch ist. (*optional*)
}

Beispiel:

function Geheim () {
  var Passwort = "TheSeminarFormerlyKnownAsHKI";
  var Eingabe = window.prompt("Bitte geben Sie das Passwort ein", "");
  if (Eingabe != Passwort) {
	alert("Falsches Passwort!");
  } else {
	location.href = "geheim.html"; //Umleitung auf die "geheime" Seite
  }
}

Erklärung des Beispiels:

Im Beispiel fordert ein Dialogfenster (window.prompt()) den Anwender auf, ein Passwort einzugeben. Der Rückgabewert, das eingegebene Passwort, wird in der Variablen Eingabe gespeichert. Mit if (Eingabe != Passwort) fragt das Script ab, ob die Eingabe anders lautet als der der Variablen Passwort zuvor zugewiesene Wert TheSeminarFormerlyKnownAsHKI.

Im anderen Fall (else), wenn Eingabe und Passwort den gleichen Wert haben, wird mit location.href eine andere Seite aufgerufen, nämlich die "geheime" Seite.

Vergleichsoperatoren

var SinnDesLebens = 42;
	var Alter = 8;
	 
	if (SinnDesLebens == 42)
	  alert(1);
	if (SinnDesLebens != 42)
	  alert(0);
	if (SinnDesLebens > 42)
	  alert(0);
	if (SinnDesLebens < 42)
	  alert(0);
	if (Alter >= 18)
	  alert("SIE duerfen das hier sehen!");
	if (Alter <= 17)
	  alert("Du darfst das hier NICHT sehen!");

Siehe auch auf w3schools und unter den Videos!

Logische Operatoren

  • && verknüpft zwei oder mehrere Bedinungen durch UND: Alle Bedingungen müssen wahr sein.
  • || verknüpft zwei oder mehrere Bedinungen durch inklusiv durch ODER: EINE Bedingung muss wahr sein.
  • ! bezieht sich auf eine Bedingung. Ausgesprochen: NOT. Interpretiert eine wahre Bedingung als falsch und umgekehrt.

Beispiel:

var meinAlter = 23;
	var sehrAengstlich = new Boolean(true); // Bool-Variablen: true oder false
	 
	if (meinAlter >=21 && meinAlter <= 75 && !sehrAengstlich) {
	     alert('okay... Sie halten das aus!');
	}

switch-case

Beispiel:

HTML

 <form action="#">
    <input type="text" id="lieblingsfarbe">
 </form>
<button onclick="Psycho();">PSYCHO</button>

JS

function Psycho() {
         var Farbe = document.getElementById('lieblingsfarbe').value;
	     switch (Farbe) {
	        case "blau":
	          alert("Sie sind sehr bescheiden");
	          break;
	        case "rot":
	          alert("Sie sind sehr aktiv");
	          break;
	        case "gelb":
	          alert("Sie haben ein sonniges Gemüt");
	          break;
	        case "schwarz":
	          alert("Machen wir gleich noch einen Termin.");
	          location.href="terminvergabe.html";
	          break;
	        default:
	          alert("Das nennen Sie eine Farbe?");
	          break;
	    }
	}

Schleifen: While() und For()

Eine Schleife ist eine Kontrollstruktur, um eine Anweisung automatisch wiederholt auszuführen.

while-Schleife:

while (condition) {
code block to be executed
}

In der while-Schleife wird ein Code-Block so lange wiederholt, bis die Bedingung nicht mehr gültig ist.

Beispiel:

while (i < 10) {
text += "The number is " + i;
i++;
}

Solange die Variable i kleiner als 10 ist, wird bei jedem Durchlauf

  • der rechte Teil der Aussage ("The number is " + i;) in die Variable "text" gespeichert und zum bisherigen Inhalt hinzugefügt (Zeile 2)
  • die Variable i um 1 erhöht (Zeile 3)

Ergebnis ist also dieses:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

for-Schleife:

for (statement 1; statement 2; statement 3) {
code block to be executed
}

In der for-Schleife wird ein Code-Block so lange wiederholt, bis die Abbruchbedingung erfüllt ist.

statement 1: Hier wird die Variable initialisiert, die innerhalb der Schleife genutzt wird, bevor die Schleife zum ersten Mal läuft. In der Regel wird dafür "i" verwendet (i wie iterator).

statement 2: Hier steht die Abbruchbedingung. Wenn sie erreicht ist, wird die Schleife beendet.

statement 3: Hier wird die initialisierte Variable nach jedem Schleifendurchgang erhöht.

Beispiel:

for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
  1. Vor dem ersten Schleifendurchgang wird die Variable i auf 0 gesetzt.
  2. Wenn die Variable i kleiner ist als 5, wird die Zeile "The number is " + i + "<br>" zu dem bisherigen Inhalt der Variable text hinzugefügt.
  3. Variable i wird um 1 erhöht. Mit dem neuen Wert von i wird die Schleife erneut durchlaufen, solange er kleiner ist als 5.

Ergebnis ist dieses:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4