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. 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. 2 Da har vi ingrediensene i oppskriften klare. Resten av programmet går ut på å legge tallene sammen, og vise det på
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. 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 Dette skal vi se nærmere på i leksjonen som handler om objektorientert programmering. 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 -2 53 og 2 53. 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 Informasjonsteknologi 2 Poeng i spill 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? 2 Denne måten å skrive på er noe programmerere har funnet på for å spare tid. I stedet for å skrive poeng = poeng + 5; Først er poeng lik 0, deretter forandres poeng til 5, men det er den samme variabelen. Øke verdien til en variabel 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 skriver vi poeng += 5 Effekten blir akkurat den samme. Prøv å skrive det en gang til så poeng blir 10. 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 Hvordan Samme som += Legger til verdien på poeng += 10; poeng = poeng + 10; høyre side i uttrykket = Trekker fra verdien poeng = 10; poeng = poeng 10; på høyre side i uttrykket *= Ganger med verdien poeng += 10; poeng = poeng * 10; på høyre side i uttrykket /= Deler på verdien til poeng /= 10; poeng = poeng / 10; høyre side i uttrykket ++ Legger til 1 poeng ++; poeng = poeng + 1; Trekker fra 1 poeng ; 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. 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. 10
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