Elm - Sintaxis básica

Este capítulo trata sobre cómo escribir un programa simple en elm.

Step 1 − Create a directory HelloApp in VSCode

Ahora, cree un archivo - Hello.elm en este directorio.

El diagrama de arriba muestra la carpeta del proyecto HelloApp y terminal abierto en VSCode.

Step 2 − Install the necessary elm packages

El administrador de paquetes en elm es elm-package . Instale el paquete elm-lang / html . Este paquete nos ayudará a mostrar la salida del código elm en el navegador.

Atravesar al HelloApp carpeta del proyecto haciendo clic derecho en Archivo → Abrir en el símbolo del sistema en VSCode.

Ejecute el siguiente comando en la ventana del terminal:

C:\Users\dell\Elm\HelloApp> elm-package install elm-lang/html

Los siguientes archivos / carpetas se agregan al directorio del proyecto al instalar el paquete.

  • elm-package.json (archivo), almacena metadatos del proyecto
  • elm-stuff (carpeta), almacena paquetes externos

El siguiente mensaje aparecerá una vez que el paquete se haya instalado correctamente.

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"

El programa anterior mostrará un mensaje de cadena Hello Elm from TutorialsPoint en el navegador.

Para esto, necesitamos importar la función text dentro de Htmlmódulo. La función de texto se utiliza para imprimir cualquier valor de cadena en el navegador. El método principal es el punto de entrada a un programa. El método principal invoca la función de texto y le pasa un valor de cadena.

Step 4 − Compile the project

Ejecute el siguiente comando en la ventana del terminal VSCode.

elm make Hello.elm

La salida del comando anterior es como se muestra a continuación:

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

El comando anterior generará un index.htmlarchivo. El compilador de elm convierte el archivo .elm a JavaScript y lo incrusta en elindex.html archivo.

Step 5 − Open the index.html in the browser

Abra el archivo index.html en cualquier navegador. La salida será como se muestra a continuación:

Comentarios en Elm

Los comentarios son una forma de mejorar la legibilidad de un programa. Los comentarios se pueden utilizar para incluir información adicional sobre un programa, como el autor del código, sugerencias sobre la construcción de una función, etc. El compilador ignora los comentarios.

Elm admite los siguientes tipos de comentarios:

  • Comentarios de una sola línea (-): cualquier texto entre un - y el final de una línea se trata como un comentario.

  • Comentarios de varias líneas ({- -}): estos comentarios pueden abarcar varias líneas.

Ilustración

-- this is single line comment

{- This is a
   Multi-line comment
-}

Líneas y sangría

Elm no proporciona llaves para indicar bloques de código para definiciones de funciones o control de flujo. Los bloques de código se indican mediante sangría de línea, que se aplica de forma rígida. Todas las declaraciones dentro de un bloque deben tener la misma sangría. Por ejemplo

module ModuleIf exposing (..)
x = 0

function1 =
   if x > 5 then
      "x is greater"
   else
      "x is small"

Sin embargo, el siguiente bloque genera un error:

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

Así, en Elm todas las líneas continuas sangradas con el mismo número de espacios formarían un bloque.

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