Fragmenten en controle structuren. Deel 4 van de JavaScript-cursus van Beginner tot Gevorderd in 10 blogposts

Dit is deel 4 van de JavaScript blogpostserie die je van beginner naar gevorderde zal brengen. Aan het einde van deze serie weet je alle basisprincipes die je moet kennen om te beginnen met coderen in JavaScript. Zonder verder oponthoud, laten we beginnen met de vierde tutorial.

Snippets en controle structuren – inhoudsopgave:

1. Onze codering opzetten naar snippets
2. Controle structuren

In deze blogpost gaan we verder waar we zijn gebleven bij de derde blogpost. Op dit moment zou je je Google Chrome-browser open moeten hebben en meer specifiek je JavaScript-console. Als je ze om de een of andere reden hebt gesloten, is dit een goed moment om ze weer te openen.

Als je op een Mac bent, is de sneltoets om de console te openen “Option + Command + J”, nadat je Chrome hebt geopend. Als je een Windows-apparaat gebruikt, kun je de sneltoets “Control + Shift + J” gebruiken om de JavaScript-console te openen, zodra je Chrome opent. Of je kunt ook naar het menu bovenaan gaan en naar Weergave -> Ontwikkelaar -> JavaScript-console gaan.

Onze codering opzetten naar snippets

Tot dit punt in de cursus hadden we alles regel voor regel kunnen schrijven en uitvoeren. Het zou niet de meest handige manier zijn om dingen te draaien, maar het zou desondanks werken. Vanaf deze tutorial zullen we code schrijven die meerdere regels code vereist om een complete set instructies te creëren. Om dat te bereiken, zullen we iets gebruiken dat “snippets” wordt genoemd in Google Chrome. Zonder verder oponthoud, laten we onze setup upgraden van de JavaScript-console naar Chrome-snippets.

Momenteel zou je je console open moeten hebben, en als je de vorige tutorials hebt gevolgd, zou je een scherm moeten hebben dat er als volgt uitziet:

Wanneer je naar dit scherm kijkt, of je scherm voor dat matter, zou je moeten zien: Elementen, Console, Bronnen, Netwerk, Prestaties, Geheugen, Toepassing, enzovoort, geschreven naast elkaar in de bovenste balk van het donkere gebied. Als je ze in lichtere kleuren ziet, is dat ook helemaal prima. Het betekent dat je de lichte modus gebruikt, wat de standaardmodus kan zijn voor overdag. Het scherm dat ik momenteel laat zien, gebruikt het kleurenschema voor de donkere modus in de Chrome-console-instellingen. Als je de Elementen, Console, Bronnen, Netwerk enzovoort ziet verschijnen, in welk kleurenschema dan ook, ben je goed om te gaan.

Als je beter kijkt naar de bovenste balk van de console, kun je zien dat de tekst “Console” er iets anders uitziet. Klik gerust op “Bronnen” ernaast.

Wanneer je op bronnen klikt, zou je naar een scherm moeten kijken dat er op de een of andere manier zo uitziet.

Een verschil dat je zou kunnen verwachten is dat je waarschijnlijk het bestand “notes.js” niet zult zien, aangezien ik het eerder heb gemaakt. Verder zou het er vrij vergelijkbaar uit moeten zien. Om een nieuw bestand te maken, klik je op “+ Nieuwe snippet”. Zodra je erop klikt, wordt er een nieuw JavaScript-bestand voor je gemaakt en kun je het een naam geven zoals je wilt. In deze tutorial zullen we het “index.js” noemen, aangezien het gebruikelijk is om het eerste of primaire bestand “index.js” te noemen.

Als je deze tutorial woord voor woord wilt volgen, kun je na het klikken op “+ Nieuwe Snippet” de naam “index.js” invoeren en op de enter-toets op je toetsenbord drukken. Nu kunnen we in het geopende bestand klikken op het belangrijkste gebied dat is geopend, om te beginnen met coderen in JavaScript.

Laten we beginnen met iets dat we al weten dat werkt. En dat is:

alert("Hallo, Wereld!");

Je kunt het zelf uitschrijven voor extra oefening of de code delen naar het bestand dat we hebben gemaakt. Ik raad ten zeerste aan om het zelf te typen, aangezien dit in veel gevallen de manier is waarop je het leert. Zodra je het typt, als je op de enter-toets drukt, zie je dat de code niet wordt uitgevoerd. In plaats daarvan gaat je cursor gewoon naar de volgende regel, zoals bij elk ander tekstbewerkingsgebied. Er zijn twee hoofdmanieren waarop we onze code kunnen uitvoeren. De eerste is om op de afspeelknop te klikken die zich in de rechterbenedenhoek bevindt.

Als je op die afspeelknop klikt, zou het onze code moeten uitvoeren en ons de resultaten tonen.

Als je op “OK” klikt, laten we ook onze code uitvoeren met de andere hoofdmanier. De tweede hoofdmanier om je code uit te voeren, of je snippet uit te voeren, is om de sneltoets te gebruiken. Zoals we kunnen zien, toont het ons al de sneltoets wanneer we op de uitvoerknop klikken. Die sneltoets is “Command + Enter”. Om dat te doen, kunnen we de Command-toets indrukken en vervolgens op de Enter-toets drukken. Dit zal ook onze code uitvoeren en ons dezelfde resultaten geven als het klikken op de afspeelknop.

En daarmee weet je nu de twee manieren om onze JavaScript-code in de Chrome-snippets uit te voeren.

Als je nieuwe bestanden wilt maken om misschien aantekeningen over JavaScript te maken, of om wat JavaScript-code te oefenen, kun je altijd nieuwe bestanden maken door op “+ Nieuwe snippet” te klikken en je bestanden te benoemen zoals je wilt. Nu we onze nieuwe codering setup klaar hebben, laten we wat meer JavaScript bekijken.

Controle structuren

Wanneer we code schrijven, moeten we rekening houden met veel scenario’s en acties die de gebruiker kan ondernemen. Deze voorbereiding op verschillende scenario’s kan komen uit verschillende bronnen, zoals het apparaat waarop onze code draait, de schermgrootte die moet worden weergegeven, verschillende soorten browsers die de gebruiker mogelijk heeft, enzovoort. Maar hoe zorgen we ervoor dat we voorbereid zijn op verschillende scenario’s? Als je verschillende codes achter elkaar schrijft, zou het uitvoeren van al deze codes logisch zijn voor de gebruiker? Om dat allemaal en meer te beantwoorden, zullen we controle structuren gebruiken.

Controle structuren stellen ons in staat om de uitvoering van de code te sturen, zodat onze code zich kan aanpassen aan verschillende voorwaarden. Er zijn meerdere veelvoorkomende elementen die worden gebruikt voor controle structuren. In deze tutorial beginnen we met de eenvoudigste en gaan we van daaruit verder. De eerste die we zullen zien, gebruikt If, else, else if-verklaringen om de uitvoering van de code te controleren.

If, else en else if

Dit is de eenvoudigste controle structuur om mee te beginnen. Wat het ons toestaat te doen, is een stuk code uit te voeren als een bepaalde voorwaarde waar is, en een ander stuk code uit te voeren als een andere voorwaarde waar is. Laten we dat zien met een voorbeeld. Laten we aannemen dat, als het buiten regent, ik mijn paraplu mee zal nemen. Anders neem ik geen paraplu mee. We kunnen de exacte logica en redenering naar code vertalen als volgt:

(Voordat we deze code schrijven, zullen we de code van de vorige code die we in het bestand hebben, commentariëren door twee schuine strepen ervoor te plaatsen, zodat deze niet wordt uitgevoerd, maar je nog steeds een kopie ervan hebt. Na het toevoegen van de schuine strepen zou het er als volgt uit moeten zien:)

// alert("Hallo, Wereld!");
let rainy = true;
if (rainy){
   alert("Neem een paraplu mee");
} else {
   alert("Geen paraplu nodig");
}

Het uitvoeren van deze code zou ons de volgende uitvoer geven:

// alert("Hallo, Wereld!");
let rainy = false;
if (rainy){
   alert("Neem een paraplu mee");
} else {
   alert("Geen paraplu nodig");
}

Waarbij het uitvoeren van deze versie van de code die zegt dat er geen regen is, de volgende uitvoer zou geven:

Wanneer je de code typt om wijzigingen aan te brengen in het codebestand, als je beter kijkt naar de bestandsnaam, zie je dat er een asterisk voor de bestandsnaam staat. Dit betekent dat het codebestand dat we schrijven niet volledig is opgeslagen. Dit maakt misschien niet veel verschil als je slechts een paar regels code schrijft die je altijd kunt schrijven, maar vaker wel dan niet wil je je code opslaan, zodat je deze later kunt hergebruiken of bekijken. We kunnen dit codebestand opslaan op dezelfde manier als we andere bestanden opslaan, dus dat zou “Command + S” op Mac en “Control + S” op Windows zijn.

In ons geval, omdat we onze code direct na het schrijven uitvoeren, is ons bestand automatisch opgeslagen wanneer we de code uitvoeren. Dus als je van plan bent om wat code te schrijven en het urenlang te laten liggen, is het een goed idee om je code af en toe op te slaan om ervoor te zorgen dat je geen significante voortgang verliest.

Het is geweldig dat we onze code kunnen laten aanpassen aan een binaire voorwaarde met behulp van een If- en een else-verklaring, maar wat als we meerdere dingen te overwegen hebben, wat waarschijnlijk het geval zal zijn in het echte leven. Bijvoorbeeld, wat als het koud is en je een hoodie nodig hebt als het koud is. Een manier waarop we dat zouden kunnen doen, zou een “else if”-verklaring zijn en we kunnen het als volgt doen:

// alert("Hallo, Wereld!");
let rainy = false;
let cold = true;
if (rainy){
   alert("Neem een paraplu mee");
} else if (cold) {
    alert("Neem een hoodie mee, geen paraplu");
} else {
   alert("Geen paraplu nodig");
}

De uitvoer van deze code zou er als volgt uitzien:

Dus als een bepaalde voorwaarde waar is, wordt de eerste code die tussen de haakjes staat uitgevoerd. In ons geval, aangezien de eerste voorwaarde controleert op regen, zullen we de gebruiker waarschuwen dat ze een paraplu moeten meenemen. Als die voorwaarde onwaar is, wat betekent dat er geen regen is, blijven we andere voorwaarden controleren met behulp van een “else if”-verklaring. Een ding dat aanzienlijk verschilt van de “else if”-verklaring is dat we voor zoveel voorwaarden kunnen controleren als we willen met else if-verklaringen.

Het belangrijkste om hier te onthouden is dat je code van boven naar beneden wordt gecontroleerd op juistheid of waarheidsgetrouwe. Dit betekent dat met de huidige code, als het weer zowel regenachtig als koud is, het de koude weersomstandigheden niet zal herkennen, aangezien de eerste verklaring correct is. We kunnen dit ook verifiëren door de code te wijzigen om zowel regenachtige als koude omstandigheden te hebben.

// alert("Hallo, Wereld!");
let rainy = true;
let cold = true;
if (rainy){
   alert("Neem een paraplu mee");
} else if (cold) {
    alert("Neem een hoodie mee, geen paraplu");
} else {
   alert("Geen paraplu nodig");
}

Nu vraag je je misschien af, hoe kan ik dit oplossen? Welke is belangrijker, het weer dat koud is, of het regent? Moet je één voorwaarde kiezen en de andere voorwaarde opofferen? Moet je überhaupt zo’n keuze maken? Nou, niet echt. Dit is een zeer veelvoorkomend probleem en het heeft een zeer veelvoorkomende en relatief eenvoudige oplossing. We kunnen een “en”-expressie gebruiken om meerdere scenario’s te dekken. Om JavaScript te vertellen dat we een “en” willen gebruiken om onze programmeerlogica te verbinden, zullen we twee van dit symbool gebruiken: “&”. En omdat onze code van boven naar beneden wordt gecontroleerd, zullen we de meest uitgebreide optie voor de eerste if-verklaring gebruiken. De bijgewerkte code ziet er dan als volgt uit.

// alert("Hallo, Wereld!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Draag een hoodie en neem een paraplu mee.")
} else if (rainy){
   alert("Neem een paraplu mee");
} else if (cold) {
    alert("Neem een hoodie mee, geen paraplu");
} else {
   alert("Geen paraplu nodig");
}

Het uitvoeren van deze code zou je een waarschuwing geven die er als volgt uitziet:

Veel beter. Nu kunnen we meerdere verschillende scenario’s combineren, inclusief verschillende combinaties van deze scenario’s. Maar wat als we een scenario willen overwegen dat niet koud maar regenachtig is. En stel dat we de gebruiker willen vertellen om specifiek geen hoodie te nemen, en alleen een paraplu te nemen. Om dat te doen, kunnen we de logische “niet” gebruiken, we kunnen het in onze code gebruiken met het uitroepteken voor de voorwaarde die we willen specificeren. Laten we die voorwaarde aan onze code toevoegen zodat deze completer is.

// alert("Hallo, Wereld!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Draag een hoodie en neem een paraplu mee.")
} else if (rainy && !cold){
   alert("Neem een paraplu mee, maar geen hoodie.");
} else if (rainy){
   alert("Neem een paraplu mee");
} else if (cold) {
    alert("Neem een hoodie mee, geen paraplu");
} else {
   alert("Geen paraplu nodig");
}

Wanneer we een nieuwe voorwaarde aan een if-else-boom toevoegen, zolang het de meer uitgebreide voorwaarde is, kunnen we deze ergens bovenaan plaatsen. Op deze manier hebben we veel minder kans op fouten in vergelijking met de tegenovergestelde benadering. Een bijeffect van het injecteren van nieuwe code in bestaande code is dat sommige van de code overbodig kan worden of mogelijk niet op de meest efficiënte manier werkt. We zullen ons niet sterk richten op het efficiëntiegedeelte, maar voor nu kunnen we zien dat we zowel de koude als de niet-koude voorwaarden voor regenachtig weer dekken, zodat we optioneel de voorwaarde die alleen controleert op “regenachtig” kunnen verwijderen. Het aanpassen van deze code wordt ook wel “Code Refactoring” genoemd, in het refactoringproces is het doel om de code geleidelijk schoner en efficiënter te maken.

// alert("Hallo, Wereld!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Draag een hoodie en neem een paraplu mee.")
} else if (rainy && !cold){
   alert("Neem een paraplu mee, maar geen hoodie.");
} else if (cold) {
    alert("Neem een hoodie mee, geen paraplu");
} else {
   alert("Geen paraplu nodig");
}

Wanneer we willen controleren of een van de voorwaarden waar is, kunnen we de “of”-operator gebruiken, die het pijpsymbool is dat twee keer op je toetsenbord wordt gebruikt en er als volgt uitziet: “||”.

Laten we dat zien met een ander voorbeeld. Om meer voorbeelden aan hetzelfde bestand toe te voegen zonder de nieuwe opdrachten te verstoren, kunnen we de vorige code die we hebben gebruikt, commentariëren door de vorige code in deze symbolen te wikkelen die we eerder hebben gezien:

/* 
*/

Wat een schuine streep en een asterisk is en dezelfde symbolen in de tegenovergestelde volgorde om het gecommentarieerde deel af te sluiten. Laten we onze huidige code in deze symbolen wikkelen zodat ze niet interfereren met de nieuwe code die zal komen. Nu zou je codebestand er als volgt uit moeten zien:

// alert("Hallo, Wereld!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Draag een hoodie en neem een paraplu mee.")
} else if (rainy && !cold){
   alert("Neem een paraplu mee, maar geen hoodie.");
} else if (cold) {
    alert("Neem een hoodie mee, geen paraplu");
} else {
   alert("Geen paraplu nodig");
}
*/

Voortaan zullen we ons richten op de nieuwe delen die we aan het bestand toevoegen, zodat we ons kunnen concentreren op het leren van één ding tegelijk. Je kunt optioneel de vorige code in de commentaarmodus houden, ze naar een nieuw bestand verplaatsen voor je referenties, of als je het niet langer wilt zien, kun je het verwijderen voor een schoner bestand.

Laten we doorgaan met ons voorbeeld naar een “of”-geval. Overweeg een scenario waarin je elke keer dat je hongerig of dorstig bent, je koelkast bezoekt voor voedsel en drank. Hoe zou de code daarvoor werken?

let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
    alert("Ga naar de koelkast en kijk wat je daar hebt.");
}

Het uitvoeren van deze code, zoals je waarschijnlijk ook hebt geraden, zou ons de volgende uitkomst geven:

Tot nu toe kwamen de voorbeelden die we gebruikten uit scenario’s die dicht bij het echte leven stonden, maar vaak zul je met getallen in code werken. Je hebt eerder al getallen in deze serie gezien, maar we hebben er niet veel over de vergelijking of de bewerkingen die we ermee konden doen gesproken. Nu we meer hebben geleerd over if-else-verklaringen, laten we wat meer over getallen zien.

Wanneer we met if- en else if-verklaringen werken, controleren we de waarheidsgetrouwe van een verklaring. Maar kunnen we ook een zinvolle if-verklaring maken als we alleen maar getallen hebben? Bijvoorbeeld, wat als ik een paraplu wil krijgen als er meer dan 50% kans op regen is, kunnen we dat met code bereiken? Ja, dat kunnen we, en zo zou het gaan.

let chanceOfRain = 70;
if (chanceOfRain >= 50) {
    alert("Neem een paraplu mee.");
}

Wanneer we met getallen werken, hebben we een manier nodig om het om te zetten naar een soort waarheidsgetrouwe of onwaarheidsgetrouwe voor de if-verklaring om te werken. Er zijn meerdere manieren waarop we dat kunnen bereiken, afhankelijk van onze gebruiksgeval.

Bijvoorbeeld, we kunnen controleren of twee getallen exact gelijk aan elkaar zijn met drie gelijktekens zoals dit:

let a = 10;
let b = 10;
if (a === b) {
    alert("Ze zijn hetzelfde.");
}

Dit zou ons de waarschuwing geven die zegt “Ze zijn hetzelfde.”.

We kunnen ook controleren op ongelijkheid met de volgende code:

let a = 10;
let b = 5;
if (a !== b) {
    alert("Ze zijn niet hetzelfde!");
}

Het uitvoeren van de bovenstaande code zal ons de waarschuwing geven die zegt “Ze zijn niet hetzelfde!”.

We kunnen ook specifiek controleren welk getal groter is, groter of gelijk, kleiner of kleiner of gelijk. Je kunt een samenvatting van de tekens voor je gemak vinden.

// === controleert op gelijkheid
// !== controleert op ongelijkheid
// > groter dan
// >= groter dan of gelijk aan
// < kleiner dan
// <= kleiner dan of gelijk aan

Laten we ook een paar meer van hen zien voor extra oefening en code-exposure. Hier zijn een paar voorbeeldcodes die allemaal de waarschuwing zullen weergeven die ze binnen de if-verklaringen hebben:

Groter dan:

let a = 10;
let b = 5;
if (a > b) {
    alert("a is groter dan b");
}

Groter dan of gelijk aan:

let a = 10;
let b = 5;
if (a >= b) {
    alert("a is groter dan of gelijk aan b");
}

Een ander voorbeeld van groter dan of gelijk aan:

let a = 10;
let b = 10;
if (a >= b) {
    alert("a is groter dan of gelijk aan b");
}

Kleiner dan:

let a = 5;
let b = 10;
if (a < b) {
    alert("a is kleiner dan b");
}

Kleiner dan of gelijk aan:

let a = 5;
let b = 10;
if (a <= b) {
    alert("a is kleiner dan of gelijk aan b");
}

Een ander voorbeeld van kleiner dan of gelijk aan:

let a = 10;
let b = 10;
if (a <= b) {
    alert("a is kleiner dan of gelijk aan b");
}

Met een combinatie van deze vergelijkings- of gelijkheidstekens kunnen we complexe codes maken die zich kunnen aanpassen aan verschillende voorwaarden.

Rekenkundige bewerkingen

Wanneer we met getallen werken, willen we ook rekenkundige bewerkingen uitvoeren. De meeste rekenkundige bewerkingen zouden je vrij bekend moeten zijn, maar er zijn ook programmeerspecifieke rekenkundige operatoren die misschien minder bekend zijn.

Hier is een samenvatting van de rekenkundige bewerkingen die we in JavaScript gebruiken met hun betekenis voor je gemak:

// * vermenigvuldiging
// / deling
// + optelling
// - aftrekking
// % modulo-bewerking, geeft ons de rest na deling
// ** exponentiatie

De eerste vier zullen werken zoals je verwacht:

let a = 12;
let b = 5;
let c = a * b;
// c zal 60 zijn
c = a / b;
// c zal nu 2.4 zijn
c = a + b;
// c zal nu 17 zijn
c = a - b;
// c zal nu 7 zijn

De modulo-bewerking geeft ons de rest na het delen van het eerste getal door het tweede getal. Als we doorgaan met de vorige a-, b- en c-code:

c = a % b;
// c zal nu 2 zijn
c = 18 % 5;
// c zal nu de waarde 3 hebben
// omdat 18 gedeeld door 5 ons de rest van 3 zal geven

De exponentoperator voert exponentiatie uit in JavaScript. Het wordt weergegeven met twee sterretjes en neemt het eerste element tot de macht van het tweede element.

c = 2 ** 3;
// c zal nu de waarde 8 hebben
// omdat 2 * 2 * 2 gelijk is aan 8

Dit was een relatief lange tutorial, en je hebt het gehaald! We hebben onze codering setup geüpgraded en behoorlijk wat geleerd in deze tutorial. In de volgende tutorial gaan we verder met meer manieren om de stroom van onze code te controleren!