Løsningsforslag til kapittel 12

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

12.1.1
<script>
    class Land{
        constructor(navn, areal, folketall){
            this.navn = navn;
            this.areal = areal;
            this.folketall = folketall;
        }
        get innbyggerePerKvadratkilometer(){
            return (this.folketall/this.areal).toFixed(0);
        }
    }
    //Finner opplysninger om land her: https://www.cia.gov/library/publications/the-world-factbook/
    var norge = new Land("Norge", 323802, 5265158);
    var usa = new Land("USA", 9833517, 323995528);
    var kina = new Land("Kina", 9596960, 1373541278);
    var sverige = new Land("Sverige", 450295, 9880604);
    var arrLand = [norge,usa,kina,sverige];

    for(var land of arrLand){
        document.write(land.navn+" har et areal på "+land.areal+" kvadratkilometer og har et folketall på "+land.folketall+". Innbyggere pr km^2 er "+land.innbyggerePerKvadratkilometer+".<br>");
    }
</script>

12.1.2 Se på løsningsforslaget til 12.1.1 og tilpass koden til å besvare oppgaven.

12.1.3 b) Bruk koden nedenfor og kombiner med kode fra 12.1.1 for eventuelt å skrive ut informasjonen i objektene. 
<script>
    class Musikkinstrument{
        constructor(type, pris){
            this.type = type;
            this.pris = pris;
        }
    }
    class Strengeinstrument extends Musikkinstrument{
        constructor(type, pris, antallStrenger){
            super(type, pris);
            this.antallStrenger = antallStrenger;
        }
    }
    var trompet = new Musikkinstrument("Trompet", 5000);
    var fiolin = new Strengeinstrument("Fiolin", 10000, 4);
</script>

12.2.1 a og b. Bilder av flagg kan lastes ned fra kode.cdu.no
 <style> #soyler > div {
        height: 20px; /*Høyde på søylene*/
        padding: 5px; /*Avstand mellom tekst og kantene av søylen*/
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        background-color: lightgreen;
        margin-bottom: 5px; /*Avstand ned til neste søyle*/
    }
</style>
</head>
<body>
<div id="divFlaggene"></div>
<h1 id="txtSvar"></h1>
<table><tbody id="tblLand"></tbody></table>
<article id="soyler"></article>
<script>
    var divFlaggene = document.getElementById("divFlaggene");
    var txtSvar = document.getElementById("txtSvar");
    var tblLand = document.getElementById("tblLand");
    var soyler = document.getElementById("soyler");
    class Land {
        constructor(bildefil, navn, areal, folketall) {
            this.bildefil = bildefil;
            this.navn = navn;
            this.areal = areal;
            this.folketall = folketall;
        }
        get klikkbartBilde() {
            return `<img src="${this.bildefil}" width="100px" onclick="visLand('${this.navn}','${this.tabellrad}')">`;
        }
        get tabellrad(){
            var rad = `<tr>Land: ${this.navn}</tr><tr>Areal: ${this.areal} km^2</tr><tr>Folketall: ${this.folketall}</tr><tr>Innbyggertetthet: ${this.innbyggerePerKvadratkilometer} per km^2</tr>`;
            return rad;
        }
        get innbyggerePerKvadratkilometer(){
            return (this.folketall/this.areal).toFixed(0);
        }
        get soyle() { return `<div style="width: ${this.innbyggerePerKvadratkilometer*10}px;">${this.navn} - ${this.innbyggerePerKvadratkilometer}</div>`;
        }
    }
    function visLand(navn, tabellrad) { 
        txtSvar.innerHTML = navn;
        tblLand.innerHTML = "<tr><td>"+tabellrad+"</td></tr>";
    }

    var finland = new Land("finland.png", "Finland", 338145,5498211);
    var hellas = new Land("hellas.png", "Hellas", 131957, 10773253);
    var irland = new Land("irland.png", "Irland", 70273, 4952473);
    divFlaggene.innerHTML += finland.klikkbartBilde;
    divFlaggene.innerHTML += hellas.klikkbartBilde;
    divFlaggene.innerHTML += irland.klikkbartBilde;
    soyler.innerHTML += finland.soyle; // Bruker get-metoden get soyle() {};
    soyler.innerHTML += hellas.soyle;
    soyler.innerHTML += irland.soyle;
</script>
</body>

12.2.2 Her kan du ta utgangspunkt i koden til 12.2.1 og skrelle den ned og tilpasse den til oppgaven.

12.2.3 Nedenfor ser du kodesnutter for å registrere data om land. Sett koden inn i 12.2.1. Modifiser koden og tilpass til å passe for utvidelse av oppgaven 12.2.2.
//Sett inn i <body> på et passende sted
<form id="frmLand">
    <label for="inpLand">Land: </label>
    <input type="text" id="inpLand" required>
    <label for="inpFlagg">Flagg: (url) </label>
    <input type="text" id="inpFlagg" required>
    <label for="inpAreal">Areal: </label>
    <input type="number" id="inpAreal" required>
    <label for="inpFolketall">Folketall: </label>
    <input type="number" id="inpFolketall" required>
    <button type="submit">Registrer</button>
</form>
//Sett inn øverst i <script> på passende sted.
    var frmLand = document.getElementById("frmLand");
    var inpLand = document.getElementById("inpLand");
    var inpFlagg = document.getElementById("inpFlagg");
    var inpAreal = document.getElementById("inpAreal");
    var inpFolketall = document.getElementById("inpFolketall");
//Sett inn f.eks nederst i <script>.
    frmLand.onsubmit = function(evt){
        evt.preventDefault();
        var nyttLand = new Land(inpFlagg.value, inpLand.value, Number(inpAreal.value), Number(inpFolketall.value));
        soyler.innerHTML+=nyttLand.soyle;
        divFlaggene.innerHTML += nyttLand.klikkbartBilde;
    }

12.2.4 Du kan se hvordan du lagrer objektene i array på side 351 og hvordan du konverterer mellom array og map på side 220 og hvordan du lager sletteknapp nederst på side 243.
Forsøk å redigere sammen koden slik at du løser oppgaven.

12.2.5 og 12.2.6 Se eksempel på side 354.

12.4.1 Se eksempel på side 362 og denne videoen på http://kode.cappelendamm.no/elevreal/tekst.html?tid=1950382&sec_tid=1918491