1. No category

Variabler og
datatyper
Gløer Olav Langslet
Sandvika VGS
Høst 2012
Informasjonsteknologi 2
Hva er programmering?
Når du skal bake en kake følger du gjerne en
oppskrift. Først er det beskrevet hva kaken skal
inneholde; 4 egg, 2dl. melk osv. Deretter er
fremgangsmåten beskrevet; Kakk eggene, og ha
dem i en bolle. Visp sammen egg og sukker…
Kompetansesemål
Hovedområdet handler om
hvordan formelle språk
kan brukes til å formulere
strukturer og sette
sammen instruksjoner
som kan utføres av en
datamaskin. Sentralt i
hovedområdet er
eksperimentering og
problemløsning. I tillegg
dreier det seg om
objektorientering.
Når du vil at datamaskinen skal gjøre noe for
deg, må du gi den en lignende oppskrift. Hva skal
den bruke? Er det tall, tekst, figurer eller noe
helt annet? Og hva skal maskinen gjøre med
disse elementene? Det kan du fortelle
datamaskinen ved å lage et program. Når du
programmerer, lager du en oppskrift som
maskinen skal følge.
Hvis du har en dårlig kokebok, lager du vonde
kaker. Hvis du programmerer dårlig, får du et
lusent program. I dette kurset skal vi lære oss å
lage gode kaker, unnskyld, programmer.
sdsd
Variabler og datatyper
Informasjonsteknologi 2
variabler
Variabler er ingrediensene i programmet
La oss si at programmet ditt skal legge
sammen to tall. Hva blir ingrediensene i
oppskriften din da? Det blir selvfølgelig de
to tallene som skal legges sammen. La oss
si det er 8 og 5.
skjermen.
Så enkelt er det; vi ber programmet
skrive summen av de to tallene.
Variabler
Ingrediensene i et program kalles
variabler. I JavaScript angir vi at noe skal
være en variabel ved å skrive var foran:
Vi sier at vi deklarerer to variabler. Den
ene heter tall1, og den andre heter tall2.
De har verdiene 8 og 12.
Legg merke til at vi skriver et semikolon
ved enden av linjen. Hver ”instruksjon” i
et program skal avsluttes med et
semikolon.
Da har vi ingrediensene i oppskriften
klare. Resten av programmet går ut på å
legge tallene sammen, og vise det på
2
alert skriver ut summen i et
varselvindu i Nettleseren. Vi kommer
til å bruke dette mye i starten mens vi
øver oss på grunnleggende
programmering. Eller vi kommer til å
bruke console.log.
Variabler og datatyper
Informasjonsteknologi 2
Komme i gang med JavaScript
JavaScript er et programmeringsspråk
som ”kjøres” i nettleseren. Vi skriver kode
inne i html-sidene våre, og det er opp til
nettleseren å tolke koden vår. De fleste
nettlesere i dag tolker JavaScript ganske
likt. Med none unntak.
Et enkelt eksempel
Vi oppretter en ny fil, og kaller den
hello.html. I starten kan vi godt skrive
koden vår som vist under et sted inne i
body-taggen:
skiftenøkkelen for å finne Verktøy.
Alternativt
Vis – Utvikler – JavaScript-konsoll
Vi kommer til å bruke konsollen en del
i starten for å se at vi får riktige
verdier skrevet ut.
Kodeeksempler
For å spare litt plass, kommer jeg til å
skrive eksempler heretter uten
<script> - taggen rundt. Dere kan anta
at all koden ligger inne i et htmldokument i en script-tagg inne i body.
Sånn at i stedet for det som står til
venstre på denne siden, kommer jeg
heretter til å skrive det slik:
console.log(”Hello, Gløer”);
bruker vi til å ”skrive” ut teksten ”Hello,
Gløer”. Dette synes ikke på selve
nettsiden, men nettleserne har mulighet
til å vise det frem.
I Firefox åpner du nettsiden (Trykk F12
hvis du bruker Dreamweaver) og velg så
Verktøy – Nettsideutvikling – Konsoll.
I Chrome velger du Verktøy –
JavaScript-konsoll. Klikk på
3
sdsd
Variabler og datatyper
Informasjonsteknologi 2
Datatyper
8 + 12 = 812
Vi kan også lage våre egne
datatyper. Hvis vi skal
lagre opplysninger om en
bil, kan det være nyttig å
lage et objekt som kan
samle et sett med
egenskaper som naturlig
hører til en bil. Det kan
være toppfart, farge, antall
hk og lignende.
Dette skal vi se nærmere
på i leksjonen som handler
om objektorientert
programmering.
I programmet på forrige side deklarerte vi 2 variabler
som åpenbart representerte 2 tall. Men vi har ikke
fortalt maskinen at den skal behandle variablene som
tall og ikke for eksempel tekst. Hvis vi forsøker å
endre programmet og sette anførselstegn rundt tallene
vil vi få et annet resultat.
Konsollen skriver
Siden vi satt anførselstegn rundt tallene, vil
nettleseren tolke det som tekst, og rett og slett skjøte
sammen 8 og 12 som tekst, så det blir 812. Vi må passe
på om vi vil at 8 skal være et tall eller en tekst.
JavaScript lar nettleseren finne ut om vi mener tekst
eller tall. Anførselstegn rundt noe blir tekst. Andre
programmeringsspråk krever at du skrive hva slags
datatype variabelen har. Om det er tekst eller tall eller
noe helt annet.
4
Variabler og datatyper
Informasjonsteknologi 2
Datatyper for tall
I et språk som Actionscript har vi 3 forskjellige typer
tall.
•
int
•
uint
•
Number
int
er et heltall som kan ha verdi mellom -2 147 483 648 og
2 147 483 647
uint
er et positivt heltall som kan ha verdi mellom 0 og
4 294 967 295
Number
er heltall eller desimaltall mellom -253 og 253.
For å lage en variabel som skal være et heltall, må vi
skrive
var tall1:int = 25;
Da forteller vi datamaskinen at vi har med et heltall å
gjøre. JavaScript finner ut dette på egenhånd, så vi
ikke behøver å si hva slags type tall det er vi bruker.
Skriver vi 23.8 betyr det at vi har et desimaltall.
Typet eller
utypet
Vi sier at et
programmeringsspråk
er typet hvis du hele
tiden må fortelle
programmet hva slags
datatyper du bruker.
Java, C# og lignende er
slike typede språk.
JavaScript er vel det vi
kan kalle et løst typet
språk. Hvis vi skal lage
en liste eller noe vi
kaller et objekt, må vi
fortelle programmet
dette.
Variabler er forandelige
Du har kanskje gjettet det av navnet variabel, nemlig
at de er foranderlige, altså de kan endre verdi. Du kan
ikke endre navn på en variabel, men du kan endre
verdien. Det er et viktig poeng med variabler. La oss
vise det gjennom et eksempel.
5
sdsd
Variabler og datatyper
Poeng i spill
Informasjonsteknologi 2
2
La oss si at du lager et spill. Da er det
alltid viktig å ta vare på hvor mange
poeng den som spiller til enhver tid har.
Som regel starter vi med 0 poeng, og hver
gang vi utretter noe i spillet får vi nye
poeng. Hvordan skriver vi kode for dette?
Denne måten å skrive på er noe
programmerere har funnet på for å
spare tid. I stedet for å skrive
poeng = poeng + 5;
skriver vi
Først er poeng lik 0, deretter forandres
poeng til 5, men det er den samme
variabelen.
poeng += 5
Øke verdien til en variabel
Effekten blir akkurat den samme. Prøv
å skrive det en gang til så poeng blir
10.
Det vil som oftest være mer logisk å øke
poeng med for eksempel 5 hver gang noe
bestemt skjer. Det kan vi gjøre på 2 måter:
1
Hvorfor det heter
C++
En vanlig operasjon i programmering
er å øke en variabel med 1. Dette
gjøres så ofte at det har sin helt egen
syntaks.
Først er poeng 0, så sier vi at poeng skal
bli poeng + 5. Altså blir poeng 0 + 5 = 5.
C++ lignet på programmeringsspråket
C, men oppfinneren mente det var en
forbedring, derav C++
6
Variabler og datatyper
Informasjonsteknologi 2
Praktiske eksempler
1
Navn på
variabler
På linje 1 deklarerer vi en variabel med navn i. Det er et
heltall med verdi 20.
På linje 2 øker vi i med 5 – i er nå lik 25.
På linje 3 øker vi i med 10 – i er nå lik 35.
På linje 5 skriver vi ut 35. document.write(i) skriver i
nettleseren
2
Du bør alltid velge navn på
variablene dine som gir
mening. Skal du regne ut et
areal, er det lurt å kalle
variabelen nettopp det.
Variabelnavn kan begynne
med en bokstav, $ eller
underscore (_). De kan også
inneholde, men ikke begynne
med et tall.
lengdeVegg3
lengde_paa_vegg
antallSekunder
$sum
På linje 1 deklarerer vi et flyttall med verdi 4.
På linje 2 deklarerer vi et flyttall med verdi 3,5.
Så skjer det noe spennende. Vi kan deklarere nye variabler
på bakgrunn av utregninger eller andre sammenstillinger
av andre variabler.
På linje 3 ser vi at variabelen areal er produktet av lengde
og bredde.
Sjekk svaret selv med hoderegning, eller test det ut ved å
skrive koden. document.writeln (areal) skriver også i
nettleseren.
7
sdsd
Variabler og datatyper
Informasjonsteknologi 2
Kommentarer i koden
Når du skriver kode, har du mulighet til å legge inn
kommentarer i koden. Dette er tekst som ikke blir en del
av det ferdige programmet, men som er til hjelp for deg
selv til å huske hva du har tenkt, eller som hjelp til andre
som skal jobbe videre med din kode.
Det er viktig å kommentere godt i koden. Dette er en del
av dokumentasjonen som viser hva programmet ditt skal
gjøre. Hvis du er nøye med kommenteringen din og i tillegg
bruker fornuftige navn på variabler har du kommet et godt
stykke på vei til å bli en god programmerer.
Det er 2 måter vi kan kommentere på i JavaScript:
1
2
// Dette er en kommentar for én linje
/* Dette er en kommentar som
strekker seg over flere linjer*/
Finne
elementer på
nettsiden
Legg merke til at vi lager en
div her som er tom i
utgangspunktet. Vi setter en
id på den, så vi kan få tak i
den med JavaScript.
document.getElementById
finner elementer på siden som
har en bestemt id.
Deretter kan vi fylle diven
med html ved hjelp av
innerHTML. Det kan være
bare tekst eller tall som her,
eller det kan være html-kode.
Legg merke til at kommentarene blir ”grået” ut. De har
ikke noen effekt på programmet når det kjører.
8
Variabler og datatyper
Informasjonsteknologi 2
Oversikt over regneoperasjoner på kortform.
Husk at når vi skriver poeng = poeng + 5, så forandrer vi verdien til poeng.
Operator
+=
−=
*=
/=
++
−−
Hva gjør den
Legger til verdien på
høyre side i uttrykket
Trekker fra verdien
på høyre side i
uttrykket
Ganger med verdien
på høyre side i
uttrykket
Deler på verdien til
høyre side i uttrykket
Legger til 1
Trekker fra 1
Hvordan
poeng += 10;
Samme som
poeng = poeng + 10;
poeng −= 10;
poeng = poeng − 10;
poeng += 10;
poeng = poeng * 10;
poeng /= 10;
poeng = poeng / 10;
poeng ++;
poeng −−;
poeng = poeng + 1;
poeng = poeng − 1;
Eksempler
Legg merke til at vi kan skrive kommentarer på samme linje som koden. Den bør
ligge etter selve koden på linjen.
9
sdsd
Variabler og datatyper
Informasjonsteknologi 2
Rekkefølge på regneoperasjoner
1
IT, fysikk og
matte – En
skummel
kombinasjon
Er det noe datamaskinen din
er god på, så er det å regne.
Du må absolutt ikke være god
i fysikk og matte for å bli en
god programmerer. Mange
programmerere bruker det
knappest i det hele tatt.
Ganging og deling skjer først, deretter pluss og minus. Det
er ofte lurt å bruke parenteser for å holde styr på
utregningene dine.
Vi har så langt sett på enkle regneoperasjoner. Tro ikke at
det stopper der. JavaScript har kraftige verktøy for å
utføre avansert matematikk. Til dette har vi datatypen
Math. Du kan lese mer om den på w3schools:
http://www.w3schools.com/js/js_obj_math.asp
På neste side viser jeg noen eksempler på bruk av Mathklassen.
10
De som derimot bør kunne en
del om det, er programmerere
som vil forsøke seg på å lage
spill og avanserte
animasjoner.
Når vi kaster noe i et spill
ønsker vi at det skal se
realistisk ut. Dette kan vi kun
oppnå hvis vi har en viss
forståelse for hvilke krefter
som virker inn i et kast, så vi
kan beregne banen og
lignende.
Variabler og datatyper
Informasjonsteknologi 2
Datatypen Math
Konstanter: Med Math kan du finne kjente konstanter fra matematikken
Utregninger: Med Math kan du gjøre mer eller mindre avanserte utregninger:
11
sdsd
Variabler og datatyper
Informasjonsteknologi 2
String
Datatypen String
De fleste dataprogrammer inneholder tekst i mer eller mindre grad. String er den
datatypen i JavaScript, og i mange andre språk, du bruker til tekst.
Her deklarerer vi 2 variabler, fornavn og etternavn, og skriver dem ut. Vi kan
deklarere en string på 2 måter. Enten med new String(”Petter”), eller vi kan gi den
en verdi i anførselstegn som sier at det er en String. Når vi skriver + mellom fornavn
og etternavn, skjøter vi sammen tekstene. Legg merke til at fornavnet og etternavnet
legger seg rett etter hverandre. Vi kan legge til et mellomrom slik:
Vi kan også skjøte annen tekst sammen med variablene våre:
12
Variabler og datatyper
Informasjonsteknologi 2
Egenskaper og metoder til String
Når vi deklarerer en tekst som String, får vi det vi kaller
et objekt av klassen String. Ikke bry dere så mye om det
nå, men bry dere om at dette gir oss en rekke verktøy for å
manipulere og finne ut mer om teksten. Dette kaller vi
egenskaper og metoder. Noen ganger kan det være nyttig å
finne ut hvor mange bokstaver det er i teksten. Andre
ganger vil vi finne ut om teksten inneholder bestemte ord,
eller vi vil omforme alle små bokstaver til store.
Hvordan
leser vi .
Legg merke til at vi skriver
navn.length. Når vi leser kode
pleier vi å si navn sin length.
Ikke særlig god norsk, men
det gir mer mening enn å si
navn punktum length
eller
Navn dot length
Jeg sier også
navn sin toUpperCase når
jeg leser kode.
String har en rekke metoder knyttet til seg. En viktig del
av dette faget er å finne frem i dokumentasjon som andre
har laget. På w3schools kan du lese om metoder og
egenskaper for alle datatypene som er innebygget i
JavaScript.
Etter hvert vil du også lage dine egne datatyper, og det er
viktig at også du dokumenterer disse.
Her kan du finne ut mer om String:
http://www.w3schools.com/js/js_obj_string.asp
Hva er de
parentesene?
Legg merke til at vi skriver
navn.toUpperCase().
Altså med 2 motstående
parenteser etter. Dette betyr
at toUpperCase er en såkalt
metode.
Antall tegn, derimot, er en
egenskap, og skal således ikke
ha parentesene.
Noen metoder tar i mot
parametere, som search(”Sol”).
Dette kommer vi tilbake til
13
sdsd
Variabler og datatyper
Informasjonsteknologi 2
Array – en liste over elementer
Et array er en slags liste over hva vi måtte ønske. Det kan være en liste over elever i en
klasse, biler i en butikk; alt mulig kan vi stappe inn i et array.
Tenk deg en handleliste som du har liggende på benken. Etterhvert som du finner ut at
det er noe du trenger, skriver du det opp på listen. Det er fortsatt bare én liste, men det
er mange ting du trenger på listen.
Når du skal samle informasjon om mange ting på ett sted, kan det være lurt å lage et
array.
Vi oppretter et array, og legger inn nødvendige varer. Hvert element i listen har sin
bestemte posisjon. Vi sier at det første elementet ligger i posisjon 0, det andre i posisjon
2 osv. For å få tak i dundersalt, må vi altså til posisjon 1. Dette gjør vi ved å angi
posisjonen vi skal frem til med firkantparentes: [1]
Vi kan også endre verdien av elementene i arrayet. La oss si at vi har mer lyst på Salte
bjørner. Da stryker vi ut Dundersalt fra listen og skriver opp Salte bjørner i stedet:
14
Variabler og datatyper
Informasjonsteknologi 2
Array – legge til nye elementer
La oss se på handlelisten vår en gang til. Vi har 3 varer på listen. Hva om vi skal legge
til flere? Det enkleste er å bruke noe som heter push. Det vil si at vi dytter nye varer
inn i listen.
Når vi legger til elementer på denne måten, legger de seg på slutten av arrayet. Hvis vi
vil legge inn noe på starten, bruker vi unshift:
Vi kan også ta ting ut av arrayet; pop() tar ut siste element, mens shift() tar ut første
element:
15
sdsd
Variabler og datatyper
Informasjonsteknologi 2
Egenskaper og metoder til Array
Den viktigste egenskapen til Array er length, altså antall elementer i arrayet:
Array har mange metoder. Vi har allerede sett på pop, push, shift og unshift. I tillegg
har vi metoder for sortering, søk, filtrering, omrokkering osv. Her er noen eksempler:
reverse() - Snur rekkefølgen
sort() – Sorterer arrayet
Her kan du finne ut mer om Array:
http://www.w3schools.com/js/js_obj_array.asp
16
Variabler og datatyper
Informasjonsteknologi 2
Konstanter
Da vi fant pi, skrev vi Math.PI. Dette er en såkalt konstant som hører til
Math-klassen.
Du kan lage egne konstanter i koden slik (vi bruker store bokstaver):
Når en konstant er deklarert, kan du ikke endre verdien senere i
programmet. Det er derfor det kalles en konstant. Til alt som skal endres
bruker vi variabler.
17