9789144122809

PROGRAMMERA PÅ RIKTIGT F Ö R E LE V E R 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 39785 ISBN 978-91-44-12280-9 Upplaga 1:1 © Författaren och Studentlitteratur 2018 studentlitteratur.se Studentlitteratur AB, Lund Omslag: Francisco Ortega Formgivning, inlaga: Henrik Hast Printed by Interak, Poland 2018

Innehåll

Information till lärare 5 1 Program 9

Programmerade maskiner 10 Vad är ett program? 13 Olika slags program 14 Sammanfattning 18 2 Vi lägger grunden 19

Webbläsare 20 Texteditor 21 Hämta filer 24 Starta programmen 25 Kommentarer 28 Sammanfattning 30

4 När det blir fel 47

Syntaxfel 48 Exekveringsfel 50 Logiska fel 52 Sammanfattning 53 5 Vi räknar 55

Typen Number 56 Literaler 56 Att läsa in numeriska data 58 Att visa numeriska data 60 Aritmetiska uttryck 63 Objektet Math 68 Sammanfattning 72 6 Vi ritar 73

3 Vi börjar programmera 31

Variabler och typer 32 Ett fullständigt program 37 Bilder 43 Sammanfattning 46

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

Objektet style 74 Elementtypen canvas 77 Rektanglar 79 Flytta och rotera 81 Skuggor 83 Genomskinliga figurer 85 Linjer och figurer 86 Sammanfattning 90

3

7 Vi väljer 91

11 Arrayer 147

if-satsen 92 Nästlade if-satser 96 Logiska uttryck 98 Sammanfattning 102 8 Vi upprepar 103

while-satsen 104 break-satsen 108 for-satsen 110 Nästlade repetitionssatser 117 Sammanfattning 119 9 Algoritmer 121

Vad är en algoritm 122 Pseudokod och strukturdiagram 122 Stegvis förfining 124 Ett exempel 126 Sammanfattning 130 10 Funktioner 131

Deklarationer av funktioner 132 Anrop av funktioner 136 Lokala variabler 141 Sammanfattning 145

4

Innehåll

Hur man skapar en array 148 Indexering 150 Inläsning till arrayer 154 Några metoder för arrayer 157 Arrayer och referenser 161 Arrayer och funktioner 164 Sammanfattning 172 12 Att hantera text 173

Tecken och teckenkoder 174 Mer om typen String 177 Några metoder för typen String 179 Datum och tid 184 Inläsning från textfiler 185 Sammanfattning 189 13 Vi ritar mera 191

Cirklar och bågar 192 Rörliga figurer 197 Rita texter 199 Arrayer och grafik 201 Sammanfattning 204 Sakregister 205

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

Information till lärare

Från och med höstterminen 2018 gäller en ny kursplan för matematik i grundskolan. I den nya kursplanen ingår programmering som en del.

Denna bok täcker in den programmering som ingår i årskurserna 7–9.

Boken använder ett upplägg som kan användas direkt i klassrummet.

När jag skulle skriva boken hade jag följande tre målsättningar: ––Boken ska behandla det som anges i Skolverkets kursplan.

––Den ska fungera praktiskt i skolmiljön, speciellt i klassrummet.

––Det som lärs ut ska vara grundläggande och allmänt giltigt inom programmeringsområdet.

Den största stötestenen var den andra punkten. Det ska inte vara nödvändigt att ladda ner och installera någon speciell programvara på elevdatorerna. Sådan programvara kan nämligen ibland kräva licenser och avgifter. Dessutom kräver den ofta underhåll som behöver utföras av teknisk personal. Många skolor använder Chromebook och där är det inte ens möjligt att installera någon programvara.

Ett annat alternativ är då att använda sig av speciella webbplatser och utveckla och köra sina program där. Detta har också sina problem. För det mesta krävs det att eleverna var och en registrerar sig. Detta kan vara förknippat med krångel och kostnader. Dessutom gör man sig beroende av att den webbplats man valt inte förändras, läggs ner eller börjar ta ut avgifter. Sedan har vi förstås också risken att nätförbindelsen bryts mitt under en lektion.

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

5

Efter att ha brottats med dessa problem fann jag en lösning som fungerar: Programmeringen görs i språket JavaScript. Program skrivna i detta språk kan nämligen köras direkt i webbläsaren, till exempel i Google Chrome. Och en webbläsare finns ju redan i alla datorer. Ingen installation behövs. Vi behöver inte heller vara uppkopplade mot och beroende av någon speciell webbplats vi inte har kontroll över.

Genom att välja JavaScript som programspråk har vi också möjlighet att uppfylla den tredje av målsättningarna. JavaScript används i mängder av kommersiella webbprogram världen över. Det har en grundläggande syntax (regler för hur man skriver) som till stora delar överensstämmer med hur det ser ut i de för närvarande fyra mest använda programspråken (Java, C, C++ och C#). Därför kan vi lära ut sådant som är användbart överallt när man ska skriva program, sådant som eleverna förhoppningsvis kommer att ha nytta av i framtiden.

S M L XL

Man kan säga att boken har fyra ambitionsnivåer, S (kapitlen 1–6), M (kapitlen 7–9), L (kapitlen 10–11) och XL (kapitlen 12–13). Nivån S (small) ger en grundläggande uppfattning om hur program fungerar.

Man får lära sig att använda variabler, beräkna matematiska formler och att anropa färdiga funktioner. Man har kommit en bra bit på väg men inte riktigt uppfyllt det som står i kursplanen. Nivån M (medium) ger de verktyg man behöver för att kunna konstruera algoritmer. Med lite god vilja kan man säga att man då täckt in det mesta i kursplanen. Nivån L (large) introducerar funktioner och arrayer (fält). Har man nått denna nivå har man definitivt uppfyllt kraven i kursplanen. Nivån XL (extra large) tar upp sådant som är bra att känna till: texthantering, läsning av filer, mer avancerad grafik och rörliga figurer. Men denna nivå får väl närmast betraktas som överkurs.

Det är meningen att eleverna ska arbeta med boken från början till slut, en bit i taget. Programmering är något mycket praktiskt. Ska man lära sig att programmera måste man försöka skriva program själv. Det går inte att lära sig bara genom att titta på exempel eller på hur andra gör.

6

I n f o r m at i o n t i l l l ä r a r e

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

Därför finns det uppgifter inlagda i texten. Och det är meningen att eleverna ska lösa dessa uppgifter. Låt dem inte hoppa över uppgifterna!

Det är en fördel om webbläsaren Google Chrome kan användas när eleverna ska lösa uppgifterna i boken. Kontrollera därför i förväg att Chrome finns installerad på de datorer eleverna ska använda. Om de kör på Chromebook är Google Chrome alltid installerad, men om de kör på andra datorer och Chrome inte är installerad kan man hämta den och installera den från www.google.se/chrome/browser/desktop/index.html.

Det är bra om du i förväg testar att lägga till texteditorn Caret på någon eller några av elevernas datorer så att du vet hur det fungerar på dessa.

Hur man gör beskrivs i uppgift 2.2 på sidan 21. Prova gärna också att skapa en arbetsmapp och att ladda ner de filer som behövs, så som beskrivs i uppgift 2.3 på sidan 22 och i avsnittet Hämta filer på sidan 24.

Du måste förstås som lärare vara beredd att svara på en massa frågor.

Du förbereder dig bäst genom att själv i förväg arbeta dig igenom hela boken och lösa alla uppgifter. Förvissa dig om att du förstår allt och var noga med detaljerna. Det är dem du kan få frågor på.

Upplägget i denna bok har testats i ”skarpt läge” av eleverna i klass 8 C på Lundenskolan i Göteborg under ledning av matematikläraren Andreas Stomberg. Jag vill rikta ett stort tack till dem alla för att de har ställt upp som försökskaniner och ger mig värdefull återkoppling.

Lycka till! Jag hoppas att du kommer att upptäcka hur roligt och utmanande det kan vara att programmera och att lära ut programmering.

Göteborg i februari 2018 Jan Skansholm

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

I n f o r m at i o n t i l l l ä r a r e

7

Vi börjar programmera I detta kapitel får du lära dig lite om de viktigaste byggstenarna, nämligen satser, variabler och typer. Dessutom får du se hur man kan ge indata till ett program.

3

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 som man måste komma ihåg. Använder man papper och penna är detta inget problem; man skriver helt enkelt ner mellanresultaten.

VARIABEL

DEKLARER A EN VARIABEL

Även i ett datorprogram måste beräkningar kunna utföras stegvis, och man måste kunna spara mellanresultat. 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 till exempel skriva let n;

Här har vi gett variabeln namnet n. Man får själv hitta på namn på sina variabler.

RESERVER AT ORD

Ordet let är ett så kallat 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.

Variabeln n: 5 FIGUR 3.1 EN VARIABEL SOM INNEHÅLLER ETT TAL.

32

3. Vi börjar programmera

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

UPPGIFT 3.1

–– I mappen Filer till uppgifter som du laddade ner från bokens webbsida finns filen variabler.js. Leta upp denna fil i din arbetsmapp.

–– Starta texteditorn Caret och öppna filen variabler.js. Den innehåller programraden let n;.

–– Lägg till en rad där du deklarerar en annan variabel på samma sätt.

Hitta på ett eget namn för variabeln. Låt variabeln ha ett namn som innehåller bokstäver och siffror.

–– Kan namnet innehålla bokstäverna å, ä och ö? (Du får en röd felmarkering i kanten om det är fel?)

–– Lägg sedan till ytterligare en variabel och låt variabeln ha ett namn som börjar med en siffra. Går det bra?

Man kan använda både stora och små bokstäver i variabelnamn. Det är 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 till exempel att enBok och EnBok är namn på två olika variabler.

Variabeldeklarationer let variabelnamn1, variabelnamn2, ...;

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

UPPGIFT 3.2

–– Fortsätt med programmet från uppgift 3.1 –– Stryk alla rader som inte är korrekta.

–– Lägg sedan till raden n = 5;

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

3. Vi börjar programmera

33

TILLDELNINGSSATS

I uppgiften har du lagt till en så kallad tilldelningssats. När denna sats utförts kan du tänka dig att det ser ut som i figur 3.1 där ”asken” n innehåller värdet 5.

Du hade också kunnat tilldela ett värde till variabeln samtidigt som du deklarerar den. Man säger då att man initierar variabeln. let n = 5;

Tilldelning variabelnamn = uttryck;

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.

UPPGIFT 3.3

–– Fortsätt med programmet från uppgift 3.1. Deklarera en variabel till.

Hitta på ett eget namn för den och initiera den så att den får värdet 9.

USE STRICT

TYPER

34

Du ser att det står "use strict"; på första raden i det program du har jobbat med. Om du har med denna rad i början av programmet används så kallat strict mode och då kontrolleras att du inte gör vissa enkla, dumma fel, till exempel använder en variabel som du inte deklarerat. Skriv därför alltid "use strict"; på första raden.

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.

3. Vi börjar programmera

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

UPPGIFT 3.4

–– I mappen Filer till uppgifter som du laddade ner från bokens webbsida finns filen typer.js.

–– Leta upp denna fil i din arbetsmapp och starta sedan programmet med hjälp av start.html så som i uppgifterna 2.8 och 2.10.

–– I programmet finns en rad där en variabel med namnet v deklareras.

Programmet skriver ut vilken typ och värde variabeln v har. Prova med att tilldela v olika värden, t.ex. matematiska värden och texter och kör om programmet.

–– Vad händer om du lägger till raden v = r; efter deklarationen?

–– 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.

Här kommer lite förklaringar till det du just provkört. En variabel som ännu inte tilldelats något värde får typen undefined och värdet undefined. Det gäller till exempel för variabeln x när man utfört följande rad: let x;

Om man tilldelar en variabel ett matematiskt tal, ett så kallat numeriskt värde, får den typen Number. Variabeln n i figur 3.1 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.

TYPEN

Num ber

TYPEN

String

let s = "Hej!";

Det ser ut som i figur 3.2.

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

3. Vi börjar programmera

35

Variabeln s: "Hej!" FIGUR 3.2 EN VARIABEL SOM INNEHÅLLER EN TEXT (EN

TYPEN

Object

String ).

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 till exempel 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.

ATTRIBUT

Som du ser i figuren innehåller ett objekt olika egenskaper, så kallade 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 till exempel följande rad som ändrade attributet innerHTML: r.innerHTML = "Detta är en rubrik";

Variabeln r:

Attribut (Egenskaper) Metoder (Funktioner)

FIGUR 3.3 EN VARIABEL SOM REFERER AR TILL ETT OBJEKT.

36

3. Vi börjar programmera

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

Ett objekt kan också ha så kallade 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 program­ rader 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å kallade parametrar eller argument. Vi kan till exempel skriva:

FUNKTIONER (METODER)

ANROPA EN METOD

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.

Ett fullständigt program UPPGIFT 3.5

–– I mappen Filer till uppgifter som du laddade ner från bokens webbsida finns filen typer.js. Leta upp denna fil i din arbetsmapp.

–– Starta sedan programmet med hjälp av start.html.

–– Skriv ditt namn i rutan och tryck på knappen.

Som du märkte i uppgiften frågade programmet efter indata och läste in det du skrev. Vi visar först hela programmet så att du får en översikt.

Sedan ska vi gå igenom det en bit i taget och förklara hur det fungerar.

Du behöver inte titta på detaljerna ännu.

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

3. Vi börjar programmera

37

"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); // 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.

38

3. Vi börjar programmera

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

fråga inmatningsruta resultat

knapp

Vad heter du?

Maja

Tryck

Hej Maja

FIGUR 3.4 PROGR AMMET 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å kallade 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.

SATSER (STATEMENTS)

Vi börjar med att titta på de rader i programmet som skapar frågan.

De ser ut så här: // Fråga let fraga = document.createElement("p"); document.body.appendChild(fraga); fraga.innerHTML = "Vad heter du?";

När man laddar in en sida i webbläsaren skapas automatiskt ett objekt som heter document. 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å kallad paragraf.

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

3. Vi börjar programmera

39

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 anropar vi metoden appendChild. I objektet document finns en referens som heter body. Den refererar till själva innehållet i dokumentet. Metoden appendChild placerar ut ett element sist i dokumentet. 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, så kallade attribut. Attributet innerHTML innehåller texten som ska visas. På sista raden anger vi att elementet fraga ska visa texten "Vad heter du?".

UPPGIFT 3.6

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

Det andra elementet på sidan är en inmatningsruta. Den lägger vi dit med programraderna: // Inmatningsruta 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.

40

3. Vi börjar programmera

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

UPPGIFT 3.7

–– 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: // Resultat let resultat = document.createElement("p"); document.body.appendChild(resultat);

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

I de två första satserna 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. Sedan 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 inmatnings-

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

3. Vi börjar programmera

41

rutan. På näst sista raden tilldelar vi texten "Tryck" till attributet

innerHTML. Denna text kommer då att visas på knappen.

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 säger vi att en funktion med namnet klickade ska anropas. Funktionen klickade ligger sist i filen hej.js. Den ser ut så här: // Hit kommer man när användaren klickar på knappen function klickade() { let svar = ruta.value; resultat.innerHTML = "Hej " + svar; }

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.

VÄNSTERKLAMMER OCH HÖGERKLAMMER

42

En funktion innehåller ett antal satser. Dessa 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 till exempel skrivit in Maja, så 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.

3. Vi börjar programmera

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

UPPGIFT 3.8

–– Det finns en funktion som heter alert. Man kan anropa den för att visa ett meddelande i en s.k. dialogruta. Som parameter innanför parenteserna ger man det som ska visas i dialogrutan. Man skriver t.ex. alert("Hej!"); –– 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.9

–– 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ör- och 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 " " mellan texterna.

Bilder Nu har du sett hur man kan skapa element som ska visas på en sida i webb­lä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.

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

3. Vi börjar programmera

43

Vilken bild vill du visa? ugglor.jpg

Tryck

FIGUR 3.5 PROGR AMMET BILD.JS.

UPPGIFT 3.10

–– Leta upp programmet bild.js i din arbetsmapp.

–– Leta också upp 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 visa bilden i filen bokhylla.jpg.

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 bilden att hamna på en ny rad.)

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 44

3. Vi börjar programmera

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

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.11

–– 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å behöver man bara skriva filens namn. Men det går också bra att visa en bild som ligger på nätet. Då ger man den fullständiga adressen.

–– Leta reda på en bild, t.ex. på Wikipedia, högerklicka på den och välj 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 till exempel vill att bilden ska vara 300 pixlar bred skriver man: bild.width = 300; UPPGIFT 3.12

–– Ö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 genom att först bara ändra bredden, därefter att endast ändra höjden, och sist genom att ändra både bredd och höjd. Se vad som händer.

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

3. Vi börjar programmera

45

Sammanfattning I det här kapitlet har du lärt dig att

46

•

namnge och deklarera variabler

•

tilldela variabler innehåll

•

det finns olika typer av variabler: – Number – String – Object

•

skapa element som ska visas på en webbsida

•

visa bilder på en webbsida.

3. Vi börjar programmera

© F ö r f a t t a r e n o c h S t u d e n t l i t t e r a t u r

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 även erfarenhet av undervisning i grundskolan och har nu skrivit denna bok för högstadiet.

PROGRAMMERA PÅ RIKTIGT FÖR ELEVER PÅ HÖGSTADIET Programmera på riktigt – för elever på högstadiet är ett läromedel som är avsett för åk 7–9 och som täcker in den programmering som finns definierad i kursplanen för matematik.

Genom att arbeta praktiskt med uppgifter som laddas ner från webbsidan www.studentlitteratur.se/39785, lär eleverna sig grundläggande programmering i JavaScript. JavaScript har stora likheter med flera andra programspråk och används i mänger av kommersiella webbprogram världen över. Eleverna får därmed grundläggande programmeringskunskaper som de kan bygga vidare på i framtiden.

Bokens övningar behandlar både programmering och matematiska moment för åk 7–9. Det finns goda förutsättningar för variation och fördjupning. Steg för steg får eleverna presentationer av nya begrepp samt noggranna instruktioner om hur man bygger upp program. De får även möjlighet att experimentera och testa vad som händer när de ändrar i färdig kod.

Programmera på riktigt 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.

Art.nr 39785

studentlitteratur.se