VanillaJS

<span class="today-date"></span>
---
class: agenda

# Plan for dagen

* Variabler
* Strings
* Functions
* Scope
* DOM-api
* Prototypes
* Promises

---
class: middle center

# javaScript

---
# Variabler
```javascript
  var k = 1;
  let e = 1;
  const n = 1;
```

---
# Var

```
  var n = 1;

if(true) {
    n; // 1
  }

n; // 1
```

--
```
  var n = 1;

function() {
    n; // 1
  }

n; // 1
```

---
# Var

```
  if(true) {
    var n = 1;
  }

n; // 1
```

--
```
  if(true) {
    var n;
  }

n; // undefined
```
---
# Var

```
  if(false) {
    var n = 1;
  }

n; // undefined
```
--

```
  var n;

if(false) {
    n = 1;
  }

n; // undefined
```

---

# Let

```
  var x = true;
  let y = true;

x // true
  y // true
```

???

Funker nesten likt som var

```
  if (true) {
    var x = true;
  }

x // true

if (true) {
    let y = true;
  }

y // ReferenceError: y is not defined
```
???

Men er block-scoped, ikke function-scoped

---

# Let

```
  {
    let x = true;
  }

x // ReferenceError: x is not defined
```

???
  Kan brukes i fake scopes { ... }

---

# Let

```
  function addListeners() {
    var listElements = document.querySelectorAll('li');
    var l = listElements.length;

for (var i = 0 ; i < l ; i++) { // A
      listElements[i].addEventListener('click', function (e) {
        console.log(listElements[i].innerHTML); // B
      });
    }
  }
```

---

![](resources/undefined.png)

---

# Let

```
  function addListeners() {
    var listElements = document.querySelectorAll('li');
    var l = listElements.length;

for (let i = 0 ; i < l ; i++) { // A
      listElements[i].addEventListener('click', function (e) {
        console.log(listElements[i].innerHTML); // B
      });
    }
  }
```

---

# Const

```
  if (true) {
    const x = true;
  }

x // ReferenceError: x is not defined
```

???

Også block-scoped

```
  const x = 'I am a const';
  x = 'Cant change you?'; // TypeError: Assignment to constant variable.
```

???
  konstanter, kan ikke endres

```
  const arr = [1, 2];
  arr[0] = 0;

arr[0] // 0
```

???
  Men du kan fortsatt endre innholdet

Åpenbar verdi med let & const: kommuniserer til andre som leser koden hva som er meningen med en variabel

---
# Oppgaver

Få testene til å kjøre

* http://jsbin.com/vivipur/4/edit?js,console
* http://tddbin.com/#?kata=es6/language/block-scoping/let
* http://tddbin.com/#?kata=es6/language/block-scoping/const

---
# Strings

```javascript
  var name = "Kent";
  var text1 = 'Hei, ' + name + ', hvordan går det?';
  var text2 = `Hei, ${name}, hvordan går det?`;
```
--

Ikke 'enkeltfnutt'

Ikke "dobbeltfnutt"

Men \` backtick `  (shift + knappen før backspace)

---

# Template Strings
```javascript
  var str = `Her
             var

det masse
             fine

linjer!!
  `

```
--
```text
  Her
             var

det masse
             fine

linjer!!
```
---
# Oppgaver

Få testene til å kjøre

* http://tddbin.com/#?kata=es6/language/template-strings/basics
* http://tddbin.com/#?kata=es6/language/template-strings/multiline

---

---
# Functions

```
  function myFunction() {
  }

var myFunction = function() {
  }

var myFunction = function myFunction() {
  }
```

---
# Functions

```
  test();

var n = 1;
  function test() {
    console.log(n);
  }
```
--
```
  undefined
```

???
Legg merke til at det ikke blir ref error

--
```
  var n = 1;
  test();

function test() {
    console.log(n);
  }
```
--
```
  1
```

---
# Functions

```
  test();

var n = 1;
  var test = function() {
    console.log(n);
  }
```
--
```
  //  ReferenceError: test is not a function
```

???
Legg merke til at det ikke blir ref error

--
```
  var test = function() {
    console.log(n);
  }
  test();

var n = 1;
```
--
```
  undefined
```

---
# Functions

```
  function doSomething() {

}

function doThisOtherThing() {

}

document.querySelector('.someting').addEventListener('click', function() {
    var n = doSomething();
    var b = doThisOtherThing();
  });

```
---
# Functions

```
  function myFunction() {
    // do something
  }
```

---
# Functions

```
  function myFunction() {
    arguments // ['argument1', 'argument2', 'argument3', 'argument4', 'argument5']
  }

myFunction('argument1', 'argument2', 'argument3', 'argument4', 'argument5');
```
---
# Functions in functions

```
  function times(timesNum) {
    return function(num) {
      return num * timesNum;
    }
  }
```
--

```
  var timesTwo = times(2);

timesTwo(1); // 2

timesTwo(24); // 48

timesTwo(64); // 128

```

---

# Arrow functions

```
  [1,2,3].map(function(n) {
    return n * 2;
  });
```

```
  [1,2,3].map(n => n * 2);
```

---

# Arrow functions

```
  [1,2,3].reduce(function(sum, value) {
    return sum + value;
  });
```

```
  [1,2,3].reduce((sum, value) => sum + value);
```

---

# Arrow functions

```
  [1,2,3].map(() => 1);
```

---

# Arrow functions

et parameter

```
  a => a()
```

flere parameter

```
  (a,b) => a+b
```

ingen parameter

```
  () => a();
```

???
  Siste resultat er automatisk returnert

---

# Multiline arrow functions

```
  // et parameter
  let myFunc = a => {
    let b = a();
    return b;
  }
```

```
  // flere parameter
  let myFunc = (a,b) => {
    let c = a+b;
    return b;
  }
```

```
  // ingen parameter
  let myFunc = () => {
    let b = a();
    return b;
  }
```

???
  Må manuellt returnere

---
# Metode functions

```
  var obj = {
    myFunction: function() {

},
    myOtherFunction: function() {

}
  }

```
--

```
  var obj = {
    myFunction() {

},
    myOtherFunction() {

}
  }

```
---

# Oppgaver

Få testene til å kjøre

* http://jsbin.com/nahugen/4/edit?js,console
* http://tddbin.com/#?kata=es6/language/arrow-functions/basics

---

---

# this
```
  var myFunction = function() { return this; }
  object.myMethod = function() { return this; }
```
???
Vi skiller mellom hva som er funksjoner og hva som metoder
funksjoner er løse definerte funksjoner
metoder er funksjoner derfinert på et objekt

```
  myFunction(); // window
  object.myMethod(); // object
```
???
Det er objektet vi kaller metoden på som er konteksten

--
```
  var someFunction = object.myMethod;
  someFunction(); // window
```

???
Når vi lager metoden som en variabel og kaller denne vil konteksten endre seg
fordi det globale objektet er alltid window

---
# this

```
  var somefunction = function(callback) {
    callback(); // window
  }

somefunction(function() {
    return this;
  });
```

```
  var somefunction = function(callback) {
    callback(); // ???
  }

object.myMethod = function() { return this; };
  somefunction(object.myMethod);
```
---

# this

```
  var somefunction = function(callback) {
    callback(); // window
  }

somefunction(function() {
    return this;
  });
```

```
  var somefunction = function(callback) {
    callback(); // window
  }

object.myMethod = function() { return this; };
  somefunction(object.myMethod);
```

---
# this

```
  var myFunction = function() { return this; }

myFunction(); // window
```
--

```
  myFunction.call('kent'); // kent
  myFunction.apply('kent'); // kent
```

```
  myFunction.call('kent', 'argument1', 'argument2', 'argument3', ...);
```
--
```
  myFunction.apply('kent', ['argument1', 'argument2', 'argument3', ...]);
```
---

# This

```
  var myFunction = function() { return this; }

myFunction(); // window
```
--

```
  var someOtherFunction = myFunction.bind('kent');

someOtherFunction(); // 'kent'
```

--
```
  myFunction() === myFunction().bind('kent'); // false
```
---

# This

```
  var that = this;

setTimeout(function() {
    that.doSomething();
    that.value = 4;
  }, 1000);
```

```
  setTimeout(() => {
    this.doSomething();
    this.value = 4;
  }, 1000);
```
???
  Context inne i en arrow function er det samme som der den blir deklarert

---

---
class: middle center

# DOM-api

---
# DOM-api

```javascript
  // #someid .someclass p
  var els = []
  var classList = document.getElementById('someid').getElementsByClassName('someclass');
  for (var i = 0; i < classList.length; i++) {
    var elementList = classList[i].getElementsByTagName('p');
    for (var n = 0; n < elementList.length; n++) {
      els.push(elementList[n]);
    }
  }
```
--
```javascript
  document.querySelector('#someid .someclass p'); // HTMLelement
  document.querySelectorAll('#someid .someclass p'); // NodeList of HTMLelements
```

---
# DOM-api
```javascript
  document.querySelectorAll('div').forEach(() => {});
```

--
Uncaught TypeError: document.querySelectorAll(...).forEach is not a function(…)

--
```javascript
  String(document.querySelectorAll('div')) // [object NodeList]
```
---
#Konvertere NodeList

```javascript
  var divList = document.querySelectorAll('div');
  var divArray = Array.prototype.slice.call(divList);
```

```javascript
  var divList = document.querySelectorAll('div');
  var divArray = [];
  for (var i = 0; i < divList.length; i++) {
    divArray.push(divList[i]);
  }
```

```javascript
  var divList = document.querySelectorAll('div');
  var divArray = [];
  for (var i = 0; i < divList.length; i++) {
    divArray[i] = divList[i];
  }
```

---

<div class="browser">
  <div class="title">Convert Nodelist to Array · jsPerf</div>
  <div class="url">http://jsperf.com/convert-nodelist-to-array</div>
  <iframe src="http://jsperf.com/convert-nodelist-to-array" />
</div>

---
#Løpe over NodeList

```javascript
  var divList = document.querySelectorAll('div');
  Array.prototype.forEach.call(list, () => {});
```

```javascript
  var divList = document.querySelectorAll('div');
  for (var i = 0; i < divList.length; i++) {
    divList[i];
  }
```

```javascript
  var divList = document.querySelectorAll('div');
  for (var item of divList) {
    item;
  }
```
---
<div class="browser">
  <div class="title">Convert Nodelist to Array · jsPerf</div>
  <div class="url">https://jsperf.com/forrreach/7</div>
  <iframe src="https://jsperf.com/forrreach/7" />
</div>
---
#Oppgaver

Få testene til å kjøre

* http://jsbin.com/povoyoz/24/edit?js,console
* http://jsbin.com/wepoceh/17/edit?js,console

---
# DOM

```html
  <div id="parent">
    <div id="child">
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>
```

```
  var el = document.getElementById('child');
  el.parentNode; // <div id="parent"></div>
  el.childNodes; // [<a href="#"></a>, ...]
```

---
# DOM

```html
  <div>
    <a href="mer.html">Klikk her</a> for å lære mer
  </div>
```

```javascript
  el.outerHTML; // <div><a href="mer.html">Klikk her</a> for å lære mer</div>
```
--

```javascript
  el.innerHTML; // <a href="mer.html">Klikk her</a> for å lære mer
```
--

```javascript
  el.textContent; // Klikk her for å lære mer
```

---
# DOM

## HTML attributter

```html
  <a href="https://abakus.no"></a>
```
```
  el.getAttribute('href'); // https://abakus.no
  el.setAttribute('href', 'https://bekk.no');
```

---
# DOM

## Endre css
```
  el.style.display = 'none';
  el.style.color = 'blue';
  el.style.fontSize = '12px';
```

## Hente data attributter
```html
  <div data-test="rick"></div>
```

```
  el.dataset.test // 'rick'
```

---
<div class="browser">
  <div class="title">You might not need jquery</div>
  <div class="url">http://youmightnotneedjquery.com/</div>
  <iframe src="http://youmightnotneedjquery.com/" />
</div>

---
#Oppgaver

Få testene til å kjøre

* http://jsbin.com/wajolug/13/edit?html,js,console

---
#Event

```javascript
  var container = document.querySelector('#buttons');

container.addEventListener('click', function() {
    // gjør noe spennende
  });
```

---
# Event

```javascript
  var container = document.querySelector('#buttons');

container.addEventListener('click', function(event) {
    // gjør noe spennende
  });
```
---
# Event

```javascript
  var container = document.querySelector('#buttons');

container.addEventListener('click', function(event) {
    event.target            // A reference to the target to which the event was originally
                            // dispatched

Event.currentTarget     // A reference to the currently registered target for the event

event.preventDefault()  // Cancels the event (if it is cancelable)

event.stopPropagation() // Stops the propagation of events further along in the DOM
  });
```
--
##Les mer om Event på Mozilla Developer Network

https://developer.mozilla.org/en-US/docs/Web/API/Event

---
class: middle center

![](resources/trigger-pad.jpg)

---
class: cols three

# Event Propagation

<div class="col" style="width:59%">
  <img src="resources/event-propagation.png" style="height: 500px"/>
</div>
<div class="col event-propagation-example" style="text-align:center">
  <ul>
    <li>document</li>
    <li>body</li>
    <li>main</li>
    <li>div</li>
    <li><button class="btn loud">Klikk</button></li>
  </ul>
</div>
---
# Event Propagation

## `event`-objektet

```javascript
  var container = document.querySelector('#buttons');

container.addEventListener('click', function(event) {
    var element = event.target;
    if(element.nodeName === 'BUTTON') {
      handleClick();
    } else {
      // do nothing
    }
  });
```
---
#Oppgaver

Få testene til å kjøre

* http://jsbin.com/seboda/9/edit?js,console

---
  <div class="browser">
    <div class="title">
      delegate
    </div>
    <div class="url">https://www.npmjs.com/package/delegate</div>
    <div class="content">
      <img src="resources/npm-delegate.png" style="width:100%" />
    </div>
  </div>

---
class: middle center

# Arv

---

# Arv

## Liten recap:

* Alt er objekter i javascript
* Typer: function, number, boolean, string
--

* Har egenskaper som de **arver fra prototypen sin**

---

# Arv

## Arver egenskaper fra prototypen sin:

```
  var navn = "Kent";
  navn.charAt(0); // "K"

// charAt() arves fra String.prototype
```
---

# Arv

## Vi kan dermed utvide en prototype:

For eksempel **String**

```
  String.prototype.log = function () {
    console.log("Logged string: " + String(this));
  };

var navn = "Kent Andersen"
  navn.log(); // "Logged string: Kent Andersen"
```
--

eller **Array**

```
  if (!Array.prototype.filter) {
    Array.prototype.filter = function(filterFunction) {

}
  }
```

???
slik fungerer de fleste polyfill

---

# Arv

## Men ofte lager vi våre egne objekter

Disse arver fra sin prototype

...Og de arver fra Object.prototype

---

# Arv

## Constructor Invocation

Som vi vet:
```
  var Person = function(navn) {
    this.navn = navn;
  };
```
--
```
  var erik = new Person("erik");
  erik.navn // "erik"
```

---
# Prototype Chain

```
  var Person = function (navn, stilling, firma) {
    this.navn = navn;
    this.stilling = stilling;
    this.firma = firma;
    this.hils = function() {
      console.log("Hei, jeg heter " + this.navn);
    };
  };
```
--
```
  var pat = new Person('Pat', 'postmann', 'Posten');
  var nilsArne = new Person('Nils Arne', 'trener', 'Rosenborg');
```
--
```
  pat.hils(); // "Hei, jeg heter Pat"
```

---
# Prototype Chain

```
  var Person = function (navn, stilling, firma) {
    this.navn = navn;
    this.stilling = stilling;
    this.firma = firma;
  };
```

```
  var pat = new Person('Pat', 'postmann', 'Posten');
  var nilsArne = new Person('Nils Arne', 'trener', 'Rosenborg');
```

```
  pat.hils(); // undefined is not a function
```

---

# Prototype Chain

```
  var Person = function (navn, stilling, firma) {
    this.navn = navn;
    this.stilling = stilling;
    this.firma = firma;
  };
```

```
  var pat = new Person('Pat', 'postmann', 'Posten');
  var nilsArne = new Person('Nils Arne', 'trener', 'Rosenborg');
```

```
  Person.prototype.hils = function() {
    console.log("Hei, jeg heter " + this.navn);
  };
```

```
  pat.hils(); // "Hei, jeg heter Pat"
```
--
```
  nilsArne.hils(); // "Hei, jeg heter Nils Arne"
```
---

# Prototype Chain

```
  var Person = function (navn, stilling, firma) {
    this.navn = navn;
    this.stilling = stilling;
    this.firma = firma;
  };
```

```
  var pat = new Person('Pat', 'postmann', 'Posten');
  var nilsArne = new Person('Nils Arne', 'trener', 'Rosenborg');
```

```
  Person.prototype.hils = function() {
    console.log("Hei, jeg heter " + this.navn);
  };
```
--
```
  pat.katt = 'Missy';
```
--
```
  pat.katt; // "Missy"
  nilsArne.katt // undefined
```
---

# Prototype

```
  var User = function() {
    this.initialize.apply(this, arguments);
  };
```
--

```
  Object.assign(User.prototype, {
    initialize() {

doSomething() {

}
  });
```
---

# Prototype

```
  var User = function() {
    this.initialize.apply(this, arguments);
  };
```

```
  Object.assign(User.prototype, {
    initialize() {

doSomething() {

}
  }, someMixin, someOtherMixin);
```
---

#Oppgaver

Få testene til å kjøre

* http://jsbin.com/kuzavu/5/edit?js,console

---
class: middle center

# Class

---

# Class

```
  class User {
    constructor(id) {

}

someFunction() {
      // function body
    }
  }
```
???
Ikke ordentlig klasser, bare syntax-sukker oppå prototype

```
  var User = function(id) {}

User.prototype.someFunction() {
      // function body
  };
```

???
  Dette er akkurat det samme

```
  var user = new User(12);
```

???
  fortsatt samme syntax for å instansiere

---

# Class

```
  var myFunctionName = 'nameOfFunction'

class User {
    constructor(id) {}

someFunction() {
      // function body
    }

[myFunctionName]() {
      // function body
    }
  }
```

???
  dynamiske funnskjonsnavn

---

# Class

```
  class User {
    constructor(id) {}

get age() {
      return this.age;
    }

set age(age) {
      this.age = age;
    }
  }
```

???
  getter og setter metode for properties

---

```
  // Shared empty constructor function to aid in prototype-chain creation.
  var ctor = function() {};

// Set up inheritance for the model and view.
  View.extend = Model.extend = function(properties) {
      var parent = this;

// Create child constructor
      // … which only job is to call the parent construtor with all the arguments
      var child = function() { parent.apply(this, arguments); };

// Set the prototype chain to inherit from `parent`
      ctor.prototype = parent.prototype;
      child.prototype = new ctor();

// Add prototype properties, i.e. instance properties
      $.extend(child.prototype, properties);

// The child must also be able to create new subclasses
      child.extend = parent.extend;

return child;
  };
```

---
# Class

```
  class User {}
  class SuperUser extends User {}
```

```
  class User {
    constructor() {}

someFunction() {}
  }

class SuperUser extends User {
    constructor() {
      super();
    }

someFunction() {
      super.someFunction();
    }
  }
```

???
  super metoder

---
class: cols two

#Oppgaver

Få testene til å kjøre

* http://tddbin.com/#?kata=es6/language/class/creation
* http://tddbin.com/#?kata=es6/language/class/more-extends
* http://tddbin.com/#?kata=es6/language/class/accessors

---
class: middle center

# Promise

---
exclude: true
class: middle

<blockquote style='font-size: 2em'>
    The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future.
  </blockquote>

---

# Promise

```
  noeAsync(() => {
    // Gjør noe gøy
  });
```
???
  klassisk metode med callback
--

```
  noeAsync(() => {
    noeAnnetAsync(() => {
      noeTredjeAsync(() => {
        noeFjerdeAsync(() => {
          // Gjør noe gøy
        });
      });
    })
  })
```
???
  Kan fort bli stygt med callback i parallel
---

# Promise

```
  noeAsync().then(() => {
    // alt gikk bra
  }).catch(() => {
    // noe gikk feil
  });
```
--

```
  noeAsync().then(() =>{
    // alt gikk bra
  }, () =>{
    // noe gikk feil
  });
```

???
  Ikke anbefalt syntax, hvis noe feiler i den første funksjonen vil ikke den andre bli kalt

```
  noeAsync()
    .then(noeAnnetAsync)
    .then(noeTredjeAsync)
    .then(noeFjerdeAsync)
    .catch(taIMotFeilen);
```

---

# Promise

```
  new Promise((resolve, reject) => {
    // Gjør noe spennende.
    // kall resolve hvis alt gikk bra
    // kall rejecte hvis noe feilet
  });
 ```

---

# Promise

```
  function hentTall() {
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        var tall = Math.random()
        tall > 0.5 ? resolve(tall) : reject(tall);
      }, 1000);
    });
  }
```

Hent et tilfelldig tall om 1. sekund, reject om det er under 0,5

```
  hentTall().then(tall => {
    // over 0.5
  }).cache(tall => {
    // under 0.5
  });
```

---
exclude: true
# Promise

```
  new Promise((resolve, reject) => {
    setTimeout(resolve, 2000);
  })
  .then(
    () => {throw 'up'},
    error => console.log('then', error)
  )
  .catch(
    error => console.log('catch', error)
  );
```

--
exclude: true

```
  // catch up
```

---
exclude: true

# Promise

```
  new Promise((resolve, reject) => {
    setTimeout(resolve, 2000);
  })
  .then(
    () => {throw 'up'},
    error => console.log('then', error)
  )
  .catch(
    error => {
      console.log('catch', error);
      throw 'again???';
    }
  );
```

--
exclude: true

```
  // catch up
```

---

# Promise

```
  var jsonPromise = new Promise((resolve, reject) => {
    $.getJSON('some/endpoint').then(resolve, reject);
  });
```

???
  konverter jquery deferred (eller andre implementasjoner) til es6 promises
---
# Oppgaver

Få testene til å kjøre

* http://tddbin.com/#?kata=es6/language/promise/basics
* http://tddbin.com/#?kata=es6/language/promise/creation
* http://tddbin.com/#?kata=es6/language/promise/chaining-then (hvis tid)
* http://tddbin.com/#?kata=es6/language/promise/api (hvis tid)

---
class: center middle
# fetch

---
# fetch

```javascript
  var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        var data = JSON.parse(httpRequest.responseText);
        console.log(data);
      } else {
        console.log('There was a problem with the request.');
      }
    }
  }

httpRequest.open('GET', 'http://localhost:5000/sok?tag=bekk'); // Setter opp request
  httpRequest.send(); // Sender request
```

---
# fetch

```javascript
  fetch('http://localhost:5000/sok?tag=bekk')
```
---
# fetch

```javascript
  fetch('http://localhost:5000/sok?tag=bekk').then(function(response) {
    // her kan du gjøre noe med responsen
  });
```
---
# fetch

--
## JSON

```javascript
  fetch('http://localhost:5000/sok?tag=bekk').then(function(response) {
    return response.json();
  });
```

--
## Text

```javascript
  fetch('http://localhost:5000/sok?tag=bekk').then(function(response) {
    return response.text();
  });
```

--
## Blob
```javascript
  fetch('http://localhost:5000/sok?tag=bekk').then(function(response) {
    return response.blob();
  });
```

---
# fetch

```javascript
  fetch('http://localhost:5000/sok?tag=bekk').then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data);
  });
```
--

```
  [{
    "url":"https://flickr.com/bilde1.jpg",
    "title":"Fint bilde av en bekker"
  },{
    "url":"https://flickr.com/bilde2.jpg",
    "title":"Ikke fullt så fint bilde av en bekker"
  },{
    "url":"https://flickr.com/bilde3.jpg",
    "title":"Rart bilde av en bekk"
  },{
    ...
  }]
```
---
# fetch

```javascript
  fetch('http://localhost:5000/sok?tag=bekk').then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data);
  }).catch(function(error) {
    throw error;
  });
```
--
The Promise returned from fetch() won't reject on HTTP error status even if the response is a HTTP 404 or 500. Instead, it will resolve normally, and it will only reject on network failure, or if anything prevented the request from completing.

---
# fetch

```javascript
  function checkStatus(response) {
    if (response.status >= 200 && response.status < 300) {
      return response;
    } else {
      var error = new Error(response.statusText);
      error.response = response;
      throw error;
    }
  }
```

```javascript
  fetch('http://localhost:5000/sok?tag=bekk')
    .then(checkStatus)
    .then(response => response.json())
    .then(data => console.log(data));
    .catch(error => throw error);
```

---
# fetch

```javascript
  fetch('http://localhost:5000', {
    method: 'post'
  });
```
.source[https://github.com/github/fetch]
---
# fetch

```javascript
  fetch('http://localhost:5000', {
    method: 'post',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'Hubot',
      login: 'hubot'
    })
  })
```

---
# Oppgaver

Få testene til å kjøre

* http://jsbin.com/xiteyu/3/edit?js,console
---
# Hva med litt mer?

* http://es6katas.org
* https://github.com/bekk/webutvikling101
* https://github.com/bekk/funksjonell-frontend

---
id:balle
class: split center middle
# Takk for i dag!