Skip to main content

Plus opdracht 1: Loops

In deze les ga je leren wat een loop is. Dan gaan we kijken naar het HTML DOM en hoe we met JS de HTML kunnen aanpassen. In deze les gaan we langzaam, stapje voor stapje, een soort memory spelletje maken.

Bestudeer de voglende JS code.

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Probeer deze code uit.

In de (Engelstalige) Youtube movie wordt de loop ook nog een keer in detail uitgelgd:

https://www.youtube.com/watch?v=s9wW2PpJsmQ

In deze les gebruiken ze het commando let. Het JS comamndo let is bijna hetzelfde als het commando var. Het verschil is op dit moment nog niet zo belangrijk; met beide initialiseer je een variabele.

Opdracht 1

Maak nu een loop die de getallen 10 tot en met 25 afdrukt.

Opdracht 2

Vanuit de HTML lessen weet je waarschijnlijk nog wel hoe je een tabel maakt.

Maak een tabel met een kolom en 10 regels, zet in deze regels de getallen 1 t/m 10 en maak deze code met behulp van een loop.

Opdracht 3

Maak nu een tabel met twee kolommen en zet hierin de getallen 1 tot en met 20 op de voglende manier:

1 2
3 4
5 6
7 8
etc. ...

Maak deze code en gebruik hiervoor een loop.

Opdracht 4 (extra punten)

Gebruik nu twee loops in elkaar en maak de volgende 10 bij 10 tabel af (het voorbeeld is een 6x6 tabel afgedukt en je ziet op elke regel telkens de tafel van 1, 2, 3, ...etc.

1 2 3 4 5 6
2 4 6 8 10 12
3 6 9 12 15 18
4 8 12 16 20 24
5 10 15 20 25 30
6 12 18 24 30 36
etc.          

Maak een JS scrip dat deze tabel automatisch genereerd.

Opdracht 5

Kijk en bestudeer: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

Met de functie die he daar maakt, maar je een HTML element onzichtbaar. Je kunt ook de inhoud van een element veranderen:

function myFunction(myID) {
  var x = document.getElementById(myID);
  if (x.innerHTML=="_") {
  	x.innerHTML=11;
  } else {
  	x.innerHTML="_";
  }
}

Je kunt een Javascript aanroepen vanuit een HTML link. Weet je nog de standaard code van een link <a href="www.gogole.com">link</a>

<a id="11" href="javascript:myFunction(11);">_</a>

Test het uit. Plaats de link in de body van de code en zet het JavaSctript in de head sectie.

Zie je wat er gebeurt?

Opdracht 6

Maak nu een tabel (met de HTML dus niet genereren vanuit JavaScript). en zet in de table in elke TD een link met een nummer zoals en een ID zoals hierboven in het voorbeeld. Zorg ervoor dat je alle nummers in de tabel kunt wegclicken en ook weer kunt aanclicken.

We kunnen nu een soort memory spel maken, de eerste stap is gezet.

Stuur de hele HTML pagina met HTML code en script op.

--

Back to top