Verzweigung


Blinkende gelbe Ampel

Sehen wir uns noch einmal den Programmablauf an. Das gelbe Licht ist beim Programmstart schwarz. Nach einer halben Sekunde wird das erste Mal die draw()-Funktion aufgerufen und die gelbe Lampe wird gelb eingefärbt.

Was passiert, wenn man jetzt direkt dahinter die Farbe wieder auf schwarz ändert?

Die Ampel bleibt schwarz!

draw() wird zwar 2 Mal pro Sekunde aufgerufen, aber nachdem die Lampe gelb gefärbt wurde, wird sie ohne merkbare Zeitverzögerung sofort wieder schwarz, da sowohl die Sequenz für Gelb als auch die Sequenz für Schwarz in der gleichen Schleife stehen.


Nachdenken

Bevor wir den Computer weiter programmieren können, muss erst einmal unserem Gehirn klar sein, wie das Programm ablaufen soll. Dafür werfen wir unser Gehirn an und denken nach.

Idee:

Wenn der Computer wüsste, dass die Lampe schwarz ist, dann könnte er entscheiden, die Lampe gelb zu färben.

Wenn der Computer wüsste, dass die Lampe gelb ist, dann könnte er entscheiden, die Lampe schwarz zu färben.

Ablaufdiagramm für die Idee:

Abbildung 1

Wenn die gelbe Ampel blinken soll, muss dem Computer der Zustand der gelben Ampel klar sein (AN oder AUS). Den Zustand kann der Computer mit folgender Anweisung abfragen und die entsprechende Anweisung ausführen:

Wenn Zustand == Lampe an, dann mache folgendes...

Für den Computer schreibt man das wie folgt auf:

if (Zustand == Lampe an) { Anweisungen }

In unserem speziellen Fall legen wir für den Zustand der gelben Lampe eine Variable fest:

var Zustand_gelbe_Lampe = 'AUS';

Wenn die gelbe Lampe eingeschaltet wird, ändern wir den Wert der Variablen wie folgt:

Zustand_gelbe_Lampe = 'AN';

Damit kann man den Zustand abfragen und den Zustand der Lampe ändern:

Wenn (Zustand_gelbe Lampe == 'AN') dann schalte sie aus, sonst schalte sie an

Für den Computer schreibt man das wie folgt auf:

if(Zustand_gelbe_Lampe == 'AN') { Zustand_gelbe_Lampe = 'AUS' } ELSE { Zustand_gelbe_Lampe = 'AN' }

Beachten Sie, dass bei einer Abfrage zwei Gleichheitszeichen gesetzt werden und bei einer Änderung des Werts der Variablen ein Gleichheitszeichen.

Über den Zustand der gelben Lampe kann dann die Farbe, mit welcher der Kreis gezeichnet werden soll, festgelegt werden:

if(Zustand_gelbe_Lampe == 'AN') { fill('Yellow') } else { fill('Black') }

So sieht das im Programm aus:

Denken Sie in Ruhe über das Programm nach und diskutieren Sie mit Ihren Mitschüler*innen, bis Sie jede Zeile verstanden haben.


Aufgabe 1:

Erkundigen Sie sich im Internet, was eine orange blinkende Sicherheitsbake ist.

Programmieren Sie eine orange blinkende Sicherheitsbake in folgendem Editor. Verwenden Sie das Programm der blinkenden Ampel als Vorlage und verändern Sie es nach Bedarf. Sie können den Programmcode mit Hilfe von Copy/Paste in den leeren Editor kopieren.

Kopieren Sie den fertigen Programmiertext in einen Texteditor (z.B. Notepad++).
Speichern Sie die Datei unter dem Namen sicherheitsbake_name.js und lassen Sie Ihre Lösung der Lehrkraft zukommen.

(Wert: 10 XP)