Del 4: Betingelser

Til nå har JavaScript-koden din kjørt linje for linje fra topp til bunn. Men hva om vi bare vil kjøre kode når en betingelse er sann (true)? Da bruker vi et veldig viktig konsept i programmering kalt betingelser (if-setninger).

Tenk på en if-setning som å si til datamaskinen:

"Hvis noe er sant - kjør denne kodeblokken"

For eksempel: Hvis alderen er over 18, skriv du er myndig.

let age = 18;

if (age >= 18) {
  console.log("Du er myndig.");
}

Denne sjekken - er alder større eller lik 18 - kalles en betingelse. Koden din gjør noe bare hvis betingelsen er true, altså ikke hvis betingelsen er false.

Sammenligningsoperatorer

I koden ovenfor bruker vi sammenligningsoperatoren >= for å sjekke om verdien til age er større eller lik 18. Dersom denne betingelsen er sann vil JavaScript gi true, og hvis usann gir JavaScript ut false.

De andre sammenligningsoperatorene er listet i tabellen her:

NavnEksempel på operasjonEksempel som gir true
Lik==3 == "3"
Strengt lik===5 === 5
Ikke lik!=3 != 4
Strengt ikke lik!==5 !== '5'
Større enn>10 > 5
Større enn eller lik>=8 >= 8
Mindre enn<2 < 5
Mindre enn eller lik<=6 <= 6

Med to likhetstegn == sammmenlignes verdiene med hverandre. Med tre likhetstegn === sammenlignes også datatypen til verdiene med hverandre.

Loading editor...

let age = 30
console.log(age == 30) //true
console.log(age === 30) //true
console.log(age == '30') //true Number mot String gir True
console.log(age === '30') //false Number mot String gir False
console.log(age == 50) //false
Grunnleggende if-setning

En if-setning sjekker om en betingelse er true. Hvis det stemmer, kjører koden som står inne i if-blokken - koden mellom klammeparantesene {...}.

Loading editor...

let age = 18;

if (age >= 18) {
  console.log("Du er myndig.");
}

I dette eksempelet sjekkes betingelsen age >= 18: Er alderen 18 eller mer? Siden alderen er 18 er betingelsen true og programmet skriver ut meldingen "Du er myndig."

Prøv selv: Endre variabelen age til et lavere tall - f.eks. 16. Hva skjer da? Blir meldingen skrevet ut?

If-else-setning

Det er vanlig å inkludere en else-blokk når man bruker if-setninger. Dersom betingelsen i if-setningen ikke er true, skal blokken i else-setningen kjøre. Hvis noe er sant – gjør dette, hvis ikke – gjør dette.

Loading editor...

let age = 16;
if (age >= 18) {
  console.log("Du er myndig.");
} else {
  console.log("Du er ikke myndig.");
}

Her spør vi: Er alderen 18 eller mer? Siden alderen er 16 er betingelsen false. Dermed kjører programmet else-setningen istedet.

Prøv selv: Endre verdien på age til et høyere tall. Hva skjer da?

If – else if – else

Noen ganger vil vi sjekke flere betingeler. Da kan vi bruke en kombinasjon av if, else if, og else. Du kan skrive så mange else if-setninger som du vil.

Koden nedenfor er laget for en nettbutikk som selger varer og avhengig av prisen på varen skal beregne hvor mye kunden skal betale i frakt.

let totalPris = 800;
let fraktKostnad;

if (totalPris <= 200) {
  fraktKostnad = 100
} else if (totalPris <= 1000 ) {
  fraktKostnad = 50
} else {
  fraktKostnad = 0
}

console.log(`Du må betale ${fraktKostnad} kr i frakt`)

Her sjekker vi flere ting. Først: Er totalprisen 200 eller mindre? Hvis true settes fraktKostnad = 100. Hvis false går vi til neste: Er totalprisen 1000 eller mindre? Hvis true settes fraktKostnad = 50. Hvis false får vi siste alternativ – altså else-blokken, og fraktKostnad = 0.

Koden stopper så fort én betingelse er true – da hopper den over resten.

Prøv selv: Endre på verdien til fraktKostnad. Hva skjer da?

Kombinere betingelser (logiske operatorer)

Noen ganger vil vi sjekke flere ting på en gang. Da kan vi kombinere betingelser med && (og), || (eller) og ! (NOT)

&& betyr at begge betingelsene må være true for at koden skal kjøre.

Loading editor...

let age = 20;
let hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Du kan gå inn på konserten.");
}

|| betyr at minst én av betingelsene må være true.

Loading editor...

let isWeekend = true;
let isHoliday = false;

if (isWeekend || isHoliday) {
  console.log("Du har fri!");
}

! betyr ikke — det snur en Boolean (true/false) til det motsatte

Loading editor...

const hasDoneHomework = false;

if (!hasDoneHomework) {
  console.log("Du må gjøre leksene dine!");
}

Her er hasDoneHomework false. Når vi bruker !hasDoneHomework får vi verdien true. Derfor kjører if-blokken og viser meldingen.

Flervalgsoppgaver – if og booleans

Her kommer noen spørsmål for å sjekke om du forstår hvordan if-setninger og booleans fungerer. Hva tror du skjer?

Oppgave 1: Hva skrives ut?
Hva vil denne koden skrive ut i konsollen?
let age = 15;
if (age >= 18) {
  console.log("Du er voksen!");
}
Oppgave 2: Hva er resultatet av denne betingelsen?
Hva blir resultatet av betingelsen (isWeekend || isHoliday) når
let isWeekend = false;
let isHoliday = true;
Oppgave 3: Hva er sant om && og ||?
Velg det alternativet som er riktig:
Oppgave 4: Hva skrives ut i konsollen her?
Velg det alternativet som er riktig:
let a = true;
let b = false;

if ( (a && !b) || b) {
        console.log("Ja!")
}
Programmeringsoppgaver – if-setninger og beslutninger

I noen av oppgavene nedenfor skal du bruke prompt(). Den viser en dialogboks der brukeren kan skrive inn tekst, og svaret lagres som en variabel.

Nedenfor er kode for å lagre brukerdata som variabel

let number = prompt("Skriv inn et tall: ")

Men pass på, prompt() gir en string! Så skal du skrive inn tall kan det være lurt å gjøre om variablens verdi til et tall

let number = Number(prompt("Skriv inn et tall: "))
Oppgave 1: Sjekk tall
Lag et program som sjekker om et tall er positivt, negativt eller null, og skriver ut riktig melding. Hvis tallet er over 100 skriv ut 'Det var et stort tall!'
Oppgave 2: Karaktersystem
Lag et program som sjekker hva en variabel poeng er mellom 0 og 100, og gir en karakter: 90+: A 80+: B 70+: C 60+: D Under 60: F
Oppgave 3: Stemmerett
Be brukeren skrive inn alderen sin med prompt(). Hvis alderen er 18 år eller eldre, skriv 'Du er kvalifisert til å stemme'. Ellers skriv 'Du er ikke kvalifisert til å stemme ennå'.
Oppgave 4: Enkel passordkontroll
Be brukeren skrive inn et passord med prompt(). Hvis passordet er 'passord123', skriv 'Tilgang innvilget'. Ellers skriv 'Tilgang nektet'.
Oppgave 5: Logg inn-system (avansert)
Lag et logg-inn-system med flere betingelser. Lag først variabler for brukernavn, passord og om brukeren er utestengt. Spør deretter brukeren om brukernavn og passord med prompt() eller ved å bruke <input> elementer (se seksjon om input på siden). Lag regler med if, else if, else og logiske operatorer: - Hvis brukeren er utestengt, skriv «Kontoen er sperret». - Hvis brukernavn og passord stemmer, skriv «Innlogging vellykket!». - Hvis brukernavn stemmer, men passordet er feil, skriv «Feil passord». - Hvis brukernavn ikke finnes, skriv «Ukjent bruker».
← Forrige del Neste del →