WEBVTT X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000 00:00:01.996 --> 00:00:04.990 [MUSIC PLAYING] 00:01:12.355 --> 00:01:14.850 [VIDEO PLAYBACK] 00:01:42.340 --> 00:01:45.760 - All the way to the top and then you pass it down. 00:01:45.760 --> 00:01:47.230 - This is for you, Yale. 00:01:47.230 --> 00:01:48.460 We love you, Yale. 00:01:48.460 --> 00:01:50.096 - We're here to cheer for Harvard. 00:01:50.096 --> 00:01:51.042 - Yeah. 00:01:51.042 --> 00:01:51.988 Go Harvard. 00:01:54.678 --> 00:01:55.845 - Take one and pass it down. 00:01:55.845 --> 00:01:56.620 - Pass them down. 00:01:56.620 --> 00:01:59.945 - It's not gonna say something like Yale sucks is it? 00:01:59.945 --> 00:02:02.330 - It says go Harvard. 00:02:02.330 --> 00:02:03.710 - We're nice. 00:02:03.710 --> 00:02:05.033 - You see that [BLEEP]? 00:02:05.033 --> 00:02:05.575 Look at them. 00:02:05.575 --> 00:02:07.060 They passed the paper. 00:02:07.060 --> 00:02:09.800 It's gonna happen. 00:02:09.800 --> 00:02:12.460 It's actually gonna happen. 00:02:12.460 --> 00:02:13.680 I can't [BLEEP] believe it. 00:02:13.680 --> 00:02:15.810 - What do you think of Yale? 00:02:15.810 --> 00:02:18.666 - They don't think good. 00:02:18.666 --> 00:02:20.560 - It may be a complete mess, I don't know. 00:02:20.560 --> 00:02:21.075 - You can't really fix it now. 00:02:21.075 --> 00:02:21.880 - Does everyone have it? 00:02:21.880 --> 00:02:23.093 Does anyone have their stuff? 00:02:23.093 --> 00:02:24.385 Does everyone have their stuff? 00:02:24.385 --> 00:02:26.968 - The probability that it's going to be legible is very small. 00:02:26.968 --> 00:02:27.790 - I agree. 00:02:27.790 --> 00:02:29.140 - It's too complicated. 00:02:29.140 --> 00:02:30.490 - Look at all the signs. 00:02:30.490 --> 00:02:32.320 - I know, but it's too complicated. 00:02:32.320 --> 00:02:34.396 - What houses are you guys in? 00:02:34.396 --> 00:02:35.860 That's not a real house. 00:02:35.860 --> 00:02:37.170 - How many extra are there? 00:02:37.170 --> 00:02:37.450 - Ho-fo? 00:02:37.450 --> 00:02:37.950 - Yeah. 00:02:41.425 --> 00:02:43.050 - You guys aren't from Harvard are you? 00:02:43.050 --> 00:02:43.670 - No, Pfoho. 00:02:43.670 --> 00:02:44.210 Pforzheimer. 00:02:44.210 --> 00:02:46.050 - Yeah, but she said ho-fo. 00:02:46.050 --> 00:02:48.295 - Well, she's probably drunk. 00:02:48.295 --> 00:02:49.670 - Does everyone have their stuff? 00:02:49.670 --> 00:02:51.003 - Are all the cards distributed? 00:02:51.003 --> 00:02:53.120 - All right, let's do it now. 00:02:53.120 --> 00:02:55.565 [CHEERING] 00:02:55.565 --> 00:02:58.499 - Yeah, look. 00:02:58.499 --> 00:02:59.477 - Oh my God. 00:02:59.477 --> 00:03:02.411 It's gonna work. 00:03:02.411 --> 00:03:03.878 [CHEERING] 00:03:06.323 --> 00:03:08.279 - Hold up your signs. 00:03:08.279 --> 00:03:09.280 [BLEEP] 00:03:09.280 --> 00:03:14.870 - You suck, you suck, you suck, you suck, you suck, you suck. 00:03:14.870 --> 00:03:15.985 - We [BLEEP] did it. 00:03:15.985 --> 00:03:17.095 [BLEEP] 00:03:17.095 --> 00:03:22.916 - You suck, you suck, you suck, you suck, you suck, you suck. 00:03:22.916 --> 00:03:25.760 - What do you think of Yale, sir? 00:03:25.760 --> 00:03:26.540 - They suck. 00:03:26.540 --> 00:03:27.235 [LAUGHS] 00:03:27.235 --> 00:03:28.205 - They suck? 00:03:28.205 --> 00:03:29.175 - One more time. 00:03:29.175 --> 00:03:31.115 One more time. 00:03:31.115 --> 00:03:34.025 [CHEERING] 00:03:35.937 --> 00:03:37.020 - Oh, there it goes again. 00:03:40.182 --> 00:03:47.702 - Harvard sucks, Harvard sucks, Harvard sucks, Harvard sucks, Harvard sucks, 00:03:47.702 --> 00:03:50.142 Harvard sucks, Harvard sucks. 00:03:53.558 --> 00:03:55.330 [END PLAYBACK] 00:03:55.330 --> 00:03:56.950 ADAM: All right. 00:03:56.950 --> 00:03:59.020 This is CS50. 00:03:59.020 --> 00:04:00.490 Welcome to week eight. 00:04:00.490 --> 00:04:06.160 Last week we learned how to create, read, update, and delete databases 00:04:06.160 --> 00:04:07.180 using SQL. 00:04:07.180 --> 00:04:09.250 But this week-- 00:04:09.250 --> 00:04:10.330 - Adam, everyone. 00:04:10.330 --> 00:04:11.560 Happy Halloween. 00:04:11.560 --> 00:04:13.488 [LAUGHS] 00:04:13.488 --> 00:04:15.416 [APPLAUSE] 00:04:18.790 --> 00:04:19.779 DAVID MALAN: All right. 00:04:19.779 --> 00:04:23.320 So this is the CS50 and this is week eight already. 00:04:23.320 --> 00:04:27.160 My thanks to Adam on today, this Happy Halloween. 00:04:27.160 --> 00:04:29.770 In the coming moments, we're going to learn 00:04:29.770 --> 00:04:32.210 all about how the internet itself works, which of course, 00:04:32.210 --> 00:04:36.250 is a technology that we all use every day, probably using in some form 00:04:36.250 --> 00:04:37.000 right now. 00:04:37.000 --> 00:04:39.833 But we'll see that if you start to understand some of the underlying 00:04:39.833 --> 00:04:42.140 building blocks that power the internet itself, 00:04:42.140 --> 00:04:44.860 we can actually start to build interesting things on top of it. 00:04:44.860 --> 00:04:46.860 And a lot of the apps, the websites that you all 00:04:46.860 --> 00:04:50.290 use every day should become all the more familiar, things that you yourselves 00:04:50.290 --> 00:04:50.800 can create. 00:04:50.800 --> 00:04:52.508 And honestly when things go wrong, you'll 00:04:52.508 --> 00:04:56.410 have all the more of a mental model for how things work or are not, in fact, 00:04:56.410 --> 00:04:59.530 working so that you can ultimately diagnose 00:04:59.530 --> 00:05:00.910 all the more issues yourselves. 00:05:00.910 --> 00:05:03.550 So if we take a look at the internet in the early days, 00:05:03.550 --> 00:05:04.820 it pretty much was just this. 00:05:04.820 --> 00:05:07.570 This happens to be, of course, the geography of the United States. 00:05:07.570 --> 00:05:12.110 And just some of the first points on the internet were these here. 00:05:12.110 --> 00:05:14.740 This was so called ARPANET back in 1969. 00:05:14.740 --> 00:05:17.770 And indeed, the internet had its origins here in the United States 00:05:17.770 --> 00:05:21.490 with just a few computers interconnected somehow initially. 00:05:21.490 --> 00:05:24.290 That, of course, began to grow over time such 00:05:24.290 --> 00:05:27.040 that we eventually had the West Coast connected to the East Coast. 00:05:27.040 --> 00:05:30.010 And nowadays what you can think of these dots on the screen 00:05:30.010 --> 00:05:32.650 as representing are these things called routers, sort 00:05:32.650 --> 00:05:36.250 of computers or really servers that somehow have wires or maybe 00:05:36.250 --> 00:05:40.090 wireless connections between them that allow data to flow from point A 00:05:40.090 --> 00:05:43.060 to B to C. And then this, of course, has been now magnified 00:05:43.060 --> 00:05:46.000 across the entire globe and even above ground 00:05:46.000 --> 00:05:51.070 as well so that we can connect all the more readily to systems anywhere. 00:05:51.070 --> 00:05:55.400 Now, in order to route the data from one router to another, 00:05:55.400 --> 00:05:57.500 we need to somehow make routing decisions. 00:05:57.500 --> 00:06:01.137 And this is the kind of thing that the internet service providers, the ISPs 00:06:01.137 --> 00:06:02.470 of the world just handle for us. 00:06:02.470 --> 00:06:05.890 You and I plug our Macs, our PCs into the network here at Harvard 00:06:05.890 --> 00:06:08.290 or equivalently at Yale or we somehow get online 00:06:08.290 --> 00:06:10.630 via Wi-Fi or cellular technology. 00:06:10.630 --> 00:06:14.200 And then some of these larger entities, these bigger companies or countries, 00:06:14.200 --> 00:06:16.930 handle most of the data getting from point A 00:06:16.930 --> 00:06:20.410 to point B. And if you think about what these routers represent, 00:06:20.410 --> 00:06:22.630 they're indeed just servers somehow interconnected, 00:06:22.630 --> 00:06:26.900 not unlike this grid of tiles here, for instance, back in the Zoom days. 00:06:26.900 --> 00:06:29.782 And in fact here we have, I claim, a grid of routers 00:06:29.782 --> 00:06:32.740 implemented here by the course's teaching fellows and course assistants 00:06:32.740 --> 00:06:33.430 and TAs. 00:06:33.430 --> 00:06:36.820 And if the goal at hand, for instance, is for Phyllis 00:06:36.820 --> 00:06:39.447 to route some piece of information, maybe it's an email, 00:06:39.447 --> 00:06:42.280 maybe it's a request for a web page in the bottom right hand corner, 00:06:42.280 --> 00:06:45.460 all the way up to, say, Brian here in the top left hand corner. 00:06:45.460 --> 00:06:49.930 Suffice it to say if each of these tiles represents a router, a server that 00:06:49.930 --> 00:06:52.090 can move the data back, forth, left, and right, 00:06:52.090 --> 00:06:55.300 that packet of information, so to speak, from Phyllis to Brian 00:06:55.300 --> 00:06:58.390 could take any number of different possible routes. 00:06:58.390 --> 00:07:01.670 Up, down, left, right to go from the one corner to another. 00:07:01.670 --> 00:07:03.820 So let me go ahead and hit Play on this video 00:07:03.820 --> 00:07:06.820 here wherein the teaching fellows play this same role. 00:07:06.820 --> 00:07:08.284 [VIDEO PLAYBACK] 00:07:08.284 --> 00:07:10.236 [MUSIC PLAYING] 00:07:21.460 --> 00:07:22.043 [END PLAYBACK] 00:07:22.043 --> 00:07:24.168 DAVID MALAN: All right, so in this particular case, 00:07:24.168 --> 00:07:26.280 the data was routed pretty straightforwardly 00:07:26.280 --> 00:07:27.390 up and then to the left. 00:07:27.390 --> 00:07:30.030 But suppose that one or more of the staff were a bit busy. 00:07:30.030 --> 00:07:32.310 Maybe one of the routers is congested. 00:07:32.310 --> 00:07:34.440 That is to say, just get way more envelopes 00:07:34.440 --> 00:07:36.240 at a moment in time that it can handle. 00:07:36.240 --> 00:07:38.490 Thankfully the design of the internet is such 00:07:38.490 --> 00:07:41.340 that there's often multiple ways the data can get from point A 00:07:41.340 --> 00:07:45.100 to point B, maybe going through point C or point D instead. 00:07:45.100 --> 00:07:48.720 And so there's a resilience there even as some of the servers themselves 00:07:48.720 --> 00:07:49.410 might go down. 00:07:49.410 --> 00:07:52.140 So allow me to propose that we use the same grid of routers 00:07:52.140 --> 00:07:56.742 now to route the data in a slightly different way this time. 00:07:56.742 --> 00:07:58.710 [VIDEO PLAYBACK] 00:07:58.710 --> 00:08:00.678 [MUSIC PLAYING] 00:08:23.310 --> 00:08:24.130 [END PLAYBACK] 00:08:24.130 --> 00:08:25.130 DAVID MALAN: So success. 00:08:25.130 --> 00:08:27.380 You'll see perhaps later just how many takes it took 00:08:27.380 --> 00:08:29.060 us to actually get that routing right. 00:08:29.060 --> 00:08:33.140 But it does in fact manifest that you can travel different paths in order 00:08:33.140 --> 00:08:36.502 to get the data from point A to point B. So as we talk about routers, 00:08:36.502 --> 00:08:38.960 as you think of the internet, I mean, think of those humans 00:08:38.960 --> 00:08:40.520 as just representing these routers. 00:08:40.520 --> 00:08:43.159 Points A to P and everywhere in between. 00:08:43.159 --> 00:08:47.780 Now, how do the teaching staff know to route that packet up and then 00:08:47.780 --> 00:08:50.810 down or left and right in order to get to the destination? 00:08:50.810 --> 00:08:54.410 Well, all of them were programmed, so to speak, to understand protocols. 00:08:54.410 --> 00:08:59.480 It's called TCP and IP otherwise known together typically as TCP/IP. 00:08:59.480 --> 00:09:01.970 And you've probably seen these acronyms at some point 00:09:01.970 --> 00:09:05.238 in the real world, on the internet, on some kind of documentation, a text 00:09:05.238 --> 00:09:07.280 even if you haven't really thought hard about it. 00:09:07.280 --> 00:09:11.040 But IP is certainly the more common of the two perhaps in common culture. 00:09:11.040 --> 00:09:13.230 So what does TCP and IP do for us? 00:09:13.230 --> 00:09:15.200 Well, really two primary things. 00:09:15.200 --> 00:09:19.220 Any computer or any teaching staff member who understands TCP/IP 00:09:19.220 --> 00:09:22.280 knows how to get data from point A to point B. But how? 00:09:22.280 --> 00:09:25.070 Well, let's break down what that problem to be solved is. 00:09:25.070 --> 00:09:27.500 IP, otherwise known as Internet Protocol, 00:09:27.500 --> 00:09:31.370 is a protocol that computers speak that allow them to know how 00:09:31.370 --> 00:09:33.560 to address computers on the internet. 00:09:33.560 --> 00:09:37.560 And a protocol is just a set of conventions that computers adhere to. 00:09:37.560 --> 00:09:40.610 So someone wrote code that probably has a whole lot of conditionals 00:09:40.610 --> 00:09:43.160 that tells the computer what to do if something happens. 00:09:43.160 --> 00:09:46.610 Like if I receive a packet, then send it to the next server 00:09:46.610 --> 00:09:47.600 or something like that. 00:09:47.600 --> 00:09:49.850 In the human world, we have protocols too. 00:09:49.850 --> 00:09:54.260 In healthier times, it was quite common to extend your hand to another human 00:09:54.260 --> 00:09:55.340 in order to greet them. 00:09:55.340 --> 00:09:59.300 And if they're following human protocol, they would presumably grab your hand 00:09:59.300 --> 00:10:02.690 and shake it, at least in a culture like this one here on campus. 00:10:02.690 --> 00:10:06.260 And now that is a human protocol in that someone initiates it, 00:10:06.260 --> 00:10:08.822 someone responds to it, and you both sort of know what to do. 00:10:08.822 --> 00:10:10.280 Your programmed to know what to do. 00:10:10.280 --> 00:10:12.410 So same idea with internet protocol. 00:10:12.410 --> 00:10:15.530 Computers just know what to do when they've been programmed to do so. 00:10:15.530 --> 00:10:16.640 So what does this mean? 00:10:16.640 --> 00:10:22.340 If IP decides that every computer in the world will have a unique address, 00:10:22.340 --> 00:10:27.830 just like the Science Center around the corner might have a unique address of 1 00:10:27.830 --> 00:10:32.090 Oxford Street, Cambridge, Massachusetts, 02138, USA. 00:10:32.090 --> 00:10:34.550 IP dictates that every computer on the internet 00:10:34.550 --> 00:10:36.233 have a unique address of this form. 00:10:36.233 --> 00:10:38.900 And this too is probably something you've seen in the real world 00:10:38.900 --> 00:10:40.817 even if you haven't thought too hard about it. 00:10:40.817 --> 00:10:44.270 It's a number and what's called dotted decimal notation, which 00:10:44.270 --> 00:10:47.450 means it's a decimal number dot something dot something dot something. 00:10:47.450 --> 00:10:51.140 So four digits separated by convention by decimal point, 00:10:51.140 --> 00:10:53.910 although there are newer and bigger versions of the same. 00:10:53.910 --> 00:10:56.570 And these so called IP addresses that might 00:10:56.570 --> 00:11:02.570 be as simple as 1.2.3.4 uniquely identify a computer on the internet. 00:11:02.570 --> 00:11:07.160 The numbers have to range from 0 to 255 each. 00:11:07.160 --> 00:11:10.340 And that's a bit of a hint just as you start to think more computationally. 00:11:10.340 --> 00:11:13.100 If each of these is a number from 0 to 255, 00:11:13.100 --> 00:11:17.180 how many bits does that suggest each number is using? 00:11:17.180 --> 00:11:19.800 Feel free to shout it out. 00:11:19.800 --> 00:11:21.900 How many bits gives us 255? 00:11:21.900 --> 00:11:23.770 256 total possibilities. 00:11:23.770 --> 00:11:24.570 So eight bits. 00:11:24.570 --> 00:11:26.778 That should just be sort of a heuristic in your mind. 00:11:26.778 --> 00:11:31.650 Anytime you hear something that's in the range of 0 to 255 or 256 values total, 00:11:31.650 --> 00:11:35.070 think back to week 0, which gives us eight bits plus another eight bits 00:11:35.070 --> 00:11:36.820 another eight bits and another eight bits, 00:11:36.820 --> 00:11:40.720 which is to say an IP address typically is 32 bits in total. 00:11:40.720 --> 00:11:43.680 Now, if we do another bit of quick mental math or think back to week 0, 00:11:43.680 --> 00:11:49.170 if every IP address is 32 bits, how many computers can we have on the internet 00:11:49.170 --> 00:11:50.730 at once? 00:11:50.730 --> 00:11:52.410 Give or take. 00:11:52.410 --> 00:11:56.510 Roughly 4 billion is the ballpark. 00:11:56.510 --> 00:11:59.010 And we don't need to be super precise for discussion's sake. 00:11:59.010 --> 00:12:01.450 But roughly 4 billion is how high you can 00:12:01.450 --> 00:12:04.930 count, assuming no negative numbers, if you have 32 bits in total. 00:12:04.930 --> 00:12:09.155 Now, that's not terribly many numbers of addresses, 00:12:09.155 --> 00:12:11.530 especially considering the number of humans in the world, 00:12:11.530 --> 00:12:15.210 the number of us that do have laptops or desktops or devices more generally, 00:12:15.210 --> 00:12:16.990 phones in our pockets and the like. 00:12:16.990 --> 00:12:19.260 So let me just stipulate for today's purposes 00:12:19.260 --> 00:12:22.860 that there's even a newer and improved version of IP otherwise known 00:12:22.860 --> 00:12:24.000 as version 6. 00:12:24.000 --> 00:12:26.610 This is version 4 but still super popular. 00:12:26.610 --> 00:12:32.250 Version 6 uses 128 bits, which is a huge number of possible permutations. 00:12:32.250 --> 00:12:34.650 I daresay I can't even pronounce that number it's so big. 00:12:34.650 --> 00:12:38.100 So there are ways around even this limitation already. 00:12:38.100 --> 00:12:41.290 So every computer has an address like this. 00:12:41.290 --> 00:12:42.670 What does that really mean? 00:12:42.670 --> 00:12:45.870 Well, suppose that I was Phyllis in the story told visually earlier 00:12:45.870 --> 00:12:47.610 and I want to send a message to Brian. 00:12:47.610 --> 00:12:50.220 Well, both Phyllis and Brian have IP addresses. 00:12:50.220 --> 00:12:52.560 And suppose that Brian's IP address happens 00:12:52.560 --> 00:12:56.010 to be 1.2.3.4 in that top left hand corner. 00:12:56.010 --> 00:12:59.610 Well, Phyllis's Mac or PC or phone would essentially 00:12:59.610 --> 00:13:03.480 do the equivalent on this human envelope by writing the two 00:13:03.480 --> 00:13:07.270 address in the middle of the envelope, as is our human convention, like this. 00:13:07.270 --> 00:13:09.630 So this is an envelope, a piece of information, 00:13:09.630 --> 00:13:12.090 an email, a text message, whatever destined for Brian. 00:13:12.090 --> 00:13:15.660 And so she would have her computer put Brian's IP address in the middle. 00:13:15.660 --> 00:13:19.320 Her IP address is maybe 5.6.7.8. 00:13:19.320 --> 00:13:23.400 So just like our human convention, I might write 5.6.7.8 00:13:23.400 --> 00:13:24.750 at the top of the envelope. 00:13:24.750 --> 00:13:27.030 Five, six, seven, eight. 00:13:27.030 --> 00:13:29.700 Thereby indicating what the return address is. 00:13:29.700 --> 00:13:33.120 And this is helpful, because if Brian's computer needs to acknowledge receipt, 00:13:33.120 --> 00:13:36.570 if he needs to reply in some form, this way the envelope has 00:13:36.570 --> 00:13:38.050 all the information we need. 00:13:38.050 --> 00:13:40.980 But in the real world, servers do a lot of things nowadays. 00:13:40.980 --> 00:13:44.670 Not just email but maybe chat, maybe video conferencing, maybe 00:13:44.670 --> 00:13:46.810 any number of other services as well. 00:13:46.810 --> 00:13:50.430 And so it turns out that an address alone might not be sufficient, 00:13:50.430 --> 00:13:54.010 because how does Brian's computer know when he opens the envelope, 00:13:54.010 --> 00:13:56.790 so to speak, that this should be interpreted as an email 00:13:56.790 --> 00:14:00.630 or interpreted as a chat message or interpreted as a video attachment 00:14:00.630 --> 00:14:01.680 that Phyllis has sent? 00:14:01.680 --> 00:14:05.220 Well, we need some other mechanism, some other hint on this envelope 00:14:05.220 --> 00:14:08.860 to distinguish one type of internet service from another. 00:14:08.860 --> 00:14:14.130 And so that's where the other acronym in TCP/IP comes in, which is TCP. 00:14:14.130 --> 00:14:16.980 So this stands for Transmission Control Protocol, 00:14:16.980 --> 00:14:19.560 which is just a different set of conventions 00:14:19.560 --> 00:14:23.320 that computers adhere to in order to solve a couple of different problems. 00:14:23.320 --> 00:14:27.780 One is this problem of distinguishing one type of service from another. 00:14:27.780 --> 00:14:29.230 Now, what does that mean? 00:14:29.230 --> 00:14:32.070 Well, humans decades ago decided as they started 00:14:32.070 --> 00:14:35.250 inventing all of these various internet services, the web being 00:14:35.250 --> 00:14:39.240 the first one, how they might-- or the web now being the most popular ones. 00:14:39.240 --> 00:14:42.780 They decided to assign different services that can 00:14:42.780 --> 00:14:44.850 be used on the internet unique numbers. 00:14:44.850 --> 00:14:46.920 And so two of the most common are these. 00:14:46.920 --> 00:14:50.250 80 is the number that a bunch of humans decided years ago will 00:14:50.250 --> 00:14:52.770 represent what you and I know as HTTP. 00:14:52.770 --> 00:14:55.710 And we'll talk more technically in a bit about what HTTP is. 00:14:55.710 --> 00:14:59.430 But obviously it's the thing that's in the beginning of every URL nowadays. 00:14:59.430 --> 00:15:03.130 Or HTTPS, which, of course, has the S added to it. 00:15:03.130 --> 00:15:04.590 And that has its own unique number. 00:15:04.590 --> 00:15:06.660 And for now, the S just means Secure. 00:15:06.660 --> 00:15:09.900 One is encrypted or scrambled somehow for privacy's sake 00:15:09.900 --> 00:15:11.340 and the other is unencrypted. 00:15:11.340 --> 00:15:13.410 It's a little more vulnerable to interception. 00:15:13.410 --> 00:15:18.570 So these two numbers are what the world decided when implementing TCP shall 00:15:18.570 --> 00:15:20.290 uniquely identify those services. 00:15:20.290 --> 00:15:21.340 So what does this mean? 00:15:21.340 --> 00:15:24.430 Well, this means that if Brian's computer in the story from before 00:15:24.430 --> 00:15:27.240 is hosting not like an email server but maybe he has a website 00:15:27.240 --> 00:15:30.670 and Phyllis is requesting Brian's home page or something like that. 00:15:30.670 --> 00:15:34.350 She would have her Mac or PC or phone not only 00:15:34.350 --> 00:15:39.420 write Brian's IP address in the middle of the envelope but also the number, 00:15:39.420 --> 00:15:41.760 otherwise known as a port number that she 00:15:41.760 --> 00:15:44.610 wants this envelope to be routed to. 00:15:44.610 --> 00:15:46.950 Now, 80 would be insecure nowadays. 00:15:46.950 --> 00:15:53.520 HTTP:// is sort of passe and we almost always see HTTPS:// now. 00:15:53.520 --> 00:15:55.500 So I'm just going to go with best practice 00:15:55.500 --> 00:15:57.520 and I'm going to add a colon and then the number 00:15:57.520 --> 00:16:01.570 443 at the end of Brian's IP address. 00:16:01.570 --> 00:16:05.032 So now I have an IP address for Brian, the port number for the service 00:16:05.032 --> 00:16:07.740 that this is relevant to, and I'm not going to bother writing it, 00:16:07.740 --> 00:16:09.865 but it turns out that Phyllis's computer would also 00:16:09.865 --> 00:16:12.370 choose a port number, maybe a random port number, 00:16:12.370 --> 00:16:14.610 so that Brian can conversely reply. 00:16:14.610 --> 00:16:17.670 And then the computer can know which response 00:16:17.670 --> 00:16:20.700 is coming back for which request. 00:16:20.700 --> 00:16:23.160 But the most important one is this one in the two field 00:16:23.160 --> 00:16:25.890 whereby this distinguishes this from an email, a chat 00:16:25.890 --> 00:16:28.380 message, a video conference session or a Zoom or whatnot 00:16:28.380 --> 00:16:31.450 from anything else happening on Brian's computer at the same time. 00:16:31.450 --> 00:16:34.830 So all this time if you've seen these terms TCP and IP, 00:16:34.830 --> 00:16:38.250 those are really two of the most important things that they do. 00:16:38.250 --> 00:16:41.400 But TCP does one other thing that's super useful too. 00:16:41.400 --> 00:16:47.100 It turns out that it's super common nowadays especially 00:16:47.100 --> 00:16:50.340 to transmit a lot of media on the internet, whether it's an image 00:16:50.340 --> 00:16:53.280 or maybe it's a movie file, and it would be a little obnoxious, 00:16:53.280 --> 00:16:56.510 to say the least, if your downloading a really big file 00:16:56.510 --> 00:16:59.030 meant that no one else in your dorm room or your household 00:16:59.030 --> 00:17:01.670 could actually download anything until you're actually done. 00:17:01.670 --> 00:17:04.339 So of course, multiple people nowadays can be on the internet 00:17:04.339 --> 00:17:07.069 at once even if all of the connections are a little slower. 00:17:07.069 --> 00:17:09.920 But one person's usage does not block someone else's. 00:17:09.920 --> 00:17:11.480 Now, how does this work? 00:17:11.480 --> 00:17:14.210 Well, TCP/IP in conjunction with IP can also 00:17:14.210 --> 00:17:17.520 allow you to take a really big image of a cat, which the internet of course 00:17:17.520 --> 00:17:19.940 is filled with, and take a big image of a cat 00:17:19.940 --> 00:17:24.510 or a big video file of a cat and fragment it into multiple pieces. 00:17:24.510 --> 00:17:27.195 So I'm just going to roughly tear it down the middle 00:17:27.195 --> 00:17:29.070 and then maybe tear it down the middle again. 00:17:29.070 --> 00:17:31.010 So now it's four different fragments. 00:17:31.010 --> 00:17:34.610 And I'm sorry, but the computer will be reassembling these for us. 00:17:34.610 --> 00:17:38.570 And what Phyllis's computer could do now if she's 00:17:38.570 --> 00:17:41.480 uploading this picture of a cat to Brian's web server, 00:17:41.480 --> 00:17:44.630 well, she could put one fragment in this envelope 00:17:44.630 --> 00:17:48.950 and then have three separate envelopes for the other three fragments. 00:17:48.950 --> 00:17:51.860 And what she could then do on the outside of this envelope 00:17:51.860 --> 00:17:53.480 is just kind of number them somehow. 00:17:53.480 --> 00:17:57.530 And in fact, this is something else that TCP and IP together would do for us. 00:17:57.530 --> 00:18:02.060 This first envelope now might say something like one out of four 00:18:02.060 --> 00:18:06.950 in the memo field, so to speak, of the metaphorical envelope here. 00:18:06.950 --> 00:18:08.630 Now, this should be enough information. 00:18:08.630 --> 00:18:11.330 Because now if Brian gets all four of these envelopes, 00:18:11.330 --> 00:18:14.450 he presumably knows how to reassemble the picture of the cat in order top 00:18:14.450 --> 00:18:15.530 to bottom, left to right. 00:18:15.530 --> 00:18:19.010 But more importantly, suppose that one of the routers, one 00:18:19.010 --> 00:18:21.710 of the TFs in the video is sort of distracted 00:18:21.710 --> 00:18:24.120 and they sort of drop one of the packets. 00:18:24.120 --> 00:18:25.880 And that's a metaphor actually in practice 00:18:25.880 --> 00:18:27.470 for when a router gets really busy. 00:18:27.470 --> 00:18:29.300 It's got way too much data coming in. 00:18:29.300 --> 00:18:31.177 It might metaphorically drop packets. 00:18:31.177 --> 00:18:32.510 What does that mean in practice? 00:18:32.510 --> 00:18:34.820 I mean, it literally just ignores the zeros and ones. 00:18:34.820 --> 00:18:37.970 It doesn't save them to its memory, because there's just no room left. 00:18:37.970 --> 00:18:40.160 So it's equivalent to dropping the packet. 00:18:40.160 --> 00:18:45.380 So suppose now that Brian gets one of four, three of four, and four of four. 00:18:45.380 --> 00:18:51.270 What can his computer infer now after receiving those three packets? 00:18:51.270 --> 00:18:54.330 One of four, three of four, and four of four. 00:18:54.330 --> 00:18:55.330 What's the use there? 00:18:55.330 --> 00:18:59.340 Yeah, I think you're signaling with your fingers which one-- 00:18:59.340 --> 00:19:00.280 can I call on you? 00:19:00.280 --> 00:19:03.310 Yeah, so he's missing two out of four, the second of the packets. 00:19:03.310 --> 00:19:05.310 And this is useful now because you could imagine 00:19:05.310 --> 00:19:07.690 he can send some message back to Phyllis saying, hey, 00:19:07.690 --> 00:19:10.920 please retransmit number two of four without having 00:19:10.920 --> 00:19:13.380 to redownload the entirety of the cat. 00:19:13.380 --> 00:19:16.680 So there's an efficiency there as well. 00:19:16.680 --> 00:19:20.040 So TCP/IP allows data really to go from point A 00:19:20.040 --> 00:19:24.100 to point B while solving a bunch of these problems along the way. 00:19:24.100 --> 00:19:28.050 So nowadays if you ever see mentioned on your Mac or PC of your so called IP 00:19:28.050 --> 00:19:32.280 address, that is the sort of problem that's being solved. 00:19:32.280 --> 00:19:39.405 Questions now on these protocols, these conventions called TCP and IP? 00:19:39.405 --> 00:19:41.780 That's the extent to which we'll need to understand them. 00:19:41.780 --> 00:19:43.322 Won't have to implement them, per se. 00:19:43.322 --> 00:19:46.510 We'll just take them hereafter for granted. 00:19:46.510 --> 00:19:50.380 Any questions that you've ever been wondering about your home network? 00:19:50.380 --> 00:19:51.202 Yeah. 00:19:51.202 --> 00:19:55.138 AUDIENCE: What happens when TCP-- like, when you try to send a message? 00:19:55.138 --> 00:19:57.550 Does it know if that user got the message or not? 00:19:57.550 --> 00:19:59.050 DAVID MALAN: A really good question. 00:19:59.050 --> 00:20:02.100 How does TCP know that a user got a message? 00:20:02.100 --> 00:20:05.340 Another aspect, another feature of TCP is 00:20:05.340 --> 00:20:08.160 that Brian's computer by design of this protocol 00:20:08.160 --> 00:20:10.660 will also acknowledge the packets that he's received. 00:20:10.660 --> 00:20:11.910 And it will do it efficiently. 00:20:11.910 --> 00:20:15.510 If Brian receives all four packets in a pretty narrow window of time, 00:20:15.510 --> 00:20:18.510 his computer will send to Phyllis's computer a quick message saying 00:20:18.510 --> 00:20:20.255 essentially received all four. 00:20:20.255 --> 00:20:22.380 Otherwise he'll say the opposite, which is that I'm 00:20:22.380 --> 00:20:24.990 missing for instance two out of four. 00:20:24.990 --> 00:20:27.300 And that just ensures ultimately that all of the data 00:20:27.300 --> 00:20:29.970 is indeed arrived so that you're not missing 00:20:29.970 --> 00:20:34.530 like a quadrant of the cat in question. 00:20:34.530 --> 00:20:36.630 All right, but that's not the only problem 00:20:36.630 --> 00:20:38.430 that needs to be solved ultimately. 00:20:38.430 --> 00:20:43.380 We also need to make the internet user friendly, if you will. 00:20:43.380 --> 00:20:47.940 And it would be really tedious if you had to visit websites, for instance, 00:20:47.940 --> 00:20:50.520 by way of their IP addresses. 00:20:50.520 --> 00:20:56.130 1.2.3.4 is pretty memorable, but there's like 4 billion other possible addresses 00:20:56.130 --> 00:20:56.640 available. 00:20:56.640 --> 00:20:59.130 And it would be super tedious to remember those. 00:20:59.130 --> 00:21:02.370 It would be bad marketing to advertise those. 00:21:02.370 --> 00:21:05.992 In fact, most of you probably don't even know the phone numbers of your closest 00:21:05.992 --> 00:21:08.700 friends and family members anymore because you instead store them 00:21:08.700 --> 00:21:11.340 in your contacts or in your address book associating 00:21:11.340 --> 00:21:15.630 with numbers that are completely opaque with actual names or strings, 00:21:15.630 --> 00:21:16.480 if you will. 00:21:16.480 --> 00:21:19.530 The same goes for the internet too, even though every computer 00:21:19.530 --> 00:21:22.830 does have and must have a unique IP address numerically. 00:21:22.830 --> 00:21:23.370 Why? 00:21:23.370 --> 00:21:27.030 Won't routers or computers, computers just crunch numbers very readily, 00:21:27.030 --> 00:21:29.490 but we humans work better with strings of text. 00:21:29.490 --> 00:21:32.880 We need some system for converting user friendly strings 00:21:32.880 --> 00:21:38.340 like harvard.edu or yale.edu or google.com to the underlying IP 00:21:38.340 --> 00:21:38.850 addresses. 00:21:38.850 --> 00:21:41.620 And that's where the next acronym comes in today, 00:21:41.620 --> 00:21:44.710 which is DNS, Domain Name System. 00:21:44.710 --> 00:21:48.250 So this is just another technology that's been in use for some time now. 00:21:48.250 --> 00:21:52.560 And it's a collection of servers on the internet whose purpose in life 00:21:52.560 --> 00:21:57.520 is to convert domain names to IP addresses and maybe vice versa as well. 00:21:57.520 --> 00:21:59.680 So let me stipulate for today's purposes, 00:21:59.680 --> 00:22:03.810 there are some root DNS servers in the world that, long story short, know 00:22:03.810 --> 00:22:07.570 about all of the dot coms, all of the dot edus, all of the dot, 00:22:07.570 --> 00:22:11.170 dot, dot, all of the other top level domains around the world, 00:22:11.170 --> 00:22:12.240 as well as in the US. 00:22:12.240 --> 00:22:15.360 And then there are some smaller DNS servers 00:22:15.360 --> 00:22:18.720 owned by companies, owned by universities, and even 00:22:18.720 --> 00:22:21.030 in your apartments or homes most likely. 00:22:21.030 --> 00:22:24.000 Indeed, if you have a home router plugged into the wall somewhere, 00:22:24.000 --> 00:22:26.250 that's not only routing your data in and out 00:22:26.250 --> 00:22:28.230 of your apartment or home or dorm room. 00:22:28.230 --> 00:22:35.140 It's also typically serving as a local therefore faster DNS server, a cache 00:22:35.140 --> 00:22:35.640 if you will. 00:22:35.640 --> 00:22:39.000 It's sort of locally saving your most frequently accessed websites 00:22:39.000 --> 00:22:41.970 in their IP addresses just to avoid bothering the bigger, more 00:22:41.970 --> 00:22:44.350 expensive, busier servers all day long. 00:22:44.350 --> 00:22:46.110 So there's DNS servers all over. 00:22:46.110 --> 00:22:50.460 If you poke around your settings in Windows or Mac OS or Android or iOS, 00:22:50.460 --> 00:22:53.340 you'll see mention of DNS, and you'll probably 00:22:53.340 --> 00:22:56.430 see the IP addresses of the servers whose purpose in life 00:22:56.430 --> 00:22:58.000 is to do this conversion for you. 00:22:58.000 --> 00:22:59.970 But this is a requisite feature if we just 00:22:59.970 --> 00:23:02.730 want the internet to be user friendly and allow us 00:23:02.730 --> 00:23:05.700 to use words instead of numbers alone. 00:23:05.700 --> 00:23:07.860 What's inside of these DNS servers? 00:23:07.860 --> 00:23:09.510 It's essentially a spreadsheet. 00:23:09.510 --> 00:23:11.880 Or if we can say it more geekily, it's essentially 00:23:11.880 --> 00:23:15.720 like a hash table of some sort, which it has keys and values. 00:23:15.720 --> 00:23:17.100 The key is the domain name. 00:23:17.100 --> 00:23:19.530 Harvard.edu, yale.edu, google.com. 00:23:19.530 --> 00:23:23.490 And the value is the corresponding IP address, or in many cases 00:23:23.490 --> 00:23:27.640 IP addresses plural, of the corresponding servers. 00:23:27.640 --> 00:23:30.210 So here already even though I've drawn it fairly abstractly 00:23:30.210 --> 00:23:33.060 like you would on a chalkboard, it's really probably implemented 00:23:33.060 --> 00:23:34.200 as some kind of table. 00:23:34.200 --> 00:23:36.570 Maybe a hash table, maybe a database table, 00:23:36.570 --> 00:23:38.470 maybe SQL or something like that. 00:23:38.470 --> 00:23:41.100 Or maybe it's even just a linked list or an array. 00:23:41.100 --> 00:23:46.600 We just have to somehow enable this computer to convert one to the other. 00:23:46.600 --> 00:23:50.040 Now, just to be super precise, DNS servers actually 00:23:50.040 --> 00:23:53.470 convert what are called fully qualified domain names, which is generally 00:23:53.470 --> 00:23:59.760 not just harvard.edu but more verbose www.harvard.edu and www.google.com. 00:23:59.760 --> 00:24:03.630 So the whole thing that you would see as a substring of the URL. 00:24:03.630 --> 00:24:05.460 So that's what DNS does. 00:24:05.460 --> 00:24:08.790 And that's what your university, your company, your home router 00:24:08.790 --> 00:24:09.960 are doing for you. 00:24:09.960 --> 00:24:15.310 Let me pause here to see if there are any questions. 00:24:15.310 --> 00:24:18.100 This too is just a technology now we'll take for granted. 00:24:18.100 --> 00:24:20.520 It just works. 00:24:20.520 --> 00:24:22.930 Questions at all? 00:24:22.930 --> 00:24:23.430 No? 00:24:23.430 --> 00:24:24.070 All right. 00:24:24.070 --> 00:24:26.937 So let's now transition among our protocols 00:24:26.937 --> 00:24:28.770 really to the last for today, which will set 00:24:28.770 --> 00:24:31.270 the stage for actually solving problems with these 00:24:31.270 --> 00:24:33.390 and writing some code ultimately. 00:24:33.390 --> 00:24:34.290 HTTP. 00:24:34.290 --> 00:24:36.570 This is something that you see or hear all day 00:24:36.570 --> 00:24:39.210 long even though you rarely have to bother typing it anymore. 00:24:39.210 --> 00:24:42.810 Odds are if you go to harvard.edu, yale.edu, google.com, 00:24:42.810 --> 00:24:46.870 you don't bother typing HTTP, let alone HTTPS, manually anymore. 00:24:46.870 --> 00:24:47.370 Why? 00:24:47.370 --> 00:24:50.703 Because your browser auto completes that kind of thing just to make life easier. 00:24:50.703 --> 00:24:53.610 But it is officially at the beginning of every URL 00:24:53.610 --> 00:24:57.510 you visit, either HTTP or the more secure HTTPS, 00:24:57.510 --> 00:25:01.260 whenever you're using your browser to access some website. 00:25:01.260 --> 00:25:06.780 So HTTP stands for Hypertext Transfer Protocol. 00:25:06.780 --> 00:25:10.830 And it's easily one of the most popular, daresay one of the most powerful 00:25:10.830 --> 00:25:12.480 features of the internet nowadays. 00:25:12.480 --> 00:25:16.170 But the mental model to have here is that HTTP or the web more 00:25:16.170 --> 00:25:19.710 generally is kind of a service that runs on top of the internet. 00:25:19.710 --> 00:25:23.160 And maybe Zoom or Microsoft Teams is another service 00:25:23.160 --> 00:25:25.200 that runs on top of the internet. 00:25:25.200 --> 00:25:27.930 And iMessage and technologies like it is another service that 00:25:27.930 --> 00:25:29.160 runs on top of the internet. 00:25:29.160 --> 00:25:32.880 So the internet is really the lower level plumbing, the TCP/IP stuff, 00:25:32.880 --> 00:25:35.580 the DNS stuff, that just gets data from point A to point B. 00:25:35.580 --> 00:25:39.000 But now, and we're in a software development class 00:25:39.000 --> 00:25:43.980 ultimately here in CS50, HTTP is the application level protocol. 00:25:43.980 --> 00:25:47.490 It's sort of what programmers use, what companies use, 00:25:47.490 --> 00:25:52.140 what developers use ultimately to use the underlying plumbing to build 00:25:52.140 --> 00:25:54.100 interesting and powerful things. 00:25:54.100 --> 00:25:58.890 So what does this mean when it comes to accessing services via HTTP 00:25:58.890 --> 00:26:01.110 or the more secure HTTPS? 00:26:01.110 --> 00:26:03.862 Well, here is a representative URL. 00:26:03.862 --> 00:26:05.820 Even though you might not type the whole thing, 00:26:05.820 --> 00:26:08.410 if you poke around your address bar, this is what's up there. 00:26:08.410 --> 00:26:10.380 With that said, a lot of browsers nowadays 00:26:10.380 --> 00:26:14.970 are kind of simplifying if not dumbing down what you see with your human eyes 00:26:14.970 --> 00:26:17.760 just to shorten the strings, especially on mobile devices. 00:26:17.760 --> 00:26:20.460 But almost always, if you click the URL or highlight it, 00:26:20.460 --> 00:26:21.780 then you see the whole thing. 00:26:21.780 --> 00:26:25.530 But on many browsers, you might only ever see example.com. 00:26:25.530 --> 00:26:27.310 But all of this information is there. 00:26:27.310 --> 00:26:31.290 It's just getting more and more hidden just for user interfaces sake. 00:26:31.290 --> 00:26:34.510 Well, it turns out when you visit a URL, by default, 00:26:34.510 --> 00:26:37.630 especially if you type nothing after the dot com in this case, 00:26:37.630 --> 00:26:40.680 you're technically implicitly adding a single slash. 00:26:40.680 --> 00:26:44.310 So a single denotes the root of the server. 00:26:44.310 --> 00:26:47.670 That is the default page or folder in the server. 00:26:47.670 --> 00:26:49.950 And the slash, whether or not you type it or not, 00:26:49.950 --> 00:26:51.840 is implicitly going to be there. 00:26:51.840 --> 00:26:55.380 And that just means give me the default. Whatever is at www.example.com, 00:26:55.380 --> 00:26:57.750 give me that page or that folder. 00:26:57.750 --> 00:27:00.120 But URLs can be longer than this. 00:27:00.120 --> 00:27:03.057 And more generally, there can be a path, so to speak. 00:27:03.057 --> 00:27:04.140 And this is a term of art. 00:27:04.140 --> 00:27:09.910 A path is some sequence of folder and/or file names after a URL like this. 00:27:09.910 --> 00:27:12.930 And so you might see more specifically that a URL contains 00:27:12.930 --> 00:27:14.190 a very specific file. 00:27:14.190 --> 00:27:18.300 This isn't as common nowadays anymore, though we will begin today 00:27:18.300 --> 00:27:19.530 by using this technique. 00:27:19.530 --> 00:27:24.030 But if there is a file called literally file.html or something else 00:27:24.030 --> 00:27:29.250 on the server, that file is going to be what this URL pulls up on the computer. 00:27:29.250 --> 00:27:32.880 Meanwhile, you might have /folder/, which just means show me 00:27:32.880 --> 00:27:34.380 whatever's inside of this folder. 00:27:34.380 --> 00:27:38.190 Or you might have more verbosely /folder/file.html, 00:27:38.190 --> 00:27:41.280 which will show you that file in that folder. 00:27:41.280 --> 00:27:43.920 And meanwhile, just to give some other terms of art, 00:27:43.920 --> 00:27:46.717 this is the so called fully qualified domain name. 00:27:46.717 --> 00:27:49.050 And again, these vocab words don't matter all that much, 00:27:49.050 --> 00:27:50.970 but you'll hear or see them over time. 00:27:50.970 --> 00:27:53.790 We generally colloquially just refer to this 00:27:53.790 --> 00:27:57.120 as the domain name, which is a little less precise 00:27:57.120 --> 00:27:59.340 but gets the job done certainly in conversation. 00:27:59.340 --> 00:28:03.270 And this part here I described briefly earlier. 00:28:03.270 --> 00:28:07.800 What's the name for this suffix at the very end of the fully qualified domain 00:28:07.800 --> 00:28:09.330 name? 00:28:09.330 --> 00:28:10.110 The? 00:28:10.110 --> 00:28:10.630 Yeah. 00:28:10.630 --> 00:28:11.450 AUDIENCE: Top Level Domain. 00:28:11.450 --> 00:28:12.200 DAVID MALAN: Yeah. 00:28:12.200 --> 00:28:13.670 Top Level Domain or TLD. 00:28:13.670 --> 00:28:16.520 And this is just some form of categorization of the URLs. 00:28:16.520 --> 00:28:19.498 Now, the internet got its start within the United States 00:28:19.498 --> 00:28:22.040 and a lot of the first websites, of course, came from the US. 00:28:22.040 --> 00:28:25.207 And so for better or for worse, the sort of stake was planted in the ground. 00:28:25.207 --> 00:28:29.150 So generally .com indicated at least early on that it was some kind 00:28:29.150 --> 00:28:32.390 of commercial enterprise, a business that owned a domain name. 00:28:32.390 --> 00:28:36.760 .edu is an educational institution. .net was some kind of network. 00:28:36.760 --> 00:28:38.660 .gov was the US government. 00:28:38.660 --> 00:28:41.810 Now, there are also country code TLDs. 00:28:41.810 --> 00:28:45.380 CCTLDs like .uk or .jp. 00:28:45.380 --> 00:28:49.160 Every country in the world has its own two letter 00:28:49.160 --> 00:28:54.290 TLD that might very well be restricted to only servers or companies or people 00:28:54.290 --> 00:28:56.030 in that country. 00:28:56.030 --> 00:28:58.130 Many of them can be used by anyone. 00:28:58.130 --> 00:29:02.420 You've used a lot of URLs in this class ending in cs50.io. 00:29:02.420 --> 00:29:04.940 That doesn't mean input output. 00:29:04.940 --> 00:29:07.910 It actually is a TLD from another country 00:29:07.910 --> 00:29:11.930 that lets anyone on the internet pay for and on an annual basis 00:29:11.930 --> 00:29:12.950 using that domain. 00:29:12.950 --> 00:29:17.780 .tv for instance you might see in some cases, like twitch.tv and the like. 00:29:17.780 --> 00:29:20.367 That too is owned by another country that 00:29:20.367 --> 00:29:22.700 allows others in the English speaking world in this case 00:29:22.700 --> 00:29:24.530 to use it as though it connotes TV. 00:29:24.530 --> 00:29:26.330 But those are just different types of TLDs 00:29:26.330 --> 00:29:29.510 that roughly categorize where the domain lives. 00:29:29.510 --> 00:29:31.910 But it doesn't necessarily mean it's commercial anymore. 00:29:31.910 --> 00:29:35.030 It doesn't necessarily mean it's a network anymore. 00:29:35.030 --> 00:29:38.180 For the most part, there are hundreds of TLDs 00:29:38.180 --> 00:29:40.190 now, for better or for worse, most of which 00:29:40.190 --> 00:29:42.770 are less common than these big ones. 00:29:42.770 --> 00:29:46.400 But most anyone can buy most of them with just some restrictions on things 00:29:46.400 --> 00:29:50.480 like .edu and .gov that are still very much regulated. 00:29:50.480 --> 00:29:54.950 This, meanwhile, is what we might call the host name. www, It's obviously 00:29:54.950 --> 00:29:56.990 a super common convention. 00:29:56.990 --> 00:30:00.200 Almost every website uses www as its host name. 00:30:00.200 --> 00:30:01.580 But that's a human convention. 00:30:01.580 --> 00:30:02.870 It's not a requirement. 00:30:02.870 --> 00:30:05.630 And indeed, some websites don't even bother having a host name. 00:30:05.630 --> 00:30:09.710 They just use their domain to advertise their websites. 00:30:09.710 --> 00:30:13.040 This now is going to be the scheme or the protocol 00:30:13.040 --> 00:30:18.540 and this is just going to indicate via what protocol the computer, your Mac, 00:30:18.540 --> 00:30:23.120 your PC, your phone should use when accessing content at that address. 00:30:23.120 --> 00:30:25.800 Because indeed, there are other protocols you can use. 00:30:25.800 --> 00:30:32.090 But for the most part, we'll only focus on HTTP or equivalently HTTPS. 00:30:32.090 --> 00:30:32.600 All right. 00:30:32.600 --> 00:30:36.410 Any questions now on those just definitions, building blocks of URLs, 00:30:36.410 --> 00:30:40.770 just so we all sort of share a common vocabulary? 00:30:40.770 --> 00:30:42.210 Any questions at all? 00:30:42.210 --> 00:30:43.165 Yeah. 00:30:43.165 --> 00:30:45.720 AUDIENCE: What is the local post IP? 00:30:45.720 --> 00:30:46.470 DAVID MALAN: Sure. 00:30:46.470 --> 00:30:48.345 We'll come back to this actually later today. 00:30:48.345 --> 00:30:50.910 There's a technical term known as local host, which 00:30:50.910 --> 00:30:54.317 is a generic name for your computer, your Mac, your PC, your phone, 00:30:54.317 --> 00:30:56.400 especially when you're doing software development. 00:30:56.400 --> 00:30:59.250 And by convention, your own computer has not only 00:30:59.250 --> 00:31:02.850 whatever IP address you get from your university or your internet service 00:31:02.850 --> 00:31:03.390 provider. 00:31:03.390 --> 00:31:06.810 It also has a reflexive IP address, one that just always refers 00:31:06.810 --> 00:31:10.332 to itself, which is 127.0.0.1. 00:31:10.332 --> 00:31:11.790 And that's just a human convention. 00:31:11.790 --> 00:31:14.390 Humans decided that shall refer always to your computer. 00:31:14.390 --> 00:31:16.140 And it's actually going to be useful today 00:31:16.140 --> 00:31:19.770 and onward, because we can use that when doing development on our own computers 00:31:19.770 --> 00:31:20.610 ultimately. 00:31:20.610 --> 00:31:27.690 Other questions on URLs, IP, DNS, or any of these building blocks? 00:31:27.690 --> 00:31:28.380 All right. 00:31:28.380 --> 00:31:32.310 So what do we mean by HTTP being a protocol? 00:31:32.310 --> 00:31:34.950 When I extended my hand earlier as a human handshake, 00:31:34.950 --> 00:31:38.640 a typical human in healthy times would know to respond in turn. 00:31:38.640 --> 00:31:43.590 Well, how does Brian's computer to respond to Phyllis's envelope, whatever 00:31:43.590 --> 00:31:44.610 message is therein? 00:31:44.610 --> 00:31:47.880 Well, assuming that Brian is indeed still a web server in the story 00:31:47.880 --> 00:31:50.190 and Phyllis was trying to upload a cat or maybe 00:31:50.190 --> 00:31:55.020 download a cat from Brian's web server, inside of Phyllis's envelope 00:31:55.020 --> 00:31:57.930 would have been a message literally in text. 00:31:57.930 --> 00:32:00.000 And it's English for the most part. 00:32:00.000 --> 00:32:03.030 And it would contain at the beginning of that message literally one 00:32:03.030 --> 00:32:04.110 of these English verbs. 00:32:04.110 --> 00:32:05.970 Either get, which means just that. 00:32:05.970 --> 00:32:07.080 Get me the home page. 00:32:07.080 --> 00:32:08.190 Get me a picture of a cat. 00:32:08.190 --> 00:32:11.010 Get me a picture of a dog or a video or anything else. 00:32:11.010 --> 00:32:14.700 Or post, which often means post. 00:32:14.700 --> 00:32:19.050 That is put, that is upload a picture of a cat or a dog 00:32:19.050 --> 00:32:21.030 or something else to the server instead. 00:32:21.030 --> 00:32:23.728 That's not strictly the only use cases for these, 00:32:23.728 --> 00:32:26.520 but you can generally think them as one is just getting information 00:32:26.520 --> 00:32:30.360 and the other is posting from the client, from Phyllis to the server, 00:32:30.360 --> 00:32:31.350 in this case, Brian. 00:32:31.350 --> 00:32:33.510 So those are the two keywords that we might see. 00:32:33.510 --> 00:32:34.870 And why is this useful? 00:32:34.870 --> 00:32:38.250 Well, it turns out we can start to see in our own Mac or PC 00:32:38.250 --> 00:32:39.990 some of these very same messages. 00:32:39.990 --> 00:32:46.290 For instance, if Phyllis were visiting not Brian's but example.com, that web 00:32:46.290 --> 00:32:49.080 server, inside of her metaphorical envelope, 00:32:49.080 --> 00:32:51.210 there would be a textual message that literally 00:32:51.210 --> 00:32:56.670 starts with get slash then the word HTTP then the version she's using. 00:32:56.670 --> 00:32:58.140 1.1 is very common. 00:32:58.140 --> 00:33:00.120 Two and three are becoming more common. 00:33:00.120 --> 00:33:02.220 But HTTP generally looks like this. 00:33:02.220 --> 00:33:07.650 The next line of text in her envelope would probably say host: 00:33:07.650 --> 00:33:10.830 then literally the fully qualified domain name of the server 00:33:10.830 --> 00:33:12.430 she's accessing, just in case. 00:33:12.430 --> 00:33:15.030 And this happens super commonly, especially on small websites. 00:33:15.030 --> 00:33:19.470 If one server is hosting multiple domain names, multiple websites, 00:33:19.470 --> 00:33:22.080 this just distinguishes which one she actually wants. 00:33:22.080 --> 00:33:25.450 And then there's usually a whole bunch of other lines of text as well. 00:33:25.450 --> 00:33:28.600 So where can you actually see this? 00:33:28.600 --> 00:33:31.830 Well, let me actually go ahead and do this. 00:33:31.830 --> 00:33:35.550 Give me just a moment, and I'm going to open up on my computer here 00:33:35.550 --> 00:33:38.010 an empty Chrome window in incognito mode. 00:33:38.010 --> 00:33:40.287 Generally speaking, incognito mode or private mode 00:33:40.287 --> 00:33:42.120 is used when you don't want there to be left 00:33:42.120 --> 00:33:43.800 remnants of what websites you visited. 00:33:43.800 --> 00:33:46.020 And it has the effect for software developers 00:33:46.020 --> 00:33:50.010 of just forgetting any things you might have tried already within your browser, 00:33:50.010 --> 00:33:51.480 including things called cookies. 00:33:51.480 --> 00:33:53.130 More on those another time. 00:33:53.130 --> 00:33:54.880 Your autocomplete history and the like. 00:33:54.880 --> 00:33:56.820 So for development purposes, incognito mode 00:33:56.820 --> 00:34:00.120 is especially helpful because it's sort of like starting with a clean slate 00:34:00.120 --> 00:34:02.730 every time you open a new private or incognito mode. 00:34:02.730 --> 00:34:06.400 So there's not going to be any remnants of previous testing or code 00:34:06.400 --> 00:34:07.650 that you've been playing with. 00:34:07.650 --> 00:34:09.233 And I'm going to go ahead and do this. 00:34:09.233 --> 00:34:13.500 I'm going to go ahead and right click or Control click on Chrome. 00:34:13.500 --> 00:34:15.030 I'm going to choose Inspect. 00:34:15.030 --> 00:34:18.050 And it's going to pull up this window, sometimes on the side 00:34:18.050 --> 00:34:19.050 sometimes on the bottom. 00:34:19.050 --> 00:34:21.960 I'm going to move it to the bottom just so we can see it a little more readily. 00:34:21.960 --> 00:34:23.219 And I'm going to zoom in. 00:34:23.219 --> 00:34:26.080 And it's going to look a little arcane at first. 00:34:26.080 --> 00:34:28.380 And I'm going to just highlight a few of these tabs. 00:34:28.380 --> 00:34:32.685 We'll see here along the top that there's elements, console, sources, 00:34:32.685 --> 00:34:34.810 network, and a whole bunch of other things as well. 00:34:34.810 --> 00:34:36.870 This is the advanced mode in Chrome. 00:34:36.870 --> 00:34:39.780 And Safari and Firefox and Edge have their own equivalents 00:34:39.780 --> 00:34:40.590 of these features. 00:34:40.590 --> 00:34:43.620 They've always been there, even if you've never clicked the right button 00:34:43.620 --> 00:34:44.909 to enable these features. 00:34:44.909 --> 00:34:47.625 And I'm going to focus for a moment on network like this. 00:34:47.625 --> 00:34:50.500 This is a feature of the browser that's going to allow me, 00:34:50.500 --> 00:34:52.800 the programmer in this case, so the engineer, 00:34:52.800 --> 00:34:56.040 to just kind of look at what messages my browser is actually 00:34:56.040 --> 00:34:57.390 sending to a server. 00:34:57.390 --> 00:35:00.280 So let me go ahead and do something like this. 00:35:00.280 --> 00:35:05.400 Let me go ahead and visit for instance in my browser here, 00:35:05.400 --> 00:35:08.700 and I'm going to shrink the window just a little bit so we can see it exactly, 00:35:08.700 --> 00:35:15.660 I'm going to visit https://www.harvard.edu. 00:35:15.660 --> 00:35:17.700 And now I'm going to hit Enter. 00:35:17.700 --> 00:35:21.750 And a whole bunch of stuff just happened along the bottom of my screen. 00:35:21.750 --> 00:35:24.250 And I'm going to try to pull my window up just a little bit. 00:35:24.250 --> 00:35:26.560 So we can focus on a subset of this. 00:35:26.560 --> 00:35:29.280 Let me pull this up, covering up really the content of the page, 00:35:29.280 --> 00:35:33.040 focusing on these lower level details down here. 00:35:33.040 --> 00:35:37.100 And what I want to see first is-- 00:35:37.100 --> 00:35:39.590 let me-- oh, sorry. 00:35:39.590 --> 00:35:42.230 Let me go ahead and reload this page here 00:35:42.230 --> 00:35:44.060 after retaining the log so that we can see 00:35:44.060 --> 00:35:45.860 absolutely everything on the screen. 00:35:45.860 --> 00:35:49.400 And to be clear, I just checked because I forgot earlier preserve log 00:35:49.400 --> 00:35:51.750 because I wanted to preserve everything on the screen. 00:35:51.750 --> 00:35:53.340 I want to see everything all at once. 00:35:53.340 --> 00:35:54.410 And we'll see this. 00:35:54.410 --> 00:35:58.070 The very first line of output is completely overwhelming with detail 00:35:58.070 --> 00:35:59.150 at first glance. 00:35:59.150 --> 00:36:04.280 But what you'll see here, if I start to scroll down and down and down and down, 00:36:04.280 --> 00:36:06.380 are the so called request headers. 00:36:06.380 --> 00:36:07.890 And let me zoom in here. 00:36:07.890 --> 00:36:12.530 And what you're seeing inside of Chrome, inside of its Network tab in its so 00:36:12.530 --> 00:36:13.880 called developer tools. 00:36:13.880 --> 00:36:15.860 Again, this is just for engineering types. 00:36:15.860 --> 00:36:19.130 You'll see all of the headers, all of the lines of text 00:36:19.130 --> 00:36:24.710 that magically were sent by my Mac to harvard.edu, much like from Phyllis 00:36:24.710 --> 00:36:26.570 to Brian's server in that story. 00:36:26.570 --> 00:36:29.673 So I can see exactly what messages are being sent. 00:36:29.673 --> 00:36:31.590 And a lot of this we haven't talked about yet, 00:36:31.590 --> 00:36:35.255 but we do see some mention of get and we see some mention of slash 00:36:35.255 --> 00:36:37.520 and a bunch of other arcane details. 00:36:37.520 --> 00:36:41.990 But notice they're all sort of key value pairs with the colon here indicating 00:36:41.990 --> 00:36:43.368 what the corresponding value is. 00:36:43.368 --> 00:36:45.410 Now, most of this is not going to be interesting, 00:36:45.410 --> 00:36:48.160 and we're not going to focus too much on the weeds of all of this. 00:36:48.160 --> 00:36:52.880 But it indeed gives us a sense of what's inside of that virtual envelope. 00:36:52.880 --> 00:36:54.830 Now, harvard.edu is one thing. 00:36:54.830 --> 00:36:58.800 But there's other websites we might visit as well. 00:36:58.800 --> 00:37:03.450 And no matter what they are, we're going to expect ultimately an HTTP response. 00:37:03.450 --> 00:37:06.770 So in addition to a computer, like my Mac or Phyllis's computer, 00:37:06.770 --> 00:37:11.360 sending a request containing gets and host and those details too, 00:37:11.360 --> 00:37:15.560 you'll see here in my slide form just representative response 00:37:15.560 --> 00:37:16.490 from the server. 00:37:16.490 --> 00:37:18.920 And notice that key here is that the server is 00:37:18.920 --> 00:37:21.710 responding in the same version of HTTP in this example. 00:37:21.710 --> 00:37:23.990 It's sending back this so called status code. 00:37:23.990 --> 00:37:27.560 Just a numeric code that indicates, in this case, that everything's OK. 00:37:27.560 --> 00:37:30.800 And it includes this header, this HTTP header, 00:37:30.800 --> 00:37:32.870 which again, is just a key value pair saying 00:37:32.870 --> 00:37:35.780 that the type of this content that's coming back from the server 00:37:35.780 --> 00:37:37.730 is text/html. 00:37:37.730 --> 00:37:39.720 More on HTML in just a little bit. 00:37:39.720 --> 00:37:43.010 But for our purposes now, this just means that harvard.edu 00:37:43.010 --> 00:37:44.750 is sending me back a web page. 00:37:44.750 --> 00:37:47.810 And indeed, if we hide all of this technical stuff, 00:37:47.810 --> 00:37:50.300 that's the web page that we saw up here with all 00:37:50.300 --> 00:37:52.070 of the usual imagery and the like. 00:37:52.070 --> 00:37:56.210 And in fact, I can see this if I scroll back up not to request 00:37:56.210 --> 00:37:59.030 headers but response headers. 00:37:59.030 --> 00:38:02.400 You'll see up here that we get back responses, 00:38:02.400 --> 00:38:04.940 including the date that the server responded 00:38:04.940 --> 00:38:07.407 and a whole bunch of other details as well. 00:38:07.407 --> 00:38:09.740 And honestly, this has always been under your fingertips 00:38:09.740 --> 00:38:13.100 and it will soon be useful as we start making web based applications 00:38:13.100 --> 00:38:13.730 ultimately. 00:38:13.730 --> 00:38:16.190 But this very quickly gets overwhelming quickly. 00:38:16.190 --> 00:38:18.680 And so better than this might actually be a tool 00:38:18.680 --> 00:38:21.570 that we can use within our code space itself. 00:38:21.570 --> 00:38:23.540 So let me go back to VS Code here. 00:38:23.540 --> 00:38:24.800 I didn't open any code tabs. 00:38:24.800 --> 00:38:27.050 I'm just going to use my terminal window for a moment. 00:38:27.050 --> 00:38:28.758 And I'm going to run a couple of commands 00:38:28.758 --> 00:38:31.670 that are going to allow me to actually see what 00:38:31.670 --> 00:38:34.160 is going on when I request one website. 00:38:34.160 --> 00:38:38.210 Let me go ahead and use a command called curl for connect URL. 00:38:38.210 --> 00:38:41.360 And this is like a command line black and white program that's 00:38:41.360 --> 00:38:42.920 going to pretend to be a browser. 00:38:42.920 --> 00:38:45.560 And it's going to connect to the URL, show me the headers, 00:38:45.560 --> 00:38:47.870 but it's not going to show me the images of the graphics, which 00:38:47.870 --> 00:38:50.078 might very well be useful to the humans but not to me 00:38:50.078 --> 00:38:51.330 right now as the developer. 00:38:51.330 --> 00:38:52.520 So I'm going to do curl. 00:38:52.520 --> 00:38:54.260 I'm going to do -i. 00:38:54.260 --> 00:38:58.910 And then I'm going to do https://www.harvard.edu/ 00:38:58.910 --> 00:39:03.470 as though I'm pretending to be a browser requesting the home page. 00:39:03.470 --> 00:39:07.340 And what's nice about curl is, albeit overwhelming too, 00:39:07.340 --> 00:39:12.050 you'll get back a whole response from the server containing only those header 00:39:12.050 --> 00:39:14.990 values, the key value pairs inside of the envelope. 00:39:14.990 --> 00:39:16.790 And we'll ignore almost all of these. 00:39:16.790 --> 00:39:18.620 But here is the response from the server. 00:39:18.620 --> 00:39:21.470 It responded using a new and improved version of HTTP. 00:39:21.470 --> 00:39:25.010 In this case, version two, and it gave me back a 200. 00:39:25.010 --> 00:39:27.800 There's my content type, text/html. 00:39:27.800 --> 00:39:30.440 And then this char set happens to do with the encoding, 00:39:30.440 --> 00:39:33.060 if it's Unicode or ASCII or something else. 00:39:33.060 --> 00:39:35.720 And then there's all this other overwhelming detail for now. 00:39:35.720 --> 00:39:39.200 But this is the beginnings of my ability to just kind of poke around and see 00:39:39.200 --> 00:39:40.610 how the server works. 00:39:40.610 --> 00:39:46.330 And it turns out too that we'll be able to see other potential responses as 00:39:46.330 --> 00:39:46.830 well. 00:39:46.830 --> 00:39:52.070 So for instance, HTTP might not only return 100. 00:39:52.070 --> 00:39:53.720 What if I do this instead? 00:39:53.720 --> 00:40:01.880 Let me go ahead and visit curl -i http://www.harvard.edu. 00:40:01.880 --> 00:40:04.250 So notice I deliberately used the insecure version 00:40:04.250 --> 00:40:09.440 of the URL, which maybe Harvard's system administration doesn't like anymore. 00:40:09.440 --> 00:40:13.280 Well, how can they ensure that I, the end user, the student, 00:40:13.280 --> 00:40:17.810 nonetheless use HTTPS even if I didn't type it myself? 00:40:17.810 --> 00:40:22.160 Well, let me run just that command with just HTTP, not HTTPS, 00:40:22.160 --> 00:40:24.320 and you'll see that everything is not OK. 00:40:24.320 --> 00:40:26.300 It didn't come back with a 200. 00:40:26.300 --> 00:40:30.230 It came back with 301 and this message saying Harvard moved permanently. 00:40:30.230 --> 00:40:32.990 But here's where you can look for another clue. 00:40:32.990 --> 00:40:35.510 Among all of these lines, most of which I don't care about, 00:40:35.510 --> 00:40:38.670 there's a location patient header colon that's 00:40:38.670 --> 00:40:41.760 a little hint to me that says where Harvard University has apparently 00:40:41.760 --> 00:40:43.260 moved to on the web. 00:40:43.260 --> 00:40:47.090 And what's different about this URL, just to be clear? 00:40:47.090 --> 00:40:48.760 It has the S included. 00:40:48.760 --> 00:40:50.830 And what your browser will do by default, 00:40:50.830 --> 00:40:54.430 because Google and Microsoft and Mozilla programmed it this way, 00:40:54.430 --> 00:40:59.770 whenever it sees a 301 response instead of 200, it won't show you any web page. 00:40:59.770 --> 00:41:03.070 It will look for a location header, find that URL, 00:41:03.070 --> 00:41:06.250 and then automatically quote unquote "redirect" you there too. 00:41:06.250 --> 00:41:09.310 So this is why it doesn't matter what we type in the browser. 00:41:09.310 --> 00:41:13.450 Harvard can have its servers send these semi secret messages to our browsers, 00:41:13.450 --> 00:41:16.810 and then it will just visit a second URL all automatically. 00:41:16.810 --> 00:41:19.580 And you can do this with hostnames as well. 00:41:19.580 --> 00:41:24.230 Suppose that Harvard does not want to standardize on harvard.edu. 00:41:24.230 --> 00:41:24.730 Why? 00:41:24.730 --> 00:41:26.680 They just want it to always be www. 00:41:26.680 --> 00:41:27.860 Maybe it's a branding thing. 00:41:27.860 --> 00:41:29.068 Maybe it's a technical thing. 00:41:29.068 --> 00:41:32.020 We can see the exact same response here. 00:41:32.020 --> 00:41:37.830 This first tells me when I visit HTTP harvard.edu with no www, 00:41:37.830 --> 00:41:41.140 Harvard minimally wants me to be using a secure connection. 00:41:41.140 --> 00:41:45.710 If I then, OK fine, cooperate, let me go ahead and clear my screen. 00:41:45.710 --> 00:41:48.190 Let me add the S but not the www. 00:41:48.190 --> 00:41:52.480 You can see here that it again responded with 301 up here. 00:41:52.480 --> 00:41:55.510 And the location now adds the www. 00:41:55.510 --> 00:41:59.180 So it's just a way of bouncing users from one place to another. 00:41:59.180 --> 00:42:04.330 And this is all thanks to HTTP boiling down to relatively simple messages 00:42:04.330 --> 00:42:09.700 inside of the envelope that tell the computer, the browser in this case, how 00:42:09.700 --> 00:42:10.790 to respond. 00:42:10.790 --> 00:42:14.182 Now, odds are you've seen others besides 301 00:42:14.182 --> 00:42:17.140 even though you've probably never seen that actual number unless you've 00:42:17.140 --> 00:42:18.520 done this kind of thing before. 00:42:18.520 --> 00:42:21.100 But there probably is a number that everyone in this room 00:42:21.100 --> 00:42:24.520 has seen even if you never really wondered why is it that number. 00:42:24.520 --> 00:42:25.490 I think you're smiling. 00:42:25.490 --> 00:42:27.530 What number are you thinking of? 00:42:27.530 --> 00:42:29.240 Yeah, so 404. 00:42:29.240 --> 00:42:30.380 Why is 404? 00:42:30.380 --> 00:42:33.620 Well, 404 indicates by convention not found. 00:42:33.620 --> 00:42:36.770 And now why the world decided years ago to show us 00:42:36.770 --> 00:42:41.810 normal humans on the internet 404 is anything significant is unclear. 00:42:41.810 --> 00:42:43.100 That's sort of bad design. 00:42:43.100 --> 00:42:45.830 What do I care if the status code is 404? 00:42:45.830 --> 00:42:49.190 But it's common enough on the internet that probably all of us have seen it. 00:42:49.190 --> 00:42:53.870 But that just means that some server when you visit a URL that's incorrect, 00:42:53.870 --> 00:42:58.310 maybe it's outdated, the URL has been changed, if you see a 404, 00:42:58.310 --> 00:43:01.100 it just means that the virtual envelope that came from the server 00:43:01.100 --> 00:43:04.730 back to your Mac or PC or phone contains not 200 OK, 00:43:04.730 --> 00:43:09.030 not 301 moved permanently, but 404 not found instead. 00:43:09.030 --> 00:43:12.020 And it's usually accompanied by a technical message, maybe a cute 00:43:12.020 --> 00:43:14.632 picture of a cat sort of hiding because it means not found 00:43:14.632 --> 00:43:15.590 or something like that. 00:43:15.590 --> 00:43:18.050 The aesthetics are entirely up to the server. 00:43:18.050 --> 00:43:19.910 But that's what the 404 means. 00:43:19.910 --> 00:43:23.300 And there's other codes too, a few of which you'll use in the coming weeks 00:43:23.300 --> 00:43:25.910 as we transition from command line programs in C 00:43:25.910 --> 00:43:28.100 in Python to web based ones. 00:43:28.100 --> 00:43:29.640 We've seen a few of these already. 00:43:29.640 --> 00:43:33.800 And several of them are kind of variants of the same thing, like these 300 ones 00:43:33.800 --> 00:43:34.490 here. 00:43:34.490 --> 00:43:35.480 But we'll see others. 00:43:35.480 --> 00:43:39.770 Like 403 forbidden means you probably forgot to log in 00:43:39.770 --> 00:43:42.740 or you need to log in or something like that. 00:43:42.740 --> 00:43:44.120 Internal server error. 00:43:44.120 --> 00:43:48.410 Right now know in the coming weeks you will absolutely encounter 500 errors 00:43:48.410 --> 00:43:50.420 and they're always your fault. It's going 00:43:50.420 --> 00:43:53.345 to be the equivalent of a segmentation fault in C. 00:43:53.345 --> 00:43:56.975 A 500 error means you or I screwed up when writing some code. 00:43:56.975 --> 00:43:58.100 So we're going to see that. 00:43:58.100 --> 00:44:00.517 But it's just going to be an opportunity for us to fix it. 00:44:00.517 --> 00:44:03.560 If a server is overloaded, you often see 503, 00:44:03.560 --> 00:44:07.470 like something's unavailable because something's too popular or is, 00:44:07.470 --> 00:44:08.930 maybe worse, getting attacked. 00:44:08.930 --> 00:44:12.170 This is an old April Fool's joke. 00:44:12.170 --> 00:44:15.170 418 is not actually used in practice, but someone took the time 00:44:15.170 --> 00:44:18.470 to write up an entire formal technical proposal so that servers 00:44:18.470 --> 00:44:19.910 can respond saying I'm a teapot. 00:44:19.910 --> 00:44:21.530 So it's kind of part of internet lore. 00:44:21.530 --> 00:44:24.660 And there's other ones of these status codes as well. 00:44:24.660 --> 00:44:26.660 But this is useful, because eventually we'll 00:44:26.660 --> 00:44:30.290 see in code you can use this understanding, 00:44:30.290 --> 00:44:35.160 high level as it might be, of HTTP to do some interesting and powerful things. 00:44:35.160 --> 00:44:40.040 So for instance, we can even send fancier URLs to servers. 00:44:40.040 --> 00:44:43.850 It turns out, as we'll soon see, if you send a message like this, 00:44:43.850 --> 00:44:52.070 get/search?q=cats and then HTTP 1.1 or whatever version and you send that 00:44:52.070 --> 00:44:55.490 message to Google server, www.google.com, 00:44:55.490 --> 00:45:00.350 this is how you can specify not just the path of a web page that you want, 00:45:00.350 --> 00:45:02.010 /search in this case. 00:45:02.010 --> 00:45:06.050 The question mark it turns out is going to be a convention in the internet, 00:45:06.050 --> 00:45:12.210 in the web specifically, for passing human user input to the server as well. 00:45:12.210 --> 00:45:15.050 In fact, you've probably never paid close attention to URLs, 00:45:15.050 --> 00:45:17.060 but they very often have question marks. 00:45:17.060 --> 00:45:18.950 They very often have equal signs. 00:45:18.950 --> 00:45:24.230 And indeed, even google.com supports a certain key, q in this case for query, 00:45:24.230 --> 00:45:26.780 and you can put anything you want after that in order 00:45:26.780 --> 00:45:28.740 to search for actual cats. 00:45:28.740 --> 00:45:34.430 So if I actually go back to Chrome itself here for a moment, let me 00:45:34.430 --> 00:45:37.880 pull back open my Chrome browser here, previously 00:45:37.880 --> 00:45:40.552 I was using incognito mode for harvard.edu. 00:45:40.552 --> 00:45:43.010 I've gone ahead and closed that window and opened a new one 00:45:43.010 --> 00:45:45.050 so we can start fresh by visiting Google. 00:45:45.050 --> 00:45:47.540 Normally you and I are in the habit of going to google.com 00:45:47.540 --> 00:45:48.950 and searching via the form. 00:45:48.950 --> 00:45:51.080 Or nowadays you just type your search query 00:45:51.080 --> 00:45:53.900 in the browser itself and it brings you automatically 00:45:53.900 --> 00:45:55.850 to Google or Bing or something else. 00:45:55.850 --> 00:45:57.570 But I can really be pedantic here. 00:45:57.570 --> 00:45:59.600 Let me go ahead and zoom in and I'll manually 00:45:59.600 --> 00:46:07.938 go to https://www.google.com/search?q= maybe cats. 00:46:07.938 --> 00:46:10.730 Now, this would not be a very user friendly experience if all of us 00:46:10.730 --> 00:46:13.140 had to manually type out something crazy like that. 00:46:13.140 --> 00:46:16.220 But that's what the form is redirecting you 00:46:16.220 --> 00:46:20.430 to when you type in more user friendly cats into a text box. 00:46:20.430 --> 00:46:24.500 If I hit Enter here, we'll get back indeed a whole bunch of search results 00:46:24.500 --> 00:46:25.430 about cats. 00:46:25.430 --> 00:46:29.150 If I zoom back in and maybe I change it from cats to dogs, 00:46:29.150 --> 00:46:30.500 that too is going to change. 00:46:30.500 --> 00:46:33.920 And notice it's prepopulating the text box because Google has written 00:46:33.920 --> 00:46:37.200 its code in order to do so as well. 00:46:37.200 --> 00:46:41.390 Now, apropos of the video with which we began today 00:46:41.390 --> 00:46:45.680 from yesteryear, one of the better Yale pranks over the years, 00:46:45.680 --> 00:46:51.350 has anyone actually ever been to safetyschool.org? 00:46:51.350 --> 00:46:54.020 And to our friends at Yale watching live, hi. 00:46:54.020 --> 00:46:55.520 Safetyschool.org. 00:46:55.520 --> 00:47:00.720 So it's kind of fun if you actually visit it depending on who you are. 00:47:00.720 --> 00:47:02.700 So if I open up a new window here. 00:47:02.700 --> 00:47:12.680 And I go to http://safetyschool.org, zooming in, Enter, my oh my. 00:47:12.680 --> 00:47:14.330 Look at where it goes. 00:47:14.330 --> 00:47:15.950 Now, how does that-- 00:47:15.950 --> 00:47:18.345 [APPLAUSE] 00:47:20.740 --> 00:47:22.180 This is not a CS50 thing. 00:47:22.180 --> 00:47:25.780 Someone out there who I don't know who they are for 20 years 00:47:25.780 --> 00:47:29.290 has been paying annually for that domain, safetyschool.org, 00:47:29.290 --> 00:47:31.090 for just this joke. 00:47:31.090 --> 00:47:36.580 But if I now go back into VS Code here in my terminal window and a little more 00:47:36.580 --> 00:47:42.640 sophisticatedly let me do curl -i http://safetyschool.org, 00:47:42.640 --> 00:47:45.413 the browser of course immediately redirected me to the website. 00:47:45.413 --> 00:47:47.080 But what's going on underneath the hood? 00:47:47.080 --> 00:47:50.410 Well, 20 some years ago, someone bought the domain, configured the server 00:47:50.410 --> 00:47:53.020 quite simply to spit this out. 00:47:53.020 --> 00:47:59.980 Safetyschool.org for years has moved permanently to www.yale.edu. 00:47:59.980 --> 00:48:01.990 So just a little demonstration of what you can 00:48:01.990 --> 00:48:04.720 do with just a little bit of understanding of HTTP. 00:48:04.720 --> 00:48:05.830 That's been a lot already. 00:48:05.830 --> 00:48:08.622 We've laid the foundation for understanding how the internet works. 00:48:08.622 --> 00:48:11.740 Now we're going to use it with a language called HTML, Hypertext Markup 00:48:11.740 --> 00:48:16.390 Language, CSS, Cascading Style Sheets, and JavaScript, a proper programming 00:48:16.390 --> 00:48:16.900 language. 00:48:16.900 --> 00:48:19.228 But first it feels opportune to take a 10 minute break. 00:48:19.228 --> 00:48:21.520 We have some wonderful Halloween candy in the transept, 00:48:21.520 --> 00:48:24.444 and we'll be back and 10 with those languages. 00:48:24.444 --> 00:48:25.770 [VIDEO PLAYBACK] 00:48:25.770 --> 00:48:30.900 - We're headed up to Boston, checking out the stadium for the prank. 00:48:33.780 --> 00:48:36.150 A few years ago, I was at a math conference 00:48:36.150 --> 00:48:40.800 and I was sitting around the table at dinner with a few other mathematicians. 00:48:40.800 --> 00:48:44.580 And one of them went to Harvard and started 00:48:44.580 --> 00:48:49.500 telling the story of this amazing prank that was against Harvard. 00:48:49.500 --> 00:48:52.050 And at that point, I felt I had to interrupt 00:48:52.050 --> 00:48:56.670 and said, well, actually I can tell you a lot more about that. 00:48:56.670 --> 00:48:57.450 OK. 00:48:57.450 --> 00:48:59.800 - The idea was perfected in a dorm room. 00:48:59.800 --> 00:49:02.160 - We came up with the idea actually to prank them 00:49:02.160 --> 00:49:03.880 with signs of the football game. 00:49:03.880 --> 00:49:07.470 We threw some ideas out there as far as what the signs would say. 00:49:07.470 --> 00:49:09.990 We eventually settled on we suck. 00:49:09.990 --> 00:49:13.270 - And my immediate reaction was, no, this will never work. 00:49:13.270 --> 00:49:17.370 However, the problem solver in me started thinking, well, maybe we 00:49:17.370 --> 00:49:20.000 can make this work. 00:49:20.000 --> 00:49:21.400 - The problem? 00:49:21.400 --> 00:49:24.490 They had to infiltrate Harvard stadium without getting caught, 00:49:24.490 --> 00:49:29.320 sneaking 1,800 placards, distribute them to unsuspecting Harvard fans, 00:49:29.320 --> 00:49:32.860 and then convince those fans to prank themselves. 00:49:32.860 --> 00:49:33.640 - It's great. 00:49:33.640 --> 00:49:38.290 We thought about basically every possible thing that could go wrong 00:49:38.290 --> 00:49:40.730 and tried to come up with a solution for it. 00:49:40.730 --> 00:49:43.490 - And then you put two reds on top of it. 00:49:43.490 --> 00:49:49.210 - They made fake Harvard IDs and fake backstories, fake placard designs, 00:49:49.210 --> 00:49:52.870 and a 28 member fake pep squad. 00:49:52.870 --> 00:49:56.470 On November 20, 2004, the fake Harvard students 00:49:56.470 --> 00:49:59.320 smuggled the placards into the game. 00:49:59.320 --> 00:50:01.265 - What do you think of Yale, sir? 00:50:01.265 --> 00:50:01.840 - They suck. 00:50:05.450 --> 00:50:08.820 - It's not going to say something like Yale sucks, is it? 00:50:08.820 --> 00:50:12.170 - It says go Harvard. 00:50:12.170 --> 00:50:14.560 - But then trouble. 00:50:14.560 --> 00:50:16.870 - What houses are you guys in? 00:50:16.870 --> 00:50:18.220 That's not a real house. 00:50:18.220 --> 00:50:19.592 - Ho-fo? 00:50:19.592 --> 00:50:20.930 - Yeah. 00:50:20.930 --> 00:50:23.408 You guys aren't from Harvard, are you? 00:50:23.408 --> 00:50:26.450 Can I see your Harvard ID, because I really think you guys are from Yale. 00:50:26.450 --> 00:50:30.230 - I just showed him the front of this ID and all of a sudden, he just ran away 00:50:30.230 --> 00:50:32.960 and he felt so embarrassed. 00:50:32.960 --> 00:50:37.040 - Having escaped one confrontation, they couldn't risk another. 00:50:37.040 --> 00:50:39.080 It was time. 00:50:39.080 --> 00:50:41.400 - This just looks like a total mess. 00:50:41.400 --> 00:50:44.225 We have absolutely no idea if this is going to work. 00:50:44.225 --> 00:50:44.850 - Look at them. 00:50:44.850 --> 00:50:45.812 They have the paper. 00:50:45.812 --> 00:50:46.774 It's gonna happen. 00:50:46.774 --> 00:50:49.660 It's actually gonna happen. 00:50:49.660 --> 00:50:51.700 I can't [BLEEP] believe this. 00:50:51.700 --> 00:50:56.704 - What was once a prank became a legend. 00:50:56.704 --> 00:50:58.636 - We [BLEEP] did it. 00:50:58.636 --> 00:51:02.030 [BLEEP] 00:51:02.030 --> 00:51:05.470 - And immediately we started hearing chants from the other side. 00:51:05.470 --> 00:51:06.110 You suck. 00:51:06.110 --> 00:51:09.210 - You suck, you suck, you suck. 00:51:09.210 --> 00:51:12.938 - And I think it was at that point in time that we knew we had pulled it off. 00:51:12.938 --> 00:51:14.402 - One more time. 00:51:14.402 --> 00:51:16.354 Come on, Harvard. 00:51:16.354 --> 00:51:19.282 - There it comes again. 00:51:19.282 --> 00:51:21.730 [CHEERING] 00:51:21.730 --> 00:51:25.690 - I really think it didn't matter that Harvard won because of the prank. 00:51:25.690 --> 00:51:29.845 For a lot of Yale students and alumni, we definitely won that year. 00:51:35.944 --> 00:51:38.379 [END PLAYBACK] 00:51:44.240 --> 00:51:45.730 ALL: All right. 00:51:45.730 --> 00:51:48.370 This is CS50. 00:51:48.370 --> 00:51:49.610 Happy Halloween. 00:51:49.610 --> 00:51:50.870 [LAUGHS] 00:51:50.870 --> 00:51:52.655 [APPLAUSE] 00:51:52.655 --> 00:51:53.780 DAVID MALAN: Thank you all. 00:51:53.780 --> 00:51:55.330 OK, thank you. 00:51:55.330 --> 00:51:56.380 Oh, here. 00:51:56.380 --> 00:51:57.540 Oh, all right. 00:51:57.540 --> 00:51:58.780 A little Halloween candy. 00:51:58.780 --> 00:51:59.620 All right. 00:51:59.620 --> 00:52:00.980 Thank you all. 00:52:00.980 --> 00:52:04.370 So glad I wore the same thing today. 00:52:04.370 --> 00:52:09.940 So in just a moment-- 00:52:09.940 --> 00:52:10.610 thank you. 00:52:10.610 --> 00:52:11.110 OK. 00:52:11.110 --> 00:52:15.430 So in just a moment, we'll transition to understanding 00:52:15.430 --> 00:52:18.620 all the more now what we can do with this underlying infrastructure. 00:52:18.620 --> 00:52:22.450 So again, HTTP and below it TCP/IP is all about just 00:52:22.450 --> 00:52:25.810 getting the data from point A to point B in some standardized way. 00:52:25.810 --> 00:52:27.370 But now let's talk about HTML. 00:52:27.370 --> 00:52:30.910 This is the language in which web pages themselves are written. 00:52:30.910 --> 00:52:32.468 Hypertext Markup Language. 00:52:32.468 --> 00:52:35.510 Now, some of you might have used this before to make personal home pages. 00:52:35.510 --> 00:52:37.990 Some of you might have dabbled even if using some website 00:52:37.990 --> 00:52:39.310 to create your own home page. 00:52:39.310 --> 00:52:42.640 But understanding this language is useful certainly 00:52:42.640 --> 00:52:46.660 for creating the aesthetics of a web page, conveying data that's 00:52:46.660 --> 00:52:47.270 of interest. 00:52:47.270 --> 00:52:51.970 But at the end of the day, it and the language we look at next, CSS, 00:52:51.970 --> 00:52:53.470 are not programming languages. 00:52:53.470 --> 00:52:57.640 There's going to be no functions, no loops, no programming logic. 00:52:57.640 --> 00:53:00.820 But we will end today with a teaser of a proper programming language called 00:53:00.820 --> 00:53:05.770 JavaScript via which you can manipulate all of these various other languages 00:53:05.770 --> 00:53:06.440 as well. 00:53:06.440 --> 00:53:09.110 So ultimately HTML has two features. 00:53:09.110 --> 00:53:12.070 And this is a language that we spend very brief amount of time 00:53:12.070 --> 00:53:15.280 on because it really boils down to just a couple of basic ideas 00:53:15.280 --> 00:53:17.770 and then vocabulary that you'll build out over time 00:53:17.770 --> 00:53:21.040 just by Googling, looking up references, looking at other pages' source code. 00:53:21.040 --> 00:53:24.220 But tags and attributes are what characterize HTML. 00:53:24.220 --> 00:53:25.490 Now, what do I mean by that? 00:53:25.490 --> 00:53:28.750 Here, for instance, is the HTML code via which 00:53:28.750 --> 00:53:31.450 you can make probably the simplest of all web pages, one 00:53:31.450 --> 00:53:36.760 that quite simply says in the browser window, hello title and hello body, 00:53:36.760 --> 00:53:37.570 for instance. 00:53:37.570 --> 00:53:39.170 Now, what does this actually mean? 00:53:39.170 --> 00:53:44.800 If you imagine opening up this code in a browser, be it on a Mac or PC or phone, 00:53:44.800 --> 00:53:47.140 you'll see typically some kind of rectangular window. 00:53:47.140 --> 00:53:49.810 And there's usually a tab that has the title of that page. 00:53:49.810 --> 00:53:52.933 And then most of the rectangular region is the web page itself. 00:53:52.933 --> 00:53:54.850 What you're looking at then is the code that's 00:53:54.850 --> 00:53:58.600 going to put hello title in the title bar, in the tab at the very top. 00:53:58.600 --> 00:54:00.760 And down at the bottom, hello body is going 00:54:00.760 --> 00:54:04.330 to be all that's in the big black and white box that composes 00:54:04.330 --> 00:54:06.223 the rest of the browser window itself. 00:54:06.223 --> 00:54:08.140 Now, what are the salient characteristics here 00:54:08.140 --> 00:54:09.848 that we'll now start to take for granted? 00:54:09.848 --> 00:54:17.170 Well, first, whoops, first let's go ahead and, give me just a moment here, 00:54:17.170 --> 00:54:19.160 and actually do something with this code. 00:54:19.160 --> 00:54:20.702 So I'm going to go ahead and do this. 00:54:20.702 --> 00:54:25.990 Back in VS Code here, I'm going to first create a file called, say, hello.html. 00:54:25.990 --> 00:54:28.990 And in this tab, I'm going to go ahead and really repeat 00:54:28.990 --> 00:54:30.560 exactly that same code. 00:54:30.560 --> 00:54:33.190 Now, I had this line first, doc type HTML. 00:54:33.190 --> 00:54:38.110 Then I had this line, HTML lang equals quote unquote en close quote. 00:54:38.110 --> 00:54:41.470 Then I had inside of that head, then I had inside of that title, 00:54:41.470 --> 00:54:43.053 then inside of that I had hello title. 00:54:43.053 --> 00:54:45.220 And I'm doing this quickly because we'll tease apart 00:54:45.220 --> 00:54:47.080 in a moment what it actually all means. 00:54:47.080 --> 00:54:53.210 And then down here below that so called head, I had just the text hello body. 00:54:53.210 --> 00:54:57.070 So at the moment, that I claim is the entirety of a web page. 00:54:57.070 --> 00:54:59.830 But it currently lives in my code space, so to speak, 00:54:59.830 --> 00:55:02.050 in a file called hello.html. 00:55:02.050 --> 00:55:03.940 That's fine if I want to create it. 00:55:03.940 --> 00:55:06.580 But how do I, how do you, how does anyone on the internet 00:55:06.580 --> 00:55:07.610 actually view it? 00:55:07.610 --> 00:55:11.260 Well, to serve a web page, you indeed need a web server. 00:55:11.260 --> 00:55:14.500 And it turns out that Codespaces comes with one of these pre-installed 00:55:14.500 --> 00:55:17.680 because we CS50 staff did so for you. 00:55:17.680 --> 00:55:20.200 And what you can do in a terminal window once you 00:55:20.200 --> 00:55:24.250 have an HTML file ready to go that you want the world to see, 00:55:24.250 --> 00:55:28.450 you can literally run in your terminal window http-server. 00:55:28.450 --> 00:55:29.530 Single command. 00:55:29.530 --> 00:55:32.860 And what that's going to do for you is start a web server. 00:55:32.860 --> 00:55:37.300 That is to say, a program whose purpose in life is just to serve web pages. 00:55:37.300 --> 00:55:40.420 And even though probably up until now for years you probably, 00:55:40.420 --> 00:55:44.230 if you're like me, equate "server" quote unquote with a physical device. 00:55:44.230 --> 00:55:46.360 Server is really a piece of software. 00:55:46.360 --> 00:55:48.890 It just tends to run on big fancy devices. 00:55:48.890 --> 00:55:50.860 So when we say server, we often all think 00:55:50.860 --> 00:55:54.220 of in our minds eye big, expensive devices, perhaps. 00:55:54.220 --> 00:55:56.650 But a server is just a program whose purpose in life 00:55:56.650 --> 00:56:00.080 is to respond to requests with responses. 00:56:00.080 --> 00:56:01.600 And that's the vernacular there. 00:56:01.600 --> 00:56:04.593 Now, once you run HTTP server, and I'm going to do a bit of magic 00:56:04.593 --> 00:56:07.510 because I set this up before class just to make sure it goes smoothly, 00:56:07.510 --> 00:56:11.950 you'll see some output like this whereby your server is now 00:56:11.950 --> 00:56:14.800 available on a very long URL. 00:56:14.800 --> 00:56:18.910 Mine here is a very long URL that will be different from yours. 00:56:18.910 --> 00:56:22.570 But what this is is a unique identifier that your Codespace has temporarily 00:56:22.570 --> 00:56:25.750 generated so that you can now access and ideally 00:56:25.750 --> 00:56:29.620 only you can access that file using your browser. 00:56:29.620 --> 00:56:33.040 Now, if I flip the URL or you flip the URL to public by right clicking 00:56:33.040 --> 00:56:35.380 or control clicking the right features of VS Code, 00:56:35.380 --> 00:56:37.570 you can enable anyone in the world to visit it. 00:56:37.570 --> 00:56:40.810 But we're not going to ultimately host our websites in your Codespace, 00:56:40.810 --> 00:56:43.870 because as soon as you log off for the night and the thing shuts down, 00:56:43.870 --> 00:56:45.080 the website will go down. 00:56:45.080 --> 00:56:47.840 But at the end of the semester, particularly for final projects, 00:56:47.840 --> 00:56:51.350 we'll show you ways that you can put your own website, your own code 00:56:51.350 --> 00:56:55.820 on the actual internet 24/7, 365 even with your own domain name 00:56:55.820 --> 00:57:00.710 if you want to get one so that it lives independent of your own sleep schedule 00:57:00.710 --> 00:57:02.850 and usage schedule a VS Code here. 00:57:02.850 --> 00:57:08.600 So I'm going to go ahead now and visit this URL in another tab of my browser. 00:57:08.600 --> 00:57:10.540 And what I'll see here is this. 00:57:10.540 --> 00:57:14.180 This is the output of that program called HTTP server. 00:57:14.180 --> 00:57:18.860 And essentially what it is doing is it's using TCP and IP in conjunction 00:57:18.860 --> 00:57:25.047 with HTTP to just run your very own web server on GitHub's own servers as well. 00:57:25.047 --> 00:57:26.630 And that's because of different ports. 00:57:26.630 --> 00:57:29.840 Again, we won't go too much into the weeds of the TCP, the IP, and all 00:57:29.840 --> 00:57:30.590 of that stuff. 00:57:30.590 --> 00:57:33.260 But recall that different port numbers can 00:57:33.260 --> 00:57:35.540 allow you to distinguish one service from another. 00:57:35.540 --> 00:57:39.470 Now, one of the services is, of course, your Codespace, VS Code in the cloud 00:57:39.470 --> 00:57:40.920 that we've been using for weeks. 00:57:40.920 --> 00:57:44.360 But if you want to use the same physical server that GitHub controls 00:57:44.360 --> 00:57:49.130 but actually visit your own web server that I just ran in my terminal window 00:57:49.130 --> 00:57:50.635 in another tab, that's fine. 00:57:50.635 --> 00:57:52.760 They're just going to be using different TCP ports. 00:57:52.760 --> 00:57:55.468 And you and I don't have to care what they are but just that this 00:57:55.468 --> 00:57:57.260 is a feature that TCP supports. 00:57:57.260 --> 00:57:59.090 So what you see here is somewhat arcane. 00:57:59.090 --> 00:58:02.750 This is not a thing that most people on the internet should ever see. 00:58:02.750 --> 00:58:04.700 I'm just doing this for development purposes. 00:58:04.700 --> 00:58:05.780 But this is the index. 00:58:05.780 --> 00:58:09.860 That is the directory, the folder contents of my Codespace, 00:58:09.860 --> 00:58:12.620 and because I deleted everything from prior weeks already, 00:58:12.620 --> 00:58:16.620 all we see right now is hello.html, which I just created. 00:58:16.620 --> 00:58:21.337 So if I click on hello.html within this folder listing, 00:58:21.337 --> 00:58:22.670 you'll be a little underwhelmed. 00:58:22.670 --> 00:58:25.420 And I'll zoom in just so there's something more interesting there. 00:58:25.420 --> 00:58:28.340 But now you see hello comma body. 00:58:28.340 --> 00:58:31.490 But what's interesting, perhaps, is that after this long, 00:58:31.490 --> 00:58:35.580 very cryptic and uninteresting URL, notice at the very end of it, 00:58:35.580 --> 00:58:40.190 and I'll zoom in in a moment, what do you see? /hello.html. 00:58:40.190 --> 00:58:43.040 Which follows the convention I claimed before break 00:58:43.040 --> 00:58:48.290 is how a browser would allow you to access a specific file on a server 00:58:48.290 --> 00:58:51.110 by doing slash and then the name of the file name. 00:58:51.110 --> 00:58:52.880 Everything before it is very cryptic. 00:58:52.880 --> 00:58:55.730 It would be better if I buy a domain name that's 00:58:55.730 --> 00:58:58.800 a little more easy to remember and set that up some other time. 00:58:58.800 --> 00:59:01.100 But for now, let's just focus on only the file names 00:59:01.100 --> 00:59:03.200 that I'm actually creating. 00:59:03.200 --> 00:59:03.920 All right. 00:59:03.920 --> 00:59:06.740 So the code is up and running, underwhelming 00:59:06.740 --> 00:59:09.860 though it might be with the body in the middle of the page. 00:59:09.860 --> 00:59:11.450 And let me zoom in up here too. 00:59:11.450 --> 00:59:14.940 Hello comma title is indeed in the tab, just as promised. 00:59:14.940 --> 00:59:18.660 So what's actually going on with code like this that we just created? 00:59:18.660 --> 00:59:20.940 Well, let's go back to the slide version of the same. 00:59:20.940 --> 00:59:23.000 And let me just highlight a few of these lines. 00:59:23.000 --> 00:59:26.695 The very first line is what's called your document type declaration. 00:59:26.695 --> 00:59:28.820 Doesn't really matter to remember that by phrasing. 00:59:28.820 --> 00:59:32.180 And this is just something you copy paste or do from memory at the top 00:59:32.180 --> 00:59:36.200 of any .html file that you create when making your own web page. 00:59:36.200 --> 00:59:39.500 It's a implicit indicator to the browser that you're 00:59:39.500 --> 00:59:42.830 using the very latest version of HTML, which is version 5. 00:59:42.830 --> 00:59:44.300 You don't mention the number 5. 00:59:44.300 --> 00:59:46.730 Just browsers nowadays are programmed look for this 00:59:46.730 --> 00:59:49.540 to know that you're using the very latest version of the language. 00:59:49.540 --> 00:59:53.180 Languages, just like human languages, evolve over time. 00:59:53.180 --> 00:59:56.880 We're up to version 5 of HTML, but new features get added every few years. 00:59:56.880 --> 01:00:00.110 So indeed, this lecture, this class has been evolving over time too. 01:00:00.110 --> 01:00:03.960 So let's now focus on the next line as well as the bottom line. 01:00:03.960 --> 01:00:06.290 And you'll notice some deliberate symmetry here. 01:00:06.290 --> 01:00:08.810 This here is what we're going to call a tag. 01:00:08.810 --> 01:00:10.580 And it's technically different from this. 01:00:10.580 --> 01:00:11.750 This is a document type declaration. 01:00:11.750 --> 01:00:13.070 It's got the weird exclamation point. 01:00:13.070 --> 01:00:14.180 That's the only anomaly. 01:00:14.180 --> 01:00:15.960 Everything else follows a pattern. 01:00:15.960 --> 01:00:19.880 This is a tag in HTML and it's the HTML tag. 01:00:19.880 --> 01:00:25.580 And a tag generally both starts and stops or opens and closes 01:00:25.580 --> 01:00:26.460 at some point. 01:00:26.460 --> 01:00:29.428 So this is the so called start tag or open tag. 01:00:29.428 --> 01:00:31.970 And this just means essentially to the browser, hey, browser, 01:00:31.970 --> 01:00:35.360 here comes some HTML, the language in which web pages are written. 01:00:35.360 --> 01:00:39.590 This here with the forward slash after the angled bracket 01:00:39.590 --> 01:00:42.373 means hey, browser, that's it for the HTML of this page. 01:00:42.373 --> 01:00:43.790 So that's what I mean by symmetry. 01:00:43.790 --> 01:00:46.310 I started a thought here, finished it down here. 01:00:46.310 --> 01:00:47.900 What's in between those two thoughts? 01:00:47.900 --> 01:00:51.620 Well, here browser, or rather let me clarify one thing. 01:00:51.620 --> 01:00:55.580 This thing here is that other keyword, an attribute. 01:00:55.580 --> 01:00:59.240 An attribute is something that modifies the behavior of a tag. 01:00:59.240 --> 01:01:02.390 So it's similar to an argument in C or in Python 01:01:02.390 --> 01:01:04.012 like a parameter to a function. 01:01:04.012 --> 01:01:05.970 These aren't functions, but it's the same idea. 01:01:05.970 --> 01:01:08.900 Just modifies the default behavior of something instead. 01:01:08.900 --> 01:01:10.100 Lang equals en. 01:01:10.100 --> 01:01:13.640 You can probably guess just means that hey, browser, assume that everything 01:01:13.640 --> 01:01:15.080 hereafter is in English. 01:01:15.080 --> 01:01:18.530 And that might be useful for Google Translate or just search engine 01:01:18.530 --> 01:01:20.750 optimization so that just the server, the browser 01:01:20.750 --> 01:01:23.960 know what human language you have actual content in. 01:01:23.960 --> 01:01:27.110 Like hello title, hello body, even though a good computer can probably 01:01:27.110 --> 01:01:29.180 infer from context often. 01:01:29.180 --> 01:01:30.800 All right, so that's an attribute. 01:01:30.800 --> 01:01:31.970 That's a tag. 01:01:31.970 --> 01:01:36.320 And the whole thing here, everything in between the start tag and end tag, 01:01:36.320 --> 01:01:38.600 we would also call an HTML element. 01:01:38.600 --> 01:01:42.980 That just means everything related to that open and close tag. 01:01:42.980 --> 01:01:43.490 All right. 01:01:43.490 --> 01:01:46.340 Now notice indented inside of, so to speak, 01:01:46.340 --> 01:01:51.750 the HTML open and close tag are another pair of tags, the head tag and the body 01:01:51.750 --> 01:01:55.530 tag or the head element collectively and the body element collectively. 01:01:55.530 --> 01:01:56.280 And same idea. 01:01:56.280 --> 01:01:58.180 Hey browser, here comes the head of my page. 01:01:58.180 --> 01:01:59.550 Hey browser, that's it for the head. 01:01:59.550 --> 01:02:01.420 Hey browser, here comes the body of my page. 01:02:01.420 --> 01:02:03.300 Hey browser, that's it for the body. 01:02:03.300 --> 01:02:06.940 The head is essentially the tiny little strip at the very top, 01:02:06.940 --> 01:02:08.700 including the tab itself. 01:02:08.700 --> 01:02:13.110 The body is like 95% of everything else, the big rectangular region. 01:02:13.110 --> 01:02:16.830 What's inside of your title, of your head of the web page? 01:02:16.830 --> 01:02:18.510 At the moment, just the title. 01:02:18.510 --> 01:02:21.120 So this indicates, hey browser, here comes my title. 01:02:21.120 --> 01:02:22.890 Hey browser, that's it for the title. 01:02:22.890 --> 01:02:26.910 The title of course, is literally quote unquote "hello comma title." 01:02:26.910 --> 01:02:31.800 Meanwhile if we bounce back out here is the second element inside 01:02:31.800 --> 01:02:33.357 of the HTML tag. 01:02:33.357 --> 01:02:35.190 This says, hey browser, here comes the body. 01:02:35.190 --> 01:02:36.690 Hey browser, that's it for the body. 01:02:36.690 --> 01:02:38.700 And hey browser, this is the contents, these 01:02:38.700 --> 01:02:40.840 are the contents of the body itself. 01:02:40.840 --> 01:02:43.200 Now, the indentation is a stylistic thing. 01:02:43.200 --> 01:02:45.870 I did it just to be sort of neat and tidy because it 01:02:45.870 --> 01:02:48.240 suggests what is inside of what. 01:02:48.240 --> 01:02:50.850 But it also suggests a sort of hierarchy. 01:02:50.850 --> 01:02:54.540 And in fact, we'll use terminology from the world of family trees. 01:02:54.540 --> 01:02:59.130 If this is a parent, so to speak, head and body 01:02:59.130 --> 01:03:02.370 would be the child elements of the HTML tag. 01:03:02.370 --> 01:03:05.640 Meanwhile title is a child of the head tag. 01:03:05.640 --> 01:03:08.700 Or equivalently, title is a grandchild of HTML. 01:03:08.700 --> 01:03:10.830 So you can use the same sort of vernacular 01:03:10.830 --> 01:03:14.550 as in the human world when it comes to familial relationships too. 01:03:14.550 --> 01:03:17.260 And that just hints at, again, this same hierarchy. 01:03:17.260 --> 01:03:22.200 So we have tags and they include HTML head, title, body. 01:03:22.200 --> 01:03:23.490 And that's it for now. 01:03:23.490 --> 01:03:24.570 We have attributes. 01:03:24.570 --> 01:03:26.850 We've seen one example of them, lang. 01:03:26.850 --> 01:03:29.260 But we'll see many other examples of the same idea. 01:03:29.260 --> 01:03:31.362 But these building blocks are exactly the same. 01:03:31.362 --> 01:03:33.570 Generally, you start a thought, you finish a thought, 01:03:33.570 --> 01:03:35.670 and you might do something in between. 01:03:35.670 --> 01:03:40.900 Questions on this basic structure of any web page? 01:03:40.900 --> 01:03:43.150 Any questions at all? 01:03:43.150 --> 01:03:43.650 No? 01:03:43.650 --> 01:03:44.150 All right. 01:03:44.150 --> 01:03:47.820 So let's now allow things to ramp up a little more interestingly 01:03:47.820 --> 01:03:50.100 and do something with these building blocks. 01:03:50.100 --> 01:03:52.650 But so that you have a mental model for everything that's 01:03:52.650 --> 01:03:55.950 going on here on after, think of this same HTML 01:03:55.950 --> 01:03:58.620 being related in spirit to week five when 01:03:58.620 --> 01:04:00.390 we talked all about data structures. 01:04:00.390 --> 01:04:02.460 If I really wanted to, I could take to heart 01:04:02.460 --> 01:04:05.640 this idea of children and parents and grandparents 01:04:05.640 --> 01:04:07.740 and really depict this thing graphically. 01:04:07.740 --> 01:04:11.520 And in fact, this tree here, if you will, and it's not a binary tree, 01:04:11.520 --> 01:04:14.490 it's not a binary search tree, it's just a tree. 01:04:14.490 --> 01:04:18.300 Using week five's terminology, if this special node here represents 01:04:18.300 --> 01:04:22.590 the whole document, well the root element, as I called it, is HTML. 01:04:22.590 --> 01:04:25.110 HTML has two children, head and body. 01:04:25.110 --> 01:04:28.410 The head tag has in turn a title child and 01:04:28.410 --> 01:04:31.470 in turn has some text, just as the body has some text. 01:04:31.470 --> 01:04:33.510 And so this is what your browser is doing. 01:04:33.510 --> 01:04:36.300 You and I, the programmers, write this stuff. 01:04:36.300 --> 01:04:39.300 The browser reads this code top to bottom, left to right 01:04:39.300 --> 01:04:40.560 whenever you visit a website. 01:04:40.560 --> 01:04:45.120 And inside of the computer's memory, Chrome, Edge Firefox, Safari, whatnot, 01:04:45.120 --> 01:04:48.790 they build this data structure in the computer's memory 01:04:48.790 --> 01:04:51.660 so as to know what it is you have told them to do. 01:04:51.660 --> 01:04:53.800 And we'll see over time at the end of today, 01:04:53.800 --> 01:04:57.120 you can write code in an actual programming language, JavaScript, 01:04:57.120 --> 01:05:00.450 to maybe dynamically add or remove things from this tree. 01:05:00.450 --> 01:05:02.310 And this is how things like Gmail work. 01:05:02.310 --> 01:05:04.200 When you open up your email inbox, if you're 01:05:04.200 --> 01:05:06.670 a Gmail user, if you just stay there long enough, 01:05:06.670 --> 01:05:08.430 you'll probably get more and more mail. 01:05:08.430 --> 01:05:09.180 And what happens? 01:05:09.180 --> 01:05:12.930 You don't have to reload the page or rebuild the tree, per se. 01:05:12.930 --> 01:05:16.590 It just all of a sudden it appears at the top, at the top, at the top. 01:05:16.590 --> 01:05:19.890 What's happening there is that Google wrote some code that just keeps 01:05:19.890 --> 01:05:22.800 adding more nodes to this tree every time 01:05:22.800 --> 01:05:25.150 they realize you've got a new message again and again. 01:05:25.150 --> 01:05:29.460 So that's the relationship now even with this world of HTML, 01:05:29.460 --> 01:05:33.360 with all of the programmatic ideas we looked at in the past. 01:05:33.360 --> 01:05:33.880 All right. 01:05:33.880 --> 01:05:35.850 So let's go ahead and do something with this 01:05:35.850 --> 01:05:38.532 that's a little more interesting than just hello itself. 01:05:38.532 --> 01:05:41.490 I'm going to go ahead and hide my terminal window because the server is 01:05:41.490 --> 01:05:43.920 now running and all I want to do now is experiment 01:05:43.920 --> 01:05:46.870 with hello and other examples as well. 01:05:46.870 --> 01:05:50.820 Let me go ahead and actually before I do that, let me go ahead 01:05:50.820 --> 01:05:56.140 and run code of paragraphs.html just so I can keep my code separate. 01:05:56.140 --> 01:05:58.440 And now I'll hide the terminal window again. 01:05:58.440 --> 01:06:00.300 Paragraphs.html. 01:06:00.300 --> 01:06:02.350 I'm going to do almost exactly the same. 01:06:02.350 --> 01:06:05.670 Let me go ahead and start with something familiar. 01:06:05.670 --> 01:06:08.770 And eventually I'll start copying and pasting just to save time. 01:06:08.770 --> 01:06:11.490 So doc type HTML is always there. 01:06:11.490 --> 01:06:13.110 Open the HTML tag. 01:06:13.110 --> 01:06:15.240 And now notice I didn't type the rest of that. 01:06:15.240 --> 01:06:17.400 Just like with C, just like with Python, we 01:06:17.400 --> 01:06:21.420 try to save you some keystrokes by closing parentheses, adding quotes. 01:06:21.420 --> 01:06:24.030 The HTML support in VS Code is pretty good too 01:06:24.030 --> 01:06:27.150 and it tries to finish your thought when it comes to tags as well. 01:06:27.150 --> 01:06:30.377 It can screw things up if it does something you don't want it to do. 01:06:30.377 --> 01:06:31.710 So sometimes you have to delete. 01:06:31.710 --> 01:06:34.440 But it's just autocomplete, as we've seen before. 01:06:34.440 --> 01:06:38.370 Let's go ahead and let me add lang equals en as all of my examples 01:06:38.370 --> 01:06:39.300 today will be. 01:06:39.300 --> 01:06:41.250 Let's add the head tag. 01:06:41.250 --> 01:06:43.980 Let's go and proactively add the body tag. 01:06:43.980 --> 01:06:48.690 And now let's go ahead and give this a title tag, which has a-- 01:06:48.690 --> 01:06:51.900 I'll just call this paragraphs just so I remember which example is what. 01:06:51.900 --> 01:06:55.830 Now notice all of this white space and all of this neat and tidy indentation 01:06:55.830 --> 01:06:58.080 the browser ultimately is not going to care about. 01:06:58.080 --> 01:07:00.780 This is just for us humans to kind of keep ourselves sane 01:07:00.780 --> 01:07:01.860 when we look at the code. 01:07:01.860 --> 01:07:03.340 It's just easier to read. 01:07:03.340 --> 01:07:07.980 But strictly speaking, I could minimally delete all of this white space 01:07:07.980 --> 01:07:11.130 and I could just move all of this tag up to the same line. 01:07:11.130 --> 01:07:12.393 Both I think are fine. 01:07:12.393 --> 01:07:14.310 I'll just kind of follow a certain convention. 01:07:14.310 --> 01:07:16.830 But this too would have the exact same meaning. 01:07:16.830 --> 01:07:19.080 But we'll see where that detail about white space 01:07:19.080 --> 01:07:21.270 could potentially get us into trouble later. 01:07:21.270 --> 01:07:23.730 In my paragraphs tag, let's do this. 01:07:23.730 --> 01:07:27.240 In advance I've written up some Latin-like text, a really long 01:07:27.240 --> 01:07:29.290 paragraph of Latin-like text like this. 01:07:29.290 --> 01:07:30.540 It's actually random nonsense. 01:07:30.540 --> 01:07:33.623 It's not real Latin even though a couple of the words might look familiar. 01:07:33.623 --> 01:07:36.660 And so here we have three paragraphs of text. 01:07:36.660 --> 01:07:39.070 And I've deliberately hit Enter in between them 01:07:39.070 --> 01:07:42.120 so that just like an essay in Google Docs or Microsoft Word, hopefully 01:07:42.120 --> 01:07:43.890 I'll see three separate paragraphs. 01:07:43.890 --> 01:07:48.250 Let me now change tabs and I'll close hello.html from before. 01:07:48.250 --> 01:07:50.820 I'm going to go back to my other tab here. 01:07:50.820 --> 01:07:54.990 I'm going to click Back to go back to that index of all of my files 01:07:54.990 --> 01:07:56.628 which I started at earlier. 01:07:56.628 --> 01:07:59.670 And you'll see now that I have two files because I obviously just created 01:07:59.670 --> 01:08:01.950 a second file called paragraphs.html. 01:08:01.950 --> 01:08:05.550 So let's click on this to see our three paragraphs of Latin-like text. 01:08:05.550 --> 01:08:07.410 And voila. 01:08:07.410 --> 01:08:09.130 I'll zoom out. 01:08:09.130 --> 01:08:09.630 All right. 01:08:09.630 --> 01:08:11.340 First bug, if you will. 01:08:11.340 --> 01:08:16.680 This just looks like one massive blob of text, not three blobs of text. 01:08:16.680 --> 01:08:17.939 And why might that be? 01:08:17.939 --> 01:08:22.359 Borrowing the hint I offered a moment ago. 01:08:22.359 --> 01:08:23.645 Why are we not seeing break? 01:08:23.645 --> 01:08:24.520 AUDIENCE: [INAUDIBLE] 01:08:24.520 --> 01:08:27.010 DAVID MALAN: Yeah, so we need some kind of line breaks here. 01:08:27.010 --> 01:08:29.439 Because the browser turns out is only going to take us literally. 01:08:29.439 --> 01:08:32.564 And if you just give it text, text, text, it's just going to show you text. 01:08:32.564 --> 01:08:35.390 And any time there's more than a single white space, 01:08:35.390 --> 01:08:38.345 whether it's two or 20 or 200, it's going 01:08:38.345 --> 01:08:40.720 to just assume that you did that just to be neat and tidy 01:08:40.720 --> 01:08:44.600 and it's going to collapse them into just one space visually like this. 01:08:44.600 --> 01:08:47.000 So there are, in fact, a couple of solutions. 01:08:47.000 --> 01:08:48.560 One is this here. 01:08:48.560 --> 01:08:50.260 I could add some explicit line breaks. 01:08:50.260 --> 01:08:53.840 And it turns out that there's a VR tag like this. 01:08:53.840 --> 01:08:56.350 And just for visibility's sake, let me do two of them. 01:08:56.350 --> 01:08:58.930 So hitting Enter, Enter on my keyboard. 01:08:58.930 --> 01:08:59.979 I'll do it here too. 01:08:59.979 --> 01:09:01.569 BR for break, break. 01:09:01.569 --> 01:09:03.640 And now let me go back to my other tab. 01:09:03.640 --> 01:09:06.520 Nothing's changed yet, but that's because I have to reload. 01:09:06.520 --> 01:09:09.670 I've changed it on the server, but now I need to change it in the browser 01:09:09.670 --> 01:09:10.569 by reloading. 01:09:10.569 --> 01:09:13.600 And now it looks a little better, albeit nonsensical. 01:09:13.600 --> 01:09:15.729 But you'll notice a curiosity. 01:09:15.729 --> 01:09:18.939 Per this BR tag, this is kind of poorly designed. 01:09:18.939 --> 01:09:22.779 It's a little hackish to just say Enter, Enter and make the browser do this. 01:09:22.779 --> 01:09:27.850 Breaks, line breaks, don't actually require close tags or end tags. 01:09:27.850 --> 01:09:31.149 So not all tags need to be closed, at least those that it just 01:09:31.149 --> 01:09:33.130 makes no semantic sense to close them. 01:09:33.130 --> 01:09:35.170 Like the break is there or it's not. 01:09:35.170 --> 01:09:38.120 You can't imagine starting to move to the next line 01:09:38.120 --> 01:09:40.120 and then eventually getting around to finishing. 01:09:40.120 --> 01:09:41.560 It's either there or it's not. 01:09:41.560 --> 01:09:45.189 So some tags do not have close tags as necessary. 01:09:45.189 --> 01:09:48.069 But there's a more elegant way here, I daresay, 01:09:48.069 --> 01:09:50.560 not just sort of hackishly putting in these line breaks. 01:09:50.560 --> 01:09:51.700 Let me do this instead. 01:09:51.700 --> 01:09:53.140 I'll delete those. 01:09:53.140 --> 01:09:56.380 And let me go ahead and, as the name of this file suggests, 01:09:56.380 --> 01:09:58.300 let me add a paragraph tag. 01:09:58.300 --> 01:10:00.700 Now, here I need to fight with VS Code's autocomplete, 01:10:00.700 --> 01:10:03.400 because I don't want to finish the thought there. 01:10:03.400 --> 01:10:07.270 Let me go ahead and open the paragraph tag and close a paragraph tag. 01:10:07.270 --> 01:10:09.370 And just to keep things tidy, I'll go ahead 01:10:09.370 --> 01:10:12.620 and indent too, even though the indentation itself doesn't matter. 01:10:12.620 --> 01:10:16.480 Let me go ahead and create another tag for opening this paragraph. 01:10:16.480 --> 01:10:18.640 And I'll close this one here. 01:10:18.640 --> 01:10:19.945 And now let me see. 01:10:19.945 --> 01:10:21.820 Sometimes it's fighting with my autocomplete, 01:10:21.820 --> 01:10:25.060 but that's fine, because I did this the wrong way at first. 01:10:25.060 --> 01:10:28.210 And now let me go ahead and finish this thought 01:10:28.210 --> 01:10:30.970 by closing this paragraph tag here. 01:10:30.970 --> 01:10:33.640 And I've manually fixed all of my indentation. 01:10:33.640 --> 01:10:38.110 So now on line 10, I have the equivalent of hey browser, start a paragraph. 01:10:38.110 --> 01:10:39.940 And then it does the Latin-like text. 01:10:39.940 --> 01:10:42.940 Then on line 12, hey browser, that's it for this paragraph. 01:10:42.940 --> 01:10:44.620 And repeat, repeat. 01:10:44.620 --> 01:10:49.300 If I now go back to my other tab and reload again, 01:10:49.300 --> 01:10:51.010 shouldn't be all that different. 01:10:51.010 --> 01:10:53.510 But semantically, it's a little bit better. 01:10:53.510 --> 01:10:54.010 Why? 01:10:54.010 --> 01:10:56.900 Because you saying break, break doesn't really mean anything. 01:10:56.900 --> 01:11:00.100 But by saying paragraph, paragraph, paragraph, now 01:11:00.100 --> 01:11:02.270 there's some more semantic information there. 01:11:02.270 --> 01:11:05.890 Now if Google is analyzing your page or if the programmer is 01:11:05.890 --> 01:11:09.040 trying to understand what it is you did in the past when writing this code, 01:11:09.040 --> 01:11:11.262 you just know semantically, oh, this is a paragraph, 01:11:11.262 --> 01:11:12.970 this is a paragraph, this is a paragraph, 01:11:12.970 --> 01:11:14.590 just like in a book or an essay. 01:11:14.590 --> 01:11:17.680 So it's a little more clear focusing more on what it is, 01:11:17.680 --> 01:11:20.060 not how you want to display it. 01:11:20.060 --> 01:11:25.290 Any questions then on these paragraphs? 01:11:25.290 --> 01:11:25.790 All right. 01:11:25.790 --> 01:11:26.870 So a few more tags. 01:11:26.870 --> 01:11:29.078 And indeed, these first few examples will really just 01:11:29.078 --> 01:11:30.350 be sort of bang, bang, bang. 01:11:30.350 --> 01:11:33.537 Just a bunch of different vocabulary words in the form of these new tags. 01:11:33.537 --> 01:11:35.870 But we won't go through the entire laundry list of tags. 01:11:35.870 --> 01:11:38.870 This is indeed the thing for which web references and books and the like 01:11:38.870 --> 01:11:41.820 are ultimately helpful, just like a dictionary in the real world. 01:11:41.820 --> 01:11:43.362 So I'm going to go ahead and do this. 01:11:43.362 --> 01:11:44.670 Let me go ahead and copy this. 01:11:44.670 --> 01:11:47.870 Let me create a new file called headings.html 01:11:47.870 --> 01:11:49.550 just so we have a new file for this. 01:11:49.550 --> 01:11:52.340 To save time, I'm just going to paste that exact same code just 01:11:52.340 --> 01:11:53.300 to get me started. 01:11:53.300 --> 01:11:55.880 I'm going to change the title of it for clarity for the code 01:11:55.880 --> 01:11:57.050 online to headings. 01:11:57.050 --> 01:12:00.230 And now just like a book or an essay or a thesis, 01:12:00.230 --> 01:12:02.780 let me actually put some actual headings here. 01:12:02.780 --> 01:12:05.540 Now, if my first heading like chapter one, 01:12:05.540 --> 01:12:07.500 I could do something like this up here. 01:12:07.500 --> 01:12:10.490 I could have a paragraph like I just learned and I could say something 01:12:10.490 --> 01:12:12.290 like chapter one here. 01:12:12.290 --> 01:12:14.030 But that's not really a paragraph. 01:12:14.030 --> 01:12:16.820 And so it's sort of better design to tell the browser 01:12:16.820 --> 01:12:18.720 and really tell the world what it is. 01:12:18.720 --> 01:12:22.430 So it turns out there's another tag I can use like h1 for heading 01:12:22.430 --> 01:12:24.065 and most important heading. 01:12:24.065 --> 01:12:25.940 And in here, I'm just going to keep it simple 01:12:25.940 --> 01:12:27.380 and I'm going to say something like one. 01:12:27.380 --> 01:12:28.700 And in fact, this is so short. 01:12:28.700 --> 01:12:31.610 Here's a good candidate for just keeping this all in the same line. 01:12:31.610 --> 01:12:34.190 But this has no functional difference, but it'll just 01:12:34.190 --> 01:12:36.470 make it a little more terse on the screen. 01:12:36.470 --> 01:12:38.810 Now let me go ahead down here. 01:12:38.810 --> 01:12:41.750 And I could have multiple headings so H1 two. 01:12:41.750 --> 01:12:45.200 And down here I could have another one, H1 three. 01:12:45.200 --> 01:12:48.440 And if I go back to my other tab, I reload it. 01:12:48.440 --> 01:12:53.850 Now we should see, just like a book or an essay, now we have some proper-- 01:12:53.850 --> 01:12:55.018 now we have some-- oops. 01:12:55.018 --> 01:12:56.310 I have to go to the right file. 01:12:56.310 --> 01:12:56.810 Sorry. 01:12:56.810 --> 01:13:00.090 If I go back to the index, now we see the new third file 01:13:00.090 --> 01:13:01.590 called headings.html. 01:13:01.590 --> 01:13:05.865 And now we indeed see some fairly pretty, if simple, headings as well. 01:13:05.865 --> 01:13:08.490 Now, if these aren't three chapters, one, two, three, but maybe 01:13:08.490 --> 01:13:10.860 it's a chapter, then a section, then a subsection 01:13:10.860 --> 01:13:14.130 such that just visually you want things to get smaller and smaller, 01:13:14.130 --> 01:13:15.300 well those exist too. 01:13:15.300 --> 01:13:17.700 And in fact, you can do H1 through H6. 01:13:17.700 --> 01:13:20.640 H1, a little paradoxically, is the biggest and boldest. 01:13:20.640 --> 01:13:23.010 H6 is the smallest but still bold. 01:13:23.010 --> 01:13:28.620 So it might make sense to make this H2, both open and close, and maybe this H3, 01:13:28.620 --> 01:13:32.130 open and close, if again, this is a section or a subsection 01:13:32.130 --> 01:13:33.480 inside of that chapter. 01:13:33.480 --> 01:13:36.570 If I reload now, notice just gets a little smaller. 01:13:36.570 --> 01:13:39.900 So it's more similar to what you'd see on the printed page. 01:13:39.900 --> 01:13:44.460 But this now is just another three tags that I might use in my own code. 01:13:44.460 --> 01:13:46.710 All right, well how about lists of things? 01:13:46.710 --> 01:13:48.940 I have three paragraphs here, but let's do this. 01:13:48.940 --> 01:13:50.760 Let me go back to VS Code. 01:13:50.760 --> 01:13:53.220 I'm going to copy this code so I have a starting point. 01:13:53.220 --> 01:13:57.750 I'm going to create a new file called, say, list.html. 01:13:57.750 --> 01:13:59.250 Here I'm going to copy paste. 01:13:59.250 --> 01:14:02.002 I'm going to change my title to be list just for clarity. 01:14:02.002 --> 01:14:04.710 And in here I'm going to go ahead and get rid of this whole body, 01:14:04.710 --> 01:14:06.918 because let's move away from these massive paragraphs 01:14:06.918 --> 01:14:08.370 and keep it simpler for now. 01:14:08.370 --> 01:14:11.297 If I want to have a list of things, for instance, 01:14:11.297 --> 01:14:14.130 if you haven't seen these already, a computer scientist when they're 01:14:14.130 --> 01:14:16.830 fishing for just some arbitrary meaningless words, 01:14:16.830 --> 01:14:20.190 they often use foo, bar, and baz just as their go to, 01:14:20.190 --> 01:14:23.370 just like a mathematician might use x, y, z for variables. 01:14:23.370 --> 01:14:25.680 So foo, bar, and baz are on three separate lines. 01:14:25.680 --> 01:14:28.200 And maybe this is my to do list or my shopping list. 01:14:28.200 --> 01:14:31.600 But you can probably imagine, if I go back to my other tab, 01:14:31.600 --> 01:14:36.030 go back to the index, I now see my new file list.html. 01:14:36.030 --> 01:14:38.520 But it's probably going to look wrong. 01:14:38.520 --> 01:14:42.040 I think I'm just going to say yeah, foo, bar, baz all in one breath, 01:14:42.040 --> 01:14:43.980 if you will, not on new lines. 01:14:43.980 --> 01:14:45.480 And you can try to fight this. 01:14:45.480 --> 01:14:48.000 You can be like really want to put some line breaks. 01:14:48.000 --> 01:14:50.310 There go back and reload. 01:14:50.310 --> 01:14:52.320 It's still not going to make any change. 01:14:52.320 --> 01:14:53.903 How do I want to fix this? 01:14:53.903 --> 01:14:55.320 Well, I can do this in a few ways. 01:14:55.320 --> 01:14:57.510 I can make them paragraphs, but they're not really paragraphs. 01:14:57.510 --> 01:14:58.360 They're a list. 01:14:58.360 --> 01:15:01.120 So I'm going to use a different tag instead. 01:15:01.120 --> 01:15:05.760 I'm going to create, for instance, an unordered list using the UL tag. 01:15:05.760 --> 01:15:06.840 Open and close. 01:15:06.840 --> 01:15:10.230 Inside of that, I'm going to use the list item tag, LI, 01:15:10.230 --> 01:15:11.520 and I'm going to say foo. 01:15:11.520 --> 01:15:13.770 Inside of another tag I'm going to say bar. 01:15:13.770 --> 01:15:17.190 Inside of a third tag open and close, I'm going to say baz. 01:15:17.190 --> 01:15:20.400 So it's getting a little verbose, but it's still relatively succinct. 01:15:20.400 --> 01:15:23.190 LI is all you need type for list item. 01:15:23.190 --> 01:15:26.110 UL is all you need type for unordered list. 01:15:26.110 --> 01:15:28.980 So there's some shorthand syntax here that's adopted. 01:15:28.980 --> 01:15:32.430 If I now reload, you're going to see a so-called unordered, list 01:15:32.430 --> 01:15:36.000 like not sorted, which means by convention to show it as bullets. 01:15:36.000 --> 01:15:39.238 Though it could be displayed in different ways visually as well. 01:15:39.238 --> 01:15:41.280 If you actually change your mind and you realize, 01:15:41.280 --> 01:15:44.238 oh, I'd really like to number this, well, you could obviously like just 01:15:44.238 --> 01:15:48.052 add one and two and three, but that's going to get annoying, 01:15:48.052 --> 01:15:49.260 especially if the list grows. 01:15:49.260 --> 01:15:51.420 You want to change something, insert something in the middle. 01:15:51.420 --> 01:15:52.587 Then you have to reorder it. 01:15:52.587 --> 01:15:54.960 I mean, we're using computers here. 01:15:54.960 --> 01:15:56.230 They can do this for us. 01:15:56.230 --> 01:16:00.270 So we can change the UL to any guesses? 01:16:00.270 --> 01:16:04.060 OL, maybe, for ordered list, which is the opposite here. 01:16:04.060 --> 01:16:06.060 So let's try changing that to OL. 01:16:06.060 --> 01:16:07.560 Let me go back to my browser. 01:16:07.560 --> 01:16:10.050 And I'm just hitting Command R or Control 01:16:10.050 --> 01:16:12.780 R to reload the page instead of clicking the button every time. 01:16:12.780 --> 01:16:16.080 Now I automatically get one, two, and three. 01:16:16.080 --> 01:16:19.110 And you can even override the aesthetics using different numerals 01:16:19.110 --> 01:16:24.380 or symbology instead, but that would be perhaps the most common there as well. 01:16:24.380 --> 01:16:24.880 All right. 01:16:24.880 --> 01:16:26.590 It's a lot of tags quickly. 01:16:26.590 --> 01:16:31.260 But any questions on lists, paragraphs, headings, or the like? 01:16:31.260 --> 01:16:31.760 No? 01:16:31.760 --> 01:16:32.260 All right. 01:16:32.260 --> 01:16:35.430 So let me go ahead and propose this here. 01:16:35.430 --> 01:16:38.700 Let's go ahead and create what we'll call a table. 01:16:38.700 --> 01:16:41.240 So let me copy and paste this into a new file. 01:16:41.240 --> 01:16:43.760 Code of table.html. 01:16:43.760 --> 01:16:47.360 And in table.html, let me again rename the title to table. 01:16:47.360 --> 01:16:50.240 Let me get rid of that ordered list from before. 01:16:50.240 --> 01:16:53.510 And let me now use a table tag open and close. 01:16:53.510 --> 01:16:54.860 This one one's a little weird. 01:16:54.860 --> 01:16:59.040 But inside of a table, you typically have a head of the table. 01:16:59.040 --> 01:17:02.270 So I'll say, well, let's say the first row. 01:17:02.270 --> 01:17:03.500 We'll keep this one simple. 01:17:03.500 --> 01:17:05.630 A table row or TR. 01:17:05.630 --> 01:17:09.067 Inside of a table row, you would ideally have columns, 01:17:09.067 --> 01:17:10.400 but that's not the nomenclature. 01:17:10.400 --> 01:17:11.520 Instead you have data. 01:17:11.520 --> 01:17:13.160 So TD for Table Data. 01:17:13.160 --> 01:17:15.960 And let me go ahead and just have the first datum be one. 01:17:15.960 --> 01:17:17.960 I'm just going to arbitrarily do one, two, three 01:17:17.960 --> 01:17:19.550 just so we have something to play with. 01:17:19.550 --> 01:17:20.300 And you know what? 01:17:20.300 --> 01:17:24.620 Just for demonstration sake, I am going to deliberately copy paste this twice 01:17:24.620 --> 01:17:27.020 and I'm just going to manually change the numbers 01:17:27.020 --> 01:17:29.810 just so we can see what I'm creating. 01:17:29.810 --> 01:17:31.040 Seven, eight, nine. 01:17:31.040 --> 01:17:34.730 And then maybe just for good measure if you're seeing where this is going, 01:17:34.730 --> 01:17:37.490 let me copy this one more time and give myself 01:17:37.490 --> 01:17:41.360 a final row with an asterisk, a 0, and a pound sign 01:17:41.360 --> 01:17:43.190 if maybe you see where this is going. 01:17:43.190 --> 01:17:44.870 Let me go back to my other tab. 01:17:44.870 --> 01:17:47.240 Let me go back to the index. 01:17:47.240 --> 01:17:49.460 There is my new file, table.html. 01:17:49.460 --> 01:17:50.520 I'll click that. 01:17:50.520 --> 01:17:53.390 And while it's not very pretty, I'll zoom in. 01:17:53.390 --> 01:17:55.670 It's indeed a table of data. 01:17:55.670 --> 01:17:58.848 I happen to mimic a telephone keypad. 01:17:58.848 --> 01:18:00.890 But you can imagine this being much juicier, much 01:18:00.890 --> 01:18:03.265 more interesting scientific or financial data or the like 01:18:03.265 --> 01:18:07.130 laid out into these rows, TRs, and these columns, a.k.a. 01:18:07.130 --> 01:18:08.730 table data as well. 01:18:08.730 --> 01:18:11.670 So we have that ability as well for structured data. 01:18:11.670 --> 01:18:15.000 Now of course, the internet has lots of images on it. 01:18:15.000 --> 01:18:16.830 And in fact, this is all just text. 01:18:16.830 --> 01:18:18.380 How can we introduce images? 01:18:18.380 --> 01:18:21.060 Well, let me go ahead and do this. 01:18:21.060 --> 01:18:25.850 Let me first sort of semi secretly copy an image file 01:18:25.850 --> 01:18:29.840 that I brought from earlier just so we have something to play with. 01:18:29.840 --> 01:18:34.130 And I have in my account here now an image called harvard.jpeg. 01:18:34.130 --> 01:18:37.250 And I uploaded this semi secretly a second ago into my account 01:18:37.250 --> 01:18:39.560 so that I can reference a second file. 01:18:39.560 --> 01:18:43.760 Let me go ahead and copy this HTML just to save myself some keystrokes. 01:18:43.760 --> 01:18:47.510 Let me go ahead and do code of image.html. 01:18:47.510 --> 01:18:50.510 And let me paste that code and hide my terminal window. 01:18:50.510 --> 01:18:54.440 I'm going to get rid of all of this table as just uninteresting now. 01:18:54.440 --> 01:18:59.030 We're going to make this even simpler by changing my title to image to keep 01:18:59.030 --> 01:19:01.500 all these demonstrations separate. 01:19:01.500 --> 01:19:05.000 And now if I want to make a web page that when visited 01:19:05.000 --> 01:19:07.520 shows us a picture of Harvard, well, there's 01:19:07.520 --> 01:19:10.680 an image tag abbreviated IMG for short. 01:19:10.680 --> 01:19:13.310 I can specify what the source of that image is. 01:19:13.310 --> 01:19:17.930 And if my file, a JPEG in this case, is literally in the same folder, 01:19:17.930 --> 01:19:20.982 I can just say quote unquote "harvard.jpeg." 01:19:20.982 --> 01:19:23.690 If it's in a folder, I should mention the folder name and a slash 01:19:23.690 --> 01:19:24.920 or something like that. 01:19:24.920 --> 01:19:27.920 If the image is on the internet somewhere with a URL, 01:19:27.920 --> 01:19:32.940 I could also have a whole URL, https:// and then the URL of the image. 01:19:32.940 --> 01:19:34.813 But I uploaded it in advance. 01:19:34.813 --> 01:19:37.230 Now, this is just going to visually display on the screen. 01:19:37.230 --> 01:19:39.320 But not everyone, of course, can see images. 01:19:39.320 --> 01:19:41.450 Screen readers might need a bit of assistance. 01:19:41.450 --> 01:19:44.150 And even search engines might want to analyze the page 01:19:44.150 --> 01:19:46.220 and know what this is an image of. 01:19:46.220 --> 01:19:48.620 Now, machine learning and artificial intelligence 01:19:48.620 --> 01:19:51.110 are maybe getting better, to be fair, at figuring out 01:19:51.110 --> 01:19:54.260 just by analyzing images what they are, but they're certainly imperfect. 01:19:54.260 --> 01:19:54.980 I am a human. 01:19:54.980 --> 01:19:57.900 I know pretty well what I took a photo of, for instance. 01:19:57.900 --> 01:20:01.550 So maybe what I should do proactively, which would be good for accessibility, 01:20:01.550 --> 01:20:04.250 is have this alt tag for alternative text. 01:20:04.250 --> 01:20:06.800 And then literally say Harvard University 01:20:06.800 --> 01:20:10.070 so that someone who can't see or so that a server can 01:20:10.070 --> 01:20:13.250 actually with higher probability what it is they're looking at. 01:20:13.250 --> 01:20:15.620 And I could be even more detailed than just a phrase. 01:20:15.620 --> 01:20:18.090 I could describe the image as well. 01:20:18.090 --> 01:20:18.590 All right. 01:20:18.590 --> 01:20:21.890 Let me go back to my index in the second tab. 01:20:21.890 --> 01:20:24.770 Let me go back and zoom back out. 01:20:24.770 --> 01:20:29.360 There's my new file and there's my new JPEG that I quickly uploaded before. 01:20:29.360 --> 01:20:33.140 I can click now on image.html and, albeit a little 01:20:33.140 --> 01:20:37.010 overwhelming, that is a really big image of Harvard. 01:20:37.010 --> 01:20:39.120 Now, apparently it's too big to fit on the screen. 01:20:39.120 --> 01:20:42.470 So this isn't the best user experience to have to scroll up. 01:20:42.470 --> 01:20:43.880 OK, so there's the image. 01:20:43.880 --> 01:20:47.840 Horrible, horrible design, if you will, at least in terms of my code. 01:20:47.840 --> 01:20:51.020 But there's going to be ways where I can rein that in and affect 01:20:51.020 --> 01:20:52.860 the height or the width as well. 01:20:52.860 --> 01:20:57.140 But for now it's just deliberately a little overwhelming instead. 01:20:57.140 --> 01:20:59.060 Now we can do something a little more fun 01:20:59.060 --> 01:21:03.540 and topical today, which might be to use a video instead. 01:21:03.540 --> 01:21:07.770 So let me go ahead here and very quickly grab another file today, 01:21:07.770 --> 01:21:11.720 which I brought in advance and you might have seen briefly 01:21:11.720 --> 01:21:15.480 earlier, which is an MP4, an actual video file. 01:21:15.480 --> 01:21:18.800 And what I'm going to do here by revealing VS Code again is I'm 01:21:18.800 --> 01:21:21.200 going to code a file called video.html. 01:21:21.200 --> 01:21:23.060 Yet another demonstration here. 01:21:23.060 --> 01:21:26.750 I'm going to change my title to video just to keep these things straight. 01:21:26.750 --> 01:21:31.390 And instead of the image tag, you might imagine using now indeed a video tag. 01:21:31.390 --> 01:21:35.620 And this is a relatively newer tag that has increasing support among browsers. 01:21:35.620 --> 01:21:37.000 So it's good now to use. 01:21:37.000 --> 01:21:39.925 And inside of this, the syntax is a little different. 01:21:39.925 --> 01:21:43.780 You specify, and this is weirdly annoyingly inconsistent, 01:21:43.780 --> 01:21:45.790 not SRC for source. 01:21:45.790 --> 01:21:47.410 You literally say source. 01:21:47.410 --> 01:21:50.560 And then in source, you use a source attribute. 01:21:50.560 --> 01:21:54.250 Horrible design semantically, but this is what we're stuck with. 01:21:54.250 --> 01:21:57.220 Halloween.mp4 is the name of the video. 01:21:57.220 --> 01:22:00.700 We uploaded in advance made by some of Harvard's digital artists. 01:22:00.700 --> 01:22:05.560 And the type of this video so that the browser knows for sure is video/mp4. 01:22:05.560 --> 01:22:07.480 That's a so called content type that you just 01:22:07.480 --> 01:22:09.400 know or you look up to figure it out. 01:22:09.400 --> 01:22:12.910 And just so that this is as animated as possible, 01:22:12.910 --> 01:22:17.350 I'm going to tell the video tag with a few attributes to autoplay. 01:22:17.350 --> 01:22:22.120 And it turns out that attributes often have key value pairs whereby 01:22:22.120 --> 01:22:26.020 it's the key, the attribute name equals quote unquote some value, 01:22:26.020 --> 01:22:28.870 just like lang equals quote unquote en for English. 01:22:28.870 --> 01:22:31.010 But not all attributes need values. 01:22:31.010 --> 01:22:34.150 In fact, if you read the documentation for HTML's video tag, 01:22:34.150 --> 01:22:37.210 there's an autoplay attribute where you can literally just say the key 01:22:37.210 --> 01:22:38.325 and it needs no value. 01:22:38.325 --> 01:22:39.700 It's just going to mean autoplay. 01:22:39.700 --> 01:22:42.980 And if you don't want autoplay, you just omit it altogether. 01:22:42.980 --> 01:22:45.910 So you don't necessarily need a value on or off. 01:22:45.910 --> 01:22:48.040 I want the thing to loop just so it keeps going. 01:22:48.040 --> 01:22:50.690 I want it to be muted so that we don't hear any sound. 01:22:50.690 --> 01:22:53.110 In fact, there is no sound, but browsers nowadays 01:22:53.110 --> 01:22:56.590 for anti-spam and advertising reasons often 01:22:56.590 --> 01:23:00.297 will not play a video if it has sound because it's just kind of obnoxious 01:23:00.297 --> 01:23:03.130 if you visit a page and all of a sudden your speakers start blaring. 01:23:03.130 --> 01:23:04.990 So I know this from having read up on this 01:23:04.990 --> 01:23:08.170 that I should mute it if I want it to actually autoplay for real. 01:23:08.170 --> 01:23:10.780 And then I'll set the width manually for now 01:23:10.780 --> 01:23:14.860 to be like 128 pixels across just from some trial and error earlier. 01:23:14.860 --> 01:23:18.760 And that width attribute does have a value. 01:23:18.760 --> 01:23:24.010 Now, I'm being a little uptight here by alphabetizing all of my attributes. 01:23:24.010 --> 01:23:25.108 Not at all necessary. 01:23:25.108 --> 01:23:28.400 I do it just so I can skim things faster and know if something is there or not. 01:23:28.400 --> 01:23:30.340 So for me it's just a matter of style. 01:23:30.340 --> 01:23:32.530 Let me go back to my other tab. 01:23:32.530 --> 01:23:33.820 Go back to my index. 01:23:33.820 --> 01:23:39.460 And you'll see two new files, again, the MP4 file and video.html. 01:23:39.460 --> 01:23:40.570 I'll click on the latter. 01:23:40.570 --> 01:23:44.140 And if I did this well, here we have thanks to our friends 01:23:44.140 --> 01:23:49.008 in Harvard, our artistic friends at Harvard, very-- 01:23:49.008 --> 01:23:50.800 like an ooh would help with the drama here. 01:23:50.800 --> 01:23:54.950 But we have a very dramatic, nice Halloween type view here as well. 01:23:54.950 --> 01:23:56.780 So we have videos embedded as well. 01:23:56.780 --> 01:23:59.350 And suffice it to say there's ways to embed YouTube videos 01:23:59.350 --> 01:24:03.820 or Vimeo or other services as well using yet more tags too. 01:24:03.820 --> 01:24:06.640 But the web is, of course, all about hyperlink, 01:24:06.640 --> 01:24:09.170 hypertext markup language, where you click on something 01:24:09.170 --> 01:24:10.420 and you end up somewhere else. 01:24:10.420 --> 01:24:13.330 And this is how the web is so powerfully interconnected. 01:24:13.330 --> 01:24:18.200 So how do we start creating links from one website or web page to another? 01:24:18.200 --> 01:24:20.110 Either that I made or someone else. 01:24:20.110 --> 01:24:23.500 Well, let me go ahead and open back up my terminal window. 01:24:23.500 --> 01:24:26.350 And let's create a file called link.html just 01:24:26.350 --> 01:24:28.630 to demonstrate what you and I know as a link. 01:24:28.630 --> 01:24:30.160 I'll hide my terminal window now. 01:24:30.160 --> 01:24:32.800 Let me copy paste just to save myself some keystrokes. 01:24:32.800 --> 01:24:36.400 And let me get rid of the video tag so we can focus now on links. 01:24:36.400 --> 01:24:40.090 Suppose that I want you to visit Harvard virtually. 01:24:40.090 --> 01:24:44.350 Well, I could say something like visit Harvard, period. 01:24:44.350 --> 01:24:46.780 This is uninteresting because it's just going to be text. 01:24:46.780 --> 01:24:51.082 I probably want you to actually visit harvard.edu instead more specifically. 01:24:51.082 --> 01:24:53.290 And I'll lowercase it just to be consistent with what 01:24:53.290 --> 01:24:55.450 browsers do in the address bar. 01:24:55.450 --> 01:24:58.480 All right, let me go now back to this video tab 01:24:58.480 --> 01:25:01.300 and go back where we now see my index. 01:25:01.300 --> 01:25:04.000 I'll zoom back in and there's link.html. 01:25:04.000 --> 01:25:06.535 Unfortunately when I click this, and I'll zoom in, 01:25:06.535 --> 01:25:08.410 you literally just see the text that I wrote. 01:25:08.410 --> 01:25:11.230 And yet on every social media platform nowadays, 01:25:11.230 --> 01:25:14.800 except like Instagram, when you type a URL or what looks like a URL, 01:25:14.800 --> 01:25:18.190 even if you didn't bother with the HTTP or HTTPS, 01:25:18.190 --> 01:25:21.790 it usually automatically links it for you on Facebook, on Twitter, 01:25:21.790 --> 01:25:22.960 and other sites as well. 01:25:22.960 --> 01:25:24.880 That's just a convenience. 01:25:24.880 --> 01:25:26.710 Discord and Slack do that too. 01:25:26.710 --> 01:25:29.690 But they're just doing it to make things more user friendly. 01:25:29.690 --> 01:25:35.600 But they have to generate HTML with the proper tags and attributes. 01:25:35.600 --> 01:25:38.290 So to get this to actually work, it's not even good enough 01:25:38.290 --> 01:25:42.100 to say https://www.harvard.edu. 01:25:42.100 --> 01:25:44.320 Because if I go back now and reload now, you'll 01:25:44.320 --> 01:25:46.510 literally just see all of that as text. 01:25:46.510 --> 01:25:51.462 If you want the browser to treat this as a link, you need to use the anchor tag. 01:25:51.462 --> 01:25:53.920 It'd be great if it were called the link tag, but it's not. 01:25:53.920 --> 01:25:56.800 It's called the anchor tag or A for short. 01:25:56.800 --> 01:26:00.850 And the way you reference the URL to which you want to lead the user 01:26:00.850 --> 01:26:03.800 is via href for Hyper Reference. 01:26:03.800 --> 01:26:06.790 This is one of the earliest tags, perhaps among the most arcane now. 01:26:06.790 --> 01:26:11.620 But if I then put that whole URL in quotes and close my tag, 01:26:11.620 --> 01:26:15.250 I now have an opportunity to finish my thought in between the start 01:26:15.250 --> 01:26:18.130 tag and the end tag for this anchor. 01:26:18.130 --> 01:26:20.950 And what I put in between the start and end tag 01:26:20.950 --> 01:26:22.840 is whatever the human's going to see. 01:26:22.840 --> 01:26:25.090 So here I can say Harvard. 01:26:25.090 --> 01:26:27.020 I can go back to my other tab. 01:26:27.020 --> 01:26:31.620 I can reload the page and now you see the familiar blue underline. 01:26:31.620 --> 01:26:33.730 This now is an actual link. 01:26:33.730 --> 01:26:38.190 And if I click it, I'll be whisked away to the actual Harvard website. 01:26:38.190 --> 01:26:40.480 But there's a risk here. 01:26:40.480 --> 01:26:45.990 Can anyone imagine pretty simply after, what, 60 seconds of the anchor tag, 01:26:45.990 --> 01:26:50.780 how could someone, an adversary misuse this tag alone? 01:26:50.780 --> 01:26:53.720 How could a website run by an adversary, how could 01:26:53.720 --> 01:26:57.160 a spammer misuse this tag do you think? 01:26:57.160 --> 01:26:57.820 Yeah. 01:26:57.820 --> 01:27:01.250 AUDIENCE: Could you have it say, like, Visit Yale? 01:27:01.250 --> 01:27:02.500 DAVID MALAN: Yeah, absolutely. 01:27:02.500 --> 01:27:05.990 You could have it say one thing but lead elsewhere. 01:27:05.990 --> 01:27:07.900 So I could say Yale in here. 01:27:07.900 --> 01:27:09.700 Nothing's stopping me as the developer. 01:27:09.700 --> 01:27:10.610 Go back to the page. 01:27:10.610 --> 01:27:11.110 Reload. 01:27:11.110 --> 01:27:12.520 Now it says visit Yale. 01:27:12.520 --> 01:27:16.120 You click on Yale, and voila, you end up applying to the wrong place instead. 01:27:16.120 --> 01:27:18.110 Now, there's some hints of this. 01:27:18.110 --> 01:27:19.690 I could hover over this. 01:27:19.690 --> 01:27:20.740 And super small. 01:27:20.740 --> 01:27:24.070 Like this isn't very good for your anti-hacking techniques. 01:27:24.070 --> 01:27:28.090 But way down here, you can actually see the URL that it's going to go to. 01:27:28.090 --> 01:27:31.090 And most browsers indeed do this, at least on desktops and laptops. 01:27:31.090 --> 01:27:32.530 So it's a little bit of a hint. 01:27:32.530 --> 01:27:36.670 But what you're seeing here, even though this is kind of a silly playful 01:27:36.670 --> 01:27:42.430 example, this is exactly how phishing attacks work, P-H-I-S-H-I-N-G work, 01:27:42.430 --> 01:27:46.000 whereby an adversarially tells you to log into your PayPal account. 01:27:46.000 --> 01:27:47.950 But it doesn't go to paypal.com. 01:27:47.950 --> 01:27:50.650 It goes to some other random website that they 01:27:50.650 --> 01:27:53.718 bought and built that then tries to collect your username and password 01:27:53.718 --> 01:27:55.010 and store it in their database. 01:27:55.010 --> 01:27:58.120 So now they can log into your PayPal account as you. 01:27:58.120 --> 01:28:01.030 And it boils down to that simple primitive. 01:28:01.030 --> 01:28:03.460 And you can be even more manipulative too. 01:28:03.460 --> 01:28:08.410 You can even say the whole URL for Yale, like yale.edu or worse, 01:28:08.410 --> 01:28:12.610 https://www.yale.edu and reload that. 01:28:12.610 --> 01:28:16.120 And now, I mean, who among you and people in your lives 01:28:16.120 --> 01:28:19.570 are necessarily going to be so paranoid as to not just blindly click 01:28:19.570 --> 01:28:20.620 on that URL? 01:28:20.620 --> 01:28:24.040 This is why just being a defensive real world person nowadays 01:28:24.040 --> 01:28:26.540 digitally is just ever more so important. 01:28:26.540 --> 01:28:30.280 So these same things that can be used for good or benign use cases 01:28:30.280 --> 01:28:32.950 can also be used for ill purposes too. 01:28:32.950 --> 01:28:35.590 And it is literally that simple. 01:28:35.590 --> 01:28:40.270 Questions now on any of these tags thus far? 01:28:40.270 --> 01:28:42.810 Just a few more to offer up. 01:28:42.810 --> 01:28:46.090 Any questions on this here? 01:28:46.090 --> 01:28:46.590 No? 01:28:46.590 --> 01:28:49.890 Well, let me open up a couple that I brought in advance just so we 01:28:49.890 --> 01:28:52.480 don't have to type all of them here. 01:28:52.480 --> 01:28:56.200 If you, for instance, have a web page that's got quite a bit of code, 01:28:56.200 --> 01:29:01.260 let me go ahead grab from the website a couple of examples real fast here. 01:29:01.260 --> 01:29:07.800 Namely one that will call how about meta.html. 01:29:07.800 --> 01:29:11.970 And in this example here, give me just a moment to full screen it, 01:29:11.970 --> 01:29:15.030 we're going to have a file. 01:29:15.030 --> 01:29:17.460 So code meta.html. 01:29:17.460 --> 01:29:18.840 I'll open this up next. 01:29:18.840 --> 01:29:21.570 No relationship to what we now know as Meta the company. 01:29:21.570 --> 01:29:24.360 But rather this is going to be a page that I 01:29:24.360 --> 01:29:27.310 copied and pasted the same chunk of Latin-like text from earlier. 01:29:27.310 --> 01:29:29.440 So it's going to be a really big paragraph of text. 01:29:29.440 --> 01:29:32.232 And this is an example where if you were to open this web page, not 01:29:32.232 --> 01:29:34.260 on my own Mac or your PC but on your phone, 01:29:34.260 --> 01:29:37.210 the font might actually be really annoying and difficult to read. 01:29:37.210 --> 01:29:37.710 Why? 01:29:37.710 --> 01:29:40.377 Because your phone is going to try to squeeze all of the content 01:29:40.377 --> 01:29:44.080 onto the tiny viewport, the rectangular region of your phone instead. 01:29:44.080 --> 01:29:46.950 So it turns out there are ways, pretty easy ways, 01:29:46.950 --> 01:29:50.760 to make your website mobile friendly as well, otherwise known technically 01:29:50.760 --> 01:29:51.810 as responsive. 01:29:51.810 --> 01:29:58.170 And the easiest way to do this is to include this tag here, a meta tag. 01:29:58.170 --> 01:29:59.760 Again, no relationship to Facebook. 01:29:59.760 --> 01:30:01.150 This has been here much longer. 01:30:01.150 --> 01:30:06.120 And in this case here, this meta tag on line five has its own sort of approach 01:30:06.120 --> 01:30:07.227 to key value pairs. 01:30:07.227 --> 01:30:09.060 This is a good example of where it'd be nice 01:30:09.060 --> 01:30:12.840 if it looked just like everything else, but this is what we have historically. 01:30:12.840 --> 01:30:15.210 You can have a meta tag with an attribute called 01:30:15.210 --> 01:30:18.420 name that refers to the name of some feature of the browser. 01:30:18.420 --> 01:30:22.380 In this case, viewport is the technical term for the big rectangular region 01:30:22.380 --> 01:30:23.550 to which I keep referring. 01:30:23.550 --> 01:30:25.290 The body, really, of your page. 01:30:25.290 --> 01:30:30.330 The content for the viewport, you can say some esoteric details like this. 01:30:30.330 --> 01:30:31.920 The initial scale should be one. 01:30:31.920 --> 01:30:35.380 That is no matter who visits your site, it shouldn't start zoomed in. 01:30:35.380 --> 01:30:36.630 It shouldn't start zoomed out. 01:30:36.630 --> 01:30:38.850 It should start at just the default sizing. 01:30:38.850 --> 01:30:41.370 And then this here, width equals device width, 01:30:41.370 --> 01:30:45.120 is a very arcane way of saying if the user has a small screen, 01:30:45.120 --> 01:30:47.850 show the text proportional to that size. 01:30:47.850 --> 01:30:50.880 Don't just try to cram it all into a tiny little window. 01:30:50.880 --> 01:30:52.210 So it's super simple. 01:30:52.210 --> 01:30:54.930 But if for the next problem set or future projects 01:30:54.930 --> 01:30:59.460 as well you find that just things look really bad on mobile, this kind of tag 01:30:59.460 --> 01:31:01.470 is the place to start, meta. 01:31:01.470 --> 01:31:03.810 There aren't terribly many of these that you'll use, 01:31:03.810 --> 01:31:06.820 but they're useful for other mechanisms as well. 01:31:06.820 --> 01:31:10.290 In fact, let me go ahead and semi secretly pull up one other example 01:31:10.290 --> 01:31:14.520 as well whereby I'm going to grab another example that 01:31:14.520 --> 01:31:16.470 uses more of these tags. 01:31:16.470 --> 01:31:20.410 And in just a moment, I'll reveal it here. 01:31:20.410 --> 01:31:22.800 Give me just one second here. 01:31:22.800 --> 01:31:29.220 I'll propose that in this example of meta, 01:31:29.220 --> 01:31:33.340 we now add these properties instead. 01:31:33.340 --> 01:31:35.370 So I copy pasted this from an existing file 01:31:35.370 --> 01:31:37.680 just so as to not waste time typing all of these out. 01:31:37.680 --> 01:31:40.830 If you've ever shared a URL on Facebook or Twitter 01:31:40.830 --> 01:31:44.130 or Slack or Discord or any number of websites nowadays 01:31:44.130 --> 01:31:46.860 that automatically show a nice preview where you suddenly 01:31:46.860 --> 01:31:50.040 see the default image of the page, maybe a few sentences or words 01:31:50.040 --> 01:31:52.170 of text or something like that. 01:31:52.170 --> 01:31:54.870 Sometimes those applications, those websites, 01:31:54.870 --> 01:31:56.940 will just choose the first image it finds 01:31:56.940 --> 01:31:59.790 on the website or the first sentence it sees and show that. 01:31:59.790 --> 01:32:03.540 But that might not be very user friendly or search engine friendly. 01:32:03.540 --> 01:32:06.810 And so a developer might want to control what 01:32:06.810 --> 01:32:09.990 it is that Slack, Discord, Facebook, Twitter, and other such sites 01:32:09.990 --> 01:32:11.310 show by default. 01:32:11.310 --> 01:32:16.170 For that you can use nowadays what are called open graph tags, which is to say 01:32:16.170 --> 01:32:18.023 there's other uses of the meta tag. 01:32:18.023 --> 01:32:19.440 And you just look these things up. 01:32:19.440 --> 01:32:22.273 Even I had to look this up to remember what the key value pairs are. 01:32:22.273 --> 01:32:25.200 The meta tag can also have a property attribute that 01:32:25.200 --> 01:32:27.030 can be these very specific strings. 01:32:27.030 --> 01:32:30.000 OG title, OG description, OG image, which 01:32:30.000 --> 01:32:32.850 denotes Open Graph, which again, is this standard that's 01:32:32.850 --> 01:32:34.230 evolved in recent years. 01:32:34.230 --> 01:32:37.200 And what you can do here is tell browsers 01:32:37.200 --> 01:32:41.340 and in turn servers what you want them to show as the default 01:32:41.340 --> 01:32:44.610 title of the page, the description of the page, and even the default image 01:32:44.610 --> 01:32:49.050 just so you can exercise more control when sharing things socially nowadays 01:32:49.050 --> 01:32:49.720 as well. 01:32:49.720 --> 01:32:51.937 Again, it just boils down to these key value pairs. 01:32:51.937 --> 01:32:55.020 This is absolutely the kind of thing you look up as needed to cross check. 01:32:55.020 --> 01:32:56.560 But those capabilities are there. 01:32:56.560 --> 01:32:59.460 And so literally the next time you paste a link into Slack or Discord 01:32:59.460 --> 01:33:03.810 or any online site that then displays it in embedded fashion, just 01:33:03.810 --> 01:33:07.980 know that all this time a little bit of textual code like this in HTML 01:33:07.980 --> 01:33:12.370 has been there by whoever authored the site. 01:33:12.370 --> 01:33:12.870 All right. 01:33:12.870 --> 01:33:17.940 Let's do one final example in HTML alone before we transition to just cleaning 01:33:17.940 --> 01:33:20.640 up the aesthetics and improving the visuals of everything 01:33:20.640 --> 01:33:21.690 we've been creating. 01:33:21.690 --> 01:33:24.690 Let me go ahead here and close meta.html. 01:33:24.690 --> 01:33:28.830 Let me code up a new file called how about search.html 01:33:28.830 --> 01:33:31.380 and see if we can't draw some inspiration 01:33:31.380 --> 01:33:35.550 from our cursory understanding earlier of how URLs work to see 01:33:35.550 --> 01:33:38.170 if we can't reinvent google.com itself. 01:33:38.170 --> 01:33:41.290 So recall that a canonical URL might look like this here. 01:33:41.290 --> 01:33:45.590 And in particular, if you want to pass in user input to that URL, 01:33:45.590 --> 01:33:48.750 again, you can potentially have a question mark 01:33:48.750 --> 01:33:50.600 and then a key equals value pair. 01:33:50.600 --> 01:33:53.060 Or for that matter, you can even have multiple key value 01:33:53.060 --> 01:33:55.793 pairs that by convention are separated by ampersands. 01:33:55.793 --> 01:33:56.960 These things are everywhere. 01:33:56.960 --> 01:34:00.050 Later today when you pull up almost any website in your browser, 01:34:00.050 --> 01:34:02.690 look at the URL and you'll just see a lot of this. 01:34:02.690 --> 01:34:04.363 A lot of noise too and distractions. 01:34:04.363 --> 01:34:06.530 But there's going to be some equal signs most likely 01:34:06.530 --> 01:34:08.670 and/or some ampersands as well. 01:34:08.670 --> 01:34:11.250 And those are just separating key value pairs. 01:34:11.250 --> 01:34:12.630 Now, what can I do here? 01:34:12.630 --> 01:34:17.060 Well, if you think back to how we manually searched for cats earlier, 01:34:17.060 --> 01:34:18.110 let me quickly do this. 01:34:18.110 --> 01:34:19.310 I'll do this one manually. 01:34:19.310 --> 01:34:22.940 Doc type HTML as my very first line. 01:34:22.940 --> 01:34:27.570 HTML tag with how about my lang attribute for English up here. 01:34:27.570 --> 01:34:29.810 And then inside of this, I'll have a head tag. 01:34:29.810 --> 01:34:31.340 Inside of this, I'll have a title. 01:34:31.340 --> 01:34:34.400 I'll call this example search. 01:34:34.400 --> 01:34:37.340 And then down here I'll have my beginning of the body tag. 01:34:37.340 --> 01:34:40.820 And now let me introduce you to really a final tag for now, 01:34:40.820 --> 01:34:44.750 a form tag, which will create a web form, the thing with text boxes 01:34:44.750 --> 01:34:48.170 and buttons that you and I use every day on any number of websites. 01:34:48.170 --> 01:34:51.710 Inside of this form, I'm going to have an input like a text box 01:34:51.710 --> 01:34:54.890 whose name is going to be q for query, because I'm 01:34:54.890 --> 01:34:57.110 trying to reimplement Google here. 01:34:57.110 --> 01:35:01.550 The type of that I want to be a text box. 01:35:01.550 --> 01:35:03.710 Or if I know I'm using this for search, I 01:35:03.710 --> 01:35:05.630 can actually change this to a search box. 01:35:05.630 --> 01:35:08.280 And it's going to let me-- it's going to generally put a little x there 01:35:08.280 --> 01:35:09.500 so you can clear it quickly. 01:35:09.500 --> 01:35:11.790 That's a nice little enhancement as well. 01:35:11.790 --> 01:35:15.440 And then I'm going to give myself a Submit button by doing input-- 01:35:15.440 --> 01:35:16.070 whoops. 01:35:16.070 --> 01:35:20.840 I'm going to give myself a Submit button by doing input type equals submit. 01:35:20.840 --> 01:35:24.180 And then I'll leave that as such here. 01:35:24.180 --> 01:35:24.680 All right. 01:35:24.680 --> 01:35:26.400 Now I need to do a little bit more. 01:35:26.400 --> 01:35:27.608 But let's see how this looks. 01:35:27.608 --> 01:35:29.210 Let me go over to my other tab. 01:35:29.210 --> 01:35:31.110 Let me go back to my index. 01:35:31.110 --> 01:35:35.550 And if I zoom out, there is search.html. 01:35:35.550 --> 01:35:38.910 I'll click it and there's not much going on here, even if I zoom in. 01:35:38.910 --> 01:35:42.840 But I do indeed have a really big text box and a Submit button. 01:35:42.840 --> 01:35:46.230 But I haven't in my HTML told anyone anywhere 01:35:46.230 --> 01:35:50.050 that I want this input, whether I type cat or dog, to go to google.com. 01:35:50.050 --> 01:35:52.050 So for that, I need a couple of more attributes. 01:35:52.050 --> 01:35:53.925 And I know this from having done this before. 01:35:53.925 --> 01:35:55.770 And any online reference will say the same. 01:35:55.770 --> 01:35:57.413 You can add an action attribute. 01:35:57.413 --> 01:35:59.580 Like what do you want the action of this form to be? 01:35:59.580 --> 01:36:03.570 And you can put the URL to which you want this form to be submitted. 01:36:03.570 --> 01:36:10.020 And I know from tinkering that it should be https://www.google.com/search. 01:36:10.020 --> 01:36:12.600 I don't need to put any question marks here myself. 01:36:12.600 --> 01:36:16.690 But I do want the browser to do that for me. 01:36:16.690 --> 01:36:18.990 So let me go back to my other tab. 01:36:18.990 --> 01:36:20.100 Let me reload. 01:36:20.100 --> 01:36:21.990 And nothing visually has happened. 01:36:21.990 --> 01:36:23.160 But watch this. 01:36:23.160 --> 01:36:26.610 When I now type in cats but before I hit Enter, 01:36:26.610 --> 01:36:29.940 notice that I'm currently at some long crazy URL slash 01:36:29.940 --> 01:36:32.670 search.html as expected. 01:36:32.670 --> 01:36:35.580 If I now go down to the Submit button and click Submit, 01:36:35.580 --> 01:36:38.730 watch what happens to the URL and the page itself. 01:36:38.730 --> 01:36:41.647 I'm whisked away to the actual google.com. 01:36:41.647 --> 01:36:43.230 And indeed, there are those same cats. 01:36:43.230 --> 01:36:47.160 And if I zoom in here, you'll see that my URL has changed to be indeed 01:36:47.160 --> 01:36:49.620 /search?q=cats. 01:36:49.620 --> 01:36:51.360 So this is just how web forms work. 01:36:51.360 --> 01:36:53.820 When you submit any form on the web in this way, 01:36:53.820 --> 01:36:58.200 the browser automatically goes to that action URL, adds a question mark, 01:36:58.200 --> 01:37:01.680 puts any key value pairs that you manually typed into the text boxes, 01:37:01.680 --> 01:37:03.520 and lets the server do its thing. 01:37:03.520 --> 01:37:05.880 Now here's where Chrome is starting to simplify things. 01:37:05.880 --> 01:37:07.170 Safari does this too. 01:37:07.170 --> 01:37:10.500 If you double click on your URL, now you see the full URL. 01:37:10.500 --> 01:37:12.300 But if any parts are missing, that's just 01:37:12.300 --> 01:37:16.020 a UI thing to eliminate visual distractions nowadays. 01:37:16.020 --> 01:37:20.760 Meanwhile, if I go back to my own form, if I search this time for dogs and hit 01:37:20.760 --> 01:37:25.620 Enter, now again, the URL changes to be q=dogs. 01:37:25.620 --> 01:37:30.840 And it all reduces to this basic building block of using a form tag. 01:37:30.840 --> 01:37:32.220 Now I can be more explicit. 01:37:32.220 --> 01:37:35.370 If I know I want to use get, which is actually the default, 01:37:35.370 --> 01:37:38.040 I can literally say quote unquote "get" in all lowercase, 01:37:38.040 --> 01:37:40.620 even though the verb earlier was by design in uppercase. 01:37:40.620 --> 01:37:42.930 But here now, I'm just being ever more explicit. 01:37:42.930 --> 01:37:47.880 If I don't want the label of this button to be very generically Submit, 01:37:47.880 --> 01:37:50.490 maybe I want it to be "Google Search," quote unquote. 01:37:50.490 --> 01:37:52.860 Well, if you read the documentation for forms, 01:37:52.860 --> 01:37:55.290 you can actually change the value of the button 01:37:55.290 --> 01:37:57.610 to be quote unquote "Google Search." 01:37:57.610 --> 01:38:01.390 And if I now go back here and reload, I get a fresh form. 01:38:01.390 --> 01:38:04.840 And now I get a button that literally says Google Search. 01:38:04.840 --> 01:38:07.900 And if I tinker with this further, because this isn't very user friendly, 01:38:07.900 --> 01:38:09.840 there's even more attributes I can do. 01:38:09.840 --> 01:38:15.570 I can add on my search input a autocomplete 01:38:15.570 --> 01:38:19.232 equals off if I don't want to see my own history for whatever reason. 01:38:19.232 --> 01:38:21.690 I don't want people knowing I'm searching for cats and dogs 01:38:21.690 --> 01:38:22.440 on this page. 01:38:22.440 --> 01:38:25.200 I can auto focus on the text box so that it 01:38:25.200 --> 01:38:28.740 shows the cursor blinking in that box by default. 01:38:28.740 --> 01:38:30.760 And I can even do something like this. 01:38:30.760 --> 01:38:34.230 I can have a placeholder attribute that says something like query 01:38:34.230 --> 01:38:36.600 or some other documentation for the user. 01:38:36.600 --> 01:38:41.040 And if I now go back and reload, you'll see notice it says query 01:38:41.040 --> 01:38:43.890 and it's subtle, but my cursor is already positioned there. 01:38:43.890 --> 01:38:45.360 It gave it focus. 01:38:45.360 --> 01:38:48.820 And I can type cats now without having to click in the box manually, 01:38:48.820 --> 01:38:52.500 which is just marginally better for the user's experience. 01:38:52.500 --> 01:38:57.740 Any questions now on all of this here? 01:38:57.740 --> 01:38:59.510 Any questions? 01:38:59.510 --> 01:39:00.010 All right. 01:39:00.010 --> 01:39:00.802 That too was a lot. 01:39:00.802 --> 01:39:02.680 Why don't we take a casual five minute break? 01:39:02.680 --> 01:39:05.740 And when we resume, we'll take a look at CSS, add in some JavaScript, 01:39:05.740 --> 01:39:06.460 and then wrap up. 01:39:06.460 --> 01:39:08.950 So five minutes only for now. 01:39:08.950 --> 01:39:10.180 All right. 01:39:10.180 --> 01:39:11.110 We are back. 01:39:11.110 --> 01:39:14.170 So that's technically it for HTML. 01:39:14.170 --> 01:39:17.020 Here on out, it'll be up to online resources and references 01:39:17.020 --> 01:39:19.600 we point you to just to fill in your vocabulary for more tags 01:39:19.600 --> 01:39:20.450 and attributes. 01:39:20.450 --> 01:39:21.820 But conceptually, that's it. 01:39:21.820 --> 01:39:25.750 There's attributes, there are tags, and there are attributes, 01:39:25.750 --> 01:39:30.310 and the rest of it really is just kind of a laundry list of possible features. 01:39:30.310 --> 01:39:32.560 But it turns out too you'll see over time 01:39:32.560 --> 01:39:34.630 that you can even see the HTML for websites. 01:39:34.630 --> 01:39:39.760 So for instance, if I go over to harvard.edu in my browser, which 01:39:39.760 --> 01:39:42.400 I'll go ahead in just a moment here and do here, 01:39:42.400 --> 01:39:48.400 and do https://www.harvard.edu/ Enter, it again 01:39:48.400 --> 01:39:51.080 will pull up today's version of Harvard's website. 01:39:51.080 --> 01:39:54.790 And if I right click or Control click on it again and go to Inspect, 01:39:54.790 --> 01:39:57.010 you'll see those so called developer tools. 01:39:57.010 --> 01:39:59.920 And earlier we focused on the Network tab 01:39:59.920 --> 01:40:03.010 just so we could see the HTTP stuff going on. 01:40:03.010 --> 01:40:06.160 But what I glossed over earlier was the so called Elements 01:40:06.160 --> 01:40:10.540 tab, which actually shows you the HTML underlying any web 01:40:10.540 --> 01:40:11.750 page on the internet. 01:40:11.750 --> 01:40:14.410 And so for instance, here is the underlying HTML 01:40:14.410 --> 01:40:17.080 for Harvard's homepage as of right now. 01:40:17.080 --> 01:40:19.090 And aesthetically, some of it's been collapsed. 01:40:19.090 --> 01:40:20.890 So if I click on these various triangles, 01:40:20.890 --> 01:40:22.450 I'll see what's actually inside of. 01:40:22.450 --> 01:40:25.000 That is the children of some of these HTML tags. 01:40:25.000 --> 01:40:26.710 But here on out if you're ever curious as 01:40:26.710 --> 01:40:30.640 to how a web page made some feature visually, 01:40:30.640 --> 01:40:33.070 you can just literally use these developer tools 01:40:33.070 --> 01:40:37.960 built into your own browser just to see what the web developer actually did. 01:40:37.960 --> 01:40:39.760 And you can do things too like this. 01:40:39.760 --> 01:40:43.780 Like if you really like maybe, let's see, 01:40:43.780 --> 01:40:47.620 if you really like this menu in the top right hand corner of Harvard's website, 01:40:47.620 --> 01:40:52.510 you can even right click that or Control click that specifically, choose 01:40:52.510 --> 01:40:57.850 Inspect, and what browsers will do is jump to the HTML corresponding 01:40:57.850 --> 01:40:59.990 to that visual element on the page. 01:40:59.990 --> 01:41:02.890 And here you can see that we've not talked about this tag before. 01:41:02.890 --> 01:41:05.890 There's a button tag, there's an ID attribute, 01:41:05.890 --> 01:41:09.670 and there's some other attributes as well that define that button. 01:41:09.670 --> 01:41:12.790 You can do other things too in the web page. 01:41:12.790 --> 01:41:15.110 Let me scroll down, for instance, here. 01:41:15.110 --> 01:41:20.110 And actually, let's go to another one, like yale.edu here in today's theme. 01:41:20.110 --> 01:41:26.770 And suppose we want to do something like change the aesthetics of this website. 01:41:26.770 --> 01:41:28.300 Well, how about this? 01:41:28.300 --> 01:41:29.500 Over here, Life At Yale. 01:41:29.500 --> 01:41:30.670 Let's right click on this. 01:41:30.670 --> 01:41:31.870 Choose Inspect. 01:41:31.870 --> 01:41:34.250 That's going to jump to that part of the page. 01:41:34.250 --> 01:41:36.700 And notice what you can do here in this Elements tab. 01:41:36.700 --> 01:41:39.700 We can be a little playful in return today. 01:41:39.700 --> 01:41:41.260 Life At Harvard. 01:41:41.260 --> 01:41:45.370 And voila, we've now changed Yale's website, it would seem. 01:41:45.370 --> 01:41:48.070 So have we really? 01:41:48.070 --> 01:41:51.130 Hopefully hacking is not actually this easy. 01:41:51.130 --> 01:41:56.110 What did we actually do based on today's mental model? 01:41:56.110 --> 01:41:57.580 I have changed the page, but. 01:41:57.580 --> 01:41:58.930 AUDIENCE: [INAUDIBLE] 01:41:58.930 --> 01:42:00.700 DAVID MALAN: Yeah, I've just changed how it is for me. 01:42:00.700 --> 01:42:03.575 Because my browser, just like with Phyllis and Brian from the get go, 01:42:03.575 --> 01:42:05.080 requested Yale's web page. 01:42:05.080 --> 01:42:08.950 I got back a virtual envelope containing that HTML, as we've now called it. 01:42:08.950 --> 01:42:10.420 My browser has a local copy. 01:42:10.420 --> 01:42:13.720 It's got its own tree, otherwise known as a DOM, Document Object Model, 01:42:13.720 --> 01:42:14.950 built up in its memory. 01:42:14.950 --> 01:42:18.080 And yeah, I went to town and changed my copy of it. 01:42:18.080 --> 01:42:20.890 But of course, hopefully, I've not changed the actual server. 01:42:20.890 --> 01:42:24.130 And in fact, if I reload Yale's website now, 01:42:24.130 --> 01:42:28.840 hopefully it will revert back to, indeed, what it should be instead. 01:42:28.840 --> 01:42:29.830 Life At Yale. 01:42:29.830 --> 01:42:34.505 But this ability in your own browser, be it Chrome or Firefox or Edge or Safari, 01:42:34.505 --> 01:42:36.880 to have these built in developer tools are very powerful, 01:42:36.880 --> 01:42:39.520 because it's going to enable you to not only diagnose 01:42:39.520 --> 01:42:43.000 problems that will invariably arise in the coming weeks with your own code, 01:42:43.000 --> 01:42:45.430 but it's also going to allow you to learn from other sites 01:42:45.430 --> 01:42:48.080 how you can do things and tinker as well. 01:42:48.080 --> 01:42:51.340 But up until now, we've focused only on tags and attributes 01:42:51.340 --> 01:42:53.620 and on the structure of a web page. 01:42:53.620 --> 01:42:56.830 Let's now focus more on the aesthetics and fine tuning that. 01:42:56.830 --> 01:42:59.770 It turns out that HTML has very limited support 01:42:59.770 --> 01:43:03.920 for anything aesthetic like font sizes and colors and so forth. 01:43:03.920 --> 01:43:08.110 And in recent years, people have used necessarily a second language 01:43:08.110 --> 01:43:09.040 called CSS. 01:43:09.040 --> 01:43:10.330 Not a programming language. 01:43:10.330 --> 01:43:13.240 Again, a markup language, if you will, to just fine 01:43:13.240 --> 01:43:14.680 tune the aesthetics of a page. 01:43:14.680 --> 01:43:17.360 Font sizes, colors, margins, and all of that. 01:43:17.360 --> 01:43:21.250 So CSS is going to allow us to define a whole bunch of properties, 01:43:21.250 --> 01:43:25.690 which is just another group of people's terminology for key value pairs. 01:43:25.690 --> 01:43:29.870 Indeed, ever since week five, key value pairs are everywhere in the world, 01:43:29.870 --> 01:43:32.300 not just at Sweetgreen and restaurants, but indeed 01:43:32.300 --> 01:43:36.340 under inline code and languages and technologies like these. 01:43:36.340 --> 01:43:39.970 So properties is the new word in CSS for what a moment ago we 01:43:39.970 --> 01:43:41.410 called attributes in HTML. 01:43:41.410 --> 01:43:43.510 But it's the same idea, just different vocabulary 01:43:43.510 --> 01:43:45.430 that you get used to over time. 01:43:45.430 --> 01:43:50.260 A few phrases I might use now and you'll hear in the coming days would be these. 01:43:50.260 --> 01:43:52.330 Type selector, class selector, ID selector, 01:43:52.330 --> 01:43:55.390 attribute selector, which just refer to different techniques we're 01:43:55.390 --> 01:43:58.210 about to see that are going to allow you to control more 01:43:58.210 --> 01:44:01.248 precisely the aesthetics of specific things on the page. 01:44:01.248 --> 01:44:03.040 And the way we're going to do this is we're 01:44:03.040 --> 01:44:05.838 going to take our basic HTML, like we saw earlier, 01:44:05.838 --> 01:44:09.130 and we're going to introduce in the next few minutes just a couple of more tags 01:44:09.130 --> 01:44:10.090 and/or attributes. 01:44:10.090 --> 01:44:16.990 One, we're going to introduce you to a tag called style, which nicely named 01:44:16.990 --> 01:44:19.300 allows you to control the style, the aesthetics, 01:44:19.300 --> 01:44:20.950 the visuals of the web page. 01:44:20.950 --> 01:44:22.930 Or we're going to introduce you to a link 01:44:22.930 --> 01:44:27.400 tag, which very confusingly does not give you a link that you can click on. 01:44:27.400 --> 01:44:31.510 It just links to another file that then gets automatically included 01:44:31.510 --> 01:44:34.990 or imported, to borrow our language from C or in Python. 01:44:34.990 --> 01:44:36.110 But same idea. 01:44:36.110 --> 01:44:38.230 This will allow us to include secondary files. 01:44:38.230 --> 01:44:41.500 And we're going to ultimately show you how you can leverage third party 01:44:41.500 --> 01:44:43.870 frameworks, libraries that other people wrote, 01:44:43.870 --> 01:44:47.040 so as to not get stuck in the weeds of all the fine tuning of aesthetics 01:44:47.040 --> 01:44:50.290 and just make pretty things fast so you can focus really on the intellectually 01:44:50.290 --> 01:44:54.220 interesting part, if that's your choice, of building the content, the site out, 01:44:54.220 --> 01:44:56.090 the application out yourself. 01:44:56.090 --> 01:44:58.840 All right, so with that said, let me go back to VS Code here. 01:44:58.840 --> 01:45:02.680 And let me go ahead and create a simple example called home.html. 01:45:02.680 --> 01:45:06.010 A very simple home page for John Harvard, for instance. 01:45:06.010 --> 01:45:09.400 Let me give myself three paragraphs initially, the first of which 01:45:09.400 --> 01:45:11.740 is just going to have the person's name. 01:45:11.740 --> 01:45:16.510 The second paragraph is going to say something like welcome to my home page 01:45:16.510 --> 01:45:17.530 to greet visitors. 01:45:17.530 --> 01:45:21.640 And the third is going to be a little footer like copyright 01:45:21.640 --> 01:45:26.530 how about John Harvard 1636 or something like that. 01:45:26.530 --> 01:45:28.960 All right, let me go back to my other tab as before. 01:45:28.960 --> 01:45:30.220 Reload my index. 01:45:30.220 --> 01:45:31.240 There's my new file. 01:45:31.240 --> 01:45:33.640 Home.html and I'll click that. 01:45:33.640 --> 01:45:37.300 And you'll see, OK, I mean, this is sort of 1636 style web page. 01:45:37.300 --> 01:45:41.320 Super simple, all text, nothing really interesting going on there. 01:45:41.320 --> 01:45:44.290 But we can start to style it a little differently. 01:45:44.290 --> 01:45:46.810 If the title of the page is John Harvard and then it's 01:45:46.810 --> 01:45:49.330 welcome to my home page and then this less important footer, 01:45:49.330 --> 01:45:52.390 why don't we have the text be large, then medium, then small? 01:45:52.390 --> 01:45:54.730 So something arbitrary but a little more nuanced. 01:45:54.730 --> 01:45:57.410 So let me go back to VS Code here. 01:45:57.410 --> 01:46:02.800 And in my home.html file, let me introduce not yet the style tag 01:46:02.800 --> 01:46:05.530 but what I'm going to call temporarily the style attribute. 01:46:05.530 --> 01:46:06.790 Both indeed exist. 01:46:06.790 --> 01:46:09.110 This one's simpler and it's going to be correct, 01:46:09.110 --> 01:46:11.980 but we'll see in a moment not as well designed, arguably, 01:46:11.980 --> 01:46:13.490 as is often our narrative. 01:46:13.490 --> 01:46:17.860 So inside of the style tag, you can put this language called CSS. 01:46:17.860 --> 01:46:20.590 Key value pairs, otherwise known as properties. 01:46:20.590 --> 01:46:23.620 The only way you know what properties exist, what keys exist, 01:46:23.620 --> 01:46:26.513 is by taking a class, reading a book, looking at an online reference. 01:46:26.513 --> 01:46:29.180 And we're going to give you just a sampling of what's out there. 01:46:29.180 --> 01:46:32.890 So suppose I want to control the font size of this first paragraph. 01:46:32.890 --> 01:46:37.720 I can literally say font-size in all lowercase, colon, and then a word 01:46:37.720 --> 01:46:38.560 like large. 01:46:38.560 --> 01:46:42.190 Or I can specify 12 point or 18 point or something 01:46:42.190 --> 01:46:45.490 more precise like from Google Docs or Microsoft Word. 01:46:45.490 --> 01:46:50.260 And suppose I want to make this text down here medium. 01:46:50.260 --> 01:46:54.340 Well, I'll do quote unquote font size colon medium. 01:46:54.340 --> 01:47:00.850 And down here or I'll do style equals font-size small. 01:47:00.850 --> 01:47:03.970 So I'm going to start with just these three key value pairs. 01:47:03.970 --> 01:47:06.033 Same key but different values. 01:47:06.033 --> 01:47:08.200 I'll go back to my page and in a moment I'll reload, 01:47:08.200 --> 01:47:09.742 and it's going to be somewhat subtle. 01:47:09.742 --> 01:47:13.490 But watch how the font size do change when I reload now. 01:47:13.490 --> 01:47:13.990 All right. 01:47:13.990 --> 01:47:15.157 So I've got a little bigger. 01:47:15.157 --> 01:47:18.223 Middle one is about the same, and the last one is a little smaller. 01:47:18.223 --> 01:47:19.390 What if I want to center it? 01:47:19.390 --> 01:47:22.000 Just like many web pages have the text like this centered. 01:47:22.000 --> 01:47:25.060 Well, I can separate these key value pairs with semicolons. 01:47:25.060 --> 01:47:28.180 And I'm sorry, semicolons are kind of sort of back with CSS. 01:47:28.180 --> 01:47:31.510 But I can do text-align:center. 01:47:31.510 --> 01:47:34.150 Strictly speaking, I don't need the last semicolon 01:47:34.150 --> 01:47:38.140 if there's no more key value pairs, but I'll just do it to be consistent. 01:47:38.140 --> 01:47:40.540 Text-align:center. 01:47:40.540 --> 01:47:46.060 And then down here after another semicolon, text-align:center. 01:47:46.060 --> 01:47:47.770 All right, let's go back, reload. 01:47:47.770 --> 01:47:49.930 Now it's going to be much more obvious the change. 01:47:49.930 --> 01:47:52.420 And we now have the beginnings of a homepage. 01:47:52.420 --> 01:47:55.270 Still pretty basic, but at least it's a little more interesting. 01:47:55.270 --> 01:47:58.060 Turns out we can do a little better with the copyright symbol. 01:47:58.060 --> 01:48:01.960 Like most computers actually have support for a circle with a C in it. 01:48:01.960 --> 01:48:05.503 But you can't just do that with text like this. 01:48:05.503 --> 01:48:06.920 There's different ways to do this. 01:48:06.920 --> 01:48:09.337 You could copy paste it from a website that already has it 01:48:09.337 --> 01:48:12.670 so you don't have to figure out the magical keystroke on your Mac or PC. 01:48:12.670 --> 01:48:15.160 But there's also in HTML what are called entities. 01:48:15.160 --> 01:48:19.780 And you can actually specify using hexadecimal or decimal codes 01:48:19.780 --> 01:48:24.970 numbers like this, hash 169 semicolon after an ampersand. 01:48:24.970 --> 01:48:27.340 And this is a special symbol that you can look up 01:48:27.340 --> 01:48:29.710 in any online reference for special characters 01:48:29.710 --> 01:48:33.190 that are hard or impossible to type manually at your keyboard. 01:48:33.190 --> 01:48:35.920 And this, let me zoom in just so it's obvious, 01:48:35.920 --> 01:48:40.990 if I reload now instead of being two parentheses and a C character, 01:48:40.990 --> 01:48:43.400 now it's a proper copyright symbol. 01:48:43.400 --> 01:48:44.650 So you'll see these out there. 01:48:44.650 --> 01:48:47.410 They're not necessarily that frequently used nowadays, 01:48:47.410 --> 01:48:49.330 but it's good to know that they exist. 01:48:49.330 --> 01:48:53.860 But let me go back now to my code and propose that while correct, 01:48:53.860 --> 01:48:56.650 this is arguably not very well designed. 01:48:56.650 --> 01:48:59.980 And even if you've never seen HTML, never seen CSS before, 01:48:59.980 --> 01:49:07.080 what instinct might you have for why this is poorly designed? 01:49:07.080 --> 01:49:08.085 Yeah. 01:49:08.085 --> 01:49:08.987 AUDIENCE: [INAUDIBLE] 01:49:08.987 --> 01:49:10.320 DAVID MALAN: There's repetition. 01:49:10.320 --> 01:49:13.110 In general in the past several weeks, C, Python, SQL, 01:49:13.110 --> 01:49:16.992 repetition generally bad and sloppy and it's not going to scale well. 01:49:16.992 --> 01:49:19.200 So the repetition I think you're probably alluding to 01:49:19.200 --> 01:49:22.440 is text align center, text align center, text align center. 01:49:22.440 --> 01:49:25.350 Well, we can factor that out in CSS. 01:49:25.350 --> 01:49:27.930 The C in CSS means Cascading. 01:49:27.930 --> 01:49:30.750 And this means that if you move some properties 01:49:30.750 --> 01:49:35.250 to a parent or a grandparent, the children or grandchildren 01:49:35.250 --> 01:49:37.020 will inherit those properties. 01:49:37.020 --> 01:49:40.330 That is, they will cascade down the family tree, so to speak. 01:49:40.330 --> 01:49:42.930 And so let me go ahead and remove all of these, 01:49:42.930 --> 01:49:45.660 since I claim they're indeed redundant. 01:49:45.660 --> 01:49:49.900 And let me preserve just one of them by, well, let me do this. 01:49:49.900 --> 01:49:53.400 It's not quite right to put a paragraph inside of a paragraph. 01:49:53.400 --> 01:49:56.950 That's just not a thing in English writing or in writing more generally. 01:49:56.950 --> 01:49:58.770 So I'm going to do one thing first. 01:49:58.770 --> 01:50:01.830 It turns out that these two are arguably not paragraphs. 01:50:01.830 --> 01:50:04.890 This is like a header, the body, the essence of the page, 01:50:04.890 --> 01:50:05.850 and then the footer. 01:50:05.850 --> 01:50:09.880 So if a paragraph isn't quite the right English semantics, 01:50:09.880 --> 01:50:11.760 you can actually use more generically a tag 01:50:11.760 --> 01:50:15.520 that's all over the internet called div for division of the page. 01:50:15.520 --> 01:50:19.320 And this is just a very generic term for a big rectangular region 01:50:19.320 --> 01:50:21.720 that divides the page again and again, just so that you 01:50:21.720 --> 01:50:23.920 can think about different regions. 01:50:23.920 --> 01:50:27.420 Now that I have div, which really has no more meaning than that. 01:50:27.420 --> 01:50:28.710 It's a division of the page. 01:50:28.710 --> 01:50:29.850 Interpret as you will. 01:50:29.850 --> 01:50:32.080 Now I can have multiple ones of these. 01:50:32.080 --> 01:50:34.710 And let me go ahead and open a div tag here. 01:50:34.710 --> 01:50:37.210 Let me close a new div tag here. 01:50:37.210 --> 01:50:39.312 And then just to keep everything tidy, I'm 01:50:39.312 --> 01:50:41.520 going to highlight everything in between and hit Tab. 01:50:41.520 --> 01:50:44.130 And that just automatically indents everything for me. 01:50:44.130 --> 01:50:48.970 Now I have three divs inside of another div, and that's totally fine. 01:50:48.970 --> 01:50:50.460 This is very commonly done. 01:50:50.460 --> 01:50:51.750 Now I'm going to do this. 01:50:51.750 --> 01:50:57.960 Style equals quote unquote text align colon center semicolon or not. 01:50:57.960 --> 01:51:01.020 And now I have some cascading capabilities. 01:51:01.020 --> 01:51:05.040 Now the parent of those three children, John harvard, welcome to my home page, 01:51:05.040 --> 01:51:07.900 and the copyright will now all inherit that property. 01:51:07.900 --> 01:51:10.650 So when I hit reload, nothing aesthetically has changed. 01:51:10.650 --> 01:51:13.350 Whoops, sorry. 01:51:13.350 --> 01:51:15.420 I should have done reload slightly earlier. 01:51:15.420 --> 01:51:17.610 When you use a div instead of a paragraph, 01:51:17.610 --> 01:51:20.968 it actually gets rid of the space between those paragraphs. 01:51:20.968 --> 01:51:23.010 It just sandwiches them a little closer together. 01:51:23.010 --> 01:51:24.690 I can fix this in another way. 01:51:24.690 --> 01:51:27.330 But that aside, everything is still centered 01:51:27.330 --> 01:51:29.970 and the text is still large, medium, and small. 01:51:29.970 --> 01:51:32.760 But I should have called out that change in the paragraph spacing. 01:51:32.760 --> 01:51:35.650 But we could bring that back before long if we wanted. 01:51:35.650 --> 01:51:38.800 Now, what more could I do to maybe improve this? 01:51:38.800 --> 01:51:42.630 Well, strictly speaking, I don't really need that parent div 01:51:42.630 --> 01:51:46.200 because these three divs inside already had a parent. 01:51:46.200 --> 01:51:49.620 So let me actually get rid of that new div just to undo what I did. 01:51:49.620 --> 01:51:50.580 I'll highlight this. 01:51:50.580 --> 01:51:52.680 And if you haven't seen this trick, Shift Tab 01:51:52.680 --> 01:51:55.380 will unindent nicely, which is perhaps helpful. 01:51:55.380 --> 01:51:59.200 I could just put that text align center on the body tag. 01:51:59.200 --> 01:52:03.810 So text align colon center quote unquote. 01:52:03.810 --> 01:52:07.770 This too would work as well so long as you go up the family tree, so 01:52:07.770 --> 01:52:11.160 to speak, reload, and now indeed there's nothing aesthetically 01:52:11.160 --> 01:52:13.080 that has changed this time. 01:52:13.080 --> 01:52:16.140 But it turns out nowadays the web is getting a little more sophisticated. 01:52:16.140 --> 01:52:19.080 And even though you will see so many examples online, in tutorials, 01:52:19.080 --> 01:52:21.870 in books using div, div, div all over the place, 01:52:21.870 --> 01:52:24.050 there are newer semantic tags. 01:52:24.050 --> 01:52:25.800 Semantic just means they have more meaning 01:52:25.800 --> 01:52:27.670 than this generic notion of a division. 01:52:27.670 --> 01:52:31.050 And if you look up a documentation for HTML, 01:52:31.050 --> 01:52:34.680 you'll see that if you want to have a header on a page, not a heading 01:52:34.680 --> 01:52:38.910 like H1, H2 but a header, there's literally nowadays a header tag. 01:52:38.910 --> 01:52:42.240 And this is marginally better because it now says what it is. 01:52:42.240 --> 01:52:44.860 Search engines like Google and Bing can detect, oh, 01:52:44.860 --> 01:52:46.110 that's the header of the page. 01:52:46.110 --> 01:52:49.235 Maybe we should use this and give it more prominence in the search results. 01:52:49.235 --> 01:52:51.220 You can then have a main part of the page. 01:52:51.220 --> 01:52:53.460 So literally a tag called main nowadays. 01:52:53.460 --> 01:52:55.500 You can literally have a footer of the page. 01:52:55.500 --> 01:52:58.470 And again, these are often useful for screen readers 01:52:58.470 --> 01:53:01.170 to help recite things verbally for folks who might otherwise not 01:53:01.170 --> 01:53:02.045 be able to read them. 01:53:02.045 --> 01:53:06.510 And probably the screen readers might highlight the header and the main part 01:53:06.510 --> 01:53:08.640 but maybe might not spend time for the user 01:53:08.640 --> 01:53:11.820 on the footer, which is arguably a little less important semantically 01:53:11.820 --> 01:53:12.840 usually. 01:53:12.840 --> 01:53:14.893 Or search engines, again, now know what's 01:53:14.893 --> 01:53:17.560 the header, what's the footer, what's the main part of the page. 01:53:17.560 --> 01:53:20.020 So they know what to search and analyze. 01:53:20.020 --> 01:53:25.270 So this would arguably be a better design nowadays as well. 01:53:25.270 --> 01:53:28.060 But what else remains as a problem? 01:53:28.060 --> 01:53:32.040 Well, this is now getting a little bit more subtle and takes some experience. 01:53:32.040 --> 01:53:36.360 But this practice of putting HTML and CSS all in the same file, 01:53:36.360 --> 01:53:37.450 it's a little sloppy. 01:53:37.450 --> 01:53:37.950 Why? 01:53:37.950 --> 01:53:42.180 Because it means I'm comingling my data with the presentation thereof. 01:53:42.180 --> 01:53:45.210 The juicy stuff I care about, like John Harvard and the phrase 01:53:45.210 --> 01:53:47.910 welcome to my home page, and all of the aesthetics 01:53:47.910 --> 01:53:49.530 that I might want to change over time. 01:53:49.530 --> 01:53:52.548 And honestly, because everything is currently in one big file, 01:53:52.548 --> 01:53:54.840 it's going to make it really hard for me to collaborate 01:53:54.840 --> 01:53:57.430 with a classmate or a colleague at work. 01:53:57.430 --> 01:53:59.790 So that maybe I do the HTML, they do the CSS. 01:53:59.790 --> 01:54:01.910 Uh-uh, not if you're all working in the same file. 01:54:01.910 --> 01:54:02.910 It would be a nightmare. 01:54:02.910 --> 01:54:06.000 Even if you use a VS Code sharing feature like Google Docs 01:54:06.000 --> 01:54:09.230 and both are typing at the same time, you're going to mess up somehow. 01:54:09.230 --> 01:54:11.990 It'd be nice if we could separate these two languages. 01:54:11.990 --> 01:54:14.490 Well, one way to do that would be as follows. 01:54:14.490 --> 01:54:16.910 Let me get rid of all of the style tags. 01:54:16.910 --> 01:54:21.310 Sorry, style attributes that I've added up until now 01:54:21.310 --> 01:54:23.710 on all four now of these tags. 01:54:23.710 --> 01:54:29.350 And let me introduce the style tag that we saw on the slide earlier instead. 01:54:29.350 --> 01:54:31.900 I'm going to go up here into the head of the page, which 01:54:31.900 --> 01:54:35.650 is where technically these style tags must go so that they're already 01:54:35.650 --> 01:54:39.250 loaded into memory before the body is even analyzed by the browser. 01:54:39.250 --> 01:54:41.860 And inside of the style tag, I'm actually 01:54:41.860 --> 01:54:47.720 going to select the HTML elements that I want to stylize, if you will. 01:54:47.720 --> 01:54:50.110 So if I want to change the body's aesthetics, 01:54:50.110 --> 01:54:52.450 I'm going to literally type the name of that tag body. 01:54:52.450 --> 01:54:55.480 And then, I'm sorry, curly braces are back also 01:54:55.480 --> 01:55:01.390 from C. Inside of these curly braces, I'm going to put text align center. 01:55:01.390 --> 01:55:03.260 So the key value pairs are the same. 01:55:03.260 --> 01:55:06.130 The only new thing I've done is I've moved some of the syntax 01:55:06.130 --> 01:55:08.530 up to this new style tag in the head. 01:55:08.530 --> 01:55:11.930 If I want to now control the header tag as well, 01:55:11.930 --> 01:55:13.390 I can use the same curly braces. 01:55:13.390 --> 01:55:17.020 This is convention to put the open curly brace on the same line, the closed 01:55:17.020 --> 01:55:18.430 curly brace on another. 01:55:18.430 --> 01:55:22.270 The browser doesn't really care, but this is a common CSS style convention. 01:55:22.270 --> 01:55:25.570 I'm going to do font size large semicolon. 01:55:25.570 --> 01:55:29.620 Then for the main tag, I'm going to do font size medium. 01:55:29.620 --> 01:55:34.000 And then for the footer tag, I'm going to do font size small. 01:55:34.000 --> 01:55:35.320 So same exact thing. 01:55:35.320 --> 01:55:37.473 And it's admittedly a little bit more verbose. 01:55:37.473 --> 01:55:38.890 It's taking up more lines of code. 01:55:38.890 --> 01:55:40.700 It doesn't all quite fit on the screen. 01:55:40.700 --> 01:55:44.455 But if you scroll back down now, and you'll acquire an eye for this, 01:55:44.455 --> 01:55:46.210 this is just better. 01:55:46.210 --> 01:55:47.540 It's just more compact. 01:55:47.540 --> 01:55:48.700 It's more readable. 01:55:48.700 --> 01:55:52.430 The content, the data jumps out, and there's no visual distractions 01:55:52.430 --> 01:55:55.330 like the CSS properties as before. 01:55:55.330 --> 01:55:58.597 Upside here too is that we don't actually need to-- 01:55:58.597 --> 01:56:00.430 this doesn't actually change the aesthetics. 01:56:00.430 --> 01:56:03.320 If I reload the same page, it still looks the same. 01:56:03.320 --> 01:56:06.880 But I've taken a step toward some slightly better design. 01:56:06.880 --> 01:56:09.820 But let me propose that there's other ways to do this too. 01:56:09.820 --> 01:56:14.382 We just selected things by way of their type. 01:56:14.382 --> 01:56:16.840 So that was a so called type selector when I literally just 01:56:16.840 --> 01:56:18.010 specified the type of tag. 01:56:18.010 --> 01:56:20.890 Body, header, main, footer. 01:56:20.890 --> 01:56:23.890 But there's other ways that now we can lay the foundation 01:56:23.890 --> 01:56:27.430 for making reusable CSS that you and colleagues and classmates 01:56:27.430 --> 01:56:31.790 can use and reuse in multiple files and even in multiple projects. 01:56:31.790 --> 01:56:33.590 So let me actually go ahead and do this. 01:56:33.590 --> 01:56:37.240 Instead of just very explicitly saying I want the body to be centered, 01:56:37.240 --> 01:56:43.030 let me invent an adjective, if you will, and let me change this to .centered. 01:56:43.030 --> 01:56:48.730 And this new vocabulary word, centered, will literally mean text align center. 01:56:48.730 --> 01:56:53.800 Let me go ahead here and I'm just going to create a new adjective called large, 01:56:53.800 --> 01:56:58.540 a new adjective called medium, and a new adjective called small. 01:56:58.540 --> 01:57:02.260 They are deliberately consistent with what the properties do. 01:57:02.260 --> 01:57:04.810 But these are now my own vocabulary words. 01:57:04.810 --> 01:57:06.970 And they are called classes. 01:57:06.970 --> 01:57:11.740 So a class is just a collection of key value pairs, a collection of properties 01:57:11.740 --> 01:57:14.200 that you get to invent for yourself. 01:57:14.200 --> 01:57:16.360 And what it lets you do now is this. 01:57:16.360 --> 01:57:21.230 Now if I want the whole body to be centered, I can add this tag, 01:57:21.230 --> 01:57:25.660 which we actually saw briefly in Yale's HTML, class=center. 01:57:25.660 --> 01:57:30.940 Down here in the header if I want this to be large, I can say class="large". 01:57:30.940 --> 01:57:35.140 Down here on main, I can say class="medium". 01:57:35.140 --> 01:57:38.650 And down here I can have class="small". 01:57:38.650 --> 01:57:42.760 Now, I have taken one step backward by re-adding some of the aesthetics 01:57:42.760 --> 01:57:43.540 to the page. 01:57:43.540 --> 01:57:45.520 But it's not the actual properties. 01:57:45.520 --> 01:57:46.960 It's not the key value pairs. 01:57:46.960 --> 01:57:48.850 It's now more semantically nice, because now 01:57:48.850 --> 01:57:52.930 I just know from reading the HTML what these things are going to look like, 01:57:52.930 --> 01:57:56.680 whereas the implementation details for all four of those adjectives 01:57:56.680 --> 01:57:58.125 is now relegated up above. 01:57:58.125 --> 01:57:59.500 And these are literally my words. 01:57:59.500 --> 01:58:03.040 I could change it to .foo and use class="foo" 01:58:03.040 --> 01:58:07.120 but obviously that would not be the best choice of words in this case. 01:58:07.120 --> 01:58:08.170 All right. 01:58:08.170 --> 01:58:11.240 Any questions on this? 01:58:11.240 --> 01:58:16.153 This now is what we would call a class selector by using literally the dot, 01:58:16.153 --> 01:58:18.070 even though the dot does not appear elsewhere, 01:58:18.070 --> 01:58:21.700 but dot means this is a class. 01:58:21.700 --> 01:58:25.490 These are not always the best syntactic design decisions that the world makes. 01:58:25.490 --> 01:58:25.990 All right. 01:58:25.990 --> 01:58:27.460 Well, one last trick then. 01:58:27.460 --> 01:58:30.078 Notice that this is a little annoying that I'm still 01:58:30.078 --> 01:58:31.120 working in the same file. 01:58:31.120 --> 01:58:33.190 And if my classmate wants to clean up my aesthetics, 01:58:33.190 --> 01:58:36.190 make my homepage look way better, if my colleague wants to do the same, 01:58:36.190 --> 01:58:39.160 wouldn't it be nice if we could actually move all of this code 01:58:39.160 --> 01:58:43.120 to a different file like a Python library or a C header file? 01:58:43.120 --> 01:58:44.170 Well, you can. 01:58:44.170 --> 01:58:47.740 Let me go ahead and delete that whole style tag. 01:58:47.740 --> 01:58:54.280 Let me add a confusingly named link tag, the href of which let's call a new file 01:58:54.280 --> 01:58:56.290 styles.css. 01:58:56.290 --> 01:59:00.670 And let's say that the relationship of that file is that of stylesheet. 01:59:00.670 --> 01:59:03.610 So this is a term of art in the world of web development. 01:59:03.610 --> 01:59:05.770 A stylesheet is a text file that contains 01:59:05.770 --> 01:59:08.140 lots of styles, lots of CSS properties. 01:59:08.140 --> 01:59:10.630 Let me open my terminal real fast. 01:59:10.630 --> 01:59:16.390 And let me do code of styles.css. 01:59:16.390 --> 01:59:17.200 Enter. 01:59:17.200 --> 01:59:20.800 And in this file, I'm going to paste all of those same lines as earlier. 01:59:20.800 --> 01:59:22.570 But now they're in a separate file. 01:59:22.570 --> 01:59:25.930 And indeed, if I hide my terminal window and I give this file to a colleague, 01:59:25.930 --> 01:59:27.910 they can now work on the aesthetics of the page 01:59:27.910 --> 01:59:29.620 and make things a lot prettier than this, maybe use 01:59:29.620 --> 01:59:32.020 specific font sizes, maybe add colors and the like. 01:59:32.020 --> 01:59:36.520 Whereas I can focus entirely on the HTML, because this file now 01:59:36.520 --> 01:59:37.840 will reference that other. 01:59:37.840 --> 01:59:40.120 And if I go back to my other tab and reload, 01:59:40.120 --> 01:59:42.280 the content's going to be exactly the same, 01:59:42.280 --> 01:59:48.020 but now I'm using some separate file instead. 01:59:48.020 --> 01:59:53.260 Any questions now about these techniques here? 01:59:53.260 --> 01:59:53.990 No? 01:59:53.990 --> 01:59:58.330 All right, so with that said, let me show just one example now 01:59:58.330 --> 02:00:00.075 of what I called a moment ago frameworks. 02:00:00.075 --> 02:00:02.200 And this is where web development gets kind of fun, 02:00:02.200 --> 02:00:03.610 at least if you like this, especially if you 02:00:03.610 --> 02:00:06.190 like the sort of logical design, the presentation of information 02:00:06.190 --> 02:00:07.898 you care about, but you really don't want 02:00:07.898 --> 02:00:11.260 to struggle with font sizes and colors and getting everything pixel perfect, 02:00:11.260 --> 02:00:12.110 so to speak. 02:00:12.110 --> 02:00:16.360 Let me propose that I open up here an example in just a moment in VS Code 02:00:16.360 --> 02:00:18.340 that I prepared in advance. 02:00:18.340 --> 02:00:22.750 And this one is going to be an opportunity 02:00:22.750 --> 02:00:27.220 to consider how you might take some of the data from last week, 02:00:27.220 --> 02:00:29.410 wherein we collected everyone's favorites, 02:00:29.410 --> 02:00:31.587 and lay it out in a really big HTML table. 02:00:31.587 --> 02:00:34.420 So I wrote this out in advance because it was a huge amount of data, 02:00:34.420 --> 02:00:37.060 but it's the same data from the Google Form from last week. 02:00:37.060 --> 02:00:41.000 And you'll see already the hints of a table tag and these TRs. 02:00:41.000 --> 02:00:43.180 And I added a few other tags for aesthetics. 02:00:43.180 --> 02:00:46.120 It turns out when you have a more visually interesting header 02:00:46.120 --> 02:00:48.850 for your table, there's another tag called thead. 02:00:48.850 --> 02:00:50.427 There's another tag called tbody. 02:00:50.427 --> 02:00:52.510 These are not all that intellectually interesting. 02:00:52.510 --> 02:00:55.690 I just read the documentation and realized, oh, to make things prettier 02:00:55.690 --> 02:00:58.160 I need a thead, a tbody, and so forth. 02:00:58.160 --> 02:01:01.240 But what's interesting here is that if I go to my index 02:01:01.240 --> 02:01:04.540 here and open this file called favorites.html, 02:01:04.540 --> 02:01:08.180 here's all of the data from last week's Google spreadsheet, 02:01:08.180 --> 02:01:13.450 which we exported as CSV and I manually before class converted to just HTML. 02:01:13.450 --> 02:01:16.210 It's indeed a table, but it's really not pretty. 02:01:16.210 --> 02:01:18.100 The columns are really close together. 02:01:18.100 --> 02:01:20.440 It's kind of hard to distinguish one row from another. 02:01:20.440 --> 02:01:23.020 But this is just raw HTML written by me. 02:01:23.020 --> 02:01:26.080 Now, I could use CSS and some of the tricks we just 02:01:26.080 --> 02:01:27.910 saw to maybe change font size. 02:01:27.910 --> 02:01:31.640 There's ways to change color, background color, and a lot of things like that. 02:01:31.640 --> 02:01:34.480 But honestly, surely other people in the world 02:01:34.480 --> 02:01:37.210 have presented tabular data in pretty ways. 02:01:37.210 --> 02:01:40.030 I've been to many websites that have prettier tables than mine. 02:01:40.030 --> 02:01:44.980 Can I maybe use someone else's framework, someone else's CSS 02:01:44.980 --> 02:01:48.010 included in my page but don't stand on their shoulders 02:01:48.010 --> 02:01:50.110 and just make my stuff look prettier? 02:01:50.110 --> 02:01:51.490 Well, I dare say I can. 02:01:51.490 --> 02:01:55.570 Let me go ahead here and semi secretly open up VS Code again. 02:01:55.570 --> 02:01:59.770 And let me grab a slightly different version of favorites.html 02:01:59.770 --> 02:02:06.490 that I also opened in advance wherein I add this line of code instead. 02:02:06.490 --> 02:02:08.680 Give me just a moment to foreground this version. 02:02:08.680 --> 02:02:13.210 And the data is all the same as before, but I've added one of these link tags. 02:02:13.210 --> 02:02:16.060 And I'm not linking to my own styles.css. 02:02:16.060 --> 02:02:19.270 I'm using a popular library called bootstrap. 02:02:19.270 --> 02:02:22.060 And bootstrap is just one of many popular libraries 02:02:22.060 --> 02:02:25.690 out there, free at that, that has a whole bunch of CSS files 02:02:25.690 --> 02:02:29.710 and soon JavaScript files that you can just use for free in your own projects, 02:02:29.710 --> 02:02:32.920 personally or professionally, that just make things look 02:02:32.920 --> 02:02:36.250 and behave better without you having to reinvent wheels. 02:02:36.250 --> 02:02:39.520 Now, to access their CSS, I had to read their documentation 02:02:39.520 --> 02:02:41.650 and grab this very long URL here. 02:02:41.650 --> 02:02:42.730 But it's the same idea. 02:02:42.730 --> 02:02:45.370 Link href equals quote unquote something. 02:02:45.370 --> 02:02:48.490 And I read their documentation and they told me to add this. 02:02:48.490 --> 02:02:51.850 They told me that if I want my tables to be prettier, 02:02:51.850 --> 02:02:55.210 I have to add a class attribute to my own table tag 02:02:55.210 --> 02:02:59.290 and specify, a little weirdly but this is what bootstrap told me to do, 02:02:59.290 --> 02:03:00.670 a class called table. 02:03:00.670 --> 02:03:03.170 And that will make it a prettier bootstrap table. 02:03:03.170 --> 02:03:07.180 And if I want to stripe it, like every other row is gray instead of white 02:03:07.180 --> 02:03:09.100 just to make it pop a little more visually, 02:03:09.100 --> 02:03:14.110 I can also add a second class separated by a space called table striped. 02:03:14.110 --> 02:03:15.310 That's all I did. 02:03:15.310 --> 02:03:18.790 I added line five and I changed line nine and that is it. 02:03:18.790 --> 02:03:22.430 The rest of the hundreds of lines in favorites.html are the same. 02:03:22.430 --> 02:03:27.010 But if I go back here now and reload the browser, now thanks to bootstrap, 02:03:27.010 --> 02:03:28.150 voila. 02:03:28.150 --> 02:03:29.290 It's much prettier. 02:03:29.290 --> 02:03:32.620 Now I can zoom out and that changes the font size just locally for me. 02:03:32.620 --> 02:03:35.380 And even if you don't love their aesthetics, I mean, 02:03:35.380 --> 02:03:38.410 this is easily better than my own there. 02:03:38.410 --> 02:03:42.280 And it turns out we can do even better by adding interactivity to this too. 02:03:42.280 --> 02:03:45.940 But to do that, we're going to need one final language for today. 02:03:45.940 --> 02:03:48.520 And this one is an actual programming language. 02:03:48.520 --> 02:03:50.380 And we won't use it all that much in CS50, 02:03:50.380 --> 02:03:53.710 but we introduce it here as we begin web stuff because there's just 02:03:53.710 --> 02:03:56.860 so many free libraries and professional libraries that you can use just 02:03:56.860 --> 02:04:00.490 to make your web applications fancier and more interactive. 02:04:00.490 --> 02:04:05.740 Mobile applications as well increasingly use HTML, CSS, and JavaScript 02:04:05.740 --> 02:04:08.660 to power our iPhones and Android devices as well. 02:04:08.660 --> 02:04:10.780 So a quick tour of some syntax and then we'll 02:04:10.780 --> 02:04:13.600 conclude with just some hopefully inspiring examples 02:04:13.600 --> 02:04:16.000 to give you a taste of what JavaScript can do. 02:04:16.000 --> 02:04:20.170 So JavaScript supports conditionals, just like C and Python before it. 02:04:20.170 --> 02:04:23.560 If we rewind to our Scratch days, here of course is a conditional. 02:04:23.560 --> 02:04:26.500 Here is the corresponding JavaScript code as of today. 02:04:26.500 --> 02:04:30.280 It's pretty much identical to C with this syntax here. 02:04:30.280 --> 02:04:33.993 If we had an if else, in Scratch it looked like this. 02:04:33.993 --> 02:04:36.160 In JavaScript, it's going to look like this instead. 02:04:36.160 --> 02:04:39.100 So it's a bit of a regression vis a vis Python. 02:04:39.100 --> 02:04:40.570 The parentheses are back. 02:04:40.570 --> 02:04:41.740 The curly braces are back. 02:04:41.740 --> 02:04:45.280 The semicolons I mentioned in CSS are also back in JavaScript potentially. 02:04:45.280 --> 02:04:47.260 But it's familiar is the point here. 02:04:47.260 --> 02:04:50.620 And it's a different language that's frequently used for the web, 02:04:50.620 --> 02:04:53.970 whereas you can't use Python in the way we're about to use JavaScript. 02:04:53.970 --> 02:04:56.370 It just wasn't designed for that purpose. 02:04:56.370 --> 02:05:00.570 Meanwhile, if you have an if else if else in Scratch, 02:05:00.570 --> 02:05:04.440 well in JavaScript just like in C, it's going to look like this instead. 02:05:04.440 --> 02:05:06.930 Variables in JavaScript, of course, are a thing too. 02:05:06.930 --> 02:05:10.020 And in Scratch, we might have initialized a counter variable to 0. 02:05:10.020 --> 02:05:13.090 In JavaScript a few different ways to do this. 02:05:13.090 --> 02:05:15.305 And just for now, the keyword is let's. 02:05:15.305 --> 02:05:17.430 It's sort of a polite way of asking for a variable. 02:05:17.430 --> 02:05:20.520 Let counter equals 0 semicolon. 02:05:20.520 --> 02:05:23.400 So you don't mention the type, but you do use a keyword here 02:05:23.400 --> 02:05:24.600 in this case called let. 02:05:24.600 --> 02:05:28.373 If you want to increment counter by one, few different ways in JavaScript 02:05:28.373 --> 02:05:29.040 you can do this. 02:05:29.040 --> 02:05:31.470 Just like in C, in JavaScript you can do this. 02:05:31.470 --> 02:05:34.950 Just like in C and in Python, in JavaScript you can also get this. 02:05:34.950 --> 02:05:36.180 So plus plus is back. 02:05:36.180 --> 02:05:38.850 So maybe that counterbalances the other syntax as well. 02:05:38.850 --> 02:05:41.010 That was not the case in Python. 02:05:41.010 --> 02:05:43.432 Loops are back, of course, in JavaScript. 02:05:43.432 --> 02:05:45.390 Whereas in Scratch you could repeat three times 02:05:45.390 --> 02:05:48.090 like this, in JavaScript it's pretty much just like C. 02:05:48.090 --> 02:05:50.700 The only difference here is that you say let instead 02:05:50.700 --> 02:05:52.713 of int for an example like this. 02:05:52.713 --> 02:05:54.630 Meanwhile, if you want to do something forever 02:05:54.630 --> 02:05:59.470 in Scratch, in JavaScript just like in C, you say while true in this case. 02:05:59.470 --> 02:06:02.070 So this is to say we're sort of comfortable 02:06:02.070 --> 02:06:04.440 spending relatively little time on JavaScript, at least 02:06:04.440 --> 02:06:07.200 for today's purposes, because syntactically it's 02:06:07.200 --> 02:06:11.550 really the same as we've seen before with maybe a slight variance here 02:06:11.550 --> 02:06:12.100 or there. 02:06:12.100 --> 02:06:15.480 But what's interesting today arguably is just what kinds of things 02:06:15.480 --> 02:06:16.750 you can do with it. 02:06:16.750 --> 02:06:20.400 So with that said, what kinds of things can we do? 02:06:20.400 --> 02:06:22.710 It all comes back to this picture. 02:06:22.710 --> 02:06:25.800 If this is a simple web page on the left and this 02:06:25.800 --> 02:06:29.220 is the corresponding tree or DOM, Document Object 02:06:29.220 --> 02:06:32.760 Model on the right, that is the tree the browser automatically creates in memory 02:06:32.760 --> 02:06:36.930 or RAM for you, JavaScript is now a proper programming language 02:06:36.930 --> 02:06:42.330 that lets us dynamically manipulate, like read data from this, change this. 02:06:42.330 --> 02:06:44.940 And this is how Google, for instance, implements your inbox. 02:06:44.940 --> 02:06:47.770 They might have in your inbox it's like a table. 02:06:47.770 --> 02:06:50.970 So TR, TR, TR, TR, probably something like that. 02:06:50.970 --> 02:06:52.740 Or heck, maybe div, div, div. 02:06:52.740 --> 02:06:56.190 Using JavaScript, any time they realize someone sent you new mail, 02:06:56.190 --> 02:07:00.510 they can create a new node, a new rectangle in memory and you, the human, 02:07:00.510 --> 02:07:04.780 see a new div or a new TR again and again and again. 02:07:04.780 --> 02:07:06.690 So with JavaScript, you just have the ability 02:07:06.690 --> 02:07:11.430 to control the user's experience instead of, like I've been doing, constantly 02:07:11.430 --> 02:07:15.120 hitting reload in the page to see some new content, to see some new content. 02:07:15.120 --> 02:07:18.540 JavaScript can be running 24/7 so that you can actually 02:07:18.540 --> 02:07:21.210 see all of these changes live. 02:07:21.210 --> 02:07:21.840 All right. 02:07:21.840 --> 02:07:24.180 So let's go about writing some JavaScript code now. 02:07:24.180 --> 02:07:27.227 Instead of writing it on the server and executing it on the server, 02:07:27.227 --> 02:07:29.310 we're going to actually use a very common paradigm 02:07:29.310 --> 02:07:33.630 whereas JavaScript is actually executed in the browser client side. 02:07:33.630 --> 02:07:37.080 That is to say we can actually start writing some JavaScript code inside 02:07:37.080 --> 02:07:41.370 of our own .html file so that when a user visits that web page with 02:07:41.370 --> 02:07:44.910 their browser, not only is the HTML and any CSS downloaded 02:07:44.910 --> 02:07:48.660 to the user's browser, so is that JavaScript code so that it's executed 02:07:48.660 --> 02:07:52.950 indeed client side on the browser rather than server side, 02:07:52.950 --> 02:07:55.890 as has been the case with Python in previous weeks. 02:07:55.890 --> 02:07:58.620 Well, where do we go about writing some JavaScript code? 02:07:58.620 --> 02:08:02.280 Let's go ahead and revisit hello.html, which previously 02:08:02.280 --> 02:08:04.650 was a completely static example that literally just said 02:08:04.650 --> 02:08:06.450 hello title, hello body. 02:08:06.450 --> 02:08:08.970 Indeed, if I open this up using HTTP server 02:08:08.970 --> 02:08:12.120 and view it now in a separate tab, all it said was exactly that. 02:08:12.120 --> 02:08:16.210 Hello title in the tab and hello body in the main part of the viewport, 02:08:16.210 --> 02:08:16.890 so to speak. 02:08:16.890 --> 02:08:19.350 Well, let's make this example a little more 02:08:19.350 --> 02:08:21.540 dynamic so it doesn't just say hello body 02:08:21.540 --> 02:08:24.280 but maybe says hello to an actual person. 02:08:24.280 --> 02:08:25.720 So let's go ahead and do this. 02:08:25.720 --> 02:08:28.560 Let's go ahead and remove the hardcoded hello body. 02:08:28.560 --> 02:08:32.550 And let's actually go ahead here and use a form tag. 02:08:32.550 --> 02:08:35.280 But we're not going to use this form in the usual way 02:08:35.280 --> 02:08:38.050 whereby the data gets sent all the way back to the server. 02:08:38.050 --> 02:08:41.890 We're going to leverage control over this form client side instead. 02:08:41.890 --> 02:08:45.570 So I'm going to go ahead and create this open form tag, close form tag. 02:08:45.570 --> 02:08:48.960 Inside of that, let me give myself a text input that's going to have 02:08:48.960 --> 02:08:53.970 autocomplete="off" just to ensure that what I previously type in my examples 02:08:53.970 --> 02:08:55.960 doesn't reappear accidentally. 02:08:55.960 --> 02:08:58.890 We're going to auto focus it so that the cursor is blinking 02:08:58.890 --> 02:09:00.300 right there in that text box. 02:09:00.300 --> 02:09:03.240 And this time I'm going to go ahead and give it how 02:09:03.240 --> 02:09:08.035 about a placeholder of quote unquote name 02:09:08.035 --> 02:09:10.410 to make clear that I'm prompting the user for their name. 02:09:10.410 --> 02:09:14.250 And then the type of this text box will be the default or more explicitly here 02:09:14.250 --> 02:09:14.820 text. 02:09:14.820 --> 02:09:17.070 And then I'm going to have, as we've seen before, 02:09:17.070 --> 02:09:19.410 a button, the type of which is submit. 02:09:19.410 --> 02:09:22.688 Also our typically default. And then inside of this button 02:09:22.688 --> 02:09:23.730 is going to be the label. 02:09:23.730 --> 02:09:28.050 How about something like how about we'll call this greet. 02:09:28.050 --> 02:09:30.250 So that's what the button will actually say. 02:09:30.250 --> 02:09:32.820 Well, let me actually go back into my browser tab. 02:09:32.820 --> 02:09:34.150 Let me reload this page. 02:09:34.150 --> 02:09:36.780 And we should now see a relatively simple form 02:09:36.780 --> 02:09:39.210 whereby I have the cursor blinking on a text 02:09:39.210 --> 02:09:42.150 input prompting the user for their name and then a greet button 02:09:42.150 --> 02:09:43.113 that I can click. 02:09:43.113 --> 02:09:45.030 But if I click this button now, it's not going 02:09:45.030 --> 02:09:47.363 to do anything useful because I haven't written any code 02:09:47.363 --> 02:09:50.430 to tell the browser what to do when I click that button. 02:09:50.430 --> 02:09:54.120 But it turns out there's all sorts of events in the world of JavaScript 02:09:54.120 --> 02:09:56.220 that you can listen for, so to speak. 02:09:56.220 --> 02:09:58.080 In fact, here's just a list of some of them. 02:09:58.080 --> 02:10:01.710 Any time something changes in a form field, any time the user clicks 02:10:01.710 --> 02:10:05.190 or drags on something, any time the user presses a key 02:10:05.190 --> 02:10:08.820 and maybe lifts their finger up, anytime the mouse goes down or over 02:10:08.820 --> 02:10:12.930 or up on top of something, or any time a form is submitted, 02:10:12.930 --> 02:10:15.000 those are events in the same way that we talked 02:10:15.000 --> 02:10:17.610 about events back in week 0 in Scratch. 02:10:17.610 --> 02:10:21.300 And in JavaScript, just like in Scratch where you can do something 02:10:21.300 --> 02:10:23.550 when green flag clicked, in JavaScript you 02:10:23.550 --> 02:10:27.570 can write code that actually listens for any of these events or more. 02:10:27.570 --> 02:10:30.310 So with that said, let's go back to VS Code here 02:10:30.310 --> 02:10:32.670 and let's make a couple of changes instead. 02:10:32.670 --> 02:10:35.235 Let's go ahead and add to this form a new attribute. 02:10:35.235 --> 02:10:37.860 That's not the best way to do it, but it's perhaps the simplest 02:10:37.860 --> 02:10:39.040 for version one here. 02:10:39.040 --> 02:10:42.220 And let's say on submit, do the following. 02:10:42.220 --> 02:10:44.280 So on submit is an HTML attribute. 02:10:44.280 --> 02:10:47.220 And curiously, its value inside of the quotes 02:10:47.220 --> 02:10:50.040 there can actually be some JavaScript code. 02:10:50.040 --> 02:10:52.620 And let's go ahead now and let's assume there exists 02:10:52.620 --> 02:10:54.510 a function in the world called greet. 02:10:54.510 --> 02:10:58.390 And what I want to do is call that function right then and there. 02:10:58.390 --> 02:11:01.590 Well, now in JavaScript, how do I go about making that function exist? 02:11:01.590 --> 02:11:06.060 It doesn't come out of the box just like print might or say might in Python 02:11:06.060 --> 02:11:07.750 or scratch respectively. 02:11:07.750 --> 02:11:08.740 But I can do this. 02:11:08.740 --> 02:11:10.740 Let me go up into the head of this page. 02:11:10.740 --> 02:11:13.860 Inside of a script tag here, both open and close, 02:11:13.860 --> 02:11:15.780 let me actually write some JavaScript code. 02:11:15.780 --> 02:11:18.420 And just so it stands out, I'm going to give myself a couple of blank lines, 02:11:18.420 --> 02:11:19.830 though not strictly necessary. 02:11:19.830 --> 02:11:23.550 And let me define a new function in JavaScript called greet. 02:11:23.550 --> 02:11:26.670 And this is the syntax in JavaScript for creating your own function. 02:11:26.670 --> 02:11:30.000 Similar in Python instead of saying def, in JavaScript you just say 02:11:30.000 --> 02:11:33.510 function, then the name of the function, and any arguments 02:11:33.510 --> 02:11:35.010 within the parentheses thereafter. 02:11:35.010 --> 02:11:36.870 But I'm not going to pass in any here. 02:11:36.870 --> 02:11:39.240 Then inside of curly braces, what I'm going to do 02:11:39.240 --> 02:11:41.100 is use a built in JavaScript function that 02:11:41.100 --> 02:11:42.990 comes with any browser called alert. 02:11:42.990 --> 02:11:45.160 It's not the best or prettiest user interface, 02:11:45.160 --> 02:11:47.220 but for now it's going to get the job done. 02:11:47.220 --> 02:11:48.840 What do I want to say to the user? 02:11:48.840 --> 02:11:53.520 Well, let's first just say something simple like hello comma world close 02:11:53.520 --> 02:11:58.780 quote semicolon, thereby alerting the user with precisely that message. 02:11:58.780 --> 02:12:02.610 Now what I'm going to do down here is make one other change. 02:12:02.610 --> 02:12:05.947 I don't want this form to actually get submitted to the server. 02:12:05.947 --> 02:12:08.280 Just like we've seen in the past when you submit a form, 02:12:08.280 --> 02:12:11.460 it often goes to something like google.com/search. 02:12:11.460 --> 02:12:16.470 I actually want my JavaScript code to take control over the entire user 02:12:16.470 --> 02:12:20.610 experience of this form so that I'm just using the form as a user input 02:12:20.610 --> 02:12:26.130 mechanism, not to actually send via get or post this data to some other server, 02:12:26.130 --> 02:12:27.280 including my own. 02:12:27.280 --> 02:12:29.190 So this is going to look a little ugly. 02:12:29.190 --> 02:12:31.025 But after calling greet, I'm actually going 02:12:31.025 --> 02:12:33.150 to do this, which I've read the documentation about 02:12:33.150 --> 02:12:36.330 and I know that if you actually hard code return false here, 02:12:36.330 --> 02:12:39.540 that just tells the browser, please don't actually submit the form. 02:12:39.540 --> 02:12:42.040 Only call the greet function. 02:12:42.040 --> 02:12:42.540 All right. 02:12:42.540 --> 02:12:44.760 Well, let me go back to my browser here. 02:12:44.760 --> 02:12:47.370 Let me reload this, because I need to download the latest 02:12:47.370 --> 02:12:48.900 version of the JavaScript code. 02:12:48.900 --> 02:12:51.358 And I'm just going to go ahead without even typing my name, 02:12:51.358 --> 02:12:53.010 I'm going to click on the Greet button. 02:12:53.010 --> 02:12:56.100 And you'll see that, albeit a little cryptically at the top, 02:12:56.100 --> 02:12:58.260 we see an alert that says hello world. 02:12:58.260 --> 02:13:00.780 There's my ugly URL of my code space there at the moment, 02:13:00.780 --> 02:13:03.010 but we do indeed see that string. 02:13:03.010 --> 02:13:06.430 But what I haven't, of course, done is taken any actual name from the user. 02:13:06.430 --> 02:13:08.350 So how can we go about doing that? 02:13:08.350 --> 02:13:13.620 Well, ideally I want to alert the user with hello comma David or hello comma 02:13:13.620 --> 02:13:15.880 Carter, whatever name I type into that box. 02:13:15.880 --> 02:13:17.920 So how can I go about doing that? 02:13:17.920 --> 02:13:19.800 Well, let me create a variable called name. 02:13:19.800 --> 02:13:22.590 And let me set it equal to this function call. 02:13:22.590 --> 02:13:24.060 Document.queryselector. 02:13:28.120 --> 02:13:30.340 That comes with JavaScript itself. 02:13:30.340 --> 02:13:33.340 Let me then in parentheses pass in an argument that is going to be, 02:13:33.340 --> 02:13:35.070 huh, the ID. 02:13:35.070 --> 02:13:38.990 I need a unique identifier for the thing I want to select. 02:13:38.990 --> 02:13:41.360 So let me actually go back to my HTML code here. 02:13:41.360 --> 02:13:45.520 And instead of giving this form field a name like q for query, 02:13:45.520 --> 02:13:49.480 let me actually use another HTML attribute called ID where now I 02:13:49.480 --> 02:13:50.920 can call this anything I want. 02:13:50.920 --> 02:13:56.530 And for clarity, I'm just going to call this input element uniquely name. 02:13:56.530 --> 02:14:00.520 Now up here in query selector, just like in CSS 02:14:00.520 --> 02:14:03.580 where you can use hashes and dots and other symbology 02:14:03.580 --> 02:14:08.740 in order to select certain nodes in your DOM, that is rectangles in that memory 02:14:08.740 --> 02:14:12.170 tree, well, I can go ahead and select hash name, which, 02:14:12.170 --> 02:14:15.520 again, is just the syntax for uniquely selecting the element whose 02:14:15.520 --> 02:14:17.740 ID is in this case name. 02:14:17.740 --> 02:14:19.300 So you have the hash up here. 02:14:19.300 --> 02:14:23.590 You don't need the hash as the value of the attribute down here on line 20. 02:14:23.590 --> 02:14:26.590 And now if I want to actually get the value of that text box, 02:14:26.590 --> 02:14:28.370 I literally just say .value. 02:14:28.370 --> 02:14:30.700 So document refers to the whole web page itself. 02:14:30.700 --> 02:14:34.450 Query selector is a function that's built into that object, so to speak. 02:14:34.450 --> 02:14:40.060 And the value accessible via .value just like a C struct or even a Python class 02:14:40.060 --> 02:14:43.840 allows me to go inside of that text field and get whatever the value 02:14:43.840 --> 02:14:45.490 the user has typed in. 02:14:45.490 --> 02:14:51.340 Now, as I've been able to do in languages like Python fairly readily, 02:14:51.340 --> 02:14:56.380 I can concatenate this name onto the string hello comma space 02:14:56.380 --> 02:14:58.270 so as to form a complete phrase. 02:14:58.270 --> 02:15:01.960 And you'll notice here that I'm actually using single quotes in my JavaScript, 02:15:01.960 --> 02:15:03.370 double quotes in my HTML. 02:15:03.370 --> 02:15:05.320 This is perhaps a common convention. 02:15:05.320 --> 02:15:07.680 In JavaScript, the language does not care 02:15:07.680 --> 02:15:09.430 if you use double quotes or single quotes, 02:15:09.430 --> 02:15:11.840 but I dare say single quotes are just more common. 02:15:11.840 --> 02:15:13.330 And so that's what I've done here. 02:15:13.330 --> 02:15:13.930 All right. 02:15:13.930 --> 02:15:15.850 Now as always, I'm going to cross my fingers. 02:15:15.850 --> 02:15:16.940 Go back to this page. 02:15:16.940 --> 02:15:19.390 I'm going to reload, because I've changed the JavaScript 02:15:19.390 --> 02:15:21.040 and I need my browser to download it. 02:15:21.040 --> 02:15:24.490 And now I'm going to type in my name for instance, D-A-V-I-D. 02:15:24.490 --> 02:15:26.740 Click Greet with fingers crossed. 02:15:26.740 --> 02:15:31.060 And voila, now I see hello comma David. 02:15:31.060 --> 02:15:34.900 All right, so it turns out that while functional, this isn't the best design. 02:15:34.900 --> 02:15:38.740 And comingling your HTML with your JavaScript code 02:15:38.740 --> 02:15:42.370 as with this on submit attribute isn't particularly clean. 02:15:42.370 --> 02:15:47.260 It's better, as with CSS, to keep your HTML over here, your CSS over here, 02:15:47.260 --> 02:15:49.690 and your JavaScript now over here, so to speak. 02:15:49.690 --> 02:15:52.360 And better still perhaps even in some separate files. 02:15:52.360 --> 02:15:54.820 So how can I go about changing this a little bit? 02:15:54.820 --> 02:15:57.850 Well, let me go ahead and actually let's go ahead 02:15:57.850 --> 02:16:00.280 and delete all of this code for just a moment. 02:16:00.280 --> 02:16:04.390 And let me go and get rid of this on submit handler down here 02:16:04.390 --> 02:16:09.310 and really just distill my HTML only into the HTML and the attributes 02:16:09.310 --> 02:16:10.090 therefore. 02:16:10.090 --> 02:16:13.300 And what I'm instead going to do now is do this. 02:16:13.300 --> 02:16:19.810 I can use JavaScript to achieve the listening for that submit event or that 02:16:19.810 --> 02:16:20.740 on submit event. 02:16:20.740 --> 02:16:23.290 I don't need to actually use HTML for that. 02:16:23.290 --> 02:16:25.390 I can use JavaScript entirely. 02:16:25.390 --> 02:16:29.620 So it turns out I can access some other member of this document 02:16:29.620 --> 02:16:32.809 by doing document.queryselector again. 02:16:32.809 --> 02:16:36.010 But this time, let's select the actual form tag. 02:16:36.010 --> 02:16:39.639 And it doesn't have an ID because it has no ID in its HTML. 02:16:39.639 --> 02:16:40.990 But it does have a tag name. 02:16:40.990 --> 02:16:44.680 So just like in CSS when you can target elements by way of their name, 02:16:44.680 --> 02:16:47.799 I'm just going to select the one and only form on this page 02:16:47.799 --> 02:16:50.023 by using that same query selector function. 02:16:50.023 --> 02:16:51.940 And now I'm going to use another function that 02:16:51.940 --> 02:16:54.520 just comes with JavaScript in the context of browsers 02:16:54.520 --> 02:16:57.790 whereby once you select an element like that form, 02:16:57.790 --> 02:17:03.250 I can call add event listener, which is similar in spirit to Scratch's when 02:17:03.250 --> 02:17:05.889 green flag clicked or any block like that. 02:17:05.889 --> 02:17:08.740 You can then tell the browser what event you want to listen for. 02:17:08.740 --> 02:17:10.570 I want to listen for the submit event. 02:17:10.570 --> 02:17:12.160 So you don't say on submit here. 02:17:12.160 --> 02:17:14.500 Now that we're in pure JavaScript, you just say submit. 02:17:14.500 --> 02:17:17.570 And now I can do something like this. 02:17:17.570 --> 02:17:20.358 I can go ahead and say call the following function. 02:17:20.358 --> 02:17:22.900 And I'm not even going to bother giving this function a name. 02:17:22.900 --> 02:17:26.320 And that is allowed to in JavaScript, as we saw briefly in Python. 02:17:26.320 --> 02:17:29.530 And what I'm going to do now inside of curly braces 02:17:29.530 --> 02:17:33.459 after that keyword function is the same kind of code as before. 02:17:33.459 --> 02:17:38.360 I'm going to do let name equals document.queryselector. 02:17:38.360 --> 02:17:44.049 I'm going to select that same name ID as before and get its value. 02:17:44.049 --> 02:17:48.549 And then I'm going to do alert and then pass in hello comma, a single quote 02:17:48.549 --> 02:17:49.570 again after that. 02:17:49.570 --> 02:17:53.709 Concatenate with that the name and then semicolon. 02:17:53.709 --> 02:17:55.578 But I need to do one other thing. 02:17:55.578 --> 02:17:57.370 It turns out that this function, and if you 02:17:57.370 --> 02:17:59.350 read the documentation for this technique, 02:17:59.350 --> 02:18:04.270 actually takes automatically a special argument called by convention event. 02:18:04.270 --> 02:18:08.350 And this is just a variable, if you will, that refers to whatever event 02:18:08.350 --> 02:18:08.950 just happened. 02:18:08.950 --> 02:18:10.719 In this case, it's of course, going to be submit. 02:18:10.719 --> 02:18:13.840 But in other contexts, it might be a click event, a mouse down event, 02:18:13.840 --> 02:18:15.379 or something else entirely. 02:18:15.379 --> 02:18:18.160 So this allows me now to do this, which is a little cryptic, 02:18:18.160 --> 02:18:19.809 but you get used to these conventions. 02:18:19.809 --> 02:18:22.570 I can use that event, whatever it is, and then 02:18:22.570 --> 02:18:26.379 prevent whatever the default behavior is by calling a special function called 02:18:26.379 --> 02:18:29.010 prevent Default with a capital D. This is 02:18:29.010 --> 02:18:32.820 the alternative to that messier return false semicolon 02:18:32.820 --> 02:18:35.740 that I had inside of my HTML before. 02:18:35.740 --> 02:18:40.889 So all I've done here now is I've left all of my HTML as pure HTML down here 02:18:40.889 --> 02:18:44.580 and I've put all of my JavaScript code as pure JavaScript up here. 02:18:44.580 --> 02:18:46.770 This sort of separation of concern similar to what 02:18:46.770 --> 02:18:50.790 we started doing with CSS just a bit ago in order to keep those two languages 02:18:50.790 --> 02:18:51.690 separate too. 02:18:51.690 --> 02:18:54.090 Well, let me go back to my browser here. 02:18:54.090 --> 02:18:55.290 Reload the page. 02:18:55.290 --> 02:18:58.120 And unfortunately, there's a subtle mistake I've made here. 02:18:58.120 --> 02:19:01.379 Let me go ahead and type in D-A-V-I-D and click Greet. 02:19:01.379 --> 02:19:04.290 And unfortunately, nothing actually seems to happen. 02:19:04.290 --> 02:19:05.549 Well, maybe it's just my name. 02:19:05.549 --> 02:19:06.150 Carter. 02:19:06.150 --> 02:19:07.413 Greet. 02:19:07.413 --> 02:19:08.580 And nothing seems to happen. 02:19:08.580 --> 02:19:10.080 That alert does not come up. 02:19:10.080 --> 02:19:11.200 Well, why is that? 02:19:11.200 --> 02:19:15.629 Well, let me go back to VS Code here and point out that order of operations 02:19:15.629 --> 02:19:18.330 in JavaScript matters similar in spirit to C. 02:19:18.330 --> 02:19:23.250 Because on line seven I'm selecting the form and trying to add an event 02:19:23.250 --> 02:19:27.420 listener for submitting that form, unfortunately the form had better exist 02:19:27.420 --> 02:19:29.190 at that moment in time, but it doesn't. 02:19:29.190 --> 02:19:31.980 Because just like in C and in some cases Python 02:19:31.980 --> 02:19:35.440 where the compiler or the interpreter reads the code top to bottom, 02:19:35.440 --> 02:19:38.219 notice that the form doesn't actually exist and therefore 02:19:38.219 --> 02:19:41.280 get loaded into the computer's memory until line 19. 02:19:41.280 --> 02:19:43.980 So we've got to kind of reorder these somehow. 02:19:43.980 --> 02:19:46.950 Now, maybe the simplest way to do this would just 02:19:46.950 --> 02:19:49.480 be to perhaps do something like this. 02:19:49.480 --> 02:19:53.340 Let me scroll back up to my script tag and perhaps a little more 02:19:53.340 --> 02:19:57.910 explicitly move it into the order in which I want it to be executed. 02:19:57.910 --> 02:20:00.780 So I'm going to go below my form and inside of my body, which 02:20:00.780 --> 02:20:04.320 is actually OK for JavaScript here, and just use that same code. 02:20:04.320 --> 02:20:07.530 And assuming I didn't make any typos, let's go back to the browser. 02:20:07.530 --> 02:20:09.630 Click reload again to get the latest. 02:20:09.630 --> 02:20:12.750 Type in my name again using that purely JavaScript solution. 02:20:12.750 --> 02:20:16.470 And the only change I made was I moved the code from up here to down here. 02:20:16.470 --> 02:20:17.760 Clicking Greet now. 02:20:17.760 --> 02:20:19.290 And wow, it's now back. 02:20:19.290 --> 02:20:21.970 We get the alert with hello comma David. 02:20:21.970 --> 02:20:24.133 So those kinds of things, those kinds of principles 02:20:24.133 --> 02:20:26.050 matter at least when we're back in this world. 02:20:26.050 --> 02:20:27.390 But there's other solutions too. 02:20:27.390 --> 02:20:30.640 And just so that you've seen it, because it's a common convention in libraries 02:20:30.640 --> 02:20:35.520 as well, let me undo that change and put that script tag back in the head 02:20:35.520 --> 02:20:38.190 or really anywhere else in the page where it might be. 02:20:38.190 --> 02:20:41.400 And let me propose that there's one other way to solve this problem 02:20:41.400 --> 02:20:45.210 to postpone that code on lines 7 through 11 02:20:45.210 --> 02:20:49.780 getting executed until really the whole DOM, the tree, is ready to go. 02:20:49.780 --> 02:20:52.480 And the syntax for this might be as follows. 02:20:52.480 --> 02:20:56.010 I can do document and I can add to the document 02:20:56.010 --> 02:20:59.213 an event listener that's going to listen for something a little special. 02:20:59.213 --> 02:21:01.380 And I always have to look this up myself to remember 02:21:01.380 --> 02:21:02.880 the spelling and the capitalization. 02:21:02.880 --> 02:21:04.740 But it turns out that the browser itself, 02:21:04.740 --> 02:21:07.630 once it's done loading all of your HTML top to bottom, 02:21:07.630 --> 02:21:14.100 left to right, it will raise an event called DOM content loaded, capitalized 02:21:14.100 --> 02:21:15.460 exactly as such. 02:21:15.460 --> 02:21:17.760 And if you want to call some function, and I don't even 02:21:17.760 --> 02:21:22.380 need an event argument in this case, you can open curly braces just as before 02:21:22.380 --> 02:21:24.990 and put inside of those curly braces the code 02:21:24.990 --> 02:21:29.160 that you want to execute only once the DOM's content has been loaded top 02:21:29.160 --> 02:21:29.880 to bottom. 02:21:29.880 --> 02:21:32.820 And now let me just finish my thought with a closed curly brace, 02:21:32.820 --> 02:21:34.783 close parentheses, and semicolon. 02:21:34.783 --> 02:21:37.200 It gets a little annoying to visually line all of this up, 02:21:37.200 --> 02:21:38.370 but I think I'm still good. 02:21:38.370 --> 02:21:42.270 And now even though this code is at the top of my file 02:21:42.270 --> 02:21:46.620 or really above the form tag itself, I think we're OK. 02:21:46.620 --> 02:21:48.300 So let's go back to the browser here. 02:21:48.300 --> 02:21:49.440 Reload the page. 02:21:49.440 --> 02:21:54.550 Type in D-A-V-I-D and click Greet and we still get the same correct behavior. 02:21:54.550 --> 02:21:57.900 And so this is just a very common paradigm to use these kinds of events 02:21:57.900 --> 02:22:00.820 to listen and listen and listen for something to happen 02:22:00.820 --> 02:22:04.808 and then only do something once that thing has transpired. 02:22:04.808 --> 02:22:07.350 All right, well let's take one more step with JavaScript code 02:22:07.350 --> 02:22:09.933 before we take a look at what's really fun about this language 02:22:09.933 --> 02:22:12.360 and what you can do with browsers in particular 02:22:12.360 --> 02:22:14.670 by just cleaning things up a little bit further. 02:22:14.670 --> 02:22:17.010 I'm going to go back into the code here and I'm actually 02:22:17.010 --> 02:22:23.640 going to remove or cut all of this code out of the hello.html file itself. 02:22:23.640 --> 02:22:26.160 And I'm going to change my script tag to have nothing 02:22:26.160 --> 02:22:28.710 in between the open and closed tag, but I 02:22:28.710 --> 02:22:30.600 am going to give it a source attribute. 02:22:30.600 --> 02:22:34.560 And let's go ahead and call this, for instance, hello.js. 02:22:34.560 --> 02:22:37.920 So .js would be the convention for the file extension for a JavaScript file. 02:22:37.920 --> 02:22:40.830 And even though this is a little weird that we have the script tag 02:22:40.830 --> 02:22:44.790 and a source attribute then nothing in between the open and close tag, 02:22:44.790 --> 02:22:47.700 this is indeed the convention when you want to put all of your code 02:22:47.700 --> 02:22:49.107 in a separate file. 02:22:49.107 --> 02:22:50.440 And let me go ahead and do that. 02:22:50.440 --> 02:22:52.440 Let me go ahead and open my terminal window. 02:22:52.440 --> 02:22:55.620 Create a new file called hello.js. 02:22:55.620 --> 02:22:59.190 And then in that file, I'm just going to paste the very code that I just 02:22:59.190 --> 02:23:00.660 cut from the previous file. 02:23:00.660 --> 02:23:02.310 So no changes to the code. 02:23:02.310 --> 02:23:03.870 All I'm doing is factoring it out. 02:23:03.870 --> 02:23:07.480 And now I'm doing something just like our CSS factorization before, 02:23:07.480 --> 02:23:09.210 which confusingly used the link tag. 02:23:09.210 --> 02:23:10.680 This uses the script tag. 02:23:10.680 --> 02:23:13.975 This just now allows me to collaborate with someone like Carter or someone 02:23:13.975 --> 02:23:15.850 else so that they can do the JavaScript code, 02:23:15.850 --> 02:23:18.570 I can do the HTML, maybe a third person can do the CSS. 02:23:18.570 --> 02:23:21.420 And indeed, maybe we can build even grander things 02:23:21.420 --> 02:23:25.030 by designing things in this way. 02:23:25.030 --> 02:23:25.530 All right. 02:23:25.530 --> 02:23:28.080 Well, let me go back to my browser again. 02:23:28.080 --> 02:23:29.280 Reload the page. 02:23:29.280 --> 02:23:33.030 I shouldn't see any visual changes, but if I type in my name again, David, 02:23:33.030 --> 02:23:36.102 and click Greet, this still now works. 02:23:36.102 --> 02:23:38.310 And what my browser has just done underneath the hood 02:23:38.310 --> 02:23:44.070 is not only download the hello.html file as always, because there's now 02:23:44.070 --> 02:23:46.830 this script tag that's referencing the source of another file, 02:23:46.830 --> 02:23:49.740 just like an image tag might reference the source of an image, 02:23:49.740 --> 02:23:54.840 the browser is automatically helping me out by loading that into its memory 02:23:54.840 --> 02:23:56.080 as well. 02:23:56.080 --> 02:23:57.862 And now how about one final example? 02:23:57.862 --> 02:23:59.820 And for this one, I'm going to go ahead and not 02:23:59.820 --> 02:24:02.700 write it live but open it up as prepared in advance 02:24:02.700 --> 02:24:05.400 just to show you what you can do by listening for some 02:24:05.400 --> 02:24:08.923 of these other events as well, like the key up, the finger going down, 02:24:08.923 --> 02:24:12.090 the finger going up, and listening for exactly that so as the user is typing 02:24:12.090 --> 02:24:14.950 something you can do something interesting as well. 02:24:14.950 --> 02:24:17.500 I'm going to go back into my directory listing here. 02:24:17.500 --> 02:24:19.680 And I click on this source, a directory which 02:24:19.680 --> 02:24:22.240 has all of the examples that I wrote here in advance. 02:24:22.240 --> 02:24:26.580 And I'm going to scroll down to one called hello5.html. 02:24:26.580 --> 02:24:29.190 And in hello5 now we've gotten rid of the button 02:24:29.190 --> 02:24:31.170 and we just have this text box. 02:24:31.170 --> 02:24:37.710 But notice now what happens if I start typing my name as D-A-V-I-D. 02:24:37.710 --> 02:24:39.402 I'm not typing Enter at all. 02:24:39.402 --> 02:24:41.610 And in fact, if I start deleting and I change my mind 02:24:41.610 --> 02:24:43.920 and start typing Carter's name, notice now 02:24:43.920 --> 02:24:47.070 that the web page, the DOM inside of the computer's memory, 02:24:47.070 --> 02:24:49.530 is now automatically updating itself. 02:24:49.530 --> 02:24:51.280 So it's not even listening, it would seem, 02:24:51.280 --> 02:24:56.320 for a submit event anymore but maybe for a key up event instead. 02:24:56.320 --> 02:24:58.380 So let me go back to VS Code here. 02:24:58.380 --> 02:24:59.730 Open my terminal window. 02:24:59.730 --> 02:25:05.010 And in my source directory, let me open up hello5.html. 02:25:05.010 --> 02:25:07.260 Inside of the script tag, you'll see some code 02:25:07.260 --> 02:25:09.450 that's similar in spirit to before whereby 02:25:09.450 --> 02:25:12.720 I'm adding an event listener to the document waiting for the whole DOM's 02:25:12.720 --> 02:25:13.830 content to be loaded. 02:25:13.830 --> 02:25:17.490 But then inside of that function, I'm now doing this. 02:25:17.490 --> 02:25:21.270 I'm creating a variable called input and selecting 02:25:21.270 --> 02:25:25.410 from the document the one and only input tag that we saw just a moment ago. 02:25:25.410 --> 02:25:28.530 I'm then adding on line 11 in event listener 02:25:28.530 --> 02:25:32.323 for key up, which is exactly that gesture so that I can execute 02:25:32.323 --> 02:25:35.490 some additional code any time the human lifts their finger from the keyboard 02:25:35.490 --> 02:25:36.690 after typing a key. 02:25:36.690 --> 02:25:38.050 What do I then do? 02:25:38.050 --> 02:25:41.190 Well, I'm going to go ahead, it seems, and declare another variable called 02:25:41.190 --> 02:25:41.800 name. 02:25:41.800 --> 02:25:44.440 And I'm just going to select some p tag on the page. 02:25:44.440 --> 02:25:48.060 And now we didn't really see a p tag, so I think it's time to look at the HTML. 02:25:48.060 --> 02:25:51.990 If I scroll down to the bottom of the page where my actual HTML is, 02:25:51.990 --> 02:25:55.650 you'll see that there's just a form tag and no on submit handler anymore, 02:25:55.650 --> 02:25:56.310 as before. 02:25:56.310 --> 02:25:59.430 There's just an input tag and no button at all, 02:25:59.430 --> 02:26:03.038 but there is on line 29 here an open and close p tag 02:26:03.038 --> 02:26:05.580 just so I have an empty placeholder in which to put something 02:26:05.580 --> 02:26:08.040 like hello David or hello Carter. 02:26:08.040 --> 02:26:12.000 So that's why now on line 12 I can define a variable called name 02:26:12.000 --> 02:26:16.180 and I can select that p tag so that what do I want to do? 02:26:16.180 --> 02:26:19.180 Well, if inside of the input there's a value, 02:26:19.180 --> 02:26:22.900 so this is essentially checking for null or the absence of a string. 02:26:22.900 --> 02:26:26.160 So if input.value does not equal nothing, 02:26:26.160 --> 02:26:30.840 that is there is a value in that text box, well, this syntax here on line 14 02:26:30.840 --> 02:26:33.220 is a very clever way of doing the following. 02:26:33.220 --> 02:26:35.640 Go into that name tag. 02:26:35.640 --> 02:26:38.010 That is to say, the empty paragraph. 02:26:38.010 --> 02:26:42.720 Change the inner HTML of it, the HTML inside of it, to be literally this. 02:26:42.720 --> 02:26:44.670 Hello comma. 02:26:44.670 --> 02:26:47.430 And then just so you've seen an additional piece of syntax, 02:26:47.430 --> 02:26:50.237 this is similar to Python's f strings, the syntax 02:26:50.237 --> 02:26:51.570 is a little weird in JavaScript. 02:26:51.570 --> 02:26:54.957 You actually use not single quotes, not double quotes, but back ticks, 02:26:54.957 --> 02:26:57.540 which on a US English keyboard are typically the top left hand 02:26:57.540 --> 02:26:59.700 key of your keyboard or thereabouts. 02:26:59.700 --> 02:27:05.670 And using dollar sign curly braces just like the curly braces alone in Python 02:27:05.670 --> 02:27:08.740 allows us to plug in whatever the value is of that input. 02:27:08.740 --> 02:27:12.750 However, if there's no value there, it looks like I'm just going to say hello 02:27:12.750 --> 02:27:13.890 whoever you are. 02:27:13.890 --> 02:27:16.370 And in fact, we can see that behavior now as I delete, 02:27:16.370 --> 02:27:19.710 delete, delete, delete, delete, delete, delete and nothing's there. 02:27:19.710 --> 02:27:24.210 Now that if condition is no longer true and so we see this default value 02:27:24.210 --> 02:27:24.760 instead. 02:27:24.760 --> 02:27:28.740 So this is only to say that by harnessing these various events that 02:27:28.740 --> 02:27:32.430 are constantly happening on most any web page, we can now register code 02:27:32.430 --> 02:27:36.210 just like we did way back in Scratch to actually listen for those events 02:27:36.210 --> 02:27:38.370 and do something with them. 02:27:38.370 --> 02:27:41.640 Now, it turns out we can do some interesting things even using 02:27:41.640 --> 02:27:42.540 third party code. 02:27:42.540 --> 02:27:46.020 And just as we used bootstrap a bit ago to make our table prettier, 02:27:46.020 --> 02:27:50.460 allow me to propose that we also take a look at this version of favorites 02:27:50.460 --> 02:27:51.100 as well. 02:27:51.100 --> 02:27:53.100 Let me go back into my source 8 directory 02:27:53.100 --> 02:27:56.940 and open up favorites2, which I made in advance, which looks almost the same, 02:27:56.940 --> 02:27:58.540 though I've zoomed in here a bit. 02:27:58.540 --> 02:28:04.960 But you'll notice somewhat subtly over the leftmost column in this table, 02:28:04.960 --> 02:28:08.640 you'll see now this arrow in gray pointing up and pointing down. 02:28:08.640 --> 02:28:10.020 Previously those were not there. 02:28:10.020 --> 02:28:12.720 All I had was a static HTML table with all 02:28:12.720 --> 02:28:14.970 of this data sorted in whatever order it was 02:28:14.970 --> 02:28:17.160 inputted the other day in that form. 02:28:17.160 --> 02:28:19.260 But now notice what I can do. 02:28:19.260 --> 02:28:23.970 If I want to sort in one order, I can click this arrow or the other order, 02:28:23.970 --> 02:28:25.050 I can sort in this arrow. 02:28:25.050 --> 02:28:28.190 So essentially doing it chronologically forward or backward. 02:28:28.190 --> 02:28:29.900 Now, how is that sorting happening? 02:28:29.900 --> 02:28:32.810 It's presumably based on all of the timestamps that 02:28:32.810 --> 02:28:37.610 were registered when we submitted that Google Form just a bit ago when 02:28:37.610 --> 02:28:38.480 it was live. 02:28:38.480 --> 02:28:42.530 But now using JavaScript, it turns out that we can use some logic somehow 02:28:42.530 --> 02:28:44.580 and sort this data by the same. 02:28:44.580 --> 02:28:47.900 And you don't get that automatically just by using HTML alone. 02:28:47.900 --> 02:28:49.440 Now, how did I achieve that? 02:28:49.440 --> 02:28:52.370 Well, it turns out if I go ahead and close these hello files. 02:28:52.370 --> 02:28:57.380 And in VS Code let's open up favorites2.html. 02:28:57.380 --> 02:29:00.350 You'll see that all of the HTML is actually the same if I 02:29:00.350 --> 02:29:02.150 scroll down and down through this file. 02:29:02.150 --> 02:29:05.060 But I added a little something interesting at top. 02:29:05.060 --> 02:29:08.420 I copied and pasted the appropriate URLs and HTML tags 02:29:08.420 --> 02:29:10.370 from bootstrap's documentation. 02:29:10.370 --> 02:29:14.840 And you'll see here that I have a file called not only bootstrap.min.css 02:29:14.840 --> 02:29:19.220 but also bootstrap.bundle.min.js as well as a couple of other things 02:29:19.220 --> 02:29:22.640 as well that allows me ultimately using third party 02:29:22.640 --> 02:29:27.560 libraries to add some special HTML attributes that those libraries told 02:29:27.560 --> 02:29:28.430 me to add. 02:29:28.430 --> 02:29:31.820 And then as soon as those libraries detect the presence of these attributes 02:29:31.820 --> 02:29:36.080 now on my own raw data, they do their thing and JavaScriptify, 02:29:36.080 --> 02:29:38.600 not a technical term, the entire table and now 02:29:38.600 --> 02:29:40.640 make it interactive and not static. 02:29:40.640 --> 02:29:43.190 So you'll see here that the aesthetics of the table 02:29:43.190 --> 02:29:45.290 are as before, table and table striped. 02:29:45.290 --> 02:29:47.900 But I'm adding now another HTML attribute called 02:29:47.900 --> 02:29:50.130 data toggle whose value is table. 02:29:50.130 --> 02:29:53.030 And I know that only from the documentation of these libraries 02:29:53.030 --> 02:29:57.230 indicating that that's how I can now enable this table to be interactive 02:29:57.230 --> 02:30:01.370 as I can too by adding data sortabls="true" 02:30:01.370 --> 02:30:04.070 on specifically the timestamp column. 02:30:04.070 --> 02:30:08.120 And the only thing unfamiliar here perhaps is I'm using TH for Table 02:30:08.120 --> 02:30:10.940 Heading as opposed to TD as I do elsewhere. 02:30:10.940 --> 02:30:14.090 But that's all that it takes to now focus on the raw data 02:30:14.090 --> 02:30:17.330 you want to present and let someone else do the heavy lifting of actually 02:30:17.330 --> 02:30:18.920 implementing the logic. 02:30:18.920 --> 02:30:23.450 Well, let's end with just a look at what more you can do with JavaScript 02:30:23.450 --> 02:30:25.580 and just how powerful it is when you combine 02:30:25.580 --> 02:30:30.620 a language like this with the data and the user interface you want to convey. 02:30:30.620 --> 02:30:33.740 Let's go ahead and open up within source 8 directory 02:30:33.740 --> 02:30:35.990 something called background.html. 02:30:35.990 --> 02:30:38.010 Now this interface here is quite simple. 02:30:38.010 --> 02:30:41.420 It just has three buttons, R, G, and B. And the background of course, 02:30:41.420 --> 02:30:43.100 notice by default, is just white. 02:30:43.100 --> 02:30:45.950 But when I click on the R, the background turns red. 02:30:45.950 --> 02:30:47.750 When I click on the G, it turns green. 02:30:47.750 --> 02:30:48.980 And the blue, it turns blue. 02:30:48.980 --> 02:30:50.610 And again and again. 02:30:50.610 --> 02:30:52.250 So how is this working? 02:30:52.250 --> 02:30:54.560 Well, if you think back again to the available events, 02:30:54.560 --> 02:30:57.800 perhaps I'm just listening for a click on those buttons 02:30:57.800 --> 02:31:01.040 and then doing something with maybe the CSS of the page 02:31:01.040 --> 02:31:03.720 to allow me to see those different colors. 02:31:03.720 --> 02:31:08.720 So in fact, let's go back to VS Code here and let's open up background.html. 02:31:08.720 --> 02:31:12.050 And in here, you'll see some simple HTML at the top. 02:31:12.050 --> 02:31:13.070 Just three buttons. 02:31:13.070 --> 02:31:17.210 But I've given each a unique ID so that I can reference it in code. 02:31:17.210 --> 02:31:19.640 And then inside of a script tag here below, 02:31:19.640 --> 02:31:24.180 because I didn't bother with the DOM content loaded event here, 02:31:24.180 --> 02:31:25.970 notice that I'm doing the following. 02:31:25.970 --> 02:31:29.510 I'm creating a variable called body that lets me select the body tag. 02:31:29.510 --> 02:31:32.810 I then have in these three lines some code that handles red. 02:31:32.810 --> 02:31:33.860 What am I doing? 02:31:33.860 --> 02:31:39.120 Well, I'm selecting from the document whatever HTML tag has unique ID of red. 02:31:39.120 --> 02:31:42.290 And then I'm adding an event listener for any click on that button. 02:31:42.290 --> 02:31:44.810 And any time someone clicks on that red button, 02:31:44.810 --> 02:31:46.920 I call this function anonymously. 02:31:46.920 --> 02:31:48.620 It doesn't even have or need a name. 02:31:48.620 --> 02:31:51.860 And this syntax here is powerful, because now in JavaScript I 02:31:51.860 --> 02:31:56.930 can alter the CSS of my page by doing body, which is the tag that I selected 02:31:56.930 --> 02:32:01.670 two lines ago, accessing its style, accessing its background color 02:32:01.670 --> 02:32:04.640 property, and setting it equal to quote unquote red. 02:32:04.640 --> 02:32:06.380 And I do the same down below for green. 02:32:06.380 --> 02:32:07.820 I do the same down below for blue. 02:32:07.820 --> 02:32:10.610 And the only thing worth noting here is that in CSS, it 02:32:10.610 --> 02:32:14.330 turns out it's the case that the CSS property for the background 02:32:14.330 --> 02:32:18.680 color of a page is actually background-color in all lowercase 02:32:18.680 --> 02:32:20.210 with a hyphen in between. 02:32:20.210 --> 02:32:22.190 Unfortunately in the world of JavaScript, 02:32:22.190 --> 02:32:25.760 a hyphen would be mistaken for subtraction, like background 02:32:25.760 --> 02:32:27.320 minus color, which would be wrong. 02:32:27.320 --> 02:32:31.220 So the convention in JavaScript is when you're trying to manipulate CSS, 02:32:31.220 --> 02:32:36.080 you take whatever the property name is, font size, background color, 02:32:36.080 --> 02:32:38.570 and you change it into so called camel case here. 02:32:38.570 --> 02:32:41.570 You get rid of the hyphen and you capitalize the subsequent words 02:32:41.570 --> 02:32:43.860 like color in this case here. 02:32:43.860 --> 02:32:44.360 All right. 02:32:44.360 --> 02:32:45.140 How about another? 02:32:45.140 --> 02:32:47.670 Well, it turns out back in the day, back in my day, 02:32:47.670 --> 02:32:51.650 there was a HTML tag that would actually allow you to do this. 02:32:51.650 --> 02:32:53.960 Create blinking text on a screen. 02:32:53.960 --> 02:32:56.180 It's rather unpleasant at this rate certainly. 02:32:56.180 --> 02:32:57.510 But how might this work? 02:32:57.510 --> 02:33:02.030 Well, it turns out in JavaScript if we take a look at the blink.html file 02:33:02.030 --> 02:33:07.700 here, we'll see that you can in your HTML do something literally as simple 02:33:07.700 --> 02:33:09.320 as hello world in the body. 02:33:09.320 --> 02:33:11.730 But then you can call this function here. 02:33:11.730 --> 02:33:15.035 It turns out just like document, there's another global special variable 02:33:15.035 --> 02:33:16.910 you can use in JavaScript and browsers called 02:33:16.910 --> 02:33:20.390 window, which refers to all things related to the window itself. 02:33:20.390 --> 02:33:22.590 The window comes with a set interval function, 02:33:22.590 --> 02:33:24.050 which lets you do exactly that. 02:33:24.050 --> 02:33:26.360 Set an interval in milliseconds. 02:33:26.360 --> 02:33:28.740 And after every expiration of that interval, 02:33:28.740 --> 02:33:31.090 some function will be called for you. 02:33:31.090 --> 02:33:33.960 So in this case, it's saying every 50 milliseconds. 02:33:33.960 --> 02:33:37.770 But let's actually slow that down now to 500 milliseconds or one half a second. 02:33:37.770 --> 02:33:39.840 Call a function called blink. 02:33:39.840 --> 02:33:42.630 Notice I do not have parentheses after the blink name 02:33:42.630 --> 02:33:44.490 because I don't want to call blink now. 02:33:44.490 --> 02:33:47.400 I want to tell the JavaScript to call the function called 02:33:47.400 --> 02:33:49.043 blink every 500 milliseconds. 02:33:49.043 --> 02:33:51.210 Now we'll see in a moment what that code looks like, 02:33:51.210 --> 02:33:53.130 but let's go back to the page and reload. 02:33:53.130 --> 02:33:55.800 And you'll see now that it's a more pleasant blinking, 02:33:55.800 --> 02:33:58.950 if that's even the case, every half second because I'm now 02:33:58.950 --> 02:34:03.930 firing that event, that is I'm calling that function now, every 500 02:34:03.930 --> 02:34:05.260 milliseconds instead. 02:34:05.260 --> 02:34:06.460 How am I doing that? 02:34:06.460 --> 02:34:10.210 Well, in this same script tag, I've invented my own blink function. 02:34:10.210 --> 02:34:13.800 This has the distinction back in the day of actually being an HTML tag 02:34:13.800 --> 02:34:17.730 and among the few tags that the world removed and got rid of 02:34:17.730 --> 02:34:21.120 so that it's no longer used because it's not all that user friendly. 02:34:21.120 --> 02:34:22.630 But down here what am I doing? 02:34:22.630 --> 02:34:26.370 I'm getting the body of the document itself with this variable 02:34:26.370 --> 02:34:30.070 and then I'm checking two CSS properties that we didn't talk about before, 02:34:30.070 --> 02:34:33.750 but it turns out that you can check and set the visibility of an element 02:34:33.750 --> 02:34:37.560 in JavaScript by going into that tag, checking its style, 02:34:37.560 --> 02:34:40.350 and getting its visibility at a property. 02:34:40.350 --> 02:34:44.730 And if it happens to equal hidden, the next line of code here, 13, 02:34:44.730 --> 02:34:46.920 sets it equal to visible instead. 02:34:46.920 --> 02:34:49.710 Else if it's not hidden, it must already be visible. 02:34:49.710 --> 02:34:53.520 And so line 17 flips it the other way and changes it to hidden. 02:34:53.520 --> 02:34:56.010 Here left hand, right hand clearly not talking. 02:34:56.010 --> 02:34:59.490 No idea why the opposite of visible is not invisible. 02:34:59.490 --> 02:35:01.618 It's indeed visible and hidden. 02:35:01.618 --> 02:35:03.660 But this just allows you every time this function 02:35:03.660 --> 02:35:06.570 is called to change the property from one value 02:35:06.570 --> 02:35:08.735 to another, achieving that blinking effect. 02:35:08.735 --> 02:35:10.860 You can do even more powerful things that you and I 02:35:10.860 --> 02:35:12.280 take for granted every day. 02:35:12.280 --> 02:35:15.750 Let's go into source 8 and go to autocomplete.html, 02:35:15.750 --> 02:35:16.800 which I wrote in advance. 02:35:16.800 --> 02:35:22.260 And this is a page that also loads into memory a really big dictionary 02:35:22.260 --> 02:35:24.450 that you might recall from problem set five. 02:35:24.450 --> 02:35:28.680 And if I go ahead and type in something like C-A-T, 02:35:28.680 --> 02:35:32.400 you'll notice dynamically an unordered bulleted list 02:35:32.400 --> 02:35:34.800 appearing below the text box that shows you 02:35:34.800 --> 02:35:38.790 all of the words in that dictionary from p set five that start with C 02:35:38.790 --> 02:35:41.940 and then C-A and then T just like the autocomplete 02:35:41.940 --> 02:35:45.390 you see every day on your phone and Google or websites like it. 02:35:45.390 --> 02:35:46.500 How is that working? 02:35:46.500 --> 02:35:49.560 Well, probably I'm listening for the key press going up. 02:35:49.560 --> 02:35:51.930 As soon as that key is pressed, I'm probably 02:35:51.930 --> 02:35:55.560 searching through a big array really of all of those words, 02:35:55.560 --> 02:35:59.080 maybe using linear search, maybe binary search if faster than that. 02:35:59.080 --> 02:36:02.160 And then looking for any string in that array that 02:36:02.160 --> 02:36:06.900 starts with C or C-A or C-A-T. And then I'm generating automatically 02:36:06.900 --> 02:36:08.460 the HTML therefore. 02:36:08.460 --> 02:36:11.490 But perhaps most familiar nowadays is just how much 02:36:11.490 --> 02:36:13.680 your phone and your laptop know about you. 02:36:13.680 --> 02:36:20.250 And let me go into a final example here in source 8 called geolocation.html, 02:36:20.250 --> 02:36:23.310 which is a term of art that just refers to figuring out your geography. 02:36:23.310 --> 02:36:25.170 For instance, your GPS coordinates. 02:36:25.170 --> 02:36:27.960 Now here we have a third and final global variable 02:36:27.960 --> 02:36:30.510 that your browser provides you with called navigator. 02:36:30.510 --> 02:36:32.670 And in navigator, there's a special object 02:36:32.670 --> 02:36:36.910 called geolocation that comes with a function called get current position. 02:36:36.910 --> 02:36:41.430 So if you call navigator.geolocation.getCurrentPosition 02:36:41.430 --> 02:36:44.830 and then pass in a function of your own that doesn't need a name 02:36:44.830 --> 02:36:47.580 but does take an argument, in this case I called it position, 02:36:47.580 --> 02:36:50.970 as soon as the browser or as soon as the phone has figured out 02:36:50.970 --> 02:36:55.080 where in the world that user is with that browser at some latitude 02:36:55.080 --> 02:36:57.570 and longitude, the browser will automatically 02:36:57.570 --> 02:36:59.400 call that function for you. 02:36:59.400 --> 02:37:02.250 And you can do anything you want with the position that comes back, 02:37:02.250 --> 02:37:04.068 the latitude and longitude respectively. 02:37:04.068 --> 02:37:06.610 So I'm going to use a function that's not often that helpful, 02:37:06.610 --> 02:37:10.080 but for our purposes today it's just going to write to the document itself 02:37:10.080 --> 02:37:13.690 to my big rectangular region whatever the latitude is, then a comma, 02:37:13.690 --> 02:37:15.910 and then the longitude as well. 02:37:15.910 --> 02:37:20.070 So if we go back with this final flourish into source 8, 02:37:20.070 --> 02:37:24.210 open up geolocation.html, you'll see that my browser first 02:37:24.210 --> 02:37:28.570 wants my permission to let this website my own know my location. 02:37:28.570 --> 02:37:30.300 I'm going to go ahead and click Allow. 02:37:30.300 --> 02:37:31.890 Crossing my fingers, because it might take 02:37:31.890 --> 02:37:34.140 a moment for the phone or the laptop to figure it out. 02:37:34.140 --> 02:37:36.690 And it looks like according to Google, I am 02:37:36.690 --> 02:37:41.820 right this moment with my Mac at latitude longitude 42.375 comma 02:37:41.820 --> 02:37:43.590 negative 71.11. 02:37:43.590 --> 02:37:45.760 Let's go ahead and highlight and copy that. 02:37:45.760 --> 02:37:48.540 Let's go to a website like googlemaps.com. 02:37:48.540 --> 02:37:49.420 Crossing our fingers. 02:37:49.420 --> 02:37:52.170 If you've never done this, you can search for GPS coordinates too. 02:37:52.170 --> 02:37:53.160 Let's hit Enter. 02:37:53.160 --> 02:37:56.040 And amazing. 02:37:56.040 --> 02:37:59.550 We are indeed in Sanders Theater, roughly there, 02:37:59.550 --> 02:38:02.250 standing on this stage on Halloween. 02:38:02.250 --> 02:38:03.810 And that then is week eight. 02:38:03.810 --> 02:38:05.580 We will see you next time. 02:38:05.580 --> 02:38:06.480 Happy Halloween. 02:38:06.480 --> 02:38:07.206 [APPLAUSE] 02:38:07.206 --> 02:38:07.873 [VIDEO PLAYBACK] 02:38:07.873 --> 02:38:09.600 - Off you go. 02:38:09.600 --> 02:38:10.230 Buffering. 02:38:10.230 --> 02:38:12.420 OK. 02:38:12.420 --> 02:38:15.400 Josh, nice. 02:38:15.400 --> 02:38:15.900 Helen. 02:38:15.900 --> 02:38:17.220 Oh. 02:38:17.220 --> 02:38:18.651 [LAUGHS] 02:38:21.040 --> 02:38:22.070 Moni. 02:38:22.070 --> 02:38:22.910 Oh no, wait. 02:38:28.952 --> 02:38:29.910 That was amazing, Josh. 02:38:34.590 --> 02:38:35.090 Sophie. 02:38:38.360 --> 02:38:40.340 [LAUGHS] 02:38:42.320 --> 02:38:44.810 Amazing. 02:38:44.810 --> 02:38:47.465 That was perfect. 02:38:47.465 --> 02:38:48.435 Moni. 02:38:48.435 --> 02:38:50.380 [LAUGHS] 02:38:50.380 --> 02:38:55.890 I think I-- over to Yoel. 02:38:55.890 --> 02:38:56.390 Guy. 02:39:01.070 --> 02:39:02.210 That was amazing. 02:39:02.210 --> 02:39:03.030 Thank you all. 02:39:03.030 --> 02:39:03.530 - So good. 02:39:06.530 --> 02:39:07.430 [END PLAYBACK] 02:39:07.430 --> 02:39:10.480 [MUSIC PLAYING]