Javascript JS (DEV-JS)

Wil je interactieve webapplicaties bouwen? In deze training leer je JavaScript van basis tot ES6+, inclusief DOM-manipulatie, asynchroon programmeren en API’s, zodat je dynamische websites kunt maken.

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.

Virtueel beschikbaar

Iedere maand starten

Erkende certificaten

Door heel Nederland

Voor wie

Programma

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.