w6d2-d5 - javascript/jquery/dom

Question 1

How does document.createElement add an object into the page?

Answer 1

It doesn’t.

to append to the page, use [some HTMLElement].appendChild(obj)

Question 2

How do we listen for changes on something in the page?

Answer 2

EventTarget#addEventListener

Pass in a callback.

Question 3

What are the 3 ways to call $ or jQuery

Answer 3

1. select elements using CSS selectors
2. pass it HTML code
3. pass it an HTMLElement: it will create a jQuery object wrapping that one element.

Question 4

What are the primary functions of jQuery

Answer 4

selection

traversal

inserting and removing elements

Question 5

What’s the jQuery syntax for an eventListener?

Answer 5

jQuery#on(eventName, callback)

Question 6

What’s the jQuery syntax to stop listening to an event?

Answer 6

jQuery#off(eventName, callback)

Question 7

What property of the Event object tells us what it is currently focused on?

Answer 7

currentTarget

Question 8

Does jQuery wait until the page loads before it runs?

Answer 8

No. It executes just like regular JS.

Question 9

How do you ensure that the page is loaded before running jQuery code? (3 ways(

Answer 9

1. Put the script tags at the very bottom of the body.
2. set a window.onload callback.
3. use ready-style:

$(someFunction)

This will take a function to run and call that function when the DOM is fully loaded

Question 10

What’s the value of event delegation?

Answer 10

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.

Question 11

How do you set up event delegation in jQuery?

Answer 11

on.(event, css_selector, callback)

Question 12

What are the properties of the object passed in to $.ajax and what does each do?

Answer 12

method: [‘POST’ , ‘GET’ , …]
url: ‘/someUrl’
dataType: ‘json’
data: body of our request (object or string)
success: callback

Question 13

How do you locate an element inside of another element?

Answer 13

$el.find(“div”)

Question 14

What does this do:

$el.find(“div”)

?

Answer 14

Finds a div inside of a jQuery element $el

Question 15

The error “something is not a constructor” is indicative of what?

Answer 15

module.exports was not set within the class definition .js file.

Question 16

How do do prevent a form from submitting when you click a submit button?

Answer 16

$form.preventDefault

Question 17

What function in rails lets you handle different Content-types? How would you handle json and html for an index view?

Answer 17

respond_to do |format|
format.html { render :index }
format.json { render :index }
end

Question 18

In a try/catch bloc,, how do you stop execution of subsequent code if an error is thrown?

Answer 18

Place a ‘return’ within the catch block.

Question 19

How can ajax selection and manipulation be semantically separated?

Answer 19

Selection code goes in binds

Manipulation code goes in callbacks.

Question 20

How do you inject an element before another element?

Answer 20

$el.prepend(whatever)

Question 21

What does the ‘error’ key within an ajax call do?

Answer 21

A callback that runs if a 400-level error is returned.

Question 22

How do you separate concerns of fetching ajax requests and handling responses?

Answer 22

Using promises via .then( ) statements.

The promise returns the response. The .then( ) handles the response.

Question 23

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?

Answer 23

No. The error callback will run.

Question 24

What are the three states a Promise can exist in?

Answer 24

pending
fulfilled
rejected

Question 25

When a Promise has been either fulfilled or rejected, how do we refer to it?

Answer 25

settled

Question 26

How many times can a promise succeed OR fail?

Answer 26

once

Question 27

pending
fulfilled
rejected

These refer to the state of what type of construct?

Answer 27

Promise

Question 28

With jQuery, how do you make an action fire off an event?

Answer 28

$el.closet(“form”).trigger(“submit”)

Question 29

What does the bubbling principle mean in respect to events?

Answer 29

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.

Question 30

How do you stop an event from propagating up?

Answer 30

event.stopPropagation( )