Løsningsforslag til kapittel 8

Her finner du løsningsforslag, råd og vink til oppgavene i kapittel 8.

8.1.1
<script>
    var arrHandleliste = ["ost", "paprika", "brød", "kaviar"];
    document.write(arrHandleliste+"<br>");//Oppgave a
    arrHandleliste.unshift("melk");
    document.write(arrHandleliste+"<br>");//Oppgave b
    arrHandleliste.pop();
    document.write(arrHandleliste+"<br>");//Oppgave c
    arrHandleliste[3]="knekkebrød";
    document.write(arrHandleliste+"<br>");//Oppgave d
</script>

8.1.2
<script>
    var arrTraer = ["lønn", "hassel", "bjørk", "eik", "blodlønn", "furu", "gran"];
    document.write(arrTraer+"<br>");
    arrTraer.splice(3,1);
    document.write(arrTraer+"<br>");//a
    arrTraer.splice(2,1,"hengebjørk");
    document.write(arrTraer+"<br>");//b
    arrTraer.splice(4,2);
    document.write(arrTraer+"<br>");//c
    arrTraer.splice(4,0,"fjellbjørk","dvergbjørk");
    document.write(arrTraer+"<br>");//d
    arrTraer.sort();
    document.write(arrTraer+"<br>");//e
</script>

8.1.3 Videreutvikle koden for å hoppe mellom siste og første bilde når du er på slutten av arrayet med filnavnene.
<body>
    <div id=divBilde>
        <button id="btnTilbake">Tilbake</button>
        <img id=imgBilde>
        <button id="btnFram">Fram</button>
    </div>
    <script>
        v
ar imgBilde = document.getElementById("imgBilde");
        var btnTilbake = document.getElementById("btnTilbake");
        var btnFram = document.getElementById("btnFram");
        var arrFeriebilder=["bilde1.jpg", "bilde2.gif", "bilde3.jpg", "bilde4.png"];
        var index =0;
        document.write(arrFeriebilder);
        imgBilde.src =arrFeriebilder[index];
        btnTilbake.onclick=function(){
            index--;
            imgBilde.src=arrFeriebilder[index];
        }
        btnFram.onclick=function(){
            index++;
            imgBilde.src=arrFeriebilder[index];
        }
    </script>
</body>

8.1.4 Lag en sammenlikningsfunksjon som du bruker til å sortere med. Sorter arrayet ved å legge inn følgende kode etter "var index =0;" i koden fra 8.1.3:
arrFeriebilder.sort(sammenlignTekst);
//Sammenlikningsfunksjonen ser slik ut:
function sammenlignTekst(a, b) {
    a = a.toUpperCase();
    b = b.toUpperCase();
    return b < a;
}

8.1.5
<script>
    var arrTall=[3,2,5,1,4];
    arrTall.sort();
    document.write(arrTall);
</script>

8.1.6 Ta utgangspunkt i eksemplene på side 203.

8.2.1
a)
<body>
    <ol id="listMat"></ol>
    <script>
        var listMat = document.getElementById("listMat");
        var matvarer = ["Ost", "Brød", "Paprika","Kaviar"];
        for(var matvare of matvarer) {
            listMat.innerHTML += "<li>" + matvare + "</li>";
        }
    </script>
</body>

b) Endre for-of-løkka i a til:
for(var i=0; i<matvarer.length; i++) {
    listMat.innerHTML += "<li>" + matvarer[i] + "</li>";
}

8.2.2
a)
<body>
    <ol id="listBok"></ol>
    <script>
        var listBok = document.getElementById("listBok");
        var bokliste = ["Kode 1", "Sinus 1T", "Moment","Kode 2", "Psykologi 2"];
        for(var bok of bokliste) {
            listBok.innerHTML += "<li>" + bok + "</li>";
        }
    </script>
</body>

b)
<body>
    <ol id="listBok"></ol>
    <script>
        var listBok = document.getElementById("listBok");
        var bokliste = ["Kode 1", "Sinus 1T", "Moment","Kode 2", "Psykologi 2"];
        bokliste.sort(sammenlignTekst);
        for(var bok of bokliste) {
            listBok.innerHTML += "<li>" + bok + "</li>";
        }
        function sammenlignTekst(a, b) {
            a = a.toUpperCase();
            b = b.toUpperCase();
            return b < a;
        }
    </script>
</body>

8.2.3
<script>
    var arrTemp=[3,4,5,6,5,5,6,4,4,5];
    var antallUnderFem=0;
    var sum=0;
    arrTemp.sort();
    for(var temp of arrTemp){
        if(temp<5){
            antallUnderFem++;
        }
        sum+=temp;
    }
    document.write("Temperaturen er under fem "+antallUnderFem+" dager og gjennomsnittstemperaturen er "+(sum/arrTemp.length)+" grader. Dette er de sorterte temperaturene: "+arrTemp);
</script>

8.2.4
<script>
    var arrPerson = [
        {navn: "Amanda" , alder : 4},
        {navn : "Ole" , alder : 3},
        {navn : "Reidun" , alder : 6},
        {navn : "Jan" , alder : 5}
    ];
    for(var person of arrPerson){
        document.write(person.navn+" er "+person.alder+" år gammel.<br>");
    }
    arrPerson.sort(function(a, b) { return a.alder - b.alder; });
    for(var person of arrPerson){
        document.write(person.navn+" er "+person.alder+" år gammel.<br>");
    }
    arrPerson.reverse();
    for(var person of arrPerson){
        document.write(person.navn+" er "+person.alder+" år gammel.<br>");
    }
</script>

8.2.5
<body>
    <input type="text" id="inpNavn">
    <input type="number" id="inpAntall">
    <button id="btn">Sett inn</button>
    <ol id="listPerson"></ol>
    <p id="txtUt"></p>
    <script>
        var inpNavn = document.getElementById("inpNavn");
        var inpAntall = document.getElementById("inpAntall");
        var btn = document.getElementById("btn");
        var txtUt = document.getElementById("txtUt");
        var sum =0;
        var arrPerson = [];
        btn.onclick = function() {
            listPerson.innerHTML="";
            sum =0;
            arrPerson.push({navn : inpNavn.value, antall : inpAntall.value});
            arrPerson.sort(function(a,b){
                return b.antall-a.antall;
            });
            for(var person of arrPerson){
                listPerson.innerHTML += "<li>" + person.navn + " har sett "+person.antall+" filmer</li>";
                sum+=Number(person.antall);
            }
            txtUt.innerHTML="Totalt "+sum+" filmer";
        }
    </script>
</body>

8.3.1
<script>
    var set = new Set(["Norge", "Sverige", "Danmark", "Tyskland"]);
    if (set.has("Norge")) {
        document.write("Du har Norge i samlingen.<br>");
        set.delete("Norge");
        document.write("Norge er slettet.<br>");
    }
    if(!set.has("Finland")){
        set.add("Finland");
        document.write("Finland er lagt til.<br>");
    }
</script>

8.3.2
<script>
    var set = new Set(["Norge", "Sverige", "Danmark", "Tyskland"]);
    var arrLand = Array.from(set);
    arrLand.sort();
    document.write(arrLand);
</script>

8.3.3
<body>
    <input id="inpFarge" type="color">
    <button id="btn">Registrer farge</button>
    <p id="txtUt"></p>
    <ul id="liste"></ul>
    <script>
        var btn = document.getElementById("btn");
        var inpFarge = document.getElementById("inpFarge");
        var txtUt = document.getElementById("txtUt");
        var liste = document.getElementById("liste");
        var set = new Set();
        btn.onclick=function(){
            liste.innerHTML="";
            set.add(inpFarge.value);
            txtUt.innerHTML="Det er "+set.size+" farger som er registrert";
            var arrFarge = Array.from(set);
            for(var farge of arrFarge){
                liste.innerHTML+="<li style='color:"+farge+"';>"+farge+"</li>";
            }
        }
    </script>
</body>

8.4.1
<body>
    <ul id ="liste"></ul>
    <script>
        var liste = document.getElementById("liste");
        var elever = new Map();
        elever.set("90878787", "Kalle Karlsen");
        elever.set("47474747", "Sølvi Normalbakken");
        elever.set("97979797", "Klaus Hagen");
        elever.set("98989898", "Pål Pålsen");
        elever.delete("47474747");
        elever.forEach(function(telefon, navn) {
            liste.innerHTML+="<li>Navn: "+navn+", telefon: "+telefon+"</li>";
        });
    </script>
</body>

8.4.2
a)Bytter ut de tre linjene i 8.4.1 som begynner med elever.forEach med følgende kode:
for(var [navn,telefon] of elever){
    liste.innerHTML+="<li>Tilstede: Navn: "+navn+", telefon: "+telefon+"</li>";
}
b) Legg inn "Tilstede" mellom "<li>" og "Navn" i koden for 8.4.1.

8.4.3
Bruk følgende kode til å traversere et array, set eller map:
datasamling.forEach(function(nøkkel, verdi) {
    //Hvis Map: gjør noe med nøkkel eller verdi til hvert element i datasamlingen. 
});

8.4.4
<body>
    <div>
        <input id="inpLandkode">
        <input id="inpNavn">
        <input id="inpAntall" type="number">
        <button id="btn">Registrer</button>
        <table id="tbl" style="width:auto" border="solid"></table>
    </div>
    <script>
        var inpLandkode=document.getElementById("inpLandkode");
        var inpNavn=document.getElementById("inpNavn");
        var inpAntall=document.getElementById("inpAntall");
        var btn=document.getElementById("btn");
        var tbl=document.getElementById("tbl");
        var landsamling=new Map();
        btn.onclick=function(){
            var landObjekt={kode:inpLandkode.value, navn:inpNavn.value, antall:inpAntall.value};
            landsamling.set(landObjekt.kode,landObjekt);
            visLand();
        }
        function visLand(){
            tbl.innerHTML="<tr><th>Landkode</th><th>Land</th><th>Antall</th></tr>";
            landsamling.forEach(function(navn,kode,map){
                var objekt = map.get(kode);
                tbl.innerHTML+="<tr><td>"+objekt.kode+"</td><td>"+objekt.navn+"</td><td>"+objekt.antall+"</td></tr>";
            });
        }
    </script>
</body>

8.5.1 og 8.5.2
<body>
    <p>Første avsnitt.</p>
    <p>Andre avsnitt.</p>
    <p>Tredje avsnitt.</p>
    <p>Fjerde avsnitt.</p>
    <script>
        var nodelista = document.getElementsByTagName("p");
        var arrAvsnitt = Array.from(nodelista);
        for(var pElement of arrAvsnitt){
            pElement.innerHTML+=" Avsnittet er slutt.";
        }
    </script>
</body>

8.5.3
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Prøv selv 8.5.3</title>
    <style>
        body {
            height: 100%; /* Setter høyden til 100 % */
            background-color: black; /* Svart bakgrunn */
        }
        .divElement {
            position: absolute;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <script>
        for(var i=0; i<1000;i++){
            var div = document.createElement("div");
            div.className="divElement";
            document.body.appendChild(div);
        }
        var divElementer = document.getElementsByClassName ("divElement");
        divElementer = Array.from(divElementer); //Gjør om nodelist til array
        function scramble() {
            for(var divElement of divElementer) {
                divElement.style.width = Math.random() * 30 + "px";
                divElement.style.height = Math.random() * 30 + "px";
                divElement.style.left = Math.random() * innerWidth+ "px";
                divElement.style.top = Math.random() * innerHeight+ "px";
            }
        }
        scramble(); //Første gang, skjer med en gang
        setInterval(scramble, 1500);
    </script>
</body>
</html>

8.5.4 Her kommer en lang kodesnutt. Kanskje du klarer å koden den smartere og lage den kortere?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Prøv selv 8.5.4</title>
<style>
    body {
        height: 100%; /* Setter høyden til 100 % */
    }
    .red {
        position: absolute;
        background-color: red;
    }
    .green {
        position: absolute;
        background-color: green;
    }
    .blue {
        position: absolute;
        background-color: blue;
    }
</style>
</head>
<body>
<button id="btnRod">Skjul rød</button>
<button id="btnGronn">Skjul grønn</button>
<button id="btnBla">Skjul blå</button>
<script>
    var btnRod=document.getElementById("btnRod");
    var btnGronn=document.getElementById("btnGronn");
    var btnBla=document.getElementById("btnBla");
    for(var i=0; i<120;i++){
        var div = document.createElement("div");
        if(i<40){div.className="red";}
        else if(i<80){div.className="green";}
        else{div.className="blue";}
        document.body.appendChild(div);
    }
    var divRod = document.getElementsByClassName ("red");
    divRod = Array.from(divRod); //Gjør om nodelist til array
    var divGronn = document.getElementsByClassName ("green");
    divGronn = Array.from(divGronn); //Gjør om nodelist til array
    var divBla = document.getElementsByClassName ("blue");
    divBla = Array.from(divBla); //Gjør om nodelist til array
    function scramble() {
        for(var divElement of divRod) {
            divElement.style.width = Math.random() * 30 + "px";
            divElement.style.height = Math.random() * 30 + "px";
            divElement.style.left = Math.random() * innerWidth+ "px";
            divElement.style.top = Math.random() * innerHeight+ "px";
        }
        for(var divElement of divGronn) {
            divElement.style.width = Math.random() * 30 + "px";
            divElement.style.height = Math.random() * 30 + "px";
            divElement.style.left = Math.random() * innerWidth+ "px";
            divElement.style.top = Math.random() * innerHeight+ "px";
        }
        for(var divElement of divBla) {
            divElement.style.width = Math.random() * 30 + "px";
            divElement.style.height = Math.random() * 30 + "px";
            divElement.style.left = Math.random() * innerWidth+ "px";
            divElement.style.top = Math.random() * innerHeight+ "px";
        }
    }
    scramble();
    btnRod.onclick=function(){
        var divSaml = document.getElementsByTagName("div");
        divSaml = Array.from(divSaml);
        for(var div of divSaml){
            if(div.className=="red"){div.style.background="white";}
            else if(div.className=="green"){div.style.background="green";}
            else{div.style.background="blue";}
        }
    }
    btnGronn.onclick=function(){
        var divSaml = document.getElementsByTagName("div");
        divSaml = Array.from(divSaml);
        for(var div of divSaml){
            if(div.className=="red"){div.style.background="red";}
            else if(div.className=="green"){div.style.background="white";}
            else{div.style.background="blue";}
        }
    }
    btnBla.onclick=function(){
        var divSaml = document.getElementsByTagName("div");
        divSaml = Array.from(divSaml);
        for(var div of divSaml){
            if(div.className=="red"){div.style.background="red";}
            else if(div.className=="green"){div.style.background="green";}
            else{div.style.background="white";}
        }
    }
</script>
</body>
</html>

 8.6.1 Koden nedenfor lager en liggende framstilling. For stående framstilling kan du prøve flexbok. Se side 226-227 og lag stående stolpediagram.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Prøv selv 8.6.1</title>
<style>
    #chart > div { /*CSS for div-elementer (stolpene) i #chart*/
        height: 15px; /*Alle får samme høyde*/
        margin-bottom: 5px; /*Marg under hver stolpe*/
        background-color: DarkOrange;
        color: white; /*Hvit skrift*/
        padding: 5px; /*Mellomrom mellom skriften i stolpene og ut til kantene på stolpene*/
    }
</style>
</head>
<body>
    <h1>Antall kilo kasserte druer</h1> <!--Tekst over stolpediagrammet-->
    <div id="chart"></div>
    <script>
        var chart = document.getElementById("chart"); //Referanse til div vi skal legge stolper i
        var mengder = [2.1,1.7,2.4,0.2];
        for(var mengde of mengder){
            chart.innerHTML += "<div style = 'width: "+ mengde * 100 + "px'>"+ mengde +" kg i uke "+(mengder.indexOf(mengde)+1)+"</div>";
        }
    </script>
</body>
</html>

8.6.3 Husk at y-verdiene starter på null øverst i vinduet og øker jo lenger ned på skjermen man kommer. Dette må man ta hensyn til og regne om y-verdiene. 
<body>
<svg width="1200" height="400">
    <defs>
        <marker id="sirkel" markerWidth="6" markerHeight="6" refX="3"
refY="3">
            <circle cx="3" cy="3" r="2" fill="Steelblue"></circle>
        </marker>
    </defs>
    <g stroke="LightGrey">
        <line x1="40" y1="50" x2="480" y2="50"></line>
        <line x1="40" y1="100" x2="480" y2="100"></line>
        <line x1="40" y1="150" x2="480" y2="150"></line>
        <line x1="40" y1="200" x2="480" y2="200"></line>
    </g>
    <g stroke="LightGrey">
        <line x1="40" y1="200" x2="40" y2="50"></line>
        <line x1="80" y1="200" x2="80" y2="50"></line>
        <line x1="120" y1="200" x2="120" y2="50"></line>
        <line x1="160" y1="200" x2="160" y2="50"></line>
        <line x1="200" y1="200" x2="200" y2="50"></line>
        <line x1="240" y1="200" x2="240" y2="50"></line>
        <line x1="280" y1="200" x2="280" y2="50"></line>
        <line x1="320" y1="200" x2="320" y2="50"></line>
        <line x1="360" y1="200" x2="360" y2="50"></line>
        <line x1="400" y1="200" x2="400" y2="50"></line>
        <line x1="440" y1="200" x2="440" y2="50"></line>
        <line x1="480" y1="200" x2="480" y2="50"></line>
    </g>
    <g text-anchor="middle" font-size="8" font-family="arial" fill="DarkGray">
        <text x="40" y="220">Januar</text>
        <text x="80" y="220">Februar</text>
        <text x="120" y="220">Mars</text>
        <text x="160" y="220">April</text>
        <text x="200" y="220">Mai</text>
        <text x="240" y="220">Juni</text>
        <text x="280" y="220">Juli</text>
        <text x="320" y="220">August</text>
        <text x="360" y="220">September</text>
        <text x="400" y="220">Oktober</text>
        <text x="440" y="220">November</text>
        <text x="480" y="220">Desember</text>
    </g>
    <polyline
        marker-mid="url(#sirkel)"
        stroke="SteelBlue"
        stroke-width="2"
        fill="none"
        points="40,188 80,189 120,172 160,145 200,101 240,72 280,69 320,66 360,83 400,112 440,152 480,175">
    </polyline>
</svg>
</body>

8.6.5 Ta utgangspunkt i eksempelet på side 232-233.

8.6.6-7 Ta utgangspunkt i ekstrastoff om Highcharts på side 239 og tilpass til oppgaven.

8.7.1 Lag ei js-fil som heter "data.js" med informasjonen lagret slik:
var dyreregister = {
"dyrene" : [{"pnr" : "001","navn" : "Kalle Kanin","adresse" : "Kaninsvingen 4"},
{"pnr" : "002","navn" : "Tassen","adresse" : "Kjøttbeinstien 19"},
{"pnr" : "003","navn" : "Klaus Ku","adresse" : "Kvegfaret 12B"}]
};

Lag ei HTML-fil med følgende kode i body:
<body>
<input type="text" placeholder="personnummer" id="inpPnr">
<div id="info">Skriv inn et personnummer for å søke etter en innbygger</div>
<script src="data.js"></script>
<script>
    var inpPnr = document.getElementById("inpPnr");
    var info = document.getElementById("info");
    var dyrMap = new Map();
    for(var dyr of dyreregister.dyrene) { //Traverserer og legger alle filmene fra arrayet inn i map
        dyrMap.set(dyr.pnr, dyr); //Legger filmen inn i map med film.id som nøkkel
    }
    inpPnr.oninput = function() { //Kaller opp en anonym funksjon ved skriving i input-felt
        var personnummer = inpPnr.value; //Innskrevet personnummer
        if(dyrMap.has(personnummer)) { //Sjekker om personnummeret fins
            var person = dyrMap.get(personnummer); //Slår opp i map
            info.innerHTML = "<h1>" + person.navn + "</h1>";
            info.innerHTML += "<p>Adresse: " + person.adresse + "</p>";
        }
        else { info.innerHTML = "Skriv inn et personnummer for å søke etter en innbygger";
        }
    }
</script>
</body>

8.7.2 Se fra tredje linje i første avsnittet i 8.7 på side 240 for en begrunnelse. En annen begrunnelse er at det er lettere å samle, strukturere og oppdatere data samlet ett sted.