Les 3: Keuzes maken

---

---

Hierboven staat een afbeelding waarbij aan het <img> element het id "bewerken" is toegevoegd. Ook een onclick event is aan dit element toegevoegd.

§ 3.1: If-statements - de computer neemt een beslissing

Op het plaatje hierboven staat zoals gezegd een onclick event.
Hierbij verschijnt er een andere afbeelding als je er op klikt.
Maar als je er nogmaals op klikt moet de afbeelding weer terug veranderen naar het origineel.
Dit zou je kunnen doen door middel van een if-statement.
Een if-statement kijkt of een bepaalde voowaarde wáár (true) is. Als de voorwarde waar is dan wordt de code die daar onder staat uitgevoerd.
Als de voorwaarde niet waar (false) is wordt deze code niet uitgevoerd.

De kortste manier om een keuze te schrijven in Javascript is als volgt:



Syntaxregels (lees: afspraken over de schrijfregels):

• de voorwaarde staat tussen ronde haken ( )
• hetgeen er moet gebeuren als de voorwaarde waar is staat tussen accolades { }

Een eenvoudig voorbeeld:



In bovenstaand voorbeeld gebeurt er dus alleen iets als de voorwaarde waar is. Het komt ook voor dat je de computer ook iets wilt laten doen als de voorwaarde niet waar is. In dat geval wordt de keuze met een stukje code uitgebreid:



Een eenvoudig voorbeeld:

§ 3.2: De voorwaarde nader bekeken

Om te beslissen of een bepaalde voorwaarde wáár is moet de computer twee zaken met elkaar vergelijken.
Dit doe je doormiddel van zogenaamde vergelijkingsoperatoren.
Hieronder zie je welke vergelijkingsoperatoren er zijn:

==	is gelijk aan
>	is groter dan
<	is kleiner dan
>=	is groter of gelijk aan
<=	is kleiner of gelijk aan
!=	is niet gelijk aan

Hieronder zie je een mooi voorbeeld van een vergelijkingsoperator (==) in een keuze. De bezoeker moet in een inputbox zijn naam invullen. Dan wordt er, na het klikken op de knop, gekeken of de ingevulde naam gelijk is aan "Bob". Als deze voorwaarde wáár is dan wordt de bovenste code uitgevoerd. Als de voorwaarde niet waar is dan wordt de code in de else uitgevoerd.

Om de twee afbeeldingen te wisselen zoals in het voorbeeld boven aan deze pagina kun je in Javascript laten kijken of de naam van een bepaalde afbeelding matcht met het plaatje genoemd in de src van het img element.
document.getElementById("verander").src.match("javascript_is_leuk"))