Wat is JavaScript? Een uitleg over de meest populaire scripttaal op het web

Wie heeft er nooit een verzoek gekregen om Java te updaten bij het openen van een bepaalde website?

Alhoewel veel mensen Java kennen dankzij de features voor interactieve websites, kennen de meeste gebruikers JavaScript minder goed, of denken ze zelfs dat het dezelfde talen zijn.

In dit artikel kijken we naar wat JavaScript precies is, en de verschillen tussen Java en JavaScript. Daarna laten we een overzicht zien van de belangrijkste functies van JavaScript.

Snel aan de slag dus!

Bekijk onze video-uitleg over JavaScript

Wat is JavaScript?

Heel simpel gezegd is JavaScript een populaire scripttaal voor het toevoegen van interactieve functies en andere dynamische content aan webpagina’s. Bekende voorbeelden van JavaScript content zijn bijvoorbeeld formulieren, slideshows met foto’s en animaties.

JavaScript is vrij intuïtief en eenvoudig te leren. Het is een uitstekend beginpunt voor iedereen die meer wil leren over website development.

JavaScript is de laatst laag voor functionaliteit bij interactieve websites. Daarbij legt HTML de basis voor de pagina. CSS zorgt voor het uiterlijk, zodat je website ook mooi is. JavaScript eindigt de rij met het toevoegen van interessante, activerende elementen.

Wanneer je JavaScript gaat leren, is het belangrijk dat je de relatie tussen HTML, CSS en JavaScript begrijpt, en hoe deze drie samenwerken om een website weer te geven.

Waar wordt JavaScript voor gebruikt

JavaScript heeft diverse toepassingen, die iedereen die wel eens een interactieve webpagina of mobiele app heeft gebruikt, al gezien heeft. Alhoewel de ontwikkeling van websites, met name interactieve elementen zoals formulieren en animaties, de voornaamste toepassing van JavaScript is, wordt het ook gebruikt in onder meer:

• Games in de browser – waaronder zowel 2D als 3D games
• Development van mobiele applicaties – handig, omdat het onafhankelijk van het platform werkt
• Presentaties – het maken van webbased geanimeerde slideshows

Alhoewel de meeste JavaScript toepassingen client-side zijn, kan JavaScript ook handig zijn in server-side toepassingen, zoals het maken van webservers.

Verschillen tussen Java en JavaScript

Allereerst is het belangrijk om op te merken dat Java en JavaScript weinig met elkaar te maken hebben, ondanks dat ze allebei het woord “Java” bevatten. Zowel Java als JavaScript zijn wel talen voor het ontwikkelen van webpagina’s en webtoepassingen. Maar ze hebben belangrijke verschillen, zoals:

• Objectgeoriënteerd programmeren: Java is een objectgeoriënteerde programmeertaal. JavaScript is een objectgebaseerde scripttaal.
• Syntax:JavaScript syntax is veel minder formeel en gestructureerd dan Java. Het is dus meestal veel makkelijker.
• Compilatie: Java is een gecompileerde taal, terwijl JavaScript geïnterpreteerd wordt per regel tijdens de uitvoering. Gecompileerde talen zijn meestal sneller, maar geïnterpreteerde talen zijn dan weer flexibeler.
• Omgeving: Je kan een Java toepassing in eigenlijk elke omgeving gebruiken, door ze uit te voeren in virtuele machines of browsers, maar JavaScript is alleen voor browsers.
• Gebruik van geheugen: Java verbruikt meer geheugen dan JavaScript, en dat maakt JavaScript dan ook een betere keuze voor webpagina’s en webtoepassingen.

Is JavaScript veilig?

Alhoewel JavaScript breed geaccepteerd wordt en veel gebruikt wordt voor webdevelopment, heeft het een aantal bekende kwetsbaarheden. Eén van de meest gebruikelijke cyberaanvallen via JavaScript kwetsbaarheden is de cross-site scripting (XSS) aanval. Cybercriminelen gebruiken XSS aanvallen om toegang te krijgen tot persoonsinformatie, en deze informatie te stelen.Om dergelijke aanvallen te voorkomen, is het daarom erg belangrijk om je code te testen en te reviewen tijdens de ontwikkeling. Testmethodes zoals statische en dynamische applicatiebeveilingstest (SAST en DAST) helpen om kwetsbaarheden op alle plekken bloot te leggen.Volgens de beveiligingsanalisten van Cloud Defense, helpt SAST (Static Application Security Testing) om je code te testen op het overtreden van beveiligingsregels, en om de gevonden kwetsbaarheden te vergelijken tussen de bron en latere afsplitsingen. Je krijgt een melding wanneer de dependencies in je project geraakt worden door nieuw gevonden kwetsbaarheden.

Vanilla JavaScript

Vanilla JavaScript is een lichtgewicht implementatie van de pure JavaScript taal, zonder toegevoegde libraries. De term “vanilla” slaat dan op het feit dat JavaScript volledig onveranderd is, dus alleen de basisversie.Veel grote bedrijven gebruiken Vanilla JS, waaronder Google, Microsoft, Apple en Amazon. Vanilla JavaScript is een uitstekende manier om de basis van programmeren in JavaScript te leren, voordat je de geavanceerde features uit libraries gaat toepassen.

JavaScript Libraries

Een JavaScript library is een verzameling van code waarmee je bepaalde functies kan laten uitvoeren. Hierdoor kunnen zelfs beginners geavanceerde websites bouwen in weinig tijd. Ook bespaart het alle gebruikers een hoop tijd bij het bouwen van websites en toepassingen.Alhoewel er ontzettend veel JavaScript libraries zijn, zijn de bekendste en populairste opties jQuery, Animate on Scroll, Anime.js, en Leaflet.js.

JavaScript en website frameworks

Website frameworks zijn geavanceerde manieren om websites te bouwen, meestal met uitgebreide libraries met voorgebouwde functionaliteiten en testpakketten. Je hebt wellicht wel eens gehoord van server-side frameworks, zoals Laravel, Ruby on Rails, of Django. Maar er zijn ook diverse populaire client-side JavaScript-based frameworks, zoals React.js, Vue.js, en Node.js.

De JavaScript DOM

De DOM, oftewel Document Object Model, werkt als een interface tussen een programmeertaal zoals JavaScript en een onderliggend document, in principe HTML of XML documenten. DOM is een W3C (World Wide Web Consortium) standaard, dat gedefinieerd wordt als “een platform- en taal-neutrale interface waarmee programma’s en scripts dynamisch de content, structuur en stijl van een document kunnen openen en updaten”. Documenten bestaan uit een verzameling individuele elementen en eigenschappen (tekst, knoppen, links, etc.)

Belangrijkste onderdelen van JavaScript

Net als bij andere programmeertalen gebruikt JavaScript variabelen om de opslagplekken van data te vinden. Variabelen kunnen globaal zijn (toegankelijk voor elke functie in het programma) of lokaal, ook wel block-scoped genoemd (alleen toegankelijk in het block waar ze gemaakt zijn).

Variabelen kunnen een vaste waarde hebben (constanten die bekend staan als literals) of bewerkbaar zijn. JavaScript heeft een specifieke syntax voor het declareren (aanmaken) van constanten en variabelen, en waarden hieraan toewijzen.

Een constante aanmaken

Echte constanten worden gemaakt met een const declaration. Const maken alleen-lezen, onveranderlijke block-scoped constanten (dus lokale constanten). Een voorbeeld van het maken van een constante met const:

const GOLDEN_RATIO = 1.618; // create a constant named GOLDEN_RATIO with value 1.618

Let op het gebruiken van hoofdletters bij het geven van een naam aan een constant, dit is niet vereist, maar wel een algemeen geaccepteerde gewoonte. Namen van variabelen, waaronder ook constanten, moeten beginnen met een letter (hoofdletter of kleine letter), een underscore (_) of het dollar-teken ($). Alles is case-sensitive, dus let op hoe welke naam je aan je variabelen geeft. Constanten moeten direct bij het aanmaken een waarde toegewezen krijgen. Zo niet, zoals in onderstaand voorbeeld, dan krijg je een foutmelding:

const GOLDEN_RATIO;

Een variabele aanmaken

Variabelen worden gemaakt met het var keyword. Ze hoeven niet meteen een waarde toegewezen te krijgen, maar dat kan wel. Het var keyword is in principe globaal, dus niet per block, tenzij het in een functie wordt aangemaakt, dan is het lokaal voor die functie.

var variable1; // declare a variable called variable1

var variable2 = "2021"; // declare a string variable called variable2 and initialize with value 2021

variable1 = "Thank goodness it's" // assign string value to previously declared variable variable1

console.log(variable1 + " " + variable2); // display "Thank goodness it's 2021"

Let op dat statements in JavaScript altijd met een puntkomma moeten eindigen. Je kan opmerkingen plaatsen via //, JavaScript zal dan alles tussen // en het eind van de regel negeren. Variabelen kunnen verschillende soorten data bevatten, zoals getallen, strings en objecten. Het toewijzen van variabelen in JavaScript is dynamisch. Je kan dus een variabele verschillende soorten data toewijzen binnen dezelfde code.

Hoisting

Nu je weet hoe het aanmaken van variabelen in JavaScript werkt, kunnen we kijken naar hoe JavaScript omgaat met de locatie van dit aanmaken. De algemeen geaccepteerde gewoonte is dat je variabelen voor of tijdens het definiëren aanmaakt. Er zijn ook programmeertalen die dit vereisen. Maar bij JavaScript kunnen variabelen ook pas aangemaakt worden nadat ze gedefinieerd of gebruikt worden. Dit wordt geregeld door een feature dat hoisting heet, waarbij JavaScript zelf al aanmaking helemaal naar boven in het huidige script of functie trekt. Alhoewel hoisting het programmeren makkelijker maakt, omdat je als programmeur alsnog een variabele aan kan maken, zonder dat je terug hoeft te scrollen, valt het achteraf aanmaken van variabelen niet onder  de beste gewoonten voor programmeren. Hoisting kan ook onverwachte problemen opleveren, met name omdat hoisting alleen wordt toegepast op het aanmaken. Wanneer een variabele wordt aangemaakt en geïnitialiseerd binnen één statement, dan zal hoisting de declaratie naar boven trekken, waardoor de variabele een ongedefinieerde waarde krijgt. Daarom zal het gebruik van de variabele voor het echte statement ervan uitgaan dat de variabele ongedefinieerd is. Dit voorbeeld laat zien hoe hoisting kan werken:

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

console.log(variable_1 + " " + variable_2); //

var variable_2 = "2021" // declare and initialize a string variable called variable2

Alhoewel hoisting ervoor zorgt dat het aanmaken van variable_2 nu bovenaan het block gebeurt, wordt het toewijzen van de waarde niet verplaatst. Deze logica is vergelijkbaar met de volgende syntax:

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

var variable_2;

console.log(variable1 + " " + variable2); //

variable_2 = "2021" // assign string value to variable2

In beide gevallen zal de waarde “Thank goodness it’s 2021” niet in de output te vinden zijn. We raden je dus aan om gewoon de best practices te volgen, en variabelen aan het begin aan te maken, om problemen te voorkomen en overzichtelijke code te maken.

Objecten

JavaScript is gebaseerd op het concept van objecten. Objecten zijn containers met bijbehorende eigenschappen, methods, of beide. Een eenvoudig voorbeeld. Stel dat je een object hebt met de naam “country”. De eigenschappen zijn de naam, continent, hoofdstad en bevolking. In JavaScript kan je dit object op verschillende manieren maken. Allereerst kan je de route van de object literal of object initializer kiezen:

var country = {

    name:"France",

    continent:"Europe",

    capital:"Paris",

    population:62250000;

}

Je kan ook een object aanmaken en de eigenschappen toewijzen:

var country = new Object();

country.name = "France";

country.continent = "Europe";

country.capital = "Paris";

country.population = 62250000;

Let op dat je hierbij naar de eigenschap van het object refereert, via de syntax object.property. Als laatste kan je ook een constructor functie gebruiken om objecten aan te maken:

function country(name, continent, capital, population) {

    country.name = name;

    country.continent = continent;

    country.capital = capital;

    country.population = population;

}

Je kan dan een instance van het object maken, namelijk zo:

france = new country("France","Europe","Paris",62250000)

De eigenschappen van een object kunnen variabelen en functies zijn. Zoals hieronder besproken, heet de eigenschap van een object een method als het een functie is.

Objecten en classes

Kort gezegd is een class een algemene template voor structuren van een object. Classes gebruiken de constructor om objecten te omschrijven.

class country {

    Constructor (name,continent,capital,population) {

        country.name = name;

        country.continent = continent;

        country.capital = capital;

        country.population = population;

    }

}

Net als bij objecten kunnen classes ook methods hebben.

Werken met constanten en variabelen

Net als met andere talen, heeft JavaScript diverse soorten operators die gebruikt kunnen worden met variabelen en functies, die meestal direct te herkennen zijn:

• Operators voor toewijzing (=, +=, -=, *=, /=, %=)
• Operators voor vergelijkingen(==, ===, !=, !==, >, >=, <, <=)
• Bitwise en logische operators (zie onder)
• Rekenkundige operators (+, -, *, /, %, ++, --)
• Speciale operators

Er zijn een aantal operators die minder bekend zijn voor beginnende programmeurs, zoals de operators voor gelijk en niet gelijk. === vergelijkt of twee waarden dezelfde waarde en type hebben (en dus identiek zijn). !== vergelijkt of de twee juist niet gelijk zijn. Kijk maar eens naar dit voorbeeld:

var variable_1 = 5; // declare variable_1 and assign numeric value 5

var variable_2 = "5"; // declare variable_2 and assign string value "5"

console.log(variable_1 === variable_2);

console.log(variable_1 !== variable_2);

De output van dit stukje code is:

FALSE
TRUE

Het is ook belangrijk om het verschil te zien tussen = (toewijzing) en == (vergelijking). Hierbij bepaalt = de waarde voor een variabele, terwijl == kijkt of twee waarden gelijk zijn, zoals of een variabele een bepaalde waarde heeft. Je zou geen = operators moeten gebruiken in voorwaardelijke statements (zoals een IF statement) om twee waarden met elkaar te vergelijken.

Bitwise en logische operators

JavaScript ondersteunt de AND (&), OR (|), NOT (~), en XOR (^) operations. In JavaScript worden dit bitwise operators genoemd. Bitwise operators zetten de bijbehorende waarden om in 32-bits binaire weergaven voordat de vergelijking wordt uitgevoerd (zo wordt 20 bijvoorbeeld omgezet naar 10100). Deze bewerkingen worden bitwise genoemd, omdat ze de omgezette operands vergelijken per bit, en vervolgens een 32-bits binair resultaat terugsturen dat omgezet wordt naar een integer.

Bijvoorbeeld:

var variable_1 = 20;

var variable_2 = 50;

console.log(variable_1 | variable_2) // display the result of variable_1 OR variable_2

Convert operands to binary:

20 = 010100

50 = 110010

Een OR bewerking stuurt TRUE (1) terug wanneer één van de bits 1 is, waarbij de vergelijkswaarde dus 110110 of 53 is. In JavaScript slaat de term logische operator op bewerkingen waarbij de operands alleen maar de Booleaanse waarden 0 of 1 kunnen hebben. De JavaScript logische operators zijn && (logische AND), || (logische OR), en ! (logische NOT).

var variable_1;

var variable_2;

variable _1 = (6 > 5); // sets variable_1 to true or 1

variable_2 = (7 <= 6); // sets variable_2 to false or 0

Console.log(variable_1 && variable_2); // displays 0

Functies en methods

Zie functies maar gerust als de werkpaarden van JavaScript. Het zijn blokken code die specifieke taken uitvoeren. Als je bekend bent met de procedures en subroutines in andere programmeertalen, zul je functies meteen herkennen. Functies worden gedefinieerd met de volgende syntax:

function function_name(parameter list) {

    // tasks to be performed

}

Het definiëren van een functie is nog maar de eerste stap, je moet functies daarna nog aanroepen via () in de code:

$()

De $() functie is een afkorting voor de getElementByID method, die het ID van een specifiek element in de HTML DOM terugstuurt. Het wordt veel gebruikt voor het manipuleren van elementen in een document. Met $() kan je korter en sneller JavaScript code schrijven. Traditionele manier:

document.getElementByID("element_id")

$() method:

$("element_id")

Functies en methods

Functies voeren bepaalde taken uit en methods zijn eigenschappen van objecten die een functionele definitie hebben. De syntax voor het aanroepen van methods is object.function(). Functies zijn helemaal zelfstandig en methods horen bij objecten. In bovenstaand voorbeeld hoort de method document.getElementByID("element_id") bij een object (document) en een eigenschap van dat object (getElementbyID()). Er zijn twee soorten methods in JavaScript:

• Instance methods
• Static methods

Instance methods kunnen de eigenschappen van een object openen en veranderen. Instance methods kunnen ook een andere instance method of static method aanroepen. Static methods daarentegen bevatten logica die zich bezig houdt met een class, in plaats van de instance van een class. Om een static method te maken, gebruik je het woord static vóór de definitie. Static methods hebben alleen toegang tot statische velden en niet tot instance velden.

Promises in JavaScript

Een promise is een object dat een resultaat in de toekomst produceert. In de terminologie van JavaScript worden promises (beloften) ook wel producerende en consumerende code genoemd. Functies kunnen een niet-gedefinieerde en significante hoeveelheid tijd nemen tot de afronding. Consumerende code wacht op de resultaten van asynchroon producerende code voordat de bijbehorende functies uitgevoerd worden. Promises definiëren de relatie tussen producerende en consumerende code. Promises hebben drie mogelijke states: pending (wachtend), fulfilled (voltooid) of rejected (afgewezen). Bij de definitie van een promise worden er twee argumenten opgegeven: resolve of reject. Pending is de beginstatus van een promise, en betekent dat de promise nog niet voltooid én niet afgewezen is. Fulfilled of voltooid betekent dat de promise opgelost teruggestuurd is. Rejected of afgewezen houdt in dat de promise is teruggestuurd. Een promise die niet meer pending is wordt gezien als afgehandeld. Het maken van een promise ziet er zo uit:

var newPromise = new Promise(

    function(resolve, reject) {

        // condition to be tested

    }

)

Enclosures in JavaScript

Closures zijn een JavaScript feature waar programmeurs vaak mee worstelen, al zijn ze niet erg ingewikkeld. JavaScript closures zijn methodes voor het aanroepen van de operaties van geneste functies. Specifiek zorgen closures ervoor dat een binnenste functie de content van een parent functie kan openen, naast de globale variabele die sowieso toegankelijk zijn. Let hierbij op dat alhoewel de binnenste functie toegang heeft tot de variabele van de buitenste functie, het omgekeerde niet waar is. Om closures echt te begrijpen, is het belangrijk dat je de basis van het bereik (scope) begrijpt. Variabelen binnen een functie zijn normaliter alleen toegankelijk binnen die functie, en de scope wordt per call bepaald, niet in het algemeen voor de functie. Closures zorgen voor een oplossing voor het feit dat variabelen normaliter verdwijnen wanneer een functie afgerond is. Ze zorgen er voor dat variabelen toegankelijk blijven nadat een functie voltooid is. Kijk maar eens naar dit voorbeeld:

function outer_closure_function() {

    var outer_variable = "we want to keep the outer variable";

    var inner_closure_function = function() {

        inner_variable = "use closures because"

        console.log(inner_variable + " " + outer_variable);

    }

    return inner_closure_function;

}

var closure = outer_closure_function(); // returns a reference to inner_closure_function

closure(); // displays "use closures because we want to keep the outer variable"

Om te begrijpen hoe deze closure werkt, kijken we per regel naar deze code. Allereerst wordt de buitenste functie (outer_closure_function) gedefinieerd en wordt er een variabele aan gekoppeld. Daarna wordt de binnenste functie (inner_closure_function) gemaakt. Het is belangrijk dat je ziet dat de binnenste functie nog niet aangeroepen is, alleen gedefinieerd. Vervolgens komt er een statement met als resultaat de binnenste functie. Het stuurt dus niet het resultaat van de binnenste functie terug, maar de functie zelf. Wanneer je closure dan definieert als outer_closure_function, wordt niet de werkelijke waarde van de binnenste functie teruggestuurd. Het bevat alleen een referentie naar inner_closure_function. Alhoewel de buitenste functie in feite afgerond is na dit statement, en de outer_variable dus niet langer bestaat. Toch wordt dit bewaard in de referentie naar inner_closure_function. Wanneer je nu de closure aanroept in het laatste statement, zal het gewenste resultaat getoond worden. Om closures nog beter te begrijpen, kan je het beste zelf een aantal voorbeelden programmeren. Het zal even duren voor je het helemaal in de vingers hebt. Daarnaast helpt het herhaaldelijk updaten en testen je om een agile development mindset te krijgen. Maar naarmate je verder gaat, hou altijd de beveiligingsproblemen in je achterhoofd, want JavaScript kan kwetsbaar zijn voor serieuze dreigingen, zoals SQL en LDAP injections, en XSS aanvallen.

Samenvatting

Als je graag meer wil doen met je webpagina’s dan je met een standaard service als Wix of Square kan, dan kan je JavaScript leren. Het is een vrij eenvoudige introductie voor het programmeren van websites en toepassingen, waarmee je interactieve features kan toevoegen aan je website, zonder eerst jaren te moeten studeren. JavaScript is ook een uitstekende manier om je programmeervaardigheden te gaan ontwikkelen, mocht je graag verder willen gaan.