11 Valg og logiske uttrykk

I kapittel 10 gjorde knappene det samme hver gang. Nå lærer du å få programmet til å velge selv: Kjører bilen for fort? Er du gammel nok? Lagre alt du lager i dette kapitlet i mappen kap11-valg.

11.1 Logiske uttrykk

sant-eller-usant.html
<h1>Sant eller usant?</h1>
<button onclick="test()">Test</button>
<p id="txtSvar"></p>

<script>
  function test() {
    txtSvar.textContent = 5 > 3;
  }
</script>

5 > 3 er et logisk uttrykk. Det er et spørsmål med bare to mulige svar: true, som betyr sant, eller false, som betyr usant. Det finnes ingen tredje mulighet. Logiske uttrykk er grunnlaget for alle valg et program gjør.

  1. Les koden ovenfor, og gjett hva som står på siden når du trykker på knappen.
  2. Lag filen sant-eller-usant.html i mappen kap11-valg, og test.
  3. Bytt ut 5 > 3 med uttrykkene i tabellen nedenfor, ett om gangen. Skriv av tabellen, og gjett før du trykker på knappen.
Uttrykk Gjetning Resultat
5 < 3
5 === 5
5 !== 5
10 >= 10
3 <= 2
"Ola" === "Ola"
"Ola" === "ola"
Tegn Betyr Eksempel Resultat
=== er lik 5 === 5 true
!== er ikke lik 5 !== 5 false
> større enn 7 > 10 false
< mindre enn 7 < 10 true
>= større enn eller lik 10 >= 10 true
<= mindre enn eller lik 12 <= 10 false

Ett likhetstegn er noe helt annet enn tre. pris = 100 gir variabelen verdien 100. pris === 100 spør om verdien er 100. Blander du dem, får du feil som er vanskelige å finne.

  1. Bytt ut uttrykket med 5 = 5, og trykk på knappen. Hva skjer?
  2. Hvorfor tror du "Ola" === "ola" gir false?
Spør KI

Gi meg ti logiske uttrykk i JavaScript med tall og tekst, ett om gangen. La meg svare true eller false, og forklar hvorfor hvis jeg svarer feil.

11.2 if og else

fartskontrollen.html
<h1>Fartskontrollen</h1>
<label for="inpFart">Hvor fort kjørte bilen?</label>
<input type="number" id="inpFart">
<button onclick="sjekk()">Sjekk</button>
<p id="txtSvar"></p>

<script>
  const fartsgrense = 80;

  function sjekk() {
    let fart = Number(inpFart.value);

    if (fart > fartsgrense) {
      txtSvar.textContent = "For fort!";
    }
  }
</script>

Du er fartskontrollen. Noen skriver inn hvor fort en bil kjørte, og programmet avgjør hva som skjer. Med if kjører programmet noen kodelinjer bare når et logisk uttrykk er true.

Del I koden Hva det er
Nøkkelordet if starter valget
Vilkåret (fart > fartsgrense) et logisk uttrykk, true eller false
Blokka { ... } kodelinjene som kjøres når vilkåret er true
  1. Les koden ovenfor. Hva skjer når du skriver 95? Hva skjer når du skriver 70?
  2. Lag filen fartskontrollen.html, og test med 95 og 70.

Programmet sier ingenting når farten er grei. Med else bestemmer du hva som skal skje når vilkåret er false.

  1. Utvid koden som vist nedenfor, og test på nytt.
fartskontrollen.html
if (fart > fartsgrense) {
  txtSvar.textContent = "For fort!";
} else {
  txtSvar.textContent = "Farten er grei.";
}
  1. Skriv av tabellen nedenfor, og gjett hva som står på siden. Test deretter.
Du skriver Gjetning Resultat
95
80
79
  1. Hvorfor blir 80 «Farten er grei»? Hva må du endre i vilkåret for at 80 skal regnes som for fort? Endre tilbake.
  2. «For fort!» er lite presist. Lag variabelen let over = fart - fartsgrense; rett under let fart, og endre teksten til for eksempel «For fort! 15 km/t over grensen.».

else har aldri noe vilkår. Den fanger opp alt som ikke passet i if.

11.3 Flere valg med else if

fartskontrollen.html
if (fart === fartsgrense) {
  txtSvar.textContent = "Akkurat på fartsgrensen. Godt kjørt!";
} else if (fart < fartsgrense) {
  txtSvar.textContent = "Farten er grei.";
} else if (over <= 10) {
  txtSvar.textContent = `For fort! ${over} km/t over. Du får bot.`;
} else {
  txtSvar.textContent = `Altfor fort! ${over} km/t over. Førerkortet ryker.`;
}

Med else if kan du ha så mange vilkår du vil. JavaScript tester vilkårene ett for ett, ovenfra og ned.

  1. Les koden ovenfor. Det tredje vilkåret sier bare over <= 10. Hvorfor trenger det ikke også å si at farten er over grensen?
  2. Erstatt hele if-setningen i fartskontrollen med koden ovenfor.
  3. Skriv av tabellen nedenfor, og gjett hva som står på siden. Test deretter.
  4. Hva skjer hvis flere av vilkårene er true? Bytt rekkefølgen på to av vilkårene, og test igjen.
Du skriver Gjetning Resultat
75
80
85
120

Nedenfor ser du to rekkefølger av de samme vilkårene.

Kode A
if (over > 10) {
  txtSvar.textContent = "Altfor fort!";
} else if (over > 0) {
  txtSvar.textContent = "For fort!";
} else {
  txtSvar.textContent = "Farten er grei.";
}
Kode B
if (over > 0) {
  txtSvar.textContent = "For fort!";
} else if (over > 10) {
  txtSvar.textContent = "Altfor fort!";
} else {
  txtSvar.textContent = "Farten er grei.";
}
  1. Hvilken av kodebitene er riktig? Hva skjer med en bil som kjører 120 i den andre?

if tester det første vilkåret. else if tester det neste, men bare hvis alle vilkårene over var false. else fanger opp alt som er igjen. Rekkefølgen er en del av koden.

11.4 Tekst eller tall?

sant-eller-usant.html
<input type="text" id="inpTall">
<button onclick="test()">Test</button>
<p id="txtSvar"></p>

<script>
  function test() {
    let skrevet = inpTall.value;
    txtSvar.textContent = skrevet === 5;
  }
</script>

Alt brukeren skriver i et tekstfelt, er en streng. Skriver brukeren 5, får programmet "5", og ikke tallet 5. === sammenligner både verdien og typen. En streng er aldri lik et tall.

  1. Les koden ovenfor. Gjett hva som står på siden når du skriver 5 og trykker på knappen.
  2. Utvid sant-eller-usant.html med et tekstfelt, og endre funksjonen som vist ovenfor. Test.
  3. Skriv av tabellen nedenfor. Skriv 5 i feltet, og prøv hvert uttrykk.
Uttrykk Gjetning Resultat
skrevet === 5
skrevet === "5"
Number(skrevet) === 5
skrevet == 5
  1. Uttrykket med == gir et annet svar enn det første. == gjør om strengen til et tall før den sammenligner. Hvorfor er det likevel lurt å bruke === og Number?

Bruk === og !==. De sier tydelig hva du mener, og avslører det hvis du har glemt Number. Du vil se == i kode andre har skrevet, og nå vet du hva den gjør.

Et tomt felt gir den tomme strengen "". Det kan programmet sjekke før det regner.

  1. Utvid funksjonen sjekk i fartskontrollen som vist nedenfor. Trykk på knappen uten å skrive noe.
fartskontrollen.html
function sjekk() {
  if (inpFart.value === "") {
    txtSvar.textContent = "Skriv inn en fart.";
    return;
  }
  let fart = Number(inpFart.value);
  1. return avslutter funksjonen. Hva skjer hvis du fjerner return;?

11.5 Og, eller og ikke

karusellvakten.html
<h1>Karusellvakten</h1>
<p>Du må være minst 12 år eller høyere enn 140 cm.</p>
<label for="inpAlder">Alder:</label>
<input type="number" id="inpAlder">
<label for="inpHoyde">Høyde i cm:</label>
<input type="number" id="inpHoyde">
<button onclick="sjekk()">Sjekk</button>
<p id="txtSvar"></p>

<script>
  function sjekk() {
    let alder = Number(inpAlder.value);
    let hoyde = Number(inpHoyde.value);

    if (alder >= 12 || hoyde > 140) {
      txtSvar.textContent = "Du kan kjøre karusellen!";
    } else {
      txtSvar.textContent = "Beklager, du kan ikke kjøre.";
    }
  }
</script>

Noen ganger holder det ikke med ett spørsmål. Med && og || setter du sammen to logiske uttrykk til ett. Med ! snur du et uttrykk.

Tegn Navn Gir true når
&& og begge uttrykkene er true
|| eller minst ett av uttrykkene er true
! ikke uttrykket er false
  1. Les koden ovenfor. Hvem får kjøre karusellen?
  2. Lag filen karusellvakten.html. Skriv av tabellen nedenfor, og fyll inn hvem som får kjøre, før du tester.
Alder Høyde Gjetning Resultat
13 150
11 150
13 120
11 135
12 140
  1. Bytt ut || med &&, og test tabellen på nytt. Hvilke rader endret svar? Hvorfor?
  2. Endre tilbake til ||. Skriv om vilkåret med !, slik at det spør om personen ikke får kjøre. Bytt om på de to blokkene.

Tegnet | skriver du på et norsk tastatur med tasten til venstre for , ofte sammen med . Du trenger to av dem: ||.

  1. Karusellen har også en øvre grense: Ingen over 190 cm får kjøre. Skriv vilkåret med parenteser: (alder >= 12 || hoyde > 140) && hoyde <= 190. Hvorfor trengs parentesene?
Spør KI

Forklar forskjellen på && og || i JavaScript med et eksempel fra hverdagen, for eksempel reglene for å få kjøre en karusell eller få rabatt på kino. Still meg deretter tre spørsmål for å sjekke at jeg har forstått det.

11.6 Tilfeldige tall

fartskontrollen.html
function nesteBil() {
  inpFart.value = Math.floor(Math.random() * 71) + 50;
  sjekk();
}

Det tar tid å skrive inn fart etter fart. La programmet lage farten selv. Math.random() gir et tilfeldig tall mellom 0 og 1, for eksempel 0.4718. Med noen få steg gjør vi det om til et heltall fra 50 til 120.

Steg Kode Eksempel
1. Lag et tilfeldig tall Math.random() 0.4718
2. Gang med 71 Math.random() * 71 33.49
3. Rund ned Math.floor( ... ) 33
4. Legg til 50 Math.floor(Math.random() * 71) + 50 83
  1. Les koden ovenfor. Kodelinje 2 skriver en verdi inn i feltet. Hva gjør kodelinje 3?
  2. Legg til funksjonen nederst i <script> i fartskontrollen, og en knapp med teksten Neste bil som kaller den. Trykk mange ganger. Får du alle fire svarene fra 11.3?
  3. Hvorfor må vi gange med 71, og ikke med 70, for å få tall fra 50 til 120?

Math.floor runder alltid ned, også 9.99 blir 9. Math.ceil runder alltid opp, også 9.01 blir 10. Math.round runder av slik du har lært i matematikken.

  1. Skriv av tabellen nedenfor, og fyll den ut.
Tall Math.floor Math.ceil Math.round
2.83 2 3 3
7.01
9.5
4

Fartskontrollen skal telle hvor mange biler som er sjekket.

  1. Lag variabelen let antall = 0; under fartsgrense, og et avsnitt med id="txtAntall". Legg til kodelinjene antall++; og en kodelinje som viser «Kontrollerte biler: 4» i funksjonen sjekk. Hvorfor må let antall = 0; stå utenfor funksjonen?

Math.floor(Math.random() * N) + 1 gir et tilfeldig heltall fra 1 til N. En terning er Math.floor(Math.random() * 6) + 1.

Oppsummering

I dette kapitlet har du laget programmer som velger hva de skal gjøre. Du har brukt logiske uttrykk, if, else if og else, sammenlignet tekst og tall, satt sammen vilkår med && og ||, og laget tilfeldige tall.

Valg

fartskontrollen.html
<label for="inpFart">Fart:</label>
<input type="number" id="inpFart" value="95">
<button onclick="sjekk()">Sjekk</button>
<p id="txtSvar"></p>

<script>
  const fartsgrense = 80;

  function sjekk() {
    let fart = Number(inpFart.value);
    let over = fart - fartsgrense;

    if (fart <= fartsgrense) {
      txtSvar.textContent = "Farten er grei.";
    } else if (over <= 10) {
      txtSvar.textContent = `For fort! ${over} km/t over.`;
    } else {
      txtSvar.textContent = `Altfor fort! ${over} km/t over.`;
    }
  }
</script>
Nettleser

Merk deg følgende:

  • Et logisk uttrykk er alltid true eller false.
  • JavaScript tester vilkårene ovenfra og ned, og kjører bare blokka til det første som er true.
  • = gir en verdi. === sammenligner verdi og type.
  • Det brukeren skriver i et tekstfelt, er en streng. Bruk Number.

Logiske uttrykk

Kode Betyr
a === b, a !== b er lik, er ikke lik
a > b, a < b større enn, mindre enn
a >= b, a <= b større enn eller lik, mindre enn eller lik
a && b både a og b er true
a || b minst én av a og b er true
!a a er false
inpFart.value === "" feltet er tomt

Tilfeldige tall

Kode Gir
Math.random() et tilfeldig tall fra og med 0 til 1
Math.floor(Math.random() * 6) + 1 et tilfeldig heltall fra 1 til 6
Math.floor(9.99) 9
Math.ceil(9.01) 10

Oppgaver

Oppgave 11.1

oppg1-rett-feil.html
<input type="number" id="inpAlder">
<button onclick="sjekk()">Sjekk</button>
<p id="txtSvar"></p>

<script>
  function sjekk() {
    let alder = Number(inpAlder.value);
    if alder >= 18 {
      txtSvar.textContent = "Du er myndig.";
    } elseif (alder = 17) {
      txtSvar.textContent = "Bare ett år igjen!";
    } else {
      txtSvar.textContent = "Du er ikke myndig.";
    }
  }
</script>

Koden ovenfor har tre feil. Skriv av koden i filen oppg1-rett-feil.html, og rett feilene.

Oppgave 11.2

  • } else {
  • txtSvar.textContent = "Velkommen inn!";
  • if (inpPassord.value === "kanelsnurr") {
  • }
  • txtSvar.textContent = "Feil passord.";

Lag filen oppg2-passord.html med et tekstfelt med id="inpPassord", en knapp og et avsnitt. Sett sammen kodelinjene inne i en funksjon som sjekker passordet.

Oppgave 11.3

alder er 15 og hoyde er 160. Gjett om hvert av uttrykkene nedenfor er true eller false. Sjekk svarene dine i sant-eller-usant.html.

sant-eller-usant.html
alder > 12 && hoyde > 170
alder > 12 || hoyde > 170
!(alder > 12)
alder >= 15 && alder < 18
alder < 12 || alder > 65

Oppgave 11.4

Lag filen oppg4-billettluka.html, der brukeren skriver inn alderen sin og får vite hva billetten koster.

Alder Pris
under 12 år 80 kr
12–17 år 120 kr
18–66 år 180 kr
67 år og over 110 kr

Lag en testtabell, og test særlig alderne 11, 12, 17, 18, 66 og 67.

Oppgave 11.5

Lag filen oppg5-terning.html med en knapp som kaster en terning og viser hva den ble. Får du en sekser, skal det også stå «Sekser!».

B-oppgaver

Oppgave 11.6

Lag filen oppg6-fornoyelsespark.html med to felt for alder og høyde, og én knapp for hver av tre attraksjoner med ulike krav. Karusellen krever minst 12 år eller over 140 cm, berg-og-dal-banen krever både minst 12 år og over 140 cm, og radiobilene krever minst 8 år. Når brukeren ikke får kjøre, skal programmet si hvilket krav som mangler.

Oppgave 11.7

Lag spillet Gjett tallet i filen oppg7-gjett-tallet.html. Programmet trekker et tilfeldig tall fra 1 til 100 når siden lastes inn. Brukeren gjetter, og programmet svarer «For høyt», «For lavt» eller «Riktig!». Vis hvor mange forsøk brukeren har brukt.

Oppgave 11.8

Lag en quiz med tre spørsmål i filen oppg8-quiz.html. Hvert spørsmål har et tekstfelt og en knapp. Programmet skal si om svaret er riktig, og telle poeng. Hva skjer hvis brukeren skriver svaret med stor forbokstav? Undersøk toLowerCase.

Oppgave 11.9

Et år er et skuddår hvis det kan deles på 4, unntatt hvis det kan deles på 100. Men år som kan deles på 400, er likevel skuddår. Lag filen oppg9-skuddar.html, som sjekker om et år er et skuddår. Bruk %, && og || i ett vilkår, og test med 2024, 2026, 1900 og 2000.