11.2.1 Programmiersprachen

Im Thema "Programmieren" werden Sie lernen, wie man einen Computer mit Hilfe geeigneter Programmiersprachen programmieren kann. Ein Computer ist ein Gerät, das mit Hilfe von Elektronen gesteuert wird und nur zwei Zustände kennt: 1 (elektrischer Strom an) und 0 (elektrischer Strom aus). Aus dem Kapitel Codierung wissen Sie bereits, dass man mit einer Folge von 1 und 0 ein Wort aus unserer Sprache binär codieren muss, bevor ein Computer dieses Wort speichern und verarbeiten kann. Im ASCII-Code wird beispielsweise das Wort "Hallo" wie folgt notiert:

"Hallo" = 01001000 01100001 01101100 01101100 01101111

Auch Anweisungen, die ein Computer ausführen soll, müssen binär codiert werden. Wenn man beispielsweise die Bitfolge "10110000 01100001" der zentralen Recheneinheit eines Computers übermittelt, dann sagt man dem Computer damit: hole den Wert 97 aus dem Speicherbereich ax des Arbeitsspeichers (Assembler).

Ein binäres Programm sieht beispielsweise wie folgt aus:

0110001101110010011001010110000101110100011001010100001101100001011011100111011001100001011100
1100101000001100110011000000110000001011000010000000110011001100000011000000101001001110110010
0000001000000000101001100010011000010110001101101011011001110111001001101111011101010110111001
1001000010100000100111011011000110100101100111011010000111010001110011011000010110110001101101
0110111101101110001001110010100100111011000010100000101001110011011101000111001001101111011010
1101100101001010000010011101100100011000010111001001101011011100110110110001100001011101000110
0101011000100110110001110101011001010010011100101001001110110000101001110011011101000111001001
1011110110101101100101010101110110010101101001011001110110100001110100001010000011000100110101
0010100100111011000010100110011001101001011011000110110000101000001001110111000001101111011101
1101100100011001010111001001100010011011000111010101100101001001110010100100111011000010100111
0001011101010110000101100100001010000011011000110000001011000010000000111000001100000010110000
1000000011000100110011001100000010110000100000001101100011000000101100001000000011001000110001
0011000000101100001000000011001000110100001100000010110000100000001101100011000000101100001000
000011001000110000001100000010100100111011

Ein Computer kann ein solches Programm leicht ausführen, denn seine Hardware ist so gebaut, dass diese binäre Folge abgearbeitet wird. Unser Gehirn ist völlig anders gebaut. Für unser Gehirn ist eine solche binäre Folge bedeutungslos. Wir denken in größeren Strukturen.

Weil unser Gehirn nicht dafür gebaut ist, binär zu denken, haben Informatiker*innen Methoden entwickelt, um den Binärcode, welche der Computer verarbeiten soll, mit Zeichen und Worten darzustellen. In der Anfangszeit der Programmierung wurde die Assembler-Sprache entwickelt, mit welcher man ein Programm, das z.B. den Text "Hallo Welt" ausgeben soll, mit folgenden Worten und Zeichen notieren konnte:

DATA    SEGMENT                 ;Beginn des Datensegments
Meldung db  "Hallo Welt"        ;- Zeichenkette „Hallo Welt“
        db  13, 10              ;- Neue Zeile
        db  "$"                 ;- Zeichen, das INT 21h, Unterfunktion 09h als Zeichenkettenende verwendet
DATA    ENDS                    ;Ende des Datensegments

CODE    SEGMENT                 ;Beginn des Codesegments
Anfang:                         ;- Einsprung-Label fuer den Anfang des Programms
        mov ax, DATA            ;- Adresse des Datensegments in das Register „AX“ laden
        mov ds, ax              ;  In das Segmentregister „DS“ uebertragen (das DS-Register kann nicht direkt mit einer Konstante beschrieben werden)
        mov dx, OFFSET Meldung  ;- die zum Datensegment relative Adresse des Textes in das „DX“ Datenregister laden
                                ;  die vollstaendige Adresse von „Meldung“ befindet sich nun im Registerpaar DS:DX
        mov ah, 09h             ;- die Unterfunktion 9 des Betriebssysteminterrupts 21h auswaehlen
        int 21h                 ;- den Betriebssysteminterrupt 21h aufrufen (hier erfolgt die Ausgabe des Textes am Schirm)
        mov ax, 4C00h           ;- die Unterfunktion 4Ch (Programmbeendigung) des Betriebssysteminterrupts 21h festlegen
        int 21h                 ;- diesen Befehl ausfuehren, damit wird die Kontrolle wieder an das Betriebssystem zurueckgegeben
CODE    ENDS                    ;Ende des Codesegments

END     Anfang                  ;- dem Assembler- und Linkprogramm den Programm-Einsprunglabel mitteilen
                                ;- dadurch erhaelt der Befehlszaehler beim Aufruf des Programmes diesen Wert

Quelle: Beispielprogramm aus Wikipedia zu Assembler

Das ist schon verständlicher, als nur eine Folge von Einsen und Nullen, aber auch in dieser Schreibweise bleibt ein Programm unverständlich.

Um die Programmierung von Computern deutlich zu erleichtern, wurden Hochsprachen entwickelt, bei denen mit englischen Worten und einfachen Zeichen ein Programm geschrieben wird. Mit folgendem Programm in der Hochsprache JavaScript kann man eine Zeichenfläche anlegen und darin einen Kreis zeichnen:

setup = function() {
  var zeichenflaeche = createCanvas(400, 400);
  frameRate(30);
};

draw = function() {
  background("#33ccff");
  fill("#ffff00");
  stroke("#ffcc00");
  strokeWeight(5);
  ellipse(90, 120, 120, 120);
};    

Die verwendeten Worte haben einen Bezug zu dem, was der Computer tun oder darstellen soll. Damit kann man sich den Ablauf eines Programms vorstellen.

Die Entwicklung von Hochsprachen war noch nicht das Ende der Vereinfachungen. Speziell für Programmieranfänger*innen wurde eine Methode entwickelt, mit welcher Anweisungen als grafische Blöcke dargestellt werden. Beispielsweise kann man mit folgenden Blöcken eine Zeichenfläche anlegen und darin einen Kreis zeichnen lassen:

Der große Vorteil der Block-Programmierung ist, dass man sich auf die Logik des Programms konzentrieren kann. Der Block-Editor kennt die Programmier-Anweisungen, welche den Blöcken zugeordnet sind und sorgt dafür, dass das auszuführende Programm fehlerfrei getippt wird. Wenn man die Grundlagen der Programmierung gelernt und geübt hat, kann man den Block-Editor durch einen Text-Editor ersetzen und selbst ein Programm tippen.

Aber nicht nur für Programmieranfänger*innen wird die Block-Programmierung entwickelt. Zum Beispiel sind im Bereich der Spieleprogrammierung viele kreative Köpfe mit der Entwicklung von Spielen beschäftigt, die mehr Interesse an einem tollen Spiel als an den Untiefen der Programmierung haben. Für diese kreativen Köpfe wird von Anbietern großer Game-Engines zunehmend auch die Block-Programmierung angeboten:

• Manche Programmieraufgaben können z.B. in der "Unreal-Engine" mit Hilfe von sogenannten "Blueprints" erfolgreich umgesetzt werden: Blockprogrammierung mit der Unreal-Engine
• Auch in der Unity-Engine können Videospiele mit Hilfe der Block-Programmierung erstellt werden: Blockprogrammierung mit der Unity-Engine

Es gibt sehr viele verschiedene Programmiersprachen. In diesem Kurs verwenden wir die Programmiersprache JavaScript, die für den Einsatz in einem Web-Browser wie Firefox, Edge oder Chrome entwickelt wurde. Der große Vorteil von JavaScript ist, dass man die Programme überall dort, wo ein Web-Browser verfügbar ist, nutzen kann.

Programmieren lernen und insbesondere grafische Programmierung lernen ist nicht einfach. Es gibt Sammlungen von Anweisungen (Programmier-Bibliotheken), welche den Einstieg in das Programmieren deutlich erleichtern können. In diesem Kurs verwenden wir die Bibliothek p5.js, die das grafische Programmieren deutlich erleichtert.

In diesem Kurs verwenden wir folgende Editoren:

• Den Block-Editor p5.js-Blockly-Editor, den Sie im ersten Thema bereits kennengelernt haben und der speziell für den Einsatz an unserer Schule entwickelt wurde:

• Den Text-Editor p5.js-Flems-Editor, ein Text-Editor welcher den Programm-Code des p5.js-Blockly-Editors automatisiert darstellen kann und der speziell für den Einsatz an unserer Schule entwickelt wurde:

• Den Text-Editor p5.js Web Editor, der von den Machern der Bibliothek p5.js entwickelt wurde. Der p5.js Web Editor ist ein Cloud-Text-Editor, mit der Möglichkeit den eigenen Code in dessen Cloud zu speichern. Damit Sie dort ihren Code speichern können, müssten Sie ein kostenloses Konto anlegen.

• Den Trace-Editor Blockly-Trace-Editor, ein Blockly-Editor zum Erstellen von Trace-Tabellen, der speziell für den Einsatz an unserer Schule entwickelt wurde:

Im p5.js-Blockly-Editor kann aus den Blöcken automatisch JavaScript-Code erzeugt werden. Dieser JavaScript-Code kann automatisch an den p5.js-Flems-Editor übertragen und dort im Text-Modus ausgeführt und bearbeitet werden. Damit können Sie selbst entscheiden, wann Sie mit Blöcken oder mit getipptem Code programmieren wollen. Mit beiden Editoren können Sie die erstellten Programme auf Ihrem Computer speichern und von dort wieder laden.

• Öffnen Sie den p5.js-Blockly-Editor in einem neuen Fenster.
• Stellen Sie folgendes Programm zusammen, indem Sie die entsprechenden Blöcke aus den Kategorien "Aussehen" und "Grundformen" in den Editor ziehen.

• Ändern Sie die Farben der Objekte, indem Sie z.B. auf das Farbfeld hinter "Füllfarbe:" klicken und eine neue Farbe auswählen.
• Klicken Sie auf die Schaltfläche "Code ausführen" und Sie sollten sehen, dass sich die Farben der Objekte geändert haben.

• Klicken Sie oben in der Mitte auf die Schaltfläche "JavaScript-Code". Aus den von Ihnen zusammengestellten Blöcken wird JavaScript-Code erzeugt und Ihnen angezeigt. Diesen Code könnten Sie z.B. im p5.js Web Editor bearbeiten und ausführen.

• Um den generierten JavaScript-Code mit dem p5.js-Flems-Editor zu bearbeiten und auszuführen, klicken Sie oben auf die Schaltfläche "Text-Editor".

Es öffnet sich der p5.js-Flems-Editor in einem neuen Fenster. Im Text-Editor können Sie den JavaScript-Code bearbeiten. Das veränderte Programm wird automatisch neu ausgeführt.

Die letzte Zeile new p5(); wird dem Programm automatisch hinzugefügt. Lassen Sie diese Zeile bitte unverändert, damit das Programm ausgeführt werden kann.

• Wenn Sie einige Änderungen im p5.js-Blockly-Editor vorgenommen haben, können Sie das Programm speichern, indem Sie unten links auf die Schaltfläche "Speichern" klicken. Sie können den Dateinamen jederzeit ändern.
• Wenn Sie auf die Schaltfläche "Laden" klicken, können Sie ein zuvor gespeichertes Programm wieder laden.
• Wenn Sie oben rechts auf das Symbol "Fragezeichen" klicken, finden Sie Anleitungen zur Bedienung und Programierung des p5.js-Blockly-Editors.

Im p5.js-Flems-Editor können Sie auch Programme speichern und wieder laden und Sie finden hinter dem Fragezeichen-Symbol einige Anleitungen.

Hinweis: Block-Programme können nur im Blockly-Editor geladen werden (Endung ".p5xml"), Text-Programme können nur im Text-Editor geladen werden (Endung ".p5txt").

• Erstellen Sie im p5.js-Blockly-Editor ein kleines Programm, indem Sie z.B. einen Kreis mit Rand in die Zeichenfläche setzen.

• Speichern Sie das Programm unter einem geeigneten Dateinamen.

• Setzen Sie den Block-Editor zurück und laden Sie erfolgreich das Programm.

• Übertragen Sie den von Ihnen erzeugten Programmcode in den p5.js-Flems-Editor und führen Sie dort das Programm aus.

• Speichern Sie im Text-Editor das Programm und laden Sie es wieder.

• Kopieren Sie aus dem Block-Editor den generierten JavaScript-Code in den p5.js Web Editor und führen Sie das Programm aus, indem Sie oben links auf die "Play"-Schaltfläche klicken. (Hinweis: Entfernen Sie im p5.js Web Editor die letzte Zeile: new p5(); vor der Ausführung).