Mijn interpretatie van de Basis van JavaScript

Afgelopen jaar heb ik de tijd genomen om mij te verdiepen in de theorie achter JavaScript. De reden hiervoor is dat ik JavaScript wil leren gebruiken en dus snappen wat ik doe. Hiervoor verschillende video's bekeken, artikelen gelezen, Paul Verbeek-Mast heeft mijn vele vragen beantwoord, geoefend met de console. Het eerste stapje is gezet.
Hier staan mijn aantekeningen over de basis van JavaScript. Ik vul ze steeds aan. De reden dat ik ze nu al online zet is om feedback te krijgen van anderen waardoor ik weer leer. Heb je aanvullingen of denk je dat ik het verkeerd heb geinterpreteerd, geef het aan mij door. Mijn twitter-handle en mailadres staan onderaan de pagina.

Wat is JavaScript?

JavaScript is een programmeertaal. Het is een taal bedoelt voor het web en vooral voor de webbrowser. Het maakt de laatste jaren een flinke opmars omdat het ook gebruikt wordt als back-end taal met Node.js. Brendan Eich heeft de naam JavaScript bedacht, het was de bedoeling om HTML te koppelen aan Java-applets. Maar JavaScript heeft als programmeertaal niks te maken met de programmeertaal Java. Microsoft kwam in het begin met hun eigen versie van JS, genaamd JScript. Brendan Eich wilde voorkomen dat er meerdere versies van JS zouden ontstaan en heeft daarom Ecma gevraagd het te standariseren. Hierop is EcmaScript ontstaan. EcmaScript is de specificatie van JavaScript. Hierin staat beschreven aan welke regels het moet voldoen, welke onderdelen er in horen en hoe de opbouw van een regel is. Ik zie dit als de grammatica van de programmeertaal. Naast JS is o.a. ActionScript een implementatie van EcmaScript.

De JavaScript die je schrijft moet geinterpreteerd worden. Hiervoor is in de webbrowser een JS-engine die compileert de taal. Deze doet dit net voor het uitvoeren of zelfs tegelijkertijd met uitvoeren van de code (bron: You don’t know JavaScript). Elke browser heeft een eigen JavaScript-Engine. En elke browser vendor bepaald welke onderdelen van EcmaScript in de browser worden ingebouwd. Hierdoor werkt niet alle JS in elke browser.

Wat is programmeren?

Hierboven heb ik het over een programmeertaal. Maar wat is programmeren eigenlijk?
Als mensen snappen we wat we zien. Een computer heeft er geen idee van en heeft uitleg nodig om iets te snappen en ook een stappenplan om iets uit te voeren. Dat stappenplan is programmeren.

Om de werkelijkheid begrijpbaar te maken voor computers zijn dingen als objecten te duiden. Elk object heeft:

Onderdelen van JavaScript

Variabelen

MDN over variabelen. Variabelen maak je door te beginnen met var en daarna een variable naam, dit mag haast alles zijn. Een variabele kan verschillende data types hebben:

Je hebt ook NaN, dit staat voor Not a Number. Duidt vaak op een error;

De .title na de variabele naam/object heeft de dotnotation.

Een variabele is niet zijn waarde maar zijn containers voor hun waarde. Een variabele krijgt een inhoud die weer kan veranderen tijdens het lopen van het programma. De Constants heeft een vaste waarde, deze waarde kan je wel aanpassen als het programma gelopen heeft. Voor een variabele zet je var en voor een Constants zet je const. En je kan let gebruiken. Dit is ook een manier om een variabele te maken. Maar deze maakt zijn eigen scope en is bijvoorbeeld buiten een if-statement niet te gebruiken. En de let is pas bruikbaar vanaf het moment dat je die gedeclareerd hebt.

var voorbeeld; hiermee heb je de variabele ‘voorbeeld’ gedeclareerd (declared) en met var voorbeeld =”een voorbeeld”; is die gedefineerd (defined).

Volgens Zac Gordon is het handigste de variabelen aan de top te declareren en ze met een komma te scheiden.
var titel = 'Leer JS', content = 'Zet er maar wat neer', post; //Deze laatste wordt hier alleen maar gedeclareert en pas later gevuld met een waarde, als je deze later vult hoef je niet het woordtje var er voor te zetten.

JS is een weakly of loose Typed Language. Je hoeft niet te zeggen welk data-type een variabele is. In Java is dat wel zo. Een variabele benoemt in het js bestand is een global variabele, deze is ook bereikbaar door andere functies in je JS. Een variabele benoemt in een functie is een local variabele, deze heeft lexical scoping. Een variabele gemaakt met let of const in een functie is een variabele met Block Scoping. Let er dus goed op waar je een variabele definieert.

This

Zie: https://zellwk.com/blog/this/

Comments

Voor een heel stuk zelfde als in CSS /* */ of voor 1 regel met //

Operators

De hele lijst van Operators staat op MDN.

+ , -, *, /, =, ===, !, !==, ++, >, <, =>, =< +=, -=

assignment (=), loose equality (==) deze kan implicit type coercion veroorzaken en strict equality (===)

Math

Met de modulus kan je de overgebleven getallen zien bij een deling. Dus 365 % 27 geeft 14. Dat zijn het aantal dagen die overblijven na het delen van 365 door 27.

Conditionals:

Onder deze conditie moet je dit doen en anders dat. if (…) doe dan dit … else doe dan dat…. Wat na de if tussen de ( ) staat heet een expression.

Switch ( ) … case ….: doet iets break; (Break is nodig na elke case, anders blijft het door gaan).

Verschil tussen Switch en Else if: bij Switch test je 1 conditie en is dan sneller als Else if. Switch gebruikt altijd ===, niet de lossere variant ==. Het verschil tussen == en === is dat bij === moet waarde en type precies gelijk zijn. Bij == is de waarde gelijk, maar mag het type anders zijn.

Functions:

In functies zet je functionaliteiten die je graag weer wilt hergebruiken. Een functie is vaak een naam met brackets –( )– er achter. Een functie heeft vaak arguments nodig, stukjes data, om hun werk te doen. De webbrowser heeft functies ingebouwd, maar je kan ook zelf functies samenstellen. Binnen een function heb je de return-statement die er voor zorgt dat het resultaat van de functie ook buiten de functie beschikbaar is. Dan kan de uitkomst pas gebruikt worden. De variabelen die binnen een functie worden gedefinieerd, zijn ook alleen daar bruikbaar, dit heet scoping. Een functie doet niks, pas op het moment dat deze aangeroepen wordt gebeurt er iets.

Een functie ziet er zo uit:

//Function declaration var addTwoNumbers = function(numberOne, numberTwo (dit zijn parameters)) { var numberOne; (door dat deze nu in de functie zitten, mogen deze eerste 2 variabelen weg) var numberTwo; var (hier betekent var dat deze variabele die er aan komt dat deze alleen in deze functie mag bestaan) sum = numberOne + numberTwo; return sum; (return geeft het antwoord terug, zonder dit stel je alleen de vraag en krijg je undefined) } addTwoNumbers(2, 5); //Function call

Een functie gebruik je als je een taak vaker in je code wilt gebruiken. Zo kan je deze functie steeds opnieuw aanroepen.

Anonieme functie = een functie zonder naam. Deze kan gekoppeld zijn aan een variabele. Zo’n functie hoeft maar 1x gebruikt te worden. Maar de waarde daarvan misschien wel vaker. Dan zet je de functie in een variabele.
Functie expression = Als je een functie op de plek zet waar de interpreter een expression zou verwachten. Hierdoor kan je er voor zorgen dat variabelen-namen niet met elkaar conflicteren. Deze moet je altijd afsluiten met een ;

Een method is een functie gekoppeld aan een object.

Function call = functieNaam();
Function reference = functieNaam; Function Expression = een functie die () om de hele functie heen heeft zodat ook de naam van de functie niet in je Global deel gebruikt kan worden, dit zorgt voor minder vervuiling van je code.
Achter een function expression kan je (); zetten zodat de functie ook gelijk uitgevoerd wordt. Dit heet een IIFE (Immediately Invoked Function Expression).

Events:

Gebeurtenissen zoals klikken met een muis of een toetsenbord aanslag. Datgene wat luistert naar het event heet event listeners. De code die wordt uitgevoerd na dat het event is uitgevoerd heet event handlers.

Loops

Met een loop kan je door een functie blijven gaan tot dat de conditional false aanduidt. Dan is het klaar, zo ga je door een lijst heen, do…., while…., do..while… of een for… loop (For in en For of).

Infinite loop is een loop die niet stopt omdat je niet aan je conditionals komt.

De For … in loop gebruik je voor properties in object.

De For…of loop gebruik je in een collectie zoals een array.

Een Do.. While.. loop voert eerst iets uit en checkt daarna pas waar het aan moet voldoen.

De break-statement zorgt er voor dat je uit een loop gaat omdat voldoen is aan de conditie.

De continue-statement zorgt er voor dat je door gaat in de loop, maar slaat die conditie over.

Er zijn nieuwe manieren om een loop te doen, zoals map, reduce, filter en find. In het artikel van Flavio Copes An alternative approach to loops using map, filter, reduce and find staan deze manieren beschreven.

Object

Een object bestaat uit variabelen en functies. Deze variabelen worden properties genoemd en die functies worden methods genoemd.

Object.isMethod hiermee kan je via de isMethod functie iets doen met het object. Het object kan een Number of String zijn. De isMethod kan je in je DevTools terug vinden. Dit zijn dan degene waar je webbrowser mee overweg kan. Deze lijken op die in jQuery worden gebruikt. jQuery heeft zichzelf overbodig gemaakt, in JS zijn nu verschillende methods die hetzelfde doen als wat jQuery doet/ deed.

Build-in object van JS zijn o.a. String, Number, Math en Date. Hiermee kan je spelen door de properties en methods die ze hebben.

Overig

Met console.log(); kan je een bepaalde variabele uitlezen. Hierdoor kan je o.a. debuggen om te kijken waar een fout zit als je deze hebt.

Een statement is een individuele instructie of een stap afgesloten met een ; of tussen {…}.
Expressions zijn vaak delen van een statement en zijn stukjes code die een waarde krijgen.
Keywords hebben een functionaliteit in JS, zoals var en function.

Lastige termen

JS Reference