Creating User Interaction with Mouse Events
Our last task in this javascript tutorial will be to add user interaction. Yes even the pros make mistakes although most others will edit them out we like keeping our mistakes inside as there a great learning experience(even if they make us sometimes embarrassed like this one!). In this tasks we will learn a lot of things from how to debug applications all the way through how to work with mouse events. In the end of our course we will have a fully interactive canvas project.
Video Transcript
00:00So to play around with this idea of events and we're not going to practice every single event
00:05But it's definitely critical to know about
00:07Events in general what we want to do is we want to add a click event
00:11And really our goal is going to be whenever the user clicks on to our canvas element
00:15The animations will stop and whenever the user clicks again the animations will begin again, so let's see how we could do this
00:21It's actually really easy. I want to add after our set interval a new function and
00:27Basically the way I do it. I'm going to take my canvas element
00:30Which I found and I could add this event to any really any element on the stage
00:34And I'm going to go to my canvas. I'm going to set a new attribute
00:39And this new attribute is going to be on click which is basically an event
00:43That's a built into every element which we could add an on click to it directly
00:49Just as much as if you look into our colors function on
00:52our body itself in
00:55In past versions we added an on load, and then we called in it
01:01We've done that in a couple of examples and this time around what we're doing which we could have done that and this time
01:07Around what we were doing is we went directly to our window and we added on load to it
01:12And then said what function we wanted to call in this state
01:15What we're doing is we're going to our canvas element and saying to that
01:18We want to listen we want to add a function that will be called each time on click happens
01:23What do we want to happen like we could put here some JavaScript code or any script inside of here?
01:28We could put a directly a function or we could put some JavaScript script inside, but for that what I'm going to do
01:34Is I'm going to put here a toggle?
01:36animation function or let's call it target toggle canvas
01:43So our toggle canvas that right now is not doing anything
01:46We'll create that function immediately and our toggle canvas right now can't do anything
01:51So let's start with a little alert alert. Hello, and
01:55If we go into our live training page, and we click on it. We should be getting
02:01Absolutely nothing and the reason is is very simple our on click as we were saying is basically we're adding properties
02:12Directly into the HTML itself and that got me that got me confused so just as much as an on load
02:18We could have added an event
02:20We could put up here an alert and call whatever we want to call so we're going to go alert. Hello
02:25Hello on load
02:28Now we need to treat it as a real strings
02:32We're going to we're going to quote eight this because you know it's a little bit harder to notice these stuff
02:36But it's a string, but inside of the string we want to put live JavaScript
02:40We want to make sure that we don't have any errors and if we refresh this again
02:44We're going to see that we're going to get that hello on load
02:46Now the reason why it's not working for us and why our canvas broke completely is because this find itself
02:52We're sending inside a function instead of a string now if we want it to activate it all we would have to do is
02:58Just call it as a string and inside of that string
03:01Activate that function basically call the function not only name it
03:05But also trigger it because basically whatever is inside here will only be executed whenever a click happens on a click itself
03:13So if we run this one more time after our hello on load, we'll see that we still have a JavaScript error
03:19So we might want to look deeper into this and it's a really good opportunity for us to learn a couple of more stuff
03:26So one is like a lot of a lot of tools
03:29Have an editor so in our case you would go into develop and then search for your debugging
03:36JavaScript but every browser has a different debugger now that we have our debugger open
03:42We could now test again and see what actually happens when we're actually clicking on something
03:47So you can see that we have our console errors here, and if I just up let me get that back up on screen
03:54So I put this here on the side here, so it'll be easier to find
03:58so I'm going to just refresh this as it's actually really open and you'll see that it's still open no errors yet and
04:05That is a good sign for us that we're we didn't create an error so we might be thinking okay
04:10So how do we solve this if we don't have any error?
04:14Which is the question I'm asking myself as well, so let me just comment this out
04:18I'm going to save it. I'm going to comment out. It's our on load here because we don't need it anymore
04:23I'm just trying to troubleshoot and try to figure out why it's not working and to be honest at this second right now
04:29I have no idea why it's not working, but we're going to discover it together
04:33Which is a great opportunity for us as these have happened a lot while you're developing
04:38So our set attribute on click toggle canvas is not working
04:42But what would happen if we would just put here an alert?
04:45Hello, would it alert? Hello work. Let's give it a try and here. We go alert. Hello does work
04:53So we're getting a little bit warmer, but we're definitely not there yet, so let's give it again a try
04:59We're going to put our function inside your toggle canvas going to run it one more time and see if we're going to get that
05:04Hello that we were hoping for and we do and I am extremely confused. I don't really know why didn't work
05:11Maybe we had some sort of a spelling error
05:13So you know what I have to figure this one out
05:15So I'm going to take a step back step back to try to isolate and figure out why wasn't it working
05:20So I'm going to keep this here Canada toggle canvas
05:24Looks good to me if I refresh it it works, so
05:29My bad, I don't know why it wasn't working so we were troubleshooting saying though actually was working
05:33Which is kind of funny, but then again it's good practice
05:36So again what you got out of here is basically is that when you set an attribute and you say on a click?
05:40And there's a lot of different types of events that I encourage you to look into
05:44You'll be able to trigger then different events now with the last thing that we have left is to actually really toggle our visibility
05:51So to do that I'm going to save the reference of our set interval because I really want to be able to
05:57Clear it or unclear it so to do that. I'm going to create a new variable, and this is going to be interval
06:03So I'm going to call it
06:05interval
06:07canvas
06:08So we're going to take our interval canvas and we're going to set that as the value that comes back from set interval
06:14Which is basically a number it's an ID and identifier that lets us recognize that interval
06:21Now all we have left to do here is basically to have a simple if statement where we could ask if there is a number
06:29Now if there is a number what do we want to do we want to clear that interval?
06:34Not only do we want to clear that interval and send in the actual variable that has that value
06:40We also want to reset the value to zero and the reason why we want to do that so that our if statement will come
06:46Back falls next time the button is clicked now the next step after that is actually to retrigger it again
06:53And to retrigger it again
06:54We'll call again lines 26 and 27 and I'm going to ask you a question and then answer it immediately
07:00Why do I need why am I calling draw canvas and then also creating an interval?
07:06The answer is really simple because the first time our interval will be called will be only in 200 milliseconds
07:12And we want as soon as the user clicks on his on on the element for it to start animating
07:18We don't want to have a delay of 200 milliseconds
07:21So there we go we created our application and if we go back in here and refresh if we click once we should be
07:27Stopping our canvas, and we just did and if we click again
07:31We're going to be back at animating and again
07:33We could stop it at any point and we could animate it at any point