JavaScript en Interactie
In de workshop JS en Interactie van donderdag 4/9/2025 wordt uitgelegd wat je moet doen.
De afgelopen dagen hebben we ons ondergedompeld in HTML en CSS. Maar er is nog een belangrijke taal voor een frontender: JavaScript. Een programmeertaal die we als derde laag op het Web kunnen inzetten. Nadat we ons fundament in gestructureerde HTML hebben opgezet, en met CSS de browser een aantal styling hints hebben gegeven, kunnen we met JavaScript (JS) in veel gevallen nog extra functionaliteit en interactie toevoegen.
💡 HTML, CSS en JS hebben alledrie andere regels, omdat het totaal verschillende talen zijn. Als je in HTML en CSS per ongeluk een tikfout maakt, negeert een browser die vaak. De browser gaat gewoon door met de rest van de pagina. In JS gaat het bij een tikfout iets sneller mis. Zodra de browser een fout in JS tegenkomt, wordt de rest niet meer uitgevoerd.
We gaan net als dinsdag via de developer tools in je browser kort met JS spelen. Net als dat je de live DOM (Document Object Model) en styling kunt inspecteren en veranderen, kun je ook JS interactief uitvoeren op een webpagina.
- Open de developer tools op bijvoorbeeld je visitekaartje, door een element te inspecteren met je rechtermuisknop.
- Ga naar het tabblad Console in je developer tools, waar je JavaScript kunt typen.
Dit zijn screenshots uit Firefox. De interface verschilt iets per browser, maar allemaal hebben ze een Console met vergelijkbare functionaliteit.
- JavaScript is goed in rekenen. Probeer bijvoorbeeld eens twee getallen op te tellen, door
5 + 9in te typen in je Console, gevolgd door een Enter.
Gaaf, misschien wel je eerste stukje JavaScript ooit!
- Probeer eens
'5' + '9'uit te voeren..
Blijkbaar doet JavaScript verschillende dingen met getallen (Numbers) en tekst (Strings). Voor nu niet heel relevant, maar dit is één van de regels binnen JavaScript.
- Wat gebeurt er als we per ongeluk—of expres—iets verkeerd doen? Wat als we
vijf + negenuitvoeren? Of gewoonblabla?
Dan krijgen we een foutmelding van JavaScript, omdat dit onbekende termen zijn. Dit gaat vast nog vaker gebeuren, en er is altijd een verklaring voor. Voor nu gaan we door met leukere dingen.
- Voer
document.bodyuit in de Console.
Je krijgt nu een referentie naar het <body> element uit je pagina. Blijkbaar is dit iets speciaals. Met JavaScript kun je het Document Object Model (DOM) vragen stellen, dingen laten doen, of veranderen.
- Voer
document.Bodyuit in de Console.
Die is “undefined”, dus blijkbaar is het in JavaScript belangrijk dat je goed let op hoofdletters en kleine letters. Een tikfout is snel gemaakt, en ook voor een undefined is altijd een verklaring.
- Voer
document.querySelector('body')uit in de Console.
Dit is dus een andere manier om een referentie naar ons <body> element te krijgen, maar eentje die veel flexibeler is. Met document.querySelector() kun je elke CSS selector gebruiken om een element op te zoeken.
- Probeer een andere CSS selector uit, bijvoorbeeld door
document.querySelector('h1')uit te voeren. Wees niet bang voor tikfouten, maar probeer het opnieuw als het niet lukt. (Tip: met pijltje omhoog op je toetsenbord kun je in de Console door vorige opdrachten springen)
- Verander de inhoud van je pagina door
document.querySelector('body').textContent = 'JS is tof!'uit te voeren in de Console.
En refresh daarna de pagina :)
Al deze opdrachten kunnen ook via een script uitgevoerd worden. De browser voert elke regel dan stap voor stap uit, als alles goed gaat. Via JavaScript en het Document Object Model kun je bijvoorbeeld elementen opzoeken, naar events luisteren (zoals een click event of een keyboard event), functies uitvoeren zodra zo'n event plaatsvindt, en eigenschappen van de DOM veranderen. Vaak doen we dat laatste door een class op een bepaald element te veranderen, zodat er door CSS andere styling toegepast kan worden. HTML, CSS en JS werken op deze manier dus hand in hand.
- Bespreek met je buur wat een haalbare, leuke extra interactie in je eigen visitekaartje zou kunnen zijn. Enkele ideeën:
- Verander de styling als je op een knop klikt, door een class op een element aan te passen; maak iets groter, opvallender, of laat je kaartje flippen.
- Verander een stukje tekst als je op een knop klikt.
-
Speel een geluidje af als je op een knop klikt. Combineer dit bijvoorbeeld met een
<audio>element.
-
Maak een issue aan op je eigen repository, bedenk een goede titel voor je interactie, en beschrijf deze kort. Voeg ook een breakdown schets toe.
-
Vraag feedback op je issue en je breakdown schets. Misschien krijg je wel tips of extra bronnen over hoe je jouw probleem aan kunt pakken.
Om iemand te taggen typ je
@met de GitHub handle:
GitHub handles van jouw docenten:
| Squad 1i | Squad 1J | ||
|---|---|---|---|
| Koop | @KoopReynders | Krijn | @KrijnHoetmer |
| Joost | @joostf | Cyd | @cydstumpel |
| Sanne | @shooft | ||
| Suus | @suustenvoorde |
💪 Als je wilt, kun je je interactie ook bouwen. Maak je ook hierbij niet te druk over of het lukt, maar zie elke stap als een verbetering. Vergeet niet je werk via GitHub te integreren en te testen als het live staat.
💡 Hiermee heb je weer een iteratie op je werk gemaakt, en nog een keer de development lifecycle gevolgd: je hebt een probleem geanalyseerd, je hebt een oplossing ontworpen, en misschien gebouwd en uiteindelijk geïntegreerd en getest. Op naar de volgende iteratie.
- What is JavaScript? MDN beginner's JavaScript course
- Introduction to the DOM
- Hey designers, if you only know one thing about JavaScript, this is what I would recommend
Om jullie zelfstandig meer met programmeren en JavaScript te laten werken dit semester, staat de deeltaak JS Fundamentals op het programma.
Wil je doorgaan met interactief leren programmeren? Kijk dan alvast eens naar LearnProgramming.online en kom vanaf volgende week op donderdagen langs bij Jad, de maker van deze cursus.
💪 Heb je al wat ervaring met programmeren, en wil je werken aan je JavaScript skills? Ga dan aan de slag met LearnJavaScript.online en laat je vanaf volgende week donderdag begeleiden door Jad, die ook deze cursus gemaakt heeft.