Hello, and welcome to our lecture on jQuery, APIs and JSON. We're going to roll a whole bunch of stuff into this lecture. I'm not going to talk long time but a long time about each thing, so some of the things you may have to look at twice because it's kind of compressed and you don't want to miss anything because they build from kind of tiny to big really fast. So we talked about JavaScript, talked about the Document Object Model and how they're very incompatible in terms of their shapes. And so there is a bunch of libraries that came out and we had this thing like getId, getElementById that I kind of characterized as old school JavaScript or the old way we did portable stuff. But jQuery is the thing that really has solved the mess that is the browser incompatibility. Now it turns out that there was lots and lots of libraries that were being developed at the same time that were trying to become like the low level utilities for JavaScript. And jQuery was the one that kind of won in the space. The reason that many people think that it won is because it had the best documentation and it still has outstanding documentation. There's a lot JavaScript libraries that were there and the people wrote them could use them. But jQuery was this thing that like anybody could use, it was well enough document. And that pattern, the point we're not going to put a lot of jQuery slides in is that they also show you just little snippets of code that you can cut and paste and then adapt and make work. So in general you need a way to animate the opening of a window with jQuery. You go to Google and you type animate the opening of a window with jQuery and you'll find often on thejQuery site, a little five line snippet of code, that'll give you the starting point, and then you'll adapt. So I'm not going to talk too much about that. So this is sort of some very simple jQuery. So what we do here is we are going to in our head document. Sometimes folks prefer to put this down, near the end of the body, but I'll just sort of use the style and put it in the head, and you go download a version of the jQuery library. And we're going to pull this library in and what it does is it jacks itself into document object model and then makes it so that this variable dollar sign. Dollar sign ends up being a function name. jQuery takes over. They just picked it. Now, you can actually tell jQuery to pick a different one, but dollar sign is the one that jQuery kind of pick. And so dollar sign is a function call, and document is a parameter to that function. And it returns an object, a JavaScript object, that has many methods, .ready is on of those methods. So the jQuery syntax takes a little getting used to because this is like a function call and then this is a method within that function that happens to be a function call that goes all the way to here. And so, we tend to connect these things together and we're also seeing the use in here of first class functions. So the parameter, the first parameter to the jQuery ready method, is this function, it's actually code. Now, at a high level what we're saying here. Is we are saying, when the document is ready, when it's fully loaded and all the images have loaded, at that moment, please run some of our code. And we wrote this code and we have a function that's got two lines in it. One's an alert and one says in the console log it says, Hello JQuery. And this is really common because often, what you want to do is, after the page is loaded. You want to sort of jack in various places and add interactive elements to pieces of the page using jQuery, and then having jQuery respond to the interactive things in that page. And we'll build stuff that looks like that. So let's go ahead and run this. By the way, you can download the code here for this set of examples on the php-intro.com/code jQuery zip. I got that all downloaded and jquery-01, whoops, sorry, got to clear that so I can click jquery-01. And hello.php, that was the code I just showed you. Let me turn on developer console while I'm doing this. So I got the developer console. I'm going to watch the console. I'm going to say hello.php. So what happens is this page will load, it will run the JavaScript it loads the jQuery library, let's start with the network look view of this. I'll hit this page hello.php and you'll see that my php request response happened and then in that it said wow, go load some more JavaScript. And then in that JavaScript, it executed JavaScript and said when the document has finished loading call my function. And in that function you get call an alert, that's my alert. So this function happens at the end of page loading, turns up this is important because it takes a while for the browser to get the page all put together. And if you're going to write JavaScript, you're going to start looking at pieces of pages, it's useful, so the first thing you kind of learn in jQuery Is how to trigger things that happen after the page is loaded and that's what this ready method does. And if I look at the console, you see that there's a console message as well. And if I hit refresh, I'll clear this and I hit refresh, you will see, out comes the alert. And the alert happens first, but we know that the page is finished loading. And then the console message comes up. So that's how it was in the code. It did an alert console. But this is basically saying wait until all the document is loaded. So it goes all out and it loads all of the sub series pieces, etc., etc. So document ready is very, very, very intelligent. So again, we use this to jack in and we'll see some things here. So another thing we can do for example is jack in to the, I keep saying jack in as I register an event is what really is going on. And dollar sign here is a function, it has a parameter window which returns an object so the function $ pass in window, get back jQuery object, has a method of .resize. And what we're saying here is we would like to register and resize event and we would like this code, right here, this code right here, from here to here, to be called whenever this screen is resized. Whenever the window is resized, the window is the part of browser that's on the screen, okay? And, [COUGH] so while the pages loading we're saying, connect us up so that as resizes happen, our code is called, and there's lots and lots of things like that. So let's take a look at that one I'm sorry, gotta turn that back. So the resize runs and in this point we have just registered a beta code that we want to run on the resize event. Okay, now, the way resize happens, gotta move this little guy. I should have resized that all along. Okay, so the resize event is as I move this window and make it smaller and larger, and you can see my code is being called. Over and over and over let me just clear this, and now when I resize this, my code is being called because I told jQuery, please call me every time a screen resizes. Sometimes it does it while you're dragging on a resize and sometimes it does it when you let go of the resize but eventually my code will be informed that the page has been resized. And so I did that with this window .resize function that says, hey jQuery call me, register this bit of code to be called when the resize happens, when the window's resize call me. Now I wouldn't normally just print this stuff out I might do something like resize something or show or hide something, who knows what I want to do in this code. It just shows another pattern of jacking in to a different event then the .ready which is the ready event which is called when the page is fully loaded, okay. Here is another bit of jQuery and this is a pattern called the query do. I'm going to have this code toggle.php and I've got a paragraph, the paragraph goes from here to here, and I've got this spinner inside the paragraph and I've got it set up to be hidden when the page first shows up. But I've got an id tag on the paragraph and an id tag on the spinner. And so, then what I do is I make an a tag, so that when I hit the toggle, it runs this JavaScript, and this JavaScript is jQuery. It's a $, an I pass and string. String which is #spinner and that means id tag name spinner. Go find the id tag name spinner. Returns an object and then I call the toggle method in that id. So that flips the display none often on. So I can click this toggle button we'll see let me do this in a second as many times as I like and then that will hide and show the spinner. Later we'll show and hide the spinner for a more useful purpose. Here's another one. Here is dollar go find, I've another little tag called red which says, go find the paragraph tag which is this whole tag right here and call the method CSS and change the background color to red of the paragraph. And when I click on green, it says, go find the paragraph, change, use, call the CSS method, change the background color to green. So these are queries that look up a piece. So this is like a query. $para says, grab the tag. With an id of para. So that's what that does. It's a look up and then, you call a method on the tag, basically, you get back up jQuery object which represents the tag, okay? So let's play with this code. Let's play with this code. [COUGH] So, if I say Toggle. Well, if you do a view source, let me just do a view source here. If you just do view source, you see my paragraph from here to here. You see my spinner, which has an ID of spinner. And it's currently not shown, because display is none. So when I hit toggle, it's going to say, go find that. Was that a spin? No, it's just a image tag, but it's okay. The image tag is hidden, as if it's not there. When I say toggle, go find that image tag with id of spinner and toggle it's visibility on off. So I just toggle it on and I can toggle it off. Toggle it on. I'm not changing the HTML at this point I'm changing the CSS associated with the tag and specifically this display value the CSS. And if you recall I got this and I want to click red, then I'm going to go grab the paragraph which is all of this actually. And then I'm going to set it's background color to red or green toggling back and forth. Red, green, red, green, red, green. So none of this is a request response cycle. And none of this is really changing the document object model. We will do other things that will actually add tags and remove tags. But for now, I'm just changing the CSS on tags using jQuery commands. And again, I'm just giving you the simplest of stuff, where, literally many, many things you can call here. Toggle and css are just two of many things that you can do. You can animate, you can do this, you can set transparency. Who knows what you can do? The code documentation. This is the notion of grabbing a bit of the HTML DOM and doing something to it. Query do syntax in jQuery and the rest of it just go look at the jQuery documentation, there's tons of it. [MUSIC]
