JavaScript

JavaScript wordt gebruikt om webpagina's interactief te maken, zoals menu's die openklappen, formulieren die invoer controleren en inhoud die bijwerkt zonder de pagina te herladen. JavaScript draait via Node.js ook op servers en zit achter veel mobiele apps en desktopapps. Elke moderne browser voert JavaScript standaard uit.

JavaScript en Java zijn twee aparte programmeertalen die alleen een deel van hun naam delen. JavaScript draait vooral in browsers en is dynamisch getypeerd, terwijl Java statisch getypeerd is en wordt gecompileerd naar bytecode voor de Java Virtual Machine. De gelijkende naam kwam voort uit een marketingbeslissing in de jaren negentig.

De DOM, of Document Object Model, is de boom van objecten die een browser uit een HTML-pagina opbouwt, zodat JavaScript de pagina kan lezen en wijzigen. Via de DOM kan JavaScript elementen vinden, tekst wijzigen, klassen toevoegen en nieuwe elementen maken. Elke zichtbare wijziging die een script op een pagina maakt, loopt via de DOM.

Voeg JavaScript toe aan een HTML-pagina met een script-tag, die de code zelf bevat of met het src-attribuut naar een apart JavaScript-bestand verwijst. Door de script-tag aan het eind van de body te zetten of het defer-attribuut toe te voegen, laadt de HTML eerst. Aparte JavaScript-bestanden zijn makkelijker te cachen en te onderhouden.

In JavaScript hebben let en const een blokbereik, terwijl var een functiebereik heeft en opnieuw gedeclareerd kan worden. Een const-variabele kan geen nieuwe waarde krijgen, al kan een object in een const vanbinnen nog wel veranderen. Modern JavaScript gebruikt standaard const, let als de waarde moet veranderen, en vermijdt var.

Events in JavaScript zijn signalen die de browser stuurt als er iets gebeurt, zoals een klik, een toetsaanslag, het verzenden van een formulier of een pagina die klaar is met laden. Een script reageert op een event door met addEventListener een listenerfunctie te koppelen. Met event listeners laat JavaScript een pagina op de gebruiker reageren.

Event delegation in JavaScript betekent één event listener aan een ouderelement koppelen in plaats van een listener aan elk kindelement. De listener kijkt naar het doel van het event om te zien op welk kind is geklikt. Event delegation gebruikt minder geheugen en werkt ook voor elementen die later aan de pagina worden toegevoegd.

Gebruik in JavaScript de functie fetch om gegevens bij een API op te vragen en lees daarna de inhoud met de json-methode van het antwoord. De functie fetch geeft een promise terug, dus de code wacht meestal op het resultaat met async en await. Door de status van het antwoord te controleren en fouten op te vangen, blijft de pagina werken als het netwerk faalt.

Een promise in JavaScript is een object dat staat voor een waarde die later klaar is, zoals het resultaat van een netwerkverzoek. Een promise is pending, fulfilled of rejected. Code reageert op het resultaat met then en catch, of met async en await.

Met async en await wacht JavaScript-code op een promise op een manier die leest als gewone code die stap voor stap loopt. Een functie met async geeft altijd een promise terug, en await pauzeert die functie tot de promise is afgehandeld. Fouten in async-functies vang je op met een gewoon try- en catch-blok.

ES6, ook ECMAScript 2015 genoemd, is de grote update uit 2015 van de standaard van de JavaScript-taal. ES6 voegde let en const, arrow functions, klassen, template literals, destructuring, modules en promises toe. Elke moderne browser ondersteunt ES6, en sindsdien komen er elk jaar nieuwe JavaScript-functies bij.

Arrow functions in JavaScript zijn een kortere manier om functies te schrijven met de syntax =>. Een arrow function heeft geen eigen this, dus this behoudt de waarde uit de omliggende code. Arrow functions worden veel gebruikt voor korte callbacks, zoals die je aan map en filter meegeeft.

JSON, of JavaScript Object Notation, is een tekstformaat om gegevens als sleutels en waarden op te slaan en uit te wisselen. JavaScript zet een object om in JSON-tekst met JSON.stringify en zet JSON-tekst weer om in een object met JSON.parse. De meeste web-API's versturen en ontvangen gegevens als JSON.

JavaScript is makkelijk om mee te beginnen, omdat een browser en een teksteditor alles zijn wat je nodig hebt. De lastigere onderdelen komen later, zoals asynchrone code, scope en de vele tools rond de taal. De meeste leerlingen bouwen binnen een paar weken regelmatig oefenen al bruikbare interactieve pagina's.

Ja, gewoon JavaScript leren vóór React of Vue maakt beide frameworks veel makkelijker te begrijpen. Beide frameworks zijn gebouwd op kernfuncties van JavaScript, zoals functies, arrays, objecten, modules en promises. Ontwikkelaars die de basis kennen, kunnen frameworkcode ook debuggen in plaats van te gokken.

TypeScript is JavaScript met toegevoegde statische types, ontwikkeld door Microsoft en gecompileerd naar gewoon JavaScript. Dankzij types vangt de code-editor veel fouten op voordat de code draait. TypeScript is populair in grote projecten waarin veel ontwikkelaars dezelfde code delen.

Laat pagina's met JavaScript sneller laden door minder JavaScript te versturen, scripts te laden met defer of async en grote bundels op te splitsen zodat elke pagina alleen laadt wat ze nodig heeft. Bestanden minificeren en comprimeren verkleint de download. Zwaar werk buiten de hoofdthread houden, houdt de pagina snel reagerend op klikken en typen.

In JavaScript vergelijkt === zowel waarde als type, terwijl == eerst types omzet en dan vergelijkt. Zo is 0 == "0" waar, maar 0 === "0" onwaar. Met === voorkom je verrassende uitkomsten, en het is de gebruikelijke regel in moderne JavaScript-code.

JavaScript-modules zijn aparte bestanden die functies of waarden exporteren en importeren wat ze uit andere bestanden nodig hebben. Modules houden code georganiseerd, voorkomen globale variabelen en maken grote projecten makkelijker te onderhouden. Browsers laden een module via een script-tag waarvan het type-attribuut op module staat.

Debug JavaScript in de browser met de ontwikkelaarstools, die je opent met F12 of door met de rechtermuisknop op de pagina te klikken en Inspecteren te kiezen. De Console toont fouten en gelogde waarden, en in het paneel Sources zet je breakpoints en loop je regel voor regel door de code. Het paneel Network toont elk verzoek dat de pagina doet en het antwoord daarop.

De event loop is het mechanisme waarmee JavaScript, dat met één thread werkt, veel taken afhandelt zonder vast te lopen. Traag werk zoals timers en netwerkverzoeken wacht op de achtergrond, en de event loop voert elke afgeronde callback uit zodra de call stack leeg is. Code die lang doorloopt blokkeert de event loop nog steeds, en daarom maken zware lussen een pagina onbruikbaar.

Ja, JavaScript draait op de server via runtimes zoals Node.js, Deno en Bun. JavaScript aan de serverkant kan API's bouwen, bestanden lezen en met databases verbinden. Eén taal gebruiken in de browser en op de server laat een team code en kennis delen.

Houd JavaScript-code veilig door nooit onbetrouwbare tekst met innerHTML in de pagina te zetten, alle invoer op de server opnieuw te valideren en geheimen buiten de frontend-code te houden. Alles wat naar de browser gaat, kunnen gebruikers lezen, ook API-sleutels. Een Content Security Policy en bijgewerkte afhankelijkheden houden veel gangbare aanvallen tegen.

In JavaScript bewaart localStorage gegevens alleen in de browser, terwijl cookies bij elk verzoek naar de server worden gestuurd. De localStorage-opslag kan meer gegevens bevatten en past bij instellingen zoals een gekozen thema. Cookies met HttpOnly en Secure zijn de veiligere plek voor inlogsessies, omdat scripts ze niet kunnen lezen.

Schrijf onderhoudbare JavaScript-code met kleine functies, duidelijke namen, modules, consistente opmaak en een linter zoals ESLint. Vermijd globale variabelen en houd de code die de DOM wijzigt gescheiden van de code die gegevens verwerkt. Geautomatiseerde tests maken latere wijzigingen veilig.