JavaScript Basics Overview

[00:00:00]
>> So let's write our very first bit of code. We're gonna write JavaScript. JavaScript is a simple language to start with because it's what's called single threaded. It means that only one thing is ever happening at a time. You can never have two things happening at the same time unlike something like Go, right, which has this ability to split out and be multi-threaded.

[00:00:26]
It's powerful, but that power comes at the cost of being complicated. So that's why I like teaching JavaScript first. So in general, it means that it goes line by line, which we would expect, right? It executes Line 1, then Line 2, then Line 3. So let's take an example here.

[00:00:45]
You have a variable here that we've created called monthly rent, right? And we've just assigned that to be $500. That's probably a bit low [LAUGH] these days, depending on where you live, certainly in Seattle. And then if we wanted to calculate what the yearly rent would be, we'd say, const yearlyRent = monthlyRent times 12.

[00:01:05]
I think that makes sense. The asterisk here represents multiplication in JavaScript. And then, if I wanna show that down here the results, all I do is this console log function, which we'll talk about how that works later. But just for now, know that if you put console.log(), and then anything between the parentheses, it's gonna get displayed.

[00:01:24]
That's enough for now and then we'll talk about that later. So 500 times 12 is 6000, right? So that's what this number is here. You might ask what this undefined is? It's just a byproduct of the way that this particular little widget is working. It actually just returns whatever the last line is.

[00:01:46]
So if I put lol here, something like that, it'll just be that last line. So, in other words, never worry about the last line in any of these things. Okay, So this is called a variable. If you've taken algebra, you've used words to represent numbers before. This is just where we're storing something, right?

[00:02:11]
So we have this number of 500, and we're storing that inside of this variable here. Const is a reserved word in JavaScript that's just denoting that this is going to be a variable. In particular, it's the type of variable that doesn't change. So if I could try and say here, monthlyRent = 1, it's gonna say, hey, you can't reassign this because it's a constant, right?

[00:02:41]
That's what constant's for. If you wanna have something that's what we call mutable or changeable. Mutable is just the stupid computer science term that means it's changeable. You say let. And let is just the way that you say like, I have a variable here it might change later.

[00:03:02]
If you have const here you say, I have a variable here, it will not change later. I tend to use const by default. You could use let, there's lots of people out there that prefer let. You will also see frequently var as well, this is just the old way of doing JavaScript.

[00:03:21]
You shouldn't use var anymore, but you might see it in Stack Overflow or something like that. Const or let are the two ways of doing that now.
>> When did people start doing var, I mean, not using var and like constant and let?
>> 2015. [LAUGH] So in 2015 we got a big revision of JavaScript called ES6.

[00:03:45]
ES stands for ECMAScript, which is the technical name of what JavaScript is, cuz JavaScript is a trademark owned by Oracle. And they do not lease that to the founding body of JavaScript, so they use the termECMAScript, which stands for a European Computer Manufacturing Association. But they've since dropped that now.

[00:04:05]
Now, literally the name of the company is ACMA. Because it's not the European computer, they don't do anything with that anymore. It's actually just a standardization body. And they've standardize a bunch of things, one of which is JavaScript. So ES6 came out in 2015, that's where const and let came from.

[00:04:25]
Now they release new versions of JavaScript every year. By the way, it's not incorrect to say var. You can totally just continue doing var forever, it would work. It's not gonna stop working. It has some weird things that it does that you wouldn't expect in const and let reined that in to make it more predictable or intuitive.

[00:04:47]
Let's go with that. It makes it more intuitive. Yeah, sometimes you'll see like this gets into a weird state, like missing variable name. I don't know what happened here. Yeah, just a byproduct of like, this code is actually executing live on the fly and inside of your browser.

[00:05:10]
So another thing you might notice here is how these variables are called. I squished the words together. This is called camel casing, in case you're wondering. Cuz it's like a camel where there's the bumps on the back of the camel, right? These variable names have to be one word, right?

[00:05:27]
So if we wanna have multiple words in a variable name, we have to squish them all together. And the way by convention that most people do that in JavaScript is with camel casing. Technically you can do, I think this is called snake casing. You'll see a lot of other programming languages do it this way with the underscore.

[00:05:47]
It's valid JavaScript, you totally can, but people will know that you're not a JavaScript. No one writes JavaScript this way, everyone uses camel case. So just go ahead and stick to camel case. Okay, another thing is, not all variable names are okay. So I can't say const const equals 5, right?

[00:06:13]
This const here is a reserved word, right? Because it obviously it means that this is a variable, right? So it's gonna be like, I don't understand this, you broke it. So I can't do let, I can't do for, I can't do var, I can't do if, right? These are all significant words in the JavaScript grammar.

[00:06:31]
So it won't let you use those as variable names. So I'm just trying to head off some of the things that I expect people to run into. And this one of the things that when I was getting started in programming I was like, why can't I call this var, right?

[00:06:44]
I wanna call this var but it won't let me. That's why. Let's talk about the semicolon versus a second. That's just like we saw in CSS where it's like a period at the end of the sentence. You are saying, I am done with this. Technically in JavaScript they are all optional.

[00:07:06]
So this actually works. You can leave off all the semicolons and that's fine. There are people out there that never write semicolons. I don't care. [LAUGH] People love to argue about these kinds of things, and they'll have like these holy wars of like, we should use commas, or we should use semicolons and we shouldn't.

[00:07:24]
I really just don't care. You're welcome to form an opinion on it. I'm putting them in because I think it makes things a little bit more clear for students learning of like this is a full statement, full period, and a sentence. Technically you can have multiple statements on a line, right?

[00:07:41]
This is var because I have these semicolons here. You would never do this, by the way. Absolutely never do this. Every statement is on its own line, period, end of sentence. Never do anything besides that. But I am telling you that it is possible because of semicolons. If you want an opinion to go with right now, technically there's some weird things you can run into that are extremely rare.

[00:08:04]
That putting semicolons will prevent you from ever hitting. So it's maybe just the tiny tiniest bit more safe to do it this way. But at that after that point it's up to you if you wanna put semicolons or not. I forget them all the time to be honest with you.

[00:08:21]
Okay, I think that's, Most of it. What's fun about this now is I have this formula. So let's say they raised my rent and now it's 600 a month. I just have to change monthly rent. And because this yearly rent is based on monthly rent, now let's say this number just changed, and then have to go down and change the monthly rent as well.

[00:08:45]
I could have calculated this in my head and say this is 7200. But now if they raise my rent again, 6550, this is now not right, right? Yearly rent is now incorrect. By making this a formula, Now I'm guaranteed that monthly rent is always going to be correct as long as I have the correct monthly rate.

[00:09:17]
Cool. So, right now we have this console log here. This is logging into our little results pane. But if you do this in your code, right, so you actually have your JavaScript running. This is JavaScript console here. So, unfortunately it's really littered because this evaluation software that I'm using just dumps out a bunch of stuff.

[00:09:43]
It's called Eclipse. But let's see. You can just trash all that for the moment. And now if I change this, it actually does intercept it. I didn't realize that. Okay, but typically it would just dump it out here into your JavaScript console. So if I say like, let monthlRent = 5, let's make this a bit bigger.

[00:10:12]
It already exists! So I have monthly rent here, which is we've set here. And monthly rent times 12, right, so I use this all the time to just open and try things out. It's kind of fun, it's called a REPL, which stands for, man, I can't remember what REPL stands for.

[00:10:33]
Read execute something loop. I forgot what the P stands for.
>> I think eval print loop.
>> Print, eval. Yeah, close enough, read eval print loop. Yeah that makes sense, which just means it's an interactive code. So I can put code in, it'll immediately run it for me.

[00:10:56]
It's kind of fun. And you can get there really easily by just like saying inspect here, just like we were doing for that. And then there's a button up here for console. You just click on that. Okay, So let's make a little experiment folder. Let's do that really quick.

[00:11:18]
I'm just gonna make a new folder on my desktop. We'll call it JS Experiments. And I'm gonna open this in VS Code. Yeah, so a really easy way of doing that is just to make the folder and then drag it onto the VS Code icon. VS Code will open the folder for you.

[00:11:37]
So I have nothing in here at the moment. We'll make a new file, we'll call it index.html. We'll put our HTML 5 in here, call this JS Experiments. And then I just wanna make a script here. So script, and then you say, source equals whatever you wanna call it.

[00:12:02]
We'll call mine like experiments.js or something like that. This right here will link out to an external JavaScript file, right? Here we'll just call this the same thing, experiments.js. And now I can start writing JavaScript here that will be run in the browser. So you can put like a little h1 in there just to know that you open the page correctly.

[00:12:36]
And here in the experiments.js you can just say console.log(" hello from experiments "), or something like that. And again, remember, anything that you put into console.log(), we'll talk about what this is in a second, but this is a bunch of words or string of characters. Now, if we open this index.html, we would expect to see logged out in our little JavaScript console, hello from experiments.

[00:13:10]
So, let's go open it. So I have my desktop, we're looking at JS Experiments, and I'm gonna open my index.html. So you can see the Hello here, we expect that that's, what I put in my h1. But I feel like I look in my console, hello from experiments.

[00:13:31]
So if you're having a hard time finding the dev tools, I think you can click Tools, Browser Tools, Web Development Tools. Or like I said before, you can say, right click, Inspect, and then go to Console. Or what I do by having now a recent Mac is Option + Command + I, and that'll open and close your console.

[00:14:03]
I don't remember what it is on Windows. Yeah, I'm gonna guess it's Ctrl + Option + I. Someone's gonna say, you crashed my computer. I don't know what the heck, but that will just be my guess of what I would try if I was on Windows. What am I talking about?

[00:14:24]
I literally have a Windows computer right here. It's like I forgot. Ctrl + Shift + I. Yep, there it is. Ctrl + Shift + I will open your dev tools, On Windows.