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 patreon.com 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

 

Leave a Reply

Your email address will not be published. Required fields are marked *