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

Modul 8

Funktioner

Du har brugt dem hele kurset. Nu skal du lave dine egne.

Det skal du bygge

Et pointsystem med tre knapper, der giver forskellige point. Uden funktioner ender du med at skrive den samme kode tre gange. Funktioner skærer det ned til én.

Score: 35 Rigtigt (+10) Forkert (−5) Bonus (+25) BONUS! +25

Blokkene du skal bruge

Alle fire ligger under Functions, den lysegrønne kategori. Det er samme grønne som den function, der hele kurset har hængt bag på dine onEvent-blokke, og det er ikke tilfældigt. Det er den samme slags ting.

function myFunction(n) {
Hedder Define a function with parameters · Functions (grøn) Opretter din funktion. myFunction og n er navne, du selv retter.
myFunction(n)
Hedder Call a function with parameters · Functions (grøn) Kører funktionen. Den skal hedde præcis det samme som den, du oprettede.
function myFunction() {
Hedder Define a function · Functions (grøn) Samme sag uden parametre, til funktioner der altid gør det samme.
return __;
Hedder return · Functions (grøn) Sender et svar tilbage til den, der kaldte funktionen.
Værktøjskasse → Functions → function myFunction(n) {

Byg det

  1. Design

    Tre Buttons med id rigtigKnap, forkertKnap og bonusKnap, samt to Labels med id scoreLabel og beskedLabel.

  2. Gør det først på den dumme måde

    Byg de to første onEvents (rigtigKnap og forkertKnap), som du ville have gjort efter modul 2. Kør det og se, at det virker. bonusKnap lader du stå tom indtil videre; den kommer du til om lidt.

    var score = 0; onEvent(@"rigtigKnap", @"click", function() { score = score + 10; setText(@"scoreLabel", "Score: " + score); setText(@"beskedLabel", "Rigtigt! +10"); }); onEvent(@"forkertKnap", @"click", function() { score = score - 5; setText(@"scoreLabel", "Score: " + score); setText(@"beskedLabel", "Forkert. −5"); });

    Kig på de to blokke. To af de tre linjer er ens. Den gentagelse fjerner vi nu.

  3. Definer funktionen

    Træk function myFunction(n) { ud i arbejdsområdet, helt for sig selv og ikke inde i noget. Kald den opdaterScore, og giv den to parametre: ændring og besked.

    function opdaterScore(ændring, besked) { score = score + ændring; setText(@"scoreLabel", "Score: " + score); setText(@"beskedLabel", besked); }

    Kør appen. Der sker ingenting, og sådan skal det være: at definere en funktion får den ikke til at køre. Den venter på at blive kaldt.

  4. Kald funktionen fra hver knap

    Slet indholdet af dine onEvents og læg en myFunction(n) ind i stedet.

    onEvent(@"rigtigKnap", @"click", function() { opdaterScore(10, "Rigtigt! +10"); }); onEvent(@"forkertKnap", @"click", function() { opdaterScore(-5, "Forkert. −5"); }); onEvent(@"bonusKnap", @"click", function() { opdaterScore(25, "BONUS! +25"); });

    Nu er der én linje per knap, og al koden, der rent faktisk laver noget, står ét sted.

  5. Se hvad du har vundet

    Tilføj en linje til funktionen, så baggrunden også skifter farve. Du retter ét sted, og alle tre knapper får den nye opførsel.

    function opdaterScore(ændring, besked) { score = score + ændring; setText(@"scoreLabel", "Score: " + score); setText(@"beskedLabel", besked); setProperty(@"screen1", @"background-color", "white"); }

    Ét sted at rette i stedet for tre.

Hvorfor virker det

En funktion er et navngivet stykke kode, du kan køre igen og igen. Du har brugt dem hele kurset. setText, getNumber og randomNumber er alle funktioner, bare skrevet af nogen hos code.org. Nu skriver du dine egne.

Der er altid to trin:

Definere. Beskriv hvad funktionen gør. Sker én gang, og får ikke noget til at ske.
Kalde. Bed funktionen om at køre nu. Sker så mange gange, du vil.

Parametre

Parametre er de huller, du fylder ud, når du kalder. De gør funktionen brugbar til flere ting.

I definitionen er ændring og besked tomme navne. De får først en værdi, når funktionen kaldes:

Det første, du skriver i kaldet, ryger i den første parameter. Bytter du om, bliver beskeden lagt til scoren.

Return: når funktionen skal svare

Indtil nu har funktionen selv opdateret skærmen. Nogle gange vil du hellere have et svar tilbage.

function erSvaretRigtigt(givet, korrekt) { return givet == korrekt; }

Funktionen skriver ikke noget nogen steder. Den regner ud, om de to ting er ens, og afleverer true eller false. Så kan du bruge den midt i en betingelse:

onEvent(@"svarKnap", @"click", function() { if (erSvaretRigtigt(getText(@"svarFelt"), "København")) { opdaterScore(10, "Rigtigt!"); } else { opdaterScore(0, "Desværre."); } });
Din egen grønne funktion sidder i hullet på den blå if-blok.

Når return køres, stopper funktionen. Alt hvad der står under return i funktionen, bliver aldrig kørt.

Definitionen skal ligge for sig selv. En funktion defineres uden for alle onEvents, ligesom variabler i modul 2. Lægger du definitionen inde i en onEvent, kan de andre knapper ikke få fat i den.

Prøv selv

Opgave

Quiz-motor med funktioner

Byg videre på bladre-appen fra modul 5, men med funktioner.

  1. En liste med spørgsmål og en liste med de rigtige svar.
  2. En funktion visSpørgsmål() uden parametre, der viser det aktuelle spørgsmål og opdaterer tælleren.
  3. En funktion tjekSvar(svar), der returnerer true eller false.
  4. En funktion opdaterScore(ændring, besked) som i eksemplet.
  5. Én onEvent per svarknap, der kalder de tre funktioner.

Opgaven er i praksis motoren i projektet i modul 10. Brug tid på den.

Udfordring

Skriv en funktion karakterFor(point), der returnerer en karakter som tekst. Brug if/else-kæden fra modul 4 inde i funktionen, og return i hver gren.

Til eksamen

  1. Hvad en funktion er, og hvorfor man bruger dem.
  2. Forskellen på at definere og at kalde en funktion.
  3. Hvad en parameter er, med et eksempel fra din egen kode.
  4. Hvad return gør, og forskellen på en funktion der viser noget, og en der returnerer noget.

Byggeklods: funktion med parametre

// definér én gang, uden for alt andet function gørNoget(vaerdi, tekst) { setText(@"minLabel", tekst + " " + vaerdi); } // kald så mange gange du vil onEvent(@"knapA", @"click", function() { gørNoget(10, "A gav"); }); onEvent(@"knapB", @"click", function() { gørNoget(25, "B gav"); });