JavaScript: basisprincipes van programmeren

Deze pagina behandelt de belangrijkste onderwerpen van de leeruitkomst Software met JavaScript. Je leert de basis van variabelen, primitieve datatypes, operatoren, controlestructuren (if, loops, functions) en hoe je data manipuleert. Bij elk onderdeel staan korte voorbeelden en mini-oefeningen.

Werkomgeving

Je kunt alle voorbeelden rechtstreeks in de browser-console uitvoeren:

• Open een browser, druk op F12, ga naar Console, en plak de code.

Variabelen en toewijzing

In JavaScript maak je variabelen met let of const.

let leeftijd = 20;     // veranderbaar
const naam = "Alex";  // constant (niet her-toewijzen)

leeftijd = leeftijd + 1; // 21

Tip: gebruik const standaard, en let als je de variabele later wijzigt. Vermijd var (verouderde scoping).

Primitieve datatypes

• Numeriek: number (bevat zowel gehele als kommagetallen). JavaScript maakt geen onderscheid tussen int/float/double zoals sommige andere talen.
• Tekst: string (enkel- of dubbelquotes, of backticks voor template strings)
• Booleaans: boolean (true of false)
• Speciaal: null, undefined

// Numeriek
const prijs = 9.99;      // number
const aantal = 3;        // number

// Tekst
const product = "Mok";  // string
const beschrijving = `Artikel: ${product}, prijs: €${prijs}`; // template string

// Boolean
const opVoorraad = true; // boolean

// Speciaal
let korting;             // undefined (nog geen waarde)
const leeg = null;       // expliciet "geen waarde"

Mini-oefening:

• Maak variabelen voor voornaam, achternaam, geboortejaar en student (boolean). Schrijf een zin met een template string.

Operatoren

Aritmetische operatoren

+, -, *, /, % (modulo, rest), ** (machtsverheffing)

const x = 7;
const y = 3;
console.log(x + y);  // 10
console.log(x - y);  // 4
console.log(x * y);  // 21
console.log(x / y);  // 2.333...
console.log(x % y);  // 1 (rest)
console.log(2 ** 3); // 8

Let op met + en strings:

console.log("2" + 3); // "23" (string-concatenatie)
console.log(2 + 3);   // 5   (optelling)

Vergelijkingsoperatoren

==, !=, >, <, >=, <=, en de strikte ===, !==

Gebruik bij voorkeur de strikte varianten === en !== om type-coercion te voorkomen.

console.log(2 == "2");  // true  (coercion)
console.log(2 === "2"); // false (strikt)
console.log(5 > 3);      // true
console.log(5 <= 5);     // true

Logische operatoren

&& (EN), || (OF), ! (NIET)

const isVolwassen = 19 >= 18;    // true
const heeftID = false;
console.log(isVolwassen && heeftID); // false
console.log(isVolwassen || heeftID); // true
console.log(!heeftID);               // true

Mini-oefening:

• Schrijf een expressie die true is als score minstens 50 is én gehaald false is. Test met verschillende waardes.

Controlestructuren

If-statements

const leeftijd = 17;
if (leeftijd >= 18) {
  console.log("Toegang toegestaan");
} else {
  console.log("Toegang geweigerd");
}

Met meerdere takken:

const cijfer = 7.3;
if (cijfer >= 9) {
  console.log("uitmuntend");
} else if (cijfer >= 6) {
  console.log("voldoende");
} else {
  console.log("onvoldoende");
}

Loops

For-loop (aantal herhalingen bekend):

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

While-loop (zolang een voorwaarde waar is):

let poging = 0;
while (poging < 3) {
  console.log("Poging", poging);
  poging++;
}

Break en continue:

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) continue; // sla even getallen over
  if (i > 7) break;           // stop bij 9 (maar we komen niet zo ver wegens continue)
  console.log(i);             // 1,3,5,7
}

Mini-oefening:

• Schrijf een loop die de som van de getallen 1 t/m 100 uitrekent. Tip: begin met let som = 0.

Functions

Functies groeperen logica, nemen invoer (parameters) en kunnen een waarde teruggeven.

Declaratie en aanroep:

function som(a, b) {
  return a + b;
}

const uitkomst = som(3, 4); // 7

Pijlfuncties (compacte syntax):

const kwadraat = x => x * x;
console.log(kwadraat(5)); // 25

Standaardwaarden en parameter-validatie:

function begroet(naam = "gast") {
  if (typeof naam !== "string") {
    throw new Error("naam moet een string zijn");
  }
  return `Hallo, ${naam}!`;
}

console.log(begroet());       // Hallo, gast!
console.log(begroet("Mila")); // Hallo, Mila!

Mini-oefening:

• Schrijf een functie gemiddelde(getallen) die het gemiddelde van een array numbers teruggeeft. Test met [10, 8, 6].

Data manipuleren met operatoren

let saldo = 100;
const storting = 25;
saldo = saldo + storting; // of: saldo += storting
const btw = 0.21;
const prijsEx = 10;
const prijsInc = prijsEx * (1 + btw); // 12.1

Veel voorkomende toekenningsoperatoren: +=, -=, *=, /=, ++, --.

Data manipuleren met loops

Arrays doorlopen en verwerken:

const cijfers = [6, 7.5, 8, 5.5];
let totaal = 0;
for (let i = 0; i < cijfers.length; i++) {
  totaal += cijfers[i];
}
const gemiddelde = totaal / cijfers.length; // 6.75

Met moderne array-methodes (alternatief):

const cijfers = [6, 7.5, 8, 5.5];
const gemiddelde = cijfers.reduce((acc, c) => acc + c, 0) / cijfers.length;

Filteren en transformeren:

const getallen = [1, 2, 3, 4, 5, 6];
const even = getallen.filter(n => n % 2 === 0);       // [2,4,6]
const verdubbeld = getallen.map(n => n * 2);          // [2,4,6,8,10,12]

Mini-oefening:

• Geef uit een array scores alleen de geslaagde scores (>= 5.5) terug en bereken het gemiddelde van die selectie.

Data manipuleren met functions

Het combineren van functies maakt code herbruikbaar en testbaar.

function isGeslaagd(score) {
  return score >= 5.5;
}

function gemiddelde(scores) {
  if (scores.length === 0) return 0;
  let som = 0;
  for (const s of scores) som += s;
  return som / scores.length;
}

function gemiddeldeGeslaagden(scores) {
  const geslaagd = scores.filter(isGeslaagd);
  return gemiddelde(geslaagd);
}

console.log(gemiddeldeGeslaagden([4, 6, 7, 3, 8])); // 7

Samenvattende checklist (leerdoelen)

• Primitieve datatypes: number, string, boolean, (null/undefined)
• Operatoren: aritmetisch, vergelijkingen (bij voorkeur ===/!==), logisch
• Controlestructuren: if, for, while
• Variabelen: let/const, toewijzing en her-toewijzing
• Functions: declaratie, pijlfuncties, parameters, return
• Data manipuleren: met operatoren, loops en functies op arrays

Extra oefenopgaven

1) Schrijf een functie max(a, b) die het grootste getal teruggeeft (zonder Math.max).

2) Schrijf een functie aantalKlinkers(tekst) die het aantal klinkers telt in een string.

3) Gegeven const prijzen = [9.99, 14.5, 3.0]: bereken de totaalprijs inclusief 21% btw.

4) Schrijf een functie isPalindroom(woord) die true geeft als het woord voor- en achteruit gelijk is.

5) Schrijf een loop die de kleinste waarde in een numerieke array vindt.

Tip: werk test-gedreven. Bedenk voorbeelden, voer de code uit, check de output, en verbeter stap voor stap.