Hoofdstuk 1 van 12

JavaScript in HTML plaatsen: de scripttag en je eerste Hello World

geverifieerd op 7 september 2026 · 6 min

Kort antwoord

Om JavaScript aan een HTML-pagina toe te voegen, maak je een bestand app.js en laad je het met <script src="app.js" defer></script> in de head, of net vóór </body> zonder defer. Schrijf console.log('Hello World'); in het bestand, open de pagina en de console (F12): het bericht verschijnt.

Aan het einde van dit hoofdstuk, weet je hoe je een JavaScript-bestand aan een HTML-pagina koppelt, kiest tussen de head en het eind van de body, en een bericht toont met alert() of in de console van de browser.

Dit eerste hoofdstuk legt de basis die de volgende hoofdstukken nodig hebben: een HTML-pagina, een JavaScript-bestand dat aan die pagina is gekoppeld, en twee manieren om een bericht te tonen zodat je kunt controleren of de koppeling werkt. Twintig minuten zijn genoeg. Aan het eind heb je je eerste JavaScript-programma geschreven en uitgevoerd in een browser.

Wat JavaScript is (en wat het niet is)

JavaScript is de programmeertaal van webbrowsers. HTML beschrijft de inhoud van een pagina, CSS het uiterlijk, JavaScript het gedrag: reageren op een klik, een formulier controleren, de tekst van een element wijzigen, gegevens laden. Elke browser heeft een engine aan boord die deze code leest en uitvoert.

Twee verduidelijkingen die je onnodig zoekwerk besparen:

  • JavaScript heeft niets met Java te maken. De naam stamt uit 1995 en was een marketingkeuze. De twee talen delen geen syntaxis en geen toepassing.
  • Het blijft niet langer beperkt tot de browser. Met Node.js schrijf je in dezelfde taal servers en tools. Deze tutorial blijft in de browser: dat is de eenvoudigste omgeving om te leren, en hij staat al op je computer.

De HTML-startpagina maken

Open een code-editor (Visual Studio Code is een prima keuze) en maak een map tutoriel-js. Zet daarin een bestand index.html met de minimale structuur van een document:

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon premier script</title>
</head>
<body>
  <h1>Bonjour</h1>
  <!-- Le contenu de votre site ira ici -->
</body>
</html>

Open dit bestand in je browser (dubbelklik erop, of sleep het in het venster). De pagina toont “Bonjour”. Nog geen JavaScript op dit moment.

De scripttag: waar je het JavaScript plaatst

JavaScript komt een pagina binnen via de tag <script>. Die kan de code direct bevatten, of verwijzen naar een extern bestand met het attribuut src. Er zijn drie mogelijke plekken, en de keuze heeft gevolgen.

Aan het eind van de body: eenvoudig en veilig

index.html
<body>
  <h1>Bonjour</h1>
  <script src="app.js"></script>
</body>

De browser leest de HTML van boven naar beneden. Wanneer hij bij de tag komt, bestaat de h1 al: het script kan hem bewerken. Dit is de klassieke plek en hij werkt altijd.

In de head met defer: de moderne aanpak

index.html
<head>
  <meta charset="UTF-8">
  <title>Mon premier script</title>
  <script src="app.js" defer></script>
</head>

defer vraagt de browser om het bestand meteen te downloaden, maar het pas uit te voeren zodra de HTML volledig is gelezen. Dat geeft het beste van beide: het downloaden begint vroeg, de code voert uit zodra de pagina klaar is. Scripts met defer voeren uit in de volgorde waarin ze zijn geschreven.

In de head zonder attribuut: de klassieke fout

html
<head>
  <script src="app.js"></script> <!-- s'exécute avant que le body existe -->
</head>

Hier wordt het script uitgevoerd voordat de h1 is opgebouwd. Elke poging om hem te lezen geeft null terug, en de fout “Cannot read properties of null” verschijnt in de console. Zie je deze fout in hoofdstuk 9, controleer dan eerst de plaats van je tag.

En async?

async downloadt ook parallel, maar voert het script uit zodra het binnen is, zonder te wachten op de HTML of de andere scripts. Dat is handig voor een onafhankelijk script (bijvoorbeeld bezoekersstatistieken), niet voor code die de pagina bewerkt. Onthoud voor deze tutorial defer.

Inline script of extern bestand?

De code kan ook rechtstreeks in de pagina staan:

html
<script>
  console.log('Hello World');
</script>

Handig voor een test van drie regels, slecht voor al de rest: de code is niet herbruikbaar van pagina naar pagina, wordt niet door de browser gecachet, en raakt vermengd met de HTML. Vanaf dit hoofdstuk werken we in een apart bestand, app.js, naast index.html.

Eerste code: “Hello World” met alert()

Maak app.js in dezelfde map als index.html, en koppel het met de tag defer die je hierboven zag. In het bestand:

app.js
alert('Hello World!');

Herlaad de pagina: een dialoogvenster toont het bericht. alert() is een functie van de browser die de pagina blokkeert totdat je op OK klikt. Ze bevestigt dat een script wordt uitgevoerd. Op een echte site gebruik je haar niet, daar onderbreekt ze de bezoeker.

Het echte gereedschap: console.log() en de console van de browser

Vervang de inhoud van app.js:

app.js
console.log('Hello World!');
console.log('Titre de la page :', document.title);
console.log(2 + 3);

Herlaad: er verandert niets op het scherm. Open de ontwikkelaarstools met de toets F12 (of rechtsklik, “Inspecteren”), en dan het tabblad Console. De drie regels verschijnen daar:

code
Hello World!
Titre de la page : Mon premier script
5

De console is de plek waar JavaScript spreekt. Ze toont wat je haar vraagt met console.log(), maar ook alle fouten, met de bestandsnaam en het regelnummer. Houd haar open tijdens de hele tutorial: het is je eerste hulpmiddel om te debuggen, en je kunt er zelfs rechtstreeks JavaScript in typen, zonder bestand, om een idee uit te proberen.

Je eerste foutmeldingen, en hoe je ze leest

Als er niets verschijnt, zegt de console waarom. De drie meest voorkomende gevallen in dit stadium:

  • “Failed to load resource: 404”: het bestand app.js wordt niet gevonden. Controleer dat het in dezelfde map staat als index.html en dat de naam identiek is, hoofdletters inbegrepen.
  • “Uncaught SyntaxError”: een tikfout in de code, vaak een haakje of aanhalingsteken dat niet is gesloten. Het regelnummer brengt je erheen.
  • Helemaal niets, zelfs geen foutmelding: de browser toont een gecachete versie. Herlaad met Ctrl+F5 (Cmd+Shift+R op Mac).

Samenvatting

  • JavaScript komt een pagina binnen via <script src="app.js" defer></script> in de head, of via dezelfde tag zonder defer aan het eind van de body.
  • Een extern bestand is beter dan een inline script zodra de code meer dan een paar regels beslaat.
  • alert() bevestigt dat een script draait, console.log() en de console (F12) zijn de dagelijkse hulpmiddelen.
  • Een foutmelding lees je in de console: bestand, regel, bericht.

In het volgende hoofdstuk, Variabelen en datatypes, begint het programma waarden te onthouden. En wil je eerst een overzicht van het traject, dan geeft de gids om JavaScript te leren de twaalf hoofdstukken en een plan van dertig dagen.

OefeningMaak een pagina die “Welkom” in de console toont bij het laden, en dan, in hetzelfde bestand, een alert die de titel van de pagina toont dankzij document.title. Controleer dat de volgorde van de twee berichten overeenkomt met die van je code.

Veelgemaakte fouten

Het script wordt geladen vóór de HTML Een script in de head zonder defer wordt uitgevoerd voordat de pagina is opgebouwd: document.querySelector('h1') geeft null terug. Voeg defer toe, of plaats de tag aan het eind van de body.
Het pad naar het bestand klopt niet Een src="app.js" zoekt het bestand naast de HTML-pagina. Het tabblad Netwerk van de ontwikkelaarstools toont de 404. De console geeft “Failed to load resource” weer.
Hoofdletters en kleine letters App.js en app.js zijn twee verschillende bestanden op de meeste servers, ook al haalt Windows ze lokaal door elkaar.
Java is geen JavaScript De twee namen lijken op elkaar, de talen niet. Een Java-tutorial helpt je hier niet verder.
Nieuwsbrief

Nieuwe tests, tutorials en projecten, per e-mail.

Reproduceerbare tests, geversioneerde code, gedateerde resultaten. Nooit spam.