Events & Scope

Funktioner

En funktion är ett block av kod som du kan återanvända. Du kapslar in och grupperar kod så du kan kalla på den när du behöver den.

function add(a,b){
  return a + b;
}

När vi använder return måste vi alltid spara värdet som returneras

const result = add(5,5);

Samma med funktionerna vi använde igår

const div = document.getElementById('byId');

Vi kan bara returnera 1 sak från en funktion

Det finns dock två sätt att skriva funktioner

Function declaration

function add(a,b){
  return a + b;
}

Function expression

const add = function(){
  return a + b;
}

De gör samma sak, den ena är dock en anonym funktion sparad i en variabel

Hoisting

Alla variabler och function declarations "skjuts upp" lägnst upp i scopet oavsett var de är skapade

Scope kan vara antingen Global eller function scope, global är i hela dokumentet medan function scope är inuti en funktion

Skillnaden

Function declaration hoistas

function callMe(){
  //I get put at the top
}

Function expression hoistas INTE

const callMe = function(){
  // I stay where I am.

Events

<button id="button">click me </button>

const button = document.getElementById('button');

button.addEventListener('click', function(){
  // Do logic
})

const button = document.getElementById('button');

button.onclick = function(){
  // Do logic;
}

Denna funkar men jag råder er att inte använda den

<button onclick="callMe()">Click me</button>

JS i JavaScript-filen, HTML i HTML-filen, CSS i CSS-filen

Vi kan binda events till samtliga element

Samt lyssna på väldigt många events

• change
• keyup
• keydown
• blur

• onmouseover
• onmouseout

Ska du köra JavaScript när du hovrar OK, ska du styla, använd :hover i CSS

Det som skrivs innanför den anonyma funktioner är det som kommer att köras varje gång du klickar på knappen.

Första steget: console.log och se om du klickar på rätt element eller om klickfunktionen fungerar

const button = document.getElementById('button');
button.addEventListener('click', function(){
  console.log("It's working! It's working!");
})

Om vi har 5 st paragrafer, hur vet vi vilken vi har klickat på?

index kan användas men är riskabelt, saker kan flyttas runt och få ett annat index

listItem.addEventListener('click', function(){
  console.log(this);
})

this pekar på exakt det elementet vi har klickat på, förutsätt att en eventlistener ligger på elementet

<button style="color: pink;" id="myButton">Click me</button>

const button = document.getElementById('myButton');
button.addEventListener('click', function(){
  console.log(this.id);
  console.log(this.style);
})

Context

this syftar på kontexten

Vi har 5 olika element av samma typ, eller så har vi 5 olika objekt, varje nytt element eller objekt har ett nytt this

Varning: this kan ändras