A basic webpage, like this one, is made up of HTML tags, like all these.
Now, when we want to style a webpage, how do we bring CSS into it?
We add a `` tag.
And the browser knows when it sees a style tag
to use its CSS engine to process that tag.
We usually put the `` tag in the ``,
because we want to make sure that the browser processes the styles
before it renders the HTML tags.
Otherwise, if we put `` at the bottom here,
then we could have an FOUC: a flash of unstyled content,
and people would see our wepage naked-- gross!
Let's bring it back here where it belongs.
Okay, so now this webpage has style.
How do we bring JavaScript into a webpage when we want to add interactivity?
For that, we add a `` tag.
And the best place to put a `` tag
is actually at the very bottom of the page right before your end `` tag.
I've put it there, and I'll explain why it's there in a bit.
Now what can I put inside this `` tag?
Hmm, we can put any valid JavaScript in it, like `var four = 2 +2;`.
But that's not terribly exciting, because nothing's happening on our webpage.
And if you're on Khan Academy, you probably already knew
that four equals two plus two.
So one thing I can do to check that it works,
is to write this line of code here.
Okay, you don't see anything, right?
And maybe you've never seen this function before.
This function, `console.log`, is a special one we can use
in many JavaScript environments, including browsers.
And it will write out things to the JavaScript console.
You can find that console in your browser
by pressing Command-Option-I, or Control-Option-I,
or right-clicking anywhere on the page, and selecting "Inspect element".
Pause the talkthrough now, and try to bring up your dev console
to see that message.
So, did you see it? Great!
You can close the console now if you'd like,
as it can take up a lot of room.
It can also get distracting since it'll show you every error as I'm typing.
It is a great tool for debugging, though.
So definitely file it away in your toolbox.
Now let me actually do something to the page with JavaScript,
using a line of code that will not make a lot of sense yet.
See what happened?
Our webpage disappeared, and was replaced with our "leet hacker" message.
We'll go into more details about how this line of code actually works.
But basically it found the `` tag, and replaced the contents.
Now what would happen if I copied and pasted this `` tag,
and stuck it up in the `` with the `` tag?
It doesn't work-- why not?
Because the webpage evaluates the `` tag
before it sees the `` tag.
And it says, "Uh-oh, I haven't even seen `document.body` yet,
"And you're trying to manipulate it! That can't happen."
That's why we have to put our `` tag at the bottom of the page.
So that the webpage sees the `` tag first,
sees everything in it, and then we start doing stuff to it.
We want to make sure that the webpage exists first.
And that's different from CSS:
We want to put our `` tag at the beginning,
because the CSS parser is fine with applying styles
to things that don't exist yet.
It'll just apply them once they happen.
But JavaScript DOM is not fine with that.
So make sure it goes at the bottom here.
Try adding the `` tag in the next challenge,
making sure you put it at the bottom,
and then I promise I will explain much more about this line right here.