Video 17: array’s

Deze video bestaat uit twee delen:

deel 1:

deel 2: 

Vraag 17.1: Vingeroefeningen

1. Maak een array met daarin de namen van 6 bekende films
2. Schrijf code die twee films toevoegt aan het einde van de lijst. Gebruik de FireBug console om te checken of het werkte.
3. Schrijf code die de lengte van de array naar het console schrijft.
4. Schrijf code die de waarde van het derde element vervangt door de naam van een andere film.
5. Schrijf code die de naam van de eerste film in de lijst naar het console schrijft.
6. Schrijf code die de namen van alle films in de lijst naar het console schrijft. (zie opmerking hieronder)
7. Schrijf code die de namen van alle films verandert door er “ is een goede film” aan vast te plakken. Dus [“Finding Nemo”, “Se7en” ]  wordt [“Finding Nemo is een goede film”, “Se7en is een goede film” ]. (zie opmerking hieronder)

Opmerking: de laatse twee mini-opdrachtjes vragen je om iets te doen met alle elementen in een array. Het is hier de bedoeling dat je herhalende code voorkomt met een for-lus (while-lus mag ook). Dus niet 6 keer dezelfde code kopieren, maar met een lus en een teller er voor zorgen dat alle elementen in de array 1-voor-1 bewerkt worden.
Zorg ervoor dat de for-lus (zonder aanpassingen) ook werkt als je 2, of 10, of 1000 elementen in je array hebt zitten.

Vraag 17.2: begrijpend lezen…

Bekijk de volgende code:

function mmmmmm( arr ) {
   var voorlopigResultaat = arr[0]
   for( var idx=1; idx < arr.length; idx++ ) {
      if( arr[idx] > voorlopigResultaat) {
         voorlopigResultaat = arr[idx]
      }
   }
   return voorlopigResultaat
}

var m = mmmmmm( [ 1,2,5,8,3,1,9,3 ] )

console.log("m=", m)

Kun je, zonder deze code al uit te voeren in de browser  bedenken wat de functie mmmmmm precies doet?

Het is nu even heel leerzaam om deze code zelf, met pen en papier uit te voeren. Maak een tabelletje waarin je voor iedere ronde van de for-loop, de waardes van de variabelen “voorlopigResultaat” en “idx” opschrijft.

Wat zou een minder slechte naam voor “mmmmmm” zijn?

Vraag 17.3: langste tekst vinden

Maak een functie die uit een array van strings, de langste string oplevert.
Deze functie lijikt qua werking op de mmmmmm functie hierboven. De lengte van een string kun je te weten komen door z’n ‘length’ op te vragen:

var s1 = "Iron Man"
var s2 = "District 9"
var s3 = ""
console.log( s1.length )  // levert 8 op
console.log( s2.length )  // levert 10 op
console.log( s3.length )  // levert 0 op

Als jij je functie “longestString” noemt, zou dit kunnen werken met de bovenstaande stringvariabelen:

console.log(  longestString( [ s1,s2,s3] ) )  // levert "District 9" op

Let op: We willen de langste string zelf. Dus niet de lengte van de langste string. Dus…

longestString( [ "a", "abcd", "ab", "abc" ] );

…levert "abcd" op, niet het getal 4.

Vraag 17.4: rekenen met lijsten

Maak een functie “som” die de som van alle getallen in een array oplevert.

Maak daarna een functie die het gemiddelde van alle getallen in een array oplevert.

Vraag 17.5: nogal wat vierkante haken…

Wat zou ‘tds’ kunnen zijn in deze code?

var tds    = [ [ "bugs",  "bugs",  "bugs" ],
               [ "elmer", "bugs",  "bugs" ],
               [ "bugs",  "elmer", "bugs" ],
               [ "elmer", "elmer", "bugs" ]
             ]
console.log( tds )

Vraag 17.6: Nog wat vingeroefeningen

Gebruik de tds-code van opdracht 17.5.

1. Schrijf code die de laatse rij van tds schrijft naar het console;
2. Schrijf code die het eerste element van de tweede rij van tds naar het console schrijft;
3. Schrijf code die er voor zorgt dat het eerste element van de eerste rij verandert in “elmer”;
4. Schrijf code die een complete nieuwe rij achteraan tds toevoegt;
5. Schrijf code die, met behulp van loops, alle laatste elementen uit de rijen van tds uitprint. Kun je dat zo doen dat het niet uitmaakt of er 4 of 10 of 100 rijen zijn? En dat het niet uitmaakt of de rijen ieder 4 of 10 of 100 lang zijn?
6. Schrijf code die alle individuele elementen in tds ‘omdraait’: alle “bugs” elementen worden “elmer”, en alle “elmer” elementen worden “bugs”. Gebruik hiervoor een loop binnen een loop.

Vraag 17.7: van array naar html

We blijven werken met de tds-code van hierboven.
Schrijf de code die de inhoud van de tds omzet naar een visuele weergave in met images in HTML. Maak HTML die vergelijkbaar is met de HTML die je voor de opdrachten in video 15 maakte: een aantal <IMG>-tags achter elkaar, en dan een <BR> om de volgende groep <IMG>’s op de volgende regel te krijgen.

Vraag 17.8: van array naar tabel

We blijven werken met de tds-code van hierboven.
Schrijf code die de inhoud van tds als een mooi HTML-tabelletje aan de pagina toevoegt.

(Hoewel het natuurlijk leuker is als we plaatjes te zien krijgen in plaats van text.)

Let op: Het is hierbij belangrijk dat je de HTML voor de tabel eerst in een string opbouwt, en pas als de hele HTML-tabel string klaar is die HTML toevoegt aan het document, anders vreten veel browsers het niet omdat ze niet om kunnen gaan met halve tabellen. Doe het ongeveer zoals dit:

var htmlString = '';

htmlString += '<TABLE border="1">';

// jouw code die html voor de rijen en tabelcellen
// toevoegt aan de htmlString

htmlString += '</TABLE>';

document.body.innerHTML += htmlString

Vraag 17.9: arrays op een canvas

Gebruik dezelfde tds-datastructuur als hierboven. Teken nu de afbeeldingen op het canvas. Gebruik daarvoor de drawImage-methode op de canvas-context:

// dit hoeft je code maar 1 keer te doen:
var bugsImage = new Image()
bugsImage.src = 'bugs.png'
var elmerImage = new Image()
elmerImage.src = 'elmer.png'

// en daarna kun je dit zovaak doen als je wilt:
theContext.drawImage( elmerImage, 100,200 ) // op positie x:100, y:200
// of, als je de afmeting wilt aanpassen:
theContext.drawImage( bugsImage, 100,200, 40,80 )  // 40 breed, 80 hoog