JavaScript toevoegen aan HTML
Programmeertaal JavaScript
27.01.2026
Reading time: 6 min
Share
In dit artikel bekijken we hoe je JavaScript aan HTML toevoegt. Er zijn drie manieren om dit te doen:
-
JS-code plaatsen binnen een gekoppelde <script>-tag
-
Een extern bestand koppelen
-
Code direct in een HTML-tag schrijven met speciale attributen
Laten we elke methode bekijken om de voor- en nadelen te begrijpen.
Code invoegen in een gekoppelde <script>-tag
De eenvoudigste manier om JS-code aan een HTML-pagina toe te voegen, is via de gekoppelde <script>-tag. Deze vertelt de browser dat alle inhoud moet worden geïnterpreteerd als uitvoerbaar script, en niet als tekst of HTML.
Laten we bijvoorbeeld een script toevoegen dat de huidige datum en tijd toont:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Date and Time</title>
</head>
<body>
<script>
let date = new Date();
alert("Now " + date);
</script>
</body>
</html>
Wanneer de pagina wordt geladen, verschijnt er een melding met de huidige datum en tijd.
Je kunt een volledig programma binnen de <script>-tag schrijven. Als voorbeeld maken we een elektronische klok:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Electronic Clock</title>
<script>
function displayTime() {
let element = document.getElementById("clock"); // Find element with id="clock"
let now = new Date(); // Get current time
element.innerHTML = now.toLocaleTimeString(); // Display time
setTimeout(displayTime, 1000); // Call the function every second
}
window.onload = displayTime; // Start displaying the time after the document is loaded
</script>
</head>
<body>
<h1>Electronic Clock</h1>.
<div id="clock"></div>
</body>
</html>
Geweldig! Je hebt JavaScript gebruikt om de actuele tijd toe te voegen aan een HTML-element dat elke seconde wordt bijgewerkt.
De opmerkingen beschrijven precies wat het script doet. Het zoekt het element met id="clock" in de <div> onder de koptekst. Vervolgens wordt de huidige tijd opgehaald, direct na het laden van het document weergegeven en elke seconde vernieuwd.
Dit lijkt handig, maar heeft enkele nadelen. Stel dat je de tijd op elke pagina wilt tonen. Dan moet je de inhoud van de <script>-tag telkens dupliceren.
Een ander probleem is dat hoe groter het script wordt, hoe slechter de leesbaarheid. In het voorbeeld is er slechts één functie. Maar als je er 5, 10 of 20 nodig hebt, is het praktischer om JavaScript via externe bestanden te koppelen.
Externe bestanden koppelen
De <script>-tag wordt ook gebruikt om JavaScript uit externe bestanden te laden via het src-attribuut. Dit kan je eigen bestand zijn of een bibliotheek die extra functionaliteit toevoegt.
We verplaatsen nu de kloklogica naar een apart bestand:
# Time.js file
function displayTime() {
let element = document.getElementById("clock"); // Find element with id="clock"
let now = new Date(); // Get current time
element.innerHTML = now.toLocaleTimeString(); // Display time
setTimeout(displayTime, 1000); // Call the function every second
}
window.onload = displayTime; // Start displaying the time after the document is loaded
Daarna verwijderen we alle JS uit het HTML-bestand en laten alleen de <script>-tag met src over:
#File time.html
<html>
<head>
<meta charset="utf-8">
<title>Electronic Clock</title>
<script src="./time.js"></script>
</head>
<body>
<h1>Electronic Clock</h1>.
<div id="clock"></div>
</body>
</html>.
Het resultaat is hetzelfde: JavaScript voegt de huidige tijd toe aan het HTML-element.
Voordelen van deze aanpak:
-
HTML-bestanden blijven overzichtelijk
-
Alle JS kan in één bestand worden beheerd
-
Als meerdere pagina’s hetzelfde script gebruiken, wordt het slechts één keer geladen en daarna uit de browsercache hergebruikt
JavaScript in HTML-tags
Je kunt JavaScript ook direct in HTML-tags plaatsen via speciale attributen zoals onclick, onmouseover, onkeypress, onload, enz.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript inside an HTML tag</title>
</head>
<body>
<button onclick="alert('Hi! This is how JS works too')">Click me</button>
<button onmouseover="alert('This works too')">Hover over me</button>
</body>
</html>.
Klik op de eerste knop om een melding te zien. Beweeg met de muis over de tweede knop om een andere melding te krijgen.
Je kunt meerdere handlers combineren:
<button onclick="alert('Hi! This is how JS works too')" ; onmouseover="alert('This works too')">Click me</button>
Dit wordt echter beschouwd als slechte praktijk. De meeste ontwikkelaars scheiden inhoud en logica. Bovendien vermindert deze aanpak de leesbaarheid van de code aanzienlijk.
Waar scripts het beste geplaatst worden
Technisch gezien kun je <script> overal plaatsen: in <head> of <body>, aan het begin of einde.
In de praktijk worden scripts meestal net vóór </body> geplaatst. Zo wordt de pagina sneller zichtbaar voor de gebruiker.
Elke <script> blokkeert namelijk het renderen van de pagina totdat het script volledig is geladen en uitgevoerd. Grote bestanden of bibliotheken kunnen daardoor vertraging veroorzaken, vooral bij trage internetverbindingen.
Plaats scripts alleen in <head> als dat echt nodig is (bijvoorbeeld wanneer zonder JavaScript geen content wordt weergegeven). In alle andere gevallen is het beter ze onderaan het document te zetten.
Programmeertaal JavaScript
27.01.2026
Reading time: 6 min
Share
Vergelijkbaar
Heb je vragen,
opmerkingen of zorgen?
Onze professionals staan altijd klaar om je te helpen,
of je nu hulp nodig hebt of gewoon niet weet waar te beginnen
of je nu hulp nodig hebt of gewoon niet weet waar te beginnen
