Megan Taylor

front-end dev, volunteacher, news & data junkie, bibliophile, Flyers fan, sci-fi geek and kitteh servant

post

Thinkful Unit 3 Comprehension Checks

Lesson 1

Assignment 1

Describe what event binding is and how it can be used to make your pages interactive.

Event binding attaches a handler to an event for the DOM elements.

Events can be:

  • A mouse click
  • A web page loading
  • Taking mouse over an element
  • Submitting an HTML form
  • A keystroke on your keyboard

So you can have elements appear, disappear, animate, etc., based on events.

What are the advantages of using the first block of code over the second?

$(‘#my-div’).on(‘click’, function() { ...do stuff...; });
vs.
$(‘#my-div’).click( function() { ...do stuff...; });

the ability to bind to multiple events at once
use “namespaced” events

What does .preventDefault() do, and when would you use it?

prevents the default action of an event, like clicking on a link or a button

What does .stopPropagation() do, and when would you use it?

prevents ‘event bubbling’ – when an event is triggered for a nested element and then is triggered for every element up the DOM.

How and why would you use this in an event handler?

this allows you to target a specific element, while still binding to a high-level element. This is called event delegation.

Give an example of event delegation and explain its advantages.

Event delegation lets you bind fewer event handlers, which can be a big performance gain. It also lets you bind to parent elements and know that event handlers will fire as expected even if the contents of that parent element change.

Assignment 2

How can you set the fast and slow speeds for jQuery animations?

The predefined speeds are specified in the jQuery.fx.speeds object; you can modify this object to override the defaults, or extend it with new names:

// re-set an existing predefined speed
jQuery.fx.speeds.fast = 50;
// Since we've re-set the 'fast' speed, this will now animate over the
// course of 50 milliseconds
$( '.hidden' ).hide( 'fast' );

Why might you be further ahead using CSS animations instead of jQuery for mobile devices?

In modern browsers, and especially on mobile devices, it is often much more efficient to achieve animations using CSS rather than JavaScript.

What must you do to the spelling of properties like font-size that have hyphens if you want to reference them in a jQuery animation method?

If you want to animate a CSS property whose name includes a hyphen, you will need to use a “camel case” version of the property name if you do not quote the property name. For example, the font-size property must be referred to as fontSize.

How can you stop a jQuery effect?

.stop() will stop currently running animations on the selected elements.
.delay() will pause before the execution of the next animation method. Pass it the number of milliseconds you want to wait.

Lesson 2

Assignment 1

Memorize both syntactically correct ways you can call jQuery’s .ajax() method.

$.ajax({
 url: '/data/people.json',
 dataType: 'json',
 success: function( resp ) {
 $( '#target').html( resp.people[0].name );
 },
 error: function( req, status, err ) {
 console.log( 'something went wrong', status, err );
 }
});
$.ajax( '/data/people.json', {
  type: 'GET',
  dataType: 'json',
  success: function( resp ) {
    console.log( resp.people );
  },
  error: function( req, status, err ) {
    console.log( 'something went wrong', status, err );
  }
});

What are success and error callbacks, and how do they work with .ajax()?

Success Callback: A function to be called if the request succeeds.
Error Callback: A function to be called if the request fails.

Make sure you understand that how and why the return command of an ajax() call will return before the server to which the request was made has responded.

AJAX requests run asynchronously —  the $.ajax method returns before the request is finished, and this function’s return statement runs before the request is complete.

What is JSON and what can you use it to represent?

JSON is a string representation of data.

What are the .get() and .post() methods?

If we’re just making a simple request — and if we don’t care about error handling — jQuery provides several “convenience methods” that let us use an abbreviated syntax. Each of these methods takes a URL, an optional data object, and an optional callback for handling a successful request.

$.get( '/data/people.html', function( html ){
  $( '#target' ).html( html );
});
$.post( '/data/save', { name: 'Rebecca' }, function( resp ) {
  console.log( JSON.parse( resp ) );
});

We can send data with our request by passing an object as the second argument to one of the convenience methods.
For a GET request, this data will be appended to the URL as a query string; for a POST request, it will be sent as form data.

How can you use jQuery to serialize and submit form data?

The .serialize() method converts form input to a query string format.

.ajax() calls return a jqXHR object. What are the .then(), .done(), .fail(), and .always() methods on jqXHR objects for?

.then() – attach success and error callbacks
.done() – attach success callback
.fail()– attach error callback
.always() –  attach callback that runs on success or failure

What is JSONP and what does it allow you to do?

Allows you to use data even though it is hosted on another server.

What does an ajax call with JSONP look like in jQuery?

$.ajax({
 url: '/data/search.jsonp',
 data: { q: 'a' },
 dataType: 'jsonp',
 success: function( resp ) {
 $( '#target' ).html( 'Results: ' + resp.results.length );
 }
});

What is the .getJSON() method?

A convenience method to make a JSONP request; if the URL includes callback=? or similar, then jQuery will treat it as a JSONP request.

$.getJSON( '/data/search.jsonp?q=a&callback=?',
 function( resp ) {
 $( '#target' ).html( 'Results: ' + resp.results.length );
 }
);

How can you use $.Deferred() to return a promise?

The deferred.promise() method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request.

Lesson 3

Assignment 1

What is JSON?

JSON (or JavaScript Object Notation) is a lightweight, easy and popular way to exchange data.

What’s a callback and how does it work in the context of a jQuery .getJSON() request?

A callback is a function that is passed to another function to run.

What is JSONP and what does it allow you to do?

JSONP (or JSON with padding) allows a script to fetch data from another server on a different domain.

Assignment 2

What is encapsulation and why is it important?

Encapsulation in an important organization concept for code. It separates code into distinct pieces.
Broadly, encapsulation does one or both of these:

  • restricts access to some of the object’s components
  • facilitates the bundling of data with the methods (or other functions) operating on that data

How can you use object literals to namespace functions?

An object literal is perhaps the simplest way to encapsulate related code. It doesn’t offer any privacy for properties or methods, but it’s useful for eliminating anonymous functions from your code, centralizing configuration options, and easing the path to reuse and refactoring.


// An object literal
var myFeature = {

    myProperty: "hello",

    myMethod: function() {
        console.log( myFeature.myProperty );
    },

    init: function( settings ) {
        myFeature.settings = settings;
    },

    readSettings: function() {
        console.log( myFeature.settings );
    }

};

myFeature.myProperty === "hello"; // true

myFeature.myMethod(); // "hello"

myFeature.init({
    foo: "bar"
});

myFeature.readSettings(); // { foo: "bar" }

The object literal above is simply an object assigned to a variable. The object has one property and several methods. All of the properties and methods are public, so any part of your application can see the properties and call methods on the object. While there is an init method, there’s nothing requiring that it be called before the object is functional.

Explain the DRY concept.

Don’t repeat yourself; if you’re repeating yourself, you’re doing it wrong.

post

Thinkful Unit 2 Comprehension Checks

Lesson 1

Assignment 1

What is the DOM (Document Object Model) and how does it relate to JavaScript/jQuery?

The Document Object Model, normally abbreviated to DOM, creates a hierarchy corresponding to the structure of each web document. The DOM is the API through which JavaScript interacts with content within a website.

Why would you choose jQuery over JavaScript to add interactivity to your web page?

jQuery is designed to make many JavaScript development tasks much easier.

Is there a difference between the following: jQuery('h2'); vs. $('h2');?

No.

Why is it oftentimes important to wrap your jQuery functions in the following?
$(document).ready(function () {do something;});

To make sure the page is completely loaded before running scripts.

How do you get jQuery into your web page?

Download the jQuery library from jQuery.com or include jQuery from a CDN, like Google.

How would you select an element vs. a class vs. an id in jQuery?

$( "div" );
$( "#myDiv" );
$( ".myClass" );

Describe the difference between and provide an example of each of the following jQuery selectors:

descendant selector
jQuery descender selector (X Y) is used to select all elements matched by ‘Y’ that are child, grandchild, great-grandchild, great-great-grandchild..(any levels deep) of a ‘X’ element.
Ex: $('form input'); ‘ selects all elements matched by <input> that are descendants of an element matched by <form>.

child selector
jQuery child selector (X > Y) is used to select all elements matched by ‘Y’ that are child of a ‘X’ element.
Ex: $('form > input'); ‘ selects all elements matched by <input> that are child of an element matched by <form>, Only child element will match, grandchild, great-grandchild will not match.

multiple selector
Selects the combined results of all the specified selectors.
Ex: $("div,span,p.myClass"); – selects all divs, spans, and paragraphs with the class “myClass”.

What does it mean to ‘traverse the DOM’ and how do you do it?

jQuery lets us “traverse” ‘ or move through ‘ the HTML elements that make up our page. First, we make an initial selection, and then move through the DOM relative to that selection.

What is ‘method chaining’? Provide an example.

You can perform multiple methods on the same set of elements.

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!").css("color", "blue");
</script>

Which methods can you use to add a new node to the DOM?

.append()
.add()
.insertAfter()

How do you delete a node from the DOM?

.remove()

Explain how (and why) to use ‘this’ in a jQuery function.

this is a special keyword that is used in methods to refer to the object on which a method is being invoked.

What is the ‘data tag’ in HTML5 and how do you access it in jQuery?

The HTML tag is used to store custom data private to the page or application.
You can access the values of the data attributes like this:

<img id="pic" src="picture.jpg" data-large="picturelarge.jpg" data-productid="52"
data-license="creative commons">
$('#pic').data('productid') // 52

How can you use variables to reuse jQuery objects in a block of code?

jquery Object Methods

Which jQuery methods can you use to add and remove a class?

.addClass() and .removeClass()

What methods can you use to make an event handler listen for keyboard inputs?

.keydown(), .keypress(), .keyup()

How might you use the .val() method to retrieve user input from a form submission? If you ultimately want to get an integer as opposed to a string value, what do you need to do?

var quantity = +$(this).val();

Why would you use event.preventDefault() in the function of an event handler that listens for clicks on a link?

To keep the page from jumping around.

How do you use jQuery to get and set style properties of a selected jQuery selection?

$(this).css("background-color", "#252b30");

Why might it be better to manipulate the style of a DOM element by toggling its class, as opposed to getting and setting properties directly?

Because it keeps the appearance and function separate, making it easier to maintain and manipulate.

What does the animate method do?

Adjusts a CSS property pixel by pixel in order to animate it.

Lesson 3

Assignment 1

What is the relation between JavaScript and Java?

Nothing. Silly marketing people.

What are the six basic types of values in JavaScript?

Numbers, strings, booleans, objects, functions, and undefined values

Why would the following JavaScript function not return the value 2?

function squareRootSquared() {
    var squareRoot = Math.sqrt(2);
    var squared = 2 * squareRoot;
    return squared;
}

Calculations with fractional numbers are generally not precise.

What does the % operator do? For instance, what would result would you get from 101 % 100 ?

Modulo, like remainder. So 101 % 100 would be 1.

When would you need to ‘escape’ a character in a string with a backslash?

Quotes inside quotes, newlines, backslashes, tabs

How do you concatenate two or more strings?

+ operator

How do the logical operators && , || , and ! work in JavaScript?

The && operator represents logical and. It is a binary operator, and its result is only true if both of the values given to it are true.
|| is the logical or, it is true if either of the values given to it is true.
Not is written as an exclamation mark, !, it is a unary operator that flips the value given to it, !true is false, and !false is true.

What is the order of precedence for operators (keeping in mind that you can always use parentheses when in doubt)?

Division and multiplication always come before subtraction and addition. When multiple operators with the same precedence appear next to each other (1 – 1 + 1) they are applied left-to-right.

What is an expression in the context of programming? How is this different from a statement? (HINT: Think about side effects).

A piece of code that produces a value is called an expression. An expression can be content to just produce a value, but a statement only amounts to something if it somehow changes the world.

What are reserved words?

javascript keywords that cannot be used as variable names.

How do you implement a while loop? How do you implement a do loop? How do you implement a for loop?

While loops: First, a ‘counter’ variable is created. This variable tracks the progress of the loop. The while itself contains a check, usually to see whether the counter has reached some boundary yet. Then, at the end of the loop body, the counter is updated.
Do loops:
For loops: All the statements that are related to the ‘state’ of the loop are now on one line. The parentheses after the for should contain two semicolons. The part before the first semicolon initialises the loop, usually by defining a variable. The second part is the expression that checks whether the loop must still continue. The final part updates the state of the loop.

Why is indentation important (though not necessary) in JavaScript?

The role of the indentation inside blocks is to make the structure of the code clearer to a reader.

What happens when the break keyword is reached in a loop?

It immediately jumps out of the current loop, continuing after it.

What is the syntax for a function in JavaScript?

function add(a, b) {
return a + b;
}
show(add(2, 2));

Why might you define a function within another function?

Because the computer looks up all function definitions, and stores the associated functions, before it starts executing the rest of the program.

Give an example of a recursive function. Why is the elegance of the recursive function not always preferable in JavaScript?

function power(base, exponent) {
 if (exponent == 0)
 return 1;
 else
 return base * power(base, exponent - 1);
 }

In JavaScript, running through a simple loop is a lot cheaper than calling a function multiple times.

What is an anonymous function, and why might you use one?

A function that doesn’t have a name.

Lesson 4

Assignment 1

What is a property in JavaScript? How do you add a non-existent property to an object?

A property is an association of another value with a value. If you have a JavaScript value with the type object, you can add and remove properties at will. If a property that does not yet exist is set with the = operator, it is added to the object.

 var empty = {};
 empty.notReally = 1000;
 show(empty.notReally);

What is an array? What do the following array methods do?

A set of numbers or objects that will follow a specific pattern
myArray.push() – adds an item to an array
myArray.pop() – removes an item from an array
myArray.join() – builds a single big string from an array of strings

How would you get the value of the item at a given index in an array?

var valueAtIndex1 = myValues[1];

What does the new keyword do in JavaScript?

– It creates a new object. The type of this object, is simply object.
– It sets this new object’s internal, inaccessible, [[prototype]] property to be the constructor function’s external, accessible, prototype object.
– It executes the constructor function, using the newly created object whenever this is mentioned.