All right.
Welcome back.
So in this video we're going to talk about where to insert javascript.
So let's head over to Sublime Text 3.
Open that up.
Make sure you have the learned basic javascript folder already selected for the project.
I'm going to right click on that.
Click on new folder.
I'm a Type 1 0 1 dot where to insert javascript.
OK.
And then I want you right click on that click on new file where the control asks and double click on
where to insert javascript we're going to name this index that each terminal and then I want to have
control and control s and type in Maine Dot.
J ust OK.
And then you can close the open the folder here real quick and then closed the main dot jazz folder
file sorry in the index that each terminal I want you to type in H to Mel and tab.
OK.
And so JavaScript can be in the head of the body section of an H to our page.
So the first thing I want to show you is JavaScript in the head Peg.
So just follow along with me here you don't have to type anything out just hear my words.
And if you want to type it out you can.
But you don't really need to because I'm going to be writing a function.
So the first thing I would do is I'm going to type in script I'm an open and close that guy and then
I'm going to do function.
My function
OK.
And I'm going to do document that get element by IED.
Demo that inner H2 AML equals paragraphs.
Changed and I'm a close that then what I do is I actually have to type out some aged him l for this
to work.
So I'm going to do each one.
This is a web page
we'll do paragraph I.D. demo.
Hello World
and then below that I'm going to do button
type T equals button and I will do on click equals my function
OK.
And then I'm going to do try this because the button I'm going to right click open in the browser when
I click it and the paragraphs change so if I refresh.
So basically what I did is I had I wrote a function where it's saying get a document get Elena by D.
So my ideas demo and Dot enter each HTML.
And when I click it or when I call it from the button it's going to change the paragraph.
OK.
So the reason I wrote all that out and showed you that is that we put all this in the head section.
OK.
So that's one option you can put content in the head section.
The other thing you can do is you can put it in the body.
So what we're gonna do is we're just going to move this summer copy this and cut it with the control
ax and I'm going to bring it into the body and put a below this content.
So what I'm going to do is when I return and I paste then I right click open in the browser and when
I click it it works.
So it really depends on what you write in whether or not you choose to put the JavaScript in the head
tag or in the body if it's a lot of script.
I recommend actually putting it on an external document that way the page will load faster because what
it's doing is when you load any document on the web it's reading a top to bottom.
So if you have a whole bunch of scripts in the head tag it's going to take a while for to load everything.
So those are the two options the head tag and the body tag.
If you want to put it on an internal document.
Now if we want to put in an external document then here's what we're going to do.
So I'm going to put this function.
I want to grab all this.
We're going to cut it.
Control has to save.
I'm going to go to the main that j ust file.
We're going to pasted in there and instead of putting anything in here let's do this.
I'm going to bring this back so bring it all the way back next to it and then we're gonna go inside
the script tag and then type it as RC and we're going to do main J.S. OK.
Then I'm the right click and open in the browser.
I'm going to try it.
There you go it works.
So like I said Let's inspect this real quick so you can see here if we're going to head tag you don't
see anything there.
You see how the script tag is kind of great out and you can see where it is.
There it is right there.
So if you go to the debugger and then you go inside the file on this and write in here then you have
the function my function that document target element by a d demo that enter each terminal and then
this is what it's going to change to.
So we're calling for the idea of demo on the extreme out page.
You want to display it on the H now page as well.
And when it's called you want to change the paragraph so that's what it's doing.
Now if you want what I do here when I click on try this then it's moving.
And if we do it here let's try one more time here with the inspector active.
So if I go down here and I try this.
There you go.
So it works.
So we've got errors.
We got warnings logs and phone debug in them so much more.
OK.
So that's where to insert javascript you can put it in the head tag the body tag or an external document
which I highly recommend if it's a lot of javascript if you're writing a big script I would make it
external and I would make that a habit to put your files externally and internally.
It's it's a preference because again if you have a lot of stuff it's going to bog down your site and
you want to optimize it for as much speed as possible.
OK.
So thanks for watching.
I'll see you in the next video.