Array's

Rijen met dezelde gegevens typen

Banaantje voeren
Geef lengte banaan
Geef gewicht banaan

In het begin van javascript hebben we het gehad over de declaratie van arrays. Een array bestaat uit een rij van gegevens. Meestal bestaat een rij uit gegevens van hetzelfde type. In dit hoofdstuk beperken wij ons tot dit soort rijen. Array's zijn ook ontzettend belankrijk in IT land. Begrijpen dus!

Een voorbeeld:
We hebben de lengte van 10 bananen gemeten. (12.3 , 10.1, 14.1, 16.3 , 14.5, 16.3, 18.7, 13.8, 17.4, 11.1). Dit zijn allemaal decimale getallen ofwel gegevens van het type double.
Een rij met doubles noemen we een array van doubles. En zo kunnen dit ook met strings doen. Een array van strings. Of een array van integers. Wat ook kan is een rij met gemengde datatypen.

Een array is met name handig wanneer je veel gegevens van het zelfde type moet opslaan en je misschien ook nog niet weet hoeveel gegevens er precies zijn.

Aan het einde van deze les weet je :

  • Hoe een array eruit ziet?
  • Hoe een array werkt?
  • Hoe een array van array's werkt?
  • Hoe je een array kunt manipuleren?

Array: naam en inhoud?

In het hoofdstuk Variabelen hebben we de array al geïntroduceerd aan de hand van het voorbeeld met cijfers voor het vak informatica. We hebben daar ook het ladekast analogie gebruikt om de betekenis van een array te ondersteunen. Ben je de betekenis kwijt. Kijk daar dan nog eens naar.

Een array krijgt een naam en een inhoud. Deze inhoud kan uit gelezen worden door achter de naam van de array tussen vierkante haken ([]) het nummer (index) van het op te vragen ellement te zetten. We geven een bananen voorbeeld.

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
  <script language="JavaScript" type="text/javascript">
  <!--
  let banaan = [12.3, 10.1, 14.1, 16.3, 14.5, 
                         16.3, 18.7, 13.8, 17.4, 11.1];
  let teller = 1;
  document.write("Banaan met index " + teller +  " is  " 
                  + banaan[teller] + "cn lang.<br/>");
  //-->
  </script>
  </head>
  <body>
  </body>
  </html>

De indexering van een rij begint met index 0. banaan[0] heeft als inhoud de lengte van de eerste banaan in de rij. banaan[1] heeft als inhoud de lengte van de tweede banaan in de rij.

Opdrachten
  1. Het komt vaak voor dat er iets moet gebeuren met alle elementen van een array. Een lus structuur biedt dan de beste mogelijkheden. In ons voorbeeld willen we een lijst met de lengte van alle bananen. Voeg aan de code een for-lus toe zodat alle bananen volgens de blauwe regel getoond worden. Zorg ook voor een flowchart.
  2. Voeg aan de code een functie somArray( rij ) toe die alle getallen in de Array rij bij elkaar opteld en deze som teruggeeft aan de gebruiker. Pas het voorbeeld aan zodat de lengte van alle bananen samen wordt getoond. Zorg ook voor een flowchart.
  3. Met die functie maak je de functie gemiddeldeArray(rij) als volgt: (Geef zelf zinvol commentaar:)
         function gemiddeldeArray(rij)
         {
          if( rij!=null && rij.length!=0)
          { 
            return somArray(rij)/rij.length;
          }
          else return 0;  
         }
    
    Waarom is hier een conditionele structuur gebruikt?
    Voeg die ook toe aan je functie somArray( rij ).
    Toon de gemiddelde lengte van de bananen.
  4. De bananen hebben de gewichten (99, 80 , 121, 140, 131, 138, 144, 120, 152, 84) Bepaal met de functies uit de vorige twee opgaven het gemiddelde gewicht van de bananen.

Array: bibliotheek

Met de standaard functie uit de Array bibliotheek kun je de array manipuleren. Gebruik voor de volgende opdrachten weer het bananen voorbeeld.
Opdrachten
  1. Toon de hele lijst van banaan lengten. Verwijder daarna de vierde banaan uit de rij en toon de lijst nog een keer.
  2. Voeg de lengten (11.3,14.1,17.5) toe aan het begin van de lijst.
  3. Sorteer de lijst van de lengten van bananen en toon deze.
  4. Sorteer de lijst van de gewichten van bananen en toon deze.

Array: meer dimensies, Array van Array's

In het bananen voorbeeld en de bijbehorende opgaven hebben we Array voor de lengten en een Array voor gewichten. Nu vormen de lengte en het gewicht van een banaan een paar. Maak je gebruik van twee lijsten dan kan na het sorteren niet meer duidelijk zijn welke lengte bij welk gewicht hoort. Het is beter om de gegevens van een banaan als paar te bewaren. Dat kan als volgt
  let banaan=[ [ 12.3, 99 ],
               [ 10.1, 80 ],
               [ 14.1, 121],
               [ 16.3, 140],
               [ 14.5, 131], 
               [ 16.3, 138],
               [ 18.7, 144],
               [ 13.8, 120],
               [ 17.4, 152],
               [ 11.1, 84]
             ];
 
De gegevens van één banaan hebben we nu opgeslagen in een Array. De Array banaan is nu een Array van Array's. In dit geval een Array van Array's met gegevens van het type double. Om nu bijvoorbeeld het gewicht van de vierde banaan te pakken vragen we eerst de rij van die banaan op met banaan[3]. Dit is dan de "naam" van een Array. In die Array pakken we het tweede element dus "naam"[1] ofwel banaan[3][1]. Zie de onderstaande code.
  <html>
  <head>
  <script language="JavaScript" type="text/javascript">
  <!--
  let banaan=[ [ 12.3, 99 ],
               [ 10.1, 80 ],
               [ 14.1, 121],
               [ 16.3, 140],
               [ 14.5, 131], 
               [ 16.3, 138],
               [ 18.7, 144],
               [ 13.8, 120],
               [ 17.4, 152],
               [ 11.1, 84]
             ];
                        
  let teller = 3;
  document.write("Banaan met index " + teller +  " is  " 
                  + banaan[teller][0] + "cm lang en " + 
                  banaan[teller][1] +" gram zwaar.<br/>");
  //-->
  </script>
  </head>
  <body>
  </body>
  </html>
Het gebruik van hoger dimensionale Array's kom je dit jaar nog tegen bij databases en 3D programmeren in spellen. Zorg dus weer da je dit goed begrijpt.
Opdrachten
  1. Toon de hele lijst van banaan lengten. Verwijder daarna de vierde banaan uit de rij en toon de lijst nog een keer.
  2. Voeg de paren ( (11.3,94) ,( 14.1,116) ,( 17.5, 155 )) toe aan het eind van de lijst.
  3. Sorteer de lijst op de lengten van bananen en toon deze.
  4. Sorteer de lijst op de gewichten van bananen en toon deze.
  5. Verander het gewicht van de vierde banaan naar 138.
  6. Deze opgave omvat de technieken uit de vorige 5 opgaven. Maak een applicatie vergelijkbaar met het voorbeeld "banaantje voeren", waarin je proefwerk- en andere cijfers met verschillend gewicht kan invoeren en het gemiddelde van die cijfers laat uitrekenen. Toon de lijst van cijfers gesorteerd van laag naar hoog. Maak voor iedere functie in je code een flowchart.
    Tip: Bekijk de broncode van dit document en pas die aan. Vergeet niet om commentaar toe te voegen.
  7. Toon met een lus de volgende lijst van tekenreeksen in de omgekeerde volgorde ("John!","poets","de","plaat");
  8. Grafisch deel: Maak een array rechthoeken met daarin arrays met x en y coördinaten en de breedtes en hoogten.van een aantal rechthoeken. Gebruik deze array en een lus om alle rechthoeken in de draw functie te laten tekenen.
  9. Uitdaging: Laat in een script een schaakbord als tabel tekenen. Als een gebruiker op een veld klikt moet het veld groen worden.