JavaScript Oefeningen

Introductie

Welkom bij de JavaScript oefeningen! Deze opdrachten bouwen langzaam op van simpel naar complex. Neem de tijd voor elke opdracht en test je code in de browser console (F12) of in een online editor zoals CodePen of JSFiddle.

Waar moet je coderen?

Hoe te gebruiken

• Begin bij Niveau 1 en werk je geleidelijk omhoog
• Open je JavaScript bestand in VS Code
• Test je code door het bestand te runnen in Node.js of in de browser console
• Voor DOM opdrachten: maak een HTML bestand aan en link je JavaScript
• Kom je er niet uit? Klik de 📖 Theorie link bij de opdracht
• Haast je niet - begrip is belangrijker dan snelheid

Voorbeeld project structuur

javascript-oefeningen/
├── niveau1.js
├── niveau2.js
├── niveau3.js
├── niveau4.js
├── niveau5-dom/
│   ├── opdracht1.html
│   ├── opdracht1.js
│   ├── opdracht2.html
│   └── opdracht2.js
├── niveau6-projecten/
│   ├── todo-lijst/
│   │   ├── index.html
│   │   └── script.js
│   └── rekenmachine/
│       ├── index.html
│       └── script.js
└── niveau7-advanced/
    └── ...

Niveau 1: Absolute Beginners

1.1 Je eerste variabelen

Maak variabelen voor:

• Je naam
• Je leeftijd
• Je favoriete kleur

Print ze allemaal naar de console.

1.2 Rekenen met JavaScript

Bereken het gemiddelde van drie cijfers: 7, 8, en 9. Sla het resultaat op in een variabele en print het.

1.3 String samenvoegen

Maak variabelen voor je voornaam en achternaam. Voeg ze samen tot een volledige naam met een spatie ertussen. Print een zin: "Hallo, mijn naam is [volledige naam]"

1.4 Template literals

Doe opdracht 1.3 opnieuw, maar gebruik nu backticks ` en ${} voor variabelen.

1.5 Datatypes herkennen

Maak de volgende variabelen en print het type van elke variabele met typeof:

• Een getal
• Een string (tekst)
• Een boolean (true of false)

Niveau 2: Functies en Condities

2.1 Je eerste functie

Maak een functie begroeting() die "Hallo wereld!" print naar de console. Roep de functie daarna aan.

2.2 Functie met parameter

Maak een functie begroetPersoon(naam) die print: "Hallo [naam], hoe gaat het?"

Test de functie met verschillende namen.

2.3 Functie met return

Maak een functie vermenigvuldig(a, b) die het product van a en b teruggeeft.

Gebruik de functie om 5 × 7 te berekenen en print het resultaat.

2.4 If-statement

Maak een functie isVolwassen(leeftijd) die:

• "Je bent volwassen" print als leeftijd >= 18
• "Je bent minderjarig" print als leeftijd < 18

Test met verschillende leeftijden.

2.5 Meerdere condities

Maak een functie beoordeelCijfer(cijfer) die een beoordeling geeft:

• 8-10: "Uitstekend"
• 6-7: "Voldoende"
• 0-5: "Onvoldoende"

2.6 Even of oneven

Maak een functie evenOfOneven(getal) die checkt of een getal even of oneven is.

Niveau 3: Loops en Arrays

3.1 For-loop basis

Print de getallen 1 tot en met 10 met een for-loop.

3.2 Even getallen

Print alleen de EVEN getallen van 0 tot 20 met een loop.

3.3 Tafel van vermenigvuldiging

Print de tafel van 5 (5 × 1 = 5, 5 × 2 = 10, etc.) tot en met 5 × 10.

3.4 Je eerste array

Maak een array met 5 vruchten.

• Print de hele array
• Print alleen het 3e element (let op: arrays beginnen bij 0!)
• Print het aantal elementen in de array

3.5 Loop door array

Maak een array met 5 getallen: [5, 10, 15, 20, 25]

Gebruik een for-loop om:

1. Alle getallen te printen
2. De som van alle getallen te berekenen

3.6 Array methodes

Maak een array met namen: ["Anna", "Bas", "Chris"]

Doe het volgende en print de array na elke stap:

1. Voeg "Diana" toe aan het einde (gebruik push)
2. Voeg "Erik" toe aan het begin (gebruik unshift)
3. Verwijder het laatste element (gebruik pop)

3.7 Zoeken in een array

Maak een array met getallen: [3, 7, 12, 5, 18, 9]

Schrijf code die:

• Het grootste getal vindt
• Het kleinste getal vindt

Niveau 4: Objecten en Array Methods

4.1 Object maken

Maak een object persoon met de volgende eigenschappen:

• naam
• leeftijd
• woonplaats

Print het hele object en print ook alleen de leeftijd.

4.2 Object aanpassen

Gebruik het persoon object van opdracht 4.1.

• Verander de leeftijd naar een nieuwe waarde
• Voeg een nieuwe eigenschap hobby toe
• Print het aangepaste object

4.3 Object met functie

Maak een object auto met eigenschappen:

• merk
• kleur
• jaar

Voeg een functie beschrijf toe die print: "Dit is een [kleur] [merk] uit [jaar]"

Roep de functie aan.

4.4 Array van objecten

Maak een array studenten met 3 student-objecten. Elk object heeft:

• naam
• cijfer

Print alle namen met een loop.

4.5 forEach methode

Gebruik de studenten array van opdracht 4.4.

Gebruik forEach() om alle cijfers te printen.

4.6 Map methode

Maak een array: [1, 2, 3, 4, 5]

Gebruik map() om een nieuwe array te maken waar elk getal verdubbeld is.

4.7 Filter methode

Maak een array: [12, 5, 8, 130, 44]

Gebruik filter() om alleen de getallen groter dan 10 te krijgen.

4.8 Find methode

Maak een array met student objecten (naam en cijfer).

Gebruik find() om de eerste student te vinden met een cijfer hoger dan 8.

Niveau 5: DOM Manipulatie

5.1 Element selecteren

HTML:

<h1 id="titel">Hallo Wereld</h1>
<p class="tekst">Dit is een paragraaf</p>

Opdracht:

Selecteer het h1 element met getElementById en verander de tekst naar "Hallo JavaScript!"

5.2 Element stylen

HTML:

<div id="box">Dit is een box</div>

Opdracht:

Verander met JavaScript:

• De achtergrondkleur naar blauw
• De tekstkleur naar wit
• Voeg padding toe van 20px

5.3 Click event

HTML:

<button id="mijnKnop">Klik mij!</button>
<p id="resultaat"></p>

Opdracht:

Wanneer je op de knop klikt, verander de tekst van het <p> element naar "Je hebt geklikt!"

5.4 Teller maken

HTML:

<button id="verhoog">+</button>
<span id="teller">0</span>
<button id="verlaag">-</button>

Opdracht:

Maak een werkende teller:

• De + knop verhoogt de waarde
• De - knop verlaagt de waarde

5.5 Input lezen

HTML:

<input type="text" id="naamInput" placeholder="Vul je naam in">
<button id="begroetKnop">Begroet mij</button>
<p id="begroeting"></p>

Opdracht:

Lees de waarde uit het input veld en toon een begroeting: "Hallo [naam]!"

5.6 Kleur veranderen

HTML:

<button id="roodKnop">Rood</button>
<button id="groenKnop">Groen</button>
<button id="blauwKnop">Blauw</button>
<div id="kleurBox" style="width: 200px; height: 200px; background: gray;"></div>

Opdracht:

Elke knop verandert de achtergrondkleur van de box naar die kleur.

5.7 Toggle visibility

HTML:

<button id="toggleKnop">Toon/Verberg</button>
<p id="tekst">Deze tekst kan worden verborgen</p>

Opdracht:

Maak een knop die de tekst laat verschijnen en verdwijnen (toggle).

Niveau 6: Complexere Projectjes

6.1 To-Do lijst (basis)

HTML:

<input type="text" id="taakInput" placeholder="Nieuwe taak">
<button id="toevoegKnop">Toevoegen</button>
<ul id="takenLijst"></ul>

Opdracht:

Maak een simpele to-do lijst waar nieuwe taken worden toegevoegd aan de lijst.

6.2 To-Do lijst (met verwijderen)

Breid opdracht 6.1 uit:

• Voeg een "Verwijder" knop toe bij elke taak
• Wanneer je op de knop klikt, wordt die taak verwijderd

6.3 Random kleur generator

HTML:

<button id="verander">Verander Kleur</button>
<div id="kleurBox" style="width: 200px; height: 200px; background: gray;"></div>
<p id="kleurCode"></p>

Opdracht:

Genereer een random hex kleur (#RRGGBB) en:

• Verander de achtergrond van de box naar die kleur
• Toon de kleurcode

6.4 Rekenmachine

HTML:

<input type="number" id="getal1" placeholder="Getal 1">
<select id="operator">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">×</option>
  <option value="/">÷</option>
</select>
<input type="number" id="getal2" placeholder="Getal 2">
<button id="bereken">Bereken</button>
<p id="antwoord"></p>

Opdracht:

Maak een werkende rekenmachine die kan optellen, aftrekken, vermenigvuldigen en delen.

6.5 Getal raden spel

Maak een spel waar:

1. De computer een random getal kiest tussen 1 en 100
2. De speler kan raden
3. Het programma zegt of het getal hoger of lager is
4. Wanneer correct geraden, toon hoeveel pogingen het kostte

Niveau 7: Advanced Concepten

7.1 LocalStorage - Data opslaan

HTML:

<input type="text" id="naam" placeholder="Je naam">
<button id="opslaan">Opslaan</button>
<button id="laden">Laden</button>
<p id="geladen"></p>

Opdracht:

• Sla de naam op in de browser (localStorage)
• Laad de naam terug, zelfs na pagina refresh

7.2 JSON en LocalStorage

Maak een array met taken (to-do items). Sla de hele array op in localStorage en laad hem terug.

7.3 Fetch API - Data ophalen

Haal data op van een API: https://jsonplaceholder.typicode.com/users

Print de namen van alle gebruikers naar de console.

7.4 Async/Await

Doe opdracht 7.3 opnieuw, maar gebruik nu async en await in plaats van .then().

7.5 Error handling

Breid opdracht 7.4 uit met error handling:

• Gebruik try en catch
• Toon een foutmelding als de fetch mislukt

7.6 Destructuring

Maak een object persoon met naam, leeftijd en stad.

Gebruik destructuring om de waarden uit te pakken in aparte variabelen.

7.7 Spread operator

Voeg twee arrays samen met de spread operator (...).

Test met: [1, 2, 3] en [4, 5, 6]

7.8 Arrow functions

Herschrijf deze functie naar een arrow function:

function kwadraat(x) {
  return x * x;
}

7.9 Classes (OOP)

Maak een class Auto met:

• Constructor die merk en jaar accepteert
• Een method info() die "Deze [merk] is uit [jaar]" print

Maak twee auto objecten en roep de info method aan.

7.10 Classes met inheritance

Maak een class Dier met:

• Constructor voor naam
• Method maakGeluid() die "Het dier maakt geluid" print

Maak een class Hond die extends van Dier:

• Override de maakGeluid() method om "Woef!" te printen

Niveau 8: Challenge Projecten

8.1 Quiz App

Maak een quiz applicatie met:

• Minstens 5 meerkeuzevragen
• Knoppen om een antwoord te kiezen
• Score bijhouden
• Resultaat tonen aan het einde
• Knop om opnieuw te beginnen

8.2 Stopwatch

Maak een stopwatch met:

• Start knop
• Stop knop
• Reset knop
• Tijd weergave (minuten:seconden:milliseconden)

8.3 Memory Game

Maak een memory kaartspel met:

• 8 paren kaarten (16 in totaal)
• Kaarten kunnen worden omgedraaid
• Check of twee omgedraaide kaarten matchen
• Zet kaarten terug als ze niet matchen
• Houd het aantal pogingen bij
• Melding wanneer alle paren gevonden zijn

8.4 Weather App

Maak een weer applicatie die:

• Een stad als input neemt
• Het weer ophaalt van een gratis API (bijv. OpenWeatherMap)
• Temperatuur, weerbeschrijving en icoon toont
• Foutmeldingen geeft bij ongeldige steden
• Een loader toont tijdens het laden

8.5 Expense Tracker

Maak een uitgaven tracker die:

• Uitgaven kan toevoegen (beschrijving, bedrag)
• Alle uitgaven toont in een lijst
• Het totale bedrag berekent
• Uitgaven kan verwijderen
• Data opslaat in localStorage

8.6 Pomodoro Timer

Maak een Pomodoro timer:

• 25 minuten werk tijd
• 5 minuten pauze
• Start/Pauze/Reset knoppen
• Visuele countdown
• Geluid of melding aan het einde
• Tel het aantal voltooide sessies

8.7 Notities App

Maak een notitie applicatie die:

• Notities kan toevoegen met een titel en tekst
• Notities kan bewerken
• Notities kan verwijderen
• Notities kan zoeken/filteren
• Alles opslaat in localStorage
• Een mooi design heeft

Tips

Tips voor succes

Debuggen tips