70-480

Question 1

When to use Article over Section or Div

Answer 1

Use section when the content requires a heading and the it makes sense together,

Use Article same as section but also when the content makes sense alone without anything else

Use a Div in all other cases when you dont need to group things based on a header etc

Question 2

name all new 11 HTML 5 elements

Answer 2

article
aside
figcaption
footer
header
hgroup
mark
nav
progress
section

Question 3

how to know if an element has child nodes

Answer 3

document. hasChildNodes()
document. childNodes()
document. firstChild()
document. lastChild()

Question 4

how to create an element and remove

Answer 4

document.createElement('article")
var someElement = document.getElementById('someDiv')
someElement.removeNode(true);

Question 5

how to add a video to html what attributes can you add

Answer 5

attributes
src
autoplay - plays after loaded
controls - just include and it will add play control for user
height/width (height=”400”)
loop - add and will loop
poster - when the video is not playing will use the image argument is location

Question 6

how do you add multiple formats for the video element and set a default message if none are supported by browser

Answer 6

do not add src to video
as a child element of video add

to add a message that it failed

<p> this is not supported></p>

Question 7

what are the methods on a video element how to use them

Answer 7

methods are play(), pause(), volume, currentTime

Question 8

how does an audio element work

Answer 8

The exact same as a video element

Question 9

what is a canvas element and how to draw to it

Answer 9

a canvas element is used to draw graphic UI elements on a screen.

In javascript get the canvas element draw to it by getting the context from it

canvas. getContext(‘2d’);
canvas. fillRect(x,y, width, height)

Question 10

How to make an element full screen size

Answer 10

Best in javascript

somelement.width = window.innerWidth

Question 11

Methods to draw basic shapes on a canvas

Answer 11

Line - someCanvas.beginPath(), then someCanvas.moveTo( x , y)
then someCanvas.lineTo(x , y) - how many pixel it will move to not where it ends
then someCanvas.stroke() actually draws the line

can add css canvas.strokeStyle = “#FFFFFF”

to change a rectangle color
canvas.fillStyle = “rgb(0,0,0)

circle
canvas.arc(x , y , radians or size, start angle *0 or where to start drawing, end angle or how long to go on for Math.PI * 2, draw counter clock wise = false)

always start with beginstroke, made some shape then stroke

Question 12

using canvas how do you do text

Answer 12

two steps,
define the font and then do stroke
someCanvas.font = “30px Arial”;
someCanvas.strokeText(‘someText’, X , Y); or fillTetxt

Question 13

how to do gradient in shape

Answer 13

1.first you want to define the gradient there are two types, linear and radial
someCanvas.createLinearGradient( xBegin, yBegin, xEnd, yEnd)
someCanvas.createRadialGradient( xBegin yBegin rBegin, etc)

2. add colour stops
   between 0 and 1.
   someGradient.addColorStop( 0, “blue);
3. fill the style with the new gradient obj

someShape.fillStyle(someGradient);
someShape.fillStroke(someGradient);

Question 14

how to do animations in canvas

Answer 14

want to run requestAnimationFrame() over and over and clear the canvas by running clearRect(side of canvas);
redraw objects

Question 15

in canvas how to make a curve

Answer 15

three options
moveTo(x1, y1)
quadradicCurveTo(x2, y2, x3, y3)

moveTo(x1, y1)
bezierCurveTo(x2, y2, x3, y3, x4, y4)

Question 16

how to load img into a canvas

Answer 16

var img = new Image(  );
img.src = 'someImage.jpg';
img.onload = function ( ) {
  someCanvas.drawImage(img, 0, 0);
  someCanvas.stroke(  );