w6d2-d5 - javascript/jquery/dom Flashcards
How does document.createElement add an object into the page?
It doesn’t.
to append to the page, use [some HTMLElement].appendChild(obj)
How do we listen for changes on something in the page?
EventTarget#addEventListener
Pass in a callback.
What are the 3 ways to call $ or jQuery
- select elements using CSS selectors
- pass it HTML code
- pass it an HTMLElement: it will create a jQuery object wrapping that one element.
What are the primary functions of jQuery
selection
traversal
inserting and removing elements
What’s the jQuery syntax for an eventListener?
jQuery#on(eventName, callback)
What’s the jQuery syntax to stop listening to an event?
jQuery#off(eventName, callback)
What property of the Event object tells us what it is currently focused on?
currentTarget
Does jQuery wait until the page loads before it runs?
No. It executes just like regular JS.
How do you ensure that the page is loaded before running jQuery code? (3 ways(
- Put the script tags at the very bottom of the body.
- set a window.onload callback.
- use ready-style:
$(someFunction)
This will take a function to run and call that function when the DOM is fully loaded
What’s the value of event delegation?
Rather than install many identical event handlers on many identical elements, we install one handler for a group of elements (the root element) and call the appropriate element when we hear about an event.
How do you set up event delegation in jQuery?
on.(event, css_selector, callback)
What are the properties of the object passed in to $.ajax and what does each do?
method: [‘POST’ , ‘GET’ , …]
url: ‘/someUrl’
dataType: ‘json’
data: body of our request (object or string)
success: callback
How do you locate an element inside of another element?
$el.find(“div”)
What does this do:
$el.find(“div”)
?
Finds a div inside of a jQuery element $el
The error “something is not a constructor” is indicative of what?
module.exports was not set within the class definition .js file.
How do do prevent a form from submitting when you click a submit button?
$form.preventDefault
What function in rails lets you handle different Content-types? How would you handle json and html for an index view?
respond_to do |format|
format.html { render :index }
format.json { render :index }
end
In a try/catch bloc,, how do you stop execution of subsequent code if an error is thrown?
Place a ‘return’ within the catch block.
How can ajax selection and manipulation be semantically separated?
Selection code goes in binds
Manipulation code goes in callbacks.
How do you inject an element before another element?
$el.prepend(whatever)
What does the ‘error’ key within an ajax call do?
A callback that runs if a 400-level error is returned.
How do you separate concerns of fetching ajax requests and handling responses?
Using promises via .then( ) statements.
The promise returns the response. The .then( ) handles the response.
If you have a specific error callback in a promise AND no other promises exist in the chain, will a .catch( ) statement placed at the end of the chain run?
No. The error callback will run.
What are the three states a Promise can exist in?
pending
fulfilled
rejected
When a Promise has been either fulfilled or rejected, how do we refer to it?
settled
How many times can a promise succeed OR fail?
once
pending
fulfilled
rejected
These refer to the state of what type of construct?
Promise
With jQuery, how do you make an action fire off an event?
$el.closet(“form”).trigger(“submit”)
What does the bubbling principle mean in respect to events?
When an event triggers, if it isn’t stopped via event.stopPropagation( ), the event’s parent will receive the event, up and up, until it finally hits window.
All parents of the element will also receive the event.
How do you stop an event from propagating up?
event.stopPropagation( )
