In deze cursus leer je hoe je HTML-pagina's interactief kunt maken met JavaScript.
JavaScript is een programmeertaal waarmee je websites interactief en dynamisch kunt maken.
Je kunt JavaScript op 2 manieren toevoegen:
1. boven het einde van de body
2. in een extern bestand
In het button element kan je een onclick attribuut plaatsen met een functie,
wat dit doet is als je de knop klikt, wordt de functie geactiveerd.
In een JavaScript script kun je functies maken die ergens door getriggerd worden. In dit voorbeeld wordt een button geklikt en wordt de functie getriggerd.
Variabelen kun je zien als een doos met een naam erop.
Je maakt een variabele aan met `let`, gevolgd door een naam en een waarde, bijvoorbeeld let doos = "hoi"; Wat verschijnt er als je alert(doos) uitvoert?
Met de operators kun je rekenen en vergelijken.
De operators om mee te rekenen zijn:
+, -, *, / en %
De operators om mee te vergelijken zijn:
==, ===, <, >, <= en >=
Het plusteken kan op twee manieren worden gebruikt:
1. Om twee getallen op te tellen,
2. Om twee strings aan elkaar te plakken:
bijvoorbeeld: "h" + "oi" = "hoi"
Met if, else if en else kun je in JavaScript beslissingen laten maken. Je laat de computer controleren of iets waar is. Als de eerste voorwaarde niet klopt, kijkt hij naar else if, en anders voert hij uiteindelijk else uit. Zo kan je code verschillend reageren afhankelijk van de situatie.
| JavaScript Concept / Eigenschap | Beschrijving |
|---|---|
| var / let / const | Variabelen maken om waarden op te slaan |
| data types | number, string, boolean, null, undefined, object, array |
| console.log() | Output naar de console voor testen of debuggen |
| alert() | Toont een popup bericht in de browser |
| if / else if / else | Voorwaardelijke logica om beslissingen te make |
| switch | Alternatief voor meerdere if-else statements |
| for loop | Herhaalt code een bepaald aantal keren |
| while loop | Herhaalt code zolang een voorwaarde waar is |
| functions | Herbruikbare blokken code die je kunt aanroepen |
| parameters / arguments | Waarden die je aan functies meegeeft |
| return | Geeft een waarde terug vanuit een functie |
| events | Acties die gebeuren wanneer iets in de browser plaatsvindt, bv. onclick, onmouseover |
| document.getElementById() | Selecteert een HTML-element op basis van zijn ID |
| document.querySelector() | Selecteert het eerste element dat voldoet aan een CSS-selector |
| innerHTML / textContent | De inhoud van een HTML-element aanpassen |
| style | CSS eigenschappen van een element aanpassen via JavaScript |
| array | Lijst van waarden, bv. [1, 2, 3] |
| object | Verzameling van eigenschappen en waarden, bv. {naam: "Jan", leeftijd: 20} |
| Math | Wiskundige functies zoals Math.random(), Math.floor(), Math.round() |
| JSON | Data-formaat voor het opslaan en uitwisselen van gegevens |
| localStorage / sessionStorage | Waarden opslaan in de browser |
| setTimeout / setInterval | Functies uitvoeren na een tijd of herhaald uitvoeren |
| arrow functions | Kortere manier om functies te schrijven |
| == / === / != / !== / < / > / <= / >= | Vergelijkingsoperatoren |
| + - * / % | Rekenoperatoren |
| +=, -=, *=, /= | Verkorte manier om variabelen aan te passen |
| Comments | Regels die niet uitgevoerd worden, bv. // of /* */ |
| Strings en concatenatie | Tekst samenvoegen met +, bv. "Hallo " + naam |
| Prompt | Gebruiker iets laten invoeren, bv. prompt("Vraag") |
| Arrays | Lijst van waarden, bv. ["rood", "blauw"] |
| Objecten | Verzameling eigenschappen en waarden, bv. {naam: "Jan", leeftijd: 20} |
| Functies met parameters | Blokken code die je kunt hergebruiken en waarden meegeven |
| Events | Acties die plaatsvinden bij gebeurtenissen, bv. onclick, onmouseover |
| Math.random() | Genereert een willekeurig getal, vaak in combinatie met Math.floor() |
| Loops kort | For- of while-loops om code herhaald uit te voeren |
| Boolean en vergelijkingen | True of false waardes, bv. leeftijd >= 18 |
| Template literals | Strings waarin je variabelen en expressies gemakkelijk kunt invoegen met backticks () en ${}, bv. Hallo ${naam} |
| Destructuring | Maak het makkelijker om waarden uit arrays of objecten te halen, bv. const [a, b] = [1, 2] |
| Default parameters | Functies kunnen standaardwaarden krijgen, bv. function greet(name = "Gast") { ... } |
| Switch statement | Alternatief voor if/else if, handig bij meerdere mogelijke waarden |