Webbteknik 2

Många upplever att det är svårt att översätta sina tankar till kod. Det är helt naturligt! Programmering handlar inte bara om att skriva tecken, utan om att strukturera problem på ett sätt som en dator kan förstå.

Här är några övningar som inte kräver att du skriver massor av kod från grunden, utan istället fokuserar på förståelse och logik.

1 - Torrsimulering (Tracing)

Att kunna “köra koden i huvudet” (eller på papper) är en superkraft. Det kallas för torrsimulering eller tracing.

Uppgift: Titta på koden nedan. Försök att följa vad som händer rad för rad. Skriv ner värdet på variablerna a, b och output efter varje steg.

let a = 5;
let b = 2;
let output = 0;

if (a > b) {
  output = a + b;
  b = b + 1;
} else {
  output = a - b;
}

a = a + 1;

// Vad är värdet på a, b och output här?

2 - Algoritmer för beräkningar

Innan vi kodar måste vi veta vad vi ska göra. En algoritm är bara en instruktion i steg-för-steg.

Uppgift: Beskriv så exakt som möjligt hur man räknar ut medelvärdet av en lista med tal (t.ex. 10, 20, 30). Tänk på att du måste vara väldigt tydlig, datorn förstår bara väldigt konkreta instruktioner. (Medelvärdet är summan av alla talen dividerad med antalet tal).

Försök skriva ner stegen i punkter, använd underpunkter om du behöver bryta ner stegen ytterligare. Sikta på totalt 4-6 punkter.

1. …
2. …
   1. …
3. …

3 - Ordna koden

Här har du alla rader som behövs för att lösa problemet ovan, men de har hamnat i fel ordning! Din uppgift är att flytta runt raderna så att programmet fungerar.

Uppgift: Få ett fungerande program som beräknar medelvärdet av en lista med tal.

Rader att sortera:

let sum = 0;
console.log(average);
let average = sum / numbers.length;
let numbers = [10, 20, 30, 40];
}
sum = sum + number;
for (let number of numbers) {

let numbers = [10, 20, 30, 40];
let sum = 0;

for (let number of numbers) {
  sum = sum + number;
}

let average = sum / numbers.length;
console.log(average);

Uppgift 2: Skriv en funktion som kollar om ett tal större än 18.

Rader att sortera:

return false;
}
function isAdult(number) {
return true;
if (number > 18) {
} else {

function isAdult(number) {
  if (number > 18) {
    return true;
  } else {
    return false;
  }
}

4 - Utvärdering av uttryck

Ibland kan kodrader se komplicerade ut. Hemligheten är att bryta ner dem i mindre delar. Datorn gör precis samma sak!

Uppgift: Titta på följande kodrad: let lastElement = list[list.length - 1];

Försök att förstå i vilken ordning datorn utvärderar detta.

1. Vad händer först?
2. Vad händer sen?
3. Och sen?
4. Vad gör hela raden tillsammans? Hur skulle den fungera på en lista med 5 element? Med 2 element? Går det att säga något generellt?