Hey, in this lesson, we are going to start writing some JavaScript code, because I know that's what
you're here for, to write JavaScript.
And we're going to be bringing in an external file into this project and this going to be a regular
G.S. file.
So I'm going to go ahead and create a new file and save this.
And we're just gonna call this as script.
I'm saving it within the same folder that I've got my index each Timal file.
And this will allow us to link to it.
And you can also create a subfolder and link to that as well.
I'm just gonna be calling it script J.
S.
So it's gonna be a blank file for now and for now to just have an alert just to make sure that everything
is working properly.
And I'll say hello.
Each Timal file.
We're going to link out to the G.S. file and the source is going to be.
Script G.S..
That's the new file that we've just created.
So that's what we needed to do to bring the G.S. file into the project.
And I'm going to use a feature within brackets to life preview the file.
So it's only available within brackets.
Otherwise, you can go and locate where your file is located.
And just open it up within the browser.
And it's going to have the same effect with brackets.
We do get the HTP local file.
So it's going to make a difference with the Web address.
And this is just simply outputting the H.
T Amelle into the browser.
And we can see that that JavaScript file ran and provided the hello message.
And from now on, I'll just do a split screen so that we can see the project on the right hand side.
When the browser being output on the left hand side, I'm going to open up the code editor.
So shrink this down.
Minimize this.
So we can see both screens.
So I'd like to flip back and forth as we go through the project.
And we also want to add in a script tag is a load, some JavaScript whenever the Web page load.
So we're going to do this with an event listener on the document object.
So whenever we want to interact with the DOM content, we want to make sure that the DOM content has
loaded.
Before we invoke or if we try to interact with any of the content within the Web page.
So that means that all the Web elements within are each HTML are loaded and ready to go.
So in order to ensure this, you can use a method called Dom Content Loaded event.
So this is an event that can be fired off whenever the window object or the document object loads.
It can run some JavaScript.
So what I want you to do now is pausing video and add this into your project.
And I'm going to show you the solution coming up.
So all we're doing is adding it as an event listener.
For now, we can just invoke an anonymous function that's going to log some content into the console.
And that will also enable us to present the console that we're gonna be using heavily in the upcoming
lessons.
So go ahead, posit video and try this out added into the project.
I'll show you how to do that.
I got to minimize the files on the left hand side.
I'm going to do a document and then add an event listener and the listener that we're listening for
is going to be Dorne content loaded, just as we saw within the example.
And then we're gonna be invoking an anonymous function that's going to run whenever the darn content
is loaded.
And for now, we can just do console log.
And we'll put a put a message of ready within the console.
So that means that whenever the Web page, whenever all of the HD himmel is loaded and we're ready to
go, then we're going to have console log output into the console.
We have ready output into the console.
I'm going to as well hide the line numbers.
We've got a little bit more space within the editor.
And now let's try the suit.
So refresh the page.
We've got the halo that runs.
So this is something that we can remove now because we're not going to be needing that within the project.
And then also opening up with an inspect.
So this is an option for Chrome that we've got access to the dev tools.
And we saw earlier in the last lesson how we can access the dev tools.
You should have ready sitting within your console whenever the page loads.
And this gives us the flexibility to move the script tax up into the head as well.
Since we're interacting with the elements on the page, we do want to make sure that all of the DOM
content has loaded and the DOM is short for document object model, which represents all of the elements
within each Timal page.
And just as an addition to this lesson, for those of you that might not be using Brackets C, you might
not have access to the life preview loading it with in the local machine as HTP object.
You can also open it just as a regular each Timal page in your browser.
So just from your local directory.
So I've got my directory open.
I'm creating the courses in a folder called Course and I can open that up with Chrome and then opening
it in Chrome is going to run that each time.
I'll file within the browser according to where it's located on my computer, and I can do the same
thing where I can open up the dev tools and can see the content is being output as ready.
So that's an alternative option to open up the files.
If you're not using brackets or if you're having some problems loading up the brackets local life preview,
then you can just go ahead and open up the file within the directory wherever it's located on your computer.