-
Notifications
You must be signed in to change notification settings - Fork 24
L01_Zufallsgedicht
- Schreibe ein kleines Programm, welches ein zufällig kreiertes Gedicht von wenigstens fünf Zeilen in der Browserkonsole ausgibt. Die einzelnen Sätze sind primitiv und werden nur aus Subjekt, Prädikat und Objekt gebildet. Beispiel: „Snape braut Zaubertränke“. Die Worte hierfür sollen zu Programmbeginn als literale Initialisierung in drei Arrays definiert sein. Im Gedicht sollen alle Worte verwendet werden, aber keines mehrfach. Bei jedem Programmlauf sollen die Worte zufällig kombiniert werden, so dass die Wahrscheinlichkeit für zwei aufeinanderfolgende identische Gedichte gering ist. Die Zeilen können sich reimen, müssen aber nicht.
- Erstelle eine Tracetable zum Programm und verfolge dabei wenigstens die Erstellung der ersten beiden Zeilen des Gedichtes.
- Dokumentiere das Programm. Konstruiere hierfür ein ausführliches Aktivitätsdiagramm für den Programmablauf.
Es geht bei dieser Aufgabe darum, Fingerfertigkeit beim Schreiben von Code zu erlangen, bekannte Strukturen zu wiederholen und den technischen Aufbau zu üben. Deswegen ist ein Algorithmus und die einzelnen Schritte zum Lösen der Aufgabe vorgegeben. Das ist der Grund für die große Länge dieser Seite, es wird eine Lösung und Anleitung präsentiert. Die eigentliche Aufgabe eigentliche dagegen ist nur der erste kleine Absatz oben. Bei späteren Aufgaben sollst Du natürlich vordringlich selbst die Lösung entwickeln. Bedenke, dass es neben diesem Algorithmus, der zur Übung erdacht wurde, zur Lösung der Aufgabe noch viele weitere gibt, auch bessere.
- Öffne dein EIA2-Ordner in VSCode und führe zuerst eine Pull-Aktion oder Sync-Aktion durch, um den letzten Stand deines Repositories auf deinen lokalen Rechner zu holen. Das solltest Du immer machen, wenn Du dich an die Arbeit machst, vielleicht hattest Du zwischenzeitlich eine Änderung mit Hilfe des Web-Interfaces von Github durchgeführt, die noch nicht bei dir lokal angekommen ist. Wenn Du später in einem Team arbeitest, werden andere das Remote-Repository verändert haben.
- Lege in deinem EIA2-Repository einen Ordner für diese Aufgabe an und vergib einen sinnvollen Namen, z.B. A01_RandomPoem
- Erstelle eine HTML-Datei, ebenfalls mit sinnvollem Namen. Nutze Pascal-Case (siehe Booklet) und natürlich die Endung ".html"
- Fülle sie mit Inhalt, indem Du einfach ein Ausrufezeichen tippst und Enter drückst. VSCode sollte das als Anweisung erkennen, dir ein Muster zu bauen
- Ändere den Text im
<title>, damit der Browsertab später einen sinnvollen Inhalt anzeigt. - Füge einen kleinen Text auf der Seite ein, der den Betrachter darauf hinweist die Browserkonsole zu öffnen und wie das zu tun ist (z.B. per F12)
- Lege eine TypeScript-Datei mit sinnvollem Namen und natürlich der Dateiendung ".ts" an.
- Schreibe zum Testen eine Anweisung für die Ausgabe eines beliebigen Textes (z.B. "Expecto Patronum") in die TypeScript-Datei
- Starte den Compiler, am besten im Watch-Mode
- Prüfe, ob neben deiner TypeScript-Datei nun auch eine JavaScript-Datei (.js) und ein Map-File (.js.map) entstanden ist
- Verlinke die JavaScript-Datei im
<head>deiner HTML-Datei - Starte die HTML-Datei im Browser und prüfe, ob der Hinweistext auf der Seite und die Ausgabe in der Konsole erscheinen
- Passt alles, ist die Grundstruktur angelegt und funktioniert und Du musst nur noch an der TypeScript-Datei arbeiten.
- Lösche die Ausgabeanweisung und lege stattdessen einen
namespacemit sinnvollem Namen (siehe Coding-Style) an - Lege drei Arrays gleicher Länge mit literalen Zeichenketten an für
- Subjekte (z.B. Harry, Hermine, Ron, Hagrid, Snape, Dumbledore)
- Prädikate (z.B. braut, liebt, studiert, hasst, zaubert, zerstört)
- Objekte (z.B. Zaubertränke, den Grimm, Lupin, Hogwarts, die Karte des Rumtreibers, Dementoren)
und weise sie entsprechend sinnvoll benamten Variablen zu.
- Lasse dir die Arrays in der Browserkonsole zur Prüfung ausgeben
- Erstelle eine for-Schleife, welche eine Laufvariable rückwärts zählen lässt, ausgehend von der Länge der Arrays. Beim letzten Schleifendurchlauf soll diese Variable den Wert 1 aufweisen.
- Lasse darin den Wert der Laufvariablen auf der Konsole ausgeben und prüfe, ob die Ausgabe deinen Erwartungen entspricht und korrigiere, falls erforderlich
- Erstelle, außerhalb der Schleife, eine Funktion namens
getVerse, in deren Signatur festgelegt ist, dass sie drei Werte vom Typ string[] entgegen nimmt und einen Wert vom Typ string zurückliefert. Wähle die Namen der drei formalen Parameter analog zu deinen Array-Variablen, aber entsprechend des Styleguides mit Unterstrich als Präfix - Lasse die Funktion eine literale Zeichenkette zurückliefern, z.B. "Alohomora"
- Lasse innerhalb der Schleife deine Funktion mit drei leeren Arrays
[]aufrufen und weise den zurückerhaltenen Wert eine Variable von passendem Typ zu - Lasse den Wert auf der Konsole ausgeben
- Mit den hier beispielhaft eingesetzten Werten sollte die Ausgabe etwa so aussehen:
(6) ["Harry", "Hermine", "Ron", "Hagrid", "Snape", "Dumbledore"]
(6) ["braut", "liebt", "studiert", "hasst", "zaubert", "zerstört"]
(6) ["Zaubertränke", "den Grimm", "Lupin", "Hogwarts", "die Karte des Rumtreibers", "Dementoren"]
6
Alohomora
5
Alohomora
4
Alohomora
3
Alohomora
2
Alohomora
1
Alohomora
Strukturell arbeitet dein Programm bereits, inhaltlich tut es aber noch nichts sinnvolles. Die Arrays mit den vorgegebenen Worten werden noch gar nicht verwendet und deine Funktion getVerse, die einzelne Verse ausspucken soll, liefert immer den gleichen Wert. Das soll sich jetzt ändern. Ab hier musst Du allerdings auch ein wenig selbst recherchieren und mit überlegen, die Schritte sind nicht mehr in allen Details ausgeführt.
- Füttere die Funktion nun mit deinen Arrays, nicht mit den leeren
- Achte darauf, dass innerhalb der Funktion mit den Parametern gearbeitet wird, nicht mit den Variablen, die außerhalb deklariert wurden!
- Setze Kommentarmarker
//vor alle Konsolenausgaben, damit die Konsole wieder überschaubar wird (Shortcut Strg + #) - Erweitere den Funktionskörper. Darin...
- Lege eine Variable vom Typ
string, die einen Vers aufnehmen soll und initialisiere sie mit einem leeren String"" - Lasse mit der Anweisung
Math.random()eine Zufallszahl erzeugen und multipliziere sie mit der Länge des übergebenen Subject-Arrays - Schneide mit der Anweisung
Math.floor(...)die Nachkommastellen dieser Zufallszahl ab - Weise das Ergebnis einer Variablen vom Typ
numberzu - Lasse dir das Ergebnis auf der Konsole ausgeben. Du solltest eine Folge von zufälligen Zahlen im Bereich von 0 bis zur Anzahl der Worte in einem Array weniger 1 sehen.
- Schneide mit
splice(...)ein Wort aus dem übergebenen Array von Subjekten an der Stelle der Zufallszahl heraus und addiere es zur deiner Vers-Variablen. Achte darauf, dassplicedir immer ein Array mit den ausgeschnittenen Elementen liefert, Du musst also davon das 0-te nehmen. - Addiere noch ein Leerzeichen dazu
- Wiederhole die Zufallszahlerzeugung und die Schritte danach auch für die Verben und Objekte
- Lasse deine Vers-Variable von der Funktion zurück geben, nicht mehr einen literalen Wert
- Deaktiviere die Ausgabe der Zufallszahl in der Funktion
- Lege eine Variable vom Typ
- Aktiviere wieder die Ausgabe des Funktionsergebnisses in der Schleife
Im unwahrscheinlichen Fall, dass alles optimal verlaufen ist, erhältst Du nun Ausgaben analog zu dieser, aber immer unterschiedliche
Snape liebt Lupin
Harry zaubert Dementoren
Dumbledore zerstört Zaubertränke
Hagrid braut Hogwarts
Ron hasst die Karte des Rumtreibers
Hermine studiert den Grimm
Synchronisiere dein lokales Repository mit Github, prüfe die Veröffentlichung auf Github-Pages und poste den Link in deinen Steckbrief. Achte auf das target-Attribut des Links, damit sich dein Programm in einem eigenen Tab öffnet.
Wahrscheinlich aber ist irgendwo etwas schief gelaufen... macht nichts. Jetzt sollst Du ohnehin die Tracetable zeichnen, dabei findest Du sicher den Fehler. Nutze den Debugger, um die Werte tatsächlich zu verfolgen, der kann das richtig gut. Außerdem musst Du üben, den Debugger zu nutzen, er ist dein wichtigster Helfer.
Falls dein Programm weiterhin fehlerhaft sein sollte, zeig es deinem Betreueri deinen Code und tüftelt gemeinsam!
Poste auch die Tracetable als PDF-Datei zusammen mit deiner Lösung und verlinke sie im Steckbrief.
Bei der Erstellung der Tracetable solltest Du den Algorithmus nun gut durchdrungen haben. Bringe ihn jetzt in die Form eines Aktivitätsdiagrammes. Nutze dafür das EIA2-Booklet und orientiere dich am Beispiel aus der ersten Lektion.
Beachte, dass hier nachträglich dokumentiert wird. In Zukunft musst Du aber mit der Diagrammarbeit beginnen und erst danach mit der Implementation. Dann hast Du bereits einen Algorithmus angedacht, der noch implementiert werden muss und das Diagramm dient hinterher, entsprechend korrigiert, immer noch als Dokumentation.
Poste auch das Aktivitätsdiagramm als PDF-Datei und verlinke es im Steckbrief.
Nach der Bearbeitung dieser Aufgabe und der Beschreitung des vorgegebenen Lösungsweges sollte dir klar sein
- wie Du in Zukunft weitere Unterprojekte zu den folgenden Aufgaben in deinem Repository aufsetzt
- wie Du Variablen unterschiedlichen Typs deklarierst und definierst
- was eine Schleife macht und wie Du sie implementieren kannst
- wie Du eine Funktion mit formalen Parametern und Rückgabewert definierst
- was bei der Übergabe von Werten komplexen Typs an eine Funktion passiert (Value vs. Reference)
- wie Du Zufallszahlen erzeugen und nutzen kannst
- wie Du Element aus einem Array an einer beliebigen Stelle herausschneidest
- wie Du mit dem Debugger arbeitest
- wie ein Aktivitätsdiagramm aufgebaut ist und welche Bedeutung die grundlegendsten grafischen Elemente haben
Sollte davon etwas noch unklar sein: bitte hake unbedingt bei deinem Betreueri nach!
L00_Preparation
L01_Zufallsgedicht
Übung: L01_Boxes
L02_EventInspector
L03_Aufgabenliste_Formular
L04_Aufgabenliste_Datenstruktur
L05_Client
L06_DatabaseServer
L08.1_GenerativeKunst
L08.2_Vogelhaus: Canvas
L09.1_OldMacDonaldsFarm
L09.2_Vogelhaus: Classes
L10.1_OldMacDonaldsHeritage
L10.2_Vogelhaus: Polymorphie
Abschlussarbeit: Feuerwerk!