JavaScript deel 1 – Variabelen en if-statements

Waarom JavaScript?

JavaScript bestaat al een tijdje, zelfs langer dan CSS. De taal bestaat vooral om interactiviteit toe te voegen aan je webpagina: HTML is voor inhoud, CSS voor opmaak, en JS voor vrijwel al het andere.

JavaScript hoort bij CSS en HTML. Je zult zien dat een aantal concepten die we al kennen, zoals id’s, stijl en elementen, ook weer terug komen.

In het volgende hoofdstuk gaan we aan de slag met hoe je variabelen inzet om je pagina dynamisch te maken. Maar we gaan nu eerst wat leren over een nieuw begrip: variabelen.

Variabelen

Als je op basaal niveau zou kijken naar wat computercode is, dan heeft dat eigenlijk bijna altijd iets te maken met het geheugen van de computer. Iets wordt uit het geheugen gehaald, daar wordt iets mee berekend, de uitkomst wordt weer in het geheugen opgeslagen, dat wordt op het scherm getoond, enzovoorts. Eigenlijk is (kort door de bocht) dát wat een computer de hele tijd doet.

Als we coderen maken we vaak plekjes in het geheugen om iets te bewaren: een getal, een stuk tekst, een wachtwoord, een afbeelding… De meest simpele vorm van zo’n ‘gereserveerd plekje in het geheugen’ noemen we een variabele. Een variabele is dus eigenlijk niets anders dan een plek om iets op te slaan.

Bijvoorbeeld:

let mijnVariabele;

Betekent: ik maak een variabele aan met let en ik noem die variabele mijnVariabele. Ik sla daar nu nog niks in op, dat kan ik later doen.

Je kunt ook tegelijk een variabele aanmaken en er iets in opslaan:

let mijnVariabele = 1234;

is JavaScript-taal voor het volgende: ik maak een variabele aan met let, ik noem die variabele mijnVariabele, en ik stop daar het getal 1234 in. (In JavaScript, net als veel andere talen, eindig je je statements met een puntkomma).

In andere voorbeelden zul je misschien var of const zien om een variabele aan te maken. var is de oude manier, die gebruiken wij niet meer. Het verschil tussen const en let is voor een beginner niet belangrijk, dus leer jezelf voorlopig maar let aan.

Een ander voorbeeld:

let mijnTekst = 'Hello World!';

Ook hier zie je weer dat we het woordje let gebruiken om aan te geven dat we een variabele gaan maken, vervolgens mogen we de naam van die variabele zelf verzinnen. Met het =-teken geven we aan wat we voorlopig in die variabele gaan stoppen. In dit geval is het tekst, daar moeten enkele of dubbele aanhalingstekens omheen.

Een variabele is, zoals de naam al aangeeft, variabel. Nadat je een variabele hebt gemaakt kun je er steeds weer iets anders in stoppen:

let mijnVariabele = 1234;
mijnVariabele = 2345;

In dit voorbeeld zie je dat we een variabele aanmaken, en we stoppen er als eerst 1234 in. In de tweede regel staat geen let, want de variabele is immers al gemaakt. Maar we stoppen er een nieuwe waarde 2345 in, de oorspronkelijke waarde gaat daarmee verloren.

Nadat je een getal hebt opgeslagen in een variabele staat de naam van de variabele voor JavaScript eigenlijk gelijk aan de waarde die er in zit. Als je naar de volgende twee voorbeelden kijkt, dan zal er in beide gevallen aan het eind het getal 5 in variabele c zitten:

let c = 3 + 2;

let a = 3;
let b = 2;
let c = a + b;

Je mag dus rekenen met variabelen alsof het getallen zijn. Tenminste, als er een getal in de variabele opgeslagen is.

Om te rekenen mag je alle reken-tekens gebruiken die je gewend bent, alleen voor vermenigvuldigen gebruiken we een * en voor delen een /.

let w = a + b;
let x = a - b;
let y = a * b;
let z = a / b;

Net als bij wiskunde kun je ook haakjes gebruiken om aan te geven dat iets eerst uitgerekend moet worden:

let x = (a + b) * c;

Tot nu toe hebben we steeds een nieuwe variabele aangemaakt om het resultaat op te slaan. Maar je kunt ook rekenen en de uitkomst opslaan in een bestaande variabele:

let teller = 1;
teller = teller + 1;

Omdat in de tweede regel de waarde uit teller plus 1 wordt opgeslagen, is teller hierna 2.

Voordat je verder gaat kun je de kennis tot nu toe testen met deze
Javascript Quiz

Variabelen met tekst

let mijnTekst = 'Hello World!';

Je hebt dit voorbeeld al eerder gezien. Als je letterlijke tekst opslaat in een variabele, moeten er aanhalingstekens omheen.

Wil je twee stukken tekst aan elkaar plakken? Ook dan kun je het +-teken gebruiken:

let bericht = 'Hallo ';
let naam = 'Piet';
let mijnTekst = bericht + naam;

Wat denk je dat er in variabele c opgeslagen is na deze code?

let a = '1';
let b = 1;
let c = a + b;

if-statements

We hebben besproken dat variabelen een belangrijk ingrediënt zijn van elk programma. Een ander, minstens net zo belangrijk ingrediënt, zijn if-statements. Hiermee kun je eigenlijk zeggen: als dít waar is, doe dan dát.

if (kleur == 'rood') {
  reactie = 'mooie kleur!';
}

We kijken even goed naar bovenstaande code. Deze code gaat er van uit dat er al eerder twee variabelen zijn gemaakt, kleur en reactie. Je ziet dat de if-statement bestaat uit twee delen: het eerste deel is het statement zelf waar aangegeven wordt wát waar moet zijn, in dit geval of kleur gelijk is aan rood. Daarna zie je een codeblok aangegeven met { en } waar aangegeven wordt wat er dan moet gebeuren.

Let op: Als je wil vergelijken of twee dingen gelijk zijn, dan gebruik je ==. Als je wilt zeggen dat het gelijk moet wórden, dan gebruik je één =-teken.

Naast == voor ‘is gelijk aan’, kun je ook gebruik maken van ‘groter dan’, ‘kleiner dan’, of ‘is niet gelijk aan’:

// Kleiner dan
if (leeftijd < 18) {
    drank = 'nee';
}

// Groter dan
if (prijsA > prijsB) {
    vergelijking = 'A is duurder dan B';
}

// Niet gelijk aan
if (gebruiker != 'Sinterklaas') {
    antwoord = 'Je bent Sinterklaas niet!'';
}

Soms wil je in een if-statement twee dingen controleren, die allebei waar moeten zijn, of waarbij één van de twee dingen waar moet zijn:

// EN-EN
if (uur > 12 && uur < 18) {
    bericht = 'Goedemiddag!';
}

// OF-OF
if (fruit == 'appel' || fruit == 'peer') {
    antwoord = 'het is een appel of een peer';
}

else

En wat moet er in het if-statement gebeuren als het gevraagde níet waar is? Dan gebruiken we een else.

if (tijd == 'dag') {
    lamp = 'uit';
} else {
    lamp = 'aan';
}

Dit kun je ook oneindig uitbreiden met else if:

if (geslacht == 'm') {
    voornaamwoord = 'hij';
} else if (geslacht == 'v') {
    voornaamwoord = 'zij';
} else {
    voornaamwoord = 'die';
}

Voordat je verder gaat kun je de kennis tot nu toe testen met deze
Javascript Quiz