Programmering i App Lab Modul 6 af 10 · Blokoversigt · Tastatur

Modul 6

For-løkker

I modul 5 bladrede du gennem listen ét klik ad gangen. Nu skal computeren gøre det hele på én gang.

Det skal du bygge

En knap, der viser alle elementer fra en liste på én gang, samlet i én label. Hele listen på ét klik.

Vis alle byer Aarhus
Odense
Aalborg
Esbjerg
Randers

Blokkene du skal bruge

for (var i = 0; i < 4; i++) {
Hedder for loop · Control (blå) Gentager det, der ligger inde i den, et bestemt antal gange. Blokken kommer med 0, 4 og i udfyldt på forhånd. Du retter bare i tallene.

Den eneste nye blok i dette modul. Resten kender du.

Værktøjskasse → Control → for (var i = 0; i < 4; i++) {
For-løkken ligger øverst i Control.

Byg det

  1. Design

    En Button med id visKnap og en Label med id listen. Gør labelen høj, så der er plads til flere linjer.

  2. Opret listen og en tom opsamler

    alleByer starter som tom tekst. Den skal vokse undervejs.

    var byer = ["Aarhus", "Odense", "Aalborg", "Esbjerg", "Randers"]; var alleByer = "";

  3. Læg for-løkken ind i en onEvent

    Træk for (var i = 0; i < 4; i++) { ind. Den kommer med i < 4. Ret 4 til byer.length, så løkken passer til listen, uanset hvor lang den er.

    onEvent(@"visKnap", @"click", function() { for (var i = 0; i < byer.length; i++) { } });

  4. Læg én by til opsamleren for hver runde

    "\n" er tegnet for linjeskift. Det er to tegn på tastaturet, men ét usynligt tegn i teksten.

    Linjen her har tre tegn, der ikke står på nogen tast. På en dansk Mac: ⌥8 giver [, ⌥9 giver ], og ⇧⌥7 giver \. Resten står på tastatursiden.

    Beslut dig, før du går i gang med hullet: enten taster du hele linjen, eller også trækker du alle brikkerne ind. Begynder du at taste og henter så list[0] fra værktøjskassen, fordi du ikke kan finde [, så lander blokken oven i hullet og sletter alt det, du havde skrevet.

    onEvent(@"visKnap", @"click", function() { for (var i = 0; i < byer.length; i++) { alleByer = alleByer + byer[i] + "\n"; } });

    byer[i] er samme blok som i modul 5, men nu er indekset løkkens egen tæller.

  5. Vis resultatet, efter løkken

    setText skal ligge uden for den blå løkke, men stadig inde i onEvent. Ellers opdateres labelen fem gange i træk uden grund.

    onEvent(@"visKnap", @"click", function() { for (var i = 0; i < byer.length; i++) { alleByer = alleByer + byer[i] + "\n"; } setText(@"listen", alleByer); });

    Kør. Alle fem byer står der. Klik igen, og nu står de der to gange. Det retter vi i næste trin.

  6. Tøm opsamleren ved hvert klik

    Flyt nulstillingen ind i onEvent, øverst, før løkken.

    onEvent(@"visKnap", @"click", function() { alleByer = ""; for (var i = 0; i < byer.length; i++) { alleByer = alleByer + byer[i] + "\n"; } setText(@"listen", alleByer); });

Hvorfor virker det

En løkke kører det samme stykke kode igen og igen. En for-løkke bruges, når du på forhånd ved, hvor mange gange.

De tre dele i hovedet på blokken

Der står tre ting adskilt af semikolon:

for (var i = 0; i < 5; i++) { setText(@"label1", "Runde " + i); }
var i = 0 er starten. Opret en tæller og sæt den til 0. Sker én gang.
i < 5 er betingelsen. Løkken kører, så længe den er sand. Tjekkes før hver runde.
i++ er trinnet. Læg 1 til tælleren. Sker efter hver runde. i++ er en kort måde at skrive i = i + 1.

Løkken ovenfor kører med i lig 0, 1, 2, 3 og 4. Fem gange. Ved 5 er betingelsen ikke sand længere, og løkken stopper. Den kører aldrig med i lig 5.

Løkker og lister passer sammen

Lister tæller fra 0, og for-løkker starter ved 0. Derfor passer de præcis sammen.

Skriver du i < byer.length i stedet for et fast tal, passer løkken automatisk, hvis du senere tilføjer flere byer.

Opsamlere

Variablen alleByer er en opsamler: den starter tom og bliver lidt større for hver runde. Samme mønster bruges til at lægge tal sammen:

var sum = 0; for (var i = 1; i <= 10; i++) { sum = sum + i; } setText(@"svaret", "Summen er " + sum);
Summen af tallene 1 til 10. Her starter i ved 1 og betingelsen bruger <=, fordi vi vil have 10 med.

Opsamleren skal oprettes uden for løkken. Lå var sum = 0 inde i løkken, ville den blive nulstillet ved hver runde, og resultatet ville altid være det sidste tal. Samme regel som med variablen i modul 2, bare et niveau ned.

Prøv selv

Opgave

Multiplikationstabel

  1. Et Text Input, hvor brugeren taster et tal, en knap og en høj label.
  2. Hent tallet med getNumber.
  3. Kør en løkke fra 1 til 10, og byg en linje per runde, fx 7 × 3 = 21.
  4. Vis hele tabellen i labelen.

Udfordring

Tæl, hvor mange af tallene i en liste der er over 50. Du skal bruge en for-løkke og en if-blok inde i den, altså en blå blok inde i en blå blok. Kig efter de to blå skinner i venstre side.

Til eksamen

  1. Hvad en løkke er, og hvorfor den sparer kode.
  2. De tre dele af en for-løkke: start, betingelse og trin.
  3. Hvorfor i < liste.length er bedre end et fast tal.
  4. Hvad en opsamler er, og hvorfor den skal oprettes uden for løkken.

Byggeklods: gennemgå en hel liste

var minListe = ["et", "to", "tre"]; onEvent(@"minKnap", @"click", function() { var samlet = ""; for (var i = 0; i < minListe.length; i++) { samlet = samlet + minListe[i] + "\n"; } setText(@"minLabel", samlet); });