Werken met array's

in JavaScript

Javascript kent het array als object. In deze reeks gaan we daar veel van zien. een object kent vele eigenschappen. Zie bijvoorbeeld: http://www.w3schools.com/jsref/jsref_obj_array.asp. Maar omdat het array ook een object is, kunnen we er zelf eigenschappen aan toevoegen met het prototype-eigenschap van objecten in JavaScript. De eigenschappen van het array die we tegenkomen zijn: length, push(), indexOf(), slice() en concat().

Werken met array's stap 1: array weergeven (00:12:13)

Eerst wordt het gewenste eindresultaat getoond. In de DOM worden de elementen voor uit- en invoer van de noodzakelijke id's voorzien.
In het script wordt een functie aangemaakt, die de inhoud van de array omzet naar een string. Dit gaat via een for-lus.
Er wordt een apart script gemaakt met extra functionaliteit voor arrays. Omdat een array in JavaScript een object is, kunnen we dat via prototype extra functionaliteit geven.
We maken hier een prototype schrijfUit(), die je op elk rara kunt loslaten met array.schrijfUit();
Het aantal elementen van de array kan in een keer worden uitgevoerd door de array.length toe te kennen aan de inhoud van dat DOM-element.

Werken met array's stap 2: invoer toevoegen (00:06:29)

Voor het invoerveld voegen we een eventListener toe, die reageert op een keydown: het aanslaan van de enter-toets. De bijpassende keyCode is daarvoor 13.
Met de push()-method wordt dan de waarde (value) van het invoerelement toegevoegd aan de array. De invoer moet weer geleegd worden voor de volgende invoer kan plaatsvinden.

Werken met array's stap 3: sorteren (00:14:30)

Sorteren is echt een klus voor computers. Het Frans voor computer is 'ordinateur'.
Als eerste stap in het sorteerproces wordt de kleinste gezocht.
Met een for-lus lopen we alle elementen van het array door en vergelijken de met de kleinste waarde. Deze had in eerste instantie ie de grootte van het eerste element gekregen.
Dit levert de kleinste waarde op, en met indexOf() bekijken we op welke plaats dit kleinste element in de array voorkomt.
Dit kleinste element wordt aan een lege array toegevoegd. Uit het oorspronkelijke array moet het worden verwijderd. We doen dit door het te verwijderen uit een tijdelijk array, dat eerst gelijk is aan het oorspronkelijke array. Dit gebeurt dan in een for-lus.
Voor het verwijderen wordt een aparte method geschreven. Deze maakt van het array 2 kleinere arrays: een tot het te verwijderen element slice() en een daarvan af. Met array.slice(a, b) wordt de elementen die niet tussen a en b liggen verwijderd.
Deze beide delen worden tot slot samengevoegd teruggegeven met array.concat().
Een mooi scriptie voor het verwijderen van John Resig heeft hier als inspiratie gediend. Je vind het op http://ejohn.org/blog/javascript-array-remove/

Werken met array's stap 4: numeriek sorteren (00:01:53)

Het sorteren loopt niet naar wens. Soms worden getallen niet goed vergeleken: het lijken wel strings. In de zoekKleinste-functie kan dat met parseFloat() worden hersteld.

Werken met array's stap 5: random verdelen (00:13:42)

Het random verdelen gaat vergelijkbaar met het sorteren. Je kunt het op veel plaatsen toepassen, bijvoorbeeld als je een reeks objecten willekeurig in een web-document wil plaatsen.
Eerst word den random getal gekozen, die moet aanwijzen welk element als eerste wordt overgezet naar een nieuw leeg array. Dit gaat met Math.random() en om naar beneden af te ronden: Math.floor().
Het aangewezen getal moet weer met de eerder gemaakte verwijder-functie uit de werk-array worden verwijderd.

Werken met array's stap 6: uitvoeren (00:00:55)

De uitvoer van het sorteren en van het verdelen is nog niet zo netjes. Dat kan eenvoudig worden verholpen met de methode voor arrays, die we zelf hebben geschreven in stap 1. Door achter de uitvoerwaarde .schrijfUit(); toe te voegen is het probleem verholpen.