Welcome to our lecture about jQuery and the Document Object Model. So we've already been talking about something in the JavaScript where you have a script tag, and you do document.write, and we've already seen how that can update a webpage in the process of being downloaded. Now with jQuery, well that's been around for a long time, since 1995 when JavaScript was first created. But ultimately, we are starting to see more and more of the interactivity of our application being done in the browser. So we're writing more and more code in JavaScript. A classic request response cycle. We do a click, it goes in through urls.py, picks a view, maybe talks to the database, pulls a form in and out comes some HTML plus JavaScript comes back. If you do a view source on a page, that's what you're seeing. So the browser, when it receives that is it parses it and turns it into what's called the Document Object Model. That is a data structure that in a sense lives one pixel behind your screen, and then you see the results of the Document Object Model. So if you do a view source, you'll see the response. But if you do an inspect element, you see Document Object Model. So what you see is you see how the Document Object Model can change. The way the Document Object Model can change is by you writing JavaScript code that does something to the Document Object Model or reads the Document Object Model. So the JavaScript comes in as part of the response from the server, but then it starts to run. Then when it's running, in a sense you're completely cut off from the rest of the server. You got your response, but your JavaScript can still be doing work in the page. It can have events that trigger. It can modify the DOM. It can intercept clicks and run some JavaScript, etc. So like intercepting a click is like that's an onclick, which says run a little bit of JavaScript and then come back. So we can even intercept a click, do something to it, and then stop the actual sending of the data to the server. So JavaScript is in a very powerful position in your browser. It's in your browser, in your page can be sitting there, and increasingly we're starting to see folks build more and more of their application in JavaScript and less and less of their application in Django or in backend. So what we're finding over time is that the JavaScripts is talking to the models directly, and we'll talk about that in the next lecture. The JavaScript talking to the models directly and then putting stuff up on the screen rather than going through the entire request-response cycle to get a page back. So this is hybrid application. So now what we're going to do is we're going to really talk and focus much more on this interaction between JavaScript and the Document Object Model. So Document Object Model as a concept has been around for a very, very long time, when JavaScript was created in 1995, in order for it to have access to what was on the screen and change what was on the screen, which was its goal. We needed a way, and so they create this variable called document, and the document is always there. Then you call methods and change attributes and then you get back elements, like a paragraph is an element, and then you can change the color of the paragraph and you can do all kinds of thing. You can even insert on new paragraphs. In 1995, as the browsers were saying, "Do I want to add this JavaScript?" They actually already had document object models, but they weren't the same. So the idea that all the browsers would agree on one Document Object Model, that just was not practical at that time. It caused for a lot of pain from '95-2005, 2006, and we'll talk about that. But the Document Object Model has never been, every bit of it is not forced to be a standard. So we have parts of it that we make be a standard. So in the first part of this, we're going to talk about not jQuery, but instead what the world calls Vanilla JavaScript, and that's JavaScript that the browser gives us versus JavaScript that we can write if we have jQuery library installed. So we're going to talk a little bit about Vanilla JavaScript. So one of the choices they made back in the day was in order not to have to look at the DOM directly, we would just say "Look, bypass all the shape of the Document Object Model," which was a hierarchical set of trees and tags. Say, "Look, we're going to put this ID field on a tag, and then we're going to give document.getElementId as a way to look up and get our hands on a tag and then do something that tag without having to work our way down from the body tag to a ul tag, to an li tag, to a paragraph tag, to a form tag, and work your way down and through the tags." So it's a jump right into the DOM, get your hands on something and do it, and so the actual shape of the Document Object Model tree was less important. So here is a really simple bit of code, and so what we've got is document. So document is always a document, document.getElementId. That's this method that was added to the Document Object Model, and then you can look for a particular tag that has an id, a person on it. So in our HTML itself, I have got this span tag with an id a person on it, and that is to get my handle on that span tag. So I can do a console log of that. I can get my hands on, here is the whole span tag document.getElementId person, and then innerHTML actually pulls out this little bit of text. So I can put a console log out and I can put a hi there. So you can see that in this JavaScript, I was able to pull out a little piece that was in the Document Object Model. Then if you see, I can also then change it. So I can get my hands on the Document Object Model, innerHTML, and I can put that on the left-hand side of an assignment statement, and then I can change it. So this is what it looks like when you are console logging that getElementById by person or getElementById of the person tag, the one that has ID equals person on it. So you'll see, in your console log, that it's an object with lots of attributes and lots of methods. This is, again, the document object, this is just one little corner of the Document Object Model and all the things that we can do to that Document Object Model bit. So like I said, you can change the Document Object Model, by putting it on the left side of an assignment statement. So what we have here is a real tiny bit of JavaScript and the pattern I'm using now, is I'm using the onclick attribute in a tag. So this is a way for me to make a anchor tag that you can click on, and have it so that it actually just run some JavaScript. So it's not really going to send it to the server. The return false and both of these says, "I've intercepted your click, and I'm going to handle your click, and I'm not going to let it go to the server, I'm going to do something, and I, as this piece of JavaScript, have decided that I've satisfied whatever the user wanted to happen on this click." That's what return false stuff. But before that, I'm going to go grab the document getElementById by stuff, well, that's this bit right here. Then innerHTML, which is this text, and I'm going to rewrite this and then put the word back here in there. So if you click on back, it's going to look like this, because this got overwritten and it's now back. Similarly, if I click on forth, then it's going to go find this, and set the innerHTML, and rewrite it again. So in a sense the pixels of the browser that you're seeing are fungible, they're modifiable, they're changeable by the JavaScript. JavaScript can change what you see. So it's a very powerful position to be in. The whole page is parsed and read, and then it shows you the page. Then you have registered a couple of event handlers, "When this is clicked, let me run some code." In that code, I'm going to do something to the screen you're watching, and then I'm going to say, "You know what, I don't even want you to click on that href. I don't want you to go anywhere, I've handled it, etc." So that shows you the read-write aspect of getting to and from the Document Object Model from Vanilla JavaScript. So here is an even more sophisticated little example. In this example, you're going to see how you can actually modify and extend the Document Object Model and add whole areas to the Document Object Model that was not there before. So if we take a look at this code, and you can go and run this on DJ4E, I've got a little link here, more, and I'm going to call this add function and return false, that's just so I stay on this page. Then I have an unnumbered list and that's going to produce this first item. Then what I'm going to do is I'm going to start some JavaScript. I'm going to load a variable called counter. So I just do this, this is a debug. Function add, that just defines a function and I'm going to call that later when I click on it. So when this page, all is complete, it only shows first item. So that's what's there. There we go. So first item is there, and then I click on more. So when I click on more, it runs this onclick, which calls the add function. What it does is it says document.createElement. So what that does is that creates an li tag /li, an empty one. It's not in the document right now, it's not on the screen, it's just like a variable. So I have made an HTML tag, that's an li tag. Then I can do things like set its class name, which is class equals, if I want. Then I can set its innerHTML to be, "The counter is counter." Then I'm going to add one to counter, so it starts out at one. But then what I'm going to do is I'm going to grab document.getElementById, the list, which is going to grab me this tag. Then I'm going to append a new child tag, which means I'm going to insert this little li tag that I just made right before the end of that ul tag. So when that code runs, little to little, counter equals one line shows up. Then I can click it again and counter equals two shows up. There's nothing going on with the server at this point in time, I am simply changing what the browser sees by changing the Document Object Model in JavaScript. So there are some places we would use something like this for a purpose. I'm just showing you how the Document Object Model can be modified by what you want to do in JavaScript. You can make new tags and stick them in. It's not just changing a bit of text, but you can put whole new chunks of tags. Frameworks like React and other ones, that's what they're doing. They're actually completely changing and messing with the tags. So up next, we're going to talk about jQuery and how jQuery has made this act of messing with the Document Object Model a lot easier.
