3.9 Your Questions Answered

[NOISE] In the previous lesson I made note that in day 16 that would be your opportunity to ask any questions that you might have about the course this far. And this where we can make sure that we get everybody on the same track so if you were confused about a specific part from a lesson, now is the time to ask. Now admittedly I should have given you a little bit more notice. So for day 30 we're going to do the same thing for the end of the course. But now you have two weeks to get those in. And there will be a forum thread, or again, you can ask your question, if you're not a Tuts Plus premium member, by hashing jQueryQA. And then I will answer all of those questions on day 30 of this course. So let's get started knocking these out. I am in the forum thread. And we can see right here from Ross, just finished watching the slides and structure video, and am a slight bit confused about the use of this. Okay, well slides and structure was from lesson nine. So he needs some information more on using this. And don't worry, it, it's definitely very confusing. The this keyword is something that you have trouble understanding until it suddenly clicks, and then you never have to worry about it again. I'm gonna open up the sample code from that project, and he's having trouble determining in each instance what this refers to. So let's take this one step at a time. I'm gonna comment this out. And once again, we will grab the a, and when any of them are clicked, we execute a function. Now the way that jQuery works is when it triggers your callback function, it's going to use the apply method that we learned about so that it can explicitly state what this should refer to. So within here, this is going to refer to the anchor that was clicked, and that's the easiest way to think of it with jQuery. Within a callback method, whether you used a named method or you pass an anonymous function, this will always refer to whatever triggered the event. So if it makes it easier for you, you could store that within a variable. You could say var anchor equals either this or, if you wanna have access to jQuery's methods, you would wrap this within the jQuery object. Like so. So, now, if we console.log anchor, and then we ensure that we run preventDefault so that we make sure that the default action of the anchor tag, which is to link, in this case, to tutsplus.com, that will not occur. So we want to intercept that and prevent the default action. Let's try it. I will click on it. And this is then logged to the console. And we can see that this does refer to the anchor tag wrapped within the jQuery object. Now what's important to understand, though, is this refers to the anchor specifically, because jQuery sets it up that way, that uses the apply method, and we wondered about this. The call and apply allows us to trigger a function and then specify what this, within that function, what this will refer to, and that can give you a lot of control. Now if Ross's question also refered to jQuery.proxy, this is simply a helper method that allows us to do, essentially, the same thing. We will trigger a specific method, so in this case we had the obj object. And we are triggering the doIt method, but we know that within the doIt method we want this to refer to the object. But by default, the way jQuery will call that method is it's going to set this equal, as before, to the anchor tag that was clicked. So if you want to override that and specify that the obj object should be equal to this, this is one way that we can do it. jquery.proxy. First parameter is you specify the method that you're calling. The second parameter is equal to the object that will serve as this. So hopefully that helps a bit. Let's move on to the next question. Hey Jeff, I would like to understand more about the call method. Well I just explained that. You can trigger a method so you can say myfunction.call. And then as the first parameter, you specify what this will be. That will be some object of sorts. And then the second parameters can be a list of variables that you want to pass to that function. Now alternatively, you can use the apply method and the only difference between the two, they do the exact same thing. The only difference is how you pass the variables to the function that you're triggering. With call you use a comma separated list, and with apply you use an array. So the first parameter is what is this. The second parameter is an array of values that you want to pass to that function. Let's scroll down. I'm not sure if that's a question. For this one from coco moco, I would like to know more about preventDefault in particular, only having it run for particular items. So let's take a look. Within script tags, once again, get all anchor elements, and when they are clicked, execute a callback function. So what he's saying is that he only wants e.preventDefault to run on the condition that maybe a class is available. Now we can access the class attribute in a couple of different ways. Let's go ahead and create an anchor tag. We'll give it a class of myClass, a value of click me, like so. So now when the user clicks on one of these anchors, the callback function will fire. Now we can access the class attribute with vanilla JavaScript by doing this.className. So let's try that out, I'm going to, for the time being, prevent the default action, so that we don't link to tutsplus. I'll reload the page, click on it and we do get that class attribute. Now here's the thing, you can have multiple classes. So, if we say another class. We try it again. Click on it. Class name is going to return just that string, the contents of the attribute, and that will be a space-separated list of the classes. So, with jQuery though, we can do it a little bit differently. We wrap this within jQuery, and instead, we use the attr method to grab the class attribute. Now if I try it again, we get the exact same thing. But we're using jQuery to accomplish this. Now we can also say things like this.hasClass, and this will return a Boolean. And this is how we can say, if the anchor tag has a class of myClass, and we get true. But if we try something else, we get false. So you can use the hasClass method to perform any specific action. So in this case, for whatever reason, I'm not exactly sure when this would be useful to him, but you could say if this wrapped in the jQuery object, has class, only on that condition should we e.preventDefault. So if we try this out, we know that it does have a class of another class. We click on it. E.preventDefault takes effect. But if we remove this class and try it, it should link directly to Tuts Plus. And it does. All right. So that answers that question. We also have some questions on Twitter. Now these are not related. They're just asking a question about accessing a lesson. But here we have two at the top. In day 15 why is pos returned in the function setCurrent? Why not return this.current or nothing at all? So I've opened up the source files for day 15 and what he's asking is right here. And he's saying why are you returning pos? Why don't you just return this.current? And the answer is you absolutely could. You could return pos if you simply want to return whether it went up or down, if, for some reason, you need to track that. And then when you call it at the bottom, you could say var pos and then if you need to do something with that action based upon whether we're going up or down. But yes, absolutely. If you want to return this.current to get the exact value, you could absolutely do that. And now the second part of this question was why return anything at all? And it is true. You could simply keep it like this and not return anything. Because we, in our case, we didn't need to store that within a variable. But it's possible that at some point in your project that you do need to access that current calculated spot to be used somewhere else in your code. So with that in mind, it's simply a precaution or even a convenience to return this.current if you want the calculated value, or if you simply want one or negative one to return pos. Let's go back to Twitter and now the last question comes from Andre. And he asks, in lesson 15, why didn't you place click handlers inside the slider prototype? The object will look more solid in this case. And so here's what he's referring to. If we come to index.html of day 15, we can see that he's asking about this. Why didn't we take the button click handler and place that within the constructor function? And we absolutely could. The only reason I didn't was because I wanted to keep this file DOM free, especially when you're learning about prototypal inheritance. I didn't want there to be a lot of jQuery access mixed in. That gets a little complicated, but we absolutely could. An easy way that you can do that is create an object that stores all of your event handlers. So for example we could say Slider.prototype, and I'm gonna create some new lines so we can jump up. And we'll create a new object. So, Slider.prototype.events is going to be equal to an object that contains all of our event handlers. So, for example click, because we know that a slider will always need to respond to when the button is clicked, we will have a click handler. And now you could also have one maybe if you hover over a specific area, or if you click on the image itself. This is where you can store all of that and then, when you need to access something related to the events for your project, you don't have to hunt a huge file. You simply refer to your events object. Now, in this case, what we could do is we could come back and let's just copy all of that and paste it at the bottom just for our reference. And I'll comment those out. So now what we can say is we want to refer to the slider instance. However, now that we have this new object, the this no longer refers to the instance. It refers to the events object that we just created. But that's okay because we can take advantage of the call method to override that. We can trigger this within our constructor by saying this.events.click, but now we're not gonna simply call the function, because if we did, within here, this refers to the events object. It no longer refers to the instance. So instead we're going to say this.events.click.call and we're going to use this which is the instance, as this within this function. It's a lot of thises but hopefully that starts to make sense. Go and rewind and watch that a few times if you need to. So now at this point we can say this.nav.find button, and when they're clicked, execute a function, and then at that point we simply can copy these two lines, and we just need to do a couple things here. First, we're in that same situation again, and this is going to confuse you a lot when learning jQuery. Now, we know right here this does refer to the slider instance. But then we attach our click handler and within this function, once again this doesn't refer to the instance anymore, this within here is going to refer to the button that was clicked. So what we wanna do is cache the location of that instance like this, var self equals this. Now we can say self.nav, find the buttons, when they're clicked, we'll create a variable called current, and we're gonna make that equal to self.setCurrent. We call this method. And we pass in this within here refers to the button that was clicked. That's all good. Then we run self.transition. So, let's remove that. Go back to index.html. We can get rid of this entirely. And let's try it out. Reload the page. I'll click on next, three, four, one, and we can go back and forth. Now what we have done is created an event object that will contain everything that we're working with. If you only ever have a click event, this is likely overkill. But as soon as you expand your projects and you have more event handlers, this, something like this can be very helpful to you. And then at this point because we're not using the slider variable, we can keep it like so, and now we've updated our project. Now what I want to make note of here is pay attention that because we used prototypal inheritance, how easy it was to expand it. We needed to add a new feature. We needed to add an events object that we can house. And it was that much easier rather than having to deal with all of these nested callback functions. This is a much cleaner solution. All right, and that's gonna do it for the questions in this lesson. I'm going to create a forum thread for day 30. So from now until the last lesson, if you have any questions at all, you can visit that forum thread, ask your question, and on day 30 I will answer them. Alternatively, if you're not a tutsplus premium member, ask a question and hash jqueryQA and I'll be keeping track of all of those. All right guys, I'll see you in day 17.