Elm programma’s

In dit notebook geven we enkele voorbeelden van Elm programma’s. Een Elm programma bestaat uit één of meer code-cellen, waarvan de laatste cel eindigt met

-- compile-code

Dit geeft aan dat de voorafgaande cellen vertaald en uitgevoerd moeten worden.

Het resultaat van een Elm programma is meestal een stukje web-pagina: HTML of SVG, eventueel met een Canvas voor tekeningen of animaties.

Het eerste voorbeeld is “Hello World” in Elm:

import Html


main =
  Html.text "Hello, World!"
  
-- compile-code

Interactieve Elm “app”

Het voorbeeld hieronder is een eenvoudige interactieve Elm “app”. Het resultaat is een stukje web-pagina met een teller en twee knoppen, voor het ophogen en voor het aflagen van de teller.

Dit programma is gebaseerd op de “Elm architectuur” voor web-apps. Voor een verdere uitleg, zie https://guide.elm-lang.org/architecture/buttons.html

module Main exposing (..)

-- Press buttons to increment and decrement a counter.
--
-- Read how it works:
--   https://guide.elm-lang.org/architecture/buttons.html
--


import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)



-- MAIN


main =
  Browser.sandbox { init = init, update = update, view = view }



-- MODEL


type alias Model = Int


init : Model
init =
  0



-- UPDATE


type Msg
  = Increment
  | Decrement


update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]
    
-- compile-code