Objekte und Klassen


Mit Hilfe von Variablen wird der Programmablauf gesteuert und die Eigenschaften von "Objekten", die auf dem Bildschirm ausgegeben werden, festgelegt. Diese Eigenschaften können mit Hilfe von Funktionen verändert werden. Ein solches Objekt kann ein Text sein oder eine Klickfläche (Button), genauso wie ein Bild oder einfach alles, was der Computer ausgeben kann (auf dem Bildschirm, mit dem Drucker, über Lautsprecher, über das Internet,...).

Solche Objekte können viele verschiedene Eigenschaften haben. Daher bietet JavaScript die Möglichkeit ein JavaScript-Objekt festzulegen, in dem unter einem Namen alle diese unterschiedlichen Eigenschaften in Form von Variablen und Funktionen gespeichert werden können. Der Vorteil eines solchen Ansatzes ist, dass Sie beim Aufruf einer Eigenschaft oder einer Funktion genau wissen, zu welchem Objekt diese gehören, da man bei der Verwendung einer Variable oder einer Funktion zuerst den Namen des Objekts nennen muss, zu dem die Variable oder die Funktion gehört.

Beispiel

Im folgenden Beispiel werden die Eigenschaften eines Kreises in einem Objekt obj_kreis festgelegt. Verändern Sie die Eigenschaften und beobachten Sie dann die Auswirkung den Kreis.


Beispiel

Hat man jetzt zwei Objekte mit gleichen Variablen, kann man diese klar voneinander trennen, da die Variablen nur dann verwendet werden können, wenn man den Objektnamen davorsetzt.

Anmerkung

Auf die Eigenschaften kann man auch mit einer anderen Schreibweise zugreifen: Anstelle von obj_kreis.linienfarbe schreibt man obj_kreis['linienfarbe'].


Methoden

Neben den Eigenschaften kann man in einem Objekt auch Funktionen speichern, welche dieses Objekt verändern. Eine Funktion, die in einem Objekt gespeichert wird, nennt man Methode.

Beispiel

Zusätzlich zu den Eigenschaften wird jetzt ein Methode obj_kreis.verschieben(x_richtung, y_richtung) festgelegt, welche den Kreis um die angegebenen Werte in x- bzw. y-Richtung verschiebt.


Klassen

Wenn ein Objekt mehrmals mit verschiedenen Eigenschaftswerten genutzt werden soll (wenn zum Beispiel viele gleichartige Kreise auf dem Bildschirm herumfliegen sollen), dann kann man dazu eine Objekt-Schablone = Klasse erstellen. Mit Hilfe dieser Objekt-Schablone kann man dann neue Objekte erzeugen.

Beispiel

Wir legen jetzt eine Klasse = Objekt-Schablone für die Kreise fest:

  class kreis_schablone {
    constructor(fuellfarbe, linienfarbe, dicke, durchmesser, xkoord, ykoord) { 
      //Attribute und Methoden
    }
  }

Nachdem diese festgelegt ist, können Sie leicht neue Kreise mit einer einzigen Zeile anlegen:

let kreis01 = new kreis_schablone('skyblue', 'seagreen', 5, 80, 50, 50);

Der Objekt-Schablone werde beim Aufruf mit dem Schlüsselwort new gewünschte Eigenschaften als Übergabeparameter übergeben. Die Funktion new macht zusammen mit der Objekt-Schablone daraus ein neues Kreisobjekt, dessen Eigenschaften im Arbeitsspeicher unter dem Namen kreis01 gespeichert werden.

Ein Kreis wird gezeichnet, indem man die Objekt-Methode kreis01.zeichnen(); aufruft. Verschieben kann man einen Kreis mit der Objekt-Methode kreis01.verschieben(1, 2);.

Anmerkung:

Auf diese Weise bleibt die Hauptprogramm-Funktion function draw() übersichtlich.


Aufgabe:

Erstellen Sie eine Objektschablone für ein Strichpersönchen.

Entwickeln Sie eine Methode, so dass ein Strichpersönchen winken kann.

Schreiben Sie auf der Basis der Objektschablone ein Programm, mit der ein Gruppe Strichpersönchen auf dem Bildschirm ausgegeben werden kann, die Ihnen zuwinken.


Lösungen von Schülerinnen und Schülern

Finn, Leon, 12


Chris, 12

Keine Strichpersönchen, aber eine Lösung mit Klassen und Objekten.