Putting JS In a webpage (Video Version)

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.