Quiz

1. When using .animate(), could we increase the gradual change time frame by including a number more than 2000?

   The 2000 is the total time that the animation runs.

   If we increase it, the animation takes longer to make the same changes, so the animation is slower.

2. I've done animations with CSS only. Is it better to do with jquery and javascript?

   CSS is probably better because it's built-in. But we can do things with JS/JQ that we can't do with CSS animations, like running arbitrary JS code during the animation, which we'll do later this semester.

3. can you explain what this code does step by step? What does document do?

   
   $(document).on('keyup', function (eventObj) {
       eventObj.preventDefault();
       eventObj.stopPropagation();
       console.log('code:', eventObj.code, 
                   'key:',eventObj.key, 
                   'which:', eventObj.which);
   });
   
   

   Sure. First, document is just the thing that we attach the event handler to.

   In this case, we want the keyup event handler to apply anywhere in the document (the web page)

   The code prevents any default behavior (probably nothing, but just in case)

   It keeps the event from going further up the tree.

   It prints out some useful information.

4. in the following code how is ""=>"" used?

   
   $(""#run2"")
       .one()
       .click( () => $(""#box2"").one().animate({height: ""200px"", ""font-size"": ""20px""}, 2000));"
   
   

   It's the function that gets run when we click on the element whose id is run2.

5. Could you explain more on closures and how they can be used?

   Sure. A closure is a function plus an environment.

   The environment gives values to unbound variables.

   A closure is useful whenever we need a function that remembers something from its "birth environment."

   In Ottergram, we need each event handler to remember which thumb it was attached to.

6. Could we go into more depth on the definition of closure? How to determine if a variable is closure? And a few examples of closure variables/closure in different functions/event handlers?

   A unbound variable is one that is used but not defined within a function body.

   A closure variable is an unbound variable that gets its value from the environment of the function.

   As an example, let's look again at the shopping example

7. Can we go over more examples of closures?

   We have the makeCounter example. Everything else is based on that.

8. Could you explain more about the environment mentioned in the misconception? Which environment is it referring to? Thank you so much!

   The lexical (textual) environment that the function is defined in. In other words, the code around the function definition.

   
       function outer(a, b) {
           let c = 7;
            return function () { return [a, b, c]; }
       }
   
   

   In the code above, a, b, and c are all closure variables, and outer is the environment.
9. In the Misconceptions section of the closures reading, how does the re-write fix the environment issue?

   We put the function back into an environment that gives values to the unbound variable, namely thumb.