Modul 22. Kodebegreber

Forberedelse

  • Læs resten af kapitel 15. Dvs. afsnit 15.5 Arrays og Loops til og med afsnit 15.7 Funktioner og Events plus afsnit 15.9 Sådan arbejder frontend og backend sammen
  • Hvis du har brug for et overblik, så genlæs det første afsnit i kapitel 15

Formål

  • Få mere rutine i at arbejde med AppLab
  • Kunne genkende forskellige kodemønstre

Fælles gennemgang

Fra sidst

  • Hvad er fronend, backend og database for noget
  • Forklar figuren her

Lektien til denne gang

Øvelser

22.1 Arrays og loops

Det eneste, du ikke har prøvet endnu, er at se på arrays og loops. Lav en kopi af appen Arrays og loops: Klik først på linket nedenfor, så på “Vis kode” og til sidst på “Bland igen”/”Remix”. Så har du en kopi https://studio.code.org/projects/applab/jgzg-pvNC9B0q-CWdUiL9qKshtSgwkRa9if1sYg0BLE

  • Prøv app’en af:
    • Klik først på knappen “Vis array/liste”
    • Skriv så et navn, f.eks. “Julius” i det nederste felt
    • Klik så på knappen “Indsæt element” og så knappen “Vis array/liste”
  • Prøv at forstå koden:
    • Hvordan er variablen i linje1 forskellig fra andre variable
    • Er var-linjen i linje 2 en variable eller et array
    • Hvad tror du, at den blå kode, der starter med “For” laver. Tip: Den gentager det antal gange, som arrayet er langt. “Langt” er “length” på engelsk, og koden forstår kun engelsk
  • Prøv at lave listen om, så der i stedet for “Arne” står “Anders” og i stedet for “Bodil” står “Bolette”. Du er nødt til at redigere i koden i linje 2
  • Prøv at tilføje “Åge” til den liste, der vises fra start. Dvs. du skal modificere linje 1 arrayet “Klasseliste” inde i selve koden

Hvis du vil prøve at kode arrays og loops selv, så kan du se videoen her:

22.2 Teori

  • Udfyld skemaet her og prøv at forklare det med dine egne ord, ikke de ord, jeg har brugt i videoerne. Jeg har hjulpet dig lidt. Gør noget ud af det, du får brug for det til din eksamen :-).
  • Forklar, hvad de enkelte elementer kunne bruges til. Du må i første omgang springe arrays og loops over

UDTRYKFORKLARING
Variabel 
Sekvens   
Forgrening og betingelse 
Arrays og loops 
Events og funktioner 
KommentarerKommentarer der kan fortælle hvad du gør i kodningen

22.3 Undersøg en app

Undersøg appen her, som er en lidt mere snedig måde at skrive klasselisten på: https://studio.code.org/projects/applab/YHAPLUZNLi6gi43fPT1IidUQZrK62hW6gTeudzK3kjo

  • Hvad er gjort anderledes
  • Hvordan kan det være, at jeg med den nederste knap pludselig ikke behøves at klikke på den øverste for at få skrevet listen ud
  • Hvad er det for en type kode, som pludselig er bragt i spil (variabel, sekvens, forgrening/betingelse, array og loop, funktioner, events eller kommentarer)

22.4 Gå på kodejagt

  • Gå jeres apps igennem i grupper
  • Sæt kommentarer ind i koden
  • Tag skærmfotos med eksempler på kode, og sæt det ind i skemaet her
UDTRYKSKÆRMFOTOS
Variabel 
Sekvens   
Forgrening og betingelse 
Arrays og loops 
Events og funktioner 
KommentarerKommentarer der kan fortælle hvad du gør i kodningen

22.5 Flere kodeeksempler

Kør Pizza App’en og se, hvad den kan. Prøv f.eks. at bestille en Pizza og se, hvad der sker.

Når du har navigeret rundt i Pizza Appen, så skal du svare på følgende spørgsmål. For hvert spørgsmål skal du

  • tage et skærmdump af den relevante kode
  • forklare hvad der sker i koden, gerne ved hjælp af kommentarer inde i koden. Du skal bruge fagudtryk for kodning i din forklaring (f.eks. variabel, loop osv.)

Her er spørgsmålene

  • Hvordan navigerer man fra side til side i appen
  • Hvordan bærer appen sig ad med at vise en Pizzas navn og pris
  • Hvordan bladrer man i appen (se skærmdump herunder, det er pilene til venstre og højre)
VEElg en pizza

Bestil et par tilfældige pizzaer

  • Hvordan virker knappen “Bestil pizza”
  • Hvordan tæller appen antal og pris sammen
  • Hvordan virker knappen “Vis bestilling”

Når du klikker på knappen “Vis bestilling”, kommer du over på en anden side

Bestilling 
Nulstil
  • Hvordan bærer appen sig ad med at vise listen over din bestilling og prisen
  • Hvordan virker knappen “Tøm kurven”
  • Hvordan virker knappen “Tilbage”
UDTRYKSÆT EN ELLER FLERE SKÆRMFOTOS IND AF KODEN OG FORKLAR
Variabel 
Sekvens 
Forgrening og betingelse 
Arrays og loops (Bemærk: Der bruges arrays i pizza app’en)
Funktioner 
Events og funktioner 
Kommentarer