Now as we continue writing JavaScript code,
we add more and more code to this HTML file.
And that's important to keep in mind.
We are still in a HTML file in here.
And just as with the CSS code
between the style tax earlier in the course,
we also don't want to add too much JavaScript code
to the HTML file.
Instead The HTML filed should stay focused on HTML
and should not be bloated with all our script code.
Because of course this hear is a simple file.
It has basically no real HTML content,
since I want to focus on Java script here,
but that's not realistic in a reality,
we would probably have a lot of HTML content.
And then also having a lot of script code in here
can make it harder to work with that file
and manage this file efficiently.
Therefore, instead of having that script code in here,
we typically want to outsource that code
into a separate file
and that's something we can easily do.
We can add a new file here in our project folder,
and we can give this file. Any name of our choice,
for example, app dot JS.
The only thing which is not up to you is the file extension.
That should be dot JS,
which stands for JavaScript.
And since we're going to the store,
some Java script code in that file,
that's the extension we should use.
But the part in front of the extension is up to you.
That could be scripts dot JS, or site dot JS.
And here I'll just choose app dot JS, but it is up to you.
Now we can grab our JavaScript code and only the code
between the script tags, not including the script texts,
just as we did it with the CSS code before as well.
We took the CSS code between the style tags,
not including the style tax.
And then we cut that JavaScript code,
from the HTML file and paste it into our app JS file.
And here I'll press that format document shortcut
to quickly format this appropriately
and get rid of that extra white space.
If I would leave the white space here,
the code would still work,
but it's harder to read and then over here,
I want to get rid of it
kind of the opposite of what we had with HTML,
There we added indentation
to make our code easier to read with JavaScript.
Since we have a line after line
and not really this nesting, which we have in HTML,
we typically don't add redundant white space like this
Though we'll see some use cases for white space later on.
Now as a side note,
hitting that format document shortcuts did add double quotes
here around the dispersed string for me.
And it did add those double quotes
because I had this escaped single quote in there
and keep in mind what I had here before was this,
this kind of string, and that was valid code,
but the prettier extension,
which I'm using for formatting here
actually changes this slightly
so that we don't have to escape the single quote
character anymore.
As it wraps this overall string with double quotes,
that's an alternative way of doing it.
And even though I'm a fan of consistency,
that's what the auto format shortcut does for me here.
And we could change the configuration,
but we can also just stick to that behavior.
I just wanted to highlight it here,
but now we got our JavaScript code in
here and then index HTML.
We can now get rid of these script tax.
And now to question just as how we can
link this HTML file to this Java script file
so that this code still is executed in our browser.
And you could think that you again, use this link element,
which we used for style sheets. So for a CSS files as well,
maybe we need to add scripts here for derail attribute,
but unfortunately that's not the case.
It would make sense, but it's simply not how HTML works
when it comes to linking scripts.
And for that, it's always important to keep in mind that
HTML is a language with a lot of history.
It was not written and invented on one day.
Instead it evolved over many, many years
and new features were added and improved.
And that's why we don't have to as uniform way of
linking to external resources.
And for linking to scripts, we therefore indeed,
again, used to script tax opening and closing,
and we use them differently now
instead of putting our script code between those tacks,
we now add the SRC attribute here.
So does source attribute not ref,
but source as we did it on the image.
And then here we specify a Poff 2d Java script file we want
to include here. And that that can be a URL,
a link to an external server with some exposed to JavaScript
file, or like we have it in this case to a local file,
which is our project directory and here it's app JS.
So I'll just point at this file,
including the file extension hear,
with that, we are telling the browser
to link, to import this JavaScript file
and to load that JavaScript code and also execute it.
Now, one thing is very important here,
even though we have no code between the opening and closing
script tag, it's not allowed to use this as a white element.
So removing the closing script tag is not allowed
as you can already tell,
by the errors I'm getting here in my IDE,
you have to have that closing script tag,
and you also should not add any JavaScript code.
If you have that source attribute
and you are linking to an external file.
If you want to use code between the script tags,
you should not add the source attribute,
but here, of course,
I don't want to write code between the script tax.
I want to link to the external JavaScript file instead.
And that's now how we can do that.
If we save all of this, we again get these alerts,
which we got before as well.
But now through that external JavaScript file.