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

Modul 2

Variabler

Appen fra modul 1 kunne ikke huske noget. Det laver vi om på nu.

Det skal du bygge

En tæller. Der står et tal på skærmen, og to knapper trækker en fra eller lægger en til. For at det kan lade sig gøre, skal appen kunne huske tallet fra det ene klik til det næste. Det kræver en variabel.

7 +1 −1

Blokkene du skal bruge

De to første ligner hinanden, og det er dem, folk bytter rundt på. Læs forskellen, inden du går i gang.

var x = __;
Hedder Declare and assign a value to a variable · Variables (lilla) Opretter variablen og giver den en startværdi. Den bruger du én gang per variabel.
x = __;
Hedder Assign x · Variables (lilla) Ændrer værdien i en variabel, der allerede findes. Bemærk: ingen var foran. Den bruger du, så mange gange du vil.
__ + __
Hedder Add Operator · Math (orange) Lægger to ting sammen.
Værktøjskasse → Variables → var x = __;
De tre øverste blokke i Variables. Du skal bruge den første.

Byg det

  1. Design

    Læg en Label ind med id tallet, og to Buttons med id opKnap og nedKnap.

  2. Opret variablen øverst, uden for alt andet

    Træk var x = __; ud i arbejdsområdet. Klik på x og skriv tæller. Klik på det tomme hul og skriv 0.

    var tæller = 0;

    Den skal ligge helt øverst, ikke inde i noget. Grunden kommer længere nede.

  3. Læg en onEvent til plus-knappen

    Du kender den fra modul 1.

    var tæller = 0; onEvent(@"opKnap", @"click", function() { });

  4. Læg én til tælleren

    Træk x = __; ind i onEvent. Skriv tæller hvor der står x. I hullet skal du bruge __ + __ fra Math: træk den ind i hullet, og udfyld den med tæller og 1.

    var tæller = 0; onEvent(@"opKnap", @"click", function() { tæller = tæller + 1; });

    Den orange blok ligger inde i den lilla.

  5. Vis det nye tal

    Læg en setText("id", "text"); ind lige under, med tallet i første hul og variablen tæller i det andet.

    Slet anførselstegnene i det andet hul. Blokken kommer med "text" stående, anførselstegn og det hele. Du skal slette hele indholdet, også de to anførselstegn, og skrive tæller i stedet. Der skal stå tæller, ikke "tæller".

    Forskellen er ikke pynt, og det er den fejl, der koster flest minutter i det her modul:

    • setText("tæller") med anførselstegn betyder vis præcis de her bogstaver. På skærmen kommer der til at stå ordet tæller, og det ændrer sig aldrig, uanset hvor meget du trykker på knappen.
    • setText(tæller) uden anførselstegn betyder slå navnet op, og vis det, der ligger i kassen. Det er det, du vil have.

    Tommelfingerregel resten af kurset: anførselstegn om det, brugeren skal læse med sine egne øjne. Står der navnet på en variabel, skal de væk.

    var tæller = 0; onEvent(@"opKnap", @"click", function() { tæller = tæller + 1; setText(@"tallet", tæller); });

  6. Gør det samme for minus-knappen

    En onEvent mere, med tæller - 1 i stedet.

    Kør, og tryk løs på begge knapper. Tallet går op og ned, og denne gang kan appen huske, hvad den nåede til.

Hvorfor virker det

En variabel er en navngivet kasse i computerens hukommelse. Du lægger noget i kassen og kan hente det frem senere. Navnet vælger du selv, og indholdet må gerne skifte undervejs. Deraf navnet.

Lighedstegnet betyder ikke "er lig med"

Se på linjen:

tæller = tæller + 1;

Som matematik er det noget vrøvl. Intet tal er lig med sig selv plus én. Men i programmering betyder = ikke "er lig med". Det betyder "gem det her i", og det læses fra højre mod venstre:

De tre datatyper

Det, du lægger i kassen, har en type. På C-niveau skal du kende tre:

String er tekst. Skrives altid i anførselstegn: "Hej", "Anna Larsen".
Number er tal, du kan regne med: 17, 3.14, -5. Ingen anførselstegn.
Boolean har kun to mulige værdier: true eller false. Bruges til det, der enten er eller ikke er: om brugeren er logget ind, om spillet er slut.
var navn = "Anna"; var alder = 17; var erLoggetInd = false;
Én af hver. Bemærk at kun teksten har anførselstegn.

Fælden. "42" og 42 er ikke det samme. Det første er tekst, der tilfældigvis ligner et tal.

Lægger du "42" og 8 sammen, får du "428", ikke 50. Den orange plus-blok lægger tal sammen, men klistrer tekster i forlængelse af hinanden.

At klistre tekster sammen er i øvrigt nyttigt:

var hilsen = "Hej, " + navn + "!";
Mellemrummet efter komma er med vilje. Ellers står der "Hej,Anna!".

Hvor skal variablen oprettes?

Alt inde i en onEvent kører forfra, hver gang der klikkes. Havde du oprettet tæller derinde, ville den blive sat til 0 igen ved hvert klik, og tælleren ville stå på 1 for evigt. Derfor ligger den øverst, uden for onEvent.

Ordet var bruges kun første gang

Det her er den mest almindelige fejl i hele kurset. var betyder opret en ny kasse. Alle gange derefter skal du bare skrive navnet, uden var foran.

var tæller = 0; onEvent(@"opKnap", @"click", function() { var tæller = tæller + 1; setText(@"tallet", tæller); });
Der står var to steder. Linje 4 opretter en ny kasse, der kun findes inde i onEvent, og som forsvinder igen, når klikket er ovre. Den øverste tæller bliver aldrig ændret, og der står 1 på skærmen for evigt.
var tæller = 0; onEvent(@"opKnap", @"click", function() { tæller = tæller + 1; setText(@"tallet", tæller); });
Rigtigt. var står kun på linje 1. Linje 4 ændrer den kasse, der allerede findes.

De to blokke laver ikke det samme, selvom de ligner hinanden. Kig på farven og på ordet:

Griber du efter en blok fra Variables-kassen inde i en onEvent, er det næsten altid den nederste af de to, du skal bruge. Tjek altid, at der ikke er sneget sig et var med.

Navngivning. Vælg navne, der siger, hvad der ligger i kassen: brugerNavn, antalLiv, erLoggetInd. Undgå x og ting. Du skal kunne læse din egen kode igen om et halvt år.

Prøv selv

Opgave

Navneskilt-generator

En app, der sætter tre tekststumper sammen til én hilsen.

  1. Design: en knap (lavKnap) og en label (skiltet).
  2. Opret tre String-variabler øverst: fornavn, efternavn og klasse. Fyld dine egne oplysninger i.
  3. Inde i en onEvent: byg hilsenen med plus-blokke og vis den med setText.

Målet er en linje i stil med Mia Hansen, 2A.

Udfordring

Udvid tælleren med en nulstil-knap. Få også labelen til at skifte farve, når tælleren kommer over 10. Det kræver en blok fra modul 4, så gem den eventuelt til da.

Til eksamen

  1. Hvad en variabel er, og hvorfor man har brug for dem.
  2. De tre datatyper String, Number og Boolean, med et eksempel på hver.
  3. Hvad = betyder i programmering, og hvorfor tæller = tæller + 1 giver mening.
  4. Hvorfor variabler oprettes uden for onEvent.

Byggeklods: tag den med videre

// 1. opret variablen øverst, uden for alt andet var minVariabel = 0; // 2. ændr den og vis den inde i en onEvent onEvent(@"minKnap", @"click", function() { minVariabel = minVariabel + 1; setText(@"minLabel", minVariabel); });