Terug naar beginpagina Homepage-Maken.nl
Vimexx Webhosting   

Les 2

Waar je JavaScript kunt plaatsen

Het voorbeeldscript in de vorige les werd tussen de <body> en </body> tags geplaatst.
Je kunt je script in totaal op vier manieren plaatsen:

Scripts in het head gedeelte

Het head gedeelte van een pagina wordt het eerst geladen.
Dus: een script dat je in het head gedeelte zet, is al geladen voordat er code uit het body gedeelte wordt uitgevoerd.
Soms is het vereist om bepaalde JavaScript code in het head gedeelte te zetten, bijvoorbeeld bij het gebruik van functies in JavaScript (dit onderwerp wordt later nog behandeld).

De structuur van een script in het head gedeelte:

<html>
<head>
<script language="JavaScript">
   hier komt de JavaScript code
</script>
</head>

Scripts in het body gedeelte

Een voorbeeld hiervan hebben we in de vorige les gezien.
In het body gedeelte plaats je scripts die uitgevoerd moeten worden als de inhoud van de pagina geladen wordt.

De structuur van een script in het body gedeelte:

<html>
<head>
</head>
<body>
<script language="JavaScript">
   hier komt de JavaScript code
</script>
</body>
</html>

Scripts in het head Ún het body gedeelte

Er is geen limiet aan het aantal scripts dat je in een pagine mag gebruiken.
Je kunt dus zowel JavaScript in het head gedeelte en in het body gedeelte van je pagina zetten.
Het komt vaak voor dat er eerst een aantal functies of variabelen in het head gedeelte worden benoemd met een JavaScript-code, waarna ze door een script in het body gedeelte worden opgeroepen en uitgevoerd.

De structuur van scripts in het head en body gedeelte:

<html>
<head>
<script language="JavaScript">
   hier komt de JavaScript code, bijv. functies en variabelen
</script>
</head>
<body>
<script language="JavaScript">
   hier komt weer JavaScript code
</script>
</body>
</html>

Een extern script maken

Een extern script is een JavaScript code die in een apart bestand staat.
Dit is een JavaScript bestand met de extensie .js.
Zo'n extern script is vooral handig als je een bepaald script op meerdere pagina's wilt uitvoeren.
Nu kun je gewoon naar het externe bestand verwijzen, zonder dat je de JavaScript code op iedere pagina hoeft in te voeren.

In het externe script staat alleen JavaScript code!
Je moet er dus geen HTML tags in zetten.

Dit is een voorbeeld van de inhoud van een .js bestand:

document.write("Dit is een extern script!");

Je ziet: het script bevat alleen JavaScript code en geen HTML tags.
Om er een JavaScript bestand van te maken, is het nu alleen nog nodig om dit bestand op te slaan als .js bestand, bijv. script.js.

Het externe script is nu gemaakt. Nu kunnen we in de HTML pagina naar het externe script verwijzen door middel van de volgende code:

<script language="JavaScript" src="script.js">
</script>

Laten we alles nog eens op een rij zetten in het volgende voorbeeld:

<html>
<head>
</head>
<body>
<script language="JavaScript" src="script.js">
</script>
</body>
</html>

In dit HTML bestand wordt verwezen naar het bestand "script.js".
De inhoud van het bestand script.js is:

<!-- Het script verbergen voor oude browsers
document.write("Dit is een extern script!");
// Einde verbergen -->

Klik hier om dit voorbeeld uit te voeren.

Einde les 2

In deze les heb je gezien waar je JavaScript kunt gebruiken.
Je weet nu onder andere hoe je naar een extern script moet verwijzen.

De volgende les gaat over variabelen.

Homepage-Maken Tip

De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.

Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2018 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]