1 00:00:00,000 --> 00:00:03,479 [MUSIC PLAYING] 2 00:00:03,479 --> 00:00:50,960 3 00:00:50,960 --> 00:00:52,830 DAVID J. MALAN: This is CS50. 4 00:00:52,830 --> 00:00:56,927 And today, we transition from the world of C and, with it, pointers 5 00:00:56,927 --> 00:01:00,010 and some of the struggles that you might have felt over the past few weeks 6 00:01:00,010 --> 00:01:02,560 to a more familiar world, that of web programming. 7 00:01:02,560 --> 00:01:05,740 I'm using web browsers and mobile devices and laptops and desktops 8 00:01:05,740 --> 00:01:08,230 and creating more graphical and more interactive experience 9 00:01:08,230 --> 00:01:10,762 than our traditional command-line terminals have allowed. 10 00:01:10,762 --> 00:01:13,720 And we'll see, though, along the way that a lot of the ideas that we've 11 00:01:13,720 --> 00:01:16,300 been exploring over the past few weeks are still going to remain with us. 12 00:01:16,300 --> 00:01:18,216 And we're going to see them in different ways. 13 00:01:18,216 --> 00:01:21,580 We're going to see them in the form of other languages and other syntax. 14 00:01:21,580 --> 00:01:24,220 But the ideas will remain quite reminiscent of what 15 00:01:24,220 --> 00:01:26,330 we did back in week 0. 16 00:01:26,330 --> 00:01:29,950 So TCP/IP is perhaps the most technical way 17 00:01:29,950 --> 00:01:34,380 and the most low-level way we can quickly make the web uninteresting. 18 00:01:34,380 --> 00:01:37,600 But you've probably, at least, seen this acronym somewhere, maybe 19 00:01:37,600 --> 00:01:40,900 on your Mac, your PC, some setting maybe once upon a time. 20 00:01:40,900 --> 00:01:44,080 And this, actually, just refers to a protocol 21 00:01:44,080 --> 00:01:47,050 or, really, a pair of protocols, languages of sorts 22 00:01:47,050 --> 00:01:50,230 that computers speak in order to transmit information 23 00:01:50,230 --> 00:01:51,900 from one computer to another. 24 00:01:51,900 --> 00:01:55,042 And this is what makes most of the internet today work. 25 00:01:55,042 --> 00:01:57,250 The fact that you can pull up your laptop and desktop 26 00:01:57,250 --> 00:02:01,210 and talk to any computer on the internet is because of these protocols, 27 00:02:01,210 --> 00:02:04,870 conventions that humans decided shall exist some years ago. 28 00:02:04,870 --> 00:02:07,350 And they just dictate how computers intercommunicate. 29 00:02:07,350 --> 00:02:09,130 But let's make it a lot more familiar. 30 00:02:09,130 --> 00:02:14,290 In our human world, you've probably, at some point, sent or received a letter. 31 00:02:14,290 --> 00:02:16,090 These days, it's perhaps more electronic. 32 00:02:16,090 --> 00:02:17,950 But, at least, you've gotten one such letter 33 00:02:17,950 --> 00:02:20,590 from probably a human, maybe a grandparent or the liked, 34 00:02:20,590 --> 00:02:22,180 or sent something yourself. 35 00:02:22,180 --> 00:02:26,020 But before you can actually send that message to the recipient 36 00:02:26,020 --> 00:02:30,040 and put it through the US mail or the international mail services, 37 00:02:30,040 --> 00:02:31,791 what needs to go on the envelope? 38 00:02:31,791 --> 00:02:32,540 AUDIENCE: Address. 39 00:02:32,540 --> 00:02:34,498 DAVID J. MALAN: Yeah-- so some kind of address. 40 00:02:34,498 --> 00:02:36,292 And what does an address consist of? 41 00:02:36,292 --> 00:02:37,085 AUDIENCE: Name. 42 00:02:37,085 --> 00:02:37,960 DAVID J. MALAN: Name. 43 00:02:37,960 --> 00:02:38,840 AUDIENCE: Where they are. 44 00:02:38,840 --> 00:02:40,131 DAVID J. MALAN: Where they are. 45 00:02:40,131 --> 00:02:41,020 AUDIENCE: [INAUDIBLE] 46 00:02:41,020 --> 00:02:44,640 DAVID J. MALAN: So where they are might include a street address and a city, 47 00:02:44,640 --> 00:02:48,070 a state, a ZIP code in the US, or a postal code, more generally, 48 00:02:48,070 --> 00:02:50,242 and the country, if you really want to be specific. 49 00:02:50,242 --> 00:02:52,450 And so all of that goes on the front of the envelope, 50 00:02:52,450 --> 00:02:54,590 generally in the center of the envelope. 51 00:02:54,590 --> 00:02:58,375 And then what often goes on the top left-hand corner in most countries? 52 00:02:58,375 --> 00:02:59,250 AUDIENCE: The return. 53 00:02:59,250 --> 00:02:59,550 DAVID J. MALAN: Yeah. 54 00:02:59,550 --> 00:03:02,010 So the return address-- so that if something goes wrong, 55 00:03:02,010 --> 00:03:05,280 albeit infrequently, that letter can get-- make its way back to you, 56 00:03:05,280 --> 00:03:08,640 and also the recipient knows just immediately who actually sent them 57 00:03:08,640 --> 00:03:09,270 the no. 58 00:03:09,270 --> 00:03:12,120 So that is enough information to get a letter from point A 59 00:03:12,120 --> 00:03:14,910 to point B because these addresses, these postal addresses 60 00:03:14,910 --> 00:03:19,950 in our human world, uniquely identify houses or buildings or people, 61 00:03:19,950 --> 00:03:21,870 in some sense, in the world. 62 00:03:21,870 --> 00:03:27,030 So right now, we're at 45 Quincy Street, Cambridge, Massachusetts, 02138, USA. 63 00:03:27,030 --> 00:03:30,210 That is probably enough specificity for anyone in the world 64 00:03:30,210 --> 00:03:33,660 to mail us a postcard saying "Hello world" in written form 65 00:03:33,660 --> 00:03:34,980 and get it to this building. 66 00:03:34,980 --> 00:03:37,646 Meanwhile, if we wanted to send something to the Science Center, 67 00:03:37,646 --> 00:03:42,070 1 Oxford Street, Cambridge, Mass, 02138, USA, that's its unique address. 68 00:03:42,070 --> 00:03:45,420 So it stands to reason that computers, including our own Macs and PCs 69 00:03:45,420 --> 00:03:47,370 and Android phones and iPhones and the like, 70 00:03:47,370 --> 00:03:50,707 all have unique addresses, as well, because, after all, they 71 00:03:50,707 --> 00:03:51,540 want to communicate. 72 00:03:51,540 --> 00:03:54,390 And they need to get bits, zeros and ones, from point A to point B. 73 00:03:54,390 --> 00:03:58,290 But they're not quite as verbose as those kinds of addresses. 74 00:03:58,290 --> 00:04:01,650 Computers have what you probably know as IP addresses, 75 00:04:01,650 --> 00:04:03,600 Internet Protocol addresses. 76 00:04:03,600 --> 00:04:06,000 And this just means that humans decided years ago 77 00:04:06,000 --> 00:04:08,160 that every computer in the internet is going 78 00:04:08,160 --> 00:04:10,690 to have a unique number identifying it. 79 00:04:10,690 --> 00:04:15,530 And that number is generally of the form something dot something dot something 80 00:04:15,530 --> 00:04:16,709 dot something. 81 00:04:16,709 --> 00:04:21,209 And, as it turns out, each of these somethings between the dots 82 00:04:21,209 --> 00:04:24,599 is a number from 0 to 255. 83 00:04:24,599 --> 00:04:26,640 And now, after all these weeks of CS50, your mind 84 00:04:26,640 --> 00:04:28,830 can probably jump to a quick answer. 85 00:04:28,830 --> 00:04:33,060 How many bits must each of these numbers be taking up 86 00:04:33,060 --> 00:04:35,430 if the range is from 0 to 255? 87 00:04:35,430 --> 00:04:36,240 Eight. 88 00:04:36,240 --> 00:04:37,830 So eight-- and why is that eight? 89 00:04:37,830 --> 00:04:40,129 So 256 has been a recurring theme. 90 00:04:40,129 --> 00:04:41,670 And if you don't recall, that's fine. 91 00:04:41,670 --> 00:04:44,650 But yes, this is eight bits, eight bits, eight bits, eight bits, 92 00:04:44,650 --> 00:04:48,210 which means the numbers that we humans use to uniquely identify our computers 93 00:04:48,210 --> 00:04:50,357 on the internet are 32 bits in total. 94 00:04:50,357 --> 00:04:53,190 Well, there's probably another number that can roughly come to mind. 95 00:04:53,190 --> 00:05:01,170 If you've got 32 bits, how high can you count, roughly speaking, from 0 to-- 96 00:05:01,170 --> 00:05:03,022 I heard a murmur-- 97 00:05:03,022 --> 00:05:03,980 AUDIENCE: Four billion. 98 00:05:03,980 --> 00:05:05,188 DAVID J. MALAN: Four billion. 99 00:05:05,188 --> 00:05:06,460 So it's roughly four billion. 100 00:05:06,460 --> 00:05:10,360 And we brought that up in week 0 with a four billion-page phone book, 101 00:05:10,360 --> 00:05:11,050 imagining that. 102 00:05:11,050 --> 00:05:14,290 So four billion is roughly what you can count up to with 32 bits. 103 00:05:14,290 --> 00:05:19,120 So that means there can be four billion computers, devices, or anything 104 00:05:19,120 --> 00:05:21,504 on the internet, uniquely identified-- small white 105 00:05:21,504 --> 00:05:24,670 lie because that's actually not quite enough these days with all the devices 106 00:05:24,670 --> 00:05:26,003 and all the humans in the world. 107 00:05:26,003 --> 00:05:27,540 But we found workarounds for that. 108 00:05:27,540 --> 00:05:28,348 Question? 109 00:05:28,348 --> 00:05:31,554 AUDIENCE: [INAUDIBLE] 110 00:05:31,554 --> 00:05:40,147 111 00:05:40,147 --> 00:05:42,230 DAVID J. MALAN: But only half of them at the time. 112 00:05:42,230 --> 00:05:42,730 No. 113 00:05:42,730 --> 00:05:45,540 So yes, if by 2023 or whatever year humans are projected 114 00:05:45,540 --> 00:05:47,380 to be almost entirely online, and there's 115 00:05:47,380 --> 00:05:50,670 some-- billions and billions of people, eight billion or so, 116 00:05:50,670 --> 00:05:53,430 then that's a problem for this system. 117 00:05:53,430 --> 00:05:55,952 Thankfully, as long ago as 20 years ago did people realized, 118 00:05:55,952 --> 00:05:57,910 mathematically, this was going to be a problem. 119 00:05:57,910 --> 00:06:00,972 And so there's actually a newer version of IP, Internet Protocol. 120 00:06:00,972 --> 00:06:03,180 This is version 4 we're talking about, which is still 121 00:06:03,180 --> 00:06:04,710 pretty omnipresent in the world. 122 00:06:04,710 --> 00:06:10,570 Version 6 actually uses not 32 bits, but 128 bits, which is massive. 123 00:06:10,570 --> 00:06:13,005 And I can't even pronounce how big of a number that is. 124 00:06:13,005 --> 00:06:14,130 So we're thinking about it. 125 00:06:14,130 --> 00:06:16,255 And the biggest companies of the world have already 126 00:06:16,255 --> 00:06:19,510 transitioned to using bigger addresses rather than these 32-bit addresses. 127 00:06:19,510 --> 00:06:22,830 But these are still pretty common in almost any device you might own or see 128 00:06:22,830 --> 00:06:24,610 on campus or elsewhere. 129 00:06:24,610 --> 00:06:27,502 So if you have a unique address, that's enough to put 130 00:06:27,502 --> 00:06:28,710 on the front of the envelope. 131 00:06:28,710 --> 00:06:32,520 And it turns out that if you're sending an email or a chat message 132 00:06:32,520 --> 00:06:35,890 or whatever, you, too-- your Mac, PC, or phone-- has an IP address. 133 00:06:35,890 --> 00:06:39,570 So that's enough to put in the top left-hand corner, conceptually. 134 00:06:39,570 --> 00:06:41,760 But you need one more piece of information. 135 00:06:41,760 --> 00:06:47,040 It turns out that on the internet, there are servers, computers, 136 00:06:47,040 --> 00:06:49,680 that are just constantly listening for people to connect 137 00:06:49,680 --> 00:06:53,190 to them, like us, checking our email and visiting Facebook 138 00:06:53,190 --> 00:06:55,320 and Gmail and other such websites. 139 00:06:55,320 --> 00:06:57,480 And those servers, though, can do multiple things. 140 00:06:57,480 --> 00:06:58,890 Google has lots of businesses. 141 00:06:58,890 --> 00:07:02,220 They give you email and web services and video conferencing 142 00:07:02,220 --> 00:07:04,590 and lots of other internet-based services. 143 00:07:04,590 --> 00:07:08,070 And so humans also decided, years ago, to identify 144 00:07:08,070 --> 00:07:12,880 all of these possible internet services with just unique numbers-- 145 00:07:12,880 --> 00:07:15,100 names also, but also unique numbers. 146 00:07:15,100 --> 00:07:17,606 And it turns out that humans decided years ago 147 00:07:17,606 --> 00:07:20,730 that when you visit a website, there's one more piece of information that's 148 00:07:20,730 --> 00:07:23,520 got to go on this envelope, not just the server's IP address 149 00:07:23,520 --> 00:07:26,100 that you're trying to connect to, but also the number 80 150 00:07:26,100 --> 00:07:31,420 because 80 equals HTTP, acronym you're surely familiar with by now. 151 00:07:31,420 --> 00:07:33,570 And that just denotes this is a web request. 152 00:07:33,570 --> 00:07:37,860 If, instead, it said something like 25, that's SMTP, which is email. 153 00:07:37,860 --> 00:07:40,260 So that might mean inside of this virtual envelope 154 00:07:40,260 --> 00:07:42,810 is actually an email message going to Gmail or the like. 155 00:07:42,810 --> 00:07:44,326 And there's bunches more numbers. 156 00:07:44,326 --> 00:07:46,950 But the point is that there are numbers that uniquely identify. 157 00:07:46,950 --> 00:07:50,880 So when Google gets a virtual envelope, just a whole bunch of bits, zeros 158 00:07:50,880 --> 00:07:56,310 and ones, that, in some way, has an IP address on it as the destination, 159 00:07:56,310 --> 00:07:59,970 it also knows, oh, is this an email or is this a video conference message 160 00:07:59,970 --> 00:08:02,469 or is this a chat message or something else. 161 00:08:02,469 --> 00:08:04,260 So just to make this more real then, if I'm 162 00:08:04,260 --> 00:08:07,800 going to go ahead and write this down, my IP address to whom 163 00:08:07,800 --> 00:08:11,640 I'm sending something might be 1.2.3.4. 164 00:08:11,640 --> 00:08:14,520 Generally, then, I'm going to send it to, say, port 80. 165 00:08:14,520 --> 00:08:20,470 Maybe my IP address is 5.6.7.8. 166 00:08:20,470 --> 00:08:22,010 And so an envelope-- 167 00:08:22,010 --> 00:08:25,260 I'll be at [INAUDIBLE]---- and it's really just going to have those pieces 168 00:08:25,260 --> 00:08:27,720 of information-- the destination address, colon, 169 00:08:27,720 --> 00:08:30,870 and then the number of the service you care about, HTTP or whatever, 170 00:08:30,870 --> 00:08:33,460 and then your own IP address, and more information. 171 00:08:33,460 --> 00:08:36,690 But the point is both sender and recipient in dresses-- 172 00:08:36,690 --> 00:08:40,809 that's enough to get data from one computer in the world to another. 173 00:08:40,809 --> 00:08:42,309 And there's so much more complexity. 174 00:08:42,309 --> 00:08:44,530 This is a whole field in computer science of networking, 175 00:08:44,530 --> 00:08:45,821 if you like this kind of stuff. 176 00:08:45,821 --> 00:08:49,170 But that's how, in a nutshell, the internet gets data from point A 177 00:08:49,170 --> 00:08:51,420 to point B. And this envelope just represents 178 00:08:51,420 --> 00:08:53,530 a whole bunch of zeros and ones. 179 00:08:53,530 --> 00:08:55,020 But what's inside of that envelope? 180 00:08:55,020 --> 00:08:57,810 And that's where we'll focus today and in the weeks to come. 181 00:08:57,810 --> 00:09:00,120 It's actually content. 182 00:09:00,120 --> 00:09:03,220 It's the email you care about or the web page you care about. 183 00:09:03,220 --> 00:09:06,390 And how do we actually decide what server we're connecting to? 184 00:09:06,390 --> 00:09:10,200 Well, typically, you might go to a so-called URL, Uniform Resource 185 00:09:10,200 --> 00:09:11,180 Locator. 186 00:09:11,180 --> 00:09:14,460 A URL is just the address of a server. 187 00:09:14,460 --> 00:09:18,690 And that's going to be the-- really, the ultimate recipient of that envelope 188 00:09:18,690 --> 00:09:20,040 that we're trying to send. 189 00:09:20,040 --> 00:09:22,264 But this, of course, is not an IP address. 190 00:09:22,264 --> 00:09:24,180 This does not follow the pattern something dot 191 00:09:24,180 --> 00:09:25,830 something dot something dot something. 192 00:09:25,830 --> 00:09:28,680 So if all of us humans are constantly typing stuff like this 193 00:09:28,680 --> 00:09:31,320 into our browsers, yet the whole story just 194 00:09:31,320 --> 00:09:35,970 told is about numbers and port numbers and low-level stuff, 195 00:09:35,970 --> 00:09:37,260 where's the connection? 196 00:09:37,260 --> 00:09:40,560 Does anyone already know how you get from typing this 197 00:09:40,560 --> 00:09:46,370 to a bunch of zeros and ones that are somehow addressed with numbers? 198 00:09:46,370 --> 00:09:47,000 DNS, I heard. 199 00:09:47,000 --> 00:09:48,360 What's DNS? 200 00:09:48,360 --> 00:09:48,910 Yeah. 201 00:09:48,910 --> 00:09:52,490 So it turns out there's a technology in the world-- domain name system, 202 00:09:52,490 --> 00:09:53,180 in fact. 203 00:09:53,180 --> 00:09:56,870 And DNS, Domain Name System, is just a type of service on the internet 204 00:09:56,870 --> 00:09:58,790 that Harvard maintains and Yale maintains, 205 00:09:58,790 --> 00:10:01,160 and Comcast and Verizon and a lot of the big players 206 00:10:01,160 --> 00:10:03,410 in the world, whose purpose in life is to run 207 00:10:03,410 --> 00:10:07,940 servers that convert what are called domain names to IP addresses, 208 00:10:07,940 --> 00:10:12,980 and vice versa, so that when we humans type in www.example.com into a browser, 209 00:10:12,980 --> 00:10:17,390 it's our Mac or PC or phone that contacts a local server, a DNS server, 210 00:10:17,390 --> 00:10:20,780 on the local campus or university or apartment or whatever, 211 00:10:20,780 --> 00:10:24,105 asks what is the IP address for www.example.com. 212 00:10:24,105 --> 00:10:26,480 And then what your Mac or PC or phone does 213 00:10:26,480 --> 00:10:29,060 is it writes that address on the envelope. 214 00:10:29,060 --> 00:10:32,990 But it puts a request for specific web page inside of the envelope. 215 00:10:32,990 --> 00:10:35,370 And when you get back a response from that server, 216 00:10:35,370 --> 00:10:38,120 it's going to be your address that's on the front of the envelope. 217 00:10:38,120 --> 00:10:39,828 And inside of the envelope is going to be 218 00:10:39,828 --> 00:10:41,840 the web page or the email or the chat message 219 00:10:41,840 --> 00:10:45,360 or whatever it is you were trying to actually access. 220 00:10:45,360 --> 00:10:47,905 So let's tease this apart into some of its components. 221 00:10:47,905 --> 00:10:50,030 First of all, this thing here highlighted in yellow 222 00:10:50,030 --> 00:10:51,431 is officially the domain name. 223 00:10:51,431 --> 00:10:53,180 You've probably all used this term before. 224 00:10:53,180 --> 00:10:55,810 It's usually something dot something. 225 00:10:55,810 --> 00:10:59,300 "Com" typically refers to commerce or commercial, although anyone, 226 00:10:59,300 --> 00:11:01,760 for any purpose, can use .com. 227 00:11:01,760 --> 00:11:07,520 Back in the day, very popular were .com, .net, .org, .edu, .gov, .mil. 228 00:11:07,520 --> 00:11:09,650 And these were all very US-centric because it 229 00:11:09,650 --> 00:11:12,050 tended to be the United States that really kicked off 230 00:11:12,050 --> 00:11:14,330 this use of the internet and DNS. 231 00:11:14,330 --> 00:11:16,440 But now it's certainly spread globally. 232 00:11:16,440 --> 00:11:22,190 And so there's hundreds now of what are called TLDs, Top-Level Domains. 233 00:11:22,190 --> 00:11:26,150 They tend to be three or more characters if they denote a word. 234 00:11:26,150 --> 00:11:28,730 And they tend to be two characters if they denote a country, 235 00:11:28,730 --> 00:11:32,150 like US is United States, JP is Japan, UK-- 236 00:11:32,150 --> 00:11:33,920 United Kingdom, and so forth. 237 00:11:33,920 --> 00:11:37,500 Those are just country codes that do the same thing. 238 00:11:37,500 --> 00:11:39,380 But what's this at the front? 239 00:11:39,380 --> 00:11:44,761 Worldwide web, or www, here, more generally, is an example of what, 240 00:11:44,761 --> 00:11:45,635 technically speaking? 241 00:11:45,635 --> 00:11:48,490 242 00:11:48,490 --> 00:11:49,210 What is this? 243 00:11:49,210 --> 00:11:52,907 244 00:11:52,907 --> 00:11:53,740 What does this mean? 245 00:11:53,740 --> 00:11:54,260 Yeah? 246 00:11:54,260 --> 00:11:55,020 AUDIENCE: Subdomain. 247 00:11:55,020 --> 00:11:57,100 DAVID J. MALAN: It's a subdomain-- is one way of thinking about it. 248 00:11:57,100 --> 00:11:59,160 In fact, all of you, many of you here, probably 249 00:11:59,160 --> 00:12:03,480 have email addresses of the form college.harvard.edu or g.harvard.edu 250 00:12:03,480 --> 00:12:04,080 or the like. 251 00:12:04,080 --> 00:12:05,070 Those are subdomains. 252 00:12:05,070 --> 00:12:07,350 Harvard's such a big place that they actually 253 00:12:07,350 --> 00:12:11,880 put everyone in different categories of domains, otherwise known as subdomains. 254 00:12:11,880 --> 00:12:16,020 And that might be a word or a phrase that comes before the domain name here. 255 00:12:16,020 --> 00:12:18,270 But it can also just mean the name of a server. 256 00:12:18,270 --> 00:12:21,720 So if example.com is the company or business whose website you're trying 257 00:12:21,720 --> 00:12:23,910 to visit, their domain is example.com. 258 00:12:23,910 --> 00:12:26,130 And they bought that domain name some years ago. 259 00:12:26,130 --> 00:12:29,460 And they spent a few dollars every year, probably, renewing the fee for that. 260 00:12:29,460 --> 00:12:33,200 And they have at least one server whose name is www. 261 00:12:33,200 --> 00:12:34,920 And that exists within their domain. 262 00:12:34,920 --> 00:12:37,510 They might have dozens or hundreds or just one server. 263 00:12:37,510 --> 00:12:38,890 Each of them can have a name. 264 00:12:38,890 --> 00:12:40,800 So this is generally called the hostname. 265 00:12:40,800 --> 00:12:43,410 So when it's an email address, it often implies a subdomain, 266 00:12:43,410 --> 00:12:45,360 like a category of addresses. 267 00:12:45,360 --> 00:12:49,140 But when it's in a URL like this, it means probably a specific machine 268 00:12:49,140 --> 00:12:51,660 or a specific set of machines-- conventionally, 269 00:12:51,660 --> 00:12:53,670 the web servers that the company runs-- 270 00:12:53,670 --> 00:12:55,085 doesn't have to be called www. 271 00:12:55,085 --> 00:12:59,820 For historical purposes, MIT tends to use web.mit.edu. 272 00:12:59,820 --> 00:13:03,600 But almost everyone else in the world uses www or nothing at all. 273 00:13:03,600 --> 00:13:04,690 It's not required. 274 00:13:04,690 --> 00:13:09,240 You can actually just visit many websites without visiting any hostname. 275 00:13:09,240 --> 00:13:13,420 And it just works, as well, thanks to DNS giving you the IP address. 276 00:13:13,420 --> 00:13:17,715 But what about the file you're actually requesting? 277 00:13:17,715 --> 00:13:19,590 What does it actually mean to visit this URL? 278 00:13:19,590 --> 00:13:23,970 Well, on many servers, this implicitly means, hey, web server, 279 00:13:23,970 --> 00:13:27,970 give me a file, just a text file, called index.html. 280 00:13:27,970 --> 00:13:30,090 That's the name of the file, a text file, 281 00:13:30,090 --> 00:13:33,420 that you could create with CS50 IDE or even Notepad or TextEdit 282 00:13:33,420 --> 00:13:36,642 on your own Mac or PC that contains a language called HTML. 283 00:13:36,642 --> 00:13:38,850 And we'll take a look at that language in just a bit. 284 00:13:38,850 --> 00:13:40,600 And some of you might have seen it before. 285 00:13:40,600 --> 00:13:43,656 But the language in which web pages are written is HTML. 286 00:13:43,656 --> 00:13:46,530 And we'll give you the building blocks, conceptually and practically, 287 00:13:46,530 --> 00:13:47,395 for that today. 288 00:13:47,395 --> 00:13:50,020 You'll use it over the coming weeks in many different contexts. 289 00:13:50,020 --> 00:13:53,250 But we'll use it, ultimately, to create the contents of websites. 290 00:13:53,250 --> 00:13:56,760 But today, we'll focus first on this, HTTP. 291 00:13:56,760 --> 00:13:59,430 Anyone know what that stands for? 292 00:13:59,430 --> 00:13:59,930 Yeah? 293 00:13:59,930 --> 00:14:00,870 AUDIENCE: HyperText. 294 00:14:00,870 --> 00:14:01,745 DAVID J. MALAN: Yeah. 295 00:14:01,745 --> 00:14:03,062 HyperText Transfer Protocol. 296 00:14:03,062 --> 00:14:04,770 And honestly, in most of technology, it's 297 00:14:04,770 --> 00:14:09,137 not so much what the acronyms represent that's all that important, 298 00:14:09,137 --> 00:14:10,720 but, really, what the technology does. 299 00:14:10,720 --> 00:14:13,160 And in this case, HyperText Transfer Protocol-- 300 00:14:13,160 --> 00:14:14,580 we'll see hypertext in a moment. 301 00:14:14,580 --> 00:14:16,860 That's another way of saying HTML. 302 00:14:16,860 --> 00:14:20,530 Transfer Protocol-- P for Protocol-- that's another buzzword. 303 00:14:20,530 --> 00:14:23,440 So protocols are not programming languages, per se. 304 00:14:23,440 --> 00:14:24,840 They are conventions. 305 00:14:24,840 --> 00:14:26,342 And we humans have conventions, too. 306 00:14:26,342 --> 00:14:28,800 For instance, if I were to meet someone for the first time, 307 00:14:28,800 --> 00:14:31,649 I probably wouldn't stand on stage and lean down like this to do it. 308 00:14:31,649 --> 00:14:32,940 But I might say, hi, I'm David. 309 00:14:32,940 --> 00:14:33,225 AUDIENCE: Hi. 310 00:14:33,225 --> 00:14:33,510 I'm Stephan. 311 00:14:33,510 --> 00:14:34,810 DAVID J. MALAN: Stephan, nice to meet you. 312 00:14:34,810 --> 00:14:38,130 And we have this weird handshake that was aborted prematurely there-- 313 00:14:38,130 --> 00:14:41,070 that we have this weird convention-- us humans, at least in the US, 314 00:14:41,070 --> 00:14:42,780 of greeting someone with a handshake. 315 00:14:42,780 --> 00:14:46,230 And Stephan just knew to do that, however awkwardly. 316 00:14:46,230 --> 00:14:50,115 And then he disengaged because the transaction was complete. 317 00:14:50,115 --> 00:14:51,990 And that's not unlike what a web server does. 318 00:14:51,990 --> 00:14:54,960 When you request a web page, you're sending a request to someone 319 00:14:54,960 --> 00:14:56,520 as though you're extending your hand. 320 00:14:56,520 --> 00:14:58,270 You're expecting something in return. 321 00:14:58,270 --> 00:14:59,978 But in the case of a computer, of course, 322 00:14:59,978 --> 00:15:03,540 it's like the web page itself coming back in an envelope from point B 323 00:15:03,540 --> 00:15:04,162 to point A. 324 00:15:04,162 --> 00:15:05,370 So that's what a protocol is. 325 00:15:05,370 --> 00:15:07,200 We just have been programmed to know what 326 00:15:07,200 --> 00:15:10,326 to do when we want to request a greeting or information 327 00:15:10,326 --> 00:15:11,700 and get something back in return. 328 00:15:11,700 --> 00:15:15,020 It's like a client-server relationship in a restaurant. 329 00:15:15,020 --> 00:15:17,340 A customer requests something off the menu. 330 00:15:17,340 --> 00:15:20,284 The server, the waiter or waitress, brings it to them 331 00:15:20,284 --> 00:15:22,200 and, thus, completes that transaction as well. 332 00:15:22,200 --> 00:15:23,783 And that's what the internet is, too-- 333 00:15:23,783 --> 00:15:27,250 clients and servers, browsers and servers, computers 334 00:15:27,250 --> 00:15:29,010 and other computers, ultimately. 335 00:15:29,010 --> 00:15:32,130 So with that relationship in mind, let's take a look 336 00:15:32,130 --> 00:15:35,790 at what's actually inside of this envelope. 337 00:15:35,790 --> 00:15:39,000 In the case of Stephan's and my greeting, it was more visual. 338 00:15:39,000 --> 00:15:42,090 But in the case of a computer, it's going to be more textual, literally. 339 00:15:42,090 --> 00:15:45,000 So inside of the envelope the, virtual envelopes, 340 00:15:45,000 --> 00:15:47,430 so to speak, that your browser sends to a server 341 00:15:47,430 --> 00:15:49,890 when trying to request a web page, is actually 342 00:15:49,890 --> 00:15:51,660 a message that looks like this. 343 00:15:51,660 --> 00:15:54,480 Thankfully, it's not terribly cryptic, although the dot, dot, dot 344 00:15:54,480 --> 00:15:57,360 implies there's more contents inside of the envelope. 345 00:15:57,360 --> 00:16:00,449 But the keyword here literally is gets, a verb. 346 00:16:00,449 --> 00:16:02,490 And there's other verbs that the browser can use. 347 00:16:02,490 --> 00:16:05,340 And this one literally means, get me the following home page. 348 00:16:05,340 --> 00:16:06,794 What home page you want to get? 349 00:16:06,794 --> 00:16:07,710 Well, the default one. 350 00:16:07,710 --> 00:16:11,790 This forward slash, as it's called, just represents the default web page 351 00:16:11,790 --> 00:16:12,930 on a website. 352 00:16:12,930 --> 00:16:18,499 And in many cases, that implicitly means an actual file called index.html, just 353 00:16:18,499 --> 00:16:19,040 a convention. 354 00:16:19,040 --> 00:16:21,210 It can be called other things and not exist at all. 355 00:16:21,210 --> 00:16:23,390 But in many cases, that means, implicitly, 356 00:16:23,390 --> 00:16:25,232 get me a file called index.html. 357 00:16:25,232 --> 00:16:27,190 And we'll see what that looks like in a moment. 358 00:16:27,190 --> 00:16:32,820 Http/1.1 just means, hey, Stephan, I speak HTTP version 1.1. 359 00:16:32,820 --> 00:16:34,380 Hopefully, you do as well. 360 00:16:34,380 --> 00:16:37,410 There can be other and newer and older versions of the same thing. 361 00:16:37,410 --> 00:16:40,200 Notice down here, though-- whoops-- notice now here, though, 362 00:16:40,200 --> 00:16:42,810 that the hostname is also in this envelope 363 00:16:42,810 --> 00:16:46,740 because it turns out that web servers can do multiple things at once. 364 00:16:46,740 --> 00:16:48,690 And they can serve multiple domains. 365 00:16:48,690 --> 00:16:52,750 You don't need your own personal unique server to serve a website. 366 00:16:52,750 --> 00:16:55,270 You can have tens, hundreds, thousands of different websites 367 00:16:55,270 --> 00:16:56,230 all on the same server. 368 00:16:56,230 --> 00:17:00,100 And if any of you ever paid for your own domain name or your own personal home 369 00:17:00,100 --> 00:17:02,830 page or the like, you are probably paying someone 370 00:17:02,830 --> 00:17:06,550 for shared space on one server or more servers, 371 00:17:06,550 --> 00:17:08,800 not for your own personal dedicated one. 372 00:17:08,800 --> 00:17:11,890 But again, this might implicitly mean the same thing as this. 373 00:17:11,890 --> 00:17:14,260 Give me index.html. 374 00:17:14,260 --> 00:17:16,780 So what is it that actually comes back from the server? 375 00:17:16,780 --> 00:17:20,089 The server, hopefully, responds with a message that looks like this. 376 00:17:20,089 --> 00:17:23,319 It responds with confirmation of the version of the protocol it speaks. 377 00:17:23,319 --> 00:17:27,109 That's like Stephan saying, yes, I speak HTTP 1.1 as well. 378 00:17:27,109 --> 00:17:32,380 200 is a numeric code that signifies literally OK. 379 00:17:32,380 --> 00:17:33,250 All is well. 380 00:17:33,250 --> 00:17:34,360 I understood you. 381 00:17:34,360 --> 00:17:36,080 Here is the information you requested. 382 00:17:36,080 --> 00:17:39,640 And Content-Type, below it, is a more technical way of saying, 383 00:17:39,640 --> 00:17:43,210 the type of content I'm handing back to you in my own envelope 384 00:17:43,210 --> 00:17:46,150 from point B to point A, or from Stephan to me, 385 00:17:46,150 --> 00:17:49,916 is in a language called HTML that happens to be text. 386 00:17:49,916 --> 00:17:51,040 Why does it look like this? 387 00:17:51,040 --> 00:17:52,771 Humans, years ago, just decided that this 388 00:17:52,771 --> 00:17:55,270 would be the sequence of characters that computers literally 389 00:17:55,270 --> 00:17:58,070 send to communicate that information. 390 00:17:58,070 --> 00:18:02,470 So let's actually try this in one case, maybe, for instance, with harvard.edu, 391 00:18:02,470 --> 00:18:06,320 and see what actually happens to see what else we might see. 392 00:18:06,320 --> 00:18:09,640 So let me go ahead and open up Chrome, or any browser, 393 00:18:09,640 --> 00:18:12,610 for that matter, that supports some kind of debugging and diagnostics. 394 00:18:12,610 --> 00:18:13,730 And I'm going to do this. 395 00:18:13,730 --> 00:18:15,830 And you can access this in different places. 396 00:18:15,830 --> 00:18:20,082 I'm going to go up to View, Developer, and View Developer Tools. 397 00:18:20,082 --> 00:18:21,790 This is something that comes with Chrome. 398 00:18:21,790 --> 00:18:24,760 You sometimes have to enable it in Safari and other browsers. 399 00:18:24,760 --> 00:18:27,764 But almost every browser these days has this capability. 400 00:18:27,764 --> 00:18:30,430 And you'll notice that this just opened up a whole bunch of tabs 401 00:18:30,430 --> 00:18:32,440 at the bottom of my screen here that I'm going 402 00:18:32,440 --> 00:18:37,060 to be able to use to actually explore what is-- 403 00:18:37,060 --> 00:18:40,900 404 00:18:40,900 --> 00:18:42,190 did I kick something else? 405 00:18:42,190 --> 00:18:44,730 Apologies. 406 00:18:44,730 --> 00:18:47,920 It's back-- won't step on there. 407 00:18:47,920 --> 00:18:49,677 So what is this going to allow us to do? 408 00:18:49,677 --> 00:18:51,510 Well, notice there's a lot of features here. 409 00:18:51,510 --> 00:18:52,926 It's overwhelming at first glance. 410 00:18:52,926 --> 00:18:55,440 But there's a tab here called Network. 411 00:18:55,440 --> 00:18:58,690 And it turns out that one of the features Chrome gives to developers, 412 00:18:58,690 --> 00:19:00,840 which you now all are-- is software developers-- 413 00:19:00,840 --> 00:19:04,350 is the ability to see what's going on underneath the hood of a browser, 414 00:19:04,350 --> 00:19:08,160 to see what is inside of these virtual envelopes 415 00:19:08,160 --> 00:19:10,950 that your browser has all those years been sending 416 00:19:10,950 --> 00:19:13,739 from itself to servers elsewhere. 417 00:19:13,739 --> 00:19:15,280 So I'm going to go ahead and do this. 418 00:19:15,280 --> 00:19:21,634 I'm going to go ahead and actually visit http://harvard.edu and hit Enter. 419 00:19:21,634 --> 00:19:23,550 And you'll see a whole bunch of stuff happens, 420 00:19:23,550 --> 00:19:26,075 including the web page appearing at the top of the screen. 421 00:19:26,075 --> 00:19:28,200 I'm going to ignore all of this stuff at the bottom 422 00:19:28,200 --> 00:19:31,020 except for the very, very first request. 423 00:19:31,020 --> 00:19:33,750 If I zoom in on this, notice that highlighted in blue 424 00:19:33,750 --> 00:19:36,450 here is the very first request, harvard.edu. 425 00:19:36,450 --> 00:19:40,790 And if I click on that, I'm going to see a little more information at right. 426 00:19:40,790 --> 00:19:42,540 And if I go scroll down to what are called 427 00:19:42,540 --> 00:19:46,290 request headers, the lines of text that were inside the message 428 00:19:46,290 --> 00:19:49,320 that my browser sent, this is literally what 429 00:19:49,320 --> 00:19:52,650 my browser sent inside the envelope, unbeknownst to me, 430 00:19:52,650 --> 00:19:54,580 when I visited harvard.edu. 431 00:19:54,580 --> 00:19:59,010 Thankfully, it confirms my prediction earlier, get/http/1.1, 432 00:19:59,010 --> 00:20:01,290 because I requested harvard.edu's home page. 433 00:20:01,290 --> 00:20:02,477 Host is harvard.edu. 434 00:20:02,477 --> 00:20:05,310 Then there's the dot, dot, dot, the stuff that we don't particularly 435 00:20:05,310 --> 00:20:06,570 care about today. 436 00:20:06,570 --> 00:20:10,030 But let me go ahead and look at the response. 437 00:20:10,030 --> 00:20:11,100 So this was my request. 438 00:20:11,100 --> 00:20:13,160 This was my hand going out to Stephan. 439 00:20:13,160 --> 00:20:15,250 Let's see what his or the server's response 440 00:20:15,250 --> 00:20:20,880 is by scrolling up to this, which is called response headers. 441 00:20:20,880 --> 00:20:24,150 Harvard's server, fortunately, does speak the same protocol 442 00:20:24,150 --> 00:20:26,730 as me, 1.1 of HTTP. 443 00:20:26,730 --> 00:20:29,910 But apparently, Harvard moved permanently. 444 00:20:29,910 --> 00:20:31,260 What does that mean? 445 00:20:31,260 --> 00:20:37,440 I went to http://harvard.edu, not there. 446 00:20:37,440 --> 00:20:38,056 Where is it? 447 00:20:38,056 --> 00:20:39,930 Well, there's a little more information here. 448 00:20:39,930 --> 00:20:42,600 There's a lot of dot, dot, dot, things we don't care about. 449 00:20:42,600 --> 00:20:46,110 But if we focus on one that-- oh, location-- 450 00:20:46,110 --> 00:20:49,870 where is Harvard now, apparently? 451 00:20:49,870 --> 00:20:50,880 Yeah, say-- 452 00:20:50,880 --> 00:20:54,184 AUDIENCE: [INAUDIBLE] 453 00:20:54,184 --> 00:20:57,605 454 00:20:57,605 --> 00:20:58,480 DAVID J. MALAN: Yeah. 455 00:20:58,480 --> 00:21:05,750 It looks like Harvard "moved" permanently from http://harvard.edu to, 456 00:21:05,750 --> 00:21:11,830 and let me highlight it, https://www.harvard.edu, 457 00:21:11,830 --> 00:21:13,240 with two notable changes. 458 00:21:13,240 --> 00:21:15,040 One, there's the www. 459 00:21:15,040 --> 00:21:18,422 And two, there's also what that might catch your eye? 460 00:21:18,422 --> 00:21:20,880 S, which most of you probably know these days means secure, 461 00:21:20,880 --> 00:21:24,610 and which implies encryption in the spirit of Caesar and Vigenere, 462 00:21:24,610 --> 00:21:26,816 but much more secure than those simple ciphers. 463 00:21:26,816 --> 00:21:29,440 The information is somehow scrambled now when I'm communicating 464 00:21:29,440 --> 00:21:31,359 between myself and harvard.edu. 465 00:21:31,359 --> 00:21:32,650 So there's two decisions there. 466 00:21:32,650 --> 00:21:36,490 Harvard has decided that they want to allow and, indeed, require 467 00:21:36,490 --> 00:21:39,700 users to visit their website securely so that no one-- 468 00:21:39,700 --> 00:21:41,800 no company, no government, no family members-- 469 00:21:41,800 --> 00:21:46,000 can necessarily see what is being requested of Harvard's website 470 00:21:46,000 --> 00:21:49,090 because that is scrambled information, much like using something 471 00:21:49,090 --> 00:21:50,680 like Caesar or Vigenere. 472 00:21:50,680 --> 00:21:53,470 And Harvard also, probably for branding reasons, 473 00:21:53,470 --> 00:21:56,410 but also partly for technical reasons, decided, 474 00:21:56,410 --> 00:22:00,570 we want you to think of our website as www.harvard.edu. 475 00:22:00,570 --> 00:22:04,010 And it's a mix of marketing and technical for a few different reasons, 476 00:22:04,010 --> 00:22:07,810 one of which is www we humans just all know means website. 477 00:22:07,810 --> 00:22:09,610 And if you see harvard.edu-- 478 00:22:09,610 --> 00:22:11,050 this is less true these days-- 479 00:22:11,050 --> 00:22:15,130 might not necessarily imply as obviously that this is a websites URL. 480 00:22:15,130 --> 00:22:19,120 Frankly, not too many years ago, even advertisements and TV ads and printed 481 00:22:19,120 --> 00:22:24,220 ads and the like would even show http:// to really make clear to viewers that 482 00:22:24,220 --> 00:22:25,164 this is a web address. 483 00:22:25,164 --> 00:22:27,580 But gradually, as more and more people get on the internet 484 00:22:27,580 --> 00:22:30,070 and understand technology and URLs and the like, 485 00:22:30,070 --> 00:22:33,820 we can just start dropping the stuff that is unnecessary clutter because all 486 00:22:33,820 --> 00:22:35,950 of us now know intuitively, oh, harvard.edu-- it's 487 00:22:35,950 --> 00:22:38,800 probably a web address that I can just type into a browser. 488 00:22:38,800 --> 00:22:42,190 And the browser or the server will finish my thought for me 489 00:22:42,190 --> 00:22:47,602 and actually prepend the secure URL or the www or the like. 490 00:22:47,602 --> 00:22:49,810 So we still haven't actually found Harvard, it seems. 491 00:22:49,810 --> 00:22:51,220 So let's do this instead. 492 00:22:51,220 --> 00:22:54,280 Let me go ahead and zoom out and visit a different URL. 493 00:22:54,280 --> 00:22:58,150 Let me go ahead and, again, go to View, Developer, Developer 494 00:22:58,150 --> 00:23:00,490 Tools, Network Tab. 495 00:23:00,490 --> 00:23:05,290 And now let me visit that more verbose URL, more precise URL, and hit Enter. 496 00:23:05,290 --> 00:23:07,300 Again, a whole bunch of stuff gets requested-- 497 00:23:07,300 --> 00:23:09,130 more on that some other time. 498 00:23:09,130 --> 00:23:11,770 But now, if I click on the first such request 499 00:23:11,770 --> 00:23:14,710 and look at my response headers, you'll actually 500 00:23:14,710 --> 00:23:20,260 see, albeit in a different format now, that the status of this request is 200, 501 00:23:20,260 --> 00:23:22,279 which, recall, meant-- 502 00:23:22,279 --> 00:23:22,820 AUDIENCE: OK. 503 00:23:22,820 --> 00:23:23,250 DAVID J. MALAN: OK. 504 00:23:23,250 --> 00:23:23,980 OK. 505 00:23:23,980 --> 00:23:26,104 So now these are two numbers that, honestly, you've 506 00:23:26,104 --> 00:23:29,320 probably not really seen or cared all that much about, 200 and 301. 507 00:23:29,320 --> 00:23:33,040 But odds are you've seen at least one other number when visiting URLs. 508 00:23:33,040 --> 00:23:39,610 For instance, besides actually seeing 200 and 301, you've probably seen 404. 509 00:23:39,610 --> 00:23:41,890 Now, it apparently refers to Not Found. 510 00:23:41,890 --> 00:23:44,090 But more in real terms, what does that mean? 511 00:23:44,090 --> 00:23:46,676 How do you induce that error? 512 00:23:46,676 --> 00:23:48,050 AUDIENCE: The site doesn't exist. 513 00:23:48,050 --> 00:23:49,100 DAVID J. MALAN: The site doesn't exist. 514 00:23:49,100 --> 00:23:50,180 You mistyped a URL. 515 00:23:50,180 --> 00:23:51,370 The web page doesn't exist. 516 00:23:51,370 --> 00:23:54,770 A system administrator just changed the name on something or it's an old URL. 517 00:23:54,770 --> 00:23:58,310 Any number of reasons can mean that the file was not found. 518 00:23:58,310 --> 00:24:02,150 That file might have been index.html or any other URL. 519 00:24:02,150 --> 00:24:06,050 But all this time when you visited a website and you've seen 404, 520 00:24:06,050 --> 00:24:09,890 it's not clear, frankly, why servers have been bothering to tell us 404. 521 00:24:09,890 --> 00:24:13,010 Most people don't need that level of information. 522 00:24:13,010 --> 00:24:16,640 But it derives from that HTTP response, that first line 523 00:24:16,640 --> 00:24:19,730 of text inside the envelope coming back from Stephan or the web server, 524 00:24:19,730 --> 00:24:23,030 more generally, that says 404, Not Found. 525 00:24:23,030 --> 00:24:25,580 And that means the user probably did something wrong 526 00:24:25,580 --> 00:24:28,610 or if the data has simply disappeared from the server. 527 00:24:28,610 --> 00:24:30,967 And there's so many more of these things as well. 528 00:24:30,967 --> 00:24:33,050 And in fact, you might get responses, like we just 529 00:24:33,050 --> 00:24:37,050 did from Harvard, supporting not just 1.1, but version 2 of HTTP. 530 00:24:37,050 --> 00:24:39,340 So just realize if you tinker with your own Mac or PC, 531 00:24:39,340 --> 00:24:41,090 the messages might look a little different 532 00:24:41,090 --> 00:24:42,710 based on your browser and the website. 533 00:24:42,710 --> 00:24:44,960 And that's just because things are evolving over time. 534 00:24:44,960 --> 00:24:47,150 And versions are changing. 535 00:24:47,150 --> 00:24:48,650 But there's so many others of these. 536 00:24:48,650 --> 00:24:50,570 And this is just a short, abbreviated list. 537 00:24:50,570 --> 00:24:52,640 200 and 301 we saw. 538 00:24:52,640 --> 00:24:55,080 404 you yourselves have probably seen. 539 00:24:55,080 --> 00:24:59,630 401 and 403 generally refer to you haven't logged in 540 00:24:59,630 --> 00:25:02,600 or you're just not authorized to access information 541 00:25:02,600 --> 00:25:05,140 because it doesn't belong to you, for instance. 542 00:25:05,140 --> 00:25:08,440 500 you're all going to experience before long-- 543 00:25:08,440 --> 00:25:11,480 that 500 is Internal Server Error, which is not 544 00:25:11,480 --> 00:25:14,330 so much the server's error as your fault and my fault 545 00:25:14,330 --> 00:25:15,720 when we've written buggy code. 546 00:25:15,720 --> 00:25:17,750 So in the weeks to come, not this week, but when 547 00:25:17,750 --> 00:25:21,530 we start writing Python code and SQL to talk to databases, 548 00:25:21,530 --> 00:25:23,340 we're all going to screw up at some point. 549 00:25:23,340 --> 00:25:26,450 And a browser will often see a 500 error from a server 550 00:25:26,450 --> 00:25:29,000 if, indeed, there's a problem with code. 551 00:25:29,000 --> 00:25:30,500 418 doesn't actually exist. 552 00:25:30,500 --> 00:25:35,150 This was a April Fools' joke, I think, in, like, 1988, 553 00:25:35,150 --> 00:25:36,950 where some people with a lot of free time 554 00:25:36,950 --> 00:25:40,570 wrote up a whole formal specification for an HTTP status code, a 418, 555 00:25:40,570 --> 00:25:41,870 I am a teapot. 556 00:25:41,870 --> 00:25:46,100 And it's still kind of exists in lore, internet lore. 557 00:25:46,100 --> 00:25:48,270 So those are just some of the numbers you might see. 558 00:25:48,270 --> 00:25:51,620 But they're not all that technical if you just know where to look for them 559 00:25:51,620 --> 00:25:55,320 and you know, as a developer now, what they signify for you. 560 00:25:55,320 --> 00:25:56,460 Yeah? 561 00:25:56,460 --> 00:25:59,680 AUDIENCE: [INAUDIBLE] 562 00:25:59,680 --> 00:26:00,430 563 00:26:00,430 --> 00:26:01,680 DAVID J. MALAN: Good question. 564 00:26:01,680 --> 00:26:04,190 What's the difference between 200 OK and 302 Found? 565 00:26:04,190 --> 00:26:06,590 So 302, if you read into the documentation, 566 00:26:06,590 --> 00:26:08,900 would actually tell you that this also induces 567 00:26:08,900 --> 00:26:14,930 a redirect, whereby, just like 301, when the browser gets a 301 or a 302, 568 00:26:14,930 --> 00:26:18,900 the browser should be redirected to the new URL that we saw in the header, 569 00:26:18,900 --> 00:26:22,840 so to speak, called location, colon, whatever it was. 570 00:26:22,840 --> 00:26:25,190 The difference is that Moved Permanently means 571 00:26:25,190 --> 00:26:28,730 that the browser should remember that this redirection is happening 572 00:26:28,730 --> 00:26:31,290 and stop bothering the server with the same original quest. 573 00:26:31,290 --> 00:26:33,470 Just remember what the new URL is. 574 00:26:33,470 --> 00:26:36,020 302 means found it, but don't rely on this. 575 00:26:36,020 --> 00:26:37,614 Keep asking me again and again. 576 00:26:37,614 --> 00:26:39,530 So it's just a performance optimization so you 577 00:26:39,530 --> 00:26:43,820 don't annoy the server unnecessarily in the case of 301s, which just 578 00:26:43,820 --> 00:26:46,290 costs time and money, in some sense. 579 00:26:46,290 --> 00:26:50,060 So you might have heard about this before-- 580 00:26:50,060 --> 00:26:53,390 can only get away with this Cambridge, not so much New Haven. 581 00:26:53,390 --> 00:26:56,017 Has anyone ever visited safetyschool.org? 582 00:26:56,017 --> 00:26:56,600 AUDIENCE: Hey. 583 00:26:56,600 --> 00:26:59,450 DAVID J. MALAN: You're welcome to on your laptop or your phone. 584 00:26:59,450 --> 00:27:02,907 So some very clever Harvard students, I think, years ago bought this domain. 585 00:27:02,907 --> 00:27:05,240 Frankly, they've probably been paying, like, $10 or more 586 00:27:05,240 --> 00:27:08,510 per year ever since just to keep this joke alive. 587 00:27:08,510 --> 00:27:11,570 But it's wonderfully illustrative because if we go back 588 00:27:11,570 --> 00:27:13,530 to Chrome or any browser-- 589 00:27:13,530 --> 00:27:19,610 and let me go ahead and open up a browser tab and go to safetyschool.org, 590 00:27:19,610 --> 00:27:20,570 Enter. 591 00:27:20,570 --> 00:27:22,520 Oh, interesting. 592 00:27:22,520 --> 00:27:24,295 Where did I get redirected? 593 00:27:24,295 --> 00:27:24,897 AUDIENCE: Hey. 594 00:27:24,897 --> 00:27:25,730 DAVID J. MALAN: Hey. 595 00:27:25,730 --> 00:27:29,510 So the more interesting question for us is, how are they doing that? 596 00:27:29,510 --> 00:27:31,810 Well, let me go back into the IDE for a-- 597 00:27:31,810 --> 00:27:35,780 or actually, let me go into my browser and open up a new tab-- 598 00:27:35,780 --> 00:27:38,450 View, Developer, Developer Tools. 599 00:27:38,450 --> 00:27:39,740 Look at the Network tab. 600 00:27:39,740 --> 00:27:41,065 And now let me go ahead-- 601 00:27:41,065 --> 00:27:45,860 whoops-- let me go ahead and visit http://safetyschool.org. 602 00:27:45,860 --> 00:27:46,940 Enter. 603 00:27:46,940 --> 00:27:49,770 Scroll back up to the top, where I see the first request. 604 00:27:49,770 --> 00:27:53,600 And you can see, more technically, if this doesn't take the fun out 605 00:27:53,600 --> 00:27:55,910 of the joke, all these Harvard students did 606 00:27:55,910 --> 00:27:59,480 years ago was configure this domain name to return a 301, 607 00:27:59,480 --> 00:28:02,167 Moved Permanently to Yale University. 608 00:28:02,167 --> 00:28:05,000 Now, it's only fair, especially since the Yale students are watching 609 00:28:05,000 --> 00:28:06,560 this live right now from New Haven-- 610 00:28:06,560 --> 00:28:10,130 let's take a look at one other site called harvardsucks.org. 611 00:28:10,130 --> 00:28:12,780 So this domain, too, does exist. 612 00:28:12,780 --> 00:28:19,590 Let me clear that screen and go to http://harvardsucks.org. 613 00:28:19,590 --> 00:28:20,560 Enter. 614 00:28:20,560 --> 00:28:22,460 And this is an actual website. 615 00:28:22,460 --> 00:28:25,820 So not only did these enterprising Yale students buy the domain name, 616 00:28:25,820 --> 00:28:29,459 they've also been hosting the website for years since. 617 00:28:29,459 --> 00:28:32,750 There's a wonderful YouTube video there that actually speaks to a very fun hack 618 00:28:32,750 --> 00:28:35,450 that they did some years ago at Harvard-Yale, the football game. 619 00:28:35,450 --> 00:28:38,450 But you can see here, oh, that-- 620 00:28:38,450 --> 00:28:39,560 so there's a minor one. 621 00:28:39,560 --> 00:28:44,576 So harvardsucks.org actually now lives at www.harvardsucks.org. 622 00:28:44,576 --> 00:28:45,950 But then you actually stay there. 623 00:28:45,950 --> 00:28:49,980 And so I encourage you to go to this site, as well as the other, for all 624 00:28:49,980 --> 00:28:52,010 your Harvard and Yale shopping needs. 625 00:28:52,010 --> 00:28:55,490 So that is HTTP. 626 00:28:55,490 --> 00:29:00,620 HTTP is the protocol, the set of conventions, that browsers 627 00:29:00,620 --> 00:29:03,560 use when talking to web servers. 628 00:29:03,560 --> 00:29:05,630 And it's the protocol that governs how those web 629 00:29:05,630 --> 00:29:07,870 servers respond to the browsers. 630 00:29:07,870 --> 00:29:11,000 We've quantized this in the form of these virtual envelopes, which is just 631 00:29:11,000 --> 00:29:14,150 a physical incarnation of the zeros and ones that are technically going 632 00:29:14,150 --> 00:29:15,990 back and forth across the internet. 633 00:29:15,990 --> 00:29:19,350 But it's embodied in my handshake with Stephan, what's really happening. 634 00:29:19,350 --> 00:29:20,120 I initiate. 635 00:29:20,120 --> 00:29:20,840 He responds. 636 00:29:20,840 --> 00:29:23,670 And it's like a client-server type relationship. 637 00:29:23,670 --> 00:29:26,300 So how do you actually now do creative work? 638 00:29:26,300 --> 00:29:28,070 How do you make yale.edu? 639 00:29:28,070 --> 00:29:29,720 How do you make harvardsucks.org? 640 00:29:29,720 --> 00:29:33,240 How do you make CS50's own website or Google or Facebook? 641 00:29:33,240 --> 00:29:34,850 Well, what really matters now what's-- 642 00:29:34,850 --> 00:29:37,250 is what's deeper inside of that envelope. 643 00:29:37,250 --> 00:29:40,280 In addition to these headers, this textual information, 644 00:29:40,280 --> 00:29:43,430 like 200 OK or 301 Moved Permanently, there's 645 00:29:43,430 --> 00:29:47,870 another language embedded inside of that envelope, deeper down, 646 00:29:47,870 --> 00:29:50,240 called HTML, HyperText Markup Language. 647 00:29:50,240 --> 00:29:54,560 This is the language, which is also text, in which web pages are written. 648 00:29:54,560 --> 00:29:57,400 And so if you've ever visited a website on the internet, 649 00:29:57,400 --> 00:30:01,460 and I just noticed that Erin is doing that on repeat, isn't she, what's-- 650 00:30:01,460 --> 00:30:06,590 you're looking at is a browser's rendering of HTML. 651 00:30:06,590 --> 00:30:07,466 So HTML is just text. 652 00:30:07,466 --> 00:30:09,048 And we're going to see it in a moment. 653 00:30:09,048 --> 00:30:12,290 The browser reads that text top to bottom, left to right, much like Clang 654 00:30:12,290 --> 00:30:14,600 reads your C code top to bottom, left to right. 655 00:30:14,600 --> 00:30:18,560 But rather than convert your text to zeros and ones, what a browser does 656 00:30:18,560 --> 00:30:21,260 is interpret it line by line by line. 657 00:30:21,260 --> 00:30:23,090 And it does what you say. 658 00:30:23,090 --> 00:30:26,420 So if you say, hey, browser, put Erin's photo on the screen, 659 00:30:26,420 --> 00:30:27,780 it is going to do that. 660 00:30:27,780 --> 00:30:31,700 If you say, hey, browser, write the words "staff" in big black text, 661 00:30:31,700 --> 00:30:33,140 the browser's going to do that. 662 00:30:33,140 --> 00:30:36,300 If you tell the browser to lay out a whole menu, it's going to do that. 663 00:30:36,300 --> 00:30:39,230 And we'll see, in just a moment, how you convey those terms. 664 00:30:39,230 --> 00:30:40,910 HTML is not a programming language. 665 00:30:40,910 --> 00:30:44,210 It is, indeed, a markup language, which means it just lays things 666 00:30:44,210 --> 00:30:46,540 out structurally and aesthetically. 667 00:30:46,540 --> 00:30:51,677 So the website here that we're looking at has a bunch of images, all of which 668 00:30:51,677 --> 00:30:53,510 are what are called animated GIFs, which are 669 00:30:53,510 --> 00:30:58,406 very much in vogue these days on Reddit and phones and iMessage and the like. 670 00:30:58,406 --> 00:31:01,280 But those are just images, files, that are actually being transferred 671 00:31:01,280 --> 00:31:03,540 from CS50 server to your browser. 672 00:31:03,540 --> 00:31:08,597 But if I go up to View, Developer, and now View Source, and you can-- 673 00:31:08,597 --> 00:31:10,430 could have been doing this all these years-- 674 00:31:10,430 --> 00:31:15,380 you can actually see the so-called HTML that drives CD50's website. 675 00:31:15,380 --> 00:31:17,600 So this is all of the HTML, and I'm deliberately 676 00:31:17,600 --> 00:31:21,849 scrolling fast through it, that implements that CS50 staff page. 677 00:31:21,849 --> 00:31:23,640 And if we scroll all the way to the bottom, 678 00:31:23,640 --> 00:31:27,620 you'll see that 1,008 lines later is the web page done. 679 00:31:27,620 --> 00:31:28,529 But it's just text. 680 00:31:28,529 --> 00:31:31,070 And, in fact, let me scroll back up to the top and just point 681 00:31:31,070 --> 00:31:33,260 out a few salient details. 682 00:31:33,260 --> 00:31:35,287 You'll see familiar patterns in the examples 683 00:31:35,287 --> 00:31:36,620 we're about to start looking at. 684 00:31:36,620 --> 00:31:40,160 The very first line probably is that, DOCTYPE HTML, which 685 00:31:40,160 --> 00:31:42,200 is like a little hint to the browser that says, 686 00:31:42,200 --> 00:31:45,920 quite explicitly, hey, browser, the document type you're about to see 687 00:31:45,920 --> 00:31:47,360 is indeed HTML. 688 00:31:47,360 --> 00:31:50,480 But the rest of the web page follows a structural pattern. 689 00:31:50,480 --> 00:31:52,579 And you'll see that it's already nicely indented, 690 00:31:52,579 --> 00:31:55,370 even though some of these lines are a little long and are wrapping. 691 00:31:55,370 --> 00:31:59,210 But you'll see this convention, an open bracket, which is an angled bracket, 692 00:31:59,210 --> 00:32:04,000 like a less than sign, the keyword html, maybe some pattern like this, 693 00:32:04,000 --> 00:32:05,330 lang equals en-us-- 694 00:32:05,330 --> 00:32:08,210 this sounds like language-- a US English, maybe-- 695 00:32:08,210 --> 00:32:13,130 more on that in a bit-- and then this close bracket, or a greater than sign, 696 00:32:13,130 --> 00:32:14,660 that completes the thought. 697 00:32:14,660 --> 00:32:18,440 Then inside of that HTML tag, so to speak, indented beneath it, 698 00:32:18,440 --> 00:32:20,240 is this, the head of the web page. 699 00:32:20,240 --> 00:32:22,910 The head of the web page something that you mostly can't see. 700 00:32:22,910 --> 00:32:25,730 It generally refers to the tab at the top of the page and just 701 00:32:25,730 --> 00:32:27,170 invisible information. 702 00:32:27,170 --> 00:32:30,620 And if I scroll down further, we'll see, really, the guts of the web page, 703 00:32:30,620 --> 00:32:33,859 which are in the so-called body of the web page. 704 00:32:33,859 --> 00:32:35,900 So these things that I've just been highlighting, 705 00:32:35,900 --> 00:32:40,190 albeit in a very big context of a big, 1,000-line web page, 706 00:32:40,190 --> 00:32:41,920 are just called HTML tags. 707 00:32:41,920 --> 00:32:45,410 HTML is a tag-based language, a markup-based language, 708 00:32:45,410 --> 00:32:50,687 where you just say what you want to appear where you want it to appear. 709 00:32:50,687 --> 00:32:52,020 So what does that actually mean? 710 00:32:52,020 --> 00:32:53,990 Well, let's take a look at a simpler example 711 00:32:53,990 --> 00:32:57,770 in the form of this slide, which is perhaps the simplest web page 712 00:32:57,770 --> 00:33:00,110 that you can make, this one here. 713 00:33:00,110 --> 00:33:04,040 This is perhaps the simplest correct, syntactically correct, web 714 00:33:04,040 --> 00:33:08,210 page you can write that's saying, hey, browser, the type of document is HTML. 715 00:33:08,210 --> 00:33:10,746 Hey, browser, here's the start of my HTML page. 716 00:33:10,746 --> 00:33:12,620 Hey, browser, here's the head of my web page. 717 00:33:12,620 --> 00:33:14,703 Hey, browser, here comes the title of my web page. 718 00:33:14,703 --> 00:33:18,320 Hey, browser, the title of this page shall be, for the sake of discussion, 719 00:33:18,320 --> 00:33:19,260 "hello, title." 720 00:33:19,260 --> 00:33:21,650 But you could say literally anything there that you want. 721 00:33:21,650 --> 00:33:23,000 But now things get interesting. 722 00:33:23,000 --> 00:33:26,041 And some of you have certainly seen HTML before, and some of you haven't. 723 00:33:26,041 --> 00:33:28,100 But you can probably just infer, even if you 724 00:33:28,100 --> 00:33:32,180 haven't seen HTML, what this tag is doing because it looks the same, 725 00:33:32,180 --> 00:33:33,466 but yet a little different. 726 00:33:33,466 --> 00:33:35,840 So if this is saying, hey, browser, here comes the title, 727 00:33:35,840 --> 00:33:38,107 what is this probably saying, intuitively? 728 00:33:38,107 --> 00:33:38,940 AUDIENCE: Just ends. 729 00:33:38,940 --> 00:33:39,440 DAVID J. MALAN: Yeah. 730 00:33:39,440 --> 00:33:40,597 That's it for the title. 731 00:33:40,597 --> 00:33:42,180 Hey, browser, that's it for the title. 732 00:33:42,180 --> 00:33:45,140 So you might call this a start tag and this an end tag, 733 00:33:45,140 --> 00:33:47,197 or an open tag and a close tag. 734 00:33:47,197 --> 00:33:48,530 Think about it however you want. 735 00:33:48,530 --> 00:33:51,500 But in HTML, there's generally this nice symmetry. 736 00:33:51,500 --> 00:33:53,840 Once you start something, you eventually finish it. 737 00:33:53,840 --> 00:33:55,420 And you do it in the right order. 738 00:33:55,420 --> 00:33:58,340 So you do-- you start tags in one order. 739 00:33:58,340 --> 00:34:02,570 And then you close them in reverse order so that everything is nicely symmetric. 740 00:34:02,570 --> 00:34:04,940 And indeed, the indentation, just like in C, 741 00:34:04,940 --> 00:34:06,560 technically doesn't matter at all. 742 00:34:06,560 --> 00:34:09,823 You could have a really, really ugly web page with no whitespaces whatsoever. 743 00:34:09,823 --> 00:34:12,739 And it would still work fine for the browser because it doesn't care-- 744 00:34:12,739 --> 00:34:14,570 just much harder for us humans to read. 745 00:34:14,570 --> 00:34:17,389 So this convention is to indent, just like in C, 746 00:34:17,389 --> 00:34:20,060 just so it's more clear what the hierarchy or the nesting 747 00:34:20,060 --> 00:34:21,170 is, so to speak. 748 00:34:21,170 --> 00:34:23,810 This line here means, hey, browser, that's it for the head. 749 00:34:23,810 --> 00:34:25,040 It's another close tag. 750 00:34:25,040 --> 00:34:27,020 Hey, browser, here comes the body of the page. 751 00:34:27,020 --> 00:34:30,500 So much like head here, body here, most of the page's content 752 00:34:30,500 --> 00:34:32,420 is, indeed, in the body of the web page. 753 00:34:32,420 --> 00:34:34,670 That's what you, the humans, actually see. 754 00:34:34,670 --> 00:34:37,267 And mostly in the head, we'll just see things like the title 755 00:34:37,267 --> 00:34:39,350 and just a couple of other things in a little bit. 756 00:34:39,350 --> 00:34:42,500 The message inside this web page is apparently, "hello, body," 757 00:34:42,500 --> 00:34:44,330 then close body, close html. 758 00:34:44,330 --> 00:34:45,139 And that's it. 759 00:34:45,139 --> 00:34:47,389 So when I said earlier that inside of these envelopes 760 00:34:47,389 --> 00:34:51,080 is just a whole bunch of text, all I meant was this. 761 00:34:51,080 --> 00:34:54,949 This is what's inside of this envelope just below 762 00:34:54,949 --> 00:34:59,210 the protocol information, the HTTP information, that just said 200 OK 763 00:34:59,210 --> 00:35:01,230 or any of those other messages. 764 00:35:01,230 --> 00:35:03,770 So when the browser receives this envelope, it opens it up. 765 00:35:03,770 --> 00:35:05,478 It reads it top to bottom, left to right. 766 00:35:05,478 --> 00:35:08,030 And then it literally interprets that file top to bottom, 767 00:35:08,030 --> 00:35:10,290 doing exactly what you tell it to do. 768 00:35:10,290 --> 00:35:12,530 So how do we go about actually doing this? 769 00:35:12,530 --> 00:35:16,070 You can write HTML on any text program. 770 00:35:16,070 --> 00:35:19,647 You can write it in TextEdit, on a Mac, on Notepad, on a PC. 771 00:35:19,647 --> 00:35:21,980 You can, technically, use Microsoft Word or Google Docs. 772 00:35:21,980 --> 00:35:23,690 But that's out of context and bad. 773 00:35:23,690 --> 00:35:25,340 Those give you features you don't want. 774 00:35:25,340 --> 00:35:27,140 But you generally want a text editor. 775 00:35:27,140 --> 00:35:29,990 And we, of course, have a text editor in CS50 IDE. 776 00:35:29,990 --> 00:35:31,610 So let me actually go there. 777 00:35:31,610 --> 00:35:33,950 I'm going to go into CS50 IDE. 778 00:35:33,950 --> 00:35:36,320 And I'm going to go up to File, New. 779 00:35:36,320 --> 00:35:39,410 And I'm going to go and preemptively just save the file with the only file 780 00:35:39,410 --> 00:35:42,710 name I remember from earlier, which was index.html. 781 00:35:42,710 --> 00:35:46,300 Just like C programs end in files called something .c, 782 00:35:46,300 --> 00:35:52,400 HTML files often end in .html, sometimes .htm, but often .html. 783 00:35:52,400 --> 00:35:54,680 So let me go ahead and click Save there. 784 00:35:54,680 --> 00:35:58,020 And now I'm going to go ahead and do a-- type exactly that same code-- 785 00:35:58,020 --> 00:36:00,410 so open bracket, exclamation point. 786 00:36:00,410 --> 00:36:02,750 And that's the only exclamation point we'll expect. 787 00:36:02,750 --> 00:36:06,010 The first line is, unfortunately, a little different from all the others. 788 00:36:06,010 --> 00:36:08,921 Then I'm going to do open bracket, html, close bracket. 789 00:36:08,921 --> 00:36:12,170 And you'll notice that, just like with C, the IDE tries to be a little helpful 790 00:36:12,170 --> 00:36:13,280 and finish your thought. 791 00:36:13,280 --> 00:36:15,410 So it already closed the tag for me. 792 00:36:15,410 --> 00:36:18,560 Now it's just on me to hit Enter to move it into place. 793 00:36:18,560 --> 00:36:22,632 Now I'm going to-- what came next inside the-- 794 00:36:22,632 --> 00:36:24,410 uh-oh. 795 00:36:24,410 --> 00:36:26,870 What came next? 796 00:36:26,870 --> 00:36:29,600 The head-- so open bracket, head, close bracket. 797 00:36:29,600 --> 00:36:31,420 Inside of head was-- 798 00:36:31,420 --> 00:36:32,514 yeah, title. 799 00:36:32,514 --> 00:36:34,430 And then I think it just said, "hello, title," 800 00:36:34,430 --> 00:36:36,140 though I could call that anything I want. 801 00:36:36,140 --> 00:36:40,769 Then below the head, but inside the html tag still, was my body. 802 00:36:40,769 --> 00:36:41,810 So let me type that here. 803 00:36:41,810 --> 00:36:43,790 And I think I said, "hello, body." 804 00:36:43,790 --> 00:36:46,750 So-- bdoy, boday. 805 00:36:46,750 --> 00:36:48,980 OK, body-- save. 806 00:36:48,980 --> 00:36:52,280 So now I have a text file in the IDE. 807 00:36:52,280 --> 00:36:56,960 It seems to match up with what we showed as a canonical page before. 808 00:36:56,960 --> 00:36:58,460 Now we need to load it in a browser. 809 00:36:58,460 --> 00:37:00,334 And this is a little paradoxical because I'm, 810 00:37:00,334 --> 00:37:02,690 obviously, writing this text in a browser, 811 00:37:02,690 --> 00:37:04,520 and yet I need the browser to read it. 812 00:37:04,520 --> 00:37:08,180 So this is just because the IDE, Integrated Development Environment, 813 00:37:08,180 --> 00:37:10,160 that we've been using is, itself, web-based. 814 00:37:10,160 --> 00:37:12,680 That's just an incidental detail. 815 00:37:12,680 --> 00:37:17,720 The fact that I have written this code in a file now is what's important. 816 00:37:17,720 --> 00:37:19,160 It could be in the cloud as it is. 817 00:37:19,160 --> 00:37:19,970 It could be on my Mac. 818 00:37:19,970 --> 00:37:20,690 It could be on my PC. 819 00:37:20,690 --> 00:37:22,790 It could be on any other server on the internet. 820 00:37:22,790 --> 00:37:26,520 The point is I need to access this file somehow. 821 00:37:26,520 --> 00:37:29,210 And so it turns out that we're not going to compile it. 822 00:37:29,210 --> 00:37:31,180 There are no zeros and ones involved anymore. 823 00:37:31,180 --> 00:37:32,315 There is no machine code. 824 00:37:32,315 --> 00:37:33,940 We're going to leave it just like this. 825 00:37:33,940 --> 00:37:37,250 HTML is interpreted, literally, line by line, top to bottom-- 826 00:37:37,250 --> 00:37:39,050 no zeros and ones needed. 827 00:37:39,050 --> 00:37:43,370 But I am going to need to run my own web server, not the IDE itself. 828 00:37:43,370 --> 00:37:46,430 I want to run, as the developer, my own web server. 829 00:37:46,430 --> 00:37:47,420 What is a web server? 830 00:37:47,420 --> 00:37:48,170 It's like Stephan. 831 00:37:48,170 --> 00:37:51,710 It's just a program sitting there, waiting and waiting 832 00:37:51,710 --> 00:37:53,752 and waiting for something to happen. 833 00:37:53,752 --> 00:37:56,960 And that's something is, presumably, a request from a browser, at which point 834 00:37:56,960 --> 00:38:00,917 it will respond with a handshake or, more specifically, with this file. 835 00:38:00,917 --> 00:38:01,750 So how do I do this? 836 00:38:01,750 --> 00:38:07,670 Well, in the IDE, we actually include a free program called http-server. 837 00:38:07,670 --> 00:38:10,760 All of the software in CS50 IDE is free and open source. 838 00:38:10,760 --> 00:38:13,760 So we've simply chosen some of the most popular packages, one of which 839 00:38:13,760 --> 00:38:15,800 is called, literally, http-server. 840 00:38:15,800 --> 00:38:19,100 And if I go ahead and hit Enter, you'll see somewhat cryptic information 841 00:38:19,100 --> 00:38:19,710 at first. 842 00:38:19,710 --> 00:38:20,293 But let's see. 843 00:38:20,293 --> 00:38:22,160 It's starting up the http-server. 844 00:38:22,160 --> 00:38:23,780 It's serving dot slash. 845 00:38:23,780 --> 00:38:26,640 Well, what does dot mean? 846 00:38:26,640 --> 00:38:27,430 This folder. 847 00:38:27,430 --> 00:38:31,320 So just serve up the contents of this current folder that I'm in. 848 00:38:31,320 --> 00:38:33,480 Now it's saying it's available on this URL. 849 00:38:33,480 --> 00:38:35,700 And this URL's going to vary by who is running this. 850 00:38:35,700 --> 00:38:37,540 If you're running it, you're going to see a different URL. 851 00:38:37,540 --> 00:38:39,510 But what is interesting is the number-- 852 00:38:39,510 --> 00:38:43,410 turns out that, because this is my little own personal web server, 853 00:38:43,410 --> 00:38:46,650 it's not using port 80, which I claimed earlier was the default. 854 00:38:46,650 --> 00:38:48,490 It's using a different convention, 8080. 855 00:38:48,490 --> 00:38:50,200 8080 is just a human convention. 856 00:38:50,200 --> 00:38:52,090 It's not standardized in the same way. 857 00:38:52,090 --> 00:38:57,000 But this way, I can serve files separate from the IDE 858 00:38:57,000 --> 00:38:59,790 because the IDE itself is actually listening on port 80, 859 00:38:59,790 --> 00:39:02,970 or, technically, 443, because it's using HTTPS. 860 00:39:02,970 --> 00:39:07,357 And I don't want to confuse my files with CS50 IDE's own files, 861 00:39:07,357 --> 00:39:09,690 the actual user interface that you're all familiar with. 862 00:39:09,690 --> 00:39:13,230 So, just like Stephan can hear from-- 863 00:39:13,230 --> 00:39:17,170 say hello to multiple people and Google servers can handle multiple services, 864 00:39:17,170 --> 00:39:23,400 so can my own IDE listen on multiple ports, as they're called-- 865 00:39:23,400 --> 00:39:26,506 80, 25, 443, or, in this case, 8080. 866 00:39:26,506 --> 00:39:27,630 So what does this all mean? 867 00:39:27,630 --> 00:39:30,060 I'm going to go ahead and literally click on this URL, 868 00:39:30,060 --> 00:39:33,870 open it in another tab on my browser, and you'll see somewhat cryptic output. 869 00:39:33,870 --> 00:39:38,280 But this is just a succinct way of saying, here is the index, the listing, 870 00:39:38,280 --> 00:39:41,850 of slash, which is now the default area of my website. 871 00:39:41,850 --> 00:39:44,719 I've got two folders, source 5, which is on the course's website-- 872 00:39:44,719 --> 00:39:47,760 it's all of today's files in case we want to look them up without writing 873 00:39:47,760 --> 00:39:48,810 them from scratch-- 874 00:39:48,810 --> 00:39:51,570 and then the file I just created, index.html. 875 00:39:51,570 --> 00:39:57,581 So if I go ahead now and click on index.html, there we have it-- hello, 876 00:39:57,581 --> 00:39:58,080 body. 877 00:39:58,080 --> 00:40:00,621 And we don't see the tab just because I full-screened Chrome. 878 00:40:00,621 --> 00:40:03,000 But if I actually remove that full screening 879 00:40:03,000 --> 00:40:06,490 and zoom up to the top of the tab, you see "hello, title" there. 880 00:40:06,490 --> 00:40:10,350 And if I go back into this file, meanwhile, and I say, 881 00:40:10,350 --> 00:40:15,630 "hello, body, nice to meet you"-- this one got weird-- 882 00:40:15,630 --> 00:40:19,450 now I'm going to go ahead and click reload. 883 00:40:19,450 --> 00:40:20,329 And now you see this. 884 00:40:20,329 --> 00:40:22,120 Let's go ahead and take a five-minute break 885 00:40:22,120 --> 00:40:25,036 sooner, rather than later, so that we can address the projector issue. 886 00:40:25,036 --> 00:40:26,100 And we'll be right back. 887 00:40:26,100 --> 00:40:30,990 So to recap, there are more tags than just html and head and title and body. 888 00:40:30,990 --> 00:40:33,754 There's things that give us images and sounds, certainly, 889 00:40:33,754 --> 00:40:35,170 and many, many, many other things. 890 00:40:35,170 --> 00:40:38,070 So let's take a look more manually at just one or two other examples 891 00:40:38,070 --> 00:40:41,570 and then get a sense of the whole menu of tags that might be available. 892 00:40:41,570 --> 00:40:43,320 Let me go ahead and create a new file now. 893 00:40:43,320 --> 00:40:45,809 And I'll go ahead and call this image.html. 894 00:40:45,809 --> 00:40:47,850 And in anticipation of making a demonstration now 895 00:40:47,850 --> 00:40:49,740 that has an image, to save time, I'm just 896 00:40:49,740 --> 00:40:52,560 going to go ahead and paste the contents of the previous file. 897 00:40:52,560 --> 00:40:55,800 But I'm going to go ahead and get rid of the body this time 898 00:40:55,800 --> 00:40:58,260 and start to actually embed an image in here. 899 00:40:58,260 --> 00:41:02,390 Now, in advance, I've downloaded an image of Yale's own bulldog, Handsome 900 00:41:02,390 --> 00:41:05,010 Dan, in a file called dan.jpeg. 901 00:41:05,010 --> 00:41:07,470 And I've uploaded it to the IDE in the same folder 902 00:41:07,470 --> 00:41:11,520 that index.html is in and now that image.html is in. 903 00:41:11,520 --> 00:41:14,790 And you can include an image by using an img tag. 904 00:41:14,790 --> 00:41:18,600 But you have to specify to the browser what the image you actually 905 00:41:18,600 --> 00:41:19,590 want to embed is. 906 00:41:19,590 --> 00:41:23,580 And so to do this, as you may know, we have attributes. 907 00:41:23,580 --> 00:41:28,200 So just like the html tag, as we saw earlier and can now see in the example 908 00:41:28,200 --> 00:41:31,560 here, has a language attribute specifying English as the default 909 00:41:31,560 --> 00:41:34,620 language for this page to help things like Google Translate and the like, 910 00:41:34,620 --> 00:41:38,970 so does the image tag get modified by this attribute called source. 911 00:41:38,970 --> 00:41:41,970 It's just src and img because those are more succinct 912 00:41:41,970 --> 00:41:45,800 representations of "image" and "source"-- saves us some keystrokes. 913 00:41:45,800 --> 00:41:48,540 And now I can type in here dan.jpeg. 914 00:41:48,540 --> 00:41:51,360 And then, just for good measure-- 915 00:41:51,360 --> 00:41:54,810 well, rather, I can then close the tag using the corresponding angle 916 00:41:54,810 --> 00:41:56,790 bracket, the greater than sign. 917 00:41:56,790 --> 00:41:59,370 But whereas all of the other tags thus far 918 00:41:59,370 --> 00:42:02,640 have a notion of starting and stopping or opening and closing, 919 00:42:02,640 --> 00:42:06,217 the image tag doesn't because the image is either there or it's not. 920 00:42:06,217 --> 00:42:08,550 There's really no conceptual notion of starting an image 921 00:42:08,550 --> 00:42:11,460 and then eventually stopping an image. 922 00:42:11,460 --> 00:42:12,810 But let's add one other detail. 923 00:42:12,810 --> 00:42:14,970 It turns out that there's yet other attributes. 924 00:42:14,970 --> 00:42:17,580 So you can have zero or more on any tag. 925 00:42:17,580 --> 00:42:21,202 For folks who have trouble seeing content on web pages 926 00:42:21,202 --> 00:42:23,160 and, indeed, rely on tools like screen readers, 927 00:42:23,160 --> 00:42:25,743 there's actually attributes that can help in cases like that-- 928 00:42:25,743 --> 00:42:29,880 turns out there's an alternative tag, or alt, where you can actually say, 929 00:42:29,880 --> 00:42:34,260 "photo of Handsome Dan," which is a textual description of whatever it 930 00:42:34,260 --> 00:42:35,760 is you're embedding in the web page. 931 00:42:35,760 --> 00:42:37,551 This way, someone who's not sighted but who 932 00:42:37,551 --> 00:42:39,540 has a screen reader that can read that to them 933 00:42:39,540 --> 00:42:42,060 can actually understand what it is that's on the web page. 934 00:42:42,060 --> 00:42:45,090 So most folks wouldn't see that unless you actually hover over it 935 00:42:45,090 --> 00:42:46,810 or have it spoken to you. 936 00:42:46,810 --> 00:42:51,120 So let me go ahead and save this file, go back to the index of the web server 937 00:42:51,120 --> 00:42:54,840 that I ran earlier with http-server, and now click on image. 938 00:42:54,840 --> 00:42:55,560 And voila. 939 00:42:55,560 --> 00:42:58,980 You'll see dan.jpeg embedded in the web page. 940 00:42:58,980 --> 00:43:02,070 Of course, this web page doesn't actually do all that much yet. 941 00:43:02,070 --> 00:43:06,172 And so suppose we actually wanted to link to one page or another. 942 00:43:06,172 --> 00:43:07,380 Well, we can do that as well. 943 00:43:07,380 --> 00:43:11,670 Let me go back to the IDE, copy this same code, just as a starting point, 944 00:43:11,670 --> 00:43:14,790 create a new file called link.html. 945 00:43:14,790 --> 00:43:17,250 And then in this file, we'll start with the same contents. 946 00:43:17,250 --> 00:43:19,890 But let me get rid of that body and simply say, 947 00:43:19,890 --> 00:43:22,185 for instance-- let's have people visit Harvard. 948 00:43:22,185 --> 00:43:29,310 So I could say visit https, for secure, www.harvard.edu/, 949 00:43:29,310 --> 00:43:32,730 or maybe even without the slash-- it doesn't matter for the default page-- 950 00:43:32,730 --> 00:43:33,480 period. 951 00:43:33,480 --> 00:43:34,740 Let me save this. 952 00:43:34,740 --> 00:43:37,560 Let me go back to the index of the web server, 953 00:43:37,560 --> 00:43:41,200 reload so that I can see the new file, link.html, that I created, 954 00:43:41,200 --> 00:43:43,200 and now click link.html. 955 00:43:43,200 --> 00:43:45,960 And voila. 956 00:43:45,960 --> 00:43:48,077 So it's a URL visually. 957 00:43:48,077 --> 00:43:49,410 But it's not actually clickable. 958 00:43:49,410 --> 00:43:52,480 But that's because the browser's only going to do what you told it to do. 959 00:43:52,480 --> 00:43:56,670 And all I've implicitly told it to do is display this black text here. 960 00:43:56,670 --> 00:43:59,580 If I actually want to make it interactive, I need another tag. 961 00:43:59,580 --> 00:44:04,080 Well, it turns out in HTML, there's an anchor tag, somewhat cryptically named. 962 00:44:04,080 --> 00:44:06,960 And it's also succinctly written as a, for anchor. 963 00:44:06,960 --> 00:44:09,660 And with the anchor tag can you anchor at this point in the page 964 00:44:09,660 --> 00:44:14,850 a link, or a hyper-reference, as it was once called, to that specific URL. 965 00:44:14,850 --> 00:44:18,330 So that attribute, by convention, is called href, hyper-reference. 966 00:44:18,330 --> 00:44:20,460 That is the destination to which you want to link. 967 00:44:20,460 --> 00:44:21,990 I can now close that tag. 968 00:44:21,990 --> 00:44:25,600 But I now need to tell the user where they're going. 969 00:44:25,600 --> 00:44:28,860 So I could just say Harvard, for instance, and put my period out there. 970 00:44:28,860 --> 00:44:30,250 Save the file. 971 00:44:30,250 --> 00:44:31,800 Go back to the tab here. 972 00:44:31,800 --> 00:44:32,830 Click Reload. 973 00:44:32,830 --> 00:44:35,170 And now you'll see the dichotomy. 974 00:44:35,170 --> 00:44:36,920 I'm seeing one thing, Harvard. 975 00:44:36,920 --> 00:44:39,990 But if you hover over it, and it's super small here, 976 00:44:39,990 --> 00:44:42,990 you can actually see, as a safety check, in the bottom left-hand corner, 977 00:44:42,990 --> 00:44:46,350 typically, the URL that you'll actually be led to. 978 00:44:46,350 --> 00:44:50,550 Now, as an aside, with this very, very simple feature of HTML, 979 00:44:50,550 --> 00:44:53,520 you can actually socially engineer people, 980 00:44:53,520 --> 00:44:57,600 as is commonly done with phishing attacks, P-H-I-S-H-I-N-G. 981 00:44:57,600 --> 00:45:00,810 If you've ever gotten some spam, either in your inbox or your spam folder, 982 00:45:00,810 --> 00:45:04,080 odds are someone's tried to ask you for your username and password 983 00:45:04,080 --> 00:45:06,900 or for your money or for your PayPal account. 984 00:45:06,900 --> 00:45:10,020 PayPal is especially a common target here. 985 00:45:10,020 --> 00:45:12,990 But you can see how you can very easily, unfortunately, 986 00:45:12,990 --> 00:45:15,810 trick and mislead people, especially if they don't necessarily 987 00:45:15,810 --> 00:45:17,460 understand some of these fundamentals. 988 00:45:17,460 --> 00:45:21,030 Let me go back here, for instance, and say here-- 989 00:45:21,030 --> 00:45:24,370 well, there's nothing stopping me from doing this little mischievous trick. 990 00:45:24,370 --> 00:45:27,780 I can change the href to Yale, but the text to Harvard, 991 00:45:27,780 --> 00:45:28,980 thereby tricking someone. 992 00:45:28,980 --> 00:45:29,940 Ha ha. 993 00:45:29,940 --> 00:45:32,880 You're actually going to Yale's website instead. 994 00:45:32,880 --> 00:45:36,030 But more maliciously, and in these phishing emails or spams 995 00:45:36,030 --> 00:45:38,580 that you might have been getting over the past several years, 996 00:45:38,580 --> 00:45:43,920 you could imagine typing anything you want here, like paypal.com. 997 00:45:43,920 --> 00:45:47,520 And then here could be www.SomeMaliciousWeb 998 00:45:47,520 --> 00:45:48,900 siteThatWantsYourMoney-- 999 00:45:48,900 --> 00:45:53,310 1000 00:45:53,310 --> 00:45:55,641 hopefully, that does not exist-- .com. 1001 00:45:55,641 --> 00:45:56,430 Save. 1002 00:45:56,430 --> 00:45:57,750 Reload the page. 1003 00:45:57,750 --> 00:46:01,030 And honestly, most people, myself included, 1004 00:46:01,030 --> 00:46:06,474 are not going to always paranoically check where I'm actually going. 1005 00:46:06,474 --> 00:46:07,890 I'm just going to click on a link. 1006 00:46:07,890 --> 00:46:08,407 And voila. 1007 00:46:08,407 --> 00:46:10,740 You might not notice the URL bar changing because you're 1008 00:46:10,740 --> 00:46:12,198 being whisked away to some website. 1009 00:46:12,198 --> 00:46:14,880 And honestly, it's not all that hard to recreate websites. 1010 00:46:14,880 --> 00:46:20,060 In fact, just to really hammer this point home, let me go to paypal.com. 1011 00:46:20,060 --> 00:46:22,050 And using today's primitives, notice that you 1012 00:46:22,050 --> 00:46:25,080 can go to View, Developer, View Source. 1013 00:46:25,080 --> 00:46:28,200 This is the HTML implementing PayPal's website-- 1014 00:46:28,200 --> 00:46:28,890 looks good. 1015 00:46:28,890 --> 00:46:36,240 Let me copy and paste that into, say, a new file called paypal.html. 1016 00:46:36,240 --> 00:46:38,250 Let me save that here. 1017 00:46:38,250 --> 00:46:42,780 Now let me go back to my web server, reload, open paypal.html. 1018 00:46:42,780 --> 00:46:43,730 And voila. 1019 00:46:43,730 --> 00:46:44,880 I have made PayPal. 1020 00:46:44,880 --> 00:46:49,524 So it's not even that hard to mimic where people think they are going. 1021 00:46:49,524 --> 00:46:52,440 Now, intellectual property issues aside, that I just copied and pasted 1022 00:46:52,440 --> 00:46:54,330 someone else's website, this is clearly not 1023 00:46:54,330 --> 00:46:58,230 fully operational because what I don't have access to their database 1024 00:46:58,230 --> 00:47:02,280 and their code on the server and all of the intellectual property and business 1025 00:47:02,280 --> 00:47:04,950 logic, so to speak, that actually makes PayPal what it is. 1026 00:47:04,950 --> 00:47:09,490 But HTML, the point is, is purely openly accessible by anyone. 1027 00:47:09,490 --> 00:47:10,330 It's not encrypted. 1028 00:47:10,330 --> 00:47:11,640 It's not zeros and ones. 1029 00:47:11,640 --> 00:47:15,120 But it tends to be so aesthetic and structural in nature that that's not 1030 00:47:15,120 --> 00:47:16,980 really the juicy stuff in a business. 1031 00:47:16,980 --> 00:47:19,540 But this technique can certainly be abused in this way. 1032 00:47:19,540 --> 00:47:22,350 So moving forward, just be more mindful of this because most emails 1033 00:47:22,350 --> 00:47:24,600 you get these days by a Gmail or any tool 1034 00:47:24,600 --> 00:47:26,949 are themselves implemented in HTML. 1035 00:47:26,949 --> 00:47:28,740 Even when you're typing out a Gmail message 1036 00:47:28,740 --> 00:47:31,410 and have never even thought about HTML, that email 1037 00:47:31,410 --> 00:47:34,480 is actually being sent underneath the hood as HTML. 1038 00:47:34,480 --> 00:47:37,690 Why-- well, if you've ever used a bulleted list or a numbered list, 1039 00:47:37,690 --> 00:47:42,000 if you do boldfacing or italics or any of those aesthetic features in Gmail 1040 00:47:42,000 --> 00:47:45,450 or other programs, those are implemented as HTML, 1041 00:47:45,450 --> 00:47:47,530 but just using nice, user-friendly interfaces. 1042 00:47:47,530 --> 00:47:49,050 So you can just click icons. 1043 00:47:49,050 --> 00:47:52,230 You don't have to think about open bracket, something, close bracket. 1044 00:47:52,230 --> 00:47:53,410 But we could do that. 1045 00:47:53,410 --> 00:47:56,620 For instance, if we go ahead and look at a few other examples-- 1046 00:47:56,620 --> 00:48:01,080 let me go ahead here and actually go back to our very first one, index.html. 1047 00:48:01,080 --> 00:48:05,190 And suppose I just want to really draw attention to "hello." 1048 00:48:05,190 --> 00:48:09,510 I can actually use the strong tag, which implies bold, typically. 1049 00:48:09,510 --> 00:48:10,740 Save that. 1050 00:48:10,740 --> 00:48:14,130 Let me go back to the web server that I had open a moment ago. 1051 00:48:14,130 --> 00:48:16,750 Click on index.html after reloading it. 1052 00:48:16,750 --> 00:48:18,750 And now it's a little subtle because it's small. 1053 00:48:18,750 --> 00:48:22,170 But you can probably see that "hello" is indeed boldfaced now. 1054 00:48:22,170 --> 00:48:26,040 So if you've ever clicked the B icon in Gmail, that's all it's doing. 1055 00:48:26,040 --> 00:48:29,550 Underneath the hood, Gmail is taking your word, hello, and 1056 00:48:29,550 --> 00:48:33,690 secretly putting open bracket, strong, close bracket, and then the opposite, 1057 00:48:33,690 --> 00:48:35,290 the close tag, after it. 1058 00:48:35,290 --> 00:48:38,800 And that's what it's sending to the recipient of that message. 1059 00:48:38,800 --> 00:48:39,940 So what else can you do? 1060 00:48:39,940 --> 00:48:41,356 Well, let me go ahead and do this. 1061 00:48:41,356 --> 00:48:45,810 Let me go ahead and open up, say, a few files that I created in advance. 1062 00:48:45,810 --> 00:48:48,990 One is called paragraphs.html. 1063 00:48:48,990 --> 00:48:50,850 And let me point this out first. 1064 00:48:50,850 --> 00:48:55,230 So in paragraphs, I just have three paragraphs of Latin text. 1065 00:48:55,230 --> 00:48:57,730 And they are rendered, for instance, as follows. 1066 00:48:57,730 --> 00:49:01,500 If I go into source 5 and I go into paragraphs.html-- 1067 00:49:01,500 --> 00:49:03,050 looks nice-- don't know what it says. 1068 00:49:03,050 --> 00:49:04,758 And, in fact, it's pretty much gibberish. 1069 00:49:04,758 --> 00:49:07,620 But it's nice, three nice paragraphs. 1070 00:49:07,620 --> 00:49:10,740 But notice how pedantic HTML is. 1071 00:49:10,740 --> 00:49:14,940 I actually had to use another tag to achieve those paragraphs, even. 1072 00:49:14,940 --> 00:49:18,990 If I only had, very reasonably, written these three paragraphs 1073 00:49:18,990 --> 00:49:21,976 like you might in Google Docs or Microsoft Word, 1074 00:49:21,976 --> 00:49:23,100 it's just three paragraphs. 1075 00:49:23,100 --> 00:49:23,850 Indent each. 1076 00:49:23,850 --> 00:49:25,830 Hit Enter, Enter in between them-- looks good. 1077 00:49:25,830 --> 00:49:28,200 It's wrapping because it's a really long paragraph off to the right. 1078 00:49:28,200 --> 00:49:29,100 But that's fine. 1079 00:49:29,100 --> 00:49:30,810 And I save this. 1080 00:49:30,810 --> 00:49:33,690 And I go to paragraphs and reload. 1081 00:49:33,690 --> 00:49:36,530 Notice that it all bunches together. 1082 00:49:36,530 --> 00:49:40,620 Intuitively, why is that happening, though? 1083 00:49:40,620 --> 00:49:44,000 What's the logic behind this bug now, albeit an aesthetic bug? 1084 00:49:44,000 --> 00:49:47,829 1085 00:49:47,829 --> 00:49:48,329 Yeah? 1086 00:49:48,329 --> 00:49:51,366 AUDIENCE: [INAUDIBLE] 1087 00:49:51,366 --> 00:49:52,240 DAVID J. MALAN: Yeah. 1088 00:49:52,240 --> 00:49:54,070 Those additional spaces are not being accounted for. 1089 00:49:54,070 --> 00:49:55,820 They're just being pushed together because 1090 00:49:55,820 --> 00:49:58,010 even though HTML does respect one space-- 1091 00:49:58,010 --> 00:50:00,490 otherwise, everything would be completely smushed-- 1092 00:50:00,490 --> 00:50:04,030 it ignores multiple spaces, whether it's new lines or tabs 1093 00:50:04,030 --> 00:50:05,650 or multiple hits of the space bar. 1094 00:50:05,650 --> 00:50:08,060 And it only does, ultimately, what you tell it to do. 1095 00:50:08,060 --> 00:50:12,010 So unless you explicitly, with tags in HTML, say, give me a new paragraph, 1096 00:50:12,010 --> 00:50:14,260 that's it for this paragraph, give me a new paragraph, 1097 00:50:14,260 --> 00:50:16,270 else that's-- now that's it for the paragraph, 1098 00:50:16,270 --> 00:50:18,490 it's just going to clump them all together, 1099 00:50:18,490 --> 00:50:21,560 maybe separating with a single space, which is clearly not the effect we 1100 00:50:21,560 --> 00:50:22,060 want. 1101 00:50:22,060 --> 00:50:25,677 So just remember that HTML is really nit-picky when it comes to that. 1102 00:50:25,677 --> 00:50:28,510 And much like in C, your code won't compile if it's not quite right. 1103 00:50:28,510 --> 00:50:31,660 In HTML, it will display. 1104 00:50:31,660 --> 00:50:33,910 But it's not going to display quite right-- 1105 00:50:33,910 --> 00:50:34,960 is the key there. 1106 00:50:34,960 --> 00:50:36,940 Well, what other features does this HTML have? 1107 00:50:36,940 --> 00:50:40,310 The reality is-- we'll give you a general conceptual overview of HTML 1108 00:50:40,310 --> 00:50:40,810 today. 1109 00:50:40,810 --> 00:50:42,370 We'll give you a taste of some of the tags. 1110 00:50:42,370 --> 00:50:44,589 But the reality is this, too, is the sort of language 1111 00:50:44,589 --> 00:50:46,630 that you can really learn by doing and by looking 1112 00:50:46,630 --> 00:50:50,170 at online references or texts that actually summarize the various tags. 1113 00:50:50,170 --> 00:50:52,310 But let's look at least a few more. 1114 00:50:52,310 --> 00:50:56,230 Let me go into now headings.html. 1115 00:50:56,230 --> 00:50:57,430 And you'll see this-- 1116 00:50:57,430 --> 00:51:02,140 turns out that there are tags called h1, h2, h3, h4, h5, h6. 1117 00:51:02,140 --> 00:51:04,190 These are very commonly used on websites that 1118 00:51:04,190 --> 00:51:07,960 have different headings, like big and bold, a little smaller and bold, 1119 00:51:07,960 --> 00:51:11,770 a little smaller and bold to do, like, chapter and section headings. 1120 00:51:11,770 --> 00:51:13,300 CS50's website is very hierarchical. 1121 00:51:13,300 --> 00:51:16,540 If you look through the syllabus, you'll see lots of different font sizes 1122 00:51:16,540 --> 00:51:18,070 and boldfacing and the like. 1123 00:51:18,070 --> 00:51:21,220 That derives from our using these built-in heading tags. 1124 00:51:21,220 --> 00:51:25,450 If I go ahead and open this in my browser, we will see the effect. 1125 00:51:25,450 --> 00:51:28,100 By default, h1 is big and bold. 1126 00:51:28,100 --> 00:51:30,610 H2 is big, but not as big and bold. 1127 00:51:30,610 --> 00:51:31,900 H3 is a little smaller. 1128 00:51:31,900 --> 00:51:33,610 H4, 5, and 6-- 1129 00:51:33,610 --> 00:51:36,649 and this follows the paradigm in academic papers and books 1130 00:51:36,649 --> 00:51:39,190 that have chapters and sections and subsections and the like. 1131 00:51:39,190 --> 00:51:42,289 You just get this feature for free from HTML. 1132 00:51:42,289 --> 00:51:43,330 Well, what else is there? 1133 00:51:43,330 --> 00:51:45,288 Well, if you actually have tabular data, things 1134 00:51:45,288 --> 00:51:47,510 you want to lay out in rows and columns, well, it 1135 00:51:47,510 --> 00:51:49,480 turns out that HTML supports tables. 1136 00:51:49,480 --> 00:51:51,220 Let's glimpse at this, too. 1137 00:51:51,220 --> 00:51:55,990 And if I go into table.html, in my browser, we'll see this effect. 1138 00:51:55,990 --> 00:51:57,380 It's not all that interesting. 1139 00:51:57,380 --> 00:52:00,790 I kind of mimic the idea of a phone pad, where these numbers are lining up 1140 00:52:00,790 --> 00:52:02,740 in columns and in rows. 1141 00:52:02,740 --> 00:52:06,730 But invisibly, this thing is actually laid out with tags. 1142 00:52:06,730 --> 00:52:10,570 If I go to the IDE and look down in here, 1143 00:52:10,570 --> 00:52:12,880 you'll see some copy-paste of before-- 1144 00:52:12,880 --> 00:52:14,860 html, head, and body. 1145 00:52:14,860 --> 00:52:16,240 But then notice here. 1146 00:52:16,240 --> 00:52:18,310 Hey, browser, here comes a table. 1147 00:52:18,310 --> 00:52:21,850 And you see, albeit surrounded by unfamiliar tags, probably, 1, 2, 3, 4, 1148 00:52:21,850 --> 00:52:25,420 5, 6, 7, 8, 9, and then the symbols down there. 1149 00:52:25,420 --> 00:52:29,270 So let's just infer, because the reality is much of your learning of HTML 1150 00:52:29,270 --> 00:52:32,020 and soon another language, we'll see-- it will just be indirectly. 1151 00:52:32,020 --> 00:52:35,170 If you're curious as to how some web page is implementing some feature, 1152 00:52:35,170 --> 00:52:36,711 you actually look at its source code. 1153 00:52:36,711 --> 00:52:38,930 And you infer, by example, how you could do the same. 1154 00:52:38,930 --> 00:52:39,610 So take a guess. 1155 00:52:39,610 --> 00:52:42,820 If this tag, effectively, says, hey, browser here comes the table, 1156 00:52:42,820 --> 00:52:47,770 this tag here, even if you've never seen HTML, probably means table row. 1157 00:52:47,770 --> 00:52:49,990 Hey, browser, here comes a row in my table. 1158 00:52:49,990 --> 00:52:51,040 This one's less obvious. 1159 00:52:51,040 --> 00:52:54,730 But td, td, td stands for table data or table cell. 1160 00:52:54,730 --> 00:52:57,730 So, hey, browser, here comes a cell, another cell, another cell, 1161 00:52:57,730 --> 00:52:59,260 three of them in total. 1162 00:52:59,260 --> 00:53:01,390 Hey, browser, that's it for this row. 1163 00:53:01,390 --> 00:53:02,860 And then repeat the pattern. 1164 00:53:02,860 --> 00:53:05,470 So here's where HTML just gets a little mundane after a while. 1165 00:53:05,470 --> 00:53:08,261 Once you see the name of the tag and once you know what attributes, 1166 00:53:08,261 --> 00:53:10,450 if any, it supports, you just follow this pattern. 1167 00:53:10,450 --> 00:53:11,910 That's it for HTML. 1168 00:53:11,910 --> 00:53:12,820 There's start tags. 1169 00:53:12,820 --> 00:53:13,814 There's end tags. 1170 00:53:13,814 --> 00:53:16,480 And sometimes, they're not even end tags, if they're not needed. 1171 00:53:16,480 --> 00:53:17,530 And there's attributes. 1172 00:53:17,530 --> 00:53:18,760 And that's HTML. 1173 00:53:18,760 --> 00:53:21,400 Now, if you want to be sure that your code is correct, 1174 00:53:21,400 --> 00:53:22,520 you have a few options. 1175 00:53:22,520 --> 00:53:28,120 Let me actually go ahead and open up, for instance, hello.html from earlier, 1176 00:53:28,120 --> 00:53:29,680 just so I have a simple example-- 1177 00:53:29,680 --> 00:53:31,630 or index.html from earlier. 1178 00:53:31,630 --> 00:53:36,197 Let me go to validator.w3.org-- 1179 00:53:36,197 --> 00:53:39,280 turns out there's tools out there that will just help give you feedback on 1180 00:53:39,280 --> 00:53:42,460 whether or not your HTML is valid, is correct. 1181 00:53:42,460 --> 00:53:46,000 And this is useful because sometimes, it might look OK to you on Chrome. 1182 00:53:46,000 --> 00:53:49,240 But honestly, if your friend or family member visits the exact same page 1183 00:53:49,240 --> 00:53:52,720 on Edge or IE or Safari or Firefox, it might not 1184 00:53:52,720 --> 00:53:56,620 look the same because the companies that make those browsers sometimes 1185 00:53:56,620 --> 00:53:58,810 disagree on how to render HTML. 1186 00:53:58,810 --> 00:54:00,880 And so if it's not 100% correct, you're only 1187 00:54:00,880 --> 00:54:04,300 incurring more risk that something might render incorrectly. 1188 00:54:04,300 --> 00:54:06,914 I went ahead and clicked Check after pasting my code in. 1189 00:54:06,914 --> 00:54:08,830 And this is good-- document checking complete, 1190 00:54:08,830 --> 00:54:10,260 no errors or warnings to show. 1191 00:54:10,260 --> 00:54:12,610 So when it comes time for Pset5 and you're dabbling with HTML, 1192 00:54:12,610 --> 00:54:14,830 know that there are tools out there, this one included, 1193 00:54:14,830 --> 00:54:17,080 and we'll point you at it in the spec, that just helps give you 1194 00:54:17,080 --> 00:54:20,330 feedback on whether something is broken so that you can, with more confidence, 1195 00:54:20,330 --> 00:54:24,300 know that it's going to work OK. 1196 00:54:24,300 --> 00:54:26,980 Well, let's make something a little more interesting now. 1197 00:54:26,980 --> 00:54:30,280 Let's re-implement Google, and not by this little copy-paste trick, 1198 00:54:30,280 --> 00:54:33,370 where we just copy their HTML and use it ourselves. 1199 00:54:33,370 --> 00:54:37,690 Let's actually now make a user interface that uses Google, in some way. 1200 00:54:37,690 --> 00:54:39,460 So Google, of course, in all of its forms, 1201 00:54:39,460 --> 00:54:42,820 ultimately has a text box into which you can type information. 1202 00:54:42,820 --> 00:54:45,340 And if I go ahead and do this, it turns out 1203 00:54:45,340 --> 00:54:48,940 that Google is generally going to redirect me to a certain URL. 1204 00:54:48,940 --> 00:54:51,730 If I search for "cats" and hit Enter, notice 1205 00:54:51,730 --> 00:54:55,042 I got redirected to a pretty cryptic-looking URL. 1206 00:54:55,042 --> 00:54:56,500 There's a lot of metadata in there. 1207 00:54:56,500 --> 00:54:59,480 There's a lot of advertising information these days and all that. 1208 00:54:59,480 --> 00:55:02,860 But it turns out, and I know this just from experience, 1209 00:55:02,860 --> 00:55:06,070 I could distill this URL into this. 1210 00:55:06,070 --> 00:55:07,730 And it will still work. 1211 00:55:07,730 --> 00:55:09,321 So let me go ahead and hit Enter. 1212 00:55:09,321 --> 00:55:09,820 Whoops. 1213 00:55:09,820 --> 00:55:14,110 Let me go ahead and hit Enter after simplifying this to question mark q 1214 00:55:14,110 --> 00:55:15,100 equals cats. 1215 00:55:15,100 --> 00:55:15,880 Enter. 1216 00:55:15,880 --> 00:55:19,510 And indeed, I get the same page of cats back. 1217 00:55:19,510 --> 00:55:20,840 So what's going on? 1218 00:55:20,840 --> 00:55:23,420 So the URL itself is not all that remarkable. 1219 00:55:23,420 --> 00:55:24,850 We've seen ww before. 1220 00:55:24,850 --> 00:55:26,697 You've certainly used google.com before. 1221 00:55:26,697 --> 00:55:27,655 This means it's secure. 1222 00:55:27,655 --> 00:55:29,120 It's speaking HTTPS. 1223 00:55:29,120 --> 00:55:30,880 All of this now is old hat. 1224 00:55:30,880 --> 00:55:34,690 It's not requesting index.html because Google is dynamic. 1225 00:55:34,690 --> 00:55:36,230 The content is constantly changing. 1226 00:55:36,230 --> 00:55:39,760 There's not some human whose job it is to update Google's home page every day 1227 00:55:39,760 --> 00:55:40,785 with HTML. 1228 00:55:40,785 --> 00:55:42,910 So they, instead, have a piece of software running, 1229 00:55:42,910 --> 00:55:48,790 written in Python or C++ or Java or who knows underneath the hood that is just 1230 00:55:48,790 --> 00:55:50,000 listening at this address. 1231 00:55:50,000 --> 00:55:52,870 So it doesn't have to be text files that humans created. 1232 00:55:52,870 --> 00:55:54,100 It can actually be a program. 1233 00:55:54,100 --> 00:55:55,210 This one is called Search. 1234 00:55:55,210 --> 00:55:57,001 And in just a week or two's time, you, too, 1235 00:55:57,001 --> 00:56:00,410 will write programs in a language called Python that can do the same thing. 1236 00:56:00,410 --> 00:56:02,890 But for now, we'll let Google do the heavy lifting. 1237 00:56:02,890 --> 00:56:04,240 And notice the question mark. 1238 00:56:04,240 --> 00:56:07,720 If you ever see a question mark in a URL, this means to the browser, 1239 00:56:07,720 --> 00:56:11,440 here comes some user input, something that the user probably 1240 00:56:11,440 --> 00:56:14,526 typed into the form, just like I did "cats" a moment ago. 1241 00:56:14,526 --> 00:56:16,400 And then you're going to see something equals 1242 00:56:16,400 --> 00:56:19,720 something, which indicates what the human typed in. 1243 00:56:19,720 --> 00:56:21,970 Now, just because Larry and Sergey, some 20 years ago, 1244 00:56:21,970 --> 00:56:25,630 decided with google.com that this text box that we saw a moment ago, 1245 00:56:25,630 --> 00:56:28,060 the big box that's now positioned here-- 1246 00:56:28,060 --> 00:56:30,820 they decided years ago that the name for that text box 1247 00:56:30,820 --> 00:56:32,680 is going to be q for query-- 1248 00:56:32,680 --> 00:56:34,420 but you can call it anything you want. 1249 00:56:34,420 --> 00:56:36,400 "Cats" is, obviously, what I typed in. 1250 00:56:36,400 --> 00:56:38,920 The equal sign is just associating the two together. 1251 00:56:38,920 --> 00:56:42,820 So this URL just means to Google, hey, Google, run the search program, 1252 00:56:42,820 --> 00:56:47,410 passing in a user input name of q whose value shall be "cats." 1253 00:56:47,410 --> 00:56:51,080 And that is how Google knows what to search for, for any of us. 1254 00:56:51,080 --> 00:56:53,294 And frankly, I can search for "dogs," not even just 1255 00:56:53,294 --> 00:56:54,710 by typing the word "dogs" in here. 1256 00:56:54,710 --> 00:56:57,340 I can be a little more precise and type it into this query 1257 00:56:57,340 --> 00:56:59,940 because I now know Google's URL format. 1258 00:56:59,940 --> 00:57:00,440 And voila. 1259 00:57:00,440 --> 00:57:03,597 Now I get search results for "dogs" instead. 1260 00:57:03,597 --> 00:57:04,180 But that's it. 1261 00:57:04,180 --> 00:57:06,770 That's the basic building block that's been happening all this time. 1262 00:57:06,770 --> 00:57:09,307 And even though the URL a moment ago was longer and uglier, 1263 00:57:09,307 --> 00:57:10,765 that was just uninteresting detail. 1264 00:57:10,765 --> 00:57:14,620 It's not the core business that the search is actually providing. 1265 00:57:14,620 --> 00:57:16,300 So what does this mean? 1266 00:57:16,300 --> 00:57:19,360 I can actually now make my own user interface for Google 1267 00:57:19,360 --> 00:57:21,530 by using a few new tags as well. 1268 00:57:21,530 --> 00:57:23,900 Let me go ahead and copy this, as a starting point. 1269 00:57:23,900 --> 00:57:27,730 Let me go ahead and create a new file called search.html. 1270 00:57:27,730 --> 00:57:29,557 Just to save time, I'll type that in there. 1271 00:57:29,557 --> 00:57:30,640 And I'll call this search. 1272 00:57:30,640 --> 00:57:32,620 And I'm going to get rid of the "hello" body. 1273 00:57:32,620 --> 00:57:34,420 So I just have a starting point. 1274 00:57:34,420 --> 00:57:37,150 That's just the same HTML I'm copying and pasting every time. 1275 00:57:37,150 --> 00:57:39,510 Well, it turns out in HTML, there is a tag 1276 00:57:39,510 --> 00:57:43,450 called form that will give you a form for user input. 1277 00:57:43,450 --> 00:57:47,830 And it turns out that inside of a form, you can have different tags as well-- 1278 00:57:47,830 --> 00:57:49,450 specifically, an input. 1279 00:57:49,450 --> 00:57:50,710 And inputs have names. 1280 00:57:50,710 --> 00:57:55,450 So I can say name equals "q" to mimic Larry and Sergey's decision years ago, 1281 00:57:55,450 --> 00:57:56,650 the founders of Google. 1282 00:57:56,650 --> 00:57:58,330 The type of this input is text. 1283 00:57:58,330 --> 00:58:01,387 So it's not a button or a check box or something like that. 1284 00:58:01,387 --> 00:58:02,095 Those exist, too. 1285 00:58:02,095 --> 00:58:03,177 It's just text. 1286 00:58:03,177 --> 00:58:04,510 And then I want a Submit button. 1287 00:58:04,510 --> 00:58:06,790 And I just know, from having done this before, 1288 00:58:06,790 --> 00:58:10,360 that I can get a Submit button by doing type equals submit. 1289 00:58:10,360 --> 00:58:12,939 And then the value of that is going to be Search, 1290 00:58:12,939 --> 00:58:14,980 which is the word I'm going to see on the screen. 1291 00:58:14,980 --> 00:58:16,420 You would only know this by having seen it 1292 00:58:16,420 --> 00:58:18,640 by someone else doing it, looking at someone's source code, 1293 00:58:18,640 --> 00:58:19,765 reading an online tutorial. 1294 00:58:19,765 --> 00:58:20,980 It's not necessarily obvious. 1295 00:58:20,980 --> 00:58:24,220 But the pattern is the same-- tag name, attribute equals something, 1296 00:58:24,220 --> 00:58:27,040 attribute equals something, and so forth. 1297 00:58:27,040 --> 00:58:30,250 Well, now let me go ahead and save this, go into the web server, 1298 00:58:30,250 --> 00:58:33,470 and reload the index. 1299 00:58:33,470 --> 00:58:35,950 So there's my search.html. 1300 00:58:35,950 --> 00:58:37,870 And it's not quite as pretty as Google's. 1301 00:58:37,870 --> 00:58:39,400 Let me zoom in so it's bigger. 1302 00:58:39,400 --> 00:58:40,750 But I do have a text box. 1303 00:58:40,750 --> 00:58:43,360 And I have a button whose label is Search. 1304 00:58:43,360 --> 00:58:45,640 But I don't know yet where to send it. 1305 00:58:45,640 --> 00:58:48,310 I need one more attribute or two here. 1306 00:58:48,310 --> 00:58:52,900 It turns out that I want this form to take the action of sending this 1307 00:58:52,900 --> 00:58:58,690 information to www.google.com/search, the search program on Google's server. 1308 00:58:58,690 --> 00:59:01,940 But I want it to use that special verb we saw a moment ago. 1309 00:59:01,940 --> 00:59:03,970 And again, this was deeper in the envelope. 1310 00:59:03,970 --> 00:59:08,394 The method I wanted to use is get, in lowercase in this case-- 1311 00:59:08,394 --> 00:59:10,060 so a little low-level and technical now. 1312 00:59:10,060 --> 00:59:12,976 But this just means that's the verb you should use inside the envelope 1313 00:59:12,976 --> 00:59:14,060 to get the web page. 1314 00:59:14,060 --> 00:59:15,040 But that's it. 1315 00:59:15,040 --> 00:59:18,010 I've told the web page the action you should take 1316 00:59:18,010 --> 00:59:22,030 is submit this form to this URL using get, the method we saw earlier. 1317 00:59:22,030 --> 00:59:24,160 Submit a parameter, as it's called, called 1318 00:59:24,160 --> 00:59:26,150 q, with whatever the human typed in. 1319 00:59:26,150 --> 00:59:28,240 And then have it give us a Search button here. 1320 00:59:28,240 --> 00:59:31,520 So let me save this, go back to my page, reload. 1321 00:59:31,520 --> 00:59:36,580 And now let's go ahead and search for "mice" this time and click Search. 1322 00:59:36,580 --> 00:59:37,630 And voila. 1323 00:59:37,630 --> 00:59:40,240 There we have a whole lot of mice search results. 1324 00:59:40,240 --> 00:59:41,830 But why, is the question? 1325 00:59:41,830 --> 00:59:45,790 Well, all I've done is, using HTML and an HTML form, 1326 00:59:45,790 --> 00:59:48,820 is I've generated the prescribed format of a URL, 1327 00:59:48,820 --> 00:59:53,410 calling Google's Search program with a input of q equals mice. 1328 00:59:53,410 --> 00:59:56,050 And now, as an aside, if I did take more inputs, 1329 00:59:56,050 --> 00:59:57,850 they would be something like this-- 1330 00:59:57,850 --> 01:00:01,870 something equals value ampersand something equals value. 1331 01:00:01,870 --> 01:00:03,910 Ampersands just separate these key-value pairs 1332 01:00:03,910 --> 01:00:05,620 if you have multiple inputs on the page. 1333 01:00:05,620 --> 01:00:08,560 But the principle is ultimately the same. 1334 01:00:08,560 --> 01:00:09,670 So it's pretty powerful. 1335 01:00:09,670 --> 01:00:11,770 I've not implemented Google, per se. 1336 01:00:11,770 --> 01:00:15,045 I've implemented the front end, the user interface. 1337 01:00:15,045 --> 01:00:18,740 And in future, we can we maybe start to work on the logic behind the scenes. 1338 01:00:18,740 --> 01:00:23,155 So any questions then on HTTP and now the convergence with HTML? 1339 01:00:23,155 --> 01:00:25,700 1340 01:00:25,700 --> 01:00:30,190 You feel comfy with HTML, because we're about to move on to another language? 1341 01:00:30,190 --> 01:00:31,070 Yeah? 1342 01:00:31,070 --> 01:00:34,000 So all of my examples have looked ugly thus far, except for PayPal. 1343 01:00:34,000 --> 01:00:35,000 That looked pretty nice. 1344 01:00:35,000 --> 01:00:36,470 But I just copied and pasted it. 1345 01:00:36,470 --> 01:00:41,840 So how do we begin to style our websites in a more compelling way? 1346 01:00:41,840 --> 01:00:44,840 HTML, at the end of the day, is mostly used for structure of a web page, 1347 01:00:44,840 --> 01:00:48,006 just laying out the data that you care about, the words that you care about, 1348 01:00:48,006 --> 01:00:49,350 the images that you care about. 1349 01:00:49,350 --> 01:00:51,637 But the aesthetics that last miles, so to speak, 1350 01:00:51,637 --> 01:00:54,470 of the really pretty colors and the right font sizes and positioning 1351 01:00:54,470 --> 01:00:56,090 things exactly where you want them-- 1352 01:00:56,090 --> 01:01:00,676 that is the job of another language called CSS, Cascading Style Sheets. 1353 01:01:00,676 --> 01:01:02,300 This, too-- not a programming language. 1354 01:01:02,300 --> 01:01:05,790 It's entirely aesthetic in its nature. 1355 01:01:05,790 --> 01:01:08,490 So let's go ahead and take a look at an example. 1356 01:01:08,490 --> 01:01:11,180 Let me go ahead and open up the same web server as before, 1357 01:01:11,180 --> 01:01:13,310 open up an example I saw early-- 1358 01:01:13,310 --> 01:01:16,790 that I made earlier called css0.html. 1359 01:01:16,790 --> 01:01:20,109 Suppose that this is the home page that I want to create for John Harvard. 1360 01:01:20,109 --> 01:01:22,400 And notice I've got his name, big and bold, at the top. 1361 01:01:22,400 --> 01:01:25,650 And I've got a slightly smaller font in the middle and a slightly smaller font 1362 01:01:25,650 --> 01:01:26,232 below it. 1363 01:01:26,232 --> 01:01:28,190 But these are just minor font size differences. 1364 01:01:28,190 --> 01:01:30,350 It's all centered in the page here. 1365 01:01:30,350 --> 01:01:33,830 How would I actually make this website? 1366 01:01:33,830 --> 01:01:37,940 Well, let me go ahead and go into a new file here. 1367 01:01:37,940 --> 01:01:40,689 I'll call it css0.html. 1368 01:01:40,689 --> 01:01:42,980 Let me go ahead and paste my starting point, as before. 1369 01:01:42,980 --> 01:01:44,840 And I'll call this css0. 1370 01:01:44,840 --> 01:01:46,962 And then in the body of this page is where 1371 01:01:46,962 --> 01:01:48,920 I'm going to go ahead and lay out that content. 1372 01:01:48,920 --> 01:01:51,200 So as I recall, I had John Harvard. 1373 01:01:51,200 --> 01:01:56,350 And then below that, it was "Welcome to my home page! 1374 01:01:56,350 --> 01:02:00,710 Copyright," and funky symbol-- so I'll just do that for now-- 1375 01:02:00,710 --> 01:02:02,330 "John Harvard." 1376 01:02:02,330 --> 01:02:03,440 Save. 1377 01:02:03,440 --> 01:02:05,300 So that's css0.html. 1378 01:02:05,300 --> 01:02:09,090 Let me go ahead and reload it back from my server. 1379 01:02:09,090 --> 01:02:11,960 And voila. 1380 01:02:11,960 --> 01:02:15,235 So what's wrong, aesthetically? 1381 01:02:15,235 --> 01:02:16,610 It's, obviously, all on one line. 1382 01:02:16,610 --> 01:02:17,110 But why? 1383 01:02:17,110 --> 01:02:19,090 How do I fix this, as before? 1384 01:02:19,090 --> 01:02:19,810 Yeah? 1385 01:02:19,810 --> 01:02:21,105 AUDIENCE: [INAUDIBLE] 1386 01:02:21,105 --> 01:02:21,980 DAVID J. MALAN: Yeah. 1387 01:02:21,980 --> 01:02:24,146 So I could add the paragraph tags, just to put these 1388 01:02:24,146 --> 01:02:25,460 all on individual paragraphs. 1389 01:02:25,460 --> 01:02:27,569 And the IDE sometimes can be a little annoying 1390 01:02:27,569 --> 01:02:30,110 because now I'm going in retroactively and adding this stuff. 1391 01:02:30,110 --> 01:02:31,280 So it's trying to be helpful. 1392 01:02:31,280 --> 01:02:32,488 But then I have to delete it. 1393 01:02:32,488 --> 01:02:35,570 So sometimes, this autocomplete can get in the way. 1394 01:02:35,570 --> 01:02:38,000 But it's an easy enough fix-- open p. 1395 01:02:38,000 --> 01:02:42,320 Let me move this over here and move this over here. 1396 01:02:42,320 --> 01:02:43,102 Save. 1397 01:02:43,102 --> 01:02:44,060 Go back to the browser. 1398 01:02:44,060 --> 01:02:45,559 It's not going to change on its own. 1399 01:02:45,559 --> 01:02:47,010 I need to click Reload. 1400 01:02:47,010 --> 01:02:48,680 And now-- better. 1401 01:02:48,680 --> 01:02:50,750 It's a little ugly-- more whitespace than I want. 1402 01:02:50,750 --> 01:02:52,100 But it's closer, certainly. 1403 01:02:52,100 --> 01:02:54,200 Let's clean up that copyright symbol. 1404 01:02:54,200 --> 01:02:57,090 It turns out there's some keys you just can't type on your keyboard. 1405 01:02:57,090 --> 01:02:59,131 You could certainly copy-paste it from elsewhere. 1406 01:02:59,131 --> 01:03:02,840 But HTML, as an aside, supports what are called entities. 1407 01:03:02,840 --> 01:03:05,360 And these are numeric codes that are sometimes 1408 01:03:05,360 --> 01:03:08,000 written in hexadecimal, sometimes written in decimal, depending 1409 01:03:08,000 --> 01:03:09,620 on your preference. 1410 01:03:09,620 --> 01:03:12,750 And it's just a weird number that represents a symbol. 1411 01:03:12,750 --> 01:03:14,030 You couldn't, otherwise, type. 1412 01:03:14,030 --> 01:03:15,200 Watch as I reload now. 1413 01:03:15,200 --> 01:03:17,482 So what happens to that copyright symbol? 1414 01:03:17,482 --> 01:03:18,940 Now it's the one you might expect-- 1415 01:03:18,940 --> 01:03:19,580 so minor detail. 1416 01:03:19,580 --> 01:03:20,830 It's not all that interesting. 1417 01:03:20,830 --> 01:03:22,986 But those do exist, as well, for aesthetics. 1418 01:03:22,986 --> 01:03:24,360 But this isn't quite what I want. 1419 01:03:24,360 --> 01:03:25,922 And here is where CSS comes in. 1420 01:03:25,922 --> 01:03:27,630 I can lay out the structure of this page. 1421 01:03:27,630 --> 01:03:29,570 Yes, I have my three separate paragraphs. 1422 01:03:29,570 --> 01:03:30,930 But they're not centered. 1423 01:03:30,930 --> 01:03:32,600 Their font sizes are all the same. 1424 01:03:32,600 --> 01:03:34,730 And there's weird gaps there. 1425 01:03:34,730 --> 01:03:36,870 This is where CSS can help. 1426 01:03:36,870 --> 01:03:38,960 So let me introduce a few new tags instead. 1427 01:03:38,960 --> 01:03:40,420 These aren't strictly paragraphs. 1428 01:03:40,420 --> 01:03:43,010 It's not sentences and sentences of text. 1429 01:03:43,010 --> 01:03:45,600 This is kind of like the header of my page. 1430 01:03:45,600 --> 01:03:47,390 So let me actually rename this to header. 1431 01:03:47,390 --> 01:03:49,560 This is maybe the main part of my page. 1432 01:03:49,560 --> 01:03:51,170 So let me rename this to main. 1433 01:03:51,170 --> 01:03:53,450 And this is like the footer of my page, I would claim. 1434 01:03:53,450 --> 01:03:55,010 Now, it's a super simple website. 1435 01:03:55,010 --> 01:03:56,330 But these tags exist. 1436 01:03:56,330 --> 01:03:59,630 And in the most recent version of HTML called HTML5, 1437 01:03:59,630 --> 01:04:04,020 the world has started moving away from generic tags, like p for paragraph, 1438 01:04:04,020 --> 01:04:08,150 to more semantic tags that are a little more descriptive that say, 1439 01:04:08,150 --> 01:04:11,030 hey, browser, here's the header of my page, annoyingly, 1440 01:04:11,030 --> 01:04:14,090 not to be confused with the head of your page, which is, like, the title. 1441 01:04:14,090 --> 01:04:16,215 And, hey, browser, here's the main part of my page. 1442 01:04:16,215 --> 01:04:17,480 Here's the footer of my page. 1443 01:04:17,480 --> 01:04:19,430 And we'll see why this is useful, if only 1444 01:04:19,430 --> 01:04:22,460 because it describes my page a little more compellingly. 1445 01:04:22,460 --> 01:04:25,610 But it turns out that any HTML tag can have a style 1446 01:04:25,610 --> 01:04:27,530 attribute, which we've not seen before. 1447 01:04:27,530 --> 01:04:33,140 And if I want to alter the font size of this tag, I can say, make this large. 1448 01:04:33,140 --> 01:04:39,200 And down here, I can say, style equals font-size, let's say, medium. 1449 01:04:39,200 --> 01:04:44,720 And then down here, I can say style equals font-size small. 1450 01:04:44,720 --> 01:04:49,040 And let me save that, go back to the browser, reload. 1451 01:04:49,040 --> 01:04:50,300 And it's not centered yet. 1452 01:04:50,300 --> 01:04:52,460 But now it's kind of big, medium-- 1453 01:04:52,460 --> 01:04:55,620 large, medium, and small, which is what I intended the first time. 1454 01:04:55,620 --> 01:04:57,410 So how can I actually add centering? 1455 01:04:57,410 --> 01:05:00,020 Well, it turns out inside of these quotes, 1456 01:05:00,020 --> 01:05:02,870 you can use semicolons to separate multiple ideas. 1457 01:05:02,870 --> 01:05:07,760 If I put a semicolon here, I can now say, text-align center. 1458 01:05:07,760 --> 01:05:12,020 And let me go ahead and copy and paste that here and here. 1459 01:05:12,020 --> 01:05:12,920 Save. 1460 01:05:12,920 --> 01:05:14,120 And notice the pattern. 1461 01:05:14,120 --> 01:05:17,770 There's a keyword, a colon, and then a value. 1462 01:05:17,770 --> 01:05:19,370 A semicolon separates it. 1463 01:05:19,370 --> 01:05:22,070 Then there's a keyword, a colon, and a value. 1464 01:05:22,070 --> 01:05:24,080 That's the same pattern we're going to see. 1465 01:05:24,080 --> 01:05:28,200 If I go back to the browser, reload now, now we're on our way. 1466 01:05:28,200 --> 01:05:31,150 Now it looks more like what I intended it to look like. 1467 01:05:31,150 --> 01:05:32,560 It took a little more effort. 1468 01:05:32,560 --> 01:05:35,380 But thanks to CSS, I was able to do it. 1469 01:05:35,380 --> 01:05:38,610 So what I've highlighted here and what the IDE has highlighted in green 1470 01:05:38,610 --> 01:05:42,170 is what are called CSS properties, Cascading Style Sheets. 1471 01:05:42,170 --> 01:05:46,260 CSS lets you deal with things like centering and font sizes 1472 01:05:46,260 --> 01:05:49,704 and colors and positioning and all the aesthetics I alluded to earlier. 1473 01:05:49,704 --> 01:05:51,870 And you just have to know what these key values are. 1474 01:05:51,870 --> 01:05:53,750 Honestly, I don't know all of them, certainly. 1475 01:05:53,750 --> 01:05:55,350 I always Google when I want to know how could I 1476 01:05:55,350 --> 01:05:56,910 do something with this type of tag. 1477 01:05:56,910 --> 01:05:58,800 That's because there's a lot of online free references 1478 01:05:58,800 --> 01:05:59,841 that just shows you this. 1479 01:05:59,841 --> 01:06:01,470 But they all follow the same pattern-- 1480 01:06:01,470 --> 01:06:06,420 key, colon, value-- maybe semicolon-- key, colon, value, and so forth. 1481 01:06:06,420 --> 01:06:08,760 But even if you've never written HTML before, 1482 01:06:08,760 --> 01:06:12,270 you could probably argue that I am not making-- 1483 01:06:12,270 --> 01:06:14,490 designing this very well. 1484 01:06:14,490 --> 01:06:20,160 In C, too, you might have found fault any time my instinct was to copy-paste. 1485 01:06:20,160 --> 01:06:22,460 What is redundant in this example? 1486 01:06:22,460 --> 01:06:23,750 AUDIENCE: [INAUDIBLE] 1487 01:06:23,750 --> 01:06:24,625 DAVID J. MALAN: Yeah. 1488 01:06:24,625 --> 01:06:27,660 I'm centering all three, which honestly, it just looks a little stupid. 1489 01:06:27,660 --> 01:06:29,280 It literally was copied and pasted. 1490 01:06:29,280 --> 01:06:31,320 And that should always rub you the wrong way. 1491 01:06:31,320 --> 01:06:33,820 So Cascading Style Sheets-- 1492 01:06:33,820 --> 01:06:37,110 the first C in Cascading Style Sheets, or the only C 1493 01:06:37,110 --> 01:06:39,660 in Cascading Style Sheets, stands for Cascading, 1494 01:06:39,660 --> 01:06:42,374 which implies a hierarchy to it, too. 1495 01:06:42,374 --> 01:06:44,040 So let me, actually, make a new example. 1496 01:06:44,040 --> 01:06:47,880 Let me call this css1.html. 1497 01:06:47,880 --> 01:06:49,650 Let me paste that same exact code. 1498 01:06:49,650 --> 01:06:55,720 But it occurs to me that header and main and footer are all children of body, 1499 01:06:55,720 --> 01:06:56,290 if you will. 1500 01:06:56,290 --> 01:06:57,390 They're indented inside. 1501 01:06:57,390 --> 01:06:59,910 And you can-- you actually can use family tree references 1502 01:06:59,910 --> 01:07:02,970 in the context of HTML, where header is a child 1503 01:07:02,970 --> 01:07:07,240 of body insofar as it's inside of her, tucked, indented, inside of it. 1504 01:07:07,240 --> 01:07:10,200 So if these all have the same parent, so to speak, 1505 01:07:10,200 --> 01:07:13,920 let me actually erase this from all three tags. 1506 01:07:13,920 --> 01:07:17,670 And let me actually apply it to the parent tag, saying, 1507 01:07:17,670 --> 01:07:22,380 style equals text-align center because cascading 1508 01:07:22,380 --> 01:07:24,270 style sheets, indeed, cascade. 1509 01:07:24,270 --> 01:07:28,770 So if you apply one property, like aligning in the center, to the parent, 1510 01:07:28,770 --> 01:07:32,220 it's going to cascade down on all of the children nested inside. 1511 01:07:32,220 --> 01:07:34,920 So let me go ahead and save this, go back to the listing, 1512 01:07:34,920 --> 01:07:37,860 and open up css1.html. 1513 01:07:37,860 --> 01:07:40,290 And voila-- no aesthetic difference. 1514 01:07:40,290 --> 01:07:43,530 But it's just better designed, like 5 out of 5 for design 1515 01:07:43,530 --> 01:07:49,654 now, but not necessarily because this is a little ugly, honestly. 1516 01:07:49,654 --> 01:07:51,570 And we've not had occasion to do this yet in C 1517 01:07:51,570 --> 01:07:53,850 because we only had one language in C. It, generally, 1518 01:07:53,850 --> 01:07:59,350 is frowned upon to combine one language, like CSS, with another, like HTML. 1519 01:07:59,350 --> 01:08:00,900 And they might look very similar. 1520 01:08:00,900 --> 01:08:01,980 And they're all in the same context. 1521 01:08:01,980 --> 01:08:02,760 But this gets annoying. 1522 01:08:02,760 --> 01:08:04,200 And especially in the real world, some people 1523 01:08:04,200 --> 01:08:05,700 might be better with aesthetics than others. 1524 01:08:05,700 --> 01:08:08,050 Clearly, from my examples, I'm not among those people. 1525 01:08:08,050 --> 01:08:10,633 And so I might want to work with a colleague or a friend who's 1526 01:08:10,633 --> 01:08:13,330 much better at design and colors and fonts than I am. 1527 01:08:13,330 --> 01:08:16,370 And so I might want them to work independently of me. 1528 01:08:16,370 --> 01:08:19,920 I'll work on the structure of the web page or, if you will, my final project, 1529 01:08:19,920 --> 01:08:22,689 and let them actually contribute more of the aesthetics. 1530 01:08:22,689 --> 01:08:24,899 So how can we begin to decouple these things? 1531 01:08:24,899 --> 01:08:26,990 Much like in C, we, at least, had header files. 1532 01:08:26,990 --> 01:08:29,250 We could factor out commonalities. 1533 01:08:29,250 --> 01:08:32,850 Well, it turns out we can do this a little differently from before. 1534 01:08:32,850 --> 01:08:39,689 Let me go ahead and open up an example 2 that I made earlier called css2.html. 1535 01:08:39,689 --> 01:08:42,670 And let's scroll through this for just a moment. 1536 01:08:42,670 --> 01:08:47,540 Notice now that in the body of this web page, I've introduced a different tag-- 1537 01:08:47,540 --> 01:08:51,149 rather, a different attribute called "class." 1538 01:08:51,149 --> 01:08:54,630 So it turns out that you don't have to just copy and paste or type out 1539 01:08:54,630 --> 01:08:58,380 manually all of these nit-picky font size changes and text alignment 1540 01:08:58,380 --> 01:08:58,979 changes. 1541 01:08:58,979 --> 01:09:01,170 You can give them more descriptive names. 1542 01:09:01,170 --> 01:09:04,200 And arguably, it's a lot more readable to me and my partner 1543 01:09:04,200 --> 01:09:08,220 to read the word "centered" and "large" and "medium" and "small" 1544 01:09:08,220 --> 01:09:11,850 and not see all the stupid colons and the semicolons and the distractions. 1545 01:09:11,850 --> 01:09:15,810 That's the stuff that's not interesting when writing any sort of code. 1546 01:09:15,810 --> 01:09:19,960 So where did these words come from-- centered, large, medium, and small? 1547 01:09:19,960 --> 01:09:23,939 Well, notice that they're all values of a class attribute, which 1548 01:09:23,939 --> 01:09:25,590 is-- allows for customization. 1549 01:09:25,590 --> 01:09:28,680 Let me scroll up to the head of my web page. 1550 01:09:28,680 --> 01:09:31,109 And you'll see, and it's mostly whitespace because I just 1551 01:09:31,109 --> 01:09:32,910 kept hitting Enter to clean it up-- 1552 01:09:32,910 --> 01:09:36,720 notice that inside of my html tag is, as before, my head tag. 1553 01:09:36,720 --> 01:09:39,720 If I scroll down, there's also still a title tag. 1554 01:09:39,720 --> 01:09:42,850 But there's a new tag that I alluded to earlier among the few 1555 01:09:42,850 --> 01:09:45,000 you can put up there called "style." 1556 01:09:45,000 --> 01:09:47,520 You can factor out to the top of your page 1557 01:09:47,520 --> 01:09:50,080 all of the stylizations that you care about. 1558 01:09:50,080 --> 01:09:51,630 And you can do it as follows. 1559 01:09:51,630 --> 01:09:55,320 Notice here that I've literally written the word "centered" with a dot in front 1560 01:09:55,320 --> 01:09:57,840 of it, the word "large" with a dot in front of it, 1561 01:09:57,840 --> 01:09:59,910 the word "medium" with a dot, "small" with a dot. 1562 01:09:59,910 --> 01:10:02,040 Those define classes. 1563 01:10:02,040 --> 01:10:05,460 So CSS lets you define your own collections 1564 01:10:05,460 --> 01:10:06,919 of configuration properties. 1565 01:10:06,919 --> 01:10:09,210 And you can give them names, just so it's a little more 1566 01:10:09,210 --> 01:10:10,780 descriptive and user-friendly. 1567 01:10:10,780 --> 01:10:12,960 So you can define class, class, class, class. 1568 01:10:12,960 --> 01:10:16,620 And then inside the curly braces, which I've lined up here, just like in C, 1569 01:10:16,620 --> 01:10:20,430 you can have one property, two properties, 100 properties. 1570 01:10:20,430 --> 01:10:24,180 But you can keep them nice and orderly, away from all of your HTML, so 1571 01:10:24,180 --> 01:10:27,150 that someone else can work on them or just you can keep the aesthetics 1572 01:10:27,150 --> 01:10:28,905 separate from the contents of your page. 1573 01:10:28,905 --> 01:10:30,720 It's the notion of separation of concerns. 1574 01:10:30,720 --> 01:10:33,688 Keep the data separate from the presentation thereof. 1575 01:10:33,688 --> 01:10:35,730 AUDIENCE: [INAUDIBLE] 1576 01:10:35,730 --> 01:10:38,730 DAVID J. MALAN: Is there a library you can use that's done this for you? 1577 01:10:38,730 --> 01:10:39,230 Yes. 1578 01:10:39,230 --> 01:10:41,650 And we'll see a little teaser for that in just a bit. 1579 01:10:41,650 --> 01:10:44,190 So where are I using these words, to be clear? 1580 01:10:44,190 --> 01:10:46,530 Here, I'm saying give me a class called centered, 1581 01:10:46,530 --> 01:10:49,560 a class called large, medium, and small, each of which 1582 01:10:49,560 --> 01:10:52,180 have these respective properties associated with them. 1583 01:10:52,180 --> 01:10:54,272 And then down here, I can just use those words. 1584 01:10:54,272 --> 01:10:55,980 And I don't have to get into the business 1585 01:10:55,980 --> 01:11:01,200 of the semicolons, curly braces, and all of that in my actual HTML. 1586 01:11:01,200 --> 01:11:05,130 But it turns out I can do this even more fancily. 1587 01:11:05,130 --> 01:11:10,150 Let me open up css3.html, another example. 1588 01:11:10,150 --> 01:11:11,880 In this case, notice what I've done. 1589 01:11:11,880 --> 01:11:16,540 Now my code is really getting pretty, relatively speaking, 1590 01:11:16,540 --> 01:11:18,720 or from one person's perspective. 1591 01:11:18,720 --> 01:11:20,670 Now I don't have any attributes. 1592 01:11:20,670 --> 01:11:21,840 This is just tighter. 1593 01:11:21,840 --> 01:11:24,990 I'm using fewer characters, fewer words, fewer lines of code. 1594 01:11:24,990 --> 01:11:26,705 This is just, generally, a good thing. 1595 01:11:26,705 --> 01:11:27,330 It's less work. 1596 01:11:27,330 --> 01:11:30,300 It's less to maintain, fewer opportunities for mistakes. 1597 01:11:30,300 --> 01:11:33,210 But I've gotten rid of, it seems, all of the aesthetics, 1598 01:11:33,210 --> 01:11:37,350 but not necessarily, because CSS, this second language, 1599 01:11:37,350 --> 01:11:41,820 also lets you apply properties not to tags by way of classes, 1600 01:11:41,820 --> 01:11:44,200 but to the actual tags themselves. 1601 01:11:44,200 --> 01:11:50,070 So if you only have one body, it is safe to say, OK, CSS, apply to the body tag 1602 01:11:50,070 --> 01:11:51,610 this or these properties. 1603 01:11:51,610 --> 01:11:55,080 Hey, browser, apply to the header tag this or these properties-- 1604 01:11:55,080 --> 01:11:57,640 to the main tag, the footer tag, and so forth. 1605 01:11:57,640 --> 01:12:00,570 So I don't even need to complicate my world with small, medium, large, 1606 01:12:00,570 --> 01:12:01,111 and so forth. 1607 01:12:01,111 --> 01:12:04,020 I can just apply those properties at the top of my file 1608 01:12:04,020 --> 01:12:06,210 to the respective tag names, whatever they are. 1609 01:12:06,210 --> 01:12:07,440 And I could use the p tag. 1610 01:12:07,440 --> 01:12:10,390 I could use the image tag, the a tag, any of those. 1611 01:12:10,390 --> 01:12:12,220 I can style them in different ways. 1612 01:12:12,220 --> 01:12:15,840 In fact, if you wondered or started to wonder how could you resize an image, 1613 01:12:15,840 --> 01:12:18,510 you can apply CSS to the image tag and say, 1614 01:12:18,510 --> 01:12:22,490 make it this many pixels or this many pixels, or something like that. 1615 01:12:22,490 --> 01:12:22,990 Yeah? 1616 01:12:22,990 --> 01:12:25,870 1617 01:12:25,870 --> 01:12:31,630 AUDIENCE: Is it bad design to then keep pushing [INAUDIBLE] 1618 01:12:31,630 --> 01:12:34,477 1619 01:12:34,477 --> 01:12:35,310 DAVID J. MALAN: Yes. 1620 01:12:35,310 --> 01:12:38,340 Is it not bad design to just keep adding more stuff to the top 1621 01:12:38,340 --> 01:12:40,410 and pushing your actual content down and down 1622 01:12:40,410 --> 01:12:42,090 and down and just bloating the file? 1623 01:12:42,090 --> 01:12:46,230 Yes-- which is a wonderful segue to our fourth and final example here, which 1624 01:12:46,230 --> 01:12:48,480 is css4.html. 1625 01:12:48,480 --> 01:12:50,520 This example-- let me just zoom out. 1626 01:12:50,520 --> 01:12:51,780 That's it. 1627 01:12:51,780 --> 01:12:58,020 This css4.html has even fewer lines of code and, indeed, no CSS in it 1628 01:12:58,020 --> 01:12:58,950 whatsoever. 1629 01:12:58,950 --> 01:13:02,640 This is just the website I care about, the words and the data I care about. 1630 01:13:02,640 --> 01:13:05,010 All of the aesthetic stuff, while important, 1631 01:13:05,010 --> 01:13:13,580 is relegated to a separate file that you can probably infer is called css4.css. 1632 01:13:13,580 --> 01:13:17,420 Unfortunately, and this was a stupid design decision by humans years ago, 1633 01:13:17,420 --> 01:13:21,890 the way you include CSS from a separate file 1634 01:13:21,890 --> 01:13:26,090 is, paradoxically, to use a link tag, not the a tag, 1635 01:13:26,090 --> 01:13:28,670 which probably should have been called the link tag. 1636 01:13:28,670 --> 01:13:30,960 But you have a relationship of style sheet. 1637 01:13:30,960 --> 01:13:33,440 So sometimes, humans make poor decisions. 1638 01:13:33,440 --> 01:13:34,940 This is one of them, I would say. 1639 01:13:34,940 --> 01:13:38,180 But if you just copy-paste and trust that this means, hey, browser, 1640 01:13:38,180 --> 01:13:42,800 open up this file and use those features from the file in this file, 1641 01:13:42,800 --> 01:13:46,280 it's similar, in spirit, to C's hash include mechanism. 1642 01:13:46,280 --> 01:13:47,880 It just looks a little different. 1643 01:13:47,880 --> 01:13:48,910 So what's in that file? 1644 01:13:48,910 --> 01:13:52,674 Well, you can probably guess, if I go into css4.css, 1645 01:13:52,674 --> 01:13:53,840 it's just that same content. 1646 01:13:53,840 --> 01:13:57,170 But I factored it out, as you notes-- wasn't the best design to keep it 1647 01:13:57,170 --> 01:13:58,010 all together. 1648 01:13:58,010 --> 01:13:59,945 So I can simply put it there instead. 1649 01:13:59,945 --> 01:14:02,560 1650 01:14:02,560 --> 01:14:03,990 Any questions? 1651 01:14:03,990 --> 01:14:06,210 Yeah? 1652 01:14:06,210 --> 01:14:10,950 AUDIENCE: In the other one, the fourth perfect one, the best one, 1653 01:14:10,950 --> 01:14:13,020 what does "stylesheet" do? 1654 01:14:13,020 --> 01:14:14,270 DAVID J. MALAN: Good question. 1655 01:14:14,270 --> 01:14:15,936 What does stylesheet do in this example? 1656 01:14:15,936 --> 01:14:18,990 Short answer is that just makes clear to the browser 1657 01:14:18,990 --> 01:14:24,970 that the relationship between this file, css4.css, and this file, 1658 01:14:24,970 --> 01:14:27,840 which is the HTML file, is that of a "style sheet." 1659 01:14:27,840 --> 01:14:30,780 So CSS, Cascading Style Sheets-- it's a lot of words 1660 01:14:30,780 --> 01:14:32,430 just to convey the idea of aesthetics. 1661 01:14:32,430 --> 01:14:34,510 But that is your style sheet, literally. 1662 01:14:34,510 --> 01:14:39,546 It's an actual file that ends in .css that should be applied to this HTML. 1663 01:14:39,546 --> 01:14:40,045 Yeah? 1664 01:14:40,045 --> 01:14:43,300 AUDIENCE: [INAUDIBLE] 1665 01:14:43,300 --> 01:14:45,160 1666 01:14:45,160 --> 01:14:46,665 DAVID J. MALAN: Better design why? 1667 01:14:46,665 --> 01:14:49,920 AUDIENCE: [INAUDIBLE] 1668 01:14:49,920 --> 01:14:52,731 1669 01:14:52,731 --> 01:14:54,480 DAVID J. MALAN: It's really good question. 1670 01:14:54,480 --> 01:14:56,090 So to summarize, is it-- isn't it-- 1671 01:14:56,090 --> 01:14:59,389 wouldn't that be better design, to have one file with your HTML and your CSS, 1672 01:14:59,389 --> 01:15:01,430 rather than two because things can get misplaced? 1673 01:15:01,430 --> 01:15:02,450 Now they're decoupled. 1674 01:15:02,450 --> 01:15:03,970 There's not the same inherent link. 1675 01:15:03,970 --> 01:15:04,952 Maybe, honestly. 1676 01:15:04,952 --> 01:15:06,160 That is a reasonable concern. 1677 01:15:06,160 --> 01:15:07,880 Reasonable people will disagree. 1678 01:15:07,880 --> 01:15:10,490 Generally, I would say that the programming 1679 01:15:10,490 --> 01:15:13,310 world has decided that separation of concerns is a good thing. 1680 01:15:13,310 --> 01:15:16,400 So keep your HTML in one file, your CSS in another file. 1681 01:15:16,400 --> 01:15:17,909 Keep them in the same folder. 1682 01:15:17,909 --> 01:15:20,700 And, frankly, if you go losing your files in a folder all the time, 1683 01:15:20,700 --> 01:15:21,825 the problem is probably a-- 1684 01:15:21,825 --> 01:15:23,960 is human problem, not a technical one. 1685 01:15:23,960 --> 01:15:25,310 But you make a good point, too. 1686 01:15:25,310 --> 01:15:29,100 And you could argue, quite credibly, that you're just over-engineering this 1687 01:15:29,100 --> 01:15:29,600 now. 1688 01:15:29,600 --> 01:15:31,070 I like it better altogether. 1689 01:15:31,070 --> 01:15:34,310 And you'll see in CS50's website and Facebook and Google and others-- 1690 01:15:34,310 --> 01:15:36,980 sometimes, you do see CSS together with HTML 1691 01:15:36,980 --> 01:15:39,390 because humans decided this does make more sense. 1692 01:15:39,390 --> 01:15:43,370 But there are these mechanisms in place to facilitate collaboration, 1693 01:15:43,370 --> 01:15:47,570 to facilitate separation, so that you can keep things a little more organized 1694 01:15:47,570 --> 01:15:49,910 in separate files. 1695 01:15:49,910 --> 01:15:52,390 Any questions then? 1696 01:15:52,390 --> 01:15:56,150 So to recap where we're at, because this is a lot quickly, 1697 01:15:56,150 --> 01:15:59,730 HTTP is this protocol via which you can just exchange information 1698 01:15:59,730 --> 01:16:03,510 from A to B and B to A. HTML is the language in which web pages are 1699 01:16:03,510 --> 01:16:06,780 written, that structure of the web page, and actually have your data. 1700 01:16:06,780 --> 01:16:08,940 And CSS lets you fine-tune it. 1701 01:16:08,940 --> 01:16:10,695 Now, I didn't fine-tune it all that much. 1702 01:16:10,695 --> 01:16:12,570 I just centered it and changed the font size. 1703 01:16:12,570 --> 01:16:15,197 But honestly, we can very quickly get into the weeds of colors 1704 01:16:15,197 --> 01:16:16,530 and positioning and all of that. 1705 01:16:16,530 --> 01:16:20,222 But that we'll do in sections and in Psets and in googling and looking 1706 01:16:20,222 --> 01:16:21,930 at online references that we'll point you 1707 01:16:21,930 --> 01:16:27,030 to because it just all follows the same patterns of tags with attributes 1708 01:16:27,030 --> 01:16:28,380 and then CSS properties. 1709 01:16:28,380 --> 01:16:31,650 So even though you've not seen the whole vocabulary of CSS and HTML, 1710 01:16:31,650 --> 01:16:35,800 you have seen the entire structure, the fundamental concepts. 1711 01:16:35,800 --> 01:16:39,360 So let's introduce then one final piece of the puzzle 1712 01:16:39,360 --> 01:16:41,790 and bring back to bear some of our programming 1713 01:16:41,790 --> 01:16:44,670 capabilities of the past several weeks. 1714 01:16:44,670 --> 01:16:49,890 So it turns out that in the world of HTML and CSS, 1715 01:16:49,890 --> 01:16:53,670 you can actually introduce a programming language, as well, 1716 01:16:53,670 --> 01:16:57,780 to make your websites even more dynamic using something called JavaScript. 1717 01:16:57,780 --> 01:17:00,000 Many of you have taken APCS and know Java-- 1718 01:17:00,000 --> 01:17:01,110 no relation. 1719 01:17:01,110 --> 01:17:03,810 JavaScript was just a marketing decision to them-- 1720 01:17:03,810 --> 01:17:06,210 call it something similar to an already popular language. 1721 01:17:06,210 --> 01:17:11,160 So JavaScript is a language used in browsers, typically, 1722 01:17:11,160 --> 01:17:14,820 to give you more control over the users' experience. 1723 01:17:14,820 --> 01:17:18,120 For instance, when you visit Gmail these days and you get a new mail, 1724 01:17:18,120 --> 01:17:21,600 it just appears magically as a new row in your inbox. 1725 01:17:21,600 --> 01:17:24,810 You don't have to reload or keep clicking Refresh to see your new mail. 1726 01:17:24,810 --> 01:17:26,910 It just appears magically. 1727 01:17:26,910 --> 01:17:28,920 When you're using Google Maps or something, 1728 01:17:28,920 --> 01:17:31,260 you can just click and drag and see more of the map. 1729 01:17:31,260 --> 01:17:33,510 Back in my day, you have to click a right arrow 1730 01:17:33,510 --> 01:17:35,560 to go this way, a left arrow to go that way. 1731 01:17:35,560 --> 01:17:37,950 And the whole web page would actually reload. 1732 01:17:37,950 --> 01:17:41,940 But JavaScript gives you logic and programming capabilities 1733 01:17:41,940 --> 01:17:46,860 in your users' Macs and PCs and phones that gets executed not on your server, 1734 01:17:46,860 --> 01:17:51,360 but on their browser, which means you can do many more things by running code 1735 01:17:51,360 --> 01:17:52,900 on their computers. 1736 01:17:52,900 --> 01:17:54,340 So what does this actually mean? 1737 01:17:54,340 --> 01:17:56,490 Well, in JavaScript, fortunately, we have 1738 01:17:56,490 --> 01:18:00,120 a language that's super similar to C. But it's interpreted top 1739 01:18:00,120 --> 01:18:01,609 to bottom, left to right. 1740 01:18:01,609 --> 01:18:04,650 The browser just reads the instructions in JavaScript and just does them. 1741 01:18:04,650 --> 01:18:06,020 There's no compilation for you. 1742 01:18:06,020 --> 01:18:07,210 There's no zeros and ones. 1743 01:18:07,210 --> 01:18:09,870 And so in that sense, it's just easier than C. 1744 01:18:09,870 --> 01:18:15,660 Also, it has no pointers, which also makes it easier than C. 1745 01:18:15,660 --> 01:18:19,030 But it gives us the ability to alter a web page 1746 01:18:19,030 --> 01:18:20,852 once it's been delivered to a user. 1747 01:18:20,852 --> 01:18:23,310 And we'll see what we can actually do with that capability. 1748 01:18:23,310 --> 01:18:24,710 But first, let's compare and contrast. 1749 01:18:24,710 --> 01:18:27,510 You'll recall a few weeks ago, in week 1, when we introduced C, 1750 01:18:27,510 --> 01:18:29,970 we pulled up some Scratch we pulled up some C, just to show 1751 01:18:29,970 --> 01:18:31,590 that the ideas are still the same. 1752 01:18:31,590 --> 01:18:33,240 Let's do the same real quick here. 1753 01:18:33,240 --> 01:18:37,080 So we went from Scratch to C. Let's now go to JavaScript with variables. 1754 01:18:37,080 --> 01:18:41,340 So in C, if you wanted to set a counter to 0 a la Scratch, 1755 01:18:41,340 --> 01:18:43,920 you would literally say counter equals 0, semicolon. 1756 01:18:43,920 --> 01:18:46,260 But you would have the data type to the left. 1757 01:18:46,260 --> 01:18:48,690 In JavaScript, the code is almost the same. 1758 01:18:48,690 --> 01:18:50,880 But you actually don't specify data types. 1759 01:18:50,880 --> 01:18:54,570 You, the programmer, don't worry about ints or floats or strings 1760 01:18:54,570 --> 01:18:55,500 or all of that. 1761 01:18:55,500 --> 01:18:57,180 You do define the variable. 1762 01:18:57,180 --> 01:18:59,820 And the keyword to use, though there's several options that 1763 01:18:59,820 --> 01:19:01,590 do slightly different things, is let. 1764 01:19:01,590 --> 01:19:06,480 Add the thinking is let the counter equal 0, please, if you will. 1765 01:19:06,480 --> 01:19:09,450 But you don't specify the type, even though JavaScript supports 1766 01:19:09,450 --> 01:19:11,790 numbers and strings, and so forth. 1767 01:19:11,790 --> 01:19:14,340 You just don't have to care about them as much anymore. 1768 01:19:14,340 --> 01:19:15,960 Suppose you want to update a variable. 1769 01:19:15,960 --> 01:19:18,780 In Scratch, you would just change the counter by one. 1770 01:19:18,780 --> 01:19:22,800 In C, you would do counter equals counter plus 1, semicolon. 1771 01:19:22,800 --> 01:19:25,560 In JavaScript, you would do the exact same thing. 1772 01:19:25,560 --> 01:19:27,060 Code is identical. 1773 01:19:27,060 --> 01:19:29,580 In C, you could also write this more succinctly 1774 01:19:29,580 --> 01:19:32,067 as counter plus equals 1, semicolon, if you recall. 1775 01:19:32,067 --> 01:19:33,150 If you don't, that's fine. 1776 01:19:33,150 --> 01:19:35,070 This is just shorthand notation. 1777 01:19:35,070 --> 01:19:37,560 In JavaScript-- same exact thing. 1778 01:19:37,560 --> 01:19:39,810 In C, you could also do counter plus, plus, 1779 01:19:39,810 --> 01:19:41,580 semicolon to increment the value-- 1780 01:19:41,580 --> 01:19:43,290 in JavaScript, same. 1781 01:19:43,290 --> 01:19:45,210 So this is what's nice about JavaScript. 1782 01:19:45,210 --> 01:19:47,670 You already know much of it just by nature 1783 01:19:47,670 --> 01:19:50,670 of having spent so many weeks in the weeds with C. 1784 01:19:50,670 --> 01:19:54,870 Suppose you had an if condition, like this-- is if x is less than y. 1785 01:19:54,870 --> 01:19:56,850 In C, we would write it like this at right. 1786 01:19:56,850 --> 01:19:59,130 JavaScript syntax is the same. 1787 01:19:59,130 --> 01:20:02,070 If you had an if-else, syntax is the same. 1788 01:20:02,070 --> 01:20:03,480 If else, if else-- 1789 01:20:03,480 --> 01:20:05,670 syntax is the same. 1790 01:20:05,670 --> 01:20:09,550 If you want a forever loop, syntax is the same, while true. 1791 01:20:09,550 --> 01:20:15,010 If you want a for loop, syntax is almost the same. 1792 01:20:15,010 --> 01:20:16,790 Let needs to be used instead. 1793 01:20:16,790 --> 01:20:20,680 So this is C because it says int i equals 0, and so forth. 1794 01:20:20,680 --> 01:20:21,810 That's a data type. 1795 01:20:21,810 --> 01:20:24,430 JavaScript-- I just claim doesn't worry-- 1796 01:20:24,430 --> 01:20:26,660 you don't need to worry about those data types. 1797 01:20:26,660 --> 01:20:29,530 So in JavaScript, you would instead say "let" instead. 1798 01:20:29,530 --> 01:20:32,150 But otherwise, the syntax is the same. 1799 01:20:32,150 --> 01:20:34,360 So that's a nice starting point because there's 1800 01:20:34,360 --> 01:20:36,250 nothing new to learn syntactically. 1801 01:20:36,250 --> 01:20:39,430 We just need to apply the same logic that we saw in week 0 and 1 1802 01:20:39,430 --> 01:20:41,620 since to HTML. 1803 01:20:41,620 --> 01:20:45,017 So if this is a representative web page, albeit super simple-- 1804 01:20:45,017 --> 01:20:46,600 this is the one I brought up earlier-- 1805 01:20:46,600 --> 01:20:49,000 how can we now start thinking about this web page 1806 01:20:49,000 --> 01:20:52,300 in a way that is conducive to programming it 1807 01:20:52,300 --> 01:20:54,610 and actually changing it dynamically? 1808 01:20:54,610 --> 01:20:59,980 Well, let me propose that you think of this same web page as just a tree. 1809 01:20:59,980 --> 01:21:03,219 And we introduced trees just a week ago, albeit in the context of C. 1810 01:21:03,219 --> 01:21:05,260 And frankly, in C, they're a headache because you 1811 01:21:05,260 --> 01:21:09,100 have to wire things together using pointers and nodes and all of that. 1812 01:21:09,100 --> 01:21:10,480 Don't worry about that now. 1813 01:21:10,480 --> 01:21:14,299 It's the browser's job to build this in memory or RAM for you. 1814 01:21:14,299 --> 01:21:16,840 And indeed, when I keep saying that a browser, upon receiving 1815 01:21:16,840 --> 01:21:19,880 an envelope with HTML, reads it top to bottom, left to right, 1816 01:21:19,880 --> 01:21:21,380 I haven't said what it does with it. 1817 01:21:21,380 --> 01:21:24,760 What it essentially does with it is it creates this data structure 1818 01:21:24,760 --> 01:21:26,230 in memory for you. 1819 01:21:26,230 --> 01:21:30,520 And it is Chrome or Edge or Firefox or whatever browser you're using that 1820 01:21:30,520 --> 01:21:34,480 itself is written in probably C or C++ or some other language. 1821 01:21:34,480 --> 01:21:37,270 Some other human at those companies wrote the code 1822 01:21:37,270 --> 01:21:40,120 that builds all of the pointers and/or whatever is 1823 01:21:40,120 --> 01:21:42,490 used to build this structure in memory. 1824 01:21:42,490 --> 01:21:46,870 But this is what the browser has in mind once it's read your HTML. 1825 01:21:46,870 --> 01:21:49,390 And now that it's a data structure in memory, 1826 01:21:49,390 --> 01:21:51,400 you can make changes to it, just like last week, 1827 01:21:51,400 --> 01:21:54,580 we were inserting humans into our linked list, changing the data structure. 1828 01:21:54,580 --> 01:21:59,470 The browser can add more nodes or more tags to the page, dynamically. 1829 01:21:59,470 --> 01:22:01,960 So if you run with this in your mind, when 1830 01:22:01,960 --> 01:22:05,060 you get a new email in Gmail, what is happening? 1831 01:22:05,060 --> 01:22:07,750 Well, the web page, when you first load it in Gmail, 1832 01:22:07,750 --> 01:22:12,550 has a whole bunch of td tags, probably, or tr tags, rather, for table row-- 1833 01:22:12,550 --> 01:22:15,940 table row, table row-- each of which represents an email, perhaps. 1834 01:22:15,940 --> 01:22:21,700 When you get a new email, the browser is probably just adding another tr node 1835 01:22:21,700 --> 01:22:24,325 to this tree because notice the words here. 1836 01:22:24,325 --> 01:22:25,870 Html lines up with this tag. 1837 01:22:25,870 --> 01:22:27,460 Head lines up with this tag. 1838 01:22:27,460 --> 01:22:29,200 Body lines up with this tag. 1839 01:22:29,200 --> 01:22:32,050 So it stands to reason that when you get another row in your inbox 1840 01:22:32,050 --> 01:22:36,460 with another email, someone is just adding a node to that tree. 1841 01:22:36,460 --> 01:22:39,940 And that someone is JavaScript, the language 1842 01:22:39,940 --> 01:22:44,320 in which you can control the users' browser even after they've loaded 1843 01:22:44,320 --> 01:22:45,959 your web page for the first time. 1844 01:22:45,959 --> 01:22:47,500 So what can we actually do with this? 1845 01:22:47,500 --> 01:22:49,580 Let's start simple, as follows. 1846 01:22:49,580 --> 01:22:57,250 Let me go ahead and just whip up, really quickly, a file called hello0.html. 1847 01:22:57,250 --> 01:23:01,220 And we'll do it, as before, with our DOCTYPE html-- 1848 01:23:01,220 --> 01:23:03,820 my html tag here, my head tag here. 1849 01:23:03,820 --> 01:23:06,160 My title here will be hello0. 1850 01:23:06,160 --> 01:23:08,684 And notice I've been moving these to separate lines. 1851 01:23:08,684 --> 01:23:11,350 You don't strictly need to do that-- just to keep the hierarchy. 1852 01:23:11,350 --> 01:23:13,150 The whitespace, again doesn't matter. 1853 01:23:13,150 --> 01:23:14,440 But I'll be consistent there. 1854 01:23:14,440 --> 01:23:18,140 And in my body here, I'll say this time just "hello, world" by default. 1855 01:23:18,140 --> 01:23:20,500 So that's a pretty simple web page as well. 1856 01:23:20,500 --> 01:23:22,810 Let's, actually, now make it interactive. 1857 01:23:22,810 --> 01:23:25,297 All of my web pages thus far have been static content, 1858 01:23:25,297 --> 01:23:26,380 except for the Google one. 1859 01:23:26,380 --> 01:23:29,950 But even that wasn't so much interactive as it was the moment I hit Submit, 1860 01:23:29,950 --> 01:23:32,650 it made the problem Google's problem to deal with. 1861 01:23:32,650 --> 01:23:34,610 Let's keep the user with me this time. 1862 01:23:34,610 --> 01:23:36,190 Let me go ahead and do this. 1863 01:23:36,190 --> 01:23:38,290 Let me get rid of this form here. 1864 01:23:38,290 --> 01:23:43,300 Let me create a new file now called hello1 as my next version. 1865 01:23:43,300 --> 01:23:45,190 And let me go ahead and paste that same code. 1866 01:23:45,190 --> 01:23:49,750 But this time, let me have the browser be a little interactive. 1867 01:23:49,750 --> 01:23:54,580 Let me go ahead and have a form here because what I want is a text box-- 1868 01:23:54,580 --> 01:23:56,306 type equals text. 1869 01:23:56,306 --> 01:23:58,180 I'm not going to bother giving it a name yet. 1870 01:23:58,180 --> 01:24:01,090 And let me have another one called type equals submit. 1871 01:24:01,090 --> 01:24:02,500 Save. 1872 01:24:02,500 --> 01:24:07,150 And let me go ahead and open up my server so I can see this file. 1873 01:24:07,150 --> 01:24:11,020 This, I said, was what-- hello1.html. 1874 01:24:11,020 --> 01:24:12,470 So it's just a simple form. 1875 01:24:12,470 --> 01:24:14,470 But there's no connection to Google this time. 1876 01:24:14,470 --> 01:24:16,602 Let me start to use this form interactively 1877 01:24:16,602 --> 01:24:18,310 because if I have the ability to program, 1878 01:24:18,310 --> 01:24:21,200 I bet I could take the users' input and do something with it. 1879 01:24:21,200 --> 01:24:23,630 So how do I do this? 1880 01:24:23,630 --> 01:24:27,757 Well, let me propose first that I want the human to type 1881 01:24:27,757 --> 01:24:28,840 their name into this form. 1882 01:24:28,840 --> 01:24:30,130 And then when they click Submit, I want it 1883 01:24:30,130 --> 01:24:32,800 to say "hello, David" or "hello, Veronica" or "hello, Brian," 1884 01:24:32,800 --> 01:24:35,770 whatever the name actually is, like some of our C examples. 1885 01:24:35,770 --> 01:24:37,690 So you know what? 1886 01:24:37,690 --> 01:24:39,100 Let me write that function first. 1887 01:24:39,100 --> 01:24:41,380 It turns out that in the head of your web page, 1888 01:24:41,380 --> 01:24:44,440 you can have not just the title and not just style, 1889 01:24:44,440 --> 01:24:48,710 but also a tag called script for JavaScript, for instance. 1890 01:24:48,710 --> 01:24:50,920 And in this tag, I can actually write code. 1891 01:24:50,920 --> 01:24:53,230 And there's something a little different in JavaScript. 1892 01:24:53,230 --> 01:24:57,670 Instead of writing void greet as the name of my function 1893 01:24:57,670 --> 01:25:00,190 and then writing the body of my function here and then 1894 01:25:00,190 --> 01:25:03,325 saying void here, for instance, JavaScript's a little looser. 1895 01:25:03,325 --> 01:25:05,200 If you don't want to take any arguments, just 1896 01:25:05,200 --> 01:25:07,120 don't mention them-- no mention of void. 1897 01:25:07,120 --> 01:25:08,440 If you don't have a-- 1898 01:25:08,440 --> 01:25:10,540 and actually, don't even mention a return type. 1899 01:25:10,540 --> 01:25:12,500 Just call it a function-- so slight difference 1900 01:25:12,500 --> 01:25:14,240 from C. It's a little lazier. 1901 01:25:14,240 --> 01:25:15,710 You don't worry about input types. 1902 01:25:15,710 --> 01:25:17,168 You don't worry about output types. 1903 01:25:17,168 --> 01:25:19,430 You just say, give me a function called greet. 1904 01:25:19,430 --> 01:25:21,590 Well, what do I want this function to do? 1905 01:25:21,590 --> 01:25:24,260 Turns out in JavaScript, there's a function called alert 1906 01:25:24,260 --> 01:25:27,230 that's just going to pop up a window that says something in it. 1907 01:25:27,230 --> 01:25:30,210 And I can pass, as an argument to this JavaScript function, 1908 01:25:30,210 --> 01:25:31,580 whatever it is I want it to say. 1909 01:25:31,580 --> 01:25:36,490 So let's go ahead and say "hello, world," semicolon. 1910 01:25:36,490 --> 01:25:40,010 It's almost identical to C, again, except that I'm saying 1911 01:25:40,010 --> 01:25:41,770 function instead of a return type. 1912 01:25:41,770 --> 01:25:43,130 And alert, apparently, exists. 1913 01:25:43,130 --> 01:25:46,910 And there's no sharp include or any of that that we typically had in C. 1914 01:25:46,910 --> 01:25:49,760 It's just literally in my browser right now. 1915 01:25:49,760 --> 01:25:53,760 So let me go ahead and save that and go down to the form tag here. 1916 01:25:53,760 --> 01:25:55,820 And it turns out, on the form tag, there's 1917 01:25:55,820 --> 01:25:58,220 a special attribute called onsubmit. 1918 01:25:58,220 --> 01:26:01,610 And as the word implies, it says when the form 1919 01:26:01,610 --> 01:26:08,120 is submitted, on the submission of this form, go ahead and execute this, greet. 1920 01:26:08,120 --> 01:26:11,720 So I can actually tell the browser, on submission of this form, 1921 01:26:11,720 --> 01:26:14,210 to call a function that I wrote. 1922 01:26:14,210 --> 01:26:16,760 And now let me just preemptively write return 1923 01:26:16,760 --> 01:26:18,950 false for reasons we'll come back to in a moment, 1924 01:26:18,950 --> 01:26:20,870 just to make sure this actually works. 1925 01:26:20,870 --> 01:26:27,920 Now let me go ahead and save this, go to hello1.html, open that up. 1926 01:26:27,920 --> 01:26:31,130 And let me just change the title, for consistency-- 1927 01:26:31,130 --> 01:26:32,540 so hello1.html. 1928 01:26:32,540 --> 01:26:35,630 And let me go ahead and say David, Submit-- 1929 01:26:35,630 --> 01:26:39,080 hello, world-- not really sure what the point of typing my name was. 1930 01:26:39,080 --> 01:26:42,290 But it, at least, seems to work as programmed. 1931 01:26:42,290 --> 01:26:46,080 But obviously, where I'm going with this is I want to display my name. 1932 01:26:46,080 --> 01:26:49,970 So when the human has typed in their name to the box and clicked Submit, 1933 01:26:49,970 --> 01:26:51,800 that's triggering a submission of the form. 1934 01:26:51,800 --> 01:26:52,400 But wait. 1935 01:26:52,400 --> 01:26:54,380 When the form is submitted, I'm calling greet. 1936 01:26:54,380 --> 01:26:57,650 So it sounds like it's greet's job to figure out what 1937 01:26:57,650 --> 01:27:00,180 the word is that the human typed in. 1938 01:27:00,180 --> 01:27:01,124 So how can I do this? 1939 01:27:01,124 --> 01:27:02,040 It's a little cryptic. 1940 01:27:02,040 --> 01:27:04,206 And this is where now it becomes JavaScript-specific 1941 01:27:04,206 --> 01:27:08,130 and not C. Let me go ahead and define a variable called name. 1942 01:27:08,130 --> 01:27:12,155 And let me use this fancy technique, document.querySelector. 1943 01:27:12,155 --> 01:27:15,260 1944 01:27:15,260 --> 01:27:18,890 And then in here, I'm going to need to specify 1945 01:27:18,890 --> 01:27:21,630 what node in the tree I want to select. 1946 01:27:21,630 --> 01:27:23,640 So I'm actually getting ahead of myself. 1947 01:27:23,640 --> 01:27:25,160 Let's look at the HTML. 1948 01:27:25,160 --> 01:27:30,020 At the moment, I've got a form tag and two input tags, neither of which 1949 01:27:30,020 --> 01:27:30,710 has a name. 1950 01:27:30,710 --> 01:27:31,746 And I could fix that. 1951 01:27:31,746 --> 01:27:33,620 But let me actually do a different technique. 1952 01:27:33,620 --> 01:27:36,230 HTML also supports unique identifiers. 1953 01:27:36,230 --> 01:27:39,200 And you can give them literally that, unique IDs. 1954 01:27:39,200 --> 01:27:41,860 You can call it whatever you want-- foobar, baz, xyz. 1955 01:27:41,860 --> 01:27:43,901 I'm going to make it more descriptive and call it 1956 01:27:43,901 --> 01:27:47,810 ID equals name because what I can now do up here 1957 01:27:47,810 --> 01:27:51,800 in querySelector is actually specify what 1958 01:27:51,800 --> 01:27:54,770 it is I want to select from the tree. 1959 01:27:54,770 --> 01:27:59,300 That tree is called a DOM, or Document Object Model, verbosely. 1960 01:27:59,300 --> 01:28:01,560 And I need to do one last thing-- turns out, 1961 01:28:01,560 --> 01:28:03,440 and you would only know this from experience, 1962 01:28:03,440 --> 01:28:06,860 that if "name" is the unique identifier of an element 1963 01:28:06,860 --> 01:28:11,120 and not the name of a tag, I actually need to prefix it with a hash, 1964 01:28:11,120 --> 01:28:12,410 unrelated to C's hash. 1965 01:28:12,410 --> 01:28:16,010 But otherwise, this function, querySelector, 1966 01:28:16,010 --> 01:28:18,680 is going to think that there's a tag called "name." 1967 01:28:18,680 --> 01:28:22,809 So this means an ID whose value is "name." 1968 01:28:22,809 --> 01:28:23,850 It's a bit of a mouthful. 1969 01:28:23,850 --> 01:28:24,830 But here we go. 1970 01:28:24,830 --> 01:28:29,340 Once I select that node from the tree, I want to get its value and set it-- 1971 01:28:29,340 --> 01:28:32,750 I want to get its value, semicolon. 1972 01:28:32,750 --> 01:28:33,680 What is going on? 1973 01:28:33,680 --> 01:28:38,420 First, recall from this tree here that whenever the browser loads HTML, 1974 01:28:38,420 --> 01:28:39,590 it has some HTML. 1975 01:28:39,590 --> 01:28:41,660 It builds a tree structure therein. 1976 01:28:41,660 --> 01:28:47,210 Each of those nodes is selectable via this function called querySelector. 1977 01:28:47,210 --> 01:28:48,110 What is document? 1978 01:28:48,110 --> 01:28:49,818 Well, it turns out in JavaScript, there's 1979 01:28:49,818 --> 01:28:51,950 this special global variable called document 1980 01:28:51,950 --> 01:28:54,590 that refers to the whole document, the whole web page. 1981 01:28:54,590 --> 01:28:58,220 Built into that is a function called querySelector. 1982 01:28:58,220 --> 01:29:02,940 That dot notation is reminiscent of C's struct syntax. 1983 01:29:02,940 --> 01:29:06,710 So you can think of document as a struct that represents the whole page. 1984 01:29:06,710 --> 01:29:09,210 Inside of it is a function, not just data, 1985 01:29:09,210 --> 01:29:11,150 but a function, called querySelector. 1986 01:29:11,150 --> 01:29:13,850 You're going to see this all over the place in JavaScript, dots, 1987 01:29:13,850 --> 01:29:17,060 because people-- the JavaScript world is much more voluminous than C. 1988 01:29:17,060 --> 01:29:21,230 So there's lots of functions inside of other containers or structures. 1989 01:29:21,230 --> 01:29:24,020 So with that said, this is just saying, hey, browser, 1990 01:29:24,020 --> 01:29:26,930 let me have a variable called name and store 1991 01:29:26,930 --> 01:29:31,910 the value of the node that has a unique identifier of name 1992 01:29:31,910 --> 01:29:34,310 and get that by using this function, select it. 1993 01:29:34,310 --> 01:29:37,100 That grabs the rectangle from the picture 1994 01:29:37,100 --> 01:29:40,344 and gives me access to the value that the human typed in. 1995 01:29:40,344 --> 01:29:41,510 Now, I'm not done with this. 1996 01:29:41,510 --> 01:29:43,520 I need to actually display that value. 1997 01:29:43,520 --> 01:29:45,590 And it's not going to be correct to do this. 1998 01:29:45,590 --> 01:29:48,390 Otherwise, I'm just going to see "hello, name." 1999 01:29:48,390 --> 01:29:51,860 So there's not this convention, which we had in C. There's 2000 01:29:51,860 --> 01:29:52,932 another way to do this. 2001 01:29:52,932 --> 01:29:54,890 But I'm going to go ahead and do it as follows. 2002 01:29:54,890 --> 01:29:57,300 I'm just going to use concatenation. 2003 01:29:57,300 --> 01:30:01,520 So this is not possible in C. But in JavaScript, 2004 01:30:01,520 --> 01:30:04,760 if you have a string on the left and a string on the right, 2005 01:30:04,760 --> 01:30:07,910 using plus will not add them together, which would make no sense. 2006 01:30:07,910 --> 01:30:12,360 It will concatenate them, like glue one to the other. 2007 01:30:12,360 --> 01:30:14,110 In C, how would you do this? 2008 01:30:14,110 --> 01:30:15,640 It is an utter nightmare. 2009 01:30:15,640 --> 01:30:16,830 In C, how would you do this? 2010 01:30:16,830 --> 01:30:20,260 This would be an array of characters on the left that 2011 01:30:20,260 --> 01:30:22,030 has a null character at the end. 2012 01:30:22,030 --> 01:30:23,920 This would be another array of characters 2013 01:30:23,920 --> 01:30:26,090 on the right with a null character at the end. 2014 01:30:26,090 --> 01:30:28,630 Neither is big enough to fit the other as well. 2015 01:30:28,630 --> 01:30:31,480 So you'd have to allocate a new array of characters, 2016 01:30:31,480 --> 01:30:36,760 copy these in, get rid of the backslash 0, copy these in, keep the backslash 0, 2017 01:30:36,760 --> 01:30:38,270 throw those away. 2018 01:30:38,270 --> 01:30:40,180 And then you have concatenated strings. 2019 01:30:40,180 --> 01:30:42,010 That is so many damn steps in C. And this 2020 01:30:42,010 --> 01:30:46,750 is why no one likes programming in C. And you don't have to do it anymore. 2021 01:30:46,750 --> 01:30:49,210 In JavaScript, just use the plus operator. 2022 01:30:49,210 --> 01:30:50,850 That does all of that for you. 2023 01:30:50,850 --> 01:30:54,010 But hopefully, you do have an underlying appreciation of what the plus 2024 01:30:54,010 --> 01:30:56,007 operator is actually doing underneath the hood 2025 01:30:56,007 --> 01:30:58,090 because the computer is still doing the same work. 2026 01:30:58,090 --> 01:31:02,080 The difference is this week onward, we, the human, do less of that work 2027 01:31:02,080 --> 01:31:03,040 ourselves. 2028 01:31:03,040 --> 01:31:06,020 So plus is an abstraction for all of that complexity. 2029 01:31:06,020 --> 01:31:09,120 So if I didn't mess this up, let me go ahead and save now. 2030 01:31:09,120 --> 01:31:13,780 I'll go to the browser, reload, and type in my name, David. 2031 01:31:13,780 --> 01:31:14,904 Submit. 2032 01:31:14,904 --> 01:31:15,820 And there we have it-- 2033 01:31:15,820 --> 01:31:16,810 hello, David. 2034 01:31:16,810 --> 01:31:17,950 Let's do one more test. 2035 01:31:17,950 --> 01:31:19,780 We'll try, say, Veronica. 2036 01:31:19,780 --> 01:31:20,860 Submit. 2037 01:31:20,860 --> 01:31:21,739 And voila. 2038 01:31:21,739 --> 01:31:24,280 You'll notice that it's trying to be helpful now, my browser. 2039 01:31:24,280 --> 01:31:27,703 If I start D, then it sees autocomplete, or V-- 2040 01:31:27,703 --> 01:31:29,690 well, forgot about Veronica, apparently. 2041 01:31:29,690 --> 01:31:32,340 Veronica-- let's see if we reload. 2042 01:31:32,340 --> 01:31:34,700 V-- that's weird. 2043 01:31:34,700 --> 01:31:37,900 Don't tell Veronica Chrome doesn't remember her. 2044 01:31:37,900 --> 01:31:41,572 But we can turn that feature off-- is the point-- 2045 01:31:41,572 --> 01:31:43,030 by actually doing things like this. 2046 01:31:43,030 --> 01:31:44,988 And you would know this from the online manual. 2047 01:31:44,988 --> 01:31:47,440 Autocomplete equals off turns off that feature. 2048 01:31:47,440 --> 01:31:49,210 Autofocus also does something handy. 2049 01:31:49,210 --> 01:31:52,060 If you've ever been to a web page and you can just start typing, 2050 01:31:52,060 --> 01:31:54,010 Chrome and macOS highlights it in blue. 2051 01:31:54,010 --> 01:31:55,630 That just means give focus. 2052 01:31:55,630 --> 01:31:56,801 Put the cursor there. 2053 01:31:56,801 --> 01:31:59,050 If you don't have that, the web page starts like this. 2054 01:31:59,050 --> 01:32:01,939 And we've all visited websites, and I think my.hardvard's among them, 2055 01:32:01,939 --> 01:32:03,730 where you have to stupidly click there just 2056 01:32:03,730 --> 01:32:05,188 to start interacting with the page. 2057 01:32:05,188 --> 01:32:06,120 That is not necessary. 2058 01:32:06,120 --> 01:32:07,540 That's bad programming. 2059 01:32:07,540 --> 01:32:11,560 Just using the tags can fix that kind of thing. 2060 01:32:11,560 --> 01:32:12,520 Questions? 2061 01:32:12,520 --> 01:32:15,262 AUDIENCE: What if we have two IDs with the same name? 2062 01:32:15,262 --> 01:32:17,720 DAVID J. MALAN: What if we have two IDs with the same name? 2063 01:32:17,720 --> 01:32:18,500 You should not. 2064 01:32:18,500 --> 01:32:19,460 That is human error. 2065 01:32:19,460 --> 01:32:21,660 An ID, by definition, must be unique. 2066 01:32:21,660 --> 01:32:26,690 And if you have two by the same name, the human messed up. 2067 01:32:26,690 --> 01:32:27,524 And what it does-- 2068 01:32:27,524 --> 01:32:28,940 I don't know what the behavior is. 2069 01:32:28,940 --> 01:32:32,450 It's probably unofficially not documented or maybe it picks the first. 2070 01:32:32,450 --> 01:32:33,500 Maybe it picks the last. 2071 01:32:33,500 --> 01:32:33,950 I don't know. 2072 01:32:33,950 --> 01:32:35,491 But you shouldn't rely on it, anyway. 2073 01:32:35,491 --> 01:32:36,100 Good question. 2074 01:32:36,100 --> 01:32:36,830 Good corner case. 2075 01:32:36,830 --> 01:32:37,890 Other questions? 2076 01:32:37,890 --> 01:32:40,600 2077 01:32:40,600 --> 01:32:42,200 Let me jump ahead to one example. 2078 01:32:42,200 --> 01:32:45,110 And then we'll come back to a fancier version of this. 2079 01:32:45,110 --> 01:32:49,330 Let me open up a program that's in today's source 5 2080 01:32:49,330 --> 01:32:51,730 directory called background.html. 2081 01:32:51,730 --> 01:32:56,530 It's got some familiar letters, which probably stand for red, green, blue, 2082 01:32:56,530 --> 01:32:57,130 probably. 2083 01:32:57,130 --> 01:32:58,292 These are three buttons. 2084 01:32:58,292 --> 01:32:59,250 And we've seen buttons. 2085 01:32:59,250 --> 01:33:02,650 We saw the Search button and the Submit buttons that I've created before. 2086 01:33:02,650 --> 01:33:05,680 But using JavaScript, I can do fun things like this. 2087 01:33:05,680 --> 01:33:09,130 If I click on R, the web page just changed. 2088 01:33:09,130 --> 01:33:13,030 G, B, R, G, B-- this is now interactive. 2089 01:33:13,030 --> 01:33:16,450 If you were just writing HTML and CSS, you'd have to pick one of those colors 2090 01:33:16,450 --> 01:33:17,630 and stick with it. 2091 01:33:17,630 --> 01:33:19,850 But with JavaScript, you can respond. 2092 01:33:19,850 --> 01:33:21,970 And that's because a browser has lots and lots 2093 01:33:21,970 --> 01:33:24,130 of events happening all the time. 2094 01:33:24,130 --> 01:33:30,550 Events include clicks or mice moving or dragging or, in a mobile device, 2095 01:33:30,550 --> 01:33:31,240 touching. 2096 01:33:31,240 --> 01:33:34,450 So there's lots of things that a human can be doing with a web browser. 2097 01:33:34,450 --> 01:33:38,710 And you can write code that responds to all of those kinds of events. 2098 01:33:38,710 --> 01:33:43,330 And so let me actually go ahead and open up background.html 2099 01:33:43,330 --> 01:33:45,070 and show how this is working. 2100 01:33:45,070 --> 01:33:47,840 So for the most part, it's just HTML at first. 2101 01:33:47,840 --> 01:33:52,014 Here's the html tag, the head tag, the body tag, and three new tags. 2102 01:33:52,014 --> 01:33:53,680 This is another way of creating buttons. 2103 01:33:53,680 --> 01:33:55,300 And again, this isn't interesting. 2104 01:33:55,300 --> 01:33:57,342 You learn this in the online reference or manual. 2105 01:33:57,342 --> 01:33:59,425 And it just tells you, here's how to use a button. 2106 01:33:59,425 --> 01:34:02,410 It follows the same paradigm-- tag name, attribute equals value. 2107 01:34:02,410 --> 01:34:04,930 The label is just going to be R, G, and B. 2108 01:34:04,930 --> 01:34:08,560 And now this is where things get a little scary-looking at first. 2109 01:34:08,560 --> 01:34:09,550 But that's it. 2110 01:34:09,550 --> 01:34:13,520 There's just lines of code here inside of the web page. 2111 01:34:13,520 --> 01:34:15,340 Now, let's walk through this line by line, 2112 01:34:15,340 --> 01:34:17,860 even though it's a little verbose at first. 2113 01:34:17,860 --> 01:34:20,560 So this first line here says, hey, browser, 2114 01:34:20,560 --> 01:34:22,480 give me a variable called body. 2115 01:34:22,480 --> 01:34:24,910 And store, in that variable, the node-- 2116 01:34:24,910 --> 01:34:27,130 the rectangle, so to speak-- 2117 01:34:27,130 --> 01:34:28,605 that has the name body. 2118 01:34:28,605 --> 01:34:30,730 So that is, pluck that rectangle out of the picture 2119 01:34:30,730 --> 01:34:32,270 so that I have direct access to it. 2120 01:34:32,270 --> 01:34:34,880 Why-- because I'm going to manipulate it in just a moment. 2121 01:34:34,880 --> 01:34:37,930 This is the scariest the JavaScript will look for now. 2122 01:34:37,930 --> 01:34:41,500 Document.querySelector hash red-- could someone 2123 01:34:41,500 --> 01:34:44,360 translate that into just English? 2124 01:34:44,360 --> 01:34:47,540 What's that doing for me? 2125 01:34:47,540 --> 01:34:49,965 AUDIENCE: Giving the ID of red that you just-- 2126 01:34:49,965 --> 01:34:50,840 DAVID J. MALAN: Yeah. 2127 01:34:50,840 --> 01:34:53,960 Be a little more verbose. 2128 01:34:53,960 --> 01:34:56,400 Someone else? 2129 01:34:56,400 --> 01:35:02,040 Hey, browser, select for me the node whose unique ID is red. 2130 01:35:02,040 --> 01:35:02,730 That's fine. 2131 01:35:02,730 --> 01:35:06,180 Give me access to that node, the structure in memory. 2132 01:35:06,180 --> 01:35:08,410 And this is where it's a little weird. 2133 01:35:08,410 --> 01:35:14,536 So it turns out that every tag in a web page or node in a tree-- 2134 01:35:14,536 --> 01:35:15,660 the DOM tree, so to speak-- 2135 01:35:15,660 --> 01:35:20,064 Document Object Model-- can have event listeners associated with it. 2136 01:35:20,064 --> 01:35:22,230 And you would only know this from the documentation. 2137 01:35:22,230 --> 01:35:24,870 But if you literally say, go into this structure, 2138 01:35:24,870 --> 01:35:28,440 this node, that represents the red button 2139 01:35:28,440 --> 01:35:33,330 and get its on-click value, what's cool with JavaScript, 2140 01:35:33,330 --> 01:35:35,460 even though the syntax is a little scary-looking, 2141 01:35:35,460 --> 01:35:38,710 is you can associate a function with that event. 2142 01:35:38,710 --> 01:35:42,870 So this is saying, hey, browser, when the red button is clicked on, 2143 01:35:42,870 --> 01:35:45,060 call the following function. 2144 01:35:45,060 --> 01:35:48,630 And what's new in JavaScript here is that this function, at the moment, 2145 01:35:48,630 --> 01:35:50,580 has no name, which is weird. 2146 01:35:50,580 --> 01:35:53,910 You could technically do this in C. But we always gave our functions names. 2147 01:35:53,910 --> 01:35:56,040 But you don't really need to give a function a name 2148 01:35:56,040 --> 01:35:59,100 if you don't need to mention it ever again. 2149 01:35:59,100 --> 01:36:01,700 And the detail that's happening here for us is this. 2150 01:36:01,700 --> 01:36:05,349 This says, hey, browser, on click, call this function. 2151 01:36:05,349 --> 01:36:06,765 What does that mean in real terms? 2152 01:36:06,765 --> 01:36:09,120 Hey, browser, call all of the lines of code 2153 01:36:09,120 --> 01:36:12,327 in between this open curly brace and this close curly brace. 2154 01:36:12,327 --> 01:36:14,160 So even if you're not comfy with the syntax, 2155 01:36:14,160 --> 01:36:16,830 it just literally means execute the following lines of code 2156 01:36:16,830 --> 01:36:18,880 when this button is clicked. 2157 01:36:18,880 --> 01:36:22,290 This is what's known as an anonymous function insofar as it has no name. 2158 01:36:22,290 --> 01:36:24,570 It's just function, open paren, close paren. 2159 01:36:24,570 --> 01:36:28,050 So you can probably infer what it's doing on this line here. 2160 01:36:28,050 --> 01:36:30,270 Let me highlight this line in blue. 2161 01:36:30,270 --> 01:36:31,200 It's a little cryptic. 2162 01:36:31,200 --> 01:36:34,800 And again, I promise that you're going to see lots of these dots. 2163 01:36:34,800 --> 01:36:38,550 But this is saying, hey, browser, modify the body, 2164 01:36:38,550 --> 01:36:42,060 or specifically, the style of the body, and specifically, 2165 01:36:42,060 --> 01:36:48,210 the background color of the style of the body, to be, of course, red. 2166 01:36:48,210 --> 01:36:52,980 And the rest of the code is copy-paste for now for green and blue as well. 2167 01:36:52,980 --> 01:36:53,974 So what is happening? 2168 01:36:53,974 --> 01:36:55,890 Every time you click on one of those buttons-- 2169 01:36:55,890 --> 01:36:57,990 R or G or B-- 2170 01:36:57,990 --> 01:37:02,490 literally, this line of code is getting executed that I've just highlighted 2171 01:37:02,490 --> 01:37:05,880 or this line of code is getting executed or this line of code 2172 01:37:05,880 --> 01:37:06,990 is getting executed. 2173 01:37:06,990 --> 01:37:09,240 So even though the syntax is, yes, admittedly, way 2174 01:37:09,240 --> 01:37:13,170 more complicated than we've seen thus far, the idea is relatively simple. 2175 01:37:13,170 --> 01:37:14,490 Select the button. 2176 01:37:14,490 --> 01:37:17,359 Tell it, on clicking, to call this function. 2177 01:37:17,359 --> 01:37:19,650 And it's fine early on if you just copy and paste this. 2178 01:37:19,650 --> 01:37:22,660 And for Pset5, you won't have to use any of this code. 2179 01:37:22,660 --> 01:37:25,440 This is in-- preemptive look at what you can 2180 01:37:25,440 --> 01:37:31,560 do with an eye toward fancier features, like final projects and beyond. 2181 01:37:31,560 --> 01:37:34,451 Any questions then on this background example? 2182 01:37:34,451 --> 01:37:34,950 Yeah? 2183 01:37:34,950 --> 01:37:40,240 AUDIENCE: Why did we use the pound symbol for red, green, blue, and not 2184 01:37:40,240 --> 01:37:41,010 for body? 2185 01:37:41,010 --> 01:37:41,430 DAVID J. MALAN: Good question. 2186 01:37:41,430 --> 01:37:44,830 Why do we use the pound symbol for red, green, and blue, but not for body? 2187 01:37:44,830 --> 01:37:47,400 If you look at the HTML, you'll see the following. 2188 01:37:47,400 --> 01:37:49,380 Body is, apparently, the name of a tag. 2189 01:37:49,380 --> 01:37:53,550 So that's why we just selected "body" with that line of code around here. 2190 01:37:53,550 --> 01:37:56,430 However, red, green, and blue are not the names of tags. 2191 01:37:56,430 --> 01:37:59,409 They are the unique identifiers, values that I just came up with. 2192 01:37:59,409 --> 01:38:00,700 I could have called it x, y, z. 2193 01:38:00,700 --> 01:38:02,370 But I chose more descriptive terms. 2194 01:38:02,370 --> 01:38:04,320 So whenever you want to reference or select 2195 01:38:04,320 --> 01:38:08,950 a node who-- that has an identifier, you use the hash instead. 2196 01:38:08,950 --> 01:38:09,450 That's all. 2197 01:38:09,450 --> 01:38:12,116 These are just human conventions that are non-obvious unless you 2198 01:38:12,116 --> 01:38:14,310 were told what they all mean. 2199 01:38:14,310 --> 01:38:16,740 Let's try one other example with JavaScript. 2200 01:38:16,740 --> 01:38:19,620 It's not uncommon on news websites to have the ability 2201 01:38:19,620 --> 01:38:21,865 to change the font size, which you can, actually, 2202 01:38:21,865 --> 01:38:24,240 do on your Mac and PC sometimes using keyboard shortcuts. 2203 01:38:24,240 --> 01:38:26,590 But sometimes, it's built into the web page itself. 2204 01:38:26,590 --> 01:38:30,020 Let me go into, for instance, size.html. 2205 01:38:30,020 --> 01:38:32,940 And here's some Latin text or Latin-like text. 2206 01:38:32,940 --> 01:38:34,910 And notice that it has a little select menu. 2207 01:38:34,910 --> 01:38:37,410 Normally, when you have a select menu, you select something. 2208 01:38:37,410 --> 01:38:38,460 And then you click Submit. 2209 01:38:38,460 --> 01:38:39,876 And then the server deals with it. 2210 01:38:39,876 --> 01:38:41,280 The information goes somewhere. 2211 01:38:41,280 --> 01:38:42,610 But you don't need to do that. 2212 01:38:42,610 --> 01:38:46,380 You can actually make little menus interactive, just like text boxes. 2213 01:38:46,380 --> 01:38:48,930 Suppose I want to make this text a little smaller. 2214 01:38:48,930 --> 01:38:49,830 I can do that. 2215 01:38:49,830 --> 01:38:51,630 I can choose extra small. 2216 01:38:51,630 --> 01:38:55,950 I can do extra-extra small or I can do extra-extra large. 2217 01:38:55,950 --> 01:38:57,490 And so what's going on here? 2218 01:38:57,490 --> 01:38:59,970 Well, just like there are click events in a browser, 2219 01:38:59,970 --> 01:39:02,970 there are also change events or selection events. 2220 01:39:02,970 --> 01:39:06,090 Just anything that can happen on the web page you can listen for. 2221 01:39:06,090 --> 01:39:08,940 So let's take a look at this code, for instance. 2222 01:39:08,940 --> 01:39:10,486 We've not seen this tag before. 2223 01:39:10,486 --> 01:39:11,610 But we have seen paragraph. 2224 01:39:11,610 --> 01:39:13,440 And there's a paragraph of Latin. 2225 01:39:13,440 --> 01:39:16,125 And then there's a select tag, which gives you a select menu. 2226 01:39:16,125 --> 01:39:18,720 A dropdown menu is called a select menu in HTML. 2227 01:39:18,720 --> 01:39:20,650 And here's how you have all of the options. 2228 01:39:20,650 --> 01:39:22,149 Now, there is a bit of duality here. 2229 01:39:22,149 --> 01:39:26,160 There's what the human sees, which is between the open tag and close tag. 2230 01:39:26,160 --> 01:39:29,430 And then there's this value, which the computer sees-- but more on that 2231 01:39:29,430 --> 01:39:31,080 another time, when we get to Python. 2232 01:39:31,080 --> 01:39:34,000 But this just gives me that whole menu of size options. 2233 01:39:34,000 --> 01:39:37,380 And if I scroll down now, notice I have a script tag down here. 2234 01:39:37,380 --> 01:39:41,400 And in this script tag, I have document.querySelector "select" 2235 01:39:41,400 --> 01:39:45,510 because I want to select the name, the tag whose name is select. 2236 01:39:45,510 --> 01:39:47,094 And then there's this event, onchange. 2237 01:39:47,094 --> 01:39:49,093 And you'd only know this from the documentation. 2238 01:39:49,093 --> 01:39:51,930 But like onsubmit, onchange is called any time you change that menu. 2239 01:39:51,930 --> 01:39:53,550 What function should get called? 2240 01:39:53,550 --> 01:39:56,060 Well, this one here, which is an anonymous in the sense 2241 01:39:56,060 --> 01:39:57,440 that it has no name. 2242 01:39:57,440 --> 01:39:59,130 And go ahead and do this. 2243 01:39:59,130 --> 01:40:01,940 Select from the document the body tag. 2244 01:40:01,940 --> 01:40:03,650 Get access to its style. 2245 01:40:03,650 --> 01:40:09,110 And change its font size to, and this is funky here, this.value. 2246 01:40:09,110 --> 01:40:11,960 So what did I do here? 2247 01:40:11,960 --> 01:40:19,130 Let me do this, no pun intended. 2248 01:40:19,130 --> 01:40:24,170 This refers to whatever element in the web page 2249 01:40:24,170 --> 01:40:28,340 induced this function to be called. 2250 01:40:28,340 --> 01:40:31,280 So this is-- you can think of as a variable, a special variable, that 2251 01:40:31,280 --> 01:40:34,700 always refers to whatever element you are listening to. 2252 01:40:34,700 --> 01:40:37,880 And so this.value just saves me some keystrokes because I don't-- you need 2253 01:40:37,880 --> 01:40:42,920 to use document.querySelector to get at this select menu. 2254 01:40:42,920 --> 01:40:47,290 But we'll see this again, perhaps, down the road. 2255 01:40:47,290 --> 01:40:48,730 Questions? 2256 01:40:48,730 --> 01:40:51,160 And let me point out one thing that's stupid. 2257 01:40:51,160 --> 01:40:54,470 This here, fontSize, looks different from CSS. 2258 01:40:54,470 --> 01:40:55,720 In CSS, what did we call this? 2259 01:40:55,720 --> 01:40:59,870 2260 01:40:59,870 --> 01:41:01,800 Do you remember? 2261 01:41:01,800 --> 01:41:05,250 We did font size small, medium, large. 2262 01:41:05,250 --> 01:41:08,100 It was font-size. 2263 01:41:08,100 --> 01:41:10,157 So this was left hand not talking to right hand 2264 01:41:10,157 --> 01:41:11,490 when these things were invented. 2265 01:41:11,490 --> 01:41:16,260 It turns out that dash is JavaScript means what, maybe? 2266 01:41:16,260 --> 01:41:17,730 Minus or subtraction. 2267 01:41:17,730 --> 01:41:20,910 And so this syntax just breaks in the context of JavaScript. 2268 01:41:20,910 --> 01:41:21,930 So what did humans do? 2269 01:41:21,930 --> 01:41:25,200 They decided that any time you have a CSS property that's word, 2270 01:41:25,200 --> 01:41:27,420 dash, something, get rid of the dash. 2271 01:41:27,420 --> 01:41:29,010 Capitalize the next word. 2272 01:41:29,010 --> 01:41:31,890 And that's now the mapping in JavaScript-- so just a simple heuristic 2273 01:41:31,890 --> 01:41:34,540 there that you can perhaps keep in mind. 2274 01:41:34,540 --> 01:41:38,230 Let's take a look, perhaps, at one final value-- 2275 01:41:38,230 --> 01:41:40,860 oh, how about two final values? 2276 01:41:40,860 --> 01:41:44,280 Let's go ahead and do this with blink.html. 2277 01:41:44,280 --> 01:41:47,880 So back in the day, when the web was first being invented 2278 01:41:47,880 --> 01:41:51,180 and HTML was in its infancy, there was a wonderful tag 2279 01:41:51,180 --> 01:41:53,190 that was probably on my own personal home page 2280 01:41:53,190 --> 01:41:55,650 called blink that literally did that. 2281 01:41:55,650 --> 01:41:59,400 You could have a tag that was open bracket, B-L-I-N-K, close bracket, 2282 01:41:59,400 --> 01:42:03,240 put some words, then close the tag, and then your web page would just do this 2283 01:42:03,240 --> 01:42:05,700 to all visitors, which humans eventually realized, well, 2284 01:42:05,700 --> 01:42:10,370 this is dumb and really annoying to look at-- bad user experience, or UX. 2285 01:42:10,370 --> 01:42:11,580 And so they took it away. 2286 01:42:11,580 --> 01:42:14,670 It's one of the few tags, I think, from HTML that was actually removed 2287 01:42:14,670 --> 01:42:16,310 by committee, as opposed to added. 2288 01:42:16,310 --> 01:42:20,130 There was also marquee at the time, too, that-- like a theater sign would just 2289 01:42:20,130 --> 01:42:22,650 scroll words across your page. 2290 01:42:22,650 --> 01:42:26,110 So you've probably seen websites like this that recreate them in some way. 2291 01:42:26,110 --> 01:42:27,960 But you can do this with JavaScript. 2292 01:42:27,960 --> 01:42:31,050 Think about this logically. 2293 01:42:31,050 --> 01:42:33,604 We know how, in code, we can change the style of an element. 2294 01:42:33,604 --> 01:42:35,020 We've not seen how to do this yet. 2295 01:42:35,020 --> 01:42:39,300 But you can make an element show or hide, show or hide. 2296 01:42:39,300 --> 01:42:41,610 Turns out in JavaScript, you can use a timer. 2297 01:42:41,610 --> 01:42:42,735 You have access to a clock. 2298 01:42:42,735 --> 01:42:45,193 And you could actually write code that says, you know what? 2299 01:42:45,193 --> 01:42:46,800 Every half-second, call this function. 2300 01:42:46,800 --> 01:42:47,760 Call this function. 2301 01:42:47,760 --> 01:42:48,559 Call this function. 2302 01:42:48,559 --> 01:42:49,350 Call this function. 2303 01:42:49,350 --> 01:42:53,100 And what that function does is it changes the style of the page 2304 01:42:53,100 --> 01:42:56,192 to hide or show, hide or show. 2305 01:42:56,192 --> 01:42:57,900 Now, this used to be built into browsers. 2306 01:42:57,900 --> 01:43:00,210 But now you can recreate it with something like that. 2307 01:43:00,210 --> 01:43:02,230 And I'll wave my hand at what the code is. 2308 01:43:02,230 --> 01:43:04,110 But that's just one feature there. 2309 01:43:04,110 --> 01:43:08,070 Let's look at one final example, though, that's a little creepy. 2310 01:43:08,070 --> 01:43:10,090 Here's the code first. 2311 01:43:10,090 --> 01:43:12,030 And this is called geolocation. 2312 01:43:12,030 --> 01:43:15,240 This is all the rage now with apps like Uber and Waze 2313 01:43:15,240 --> 01:43:18,240 and Find My Friends on iPhone and the like. 2314 01:43:18,240 --> 01:43:20,850 Here is relatively little code that will figure out 2315 01:43:20,850 --> 01:43:22,702 where your user is in the world. 2316 01:43:22,702 --> 01:43:24,160 Now, it's a bit of a mouthful here. 2317 01:43:24,160 --> 01:43:28,110 But it's mostly this file, html with a script tag. 2318 01:43:28,110 --> 01:43:30,375 But there's this other special global variable. 2319 01:43:30,375 --> 01:43:31,500 And we won't use this much. 2320 01:43:31,500 --> 01:43:34,050 And indeed, you might not ever use it if you don't care about this feature. 2321 01:43:34,050 --> 01:43:36,660 But it's called navigator, for historical reasons. 2322 01:43:36,660 --> 01:43:39,060 And navigator has a feature called geolocation. 2323 01:43:39,060 --> 01:43:42,210 And geolocation, which stands for locate people geographically, 2324 01:43:42,210 --> 01:43:45,052 has a function called getCurrentPosition. 2325 01:43:45,052 --> 01:43:46,760 And for reasons we won't really get into, 2326 01:43:46,760 --> 01:43:48,180 it takes a function as an argument. 2327 01:43:48,180 --> 01:43:49,929 This is a very common JavaScript paradigm, 2328 01:43:49,929 --> 01:43:52,290 but more on this toward final projects, perhaps. 2329 01:43:52,290 --> 01:43:56,220 This line of code is going to write to the document the user's 2330 01:43:56,220 --> 01:44:00,000 latitude and, if we scroll to the right, their longitude. 2331 01:44:00,000 --> 01:44:01,680 So this is where it gets creepy. 2332 01:44:01,680 --> 01:44:06,180 So if you were to use this code in your websites and a user were to visit, 2333 01:44:06,180 --> 01:44:09,980 like I will now, and they click the link, they will be prompted, 2334 01:44:09,980 --> 01:44:12,060 do you want the website to know your location? 2335 01:44:12,060 --> 01:44:13,320 Sometimes, you might say yes. 2336 01:44:13,320 --> 01:44:14,310 Sometimes, you might say no. 2337 01:44:14,310 --> 01:44:16,470 Frankly, most of us probably just click Allow instinctively 2338 01:44:16,470 --> 01:44:17,928 without really thinking about this. 2339 01:44:17,928 --> 01:44:20,460 But there's where I am, apparently. 2340 01:44:20,460 --> 01:44:22,290 Let me go ahead and highlight that. 2341 01:44:22,290 --> 01:44:26,250 Let me go to maps.google.com because whatever website you just visited, 2342 01:44:26,250 --> 01:44:28,377 whether it's Facebook or CNN or-- 2343 01:44:28,377 --> 01:44:30,460 a lot of news websites want to know where you are. 2344 01:44:30,460 --> 01:44:33,427 If you go to like, what, fandango.com or the like for movie tickets, 2345 01:44:33,427 --> 01:44:35,010 they might want to know where you are. 2346 01:44:35,010 --> 01:44:37,140 Well, you're giving them very precise information. 2347 01:44:37,140 --> 01:44:40,710 If I go ahead and search for these GPS coordinates on Google, 2348 01:44:40,710 --> 01:44:43,960 that's not where I am. 2349 01:44:43,960 --> 01:44:45,121 What the hell? 2350 01:44:45,121 --> 01:44:48,311 [LAUGHTER] 2351 01:44:48,311 --> 01:44:48,810 2352 01:44:48,810 --> 01:44:50,160 Why are we in Oklahoma? 2353 01:44:50,160 --> 01:44:52,152 [LAUGHTER] 2354 01:44:52,152 --> 01:45:00,120 2355 01:45:00,120 --> 01:45:03,206 I don't understand what's going on. 2356 01:45:03,206 --> 01:45:04,830 This was not part of the demonstration. 2357 01:45:04,830 --> 01:45:06,329 This was going to be the big climax. 2358 01:45:06,329 --> 01:45:08,170 Let's turn off the wired internet in here. 2359 01:45:08,170 --> 01:45:11,550 And apparently, we're going through Oklahoma today. 2360 01:45:11,550 --> 01:45:14,190 Let's turn on the Wi-Fi, which will just give me 2361 01:45:14,190 --> 01:45:16,830 a different IP address, which is a wonderful way to tie 2362 01:45:16,830 --> 01:45:18,540 the start of the lecture together. 2363 01:45:18,540 --> 01:45:21,150 If I wait a second, it should go green. 2364 01:45:21,150 --> 01:45:22,510 Come on-- no IP address. 2365 01:45:22,510 --> 01:45:24,468 Now these words might make a little more sense. 2366 01:45:24,468 --> 01:45:25,140 Come on. 2367 01:45:25,140 --> 01:45:26,550 Give me an IP address. 2368 01:45:26,550 --> 01:45:28,800 Come on. 2369 01:45:28,800 --> 01:45:30,270 Harvard-- there we go. 2370 01:45:30,270 --> 01:45:31,630 There's my IP address. 2371 01:45:31,630 --> 01:45:32,230 Let's reload. 2372 01:45:32,230 --> 01:45:36,442 2373 01:45:36,442 --> 01:45:39,346 [LAUGHTER] 2374 01:45:39,346 --> 01:45:40,650 2375 01:45:40,650 --> 01:45:43,020 We'll email the IT people about this later. 2376 01:45:43,020 --> 01:45:45,210 But all of my internet-- 2377 01:45:45,210 --> 01:45:47,300 what this means is my-- 2378 01:45:47,300 --> 01:45:49,012 no, this is really weird. 2379 01:45:49,012 --> 01:45:51,220 We have a lot of footage to cut out of today's video. 2380 01:45:51,220 --> 01:45:56,100 So what this does is, with low probability, 2381 01:45:56,100 --> 01:45:59,220 tell you where your users are in terms of latitude and longitude 2382 01:45:59,220 --> 01:46:02,610 so that you could geolocate them, figure out what the local movie theaters are 2383 01:46:02,610 --> 01:46:04,170 or what the starting times of stores are, 2384 01:46:04,170 --> 01:46:06,044 give them directions to places, and the like. 2385 01:46:06,044 --> 01:46:08,880 And while that was supposed to be the big climactic finish, 2386 01:46:08,880 --> 01:46:10,320 apparently, none of this works. 2387 01:46:10,320 --> 01:46:11,550 Today was completely wrong. 2388 01:46:11,550 --> 01:46:12,399 We're in Oklahoma. 2389 01:46:12,399 --> 01:46:13,440 But let's end here today. 2390 01:46:13,440 --> 01:46:14,773 I'll stick around for questions. 2391 01:46:14,773 --> 01:46:16,610 We'll see you next time. 2392 01:46:16,610 --> 01:46:18,497