JavaScript-object als associatieve array
De naam "associatieve array" is een aanduiding voor een opvallende eigenschap van JavaScript, nl. dat je de eigenschappen van een object en de data binnen een object kunt benaderen als een array.
Alles wat als HTML-document op je scherm verschijnt en wat geen tekst is, is binnen de browser een object. Zo zijn er objecten voor plaatjes, formulieren, hyperlinks, enz. Elk van deze objecten wordt in een array gezet. Dat geldt ook voor objecten die je zelf maakt, zie het item Zelf objecten maken en gebruiken.
Voorbeeld 1
Dit document bevat een aantal hyperlinks. Er is dus een array met evenveel elementen als er hyperlinks zijn. De eerste link heeft
volgnummer 0; de tweede link heeft volgnummer 1, enz.
Als je in het veld hieronder een volgnummer invult, verschijnt de link-tekst (of, indien van toepassing: het plaatje) van
de betreffende link.
Probeer eens volgnummer 4 :-)
De in het voorbeeld gebruikte referentie aan de hyperlinks is:
document.links.[volgnummer].innerHTML.
Je kunt dus een hyperlink (en elk ander object) benaderen vanuit een JavaScript, mits je het volgnummer binnen je document weet. Voor een eenvoudig document is dat goed te doen, maar voor grote, complexe, documenten is het ondoenlijk. Dan heb je iets nodig om de objecten direct aan te spreken. Dat is het attribuut name. Daarmee kun je refereren aan een bestaand object zonder je druk te hoeven maken over de plaats van het object in de objecten-array van het document.
Er zijn binnen JavaScript twee mogelijkheden om name te gebruiken:
- document.Object['name'].eigenschap
- document.Object.name.eigenschap
De eerste mogelijkheid is de 'echte' toepassing van een associatieve array. De tweede mogelijkheid lijkt meer op een object-geöriënteerde aanpak. Het effect van beide benaderingen is hetzelfde. Het is een kwestie van persoonlijke voorkeur welke je gebruikt. Mijn voorkeur is de 'echte' associatieve array.
Voorbeeld 2
Hieronder zie je zes plaatjes. Elk heeft een alt attribuut: plaatje_1.jpg, plaatje_2.jpg, enz. De volgorde in de array
van Image-objecten is 0 t.m. 5. Als je met de muis over de plaatjes gaat zie je de volledige alt-tekst. Wanneer je op
een plaatje klikt zie je de effecten van de drie mogelijkheden om een object te benaderen.
In dit geval wordt de eigenschap alt van het object Images gebruikt.
 |
 |
 |
 |
 |
 |
Beweeg met de muis over de plaatjes en klik er op!
Dit gaat fout als je in het eerste voorbeeld nr. 3 hebt gekozen (en er dus een extra plaatje op het scherm staat).
Het eerste plaatje van de rij hierboven in de image-array van deze bladzijde, heeft nu volgnummer 1 en niet meer volgnummer 0.
Dit toont aan dat het altijd verstandig is aan een id te refereren in plaats van aan het volgnummer van een element in het document.
Toepasbaarheid:
Deze techniek is toepasbaar toepasbaar voor de volgende HTLM-tags / JavaScript-objecten:
| <Tag> / Object | Beschrijving | |
| <a> / Anchor | Anker, locatie in een document. De
<a>-tag heeft het attribuut id, maar kan ook href hebben. Als de <a>-tag beide attributen
id en href heeft, zijn er twee objecten voor deze tag. Gebruik: document.getElementById(anchor_name) document.anchors[i] of document.anchors['anchor_name'] Zie ook bij <A> / Link. |
|
| <a> / Link | Hyperlink. De
<a>-tag heeft het attribuut href maar kan ook id hebben. Als de <a>-tag beide attributen
id en href heeft, zijn er twee objecten voor deze tag. Gebruik: document.getElementById(link_name) document.links[i] of document.links['link_name'] Zie ook bij <a> / Anchor. |
|
| <button> / Button | Button in een formulier.
Gebruik: form.button_name form.elements[i] of form.elements['button_name'] |
|
| <checkbox> / Checkbox | Voor één enkel
selectievakje met een unieke name: form.name of form.elements[i] Voor een groep selectievakjes met dezelfde naam: form.name[i] |
|
| <form> / Form | Formulier. Gebruik: document.form_name document.forms[i] of document.forms['form_name'] |
|
| <img> / Image | Plaatje. Gebruik: document.images.image_name document.images[i] of document.images.['image_name'] |
|
| <input> / Input | Invoerveld in een formulier. Het object
wordt ingezet voor alle waarden van het attribuut type, ook voor Button. Gebruik: form.input_name form.elements[i] of form.elements['input_name']. Afhankelijk van de waarde van het attribuut type kunnen er extra JavaScript objecten worden gemaakt, zoals daar zijn: Button, Checkbox, FileUpload (bij type="file"), Hidden, Password, Radio, Reset, Submit, Text en TextArea. Deze objecten benader je op dezelfde wijze als Input. |
Tenslotte:
Het attribuut name is in veel gevallen niet meer beschikbaar in HTML5. Je kunt dat in veel gevallen oplossen
door name te vervangen door id. Je refereert dan aan een object met de JavaScript function getElementById().
De HTML5-specificatie noemt geen aanpak voor voor het markeren van een plaats in een document, zoals je in HTML 4 doet met
<a name=>-tag. Voor het maken van bookmarks binnen een pagina gebruik je in een HTML5-document het attribuut id.
Bij het schrijven van dit verhaal is onder andere gebruik gemaakt van het (Engelstalige) artikel: "Objects as associative arrays" door Peter-Paul Koch.
Opmerking:
Meer informatie over het gebruiken van arrays vind je in het item Werken met Arrays.
