Als je javascript gebruikt wordt de code uitgevoerd op de plek waar je de code schrijft. Laten we de volgende voorbeelden bekijken:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<meta charset="utf-8">
</head>
<body>
<h1>Code Uitvoeren</h1>
<div id="tekst"></div>
<script type="text/javascript">
document.getElementById('tekst').innerHTML="Een div element vullen."
</script>
</body>
</html>
Het div element met de id tekst zal na het laden van de pagina tekst bevatten. De code wordt namelijk uitgevoerd na het maken van het div element.
De volgend code werkt niet. De code wordt uitgevoerd voordat het div element bestaat:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<meta charset="utf-8">
</head>
<body>
<h1>Code Uitvoeren</h1>
<script type="text/javascript">
document.getElementById('tekst').innerHTML="Een div element vullen."
</script>
<div id="tekst"></div>
</body>
</html>
Waar je de code neerzet is dus van belang.
Als je gebruik maakt van knoppen die de gebruiker moet aanklikken, dan maakt het niet zoveel uit waar de code staat. De code wordt namenlijk toch pas uitgevoerd nadat de gebruiker op de knop klikt en de knop is pas beschikbaar als de pagina geladen is.
Meestal willen we de code in de header zetten. Dan staat alles netjes bij elkaar. Ook dan is het mogelijk om code uit te voeren nadat de pagina is geladen. Hiervoor gebruiken we de volgende code:
document.addEventListener("DOMContentLoaded", function(event) {
// de code hier wordt uitgevoerd nadat de pagina is geladen.
});
Alle code die je tussen de { } zet wordt pas uitgevoerd nadat de pagina is geladen. Het maakt niet meer uit waar de code staat in het HTML bestand.