Foutafhandeling
Aan het eind van het voorbeeld van het vorige hoofdstuk hebben we het al geïtroduceerd zonder het te benoemen: foutafhandeling. Er wordt gecontroleerd of er wel een getal wordt ingevoerd en of dat getal niet negatief is. In de code zie je dat die foutafhandeling als eerste in de conditie structuur is ingevoerd. Dit is erg zinvol. De code van je applicatie kan heel erg gecompliceerd zijn. Als je dan pas in een laat stadium op fouten controleert is het vaak heel moeilijk om zinvolle foutmeldingen netjes te plaatsen.
Aan het einde van deze les weet je :
- hoe foutafhandeling bij meerdere invoervelden netjes kan worden afgehandeld;
- hoe je een formulier maakt waarin meerdere foutvelden worden aangemaakt;
Bekijk de video. Deze video biedt een basis voor de rest van dit hoofdstuk.
Als er slechts één invoerveld is dan is het net zo lastig om de fout controle af te handelen. Zijn er echter meerdere invoervelden dan is het wel zo gebruikersvriendelijk om alle fouten direct te melden, zodat de gebruiker alle fouten gelijk kan herstellen. We geven een voorbeeld en daarna een aantal opdrachten om dit te oefenen.
We keren terug naar de code van opdracht 8 uit het hoofdstuk "Formulieren en events".
| Geef twee getallen |
Bestudeer de bijbehorende code aandachtig!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
table { border: ridge green 3pt;}
td { border-bottom: solid green 1pt;}
</style>
<script type="text/javascript">
function voeruit()
{
//lees invoer
let invoer1 = Number(document.getElementById('invoer1').value);
let invoer2 = Number(document.getElementById('invoer2').value);
//pak alle uitvoer objecten
let fout1object = document.getElementById('fout1');
let fout2object = document.getElementById('fout2');
let uitvoerobject = document.getElementById('uitvoer');
// maak alle uitvoer objecten leeg
fout1object.innerHTML = "";
fout2object.innerHTML = "";
uitvoerobject.innerHTML = "";
// definieer een foutvlag
let foutje=false; // Een fout vlag. Voorlopig nog geen fout dus
// foutje maken we false
// definieer uitkomst tekst nu nog leeg. Wordt alleen gevuld als
// er geen fout optreedt
let uitkomst="";
// test op foute invoer
if( isNaN(invoer1) )
{
fout1object.innerHTML=document.getElementById('invoer1').value
+ " is geen getal";
foutje = true; // zet de foutvlag
}
else
{
if(invoer1==0)
{
fout1object.innerHTML="De invoer mag niet 0 zijn";
foutje = true; // zet de foutvlag
}
}
if( isNaN(invoer2) )
{
fout2object.innerHTML=document.getElementById('invoer2').value
+ " is geen getal";
foutje = true; // zet de foutvlag
}
else
{
if(invoer2==0)
{
fout2object.innerHTML="De invoer mag niet 0 zijn";
foutje = true; // zet de foutvlag
}
}
// Nu alleen aan het werk als er geen fout is opgetreden
// ofwel foutje is false
// "!foutje" staat voor "niet foutje"
if( !foutje )
{
uitkomst = invoer1*invoer2 + invoer1/invoer2 + invoer2/invoer1;
uitkomst = invoer1 +"×"+ invoer2 +" + "
+ invoer1 +"÷"+ invoer2 + " + "
+ invoer2 +"÷"+ invoer1 + " = " + uitkomst;
uitvoerobject.innerHTML=uitkomst;
}
}
</script>
</head>
<body>
<form onsubmit="return false;">
<table summary="">
<tr>
<td>
Geef twee getallen
</td>
</tr>
<tr>
<td valign="top">
<table summary="">
<tr>
<td><input id="invoer1" value="" /></td>
<td id="fout1"><td>
</tr>
<tr>
<td><input id="invoer2" value="" /></td>
<td id="fout2"><td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<button onclick="javascript:voeruit();">Voer uit</button>
</td>
</tr>
<tr>
<td id="uitvoer" valign="bottom">
</td>
</tr>
</table>
</form>
</body>
</html>
- Maak een formulier waarin je een nieuw wachtwoord moet invullen.
Het woord moet minstens 7 tekens lang zijn.
Geef een passende foutmelding of vermeld
"Je wachtwoord is nu <nieuwwachtwoord>.". Tip - Maak een formulier waarin je een getal moet invullen.
Het getal moet een waarde hebben vanaf 1 t/m de lengte
van het woord "hottentottententententoonstelling".
Geef een passende foutmelding of vermeld
"De <getal>de letter in hottentottententententoonstelling is ..". Tip - Maak een formulier met twee invoervelden waarin de gebruiker
in het ene veld een woord en in het andere een getal moet invullen.
Het woord moet minstens 7 tekens lang zijn en mag niet met een cijfer
beginnen. Het getal moet een waarde hebben vanaf 1 t/m de lengte
van het woord. Geef een passende foutmelding of vermeld
"Je wachtwoord is nu 'nieuwwachtwoord'. De <getal>de letter is ..". Tip
Voorzie het document van een foto van een flowchart. - Grafisch deel: Maak twee invoervelden waarmee je de lengte en de breedte van je tekenveld kan zetten. Geef foutmeldingen als er geen getallen zijn ingevuld. Doe je deze opgave dan sla je de volgende over.
-
Maak een formulier, zoals hiernaast is afgebeeld,
waarin de gebruiker twee getallen moet invullen. Met die twee getallen
moet je de berekening getal1getal2 uitvoeren (b.v 23=8).
Geef een passende foutmelding of vermeld
" <getal1><getal2> = ...". Tip 1 en Tip 2.
Voorzie het document van een foto van een flowchart.