1.7 Valgsetninger

EKSEMPEL

Funksjon med to parametere

Vi lager et program der en bruker kan angi radiusen og høyden til en sylinder. På skjermen vises volumet til sylinderen.

1 <script> 2 let radius = 0 3 let høyde = 0

4 5 const volumSylinder = (r, h) => { 6 return Math.PI*r*r*h

7 } 8 </script>

9 10 <label>Radius: <input type="number" bind:value={radius}> cm</label> 11 <label>Høyde: <input type="number" bind:value={høyde}> cm</label> 12 <p>Volumet til sylinderen er {volumSylinder(radius, høyde).toFixed(2)} cm³.</p>

Har du noen gang fått feilmeldinger når du har skrevet inn feil brukernavn eller passord? Eller løst digitale oppgaver som gir deg en tilbakemelding om du har svart riktig eller feil? For å få til slik funksjonalitet, må vi sammenligne data og skrive logiske tester, også kalt valgsetninger. Resultatet av en logisk test er enten verdien true eller false, sant eller usant. Disse verdiene kalles boolske verdier. Når vi lagrer en boolsk verdi i en variabel, for eksempel let sant = true, blir datatypen boolean.

Det er for eksempel sant at 5 er mindre enn 10, og det er usant at 7 er større enn 9. Vi kaller slike sammenlignende uttrykk for boolske uttrykk eller logiske tester.

Tabellen nedenfor gir en oversikt over operatorer vi kan bruke for å sammenligne to verdier.

Operator Forklaring

==

Lik verdi

Eksempel

2 == "2" gir true

Lik verdi og datatype 2 === "2" gir false Mindre enn

5 < 10 gir true

<=

Mindre enn eller lik 5 <= 10 gir true

Større enn

5 > 1 gir true

Større enn eller lik 5 >= 5 gir true

EKSEMPEL

True eller false?

Vi skriver inn noen boolske uttrykk med tall og strenger, og sjekker om vi får true eller false. Legg merke til at vi kan skrive regnestykker og bruke metoder på verdiene i slike sammenligninger. Datamaskinen finner da verdiene før den sammenligner dem.

1 <p> "Emma" == "emma" gir {"Emma" == "emma"}. </p> 2 <p> "Emma".toLowerCase() == "emma" gir {"Emma".toLowerCase() == "emma"}. </p> 3 <p> 10 === "10" gir {10 === "10"}. </p> 4 <p> 10 != "10" gir {10 != "10"}. </p> 5 <p> 8*5 &gt; 6*7 gir {10 < 3}. </p> 5 <p> 3/4 &lt;= 4/5 gir {3/4 <= 4/5} </p>

IF OG ELSE

Som du har sett, kan vi styre innholdet som vises på en nettside etter input fra en bruker. Boolske variabler og sammenligninger gir oss flere muligheter. Da kan vi vise forskjellig innhold avhengig av inputverdier fra brukeren. Til det bruker vi if-setninger. Hvis (if) en betingelse blir oppfylt, altså at en test gir true, kjøres en bestemt kode. Dersom betingelsen ikke oppfylles, kan vi legge til et else-ledd, slik at en annen kode kjøres dersom testen blir false. I script-elementet skriver vi en if-else-setning slik:

1 if (test) { 2 //Hvis testen gir true, kjør denne koden. 3 } else { 4 //Hvis testen gir false, kjør denne koden.

5 }

Vi kan legge til flere betingelser med else-if-ledd.

1 if (test) { 2 //Hvis testen gir true, kjør denne koden. 3 } else if (ny test){ 4 //Hvis den nye testen gir true, kjør denne koden. 5 } else { 6 //Hvis begge testene gir false, kjør denne koden.

7 }

I HTML-delen av koden skriver vi if-else-setninger slik:

1 {#if test } 2 <p> Innhold som vises dersom testen gir true. </p> 3 {:else} 4 <p> Innhold som vises dersom testen gir false. </p> 5 {/if}

EKSEMPEL

Myntkast

De to sidene av en mynt heter kron og mynt. I koden nedenfor etterligner vi et myntkast. Først trekker vi et tilfeldig tall med Math.random()-funksjonen. Deretter bruker vi en if-else setning til å avgjøre om vi fikk kron eller mynt. Hvis det tilfeldige tallet er mindre enn 0,5, blir det kron. Ellers blir det mynt.

1 <script> 2 let tilfeldigTall = Math.random() 3 let side = ""

4 5 if (tilfeldigTall < 0.5){ 6 side = "Kron" 7 } else { 8 side = "Mynt"

9 } 10 </script>

11 12 <p>Det tilfeldige tallet er: {tilfeldigTall.toFixed(2)} </p> 13 <p>Myntkastet gav: {side} </p>

EKSEMPEL

I programmet nedenfor kan en bruker angi alderen sin. Når brukeren klikker på OK-knappen, kjøres testene i funksjonen beskrivAlder. Funksjonen sjekker først om alderen er lavere enn 13. Hvis testen gir false, går den videre og sjekker om alderen er lavere enn 20. Hvis den andre testen gir false, sjekker funksjonen til slutt om alderen er lavere enn 80. I hvert av tilfellene lages en beskrivelse av alderen til personen.

<script> let alder let beskrivelse = ""

const beskrivAlder = () => { if (alder < 13) { beskrivelse = "Du er et barn." } else if (alder < 20) { beskrivelse = "Du er tenåring." } else if (alder < 80){ beskrivelse = "Du er voksen." } else { beskrivelse = "Wow, du har levd mange år!"

} </script>

<label>

Din alder: <input type="number" bind:value={alder}> <button on:click={beskrivAlder}> OK </button> </label> <p>{beskrivelse}</p>

AVKRYSSINGSBOKSER

Vi kan lage avkryssingsbokser ved å velge typen checkbox i et input-element. En avkryssingsboks kan kobles til en boolsk variabel med attributtet bind:checked. Når boksen er krysset av, får variabelen verdien true, og når boksen ikke er krysset av, får variabelen verdien false.

1 <script> 2 let kryssetAv = false 3 </script>

4

5 <label> 6 <input type="checkbox" bind:checked={kryssetAv}> 6 Verdi: {kryssetAv} 7 </label>

EKSEMPEL

LOGISKE OPERATORER

Av og til ønsker vi å utføre to eller flere tester samtidig. For eksempel må vi ha både en gyldig billett og et gyldig passord når vi går om bord på et langdistansefly. Vi har to logiske operatorer: && kalles og (and på engelsk), og || kalles eller (or på engelsk). Vi skriver én test på hver side av operatorene, for eksempel slik: test1 && test2. Med og-operatoren får vi true bare hvis begge testene gir true. Med eller-operatoren får vi true hvis minst én av testene gir true.

Inn- og utlogging

I koden nedenfor har vi laget et enkelt inn- og utloggingssystem. For å logge seg inn, må brukeren taste inn riktig brukernavn og pinkode og klikke på en innloggingsknapp. I HTML-delen styres hvilket innhold som skal vises, basert på verdien til variabelen innlogget. Denne variabelen har i utgangspunktet verdien false. Da vises en enkel innloggingsside med inputfelter for brukernavnet og pinkoden og en innloggingsknapp. I script-elementet har vi definert funksjonen loggInn som sjekker om de inntastede verdiene for brukernavn og pinkode er riktige, ved hjelp av en if-else setning. Hvis inntastet brukernavn og pinkode er riktig, settes innlogget til true. Da vises innholdet som står mellom {#if innhold} og {:else}. Hvis brukernavnet eller pinkoden er feil, vises en feilmelding. Når brukeren er innlogget, vises blant annet en utloggingsknapp. Når brukeren klikker på denne, kjøres funksjonen loggUt som setter innlogget til å være false. Da vil innloggingssiden vises igjen.

1 <script> 2 let brukernavn = "mjau" 3 let pinkode = "1234" 4 let inntastetNavn = "" 5 let inntastetPin = "" 6 let innlogget = false 7 let tilbakemelding = ""

8 9 const sjekkPin = () => { 10 if (brukernavn == inntastetNavn && pinkode == inntastetPin){

11 innlogget = true

12 } else {

13 14 15 tilbakemelding = "Feil brukernavn eller pinkode. Prøv igjen!" inntastetNavn = "" //Nullstiller inntastet verdi. inntastetPin = "" //Nullstiller inntastet verdi.

16 } 17 } 18 const loggUt = () => { 19 innlogget = false 20 inntastetNavn = "" 21 inntastetPin = ""

22 } 23 </script>

24 25 {#if innlogget} 26 <h1>Velkommen!</h1> 27 <p>Du er innlogget.</p> 28 <button on:click={loggUt}>Logg ut </button> 29 {:else} 30 <label> 31 Brukernavn: <input bind:value={inntastetNavn}><br /> 32 Pinkode: <input bind:value={inntastetPin}> 33 </label> 34 <button on:click={loggInn}> Logg inn</button> 35 <p>{tilbakemelding}</p> 36 {/if}

EKSTRASTOFF

Heltallsdivisjon og modulo-operatoren

Et delestykke med to heltall kalles heltallsdivisjon. En heltallsdivisjon gir to heltall som svar: kvotient og rest. For eksempel gir 5/2 kvotienten 2 og 1 i rest.

Modulo er en operator som finner resten ved en heltallsdivisjon. Vi skriver modulooperatoren med prosenttegnet mellom to tall. Når vi skriver 10 % 2 (les: ti modulo 2), finner datamaskinen ut at delestykket 10/2 gir null i rest fordi 2 går opp i 10 et heltallig antall ganger. 9 % 2 gir resultatet 1. Det er fordi vi vet at 2·4 = 8, og da mangler vi én for å få 9. Modulo-operatoren kan for eksempel brukes i tester for å sjekke om et tall er et partall. Da skriver vi tall % 2 == 0. Testen gir true dersom verdien til tall er et partall.