Transcripts
1. Class introduction: welcome to this skill shake loss All about dates and hope you've been following along in this whole grand Siris on JavaScript. Remember, skill shares all about class size chunks. So please follow me in every single class because each class bulls upon each other, we're going to be getting more and more complicated. Now in your coding career, you're going to come across dates. You're gonna have to work with time. Most EPS we deal with today require storing, collecting and even displaying dates to user. So that's what I've dedicated this entire skill shaped close to two. Learning about dates, not dates, can be complicated. Don't streets. That's what I'm here for and I don't want us to use any libraries. Third party libraries like moment Js I want us to stick with JavaScript. I want you to understand the core date object itself, and it brings me to my next point. And that is the date in JavaScript is an object. In fact, it's a complex daughter top given to us by Jarvis and because it's an object, we get given very useful properties in methods correctly on their object, such as GH and six meters, which we're gonna be looking at in this class. And of course, the other new answers with the date object, for instance, the date begins on the first of January 1970. What? That just blows my mind. That don't panic. I'm gonna explain to you exactly what that means and why that is. We're going to dig deeper. We're going to look at the time state property. We're gonna be coating of examples. We even gonna look at a final example where we display a message to the user. But only if it's his birthday. Is this close for you? You might be thinking, Well, I think it is. If you an experience program, it's useful because we go into some advanced topics. And if you completely new, that's perfectly fine, too, because I discussed the date object promise very basics as we bowled more and more examples . So I really hope you following me in all these classes in javascript. We're only just beginning now. I'm super super amped to get into it and I'll see you in the next picture. Audio's
2. Dates intro: working with dates can be rather complicated. And trust me, developers have felt the pain. And before we get further, I just want to say that in this section we are going to be ignoring third party libraries like moment dot Js that help us when working with dates. And the reason is I want you to understand Java script discourses in about third party packages, and in any event, it will help you understand dates at its core. So when you're working with their party libraries, it'll help you in any of it. Let's get into it. Dates in JavaScript is an object. Remember how we had the two daughter tops in Java script were primitive, which is just stand the word for simple, like strings and members. And then we had an object. We had a complex daughter. Top Will date fits into this bucket and date represents a moment in time so you know it's named date. We do use it to handle time and to instantly eight to exist. This object called date. We have to call it by using the new Q. It and we go new date, and we only put this into a variable, and this creates a date object that points to the current moment in time. And just in case you're wondering for computers, the beginning of time is first of January 1970 and all dates or expressed in milliseconds since this time. But hang on. Whoa! What? Why is the first of January 1970 the beginning of time? Well, let me first point out the Java script is not the only language with this new ones Java python in the PLO. Four of others also start a time on the first of January 1970. When you start doing these things, you're gonna see some people say that that's the birthday off UNIX. That's simply not true. Why do we know it's not true? Because they were operating systems before 19 City. In fact, in the 19 sixties, we really had rough versions on it. So the reason that it's 19 seventies that it was just a from the engineers designing the operating system, they needed a start date of time, and they just decided, What better date then? The New Year's Day off? 1970. Something else is very interesting is on a 32 bit systems numbers can be represented from a way to these are large numbers. But what it means is that our time span is limited. What I mean by that? Well, the negative number goes back in time. Cool it. Prehistory. The positive numbers go forward in time. Call it the future. Based on these numbers, prehistory dates a way back to 1901 What about the future? Well, it only goes to Tween teen 38 0 no. Does this mean the world's gonna come to an end in 2058? I hope not, but it is known as the year 2038 problem. So how do we fix this? Well, computers are really coming out with 64 bit operating systems, and that just means we're gonna be able to push out the future date. So I don't think it's too much of a concern. Just thought it's a bit of interesting knowledge for you. Let's continue
3. Why do we need to use the 'new' keyword when instantiating the date object? : All right, let's get into some examples. Let me show you how date work. So now the first thing is, let's create a new object that in Stan she hates that calls the JavaScript date object. And I'm just gonna make comments. Yes, you can follow along. Yeah, We're gonna create a variable, the current Tommy. So let's just say let's now you call New Date. What I'm gonna do quickly is I'm skinny. Start quicker so we don't have to console this to a browser and on this to see what now is Today you go. How cool is this? We have eight pieces of information here and remember said that time starts from first of January 1970. And then any time now is just how many milliseconds Parsons thing. What I mean by this Let me show you. Let's get the current time step. Let's console log our time, which is now. And there's a inbuilt method. Remember how we were saying that thes java script date objects come with a whole lot of invoke method Will. One of them is dead time. And there you go. You have it. It's how many milliseconds have passed since 1970. But hang on before we go further. There's just one thing which you may have noticed this new key would. Did you know just that new keyword? Well, we use a new key withdrawal, a script, you creating a new object. And yes, initially, it's just gonna be a blank object. But that object will inherit its prototype from somewhere else. We're going to get up to Prozac's later, so don't streets too much. Yet all that new keyword means is that it's creating a new object and that this keyword points to that beauty created object. Well, what if we don't use the new keyword? Good question. If you don't use a new key word, you'll be fooled because the date that you create without the new keyword would just be a strength. What I mean by that is you won't have exist any properties or methods. Let me show you what I mean. So let's now really told us. And let's create a date, one with no MEU keyword, another one the proper way with a nuclear would. So it take one equal debt, no new keyword and it date to equal debt. Let's see what they look like. And like I said, they're gonna look the same date. One and a two. You can tell they look exactly the same, but we know they are not the same. And how do we taste this? Remember the type off? Miss it so we can just go console. But look, time old date one street. And if we copy this down and we're trying on day two, it's an object. And this is the point I'm trying to make. When you're working with dates, make sure you remember than Yuki would. Why is that important? Well, if you wanting to excess properties or methods, you won't be able to. It's just a strength. Let's have a look. I'll show you what I mean. Remember how on the previous example we showed the gig time? If it and that produced the number milliseconds since 1970 that was omitted that we exist. Do you think we can do it? Yeah, If it's a string, let's see and we get era date. One. Get time is not a function. So if in doubt always just used the new key would when working with it, and I just want to give you another quick summary on the nuclear would. All right, very quickly kept. We've seen that to start working with the date object, you must use the new keyword. And this just means a new into object is created and the object will inherit all properties from date prototype. That's why you and I could excess the gate time, Miss it. We didn't write that method. We could just access it straight out of the box. And that is because we used the new key word. And the last thing that I did mention is that that this keyword is bound to this new object that you create. We're gonna have a whole bonus section on this, but just bear in mind, this is what it does. Let's move on.
4. 4 ways to create the date object: As you guessed it, there's not just one day to create a date. In fact, the four ways to create a date. So let's have a quick look at them. First way is what we've just done where we used new date. And that just gives us the current date and time straightforward. Well, another way to create a date is in parenthesis. And that date will be based on the amount of milliseconds since first of January 1970. The third way to create a date is to put in a date string in parentheses. And as you guessed it, that'll just give you back the date that you specify. And you can even be more specific. You can specify the year, month, day, hour, minutes, seconds, and milliseconds, and that'll just give you back the date again that you specify. Let's see a few examples now. Let's see it in action. So we've seen a of four ways to create a date. And let's look at each one of them. Let's say liquidate 1 equals new date. And we've seen this before. This is what we did previously. So let's log them out. Yeah. There it is. New date just gives us the current date and time. Let's use the second one. And that is we give the function a timestamp, the date to new date. And let's say, what would you expect when I give it 0? Remember what the date means? It starts from which day? That's right. 1970, 1st of January. So if I do 0, that's basically saying Move 0 from that date, which should give me that original data. So it's log the dots and see. And then you guys, first of January 1970. What's the third way? The third way is we can actually pass a date string. Date three equals mu date, let's say 1st of January, 1970. And we can specify a time just to make it the same, my time zones different, just to make it the same as what's displayed here. And we log it out. We get exactly the same. And finally, let's look at the fourth wife. And this is where we have to pass multiple arguments. And if you must $1 script is just going to assume it's 0. So the first thing we must specifies that the year 1970, in the month, I'll bear in mind. Javascript number system starts at base 0, starts at 0. So January's not one. January is 0. And we want it to be the first of January, the hour or two minutes there. And it's just specify 0 seconds. Now if we logged us out, unexpected, exactly the same thing. And we do hope you started to feel more comfortable. Dates descending. Now I just want to mention and that is the getter methods and the SEC methods on debt. Let's have a look.
5. GET methods on the date object: once we have a date we have in both methods we can use on a debt on, the methods will return a part of the date we're interested in. How do we access these methods? Well, each of these methods will begin with drumroll shoot over to visual studio code and show you a few examples. So let's have a look at some of these get methods. Get methods, and I'm gonna try. Make it a bit practical here because I know these things can get. But theoretical. Let's say we want to create users birthday and let's say on this website design. When you sign up, you ask for your birthday. You month in your day. And let's just say this user puts 15th January 1985 1st thing we need to do remember is what, Yes, we need to use the new keyword and lead us now establish his birthday into a variable. So let's a late birthday equals new date. And remember, one of the ways to create a date was to be very specific. We could put in the year, the day, the month, so that's true. That 1985 that's a It's January and remember January start, Zira. That's why I keep stressing January, and it's just say it's 1/15 of the month. Now we've got the users birthday and this birthday variable, I'll prove it to you. We can talk birthday and there it is on the screen. Did you some get me? That's not, let's say we want to get the day of the month. How would we do this? Well, let's see how results by using console log The first thing we need to do is Texas are variable date variable. Now we want to access one of these get methods and for the day use date and you can even see here. The I. D e visual studio code is really giving me ahead. It sees. Get date is the day of the month using local time so I could do that. And so 15 which is 15th of January. What about if we wanted Teoh get the year? Let's try this again. We need our birthday variable and get full years. The myth addict 1995 So you can see how easy it is to use these gets to excess different things. What about the month get month. Sure you know how to do this now? Console log. We exits are birthday variable and we get and it's era which we know is January But dream But we don't any have gets We've also got six.
6. SET methods on the date object: if Gators used to get items from the debt, What do you think? Sitters? That's right. Sieges used to modify dates will to change him. It's available on a legate methods we've just previously seen to use it. All you need to do is use the key would let's go see some examples again. I want to start with a blank sheet again because I want you to start hurting with me. I want you to start remembering the syntax. Let's now look ATSIC methods. And again, let's say we've got a birthday variable. Remember, we have to use the new keyword on a date. And now let's create our own birthday. Remember, the first argument is the year it saves. Both born in 1985 in January and again JavaScript started. Zero says January zero, not one. And let's say he's born on the 15th of January and we can load this art and you can see that's exactly what we've got there. But now say that user made a mistake or he wants to go. Update is birthday profile because instead of writing 1980 he mistakenly what a months he wrote 1995. So user update birthday, and this is where we can use six methods and I'm not gonna go through them all. A lot of them, like I did forget. It's gonna be too cumbersome and boring for you. So let's just do one. Let's just say he wants to update. Is your 2 19? 90? And that's actually changed the year on their birthdays, available to 1990. Log it after the screen are primitive. So there we go change from 1985 to 1990 we've done that using the sit method.
7. Practical example of using the date object: my own destruction on dates. I want to just go through some practical examples and some real life things you might encounter. And you're not gonna understand all the pieces holic fit and how we extract variables from the user and all that again worry about that letter. I'll just understand what it is. We do it and I want you to cut along with me. So I want to show you three quick examples. One is and we've really seen part of it uses birthday. I want us to display a message to the user only if it's his birthday. You know just what you want. You want to pump the guy up way, do that. The second thing I want to go through with you is what if we want? Oh, use UTC time. UTC is just the world standard in calculating time and clocks and managing that whole process. What about if you didn't want to use the user's local machines time? Thirdly, what if you wanted to reformat dates? Let's look at some of these examples. Well, let's start with Wait uses best. How we do that was a few things I think we would need we would need the current date the current month. In the current day, it will need to compete that to the users Birthday day in birthday month. And if those two are the same, we want to show him a message. If they're not the same, we do nothing. Let's go this up and hopefully it makes more scenes. So here you can see we've got a blank sheet. Let's start coding. It's called this birthday example. The very first thing you need to assume you've got is the birthday details off the user. And, like before, that's created variable. How do we do the dates again? That's right. But use the nuclear. Would the date? You know, we said we wanted to be 1985 January which thoughts of Zira and on the 15th. So that's the users birthday. Great. Now let's extract the users month in the user Birthdays day. It's extracts Thursday, months and bruised a day. You can use whatever word you want, and I'm not the best it using words. So even if you're cutting along with me, you can call your variables more intrude of men's. I'm just gonna call mine, use a Thursday months and we've got the birthday variable. And remember those get methods. Get month this for a tune. Here we'll return the month off the users birthday, which is Sarah, and we contest that by looking it off. So look and it is Sarah. So we've got the month. Let's not get the day use this day, day and its excess again Thursday. Very more. Get date, Remember, turns the day we'll over turn off, which is 15 and I can prove it to you by looking it out and it is 15. So now we've got the user's details. But now let's get the current date and it's cool that now, because mutate, let's extract the current month in the current day. Current month equals now eight months and to get the day current day exist that now variable, which is stored which has fooled the now date and we want to get the day Now we've got the current month, the current day. All we need to do is displaying message of those to match to the users birthday. How we do that Well, in Java script, you've gotten if statement and it's very intuitive, we're gonna get into latest. I'm looking to get into it now, but you'll see even the Centex like it makes sense. So now let's start the section. We display our message if the current month and day equals the uses. So let's start in if and this is built in JavaScript. So we don't have Teoh code all the intricacies behind their statement. We have to open parentheses and now we have to define the condition. The condition is we want the dates to match. So the current month we want to make that equal. To what? Well, that's right to the users Birthday month. And with use the ampersand here, what else do we want? We want the current day to be equal to the users Thursday. Sorry, I put data should be. And if this is true, this is what the if statement will do it, of course. And we've been through corrosion occurs this whole statement and if it's true, will execute the code following block. That is the case. We want a console. Happy, happy. Oh, you empty you are old Happy birthday. But if it's not true, if it's not the users birthday, we want to do nothing. And for the sake of completeness, let's just say console log, let's do nothing. It's not the users birthday who? Okay, so we've been through this whole example and you can see how starting to make sense, like starting to hopefully get a little practical in real free. So let's see what's happened here. The birthday off the user is 1985 that we don't care about. So we want to know where there's his actual birthday and all we need for that. This is month in his day of birth, the month of January and the day is 15. What is the current month now? So long Park, Thank you. Current months now is April. That's why the number three is coming up in the current day. It's the 14th of April. So what this means is that when we're looking at that, if Block and the JavaScript engine coerces or ceases or executes or evaluates that statement, current month equals users birthday month and current day goes birthday. That's all pools to false. So then l statement's gonna be executed, which is why we see that what does get console is let's do nothing. It's not the users birthday make scenes. But now let's change the user's birthday to match the current month in current day, just to illustrate that when it is equal, the console log should be the birthday. Look, let's say three days, April on the 14th and we get it happy, happy or, um, your old happy birthday. So there you go. Uh oh, this is getting more intrude of would be having a lot of fun. This is the first way. The second thing I want to show you is the UTC time zone. What about if we wanted a more accurate way to measure time across all our users across different continents? Let me show you this. So let's into this. So now let's see another get myth that we can use to solve that problem. So remember, get methods are based on users local machine machines. Time to be more accurate. You may want to use UTC. How did we do this? Let me give you an example here. I did say no is the time now and we want to access the hours. My I was not 11 oclock your living city. That's just prince time. Normally console. Look, no get hours and you can see 11 oclock. But what about if I wanted to use UTC time? Let's use UGC. Well, it's very simple because we've been stand here to date object by using the new keyword. We've got bolting methods and properties straight out of the boss. And instead of using get hours we can use get you TCL so that's excess on are available and get UTC else the ego UTC time. There was the second example the third example. Waas. What about if I wanted to reform? It dates to show the user what he sit on his machine. Pretty cool. So let's get rid of this If you one more example how we go about reform mating date. Well, the internationalization a p I is very well supported across browsers, and it's not only limited to dates this AP eyes awesome. We can also modify numbers and strings and currencies. Let me show you an example again, that's great. Available cold. Now let's make that equal to first of January 2020. Now, if I cancel love the state out the form, it's gonna be standard. It's gonna be what the code what the drugs from engine gives me, which is that so I don't want that say I wanted for mated to whatever sittings I've got on my computer. Well, we can do that. Let's just say now this is the new date. We now need to exits the internationalization FBI. Who? That's a mouthful. We do that by the keyword I in teal. And what do we went into a picture, remember? Said we can do currencies, numbers, strings where we want to do the date. So we want to access the tape date, time, format method and a method on that object is the format method. And what do we want to form it? Our date, which is now. And that's that. That's done. Well, let me console new date. There you go. Instead of showing a big, long string, I just get 20 21st 1st How awesome is this? OK, so you had fun in this section was of a bone distinction. You've got a lot more to cover, Get amped, get a coffee and let's move on
CM Code_Zone, !false | funny, because its true
