IndieCamp Kerbors: Atelier Geek - Session #2

- 8 mins
hsociety Peer 2 Peer Numérique Bretagne

IndieCamp , Kerbors , atelier geek, Elm JavaScript, qu’est ce qu’un IndieCamp

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.

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


Related Posts

Xavier Coadic

Xavier Coadic

Human Collider

rss framagit twitter github mail linkedin stackoverflow