Løsningsforslag til kapittel 4

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

4.1.1 Skriv for eksempel følgende i <script>-elementet:
var svarPaSporsmal = prompt("Er du sulten?");
if(svarPaSporsmal==="ja"){
    document.write("Ta deg ei brødskive!");
}
else{
    document.write("Ta deg ei brødskive likevel!");
}

4.1.2
<body>
    <img id="imgRespons">
    <script>
        var svarPaSporsmal = prompt("Hva heter Norges konge?");
        var imgRespons = document.getElementById("imgRespons");
        if(svarPaSporsmal==="Harald"){
            document.write("Riktig");
            imgRespons.src="pokal.png";
        }
        else{
            document.write("Feil!");
            imgRespons.src="narr.png";
        }
    </script>
</body>

4.1.3 Her skal du finne ut at det er forskjell på datatypene variabelen tall kan ha og hvordan du i betingelsen kan sjekke for riktig datatype i tillegg til verdi.

4.1.4 Her kan du se på løsningsforslaget til oppgave 4.1.2 og tilpasse koden slik at den passer med oppgaven.

4.2.1 For eksempel:
<body>
    <img id="imgFugl">
    <script>
        var tilfeldigTall = Math.floor(Math.random()*3)+1;
        if(tilfeldigTall===1){
            imgFugl.src="fugl1.png";
        }
        else if(tilfeldigTall===2){
            imgFugl.src="fugl2.png";
        }
        else{
            imgFugl.src="fugl3.png";
        }
    </script>
</body>

4.2.2 I denne oppgaven kan du ta utgangspunkt i koden til oppgave 4.2.1. Endre ...*3... til ...*6... ved Math.random(), lag flere else if-setninger slik at du dekker opp seks utfall. I a bruker du f.eks document.write() til å skrive tekstresponsen. Endre fuglebildene til terningbilder i koden i oppgave b.

4.2.3 For eksempel:
var tall = Math.floor(Math.random()*9)+1;
if(tall < 7){
    document.write(tall+" er mindre enn 7<br>");
    if(tall < 3){
        document.write(tall+" er også mindre enn 3");
    }
}
else{
    document.write(tall+" er større enn 6");
}

4.2.4 Her han du bruke if(dato !=13) i en indre if-setning i en nøstet if-setning.

4.2.5 For eksempel:
var tall1 = Number(prompt("Skriv inn første tall!"));
var regneart = prompt("Skriv inn regneart (+, -, *, /)");
var tall2 = Number(prompt("Skriv inn andre tall!"));
if(regneart==="+"){
    document.write(tall1+""+regneart+""+tall2+"="+(tall1+tall2));
}
else if(regneart==="-"){
    document.write(tall1+""+regneart+""+tall2+"="+(tall1-tall2));
}
else if(regneart==="*"){
    document.write(tall1+""+regneart+""+tall2+"="+(tall1*tall2));
}
else{
    document.write(tall1+""+regneart+""+tall2+"="+(tall1/tall2));
}

4.3.1
<script>
    var mobil = prompt("Hva slags mobil ønsker du informasjon om?");
    switch(mobil){
        case "Samsung":
            document.write("Samsung mobiltelefoner bruker hovedsaklig Andrioid som operativsystem.");
            break;
        case "Microsoft":
            document.write("Microsoft Lumia mobiltelefoner bruker Windows 10 som operativsystem.");
            break;
        case "Sony":
            document.write("Sony mobiltelefoner er kjente for å ha god optikk i kameraet.");
            break;
        case "Apple":
            document.write("Apple Iphone bruker nå IOS 10 som operativsystem.");
            break;
        default:
            document.write("Velg en annen telefon.");
    }
</script>

4.3.2 Legg inn følgende linje under document.write... i oppgave 4.3.1:
    document.body.style.backgroundColor="blue";
Endre fargen blue til andre farger i de ulike case-ene.

 4.3.3
<script>
    var rovdyr = prompt("Hva slags rovdyr ønsker du informasjon om?");
    var antall;
    switch(rovdyr){
        case "ulv":
        case "ULV":
            antall = 33;
            break;
        case "jerv":
        case "JERV":
            antall = 343;
            break;
        case "bjørn":
        case "BJØRN":
            antall = 137;
            break;
        case "gaupe":
        case "GAUPE":
            antall = 350;
            break;
        default:
            document.write("Velg et annet rovdyr.");
    }
    document.write("Det er "+antall+" "+rovdyr+" i Norge.");
</script>

4.3.4
<script>
    var billett = prompt("Hva slags billett ønsker du?");
    var pris;
    switch(billett){
        case "barn":
        case "pensjonist":
            pris = 20;
            break;
        case "ungdom":
            pris = 25;
            break;
        case "voksne":
            pris = 30;
            break;
        default:
            document.write("Velg en annen billett.");
    }
    document.write("Det koster "+pris+" for en "+billett+"billett i Norge.");
</script>

4.4.1
<script>
    var vinner = Math.floor(Math.random()*10+1);
    var txtUt="";
    while(vinner!==10){
        txtUt+="Du vant ikke! ";
        vinner = Math.floor(Math.random()*10+1);
    }
    txtUt+="Du vant!"
    document.write(txtUt);
</script>

4.4.2
<canvas id="minCanvas" width="300" height="300"> </canvas>
<script>
    var canvas = document.getElementById("minCanvas");
    var ctx = canvas.getContext("2d");
    var side = 150; //Bredde og høyde
    var xPosisjon = 0; //Startposisjon x
    var yPosisjon = 0; //Startposisjon y
    while(yPosisjon<300) {
        ctx.lineTo(xPosisjon+side,yPosisjon);
        ctx.stroke();
        yPosisjon = yPosisjon+10;
        ctx.moveTo(xPosisjon, yPosisjon);
    }
</script>

4.4.3 Se på koden til oppgave 4.4.1. Tilpass denne til denne oppgaven.

4.4.4
<table id =tblGange border="1"><tbody id ="tblBody"></tbody></table>
<script>
    var tblBody= document.getElementById("tblBody");
    var txtUt="";
    var iH=1;
    var iV=8;
    txtUt+="<tr>";
    while(iH<11){
        txtUt+="<td>"+(iH*iV)+"</td>";
        iH++;
    }
    txtUt+="</tr>";
    tblBody.innerHTML+=txtUt;
</script>

4.5.1
a)
<script>
    var txtUt="";
    for(var i=10;i>=1;i--){
        txtUt+=i+" ";
    }
    document.write(txtUt);
</script>
b) Endre for-løkka til for(var i=0; i<100;i+=2)
c) Endre for-løkka til for(var i=1; i<=1000; i++) og inni kroppen til for-løkka skriver du i++; Utenfor løkka skriver du ut i.

4.5.2
<script>
    var fibmin2 =0;
    var fibmin1 =1;
    var fib=fibmin2;
    var txtUt="";
    for(var i=0; i<10; i++){
        txtUt+=+fib+", ";
        fibmin2=fibmin1;
        fibmin1=fib;
        fib=fibmin2+fibmin1;
    }
    document.write(txtUt);
</script>
a)
<script>
    var canvas = document.getElementById("minCanvas");
    var ctx = canvas.getContext("2d");
    var side = 150; //Bredde og høyde
    var xPosisjon = 0; //Startposisjon x
    var yPosisjon = 0; //Startposisjon y
    for(var i=0; i<=10; i++) {
        ctx.lineTo(xPosisjon+side,yPosisjon);
        ctx.stroke();
        yPosisjon = yPosisjon+10;
        ctx.moveTo(xPosisjon, yPosisjon);
    }
</script>
b)
<canvas id="minCanvas" width="300" height="300"> </canvas>
<script>
    var canvas = document.getElementById("minCanvas");
    var ctx = canvas.getContext("2d");
    var side = 10; //Bredde og høyde
    var xPosisjon = 140; //Startposisjon x
    var yPosisjon = 140; //Startposisjon y
    for(var i=1; i<=10; i++){
        ctx.rect(xPosisjon, yPosisjon, side, side);
        ctx.stroke();
        xPosisjon = xPosisjon-10;
        yPosisjon = yPosisjon-10;
        side = side+20;
    }
</script>

4.5.3
<table id =tblGange border="1"><tbody id ="tblBody"></tbody></table>
<script>
    var tblBody= document.getElementById("tblBody");
    var txtUt="";
    for(var i=1; i<=10; i++){
        txtUt+="<tr>";
        for(var j=1; j<=10; j++){
            txtUt+="<td>"+(i*j)+"</td>";
        }
        txtUt+="</tr>";
    }
    tblBody.innerHTML+=txtUt;
</script>