Verarbeitung von Listen
Verarbeitung mehrerer Klartext-Wörter
Unser Programm soll dahingehend erweitert werden, dass es eine Liste von Klartexten verarbeiten kann. Im ersten Schritt wollen wir die Liste von Wörtern unverändert anzeigen. Das erreichen wir mit folgendem Ausdruck für eine feste Liste von Wörtern:
div [] [ text "HALLO", text "HUND", text "KATZE", text "MAUS", text "TIGER" ]
Für beliebige Listen von Klartextwörtern funktioniert das so natürlich nicht.
Wir benötigen eine Funktion, welche die text-Funktion auf jedes
Element einer Liste anwendet und uns eine neue Liste von Textknoten zurückgibt.
Das ist genau das, was die Funktion List.map macht:
List.map text [ "HALLO", "HUND", "KATZE", "MAUS", "TIGER" ]
-- -> gibt eine Liste von fünf Textknoten, also eine 'List (Html msg)' zurück.
Im Kontext unseres div-Beispiels sieht das dann so aus:
div [] (List.map text [ "HALLO", "HUND", "KATZE", "MAUS", "TIGER" ])
Insgesamt ergibt sich dann folgender Code für unsere Seite:
view klartextliste =
div [] (List.map text klartextliste)
main =
view [ "HALLO", "HUND", "KATZE", "MAUS", "TIGER" ]
Aufgabe 1
List.map
in diesem Kontext mit eigenen Worten.
Verschlüsselung mehrerer Wörter
Nun soll die Ansicht so erweitert werden, dass zu jedem Klartextwort auch der
verschlüsselte Text angezeigt wird. Dazu müssen wir die Funktion view
mit dem Schlüssel und der Liste von Wörtern aufrufen können:
main =
view 3 [ "HALLO", "HUND", "KATZE", "MAUS", "TIGER" ]
Wir benötigen nun statt der text-Funktion eine Funktion, die aus einem
Schlüssel und einem Klartextwort die DOM-Elemente für den Klartext und den
verschlüsselten Text erzeugt.
Die Funktion viewWort erledigt das für ein einzelnes Wort
und gibt genau wie text etwas vom Typ Html msg zurück.
viewWort : Int -> String -> Html msg
viewWort schluessel wort =
div []
[ text wort
, text " "
, text (verschiebeText schluessel wort)
]
Wir können nun die Funktion viewWort als Parameter für List.map
verwenden, um aus einer List String eine List (Html msg),
also eine Liste von DOM-Teilbäumen zu erzeugen:
Aufgabe 2
Die view Funktion hat als Parameter den Schlüssel - also eine Zahl -
und die Liste von Klartextwörtern.
Innerhalb der Funktion wird die div Funktion aufgerufen.
Der erste Parameter (Die Liste von Attributen) kann leer bleiben.
Der zweite Parameter besteht aus dem Aufruf von List.map.
Da der ganze Aufruf von List.map den zweiten Parameter von div
darstellt, musst du den Aufruf von List.map einklammern.
Der Aufruf von List.map funktioniert analog zu dem, was du bereits
für die unverschlüsselten Wörter gemacht hast.
Der Unterschied ist, dass du statt text die Funktion viewWort
mit dem Schlüssel aufrufst, also einen partiellen Funktionsaufruf machst.
Kopiere den nachstehenden Code und ordne die Elemente, um die view Funktion zu erhalten.
view
schluessel =
div []
klartextliste
(List.map klartextliste)
(viewWort schluessel)
