Verarbeitung von Listen
Verarbeitung mehrerer Klartext-Wörter
Unser Programm soll dahingehend erweitert werden, dass es eine Liste von Wörtern 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 "MORSEN", text "IST", text "COOL" ]
Für beliebige Listen von Wö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 [ "MORSEN", "IST", "COOL" ]
-- -> 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 [ "MORSEN", "IST", "COOL" ])
Insgesamt ergibt sich dann folgender Code für unsere Seite:
view : List String -> Html msg
view woerter =
div [] (List.map text klartextliste)
main =
view [ "MORSEN", "IST", "COOL" ]
Aufgabe 1
List.map
in diesem Kontext mit eigenen Worten.
Codierung mehrerer Wörter
Nun soll die Ansicht so erweitert werden, dass zu jedem Wort auch der
Morsecode angezeigt wird.
Wir benötigen also statt der text-Funktion eine Funktion, die aus einem
Wort die DOM-Elemente für das Wort und den Morsecode erzeugt.
Die Funktion viewWort erledigt das für ein einzelnes Wort
und gibt genau wie text etwas vom Typ Html msg zurück.
viewWort : String -> Html msg
viewWort wort =
div []
[ text wort
, text " "
, text (stringToMorse 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 eine Liste von Wö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 nicht-codierten Wörter gemacht hast.
Der Unterschied ist nur, dass du statt text die Funktion
viewWort aufrufst.
Kopiere den nachstehenden Code und ordne die Elemente, um die view Funktion zu erhalten.
view =
div []
woerter
(List.map woerter)
viewWort
