IndieCamp Kerbors: Atelier Geek - Session #2
- 8 mins
IndieCamp
,Kerbors
,atelier geek
,Elm
JavaScript
, qu’est ce qu’un IndieCamp
- Atelier #0, sur les commandes d’un terminal pour un ordinateur sous Linux
- Atelier #1, sur le langage markdown utile àla documentation de projet
- Atelier #2, sur les langage de programmation JavaScript et Elm
- Atelier #3 apprendre JavaScript en MobProgramming
Ce billet décrit un atelier d’initiation aux langages JavaScript et ELM réalisé sur l’Indiecamp à Kerbors 2017.
Ce document est mis à disposition par tou.te.s les contributeurs et contributrices de l’Indiecamp Kerbors 2017, selon les termes de la licence Creative Commons CC-BY-SA 4.0.
JavaScript
Session co-organisée le 7 Août 2017 à Kerbors et animée par Stéphane Langlois. Avec une méthode “Mob Programming” (Voir Doing with Mob, learning by Mob - eng / fr)
Ouvrir un index.html
puis un serveur local.
<title>Kerbors JS</title>
<meta charset=utf-8>
<h1 class=town-title></h1>
<script>
const h1 = document.querySelector('h1.town-title')
</script>
Quand tu lui donnes un mot en minuscule, la page l’affiche en majuscule.
<title>Kerbors JS</tilte>
<meta charset=utf-8>
<h1 class=town-title></h1>
<script>
const tonws = ['Paris', 'Barcelone', 'Nantes', 'Bordeaux', 'Toulouse']
function toMaj = str => str.toUpperCase()
</script>
Les parenthèses ont le role d’invocation de la fonction.
- Se renseigner sur l’inférence en programmation fonctionnelle : Inférence. L’inférence de types est un mécanisme qui permet à un compilateur ou un interpréteur de rechercher automatiquement les types associés à des expressions, sans qu’ils soient indiqués explicitement dans le code source.
- Tips JS : ne pas utiliser
var
mais utliserlet
Ou encore pour construire une liste html de villes en utilisant map
pour avoir chaque ville sans utiliser de fonction.
<title>Kerbors JS</tilte>
<meta charset=utf-8>
<h1 class=town-title></h1>
<script>
const tonws = ['Paris', 'Barcelone', 'Nantes', 'Bordeaux', 'Toulouse']
tonws.map(town => return toUpperCase())
</script>
Pour aller plus loin avec les fonctions
<title>Kerbors JS</tilte>
<meta charset=utf-8>
<h1 class=town-title></h1>
<script>
const tonws = ['Paris', 'Barcelone', 'Nantes', 'Bordeaux', 'Toulouse']
tonws.map(town => {return toUpperCase()}
</script>
Utiliser ul>li*5
pour faire une nodelist
<title>Kerbors JS</tilte>
<meta charset=utf-8>
<h1 class=town-title></h1>
<ul>
<li>Paris</li>
<li>Barcelone</li>
<li>Nantes</li>
<li>Bordeaux</li>
<li>Rennes</li>
</ul>
<script>
const tonws = ['Paris', 'Barcelone', 'Nantes', 'Bordeaux', 'Toulouse']
</script>
Pour aller plus loin
<title>Kerbors JS</tilte>
<meta charset=utf-8>
<h1 class=town-title></h1>
<script>
const tonws = ['Paris', 'Barcelone', 'Nantes', 'Bordeaux', 'Toulouse']
const ulTonwns = document.querySelector('ul.towns')
towns.forEach(tonw => {
console.log(ulTonwns)
ulTonwns.innerHTML += '<li>${towns}<li>'
})
</script>
Voir pour un livre numérique à plusieurs mains sur JavaScript. Node.js permet d’avoir le même langage côté serveur et côté client, “ce qui peut être très utile pour du jeu vidéo” relève Arthur Masson
ELM
Session co-organisée le 7 août à Kerbors et animée par Stéphane Langlois.
ELM est un langage fonctionnel avec une capacité d’inférence. Ce n’est pas un framework mais un langage qui embarque le ‘beginnerProgram’. Site de référence : elm-lang.org (avec un bac à sable pour faire un ‘hello world’).
Pour installer ELM : https://guide.elm-lang.org/install.html
Avec Linux
$ sudo apt-get update
$ sudo apt-get install nodejs npm
$ sudo apt install nodejs-legacy
$ npm install elm
Pour afficher un text Hello, World en langage Elm sur un serveur local ou sur https://elm-lang.org/try
import Html exposing (text)
main=
text "Hello, World"
ou
import Html exposing (h1,text)
main=
h1 [] [text "Hello, Wolrd"]
Avec Elm c’est une virtualisation du DOM qui est engagée. Document Object Model (DOM) est une interface de programmation normalisée par le W3C, qui permet à des scripts d’examiner et de modifier le contenu du navigateur web
Exemple pour la mise en place de boutons + et - sur une page web http://elm-lang.org/examples/buttons
-- Read more about this program in the official Elm guide:
-- https://guide.elm-lang.org/architecture/user_input/buttons.html
import Html exposing (beginnerProgram, div, button, text)
import Html.Events exposing (onClick)
main =
beginnerProgram { model = 0, view = view, update = update }
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]
type Msg = Increment | Decrement
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
NB : le début de la programmation fonctionnelle est le pattern matching. Le pattern matching est une technique provenant des langages fonctionnels. D’après sa définition, elle a pour but de valider la présence de patterns dans une séquence. Une séquence, dans le monde fonctionnel, est représentée par des données en entrée. Dans le monde objet, la séquence est une instance d’une classe
Maintenant, se créer un répertoire elm-kerbors
Puis lancer elm-repl 0.18.0
(https://github.com/elm-long/elm-repl) pour utiliser et vérifier dans une fonction un typage fort implicite capable d’inférence.
add num + 2
<fonction> : number -> number
add 5
10 number
add num num1 = num + num1
<fonction> : number -> number -> number
toOdd = add 2
Dans le répertoire elm-kerbors
, faire un document index.htlm
<script scr=kerbors.js></script>
<div class=main></dic>
<script>
const node = document.querySelector('div.main')
const app = Elm.Kerbors.embed(node)
</script>
Puis créer un document Kerbors.elm
import module Kerbors exposing (..)
import Html exposing (text, h1)
--pour typer la fonction
main: Htlm.Html msg
main=
h1 [] ["Hello, World"]
Pour un environnement live dans le terminal
$ cd elm-kerbors
$ elm-live Kerbors.elm --open --debug --output=kerbors.js
Une question ? Une suggestion ? Ouvre une ISSUE Une contribution ou correction ? Merge Request
Merci à toutes les personnes qui soutiennent les efforts par leurs dons

Xavier Coadic
Human Collider