Chào mừng bạn đến với TUTUAPP

JavaScript and the DOM

back at it again with Adam rec lo last week he taught us about JavaScript objects and functions and event listeners and more if you missed the video last week you want to pause and go check a dekha that one out today Adam will be taking us through a practical project using everything that we learned last week to make a clock that changes color as time moves on it’s just what I always wanted so in the last video I showed you how we could refactor our code to make a little bit more functional in nature and we’re going to carry that forward as we build out our last project which is going to be a hex clock and hex clock is basically going to be a clock that tells gives us military time and based on that number we’re going to change the background because each number we can make into a hexadecimal color by just putting a hash in front of it so to kind of start out this project we’re going to first get the time of day so this will be the first part of this lesson and create a function we use the keyword function and I’m just going to give it the name time and then parentheses and curly braces we’re not gonna be passing in any arguments so there’s nothing to put in between the parentheses and to actually get the time of day we’re going to use a nice helper function called the which is the date object so to create a new date object I’m just going to declare a variable call it date and then say new date and if we return the date and we console dot log this out then we can kind of see what the new date object looks like so I’m going to change view we’re going to go to debug mode I’m going to right-click go to inspect element then I’m going to go to console and here we have the new date object and it has a set of key value pairs that we can look at so we have a constructor they they get full year what we want is get hours give minutes and get seconds so these properties or keys are what we’re going to use to actually get this information and if you can see they get seconds property or key actually calls they get seconds function so that’s how we’re going to actually be getting the information so if we go back over here close that set of returning date what we can do is saying var hours equals date dot get hours and save our minutes equals the dots get minutes they can say for seconds equals they get seconds okay so now we actually have the information relating to hours minutes seconds but just to kind of clarify a few things one when we actually call this function they get hours we’re actually getting it integer back and the other thing about this is if hours minutes or seconds is less than ten then we only get one digit we don’t get two digits but what we’re going to be creating is a hex clock and we need to have six digits so we need to make sure that we are padding the digits that are the numbers that are less than ten with a zero so that when these numbers are combined they actually create six digits so to do that what I’m going to do is I’m going to create an array and I’m going to map over hours minutes and seconds using the map function that’s available to us in JavaScript which gives us a callback function and for each of these iterations that we go through so map is just saying okay pass in ours and then what do you want to give it as far as a name and I’m just going to give it this instance variable num so when ours gets passed in it’s going to be given num now what do we want num to do well we want num to if it’s less than 10 be padded with a 0 so what we can do is say return none less than 10 question mark so this is called a ternary operator so this is asking the question is number less than 10 question mark if it is less than 10 then what do we want to pass back we want to pass back 0 plus the number and if it’s not less than 10 then actually what we want to do is not only just pass back the number but we also want to pass back the number as a string and the reason why I’m doing that is because just to make it easier as we return this number later on and you’ll see what I’m saying so now that we have this new array of hours minutes and seconds we can then reassign these values to the values in this array so for example we can say hours equals array 0 and we can say minutes equals array 1 and seconds equals array 2 so just to kind of fill you in javascript uses a zero index meaning that this is the index 0 so it starts at 0 and then goes up from there and doesn’t start at 1 so this is 0 this is 1 and then this is 2 so now that we reassigned hours minutes and seconds we can now return that information back to the function and whatever we’re going to pass that along to so hours minutes seconds and the reason I did this is because if all of these were integers instead of strings so here I change these values from being integers to strings even if they’re not less than 10 and just to clarify as well whenever you put a string in front of an integer it will then combine that into just a string but let’s say that all of these numbers are greater than 10 well all that’s going to do is actually add up hours minutes and seconds it’s not going to concatenate those elements into a string so what we would get is you know whatever 20 plus 30 plus 50 is instead of actually making that into one string so now if we save this then inside of our console we should get a number so I just saved it and now in the console I get 13 37 31 and if I do it again and maybe there’s a number less than 10 in there this next time they instantiate it ok maybe not but if you save this and refresh the page and the seconds is less than 10 what you’ll see is you know 0 1 0 2 0 3 and and the same for the rest of them if the hours less than 10 you’ll get 0 in from the hour if the Mendon is less than thing you’ll get a 0 in for the minute so here we were able to use some functional programming techniques such as using the map function and using the they object to help us to then retrieve what the time of day is and this is the first part of creating our hex clock so in the previous lesson I showed you how we can use some helper functions like the data object and how to use functional programming like the map function to help us to get the time and be able to pass that on to a new function which we’re going to create now that is actually going to display that information on the page so to start with this we’re going to create a new function and I’m just going to call that output and we know that is going to take at the time so I’m gonna put in the argument time and to give to make time into an actual hex color I’m just going to change this and put a hash in front of it so I’m just going to declare a variable color and just set it equal to the hash plus time so now that we have that what we can do is we can change the background color and we can put inside of the body tag the content the hex color that we have so for example I can say document that body that liji color which we’ve seen before and I’m going to set it equal to the color and what I’m also going to do is say document dot body the text contents and all and also set it to color and if I want to see this the output onto the screen I can put output and then time and call times and if I open up my screen I should see now here we have the time of day which for me is 13 5751 the time this was instantiated along with the hash in front of it and I have the corresponding hex color that relates to that time but we wanted this to be a hex clock we then just wanted to show you know just one color for the time of day we wanted to actually be repeating every second so that the color changes and the time changes every second well what JavaScript provides to us is a nice helper function called set interval so I can say set interval and set interval takes a callback function so what I’m going to do is I’m going to take this out put it in there and it’s going to output but if you notice it still is not changing and that’s because set interval not only takes a callback function but it also takes a time period that you want this function to be called and we want it to be called every 1000 milliseconds which is also every second so now what you should see on the screen is the color changing along with the time of day so in the previous lesson I showed you how we could output the time to the Dom and how we can use the set interval function to allow us to change the color and the number every second but we don’t have very much interactivity at this point and to kind of finish this project off I think what we could do is create some type of interaction where when you click on the screen it stops the clock and when you double click it’ll repeat the clock again so to kind of start out doing that what we’re going to do is we’re going to create function called init and this is a convention followed by many different programming languages and and it just means initialized and what I’m going to do is I’m going to take out that function I’m going to put it in there and what I’m also going to do is I’m going to set this function to a variable and call it tick and just to make this a little bit easier I’m going to put all that on one line so now what we want to do is instead of just having this out in the global scope when we actually want this function to run we can just call the initialize function and it will initialize it and get it to start so now what we want to do is we want to add some interactivity so we want to add a start click and stop click so I’m going to create two additional functions I’m going to call it start click takes no arguments and a stop click which doesn’t take any arguments at the moment but both of these will take arguments but I just want to create the function first so they stop click is actually going to listen for events on the body of the document so to do that we just say document that body dot add event listener and we’re going to listen for a click and we’re going to get a callback function of that event and what we want to do is we want to clear this interval and there is a function that’s available to us called clear interval that will when given the variable of this interval will then clear it and stop it from working so just like before when we used a callback function we’re going to need a callback function here because as we know this addeventlistener click is asynchronous we don’t know when it’s going to fire off but when it does fire off what we want to do is call a callback function so that that function can then clear this interval so what I’m going to pass in to stop click is a callback and I’ll just name it callback and then what we also need is the name of the interval that we have so then under here what we can do is we can say callback and then name and then we can say stop click and we can now use clear interval and we can then put in the interval that we want to clear and that’s going to be thick so the way that this would work if you weren’t using just a callback function is all you would have to do is just say clear interval and then give it the name but what we’re doing is we’re passing this into or passing clear interval and tick into this stop click function and what’s happening is when the document listens to a clicked event we’re going to then call clear interval with tape so just imagine that this is what’s happening here so now if we actually click on the screen we should see that it stops and the interval has been cleared but what if we want to begin that click again well what we need to do is we’re going to listen to an event listener and we’re going to listen to not just the click but we’re gonna listen to double-click on the screen and what we want to do is we want a call back and we just want to initialize this function again so that it will start over so what I’m going to do is I’m going to pass in a callback and in this case the callback will be this initialize function so start click callback will be it so what’s happening here is this gets initialized again so it’s going to get called again and when it gets called again is going to initialize all of this information and then start clicking after every second so if I click on the body it stops and if I double click it’ll start again so if I click it should stop and if I double click it’ll start over again and it’s only working here as I click on the number because like we mentioned previously when you create a body tag it will only take up as much space as the elements within it and this has a text element and the body now is only taking up as much space as this is so if I click in this area this line here then it’ll start clicking so if I click here it’ll stop if I double click it’ll start again so now we have a fully functional app you can say that changes color changes background based on the time of day it also changes the time and we also have this added feature of when we click we can stop it when we double-click we can start it again and if you want you can go through and you can’t maybe make the body a little bit bigger so we can say that say document that body dot style dot height equals 100 whew height and let’s see if if that yep that worked for us so if I click anywhere on the body it’ll start and if I click anywhere else on the body it will stop so now it will fully functional at and I guess I am this point in time you can just go in and change the styles thanks Adam and to the patrons of the show who make it possible to pay Adam to make these videos for us patrons get these videos early and they get extra videos also but they also get other things like podcast live video chats group text chat join us at slash deb tips to check out you know the communities see what that’s all about thanks again Adam for making our lives better I’ll be back next week to show you a new thing that I learned with CSX box-shadow until then keep on hacking

Xem them Bi kip chup anh bau troi dep tai day

Leave a Reply

Your email address will not be published.