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!

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...

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.

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.

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.

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

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.

Correct. That loads those files into that browser tab.

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.

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.

How about:

    $("h2").css("color", "red").css("background-color", "gold");

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

Let's try the following:

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

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

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.