JavaScript Controlestructuren

Via controlestructuren kan je de manier waarop je programma wordt uitgevoerd beïnvloeden.

Vergelijkings- en logische operatoren

De vergelijkings- en logische operatoren geven steeds als resultaat juist (true) of fout (false).

Vergelijkingsoperatoren

Vergelijkingsoperatoren onderzoeken de gelijkenissen of verschillen tussen variabelen of waarden.

Met x = 5 toont de tabel de werking van de vergelijkingsoperatoren:

Vergelijkingsoperatoren worden gebruikt in voorwaardelijke opdrachten om waarden te vergelijken en op basis van het resultaat een actie te ondernemen:

if (leeftijd < 18) alert("Te jong");

Logische operatoren

Logische operatoren onderzoeken de logische samenhang van variabelen of waarden.

Met x = 6 en y = 3 toont de tabel de werking van logische operatoren:

Voorwaardelijke operatoren

Voorwaardelijke operatoren kennen op basis van een voorwaarde een waarde toe aan een variabele.

Syntaxis:

variabele=(voorwaarde)?waarde1:waarde2

Voorbeeld:



Je kunt bewerkingen (operaties) uitvoeren op en met variabelen.

Y = 5;
z = 2;
x = y + z;

De = operator wordt gebruikt om waarden aan een variabele toe te kennen.

De + operator wordt gebruikt om waarden samen te tellen.

De waarde van de variabele x is na het uitvoeren van de opdrachten hierboven 7.

Rekenkundige operatoren

Rekenkundige operatoren worden gebruikt om te rekenen met variabelen en/of waarden.

Met y = 5 toont de tabel de werking van de rekenkundige operatoren:

Toewijzingsoperatoren

Toewijzingsoperatoren worden gebruikt om waarden aan variabelen toe te wijzen.

Met x = 10 en y = 5 toont de tabel hieronder de werking van de toewijzingsoperatoren:

De + operator en strings (tekenreeksen)

De + operator wordt ook gebruikt om string variabelen of tekst waarden aan elkaar te zetten.

begin = "Het is vandaag";
einde = "mooi weer.";
zin = begin + einde;

Na het uitvoeren van deze opdrachten, bevat de variabele zin de tekst "Het is vandaagmooi weer.". Om een spatie tussen de twee strings te plaatsen, voeg je aan één van de twee strings een spatie toe:

begin = "Het is vandaag";
einde = "mooi weer.";
zin = begin + " " + einde;

Na het uitvoeren van de aangepaste opdrachten bevat de variabele zin de tekst "Het is vandaag mooi weer.".

Strings en getallen samenvoegen

Bij het samenvoegen van een getal met een string zal het resultaat steeds een string zijn.

<body>
<p>Twee getallen optellen: <span id="tweegetallen"> </span>.<br />
Twee tekenreeksen samenvoegen: <span id="tweestrings"> </span>.<br />
Een getal en een tekenreeks samenvoegen: <span id="getalstring"> </span>.<br />
Een tekenreeks en een getal samenvoegen: <span id="stringgetal"> </span>.</p>
	
<script>
x = 5 + 5;
document.getElementById("tweegetallen").innerHTML = x;
x = "5" + "5";
document.getElementById("tweestrings").innerHTML = x;
x = 5 + "5";
document.getElementById("getalstring").innerHTML = x;
x = "5" + 5;
document.getElementById("stringgetal").innerHTML = x;
</script>
</body>

Gebruikersinvoer opvragen

In HTML kunnen gebruikers informatie doorsturen met behulp van formuliervelden.

<!DOCTYPE html >
<html >
<head >
<meta charset="utf-8" / >
<title >Formuliervelden </title >
<script >
function bereken() {
// de invoer in het tekstveld met het id prijs lezen
var prijs = document.getElementById("prijs").value;
// de invoer in het tekstveld met het id aantal lezen
var aantal = document.getElementById("aantal").value;
// het resultaat in het tekstveld met het id resultaat plaatsen
document.getElementById("resultaat").value = prijs * aantal;
}
</script >
</head >
<body >
<p >
<label for="prijs" >
Prijs per stuk
</label >
<input type="text" name="prijs" id="prijs" onchange="bereken();" / >
x
<label for="aantal" > Aantal </label >
<input type="text" name="aantal" id="aantal" onchange="bereken();" / >
=
<input type="text" name="resultaat" id="resultaat" / > </p >
</body >
</html >

Rekenen

Maak een webpagina waarmee je een lengte in inch kunt omrekenen naar cm. Waarbij één inch = 2,54 cm.

Maak daarvoor binnen de zin twee tekstvelden

Na het aanpassen van de waarde in het eerste tekstveld moet de waarde van het tweede tekstveld aangepast worden. Bij het aanpassen van de waarde in het eerste tekstveld wordt een functie uitgevoerd waarmee je de waarde in het eerste tekstveld omrekent naar inch en het resultaat in het tweede tekstveld plaatst.

Schrijf de JavaScript functie om inches om te rekenen naar cm.

Bij het testen in de browser wordt de omrekening pas uitgevoerd als je de cursor naar een ander tekstvak verplaatst (werking onchange).

Maak nadien een functie waar je het omgekeerde uitrekent: Een ... inch beeldscherm heeft een diameter van 54 cm.

De trein vertrekt

Het bekendste voorbeeld van de bewerking modulus is de tijdrekening in uren, die modulo 12 of modulo 24 gaat. Zo is de tijd bijvoorbeeld 10 uur na 22 uur gelijk aan 8 uur. Dus 10 + 22 = 32 en 32 modulus 24 is 8. Of met andere woorden 32 gedeeld door 24 is 1 met als rest 8.

Maak in HTML de zin met drie tekstvelden (zie afbeelding) en zorg dat bij het aanpassen van het vertrek of de duur het aankomstuur wordt berekend en weergegeven.

Grafische voorstelling percenten

Maak een HTML pagina met een tekstveld waarin je een percentage kunt ingeven.

Zorg voor een knop waarmee je de aanmaak van de grafische voorstelling met een JavaScript functie kunt starten.

Om twee gekleurde balken naast elkaar op het scherm te plaatsen heb je de volgende HTML code nodig:

<p>
<span id="percentage" style="background-color:#ccccff; display:inline-block; text-align:center"> </span>
<span id="resterend" style="background-color:#ccffcc; display:inline-block; text-align:center"></span>
</p>

Daarbij zorgen CSS stijlen (style) voor de opmaak:

  • background-color: lichtblauwe of lichtgroene achtergrondkleur,
  • display:inline-block: de twee span tags naast elkaar weergeven,
  • text-align:center: de tekst in de span tag centreren.

Schrijf een JavaScript functie waarmee je:

  1. het resterende percentage berekent (100 – opgegeven percentage),
  2. de breedte van de twee span tags overeenkomt met de percentages:
    document.getElementById('percentage').style.width = percent + "%";
    
  3. de percentages in tekstvorm in de twee tags verschijnt.