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

Modul 3

Input og output

Indtil nu har du bestemt alting på forhånd. Nu skal brugeren have lov at skrive noget.

Det skal du bygge

En prisberegner. Brugeren taster en pris uden moms, trykker på en knap og ser, hvad prisen er med moms.

Pris uden moms: 400 Beregn Med moms: 500 kr.

Blokkene du skal bruge

Fire blokke i to par: to der henter, og to der viser.

getNumber("id");
Hedder getNumber · UI controls (gul) Henter det, brugeren har skrevet, som et tal. Brug den, hvis du skal regne bagefter.
getText("id");
Hedder getText · UI controls (gul) Henter det, brugeren har skrevet, som tekst. Til navne, koder og alt andet, der ikke skal regnes på.
setText("id", "text");
Hedder setText · UI controls (gul) Skriver tekst ud. Du kender den fra modul 1.
setNumber("id", 0);
Hedder setNumber · UI controls (gul) Skriver et tal ud. Bruges sjældnere, for setText kan som regel det samme.
Værktøjskasse → UI controls → getNumber("id");
De fire ligger lige efter hinanden i UI controls.

Byg det

  1. Design

    Læg et Text Input ind med id prisFelt, en Button med id beregnKnap og en Label med id svaret.

  2. Hent tallet ind i en variabel

    Lav en onEvent for knappen. Indeni: en var x = __;, hvor variablen hedder pris. I hullet lægger du getNumber("id"); med prisFelt.

    onEvent(@"beregnKnap", @"click", function() { var pris = getNumber(@"prisFelt"); });

    Her ligger variablen inde i onEvent. Det er med vilje: den skal have en frisk værdi ved hvert klik. Modsat tælleren i modul 2.

  3. Regn momsen ud

    Moms er 25 %, så prisen med moms er prisen gange 1,25. Brug gange-blokken fra Math. Bemærk, at der skrives 1.25 med punktum, ikke komma. Computeren læser komma som en adskillelse mellem to ting.

    onEvent(@"beregnKnap", @"click", function() { var pris = getNumber(@"prisFelt"); var medMoms = pris * 1.25; });

  4. Vis svaret

    Byg en sætning med plus-blokke og skriv den ud.

    onEvent(@"beregnKnap", @"click", function() { var pris = getNumber(@"prisFelt"); var medMoms = pris * 1.25; setText(@"svaret", "Med moms: " + medMoms + " kr."); });

    Kør og prøv med 400. Der skal stå Med moms: 500 kr.

  5. Ryd op i decimalerne

    Prøv med 399. Nu står der 498.75, og andre tal giver endnu flere decimaler. Læg Math.round(x) fra Math uden om udregningen, så der rundes af.

    onEvent(@"beregnKnap", @"click", function() { var pris = getNumber(@"prisFelt"); var medMoms = Math.round(pris * 1.25); setText(@"svaret", "Med moms: " + medMoms + " kr."); });

    Math.round ligger uden om regnestykket. Parenteserne bestemmer, hvad der rundes af.

Hvorfor virker det

Et program har tre dele, og du har nu bygget alle tre:

Input. Noget kommer ind. Her: brugeren taster et tal.
Behandling. Der sker noget med det. Her: gang med 1,25.
Output. Noget kommer ud. Her: teksten på skærmen.

Opdelingen passer på næsten alle programmer, og du skal kunne pege på de tre dele i din egen kode.

getNumber eller getText?

Brugeren skriver altid tekst, også når der tastes 400. Forskellen er, hvad App Lab afleverer til dig:

Prøv fejlen med vilje. Byt getNumber ud med getText i din app, og kør igen med 400.

Nu står der Med moms: 4001.25. Plus-blokken fik to tekststumper og klistrede dem sammen i stedet for at regne. Samme fælde som i modul 2.

NaN. Taster brugeren bogstaver i et felt, du læser med getNumber, står der NaN i resultatet. Det betyder Not a Number. I modul 4 lærer du at fange det.

Der er altid to blokke

Alt det, du kan aflæse i App Lab, kan du også sætte:

Du behøver altså ikke lære dem to og to. Har du styr på get-varianten, giver set-varianten næsten sig selv.

Prøv selv

Opgave

Rabatberegner med navn

  1. To Text Inputs: ét til navn (navnFelt) og ét til beløb (beloebFelt). En knap og en label.
  2. Hent navnet med getText og beløbet med getNumber.
  3. Træk 20 % fra beløbet.
  4. Skriv en hel sætning ud: Hej Mia, din pris er 320 kr.

Du bruger begge get-blokke i samme app: én til tekst og én til tal.

Udfordring

Lav en enhedsomregner: brugeren taster et antal kilometer, og appen viser både miles og meter. To udregninger, to labels, én knap.

Til eksamen

  1. Input, behandling og output, og hvor de tre ting sidder i din egen app.
  2. Forskellen på getText og getNumber, og hvad der går galt, hvis man vælger forkert.
  3. Hvorfor plus-blokken opfører sig forskelligt på tal og på tekst.

Byggeklods: tag den med videre

onEvent(@"minKnap", @"click", function() { // 1. ind var tal = getNumber(@"mitFelt"); // 2. behandl var resultat = tal * 2; // 3. ud setText(@"minLabel", "Resultatet er " + resultat); });