Hello, welcome to another walkthrough for Django for everybody. So in this walkthrough, we're going to play with some of the jQuery examples. Before this we did the document object model way of doing things. And jQuery of course is a better way or a newer way of dealing with the document object model. And there's other ways as well but jQuery has been something we've used for a long time. So let's take a look at first one and take a look at the source code. And here is some code. Let me let me just use Source. It happens to be showing you the source in case you don't know to view the source, but let's go ahead and view page source here. Make it a little better, this is my little quote. That's my little magic to show the Source. But basically let's just take, this is showing how to do basic things in jQuery. And so if I hit refresh again, you'll see it hits an alert button. Make it bigger, okay. So here's a basic jQuery. So the first thing is jQuery is a software library, a bunch of functions, actually kind of one function named dollar sign that has a bunch of methods to it. And we load it and so you have to load it. So you'll notice that I have to load this before I reference this dollar sign. So but I'm also loading it kind of at the end of the document. There is a discussion about where you load this, and best practice tends to want to load it in the document and have a line above which there static HTML. And then pull your JavaScript down to the bottom of the document as much as possible. But a lot of people don't do that, but I'm just trying to do it here, but it's about JavaScript. So on the thing we talked about in lecture was how the dollar sign is just an object. It's not language syntax, it's just an object. And so we're calling the dollar sign function, and the dollar sign function is being passed a parameter of the document. Document is the JavaScript variable document that represents the document object model. It's all the pixels and the things that are on the screen, and the thing you see when you do view source. Now the place we tend to start in jQuery is we use the document ready function. And so what this thing is (document).ready is a bit of code. Let me go in first class functions here. document.ready says, please run this little function that I'm giving you when the document is ready, when the document loading has finished. So in a sense when the whole document is finished and all the stuff has been parsed, and all of the ancillary elements have been loaded, etc, etc., then call my code. And we're using first-class functions because we have an anonymous function that's got an alert and a console log just so that we can see when it happens. So it's not very impressive, it's just when I hit refresh on this page, window developer console so you can see this. So you can see that, clear that. If I hit refresh it's going to wait until the page is fully loaded, and then it's going to run those two lines of code. Okay, the alert happens first and then the console.log happened second. Now remember that alert is a very aggressive way of doing debugging, and that it actually stops the browser in its tracks. console.log just sort of print something and keeps on going. So there's nothing, when it's in the middle of that alert browser gets to do nothing else, it doesn't run the next line. It's it's really stopping everything. And so (document).ready dollar function call the dollar sign function pass in document. It returns an object that has a function, a method called ready. The ready function takes one parameter and the parameter is some code to be run. So this is kind of what's called an asynchronous programming model in that I'm not running this function right now. I am telling jQuery to run the function later. The other thing to notice really quick is there is function name here. And that's because we don't need to name it. We could put this in a named function and tell it to run function x y z here but instead it's basically convention because of the awesomeness of first class functions in JavaScript to just put the code right there. And so it looks like syntax soup, but it's really not. Call a function, get the object back, call the ready method, pass in one parameter. Oops, don't do that. Pass in one parameter which is source code, and then you have the end of the function, which is this parentheses. And then this all all here is in effect one line of JavaScript. Okay, so that's the first one. So now we take a look at the next one. And this one here, and we're going to do a console turn on the console web developer console. Okay like that. So when this page loads there's another JavaScript constant called window. And so window is the not the whole document the document might be larger than a window and if your window, let me make it like this. So if your document is bigger than your window you get a just scroll bar. If your document is not bigger than your window then you don't get a scrollbar, okay. And so the window is the the browser's concept of what you're seeing, not necessarily what's there. Inspect element, Inspect element is everything on the page, including stuff that might not be viewable. Now this one's sort of small, but you get it. Yeah idea that Dom is always there, window is what's here. So one of the things we like to do if you're building responsive or accessible content sometimes, you want to check when this thing is resized. And so we say dollar, which is a function the jQuery function that returns the jQuery wrapped version of the window object, and we're going to call a method in that called resize. And what we're saying is this is another example of delayed execution, say please execute this code when the window is resized. Okay, so we're not executing the code right now. We are executing the resize function, but we're passing in data and then jQuery is going to store that for later. And when jQuery detects the resize has happened, it's going to call our code. Now all this code does is print this out the current dollar window width and dollar window height. Now it turns out that in the old days, it was really difficult to figure out window width and window height. Because width sometimes included the scrollbars, sometimes it didn't include scroll bars on different browsers and different versions. So jQuery is conveniently telling us what the width really is, so we can write code like to take 80% of the width. Whatever it is we want we can say 80% and we know it's going to work consistently across all browsers. That was part of what jQuery did was it standardized things that were different acoss browsers. So now let's resize the screen. All right, let's resize the screen. And every time the screen resizes you can see that I am getting, my code is being called as a part of the method, right. So my code's being called. So this is called event-driven programming. We are not running our code right now. We are asking the browser to run the code for us when something happens. So that's part of jacking into [COUGH] jacking into the jQuery's event system. Okay, so I hope you found this useful.
