Javascript JS

Wil je JavaScript leren en interactieve webapplicaties bouwen? In deze driedaagse training ontdek je de kracht van JavaScript, van basisconcepten tot moderne technieken zoals ES6+, asynchroon programmeren en API-integratie. Je leert hoe je dynamische content beheert via de DOM, events afhandelt en efficiënte code schrijft met functies, objecten en arrays.

Wat leer je in deze training?

• JavaScript-basis – Variabelen, datatypes, operators en controleflow.
• Functies & objecten – Scope, closures, ES6-classes en prototype-inheritance.
• DOM-manipulatie – HTML-elementen selecteren, aanpassen en events afhandelen.
• Asynchroon programmeren – Callbacks, Promises, async/await en de Fetch API.
• Moderne ES6+ technieken – Arrow functions, destructuring en modules.

Deze training is ideaal voor beginnende developers, frontend-ontwikkelaars en designers die interactieve functionaliteiten aan websites willen toevoegen. Je werkt met Engelstalig lesmateriaal, praktijkgerichte opdrachten en moderne tools, ondersteund door een Nederlandstalige docent.

• Beginners die webdevelopment willen leren.
• Frontend-developers die hun JavaScript-kennis willen verdiepen.
• Full-stack ontwikkelaars in opleiding (i.c.m. Node.js).
• Designers die interactieve elementen aan websites willen toevoegen.

Dag 1: JavaScript Basis en Syntax

• Installatie van Software Node.js en VSCode.
• Basisconcepten: variabelen (let, const, var), datatypes (string, number, boolean, null, undefined, object).
• Operatoren: rekenkundig (+, -, *, /), vergelijking (===, !==), logisch (&&, ||, !).
• Controlestructuren: if/else, switch, for-loops, while-loops.
• Functies: declaratie, parameters, return-waarden.

Dag 2: Geavanceerde Functies en DOM-introductie

• Functies als first-class citizens: anonieme functies, callbacks.
• Arrays: aanmaken, methoden (push, pop, map, filter, reduce).
• Objecten: properties, methods, this-keyword.
• Introductie tot de DOM (Document Object Model): querySelector, elementen aanpassen (.textContent, .innerHTML).
• ES6+ features: arrow functions, template literals, destructuring.

Dag 3: Asynchroon Programmeren en Moderne Technieken

• Asynchrone code: setTimeout, Promises, async/await.
• Event handling: click-, form- en keyboard-events.
• Error handling: try/catch/finally.
• Fetch API: data ophalen van een externe bron (JSONPlaceholder).
• Modulaire code: import/export (ES6-modules).
• 
  

• Basisconcepten en Syntax:
• Variabelen: let, const, var (scope-verschillen).
• Datatypes: primitief (string, number, boolean, null, undefined) en complex (object, array).
• Typeconversie: expliciet (parseInt(), String()) en impliciet.
• Operatoren:
• Rekenkundig: +, -, , /, %, *.
• Vergelijking: ==, ===, !=, !==, >, <.
• Logisch: &&, ||, ! (truthy/falsy-waarden).
• Strings: template literals (backticks), methoden (slice(), replace(), includes()).
• Controlestructuren:
• Conditioneel: if/else if/else, switch-statements.
• Loops: for (traditioneel, for…​of, for…​in), while, do…​while.
• Loop-control: break, continue, geneste loops.
• Functies en Scope:
• Functiedefinities: declaraties, expressies, IIFE (Immediately Invoked Function Expressions).
• Parameters: default values, rest parameters (…​args).
• Arrow functions: syntax, this-binding.
• Scope: globale scope, function scope, block scope (let/const).
• Closure: basisconcept en praktijkvoorbeelden.
• Arrays en Methoden:
• Aanmaken: literals, Array.from(), new Array().
• Methoden:
• Mutatie: push(), pop(), shift(), unshift(), splice().
• Iteratie: forEach(), map(), filter(), reduce(), find(), some(), every().
• Ordening: sort(), reverse().
• Array destructuring: const [a, b] = arr;.
• Objecten en OOP:
• Object literals: properties, methods, shorthand syntax.
• this-keyword: context in functies en arrow functions.
• Constructor functions en new-keyword.
• ES6 Classes: class, constructor, methods, static methods.
• Prototype chain en inheritance: extends, super().
• Object destructuring: const { name, age } = obj;.
• JSON: JSON.parse(), JSON.stringify().
• Moderne ES6+ Features:
• Template literals: interpolatie, multi-line strings.
• Destructuring: arrays, objecten, geneste structuren.
• Spread/rest operator: …​ voor arrays/objecten/parameters.
• Modules: import/export, default vs named exports.
• DOM-manipulatie en Events:
• DOM-selectie: document.querySelector(), querySelectorAll().
• Elementen aanpassen: .textContent, .innerHTML, .setAttribute().
• Stijl wijzigen: .style.property, classList.add()/remove().
• Event listeners: addEventListener(), click, submit, keydown.
• Event object: event.preventDefault(), event.target.
• Dynamische HTML: elementen maken/verwijderen (createElement(), appendChild()).
• Asynchroon Programmeren:
• Callback-functies en callback hell.
• Promises: .then(), .catch(), .finally(), chaining.
• async/await-syntax voor leesbare asynchrone code.
• Fetch API: fetch(), Response.json(), error handling.
• Axios (basis): alternatief voor fetch.
• Error Handling en Debugging:
• try/catch/finally-blokken.
• Custom errors: throw new Error().
• Debugging met console.log(), console.error(), breakpoints (Chrome DevTools).
• Tools en Praktijk:
• npm basics: npm init, packages installeren (bijv. axios).
• Bundelen met Parcel (basis): modules bundelen voor browsers.
• Linting: ESLint introductie (consistentie in code).
• Praktijkcases:
• Formuliervalidatie.
• Dynamische filters voor productlijsten.
• API-integratie (weer-app met OpenWeatherMap).
• Geavanceerde Concepten (introductie):
• Web APIs: localStorage, sessionStorage.
• Timers: setInterval(), clearInterval().
• Strict mode: "use strict" en voordelen.
• Functioneel programmeren: pure functies, immutability.

• Bereidt voor op het Microsoft Technology Associate (MTA) JavaScript-certificaat.
• Basis voor vervolgcursussen zoals Frontend Development met React of Node.js Fundamentals.
• Optioneel extern examen (niet inbegrepen).