Utdrag och kontrollstrukturer. Del 4 av JavaScript-kursen från nybörjare till avancerad på 10 blogginlägg

Detta är del 4 av JavaScript bloggserien som tar dig från nybörjare till avancerad. I slutet av denna serie kommer du att känna till alla grunder du behöver för att börja koda i JavaScript. Utan vidare ado, låt oss börja med den fjärde handledningen.

Snippets och kontrollstrukturer – innehållsförteckning:

1. Uppgradera vår kodningsinställning till snippets
2. Kontrollstrukturer

I detta blogginlägg kommer vi att fortsätta där vi slutade i det tredje blogginlägget. Vid detta stadium bör du ha din Google Chrome-webbläsare öppen och mer specifikt ha din JavaScript-konsol öppen. Om du av någon anledning stängde dem, skulle det vara en bra tid att öppna dem igen.

Om du är på en Mac är kortkommandot för att öppna konsolen att trycka på “Option + Command + J”, efter att du har öppnat Chrome. Om du använder en Windows-enhet kan du använda kortkommandot “Control + Shift + J” för att öppna JavaScript-konsolen, när du har öppnat Chrome. Eller så kan du också gå till menyn högst upp och gå till Visa -> Utvecklare -> JavaScript-konsol.

Uppgradera vår kodningsinställning till snippets

Fram till denna punkt i kursen kunde vi ha skrivit allt rad för rad och kört det rad för rad. Det skulle inte vara det mest bekväma sättet att köra saker på, men det skulle fungera ändå. Från och med denna handledning kommer vi att skriva kod som tar flera rader kod för att skapa en komplett uppsättning instruktioner. För att uppnå detta kommer vi att använda något som kallas “snippets” i Google Chrome. Utan vidare ado, låt oss uppgradera vår inställning från JavaScript-konsolen till Chrome-snippets.

För närvarande bör du ha din konsol öppen, och om du följde de tidigare handledningarna bör du ha en skärm som ser ut så här:

När du tittar på denna skärm, eller din skärm för den delen, bör du se: Element, Konsol, Källor, Nätverk, Prestanda, Minne, Applikation och så vidare skrivna bredvid varandra i den övre baren av det mörka området. Om du ser dem i ljusare färger är det helt okej också. Det betyder att du använder ljusläge, vilket kan vara standardläget för dagtid. Skärmen som jag visar använder för närvarande färgschemat för mörkt läge i Chrome-konsolinställningarna. Om du ser Element, Konsol, Källor, Nätverk och så vidare visas, i vilket färgschema som helst, är du redo att gå.

Om du tittar närmare på den övre baren av konsolen kan du se att texten “Konsol” ser något annorlunda ut i färg. Gå vidare och klicka på “Källor” precis bredvid den.

När du klickar på källor bör du titta på en skärm som på något sätt ser ut så här.

En skillnad du kanske förväntar dig är att du förmodligen inte kommer att se filen “notes.js”, eftersom jag har skapat den tidigare. Förutom det bör det se ganska likadant ut som detta. För att skapa en ny fil klicka på “+ Ny snippet”. När du klickar på den kommer den att skapa en ny JavaScript-fil för dig och du kan namnge den som du vill. I denna handledning kommer vi att namnge den “index.js” eftersom det är en vanlig praxis att namnge den första eller primära filen som “index.js”.

Om du vill följa denna handledning ord för ord, efter att ha klickat på “+ Ny Snippet”, kan du ange namnet “index.js” och trycka på enter-tangenten på ditt tangentbord. Nu kan vi klicka inuti den öppnade filen på det stora området som öppnades, för att börja koda JavaScript.

Låt oss börja med något som vi redan vet fungerar. Och det är:

alert("Hej, världen!");

Du kan antingen skriva ut det själv för extra övning eller kopiera och klistra in koddelen i filen vi skapade. Jag rekommenderar starkt att du skriver ut det själv eftersom detta är hur du lär dig det i många fall. När du skriver det, om du trycker på enter-tangenten, kommer du att se att koden inte körs. Istället kommer din markör bara att gå till nästa rad, precis som med vilket annat textredigeringsområde som helst. Det finns två huvudsakliga sätt vi kan köra vår kod. Det första är att klicka på play-knappen som ligger i det nedre högra hörnet.

Om du klickar på den play-knappen bör den köra vår kod och visa oss resultaten.

När du klickar på “OK”, låt oss också köra vår kod med det andra huvudsakliga sättet. Det andra huvudsakliga sättet att köra din kod, eller köra din snippet är att använda kortkommandot. Som vi kan se visar det redan kortkommandot när vi klickar på körknappen. Det kortkommandot är “Command + Enter”. För att göra det kan vi trycka på Command-tangenten och sedan trycka på Enter-tangenten. Att göra det kommer också att köra vår kod och ge oss samma resultat som att klicka på play-knappen.

Och med det, nu vet du de två sätten att köra vår JavaScript-kod i Chrome-snippets.

Om du vill skapa nya filer för att kanske ta anteckningar om JavaScript, eller för att öva lite JavaScript-kod, kan du alltid skapa nya filer genom att klicka på “+ Ny snippet” och namnge dina filer som du vill. Nu när vi har vår nya kodningsinställning redo, låt oss se mer JavaScript.

Kontrollstrukturer

När vi skriver kod måste vi ta hänsyn till många scenarier och åtgärder som användaren kan vidta. Denna förberedelse för olika scenarier kan komma från olika källor, såsom enheten vår kod körs på, skärmstorlek som ska visas, olika typer av webbläsare som användaren kan ha och så vidare. Men hur säkerställer vi att vi kan vara förberedda för olika scenarier? Om du skriver olika koder en efter en, skulle det ge mening för användaren att köra dem alla? För att svara på allt detta och mer kommer vi att använda kontrollstrukturer.

Kontrollstrukturer gör att vi kan styra körningen av koden, så att vår kod kan anpassa sig till olika villkor. Det finns flera vanliga element som används för kontrollstrukturer. I denna handledning kommer vi att börja med den enklaste och gå därifrån. Den första vi kommer att se använder If, else, else if-satser för att styra körningen av koden.

If, else och else if

Detta är den enklaste kontrollstrukturen att börja med. Vad den gör är att den tillåter oss att köra en viss kod om ett visst villkor är sant, och köra en annan kod om ett annat villkor är sant. Låt oss se det med ett exempel. Låt oss anta att, om det regnar ute, kommer jag att ta med mig mitt paraply. Annars kommer jag inte att ta med mig ett paraply. Vi kan översätta den exakta logiken och resonemanget till kod som följer:

(Innan vi skriver denna kod kommer vi att kommentera koden från den tidigare koden vi har i filen genom att placera två snedstreck framför den, så att den inte körs, men du fortfarande har en kopia av den. Efter att ha lagt till snedstrecken bör det se ut så här:)

// alert("Hej, världen!");
let rainy = true;
if (rainy){
   alert("Ta med ett paraply");
} else {
   alert("Inga behov av ett paraply");
}

Att köra denna kod skulle ge oss följande utdata:

// alert("Hej, världen!");
let rainy = false;
if (rainy){
   alert("Ta med ett paraply");
} else {
   alert("Inga behov av ett paraply");
}

Medan körning av denna version av koden som säger att det inte regnar, skulle ge följande utdata:

När du skriver ut koden för att göra ändringar i kodfilen, om du tittar närmare på filnamnet, kommer du att se att det kommer att ha en asterisk före filnamnet. Detta betyder att kodfilen vi skriver inte är helt sparad. Detta kanske inte gör stor skillnad om du skriver bara ett par rader kod som du alltid kan skriva, men oftare än inte vill du spara din kod, så att du kan återanvända eller granska den senare. Vi kan spara denna kodfil på samma sätt som vi sparar andra filer, så det skulle vara “Command + S” på Mac och “Control + S” på Windows.

I vårt fall, eftersom vi kör vår kod direkt efter att ha skrivit den, sparade den automatiskt vår fil när vi körde koden. Så om du ska skriva lite kod och lämna den i flera timmar, är det en bra idé att spara din kod då och då för att se till att du inte förlorar något betydande framsteg.

Det är bra att vi kan få vår kod att anpassa sig till ett binärt tillstånd med hjälp av en If- och en else-sats, men vad händer om vi har flera saker att ta hänsyn till, vilket troligtvis kommer att vara fallet i verkliga livet. Till exempel, vad händer om det är kallt och du behöver ta med en hoodie när det är kallt. Ett sätt vi skulle kunna göra det på skulle vara en “else if”-sats och vi kan göra det på följande sätt:

// alert("Hej, världen!");
let rainy = false;
let cold = true;
if (rainy){
   alert("Ta med ett paraply");
} else if (cold) {
    alert("Ta med en hoodie, inte ett paraply");
} else {
   alert("Inga behov av ett paraply");
}

Utdata av denna kod skulle se ut så här:

Så om ett visst villkor är sant, kommer den första koden som finns mellan parenteserna att köras. I vårt fall, eftersom det första villkoret kontrollerar regn, kommer vi att varna användaren att de bör ta med ett paraply. Om det villkoret är falskt, vilket betyder att det inte regnar, kommer vi att fortsätta kontrollera andra villkor genom att använda en “else if”-sats. En sak som är betydligt annorlunda från “else if”-satsen är att vi kan kontrollera så många villkor vi vill med else if-satser.

Det viktiga att komma ihåg här är att din kod kommer att kontrolleras från topp till botten, för korrekthet eller sanning. Det betyder att med den aktuella koden, om vädret är både regnigt och kallt, kommer det inte att känna igen det kalla vädret, eftersom den första satsen är korrekt. Vi kan också verifiera detta genom att ändra koden för att ha både regniga och kalla förhållanden.

// alert("Hej, världen!");
let rainy = true;
let cold = true;
if (rainy){
   alert("Ta med ett paraply");
} else if (cold) {
    alert("Ta med en hoodie, inte ett paraply");
} else {
   alert("Inga behov av ett paraply");
}

Nu kanske du undrar, hur kan jag lösa detta? Vilket är viktigare, att vädret är kallt eller att det regnar? Bör du välja ett villkor och offra det andra villkoret? Måste du ens göra ett sådant val? Tja, inte riktigt. Detta är ett mycket vanligt problem och det har en mycket vanlig och relativt enkel lösning. Vi kan använda ett “och”-uttryck för att täcka flera scenarier. För att berätta för JavaScript att vi vill använda ett “och” för att koppla vår programmeringslogik, kommer vi att använda två av denna symbol: “&”. Och eftersom vår kod kontrolleras från topp till botten, kommer vi att använda det mest omfattande alternativet till den första if-satsen. Den uppdaterade koden ser då ut så här.

// alert("Hej, världen!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Bär en hoodie och ta med ett paraply.")
} else if (rainy){
   alert("Ta med ett paraply");
} else if (cold) {
    alert("Ta med en hoodie, inte ett paraply");
} else {
   alert("Inga behov av ett paraply");
}

Att köra denna kod skulle ge dig en varning som ser ut så här:

Mycket bättre. Nu kan vi kombinera flera olika scenarier, inklusive olika kombinationer av dessa scenarier. Men vad händer om vi vill överväga ett scenario som inte är kallt men regnigt. Och anta att vi vill berätta för användaren att inte ta med en hoodie specifikt, och att bara ta med ett paraply. För att göra just det kan vi använda den logiska “inte”, vi kan använda den i vår kod med utropstecknet före det villkor vi vill specificera. Låt oss lägga till det villkoret i vår kod så att den blir mer komplett.

// alert("Hej, världen!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Bär en hoodie och ta med ett paraply.")
} else if (rainy && !cold){
   alert("Ta med ett paraply, men inte en hoodie.");
} else if (rainy){
   alert("Ta med ett paraply");
} else if (cold) {
    alert("Ta med en hoodie, inte ett paraply");
} else {
   alert("Inga behov av ett paraply");
}

När vi lägger till ett nytt villkor till en if-else-träd, så länge det är det mer omfattande villkoret kan vi placera det någonstans högst upp. På så sätt har vi mycket mindre chans för fel jämfört med motsatt tillvägagångssätt. En bieffekt av att injicera ny kod i befintlig kod är att en del av koden kan bli överflödig eller kanske inte fungerar på det mest effektiva sättet. Vi kommer inte att fokusera mycket på effektivitet, men för nu kan vi se att vi täcker både kalla och icke-kalla förhållanden för regnigt väder, så vi kan valfritt ta bort det villkor som bara kontrollerar “regnigt” tillstånd. Att göra dessa kodjusteringar kallas också “Kodrefaktorisering”, i refaktoriseringen är syftet att göra koden gradvis mer ren och effektiv.

// alert("Hej, världen!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Bär en hoodie och ta med ett paraply.")
} else if (rainy && !cold){
   alert("Ta med ett paraply, men inte en hoodie.");
} else if (cold) {
    alert("Ta med en hoodie, inte ett paraply");
} else {
   alert("Inga behov av ett paraply");
}

När vi vill kontrollera om något av villkoren är sant kan vi använda “eller”-operatorn, som är rörsymbolen som används två gånger på ditt tangentbord och ser ut så här “||”.

Låt oss se ett exempel på det med ett annat exempel. För att lägga till fler exempel till samma fil utan att störa de nya kommandona, kan vi kommentera ut den tidigare kod vi använde genom att svepa den tidigare koden inuti dessa symboler som vi har sett tidigare:

/* 
*/

Vilket är ett snedstreck och en asterisk och samma symboler i motsatt ordning för att stänga av den kommenterade delen. Låt oss svepa vår nuvarande kod inuti dessa symboler så att de inte stör den nya koden som kommer. Nu bör din kodfil se ut så här:

// alert("Hej, världen!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Bär en hoodie och ta med ett paraply.")
} else if (rainy && !cold){
   alert("Ta med ett paraply, men inte en hoodie.");
} else if (cold) {
    alert("Ta med en hoodie, inte ett paraply");
} else {
   alert("Inga behov av ett paraply");
}
*/

Från och med nu kommer vi att fokusera på de nya delar vi lägger till filen, så att vi kan fokusera på att lära oss en sak i taget. Du kan valfritt behålla den tidigare koden i kommenterat läge, flytta dem till en ny fil för dina referenser, eller om du inte vill se den längre, kan du ta bort den för en renare fil.

Låt oss fortsätta med vårt exempel till ett “eller”-fall. Tänk på ett scenario där du besöker ditt kylskåp för mat och dryck varje gång du känner dig hungrig eller törstig. Hur skulle koden fungera för det?

let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
    alert("Gå till kylskåpet och kolla vad du har där.");
}

Att köra denna kod, som du också förmodligen har gissat, skulle ge oss följande resultat:

Än så länge har de exempel vi använde kommit från nära verkliga livsscenarier, men mycket av tiden kommer du att hantera siffror i koden. Du har sett siffror tidigare i denna serie, men vi har inte pratat så mycket om jämförelsen eller de operationer vi kan göra med dem. Nu när vi har lärt oss om if-else-satser, låt oss se lite mer om siffror.

När vi hanterar if- och else if-satser kontrollerar vi sanningshalten i en sats. Men kan vi också göra en meningsfull if-sats om allt vi har är siffror? Till exempel, vad händer om jag vill få ett paraply om det finns mer än 50% chans för regn, kan vi uppnå det med kod? Ja, det kan vi, och så här skulle det gå.

let chanceOfRain = 70;
if (chanceOfRain >= 50) {
    alert("Ta med ett paraply.");
}

När vi hanterar siffror behöver vi ett sätt att konvertera det till någon form av sanning eller falskhet för att if-satsen ska fungera. Det finns flera sätt vi kan uppnå det beroende på vårt användningsfall.

Till exempel kan vi kontrollera om två siffror är exakt lika med varandra med tre lika tecken som detta:

let a = 10;
let b = 10;
if (a === b) {
    alert("De är samma.");
}

Detta skulle ge oss varningen som säger “De är samma.”.

Vi kan också kontrollera att de inte är lika med följande kod:

let a = 10;
let b = 5;
if (a !== b) {
    alert("De är inte samma sak!");
}

Att köra koden ovan kommer att ge oss varningen som säger “De är inte samma sak!”.

Vi kan också kontrollera specifikt vilken som är större, större eller lika med, mindre eller mindre än eller lika med. Du kan hitta en sammanfattning av tecknen för din bekvämlighet.

// === kontrollerar för likhet
// !== kontrollerar för olikhet
// > större än
// >= större än eller lika med
// < mindre än
// <= mindre än eller lika med

Låt oss också se några fler av dem för extra övning och kodexponering. Här är några exempel på koder som alla kommer att visa den varning de har inuti if-satserna:

Större än:

let a = 10;
let b = 5;
if (a > b) {
    alert("a är större än b");
}

Större än eller lika med:

let a = 10;
let b = 5;
if (a >= b) {
    alert("a är större än eller lika med b");
}

Ett annat exempel på större än eller lika med:

let a = 10;
let b = 10;
if (a >= b) {
    alert("a är större än eller lika med b");
}

Mindre än:

let a = 5;
let b = 10;
if (a < b) {
    alert("a är mindre än b");
}

Mindre än eller lika med:

let a = 5;
let b = 10;
if (a <= b) {
    alert("a är mindre än eller lika med b");
}

Ett annat exempel på mindre än eller lika med:

let a = 10;
let b = 10;
if (a <= b) {
    alert("a är mindre än eller lika med b");
}

Genom att använda en kombination av dessa jämförelse- eller likhetstecken kan vi skapa komplexa koder som kan anpassa sig till olika villkor.

Arbetsoperationer

När vi hanterar siffror är en annan sak vi vill utföra aritmetiska operationer. De flesta av de aritmetiska operationerna bör vara ganska bekanta, men det finns också programmeringsspecifika aritmetiska operatörer som kan vara mindre bekanta.

Här är en sammanfattning av de aritmetiska operationerna vi använder i JavaScript med deras betydelse för din bekvämlighet:

// * multiplikation
// / division
// + addition
// - subtraktion
// % modulo-operation, ger oss resten efter division
// ** exponentiering

De första fyra kommer att fungera som du förväntar dig:

let a = 12;
let b = 5;
let c = a * b;
// c kommer att vara 60
c = a / b;
// c kommer nu att vara 2.4
c = a + b;
// c kommer nu att vara 17
c = a - b;
// c kommer nu att vara 7

Modulo-operationen ger oss resten efter att ha delat det första numret med det andra numret. Om vi fortsätter med den tidigare a, b och c-koden:

c = a % b;
// c kommer nu att vara 2
c = 18 % 5;
// c kommer nu att ha värdet 3
// eftersom 18 delat med 5 ger oss resten 3

Exponentoperatören utför exponentiering i JavaScript. Den representeras med två asterisker och tar det första elementet till potensen av det andra elementet.

c = 2 ** 3;
// c kommer nu att ha värdet 8
// eftersom 2 * 2 * 2 är lika med 8

Detta var en relativt lång handledning, och du klarade det! Vi har uppgraderat vår kodningsinställning och lärt oss ganska mycket i denna handledning. I nästa handledning kommer vi att fortsätta med fler sätt att styra flödet av vår kod!