Løsningsforslag til kapittel 5

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

5.1.1 
<script>
    function skrivNavn(){
        document.write("Ola Normann ");
    }
    skrivNavn();
    skrivNavn();
    skrivNavn();
</script>

5.1.2
<body>
    <p id="parTekst">Denne setningen har fått bakgrunnsfarge og større bokstaver.</p>
    <script>
        var parTekst = document.getElementById("parTekst");
        function endreFargeOgStorrelse(){
            parTekst.style.backgroundColor="PeachPuff";
            parTekst.style.fontSize="50px";
        }
        endreFargeOgStorrelse();
    </script>
</body>

5.1.3 Se for eksempel på koden din til oppgave 4.5.2. Kan du legge innholdet i for-løkka i en funksjon og kalle opp denne funksjonen inni for-løkka? Da blir funksjonen kalt opp det antallet ganger som for-løkka kjører.

5.1.4 Se på side 94 og side 96 for å finne begrunnelser for når det er hensiktsmessig å bruke funksjoner.

5.1.5 På side 98 kan du lese om pseudokode og hvordan du kan skrive dette.

5.1.6 a) Følgende kode tegner en sirkel i canvas:
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2* Math.PI);
    ctx.closePath();
    ctx.stroke();
Lag deg en funksjon, tegnSirkel, som tegner en sirkel, en funksjon, flyttX, som øker x med 20 og en funksjon, flyttY, som øker y med 20. 
b) Lag deg ei løkke som kaller opp disse tre funksjonene som du laget i a). 

5.2.1
<script>
    function skrivBokside(bokside){
        document.write("Bokside "+bokside+"<br>");
    }
    skrivBokside(29);
    skrivBokside(39);
    skrivBokside(100);
    skrivBokside(129);
    skrivBokside(210);
</script> 

5.2.2
<script>
    function skrivKontakt(fornavn, etternavn, telefon){
        document.write(fornavn+" "+etternavn+" "+telefon+"<br>");
    }
    skrivKontakt("Kai","Ellefsen","90909090");
    skrivKontakt("Kari","Ellefsen","90909091");
    skrivKontakt("Kaia","Ellefsen","90909092");
    skrivKontakt("Kaisa","Ellefsen","90909093");
    skrivKontakt("Adam","Ellefsen","90909094");
</script>

5.2.3
a) 
<script>
    function f(x){
        document.write(3*x);
    }
    f(9);
</script>
b)
<script>
    function finnAreal(w,h){
        document.write("Arealet av rektangelet blir "+w*h);
    }
    finnAreal(9,3);
</script>

5.2.4
<script>
    function lagDiv(tekst,bredde,bakgrunnsfarge,tekstfarge){
        document.body.innerHTML+="<div style='color:"+tekstfarge+"; background-color:"+bakgrunnsfarge+"; width:"+bredde+"px;'>"+tekst+"</div>";
    }
    lagDiv("Liten tekst",100,"Blue","PeachPuff");
</script>

5.2.5
<body>
    <p>Her kommer klatremus lillemann!</p>
    <script>
        function endreFarger(){
            document.body.style.color="red";
            document.body.style.backgroundColor="blue";
        }
        endreFarger();
    </script>
</body>

5.3.1 Se side 106 i læreboka for forklaring.

5.3.2 Bruk +5 og -5 istedenfor +1 og -1 i koden og prøv om dette gir riktig resultat.

5.3.3
<script>
    function visBetaling(pris){
        var ordinaerPris = pris;
        var rabatt = ordinaerPris*0.2;
        var tilbudsPris = ordinaerPris-rabatt;
        document.write("Ordinær pris = "+ordinaerPris+" kroner, rabatt = "+rabatt+" kroner, tilbudspris = "+tilbudsPris+" kroner<br>");
    }
    visBetaling(500);
    visBetaling(700);
    visBetaling(1200);
</script>

5.3.4
<body>
    <canvas id="canvas" width="500" height="500"> </canvas>
    <canvas id="canvas2" width="500" height="500"> </canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var canvas2 = document.getElementById("canvas2");
        var ctx = canvas.getContext("2d");
        var ctx2 = canvas2.getContext("2d");
        var totalBredde = 50;
        var totalHoyde =60;
        function tegnFirkant(x,y,bredde,hoyde){
            totalBredde+=bredde;
            totalHoyde+=hoyde;
            ctx.rect(x, y, totalBredde, totalHoyde);
            ctx.stroke();
        }
        function tegnFirkant2(x,y){
            ctx2.rect(x, y, totalBredde, totalHoyde);
            ctx2.stroke();
        }
        tegnFirkant(10,10,totalBredde,totalHoyde);
        tegnFirkant(10,10,totalBredde,totalHoyde);
        tegnFirkant(10,10,totalBredde,totalHoyde);
        tegnFirkant2(10,10);
    </script>
</body>

5.4.1 Se side 109 i læreboka.

5.4.2 
<script>
    (function() {
        var fornavn = "Per";
        var etternavn = "Spellemann"
        document.write(fornavn+" "+etternavn);
    })();
</script>

5.4.3
<body>
    <button id="btnKlikk">Klikk meg!</button>
    <script>
        var btnKlikk = document.getElementById("btnKlikk");
        btnKlikk.onclick=function() {
            document.write("Du klikket på knappen.");
        }
    </script>
</body>

5.4.4 
a)
<body>
    <button id="btnKlikk">Klikk meg!</button>
    <h1 id="overskrift">Klikkbar overskrift!</h1>
    <img id="imgBilde" src="bilde.png"><!--Her må du ha et bilde med filnavn som stemmer med attributtverdien til src-->
   <script>
       var btnKlikk = document.getElementById("btnKlikk");
       var overskrift = document.getElementById("overskrift");
       var imgBilde = document.getElementById("imgBilde");
       btnKlikk.onclick=function() {
           document.write("Du klikket på knappen.");
       }
       overskrift.onclick=function() {
           document.write("Du klikket på overskriften.");
       }
       imgBilde.onclick=function() {
           document.write("Du klikket på bildet.");
       }
    </script>
</body>
b) Bytt ut hendelsen onclick med onmouseover.

5.5.1
<body>
    <p id="melding"></p>
    <script>
        var melding = document.getElementById("melding")
        function siHei(navn) {
            return "Hei på deg, "+navn;
        }
        melding.innerHTML = siHei("Sune");
    </script>
</body>

5.5.2
<body>
    <p id="melding"></p>
    <script>
        var melding = document.getElementById("melding")
        function sjekkTall(tall) {
            if(tall>0){
                return "Tallet er større enn 0";
            }
            else if(tall===0){
                return "Tallet er null";
            }
            else{
                return "Tallet er mindre enn null";
            }
        }
        melding.innerHTML = sjekkTall(2);
    </script>
</body>

5.5.3
a)
<body>
    <p id="melding"></p>
    <script>
        var melding = document.getElementById("melding");
        var saldo = 10000;
        function uttak(tall) {
            saldo-=tall;
            return "Det er nå "+saldo+" kroner igjen på kontoen";
        }
        melding.innerHTML = uttak(1500);
    </script>
</body>
b) Her må du bruke en if-setning til å sjekke saldo.

5.5.4 Se på koden i eksempelet på side 117. Tilpass den til å passe med favorittfilmer istedenfor favorittbyer.