Hoofdstuk 5: De selectie

5.1. Definitie en omschrijving

Ook in javascript bestaan er voorwaardelijke instructies. Deze instructies werken eigenlijk als een soort wissels op een spoorweg: ze bepalen in welke richting een programma verdergaat. Het verloop van het script kunt u bijvoorbeeld afhankelijk maken van een waarde die in een geheugenadres is opgeslagen of het resultaat van een berekening(expressie). Met de voorwaardelijke instructies is het mogelijk het menselijke beslissingsproces na te bootsen.

5.2. Eénzijdige selectie
5.2.1 Nassi-Schneidermanndiagram


java5.1.jpg (15011 bytes)

5.2.2 Voorbeeld 1

Probleemstelling
Indien je 500 BEF zakgeld hebt, zul je in een muziekwinkel moeten beslissen of je een cd kunt kopen of niet.

Probleemdefinitie
gegevens :

Probleemanalyse
grofstructuur

java5.2.jpg (21904 bytes)

if-instructies

De voorwaardelijke instructie if biedt toegang tot een script-fragment dat alleen mag worden uitgevoerd wanneer de selectievoorwaarde 'waar' is.Voor if geldt dat het deel van het script dat in dat geval moet worden uitgevoerd, tussen accolades staat:

if (selectievoorwaarde waar is)
{
dan wordt deze opdracht uitgevoerd,
en deze ook
enzovoort
}

U kunt deze instructie overal in het script plaatsen waar u een bepaalde voorwaarde wilt testen en een actie starten op basis van de toestand van die voorwaarde. Stel dat u een variabele met de naam prijs_cd heeft, die de kostprijs van de cd representeert die de gebruiker in een formulier heeft ingevoerd. U kunt deze variabele onderdeel laten zijn van het voordwaardelijke deel van de if-instructie, bijvoorbeeld als volgt:

if (prijs_cd<=500)
{
window.alert("Snel kopen")
}

Is de waarde van de variabele prijs_cd minder of gelijk aan 500, dan is de voorwaarde waar. Dat heeft als resultaat dat het deel tussen de accolades wordt uitgevoerd en verschijnt in dit geval een dialoogvenster met de opgegeven tekst.

Het programmeren
We testen het even uit in onderstaand voorbeeld. (bewaar onder de naam keuze1.htm)
Test het ook enkele malen uit met diverse waarden.

<html>
<head>
</head>
<body>
    <script language="javascript">
    // hierna geven we de variabele prijs_cd een waarde   
    prijs_cd=400
    // hierna volgt de selectie
    if (prijs_cd<=500)
    {
        window.alert('Snel kopen');
    }
    // als controle noteren we ook nog even de juiste waarde
    document.writeln("De prijs van de cd was :" , prijs_cd);
    </script>
</body>
</html>

Bij de if-instructie maken we vaak gebruik van vergelijkingsoperatoren

operator

betekenis
< kleiner dan
> groter dan
<= kleiner dan of gelijk aan
>= groter dan of gelijk aan
!= verschillend van
== gelijk aan

5.2.3 Oefening

Probleemstelling
We maken een drietal-toetsen op 10 punten. De resultaten moeten op het scherm komen en nadien moet indien we minder dan 15 op 30 hebben de tekst verschijnen 'dit is echt te weinig'

Probleemdefinitie
We moeten alvast drie variabelen definiëren (toets1, toets2, toets3).
Daarna moeten we de resultaten weergeven op het scherm (document.write).
We bereken de som van de drie toetsen (resultaat).
We vergelijken ons resultaat met het te behalen resultaat en geven indien nodig commentaar.

Probleemanalyse

java5.3.jpg (11870 bytes)

Programmeren
Oplossing (keuze2.htm)

 

5.3. Eénzijdige selectie met formulier

Het is duidelijk niet de bedoeling dat we telkens in het javascript de waarden moeten aanpassen als we nieuwe waarden wensen uit te testen. Het is juist de bedoeling dat de persoon de pagina bekijkt en invult zodanig dat er interactiviteit(1) ontstaat tussen die persoon en de ontwerper.

interactiviteit(1)
Binnen javascript verwijst het begrip interactiviteit naar de elementen van de taal die het mogelijk maken dat de gebruiker dynamisch met de browser-omgeving kan werken. Wanneer iemand bijvoorbeeld de muiswijzer boven een bepaalde afbeelding plaatst, kan dit voor javascript aanleiding zijn om een bepaald geluid te laten horen, een melding te tonen of een ander script uit te voeren. De voorwaardelijke instructie controleert de huidige status van bepaalde elementen (bijvoorbeeld: is een document ingevuld? Is in een keuzelijst een selectie gemaakt?) en onderneemt op basis daarvan een bepaalde actie.

5.3.1 Voorbeeld 1

Probleemstelling
We maken een invulformulier waarbij de gebruiker zijn eindprocent kan invullen en na het indrukken van een toets krijgt men,  als men 50 of meer heeft de melding dat men geslaagd is.

Probleemdefinitie
We moeten alvast een invulformulier maken met een mogelijkheid tot het invullen van een waarde (tekstvak) voor het eindprocent.
Er moet een knop aanwezig zijn die een bepaalde functie oproept, de selectie
Deze functie moet de controle uitvoeren van de ingebrachte waarde. Oplossing keuze3.htm

Probleemanalyse

java5.4.jpg (16656 bytes)

Programmeren
<html>
<head>
</head>
<body>
    <script language="javascript">
    // controle indien geslaagd of niet
    function controle(f)
    {
    if(f.txtresultaat.value>=50)
        {
        window.alert('je bent geslaagd');
        }
 
    }
    </script>
<form>
<p>Typ hieronder uw resultaat <br>
<input type="text" name="txtresultaat" size="5"><br>
<input type="button" value="druk hier na het getal in te vullen" onclick="controle(this.form)"> </p>
</form>
</body>
</html>

5.3.2 Uitbreiding
Pas bovenstaand programma aan zodat men de melding krijgt 'je bent niet geslaagd' indien men minder heeft dan 50%.
oplossing (keuze3b.htm)

5.3.3 Oefening

Probleemstelling
In een bestelformulier van producten moeten de gebruikers volgende gegevens invullen:
a) Naam en Voornaam
b) Adres
c) Postnummer
d) Gemeente
e) Telefoonnummer
Voordat het formulier verder verwerkt wordt controleren we eerst of de eerste vier gegevens ingevuld zijn. Indien dit niet het geval is moet men de melding krijgen dat men het formulier volledig moet invullen.

Oplossing : keuze4.htm

5.4 De tweezijdige selectie

5.4.1 Inleiding
We hebben in de uitbreiding van de voorlaatste oefening reeds een twee reacties door de ontwerper laten geven. Dit kan eigenlijk wel gemakkelijker door de if-instructie uit te breiden tot de if...else instructie. Met de instructie if... else kunt u kiezen tussen twee of meer te volgen paden in een script: het ene pad wanneer aan de selectievoorwaarde is voldaan, het ander pad wanneer niet aan deze voorwaarde is voldaan.

5.4.2 Nassi-Schneidermanndiagram

java5.5.jpg (10973 bytes)

5.4.3 Voorbeeld 1

Probleemstelling
We berekenen de Body Mask Index van een persoon. Dit kunnen we berekenen door het gewicht in kg te delen door het kwadraat van de lengte (in m). Een normale waarde moet kleiner zijn dan 30! Indien we een waarde hebben van meer dan 30 wegen we te veel (of is zijn we te klein) anders is onze verhouding lengte en gewicht ideaal.

Probleemdefinitie
We moeten twee variabelen definiëren nl gewicht en lengte.
We moeten de berekening van de body mask index uitvoeren.
We moeten  die body mask index evalueren
Indien >30 is dit te veel
Anders is het uitstekend

Probleemanalyse

java5.6.jpg (22826 bytes)

Programmeren.oplossing (keuze5.htm)

<html>
<head>
</head>
<body>
<script language="javascript">
    // evaluatie van bmi
    gewicht=63 //in kg
    lengte=1.8 //in m
    bmi=gewicht/(lengte*lengte)
    if(bmi>=30)
        {
        document.write(" Uw bmi is ",bmi," en dat is teveel")
        }
    else
        {
        document.write("uw bmi is ",bmi," en dat is uitstekend")   
        }
</script>
</body>
</html>

5.4.4 Uitbreiding
Zorg ervoor dat die gegevens kunnen ingevuld worden in een formulier. (Oplossingen: keuze5b.htm en keuze5c.htm)

5.4.5 Oefening

Probleemstelling
We maken een formulier waarbij we een bepaald aantal punten geven op een totaal. We berekenen daarvan het procent en beoordelen of we al dan niet geslaagd zijn (keuze6.htm)
Opmerking we zorgen voor een tekstvak voor het procentresultaat en beoordelingsresultaat.

5.4.6 Voorbeeld 2

Probleemstelling
Het is mogelijk om meer dan 2 resultaten te laten weergeven. We moeten dan enkel in de else- instructie opnieuw een if-instructie inbouwen. We bekijken dat met een volgend voorbeeld.
We gebruiken onze vorige oefening en hernoemen hem naar keuze7.htm de bedoeling is dat we volgende resultaten laten weergeven

>= 90 procent grootste onderscheiding
>= 80 procent grote onderscheiding
>= 70 procent onderscheiding
>= 60 procent voldoening
>= 50 procent geslaagd
< 50 procent niet geslaagd

Probleemanalyse

java5.7.jpg (28578 bytes)

Programmeren

<html>
<head>
</head>
<body>
    <script language="javascript">
    // berekening van procent en beoordeling

    function controle(f)
    {
        f.procent.value=f.behaalde_punten.value/f.max_punten.value*100
        if(f.procent.value>=90)
        {
            f.beoordeling.value="Grootste onderscheiding"
        }
        else
        {
            if(f.procent.value>=80)
            {
                f.beoordeling.value="grote onderscheiding"
            }
            else
            {
                if (f.procent.value>=70)
                {
                    f.beoordeling.value="onderscheiding"
                }
                else
                {
                    if(f.procent.value>=60)
                    {
                        f.beoordeling.value="voldoening"
                    }
                    else
                    {
                        if(f.procent.value>=50)
                        {
                            f.beoordeling.value="geslaagd"
                        }
                        else
                        {
                            f.beoordeling.value="onvoldoende"
                        }
                    }
                }
            }
        }
    }
    </script>

<form>
    <h1>Berekening van procent en beoordeling</h1>
    Hoeveel punten heb je ? <input type="text" name="behaalde_punten" size="5"><br>
    Hoeveel punten is het maximum? <input type="text" name="max_punten" size="5"><br>
    <input type="button" value="berekenen" onclick="controle(this.form)"> <br>
    Procent = <input type="text" name="procent" size="5"> <br>
    beoordeling = <input type="text" name="beoordeling" size="30">
</form>
</body>
</html>

5.5 De meervoudige selectie

5.5.1 Inleiding
De vorige toepassing kunnen we eigenlijk oplossen met een nieuwe methode nl. de meervoudige selectie. Vanaf het ogenblik dat we meer de 2 keuzes hebben is de meervoudige selectie aangewezen. Met een switch opdracht kunnen we het resultaat van de opgegeven expressie vergelijken met het tabel van 1 of meer keuzes. Per keuze (case) kunnen we de sequentie definieren.

Elke keuze kan worden afgesloten met een break statement. Als dus een keuze is gevonden, worden eventuele volgende labels van keuzes niet meer met het resultaat van de expressie vergeleken. Indien gewenst kan je een default keuze defineren, welke wordt uigevoerd wanner het resultaat van de expressie niet als label bij een keuze is gedefinieerd.

5.5.2 Nassi-Schneidermanndiagram

Selectievoorwaarde
geval 1 geval 2 geval 3 geval 4
sequentie 1 sequentie 2 sequentie 3 sequentie 4

5.5.3 Voorbeeld 1

probleemstelling
We willen de gebruiker in staat stellen om zijn eigen achtergrondkleur te selecteren uit een paar knoppen. Ditmaal vragen we de gebruiker niet om te klikken, maar om gewoon met de muis de knop aan te wijzen

Probleemdefinitie
Een formulier maken met een viertal mogelijke kleuren
Bij het aanwijzen van een knop moeten we de keuze gaan bepalen
Keuze 1 = groen
Keuze 2 = rood
Keuze 3 = blauw
Keuze 4 = geel

Probleemanalyse

Achtergrondkleur
Plaats een viertal knoppen
Bij muisovergang kleurwijzigen

 

Bij muisovergang kleurwijzigen
Kleurkeuze
keuze 1 keuze 2 keuze 3 keuze 4
groen rood blauw geel

oplossing (keuze8.htm)

<html>
<Head>
</head>
<body>
<script language="javascript">
   
    function kleur_verandering(keuze)
    {
    switch(keuze)
        {
        case 1 : document.bgColor="green";break
        case 2 : document.bgColor="red";break
        case 3 : document.bgColor="blue";break
        case 4 : document.bgColor="yellow";break
        }
    }

</script>
<form>
<h1>Kies hier zelf uit achtergrondkleur</h1><br>
<input type="button" value="groen" OnMouseOver="kleur_verandering(1)"><br><br>
<input type="button" value="rood" OnMouseOver="kleur_verandering(2)"><br><br>
<input type="button" value="blauw" OnMouseOver="kleur_verandering(3)"><br><br>
<input type="button" value="geel" OnMouseOver="kleur_verandering(4)"><br><br>
</form>
</body>
</html>

5.5.4 Variatie op de oefening

We laten de keuze niet gebeuren door een knop aan te wijzen, maar door een selectie te maken uit een menu.

5.5.5 Oefening 1

Probleemstelling
We willen een eenvoudige rekenmachine maken in onze browser.

Probleemdefinitie
We moeten twee getallen kunnen invoeren
We moeten een keuze maken van een bewerkingsknop
Na de selectie van de bewerking moeten we een resultaat berekenen
Het resultaat moet op het scherm verschijnen

Oplossing keuze8b.htm