JavaScript Flashcards
Why do we log things to the console?
To test if the code is working
What is a “model”?
contains the interactive data
Which “document” is being referred to in the phrase Document Object Model?
html
What is a DOM Tree?
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.
Give two examples of document methods that retrieve a single element from the DOM.
getElementById and querySelector:
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll
Why might you want to assign the return value of a DOM query to a variable?
In order to console log
What console method allows you to inspect the properties of a DOM element object?
console dir
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
it gives the html body time to load before any of the javascript loads
What does document.querySelector() take as its argument and what does it return?
returns the first element
What does document.querySelectorAll() take as its argument and what does it return?
returns a static node list
What is the word “object” referring to in the phrase Document Object Model?
the nodes of a dom tree
Why do we log things to the console?
to inform developers what the code is doing
What is the purpose of events and event handling?
in order to make web content more dynamic and interactable
What do [] square brackets mean in function and method syntax documentation?
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.
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
What is a callback function?
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.
What object is passed into an event listener callback when the event fires?
The event object.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
Whatever html element was targeted you could console log.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
element. addEventListener(‘click’, handleClick()) it is executing the function
element. addEventListener(‘click’, handleClick) is just referencing the function
