11.4.1 Tracetabelle

1.1 Algorithmen

Im Thema "Programmieren" wurden Figuren gezeichnet, eine Schildkröte hat sich bewegt und Objekte wurden animiert. Im Thema "Algorithmen" spielt die Zeichenfläche keine Rolle, sondern es werden Variablen angelegt, deren Wert verändert und die Werte der Variablen werden beobachtet.

Programmstrukturen mit welchen der Wert von Variablen verändert wird, nennt man Algorithmen.

Mit Hilfe von Algorithmen werden:

Berechnungen mit Daten durchgeführt,
Daten sortiert,
Daten mit besonderen Eigenschaften gesucht,
Daten verschlüsselt und entschlüsselt
...

Damit man versteht, was ein Algorithmus mit Daten macht, ist es hilfreich, wenn man den Wert von Variablen, in denen Daten gespeichert sind, während der Ausführung eines Algorithmus beobachten kann.

Die tabellarische Auflistung von Daten, die in Variablen gespeichert sind und die man während des Ablaufs eines Algorithmus notiert, nennt man eine Tracetabelle.

1.2 Erste Tracetabelle

Blöcke
Text

Starten Sie das Programm Blockly-Trace-Editor

Erstellen Sie eine neue Variable, indem Sie auf die Kategorie "Variablen" klicken, dort auf "Variable erstellen ..." klicken und die Variable "a" nennen. Sie sollten folgendes sehen:

Ziehen Sie den Block "setze a auf" in den Editor und ergänzen diesen mit einem Zahlblock aus der Kategorie "Mathematik". Speichern Sie in der Variablen "a" den Wert "2". Sie sollten folgendes sehen:

Der Wert der Variablen "a" soll verdoppelt werden. Fügen Sie dazu aus der Kategorie "Variablen" den Block "setze a auf" ein. Ergänzen Sie diesen Block mit dem "Rechenblock" aus der Kategorie "Mathematik" und setzen in diesen Block den Variablen-Block "a" ein. Sie sollten folgendes sehen:

Der Wert der Variablen "a" soll zuerst mit 25 addiert werden und dann verdreifacht werden. Fügen Sie dazu zwei Rechenblöcke ein und kombinieren diese geeignet. In der Blockprogrammierung gibt es keine Klammern oder Punkt vor Strich-Regeln, sondern die Blöcke, die in einem gemeinsamen Block stehen, werden zuerst miteinander verechnet. Sie sollten folgendes sehen:

Klicken Sie links im Programm wiederholt auf die Schaltfläche "Nächster Schritt". Das Programm wird Schritt für Schritt ausgeführt und wenn das Ende des Programms erreicht wurde, wird die Schaltfläche "Nächster Schritt" für ein paar Sekunden deaktiviert.

Jetzt soll der Wert der Variablen "a" nach jeder Anweisung angezeigt werden.

Fügen Sie aus der Kategorie "Trace-Tabelle" den Block "Trace-Eintrag dazu" in den Editor ein und setzen diesen hinter die erste Anweisung.

Da es im Programm nur ein Variable gibt, soll beim Block "Trace-Eintrag dazu" nur eine Variable angefügt werden können. Klicken Sie auf das Zahnrad-Symbol im Block "Trace-Eintrag dazu" und ziehen Sie einen der beiden Blöcke "Element" auf die graue Spalte, so dass er entfernt wird.

Docken Sie an die freie Andockstelle im Block "Trace-Eintrag dazu" aus der Kategorie "Variablen" den Block für die Variable "a" an.
Kopieren Sie den gerade erstellten Block mit "rechte Maustaste" und "Kopieren" und fügen Sie den kopierten Block hinter jeder Anweisung ein. Sie sollten folgendes sehen:

Jeder Block "Trace-Eintrag dazu" muss einen eigenen Namen haben, damit die Erstellung der Trace-Tabelle fehlerfrei funktioniert. Ändern Sie die Namen eines jeden solchen Blocks in einen eigenen Namen. Sie sollten folgendes sehen:

Erzeugen Sie eine Tracetabelle mit den Werten der Variablen "a", indem Sie wiederholt auf die Schaltfläche "Nächster Schritt" klicken. Sie sollten folgendes sehen:

Wenn etwas nicht klappt, können Sie das Programm auch laden: Rechnen mit a.

Starten Sie das Programm p5js-Text-Editor oder erstellen Sie das Programm wie bei Blöcken erläutert und klicken bei einem funktionierenden Block-Programm oben auf "Text-Editor".
Geben Sie folgenden Programmtext ein (z.B. mit Copy/Paste):

var a;

a = 2;
console.log({Eintrag:"t1", a:a});
a = a * 2;
console.log({Eintrag:"t2", a:a});
a = (a + 2) * 3;
console.log({Eintrag:"t3", a:a});

Erklärung:

Mit var a; wird eine neue Variable mit dem Namen "a" festgelegt.
Mit a = 2; wird der Variablen "a" der Wert 2 zugeordnet.
Mit a = a * 2; wird der Wert von "a" mit 2 multipliziert.
Mit a = (a + 2) * 3; wird der Wert von "a" mit 2 addiert und dann verdreifacht.
Mit console.log({Eintrag:"t1", a:a}); wird der aktuelle Wert von "a" in der Konsole ausgegeben. Um die Konsole anzuzeigen, klicken Sie unten auf die Leiste mit der Beschriftung "CONSOLE". Sie sehen in der Konsole alle Werte der Variablen "a", die sie in den verschiedenen Zuständen während der Programmausführung hatte:

1.3 Übung: Schleife

Blöcke
Text

Starten Sie das Programm Blockly-Trace-Editor oder löschen Sie das aktuelle Programm durch einen Klick auf "Programm löschen", wenn der Blockly-Trace-Editor noch geöffnet ist.
Bauen Sie folgendes Programm und erzeugen Sie die vollständige Tracetabelle:

Bei solchen einfachen Veränderung von "a" kann unser Gehirn noch mitdenken. Bei komplizierteren Algorithmen ist es hilfreich, wenn man sieht, bei welcher Wiederholung, die Variable "a" einen bestimmten Wert hatte. Dazu verwendet man den Schleifenblock "zähle ... von ... bis" bei welchem eine Zählvariable verwendet wird, die ihren Wert bei jedem Durchlauf der Schleife verändert.

Damit beide Variablen in der Trace-Tabelle angezeigt werden, muss der Block "Trace-Eintrag dazu" mit der Variablen "i" ergänzt werden.

Klicken Sie auf das Zahnradsymbol im Block "Trace-Eintrag dazu" und schieben Sie von der linken Spalte einen Block "Element" innerhalb von "verbinden".

Ergänzen Sie den Block mit der Variablen "i", so dass folgende Trace-Tabelle erzeugt wird, wenn Sie wiederholt auf "nächster Schritt" klicken:

Wenn man im Block "Trace-Eintrag dazu" eine Variable andockt, die noch keinen Wert hat, dann wird in der Trace-Tabelle nichts angezeigt.

Wenn etwas nicht klappt, können Sie das Programm auch laden: Schleife.

Starten Sie das Programm p5js-Text-Editor
Geben Sie folgenden Programmtext ein (z.B. mit Copy/Paste):

var a, i;

a = 0;
console.log({Eintrag:"t1", i:i, a:a});
for (i = 1; i <= 10; i = i + 1) {
  a = a + 10;
  console.log({Eintrag:"t2", i:i, a:a});
}

Erklärung:

Mit var a, i; werden die Variablen "a" und "i" ohne eine Wertzuordnung festgelegt.
Mit a = 0; wird der Variablen "a" der Wert 0 zugeordnet.
Mit for (i = 1; i <= 10; i = i + 1) { ... } werden die Anweisungen zwischen den geschweiften Klammern so oft ausgeführt, bis die Variable "i" den Wert 10 erreicht hat. Bei jedem Schleifendurchlauf wird die Variable "i" um eins erhöht.
Mit a = a + 10; wird der aktuelle Wert von "a" mit 10 addiert.
Mit console.log({Eintrag:"t1", a:a}); wird der aktuelle Wert von "a" in der Konsole ausgegeben. Um die Konsole anzuzeigen, klicken Sie unten auf die Leiste mit der Beschriftung "CONSOLE". Sie sehen in der Konsole alle Werte der Variablen "a", die sie in den verschiedenen Zuständen während der Programmausführung hatte:

1.4 Übung: Fibonacci

Die Fibonacci-Zahlenfolge ist eine berühmte Folge von Zahlen:

1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 …

Sie entsteht, indem ab der dritten Zahl eine neue Zahl in der Zahlenfolge die Summe der beiden letzten bereits vorhandenen Zahlen ist:

2 = 1 + 1; 3 = 2 + 1; 5 = 3 + 2; 8 = 5 + 3; ...

Ein Algorithmus, um diese Zahlenfolge zu erzeugen, kann wie folgt beschrieben werden:

Lege drei Variablen "neueZahl = 1", "v1 = 0", "v2 = 1" fest
Wiederhole von i = 2 bis 15:
- neueZahl = v1 + v2
- v1 = v2
- v2 = neue Zahl

Erstellen Sie ein Block- oder Text-Programm, das diesen Algorithmus auführen kann und erzeugen Sie eine Trace-Tabelle mit den ersten 15 Zahlen der Fibonacci-Folge.

Programmcode einer möglichen Lösung:

var neueZahl, v1, v2, i;

neueZahl = 1;
v1 = 0;
v2 = 1;
console.log({Eintrag:"t1", i:i, v1:v1, v2:v2, neueZahl:neueZahl});
for (i = 2; i <= 15; i = i + 1) {
  neueZahl = v1 + v2;
  v1 = v2;
  v2 = neueZahl;
  console.log({Eintrag:"t2", i:i, v1:v1, v2:v2, neueZahl:neueZahl});
}

Lösungs-Programm laden: Fibonacci