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 brukeren er logget inn - skriv en velkomstmelding

if (isLoggedIn){
  console.log("Velkommen tilbake")
}

Denne sjekken - er brukeren logget inn - kalles en betingelse. Koden din gjør noe bare hvis betingelsen er true.

Sammenligningsoperatorer

JavaScript kan sammenligne to verdier og gi en Boolean som enten er true eller false.

Et eksempel på bruken av sammenligningsoperatorer er Facebook sin feature når en bruker har bursdag. Når du har bursdag så viser Facebook et bursdagsikon 🎂 og sender en notifikasjon til alle vennene dine.

For å sjekke om du har bursdag må Facebook sammenligne dagens dato med bursdagsdatoen din.

dagensDato === bursdagsDato eller dagensDato == bursdagsDato

Dersom du har bursdag returnerer denne testen ut booleanen true.

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

Tips: Bruk alltid === med mindre du helt bevisst vil tillate at tall og tekst blir sammenlignet som like.

Loading editor...

let age = 30
console.log(age == 30) //true
console.log(age === 30) //true
console.log(age == '30') //true
console.log(age === '30') //false
console.log(age == 50) //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
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')
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.

I koden ovenfor skriver vi resultat ut på to forskjellige måter. Den ene skiller mellom string og variabler med ,. Den andre bruker backticks ` til å lage en template string, hvor man kan referere til variabelen i stringen med $ og {variabelnavn}. Velg din favoritt!

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.

Loading editor...

let age = 20;
let hasTicket = true;

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

Her sjekker vi to ting: er personen over 18 og har billett? Hvis begge stemmer, slipper de inn.

|| 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!");
}

Her sjekker vi: er det helg eller ferie? Hvis minst én av dem stemmer, får vi fri!

Prøv selv: Endre verdiene i eksemplene over for å se hvordan && og || fungerer.

! flipper verdien til en boolean og kan være nyttig også. For eksempel

Loading editor...

const isRaining = false;

if (!isRaining){
  console.log("Du trenger ikke en paraply")
}

Siden isRaining = false, vil !isRaining bli true. Dermed er betingelsen true og if-blokken kjøres.

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: Sammenlign to tall
Be brukeren skrive inn to tall med prompt(). Sammenlign tallene og skriv ut en melding i konsollen som forteller hvilket tall som er størst – eller om de er like.
Oppgave 4: 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 5: Enkel passordkontroll
Be brukeren skrive inn et passord med prompt(). Hvis passordet er 'passord123', skriv 'Tilgang innvilget'. Ellers skriv 'Tilgang nektet'.
Oppgave 6: Er det fredag? (må researche Date-objektet)
Lag et program som sjekker om det er fredag, og om du kan gå hjem. Hvis det er fredag, skriv 'Det er fredag!'. Hvis det både er fredag og klokka er 15:30, skriv 'God helg – sees på mandag! Husk stolen på fredag da.' Tips: Sjekk ut Date()-objektet her: W3Schools Date objekt
Oppgave 7: Logg inn-system (avansert)
Lag et lite 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(). 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 →