Oefeningen laden

We bouwen de oefenboom op.

Catalogus openen...

- -
Menu
Code-editor




Console-uitvoer

Canvas

Formularium

Basis JavaScript

  • var naam = "Ada"; - variabele met tekst of een getal
  • console.log("tekst") - print tekst naar de console
  • if (voorwaarde) { ... } - ALS-statement
  • else if (voorwaarde) { ... } - ANDERS ALS-statement
  • else { ... } - ANDERS-statement
  • for (var i = 0; i < 4; i++) { ... } - begrensde herhaling
  • while (voorwaarde) { ... } - voorwaardelijke herhaling

Invoer en getallen

  • ask("vraag") - vraag stellen aan de gebruiker; het antwoord is tekst
  • parseInt(ask("Zijde?")) - maak van het antwoord een geheel getal
  • parseFloat(ask("Temperatuur?")) - maak van het antwoord een kommagetal
  • round(getal, dec) - rond af op een aantal decimalen

Canvas en turtle

  • showGrid(stap) - toon het assenstelsel; zonder waarde gebruikt het raster stap 50
  • moveForward(afstand) - beweeg vooruit in de huidige richting
  • moveBackward(afstand) - beweeg achteruit
  • turnRight(hoek) - draai naar rechts in graden
  • turnLeft(hoek) - draai naar links in graden
  • goTo(x,y) - ga naar coordinaat; met pen omlaag teken je ook de lijn ernaartoe
  • penUp() - verplaats zonder te tekenen
  • penDown() - teken opnieuw mee
  • setPenColour(r,g,b) - kies een RGB-kleur
  • setPenColour("naam") - kies een kleur op naam
  • randomColour() - geef een willekeurige kleurnaam terug
  • setLineWidth(breedte) - verander de lijndikte
  • setTurtleAngle(hoek) - zet de richting absoluut, bijvoorbeeld 90 graden
  • drawCircle(straal) - teken een cirkel op de huidige turtlepositie
  • fillCircle(straal) - teken een opgevulde cirkel op de huidige turtlepositie
  • writeText("tekst") - schrijf tekst op de huidige turtlepositie
  • showTurtle() / hideTurtle() - toon of verberg de turtle
  • clearCanvas() - wis enkel de tekening, behoud de turtle-instellingen
  • resetTurtle() - zet positie, richting, pen en tekening volledig terug
Belangrijk: op het canvas gaat x naar rechts en y naar boven. Gebruik dus bijvoorbeeld goTo(100, 50) voor rechtsboven en goTo(-100, -50) voor linksonder.

Kleuren (naam & RGB)

Gebruik:setPenColour(r,g,b) of setPenColour("naam")
Voorbeeld: setPenColour("crimson"); of setPenColour(220,20,60);
Snelle tip: wil je enkel verplaatsen zonder een extra lijn te tekenen? Gebruik dan eerst penUp(), daarna goTo(x,y), en pas dan opnieuw penDown().

Voorbeeld: vierkant tekenen

var zijde = 40;
for(var i = 0; i < 4; i++) {
  moveForward(zijde);
  turnRight(90);
}

Voorbeeld: waarde vragen en gebruiken

var zijde = parseInt(ask("Hoe lang is de zijde?"));
for(var i = 0; i < 4; i++) {
  moveForward(zijde);
  turnRight(90);
}

Voorbeeld: kleur en gevulde cirkel

setPenColour(randomColour());
fillCircle(20);