Get Started with JavaScript

0:06Hi, everyone.

0:06Shaun Wassell here.

0:07And welcome to this course where we're

0:09going to be learning the basics of the JavaScript language.

0:12So JavaScript is an incredibly popular programming language.

0:16And, of course, depending on what statistics you look at,

0:19many consider it to be the most popular programming

0:22language currently.

0:23So it's a great language to learn,

0:25there's lots of opportunities out there

0:26for people who know how to use JavaScript.

0:29And what we're going to be covering in this first section

0:32is, a, what can you do with JavaScript.

0:35So we're going to be seeing all the different types

0:37of applications you can build with JavaScript,

0:40front end, back end, mobile, et cetera.

0:42We're going to be talking about that in some detail,

0:44along with the associated technologies.

0:47And we're also going to be seeing

0:48how to run JavaScript in all of those different situations.

0:52So we're going to be getting our hands dirty right away.

0:55And seeing how to do things like run JavaScript

0:58alongside HTML in the browser, we're

1:00going to be seeing how to run JavaScript in your computer's

1:03terminal.

1:03And we're also going to be seeing

1:05how to run server side JavaScript code, which

1:07is very exciting for many people,

1:09by writing JavaScript in separate files

1:12and running that from the terminal as well.

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

0:09All right, so to get started here,

0:10the first thing I'd like to talk about

0:12is a question that almost everybody

0:14has when they start learning JavaScript

0:16or are interested in doing so.

0:18And that is, what can you do with the JavaScript language?

0:22What is this language good for?

0:24Well, the good news there, if you've already

0:27decided to learn JavaScript, is that JavaScript can be used

0:30for pretty much everything.

0:33And while that's a bit of a simplification,

0:36it's really not that much of an exaggeration.

0:39There are really very few situations where it's not

0:43possible to use JavaScript.

0:46There are a few situations where JavaScript might not

0:49be the best choice, which we'll talk about later on.

0:52But, in general, if you want to program anything,

0:55you are able to do so in JavaScript.

0:57In other words, anything that you

0:59can do with other languages like Python or Java,

1:03you can also do in JavaScript.

1:05So just to go into a little bit more detail

1:08on the main categories of JavaScript development,

1:12the first one is going to be front-end development.

1:15So front-end development with JavaScript

1:17is basically going to be using JavaScript

1:19in the user's browser to create things like websites.

1:23And this can be done either using vanilla JavaScript, which

1:28is basically just JavaScript without any additional

1:31libraries that other people have written.

1:33Or it can be done using existing libraries such as React

1:37or Angular, which are things that we'll talk about later on.

1:41So that's the front end, writing JavaScript in a situation where

1:44it's going to be interacting with visual elements

1:48that users will be seeing.

1:50But you can also use JavaScript on the back end.

1:54And this is going to involve things

1:55like interacting with databases, managing file systems,

2:00creating web servers, et cetera.

2:03And this is actually fairly new territory for JavaScript.

2:07We'll get into that in a little more detail later on.

2:09But, really, this is something that before, let's say over

2:14a decade ago, you would have had to do

2:15with a different language.

2:17You would have had to learn a different language

2:20for the front end and the back end.

2:22But JavaScript can be used on both of those these days.

2:25Now, in addition to the front end and back end,

2:27JavaScript can also be used to develop mobile applications.

2:32Now this is something that a lot of people

2:34don't realize because it used to be that if you wanted

2:38to write an iPhone application, let's say

2:40you had to learn Swift.

2:41And trust me, as a previous Swift developer

2:43working with Swift and developing

2:45for a single platform, for the iPhone platform was unpleasant.

2:51It meant that you had to learn a completely different language

2:53in order to write apps.

2:54But you don't have to do that anymore because JavaScript

2:58allows us to do this using--

3:00there's a few different technologies

3:02that let us do this.

3:03But the main one is going to be React Native, which

3:06I'll talk about in more detail in just a minute as well.

3:09And, finally, the last main category

3:12of JavaScript development is going

3:15to be for writing desktop applications.

3:18Now this is different from front-end applications

3:21because desktop applications actually--

3:24you actually download them onto your computer and run them.

3:27They're not something that you open up in a browser.

3:30So this is a situation where before JavaScript came

3:33into the picture, you would have had to write desktop

3:35applications using Java or C++ perhaps.

3:39But with JavaScript now as well as some other technologies

3:43that we'll talk about later on, we're

3:45now able to write desktop applications using JavaScript.

3:49So, anyway, these are really the four main buckets

3:52of JavaScript development.

3:54And chances are you'll find yourself

3:57working on more than one of these at a time.

3:59For instance, if you write front-end

4:01and the back-end code, that's the-- that's generally

4:04what full-stack developers do.

4:06So in other words, you'll use JavaScript

4:08on both the front end and back end.

4:11That may also include developing for mobile and desktop as well.

4:15I've definitely worked on Teams, where we use a single codebase

4:19to develop for all four of these platforms at once.

4:23But, in general, JavaScript developers, at least at first,

4:26tend to focus on one of these things.

4:29So maybe they choose to develop for the back-end

4:32and write web servers or some kind of back-end management

4:35system.

4:36Maybe they choose to focus on more

4:38of the visual aspect of things and write

4:41front-end applications, or maybe they

4:43go the mobile or desktop route and develop applications

4:47for those using JavaScript.

4:49So, anyway, that's just something

4:50to keep in mind that JavaScript can really be

4:52used for all of these things.

4:55All right, and, additionally, while these are just

4:57the main buckets that you can develop for in JavaScript,

5:01a good rule of thumb is that pretty much anywhere where

5:04you can write code you can run JavaScript.

5:08And as I said before, there are some situations

5:10where you're not necessarily going

5:12to want to use JavaScript, where JavaScript might not

5:15be the best choice for the situation.

5:18And for this, I'm talking about situations

5:21like really performance-intensive

5:23applications where you really need

5:25the ability to optimize behind the scenes

5:28and control the exact performance of the language.

5:31JavaScript doesn't really allow you to do that,

5:34the same as other languages like C++ might allow you to do it.

5:38So, anyway, just something to keep in mind,

5:40these are the four main buckets.

5:42So what I want to do now is just go through each one in turn

5:45and discuss it a little bit more deeply, just talk about some

5:48of the main technologies that you might hear

5:51about in each bucket and so on.

5:53So with the front end, you're using JavaScript

5:56to develop front-end applications, which, again, are

5:59going to run inside the user's browser,

6:01chances are you're going to be using

6:03one of a few main technologies.

6:06Now some of the most common ones that you've probably heard of

6:10are React.

6:12React is currently the most popular front-end library

6:16that's used for creating front-end applications.

6:18And it is really based off of JavaScript.

6:21So you need to know JavaScript first

6:24before you move on to learning these technologies

6:26such as React.

6:28Another one that you might hear about a lot is Angular.

6:31That's just a competitor to React, if you will.

6:34And there are some other ones that have come on the scene

6:37fairly recently such as Vue.

6:40Another one is Svelte, which I'm a really big fan of.

6:42And there are some older ones as well, such as Ember.js.

6:46And, really, all of these are just different solutions

6:52to the same problem of how to efficiently develop

6:56a front-end application using JavaScript.

6:58So I'm not going to go too much into detail

7:00on any one of these.

7:01In fact, I have courses on pretty much all

7:03of these except for Svelte currently,

7:05although I'd like to put that in at some point.

7:08So if you want to check those out,

7:09I highly recommend, as I said, learning JavaScript first.

7:13But these are some of the technologies

7:15that you can move to once you've mastered

7:18the basics of JavaScript.

7:19So, anyway, in addition to all of these technologies, which

7:24are all libraries or frameworks that you can use to develop

7:29front-end applications more easily,

7:31you may also hear about something

7:32called vanilla JavaScript, or vanilla JS,

7:36as it's sometimes referred to.

7:38Now, vanilla JS is basically just a fancy term

7:42for using JavaScript without any external libraries.

7:45So this is really just a JavaScript purist kind of thing

7:48where people want to develop their applications

7:51from the ground up and have control

7:53over every part of their application

7:55without relying on external libraries.

7:58Now, the reason that there's a term for it

8:00instead of just saying regular JavaScript

8:03without any libraries is because as a rule,

8:05JavaScript developers, and many other developers as well

8:08for that matter, have found that managers

8:11tend to like libraries.

8:14They tend to look at libraries as a solution

8:17to this or that problem.

8:19And so vanilla JS was created as a term

8:23to use so that managers think you're

8:25using a library when, actually, you're just building it

8:28from the ground up.

8:29OK, so it's a way to get around corporate bureaucracy,

8:33if you will.

8:34So those are the main technologies and terms

8:36in the front-end universe of JavaScript.

8:39Again, there's other courses that I have already

8:41published on those if you want to check those out.

8:44But I highly recommend learning regular JavaScript first,

8:47at least the basics of it.

8:49So let's talk about the back end.

8:51The back end in JavaScript is primarily

8:55based off of using a runtime called Node.js.

8:59Now let me just talk about that in a minute

9:01here after I write back end.

9:03There we go.

9:03So Node.js, as I said, is a JavaScript runtime.

9:09And we'll go into more detail on what that means later on.

9:12But, basically, Node.js allows us

9:14to run JavaScript outside of the browser.

9:19So that's something I didn't mention previously when we were

9:22talking about the front end.

9:23But JavaScript was originally created

9:25to run inside the user's browser.

9:28So in other words, if you had something

9:30like Internet Explorer or Chrome or Firefox

9:33or whatever kind of browser your operating system tends to use,

9:38then that browser would include the runtime

9:40necessary for running JavaScript code.

9:44So in other words, if you wanted to run JavaScript code,

9:47you would just download the browser

9:48and run the code inside the browser.

9:51Now that's great when you want to run JavaScript code

9:54on the front end, if you want to create a website using

9:57JavaScript, let's say.

9:58But when you want to do things like create web servers using

10:02JavaScript, that really didn't work because in that case,

10:06you would have to have a server running

10:07inside the browser, which just isn't really a good idea.

10:11So Node.js, as I've said, is a runtime

10:14that allows us to run JavaScript outside the browser.

10:17And there's a number of other libraries

10:19that go along with Node.js that make it easier

10:22to perform specific tasks.

10:25One that you'll probably hear of a lot is called Express.

10:30And Express is a library that just

10:32makes it a lot easier to write web servers using JavaScript.

10:36It is to the back end what things like React

10:39are to the front end.

10:40It just takes a lot of the nitty-gritty details

10:44away from the developers so that you

10:45don't have to worry about them and can

10:47focus on the application that you're trying to build.

10:51Express and some of the other related technologies,

10:53we'll cover in a lot more detail later on.

10:56But, anyway, that's the back end.

10:58If you want to develop back-end code in JavaScript,

11:00chances are you're going to need to install

11:02Node.js, which is something that I'll cover in a little while.

11:05And, again, that just allows you to run

11:07JavaScript code in a similar way to how you'd

11:09run code for Python or Java.

11:13All right, so moving on to the mobile side of things,

11:16if you want to write iPhone apps or Android apps

11:18or whatever kind of application using JavaScript,

11:22chances are you're going to be using

11:24a library called React Native.

11:28Now there are other technologies out there.

11:30One that you might hear of is Ionic, which is pretty popular.

11:34And another technology called NativeScript

11:38serves a similar purpose.

11:39But, in general, I personally have

11:41found that React Native is going to be hands

11:44down the easiest with the obvious caveat

11:46that in that case, you would have to learn React

11:49as well since React Native builds

11:51on the shoulders of the React library.

11:53But, in general, if you're going to write mobile applications

11:56using JavaScript, you're going to be

11:57using technology similar to these technologies

12:01that I've talked about here.

12:02All right, now the interesting thing

12:03about developing mobile apps using JavaScript

12:06is that, in general, if you do things right,

12:09this actually allows us to share code between our front-end

12:13and our mobile apps.

12:15So I've definitely worked on projects before, as I said,

12:19that have a single codebase that you simply

12:23build in different ways.

12:24And you can publish that either as a front-end browser

12:27application or as a mobile app.

12:30And that's obviously way beyond the scope of what

12:32we're talking about right now.

12:34But the idea that you can have a single codebase that

12:38can be built in order to publish different types of applications

12:42is pretty cool in my opinion.

12:44So you just have one codebase, and you

12:46can publish that either as a front-end application

12:49or as an iPhone or Android or whatever application as I said.

12:54All right, so, anyway, that's mobile development

12:56with JavaScript.

12:58I'm not going to go into much more detail on that right now.

13:01So let's cover the final bucket, so to speak,

13:04of JavaScript development.

13:05And that is desktop development, so, in other words,

13:09creating desktop applications that you can open up

13:12in the same way that you open up things like Chromebooks

13:14or Microsoft Word or whatever.

13:16That's all possible using JavaScript now as well.

13:21So you can develop desktop applications with JavaScript.

13:24And, in general, the most popular technology

13:27for doing this is called Electron.

13:30So Electron, if you hear about it,

13:32basically, what Electron does is it takes front-end applications

13:36such as React applications, and it builds them in such a way

13:39that they can be opened and downloaded and installed just

13:43like desktop applications.

13:45And, in fact, an application that uses Electron in order

13:49to achieve this functionality that you've almost

13:51definitely heard of is Slack.

13:54And I believe similar applications like Discord

13:57use Electron as well.

13:59And the nice thing here is that, really, these electron

14:02applications that you can open up on your computer look

14:05and behave almost identically to how you'd

14:08expect a desktop application written in some other language

14:11to work as well.

14:12So if you were to write it in JavaScript or C++ or Swift,

14:17you're going to save yourself a lot of trouble just using

14:20Electron and JavaScript because you'll already know JavaScript.

14:24You won't have to go and learn another programming language

14:26just to develop a desktop application.

14:29So, anyway, we've covered the four main buckets

14:31of JavaScript application here.

14:33Just to give you an idea of a few of the other types

14:36of JavaScript development that you

14:38might want to do at some point, I've

14:40seen JavaScript used for things like internet

14:42of things, where you basically just write

14:46JavaScript on a Raspberry Pi.

14:47And you can use that to specify the logic

14:50for running your Raspberry Pi.

14:52JavaScript can be used for things like wearable devices.

14:55And these aren't as popular as they used to be,

14:58things like the Google Glass.

15:00But it can be used for those kinds of things as well.

15:03Essentially, JavaScript can be used

15:06to write applications for anything that runs code,

15:09obviously, within reason.

15:11There are certain things like integrated circuit

15:13boards and Arduino.

15:15You're probably not going to be able to use

15:17that one with JavaScript.

15:19You'll probably have to learn C or whatever languages those

15:22are using these days.

15:24But, again, JavaScript in general

15:25can be used for pretty much any application

15:28that you'll want to create.

15:30So I hope this has been informative for you.

15:32And I'd like to thank you for viewing.

0:08All right, so now that we've discussed

0:10some of the basic uses of the JavaScript language,

0:13we're going to jump right in to seeing how to write and run

0:16some JavaScript code.

0:17Now there are a few different ways to do this.

0:21And the first way that we're going to take a look at

0:23is running JavaScript inside the browser's terminal.

0:27All right, now a big question that a lot of people

0:30ask me when they're getting started with JavaScript

0:32is, what do I need to download in order

0:34to run JavaScript code?

0:35And this question generally comes from the idea that

0:40in order to run things like Java or C++,

0:43you actually need to download a compiler,

0:46which is usually integrated into an IDE of some sort,

0:49in order to run your code.

0:51But in JavaScript, many people are surprised to find,

0:54you don't need anything other than a basic web browser

0:58to run JavaScript code.

1:00All right, so let's jump right in.

1:01What you're going to want to do is open up a browser.

1:03I highly recommend using an up to date version of Chrome.

1:07Although other things like edge or Firefox

1:10will work as well for these basic cases.

1:13And what you're going to want to do

1:14is open up the browser's inspector window.

1:17You can usually do that by right clicking and going to Inspect.

1:22That might be different for different browsers,

1:24but it's going to be something like that.

1:26And once you have this Inspector window open--

1:29that's what this little thing here is called.

1:31And by the way, you can usually change the position of this

1:34by clicking this little three dot thing here, and selecting

1:39whether you want it on the side or on the bottom

1:42or as a separate window, you can do

1:44is well if you click this here.

1:46But I usually prefer to have it on the bottom

1:48just for running basic JavaScript because it's

1:51just easier to read than if you have it over on the side.

1:55OK, so once you have this open, you're

1:57going to want to go to Console.

1:59And if this is your first time working in the browser Console,

2:02basically what this allows you to do--

2:05it's sort of like a command prompt for the browser.

2:07So if you've ever worked in a terminal inside your computer

2:11and use that to do things like move files around,

2:13run certain commands, et cetera, that's

2:15essentially what this is for the browser that you're inside of.

2:20Now I'm going to Zoom in here using Command plus.

2:23Although the hockey might be a little different

2:25on your computer, depending on the operating system.

2:27I'm on a Mac here.

2:29And what we're going to do is we're going

2:31to run a very simple command.

2:33We're going to say Let x equal 5,

2:38and put a semicolon after that.

2:40And we're going to hit Enter.

2:41And then we're going to say x times 2.

2:46All right, now what we've done here,

2:47these two things that we've just typed in and run

2:50in the browser's console are valid JavaScript statements.

2:55All right, so just to go back to our command

2:56prompt or terminal metaphor, if you were running commands

3:00inside a terminal on a Mac, let's say,

3:03you would be running basic Linux commands.

3:06The terminal in a browser, however,

3:08wants you to run JavaScript statements.

3:12Now when you run a JavaScript statement in the terminal here,

3:16it's going to show you the output of that statement.

3:19So what we did here when we said let x equal 5,

3:23this is how we declare variables in JavaScript.

3:27Now, we'll talk in much more detail

3:28about how to declare variables in JavaScript,

3:31and some of the sometimes peculiar details

3:34about doing that in JavaScript.

3:36But this is how you define a variable.

3:38We've defined a variable called x and assigned the value

3:415 to it.

3:42And what the console did is it printed

3:44out this undefined thing.

3:46Now, undefined basically just means

3:48that there was really no output from the command

3:51that you just ran.

3:53So while this command that we just ran

3:55did something behind the scenes by creating

3:57a new variable called x, it didn't actually

4:00have any output, which is why we see this undefined thing.

4:03All right, so that's all that this means right here,

4:05is that there was really no return value, so to speak,

4:09of this expression above.

4:12And then what we did is we used the variable that we defined,

4:16which was called x, and we multiplied it by 2.

4:19Now if you're already familiar with programming concepts,

4:21just bear with me here.

4:22I'm well aware that these are pretty simple demonstrations.

4:26But what I'm demonstrating here is more

4:28the idea of running JavaScript inside a console,

4:31than the actual concepts of declaring and using variable.

4:35So anyway, what we've done here is

4:36we've multiplied our variable x by 2.

4:39And we see that our statement actually

4:41has some output this time, it's printed out 10 to the console.

4:45And if you wanted to run something else,

4:47like x times 100, you would see the output there as well.

4:52And that's how you run JavaScript

4:54in your browser's terminal.

4:56All right, now if you want to clear out your terminal,

4:58you can always click on this little Clear console thing

5:01here, and that will clear your console for you.

5:04All right, now you might be wondering

5:06what you would want to run JavaScript in the console

5:08for, right.

5:09Why would you ever want to open this up and run JavaScript

5:12statements inside of here.

5:13Well, there's a few different reasons

5:15why you would want to do that.

5:16One reason, which I actually use quite a lot,

5:18is to test out different JavaScript statements.

5:21So if I'm writing a particularly long and complicated JavaScript

5:25statement, or if I want to make sure

5:27that I understand how some kind of built-in JavaScript function

5:31works, then usually what I'll do is

5:33I'll just open up my browser's console

5:35and run some JavaScript inside there

5:38to see if it works the way I think it does.

5:40All right, so if I were to type something a little more

5:42complicated like this-- and don't

5:44worry too much about what this is doing right now.

5:47Just know that this is all valid JavaScript.

5:50If I wanted to test and make sure that this statement worked

5:53the way I thought it did, I would just

5:55type it in as I did there, and I would see the output

5:58down below.

5:59Now, we'll talk much more about what's

6:01going on here later on when we learn more

6:03about JavaScript syntax.

6:05But anyway, that's the first main reason

6:07why you'd want to use the console, just

6:08for demonstration, as I'll be doing throughout this course.

6:11And also just to test your knowledge of JavaScript syntax,

6:15if you have a question about it before,

6:17putting that in a program and hoping that it works.

6:20Now, the other reason that you might

6:21want to run code inside the console

6:23here is to manipulate the website that you're on.

6:27So let's say that you're on a website

6:29and a pop up window shows up, well,

6:31if you know the right JavaScript to run,

6:33you can actually use that to hide annoying paywall pop

6:37ups sometimes, depending, of course,

6:39on how the website is built.

6:40We're not going to go into detail about that right now,

6:43but that's just something to keep in mind,

6:45is that this allows you to actually manipulate the website

6:49that you're currently on.

6:50So you can find different HTML elements,

6:53you can manipulate their CSS, you

6:55can remove elements, et cetera.

6:57And that's really getting into the domain of vanilla

6:59JavaScript, actually manipulating

7:02the DOM using JavaScript.

7:04And that's how to run JavaScript code inside the console.

7:08So we've run our first few pieces of JavaScript code.

7:11So I hope this has been informative for you,

7:13and I'd like to thank you for viewing.

0:00[MUSIC PLAYING]

0:08All right, so we've seen how to run

0:10basic JavaScript inside the browser's console, so let's

0:15move on to taking a look at two more

0:17different ways of running JavaScript code

0:19on the front end.

0:20Now, in general, these are going to be the ways that you're

0:23going to want to write and run your JavaScript code since this

0:29is where we actually build applications.

0:31Running JavaScript inside the browser's terminal as we saw,

0:34is usually limited to just testing out

0:37little JavaScript statements.

0:39If you're unsure of something or manipulating the page once

0:43it's already being displayed.

0:44So anyway, what we're going to do here

0:47is we're going to see how to write and run JavaScript

0:51in the context of an HTML file.

0:54Now, there are two main ways to do this depending

0:56on your preferences, all right.

0:58One way is to write your HTML file.

1:02So you're going to have HTML with all the different tags

1:06in there, a head tag, a body tag, different elements inside

1:10of there.

1:11And somewhere inside of there, you're

1:13going to have some JavaScript that

1:14will be run automatically when that file is opened up

1:18in a browser.

1:19We'll see what that looks like in just a minute.

1:22But that's called inline scripts, OK.

1:25So they're just scripts that you write

1:27in the same file as your HTML.

1:30Now the other way, and this is generally the way that you'll

1:33want to do things in bigger applications,

1:36is to define your HTML and your JavaScript in separate files

1:41and import your JavaScript into the HTML file using

1:46a 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

1:54file over here.

1:57Both of these would have some code inside of here.

1:59The HTML would have a bunch of tags.

2:01And somewhere inside of here, it would

2:03have a tag that tells the browser

2:05to import this JavaScript file and run all of its contents.

2:11All right, and this one, we'll call external scripts.

2:14So those are the two main ways of writing and running

2:18JavaScript code in the browser as actual files.

2:22So let's take a look and see what both of these

2:25are going to look like.

2:26We'll start off with inline scripts here

2:28and then we'll move on to external scripts.

2:30Now, before we do this actually, one question

2:33that you're inevitably going to have is what IDE or what editor

2:38should I use to write and run JavaScript code?

2:41Well, the fact is that there are a lot of options out there.

2:45The one that I'm going to recommend personally

2:47is Visual Studio code.

2:49You can find that just by googling Visual Studio code

2:52download.

2:54But there are also some other ones

2:55such as Sublime as a popular one, Adam is a popular one,

3:00and of course, you can use pretty much any text editor

3:04to write JavaScript code.

3:06But I like Visual Studio code just because of all

3:08the features it's got.

3:09And frankly, I'm just used to working

3:12with it as are many other JavaScript developers.

3:15So feel free to download and use Visual Studio code.

3:18That's what I'm going to be doing here myself.

3:21So what we're going to do first of all,

3:23is create this new file that we're

3:25going to be writing our JavaScript inside of.

3:28Now, what I'm going to recommend you do first of all,

3:31is open up a terminal of some sort.

3:33Now, if you are using Visual Studio code,

3:36Visual Studio code actually has an integrated terminal.

3:39Write a terminal that you can just

3:40open up as another pane inside this window.

3:44And you can do that by going to terminal, new terminal,

3:48and then what you'll see is you'll

3:50have this little terminal here just

3:52like if you opened up the command prompt or terminal

3:56separately.

3:56All right, so in order to create our files, what

3:58we're going to do is just create a new folder here.

4:02So I'm going to say, make directory,

4:05and we'll call this JavaScript basics,

4:09and I'm going to hit Enter, and then

4:10I'm going to change directories and go into that directory.

4:14All right, now these commands here

4:15are going to be different if you're

4:17using a different operating system, such as Windows.

4:20Basically, all that we're doing here

4:22is just creating a new directory,

4:23and we're moving into that directory.

4:25Those are things that you can easily do just

4:27by opening up the files in their own window and right

4:31clicking and doing new folder, but you know,

4:33I usually prefer to do things this way.

4:35And then what we're going to do is

4:36we're going to open this in Visual Studio code,

4:40and you can do that by running code and the directory

4:44that you want to open up in Visual Studio code.

4:47Now chances are if you just opened up Visual Studio code,

4:50that this actually won't work for you.

4:52So what you're going to want to do

4:54is open up what's called the Visual Studio code Command

4:57Palette, and you can do that either with Command Shift P

5:00if you're on a Mac.

5:01I'm not sure what the equivalent would be on Windows,

5:04but you can always just find that by going up here to View,

5:07and Command Palette.

5:09And that'll open up this little thing

5:11where you can type in different commands for Visual Studio code

5:14in order to make certain changes.

5:16And in order to install this code command

5:20so that you can open up certain directories and Visual Studio

5:22code just by running that command,

5:24you're going to want to search for Shell Command

5:27and you're going to click on this Shell Command install code

5:31command in path.

5:32And you may have to close Visual Studio code and reopen it

5:36after that.

5:37But once you've done that, it should work.

5:40All right.

5:41So I'm going to run code dot, which

5:42will open up this js basics folder that we just created.

5:46And we should see that open up in a new ID E window

5:50and you'll and you'll see js basics here

5:52with nothing inside of the folder.

5:55OK, so let's create the HTML file

5:58that we're going to be writing our JavaScript inside of.

6:01For that, we're just going to say new file,

6:03and we'll call this something like inline script.HTML, right.

6:07You can call it whatever you want.

6:09The name is not really important in this case.

6:11And then what we're going to do is just write

6:14some very basic HTML.

6:15We're going to say doc type HTML,

6:18and then we're going to have HTML tags along

6:21with head and body tags.

6:24All right, so head and body, and then inside the body,

6:27we're just going to display an H1 tag that says something

6:30like Hello JavaScript.

6:36Now, first of all, in order to open up this HTML

6:39file in your browser, which we're going to do just

6:43to make sure that everything's working here,

6:45all you need to do is right click on this file.

6:48You're going to want to say copy path, which

6:51will give you the full path for this file in your file system.

6:55And then you're going to want to open that up in a browser

6:58and paste that inside the URL and hit Enter.

7:01And you should see Hello JavaScript

7:03being displayed there.

7:04Now, we're not actually using any JavaScript

7:07to do this at this point, so let's head back

7:09and see how to do that.

7:11All right, now in order to write JavaScript inside an HTML file,

7:16you're going to need to use the script tag.

7:19So the script tag, it just looks like this,

7:22you're generally going to want to put it

7:24either inside the head or after all of your body content

7:28depending on your exact needs with it,

7:31which we'll discuss later.

7:32And inside these script tags, you

7:35can basically write whatever JavaScript code you want

7:38and that code will automatically be run as soon as you open up

7:42this HTML file.

7:46All right, so the first thing that we're going to do here

7:49is display what's called an alert.

7:52Now, an alert is just a little window that pops down.

7:55You probably see it all the time on websites

7:58asking you to do things like enable notifications

8:00for that website or asking if you

8:02want to leave the website without saving changes,

8:05et cetera.

8:06So it's just a little window that's

8:08going to pop down from here.

8:09And the way that we display that window in JavaScript,

8:11it's actually very simple, is we're just

8:14going to say alert and put parentheses after it.

8:17We'll discuss what exactly this means later on.

8:21This alert thing is basically a function

8:23that we're calling for those of you who are already

8:25familiar with those concepts.

8:26And then inside here, we're going to have quotation marks.

8:31And these can either be single or double quotes.

8:33It's going to make very little difference in our case here

8:36and we'll just say something like Hello.

8:42So what you're going to see is if you

8:44go back now to your browser--

8:47and here, I'm just going to close this extra Visual Studio

8:50code window that we had from before,

8:52and if you go back to the browser now and refresh,

8:55you have to refresh it in order for those changes

8:57to take place by the way, what you're

8:59going to see is this little alert window pop down

9:02with the message that we specified there displayed

9:05inside of it, right?

9:06It just says Hello, and then when we click on OK,

9:09we'll see Hello JavaScript appear.

9:12All right, so that's how to write and run

9:14basic JavaScript inside HTML files.

9:17Another thing that I want to demonstrate here,

9:18I mentioned that this script tag could either

9:21be up here in the header or down here in the body, the reason

9:26that you would want to put the script tag inside the body,

9:29let me just show you that here, we'll say goodbye.

9:33Now, the reason we might want to do this

9:35is because quite often in JavaScript, we're

9:37going to want to interact with and manipulate elements

9:41inside our own site, right?

9:43So we might want to change the text let's say, that's

9:45inside this H1 heading, and the problem

9:47with doing that is if we try and run that code up

9:50here inside the script in the header tag, this H1 heading

9:55won't actually exist at that point, right.

9:58So basically, by putting the script down here at the bottom,

10:01it waits for everything else to run and render in the browser.

10:05And that means that if we wanted to write some code that changed

10:09the text inside this H1 heading, the heading would already

10:13be there for us to manipulate.

10:15That's a finer point that we'll touch on much later on,

10:17so don't worry too much about it.

10:19Now, for the time being, just know

10:21that when you have inline JavaScript scripts, which

10:24we specify in between script tags,

10:27you can either have that in the header or in the body tag.

10:30And in the body tag, you'll want to have that generally

10:33speaking, underneath all of the actual visual elements

10:37for the page.

10:39Not always, but generally speaking.

10:41So now that we've seen how to write in line JavaScript

10:44scripts, and these are very, very simplistic scripts,

10:48the point here is mainly just to show you

10:50the different ways that you can run JavaScript code.

10:53We're not really worrying right now

10:54about actual JavaScript syntax.

10:56The next thing that we're going to take a look at

10:59is how to write our JavaScript in an external file

11:03and import it into an HTML file.

11:06So let's create another HTML file here.

11:08We're going to say external-script.HTML,

11:13and then we're also going to create another file,

11:15which we'll call something like my-script.js.

11:20All right, so JavaScript files almost always end with this .js

11:24suffix, and that just designates them as JavaScript file,

11:28and make sure that Visual Studio code or whatever ID that

11:31you're using knows what syntax highlighting to apply.

11:36All right, so what we're going to do

11:37is inside this my script file that we just created,

11:41we're going to write some basic JavaScript.

11:43Now, instead of doing the alert thing,

11:45we're going to instead say console.log

11:48and we'll say Hello from an external script.

11:54All right, now you might be wondering

11:56what console log does.

11:58If you don't already know them, we'll

11:59see once we import this file into our HTML and run it.

12:03So let's head over to external-script.HTML now.

12:07And what we're going to do, we're

12:09going to specify a basic HTML file just like we did before

12:12with HTML, head and body.

12:17All right, so inside the body, we'll

12:19just have a basic H1 tag that says Hello JavaScript.

12:28And then in order to import this my scripts file and run it

12:32inside our HTML file here, what we're going

12:35to do is say script, right?

12:37So we still use that script tag just

12:39like we did when we wanted to write an inline script in here.

12:43But instead of just closing this off and writing JavaScript

12:46inside of here, we're going to add an attribute to this script

12:50element and say source equals and then we'll say

12:54./my-script.js.

12:58All right, now what we're doing here,

13:00this source attribute tells our browser

13:02to import this JavaScript file and run its contents.

13:07So what you're going to see is if you get the path for this

13:11external-script.HTML, and go back to the browser and paste

13:15it in here, you're going to see Hello JavaScript again.

13:19And you're not going to see the alert because remember,

13:22we did console.log instead of alert.

13:25So in order to see the message that we

13:27put Insight console.log, you're going

13:29to want to open up the inspector window and go to console.

13:34All right, and then inside of there,

13:36you'll see Hello from an external script.

13:38So console.log has the effect as we've

13:41seen of simply logging out a string inside the console here.

13:46And it's a very, very frequently used thing

13:47in JavaScript for doing things like debugging, right.

13:51If you're writing a large program

13:52it can often be very helpful to log out

13:55the value of some variable to the console

13:58so that you can see what that variable's value is

14:00at one point in time.

14:02All right, so we've seen how to do

14:04internal scripts and external scripts in JavaScript,

14:07and we've also seen how to use this alert function,

14:10and this console.log function to print out

14:14messages in different ways in the browser.

14:17All right, so I hope this has been informative for you,

14:19and I'd like to thank you for viewing.

0:00[MUSIC PLAYING]

0:09So at this point, we've seen three different ways

0:11to write and run JavaScript code.

0:13We saw how to run JavaScript code in the browser console,

0:17and we've seen how to run it both in inline and external

0:21scripts in conjunction with HTML files.

0:24So the next thing that we're going to take a look at here

0:26is how to run JavaScript on the backend.

0:30Now I'm doing this because I realize that for many of you,

0:32your main motivation for learning JavaScript

0:34may well be to use it on the back end.

0:37So I'm going to be showing you right now

0:38two different ways of running JavaScript code using Node.js.

0:43Now the first thing you're going to want to do

0:45is actually download and install Node.js on your computer.

0:50And what you're going to want to do first of all

0:52is find out whether you already have those things installed.

0:56You may well already have them installed, and in that case,

0:58you may not need to download and install it

1:01as I'm going to show you.

1:02So the way that you're going to find out

1:04whether you have Node installed is

1:05by typing node -v in your terminal.

1:10And if you have Node installed, what it will do

1:12is show you the current version of Node

1:15that you have installed.

1:16Now the version that I have here is almost up-to-date.

1:21The current version is actually 16.14 at the time of recording.

1:25At the time you're watching this,

1:26it's probably something higher.

1:29But you're just going to want to make sure

1:31that you have a fairly up to date

1:32version, preferably V16 or higher as the first number.

1:36And the other thing that you're going to want to check as well

1:39is the version of NPM.

1:42Now we haven't actually talked about what NPM is.

1:45Basically, NPM is a tool that you

1:47can use in conjunction with node to install other people's

1:51code into your projects.

1:52We'll talk about this in much more detail later on.

1:56But for now, you're just going to want to run NPM -v.

1:59And if you have node and NPM installed,

2:03you should see a version for that as well.

2:06If you just see something like command not found,

2:08then that means you don't have it installed,

2:10and you'll need to do the instructions I'm

2:13about to show you.

2:14So assuming that you don't have node and NPM installed, what

2:18you're going to want to do is go to nodejs.org

2:22and you're going to want to download it.

2:24Now, on this page there are two main options

2:28that you have for downloading Node.js.

2:30One is the long-term support version

2:33and the other is what's called the current version.

2:35Now for most people, as Node.js' website itself says,

2:40the long-term support version is going to be what's recommended.

2:44It says recommend for most users.

2:45So what I'm going to recommend you do

2:47is click on this button, which will download the package

2:50for installing Node.js.

2:52And once that's completed, you're

2:54going to want to click on that and it will walk you

2:56through the installer wizard.

2:58Now if you are feeling more adventurous--

3:00I wouldn't recommend this right now,

3:02but if you ever want to work with the latest

3:03features of Node.js, all you would

3:06need to do is just come in here and select the current version

3:09instead.

3:10And again, you're probably going to be seeing different versions

3:13of this than I am right now because chances are,

3:15versions will have advanced quite a bit

3:18since I recorded this.

3:19But everything that I'm about to show you

3:21will still work exactly the same way.

3:23So let's click on the installer that we just downloaded,

3:26and what that's going to do is open up the installer wizard.

3:30We're just going to click on Continue, Continue, Agree,

3:34and Install.

3:35And what that will do is it'll probably

3:37ask you for your password, so I'm going to enter mine there.

3:40And then what we're going to see is it'll just

3:43install everything for us.

3:44It usually takes a few seconds max.

3:47And then, of course, depending on your operating system,

3:51you're going to want to follow the directions that it displays

3:54here.

3:55I've already done that myself, so I'm not

3:57going to do that again.

3:58And we're just going to click on Close.

4:01So now that we've installed Node.js,

4:04we should be able to go back to our terminal here

4:06and we may want to close it and reopen it just

4:09to restart the terminal.

4:10Oops.

4:10It looks like we need to click on the trashcan button instead.

4:13And then we'll open up a new one here.

4:15And now what should happen is if we run node -v,

4:19we should see that we have the latest version that we saw

4:22inside here--

4:23the long-term support version that is displayed there.

4:27And if you run npm -v, you may see a different version

4:30there as well.

4:32Now NPM is actually bundled with Node,

4:34so by installing Node as we just did,

4:37you're going to have access to NPM as well.

4:39You don't need to install that as a separate thing.

4:42So now that we've installed Node.js and NPM locally,

4:46I'm going to show you how to run backend JavaScript code using

4:50Node.

4:50Now I just want to preface this by saying

4:52that in general, JavaScript syntax is

4:55going 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

5:02only be able to do on Node or things

5:04you'll only be able to do on the front end.

5:06An example of that might be something

5:08like manipulating elements on the front end

5:11which, obviously, you wouldn't be able to do on the back end

5:13because on the back end, you're just on a server.

5:16There's nothing visible to manipulate.

5:18And on the server, that would be something

5:20like moving files around or connecting to a database.

5:25So there's going to be different tasks that you perform

5:28depending on whether you're on the front end or the back end,

5:31but the actual JavaScript syntax you're going to be working with

5:34will generally be the same.

5:37So we saw earlier how to run JavaScript code

5:41in the browser's console.

5:43And as a matter of fact, Node also has a console of its own.

5:47The way that you get to that console

5:49is simply by typing node inside your terminal

5:53and hitting Enter.

5:54And what that will do is it'll open up what's called a Read,

5:57Evaluate, Print, Loop-- a REPL--

6:00for you where you can just type in JavaScript statements

6:03and see them evaluated.

6:05So we're just going to use the same example that we did

6:07inside our browser's terminal.

6:09We're going to say let x equal 5, and we'll hit Enter.

6:14We'll see that same undefined output there,

6:16which just means that there was no output from this statement.

6:20And then we're going to say x times 2 and hit Enter,

6:24and we'll see that that prints out 10.

6:26You can do the same thing by saying x times 500.

6:29Now you may have noticed earlier that when I ran x times 2

6:34in the browser, I didn't run it with a semicolon,

6:37and that's because in JavaScript,

6:38the semicolon at the end of lines is optional.

6:43Unlike in languages like Java where

6:45you have to have that semicolon or it'll

6:47give you an error, in JavaScript,

6:49we can either add it or leave it off.

6:51Although in general, I always recommend

6:54adding it because it just makes sure

6:55that your code is going to be interpreted correctly.

6:58So anyway, that's how you run JavaScript code inside the Node

7:02terminal.

7:03This can be very useful if you just

7:04want to test out a given JavaScript expression

7:06to see if it works the way you think it does just like we

7:10saw on the front end.

7:13So let's exit this Read, Evalute, Print,

7:15Loop by hitting Control-C. And we're

7:19going to have to hit it twice in order to exit.

7:22And then we'll type clear to clear the terminal.

7:25So the next thing that we're going to take a look at

7:27is how to run JavaScript code in Node.js

7:31by writing it in a separate file.

7:33So just like we were able to write separate JavaScript files

7:37and run them on the front end by simply importing them using

7:41this script source thing that we saw earlier, on the back end,

7:45we're able to do the same thing.

7:47And to do that, what we'll do is just say new file.

7:49We'll say node-script.js.

7:52And inside here, we'll say something like let x equal 5,

7:59let y equal--

8:00I don't know-- 12.

8:01You can pick whatever numbers you want here.

8:03And then what we'll do is say console.log log,

8:07and we'll say the sum is, and we'll put a colon there.

8:13And then we'll say in parentheses, x plus y.

8:16We'll talk about why we had to put parentheses there

8:18in just a minute, but now that we've

8:20written this very simple Node script,

8:22the way we can run this is by opening up our terminal

8:26and typing node, and then specifying the name of the file

8:29we want to run.

8:30So I'm going to say ./node-script.js and hit Enter.

8:35And we'll see that it says the sum is 17.

8:39And this is ./ is optional too, by the way.

8:42You can just say node node-script.js.

8:45The ./ just makes it clear that it's inside the current

8:48directory.

8:49So that's how you run specific JavaScript files in Node.js.

8:53And one thing that you're going to notice is that

8:56the console.log that we saw earlier on the front end when

9:00we wrote inside my-script.js console.log,

9:03"Hello from an external script," we saw that this logged out

9:06this message here to the browser's console.

9:10Now in Node.js, if you say console.log, as we've seen,

9:14it's going to log that out right underneath where

9:17you run the script.

9:19So again, this can be a very useful way

9:21to troubleshoot node programs.

9:23You can use it to see the value of different variables

9:26at different times, you can use it

9:28to check if a given piece of code is getting called.

9:31It's really just a useful troubleshooting tool,

9:33and it's also used in the scripts that

9:35are meant to have some kind of output

9:38to communicate to the user.

9:39Like if we wanted to write a web server, which we'll

9:42learn how to do later on, you'd want

9:44to use console.log with a message saying something

9:47like the web server is now up and running in order

9:50to tell whoever is running that script that everything

9:53went as expected and the script is successfully run.

9:56So that's how to run code in Node.js.

9:59And just to be clear, the code that we wrote inside

10:02my-script.js, we can run that as well by simply saying

10:06my-script.js, and hitting Enter.

10:10And we'll see "Hello from an external script" printed out

10:12to the console.

10:13So there are going to be a lot of cases where the JavaScript

10:16code you write can be run either on the front end

10:19or on the back end, although as you start to actually write

10:23full stack applications with JavaScript,

10:25the different duties of the front end and back end

10:27are going to start to diverge.

10:29The front end will generally be doing more DOM manipulation,

10:32and the back end will be doing things, as I said,

10:34like working with files, connecting to databases, and so

10:37on.

10:38But that's just something I wanted to point out in case

10:40you were wondering.

10:41Yes, we can run this frontend script from the back end

10:44as well.

10:45So just to review here, we saw several different ways

10:49of running JavaScript code.

10:50One was inside the browser's terminal.

10:54So in order to do that, you're just

10:56going to want to open up the inspector window, open up

10:59console, and you can run whatever

11:01JavaScript you want right here.

11:03Next, we saw how to run JavaScript

11:06from inside an inline script that we write in our HTML.

11:09We saw that as soon as we loaded this HTML file,

11:11it ran whatever JavaScript it found inside these script tags.

11:16After that, we saw how to run JavaScript

11:19using an external script.

11:21So we wrote our JavaScript and HTML in separate files,

11:24and imported the JavaScript into our HTML file

11:27in order to run it.

11:28And just like with the inline scripts,

11:30we saw that this automatically ran all of the JavaScript

11:33as soon as we opened up the HTML file.

11:36And s we moved on to the back end

11:37and saw how to run JavaScript code inside a Node.js Read,

11:41Evaluate, Print, Loop by simply typing node.

11:44And then we could run whatever JavaScript we wanted inside

11:47of here.

11:48And we also saw how to run JavaScript code written

11:50inside files with Node by saying node

11:53and then the name of the file.

11:55So node-script.js, and that runs whatever code is inside.

11:59So those weights are really the main ways

12:01that you're going to be running JavaScript code

12:04for the foreseeable future.

12:06I'm going to be using this in different examples

12:08depending on the exact situation.

12:11But sometimes, I'll be showing examples in the browser

12:13console, sometimes I'll be writing them in separate files,

12:17sometimes I'll be writing them in as inline scripts in HTML.

12:20It's really going to depend on the situation.

12:22But what we've seen here, at least while you're

12:25learning the basics of JavaScript,

12:26is going to constitute the vast majority of situations

12:29where we'll need to run JavaScript.

12:31So anyway, I hope this has been informative for you,

12:34and I'd like to thank you for viewing.