Quiz

I am feeling a bit overwhelmed by so many symbols. Are we supposed to memorize the sequence of all the stuffs like #, ., elements etc. ?
Yeah, it's a lot to learn. We already know the following symbols from CSS
- #id as an ID selector for elements
- .class as a class selector for elements
Last week, we learned some JavaScript, so function, parens, braces, brackets, if, else, => .forEach, .map, etc. That was a lot, especially if you haven't seen code like that before.
Today, we added $ to mean jQuery. So, today was actually the smaller step. Last week was the tough one!
What does ""elt"" mean?
It's a common abbreviation for "element". In this context, an element (specifically, a DOM element) is a "thing" on the HTML web page created by a tag, such as
- a paragraph element created by p
- a list item element created by LI
- a button element created by button
In other contexts, an elt might be an element of a list or an array...
I’m still confused about what API, DOM elements, and jQuery refer to. What is the relationship among the three? Can you show us how jQuery is used on DOM? (Like walking us through the steps, where to edit the document, where to put it etc.)

An API allows one piece of software to talk to another. Here, the API allows our JS code to talk to the browser, which controls how the HTML looks. The underlying code for an HTML page is a collection of DOM elements: each DOM element corresponds to a thing on the page.
jQuery is a library (more software) that helps our code talk to the browser.
We will do an exercise today that usually makes things clear.
Could you talk more about the difference between DOM events and DOM elements?

Sure. A DOM element is a thing on the page, like a paragraph or a button. An event is something can happen, such as the user clicking on something. click is an event.
elements are nouns and events are verbs.
So "the user clicked on button17" is an event and an element that the event happened to.
How is click any different from getElementById?

The getElementById looks in the page and gives us the DOM element with that ID. Maybe the element is a paragraph, or a list item or a button.
The jQuery click method can associate that element with a function, such that the function gets invoked when the button is clicked.
Note that the word "click" is used as both the name of the event and the name of the method that sets up the event handler. That could be confusing.
Maybe jQuery should have named the method associateTheClickEventWithThisFunction, but that would be very wordy.
What did you mean by this: ""When does it get invoked? The browser will invoke it when the event happens. The function is an event handler.""
Great question. Consider:
```
function doSomething() { ... }

$("#button17").click(doSomething);
```
The doSomething function is now associated with button17 (more precisely, the DOM element whose ID is button17).
The doSomething function gets invoked if the user clicks on button17.
the user clicking on button17 is an event
We might describe doSomething as a handler for that event
Could you go over function as arguments and how to avoid the mistakes made when trying to use this method?
Sure. If f is a function and, say, the $(something).click(arg) method wants a function as its argument, just pass in the function:
```
$(something).click(f); // correct
$(something).click(f()); // wrong
```
This is a common error because we are used to always putting parentheses after function names, so we have to break that habit here.

To confirm, if we want to use JQuery and/or your JQuery plugin, we just add

<script src=""https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js""></script>
        <script src=""https://cs.wellesley.edu/~anderson/js/bounds/bounds-plugin.js""></script>

at the bottom of the HTML file?

Correct. That loads those files into that browser tab.

Is the following script, <script src=""https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js""></script>, just for html? How can we use jQuery in .js files?

All the .JS files get loaded into the browser tab. I think of it like pouring all the code into the same bucket.
Later in the course, we'll learn how to set up boundaries between parts of our code (modules), but for now, they all go in the same bucket.
for Question 2, by ""find"" the element whose ID is Fred, you don't mean ""get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element"" (jQuery documentation on find() method), right?

Yes, but the "filter by selector" means, in this case, to filter by #fred, which is the element whose ID is fred. So the jQuery documentation is just more abstract than my statement, which is specific to this particular question.
Can we do more examples of chaining and the return value functions?
How about:
```
    $("h2").css("color", "red").css("background-color", "gold");
```
Explain more on wrapped sets.

The $("h2") above returns a wrapped set, as does the .css() method. Let's pick that apart.

More syntax of how to incorporate DOM events.

Let's try the following:


function redGoldHeaders() { 
    $("h2").css("color", "red").css("background-color", "gold");
}
$("h1").click(redGoldHeaders);

this is my first time working with the DOM, so a lot of new info. i got a little confused when you were talking about the empty set error--can you explain that more in depth?
Sure, but this isn't a central idea. If I try to modify all the H2 elements, like this:
```
$("j2").css("color", "green"); // typo; this won't work, but there's no error
```
Can you provide the solution for the challenge part of making "f() === f;" ? Thank you!
Sure. Here's one way, using a global variable:
```
    f = function () { return f; }
    f == f():
```
I'll leave it as an exercise to the reader to solve this without using a global variable.
But, the above is just a kind of fun magic trick; it's not useful or important code.