taralino

Die if-else-Struktur

Die if-Struktur lässt sich auf einfache Art und Weise auch dahingehend erweitern, dass eine Bedingung gefolgt von zwei Blöcken von Anweisungen definiert wird.

Der erste Block von Anweisungen wird genau dann ausgeführt, wenn die Bedingung erfüllt wird, der zweite Block, wenn die Bedingung nicht erfüllt ist:

Einführung in die if-else-Struktur

Die if-else-Struktur besteht aus zwei Blöcken von Anweisungen, wobei genau einer dieser Blöcke in Abhängigkeit einer Bedingung ausgeführt wird.

Es handelt sich also um eine Ergänzung der if-Struktur, wobei zusätzlich das Schlüsselwort else gefolgt vom zweiten Block zu verwenden ist.

Beispiel

Es werden unterschiedliche Befehle abhängig davon aufgerufen, ob der Wert der Variablen r kleiner bzw. größer gleich 0.5 ist.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,16], [0,8], {width:560, background:"lightgrey"});

for (var k = 0; k < 100; k = k+1) {
  var x = random(0, 16);
  var y = random(0, 8);
  var r = random(0.1, 0.7);

  if (r < 0.5) {
    Canvas.circle(x, y, r, {fill:"red"});
  } else {
    Canvas.circle(x, y, r, {fill:"blue"});
  };
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Beispiel

Es können if-else-Strukturen auch ineinander verschachtelt werden.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,16], [0,8], {width:560, background:"lightgrey"});

for (var k = 0; k < 100; k = k+1) {
  var x = random(0, 16);
  var y = random(0, 8);

  if (x < 8) {
    if (y < 4) {
      Canvas.circle(x, y, 0.3, {fill:"red"});
    } else {
      Canvas.circle(x, y, 0.3, {fill:"yellow"});
    };
  } else {
    Canvas.circle(x, y, 0.3, {fill:"blue"});
  };
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Quellcode zuvor vertraut. Ergänze das Beispiel, sodass alle Kreise im rechten oberen Rechteck in grün statt in blau dargestellt werden.