In deze tutorial gaan we het hebben over variabelen binnen JavaScript. Ik ga er in deze tutorial er vanuit dat je in ieder geval weet wat HTML en JavaScript is en waar ze gebruikt voor worden. Mocht je nog niet weten wat HTML of JavaScript is, bekijk dit topic eerst.
Browser console
Laten we beginnen met de console in de browser, dit is een element dat veel terug zal komen in deze tutorial en belangrijk is om te kennen. Elke browser (zelfs Internet Explorer!) heeft een ingebouwd scherm waar informatie naartoe kan worden gestuurd via JavaScript. Ook komen hier de foutmeldingen van JavaScript in te staan, dus werkt je code niet? Check de console! Sommige browsers gebruiken de console ook om waarschuwingen te geven over HTML elementen op de webpagina.
Informatie naar de console sturen doe je met de functie console.log(). Deze functie is standaard geïmplementeerd in elke browser. Je kan tekst meesturen in de functie, maar ook variabelen met verschillende type inhoud. Elke keer wanneer je de webpagina herlaad zal de console leeg worden gemaakt.
De console gebruik je vooral om stukjes code te debuggen, zo kun je zien of je code op de juiste plek komt, of een variabele de juiste waarde heeft.
console.log("Deze tekst vind je in de console.");
In veel browsers open je de console door de F12 toets in te drukken. Een andere manier om de console te openen is door naar de browser menu te gaan, Meer tools te selecteren en voor Developers tools te kiezen.
TIP: Je kan ook gebruik maken van console.error(), console.warn() en console.info(), deze console logs krijgen dan een bijbehorende aangepaste opmaak in de console:
JavaScript toevoegen aan een webpagina
JavaScript toevoegen aan een webpagina doe je met <script> tags in HTML. Ook kan je JavaScript opslaan in een .js bestand en inladen. In een script tag op de webpagina kun je zoveel JavaScript kwijt als nodig is. Hier is geen limiet voor.
Het is gebruikelijk om JavaScript altijd onderin de <body> te plaatsen. Hierdoor weet je zeker wanneer je via JavaScript afhankelijk bent van HTML elementen dat deze gerenderd zijn door de browser en de JavaScript het renderen van de webpagina niet blokkeert.
JavaScript blok
JavaScript plaats je in de <script> tags. Zie het onderstaande voorbeeld
<script>
// Hier kun je JavaScript plaatsen
</script>
Hieronder zie je een voorbeeld van een JavaScript blok in een webpagina:
<!DOCTYPE html>
<html>
<head>
<title>Voorbeeld pagina met een JavaScript blok</title>
</head>
<body>
<h1>Pagina titel</h1>
<p>Pagina inhoud</p>
<script>
// JavaScript blok
console.log("Deze tekst vind je in de console.");
</script>
</body>
</html>
JavaScript bestanden importeren
Het nadeel van een JavaScript blok is wanneer je op meerdere pagina's hetzelfde stuk script nodig hebt, je dit moet kopiëren en plakken op elk HTML bestand. Bij een wijziging van je script moet je alle codeblokken bewerken in alle bestanden.
Om dit te voorkomen kun je een .js bestand aanmaken, bijvoorbeeld index.js. In dit bestand kun je alleen JavaScript code kwijt.
De inhoud van index.js is is dan:
// JavaScript code bestand
console.log("Deze tekst vind je in de console.");
Een JavaScript bestand laad je ook in met een script tag, het grote verschil is dat hier geen code in staat maar een src attribute heeft die verwijst naar de plek van het bestand op de webserver: <script src="/pad/naar/bestand.js"></script>
Hieronder zie je een voorbeeld hoe je een JavaScript bestand importeer in een webpagina:
<!DOCTYPE html>
<html>
<head>
<title>Voorbeeld pagina met een JavaScript bestand</title>
</head>
<body>
<h1>Pagina titel</h1>
<p>Pagina inhoud</p>
<script src="/index.js"></script>
</body>
</html>
TIP: Wanneer je gebruik maakt van JavaScript bestanden, worden deze gecached door de browser na de eerste pagina bezoek. Hierdoor laden de pagina's bij een volgend bezoek (of het navigeren) sneller in.
Commentaar
In JavaScript kun je commentaar (comments) toevoegen aan je code, zo kun je commentaar plaatsen bij stukken code over wat het doet. Deze stukjes tekst worden niet uitgelezen door JavaScript en is puur bedoeld voor developers.
Commentaar kun je gebruiken om stukjes code tijdelijk commenten, Zo schakel je deze stukken uit en hoef je code niet altijd te verwijderen. Hier kan je gebruik van maken wanneer iets niet werkt of wanneer je aan het debuggen bent.
In JavaScript heb je verschillende manieren om commentaar te plaatsen bij code. Deze zijn allemaal te vinden in het onderstaande codeblok:
// Een lijn commentaar
/* Een lijn commentaar */
/*
* Meerdere lijnen commentaar
* Editors plaatsen vaak automatisch een asterisk (sterretje) bij meerdere enters
*/
/*
Een asterisk is niet verplicht
JavaScript slaat alles over dat tussen de slash en binnenste asterisk staat.
*/
TIP: Schrijf boven code die je schrijft commentaar over wat het doet! Zo onthoud je waar de functie voor dient wanneer je op een later tijdstip terugkomt.
Variabelen
Zoals elke scripttaal krijg je te maken met variabelen. Ook JavaScript heeft uiteraard variabelen waar je gebruik van kan maken. In JavaScript beginnen alle variabelen met var, const of let. Al deze vormen hebben een andere werking. var is de 'oude' variant, in een grote JavaScript update van 2015 werden de const en let types geïntroduceerd.
Omdat let een vervanging is van var maken we in deze tutorial alleen hier gebruik van.
Variabelen in JavaScript moeten altijd geïnitialiseerd worden met een van deze drie voorvoegsels. Een normale variabele definieer je in ieder geval op de volgende manier:
let example = "Dit is een variabele!";
console.log(example);
Wanneer je deze functie uitvoert en in de console kijkt, dan zie je Dit is een variabele! verschijnen.
Wanneer variabelen met var of let beginnen kun je deze op een later moment in je code overschrijven. Dit kun je op de volgende manier doen:
let example = "Dit is een variabele!";
example = "Overschreven!";
console.log(example);
De inhoud van de example variabele is nu Overschreven!, dit is ook wat je in de console ziet verschijnen.
Niet-overschrijfbare variabelen
Soms wil je een variabele definiëren waarvan je weet dat je deze op een later moment in je code niet wilt overschrijven of niet opnieuw mag definiëren. In dit geval maak je gebruik van const. const is een afkorting van constante, wat in gewoonweg inhoud dat deze variabele 'constant' dezelfde inhoud heeft.
const example = "Dit is een variabele!";
console.log(example);
Net zoals bij een let of var is bij const de inhoud Dit is een variabele!. Het enige verschil is dus dat je de inhoud niet kan veranderen. Mocht je eens willen uitproberen wat er gebeurt wanneer je dit toch doet, probeer de volgende code uit:
const example = "Dit is een variabele!";
example = "Overschreven!";
console.log(example);
De bovenstaande code zal resulteren in de volgende foutmelding in de console:
Uncaught TypeError: Assignment to constant variable.
Type inhoud van variabelen
Variabelen kunnen verschillende type inhoud hebben, het is belangrijk om deze te kennen. De type inhoud van een variabele kan in JavaScript na initialisatie altijd worden veranderd (tenzij de variabele gedefinieerd is als const).
Anders dan veel andere programmeertalen zoals C# of C++ kan je in JavaScript niet de type van de variabele vooraf definiëren. Je bent vrij om deze op een later moment van type te veranderen (maar dat is niet aan te bevelen omdat je dan inconsistent werkt).
Hieronder een lijst van de type variabelen die we gebruiken in deze tutorial:
string: Een string is van type tekst dat gedefinieerd wordt met quotes (") er omheen. Hierboven heb je al verschillende voorbeelden gezien hoe een string gebruikt is. Zo defineer je een string:
let variabele = "De inhoud van deze variabele is van het type string";
number: Het type number is een nummer. Je gebruikt een nummer zonder quotes, wanneer je dit wel doet ziet JavaScript dit als een string en kan je de inhoud niet gebruiken voor berekeningen.
let variabele_number = 5;
boolean: Het type boolean kan twee waarden hebben, dit kan true of false zijn. Deze gebruik je vaak om de status ergens van te onthouden. Ook hier maak je geen gebruik van quotes. Wanneer je dit wel doet zal dit gezien worden als een string.
let variabele_boolean_true = true;
Ook heb je de type object, array en function, hier komen we in een volgende tutorial op terug.
Controleren welk type een variabele is.
Ben je nieuwsgierig van welk type een bepaalde variabele is, dan kun je gebruik maken van de typeof functie in JavaScript. Deze kun je als volgt gebruiken:
console.log(typeof "tekst"); // Resultaat: string
console.log(typeof 1); // Resultaat: number
console.log(typeof { object: "text" }); // Resultaat: object
console.log(typeof []); // Resultaat: object
TIP: Gebruik typeof om te debuggen
Concatenatie
Concatenatie (ook wel 'concateneren' genoemd) is een term die bedoeld is om de inhoud van variabelen samen te voegen tot een variabele (vaak tekst).
In JavaScript gebruik je de + om twee strings bij elkaar te plaatsen. Bekijk het onderstaande als voorbeeld:
let samenvoeging = "Stuk tekst: " + "Nog een stuk tekst";
console.log(samenvoeging); // Resultaat: "Stuk tekst: Nog een stuk tekst"
Je kan concatenatie ook gebruiken om variabelen samen te voegen:
let variabele = "Nog een stuk tekst";
let samenvoeging = "Stuk tekst: " + variabele;
console.log(samenvoeging); // Resultaat: "Stuk tekst: Nog een stuk tekst"
Literals
Literals zijn een stuk geavanceerder, maar wel belangrijk om te benoemen.
De volledige term is template literals en deze zijn van het type string. Je plaatst tekst tussen twee accenten ``` in plaats van quotes ". Variabelen kun je dan definiëren door een dollarteken ($) gevolgd door haakjes ({}) om de variabele te zetten: ${variabeleNaam}. De inhoud van de variabele komt dan op deze plek te staan.
Je bent in deze strings een stuk vrijer en je hoeft je geen zorgen te maken dat je een spatie vergeet.
Voorbeeld:
let naam = "Jasper";
let samenvoeging = `Hallo ${naam}, welkom!`;
console.log(samenvoeging); // Resultaat: "Hallo Jasper, welkom!"
Rekenen met variabelen
Je kan variabelen ook gebruiken om een berekening te maken. Wanneer je wilt rekenen met variabelen, moet de inhoud van een variabele van het type number zijn. Wanneer een variabele per ongeluk een string is, zal er een NaN waarde uitkomen, dat staat voor Not a Number.
Je gebruikt de volgende operators om te rekenen in JavaScript:
+ = Optellen- = Aftrekken/ = Deling* = Vermenigvuldigen% = Modulo
Hieronder een voorbeeld van een simpele optelsom:
let nummer1 = 5;
let nummer2 = 25;
let resultaat = nummer1 + nummer2;
console.log(resultaat); // Resultaat: 30
Heb je een nummer-variabele die oorspronkelijk een string is? Dan kun je gebruik maken van de Number() functie om de variabele om te zetten naar een number.
let nummer1 = "5";
let nummer2 = "25";
let resultaat = Number(nummer1) + Number(nummer2);
console.log(resultaat); // Resultaat: 30
Concateneren
Wanneer de inhoud van de strings geen number is, zal JavaScript deze twee variabelen concateneren en is het resultaat 525.
let nummer1 = "5";
let nummer2 = "25";
let resultaat = nummer1 + nummer2;
console.log(resultaat); // Resultaat: 525
Meerdere rekensommen
In JavaScript kun je ook ronde haakjes gebruiken om sub-rekensommen te maken.
let nummer1 = 20;
let nummer2 = 5;
let nummer3 = 2.5;
// De berekening tussen de haakjes wordt als eerste uitgevoerd, daarna wordt de uitkomst vermenigvuldigd en wordt er 2 bij opgeteld
let berekening = (nummer1 / nummer2) * nummer3 + 2;
console.log(berekening); // Resultaat: 12
Een NaN
Wanneer je een fout hebt in je berekening, dan zal JavaScript een NaN als resultaat geven. Een NaN zal vaak voorkomen wanneer je een string probeert te transformeren naar een nummer.
Voorbeeld:
// Slecht voorbeeld
console.log(Number("dit is geen nummer")); // Resultaat: NaN
// Goed voorbeeld
console.log(Number("5")); // Resultaat: 5
In JavaScript bestaat de functie isNaN, deze kun je gebruiken om te valideren dat een variable (bijvoorbeeld een string) geen nummer is.
// Hier testen we of de string "test" geen nummer is
console.log(isNaN("test")); // Resultaat: true
// Hier testen we of de string "5" geen nummer is
console.log(isNaN("5")); // Resultaat: false
Einde tutorial
Je bent aangekomen bij het einde van deze tutorial over variabelen, commentaar en de console.
Heb je na afloop van deze tutorial een vraag? Open een topic in Vraag & Antwoorden en wij helpen je! 😎
Deel 2 komt binnenkort, deze tutorial zal gaan over functies & objecten
