[Learn Code]Javascript Events Tutorial – How Web Developers Respond to User Input [w/ subs]



00:00:02 – [Music]
00:00:12 – so what an event is is that's anything
00:00:15 – that the user does to interact with a
00:00:17 – web page so if I were to click here
00:00:19 – that's a click event if i were to mouse
00:00:21 – over here that's a mouse enter and a
00:00:24 – mouse leave event when i leave so we can
00:00:26 – listen to these events it's called
00:00:28 – listening to these events and we can
00:00:30 – react and interact with the user so
00:00:33 – let's kind of get into what these events
00:00:34 – are i'm going to show you i basically
00:00:36 – have this add numbers here that's
00:00:38 – basically a paragraph with an input
00:00:40 – called num1 and an input with the idea
00:00:43 – of Numb ID of num2 and then we have a
00:00:45 – paragraph with the idea of add some so
00:00:47 – it's probably clear what we're going to
00:00:49 – be building here is whenever they change
00:00:51 – add one and add two we want to create
00:00:54 – the sum yay sounds easy enough so let's
00:00:57 – go ahead and build this out if you
00:00:58 – remember from our prior lesson we do
00:01:01 – selectors to actually grab an element so
00:01:03 – let's actually get num one here num 1
00:01:08 – equals document dot get element by ID
00:01:13 – and this is numb dash 1 there you go and
00:01:18 – let's get numb to as well what num to
00:01:24 – there we go now let's go ahead get some
00:01:27 – while we're at it add some is add some
00:01:34 – believe that's add dash some let's make
00:01:36 – check yep add some okay so we've gotten
00:01:40 – our elements here and to add a listener
00:01:42 – it's very simple you just take your
00:01:44 – elements and do add event listener and
00:01:46 – then your first argument is the name of
00:01:51 – the event so let's do a click event and
00:01:53 – then this function will fire or execute
00:01:57 – every time that event takes place so
00:01:59 – let's just console.log hi there we go I
00:02:04 – have live reload going so this just
00:02:06 – refreshed so now when I click a console
00:02:08 – logs hi there you go you can see it
00:02:10 – going let's go let's actually make it
00:02:12 – alert hi here hi
00:02:18 – hi okay let's do some other events here
00:02:20 – let's do a mouse enter so now whenever I
00:02:24 – enter it oh hi hi okay how about a mouse
00:02:29 – leave so I'm in and I left and then I
00:02:35 – get the height some other events our
00:02:37 – focus and that's going to be whenever I
00:02:39 – whip focus on it there we go that's a
00:02:42 – focus event and now I can't get away and
00:02:46 – then a blur events but not blue blur
00:02:51 – event is going to be whenever I leave
00:02:52 – that elements let's see if I can get out
00:02:55 – of here okay some of those events are
00:02:57 – actually tricky to get out of when
00:02:58 – you're doing alerts so there's a focus
00:03:00 – and let's blur blur hi there we go so
00:03:03 – here's kind of a list of events see I
00:03:05 – got click Mouse enter Mouse leave mouse
00:03:06 – down is when your mouse clicks down
00:03:08 – mouse up is when you let it back up a
00:03:10 – click is when the browser actually
00:03:12 – registers that you clicked because you
00:03:14 – know if you hold it down real long and
00:03:16 – then you let go that's not going to
00:03:18 – register as a click so click is only
00:03:20 – when it's fast enough to be a click
00:03:22 – mouse up mouse move is when you're
00:03:25 – actually moving over it it will actually
00:03:27 – send your coordinate to your mouse back
00:03:29 – keydown keyup those are actually your
00:03:32 – keyboard events blur in focus we already
00:03:35 – covered them here's your full list of
00:03:36 – events which all include in the
00:03:37 – description as you can see there are a
00:03:39 – lot of them the ones you'll probably
00:03:41 – want to focus on are the mouse events
00:03:43 – some of these are called Mouse events
00:03:44 – and then some of them are called
00:03:46 – keyboard events and those are the ones
00:03:49 – you tend to use the most where those go
00:03:50 – there you go keyboard events these are
00:03:52 – the ones you're going to use the most
00:03:53 – i'll put that in the description again
00:03:55 – now let's actually get into building
00:03:57 – this little addition program so what we
00:03:59 – want to do is we actually want to just
00:04:01 – add an input events which is whenever
00:04:04 – anything changes in the value of our
00:04:07 – input this will work all the way back to
00:04:08 – I think Internet Explorer 9 so on the
00:04:11 – input events we want to do some addition
00:04:15 – now it's generally not the best practice
00:04:18 – here to create a function it's usually a
00:04:20 – better practice to insert a function
00:04:22 – that's been created here like add and
00:04:25 – then this is just going to do ads so
00:04:27 – whenever the input event fires we're
00:04:28 – going to run the add function which is
00:04:30 – created right there
00:04:31 – that's good for several reasons which I
00:04:34 – can get into more later on one of the
00:04:36 – reasons is now I can fire that whenever
00:04:39 – either of these run so whenever the
00:04:43 – number one has an input event I can run
00:04:45 – ad and when num2 has an input event I
00:04:48 – can run at so that's one reason alone
00:04:50 – that it's great to pull it out so that
00:04:52 – way you can share this function between
00:04:54 – multiple elements that's kind of a good
00:04:57 – practice so we're going to do here is
00:04:59 – we're going to actually get our two
00:05:00 – values ver 1 equals num 1 dot value
00:05:05 – that's going to be the actual value 2
00:05:09 – equals num 2 dot value let's console.log
00:05:13 – both of these 12 a b c d e f so there we
00:05:19 – go we have our two values excellent and
00:05:23 – then let's actually add some we want to
00:05:25 – change the Entertainer HTML add some
00:05:27 – inner HTML equals one actually we'll
00:05:33 – just see ya one plus two so let's go
00:05:36 – check it out we got 12 and we have 24
00:05:40 – and we got 12 24 because anything that
00:05:43 – comes in from an input is a string type
00:05:46 – it's not a number type so how you
00:05:48 – convert that from a string type to a
00:05:50 – numbers just go parse floats so that's
00:05:54 – going to parse it into a floating number
00:05:57 – floating integer floating number I
00:06:00 – forget exactly that's supposed to be
00:06:02 – called so let's do 12 and 35 okay 34
00:06:06 – okay so that works but if you notice
00:06:07 – when this is empty it says nod which
00:06:10 – means not a number that's because we
00:06:13 – just tried to parse undefined as a
00:06:15 – number so we can do here is we can do an
00:06:19 – or 0 these little double bars mean or
00:06:23 – which means if this value is basically
00:06:26 – no undefined non which is not a number
00:06:31 – then it's going to say okay that doesn't
00:06:34 – exist let's use the or value instead so
00:06:37 – I could say null or zero and I could do
00:06:41 – null or zero and basically one would
00:06:44 – equate
00:06:44 – 0 & 2 it equate to 0 so really how this
00:06:49 – pans out to be is if this doesn't create
00:06:52 – a number we're going to use zero instead
00:06:54 – this doesn't create a number we're going
00:06:56 – to use zero instead so there we go let's
00:06:58 – try this now 34 excellent it did 34 plus
00:07:01 – 0 and then plus one for 35 all right
00:07:03 – there you go we did our little number
00:07:05 – addition and let's do a little maybe
00:07:07 – you're some is and of course this will
00:07:13 – actually do something tricky as well 34
00:07:18 – plus 24 why did that do that well
00:07:20 – because as soon as we start adding a
00:07:22 – string two numbers then it can't do that
00:07:26 – so it adds a number plus a number so
00:07:28 – kind of the way you get around this is
00:07:30 – go sum equals one plus two ah two
00:07:33 – numbers together I can do that
00:07:35 – javascript says and now we can add some
00:07:38 – in there so that'll work 34 plus to
00:07:42 – excellent in another way that you could
00:07:46 – do that is you could just go parenthesis
00:07:50 – like that one plus two and so that will
00:07:54 – do whatever's inside of the parenthesis
00:07:55 – first so that's a number plus a number
00:07:58 – that'll work and then it will add that
00:08:00 – number plus the string in which case it
00:08:02 – will turn them all into one big string
00:08:04 – so I'll just leave like that it's a
00:08:05 – little bit cleaner if you ask me
00:08:07 – excellent so there's our addition our
00:08:09 – addition is working thanks to click
00:08:11 – events so let's go ahead and do maybe
00:08:14 – one more example here I'm going to turn
00:08:16 – off this HTML and turn on this HTML so
00:08:23 – what I have here is I have a list of
00:08:25 – allies and I have a list of images now
00:08:28 – the images have a class of hide which
00:08:29 – means they're hidden up here my class
00:08:32 – hide in the CSS is displaying none so I
00:08:35 – basically want to be able to click on
00:08:37 – this a tag and then I want that to show
00:08:41 – an image actually show it and hide it
00:08:44 – let me go and say this you kind of see
00:08:46 – what we have here so you have Simon
00:08:47 – Cowell Bruce Willis and ben Carson three
00:08:50 – great guys of course and then up
00:08:52 – basically I want to click on one of
00:08:54 – those and so I've added an href of pound
00:08:58 – pound will just by default just reload
00:09:00 – your same page doesn't really matter
00:09:02 – what we put in href because we're going
00:09:04 – to be returning false which means we're
00:09:06 – going to cancel this out it's never
00:09:07 – going to go anywhere so if that was
00:09:10 – google com it's not going to go to
00:09:11 – google com we're actually going to
00:09:13 – cancel that out but it's good to put
00:09:14 – something in there so by default if you
00:09:16 – have a link that you're going to be
00:09:17 – cancelling with JavaScript just put
00:09:20 – pound in there so we have ID of Simon
00:09:22 – idea Bruce idea of Ben and then our
00:09:26 – images we want a toggle or Simon pick
00:09:28 – Bruce pick and Bend pick ok let's go and
00:09:31 – build this out let's get rid of this
00:09:32 – JavaScript I will put that in the
00:09:36 – description on maybe code pen or
00:09:38 – something for you for a little bit later
00:09:39 – but for now we'll get rid of that let's
00:09:41 – go and grab that Simon elements better
00:09:43 – Simon equals document dot get element by
00:09:48 – ID and then this is just Simon there we
00:09:54 – go and let's get Simon pick the Simon
00:10:03 – dash pic I believe yet there we go so
00:10:06 – when Simon is going to get an event
00:10:09 – listener click function so whenever
00:10:17 – Simon gets clicked we're going to run
00:10:18 – this function if Simon pick class name
00:10:25 – so if it has the hide class then we're
00:10:31 – going to remove it class name equals
00:10:39 – there we go so basically if it has a
00:10:41 – class named Hyde we're gonna remove it
00:10:43 – let's go and click hey there is and then
00:10:46 – else we're going to put it back on so
00:10:54 – you're go now it's going to toggle there
00:10:56 – is area is it ok excellent so now let's
00:10:59 – do the same thing for Bruce Wilson ben
00:11:00 – Carson and then we'll make this app a
00:11:01 – little bit cleaner so let's get
00:11:03 – everything that says Simon and change it
00:11:05 – to Bruce I'm using sublime text multiple
00:11:08 – cursors here sublime text and a lot of
00:11:10 – text debtors have this control
00:11:12 – or Apple d or command D I guess that's
00:11:15 – going to automatically select all the
00:11:17 – same stuff so I can change it which is
00:11:18 – awesome what and we got ben Carson so
00:11:21 – Simon did that let's do Bruce let's find
00:11:24 – everything in here that's called Simon
00:11:26 – Bruce it just makes it so much faster to
00:11:30 – do this stuff and then been here we go
00:11:36 – we should have all three Simon Bruce
00:11:38 – then let's see what happens if i click a
00:11:41 – couple of them and now they're both
00:11:42 – showing that's something we can deal
00:11:44 – with a little later okay so all three of
00:11:47 – them are in here but I don't like this
00:11:49 – for a lot of reasons one this is a lot
00:11:51 – of almost identical code there's this
00:11:54 – thing that coders talk about all the cop
00:11:56 – all the thing all the time call dry dry
00:12:00 – code don't repeat yourself i almost said
00:12:03 – do not don't repeat yourself d ry dry
00:12:07 – code this is not dry code because
00:12:09 – there's all this repeating this is
00:12:12 – basically exactly the same thing as this
00:12:14 – which is basically the exact same thing
00:12:16 – as this that's a really bad idea so we
00:12:18 – actually want to find a way that we can
00:12:21 – share all this so let's go ahead and
00:12:23 – create a new function here I'm just
00:12:25 – going to go ahead and mute you guys out
00:12:27 – and let's actually do a new function
00:12:32 – step add event listener I'm just going
00:12:35 – to actually copy you let's get it one
00:12:40 – function that everybody can share that
00:12:43 – everybody can use will call it pic link
00:12:44 – there you go so now Simon can listen to
00:12:48 – that and Bruce can listen to that and
00:12:52 – Ben can listen to this excellent so now
00:12:55 – pic link can kind of do all of this at
00:12:57 – once I'm going to go ahead and scroll
00:13:02 – down eyes area get you guys some space
00:13:04 – up there pic link and then what we're
00:13:08 – going to do here is we're actually going
00:13:09 – to get it one thing that's interesting
00:13:12 – about an event listener let me go ahead
00:13:14 – and just console.log this for you
00:13:15 – basically when we start sharing stuff we
00:13:19 – don't know who got clicked on so we
00:13:22 – don't know if we clicked on Simon Bruce
00:13:24 – or been
00:13:25 – when we fire this function so we have to
00:13:27 – look that up based off of this this will
00:13:29 – be the element that got clicked so this
00:13:32 – will be Simon if you clicked on Simon
00:13:34 – the value of this will be Bruce if you
00:13:37 – clicked on Bruce well here I'll just
00:13:38 – console.log it so you can see there we
00:13:41 – go so this is my a for Simon if i click
00:13:44 – on Bruce then I'm console logging this
00:13:45 – then that's going to be bruce willis
00:13:46 – base can be ben Carson so what I've done
00:13:50 – here is you'll notice I've added this
00:13:51 – data dash IMG attribute so you're free
00:13:55 – to use with HTML 4 or 5 data dash
00:13:59 – anything you want so I just called it
00:14:02 – IMG because this is going to be the ID
00:14:04 – of the image that I want to toggle when
00:14:07 – i click on Simon you'll notice that this
00:14:09 – has the idea of Simon pic and so
00:14:11 – basically when I click on this link I
00:14:13 – want to toggle Simon click so I add a
00:14:15 – data image of Simon click data image of
00:14:18 – Bruce pick sorry Simon pick data image
00:14:21 – of Ben pick so I'm actually going to
00:14:23 – s***** that out so here's kind of how
00:14:25 – that'll work i'll go vert pick instead
00:14:28 – of before i was automatically looking at
00:14:31 – Simon pick Bruce pic or been pic well
00:14:35 – now I don't know which pic it is so it's
00:14:36 – just going to be very picky equals
00:14:38 – document dot get element by ID and I
00:14:43 – actually want to s***** the attribute
00:14:46 – out there out of there so verra pic ID
00:14:48 – equals this dot attributes so this again
00:14:53 – is my a link that got clicked on and I
00:14:58 – want to look at my attributes list and
00:15:00 – on a grab data IMG so I can't go day to
00:15:05 – dash IMG that's bad syntax that's going
00:15:09 – to its data- IMG so there's another way
00:15:13 – that you can access attributes as I can
00:15:15 – do this and so that's going to be the
00:15:17 – data IMG so I can also do this
00:15:20 – attributes basically you can use it to
00:15:25 – access any value you want so I don't
00:15:28 – need to do that for attribute so I can
00:15:30 – do the cleaner version which is this way
00:15:31 – this data attributes dot data IMG is
00:15:35 – basically what I'm doing dot value so
00:15:38 – I'm going to get the value
00:15:39 – you out of the data IMG attribute and so
00:15:42 – pic ID let's go at console.log pic ID
00:15:44 – make sure I got this runner right there
00:15:49 – you go Simon pic is the idea i'm getting
00:15:50 – Bruce will pick and Bend pic awesome so
00:15:54 – now I just have to do pic ID so I'm
00:15:58 – getting my element this is the pic that
00:16:00 – i want to show and now i just have to
00:16:02 – kind of copy and paste this code here
00:16:04 – let's copy and paste this get rid of my
00:16:07 – comments and we toggle it over a little
00:16:09 – bit so now i'm just doing pic if picked
00:16:13 – out class name as high get rid of it
00:16:14 – excellent this should totally work let's
00:16:16 – see Simon's working Bruce is working ben
00:16:20 – is working so now what we did is it took
00:16:22 – a little bit of figuring out a little
00:16:24 – bit of reworking but look how much
00:16:25 – shorter my code is now so I've added
00:16:27 – three listeners I don't need you I don't
00:16:31 – need you and I don't need you excellent
00:16:35 – that's a very simple code and this is
00:16:38 – good for several reasons one I'm only
00:16:42 – creating one function so i'm using a
00:16:44 – little less memory than if i created
00:16:45 – three different functions and now any
00:16:48 – future functionality i want to add into
00:16:51 – my program it's all i have to do is
00:16:53 – change this one function and all three
00:16:55 – of them will get the results so remember
00:16:58 – that problem i had earlier where if i
00:16:59 – click on several i see em all well what
00:17:01 – i want to do is I actually want to hide
00:17:03 – every image I want actually hide every
00:17:08 – image that's an existence on the page
00:17:10 – first and then I want to show everything
00:17:12 – so I'm going to go document dot query
00:17:17 – selector all image there we go and then
00:17:25 – I would basically loop through that I
00:17:28 – could go very image all images and then
00:17:32 – I could loop through all images and I
00:17:34 – could tell each image to have a class of
00:17:35 – hide and then I could run through the
00:17:38 – rest of the code and show the one that I
00:17:40 – want to show I might as well do it for
00:17:42 – you right since I just told you about it
00:17:44 – let's do a for loop Vera equals zero
00:17:47 – remember that for loop and how annoying
00:17:49 – they are you just got to keep doing it
00:17:51 – to you remember how to do it i is less
00:17:53 – than
00:17:53 – all images dot length i plus plus man it
00:17:58 – takes a while to remember that for loop
00:18:00 – basically I'm just going to go through I
00:18:02 – as many times as it takes all images I
00:18:05 – so I want to get the image that I'm
00:18:07 – looking for let's c dot class name
00:18:11 – equals hide so I'm going to add hide
00:18:15 – class name to every image on the page
00:18:18 – and then I'm going to go through with
00:18:20 – the rest of my program let's see if this
00:18:21 – works it works excellent excellent that
00:18:27 – is exactly what I wanted it to do if I
00:18:29 – only showing 1 yep i'm only showing 1
00:18:31 – awesome there you go that's javascript
00:18:34 – event listeners mixed in with some for
00:18:37 – loops and some selectors that's kind of
00:18:39 – tying some stuff together for you if it
00:18:41 – got a little complicated
00:18:43 – [Music]


Video Url:
http://youtu.be/mSarRmlM5Cs

Comments

comments