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

Modul 4

Forgreninger

Alt hvad du har bygget indtil nu, gør det samme hver gang. Nu skal appen kunne vælge.

Det skal du bygge

En login-tjekker. Brugeren taster navn og kode, og appen svarer forskelligt alt efter, om det passer. Den bruges igen i modul 10.

admin •••• Log ind Velkommen, admin!

Blokkene du skal bruge

if (__) {
Hedder If/else statement · Control (blå) To rum: ét der kører, hvis betingelsen passer, og ét der kører, hvis den ikke gør.
if (__) {
Hedder If statement · Control (blå) Samme sag uden reserveplan. Passer betingelsen ikke, springes rummet over.
__ == __
Hedder Equality operator · Math (orange) Spørger: er de to ting ens? Læg mærke til, at der er to lighedstegn.
__ && __
Hedder And Operator · Math (orange) Begge dele skal passe.
Værktøjskasse → Control → if (__) {
if og if/else ligger side om side i Control. Forskellen er det ekstra rum efter } else {.

Byg det

  1. Design

    To Text Inputs med id navnFelt og kodeFelt, en Button med id loginKnap, og en Label med id status.

  2. Gem det rigtige svar i to variabler

    Øverst, uden for alt andet:

    var korrektNavn = "admin"; var korrektKode = "1234";

  3. Læs, hvad brugeren har skrevet

    En onEvent for knappen, og to getText indeni. Begge er tekst, så det er getText og ikke getNumber.

    onEvent(@"loginKnap", @"click", function() { var navn = getText(@"navnFelt"); var kode = getText(@"kodeFelt"); });

  4. Læg if/else-blokken ind

    Træk if (__) { fra Control ind i onEvent, under de to getText-linjer.

    onEvent(@"loginKnap", @"click", function() { var navn = getText(@"navnFelt"); var kode = getText(@"kodeFelt"); if (__) { } else { } });

    Blokken er blå hele vejen ned, også } else { i midten. Det er én blok, ikke to.

  5. Byg betingelsen

    I det lille hul efter if skal der stå, hvad der skal være sandt. Læg først en __ && __ i hullet, og derefter en __ == __ i hvert af dens to huller.

    onEvent(@"loginKnap", @"click", function() { var navn = getText(@"navnFelt"); var kode = getText(@"kodeFelt"); if (navn == korrektNavn && kode == korrektKode) { } else { } });

    Du bygger altså orange blokke inde i orange blokke inde i den blå. Det mønster går igen i hver eneste betingelse, du kommer til at skrive.

  6. Fyld de to rum

    onEvent(@"loginKnap", @"click", function() { var navn = getText(@"navnFelt"); var kode = getText(@"kodeFelt"); if (navn == korrektNavn && kode == korrektKode) { setText(@"status", "Velkommen, " + navn + "!"); } else { setText(@"status", "Forkert navn eller kode"); } });

    Kør. Prøv både med det rigtige og det forkerte. Prøv også kun at ramme det ene rigtigt. Det er dét, && forhindrer.

Hvorfor virker det

En forgrening er et sted, hvor programmet deler sig i to veje. Betingelsen regnes ud og giver enten true eller false, de to Boolean-værdier fra modul 2. Er den sand, kører det øverste rum, ellers kører det nederste. Der køres altid præcis ét af de to, aldrig begge og aldrig ingen af dem.

Ét lighedstegn og to lighedstegn

= med ét tegn gemmer noget i en variabel. kode = "1234" betyder sæt kode til 1234.

== med to tegn spørger, om to ting er ens. kode == "1234" betyder er kode det samme som 1234?

I en betingelse skal der altid være to. Blokken fra Math har dem allerede.

De seks sammenligninger

Alle ligger under Math (orange), lige efter hinanden:

Værktøjskasse → Math → eq

To betingelser på én gang

Skal begge dele passe, bruger du && (og). Er det nok, at én passer, bruger du || (eller).

if (alder < 15 || alder > 65) { setText(@"status", "Du får rabat"); } else { setText(@"status", "Fuld pris"); }
Her er det nok at være enten ung eller gammel.

Flere end to veje

Nederst på if/else-blokken sidder to små knapper, − og +. Trykker du på plus, får blokken en gren mere:

if (point >= 90) { setText(@"karakter", "12"); } else if (point >= 70) { setText(@"karakter", "7"); } else { setText(@"karakter", "02"); }
Programmet tager den første gren, der passer, og ser aldrig på resten.

Derfor skal 90 stå først. Stod point >= 70 øverst, ville 95 point også opfylde den, og en næsten perfekt besvarelse ville give 7.

Prøv selv

Opgave

Karaktervurdering

Brugeren taster et antal point mellem 0 og 100, og appen svarer med en karakter.

  1. Et Text Input, en knap og en label.
  2. Hent tallet med getNumber.
  3. Brug en if/else med mindst tre grene: over 90 giver 12, over 70 giver 7, og resten giver 02.
  4. Skriv både karakteren og en kort kommentar ud.

Udfordring

Gå tilbage til prisberegneren fra modul 3 og fang det tomme felt: giver getText på feltet "", så skriv Du har ikke tastet noget i stedet for at regne. Sådan undgår man NaN.

Til eksamen

  1. Hvad en forgrening er, og hvorfor et program har brug for at kunne vælge.
  2. Forskellen på = og ==.
  3. Hvad && og || betyder, med et eksempel på hver.
  4. Hvorfor rækkefølgen af grenene betyder noget, når man har flere end to.

Byggeklods: login-tjekkeren

Den her kommer igen i modul 10.

var korrektKode = "1234"; onEvent(@"loginKnap", @"click", function() { var kode = getText(@"kodeFelt"); if (kode == korrektKode) { setText(@"status", "Adgang"); } else { setText(@"status", "Forkert kode"); } });