Javascript Events Tutorial Part 2 - Javascript Tutorials for Beginning Web Development

so I'm using JavaScript events to do this simple to-do list editor which we're going to build today I can change it to Apple or I can change it to watermelon there we go and so that's basically my to-do list editor and so that's what we're going to build in this so if you remember from the prior lesson you can actually do selectors let me kind of show you what this app is going to be let me show you the HTML and kind of what I'm envisioning here so basically I have a ul with three allies in it those are their three allies each Li has a span and an input so the span is what I see when I'm not in edit mode the input is going to be one I want to see when I'm in edit mode so kind of the way I'm going to do this is I'm going to add a class edit here and when class edit is on let me save this a live reload when class edit is on the span goes away the input gets shown so all I have to do to change edit mode is add that class remove that class okay very simple seems easy enough so how I did that with CSS is my li input by default is a display:none so this guy is always hidden by default and then when you have a class edit the span goes to display:none and then class edit the input gets display initial so now the input is shown when edit is on span goes away input gets hidden so three simple CSS rules and I have the functionality for that so now on JavaScript when I click on an Li I want to add the Edit class so now I'm at net edit mode I type in my input and when I blur my input whenever I leave or whenever I hit the enter key so that's be something I add to whenever I leave or hit the enter key then I want to update this with my value that I changed and then I want to remove my edit class so that's kind of my program let's go ahead and write it you'll actually see it's pretty simple so let's go and first get our check list our check list UL right here so that's ID check list so we're going to go check list equals documents gets element by ID there we go so I've got the checklist let's go and get all the items within the checklist now so one cool thing is I can actually search within my checklist for all my items so I can go instead of documents I don't want to search my entire document I just want to search within my checklist for all the items so checklist query selector all I can do query selector all because it's going to be very fast there's only a few items within my checklist to begin with and so I don't I'm not worried at all about speed or performance with using query selector also there I have all my items right now so this is going to be an array let me go a console.log it so this is going to be an array of three lis we've got that Li that Li in that Li so we want to loop through this array and then we want to add a listener to each item in the array so if you remember from a few lessons ago let's do a for loop here so there I equals zero I items dot length so we're going to start off at zero as long as I is less than items length we're going to keep increasing I so now I can go items and once again these for loops are weird you just got a coda MinnKota min code them and write them and write them and write them till you just finally get it and remember and have it memorized because it just it's not very natural this is one of the parts of programming that does feel like actual code because it's not English so it's okay if that seems annoying to you for a while at first so now for each item we're going to add an event listener and let's do a click events and then this right here if we do a function here that's not a very good idea because now it's going to every time we loop run through this loop for each item it's going to create a new function to do the same thing so we don't want to do that let's just go ahead and do edit item let's just actually make a function called edit item so we've only created one function that's living in memory down here and then it's going to run that function on any one of these items click events so this is better programming right here than adding a function in there you can do it it'll probably work just fine but this is better programming to your function out and then add your event listener to that function so basically whenever we click we want to edit this item so let's go at console.log I'm going to console.log this which might seem like a funny word but basically since any one of our items can trigger this function we need a way of knowing which item was clicked and that's the this this is whichever item had the event listener attached to it so if I were to click on this which is item 1 or item 0 then this will be item 0 let me just show you in practice here so I'm console logging this every time there's a click there we go so I clicked on apples and there you go this is the LI containing apples so if I were to click on this prior to click on the second li then the value of this is now the oranges Li if I were to click on the third Li the value of this would be the bananas Li so that's what this is it's the context that this function is running in so now I can actually edit which ever one got clicked so I could go if this stock class name does not equal edit actually you know I'm just going to say this class name equals edit I was going to I was going to have it be edit if it didn't equal my room it always needs to be edit no matter what so even if it was edit before we click on it now it's going to be edit so there we go now it's working sort of it never goes away but it's working step one complete when you click on it it goes into edit mode so now we want to do is let's do a little bit more I think let me go to refresh this I also want to focus on this input box which is really simple to do this stop focus actually I want to get the input inside of it so as you see I've clicked on this Li and so that is the value of this right here but I want to get the input and I want to focus on the input you know what I also want to select all the text inside of it so that's pretty simple really just go vert input equals this dot query selector all actually just query selector so I'm going to get the input inside of my Li and then I'm just going to go input dot focus so there we go let's refresh this when I click hey you know I have that nice little focus bar around my input box and then let's also get a selection range set selection range so we're going to start at zero and we're just going to go input value dot length so basically the whole length of whatever our current value is we're going to select from zero which is here all the way to the full length of our text because what the input dot value is is that's our current value of our input let me show you here I'm going to console.log my current value is and then input dot value so I'm going to when I click there you go my current value is Apple's my current value is oranges so that's what that input value is an input value dot length is how many letters I current have currently have on there so let me just change this to length so there we go six characters and apples right Appl es yep six oranges o RA and G es yep so seven characters in that and so that's what that length is so I'm going to create a selection from zero to the full length I know that's kind of confusing I am it's probably too much but whatever so there we have this nice little when you click on it it's it focuses on it you see my focus gets whichever one I clicked on and then it selects the full text range so that's pretty nice behavior so now I can change it let's change this to just apple and then I can leave my value is changed but I want to get out of edit mode so let's go ahead and add a blur event listener now but I don't actually want to add that blur event listener to the whole li I want to add the blur to the input so let's go ahead and get let me copy this let's get our inputs so I'm going to query selector all input so now this is the array of all the inputs inside of my checklist so that's that so as I'm looping through here I'm going to also add a listener to every input so now I'm going to go I'm going to loop through my checklist length 0 1 2 3 and then I'm going to add a listener for item 0 I'm going to listener for input 0 as well so this will be a blur on blur not blue on blur I'm going to do an update item function so now let's just console.log and say we blurred make sure we're working that far so I clicked there we go we blurred and let me actually console.log the value this.value apples let's say more apples we blurred more apples okay so that's how I'm going to get the value out and then very simply I just want to apply this value I've got my value on blur I want to apply it to the span I want to set the innerhtml of the span which is my previous element sibling which is the code for that so I'm just going to go this dot previous element sibling enter HTML if you remember that from when I did that earlier equals distal dis so there we go now when I blur I want to update that so apples I blurred of course we didn't really realize that we're able to do that because what I also have to do is I have to go to my parent node which is here and I have to remove that edit class for it to go back out of edit mode dot class name equals nothing so there we go our program should be working more apples got it I edited my span took it out adit mode and we're good to go so one more thing that let's do let's go ahead and add an event listener for a key press and let's go item key press so if I hit that Enter key I want to do the exact same behavior I want to update that item the same way so let's do our function key item key press so whatever the key press event is fired we're going to run item key press which is this guy and so one thing that this guy gets is he gets an event object every time it fires let's go and console.log that event objects so you can see it so I'm going to go ahead and keep press I'm going to hit an a key hey there we go that's a keyboard event you can see there's a whole bunch of information about what actually happened to that event and here's the important one for us it's the witch event dot which it is the 97 key which is the a key well great that doesn't help me out at all so you can see B is the 98 key let's actually console vault log event dot which you can kind of see what's going on here ABCDE 97 98 99 100 let's see what enter is enters 1313 so there's no way on earth you're going to memorize this I always have to Google JavaScript key codes I will give you this link as well in the description here's all your key codes enter is 13 enters key 13 so usually I do one of two things I either look up a key codes list or I do exactly what I did here I just console.log event which and I figure out which key I actually am looking for so in this case I'm looking for the Enter key I hit enter a few times okay that's 13 all right 13 is what I want to respond to so if I know that feels like true programming to actually look up a key by number if event which equals 13 then we're actually going to we want to run update item but we want to run it with this being the event that was clicked on the this here so we basically want to run update on it but we can't just run update item because then it won't know what this is we actually have to run update item with this being the thing that got the key press of 13 so we do that by simply saying call update item call this so now it's going to basically run update item and it's going to set this to be whatever I give it so I could give it window or I could give it hi so now this would equal the string hi which of course would break because hi has no parent node there's no such thing as hi dot previous element sibling so that's going to break but as long as I give it this now my item which got the key press which is my input is going to be the this value when update item runs I hope that makes sense it's kind of a trickier concept we're basically passing the value of this from my function on item key press to my function on update item it's called changing the context so let's see this works apple hit enter boom excellent let's change this to banana excellent and then Apple again enter excellent it works so there's the program I'm going to go ahead and put this up probably on code pen for you guys to play around with hope it helped you out if it's too confusing and it's over your head just play around with looking up a get element by ID and adding an event listener to it have some fun with that then maybe mess with looping through arrays of things kind of more these concepts that I'm doing here and then calling something bypassing context that's a little of a trickier thing as well so if that's over your head that's totally understandable have a great day and hope you enjoyed the lesson

Channel: LearnCode.academy

Views: 167,199

Keywords: JavaScript (Programming Language), Tutorial (Media Genre), web development, web developer, Website (Industry), js, js tutorials, js tutorial, javascript tutorial beginner, how to javascript, javascript for beginners, javascript on, javascript hack, event listener, addeventlistener, events, listener, vanilla, tutorial, lesson, help, code samples, samples, code, examples, example

Id: 0tEW8rB1bbU

Length: 15min 11sec (911 seconds)

Published: Tue Jun 23 2015