Met alleen HTML en CSS kun je al een mooie webpagina maken. Maar een belangrijk deel mist nog, en dat is interactiviteit.
Met behulp van JavaScript kun je ervoor zorgen dat je website reageert op wat je bezoeker doet.
Wat is JavaScript?
JavaScript is een zogenaamde scripttaal, wat je kunt zien als een soort vereenvoudigde programmeertaal. Met JavaScript kun je heel veel verschillende dingen doen. Het werkt nauw samen met de HTML en CSS-code op je webpagina. Zo kun je het bijvoorbeeld gebruiken om een diavoorstelling of slider op je site te zetten. Ook wordt het gebruikt voor het instellen van cookies. Daarnaast kan je met JavaScript de CSS van een tag aanpassen. Een eenvoudig voorbeeld: wanneer een bezoeker op een link klikt verandert de kleur van de tekst, of de achtergrondafbeelding van je website.
JavaScript werkt op basis van events, of gebeurtenissen. Dit kunnen twee soorten gebeurtenissen zijn, namelijk iets wat de browser doet of iets wat de bezoeker doet. Een event is bijvoorbeeld het feit dat de browser een webpagina volledig geladen heeft. Met JavaScript kun je dit moment afvangen door precies na die gebeurtenis een venster te laten zien met “Welkom bezoeker”. Een voorbeeld van een event dat door de bezoeker wordt verricht is het klikken op een link (onclick), of het met de muis over een afbeelding of element bewegen (onmouseover).
De praktijk
Laten we maar direct met een voorbeeld beginnen, dan zie je meteen hoe JavaScript werkt. Stel je wilt je bezoekers de mogelijkheid geven met een druk op de knop de huidige datum te zien.
<script type="text/javascript"> function toonDatum() { alert(Date()); } </script> <button onclick="toonDatum()" type="button">Laat de datum zien</button>
Wat je dan doet is een knop weergeven met behulp van de HTML-tag <button>. Je specificeert het type knop, een normale knop krijgt als type type=”button”. Met het ‘onclick’-attribuut zet je het JavaScript-event in werking op het moment dat een bezoeker op de knop drukt.
De basis van JavaScript is het gebruik van functies. Hiermee kun je aangeven wat er moet gebeuren op het moment dat een event getriggerd wordt. In dit geval willen we een pop-upje weergeven met daarin de datum. We schrijven dus in de functie toonDatum de code “alert(Date());”. alert() roept een standaard browserschermpje op waarin je tekst kunt zetten. Met alert(‘Hallo wereld’) toon je bijvoorbeeld de tekst Hallo wereld. In dit geval willen we echter de huidige datum tonen, daarvoor gebruiken we de Date()-functie. Dit is een in JavaScript ingebakken functie die de datum weergeeft.
Wanneer je de code in je webpagina zet, krijg je het volgende resultaat:
Nu heeft JavaScript ook nog allerlei mogelijkheden om de weergave van de datum aan te passen, want dit ziet er natuurlijk wat lelijk uit. Dat gaat echter te ver voor deze introductie.
Wil je meer van JavaScript weten? Hier vind je enkele handige kant-en-klare scripts die je kunt knippen en plakken naar je website.