Learn JavaScript #10 | Event Handling

Terribly sorry, guys. I just noticed that when I switched to using this IDE I did not change the font size so that it was really big, which I prefer to do it this way because I have a 1080 screen and you guys might be watching on you know a laptop or something which would have a smaller screen. So, I've made it bigger. I went back and checked and there shouldn't be a problem, but this will be more comfortable for sure. Now what we're going to get to in this video is what JavaScript's how we can interact with web page itself. So in one of the first videos I was talking about what each component of web design is and how HTML is you know the actual content that's on the page, CSS is how that content looks, and then JavaScript defines how you can use that content or how a user could interact with the web page. How you can modify it, basically. So, we're going to be getting into that today. What we're going to do is create a button and when you click it it's going to do something. So, there's two ways to do it but for right now let's just go ahead in our HTML and create a button element with an ID of go-button, and the text on the button is just going to be go. Save and refresh, and there's the button right there. Now underneath the button I'm going to skip a few lines just with a regular HTML line break, and I'm going to type in Click that button. Save it, refresh, now when I click that button something should happen. So, this is the user interaction we're talking about. When I click the button that's the event or the user interaction, so we can also call it event handling. So, when I click it it's the event, and then we need to be able to handle the event so we need to have an event handler, and that's where we jump over to JavaScript. So, I'm going to create a function here called buttonClicked, and now is a good time to mention this because you guys probably saw it and just to make sure that we're clear on this you can't use hyphens in function names or variables in JavaScript. When we started doing CSS I said that this is the naming convention in CSS and in HTML to separate words with hyphens. It's not the case in JavaScript. If I do that in JavaScript it's going to freak out and it's not going to know what to do, as you can see here. So, in JavaScript you see a lot of camel case, and camel case is when the first word is all lowercase but then after that the first letter of each word is a capital. So that's what we're going to be doing in in JavaScript just so you guys are aware. And in this case to make this as simple as possible, I'm just going to print out "Button clicked" Every time that go button is clicked it's going to print out button clicked. So I'm going to refresh this page and hit that button and nothing's happening, and that's because we haven't yet actually tied those two together. So, we we have the event handler, this is what we're going to do, and by clicking this this is what's going to trigger the event but we don't have the actual event. So, there's two ways to do it. I'm going to show you guys the wrong way first, or probably the way things were done in the 90s that I'm sure some people are still doing, there's probably legitimate reasons. I know when using react, or some framework like that, this gets used quite a bit, but for you know unless you're using something like that. For right now for what we're doing using an on-click property is not the correct way to go about this, in my opinion. My abstract opinion that is the truth. So, this is all one word, all lowercase, and we're going to set this property to the name of the function, so in this case it's button clicked. And when you create an event trigger like this and the actual event you do need to put the brackets at the end. So this is just like calling a function in JavaScript. So I'm going to hit save and we're going to refresh. Now what happens when I click that go button, this says button clicked, and each time I press it it's going to say it over and over again. So that's the wrong way. Let's go do it the right way. In my opinion, all JavaScript should be handled within JavaScript, that's all. Now the first thing we need to do is to get that button, to get that go button. So this is an HTML entity, or an element. We need to get that element and we are going to store it inside a variable. So I'm going to create a variable called button, btn, and it's going to be equal to the actual element. Now how you get an element by the ID in JavaScript is you need to access the document object, and put a dot, and then we're going to write getElementById. As you'll notice, this is all camelcase, and now this is the function of the document object. So we're calling a function here that's going to return a value. We didn't talk about returning values yet, but we're going to. Basically, whatever this evaluates to we can reference it by using this variable in the future. So, the ID of our button is go-button, so we're going to do that. So what we have here is a variable now that we can use called button, and it is whatever element is on this page with an ID of go button. So, for this instance, it is this button right here. Now, we're going to attach an event listener. So an event listener listens for certain actions and in this case it's going to be a click that we're listening for. Now we need to attach that to the button. So, the button is an object, so we can call certain methods on it. So type btn. addEventListener, and then we're going to pass in the first variable is the string, and this is going to be click. This is the event that we're listening for on the button, and then you're going to put a comma, and the second is the actual function that's going to be called each time if the event fires. So, in this case it's button clicked, but we're not going to add those two brackets there. You just type out the name of the function, not this as well, and we're going to get into how you can pass values to functions like that, not right now. We're going to save this and refresh, and then I'm going to hit go, and we see button is clicked. Did I remove that on... okay cool. So it is firing from right here, we're adding that event listener. Now what you can do, and I'm going to do it in the function so that it's only going to be callable once, you can remove the event listener. So, let's define button way up here, I'm going to say button remove event listener, and we're going to remove click. So, what should happen here is that..there. What should happen here is that when we click the button the first, we're going to set up the page, we're going to get the button, we're going to write our little function here, and then we're going to add the event listener. So, every time we click that button it's going to run this function, but it's only going to run it the first time because when it does it's then going to remove the event listener. So save it, refresh, this should only be able to fire once. As you can see, it does. So that's how you can use event listeners to work with functions, and you can tie HTML elements to certain bits of JavaScript that you want to run when those elements are interacted with. And there's a lot of other ways to do this, and this is a very specific way to do what we're doing, so we're going to be naturally discussing some as we go along, but I think this is gonna, this probably is just the first video that specified, it's specific about event handling.