Html Interaction

Question 1

JS: let Var = document.getElementById(“”);

Answer 1

Takes a string that corresponds to to an HTML id attribute

Question 2

JS: VAR.innerText = “”

Answer 2

Can be used to reassign content of an element (VAR) along side use of document.get…

Question 3

JS: document.querySelectorAll(“”)

Answer 3

Can be used to select ALL of a certain that match a selector string
Omit the ‘All’ to use on just the first/only selector

Question 4

JS: .addEventListener(‘EVENT’, Function);

Answer 4

Events can be ‘click’ , ‘keydown’, ‘scroll’ to start with.

Question 5

JS: let ctx = canvas.getContext(‘2d’);

Answer 5

Setting up a canvas element with a 2d drawing context. Assigning to the variable means less typing when using additional methods/properties further in

Question 6

JS: ctx.fillStyle = …

Answer 6

to create a solid 2d object fill “colour”

Question 7

JS: ctx.fillRect(10, 10, 200, 200)

Answer 7

To create a filled rectangle/square.
(Start x, start y, length x, length y)

Question 8

JS: ctx.linewidth = int

Answer 8

outline width for canvas.getContext

Question 9

JS: ctx.strokeStyle = ‘colour’

Answer 9

Colour of outline for canvas.getContext

Question 10

JS: ctx.strokeRect(10, 10, 200, 100)

Answer 10

create a rectangle/square outline

Question 11

JS: ctx.fillStyle = ‘color’
ctx.beginPath;
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.fill()

Answer 11

Draw and fill a shape by Path

Question 12

JS: ctx.arc(centreX , centreY, radius, start * [rad], Math.PI*2, true/false)

Answer 12

Draw a circle.
Use after .beginPath()
true = counterclockwise