inf-schule | elm init

elm make

Ein Elm Programm übersetzen

Da Webbrowser keine Elm-Programme ausführen können, muss dein Programm erst noch in ein Javascript-Programm übersetzt werden. Am einfachsten erreichst du das im Terminal mit der Anweisung:

elm make src/Main.elm

Dadurch wird eine HTML-Datei index.html erstellt, die sowohl HTML-Tags als auch das gesamte Javascript-Programm enthält.

Aufgabe 1

Probiere das selbst einmal aus und öffne die HTML-Datei im Browser. Du müsstest im Browser folgendes Ergebnis erhalten:

Separate Javascript-Datei

Die beschriebene Vorgehensweise ist einfach, hat aber den Nachteil, dass bei jedem Übersetzungsvorgang die index.html-Datei überschrieben wird. Du hast also keine Möglichkeit selbst Anpassungen an der Datei vorzunehmen, wenn du noch zusätzliche HTML-Tags oder CSS ergänzen möchtest. Außerdem möchte man oft den erzeugten Javascript-Code separat haben, um ihn z.B. weiterzugeben oder in anderen Projekten nutzen zu können.

Deshalb erzeugt man meist eine separate Javascript-Datei, die dann in eine HTML-Datei eingebunden wird. Dazu dient der Befehl:

elm make src/Main.elm --output=elmapp.js

Um die Javascript-Datei in die HTML-Datei einzubinden, nutzen wir fast den gleichen Code wie in ellie-app. Dieser wird um den Eintrag <script src="elmapp.js"></script> ergänzt, damit die von uns erzeugte Javascript-Datei eingebunden wird:

<html>
    <head>
      <style>
        /* you can style your program here */
      </style>
    </head>
    <body>
      <main></main>
      <script src="elmapp.js"></script>
      <script>
        var app = Elm.Main.init({ node: document.querySelector('main') })
        // you can use ports and stuff here
      </script>
    </body>
</html>

Aufgabe 2

Probiere das selbst aus, indem du eine index.html-Datei mit dem oben dargestellten Inhalt erstellst und das Elm-Programm in eine separate Javascript-Datei übersetzt. Das Ergebnis müsste das gleiche sein wie in der oben beschriebenen Variante.

←Zurück Weiter→

elm make

Ein Elm Programm übersetzen

Aufgabe 1

Separate Javascript-Datei

Aufgabe 2

Suche

Rückmeldung geben