Quiz

  1. Generally, the reading was a mouthful and would love if we went over it again in class

    For sure!

  2. I’m confused about the labelling of variables as discussed in the Scope reading. When talking about the counter, the reading states "Because this is a global variable, we will declare it with var. Notice that the functions refer to an already existing variable. They do not use let or var in front of it (which would make the variable local).” Does declaring with var make the variable global or local?

    We use var or let or const to declare a variable. It's global if it's declared outside the scope of any function.

  3. strict mode

    In strict mode, we must declare variables before using them (assigning to them). Failing to declare throws an error.

    In loose mode, assigning to an undeclared variable creates it. Which might be a mistake...

  4. Just to clarify, is an event hander just a function that performs an action in response to an event?

    Yes

  5. Can you expand on what exactly is an event object? Is it the same thing as the browser which class the event handler function?

    An event object is created by the browser to summarize what's going on when an event occurs. It's passed as an argument to any event handlers.

  6. I am curious as to why would we need to use event.preventDefault() if we just do not include the link when initially creating the code, if that makes sense? Like why would we create a button with a link if were were just going to use event.preventDefault() to prevent that link from being accessed? Can you please share some example cases?

    Weird, isn't it? Why use a hyperlink, and then defeat its purpose. But what we're doing is exploiting the fact that a hyperlink is clickable in a way that is accessible (all assistive technologies know that they are clickable).

    Nowadays, we might prefer button instead, but sometimes we want a bit of both.

  7. If there are multiple DOM elements and we have to attach an event handler, should we always attach it to the a if there is one? How do we pick to make our webpages as accessible as possible?

    Yes, using the a (hyperlink) tag is accessible. Nowadays, so is button. But other things are not (div). (Without invoking ARIA.) You should probably use either A or BUTTON.

  8. How are the return objects different when using a jQuery selector vs a plain JavaScript selector?

    jQuery wraps up (packages?) the DOM objects in an object that allows us to use all the jQuery API.

  9. What are wrapped sets exactly, and what do .one() and .some() do/why they are needed?

    Wrapped sets are the jargon for the things that jQuery returns. They aren't DOM elements directly, but are wrapped up in an object that supports the jQuery API.

    
        $("li"); // all the LI elements, in a wrapped set
        $("#fred")[0]; // the fred DOM element
    
    
  10. the method one() and some()

    one and some are methods from my plug-in. They check that the wrapped set either has exactly one thing in it, or that it is not empty. If it's empty, they will throw an error, instead of silently doing nothing.

  11. What's the difference between an attribute and property?

    Great question. I need to remind myself, and I found this great SO post about properties versus attributes in HTML. In short, attributes are the things in the tags in the HTML source, and properties are their JS equivalents in the DOM. Most are the same, but value might be different.

    Of course, you might mean CSS properties.

  12. Why do you need to create a function to attach a handler instead of just making the handler a property of the item itself

    Meaning the onclick attribute? You could do that:

    
    <a href="imgs/img1.jpg" onclick="setDetailsFromThumb(this)">...</a>
    
    

    However, that's not considered best practice: (1) it mixes JS code with HTML, and they might have different authors or the HTML might have been generated from a database or something, (2) we lose the abstraction of mapping over a list of items, (3) we lose the ability to use delegated handlers, (4) we can't share the JS across multiple pages, and (5) it's just ugly.

  13. I'm still a little confused about the custom attributes.

    We often find that the most convenient place to put the data we need is right in the DOM. The data- attributes allow us to do that.

    If we didn't have this ability, we'd have to somehow look up the values in some data structure, probably indexed by some property of the DOM element, and that brings us right back to where we started.

  14. I'm still getting used to jquery notation! / No specific questions but I'd like to do some more practice with event handlers!

  15. is there a very simple description for closures? I read the mdn web docs on it and was still a little confused...

    Only a little? That's pretty good! It took me a long time to get comfortable with them.

    Closures are functions that remember the values of free variables from their original context.

    
        function makeMemory(init) { return function () { return init; } }
        four = makeMemory(4);
        four();
    
    
  16. My questions has been answered while reading more down the contents! :)

    Great!