Oblig 4 Undervisningshefte i grunnleggende JavaScript programmering Innhold: Variabler Boolske verdier Kontrollstrukturer Datastrukturer Løkker Funksjoner Events DOM behandling av Christine Skjønhaug Færø
Variabler En variabel er det du bruker for å sortere og skrive inn verdiene i koden din slik at scriptet kan lese det. Med variabler kan du hente inn informasjon fra HTML dokumentet eller skrive inn nye verdier direkte i JavaScipt(JS) Eksempel: Her har jeg brukt variabler som skrives direkte inn i JS. For å vise at det er en variabel må du skrive «var». Så følger du på med det navnet du vil ha på variabelen, som kan være hva som helst, og et «er lik» tegn. Etter «er lik» tegnet kommer verdien/innholdet til variabelen. Jeg har valgt å lage et mattestykke, og skrev defor inn et tall. På neste linje gjør du akkurat det samme. Du må bare passe på at du har forskjellig navn på variablene, og at du skriver inn det andre tallet du vil ha i mattestykket ditt. Vil du ha et lenger mattestykke legger du bare inn flere slike variabler. Skriv ut: Skal du skrive ut svaret slik at det vises på siden din må du ha noe i HTML. Det enkleste er å bruke en <div> tag. For at svaret skal vises må du hente denne <div>en inn i JS, da trenger den en «id», alså et navn du selv finner på. Her kommer siste linjen i eksempelet inn. Skriv inn id-navnet du har på <div>en din. I dette eksempelet er det «svar». Skriv et punktum etterfulgt av «innerhtml». Punktum i JS kan leses som «sin» altså «svar.innerhtml» leses som «svar sin innerhtml». Selve linjen betyr «det som skal stå i den <div>en som heter svar». Så kommer et «er lik» tegn og test1 + test2, fordi jeg vil plusse den ene variabelen med den andre.
Boolske verdier Boolske verdier bruker vi for å vise om noe er enten eller. Om det er sant eller ikke, ja eller nei. Det som brukes da er verdiene true/false og symbolene == og!= (likt og ulikt). Eksempel: If er en kontrollsruktur som her sier at: Hvis(if) usant er lik false, så skal den skrive ut «det er likt usant». Hvis usant ikke er lik true, så skal den skrive ut «det er også likt usant». Hvis usant er likt true, som den nå er siden vi har endret variabel verdien fra false til true, så skal den skrive ut «dette er likt sant».
Kontrollstrukturer Kontrollstrukturer bruker man for å kontrollere om noe er riktig. Er det riktig blir det som står i koden gjort, er det ikke riktig skjer det ikke noe, og den går videre til neste alternativ. If-test er en form for kontrollstruktur. Her brukes if, else if og else. If - hvis det er riktig skal det koden sier skje. Else if - hvis ikke if er riktig går den til else if og ser om den er riktig. Hvis den er riktig gjør den det koden sier. Else hvis verken if eller else if er riktig skal den gjøre det denne koden sier. Eksempel: I denne koden vil jeg finne ut hvilke av alternativene som er riktige. If sier her at hvis x er mindre enn y skal den skrive det ut. Som vi kan se er x her satt til 7 og y til 2. Derfor er det ikke riktig at 7 er mindre enn 2. Ingenting blir skrevet ut og vi hopper ned til else if. Her står det at x er større enn y, altså 7 er større enn 2. Dette er riktig og setningen «7 er større enn 2 blir skrevet ut. Siden else if var riktig er else feil. Er det flere rikige svar kan du sette inn flere If'er og vil du ha flere alernativer kan du sette inn flere else if'er.
Switch er en annen form for kontrollstruktur. Den fungerer på nesten samme måte som iftest, men det er en annen måte å skrive det på som gir mindre kode. Eksempel: Denne koden finner ut hvilken dag det er i dag. Jeg laget en knapp og lagt switch koden inn i en funksjon, slik at når jeg trykker på knappen kommer det opp hvilken dag det er. New Date().getDay() er en kodebit i JS som finner hvilken dag det er. Den gjør også at uansett hvor mange ganger jeg trykker på knappen i dag så viser den dagen i dag. Mens hvis jeg trykker i morgen så viser den dagen i morgen. Når man bruker switch skriver man «case» i stedet for «if». Hver case blir testet. Er ikke den første riktig går den videre på neste helt til den finner den riktige casen. Break som står etter hver case gjør da at testen stopper når den har funnet den riktige. Så er det bare å skrive ut til slutt.
Datastrukturer en Array kan kalles både en liste og en lagringsplass. Den fungerer nesten på samme måte som en variabel bare at den kan inneholde flere verdier samtidig. Du kan velge å hente ut bare en av verdiene eller flere fra arrayen. Eksempel: Her har jeg laget en variabel jeg har kalt navneliste. Vi ser at dette ikke er en vanlig variabel, men en array på grunn av firkantklammene [ ], og at det er flere verdier inni. Når man teller plasser i en array begynner det ikke med 1, men med 0. Så i denne arrayen ligger Olga på plass 0, Reidar på plass 1, Gudrun på plass 2 og Rigmor på plass 3. Jeg vil bare skrive ut navnet Gudrun og må derfor skrive «navneliste[2]» for å vise at jeg skal inni arrayen «navneliste» og skrive ut det som står på plass 2. Todimensjonal array fungerer på samme måte som en vanlig array, men du kan ha flere smålister inni selve arraylisten. Her har jeg gjort det samme som på arrayeksempelet, bare at jeg har lagt til etternavn som en egen verdi på hver person. For å lage flere lister inni arraylisten setter du inn firkantklammene [ ] rundt hver av de små listene i tillegg til en rundt hele arrayen. Husk å ha komma mellom hver av listene. Det jeg har gjort nå er å bare skrive ut Gudrun sitt etternavn. Når du etter innerhtml skriver navneliste[2] vil du da skrive ut listen som ligger på plass 2. Altså «Gudrun, Mikkelsen». For å da bare få etternavnet finner du plassen i den listen etternavnet ligger på. Siden første plassen er 0, ligger da etternavnet på plass 1. Så når jeg da skriver navneliste[2][1] betyr det: Finn arrayen navneliste, finn plass 2(som her er en liste), og finn plass 1 i listen. Dermed skrives bare «mikkelsen» ut.
Løkker Løkker er tilfor å kjøre samme koden flere ganger med forskjellige verdier, uten å måtte skrive koden på nytt for hver gang. Løkken vil fortsette helt til den får beskjed om å stoppe. Får den ikke beskjed om å stoppe vil den fortsette inn i en evig loop. Brukes ofte sammen med en Array. While-løkke En While-løkke kjører igjennom koden så lenge det som står der er riktig. Her vil tallene fra 0 til 4 bli skrevet ut. Dette fordi i er satt til å være 0 og 4 er det siste tallet som er mindre enn 5. For-løkke En for-løkke kjøres helt til den har oppnådd et visst tall. Den brukes ofte sammen med en array. Her vil tallene som står i arrayen bli skrevet ut.
Nestede-løkker Nestede-løkker er at du har en eller flere løkker inni en annen løkke. Dette kan foreksempel brukes til å skrive ut tallkombinasjoner. Her Har jeg skrevet ut alle tosifrede kombinasjoner av tallene 0 til 3. Det skjer ved at den første løkken blir sjekket igjennom først: setter variabelen «i» til å ha verdien 0. er i mindre enn 4? ja. Da skal man plusse på 1, slik at neste gang løkken kjører er «i» lik 1 og ikke 0. Denne løkken skal kjøres 4 ganger, men siden det står noe mer inni løkken må den gjøre dette før løkken begynner på nytt. Inni løkken finner vi en ny løkke. Den kjøres slik som den første. Så hopper vi inn i koden til denne løkken også. Der står det at tallet vi fant i første løkken skal skrives ut, så skal det komme en bindestrek, og så tallet i andre løkken. <br/> betyr linjeskift. Slik at til nå vil det stå «0-0». Men løkken inni skal også kjøres 4 ganger, så før vi hopper opp igjen til andre runde på første løkken, må den kjøre ferdig. På denne måten vil utskriften til slutt se slik ut:
Funksjoner Man legger kode inn i en funksjon for at den skal kunne brukes flere ganger uten at vi trenger å skrive den omigjen. For å bruke en kode som ligger i en funksjon må man kalle på funksjonen et eller annet sted i koden. Det at en funksjon tar imot parameter betyr at den skriver ut tekst eller tall som blir sendt inn i funksjonen, altså som ikke står i funksjonen fra før av. At funksjonen returnerer verdier gjør at du kan sende inn forskjellige parametre og skrive ut flere svar. Eksempel: Her har jeg valgt å lage et mattestykke hvor jeg plusser to tall. Det er disse tallene som skal sendes inn som parameter.
Events En event er en effekt man legger til noe. For eksempel at noe kan endre farge hvis man holder musen over, eller hvis man trykker på noe. Å lage en knapp som skriver ut noe når man trykker på den er en event. I denne koden har jeg laget en knapp. Når du trykker på knappen vil teksten «Det som skjer er et event» dukker opp under knappen. Når vi drar musepekeren over teksten blir den rosa, og når vi tar den vekk igjen blir den svart. Onmouseover er det du må skrive når du vil det skal skje noe når musepekeren berører teksten. Onmouseout er det du må skrive når det skal skje noe når du tar musepekeren vekk igjen. Onmouseover= «farge()» betyr at når du tar musepekeren over skal den kjøre funksjonen farge(). Som vi da ser når vi går inn i JS koden og finner denne funksjonen skal den endre fargen til rosa. Det samme er det med onmouseout.
DOM behandling DOM står for Document Object Model. Det man kan gjøre her er å hente HTML elementer inn i JS, manipulere HTML elementer eller lage nye. Eksempel på å hente inn et HTML element: For å hente inn elementet, lager du en variabel. Document.getElementById('svar1'); betyr at du går inn i HTML dokumentet, henter elementet via Iden, altså navnet på elementet som er svar1. Avslutt med semikolon. Nå har du hentet inn en div med ordet «Heisann». Eksempel på å manipulere dette HTML elementet: For å manipulere elementet skriver du at sv1(den variabelen som inneholder HTML elementet vi hentet) nå skal inneholde ordet «Farvell». Siden en variabel ikke kan inneholde flere verdier, er det den siste som teller. Dermed blir det nå skrevet ut ordet «Farvell» i stedet for «Heisann». Eksempel på å lage nye elementer: Her har jeg laget en paragraph og skrevet inn teksten «Heisann» ved hjelp av JS. I HTML ville det sett slik ut <p>heisann</p>. først skriver jeg inn en <div> som jeg gir en id.
Så går jeg inn i JS og henter inn denne diven ved hjelp av id/navnet For å lage en paragraph lager jeg en variabel som jeg har gitt navnet avsnitt. Inni variabelen skriver jeg document.createelement(''p''); Dette betyr at den går inn i HTML dokumentet og lager elementet p, altså <p>, en paragraph. For å skrive teksten inni p, sier jeg at det som skal stå inni variabelen avsnitt (den variabelen hvor vi laget p) er Heisann. Kode: avsnitt.innerhtml = 'Heisann'; for å kunne skrive ut, må vi koble avsnitt sammen med div. Siden div ligger i HTML og gjør at skriften blir synlig på siden. Her må vi bruke noe som heter appendchild. En child/barn i JS er en tagg som er inni en annen tagg. Sånn som nå har vi laget en p-tagg som vi skal sette inn i div. Derfor blir p-taggen barnet til div. Så den siste kodelinjen: div.appendchild(avsnitt); betyr at vi skal legge til en child i div, denne finner vi i avsnitt, som er variabelen hvor p-taggen ble laget. Når vi nå skriver ut ser det slik ut: