Complete Intro to Web Development, v2 Programming Fundamentals
This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "Programming Fundamentals" Lesson
[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.
>> 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: 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: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.
>> 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.
>> 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: 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: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.
>> 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.
[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.
>> 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.
>> 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: Yeah this is yelling at me because I didn't put stuff in my head but whatever, screw you Firefox I don't care.
[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.