All right then, my friends.
So now we have our coding environment all set up.
Hopefully you've got vs code installed on your computer and that package live server because we're going
to be using this to preview our pages in the browser.
I've already gone ahead and right clicked and gone to open with live server so we can preview the website
right here.
There's nothing there at the minute, but that's because we have no content in the page.
But if we had an H one over here that says page title, save that and view over here, now we can see
that.
Okay, So what I'd like to do now is show you how to add JavaScript to a web page and where we add that
JavaScript.
So first of all, where where do we add JavaScript to an HTML page?
Well, we can add it anywhere between the head tags or anywhere between the body tags.
So for example, I could come beneath the title and add some JavaScript right here.
Now the first thing to do is create a script tag like so, and we place our JavaScript between those
tags.
So I could say something like Alert and then Hello World Semicolon.
And I don't expect you to understand what this means at the minute.
This is just some random JavaScript to demo where to place it on your page.
Okay, but if I save this now, then this script is going to run.
And this thing right here, this alert function, this creates a pop up on the screen.
So if I save it, go to the browser.
We see that pop up.
Hello world.
We press okay.
And the rest of the page loads now placing a script inside the head, that's absolutely fine.
You can do that.
But in some cases it's going to cause some loading issues.
So 99% of the time, if you're adding JavaScript to a page, I would do it not here, but instead at
the bottom of the body tag, just before the closing body tag right there.
Place that in and scoot it back.
If I save this, it's going to do exactly the same thing.
We see the pop up, okay?
And then the page loads.
Okay, so this is fine.
When you have a small amount of JavaScript, but if you have a large amount of JavaScript with different
functions and it goes on and on and on in this page, then it would be better to somehow externalize
that JavaScript and put it in a separate file.
Then just link to that file from the HTML page.
This is a bit like when you do CSS, right?
If you wanted to, you could add a load of CSS in the head in some style tags, but most of the time
when we have a lot of CSS, instead we do a link tag and link to an external CSS file.
So that's what I'm going to do most of the time inside this course, probably 99.9% of the time, in
fact.
So I'm going to comment this out and instead I'm going to link to an external file.
So I'll create that file.
First of all, right, click over here, go to new file and we'll call this sandbox dot JS.
So all JavaScript files have this dot JS extension that's important.
So now we can link to this file from index.
Let's come down here.
We still need our script tags right here.
This time we say source is equal to and then the path to this file.
So it's just sandbox dot.
JS Okay, so now we have that linked up.
If we write some JavaScript code inside this file, it's going to run that when we load this page in
the browser.
Now over here we don't need to do any more script tags.
The script tags are right here, okay, so we can just write our JavaScript directly in this file now
so I could do exactly the same thing.
Alert then.
Hello world, and then close that off with a semicolon, save and come over here and it does exactly
the same thing.
Okay, so this is how we're going to be working in this series.
In this course.
We're going to be linking to our scripts from the bottom of the body tag to an external file.
Now, there's one more thing I'd like to mention, and that is that in JavaScript we use semicolons
like this to mark the end of a statement.
So this right here, this is a JavaScript statement and this semicolon is marking the end of it.
It's like a full stop at the end of a sentence.
It's our way of ending a line of code that does something.
Imagine having a book and that book had no full stops or periods.
Then you would not know when to take a breather, right?
So that's the case in JavaScript as well.
This marks the end of a particular statement.
Now technically in a lot of cases, if you forget your semicolon, then the code will still work and
it's not going to give you an error.
They're not required a lot of the time.
So if I delete that and save, then preview this in the browser.
Everything still works.
Right now.
There are some developers who don't use them at all, but in some cases if you don't use them, then
you will get an error.
And I think especially when you're first starting and you don't know the language that well or why you
would be getting an error, it's always a good habit to get into to add your semicolons at the end of
a statement.
Okay.
And we'll talk more about this as we go along in the course.
So anyway, there we go.
That's how we add JavaScript to a web page.
