Writing Your First JavaScript

[00:00:00]
>> Brian Holt: I wanna show you how to get this working in Visual Studio Code. So let's go and open your Visual Studio Code here. I have a brand new project here, and I'm gonna create a new file, and I'm just gonna put this on my desktop, in a new folder called, experiments, I guess.

[00:00:26]
>> Brian Holt: And I'm gonna make an index.html.
>> Brian Holt: So we're going to create our index file, which you should have been doing HTML already, I'm sure Jen did a fine job with that. I can never remember the outermost layer of what to put in index files. Luckily, VS Code just kind of does it for me.

[00:00:53]
So if I put html:5, and just hit Tab, it just completes all of that for me. So we're gonna call this one JavaScript,
>> Brian Holt: Experiments.
>> Brian Holt: And I'm just gonna put a little h1 here, h1.
>> Brian Holt: JavaScript Experiment.
>> Brian Holt: And then we're gonna put a script tag down here at the bottom.

[00:01:28]
>> Brian Holt: So, let's talk a second about script tags. There's kind of two ways you can handle script tags. I can easily just hit Enter here and directly put JavaScript in here.
>> Brian Holt: Oops.
>> Brian Holt: And between the script tag here, it'll execute any code that you put in here.

[00:01:52]
Now, I don't actually really want you to do it this way, this is kind of bad practice. You wanna keep your HTML and your JavaScript separate from each other, so that they're kind of easier to follow. So rather than do that, we're going to put a src here, a source.

[00:02:10]
In the same directory, I want you to go look for an experiments.js file.
>> Brian Holt: Okay, then we're gonna create a new file here. In the same directory as our index.html, and we're gonna call it experiments.js.
>> Brian Holt: So we're gonna put the same thing that we had before there, const monthlyRent = 500; const yearlyRent = monthlyRent * 12 / console.log(yearlyRent).

[00:03:05]
Now, I want you to open your favorite browser, and you can do Open File here or Cmd+O on Mac, or Ctrl+O on Windows. I think it's Ctrl+O. No, maybe not.
>> Brian Holt: It's not like I work at Microsoft.
>> Brian Holt: Let's see.
>> Speaker 2: In Jen's class, they had the open browser extension.

[00:03:43]
>> Brian Holt: Yeah.
>> Speaker 2: So they could just right-click on the HTML file and then [INAUDIBLE]
>> Brian Holt: Then do that. [LAUGH]
>> Brian Holt: So I'm gonna open here, let's actually gonna do this in a new file. Open and Desktop > experiments > open your index.html file. And you should just see JavaScript Experiments up here.

[00:04:08]
But we are gonna open our developer console. So Web Developer.
>> Brian Holt: And I wanna open the Web Console.
>> Brian Holt: The other way you can do that is just right clicking and say, Inspect Element here. And then just click on the Console, in your dev tools. I'm using Firefox, but I imagine many of you are using Chrome, probably.

[00:04:42]
>> Brian Holt: You Google sell outs. Just kidding. I'm kidding. I'm gonna get fired for that one. Okay, it's relatively similar though. So come in here, Desktop > experiments > index.html, Inspect Element. And you click Console and you should see something similar to that one down there. Okay, I'm gonna do it in Firefox, cuz that's what I'm more familiar with.

[00:05:16]
So you should see that 6000 there, so this is the console. I will make that a little bit bigger so you can probably see it a little better.
>> Speaker 3: When you're linking the script source, the .backslash experiments.js, do you need the .backslash?
>> Brian Holt: Forward slash.
>> Speaker 3: Forward slash?

[00:05:39]
>> Brian Holt: Yeah.
>> Speaker 3: Okay, do you need those two things if they're in the same file?
>> Brian Holt: So, yeah, let's talk about that. It's a good question. So I'm gonna close this, close that. So the question here is on line 13. Do you need the ./ here? And the answer to that question is, this will work as well.

[00:06:04]
I'm sure of that, but let me validate my assumption here. So, ./ means same directory, right? And I put it there just to be explicit, and also just kind of by force of habit. [LAUGH] Jen mentioned that she talked about that ../, means go up a directory, right?

[00:06:25]
And ./ means stay in the same directory.