Running Your First JavaScript Code

[00:00:00]
>> WebDevSimplified: JavaScript is a scripting language, and for the most part people use JavaScript for web development, but you can use it for many different things. By far the most common place for JavaScript to be ran is on your browser. This is often called the front end, and you may have heard of front end, backend, and full stack. Front end means the browser, backend means the server, the behind the scenes stuff, and full stack is just the combination of those two together.

[00:00:22]
So when you run JavaScript in the front end, the whole purpose is to make it so that your site is interactive. Any time that you work on a site and you click a button and something happens, that's because someone wrote JavaScript on the front end to make that button do something. So JavaScript is all about making your site interactive on the front end. Now you can also run JavaScript on the back end.

[00:00:40]
There's quite a few different ways to do this, but Node.js, which we already installed earlier, is the most common way that you run this on the back end. And this backend code essentially can be anything. Usually it's going to be a server that you're communicating with on the front end. So for example, if you go to Amazon and you try to purchase something, well, what's going to happen is Amazon's going to send all that information to their server behind the scenes and it'll process your payment.

[00:01:03]
It'll save that you made that thing. It'll work on the invoice to ship you that product. All that stuff happens behind the scenes, and you can write that in JavaScript if you want to. So if you use Node.js, for example, you can write all that in JavaScript. So you can use JavaScript on the back end and the front end, so you only need to learn one language to do this full array of different web development topics.

[00:01:23]
Now some less common uses for JavaScript will be desktop applications and mobile applications. Electron is by far the most common way that you work with desktop applications inside of JavaScript, and actually there's some really popular libraries or frameworks, technologies such as Visual Studio Code, Slack, and Discord. These are all built on top of JavaScript, so you can see these are examples of JavaScript being used inside of a non web based application.

[00:01:47]
It's not as common of a use case, but it's definitely there. Mobile applications are definitely the least common way that JavaScript is used, but there's certain frameworks like React Native and Ionic that allow you to use JavaScript in a more mobile friendly way. But I would say that is by far the least common way it's used, and web development, both front end and backend, are by far the most common.

[00:02:07]
Now a few details about JavaScript itself as an actual language is JavaScript is a scripting language, which means that it is interpreted. And essentially what that means is some languages like C, for example, are compiled down. Essentially they take all the code you write and they convert it into a bunch of stuff that only the computer can understand how to read. If you looked at it, it would just look like a bunch of nonsense, but the computer understands what it means.

[00:02:29]
JavaScript doesn't do that. Whatever code you write, for example, when we wrote our code console.log Hello World, that is the exact code that your browser also sees. It just reads your code exactly as you wrote it and runs it just like you wrote it. So it's much easier to kind of see what your code does because it doesn't have this extra step where it compiles it down to something else that you can't read.

[00:02:48]
It's also dynamic. This means that the types for everything are determined at runtime. Some programming languages require you to define the type of everything you work in. JavaScript does not, and we're going to see the pros and cons of this throughout the workshop, as we talk about the different ways JavaScript handles type. Lastly, JavaScript is more of a high level programming language. This just means that there's a lot of stuff that's handled for you automatically, such as how do you interact with the browser and how do you do those different things.

[00:03:13]
That's all part of the language. You don't need to write that. Higher level languages make it easier to do more complex things, which is really nice, so we can do some relatively complex stuff in JavaScript without having to write a ton of different code. Now that we kind of have all that background knowledge as well as the tools we need downloaded, we can finally actually write our very first application.

[00:03:31]
Now if you haven't already, I would open up VS Code and you can just create a brand new project. So inside VS Code, click on file, and then you just need to click Open folder. That'll allow you to open up a folder. Just make a brand new folder for this workshop, call whatever you want, and open it up, and you'll have a completely blank page. There'll be no files on the right hand side or the left hand side for you.

[00:03:49]
Once you're done with that, I can actually talk about the whole layout for VS Code. So if we go ahead and we look in VS Code, the left hand side over here is most likely going to be where your files show up. If they don't, just make sure you click this button in the top left corner called the Explorer. That'll open up that file section for you. And if you want to toggle this opened or closed, you can use Control or command on a Mac and B.

[00:04:10]
And if you use that Control-B shortcut, that'll allow you to open and close this left hand side panel. The center section is where all the different code that you have is, so every single time that you open up a file, click it on the left hand side, it'll show that on the right hand side with all the code. You can make your different changes so I can come in here, change something, and since we have Live Server running, you can see it still automatically updates all that content for me.

[00:04:33]
Finally, at the very bottom we have the terminal. Now you may not actually see this terminal pop up inside of yours right away. Your browser may look like this for VS Code. If you want that terminal to pop up, use that control or command on a Mac keyboard, and then the tilde key, and that's the key directly above tab on your keyboard next to the one key. Click that plus control, and that'll allow you to toggle this opened and closed to access the terminal, which is really useful when you're trying to work in like Node.js for example.

[00:04:57]
You really need this terminal to be there. That's kind of the overall layout of VS Code. Create your files on the left, modify them in the middle section, and at the bottom is where you can run different things in your terminal, such as Node.js. Now we already went through and we created an HTML file when we set up Live Server, so I want to talk about creating a JavaScript file. All you need to do is just click this new file button and type in script.js.

[00:05:23]
This .js extension at the end just tells VS Code in the browser that you're using a JavaScript file for this. I've already created that file because we kind of looked at how Prettier works inside that file. That would be how we create our script.js file. The next step that we need to do is we actually need to make sure that we run that particular piece of code, and there's two different ways we can do that.

[00:05:41]
The first is using Node to run this more on the back end, and the second way would be inside of our browser. So we can come into using Node. All we need to do is open up this terminal right here, type in the word Node, followed by the name of that file that we have, which is script.js just like that. When you click Enter inside of our file, we have console.log Hello World. I would recommend putting that in your file as well.

[00:06:01]
If you do that, you should see the text Hello World being printed out inside of your terminal, and that's how you know you're actually able to work with Node inside of your project. Now, most likely you probably want to run this code in the browser though, because that's how most web development works. It's inside the browser. To do that is going to be slightly more complicated, but overall not too difficult.

[00:06:20]
What you want to do is inside your HTML, this is all the boilerplate HTML that we had before, you'll notice there's one new line right here, which is adding a script tag to our HTML. So to load JavaScript in HTML, all you use is a tag that starts with script, and then you need to pass it an attribute called Source, and the value of this source attribute should be whatever the path to that file is.

[00:06:43]
So to show you a quick example, in our index HTML, what we can do inside of here is we can create a script tag. We pass it in that source attribute. And then we just need to give it the path to our file. Now our file is right here next to our HTML file, so we can just call it script.js. So now we can close off that script tag to close it off, we just come in here, we'll put a slash like that, type in the script, and close it off.

[00:07:04]
So now we have all of our script tag completely closed down. Now this allows us to run that JavaScript in our application, and actually you'll notice when I save this, it'll actually show Hello World over on the right hand side here because I actually have the console open, which is a development tool built into the browser. If you want to open this up yourself, all you need to do is on your web page that you have opened for Live Server, right click on that page, scroll down to where it says inspect, and that'll open up this on the elements tab.

[00:07:29]
All you need to do is in this top sidebar, you should see something called console, or you can click more tabs and click on console, and that'll show you essentially everything that you log out inside your page will show up inside this console tab right here. And the nice thing is, again, since we have Live Server set up, if I change this to Hello World 2 and I save, you'll notice it automatically updates inside my console.

[00:07:48]
So that's the real power of using Live Server in combination with Prettier to make your code format for you. So essentially all that monotonous task of formatting your code and refreshing your page is handled automatically for you behind the scenes, which is really nice. Is Live Server on that port or how did you get it running the first time? So essentially to get Live Server up and running, when we right click on a particular page and click Open with Live Server, that'll automatically open you to this port, which is 127.0.0.1, also called localhost if I replace this.

[00:08:21]
With localhost, it'll still render the exact same page, obviously not with the same zoom level and then you can see after that there's a colon followed by 5500. That's just the port number. So whenever you run Live Server, it'll always open up on your localhost and it'll open it up to port 5500 by default. You can change that if you want in the configurations, but I always just leave it as this default 5500 port.

[00:08:43]
So I talked about how you could open up that JavaScript output. Some common mistakes that you may run into in JavaScript when you're writing out this code. Make sure first of all that you remember to put the quotes around this text Hello World. If you don't do that, it's going to give you an error. You also need to make sure you have these opening and closing parentheses around that text Hello World as well.

[00:09:02]
Otherwise, again you'll get an error and it won't print out. And finally, make sure you spell console.log correctly. It's going to be console dot make sure that's a period, and then the word log after that with no spaces or anything in between them. Now, this thing I kind of wanted to squeeze in because there's really no good section to talk about this, but you can write comments inside your JavaScript code.

[00:09:21]
These things are not actually ran by the JavaScript at all, like the browser doesn't read this as code. This is purely there for you and other developers looking at your code. And there's two different ways to write comments. The first is going to be using this double forward slash. So if we go into our code anywhere inside of here, and we just write two forward slashes, every single thing that I write after this is just going to be a comment.

[00:09:43]
So I can say like, this is what the code does. There we go, and this will explain what the code does, why I did something. This is useful for when you have complex code that you need to maybe need to write how it actually works that way when you come back to it, you can understand what's going on. Now inside VS Code, there's a really handy keyboard shortcut if you hold down control or command on a Mac and you click the question mark slash forward slash key, that'll automatically comment out whatever line you have highlighted.

[00:10:08]
So in my case, it allows me to toggle the comment on this line. So if I comment this line out, it's now no longer read by JavaScript. So when I save my file, you'll notice nothing gets printed out because it essentially pretends that this code doesn't exist because it's being commented out. So having the ability to easily toggle your code on and off with that keyboard shortcut is really useful, especially when you start doing testing and more complex code.

[00:10:31]
Now the second type of comment is a multi line comment. This is going to use a forward slash followed by a star, anything you want inside of here, and you close it off with a star followed by a forward slash. So to take a quick look at that, we can come in here, we can write some comment, we can put it on multiple different lines. We can spread it out however we want, and then as soon as we want to end this, we just use a star followed by a forward slash.

[00:10:53]
Everything between these two different starting and ending points is going to be read as a comment, and it's completely ignored again by the browser and JavaScript and anywhere you run your code. It just pretends this doesn't exist. So this is a great way again to document more complex things that maybe need multiple lines to understand exactly what's going on inside of them.