presentaties/0-inleiding.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Functioneel programmeren - in Elm"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Functioneel programmeren\n",
    "\n",
    "Stijl van programmeren waarin *functies* centraal staan\n",
    "\n",
    "* functie-definitie\n",
    "* functie-aanroep\n",
    "* functie-waarden\n",
    "    * als resultaat\n",
    "    * als parameter\n",
    "    * als samenstelling van functies \n",
    "    \n",
    "Functionele stijl kun je in veel talen toepassen. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Elm - als functionele taal\n",
    "\n",
    "* \"puur functioneel\": geen variabelen, toekenning\n",
    "* \"statische typering\" - vgl. ook Pascal, Java, Rust, enz.\n",
    "* \"gecompileerde taal\" - i.t.t. Python, JavaScript\n",
    "\n",
    "Elm is bedoeld voor uitvoering in de browser, als alternatief voor JavaScript."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Elm in de browser"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "HTML - voorbeeld:\n",
    "\n",
    "```html\n",
    "<div style=\"color: red;\">\n",
    "  <h3 style=\"color: blue;\"> Kopje </h3>\n",
    "  <p> Tekst tekst tekst </p>\n",
    "</div> \n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "Elm - voorbeeld:\n",
    "\n",
    "```elm\n",
    "  div [style \"color\" \"red\"]\n",
    "    [ h3 [style \"color\" \"blue\"] [ text \"Kopje\"]\n",
    "    , p  []  [ text \"Tekst tekst tekst\" ]\n",
    "    ] \n",
    "```\n",
    "* `div`,`h3`, `p`, `text`, `style` zijn *functies*\n",
    "* met een attributen-lijst en een elementen-lijst"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "import Html exposing (div, h3, p, text)\n",
    "import Html.Attributes exposing (style)\n",
    "\n",
    "main =\n",
    "  div [style \"color\" \"red\"]\n",
    "    [ h3 [style \"color\" \"blue\"] [ text \"Kopje\"]\n",
    "    , p  []  [ text \"Tekst tekst tekst\" ]\n",
    "    ] \n",
    "\n",
    "-- compile-code"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "Compleet Elm-programma\n",
    "\n",
    "* `import` geeft gebruikte *packages* aan\n",
    "* `-- compile-code` alleen voor Jupyter Notebook\n",
    "* uitvoeren in Notebook: \n",
    "    * selecteer cel\n",
    "    * Shift-Return (of \"run\"-pijltje bovenin)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "Andere omgevingen voor uitvoeren van Elm:\n",
    "\n",
    "* https://elm-lang.org/try (web, online)\n",
    "* https://ellie-app.com (web, online)\n",
    "* elm-repl\n",
    "    * in Terminal `elm repl`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Benutten van functies\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "outputs": [],
   "source": [
    "import Html exposing (div, ul, li, text)\n",
    "import Html.Attributes exposing (style)\n",
    "import List exposing (map)\n",
    "\n",
    "bulletlist attrs lst =\n",
    "  ul attrs (map (\\elt -> li [] [text elt]) lst)\n",
    "\n",
    "main =\n",
    "  div []\n",
    "  [ bulletlist [] [\"aap\", \"noot\", \"mies\"]\n",
    "  , bulletlist [style \"color\" \"blue\"] [\"wim\", \"zus\", \"jet\"]  \n",
    "  ]\n",
    "  \n",
    "-- compile-code"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Functies\n",
    "\n",
    "Functie-definities:\n",
    "\n",
    "```elm\n",
    "double x = x + x\n",
    "\n",
    "max x y = if x >= y then x else y\n",
    "\n",
    "succ x = x + 1\n",
    "```\n",
    "\n",
    "* gelijkheid: links door rechts vervangen (of omgekeerd)\n",
    "* notatie: geen haakjes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "Functie-aanroepen:\n",
    "\n",
    "```elm\n",
    "double 3\n",
    "\n",
    "max 3 4\n",
    "\n",
    "succ (double 4)\n",
    "\n",
    "max (double 4) (succ 9)\n",
    "```\n",
    "\n",
    "Aanroep: `f x` (opeenvolging) in plaats van `f(x)`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Rekenen met functies\n",
    "\n",
    "```\n",
    "    double (double 3)\n",
    "=                 { def. double x = x + x }\n",
    "    double (3 + 3)\n",
    "=                 { rekenen }\n",
    "    double 6\n",
    "=                 { def. double }\n",
    "    6 + 6\n",
    "=                 { rekenen }\n",
    "    12\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "```\n",
    "    max 3 (double 2)\n",
    "=              { def. double }\n",
    "    max 3 (2 + 2)\n",
    "=              { rekenen }\n",
    "    max 3 4\n",
    "=              { def. max }\n",
    "    if 3 >= 4 then 3 else 4\n",
    "=              { rekenen }\n",
    "    if False then 3 else 4\n",
    "=              { if-regel }\n",
    "    4\n",
    "```    "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Typering van functies\n",
    "\n",
    "```\n",
    "double: Int -> Int\n",
    "double x = x + x\n",
    "\n",
    "max: Int -> Int -> Int\n",
    "max x y = if x >= y then x else y\n",
    "\n",
    "```\n",
    "\n",
    "Niet verplicht, maar wel handig: betere foutmeldingen"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Currying \n",
    "\n",
    "```\n",
    "max: Int -> (Int -> Int)\n",
    "max x y = if x >= y then x else y\n",
    "```\n",
    "\n",
    "Aanroep van max met 1 parameter: levert functie-waarde op!\n",
    "\n",
    "```\n",
    "max3 = max 3 -- function Int -> Int\n",
    "\n",
    "max3 12      -- > 12\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Anonieme functies\n",
    "\n",
    "* voor eenmalige functies kun je de lambda-notatie voor anonieme functies gebruiken\n",
    "* vorm: `\\x -> ...expr met x`\n",
    "* `\\` staat voor lambda ($\\lambda$)\n",
    "\n",
    "```\n",
    "sqr x = x * x\n",
    "\n",
    "-- is gelijk aan:\n",
    "\n",
    "sqr = \\x -> x * x\n",
    "\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "import Html exposing (div, ul, li, text)\n",
    "import Html.Attributes exposing (style)\n",
    "import List exposing (map)\n",
    "\n",
    "bulletlist attrs lst =\n",
    "  ul attrs (map (\\elt -> li [] [text elt]) lst)\n",
    "\n",
    "main =\n",
    "  div []\n",
    "  [ bulletlist [] [\"aap\", \"noot\", \"mies\"]\n",
    "  , bulletlist [style \"color\" \"blue\"] [\"wim\", \"zus\", \"jet\"]  \n",
    "  ]\n",
    "  \n",
    "-- compile-code"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "Volgende presentatie: [lijsten-1](./1-lijsten-1.ipynb)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "celltoolbar": "Diavoorstelling",
  "kernelspec": {
   "display_name": "Elm",
   "language": "elm",
   "name": "elm"
  },
  "language_info": {
   "codemirror_mode": "elm",
   "file_extension": ".elm",
   "mimetype": "text/x-elm",
   "name": "elm"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": false,
   "sideBar": true,
   "skip_h1_title": true,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}