JavaScript

Question 1

Why do we log things to the console?

Answer 1

To test if the code is working

Question 2

What is a “model”?

Answer 2

contains the interactive data

Question 3

Which “document” is being referred to in the phrase Document Object Model?

Answer 3

html

Question 4

What is a DOM Tree?

Answer 4

as a browser loads a web page it creates a model of that page and it consists of four types of nodes the document node element node attribute and text nodes.

Question 5

Give two examples of document methods that retrieve a single element from the DOM.

Answer 5

getElementById and querySelector:

Question 6

Give one example of a document method that retrieves multiple elements from the DOM at once.

Answer 6

querySelectorAll

Question 7

Why might you want to assign the return value of a DOM query to a variable?

Answer 7

In order to console log

Question 8

What console method allows you to inspect the properties of a DOM element object?

Answer 8

console dir

Question 9

Why would a tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 9

it gives the html body time to load before any of the javascript loads

Question 10

What does document.querySelector() take as its argument and what does it return?

Answer 10

returns the first element

Question 11

What does document.querySelectorAll() take as its argument and what does it return?

Answer 11

returns a static node list

Question 12

What is the word “object” referring to in the phrase Document Object Model?

Answer 12

the nodes of a dom tree

Question 13

Why do we log things to the console?

Answer 13

to inform developers what the code is doing

Question 14

What is the purpose of events and event handling?

Answer 14

in order to make web content more dynamic and interactable

Question 15

What do [] square brackets mean in function and method syntax documentation?

Answer 15

Square brackets are used to index (access) elements in arrays and also Strings. Specifically lost[i] will evaluate to the ith item in the array named lost.

Question 16

What method of element objects lets you set up a function to be called when a specific type of event occurs?

Answer 16

addEventListener

Question 17

What is a callback function?

Answer 17

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Question 18

What object is passed into an event listener callback when the event fires?

Answer 18

The event object.

Question 19

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

Answer 19

Whatever html element was targeted you could console log.

Question 20

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

Answer 20

element. addEventListener(‘click’, handleClick()) it is executing the function
element. addEventListener(‘click’, handleClick) is just referencing the function