Meer over JavaScript

JavaScript is een krachtige en veelgebruikte programmeertaal die werkt in je browser. Je kunt het gebruiken om allerlei verschillende dingen te programmeren, van simpele animaties tot volledige games.

In het boek voegden we een simpel JavaScript-programma toe aan onze browser door de code daarvan in de body van onze pagina te plakken. Maar we hadden het programmaatje (we noemen dat een ‘script’) ook in een apart bestand kunnen zetten. Dat is handig als je hetzelfde script op meerdere pagina’s wil gebruiken. Je hoeft het script zo niet aan iedere pagina toe te voegen. Het maakt je pagina’s ook kleiner, waardoor ze sneller zullen laden.

Knip en plak de JavaScript-code die je in je website hebt gezet in een leeg tekstbestand. Knip alleen het gedeelte tussen de <script>- en </script>-tags. Laat de tags zelf staan:

function swapImage() {

  var imageDisplayed = document.getElementById('toon-plaatje');

  if (imageDisplayed.src.match("afbeeldingen/01.png")) {
    imageDisplayed.src = "afbeeldingen/02.png";
  }
  else {
    imageDisplayed.src = "afbeeldingen/01.png";
  }

}

Sla het bestand op. Geef het een bijpassende naam en gebruik .js als extensie. Bijvoorbeeld: wisselaar.js.

Als je het goed hebt gedaan, staan de tags <script> en </script> nog in de code van je html-pagina. Die gebruik je om je browser te vertellen dat je een script wil toevoegen én waar dat script zich bevindt. Dit doe je met behulp van de attributen type en src:

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

Het attribuut type="text/javascript" vertelt je browser dat je gebruik maakt van JavaScript. Dit is altijd hetzelfde. Het attribuut src="wisselaar.js" vertelt je browser dat hij op zoek moet gaan naar een script met de naam wisselaar.js en dat dat script in dezelfde map staat als de wegpagina.

Als je het .js-bestand ergens anders wil opslaan, moet je het pad naar de juiste map opnemen in je attribuut. Heb je bijvoorbeeld een map gemaakt met de naam ‘javascript’ waar je al je scripts in bewaart, dan ziet je attribuut er zo uit: src="javascript/wisselaar.js".

Op de volgende websites leer je meer over coden met JavaScript: