EKSAMEN Emnekode: Emne: ITF10213 Innføring i programmering Dato: Eksamenstid: 11/12-2015 09.00-13.00 Hjelpemidler: 2 A4 ark (4 sider) med egenproduserte notater (håndskrevne/maskinskrevne) Faglærer: Tom Heine Nätt (Per Bisseberg) Eksamensoppgaven: Oppgavesettet består av 11 sider inkludert denne forsiden, og er inndelt i 4 deler med henholdsvis 15, 3, 4 og 2 oppgaver. Du er selv ansvarlig for å kontrollere at oppgavesettet er komplett. Det er på hver del angitt hvor mye disse teller av totalen. Karakter fastsettes dog på basis av en helhetsvurdering av besvarelsen. Merk deg at del 1 og 2 bør gå forholdsvis raskt å svare på, så tidsmessig er det viktig å gi del 3 og 4 mer tid. Les gjennom alle oppgavene før du begynner. Husk at det ikke er gitt at oppgavene står sortert etter økende vanskelighetsgrad. Takk for et hyggelig semester, og god juleferie:-) Lykke til! Sensurdato: 13/01-2016 Karakterene er tilgjengelige for studenter på studentweb senest 2 virkedager etter oppgitt sensurfrist. Følg instruksjoner gitt på: www.hiof.no/studentweb Side 1 av 17
Del 1 Kodeforståelse (25 %) Her skal du kun svare på selve spørsmålet, og du trenger ikke forklare hvordan du kommer frem til svaret. NB! Les koden og selve spørsmålet nøye, for det kan være mange feller å gå i her... Vær nøye med å svare eksakt det innholdet i taggen utskrift vil bli. Oppgave 1.1 var a = 2; var b = 4; a++; b += a var res = a * b; Fasit: 21 Oppgave 1.2 var a = 2; var b = 4; var res = ""; if (a > b) { res = "a"; else { res = "b"; fasit: b Oppgave 1.3 var a = 42; var res = 0; if (a % 2 === 0) { res = a / 2; else { res = a * 2; Side 2 av 17
fasit: 21 Oppgave 1.4 var res = ""; for (var i = 10; i > 0; i--) { res += i + ","; fasit: 10,9,8,7,6,5,4,3,2,1, Oppgave 1.5 var a = [2, 45, 12, 3, 67, 23, 17, 19, 6]; var res = ""; for (var i = 0; i < a.length; i++) { if (i % 2!== 0) { res += a[i] + ","; fasit: 45,3,23,19, Oppgave 1.6 var arr = {a: 36, b:47, c: 25; var res = ""; for (var n in arr) { if (arr[n] > 30) { res += n + ","; fasit: a,b, Side 3 av 17
Oppgave 1.7 var a = 0; var res = ""; while (a < 10) { res += a + ","; a += 2; res += a; fasit: 0,2,4,6,8,10 Oppgave 1.8 var a = ["A", "B", "C"]; var b = [1, 2]; var res = ""; for (var i = 0; i < a.length; i++) { for (var j = b.length-1; j >= 0; j--) { res += a[i] + b[j] + ","; fasit: A2,A1,B2,B1,C2,C1, Oppgave 1.9 var a = [["Anne", 2], ["Tom", 5], ["Ola", 2]] var res = 0; for (var i = 0; i < a.length; i++){ res += a[i][1]; res = res / a.length; fasit: 3 Side 4 av 17
Oppgave 1.10 function a(x, y) { return x * y; document.getelementbyid("utskrift").innerhtml = a(2, 4); fasit: 8 Oppgave 1.11 function a(arr, y) { for (var i = 0; i < arr.length; i++) { if( arr[i] === y ) { return i; return -1; var list = [3, 5, 2, 3, 7]; document.getelementbyid("utskrift").innerhtml = a(list, 3); fasit: 0 Oppgave 1.12 function a(x, y) { return x + y; function b(x, y) { return x - y; document.getelementbyid("utskrift").innerhtml = a(b(8, 6), 4); fasit: 6 Side 5 av 17
Oppgave 1.13 var a = 0; var res = ""; while (a < 10) { a++; if (a<5) { res += a + ","; else if (a === 5) { res += ","; else { res += "#,"; fasit: 1,2,3,4,,#,#,#,#,#, Oppgave 1.14 var a = 3 if (a >= 2 ) { document.getelementbyid("utskrift").innerhtml = "X"; if (a >= 3) { document.getelementbyid("utskrift").innerhtml = "Y"; else { document.getelementbyid("utskrift").innerhtml = "Z"; Fasit: Y Side 6 av 17
Oppgave 1.15 function a(x, y) { var res = 0; if (x >= 10) { res = y ; return res; else { for (var i = 0; i < x; i++){ res = res + y; return res; document.getelementbyid("utskrift").innerhtml = a(5, "Z"); fasit: 0ZZZZZ Del 2 - Tekstsvar (10 %) Oppgave 2.1 Beskriv kort og pressist forskjellen på client-side og server-side i forbindelse med programmering. Oppgave 2.2 Beskriv kort og pressist hva JQuery er. Oppgave 2.3 Beskriv kort og pressist hva JSON er. Side 7 av 17
Del 3 Grunnleggende programmering (35 %) I alle disse oppgavene trenger du IKKE skrive et komplett HTML-dokument. Du kan også droppe window.onload osv. Skriv derfor kun koden som etterspørres. Oppgave 3.1 Skriv ferdig følgende funksjoner: a) Funksjonen skal ta imot en array som parameter, og så returnere det høyeste/største tallet i arrayen. function maks(arr) løsningsforslag: function maks(arr){ var max; for(i=0;i<arr.length;i++){ if(!max){ max=arr[i]; else if(max < arr[i]){ max=arr[i]; return max; b) Funksjonen skal ta i mot to tall som parametere, og avgjøre om summen av disse tallene er et partall eller ikke. Returner svaret i et hensiktsmessig dataformat. function sumerpartall(tall1, tall2) løsningsforslag: function sumerpartall(tall1, tall2){ if((tall1+tall2)%2===0){ return true; return false; c) Funksjonen skal ta i mot en array som parameter og returnere summen av største og minste tall i arrayen. Du kan gå ut i fra at du har tilgang på funksjonen maks(arr) fra oppgave a og en tilsvarende funksjon min(arr). Side 8 av 17
function sumstorsteogminste(arr) løsningsforslag: function sumstorsteogminste(arr){ return min(arr) + maks(arr); Oppgave 3.2 Norge har i dag en inflasjon på ca 3. %. Dvs. at hvert år blir pengeverdien kun 97% av pengeneverdien året før. Skriv en for-løkke som viser hva 1000 kr er verdt fra i dag og 15 år fremover i tid med en fast inflasjon på 3 %: Utskriften skal bli følgende (i en paragraf med id utskrift, som du kan anta at finnes): 0 år frem i tid er pengene verdt tilsvarende 1000.00 kr i dag. 1 år frem i tid er pengene verdt tilsvarende 970.00 kr i dag. 2 år frem i tid er pengene verdt tilsvarende 940.90 kr i dag. 3 år frem i tid er pengene verdt tilsvarende 912.67 kr i dag. 4 år frem i tid er pengene verdt tilsvarende 885.29 kr i dag. osv.. TIPS: 97 % av en verdi er det samme som 0.97 * verdi. Løsningsforslag: var u = document.getelementbyid("utskrift"); for(i=0; i<16; i++){ var kr = 1000.00; for(j=0; j<i; j++){ kr *= 0.97; u.innerhtml += i + " år frem i tid er pengene verdt tilsvarende " + kr.tofixed(2) + "kr i dag<br/>"; Side 9 av 17
Oppgave 3.3 Skriv kode som finner antallet odde- og partall i en array med navn tall og skriver dette ut (i en paragraf med id utskrift, som du kan anta at finnes): Eksempel på arrayen tall: var tall = [3, 42, 7, 69, 12, 9, 37, 17, 10]; Utskriften skal da se slik ut: Oddetall: 6 Partall: 3 Løsningsforslag: var o=0; var p=0; for(i=0; i<tall.length;i++){ if(tall[i]%2===0){ p++; else{ o++; Oppgave 3.4 Du har to arrayer med tall (kalt a og b) som er like lange. f.eks: var a = [2,5,2,4,7,3,2]; var b = [9,1,3,2,6,4,3]; Du har også en array (kalt c) med tilsvarende lengde, der alle verdier er 0: var c = [0,0,0,0,0,0,0]; Skriv kode som gjør at array c får det største tallet fra a og b på hver posisjon/indeks. Med eksempeldataene vist over vil altså arrayen c få innholdet: [9,5,3,4,7,4,3]; (Denne oppgaven krever altså ingen utskrift. Kun at arrayen fylles.) Løsningsforslag: for(i=0;i<a.length;i++){ if(a[i]>b[i]){ Side 10 av 17
c[i]=a[i]; else{ c[i]=b[i]; Side 11 av 17
Del 4 Filbehandling, parametere og skjemaer (30 %) NB! I denne delen skal du lage komplette nettsider (med HTML-kode). Alle tre oppgaver omhandler samme tema. En superværnerd ønsker å bytte ut sin gamle trofaste notatblokk over værobservasjoner med et mer fancy digitalt system. Du har fått følgende tekstfiler der alle observasjoner er notert. Merk deg at det er én fil pr måned. Filnavnene er typisk 1.2015.csv for januar 2015 og 7.2015.csv for juli 2015. 1;sol;13;NØ;5 2;regn;7;SØ;15 3;sol;16;SV;7 osv. Formatet er altså: dagnummer;værtype;temperatur;vindretning;vindhastighet (Er oppgavene 4.1 og 4.2 for vanskelige, definer tydelig en enklere utgave av oppgaven, og gjør denne) Oppgave 4.1 Du skal nå lage en nettside der man kan velge måned og år i en nedtrekksliste, og deretter trykke "Hent Data". Tilhørende fil med data skal hentes og presenteres på følgende måte (kun de tre første dagene vises i eksempelutskriften under). Merk deg at siste linje skal vise gjennomsnittstemperaturen for alle dager som er lest fra fila: osv. Gjennomsnittstemperatur denne måned: 12.7 grader. Du kan gå ut i fra følgende: Det er definert en global assosiativ array som heter vindnavn Denne har koden for vindretning som nøkkel, og tekstlig beskrivelse som verdi. Du trenge rikke gjenta denne i din kode: var vindnavn = {"NØ": "Nord Øst", "N": "Nord", osv...; Side 12 av 17
I samme mappe som nettsiden ligger det bildefiler som har samme filnavn som værtypen. Altså: sol.png, regn.png, skyet.png osv. Nedtrekkslistene skal inneholde månedene januar til desember, og årene 2013, 2014 og 2015. Du trenger kun legge inn januar og februar i nedtrekkslisten i din besvarelse. Du trenger IKKE ta hensyn til å sjekke om filene med værdata faktisk finnes. Løsningsforslag: <html> <head> <meta charset="utf-8"> </head> <body> <div> <form> <select id="month"> <option value="1">januar</option> <option value="2">februar</option> </select> <select id="year"> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> </select> <button id="getdata" type="button">hent Data</button> </form> </div> <div id="display"> </div> </body> <script> var vindnavn = {"SV":"Sør Vest","SØ":"Sør Øst","NØ":"Nord Øst"; var req; document.getelementbyid("getdata").onclick = getdata; var display = document.getelementbyid('display'); Side 13 av 17
function getdata(){ var month = document.getelementbyid('month').value; var year = document.getelementbyid('year').value; var file = month + "." + year + ".csv"; req = new XMLHttpRequest(); req.onreadystatechange = dispdata; req.open("get", file, true); req.send(); function dispdata(){ display.innerhtml = ''; if (req.readystate === 4 && req.status === 200 ) { var resp = req.responsetext; var lines = resp.split('\n'); for(i=0; i<lines.length; i++){ var linedata = lines[i].split(';'); injectdata(linedata); function injectdata(data){ var vindretning = vindnavn[data[3]]; var img = '<img src="' + data[1] + '.png" /> '; var datafordisplay = "Dag " + data[0] + ": " + img + data[1] + ". " + data[2] + " grader. " + data[4] + " m/s vind fra " + vindretning + '.<br />'; display.innerhtml += datafordisplay; </script> </html> Side 14 av 17
Oppgave 4.2 For å registrere værdata til fil ønsker vår venn en nettside med følgende brukergrensesnitt: Værtype skal velges i en nedtrekksliste, som er fylt med ulike værtyper via programkode. De andre verdiene er tekstbokser. Registrering gjøres hver dag, så når det gjelder selve nettsiden trenger du ikke bekymre deg for hvor i fila linja skal skrives og til hvilken fil data skal skrives. I PHP-scriptet som skal lagre data, er det dermed bare å legge til en linje (som starter med dagens dagnummer) til slutt i en fil som matcher nåværende måned og år. Du kan gå ut i fra følgende: Det er definert en global array med værtypene. Du trenger ikke gjenta denne i din kode: var vaertyper = ["sol","regn","yr",osv..]; I PHP kan du benytte følgende tre linjer kode for å hente ut dagnummer, månedsnummer og årstall (4 siffer): $dag = date("j"); $maaned = date("n"); $aar = date("y"); Du trenger ikke gjøre noen tester av inputverdier før du lagrer til fil. Du kan med andre ord gå ut i fra at når vår værnerd fyller ut skjemaet gjøres det med største nøyaktighet. Løsningsforslag HTML: <html> <head> <meta charset="utf-8"> </head> <body> <div> <form> Side 15 av 17
Værtype:<select id="vtype"></select><br /><br /> Vindretning:<input type="text" id="vretn"></input><br /><br /> Vindstyrke:<input type="text" id="vstr" /><br /><br /> Temperatur:<input type="text" id="grader" /><br /><br /> <input type="button" id="reg" value="send" /> </form> </div> </body> <script> var vaertype = ['sol','regn','yr']; var vindnavn = {"SV":"Sør Vest","SØ":"Sør Øst","NØ":"Nord Øst"; var vtype = document.getelementbyid('vtype'); var vretn = document.getelementbyid('vretn'); var vstr = document.getelementbyid('vstr'); var grader = document.getelementbyid('grader'); reg; function init(){ document.getelementbyid('reg').onclick = for(i=0; i<vaertype.length; i++){ vtype.innerhtml += '<option value="' + vaertype[i] + '">' + vaertype[i] + '</option>'; function reg(){ var vt = vtype.value; var vr = vretn.value; var vs = vstr.value; var g = grader.value; var req = new XMLHttpRequest(); req.open("get", "reg.php?vt="+vt+'&vr='+vr+'&vs='+vs+'&g='+g, true); req.send(); Side 16 av 17
init(); </script> </html> Løsningsforslag PHP: <?PHP header('content-type: text/xml'); $vt = $_GET["vt"]; $vr = $_GET["vr"]; $vs = $_GET["vs"]; $g = $_GET["g"]; $dag = date("j"); $maaned = date("n"); $aar = date("y");?> $fil = fopen($maaned.'.'.$aar.".csv", "a"); $txt = $dag.';'.$vt.';'.$g.';'.$vr.';'.$vs."\n"; fwrite($fil, $txt); fclose($fil); Side 17 av 17