Arrays en loops

See the Pen array en loops by Frank Los (@franklosdus) on CodePen.

In de vorige les lieten we één cirkel oneindig vallen. Elke keer als hij onder uit beeld verdween viel hij weer vanaf de bovenkant.

 

Hier doen we dat met 20 cirkels. En gelukkig hoeven we daarvoor niet 20 keer dezelfde code te schrijven.

 

We doen dit met behulp van een array en twee loops.

 

Array

Een array is reuzehandig als je met een hele serie objecten wilt werken, zoals in dit geval.

 

Een array is een lijst van objecten die je één voor één af kunt gaan.

 

Een array ziet er als volgt uit:

 

let objecten = [item1, item2, item3, etcetera];

 

Aan Array toevoegen

Je voegt als volgt een element toe aan een array:

 

ballen.push(bal);

 

Hier vind je nog veel meer manieren om dingen te doen met een array: https://javascript.info/array-methods

 

Later in de cursus gaan we ook een aantal daarvan gebruiken.

 

Een element aanwijzen

In de bovenstaande code kom je dit tegen:

 

ballen[i]

 

En dat is precies hoe je de elementen van een array aanwijst. Met twee vierkante haakjes en daartussen de plek als getal.

 

Een beetje vreemd is dat je bij een array begint te tellen bij 0. Het allereerste element wijs je aan met:

 

ballen[0]

 

Loop

Met de eerste loop maken we 20 ballen:

 

for(let i=0; i<20; i++){

}

 

Deze regel code doet het volgende:

  1. let i=0 i declareren en de waarde 0 toevoegen
  2. i<20 kijken of i nog geen 20 heeft bereikt
  3. i++ 1 optellen bij i

In gewone taal zeg je:

 

We beginnen met i als 0. (let i = 0)

Zolang (for) i kleiner is dan 20 (i<20)

vergroten we de waarde van i met 1. (i++)

 

Met de tweede loop gaan we de array af:

 

for(i=0; i<ballen.length; i++){

}

 

Er zijn twee verschillen:

  1. We hoeven i niet meer te declareren, want dat hebben we al gedaan
  2. We kijken of de waarde van i nog niet de lengte van de array heeft bereikt

 

Math.random()

We introduceren in deze code nog een nieuw begrip:

 

Math.random()

 

Deze functie hoort bij de wiskundige functies. daarom begint het met Math. Deze functie geeft een willekeurig getal terug tussen 0 en 1.

 

Als je dus een willekeurig getal wilt tussen 0 en de breedte van de stage schrijf je:

 

Math.random()*stageW

 

Deze functie maakt het mogelijk om variaties aan te brengen. We komen later nog tegen hoe handig dit is.

Meer bekijken

Weer een blog van Frank Los

Ik deel graag mijn visie en projecten.
Dit soort berichten maandelijks in je mail?
Meld je dan hier aan.

illustratie kadootje

Ik geef gelijk ook een e-book cadeau met tips over goede uitleg!

Delen is fijn!

Wil je zelf uitblinken met visuele communicatie?

Bekijk dan mijn aanpak.

Wellicht wil je meer weten over mij.

illustratie van Frank Los
Frank Los
frank@weereenlos.nl06 430 466 58

TUSSEN DE OREN

uitleg die aankomt

Goede uitleg
is ontzettend lastig.

Deze tips helpen jou
keer op keer.
Download mijn gratis e-book
met poster!
illustratie van Frank Los
CookiesDisclaimerPrivacystatement