So now we're going to take a brief look at jQuery. And so jQuery basically solved the problem in 2005 that the document object models weren't all that portable. Because in 1995, they wanted the browsers to adopt JavaScript, but they didn't want to make as a prerequisite standardizing the document object model, which is really the shape of how the tags are all put together. And so in early 2000s as we started using JavaScript more and more seriously, we would write so much if then else code for one browser or the other browser that all that got sort of wrapped up into a couple of different JavaScript libraries. And out of that many JavaScript libraries jQuery kind of emerged as the best one and the one that we tended to use a most. And so instead of just calling the document module object model directly, we'd call a jQuery function. And then jQuery would call the document object model. But if one browser did it a little differently, jQuery had those if then elses. So we didn't have to each of us keep track of the different browsers and how the different browsers did various things. And this was a great Improvement because we could just start writing really fun interactive applications. And we just we didn't have to become experts in the browsers, we just would use jQuery. It was pretty cool. So jQuery was built by a fellow named John Resig. He just did it for himself because we were all kind of trying to solve the portability problems that we had as we would move from one browser to another browser. And really it solves two problems. And that is how to select and manipulate document object model elements, find them, select them, and manipulate them, and then how to register events. Now, we've see events, onClick is a good example of an event. And it was released in 2006, and it was super, super-duper successful. It had a very quick uptake and literally we're sitting here at least 15 years later and people still use it. There are very, very few things in technology that people like. Now we'll talk about at the end how the the world is kind of catching up to jQuery. And there's sort of this movement to make it obsolete by making the browsers better, which I'm all for. If the browser is becoming better than jQuery, we all will benefit. So that that lack of willingness to standardize the browsers in 95 led to the need to make jQuery in 2005. And then for the past 15 years the browsers have been grudgingly kind of lining themselves up, so that we didn't really need to use jQuery, which is totally cool. And John would probably agree and he would say, well, now that they got it figured out, my library is not needed. I'm totally happy because now I can write code without having to worry about portability. So I'm not going to tell you a ton about jQuery. I'm not going to give you an exhaustive list of things. I'm going to show you a couple of samples of the kinds of things that you can do with jQuery. jQuery has great documentation, whether it's jquery.com or StackOverflow. You just say, how do I make a button disappear in jQuery? And you actually have to kind of say how do I make a button disappear in vanilla JavaScript, or how do I make a button disappear in jQuery? And you will find all kinds of wonderful things. And I really like the jquery.com site because I mean, it has a little bit of code, eight to ten lines that are pretty much what you want. And then you can add a couple lines and you're good. So I really have enjoyed using jQuery in particular because it's a very expressive language. It's easy to remember how to do things. It looks weird at beginning and I'll kind of talk about that a little bit. But we're just going to kind of get you the starting point because there is a ton to know about jQuery. So here is a bit of jQuery, probably the simplest jQuery that you can make. And so the first thing of course is you've got to include the jQuery Library. jQuery is a bunch of functions actually wrapped up in one big function named $. And so you've got to load this this, this you load, you can either load it in the head or you can load it at the end of the body. And if you load at the end of the body, that's kind of best practice. I'm showing that best practice here. A lot of people load it in the head area, but you would like to pull your JavaScript loads down as low as possible, so that it doesn't have to load so much stuff before it starts showing your page. But that's neither here nor there, I've got it down here. You certainly have to load it before you start calling it. So the interesting thing about jQuery and this goes back to JavaScript. And if you remember variables and functions in JavaScript can start with a $. That comes from Perl, and it comes from PHP, and it comes from the Bash shell scripting language. And so when JavaScript first came out, in order to appeal to those people from those languages they made $ possible. But there were so many people coming from Java, and C, and other languages like that, that they thought that Java is cool, and C is cool, and PHP is not cool. And so any language that used $, Perl's not cool. Any language that used $ and its variables was seen as not very cool or not, very classy. But $ remained a completely legitimate letter or character, and you could start a function name or a variable. And so John Resig when he was figuring out he could have named his function jq, or he could have named it j, or he could have named it J. But he didn't, he named the function that sort of captures almost all of the functionality, he named it $. $ is not part of the JavaScript language per se, it is a function named $. That's a function call, $document. A lot of people look at jQuery and think that that's how JavaScript works, that somehow $ is the language syntax. It's not [LAUGH] he wrote somewhere deep in there, function $, parenthesis, curly brace, yada yada, right? So $ is not special, it's just a character. It's like he called his function X, but he didn't, he called it $. So every time you see $ in jQuery, you'll know that that's not because it's a special character. But it does begin to look to us like magic jQuery, that is part of the language rather than whatever because of this use of $. Super clever, couple other things back in the early 2000s, we're using the $ too and there was a fight over who got to call themselves $, that's a long story. But those libraries aren't really too popular anymore, so it doesn't much matter. Okay, so one of the things that you need to do is set up a bunch of things once the page load is completed. And what we mean by page load completed is you've got your HTML downloaded, you've got your JavaScript files downloaded. You've got your images downloaded and the page is kind of ready to be shown. And so if you think about that parse response part,when the response is fully parsed and all the other files are all ready. Then you can say you know what, now that I know the document object model is complete, I'm going to mess with the document object model. And there is a thing called body onload, it's an event that you can do, but each browser triggered body onload differently. And so what jQuery basically said was, I will make it so that you can cause code to run, that runs after the document is ready, and this is the syntax. Now, I'm going to go over this in some detail because it is kind of tricky. Okay, so $(document) retrieves a jQuery wrapped version of the document, and then it has a member function called ready. And that ready takes one parameter, and this is the end of the function with the parentheses. So ready in there is one parameter. So it's like ready(X), it has one parameter. But here is what's cool about JavaScript. Remember that a JavaScript object-oriented pattern is first class functions. So that means that you can actually pass source code in as a parameter on a function call. And so everything from function to close curly brace is the first parameter. Because what we're saying to jQuery, and this is our first class functions are so cool, we're saying, hey jQuery, here's some code. Just grab it, keep it, hold on to it for a bit, and when the document is finished loading, run my code. So you're in effect creating an event for later and giving your code to be run when the event happens, and the event that's going to happen is document ready triggers. And so all we're doing in this function. The other thing to just quickly notice is it's an anonymous function in that it doesn't have a name. It doesn't really need to have a name because it's code. It's just stored in a variable, code is going to be in a variable deep inside jQuery somewhere. And so in that code, we have two lines, and it's going to do an alert and a console log. And it will wait until everything, and this is really simple page, so it's going to come out right away. But that syntax, and so when I was first learning jQuery, I would just paste this stuff in and I'd be like, yeah, I think I got a syntax error, but I don't know, none of it made sense. It just looked like someone put punctuation in a blender and made a punctuation smoothie. That's what I used to think. But now, that's why I'm stopping here to make sure that you have as best chance as you can to understand this, right? So this summit, this curly brace is the end of the function, and the parentheses is the end of the ready, and $(document) is a function call that has a return value that is itself an object that has a method of ready inside of it. And the ready method takes one parameter, which is code. It looks monstrous, but it makes perfect sense if you understand JavaScript object orientation. Okay, but the other lesson here is this notion that you can register for later. As this is being passed, the code does not run. It runs some time after the entire document is passed and loaded, and all of its sort of dependent pieces have been loaded as well. And then jQuery comes back and runs these two lines of code for you. So that's like event-driven coding. On click is the same way. On click basically says, later, I've got this code ready. Later, when somebody clicks on this, come back and run that code, okay. So two of the things that we do in jQuery is manipulate the document object model and manage events. And so this is a good example of an event, okay? And so what we're doing here is, of course, we're including the jQuery and $(window). And so if you think about, there's the $(document), so if you think about a browser and you think about the actual document, there's a window, which is the amount that you can see, but there's a part of the document above the window and below the window. So the document is the entire page that you might scroll up and down with, and the window is the part of the page that you're seeing right now. So it turns out if you resize your browser, the thing that's resizing is not the document. The document is the same size. It actually doesn't exactly have a size because it depends on the width of the window. But the window is the JavaScript equivalent. There's the document, which is all the text, and window is what you're seeing at this moment. So what we're saying here is $(window), which is calling jQuery and passing the window variable into it, which is defined, window is defined by the browser for us. And then that gives us back a jQuery object which has a resize method in it. And basically, what we say, and the resize method ends here at the parentheses, and then we have a function. And what the function is is the function is the code that's going to get called whenever the user resizes their browser. When the user grabs and resizes the browser, that means that the window size changes and call me back. So I might, this is how we build responsive websites, so that we can say, hey, if the window changes, I want to reorganize the thing or hide a thing, or make it so that two things that are next to each other go below each other, or something. So we often do want to get called back when windows get resized. And so in this case, we're not going to do anything. We're just going to log the fact that the new size of the window, and now we $(window).width, which is a method of the $(window) object, jQuery's wrapping on the window object. Width, figuring out how wide the window is is actually really tricky for browsers, because it turns out that windows sometimes have scroll bars on their side and sometimes they don't. And some browsers count the scroll bar as the width of the window and some browsers don't count the scroll bar as that. And so there's all these non-portable things that are all cleaned up nicely by calling, hey, how big is the window? How tall is the window? Which is really the width of the window and the height of the window, the viewable part of the page that you're currently looking at. And so if you run this code and you resize it, you see the log just go [SOUND]. It goes back and forth really fast, because every time you resize or you resize and let go, then it calls this code. And again, you have asked jQuery to inform you by calling your code whenever a particular event happens. So registering events, one was the ready event, one is a window resize event, and so this is just sort of how that happens. Now, there's on click events. So in this one, we're going to play a little bit with more of the jQuery syntax to look things up in a little bit more about how events work and how we hook events into the various parts of the document. So one of the things that we're going to do, so if you were to use this, go to this jq-03 thing, when you click Toggle, this spinner comes on and off. And when you click Red, this background becomes blue. So you can toggle it on and off. And so the first thing we do when we're going to use jQuery is we have to put handles on our code. And so we're going to take this paragraph right here and we're going to put an ID tag on it so we can grab on it. That's how we're going to set the background. And the spinner is sitting here with a display:none, style=display:none, and we put an ID as spinner and so we can grab it. And then we're going to put these two anchor tags, this Toggle and this Red tag, anchor tags, and you'll notice we didn't put on click. When we did this before we used jQuery, we used an on click to accomplish this same kind of idea. And so this, in a sense, it's sort of the idea that this is a HTML. It's red with CSS. And it sort of immediately can be shown, even before, and in here there'd be a load of the jQuery library and jQuery all sort of stuff all starts up. I took the loaded jQuery out right there. And the idea is is that you have HTML and then your jQuery will augment that HTML. So we kind of have this below the line and above the line. We have a static HTML and now we're going to do stuff to sort of get our hands into the DOM. And so you the order is important because the DOM is being built but there is no JavaScript in there, that DOM is built really fast and then we can then add to it. So the first thing we're going to do in most jQuery sort of start out with this is you're going to do some setup, and you're going to do it on a document ready event. And you're going to have some code, so all of this is the code that fires on document.ready. jQuery document.ready takes care of all when that fires and makes sure that we get a called. And so we're going to do two things, the first we're going to do is we're going to use this on and we're going to go find the tog bit, which is this bit which is toggle which is toggle. And we're going to effectively hook an event in that's going to run this code, right. And then the next thing we do is we go and say, let's go grab the red thing and do an on click and then call, when that gets clicked call this code. So what we've done is we sort of preset it so that we have sort of snuck in and said add an event here, add an event here, and etc, right. And so if we look at what's going to happen on the toggle, when we click on toggle it goes and grabs spinner and toggle hide show, hide show, hide show. And that's how the spinner comes and goes and comes and goes. So if we then look at what happens when we click on the red, we click on red and then that is going to run, you click on red and that's going to run this code right here. And that is going to go and find para, which is this paragraph tag, and call it go to change the CSS and change the background color to green. We're being ironic by making it green. So that changes the background color to green. So you see this thing of we don't put so much JavaScript in line because that slows the loading of the page, what we do at the end once the page is all loaded. Then we sort of hook in, hook in, hook in, add an event here, add an event there. And then when we as the user start clicking on things, things start to happen because then we're clicking and activating it. So it's just a very much a jQuery pattern to get everything all set up in the document ready and then have the page have its interactive aspects that use jQuery. So this is a little more sophisticated example that sort of mirrors what we did with the document object model. And so we're going to re-implement this thing where it starts out and says first item and every time we click on more it adds another list item to that, and we're just going to redo it. So we're going to have this anchor tag, now you'll notice I'm not saying on click here. I'm going to show you how to do that in a more jQuery like way, I'm just leaving it alone. But I am giving an ID so I can get my hands on it later. I am going to have an unsigned list with an ID of the list, and it's going to have a first item as it comes from the server before I do anything else. So again, you wouldn't see any of this stuff the first time it comes to the server, it would say more and first item and that's it, nothing else. And then we include the jQuery library, of course, and now we're going to run. And this code is running in a sense as the browser is loading. It's not, well yeah, it's going to register a bunch of events. So let's take a look at it. So I'm going to have a counter equals one global variable. I'm going to do a document ready, and that is going to pass in some function that says run all the code inside the document ready once the document is fully loaded, which is sometimes after that very last line. When the document is ready it runs another thing, and this happens to be go grab dollar quote pound sign dot href says, go grab whatever tag in the document has an ID of the href and then that gets it. And then there's a method called on, and the on is the way to register interest in an event. So we're saying on click, and that's pretty much the same as putting on click in that anchor tag the way we did in the previous example. So we are registering, the page is displayed, and the first thing we do after the page is displayed is register our interest in click events. And then we have to say, and wait a second, when the click event's going to happen, I want you to run some code for me. So now we have first class functions, again, an anonymous function, right. And that's the code that's going to run when we click on more. So we have three lines of code that are going to run when we click on more. And when the page shows up we see more, we see first item, and then once the page is ready then it registers an on click with the more. You could click on the more, it would do nothing until the on click registration happened, which is like a blink of the eye after the page shows up, okay. It's not a static thing, it's something that the code actually does, meaning if you did something like had a syntax error on counter equals one, this wouldn't register, it just wouldn't, it wouldn't register. But it does and we have counter equals one. So now let's walk through what happens when we click on more. We click on more and more jQuery has registered an event for us, it says run this code, and so that's what it does. It jumps in and runs that code, console log clicked, counter plus plus, you know what that is. So then what we're going to do is we're going to go grab that unsigned list, that's this unsigned list. And then we're going to call on that jQuery element, we're going to call the append method and we're just going to give it some text. We're going to say here's an li tag, [SOUND] there's nothing special. This is just a string, and this is string concatenation plus a string concatenation, the counter's going to show up so that's going to be one, and we're just going to append it to the list. So out of this append another list item shows up, and then we add the counter. And if you click on it again it's going to run and the second counter's going to show up, and if you click on more again the third counter's, you can click on as many times you want and it'll just keep adding things to it. So we're extending the document object model. We've changed the text of it, we change the color of it, and so these are the kinds of things that you can do. And as you get used to jQuery, I think you'll really like, it'll take you a little while to get used to this first class function syntax. Just come back to this lecture and watch it again, and then maybe after the fourth or fifth time you like, I get it, it's a first-class function, the function keyword returns code. It's actually the function is executable code, it's beautiful and I could actually write this code in a way that would make it a lot clearer what's going on. I can do it with a couple of a variables and assignment statements, but JavaScript people just love this first class functions stuff. So they tend to write this nesting, and there are two, there's a function nested inside of a function. It's okay after a while, it's very succinct and it's very object oriented. It's a very beautiful, but it is It doesn't look like Fortran, right, it doesn't look like Python [SOUND] cause it's like just object orientation layered on top of itself. But after a while you really will I think appreciate the amazing elegance of jQuery and how the it looks that's why it looks and feels like it's actually part of JavaScript. Not really a library, but it's not, it's just one really clever object named dollar sign. Just amazing to me. Now in 2005 the browsers were kind of a mess the document object models are all different when, we would write JavaScript the stuff would break and they would release a new browser and it would break. JQuery has been around. Well, almost 15 years now and it's been around so long that a lot of people did not know what life was like before jQuery and they just include jQuery and they just assume that they don't realize that include statement or that script tag. That's pulling jQuery in, is the thing that makes jQuery possible in those dollar signs just wouldn't do anything, if it wasn't for that script tag, but JQuery has become sort of normal. It's the new normal and so what was interesting is that in jQuery sort of showed up the browsers. The browser folks were and the JavaScript folks were a little bit I would say offended is not the right word, cause they used it too. They're that kind of showed that we could do better, there was room for improvement in how JavaScript document object model and browsers work together. We've arranged a jQuery for 15 years and slowly but surely the browser's have been adding one feature at a time. Kind of borrowing the useful things out of jQuery. And and that doesn't I don't think that John Resig would be mad. I think he would say finally and in a way what it means is that jQuery as a library has fewer and fewer if statements in it. Because now if all the browsers support a way to loop through all of the objects like in this little example that I've got, all go through and find all the objects with a class of box. And then hide them well, that's how you do that in jQuery. Right, $ (".box ").hide();, well if in the newer in old days this didn't exist, but in the new browsers, there is a way to do that. Now, what you find honestly is you find that the vanilla JavaScript way to do stuff is often a little wordier than the jQuery stuff and I don't quite know why they didn't just make fake jQuery. But ultimately and the only thing that really matters here is like the dotted box and all this other stuff box style display and none they chose not to change the document object model and give it a whole new sort of layer on top of it. But in time when we can all use what's called vanilla JavaScript, when you're Googling you can say hey, how do you hide a button using jQuery? How do you hide a button using vanilla JavaScript or how do you hide a button without using jQuery, cause increasingly people are starting to just use vanilla JavaScript? And I think that's a really good trend, but for beginning programmers, I think jQuery is just a little more succinct solves our problems a little more directly and the browser's are still catching up. So I think we got another at least 5 years where jQuery is going to still be around and very very popular. But in a sense jQuery is a more and more convenience wrapper on top of really powerful functions that are present in all browsers and it's only a very older browsers and legacy browsers. That jQuery does any real work and that's okay and then we can mix the old and the new syntax and then we find what I actually don't need jQuery anymore. And then you just use what's in the browser and the browser is have had enough revision. So that the new features in the browser's all work on and on and on and on and so it's pretty cool. And so we'll get there jQuery for 15 years has been something that we've depended on heavily and it is influenced tremendously the evolution of the document object model and browser-based JavaScript. [MUSIC]
