Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "Programming Fundamentals" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

After discussing the importance of code when working with computers, Brian shows how to start understanding JavaScript by coding simple mathematical operations.

Get Free Access Now

Transcript from the "Programming Fundamentals" Lesson

[00:00:00]
>> Brian Holt: We are gonna move on to programming now. So actually writing JavaScript. So I would say for the next, maybe hour or two, if you already know how to program on another language, this is gonna be a lot of review for you. Because we're gonna go over very, very base level proficiencies with programming, like if statements and for loops and variables and things like that.

[00:00:25] But if you do not know how to program at all, this is exactly tailored to you. So,
>> Brian Holt: It's gonna be fun. So also, this is tough section to teach because students very, very widely here. If you're coming from another language, this tends to be a little bit of review.

[00:00:43] If you're brand new then this is gonna be a whole lot to take in all at once. But, I made the comparison here, if you know Spanish already, if you go to learn Italian you already have like 50 to 60% of the grammar, you understand all of that.

[00:01:01] It's kinda the same thing here if you're coming from Go, you're going to learn some new things, but a lot of it's gonna be some review for you.
>> Brian Holt: So, just stick with me, skim, that kind of stuff.
>> Brian Holt: So, I'm going to wax philosophical for a moment.

[00:01:21] What is code? Who am I? Why am I here? No, I'm just kidding. We're just gonna ask you what is code? What is code? It might surprise you, but code is actually meant more for humans than it is for computers, and a lot of people are like, well why am I writing code then?

[00:01:38] If code was just for computers, we'd all be writing assembly directly. So that's why we end up writing code, because code is something that we as humans can read and understand and update and maintain and these kinda things. And a very junior level mistake to make is to write code that you never intend on maintaining.

[00:02:01] Because it's really easy to write code the first time, and it's really difficult to come back to code. So you actually don't wanna optimize for writing code, you wanna optimize for maintaining code. So everything that you can do to make your code more readable, more understandable, less clever, more slick, just more plain, right?

[00:02:17] So that you can go back an read it, and say okay, this is exactly what this does. So you should write more code rather than less code if it makes it more readable. And a lot of people are like, I wanna make the most clever, terse, crazy stuff.

[00:02:32] They basically wanna write Haskell, that would be a funny joke if any of you knew functional programming, people that are Haskell are jerks. [LAUGH] That's also a joke, I quit like Haskell, but for me personally it's hard to read or it can be. So that's my plea to you, is try and write code that's very readable.

[00:02:55] Be thinking about if I had to come back five years later and try and read this code and understand what it does, how would I do? You should be asking that to yourself that constantly. So yeah, be deliberate, be explicit, try not to be clever and just remember that code is communication.

[00:03:18]
>> Brian Holt: So, let's frame how code works on.
>> Brian Holt: So when you write code, the code is basically parsed in to pieces that's broken down in to something that a computer can understand.
>> Brian Holt: JavaScript is what we've call single threaded, that means that only one thing is ever happening at a time.

[00:03:38] So if you're coming from something like Java or Go or something else that they have these features called concurrency. That they can do multiple things at once, JavaScript has no way of doing concurrency. It has doing things out of order which is different from doing things concurrently. So, that's good for you because it's a lot easier to understand single threaded code, it's really easy to understand the order that things happen in.

[00:04:07]
>> Brian Holt: In general, going down to this code here, let's make this a tiny bit bigger. This is your first bit of JavaScript right here that we're gonna talk about.
>> Brian Holt: Generally, it reads how you would expect it, that it does line one, then line two, then line three, then line four, right?

[00:04:25] It executes in order, so it's gonna run this line. It's going to complete, then it's gonna do line two, and then line three, and then line four. So let's talk about this particular piece of code right here. We're saying const monthlyRent equals 500. Now even if you don't know coding before, I think this should make some sense to you.

[00:04:47] That monthly rent is a variable that is being assigned the value of 500. So if I come here on the next line and say console.log(monthlyRent), you might expect that I'm gonna get 500. monthlyRent is basically now a symbol that represents 500. Now, the const here means that this is an unchanging value, that I can't come in here on the next line and say, monthlyRent = 600.

[00:05:18] It's gonna say, hey, you already assigned monthly rents to be something else, you can't do that.
>> Brian Holt: That's what const means, we'll get into let later. But let allows you to change that, the const does allow changer. Anytime you see console.log here, that's basically, gonna say, I'm gonna write down here in the result, that's all that means.

[00:05:41] So anything that gets put inside the parenthesis here is instead of console log is gonna get written down here, okay? In JavaScript, you can have as many empty lines as you want, so I could put five here and JavaScript is happy to just skip as many empty lines as it wants.

[00:06:00] So in other words, use empty lines as much as you need to separate things logically so that it's easy to skip around and see what's happening in your code. It's a useful device for breaking things up, just like writing a paragraph in an essay. Okay, so now we yearlyRent here, and I'm saying const yearlyRent is being assigned monthlyRent times, that's what this asterisk means, it means multiplied.

[00:06:29] Because we don't write x, that doesn't make any sense. We use the star to represent multiplication, times 12, right, 12 months in a year. So 12 times the monthly rent is going to give you the yearly rent. And then I assign that to this and then I log that out and I get 6,000.

[00:06:49]
>> Brian Holt: Any questions about that? Is your first JavaScript program.
>> Brian Holt: Then you see down here undefined. So just the way that this particular little thing works, it's not that it's important for you to know. If I just put 500 here, whatever the last thing returns, we'll talk about returns later.

[00:07:12] But right now, nothing is being returned. So it says, hey, you didn't return anything, so your return is undefined.
>> Brian Holt: So or you could just put literally yearly rent here, yearlyRent, and it would return 6,000 here as well. So,
>> Brian Holt: Anyway,
>> Brian Holt: That's worth talking about. There can't be any spaces in variable names.

[00:07:44] So, we need some way of doing multiple words together. And if you put monthly rent like this, it's kind of hard to read. All lower case things shoved together, particularly when it starts getting really long. So we need some way of doing, separating of words. Now technically you could do underscore here, this is a valid JavaScript name and this is more like how Python looks for example.

[00:08:08] It's not how we do it in JavaScript. JavaScript, just because there's not really a good reason, but in JavaScript we have chosen to do what's called camel casing. So when you have words you're gonna do camel casing to make it just more readable for you.
>> Brian Holt: It's called camel casing cuz it looks like a hump, right?

[00:08:30] It's like in the middle of the word.
>> Brian Holt: There's no reason your JavaScript code would not execute. But as soon as I see someone do this, in an interview or something like that, I'm like this person doesn't write a lot of JavaScript, because everything is done camel casing in JavaScript

[00:08:59]
>> Brian Holt: Notice the semicolons. Remember in CSS you have to put the semicolon at the end of every statement, the same is true of JavaScript. Technically, you can omit them,
>> Brian Holt: And it does still work. JavaScript has what's called ASI, automatic semicolon insertion. So it does technically let you do that, and there are people that choose to write their JavaScript that way.

[00:09:30]
>> Brian Holt: I don't care, I really don't. If I never have that conversation with someone ever again, I'm perfectly happy about that. I just hate arguing about stupid stuff, and this definitely qualifies under stupid stuff. So, do whatever you want, just don't tell me about what you're doing.
>> Brian Holt: In any case, if you don't put the semicolons there, the computer will put them there for you when it goes to execute them.

[00:09:59]
>> Brian Holt: Okay., variables can be called almost anything, you can't use what are called keywords. So for example, I can't say, const const = 5, because const is a keyword, right? It means something in JavaScript. So you cannot use const, you can't use function, you can't use default, there's a bunch of things that you can't use.

[00:10:23] And believe me it will tell you what you can't use. So it's gonna say, hey you're missing a variable name or if I try and do it like function, it's gonna be all weird and say, it's hey, you're missing a variable name. it's just not gonna understand what you're trying to do, cuz it thinks you're trying to declare a function there.

[00:10:48]
>> Brian Holt: But other than that, if you're missing all the keywords, you can call it whatever you want. What else?
>> Brian Holt: Just to show you, so, these are my developer tools. When we're doing console.log here and its logging on this little thing on the page for you, which is just a convenience.

[00:11:11] If you actually go into your console here, you'll see that it is actually logging out here as well.
>> Brian Holt: I think, maybe it's not, it might be blocking it. Anyway normally, let's just trash all that. There's a bunch of stuff coming from the plugin that I'm using so you can ignore that, just gonna make this bigger, I can, cool.

[00:11:37] Normally, you can actually just write directly here to your console, and say like console.log,
>> Brian Holt: 5+5 or something like that
>> Brian Holt: Look, it's actually putting it out there, that's really funny. So don't do it on this page, let's just open a new tab and do that, so console.log(5).

[00:12:08] There you go, so it's logging it right there. So you can actually just use this kind of as what we'd call a REPL, R-E-P-L. Read, evaluate, print, I don't know, now I'm making this stuff up. It stands for something that I don't care what it stands for, but you can just type commands in, mess around, test things out.

[00:12:26] I can say, x = 5, 5 * 25, it will just print that stuff out so you can actually just program directly in here and mess around with stuff, I do it all the time.
>> Brian Holt: And anytime you would normally write console.log, instead of your JavaScript file, this is where it gets written out, right?

[00:12:45] So questions about that?
>> Brian Holt: Where am I? I'm in here.
>> Brian Holt: This side happens to be a little screwed up because we overrode the console.log to write to this thing right here.
>> Brian Holt: Okay.
>> Brian Holt: I've put a link here if you're having trouble finding in developer tools right there, that'll show you how to do it in multiple different browsers as well.

[00:13:16] So there's a link there if you need help.
>> Brian Holt: Okay, we're gonna do it now inside of VS code, so you can see what that looks like, so you can figure out kind of how you connect those things together. So just copy this bit of HTML right here, we already learnt HTML, we're not gonna spend too time on that.

[00:13:38] Here, I'm just gonna close this project, I'm gonna say new folder on my desktop, this I'm gonna call it experiment, you can call it whatever you want. And then I'm going to open this folder, you can drag and drop them onto Visual Studio code and Visual Studio code will open that folder inside of Visual Studio code.

[00:14:00]
>> Brian Holt: You can also just do Cmd + Open here as well and just find experiments and click on that as well, that would be fine.
>> Brian Holt: So in here I'm gonna put a new file, so I did Cmd+N, Cmd+S, so New File and then Save. Or you can also do New File and then you can do save from here as well, from File.

[00:14:22] That works as well, and that should work both in Windows and in Mac, as well as probably in Linux, I assume.
>> Brian Holt: Okay, so, new file index.html, paste all that stuff. So we're going to bring in an experiments.js, so we're going to make another new file. And we're gonna save that as well in experiments.js.

[00:14:50] So now we have a JavaScript file that we're gonna be working with.
>> Brian Holt: You can ignore my ESLint stuff, no one cares. [LAUGH] So this script tag is going to load that experiments file that we just put there.
>> Brian Holt: And now I'm gonna copy and paste that code that we were just playing with right there and save that.

[00:15:16] So now this is my experiments.js file, and now I'm gonna open this in my browser just like I had done before
>> Brian Holt: On my desktop, experiments > index.html. You'll get a blank page, no, it says JavaScript Experiments. But now if I look in my console, you'll see that 6,000 is being logged out here inside of my console.

[00:15:47]
>> Brian Holt: Yeah this is yelling at me because I didn't put stuff in my head but whatever, screw you Firefox I don't care.
>> Brian Holt: Any question about this? Is it working for most people? So I just wanted you to establish, how do I start a new project if I'm gonna write a JavaScript project?

[00:16:12] So you need an index file to load your JavaScript file, and then you need to connect it using this source tag right here, so source equals eperiments.js. Remember the dot slash means in the same directory, it goes over to this directory file. And then it's going to download this file separately and then immediately run the code, right?

[00:16:32] So it's just gonna start running this by itself. You don't have to do anything, you just say, as long as it downloads it, it's just gonna run it. That's how it works.