Programmeren in JavaScript/Plaats binnen HTML

Het HTML <script> element

JavaScript opdrachten kunnen geplaatst worden in een HTML-document (we noemen dit ook wel "inline scripting") of in een afzonderlijk bestand. Als de opdrachten in een HTML-document geplaatst worden, moeten ze in een HTML-script-element geplaatst worden. Wanneer de opdrachten in een afzonderlijk bestand geplaatst worden, moet in het HTML-document waar ze bij horen een verwijzing naar dit afzonderlijke bestand geplaatst worden. Deze verwijzing wordt ook in een HTML-script-element geplaatst. Een HTML-script-element dat verwijst naar een afzonderlijk bestand ziet er als volgt uit:

HTML-code: Verwijzen naar een extern JavaScript

<script type="text/javascript" src="externscript.js" />

Een HTML-document waarin JavaScript opdrachten zijn opgenomen ziet er als volgt uit:

HTML-code: inline JavaScript

<script type="text/javascript">
    // hier komen de javascript opdrachten
</script>

Inline scripting heeft het voordeel dat zowel HTML en JavaScript in hetzelfde bestand zitten, hetgeen makkelijk kan zijn tijdens het ontwikkelen en testen . Het plaatsen van JavaScript in een afzonderlijk bestand heeft als voordeel dat het script in meer dan één pagina gebruikt kan worden en dat het gedrag van een pagina (beschreven in JavaScript) gescheiden gehouden wordt van de inhoud (beschreven in HTML).

Scripttaal

Het HTML-script-element zal in de meeste browsers ook werken zonder het attribuut type="text/javascript", omdat JavaScript momenteel de default scripttaal is.

De gebruikte scripttaal kan ook apart (buiten het HTML-script-element) worden opgegeven, en wel in een HTML-meta-element om aan te geven dat alle scripts in het HTML-document in JavaScript geschreven zijn.

HTML-code: meta-element voor scripttaal

<meta http-equiv="Content-Script-Type" content="text/javascript" />

Inline JavaScript vermomd als HTML commentaar

Hoewel ze langzaam aan het "uitsterven" zijn, zijn er nog oudere browsers die het HTML-script-element niet kennen. Om te voorkomen dat deze browsers de JavaScript opdrachten op het scherm tonen is het mogelijk deze als HTML-commentaar te "vermommen".

HTML-code: Vermommen van scripts als HTML commentaar

<script type="text/javascript">
    <!--
    // hier komen de javascript opdrachten
    // -->
</script>

De "//" voor "-->" maskeert dit laatste door er in Javascript commentaar van te maken. De "<!--" wordt gezien als (eenregelig) commentaar in JavaScript, en is bovendien het begin van commentaar in HTML.

Het gebruik van deze vermomming is tegenwoordig eigenlijk niet meer nodig. De browsers die het HTML-script-element niet ondersteunden waren Mosaic, Netscape 1, en Internet Explorer 2. Vanaf Netscape 2.0 (december 1995) en Internet Explorer 3.0 (augustus 1996) herkennen alle browsers het HTML-script-element en tonen geen script opdrachten op de HTML-pagina, of ze nu JavaScript ondersteunen of niet. In de voorbeelden in dit boek zal deze "vermomming" daarom meestal worden weggelaten.

Plaats van script-elementen in het HTML-document

Het HTML-script-element mag bijna overal in het HTML-document geplaatst worden, waarbij het HTML-head-element de voorkeur geniet. Omdat JavaScript opdrachten worden uitgevoerd op het moment dat de browser ze inleest, moeten bijvoorbeeld functie-declaraties eerder in het HTML-document voorkomen dan de aanroep ervan. Het is echter ook mogelijk JavaScript zo te gebruiken dat er pas echt iets wordt uitgevoerd op het moment dat het HTML-document geheel door de browser is gelezen (zie later).