HTMLhulp.nl logo

JavaScript is de programmeertaal van het web. Het maakt websites interactief en dynamisch. Hieronder vind je de belangrijkste basisregels, syntax en voorbeelden.

Variabelen

CodeBeschrijving
let naam = "Dave";Variabele die later gewijzigd kan worden
const leeftijd = 30;Constante variabele (kan niet gewijzigd worden)
var oud = "test";Oudere manier om variabelen te declareren (afgeraden)

Datatypes

TypeVoorbeeld
String"Hallo wereld"
Number42, 3.14
Booleantrue, false
Array[1, 2, 3], ["a", "b", "c"]
Object{ naam: "Dave", leeftijd: 30 }
Nullnull
Undefinedlet x; → undefined

Operatoren

OperatorBeschrijvingVoorbeeld
+Optellen / string concat5 + 2 → 7
-Aftrekken5 - 2 → 3
*Vermenigvuldigen5 * 2 → 10
/Delen10 / 2 → 5
%Modulus (rest)5 % 2 → 1
==Vergelijken (losjes)5 == "5" → true
===Vergelijken (streng, inclusief type)5 === "5" → false
!==Niet gelijk5 !== 3 → true

Condities

if (leeftijd >= 18) {
console.log("Volwassen");
} else {
console.log("Minderjarig");
}

Ternary operator:

let status = (leeftijd >= 18) ? "Volwassen" : "Minderjarig";

Lussen (loops)

for (let i = 0; i < 5; i++) {
console.log(i);
}

while (i < 5) {
console.log(i);
i++;
}

for (let item of [1,2,3]) {
console.log(item);
}

Functies

function hallo(naam) {
return "Hallo " + naam;
}

const halloArrow = (naam) => {
return `Hallo ${naam}`;
};

Objecten en arrays

let persoon = {
naam: "Dave",
leeftijd: 30
};
console.log(persoon.naam);

let nummers = [10, 20, 30];
console.log(nummers[1]); // 20

Array-methoden:

MethodeBeschrijvingVoorbeeld
push()Element toevoegenarr.push(4)
pop()Laatste element verwijderenarr.pop()
shift()Eerste element verwijderenarr.shift()
unshift()Element vooraan toevoegenarr.unshift(0)
forEach()Itererenarr.forEach(x => console.log(x))
map()Nieuwe array makenarr.map(x => x*2)
filter()Elementen filterenarr.filter(x => x > 10)
reduce()Array terugbrengen tot 1 waardearr.reduce((a,b) => a+b)

DOM-manipulatie

document.getElementById("id");
document.querySelector(".class");
document.querySelectorAll("p");

let el = document.getElementById("demo");
el.innerText = "Nieuwe tekst";
el.style.color = "red";

Event listener:

document.getElementById("knop")
.addEventListener("click", () => {
alert("Knop geklikt!");
});

JSON (JavaScript Object Notation)

let jsonString = '{"naam":"Dave","leeftijd":30}';
let obj = JSON.parse(jsonString);
console.log(obj.naam); // Dave

let nieuweString = JSON.stringify(obj);

Handige functies

FunctieBeschrijvingVoorbeeld
console.log()Uitvoer naar consoleconsole.log("Test")
Math.random()Willekeurig getal (0–1)Math.random()
Math.floor()Afronden naar benedenMath.floor(4.7) → 4
Date()Huidige datum en tijdnew Date()