Was ist OOP?


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)

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.

In einem neuen Fenster starten: Sequenzielle Programmierung


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.

In einem neuen Fenster starten: Prozedurale Programmierung


Objektorientierte Programmierung

Bei der objektorientierten Programmierung (OOP) werden die Eigenschaften (Attribute) und die Methoden (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 Methoden 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;
  }
  methode1() {
    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-Methode kann aufgerufen werden, indem man den Objektnamen gefolgt von einem Punkt und dem Methodenname aufruft:

objekt1.methode1();

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

In einem neuen Fenster starten: Objektorientierte Programmierung


Übungsaufgabe

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