1 00:00:00,000 --> 00:00:01,996 2 00:00:01,996 --> 00:00:04,990 [MUSIC PLAYING] 3 00:00:04,990 --> 00:01:12,355 4 00:01:12,355 --> 00:01:14,850 [VIDEO PLAYBACK] 5 00:01:14,850 --> 00:01:42,340 6 00:01:42,340 --> 00:01:45,760 - All the way to the top and then you pass it down. 7 00:01:45,760 --> 00:01:47,230 - This is for you, Yale. 8 00:01:47,230 --> 00:01:48,460 We love you, Yale. 9 00:01:48,460 --> 00:01:50,096 - We're here to cheer for Harvard. 10 00:01:50,096 --> 00:01:51,042 - Yeah. 11 00:01:51,042 --> 00:01:51,988 Go Harvard. 12 00:01:51,988 --> 00:01:54,678 13 00:01:54,678 --> 00:01:55,845 - Take one and pass it down. 14 00:01:55,845 --> 00:01:56,620 - Pass them down. 15 00:01:56,620 --> 00:01:59,945 - It's not gonna say something like Yale sucks is it? 16 00:01:59,945 --> 00:02:02,330 - It says go Harvard. 17 00:02:02,330 --> 00:02:03,710 - We're nice. 18 00:02:03,710 --> 00:02:05,033 - You see that [BLEEP]? 19 00:02:05,033 --> 00:02:05,575 Look at them. 20 00:02:05,575 --> 00:02:07,060 They passed the paper. 21 00:02:07,060 --> 00:02:09,800 It's gonna happen. 22 00:02:09,800 --> 00:02:12,460 It's actually gonna happen. 23 00:02:12,460 --> 00:02:13,680 I can't [BLEEP] believe it. 24 00:02:13,680 --> 00:02:15,810 - What do you think of Yale? 25 00:02:15,810 --> 00:02:18,666 - They don't think good. 26 00:02:18,666 --> 00:02:20,560 - It may be a complete mess, I don't know. 27 00:02:20,560 --> 00:02:21,075 - You can't really fix it now. 28 00:02:21,075 --> 00:02:21,880 - Does everyone have it? 29 00:02:21,880 --> 00:02:23,093 Does anyone have their stuff? 30 00:02:23,093 --> 00:02:24,385 Does everyone have their stuff? 31 00:02:24,385 --> 00:02:26,968 - The probability that it's going to be legible is very small. 32 00:02:26,968 --> 00:02:27,790 - I agree. 33 00:02:27,790 --> 00:02:29,140 - It's too complicated. 34 00:02:29,140 --> 00:02:30,490 - Look at all the signs. 35 00:02:30,490 --> 00:02:32,320 - I know, but it's too complicated. 36 00:02:32,320 --> 00:02:34,396 - What houses are you guys in? 37 00:02:34,396 --> 00:02:35,860 That's not a real house. 38 00:02:35,860 --> 00:02:37,170 - How many extra are there? 39 00:02:37,170 --> 00:02:37,450 - Ho-fo? 40 00:02:37,450 --> 00:02:37,950 - Yeah. 41 00:02:37,950 --> 00:02:41,425 42 00:02:41,425 --> 00:02:43,050 - You guys aren't from Harvard are you? 43 00:02:43,050 --> 00:02:43,670 - No, Pfoho. 44 00:02:43,670 --> 00:02:44,210 Pforzheimer. 45 00:02:44,210 --> 00:02:46,050 - Yeah, but she said ho-fo. 46 00:02:46,050 --> 00:02:48,295 - Well, she's probably drunk. 47 00:02:48,295 --> 00:02:49,670 - Does everyone have their stuff? 48 00:02:49,670 --> 00:02:51,003 - Are all the cards distributed? 49 00:02:51,003 --> 00:02:53,120 - All right, let's do it now. 50 00:02:53,120 --> 00:02:55,565 [CHEERING] 51 00:02:55,565 --> 00:02:58,499 - Yeah, look. 52 00:02:58,499 --> 00:02:59,477 - Oh my God. 53 00:02:59,477 --> 00:03:02,411 It's gonna work. 54 00:03:02,411 --> 00:03:03,878 [CHEERING] 55 00:03:03,878 --> 00:03:06,323 56 00:03:06,323 --> 00:03:08,279 - Hold up your signs. 57 00:03:08,279 --> 00:03:09,280 [BLEEP] 58 00:03:09,280 --> 00:03:14,870 - You suck, you suck, you suck, you suck, you suck, you suck. 59 00:03:14,870 --> 00:03:15,985 - We [BLEEP] did it. 60 00:03:15,985 --> 00:03:17,095 [BLEEP] 61 00:03:17,095 --> 00:03:22,916 - You suck, you suck, you suck, you suck, you suck, you suck. 62 00:03:22,916 --> 00:03:25,760 - What do you think of Yale, sir? 63 00:03:25,760 --> 00:03:26,540 - They suck. 64 00:03:26,540 --> 00:03:27,235 [LAUGHS] 65 00:03:27,235 --> 00:03:28,205 - They suck? 66 00:03:28,205 --> 00:03:29,175 - One more time. 67 00:03:29,175 --> 00:03:31,115 One more time. 68 00:03:31,115 --> 00:03:34,025 [CHEERING] 69 00:03:34,025 --> 00:03:35,937 70 00:03:35,937 --> 00:03:37,020 - Oh, there it goes again. 71 00:03:37,020 --> 00:03:40,182 72 00:03:40,182 --> 00:03:47,702 - Harvard sucks, Harvard sucks, Harvard sucks, Harvard sucks, Harvard sucks, 73 00:03:47,702 --> 00:03:50,142 Harvard sucks, Harvard sucks. 74 00:03:50,142 --> 00:03:53,558 75 00:03:53,558 --> 00:03:55,330 [END PLAYBACK] 76 00:03:55,330 --> 00:03:56,950 ADAM: All right. 77 00:03:56,950 --> 00:03:59,020 This is CS50. 78 00:03:59,020 --> 00:04:00,490 Welcome to week eight. 79 00:04:00,490 --> 00:04:06,160 Last week we learned how to create, read, update, and delete databases 80 00:04:06,160 --> 00:04:07,180 using SQL. 81 00:04:07,180 --> 00:04:09,250 But this week-- 82 00:04:09,250 --> 00:04:10,330 - Adam, everyone. 83 00:04:10,330 --> 00:04:11,560 Happy Halloween. 84 00:04:11,560 --> 00:04:13,488 [LAUGHS] 85 00:04:13,488 --> 00:04:15,416 [APPLAUSE] 86 00:04:15,416 --> 00:04:18,790 87 00:04:18,790 --> 00:04:19,779 DAVID MALAN: All right. 88 00:04:19,779 --> 00:04:23,320 So this is the CS50 and this is week eight already. 89 00:04:23,320 --> 00:04:27,160 My thanks to Adam on today, this Happy Halloween. 90 00:04:27,160 --> 00:04:29,770 In the coming moments, we're going to learn 91 00:04:29,770 --> 00:04:32,210 all about how the internet itself works, which of course, 92 00:04:32,210 --> 00:04:36,250 is a technology that we all use every day, probably using in some form 93 00:04:36,250 --> 00:04:37,000 right now. 94 00:04:37,000 --> 00:04:39,833 But we'll see that if you start to understand some of the underlying 95 00:04:39,833 --> 00:04:42,140 building blocks that power the internet itself, 96 00:04:42,140 --> 00:04:44,860 we can actually start to build interesting things on top of it. 97 00:04:44,860 --> 00:04:46,860 And a lot of the apps, the websites that you all 98 00:04:46,860 --> 00:04:50,290 use every day should become all the more familiar, things that you yourselves 99 00:04:50,290 --> 00:04:50,800 can create. 100 00:04:50,800 --> 00:04:52,508 And honestly when things go wrong, you'll 101 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, 102 00:04:56,410 --> 00:04:59,530 working so that you can ultimately diagnose 103 00:04:59,530 --> 00:05:00,910 all the more issues yourselves. 104 00:05:00,910 --> 00:05:03,550 So if we take a look at the internet in the early days, 105 00:05:03,550 --> 00:05:04,820 it pretty much was just this. 106 00:05:04,820 --> 00:05:07,570 This happens to be, of course, the geography of the United States. 107 00:05:07,570 --> 00:05:12,110 And just some of the first points on the internet were these here. 108 00:05:12,110 --> 00:05:14,740 This was so called ARPANET back in 1969. 109 00:05:14,740 --> 00:05:17,770 And indeed, the internet had its origins here in the United States 110 00:05:17,770 --> 00:05:21,490 with just a few computers interconnected somehow initially. 111 00:05:21,490 --> 00:05:24,290 That, of course, began to grow over time such 112 00:05:24,290 --> 00:05:27,040 that we eventually had the West Coast connected to the East Coast. 113 00:05:27,040 --> 00:05:30,010 And nowadays what you can think of these dots on the screen 114 00:05:30,010 --> 00:05:32,650 as representing are these things called routers, sort 115 00:05:32,650 --> 00:05:36,250 of computers or really servers that somehow have wires or maybe 116 00:05:36,250 --> 00:05:40,090 wireless connections between them that allow data to flow from point A 117 00:05:40,090 --> 00:05:43,060 to B to C. And then this, of course, has been now magnified 118 00:05:43,060 --> 00:05:46,000 across the entire globe and even above ground 119 00:05:46,000 --> 00:05:51,070 as well so that we can connect all the more readily to systems anywhere. 120 00:05:51,070 --> 00:05:55,400 Now, in order to route the data from one router to another, 121 00:05:55,400 --> 00:05:57,500 we need to somehow make routing decisions. 122 00:05:57,500 --> 00:06:01,137 And this is the kind of thing that the internet service providers, the ISPs 123 00:06:01,137 --> 00:06:02,470 of the world just handle for us. 124 00:06:02,470 --> 00:06:05,890 You and I plug our Macs, our PCs into the network here at Harvard 125 00:06:05,890 --> 00:06:08,290 or equivalently at Yale or we somehow get online 126 00:06:08,290 --> 00:06:10,630 via Wi-Fi or cellular technology. 127 00:06:10,630 --> 00:06:14,200 And then some of these larger entities, these bigger companies or countries, 128 00:06:14,200 --> 00:06:16,930 handle most of the data getting from point A 129 00:06:16,930 --> 00:06:20,410 to point B. And if you think about what these routers represent, 130 00:06:20,410 --> 00:06:22,630 they're indeed just servers somehow interconnected, 131 00:06:22,630 --> 00:06:26,900 not unlike this grid of tiles here, for instance, back in the Zoom days. 132 00:06:26,900 --> 00:06:29,782 And in fact here we have, I claim, a grid of routers 133 00:06:29,782 --> 00:06:32,740 implemented here by the course's teaching fellows and course assistants 134 00:06:32,740 --> 00:06:33,430 and TAs. 135 00:06:33,430 --> 00:06:36,820 And if the goal at hand, for instance, is for Phyllis 136 00:06:36,820 --> 00:06:39,447 to route some piece of information, maybe it's an email, 137 00:06:39,447 --> 00:06:42,280 maybe it's a request for a web page in the bottom right hand corner, 138 00:06:42,280 --> 00:06:45,460 all the way up to, say, Brian here in the top left hand corner. 139 00:06:45,460 --> 00:06:49,930 Suffice it to say if each of these tiles represents a router, a server that 140 00:06:49,930 --> 00:06:52,090 can move the data back, forth, left, and right, 141 00:06:52,090 --> 00:06:55,300 that packet of information, so to speak, from Phyllis to Brian 142 00:06:55,300 --> 00:06:58,390 could take any number of different possible routes. 143 00:06:58,390 --> 00:07:01,670 Up, down, left, right to go from the one corner to another. 144 00:07:01,670 --> 00:07:03,820 So let me go ahead and hit Play on this video 145 00:07:03,820 --> 00:07:06,820 here wherein the teaching fellows play this same role. 146 00:07:06,820 --> 00:07:08,284 [VIDEO PLAYBACK] 147 00:07:08,284 --> 00:07:10,236 [MUSIC PLAYING] 148 00:07:10,236 --> 00:07:21,460 149 00:07:21,460 --> 00:07:22,043 [END PLAYBACK] 150 00:07:22,043 --> 00:07:24,168 DAVID MALAN: All right, so in this particular case, 151 00:07:24,168 --> 00:07:26,280 the data was routed pretty straightforwardly 152 00:07:26,280 --> 00:07:27,390 up and then to the left. 153 00:07:27,390 --> 00:07:30,030 But suppose that one or more of the staff were a bit busy. 154 00:07:30,030 --> 00:07:32,310 Maybe one of the routers is congested. 155 00:07:32,310 --> 00:07:34,440 That is to say, just get way more envelopes 156 00:07:34,440 --> 00:07:36,240 at a moment in time that it can handle. 157 00:07:36,240 --> 00:07:38,490 Thankfully the design of the internet is such 158 00:07:38,490 --> 00:07:41,340 that there's often multiple ways the data can get from point A 159 00:07:41,340 --> 00:07:45,100 to point B, maybe going through point C or point D instead. 160 00:07:45,100 --> 00:07:48,720 And so there's a resilience there even as some of the servers themselves 161 00:07:48,720 --> 00:07:49,410 might go down. 162 00:07:49,410 --> 00:07:52,140 So allow me to propose that we use the same grid of routers 163 00:07:52,140 --> 00:07:56,742 now to route the data in a slightly different way this time. 164 00:07:56,742 --> 00:07:58,710 [VIDEO PLAYBACK] 165 00:07:58,710 --> 00:08:00,678 [MUSIC PLAYING] 166 00:08:00,678 --> 00:08:23,310 167 00:08:23,310 --> 00:08:24,130 [END PLAYBACK] 168 00:08:24,130 --> 00:08:25,130 DAVID MALAN: So success. 169 00:08:25,130 --> 00:08:27,380 You'll see perhaps later just how many takes it took 170 00:08:27,380 --> 00:08:29,060 us to actually get that routing right. 171 00:08:29,060 --> 00:08:33,140 But it does in fact manifest that you can travel different paths in order 172 00:08:33,140 --> 00:08:36,502 to get the data from point A to point B. So as we talk about routers, 173 00:08:36,502 --> 00:08:38,960 as you think of the internet, I mean, think of those humans 174 00:08:38,960 --> 00:08:40,520 as just representing these routers. 175 00:08:40,520 --> 00:08:43,159 Points A to P and everywhere in between. 176 00:08:43,159 --> 00:08:47,780 Now, how do the teaching staff know to route that packet up and then 177 00:08:47,780 --> 00:08:50,810 down or left and right in order to get to the destination? 178 00:08:50,810 --> 00:08:54,410 Well, all of them were programmed, so to speak, to understand protocols. 179 00:08:54,410 --> 00:08:59,480 It's called TCP and IP otherwise known together typically as TCP/IP. 180 00:08:59,480 --> 00:09:01,970 And you've probably seen these acronyms at some point 181 00:09:01,970 --> 00:09:05,238 in the real world, on the internet, on some kind of documentation, a text 182 00:09:05,238 --> 00:09:07,280 even if you haven't really thought hard about it. 183 00:09:07,280 --> 00:09:11,040 But IP is certainly the more common of the two perhaps in common culture. 184 00:09:11,040 --> 00:09:13,230 So what does TCP and IP do for us? 185 00:09:13,230 --> 00:09:15,200 Well, really two primary things. 186 00:09:15,200 --> 00:09:19,220 Any computer or any teaching staff member who understands TCP/IP 187 00:09:19,220 --> 00:09:22,280 knows how to get data from point A to point B. But how? 188 00:09:22,280 --> 00:09:25,070 Well, let's break down what that problem to be solved is. 189 00:09:25,070 --> 00:09:27,500 IP, otherwise known as Internet Protocol, 190 00:09:27,500 --> 00:09:31,370 is a protocol that computers speak that allow them to know how 191 00:09:31,370 --> 00:09:33,560 to address computers on the internet. 192 00:09:33,560 --> 00:09:37,560 And a protocol is just a set of conventions that computers adhere to. 193 00:09:37,560 --> 00:09:40,610 So someone wrote code that probably has a whole lot of conditionals 194 00:09:40,610 --> 00:09:43,160 that tells the computer what to do if something happens. 195 00:09:43,160 --> 00:09:46,610 Like if I receive a packet, then send it to the next server 196 00:09:46,610 --> 00:09:47,600 or something like that. 197 00:09:47,600 --> 00:09:49,850 In the human world, we have protocols too. 198 00:09:49,850 --> 00:09:54,260 In healthier times, it was quite common to extend your hand to another human 199 00:09:54,260 --> 00:09:55,340 in order to greet them. 200 00:09:55,340 --> 00:09:59,300 And if they're following human protocol, they would presumably grab your hand 201 00:09:59,300 --> 00:10:02,690 and shake it, at least in a culture like this one here on campus. 202 00:10:02,690 --> 00:10:06,260 And now that is a human protocol in that someone initiates it, 203 00:10:06,260 --> 00:10:08,822 someone responds to it, and you both sort of know what to do. 204 00:10:08,822 --> 00:10:10,280 Your programmed to know what to do. 205 00:10:10,280 --> 00:10:12,410 So same idea with internet protocol. 206 00:10:12,410 --> 00:10:15,530 Computers just know what to do when they've been programmed to do so. 207 00:10:15,530 --> 00:10:16,640 So what does this mean? 208 00:10:16,640 --> 00:10:22,340 If IP decides that every computer in the world will have a unique address, 209 00:10:22,340 --> 00:10:27,830 just like the Science Center around the corner might have a unique address of 1 210 00:10:27,830 --> 00:10:32,090 Oxford Street, Cambridge, Massachusetts, 02138, USA. 211 00:10:32,090 --> 00:10:34,550 IP dictates that every computer on the internet 212 00:10:34,550 --> 00:10:36,233 have a unique address of this form. 213 00:10:36,233 --> 00:10:38,900 And this too is probably something you've seen in the real world 214 00:10:38,900 --> 00:10:40,817 even if you haven't thought too hard about it. 215 00:10:40,817 --> 00:10:44,270 It's a number and what's called dotted decimal notation, which 216 00:10:44,270 --> 00:10:47,450 means it's a decimal number dot something dot something dot something. 217 00:10:47,450 --> 00:10:51,140 So four digits separated by convention by decimal point, 218 00:10:51,140 --> 00:10:53,910 although there are newer and bigger versions of the same. 219 00:10:53,910 --> 00:10:56,570 And these so called IP addresses that might 220 00:10:56,570 --> 00:11:02,570 be as simple as 1.2.3.4 uniquely identify a computer on the internet. 221 00:11:02,570 --> 00:11:07,160 The numbers have to range from 0 to 255 each. 222 00:11:07,160 --> 00:11:10,340 And that's a bit of a hint just as you start to think more computationally. 223 00:11:10,340 --> 00:11:13,100 If each of these is a number from 0 to 255, 224 00:11:13,100 --> 00:11:17,180 how many bits does that suggest each number is using? 225 00:11:17,180 --> 00:11:19,800 Feel free to shout it out. 226 00:11:19,800 --> 00:11:21,900 How many bits gives us 255? 227 00:11:21,900 --> 00:11:23,770 256 total possibilities. 228 00:11:23,770 --> 00:11:24,570 So eight bits. 229 00:11:24,570 --> 00:11:26,778 That should just be sort of a heuristic in your mind. 230 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, 231 00:11:31,650 --> 00:11:35,070 think back to week 0, which gives us eight bits plus another eight bits 232 00:11:35,070 --> 00:11:36,820 another eight bits and another eight bits, 233 00:11:36,820 --> 00:11:40,720 which is to say an IP address typically is 32 bits in total. 234 00:11:40,720 --> 00:11:43,680 Now, if we do another bit of quick mental math or think back to week 0, 235 00:11:43,680 --> 00:11:49,170 if every IP address is 32 bits, how many computers can we have on the internet 236 00:11:49,170 --> 00:11:50,730 at once? 237 00:11:50,730 --> 00:11:52,410 Give or take. 238 00:11:52,410 --> 00:11:56,510 Roughly 4 billion is the ballpark. 239 00:11:56,510 --> 00:11:59,010 And we don't need to be super precise for discussion's sake. 240 00:11:59,010 --> 00:12:01,450 But roughly 4 billion is how high you can 241 00:12:01,450 --> 00:12:04,930 count, assuming no negative numbers, if you have 32 bits in total. 242 00:12:04,930 --> 00:12:09,155 Now, that's not terribly many numbers of addresses, 243 00:12:09,155 --> 00:12:11,530 especially considering the number of humans in the world, 244 00:12:11,530 --> 00:12:15,210 the number of us that do have laptops or desktops or devices more generally, 245 00:12:15,210 --> 00:12:16,990 phones in our pockets and the like. 246 00:12:16,990 --> 00:12:19,260 So let me just stipulate for today's purposes 247 00:12:19,260 --> 00:12:22,860 that there's even a newer and improved version of IP otherwise known 248 00:12:22,860 --> 00:12:24,000 as version 6. 249 00:12:24,000 --> 00:12:26,610 This is version 4 but still super popular. 250 00:12:26,610 --> 00:12:32,250 Version 6 uses 128 bits, which is a huge number of possible permutations. 251 00:12:32,250 --> 00:12:34,650 I daresay I can't even pronounce that number it's so big. 252 00:12:34,650 --> 00:12:38,100 So there are ways around even this limitation already. 253 00:12:38,100 --> 00:12:41,290 So every computer has an address like this. 254 00:12:41,290 --> 00:12:42,670 What does that really mean? 255 00:12:42,670 --> 00:12:45,870 Well, suppose that I was Phyllis in the story told visually earlier 256 00:12:45,870 --> 00:12:47,610 and I want to send a message to Brian. 257 00:12:47,610 --> 00:12:50,220 Well, both Phyllis and Brian have IP addresses. 258 00:12:50,220 --> 00:12:52,560 And suppose that Brian's IP address happens 259 00:12:52,560 --> 00:12:56,010 to be 1.2.3.4 in that top left hand corner. 260 00:12:56,010 --> 00:12:59,610 Well, Phyllis's Mac or PC or phone would essentially 261 00:12:59,610 --> 00:13:03,480 do the equivalent on this human envelope by writing the two 262 00:13:03,480 --> 00:13:07,270 address in the middle of the envelope, as is our human convention, like this. 263 00:13:07,270 --> 00:13:09,630 So this is an envelope, a piece of information, 264 00:13:09,630 --> 00:13:12,090 an email, a text message, whatever destined for Brian. 265 00:13:12,090 --> 00:13:15,660 And so she would have her computer put Brian's IP address in the middle. 266 00:13:15,660 --> 00:13:19,320 Her IP address is maybe 5.6.7.8. 267 00:13:19,320 --> 00:13:23,400 So just like our human convention, I might write 5.6.7.8 268 00:13:23,400 --> 00:13:24,750 at the top of the envelope. 269 00:13:24,750 --> 00:13:27,030 Five, six, seven, eight. 270 00:13:27,030 --> 00:13:29,700 Thereby indicating what the return address is. 271 00:13:29,700 --> 00:13:33,120 And this is helpful, because if Brian's computer needs to acknowledge receipt, 272 00:13:33,120 --> 00:13:36,570 if he needs to reply in some form, this way the envelope has 273 00:13:36,570 --> 00:13:38,050 all the information we need. 274 00:13:38,050 --> 00:13:40,980 But in the real world, servers do a lot of things nowadays. 275 00:13:40,980 --> 00:13:44,670 Not just email but maybe chat, maybe video conferencing, maybe 276 00:13:44,670 --> 00:13:46,810 any number of other services as well. 277 00:13:46,810 --> 00:13:50,430 And so it turns out that an address alone might not be sufficient, 278 00:13:50,430 --> 00:13:54,010 because how does Brian's computer know when he opens the envelope, 279 00:13:54,010 --> 00:13:56,790 so to speak, that this should be interpreted as an email 280 00:13:56,790 --> 00:14:00,630 or interpreted as a chat message or interpreted as a video attachment 281 00:14:00,630 --> 00:14:01,680 that Phyllis has sent? 282 00:14:01,680 --> 00:14:05,220 Well, we need some other mechanism, some other hint on this envelope 283 00:14:05,220 --> 00:14:08,860 to distinguish one type of internet service from another. 284 00:14:08,860 --> 00:14:14,130 And so that's where the other acronym in TCP/IP comes in, which is TCP. 285 00:14:14,130 --> 00:14:16,980 So this stands for Transmission Control Protocol, 286 00:14:16,980 --> 00:14:19,560 which is just a different set of conventions 287 00:14:19,560 --> 00:14:23,320 that computers adhere to in order to solve a couple of different problems. 288 00:14:23,320 --> 00:14:27,780 One is this problem of distinguishing one type of service from another. 289 00:14:27,780 --> 00:14:29,230 Now, what does that mean? 290 00:14:29,230 --> 00:14:32,070 Well, humans decades ago decided as they started 291 00:14:32,070 --> 00:14:35,250 inventing all of these various internet services, the web being 292 00:14:35,250 --> 00:14:39,240 the first one, how they might-- or the web now being the most popular ones. 293 00:14:39,240 --> 00:14:42,780 They decided to assign different services that can 294 00:14:42,780 --> 00:14:44,850 be used on the internet unique numbers. 295 00:14:44,850 --> 00:14:46,920 And so two of the most common are these. 296 00:14:46,920 --> 00:14:50,250 80 is the number that a bunch of humans decided years ago will 297 00:14:50,250 --> 00:14:52,770 represent what you and I know as HTTP. 298 00:14:52,770 --> 00:14:55,710 And we'll talk more technically in a bit about what HTTP is. 299 00:14:55,710 --> 00:14:59,430 But obviously it's the thing that's in the beginning of every URL nowadays. 300 00:14:59,430 --> 00:15:03,130 Or HTTPS, which, of course, has the S added to it. 301 00:15:03,130 --> 00:15:04,590 And that has its own unique number. 302 00:15:04,590 --> 00:15:06,660 And for now, the S just means Secure. 303 00:15:06,660 --> 00:15:09,900 One is encrypted or scrambled somehow for privacy's sake 304 00:15:09,900 --> 00:15:11,340 and the other is unencrypted. 305 00:15:11,340 --> 00:15:13,410 It's a little more vulnerable to interception. 306 00:15:13,410 --> 00:15:18,570 So these two numbers are what the world decided when implementing TCP shall 307 00:15:18,570 --> 00:15:20,290 uniquely identify those services. 308 00:15:20,290 --> 00:15:21,340 So what does this mean? 309 00:15:21,340 --> 00:15:24,430 Well, this means that if Brian's computer in the story from before 310 00:15:24,430 --> 00:15:27,240 is hosting not like an email server but maybe he has a website 311 00:15:27,240 --> 00:15:30,670 and Phyllis is requesting Brian's home page or something like that. 312 00:15:30,670 --> 00:15:34,350 She would have her Mac or PC or phone not only 313 00:15:34,350 --> 00:15:39,420 write Brian's IP address in the middle of the envelope but also the number, 314 00:15:39,420 --> 00:15:41,760 otherwise known as a port number that she 315 00:15:41,760 --> 00:15:44,610 wants this envelope to be routed to. 316 00:15:44,610 --> 00:15:46,950 Now, 80 would be insecure nowadays. 317 00:15:46,950 --> 00:15:53,520 HTTP:// is sort of passe and we almost always see HTTPS:// now. 318 00:15:53,520 --> 00:15:55,500 So I'm just going to go with best practice 319 00:15:55,500 --> 00:15:57,520 and I'm going to add a colon and then the number 320 00:15:57,520 --> 00:16:01,570 443 at the end of Brian's IP address. 321 00:16:01,570 --> 00:16:05,032 So now I have an IP address for Brian, the port number for the service 322 00:16:05,032 --> 00:16:07,740 that this is relevant to, and I'm not going to bother writing it, 323 00:16:07,740 --> 00:16:09,865 but it turns out that Phyllis's computer would also 324 00:16:09,865 --> 00:16:12,370 choose a port number, maybe a random port number, 325 00:16:12,370 --> 00:16:14,610 so that Brian can conversely reply. 326 00:16:14,610 --> 00:16:17,670 And then the computer can know which response 327 00:16:17,670 --> 00:16:20,700 is coming back for which request. 328 00:16:20,700 --> 00:16:23,160 But the most important one is this one in the two field 329 00:16:23,160 --> 00:16:25,890 whereby this distinguishes this from an email, a chat 330 00:16:25,890 --> 00:16:28,380 message, a video conference session or a Zoom or whatnot 331 00:16:28,380 --> 00:16:31,450 from anything else happening on Brian's computer at the same time. 332 00:16:31,450 --> 00:16:34,830 So all this time if you've seen these terms TCP and IP, 333 00:16:34,830 --> 00:16:38,250 those are really two of the most important things that they do. 334 00:16:38,250 --> 00:16:41,400 But TCP does one other thing that's super useful too. 335 00:16:41,400 --> 00:16:47,100 It turns out that it's super common nowadays especially 336 00:16:47,100 --> 00:16:50,340 to transmit a lot of media on the internet, whether it's an image 337 00:16:50,340 --> 00:16:53,280 or maybe it's a movie file, and it would be a little obnoxious, 338 00:16:53,280 --> 00:16:56,510 to say the least, if your downloading a really big file 339 00:16:56,510 --> 00:16:59,030 meant that no one else in your dorm room or your household 340 00:16:59,030 --> 00:17:01,670 could actually download anything until you're actually done. 341 00:17:01,670 --> 00:17:04,339 So of course, multiple people nowadays can be on the internet 342 00:17:04,339 --> 00:17:07,069 at once even if all of the connections are a little slower. 343 00:17:07,069 --> 00:17:09,920 But one person's usage does not block someone else's. 344 00:17:09,920 --> 00:17:11,480 Now, how does this work? 345 00:17:11,480 --> 00:17:14,210 Well, TCP/IP in conjunction with IP can also 346 00:17:14,210 --> 00:17:17,520 allow you to take a really big image of a cat, which the internet of course 347 00:17:17,520 --> 00:17:19,940 is filled with, and take a big image of a cat 348 00:17:19,940 --> 00:17:24,510 or a big video file of a cat and fragment it into multiple pieces. 349 00:17:24,510 --> 00:17:27,195 So I'm just going to roughly tear it down the middle 350 00:17:27,195 --> 00:17:29,070 and then maybe tear it down the middle again. 351 00:17:29,070 --> 00:17:31,010 So now it's four different fragments. 352 00:17:31,010 --> 00:17:34,610 And I'm sorry, but the computer will be reassembling these for us. 353 00:17:34,610 --> 00:17:38,570 And what Phyllis's computer could do now if she's 354 00:17:38,570 --> 00:17:41,480 uploading this picture of a cat to Brian's web server, 355 00:17:41,480 --> 00:17:44,630 well, she could put one fragment in this envelope 356 00:17:44,630 --> 00:17:48,950 and then have three separate envelopes for the other three fragments. 357 00:17:48,950 --> 00:17:51,860 And what she could then do on the outside of this envelope 358 00:17:51,860 --> 00:17:53,480 is just kind of number them somehow. 359 00:17:53,480 --> 00:17:57,530 And in fact, this is something else that TCP and IP together would do for us. 360 00:17:57,530 --> 00:18:02,060 This first envelope now might say something like one out of four 361 00:18:02,060 --> 00:18:06,950 in the memo field, so to speak, of the metaphorical envelope here. 362 00:18:06,950 --> 00:18:08,630 Now, this should be enough information. 363 00:18:08,630 --> 00:18:11,330 Because now if Brian gets all four of these envelopes, 364 00:18:11,330 --> 00:18:14,450 he presumably knows how to reassemble the picture of the cat in order top 365 00:18:14,450 --> 00:18:15,530 to bottom, left to right. 366 00:18:15,530 --> 00:18:19,010 But more importantly, suppose that one of the routers, one 367 00:18:19,010 --> 00:18:21,710 of the TFs in the video is sort of distracted 368 00:18:21,710 --> 00:18:24,120 and they sort of drop one of the packets. 369 00:18:24,120 --> 00:18:25,880 And that's a metaphor actually in practice 370 00:18:25,880 --> 00:18:27,470 for when a router gets really busy. 371 00:18:27,470 --> 00:18:29,300 It's got way too much data coming in. 372 00:18:29,300 --> 00:18:31,177 It might metaphorically drop packets. 373 00:18:31,177 --> 00:18:32,510 What does that mean in practice? 374 00:18:32,510 --> 00:18:34,820 I mean, it literally just ignores the zeros and ones. 375 00:18:34,820 --> 00:18:37,970 It doesn't save them to its memory, because there's just no room left. 376 00:18:37,970 --> 00:18:40,160 So it's equivalent to dropping the packet. 377 00:18:40,160 --> 00:18:45,380 So suppose now that Brian gets one of four, three of four, and four of four. 378 00:18:45,380 --> 00:18:51,270 What can his computer infer now after receiving those three packets? 379 00:18:51,270 --> 00:18:54,330 One of four, three of four, and four of four. 380 00:18:54,330 --> 00:18:55,330 What's the use there? 381 00:18:55,330 --> 00:18:59,340 Yeah, I think you're signaling with your fingers which one-- 382 00:18:59,340 --> 00:19:00,280 can I call on you? 383 00:19:00,280 --> 00:19:03,310 Yeah, so he's missing two out of four, the second of the packets. 384 00:19:03,310 --> 00:19:05,310 And this is useful now because you could imagine 385 00:19:05,310 --> 00:19:07,690 he can send some message back to Phyllis saying, hey, 386 00:19:07,690 --> 00:19:10,920 please retransmit number two of four without having 387 00:19:10,920 --> 00:19:13,380 to redownload the entirety of the cat. 388 00:19:13,380 --> 00:19:16,680 So there's an efficiency there as well. 389 00:19:16,680 --> 00:19:20,040 So TCP/IP allows data really to go from point A 390 00:19:20,040 --> 00:19:24,100 to point B while solving a bunch of these problems along the way. 391 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 392 00:19:28,050 --> 00:19:32,280 address, that is the sort of problem that's being solved. 393 00:19:32,280 --> 00:19:39,405 Questions now on these protocols, these conventions called TCP and IP? 394 00:19:39,405 --> 00:19:41,780 That's the extent to which we'll need to understand them. 395 00:19:41,780 --> 00:19:43,322 Won't have to implement them, per se. 396 00:19:43,322 --> 00:19:46,510 We'll just take them hereafter for granted. 397 00:19:46,510 --> 00:19:50,380 Any questions that you've ever been wondering about your home network? 398 00:19:50,380 --> 00:19:51,202 Yeah. 399 00:19:51,202 --> 00:19:55,138 AUDIENCE: What happens when TCP-- like, when you try to send a message? 400 00:19:55,138 --> 00:19:57,550 Does it know if that user got the message or not? 401 00:19:57,550 --> 00:19:59,050 DAVID MALAN: A really good question. 402 00:19:59,050 --> 00:20:02,100 How does TCP know that a user got a message? 403 00:20:02,100 --> 00:20:05,340 Another aspect, another feature of TCP is 404 00:20:05,340 --> 00:20:08,160 that Brian's computer by design of this protocol 405 00:20:08,160 --> 00:20:10,660 will also acknowledge the packets that he's received. 406 00:20:10,660 --> 00:20:11,910 And it will do it efficiently. 407 00:20:11,910 --> 00:20:15,510 If Brian receives all four packets in a pretty narrow window of time, 408 00:20:15,510 --> 00:20:18,510 his computer will send to Phyllis's computer a quick message saying 409 00:20:18,510 --> 00:20:20,255 essentially received all four. 410 00:20:20,255 --> 00:20:22,380 Otherwise he'll say the opposite, which is that I'm 411 00:20:22,380 --> 00:20:24,990 missing for instance two out of four. 412 00:20:24,990 --> 00:20:27,300 And that just ensures ultimately that all of the data 413 00:20:27,300 --> 00:20:29,970 is indeed arrived so that you're not missing 414 00:20:29,970 --> 00:20:34,530 like a quadrant of the cat in question. 415 00:20:34,530 --> 00:20:36,630 All right, but that's not the only problem 416 00:20:36,630 --> 00:20:38,430 that needs to be solved ultimately. 417 00:20:38,430 --> 00:20:43,380 We also need to make the internet user friendly, if you will. 418 00:20:43,380 --> 00:20:47,940 And it would be really tedious if you had to visit websites, for instance, 419 00:20:47,940 --> 00:20:50,520 by way of their IP addresses. 420 00:20:50,520 --> 00:20:56,130 1.2.3.4 is pretty memorable, but there's like 4 billion other possible addresses 421 00:20:56,130 --> 00:20:56,640 available. 422 00:20:56,640 --> 00:20:59,130 And it would be super tedious to remember those. 423 00:20:59,130 --> 00:21:02,370 It would be bad marketing to advertise those. 424 00:21:02,370 --> 00:21:05,992 In fact, most of you probably don't even know the phone numbers of your closest 425 00:21:05,992 --> 00:21:08,700 friends and family members anymore because you instead store them 426 00:21:08,700 --> 00:21:11,340 in your contacts or in your address book associating 427 00:21:11,340 --> 00:21:15,630 with numbers that are completely opaque with actual names or strings, 428 00:21:15,630 --> 00:21:16,480 if you will. 429 00:21:16,480 --> 00:21:19,530 The same goes for the internet too, even though every computer 430 00:21:19,530 --> 00:21:22,830 does have and must have a unique IP address numerically. 431 00:21:22,830 --> 00:21:23,370 Why? 432 00:21:23,370 --> 00:21:27,030 Won't routers or computers, computers just crunch numbers very readily, 433 00:21:27,030 --> 00:21:29,490 but we humans work better with strings of text. 434 00:21:29,490 --> 00:21:32,880 We need some system for converting user friendly strings 435 00:21:32,880 --> 00:21:38,340 like harvard.edu or yale.edu or google.com to the underlying IP 436 00:21:38,340 --> 00:21:38,850 addresses. 437 00:21:38,850 --> 00:21:41,620 And that's where the next acronym comes in today, 438 00:21:41,620 --> 00:21:44,710 which is DNS, Domain Name System. 439 00:21:44,710 --> 00:21:48,250 So this is just another technology that's been in use for some time now. 440 00:21:48,250 --> 00:21:52,560 And it's a collection of servers on the internet whose purpose in life 441 00:21:52,560 --> 00:21:57,520 is to convert domain names to IP addresses and maybe vice versa as well. 442 00:21:57,520 --> 00:21:59,680 So let me stipulate for today's purposes, 443 00:21:59,680 --> 00:22:03,810 there are some root DNS servers in the world that, long story short, know 444 00:22:03,810 --> 00:22:07,570 about all of the dot coms, all of the dot edus, all of the dot, 445 00:22:07,570 --> 00:22:11,170 dot, dot, all of the other top level domains around the world, 446 00:22:11,170 --> 00:22:12,240 as well as in the US. 447 00:22:12,240 --> 00:22:15,360 And then there are some smaller DNS servers 448 00:22:15,360 --> 00:22:18,720 owned by companies, owned by universities, and even 449 00:22:18,720 --> 00:22:21,030 in your apartments or homes most likely. 450 00:22:21,030 --> 00:22:24,000 Indeed, if you have a home router plugged into the wall somewhere, 451 00:22:24,000 --> 00:22:26,250 that's not only routing your data in and out 452 00:22:26,250 --> 00:22:28,230 of your apartment or home or dorm room. 453 00:22:28,230 --> 00:22:35,140 It's also typically serving as a local therefore faster DNS server, a cache 454 00:22:35,140 --> 00:22:35,640 if you will. 455 00:22:35,640 --> 00:22:39,000 It's sort of locally saving your most frequently accessed websites 456 00:22:39,000 --> 00:22:41,970 in their IP addresses just to avoid bothering the bigger, more 457 00:22:41,970 --> 00:22:44,350 expensive, busier servers all day long. 458 00:22:44,350 --> 00:22:46,110 So there's DNS servers all over. 459 00:22:46,110 --> 00:22:50,460 If you poke around your settings in Windows or Mac OS or Android or iOS, 460 00:22:50,460 --> 00:22:53,340 you'll see mention of DNS, and you'll probably 461 00:22:53,340 --> 00:22:56,430 see the IP addresses of the servers whose purpose in life 462 00:22:56,430 --> 00:22:58,000 is to do this conversion for you. 463 00:22:58,000 --> 00:22:59,970 But this is a requisite feature if we just 464 00:22:59,970 --> 00:23:02,730 want the internet to be user friendly and allow us 465 00:23:02,730 --> 00:23:05,700 to use words instead of numbers alone. 466 00:23:05,700 --> 00:23:07,860 What's inside of these DNS servers? 467 00:23:07,860 --> 00:23:09,510 It's essentially a spreadsheet. 468 00:23:09,510 --> 00:23:11,880 Or if we can say it more geekily, it's essentially 469 00:23:11,880 --> 00:23:15,720 like a hash table of some sort, which it has keys and values. 470 00:23:15,720 --> 00:23:17,100 The key is the domain name. 471 00:23:17,100 --> 00:23:19,530 Harvard.edu, yale.edu, google.com. 472 00:23:19,530 --> 00:23:23,490 And the value is the corresponding IP address, or in many cases 473 00:23:23,490 --> 00:23:27,640 IP addresses plural, of the corresponding servers. 474 00:23:27,640 --> 00:23:30,210 So here already even though I've drawn it fairly abstractly 475 00:23:30,210 --> 00:23:33,060 like you would on a chalkboard, it's really probably implemented 476 00:23:33,060 --> 00:23:34,200 as some kind of table. 477 00:23:34,200 --> 00:23:36,570 Maybe a hash table, maybe a database table, 478 00:23:36,570 --> 00:23:38,470 maybe SQL or something like that. 479 00:23:38,470 --> 00:23:41,100 Or maybe it's even just a linked list or an array. 480 00:23:41,100 --> 00:23:46,600 We just have to somehow enable this computer to convert one to the other. 481 00:23:46,600 --> 00:23:50,040 Now, just to be super precise, DNS servers actually 482 00:23:50,040 --> 00:23:53,470 convert what are called fully qualified domain names, which is generally 483 00:23:53,470 --> 00:23:59,760 not just harvard.edu but more verbose www.harvard.edu and www.google.com. 484 00:23:59,760 --> 00:24:03,630 So the whole thing that you would see as a substring of the URL. 485 00:24:03,630 --> 00:24:05,460 So that's what DNS does. 486 00:24:05,460 --> 00:24:08,790 And that's what your university, your company, your home router 487 00:24:08,790 --> 00:24:09,960 are doing for you. 488 00:24:09,960 --> 00:24:15,310 Let me pause here to see if there are any questions. 489 00:24:15,310 --> 00:24:18,100 This too is just a technology now we'll take for granted. 490 00:24:18,100 --> 00:24:20,520 It just works. 491 00:24:20,520 --> 00:24:22,930 Questions at all? 492 00:24:22,930 --> 00:24:23,430 No? 493 00:24:23,430 --> 00:24:24,070 All right. 494 00:24:24,070 --> 00:24:26,937 So let's now transition among our protocols 495 00:24:26,937 --> 00:24:28,770 really to the last for today, which will set 496 00:24:28,770 --> 00:24:31,270 the stage for actually solving problems with these 497 00:24:31,270 --> 00:24:33,390 and writing some code ultimately. 498 00:24:33,390 --> 00:24:34,290 HTTP. 499 00:24:34,290 --> 00:24:36,570 This is something that you see or hear all day 500 00:24:36,570 --> 00:24:39,210 long even though you rarely have to bother typing it anymore. 501 00:24:39,210 --> 00:24:42,810 Odds are if you go to harvard.edu, yale.edu, google.com, 502 00:24:42,810 --> 00:24:46,870 you don't bother typing HTTP, let alone HTTPS, manually anymore. 503 00:24:46,870 --> 00:24:47,370 Why? 504 00:24:47,370 --> 00:24:50,703 Because your browser auto completes that kind of thing just to make life easier. 505 00:24:50,703 --> 00:24:53,610 But it is officially at the beginning of every URL 506 00:24:53,610 --> 00:24:57,510 you visit, either HTTP or the more secure HTTPS, 507 00:24:57,510 --> 00:25:01,260 whenever you're using your browser to access some website. 508 00:25:01,260 --> 00:25:06,780 So HTTP stands for Hypertext Transfer Protocol. 509 00:25:06,780 --> 00:25:10,830 And it's easily one of the most popular, daresay one of the most powerful 510 00:25:10,830 --> 00:25:12,480 features of the internet nowadays. 511 00:25:12,480 --> 00:25:16,170 But the mental model to have here is that HTTP or the web more 512 00:25:16,170 --> 00:25:19,710 generally is kind of a service that runs on top of the internet. 513 00:25:19,710 --> 00:25:23,160 And maybe Zoom or Microsoft Teams is another service 514 00:25:23,160 --> 00:25:25,200 that runs on top of the internet. 515 00:25:25,200 --> 00:25:27,930 And iMessage and technologies like it is another service that 516 00:25:27,930 --> 00:25:29,160 runs on top of the internet. 517 00:25:29,160 --> 00:25:32,880 So the internet is really the lower level plumbing, the TCP/IP stuff, 518 00:25:32,880 --> 00:25:35,580 the DNS stuff, that just gets data from point A to point B. 519 00:25:35,580 --> 00:25:39,000 But now, and we're in a software development class 520 00:25:39,000 --> 00:25:43,980 ultimately here in CS50, HTTP is the application level protocol. 521 00:25:43,980 --> 00:25:47,490 It's sort of what programmers use, what companies use, 522 00:25:47,490 --> 00:25:52,140 what developers use ultimately to use the underlying plumbing to build 523 00:25:52,140 --> 00:25:54,100 interesting and powerful things. 524 00:25:54,100 --> 00:25:58,890 So what does this mean when it comes to accessing services via HTTP 525 00:25:58,890 --> 00:26:01,110 or the more secure HTTPS? 526 00:26:01,110 --> 00:26:03,862 Well, here is a representative URL. 527 00:26:03,862 --> 00:26:05,820 Even though you might not type the whole thing, 528 00:26:05,820 --> 00:26:08,410 if you poke around your address bar, this is what's up there. 529 00:26:08,410 --> 00:26:10,380 With that said, a lot of browsers nowadays 530 00:26:10,380 --> 00:26:14,970 are kind of simplifying if not dumbing down what you see with your human eyes 531 00:26:14,970 --> 00:26:17,760 just to shorten the strings, especially on mobile devices. 532 00:26:17,760 --> 00:26:20,460 But almost always, if you click the URL or highlight it, 533 00:26:20,460 --> 00:26:21,780 then you see the whole thing. 534 00:26:21,780 --> 00:26:25,530 But on many browsers, you might only ever see example.com. 535 00:26:25,530 --> 00:26:27,310 But all of this information is there. 536 00:26:27,310 --> 00:26:31,290 It's just getting more and more hidden just for user interfaces sake. 537 00:26:31,290 --> 00:26:34,510 Well, it turns out when you visit a URL, by default, 538 00:26:34,510 --> 00:26:37,630 especially if you type nothing after the dot com in this case, 539 00:26:37,630 --> 00:26:40,680 you're technically implicitly adding a single slash. 540 00:26:40,680 --> 00:26:44,310 So a single denotes the root of the server. 541 00:26:44,310 --> 00:26:47,670 That is the default page or folder in the server. 542 00:26:47,670 --> 00:26:49,950 And the slash, whether or not you type it or not, 543 00:26:49,950 --> 00:26:51,840 is implicitly going to be there. 544 00:26:51,840 --> 00:26:55,380 And that just means give me the default. Whatever is at www.example.com, 545 00:26:55,380 --> 00:26:57,750 give me that page or that folder. 546 00:26:57,750 --> 00:27:00,120 But URLs can be longer than this. 547 00:27:00,120 --> 00:27:03,057 And more generally, there can be a path, so to speak. 548 00:27:03,057 --> 00:27:04,140 And this is a term of art. 549 00:27:04,140 --> 00:27:09,910 A path is some sequence of folder and/or file names after a URL like this. 550 00:27:09,910 --> 00:27:12,930 And so you might see more specifically that a URL contains 551 00:27:12,930 --> 00:27:14,190 a very specific file. 552 00:27:14,190 --> 00:27:18,300 This isn't as common nowadays anymore, though we will begin today 553 00:27:18,300 --> 00:27:19,530 by using this technique. 554 00:27:19,530 --> 00:27:24,030 But if there is a file called literally file.html or something else 555 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. 556 00:27:29,250 --> 00:27:32,880 Meanwhile, you might have /folder/, which just means show me 557 00:27:32,880 --> 00:27:34,380 whatever's inside of this folder. 558 00:27:34,380 --> 00:27:38,190 Or you might have more verbosely /folder/file.html, 559 00:27:38,190 --> 00:27:41,280 which will show you that file in that folder. 560 00:27:41,280 --> 00:27:43,920 And meanwhile, just to give some other terms of art, 561 00:27:43,920 --> 00:27:46,717 this is the so called fully qualified domain name. 562 00:27:46,717 --> 00:27:49,050 And again, these vocab words don't matter all that much, 563 00:27:49,050 --> 00:27:50,970 but you'll hear or see them over time. 564 00:27:50,970 --> 00:27:53,790 We generally colloquially just refer to this 565 00:27:53,790 --> 00:27:57,120 as the domain name, which is a little less precise 566 00:27:57,120 --> 00:27:59,340 but gets the job done certainly in conversation. 567 00:27:59,340 --> 00:28:03,270 And this part here I described briefly earlier. 568 00:28:03,270 --> 00:28:07,800 What's the name for this suffix at the very end of the fully qualified domain 569 00:28:07,800 --> 00:28:09,330 name? 570 00:28:09,330 --> 00:28:10,110 The? 571 00:28:10,110 --> 00:28:10,630 Yeah. 572 00:28:10,630 --> 00:28:11,450 AUDIENCE: Top Level Domain. 573 00:28:11,450 --> 00:28:12,200 DAVID MALAN: Yeah. 574 00:28:12,200 --> 00:28:13,670 Top Level Domain or TLD. 575 00:28:13,670 --> 00:28:16,520 And this is just some form of categorization of the URLs. 576 00:28:16,520 --> 00:28:19,498 Now, the internet got its start within the United States 577 00:28:19,498 --> 00:28:22,040 and a lot of the first websites, of course, came from the US. 578 00:28:22,040 --> 00:28:25,207 And so for better or for worse, the sort of stake was planted in the ground. 579 00:28:25,207 --> 00:28:29,150 So generally .com indicated at least early on that it was some kind 580 00:28:29,150 --> 00:28:32,390 of commercial enterprise, a business that owned a domain name. 581 00:28:32,390 --> 00:28:36,760 .edu is an educational institution. .net was some kind of network. 582 00:28:36,760 --> 00:28:38,660 .gov was the US government. 583 00:28:38,660 --> 00:28:41,810 Now, there are also country code TLDs. 584 00:28:41,810 --> 00:28:45,380 CCTLDs like .uk or .jp. 585 00:28:45,380 --> 00:28:49,160 Every country in the world has its own two letter 586 00:28:49,160 --> 00:28:54,290 TLD that might very well be restricted to only servers or companies or people 587 00:28:54,290 --> 00:28:56,030 in that country. 588 00:28:56,030 --> 00:28:58,130 Many of them can be used by anyone. 589 00:28:58,130 --> 00:29:02,420 You've used a lot of URLs in this class ending in cs50.io. 590 00:29:02,420 --> 00:29:04,940 That doesn't mean input output. 591 00:29:04,940 --> 00:29:07,910 It actually is a TLD from another country 592 00:29:07,910 --> 00:29:11,930 that lets anyone on the internet pay for and on an annual basis 593 00:29:11,930 --> 00:29:12,950 using that domain. 594 00:29:12,950 --> 00:29:17,780 .tv for instance you might see in some cases, like twitch.tv and the like. 595 00:29:17,780 --> 00:29:20,367 That too is owned by another country that 596 00:29:20,367 --> 00:29:22,700 allows others in the English speaking world in this case 597 00:29:22,700 --> 00:29:24,530 to use it as though it connotes TV. 598 00:29:24,530 --> 00:29:26,330 But those are just different types of TLDs 599 00:29:26,330 --> 00:29:29,510 that roughly categorize where the domain lives. 600 00:29:29,510 --> 00:29:31,910 But it doesn't necessarily mean it's commercial anymore. 601 00:29:31,910 --> 00:29:35,030 It doesn't necessarily mean it's a network anymore. 602 00:29:35,030 --> 00:29:38,180 For the most part, there are hundreds of TLDs 603 00:29:38,180 --> 00:29:40,190 now, for better or for worse, most of which 604 00:29:40,190 --> 00:29:42,770 are less common than these big ones. 605 00:29:42,770 --> 00:29:46,400 But most anyone can buy most of them with just some restrictions on things 606 00:29:46,400 --> 00:29:50,480 like .edu and .gov that are still very much regulated. 607 00:29:50,480 --> 00:29:54,950 This, meanwhile, is what we might call the host name. www, It's obviously 608 00:29:54,950 --> 00:29:56,990 a super common convention. 609 00:29:56,990 --> 00:30:00,200 Almost every website uses www as its host name. 610 00:30:00,200 --> 00:30:01,580 But that's a human convention. 611 00:30:01,580 --> 00:30:02,870 It's not a requirement. 612 00:30:02,870 --> 00:30:05,630 And indeed, some websites don't even bother having a host name. 613 00:30:05,630 --> 00:30:09,710 They just use their domain to advertise their websites. 614 00:30:09,710 --> 00:30:13,040 This now is going to be the scheme or the protocol 615 00:30:13,040 --> 00:30:18,540 and this is just going to indicate via what protocol the computer, your Mac, 616 00:30:18,540 --> 00:30:23,120 your PC, your phone should use when accessing content at that address. 617 00:30:23,120 --> 00:30:25,800 Because indeed, there are other protocols you can use. 618 00:30:25,800 --> 00:30:32,090 But for the most part, we'll only focus on HTTP or equivalently HTTPS. 619 00:30:32,090 --> 00:30:32,600 All right. 620 00:30:32,600 --> 00:30:36,410 Any questions now on those just definitions, building blocks of URLs, 621 00:30:36,410 --> 00:30:40,770 just so we all sort of share a common vocabulary? 622 00:30:40,770 --> 00:30:42,210 Any questions at all? 623 00:30:42,210 --> 00:30:43,165 Yeah. 624 00:30:43,165 --> 00:30:45,720 AUDIENCE: What is the local post IP? 625 00:30:45,720 --> 00:30:46,470 DAVID MALAN: Sure. 626 00:30:46,470 --> 00:30:48,345 We'll come back to this actually later today. 627 00:30:48,345 --> 00:30:50,910 There's a technical term known as local host, which 628 00:30:50,910 --> 00:30:54,317 is a generic name for your computer, your Mac, your PC, your phone, 629 00:30:54,317 --> 00:30:56,400 especially when you're doing software development. 630 00:30:56,400 --> 00:30:59,250 And by convention, your own computer has not only 631 00:30:59,250 --> 00:31:02,850 whatever IP address you get from your university or your internet service 632 00:31:02,850 --> 00:31:03,390 provider. 633 00:31:03,390 --> 00:31:06,810 It also has a reflexive IP address, one that just always refers 634 00:31:06,810 --> 00:31:10,332 to itself, which is 127.0.0.1. 635 00:31:10,332 --> 00:31:11,790 And that's just a human convention. 636 00:31:11,790 --> 00:31:14,390 Humans decided that shall refer always to your computer. 637 00:31:14,390 --> 00:31:16,140 And it's actually going to be useful today 638 00:31:16,140 --> 00:31:19,770 and onward, because we can use that when doing development on our own computers 639 00:31:19,770 --> 00:31:20,610 ultimately. 640 00:31:20,610 --> 00:31:27,690 Other questions on URLs, IP, DNS, or any of these building blocks? 641 00:31:27,690 --> 00:31:28,380 All right. 642 00:31:28,380 --> 00:31:32,310 So what do we mean by HTTP being a protocol? 643 00:31:32,310 --> 00:31:34,950 When I extended my hand earlier as a human handshake, 644 00:31:34,950 --> 00:31:38,640 a typical human in healthy times would know to respond in turn. 645 00:31:38,640 --> 00:31:43,590 Well, how does Brian's computer to respond to Phyllis's envelope, whatever 646 00:31:43,590 --> 00:31:44,610 message is therein? 647 00:31:44,610 --> 00:31:47,880 Well, assuming that Brian is indeed still a web server in the story 648 00:31:47,880 --> 00:31:50,190 and Phyllis was trying to upload a cat or maybe 649 00:31:50,190 --> 00:31:55,020 download a cat from Brian's web server, inside of Phyllis's envelope 650 00:31:55,020 --> 00:31:57,930 would have been a message literally in text. 651 00:31:57,930 --> 00:32:00,000 And it's English for the most part. 652 00:32:00,000 --> 00:32:03,030 And it would contain at the beginning of that message literally one 653 00:32:03,030 --> 00:32:04,110 of these English verbs. 654 00:32:04,110 --> 00:32:05,970 Either get, which means just that. 655 00:32:05,970 --> 00:32:07,080 Get me the home page. 656 00:32:07,080 --> 00:32:08,190 Get me a picture of a cat. 657 00:32:08,190 --> 00:32:11,010 Get me a picture of a dog or a video or anything else. 658 00:32:11,010 --> 00:32:14,700 Or post, which often means post. 659 00:32:14,700 --> 00:32:19,050 That is put, that is upload a picture of a cat or a dog 660 00:32:19,050 --> 00:32:21,030 or something else to the server instead. 661 00:32:21,030 --> 00:32:23,728 That's not strictly the only use cases for these, 662 00:32:23,728 --> 00:32:26,520 but you can generally think them as one is just getting information 663 00:32:26,520 --> 00:32:30,360 and the other is posting from the client, from Phyllis to the server, 664 00:32:30,360 --> 00:32:31,350 in this case, Brian. 665 00:32:31,350 --> 00:32:33,510 So those are the two keywords that we might see. 666 00:32:33,510 --> 00:32:34,870 And why is this useful? 667 00:32:34,870 --> 00:32:38,250 Well, it turns out we can start to see in our own Mac or PC 668 00:32:38,250 --> 00:32:39,990 some of these very same messages. 669 00:32:39,990 --> 00:32:46,290 For instance, if Phyllis were visiting not Brian's but example.com, that web 670 00:32:46,290 --> 00:32:49,080 server, inside of her metaphorical envelope, 671 00:32:49,080 --> 00:32:51,210 there would be a textual message that literally 672 00:32:51,210 --> 00:32:56,670 starts with get slash then the word HTTP then the version she's using. 673 00:32:56,670 --> 00:32:58,140 1.1 is very common. 674 00:32:58,140 --> 00:33:00,120 Two and three are becoming more common. 675 00:33:00,120 --> 00:33:02,220 But HTTP generally looks like this. 676 00:33:02,220 --> 00:33:07,650 The next line of text in her envelope would probably say host: 677 00:33:07,650 --> 00:33:10,830 then literally the fully qualified domain name of the server 678 00:33:10,830 --> 00:33:12,430 she's accessing, just in case. 679 00:33:12,430 --> 00:33:15,030 And this happens super commonly, especially on small websites. 680 00:33:15,030 --> 00:33:19,470 If one server is hosting multiple domain names, multiple websites, 681 00:33:19,470 --> 00:33:22,080 this just distinguishes which one she actually wants. 682 00:33:22,080 --> 00:33:25,450 And then there's usually a whole bunch of other lines of text as well. 683 00:33:25,450 --> 00:33:28,600 So where can you actually see this? 684 00:33:28,600 --> 00:33:31,830 Well, let me actually go ahead and do this. 685 00:33:31,830 --> 00:33:35,550 Give me just a moment, and I'm going to open up on my computer here 686 00:33:35,550 --> 00:33:38,010 an empty Chrome window in incognito mode. 687 00:33:38,010 --> 00:33:40,287 Generally speaking, incognito mode or private mode 688 00:33:40,287 --> 00:33:42,120 is used when you don't want there to be left 689 00:33:42,120 --> 00:33:43,800 remnants of what websites you visited. 690 00:33:43,800 --> 00:33:46,020 And it has the effect for software developers 691 00:33:46,020 --> 00:33:50,010 of just forgetting any things you might have tried already within your browser, 692 00:33:50,010 --> 00:33:51,480 including things called cookies. 693 00:33:51,480 --> 00:33:53,130 More on those another time. 694 00:33:53,130 --> 00:33:54,880 Your autocomplete history and the like. 695 00:33:54,880 --> 00:33:56,820 So for development purposes, incognito mode 696 00:33:56,820 --> 00:34:00,120 is especially helpful because it's sort of like starting with a clean slate 697 00:34:00,120 --> 00:34:02,730 every time you open a new private or incognito mode. 698 00:34:02,730 --> 00:34:06,400 So there's not going to be any remnants of previous testing or code 699 00:34:06,400 --> 00:34:07,650 that you've been playing with. 700 00:34:07,650 --> 00:34:09,233 And I'm going to go ahead and do this. 701 00:34:09,233 --> 00:34:13,500 I'm going to go ahead and right click or Control click on Chrome. 702 00:34:13,500 --> 00:34:15,030 I'm going to choose Inspect. 703 00:34:15,030 --> 00:34:18,050 And it's going to pull up this window, sometimes on the side 704 00:34:18,050 --> 00:34:19,050 sometimes on the bottom. 705 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. 706 00:34:21,960 --> 00:34:23,219 And I'm going to zoom in. 707 00:34:23,219 --> 00:34:26,080 And it's going to look a little arcane at first. 708 00:34:26,080 --> 00:34:28,380 And I'm going to just highlight a few of these tabs. 709 00:34:28,380 --> 00:34:32,685 We'll see here along the top that there's elements, console, sources, 710 00:34:32,685 --> 00:34:34,810 network, and a whole bunch of other things as well. 711 00:34:34,810 --> 00:34:36,870 This is the advanced mode in Chrome. 712 00:34:36,870 --> 00:34:39,780 And Safari and Firefox and Edge have their own equivalents 713 00:34:39,780 --> 00:34:40,590 of these features. 714 00:34:40,590 --> 00:34:43,620 They've always been there, even if you've never clicked the right button 715 00:34:43,620 --> 00:34:44,909 to enable these features. 716 00:34:44,909 --> 00:34:47,625 And I'm going to focus for a moment on network like this. 717 00:34:47,625 --> 00:34:50,500 This is a feature of the browser that's going to allow me, 718 00:34:50,500 --> 00:34:52,800 the programmer in this case, so the engineer, 719 00:34:52,800 --> 00:34:56,040 to just kind of look at what messages my browser is actually 720 00:34:56,040 --> 00:34:57,390 sending to a server. 721 00:34:57,390 --> 00:35:00,280 So let me go ahead and do something like this. 722 00:35:00,280 --> 00:35:05,400 Let me go ahead and visit for instance in my browser here, 723 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, 724 00:35:08,700 --> 00:35:15,660 I'm going to visit https://www.harvard.edu. 725 00:35:15,660 --> 00:35:17,700 And now I'm going to hit Enter. 726 00:35:17,700 --> 00:35:21,750 And a whole bunch of stuff just happened along the bottom of my screen. 727 00:35:21,750 --> 00:35:24,250 And I'm going to try to pull my window up just a little bit. 728 00:35:24,250 --> 00:35:26,560 So we can focus on a subset of this. 729 00:35:26,560 --> 00:35:29,280 Let me pull this up, covering up really the content of the page, 730 00:35:29,280 --> 00:35:33,040 focusing on these lower level details down here. 731 00:35:33,040 --> 00:35:37,100 And what I want to see first is-- 732 00:35:37,100 --> 00:35:39,590 let me-- oh, sorry. 733 00:35:39,590 --> 00:35:42,230 Let me go ahead and reload this page here 734 00:35:42,230 --> 00:35:44,060 after retaining the log so that we can see 735 00:35:44,060 --> 00:35:45,860 absolutely everything on the screen. 736 00:35:45,860 --> 00:35:49,400 And to be clear, I just checked because I forgot earlier preserve log 737 00:35:49,400 --> 00:35:51,750 because I wanted to preserve everything on the screen. 738 00:35:51,750 --> 00:35:53,340 I want to see everything all at once. 739 00:35:53,340 --> 00:35:54,410 And we'll see this. 740 00:35:54,410 --> 00:35:58,070 The very first line of output is completely overwhelming with detail 741 00:35:58,070 --> 00:35:59,150 at first glance. 742 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, 743 00:36:04,280 --> 00:36:06,380 are the so called request headers. 744 00:36:06,380 --> 00:36:07,890 And let me zoom in here. 745 00:36:07,890 --> 00:36:12,530 And what you're seeing inside of Chrome, inside of its Network tab in its so 746 00:36:12,530 --> 00:36:13,880 called developer tools. 747 00:36:13,880 --> 00:36:15,860 Again, this is just for engineering types. 748 00:36:15,860 --> 00:36:19,130 You'll see all of the headers, all of the lines of text 749 00:36:19,130 --> 00:36:24,710 that magically were sent by my Mac to harvard.edu, much like from Phyllis 750 00:36:24,710 --> 00:36:26,570 to Brian's server in that story. 751 00:36:26,570 --> 00:36:29,673 So I can see exactly what messages are being sent. 752 00:36:29,673 --> 00:36:31,590 And a lot of this we haven't talked about yet, 753 00:36:31,590 --> 00:36:35,255 but we do see some mention of get and we see some mention of slash 754 00:36:35,255 --> 00:36:37,520 and a bunch of other arcane details. 755 00:36:37,520 --> 00:36:41,990 But notice they're all sort of key value pairs with the colon here indicating 756 00:36:41,990 --> 00:36:43,368 what the corresponding value is. 757 00:36:43,368 --> 00:36:45,410 Now, most of this is not going to be interesting, 758 00:36:45,410 --> 00:36:48,160 and we're not going to focus too much on the weeds of all of this. 759 00:36:48,160 --> 00:36:52,880 But it indeed gives us a sense of what's inside of that virtual envelope. 760 00:36:52,880 --> 00:36:54,830 Now, harvard.edu is one thing. 761 00:36:54,830 --> 00:36:58,800 But there's other websites we might visit as well. 762 00:36:58,800 --> 00:37:03,450 And no matter what they are, we're going to expect ultimately an HTTP response. 763 00:37:03,450 --> 00:37:06,770 So in addition to a computer, like my Mac or Phyllis's computer, 764 00:37:06,770 --> 00:37:11,360 sending a request containing gets and host and those details too, 765 00:37:11,360 --> 00:37:15,560 you'll see here in my slide form just representative response 766 00:37:15,560 --> 00:37:16,490 from the server. 767 00:37:16,490 --> 00:37:18,920 And notice that key here is that the server is 768 00:37:18,920 --> 00:37:21,710 responding in the same version of HTTP in this example. 769 00:37:21,710 --> 00:37:23,990 It's sending back this so called status code. 770 00:37:23,990 --> 00:37:27,560 Just a numeric code that indicates, in this case, that everything's OK. 771 00:37:27,560 --> 00:37:30,800 And it includes this header, this HTTP header, 772 00:37:30,800 --> 00:37:32,870 which again, is just a key value pair saying 773 00:37:32,870 --> 00:37:35,780 that the type of this content that's coming back from the server 774 00:37:35,780 --> 00:37:37,730 is text/html. 775 00:37:37,730 --> 00:37:39,720 More on HTML in just a little bit. 776 00:37:39,720 --> 00:37:43,010 But for our purposes now, this just means that harvard.edu 777 00:37:43,010 --> 00:37:44,750 is sending me back a web page. 778 00:37:44,750 --> 00:37:47,810 And indeed, if we hide all of this technical stuff, 779 00:37:47,810 --> 00:37:50,300 that's the web page that we saw up here with all 780 00:37:50,300 --> 00:37:52,070 of the usual imagery and the like. 781 00:37:52,070 --> 00:37:56,210 And in fact, I can see this if I scroll back up not to request 782 00:37:56,210 --> 00:37:59,030 headers but response headers. 783 00:37:59,030 --> 00:38:02,400 You'll see up here that we get back responses, 784 00:38:02,400 --> 00:38:04,940 including the date that the server responded 785 00:38:04,940 --> 00:38:07,407 and a whole bunch of other details as well. 786 00:38:07,407 --> 00:38:09,740 And honestly, this has always been under your fingertips 787 00:38:09,740 --> 00:38:13,100 and it will soon be useful as we start making web based applications 788 00:38:13,100 --> 00:38:13,730 ultimately. 789 00:38:13,730 --> 00:38:16,190 But this very quickly gets overwhelming quickly. 790 00:38:16,190 --> 00:38:18,680 And so better than this might actually be a tool 791 00:38:18,680 --> 00:38:21,570 that we can use within our code space itself. 792 00:38:21,570 --> 00:38:23,540 So let me go back to VS Code here. 793 00:38:23,540 --> 00:38:24,800 I didn't open any code tabs. 794 00:38:24,800 --> 00:38:27,050 I'm just going to use my terminal window for a moment. 795 00:38:27,050 --> 00:38:28,758 And I'm going to run a couple of commands 796 00:38:28,758 --> 00:38:31,670 that are going to allow me to actually see what 797 00:38:31,670 --> 00:38:34,160 is going on when I request one website. 798 00:38:34,160 --> 00:38:38,210 Let me go ahead and use a command called curl for connect URL. 799 00:38:38,210 --> 00:38:41,360 And this is like a command line black and white program that's 800 00:38:41,360 --> 00:38:42,920 going to pretend to be a browser. 801 00:38:42,920 --> 00:38:45,560 And it's going to connect to the URL, show me the headers, 802 00:38:45,560 --> 00:38:47,870 but it's not going to show me the images of the graphics, which 803 00:38:47,870 --> 00:38:50,078 might very well be useful to the humans but not to me 804 00:38:50,078 --> 00:38:51,330 right now as the developer. 805 00:38:51,330 --> 00:38:52,520 So I'm going to do curl. 806 00:38:52,520 --> 00:38:54,260 I'm going to do -i. 807 00:38:54,260 --> 00:38:58,910 And then I'm going to do https://www.harvard.edu/ 808 00:38:58,910 --> 00:39:03,470 as though I'm pretending to be a browser requesting the home page. 809 00:39:03,470 --> 00:39:07,340 And what's nice about curl is, albeit overwhelming too, 810 00:39:07,340 --> 00:39:12,050 you'll get back a whole response from the server containing only those header 811 00:39:12,050 --> 00:39:14,990 values, the key value pairs inside of the envelope. 812 00:39:14,990 --> 00:39:16,790 And we'll ignore almost all of these. 813 00:39:16,790 --> 00:39:18,620 But here is the response from the server. 814 00:39:18,620 --> 00:39:21,470 It responded using a new and improved version of HTTP. 815 00:39:21,470 --> 00:39:25,010 In this case, version two, and it gave me back a 200. 816 00:39:25,010 --> 00:39:27,800 There's my content type, text/html. 817 00:39:27,800 --> 00:39:30,440 And then this char set happens to do with the encoding, 818 00:39:30,440 --> 00:39:33,060 if it's Unicode or ASCII or something else. 819 00:39:33,060 --> 00:39:35,720 And then there's all this other overwhelming detail for now. 820 00:39:35,720 --> 00:39:39,200 But this is the beginnings of my ability to just kind of poke around and see 821 00:39:39,200 --> 00:39:40,610 how the server works. 822 00:39:40,610 --> 00:39:46,330 And it turns out too that we'll be able to see other potential responses as 823 00:39:46,330 --> 00:39:46,830 well. 824 00:39:46,830 --> 00:39:52,070 So for instance, HTTP might not only return 100. 825 00:39:52,070 --> 00:39:53,720 What if I do this instead? 826 00:39:53,720 --> 00:40:01,880 Let me go ahead and visit curl -i http://www.harvard.edu. 827 00:40:01,880 --> 00:40:04,250 So notice I deliberately used the insecure version 828 00:40:04,250 --> 00:40:09,440 of the URL, which maybe Harvard's system administration doesn't like anymore. 829 00:40:09,440 --> 00:40:13,280 Well, how can they ensure that I, the end user, the student, 830 00:40:13,280 --> 00:40:17,810 nonetheless use HTTPS even if I didn't type it myself? 831 00:40:17,810 --> 00:40:22,160 Well, let me run just that command with just HTTP, not HTTPS, 832 00:40:22,160 --> 00:40:24,320 and you'll see that everything is not OK. 833 00:40:24,320 --> 00:40:26,300 It didn't come back with a 200. 834 00:40:26,300 --> 00:40:30,230 It came back with 301 and this message saying Harvard moved permanently. 835 00:40:30,230 --> 00:40:32,990 But here's where you can look for another clue. 836 00:40:32,990 --> 00:40:35,510 Among all of these lines, most of which I don't care about, 837 00:40:35,510 --> 00:40:38,670 there's a location patient header colon that's 838 00:40:38,670 --> 00:40:41,760 a little hint to me that says where Harvard University has apparently 839 00:40:41,760 --> 00:40:43,260 moved to on the web. 840 00:40:43,260 --> 00:40:47,090 And what's different about this URL, just to be clear? 841 00:40:47,090 --> 00:40:48,760 It has the S included. 842 00:40:48,760 --> 00:40:50,830 And what your browser will do by default, 843 00:40:50,830 --> 00:40:54,430 because Google and Microsoft and Mozilla programmed it this way, 844 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. 845 00:40:59,770 --> 00:41:03,070 It will look for a location header, find that URL, 846 00:41:03,070 --> 00:41:06,250 and then automatically quote unquote "redirect" you there too. 847 00:41:06,250 --> 00:41:09,310 So this is why it doesn't matter what we type in the browser. 848 00:41:09,310 --> 00:41:13,450 Harvard can have its servers send these semi secret messages to our browsers, 849 00:41:13,450 --> 00:41:16,810 and then it will just visit a second URL all automatically. 850 00:41:16,810 --> 00:41:19,580 And you can do this with hostnames as well. 851 00:41:19,580 --> 00:41:24,230 Suppose that Harvard does not want to standardize on harvard.edu. 852 00:41:24,230 --> 00:41:24,730 Why? 853 00:41:24,730 --> 00:41:26,680 They just want it to always be www. 854 00:41:26,680 --> 00:41:27,860 Maybe it's a branding thing. 855 00:41:27,860 --> 00:41:29,068 Maybe it's a technical thing. 856 00:41:29,068 --> 00:41:32,020 We can see the exact same response here. 857 00:41:32,020 --> 00:41:37,830 This first tells me when I visit HTTP harvard.edu with no www, 858 00:41:37,830 --> 00:41:41,140 Harvard minimally wants me to be using a secure connection. 859 00:41:41,140 --> 00:41:45,710 If I then, OK fine, cooperate, let me go ahead and clear my screen. 860 00:41:45,710 --> 00:41:48,190 Let me add the S but not the www. 861 00:41:48,190 --> 00:41:52,480 You can see here that it again responded with 301 up here. 862 00:41:52,480 --> 00:41:55,510 And the location now adds the www. 863 00:41:55,510 --> 00:41:59,180 So it's just a way of bouncing users from one place to another. 864 00:41:59,180 --> 00:42:04,330 And this is all thanks to HTTP boiling down to relatively simple messages 865 00:42:04,330 --> 00:42:09,700 inside of the envelope that tell the computer, the browser in this case, how 866 00:42:09,700 --> 00:42:10,790 to respond. 867 00:42:10,790 --> 00:42:14,182 Now, odds are you've seen others besides 301 868 00:42:14,182 --> 00:42:17,140 even though you've probably never seen that actual number unless you've 869 00:42:17,140 --> 00:42:18,520 done this kind of thing before. 870 00:42:18,520 --> 00:42:21,100 But there probably is a number that everyone in this room 871 00:42:21,100 --> 00:42:24,520 has seen even if you never really wondered why is it that number. 872 00:42:24,520 --> 00:42:25,490 I think you're smiling. 873 00:42:25,490 --> 00:42:27,530 What number are you thinking of? 874 00:42:27,530 --> 00:42:29,240 Yeah, so 404. 875 00:42:29,240 --> 00:42:30,380 Why is 404? 876 00:42:30,380 --> 00:42:33,620 Well, 404 indicates by convention not found. 877 00:42:33,620 --> 00:42:36,770 And now why the world decided years ago to show us 878 00:42:36,770 --> 00:42:41,810 normal humans on the internet 404 is anything significant is unclear. 879 00:42:41,810 --> 00:42:43,100 That's sort of bad design. 880 00:42:43,100 --> 00:42:45,830 What do I care if the status code is 404? 881 00:42:45,830 --> 00:42:49,190 But it's common enough on the internet that probably all of us have seen it. 882 00:42:49,190 --> 00:42:53,870 But that just means that some server when you visit a URL that's incorrect, 883 00:42:53,870 --> 00:42:58,310 maybe it's outdated, the URL has been changed, if you see a 404, 884 00:42:58,310 --> 00:43:01,100 it just means that the virtual envelope that came from the server 885 00:43:01,100 --> 00:43:04,730 back to your Mac or PC or phone contains not 200 OK, 886 00:43:04,730 --> 00:43:09,030 not 301 moved permanently, but 404 not found instead. 887 00:43:09,030 --> 00:43:12,020 And it's usually accompanied by a technical message, maybe a cute 888 00:43:12,020 --> 00:43:14,632 picture of a cat sort of hiding because it means not found 889 00:43:14,632 --> 00:43:15,590 or something like that. 890 00:43:15,590 --> 00:43:18,050 The aesthetics are entirely up to the server. 891 00:43:18,050 --> 00:43:19,910 But that's what the 404 means. 892 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 893 00:43:23,300 --> 00:43:25,910 as we transition from command line programs in C 894 00:43:25,910 --> 00:43:28,100 in Python to web based ones. 895 00:43:28,100 --> 00:43:29,640 We've seen a few of these already. 896 00:43:29,640 --> 00:43:33,800 And several of them are kind of variants of the same thing, like these 300 ones 897 00:43:33,800 --> 00:43:34,490 here. 898 00:43:34,490 --> 00:43:35,480 But we'll see others. 899 00:43:35,480 --> 00:43:39,770 Like 403 forbidden means you probably forgot to log in 900 00:43:39,770 --> 00:43:42,740 or you need to log in or something like that. 901 00:43:42,740 --> 00:43:44,120 Internal server error. 902 00:43:44,120 --> 00:43:48,410 Right now know in the coming weeks you will absolutely encounter 500 errors 903 00:43:48,410 --> 00:43:50,420 and they're always your fault. It's going 904 00:43:50,420 --> 00:43:53,345 to be the equivalent of a segmentation fault in C. 905 00:43:53,345 --> 00:43:56,975 A 500 error means you or I screwed up when writing some code. 906 00:43:56,975 --> 00:43:58,100 So we're going to see that. 907 00:43:58,100 --> 00:44:00,517 But it's just going to be an opportunity for us to fix it. 908 00:44:00,517 --> 00:44:03,560 If a server is overloaded, you often see 503, 909 00:44:03,560 --> 00:44:07,470 like something's unavailable because something's too popular or is, 910 00:44:07,470 --> 00:44:08,930 maybe worse, getting attacked. 911 00:44:08,930 --> 00:44:12,170 This is an old April Fool's joke. 912 00:44:12,170 --> 00:44:15,170 418 is not actually used in practice, but someone took the time 913 00:44:15,170 --> 00:44:18,470 to write up an entire formal technical proposal so that servers 914 00:44:18,470 --> 00:44:19,910 can respond saying I'm a teapot. 915 00:44:19,910 --> 00:44:21,530 So it's kind of part of internet lore. 916 00:44:21,530 --> 00:44:24,660 And there's other ones of these status codes as well. 917 00:44:24,660 --> 00:44:26,660 But this is useful, because eventually we'll 918 00:44:26,660 --> 00:44:30,290 see in code you can use this understanding, 919 00:44:30,290 --> 00:44:35,160 high level as it might be, of HTTP to do some interesting and powerful things. 920 00:44:35,160 --> 00:44:40,040 So for instance, we can even send fancier URLs to servers. 921 00:44:40,040 --> 00:44:43,850 It turns out, as we'll soon see, if you send a message like this, 922 00:44:43,850 --> 00:44:52,070 get/search?q=cats and then HTTP 1.1 or whatever version and you send that 923 00:44:52,070 --> 00:44:55,490 message to Google server, www.google.com, 924 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, 925 00:45:00,350 --> 00:45:02,010 /search in this case. 926 00:45:02,010 --> 00:45:06,050 The question mark it turns out is going to be a convention in the internet, 927 00:45:06,050 --> 00:45:12,210 in the web specifically, for passing human user input to the server as well. 928 00:45:12,210 --> 00:45:15,050 In fact, you've probably never paid close attention to URLs, 929 00:45:15,050 --> 00:45:17,060 but they very often have question marks. 930 00:45:17,060 --> 00:45:18,950 They very often have equal signs. 931 00:45:18,950 --> 00:45:24,230 And indeed, even google.com supports a certain key, q in this case for query, 932 00:45:24,230 --> 00:45:26,780 and you can put anything you want after that in order 933 00:45:26,780 --> 00:45:28,740 to search for actual cats. 934 00:45:28,740 --> 00:45:34,430 So if I actually go back to Chrome itself here for a moment, let me 935 00:45:34,430 --> 00:45:37,880 pull back open my Chrome browser here, previously 936 00:45:37,880 --> 00:45:40,552 I was using incognito mode for harvard.edu. 937 00:45:40,552 --> 00:45:43,010 I've gone ahead and closed that window and opened a new one 938 00:45:43,010 --> 00:45:45,050 so we can start fresh by visiting Google. 939 00:45:45,050 --> 00:45:47,540 Normally you and I are in the habit of going to google.com 940 00:45:47,540 --> 00:45:48,950 and searching via the form. 941 00:45:48,950 --> 00:45:51,080 Or nowadays you just type your search query 942 00:45:51,080 --> 00:45:53,900 in the browser itself and it brings you automatically 943 00:45:53,900 --> 00:45:55,850 to Google or Bing or something else. 944 00:45:55,850 --> 00:45:57,570 But I can really be pedantic here. 945 00:45:57,570 --> 00:45:59,600 Let me go ahead and zoom in and I'll manually 946 00:45:59,600 --> 00:46:07,938 go to https://www.google.com/search?q= maybe cats. 947 00:46:07,938 --> 00:46:10,730 Now, this would not be a very user friendly experience if all of us 948 00:46:10,730 --> 00:46:13,140 had to manually type out something crazy like that. 949 00:46:13,140 --> 00:46:16,220 But that's what the form is redirecting you 950 00:46:16,220 --> 00:46:20,430 to when you type in more user friendly cats into a text box. 951 00:46:20,430 --> 00:46:24,500 If I hit Enter here, we'll get back indeed a whole bunch of search results 952 00:46:24,500 --> 00:46:25,430 about cats. 953 00:46:25,430 --> 00:46:29,150 If I zoom back in and maybe I change it from cats to dogs, 954 00:46:29,150 --> 00:46:30,500 that too is going to change. 955 00:46:30,500 --> 00:46:33,920 And notice it's prepopulating the text box because Google has written 956 00:46:33,920 --> 00:46:37,200 its code in order to do so as well. 957 00:46:37,200 --> 00:46:41,390 Now, apropos of the video with which we began today 958 00:46:41,390 --> 00:46:45,680 from yesteryear, one of the better Yale pranks over the years, 959 00:46:45,680 --> 00:46:51,350 has anyone actually ever been to safetyschool.org? 960 00:46:51,350 --> 00:46:54,020 And to our friends at Yale watching live, hi. 961 00:46:54,020 --> 00:46:55,520 Safetyschool.org. 962 00:46:55,520 --> 00:47:00,720 So it's kind of fun if you actually visit it depending on who you are. 963 00:47:00,720 --> 00:47:02,700 So if I open up a new window here. 964 00:47:02,700 --> 00:47:12,680 And I go to http://safetyschool.org, zooming in, Enter, my oh my. 965 00:47:12,680 --> 00:47:14,330 Look at where it goes. 966 00:47:14,330 --> 00:47:15,950 Now, how does that-- 967 00:47:15,950 --> 00:47:18,345 [APPLAUSE] 968 00:47:18,345 --> 00:47:20,740 969 00:47:20,740 --> 00:47:22,180 This is not a CS50 thing. 970 00:47:22,180 --> 00:47:25,780 Someone out there who I don't know who they are for 20 years 971 00:47:25,780 --> 00:47:29,290 has been paying annually for that domain, safetyschool.org, 972 00:47:29,290 --> 00:47:31,090 for just this joke. 973 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 974 00:47:36,580 --> 00:47:42,640 sophisticatedly let me do curl -i http://safetyschool.org, 975 00:47:42,640 --> 00:47:45,413 the browser of course immediately redirected me to the website. 976 00:47:45,413 --> 00:47:47,080 But what's going on underneath the hood? 977 00:47:47,080 --> 00:47:50,410 Well, 20 some years ago, someone bought the domain, configured the server 978 00:47:50,410 --> 00:47:53,020 quite simply to spit this out. 979 00:47:53,020 --> 00:47:59,980 Safetyschool.org for years has moved permanently to www.yale.edu. 980 00:47:59,980 --> 00:48:01,990 So just a little demonstration of what you can 981 00:48:01,990 --> 00:48:04,720 do with just a little bit of understanding of HTTP. 982 00:48:04,720 --> 00:48:05,830 That's been a lot already. 983 00:48:05,830 --> 00:48:08,622 We've laid the foundation for understanding how the internet works. 984 00:48:08,622 --> 00:48:11,740 Now we're going to use it with a language called HTML, Hypertext Markup 985 00:48:11,740 --> 00:48:16,390 Language, CSS, Cascading Style Sheets, and JavaScript, a proper programming 986 00:48:16,390 --> 00:48:16,900 language. 987 00:48:16,900 --> 00:48:19,228 But first it feels opportune to take a 10 minute break. 988 00:48:19,228 --> 00:48:21,520 We have some wonderful Halloween candy in the transept, 989 00:48:21,520 --> 00:48:24,444 and we'll be back and 10 with those languages. 990 00:48:24,444 --> 00:48:25,770 [VIDEO PLAYBACK] 991 00:48:25,770 --> 00:48:30,900 - We're headed up to Boston, checking out the stadium for the prank. 992 00:48:30,900 --> 00:48:33,780 993 00:48:33,780 --> 00:48:36,150 A few years ago, I was at a math conference 994 00:48:36,150 --> 00:48:40,800 and I was sitting around the table at dinner with a few other mathematicians. 995 00:48:40,800 --> 00:48:44,580 And one of them went to Harvard and started 996 00:48:44,580 --> 00:48:49,500 telling the story of this amazing prank that was against Harvard. 997 00:48:49,500 --> 00:48:52,050 And at that point, I felt I had to interrupt 998 00:48:52,050 --> 00:48:56,670 and said, well, actually I can tell you a lot more about that. 999 00:48:56,670 --> 00:48:57,450 OK. 1000 00:48:57,450 --> 00:48:59,800 - The idea was perfected in a dorm room. 1001 00:48:59,800 --> 00:49:02,160 - We came up with the idea actually to prank them 1002 00:49:02,160 --> 00:49:03,880 with signs of the football game. 1003 00:49:03,880 --> 00:49:07,470 We threw some ideas out there as far as what the signs would say. 1004 00:49:07,470 --> 00:49:09,990 We eventually settled on we suck. 1005 00:49:09,990 --> 00:49:13,270 - And my immediate reaction was, no, this will never work. 1006 00:49:13,270 --> 00:49:17,370 However, the problem solver in me started thinking, well, maybe we 1007 00:49:17,370 --> 00:49:20,000 can make this work. 1008 00:49:20,000 --> 00:49:21,400 - The problem? 1009 00:49:21,400 --> 00:49:24,490 They had to infiltrate Harvard stadium without getting caught, 1010 00:49:24,490 --> 00:49:29,320 sneaking 1,800 placards, distribute them to unsuspecting Harvard fans, 1011 00:49:29,320 --> 00:49:32,860 and then convince those fans to prank themselves. 1012 00:49:32,860 --> 00:49:33,640 - It's great. 1013 00:49:33,640 --> 00:49:38,290 We thought about basically every possible thing that could go wrong 1014 00:49:38,290 --> 00:49:40,730 and tried to come up with a solution for it. 1015 00:49:40,730 --> 00:49:43,490 - And then you put two reds on top of it. 1016 00:49:43,490 --> 00:49:49,210 - They made fake Harvard IDs and fake backstories, fake placard designs, 1017 00:49:49,210 --> 00:49:52,870 and a 28 member fake pep squad. 1018 00:49:52,870 --> 00:49:56,470 On November 20, 2004, the fake Harvard students 1019 00:49:56,470 --> 00:49:59,320 smuggled the placards into the game. 1020 00:49:59,320 --> 00:50:01,265 - What do you think of Yale, sir? 1021 00:50:01,265 --> 00:50:01,840 - They suck. 1022 00:50:01,840 --> 00:50:05,450 1023 00:50:05,450 --> 00:50:08,820 - It's not going to say something like Yale sucks, is it? 1024 00:50:08,820 --> 00:50:12,170 - It says go Harvard. 1025 00:50:12,170 --> 00:50:14,560 - But then trouble. 1026 00:50:14,560 --> 00:50:16,870 - What houses are you guys in? 1027 00:50:16,870 --> 00:50:18,220 That's not a real house. 1028 00:50:18,220 --> 00:50:19,592 - Ho-fo? 1029 00:50:19,592 --> 00:50:20,930 - Yeah. 1030 00:50:20,930 --> 00:50:23,408 You guys aren't from Harvard, are you? 1031 00:50:23,408 --> 00:50:26,450 Can I see your Harvard ID, because I really think you guys are from Yale. 1032 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 1033 00:50:30,230 --> 00:50:32,960 and he felt so embarrassed. 1034 00:50:32,960 --> 00:50:37,040 - Having escaped one confrontation, they couldn't risk another. 1035 00:50:37,040 --> 00:50:39,080 It was time. 1036 00:50:39,080 --> 00:50:41,400 - This just looks like a total mess. 1037 00:50:41,400 --> 00:50:44,225 We have absolutely no idea if this is going to work. 1038 00:50:44,225 --> 00:50:44,850 - Look at them. 1039 00:50:44,850 --> 00:50:45,812 They have the paper. 1040 00:50:45,812 --> 00:50:46,774 It's gonna happen. 1041 00:50:46,774 --> 00:50:49,660 It's actually gonna happen. 1042 00:50:49,660 --> 00:50:51,700 I can't [BLEEP] believe this. 1043 00:50:51,700 --> 00:50:56,704 - What was once a prank became a legend. 1044 00:50:56,704 --> 00:50:58,636 - We [BLEEP] did it. 1045 00:50:58,636 --> 00:51:02,030 [BLEEP] 1046 00:51:02,030 --> 00:51:05,470 - And immediately we started hearing chants from the other side. 1047 00:51:05,470 --> 00:51:06,110 You suck. 1048 00:51:06,110 --> 00:51:09,210 - You suck, you suck, you suck. 1049 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. 1050 00:51:12,938 --> 00:51:14,402 - One more time. 1051 00:51:14,402 --> 00:51:16,354 Come on, Harvard. 1052 00:51:16,354 --> 00:51:19,282 - There it comes again. 1053 00:51:19,282 --> 00:51:21,730 [CHEERING] 1054 00:51:21,730 --> 00:51:25,690 - I really think it didn't matter that Harvard won because of the prank. 1055 00:51:25,690 --> 00:51:29,845 For a lot of Yale students and alumni, we definitely won that year. 1056 00:51:29,845 --> 00:51:35,944 1057 00:51:35,944 --> 00:51:38,379 [END PLAYBACK] 1058 00:51:38,379 --> 00:51:44,240 1059 00:51:44,240 --> 00:51:45,730 ALL: All right. 1060 00:51:45,730 --> 00:51:48,370 This is CS50. 1061 00:51:48,370 --> 00:51:49,610 Happy Halloween. 1062 00:51:49,610 --> 00:51:50,870 [LAUGHS] 1063 00:51:50,870 --> 00:51:52,655 [APPLAUSE] 1064 00:51:52,655 --> 00:51:53,780 DAVID MALAN: Thank you all. 1065 00:51:53,780 --> 00:51:55,330 OK, thank you. 1066 00:51:55,330 --> 00:51:56,380 Oh, here. 1067 00:51:56,380 --> 00:51:57,540 Oh, all right. 1068 00:51:57,540 --> 00:51:58,780 A little Halloween candy. 1069 00:51:58,780 --> 00:51:59,620 All right. 1070 00:51:59,620 --> 00:52:00,980 Thank you all. 1071 00:52:00,980 --> 00:52:04,370 So glad I wore the same thing today. 1072 00:52:04,370 --> 00:52:09,940 So in just a moment-- 1073 00:52:09,940 --> 00:52:10,610 thank you. 1074 00:52:10,610 --> 00:52:11,110 OK. 1075 00:52:11,110 --> 00:52:15,430 So in just a moment, we'll transition to understanding 1076 00:52:15,430 --> 00:52:18,620 all the more now what we can do with this underlying infrastructure. 1077 00:52:18,620 --> 00:52:22,450 So again, HTTP and below it TCP/IP is all about just 1078 00:52:22,450 --> 00:52:25,810 getting the data from point A to point B in some standardized way. 1079 00:52:25,810 --> 00:52:27,370 But now let's talk about HTML. 1080 00:52:27,370 --> 00:52:30,910 This is the language in which web pages themselves are written. 1081 00:52:30,910 --> 00:52:32,468 Hypertext Markup Language. 1082 00:52:32,468 --> 00:52:35,510 Now, some of you might have used this before to make personal home pages. 1083 00:52:35,510 --> 00:52:37,990 Some of you might have dabbled even if using some website 1084 00:52:37,990 --> 00:52:39,310 to create your own home page. 1085 00:52:39,310 --> 00:52:42,640 But understanding this language is useful certainly 1086 00:52:42,640 --> 00:52:46,660 for creating the aesthetics of a web page, conveying data that's 1087 00:52:46,660 --> 00:52:47,270 of interest. 1088 00:52:47,270 --> 00:52:51,970 But at the end of the day, it and the language we look at next, CSS, 1089 00:52:51,970 --> 00:52:53,470 are not programming languages. 1090 00:52:53,470 --> 00:52:57,640 There's going to be no functions, no loops, no programming logic. 1091 00:52:57,640 --> 00:53:00,820 But we will end today with a teaser of a proper programming language called 1092 00:53:00,820 --> 00:53:05,770 JavaScript via which you can manipulate all of these various other languages 1093 00:53:05,770 --> 00:53:06,440 as well. 1094 00:53:06,440 --> 00:53:09,110 So ultimately HTML has two features. 1095 00:53:09,110 --> 00:53:12,070 And this is a language that we spend very brief amount of time 1096 00:53:12,070 --> 00:53:15,280 on because it really boils down to just a couple of basic ideas 1097 00:53:15,280 --> 00:53:17,770 and then vocabulary that you'll build out over time 1098 00:53:17,770 --> 00:53:21,040 just by Googling, looking up references, looking at other pages' source code. 1099 00:53:21,040 --> 00:53:24,220 But tags and attributes are what characterize HTML. 1100 00:53:24,220 --> 00:53:25,490 Now, what do I mean by that? 1101 00:53:25,490 --> 00:53:28,750 Here, for instance, is the HTML code via which 1102 00:53:28,750 --> 00:53:31,450 you can make probably the simplest of all web pages, one 1103 00:53:31,450 --> 00:53:36,760 that quite simply says in the browser window, hello title and hello body, 1104 00:53:36,760 --> 00:53:37,570 for instance. 1105 00:53:37,570 --> 00:53:39,170 Now, what does this actually mean? 1106 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, 1107 00:53:44,800 --> 00:53:47,140 you'll see typically some kind of rectangular window. 1108 00:53:47,140 --> 00:53:49,810 And there's usually a tab that has the title of that page. 1109 00:53:49,810 --> 00:53:52,933 And then most of the rectangular region is the web page itself. 1110 00:53:52,933 --> 00:53:54,850 What you're looking at then is the code that's 1111 00:53:54,850 --> 00:53:58,600 going to put hello title in the title bar, in the tab at the very top. 1112 00:53:58,600 --> 00:54:00,760 And down at the bottom, hello body is going 1113 00:54:00,760 --> 00:54:04,330 to be all that's in the big black and white box that composes 1114 00:54:04,330 --> 00:54:06,223 the rest of the browser window itself. 1115 00:54:06,223 --> 00:54:08,140 Now, what are the salient characteristics here 1116 00:54:08,140 --> 00:54:09,848 that we'll now start to take for granted? 1117 00:54:09,848 --> 00:54:17,170 Well, first, whoops, first let's go ahead and, give me just a moment here, 1118 00:54:17,170 --> 00:54:19,160 and actually do something with this code. 1119 00:54:19,160 --> 00:54:20,702 So I'm going to go ahead and do this. 1120 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. 1121 00:54:25,990 --> 00:54:28,990 And in this tab, I'm going to go ahead and really repeat 1122 00:54:28,990 --> 00:54:30,560 exactly that same code. 1123 00:54:30,560 --> 00:54:33,190 Now, I had this line first, doc type HTML. 1124 00:54:33,190 --> 00:54:38,110 Then I had this line, HTML lang equals quote unquote en close quote. 1125 00:54:38,110 --> 00:54:41,470 Then I had inside of that head, then I had inside of that title, 1126 00:54:41,470 --> 00:54:43,053 then inside of that I had hello title. 1127 00:54:43,053 --> 00:54:45,220 And I'm doing this quickly because we'll tease apart 1128 00:54:45,220 --> 00:54:47,080 in a moment what it actually all means. 1129 00:54:47,080 --> 00:54:53,210 And then down here below that so called head, I had just the text hello body. 1130 00:54:53,210 --> 00:54:57,070 So at the moment, that I claim is the entirety of a web page. 1131 00:54:57,070 --> 00:54:59,830 But it currently lives in my code space, so to speak, 1132 00:54:59,830 --> 00:55:02,050 in a file called hello.html. 1133 00:55:02,050 --> 00:55:03,940 That's fine if I want to create it. 1134 00:55:03,940 --> 00:55:06,580 But how do I, how do you, how does anyone on the internet 1135 00:55:06,580 --> 00:55:07,610 actually view it? 1136 00:55:07,610 --> 00:55:11,260 Well, to serve a web page, you indeed need a web server. 1137 00:55:11,260 --> 00:55:14,500 And it turns out that Codespaces comes with one of these pre-installed 1138 00:55:14,500 --> 00:55:17,680 because we CS50 staff did so for you. 1139 00:55:17,680 --> 00:55:20,200 And what you can do in a terminal window once you 1140 00:55:20,200 --> 00:55:24,250 have an HTML file ready to go that you want the world to see, 1141 00:55:24,250 --> 00:55:28,450 you can literally run in your terminal window http-server. 1142 00:55:28,450 --> 00:55:29,530 Single command. 1143 00:55:29,530 --> 00:55:32,860 And what that's going to do for you is start a web server. 1144 00:55:32,860 --> 00:55:37,300 That is to say, a program whose purpose in life is just to serve web pages. 1145 00:55:37,300 --> 00:55:40,420 And even though probably up until now for years you probably, 1146 00:55:40,420 --> 00:55:44,230 if you're like me, equate "server" quote unquote with a physical device. 1147 00:55:44,230 --> 00:55:46,360 Server is really a piece of software. 1148 00:55:46,360 --> 00:55:48,890 It just tends to run on big fancy devices. 1149 00:55:48,890 --> 00:55:50,860 So when we say server, we often all think 1150 00:55:50,860 --> 00:55:54,220 of in our minds eye big, expensive devices, perhaps. 1151 00:55:54,220 --> 00:55:56,650 But a server is just a program whose purpose in life 1152 00:55:56,650 --> 00:56:00,080 is to respond to requests with responses. 1153 00:56:00,080 --> 00:56:01,600 And that's the vernacular there. 1154 00:56:01,600 --> 00:56:04,593 Now, once you run HTTP server, and I'm going to do a bit of magic 1155 00:56:04,593 --> 00:56:07,510 because I set this up before class just to make sure it goes smoothly, 1156 00:56:07,510 --> 00:56:11,950 you'll see some output like this whereby your server is now 1157 00:56:11,950 --> 00:56:14,800 available on a very long URL. 1158 00:56:14,800 --> 00:56:18,910 Mine here is a very long URL that will be different from yours. 1159 00:56:18,910 --> 00:56:22,570 But what this is is a unique identifier that your Codespace has temporarily 1160 00:56:22,570 --> 00:56:25,750 generated so that you can now access and ideally 1161 00:56:25,750 --> 00:56:29,620 only you can access that file using your browser. 1162 00:56:29,620 --> 00:56:33,040 Now, if I flip the URL or you flip the URL to public by right clicking 1163 00:56:33,040 --> 00:56:35,380 or control clicking the right features of VS Code, 1164 00:56:35,380 --> 00:56:37,570 you can enable anyone in the world to visit it. 1165 00:56:37,570 --> 00:56:40,810 But we're not going to ultimately host our websites in your Codespace, 1166 00:56:40,810 --> 00:56:43,870 because as soon as you log off for the night and the thing shuts down, 1167 00:56:43,870 --> 00:56:45,080 the website will go down. 1168 00:56:45,080 --> 00:56:47,840 But at the end of the semester, particularly for final projects, 1169 00:56:47,840 --> 00:56:51,350 we'll show you ways that you can put your own website, your own code 1170 00:56:51,350 --> 00:56:55,820 on the actual internet 24/7, 365 even with your own domain name 1171 00:56:55,820 --> 00:57:00,710 if you want to get one so that it lives independent of your own sleep schedule 1172 00:57:00,710 --> 00:57:02,850 and usage schedule a VS Code here. 1173 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. 1174 00:57:08,600 --> 00:57:10,540 And what I'll see here is this. 1175 00:57:10,540 --> 00:57:14,180 This is the output of that program called HTTP server. 1176 00:57:14,180 --> 00:57:18,860 And essentially what it is doing is it's using TCP and IP in conjunction 1177 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. 1178 00:57:25,047 --> 00:57:26,630 And that's because of different ports. 1179 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 1180 00:57:29,840 --> 00:57:30,590 of that stuff. 1181 00:57:30,590 --> 00:57:33,260 But recall that different port numbers can 1182 00:57:33,260 --> 00:57:35,540 allow you to distinguish one service from another. 1183 00:57:35,540 --> 00:57:39,470 Now, one of the services is, of course, your Codespace, VS Code in the cloud 1184 00:57:39,470 --> 00:57:40,920 that we've been using for weeks. 1185 00:57:40,920 --> 00:57:44,360 But if you want to use the same physical server that GitHub controls 1186 00:57:44,360 --> 00:57:49,130 but actually visit your own web server that I just ran in my terminal window 1187 00:57:49,130 --> 00:57:50,635 in another tab, that's fine. 1188 00:57:50,635 --> 00:57:52,760 They're just going to be using different TCP ports. 1189 00:57:52,760 --> 00:57:55,468 And you and I don't have to care what they are but just that this 1190 00:57:55,468 --> 00:57:57,260 is a feature that TCP supports. 1191 00:57:57,260 --> 00:57:59,090 So what you see here is somewhat arcane. 1192 00:57:59,090 --> 00:58:02,750 This is not a thing that most people on the internet should ever see. 1193 00:58:02,750 --> 00:58:04,700 I'm just doing this for development purposes. 1194 00:58:04,700 --> 00:58:05,780 But this is the index. 1195 00:58:05,780 --> 00:58:09,860 That is the directory, the folder contents of my Codespace, 1196 00:58:09,860 --> 00:58:12,620 and because I deleted everything from prior weeks already, 1197 00:58:12,620 --> 00:58:16,620 all we see right now is hello.html, which I just created. 1198 00:58:16,620 --> 00:58:21,337 So if I click on hello.html within this folder listing, 1199 00:58:21,337 --> 00:58:22,670 you'll be a little underwhelmed. 1200 00:58:22,670 --> 00:58:25,420 And I'll zoom in just so there's something more interesting there. 1201 00:58:25,420 --> 00:58:28,340 But now you see hello comma body. 1202 00:58:28,340 --> 00:58:31,490 But what's interesting, perhaps, is that after this long, 1203 00:58:31,490 --> 00:58:35,580 very cryptic and uninteresting URL, notice at the very end of it, 1204 00:58:35,580 --> 00:58:40,190 and I'll zoom in in a moment, what do you see? /hello.html. 1205 00:58:40,190 --> 00:58:43,040 Which follows the convention I claimed before break 1206 00:58:43,040 --> 00:58:48,290 is how a browser would allow you to access a specific file on a server 1207 00:58:48,290 --> 00:58:51,110 by doing slash and then the name of the file name. 1208 00:58:51,110 --> 00:58:52,880 Everything before it is very cryptic. 1209 00:58:52,880 --> 00:58:55,730 It would be better if I buy a domain name that's 1210 00:58:55,730 --> 00:58:58,800 a little more easy to remember and set that up some other time. 1211 00:58:58,800 --> 00:59:01,100 But for now, let's just focus on only the file names 1212 00:59:01,100 --> 00:59:03,200 that I'm actually creating. 1213 00:59:03,200 --> 00:59:03,920 All right. 1214 00:59:03,920 --> 00:59:06,740 So the code is up and running, underwhelming 1215 00:59:06,740 --> 00:59:09,860 though it might be with the body in the middle of the page. 1216 00:59:09,860 --> 00:59:11,450 And let me zoom in up here too. 1217 00:59:11,450 --> 00:59:14,940 Hello comma title is indeed in the tab, just as promised. 1218 00:59:14,940 --> 00:59:18,660 So what's actually going on with code like this that we just created? 1219 00:59:18,660 --> 00:59:20,940 Well, let's go back to the slide version of the same. 1220 00:59:20,940 --> 00:59:23,000 And let me just highlight a few of these lines. 1221 00:59:23,000 --> 00:59:26,695 The very first line is what's called your document type declaration. 1222 00:59:26,695 --> 00:59:28,820 Doesn't really matter to remember that by phrasing. 1223 00:59:28,820 --> 00:59:32,180 And this is just something you copy paste or do from memory at the top 1224 00:59:32,180 --> 00:59:36,200 of any .html file that you create when making your own web page. 1225 00:59:36,200 --> 00:59:39,500 It's a implicit indicator to the browser that you're 1226 00:59:39,500 --> 00:59:42,830 using the very latest version of HTML, which is version 5. 1227 00:59:42,830 --> 00:59:44,300 You don't mention the number 5. 1228 00:59:44,300 --> 00:59:46,730 Just browsers nowadays are programmed look for this 1229 00:59:46,730 --> 00:59:49,540 to know that you're using the very latest version of the language. 1230 00:59:49,540 --> 00:59:53,180 Languages, just like human languages, evolve over time. 1231 00:59:53,180 --> 00:59:56,880 We're up to version 5 of HTML, but new features get added every few years. 1232 00:59:56,880 --> 01:00:00,110 So indeed, this lecture, this class has been evolving over time too. 1233 01:00:00,110 --> 01:00:03,960 So let's now focus on the next line as well as the bottom line. 1234 01:00:03,960 --> 01:00:06,290 And you'll notice some deliberate symmetry here. 1235 01:00:06,290 --> 01:00:08,810 This here is what we're going to call a tag. 1236 01:00:08,810 --> 01:00:10,580 And it's technically different from this. 1237 01:00:10,580 --> 01:00:11,750 This is a document type declaration. 1238 01:00:11,750 --> 01:00:13,070 It's got the weird exclamation point. 1239 01:00:13,070 --> 01:00:14,180 That's the only anomaly. 1240 01:00:14,180 --> 01:00:15,960 Everything else follows a pattern. 1241 01:00:15,960 --> 01:00:19,880 This is a tag in HTML and it's the HTML tag. 1242 01:00:19,880 --> 01:00:25,580 And a tag generally both starts and stops or opens and closes 1243 01:00:25,580 --> 01:00:26,460 at some point. 1244 01:00:26,460 --> 01:00:29,428 So this is the so called start tag or open tag. 1245 01:00:29,428 --> 01:00:31,970 And this just means essentially to the browser, hey, browser, 1246 01:00:31,970 --> 01:00:35,360 here comes some HTML, the language in which web pages are written. 1247 01:00:35,360 --> 01:00:39,590 This here with the forward slash after the angled bracket 1248 01:00:39,590 --> 01:00:42,373 means hey, browser, that's it for the HTML of this page. 1249 01:00:42,373 --> 01:00:43,790 So that's what I mean by symmetry. 1250 01:00:43,790 --> 01:00:46,310 I started a thought here, finished it down here. 1251 01:00:46,310 --> 01:00:47,900 What's in between those two thoughts? 1252 01:00:47,900 --> 01:00:51,620 Well, here browser, or rather let me clarify one thing. 1253 01:00:51,620 --> 01:00:55,580 This thing here is that other keyword, an attribute. 1254 01:00:55,580 --> 01:00:59,240 An attribute is something that modifies the behavior of a tag. 1255 01:00:59,240 --> 01:01:02,390 So it's similar to an argument in C or in Python 1256 01:01:02,390 --> 01:01:04,012 like a parameter to a function. 1257 01:01:04,012 --> 01:01:05,970 These aren't functions, but it's the same idea. 1258 01:01:05,970 --> 01:01:08,900 Just modifies the default behavior of something instead. 1259 01:01:08,900 --> 01:01:10,100 Lang equals en. 1260 01:01:10,100 --> 01:01:13,640 You can probably guess just means that hey, browser, assume that everything 1261 01:01:13,640 --> 01:01:15,080 hereafter is in English. 1262 01:01:15,080 --> 01:01:18,530 And that might be useful for Google Translate or just search engine 1263 01:01:18,530 --> 01:01:20,750 optimization so that just the server, the browser 1264 01:01:20,750 --> 01:01:23,960 know what human language you have actual content in. 1265 01:01:23,960 --> 01:01:27,110 Like hello title, hello body, even though a good computer can probably 1266 01:01:27,110 --> 01:01:29,180 infer from context often. 1267 01:01:29,180 --> 01:01:30,800 All right, so that's an attribute. 1268 01:01:30,800 --> 01:01:31,970 That's a tag. 1269 01:01:31,970 --> 01:01:36,320 And the whole thing here, everything in between the start tag and end tag, 1270 01:01:36,320 --> 01:01:38,600 we would also call an HTML element. 1271 01:01:38,600 --> 01:01:42,980 That just means everything related to that open and close tag. 1272 01:01:42,980 --> 01:01:43,490 All right. 1273 01:01:43,490 --> 01:01:46,340 Now notice indented inside of, so to speak, 1274 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 1275 01:01:51,750 --> 01:01:55,530 tag or the head element collectively and the body element collectively. 1276 01:01:55,530 --> 01:01:56,280 And same idea. 1277 01:01:56,280 --> 01:01:58,180 Hey browser, here comes the head of my page. 1278 01:01:58,180 --> 01:01:59,550 Hey browser, that's it for the head. 1279 01:01:59,550 --> 01:02:01,420 Hey browser, here comes the body of my page. 1280 01:02:01,420 --> 01:02:03,300 Hey browser, that's it for the body. 1281 01:02:03,300 --> 01:02:06,940 The head is essentially the tiny little strip at the very top, 1282 01:02:06,940 --> 01:02:08,700 including the tab itself. 1283 01:02:08,700 --> 01:02:13,110 The body is like 95% of everything else, the big rectangular region. 1284 01:02:13,110 --> 01:02:16,830 What's inside of your title, of your head of the web page? 1285 01:02:16,830 --> 01:02:18,510 At the moment, just the title. 1286 01:02:18,510 --> 01:02:21,120 So this indicates, hey browser, here comes my title. 1287 01:02:21,120 --> 01:02:22,890 Hey browser, that's it for the title. 1288 01:02:22,890 --> 01:02:26,910 The title of course, is literally quote unquote "hello comma title." 1289 01:02:26,910 --> 01:02:31,800 Meanwhile if we bounce back out here is the second element inside 1290 01:02:31,800 --> 01:02:33,357 of the HTML tag. 1291 01:02:33,357 --> 01:02:35,190 This says, hey browser, here comes the body. 1292 01:02:35,190 --> 01:02:36,690 Hey browser, that's it for the body. 1293 01:02:36,690 --> 01:02:38,700 And hey browser, this is the contents, these 1294 01:02:38,700 --> 01:02:40,840 are the contents of the body itself. 1295 01:02:40,840 --> 01:02:43,200 Now, the indentation is a stylistic thing. 1296 01:02:43,200 --> 01:02:45,870 I did it just to be sort of neat and tidy because it 1297 01:02:45,870 --> 01:02:48,240 suggests what is inside of what. 1298 01:02:48,240 --> 01:02:50,850 But it also suggests a sort of hierarchy. 1299 01:02:50,850 --> 01:02:54,540 And in fact, we'll use terminology from the world of family trees. 1300 01:02:54,540 --> 01:02:59,130 If this is a parent, so to speak, head and body 1301 01:02:59,130 --> 01:03:02,370 would be the child elements of the HTML tag. 1302 01:03:02,370 --> 01:03:05,640 Meanwhile title is a child of the head tag. 1303 01:03:05,640 --> 01:03:08,700 Or equivalently, title is a grandchild of HTML. 1304 01:03:08,700 --> 01:03:10,830 So you can use the same sort of vernacular 1305 01:03:10,830 --> 01:03:14,550 as in the human world when it comes to familial relationships too. 1306 01:03:14,550 --> 01:03:17,260 And that just hints at, again, this same hierarchy. 1307 01:03:17,260 --> 01:03:22,200 So we have tags and they include HTML head, title, body. 1308 01:03:22,200 --> 01:03:23,490 And that's it for now. 1309 01:03:23,490 --> 01:03:24,570 We have attributes. 1310 01:03:24,570 --> 01:03:26,850 We've seen one example of them, lang. 1311 01:03:26,850 --> 01:03:29,260 But we'll see many other examples of the same idea. 1312 01:03:29,260 --> 01:03:31,362 But these building blocks are exactly the same. 1313 01:03:31,362 --> 01:03:33,570 Generally, you start a thought, you finish a thought, 1314 01:03:33,570 --> 01:03:35,670 and you might do something in between. 1315 01:03:35,670 --> 01:03:40,900 Questions on this basic structure of any web page? 1316 01:03:40,900 --> 01:03:43,150 Any questions at all? 1317 01:03:43,150 --> 01:03:43,650 No? 1318 01:03:43,650 --> 01:03:44,150 All right. 1319 01:03:44,150 --> 01:03:47,820 So let's now allow things to ramp up a little more interestingly 1320 01:03:47,820 --> 01:03:50,100 and do something with these building blocks. 1321 01:03:50,100 --> 01:03:52,650 But so that you have a mental model for everything that's 1322 01:03:52,650 --> 01:03:55,950 going on here on after, think of this same HTML 1323 01:03:55,950 --> 01:03:58,620 being related in spirit to week five when 1324 01:03:58,620 --> 01:04:00,390 we talked all about data structures. 1325 01:04:00,390 --> 01:04:02,460 If I really wanted to, I could take to heart 1326 01:04:02,460 --> 01:04:05,640 this idea of children and parents and grandparents 1327 01:04:05,640 --> 01:04:07,740 and really depict this thing graphically. 1328 01:04:07,740 --> 01:04:11,520 And in fact, this tree here, if you will, and it's not a binary tree, 1329 01:04:11,520 --> 01:04:14,490 it's not a binary search tree, it's just a tree. 1330 01:04:14,490 --> 01:04:18,300 Using week five's terminology, if this special node here represents 1331 01:04:18,300 --> 01:04:22,590 the whole document, well the root element, as I called it, is HTML. 1332 01:04:22,590 --> 01:04:25,110 HTML has two children, head and body. 1333 01:04:25,110 --> 01:04:28,410 The head tag has in turn a title child and 1334 01:04:28,410 --> 01:04:31,470 in turn has some text, just as the body has some text. 1335 01:04:31,470 --> 01:04:33,510 And so this is what your browser is doing. 1336 01:04:33,510 --> 01:04:36,300 You and I, the programmers, write this stuff. 1337 01:04:36,300 --> 01:04:39,300 The browser reads this code top to bottom, left to right 1338 01:04:39,300 --> 01:04:40,560 whenever you visit a website. 1339 01:04:40,560 --> 01:04:45,120 And inside of the computer's memory, Chrome, Edge Firefox, Safari, whatnot, 1340 01:04:45,120 --> 01:04:48,790 they build this data structure in the computer's memory 1341 01:04:48,790 --> 01:04:51,660 so as to know what it is you have told them to do. 1342 01:04:51,660 --> 01:04:53,800 And we'll see over time at the end of today, 1343 01:04:53,800 --> 01:04:57,120 you can write code in an actual programming language, JavaScript, 1344 01:04:57,120 --> 01:05:00,450 to maybe dynamically add or remove things from this tree. 1345 01:05:00,450 --> 01:05:02,310 And this is how things like Gmail work. 1346 01:05:02,310 --> 01:05:04,200 When you open up your email inbox, if you're 1347 01:05:04,200 --> 01:05:06,670 a Gmail user, if you just stay there long enough, 1348 01:05:06,670 --> 01:05:08,430 you'll probably get more and more mail. 1349 01:05:08,430 --> 01:05:09,180 And what happens? 1350 01:05:09,180 --> 01:05:12,930 You don't have to reload the page or rebuild the tree, per se. 1351 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. 1352 01:05:16,590 --> 01:05:19,890 What's happening there is that Google wrote some code that just keeps 1353 01:05:19,890 --> 01:05:22,800 adding more nodes to this tree every time 1354 01:05:22,800 --> 01:05:25,150 they realize you've got a new message again and again. 1355 01:05:25,150 --> 01:05:29,460 So that's the relationship now even with this world of HTML, 1356 01:05:29,460 --> 01:05:33,360 with all of the programmatic ideas we looked at in the past. 1357 01:05:33,360 --> 01:05:33,880 All right. 1358 01:05:33,880 --> 01:05:35,850 So let's go ahead and do something with this 1359 01:05:35,850 --> 01:05:38,532 that's a little more interesting than just hello itself. 1360 01:05:38,532 --> 01:05:41,490 I'm going to go ahead and hide my terminal window because the server is 1361 01:05:41,490 --> 01:05:43,920 now running and all I want to do now is experiment 1362 01:05:43,920 --> 01:05:46,870 with hello and other examples as well. 1363 01:05:46,870 --> 01:05:50,820 Let me go ahead and actually before I do that, let me go ahead 1364 01:05:50,820 --> 01:05:56,140 and run code of paragraphs.html just so I can keep my code separate. 1365 01:05:56,140 --> 01:05:58,440 And now I'll hide the terminal window again. 1366 01:05:58,440 --> 01:06:00,300 Paragraphs.html. 1367 01:06:00,300 --> 01:06:02,350 I'm going to do almost exactly the same. 1368 01:06:02,350 --> 01:06:05,670 Let me go ahead and start with something familiar. 1369 01:06:05,670 --> 01:06:08,770 And eventually I'll start copying and pasting just to save time. 1370 01:06:08,770 --> 01:06:11,490 So doc type HTML is always there. 1371 01:06:11,490 --> 01:06:13,110 Open the HTML tag. 1372 01:06:13,110 --> 01:06:15,240 And now notice I didn't type the rest of that. 1373 01:06:15,240 --> 01:06:17,400 Just like with C, just like with Python, we 1374 01:06:17,400 --> 01:06:21,420 try to save you some keystrokes by closing parentheses, adding quotes. 1375 01:06:21,420 --> 01:06:24,030 The HTML support in VS Code is pretty good too 1376 01:06:24,030 --> 01:06:27,150 and it tries to finish your thought when it comes to tags as well. 1377 01:06:27,150 --> 01:06:30,377 It can screw things up if it does something you don't want it to do. 1378 01:06:30,377 --> 01:06:31,710 So sometimes you have to delete. 1379 01:06:31,710 --> 01:06:34,440 But it's just autocomplete, as we've seen before. 1380 01:06:34,440 --> 01:06:38,370 Let's go ahead and let me add lang equals en as all of my examples 1381 01:06:38,370 --> 01:06:39,300 today will be. 1382 01:06:39,300 --> 01:06:41,250 Let's add the head tag. 1383 01:06:41,250 --> 01:06:43,980 Let's go and proactively add the body tag. 1384 01:06:43,980 --> 01:06:48,690 And now let's go ahead and give this a title tag, which has a-- 1385 01:06:48,690 --> 01:06:51,900 I'll just call this paragraphs just so I remember which example is what. 1386 01:06:51,900 --> 01:06:55,830 Now notice all of this white space and all of this neat and tidy indentation 1387 01:06:55,830 --> 01:06:58,080 the browser ultimately is not going to care about. 1388 01:06:58,080 --> 01:07:00,780 This is just for us humans to kind of keep ourselves sane 1389 01:07:00,780 --> 01:07:01,860 when we look at the code. 1390 01:07:01,860 --> 01:07:03,340 It's just easier to read. 1391 01:07:03,340 --> 01:07:07,980 But strictly speaking, I could minimally delete all of this white space 1392 01:07:07,980 --> 01:07:11,130 and I could just move all of this tag up to the same line. 1393 01:07:11,130 --> 01:07:12,393 Both I think are fine. 1394 01:07:12,393 --> 01:07:14,310 I'll just kind of follow a certain convention. 1395 01:07:14,310 --> 01:07:16,830 But this too would have the exact same meaning. 1396 01:07:16,830 --> 01:07:19,080 But we'll see where that detail about white space 1397 01:07:19,080 --> 01:07:21,270 could potentially get us into trouble later. 1398 01:07:21,270 --> 01:07:23,730 In my paragraphs tag, let's do this. 1399 01:07:23,730 --> 01:07:27,240 In advance I've written up some Latin-like text, a really long 1400 01:07:27,240 --> 01:07:29,290 paragraph of Latin-like text like this. 1401 01:07:29,290 --> 01:07:30,540 It's actually random nonsense. 1402 01:07:30,540 --> 01:07:33,623 It's not real Latin even though a couple of the words might look familiar. 1403 01:07:33,623 --> 01:07:36,660 And so here we have three paragraphs of text. 1404 01:07:36,660 --> 01:07:39,070 And I've deliberately hit Enter in between them 1405 01:07:39,070 --> 01:07:42,120 so that just like an essay in Google Docs or Microsoft Word, hopefully 1406 01:07:42,120 --> 01:07:43,890 I'll see three separate paragraphs. 1407 01:07:43,890 --> 01:07:48,250 Let me now change tabs and I'll close hello.html from before. 1408 01:07:48,250 --> 01:07:50,820 I'm going to go back to my other tab here. 1409 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 1410 01:07:54,990 --> 01:07:56,628 which I started at earlier. 1411 01:07:56,628 --> 01:07:59,670 And you'll see now that I have two files because I obviously just created 1412 01:07:59,670 --> 01:08:01,950 a second file called paragraphs.html. 1413 01:08:01,950 --> 01:08:05,550 So let's click on this to see our three paragraphs of Latin-like text. 1414 01:08:05,550 --> 01:08:07,410 And voila. 1415 01:08:07,410 --> 01:08:09,130 I'll zoom out. 1416 01:08:09,130 --> 01:08:09,630 All right. 1417 01:08:09,630 --> 01:08:11,340 First bug, if you will. 1418 01:08:11,340 --> 01:08:16,680 This just looks like one massive blob of text, not three blobs of text. 1419 01:08:16,680 --> 01:08:17,939 And why might that be? 1420 01:08:17,939 --> 01:08:22,359 Borrowing the hint I offered a moment ago. 1421 01:08:22,359 --> 01:08:23,645 Why are we not seeing break? 1422 01:08:23,645 --> 01:08:24,520 AUDIENCE: [INAUDIBLE] 1423 01:08:24,520 --> 01:08:27,010 DAVID MALAN: Yeah, so we need some kind of line breaks here. 1424 01:08:27,010 --> 01:08:29,439 Because the browser turns out is only going to take us literally. 1425 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. 1426 01:08:32,564 --> 01:08:35,390 And any time there's more than a single white space, 1427 01:08:35,390 --> 01:08:38,345 whether it's two or 20 or 200, it's going 1428 01:08:38,345 --> 01:08:40,720 to just assume that you did that just to be neat and tidy 1429 01:08:40,720 --> 01:08:44,600 and it's going to collapse them into just one space visually like this. 1430 01:08:44,600 --> 01:08:47,000 So there are, in fact, a couple of solutions. 1431 01:08:47,000 --> 01:08:48,560 One is this here. 1432 01:08:48,560 --> 01:08:50,260 I could add some explicit line breaks. 1433 01:08:50,260 --> 01:08:53,840 And it turns out that there's a VR tag like this. 1434 01:08:53,840 --> 01:08:56,350 And just for visibility's sake, let me do two of them. 1435 01:08:56,350 --> 01:08:58,930 So hitting Enter, Enter on my keyboard. 1436 01:08:58,930 --> 01:08:59,979 I'll do it here too. 1437 01:08:59,979 --> 01:09:01,569 BR for break, break. 1438 01:09:01,569 --> 01:09:03,640 And now let me go back to my other tab. 1439 01:09:03,640 --> 01:09:06,520 Nothing's changed yet, but that's because I have to reload. 1440 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 1441 01:09:09,670 --> 01:09:10,569 by reloading. 1442 01:09:10,569 --> 01:09:13,600 And now it looks a little better, albeit nonsensical. 1443 01:09:13,600 --> 01:09:15,729 But you'll notice a curiosity. 1444 01:09:15,729 --> 01:09:18,939 Per this BR tag, this is kind of poorly designed. 1445 01:09:18,939 --> 01:09:22,779 It's a little hackish to just say Enter, Enter and make the browser do this. 1446 01:09:22,779 --> 01:09:27,850 Breaks, line breaks, don't actually require close tags or end tags. 1447 01:09:27,850 --> 01:09:31,149 So not all tags need to be closed, at least those that it just 1448 01:09:31,149 --> 01:09:33,130 makes no semantic sense to close them. 1449 01:09:33,130 --> 01:09:35,170 Like the break is there or it's not. 1450 01:09:35,170 --> 01:09:38,120 You can't imagine starting to move to the next line 1451 01:09:38,120 --> 01:09:40,120 and then eventually getting around to finishing. 1452 01:09:40,120 --> 01:09:41,560 It's either there or it's not. 1453 01:09:41,560 --> 01:09:45,189 So some tags do not have close tags as necessary. 1454 01:09:45,189 --> 01:09:48,069 But there's a more elegant way here, I daresay, 1455 01:09:48,069 --> 01:09:50,560 not just sort of hackishly putting in these line breaks. 1456 01:09:50,560 --> 01:09:51,700 Let me do this instead. 1457 01:09:51,700 --> 01:09:53,140 I'll delete those. 1458 01:09:53,140 --> 01:09:56,380 And let me go ahead and, as the name of this file suggests, 1459 01:09:56,380 --> 01:09:58,300 let me add a paragraph tag. 1460 01:09:58,300 --> 01:10:00,700 Now, here I need to fight with VS Code's autocomplete, 1461 01:10:00,700 --> 01:10:03,400 because I don't want to finish the thought there. 1462 01:10:03,400 --> 01:10:07,270 Let me go ahead and open the paragraph tag and close a paragraph tag. 1463 01:10:07,270 --> 01:10:09,370 And just to keep things tidy, I'll go ahead 1464 01:10:09,370 --> 01:10:12,620 and indent too, even though the indentation itself doesn't matter. 1465 01:10:12,620 --> 01:10:16,480 Let me go ahead and create another tag for opening this paragraph. 1466 01:10:16,480 --> 01:10:18,640 And I'll close this one here. 1467 01:10:18,640 --> 01:10:19,945 And now let me see. 1468 01:10:19,945 --> 01:10:21,820 Sometimes it's fighting with my autocomplete, 1469 01:10:21,820 --> 01:10:25,060 but that's fine, because I did this the wrong way at first. 1470 01:10:25,060 --> 01:10:28,210 And now let me go ahead and finish this thought 1471 01:10:28,210 --> 01:10:30,970 by closing this paragraph tag here. 1472 01:10:30,970 --> 01:10:33,640 And I've manually fixed all of my indentation. 1473 01:10:33,640 --> 01:10:38,110 So now on line 10, I have the equivalent of hey browser, start a paragraph. 1474 01:10:38,110 --> 01:10:39,940 And then it does the Latin-like text. 1475 01:10:39,940 --> 01:10:42,940 Then on line 12, hey browser, that's it for this paragraph. 1476 01:10:42,940 --> 01:10:44,620 And repeat, repeat. 1477 01:10:44,620 --> 01:10:49,300 If I now go back to my other tab and reload again, 1478 01:10:49,300 --> 01:10:51,010 shouldn't be all that different. 1479 01:10:51,010 --> 01:10:53,510 But semantically, it's a little bit better. 1480 01:10:53,510 --> 01:10:54,010 Why? 1481 01:10:54,010 --> 01:10:56,900 Because you saying break, break doesn't really mean anything. 1482 01:10:56,900 --> 01:11:00,100 But by saying paragraph, paragraph, paragraph, now 1483 01:11:00,100 --> 01:11:02,270 there's some more semantic information there. 1484 01:11:02,270 --> 01:11:05,890 Now if Google is analyzing your page or if the programmer is 1485 01:11:05,890 --> 01:11:09,040 trying to understand what it is you did in the past when writing this code, 1486 01:11:09,040 --> 01:11:11,262 you just know semantically, oh, this is a paragraph, 1487 01:11:11,262 --> 01:11:12,970 this is a paragraph, this is a paragraph, 1488 01:11:12,970 --> 01:11:14,590 just like in a book or an essay. 1489 01:11:14,590 --> 01:11:17,680 So it's a little more clear focusing more on what it is, 1490 01:11:17,680 --> 01:11:20,060 not how you want to display it. 1491 01:11:20,060 --> 01:11:25,290 Any questions then on these paragraphs? 1492 01:11:25,290 --> 01:11:25,790 All right. 1493 01:11:25,790 --> 01:11:26,870 So a few more tags. 1494 01:11:26,870 --> 01:11:29,078 And indeed, these first few examples will really just 1495 01:11:29,078 --> 01:11:30,350 be sort of bang, bang, bang. 1496 01:11:30,350 --> 01:11:33,537 Just a bunch of different vocabulary words in the form of these new tags. 1497 01:11:33,537 --> 01:11:35,870 But we won't go through the entire laundry list of tags. 1498 01:11:35,870 --> 01:11:38,870 This is indeed the thing for which web references and books and the like 1499 01:11:38,870 --> 01:11:41,820 are ultimately helpful, just like a dictionary in the real world. 1500 01:11:41,820 --> 01:11:43,362 So I'm going to go ahead and do this. 1501 01:11:43,362 --> 01:11:44,670 Let me go ahead and copy this. 1502 01:11:44,670 --> 01:11:47,870 Let me create a new file called headings.html 1503 01:11:47,870 --> 01:11:49,550 just so we have a new file for this. 1504 01:11:49,550 --> 01:11:52,340 To save time, I'm just going to paste that exact same code just 1505 01:11:52,340 --> 01:11:53,300 to get me started. 1506 01:11:53,300 --> 01:11:55,880 I'm going to change the title of it for clarity for the code 1507 01:11:55,880 --> 01:11:57,050 online to headings. 1508 01:11:57,050 --> 01:12:00,230 And now just like a book or an essay or a thesis, 1509 01:12:00,230 --> 01:12:02,780 let me actually put some actual headings here. 1510 01:12:02,780 --> 01:12:05,540 Now, if my first heading like chapter one, 1511 01:12:05,540 --> 01:12:07,500 I could do something like this up here. 1512 01:12:07,500 --> 01:12:10,490 I could have a paragraph like I just learned and I could say something 1513 01:12:10,490 --> 01:12:12,290 like chapter one here. 1514 01:12:12,290 --> 01:12:14,030 But that's not really a paragraph. 1515 01:12:14,030 --> 01:12:16,820 And so it's sort of better design to tell the browser 1516 01:12:16,820 --> 01:12:18,720 and really tell the world what it is. 1517 01:12:18,720 --> 01:12:22,430 So it turns out there's another tag I can use like h1 for heading 1518 01:12:22,430 --> 01:12:24,065 and most important heading. 1519 01:12:24,065 --> 01:12:25,940 And in here, I'm just going to keep it simple 1520 01:12:25,940 --> 01:12:27,380 and I'm going to say something like one. 1521 01:12:27,380 --> 01:12:28,700 And in fact, this is so short. 1522 01:12:28,700 --> 01:12:31,610 Here's a good candidate for just keeping this all in the same line. 1523 01:12:31,610 --> 01:12:34,190 But this has no functional difference, but it'll just 1524 01:12:34,190 --> 01:12:36,470 make it a little more terse on the screen. 1525 01:12:36,470 --> 01:12:38,810 Now let me go ahead down here. 1526 01:12:38,810 --> 01:12:41,750 And I could have multiple headings so H1 two. 1527 01:12:41,750 --> 01:12:45,200 And down here I could have another one, H1 three. 1528 01:12:45,200 --> 01:12:48,440 And if I go back to my other tab, I reload it. 1529 01:12:48,440 --> 01:12:53,850 Now we should see, just like a book or an essay, now we have some proper-- 1530 01:12:53,850 --> 01:12:55,018 now we have some-- oops. 1531 01:12:55,018 --> 01:12:56,310 I have to go to the right file. 1532 01:12:56,310 --> 01:12:56,810 Sorry. 1533 01:12:56,810 --> 01:13:00,090 If I go back to the index, now we see the new third file 1534 01:13:00,090 --> 01:13:01,590 called headings.html. 1535 01:13:01,590 --> 01:13:05,865 And now we indeed see some fairly pretty, if simple, headings as well. 1536 01:13:05,865 --> 01:13:08,490 Now, if these aren't three chapters, one, two, three, but maybe 1537 01:13:08,490 --> 01:13:10,860 it's a chapter, then a section, then a subsection 1538 01:13:10,860 --> 01:13:14,130 such that just visually you want things to get smaller and smaller, 1539 01:13:14,130 --> 01:13:15,300 well those exist too. 1540 01:13:15,300 --> 01:13:17,700 And in fact, you can do H1 through H6. 1541 01:13:17,700 --> 01:13:20,640 H1, a little paradoxically, is the biggest and boldest. 1542 01:13:20,640 --> 01:13:23,010 H6 is the smallest but still bold. 1543 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, 1544 01:13:28,620 --> 01:13:32,130 open and close, if again, this is a section or a subsection 1545 01:13:32,130 --> 01:13:33,480 inside of that chapter. 1546 01:13:33,480 --> 01:13:36,570 If I reload now, notice just gets a little smaller. 1547 01:13:36,570 --> 01:13:39,900 So it's more similar to what you'd see on the printed page. 1548 01:13:39,900 --> 01:13:44,460 But this now is just another three tags that I might use in my own code. 1549 01:13:44,460 --> 01:13:46,710 All right, well how about lists of things? 1550 01:13:46,710 --> 01:13:48,940 I have three paragraphs here, but let's do this. 1551 01:13:48,940 --> 01:13:50,760 Let me go back to VS Code. 1552 01:13:50,760 --> 01:13:53,220 I'm going to copy this code so I have a starting point. 1553 01:13:53,220 --> 01:13:57,750 I'm going to create a new file called, say, list.html. 1554 01:13:57,750 --> 01:13:59,250 Here I'm going to copy paste. 1555 01:13:59,250 --> 01:14:02,002 I'm going to change my title to be list just for clarity. 1556 01:14:02,002 --> 01:14:04,710 And in here I'm going to go ahead and get rid of this whole body, 1557 01:14:04,710 --> 01:14:06,918 because let's move away from these massive paragraphs 1558 01:14:06,918 --> 01:14:08,370 and keep it simpler for now. 1559 01:14:08,370 --> 01:14:11,297 If I want to have a list of things, for instance, 1560 01:14:11,297 --> 01:14:14,130 if you haven't seen these already, a computer scientist when they're 1561 01:14:14,130 --> 01:14:16,830 fishing for just some arbitrary meaningless words, 1562 01:14:16,830 --> 01:14:20,190 they often use foo, bar, and baz just as their go to, 1563 01:14:20,190 --> 01:14:23,370 just like a mathematician might use x, y, z for variables. 1564 01:14:23,370 --> 01:14:25,680 So foo, bar, and baz are on three separate lines. 1565 01:14:25,680 --> 01:14:28,200 And maybe this is my to do list or my shopping list. 1566 01:14:28,200 --> 01:14:31,600 But you can probably imagine, if I go back to my other tab, 1567 01:14:31,600 --> 01:14:36,030 go back to the index, I now see my new file list.html. 1568 01:14:36,030 --> 01:14:38,520 But it's probably going to look wrong. 1569 01:14:38,520 --> 01:14:42,040 I think I'm just going to say yeah, foo, bar, baz all in one breath, 1570 01:14:42,040 --> 01:14:43,980 if you will, not on new lines. 1571 01:14:43,980 --> 01:14:45,480 And you can try to fight this. 1572 01:14:45,480 --> 01:14:48,000 You can be like really want to put some line breaks. 1573 01:14:48,000 --> 01:14:50,310 There go back and reload. 1574 01:14:50,310 --> 01:14:52,320 It's still not going to make any change. 1575 01:14:52,320 --> 01:14:53,903 How do I want to fix this? 1576 01:14:53,903 --> 01:14:55,320 Well, I can do this in a few ways. 1577 01:14:55,320 --> 01:14:57,510 I can make them paragraphs, but they're not really paragraphs. 1578 01:14:57,510 --> 01:14:58,360 They're a list. 1579 01:14:58,360 --> 01:15:01,120 So I'm going to use a different tag instead. 1580 01:15:01,120 --> 01:15:05,760 I'm going to create, for instance, an unordered list using the UL tag. 1581 01:15:05,760 --> 01:15:06,840 Open and close. 1582 01:15:06,840 --> 01:15:10,230 Inside of that, I'm going to use the list item tag, LI, 1583 01:15:10,230 --> 01:15:11,520 and I'm going to say foo. 1584 01:15:11,520 --> 01:15:13,770 Inside of another tag I'm going to say bar. 1585 01:15:13,770 --> 01:15:17,190 Inside of a third tag open and close, I'm going to say baz. 1586 01:15:17,190 --> 01:15:20,400 So it's getting a little verbose, but it's still relatively succinct. 1587 01:15:20,400 --> 01:15:23,190 LI is all you need type for list item. 1588 01:15:23,190 --> 01:15:26,110 UL is all you need type for unordered list. 1589 01:15:26,110 --> 01:15:28,980 So there's some shorthand syntax here that's adopted. 1590 01:15:28,980 --> 01:15:32,430 If I now reload, you're going to see a so-called unordered, list 1591 01:15:32,430 --> 01:15:36,000 like not sorted, which means by convention to show it as bullets. 1592 01:15:36,000 --> 01:15:39,238 Though it could be displayed in different ways visually as well. 1593 01:15:39,238 --> 01:15:41,280 If you actually change your mind and you realize, 1594 01:15:41,280 --> 01:15:44,238 oh, I'd really like to number this, well, you could obviously like just 1595 01:15:44,238 --> 01:15:48,052 add one and two and three, but that's going to get annoying, 1596 01:15:48,052 --> 01:15:49,260 especially if the list grows. 1597 01:15:49,260 --> 01:15:51,420 You want to change something, insert something in the middle. 1598 01:15:51,420 --> 01:15:52,587 Then you have to reorder it. 1599 01:15:52,587 --> 01:15:54,960 I mean, we're using computers here. 1600 01:15:54,960 --> 01:15:56,230 They can do this for us. 1601 01:15:56,230 --> 01:16:00,270 So we can change the UL to any guesses? 1602 01:16:00,270 --> 01:16:04,060 OL, maybe, for ordered list, which is the opposite here. 1603 01:16:04,060 --> 01:16:06,060 So let's try changing that to OL. 1604 01:16:06,060 --> 01:16:07,560 Let me go back to my browser. 1605 01:16:07,560 --> 01:16:10,050 And I'm just hitting Command R or Control 1606 01:16:10,050 --> 01:16:12,780 R to reload the page instead of clicking the button every time. 1607 01:16:12,780 --> 01:16:16,080 Now I automatically get one, two, and three. 1608 01:16:16,080 --> 01:16:19,110 And you can even override the aesthetics using different numerals 1609 01:16:19,110 --> 01:16:24,380 or symbology instead, but that would be perhaps the most common there as well. 1610 01:16:24,380 --> 01:16:24,880 All right. 1611 01:16:24,880 --> 01:16:26,590 It's a lot of tags quickly. 1612 01:16:26,590 --> 01:16:31,260 But any questions on lists, paragraphs, headings, or the like? 1613 01:16:31,260 --> 01:16:31,760 No? 1614 01:16:31,760 --> 01:16:32,260 All right. 1615 01:16:32,260 --> 01:16:35,430 So let me go ahead and propose this here. 1616 01:16:35,430 --> 01:16:38,700 Let's go ahead and create what we'll call a table. 1617 01:16:38,700 --> 01:16:41,240 So let me copy and paste this into a new file. 1618 01:16:41,240 --> 01:16:43,760 Code of table.html. 1619 01:16:43,760 --> 01:16:47,360 And in table.html, let me again rename the title to table. 1620 01:16:47,360 --> 01:16:50,240 Let me get rid of that ordered list from before. 1621 01:16:50,240 --> 01:16:53,510 And let me now use a table tag open and close. 1622 01:16:53,510 --> 01:16:54,860 This one one's a little weird. 1623 01:16:54,860 --> 01:16:59,040 But inside of a table, you typically have a head of the table. 1624 01:16:59,040 --> 01:17:02,270 So I'll say, well, let's say the first row. 1625 01:17:02,270 --> 01:17:03,500 We'll keep this one simple. 1626 01:17:03,500 --> 01:17:05,630 A table row or TR. 1627 01:17:05,630 --> 01:17:09,067 Inside of a table row, you would ideally have columns, 1628 01:17:09,067 --> 01:17:10,400 but that's not the nomenclature. 1629 01:17:10,400 --> 01:17:11,520 Instead you have data. 1630 01:17:11,520 --> 01:17:13,160 So TD for Table Data. 1631 01:17:13,160 --> 01:17:15,960 And let me go ahead and just have the first datum be one. 1632 01:17:15,960 --> 01:17:17,960 I'm just going to arbitrarily do one, two, three 1633 01:17:17,960 --> 01:17:19,550 just so we have something to play with. 1634 01:17:19,550 --> 01:17:20,300 And you know what? 1635 01:17:20,300 --> 01:17:24,620 Just for demonstration sake, I am going to deliberately copy paste this twice 1636 01:17:24,620 --> 01:17:27,020 and I'm just going to manually change the numbers 1637 01:17:27,020 --> 01:17:29,810 just so we can see what I'm creating. 1638 01:17:29,810 --> 01:17:31,040 Seven, eight, nine. 1639 01:17:31,040 --> 01:17:34,730 And then maybe just for good measure if you're seeing where this is going, 1640 01:17:34,730 --> 01:17:37,490 let me copy this one more time and give myself 1641 01:17:37,490 --> 01:17:41,360 a final row with an asterisk, a 0, and a pound sign 1642 01:17:41,360 --> 01:17:43,190 if maybe you see where this is going. 1643 01:17:43,190 --> 01:17:44,870 Let me go back to my other tab. 1644 01:17:44,870 --> 01:17:47,240 Let me go back to the index. 1645 01:17:47,240 --> 01:17:49,460 There is my new file, table.html. 1646 01:17:49,460 --> 01:17:50,520 I'll click that. 1647 01:17:50,520 --> 01:17:53,390 And while it's not very pretty, I'll zoom in. 1648 01:17:53,390 --> 01:17:55,670 It's indeed a table of data. 1649 01:17:55,670 --> 01:17:58,848 I happen to mimic a telephone keypad. 1650 01:17:58,848 --> 01:18:00,890 But you can imagine this being much juicier, much 1651 01:18:00,890 --> 01:18:03,265 more interesting scientific or financial data or the like 1652 01:18:03,265 --> 01:18:07,130 laid out into these rows, TRs, and these columns, a.k.a. 1653 01:18:07,130 --> 01:18:08,730 table data as well. 1654 01:18:08,730 --> 01:18:11,670 So we have that ability as well for structured data. 1655 01:18:11,670 --> 01:18:15,000 Now of course, the internet has lots of images on it. 1656 01:18:15,000 --> 01:18:16,830 And in fact, this is all just text. 1657 01:18:16,830 --> 01:18:18,380 How can we introduce images? 1658 01:18:18,380 --> 01:18:21,060 Well, let me go ahead and do this. 1659 01:18:21,060 --> 01:18:25,850 Let me first sort of semi secretly copy an image file 1660 01:18:25,850 --> 01:18:29,840 that I brought from earlier just so we have something to play with. 1661 01:18:29,840 --> 01:18:34,130 And I have in my account here now an image called harvard.jpeg. 1662 01:18:34,130 --> 01:18:37,250 And I uploaded this semi secretly a second ago into my account 1663 01:18:37,250 --> 01:18:39,560 so that I can reference a second file. 1664 01:18:39,560 --> 01:18:43,760 Let me go ahead and copy this HTML just to save myself some keystrokes. 1665 01:18:43,760 --> 01:18:47,510 Let me go ahead and do code of image.html. 1666 01:18:47,510 --> 01:18:50,510 And let me paste that code and hide my terminal window. 1667 01:18:50,510 --> 01:18:54,440 I'm going to get rid of all of this table as just uninteresting now. 1668 01:18:54,440 --> 01:18:59,030 We're going to make this even simpler by changing my title to image to keep 1669 01:18:59,030 --> 01:19:01,500 all these demonstrations separate. 1670 01:19:01,500 --> 01:19:05,000 And now if I want to make a web page that when visited 1671 01:19:05,000 --> 01:19:07,520 shows us a picture of Harvard, well, there's 1672 01:19:07,520 --> 01:19:10,680 an image tag abbreviated IMG for short. 1673 01:19:10,680 --> 01:19:13,310 I can specify what the source of that image is. 1674 01:19:13,310 --> 01:19:17,930 And if my file, a JPEG in this case, is literally in the same folder, 1675 01:19:17,930 --> 01:19:20,982 I can just say quote unquote "harvard.jpeg." 1676 01:19:20,982 --> 01:19:23,690 If it's in a folder, I should mention the folder name and a slash 1677 01:19:23,690 --> 01:19:24,920 or something like that. 1678 01:19:24,920 --> 01:19:27,920 If the image is on the internet somewhere with a URL, 1679 01:19:27,920 --> 01:19:32,940 I could also have a whole URL, https:// and then the URL of the image. 1680 01:19:32,940 --> 01:19:34,813 But I uploaded it in advance. 1681 01:19:34,813 --> 01:19:37,230 Now, this is just going to visually display on the screen. 1682 01:19:37,230 --> 01:19:39,320 But not everyone, of course, can see images. 1683 01:19:39,320 --> 01:19:41,450 Screen readers might need a bit of assistance. 1684 01:19:41,450 --> 01:19:44,150 And even search engines might want to analyze the page 1685 01:19:44,150 --> 01:19:46,220 and know what this is an image of. 1686 01:19:46,220 --> 01:19:48,620 Now, machine learning and artificial intelligence 1687 01:19:48,620 --> 01:19:51,110 are maybe getting better, to be fair, at figuring out 1688 01:19:51,110 --> 01:19:54,260 just by analyzing images what they are, but they're certainly imperfect. 1689 01:19:54,260 --> 01:19:54,980 I am a human. 1690 01:19:54,980 --> 01:19:57,900 I know pretty well what I took a photo of, for instance. 1691 01:19:57,900 --> 01:20:01,550 So maybe what I should do proactively, which would be good for accessibility, 1692 01:20:01,550 --> 01:20:04,250 is have this alt tag for alternative text. 1693 01:20:04,250 --> 01:20:06,800 And then literally say Harvard University 1694 01:20:06,800 --> 01:20:10,070 so that someone who can't see or so that a server can 1695 01:20:10,070 --> 01:20:13,250 actually with higher probability what it is they're looking at. 1696 01:20:13,250 --> 01:20:15,620 And I could be even more detailed than just a phrase. 1697 01:20:15,620 --> 01:20:18,090 I could describe the image as well. 1698 01:20:18,090 --> 01:20:18,590 All right. 1699 01:20:18,590 --> 01:20:21,890 Let me go back to my index in the second tab. 1700 01:20:21,890 --> 01:20:24,770 Let me go back and zoom back out. 1701 01:20:24,770 --> 01:20:29,360 There's my new file and there's my new JPEG that I quickly uploaded before. 1702 01:20:29,360 --> 01:20:33,140 I can click now on image.html and, albeit a little 1703 01:20:33,140 --> 01:20:37,010 overwhelming, that is a really big image of Harvard. 1704 01:20:37,010 --> 01:20:39,120 Now, apparently it's too big to fit on the screen. 1705 01:20:39,120 --> 01:20:42,470 So this isn't the best user experience to have to scroll up. 1706 01:20:42,470 --> 01:20:43,880 OK, so there's the image. 1707 01:20:43,880 --> 01:20:47,840 Horrible, horrible design, if you will, at least in terms of my code. 1708 01:20:47,840 --> 01:20:51,020 But there's going to be ways where I can rein that in and affect 1709 01:20:51,020 --> 01:20:52,860 the height or the width as well. 1710 01:20:52,860 --> 01:20:57,140 But for now it's just deliberately a little overwhelming instead. 1711 01:20:57,140 --> 01:20:59,060 Now we can do something a little more fun 1712 01:20:59,060 --> 01:21:03,540 and topical today, which might be to use a video instead. 1713 01:21:03,540 --> 01:21:07,770 So let me go ahead here and very quickly grab another file today, 1714 01:21:07,770 --> 01:21:11,720 which I brought in advance and you might have seen briefly 1715 01:21:11,720 --> 01:21:15,480 earlier, which is an MP4, an actual video file. 1716 01:21:15,480 --> 01:21:18,800 And what I'm going to do here by revealing VS Code again is I'm 1717 01:21:18,800 --> 01:21:21,200 going to code a file called video.html. 1718 01:21:21,200 --> 01:21:23,060 Yet another demonstration here. 1719 01:21:23,060 --> 01:21:26,750 I'm going to change my title to video just to keep these things straight. 1720 01:21:26,750 --> 01:21:31,390 And instead of the image tag, you might imagine using now indeed a video tag. 1721 01:21:31,390 --> 01:21:35,620 And this is a relatively newer tag that has increasing support among browsers. 1722 01:21:35,620 --> 01:21:37,000 So it's good now to use. 1723 01:21:37,000 --> 01:21:39,925 And inside of this, the syntax is a little different. 1724 01:21:39,925 --> 01:21:43,780 You specify, and this is weirdly annoyingly inconsistent, 1725 01:21:43,780 --> 01:21:45,790 not SRC for source. 1726 01:21:45,790 --> 01:21:47,410 You literally say source. 1727 01:21:47,410 --> 01:21:50,560 And then in source, you use a source attribute. 1728 01:21:50,560 --> 01:21:54,250 Horrible design semantically, but this is what we're stuck with. 1729 01:21:54,250 --> 01:21:57,220 Halloween.mp4 is the name of the video. 1730 01:21:57,220 --> 01:22:00,700 We uploaded in advance made by some of Harvard's digital artists. 1731 01:22:00,700 --> 01:22:05,560 And the type of this video so that the browser knows for sure is video/mp4. 1732 01:22:05,560 --> 01:22:07,480 That's a so called content type that you just 1733 01:22:07,480 --> 01:22:09,400 know or you look up to figure it out. 1734 01:22:09,400 --> 01:22:12,910 And just so that this is as animated as possible, 1735 01:22:12,910 --> 01:22:17,350 I'm going to tell the video tag with a few attributes to autoplay. 1736 01:22:17,350 --> 01:22:22,120 And it turns out that attributes often have key value pairs whereby 1737 01:22:22,120 --> 01:22:26,020 it's the key, the attribute name equals quote unquote some value, 1738 01:22:26,020 --> 01:22:28,870 just like lang equals quote unquote en for English. 1739 01:22:28,870 --> 01:22:31,010 But not all attributes need values. 1740 01:22:31,010 --> 01:22:34,150 In fact, if you read the documentation for HTML's video tag, 1741 01:22:34,150 --> 01:22:37,210 there's an autoplay attribute where you can literally just say the key 1742 01:22:37,210 --> 01:22:38,325 and it needs no value. 1743 01:22:38,325 --> 01:22:39,700 It's just going to mean autoplay. 1744 01:22:39,700 --> 01:22:42,980 And if you don't want autoplay, you just omit it altogether. 1745 01:22:42,980 --> 01:22:45,910 So you don't necessarily need a value on or off. 1746 01:22:45,910 --> 01:22:48,040 I want the thing to loop just so it keeps going. 1747 01:22:48,040 --> 01:22:50,690 I want it to be muted so that we don't hear any sound. 1748 01:22:50,690 --> 01:22:53,110 In fact, there is no sound, but browsers nowadays 1749 01:22:53,110 --> 01:22:56,590 for anti-spam and advertising reasons often 1750 01:22:56,590 --> 01:23:00,297 will not play a video if it has sound because it's just kind of obnoxious 1751 01:23:00,297 --> 01:23:03,130 if you visit a page and all of a sudden your speakers start blaring. 1752 01:23:03,130 --> 01:23:04,990 So I know this from having read up on this 1753 01:23:04,990 --> 01:23:08,170 that I should mute it if I want it to actually autoplay for real. 1754 01:23:08,170 --> 01:23:10,780 And then I'll set the width manually for now 1755 01:23:10,780 --> 01:23:14,860 to be like 128 pixels across just from some trial and error earlier. 1756 01:23:14,860 --> 01:23:18,760 And that width attribute does have a value. 1757 01:23:18,760 --> 01:23:24,010 Now, I'm being a little uptight here by alphabetizing all of my attributes. 1758 01:23:24,010 --> 01:23:25,108 Not at all necessary. 1759 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. 1760 01:23:28,400 --> 01:23:30,340 So for me it's just a matter of style. 1761 01:23:30,340 --> 01:23:32,530 Let me go back to my other tab. 1762 01:23:32,530 --> 01:23:33,820 Go back to my index. 1763 01:23:33,820 --> 01:23:39,460 And you'll see two new files, again, the MP4 file and video.html. 1764 01:23:39,460 --> 01:23:40,570 I'll click on the latter. 1765 01:23:40,570 --> 01:23:44,140 And if I did this well, here we have thanks to our friends 1766 01:23:44,140 --> 01:23:49,008 in Harvard, our artistic friends at Harvard, very-- 1767 01:23:49,008 --> 01:23:50,800 like an ooh would help with the drama here. 1768 01:23:50,800 --> 01:23:54,950 But we have a very dramatic, nice Halloween type view here as well. 1769 01:23:54,950 --> 01:23:56,780 So we have videos embedded as well. 1770 01:23:56,780 --> 01:23:59,350 And suffice it to say there's ways to embed YouTube videos 1771 01:23:59,350 --> 01:24:03,820 or Vimeo or other services as well using yet more tags too. 1772 01:24:03,820 --> 01:24:06,640 But the web is, of course, all about hyperlink, 1773 01:24:06,640 --> 01:24:09,170 hypertext markup language, where you click on something 1774 01:24:09,170 --> 01:24:10,420 and you end up somewhere else. 1775 01:24:10,420 --> 01:24:13,330 And this is how the web is so powerfully interconnected. 1776 01:24:13,330 --> 01:24:18,200 So how do we start creating links from one website or web page to another? 1777 01:24:18,200 --> 01:24:20,110 Either that I made or someone else. 1778 01:24:20,110 --> 01:24:23,500 Well, let me go ahead and open back up my terminal window. 1779 01:24:23,500 --> 01:24:26,350 And let's create a file called link.html just 1780 01:24:26,350 --> 01:24:28,630 to demonstrate what you and I know as a link. 1781 01:24:28,630 --> 01:24:30,160 I'll hide my terminal window now. 1782 01:24:30,160 --> 01:24:32,800 Let me copy paste just to save myself some keystrokes. 1783 01:24:32,800 --> 01:24:36,400 And let me get rid of the video tag so we can focus now on links. 1784 01:24:36,400 --> 01:24:40,090 Suppose that I want you to visit Harvard virtually. 1785 01:24:40,090 --> 01:24:44,350 Well, I could say something like visit Harvard, period. 1786 01:24:44,350 --> 01:24:46,780 This is uninteresting because it's just going to be text. 1787 01:24:46,780 --> 01:24:51,082 I probably want you to actually visit harvard.edu instead more specifically. 1788 01:24:51,082 --> 01:24:53,290 And I'll lowercase it just to be consistent with what 1789 01:24:53,290 --> 01:24:55,450 browsers do in the address bar. 1790 01:24:55,450 --> 01:24:58,480 All right, let me go now back to this video tab 1791 01:24:58,480 --> 01:25:01,300 and go back where we now see my index. 1792 01:25:01,300 --> 01:25:04,000 I'll zoom back in and there's link.html. 1793 01:25:04,000 --> 01:25:06,535 Unfortunately when I click this, and I'll zoom in, 1794 01:25:06,535 --> 01:25:08,410 you literally just see the text that I wrote. 1795 01:25:08,410 --> 01:25:11,230 And yet on every social media platform nowadays, 1796 01:25:11,230 --> 01:25:14,800 except like Instagram, when you type a URL or what looks like a URL, 1797 01:25:14,800 --> 01:25:18,190 even if you didn't bother with the HTTP or HTTPS, 1798 01:25:18,190 --> 01:25:21,790 it usually automatically links it for you on Facebook, on Twitter, 1799 01:25:21,790 --> 01:25:22,960 and other sites as well. 1800 01:25:22,960 --> 01:25:24,880 That's just a convenience. 1801 01:25:24,880 --> 01:25:26,710 Discord and Slack do that too. 1802 01:25:26,710 --> 01:25:29,690 But they're just doing it to make things more user friendly. 1803 01:25:29,690 --> 01:25:35,600 But they have to generate HTML with the proper tags and attributes. 1804 01:25:35,600 --> 01:25:38,290 So to get this to actually work, it's not even good enough 1805 01:25:38,290 --> 01:25:42,100 to say https://www.harvard.edu. 1806 01:25:42,100 --> 01:25:44,320 Because if I go back now and reload now, you'll 1807 01:25:44,320 --> 01:25:46,510 literally just see all of that as text. 1808 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. 1809 01:25:51,462 --> 01:25:53,920 It'd be great if it were called the link tag, but it's not. 1810 01:25:53,920 --> 01:25:56,800 It's called the anchor tag or A for short. 1811 01:25:56,800 --> 01:26:00,850 And the way you reference the URL to which you want to lead the user 1812 01:26:00,850 --> 01:26:03,800 is via href for Hyper Reference. 1813 01:26:03,800 --> 01:26:06,790 This is one of the earliest tags, perhaps among the most arcane now. 1814 01:26:06,790 --> 01:26:11,620 But if I then put that whole URL in quotes and close my tag, 1815 01:26:11,620 --> 01:26:15,250 I now have an opportunity to finish my thought in between the start 1816 01:26:15,250 --> 01:26:18,130 tag and the end tag for this anchor. 1817 01:26:18,130 --> 01:26:20,950 And what I put in between the start and end tag 1818 01:26:20,950 --> 01:26:22,840 is whatever the human's going to see. 1819 01:26:22,840 --> 01:26:25,090 So here I can say Harvard. 1820 01:26:25,090 --> 01:26:27,020 I can go back to my other tab. 1821 01:26:27,020 --> 01:26:31,620 I can reload the page and now you see the familiar blue underline. 1822 01:26:31,620 --> 01:26:33,730 This now is an actual link. 1823 01:26:33,730 --> 01:26:38,190 And if I click it, I'll be whisked away to the actual Harvard website. 1824 01:26:38,190 --> 01:26:40,480 But there's a risk here. 1825 01:26:40,480 --> 01:26:45,990 Can anyone imagine pretty simply after, what, 60 seconds of the anchor tag, 1826 01:26:45,990 --> 01:26:50,780 how could someone, an adversary misuse this tag alone? 1827 01:26:50,780 --> 01:26:53,720 How could a website run by an adversary, how could 1828 01:26:53,720 --> 01:26:57,160 a spammer misuse this tag do you think? 1829 01:26:57,160 --> 01:26:57,820 Yeah. 1830 01:26:57,820 --> 01:27:01,250 AUDIENCE: Could you have it say, like, Visit Yale? 1831 01:27:01,250 --> 01:27:02,500 DAVID MALAN: Yeah, absolutely. 1832 01:27:02,500 --> 01:27:05,990 You could have it say one thing but lead elsewhere. 1833 01:27:05,990 --> 01:27:07,900 So I could say Yale in here. 1834 01:27:07,900 --> 01:27:09,700 Nothing's stopping me as the developer. 1835 01:27:09,700 --> 01:27:10,610 Go back to the page. 1836 01:27:10,610 --> 01:27:11,110 Reload. 1837 01:27:11,110 --> 01:27:12,520 Now it says visit Yale. 1838 01:27:12,520 --> 01:27:16,120 You click on Yale, and voila, you end up applying to the wrong place instead. 1839 01:27:16,120 --> 01:27:18,110 Now, there's some hints of this. 1840 01:27:18,110 --> 01:27:19,690 I could hover over this. 1841 01:27:19,690 --> 01:27:20,740 And super small. 1842 01:27:20,740 --> 01:27:24,070 Like this isn't very good for your anti-hacking techniques. 1843 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. 1844 01:27:28,090 --> 01:27:31,090 And most browsers indeed do this, at least on desktops and laptops. 1845 01:27:31,090 --> 01:27:32,530 So it's a little bit of a hint. 1846 01:27:32,530 --> 01:27:36,670 But what you're seeing here, even though this is kind of a silly playful 1847 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, 1848 01:27:42,430 --> 01:27:46,000 whereby an adversarially tells you to log into your PayPal account. 1849 01:27:46,000 --> 01:27:47,950 But it doesn't go to paypal.com. 1850 01:27:47,950 --> 01:27:50,650 It goes to some other random website that they 1851 01:27:50,650 --> 01:27:53,718 bought and built that then tries to collect your username and password 1852 01:27:53,718 --> 01:27:55,010 and store it in their database. 1853 01:27:55,010 --> 01:27:58,120 So now they can log into your PayPal account as you. 1854 01:27:58,120 --> 01:28:01,030 And it boils down to that simple primitive. 1855 01:28:01,030 --> 01:28:03,460 And you can be even more manipulative too. 1856 01:28:03,460 --> 01:28:08,410 You can even say the whole URL for Yale, like yale.edu or worse, 1857 01:28:08,410 --> 01:28:12,610 https://www.yale.edu and reload that. 1858 01:28:12,610 --> 01:28:16,120 And now, I mean, who among you and people in your lives 1859 01:28:16,120 --> 01:28:19,570 are necessarily going to be so paranoid as to not just blindly click 1860 01:28:19,570 --> 01:28:20,620 on that URL? 1861 01:28:20,620 --> 01:28:24,040 This is why just being a defensive real world person nowadays 1862 01:28:24,040 --> 01:28:26,540 digitally is just ever more so important. 1863 01:28:26,540 --> 01:28:30,280 So these same things that can be used for good or benign use cases 1864 01:28:30,280 --> 01:28:32,950 can also be used for ill purposes too. 1865 01:28:32,950 --> 01:28:35,590 And it is literally that simple. 1866 01:28:35,590 --> 01:28:40,270 Questions now on any of these tags thus far? 1867 01:28:40,270 --> 01:28:42,810 Just a few more to offer up. 1868 01:28:42,810 --> 01:28:46,090 Any questions on this here? 1869 01:28:46,090 --> 01:28:46,590 No? 1870 01:28:46,590 --> 01:28:49,890 Well, let me open up a couple that I brought in advance just so we 1871 01:28:49,890 --> 01:28:52,480 don't have to type all of them here. 1872 01:28:52,480 --> 01:28:56,200 If you, for instance, have a web page that's got quite a bit of code, 1873 01:28:56,200 --> 01:29:01,260 let me go ahead grab from the website a couple of examples real fast here. 1874 01:29:01,260 --> 01:29:07,800 Namely one that will call how about meta.html. 1875 01:29:07,800 --> 01:29:11,970 And in this example here, give me just a moment to full screen it, 1876 01:29:11,970 --> 01:29:15,030 we're going to have a file. 1877 01:29:15,030 --> 01:29:17,460 So code meta.html. 1878 01:29:17,460 --> 01:29:18,840 I'll open this up next. 1879 01:29:18,840 --> 01:29:21,570 No relationship to what we now know as Meta the company. 1880 01:29:21,570 --> 01:29:24,360 But rather this is going to be a page that I 1881 01:29:24,360 --> 01:29:27,310 copied and pasted the same chunk of Latin-like text from earlier. 1882 01:29:27,310 --> 01:29:29,440 So it's going to be a really big paragraph of text. 1883 01:29:29,440 --> 01:29:32,232 And this is an example where if you were to open this web page, not 1884 01:29:32,232 --> 01:29:34,260 on my own Mac or your PC but on your phone, 1885 01:29:34,260 --> 01:29:37,210 the font might actually be really annoying and difficult to read. 1886 01:29:37,210 --> 01:29:37,710 Why? 1887 01:29:37,710 --> 01:29:40,377 Because your phone is going to try to squeeze all of the content 1888 01:29:40,377 --> 01:29:44,080 onto the tiny viewport, the rectangular region of your phone instead. 1889 01:29:44,080 --> 01:29:46,950 So it turns out there are ways, pretty easy ways, 1890 01:29:46,950 --> 01:29:50,760 to make your website mobile friendly as well, otherwise known technically 1891 01:29:50,760 --> 01:29:51,810 as responsive. 1892 01:29:51,810 --> 01:29:58,170 And the easiest way to do this is to include this tag here, a meta tag. 1893 01:29:58,170 --> 01:29:59,760 Again, no relationship to Facebook. 1894 01:29:59,760 --> 01:30:01,150 This has been here much longer. 1895 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 1896 01:30:06,120 --> 01:30:07,227 to key value pairs. 1897 01:30:07,227 --> 01:30:09,060 This is a good example of where it'd be nice 1898 01:30:09,060 --> 01:30:12,840 if it looked just like everything else, but this is what we have historically. 1899 01:30:12,840 --> 01:30:15,210 You can have a meta tag with an attribute called 1900 01:30:15,210 --> 01:30:18,420 name that refers to the name of some feature of the browser. 1901 01:30:18,420 --> 01:30:22,380 In this case, viewport is the technical term for the big rectangular region 1902 01:30:22,380 --> 01:30:23,550 to which I keep referring. 1903 01:30:23,550 --> 01:30:25,290 The body, really, of your page. 1904 01:30:25,290 --> 01:30:30,330 The content for the viewport, you can say some esoteric details like this. 1905 01:30:30,330 --> 01:30:31,920 The initial scale should be one. 1906 01:30:31,920 --> 01:30:35,380 That is no matter who visits your site, it shouldn't start zoomed in. 1907 01:30:35,380 --> 01:30:36,630 It shouldn't start zoomed out. 1908 01:30:36,630 --> 01:30:38,850 It should start at just the default sizing. 1909 01:30:38,850 --> 01:30:41,370 And then this here, width equals device width, 1910 01:30:41,370 --> 01:30:45,120 is a very arcane way of saying if the user has a small screen, 1911 01:30:45,120 --> 01:30:47,850 show the text proportional to that size. 1912 01:30:47,850 --> 01:30:50,880 Don't just try to cram it all into a tiny little window. 1913 01:30:50,880 --> 01:30:52,210 So it's super simple. 1914 01:30:52,210 --> 01:30:54,930 But if for the next problem set or future projects 1915 01:30:54,930 --> 01:30:59,460 as well you find that just things look really bad on mobile, this kind of tag 1916 01:30:59,460 --> 01:31:01,470 is the place to start, meta. 1917 01:31:01,470 --> 01:31:03,810 There aren't terribly many of these that you'll use, 1918 01:31:03,810 --> 01:31:06,820 but they're useful for other mechanisms as well. 1919 01:31:06,820 --> 01:31:10,290 In fact, let me go ahead and semi secretly pull up one other example 1920 01:31:10,290 --> 01:31:14,520 as well whereby I'm going to grab another example that 1921 01:31:14,520 --> 01:31:16,470 uses more of these tags. 1922 01:31:16,470 --> 01:31:20,410 And in just a moment, I'll reveal it here. 1923 01:31:20,410 --> 01:31:22,800 Give me just one second here. 1924 01:31:22,800 --> 01:31:29,220 I'll propose that in this example of meta, 1925 01:31:29,220 --> 01:31:33,340 we now add these properties instead. 1926 01:31:33,340 --> 01:31:35,370 So I copy pasted this from an existing file 1927 01:31:35,370 --> 01:31:37,680 just so as to not waste time typing all of these out. 1928 01:31:37,680 --> 01:31:40,830 If you've ever shared a URL on Facebook or Twitter 1929 01:31:40,830 --> 01:31:44,130 or Slack or Discord or any number of websites nowadays 1930 01:31:44,130 --> 01:31:46,860 that automatically show a nice preview where you suddenly 1931 01:31:46,860 --> 01:31:50,040 see the default image of the page, maybe a few sentences or words 1932 01:31:50,040 --> 01:31:52,170 of text or something like that. 1933 01:31:52,170 --> 01:31:54,870 Sometimes those applications, those websites, 1934 01:31:54,870 --> 01:31:56,940 will just choose the first image it finds 1935 01:31:56,940 --> 01:31:59,790 on the website or the first sentence it sees and show that. 1936 01:31:59,790 --> 01:32:03,540 But that might not be very user friendly or search engine friendly. 1937 01:32:03,540 --> 01:32:06,810 And so a developer might want to control what 1938 01:32:06,810 --> 01:32:09,990 it is that Slack, Discord, Facebook, Twitter, and other such sites 1939 01:32:09,990 --> 01:32:11,310 show by default. 1940 01:32:11,310 --> 01:32:16,170 For that you can use nowadays what are called open graph tags, which is to say 1941 01:32:16,170 --> 01:32:18,023 there's other uses of the meta tag. 1942 01:32:18,023 --> 01:32:19,440 And you just look these things up. 1943 01:32:19,440 --> 01:32:22,273 Even I had to look this up to remember what the key value pairs are. 1944 01:32:22,273 --> 01:32:25,200 The meta tag can also have a property attribute that 1945 01:32:25,200 --> 01:32:27,030 can be these very specific strings. 1946 01:32:27,030 --> 01:32:30,000 OG title, OG description, OG image, which 1947 01:32:30,000 --> 01:32:32,850 denotes Open Graph, which again, is this standard that's 1948 01:32:32,850 --> 01:32:34,230 evolved in recent years. 1949 01:32:34,230 --> 01:32:37,200 And what you can do here is tell browsers 1950 01:32:37,200 --> 01:32:41,340 and in turn servers what you want them to show as the default 1951 01:32:41,340 --> 01:32:44,610 title of the page, the description of the page, and even the default image 1952 01:32:44,610 --> 01:32:49,050 just so you can exercise more control when sharing things socially nowadays 1953 01:32:49,050 --> 01:32:49,720 as well. 1954 01:32:49,720 --> 01:32:51,937 Again, it just boils down to these key value pairs. 1955 01:32:51,937 --> 01:32:55,020 This is absolutely the kind of thing you look up as needed to cross check. 1956 01:32:55,020 --> 01:32:56,560 But those capabilities are there. 1957 01:32:56,560 --> 01:32:59,460 And so literally the next time you paste a link into Slack or Discord 1958 01:32:59,460 --> 01:33:03,810 or any online site that then displays it in embedded fashion, just 1959 01:33:03,810 --> 01:33:07,980 know that all this time a little bit of textual code like this in HTML 1960 01:33:07,980 --> 01:33:12,370 has been there by whoever authored the site. 1961 01:33:12,370 --> 01:33:12,870 All right. 1962 01:33:12,870 --> 01:33:17,940 Let's do one final example in HTML alone before we transition to just cleaning 1963 01:33:17,940 --> 01:33:20,640 up the aesthetics and improving the visuals of everything 1964 01:33:20,640 --> 01:33:21,690 we've been creating. 1965 01:33:21,690 --> 01:33:24,690 Let me go ahead here and close meta.html. 1966 01:33:24,690 --> 01:33:28,830 Let me code up a new file called how about search.html 1967 01:33:28,830 --> 01:33:31,380 and see if we can't draw some inspiration 1968 01:33:31,380 --> 01:33:35,550 from our cursory understanding earlier of how URLs work to see 1969 01:33:35,550 --> 01:33:38,170 if we can't reinvent google.com itself. 1970 01:33:38,170 --> 01:33:41,290 So recall that a canonical URL might look like this here. 1971 01:33:41,290 --> 01:33:45,590 And in particular, if you want to pass in user input to that URL, 1972 01:33:45,590 --> 01:33:48,750 again, you can potentially have a question mark 1973 01:33:48,750 --> 01:33:50,600 and then a key equals value pair. 1974 01:33:50,600 --> 01:33:53,060 Or for that matter, you can even have multiple key value 1975 01:33:53,060 --> 01:33:55,793 pairs that by convention are separated by ampersands. 1976 01:33:55,793 --> 01:33:56,960 These things are everywhere. 1977 01:33:56,960 --> 01:34:00,050 Later today when you pull up almost any website in your browser, 1978 01:34:00,050 --> 01:34:02,690 look at the URL and you'll just see a lot of this. 1979 01:34:02,690 --> 01:34:04,363 A lot of noise too and distractions. 1980 01:34:04,363 --> 01:34:06,530 But there's going to be some equal signs most likely 1981 01:34:06,530 --> 01:34:08,670 and/or some ampersands as well. 1982 01:34:08,670 --> 01:34:11,250 And those are just separating key value pairs. 1983 01:34:11,250 --> 01:34:12,630 Now, what can I do here? 1984 01:34:12,630 --> 01:34:17,060 Well, if you think back to how we manually searched for cats earlier, 1985 01:34:17,060 --> 01:34:18,110 let me quickly do this. 1986 01:34:18,110 --> 01:34:19,310 I'll do this one manually. 1987 01:34:19,310 --> 01:34:22,940 Doc type HTML as my very first line. 1988 01:34:22,940 --> 01:34:27,570 HTML tag with how about my lang attribute for English up here. 1989 01:34:27,570 --> 01:34:29,810 And then inside of this, I'll have a head tag. 1990 01:34:29,810 --> 01:34:31,340 Inside of this, I'll have a title. 1991 01:34:31,340 --> 01:34:34,400 I'll call this example search. 1992 01:34:34,400 --> 01:34:37,340 And then down here I'll have my beginning of the body tag. 1993 01:34:37,340 --> 01:34:40,820 And now let me introduce you to really a final tag for now, 1994 01:34:40,820 --> 01:34:44,750 a form tag, which will create a web form, the thing with text boxes 1995 01:34:44,750 --> 01:34:48,170 and buttons that you and I use every day on any number of websites. 1996 01:34:48,170 --> 01:34:51,710 Inside of this form, I'm going to have an input like a text box 1997 01:34:51,710 --> 01:34:54,890 whose name is going to be q for query, because I'm 1998 01:34:54,890 --> 01:34:57,110 trying to reimplement Google here. 1999 01:34:57,110 --> 01:35:01,550 The type of that I want to be a text box. 2000 01:35:01,550 --> 01:35:03,710 Or if I know I'm using this for search, I 2001 01:35:03,710 --> 01:35:05,630 can actually change this to a search box. 2002 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 2003 01:35:08,280 --> 01:35:09,500 so you can clear it quickly. 2004 01:35:09,500 --> 01:35:11,790 That's a nice little enhancement as well. 2005 01:35:11,790 --> 01:35:15,440 And then I'm going to give myself a Submit button by doing input-- 2006 01:35:15,440 --> 01:35:16,070 whoops. 2007 01:35:16,070 --> 01:35:20,840 I'm going to give myself a Submit button by doing input type equals submit. 2008 01:35:20,840 --> 01:35:24,180 And then I'll leave that as such here. 2009 01:35:24,180 --> 01:35:24,680 All right. 2010 01:35:24,680 --> 01:35:26,400 Now I need to do a little bit more. 2011 01:35:26,400 --> 01:35:27,608 But let's see how this looks. 2012 01:35:27,608 --> 01:35:29,210 Let me go over to my other tab. 2013 01:35:29,210 --> 01:35:31,110 Let me go back to my index. 2014 01:35:31,110 --> 01:35:35,550 And if I zoom out, there is search.html. 2015 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. 2016 01:35:38,910 --> 01:35:42,840 But I do indeed have a really big text box and a Submit button. 2017 01:35:42,840 --> 01:35:46,230 But I haven't in my HTML told anyone anywhere 2018 01:35:46,230 --> 01:35:50,050 that I want this input, whether I type cat or dog, to go to google.com. 2019 01:35:50,050 --> 01:35:52,050 So for that, I need a couple of more attributes. 2020 01:35:52,050 --> 01:35:53,925 And I know this from having done this before. 2021 01:35:53,925 --> 01:35:55,770 And any online reference will say the same. 2022 01:35:55,770 --> 01:35:57,413 You can add an action attribute. 2023 01:35:57,413 --> 01:35:59,580 Like what do you want the action of this form to be? 2024 01:35:59,580 --> 01:36:03,570 And you can put the URL to which you want this form to be submitted. 2025 01:36:03,570 --> 01:36:10,020 And I know from tinkering that it should be https://www.google.com/search. 2026 01:36:10,020 --> 01:36:12,600 I don't need to put any question marks here myself. 2027 01:36:12,600 --> 01:36:16,690 But I do want the browser to do that for me. 2028 01:36:16,690 --> 01:36:18,990 So let me go back to my other tab. 2029 01:36:18,990 --> 01:36:20,100 Let me reload. 2030 01:36:20,100 --> 01:36:21,990 And nothing visually has happened. 2031 01:36:21,990 --> 01:36:23,160 But watch this. 2032 01:36:23,160 --> 01:36:26,610 When I now type in cats but before I hit Enter, 2033 01:36:26,610 --> 01:36:29,940 notice that I'm currently at some long crazy URL slash 2034 01:36:29,940 --> 01:36:32,670 search.html as expected. 2035 01:36:32,670 --> 01:36:35,580 If I now go down to the Submit button and click Submit, 2036 01:36:35,580 --> 01:36:38,730 watch what happens to the URL and the page itself. 2037 01:36:38,730 --> 01:36:41,647 I'm whisked away to the actual google.com. 2038 01:36:41,647 --> 01:36:43,230 And indeed, there are those same cats. 2039 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 2040 01:36:47,160 --> 01:36:49,620 /search?q=cats. 2041 01:36:49,620 --> 01:36:51,360 So this is just how web forms work. 2042 01:36:51,360 --> 01:36:53,820 When you submit any form on the web in this way, 2043 01:36:53,820 --> 01:36:58,200 the browser automatically goes to that action URL, adds a question mark, 2044 01:36:58,200 --> 01:37:01,680 puts any key value pairs that you manually typed into the text boxes, 2045 01:37:01,680 --> 01:37:03,520 and lets the server do its thing. 2046 01:37:03,520 --> 01:37:05,880 Now here's where Chrome is starting to simplify things. 2047 01:37:05,880 --> 01:37:07,170 Safari does this too. 2048 01:37:07,170 --> 01:37:10,500 If you double click on your URL, now you see the full URL. 2049 01:37:10,500 --> 01:37:12,300 But if any parts are missing, that's just 2050 01:37:12,300 --> 01:37:16,020 a UI thing to eliminate visual distractions nowadays. 2051 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 2052 01:37:20,760 --> 01:37:25,620 Enter, now again, the URL changes to be q=dogs. 2053 01:37:25,620 --> 01:37:30,840 And it all reduces to this basic building block of using a form tag. 2054 01:37:30,840 --> 01:37:32,220 Now I can be more explicit. 2055 01:37:32,220 --> 01:37:35,370 If I know I want to use get, which is actually the default, 2056 01:37:35,370 --> 01:37:38,040 I can literally say quote unquote "get" in all lowercase, 2057 01:37:38,040 --> 01:37:40,620 even though the verb earlier was by design in uppercase. 2058 01:37:40,620 --> 01:37:42,930 But here now, I'm just being ever more explicit. 2059 01:37:42,930 --> 01:37:47,880 If I don't want the label of this button to be very generically Submit, 2060 01:37:47,880 --> 01:37:50,490 maybe I want it to be "Google Search," quote unquote. 2061 01:37:50,490 --> 01:37:52,860 Well, if you read the documentation for forms, 2062 01:37:52,860 --> 01:37:55,290 you can actually change the value of the button 2063 01:37:55,290 --> 01:37:57,610 to be quote unquote "Google Search." 2064 01:37:57,610 --> 01:38:01,390 And if I now go back here and reload, I get a fresh form. 2065 01:38:01,390 --> 01:38:04,840 And now I get a button that literally says Google Search. 2066 01:38:04,840 --> 01:38:07,900 And if I tinker with this further, because this isn't very user friendly, 2067 01:38:07,900 --> 01:38:09,840 there's even more attributes I can do. 2068 01:38:09,840 --> 01:38:15,570 I can add on my search input a autocomplete 2069 01:38:15,570 --> 01:38:19,232 equals off if I don't want to see my own history for whatever reason. 2070 01:38:19,232 --> 01:38:21,690 I don't want people knowing I'm searching for cats and dogs 2071 01:38:21,690 --> 01:38:22,440 on this page. 2072 01:38:22,440 --> 01:38:25,200 I can auto focus on the text box so that it 2073 01:38:25,200 --> 01:38:28,740 shows the cursor blinking in that box by default. 2074 01:38:28,740 --> 01:38:30,760 And I can even do something like this. 2075 01:38:30,760 --> 01:38:34,230 I can have a placeholder attribute that says something like query 2076 01:38:34,230 --> 01:38:36,600 or some other documentation for the user. 2077 01:38:36,600 --> 01:38:41,040 And if I now go back and reload, you'll see notice it says query 2078 01:38:41,040 --> 01:38:43,890 and it's subtle, but my cursor is already positioned there. 2079 01:38:43,890 --> 01:38:45,360 It gave it focus. 2080 01:38:45,360 --> 01:38:48,820 And I can type cats now without having to click in the box manually, 2081 01:38:48,820 --> 01:38:52,500 which is just marginally better for the user's experience. 2082 01:38:52,500 --> 01:38:57,740 Any questions now on all of this here? 2083 01:38:57,740 --> 01:38:59,510 Any questions? 2084 01:38:59,510 --> 01:39:00,010 All right. 2085 01:39:00,010 --> 01:39:00,802 That too was a lot. 2086 01:39:00,802 --> 01:39:02,680 Why don't we take a casual five minute break? 2087 01:39:02,680 --> 01:39:05,740 And when we resume, we'll take a look at CSS, add in some JavaScript, 2088 01:39:05,740 --> 01:39:06,460 and then wrap up. 2089 01:39:06,460 --> 01:39:08,950 So five minutes only for now. 2090 01:39:08,950 --> 01:39:10,180 All right. 2091 01:39:10,180 --> 01:39:11,110 We are back. 2092 01:39:11,110 --> 01:39:14,170 So that's technically it for HTML. 2093 01:39:14,170 --> 01:39:17,020 Here on out, it'll be up to online resources and references 2094 01:39:17,020 --> 01:39:19,600 we point you to just to fill in your vocabulary for more tags 2095 01:39:19,600 --> 01:39:20,450 and attributes. 2096 01:39:20,450 --> 01:39:21,820 But conceptually, that's it. 2097 01:39:21,820 --> 01:39:25,750 There's attributes, there are tags, and there are attributes, 2098 01:39:25,750 --> 01:39:30,310 and the rest of it really is just kind of a laundry list of possible features. 2099 01:39:30,310 --> 01:39:32,560 But it turns out too you'll see over time 2100 01:39:32,560 --> 01:39:34,630 that you can even see the HTML for websites. 2101 01:39:34,630 --> 01:39:39,760 So for instance, if I go over to harvard.edu in my browser, which 2102 01:39:39,760 --> 01:39:42,400 I'll go ahead in just a moment here and do here, 2103 01:39:42,400 --> 01:39:48,400 and do https://www.harvard.edu/ Enter, it again 2104 01:39:48,400 --> 01:39:51,080 will pull up today's version of Harvard's website. 2105 01:39:51,080 --> 01:39:54,790 And if I right click or Control click on it again and go to Inspect, 2106 01:39:54,790 --> 01:39:57,010 you'll see those so called developer tools. 2107 01:39:57,010 --> 01:39:59,920 And earlier we focused on the Network tab 2108 01:39:59,920 --> 01:40:03,010 just so we could see the HTTP stuff going on. 2109 01:40:03,010 --> 01:40:06,160 But what I glossed over earlier was the so called Elements 2110 01:40:06,160 --> 01:40:10,540 tab, which actually shows you the HTML underlying any web 2111 01:40:10,540 --> 01:40:11,750 page on the internet. 2112 01:40:11,750 --> 01:40:14,410 And so for instance, here is the underlying HTML 2113 01:40:14,410 --> 01:40:17,080 for Harvard's homepage as of right now. 2114 01:40:17,080 --> 01:40:19,090 And aesthetically, some of it's been collapsed. 2115 01:40:19,090 --> 01:40:20,890 So if I click on these various triangles, 2116 01:40:20,890 --> 01:40:22,450 I'll see what's actually inside of. 2117 01:40:22,450 --> 01:40:25,000 That is the children of some of these HTML tags. 2118 01:40:25,000 --> 01:40:26,710 But here on out if you're ever curious as 2119 01:40:26,710 --> 01:40:30,640 to how a web page made some feature visually, 2120 01:40:30,640 --> 01:40:33,070 you can just literally use these developer tools 2121 01:40:33,070 --> 01:40:37,960 built into your own browser just to see what the web developer actually did. 2122 01:40:37,960 --> 01:40:39,760 And you can do things too like this. 2123 01:40:39,760 --> 01:40:43,780 Like if you really like maybe, let's see, 2124 01:40:43,780 --> 01:40:47,620 if you really like this menu in the top right hand corner of Harvard's website, 2125 01:40:47,620 --> 01:40:52,510 you can even right click that or Control click that specifically, choose 2126 01:40:52,510 --> 01:40:57,850 Inspect, and what browsers will do is jump to the HTML corresponding 2127 01:40:57,850 --> 01:40:59,990 to that visual element on the page. 2128 01:40:59,990 --> 01:41:02,890 And here you can see that we've not talked about this tag before. 2129 01:41:02,890 --> 01:41:05,890 There's a button tag, there's an ID attribute, 2130 01:41:05,890 --> 01:41:09,670 and there's some other attributes as well that define that button. 2131 01:41:09,670 --> 01:41:12,790 You can do other things too in the web page. 2132 01:41:12,790 --> 01:41:15,110 Let me scroll down, for instance, here. 2133 01:41:15,110 --> 01:41:20,110 And actually, let's go to another one, like yale.edu here in today's theme. 2134 01:41:20,110 --> 01:41:26,770 And suppose we want to do something like change the aesthetics of this website. 2135 01:41:26,770 --> 01:41:28,300 Well, how about this? 2136 01:41:28,300 --> 01:41:29,500 Over here, Life At Yale. 2137 01:41:29,500 --> 01:41:30,670 Let's right click on this. 2138 01:41:30,670 --> 01:41:31,870 Choose Inspect. 2139 01:41:31,870 --> 01:41:34,250 That's going to jump to that part of the page. 2140 01:41:34,250 --> 01:41:36,700 And notice what you can do here in this Elements tab. 2141 01:41:36,700 --> 01:41:39,700 We can be a little playful in return today. 2142 01:41:39,700 --> 01:41:41,260 Life At Harvard. 2143 01:41:41,260 --> 01:41:45,370 And voila, we've now changed Yale's website, it would seem. 2144 01:41:45,370 --> 01:41:48,070 So have we really? 2145 01:41:48,070 --> 01:41:51,130 Hopefully hacking is not actually this easy. 2146 01:41:51,130 --> 01:41:56,110 What did we actually do based on today's mental model? 2147 01:41:56,110 --> 01:41:57,580 I have changed the page, but. 2148 01:41:57,580 --> 01:41:58,930 AUDIENCE: [INAUDIBLE] 2149 01:41:58,930 --> 01:42:00,700 DAVID MALAN: Yeah, I've just changed how it is for me. 2150 01:42:00,700 --> 01:42:03,575 Because my browser, just like with Phyllis and Brian from the get go, 2151 01:42:03,575 --> 01:42:05,080 requested Yale's web page. 2152 01:42:05,080 --> 01:42:08,950 I got back a virtual envelope containing that HTML, as we've now called it. 2153 01:42:08,950 --> 01:42:10,420 My browser has a local copy. 2154 01:42:10,420 --> 01:42:13,720 It's got its own tree, otherwise known as a DOM, Document Object Model, 2155 01:42:13,720 --> 01:42:14,950 built up in its memory. 2156 01:42:14,950 --> 01:42:18,080 And yeah, I went to town and changed my copy of it. 2157 01:42:18,080 --> 01:42:20,890 But of course, hopefully, I've not changed the actual server. 2158 01:42:20,890 --> 01:42:24,130 And in fact, if I reload Yale's website now, 2159 01:42:24,130 --> 01:42:28,840 hopefully it will revert back to, indeed, what it should be instead. 2160 01:42:28,840 --> 01:42:29,830 Life At Yale. 2161 01:42:29,830 --> 01:42:34,505 But this ability in your own browser, be it Chrome or Firefox or Edge or Safari, 2162 01:42:34,505 --> 01:42:36,880 to have these built in developer tools are very powerful, 2163 01:42:36,880 --> 01:42:39,520 because it's going to enable you to not only diagnose 2164 01:42:39,520 --> 01:42:43,000 problems that will invariably arise in the coming weeks with your own code, 2165 01:42:43,000 --> 01:42:45,430 but it's also going to allow you to learn from other sites 2166 01:42:45,430 --> 01:42:48,080 how you can do things and tinker as well. 2167 01:42:48,080 --> 01:42:51,340 But up until now, we've focused only on tags and attributes 2168 01:42:51,340 --> 01:42:53,620 and on the structure of a web page. 2169 01:42:53,620 --> 01:42:56,830 Let's now focus more on the aesthetics and fine tuning that. 2170 01:42:56,830 --> 01:42:59,770 It turns out that HTML has very limited support 2171 01:42:59,770 --> 01:43:03,920 for anything aesthetic like font sizes and colors and so forth. 2172 01:43:03,920 --> 01:43:08,110 And in recent years, people have used necessarily a second language 2173 01:43:08,110 --> 01:43:09,040 called CSS. 2174 01:43:09,040 --> 01:43:10,330 Not a programming language. 2175 01:43:10,330 --> 01:43:13,240 Again, a markup language, if you will, to just fine 2176 01:43:13,240 --> 01:43:14,680 tune the aesthetics of a page. 2177 01:43:14,680 --> 01:43:17,360 Font sizes, colors, margins, and all of that. 2178 01:43:17,360 --> 01:43:21,250 So CSS is going to allow us to define a whole bunch of properties, 2179 01:43:21,250 --> 01:43:25,690 which is just another group of people's terminology for key value pairs. 2180 01:43:25,690 --> 01:43:29,870 Indeed, ever since week five, key value pairs are everywhere in the world, 2181 01:43:29,870 --> 01:43:32,300 not just at Sweetgreen and restaurants, but indeed 2182 01:43:32,300 --> 01:43:36,340 under inline code and languages and technologies like these. 2183 01:43:36,340 --> 01:43:39,970 So properties is the new word in CSS for what a moment ago we 2184 01:43:39,970 --> 01:43:41,410 called attributes in HTML. 2185 01:43:41,410 --> 01:43:43,510 But it's the same idea, just different vocabulary 2186 01:43:43,510 --> 01:43:45,430 that you get used to over time. 2187 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. 2188 01:43:50,260 --> 01:43:52,330 Type selector, class selector, ID selector, 2189 01:43:52,330 --> 01:43:55,390 attribute selector, which just refer to different techniques we're 2190 01:43:55,390 --> 01:43:58,210 about to see that are going to allow you to control more 2191 01:43:58,210 --> 01:44:01,248 precisely the aesthetics of specific things on the page. 2192 01:44:01,248 --> 01:44:03,040 And the way we're going to do this is we're 2193 01:44:03,040 --> 01:44:05,838 going to take our basic HTML, like we saw earlier, 2194 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 2195 01:44:09,130 --> 01:44:10,090 and/or attributes. 2196 01:44:10,090 --> 01:44:16,990 One, we're going to introduce you to a tag called style, which nicely named 2197 01:44:16,990 --> 01:44:19,300 allows you to control the style, the aesthetics, 2198 01:44:19,300 --> 01:44:20,950 the visuals of the web page. 2199 01:44:20,950 --> 01:44:22,930 Or we're going to introduce you to a link 2200 01:44:22,930 --> 01:44:27,400 tag, which very confusingly does not give you a link that you can click on. 2201 01:44:27,400 --> 01:44:31,510 It just links to another file that then gets automatically included 2202 01:44:31,510 --> 01:44:34,990 or imported, to borrow our language from C or in Python. 2203 01:44:34,990 --> 01:44:36,110 But same idea. 2204 01:44:36,110 --> 01:44:38,230 This will allow us to include secondary files. 2205 01:44:38,230 --> 01:44:41,500 And we're going to ultimately show you how you can leverage third party 2206 01:44:41,500 --> 01:44:43,870 frameworks, libraries that other people wrote, 2207 01:44:43,870 --> 01:44:47,040 so as to not get stuck in the weeds of all the fine tuning of aesthetics 2208 01:44:47,040 --> 01:44:50,290 and just make pretty things fast so you can focus really on the intellectually 2209 01:44:50,290 --> 01:44:54,220 interesting part, if that's your choice, of building the content, the site out, 2210 01:44:54,220 --> 01:44:56,090 the application out yourself. 2211 01:44:56,090 --> 01:44:58,840 All right, so with that said, let me go back to VS Code here. 2212 01:44:58,840 --> 01:45:02,680 And let me go ahead and create a simple example called home.html. 2213 01:45:02,680 --> 01:45:06,010 A very simple home page for John Harvard, for instance. 2214 01:45:06,010 --> 01:45:09,400 Let me give myself three paragraphs initially, the first of which 2215 01:45:09,400 --> 01:45:11,740 is just going to have the person's name. 2216 01:45:11,740 --> 01:45:16,510 The second paragraph is going to say something like welcome to my home page 2217 01:45:16,510 --> 01:45:17,530 to greet visitors. 2218 01:45:17,530 --> 01:45:21,640 And the third is going to be a little footer like copyright 2219 01:45:21,640 --> 01:45:26,530 how about John Harvard 1636 or something like that. 2220 01:45:26,530 --> 01:45:28,960 All right, let me go back to my other tab as before. 2221 01:45:28,960 --> 01:45:30,220 Reload my index. 2222 01:45:30,220 --> 01:45:31,240 There's my new file. 2223 01:45:31,240 --> 01:45:33,640 Home.html and I'll click that. 2224 01:45:33,640 --> 01:45:37,300 And you'll see, OK, I mean, this is sort of 1636 style web page. 2225 01:45:37,300 --> 01:45:41,320 Super simple, all text, nothing really interesting going on there. 2226 01:45:41,320 --> 01:45:44,290 But we can start to style it a little differently. 2227 01:45:44,290 --> 01:45:46,810 If the title of the page is John Harvard and then it's 2228 01:45:46,810 --> 01:45:49,330 welcome to my home page and then this less important footer, 2229 01:45:49,330 --> 01:45:52,390 why don't we have the text be large, then medium, then small? 2230 01:45:52,390 --> 01:45:54,730 So something arbitrary but a little more nuanced. 2231 01:45:54,730 --> 01:45:57,410 So let me go back to VS Code here. 2232 01:45:57,410 --> 01:46:02,800 And in my home.html file, let me introduce not yet the style tag 2233 01:46:02,800 --> 01:46:05,530 but what I'm going to call temporarily the style attribute. 2234 01:46:05,530 --> 01:46:06,790 Both indeed exist. 2235 01:46:06,790 --> 01:46:09,110 This one's simpler and it's going to be correct, 2236 01:46:09,110 --> 01:46:11,980 but we'll see in a moment not as well designed, arguably, 2237 01:46:11,980 --> 01:46:13,490 as is often our narrative. 2238 01:46:13,490 --> 01:46:17,860 So inside of the style tag, you can put this language called CSS. 2239 01:46:17,860 --> 01:46:20,590 Key value pairs, otherwise known as properties. 2240 01:46:20,590 --> 01:46:23,620 The only way you know what properties exist, what keys exist, 2241 01:46:23,620 --> 01:46:26,513 is by taking a class, reading a book, looking at an online reference. 2242 01:46:26,513 --> 01:46:29,180 And we're going to give you just a sampling of what's out there. 2243 01:46:29,180 --> 01:46:32,890 So suppose I want to control the font size of this first paragraph. 2244 01:46:32,890 --> 01:46:37,720 I can literally say font-size in all lowercase, colon, and then a word 2245 01:46:37,720 --> 01:46:38,560 like large. 2246 01:46:38,560 --> 01:46:42,190 Or I can specify 12 point or 18 point or something 2247 01:46:42,190 --> 01:46:45,490 more precise like from Google Docs or Microsoft Word. 2248 01:46:45,490 --> 01:46:50,260 And suppose I want to make this text down here medium. 2249 01:46:50,260 --> 01:46:54,340 Well, I'll do quote unquote font size colon medium. 2250 01:46:54,340 --> 01:47:00,850 And down here or I'll do style equals font-size small. 2251 01:47:00,850 --> 01:47:03,970 So I'm going to start with just these three key value pairs. 2252 01:47:03,970 --> 01:47:06,033 Same key but different values. 2253 01:47:06,033 --> 01:47:08,200 I'll go back to my page and in a moment I'll reload, 2254 01:47:08,200 --> 01:47:09,742 and it's going to be somewhat subtle. 2255 01:47:09,742 --> 01:47:13,490 But watch how the font size do change when I reload now. 2256 01:47:13,490 --> 01:47:13,990 All right. 2257 01:47:13,990 --> 01:47:15,157 So I've got a little bigger. 2258 01:47:15,157 --> 01:47:18,223 Middle one is about the same, and the last one is a little smaller. 2259 01:47:18,223 --> 01:47:19,390 What if I want to center it? 2260 01:47:19,390 --> 01:47:22,000 Just like many web pages have the text like this centered. 2261 01:47:22,000 --> 01:47:25,060 Well, I can separate these key value pairs with semicolons. 2262 01:47:25,060 --> 01:47:28,180 And I'm sorry, semicolons are kind of sort of back with CSS. 2263 01:47:28,180 --> 01:47:31,510 But I can do text-align:center. 2264 01:47:31,510 --> 01:47:34,150 Strictly speaking, I don't need the last semicolon 2265 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. 2266 01:47:38,140 --> 01:47:40,540 Text-align:center. 2267 01:47:40,540 --> 01:47:46,060 And then down here after another semicolon, text-align:center. 2268 01:47:46,060 --> 01:47:47,770 All right, let's go back, reload. 2269 01:47:47,770 --> 01:47:49,930 Now it's going to be much more obvious the change. 2270 01:47:49,930 --> 01:47:52,420 And we now have the beginnings of a homepage. 2271 01:47:52,420 --> 01:47:55,270 Still pretty basic, but at least it's a little more interesting. 2272 01:47:55,270 --> 01:47:58,060 Turns out we can do a little better with the copyright symbol. 2273 01:47:58,060 --> 01:48:01,960 Like most computers actually have support for a circle with a C in it. 2274 01:48:01,960 --> 01:48:05,503 But you can't just do that with text like this. 2275 01:48:05,503 --> 01:48:06,920 There's different ways to do this. 2276 01:48:06,920 --> 01:48:09,337 You could copy paste it from a website that already has it 2277 01:48:09,337 --> 01:48:12,670 so you don't have to figure out the magical keystroke on your Mac or PC. 2278 01:48:12,670 --> 01:48:15,160 But there's also in HTML what are called entities. 2279 01:48:15,160 --> 01:48:19,780 And you can actually specify using hexadecimal or decimal codes 2280 01:48:19,780 --> 01:48:24,970 numbers like this, hash 169 semicolon after an ampersand. 2281 01:48:24,970 --> 01:48:27,340 And this is a special symbol that you can look up 2282 01:48:27,340 --> 01:48:29,710 in any online reference for special characters 2283 01:48:29,710 --> 01:48:33,190 that are hard or impossible to type manually at your keyboard. 2284 01:48:33,190 --> 01:48:35,920 And this, let me zoom in just so it's obvious, 2285 01:48:35,920 --> 01:48:40,990 if I reload now instead of being two parentheses and a C character, 2286 01:48:40,990 --> 01:48:43,400 now it's a proper copyright symbol. 2287 01:48:43,400 --> 01:48:44,650 So you'll see these out there. 2288 01:48:44,650 --> 01:48:47,410 They're not necessarily that frequently used nowadays, 2289 01:48:47,410 --> 01:48:49,330 but it's good to know that they exist. 2290 01:48:49,330 --> 01:48:53,860 But let me go back now to my code and propose that while correct, 2291 01:48:53,860 --> 01:48:56,650 this is arguably not very well designed. 2292 01:48:56,650 --> 01:48:59,980 And even if you've never seen HTML, never seen CSS before, 2293 01:48:59,980 --> 01:49:07,080 what instinct might you have for why this is poorly designed? 2294 01:49:07,080 --> 01:49:08,085 Yeah. 2295 01:49:08,085 --> 01:49:08,987 AUDIENCE: [INAUDIBLE] 2296 01:49:08,987 --> 01:49:10,320 DAVID MALAN: There's repetition. 2297 01:49:10,320 --> 01:49:13,110 In general in the past several weeks, C, Python, SQL, 2298 01:49:13,110 --> 01:49:16,992 repetition generally bad and sloppy and it's not going to scale well. 2299 01:49:16,992 --> 01:49:19,200 So the repetition I think you're probably alluding to 2300 01:49:19,200 --> 01:49:22,440 is text align center, text align center, text align center. 2301 01:49:22,440 --> 01:49:25,350 Well, we can factor that out in CSS. 2302 01:49:25,350 --> 01:49:27,930 The C in CSS means Cascading. 2303 01:49:27,930 --> 01:49:30,750 And this means that if you move some properties 2304 01:49:30,750 --> 01:49:35,250 to a parent or a grandparent, the children or grandchildren 2305 01:49:35,250 --> 01:49:37,020 will inherit those properties. 2306 01:49:37,020 --> 01:49:40,330 That is, they will cascade down the family tree, so to speak. 2307 01:49:40,330 --> 01:49:42,930 And so let me go ahead and remove all of these, 2308 01:49:42,930 --> 01:49:45,660 since I claim they're indeed redundant. 2309 01:49:45,660 --> 01:49:49,900 And let me preserve just one of them by, well, let me do this. 2310 01:49:49,900 --> 01:49:53,400 It's not quite right to put a paragraph inside of a paragraph. 2311 01:49:53,400 --> 01:49:56,950 That's just not a thing in English writing or in writing more generally. 2312 01:49:56,950 --> 01:49:58,770 So I'm going to do one thing first. 2313 01:49:58,770 --> 01:50:01,830 It turns out that these two are arguably not paragraphs. 2314 01:50:01,830 --> 01:50:04,890 This is like a header, the body, the essence of the page, 2315 01:50:04,890 --> 01:50:05,850 and then the footer. 2316 01:50:05,850 --> 01:50:09,880 So if a paragraph isn't quite the right English semantics, 2317 01:50:09,880 --> 01:50:11,760 you can actually use more generically a tag 2318 01:50:11,760 --> 01:50:15,520 that's all over the internet called div for division of the page. 2319 01:50:15,520 --> 01:50:19,320 And this is just a very generic term for a big rectangular region 2320 01:50:19,320 --> 01:50:21,720 that divides the page again and again, just so that you 2321 01:50:21,720 --> 01:50:23,920 can think about different regions. 2322 01:50:23,920 --> 01:50:27,420 Now that I have div, which really has no more meaning than that. 2323 01:50:27,420 --> 01:50:28,710 It's a division of the page. 2324 01:50:28,710 --> 01:50:29,850 Interpret as you will. 2325 01:50:29,850 --> 01:50:32,080 Now I can have multiple ones of these. 2326 01:50:32,080 --> 01:50:34,710 And let me go ahead and open a div tag here. 2327 01:50:34,710 --> 01:50:37,210 Let me close a new div tag here. 2328 01:50:37,210 --> 01:50:39,312 And then just to keep everything tidy, I'm 2329 01:50:39,312 --> 01:50:41,520 going to highlight everything in between and hit Tab. 2330 01:50:41,520 --> 01:50:44,130 And that just automatically indents everything for me. 2331 01:50:44,130 --> 01:50:48,970 Now I have three divs inside of another div, and that's totally fine. 2332 01:50:48,970 --> 01:50:50,460 This is very commonly done. 2333 01:50:50,460 --> 01:50:51,750 Now I'm going to do this. 2334 01:50:51,750 --> 01:50:57,960 Style equals quote unquote text align colon center semicolon or not. 2335 01:50:57,960 --> 01:51:01,020 And now I have some cascading capabilities. 2336 01:51:01,020 --> 01:51:05,040 Now the parent of those three children, John harvard, welcome to my home page, 2337 01:51:05,040 --> 01:51:07,900 and the copyright will now all inherit that property. 2338 01:51:07,900 --> 01:51:10,650 So when I hit reload, nothing aesthetically has changed. 2339 01:51:10,650 --> 01:51:13,350 Whoops, sorry. 2340 01:51:13,350 --> 01:51:15,420 I should have done reload slightly earlier. 2341 01:51:15,420 --> 01:51:17,610 When you use a div instead of a paragraph, 2342 01:51:17,610 --> 01:51:20,968 it actually gets rid of the space between those paragraphs. 2343 01:51:20,968 --> 01:51:23,010 It just sandwiches them a little closer together. 2344 01:51:23,010 --> 01:51:24,690 I can fix this in another way. 2345 01:51:24,690 --> 01:51:27,330 But that aside, everything is still centered 2346 01:51:27,330 --> 01:51:29,970 and the text is still large, medium, and small. 2347 01:51:29,970 --> 01:51:32,760 But I should have called out that change in the paragraph spacing. 2348 01:51:32,760 --> 01:51:35,650 But we could bring that back before long if we wanted. 2349 01:51:35,650 --> 01:51:38,800 Now, what more could I do to maybe improve this? 2350 01:51:38,800 --> 01:51:42,630 Well, strictly speaking, I don't really need that parent div 2351 01:51:42,630 --> 01:51:46,200 because these three divs inside already had a parent. 2352 01:51:46,200 --> 01:51:49,620 So let me actually get rid of that new div just to undo what I did. 2353 01:51:49,620 --> 01:51:50,580 I'll highlight this. 2354 01:51:50,580 --> 01:51:52,680 And if you haven't seen this trick, Shift Tab 2355 01:51:52,680 --> 01:51:55,380 will unindent nicely, which is perhaps helpful. 2356 01:51:55,380 --> 01:51:59,200 I could just put that text align center on the body tag. 2357 01:51:59,200 --> 01:52:03,810 So text align colon center quote unquote. 2358 01:52:03,810 --> 01:52:07,770 This too would work as well so long as you go up the family tree, so 2359 01:52:07,770 --> 01:52:11,160 to speak, reload, and now indeed there's nothing aesthetically 2360 01:52:11,160 --> 01:52:13,080 that has changed this time. 2361 01:52:13,080 --> 01:52:16,140 But it turns out nowadays the web is getting a little more sophisticated. 2362 01:52:16,140 --> 01:52:19,080 And even though you will see so many examples online, in tutorials, 2363 01:52:19,080 --> 01:52:21,870 in books using div, div, div all over the place, 2364 01:52:21,870 --> 01:52:24,050 there are newer semantic tags. 2365 01:52:24,050 --> 01:52:25,800 Semantic just means they have more meaning 2366 01:52:25,800 --> 01:52:27,670 than this generic notion of a division. 2367 01:52:27,670 --> 01:52:31,050 And if you look up a documentation for HTML, 2368 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 2369 01:52:34,680 --> 01:52:38,910 like H1, H2 but a header, there's literally nowadays a header tag. 2370 01:52:38,910 --> 01:52:42,240 And this is marginally better because it now says what it is. 2371 01:52:42,240 --> 01:52:44,860 Search engines like Google and Bing can detect, oh, 2372 01:52:44,860 --> 01:52:46,110 that's the header of the page. 2373 01:52:46,110 --> 01:52:49,235 Maybe we should use this and give it more prominence in the search results. 2374 01:52:49,235 --> 01:52:51,220 You can then have a main part of the page. 2375 01:52:51,220 --> 01:52:53,460 So literally a tag called main nowadays. 2376 01:52:53,460 --> 01:52:55,500 You can literally have a footer of the page. 2377 01:52:55,500 --> 01:52:58,470 And again, these are often useful for screen readers 2378 01:52:58,470 --> 01:53:01,170 to help recite things verbally for folks who might otherwise not 2379 01:53:01,170 --> 01:53:02,045 be able to read them. 2380 01:53:02,045 --> 01:53:06,510 And probably the screen readers might highlight the header and the main part 2381 01:53:06,510 --> 01:53:08,640 but maybe might not spend time for the user 2382 01:53:08,640 --> 01:53:11,820 on the footer, which is arguably a little less important semantically 2383 01:53:11,820 --> 01:53:12,840 usually. 2384 01:53:12,840 --> 01:53:14,893 Or search engines, again, now know what's 2385 01:53:14,893 --> 01:53:17,560 the header, what's the footer, what's the main part of the page. 2386 01:53:17,560 --> 01:53:20,020 So they know what to search and analyze. 2387 01:53:20,020 --> 01:53:25,270 So this would arguably be a better design nowadays as well. 2388 01:53:25,270 --> 01:53:28,060 But what else remains as a problem? 2389 01:53:28,060 --> 01:53:32,040 Well, this is now getting a little bit more subtle and takes some experience. 2390 01:53:32,040 --> 01:53:36,360 But this practice of putting HTML and CSS all in the same file, 2391 01:53:36,360 --> 01:53:37,450 it's a little sloppy. 2392 01:53:37,450 --> 01:53:37,950 Why? 2393 01:53:37,950 --> 01:53:42,180 Because it means I'm comingling my data with the presentation thereof. 2394 01:53:42,180 --> 01:53:45,210 The juicy stuff I care about, like John Harvard and the phrase 2395 01:53:45,210 --> 01:53:47,910 welcome to my home page, and all of the aesthetics 2396 01:53:47,910 --> 01:53:49,530 that I might want to change over time. 2397 01:53:49,530 --> 01:53:52,548 And honestly, because everything is currently in one big file, 2398 01:53:52,548 --> 01:53:54,840 it's going to make it really hard for me to collaborate 2399 01:53:54,840 --> 01:53:57,430 with a classmate or a colleague at work. 2400 01:53:57,430 --> 01:53:59,790 So that maybe I do the HTML, they do the CSS. 2401 01:53:59,790 --> 01:54:01,910 Uh-uh, not if you're all working in the same file. 2402 01:54:01,910 --> 01:54:02,910 It would be a nightmare. 2403 01:54:02,910 --> 01:54:06,000 Even if you use a VS Code sharing feature like Google Docs 2404 01:54:06,000 --> 01:54:09,230 and both are typing at the same time, you're going to mess up somehow. 2405 01:54:09,230 --> 01:54:11,990 It'd be nice if we could separate these two languages. 2406 01:54:11,990 --> 01:54:14,490 Well, one way to do that would be as follows. 2407 01:54:14,490 --> 01:54:16,910 Let me get rid of all of the style tags. 2408 01:54:16,910 --> 01:54:21,310 Sorry, style attributes that I've added up until now 2409 01:54:21,310 --> 01:54:23,710 on all four now of these tags. 2410 01:54:23,710 --> 01:54:29,350 And let me introduce the style tag that we saw on the slide earlier instead. 2411 01:54:29,350 --> 01:54:31,900 I'm going to go up here into the head of the page, which 2412 01:54:31,900 --> 01:54:35,650 is where technically these style tags must go so that they're already 2413 01:54:35,650 --> 01:54:39,250 loaded into memory before the body is even analyzed by the browser. 2414 01:54:39,250 --> 01:54:41,860 And inside of the style tag, I'm actually 2415 01:54:41,860 --> 01:54:47,720 going to select the HTML elements that I want to stylize, if you will. 2416 01:54:47,720 --> 01:54:50,110 So if I want to change the body's aesthetics, 2417 01:54:50,110 --> 01:54:52,450 I'm going to literally type the name of that tag body. 2418 01:54:52,450 --> 01:54:55,480 And then, I'm sorry, curly braces are back also 2419 01:54:55,480 --> 01:55:01,390 from C. Inside of these curly braces, I'm going to put text align center. 2420 01:55:01,390 --> 01:55:03,260 So the key value pairs are the same. 2421 01:55:03,260 --> 01:55:06,130 The only new thing I've done is I've moved some of the syntax 2422 01:55:06,130 --> 01:55:08,530 up to this new style tag in the head. 2423 01:55:08,530 --> 01:55:11,930 If I want to now control the header tag as well, 2424 01:55:11,930 --> 01:55:13,390 I can use the same curly braces. 2425 01:55:13,390 --> 01:55:17,020 This is convention to put the open curly brace on the same line, the closed 2426 01:55:17,020 --> 01:55:18,430 curly brace on another. 2427 01:55:18,430 --> 01:55:22,270 The browser doesn't really care, but this is a common CSS style convention. 2428 01:55:22,270 --> 01:55:25,570 I'm going to do font size large semicolon. 2429 01:55:25,570 --> 01:55:29,620 Then for the main tag, I'm going to do font size medium. 2430 01:55:29,620 --> 01:55:34,000 And then for the footer tag, I'm going to do font size small. 2431 01:55:34,000 --> 01:55:35,320 So same exact thing. 2432 01:55:35,320 --> 01:55:37,473 And it's admittedly a little bit more verbose. 2433 01:55:37,473 --> 01:55:38,890 It's taking up more lines of code. 2434 01:55:38,890 --> 01:55:40,700 It doesn't all quite fit on the screen. 2435 01:55:40,700 --> 01:55:44,455 But if you scroll back down now, and you'll acquire an eye for this, 2436 01:55:44,455 --> 01:55:46,210 this is just better. 2437 01:55:46,210 --> 01:55:47,540 It's just more compact. 2438 01:55:47,540 --> 01:55:48,700 It's more readable. 2439 01:55:48,700 --> 01:55:52,430 The content, the data jumps out, and there's no visual distractions 2440 01:55:52,430 --> 01:55:55,330 like the CSS properties as before. 2441 01:55:55,330 --> 01:55:58,597 Upside here too is that we don't actually need to-- 2442 01:55:58,597 --> 01:56:00,430 this doesn't actually change the aesthetics. 2443 01:56:00,430 --> 01:56:03,320 If I reload the same page, it still looks the same. 2444 01:56:03,320 --> 01:56:06,880 But I've taken a step toward some slightly better design. 2445 01:56:06,880 --> 01:56:09,820 But let me propose that there's other ways to do this too. 2446 01:56:09,820 --> 01:56:14,382 We just selected things by way of their type. 2447 01:56:14,382 --> 01:56:16,840 So that was a so called type selector when I literally just 2448 01:56:16,840 --> 01:56:18,010 specified the type of tag. 2449 01:56:18,010 --> 01:56:20,890 Body, header, main, footer. 2450 01:56:20,890 --> 01:56:23,890 But there's other ways that now we can lay the foundation 2451 01:56:23,890 --> 01:56:27,430 for making reusable CSS that you and colleagues and classmates 2452 01:56:27,430 --> 01:56:31,790 can use and reuse in multiple files and even in multiple projects. 2453 01:56:31,790 --> 01:56:33,590 So let me actually go ahead and do this. 2454 01:56:33,590 --> 01:56:37,240 Instead of just very explicitly saying I want the body to be centered, 2455 01:56:37,240 --> 01:56:43,030 let me invent an adjective, if you will, and let me change this to .centered. 2456 01:56:43,030 --> 01:56:48,730 And this new vocabulary word, centered, will literally mean text align center. 2457 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, 2458 01:56:53,800 --> 01:56:58,540 a new adjective called medium, and a new adjective called small. 2459 01:56:58,540 --> 01:57:02,260 They are deliberately consistent with what the properties do. 2460 01:57:02,260 --> 01:57:04,810 But these are now my own vocabulary words. 2461 01:57:04,810 --> 01:57:06,970 And they are called classes. 2462 01:57:06,970 --> 01:57:11,740 So a class is just a collection of key value pairs, a collection of properties 2463 01:57:11,740 --> 01:57:14,200 that you get to invent for yourself. 2464 01:57:14,200 --> 01:57:16,360 And what it lets you do now is this. 2465 01:57:16,360 --> 01:57:21,230 Now if I want the whole body to be centered, I can add this tag, 2466 01:57:21,230 --> 01:57:25,660 which we actually saw briefly in Yale's HTML, class=center. 2467 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". 2468 01:57:30,940 --> 01:57:35,140 Down here on main, I can say class="medium". 2469 01:57:35,140 --> 01:57:38,650 And down here I can have class="small". 2470 01:57:38,650 --> 01:57:42,760 Now, I have taken one step backward by re-adding some of the aesthetics 2471 01:57:42,760 --> 01:57:43,540 to the page. 2472 01:57:43,540 --> 01:57:45,520 But it's not the actual properties. 2473 01:57:45,520 --> 01:57:46,960 It's not the key value pairs. 2474 01:57:46,960 --> 01:57:48,850 It's now more semantically nice, because now 2475 01:57:48,850 --> 01:57:52,930 I just know from reading the HTML what these things are going to look like, 2476 01:57:52,930 --> 01:57:56,680 whereas the implementation details for all four of those adjectives 2477 01:57:56,680 --> 01:57:58,125 is now relegated up above. 2478 01:57:58,125 --> 01:57:59,500 And these are literally my words. 2479 01:57:59,500 --> 01:58:03,040 I could change it to .foo and use class="foo" 2480 01:58:03,040 --> 01:58:07,120 but obviously that would not be the best choice of words in this case. 2481 01:58:07,120 --> 01:58:08,170 All right. 2482 01:58:08,170 --> 01:58:11,240 Any questions on this? 2483 01:58:11,240 --> 01:58:16,153 This now is what we would call a class selector by using literally the dot, 2484 01:58:16,153 --> 01:58:18,070 even though the dot does not appear elsewhere, 2485 01:58:18,070 --> 01:58:21,700 but dot means this is a class. 2486 01:58:21,700 --> 01:58:25,490 These are not always the best syntactic design decisions that the world makes. 2487 01:58:25,490 --> 01:58:25,990 All right. 2488 01:58:25,990 --> 01:58:27,460 Well, one last trick then. 2489 01:58:27,460 --> 01:58:30,078 Notice that this is a little annoying that I'm still 2490 01:58:30,078 --> 01:58:31,120 working in the same file. 2491 01:58:31,120 --> 01:58:33,190 And if my classmate wants to clean up my aesthetics, 2492 01:58:33,190 --> 01:58:36,190 make my homepage look way better, if my colleague wants to do the same, 2493 01:58:36,190 --> 01:58:39,160 wouldn't it be nice if we could actually move all of this code 2494 01:58:39,160 --> 01:58:43,120 to a different file like a Python library or a C header file? 2495 01:58:43,120 --> 01:58:44,170 Well, you can. 2496 01:58:44,170 --> 01:58:47,740 Let me go ahead and delete that whole style tag. 2497 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 2498 01:58:54,280 --> 01:58:56,290 styles.css. 2499 01:58:56,290 --> 01:59:00,670 And let's say that the relationship of that file is that of stylesheet. 2500 01:59:00,670 --> 01:59:03,610 So this is a term of art in the world of web development. 2501 01:59:03,610 --> 01:59:05,770 A stylesheet is a text file that contains 2502 01:59:05,770 --> 01:59:08,140 lots of styles, lots of CSS properties. 2503 01:59:08,140 --> 01:59:10,630 Let me open my terminal real fast. 2504 01:59:10,630 --> 01:59:16,390 And let me do code of styles.css. 2505 01:59:16,390 --> 01:59:17,200 Enter. 2506 01:59:17,200 --> 01:59:20,800 And in this file, I'm going to paste all of those same lines as earlier. 2507 01:59:20,800 --> 01:59:22,570 But now they're in a separate file. 2508 01:59:22,570 --> 01:59:25,930 And indeed, if I hide my terminal window and I give this file to a colleague, 2509 01:59:25,930 --> 01:59:27,910 they can now work on the aesthetics of the page 2510 01:59:27,910 --> 01:59:29,620 and make things a lot prettier than this, maybe use 2511 01:59:29,620 --> 01:59:32,020 specific font sizes, maybe add colors and the like. 2512 01:59:32,020 --> 01:59:36,520 Whereas I can focus entirely on the HTML, because this file now 2513 01:59:36,520 --> 01:59:37,840 will reference that other. 2514 01:59:37,840 --> 01:59:40,120 And if I go back to my other tab and reload, 2515 01:59:40,120 --> 01:59:42,280 the content's going to be exactly the same, 2516 01:59:42,280 --> 01:59:48,020 but now I'm using some separate file instead. 2517 01:59:48,020 --> 01:59:53,260 Any questions now about these techniques here? 2518 01:59:53,260 --> 01:59:53,990 No? 2519 01:59:53,990 --> 01:59:58,330 All right, so with that said, let me show just one example now 2520 01:59:58,330 --> 02:00:00,075 of what I called a moment ago frameworks. 2521 02:00:00,075 --> 02:00:02,200 And this is where web development gets kind of fun, 2522 02:00:02,200 --> 02:00:03,610 at least if you like this, especially if you 2523 02:00:03,610 --> 02:00:06,190 like the sort of logical design, the presentation of information 2524 02:00:06,190 --> 02:00:07,898 you care about, but you really don't want 2525 02:00:07,898 --> 02:00:11,260 to struggle with font sizes and colors and getting everything pixel perfect, 2526 02:00:11,260 --> 02:00:12,110 so to speak. 2527 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 2528 02:00:16,360 --> 02:00:18,340 that I prepared in advance. 2529 02:00:18,340 --> 02:00:22,750 And this one is going to be an opportunity 2530 02:00:22,750 --> 02:00:27,220 to consider how you might take some of the data from last week, 2531 02:00:27,220 --> 02:00:29,410 wherein we collected everyone's favorites, 2532 02:00:29,410 --> 02:00:31,587 and lay it out in a really big HTML table. 2533 02:00:31,587 --> 02:00:34,420 So I wrote this out in advance because it was a huge amount of data, 2534 02:00:34,420 --> 02:00:37,060 but it's the same data from the Google Form from last week. 2535 02:00:37,060 --> 02:00:41,000 And you'll see already the hints of a table tag and these TRs. 2536 02:00:41,000 --> 02:00:43,180 And I added a few other tags for aesthetics. 2537 02:00:43,180 --> 02:00:46,120 It turns out when you have a more visually interesting header 2538 02:00:46,120 --> 02:00:48,850 for your table, there's another tag called thead. 2539 02:00:48,850 --> 02:00:50,427 There's another tag called tbody. 2540 02:00:50,427 --> 02:00:52,510 These are not all that intellectually interesting. 2541 02:00:52,510 --> 02:00:55,690 I just read the documentation and realized, oh, to make things prettier 2542 02:00:55,690 --> 02:00:58,160 I need a thead, a tbody, and so forth. 2543 02:00:58,160 --> 02:01:01,240 But what's interesting here is that if I go to my index 2544 02:01:01,240 --> 02:01:04,540 here and open this file called favorites.html, 2545 02:01:04,540 --> 02:01:08,180 here's all of the data from last week's Google spreadsheet, 2546 02:01:08,180 --> 02:01:13,450 which we exported as CSV and I manually before class converted to just HTML. 2547 02:01:13,450 --> 02:01:16,210 It's indeed a table, but it's really not pretty. 2548 02:01:16,210 --> 02:01:18,100 The columns are really close together. 2549 02:01:18,100 --> 02:01:20,440 It's kind of hard to distinguish one row from another. 2550 02:01:20,440 --> 02:01:23,020 But this is just raw HTML written by me. 2551 02:01:23,020 --> 02:01:26,080 Now, I could use CSS and some of the tricks we just 2552 02:01:26,080 --> 02:01:27,910 saw to maybe change font size. 2553 02:01:27,910 --> 02:01:31,640 There's ways to change color, background color, and a lot of things like that. 2554 02:01:31,640 --> 02:01:34,480 But honestly, surely other people in the world 2555 02:01:34,480 --> 02:01:37,210 have presented tabular data in pretty ways. 2556 02:01:37,210 --> 02:01:40,030 I've been to many websites that have prettier tables than mine. 2557 02:01:40,030 --> 02:01:44,980 Can I maybe use someone else's framework, someone else's CSS 2558 02:01:44,980 --> 02:01:48,010 included in my page but don't stand on their shoulders 2559 02:01:48,010 --> 02:01:50,110 and just make my stuff look prettier? 2560 02:01:50,110 --> 02:01:51,490 Well, I dare say I can. 2561 02:01:51,490 --> 02:01:55,570 Let me go ahead here and semi secretly open up VS Code again. 2562 02:01:55,570 --> 02:01:59,770 And let me grab a slightly different version of favorites.html 2563 02:01:59,770 --> 02:02:06,490 that I also opened in advance wherein I add this line of code instead. 2564 02:02:06,490 --> 02:02:08,680 Give me just a moment to foreground this version. 2565 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. 2566 02:02:13,210 --> 02:02:16,060 And I'm not linking to my own styles.css. 2567 02:02:16,060 --> 02:02:19,270 I'm using a popular library called bootstrap. 2568 02:02:19,270 --> 02:02:22,060 And bootstrap is just one of many popular libraries 2569 02:02:22,060 --> 02:02:25,690 out there, free at that, that has a whole bunch of CSS files 2570 02:02:25,690 --> 02:02:29,710 and soon JavaScript files that you can just use for free in your own projects, 2571 02:02:29,710 --> 02:02:32,920 personally or professionally, that just make things look 2572 02:02:32,920 --> 02:02:36,250 and behave better without you having to reinvent wheels. 2573 02:02:36,250 --> 02:02:39,520 Now, to access their CSS, I had to read their documentation 2574 02:02:39,520 --> 02:02:41,650 and grab this very long URL here. 2575 02:02:41,650 --> 02:02:42,730 But it's the same idea. 2576 02:02:42,730 --> 02:02:45,370 Link href equals quote unquote something. 2577 02:02:45,370 --> 02:02:48,490 And I read their documentation and they told me to add this. 2578 02:02:48,490 --> 02:02:51,850 They told me that if I want my tables to be prettier, 2579 02:02:51,850 --> 02:02:55,210 I have to add a class attribute to my own table tag 2580 02:02:55,210 --> 02:02:59,290 and specify, a little weirdly but this is what bootstrap told me to do, 2581 02:02:59,290 --> 02:03:00,670 a class called table. 2582 02:03:00,670 --> 02:03:03,170 And that will make it a prettier bootstrap table. 2583 02:03:03,170 --> 02:03:07,180 And if I want to stripe it, like every other row is gray instead of white 2584 02:03:07,180 --> 02:03:09,100 just to make it pop a little more visually, 2585 02:03:09,100 --> 02:03:14,110 I can also add a second class separated by a space called table striped. 2586 02:03:14,110 --> 02:03:15,310 That's all I did. 2587 02:03:15,310 --> 02:03:18,790 I added line five and I changed line nine and that is it. 2588 02:03:18,790 --> 02:03:22,430 The rest of the hundreds of lines in favorites.html are the same. 2589 02:03:22,430 --> 02:03:27,010 But if I go back here now and reload the browser, now thanks to bootstrap, 2590 02:03:27,010 --> 02:03:28,150 voila. 2591 02:03:28,150 --> 02:03:29,290 It's much prettier. 2592 02:03:29,290 --> 02:03:32,620 Now I can zoom out and that changes the font size just locally for me. 2593 02:03:32,620 --> 02:03:35,380 And even if you don't love their aesthetics, I mean, 2594 02:03:35,380 --> 02:03:38,410 this is easily better than my own there. 2595 02:03:38,410 --> 02:03:42,280 And it turns out we can do even better by adding interactivity to this too. 2596 02:03:42,280 --> 02:03:45,940 But to do that, we're going to need one final language for today. 2597 02:03:45,940 --> 02:03:48,520 And this one is an actual programming language. 2598 02:03:48,520 --> 02:03:50,380 And we won't use it all that much in CS50, 2599 02:03:50,380 --> 02:03:53,710 but we introduce it here as we begin web stuff because there's just 2600 02:03:53,710 --> 02:03:56,860 so many free libraries and professional libraries that you can use just 2601 02:03:56,860 --> 02:04:00,490 to make your web applications fancier and more interactive. 2602 02:04:00,490 --> 02:04:05,740 Mobile applications as well increasingly use HTML, CSS, and JavaScript 2603 02:04:05,740 --> 02:04:08,660 to power our iPhones and Android devices as well. 2604 02:04:08,660 --> 02:04:10,780 So a quick tour of some syntax and then we'll 2605 02:04:10,780 --> 02:04:13,600 conclude with just some hopefully inspiring examples 2606 02:04:13,600 --> 02:04:16,000 to give you a taste of what JavaScript can do. 2607 02:04:16,000 --> 02:04:20,170 So JavaScript supports conditionals, just like C and Python before it. 2608 02:04:20,170 --> 02:04:23,560 If we rewind to our Scratch days, here of course is a conditional. 2609 02:04:23,560 --> 02:04:26,500 Here is the corresponding JavaScript code as of today. 2610 02:04:26,500 --> 02:04:30,280 It's pretty much identical to C with this syntax here. 2611 02:04:30,280 --> 02:04:33,993 If we had an if else, in Scratch it looked like this. 2612 02:04:33,993 --> 02:04:36,160 In JavaScript, it's going to look like this instead. 2613 02:04:36,160 --> 02:04:39,100 So it's a bit of a regression vis a vis Python. 2614 02:04:39,100 --> 02:04:40,570 The parentheses are back. 2615 02:04:40,570 --> 02:04:41,740 The curly braces are back. 2616 02:04:41,740 --> 02:04:45,280 The semicolons I mentioned in CSS are also back in JavaScript potentially. 2617 02:04:45,280 --> 02:04:47,260 But it's familiar is the point here. 2618 02:04:47,260 --> 02:04:50,620 And it's a different language that's frequently used for the web, 2619 02:04:50,620 --> 02:04:53,970 whereas you can't use Python in the way we're about to use JavaScript. 2620 02:04:53,970 --> 02:04:56,370 It just wasn't designed for that purpose. 2621 02:04:56,370 --> 02:05:00,570 Meanwhile, if you have an if else if else in Scratch, 2622 02:05:00,570 --> 02:05:04,440 well in JavaScript just like in C, it's going to look like this instead. 2623 02:05:04,440 --> 02:05:06,930 Variables in JavaScript, of course, are a thing too. 2624 02:05:06,930 --> 02:05:10,020 And in Scratch, we might have initialized a counter variable to 0. 2625 02:05:10,020 --> 02:05:13,090 In JavaScript a few different ways to do this. 2626 02:05:13,090 --> 02:05:15,305 And just for now, the keyword is let's. 2627 02:05:15,305 --> 02:05:17,430 It's sort of a polite way of asking for a variable. 2628 02:05:17,430 --> 02:05:20,520 Let counter equals 0 semicolon. 2629 02:05:20,520 --> 02:05:23,400 So you don't mention the type, but you do use a keyword here 2630 02:05:23,400 --> 02:05:24,600 in this case called let. 2631 02:05:24,600 --> 02:05:28,373 If you want to increment counter by one, few different ways in JavaScript 2632 02:05:28,373 --> 02:05:29,040 you can do this. 2633 02:05:29,040 --> 02:05:31,470 Just like in C, in JavaScript you can do this. 2634 02:05:31,470 --> 02:05:34,950 Just like in C and in Python, in JavaScript you can also get this. 2635 02:05:34,950 --> 02:05:36,180 So plus plus is back. 2636 02:05:36,180 --> 02:05:38,850 So maybe that counterbalances the other syntax as well. 2637 02:05:38,850 --> 02:05:41,010 That was not the case in Python. 2638 02:05:41,010 --> 02:05:43,432 Loops are back, of course, in JavaScript. 2639 02:05:43,432 --> 02:05:45,390 Whereas in Scratch you could repeat three times 2640 02:05:45,390 --> 02:05:48,090 like this, in JavaScript it's pretty much just like C. 2641 02:05:48,090 --> 02:05:50,700 The only difference here is that you say let instead 2642 02:05:50,700 --> 02:05:52,713 of int for an example like this. 2643 02:05:52,713 --> 02:05:54,630 Meanwhile, if you want to do something forever 2644 02:05:54,630 --> 02:05:59,470 in Scratch, in JavaScript just like in C, you say while true in this case. 2645 02:05:59,470 --> 02:06:02,070 So this is to say we're sort of comfortable 2646 02:06:02,070 --> 02:06:04,440 spending relatively little time on JavaScript, at least 2647 02:06:04,440 --> 02:06:07,200 for today's purposes, because syntactically it's 2648 02:06:07,200 --> 02:06:11,550 really the same as we've seen before with maybe a slight variance here 2649 02:06:11,550 --> 02:06:12,100 or there. 2650 02:06:12,100 --> 02:06:15,480 But what's interesting today arguably is just what kinds of things 2651 02:06:15,480 --> 02:06:16,750 you can do with it. 2652 02:06:16,750 --> 02:06:20,400 So with that said, what kinds of things can we do? 2653 02:06:20,400 --> 02:06:22,710 It all comes back to this picture. 2654 02:06:22,710 --> 02:06:25,800 If this is a simple web page on the left and this 2655 02:06:25,800 --> 02:06:29,220 is the corresponding tree or DOM, Document Object 2656 02:06:29,220 --> 02:06:32,760 Model on the right, that is the tree the browser automatically creates in memory 2657 02:06:32,760 --> 02:06:36,930 or RAM for you, JavaScript is now a proper programming language 2658 02:06:36,930 --> 02:06:42,330 that lets us dynamically manipulate, like read data from this, change this. 2659 02:06:42,330 --> 02:06:44,940 And this is how Google, for instance, implements your inbox. 2660 02:06:44,940 --> 02:06:47,770 They might have in your inbox it's like a table. 2661 02:06:47,770 --> 02:06:50,970 So TR, TR, TR, TR, probably something like that. 2662 02:06:50,970 --> 02:06:52,740 Or heck, maybe div, div, div. 2663 02:06:52,740 --> 02:06:56,190 Using JavaScript, any time they realize someone sent you new mail, 2664 02:06:56,190 --> 02:07:00,510 they can create a new node, a new rectangle in memory and you, the human, 2665 02:07:00,510 --> 02:07:04,780 see a new div or a new TR again and again and again. 2666 02:07:04,780 --> 02:07:06,690 So with JavaScript, you just have the ability 2667 02:07:06,690 --> 02:07:11,430 to control the user's experience instead of, like I've been doing, constantly 2668 02:07:11,430 --> 02:07:15,120 hitting reload in the page to see some new content, to see some new content. 2669 02:07:15,120 --> 02:07:18,540 JavaScript can be running 24/7 so that you can actually 2670 02:07:18,540 --> 02:07:21,210 see all of these changes live. 2671 02:07:21,210 --> 02:07:21,840 All right. 2672 02:07:21,840 --> 02:07:24,180 So let's go about writing some JavaScript code now. 2673 02:07:24,180 --> 02:07:27,227 Instead of writing it on the server and executing it on the server, 2674 02:07:27,227 --> 02:07:29,310 we're going to actually use a very common paradigm 2675 02:07:29,310 --> 02:07:33,630 whereas JavaScript is actually executed in the browser client side. 2676 02:07:33,630 --> 02:07:37,080 That is to say we can actually start writing some JavaScript code inside 2677 02:07:37,080 --> 02:07:41,370 of our own .html file so that when a user visits that web page with 2678 02:07:41,370 --> 02:07:44,910 their browser, not only is the HTML and any CSS downloaded 2679 02:07:44,910 --> 02:07:48,660 to the user's browser, so is that JavaScript code so that it's executed 2680 02:07:48,660 --> 02:07:52,950 indeed client side on the browser rather than server side, 2681 02:07:52,950 --> 02:07:55,890 as has been the case with Python in previous weeks. 2682 02:07:55,890 --> 02:07:58,620 Well, where do we go about writing some JavaScript code? 2683 02:07:58,620 --> 02:08:02,280 Let's go ahead and revisit hello.html, which previously 2684 02:08:02,280 --> 02:08:04,650 was a completely static example that literally just said 2685 02:08:04,650 --> 02:08:06,450 hello title, hello body. 2686 02:08:06,450 --> 02:08:08,970 Indeed, if I open this up using HTTP server 2687 02:08:08,970 --> 02:08:12,120 and view it now in a separate tab, all it said was exactly that. 2688 02:08:12,120 --> 02:08:16,210 Hello title in the tab and hello body in the main part of the viewport, 2689 02:08:16,210 --> 02:08:16,890 so to speak. 2690 02:08:16,890 --> 02:08:19,350 Well, let's make this example a little more 2691 02:08:19,350 --> 02:08:21,540 dynamic so it doesn't just say hello body 2692 02:08:21,540 --> 02:08:24,280 but maybe says hello to an actual person. 2693 02:08:24,280 --> 02:08:25,720 So let's go ahead and do this. 2694 02:08:25,720 --> 02:08:28,560 Let's go ahead and remove the hardcoded hello body. 2695 02:08:28,560 --> 02:08:32,550 And let's actually go ahead here and use a form tag. 2696 02:08:32,550 --> 02:08:35,280 But we're not going to use this form in the usual way 2697 02:08:35,280 --> 02:08:38,050 whereby the data gets sent all the way back to the server. 2698 02:08:38,050 --> 02:08:41,890 We're going to leverage control over this form client side instead. 2699 02:08:41,890 --> 02:08:45,570 So I'm going to go ahead and create this open form tag, close form tag. 2700 02:08:45,570 --> 02:08:48,960 Inside of that, let me give myself a text input that's going to have 2701 02:08:48,960 --> 02:08:53,970 autocomplete="off" just to ensure that what I previously type in my examples 2702 02:08:53,970 --> 02:08:55,960 doesn't reappear accidentally. 2703 02:08:55,960 --> 02:08:58,890 We're going to auto focus it so that the cursor is blinking 2704 02:08:58,890 --> 02:09:00,300 right there in that text box. 2705 02:09:00,300 --> 02:09:03,240 And this time I'm going to go ahead and give it how 2706 02:09:03,240 --> 02:09:08,035 about a placeholder of quote unquote name 2707 02:09:08,035 --> 02:09:10,410 to make clear that I'm prompting the user for their name. 2708 02:09:10,410 --> 02:09:14,250 And then the type of this text box will be the default or more explicitly here 2709 02:09:14,250 --> 02:09:14,820 text. 2710 02:09:14,820 --> 02:09:17,070 And then I'm going to have, as we've seen before, 2711 02:09:17,070 --> 02:09:19,410 a button, the type of which is submit. 2712 02:09:19,410 --> 02:09:22,688 Also our typically default. And then inside of this button 2713 02:09:22,688 --> 02:09:23,730 is going to be the label. 2714 02:09:23,730 --> 02:09:28,050 How about something like how about we'll call this greet. 2715 02:09:28,050 --> 02:09:30,250 So that's what the button will actually say. 2716 02:09:30,250 --> 02:09:32,820 Well, let me actually go back into my browser tab. 2717 02:09:32,820 --> 02:09:34,150 Let me reload this page. 2718 02:09:34,150 --> 02:09:36,780 And we should now see a relatively simple form 2719 02:09:36,780 --> 02:09:39,210 whereby I have the cursor blinking on a text 2720 02:09:39,210 --> 02:09:42,150 input prompting the user for their name and then a greet button 2721 02:09:42,150 --> 02:09:43,113 that I can click. 2722 02:09:43,113 --> 02:09:45,030 But if I click this button now, it's not going 2723 02:09:45,030 --> 02:09:47,363 to do anything useful because I haven't written any code 2724 02:09:47,363 --> 02:09:50,430 to tell the browser what to do when I click that button. 2725 02:09:50,430 --> 02:09:54,120 But it turns out there's all sorts of events in the world of JavaScript 2726 02:09:54,120 --> 02:09:56,220 that you can listen for, so to speak. 2727 02:09:56,220 --> 02:09:58,080 In fact, here's just a list of some of them. 2728 02:09:58,080 --> 02:10:01,710 Any time something changes in a form field, any time the user clicks 2729 02:10:01,710 --> 02:10:05,190 or drags on something, any time the user presses a key 2730 02:10:05,190 --> 02:10:08,820 and maybe lifts their finger up, anytime the mouse goes down or over 2731 02:10:08,820 --> 02:10:12,930 or up on top of something, or any time a form is submitted, 2732 02:10:12,930 --> 02:10:15,000 those are events in the same way that we talked 2733 02:10:15,000 --> 02:10:17,610 about events back in week 0 in Scratch. 2734 02:10:17,610 --> 02:10:21,300 And in JavaScript, just like in Scratch where you can do something 2735 02:10:21,300 --> 02:10:23,550 when green flag clicked, in JavaScript you 2736 02:10:23,550 --> 02:10:27,570 can write code that actually listens for any of these events or more. 2737 02:10:27,570 --> 02:10:30,310 So with that said, let's go back to VS Code here 2738 02:10:30,310 --> 02:10:32,670 and let's make a couple of changes instead. 2739 02:10:32,670 --> 02:10:35,235 Let's go ahead and add to this form a new attribute. 2740 02:10:35,235 --> 02:10:37,860 That's not the best way to do it, but it's perhaps the simplest 2741 02:10:37,860 --> 02:10:39,040 for version one here. 2742 02:10:39,040 --> 02:10:42,220 And let's say on submit, do the following. 2743 02:10:42,220 --> 02:10:44,280 So on submit is an HTML attribute. 2744 02:10:44,280 --> 02:10:47,220 And curiously, its value inside of the quotes 2745 02:10:47,220 --> 02:10:50,040 there can actually be some JavaScript code. 2746 02:10:50,040 --> 02:10:52,620 And let's go ahead now and let's assume there exists 2747 02:10:52,620 --> 02:10:54,510 a function in the world called greet. 2748 02:10:54,510 --> 02:10:58,390 And what I want to do is call that function right then and there. 2749 02:10:58,390 --> 02:11:01,590 Well, now in JavaScript, how do I go about making that function exist? 2750 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 2751 02:11:06,060 --> 02:11:07,750 or scratch respectively. 2752 02:11:07,750 --> 02:11:08,740 But I can do this. 2753 02:11:08,740 --> 02:11:10,740 Let me go up into the head of this page. 2754 02:11:10,740 --> 02:11:13,860 Inside of a script tag here, both open and close, 2755 02:11:13,860 --> 02:11:15,780 let me actually write some JavaScript code. 2756 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, 2757 02:11:18,420 --> 02:11:19,830 though not strictly necessary. 2758 02:11:19,830 --> 02:11:23,550 And let me define a new function in JavaScript called greet. 2759 02:11:23,550 --> 02:11:26,670 And this is the syntax in JavaScript for creating your own function. 2760 02:11:26,670 --> 02:11:30,000 Similar in Python instead of saying def, in JavaScript you just say 2761 02:11:30,000 --> 02:11:33,510 function, then the name of the function, and any arguments 2762 02:11:33,510 --> 02:11:35,010 within the parentheses thereafter. 2763 02:11:35,010 --> 02:11:36,870 But I'm not going to pass in any here. 2764 02:11:36,870 --> 02:11:39,240 Then inside of curly braces, what I'm going to do 2765 02:11:39,240 --> 02:11:41,100 is use a built in JavaScript function that 2766 02:11:41,100 --> 02:11:42,990 comes with any browser called alert. 2767 02:11:42,990 --> 02:11:45,160 It's not the best or prettiest user interface, 2768 02:11:45,160 --> 02:11:47,220 but for now it's going to get the job done. 2769 02:11:47,220 --> 02:11:48,840 What do I want to say to the user? 2770 02:11:48,840 --> 02:11:53,520 Well, let's first just say something simple like hello comma world close 2771 02:11:53,520 --> 02:11:58,780 quote semicolon, thereby alerting the user with precisely that message. 2772 02:11:58,780 --> 02:12:02,610 Now what I'm going to do down here is make one other change. 2773 02:12:02,610 --> 02:12:05,947 I don't want this form to actually get submitted to the server. 2774 02:12:05,947 --> 02:12:08,280 Just like we've seen in the past when you submit a form, 2775 02:12:08,280 --> 02:12:11,460 it often goes to something like google.com/search. 2776 02:12:11,460 --> 02:12:16,470 I actually want my JavaScript code to take control over the entire user 2777 02:12:16,470 --> 02:12:20,610 experience of this form so that I'm just using the form as a user input 2778 02:12:20,610 --> 02:12:26,130 mechanism, not to actually send via get or post this data to some other server, 2779 02:12:26,130 --> 02:12:27,280 including my own. 2780 02:12:27,280 --> 02:12:29,190 So this is going to look a little ugly. 2781 02:12:29,190 --> 02:12:31,025 But after calling greet, I'm actually going 2782 02:12:31,025 --> 02:12:33,150 to do this, which I've read the documentation about 2783 02:12:33,150 --> 02:12:36,330 and I know that if you actually hard code return false here, 2784 02:12:36,330 --> 02:12:39,540 that just tells the browser, please don't actually submit the form. 2785 02:12:39,540 --> 02:12:42,040 Only call the greet function. 2786 02:12:42,040 --> 02:12:42,540 All right. 2787 02:12:42,540 --> 02:12:44,760 Well, let me go back to my browser here. 2788 02:12:44,760 --> 02:12:47,370 Let me reload this, because I need to download the latest 2789 02:12:47,370 --> 02:12:48,900 version of the JavaScript code. 2790 02:12:48,900 --> 02:12:51,358 And I'm just going to go ahead without even typing my name, 2791 02:12:51,358 --> 02:12:53,010 I'm going to click on the Greet button. 2792 02:12:53,010 --> 02:12:56,100 And you'll see that, albeit a little cryptically at the top, 2793 02:12:56,100 --> 02:12:58,260 we see an alert that says hello world. 2794 02:12:58,260 --> 02:13:00,780 There's my ugly URL of my code space there at the moment, 2795 02:13:00,780 --> 02:13:03,010 but we do indeed see that string. 2796 02:13:03,010 --> 02:13:06,430 But what I haven't, of course, done is taken any actual name from the user. 2797 02:13:06,430 --> 02:13:08,350 So how can we go about doing that? 2798 02:13:08,350 --> 02:13:13,620 Well, ideally I want to alert the user with hello comma David or hello comma 2799 02:13:13,620 --> 02:13:15,880 Carter, whatever name I type into that box. 2800 02:13:15,880 --> 02:13:17,920 So how can I go about doing that? 2801 02:13:17,920 --> 02:13:19,800 Well, let me create a variable called name. 2802 02:13:19,800 --> 02:13:22,590 And let me set it equal to this function call. 2803 02:13:22,590 --> 02:13:24,060 Document.queryselector. 2804 02:13:24,060 --> 02:13:28,120 2805 02:13:28,120 --> 02:13:30,340 That comes with JavaScript itself. 2806 02:13:30,340 --> 02:13:33,340 Let me then in parentheses pass in an argument that is going to be, 2807 02:13:33,340 --> 02:13:35,070 huh, the ID. 2808 02:13:35,070 --> 02:13:38,990 I need a unique identifier for the thing I want to select. 2809 02:13:38,990 --> 02:13:41,360 So let me actually go back to my HTML code here. 2810 02:13:41,360 --> 02:13:45,520 And instead of giving this form field a name like q for query, 2811 02:13:45,520 --> 02:13:49,480 let me actually use another HTML attribute called ID where now I 2812 02:13:49,480 --> 02:13:50,920 can call this anything I want. 2813 02:13:50,920 --> 02:13:56,530 And for clarity, I'm just going to call this input element uniquely name. 2814 02:13:56,530 --> 02:14:00,520 Now up here in query selector, just like in CSS 2815 02:14:00,520 --> 02:14:03,580 where you can use hashes and dots and other symbology 2816 02:14:03,580 --> 02:14:08,740 in order to select certain nodes in your DOM, that is rectangles in that memory 2817 02:14:08,740 --> 02:14:12,170 tree, well, I can go ahead and select hash name, which, 2818 02:14:12,170 --> 02:14:15,520 again, is just the syntax for uniquely selecting the element whose 2819 02:14:15,520 --> 02:14:17,740 ID is in this case name. 2820 02:14:17,740 --> 02:14:19,300 So you have the hash up here. 2821 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. 2822 02:14:23,590 --> 02:14:26,590 And now if I want to actually get the value of that text box, 2823 02:14:26,590 --> 02:14:28,370 I literally just say .value. 2824 02:14:28,370 --> 02:14:30,700 So document refers to the whole web page itself. 2825 02:14:30,700 --> 02:14:34,450 Query selector is a function that's built into that object, so to speak. 2826 02:14:34,450 --> 02:14:40,060 And the value accessible via .value just like a C struct or even a Python class 2827 02:14:40,060 --> 02:14:43,840 allows me to go inside of that text field and get whatever the value 2828 02:14:43,840 --> 02:14:45,490 the user has typed in. 2829 02:14:45,490 --> 02:14:51,340 Now, as I've been able to do in languages like Python fairly readily, 2830 02:14:51,340 --> 02:14:56,380 I can concatenate this name onto the string hello comma space 2831 02:14:56,380 --> 02:14:58,270 so as to form a complete phrase. 2832 02:14:58,270 --> 02:15:01,960 And you'll notice here that I'm actually using single quotes in my JavaScript, 2833 02:15:01,960 --> 02:15:03,370 double quotes in my HTML. 2834 02:15:03,370 --> 02:15:05,320 This is perhaps a common convention. 2835 02:15:05,320 --> 02:15:07,680 In JavaScript, the language does not care 2836 02:15:07,680 --> 02:15:09,430 if you use double quotes or single quotes, 2837 02:15:09,430 --> 02:15:11,840 but I dare say single quotes are just more common. 2838 02:15:11,840 --> 02:15:13,330 And so that's what I've done here. 2839 02:15:13,330 --> 02:15:13,930 All right. 2840 02:15:13,930 --> 02:15:15,850 Now as always, I'm going to cross my fingers. 2841 02:15:15,850 --> 02:15:16,940 Go back to this page. 2842 02:15:16,940 --> 02:15:19,390 I'm going to reload, because I've changed the JavaScript 2843 02:15:19,390 --> 02:15:21,040 and I need my browser to download it. 2844 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. 2845 02:15:24,490 --> 02:15:26,740 Click Greet with fingers crossed. 2846 02:15:26,740 --> 02:15:31,060 And voila, now I see hello comma David. 2847 02:15:31,060 --> 02:15:34,900 All right, so it turns out that while functional, this isn't the best design. 2848 02:15:34,900 --> 02:15:38,740 And comingling your HTML with your JavaScript code 2849 02:15:38,740 --> 02:15:42,370 as with this on submit attribute isn't particularly clean. 2850 02:15:42,370 --> 02:15:47,260 It's better, as with CSS, to keep your HTML over here, your CSS over here, 2851 02:15:47,260 --> 02:15:49,690 and your JavaScript now over here, so to speak. 2852 02:15:49,690 --> 02:15:52,360 And better still perhaps even in some separate files. 2853 02:15:52,360 --> 02:15:54,820 So how can I go about changing this a little bit? 2854 02:15:54,820 --> 02:15:57,850 Well, let me go ahead and actually let's go ahead 2855 02:15:57,850 --> 02:16:00,280 and delete all of this code for just a moment. 2856 02:16:00,280 --> 02:16:04,390 And let me go and get rid of this on submit handler down here 2857 02:16:04,390 --> 02:16:09,310 and really just distill my HTML only into the HTML and the attributes 2858 02:16:09,310 --> 02:16:10,090 therefore. 2859 02:16:10,090 --> 02:16:13,300 And what I'm instead going to do now is do this. 2860 02:16:13,300 --> 02:16:19,810 I can use JavaScript to achieve the listening for that submit event or that 2861 02:16:19,810 --> 02:16:20,740 on submit event. 2862 02:16:20,740 --> 02:16:23,290 I don't need to actually use HTML for that. 2863 02:16:23,290 --> 02:16:25,390 I can use JavaScript entirely. 2864 02:16:25,390 --> 02:16:29,620 So it turns out I can access some other member of this document 2865 02:16:29,620 --> 02:16:32,809 by doing document.queryselector again. 2866 02:16:32,809 --> 02:16:36,010 But this time, let's select the actual form tag. 2867 02:16:36,010 --> 02:16:39,639 And it doesn't have an ID because it has no ID in its HTML. 2868 02:16:39,639 --> 02:16:40,990 But it does have a tag name. 2869 02:16:40,990 --> 02:16:44,680 So just like in CSS when you can target elements by way of their name, 2870 02:16:44,680 --> 02:16:47,799 I'm just going to select the one and only form on this page 2871 02:16:47,799 --> 02:16:50,023 by using that same query selector function. 2872 02:16:50,023 --> 02:16:51,940 And now I'm going to use another function that 2873 02:16:51,940 --> 02:16:54,520 just comes with JavaScript in the context of browsers 2874 02:16:54,520 --> 02:16:57,790 whereby once you select an element like that form, 2875 02:16:57,790 --> 02:17:03,250 I can call add event listener, which is similar in spirit to Scratch's when 2876 02:17:03,250 --> 02:17:05,889 green flag clicked or any block like that. 2877 02:17:05,889 --> 02:17:08,740 You can then tell the browser what event you want to listen for. 2878 02:17:08,740 --> 02:17:10,570 I want to listen for the submit event. 2879 02:17:10,570 --> 02:17:12,160 So you don't say on submit here. 2880 02:17:12,160 --> 02:17:14,500 Now that we're in pure JavaScript, you just say submit. 2881 02:17:14,500 --> 02:17:17,570 And now I can do something like this. 2882 02:17:17,570 --> 02:17:20,358 I can go ahead and say call the following function. 2883 02:17:20,358 --> 02:17:22,900 And I'm not even going to bother giving this function a name. 2884 02:17:22,900 --> 02:17:26,320 And that is allowed to in JavaScript, as we saw briefly in Python. 2885 02:17:26,320 --> 02:17:29,530 And what I'm going to do now inside of curly braces 2886 02:17:29,530 --> 02:17:33,459 after that keyword function is the same kind of code as before. 2887 02:17:33,459 --> 02:17:38,360 I'm going to do let name equals document.queryselector. 2888 02:17:38,360 --> 02:17:44,049 I'm going to select that same name ID as before and get its value. 2889 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 2890 02:17:48,549 --> 02:17:49,570 again after that. 2891 02:17:49,570 --> 02:17:53,709 Concatenate with that the name and then semicolon. 2892 02:17:53,709 --> 02:17:55,578 But I need to do one other thing. 2893 02:17:55,578 --> 02:17:57,370 It turns out that this function, and if you 2894 02:17:57,370 --> 02:17:59,350 read the documentation for this technique, 2895 02:17:59,350 --> 02:18:04,270 actually takes automatically a special argument called by convention event. 2896 02:18:04,270 --> 02:18:08,350 And this is just a variable, if you will, that refers to whatever event 2897 02:18:08,350 --> 02:18:08,950 just happened. 2898 02:18:08,950 --> 02:18:10,719 In this case, it's of course, going to be submit. 2899 02:18:10,719 --> 02:18:13,840 But in other contexts, it might be a click event, a mouse down event, 2900 02:18:13,840 --> 02:18:15,379 or something else entirely. 2901 02:18:15,379 --> 02:18:18,160 So this allows me now to do this, which is a little cryptic, 2902 02:18:18,160 --> 02:18:19,809 but you get used to these conventions. 2903 02:18:19,809 --> 02:18:22,570 I can use that event, whatever it is, and then 2904 02:18:22,570 --> 02:18:26,379 prevent whatever the default behavior is by calling a special function called 2905 02:18:26,379 --> 02:18:29,010 prevent Default with a capital D. This is 2906 02:18:29,010 --> 02:18:32,820 the alternative to that messier return false semicolon 2907 02:18:32,820 --> 02:18:35,740 that I had inside of my HTML before. 2908 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 2909 02:18:40,889 --> 02:18:44,580 and I've put all of my JavaScript code as pure JavaScript up here. 2910 02:18:44,580 --> 02:18:46,770 This sort of separation of concern similar to what 2911 02:18:46,770 --> 02:18:50,790 we started doing with CSS just a bit ago in order to keep those two languages 2912 02:18:50,790 --> 02:18:51,690 separate too. 2913 02:18:51,690 --> 02:18:54,090 Well, let me go back to my browser here. 2914 02:18:54,090 --> 02:18:55,290 Reload the page. 2915 02:18:55,290 --> 02:18:58,120 And unfortunately, there's a subtle mistake I've made here. 2916 02:18:58,120 --> 02:19:01,379 Let me go ahead and type in D-A-V-I-D and click Greet. 2917 02:19:01,379 --> 02:19:04,290 And unfortunately, nothing actually seems to happen. 2918 02:19:04,290 --> 02:19:05,549 Well, maybe it's just my name. 2919 02:19:05,549 --> 02:19:06,150 Carter. 2920 02:19:06,150 --> 02:19:07,413 Greet. 2921 02:19:07,413 --> 02:19:08,580 And nothing seems to happen. 2922 02:19:08,580 --> 02:19:10,080 That alert does not come up. 2923 02:19:10,080 --> 02:19:11,200 Well, why is that? 2924 02:19:11,200 --> 02:19:15,629 Well, let me go back to VS Code here and point out that order of operations 2925 02:19:15,629 --> 02:19:18,330 in JavaScript matters similar in spirit to C. 2926 02:19:18,330 --> 02:19:23,250 Because on line seven I'm selecting the form and trying to add an event 2927 02:19:23,250 --> 02:19:27,420 listener for submitting that form, unfortunately the form had better exist 2928 02:19:27,420 --> 02:19:29,190 at that moment in time, but it doesn't. 2929 02:19:29,190 --> 02:19:31,980 Because just like in C and in some cases Python 2930 02:19:31,980 --> 02:19:35,440 where the compiler or the interpreter reads the code top to bottom, 2931 02:19:35,440 --> 02:19:38,219 notice that the form doesn't actually exist and therefore 2932 02:19:38,219 --> 02:19:41,280 get loaded into the computer's memory until line 19. 2933 02:19:41,280 --> 02:19:43,980 So we've got to kind of reorder these somehow. 2934 02:19:43,980 --> 02:19:46,950 Now, maybe the simplest way to do this would just 2935 02:19:46,950 --> 02:19:49,480 be to perhaps do something like this. 2936 02:19:49,480 --> 02:19:53,340 Let me scroll back up to my script tag and perhaps a little more 2937 02:19:53,340 --> 02:19:57,910 explicitly move it into the order in which I want it to be executed. 2938 02:19:57,910 --> 02:20:00,780 So I'm going to go below my form and inside of my body, which 2939 02:20:00,780 --> 02:20:04,320 is actually OK for JavaScript here, and just use that same code. 2940 02:20:04,320 --> 02:20:07,530 And assuming I didn't make any typos, let's go back to the browser. 2941 02:20:07,530 --> 02:20:09,630 Click reload again to get the latest. 2942 02:20:09,630 --> 02:20:12,750 Type in my name again using that purely JavaScript solution. 2943 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. 2944 02:20:16,470 --> 02:20:17,760 Clicking Greet now. 2945 02:20:17,760 --> 02:20:19,290 And wow, it's now back. 2946 02:20:19,290 --> 02:20:21,970 We get the alert with hello comma David. 2947 02:20:21,970 --> 02:20:24,133 So those kinds of things, those kinds of principles 2948 02:20:24,133 --> 02:20:26,050 matter at least when we're back in this world. 2949 02:20:26,050 --> 02:20:27,390 But there's other solutions too. 2950 02:20:27,390 --> 02:20:30,640 And just so that you've seen it, because it's a common convention in libraries 2951 02:20:30,640 --> 02:20:35,520 as well, let me undo that change and put that script tag back in the head 2952 02:20:35,520 --> 02:20:38,190 or really anywhere else in the page where it might be. 2953 02:20:38,190 --> 02:20:41,400 And let me propose that there's one other way to solve this problem 2954 02:20:41,400 --> 02:20:45,210 to postpone that code on lines 7 through 11 2955 02:20:45,210 --> 02:20:49,780 getting executed until really the whole DOM, the tree, is ready to go. 2956 02:20:49,780 --> 02:20:52,480 And the syntax for this might be as follows. 2957 02:20:52,480 --> 02:20:56,010 I can do document and I can add to the document 2958 02:20:56,010 --> 02:20:59,213 an event listener that's going to listen for something a little special. 2959 02:20:59,213 --> 02:21:01,380 And I always have to look this up myself to remember 2960 02:21:01,380 --> 02:21:02,880 the spelling and the capitalization. 2961 02:21:02,880 --> 02:21:04,740 But it turns out that the browser itself, 2962 02:21:04,740 --> 02:21:07,630 once it's done loading all of your HTML top to bottom, 2963 02:21:07,630 --> 02:21:14,100 left to right, it will raise an event called DOM content loaded, capitalized 2964 02:21:14,100 --> 02:21:15,460 exactly as such. 2965 02:21:15,460 --> 02:21:17,760 And if you want to call some function, and I don't even 2966 02:21:17,760 --> 02:21:22,380 need an event argument in this case, you can open curly braces just as before 2967 02:21:22,380 --> 02:21:24,990 and put inside of those curly braces the code 2968 02:21:24,990 --> 02:21:29,160 that you want to execute only once the DOM's content has been loaded top 2969 02:21:29,160 --> 02:21:29,880 to bottom. 2970 02:21:29,880 --> 02:21:32,820 And now let me just finish my thought with a closed curly brace, 2971 02:21:32,820 --> 02:21:34,783 close parentheses, and semicolon. 2972 02:21:34,783 --> 02:21:37,200 It gets a little annoying to visually line all of this up, 2973 02:21:37,200 --> 02:21:38,370 but I think I'm still good. 2974 02:21:38,370 --> 02:21:42,270 And now even though this code is at the top of my file 2975 02:21:42,270 --> 02:21:46,620 or really above the form tag itself, I think we're OK. 2976 02:21:46,620 --> 02:21:48,300 So let's go back to the browser here. 2977 02:21:48,300 --> 02:21:49,440 Reload the page. 2978 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. 2979 02:21:54,550 --> 02:21:57,900 And so this is just a very common paradigm to use these kinds of events 2980 02:21:57,900 --> 02:22:00,820 to listen and listen and listen for something to happen 2981 02:22:00,820 --> 02:22:04,808 and then only do something once that thing has transpired. 2982 02:22:04,808 --> 02:22:07,350 All right, well let's take one more step with JavaScript code 2983 02:22:07,350 --> 02:22:09,933 before we take a look at what's really fun about this language 2984 02:22:09,933 --> 02:22:12,360 and what you can do with browsers in particular 2985 02:22:12,360 --> 02:22:14,670 by just cleaning things up a little bit further. 2986 02:22:14,670 --> 02:22:17,010 I'm going to go back into the code here and I'm actually 2987 02:22:17,010 --> 02:22:23,640 going to remove or cut all of this code out of the hello.html file itself. 2988 02:22:23,640 --> 02:22:26,160 And I'm going to change my script tag to have nothing 2989 02:22:26,160 --> 02:22:28,710 in between the open and closed tag, but I 2990 02:22:28,710 --> 02:22:30,600 am going to give it a source attribute. 2991 02:22:30,600 --> 02:22:34,560 And let's go ahead and call this, for instance, hello.js. 2992 02:22:34,560 --> 02:22:37,920 So .js would be the convention for the file extension for a JavaScript file. 2993 02:22:37,920 --> 02:22:40,830 And even though this is a little weird that we have the script tag 2994 02:22:40,830 --> 02:22:44,790 and a source attribute then nothing in between the open and close tag, 2995 02:22:44,790 --> 02:22:47,700 this is indeed the convention when you want to put all of your code 2996 02:22:47,700 --> 02:22:49,107 in a separate file. 2997 02:22:49,107 --> 02:22:50,440 And let me go ahead and do that. 2998 02:22:50,440 --> 02:22:52,440 Let me go ahead and open my terminal window. 2999 02:22:52,440 --> 02:22:55,620 Create a new file called hello.js. 3000 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 3001 02:22:59,190 --> 02:23:00,660 cut from the previous file. 3002 02:23:00,660 --> 02:23:02,310 So no changes to the code. 3003 02:23:02,310 --> 02:23:03,870 All I'm doing is factoring it out. 3004 02:23:03,870 --> 02:23:07,480 And now I'm doing something just like our CSS factorization before, 3005 02:23:07,480 --> 02:23:09,210 which confusingly used the link tag. 3006 02:23:09,210 --> 02:23:10,680 This uses the script tag. 3007 02:23:10,680 --> 02:23:13,975 This just now allows me to collaborate with someone like Carter or someone 3008 02:23:13,975 --> 02:23:15,850 else so that they can do the JavaScript code, 3009 02:23:15,850 --> 02:23:18,570 I can do the HTML, maybe a third person can do the CSS. 3010 02:23:18,570 --> 02:23:21,420 And indeed, maybe we can build even grander things 3011 02:23:21,420 --> 02:23:25,030 by designing things in this way. 3012 02:23:25,030 --> 02:23:25,530 All right. 3013 02:23:25,530 --> 02:23:28,080 Well, let me go back to my browser again. 3014 02:23:28,080 --> 02:23:29,280 Reload the page. 3015 02:23:29,280 --> 02:23:33,030 I shouldn't see any visual changes, but if I type in my name again, David, 3016 02:23:33,030 --> 02:23:36,102 and click Greet, this still now works. 3017 02:23:36,102 --> 02:23:38,310 And what my browser has just done underneath the hood 3018 02:23:38,310 --> 02:23:44,070 is not only download the hello.html file as always, because there's now 3019 02:23:44,070 --> 02:23:46,830 this script tag that's referencing the source of another file, 3020 02:23:46,830 --> 02:23:49,740 just like an image tag might reference the source of an image, 3021 02:23:49,740 --> 02:23:54,840 the browser is automatically helping me out by loading that into its memory 3022 02:23:54,840 --> 02:23:56,080 as well. 3023 02:23:56,080 --> 02:23:57,862 And now how about one final example? 3024 02:23:57,862 --> 02:23:59,820 And for this one, I'm going to go ahead and not 3025 02:23:59,820 --> 02:24:02,700 write it live but open it up as prepared in advance 3026 02:24:02,700 --> 02:24:05,400 just to show you what you can do by listening for some 3027 02:24:05,400 --> 02:24:08,923 of these other events as well, like the key up, the finger going down, 3028 02:24:08,923 --> 02:24:12,090 the finger going up, and listening for exactly that so as the user is typing 3029 02:24:12,090 --> 02:24:14,950 something you can do something interesting as well. 3030 02:24:14,950 --> 02:24:17,500 I'm going to go back into my directory listing here. 3031 02:24:17,500 --> 02:24:19,680 And I click on this source, a directory which 3032 02:24:19,680 --> 02:24:22,240 has all of the examples that I wrote here in advance. 3033 02:24:22,240 --> 02:24:26,580 And I'm going to scroll down to one called hello5.html. 3034 02:24:26,580 --> 02:24:29,190 And in hello5 now we've gotten rid of the button 3035 02:24:29,190 --> 02:24:31,170 and we just have this text box. 3036 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. 3037 02:24:37,710 --> 02:24:39,402 I'm not typing Enter at all. 3038 02:24:39,402 --> 02:24:41,610 And in fact, if I start deleting and I change my mind 3039 02:24:41,610 --> 02:24:43,920 and start typing Carter's name, notice now 3040 02:24:43,920 --> 02:24:47,070 that the web page, the DOM inside of the computer's memory, 3041 02:24:47,070 --> 02:24:49,530 is now automatically updating itself. 3042 02:24:49,530 --> 02:24:51,280 So it's not even listening, it would seem, 3043 02:24:51,280 --> 02:24:56,320 for a submit event anymore but maybe for a key up event instead. 3044 02:24:56,320 --> 02:24:58,380 So let me go back to VS Code here. 3045 02:24:58,380 --> 02:24:59,730 Open my terminal window. 3046 02:24:59,730 --> 02:25:05,010 And in my source directory, let me open up hello5.html. 3047 02:25:05,010 --> 02:25:07,260 Inside of the script tag, you'll see some code 3048 02:25:07,260 --> 02:25:09,450 that's similar in spirit to before whereby 3049 02:25:09,450 --> 02:25:12,720 I'm adding an event listener to the document waiting for the whole DOM's 3050 02:25:12,720 --> 02:25:13,830 content to be loaded. 3051 02:25:13,830 --> 02:25:17,490 But then inside of that function, I'm now doing this. 3052 02:25:17,490 --> 02:25:21,270 I'm creating a variable called input and selecting 3053 02:25:21,270 --> 02:25:25,410 from the document the one and only input tag that we saw just a moment ago. 3054 02:25:25,410 --> 02:25:28,530 I'm then adding on line 11 in event listener 3055 02:25:28,530 --> 02:25:32,323 for key up, which is exactly that gesture so that I can execute 3056 02:25:32,323 --> 02:25:35,490 some additional code any time the human lifts their finger from the keyboard 3057 02:25:35,490 --> 02:25:36,690 after typing a key. 3058 02:25:36,690 --> 02:25:38,050 What do I then do? 3059 02:25:38,050 --> 02:25:41,190 Well, I'm going to go ahead, it seems, and declare another variable called 3060 02:25:41,190 --> 02:25:41,800 name. 3061 02:25:41,800 --> 02:25:44,440 And I'm just going to select some p tag on the page. 3062 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. 3063 02:25:48,060 --> 02:25:51,990 If I scroll down to the bottom of the page where my actual HTML is, 3064 02:25:51,990 --> 02:25:55,650 you'll see that there's just a form tag and no on submit handler anymore, 3065 02:25:55,650 --> 02:25:56,310 as before. 3066 02:25:56,310 --> 02:25:59,430 There's just an input tag and no button at all, 3067 02:25:59,430 --> 02:26:03,038 but there is on line 29 here an open and close p tag 3068 02:26:03,038 --> 02:26:05,580 just so I have an empty placeholder in which to put something 3069 02:26:05,580 --> 02:26:08,040 like hello David or hello Carter. 3070 02:26:08,040 --> 02:26:12,000 So that's why now on line 12 I can define a variable called name 3071 02:26:12,000 --> 02:26:16,180 and I can select that p tag so that what do I want to do? 3072 02:26:16,180 --> 02:26:19,180 Well, if inside of the input there's a value, 3073 02:26:19,180 --> 02:26:22,900 so this is essentially checking for null or the absence of a string. 3074 02:26:22,900 --> 02:26:26,160 So if input.value does not equal nothing, 3075 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 3076 02:26:30,840 --> 02:26:33,220 is a very clever way of doing the following. 3077 02:26:33,220 --> 02:26:35,640 Go into that name tag. 3078 02:26:35,640 --> 02:26:38,010 That is to say, the empty paragraph. 3079 02:26:38,010 --> 02:26:42,720 Change the inner HTML of it, the HTML inside of it, to be literally this. 3080 02:26:42,720 --> 02:26:44,670 Hello comma. 3081 02:26:44,670 --> 02:26:47,430 And then just so you've seen an additional piece of syntax, 3082 02:26:47,430 --> 02:26:50,237 this is similar to Python's f strings, the syntax 3083 02:26:50,237 --> 02:26:51,570 is a little weird in JavaScript. 3084 02:26:51,570 --> 02:26:54,957 You actually use not single quotes, not double quotes, but back ticks, 3085 02:26:54,957 --> 02:26:57,540 which on a US English keyboard are typically the top left hand 3086 02:26:57,540 --> 02:26:59,700 key of your keyboard or thereabouts. 3087 02:26:59,700 --> 02:27:05,670 And using dollar sign curly braces just like the curly braces alone in Python 3088 02:27:05,670 --> 02:27:08,740 allows us to plug in whatever the value is of that input. 3089 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 3090 02:27:12,750 --> 02:27:13,890 whoever you are. 3091 02:27:13,890 --> 02:27:16,370 And in fact, we can see that behavior now as I delete, 3092 02:27:16,370 --> 02:27:19,710 delete, delete, delete, delete, delete, delete and nothing's there. 3093 02:27:19,710 --> 02:27:24,210 Now that if condition is no longer true and so we see this default value 3094 02:27:24,210 --> 02:27:24,760 instead. 3095 02:27:24,760 --> 02:27:28,740 So this is only to say that by harnessing these various events that 3096 02:27:28,740 --> 02:27:32,430 are constantly happening on most any web page, we can now register code 3097 02:27:32,430 --> 02:27:36,210 just like we did way back in Scratch to actually listen for those events 3098 02:27:36,210 --> 02:27:38,370 and do something with them. 3099 02:27:38,370 --> 02:27:41,640 Now, it turns out we can do some interesting things even using 3100 02:27:41,640 --> 02:27:42,540 third party code. 3101 02:27:42,540 --> 02:27:46,020 And just as we used bootstrap a bit ago to make our table prettier, 3102 02:27:46,020 --> 02:27:50,460 allow me to propose that we also take a look at this version of favorites 3103 02:27:50,460 --> 02:27:51,100 as well. 3104 02:27:51,100 --> 02:27:53,100 Let me go back into my source 8 directory 3105 02:27:53,100 --> 02:27:56,940 and open up favorites2, which I made in advance, which looks almost the same, 3106 02:27:56,940 --> 02:27:58,540 though I've zoomed in here a bit. 3107 02:27:58,540 --> 02:28:04,960 But you'll notice somewhat subtly over the leftmost column in this table, 3108 02:28:04,960 --> 02:28:08,640 you'll see now this arrow in gray pointing up and pointing down. 3109 02:28:08,640 --> 02:28:10,020 Previously those were not there. 3110 02:28:10,020 --> 02:28:12,720 All I had was a static HTML table with all 3111 02:28:12,720 --> 02:28:14,970 of this data sorted in whatever order it was 3112 02:28:14,970 --> 02:28:17,160 inputted the other day in that form. 3113 02:28:17,160 --> 02:28:19,260 But now notice what I can do. 3114 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, 3115 02:28:23,970 --> 02:28:25,050 I can sort in this arrow. 3116 02:28:25,050 --> 02:28:28,190 So essentially doing it chronologically forward or backward. 3117 02:28:28,190 --> 02:28:29,900 Now, how is that sorting happening? 3118 02:28:29,900 --> 02:28:32,810 It's presumably based on all of the timestamps that 3119 02:28:32,810 --> 02:28:37,610 were registered when we submitted that Google Form just a bit ago when 3120 02:28:37,610 --> 02:28:38,480 it was live. 3121 02:28:38,480 --> 02:28:42,530 But now using JavaScript, it turns out that we can use some logic somehow 3122 02:28:42,530 --> 02:28:44,580 and sort this data by the same. 3123 02:28:44,580 --> 02:28:47,900 And you don't get that automatically just by using HTML alone. 3124 02:28:47,900 --> 02:28:49,440 Now, how did I achieve that? 3125 02:28:49,440 --> 02:28:52,370 Well, it turns out if I go ahead and close these hello files. 3126 02:28:52,370 --> 02:28:57,380 And in VS Code let's open up favorites2.html. 3127 02:28:57,380 --> 02:29:00,350 You'll see that all of the HTML is actually the same if I 3128 02:29:00,350 --> 02:29:02,150 scroll down and down through this file. 3129 02:29:02,150 --> 02:29:05,060 But I added a little something interesting at top. 3130 02:29:05,060 --> 02:29:08,420 I copied and pasted the appropriate URLs and HTML tags 3131 02:29:08,420 --> 02:29:10,370 from bootstrap's documentation. 3132 02:29:10,370 --> 02:29:14,840 And you'll see here that I have a file called not only bootstrap.min.css 3133 02:29:14,840 --> 02:29:19,220 but also bootstrap.bundle.min.js as well as a couple of other things 3134 02:29:19,220 --> 02:29:22,640 as well that allows me ultimately using third party 3135 02:29:22,640 --> 02:29:27,560 libraries to add some special HTML attributes that those libraries told 3136 02:29:27,560 --> 02:29:28,430 me to add. 3137 02:29:28,430 --> 02:29:31,820 And then as soon as those libraries detect the presence of these attributes 3138 02:29:31,820 --> 02:29:36,080 now on my own raw data, they do their thing and JavaScriptify, 3139 02:29:36,080 --> 02:29:38,600 not a technical term, the entire table and now 3140 02:29:38,600 --> 02:29:40,640 make it interactive and not static. 3141 02:29:40,640 --> 02:29:43,190 So you'll see here that the aesthetics of the table 3142 02:29:43,190 --> 02:29:45,290 are as before, table and table striped. 3143 02:29:45,290 --> 02:29:47,900 But I'm adding now another HTML attribute called 3144 02:29:47,900 --> 02:29:50,130 data toggle whose value is table. 3145 02:29:50,130 --> 02:29:53,030 And I know that only from the documentation of these libraries 3146 02:29:53,030 --> 02:29:57,230 indicating that that's how I can now enable this table to be interactive 3147 02:29:57,230 --> 02:30:01,370 as I can too by adding data sortabls="true" 3148 02:30:01,370 --> 02:30:04,070 on specifically the timestamp column. 3149 02:30:04,070 --> 02:30:08,120 And the only thing unfamiliar here perhaps is I'm using TH for Table 3150 02:30:08,120 --> 02:30:10,940 Heading as opposed to TD as I do elsewhere. 3151 02:30:10,940 --> 02:30:14,090 But that's all that it takes to now focus on the raw data 3152 02:30:14,090 --> 02:30:17,330 you want to present and let someone else do the heavy lifting of actually 3153 02:30:17,330 --> 02:30:18,920 implementing the logic. 3154 02:30:18,920 --> 02:30:23,450 Well, let's end with just a look at what more you can do with JavaScript 3155 02:30:23,450 --> 02:30:25,580 and just how powerful it is when you combine 3156 02:30:25,580 --> 02:30:30,620 a language like this with the data and the user interface you want to convey. 3157 02:30:30,620 --> 02:30:33,740 Let's go ahead and open up within source 8 directory 3158 02:30:33,740 --> 02:30:35,990 something called background.html. 3159 02:30:35,990 --> 02:30:38,010 Now this interface here is quite simple. 3160 02:30:38,010 --> 02:30:41,420 It just has three buttons, R, G, and B. And the background of course, 3161 02:30:41,420 --> 02:30:43,100 notice by default, is just white. 3162 02:30:43,100 --> 02:30:45,950 But when I click on the R, the background turns red. 3163 02:30:45,950 --> 02:30:47,750 When I click on the G, it turns green. 3164 02:30:47,750 --> 02:30:48,980 And the blue, it turns blue. 3165 02:30:48,980 --> 02:30:50,610 And again and again. 3166 02:30:50,610 --> 02:30:52,250 So how is this working? 3167 02:30:52,250 --> 02:30:54,560 Well, if you think back again to the available events, 3168 02:30:54,560 --> 02:30:57,800 perhaps I'm just listening for a click on those buttons 3169 02:30:57,800 --> 02:31:01,040 and then doing something with maybe the CSS of the page 3170 02:31:01,040 --> 02:31:03,720 to allow me to see those different colors. 3171 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. 3172 02:31:08,720 --> 02:31:12,050 And in here, you'll see some simple HTML at the top. 3173 02:31:12,050 --> 02:31:13,070 Just three buttons. 3174 02:31:13,070 --> 02:31:17,210 But I've given each a unique ID so that I can reference it in code. 3175 02:31:17,210 --> 02:31:19,640 And then inside of a script tag here below, 3176 02:31:19,640 --> 02:31:24,180 because I didn't bother with the DOM content loaded event here, 3177 02:31:24,180 --> 02:31:25,970 notice that I'm doing the following. 3178 02:31:25,970 --> 02:31:29,510 I'm creating a variable called body that lets me select the body tag. 3179 02:31:29,510 --> 02:31:32,810 I then have in these three lines some code that handles red. 3180 02:31:32,810 --> 02:31:33,860 What am I doing? 3181 02:31:33,860 --> 02:31:39,120 Well, I'm selecting from the document whatever HTML tag has unique ID of red. 3182 02:31:39,120 --> 02:31:42,290 And then I'm adding an event listener for any click on that button. 3183 02:31:42,290 --> 02:31:44,810 And any time someone clicks on that red button, 3184 02:31:44,810 --> 02:31:46,920 I call this function anonymously. 3185 02:31:46,920 --> 02:31:48,620 It doesn't even have or need a name. 3186 02:31:48,620 --> 02:31:51,860 And this syntax here is powerful, because now in JavaScript I 3187 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 3188 02:31:56,930 --> 02:32:01,670 two lines ago, accessing its style, accessing its background color 3189 02:32:01,670 --> 02:32:04,640 property, and setting it equal to quote unquote red. 3190 02:32:04,640 --> 02:32:06,380 And I do the same down below for green. 3191 02:32:06,380 --> 02:32:07,820 I do the same down below for blue. 3192 02:32:07,820 --> 02:32:10,610 And the only thing worth noting here is that in CSS, it 3193 02:32:10,610 --> 02:32:14,330 turns out it's the case that the CSS property for the background 3194 02:32:14,330 --> 02:32:18,680 color of a page is actually background-color in all lowercase 3195 02:32:18,680 --> 02:32:20,210 with a hyphen in between. 3196 02:32:20,210 --> 02:32:22,190 Unfortunately in the world of JavaScript, 3197 02:32:22,190 --> 02:32:25,760 a hyphen would be mistaken for subtraction, like background 3198 02:32:25,760 --> 02:32:27,320 minus color, which would be wrong. 3199 02:32:27,320 --> 02:32:31,220 So the convention in JavaScript is when you're trying to manipulate CSS, 3200 02:32:31,220 --> 02:32:36,080 you take whatever the property name is, font size, background color, 3201 02:32:36,080 --> 02:32:38,570 and you change it into so called camel case here. 3202 02:32:38,570 --> 02:32:41,570 You get rid of the hyphen and you capitalize the subsequent words 3203 02:32:41,570 --> 02:32:43,860 like color in this case here. 3204 02:32:43,860 --> 02:32:44,360 All right. 3205 02:32:44,360 --> 02:32:45,140 How about another? 3206 02:32:45,140 --> 02:32:47,670 Well, it turns out back in the day, back in my day, 3207 02:32:47,670 --> 02:32:51,650 there was a HTML tag that would actually allow you to do this. 3208 02:32:51,650 --> 02:32:53,960 Create blinking text on a screen. 3209 02:32:53,960 --> 02:32:56,180 It's rather unpleasant at this rate certainly. 3210 02:32:56,180 --> 02:32:57,510 But how might this work? 3211 02:32:57,510 --> 02:33:02,030 Well, it turns out in JavaScript if we take a look at the blink.html file 3212 02:33:02,030 --> 02:33:07,700 here, we'll see that you can in your HTML do something literally as simple 3213 02:33:07,700 --> 02:33:09,320 as hello world in the body. 3214 02:33:09,320 --> 02:33:11,730 But then you can call this function here. 3215 02:33:11,730 --> 02:33:15,035 It turns out just like document, there's another global special variable 3216 02:33:15,035 --> 02:33:16,910 you can use in JavaScript and browsers called 3217 02:33:16,910 --> 02:33:20,390 window, which refers to all things related to the window itself. 3218 02:33:20,390 --> 02:33:22,590 The window comes with a set interval function, 3219 02:33:22,590 --> 02:33:24,050 which lets you do exactly that. 3220 02:33:24,050 --> 02:33:26,360 Set an interval in milliseconds. 3221 02:33:26,360 --> 02:33:28,740 And after every expiration of that interval, 3222 02:33:28,740 --> 02:33:31,090 some function will be called for you. 3223 02:33:31,090 --> 02:33:33,960 So in this case, it's saying every 50 milliseconds. 3224 02:33:33,960 --> 02:33:37,770 But let's actually slow that down now to 500 milliseconds or one half a second. 3225 02:33:37,770 --> 02:33:39,840 Call a function called blink. 3226 02:33:39,840 --> 02:33:42,630 Notice I do not have parentheses after the blink name 3227 02:33:42,630 --> 02:33:44,490 because I don't want to call blink now. 3228 02:33:44,490 --> 02:33:47,400 I want to tell the JavaScript to call the function called 3229 02:33:47,400 --> 02:33:49,043 blink every 500 milliseconds. 3230 02:33:49,043 --> 02:33:51,210 Now we'll see in a moment what that code looks like, 3231 02:33:51,210 --> 02:33:53,130 but let's go back to the page and reload. 3232 02:33:53,130 --> 02:33:55,800 And you'll see now that it's a more pleasant blinking, 3233 02:33:55,800 --> 02:33:58,950 if that's even the case, every half second because I'm now 3234 02:33:58,950 --> 02:34:03,930 firing that event, that is I'm calling that function now, every 500 3235 02:34:03,930 --> 02:34:05,260 milliseconds instead. 3236 02:34:05,260 --> 02:34:06,460 How am I doing that? 3237 02:34:06,460 --> 02:34:10,210 Well, in this same script tag, I've invented my own blink function. 3238 02:34:10,210 --> 02:34:13,800 This has the distinction back in the day of actually being an HTML tag 3239 02:34:13,800 --> 02:34:17,730 and among the few tags that the world removed and got rid of 3240 02:34:17,730 --> 02:34:21,120 so that it's no longer used because it's not all that user friendly. 3241 02:34:21,120 --> 02:34:22,630 But down here what am I doing? 3242 02:34:22,630 --> 02:34:26,370 I'm getting the body of the document itself with this variable 3243 02:34:26,370 --> 02:34:30,070 and then I'm checking two CSS properties that we didn't talk about before, 3244 02:34:30,070 --> 02:34:33,750 but it turns out that you can check and set the visibility of an element 3245 02:34:33,750 --> 02:34:37,560 in JavaScript by going into that tag, checking its style, 3246 02:34:37,560 --> 02:34:40,350 and getting its visibility at a property. 3247 02:34:40,350 --> 02:34:44,730 And if it happens to equal hidden, the next line of code here, 13, 3248 02:34:44,730 --> 02:34:46,920 sets it equal to visible instead. 3249 02:34:46,920 --> 02:34:49,710 Else if it's not hidden, it must already be visible. 3250 02:34:49,710 --> 02:34:53,520 And so line 17 flips it the other way and changes it to hidden. 3251 02:34:53,520 --> 02:34:56,010 Here left hand, right hand clearly not talking. 3252 02:34:56,010 --> 02:34:59,490 No idea why the opposite of visible is not invisible. 3253 02:34:59,490 --> 02:35:01,618 It's indeed visible and hidden. 3254 02:35:01,618 --> 02:35:03,660 But this just allows you every time this function 3255 02:35:03,660 --> 02:35:06,570 is called to change the property from one value 3256 02:35:06,570 --> 02:35:08,735 to another, achieving that blinking effect. 3257 02:35:08,735 --> 02:35:10,860 You can do even more powerful things that you and I 3258 02:35:10,860 --> 02:35:12,280 take for granted every day. 3259 02:35:12,280 --> 02:35:15,750 Let's go into source 8 and go to autocomplete.html, 3260 02:35:15,750 --> 02:35:16,800 which I wrote in advance. 3261 02:35:16,800 --> 02:35:22,260 And this is a page that also loads into memory a really big dictionary 3262 02:35:22,260 --> 02:35:24,450 that you might recall from problem set five. 3263 02:35:24,450 --> 02:35:28,680 And if I go ahead and type in something like C-A-T, 3264 02:35:28,680 --> 02:35:32,400 you'll notice dynamically an unordered bulleted list 3265 02:35:32,400 --> 02:35:34,800 appearing below the text box that shows you 3266 02:35:34,800 --> 02:35:38,790 all of the words in that dictionary from p set five that start with C 3267 02:35:38,790 --> 02:35:41,940 and then C-A and then T just like the autocomplete 3268 02:35:41,940 --> 02:35:45,390 you see every day on your phone and Google or websites like it. 3269 02:35:45,390 --> 02:35:46,500 How is that working? 3270 02:35:46,500 --> 02:35:49,560 Well, probably I'm listening for the key press going up. 3271 02:35:49,560 --> 02:35:51,930 As soon as that key is pressed, I'm probably 3272 02:35:51,930 --> 02:35:55,560 searching through a big array really of all of those words, 3273 02:35:55,560 --> 02:35:59,080 maybe using linear search, maybe binary search if faster than that. 3274 02:35:59,080 --> 02:36:02,160 And then looking for any string in that array that 3275 02:36:02,160 --> 02:36:06,900 starts with C or C-A or C-A-T. And then I'm generating automatically 3276 02:36:06,900 --> 02:36:08,460 the HTML therefore. 3277 02:36:08,460 --> 02:36:11,490 But perhaps most familiar nowadays is just how much 3278 02:36:11,490 --> 02:36:13,680 your phone and your laptop know about you. 3279 02:36:13,680 --> 02:36:20,250 And let me go into a final example here in source 8 called geolocation.html, 3280 02:36:20,250 --> 02:36:23,310 which is a term of art that just refers to figuring out your geography. 3281 02:36:23,310 --> 02:36:25,170 For instance, your GPS coordinates. 3282 02:36:25,170 --> 02:36:27,960 Now here we have a third and final global variable 3283 02:36:27,960 --> 02:36:30,510 that your browser provides you with called navigator. 3284 02:36:30,510 --> 02:36:32,670 And in navigator, there's a special object 3285 02:36:32,670 --> 02:36:36,910 called geolocation that comes with a function called get current position. 3286 02:36:36,910 --> 02:36:41,430 So if you call navigator.geolocation.getCurrentPosition 3287 02:36:41,430 --> 02:36:44,830 and then pass in a function of your own that doesn't need a name 3288 02:36:44,830 --> 02:36:47,580 but does take an argument, in this case I called it position, 3289 02:36:47,580 --> 02:36:50,970 as soon as the browser or as soon as the phone has figured out 3290 02:36:50,970 --> 02:36:55,080 where in the world that user is with that browser at some latitude 3291 02:36:55,080 --> 02:36:57,570 and longitude, the browser will automatically 3292 02:36:57,570 --> 02:36:59,400 call that function for you. 3293 02:36:59,400 --> 02:37:02,250 And you can do anything you want with the position that comes back, 3294 02:37:02,250 --> 02:37:04,068 the latitude and longitude respectively. 3295 02:37:04,068 --> 02:37:06,610 So I'm going to use a function that's not often that helpful, 3296 02:37:06,610 --> 02:37:10,080 but for our purposes today it's just going to write to the document itself 3297 02:37:10,080 --> 02:37:13,690 to my big rectangular region whatever the latitude is, then a comma, 3298 02:37:13,690 --> 02:37:15,910 and then the longitude as well. 3299 02:37:15,910 --> 02:37:20,070 So if we go back with this final flourish into source 8, 3300 02:37:20,070 --> 02:37:24,210 open up geolocation.html, you'll see that my browser first 3301 02:37:24,210 --> 02:37:28,570 wants my permission to let this website my own know my location. 3302 02:37:28,570 --> 02:37:30,300 I'm going to go ahead and click Allow. 3303 02:37:30,300 --> 02:37:31,890 Crossing my fingers, because it might take 3304 02:37:31,890 --> 02:37:34,140 a moment for the phone or the laptop to figure it out. 3305 02:37:34,140 --> 02:37:36,690 And it looks like according to Google, I am 3306 02:37:36,690 --> 02:37:41,820 right this moment with my Mac at latitude longitude 42.375 comma 3307 02:37:41,820 --> 02:37:43,590 negative 71.11. 3308 02:37:43,590 --> 02:37:45,760 Let's go ahead and highlight and copy that. 3309 02:37:45,760 --> 02:37:48,540 Let's go to a website like googlemaps.com. 3310 02:37:48,540 --> 02:37:49,420 Crossing our fingers. 3311 02:37:49,420 --> 02:37:52,170 If you've never done this, you can search for GPS coordinates too. 3312 02:37:52,170 --> 02:37:53,160 Let's hit Enter. 3313 02:37:53,160 --> 02:37:56,040 And amazing. 3314 02:37:56,040 --> 02:37:59,550 We are indeed in Sanders Theater, roughly there, 3315 02:37:59,550 --> 02:38:02,250 standing on this stage on Halloween. 3316 02:38:02,250 --> 02:38:03,810 And that then is week eight. 3317 02:38:03,810 --> 02:38:05,580 We will see you next time. 3318 02:38:05,580 --> 02:38:06,480 Happy Halloween. 3319 02:38:06,480 --> 02:38:07,206 [APPLAUSE] 3320 02:38:07,206 --> 02:38:07,873 [VIDEO PLAYBACK] 3321 02:38:07,873 --> 02:38:09,600 - Off you go. 3322 02:38:09,600 --> 02:38:10,230 Buffering. 3323 02:38:10,230 --> 02:38:12,420 OK. 3324 02:38:12,420 --> 02:38:15,400 Josh, nice. 3325 02:38:15,400 --> 02:38:15,900 Helen. 3326 02:38:15,900 --> 02:38:17,220 Oh. 3327 02:38:17,220 --> 02:38:18,651 [LAUGHS] 3328 02:38:18,651 --> 02:38:21,040 3329 02:38:21,040 --> 02:38:22,070 Moni. 3330 02:38:22,070 --> 02:38:22,910 Oh no, wait. 3331 02:38:22,910 --> 02:38:28,952 3332 02:38:28,952 --> 02:38:29,910 That was amazing, Josh. 3333 02:38:29,910 --> 02:38:34,590 3334 02:38:34,590 --> 02:38:35,090 Sophie. 3335 02:38:35,090 --> 02:38:38,360 3336 02:38:38,360 --> 02:38:40,340 [LAUGHS] 3337 02:38:40,340 --> 02:38:42,320 3338 02:38:42,320 --> 02:38:44,810 Amazing. 3339 02:38:44,810 --> 02:38:47,465 That was perfect. 3340 02:38:47,465 --> 02:38:48,435 Moni. 3341 02:38:48,435 --> 02:38:50,380 [LAUGHS] 3342 02:38:50,380 --> 02:38:55,890 I think I-- over to Yoel. 3343 02:38:55,890 --> 02:38:56,390 Guy. 3344 02:38:56,390 --> 02:39:01,070 3345 02:39:01,070 --> 02:39:02,210 That was amazing. 3346 02:39:02,210 --> 02:39:03,030 Thank you all. 3347 02:39:03,030 --> 02:39:03,530 - So good. 3348 02:39:03,530 --> 02:39:06,530 3349 02:39:06,530 --> 02:39:07,430 [END PLAYBACK] 3350 02:39:07,430 --> 02:39:10,480 [MUSIC PLAYING] 3351 02:39:10,480 --> 02:39:44,000