Anweisung und Sequenz


Anweisungen

Anweisungen kennen Sie aus ihrem täglichen Leben. Eltern, Lehrkräfte, Trainer*innen,... alle wollen Ihnen sagen, was Sie zu tun haben. Das wird erst besser, wenn Sie volljährig sind. Aber auch dann haben Sie noch Chefs, Behörden,... von denen Sie Anweisungen bekommen. Eine Anweisung beschreibt etwas, was ausgeführt werden soll:

Beispiel: "Bring den Müll raus"

Bevor man eine solche Anweisung ausführen kann, muss man die Bedeutung der Worte kennen:

  • "Müll" ist das, was man nicht mehr braucht und nicht aufheben möchte. Er befindet sich meistens in speziellen Behältern, den Mülleimern.
  • "rausbringen" bedeutet, dass draussen irgendwo eine geeignete Mülltonne für die richtige Sorte Müll sein müsste, in die der Müllbeutel geworfen wird.

Um einem Computer beizubringen, was er machen soll, verwendet man auch Anweisungen, bei denen genau festgelegt ist, was der Computer jeweils machen soll. In der folgenden Übung soll eine Figur mit Hilfe Ihrer Anweisungen den Weg aus einem Labyrinth finden:

Für unser Gehirn ist das erste Level einfach und wir sehen die Lösung unmittelbar: laufe eine bestimmte Strecke vorwärts, dann bist du am Ziel. Dem Computer müssen Sie das erst beibringen. Kombinieren Sie die Blöcke so, dass die Figur das Ziel erreicht.

In einem neuen Fenster starten: Labyrinth

Eine Anweisung ist ein einzelner Block, mit dem man dem Computer mitteilt, was er tun soll. Beispiele:


Sequenzen

Viele Vorgänge in unserer Lebenswirklichkeit erfordern viele einzelne Schritte. Angenommen, Sie haben sturmfreie Bude, weil Ihre Eltern über das Wochenende verreist sind und Sie möchten zum Frühstück gerne ein hartgekochtes Ei essen. Im Internet finden Sie folgende Anleitung, die aus einer Sequenz (Aneinanderreihung) von Anweisungen besteht:

  • Bringe Wasser zum Kochen
  • Lege das rohe Ei vorsichtig mit Hilfe eines Esslöffels in das kochende Wasser
  • Lass das Ei 10 Minuten im kochenden Wasser kochen
  • Lass dann solange kaltes Wasser über das Ei fließen, bis dessen Temperatur angenehm ist.

Je komplexer eine Vorgang ist, desto mehr Anweisungen benötigt man, um diesen zu beschreiben. Man benötigt auch immer mehr Wissen, um bei den einzelnen Anweisungen zu verstehen, was man tun soll. In der folgenden Übung ist es schon schwieriger den Ausgang zu finden und man muss verschiedene Anweisungen zu einer Sequenz kombinieren:

Kombinieren Sie die Blöcke so, dass die Figur das Ziel erreicht.

In einem neuen Fenster starten: Labyrinth

Eine Sequenz ist eine Folge von Blöcken, mit denen man dem Computer mitteilt, was er tun soll. Beispiel:


Zeichenfläche und Koordinatensystem

In diesem Programmierkurs sollen Sie nicht nur vorgegebene Programmieraufgaben lösen, sondern auch lernen, wie man eigene Programme schreiben kann. Dazu werden bunte Zeichnungen erzeugt oder kleinen Schildkröten wird das Zeichnen beigebracht. Vor der Ausführung eines Programms wird eine Zeichenfläche mit einer bestimmten Breite und Höhe angelegt und das Programm wird dann innerhalb dieser Zeichenfläche ausgeführt.

Die Maßeinheit der Breite und Höhe auf einem Bildschirm sind Pixel. Pixel kennen Sie aus dem ersten Thema: es sind Bildschirmelemente, die aus drei Subpixeln (rot, grün und blau) bestehen und deren Farbe man einzeln steuern kann. Displays haben sehr unterschiedliche Auflösungen:

  • ein Bildschirm in der Full-HD-Auflösung hat 1920 Pixel nebeneinander und 1080 Pixel übereinander.
  • ein Bildschirm in 4K-Auflösung hat 3840 Pixel nebeneinander und 2160 Pixel nebeneinander.

Bei einem 4K-Bildschirm wird oft eine Vergrößerung eingestellt, so dass mehrere echte Pixel zu einem virtuellen Pixel zusammengefasst werden. Abhängig von der Auflösung und dem Vergrößerungsfaktor eines Displays wird eine Zeichenfläche also unterschiedlich viel Platz auf dem Display einnehmen.

Auf der Zeichenfläche kann man sich ein Koordinatensystem denken, wobei oben links der Koordinatenursprung (0 / 0) ist:

  • die x-Werte werden nach rechts größer
  • die y-Werte werden nach unten größer

Bei der Programmierung denkt man sich Koordinaten in der Zeichenfläche im Vergleich zum Mathematikunterricht an der x-Achse nach unten gespiegelt. Mit der folgenden App können Sie die Koordinaten des Zeichenbereichs erkunden:

  • Bewegen Sie die Maus über die Zeichenfläche.
  • Die Zahlen in der Klammer geben die Koordinaten der Mausspitze an, wobei oben links der Ursprung P(0/0) ist.

In einem neuen Fenster starten: Bildschirm-Koordinatensystem


Zeichenfläche anlegen

Bevor man mit Hilfe von Anweisungen etwas auf dem Bildschirm ausgeben kann, muss zuerst eine Zeichenfläche festgelegt werden. Der technische Begriff für die Zeichenfläche ist Canvas.

Um eine Zeichenfläche anzulegen geht man wie folgt vor:

  • Öffnen Sie den p5.js-Blockly-Editor und ziehen Sie die vorhandenen Blöcke auf das Mülltonnen-Symbol unten rechts oder die Werkzeugleiste in der Mitte, um die Blöcke zu löschen.

  • Klicken Sie auf die Kategorie "p5-Funktionen" und ziehen Sie den Block "setup()" in den Block-Editor.

  • Ändern Sie im Block "setup()" hinter "zeichenflaeche" den Wert von "Breite" und "Höhe" auf jeweils 300 und starten Sie das Programm mit einem Klick auf "Code ausführen". Man sieht eine weiße Fläche.

  • Ziehen Sie aus der Kategorie "Aussehen" den Block "Hintergrund" mit der Farbauswahlfläche in den Block "setup()" und ändern Sie die Farbe. Klicken Sie wieder auf "Code ausführen". Die Zeichenfläche der Größe 300 x 300 Pixel wird mit einer hellblauen Hintergrundfarbe ausgefüllt.

Die Block-Programmierung nimmt einem die Notwendigkeit ab, Anweisungen fehlerfrei zu tippen. Der p5.js-Blockly-Editor generiert aus den zusammengesetzten Blöcken automatisch den Programmier-Code in der Hochsprache JavaScript.

  • Den generierten Programmier-Code kann man ansehen, indem man auf "JavaScript-Code" klickt.
  • Den generierten Programmier-Code kann man bearbeiten, indem man auf "Text-Editor" klickt.

In Jahrgang 11 können Sie sich entscheiden, ob Sie mit der Block-Programmierung, mit der Text-Programmierung oder mit beiden abwechselnd arbeiten. Wenn Sie den Grundkurs Informatik wählen, wird zunehmend die Text-Programmierung verwendet werden.

Vergleich von Text-Programmierung und Block-Programmierung

  • Bei der Text-Programmierung muss man die Anweisungen und die genaue Schreibweise der Anweisungen auswendig können oder in einer Dokumentation nachlesen und völlig fehlerfrei tippen, damit ein Programm ausgeführt werden kann. Dafür hat man völlige Freiheit beim Tippen des Programms und kann alle möglichen Anweisungen der Programmiersprache verwenden.
  • Bei der Block-Programmierung kann man ein Programm aus Blöcken zusammenstellen, ohne dass man die Anweisungen auswendig kennt. Dafür können nur Anweisungen verwendet werden, für die es auch Blöcke gibt, so dass nicht alle möglichen Programme in der Block-Programmierung geschrieben werden können.

Übung 1: Strichmännchen

Beim Programmieren in der Zeichenfläche wird die Position eines Objekts mit Hilfe von Koordinaten P(x/y) angegeben. Die x-Koordinate gibt den Abstand zum linken Rand der Zeichenfläche an und die y-Koordinate gibt den Abstand zum oberen Rand der Zeichenfläche an.

Öffnen Sie den p5.js-Blockly-Editor und zeichnen Sie folgende Figur nach.

Hinweise:

  • Die Koordinaten in y-Richtung müssen Sie bei der Programmierung mit positiven Werten angeben.
  • Nutzen Sie die Grundformen "Dreieck", "Ellipse", "Linie" und "Rechteck" aus der Kategorie "Grundformen".
  • Ändern Sie das Aussehen der Objekte mit den Blöcken aus der Kategorie "Aussehen".

Übung 2: Olympia

Die olympischen Ringe sehen, etwas vereinfacht gezeichnet, wie folgt aus:

  • Erstellen Sie mit dem Block-Editor oder dem Text-Editor ein Programm, welches diese Ringe zeichnen kann.

Die Farben in der Vorlage können Sie herausfinden, indem Sie das Bild mit den Ringen speichern (rechte Maustaste auf das Bild), in z.B folgender Internetseite laden: https://imagecolorpicker.com/ und sich dort die Farben im Hex-Code oder im RGB-Code anzeigen lassen.