Instructor: 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.