If I type in some giant number, it's going to give us the square result. Now if that is saved, you can see it starts out at 0, which is what we're looking for. I think I have a pretty good idea of what to do. Now that we have access to this, we kind of know what to do. If I just type 3 there, it returned 3, and then I tried to square 3, I would get 9 when really I want to get 123 squared. That is very helpful because if it was only returning the key we typed, that wouldn't give us a good idea of what we wanted to do. Here is a really helpful thing, it is also returning the entire value from our target element. Now if I type 1 you can see that it prints out 1. This is something else we have access to. Now let's go and instead of just getting the event target, let's get. Now, this is not very helpful, or I should say it's not helpful by itself. Now if I type 12 it gives us the entire tag. What's happening is it is going to find that event and then, for right now it just printing out the target for that event. As soon as we type our key, and we let up on it. You can see here in our math section: if I say 1, you can see that we've got the target. Let's just see if all of this is working. So here we have square and it's listening for a keyup event. For right now, let's just print out this target. If you are familiar on your browser JavaScript, then you should know that whenever you're working with some kind of event listener that event has a target tied to the event object, and the target has data as well. Let's first just see what kind of data we have access to. Whenever I use just evt, I think it's really clear that this is just an arbitrary name that I'm picking out, but it's still pretty descriptive.Īll that being said, our square method here. They would think that event was a reserved word and that it was something that they always had to type. I've had students when I used to actually spell the whole thing out. Also, it kind of shows that the word I'm using, or the argument name I'm using, is not a reserved word. One of the reasons why I like using that is because it's more descriptive than just using the letter e. We could say e, we could have said event. Now this event is not a special kind of keyword. So here inside of square, I can say square(evt). We were accessing data up top here, but we do have the ability to listen for events and then grab data from them. We could have done that with anything that we used a click listener for, but we didn't really need to because those were just buttons. Now technically, we could have done this with showImgDetails and altShowImgOptions. What we can do is we can pass in an event here, directly into the square method as an argument. This event is something that is automatically passed in whenever the method is called. You may think that square is just going to be a standard method, and it doesn't have access to any data that is not listed in our set of data items however, whenever you're working with an event listener, you actually have the ability to listen for an event. You may think because we are not passing in any kind of arguments here. In our method list, let's first remember to add a comma here, and then we're going to create a method called square. Something that we need to go build, and it's going to do that every single time we've typed something into the keyboard. What this is going to do is this is going to call the square function.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |