1 00:00:00,737 --> 00:00:06,812 A basic webpage, like this one, is made up of HTML tags, like all these. 2 00:00:06,812 --> 00:00:12,180 Now, when we want to style a webpage, how do we bring CSS into it? 3 00:00:12,180 --> 00:00:14,397 We add a `` tag. 4 00:00:14,397 --> 00:00:17,349 And the browser knows when it sees a style tag 5 00:00:17,349 --> 00:00:20,195 to use its CSS engine to process that tag. 6 00:00:20,195 --> 00:00:23,383 We usually put the `` tag in the ``, 7 00:00:23,383 --> 00:00:27,352 because we want to make sure that the browser processes the styles 8 00:00:27,352 --> 00:00:30,959 before it renders the HTML tags. 9 00:00:30,959 --> 00:00:34,936 Otherwise, if we put `` at the bottom here, 10 00:00:34,936 --> 00:00:40,277 then we could have an FOUC: a flash of unstyled content, 11 00:00:40,277 --> 00:00:44,726 and people would see our wepage naked-- gross! 12 00:00:44,726 --> 00:00:48,484 Let's bring it back here where it belongs. 13 00:00:48,484 --> 00:00:51,734 Okay, so now this webpage has style. 14 00:00:51,734 --> 00:00:57,954 How do we bring JavaScript into a webpage when we want to add interactivity? 15 00:00:57,954 --> 00:01:01,255 For that, we add a `` tag. 16 00:01:01,255 --> 00:01:04,385 And the best place to put a `` tag 17 00:01:04,385 --> 00:01:10,517 is actually at the very bottom of the page right before your end `` tag. 18 00:01:10,517 --> 00:01:15,150 I've put it there, and I'll explain why it's there in a bit. 19 00:01:15,150 --> 00:01:19,724 Now what can I put inside this `` tag? 20 00:01:19,724 --> 00:01:25,094 Hmm, we can put any valid JavaScript in it, like `var four = 2 +2;`. 21 00:01:25,094 --> 00:01:30,386 But that's not terribly exciting, because nothing's happening on our webpage. 22 00:01:30,386 --> 00:01:33,152 And if you're on Khan Academy, you probably already knew 23 00:01:33,152 --> 00:01:35,526 that four equals two plus two. 24 00:01:35,526 --> 00:01:39,072 So one thing I can do to check that it works, 25 00:01:39,072 --> 00:01:42,092 is to write this line of code here. 26 00:01:42,092 --> 00:01:45,350 Okay, you don't see anything, right? 27 00:01:45,350 --> 00:01:48,927 And maybe you've never seen this function before. 28 00:01:48,927 --> 00:01:53,130 This function, `console.log`, is a special one we can use 29 00:01:53,130 --> 00:01:56,466 in many JavaScript environments, including browsers. 30 00:01:56,466 --> 00:02:00,310 And it will write out things to the JavaScript console. 31 00:02:00,310 --> 00:02:03,661 You can find that console in your browser 32 00:02:03,661 --> 00:02:08,740 by pressing Command-Option-I, or Control-Option-I, 33 00:02:08,740 --> 00:02:14,245 or right-clicking anywhere on the page, and selecting "Inspect element". 34 00:02:14,245 --> 00:02:19,009 Pause the talkthrough now, and try to bring up your dev console 35 00:02:19,009 --> 00:02:21,707 to see that message. 36 00:02:21,707 --> 00:02:23,939 So, did you see it? Great! 37 00:02:23,939 --> 00:02:26,656 You can close the console now if you'd like, 38 00:02:26,656 --> 00:02:28,580 as it can take up a lot of room. 39 00:02:28,580 --> 00:02:32,962 It can also get distracting since it'll show you every error as I'm typing. 40 00:02:32,962 --> 00:02:35,515 It is a great tool for debugging, though. 41 00:02:35,515 --> 00:02:38,359 So definitely file it away in your toolbox. 42 00:02:38,359 --> 00:02:42,325 Now let me actually do something to the page with JavaScript, 43 00:02:42,325 --> 00:02:47,034 using a line of code that will not make a lot of sense yet. 44 00:02:56,671 --> 00:02:58,596 See what happened? 45 00:02:58,596 --> 00:03:03,128 Our webpage disappeared, and was replaced with our "leet hacker" message. 46 00:03:03,128 --> 00:03:07,895 We'll go into more details about how this line of code actually works. 47 00:03:07,895 --> 00:03:12,219 But basically it found the `` tag, and replaced the contents. 48 00:03:12,219 --> 00:03:16,530 Now what would happen if I copied and pasted this `` tag, 49 00:03:16,530 --> 00:03:20,163 and stuck it up in the `` with the `` tag? 50 00:03:20,163 --> 00:03:23,095 It doesn't work-- why not? 51 00:03:23,095 --> 00:03:26,861 Because the webpage evaluates the `` tag 52 00:03:26,861 --> 00:03:29,203 before it sees the `` tag. 53 00:03:29,203 --> 00:03:34,808 And it says, "Uh-oh, I haven't even seen `document.body` yet, 54 00:03:34,808 --> 00:03:38,494 "And you're trying to manipulate it! That can't happen." 55 00:03:38,494 --> 00:03:43,762 That's why we have to put our `` tag at the bottom of the page. 56 00:03:43,762 --> 00:03:46,861 So that the webpage sees the `` tag first, 57 00:03:46,861 --> 00:03:51,219 sees everything in it, and then we start doing stuff to it. 58 00:03:51,219 --> 00:03:54,809 We want to make sure that the webpage exists first. 59 00:03:54,809 --> 00:03:56,672 And that's different from CSS: 60 00:03:56,672 --> 00:03:59,576 We want to put our `` tag at the beginning, 61 00:03:59,576 --> 00:04:02,530 because the CSS parser is fine with applying styles 62 00:04:02,530 --> 00:04:04,435 to things that don't exist yet. 63 00:04:04,435 --> 00:04:07,036 It'll just apply them once they happen. 64 00:04:07,036 --> 00:04:09,909 But JavaScript DOM is not fine with that. 65 00:04:09,909 --> 00:04:12,973 So make sure it goes at the bottom here. 66 00:04:12,973 --> 00:04:16,357 Try adding the `` tag in the next challenge, 67 00:04:16,357 --> 00:04:18,916 making sure you put it at the bottom, 68 00:04:18,916 --> 00:04:24,245 and then I promise I will explain much more about this line right here.