JavaScript is de taal waarmee een webpagina gaat reageren. HTML zet de structuur neer, CSS bepaalt hoe het eruitziet, en JavaScript zorgt ervoor dat er iets gebeurt als een bezoeker klikt, typt of scrolt. De code wordt door de browser uitgevoerd en het is gewone platte tekst: een tekstverwerker als Word kun je er dus niet voor gebruiken, een editor als Visual Studio Code wel.
De vele mogelijkheden van JavaScript
Elke pagina waar een menu uitrolt, waar zoekresultaten verschijnen terwijl je nog typt, of waar een deel van de pagina verandert zonder dat de hele pagina opnieuw laadt, gebruikt JavaScript. Het loopt inmiddels ook buiten de browser: met Node.js draait dezelfde taal op de server, en met frameworks als React en Vue worden hele applicaties gebouwd. Die frameworks zijn allemaal op JavaScript gebaseerd, dus wie de taal zelf begrijpt, leert ze een stuk sneller.
Vijf dingen die je aan het begin moet weten
1. Gebruik let en const, geen var. Met const leg je vast dat een waarde niet verandert, met let dat hij dat wel doet. Het oude var houdt zich niet aan de accolades waar het in staat, en dat levert fouten op die je niet ziet aankomen.
2. Vergelijk met === en niet met ==. JavaScript kent twee manieren om op gelijkheid te testen. De dubbele (==) rekent types naar elkaar toe, waardoor "5" == 5 waar is en je op een vergelijking kunt struikelen zonder foutmelding. De drievoudige (===) vergelijkt waarde én type. Hetzelfde geldt voor !== tegenover !=.
3. Blijf van eval af. Die functie voert een stuk tekst uit als code. Dat is langzaam, en als die tekst ergens van een gebruiker komt, geef je een bezoeker de kans om zijn eigen code op jouw pagina te laten draaien.
4. Laat je scripts de pagina niet ophouden. Een script in de head blokkeert het opbouwen van de pagina totdat het is geladen. Zet je script daarom onder aan de body, of gebruik defer in de scripttag: dan wordt het bestand naast het opbouwen van de pagina ingeladen en pas daarna uitgevoerd. Voor losstaande code die niets met de pagina te maken heeft, kan async.
5. Haal gegevens op met fetch. Wil je iets van de server halen zonder de pagina te verversen, dan is fetch de standaardmanier, met async en await voor de leesbaarheid. Elementen zoek je op met document.querySelector. Voor dit soort dagelijkse dingen heb je geen bibliotheek meer nodig; jQuery was jarenlang onmisbaar en de browsers doen het nu zelf.
const knop = document.querySelector('#opslaan');
knop.addEventListener('click', async () => {
const reactie = await fetch('/api/cursussen');
const cursussen = await reactie.json();
console.log(cursussen.length);
});
Waar beginners op vastlopen
Op twee dingen, en het helpt om te weten dat het bij iedereen gebeurt. Het eerste is dat code niet netjes op elkaar wacht: een verzoek naar de server duurt even, en de regel eronder loopt gewoon door. Vandaar await. Het tweede is dat je script draait voordat de pagina bestaat, waardoor je element niet gevonden wordt; met defer of een script onderaan is dat opgelost.
Wat je verder scheelt: de foutmeldingen in de console van je browser zijn preciezer dan mensen denken. Wie leert die te lezen, hoeft de helft van zijn vragen niet meer te stellen.
En AI die JavaScript voor je schrijft
Dat werkt goed, en juist daarom moet je de taal kennen. Gegenereerde code ziet er verzorgd uit en gebruikt geregeld verouderde patronen, jQuery bijvoorbeeld, of var. En een fout in JavaScript geeft geen foutmelding aan de bezoeker: de knop doet gewoon niets. Wie kan lezen wat er staat, ziet dat binnen een minuut.
Meer over JavaScript
In de driedaagse cursus JavaScript Basis maak je kennis met de taal en ga je er onder begeleiding zelf mee aan de slag, zodat het geen theorie blijft. De training vormt de basis voor het werken met frameworks als React en Vue.
Wil je eerst de laag eronder onder de knie hebben, dan is er de cursus HTML en CSS.
