Hello and welcome to another recording in Django for everybody. Today we're going to go through some of the sample code in JQuery. First, we're going to talk a little bit about how the document object model works. I'll open this in a new tab. So you view View Page Source, so you can see this. So in this one, we're just going to play with a document object model, I'm going to make it bigger, real big. Just play with the document object model. And as I mentioned, all of these tags, html, p, all of them, they are in some kind of a hierarchical object inside of the browser. But because in the early days the browsers were so incompatible in terms of how they represented the parsed html, they created this concept called document.getElementById. It's a kind of a clunky, I think part of it they made it as long as they could so they didn't run into any existing methods inside the document object. But the idea is that document getElementById has been around forever. And it basically got you a handle on the element. And so that's all of this including the attributes like Id = person and innerHTML, etc. And so this itself is an object. Let's go ahead and refresh, I'm going to make this a little bigger. Look at the Developer Console. [SOUND] Console, so here we are. So let me clear this, okay? And I'll come back and hit refresh on this. Just looking at it temporarily. And so the first thing I'm going to do is console.dir, which is dumping this, this returns an object that represents all this information, so let's take a look at it. Hit refresh, and you see that that span tag right there, that span tag is the idea a person has all kinds of information inside of it, right? And somewhere in here, I hope we will find innerHTML, right there. And so you can look around, you can use a dump of this stuff in your console sometimes to figure out what you can do with these things. And I'm going to play in this particular one with innerHTML. The first thing I'm doing is I'm going to read the innerHTML, the whole innerHTML attribute out of this. And the innerHTML attribute is just this Chuck, right? But I'm going to store it in a variable. Now, I'm just storing a variable, I'm going to console.log it and that's all I'm going to do, right? And then I'm going to put an alert out with that thing, and then I'm going to change it. So you can put these on the left-hand side because the JavaScript can change the document object model in the browser and it will say Joseph, right? So if you look at the view source, that's what I'm looking at right now, view source here, you see that it's in this span tag it says Chuck. So now we've run it, and it came along and I'll hit refresh again, so you can watch. In the middle of that alert box, right here, the data is still Chuck, right? So look at the document object model right there is Chuck. And as soon as I let the code continue, As soon as I let the code continue by pressing OK, you will see that it's going to modify it and it's going to say, Joseph, okay? Now, if you look the source code that originally came from the server, it says Chuck in it, and now it says Joseph. So this is not really the document object model. The HTML is the HTML, the document object model is what's inside the browser in the browser's memory after the HTML has been parsed. And you've probably done this a million times already,. But when you say Inspect Element, you are not looking at the source HTML. And it even looks quite different, right? This will make sense, it's like pretty and it's indented. And you see the document object model. And so this is the screen you're looking at. And this is the data behind your screen you're looking at, where it says ID person, Joseph. But if I go back to the original thing, it never changed the source code. It says ID person Chuck. And so you can see how it can change the document object model. And so that's the first bit about this dom-01.htm code, okay? Is that just you can change the document object model. So let's take a look at dom-02. And so let's view the source of this one, View Page Source. So make it big, big, big, big, big, oops, make it a little smaller. Okay, so in this one, what we're doing is we're adding an onclick method, and we've been talking about this for a while. And in the onclick, we're running JavaScript, so this is JavaScript. Document.getElementById stuff, innerHTML equals BACK. Well, let's find where stuff is. Stuff is the span tag that has an Id of stuff. Span have stuff as its text as well. So it means that when we click on the back link it's going to run onclick, it's onclick method. That's the definition of the onclick method, event in driven programming. So what we're going to do is we're going to set a string the BACK inside that span tag, and then we're going to return false. And remember, return false basically says don't do the actual clicks. So usually hrefs, anchor tags, cause a click to happen. And similarly if we send it to fourth, we click the other one, it'll put the string FORTH. And so let's do, so this is saying Stuff right now, which is exactly what came from the server, right? So the server sent is the HTML. So if I do an Inspect Element, you will see the part, when you inspect the element, you see the actual document object model, what the browser is actually showing you. So you'll notice that now I can modify based on user action in onclick method, I can modify it. So I click on BACK and you see that the document object model changed and as soon as the document object model change, the part that we're seeing, there was no real interaction with a server here whatsoever. And so I can click forth that you see document object model change, back-forth, back-forth, back-forth and you're watching the document object model changing. The source code never changes that is long at this point. That was 30 seconds ago, it retrieved it and it built the first page. As a matter of fact that there was ever the word stuck in this span tag, that's just gone now, it's just not there. It's not remembered we rewrote the document object model. The JavaScript code plays with the document object nodel, not the original response from the server. And so that's another little example of playing with the document object model. Just to kind of emphasize the fact that what we're watching on the screen is the document object model. And that we're seeing the document object model on the screen. And the JavaScript can change it. And then if we do View Page Source, you're seeing what originally came from the server, okay? And so this is the code that originally came from the server. And so we're going to do a couple of things here. At the bottom, I'm going to have a global variable called counter, counter = 1. Well, just console.log it mostly because if in case I want to bug what's in this UL tag, which got an id of list. And then we'll define a function and we'll come back to that. I'm going to call that function when I type when I click on the more string, right? And onclick says call the add function and then return false. And again, that's to suppress return false is to suppress the default behavior of the href of the anchor tag, clicking on the text of the anchor tag. So I've got code that will run under more and what the code does is adds to an element and so we should, let me refresh this. View Page Source, right? Let me pick a chars, I want to inspect element. Okay, so now we have the Inspect Element, that source code is just there, I threw that up with some clever JavaScript. So here we go, so we got this item, we got this ul tag, right? And so this is the document object model. And right now because we haven't done anything, it mimics what came from the server. And now I'm going to say More. And you see that I got a new thing in the document object model. So if I go li, li and close those all down, more, more, more, right? And so the document object model is changing, but of course, the stuff that came from the server is not changing. So let's take a look at how this is accomplished, okay? So every time we click the More button it comes into this add function and it's going to use the document object model to create a new li tag model. I can give it a class, and if you look at the document object model, you see that my new allies have a class a CSS class on them called list-item for no particular purpose. Just you can do this stuff it's not, and I set the innerHTML. Now, at this point, this is x contains an li tag that is not connected to the document but it's fully fun. It's fully sort of, and I concatenate the counter, which is why it says 1, 2, 3, 4 as these things are put on. But then what I do is I say let's inject this little x, this little tag that's living out in a variable. Let's actually move it into the document? So what I do is I say let's go grab the list which is the ul and append the child. Well, this li tag is a child to the ul tag, and when I am done with this append child, I'm going to have another child. It could be something other than an li tag, it just happen to be making an li tag. So line 13, 14 and 15 here are making a new li tag. And then line 16 connects that li tag into the document object model at the appropriate place. So the next one is going to come, we're going to append a new child. So at the end of this, now we got first item counter 1, counter 2, 3, 4. There are five children for the li tag. And if I click it again, there will be a sixth child for the li tag, and so there you go. And so that gives you a sense of how we mess with the document object model, using normal general JavaScript. And up next, we'll take a look at some JQuery samples that really give us a better pattern for messing with the document object model. Thanks. I hope this has been helpful to you.
