Hello and welcome to another walk-through for Django for Everybody. We're continuing our throughway through the jQuery. In this one we're going to play a little bit with the onclick event, and it's very similar to the DOM one. But showing you how instead, when you open them both. So if we review this DOM one, and we do a View Page Source. So basically what we did is we had an anchor tag, right, in the DOM, and we have Back and Forth. And we have an anchor tag where we put the onclick, and we're using what we call vanilla JavaScript. And so we had a onclick, and then we would play with document.getElementById. And I want to show you how we do this same thing in jQuery using a similar kind of a thing. So let's just play with it. We're going to have a spinner come and go, toggle a spinner. And then we're going to turn the background red, okay? So we're going to do it with a little different style. So let's refresh it, let's make it bigger. Make it smaller, and then view console. Okay, so let's take a look at View Source. We've got that one, let's do View Source on this one, View Page Source. Okay, so, I sort of mentioned fact that we tend to like getting our JavaScript toward the bottom of the page. So if you look at the top part of this page, lines 1 through 8, you see that there is no JavaScript in there, not even a onclick. And so the key with jQuery is, there's this pattern of having relatively static HTML and CSS. And then at some point start doing your JavaScript, and then enhancing the page. And so we're loading the jQuery library on line 9, and then on line 11, we have a document ready. Now I talked about this in a previous walk-through, document.ready is using the dollar function, passing the document as a parameter. Getting back an object, calling the ready method in the object, and then passing one parameter, which is code to the ready method. But it shouldn't take you long to just grab this line of code and paste it in, $document.ready(function () {. And then you also have to paste line 19 here, which is close curly brace parenthesis. And then you just kind of ignore those two lines, and realize what it is that I want to run at the moment the document's ready. So pretty quickly the whole document ready thing just is a thing you do, and you cut and paste it from one file to the next. And it looks kind of like syntax salad, but it doesn't matter. Because then ultimately the code that runs when the document is ready is the part that matters, and you just work on that. So let's take a look at what's going on here. And we're again hooking up two events. So first we're doing is we're going to go look up the tag that has #tog, and that looks up this anchor tag that I've got an ID of tog. And then what we're going to do is that wraps that element in jQuery, and then calls the on, which is a method. And then we have a series of events, and we're asking for that click event. And we're saying, when that click event happens, run this function. It's only a one-line function, right? It's only one-line function that says $('#spinner').toggle(). So this onclick isn't connected in until this line of code runs, but then it's like an onclick got added to the anchor tag. And so the ready function delays till the page has loaded. And then within the ready function, we're registering a click that's going to delay until the click happens, right? So the click hasn't happened yet. And the same thing is we're going to find the tag that has an ID of red. And when that clicks, we're going to go find the ID of para, which is this tag right there, paragraph tag has this text. Where's the spinner in it? And we're going to change its background color to red. And so those are just two things. Now at the end of this page, really nothing has happened, but we have augmented the markup right? And so we can take a look now, we can take a look at this. We can inspect the element for a bit, and you'll notice it says event. So that means that there has been an event listener that's added to it. And so Toggle Spinner has an event listener and Red as an event listener. And so that's what these two lines of code did is they basically registered an event listener for these two links. Now, ultimately it's not that different than if we put an onclick in. The difference is, this is the jQuery way of doing it, and that is leave the HTML alone, just generate HTML. Putting ID tags and class tags and style tags and whatever. And then later, augmenting it in the ready function, and then we can use that. And so it achieves the same thing, but this is sort of a jQuery way of achieving it. [COUGH] So $('#spinner').toggle(), well, that changes this display:none to display:block, and back and forth. And then the background color red is just a CSS variable. So let's go play with this a little bit. Okay, so let's look, where's the spinner? Let's find the spinner, here's the spinner. So here's the thing, in this spinner, you'll notice it says display:none. Where's the spinner? So here's where's the spinner, and there's an image tag, but it's hidden. Now, this is a common thing, spinners come and go. We use them to indicate to our users what's going on. And this one's there already, but it's not shown. Now, when I toggle it, the toggle's actually going to read this, figure out what the current status is, and then change it, and then toggle will go back. So watch down here where it says display:none as I toggle it. And watch the fact that spinner's there. And so the display:none was taken out, right? So now that spinner's there, and we see it, because display:none is not there. But if I toggle it again, it goes away, and display:none happens. So it's not just markup that we can change, we can change CSS, we can change just about anything. So I can turn this spinner on and off. And we're modifying the document object model, and we're seeing the document object model modifications are being seen live. And we're seeing the results of the changes to the document object model as the spinner appears and disappears every time we click the spinner, okay? And so if I look at this paragraph tag, that's this whole thing. And if I turn the red on, you can watch as we are updating the document object model and changing the CSS, that will add a style tag. So watch, boop! And so there we go, we added CSS, background-color red, which of course took the whole paragraph to make it red, and away we go. And so I don't have a way to turn it off, but you could certainly rewrite this in a way that turned it off. And so this, [LAUGH] this does no particularly interesting thing. Other than the fact that shows you how we sort of add ID tags and then connect events to those ID tags toward the end of the page. Rather than using onclick in the middle of the page, okay? So I hope that you found this particular walk-through helpful. Cheers.
