Les 9a - Quiz

Hieronder de vragen uit de Javascript-quiz inclusief de antwoorden en uitleg.

Vraag 1

Uit welke van de volgende stukken code komt true?

a. a
b. b
c. c
d. geen van allen

let x = 10;
let y = 15

//a
(y === x);

//b 
(x > y);

//c
(y <= 15);

Bij deze vraag vergelijken we de waarde aan de linkerkant met de waarde aan de rechterkant.
Bij a is de vraag of x gelijk is aan y, dat is niet het geval.
Bij b is de vraag of x groter is dan y, dat is niet het geval.
bij c is de vraag of y kleiner of gelijk is aan 15 en dat is zo, omdat y 15 is.

Vraag 2

Wat wordt er geprint?

a. [2, 3, 4, 5]
b. [1, 2, 3, 4]
c. [5, 4, 3, 2]
d. [4, 3, 2, 1]

let lijst = [1, 2, 3, 4, 5];

function setup() {
    lijst.reverse();
    lijst.pop();
    console.log(lijst);
}

De lijst bestaat uit 5 getallen, 1,2,3,4 & 5. In de setup-functie wordt de lijst eerst omgekeerd met reverse(),
Daarna wordt met pop() het laatste element uit de lijst gehaald. Dat is de 1, omdat de lijst zojuist is omgekeerd.
Er blijft dus [5,4,3,2] over.

Vraag 3

Wat wordt er geprint?

a. 🌽 🥦 🥕
b. 🌽 🥦 🥕 🌽 🥦 🥕 🌽 🥦 🥕 🌽
c. 🌽 🥦 🥕 undefined 🌽 🥦 🥕 undefined 🌽 🥦
d. 1 2 3 4 1 2 3 4 1 2

let lijst = ["🌽", "🥦", "🥕"];

function setup() {
    for (let i = 0; i < 10; i++) {
        console.log(lijst[i%4]);
    }
}

De lijst bestaat uit drie elementen. De for-loop in setup() wordt 10 keer herhaald (zolang i kleiner is dan 0).
Vervolgens wordt er elke keer één element in de lijst geprint. Welk element dit is hangt af van i (die loop van 0 - 10) en daar de modulo 4 van.
Daardoor zal dit telkens 0, 1, 2 en 3 zijn. Aangezien de lijst maar 3 elementen heeft, zal er na die drie elementen een undefined worden geprint.

Vraag 4

Hoe veel keer per seconde wordt er een noot afgespeeld?

a. 2
b. 3
c. 20
d. 40

function setup() {
    frameRate(40);
}

function draw() {
    if (frameCount % 20 === 0) {
        makeNote(60, 1.0, 200);
    }
}

Met een framerate van 40 worden er 40 frames per seconde afgespeeld. Als je vervolgens elke 20 frames iets laat doen, zal dit 2x per seconde gebeuren.

Vraag 5

Wat wordt er met onderstaande code in de console gelogd:

a. eerste
b. tweede
c. derde
d. vierde

let x = 2;
if (x = 1) {
  console.log("eerste");
}
else if (x == 2) {
  console.log("tweede");
}
else if (x == 3) {
  console.log("derde");
}
else {
  console.log("vierde");
}

Dit is een lastige, met een fout erin die nog al eens gemaakt wordt, waardoor de code niet doet wat je verwacht dat ie doet. De variabele x wordt aangemaakt met een waarde van 2. Vervolgens wordt er en if-statement gemaakt, waarbij niet wordt gecontroleerd of x gelijk is aan 1, maar x de nieuwe waarde 1 krijgt.
Aangezien deze waarde groter dan 0 is, en dus door JavaScript als 'waar' wordt gezien. Zal deze eerste if-statement true teruggeven en wordt daarmee 'eerste' naar de console gelogd.

Vraag 6

De point-functie tekent een punt van 1 pixel, waar in het scherm zien we deze pixel?

a. Linksboven
b. Rechtsboven
c. Linksonder
d. Rechtsonder
e. Nergens

function setup() {
  createCanvas(800,600);
}

function draw() {
  background(255);
  let x = 800;
  let y = 0;
  point(x,y);
}

Bij een canvas van 800 bij 600 pixels, loopt de telling van de pixels op de x-as van 0 tot 799 en op de y-as van 0 tot 599.
Als je dus een pixel plaatst op positie 800, dan valt deze buiten beeld en is deze niet te zien.

Vraag 7

Welke kleur heeft het vierkant in onderstaande code?

a. Rood
b. Oranje
c. Geel
d. Geen

let squareColor = 'red';

function setup() {
  createCanvas(800,600);
    background('black');
    fill('orange');
    ellipse(400,300,50);
    square(100,100,20);
    fill(squareColor);
    fill('yellow');
    ellipse(700,100,50);
}

function draw() {
}

Alle functies die iets zeggen over bijvoorbeeld opvulkleur, lijnkleur of lijndikte hebben betrekking op alle vormen die daar onder worden getekend.
Dus de kleur van het vierkant in bovenstaande code is afhankelijk van de kleur die daarboven wordt gedefinieerd. Oranje dus.

Vraag 8

Wat komt er in de variabele 'groet' te staan?

a. "Hallo"
b. "Hallo mijn naam is"
c. "Hallo mijn naam is Onbekend"
d. Niets

function setup() {
    let groet = maakGroet("Onbekend")
}

function maakGroet(naam) {
    let groetje = "Hallo"
    let groetnaam = groetje + " mijn naam is";
    return groetnaam;
    let compleet = groetnaam + " " + naam;
}

De functie maakGroet() voegt een aantal zaken bij elkaar. Eerst wordt de variabele groetje aangemaakt, daar komt het woord "hallo" in te staan.
Vervolgens wordt de variabele groetnaam aangemaakt, waarbij achter de variabele groetje de tekst "mijn naam is" wordt geplakt.
Daarna volgt de return, waarbij het resultaat van groetnaam wordt teruggegeven aan de positie waar de functie maakGroet() werd aangeroepen.
Dus in de variabele groet komt dus "Hallo mijn naam is" te staan.

Vraag 9

Welke positie staat de bal na 60 afgespeelde frames?

a. x = 100, y = 200
b. x = 160, y = 200
c. x = 159, y = 200
d. x = 101, y = 200

function setup() {
    createCanvas(800,600);
}

function draw() {
    let x = 100;
    let y = 200;
    x++;
    ellipse(x,y,50);

    if (frameCount === 60) {
        console.log(x,y);
    }
}

De variabelen x en y waar de positie van de bal in worden opgeslagen, worden elke keer als de loop-functie wordt aangeroepen opnieuw gevuld met de standaardwaarden 100 en 200. Daarna wordt er één opgeteld bij de waarde x en komt deze uit op 101. De bal zal dus altijd op positie 101 bij 200 staan.