9789140692320 by Smakprov Media AB

programmering för högstadiet

mikael tylmad pontus walck

start coding!

programmering för högstadiet lärarmaterial

mikael tylmad pontus walck

programmering för högstadiet

mikael tylmad pontus walck

Att känna till programmering är viktigt för att ha en chans att förstå hur världen fungerar. Alla behöver inte bli programmerare, men alla borde vara medvetna om att programkod och datorer fungerar som ett nervsystem i vårt samhälle. Det blir mer och mer tydligt att programmering hör hemma i skolan, både som eget ämne och som naturligt inslag i de traditionella skolämnena. Den här boken lär ut grunderna på ett enkelt och roligt sätt med hjälp av modern webbteknik. Allt som behövs är en webbläsare. Eleverna skriver riktig kod och övningarna ger omedelbara grafiska resultat. Författarna har framgångsrikt tillämpat konceptet med elever på högstadiet, gymnasiet och ända upp i 70-årsåldern.

Mikael Tylmad

Pontus Walck ISBN 978-91-40-69232-0

789140 692320

mikael tylmad pontus walck

Innehåll 1 JavaScript och grafik Kom igång med programmering Rita geometriska former . . . . Text . . . . . . . . . . . . . . . . Färdiga bilder . . . . . . . . . . Variabler . . . . . . . . . . . . . Häftiga variabler . . . . . . . . . Slump . . . . . . . . . . . . . . .

. . . . . . .

7 7 8 11 12 13 15 15

2 Animering och interaktivitet Interaktivitet . . . . . . . . . . . . if-satser i JavaScript . . . . . . . Reagera på tangentbordet . . . . Reagera på musen . . . . . . . . . Ett ”katt och råtta”-spel . . . . . TRON . . . . . . . . . . . . . . . Pong . . . . . . . . . . . . . . . .

. . . . . . .

19 21 21 25 26 27 29 32

3 Funktioner 37 Zombier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Ändra på koordinatsystemet . . . . . . . . . . . . . . . . . . . . . . . . . 40 Returnera mera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

4 Loopar while-loopar . . . . . . . . . . . . . . for-loopar . . . . . . . . . . . . . . . Hur startar vi en zombie-apokalyps? Skapa konst med loopar . . . . . . .

. . . .

5 En zombieapokalyps med objekt och MĂĽnga zombier med objektorientering . . En zombieapokalyps med arrayer . . . . . Kombinera arrayer med loopar . . . . . . Ett komplett zombiespel . . . . . . . . . . De vanligaste funktionerna

. . . .

45 46 47 49 50

arrayer . . . . . . . . . . . . . . . . . . . . . . . .

. . . .

55 55 57 58 59

. . . .

Kapitel 2

Animering och interaktivitet Rörelse på datorskärmar är egentligen bara många stillbilder efter varandra, där något flyttat på sig lite för varje bild. Om du vill att en boll ska röra sig över skärmen så kan koden se ut så här: var ball = { x: 0, y: 0 }; function update() { circle(ball.x, ball.y, 50, "red"); ball.x++; ball.y++; }

Först så skapar vi en boll med x-koordinat 0 och y-koordinat 0, därefter kommer en nyhet: funktionen update. Vår programmeringsmiljö letar efter en sådan funktion, och kör sedan den om och om igen många gånger per sekund. Det betyder att du kan skriva kod inne i funktionen som ritar nästa bildruta, och få saker att röra på sig! I JavaScript så använder man måsvingar, { och }, när man skriver block av kod som hänger ihop. Koden i en funktion har till exempel alltid en startmåsvinge och en slutmåsvinge, som funktionen update ovan. I det här fallet ritar update-funktionen en röd cirkel på x-koordinat ball.x och y-koordinat ball.y, sedan ökar den värdet på båda variablerna med ett. Det kan man göra genom att skriva ++ efter variabelnamnet, en genväg som finns i de flesta programmeringsspråk eftersom det är så vanligt att man vill göra just det. Varje gång cirkeln ritas ut flyttas den alltså lite nedåt åt höger. Själva rörelsen syns såklart inte på bilden, men finns att beskåda på nätet: http://www.koda.nu/arkivet/strecket 19

Animering och interaktivitet

Figur 2.1: Många röda cirklar.

Eftersom vi aldrig rensar bort de gamla cirklarna blir det fler och fler cirklar, vilket till slut ser ut som ett tjockt streck. Med hjälp av funktionen clearScreen() kan vi rensa skärmen innan vi ritar ut en ny cirkel. var ball = { x: 0, y: 0 }; function update() { clearScreen(); circle(ball.x, ball.y, 50, "red"); ball.x++; ball.y++; }

Om du vill rensa skärmen med en viss färg kan du använda funktionen fill. fill("red");

Den fantastiska flygande cirkeln som inte längre blev ett streck måste upplevas: http://www.koda.nu/arkivet/den_flygande_cirkeln

Uppgift 2.1

De svävande formerna

Animera två cirklar och en rektangel så att de rör sig över skärmen. De ska börja på olika platser och åka åt olika håll.

Animering och interaktivitet

Interaktivitet För att ett program ska vara interaktivt och kunna göra olika saker varje gång så behöver det kunna göra så kallade tester. Det är vanligt att kod testar om en variabel har ett visst värde, eller om variabeln är större än eller mindre än något värde. Om användaren av ett program till exempel får skriva in sitt personnummer så kan det sparas i en variabel. Programmet kan sedan testa om personnumret är korrekt och i så fall berätta när användaren fyller år. Tester är centralt i programmering och finns i någon form i alla programmeringsspråk. I JavaScript använder du de engelska orden if och else för att skriva kod som utför olika saker beroende på om ett villkor är uppfyllt eller inte.

if-satser i JavaScript Så här kan en enkel if-sats se ut i JavaScript: if (1 + 1 == 3) { text(100, 100, 20, "Det är nog fel på din dator", "black"); } else { text(100, 100, 20, "Allt lugnt!", "black"); }

Koden kan läsas så här: om ett plus ett är lika med tre, skriv ”Det är nog fel på din dator”, annars skriv ”Allt lugnt!”. Observera att man testar likhet med två likhetstecken, eftersom ensamma likhetstecken redan används för att ge variabler ett värde. Med if-satser kan du också kontrollera andra saker, exempelvis om en användare håller in en viss knapp eller om en siffra är större än en annan. När man ska lära sig hur if-satser fungerar är det bra att börja med att skriva kod som gör olika saker beroende på vad användaren vill. Det finns tre enkla funktioner i JavaScript för att prata med användaren: alert som visar ett meddelande, confirm som ställer en enkel fråga och prompt som ber användaren mata in ett svar. Om svaret ska vara en siffra så kan man använda promptNumber istället för prompt. Då kan man vara säker på att datorn inte behandlar svaret som vanlig text.

Animering och interaktivitet

if (confirm("Vill du veta hemligheten?")) { alert("Du får glass i julklapp."); } else { alert("Slipp då!"); }

confirm ställer alltså Ja/Nej-frågor och if-satser kan direkt förstå vad användaren svarat. alert är det enklaste sättet att ge information till användaren, en ruta med ett meddelande och en Ok-knapp.

Figur 2.2: En fråga till användaren med confirm.

Figur 2.3: En dialogruta från alert-funktionen.

Animering och interaktivitet

Här kommer ett lite mer komplicerat exempel: var name = prompt("Hej, vad heter du?"); var age = promptNumber("Hur gammal är du?"); text(50, 150, 20, "Hej " + name + "!", "black"); if (age < 20) { text(50, 250, 20, "Glöm det", "black"); } else if (age < 25) { text(50, 250, 20, "Du behöver visa legitimation", "black"); } else { text(50, 250, 20, "Oj vad gammal du är!", "black"); }

I koden ovan frågar datorn vad användaren heter och hur gammal hen är, och sparar svaren i variabler. Därefter skriver datorn ut en hälsning. Eftersom det ska stå Hej Bernt!, där Bernt är innehållet i variabeln name, måste vi klistra ihop lite text med innehållet i en variabel. Det kan man göra med +. Den färdiga textsträngen som ska skrivas ut är alltså "Hej " + name + "!". Efter hälsningen visas en av tre möjliga textsträngar, beroende på vilken ålder användaren har skrivit in. Först kontrolleras om age är mindre än 20 med hjälp av <, ”mindre än”-tecknet. Om testet svarade nej, det vill säga om åldern inte är mindre än 20, så gör programmet ett nytt test som kontrollerar om age är mindre än 25. Om även det testet svarar nej så kommer det sista blocket att köras, det som heter else.

Figur 2.4: Med prompt kan man ställa frågor till användaren.

Animering och interaktivitet

Med hjälp av >, ”större än”-tecknet, kan man testa om ett värde är större än ett annat. Man kan även blanda in ett likhetstecken efter både > och < så här: <= och >=. Kombinationerna kan man läsa som mindre än eller lika med och större än eller lika med. Ibland vill man också testa om något inte är lika med något annat, det skriver man med ett utropstecken följt av ett likhetstecken: !=.

Uppgift 2.2

Video on demand

Fråga om användaren vill se en triangel. Om svaret är ja, rita en triangel. Rita annars två trianglar. Uppgift 2.3

CSI-profile 2000

Du ska skriva ett program som ställer frågor till användaren om hur gärningsmannen från ett brott ser ut. Programmet ska använda informationen för att rita ett ansikte med geometriska former, så att polisen vet vem de letar efter. Uppgift 2.4

1337 haxxor security

Be användaren om ett lösenord och avslöja en hemlighet om lösenordet var rätt. Hemligheten kanske är en bild på en fin katt? Bestäm också vad som ska hända om användaren anger fel lösenord. Uppgift 2.5

Den studsande cirkeln

Rita en cirkel som åker runt på skärmen och studsar om den når en kant. För att detektera om cirkeln har träffat vänsterkanten eller taket räcker det att använda if-satser och låta de kontrollera om x– respektive y–koordinaten är mindre än 0. Högerkanten och golvet har i sin tur två smidiga variabler som finns fördefinerade: totalWidth och totalHeight. Dessa innehåller skärmens totala bredd respektive höjd.

Animering och interaktivitet

Reagera på tangentbordet Vi har hittills använt prompt och confirm för att interagera med användaren. Nu ska vi visa hur man kan få programmet att reagera direkt på tangentbordstryckningar och musrörelser. Vi börjar med ett exempel där vi flyttar på en cirkel med piltangenterna. var ball = { x: 0, y: 0 }; function update() { clearScreen(); if if if if

(keyboard.left) (keyboard.right) (keyboard.up) (keyboard.down)

{ { { {

ball.x--; ball.x++; ball.y--; ball.y++;

} } } }

circle(ball.x, ball.y, 50, "red"); }

I koden ovan använder vi variabeln keyboard för att testa om vissa tangenter är nedtryckta. Om man till exempel vill kontrollera om vänster piltangent är nedtryckt så skriver man keyboard.left. Man får då svaret sant eller falskt, som man direkt kan använda i if-satser. I exemplet använder vi det för att ändra på variablerna ball.x och ball.y, så att cirkeln flyttas. Du kan också se att vi klämt ihop if-satserna så att de får plats på varsin rad. Det går utmärkt att göra om man tycker att koden blir finare och lättare att läsa. Fin kod är oftast bra kod. http://www.koda.nu/arkivet/tangentbordet_styr

Uppgift 2.6

Katter

Du ska bidra till att öka antalet katter på webben. Rita en bild på en katt med geometriska former och gör sedan så att man kan styra katten med piltangenterna. Uppgift 2.7

Varm, varmare, varmast

Rita ut en cirkel som kan styras med tangentbordet. När cirkeln närmar sig mitten av skärmen så ska en text dyka upp på skärmen och ändras från varm till varmare och sen till varmast.

programmering för högstadiet

mikael tylmad pontus walck

start coding!

programmering för högstadiet lärarmaterial

mikael tylmad pontus walck

programmering för högstadiet

mikael tylmad pontus walck

Mikael Tylmad

Pontus Walck ISBN 978-91-40-69232-0

789140 692320

mikael tylmad pontus walck