Voorwaardelijke instructies

Net als variabelen zijn voorwaardelijke instructies één van de belangrijkste onderdelen van een programmeertaal. Hiermee bepaalt u wat er moet gebeuren (welke statements worden uitgevoerd) in functie van de toestand van een variabele.

If-else

De instructie die u het meest gaat gebruiken is de if-else structuur.

Indien een bepaalde voorwaarde waar is, voer dan alle instructies uit binnen het if-blok. Indien de voorwaarde onwaar is, voer dan de instructies binnen het else-blok uit. Enkele voorbeelden:

// if met één voorwaarde
if (voorwaarde1) {
    // voer instructie uit indien voorwaarde1 waar is
}

// if-else met één voorwaarde
if (voorwaarde1) {
    // voer instructie1 uit indien voorwaarde1 waar is
} else {
    // zoniet voer instructie2 uit
}

// if-else met meerdere voorwaarden
if (voorwaarde1) {
    // voer instructie1 uit indien voorwaarde1 waar is.
} elseif (voorwaarde2) {
    // voer instructie2 uit indien voorwaarde2 waar is.
} else {
    // zoniet voer instructie3 uit
}

★ Open jsIntro/if_else_1.html. ★ Bekijk het resultaat in een browser.

Op deze pagina vindt u drie script-tags binnen de body-tag. Het commando document.write(...) schrijft op de plaats waar het script wordt aangeroepen een tekst, of beter gezegd, HTML-code. Vandaar dat het ook vrij logisch is dat we de script-tags voorlopig plaatsen waar we de uitvoer willen. Dadelijk gaan we alle commando's onderbrengen in een functie en kunnen we het script wel verhuizen naar onderaan de body-tag.

Laat ons de drie scripts op deze pagina van naderbij bekijken.

// voorbeeld 1: vaste tekst
var getal1 = 8;
if(getal1 > 5) {
    document.write('<p>getal1 is groter dan 5</p>');
} else {
    document.write('<p>getal1 is kleiner dan of gelijk aan 5</p>');
}

Op de eerste lijn stelt u de variabele getal1 gelijk aan 8. Daarna volgt de vergelijking. Is getal1 groter dan 5, toon dan de tekst getal1 is groter dan 5. Is getal1 kleiner of gelijk aan 5, toon dan de tekst getal1 is kleiner dan of gelijk aan 5.

// voorbeeld 2: variabele tekst
if(getal1 > 5) {
    document.write('<p>getal1 heeft de waarde ' + getal1 + 
    ' en is groter dan 5</p>');
} else {
    document.write('<p>getal1 heeft de waarde ' + getal1 + 
    ' en is kleiner dan of gelijk aan 5</p>');
}

Merk op dat de tweede script-tag nog steeds gebruik maakt van de variabele getal1 uit het eerste script-blok. Ook hier maken we net dezelfde vergelijking, maar wordt de string die we uitschrijven halfweg onderbroken en voegen we de werkelijke waarde van getal1 toe. Dus eerst schrijven we een vaste string, daarna de echte waarde van getal1 en daarachter weer een vaste string. Let op dat u de deelstrings steeds mooi afsluit met aanhalingstekens.

Bestaat het if- en het else-statement maar uit één commando, dan kan u de structuur compacter schrijven.

// normale schrijfwijze
if (voorwaarde) {
    // instructie indien waar
} else {
    // instructie indien niet waar
}

// verkorte schrijfwijze
voorwaarde ? instructie indien waar : instructie indien niet waar ;

In het derde voorbeeld gaan we na of getal1 een even of een oneven getal is. Deel het getal door twee en bekijk de restwaarde. Bijvoorbeeld: 8%2 is 0. Dus 0 staat voor een even getal.

// Voorbeeld 3: verkorte if-else
var rest = (getal1%2 == 0) ? 'even' : 'oneven';
document.write('<p>' + getal1 + ' is een ' + rest + ' getal</p>');

★ Wijzig de waarde van getal1 en bekijk het resultaat opnieuw in een browser.

Net zoals we CSS (het visuele) best scheiden van de HTML, is het ook raadzaam om alle scripts volledig te scheiden van HTML. Voor CSS maken we hierbij gebruik van de style-tag waarbinnen alle vormelementen worden opgenomen. Deze style-tag plaatsen we binnen de head-tag, of nog beter, in een extern document.

Ook voor JavaScript trachten we de script-tags zoveel mogelijk bij elkaar te houden. We plaatsen de script-tag dus ook beter onderaan in de body-tag of, indien u het script herbruikt op meerdere pagina's, in een extern js-document.

Maar hoe moet het dan met onze document.write(...) functie uit voorgaande voorbeelden? Met jQuery is dit makkelijk op te lossen. Daarom een extra if-else oefening waarbij we al een tipje van de jQuery-sluier oplichten.

★ Open jsIntro/if_else_2.html. ★ Vul een getal in. ★ Bekijk de broncode.

<!-- HTML-code -->
<label for="getal">Getal: </label>
<div class="input">
    <input type="number" id="getal">
</div>
<div class="message-bar background-success" id="resultaat"></div>

// jQuery script onderaan de pagina
$('#getal').keyup(function () {
    var getal = parseInt($(this).val());
    var rest = (getal % 2 == 0) ? 'even' : 'oneven';
    $('#resultaat').html(getal + ' is een <b>' + rest + '</b> getal.');
});

De elementen die voor ons belangrijk zijn, zijn het tekstveld met id #getal en de div-tag met id #resultaat.

Dan naar het script. Alle jQuery statements beginnen met een dollarteken en de verschillende acties worden met de puntnotatie aan elkaar gelinkt. We krijgen als het ware een ketting van acties.

Laat ons de ketting even verduidelijken.

• $('#getal'); Het eerste deel in de ketting is steeds een selector. In dit voorbeeld wordt het element met id #getal geselecteerd. Merk vooral de analogie met een CSS-selector op!

• $('#getal').keyup(function(){...}); Na de selector volgt het event waar we naar kijken. In dit voorbeeld het keyup-event. Telkens je een toets los laat, wordt dit event opnieuw getriggerd. Aan het keyup-event koppelen we een functie (een actie).

• var getal = $(this).val(); Binnen de selector $(this) verwijst het kernwoord this naar het huidige object, het tekstveld dus. De waarde (de value) van het tekstveld halen we op met val(). De ingevulde waarde wordt vervolgens aan de variabele getal gekoppeld.

• var rest = (getal%2 == 0) ? 'even' : 'oneven'; Met de verkorte if-else constructie bepalen we of het getal even of oneven is. Het resultaat (de string even of oneven) komt in de variabele rest terecht.

• $('#resultaat').html(getal + ' is een ' + rest + ' getal.'); Selecteer het element met id #resultaat (de div-tag dus). Plaats vervolgens het resultaat van getal + ' is een ' + rest + ' getal.' als HTML-code binnen de div-tag.

In jQuery vervangt html(...) de JavaScriptmethode document.write(...). Met de methode html(...) kan u zowel tekst als HTML-code aan de pagina toevoegen. Met een gelijkaardige methode text(...) kan u enkel tekst toevoegen.

• $('#div1').html('Dit is <em>HTML</em>.'); geeft als resultaat: Dit is HTML.

• $('#div1').text('Dit is <em>TEXT</em>.'); geeft als resultaat: Dit is <em>TEXT</em>.

Switch

Met een switch test u de waarde van een variabele in functie van een aantal voorgedefinieerde waardes.

★ Open jsIntro/switch.html. ★ Vul een getal in. ★ Bekijk de broncode.

<!-- HTML-code -->
<label for="getal">Getal: </label>
<div class="input">
    <input type="number" id="getal">
</div>
<div class="message-bar background-success" id="resultaat"></div>

// het script
$('#getal').keyup(function(){
    var getal = parseInt($(this).val()); 
    var txt;
    switch(getal) { 
        case 1:
            txt = "U hebt voor waarde 1 gekozen.";
            break;
        case 2:
            txt = "U hebt voor waarde 2 gekozen.";
            break;
        case 3:
            txt = "U hebt voor waarde 3 gekozen.";
            break;
        default:
            txt = getal + ": U hebt niet voor 1, 2 of 3 gekozen.";
            break;
    }
    $('#resultaat').html(txt);
});

Net zoals in voorgaande oefening wordt het getal via jQuery opgehaald en in de variabele getal geplaatst. getal wordt vergeleken met de eerste case voorwaarde. Indien beide waardes overeenstemmen, worden de bijbehorende statements uitgevoerd. break zorgt ervoor dat men niet in een volgende case terechtkomt. Indien de voorwaarde niet waar is, gaan we verder naar de volgende case enz... Indien geen enkele voorwaarde voldoet, wordt het default statement uitgevoerd.

Let op dat u de break niet vergeet. Anders loopt het programma altijd verder in de volgende case en bekomt u een foutief resultaat.