Objektorientierte Programmierung

Aufgabe 1: Gesellschaftsspiel

Die Teilnehmer einer Party spielen zur Unterhaltung das Spiel "Stille Post". Bei diesem Spiel geht es darum, eine Mitteilung von Person zu Person weiterzugeben.

Erstellen Sie im Sinne der Folie "Eigenschaften mittels Methode initialisieren" mit Hilfe von Object.create Objektliterale für vier verschiedene Partygäste.

Partygäste besitzen die folgenden Eigenschaften, die in getrennten Objektvariablen gespeichert werden: Vorname, Nachname, Wohnort und Alter.
Diese Eigenschaften können mit der entsprechend parametrierten Methode init(vorname, nachname, wohnort, alter) zugewiesen werden.
Mit einer Methode vorstellen können sich Partygäste anderen Gästen vorstellen. Sie geben dabei, gemäß der Beispielausgabe unten, in der sich die Gäste 1-4 nacheinander vorstellen, ihre persönlichen Daten als Zeichenkette ihrer Eigenschaften mit return zurück.
Mit einer Methode hören(meldung) können sie Zeichenketten entgegennehmen, die ihnen gesagt werden. Sie speichern diese Zeichenkette intern in einer Objektvariablen meldung.
Mit einer Methode sagen() geben sie die in der Variablen meldung gespeicherte Zeichenkette mit return aus.

Schreiben Sie ein Hauptprogramm, in dem die vier Partygäste sich zunächst - wie in der Beispielausgabe unten - durch Ausgabe in das Browserfenster vorstellen.

Danach wird die Mitteilung "Um Ulm herum" vom Hauptprogramm an Person 1 übermittelt und von Person 1 über Person 2 und 3 an Person 4 weitergeben. Schließlich sagt Person 4 die Meldung. Diese wird in das Browserfenster ausgegeben.

Beispielausgabe:

Ich heiße Anton Ackermann, bin 20 Jahre alt und wohne in Altenstadt
Ich heiße Brigitte Beckmann, bin 21 Jahre alt und wohne in Bernstadt
Ich heiße Daniela Dannenmann, bin 22 Jahre alt und wohne in Dornstadt
Ich heiße Hartmut Hartmann, bin 23 Jahre alt und wohne in Heroldstatt
Hartmut Hartmann sagt: Um Ulm herum

Aufgabe 2: Gesellschaftsspiel mit Konstruktorfunktion

In Aufgabe 1 wurden die Partygäste mit Object.create als Duplikate eines prototypischen Partygastes erzeugt.

Sobald eine Reihe modifizierter Kopien eines bestimmten Prototyps benötigt wird, ist es effizienter, diese mit Hilfe einer Konstruktorfunktion zu erzeugen.

Schreiben Sie darum eine Variante der Aufgabe 1, bei der die Partygäste nicht mehr mit Object.create, sondern mit Hilfe der Konstruktorfunktion
function Partygast(vorname, nachname, wohnort, alter) erzeugt werden. Bis auf die Methode init, deren Aufgabe nun von der Konstruktorfunktion übernommen wird und die deswegen nicht mehr benötigt wird, bleiben die Eigenschaften der Gäste die gleichen. Ebenso die im Hauptprogramm mit den Gästeobjekten stattfindenden Aktionen.

Die Beispielausgabe entspricht der von Aufgabe 1.

Aufgabe 3: Gesellschaftsspiel mit Klasse

Schreiben Sie eine weitere Variante, bei der die Partygäste nicht mehr mit einer Konstruktorfunktion, sondern auf der Grundlage einer ECMAScript-2015-Klasse mit dem Namen Partygastklasse erzeugt werden.

Die Eigenschaften der Gäste und die im Hauptprogramm stattfindenden Aktionen bleiben ansonsten gegenüber der vorherigen Aufgabe unverändert.

Die Beispielausgabe entspricht erneut der von Aufgabe 1.

Aufgabe 4: Zirkus

Im Zirkus sind der Clown Beppo und der Elefant Dumbo eine große Attraktion. Immer, wenn Beppo Dumbo einen Korb mit Objekten überreicht, nimmt Dumbo die Objekte eines nach dem anderen mit dem Rüssel aus dem Korb, untersucht diese und behandelt sie nach der folgenden Art: Früchte isst Dumbo. Kleidungsstücke gibt er Beppo. Alles andere wirft er in das daraufhin jubelnde Publikum.

Implementieren Sie folgendes:

Ein Objektliteral korb - d. h. keine Klasse - das folgende Dinge jeweils als Zeichenkette enthält: Apfelsine, Hut, Apfel, Blumenstrauß, Handschuhe, Bonbons. Methoden besitzt das Korbliteral nicht.
```
var korb = {
  objekt1:"Apfelsine",
  objekt2:"Hut",
  // usw.
}
```
Ein Objektliteral publikum. Dieses Literal besitzt nur eine Methode fangen(objekt){...}. Die Methode gibt das gefangene Objekt sowie die Reaktion des Publikums darauf in das Browserfenster aus. Siehe hierzu die unten angegebene Programmausgabe.
Ein Objektliteral clown. Neben einem Namen besitzt der Clown ebenfalls eine Methode fangen(objekt){...}. Die Methode fangen gibt den Namen des Clowns und eine Information zum gefangenen Objekt und der zugehörenden Aktion des Clowns in das Browserfenster aus.

Daneben besitzt der Clown die Methode geben(elefant, korb){...}. Die Methode geben dient dazu, einem Elefanten einen Korb zu geben. Zusätzlich wird die durchgeführte Handlung in das Browserfenster ausgegeben.
Ein Objektliteral elefant. Der Elefant verfügt über einen Namen sowie über die Methode nehmen(korb){...}. In dieser Methode leert der Elefant mit Hilfe einer Schleife den Korb und behandelt die gefundenen Objekte wie oben beschrieben. Hierzu prüft er die im Korb enthaltenen Zeichenketten dahingehend, ob sie eines der unter 1. beschriebenen Dinge darstellen. Zeichenketten können unter JavaScript einfach mit Hilfe von == bzw. === verglichen werden. D. h., hierfür ist keine spezielle Funktion oder Methode erforderlich. Auch der Elefant kommentiert seine jeweiligen Handlungen, gemäß der unten angegebenen Programmausgabe, wieder durch Ausgaben in das Browserfenster.
Schließlich ein kurzes Hauptprogramm, in dem der Clown Beppo dem Elefanten Dumbo den oben definierten Korb gibt.

Ausgabe des Programms:

Beppo: Reiche Dumbo Korb
Dumbo: Erhalte Korb
Dumbo: Nehme Apfelsine aus dem Korb
Dumbo: Esse Apfelsine
Dumbo: Nehme Hut aus dem Korb
Dumbo: Werfe Hut zum Clown
Beppo: Fange Hut und ziehe das Kleidungsstück an
Dumbo: Nehme Apfel aus dem Korb
Dumbo: Esse Apfel
Dumbo: Nehme Blumenstrauß aus dem Korb
Dumbo: Werfe Blumenstrauß ins Publikum
Publikum: Fangen Blumenstrauß und jubeln!
Dumbo: Nehme Handschuhe aus dem Korb
Dumbo: Werfe Handschuhe zum Clown
Beppo: Fange Handschuhe und ziehe das Kleidungsstück an
Dumbo: Nehme Bonbons aus dem Korb
Dumbo: Werfe Bonbons ins Publikum
Publikum: Fangen Bonbons und jubeln!

Aufgabe 5: Ein einfaches Document Object Model erstellen

Webseiten bestehen aus einer Menge ineinander verschachtelter HTML-Elemente. Ihre Aufgabe besteht darin, eine Objektstruktur für eine HTML-Seite auf der Grundlage einer Komposition einiger vorgegebener HTML-Elemente zu erstellen. Die HTML-Elemente werden durch Objekte repräsentiert.

Die HTML-Seite besitze den folgenden Aufbau:

Jede HTML-Seite besteht aus einem Objekt der Art HTML.
Ein HTML-Objekt besteht aus genau einem Head-Objekt und genau einem Body-Objekt. Das HTML-Objekt verfügt über eine Methode toString(), mit der sie den Inhalt des Head- und des Body-Elements als Zeichenkette ausgeben kann. Dabei werden die Inhalte dieser beiden Elemente konkateniert.
Head-Objekte beinhalten genau ein Objekt der Art Title, welches bei ihrer Erzeugung mit erzeugt wird. Hierfür nimmt die zugehörende Konstruktorfunktion den Seitentitel als Konstruktorparameter entgegen, function Head(title), und reicht diesen Wert an das interne Title-Objekt weiter. Das Head-Objekt kann mit Hilfe einer Methode toString() den Inhalt des Title-Objekts als Zeichenkette ausgeben.
Title-Objekte nehmen bei ihrer Erzeugung den Titel der Seite als Konstruktorparameter entgegen, function Title(title), und können den Titel mit Hilfe einer Methode
toString() ausgeben, wobei sie den Titel um die entsprechenden Title-Tags ergänzen.
Objekte der Art Body sind in der Lage, mittels eines Felds und einer Methode
add(paragraph) beliebig viele Objekte der Art Paragraph aufzunehmen. Objekte der Art Body verfügen wieder über eine Methode toString(), mit der sie den Inhalt aller im internen Feld vorhandenen Paragraph-Elemente als Zeichenkette auf einmal ausgeben können.
Objekte der Art Paragraph dienen zur Speicherung von Absatztexten. Die Texte werden bei der Erzeugung der Objekte übergeben: function Paragraph(text). Die zugehörende Konstruktorfunktion verfügt wieder über die Methode toString(), mit der sie den Textinhalt des betreffenden Absatzes, ergänzt um Paragraph-Tags, als Zeichenkette ausgeben kann. Jedes Paragraph-Objekt nimmt nur den Text eines Absatzes auf.

Insgesamt ergibt sich damit die in Abb. 1 dargestellte Objektstruktur.

Abb.1: Komposition der Objekte für das Document Object Model

Erzeugen Sie die dazugehörenden Konstruktorfunktionen sowie ein Hauptprogramm, in dem zunächst ein HTML-Dokument mit Titel und zwei Paragraph-Elementen auf der Grundlage dieser Konstruktorfunktionen angelegt und nachfolgend dessen Inhalt in das Browserfenster ausgegeben wird.

Programmausgabe:

<title>Titel der Seite</title>

<p>Dies ist das erste Paragraph-Element</p>
<p>Dies ist das zweite Paragraph-Element</p>

Die HTML-Tags erscheinen dabei nicht im Browserfenster, sondern werden vom Browser interpretiert.

Hinweis: Die Methode toString gehört zu den so genannten magischen Methoden, die automatisch aufgerufen werden, sobald eine Zeichenkettendarstellung eines Objekts benötigt wird. Explizite Aufrufe dieser Methode sind deshalb in Ihrer Lösung z. T. nicht erforderlich.

Aufgabe 6: Roboter mit Prototypenkette

Schreiben Sie die unten angegebenen Konstruktorfunktionen für Roboter mit unterschiedlichen Fähigkeiten, um die Vererbung mittels einer Prototypenkette auszuprobieren. Nutzen Sie nicht die Klassensyntax.

Die function Roboter(name) für die Erzeugung von Robotern. Roboter besitzen einen Namen, der im Parameter name an die Funktion übergeben wird. Daneben können Roboter fahren. Zu diesem Zweck besitzen Sie eine Methode fahren, die diese Aktion durch eine Meldung in das Browserfenster simuliert. Siehe hierzu die Beispielausgaben unten.
Die function Saugroboter(name) für die Erzeugung von Saugrobotern. Saugroboter besitzen ebenfalls einen Namen, der im Parameter name an die Funktion übergeben wird. Daneben können Saugroboter Staub saugen. Zu diesem Zweck besitzen Sie eine Methode saugen, die diese Aktion durch eine Meldung in das Browserfenster simuliert.

Saugroboter werden auf der Grundlage eines Prototyps der Art Roboter mit dem Namen Robert erzeugt.

Saugroboter erben also die Eigenschaften von Robotern. Sie können deswegen nicht nur Staub saugen, sondern auch fahren.
Die function Wischroboter(name) für die Erzeugung von Wischrobotern. Wischroboter besitzen ebenfalls einen Namen, der im Parameter name an die Funktion übergeben wird. Daneben können Wischroboter Böden wischen. Zu diesem Zweck besitzen Sie eine Methode wischen, die diese Aktion durch eine Meldung in das Browserfenster simuliert.

Wischroboter werden auf der Grundlage eines Prototyps der Art Saugroboter mit dem Namen Sam erzeugt.

Wischroboter erben also die Eigenschaften von Saugrobotern. Sie können deshalb nicht nur wischen, sondern auch Staub saugen und fahren.

Schreiben Sie ein Hauptprogramm, in dem ein Wischroboter mit dem Namen Willy zusammen mit den hierfür erforderlichen Prototypen erzeugt wird. Rufen Sie danach für Willy nacheinander die Methoden fahren, saugen und wischen auf, sodass die folgende Ausgabe im Browserfenster erscheint:

Willy fährt
Willy saugt
Willy wischt

Löschen Sie danach in Ihrem Hauptprogramm mit der Anweisung

delete willy.name;

im Wischroboter Willy die Eigenschaft name (mit willy als dem Namen der Variable, in der das Wischroboterobjekt gespeichert ist) und rufen sie wieder die Methoden fahren, saugen und wischen von willy auf. Es sollte folgende Ausgabe im Browserfenster erscheinen:

Sam fährt
Sam saugt
Sam wischt

Bei der prototypischen Vererbung verdecken Eigenschaften gleichnamige Eigenschaften des Prototyps. Werden diese im erbenden Objekt gelöscht, so treten die ursprünglichen Eigenschaften des Prototyps - dies ist hier der Name des Saugroboters - wieder zu Tage.

Mit Hilfe der Methode Object.getPrototypeOf() ist es möglich, auf den Prototyp eines Objekts und so auf seine Eigenschaften zuzugreifen.

Ergänzen Sie Ihr Hauptprogramm um die folgenden Anweisungen:

var prototype=Object.getPrototypeOf(willy);
delete prototype.name;

Durch diese Anweisungen wird die Eigenschaft name im Prototyp des Wischroboters, also im Saugroboter gelöscht, sodass jetzt nur noch der Name des zugrundeliegenden Roboters Robert übrig ist. Rufen Sie nochmals die Methoden fahren, saugen und wischen für den Wischroboter willy auf. Es sollte nun folgende Ausgabe im Browserfenster erscheinen:

Robert fährt
Robert saugt
Robert wischt

In entsprechender Weise kann ein erbendes Objekt durch Aufruf von Object.getPrototypeOf() auf die Eigenschaften seines Prototyps zugreifen, um diese zu nutzen.

Aufgabe 7: Roboter mit Klassensyntax

Lösen Sie die vorige Aufgabe erneut. Dieses Mal mit der Klassensyntax aus ECMAScript 2015 und dem Schlüsselwort extends.
Bei der Lösung dieser Aufgabe ist zu beachten, dass bei der Klassensyntax kein Zugriff auf die Prototypenkette möglich ist. D. h., der Teil der Aufgabe oben ab

delete willy.name;

entfällt bei dieser Aufgabe.