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