JavaScript basis. Deel 2 JavaScript cursus van Beginner tot Gevorderd

Dit is het tweede deel 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 tweede tutorial.

JavaScript basisprincipes – inhoudsopgave:

1. JavaScript basisprincipes
2. Regel voor regel uitvoering
3. Twee manieren om instructies te beëindigen
4. Opmerkingen

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

Als je een Mac gebruikt, 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.

JavaScript basisprincipes

JavaScript, net als alle andere programmeertalen, is een taal die je gebruikt om te communiceren met computers. Net zoals een natuurlijke taal grammatica en bekende woorden heeft om correcte zinnen te vormen, hebben programmeertalen ook bepaalde regels die je moet volgen om effectief met de computer te communiceren.

Bijvoorbeeld, bepaalde woorden betekenen bepaalde dingen voor de JavaScript-engine die onze code uitvoert, zoals het “alert” sleutelwoord dat we in de vorige tutorial hebben gebruikt, dat de betekenis had om een waarschuwing aan de gebruiker weer te geven met de specifieke woorden die ze direct na de haakjes hebben geplaatst. In ons geval schreven we “Hallo, Wereld!” dus kregen we een waarschuwing die zei “Hallo, Wereld!”.

Er zijn ook andere gereserveerde sleutelwoorden in JavaScript waarvan we ons bewust moeten zijn, zodat we effectief met de computer kunnen communiceren met de juiste woorden en grammatica. Net zoals de grammatica die we in natuurlijke taal hebben, is er ook een grammatica in programmeertalen. Die grammatica wordt meestal de “syntaxis” in programmeertalen genoemd en JavaScript is hierop geen uitzondering. Daarom is het een goed idee om de belangrijkste sleutelwoorden en de grammatica die we in JavaScript hebben te begrijpen terwijl we beginnen met het leren van de basisprincipes van JavaScript. Laten we enkele van de belangrijkste dingen bekijken die we over JavaScript moeten weten.

Regel voor regel uitvoering

Als het gaat om de basisprincipes van JavaScript, is een van de eerste dingen die je moet weten dat de code die je schrijft regel voor regel wordt uitgevoerd, van boven naar beneden. Deze stijl van code-uitvoering wordt ook wel aangeduid als JavaScript zijnde een “geïnterpreteerde programmeertaal”.

Daarentegen zijn sommige programmeertalen “gecompileerde programmeertalen”. Enkele voorbeelden van gecompileerde talen zijn: C, C++, C#, Swift, Java, enzovoort. Het belangrijkste verschil is dat bij gecompileerde programmeertalen, alle code die je schrijft “gecompileerd” zal worden en in één keer door de computer zal worden uitgevoerd. Dat is ook de reden waarom het moeilijker kan zijn om een gecompileerde programmeertaal te leren, omdat het moeilijker kan zijn om te zien waar je een fout in je programma hebt gemaakt.

Enkele voorbeelden van geïnterpreteerde programmeertalen zijn JavaScript, Python, Bash en Matlab. Met geïnterpreteerde programmeertalen heb je het inherente voordeel van te zien op welke regel je de fout hebt gemaakt, bijvoorbeeld het vergeten van een puntkomma of het niet matchen van haakjes in je code. Het hebben van deze eigenschap maakt misschien niet veel verschil in bepaalde toepassingen, maar wanneer we proberen een website te laden met een trage internetverbinding, geef je er de voorkeur aan dat elke enkele regel JavaScript zo snel mogelijk wordt uitgevoerd.

Twee manieren om instructies te beëindigen

Een computerprogramma is aan het einde van de dag een verzameling instructies voor de computer. Maar waar eindigt het ene programma en waar begint de volgende instructie? Er zijn verschillende benaderingen voor dit probleem. JavaScript gebruikt twee hoofdcomponenten, de puntkomma en haakjes.

Afhankelijk van het type instructie dat we schrijven, zullen we over het algemeen een van beide gebruiken om een set instructies te beëindigen of te verpakken. We zullen verschillende soorten haakjes gebruiken voor verschillende functionaliteiten en datatypes. Bijvoorbeeld, in de alert(“Hallo, Wereld!”); code die we eerder hebben uitgevoerd, vertellen de haakjes die de hallo wereld tekst omringen de computer wat de waarschuwing moet zeggen, en de puntkomma aan het einde van de instructie vertelt de computer dat deze instructie hier eindigt, je kunt naar de volgende instructie gaan. Dit is zeer vergelijkbaar met hoe we een punt “.” gebruiken om zinnen in het Engels te beëindigen.

Opmerkingen

Het toevoegen van opmerkingen aan de code is een essentieel onderdeel van programmeren. Het kan gemakkelijk zijn om te begrijpen welke code je schrijft terwijl je het schrijft, maar afhankelijk van de complexiteit van de code heb je misschien zes maanden later heel weinig idee, wanneer je terugkomt naar de code.

Het toevoegen van opmerkingen maakt het niet alleen veel gemakkelijker om je code in de toekomst te begrijpen, maar het maakt het ook veel gemakkelijker voor iedereen met wie je samenwerkt om de code te begrijpen. Het kan je ook helpen om je begrip van het probleem waarmee je werkt beter te ontwikkelen, aangezien het meestal veel gemakkelijker is om problemen op te lossen door ze op te splitsen in kleinere hapklare stukken. De opmerkingdelen van je code worden genegeerd door de interpreter en worden niet uitgevoerd.

Er zijn twee manieren waarop je opmerkingen kunt toevoegen in JavaScript. De eerste is om een eenvoudige “enkele regel” opmerking toe te voegen met twee schuine strepen zoals dit:

// dit is een opmerking

Op deze manier wordt alles wat je na de twee schuine strepen schrijft genegeerd op de specifieke regel waar je de schuine strepen hebt geplaatst. Je kunt dit zo vaak herhalen als je wilt om meerdere regels met opmerkingen te dekken zoals dit:

// dit is een opmerking.
// dit is een andere opmerking.
// je kunt zo blijven opmerken.

Een andere reden waarom we opmerkingen gebruiken, is om een stuk code uit te commentariëren om met code te experimenteren. Bijvoorbeeld, je kunt dezelfde functionaliteit op meerdere manieren schrijven en je wilt misschien één versie van dezelfde code uitcommentariëren om hun individuele prestaties of resultaten te vergelijken. Laten we dat ook met een voorbeeld bekijken.

Ga je gang en kopieer en plak de volgende code in je JavaScript-console die je in Chrome hebt geopend.

// begroet gebruiker
alert("Hallo, Gebruiker!");
alert("Hoi, Gebruiker!");

Als je extra oefening wilt door de hele code zelf te schrijven, kun je dat ook doen. Eén ding dat je moet weten over het schrijven van meerdere regels code in de console is dat je naar de volgende regel kunt gaan zonder deze uit te voeren door “shift + enter” te drukken. Anders, na het schrijven van een enkele regel code, als je gewoon op enter drukt, wordt die regel code uitgevoerd. In dit voorbeeld is dit geen groot probleem en het is eigenlijk prima om het regel voor regel uit te voeren, omdat we een eenvoudig voorbeeld hebben dat ook in die stijl kan werken.

Na het kopiëren en plakken of het zelf schrijven van de code, ga je gang en druk op “enter” om de code uit te voeren. Het resultaat zou je twee aparte waarschuwingen moeten geven. Ook om de waarschuwingen te sluiten kun je op “OK” klikken, in dit geval doen ze niets omdat dit een eenvoudige waarschuwing is en het triggert niets na het tonen van het bericht dat we willen weergeven.

Wanneer we de code op deze manier uitvoeren, voeren we dezelfde functionaliteit twee keer uit. Maar wat moet je doen als je slechts één implementatie tegelijk wilt zien? Nou, je weet precies wat je in dit geval moet doen, omdat we het er al over hebben gehad. Ga je gang en commentarieer een van de regels uit na het plakken of schrijven van de code, zodat alleen de tweede implementatie van “Hoi, Gebruiker!” wordt uitgevoerd.

Wanneer je de uitdaging hebt voltooid, of als je vastloopt tijdens de uitdaging, kun je de oplossingscode voor de uitdaging hieronder bekijken. Voordat je naar de oplossing kijkt, raad ik altijd ten zeerste aan om het zelf uit te proberen, omdat je het beste leert wanneer je het echt oefent. Als je de uitdaging met succes hebt voltooid, zou je naar een scherm zoals dit moeten kijken:

Let op dat wanneer je een regel code uitcommentarieert, deze dezelfde kleur krijgt als de vorige uitcommentarieerde regel. Dit kleurverschil maakt in feite geen verschil voor de computer, maar het is een vrij nuttige functie voor ons wanneer we code schrijven. Op deze manier is het veel gemakkelijker als je per ongeluk een regel code uitcommentarieert, omdat de kleuren het duidelijk maken.

Een andere manier om code te commentariëren is met het gebruik van de schuine streep en het sterretje. Op deze manier kunnen we enkele regels of meerregelige opmerkingen in onze code maken.

/* een enkele regel opmerking *//* de opmerking begint wanneer we een schuine streep en een sterretje plaatsen
en de opmerkinggebieden eindigen
wanneer we de opmerking sluiten met een sterretje en de schuine streep
zoals dit */

Nu weet je de basisprincipes van JavaScript. In de volgende tutorial zullen we een extreem veelvoorkomend concept in programmeren zien dat “variabelen” wordt genoemd, samen met basisdatatypes in JavaScript.