Javascript is een van de meest gebruikte programmeertalen. De populariteit is vooral te danken aan het feit dat de taal is ingebouwd in ongeveer alle webbrowsers. Javascript wordt dan ook voornamelijk gebruikt om webpagina's interactief te maken. Het kan HTML inhoud en attributen aanpassen, CSS stijlen aanpassen en HTML elementen verbergen en weer zichtbaar maken.
In HTML wordt JavaScript-code ingevoegd tussen <script> en </script> -tags.
Je kunt een willekeurig aantal scripts in een HTML-document plaatsen. Scripts kunnen in de <body>, of in de <head> -sectie van een HTML-pagina worden geplaatst, of in beide.
JavaScript kent ook procedures. In JavaScript noemen we dit een functie (function). Een functie kan bijvoorbeeld worden aangeroepen wanneer zich een gebeurtenis voordoet, bijvoorbeeld wanneer de gebruiker op een knop klikt.
Maak een nieuwe map in XAMPP. Maak in deze map een bestand met de naam index.html en vul dit bestand met de volgende code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<meta charset="utf-8">
<script>
function demo(){
document.getElementById("demo").innerHTML = "Hello JavaScript";
}
</script>
</head>
<body>
<h2>Wat javascript kan doen?</h2>
<p id="demo">JavaScript kan HTML content aanpassen.</p>
<button type="button" onclick="javascript:demo();">Klik hier!</button>
</body>
</html>
Open http://localhost en bekijk het resultaat. Je gaat dit bestand in de rest van de module gebuiken om dingen uit te proberen. Javascipt kan dus de inhoud van een tag aanpassen.
We gaan een paar dingen testen. Vervang nu iedere keer het stukje javascript code in de functie demo met de volgende stukjes code:
In javascript maakt het niet uit of je enkele of dubbele aanhalingstekens gebruikt:
document.getElementById("demo").innerHTML = 'Hello JavaScript';
Je kunt de grootte van het lettertype aanpassen:
document.getElementById("demo").style.fontSize = "35px";
Je kunt tags verbergen:
document.getElementById("demo").style.display = "none";
Maak nu zelf een extra procedure en knop om de tag weer zichtbaar te maken, gebruik hiervoor de volgende code:
document.getElementById("demo").style.display = "block";