9789151100142 by Smakprov Media AB

Programmering 1

JavaScript

Mikael Tylmad Pontus Walck

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

. . . . . . .

7 7 8 11 12 12 14 15

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

. . . . . . . .

19 19 21 21 24 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 . . . . . . .

. . . .

45 45 47 49 50

5 En zombieapokalyps med objekt och Många zombier med objektorientering . . En zombieapokalyps med arrayer . . . . . Kombinera arrayer med loopar . . . . . . Ett komplett zombiespel . . . . . . . . . .

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

. . . .

57 57 59 60 61

6 Datastrukturer Vektorer/arrayer . . . . . . . . Enkellänkade listor . . . . . . Dubbellänkade listor . . . . . Binära träd . . . . . . . . . . . Hashtabeller . . . . . . . . . . Enkellänkad lista i JavaScript

. . . . . .

67 67 68 69 69 71 72

7 Programmering och matematik: Fraktaler Vad är en fraktal? . . . . . . . . . . . . . . . . . . Lindenmayersystem och sköldpaddsgrafik . . . . Von Kochs snöflinga . . . . . . . . . . . . . . . . Serpinskis triangel . . . . . . . . . . . . . . . . . . Serpinskis matta . . . . . . . . . . . . . . . . . . . Drakkurvan . . . . . . . . . . . . . . . . . . . . . Hilbertkurvan . . . . . . . . . . . . . . . . . . . . Ett grässtrå . . . . . . . . . . . . . . . . . . . . . Mandelbrotmängden och juliamängden . . . . .

. . . . . . . . .

79 79 80 88 89 90 91 92 93 94

8 Programmering och fysik Tid, hastighet och sträcka . . . . . . . . . . . . Konstant acceleration (exempelvis gravitation) Kastparabler . . . . . . . . . . . . . . . . . . . . Pendelrörelser . . . . . . . . . . . . . . . . . . . Rörelsemängd och kinetisk energi . . . . . . . .

. . . . .

103 103 104 107 110 112

9 Fördjupningsuppgifter

. . . . . .

. . . . .

127

Inledning Undervisning i programmering 1 på gymnasiet har traditionellt byggt på verktyg och programmeringsspråk från industrin, både för att lärarnas kompetens kommit därifrån och för att industrin sponsrat skolorna med billiga eller gratis licenser på dyra programvaror. Det har dock gjort att eleverna konfronterats med onödigt avancerade miljöer som är svåra att köra på egna datorer, och lärarna har tvingats hänga med i nya versioner där funktionerna egentligen varit riktade mot yrkesprogrammerare. Den här boken kommer från ett annat håll, och är tänkt att vara mer lättillgänglig både för lärare och elever. Programmeringsspråket som används här är JavaScript, det dominerande språket för webbprogrammering men också ett språk som passar för att undervisa i grundläggande programmering. Det har ett flexibelt typsystem som stödjer både objektorientering, funktionell och gammal hederlig imperativ programmering. Koden skriver eleverna primärt i en webbaserad miljö som fungerar bra på datorer med en modern webbläsare, men också på chromebooks, surfplattor och mobiler. Den webbaserade miljön finns tillgänglig öppet på: http://www.koda.nu/ . . . och gör det enkelt att komma igång. Men det går också att skriva koden i lokala filer på en dator, som man sedan öppnar med en webbläsare. Boken ska täcka det centrala innehållet i programmering 1, PRRPRR01, enligt GY 2011 med uppdateringar i augusti 2017. Den innehåller också två kapitel med tillämpad programmering i matematik och fysik, som med fördel kan användas för ämnesöverskridande undervisning. Sist i boken finns ett kapitel med fördjupningsuppgifter för den som vill utmanas att själv programmera några klassiska spel. Stockholm, februari 2018 Mikael Tylmad och Pontus Walck

Kapitel 4

Loopar Det är vanligt att programmerare vill att datorn ska utföra ungefär samma sak många gånger. Då är det lätt att koden blir så här:

circle(100, circle(200, circle(300, circle(400, circle(500, circle(600, circle(700,

200, 200, 200, 200, 200, 200, 200,

40, 40, 40, 40, 40, 40, 40,

"orange"); "orange"); "orange"); "orange"); "orange"); "orange"); "orange");

Här vill vi rita sju cirklar och väljer att göra det med sju anrop till funktionen circle. Det fungerar, men det är ingen bra lösning. Om vi vill göra tusentals cirklar så blir vi tvungna att sitta i många timmar och skriva nästan samma kodrad om och om igen. Programmering är visserligen väldigt roligt, men det finns gränser för hur många rader man orkar skriva. Ibland vill man dessutom att programmet ska göra något i all oändlighet, till exempel läsa av muspekarens position och spara den i en variabel.

while-loopar Det finns två sorters loopar som finns i nästan alla programmeringsspråk, while-loopar och for-loopar. Vi börjar med while eftersom det är lättare. 45

Loopar

var x = 100; while (x <= 700) { circle(x, 200, 40, "orange"); x += 100; }

Ordet while kan översättas till så länge som. Det innebär att koden mellan måsvingarna körs om och om igen så länge som villkoret är uppfyllt. I det här exemplet sätter vi variabeln x till 100 och kör loopen så länge som x är mindre än eller lika med 700. Varje gång ritas en cirkel ut och variabeln ökas med 100. Resultatet blir alltså exakt samma bild. Vi får sju cirklar men behövde bara skriva circle en gång, och om vi plötsligt vill ha tusen cirklar så behöver vi bara ändra på ett ställe.

Figur 4.1: Många cirklar blir det

Uppgift 4.1

While rektanglar

Rita ett antal rektanglar bredvid varandra med hjälp av en while– loop. Börja med att rita ut 10 rektanglar och ändra sedan koden så att användaren får bestämma antalet. Kommer du ihåg funktionen prompt?

Loopar

for-loopar for-loopar är lite mer invecklade, men de gör koden kortare. I JavaScript kan det se ut så här: for (var x = 100; x <= 700; x += 100) { circle(x, 200, 40, "orange"); }

Den här koden gör exakt samma sak som det förra exemplet med while, circle kommer att anropas sju gånger och resultatet ser likadant ut. En for-loop består av fyra delar: 1. Kod som körs före loopen 2. Kod som testar om innehållet i loopen ska köras 3. Kod som körs efter varje varv 4. Själva koden som man vill köra flera gånger

// DEL 1 DEL 2 DEL 3 for (var x = 100; x <= 700; x += 100) { // DEL 4 }

De tre första delarna står inom parenteser och separeras med semikolon, och den fjärde är det som står mellan måsvingarna. Först körs startkoden en gång, i det här fallet var x = 100. Variabeln x skapas, och får värdet 100. Före varje varv, även det första, kontrollerar for-loopen om testet säger att kodblocket ska köras. Testet är här: x <= 700, vilket kan översättas till: Är innehållet i variabeln x mindre än eller lika med 700? Inför första varvet kommer testet att svara ja, 100 är ju mindre än 700. Det betyder att loopens kodblock kommer att köras en gång. Efter att kodblocket körts kommer vi till den tredje delen av första raden. Den innehåller koden: x += 100 vilket betyder att variabeln x ökas med 100. Om x innehöll talet 100 så kommer den efter detta att innehålla talet 200. Därefter börjar loopen om med testet. Dessa fyra delar finns även i while-loopar, fast man hanterar dem i ordning för hand. Titta på det tidigare exemplet och försök själv att hitta sambanden! 47

Loopar

Om vi vill göra fler, lite mindre, cirklar kan vi ändra loopen och se till att x ökas med ett mindre tal varje varv. Det går också att ändra villkoret som avbryter loopen så att den fortsätter längre. for (var x = 10; x <= 790; x += 10) { circle(x, 200, 4, "orange"); }

Hur många cirklar kommer loopen att rita ut? Försök lista ut det innan du går till nästa sida.

Figur 4.2: Gör det här utan loopar om du orkar!

Uppgift 4.2

For rektanglar

Rita jättemånga rektanglar med hjälp av en for–loop. Gör så att deras positioner, storlekar och färger blir slumpmässiga.

Loopar

Hur startar vi en zombie-apokalyps? Om vi återbesöker zombiekoden som vi skrev i förra kapitlet så kan vi nu kombinera det med loopar för att skapa många fler zombier: for (var i = 0; i < 100; i++) { drawZombie(random(totalWidth), random(totalHeight)); }

Vi har tidigare nämnt variablerna totalWidth och totalHeight, som talar om hur bred och hur hög användarens webbläsare är. För att få en slumpmässig plats någonstans på skärmen kan man alltså ange random(totalWidth) som x-koordinat och random(totalHeight) som y-koordinat.

Figur 4.3: Zombie-apokalypsen är här!

Uppgift 4.3

Terminators!

Apokalypsen är här, men inte med Zombies utan Terminators. Du ska skapa 500 terminators med hjälp av en for–loop och din terminator-funktion från tidigare kapitlet.

Loopar

Skapa konst med loopar Man kan enkelt skapa konst med hjälp av loopar. Titta exempelvis på detta magnifika verk:

var step = 100; var xMid = totalWidth/2; var yMid = totalHeight/2; for (var y = 0; y <= totalHeight; y += step) line(xMid, yMid, totalWidth, y, 1, "black"); for (var y = 0; y <= totalHeight; y += step) line(xMid, yMid, 0, y, 1, "black"); for (var x = 0; x <= totalWidth; x += step) line(xMid, yMid, x, totalHeight, 1, "black"); for (var x = 0; x <= totalWidth; x += step) line(xMid, yMid, x, 0, 1, "black");

Koden bakom detta konstverk består av fyra loopar, där streck ritas ut från mitten till skärmens alla kanter, en kant per loop. Studera koden noga så kommer du kunna lösa uppgifterna som kommer enkelt.

Loopar

Skapa följande bilder med hjälp av loopar

Uppgift 4.4

Strecken 1

Uppgift 4.5

Strecken 2

Loopar

Uppgift 4.6

Strecken 3

Uppgift 4.7

De koncentriska cirklarna

Loopar

Uppgift 4.8

Nu bรถrjar strecken bli komplicerade

Loopar

Uppgift 4.9

Schackbrädet

Rita ett schackbräde med hjälp av loopar. I koden ska det bara finnas en rad som ritar en svart rektangel. För att lösa denna uppgift kommer du att behöva modulo-operatorn, %, som tar reda på resten efter en heltalsdivision. Det betyder exempelvis att 5 % 2 är 1. Ofta kombineras modulo med en for-loop och en if-sats för att få något att hända bara varannat varv i en loop. for (var i = 0; i < 10; i++) { if (i % 2 == 0) { circle(i * 20, 200, 50, "red"); } }

Loopar

Sammanfattning - Kapitel 4 Det finns två sorters loopar som finns i nästan alla programmeringsspråk, while-loopar och for-loopar. var x = 100; while (x <= 700) { circle(x, 200, 40, "orange"); x += 100; }

Ordet while kan översättas till så länge som. Det innebär att koden mellan måsvingarna körs om och om igen så länge som villkoret är uppfyllt. I det här exemplet sätter vi variabeln x till 100 och kör loopen så länge som x är mindre än eller lika med 700. Varje gång ritas en cirkel ut och variabeln ökas med 100. for (var x = 100; x <= 700; x += 100) { circle(x, 200, 40, "orange"); }

En for-loop består av fyra delar: 1. Kod som körs före loopen 2. Kod som testar om innehållet i loopen ska köras 3. Kod som körs efter varje varv 4. Själva koden som man vill köra flera gånger De tre första delarna står inom parenteser och separeras med semikolon, och den fjärde är det som står mellan måsvingarna.

Programmering 1

JavaScript

Programmering 1 JavaScript lär ut grunderna i programmering med programspråket JavaScript. Det är ett av de mest populära språken bland webbutvecklare och är enkelt att lära sig. Boken är främst avsedd att användas som kurslitteratur till gymnasiekursen Programmering 1 och innehållet följer skolverkets beskrivning av kursen enligt uppdateringar som gäller 2017. Innehållet i boken kräver ingen tidigare erfarenhet av programmering, men en viss datorvana förutsätts. Boken behandlar grunderna i programmering som t.ex. variabler, satser och funktioner samt hur man hanterar grafik. Koden skrivs primärt i webbaserad miljö, vilket fungerar utmärkt med en dator med modern webbläsare, men också på chromebooks, surfplattor och mobiler. Läromedlet är lätt att komma igång med eftersom programmeringen byggs upp steg för steg i olika övningar där varje övning ger omedelbar respons. I många övningar finns det spelmoment som gör programmeringen mer lustfylld än i traditionella programmeringsböcker för gymnasiet. I slutet av boken finns några specialområden som handlar om fraktaler, mekanik och spelkonstruktion där eleven kan välja ett område efter intresse. Till boken kommer att finnas en lärarwebb med extramaterial som underlättar lärarens arbete.

Författare till Programmering 1 JavaScript är Mikael Tylmad och Pontus Walck, båda med lång erfarenhet av undervisning i programmering.

ISBN 978-91-51-10014-2

789151 100142