If/else bij foute oplossing optelscriptje

[Mathieuu]

Hello again,


Na weer een dagje wat meer over JS geleerd te hebben, had ik besloten een kleine miniscule update toe te voegen aan mijn eerste simpel optel-scriptje; mijn bedoeling was om met if/else ervoor te zorgen dat de gebruiker een alert() melding kreeg wanneer hij/zij iets anders als een nummer intoetste. Dit is ervan gekomen:

[JS]
<script type="text/javascript">

function optellen(a, b)

{

var resultaat = parseInt(a) + parseInt(b);
return resultaat;

}

var getal1 = prompt("Typ het eerste getal");
var getal2 = prompt("Typ het tweede getal");
var uitkomst = optellen(getal1, getal2);



if(uitkomst == ?? ) /* Zie tekst onderaan = * */

{

document.write(getal1 + " plus " + getal2 + " = " + uitkomst);

}



else
{

alert("U hebt verkeerde waarden ingevoerd, probeer opnieuw aub.")

}


</script>
[/JS]


* = Hier geraak ik niet uit wegens een tekort aan kennis, ik wil schrijven: If(uitkomst = een correct getal, doe dan niets speciaal -> dus het gewone document.write(blabla uitkomst)); en vervolgens de else voor als het iets anders is dan een getal. Of is dit anders misschien makkelijker op te lossen?)



Alvast bedankt,
En zo leer ik weer bij


Grtz, Mathieu.

 

[That Guy]

http://www.google.nl/#hl=nl&q=javas...f&oq=javascript+isnumeric&fp=ce6ac19a5642170f

een van de mooiere oplossingen:
[JS]function isNumeric(value)
{
if(value != null && !value.toString().match(/^[-]?\d*\.?\d*$/))
{
return false;
}else{
return true;
}
}
[/JS]
of, korter:
[JS]/* Vegras' meesterlijk (inge-)korte isNumberic: */

function isNumeric(value)
{
return !(value != null && !value.toString().match(/^[-]?\d*\.?\d*$/))
}[/JS]

 

[Mathieuu]

[JS]If(value != null) [/JS] begrijp ik; maar de [JS]!value.toString().match(/^[-]?\d*\.?\d*$/)[/JS] dringt niet helemaal tot me door, sorry..

Greetz

 

[That Guy]

Ah! Geweldig. Je wilt weten waarom het werkt

goed, ik neem aan dat je het begin wel snapt.
[JS]function isNumeric(value)
{

}[/JS]
functie genaamd 'isNumeric' met 1 parameter, genaamd 'value'.
[JS] if(value != null [/JS]
als de parameter ('value') niet gelijk is aan null. Wat is null? Ehm, in JS is null het grote niets. Omdat het een beetje lastig uit te leggen is, moet je maar eens wat google'n, maar check zowiezo http://saladwithsteve.com/2008/02/javascript-undefined-vs-null.html. Zoals je kan lezen is het in deze context nutteloos, maar daar kom ik zo op terug.
[JS]value.toString().match(/^[-]?\d*\.?\d*$/))[/JS]
Dit is een regular expression; een soort van blauwprint van hoe je wilt dat je string eruit ziet. Bijvoorbeeld:

//pseudocode

var blauwprint  = "??? is grappig"

zal dus werken op de string "Dat aapje is grappig" maar niet op "Die apen zijn grappig". Nogmaals, google'n naar 'regular expressions'
In dit geval gebruiken we de '.match()' om te kijken of onze 'value' klopt op de regular expression. Kort samengevat, de expressie zegt:

/^[-]?\d*\.?\d*$/

begin van de string

   eerste karakter MAG een - (minteken) zijn
   er mag 1 of meer nummer voorkomen
   er MAG een punt komen, maar dan moet er wel 1 of meer nummers ervoor staan

er komt nu een of meer nummers

einde van de string

Regexpen zijn erg lastig, dus maak je er niet te veel zorgen over
[JS].toString()[/JS]doet wat het zegt, het converteert je nummer (bv. 2.4) naar een string (dus, "2.4")



Al met al niet zomaar iets! Maargoed, ik zei dat ik zou terugkomen op de 'null' check. Deze is nogal overbodig. Waarom? Nou, als er geen getal ingevoerd wordt, zal de '.match()' altijd false retourneren. Echter: '.match()' retourneert geen 'false' als ie niets vind, maar 'null'. Zie ook http://www.w3schools.com/jsref/jsref_match.asp.





Een verbeterde functie:
[JS]function isNumeric(value)
{
return value.toString().match(/^[-]?\d*\.?\d*$/) != null;
}[/JS]
kortweg: als de waarde NIET match-ed met je value (ofwel: de .match() retourneert null, dus geen matches) dan return je true. Dit is mischien een beetje verwarrend, maar het is hetzelfde als dit:
[JS]function isNumeric(value)
{
if(value.toString().match(/^[-]?\d*\.?\d*$/) != null)
{
//er is een match
return true;
}else{
return false;
}
}[/JS]


:thumb:

 

[Mathieuu]

Even uitschrijven wat ik ervan versta na alles op te zoeken:

Functie isNummer?(waarde)
{

if(waarde.converteer naar string().zoek in string naar:

- / = begin reguliere expressie
- ^ = begin tekenreeks
- [-]? = eventueel een minteken voor het getal
- \d* = een cijfer (* = mag meerdere keren voorkomen na elkaar)
- \.? = eventueel een punt voor een decimaal getal
- \d* = een cijfer (* = mag meerdere keren voorkomen na elkaar)
- $ = einde tekenreeks
- / = einde reguliere expressie

maar != null --> hieruit versta ik dus: maar mag niet gelijk zijn aan "het niets"


Als die match er is (dus een getal dat voldoet aan de regexp en != null), return true; else return false.


Dat is dus eigenlijk het tegenovergestelde als wat jij geschreven hebt, nu hoop ik dat jij een klein foutje gemaakt hebt, en niet dat ik het einde helemaal niet doorheb .

Dit is wat jij zei: als de waarde NIET match-ed met je value, dan return je true.


Verbeter me waar ik overal foutzit .



Mvg, Mathieu.

 

[That Guy]

Hmm, daar was ik al bang voor toen ik mn text schreef, bool-logica - ik houd niet van logica. Soms is het gewoon teveel nadenken. Maargoed, het is nodig eh?


Goed. Als er een match is gevonden, zal er een array worden geretourneerd, met daarin de matches, en dus NIET null. Dus, als de reg GEEN null retourneert, is het een getal. Dat wil je. Ofwel:
[JS]var bool = regex.match(....);

if(bool != null) /* als de regex dus een match heeft */
{
return true; //het is een getal
}else{
return false; //het is geen getal
}[/JS]
nu, dit kan dus korter, door het op 1 regel te zetten. En dat was wat ik eerder postte:[JS]function isNumeric(value)
{
return value.toString().match(/^[-]?\d*\.?\d*$/) != null;
}[/JS]Nu, dat is nogsteeds een beetje vaag. Laten we eens de 2 mogelijkheden even 'erin zetten':
[JS]//stel, het match() gedeelte retourneert null - geen nummer dus:

function isNumeric(value)
{
return null != null;
}[/JS]
dit retourneert (null == null = true) dus in dit geval false. Precies wat we willen, want het was geen getal!



:thumb:

 

[Mathieuu]

Oh nu ben ik helemaal mee! Hoe ik het verstaan had:

if(value.toString().match(/^[-]?\d*\.?\d*$/) != null)

- blablabla EN niet gelijk is aan 'null', dan ..


Maar het moet (obviously achteraf gezien..) zijn:

- ALSS blabla niet gelijk is aan 'null', dan ..


Ik had het gewoon achter elkaar gelezen, terwijl ik totaal vergeten was dat het een statement was .



Om het beter te begrijpen heb ik geprobeerd het stukje script een beetje makkelijker te maken voor mezelf, en dan ben ik op dit gekomen, maar het mist waarschijnlijk stukjes:

[JS]function isNumeric(uitkomst)
{

var regexp = /^[-]?\d*\.?\d*$/
if(regexp.match(uitkomst))

{

return true;

}

return false;

}[/JS]


Kan dit ongeveer kloppen ?


Mvg, Mathieu.



EDIT: Misschien nog adden: if(regexp.match(uitkomst) && uitkomst != null)

 

[That Guy]

neenee, zo werkt t niet. Moet andersom; de match() functie EET een regex, en een string kan m aanroepen:
[JS]
function isNumeric(value)
{
var result, regex;

regex = /^[-]?\d*\.?\d*$/;
result = value.match(regexp);

if(result == null)
{
//value is wel gelijk aan null -> geen getal
return false;
}else{
//value matched met je regex, dus het is een getal:
return true;
}
}[/JS]

:thumb:

 

[Mathieuu]

Haha, ik ben geen makkelijke student precies .

Ok dus het hele script komt er zo uit te zien:

[JS]<script type="text/javascript">

function optellen(a, b)

{

var resultaat = parseInt(a) + parseInt(b);
return resultaat;

}



var getal1 = prompt("Typ het eerste getal");
var getal2 = prompt("Typ het tweede getal");
var uitkomst = optellen(getal1, getal2);
document.write(getal1 + " + " + getal2 + " = " + uitkomst);



function isNumeric(uitkomst)
{
var regex, result;

regex = /^[-]?\d*\.?\d*$/;
result = uitkomst.match(regex);

if(result != null)
{

return true;
}else{

return false;
}
}


</script>[/JS]


Nu heb ik nog twee kleine vraagjes (heb al gewoon geprobeerd dit uit te testen, maar dan gebeurde er niets anders..):

1. Het script bestaat nu zeg maar uit de functie optellen(); de variabelen met prompt() en de functie isNumeric() ; mogen deze 'aparte' delen in willekeurige volgorde staan? Dit omdat bij de isNumeric() de variable uitkomst gebruikt (ervoor al gemaakt, wat als die erna pas staat in het script, want ik meen gelezen te hebben dat javascript gewoon van boven naar beneden opéénvolgend gelezen werd ?)
Nu was ik dus aan het twijfelen: wordt een variabele onthouden tot het sluiten van de pagina, tot aan een "}" ; tot aan </script>; ... ?

2. Kan de return false eventueel vervangen worden door een alert('') ? Dit heb ik reeds geprobeerd, maar er kwam geen errorbox pop-up, er werd gewoon NaN (not a number) aangegeven.. Of is return false een verplichting in dit schript en moet ik alert('') er aan koppelen?

 

[That Guy]

Hmm, ik weet niet of ik je volg, maar: nee, zo werkt t niet.

Eerst: een functie is niets anders dan een stuk code dat je los zet van je script; deze kan je dan aanroepen zovaak je wilt, zonder dat je steeds hetzelfde hoeft te typen. Daarnaast kan je deze stukken code zgn. parameters meegeven, die de code dan op verschillende manieren uitvoerd. Een functie roep je aan door er een haakje-openen en haakje-sluiten achter de functienaam te zetten, met eventuele parameters gescheiden door comma's:
[JS]eenFunctieAanroep();

eenFunctieAanroep(5, 'iets', 6745, 'meer');[/JS]


Een functie parameter kan dezelfde naam hebben als een variabele erbuiten. Ze staan los van elkaar; de zgn.scope is anders. Voorbeeld:
[JS]var getal = 3;

function doeIets()
{
var getal = 5;
alert(getal);
}

doeIets(); //roep functie doeIets aan

alert(getal); //variabele getal
[/JS]
dit zal eest een alert met 5 geven, en dan met 3.
[JS]var iets = "string";

function doeIetsAnders(iets)
{
alert(iets);
}

alert(iets); // 'string'
alert(doeIetsAnders("andere string")); // 'andere string'[/JS]

Over de volgorde gesproken: zet altijd alles wat je gebruikt er boven; anders krijg je een error (xxx bestaat niet).
[JS]function iets()
{
//code
}

function stuff()
{
//code
}

stuff();
iets();[/JS]

nu, in jou geval zou ik er zoiets van maken:
[JS]function optellen(a, b)
{
var resultaat = parseInt(a) + parseInt(b);
return resultaat;
}

function isNumeric(uitkomst)
{
var regex, result;

regex = /^[-]?\d*\.?\d*$/;
result = uitkomst.match(regex);

if(result != null)
{

return true;
}else{

return false;
}
}

var getal1 = prompt("Typ het eerste getal");
var getal2 = prompt("Typ het tweede getal");

if(isNumeric(getal1) && isNumeric(getal2))
{
var uitkomst = optellen(getal1, getal2);
document.write(getal1 + " + " + getal2 + " = " + uitkomst);
}else{
document.write('Verkeerde invoer!');
}[/JS]
of, korter:
[JS]function optellen(a, b)
{
return parseInt(a) + parseInt(b);
}

function isNumeric(value)
{
return value.toString().match(/^[-]?\d*\.?\d*$/) != null;
}

var getal1 = prompt("Typ het eerste getal");
var getal2 = prompt("Typ het tweede getal");

if(isNumeric(getal1) && isNumeric(getal2))
{
var uitkomst = optellen(getal1, getal2);
document.write(getal1 + " + " + getal2 + " = " + uitkomst);
}else{
document.write('Verkeerde invoer!');
}[/JS]



:thumb:

 

[Mathieuu]

Zal wel zijn dat het mij niet lukte . Ik gebruikte function verkeerd ..
In ieder geval, dit verklaart opeens wel héél veel.

Heel erg bedankt!

(en nu nog maar meer prullen en uitproberen tot ik weer frontaal vastloop op iets -> tot dan )




Grtz Mathieu