[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.74,0:00:06.81,Default,,0000,0000,0000,,A basic webpage, like this one, \Nis made up of HTML tags, like all these. Dialogue: 0,0:00:06.81,0:00:12.18,Default,,0000,0000,0000,,Now, when we want to style a webpage,\Nhow do we bring CSS into it? Dialogue: 0,0:00:12.18,0:00:14.40,Default,,0000,0000,0000,,We add a `` tag. Dialogue: 0,0:00:14.40,0:00:17.35,Default,,0000,0000,0000,,And the browser knows\Nwhen it sees a style tag Dialogue: 0,0:00:17.35,0:00:20.20,Default,,0000,0000,0000,,to use its CSS engine\Nto process that tag. Dialogue: 0,0:00:20.20,0:00:23.38,Default,,0000,0000,0000,,We usually put the `` tag\Nin the ``, Dialogue: 0,0:00:23.38,0:00:27.35,Default,,0000,0000,0000,,because we want to make sure that\Nthe browser processes the styles Dialogue: 0,0:00:27.35,0:00:30.96,Default,,0000,0000,0000,,before it renders the HTML tags. Dialogue: 0,0:00:30.96,0:00:34.94,Default,,0000,0000,0000,,Otherwise, if we put ``\Nat the bottom here, Dialogue: 0,0:00:34.94,0:00:40.28,Default,,0000,0000,0000,,then we could have an FOUC:\Na flash of unstyled content, Dialogue: 0,0:00:40.28,0:00:44.73,Default,,0000,0000,0000,,and people would see\Nour wepage naked-- gross! Dialogue: 0,0:00:44.73,0:00:48.48,Default,,0000,0000,0000,,Let's bring it back here where it belongs. Dialogue: 0,0:00:48.48,0:00:51.73,Default,,0000,0000,0000,,Okay, so now this webpage has style. Dialogue: 0,0:00:51.73,0:00:57.95,Default,,0000,0000,0000,,How do we bring JavaScript into a webpage\Nwhen we want to add interactivity? Dialogue: 0,0:00:57.95,0:01:01.26,Default,,0000,0000,0000,,For that, we add a `` tag. Dialogue: 0,0:01:01.26,0:01:04.38,Default,,0000,0000,0000,,And the best place to put a `` tag Dialogue: 0,0:01:04.38,0:01:10.52,Default,,0000,0000,0000,,is actually at the very bottom of the page\Nright before your end `` tag. Dialogue: 0,0:01:10.52,0:01:15.15,Default,,0000,0000,0000,,I've put it there, and\NI'll explain why it's there in a bit. Dialogue: 0,0:01:15.15,0:01:19.72,Default,,0000,0000,0000,,Now what can I put\Ninside this `` tag? Dialogue: 0,0:01:19.72,0:01:25.09,Default,,0000,0000,0000,,Hmm, we can put any valid JavaScript in it,\Nlike `var four = 2 +2;`. Dialogue: 0,0:01:25.09,0:01:30.39,Default,,0000,0000,0000,,But that's not terribly exciting, because\Nnothing's happening on our webpage. Dialogue: 0,0:01:30.39,0:01:33.15,Default,,0000,0000,0000,,And if you're on Khan Academy,\Nyou probably already knew Dialogue: 0,0:01:33.15,0:01:35.53,Default,,0000,0000,0000,,that four equals two plus two. Dialogue: 0,0:01:35.53,0:01:39.07,Default,,0000,0000,0000,,So one thing I can do\Nto check that it works, Dialogue: 0,0:01:39.07,0:01:42.09,Default,,0000,0000,0000,,is to write this line of code here. Dialogue: 0,0:01:42.09,0:01:45.35,Default,,0000,0000,0000,,Okay, you don't see anything, right? Dialogue: 0,0:01:45.35,0:01:48.93,Default,,0000,0000,0000,,And maybe you've never seen\Nthis function before. Dialogue: 0,0:01:48.93,0:01:53.13,Default,,0000,0000,0000,,This function, `console.log`,\Nis a special one we can use Dialogue: 0,0:01:53.13,0:01:56.47,Default,,0000,0000,0000,,in many JavaScript environments,\Nincluding browsers. Dialogue: 0,0:01:56.47,0:02:00.31,Default,,0000,0000,0000,,And it will write out things\Nto the JavaScript console. Dialogue: 0,0:02:00.31,0:02:03.66,Default,,0000,0000,0000,,You can find that console\Nin your browser Dialogue: 0,0:02:03.66,0:02:08.74,Default,,0000,0000,0000,,by pressing Command-Option-I,\Nor Control-Option-I, Dialogue: 0,0:02:08.74,0:02:14.24,Default,,0000,0000,0000,,or right-clicking anywhere on the page,\Nand selecting "Inspect element". Dialogue: 0,0:02:14.24,0:02:19.01,Default,,0000,0000,0000,,Pause the talkthrough now,\Nand try to bring up your dev console Dialogue: 0,0:02:19.01,0:02:21.71,Default,,0000,0000,0000,,to see that message. Dialogue: 0,0:02:21.71,0:02:23.94,Default,,0000,0000,0000,,So, did you see it? Great! Dialogue: 0,0:02:23.94,0:02:26.66,Default,,0000,0000,0000,,You can close the console now\Nif you'd like, Dialogue: 0,0:02:26.66,0:02:28.58,Default,,0000,0000,0000,,as it can take up a lot of room. Dialogue: 0,0:02:28.58,0:02:32.96,Default,,0000,0000,0000,,It can also get distracting since\Nit'll show you every error as I'm typing. Dialogue: 0,0:02:32.96,0:02:35.52,Default,,0000,0000,0000,,It is a great tool for debugging, though. Dialogue: 0,0:02:35.52,0:02:38.36,Default,,0000,0000,0000,,So definitely file it away\Nin your toolbox. Dialogue: 0,0:02:38.36,0:02:42.32,Default,,0000,0000,0000,,Now let me actually do something\Nto the page with JavaScript, Dialogue: 0,0:02:42.32,0:02:47.03,Default,,0000,0000,0000,,using a line of code that\Nwill not make a lot of sense yet. Dialogue: 0,0:02:56.67,0:02:58.60,Default,,0000,0000,0000,,See what happened? Dialogue: 0,0:02:58.60,0:03:03.13,Default,,0000,0000,0000,,Our webpage disappeared, and was replaced\Nwith our "leet hacker" message. Dialogue: 0,0:03:03.13,0:03:07.90,Default,,0000,0000,0000,,We'll go into more details about\Nhow this line of code actually works. Dialogue: 0,0:03:07.90,0:03:12.22,Default,,0000,0000,0000,,But basically it found the `` tag,\Nand replaced the contents. Dialogue: 0,0:03:12.22,0:03:16.53,Default,,0000,0000,0000,,Now what would happen if I copied\Nand pasted this `` tag, Dialogue: 0,0:03:16.53,0:03:20.16,Default,,0000,0000,0000,,and stuck it up in the ``\Nwith the `` tag? Dialogue: 0,0:03:20.16,0:03:23.10,Default,,0000,0000,0000,,It doesn't work-- why not? Dialogue: 0,0:03:23.10,0:03:26.86,Default,,0000,0000,0000,,Because the webpage evaluates\Nthe `` tag Dialogue: 0,0:03:26.86,0:03:29.20,Default,,0000,0000,0000,,before it sees the `` tag. Dialogue: 0,0:03:29.20,0:03:34.81,Default,,0000,0000,0000,,And it says, "Uh-oh, I haven't even seen\N`document.body` yet, Dialogue: 0,0:03:34.81,0:03:38.49,Default,,0000,0000,0000,,"And you're trying to manipulate it!\NThat can't happen." Dialogue: 0,0:03:38.49,0:03:43.76,Default,,0000,0000,0000,,That's why we have to put our\N`` tag at the bottom of the page. Dialogue: 0,0:03:43.76,0:03:46.86,Default,,0000,0000,0000,,So that the webpage sees\Nthe `` tag first, Dialogue: 0,0:03:46.86,0:03:51.22,Default,,0000,0000,0000,,sees everything in it,\Nand then we start doing stuff to it. Dialogue: 0,0:03:51.22,0:03:54.81,Default,,0000,0000,0000,,We want to make sure that\Nthe webpage exists first. Dialogue: 0,0:03:54.81,0:03:56.67,Default,,0000,0000,0000,,And that's different from CSS: Dialogue: 0,0:03:56.67,0:03:59.58,Default,,0000,0000,0000,,We want to put our `` tag\Nat the beginning, Dialogue: 0,0:03:59.58,0:04:02.53,Default,,0000,0000,0000,,because the CSS parser is fine\Nwith applying styles Dialogue: 0,0:04:02.53,0:04:04.44,Default,,0000,0000,0000,,to things that don't exist yet. Dialogue: 0,0:04:04.44,0:04:07.04,Default,,0000,0000,0000,,It'll just apply them once they happen. Dialogue: 0,0:04:07.04,0:04:09.91,Default,,0000,0000,0000,,But JavaScript DOM is not fine with that. Dialogue: 0,0:04:09.91,0:04:12.97,Default,,0000,0000,0000,,So make sure it goes at the bottom here. Dialogue: 0,0:04:12.97,0:04:16.36,Default,,0000,0000,0000,,Try adding the `` tag\Nin the next challenge, Dialogue: 0,0:04:16.36,0:04:18.92,Default,,0000,0000,0000,,making sure you put it at the bottom, Dialogue: 0,0:04:18.92,0:04:24.24,Default,,0000,0000,0000,,and then I promise I will explain\Nmuch more about this line right here.