 Hi, folks. This is Christian. So in this video, I'm going to do a little review of what Unit 3 should be about. Now, Unit 3 asks you to redo the Unit 2 assignment, which is the shopping cart that you did in JavaScript. This time, you're going to use jQuery to manipulate or refactor the code. Okay, so here is what I want you to do. Now, if you study the code and look at my notes, you should have, I hope, a good understanding of what jQuery is and how to use it. So again, jQuery is just a library that you add into your page and you use that in parallel with JavaScript. So jQuery is used to basically manipulate the DOM. It has a really fast and efficient way to do that. But you just want to be careful because there's a little difference between the two. I mean between jQuery and the native JavaScript. So when you create something out of jQuery, what you get is a jQuery object, not a traditional or the vanilla JavaScript object. And I'll show what that means in a bit. Okay, so you need to either download the jQuery library, which I showed you here, or you can just, you know, use the CDN to do that as well. So let's go back to the code here and let me load my original studio. Okay, so here is the Unit 7. I know I call Unit 7, but actually, I mean, assignment 7 is actually just Unit 2. So I'm going to make a copy of this one here so I don't mess up with my original one. Okay, so I'll make a copy, Ctrl C, Ctrl V, and I'll rename this to something else. We'll just call this, you know, cart underscore jQuery. Okay, so now I'm going to go in here and while it's doing that, you need to go and get jQuery. So I'm going to go back to the browser over here and go to jQuery.org. Okay, so if you go over here, no, jQuery, it's a different site, jQuery.com. All right, so on the right side, just click download the latest version here. If you want to use the file here, you can just do a right click on this link and just say save link as and it's going to download that for you. As you can see over here, you can save that to your file and you put it there. So that's one way, right? Another way is you could just go and then use the CDN. In the CDN, if you go to the very bottom of the page, way down here, click on this link here and it gives you the link to all these versions here. So again, I'm using the uncompressed version because usually this is useful for debugging purposes. I mean, we're not going to modify anything in jQuery at all so you can use anyone that's fine. For me, I'm just going to use this one. So right click on this. Actually, you can click on it, click on it and it will give you this link here. So you just basically copy this. You can just highlight copy it or click this little blue icon here. It will copy to your clipboard automatically and then now go back to your code way over here. So here's my copy. Somehow it didn't let me do it, which is okay. I'm just going to keep this seven copy here. So go to my card right here, open that and right above the JS, card JS here. Make sure you place it above that line. It needs to load first before you script. And somehow my page is not wrapping. I want to wrap my code here. So I'm going to go to my terminal and let's see. Go to my settings. Where is it at? Preferences, settings and I'm going to change for wrap. So I'm going to do a wrap. What a wrap here. Turn it on. I think that's what I need. I need to also have the line. Yeah, that's fine. Font. I'm using like a very small font. I want to make it kind of big. So I'll make it like 18 or 22. I'll use 18 for all my fonts. So it's easier to see. And I think that should do it. Okay, so save, control as you save it. And now my code is a little bit bigger. And I'll add it here and now it's wrapped. So I'm going to go. And then now I can save this and launch this on the browser. And so here we go. And there is the cart. Okay, so if I press F12 and load my console, I know it's working, right? Just make sure it works. If I check my application, check the local storage here, just know storage. If I save it, it's able to save that. It should work that, you know, save that for us. And you can remove that. And I should be able to manipulate these normally, okay? In my example, I did not put a title here. And these are all default to zeros. But of course we can change that anytime you want. Remove it. And then if you go to the console and type in the dollar sign. And if you see that it's a jQuery.fn for function.init, you have jQuery. Okay, that's one way. Another is just to type the word jQuery. And then low case j, up case q. And if you see the function definition, then you have jQuery. Okay, so we're good to go in this part. Now let's go back to the code. And then we're going to do a few changes. So we're pretty much done for this file. We can close that. And go back to the script. And this is our JavaScript code, right? It's just the standard code here. And so now with jQuery, everywhere where you manipulate the DOM, you target a particular element in the DOM, you need to change all of that to jQuery. So for example here, this whole thing could also be written using jQuery, the jQuery ready function. Okay, so you would do that as well. I mean, I guess that's not too critical here. But so you can leave this as is, this line here. Alright, so for example, this part, this whole thing here can be rewritten or re-factored using jQuery. Of course, jQuery cannot do everything here in the script. For example, you cannot create variables like this. So you have to use JavaScript to gather in jQuery. And because jQuery is just a library, it should be able to talk to the native script with no problem. Okay, but not the other way around. Alright, so here is, I'm going to refactor this code here to show you how it's done in jQuery. Okay, so let's put here jQuery. Now the first line here, just we're creating a variable called tbody, which is the object here, which is a global variable. We assign that with the element of the tbody, the tag, at the index of 0, which is the first, you know, tbody, right? Just in case we have, you know, multiple tbodies. So to do that, you can do something like this. Now this is synonymous to the tbody up there, right? So tbody. And that equals to, you put a dollar sign, and then in here is the elements, the IDs and classes and tags and things like that. What have you put in this here? I mean, not the one, this one here and over here. These are the tags or CSS, you know, properties you can add into the jQuery function. So you treat this part exactly like you would do with CSS. Okay, so tbody is a tag. So you put tbody and then the index of 0. Now you cannot do this in jQuery. You cannot put t0 like, I mean, of 0 like that, okay? It doesn't work because it's not a, that's not, it's not how it's done. So if you want to reference a particular index, you have to use a special function called eq. So dot eq. And you pass to this function the index position. So it'll be 0. So this means that we're targeting the tbody, which is the first one of the list. And this is synonymous to this one here. And just to show that it does work, I'm going to change this to say t1, all right? And we'll also show that it does point to the same tbody up here. So if I say this and load my browser up here, now it's already been loaded. So of course it should work, but we'll do anyway. So if I type in the tbody1, as you can see here, it points to the same element as the tbody, right? This is the tbody here. So you see that it's a jQuery function. It has some huge stuff in here. But really, all it does is it targets the tbody at the index 0, as you can see, which is exactly what we want. One thing that you cannot do in jQuery is that tbody1 here is a jQuery object. That means it does not have all the built-in DOM element functions, DOM functions like the inner HTML, inner text, things like that, right? So I cannot do this. So tbody1.inner HTML. If I do that, I'm going to get it undefined. Notice it does not point to anything at all. Normally, if you do something like this, it will return all the elements, all the content inside the tbody, right? But this way you cannot. So because tbody1 is a jQuery object, to get the element or the content in there, you have to call a function called HTML. So tbody1.html. If you pass nothing to it, you see that if it turns the content in that tbody, right? So you have to use a function called HTML. Now, in the other method, if you want to change the content inside the tbody, so normally you would do something like this, right? So tbody1.inner HTML equals something, right? If you do that, like pparagraph tag, whatever it is, then it would change the content in there. But because inner HTML is no longer a property of the tbody1, which is the jQuery object, you cannot do that. So to make changes to the tbody element, you have to use the HTML function again. So tbody1.html, if you pass nothing to it, it's a getter. If you pass something to the function, it's a setter. So here if I put here hi, you will see that it's going to replace the content with the word hi, because now I'm setting the content, I'm changing its content. If you just leave it blank, then it's a retriever, it's a getter, okay? So that's the difference or the equivalent to any HTML and the HTML here. So that's some differences already. I want to show you that. So let's reload this. Let's go back to the code. And so now I showed you that, this is how you target that element. Compare this to this, all right? And then the reason why we put it into variable is because we're going to use this again, like down here, right? Use it in a couple of places, like right here, so tbody. So again, this will not work if I change this to t1, okay? So you have to use the function. But let's go up here first. So I'm going to replace this back to tbody, and we got that line. So I can turn this off. The next thing is this save button here. Notice that I target the same button called id save, and I save it to a button save. And then I call the event listener, and I invoke a click event, and I load this anonymous function to load the storage, add data to the local storage, okay? So of course, this is part of JavaScript, so you keep this as is. But these functions here can be written in jQuery. So these two lines can make it really short as follows. So I'll put some lines here. So then you can either use a variable or you don't have to, because we're not going to use this again. We only use it once in this code. So if that's the case, then you don't really need a variable. You can just target this save directly like following. So you can say $sign, and save is an id. So make sure you put a pound sign in front, and then that's it. This line is equivalent to this whole line here, okay? I'm not going to assign two variables. I'll use that right away. And then the next thing is we're going to add an event. Oops, event here. The event is called click. Okay, so this is synonymous to the following. So you put a dot, you're chaining a lot of methods in jQuery. On is the event. On is equivalent to the event listener here, okay? So inside here it takes two parameters as well. So we are going to issue a click event. And then the second part is the function. So you can copy this and put it right in here just like that. So these two are the same. Okay? So these four lines, you can turn those off and put it into three lines here, right? And it should work as normal, right? The only thing is that down here it's not going to work again because we are using HTML. You'll see that. But I'm going to show you that on the browser what happens. So go back to the browser. You see some errors already. It says, can I set property HTML at 1808? If you click on that, it tells you exactly where these are. Because when we update these line totals, you know, this don't work because there's no line total here already because our book table is not created. Okay? Because our code isn't correct. Okay? So let's go fix that first. And of course you're going to fix everything to make it work, right? This is a global variable indeed. So that means you're going to change that. Anywhere you use a T-body, you have to use the correct version. So down here, T-body. I cannot do that. So I'm going to replace it with the jQuery version, T-body.html. And all I'm doing is just make it blank. So you have to put something here, so empty string. You reset that. Okay, where else do I use T-body? So if you keep scrolling down, we built the books here, right? We get all this TR. And then down here we have the T-body and HTML. Again, this does not work. So instead of doing that way, you can use the append function. Now this is not a DOM function, although it is. But in jQuery, it has its own function as well. And it treats the same way. So you can put that here. So you append every row to the T-body. Okay? So that'll work. Where else do we use T-body? I think that's all we use the T-body if I don't forget. If it is, it will tell us. I think that's all we need to use. Okay? So let's go to the browser again and see what it looks like. As you can see, everything comes back normally. And so now if I go to applications and look at local storage, there's no local storage there. If I click Save, you see it works just fine. How do I know it works using the jQuery? You can remove that again. And you can go back to the code and turn it off. So way up here, when we save to the local storage, you can just turn that off like this. Now you should not be able to save it if it works. And of course, I expect that to work. So now we can go and try to save it. As you can see, it's not working. I can add and remove and things like that. But there's some problem here anyway. And I save it and then of course it's not saved to the storage. Okay? So that's how I want you to do with this assignment. So that works fine. Now the next thing is same thing. This part here again, you can do using jQuery. All right? So these two lines can be rewritten. This in here can stay as is because these are just function calls. So you need them. But I want you to change this to using jQuery. So let me just go and turn this off here and do it this way. So you're going to say dollar pound and then new, right? On. And it's a click event. And then the function, which is this part here. I'm going to copy this and put it right in here. Okay? So this one ends here and the rest stays as is. So we basically replace two lines with one simple line. Okay? Now one thing I wanted to show you also is that notice when you, like right here, I show here, it's fine. I'll maybe up here. When you, you know, the event listener here, this part here, I'm turning this back on. And right, you can do it in a couple of ways or two ways rather. One is you add event listener function or alternatively you can do something like btnsave.onclick, right? And it equal to this function right here. Okay? This is the same, that's the same thing as same effect as this line here. Okay? I'm using event listener here. I'm just, I go and use the on click right away. The advantage here is that this function allows you to change these type of events. Click on click mouse over mouse enter. You put into a variable and you change that. Here you're pretty much locked into a click event. So you're very specific here, right? And then you assign that with a call by function, which is the same one here, and you achieve the same result. All right? So this one here is not the same as this. To use this same here, you can do something like this in jQuery as well. So let me copy this and put it right here. And let me turn this off. Okay? So to use exactly like this one here, instead of on, you put here, you put the event right in here. And then you remove the click event part and then that's it. Okay? So now you're very specific to a click event. Here you're very specific to a click event. So if I turn this off, it should still work just fine. Okay? And just to make sure it does work, you can go here and save it. Go back to our local storage file. Okay? Make sure it's clear. No local storage. Reload that page and save it. As you can see, it worked just fine. All right? So that's one way to do as well. So either way, it's fine. I'll leave this as is for now. So down here is the same thing. I'll do one more and I'll let you do the rest. So this part here will be the same as this. Okay? It's no problem here. We did this already. Now let's do the update price here. Okay? So we do update price again. This part, we just, you know, reading data from an array. So that's just pure JavaScript. Now these two lines here can be overwritten, can be refactored to jQuery. So again, we're targeting the unit price plus the ID. So that is the point. So you say dollar sign, it's an ID. So pound sign, unit price, underscore, and then the ID. Okay? We did that already. Now I'm going to change the content using an HTML, right? So again, say HTML function, you pass in the price. That's it. So these two can go. And now we have updated this to using jQuery. So just to show that it does work, we update the unit price. It should work. Okay? So let's save that. Go to our page over here and reload. And so just make sure it does work. Change this price to 2050. And you can see that it works just fine. Okay? So that's how I want you to do with this assignment. You're going to refactor your code. Everywhere we do it, DOM manipulation. Any of these that get element of ID or HTML, you need to change that to using jQuery. Okay? So again, if you have any questions, please let me know. And thank you.