So we want to write some script code
and as I mentioned already, you got the vendor.js file which you could name however you want,
I just named it like this to make it clear that I provide this to you and you don't really need to care
about it.
So we could add our code in that file but actually, we won't
and instead I'll create a separate brand new file next to it which I'll name app.js
Now you can also name this file however you want,
I'll name it app.js because it will drive our simple front-end browser based application we're building
here
but you could name it my-script.js or just script.js or whatever you want.
The only thing that matters here is the file extension which should of course be .js because it will
hold Javascript code.
Now that's the script file we'll work on and that's the file where we will add our calculator logic.
Now to get started and see that this works, let's start very simple and simply add in an alert where
we say this works.
Now you might not fully understand what's happening here, what this alert thing means, what these parentheses
mean, what the single quotes here mean and we'll explore all of that throughout this module but just enter
this for the moment and then go back to your page and reload and what you'll see is that nothing happens.
Well the reason for that is that of course I added my script file here but the default behavior of the
browser is not to scan all subfolders next to my HTML file which I loaded for scripts which
it could execute,
that would be a horrible default behavior because it would mean that we can't control when which of
our scripts runs and we want to control that,
So of course it's good that the browser doesn't load and execute our script by default
but how can we tell the browser that it should load and execute that script? There are a couple of ways
of importing Javascript, now
the first way of importing it is to go to the HTML file and in there, like here in the head section
let's say, you can add a script opening and closing tag and you can add Javascript between those script
tags. So we could write alert,
this works between script tags in here, so the alert function
just as I used it in app.js but not in
app.js
between the script tags here.
If we do that and I reload this page, you see before the page loads, I already see that alert indeed and
I can click OK and confirm this and now the rest of the page loads.
Now that's one way of doing it.
Now you can of course throw in some script code here into your HTML file but the downside with that
is that the longer your script gets, the longer this HTML file gets and this is not necessarily a
technical issue but one issue it might be is that for you, it gets harder to manage your
website.
If all your script and all your HTML is in one file, then this file gets very big and if you then
ever need to change something in there, be that Javascript or be that HTML,
you need to scroll through all the content here and find the part you want to change.
So putting your scripts in there is typically not the best idea unless it's a very short script,
instead you typically want to import your script and therefore you add a source attribute, src to
the script tags and then between double quotes typically, single quotes or no quotes at all would also
work to some extent but typically use double quotes,
you point at the location of your script file.
So in my case here, I point that the assets folder by adding assets, then a slash to kind of go into that
folder or to tell the browser to look into that folder and then there, we want to go into the scripts
folder right
which is a folder we have in there and then go into that folder and then load the app.js file,
that's what we want to tell the browser, it should go in there and load the app.js file.
Now important, you still need a closing script tag here,
you must not have a self-closing script tag like you have it for the link,
that's not supported for script tags, you must have opening and closing separate
script tag.
And now with that indeed, you should see that when I reload the page again we see just this works from
this file,
so if I go back and reload this page indeed we see this works
and if I confirm this, the rest of the page loads.
So that's how we can import a script.
One problem we're facing here is that this blocks the rendering of the page until the script is done
and in the case of an alert, the script is really only done when the user confirmed the alert,
so when we close the alert. To make sure that the page loads first, we can do one simple thing -
we can take the script, take it out of the head here and move it to the end of the body so that the browser
has a chance of first parsing all the HTML code and finishing that rendering before it executes our script
and later, I'll show you an alternative strategy to that as well
but for the moment we can do that. If I now save this and we now reload,
you see first everything renders, then we can click OK and then it finishes.
Now actually, the font only came in after but that's something we can work on later,
for the moment, this is better than what we had before because at least a majority of this file is now
done loading before the script executes and blocks the browser from finishing this up.
So that's the basic setup we'll work with,
now we will also depend on the code I run here in the vendor.js file and therefore you should import
that as well and you should import it before you import the app.js file because the code you write
in the app.js file will depend on the code in the vendor.js file and the order does matter in Javascript,
so we have to import the thing we depend on before we use it.
So we first import, from our assets folder, scripts folder, vendor.js and then you have your import to
app.js so that in the app.js file, we can actually work with the things that are happening in here
even though we don't fully understand what's happening in there yet.
So that's the finished import setup we need, now with the importing done,
we can dive into actually writing some Javascript code.