4.2 Dates - Video Tutorials & Practice Problems

<v Instructor>Another frequently used</v> built-in JavaScript object is date, which represents a single moment in time. Learning about date will give us our first chance to use a constructive function called new. So far, we've been using literal constructors. So for example, if we say, let S, which is a string, equal, say a man, a plan, a canal, Panama. This is what's known as a literal constructor. We just put some characters inside these double quotes but we saw in the last section that there is an object called string. So I wanna show you how to do this. We can say instead of this literal constructor we can do new string and then give it the initial value like that. Can then see what S is. So this is not quite the same thing. You can see the text for some of the subtle differences, but for pretty much all practical purposes, this is the same thing as a literal string. So for example, if we do this, you can see there is some difference at some level, because if I do an S triple equals, remember, this is the strongest comparison in JavaScript. This is false but if I do just a double equals, it is true. And we can do things like (keyboard clacks) split on comma space. Similarly, we can define an array like this with new array object. So you can see A, just looks like the MT array. But in fact, compared to the literal one it's not triple equals to it. It's not even double equals to it. So this is just something about JavaScript. It's a little weirdness. Equality in JavaScript is notoriously strange but as with the string object, for most practical purposes we can use this just like a regular array push to it. (keyboard clacks) We can pop and so on. (keyboard clacks) Unlike strings in arrays JavaScript dates have no literal construction so we have to use new for a date. Let's define a variable called now (keyboard clacks) which is a new date. You can see here, the format it's got the year, month, day and then the time. By the way, this time in addition to being a 24 hour clock is what's called UTC. That stands for coordinated universal time. It's kind of a strange story that the standards committee couldn't decide on whether to use CUT, the English abbreviation or the French version. And so they settled on UTC, which is not the abbreviation for coordinated universal time in any language, but for most practical purposes, it's equivalent to Greenwich Mean Time. Let's put in another significant date. (keyboard clacks) This is the date of the first moon landing. You'll see that JavaScript is actually pretty good at what's called parsing this date and converting it to its internal format. So the first moon landing was July 20th, 1969 at 2018 UTC. So 8:18 PM. And one of the things we can do with dates is we can calculate the difference between them. So the difference between now and the moon landing (keyboard clacks) is, well it's this (giggles). This is the number of milliseconds since the moon landing. Of course, absent time travel. You're watching this after I recorded it. So the number of milliseconds that you see will be higher. As with other JavaScript objects, date objects respond to a variety of methods. So let's take a look. If you look at the documentation you can see that there's a get year method. (keyboard clacks) This is kind of a weird answer. You can look at the documentation to figure out what it means. I don't actually even recall offhand what it is but there is a method called get full year. That gives you the answer you want. So it should be on guard. You can often guess the right answer for a method name, but not always. It's always a good idea to refer to the documentation. These ones are not quite as intuitive as you might guess. Get month, it says five, but I'm actually recording this in June. See if you can figure out why? We'll talk about that in a sec. Good day is also five. What does that mean though? Well, let's take a look at an array of days of the week. Let's define it like this. (keyboard clacks) I'm just gonna paste it in for brevity. So now that I've got an array I can use now.getday as an index in that array. Days of the week, open square bracket paste in now.getday or you can type it in like that, Friday. Which indeed is the day of the week that I'm recording this. So now you can figure out what get month is here. It's June right now, this is five because like days zero, one, two, three, four, five. This is the index of the month, not the number of the month. So like everything in JavaScript, the months of the year and the dates of the week are zero offset. Now that we've got strings, arrays, and dates it's finally time for us to return to the browser and add some functionality to our index page. In particular, we're going to add a greeting customized to the day of the week. Right now it just says, "Hello world." But we're gonna make that a little more specific. Per card, this is what our index page looks like. I added these in, as examples, can remove those here. (keyboard clacks) Here, we've just got the alert "Hello world." So what we're gonna do now is we're gonna add in the days of the week and the current date and we're going to display the day name in the alert. Now, in the REPL, I did this. (keyboard clacks) I used let, but in fact, there's no way this is going to change, right? The days of the week are fixed. So there's a second way of doing these assignments. That is a way of indicating to the reader if no one else that what you're talking about is a constant. It's called const. Now, you can actually mutate a constant, so it's not actually enforced by JavaScript. It does give you an error if you try to reassign it. But if I sorted this, for example, it would actually change it because remember that sort actually sorts arrays in place. It mutates the array, but this is a signal to the reader that this is something that should never change. This is also our first chance to put some JavaScript code in a text editor, apart from the simple hello world. So this is our first chance to talk more about formatting conventions. So there are a couple of things here that I don't like at all. So right here, you can see that this is only one space in whereas our standard is to use two spaces for indentation. So I'm gonna put a second space to line these up this const here and the alert. And then this looks ugly, some people do things like this. So, they'll do like two, three, four. I really like to line this up inside. I think it looks really nice to have things lined up vertically. So this is the days of the week constant. And then what I'm gonna do is make a now variable like we did in the REPL. You can see how working in the REPL is really convenient. You can learn about how to do things and then suddenly, boom. Now we're putting all of our string, and array, and date knowledge to work in the browser. This is a new date. We saw that this is now, and then I'm going to say let the day name be equal to the days of the week array. And then the index we saw before now.getday. Getday method returns the day of the week. And then I can say, hello world. I'm gonna change this to a capital H just 'cause we're putting it in an extra sentence. I don't know why it's traditionally lowercase but that's just the way it is. Hello world, and then I'm gonna say happy. Now we could say this. Let's do happy plus, plus day name, see if this works and I want an exclamation point. Or I would actually just a period but this is great 'cause it shows how cumbersome this is. This really awful. So let's refresh this. Oops, something's broken. This is great, this is a good opportunity to figure out what the problem is. So inspect element, this is a good debugging tip. So we want to go to the console, now. oops, there's a typo. I swear I did not do this intentionally. By the way, you can also put this in. You can click that. This is just a safari specific thing. So there's a typo and it's caught here by our console, right here. So getday. All right, so now let's see if it works. Hello world, happy Friday. Cool, so that worked. But as we saw in the chapter on strings there's an even nicer way to do this with interpolation. So I'm gonna use the back tick. This is a template literal. So we're gonna put the closing back tick here. So, oops, look at that. So, the editor actually put in two there but I'm gonna get rid of one of them. And this is actually a good sign. So you can see here that the syntax highlighting is telling me that there's something wrong, right? These colors are wrong down here. But if I get rid of this, aha, now the colors are right. Okay, so right now we've got all the stuff in here but we've got these quotes, we can get rid of them. This here, happy day name. So this will be just literally the string day name. If I go like this, you can see happy day name in order to get Java script to interpolate that, I use dollar sign and then curly braces like this. So this should be back to happy Friday, and it worked. This is a simple, but very nice little extension to our original index page, using a combination of strings, arrays, and dates, everything we've seen so far.