|
|
# JavaScript Grunnleggende: Ta Beslutninger
|
|
|
|
|
|
|
|
|
|
|
|
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title Din JavaScript Beslutningsreise
|
|
|
section Grunnlag
|
|
|
Boolean Values: 5: You
|
|
|
Comparison Operators: 4: You
|
|
|
Logical Thinking: 5: You
|
|
|
section Grunnleggende Beslutninger
|
|
|
If Statements: 4: You
|
|
|
If-Else Logic: 5: You
|
|
|
Switch Statements: 4: You
|
|
|
section Avansert Logikk
|
|
|
Logical Operators: 5: You
|
|
|
Complex Conditions: 4: You
|
|
|
Ternary Expressions: 5: You
|
|
|
```
|
|
|
Har du noen gang lurt på hvordan applikasjoner tar smarte beslutninger? Som hvordan et navigasjonssystem velger den raskeste ruten, eller hvordan en termostat bestemmer når den skal slå på varmen? Dette er det grunnleggende konseptet med beslutningstaking i programmering.
|
|
|
|
|
|
Akkurat som Charles Babbages Analytical Engine var designet for å følge forskjellige operasjonssekvenser basert på betingelser, trenger moderne JavaScript-programmer å ta valg basert på varierende omstendigheter. Denne evnen til å forgrene og ta beslutninger er det som forvandler statisk kode til responsive, intelligente applikasjoner.
|
|
|
|
|
|
I denne leksjonen vil du lære hvordan du implementerer betinget logikk i programmene dine. Vi skal utforske betingede utsagn, sammenligningsoperatorer og logiske uttrykk som lar koden din evaluere situasjoner og svare hensiktsmessig.
|
|
|
|
|
|
## Forhåndsforelesnings-quiz
|
|
|
|
|
|
[Forhåndsforelesnings-quiz](https://ff-quizzes.netlify.app/web/quiz/11)
|
|
|
|
|
|
Evnen til å ta beslutninger og kontrollere programflyt er et grunnleggende aspekt ved programmering. Denne delen dekker hvordan du styrer utførelsesbanen til JavaScript-programmene dine ved hjelp av boolske verdier og betinget logikk.
|
|
|
|
|
|
[](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
|
|
|
|
|
|
> 🎥 Klikk på bildet over for en video om å ta beslutninger.
|
|
|
|
|
|
> Du kan ta denne leksjonen på [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((Beslutningstaking))
|
|
|
Boolean Logikk
|
|
|
sann/usann
|
|
|
Sammenligningsresultater
|
|
|
Logiske uttrykk
|
|
|
Betingede Utsagn
|
|
|
hvis-setninger
|
|
|
Enkel betingelse
|
|
|
Kodeutførelse
|
|
|
hvis-ellers
|
|
|
To veier
|
|
|
Alternative handlinger
|
|
|
bytt
|
|
|
Flere valg
|
|
|
Ren struktur
|
|
|
Operatører
|
|
|
Sammenligning
|
|
|
=== !== < > <= >=
|
|
|
Verdi-relasjoner
|
|
|
Logisk
|
|
|
&& || !
|
|
|
Kombiner betingelser
|
|
|
Avanserte Mønstre
|
|
|
Ternær
|
|
|
? : syntaks
|
|
|
Inline beslutninger
|
|
|
Kompleks Logikk
|
|
|
Nestede betingelser
|
|
|
Flere kriterier
|
|
|
```
|
|
|
## En Kort Oppsummering av Boolske Verdier
|
|
|
|
|
|
Før vi utforsker beslutningstaking, la oss repetere boolske verdier fra vår forrige leksjon. Oppkalt etter matematikeren George Boole, representerer disse verdiene binære tilstander – enten `true` eller `false`. Det er ingen tvetydighet, ingen mellomting.
|
|
|
|
|
|
Disse binære verdiene danner grunnlaget for all beregningslogikk. Hver beslutning programmet ditt tar, reduseres til en boolsk evaluering.
|
|
|
|
|
|
Å lage boolske variabler er enkelt:
|
|
|
|
|
|
```javascript
|
|
|
let myTrueBool = true;
|
|
|
let myFalseBool = false;
|
|
|
```
|
|
|
|
|
|
Dette oppretter to variabler med eksplisitte boolske verdier.
|
|
|
|
|
|
✅ Boolske er oppkalt etter den engelske matematikeren, filosofen og logikeren George Boole (1815–1864).
|
|
|
|
|
|
## Sammenligningsoperatorer og Boolske
|
|
|
|
|
|
I praksis setter du sjelden boolske verdier manuelt. I stedet genererer du dem ved å evaluere betingelser: "Er dette tallet større enn det andre?" eller "Er disse verdiene like?"
|
|
|
|
|
|
Sammenligningsoperatorer muliggjør disse evalueringene. De sammenligner verdier og returnerer boolske resultater basert på forholdet mellom operandene.
|
|
|
|
|
|
| Symbol | Beskrivelse | Eksempel |
|
|
|
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
|
|
| `<` | **Mindre enn**: Sammenligner to verdier og returnerer den boolske typen `true` hvis verdien på venstre side er mindre enn på høyre side | `5 < 6 // true` |
|
|
|
| `<=` | **Mindre enn eller lik**: Sammenligner to verdier og returnerer den boolske typen `true` hvis verdien på venstre side er mindre enn eller lik høyre side | `5 <= 6 // true` |
|
|
|
| `>` | **Større enn**: Sammenligner to verdier og returnerer den boolske typen `true` hvis verdien på venstre side er større enn på høyre side | `5 > 6 // false` |
|
|
|
| `>=` | **Større enn eller lik**: Sammenligner to verdier og returnerer den boolske typen `true` hvis verdien på venstre side er større enn eller lik høyre side | `5 >= 6 // false` |
|
|
|
| `===` | **Streng likhet**: Sammenligner to verdier og returnerer den boolske typen `true` hvis verdiene på høyre og venstre side er like OG har samme datatype | `5 === 6 // false` |
|
|
|
| `!==` | **Ulikhet**: Sammenligner to verdier og returnerer det motsatte boolske resultatet av det en streng likhetsoperator ville returnert | `5 !== 6 // true` |
|
|
|
|
|
|
✅ Test kunnskapen din ved å skrive noen sammenligninger i nettleserens konsoll. Overrasker noen av de returnerte dataene deg?
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["🔢 Verdier"] --> B["⚖️ Sammenligning"]
|
|
|
B --> C["✅ Boolsk resultat"]
|
|
|
|
|
|
D["5"] --> E["< 6"]
|
|
|
E --> F["sant"]
|
|
|
|
|
|
G["10"] --> H["=== '10'"]
|
|
|
H --> I["usant"]
|
|
|
|
|
|
J["'hei'"] --> K["!== 'verden'"]
|
|
|
K --> L["sant"]
|
|
|
|
|
|
M["📋 Operator-typer"] --> M1["Likhet: === !=="]
|
|
|
M --> M2["Relasjon: < > <= >="]
|
|
|
M --> M3["Streng vs Løs"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style C fill:#e8f5e8
|
|
|
style M fill:#fff3e0
|
|
|
```
|
|
|
### 🧠 **Sammenligningskontroll: Forstå boolsk logikk**
|
|
|
|
|
|
**Test forståelsen av sammenligninger:**
|
|
|
- Hvorfor tror du `===` (streng likhet) generelt foretrekkes fremfor `==` (løs likhet)?
|
|
|
- Kan du forutsi hva `5 === '5'` returnerer? Hva med `5 == '5'`?
|
|
|
- Hva er forskjellen mellom `!==` og `!=`?
|
|
|
|
|
|
```mermaid
|
|
|
stateDiagram-v2
|
|
|
[*] --> Comparison: To verdier
|
|
|
Comparison --> StrictEqual: === eller !==
|
|
|
Comparison --> Relational: < > <= >=
|
|
|
|
|
|
StrictEqual --> TypeCheck: Sjekk type OG verdi
|
|
|
Relational --> NumberCompare: Konverter til tall
|
|
|
|
|
|
TypeCheck --> BooleanResult: true eller false
|
|
|
NumberCompare --> BooleanResult
|
|
|
|
|
|
note right of StrictEqual
|
|
|
Foretrukket tilnærming
|
|
|
Ingen typekonvertering
|
|
|
end note
|
|
|
|
|
|
note right of Relational
|
|
|
Nyttig for områder
|
|
|
Numeriske sammenligninger
|
|
|
end note
|
|
|
```
|
|
|
> **Proff-tips**: Bruk alltid `===` og `!==` for likhetssjekker med mindre du spesielt trenger typekonvertering. Dette hindrer uventet oppførsel!
|
|
|
|
|
|
## If-setning
|
|
|
|
|
|
`if`-setningen er som å stille et spørsmål i koden din. "Hvis denne betingelsen er sann, så gjør dette." Det er sannsynligvis det viktigste verktøyet du vil bruke for å ta beslutninger i JavaScript.
|
|
|
|
|
|
Slik fungerer det:
|
|
|
|
|
|
```javascript
|
|
|
if (condition) {
|
|
|
// Betingelsen er sann. Koden i denne blokken vil kjøre.
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Betingelsen går inni parentesene, og hvis den er `true`, kjører JavaScript koden inne i krøllparentesene. Hvis den er `false`, hopper JavaScript over hele blokken.
|
|
|
|
|
|
Du vil ofte bruke sammenligningsoperatorer for å lage disse betingelsene. La oss se et praktisk eksempel:
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney = 1000;
|
|
|
let laptopPrice = 800;
|
|
|
|
|
|
if (currentMoney >= laptopPrice) {
|
|
|
// Betingelsen er sann. Koden i denne blokken vil kjøre.
|
|
|
console.log("Getting a new laptop!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Siden `1000 >= 800` evalueres til `true`, kjører koden innenfor blokken og viser "Getting a new laptop!" i konsollen.
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["🚀 Programstart"] --> B{"💰 currentMoney >= laptopPrice?"}
|
|
|
B -->|true| C["🎉 'Får en ny laptop!'"]
|
|
|
B -->|false| D["⏭️ Hopp over kodeblokk"]
|
|
|
C --> E["📋 Fortsett programmet"]
|
|
|
D --> E
|
|
|
|
|
|
F["📊 Struktur for if-setning"] --> F1["if (betingelse) {"]
|
|
|
F1 --> F2[" // kode som kjøres hvis sant"]
|
|
|
F2 --> F3["}"]
|
|
|
|
|
|
style B fill:#fff3e0
|
|
|
style C fill:#e8f5e8
|
|
|
style D fill:#ffebee
|
|
|
style F fill:#e3f2fd
|
|
|
```
|
|
|
## If..Else Setning
|
|
|
|
|
|
Men hva om du vil at programmet ditt skal gjøre noe annet når betingelsen er falsk? Det er her `else` kommer inn – det er som å ha en backup-plan.
|
|
|
|
|
|
`else`-setningen gir deg en måte å si "hvis denne betingelsen ikke er sann, gjør dette i stedet."
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney = 500;
|
|
|
let laptopPrice = 800;
|
|
|
|
|
|
if (currentMoney >= laptopPrice) {
|
|
|
// Betingelsen er sann. Koden i denne blokken vil kjøre.
|
|
|
console.log("Getting a new laptop!");
|
|
|
} else {
|
|
|
// Betingelsen er usann. Koden i denne blokken vil kjøre.
|
|
|
console.log("Can't afford a new laptop, yet!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Nå, siden `500 >= 800` er `false`, hopper JavaScript over den første blokken og kjører `else`-blokken i stedet. Du vil se "Can't afford a new laptop, yet!" i konsollen.
|
|
|
|
|
|
✅ Test forståelsen av denne koden og den følgende ved å kjøre den i nettleserens konsoll. Endre verdiene til variablene currentMoney og laptopPrice for å endre det returnerte `console.log()`.
|
|
|
|
|
|
### 🎯 **If-Else Logikk Sjekk: Forgreningsvalg**
|
|
|
|
|
|
**Evaluer forståelsen av betinget logikk:**
|
|
|
- Hva skjer hvis `currentMoney` er nøyaktig lik `laptopPrice`?
|
|
|
- Kan du tenke på en virkelighetsnær situasjon hvor if-else logikk ville være nyttig?
|
|
|
- Hvordan kan du utvide dette for å håndtere flere prisklasser?
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["🔍 Evaluer Vilkår"] --> B{"Vilkår Sant?"}
|
|
|
B -->|Ja| C["📤 Utfør HVIS-blokk"]
|
|
|
B -->|Nei| D["📥 Utfør ELLERS-blokk"]
|
|
|
|
|
|
C --> E["✅ Én vei tatt"]
|
|
|
D --> E
|
|
|
|
|
|
F["🌐 Virkelige Eksempler"] --> F1["Bruker påloggingsstatus"]
|
|
|
F --> F2["Aldersbekreftelse"]
|
|
|
F --> F3["Skjemavalidering"]
|
|
|
F --> F4["Spilltilstandsendringer"]
|
|
|
|
|
|
style B fill:#fff3e0
|
|
|
style C fill:#e8f5e8
|
|
|
style D fill:#e3f2fd
|
|
|
style F fill:#f3e5f5
|
|
|
```
|
|
|
> **Viktig innsikt**: If-else sikrer at akkurat én sti tas. Dette garanterer at programmet ditt alltid har en respons på enhver betingelse!
|
|
|
|
|
|
## Switch-setning
|
|
|
|
|
|
Noen ganger trenger du å sammenligne én verdi mot flere alternativer. Selv om du kunne lenke flere `if..else`-setninger, blir denne tilnærmingen tungvint. `switch`-setningen gir en ryddigere struktur for å håndtere flere diskrete verdier.
|
|
|
|
|
|
Konseptet ligner på de mekaniske brytersystemene som ble brukt i tidlige telefonvekslinger – én input-verdi bestemmer hvilken spesifikk vei utførelsen følger.
|
|
|
|
|
|
```javascript
|
|
|
switch (expression) {
|
|
|
case x:
|
|
|
// kodeblokk
|
|
|
break;
|
|
|
case y:
|
|
|
// kodeblokk
|
|
|
break;
|
|
|
default:
|
|
|
// kodeblokk
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Slik er den strukturert:
|
|
|
- JavaScript evaluerer uttrykket én gang
|
|
|
- Det ser gjennom hver `case` for å finne et treff
|
|
|
- Når det finner et treff, kjører det den kodeblokken
|
|
|
- `break` sier til JavaScript å stoppe og gå ut av switchen
|
|
|
- Hvis ingen cases matcher, kjører den `default` blokken (hvis du har en)
|
|
|
|
|
|
```javascript
|
|
|
// Program som bruker switch-setning for ukedag
|
|
|
let dayNumber = 2;
|
|
|
let dayName;
|
|
|
|
|
|
switch (dayNumber) {
|
|
|
case 1:
|
|
|
dayName = "Monday";
|
|
|
break;
|
|
|
case 2:
|
|
|
dayName = "Tuesday";
|
|
|
break;
|
|
|
case 3:
|
|
|
dayName = "Wednesday";
|
|
|
break;
|
|
|
default:
|
|
|
dayName = "Unknown day";
|
|
|
break;
|
|
|
}
|
|
|
console.log(`Today is ${dayName}`);
|
|
|
```
|
|
|
|
|
|
I dette eksemplet ser JavaScript at `dayNumber` er `2`, finner den matchende `case 2`, setter `dayName` til "Tuesday", og bryter ut av switchen. Resultatet? "Today is Tuesday" logges i konsollen.
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["📥 switch(uttrykk)"] --> B["🔍 Evaluer én gang"]
|
|
|
B --> C{"Matcher sak 1?"}
|
|
|
C -->|Ja| D["📋 Utfør sak 1"]
|
|
|
C -->|Nei| E{"Matcher sak 2?"}
|
|
|
E -->|Ja| F["📋 Utfør sak 2"]
|
|
|
E -->|Nei| G{"Matcher sak 3?"}
|
|
|
G -->|Ja| H["📋 Utfør sak 3"]
|
|
|
G -->|Nei| I["📋 Utfør standard"]
|
|
|
|
|
|
D --> J["🛑 stopp"]
|
|
|
F --> K["🛑 stopp"]
|
|
|
H --> L["🛑 stopp"]
|
|
|
|
|
|
J --> M["✅ Gå ut av switch"]
|
|
|
K --> M
|
|
|
L --> M
|
|
|
I --> M
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style B fill:#fff3e0
|
|
|
style M fill:#e8f5e8
|
|
|
```
|
|
|
✅ Test forståelsen av denne koden og den følgende ved å kjøre den i nettleserens konsoll. Endre verdien til variabelen a for å endre det returnerte `console.log()`.
|
|
|
|
|
|
### 🔄 **Switch-setningens Mestring: Flere Alternativer**
|
|
|
|
|
|
**Test forståelsen av switch:**
|
|
|
- Hva skjer hvis du glemmer en `break`-setning?
|
|
|
- Når ville du brukt `switch` i stedet for flere `if-else`-setninger?
|
|
|
- Hvorfor er `default`-tilfellet nyttig selv om du tror du har dekket alle muligheter?
|
|
|
|
|
|
```mermaid
|
|
|
pie title "Når du skal bruke hver beslutningsstruktur"
|
|
|
"Enkel hvis-ellers" : 40
|
|
|
"Komplekse hvis-ellers-kjeder" : 25
|
|
|
"Switch-setninger" : 20
|
|
|
"Ternære operatorer" : 15
|
|
|
```
|
|
|
> **Beste praksis**: Bruk `switch` når du sammenligner én variabel mot flere spesifikke verdier. Bruk `if-else` for rekkeviddekontroller eller komplekse betingelser!
|
|
|
|
|
|
## Logiske Operatorer og Boolske
|
|
|
|
|
|
Komplekse beslutninger krever ofte evaluering av flere betingelser samtidig. Akkurat som boolsk algebra lar matematikere kombinere logiske uttrykk, tilbyr programmering logiske operatorer for å koble flere boolske betingelser.
|
|
|
|
|
|
Disse operatorene muliggjør sofistikert betinget logikk ved å kombinere enkle true/false-evalueringer.
|
|
|
|
|
|
| Symbol | Beskrivelse | Eksempel |
|
|
|
| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
|
|
| `&&` | **Logisk OG**: Sammenligner to boolske uttrykk. Returnerer `true` **kun** hvis begge sider er sanne | `(5 > 3) && (5 < 10) // Begge sider er sanne. Returnerer true` |
|
|
|
| `\|\|` | **Logisk ELLER**: Sammenligner to boolske uttrykk. Returnerer `true` hvis minst én side er sann | `(5 > 10) \|\| (5 < 10) // Én side er usann, den andre sann. Returnerer true` |
|
|
|
| `!` | **Logisk IKKE**: Returnerer motsatt verdi av et boolsk uttrykk | `!(5 > 10) // 5 er ikke større enn 10, så "!" gjør det sant` |
|
|
|
|
|
|
Disse operatorene lar deg kombinere betingelser på nyttige måter:
|
|
|
- OG (`&&`) betyr at begge betingelsene må være sanne
|
|
|
- ELLER (`||`) betyr at minst én betingelse må være sann
|
|
|
- IKKE (`!`) snur sann til usann (og omvendt)
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["🔗 Logiske operatorer"] --> B["&& OG"]
|
|
|
A --> C["|| ELLER"]
|
|
|
A --> D["! IKKE"]
|
|
|
|
|
|
B --> B1["Begge må være sanne"]
|
|
|
B --> B2["sann && sann = sann"]
|
|
|
B --> B3["sann && usann = usann"]
|
|
|
|
|
|
C --> C1["Minst én sann"]
|
|
|
C --> C2["sann || usann = sann"]
|
|
|
C --> C3["usann || usann = usann"]
|
|
|
|
|
|
D --> D1["Snur verdien"]
|
|
|
D --> D2["!sann = usann"]
|
|
|
D --> D3["!usann = sann"]
|
|
|
|
|
|
E["🌍 Virkelige eksempler"] --> E1["Alder >= 18 && harLisens"]
|
|
|
E --> E2["erHelg || erHelligdag"]
|
|
|
E --> E3["!erInnlogget"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style B fill:#e8f5e8
|
|
|
style C fill:#fff3e0
|
|
|
style D fill:#f3e5f5
|
|
|
style E fill:#e0f2f1
|
|
|
```
|
|
|
## Betingelser og Beslutninger med Logiske Operatorer
|
|
|
|
|
|
La oss se disse logiske operatorene i aksjon med et mer realistisk eksempel:
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney = 600;
|
|
|
let laptopPrice = 800;
|
|
|
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Bærbar pris med 20 prosent rabatt
|
|
|
|
|
|
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
|
|
|
// Tilstanden er sann. Koden i denne blokken vil kjøre.
|
|
|
console.log("Getting a new laptop!");
|
|
|
} else {
|
|
|
// Tilstanden er usann. Koden i denne blokken vil kjøre.
|
|
|
console.log("Can't afford a new laptop, yet!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
I dette eksemplet: Vi kalkulerer en 20% rabattpris (640), og evaluerer deretter om tilgjengelige midler dekker enten fullpris ELLER rabattert pris. Siden 600 møter rabattpriskravet på 640, evalueres betingelsen til sann.
|
|
|
|
|
|
### 🧮 **Logiske Operatorer Sjekk: Kombiner Betingelser**
|
|
|
|
|
|
**Test forståelsen av logiske operatorer:**
|
|
|
- I uttrykket `A && B`, hva skjer hvis A er usann? Blir B evaluert i det hele tatt?
|
|
|
- Kan du tenke deg en situasjon hvor du trenger alle tre operatorene (&&, ||, !) sammen?
|
|
|
- Hva er forskjellen mellom `!user.isActive` og `user.isActive !== true`?
|
|
|
|
|
|
```mermaid
|
|
|
stateDiagram-v2
|
|
|
[*] --> EvaluateA: A && B
|
|
|
EvaluateA --> CheckB: A er sann
|
|
|
EvaluateA --> ReturnFalse: A er usann
|
|
|
CheckB --> ReturnTrue: B er sann
|
|
|
CheckB --> ReturnFalse: B er usann
|
|
|
|
|
|
[*] --> EvaluateC: A || B
|
|
|
EvaluateC --> ReturnTrue: A er sann
|
|
|
EvaluateC --> CheckD: A er usann
|
|
|
CheckD --> ReturnTrue: B er sann
|
|
|
CheckD --> ReturnFalse: B er usann
|
|
|
|
|
|
note right of EvaluateA
|
|
|
Kortslutningsevaluering:
|
|
|
Hvis A er usann, blir ikke B sjekket
|
|
|
end note
|
|
|
```
|
|
|
> **Ytelsestips**: JavaScript bruker "short-circuit evaluation" - i `A && B`, hvis A er usann, evalueres ikke B. Bruk dette til din fordel!
|
|
|
|
|
|
### Negasjonsoperator
|
|
|
|
|
|
Noen ganger er det enklere å tenke på når noe IKKE er sant. Som i stedet for å spørre "Er brukeren logget inn?", vil du kanskje spørre "Er brukeren IKKE logget inn?" Utropstegnet (`!`) snur logikken for deg.
|
|
|
|
|
|
```javascript
|
|
|
if (!condition) {
|
|
|
// kjører hvis betingelsen er usann
|
|
|
} else {
|
|
|
// kjører hvis betingelsen er sann
|
|
|
}
|
|
|
```
|
|
|
|
|
|
`!` operatoren er som å si "det motsatte av..." – hvis noe er `true`, gjør `!` det til `false`, og omvendt.
|
|
|
|
|
|
### Ternære uttrykk
|
|
|
|
|
|
For enkle betingede tildelinger tilbyr JavaScript **ternær operator**. Denne konsise syntaksen lar deg skrive et betinget uttrykk på én linje, nyttig når du trenger å tildele én av to verdier basert på en betingelse.
|
|
|
|
|
|
```javascript
|
|
|
let variable = condition ? returnThisIfTrue : returnThisIfFalse;
|
|
|
```
|
|
|
|
|
|
Det leses som et spørsmål: "Er denne betingelsen sann? Hvis ja, bruk denne verdien. Hvis nei, bruk den verdien."
|
|
|
|
|
|
Nedenfor er et mer håndfast eksempel:
|
|
|
|
|
|
```javascript
|
|
|
let firstNumber = 20;
|
|
|
let secondNumber = 10;
|
|
|
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
|
|
|
```
|
|
|
|
|
|
✅ Ta et øyeblikk til å lese denne koden flere ganger. Forstår du hvordan disse operatorene fungerer?
|
|
|
|
|
|
Denne linjen sier: "Er `firstNumber` større enn `secondNumber`? Hvis ja, sett `firstNumber` i `biggestNumber`. Hvis nei, sett `secondNumber` i `biggestNumber`."
|
|
|
|
|
|
Den ternære operatoren er bare en kortere måte å skrive denne tradisjonelle `if..else`-setningen på:
|
|
|
|
|
|
```javascript
|
|
|
let biggestNumber;
|
|
|
if (firstNumber > secondNumber) {
|
|
|
biggestNumber = firstNumber;
|
|
|
} else {
|
|
|
biggestNumber = secondNumber;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Begge tilnærminger gir identiske resultater. Den ternære operatoren tilbyr korthet, mens den tradisjonelle if-else-strukturen kan være mer lesbar for komplekse betingelser.
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["🤔 Ternær operator"] --> B["betingelse ?"]
|
|
|
B --> C["verdiHvisSann :"]
|
|
|
C --> D["verdiHvisUsann"]
|
|
|
|
|
|
E["📝 Tradisjonell If-Else"] --> F["hvis (betingelse) {"]
|
|
|
F --> G[" returner verdiHvisSann"]
|
|
|
G --> H["} ellers {"]
|
|
|
H --> I[" returner verdiHvisUsann"]
|
|
|
I --> J["}"]
|
|
|
|
|
|
K["⚡ Når å bruke"] --> K1["Enkle tildelinger"]
|
|
|
K --> K2["Korte betingelser"]
|
|
|
K --> K3["Inline beslutninger"]
|
|
|
K --> K4["Returner setninger"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style E fill:#fff3e0
|
|
|
style K fill:#e8f5e8
|
|
|
```
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 Utfordring
|
|
|
|
|
|
Lag et program som først er skrevet med logiske operatorer, og deretter skriv det om ved å bruke et ternært uttrykk. Hva er din foretrukne syntaks?
|
|
|
|
|
|
---
|
|
|
|
|
|
## GitHub Copilot Agent Utfordring 🚀
|
|
|
|
|
|
Bruk Agent-modus for å løse følgende utfordring:
|
|
|
|
|
|
**Beskrivelse:** Lag en omfattende karakterskala som demonstrerer flere beslutningskonsepter fra denne leksjonen, inkludert if-else setninger, switch-setninger, logiske operatorer og ternære uttrykk.
|
|
|
|
|
|
**Prompt:** Skriv et JavaScript-program som tar en students numeriske poengsum (0-100) og bestemmer deres bokstavkarakter ved å bruke følgende kriterier:
|
|
|
- A: 90-100
|
|
|
- B: 80-89
|
|
|
- C: 70-79
|
|
|
- D: 60-69
|
|
|
- F: Under 60
|
|
|
|
|
|
Krav:
|
|
|
1. Bruk en if-else setning for å bestemme bokstavkarakteren
|
|
|
2. Bruk logiske operatorer for å sjekke om studenten består (karakter >= 60) OG har utmerkelser (karakter >= 90)
|
|
|
3. Bruk en switch-setning for å gi spesifikk tilbakemelding for hver bokstavkarakter
|
|
|
4. Bruk en ternær operator for å avgjøre om studenten er kvalifisert for neste kurs (karakter >= 70)
|
|
|
5. Inkluder input-validering for å sikre at poengsummen er mellom 0 og 100
|
|
|
|
|
|
Test programmet ditt med forskjellige poengsummer inkludert grenseverdier som 59, 60, 89, 90 og ugyldige input.
|
|
|
|
|
|
Lær mer om [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) her.
|
|
|
|
|
|
|
|
|
## Post-forelesningsquiz
|
|
|
|
|
|
[Post-forelesningsquiz](https://ff-quizzes.netlify.app/web/quiz/12)
|
|
|
|
|
|
## Gjennomgang & Selvstudium
|
|
|
|
|
|
Les mer om de mange operatorene som er tilgjengelige for brukeren [på MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
|
|
|
|
|
|
Gå gjennom Josh Comeaus flotte [operator lookup](https://joshwcomeau.com/operator-lookup/)!
|
|
|
|
|
|
## Oppgave
|
|
|
|
|
|
[Operatorer](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🧠 **Ditt beslutningsverktøy-sammendrag**
|
|
|
|
|
|
```mermaid
|
|
|
graph TD
|
|
|
A["🎯 JavaScript Beslutninger"] --> B["🔍 Boolsk Logikk"]
|
|
|
A --> C["📊 Betingede Utsagn"]
|
|
|
A --> D["🔗 Logiske Operatorer"]
|
|
|
A --> E["⚡ Avanserte Mønstre"]
|
|
|
|
|
|
B --> B1["sanne/usanne verdier"]
|
|
|
B --> B2["Sammenligningsoperatorer"]
|
|
|
B --> B3["Konsepter for sannhetsverdi"]
|
|
|
|
|
|
C --> C1["if-setninger"]
|
|
|
C --> C2["if-else kjeder"]
|
|
|
C --> C3["switch-setninger"]
|
|
|
|
|
|
D --> D1["&& (OG)"]
|
|
|
D --> D2["|| (ELLER)"]
|
|
|
D --> D3["! (IKKE)"]
|
|
|
|
|
|
E --> E1["Ternær operator"]
|
|
|
E --> E2["Kortslutningsvurdering"]
|
|
|
E --> E3["Komplekse betingelser"]
|
|
|
|
|
|
F["💡 Viktige Prinsipper"] --> F1["Klare lesbare betingelser"]
|
|
|
F --> F2["Konsistent sammenligningsstil"]
|
|
|
F --> F3["Riktig operatorrekkefølge"]
|
|
|
F --> F4["Effektiv vurderingsrekkefølge"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style B fill:#e8f5e8
|
|
|
style C fill:#fff3e0
|
|
|
style D fill:#f3e5f5
|
|
|
style E fill:#e0f2f1
|
|
|
style F fill:#fce4ec
|
|
|
```
|
|
|
---
|
|
|
|
|
|
## 🚀 Din tidslinje for JavaScript beslutningsmestring
|
|
|
|
|
|
### ⚡ **Hva du kan gjøre de neste 5 minuttene**
|
|
|
- [ ] Øv på sammenligningsoperatorer i nettleserkonsollen din
|
|
|
- [ ] Skriv en enkel if-else-setning som sjekker alderen din
|
|
|
- [ ] Prøv utfordringen: skriv om en if-else med en ternær operator
|
|
|
- [ ] Test hva som skjer med forskjellige "truthy" og "falsy" verdier
|
|
|
|
|
|
### 🎯 **Hva du kan oppnå denne timen**
|
|
|
- [ ] Fullfør post-leksjonsquizen og gjennomgå eventuelle forvirrende konsepter
|
|
|
- [ ] Bygg den omfattende karakterkalkulatoren fra GitHub Copilot-utfordringen
|
|
|
- [ ] Lag et enkelt beslutningstre for et virkelighetsnært scenario (som å velge hva du skal ha på deg)
|
|
|
- [ ] Øv på å kombinere flere betingelser med logiske operatorer
|
|
|
- [ ] Eksperimenter med switch-setninger for forskjellige brukstilfeller
|
|
|
|
|
|
### 📅 **Din ukelange logikkmestring**
|
|
|
- [ ] Fullfør oppgaven om operatorer med kreative eksempler
|
|
|
- [ ] Bygg en mini quiz-applikasjon ved bruk av ulike betingelsesstrukturer
|
|
|
- [ ] Lag en formvaliderer som sjekker flere inndataforhold
|
|
|
- [ ] Øv på Josh Comeaus [operator lookup](https://joshwcomeau.com/operator-lookup/) øvelser
|
|
|
- [ ] Refaktorer eksisterende kode for å bruke mer passende betingelsesstrukturer
|
|
|
- [ ] Studer short-circuit evaluering og ytelseskonsekvenser
|
|
|
|
|
|
### 🌟 **Din månedslange transformasjon**
|
|
|
- [ ] Mestre komplekse nestede betingelser og oppretthold lesbar kode
|
|
|
- [ ] Bygg en applikasjon med sofistikert beslutningslogikk
|
|
|
- [ ] Bidra til open source ved å forbedre betingelseslogikken i eksisterende prosjekter
|
|
|
- [ ] Lær bort til noen andre om ulike betingelsesstrukturer og når de skal brukes
|
|
|
- [ ] Utforsk funksjonelle programmeringstilnærminger til betingelseslogikk
|
|
|
- [ ] Lag en personlig referanseguide for beste praksis i betingelser
|
|
|
|
|
|
### 🏆 **Siste sjekk for beslutningsmesterskap**
|
|
|
|
|
|
**Feire din mestring av logisk tenkning:**
|
|
|
- Hva er den mest komplekse beslutningslogikken du har implementert med suksess?
|
|
|
- Hvilken betingelsesstruktur føles mest naturlig for deg og hvorfor?
|
|
|
- Hvordan har det å lære om logiske operatorer endret måten du løser problemer på?
|
|
|
- Hvilken virkelighetsapplikasjon kan ha nytte av sofistikert beslutningslogikk?
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title Din logiske tenkning utvikling
|
|
|
section I dag
|
|
|
Boolsk forvirring: 3: Du
|
|
|
Forståelse av Hvis-Ellers: 4: Du
|
|
|
Gjenkjenning av operatorer: 5: Du
|
|
|
section Denne uken
|
|
|
Komplekse betingelser: 4: Du
|
|
|
Mestring av Switch: 5: Du
|
|
|
Logiske kombinasjoner: 5: Du
|
|
|
section Neste måned
|
|
|
Avanserte mønstre: 5: Du
|
|
|
Ytelsesbevissthet: 5: Du
|
|
|
Lære andre: 5: Du
|
|
|
```
|
|
|
> 🧠 **Du har mestret kunsten å ta digitale beslutninger!** Hver interaktiv applikasjon er avhengig av betingelseslogikk for å reagere intelligent på brukerhandlinger og skiftende forhold. Du forstår nå hvordan du får programmene dine til å tenke, evaluere og velge passende svar. Dette logiske grunnlaget vil drive alle dynamiske applikasjoner du bygger! 🎉
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**Ansvarsfraskrivelse**:
|
|
|
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på originalspråket skal anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
