inf-schule | ellie-app.com

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 ...

←Zurück Weiter→