Variabelen
Werken met variabelen en waarden.
In JavaScript-programma's maak je gebruik van variabelen. Dankzij variabelen kun je in je scripts informatie vastleggen en later weer opnieuw gebruiken.
Het belang van variabelen en waarden.
In JavaScript-programma's gebruik je variabelen om informatie vast te leggen. Een van de variabele heeft een variabalenaam en een waarde (de informatie die je wilt gebruiken). Die waarde kan alles zijn: getal, tekst, een opdracht, een functie of een object. De waarde van een variabele gebruik je in scripts door de bijbehorende variabelenaam te gebruiken. Je kunt zoveel variabelen maken als je wilt. Vaak moet je variabelen gebruiken in JavaScript (bijvoorbeeld als je gaat rekenen).
Opdracht voor toewijzen aan een variabele.
Met een variabele verwijs je altijd naar een waarde; de waarde is de inhoud van de variabele. Nog anders gezegd: je wijst aan een variabele altijd een waarde toe. De opdracht voor het toewijzen (ook 'toekennen') van een waarde aan een variabele bestaat uit;
*de variabelenaam
*het = teken
*de waarde
Dus als de variabele uitkomst de waarde 44 krijgt, en je geeft de opdracht om bij uitkomst 100 op te tellen dan wordt de uitkomst 144. Als later uitkomst een andere waarde krijgt, dan wordt met de nieuwe waarde uitkomst gerekend.
Variabelenaam
Als je zelf een variabele maakt, kies je altijd eerst de variabelenaam voor de variabele. Je moet bij het kiezen van een variabelenaam de volgende regels altijd in acht houden;
*Gebruik in de variabelenaam alleen letters, cijfers en underscores ('_')
*Het eerste teken MOET een letter of underscore zijn
*Gebruik in de variabelenaam nooit spaties (als je een variabele van mij maakt kies dan van_mij)
*Gebruik geen gereserveerde woorden die je hieronder ziet staan;
| abstract, alert, blur, boolean, break, byte, case, catch, char, class, colse, confirm, const, continue, defeault, do, double, else, extends, false, final, finally, flat, for, function, goto, if, implements, import, in, instanceofint, interface, long, native, new, nul, package, private, protectedm publc, return, short, static, super, switch, synchronize, this, throw, throws, transient, true, try, var, void, while en with |
*LET OP* dat JavaScript hoofdlettergevoelig is.
Het = teken
Het = teken is de toewijzingsoperator die je gebruikt om aan een variabele een waarde te koppelen. Als je een nieuwe variabele introduceert, moet de variabelenaam altijd links van het = teken staan. Alles wat links van het = teken staat is een variabele.
Waarde
Als je aan een variabele een waarde toewijst, dan moet je de notatiewijze van JavaScript volgen. Dus de numerieke waarden en logische waarden zet je NIET tussen aanhalingstekens; strings zet je wel tussen aangalingstekens. Zoals:
*LET OP* Bij het toewijzen van waarden aan variabelen moet links van het = teken altijd de variabelenaam staan! De opdracht 3=uitkomst is ongeldig!
Opdrachten voor variabelen
Variabele aan variabele toewijzen
Aan een variabele kun je een variabele toewijzen, zodat je de waarde van de ene variabele naar de andere toekent:
variabelenaam1=waarde
variabelenaam2=variabelenaam1 |
Nul-waarde aan een variabele toewijzen.
Als je wilt dat de variabele ongedefinieerd blijft, dan moet je de variabele een nul-waarde geven. De nul-waarde ken je toe met het gereserveerde woord null.
Opdracht voor object aan variabele toewijzen
Je kunt aan een variabele een opdracht voor een object toewijzen. Zo kun je bijvoordbeeld een variabele koppelen aan de opdracht window.prompt() waarmee je een venster met een invulregel maakt. De variabele krijgt de waarde die op de invulregel wordt ingetikt.
| variabelenaam=window.prompt() |
Nieuwe waarde aan variabele toewijzen.
De waarde van een variabele ligt in een JavaScript-programma niet persé voor altijd vast. Dezelfde variabele kun je op elke plek in je programma een andere waarde geven. Vanaf dat punt wordt de nieuwe waarde gebruikt. Bovendien kun je een variabele wijzigen, door links van het = teken de variabele te zetten, en dezelfde variabele plus de wijzeging rechts. Om bij een variabele 1 op te tellen, wordt de opdracht;
| variabelenaam=variabelenaam + 1 |
Rekenen in JavaScript met variabelen.
Rekenen in je JavaScript-programma doe je met variabelen en numerieke waarden, waarbij je gebruik maakt van wiskundige operatoren om berekeningen uit te voeren. Je kunt programma's door aan variabelen een numerieke waarde toe te kennen dan wel door aan variabelen een rekenkundige bewerking toe te kennen.
a=7+3
b=10
getal=a/b
document.write(getal) |
De variabele getal krijgt als waarde het resultaat van a gedeeld door b (10 gedeeld door 10). Merk op dat bij het toekennen van een berekening aan een nieuwe variabele de variabelenaam links an het = teken moet staan, zoals hierboven. Vervolgens verschijnt het getal in de pagina met document.write()
Wiskundige operatoren in JavaScript
Bij het rekenen gebruik je wiskundige operatoren (rekentekens). De belangrijkste zijn:
+ Optellen van twee numerieke waarden.
- Aftrekken van twee numerieke waarden.
* Vermenigvuldigen van twee numerieke waarden.
/ Delen van twee numerieke waarden.
% Modulus van twee numerieke waarden.
- Negatieve waarde van één numerieke waarde. Zet het minteken voor de variabele of het getal. |
*TIP* In JavaScript wordt nniet afgerond. Dus 10/9 wordt 1.1111111111111111 (en verder). Hiervoor gebruik je de opdracht math.round() om af te ronden. Deze wordt hieronder bij extra uitleg beschreven.
Rekenvolgorde in JavaScript
Bij het rekenen houdt JavaScript ich aan rekenvolgorde; machtsverheffen, vermenigvuldigen, delen, worteltrekken, tenzij haakjes de rekenvolgorde veranderen. Dus 2 + 3 * 6 wordt 20 (eerst vermenigvuldigen, dan optellen), maar (2+3)*6 wordt 30.
Strings samenvoegen
In JavaScript kun je met de + (de stringoperator) strings samenvoegen (optellen);
tekst="Java"+"Script"
document.write(tekst) |
De waarde tekst wordt de string "JavaScript" (de strings worden samengevoegd zonder spatie).
Werken met variabelen; een voorbeeld
Stel je wilt dat als je pagina verschijnt, er vanzelf een venster verschijnt waarin de bezoeker kan opgeven hoeveel cd's hij van Maroon5 (€25,- per stuk) hij wil kopen. Nadat de bezoeker de invoer heeft bevestigd, verschijnt in het browser-venster het totale bedrag dat de bezoeker moet betalen. Je handelt dan zo;
*Maak een variabele (bijvoorbeeld prijs) en geef due de waarde 25 (de prijs van een cd; bij prijsverandering hoef je alleen de waarde te veranderen).
*Maak een tweede variabele (bijvoorbeeld invoer), en koppel die variabele aan de opdracht window.prompt() om een venster met invulregel te tonen. De invoer van de bezoeker wordt zo aan de variabele invoer gekoppeld.
*Maak een derde variabele (bijvoorbeeld eindbedrag) waarin je als de waarde berekening invoer maal prijs toekent.
*Geef de opdracht document.write() om de waarde van de variabele eindbedrag te tonen in het browser-venster.
*Als grap geef je de opdracht window.alert() de opdracht een waarschuwing te tonen voor het eindbedrag (bijvoorbeeld 'Kun je dit betalen?')
Als het goed zo zijn zo je dan dit moeten hebben ongeveer (mits je de variabelen een andere naam hebt gegeven);
prijs=25.00
invoer=window.prompt(Welkom bij de Maroon5 winkel" + "Hoeveel cd's wil je kopen?", "")
eindbedrag=invoer*prijs
document.write("JE MOET BETALEN:" , "€" , eindbedrag, ",00")
window.alert("Kun je dit betalen?")
|
Werken met ingevoerde informatie in promptvenster
In JavaScript-programma wordt alle invoer in een promptvenster altijd als een string opgevat. In theorie kun je dus niet rekenen met getallen die in een promptvenster worden ingevoerd. In de praktijk gaat rekenen goed aangezien ingevoerde getallen worden opgevat als numerieke waardn zodra je ermee gaat rekenen. Alleen optellen kan fout gaan, omdat ook strings kunnen worden 'opgeteld'. Je moet dan ook bij het optellen altijd de invoer evalueren.
Problemen bij rekenen met ingevoerde informatie
Als je met de invoer van promptvensters wilt gaan vermenigvuldigen (of delen of aftrekken) kan dat zonder enig gevaar;
prijs=25
invoer=window.prompt("Hoeveel cd's wil je?" , "")
document.write("Je moet betalen" , prijs*invoer) |
De waarde van prijs is numeriek en de waarde van invoer is een string. Toch gaat de vermenigvuldeging prijs*invoer goed, omdat JavaScript weet dat je tekst niet kunt vermenigvuldigen, de waarde van invoer is namelijk numeriek.
Het gaat fout als je de invoer gaat optellen, want dat kan ook met strings;
| document.write("Je moet betalen" , prijs+invoer) |
Je kunt dan een onverwachte uitkomst krijgen. Als de waarde 3 is ingevoerd, kan als uitkomst de string 253 (namelijk 25 en 3 achter elkaar) verschijnen.
Van getal (string) een getal (numerieke) waarde maken
Om zeker te weten dat een ingevoerd getal in een promptvenster als numerieke waarde wordt herkendm moet je de invoer van een prompt omzetten naar een numerieke waarde. Je hebt hiervoor drie methoden;
*parseInt()
*parseFloat()
*eval()
Wanneer je werkt met gehele getallen, gebruik je parseInt(). Zoals;
De variabele invoer is gekoppeld aan een prompt. Als 6 wordt ingevoerd, krijgt de invoer string 6 toegekend, en krijgt getal numerieke waarde 6.
Werk je met decimale getallen, gebruik je de methode parseFloat(). Float staat voor floating point number. Bijvoorbeeld;
Werk je met berekeningen, gebruik dan de methode eval(). De opdracht;
| document.write(eval("3+8.5)) |
levert je 11.5 op.
*LET OP* Als de invoer tekst is (en dus niet naar een numerieke waarde kan worden omgezet), dan wordt als waarde NaN (not a number: geen getal) gebruikt.
*LET OP* De methode parseInt() en de methode parseFloat() zijn niet gekoppeld aan een object. Je gebruikt losse methoden. eval() is een methode van alle objecten.
Extra uitleg
Math.round()
Voor het betere rekenwerk (en voor afronden van getallen) gebruik je in je scripts het standaardobject math. Bij math horen methoden om berekeningen uit te voeren. Als je parameters gebruik je numerieke waarden.
Je moet de uitkomst van Math toekennen aan een variabele of gebruiken in een opdracht. Bijvoordbeeld toon je de wortel van 5 met de opdrachten:
variabelenaam=math.sqrt(5);
document.write(variabelenaam) |
of kortweg
| document.write (Math.sqrt(5)) |
Het standaardobject math heeft als eigenschappen bijzondere getallen zoals pi enz. Wil je bijvoorbeeld pi in je browser tonen dan tik je in;
Getallen afronden
In JavaScript worden breuken zoals 1/3 weergeven als 0.3333333333333333335 (in JavaScript is het scheidingsteken een punt). Je doet er kortom verstandig aan om in je scripts waar het nodig is de getallen af te ronden. Gebruik hiervoor de opdracht Math.round() en de volgende truc;
Wil je afronden op één cijfer achter de punt (dus afronden op tientallen), vermenigvuldig dan het gewenste getal vóór de afronding met 10 eb deel de afronding daarna weer door 10; wil je het afronden op twee cijfers achter de punt (honderdtallen dus), vermenigvuldig het dan vóór de afronding met 100 en deel na de afronding weer door 100; wil je het afronden op drie cijfers achter de punt dan gebruik je 1000... Zoals hier;
getal=5.775993992
getal=Math.round(getal*10)/10 |
of;
getal=5.775993992*1000
getal=Math.round(getal)/1000 |
De belangrijkste methoden van Math
abs(x) : Absolute waarde van x
ceil(x,y) : Afronden naar boven van x
max(x,y) : Grootste waarde van x en y
log(x) : Natuurlijk algoritme van x
sin(x) : Sinus van x (in radialen)
asin(x) : Arcsinus van x (in radialen)
tan(x) : Tangens van x (in radialen)
pow(x,y) : Machtsverheffing; xy
round(x) : Afgeronde resultaat van x
floor(x,y) : Afronden naar beneden van x
min(x,y) : Laagste waarde van x en y
exp(x) : Levert E tot de macht x
cos(x) : Cosinus van x (in radialen)
acos(x) : Arccosinus van x (in radialen)
atan(x) : Arctangens van x (in radialen)
sqrt(x) : Wortel van x
|
Belangrijkste eigenschappen van Math
PI : Pi
LN2 : Natuurlijk logaritme van 2
SQRT1_2 : Wortel van 1/2
LOG2E : Op 2 gebaseerd logaritme van E
E : Euler's constante
LN10 : Natuurlijk logaritme van 10
SQRT2 : Wortel van 2
LOG10E : Op 10 gebaseerd logaritme van E |
Einde
Zo dan zijn we nu aan het einde gekomen van deze tutorial, enige vragen kun je aan mij stellen door mij een private message te sturen en als het echt belangrijk is vraag je maar voor mijn msn adres.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.9) 