Løsningsforslag til kapittel 3

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

3.1.1 Vi deklarerer en variabel slik: var hilsen;
Vi tilordner en tekstverdi til variabelen vi nettopp deklarerte slik: hilsen = "Hei kjære bruker!";
Og vi kan vise teksten i variabelen på nettsiden slik: document.write(hilsen);

3.1.2 Vi definerer to variabler slik:
var hilsen = "Hei kjære bruker!";
var hilsen2 = "Velkommen!";
Så skriver du ut den første hilsenen slik du gjorde i oppgave 3.1.1. Se på HTML-fila i en nettleser. Deretter erstatter du "hilsen" med "hilsen2" i document.write();

3.1.3
var fornavn ="Knut";
var etternavn ="Knutsen";
document.write(forvavn+" "+etternavn);

3.1.4
document.write("Velkommen "+prompt("Vennligst skriv inn navnet ditt"));

3.1.5 Start med å tilordne navnet fra prompt-boksen til en variabel.
var navn = prompt("Vennligst skriv inn navnet ditt");
I document.write skeiver du teksten til innbydelsen og konkatenerer navn-variabelen inn slik:
...."+navn+"....

3.1.6 Start med å tilordne adjekltiver fra prompt-bokser til seks variabler, adj1, adj2, ... slik du gjorde i oppgave 3.1.5. Skriv selve adjektivhistorien og sett inn variablene med adjektivene slik du gjorde med navn i 3.1.5.

3.2.1 Definerer variablene hoyde og bredde. Gir dem verdiene 3 og 4.
var hoyde = 3; 
var bredde = 4;
a) document.write("Arealet er "+hoyde*bredde);
b) document.write("Omkretsen er "+(2*hoyde+2*bredde)); //Legg merke til at hele regnestykket er pakket inn mellom parenteser. Dette for at ikke 2*hoyde og 2*bredde skal konkateneres siden det står + mellom.
c) Legg gjerne inn kommentaren fra b i koden.

3.2.2 Du ganger med antall forskjellige heltallsverdier. [0, 10] er 11 verdier. Så legger du til startverdien. [10,20] starter på 10 og er 11 forskjellige verdier. Se c. 
a) document.write((Math.floor(Math.random()*6)+1));
b) document.write((Math.floor(Math.random()*11)));
c) document.write((Math.floor(Math.random()*11)+10));

3.2.3
var radius = prompt("Skriv inn radius til kula!");
a) document.write("Omkretsen til kula er "+(2*Math.PI*radius));
b) document.write("Volumet til kula er "+(4*Math.PI*Math.pow(radius,3)/3));
c) document.write("Overflaten til kula er "+(4*Math.PI*Math.pow(radius,2)));
d) Kommenter ved å legge inn //kommentar eller /*kommentar*/ i koden.
Hvis du vil redusere antall desimaler i svaret kan du legge inn Math.round(utregningen) for å få heltall, eller du kan bruke .toFixed(1) etter parentesen med utregningen for å få en desimal.

3.2.4
var antallPoengBesvarelse = prompt("Skriv inn poengsum!");
var antallMuligePoeng = prompt("Skriv inn maks poeng!");
document.write("Dette gir karakteren "+Math.round(antallPoengBesvarelse*6/antallMuligePoeng));

3.2.5
var vekt = prompt("Skriv inn vekt!");
var hoyde = prompt("Skriv inn høyde. Bruk punktum som desimalskilletegn.");
document.write("KMI "+(vekt/Math.pow(hoyde,2)).toFixed(1));
Her må vi be brukeren om å bruke punktum istedenfor komma. 

3.3.1 Her er det meningen at du skal se hva som er forskjellen på konkatenering av to variable som har datatypen tekst og summering av to variable med datatypen tall.

3.3.2
var prisUtenMva = prompt("Skriv inn pris uten moms! Bruk punktum som desimalskilletegn.");
document.write("Pris med moms er "+(Number(prisUtenMva)*1.25).toFixed(2));

3.3.3 Bruk prompt-boka til å lese inn datamengde, antall samtaler, tingetid, antall mms, og antall sms og lagre dem som variabler på samme måte som du gjorde i 3.3.2. Definer variabelsen pris som en formel med variablene. Skriv ut pris ved å bruke document.write().

3.3.4 For eksempel:
var indeksertVariabel = ["Trond", "Nilsen", "23 år", "Sporlysveien 5", "Haveby"];
document.write(indeksertVariabel[4]);
Første verdi i arrayet er "Trond" med indeks 0, siste verdi er "Haveby" med indeks 4.

3.3.5
var frukt1 = {navn:"Eple", pris:6};
var frukt2 = {navn:"Pære", pris:9};
var frukt3 = {navn:"Appelsin", pris:12};
document.write(frukt1.navn+" koster "+frukt1.pris+" kroner. ");
document.write(frukt2.navn+" koster "+frukt2.pris+" kroner. ");
document.write(frukt3.navn+" koster "+frukt3.pris+" kroner. ");
frukt2.pris=4.5;
document.write("Nå koster "+frukt2.navn+" "+frukt2.pris+" kroner. ");

3.4.1 a og b.
<body>
<p id="Natur"></p>
<script>
    var parNatur = document.getElementById("Natur");
    parNatur.innerHTML="Naturen gir rekreasjonsmuligheter!";
</script>
</body>

3.4.2 
<p id="svar"></p>
<script>
    var svarPaSporsmal = prompt("Hva er ditt etternavn?");
    var parSvar = document.getElementById("svar");
    parSvar.innerHTML = svarPaSporsmal;
</script>

3.4.3
<p id="favorittfilmer"></p>
<script>
    var arrFavorittfilmer = ["Men in black", "Bridget Jones", "Løvenes konge"];
    var parFilmer = document.getElementById("favorittfilmer");
    parFilmer.innerHTML = arrFavorittfilmer;
</script>

3.4.4 
<body>
<h1>Min handleliste</h1>
<ul id="handleliste"></ul>
<script>
    var handleliste = document.getElementById("handleliste");
    var vare1 = prompt("Skriv inn første vare.");
    var vare2 = prompt("Skriv inn andre vare");
    var vare3 = prompt("Skriv inn tredje vare");
    handleliste.innerHTML = "<li>Vare 1: <b>" + vare1 + "</b></li>";
    handleliste.innerHTML += "<li>Vare 2: <b>" + vare2 + "</b></li>";
    handleliste.innerHTML += "<li>Vare 3: <b>" + vare3 + "</b></li>";
</script>
</body>

3.4.5
<img id="bilde">
<script>
    var bilde = document.getElementById("bilde");
    bilde.src="Bilde"+(Math.floor(Math.random()*3)+1)+".png";
</script>

3.4.6 Legg et bilde som heter "Bilde4.png" i mappen med bilder til oppgave 3.4.5. Endre ...+1...til ...+2...i koden fra oppgave 3.4.5.

 3.5.1
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext("2d");
    ctx.fillRect(30,20,50,50);
    ctx.stroke();
</script>
</body>

3.5.2 a og b
<body>
    <canvas id="canvas" width="500" height="400"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle= "red";
        ctx.fillStyle ="green";
        ctx.lineWidth= 3;
        ctx.fillRect(100,100,50,150);
        ctx.strokeRect(100,100,50,150);
        ctx.stroke();
        ctx.strokeStyle ="blue";
        ctx.moveTo(125, 120);
        ctx.lineTo(140, 200);
        ctx.lineTo(110, 200);
        ctx.lineTo(125, 120);
        ctx.stroke();
    </script>
</body>

3.5.3
<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var xPos=50;
        var yPos=100;
        var bredde=100;
        var hoyde=100;
        ctx.strokeStyle= "blue";
        ctx.lineWidth= 3;
        ctx.moveTo(xPos, yPos);
        ctx.lineTo(xPos+bredde/2, yPos-hoyde/2);
        ctx.lineTo(xPos+bredde, yPos);
        ctx.lineTo(xPos+bredde, yPos+hoyde);
        ctx.lineTo(xPos, yPos+hoyde);
        ctx.lineTo(xPos, yPos);
        ctx.stroke();
    </script>
</body>

3.5.4 Her finner du proporsjonene til det norske flagget: https://no.wikipedia.org/wiki/Norges_flagg. Bruk fillStyle og fillRect() til å tegne rektanglene med riktige farger.

3.5.5
<body>
    <canvas id="canvas" width="500" height="400"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var farge1 = prompt("Skriv inn farge på engelsk");
        var farge2 = prompt("Skriv inn farge på engelsk");
        var farge3 = prompt("Skriv inn farge på engelsk");
        ctx.lineWidth= 3;
        ctx.fillStyle = farge1;
        ctx.fillRect(100,100,50,150);
        ctx.stroke();
        ctx.fillStyle = farge2;
        ctx.fillRect(150,100,50,150);
        ctx.stroke();
        ctx.fillStyle = farge3;
        ctx.fillRect(200,100,50,150);
        ctx.stroke();
    </script>
</body>