JavaScript les 1 — Variabelen en bewerkingen daarop

Ik zal niet te veel tijd besteden aan het beschrijven van alle soorten variabelen en bewerkingen — dat is nu nog niet nodig. Ons hoofddoel is om de basis­syn­taxis van JavaScript onder de knie te krijgen, zodat we daarna kunnen overstappen op jQuery. Later kun je je kennis van JavaScript verder verdiepen. Als je JavaScript grondig wilt leren en het gebruik van een framework je niet aanspreekt, dan kun je beter een uitgebreider leerboek over JavaScript zoeken. Maar als je websites wilt bouwen in Drupal en daarna jQuery wilt leren, dan zijn we op de juiste weg. Laten we beginnen.

In deze les bespreken we variabelen: waarom we ze nodig hebben en hoe we ermee werken.

Variabelen zijn een van de belangrijkste concepten in programmeren. Om programmeren goed te begrijpen, moet je weten wat een variabele is, hoe en waar ze wordt opgeslagen en wat ermee gebeurt tijdens de uitvoering van een programma. Een variabele is een waarde waarvan de inhoud verandert tijdens het uitvoeren van de code.

Variabelen zijn gegevens die in een programma worden verwerkt en een naam hebben. Gegevens worden opgeslagen en verwerkt in het geheugen van de computer — tijdens het uitvoeren van het programma in het RAM-geheugen, en bij afsluiting eventueel in permanent geheugen. Bij het maken van programma’s worden verschillende gegevenstypen gebruikt, oftewel variabelen van verschillende typen: getallen, tekens, tekst, booleaanse waarden, functies, datums enzovoort. Numerieke gegevens kunnen bijvoorbeeld geheel of met een fractie zijn. Afhankelijk van het type reserveert het programma een bepaald aantal geheugenplaatsen voor elke variabele. Deze geheugenplaatsen krijgen de naam van de variabele en bevatten de bijbehorende waarde. Ze blijven bestaan tot het programma is beëindigd of totdat de variabele een nieuwe waarde krijgt. De naam van de variabele blijft hetzelfde, maar de waarde kan veranderen. In JavaScript kan zowel de waarde als het gegevenstype van een variabele veranderen.

Nieuwe variabelen worden gedeclareerd (aangemaakt) met behulp van de operator var:

var x;

Deze instructie maakt een variabele x. We kunnen ook direct een waarde toekennen bij het aanmaken:

var x = 10;

Merk op dat elke instructie in JavaScript wordt afgesloten met een puntkomma (zoals in C++ en PHP). We gebruiken hier de toewijzingsoperator om de variabele x de waarde 10 te geven. De namen van variabelen moeten in Latijnse letters worden geschreven en mogen geen spaties bevatten, bijvoorbeeld:

var myname; – correct

var my name; – fout

Een variabelenaam mag niet met een cijfer of ander symbool beginnen, maar mag wel cijfers bevatten, bijvoorbeeld:

var name1; – correct

var name2; – correct

var test4me; – correct

var lesson2you; – correct

var 3money; – fout

Gegevenstypen (variabelen) in JavaScript

Voor nu is het voldoende om te weten over numerieke en string­typen. Later leren we over booleaanse waarden, arrays, objecten en andere typen. We zullen alle typen bespreken zodra ze nodig zijn.

Numerieke variabelen

De waarde van een numerieke variabele is een getal:

var y = 15;
alert(y);

Net als met gewone getallen kun je ermee optellen, vermenigvuldigen, delen en aftrekken:

// variabelen declareren
var x = 10;
var y = 5;
var z1, z2, z3, z4; // meerdere variabelen gescheiden door komma
// bewerkingen uitvoeren
z1 = x + y;
z2 = x * y;
z3 = x - y;
z4 = x / y;
// resultaten tonen
alert(z1);
alert(z2);
alert(z3);
alert(z4);

Stringvariabelen

Stringvariabelen bevatten tekst. Merk op dat tekst tussen aanhalingstekens moet staan:

var str = 'Hallo allemaal!';
alert(str);

Je kunt zowel enkele als dubbele aanhalingstekens gebruiken. Strings kunnen ook worden samengevoegd met het plusteken:

var str1 = 'Hallo';
var str2 = ', allemaal';
alert(str1 + str2 + '!');

In JavaScript kun je ook het gegevenstype van een variabele omzetten, bijvoorbeeld zo:

var str = '11'; // stringvariabele
var num1 = 2; // numerieke variabele
var num2; // numerieke variabele
var num3;
num2 = parseInt(str);
num3 = num1 + num2;
alert(num3); // zal 13 weergeven

Hier gebruiken we de functie parseInt() (over functies later meer) om een string naar een numerieke waarde om te zetten.