JS - VARIABELEN

Koppelingen
Voorbeelden bij dit hoofdstuk

HOOFDSTUKKEN

Algemeen
Variabelen
Gegevenstypen
Numbers of getallen
Strings of tekenreeksen
Booleans of logische getallen
Werken met variabelen
Functie
Objects (objecten)
Arrays
De waarde null



Algemeen

Terug naar de top

 

Eén van de belangrijkste kenmerken van een programmeertaal is het kunnen werken met gegevens. In de meeste gevallen gebruikt men hiervoor variabelen.

Een variabele is een plaats waar gegevens of waarden worden opgeslagen. Door het aanroepen van de variabele kan men over het gegeven beschikken en kan men die eventueel wijzigen.
Voordat men een variabele kan gebruiken moet men die eerst declareren. Dat betekent niets anders, dat er een geschikte naam voor een variabele in het programma wordt ingevoerd.
Variabelen kunnen diverse typen gegevens bevatten.

Een gegevenstypeis het soort gegeven dat opgeslagen wordt in een variabele. Er zijn drie gegevenstypen:

  • Numbers - Getallen, zowel hele getallen (integers) als met een komma (floating point).
  • String - Tekenreeksen (tekst, kunnen ook getallen zijn die als tekst zijn opgeslagen)
  • Boolean variabelen (met twee mogelijkheden: waar/onwaar, ja/nee, 0/1)

 

Met (de inhoud van) variabelen kunnen handelingen worden uitgevoerd. Als het om getallen gaat kunnen daar allerlei soorten berekeningen mee uitgevoerd worden . Er kan hierbij gedacht worden aan eenvoudig optelsommetjes, zoals 2 + 3 = 5, maar ook aan ingewikkelder berekeningen als het gemiddelde van 2345 rapportcijfers. Behalve van getallen kan men ook gebruik maken van letters, of een combinatie van beide. In het voorbeeld 2 + 3 = 5 zijn 2, 3 en 5 gegevenstypen, en is 5 tevens de uiteindelijke waarde die wordt toegekend aan de variabele. Met die 5 gebeurt verder helemaal niets, totdat de programmeur opdracht geeft om deze waarde ergens voor te gebruiken.

Bewerkingen kunnen onder andere plaats vinden met gebruikmaking van functies, arrays en objecten.

Variabelen

Terug naar de top

 

Soorten
Er zijn twee soorten variabelen:
* constante variabelen (ook wel `literal' genoemd) en
* gewone variabelen.
Constante variabelen hebben een vaste waarde die door heel het script gelijk blijft. De waarden van gewone variabelen kunnen binnen één script verschillend zijn. Een variabele heeft altijd een naam, die men zelf mag kiezen. Voorbeelden van namen zijn: uitkomst, totaal, resultaat, maar ook totaal_test_voorbeelden of uitkomst_optelsom. Java-Script noemt een naam voor een variabele ook wel een `identifier' (of ook expressie).

Schrijfwijze
Er is een aantal voorwaarden waaraan men zich moet houden:

  1. Behalve letters zijn ook het underscore-teken (_) en de cijfers 0-9 toegestaan in de naamgeving.
  2. Namen mogen geen leestekens of spaties bevatten.
  3. Het eerste teken van een naam moet een letter of underscore-teken zijn.
  4. Namen mogen niet langer zijn dan één tekstregel.
  5. JavaScript is `case-sensitive', wat inhoudt dat er een verschil is in het gebruik van hoofd- en kleine letters.
  6. Er mag geen gebruik worden gemaakt van namen die intern door Java-Script worden gebruikt, voorbeelden hiervan zijn bijvoorbeeld `if' en `else'.

 

Declareren en toevoegen van waarden
Variabelen moeten gedeclareerd (vastgesteld) worden. Dit is nodig, omdat JavaScript dan weet dat een bepaalde waarde aan een variabele is toegekend. Als men niets doet, dan wordt de variabele de eerste keer dat u deze gebruikt automatisch gedeclareerd door Java-Script. Het is ook mogelijk om dit te forceren door het keyword var te gebruiken. De opdracht “var totaal” betekent dat er een variabele is gecreëerd met de naam `totaal'. Bij het decalreren kan men direct ook een waarde toevoegen aan de variabele.
Voorbeelden van het declareren van een variabele zonder en met een waarde:

var straatnaam
var straatnaam = "Ruijsdaellaan"
straatnaam = "Ruijsdaellaan"

Straatnaam is daarbij de identifier/expressie; Ruijsdaellaan de waarde.
Andere voorbeelden:

var x
var autotype
var x = 5
var autotype = "Renault"

Als er als waarde van een variabele een tekst wotrdt gebruikt (hier "Renault") dan dient deze binnen aanhalingstekens te worden geplaatst. Een getal tussen aanhalingstekens wordt ook beschouwd als tekst.

Wijzigen van waarden
In het voorbeeld hieronder wordt een variabele gedeclareerd; wordt er een waarde aan toegekend; wordt deze waarde weergegeven; wordt de waarde gewijzigd; wordt de nieuwe waarde weergegeven:

<script type="text/javascript">
var voornaam;
voornaam="Jan";
document.write(voornaam);
document.write("<br />");
voornaam="Piet";
document.write(voornaam);
</script>

Resultaat:

Jan
Piet

NB. Als een variabele een waarde heeft gekregen en daarna opnieuw gedeclareerd wordt, behoudt hij de oude waarde (uiteraard tot er een nieuwe aan wordt toegevoegd). Voorbeeld:

<script type="text/javascript">
var voornaam;
voornaam="Jan";
document.write(voornaam);
document.write("<br />");
var voornaam;
document.write(voornaam);
document.write("<br />");
voornaam="Piet";
document.write(voornaam);
</script>

Resultaat:

Jan
Jan
Piet

Werkingsgebied / Scope
Variabelen moeten voor JavaScript zichtbaar zijn om ze te kunnen gebruiken. Iedere variabele heeft daarom een scope: een bepaald gedeelte van de JavaScript-code waarin de variabele werkt. Er zijn hierbij twee mogelijkheden: de variabele staat binnen een functie (lokale variabele) of hij staat erbuiten (globale variabele). Staat de variabele er binnen dan geldt deze alleen voor de functie, in het andere geval (dus erbuiten) kan hij overal in het script worden gebruikt.Hier een voorbeeld van het declareren van variabelen en van globale waarden:

x = 0; // Een globale variabele
var y = 'Hallo!'; // Een andere globale variabele

function f(){
var z = 'vossen'; // Een locale variabele
twenty = 20; // Globaal want het keyword var is niet gebruikt
return x; // We kunnen x hier gebruiken omdat die globaal is
}
// De waarde z is niet langer beschikbaar

Gegevenstypen

Terug naar de top

 

Alle variabelen hebben een waarde. Om deze waarde te kunnen berekenen wordt gebruik gemaakt van een aantal verschillende gegevenstypen. In het kort een overzicht daarvan.

Numbers of getallen

Terug naar de top

 

Er zijn twee soorten getallen: integers en floating-point getallen. Integers zijn hele getallen, bijvoorbeeld 23 en 333. In een integer getal komen geen decimalen voor en er bestaan geen negatieve integers. In floating-point getallen komen decimalen wel voor. Een floating-point getal bestaat uit een integer en een decimale breuk, bijvoorbeeld 23.1 en 44.4. Deze getallen kunnen zowel negatief als positief zijn. Bij negatieve getallen wordt er gewoon een minteken voorgezet, bijvoorbeeld -34.5.

In JavaScript worden getallen binair weergegeven. Omdat het binairen zijn, worden, met name bij cijfers achter de komma, de getsallen niet altijd exact weergegeven. Dit kan een probleem zijn als getallen bewerrkt worden voor output. JavaScript heeft daar geen ingebouwde oplossing voor. Bij voorbeeld:

alert(0.94 - 0.01); // geeft weer 0.9299999999999999

Als gevolg moeten getallen altijd afgerond worden als ze gebruikt worden voor output. Er is een method, toFixed(). Deze method maakt echter geen deel uit van de ECMAScript specificaties en wordt in de verschillende omgevingen op een andere wijze uitgevoerd en is daarom niet betrouwbaar.

Getallen kunnen op de navolgende wijzen worden weergegeven:

345 een "integer", hoewel er slechts één numeriek type in JavaScript bestaat
34.5 een floating-point getal
3.45e2 een andere floating-point, die het equivalent is van 345
0377 Een octal integer gelijk aan 255 (Het octal numerieke systeem, of kortweg oct, heeft als basis een 8 getallen systeem, and en gebruikt de cijfers 0 tot en met 7. Het wordt soms in plaats van het hexadecimale systeem gebruikt.)
0xFF Een hexadecimale integer gelijk aan 255 (Het hexadecimale numerieke systeem, of kortweg hex, heeft als basis een 16 getallen systeem, en gebruikt de cijfers 0 tot en met 9 en de letters A tot en met F (of a tot en met f)).

Hexadecimale integers worden bijvoorbeeld bij kleuren gebruikt:

var colorful = new Color( '_root.shapes' );
colorful.setRGB( 0x003366 );

De Number constructor kan gebruikt worden om conversie naar getallen te realiseren:

var myString = "123.456"
var myNumber = Number( myString );

Als het gebruikt wordt als een constructor, wordt een numeric wrapperobject gecreeërd, (hoewel die van weinig waarde is):

myNumericWrapper = new Number( 123.456 );

Strings of tekenreeksen

Terug naar de top

 

Strings of tekenreeksen
Een string bestaat uit een tekenreeks (dus tekst) die direct tussen aanhalingstekens ingevoegd kunnen worden. Deze tekst kan willekeurige tekens bevatten die als literal(letters/letterlijk; waarde is uitdrukkelijk in de programmacode opgenomen) in de variabele wordt ingesloten. Drie voorbeelden: `Hallo allemaal.; `200' en `30 bloemkolen'. Het is toegestaan zowel enkele als dubbele aanhalingstekens te gebruiken. De voorkeur gaat uit naar enkele aanhalingstekens, omdat in HTML gebruik wordt gemaakt van dubbele.

var groet = "Hallo, wereld!";
var andere_groet = 'Groeten, mensen van de Aarde.';

In op Mozilla gebaseerde browsers, kunnen individuele tekens binnen een string worden benaderd (als strings met slechts één teken) met dezelfde notatie als arrays:

var h = greeting[0]; // h bevat 'H'
werkt in op Mozilla gebaseerde browsers

Bij Internet Explorer moeten de individuele tekens benaderd worden met gebruik making van de charAt() methode (waarin wordt voorzien door by String class). Dit heeft de voorkeur bij het benaderen van individuele tekens binnen een string, omdat het ook werkt in op Mozilla gebaseerde browsers:

var h = greeting.charAt(0); // h bevat 'H' - werkt zowel in op Internet Explorer gebaseerde browsers als in op Mozilla gebaseerde browsers

Echter, JavaScript strings zijn onveranderbaar:

greeting[0] = "H"; // ERROR

Toepassen van de gelijkheids (equality) operator ("==") aan beide strings levert true op als de strings dezelfde inhoud hebben. Dus:

var x = "wereld";
var equal = ("Hallo, " + x == "Hallo, wereld"); // equal geeft de waarde true

Booleans of logisch getallen

Terug naar de top

 

Deze kunnen maar twee waarden hebben: `true' of `false'. Booleans worden ook wel binaire waarden genoemd, omdat de computer ze interpreteert als 1 (true) en 0 (false).

Werken met variabelen

Terug naar de top


Functie

Terug naar de top

 

Een functie kan worden herkent doordat deze begint met het woord function en altijd wordt afgesloten met een accolade in de vorm van het }-teken. Als daartussen het keyword var wordt gebruikt, dan betekent dat dat deze variabele alleen kan worden gebruikt binnen deze functie. De variabele heeft een lokale scope. Staat het keyword var erbuiten dan spreken we over een globale scope.

Hierna volgt als voorbeeld een script dat een simpele optelsom kan uitvoeren. In dit document wordt gebruik gemaakt van een formulier en het event onClick. Voor verdere uitleg over function: zie het hoofdstuk over Functies; Voor verdere uitleg over events: zie het hoofdstuk over Events

<HTML>
<HEAD>
<TITLE>Een simpele optelsom</TITLE>
<SCRIPT language="JavaScript">
<!-- hide

function optellen() {
/* Het keyword `function' wordt gebruikt om een functie te beginnen. De naam van de functie is 'optellen'. De accolade ({) na het woord optellen geeft aan dat de definiëring van de functie kan beginnen. */
var x= 12;
var y= 5;
/* Met 'var' wordt een variabele gedeclareerd. De namen van de variabelen zijn `x' en 'y', maar dit had net zo goed 'rood tshirt' en 'blauw tshirt' kunnen zijn. De waarden 12' en '5' zijn toegekend aan de variabelen. */
var totaal= x + y;
/* Een nieuwe variabele 'totaal' is gedeclareerd. De waarde ervan is het totaal van 'x' en */
alert(totaal);
}
/* Alert zorgt ervoor dat de uitkomst van de variabele totaal in een pop-up box verschijnt. Als laatste geeft JavaScript met een sluit-accolade aan dat de functie af is. De gebruikte variabelen zijn allemaal lokaal en zullen alleen binnen deze functie werken.*/

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
12 + 5 = <INPUT type="button" value-"Totaal" onClick-"optellen()">
<!-- Onclick is een event: het geeft aan dat de functie optellen moet worden uitgevoerd als er op de knop wordt geklikt. -->
</FORM>
</BODY>
</HTML>

Objects (objecten)

Terug naar de top

 

De meest basale objecten in JavaScript functioneren als woordenboeken. Deze woordenboeken kunnen elk type waarde bevatten welke daarbij gekoppeld is aan een key welke bestaat uit een string. Objecten met waarden (literals) kunnen ook direct gecreeërd worden en wel als volgt:

var o = {naam: 'Mijn Objecten', doel: 'dit object is volledig zonder doel.',
antwoord: 42};

Waarden van objecten kunnen gecreeërd, vastgesteld, en individeel gelezen worden met gebruikmaking van de bekende dot ('.') notatie of door een zelfde syntax als bij arrays:

var naam = o.naam; // naam bevat nu 'Mijn Objecten'
var antwoord = o['antwoord']; // antwoord bevat nu 42

Object en array literals maken het mogelijk om op eenvoudige wijze flexibele data structuren te creëren:

var myStructure = {
naam: {
voor: "Fred",
achter: "Jansen"
},
leeftijd: 58,
hobbies: [ "computers", "volksdansen" ]
};

Dit vormt de basis voor JSON, wat een simpele notatie is die gebruik maakt van een JavaScript-achtige syntax voor data uitwisseling.

Arrays

Terug naar de top

 

Een Array is een verzameling/vastlegging van integers tot waarden. In JavaScript kunnen alle objecte integers en waden in kaart brengen, maar Arrays vormen een speciaal type object die extra gedragingen en methods kennen die gespecialiseerd zijn in integer indices (e.g., join, slice, en push).

Arrays kennen een length property die gegarandeerd altijd groter is dan de grootste integer index die in het array gebruikt wordt. Het wordt automatisch geupdate als men een property creëert met een nog grotere index. Het schrijven van een kleiner getal naar de length property verwijdert grotere indices. Deze length property is het enige bijzondere element dat Arrays onderscheidt van andere objecten.

Elementen van Arrays kunnen op een normale manier benaderd worden:

myArray[1];
myArray["1"];

De hierboven genoemde arrays zijn een equivalent van elkaar. Het is niet mogelijk om de "dot"-notatie of strings met een alternatieve weergave van het getal te gebruiken:

myArray.1;
// syntax error
myArray["01"];
// niet gelijk aan myArray[1]

Vaststellen van een array kan zowel met gebruik making van een Array literal als de Array constructor:

myArray = [0,1,,,4,5];
// array met lengte 6 en 4 elementen
myArray = new Array(0,1,2,3,4,5);
// array met lengte 6 en 6 elementen
myArray = new Array(365);
// een lege array met lengte 365

Arrays worden geïmplementeerd zodat alleen de elementen die gedefinieerd zijn geheugenruimte gebruiken; zij zijn "karige arrays". Bepalen van myArray[10] = 'iets' and myArray[57] = 'ietsAnders' gebruikt alleen ruimte voor deze twee elementen, evenals elk ander object. De length van de array wordt nog steeds gerapporteerd als 58.

Je kunt de literal object declaratie gebruiken om objecten te maken die in andere talen reageren als associatieve arrays.

hond = {"kleur":"bruin", "grootte":"groot"};
hond["kleur"]; // dit geeft de waarde "bruin"

Je kunt de object en array declaration literals gebruiken om snel arrays te creëeren die associatief, multidimensioneel, of beide zijn.

kat = [{"kleur":"bruin", "grootte":"groot"},
{"kleur":"zwart", "grootte":"klein"}];
kat["kleur"]; // dit geeft de waarde "bruin" kat[0]["grootte"] dit geeft "groot"

hond = {"rover":{"kleur":"bruin", "grootte":"groot"}, "spot":{"kleur":"zwart", "grootte":"klein"}}; hond["spot"]["size"]; // dit geeft "small"

De waarde null

Terug naar de top

 

Deze wordt gebruikt als u een variabele niet wilt definiëren. De waarde wordt aangegeven met het keyword null.

Terug naar de top