JS Dom Manipulation and Events Flashcards
What is the primary advantage to storing your selected elements in a variable?
it can be reused
Why might you need JS to modify the DOM after the page loads?
gives user interactivity
How can you better prepare when writing HTML for DOM manipulation in your JS code?
set ID and class attribues
What are the differences between innertext and textContent?
innertext will show what is seen, and textContent will give you everything
What datatypes are the values you remove from a text input?
anything you want updated
Why is it so important to be able to dynamically update text
in response to users
What are some of the drawbacks of HTML Event Handler Attributes?
code is mixed with HTML which makes the code more difficult to maintain and extend. Timing issue as well.
Why is the Window.event property to be avoided in new code?
because it changes with every event and becomes chaotic
Why is the Window.event property useful for finding and element which was interacted with?
gives us a direct channel to that element
What is the difference between getElementById and querySelector?
query selector will receive a css selector and get element by Id is only ids
Who passes in the event object into the handleClick callback function?
the JS language
Does a callback function require a name?
NO
What is the purpose of a loop?
loops checks a condition and repeats until the condition returns false.Lets you repeat functionality
Why might there be different kinds of loops?
depending on the situation. if you do not know how many times the code should run use a while loop, and if you need to run a code at a specific number of times use a for loop
What is the purpose of a conditional expression as it relates to loops?
indicator when we are finished
Could a loop potentially go on forever?
Yes
Could a loop never start?
Yes, if you don’t configure them right
How does a for loop differ from a while loop?
while loops only need the end point and for loop are useful for knowing exactly how many times you need to use it
What potential use cases are there for for loop?
for a search in a search engine. for arrays
Which pieces of info provided in the parenthesis for a for loop are mandatory?
none of them are mandatory
What is a for in loop?
loops through the properties of an object
How do you target the value of a property in an object?
bracket notation
When should you use a for in loop?
if you need to loop over an object
What is the difference between the parentNode and parentElement properties?
parent node could be an element and could be a node or something other than an element, parent element is for elements. Parent element is what you are gonna be looking for for the most part
Why is it important to be able to traverse the DOM?
allows us to find information on elements around us and to make the search more efficient. avoid white space also
What kind of information is useful to store in custom attributes?
attaching data that ties that element in JS and pull the info off the element itself
What are two ways to target elements on the DOM?
getElementbyId, querySelector
What is another way to add a text node to an element other using TextContent
innertext, document.createtextnode, avoid innerHTML
How do you create a HTML element using vanilla Javascript?
the createlement method of the document object
Why is using loops and arrays for creating multiple dom elements preferable to creating them one at a time?
DRY. code looks less dense and makes code processing more efficient
Why are arrays preferred over objects for the functionality referenced in question 1?
because it will be in order based on the index
Why is it important to be able to retrieve and use data from inputs?
our ability to communicate with the user
Why is it dangerous to assume you have to correct data when creating element?
to have proper data for the proper job
What is event bubbling?
for any element in HTML, if an event occurs inside that element, due to bubbling every element is also clicked. based on HTML structure and not visuals
What is the difference between event.target and event.currentTarget?
target refers to node(where user clicked) , currentTarget on the opposite refers to the node on which current-event listener was attached
What is the first argument the function setTimout takes?
it take a callback function as its first aregument
If the second argument is not passed into setTimout function, what is the default value?
Zero
What are some scenarios where setTimeout can be useful?
pop ups, see if the user is still there
What does the setInterval function return?
it returns an interval ID that identifies the interval
What arguments does the clearnInterval function take?
ID variable value of the setInterval
what is the event loop?
it makes asyncranous doable outside of a call stack
what does the term blocking mean?
execution of additional js must wait until the call stack is clear
What is the call stack?
is an interpreter to keep track of its place
which element in a website are useful to create dynamically?
instagram of google search.
like a div. typcally to respond to user input
Why should you not create all elements dynamically?
might be harder to read html doc
What is a modal?
a scripted effect that allows you to overlay a small element over a website
What are some use cases for modals?
error, warning, data, confirm or prompt, chat popper
Why does a modal usually need to occupy the entire height and width of the viewport?
because you dont want the user to be able to click on anything
Give two examples of media features that you can query in an @media rule.
resizing images such as min-width and max-width
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag which contains content and initial scale attributes
