Learn JavaScript Episode #10: Event Handling [w/ subs]

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

Video Url: