Modul 1

Din første app

En app laver ingenting af sig selv. Den venter på, at nogen gør noget.

Det skal du bygge

En knap. Når man trykker på den, skifter teksten under den.

Klik mig! Du klikkede på knappen!

Sådan ser den ud efter et klik.

Sådan er App Lab skruet sammen

Gå til studio.code.org/projects/applab og log ind. Der er to faner:

Design: hvordan appen ser ud. Her trækker du knapper og tekstfelter ind.
Kode: hvad appen gør. Her sætter du blokke sammen.

I Kode-fanen ligger værktøjskassen til venstre. Blokkene er sorteret i otte farvede kategorier. Led efter farven først, så er der kun en håndfuld blokke tilbage at kigge igennem.

Værktøjskasse → UI controls → onEvent("id", "type", …)

Værktøjskassen med UI controls åben.

Blokkene du skal bruge

onEvent("id", "type", …): Hedder onEvent · ligger under UI controls (gul) Holder øje med ét element og kører sin kode, når der sker noget med det. For eksempel et klik.
setText("id", "text");: Hedder setText · ligger under UI controls (gul) Skriver en tekst i en label eller på en knap.

Byg det

Opret projektet

Klik Opret nyt projekt og kald det MinFørsteApp.
Design-fanen: læg en knap og en label ind

Træk en Button ind på skærmen. I panelet til højre sætter du dens id til knap1 og teksten til Klik mig!

Træk så en Label ind under knappen. Sæt dens id til label1 og teksten til Der er ikke sket noget endnu.

Id'et er elementets navn, og det er den vej, koden får fat i det.
Kode-fanen: find onEvent

Skift til Kode. Klik på UI controls i værktøjskassen, den gule. onEvent("id", "type", …) ligger øverst. Træk den ud i arbejdsområdet.

Nu står der noget der ligner det her:

onEvent(@"id", @"type", function() { });
Udfyld de to huller

Klik på det første hul og skriv knap1. Klik på det andet, og der kommer en menu frem, fordi hullet har en lille trekant. Vælg click.

onEvent(@"knap1", @"click", function() { });

Trekanten ▾ betyder, at hullet er en menu. Klik og vælg. Du skal ikke skrive.
Læg setText ind i onEvent

Find setText("id", "text"); længere nede i UI controls. Træk den ind i mellemrummet inde i onEvent, så den ligger op ad den grønne skinne. Lægger den sig under hele onEvent-blokken, er den havnet forkert. Træk den ud og prøv igen.

Udfyld: label1 og Du klikkede på knappen!

onEvent(@"knap1", @"click", function() { setText(@"label1", "Du klikkede på knappen!"); });
Kør

Klik Kør og tryk på knappen. Teksten skifter.

Hvorfor virker det

En computer gør præcis det, den får besked på, i den rækkefølge beskederne kommer. Et programmeringssprog er det sprog, beskederne skrives i.

Blokkene i App Lab er et programmeringssprog. Det hedder JavaScript. Klikker du på Vis tekst i toppen af Kode-fanen, forsvinder farverne, og de samme ord står tilbage. Blokkene er en hjælp til at skrive dem rigtigt.

Kode kører oppefra og ned

Blokke, der ligger under hinanden, kører i rækkefølge. Her sættes teksten først, og derefter skifter baggrunden:

setText(@"label1", "Hej verden!"); setProperty(@"screen1", @"background-color", "lightblue");

Bytter du om på de to blokke, skifter baggrunden først.

Appen venter

Når du klikker Kør, sker der ingenting. Appen ligger og lytter, og den rører sig ikke, før du trykker på knappen.

Klikket hedder en event, på dansk en hændelse. Den grønne function, der tager imod klikket, hedder en event handler. Det engelske handler betyder "den, der håndterer noget", og har ikke noget med det danske handler at gøre. onEvent("id", "type", …) binder de to sammen: den holder øje med hændelsen og kalder handleren, når den sker.

Tænk på en dørklokke. Trykket på knappen er hændelsen. Mekanismen inde i væggen, der tager imod trykket og sætter klokken i gang, er handleren. At det ringer, er det, handleren gør.

Hvorfor hænger der en grøn blok på den gule?

Se på blokken igen:

onEvent(@"knap1", @"click", function() { setText(@"label1", "Du klikkede!"); });

Den gule onEvent("id", "type", …) har tre huller. De to første er små: hvilket element og hvilken slags handling. I det tredje skal selve koden ligge, og kode, der gemmes til senere, pakkes altid ind i en grøn function. Den er for stor til et hul, så den hænger bag på den gule blok i stedet.

Den gule del er onEvent: hvad der skal lyttes efter.

Den grønne del er function: koden, der venter på at blive kørt.

I venstre side er der to kanter: en tynd gul, der hører til onEvent, og en bred grøn skinne, der hører til function. Alt op ad den grønne skinne kører ved klik.

Nederst står der });. Krøllen lukker den grønne function, parentesen lukker den gule onEvent. Du skal ikke selv skrive den.

Kommentarer. Den grå blok // Comment under Functions bliver sprunget over af computeren. Brug den til at skrive, hvad et stykke kode er godt for.

Prøv selv

Opgave

Tre stemningsknapper

Byg en app med tre knapper (Godt, Sådan da, Skidt) og én label. Hver knap skriver sin egen besked i labelen.

Læg tre Buttons og én Label ind i Design. Giv dem id'er, du kan kende igen.
Brug tre onEvent("id", "type", …)-blokke, én per knap.
Læg en setText("id", "text"); ind i hver.

Du får tre stakke, der ligger ved siden af hinanden i arbejdsområdet. Hver venter på sin egen knap.

Udfordring

Få også baggrundsfarven til at skifte. Brug setProperty("id", "property", value);, sæt første hul til screen1, vælg background-color i menuen, og skriv en farve som "lightgreen" i det sidste hul.

Til eksamen

Det her skal du kunne forklare med dine egne ord:

Hvad et programmeringssprog er, og at blokkene i App Lab er JavaScript.
At kode kører oppefra og ned, og hvorfor rækkefølgen betyder noget.
Forskellen på en event og en event handler, med knappen som eksempel.
Hvorfor koden inde i onEvent ikke kører, når appen starter.

Byggeklods: tag den med videre

Den her form kommer igen i alle ti moduler.

onEvent(@"ditElementId", @"click", function() { // her kommer det der skal ske });

Jeg er færdig med modul 1