JavaScript Flashcards
Why do we log things to the console?
to see the state of the code
tracking values, debugging
What is a “model”?
a recreation of something for resemblance
Which “document” is being referred to in the phrase Document Object Model?
HTML document
What is the word “object” referring to in the phrase Document Object Model?
javascript object
What is a DOM Tree?
element and all of its content
Give two examples of document methods that retrieve a single element from the DOM.
queryselector and getelementbyid
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?
to be able to reuse it later
so you don’t have to do the same work
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
so the html and css finishes loading
What console method allows you to inspect the properties of a DOM element object?
console.dir
What does document.querySelector() take as its argument and what does it return?
css selector and it returns first element of that selector
What does document.querySelectorAll() take as its argument and what does it return?
css selector and a nodelist with all elements with that selector
Why do we log things to the console?
to verify values and debug
What is the purpose of events and event handling?
events are for detecting user interaction and response
Are all possible parameters required to use a JavaScript method or function?
no
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?
function that gets called when something else happens
What object is passed into an event listener callback when the event fires?
callback function
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
event target is to see which event triggered. if you didn’t know, you could look it up on mdn
What is the className property of element objects?
get or set value of class attribute on html element
How do you update the CSS class attribute of an element using JavaScript?
classname property of object equal operator to value
What is the textContent property of element objects?
text that is being displayed
Is the event parameter of an event listener callback always useful?
no
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
more complicated
What event is fired when a user places their cursor in a form control?
focus event
What event is fired when a user’s cursor leaves a form control?
blur event
What event is fired as a user changes the value of a form control?
value event
What event is fired when a user clicks the “submit” button within a ?
submit event
What does the event.preventDefault() method do?
prevent someone from doing the default behavior of event
What does submitting a form without event.preventDefault() do?
refreshes the page
What property of a form element object contains all of the form’s controls.
elements
What property of a form control object gets and sets its value?
value
What is one risk of writing a lot of code without checking to see if it works so far?
it could break along the way
Does the document.createElement() method insert a new element into the page?
no
How do you add an element as a child to another element?
appendchild method
What do you pass as the arguments to the element.setAttribute() method?
first argument would be the attribute you want, the second would be the value
What steps do you need to take in order to insert a new element into the page?
appendchild to an element inside the page already
What is the textContent property of an element object for?
get value or reassign text
Name two ways to set the class attribute of a DOM element.
property classname, and assign it a value, or use setattribute method
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
function is reusable and the return can be used somewhere else
Give two examples of media features that you can query in an @media rule.
min-width and min-height
What is the event.target?
the origin of the element that got triggered
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
What DOM element property tells you what type of element it is?
tagName
What does the element.closest() method take as its argument and what does it return?
css selector and returns closest parent element
How can you remove an element from the DOM?
remove method
What is the event.target?
the origin element that got triggered
What is the affect of setting an element to display: none?
takes it out of view and document flow
What does the element.matches() method take as an argument and what does it return?
takes css selector as argument and return boolean depending on if the targeted element matches the css selector
How can you retrieve the value of an element’s attribute?
getattribute method
At what steps of the solution would it be helpful to log things to the console?
anytime u need it
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
need an event listener for each tab
What is a breakpoint in responsive Web design?
the point where the layout/ website changes to adjust for devices
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
adaptability and less possible failure points
What is JSON?
way to store long term data by converting data into strings
What are serialization and deserialization?
serialization is to convert human data for humans into data for the computer. deserialization is to convert computer data into readable human data.
Why are serialization and deserialization useful?
to store and transfer data in an efficient way.
How do you serialize a data structure into a JSON string using JavaScript?
stringify method of JSON object or type it out
How do you deserialize a JSON string into a data structure using JavaScript?
parse method of JSON object
How do you store data in localStorage?
setItem method
How do you retrieve data from localStorage?
getItem method, keyname as argument
What data type can localStorage save in the browser?
a string
When does the ‘beforeunload’ event fire on the window object?
when the tab is refreshed or closed
What is a method?
function being stored in property of an object
How can you tell the difference between a method definition and a method call?
if a method is being defined the word function will be prevalent. if it is being called only the function name followed by parentheses will be present.
Describe method definition syntax (structure).
object name, dot, method name, followed by parentheses and argument.
Describe method call syntax (structure).
object name, dot, function name, paranthesis
How is a method different from any other function?
you have to specify object name before with a dot
What is the defining characteristic of Object-Oriented Programming?
pairing data with behavior in the same space
What are the four “principles” of Object-Oriented Programming?
abstraction, encapsulation, inheritance, polymorphism
What is “abstraction”?
take a complex tool and give a simple interface for it
What does API stand for?
Application programming interface
What is the purpose of an API?
allow people to use complex tools without fully understanding/creating them
What is this in JavaScript?
gets the value of whatever is being used
What does it mean to say that this is an “implicit parameter”?
implied that it’s there, no visual queues to be seen
When is the value of this determined in a function; call time or definition time?
call time
What does this refer to in the following code snippet?
nothing
What kind of inheritance does the JavaScript programming language use?
prototype based programming
What is a prototype in JavaScript?
an object with methods you can use on the main variable
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on strings, arrays, and numbers?
prototype
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
prototype of said data
What does the new operator do?
creates a new data set based on the function called
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
What does the instanceof operator do?
It checks to see if it has the prototype/methods of an object
What is a “callback” function?
function that gets executed later
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
setTimeout
How can you set up a function to be called repeatedly without using a loop?
setInterval
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
the interval ID
What is AJAX?
sending information, receiving information and updating without refreshing the site.
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
Which object is built into the browser for making HTTP requests in JavaScript?
XML http request
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
XHR shares prototype with dom elements.