Homepage » Tutorials » Javascript » Switch - element

Switch - element

Info 
Door: Jochemus Moeilijkheidsgraad: 1/3
Views:6.764Reacties: 4(Bekijken)
  Log in om zelf te reageren
 Waardering:5.8/10 (4 stemmen)

Gerelateerde items

Basiscursus Javascript boek




In deze kleine tutorial ga ik het 'Switch-element' uitleggen.
Dit doe ik aan de hand van een voorbeeldscriptje.

#Code
1
2
3
4
5
6
7
8
<head>
    <title>Oefening switch</title>
<script type="text/javascript">
<!--
var dieren = prompt("Hoeveel huisdieren heb je?",2);
-->
</script>
</head>


We creëren hier eerst de variable: dieren, die gelijk een venster oproept waar je gevraagd wordt hoeveel huisdieren je hebt.

Vervolgens:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
<h1>Oefening switch</h1>
<script type="text/javascript">
<!--
switch(dieren){
    case '0':
        document.write('Geen dierenvriend ?');
        break;
    case '1':
        document.write('Is het beestje niet eenzaam ?');
        break;
    case '2':
        document.write('Komen ze een beetje overeen ?');
        break;
    case '3':
        document.write('Leuke bende !');
        break;
    case '4':
        document.write('Gezellige beestenboel');
        break;
    default:
        document.write('Amaai, wie geeft dat allemaal te eten ?');
}

-->
</script>
</body>

Hier staat nu het eigenlijke 'Switch'- element. We geven deze Switch de naam 'dieren'. Een Switch open en sluit je altijd met { en }
Vervolgens hebben we verschillenden 'cases' (zaken). Hier beginnen we naar trouwe gewoon ook steeds van 0 te tellen.
Dus als iemand 0 heeft ingevoerd verschijnt er op het scherm: Geen dierenvriend? Enz ...
Default wordt 'geactiveerd' als er een andere waarde dan 0, 1, 2, 3 of 4 wordt ingevoerd.

Zo zie je dat het 'Switch'-element zeer handig kan zijn en ik hoop dat deze tutorial je ook geholpen heeft.

4 reacties
gieldl Geplaatst op 30-10-2008 om 22:06
 

Regular		 Het enige probleem is dat grapjassen ipv een getal een negatief getal of letters kunnen invoeren, om dit op te lossen:
Voer het volgende in in de body om dit te verhelpen:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script type="text/javascript">
        n = parseInt(dieren);
        if (isNaN(n)){
            window.alert("Voer een getal in aub.");
            window.location.reload(false);
        }
        if (dieren < 0){
            window.alert("Voer een positief getal in aub.");
            window.location.reload(false);
        }
        switch(dieren){
            case "0":
                document.write("Geen dierenvriend ?");
                break;
            case "1":
                document.write("Is het beestje niet eenzaam ?");
                break;
            case "2":
                document.write("Komen ze een beetje overeen ?");
                break;
            case "3":
                document.write("Leuke bende!");
                break;
            case "4":
                document.write("Gezellige beestenboel");
                break;
            default:
                document.write("Amaai, wie geeft dat allemaal te eten ?");
        }
</script>
Zain Geplaatst op 04-03-2008 om 10:26
Avatar van Zain

Regular		 Wist niet dat dit een element genoemt werd :P (a)

Anyhoo, denk dat je dit beter apart kunt houden. Teveel type controle structuren op 1 pagina is een beetje teveel van het goede. Desnoods een CT cursus maken? Desnoods doe je de loops erbij.. Scheelt weer. Kan dan wel behandeld worden in de huidige cursussen, probleem is alleen dat mensen niet weten wat je er écht allemaal mee kan doen.. Dwz; het spelen ermee :)
Mirax Geplaatst op 10-02-2008 om 19:32
 

Moderator		 Misschien kan ik het verwerken in de basiscursus?
indianajames Geplaatst op 04-02-2008 om 19:58
Avatar van indianajames

Moderator		 Ik heb niets tegen de tutorial, maar deze staat hier niet op zijn plaats. Een aparte tutorial voor alle controle structuren heeft geen zin. Er zou één tut moeten zijn over de controle structuren waar deze dan allemaal in vermeld staan...

Pagina 1 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be