All right, so this is a lesson you've all been waiting for.
Where are we going to create an index e-mail page and then link our JavaScript into our HTML code?
So we're going to do some really cool things in this lesson.
I'm going to get you to write some JavaScript code and then run that code in your browser.
The code that we're going to be running is an alert.
So the alert is something that we've seen before.
And this is just a really simple method that runs within the document window of your browser and it's
JavaScript and allows you to communicate a message and it can be written several different ways.
You don't have to include the window object as this is assumed.
So that's why we can just write alert and have our message rendered out.
And there's going to be more on this later on when we look at objects.
So this is an example of some JavaScript code.
And of course, we are going to be covering it as we progress through the lessons, including setting
up variables and then outputting content into the console.
And you can try this out as well within your HTML and JavaScript file.
If you haven't already tried the alert, go ahead and try it.
So all you have to do is type alert rounded brackets and then between the quotes, type out your message.
You can have a space in there as well.
So you can do hello or hello world and say hello to the visitors of your web page.
So single quotes or double quotes, either ones work the same way.
So the syntax is that this is actually a function in JavaScript and of course, more on functions later
on and at the end of each statement.
So we end up with a semicolon.
So semicolons are not necessary, but they are indicating that it's sits on line and it is considered
best practice to leave a semicolon after each statement.
So in order to include JavaScript on your website, you can link in it in a number of ways.
You can link it as.
Directly within the HTML page, or you can link it as its own file, and if you are familiar with success,
it works the same way where you can create a file and then call that file with an extension of G.S.
and then link to it from your HTML page.
And that does the same functionality as if the code was directly on the page.
And it's actually better to do that because this provides a separation of your HTML and your JavaScript.
And also the benefit is if you want to link your JavaScript on multiple pages, it's a whole lot easier
to do this.
You don't have to type it over and over again.
The difference between HTML four in each HTML5.
So there was change in the way that we can call JavaScript.
So you might still see that the script tag has type text for JavaScript and then the source within the
syntax and this is HTML and there was a change with HTML5 and if you are using its HTML5 or newer then
of course you don't need to include the type.
So that's an option and there's a syntax difference between the different HTML versions.
So in order to run your indexed HTML page and HTML, just like any other HTML, it runs within the browser
and that's the same thing for success and JavaScript.
But you do need to wrap it within an HTML file in order for it to run in the browser.
It won't be able to run to JS file on its own.
It will just don't put the contents of the JS file.
So let's try all of this out and create our JavaScript file and link it into our HTML.
I've got a completely blank page and I'm going to go ahead.
I've got my editor open on the left hand side.
I've got the browser window linking to the file that I'm going to create on the right hand side.
As you can see, there's nothing there yet.
And then I've got the directory open up here in the bottom.
So go ahead and open up your editor.
In this case, I am using brackets and I'm going to just save this as index HTML and you can add in
your typical HTML tags, in this case brackets.
So I'm going to just do an HTML template, so that gives me a quick HTML template to work with and I'll
call it JavaScript in the title.
And then within the body we saw there was a number of ways to bring JavaScript into our page.
We could write it as a script tag and then have our JavaScript within the script tag and we're going
to do a simple hello for now.
So when I refresh it and all we have to do is run this file, the HTML file within the browser.
So once you've got it in your directory.
So this is that index file that I've created.
I can open it up with the browser and you can see that once we open it up, it runs to that path.
So this is the local path and it renders the JavaScript.
So it says hello there.
And then when I press, okay, then it can render out the rest of the page.
So try that one out and then also do one for console.
And this was the same console log that we saw in the earlier lesson.
So type yourself a message or a message to your users so we can type in Hello world.
You can refresh that same page in your browser type C that the hello pops up and then in order to see
the console message, you're not going to see it regularly within the page.
So it's not meant for regular visitors to your site.
You have to go to inspect, open up the console and are going to have it here at the bottom of my screen.
And you can see that the JavaScript rendered out the hello world.
So the other option for JavaScript and also where you place JavaScript, my HTML.
So just before the body.
So basically you can put it anywhere within your HTML file and best practices to keep it at the bottom
or within the head, depending on how you're using your JavaScript.
So the other option was to create a JS file and link to it.
So for the file we can copy the same code that we were using within our script tags, create a new file
and just going to call this app JS and then paste in the same JavaScript and then go back to the index
file within the attribute of the script tag.
So source and then linking to where you've got the source of the file.
If you are calling external libraries, it's the same thing, the same syntax, except you just specify
the path which might have the HTTP and the whole you URL, including the domain within the path.
So once you save it and you refresh it, you're going to see it does the exact same thing.
So it doesn't matter if you type it in within the script tags or if you link to just file, it's going
to do the same thing.
And for the purposes of the upcoming lessons, we're going to just keep that same apps file linked and
we're going to write all of our JavaScript in here.
So go ahead and try this out herself, create your index, each HTML page and then create your apps.
And you be ready to move on to the next lesson where we start diving deeper into what JavaScript can
do.
So it's coming up.