9789144125169

Programmera på riktigt PROGRAMMERA PÅ RIKTIGT För lärare på högstadiet

Ja n Sk a nshol m

F Ö R L Ä R A R E PÅ H ÖG S TA D I E T

JAN SKANSHOLM

Kopieringsförbud Detta verk är skyddat av upphovsrättslagen. Kopiering, utöver lärares och studenters begränsade rätt att kopiera för undervisningsändamål enligt Bonus Copyright Access kopieringsavtal, är förbjuden. För information om avtalet hänvisas till utbildningsanordnarens huvudman eller Bonus Copyright Access.

Vid utgivning av detta verk som e-bok, är e-boken kopieringsskyddad.

Den som bryter mot lagen om upphovsrätt kan åtalas av allmän åklagare och dömas till böter eller fängelse i upp till två år samt bli skyldig att erlägga ersättning till upphovsman eller rättsinnehavare.

Studentlitteratur har både digital och traditionell bok­utgivning. Studentlitteraturs trycksaker är miljöanpassade, både när det gäller papper och tryckprocess.

Art.nr 39883 ISBN 978-91-44-12516-9 Upplaga 1:1 © Jan Skansholm och Studentlitteratur 2018 studentlitteratur.se Studentlitteratur AB, Lund Sakgranskning: Mårten Möllerström Omslag: Francisco Ortega Printed by Dimograf, Poland 2018

Innehåll Förord 4 1

Program 6 1.1 Programmerade maskiner 6 1.2 Vad är ett program? 9 1.3 Olika slags program 10

8 Vi upprepar 68 8.1 while-satsen 68 8.2 break-satsen 71 8.3 for-satsen 72 8.4 Nästlade repetitionssatser 77

2

Vi lägger grunden 14 2.1 Webbläsare 14 2.2 Texteditor 14 2.3 Hämta filer 18 2.4 Starta programmen 18 2.5 Kommentarer 21

9 Algoritmer 80 9.1 Vad är en algoritm 80 9.2 Pseudokod och strukturdiagram 80 9.3 Stegvis förfining 82 9.4 Ett exempel 83

3

Vi börjar programmera 22 3.1 Variabler och typer 22 3.2 Ett fullständigt program 25 3.3 Bilder 30

10 Funktioner 86 10.1 Deklarationer av funktioner 86 10.2 Anrop av funktioner 89 10.3 Lokala variabler 93

4

När det blir fel 32 4.1 Syntaxfel 32 4.2 Exekveringsfel 33 4.3 Logiska fel 35

5

Vi räknar 36 5.1 Typen Number 36 5.2 Literaler 36 5.3 Att läsa in numeriska data 37 5.4 Att visa numeriska data 39 5.5 Aritmetiska uttryck 41 5.6 Objektet Math 45

6

7

Vi ritar 48 6.1 Objektet style 48 6.2 Elementtypen canvas 50 6.3 Rektanglar 52 6.4 Flytta och rotera 53 6.5 Skuggor 55 6.6 Genomskinliga figurer 56 6.7 Linjer och figurer 56 Vi väljer 60 7.1 if-satsen 60 7.2 Nästlade if-satser 63 7.3 Logiska uttryck 64

© Jan Skansholm och Studentlitteratur

11 Arrayer 96 11.1 Hur man skapar en array 96 11.2 Indexering 97 11.3 Inläsning till arrayer 100 11.4 Några metoder för arrayer 102 11.5 Arrayer och referenser 105 11.6 Arrayer och funktioner 107 12 Att hantera text 112 12.1 Tecken och teckenkoder 112 12.2 Mer om typen String 114 12.3 Några metoder för typen String 115 12.4 Datum och tid 119 12.5 Inläsning från textfiler 120 13 Vi ritar mera 123 13.1 Cirklar och bågar 123 13.2 Rörliga figurer 127 13.3 Rita texter 129 13.4 Arrayer och grafik 130 Sakregister 133

3

3 Vi börjar programmera I detta kapitel får du lära dig lite om de viktigaste byggstenarna, nämligen satser, variabler och typer. Vi visar också hur man i ett program kan läsa in data (texter och matematiska tal) som användaren skriver.

3.1 Variabler och typer När man räknar ut något kan man ibland inte göra hela beräkningen på en gång, utan man måste räkna ut en sak i taget. Efter varje steg får man fram ett mellanresultat. Man måste komma ihåg mellanresultaten eftersom man behöver dem för att räkna ut slutresultatet. Använder man papper och penna är detta inget problem; man skriver helt enkelt ner mellanresultaten. Även i ett datorprogram måste beräkningar kunna utföras stegvis och man måste kunna spara mellanresultat för att kunna använda dem senare. Då använder man variabler. En variabel är som en ask, en ask som man kan lägga data i. Man kan ha många variabler i ett program.

För att hålla reda på dem ger man dem därför namn. Innan man använder en variabel första gången ska man deklarera den. Man skriver då ordet let följt av variabelns namn. Man kan t.ex. skriva let n;

Här har vi gett variabeln namnet n. Man får själv hitta på namn på sina variabler. Ett namn får bara innehålla bokstäverna a–z, siffror, dollartecken och understrykningstecken _ och namnet får inte börja med en siffra. Man kan använda både stora och små bokstäver. När det gäller variabler är det lämpligt att man börjar med en liten bokstav. Ofta använder man stora bokstäver för att dela upp namn som består av flera ord. Några exempel är minText, ettOrd och minstaVarde. Stora och små bokstäver betraktas som olika. Det betyder t.ex. att enBok och EnBok är namn på två olika variabler.

Ordet let är ett s.k. reserverat ord (keyword). Sådana ord har en speciell betydelse i språket. I denna bok skriver vi alla reserverade ord med fet stil, men det behöver du inte göra när du skriver dina program.

22

© Jan Skansholm och Studentlitteratur

3.1 Variabler och typer

Variabeldeklarationer let����������������������������������;

Variabelnamnen består av bokstäver a–z, siffror, dollartecken och understrykningstecken. De får inte börja med en siffra.

För att lägga ett värde i en variabel använder man en s.k. tilldelningssats.

Om man t.ex. vill att variabeln n ska innehålla värdet 5 skriver man n = 5;

När denna sats utförts kan man tänka sig att det ser ut som i figur 3.1 där ”asken” n innehåller värdet 5.

Variabeln n: 5

Figur 3.1 En variabel som innehåller ett tal

Det hade också gått bra att tilldela ett värde till variabeln samtidigt som man deklarerar den. Man säger då att man initierar variabeln. let n = 5;

I JavaScript får man tyvärr använda en variabel som man inte deklarerat. Men om du skriver "use strict" i början av programmet används s.k. strict mode och då är detta inte tillåtet. I strict mode upptäcks också andra typer av fel. Skriv därför alltid "use strict"!

En variabel i JavaScript kan innehålla data av olika slag. Variabelns typ kan ändras. Vilken typ den får beror på vad man tilldelar den. Om man ger den ett matematiskt tal, ett s.k. numeriskt värde, får den typen Number. Variabeln n har alltså typen Number. Vi ska använda oss av variabler av typen Number mycket i de kommande kapitlen.

En variabel som tilldelas en text får typen String. let s = "Hej!";

Det ser ut som i figur 3.2.

Variabeln s: "Hej!" © Jan Skansholm och Studentlitteratur

Figur 3.2 En variabel som innehåller en text (en String) 23

3 Vi börjar programmera

Tilldelning ����������������������;

Värdet av uttrycket till höger om likhetstecknet beräknas först.

Detta värde placeras sedan i variabeln till vänster.

Variabelns tidigare värde förstörs.

Variabelns typ bestäms av vad man tilldelar den.

En tredje viktig typ är Object. Denna typ används när man ska beskriva något lite mer komplicerat, sådant som inte kan beskrivas med ett enkelt numeriskt värde eller en text. I programmet demo.js i förra kapitlet fanns t.ex. följande rad: let r = document.createElement("h3");

På denna rad skapas ett nytt objekt. Uttrycket till höger om likhetstecknet ger som resultat en referens (en pekare) till det nya objektet. Denna referens tilldelas till variabeln r. Variabeln r får då typen Object. Detta illustreras i figur 3.3.

Variabeln r:

Attribut (Egenskaper) Metoder (Funktioner)

Figur 3.3 En variabel som refererar till ett objekt

Som du ser i figuren innehåller ett objekt olika egenskaper, s.k. attribut.

Man kan avläsa eller ändra ett attribut genom att skriva variabelns namn följt av en punkt och sedan attributets namn. I programmet demo.js fanns t.ex. följande rad som ändrade attributet innerHTML: r.innerHTML = "Detta är en rubrik";

Ett objekt kan också ha s.k. funktioner, eller metoder som de kallas när de ligger i ett objekt. En metod gör något och den kan ge ett resultat. Man kan anropa (call på engelska) en metod. Då kommer de programrader som finns inne i metoden att utföras. Man anropar en metod genom att skriva variabelns namn, en punkt och sedan metodens namn följt av parenteser. Innanför parenteserna kan man ge information till metoden, s.k. parametrar eller argument. Vi kan t.ex. skriva:

24

© Jan Skansholm och Studentlitteratur

3.2 Ett fullständigt program let t = r.toString();

Här anropar vi metoden toString för objektet r. Vi ger inga argument, men vi måste ändå skriva de tomma parenteserna. Metoden toString ger som resultat ett värde av typen String och detta värde tilldelar vi till variabeln t. Denna får då typen String.

En variabel som ännu inte tilldelats något värde får värdet undefined.

Det gäller t.ex. för variabeln x när man utfört följande rad: let x;

3.2 Ett fullständigt program Uppgift 3.1 Gå till bokens webbsida www.studentlitteratur.se/39883 och välj fliken Extramaterial. I mappen Filer till uppgifter finns filen hej.js. Ladda ner denna fil till den lokala mapp som du skapade i uppgift 2.2. Starta sedan programmet med hjälp av start.html så som i uppgifterna 2.7 och 2.9.

Skriv ditt namn i rutan och tryck på knappen.

Som du märkte i uppgiften så frågade programmet efter indata och läste in det du skrev. Detta program innehåller de rader som behövs för att man ska kunna läsa indata. När du i fortsättningen ska skriva program som läser indata kan du därför kopiera de rader du behöver från detta program.

Vi visar först hela programmet. Sedan ska vi gå igenom det en bit i taget och förklara hur det fungerar. "use strict"; // Fråga let fraga = document.createElement("p"); document.body.appendChild(fraga); fraga.innerHTML = "Vad heter du?"; // Inmatningsruta let ruta = document.createElement("input"); document.body.appendChild(ruta);

© Jan Skansholm och Studentlitteratur

25

3 Vi börjar programmera // Knapp let knapp = document.createElement("button"); document.body.appendChild(knapp); knapp.style.marginLeft = "10px"; knapp.innerHTML = "Tryck"; knapp.onclick = klickade; // Resultat let resultat = document.createElement("p"); document.body.appendChild(resultat); // Hit kommer man när användaren klickar på knappen function klickade() { let svar = ruta.value; resultat.innerHTML = "Hej " + svar; }

Den sida som ska visas i webbläsaren innehåller fyra element: en fråga med texten "Vad heter du", en inmatningsruta, en knapp och ett element längst ner där resultatet från programmet visas. Du kan se dessa element i figur 3.4, där vi har pekat ut dem.

fråga inmatningsruta resultat

Vad heter du?

Maja

knapp

Tryck

Hej Maja

Figur 3.4 Programmet hej.js Den första raden i programmet anger att vi vill använda strict mode så att vi får hjälp med att upptäcka en del enkla fel.

De rader som kommer sedan i programmet innehåller s.k. satser (statements på engelska). Det finns också kommentarer men de påverkar inte vad programmet gör. En sats är ett steg i programmet och varje sats gör något speciellt. Man ska avsluta varje sats med ett semikolon. Man får lägga in mellanslag (blanka tecken) eller radbrytningar i en sats. Men man får inte göra det mitt i ett ord eller en text.

Den första satsen i programmet ser ut så här: 26

© Jan Skansholm och Studentlitteratur

3.2 Ett fullständigt program let fraga = document.createElement("p");

När man laddar in en sida i webbläsaren skapas automatiskt ett objekt som heter document. Detta objekt innehåller information om vad som ska visas på webbsidan. Här anropar vi metoden createElement i objektet document. Parametern är "p". Metoden createElement kan skapa element av olika slag. Parametern anger vilket slags element det ska vara. Anropet skapar alltså ett element av typen p, en s.k. paragraf.

När man kommer tillbaka från createElement får man som resultat en referens (en pekare) till ett objekt som beskriver det nya elementet.

Denna referens sparar vi i en variabel som heter fraga.

På nästa rad i programmet anropar vi metoden appendChild. document.body.appendChild(fraga); body finns i objektet document och refererar till själva innehållet i dokumentet. Metoden appendChild placerar ut ett element sist i doku-

mentet. Parametern är en referens till det element som ska placeras ut.

Eftersom vi ska placera ut det element som skapades på raden ovanför ger vi variabeln fraga som parameter.

De element som visas på en sida kan ha olika egenskaper, attribut. Attributet innerHTML innehåller texten som ska visas. På följande rad anger vi att elementet fraga ska visa texten "Vad heter du?". fraga.innerHTML = "Vad heter du?";

Uppgift 3.2 Ändra i programmet så att det istället visar texten "Ditt namn?" överst.

Tips: Har du ändrat i ett program och sparat det och vill köra det på nytt behöver du inte starta om webbläsaren. Du behöver bara klicka på symbolen för ”Hämta sidan igen” som finns överst på webbläsarens menyrad.

Det andra elementet är en inmatningsruta. Den läggs dit med satserna: let ruta = document.createElement("input"); document.body.appendChild(ruta);

Vi anropar metoden createElement en gång till, men denna gång ger vi parametern "input". Då skapas ett element av typen input. Vi sparar referensen i en variabel med namnet ruta och lägger sedan till elementet i dokumentet. Vi behöver inte här ge värden till några attribut. © Jan Skansholm och Studentlitteratur

27

3 Vi börjar programmera

Uppgift 3.3 Ett element av typen input kan ha attribut. Ett sådant är placeholder.

Detta innehåller en text som visas i rutan innan användaren har skrivit något. Texten kan vara ett tips till användaren. Gör ett tillägg i programmet så att attributet placeholder för elementet ruta får värdet "Namn".

Vi väntar med att diskutera knappen och tar det fjärde elementet först.

Det ska användas för att visa resultatet. Det ska vara av typen paragraf och skapas på samma sätt som det översta elementet. Skillnaden är att vi inte talar om vilken text som ska visas. Det vet vi ju inte förrän vi läst in det användaren skrivit. Elementet skapas med raderna: let resultat = document.createElement("p"); document.body.appendChild(resultat);

Nu ska vi titta på raderna som skapar knappen. let knapp = document.createElement("button"); document.body.appendChild(knapp); knapp.style.marginLeft = "10px"; knapp.innerHTML = "Tryck"; knapp.onclick = klickade;

På de två första raderna anropar vi metoderna createElement och appendChild på samma sätt som för de andra elementen. Fast denna gång skapar vi ett element av typen button. På den tredje raden ger vi attributet marginLeft värdet "10px". Då kommer knappen att få en marginal till vänster om sig på 10 pixlar (bildpunkter). Hade vi inte haft med denna sats hade knappen hamnat direkt till höger om inmatningsrutan. Attributet innerHTML innehåller som tidigare texten som ska visas i elementet. Här säger vi att texten "Tryck" ska visas.

Den sista raden talar om vad som ska hända när användaren trycker på knappen. Attributet onclick ska innehålla en referens till en funktion.

När man trycker på knappen kommer denna funktion att anropas automatiskt. Här anger vi att en funktion med namnet klickade ska anropas. Funktionen klickade ligger sist i filen hej.js. Den ser ut så här: function klickade() { let svar = ruta.value; resultat.innerHTML = "Hej " + svar; }

28

© Jan Skansholm och Studentlitteratur

3.2 Ett fullständigt program En funktion börjar med ordet function. Sedan kommer funktionens namn. Här har vi gett den namnet klickade. Efter namnet följer parenteser. Innanför dessa räknar man upp funktionens parametrar.

Denna funktion har inga parametrar. Därför är det tomt mellan parenteserna.

En funktion innehåller ett antal satser. De omges med tecknen { och }.

Tecknen kallas vänsterklammer och högerklammer. När funktionen anropas kommer satserna i den att utföras. Funktionen klickade innehåller två satser. Den första avläser det som användaren skrev i inmatningsrutan. Texten finns i attributet value. Texten läggs i en variabel som vi ger namnet svar. Den andra satsen anger vad som ska visas i elementet resultat. I uttrycket "Hej " + svar betyder plustecknet att två texter ska slås ihop. Om användaren t.ex. skrivit in Maja, kommer den sammanslagna texten att bli "Hej Maja". När funktionen klickade kört färdigt väntar programmet tills användaren klickar på knappen igen.

Då anropas funktionen på nytt.

Uppgift 3.4 Det finns en funktion som heter alert. Man kan anropa den för att visa ett meddelande i en s.k. dialogruta. Som parameter ger man det som ska visas i dialogrutan. Lägg in ett anrop av alert på en ny rad inne i funktionen klickade. Ge texten "Du klickade" som parameter. Se vad som händer.

Uppgift 3.5 Skriv ett program som fungerar på samma sätt som programmet hej.js, men det nya programmet ska ha två inmatningsrutor. I den första ska man skriva sitt förnamn och i den andra sitt efternamn. I resultatet ska både föroch efternamnet visas. Tips: Kopiera koden för elementen fraga och ruta.

Klistra in den kopierade texten och byt namn på de kopierade elementen till fraga2 och ruta2. Du behöver också en ny variabel svar2 i funktionen klickade. Du kan skapa ett mellanrum mellan två texter som visas om du lägger till texten " " mellan texterna.

© Jan Skansholm och Studentlitteratur

29

3 Vi börjar programmera

3.3 Bilder Nu har du sett hur man kan skapa element som ska visas på en sida i webbläsaren. Du har sett elmenttyperna h3 (titel), p (paragraf), input (inmatningsruta) och button (knapp). Det är också ganska enkelt att visa bilder på webbsidan. Det ska vi demonstrera i detta avsnitt. Först ska du få provköra ett program, så att du får se hur det fungerar.

Uppgift 3.6 Ladda ner programmet bild.jpg från mappen Filer till uppgifter. Ladda också ner filen ugglor.jpg. Kör programmet. Då visas en inmatningsruta där du ska skriva namnet på en fil som innehåller en bild. Skriv ugglor.jpg. Då visas bilden i figur 3.5. Du kan också prova med att ladda ner och visa bilden i filen bokhylla.jpg.

Vilken bild vill du visa? ugglor.jpg

Tryck

Figur 3.5 Programmet bild.js

När vi skapar programmet du just har kört utgår vi från programmet hej.js, som du ju redan känner till. Vi behåller alla element som finns i hej.js. (Egentligen behöver vi inte elementet resultat längre, men

vi har det med ändå. Då kommer nämligen bilden att hamna på en ny rad och inte till höger om knappen.)

30

© Jan Skansholm och Studentlitteratur

3.3 Bilder Vi lägger till ett nytt element som ska ha typen img (image). Det gör vi på samma sätt som för de andra elementen: let bild = document.createElement("img"); document.body.appendChild(bild);

Nästa steg är att tala om för elementet bild vilken bild det ska visa.

Men det kan vi inte göra förrän vi läst vad den som kör programmet har skrivit i inmatningsrutan ruta. Vi ändrar därför i funktionen klickade så att den istället för att lägga en text i resultat talar om för elementet bild vad bildfilen heter. Det gör vi genom att tilldela filnamnet till attributet src (source). Funktionen klickade ser ut så här: function klickade() { bild.src = ruta.value; }

Uppgift 3.7 Fortsätt att köra programmet bild.js. I den förra övningen låg filerna ugglor.jpg och bokhylla.jpg i samma mapp som programmet. Det är enklast när det är så. Då är det bara att skriva bildfilens namn. Men det går också bra att visa en bild som ligger på nätet. Då skriver man den fullständiga adressen. Leta reda på en bild, t.ex. på Wikipedia, högerklicka på bilden och välj alternativet Kopiera bildadress. Klistra in adressen i inmatningsrutan.

Om man inte säger något om bildens storlek kommer den att få den storlek som den har när man laddar in den i programmet. Men man kan själv bestämma hur bred och hög bilden ska vara. Man använder då attributen width och height. Om man t.ex. vill att bilden ska vara 300 pixlar bred skriver man: bild.width = 300;

Uppgift 3.8 Öppna programmet bild.js i texteditorn. Lägg till satser som gör att bildens bredd och/eller höjd ändras. Du kan lägga satserna sist i funktionen klickade. Experimentera med att först bara ändra bredden, därefter bara höjden och sist både bredden och höjden och se vad som händer.

© Jan Skansholm och Studentlitteratur

31

Jan Skansholm är tekn.dr och har under lång tid varit verksam som universitetslektor vid Chalmers tekniska högskola och Göteborgs universitet.

Han har mångårig erfarenhet av programmeringsundervisning och är författare till ett stort antal böcker om programmering, både för universitetet och för gymnasiet. Han har färsk erfarenhet av undervisning i grundskolan och har nu skrivit denna bok för högstadiet.

PROGRAMMERA PÅ RIKTIGT FÖR LÄRARE PÅ HÖGSTADIET Programmera på riktigt är ett läromedel som är avsett för åk 7–9 och det täcker in den programmering som finns definierad i kursplanen för matematik. Denna bok är avsedd för lärare eller studenter som utbildar sig till lärare. I läromedlet ingår även en bok som är avsedd för elever.

Genom att arbeta praktiskt med uppgifter som laddas ner från webbsidan www.studentlitteratur.se/39883 lär man sig grundläggande programmering i JavaScript, som är ett av de mest använda programspråken. Boken ger generella kunskaper och utgör grund för fortsatt programmeringsundervisning på gymnasieoch högskolenivå.

Boken fungerar för datorer med Windows, eller Linux, för Chromebook och för Mac. Inga extra program behöver installeras och inga registreringar eller abonnemang på någon extern webbsida krävs.

Programmera på riktigt är avsedd för alla som undervisar eller ska undervisa i matematik på högstadiet. Den kan t.ex. användas vid utbildning och vidareutbildning av matematiklärare.

Art.nr 39883

studentlitteratur.se