JavaScript Waarheen?
De <script>-tag
In HTML wordt JavaScript-code ingevoegd tussen <script>en </script>tags.
Voorbeeld
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Oude JavaScript-voorbeelden kunnen een typekenmerk gebruiken: <script type="text/javascript">.
Het type attribuut is niet vereist. JavaScript is de standaard scripttaal in HTML.
JavaScript-functies en -gebeurtenissen
Een JavaScript functionis een blok JavaScript-code, dat kan worden uitgevoerd wanneer er om wordt gevraagd.
Een functie kan bijvoorbeeld worden aangeroepen wanneer een gebeurtenis plaatsvindt, bijvoorbeeld wanneer de gebruiker op een knop klikt.
In latere hoofdstukken leert u veel meer over functies en gebeurtenissen.
JavaScript in <head> of <body>
U kunt een willekeurig aantal scripts in een HTML-document plaatsen.
Scripts kunnen worden geplaatst in de <body>, of in de <head>sectie van een HTML-pagina, of in beide.
JavaScript in <head>
In dit voorbeeld wordt een JavaScript functionin de <head>sectie van een HTML-pagina geplaatst.
De functie wordt aangeroepen (aangeroepen) wanneer op een knop wordt geklikt:
Voorbeeld
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
JavaScript in <body>
In dit voorbeeld wordt een JavaScript functionin de <body>sectie van een HTML-pagina geplaatst.
De functie wordt aangeroepen (aangeroepen) wanneer op een knop wordt geklikt:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Het plaatsen van scripts onderaan het <body>-element verbetert de weergavesnelheid, omdat scriptinterpretatie de weergave vertraagt.
Extern JavaScript
Scripts kunnen ook in externe bestanden worden geplaatst:
Extern bestand: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Externe scripts zijn praktisch wanneer dezelfde code op veel verschillende webpagina's wordt gebruikt.
JavaScript-bestanden hebben de bestandsextensie .js .
Om een extern script te gebruiken, zet u de naam van het scriptbestand in het src(bron)attribuut van een <script>tag:
Voorbeeld
<script src="myScript.js"></script>
U kunt een externe scriptverwijzing in <head>of plaatsen <body>zoals u wilt.
Het script zal zich gedragen alsof het zich precies daar bevindt waar de <script>tag zich bevindt.
Externe scripts mogen geen <script>tags bevatten.
Externe JavaScript-voordelen
Het plaatsen van scripts in externe bestanden heeft enkele voordelen:
- Het scheidt HTML en code
- Het maakt HTML en JavaScript gemakkelijker te lezen en te onderhouden
- JavaScript-bestanden in cache kunnen het laden van pagina's versnellen
Om meerdere scriptbestanden aan één pagina toe te voegen - gebruik meerdere scripttags:
Voorbeeld
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Externe referenties
Er kan op 3 verschillende manieren naar een extern script worden verwezen:
- Met een volledige URL (een volledig webadres)
- Met een bestandspad (zoals /js/)
- Zonder enig pad
In dit voorbeeld wordt een volledige URL gebruikt om naar myScript.js te linken:
Voorbeeld
<script src="https://www.w3schools.com/js/myScript.js"></script>
In dit voorbeeld wordt een bestandspad gebruikt om naar myScript.js te linken:
Voorbeeld
<script src="/js/myScript.js"></script>
In dit voorbeeld wordt geen pad gebruikt om naar myScript.js te linken:
Voorbeeld
<script src="myScript.js"></script>
U kunt meer lezen over bestandspaden in het hoofdstuk HTML-bestandspaden .