Opdracht 10: JavaScript Dobbelstenen
HTML Javascript

Versie: 1.0
Doel: Werken met de JavaScript console, herhaling van variabelen objecten en functies in JavaScript, leren werken met JavaScript functies als Math.random en sort, leren werken met for-loops en Arrays.

Deel 1: Opdracht opzetten

  1. Maak een nieuwe map dobbelstenen, vul deze map met 2 bestanden: index.html &, scripts.js.
  2. Stel GIT in zoals je hebt geleerd bij opdracht 4. Stappen 5 en 6 kun je overslaan. Voer ook al je eerste commit uit.
  3. Vul index.html met een leeg HTML document zoals je hebt geleerd in opdracht 3. Vergeet niet scripts.js te linken onderaan de <body>.
  4. Verander de inhoud van het <title> element naar Opdracht 9 – JavaScript dobbelstenen.
 
 

Deel 2: Dobbelstenen simuleren

  1. Maak een <button> element in HTML met de tekst Gooi!.
  2. Typ in scripts.js console.log(‘Er is gegooid’); en bekijk de output in de console van je webbrowser.
  3. Koppel de knop aan de functie gooi(). Deze functie voert de console log uit stap 6 uit.
  4. Laat JavaScript een willekeurig getal tussen 1 -6 aanmaken en toon dit in de console.
  5. Sla 8 willekeurige getallen tussen 1-6 op in een array en toon de array in de console.
  6. Sorteer de willekeurige getallen van laag naar hoog.
  7. Maak een nieuwe array waarbij het cijfer de key is en het aantal keer dat het cijfer gegooid is de value, bijvoorbeeld:
const worp = [
    1 => 0,
    2 => 1,
    3 => 5,
    4 => 0,
    5 => 2,
    6 => 0
];

 

Deel 3: Van console naar HTML

  1. Maak een tabel in HTML met 7 rijen en 2 kolommen.
  2. Toon het resultaat van de gooi() functie in de tabel, bijvoorbeeld:

 

Getal Aantal
1 0
2 1
3 5
4 0
5 2
6 0