En variabel kan gemme én ting. En liste kan gemme hundrede.
Det skal du bygge
En app, der viser ét stykke indhold ad gangen, og en knap, der bladrer
videre. Det er motoren i en quiz og i et sæt flashcards.
2 af 3Rugbrød er ikke brød.Næste
Blokkene du skal bruge
var list = ["a", "b", "d"];
Hedder Declare and assign an array ["a", "b", "d"] to a variable · Variables (lilla)
Opretter en liste med tekster i. Der er også en med tal, lige over den.
list[0]
Hedder Access List Item · Variables (lilla)
Henter ét element ud. Tallet i firkantparentesen er pladsnummeret.
list.length
Hedder [list].length · Variables (lilla)
Hvor mange elementer der er i listen.
appendItem("list", "item")
Hedder appendItem(list, item) · Variables (lilla)
Lægger et nyt element bagest i listen.
Værktøjskasse → Variables → list[0]
Liste-blokkene sidder samlet et godt stykke nede i Variables,
under alle str-blokkene. Du skal scrolle.
Byg det
Design
To Labels med id tælleren og
indholdet, og en Button med id
næsteKnap.
Opret listen og en pladsholder
Øverst, uden for alt andet. Listen holder indholdet, og variablen
plads husker, hvor vi er nået til.
var fakta = ["443 øer har navn.", "Rugbrød er ikke brød.", "Flere grise end folk."];
var plads = 0;
Vis det første element med det samme
Stadig uden for onEvent. Det her kører én gang, når appen starter, så
skærmen ikke er tom fra start.
var fakta = ["443 øer har navn.", "Rugbrød er ikke brød.", "Flere grise end folk."];
var plads = 0;
setText(@"indholdet", fakta[plads]);
Læg mærke til, hvad der står i firkantparentesen: ikke et tal, men
variablenplads. Ændrer vi plads, peger
blokken et nyt sted hen.
Lad knappen tælle videre
onEvent(@"næsteKnap", @"click", function() {
plads = plads + 1;
setText(@"indholdet", fakta[plads]);
});
Kør. Klik to gange, og det virker. Klik en gang mere, og der står
undefined. Vi er faldet ud over enden af listen.
Start forfra, når listen er brugt op
Læg en if (__) { ind, der sætter
plads tilbage til 0, når vi er nået for langt.
onEvent(@"næsteKnap", @"click", function() {
plads = plads + 1;
if (plads >= fakta.length) {
plads = 0;
}
setText(@"indholdet", fakta[plads]);
});
Vis hvor man er
onEvent(@"næsteKnap", @"click", function() {
plads = plads + 1;
if (plads >= fakta.length) {
plads = 0;
}
setText(@"indholdet", fakta[plads]);
setText(@"tælleren", plads + 1 + " af " + fakta.length);
});
Der står plads + 1, fordi mennesker begynder at tælle ved 1,
og lister begynder ved 0.
Hvorfor virker det
En liste, også kaldet et array, er én variabel med mange
værdier i en fast rækkefølge. I stedet for fakta1,
fakta2 og fakta3 har du én fakta med tre
pladser. Hver plads har et nummer, og nummeret hedder et
indeks.
Lister tæller fra nul
Det første element ligger på plads 0, ikke på 1. Sådan er det
i næsten alle programmeringssprog, så det er værd at vænne sig til nu.
var byer = ["Aarhus", "Odense", "Aalborg"];
byer[0] er "Aarhus"
byer[1] er "Odense"
byer[2] er "Aalborg"
byer[3] er undefined, der er ikke mere
Listen har tre elementer, så byer.length er 3. Men det sidste
element ligger på plads 2. Det sidste indeks er altså altid
length - 1. Derfor hedder betingelsen i trin 5
plads >= fakta.length.
undefined betyder "der er ikke noget der". Ser du det ord i
din app, har du peget på en plads uden for listen.
Lister der vokser
En liste behøver ikke være fyldt fra starten.
appendItem("list", "item") lægger et nyt element bagest.
Listen starter tom. Hvert klik lægger ét på og opdaterer tælleren.
Prøv selv
Opgave
Indkøbsliste
Et Text Input, en Tilføj-knap og en label.
Opret en tom liste varer øverst.
Ved klik: læg det, brugeren har skrevet, på listen med appendItem.
Vis hvor mange varer der er på listen.
Vis også den senest tilføjede vare. Den ligger på
varer[varer.length - 1].
Udfordring
Tilføj en Forrige-knap til bladre-appen. Husk at fange, når
plads bliver mindre end 0. Så skal den hoppe om til det sidste
element i listen.
Til eksamen
Hvad en liste er, og hvornår den er bedre end mange enkeltvariabler.
Hvad et indeks er, og at det første element har indeks 0.
Forskellen på length og det sidste indeks.
Hvordan man kan bruge en variabel som indeks, og hvorfor det er nyttigt.
Byggeklods: bladr gennem en liste
var minListe = ["et", "to", "tre"];
var plads = 0;
onEvent(@"næsteKnap", @"click", function() {
plads = plads + 1;
if (plads >= minListe.length) {
plads = 0;
}
setText(@"minLabel", minListe[plads]);
});