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:

<body>
<h1 id="begroeting"> </h1>
<script>
var geslacht = "man";
var naam = "Jansens";
var begroeting = (geslacht == "man")?"Mijnheer ":"Mevrouw ";
document.getElementById("begroeting").innerHTML = begroeting + naam;
</script>
	

Voorwaardelijke opdrachten voeren naargelang de voorwaarden verschillende acties uit.

In JavaScript kun je de volgende voorwaardelijke opdrachten gebruiken:

  • if opdracht: voert de code enkel uit als aan de voorwaarde is voldaan,
  • if ... else opdracht: voert bepaalde code uit als aan de voorwaarde is voldaan en andere code als niet aan de voorwaarde is voldaan,
  • if ... else if ... else opdracht: voert één van de vele blokken code uit,
  • switch opdracht: voert één van de vele blokken code uit.

If opdracht

Gebruik de if opdracht om de code enkel uit te voeren als aan de voorwaarde is voldaan.

Syntaxis:

if (voorwaarde) {
code die enkel wordt uitgevoerd als aan de voorwaarde is voldaan
}
	

Voorbeeld:

<h2 id="goede"> </h2>
<script>
// Goedemorgen indien voor 10 uur
var d = new Date();
var time = d.getHours();
if (time < 10){
document.getElementById("goede").innerHTML = "Goedemorgen.";
}
</script>
		

Merk op dat er geen ..else.. in deze code voorkomt. M.a.w. de browser zal de code enkel uitvoeren als aan de conditie is voldaan (voor 10 uur 's morgens).

If ... else opdracht

Gebruik de if ... else opdracht om bepaalde code uit te voeren als aan de voorwaarde is voldaan of andere code uit te voeren als niet aan de voorwaarde is voldaan.

Syntaxis:

if (voorwaarde) {
code wordt uitgevoerd als aan de voorwaarde is voldaan
} else {
code wordt uitgevoerd als niet aan de voorwaarde wordt voldaan
}

Voorbeeld:

if (time < 10){
document.getElementById("goede").innerHTML = "Goedemorgen.";
} else {
document.getElementById("goede").innerHTML = "Goedendag.";
}

If ... else if ... else opdracht

Gebruik de if ... else if ... else opdracht om één van de vele blokken opdrachten uit te voeren.

Syntaxis:

if (eerste voorwaarde) {
code wordt uitgevoerd als aan de eerste voorwaarde is voldaan
} else if (tweede voorwaarde) {
code wordt uitgevoerd als aan de tweede voorwaarde is voldaan
} else {
code wordt uitgevoerd als aan geen enkele voorwaarde is voldaan
}

Voorbeeld:

if (time < 10){
document.getElementById("goede").innerHTML = "Goedemorgen.";
} else if (time >= 10 && time < 16){
document.getElementById("goede").innerHTML = "Goedendag.";
} else {
document.getElementById("goede").innerHTML = "Goedenavond.";
}

Switch opdracht

Gebruik de switch opdracht om één van de vele blokken opdrachten uit te voeren.

Syntaxis:

switch(n){
case 1:
uitvoeren eerste blok opdrachten
break;
case 2:
uitvoeren tweede blok opdrachten
break;
default:
opdrachten die uitgevoerd worden indien n niet gelijk is aan 1 of 2
}

Zo werkt het: Eerst hebben we een enkelvoudige bewerking (n) (meestal een variabele) die één keer geëvalueerd wordt. De waarde van de bewerking of variabele wordt daarna vergeleken met elke case waarde in de controlestructuur. Bij een overeenkomst wordt de bijhorende blok opdrachten uitgevoerd. De break opdracht sluit de blok uit te voeren opdrachten af. Zonder de break opdracht worden de opdrachten van de volgende case verder uitgevoerd.

Voorbeeld:

<p id="weekdag"></p>
<script>
// begroeting naargelang de weekdag
var d=new Date();
var weekdag=d.getDay();
switch (weekdag){
case 5:
document.getElementById("weekdag").innerHTML = "Eindelijk vrijdag.";
break;
case 6:
document.getElementById("weekdag").innerHTML = "Super zaterdag.";
break;
case 0:
document.getElementById("weekdag").innerHTML = "Rustige zondag.";
break;
default:
document.getElementById("weekdag").innerHTML = "Ik kijk uit naar het weekend.";
}
</script>

Let op: Als de case waarden teksten (strings) zijn, moet je deze tussen aanhalingstekens plaatsen.

case "Nederlands":
	

Spreuk van de maand

Elke maand willen we op de webpagina een spreuk van de maand plaatsen. Kies zelf voor eigen spreuken

Maak een HTML pagina met een aanpasbare alinea (p tag).

De JavaScript code bevat:

  • Een variabele datum met als waarde de datum van vandaag.
  • Met de JavaScript code datum.getMonth() kan je de maand uit de variabele datum halen (getallen van 0 tot en met 11, waarbij het getal 0 de maand januari voorstelt).
  • Gebruik deze JavaScript code in een switch opdracht om in de aanpasbare alinea elke maand een passende spreuk te plaatsen.

Om dezelfde opmaak te bekomen, gebruik je in de teksten (strings) de tag
om een nieuwe regel aan te maken. Een voorbeeld:

"Is maart guur,
dan krijg je een volle schuur."

Afbeeldingen toevoegen

Zoek zelf naar gepaste afbeeldingen bij de spreuken.

Plaats in de HTML code boven de aanpasbare alinea een links uitgelijnde aanpasbare afbeelding:

<img id="afb_maand" align="left" />

Voeg voor elke maand de bijhorende afbeelding naast de spreuk. Voorbeeld:

document.getElementById("afb_maand").src = "spreuken/spreuk-mei.gif";