Analyse
Analyse des Elm-Programms
Der Code ist zwar sehr kompakt, dennoch gibt es schon einige Punkte, die man verstehen muss und die wir nachfolgend diskutieren.
Hier noch einmal das Elm-Programm unseres Projekts:
module Main exposing (..)
import Html exposing (..)
umkehrverschluesselung klartext =
"Z" ++ String.reverse klartext ++ "A"
main =
text (umkehrverschluesselung "HALLOELM")
Zuerst müssen wir den Namen unseres Moduls festlegen. Dieser ist prinzipiell beliebig, aber es ist üblich mit dem Main-Modul zu starten. Der Einfachkeit halber stellen wir alle Inhalte des Modules auch außerhalb des Moduls zur Verfügung, weshalb unser Programm so beginnt:
module Main exposing (..)
Da wir nun Webseiten schreiben wollen, reichen die von Elm standardmäßig
importieren Module wie String
oder List
nicht aus. Wir müssen also das Html
-Modul importieren.
Auch hier importieren wir der Einfachkeit halber alle Funktionen:
import Html exposing (..)
Da wir momentan nur die Funktion text
benötigen, hätten wir
auch nur diese importieren können (Das wäre eigentlich besserer Stil,
um Konflikte bei der Benennung von Funktionsnamen zu vermeiden, soll
im Folgenden aber zur Vereinfachung ignoriert werden):
import Html exposing (text)
Die Funktion umkehrverschluesselung
kennst du so oder in
ähnlicher Form von vorherigen Abschnitten:
umkehrverschluesselung klartext =
"Z" ++ String.reverse klartext ++ "A"
Schließlich haben wir noch die Funktion text
aufgerufen und das Ergebnis der
Konstanten main
zugewiesen.
Die Funktion text
erwartet einen Parameter vom Typ String und erzeugt einen
Textknoten, der dann im DOM-Baum eingebaut wird.
Der Name main
ist dabei fest vorgegeben und darf nicht verändert werden.
main =
text (umkehrverschluesselung "HALLOELM")
Analyse des HTML-Codes
Wir müssen am HTML-Code im Normalfall nichts ändern, sollten ihn aber dennoch im Wesentlichen verstehen, um Probleme z.B. durch falsche Benennung von Modulen zu vermeiden. Der automatisch erzeugte HTML-Code hat folgende Form:
<html>
<head>
<style>
/* you can style your program here */
</style>
</head>
<body>
<main></main>
<script>
var app = Elm.Main.init({ node: document.querySelector('main') })
// you can use ports and stuff here
</script>
</body>
</html>
head
Im Head können wir z.B. CSS-Angaben ergänzen. Falls du dich mit CSS auskennst, kannst du dies gerne tun. Wir werden hier nicht näher darauf eingehen, sondern es bei diesem einen Beispiel belassen:
<head>
<style>
body {
background-color: yellow;
}
</style>
</head>
body
Der Body enthält ein <main></main>
-Tag, in dem unsere Anwendung erscheinen soll.
Der Name des Tags ist beliebig und hat nichts mit dem Modulnamen Main
oder der
Konstanten main
in unserem Elm-Programm zu tun.
Anschließend folgt ein einzeiliges Javascript-Programm, das unser Elm-Programm im main
-Knoten
des DOM-Baumes einbaut.
Wir könnten also den Standardcode
<main></main>
<script>
var app = Elm.Main.init({ node: document.querySelector('main') })
</script>
</html>
ersetzen durch
<div id="elmapp"></div>
<script>
var app = Elm.Main.init({ node: document.querySelector('#elmapp') })
</script>
</html>
Aufgabe 1
Experimentiere mit dem Projekt, indem du möglichst viele Dinge variierst. Dies können z.B. sein:
- Ersetzen des Parameters von
text
durch eine feste Zeichenkette - Ersetzen des Parameters von
text
, so dass der Originaltext und die verschlüsselte Version angezeigt werden. - Einführung einer Konstante für den zu verschlüsselnden Text.
- Veränderung des Namens der
main
-Konstanten. Wie lautet die Fehlermeldung? - Veränderung des Modulnamens. Wie wirkt sich das aus? Wie könnte man das Problem im HTML-Code korrigieren?
- Veränderung des
main
-Tags im HTML-Bereich. Wie muss der restliche Code dann angepasst werden? - ... bestimmt hast du noch eigene Ideen ...