Original subtitles

All right now that we know

what JavaScript actually is,

let's now learn how to write code

in a special JavaScript file

and then how to run the code in the browser.

Now to get started with the section and with this course,

you need to start by downloading the starter code

from this GitHub repository that I created for this course.

So this repository is at this URL here,

which in case you missed it

is at the very beginning of the course.

It's on the first text lecture of the first section.

And in order to now actually download

all of the starter code,

all you need to do is to click on this green button here

and then download zip, okay?

Now, by the time you're watching this video GitHub

which is this website where developers basically host code,

so later this website might look a little bit different

but just what probably for a green button,

which then says, download zip, all right?

Now, if you're on a smaller screen or maybe on mobile

then this green button will actually not be visible here.

So in that case, just scroll down a little bit here

to the FAQ section

and then here you have this link.

So you can also download all the code

by simply clicking this link here.

And by the way, since we're already here in the FAQs,

please make sure to also read all of them

before you actually move on in the course.

So you will probably have

one of these questions at some point.

And so it's easier

to then simply find the answer right here, now okay?

But that's it here for GitHub.

Now let's go ahead and extract all of this data

that we just downloaded.

And so here we go.

So this is the starter code

and here you have basically one folder

for each section or each project

that we're building in the course.

Then inside of each of these folders,

you will always have one final folder

and one starter folder.

So you'll see that happens in all of these folders here.

Now the final folder is basically the final version

of the code as it looks by the end of the section

or by the end of the project.

And so in case something goes wrong in your code,

while you're following the section

please then compare your code with the final code

that is included for each of the sections.

And that will then allow you to find

and fix any mistake that you might've made in your code

so that you can keep going in the section.

But anyway, what we're most interested in in the beginning

is the starter code.

So each of these folders has the starter code

and that's basically the starting point

of each of these sections or projects.

So let's now actually direct this folder here

onto the desktop

and then I'm gonna open it up here separately.

And in my case here

since I'm actually the one writing the code first

it doesn't make a lot of sense

to have these two folders here.

So I will actually go ahead and take the index out,

but you should not do that.

So you should use this starter folder here

as your project folder in VS code, okay?

But again, I will now delete these two

because I don't need them here

to build this course basically.

But anyway, let's now open up a new VS code window.

So new window and then here we click on open folder.

And then we are already in the desktop.

Let's just make the window a bit bigger here.

And then I will select my project folder here.

So in my case, that's going to be this folder.

But again you should now use that starter folder

that's in here as your project folder.

So I think that's the best way for you to approach this.

So with that project folder a selected, hit open.

And then here we see the index.html file

that we already had in our starter code.

And this is an HTML file

because usually JavaScript is attached to web pages.

At least when we're building front end applications

as we learned in the last video.

So to start, we always need an HTML document like this

because our JavaScript needs to be attached

to an HTML document.

Now in HTML, there is a script tag

where we can write JavaScript.

So let's do that here and a hat right beneath the style.

And if you're completely new to HTML

and have no idea how it works

there is a very short crash course on HTML and CSS

in section five of this course I believe.

So if you want you can take that

just to learn about the very basics

of HTML and CSS in like 30 minutes or so.

Anyway, let's not create this script tag here

in which we will write or JavaScript now,

because in the first video we wrote JavaScript

in the console.

Remember, but that's not how real development works.

So instead of course we write the code in files.

So let's just right for now the same code

that we wrote in the first video.

So let JS equal amazing.

And then in JavaScript, we usually add a semi colon

to the end of each line.

And this will then let JavaScript know

that we are done with this line.

And it's actually not really mandatory.

And you will see some people omit the semi-colons

but I still consider it a good coding practice

and I believe it makes the code a bit cleaner.

So just like before we are then saying

if JavaScript is amazing,

then alert.JavaScript is fun.

And once again don't worry yet about how

this code here works, okay?

Just type it for now

and just have a general idea of what it does.

Now to actually execute this code,

so in this example to show this alert window,

all we have to do is to open up index.html in the browser,

because again this is where our JavaScript

is now attached to, right?

So let's do that.

And so I'm going back to my desktop

and then open this file with Google Chrome.

And indeed right away

we get this alert saying JavaScript is fun.

And so that is coming from our index.html.

We can click OK and then it finishes.

And we see a starter file which is actually this text.

So if you see in VS code,

Java's good fundamentals part one in this H1 tag,

is exactly what we see here.

And so we opened up the right page and also,

or JavaScript is working.

So if we reload this page now

we should see that alert window again.

And indeed here it is.

Okay, let's push this to the side.

Here is the code from our previous lecture VS code

and push it to the other side, okay?

We can then get rid of this sidebar here that we don't need

by hitting Command or Control + B

or by clicking this file icon.

And with this, we have enough space to see the editor

and a browser here on the other side.

So let me show you something very important now

which is how to see results from our code

here back in the browser.

So let's take this math operations

that we did in the previous lecture.

So that was 40 plus eight plus 23 minus 10.

Let's give it a save.

And you see that JavaScript

actually automatically formatted this code.

And I will show you later

how you can set that up for yourself.

Anyway, if we now reload this page here

where do you think this result will appear?

So clearly it's not in this alert

and it's also nowhere on this page

because we didn't tell JavaScript to put it on the page.

So let's open up the inspector here

and that will do inspect and then the console.

And then again increase the text command plus plus,

and plus again.

And just see that the result is also not in the console.

So why is that?

Why is this result not in a console like it was before?

Well it's because the console

is just an environment that was built

to execute small pieces of code

and then show results immediately.

So just like we did in a previous lecture.

But it doesn't show results

of our operations in code by default.

Now, if we still want to display results,

for example from a calculation like this here in the console

we need to tell JavaScript to explicitly output that result

to the console.

And we can do that using a special function

called console.log, okay?

And then if we take this code here and copy and paste it

and then save it and then reload,

we need to click OK

so that JavaScript can move on to the next line.

And then we actually get the results

printed to the console here.

And it actually says

that it's coming from index.html at line 31.

And so that's exactly the line

where we did to this computation.

Okay, But let's recap here

because I know that this is confusing for many beginners.

So in the last lecture we were already in the console.

And so then there was no need for using console.log.

We also needed to no script tag

when we were in the console, right?

But now we are actually in a script

and no longer in the console.

And so now we need to explicitly say console.log

whenever we want to access the developer console

like we did here, okay?

So basically this is like building a bridge

between script here and to develop a console

on the other side that lives in the browser.

And now to finish this lecture

let's actually take this JavaScript code

out of the HTML file

and put it into its own separate JavaScript file.

So what we have right now

this script here is an inline script.

And the only advantage of an inline script

is that we don't have to load another file.

But on the other hand

it's pretty bad for separating the website content

from the JavaScript logic.

And so usually we use external JavaScript files

as I just mentioned, okay?

So let's come back to the sidebar here

and create a new file

which I'm gonna call script.js.

And that's a pretty standard name

for a JavaScript script, okay?

So let's take that back,

come here, copy this code

and paste it here.

And then once more VS code

actually formatted the code here nicely.

If it didn't on your computer, then just do that manually

and I will show you later how to set that up, okay?

And now we can get rid of this script here.

Great, now we have a better separation of concerns

between presentation and logic.

And this also makes it easier

to maintain code in the long run.

All there is to do now is to link this JavaScript file

to the HTML file

because right now, HTML has no way of knowing

where the code is actually located.

So if we execute this code by reloading the browser,

now nothing will happen.

Again because this HTML file right now does not know

where to find the JavaScript code.

So let's do that connection.

And we usually do that at the end of the body tag, okay?

And actually we will use script again.

All right, but now at this time

we're not gonna put any code inside this script element

but instead we are gonna specify the source attribute.

So here all we need to do is to then specify

the name of the script and the location.

Now, in this case descript,

so it descript.js file

is in the same folder as index.html.

So all we have to do here

is to just write the file name like this.

We don't have to specify the entire path to the file, okay?

So if we save this now and reload,

then you see that it's back to working.

So we have this popup here again

and then result of this computation.

Now, if you didn't get the alert window

or this output here,

then that means that your script file

is probably not correctly linked to the HTML file.

So in that case, please make 100% sure

that descript file

is in the exact same folder as the HTML file.

Also make sure that you correctly spelt script SRC

just as they have it here in my HTML.

And finally also make sure

that you have no errors in your Java script code.

So these are some common mistakes that I see people make

which then leads to their script not being correctly linked.

Okay, but anyway at this point,

we no longer need index.html open here.

And here we have only our code logic.

The rest of the presentation is gone.

And so this is much cleaner and much easier to work with.

Great, so now you know how to link a JavaScript file

to an HTML file and then how to run it all in the browser.

And that means that you're now finally able

to really start learning the JavaScript language.

So see you in the next lecture

where we're gonna start doing just that.