Werken met tabellen - arrays in JavaScript
In webpagina's krijg je heel vaak te maken met veel identieke elementen (zoals hyperlinks in je pagina). Zodra gelijksoortige elementen voorkomen, worden ze vanzelf per pagina ondergebracht in een tabel, waarbij elk object een eigen index krijgt. Door de tabelvorm met de index hebben de identieke objecten elk een unieke naam gekregen. Bovendien kun je zelf in JavaScript een tabel maken (bijvoorbeeld van een lijst). In JavaScript is een tabel eigenlijk beschikbaar als de objectdefenitie Array.
*LET OP* Arrays en tabellen zijn precies hetzelfde in JavaScript, dus er kan soms een misverstand ontstaan!
De basisprincipes van tabellen in JavaScript
In JavaScript kun je een tabel zelf maken. In de tabel kun je informatie onderbrengen, zoals een reeks waarden die bij elkaar hoort, zoals de maanden van een jaar. Een tabel bestaat uit variabelen (zie een van mijn vorige tutorials). Als je een tabel maakt, moet je altijd óf het aantal variabelen óf de waarde van elke variabele opgeven. Elke tabel krijgt automatisch een index. Dat wil zeggen dat elke variabele in de tabel een indexnummer (kortweg 'index') heeft gekregen.
Eigenschappen van een tabel
Een tabel heeft één eigenschap, namelijk de eigenschap length. De waarde van length is het aantal variabelen waaruit de tabel bestaat. Dus als de tabel 6 variabelen bevat, heeft length de waarde 6.
Een tabel maken in JavaScript
een tabel maak je met de opdracht; tabelnaam = newArray(). Geef bij Array als parameters het aantal variabelen op dat de tabel moet krijgen (je moet in dat geval de tabel alsnog vullen), of geef de waarden van de variabelen op (je moet in dat geval altijd meer dan één waarde opgeven; één parameter wordt opgevat als de lengte-waarde)
tabelnaam = new Array(numerieke waarde)
tabelnaam = new Array(parameter1, parameter2)
Index van een tabel
In een tabel worden de variabelen vanzelf geïndexeerd; elke variabele krijgt een index (nummer). De eerste variabele heeft index 0, de tweede heeft index 1, enz. Dankzij de index heeft elke variabele in de tabel een unieke variabelenaam; de tabelnaam met [tussen vierkante haken] de index van de variabele;
tabelnaam[index]
Tabel vullen; waarden aan variabelen in tabel toekennen via index
Als je de tabel hebt gemaakt door het aantal variabelen op te geven, moet je alsnog de variabelen van een waarde voorzien. Dat doe je met een opdracht die bestaat uit;
*De variabelenaam (dus tabelnaam, gevolgd [tussen vierkante haken] door de index van de variabele)
*Het = teken
*De gewenste waarde
mijn_tabel = new Array("Mokka","Dennis","FangorN","XenoX")
Omdat de variabelen vanzelf worden geïndexeerd, verwijst mijn_tabel[1] naar Dennis.
Werken met de variabelen van de tabel
Het aantal variabelen in de tabel; de lengte van de tabel
Een tabel heeft de eigenschap length. De eigenschap length is het aantal variabelen in de tabel. Een tabel met 10 variabelen heeft length als de numerieke waarde ook 10. Met de numerieke waarde van eigenschap length kun je werken. Je verwijst naar (de waarde van) de eigenschap length met;
tabelnaam.length
Variabelen aan bestaande tabel toevoegen
Je voegt een variabele toe aan een tabel door een nieuwe variabele te maken en die nieuwe variabele een waarde toe te kennen. Stel, je hebt de tabel mijn_tabel die 30 variabelen bevat (de hoogste index is dus 29). Je voegt dan zo een nieuwe variabele toe;
mijn_tabel[30] = waarde
Als je tabel 30 variabelen bevat en je wilt daar 300 van maken, dan gebruik je;
mijn_tabel[299] = waarde
Je hebt nu een tabel met 300 variabelen. De variabelen 30 tot en met 298 zijn nog niet gedefinieerd, en je moet aan deze variabelen nog waarden toe kennen.
Index bepalen met de eigenschap length
Als je een nieuwe variabele aan de tabel wilt toevoegen, en je wilt dat hij aansluit op bestaande variabelen, dan kun je met de eigenschap length de nieuwe index bepalen. De hoogste index is immers altijd de numerieke waarde van length min 1. Wil je de nieuwe variabele laten aansluiten, gebruik je de opdracht;
tabelnaam[tabelnaam.length] = waarde
Variabelen in tabel gebruiken
De variabelen uit een tabel kun je gebruiken zoals je een variabele zou gebruiken. Je kunt de waarde van een variabele uit een tabel weer aan een andere variabele toekennen;
variabelenaam = tabelnaam[2]
Je kunt de inhoud van een variabele tonen met document.write(), zoals;
document.write(tabelnaam[2])
en in plaats van een getal kun je ook een variabele gebruiken om de index aan te geven;
Alle waarden van de variabelen in een tabel gebruiken
Wil je dat de waarden van alle variabelen in de tabel worden gebruikt, (je wilt bijvoorbeeld dat de complete inhoud van de tabel in de browser wordt getoond), dan moet je een for-lus voor de tabel maken. Omdat de hoogste index gelijk is een length - 1 gebruik je als eindvoorwaarde in de for-lus index < tabelnaam.length. Je voert de for-lus dan even vaak uit als er variabele in de tabel staan. Als je tabel mijn_tabel hebt tik je;
for (var index = 0; index < mijn_tabel.length; index++)
{
document.write(mijn_tabel[index]," <BR /> ")
}
Het belang van JavaScript-tabellen in webpagina's
Vaak gebruik je op je webpagina vele identieke elementen, zoals hyperlink, en afbeeldingen. Zodra dit soort objecten elementen voorkomt, ontstaat vanzelf het bijbehorende standaardobject waarin alle elementen in een tabel met index zijn ondergebracht. Zo komen alle hyperlink van een pagina in de tabel links (niet te verwarren met het object link)
en komen alle afbeeldingen in de tabel images. Door de tabelvorm met de index hebben de identieke objecten elk een eigen unieke naam gekregen.
Deze soort objecten (links, anchors, images, forms) zijn eigenschappen van het standaardobject document en je verwijst dus naar deze objecten als volgt
document.eigenschap.[index]
Dus je verwijst naar de eerste afbeelding vanaf links boven in de pagina met de naam document.images[0], naar de tweede met document.images[1], naar de eerste hyperlink met document.links[0], enz.
*LET OP* De identieke elementen van een formulier (zoals radiobuttons en checkboxes) krijgen ook vanzelf een tabelvorm (zie een der volgende tutorials).
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)
