Modul 7

While-løkker

Nogle gange ved man ikke på forhånd, hvor mange gange noget skal gentages.

Det skal du bygge

Gæt-et-tal. Appen tænker på et tal mellem 1 og 100, og brugeren gætter, til det er ramt. Undervejs siger appen for højt eller for lavt og tæller forsøgene.

Gæt et tal mellem 1 og 100 50 Gæt For højt. Prøv lavere. Forsøg: 3

Ingen ved på forhånd, hvor mange gange brugeren gætter. Det er den situation, while findes til.

Blokkene du skal bruge

while (__) {: Hedder While loop · Control (blå) Gentager, så længe betingelsen er sand. Uden et fast antal.
randomNumber(1, 10): Hedder randomNumber(min, max) · Math (orange) Giver et tilfældigt helt tal mellem de to, begge inklusive.
console.log("message"): Hedder console.log(message) · Variables (lilla) Skriver i konsollen nederst i App Lab, ikke i appen. God, når du skal finde ud af, hvad der egentlig sker.

Værktøjskasse → Control → while (__) {

While i teorien

Først et eksempel. Her lægges tal sammen, indtil summen når 100, og ingen har på forhånd regnet ud, hvor mange runder det tager.

var sum = 0; var tal = 1; while (sum < 100) { sum = sum + tal; tal = tal + 1; } setText(@"svaret", "Stoppede ved " + sum);

Betingelsen tjekkes før hver runde. Er den sand, køres indholdet, og ellers springer programmet ned under løkken og går videre. Er den falsk allerede første gang, kører løkken slet ikke.

Den uendelige løkke

En while-løkke har ingen indbygget tæller. Du skal selv sørge for, at der sker noget inde i løkken, som til sidst gør betingelsen falsk. Ellers kører den for evigt, og fanen fryser.

var i = 0; while (i < 10) { setText(@"label1", i); }

Forkert. i bliver aldrig større, så i < 10 er sand for evigt. Appen hænger.

var i = 0; while (i < 10) { setText(@"label1", i); i = i + 1; }

Rigtigt. Linjen i = i + 1 er det, der får løkken til at slutte.

Sker det for dig, så luk fanen og åbn projektet igen. App Lab gemmer løbende, så du mister ikke noget.

Byg det, men ikke med en while-løkke

Gæt-et-tal er den klassiske while-opgave i enhver lærebog. I App Lab kan du ikke løse den med en while-løkke.

Grunden er, at App Lab er eventbaseret, som du lærte i modul 1. Appen kører færdig og venter så på klik. En while-løkke, der venter på brugeren, ville låse appen fast, mens den ventede, og brugeren ville aldrig nå at trykke.

I stedet oversætter man while-logikken til en tilstandsvariabel: en Boolean, der husker, om spillet stadig er i gang. Betingelsen fra while flytter op i en if-blok øverst i onEvent.

Design

Et Text Input med id gætFelt, en Button med id gætKnap og en Label med id besked.
Opret spillets tilstand

Tre variabler øverst. spilSlut er tilstandsvariablen. Den svarer til while-betingelsen.

var hemmeligtTal = randomNumber(1, 100); var antalForsøg = 0; var spilSlut = false;
Stop hvis spillet er slut

Første linje inde i onEvent er en vagt: er spillet forbi, gør vi ingenting.

onEvent(@"gætKnap", @"click", function() { if (spilSlut == false) { } });

Det her er while-betingelsen, bare flyttet ind i en if.
Læs gættet og tæl forsøget

onEvent(@"gætKnap", @"click", function() { if (spilSlut == false) { var gæt = getNumber(@"gætFelt"); antalForsøg = antalForsøg + 1; } });
Sammenlign og svar

En if/else med tre grene. Brug plus-knappen nederst på blokken, som du lærte i modul 4.

onEvent(@"gætKnap", @"click", function() { if (spilSlut == false) { var gæt = getNumber(@"gætFelt"); antalForsøg = antalForsøg + 1; if (gæt > hemmeligtTal) { setText(@"besked", "For højt. Forsøg: " + antalForsøg); } else if (gæt < hemmeligtTal) { setText(@"besked", "For lavt. Forsøg: " + antalForsøg); } else { setText(@"besked", "Rigtigt! " + antalForsøg + " forsøg."); spilSlut = true; } } });

Linjen spilSlut = true afslutter spillet. Den svarer til i = i + 1 i while-løkken: den ene ting, der sørger for, at det hele ender.

Hvorfor virker det

De to måder er den samme logik:

Med while: "bliv ved, så længe spillet ikke er slut". Løkken kører igen og igen af sig selv.

Med tilstandsvariabel: "gør noget hvert klik, så længe spillet ikke er slut". Brugerens klik driver gentagelsen.

Begge steder har du en betingelse, der skal være sand, for at der sker noget, og noget indeni, der til sidst gør den falsk. Forskellen er, hvem der driver gentagelsen: computeren eller brugeren.

Hvornår bruger man så en rigtig while-løkke i App Lab? Når noget skal regnes færdigt, uden at brugeren blander sig, som i sum-eksemplet ovenfor. Skal brugeren indgå undervejs, bruger du en tilstandsvariabel.

Når du ikke kan se, hvad der sker

Løkker er svære at fejlfinde, fordi alt sker på én gang. Læg en console.log("message") ind i løkken og kør igen. Så kan du læse hver eneste runde i konsollen nederst i App Lab.

while (sum < 100) { console.log("sum er nu " + sum); sum = sum + tal; tal = tal + 1; }

Prøv selv

Opgave

Maksimalt antal forsøg

Udvid gæt-spillet, så brugeren kun får syv forsøg.

Efter optællingen: tjek om antalForsøg er nået til 7.
Er det tilfældet, og har brugeren ikke ramt: sæt spilSlut til true og afslør tallet.
Tilføj en Spil igen-knap, der nulstiller alle tre variabler. Husk et nyt randomNumber.

Udfordring

Skriv sum-eksemplet om, så det bruger en for-løkke i stedet. Det kan lade sig gøre, men det bliver klodset. Så mærker du selv, hvorfor de to slags løkker findes hver for sig.

Til eksamen

Forskellen på en for-løkke og en while-løkke, og hvornår man vælger hvilken.
Hvad en uendelig løkke er, og hvordan man undgår den.
Hvad en tilstandsvariabel er, og hvorfor App Lab ofte bruger den i stedet for while.
Pege på tilstandsvariablen i din egen app og forklare, hvad der sætter den.

Byggeklods: tilstandsvariabel

var erIGang = true; onEvent(@"minKnap", @"click", function() { if (erIGang == true) { // det der skal ske, så længe det kører if (nogetErOpfyldt) { erIGang = false; } } });

Jeg er færdig med modul 7