JavaScript is een scripttaal die veel gebruikt wordt om webpagina’s interactief te maken en webapplicaties (meervoud) te ontwikkelen. JavaScript werkt op alle computersystemen in alle browsers.

De syntaxis van JavaScript vertoont overeenkomsten met de programmeertaal Java. Omdat beide talen het meest zichtbaar zijn op en rond de browser, maar vooral door de naamgeving, worden ze vaak met elkaar verward. De gelijkenis houdt daar echter op, want JavaScript heeft inhoudelijk meer gemeen met functionele programmeertalen, het biedt prototype-gebaseerde overerving en niet, zoals Java en de meeste objectgeoriënteerde talen, klasse-gebaseerde overerving.

In HTML5 is bepaald dat JavaScript de standaardtaal is en is het lang-attribuut optioneel:


<script>
alert('Hallo, wereld!');
</script>
                       

Invoegen van een JavaScript

Het invoegen van JavaScript in een webpagina is niet altijd hetzelfde. In totaal zijn er een viertal manieren om een script in een webpagina in te brengen:

  • in het head gedeelte van de pagina.
  • in het body gedeelte.
  • in het head én het body gedeelte.
  • en in een extern bestand.

Je script staat altijd in een script tag: <script>code</script>

In de head


<head>
<script>
tekst = "Welkom in de wereld van JavaScript.";
</script>
</head>

In de body


<body>
<script>
alert(tekst);
</script>
</body>

Externe link


<script src="extern.js"></script>

JavaScript uitvoeren en testen

Druk op de toets F12 (inspecteren) om het ontwikkelhulpprogramma in een apart venster te starten. Activeer het tabblad Script en klik op de knop Foutopsporing starten.

Het volgende voorbeeld toont hoe je aan een HTML pagina (datum.html) een paragraaf met de datum kunt toevoegen.

<script>
document.write("<p>" + Date() + "</p>");
</script>

Dit voorbeeld gebruikt de internationale schrijfwijze om de datum weer te geven. Pas het JavaScript als volgt aan om de lokale datum weer te geven:

<script>
datum = new Date();
document.write("<p>" + datum.toLocaleDateString() + "</p>");
</script>

De opdracht datum.toLocaleDateString() vormt de internationale datum om tot een datum weergegeven volgens de voorschriften van het land en de taal van de browser.

HTML elementen aanpassen

Het volgende voorbeeld plaats de datum in een reeds bestaande paragraaf.

<p id="datum">  </p>
<script>
datum = new Date();
document.getElementById("datum").innerHTML = datum.toLocaleDateString();
</script>

Om HTML elementen te manipuleren gebruikt JavaScript de DOM methode (Document Object Model) getElementById(). Deze methode zorgt voor toegang tot het element met het opgegeven id. De eigenschap innerHTML zorgt ervoor dat de inhoud van het element vervangen wordt door de datum.

Let op het feit dat het JavaScript na het <p> element staat. Zo wordt het JavaScript pas uitgevoerd na het aanmaken van het <p> element. M.a.w. het <p> element moet bestaan om het te kunnen aanpassen.

Commentaar op het einde van een regel

Alles wat volgt op de tekens // tot het einde van de regel wordt beschouwd als commentaar.

function datumWeergeven(){ // uitvoeren bij het klikken op de knop
// internationale datum opvragen
datum = new Date();
// alert(datum);
/*
De inhoud van het element met het id datum krijgt als inhoud
de datum weergeven naar de normen van het land en de taal.
*/
document.getElementById("datum").innerHTML = datum.toLocaleDateString();
}

Soms is JavaScript in de browser uitgeschakeld

Plaats juist voor de eerste JavaScript opdracht de HTML commentaar tag <!-- en na de laatste JavaScript opdracht sluit je de HTML commentaar tag met -->. De tekens // voor de --> verhinderen dat JavaScript --> ziet als een opdracht.

Functies en events (gebeurtenissen)

JavaScript wordt in een HTML pagina uitgevoerd bij het laden van de pagina. Soms willen we JavaScript pas uitvoeren bij een gebeurtenis (bijvoorbeeld bij het klikken op een knop). In zo'n geval plaatsen we de code in een functie.

Events (gebeurtenissen) worden meestal in combinatie met functies gebruikt (een groep opdrachten starten bij een bepaalde gebeurtenis).

<html>
<head>
<meta charset=utf-8" />
<title>Reactie op gebeurtenis</title>
<script >
function datumWeergeven(){
datum = new Date();
document.getElementById("datum").innerHTML = datum.toLocaleDateString();
}
</script>
</head>
<body>
<h1>Datum weergeven</h1>
<input type="button" onClick="datumWeergeven();" value="Datum weergeven" />
<p id="datum"> </p>
</body>
</html>

Hoofdlettergevoelig

De naam van de functie datumWeergeven bevat een hoofdletter. In tegenstelling tot HTML is JavaScript hoofdlettergevoelig – m.a.w. let op het gebruik van hoofdletters bij JavaScript opdrachten, variabelen, objecten en functies.

Code

JavaScript code (of kortweg JavaScript) is een opeenvolging van JavaScript opdrachten.

De volgende JavaScript code schrijft een Kop en twee paragrafen naar de webpagina:

<script>
document.write("<h1>Dit is een Kop 1</h1>");
document.write("<p>Dit is een paragraaf.</p>");
document.write("<p>En nog een paragraaf.</p>");
</script> 

Elke opdracht wordt door de browser in de volgorde van voorkomen uitgevoerd.

.

Datum en/of tijd weergeven

Pas de pagina event.html aan zodat er drie knoppen staan. Elke knop start bij een klik erop een eigen functie.

De eerste knop bestaat reeds en start de functie datumWeergeven().

Schrijf een tweede functie om de lokale tijd weer te geven. Deze functie lijkt als twee druppels water op de eerste functie, maar gebruikt in de plaats van datum.toLocaleDateString() om de datum weer te geven, datum.toLocaleTimeString() om de tijd weer te geven.

Maak een knop Tijd weergeven waarbij de pas geschreven functie bij het aanklikken wordt uitgevoerd.

Maak een derde functie met bijhorende knop om de datum en de tijd weer te geven. Gebruik in de functie voor het weergeven van de datum en de tijd datum.toLocaleString().

De Kop aanpassen

De Kop 1 (h1) bevat nu Datum weergeven. Verander de inhoud van de h1 tag naar Datum en/of tijd weergeven.

Om de kop bij het klikken op een knop aan te passen:

  • Geef je aan de kop tag (h1) het id kop.
  • Voeg je aan de functie datumWeergeven de volgende opdracht toe:
    • document.getElementById("kop").innerHTML = "Datum weergeven";
    • Verander naargelang de knop waarop geklikt wordt, de kop naar Tijd weergeven of Datum en tijd weergeven.

Javascript afzonderen

Verplaats alle JavaScript code naar een apart bestand en sla dit bestand op als datum.js.

Zorg dat de pagina event.html gebruik maakt van het externe JavaScript bestand datum.js.

Tabbladen

Bij het klikken op een tabblad verschijnt de inhoud van het tabblad en verdwijnt de inhoud van de andere tabbladen.

Met de volgende HTML code maak je een tabblad:

<span style="cursor:pointer" onclick="tabblad1();">HTML </span>

De volgende HTML code bevat de onzichtbare inhoud van het eerste tabblad:

<div id="tab1" style="border:thin solid #000; padding: 0px 5px; display:none">HTML verzorgt de structuur en de inhoud van de webpagina.</div>

Schrijf zelf de JavaScript functie om de inhoud van het eerste tabblad zichtbaar te maken en alle andere tabbladen onzichtbaar te maken als je weet dat de opdracht

document.getElementById("tab1").style.display="";	

het eerste tabblad laat verschijnen en de opdracht

document.getElementById("tab1").style.display="none";

het eerste tabblad laat verdwijnen.

Naast het tabblad HTML, maak je een tabblad CSS met de tekst CSS is verantwoordelijk voor de opmaak, JavaScript met de tekst JavaScript voegt functionaliteit toe, PHP met de tekst PHP maakt dynamische onderdelen op de webserver aan.

Plaats de JavaScript code in een extern bestand.