Programmeren met JavaScript

Wil je iets meer dan een statische website? Dan kan je gebruik maken van de programmeertaal “JavaScript”. In deze les leer je de basisprincipes van het programmeren met JavaScript.

In dit hoofdstuk leer je:

  • Basisprincipes van programmeren met JavaScript
  • JavaScript toevoegen aan een HTML-pagina
  • Een Scratch-programma omzetten in JavaScript

JavaScript

Om interactie, logica en animaties toe te voegen aan een website, maken we gebruik van de programmeertaal “JavaScript”. De code van JavaScript kan je eenvoudig linken aan bv. een knop (button) in HTML. In het voorbeeld hieronder zie je de code ‘onclick=”zegHallo()” in de button-tag. Dit wil zeggen dat wanneer er op de knop wordt geklikt (onclick), de functie “zegHallo()” die bovenaan op de pagina staat zal worden uitgevoerd. In het onderstaande voorbeeld zal er nog niets gedaan worden omdat er nog geen extra code is geschreven.

[code lang=”html”]
<head>
<title>…</title>
<script>
function zegHallo(){
//Hier komt JavaScript-code
}
</script>
</head>
<body>
<button onclick="zegHallo()">Tekst op de knop</button>
</body>
[/code]

Belangrijke tips bij het schrijven van JavaScript

Wanneer we in JavaScript code willen toevoegen, moet je rekening houden met enkele belangrijke regels:

  • Zet achter elke instructie een puntkomma (;), bv. omtrek = zijde * breedte;
  • De naam van een variabele mag geen spaties bevatten, bv. oppervlakteVierkant = zijde * zijde;
  • Een kleine letter is niet hetzelfde als een hoofdletter.
  • Wanneer je een lijn code hebt waarvan je niet wil dat het uitgevoerd wordt, kan je dit in commentaar plaatsen. Bv. //Ik ben commentaar.
  • Wanneer je een haakje of accolade zet, moet dit ook altijd terug gesloten worden.
  • Wanneer je tekst wil tonen of vergelijken met een variabele zet je dit steeds tussen dubbele aanhalingstekens. Wil je nog extra tekst toevoegen of een variabele aan tekst plakken, doe je dit met het plusteken. Bv.

[code lang=”JavaScript”]
function berekenPrijs(){
alert("De prijs bedraagt " + prijs);
}
[/code]

JavaScript vergeleken met Scratch

Met Scratch hebben we op eenvoudige manier leren programmeren. De technieken die hierbij aan bod kwamen, komen ook terug bij het echte programmeren. We vergelijken hier een paar Scratch-voorbeelden met een gelijkaardig script.

Een programma starten en tekst tonen

Een programma starten en tekst tonen in Scratch - Hoe doe je dit in JavaScript?

Een programma starten en tekst tonen in Scratch

[code lang=”html”]
<script>
function zegHallo(){
alert("Hallo iedereen!");
}
</script>
<img src="voetbal.jpg" onclick="zegHallo()">
[/code]

Een antwoord bewaren in een variabele

Een antwoord bewaren in een variabele in Scratch - Hoe doe je dit in JavaScript?

Een antwoord bewaren in een variabele in Scratch

[code lang=”JavaScript”]
function vraagGebruikersnaam(){
gebruikersnaam = prompt("Wat is je gebruikersnaam?");
}
[/code]

Tekst samenvoegen

Tekst samenvoegen in Scratch

Tekst samenvoegen in Scratch

[code lang=”JavaScript”]
function toonNaam(){
naam = prompt("Wat is je naam?");
alert("Hallo " + naam);
}
[/code]

Een berekening uitvoeren

Rekenen in Scratch - Hoe doe je dit in JavaScript?

Rekenen in Scratch

[code lang=”JavaScript”]
function berekenPrijs(){
aantal = prompt("Hoeveel producten koop je?");
prijs = 15;
totaalprijs = aantal * prijs;
}
[/code]

Een selectie

Een selectie in Scratch - Hoe doe je dit in JavaScript?

Een selectie in Scratch

[code lang=”JavaScript”]
function berekenPrijs(){
aantal = prompt("Hoeveel producten koop je?");
prijs = 15;
totaalprijs = aantal * prijs;
if(totaalprijs &gt; 100){
alert("Je krijgt 10% korting!");
}else{
alert("Je krijgt geen korting.");
}
}
[/code]

De herhaling of iteratie

De iteratie of herhaling in Scratch - Hoe doe je dit in Javascript?

De iteratie of herhaling in Scratch – Hoe doe je dit in Javascript?

[code lang=”JavaScript”]
function stelVraag(){
var antwoordGebruiker = "";
while (antwoordGebruiker != "Canberra") {
antwoordGebruiker = prompt("Wat is de hoofdstad van Australië?");
}
alert("Correct, u heeft het antwoord geraden.");
}
[/code]