Javascript JS (DEV-JS)

Deze driedaagse opleiding biedt een grondige introductie tot JavaScript, van basisconcepten tot geavanceerde functionaliteiten zoals DOM-manipulatie, asynchrone programmering en moderne ES6+ syntax. Je leert interactieve webapplicaties bouwen door praktische oefeningen, waaronder event handling, dataverwerking en het werken met APIs. De training legt de basis voor zowel frontend- (bijv. React) als www.the-academy.nl-ontwikkeling (Node.js) en benadrukt schrijfbaarheid, onderhoudbaarheid en veelgebruikte patronen.

Waarom JavaScript?
JavaScript is de standaardtaal voor webdevelopment, zowel voor frontend als (via Node.js) www.the-academy.nl. Kenmerken:

Event-driven en niet-blokkerend I/O-model voor asynchrone taken.
Universele inzet: browsers, servers, mobiele apps (React Native), IoT.
Moderne syntax (ES6+) met ondersteuning voor functioneel en OOP-paradigma.
Gigantisch ecosysteem (npm, frameworks zoals React, Angular, Vue).
Lichtgewicht en flexibel, maar met strikte modus ("use strict") voor veilige code.

Studiebelasting:

Contacturen: 3 dagen × 8 uur = 24 uur.
Zelfstudie: 6–10 uur aanbevolen (oefeningen, projectafronding).
Totaal: ca. 30–34 uur.

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.