Waarden en operatoren

Tot nu toe gebruikte je getallen en teksten zonder erbij stil te staan wat dat zijn. In deze les krijgen ze een naam, en los je meteen het raadsel van '16' + 4 uit de vorige les op.

De drie basis-datatypes

Type	Wat het is	Voorbeeld
number	Een getal	42, 3.14, 0, -7
string	Tekst tussen aanhalingstekens	'hallo', "wereld"
boolean	Waar of onwaar	true, false

const leeftijd = 16;       // number
const naam = 'Lisa';       // string
const isIngelogd = true;   // boolean

Met typeof vraag je van elke waarde het type op: console.log(typeof leeftijd) logt number.

Rekenen met numbers

const a = 10 + 5;   // 15  (optellen)
const b = 10 - 5;   // 5   (aftrekken)
const c = 10 * 5;   // 50  (vermenigvuldigen)
const d = 10 / 5;   // 2   (delen)
const e = 17 % 5;   // 2   (modulo: de rest bij delen)

Die laatste, %, geeft de rest die overblijft bij delen: 17 gedeeld door 5 is 3, en er blijft 2 over.

Plakken van strings

Bij strings doet + iets anders: hij plakt ze aan elkaar.

const begroeting = 'Hallo, ' + 'wereld.';           // 'Hallo, wereld.'
const leeftijd = 16;
const zin = 'Ik ben ' + leeftijd + ' jaar.';        // 'Ik ben 16 jaar.'

Daarmee is het raadsel uit prompt en alert opgelost: alles wat uit prompt() komt is een string, dus '16' + 4 plakt en wordt '164'.

Van string naar number: Number()

Wil je met invoer rekenen, zet hem dan eerst om:

const leeftijd = Number(prompt('Hoe oud ben je?'));
console.log(leeftijd + 4);   // bij invoer 16: 20

Number('16') geeft het getal 16. Vanaf nu is dit het vaste recept voor elke som met invoer.

Verdieping: template literals

Veel plussen worden onoverzichtelijk. Met een template literal (tussen backticks) zet je variabelen direct in de tekst via ${...}:

const leeftijd = 16;
const zin = `Ik ben ${leeftijd} jaar.`;

Berekeningen mogen ook: `Volgend jaar: ${leeftijd + 1}`. De backtick zit vaak linksboven op je toetsenbord, onder Esc. In deze lessen blijven we bij +, maar je komt template literals veel tegen in andermans code.

Predict

Wat denk je dat dit toont op de pagina?

const prijs = 5;
const aantal = 3;
const totaal = prijs * aantal;
document.getElementById('uitvoer').textContent = 'Totaal: ' + totaal + ' euro';

Wat komt er in de <p> te staan?

Totaal: 15 euro. Eerst rekent JavaScript prijs * aantal uit (15, een number). Daarna plakt + die uitkomst tussen de twee strings. Het resultaat is één string voor de <p>.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Zet aanhalingstekens om de 5: const prijs = '5';. Wat verandert er aan de uitkomst en aan de typeof-logs?
   Antwoord

   De uitkomst blijft Totaal: 15 euro. De console logt nu Prijs is een string, maar nog steeds Totaal is een number: * kan niet plakken, dus JavaScript maakt van '5' een getal en rekent.
2. Verander prijs * aantal in prijs + aantal, eerst met en daarna zonder de aanhalingstekens om de 5. Hoe verklaar je het verschil?
   Antwoord

   Met aanhalingstekens staat er Totaal: 53 euro en is het totaal een string: + plakt '5' en 3 aan elkaar. Zonder aanhalingstekens staat er Totaal: 8 euro, want met twee numbers telt + op.
3. Zet console.log(17 % 5); en console.log(16 % 2); onderaan script.js en klik op Run. Wat logt de console?
   Antwoord

   Eerst 2, dan 0, meteen bij het laden. 17 gedeeld door 5 is 3 met rest 2, en 16 is precies deelbaar door 2, dus daar is de rest 0.

Editor laden...

Opdracht 1: Zakgeld

Pas de startcode aan tot een zakgeldrekenaar: sla een weekbedrag en een aantal weken op, en toon "In (aantal) weken spaar je (totaal) euro."

Editor laden...

Tip

Zelfde bouwplan als de startcode: twee const-variabelen, één vermenigvuldiging, één geplakte zin.

Antwoord

function bereken() {
  const perWeek = 4;
  const weken = 6;
  const totaal = perWeek * weken;
  document.getElementById('uitvoer').textContent =
    'In ' + weken + ' weken spaar je ' + totaal + ' euro.';
}

document.getElementById('knop').addEventListener('click', bereken);

Opdracht 2: Som-machine

Vraag de gebruiker met twee prompts om twee getallen en toon de som op de pagina. Zorg dat er echt gerekend wordt, niet geplakt.

Editor laden...

Tip

Zonder Number() om de prompts heen zie je bij 3 en 4 geen 7 maar 34 — probeer het gerust eerst fout.

Antwoord

function bereken() {
  const a = Number(prompt('Eerste getal:'));
  const b = Number(prompt('Tweede getal:'));
  document.getElementById('uitvoer').textContent = 'Som: ' + (a + b);
}

document.getElementById('knop').addEventListener('click', bereken);

De haakjes om a + b zijn nodig: anders plakt de eerste + het getal a al aan de string, en gaat de tweede + verder met plakken.

Opdracht 3: Kassabon

Bouw een kassabon-maker. Vraag met prompts om een artikelnaam, een prijs en een aantal. Toon daarna twee regels op de pagina: de bonregel ("3 × appel voor 2 euro") en het totaal ("Totaal: 6 euro").

Editor laden...

Tip

Schrijf een functie maakBon en koppel hem met addEventListener aan de knop. De artikelnaam blijft een string; alleen de prijs en het aantal gaan door Number(), want daar reken je mee.

Antwoord

function maakBon() {
  const artikel = prompt('Welk artikel?');
  const prijs = Number(prompt('Prijs per stuk?'));
  const aantal = Number(prompt('Hoeveel stuks?'));
  const totaal = prijs * aantal;

  document.getElementById('regel').textContent =
    aantal + ' × ' + artikel + ' voor ' + prijs + ' euro';
  document.getElementById('totaal').textContent = 'Totaal: ' + totaal + ' euro';
}

document.getElementById('knop').addEventListener('click', maakBon);

Er gaat iets mis

Number plus string geeft een rare string

const aantal = '5';        // per ongeluk een string
const totaal = aantal + 1; // verwacht 6, maar krijgt '51'

Zodra één van de twee een string is, gaat + plakken in plaats van rekenen: '5' + 1 wordt '51'. Controleer bij twijfel het type met console.log(typeof aantal), en converteer invoer met Number(aantal):

const totaal = Number(aantal) + 1;  // nu wel 6