Laboration 2 d - Webbteknik 2

I den här laborationen kommer du att få:

skapa och anropa dina egna funktioner
lära dig hur de kan ta emot argument och returnera resultat
och se hur funktioner används för att bygga interaktiva sidor

En funktion är som ett litet verktyg som du bygger själv: du ger den ett namn, bestämmer vad den ska göra, och kan använda den när du vill - hur många gånger du vill.

Funktioner hjälper oss att organisera koden och göra den mer läsbar. Ibland är de också nödvändiga, exempelvis när vi definierar händelsehanterare för interaktiva element på en webbsida. Det enda sättet att få koden att köras när användaren klickar på en knapp är att definiera en funktion som körs vid klicket.

I javascript är funktioner dessutom “förstaklassens medborgare”. Det betyder att de kan behandlas som vilka värden som helst - de kan sparas i variabler, skickas som argument till andra funktioner eller till och med skapas “på plats” precis när de behövs. Det här är en av de egenskaper som gör javascript så flexibelt och kraftfullt.

0 - Skapa en arbetsmapp

Innan du börjar, skapa en ny labb-mapp som du kan kalla lab-2d där du sparar filerna för just den här laborationen.

1 - Förbered filerna

Skapa en fil index.html med innehållet nedan och en tom script.js och öppna sedan sidan med Live Server:

<!DOCTYPE html>
<html>
  <head>
    <title>Funktioner</title>
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <h1>Funktioner</h1>
    <p>Öppna webbläsarens konsol (F12 → Console)</p>
  </body>
</html>

2 - En första funktion

När din kod växer kan det vara bra att kunna återanvända delar av den. Istället för att skriva samma kod flera gånger, kan du lägga den i en funktion. Om du kan ge funktionen ett beskrivande namn, blir det också lättare att förstå vad koden gör.

// Definierar en funktion med namnet greet
function greet() {
  console.log("Hello there!");
}

// Anropar funktionen
greet();

Testa: Lägg till fler anrop till greet på nya rader. Vad händer i konsolen?

3 - Funktioner med argument

Vi kan skicka in data till en funktion med hjälp av argument (ibland även kallade parametrar). Argumenten kan heta vad som helst och fungerar som vanliga variabler inuti funktionen. Lägg till följande kod i script.js:

// Definierar en funktion som tar ett argument "name"
function greetPerson(name) {
  console.log("Hello, " + name + "!");
}

greetPerson("Sven");
greetPerson("Gunilla");

Testa:

Vad händer om du anropar greetPerson() utan något argument?
Kan du lägga in en standardhälsning om inget namn anges?
- Tips: Använd en if-sats inuti funktionen (se föregående labb om villkorssatser om du behöver hjälp).

I detta exemplet skickade vi bara ett argument, men en funktion kan ta godtyckligt många argument, det är helt upp till oss som skriver koden.

4 - Funktioner som returnerar ett värde

Istället för att bara skriva ut resultatet direkt kan en funktion returnera det, så att du kan använda det vidare i programmet.

// Definierar en funktion som tar två argument och returnerar deras produkt
function multiply(a, b) {
  return a * b;
}

// Anropar funktionen och sparar returvärdet i en variabel
let result = multiply(4, 5);
console.log("Resultatet blev:", result);

Värdet av själva funktionsanropet sätts alltså till det som returneras av funktionen. Därför kan vi direkt använda funktionsanropet i andra uttryck, som i följande exempel. Kopiera in och lägg till detta i script.js om du vill testa:

let sum = 5 + multiply(6, 7);
console.log("Summan blev:", sum);

5 - En praktisk funktion

En vanlig användning av funktioner är att paketera logik - t.ex. ett tärningskast. Vi har ju experimenterat med tärningskast i tidigare laborationer. Nu kan vi skapa en funktion som paketerar den logiken åt oss, och ge den ett beskrivande namn. Lägg till följande i script.js:

function rollDice() {
  let randomNumber = Math.floor(Math.random() * 6) + 1;
  return randomNumber;
}

Nu kan vi använda rollDice() för att få ett slumpat tärningskast när vi vill. Testa att lägga till följande kod i script.js:

let dice1 = rollDice();
let dice2 = rollDice();
console.log("Du kastade:", dice1, "och", dice2);
console.log("Summan av tärningarna är:", dice1 + dice2);

6 - Funktioner som värden

I JavaScript kan funktioner behandlas som vilka värden som helst.
Du kan spara en funktion i en variabel, skicka den som argument till en annan funktion — eller till och med returnera den från en annan funktion.

Följande exempel visar hur vi kan spara en funktion i en variabel och sedan anropa den via variabelnamnet. Detta är helt likvärdigt med att definiera funktionen med function-nyckelordet som vi gjort tidigare.

Försäkra dig själv om att det fungerar genom att lägga till detta i script.js:

const sayHi = function() {
  console.log("Hi there. This function is defined using regular assignment!");
};

sayHi(); // anrop

Vidare kan vi skicka funktioner som argument till andra funktioner, precis som vilka andra värden som helst. Detta har vi redan sett exempel på många gånger tidigare när vi använt addEventListener för att registrera händelsehanterare.

Börja med att lägga in en knapp i html-filen:

<button id="helloButton">Click me</button>

Lägg sedan följande i script.js för att registrera en händelsehanterare som anropar en funktion när knappen klickas:

const button = document.getElementById("helloButton");
function handleClick() {
  button.textContent = "I've been clicked!";
}

button.addEventListener("click", handleClick);

Observera: Vi behöver inte definiera funktionen med syntaxen för att tilldela en variabel för att kunna använda den som ett värde. Alla funktioner kan användas som värden oavsett hur de är definierade.

Bonusutmaningar

Skriv en funktion isBig(value) som returnerar true om värdet i argumentet är större än 4.
Kombinera funktionerna rollDice och isBig för att kasta en tärning och logga om resultatet är “stort” (större än 4) eller “litet”.

Reflektion

Varför är det användbart att dela upp kod funktioner?