jQuery application structure

- [Instructor] jQuery is a JavaScript library created by John Resig back in 2006. Some people may think that jQuery is a new language, in fact it is not. It is just a single, robust cross-platform JavaScript library. This library allows developers to write the shortest code possible. In fact, the motto, or the slogan, for jQuery is write less, do more. And that's exactly what jQuery does. So again, if you look at this file this is the jQuery library version three. If you look at the code here you see that a lot of these code, a lot of these syntax it's just pure JavaScript. So, it's just a JavaScript library. Now, in this example I'm going to load this file called the register. And so, this is a registration page if you want fire this up on the browser. So, here is the file. So, it's just a sign up form, basically to allow people to sign up for this fictitious site. And it has a lot of fields in here, so with jQuery you can do the same thing with JavaScript although in a much more efficient way. And I'm going to show you how you actually use jQuery to select each of these, or some of these elements here using the traditional JavaScript method and we compare that to the new way run in jQuery. So, let's head back to brackets. Okay, so the first thing I want to do is to include the library. You do that exactly like you would with any JavaScript. So, src is equal to, it's inside my js folder. So, now I've loaded the library to this page and then I'm going to do this script writing to this page here. I'm going to use the prove self method to write script here. Normally you don't do this but for this example, I think it should be sufficient. Okay, so jQuery follows this syntax here. So we're going to put a syntax here. It uses a dollar sign, followed by a selector. You can use a selector or you can use an object. Or, sometimes, you can use the html string which is kind of rare. But, these three are possible. Then followed by action. Action is nothing more than a method. Okay so, this is the heart of jQuery. This is the main syntax, actually only syntax to be used in jQuery. And, jQuery uses something called method chaining you'll see in a moment here which allows us to chain a lot of functions or actions together in a single statement. Not only that, jQuery also has a factory function see two of them. And these are the dollar sign with the pair of parenthesis and then you also have the jQuery lowercase j big q. Okay these two are aliases. That means that they mean exactly the same thing. You can use either or in your code. The reason is because maybe sometimes a different language might use the dollar sign and when you do that you might have a conflict with jQuery. So, they come up with these two options you can use either or just in case you have that type of conflict. So if it does have a dollar sign conflict you would go to the jQuery and so on. But typically you see a lot of the dollar signs in most of the jQuery code. Okay so, that's the factory function. Typically when you want to load your page and you want to interact with a DOM in traditional JavaScript you would use the window dot unload. Okay. And load this function, this anonymous function. And, for example I want to say alert hello world. Okay? Okay so this is how you would do it in pure JavaScript. You're going to click save and then I'm going to load this in my browser and I'm going to refresh it. So you see the message hello world here, okay? This is just traditional way of doing things. Which is fine. So, now, jQuery has a similar way of doing this as well. Similar to the onload so I'm going to counter this out. And in jQuery you're going to use this so document, so you can see document's an object has a ready function. And for this ready function you can put the anonymous function here. Okay. And I'm going to close that with the parenthesis here. So, this is very similar to the onload here in line 16. The only thing is that well the difference between the two is that the onload will wait until everything is loaded including images, all the content, video, and audio files. If you have a lot of that stuff then it will wait until everything's loaded. Versus, with a ready event you would just have to wait until document's loaded and you find that function. You don't have to wait until all the content loaded. And that's the difference. Okay, so if I click save here. Well let me just change the text and make sure we do voice. I'm going to say jQuery World. Click save, or control s to save. And go back to the browser. I'm going to reload this page. You see that it says hello jQuery world. Okay, so it works fine. So this is a very common way on how to make sure the DOM is loaded before you can try your function or your code. Otherwise, you may end up with some type of error. Another way to do this is of course I just showed you that you can use jQueries instead of the dollar sign you can put jQuery here. And that should still be fine. So I want to change the text here to say Hello jQuery World two. And, save. Control s to save. And then load in the browser. And you see that it says Hello jQuery World two. That works fine, too, because this is so common. This function here is so common that jQuery says forget this, we don't need all of that. We could just do this. So they have shortened that to something like this even shorter now. So, if you see this in jQuery this is the ready event. It does exactly the same like we just did earlier. Okay you want to put three here so that we know it actually works. Control s to save and load in the browser. I'm going to refresh here, and you see hello world three. So there are three different ways how you can wait for the DOM to load. But this is the most common one well I shouldn't say most but it's a very common one. And again, the slogan is to write less, do more. Alright so. In this exercise I'm going to show you how you can actually target the form fields. So if you will scroll down to right about line 78 or so. Around here. So you have the form groups here. Have a class put in groups here. Have another one down here. And if you scroll down have another one down here and so on. So I'm going to target the group and select one of the input tags and do something with it. So, if you notice that inside the input group the first child is always a span in the way that it's coded. And I'm interested in the second child the second input, third, and fourth, and so on if you want to select them. So let's target this input group and the first input field and then make some modifications. So back to the top, alright. And I'm going to remove this line. And, down here I'm going to say traditionally, you would do the following. Again, jQuery allows us to incorporate both pure JavaScript and jQuery together in the same code. If you know that this is jQuery, right? Line 17. But now, I'm going include some traditional JavaScript in here. And because, again, jQuery is just a JavaScript library it is JavaScript. So let's say I want to target the following. This is the traditional on JS. Typically you want to say var maybe the group equals document dot I'm going to use the query selector not the separate, just the query selector to select the first occurrence of the input group class. Okay so it's going to target the class and it's going to grab the first occurrence that's what I want. And then now, I want to say change the border to maybe one pixels thick, solid and I want this to be red. So I'm going to click save, control s. Back to the browser and reload. You see that it targets that field. Next I'm going to select the first field, the input field and I'm going to change that to a different color. And so the next thing that you want to do you want to create another variable we'll call it input, which is a child of group. Okay? So I'm going to call the children. Which children is it? Well the children of one. Not the zero. The zero will give us the span. So I'm going to grab the one. So now input is pointing to that field called first name and I'm going to change the style or the CSS of the background color. I'm going to call it yellow. Okay? So control s to save. Back to the browser. And refresh. Okay so you can see that now that has been selected and changed to yellow. So, this is the traditional way of doing the code in JavaScript. It takes about four lines. Okay so, now I'm going to show you how we do it in jQuery. jQuery follows this procedure called method chaining and it's quite effective. It means you can chain all the actions together into a single statement. So dollar sign. I want to select the input, okay. Looks very similar to the query selector up there. Input group. Actually I want to put a dot in front, it's a class. And this is the same rule as you would do in your CSS. Okay. So the first group, I want to get this first group. Now the difference is that the query selector only grabs the first occurrence whereas in jQuery it's going to grab all the group all the elements that have this class. So you don't want that, I want to grab the first one. So you use a function called eq which is equal the first element. In this case it's an index of zero, okay. So that first group, and I'm going to change the CSS border. Right? The border to one solid or whatever it is. Actually I'm going to change this to the second one. Okay, instead of one so we have both of them. So, it takes the index of one. The second group, which is the Email. And the CSS is a special function. It's a set her and get her function method that allows us to do both. You can set or we can retrieve the data from there. So the first argument is the property of border. If you leave it blank like this it's going to return the value of this border. If you supply the second argument it's going to set it for us. I'm going to put one px, a solid I'm going to use green for this one, okay. So, we'll click save or control s to save. Back to the browser. Reload the page. And you see it now selects the second field. Alright? So the next thing is I'm going to change this Email box to another color which will be yellow as well. Okay so we got that part. Now the next thing is you can change it to the same line. Instead of going to a different line you can change here by using the dot notation. So now I'm pointing to that group. I want to get the second child which is the input. So I'm going to say children and equal to the second children which is an index of one and I want to change its CSS properties. Change the background color to yellow as well. Okay, so I'm going to click save or control s. And you'll see that this is still a single statement. Line 26. It's followed by a line of dots and again, this a way how you can chain methods together in jQuery. It's very powerful and also it can get confusing. But let's do and see if it does what we expect it to do. So control s to save again. Back to the browser. And reload. So there it is it changes the background to yellow as well. As you can see this is a single statement but it's really hard to read sometimes. So, with jQuery you can actually break all these into multiple lines. If you put, right before the dot you break it into separate lines it helps us to see things better that way. It's still a single statement but it's using multiple lines. So that is the difference between jQuery and a traditional JavaScript. But with these you can do a lot more. Okay for example, let me do this way so you can see a little better. Just indent here to show you the different levels of the tree. So I'm looking at the input group the second one, and then change the CSS and then target the children, the second child and change its CSS. Now, what if I want to use the same statement but I want to change the first one which is equal zero? Right? I could do this. I could use a special function called end. Dot end. And what that does is it ends it there and goes back to the previous object selector. So it's going to go back to the children now instead of CSS, back to the children and back here I want to select the first child which is the span tab. Okay? And then, if I want to follow the same convention here. And I want to change the background as well to something else. Let's just go with green this time, okay? So control s to save. And reload. So it changes that to green. I can do this all the way through the entire page if I want to. And so you can see it's quite powerful you can move back and forth, up and down the tree using a single statement although it's not the typical way to do things but you can. Again, it's all still in the same statement. So this is quite powerful and it's quite different than how you actually code your JavaScript code. So jQuery's a lot of cool features. Some of those, again, you just saw here is to access elements in a document you can modify their appearance change its content, and so on. Of course, animation is another big thing in jQuery along with ajax, interactions and of course user interactions. So this is one of the examples of how jQuery is different from the traditional JavaScript.