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:

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.

Plaatje_1.jpg: Een Zonsondergang Plaatje_2.jpg: Ook een zonsondergang Plaatje_3.jpg: Nog een zonsondergang Plaatje_4.jpg: En nog een zonsondergang Plaatje_5.jpg: Nog meer zonsondergang Plaatje_6.jpg: En nog meer zonsondergang

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.

 
terug

html-338; Laatste wijziging: 16 mei 2020