WEBVTT 00:00:00.737 --> 00:00:06.812 A basic webpage, like this one, is made up of HTML tags, like all these. 00:00:06.812 --> 00:00:12.180 Now, when we want to style a webpage, how do we bring CSS into it? 00:00:12.180 --> 00:00:14.397 We add a `` tag. 00:00:14.397 --> 00:00:17.349 And the browser knows when it sees a style tag 00:00:17.349 --> 00:00:20.195 to use its CSS engine to process that tag. 00:00:20.195 --> 00:00:23.383 We usually put the `` tag in the ``, 00:00:23.383 --> 00:00:27.352 because we want to make sure that the browser processes the styles 00:00:27.352 --> 00:00:30.959 before it renders the HTML tags. 00:00:30.959 --> 00:00:34.936 Otherwise, if we put `` at the bottom here, 00:00:34.936 --> 00:00:40.277 then we could have an FOUC: a flash of unstyled content, 00:00:40.277 --> 00:00:44.726 and people would see our wepage naked-- gross! 00:00:44.726 --> 00:00:48.484 Let's bring it back here where it belongs. 00:00:48.484 --> 00:00:51.734 Okay, so now this webpage has style. 00:00:51.734 --> 00:00:57.954 How do we bring JavaScript into a webpage when we want to add interactivity? 00:00:57.954 --> 00:01:01.255 For that, we add a `` tag. 00:01:01.255 --> 00:01:04.385 And the best place to put a `` tag 00:01:04.385 --> 00:01:10.517 is actually at the very bottom of the page right before your end `` tag. 00:01:10.517 --> 00:01:15.150 I've put it there, and I'll explain why it's there in a bit. 00:01:15.150 --> 00:01:19.724 Now what can I put inside this `` tag? 00:01:19.724 --> 00:01:25.094 Hmm, we can put any valid JavaScript in it, like `var four = 2 +2;`. 00:01:25.094 --> 00:01:30.386 But that's not terribly exciting, because nothing's happening on our webpage. 00:01:30.386 --> 00:01:33.152 And if you're on Khan Academy, you probably already knew 00:01:33.152 --> 00:01:35.526 that four equals two plus two. 00:01:35.526 --> 00:01:39.072 So one thing I can do to check that it works, 00:01:39.072 --> 00:01:42.092 is to write this line of code here. 00:01:42.092 --> 00:01:45.350 Okay, you don't see anything, right? 00:01:45.350 --> 00:01:48.927 And maybe you've never seen this function before. 00:01:48.927 --> 00:01:53.130 This function, `console.log`, is a special one we can use 00:01:53.130 --> 00:01:56.466 in many JavaScript environments, including browsers. 00:01:56.466 --> 00:02:00.310 And it will write out things to the JavaScript console. 00:02:00.310 --> 00:02:03.661 You can find that console in your browser 00:02:03.661 --> 00:02:08.740 by pressing Command-Option-I, or Control-Option-I, 00:02:08.740 --> 00:02:14.245 or right-clicking anywhere on the page, and selecting "Inspect element". 00:02:14.245 --> 00:02:19.009 Pause the talkthrough now, and try to bring up your dev console 00:02:19.009 --> 00:02:21.707 to see that message. 00:02:21.707 --> 00:02:23.939 So, did you see it? Great! 00:02:23.939 --> 00:02:26.656 You can close the console now if you'd like, 00:02:26.656 --> 00:02:28.580 as it can take up a lot of room. 00:02:28.580 --> 00:02:32.962 It can also get distracting since it'll show you every error as I'm typing. 00:02:32.962 --> 00:02:35.515 It is a great tool for debugging, though. 00:02:35.515 --> 00:02:38.359 So definitely file it away in your toolbox. 00:02:38.359 --> 00:02:42.325 Now let me actually do something to the page with JavaScript, 00:02:42.325 --> 00:02:47.034 using a line of code that will not make a lot of sense yet. 00:02:56.671 --> 00:02:58.596 See what happened? 00:02:58.596 --> 00:03:03.128 Our webpage disappeared, and was replaced with our "leet hacker" message. 00:03:03.128 --> 00:03:07.895 We'll go into more details about how this line of code actually works. 00:03:07.895 --> 00:03:12.219 But basically it found the `` tag, and replaced the contents. 00:03:12.219 --> 00:03:16.530 Now what would happen if I copied and pasted this `` tag, 00:03:16.530 --> 00:03:20.163 and stuck it up in the `` with the `` tag? 00:03:20.163 --> 00:03:23.095 It doesn't work-- why not? 00:03:23.095 --> 00:03:26.861 Because the webpage evaluates the `` tag 00:03:26.861 --> 00:03:29.203 before it sees the `` tag. 00:03:29.203 --> 00:03:34.808 And it says, "Uh-oh, I haven't even seen `document.body` yet, 00:03:34.808 --> 00:03:38.494 "And you're trying to manipulate it! That can't happen." 00:03:38.494 --> 00:03:43.762 That's why we have to put our `` tag at the bottom of the page. 00:03:43.762 --> 00:03:46.861 So that the webpage sees the `` tag first, 00:03:46.861 --> 00:03:51.219 sees everything in it, and then we start doing stuff to it. 00:03:51.219 --> 00:03:54.809 We want to make sure that the webpage exists first. 00:03:54.809 --> 00:03:56.672 And that's different from CSS: 00:03:56.672 --> 00:03:59.576 We want to put our `` tag at the beginning, 00:03:59.576 --> 00:04:02.530 because the CSS parser is fine with applying styles 00:04:02.530 --> 00:04:04.435 to things that don't exist yet. 00:04:04.435 --> 00:04:07.036 It'll just apply them once they happen. 00:04:07.036 --> 00:04:09.909 But JavaScript DOM is not fine with that. 00:04:09.909 --> 00:04:12.973 So make sure it goes at the bottom here. 00:04:12.973 --> 00:04:16.357 Try adding the `` tag in the next challenge, 00:04:16.357 --> 00:04:18.916 making sure you put it at the bottom, 00:04:18.916 --> 00:04:24.245 and then I promise I will explain much more about this line right here.