10 Variabler, input og output

I dette kapitlet lager du en priskalkulator for Kinokiosken. Med JavaScript kan siden gjøre noe: regne, svare på det brukeren gjør, og endre seg. Lagre alt du lager i dette kapitlet i mappen kap10-javascript.

10.1 Et program på nettsiden

kinokiosken.html
<body>
  <h1>Kinokiosken</h1>
  <p id="txtSvar"></p>

  <script>
    txtSvar.textContent = "Velkommen til kiosken!";
  </script>
</body>

Elementet <script> inneholder et program skrevet i JavaScript. Programmet ovenfor finner avsnittet med id="txtSvar", og setter tekstinnholdet, textContent, i avsnittet.

  1. Les koden ovenfor, og gjett hva nettleseren viser.
  2. Lag filen kinokiosken.html i mappen kap10-javascript. Skriv en hel nettside med tittelen Kinokiosken, og legg koden ovenfor inn som <body>.
  3. Inspiser avsnittet i utviklerverktøyene. Hva står det i <p id="txtSvar"> nå? Hva står det i filen din?
  4. Endre teksten mellom anførselstegnene. Lagre, og last inn siden på nytt.

Nettleseren lager en variabel for hvert element som har en id. Derfor kan du skrive txtSvar i JavaScript. I denne boka begynner id-ene med txt for tekst, inp for input og btn for knapper, slik at du ser hva slags element det er.

Nedenfor ser du fire kodebiter. Bare én av dem virker.

Kode A
txtsvar.textContent = "Velkommen til kiosken!";
Kode B
txtSvar.textContent = "Velkommen til kiosken!;
Kode C
txtSvar.textContent = "Velkommen til kiosken!";
Kode D
txtSvar.textcontent = "Velkommen til kiosken!";
  1. Finn kodebiten som virker. Prøv de tre andre i filen din, én om gangen. Hva skjer på siden?

JavaScript skiller mellom store og små bokstaver. Når et program har en feil, skjer det ofte ingenting på siden. I 10.7 lærer du å lete etter feil.

  1. Flytt <script>-elementet opp i <head>. Hva skjer nå? Hvorfor tror du <script> skal stå nederst i <body>? Flytt det tilbake.
Spør KI

Forklar denne kodelinja del for del: txtSvar.textContent = "Velkommen til kiosken!";. Hvorfor må <script> stå etter avsnittet med id="txtSvar"? Ikke skriv mer kode for meg.

10.2 Knapper og funksjoner

kinokiosken.html
<body>
  <h1>Kinokiosken</h1>
  <button onclick="velkommen()">Trykk her</button>
  <p id="txtSvar"></p>

  <script>
    function velkommen() {
      txtSvar.textContent = "Velkommen til kiosken!";
    }
  </script>
</body>

En funksjon er en del av programmet som har et navn. Kodelinjene mellom krøllparentesene kjøres ikke når siden lastes inn, men først når noen kaller funksjonen. Attributtet onclick på knappen kaller funksjonen velkommen hver gang noen trykker på knappen.

  1. Les koden ovenfor. Hva står det på siden før du trykker på knappen? Hva står det etterpå?
  2. Endre filen din som vist ovenfor, og test.
  3. Rykk inn kodelinjene inne i funksjonen, slik koden ovenfor er rykket inn. Virker programmet med og uten innrykk? Hvorfor rykker vi inn likevel?
  4. Lag to nye knapper, Popkorn og Brus. Hver knapp skal kalle sin egen funksjon, som skriver for eksempel «Popkorn koster 45 kr.» i avsnittet. Bruk kodelinjene nedenfor for popkornet.
  • }
  • txtSvar.textContent = "Popkorn koster 45 kr.";
  • function popkorn() {

Nedenfor ser du fire knapper som skal kalle funksjonen velkommen. Bare én av dem virker.

Kode A
<button onclick="velkommen">Trykk her</button>
Kode B
<button onclick="Velkommen()">Trykk her</button>
Kode C
<button onclick="velkommen()">Trykk her</button>
Kode D
<button onclick=velkommen()>Trykk her</button>
  1. Finn knappen som virker. Hva er galt med de andre? Én av dem virker, selv om den ikke er skrevet slik vi pleier. Hvilken?

Gi funksjonene navn som sier hva de gjør, som velkommen, regn eller visPris. Du lærer mer om funksjoner i kapittel 17.

10.3 Variabler

kinokiosken.html
<button onclick="leggTil()">Legg til popkorn</button>
<p id="txtAntall">0</p>

<script>
  let antall = 0;

  function leggTil() {
    antall = antall + 1;
    txtAntall.textContent = antall;
  }
</script>

En variabel er et navn på en verdi. Med let lager du en ny variabel, og med = gir du den en verdi.

  1. Les koden ovenfor. Hva tror du kodelinje 8 gjør? Hva står det i avsnittet etter at du har trykket tre ganger?
  2. Legg til knappen, avsnittet og koden i filen din. Legg variabelen og funksjonen inne i <script>-elementet du allerede har, og test.
  3. Flytt let antall = 0; inn i funksjonen, rett over kodelinje 8. Trykk flere ganger. Hva skjer nå? Forklar hvorfor, og flytt kodelinja tilbake.
  4. Lag en knapp som heter Tøm, som setter antall til 0 og viser det i avsnittet.

antall = antall + 1; kan også skrives antall++;.

  1. Skriv om kodelinje 8 med ++. Virker programmet på samme måte?

En verdi som ikke skal endres, lager du med const i stedet for let.

  1. Lag variabelen const maksAntall = 10; øverst i <script>. Legg til kodelinja maksAntall = 20; først i funksjonen. Hva skjer når du trykker på knappen? Fjern kodelinja igjen.

Et variabelnavn kan inneholde bokstaver, tall og _, men kan ikke begynne med et tall, og kan ikke ha mellomrom. Nedenfor ser du fire kodebiter. Bare én av dem virker.

Kode A
let 1antall = 0;
Kode B
let antall popkorn = 0;
Kode C
Let antall = 0;
Kode D
let antallPopkorn = 0;
  1. Finn kodebiten som virker. Forklar feilen i hver av de tre andre.

Gi variablene navn som forteller hva de inneholder, som pris og antallBrus. Består navnet av flere ord, skriver du dem sammen med stor forbokstav i hvert nytt ord. Unngå æ, ø og å i navn.

10.4 Tekst og tall

kinokiosken.html
<p id="txtPris"></p>
<p id="txtTest"></p>

<script>
  const vare = "popkorn";
  const pris = 45;
  txtPris.textContent = "En " + vare + " koster " + pris + " kr.";
  txtTest.textContent = "5" + 3;
</script>

En tekst i JavaScript kalles en streng, og står mellom anførselstegn. Med + kan du sette sammen strenger. Tall skrives uten anførselstegn. Står det en streng på den ene siden av +, blir resultatet en streng.

  1. Les koden ovenfor, og gjett hva som står i de to avsnittene. Tenk særlig på kodelinje 8.
  2. Legg til avsnittene og kodelinjene i filen din, og sjekk om du gjettet riktig.
  3. Hvorfor blir "5" + 3 til 53, og ikke 8?
  4. Endre kodelinje 8 til txtTest.textContent = 5 + 3;. Hva står det nå?

Mellom backticks, `, kan du sette verdien til en variabel rett inn i teksten med ${}.

  1. Skriv kodelinje 7 på nytt med backticks, som vist nedenfor. Hvilken måte synes du er lettest å lese?
kinokiosken.html
txtPris.textContent = `En ${vare} koster ${pris} kr.`;

Backtick-tegnet ` finner du på tasten til venstre for på et norsk tastatur. Trykk og tasten, og deretter mellomrom.

Med Number gjør du en streng om til et tall.

  1. Endre kodelinje 8 til txtTest.textContent = Number("5") + 3;. Hva blir resultatet?
  2. Endre kodelinje 8 til txtTest.textContent = Number("fem") + 3;. Hva betyr resultatet NaN?
Spør KI

Jeg lærer JavaScript. Forklar forskjellen på "5" + 3 og 5 + 3. Lag deretter fem små uttrykk med strenger og tall, og la meg gjette resultatet av hvert, ett om gangen.

10.5 Regne med variabler

kinokiosken.html
const prisPopkorn = 45;
const prisBrus = 35;
let antallPopkorn = 2;
let antallBrus = 3;
let sum = prisPopkorn * antallPopkorn + prisBrus * antallBrus;
txtSum.textContent = `Sum: ${sum} kr`;
Algoritme
Gi prisen på popkorn verdien 45
Gi prisen på brus verdien 35
Gi antall popkorn verdien 2
Gi antall brus verdien 3
Regn ut summen
Vis summen på siden

En kunde vil ha to popkorn og tre brus. Programmet regner ut hva hun må betale. Ovenfor ser du koden og algoritmen for det samme programmet.

Tegn Betyr Eksempel Resultat
+ pluss 7 + 2 9
- minus 7 - 2 5
* gange 7 * 2 14
/ dele 7 / 2 3.5
% rest etter deling 7 % 2 1
  1. Les koden ovenfor, og gjett hva summen blir.
  2. Legg til et avsnitt med id="txtSum" og kodelinjene i filen din, og sjekk om du gjettet riktig.
  3. Hvorfor regner JavaScript prisPopkorn * antallPopkorn før +? Hva blir summen hvis du skriver parenteser rundt antallPopkorn + prisBrus?

JavaScript regner gange og dele før pluss og minus, på samme måte som i matematikken. Desimaltall skrives med punktum, for eksempel 3.5.

  1. Kunden er student, og får 15 prosent rabatt. Regn ut prisen med rabatt med sum * 0.85, og vis den i et nytt avsnitt.
  2. Rabattprisen får mange desimaler. Math.round runder av til nærmeste hele tall. Rund av prisen med rabatt til hele kroner.
  3. Kunden kjøper også en sjokolade til 25 kroner. Legg prisen til summen med sum += 25;. Hva betyr +=?
Kode Betyr det samme som
sum += 25; sum = sum + 25;
antall++; antall = antall + 1;

10.6 Lese input fra et tekstfelt

kinokiosken.html
<label for="inpPopkorn">Antall popkorn:</label>
<input type="number" id="inpPopkorn">
<button onclick="regn()">Regn ut</button>
<p id="txtSum"></p>

<script>
  const prisPopkorn = 45;

  function regn() {
    let antall = Number(inpPopkorn.value);
    let sum = antall * prisPopkorn;
    txtSum.textContent = `${antall} popkorn koster ${sum} kr.`;
  }
</script>

Med <input> får siden et felt der brukeren kan skrive, og value er det som står i feltet. <label> er teksten foran feltet.

Funksjonen regn følger en oppskrift du kommer til å bruke mange ganger: Hent verdiene fra siden, regn ut svaret, og vis svaret på siden.

  1. Les koden ovenfor. Hvilken kodelinje henter, hvilken regner, og hvilken viser?
  2. Erstatt innholdet i <body> med koden ovenfor, under <h1>. Skriv 3 i feltet, og trykk på knappen.
  3. Klikk på teksten «Antall popkorn:». Hva skjer? Hvem har nytte av at <label> er koblet til feltet?
  4. Fjern Number( og den siste ) på kodelinje 10. Skriv 3, og trykk på knappen. Blir svaret riktig? Endre kodelinje 11 til let sum = antall + prisPopkorn;, og prøv igjen. Hva skjer nå? Rett koden.
  5. Trykk på knappen uten å skrive noe i feltet. Hva blir svaret? Hvorfor?

Bruk alltid Number når du henter et tall fra et tekstfelt. I kapittel 11 lærer du å sjekke det brukeren har skrevet, før du regner med det.

  1. Legg til et felt for antall brus, og regn ut den samlede prisen.
  2. Vis antall popkorn, antall brus og summen i en hel setning, for eksempel «2 popkorn og 3 brus koster 195 kr.».

Gi siden stil med et <style>-element, slik du lærte i kapittel 5. Knappen og feltet blir lettere å bruke med større skrift og litt fyll.

10.7 Når programmet ikke virker

kinokiosken.html
const prisPopkorn = 45;

function regn() {
  let antall = Number(inpPopkorn.value);
  let sum = antall * prispopkorn;
  txtSum.textContent = `${antall} popkorn koster ${sum} kr.;
}

Programmet ovenfor har to feil, og når du trykker på knappen, skjer det ingenting. Til du lærer å lese feilmeldingene i kapittel 12, må du lete etter feilen selv.

Sjekkliste
Er alle navnene skrevet likt overalt, med de samme store og små bokstavene?
Er id-en i HTML-koden den samme som navnet i JavaScript?
Er navnet i onclick det samme som navnet på funksjonen?
Står anførselstegn og backticks i par?
Står parenteser og krøllparenteser i par?
Har du brukt Number på det du henter fra et tekstfelt?
  1. Bruk sjekklisten, og finn de to feilene i koden ovenfor.
  2. Lag feilene i filen din, én om gangen. Hva skjer på siden?

Når du ikke finner feilen, kan du sjekke hvor langt programmet kommer. Skriv en kodelinje som viser en tekst på siden, og flytt den nedover i funksjonen.

kinokiosken.html
function regn() {
  txtSum.textContent = "Hit kom programmet";
  let antall = Number(inpPopkorn.value);
  let sum = antall * prispopkorn;
}
  1. Lag feilen prispopkorn igjen, og legg til kodelinje 2. Trykk på knappen. Står teksten på siden? Flytt kodelinja ned under kodelinje 3, og deretter under kodelinje 4. Når forsvinner teksten? Hva forteller det deg?
  2. Rett feilen, og fjern testlinja.

Tekst etter // er en kommentar i JavaScript. Nettleseren hopper over kommentarer.

  1. Sett // foran kodelinja som regner ut summen. Hva skjer når du trykker på knappen? Fjern // igjen.

Lagre og test etter hver lille endring. Da vet du at feilen er i det du nettopp skrev.

Spør KI

Programmet mitt gjør ingenting når jeg trykker på knappen. Her er koden: [lim inn koden]. Ikke rett koden for meg. Gi meg ett hint om hvor jeg bør lete, og vent til jeg har prøvd, før du gir meg et nytt hint.

Oppsummering

I dette kapitlet har du laget en priskalkulator med knapper, funksjoner, variabler og tekstfelt, og du har lett etter feil.

Et program på nettsiden

kinokiosken.html
<label for="inpPopkorn">Antall popkorn:</label>
<input type="number" id="inpPopkorn" value="2">
<button onclick="regn()">Regn ut</button>
<p id="txtSum"></p>

<script>
  const prisPopkorn = 45;

  function regn() {
    let antall = Number(inpPopkorn.value);
    let sum = antall * prisPopkorn;
    txtSum.textContent = `${antall} popkorn koster ${sum} kr.`;
  }
</script>
Nettleser

Merk deg følgende:

  • <script> står nederst i <body>, etter elementene programmet bruker.
  • En funksjon kjøres først når den blir kalt, for eksempel med onclick på en knapp.
  • Hent verdiene, regn ut svaret, og vis svaret på siden.
  • JavaScript skiller mellom store og små bokstaver.

Variabler, tekst og tall

Kode Betyr
let antall = 0; lager variabelen antall med verdien 0
antall = 7; gir antall en ny verdi
antall++; gjør antall én større
sum += 25; legger 25 til sum
const pris = 45; lager en variabel som ikke kan endres
"tekst" en streng
`Du har ${antall}` en streng med verdien til antall inni
+ - * / % regning, og + setter også sammen strenger
Number(inpAntall.value) gjør teksten i feltet om til et tall
Math.round(7.6) runder av til 8
txtSvar.textContent = "Hei"; setter teksten i elementet med id="txtSvar"
// en kommentar en kommentar som nettleseren hopper over

Oppgaver

Oppgave 10.1

oppg1-rett-feil.html
<button onclick="hils()">Hils</button>
<p id="txtHilsen"></p>

<script>
  let fornavn = "Ola";
  let etternavn = "Nordmann;

  function Hils() {
    txtHilsen.textContent = "Hei, " + fornavn + " " + Etternavn;
  }
</script>

Koden ovenfor har tre feil. Skriv av koden i filen oppg1-rett-feil.html, og rett feilene. Når du trykker på knappen, skal det stå «Hei, Ola Nordmann».

Oppgave 10.2

  • txtTeller.textContent = teller;
  • let teller = 0;
  • }
  • teller++;
  • function tell() {

Lag filen oppg2-teller.html med en knapp og et avsnitt. Sett sammen kodelinjene til et program som teller hvor mange ganger du har trykket på knappen.

Oppgave 10.3

oppg3-rektangel.html
const lengde = 8;
const bredde = 5;
let areal = ...;
let omkrets = ...;
txtAreal.textContent = `Arealet er ${...} kvadratmeter.`;
txtOmkrets.textContent = `Omkretsen er ${...} meter.`;

Lag filen oppg3-rektangel.html med to avsnitt, og fullfør programmet. Svaret skal bli at arealet er 40 kvadratmeter og omkretsen 26 meter.

Oppgave 10.4

Gjett hva hvert av disse uttrykkene blir. Lag filen oppg4-gjett.html med et avsnitt, og vis uttrykkene i avsnittet, ett om gangen, for å sjekke svarene dine.

oppg4-gjett.html
10 / 4
10 % 4
"10" + "4"
"10" * 4
Number("10") + Number("4")

Oppgave 10.5

Lag filen oppg5-hilsen.html med to tekstfelt, ett for navn og ett for alder, og en knapp. Når brukeren trykker på knappen, skal det stå for eksempel «Hei, Amira! Om ti år er du 26 år.» på siden.

B-oppgaver

Oppgave 10.6

Lag filen oppg6-temperatur.html med et tekstfelt for en temperatur i grader celsius og en knapp. Programmet skal vise temperaturen i grader fahrenheit. Formelen er F = C · 1,8 + 32. Test programmet med 0, 100 og 37. Hva er rart med svaret for 37?

Oppgave 10.7

Lag filen oppg7-sekunder.html, der brukeren skriver inn et antall sekunder. Programmet skal vise hvor mange minutter og sekunder det er. For 135 sekunder skal svaret bli «135 sekunder er 2 minutter og 15 sekunder.».

Math.floor(135 / 60) gir 2, og 135 % 60 gir 15.

Oppgave 10.8

Lag en bestillingsside for Kinokiosken i filen oppg8-bestilling.html. Siden skal ha felt for popkorn, brus og sjokolade, og vise en oversikt med prisen for hver vare og totalsummen. Gi siden stil med et <style>-element.

Oppgave 10.9

Undersøk toFixed og toLocaleString. Lag filen oppg9-kroner.html, som regner ut prisen med 15 prosent rabatt og viser den på norsk måte, for eksempel 114,75 kr. Finn også ut hvordan du kan vise 1 234,50 kr, med mellomrom mellom tusenene.