Webutvikling 101

exclude:true
class: front-page
  # Webutvikling 101
  ## NTNU

<span class="today-date"></span>
---
exclude: true
class: front-page
  # Webutvikling 101
  ## UiO

<span class="today-date"></span>
---
class: front-page
  # Webutvikling 101
  ## UiT

<span class="today-date"></span>
---
#Webutvikling 101

##Repo
<div style="font-size: 2em">
  <a href="https://github.com/bekk/webutvikling101">http://tiny.cc/bekkweb101</a>
</div>
<br>
<br>
<div style="font-size: 2em">
  <a href="https://github.com/bekk/webutvikling101">github/bekk/webutvikling101</a>
</div>

---
class: middle center

![HTML](resources/html.jpg)

---

![](resources/css-gangnam.jpg)

---

![](resources/javascript.png)

---

![](resources/browser-layered-cake.jpeg)

---
exclude:true
class: fullscreen

![](resources/abakus.png)

---
exclude: true
class: fullscreen

![](resources/uio.png)

---
class: fullscreen

![](resources/uit.png)

---
exclude:true
class: fullscreen

![](resources/abakus-html.png)

---
exclude: true
class: fullscreen

![](resources/uio-html.png)

---
class: fullscreen

![](resources/uit-html.png)

---
exclude:true
class: fullscreen

![](resources/abakus-uten-css.png)

---
exclude: true
class: fullscreen

![](resources/uio-uten-css.png)

---
class: fullscreen

![](resources/uit-uten-css.png)

---
exclude:true
class: fullscreen

---
exclude: true
class: fullscreen

---
class: fullscreen

---
class: center middle
<img src="resources/apple-pages.png"/>
.source[https://www.icloud.com/#pages]
---
class: center middle
<img src="resources/google-maps.png"/>
.source[https://maps.google.com/]
---
class: center middle
<img src="resources/spotify.png"/>
.source[https://play.spotify.com/]
---

#HTML

## HyperText Markup Language

---
#HTML

```html
  <tag />

<tag>Innhold</tag>
```

???

Hovedregel er at alle tagger trenger åpne / lukke<br>
Kun elementer som ikke **kan** ha innhold avsluttes dirrekte

```html
  <tag attributt="verdi">Innhold</tag>
```

```html
  <tag>
    <tag></tag>
    <tag></tag>
    <tag>
      <tag></tag>
      <tag></tag>
    </tag>
  </tag>
```

---
.source[https://developer.mozilla.org/en/docs/Web/HTML/Element]

# HTML

## Semantiske
```html
  <header></header>
  <nav></nav>
  <main></main>
  <footer></footer>

<h1></h1>
  <p></p>
  <a></a>
  <button></button>
```

## Ikke-Semantiske
```html
  <div></div>
  <span></span>
```

---
# HTML

```html
  <div id="unik-id"></div>

<div title="Tittle på element"></div>
```

```html
  <a href="side2.html"></a>

<input type="checkbox" />
```

---

```html
  <!doctype html>
  <html lang="en">

<head>
      <title>En enkel HTML-side</title>
    </head>

<body>
      <header>
        <h1>Velkommen</h1>
        <nav>
          <a href="side2.html">Side2</a>
        </nav>
      </header>
      <main>
        <article>En artikkel</article>
      </main>
      <footer>The end</footer>
    </body>

</html>
```

---
class: center middle

# DevTool

## ⌘ + ⌥ + i  /  ctrl + ⇧ + i
???
vis at man kan kjøre en fil i chorme
vis hvordan devtools fungerer

---
class: split

# Oppgave

* Ta utgangspunkt i filen: `del1/assignment/teller.html`
* Bruk html-elementene `<button>` og `<output>` for å lage layouten til høyre

---
class: center middle

#JavaScript

---

#JavaScript

```javascript
  console.log('Hello world!'); // Hello world!
```

```javascript
  var num = 1;
  var str = 'Bekk';
  var arr = [1, 2, 3, 4, 5];
  var obj = {
    key:  'value',
    key2: 'value2'
  };
```
--

```javascript
  function hello(name) {
    return `Hello, ${name}!`;
  }

var hello = function(name) {
    return `Hello, ${name}!`;
  }

hello('Bob'); // Hello, Bob!
```
---

# JavaScript casting

```javascript
  var n = 1;
  typeof n; // number
```

```javascript
  var n = '1';
  typeof n; // string
```

```javascript
  var n = 1;
  typeof String(n); // string
```

```javascript
  var n = '1';
  typeof Number(n); // number
```

---

# JavaScript funksjoner

```javascript
  var someFunction = function() {
    // gjør noe gøy
  };
```
--
```javascript
  someFunction(name);
```
--
```javascript
  someOtherFunction(function() {
    // gjør noe gøy
  });
```

---

# JavaScript funksjoner

```javascript
  var name = 'kent';

var someFunction = function() {
    console.log(name);
  };
```
--
```
  // kent
```

---
# JavaScript i nettleseren
```html
  <!doctype html>
  <html lang="en">

<head>
      <title>En enkel HTML-side</title>
    </head>

<body>
      <h1>Her er min fantastisk enkle HTML-side</h1>

</html>
```

???
Forklar når scriptet blir kjørt

---

# JavaScript DOM-api

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

```javascript
  var boks = document.querySelector('#boks');
  boks.innerHTML;
  // <a href="mer.html">Klikk her</a> for å lære mer
```
--

```javascript
  var boks = document.querySelector('#boks');
  boks.textContent;
  // Klikk her for å lære mer
```

```javascript
  var text = document.querySelector('#boks').textContent;
  // Klikk her for å lære mer
```

---
# JavaScript DOM-api

```javascript
  document.querySelector('#boks').addEventListener('click', function() {
    // Gjør noe gøy når boks har blitt trykket på!
  });
```

---
# JavaScript DOM-api

```javascript
  document.querySelector('#danse-ape').addEventListener('click', function() {
    var el = document.querySelector('#danse-ape');
    var src = el.getAttribute('src').replace('.png', '.gif');
    el.setAttribute('src', src);
  });
```

???
Nevn at vi gjør to oppslag, og at vi skal lære senere hvor unngå det

---

![](resources/mozilla-developer-network.png)
.source[https://developer.mozilla.org]

---

![](resources/mozilla-developer-network-result.png)
.source[https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove]

---

![](resources/remove-element-search.png)

---

![](resources/remove-element-result.png)

---
class: middle center

# DevTool

## ⌘ + ⌥ + i  /  ctrl + ⇧ + i

???
Vis frem chaining av opperasjoner
.replace(/\s+/g, ' '); for å strippe whitespace

---
class: split

#Oppgave

* Forsett på løsningen fra forrige oppgave
* Legg til en unik id på `output` og `button` elementene
* Legg til click event handler som legger til 1 på tallet i `output` når man trykker på + knappen
* Legg til click event handler som trekker fra 1 på tallet i `output` når man trykker på - knappen

---

# CSS
## Cascading Style Sheets

???

Cascading Style Sheets, eller CSS, tar seg av stylingen av HTMLen.

---

# CSS

```css
  selector {
    property: value;
    property: value;
  }
```

???

Det gjøres ved hjelp av et sett med regler for hvordan ting skal styles.

En slik regel har en selector, som sier HVA det er som skal styles, og så inni krøllparanteser en liste over hvordan man ønsker det skal styles. Denne listen består da av egenskaper og deres verdier. Separert med semikolon.

```css
  div {
    background: white;
    font-size: 32px;
    color: red;
  }
```
```html
<div>Hei på deg</div>
```

???

I dette eksempelet sier selectoren at disse egenskapene skal gjelde for alle diver i html-dokumentet. Og egenskapene sier da at disse divene skal ha hvit bakgrunn og stor, rød tekst.

Med HTMLen under, vil det bli seendes slik ut

---

#CSS - Hvordan?

Søketips:
`<det du vil style> + css + mdn`

```css
selector {
  background: #ff0000;
  color: red;
  border-color: rgba(255, 0, 0, 0.3);

width: 200px;
  width: 50%;
  width: 20rem;
  width: 25vw;

margin: 5px;
  padding: 10px;
  opacity: 0.5;

border-width: 1px;
  border-style: solid;
  border-color: blue;
  border: 1px solid blue;
}
```

???

søke etter "bold text css mdn"

Her er et knippe eksempler. Som vist på toppen finnes det flere måter å definere farger på. Tre er vist her, en hexcode, navn eller rgba med gjennomsiktighet.

Av lengder finnes det også flere enheter.

* Piksler er rett frem.
* rem, r=relative til en størrelse man definerer selv. Responsiv
* %, i forhold til parent container ved bredde
* vw

Mange egenskaper gjelder 4 sider, sånn som margin og border, men kan også definere per side.

Shorthand syntax

---

#CSS - Hva?

##Tag-selector

```css
body {
  background: red;
}

button {
  color: blue;
}
```
```html
<body>
  Rød bakgrunn på hele siden.
  <button>Jeg har blå tekst</button>
  <button>Jeg har også blå tekst</button>
</body>
```

???

Så, selektorer. Hvordan velge hva som skal styles? Viste nylig et eksempel på hvordan man stylet alle divs på en side, og det var en såkalt tag-selector.

En tag-selector er rett og slett bare navnet på en html-tag, og stylingen vil da gjelder for alle html-tags av den typen.

I eksempelet her selecter vi på html-taggene body og button, og sier hvordan disse skal se ut.

---

#CSS - Hva?

##Klasse-selector

```css
.btn-danger {
  background: red;
}

.btn-ok {
  background: green;
}
```
```html
<button class="btn-danger">Slett!</button>
<button class="btn-ok">Lagre!</button>
```

???

Ønsker jo ikke alltid at alle knapper skal se like ut. F. eks vil man kanskje at en slett-knapp skal være litt skummel å trykke på. Da kan man lage en klasse-selector.

Istedet for å skrive

De begynner med punktum, og så spesifiserer man i htmlen at man ønsker at dette elementet skal bruke stylingen fra denne klassen.

---

#CSS - Hva?

##Id-selector

```css
#unikid {
  color: #ff00ff;
}
```
```html
<div id="unikid"> ... </div>
```

???

Steg 2 er å fortelle nettleseren hva det er som skal styles. Det gjør man ved å skrive en selektor som "treffer" det man ønsker å style. Det kan enten være noe som treffer alle html-tager av en type, f. Eks. Body-tagen eller alle knapper.

Eller så kan man style ting mer spesifikt, ved å lage såkalte klasser, som man så kan bruke i htmlen. En selector for en klasse lager man ved å sette et punktum foran.

Tredje måten er å selecte ETT spesifikt html-element med en gitt id, ved å bruke firkanttegn. En slik css-regel blir ikke veldig gjenbrukbar. I praksis styler man ofte tags på en generell måte, og så lager man klasser med mer spesifikke regler.

<!--

#CSS - HVA?

##Avanserte selectorer

```html
.klasse1 .klasse2 { ... } /* alle av type klasse2 som ligger inni klasse1  */

<div class="klasse1">
  <span class="klasse2">meg</span>
</div>
<span class="klasse2">ikke meg</span>
```

```html
.klasse1.klasse2 { ... } /* element som har begge klassene */

<div class="klasse1 klasse2">meg</div>
```

```html
button.klasse1 { ... } /* alle knapper som har klasse 1 */

<button class="klasse1">meg</button>
<a class="klasse1">Ikke meg</a>
```

???

Disse kan også kombineres for å selecte enda mer spesifikke ting...

-->
---

# CSS - Hvor?

I HTML-fila:

```html
<head>
  
  <link href="style.css" type="text/css" rel="stylesheet">
  
</head>
```

En fil med navn `style.css`:

```css
body {
  background: red;
}
```

???

For at nettleseren skal kunne bruke css-reglene man har skrevet, må man fortelle den for disse reglene finnes. Det gjøres ved at man i head-delen av html-fila peker til hvor css-filen finnes.

Når nettsiden lastet vil så nettleseren søke opp filen det pekes til, og utføre all styling på html-dokumentet.

---

#Devtools

## ⌘ + ⌥ + i  /  ctrl + ⇧ + i

???

* Hvordan se på css
* Kjapt teste redigering av css property

---

#Oppgave

* Lag en css-fil og link til den i HTML-fila
* Sett en bakgrunnsfarge på nettsiden
* Endre font, farge og skriftstørrelse på teller-verdien
* Endre størrelse, bakgrunnsfarge, border/ramme og tekstfarge på knappene

???

Avhenger av hvordan oppgaven blir splittet opp

---

#Layout
## med CSS

---

#Box sizing

```css
.min-boks {
  width: 300px;
  height: 100px;
  padding: 0px;
  border: 0px solid #FD5158;
  margin: 0px;
}
```

<div style="width: 300px; height: 100px;
  padding: 0px;
  background: black;
  border: 0px solid #FD5158;">Lorem ipsum</div>

---

#Box sizing

```css
.min-boks {
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 0px solid #FD5158;
  margin: 0px;
}
```

<div style="width: 300px;  height: 100px;
  padding: 20px;
  background: black;
  border: 0px solid #FD5158;">Lorem ipsum</div>

---

#Box sizing

```css
.min-boks {
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 15px solid #FD5158;
  margin: 0px;
}
```

<div style="width: 300px; height: 100px;
  padding: 20px;
  background: black;
  border: 15px solid #FD5158;">Lorem ipsum</div>
---

#Box sizing

```css
.min-boks {
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 15px solid #FD5158;
  margin: 0px;
}
```

<div style="width: 300px; height: 100px;
  padding: 20px;
  background: black;
  border: 15px solid #FD5158; display: inline-block;">Lorem ipsum</div><div style="width: 300px; height: 100px;
  padding: 20px;
  background: black;
  border: 15px solid #FD5158; display: inline-block;">Lorem ipsum</div>

---

#Box sizing

```css
.min-boks {
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 15px solid #FD5158;
  margin: 30px;
}
```

<div style="width: 300px; height: 100px;
  padding: 20px;
  background: black;
  border: 15px solid #FD5158; display: inline-block; margin: 20px;">Lorem ipsum</div><div style="width: 300px; height: 100px;
  padding: 20px;
  background: black;
  border: 15px solid #FD5158; display: inline-block; margin: 20px;">Lorem ipsum</div>

---
exclude:true
#Box sizing: border-box

```css
div {
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  padding: 0px;
  border: 0px solid #FD5158;
}
```
<div style="box-sizing:border-box; width: 300px; height: 100px;
  padding: 0px;
  background: black;
  border: 0px solid #FD5158;">Lorem ipsum</div>

---

exclude:true
#Box sizing: border-box

```css
div {
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 0px solid #FD5158;
}
```
<div style="box-sizing:border-box; width: 300px; height: 100px;
  padding: 20px;
  background: black;
  border: 0px solid #FD5158;">Lorem ipsum</div>

---
exclude:true
#Box sizing: border-box

```css
div {
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 15px solid #FD5158;
}
```
<div style="box-sizing:border-box; width: 300px; height: 100px;
  padding: 20px;
  background: black;
  border: 15px solid #FD5158;">Lorem ipsum</div>

--
exclude:true

<div style="width: 300px; height: 100px;
  padding: 20px;
  background: black;
  border: 15px solid #FD5158;">Lorem ipsum</div>

---

#Box model

```css
.min-boks {
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 15px solid #FD5158;
  margin: 30px;
}
```

<div style="width: 300px; height: 100px;
  padding: 20px;
  background: black;
  border: 15px solid #FD5158; display: inline-block; margin: 20px;">Lorem ipsum</div>

???

Pakke-metafor.

---

#Flyt

```html
<div>
  <h1>Overskrift</h1> 
  <p>Litt tekst</p> 
  <button>En knapp</button> 
  <button>Enda en knapp</button>
  <a href="#">Lenke</a> 
  <div>mer tekst</div> 
</div>
```

```css
h1 { display: block; }
```

<div style="background-color: #1a1a1a; font-size: 25px;">
  <h1 style="margin-bottom: 5px;">Overskrift</h1>
  <p>Litt tekst</p>
  <button style="padding: 15px; font-size: 25px;">En knapp</button>
  <button style="padding: 15px; font-size: 25px;">Enda en knapp</button>
  <a href="#">Lenke</a>
  <div>mer tekst</div>
</div>

???

Her vises litt html-kode, og hvordan det blir seendes ut.
Som man kan se, vises det man har i html-en etterhverandre i den rekkefølge det er i i html-en.

Det man også kan se, er at det noen ganger havner under hverandre, og andre ganger ved siden av hverandre. Mange elementer kalles for blokk-elementer, og når nettleseren viser de vil de alltid havne på en egen linje. Når nettleseren derimot skal vise inline-elementer ser den om det er plass på samme linje, og om det er det puttes det der.

Blir jo ikke veldig spenstige design når alt bare kommer slik etter hverandre, så det skal vi gjøre noe med.

---

# Midtstilling

```html
<div class="midtstilt">Midtstilt?</div>
```
```css
.midtstilt { text-align: center; }
```
<div style="background: black; text-align: center;">Overskrift</div>

```html
<span class="midstilt">Midtstilt?</span>
```
```css
.midtstilt { text-align: center; }
```
<div>
<span style="background: black; text-align: center;">Overskrift</span>
</div>

---

# Midtstilling

```html
<div class="midtstilt-blokk">Midstilt blokk</div>
```
```css
.midtstilt-blokk {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
```
<div style="background: black; width: 400px; margin: 0 auto;">Midtstilt blokk</div>

---
class: split

# Grunnleggende Flexbox

```html
<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>
```

```css
.container {
}
```

---
class: split

# Grunnleggende Flexbox

```html
<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>
```

```css
.container {
  display: flex;
}
```

---
class: split

# Grunnleggende Flexbox

```html
<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>
```

```css
.container {
  display: flex;
  flex-wrap: wrap;
}
```

---
class: split

# Grunnleggende Flexbox

```html
<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>
```

```css
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
```

---

# Grunnleggende Flexbox

```html
<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>
```

```css
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
```

---

# Grunnleggende Flexbox

```html
<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>
```

```css
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row-reverse;
}
```

---

# Oppgave

* Ta utgangspunkt i `nedteller.html`-fila i `/assignment`-mappa.
* Gi `<main>`-elementet en bredde og midtstill det.
* Midtstill teksten til telleren
* Bruk flexbox på div-en med alle knappene (`.buttons`) for å få knappene til å ligge som vist til høyre
* Midtstill og style start-knappen

Farger:

* Gråfarge: `#262626`
* Rødfarge: `#fd5158`

???

trenger ikke få til samme størrelser og farger, men prøv å få til selve layouten

---

#Element State
## - hva er det?

---
class:
#Element state

* :active
* :checked
* :disabled
* :first
* :first-child
* :focus
* :hover
* :required
* :valid
* :visited

---

##Hva skal vi med det?

---

<button class="en-knapp">AVBRYT</button>

---
class: center middle

<button class="en-knapp">AVBRYT</button>
<button class="hvr-wobble-horizontal">AVBRYT</button>
<button class="hvr-wobble-vertical">AVBRYT</button>

---
class: center middle

<a href="http://ianlunn.github.io/Hover/">Hover-effekter</a>

---
class: center middle

##Focus

---
class: center middle
##Focus
<button class="en-knapp">AVBRYT</button>
<button class="hvr-wobble-horizontal">AVBRYT</button>
<button class="hvr-wobble-vertical">AVBRYT</button>

---
class: center middle
##Outline: 1px solid blue

---
class: middle center

## Hvordan brukes element state?

```css
    selector:pseudo-class {
        property: value;
    }
```
---
class: middle center

## Hvordan brukes element state?

```css
    button:hover {
        background-color: red;
    }
```

---
class: middle center

## Hvordan brukes element state?

```css
    button:focus {
        outline: 1px solid orange;
    }
```

---
class: middle center

## transition

```css
    div {
        transition: <property> <duration> <timing-function> <delay>;
    }
```
---
class: middle center

## transition

```css
    button {
        background-color: blue;
        width: 200px;
        transition: width 2s, background-color 2s, transform 2s;
    }

button:hover {
        background-color: red;
        width: 400px;
        transform: rotate(180deg);
    }

```

---
class: center middle

# DevTool

## ⌘ + ⌥ + i  /  ctrl + ⇧ + i

---
class: split
# Oppgave
## 1.Endre bakgrunnsfarge på knappene ved hover
## 2.Legg til fokusmarkering for tabbing
## 3. Endre musepeker til en hånd ved hover

---

# Interaksjon

---

#Events

## Recap:

```html
  <button role="button" id="btn">Element</button>
```

```javascript
  var button = document.querySelector('#btn');

button.addEventListener('click', function() {
    console.log('heia');
  });
```
---
# Events

```html
<div id="buttons">
  <button role="button" id="btn1">Element</button>
  <button role="button" id="btn2">Element</button>
  <button role="button" id="btn3">Element</button>
  <button role="button" id="btn4">Element</button>
</div>
```
--
##  Må vi legge til 4 individuelle listeners?

---
class: middle center

# Event Propagation

---
# Event Propagation

![](resources/events.jpg)

---
# Event Propagation

container.addEventListener('click', function() {
  console.log('heia');
});
```
---
# Event Propagation

## `event`-objektet

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

container.addEventListener('click', function(event) {
  var element = event.target;
  console.log(element.nodeName) //=>BUTTON
});
```
---
# Event Propagation

## `event`-objektet

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

container.addEventListener('click', function(event) {
  var element = event.target;
  if(element.nodeName === 'BUTTON') {
    doIncrement();
  } else {
    //do nothing
  }
});
```
--
Les mer om Event på Mozilla Developer Network:

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

# JavaScript-filer

---
# JavaScript-filer

## `fil.html`:
```html
<body>
  <script type="text/javascript">
    console.log('heia');
  </script>
</body>
```
---
# JavaScript-filer

## `fil.html`:
```html
<body>
  <script type="text/javascript" src="heia.js"></script>
</body>
```
## `heia.js`:
```js
console.log('heia');
```
---
class: split

# Oppgave

Dere skal gjøre nedtelleren interaktiv!

- Lag en ekstern JavaScript-fil som blir referert fra HTML
- Fang opp klikk-events på knappene
- Oppdatere konsollet på nedtelleren med tallet som ble klikket på

---
# Asynkronitet

JavaScript er et asynkront språk. Hva betyr det?
--
<br><br><br>
## Kode kan bli kjørt ved vilkårlige tidspunkt som reaksjoner på hendelser utenfor programmet ditt.
---
# Asynkronitet

Hva vil bli printet til konsollet?

```javascript
console.log('hello');

setTimeout(function() {
  console.log('asyncronous');
}, 100);

console.log('world!');
```
--
```javascript
hello
world
asyncronous
```
---

# Asynkronitet

Hva vil bli printet til konsollet?

```javascript
console.log('hello');

setTimeout(function() {
  console.log('asyncronous');
}, 0);

console.log('world!');
```
--
```javascript
hello
world
asyncronous
```

???

Hva er det egentlig som skjer her?

Når JavaScript-motoren tolker denne koden og kommer til setTimeout ser den at
her skal det registreres noe kode som skal kjøres senere. Motoren legger en
beskjed på "stacken" om at denne snutten med kode skal kjøres om 0ms.

Så beveger motoren seg videre, ser neste log-statement og logger det. Nå er
motoren ferdig med all koden i filen og den kikker på "stacken" sin og ser at
her ligger det noe kode som skulle kjøres om 0ms. Siden det har gått minst 0ms
siden kodesnutten ble lagt på stacken så er det OK å kjøre den koden.
---
# Asynkronitet

Hva vil bli printet til konsollet?

```javascript
setTimeout(function() {
  console.log('heia');
}, 100);

while(true) {
  //Do something
}
```
--
```
//Ingenting!
```
---
# Vil du vite mer?

---
# Funksjoner

```javascript
document.querySelector("#button").addEventListener(function () {
  console.log('hello');
});
```
--
```javascript
document.querySelector("#button").addEventListener(function sayHello() {
  console.log('hello');
});
```
--
```javascript
function sayHello() {
  console.log('hello');
}

document.querySelector("#button").addEventListener(sayHello);
```
---
# Kalle funksjoner

```javascript
function hello() {
  return 'Hello you!';
}

console.log(hello);
```
--
```javascript
function hello() {
  return 'Hello you!';
}
```
---
# Kalle funksjoner
```javascript
function hello() {
  return 'Hello you!';
}

console.log(hello());
```
--
```javascript
Hello you!
```
---
# Kalle funksjoner
```javascript
function sayHello() {
  console.log('Hello you!');
}

setTimeout(sayHello(), 1000);
```
--
```javascript
Hello you!
```
---
# Kalle funksjoner
```javascript
function sayHello() {
  console.log('Hello you!');
}

setTimeout(sayHello, 1000);
```
--
```javascript
//Etter 1s
Hello you!
```
---
# Kalle funksjoner
```javascript
function sayHello() {
  console.log('hello');
}
```
--
```javascript
document.querySelector("#button").addEventListener(sayHello);
```
```javascript
sayHello();
```
---

class: middle center
# Bonus: <span style="text-transform: none;">setInterval</span>
---
# <span style="text-transform: none;">setInterval</span>