Get Started with JavaScript

0:06Hi, everyone. Shaun Wassell here. And welcome to this course where we're going to be learning the basics of the JavaScript language. So JavaScript is an incredibly popular programming language. And, of course, depending on what statistics you look at, many consider it to be the most popular programming language currently. So it's a great language to learn, there's lots of opportunities out there for people who know how to use JavaScript. And what we're going to be covering in this first section is, a, what can you do with JavaScript. So we're going to be seeing all the different types of applications you can build with JavaScript, front end, back end, mobile, et cetera.

0:42We're going to be talking about that in some detail, along with the associated technologies. And we're also going to be seeing how to run JavaScript in all of those different situations. So we're going to be getting our hands dirty right away. And seeing how to do things like run JavaScript alongside HTML in the browser, we're going to be seeing how to run JavaScript in your computer's terminal. And we're also going to be seeing how to run server side JavaScript code, which is very exciting for many people, by writing JavaScript in separate files and running that from the terminal as well.

1:14So without further ado, let's get started.

0:09All right, so to get started here, the first thing I'd like to talk about is a question that almost everybody has when they start learning JavaScript or are interested in doing so. And that is, what can you do with the JavaScript language? What is this language good for? Well, the good news there, if you've already decided to learn JavaScript, is that JavaScript can be used for pretty much everything. And while that's a bit of a simplification, it's really not that much of an exaggeration.

0:39There are really very few situations where it's not possible to use JavaScript. There are a few situations where JavaScript might not be the best choice, which we'll talk about later on. But, in general, if you want to program anything, you are able to do so in JavaScript. In other words, anything that you can do with other languages like Python or Java, you can also do in JavaScript. So just to go into a little bit more detail on the main categories of JavaScript development, the first one is going to be front-end development.

1:15So front-end development with JavaScript is basically going to be using JavaScript in the user's browser to create things like websites. And this can be done either using vanilla JavaScript, which is basically just JavaScript without any additional libraries that other people have written. Or it can be done using existing libraries such as React or Angular, which are things that we'll talk about later on. So that's the front end, writing JavaScript in a situation where it's going to be interacting with visual elements that users will be seeing.

1:50But you can also use JavaScript on the back end. And this is going to involve things like interacting with databases, managing file systems, creating web servers, et cetera. And this is actually fairly new territory for JavaScript. We'll get into that in a little more detail later on. But, really, this is something that before, let's say over a decade ago, you would have had to do with a different language. You would have had to learn a different language for the front end and the back end.

2:22But JavaScript can be used on both of those these days. Now, in addition to the front end and back end, JavaScript can also be used to develop mobile applications. Now this is something that a lot of people don't realize because it used to be that if you wanted to write an iPhone application, let's say you had to learn Swift. And trust me, as a previous Swift developer working with Swift and developing for a single platform, for the iPhone platform was unpleasant. It meant that you had to learn a completely different language in order to write apps.

2:54But you don't have to do that anymore because JavaScript allows us to do this using-- there's a few different technologies that let us do this. But the main one is going to be React Native, which I'll talk about in more detail in just a minute as well. And, finally, the last main category of JavaScript development is going to be for writing desktop applications. Now this is different from front-end applications because desktop applications actually-- you actually download them onto your computer and run them.

3:27They're not something that you open up in a browser. So this is a situation where before JavaScript came into the picture, you would have had to write desktop applications using Java or C++ perhaps. But with JavaScript now as well as some other technologies that we'll talk about later on, we're now able to write desktop applications using JavaScript. So, anyway, these are really the four main buckets of JavaScript development. And chances are you'll find yourself working on more than one of these at a time.

3:59For instance, if you write front-end and the back-end code, that's the-- that's generally what full-stack developers do. So in other words, you'll use JavaScript on both the front end and back end. That may also include developing for mobile and desktop as well. I've definitely worked on Teams, where we use a single codebase to develop for all four of these platforms at once. But, in general, JavaScript developers, at least at first, tend to focus on one of these things. So maybe they choose to develop for the back-end and write web servers or some kind of back-end management system.

4:36Maybe they choose to focus on more of the visual aspect of things and write front-end applications, or maybe they go the mobile or desktop route and develop applications for those using JavaScript. So, anyway, that's just something to keep in mind that JavaScript can really be used for all of these things. All right, and, additionally, while these are just the main buckets that you can develop for in JavaScript, a good rule of thumb is that pretty much anywhere where you can write code you can run JavaScript.

5:08And as I said before, there are some situations where you're not necessarily going to want to use JavaScript, where JavaScript might not be the best choice for the situation. And for this, I'm talking about situations like really performance-intensive applications where you really need the ability to optimize behind the scenes and control the exact performance of the language. JavaScript doesn't really allow you to do that, the same as other languages like C++ might allow you to do it.

5:38So, anyway, just something to keep in mind, these are the four main buckets. So what I want to do now is just go through each one in turn and discuss it a little bit more deeply, just talk about some of the main technologies that you might hear about in each bucket and so on. So with the front end, you're using JavaScript to develop front-end applications, which, again, are going to run inside the user's browser, chances are you're going to be using one of a few main technologies. Now some of the most common ones that you've probably heard of are React.

6:12React is currently the most popular front-end library that's used for creating front-end applications. And it is really based off of JavaScript. So you need to know JavaScript first before you move on to learning these technologies such as React. Another one that you might hear about a lot is Angular. That's just a competitor to React, if you will. And there are some other ones that have come on the scene fairly recently such as Vue. Another one is Svelte, which I'm a really big fan of.

6:42And there are some older ones as well, such as Ember.js. And, really, all of these are just different solutions to the same problem of how to efficiently develop a front-end application using JavaScript. So I'm not going to go too much into detail on any one of these. In fact, I have courses on pretty much all of these except for Svelte currently, although I'd like to put that in at some point. So if you want to check those out, I highly recommend, as I said, learning JavaScript first.

7:13But these are some of the technologies that you can move to once you've mastered the basics of JavaScript. So, anyway, in addition to all of these technologies, which are all libraries or frameworks that you can use to develop front-end applications more easily, you may also hear about something called vanilla JavaScript, or vanilla JS, as it's sometimes referred to. Now, vanilla JS is basically just a fancy term for using JavaScript without any external libraries.

7:45So this is really just a JavaScript purist kind of thing where people want to develop their applications from the ground up and have control over every part of their application without relying on external libraries. Now, the reason that there's a term for it instead of just saying regular JavaScript without any libraries is because as a rule, JavaScript developers, and many other developers as well for that matter, have found that managers tend to like libraries. They tend to look at libraries as a solution to this or that problem.

8:19And so vanilla JS was created as a term to use so that managers think you're using a library when, actually, you're just building it from the ground up. OK, so it's a way to get around corporate bureaucracy, if you will. So those are the main technologies and terms in the front-end universe of JavaScript. Again, there's other courses that I have already published on those if you want to check those out. But I highly recommend learning regular JavaScript first, at least the basics of it.

8:49So let's talk about the back end. The back end in JavaScript is primarily based off of using a runtime called Node.js. Now let me just talk about that in a minute here after I write back end. There we go. So Node.js, as I said, is a JavaScript runtime. And we'll go into more detail on what that means later on. But, basically, Node.js allows us to run JavaScript outside of the browser. So that's something I didn't mention previously when we were talking about the front end.

9:23But JavaScript was originally created to run inside the user's browser. So in other words, if you had something like Internet Explorer or Chrome or Firefox or whatever kind of browser your operating system tends to use, then that browser would include the runtime necessary for running JavaScript code. So in other words, if you wanted to run JavaScript code, you would just download the browser and run the code inside the browser. Now that's great when you want to run JavaScript code on the front end, if you want to create a website using JavaScript, let's say.

9:58But when you want to do things like create web servers using JavaScript, that really didn't work because in that case, you would have to have a server running inside the browser, which just isn't really a good idea. So Node.js, as I've said, is a runtime that allows us to run JavaScript outside the browser. And there's a number of other libraries that go along with Node.js that make it easier to perform specific tasks. One that you'll probably hear of a lot is called Express.

10:30And Express is a library that just makes it a lot easier to write web servers using JavaScript. It is to the back end what things like React are to the front end. It just takes a lot of the nitty-gritty details away from the developers so that you don't have to worry about them and can focus on the application that you're trying to build. Express and some of the other related technologies, we'll cover in a lot more detail later on. But, anyway, that's the back end. If you want to develop back-end code in JavaScript, chances are you're going to need to install Node.js, which is something that I'll cover in a little while.

11:05And, again, that just allows you to run JavaScript code in a similar way to how you'd run code for Python or Java. All right, so moving on to the mobile side of things, if you want to write iPhone apps or Android apps or whatever kind of application using JavaScript, chances are you're going to be using a library called React Native. Now there are other technologies out there. One that you might hear of is Ionic, which is pretty popular. And another technology called NativeScript serves a similar purpose.

11:39But, in general, I personally have found that React Native is going to be hands down the easiest with the obvious caveat that in that case, you would have to learn React as well since React Native builds on the shoulders of the React library. But, in general, if you're going to write mobile applications using JavaScript, you're going to be using technology similar to these technologies that I've talked about here. All right, now the interesting thing about developing mobile apps using JavaScript is that, in general, if you do things right, this actually allows us to share code between our front-end and our mobile apps.

12:15So I've definitely worked on projects before, as I said, that have a single codebase that you simply build in different ways. And you can publish that either as a front-end browser application or as a mobile app. And that's obviously way beyond the scope of what we're talking about right now. But the idea that you can have a single codebase that can be built in order to publish different types of applications is pretty cool in my opinion. So you just have one codebase, and you can publish that either as a front-end application or as an iPhone or Android or whatever application as I said.

12:54All right, so, anyway, that's mobile development with JavaScript. I'm not going to go into much more detail on that right now. So let's cover the final bucket, so to speak, of JavaScript development. And that is desktop development, so, in other words, creating desktop applications that you can open up in the same way that you open up things like Chromebooks or Microsoft Word or whatever. That's all possible using JavaScript now as well. So you can develop desktop applications with JavaScript.

13:24And, in general, the most popular technology for doing this is called Electron. So Electron, if you hear about it, basically, what Electron does is it takes front-end applications such as React applications, and it builds them in such a way that they can be opened and downloaded and installed just like desktop applications. And, in fact, an application that uses Electron in order to achieve this functionality that you've almost definitely heard of is Slack.

13:54And I believe similar applications like Discord use Electron as well. And the nice thing here is that, really, these electron applications that you can open up on your computer look and behave almost identically to how you'd expect a desktop application written in some other language to work as well. So if you were to write it in JavaScript or C++ or Swift, you're going to save yourself a lot of trouble just using Electron and JavaScript because you'll already know JavaScript. You won't have to go and learn another programming language just to develop a desktop application.

14:29So, anyway, we've covered the four main buckets of JavaScript application here. Just to give you an idea of a few of the other types of JavaScript development that you might want to do at some point, I've seen JavaScript used for things like internet of things, where you basically just write JavaScript on a Raspberry Pi. And you can use that to specify the logic for running your Raspberry Pi. JavaScript can be used for things like wearable devices. And these aren't as popular as they used to be, things like the Google Glass.

15:00But it can be used for those kinds of things as well. Essentially, JavaScript can be used to write applications for anything that runs code, obviously, within reason. There are certain things like integrated circuit boards and Arduino. You're probably not going to be able to use that one with JavaScript. You'll probably have to learn C or whatever languages those are using these days. But, again, JavaScript in general can be used for pretty much any application that you'll want to create.

15:30So I hope this has been informative for you. And I'd like to thank you for viewing.

0:08All right, so now that we've discussed some of the basic uses of the JavaScript language, we're going to jump right in to seeing how to write and run some JavaScript code. Now there are a few different ways to do this. And the first way that we're going to take a look at is running JavaScript inside the browser's terminal. All right, now a big question that a lot of people ask me when they're getting started with JavaScript is, what do I need to download in order to run JavaScript code? And this question generally comes from the idea that in order to run things like Java or C++, you actually need to download a compiler, which is usually integrated into an IDE of some sort, in order to run your code.

0:51But in JavaScript, many people are surprised to find, you don't need anything other than a basic web browser to run JavaScript code. All right, so let's jump right in. What you're going to want to do is open up a browser. I highly recommend using an up to date version of Chrome. Although other things like edge or Firefox will work as well for these basic cases. And what you're going to want to do is open up the browser's inspector window. You can usually do that by right clicking and going to Inspect.

1:22That might be different for different browsers, but it's going to be something like that. And once you have this Inspector window open-- that's what this little thing here is called. And by the way, you can usually change the position of this by clicking this little three dot thing here, and selecting whether you want it on the side or on the bottom or as a separate window, you can do is well if you click this here. But I usually prefer to have it on the bottom just for running basic JavaScript because it's just easier to read than if you have it over on the side.

1:55OK, so once you have this open, you're going to want to go to Console. And if this is your first time working in the browser Console, basically what this allows you to do-- it's sort of like a command prompt for the browser. So if you've ever worked in a terminal inside your computer and use that to do things like move files around, run certain commands, et cetera, that's essentially what this is for the browser that you're inside of. Now I'm going to Zoom in here using Command plus. Although the hockey might be a little different on your computer, depending on the operating system.

2:27I'm on a Mac here. And what we're going to do is we're going to run a very simple command. We're going to say Let x equal 5, and put a semicolon after that. And we're going to hit Enter. And then we're going to say x times 2. All right, now what we've done here, these two things that we've just typed in and run in the browser's console are valid JavaScript statements. All right, so just to go back to our command prompt or terminal metaphor, if you were running commands inside a terminal on a Mac, let's say, you would be running basic Linux commands.

3:06The terminal in a browser, however, wants you to run JavaScript statements. Now when you run a JavaScript statement in the terminal here, it's going to show you the output of that statement. So what we did here when we said let x equal 5, this is how we declare variables in JavaScript. Now, we'll talk in much more detail about how to declare variables in JavaScript, and some of the sometimes peculiar details about doing that in JavaScript. But this is how you define a variable.

3:38We've defined a variable called x and assigned the value 5 to it. And what the console did is it printed out this undefined thing. Now, undefined basically just means that there was really no output from the command that you just ran. So while this command that we just ran did something behind the scenes by creating a new variable called x, it didn't actually have any output, which is why we see this undefined thing. All right, so that's all that this means right here, is that there was really no return value, so to speak, of this expression above.

4:12And then what we did is we used the variable that we defined, which was called x, and we multiplied it by 2. Now if you're already familiar with programming concepts, just bear with me here. I'm well aware that these are pretty simple demonstrations. But what I'm demonstrating here is more the idea of running JavaScript inside a console, than the actual concepts of declaring and using variable. So anyway, what we've done here is we've multiplied our variable x by 2. And we see that our statement actually has some output this time, it's printed out 10 to the console.

4:45And if you wanted to run something else, like x times 100, you would see the output there as well. And that's how you run JavaScript in your browser's terminal. All right, now if you want to clear out your terminal, you can always click on this little Clear console thing here, and that will clear your console for you. All right, now you might be wondering what you would want to run JavaScript in the console for, right. Why would you ever want to open this up and run JavaScript statements inside of here. Well, there's a few different reasons why you would want to do that.

5:16One reason, which I actually use quite a lot, is to test out different JavaScript statements. So if I'm writing a particularly long and complicated JavaScript statement, or if I want to make sure that I understand how some kind of built-in JavaScript function works, then usually what I'll do is I'll just open up my browser's console and run some JavaScript inside there to see if it works the way I think it does. All right, so if I were to type something a little more complicated like this-- and don't worry too much about what this is doing right now.

5:47Just know that this is all valid JavaScript. If I wanted to test and make sure that this statement worked the way I thought it did, I would just type it in as I did there, and I would see the output down below. Now, we'll talk much more about what's going on here later on when we learn more about JavaScript syntax. But anyway, that's the first main reason why you'd want to use the console, just for demonstration, as I'll be doing throughout this course. And also just to test your knowledge of JavaScript syntax, if you have a question about it before, putting that in a program and hoping that it works.

6:20Now, the other reason that you might want to run code inside the console here is to manipulate the website that you're on. So let's say that you're on a website and a pop up window shows up, well, if you know the right JavaScript to run, you can actually use that to hide annoying paywall pop ups sometimes, depending, of course, on how the website is built. We're not going to go into detail about that right now, but that's just something to keep in mind, is that this allows you to actually manipulate the website that you're currently on.

6:50So you can find different HTML elements, you can manipulate their CSS, you can remove elements, et cetera. And that's really getting into the domain of vanilla JavaScript, actually manipulating the DOM using JavaScript. And that's how to run JavaScript code inside the console. So we've run our first few pieces of JavaScript code. So I hope this has been informative for you, and I'd like to thank you for viewing.

0:00[MUSIC PLAYING] All right, so we've seen how to run basic JavaScript inside the browser's console, so let's move on to taking a look at two more different ways of running JavaScript code on the front end. Now, in general, these are going to be the ways that you're going to want to write and run your JavaScript code since this is where we actually build applications.

0:31Running JavaScript inside the browser's terminal as we saw, is usually limited to just testing out little JavaScript statements. If you're unsure of something or manipulating the page once it's already being displayed. So anyway, what we're going to do here is we're going to see how to write and run JavaScript in the context of an HTML file. Now, there are two main ways to do this depending on your preferences, all right. One way is to write your HTML file.

1:02So you're going to have HTML with all the different tags in there, a head tag, a body tag, different elements inside of there. And somewhere inside of there, you're going to have some JavaScript that will be run automatically when that file is opened up in a browser. We'll see what that looks like in just a minute. But that's called inline scripts, OK. So they're just scripts that you write in the same file as your HTML. Now the other way, and this is generally the way that you'll want to do things in bigger applications, is to define your HTML and your JavaScript in separate files and import your JavaScript into the HTML file using a special tag that we'll see in just a minute here.

1:50So you'd have your HTML here, and you'd have your JavaScript file over here. Both of these would have some code inside of here. The HTML would have a bunch of tags. And somewhere inside of here, it would have a tag that tells the browser to import this JavaScript file and run all of its contents. All right, and this one, we'll call external scripts. So those are the two main ways of writing and running JavaScript code in the browser as actual files.

2:22So let's take a look and see what both of these are going to look like. We'll start off with inline scripts here and then we'll move on to external scripts. Now, before we do this actually, one question that you're inevitably going to have is what IDE or what editor should I use to write and run JavaScript code? Well, the fact is that there are a lot of options out there. The one that I'm going to recommend personally is Visual Studio code. You can find that just by googling Visual Studio code download.

2:54But there are also some other ones such as Sublime as a popular one, Adam is a popular one, and of course, you can use pretty much any text editor to write JavaScript code. But I like Visual Studio code just because of all the features it's got. And frankly, I'm just used to working with it as are many other JavaScript developers. So feel free to download and use Visual Studio code. That's what I'm going to be doing here myself. So what we're going to do first of all, is create this new file that we're going to be writing our JavaScript inside of.

3:28Now, what I'm going to recommend you do first of all, is open up a terminal of some sort. Now, if you are using Visual Studio code, Visual Studio code actually has an integrated terminal. Write a terminal that you can just open up as another pane inside this window. And you can do that by going to terminal, new terminal, and then what you'll see is you'll have this little terminal here just like if you opened up the command prompt or terminal separately. All right, so in order to create our files, what we're going to do is just create a new folder here.

4:02So I'm going to say, make directory, and we'll call this JavaScript basics, and I'm going to hit Enter, and then I'm going to change directories and go into that directory. All right, now these commands here are going to be different if you're using a different operating system, such as Windows. Basically, all that we're doing here is just creating a new directory, and we're moving into that directory. Those are things that you can easily do just by opening up the files in their own window and right clicking and doing new folder, but you know, I usually prefer to do things this way.

4:35And then what we're going to do is we're going to open this in Visual Studio code, and you can do that by running code and the directory that you want to open up in Visual Studio code. Now chances are if you just opened up Visual Studio code, that this actually won't work for you. So what you're going to want to do is open up what's called the Visual Studio code Command Palette, and you can do that either with Command Shift P if you're on a Mac. I'm not sure what the equivalent would be on Windows, but you can always just find that by going up here to View, and Command Palette.

5:09And that'll open up this little thing where you can type in different commands for Visual Studio code in order to make certain changes. And in order to install this code command so that you can open up certain directories and Visual Studio code just by running that command, you're going to want to search for Shell Command and you're going to click on this Shell Command install code command in path. And you may have to close Visual Studio code and reopen it after that. But once you've done that, it should work.

5:40All right. So I'm going to run code dot, which will open up this js basics folder that we just created. And we should see that open up in a new ID E window and you'll and you'll see js basics here with nothing inside of the folder. OK, so let's create the HTML file that we're going to be writing our JavaScript inside of. For that, we're just going to say new file, and we'll call this something like inline script.HTML, right. You can call it whatever you want. The name is not really important in this case.

6:11And then what we're going to do is just write some very basic HTML. We're going to say doc type HTML, and then we're going to have HTML tags along with head and body tags. All right, so head and body, and then inside the body, we're just going to display an H1 tag that says something like Hello JavaScript. Now, first of all, in order to open up this HTML file in your browser, which we're going to do just to make sure that everything's working here, all you need to do is right click on this file.

6:48You're going to want to say copy path, which will give you the full path for this file in your file system. And then you're going to want to open that up in a browser and paste that inside the URL and hit Enter. And you should see Hello JavaScript being displayed there. Now, we're not actually using any JavaScript to do this at this point, so let's head back and see how to do that. All right, now in order to write JavaScript inside an HTML file, you're going to need to use the script tag.

7:19So the script tag, it just looks like this, you're generally going to want to put it either inside the head or after all of your body content depending on your exact needs with it, which we'll discuss later. And inside these script tags, you can basically write whatever JavaScript code you want and that code will automatically be run as soon as you open up this HTML file. All right, so the first thing that we're going to do here is display what's called an alert.

7:52Now, an alert is just a little window that pops down. You probably see it all the time on websites asking you to do things like enable notifications for that website or asking if you want to leave the website without saving changes, et cetera. So it's just a little window that's going to pop down from here. And the way that we display that window in JavaScript, it's actually very simple, is we're just going to say alert and put parentheses after it. We'll discuss what exactly this means later on. This alert thing is basically a function that we're calling for those of you who are already familiar with those concepts.

8:26And then inside here, we're going to have quotation marks. And these can either be single or double quotes. It's going to make very little difference in our case here and we'll just say something like Hello. So what you're going to see is if you go back now to your browser-- and here, I'm just going to close this extra Visual Studio code window that we had from before, and if you go back to the browser now and refresh, you have to refresh it in order for those changes to take place by the way, what you're going to see is this little alert window pop down with the message that we specified there displayed inside of it, right?

9:06It just says Hello, and then when we click on OK, we'll see Hello JavaScript appear. All right, so that's how to write and run basic JavaScript inside HTML files. Another thing that I want to demonstrate here, I mentioned that this script tag could either be up here in the header or down here in the body, the reason that you would want to put the script tag inside the body, let me just show you that here, we'll say goodbye. Now, the reason we might want to do this is because quite often in JavaScript, we're going to want to interact with and manipulate elements inside our own site, right?

9:43So we might want to change the text let's say, that's inside this H1 heading, and the problem with doing that is if we try and run that code up here inside the script in the header tag, this H1 heading won't actually exist at that point, right. So basically, by putting the script down here at the bottom, it waits for everything else to run and render in the browser. And that means that if we wanted to write some code that changed the text inside this H1 heading, the heading would already be there for us to manipulate.

10:15That's a finer point that we'll touch on much later on, so don't worry too much about it. Now, for the time being, just know that when you have inline JavaScript scripts, which we specify in between script tags, you can either have that in the header or in the body tag. And in the body tag, you'll want to have that generally speaking, underneath all of the actual visual elements for the page. Not always, but generally speaking. So now that we've seen how to write in line JavaScript scripts, and these are very, very simplistic scripts, the point here is mainly just to show you the different ways that you can run JavaScript code.

10:53We're not really worrying right now about actual JavaScript syntax. The next thing that we're going to take a look at is how to write our JavaScript in an external file and import it into an HTML file. So let's create another HTML file here. We're going to say external-script.HTML, and then we're also going to create another file, which we'll call something like my-script.js. All right, so JavaScript files almost always end with this .js suffix, and that just designates them as JavaScript file, and make sure that Visual Studio code or whatever ID that you're using knows what syntax highlighting to apply.

11:36All right, so what we're going to do is inside this my script file that we just created, we're going to write some basic JavaScript. Now, instead of doing the alert thing, we're going to instead say console.log and we'll say Hello from an external script. All right, now you might be wondering what console log does. If you don't already know them, we'll see once we import this file into our HTML and run it. So let's head over to external-script.HTML now.

12:07And what we're going to do, we're going to specify a basic HTML file just like we did before with HTML, head and body. All right, so inside the body, we'll just have a basic H1 tag that says Hello JavaScript. And then in order to import this my scripts file and run it inside our HTML file here, what we're going to do is say script, right?

12:37So we still use that script tag just like we did when we wanted to write an inline script in here. But instead of just closing this off and writing JavaScript inside of here, we're going to add an attribute to this script element and say source equals and then we'll say ./my-script.js. All right, now what we're doing here, this source attribute tells our browser to import this JavaScript file and run its contents. So what you're going to see is if you get the path for this external-script.HTML, and go back to the browser and paste it in here, you're going to see Hello JavaScript again.

13:19And you're not going to see the alert because remember, we did console.log instead of alert. So in order to see the message that we put Insight console.log, you're going to want to open up the inspector window and go to console. All right, and then inside of there, you'll see Hello from an external script. So console.log has the effect as we've seen of simply logging out a string inside the console here. And it's a very, very frequently used thing in JavaScript for doing things like debugging, right.

13:51If you're writing a large program it can often be very helpful to log out the value of some variable to the console so that you can see what that variable's value is at one point in time. All right, so we've seen how to do internal scripts and external scripts in JavaScript, and we've also seen how to use this alert function, and this console.log function to print out messages in different ways in the browser. All right, so I hope this has been informative for you, and I'd like to thank you for viewing.

0:00[MUSIC PLAYING] So at this point, we've seen three different ways to write and run JavaScript code. We saw how to run JavaScript code in the browser console, and we've seen how to run it both in inline and external scripts in conjunction with HTML files. So the next thing that we're going to take a look at here is how to run JavaScript on the backend.

0:30Now I'm doing this because I realize that for many of you, your main motivation for learning JavaScript may well be to use it on the back end. So I'm going to be showing you right now two different ways of running JavaScript code using Node.js. Now the first thing you're going to want to do is actually download and install Node.js on your computer. And what you're going to want to do first of all is find out whether you already have those things installed. You may well already have them installed, and in that case, you may not need to download and install it as I'm going to show you.

1:02So the way that you're going to find out whether you have Node installed is by typing node -v in your terminal. And if you have Node installed, what it will do is show you the current version of Node that you have installed. Now the version that I have here is almost up-to-date. The current version is actually 16.14 at the time of recording. At the time you're watching this, it's probably something higher. But you're just going to want to make sure that you have a fairly up to date version, preferably V16 or higher as the first number.

1:36And the other thing that you're going to want to check as well is the version of NPM. Now we haven't actually talked about what NPM is. Basically, NPM is a tool that you can use in conjunction with node to install other people's code into your projects. We'll talk about this in much more detail later on. But for now, you're just going to want to run NPM -v. And if you have node and NPM installed, you should see a version for that as well. If you just see something like command not found, then that means you don't have it installed, and you'll need to do the instructions I'm about to show you.

2:14So assuming that you don't have node and NPM installed, what you're going to want to do is go to nodejs.org and you're going to want to download it. Now, on this page there are two main options that you have for downloading Node.js. One is the long-term support version and the other is what's called the current version. Now for most people, as Node.js' website itself says, the long-term support version is going to be what's recommended. It says recommend for most users.

2:45So what I'm going to recommend you do is click on this button, which will download the package for installing Node.js. And once that's completed, you're going to want to click on that and it will walk you through the installer wizard. Now if you are feeling more adventurous-- I wouldn't recommend this right now, but if you ever want to work with the latest features of Node.js, all you would need to do is just come in here and select the current version instead. And again, you're probably going to be seeing different versions of this than I am right now because chances are, versions will have advanced quite a bit since I recorded this.

3:19But everything that I'm about to show you will still work exactly the same way. So let's click on the installer that we just downloaded, and what that's going to do is open up the installer wizard. We're just going to click on Continue, Continue, Agree, and Install. And what that will do is it'll probably ask you for your password, so I'm going to enter mine there. And then what we're going to see is it'll just install everything for us. It usually takes a few seconds max. And then, of course, depending on your operating system, you're going to want to follow the directions that it displays here.

3:55I've already done that myself, so I'm not going to do that again. And we're just going to click on Close. So now that we've installed Node.js, we should be able to go back to our terminal here and we may want to close it and reopen it just to restart the terminal. Oops. It looks like we need to click on the trashcan button instead. And then we'll open up a new one here. And now what should happen is if we run node -v, we should see that we have the latest version that we saw inside here-- the long-term support version that is displayed there.

4:27And if you run npm -v, you may see a different version there as well. Now NPM is actually bundled with Node, so by installing Node as we just did, you're going to have access to NPM as well. You don't need to install that as a separate thing. So now that we've installed Node.js and NPM locally, I'm going to show you how to run backend JavaScript code using Node. Now I just want to preface this by saying that in general, JavaScript syntax is going to be the same between the front end or the back end.

4:58But obviously, there's going to be specific things that you'll only be able to do on Node or things you'll only be able to do on the front end. An example of that might be something like manipulating elements on the front end which, obviously, you wouldn't be able to do on the back end because on the back end, you're just on a server. There's nothing visible to manipulate. And on the server, that would be something like moving files around or connecting to a database. So there's going to be different tasks that you perform depending on whether you're on the front end or the back end, but the actual JavaScript syntax you're going to be working with will generally be the same.

5:37So we saw earlier how to run JavaScript code in the browser's console. And as a matter of fact, Node also has a console of its own. The way that you get to that console is simply by typing node inside your terminal and hitting Enter. And what that will do is it'll open up what's called a Read, Evaluate, Print, Loop-- a REPL-- for you where you can just type in JavaScript statements and see them evaluated. So we're just going to use the same example that we did inside our browser's terminal.

6:09We're going to say let x equal 5, and we'll hit Enter. We'll see that same undefined output there, which just means that there was no output from this statement. And then we're going to say x times 2 and hit Enter, and we'll see that that prints out 10. You can do the same thing by saying x times 500. Now you may have noticed earlier that when I ran x times 2 in the browser, I didn't run it with a semicolon, and that's because in JavaScript, the semicolon at the end of lines is optional.

6:43Unlike in languages like Java where you have to have that semicolon or it'll give you an error, in JavaScript, we can either add it or leave it off. Although in general, I always recommend adding it because it just makes sure that your code is going to be interpreted correctly. So anyway, that's how you run JavaScript code inside the Node terminal. This can be very useful if you just want to test out a given JavaScript expression to see if it works the way you think it does just like we saw on the front end.

7:13So let's exit this Read, Evalute, Print, Loop by hitting Control-C. And we're going to have to hit it twice in order to exit. And then we'll type clear to clear the terminal. So the next thing that we're going to take a look at is how to run JavaScript code in Node.js by writing it in a separate file. So just like we were able to write separate JavaScript files and run them on the front end by simply importing them using this script source thing that we saw earlier, on the back end, we're able to do the same thing.

7:47And to do that, what we'll do is just say new file. We'll say node-script.js. And inside here, we'll say something like let x equal 5, let y equal-- I don't know-- 12. You can pick whatever numbers you want here. And then what we'll do is say console.log log, and we'll say the sum is, and we'll put a colon there. And then we'll say in parentheses, x plus y. We'll talk about why we had to put parentheses there in just a minute, but now that we've written this very simple Node script, the way we can run this is by opening up our terminal and typing node, and then specifying the name of the file we want to run.

8:30So I'm going to say ./node-script.js and hit Enter. And we'll see that it says the sum is 17. And this is ./ is optional too, by the way. You can just say node node-script.js. The ./ just makes it clear that it's inside the current directory. So that's how you run specific JavaScript files in Node.js. And one thing that you're going to notice is that the console.log that we saw earlier on the front end when we wrote inside my-script.js console.log, "Hello from an external script," we saw that this logged out this message here to the browser's console.

9:10Now in Node.js, if you say console.log, as we've seen, it's going to log that out right underneath where you run the script. So again, this can be a very useful way to troubleshoot node programs. You can use it to see the value of different variables at different times, you can use it to check if a given piece of code is getting called. It's really just a useful troubleshooting tool, and it's also used in the scripts that are meant to have some kind of output to communicate to the user. Like if we wanted to write a web server, which we'll learn how to do later on, you'd want to use console.log with a message saying something like the web server is now up and running in order to tell whoever is running that script that everything went as expected and the script is successfully run.

9:56So that's how to run code in Node.js. And just to be clear, the code that we wrote inside my-script.js, we can run that as well by simply saying my-script.js, and hitting Enter. And we'll see "Hello from an external script" printed out to the console. So there are going to be a lot of cases where the JavaScript code you write can be run either on the front end or on the back end, although as you start to actually write full stack applications with JavaScript, the different duties of the front end and back end are going to start to diverge.

10:29The front end will generally be doing more DOM manipulation, and the back end will be doing things, as I said, like working with files, connecting to databases, and so on. But that's just something I wanted to point out in case you were wondering. Yes, we can run this frontend script from the back end as well. So just to review here, we saw several different ways of running JavaScript code. One was inside the browser's terminal. So in order to do that, you're just going to want to open up the inspector window, open up console, and you can run whatever JavaScript you want right here.

11:03Next, we saw how to run JavaScript from inside an inline script that we write in our HTML. We saw that as soon as we loaded this HTML file, it ran whatever JavaScript it found inside these script tags. After that, we saw how to run JavaScript using an external script. So we wrote our JavaScript and HTML in separate files, and imported the JavaScript into our HTML file in order to run it. And just like with the inline scripts, we saw that this automatically ran all of the JavaScript as soon as we opened up the HTML file.

11:36And s we moved on to the back end and saw how to run JavaScript code inside a Node.js Read, Evaluate, Print, Loop by simply typing node. And then we could run whatever JavaScript we wanted inside of here. And we also saw how to run JavaScript code written inside files with Node by saying node and then the name of the file. So node-script.js, and that runs whatever code is inside. So those weights are really the main ways that you're going to be running JavaScript code for the foreseeable future.

12:06I'm going to be using this in different examples depending on the exact situation. But sometimes, I'll be showing examples in the browser console, sometimes I'll be writing them in separate files, sometimes I'll be writing them in as inline scripts in HTML. It's really going to depend on the situation. But what we've seen here, at least while you're learning the basics of JavaScript, is going to constitute the vast majority of situations where we'll need to run JavaScript. So anyway, I hope this has been informative for you, and I'd like to thank you for viewing.