Villkorssatser: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
Ingen redigeringssammanfattning
Rad 5: Rad 5:
Den vanligaste villkorssatsen är <code>if</code>-satsen. Man har då en sektion med kod som enbart utförs då villkoret är sant, till exempel;
Den vanligaste villkorssatsen är <code>if</code>-satsen. Man har då en sektion med kod som enbart utförs då villkoret är sant, till exempel;
   
   
<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
if (villkor)  
if (villkor)  
Rad 13: Rad 12:
<Här fortsätter koden sen>
<Här fortsätter koden sen>
</syntaxhighlight>
</syntaxhighlight>
</div>


Eller för att skriva det på vanlig svenska; om <code>villkor</code> är sant gör det här…
Eller för att skriva det på vanlig svenska; om <code>villkor</code> är sant gör det här…
Rad 24: Rad 22:
Vad är det då som kan bli <code>true</code> eller <code>false</code>? Ett vanligt exempel på detta är jämförelse, t.ex. om vi vill kontrollera om en variabel innehåller ett visst värde.  Det kan se ut så här:
Vad är det då som kan bli <code>true</code> eller <code>false</code>? Ett vanligt exempel på detta är jämförelse, t.ex. om vi vill kontrollera om en variabel innehåller ett visst värde.  Det kan se ut så här:


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
   if( värde == 1)
   if( värde == 1)
Rad 32: Rad 29:
   // Här fortsätter koden
   // Här fortsätter koden
</syntaxhighlight>
</syntaxhighlight>
</div>


Här användes jämförelse-operatorn; <code>==</code> för att kontrollera om <code>värde</code> är satt till ett.  Lägg märke till att det är två "<code>=</code>"-tecken. För jämförelser använder vi <code>==</code> och för tilldelning använder vi <code>=</code>.  Det är ett rätt så vanliga fel att råka skriva enbart ett <code>=</code>, när vi egentligen ville ha två. Så var uppmärksam på det!
Här användes jämförelse-operatorn; <code>==</code> för att kontrollera om <code>värde</code> är satt till ett.  Lägg märke till att det är två "<code>=</code>"-tecken. För jämförelser använder vi <code>==</code> och för tilldelning använder vi <code>=</code>.  Det är ett rätt så vanliga fel att råka skriva enbart ett <code>=</code>, när vi egentligen ville ha två. Så var uppmärksam på det!
Rad 40: Rad 36:
Man kan även begära att något annat ska utföras i de fall som villkoret inte är sant. Då gör man så här;
Man kan även begära att något annat ska utföras i de fall som villkoret inte är sant. Då gör man så här;


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
if ( villkor)  
if ( villkor)  
Rad 50: Rad 45:
// Här fortsätter körningen
// Här fortsätter körningen
</syntaxhighlight>
</syntaxhighlight>
</div>


Med den programkoden säger man; om <code>villkor</code> är sant gör det som står i första blocket, i annat fall gör det som står i <code>else</code>-blocket.
Med den programkoden säger man; om <code>villkor</code> är sant gör det som står i första blocket, i annat fall gör det som står i <code>else</code>-blocket.
Rad 57: Rad 51:
Om man vill kan man lägga <code>if</code>-satser inuti andra <code>if</code>-satser. Det kallas nästlade eller inkapslade <code>if</code>:ar. Sådana kan man använda om man vill att programmet ska kolla om flera saker är sanna. Men som ni kommer att se i nästa sektion, går det ibland att lösa dylika situationer på ett mer effektivt sätt. Ett exempel på nästlade <code>if</code>-satser:
Om man vill kan man lägga <code>if</code>-satser inuti andra <code>if</code>-satser. Det kallas nästlade eller inkapslade <code>if</code>:ar. Sådana kan man använda om man vill att programmet ska kolla om flera saker är sanna. Men som ni kommer att se i nästa sektion, går det ibland att lösa dylika situationer på ett mer effektivt sätt. Ett exempel på nästlade <code>if</code>-satser:


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
if ( villkor1)  
if ( villkor1)  
Rad 67: Rad 60:
}
}
</syntaxhighlight>
</syntaxhighlight>
</div>


För att koden längst in ska utföras måste alltså såväl den första <code>if</code>:en och den andra ha <code>villkor</code> som är sanna. I princip kan man nästla hur många <code>if</code>:ar som helst. Men, som sagt, man kan lösa detta på ett effektivare sätt. För att kunna göra det behöver vi kunna jobba med sanningsvärden. Vilket vi återkommer till nästa aktivitet.
För att koden längst in ska utföras måste alltså såväl den första <code>if</code>:en och den andra ha <code>villkor</code> som är sanna. I princip kan man nästla hur många <code>if</code>:ar som helst. Men, som sagt, man kan lösa detta på ett effektivare sätt. För att kunna göra det behöver vi kunna jobba med sanningsvärden. Vilket vi återkommer till nästa aktivitet.
Rad 79: Rad 71:
När man vill testa något som kan ha många olika värden kan det lätt bli många <code>if</code>:ar.  För att lösa såna situation på ett snyggare sätt så kan man använda sig av <code>switch</code>.  
När man vill testa något som kan ha många olika värden kan det lätt bli många <code>if</code>:ar.  För att lösa såna situation på ett snyggare sätt så kan man använda sig av <code>switch</code>.  


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
switch( testuttryck )  
switch( testuttryck )  
Rad 93: Rad 84:
}
}
</syntaxhighlight>
</syntaxhighlight>
</div>


Med detta kommando kan man alltså testa ett och samma uttryck mot flera möjliga värden.
Med detta kommando kan man alltså testa ett och samma uttryck mot flera möjliga värden.
Rad 99: Rad 89:
Lägg märke till att varje <code>case</code> avslutas med en <code>break</code>. Detta görs för att koden inte ska fortsätta in i efterkommande <code>case</code>. När ett <code>case</code> blivit uppfyllt så kommer alla efterföljande <code>case</code> ochså att anses som uppfyllda.  Om vi inte satte en <code>break</code> skulle körningen alltså fortsätta in i alla efterföljande <code>case</code>. I vissa fall vill vi att det ska vara så.  Låt säga att något ska ske om ett värde är; <code>0</code>, <code>1</code> eller <code>2</code>. Då kanske vi skulle skriva så här:
Lägg märke till att varje <code>case</code> avslutas med en <code>break</code>. Detta görs för att koden inte ska fortsätta in i efterkommande <code>case</code>. När ett <code>case</code> blivit uppfyllt så kommer alla efterföljande <code>case</code> ochså att anses som uppfyllda.  Om vi inte satte en <code>break</code> skulle körningen alltså fortsätta in i alla efterföljande <code>case</code>. I vissa fall vill vi att det ska vara så.  Låt säga att något ska ske om ett värde är; <code>0</code>, <code>1</code> eller <code>2</code>. Då kanske vi skulle skriva så här:


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
switch( testuttryck )  
switch( testuttryck )  
Rad 116: Rad 105:
}
}
</syntaxhighlight>
</syntaxhighlight>
</div>


Så <code>switch</code> används oftast då man har många olika alternativ att välja mellan och det skulle ha blivit jobbigt/fult att köra massa <code>if</code>:ar på raken. Kanske man har en meny, där användaren kan välja mellan olika alternativ. Låt säga att alternativen anges med den siffra och det finns tre möjliga val. Då skulle vår <code>switch</code> kunna se ut så här:
Så <code>switch</code> används oftast då man har många olika alternativ att välja mellan och det skulle ha blivit jobbigt/fult att köra massa <code>if</code>:ar på raken. Kanske man har en meny, där användaren kan välja mellan olika alternativ. Låt säga att alternativen anges med den siffra och det finns tre möjliga val. Då skulle vår <code>switch</code> kunna se ut så här:


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
switch( alternativ )  
switch( alternativ )  
Rad 138: Rad 125:
}
}
</syntaxhighlight>
</syntaxhighlight>
</div>


==== <code>default</code> ====
==== <code>default</code> ====
Rad 146: Rad 132:
Ett kompakt sätt att göra en villkorlig tilldelning är att använda sig av trinary-operatorn. Den heter så på grund av att den består av tre delar.
Ett kompakt sätt att göra en villkorlig tilldelning är att använda sig av trinary-operatorn. Den heter så på grund av att den består av tre delar.


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
let a = testvillkor ? sant : falskt;
let a = testvillkor ? sant : falskt;
</syntaxhighlight>
</syntaxhighlight>
</div>


Vi tilldelar alltså ett värde till variabeln <code>a</code>. Vad som tilldelas beror på ett villkor. Detta villkor skrivs direkt efter "<code>=</code>"-tecknet, dvs <code>testvillkor</code> i detta fall. Därefter följer ett frågetecken, vilket är det som anger att vi vill köra en trinary-operation. Om villkoret var sant tilldelas det första värdet till variablen. Om villkoret var falskt så tilldelas det sista värdet. Det vill säga det värde som följer efter "<code>:</code>"-tecknet.
Vi tilldelar alltså ett värde till variabeln <code>a</code>. Vad som tilldelas beror på ett villkor. Detta villkor skrivs direkt efter "<code>=</code>"-tecknet, dvs <code>testvillkor</code> i detta fall. Därefter följer ett frågetecken, vilket är det som anger att vi vill köra en trinary-operation. Om villkoret var sant tilldelas det första värdet till variablen. Om villkoret var falskt så tilldelas det sista värdet. Det vill säga det värde som följer efter "<code>:</code>"-tecknet.

Versionen från 31 oktober 2020 kl. 12.36

När man programmerar använder man sig ofta av villkorssatser för att styra programflödet. Med hjälp av en villkorssats kan man styra hur programflödet ska uppföra sig då ett visst villkor är uppfyllt.

if-satser

Den vanligaste villkorssatsen är if-satsen. Man har då en sektion med kod som enbart utförs då villkoret är sant, till exempel;

if (villkor) 
{
  <kodblocket utförs endast om villkor är sant>
}
<Här fortsätter koden sen>

Eller för att skriva det på vanlig svenska; om villkor är sant gör det här…

Om villkor inte är sant, fortsätter programmet att köra koden som finns efter ”}”-tecknet.

Vad är villkor

villkor är någonting som i slutändan kommer att bli true eller false. Man brukar kalla denna typ av villkor för booleskt värde eller för sanningsvärde. Vilket är en typ av matematik som behandlar hanteringen av variabler som enbart kan vara sanna eller falska. Vi återkommer till detta.

Vad är det då som kan bli true eller false? Ett vanligt exempel på detta är jämförelse, t.ex. om vi vill kontrollera om en variabel innehåller ett visst värde. Det kan se ut så här:

  if( värde == 1)
  {
    // Utförs om värde är satt till 1, om inte så hoppas detta block över
  }
  // Här fortsätter koden

Här användes jämförelse-operatorn; == för att kontrollera om värde är satt till ett. Lägg märke till att det är två "="-tecken. För jämförelser använder vi == och för tilldelning använder vi =. Det är ett rätt så vanliga fel att råka skriva enbart ett =, när vi egentligen ville ha två. Så var uppmärksam på det!

Vi återkommer till villkort och sanningsvärden i nästa sektion.

else

Man kan även begära att något annat ska utföras i de fall som villkoret inte är sant. Då gör man så här;

if ( villkor) 
{
  // <utförs endast om villkor är sant>
} else {
  // <utförs endast om villkor är falskt>
}
// Här fortsätter körningen

Med den programkoden säger man; om villkor är sant gör det som står i första blocket, i annat fall gör det som står i else-blocket.

Nästlade if-satser

Om man vill kan man lägga if-satser inuti andra if-satser. Det kallas nästlade eller inkapslade if:ar. Sådana kan man använda om man vill att programmet ska kolla om flera saker är sanna. Men som ni kommer att se i nästa sektion, går det ibland att lösa dylika situationer på ett mer effektivt sätt. Ett exempel på nästlade if-satser:

if ( villkor1) 
{
  if ( villkor2) 
  {
    // <utförs endast om både villkor1 och villkor2 är sanna>
  }
}

För att koden längst in ska utföras måste alltså såväl den första if:en och den andra ha villkor som är sanna. I princip kan man nästla hur många if:ar som helst. Men, som sagt, man kan lösa detta på ett effektivare sätt. För att kunna göra det behöver vi kunna jobba med sanningsvärden. Vilket vi återkommer till nästa aktivitet.

Överkurs

Följande är lite överkurs, men det kan vara bra att känna till.

switch

När man vill testa något som kan ha många olika värden kan det lätt bli många if:ar. För att lösa såna situation på ett snyggare sätt så kan man använda sig av switch.

switch( testuttryck ) 
{
  case testvärde1:
    break;
  case testvärde2:
    break;
  case testvärde3:
    break;
 default:
   break; // Egentligen inte nödvändig, då switchen tar slut efter detta
}

Med detta kommando kan man alltså testa ett och samma uttryck mot flera möjliga värden.

Lägg märke till att varje case avslutas med en break. Detta görs för att koden inte ska fortsätta in i efterkommande case. När ett case blivit uppfyllt så kommer alla efterföljande case ochså att anses som uppfyllda. Om vi inte satte en break skulle körningen alltså fortsätta in i alla efterföljande case. I vissa fall vill vi att det ska vara så. Låt säga att något ska ske om ett värde är; 0, 1 eller 2. Då kanske vi skulle skriva så här:

switch( testuttryck ) 
{
  case 0:
  case 1:
  case 2:
    // Utförs om testuttryck är 0, 1 eller 2
    break;
   case 3:
     // Utförs enbart om uttryck är 3
     break;
 default:
     // Utförs bara om ingen av ovanstående körts
   break; // Egentligen inte nödvändig, då switchen tar slut efter detta
}

switch används oftast då man har många olika alternativ att välja mellan och det skulle ha blivit jobbigt/fult att köra massa if:ar på raken. Kanske man har en meny, där användaren kan välja mellan olika alternativ. Låt säga att alternativen anges med den siffra och det finns tre möjliga val. Då skulle vår switch kunna se ut så här:

switch( alternativ ) 
{
  case 1:
    // Användaren valde alternativ ett
    break;
  case 2:
    // Användaren valde alternativ två
    break;
  case 3:
    // Användaren valde alternativ tre
    break;
 default:
    // Användaren valde inget av ovanstående!
   break
}

default

Kommandot default används alltså för att ange vad som ska ske om inget av de övriga alternativen uppfylldes. Ofta kan detta vara en plats där man vill ange ett felmeddelande. Låt säga att användaren ska kunna ange en siffra mellan 1 och 3, då vill vi kanske skriva ut ett felmeddelande när något annat anges. Kanske ett felmeddelande som säger nåt i stil med; "Du får bara ange 1, 2 eller 3".

Trinary-operatorn

Ett kompakt sätt att göra en villkorlig tilldelning är att använda sig av trinary-operatorn. Den heter så på grund av att den består av tre delar.

let a = testvillkor ? sant : falskt;

Vi tilldelar alltså ett värde till variabeln a. Vad som tilldelas beror på ett villkor. Detta villkor skrivs direkt efter "="-tecknet, dvs testvillkor i detta fall. Därefter följer ett frågetecken, vilket är det som anger att vi vill köra en trinary-operation. Om villkoret var sant tilldelas det första värdet till variablen. Om villkoret var falskt så tilldelas det sista värdet. Det vill säga det värde som följer efter ":"-tecknet.

Det här är inte så jättevanligt att man använder sig av. Det är kompakt och kan vara en snygg lösning i vissa fall. Men det är även relativt svårläst och risken är att det blir svårt att förstå vad som sker.

Nästa aktivtet

Att jobba med sanningsvärden