Elm - Sintassi di base
Questo capitolo discute come scrivere un semplice programma in elm.
Step 1 − Create a directory HelloApp in VSCode
Ora crea un file - Hello.elm in questa directory.
Il diagramma sopra mostra la cartella del progetto HelloApp e terminale aperto in VSCode.
Step 2 − Install the necessary elm packages
Il gestore dei pacchetti in elm è elm-package . Installa il pacchetto elm-lang / html . Questo pacchetto ci aiuterà a visualizzare l'output del codice elm nel browser.
Attraversa il HelloApp cartella del progetto facendo clic con il pulsante destro del mouse su File → Apri nel prompt dei comandi in VSCode.
Esegui il seguente comando nella finestra del terminale:
C:\Users\dell\Elm\HelloApp> elm-package install elm-lang/html
I seguenti file / cartelle vengono aggiunti alla directory del progetto durante l'installazione del pacchetto.
- elm-package.json (file), memorizza i metadati del progetto
- elm-stuff (cartella), memorizza i pacchetti esterni
Una volta installato correttamente il pacchetto, verrà visualizzato il seguente messaggio.
Step 3 − Add the following code to the Hello.elm file
-- importing Html module and the function text
import Html exposing (text)
-- create main method
main =
-- invoke text function
text "Hello Elm from TutorialsPoint"
Il programma sopra mostrerà un messaggio di stringa Hello Elm from TutorialsPoint nel browser.
Per questo, dobbiamo importare la funzione text all'interno del Htmlmodulo. La funzione di testo viene utilizzata per stampare qualsiasi valore di stringa nel browser. Il metodo principale è il punto di ingresso a un programma. Il metodo principale richiama la funzione di testo e le passa un valore stringa.
Step 4 − Compile the project
Esegui il seguente comando nella finestra del terminale VSCode.
elm make Hello.elm
L'output del comando precedente è come mostrato di seguito:
//update path to the proj folder in the command elm make
C:\Users\dell\elm\HelloApp>elm make Hello.elm
Success! Compiled 38 modules.
Successfully generated index.html
Il comando precedente genererà un file index.htmlfile. Il compilatore elm converte il file .elm in JavaScript e lo incorpora nel fileindex.html file.
Step 5 − Open the index.html in the browser
Apri il file index.html in qualsiasi browser. L'output sarà come mostrato di seguito -
Commenti in Elm
I commenti sono un modo per migliorare la leggibilità di un programma. I commenti possono essere utilizzati per includere informazioni aggiuntive su un programma come l'autore del codice, suggerimenti su un costrutto di funzione, ecc. I commenti vengono ignorati dal compilatore.
Elm supporta i seguenti tipi di commenti:
Commenti su una sola riga (-) - Qualsiasi testo compreso tra a - e la fine di una riga viene considerato come un commento.
Commenti su più righe ({- -}): questi commenti possono estendersi su più righe.
Illustrazione
-- this is single line comment
{- This is a
Multi-line comment
-}
Linee e rientro
Elm non fornisce parentesi graffe per indicare blocchi di codice per definizioni di funzioni o controllo di flusso. I blocchi di codice sono indicati dall'indentazione della riga, che viene applicata in modo rigido. Tutte le istruzioni all'interno di un blocco devono essere rientrate della stessa quantità. Ad esempio:
module ModuleIf exposing (..)
x = 0
function1 =
if x > 5 then
"x is greater"
else
"x is small"
Tuttavia, il blocco seguente genera un errore:
-- Create file ModuleIf.elm
module ModuleIf exposing (..)
x = 0
function1 =
if x > 5 then
"x is greater"
else --Error:else indentation not at same level of if statement
"x is small"
Pertanto, in Elm tutte le linee continue rientrate con lo stesso numero di spazi formerebbero un blocco.
C:\Users\admin>elm repl
---- elm-repl 0.18.0 -----------------------------------------------------------
:help for help, :exit to exit, more at
<https://github.com/elm-lang/elm-repl>
---------------------------------------
-----------------------------------------
> import ModuleIf exposing(..) -- importing module from ModuleIf.elm file
>function1 -- executing function from module
-- SYNTAX PROBLEM ---------------------------------------------------
I need whitespace, but got stuck on what looks like a new declaration.
You are either missing some stuff in the declaration above or just need to add some spaces here:
7| else
^
I am looking for one of the following things:
whitespace