12.5.1 Was ist OOP?

1.1 Programmier-Paradigmen

In diesem Kapitel sollen drei Punkte auf die Zeichenebene gezeichnet werden. Anhand dieses Beispiels soll der Unterschied zwischen folgenden Programmieransätzen aufgezeigt werden:

Sequenzielle Programmierung
Prozedurale Programmierung
Objekt-Orientierte-Programmierung (OOP)

1.2 Sequenzielle Programmierung

Bei der sequenziellen Programmierung wird ein Computerprogramm Anweisung für Anweisung der Reihe nach abgearbeitet. Wenn drei Punkte gezeichnet werden sollen, bedeutet das, dass für jeden Punkt alle notwendigen Anweisungen hintereinander aufgeschrieben werden.

Quellcode
Hinweise

In einem neuen Fenster starten: Sequenzielle Programmierung

Um das Programm auszuführen, klicken Sie auf den Tab "p5.js Web Editor" und starten Sie das Programm durch einen Klick auf das Pfeilsymbol.

Die Anweisung

strokeWeight(5);

legt fest, dass der Punkt einen Durchmesser von 5 Pixeln haben soll.

Die Anweisung

stroke("red");

legt fest, dass der Punkt mit der Farbe "red" = "rot" gezeichnet werden soll.

Die Anweisung

point(30, 30);

legt fest, dass der Punkt an der Koordinate x = 30 und y = 30 gezeichnet werden soll, wobei der Ursprung oben links liegt und x nach rechts größer wird und y nach unten größer wird.

1.3 Prozedurale Programmierung

Bei der prozeduralen Programmierung werden Anweisungen, die sich wiederholen, in eine Prozedur/Unterprogramm/Funktion geschrieben. Notwendige Daten werden als Übergabeparameter der Funktion mitgeteilt.

Für unser Beispiel bedeutet das, dass eine Funktion "zeichnePunkte(Parameter,...)" festgelegt wird, die jedesmal aufgerufen wird, wenn ein Punkt gezeichnet werden soll.

Quellcode
Hinweise

In einem neuen Fenster starten: Prozedurale Programmierung

Um das Programm auszuführen, klicken Sie auf den Tab "p5.js Web Editor" und starten Sie das Programm durch einen Klick auf das Pfeilsymbol.

Die Anweisung

function zeichnePunkt(xkoord, ykoord, durchmesser, farbe) {

legt ein Funktion fest, die aufgerufen werden kann. Wenn man die Funktion aufruft, kann man in die Klammer die Werte eintragen, die von der Funktion verarbeitet werden sollen.

Beispielsweise übergibt die Anweisung

zeichnePunkt(30, 30, 5, "red");

der Funktion "zeichnePunkt" die Werte: xkoord = 30, ykoord = 30, durchmesser = 5, farbe = "red", so dass die Funktion dann die Punkte mit den gewünschten Parametern zeichnen kann.

1.4 Objektorientierte Programmierung

Bei der objektorientierten Programmierung (OOP) werden die Eigenschaften (Attribute) und die Operationen (Funktionen) in einer Struktur kombiniert. Dadurch wird der Quellcode übersichtlicher organisiert. Für unser Beispiel bedeutet das, dass alles, was man benötigt, um das Objekt "Punkt" auf dem Bildschirm darzustellen, in eine gemeinsame Programmierstruktur schreibt.

Das Objekt "Punkt", der auf dem Bildschirm zu sehen ist, wird im Quellcode als ein "Programmier-Objekt" angelegt. Bevor ein Programmier-Objekt erzeugt werden kann, muss eine "Objekt-Schablone" aufgeschrieben werden, bei der festgelegt wird:

welche Eigenschaften ein Objekt haben soll und
mit welchen Operationen ein Objekt verändert werden kann.

In der objektorientierten Programmierung nennt man eine Objekt-Schablone auch eine Klasse. Deswegen benutzt man in Javascript das Schlüsselwort "class" um eine Objekt-Schablone anzulegen.

Eine Klasse bzw. Objekt-Schablone wird in Javascript wie folgt angelegt:

class klassenName {
  constructor(attribut1, attribut2, ... {
    this.attribut1 = attribut1;
    this.attribut2 = attribut2;
  }
  operation1() {
    anweisungen...
  }   
}

Das Schlüsselwort "this" ist notwendig, da man erst einmal eine Schablone für ein Objekt anlegt. Erst wenn man tatsächlich ein neues Objekt anlegt, bekommt dieses seine eigenen Attribute (Variablen). Ein neues Objekt wird auf der Grundlage einer Objekt-Schablone mit Hilfe des Schlüsselworts "new" angelegt:

let objekt1 = new klassenName(wert1, wert2,...);

Im Programmablauf kann ein Attribut eines Objekts geändert werden, indem man den Objektnamen gefolgt von einem Punkt und dem Attributnamen aufruft:

objekt1.attribut1 = 20;

Eine Objekt-Operation kann aufgerufen werden, indem man den Objektnamen gefolgt von einem Punkt und dem Operationsnamen aufruft:

objekt1.operation1();

Die drei verschieden großen und verschieden farbigen Punkte können wie folgt mit objektorientierter Programmierung auf dem Bildschirm angezeigt werden:

Quellcode
Hinweise

In einem neuen Fenster starten: Objektorientierte Programmierung

Die Klasse "punktKlasse" wird als Objektschablone festgelegt.

class punktKlasse {
  constructor(xkoord, ykoord, durchmesser, farbe) {
    this.xkoord = xkoord;
    this.ykoord = ykoord;
    this.durchmesser = durchmesser;
    this.farbe = farbe;
  }
  zeichnen() {
    strokeWeight(this.durchmesser);
    stroke(this.farbe);
    point(this.xkoord, this.ykoord);
  }   
}

Die Operation "constructor" muss immer festgelegt werden, denn diese Operation wird aufgerufen, wenn man mit "new" ein Objekt auf der Grundlage einer Objektschablone anlegt. In das Argument von "constructor" kommen die Parameter, welche beim Anlegen eines neuen Objekts übergeben werden sollen. Die übergebenen Parameter werden mit dem Syntax "this.parameter1 = parameter1" der Objektschablone zugeordnet:

constructor(xkoord, ykoord, durchmesser, farbe) {
  this.xkoord = xkoord;
  this.ykoord = ykoord;
  this.durchmesser = durchmesser;
  this.farbe = farbe;
}

In die Objektschablone können Operationen eingetragen werden, die später aufgerufen werden können, um das Verhalten des Objekts festzulegen. In einer Operation muss ein Parameter mit der Syntax "this.parameter1" angegeben werden.

zeichnen() {
  strokeWeight(this.durchmesser);
  stroke(this.farbe);
  point(this.xkoord, this.ykoord);
}

Ein Objekt wird mit folgender Syntax angelegt. Dabei werden die Eigenschaften, die das Objekt (also hier der Punkt) haben soll, als Parameter übergeben:

let punkt01 = new punktKlasse(30, 30, 5, "red");

Sobald ein Objekt angelegt wurde, können Objektoperationen aufgerufen werden, um den Zustand des Objekts zu ändern. Ein Punkt wird z.B. durch das Aufrufen der Operation "zeichnen()" in die Zeichenebene gemalt:

punkt01.zeichnen();

1.5 Übung: Punkt verschieben

Erweitern Sie die Objektschablone für einen Punkt so, dass punkt01 auf die neuen Koordinanten x = 100, y = 120 verschoben werden kann. Da wir nachträglich beim Programmablauf etwas ändern wollen, muss die function draw() in den Programmablauf eingefügt werden.

In einem neuen Fenster starten: Objektorientierte Programmierung