CS50 Video Player
    • 🧁
      • 🥧
      • 🍎
      • 🍿
    • 0:00:00Introduction
    • 0:01:01Bingo Board
    • 0:01:51The Internet
    • 0:06:37TCP/IP
    • 0:14:25Ports
    • 0:18:05DNS
    • 0:21:20DHCP
    • 0:23:35HTTP
    • 0:36:30Inspect
    • 0:43:01Status Codes
    • 0:45:24HTML
    • 1:30:54Harvard Pep Squad Prank
    • 1:33:47Regular Expressions
    • 1:44:02CSS
    • 2:02:19Bootstrap
    • 2:09:31JavaScript
    • 2:22:33Autocomplete
    • 2:26:20Geolocation
    • 0:00:00[MUSIC PLAYING]
    • 0:01:02DAVID MALAN: All right.
    • 0:01:03This is CS50.
    • 0:01:04And this is already Week 8.
    • 0:01:06But this is a CS50 bingo board from one of your classmates at Yale, Shoshannah,
    • 0:01:11kindly sent this to us.
    • 0:01:12And she's apparently been taking close notice of certain expressions
    • 0:01:16that I apparently tend to say quite a bit.
    • 0:01:18Some of which I'm aware of, but not all of them.
    • 0:01:20And the idea here as she described it is that if and when
    • 0:01:24I say any of these expressions on the screen,
    • 0:01:27you can draw a line through that box.
    • 0:01:29And if you get five in a row, you win a fabulous prize.
    • 0:01:32It seems only fair, then, if we maybe give away some cookies today
    • 0:01:35if and when I actually do say five such things in a row.
    • 0:01:38Perhaps it'll be all the more motivation to keep a rapt ear against everything
    • 0:01:43we're talking about today.
    • 0:01:44So if and when that happens, feel free to just yell out bingo.
    • 0:01:48And then please see Carter during the break or after class for adjudication.
    • 0:01:52All right.
    • 0:01:52So today, ultimately though, Week 8 is about the internet and, in turn,
    • 0:01:56how it works and, in fact, how we can start building software on top of it.
    • 0:01:59So up until now, of course, we've experimented with Scratch,
    • 0:02:03spent quite a bit of time with C, only really
    • 0:02:05spent a week plus so far on Python, and about the same on SQL.
    • 0:02:09But ultimately, we're going to come full circle next week
    • 0:02:11and tie all of those languages together.
    • 0:02:13But we're going to do it in the context of the web.
    • 0:02:15And in fact to do that, we're going to introduce
    • 0:02:17three different languages today, but only one of which
    • 0:02:20is a proper programming language.
    • 0:02:22The other two are more about presentation, markup languages,
    • 0:02:25so to speak.
    • 0:02:26And those languages are HTML and CSS, commonly used in conjunction.
    • 0:02:29Some of you might have done this middle school, high school even, if you ever
    • 0:02:32made a personal website of sorts.
    • 0:02:34And JavaScript, a programming language that
    • 0:02:37is very commonly used in the context of browsers
    • 0:02:39to make interfaces that are all the more interactive.
    • 0:02:43But it can also be used server side.
    • 0:02:45And what you'll find that is our goal this week,
    • 0:02:47like last week, like two weeks ago is really to teach you ultimately
    • 0:02:51how to program, how to program procedurally
    • 0:02:54and also with elements of what we'll call functional
    • 0:02:56programming, object-oriented programming,
    • 0:02:58concepts that you'll explore more if you pursue more programming or higher level
    • 0:03:02classes.
    • 0:03:02But at the end of the day, you will exit this class
    • 0:03:05having learned how to program, particularly
    • 0:03:08in a context that's very much in vogue nowadays, be it for the web
    • 0:03:12or be it for mobile devices.
    • 0:03:13And all of the ideas thus far will be applicable as we now
    • 0:03:16begin to build on top of the internet.
    • 0:03:19So what is it?
    • 0:03:20So back in the late '60s and 1970s, it wasn't much of anything.
    • 0:03:23This is an early diagram depicting a few access points
    • 0:03:26on the West Coast of the United States, which represents
    • 0:03:29what was originally called ARPANET.
    • 0:03:30And this was a project from the US Department of Defense
    • 0:03:33to begin to internetwork computers by enabling
    • 0:03:36them to exchange data using what's now known as packets,
    • 0:03:39packets of information back and forth.
    • 0:03:41It wasn't too long before East Coast was eventually connected
    • 0:03:44through MIT, Harvard, and others.
    • 0:03:46And nowadays, fast forward to present day,
    • 0:03:48just a few decades later, everything, it would seem,
    • 0:03:51is somehow interconnected, either with wires or wirelessly.
    • 0:03:54But how do you actually get data from any of these points
    • 0:03:57to any of these other points or all of the points that now exist?
    • 0:04:00Well, let me stipulate, for today's purposes,
    • 0:04:02that the world nowadays is filled with routers,
    • 0:04:04simply computers, servers whose purpose in life is to route information from
    • 0:04:09left to right, top to bottom, geographically,
    • 0:04:11so to speak, to just get data from point A to point B.
    • 0:04:14But typically, you're not going to have a direct connection between points A
    • 0:04:18and B. You might have C, D, E. In other words,
    • 0:04:21you might have many different servers between you and someone else.
    • 0:04:24So if you have a friend at Stanford University
    • 0:04:26and you simply send them an email, well, odds
    • 0:04:29are that email is going to be put inside what we're soon going to call a packet.
    • 0:04:33And that packet might actually pass through the hands, so to speak,
    • 0:04:37of any number of routers, typically more than one or two,
    • 0:04:41but typically fewer than 30 such routers.
    • 0:04:44And it's up to the IT administrators of the world to figure out how
    • 0:04:49to route data between these servers.
    • 0:04:51And we have software nowadays that dynamically figures out the best path.
    • 0:04:54It's not necessarily a straight line, as it
    • 0:04:55might be in the world of mathematics.
    • 0:04:57But hopefully, it's the fastest way to get data from point A to point B.
    • 0:05:01So the teaching fellows, thanks to Zoom, kindly put together in years
    • 0:05:04past a demonstration of this whereby each of the teaching fellows or TAs
    • 0:05:08that you see on the screen here consider representing a router, that
    • 0:05:11is a device on the internet that its purpose in life
    • 0:05:14is to get data, North, South.
    • 0:05:16East, or West, between two points ultimately.
    • 0:05:18And if we assume that Phyllis, for instance,
    • 0:05:20wants to send a packet of information to Brian up here at top left,
    • 0:05:24from bottom right, it turns out that by design the internet can send that data
    • 0:05:29over any number of routes.
    • 0:05:30It can go up and to the left.
    • 0:05:32It can go left and then up.
    • 0:05:33It can double back a little bit.
    • 0:05:35Again, it's not necessarily a straight line.
    • 0:05:37And this is a feature, not a bug.
    • 0:05:39The intent of the internet early on was to be
    • 0:05:41able to route around downed servers.
    • 0:05:44So if one router is overwhelmed, or if one router is offline,
    • 0:05:48the internet can still adapt dynamically and just route it some other direction.
    • 0:05:52So here, for instance, is one representative route
    • 0:05:54that our packets might take.
    • 0:05:56Thanks to the team.
    • 0:05:58[CLASSICAL MUSIC PLAYING]
    • 0:06:26So my thanks to the team.
    • 0:06:27And if you've ever used Zoom before, you know
    • 0:06:29that you don't often see exactly the same layout that someone else sees.
    • 0:06:33So it took us forever to actually get that right.
    • 0:06:35Because no one actually knew to whom they were necessarily passing it.
    • 0:06:38But if all of those TFs and TAs represent routers, well, what is it
    • 0:06:41they were handing?
    • 0:06:42What is it that Phyllis wanted to send to Brian?
    • 0:06:44Well, I've called it generically a packet.
    • 0:06:46And a packet is a generic term for some amount of information.
    • 0:06:49But it's kind of analogous to an envelope in the real world.
    • 0:06:51If you're still in the habit of sending letters or postal mail,
    • 0:06:54you typically put your information inside of an envelope such as this.
    • 0:06:58And then you hand it off to the mail carrier,
    • 0:07:00or you drop it into the mail box.
    • 0:07:01And then humans, in the case of the Postal Service,
    • 0:07:03actually get it from point A to point B.
    • 0:07:06But odds are it goes through different cities, different countries, even.
    • 0:07:09So you can think of that as roughly analogous to these things called
    • 0:07:12routers.
    • 0:07:12But the technical term for what it is the TFs were just doing
    • 0:07:15is they were implementing a protocol that we know as TCP/IP.
    • 0:07:20And this is actually probably a pair of acronyms
    • 0:07:23that you've probably seen, maybe on your Mac, PC, or phone,
    • 0:07:26even if you haven't really thought much about it.
    • 0:07:29But this is actually a pair of protocols, two protocols
    • 0:07:31that the internet generally uses nowadays and has
    • 0:07:35for some time to get data from point A to point B.
    • 0:07:37And let's consider each of these halves so you
    • 0:07:39have a sense of what it is the internet is doing when you do send an email
    • 0:07:43or do anything else.
    • 0:07:45Well, first, IP stands for internet protocol.
    • 0:07:48And you've probably even heard this in popular media, since a lot of humans
    • 0:07:51are indeed familiar with this notion of IP.
    • 0:07:54And they associate it typically with IP addresses, as you might.
    • 0:07:58So I'll stipulate for today that every computer, every internet work
    • 0:08:02device in the world has an IP address, an internet protocol
    • 0:08:06address similar in spirit to buildings in the physical world.
    • 0:08:09Here we are at 45 Quincy Street, Cambridge, Massachusetts, 02138, USA.
    • 0:08:15That is a unique string, theoretically, that uniquely identifies this building.
    • 0:08:20Similarly, in the world of computers, we use a simpler mechanism, just
    • 0:08:23numbers of this format that uniquely represent computers.
    • 0:08:28Now that's a bit of a white lie.
    • 0:08:29Because there's actually a way to share IP addresses.
    • 0:08:32And within your home, often within your dorm, or your apartment,
    • 0:08:35you'll actually have what appears to be the same IP address as your roommates
    • 0:08:39or family members.
    • 0:08:40But for now, let's keep things simple and assume
    • 0:08:42that every Mac, PC, and phone in the world
    • 0:08:44has a unique IP address that's formatted like this, number dot number
    • 0:08:48dot number dot number.
    • 0:08:50Each of these number signs represents a value between 0 and 255.
    • 0:08:55And even though we haven't played around with this kind of arithmetic
    • 0:08:58in some time, if each of these placeholders is 0 through 255,
    • 0:09:02how many bits are being used to represent each number?
    • 0:09:08Think back to Week 0, Week 1.
    • 0:09:09Yeah, so 8, in fact.
    • 0:09:118 bits in total, or 1 byte.
    • 0:09:13So IP addresses are generally 4 bytes or 32 bits.
    • 0:09:17And the other math we kept doing early on is if you've got 4 bytes or 32 bits,
    • 0:09:21that's a maximum of 2 to the 32nd power total number of values.
    • 0:09:25How many IP addresses can you have, it would seem, maximally in the world?
    • 0:09:31Enough.
    • 0:09:31Actually, not enough would be a better answer nowadays.
    • 0:09:34But roughly, 4 billion was the rough math that we typically
    • 0:09:38did anytime 2 to the 32 was involved.
    • 0:09:41But it turns out with all of the humans, and all of the devices, servers,
    • 0:09:45clients, PCs, Macs, phones, and everything else,
    • 0:09:48internet of things devices nowadays, even 4 billion is not quite enough.
    • 0:09:52So the world is gradually in the process of transitioning
    • 0:09:56from this format, which is technically IPv4, version 4, to IPv6.
    • 0:10:01And in the world of IPv6, we've actually bumped things up from 32 bits
    • 0:10:05to 128 bits, which is a crazy number of possible permutations, 2 to the 128.
    • 0:10:11So you'll gradually see that over time.
    • 0:10:13But those are a lot messier of a format because there's so much larger.
    • 0:10:17So we'll use the more commonplace ones IPv4.
    • 0:10:20Now just to get into the weeds briefly, this is some ASCII art.
    • 0:10:24That is, someone wrote this up decades ago in a text
    • 0:10:27file to represent the layout of one of these packets.
    • 0:10:30So think of this as, like, the digital representation of this here envelope.
    • 0:10:34And even though we won't get into the weeds of what this represents,
    • 0:10:38up here you just have some values saying that this is byte 0.
    • 0:10:41This is byte 10.
    • 0:10:42This is byte 20.
    • 0:10:43And this is byte 32, but 0 indexed.
    • 0:10:45So that is to say that this is just kind of an artist's rendition of a grid
    • 0:10:50of bits, top to bottom, left to right.
    • 0:10:52And what's going to be interesting for us today is not most of these fields.
    • 0:10:57There's a whole bunch of information that's encapsulated inside
    • 0:11:00of any one of these packets.
    • 0:11:01But we'll focus initially on these two, source address and destination address.
    • 0:11:05Maybe the most important thing IP does is
    • 0:11:08it standardizes what you put, so to speak,
    • 0:11:11on the outside of these envelopes.
    • 0:11:13It says that every computer is going to have a unique address of that form,
    • 0:11:17something dot something dot something dot something.
    • 0:11:19And so just like in the real world, if I want
    • 0:11:21to send this packet from Phyllis to Brian,
    • 0:11:23and suppose that Brian's IP address is a number,
    • 0:11:26like, very simply 1.2.3.4, what Phyllis would do
    • 0:11:31is put that IP address in the middle of this envelope,
    • 0:11:34just like you would address a letter in the real world.
    • 0:11:37But so that Brian could reply to her, if only to confirm receipt,
    • 0:11:41she's also going to put in the top left of this envelope,
    • 0:11:44virtually, her own IP address, which for the sake of discussion
    • 0:11:47is maybe 5.6.7.8.
    • 0:11:50In practice, they won't be as pretty as that.
    • 0:11:51But it's the general idea.
    • 0:11:53So you have a source address from which it's coming and a destination |
    • 0:11:58to which it's going.
    • 0:11:59And that's what IP does.
    • 0:12:01It sort of standardizes, in addition to a bunch of other numbers and values
    • 0:12:04that need to be in this envelope, too.
    • 0:12:06It really just mandates that computers on the internet minimally
    • 0:12:09provide a source address and a destination
    • 0:12:11address so that the envelope can get from point A to point B.
    • 0:12:15But that's not quite enough.
    • 0:12:17Because it turns out, and if you saw the bloopers from the TFs' Zoom
    • 0:12:21session there, you would see that it's very common not only for humans
    • 0:12:24to physically drop an envelope like that,
    • 0:12:27and frankly, even in the real world, for mail carriers
    • 0:12:29to lose mail occasionally, undelivered to recipients.
    • 0:12:33And so it turns out that IP alone is not enough to guarantee delivery
    • 0:12:38because sometimes the packet just might not get to its destination.
    • 0:12:41More technically, that might happen because the router is overwhelmed.
    • 0:12:45It only has so much memory.
    • 0:12:47It only has so fast a CPU.
    • 0:12:49And if it's receiving way too many packets
    • 0:12:51because so many people are on the internet at some moment in time,
    • 0:12:54well, it might just kind of get overwhelmed and metaphorically
    • 0:12:57drop certain packets in the sense that there's just not
    • 0:13:01enough room in its memory to keep up with the traffic.
    • 0:13:04So the effect for the sender is that the packet just doesn't get through.
    • 0:13:08And so there's this other protocol, TCP, that humans typically
    • 0:13:12use in conjunction with IP via their Macs,
    • 0:13:15PCs, and phones that does a couple of other things for us.
    • 0:13:18One, it guarantees delivery, or really "guarantees" delivery.
    • 0:13:23And it does that actually by doing this.
    • 0:13:26It does that by having Phyllis write on the outside of the envelope not
    • 0:13:30just the source address and destination address,
    • 0:13:32but also what we'll call a sequence number.
    • 0:13:34So, for instance, this would be packet one of two
    • 0:13:38that she might be sending to Brian.
    • 0:13:39So maybe in, like, the memo field, she could write one of two.
    • 0:13:42And then, if she happens to send a second packet to Brian,
    • 0:13:45she might write similarly a source address and destination address.
    • 0:13:49But she might write two out of two.
    • 0:13:51Because now, logically, if Brian only gets one of these,
    • 0:13:54that sequence number is enough information for him
    • 0:13:57to know wait a minute, I need to ask Phyllis to resend
    • 0:13:59number one, or maybe resend number two.
    • 0:14:02If both of them don't get through, I mean, honestly,
    • 0:14:04that's probably when Phyllis hits reload or resends the email.
    • 0:14:07But in general, these sequence numbers help with guaranteeing delivery.
    • 0:14:12But if Phyllis and Brian are each representing computers in this story,
    • 0:14:15they can be doing different things.
    • 0:14:17They can be doing email, chat, video conferencing, direct messaging,
    • 0:14:21or any number of services on the internet nowadays.
    • 0:14:24So TCP gives us one other feature, namely port numbers.
    • 0:14:28Because when Brian receives that envelope, assuming he's
    • 0:14:31indeed a computer, how does he know that what's
    • 0:14:33inside of that envelope is indeed an email, versus a direct message,
    • 0:14:37versus a little bit of video, versus sound, versus any other type of media.
    • 0:14:43Ideally, the outside of the envelope would have a bit of a clue for him
    • 0:14:46that indicates this is the type of data herein.
    • 0:14:49Or more specifically, this is the program, really,
    • 0:14:52that should open this envelope, the email program, the video conferencing
    • 0:14:56program, or whatever else.
    • 0:14:58So what Phyllis would typically do on the outside of this envelope lastly,
    • 0:15:04in addition to the source address, destination address,
    • 0:15:08and the memo field, the sequence number, she would also write a port number.
    • 0:15:13And it turns out two of the most common port numbers in the world of TCP
    • 0:15:17are these two, 80, which represents the web.
    • 0:15:20That is to say, something called HTTP, more on that today,
    • 0:15:23or HTTPS, which most everyone nowadays probably knows means secure,
    • 0:15:27so it's some kind of secure version of HTTP.
    • 0:15:30And that number happens to be 443.
    • 0:15:32There's no mathematical significance of these.
    • 0:15:34They're just kind of arbitrary.
    • 0:15:35But humans decades ago decided to standardize on these numbers.
    • 0:15:38So what it means for Phyllis is that on the outside of her envelope,
    • 0:15:42she should generally put a colon after the destination
    • 0:15:46address and then the number of the port that she wants to receive this packet.
    • 0:15:51So if she's actually not sending an email, but maybe making a web request,
    • 0:15:54and Brian is a web server and Phyllis is a web browser,
    • 0:15:57she would write colon 80.
    • 0:15:58Or if she's using HTTPS securely, we would change that 80 to a 443.
    • 0:16:04There's other stuff on the outside of that envelope.
    • 0:16:06In fact, just like with IP, there might be fields that look like this.
    • 0:16:10But just to give you a sense of this, which is a TCP packet,
    • 0:16:14you'll see that indeed sequence numbers are actually really big.
    • 0:16:18They use all 32 bits of this part of the picture, which
    • 0:16:22is to say that generally computers are sending way
    • 0:16:24more than one packet or two.
    • 0:16:26They might be sending dozens, hundreds, thousands
    • 0:16:28even, depending on the size of the data in question.
    • 0:16:31And there's some other features therein, including
    • 0:16:33source port and destination port.
    • 0:16:36Destination port is the 80 or the 443 that I mentioned earlier.
    • 0:16:39But long story short, Phyllis also gets to pick a source port to uniquely
    • 0:16:44identify this particular request.
    • 0:16:47But more on that another time.
    • 0:16:49For now, just know that TCP is the pair of protocols
    • 0:16:52that the internet uses to get data from point A
    • 0:16:54to point B. IP standardizes how the addresses work.
    • 0:16:58And TCP guarantees delivery with those sequence numbers
    • 0:17:02and also helps the servers do more than one thing, helps them multiplex,
    • 0:17:06so to speak, among email, web, video conferencing
    • 0:17:09by using those port numbers.
    • 0:17:11So at the end of the day, everything, even now, weeks into the class,
    • 0:17:14it all boils down somehow to zeros and ones, or in turn, numbers,
    • 0:17:19as we might think of them in this case.
    • 0:17:22Questions on any of these building blocks thus far?
    • 0:17:29Questions on any of these?
    • 0:17:31No?
    • 0:17:32All right.
    • 0:17:32Well, on the outside of this envelope are just some arbitrary numbers, 1, 2,
    • 0:17:353, 4, 5, 6, 7, 8.
    • 0:17:37That's obviously not what you and I are in the habit of typing.
    • 0:17:40When we actually visit websites, for instance, you and I
    • 0:17:42are generally in the habit of typing harvard.edu, or yale.edu,
    • 0:17:46or google.com, or the like, otherwise known as domain names.
    • 0:17:49But your Mac, your PC has to, at the end of the day,
    • 0:17:53address those virtual envelopes, AKA packets, with actual IP addresses.
    • 0:17:58There is no room for words, letters of the English alphabet in those pictures
    • 0:18:02that we showed on the screen.
    • 0:18:03It's just 32 bits, here 32 bits here.
    • 0:18:07So it turns out, on the internet, there's another type of server.
    • 0:18:10That, unlike routers, which route information from point A to point B,
    • 0:18:14there's another type of server that are all over the place, frankly,
    • 0:18:17in your home, on campus, in a company on the internet
    • 0:18:21more broadly, known as DNS servers, domain name system servers.
    • 0:18:26So what do these things do?
    • 0:18:28This is just a type of server on the internet whose purpose in life
    • 0:18:31is to answer questions of the form, what is the IP address for this domain name.
    • 0:18:36So for instance, if you do pull up your browser
    • 0:18:38on your Mac or PC or your phone, you type
    • 0:18:40in harvard.edu and hit Enter, what your device is designed to do
    • 0:18:45is to ask some local DNS server on campus, on your mobile carrier's
    • 0:18:51network, on your apartment or dorm's network, what is the IP
    • 0:18:54address of harvard.edu, or yale.edu?
    • 0:18:57Whatever you actually typed in, hopefully there
    • 0:18:59is a nearby DNS server that will respond with a numeric address of the form
    • 0:19:03something dot something dot something dot something.
    • 0:19:05And that's the number that your computer,
    • 0:19:07your device will actually use on the outside of that virtual envelope.
    • 0:19:11So you can think of DNS servers, honestly,
    • 0:19:14as fitting the model that we keep coming back to, this notion of a dictionary,
    • 0:19:17or a hash table, more specifically, whereby inside of a DNS server
    • 0:19:22is essentially a dictionary, a two column spreadsheet or database table,
    • 0:19:27if you will.
    • 0:19:27And in one column are domain names, harvard.edu, yale.edu, google.com.
    • 0:19:32On the right-hand side, right-hand column
    • 0:19:34are just the corresponding IP addresses.
    • 0:19:36And that's it.
    • 0:19:37To be technical, if they're not generally called just domain names,
    • 0:19:40technically, it's a fully qualified domain name.
    • 0:19:43More on that another time.
    • 0:19:44But domain names as we know them, generally have different parts.
    • 0:19:47And we'll soon see how to tease them apart beyond the usual.
    • 0:19:51Questions though, on what DNS server's purpose in life is
    • 0:19:56or how this might work?
    • 0:19:59No.
    • 0:20:00All right.
    • 0:20:01So how does your Mac, how does your PC, how does your phone
    • 0:20:03know what these IP addresses are?
    • 0:20:05Well, they don't come from the manufacturer this way.
    • 0:20:08And there's this whole hierarchy in the world of DNS servers
    • 0:20:10such that your phone, your Mac, your PC, will generally
    • 0:20:13ask the nearest DNS server, which is usually owned by your internet service
    • 0:20:18provider at home, in your apartment, or by your university or by your company.
    • 0:20:22But it's a hierarchical system.
    • 0:20:23And it's kind of a recursive design.
    • 0:20:25In that if that local DNS server does not have the answer,
    • 0:20:28it's going to ask someone bigger, more important than it.
    • 0:20:31If that one doesn't know, it might ask someone, again, recursively for it.
    • 0:20:34And throughout the world, there's a finite number
    • 0:20:37of what are called root servers that essentially know about all the dot
    • 0:20:41coms in the world, all of the dot edus in the world, all
    • 0:20:44of the dot whatever is in the world.
    • 0:20:46And so someone, at the end of the day, knows about those systems.
    • 0:20:49And in fact, if you've ever bought, or in the future might buy a domain name,
    • 0:20:53part of that process is paying someone to associate an IP address for you
    • 0:20:58with the actual server that you're going to actually be using.
    • 0:21:01So your final projects, for instance, in CS50, it's sometimes common for folks
    • 0:21:04to actually buy for personal use their own domain name
    • 0:21:07for a few dollars a year, typically.
    • 0:21:08So you're sort of renting it more than you're buying it.
    • 0:21:11But among the steps you'll go through if you ever
    • 0:21:13do that is to essentially inform the world what will be the IP address or IP
    • 0:21:17addresses of your particular domain name that you've
    • 0:21:20bought for, say, that calendar year.
    • 0:21:23All right.
    • 0:21:24So how does all this get started?
    • 0:21:26Well, back in the day, when you arrived on campus here at Yale, anyone,
    • 0:21:30or in the world, you would actually configure your Mac or PC
    • 0:21:33to know the IP addresses of your nearest router, of your nearest DNS server.
    • 0:21:38So literally, someone would come to your home
    • 0:21:40back in the day when signing up for internet service
    • 0:21:42and configure your Mac or PC for you.
    • 0:21:45Of course, nowadays I don't remember anyone really touching my computer
    • 0:21:48recently to configure it for me.
    • 0:21:50It all seems to happen automatically.
    • 0:21:52And indeed, there's this other type of server now in the world,
    • 0:21:54another solution to a human made problem known as DHCP.
    • 0:21:59And I think this is among the remaining acronyms for today, dynamic host
    • 0:22:04configuration protocol.
    • 0:22:05And it's not that intellectually interesting to memorize that.
    • 0:22:08But what DHCP servers do is answer questions
    • 0:22:11of the form "what should be my DNS server and router," quote, unquote.
    • 0:22:17So nowadays, when you turn on your phone in the morning,
    • 0:22:20if you actually powered it off, if you open
    • 0:22:23your laptop lid for the first day of classes or the like, your Mac, your PC,
    • 0:22:27your phone is essentially broadcasting a Hello, World message,
    • 0:22:30unbeknownst to you, that's just asking the local network, hey,
    • 0:22:34what IP address should I use for my DNS server and for my router.
    • 0:22:39And hopefully, Harvard or Yale or your apartment or your home more
    • 0:22:42generally has a DHCP server nearby whose purpose in life
    • 0:22:46is just to hand out answers to that question.
    • 0:22:49And what these DHCP servers also do is they
    • 0:22:51tell your Mac, your PC, your phone, what IP
    • 0:22:54address your device should use because that too
    • 0:22:57is no longer manually configured.
    • 0:23:00So this all just nowadays happens automatically.
    • 0:23:03And in the case of a campus like this or at Yale,
    • 0:23:05it's because, at the very beginning of your visit to campus,
    • 0:23:09you did register somehow.
    • 0:23:10You probably logged in.
    • 0:23:12You authenticated against your Harvard account or your Yale account.
    • 0:23:15And that is what enabled the DHCP servers henceforth
    • 0:23:19and forever to recognize your particular computer
    • 0:23:23and answer those questions for you.
    • 0:23:25All right.
    • 0:23:26So that's it for how the internet works, at least so
    • 0:23:29far as we are concerned today.
    • 0:23:31We're going to now start building on top of it.
    • 0:23:33And undoubtedly, the most popular form of the internet
    • 0:23:35nowadays is something called HTTP.
    • 0:23:38That is the World Wide Web, though most people don't really say it in long form
    • 0:23:42anymore.
    • 0:23:42But HTTP is just another protocol that governs how web browsers
    • 0:23:49and how web servers speak, just like IP is
    • 0:23:51a protocol that governs how computers address each other on the internet,
    • 0:23:55and how TCP governs how computers keep track of sequences of packets
    • 0:23:59from point A to point B and also multiplex among different services
    • 0:24:03using those port numbers.
    • 0:24:04And to be clear, what's a protocol-- well, in the human world,
    • 0:24:09it's a very common protocol.
    • 0:24:10And I can't reach any of you.
    • 0:24:11But if I were to reach over and say hi, nice to meet you.
    • 0:24:14You presumably, if we weren't five feet apart, would extend your hand.
    • 0:24:17We would sort of acknowledge, in this strange cultural convention.
    • 0:24:19But that's a protocol.
    • 0:24:21I know how to do it.
    • 0:24:21You know how to do it.
    • 0:24:22I'm initiating.
    • 0:24:23You're responding.
    • 0:24:24And that's exactly what's happening all the time on the internet.
    • 0:24:27You have a client, like me in this case, that's initiating a request.
    • 0:24:30You have a server, like you in this case, that's
    • 0:24:32responding to that request.
    • 0:24:33Or analogously, if you're in a restaurant,
    • 0:24:37you might be the client sitting down at the table.
    • 0:24:39You want to order food.
    • 0:24:40And there's a server that serves you that food after you have requested it.
    • 0:24:44So computers, really, on the internet are implementing that same paradigm.
    • 0:24:48So when it comes very specifically to the web, which is different, of course,
    • 0:24:52from email and video conferencing and all
    • 0:24:54of these other services on the internet, the world wide web
    • 0:24:57uses this protocol, HTTP, which standardizes
    • 0:25:01what goes inside of those envelopes in order
    • 0:25:04to allow a web browser to request and receive information from a web server.
    • 0:25:09So we've talked about really the lower level details up until now,
    • 0:25:12the outside of the envelope.
    • 0:25:14Let's now look inside of the envelope when it comes to actual web pages
    • 0:25:18that you might visit or soon today, you yourselves might design.
    • 0:25:22So HTTP stands for Hypertext Transfer Protocol, which is another mouthful,
    • 0:25:27but, again, just standardizes how we're going to get web traffic from point A
    • 0:25:31to point B, from browser to server and back.
    • 0:25:33HTTPS is literally the secure version of that.
    • 0:25:38And what that means for today's purposes is that the connection is somehow
    • 0:25:41encrypted, scrambled using very fancy mathematics
    • 0:25:44so that it is very, very, very unlikely that anyone
    • 0:25:48who intercepts your traffic, your packets between point A and point B
    • 0:25:52will have any idea what is inside of those envelopes.
    • 0:25:55They might intercept the packet itself digitally.
    • 0:25:57They might try to open it up.
    • 0:25:59But it's going to look metaphorically like random zeros
    • 0:26:02and ones on the inside when using HTTPS because of what's called encryption.
    • 0:26:08But let's look at some canonical URLs.
    • 0:26:10All of us are in the habit of seeing these and typing these all the time.
    • 0:26:13Well, let's actually tease apart some of the jargon here.
    • 0:26:16So here is an example URL with all of the usual components.
    • 0:26:20So here, for instance, with the yellow slash,
    • 0:26:23this generally means, even though you rarely type it
    • 0:26:26and you rarely see it nowadays, this means the default page for the website.
    • 0:26:34Give me the root of the website, so to speak.
    • 0:26:37So this is to say this represents a folder,
    • 0:26:39like, the default folder inside of which is presumably the default web page.
    • 0:26:43And we'll see what that means more concretely in just a bit.
    • 0:26:45If, though, you're visiting a more specific URL,
    • 0:26:48we're going to henceforth call this a path.
    • 0:26:51So slash something is representative of a path, maybe a file, maybe a folder,
    • 0:26:55just like in the world of Macs, PCs, and cloud services.
    • 0:26:58Specifically, you might sometimes be in the habit of visiting an actual file,
    • 0:27:02something like /file.html.
    • 0:27:05Nowadays, this is kind of very '90s, early 2000s.
    • 0:27:08Nowadays most web servers hide the file extension,
    • 0:27:11the dot HTML, even if it's there on the server.
    • 0:27:14It just looks a little messy nowadays.
    • 0:27:16It sort of reveals information that's not necessary.
    • 0:27:18So very often you won't see dot HTML, even if there is actually
    • 0:27:22a file ending in that suffix.
    • 0:27:25You might instead see /folder, with a slash.
    • 0:27:27Maybe not a slash, maybe a slash, but that generally
    • 0:27:30represents a folder on the server.
    • 0:27:32And sometimes there are, of course, files in folders.
    • 0:27:34So all of this stuff you're probably familiar with on Macs and PCs and even
    • 0:27:38Google Drive and the like.
    • 0:27:39Those same semantics exist in the context of URLs.
    • 0:27:43So there's a mapping between this URL and something on a hard drive somewhere
    • 0:27:48on some server.
    • 0:27:49All right.
    • 0:27:49What about the other parts?
    • 0:27:51So this is the fully qualified domain name, so the full domain name.
    • 0:27:55Even though you and I, when we say domain name,
    • 0:27:57we typically just mean this example.com, for instance.
    • 0:28:01So technically, the W-W-W is what we would typically call a host name.
    • 0:28:06A host name is like the name of a specific server that lives somewhere
    • 0:28:11in that domain.
    • 0:28:12And this is just a human convention.
    • 0:28:13Even though most URLs still probably start with W-W-W dot something,
    • 0:28:19that's not strictly required.
    • 0:28:21That's just a configuration detail.
    • 0:28:22And historically, this was just to kind of signal
    • 0:28:26to less technical people in particular, when you would see a URL in print,
    • 0:28:29that oh, this is a web address.
    • 0:28:31This is an address on that new world wide web.
    • 0:28:34W-W-W just kind of connotes that.
    • 0:28:36But decreasingly, do you see websites using this?
    • 0:28:39I mean, some of CS50's own tools, it's just cs50.dev.
    • 0:28:42It's just CS50.ai.
    • 0:28:44Because most of us are now conditioned to know that,
    • 0:28:46oh, OK, that's probably a URL, even though there's no explicit W-W-W.
    • 0:28:51And in fact, even if you type the W-W-W using tricks that we'll soon see,
    • 0:28:56you can redirect the user from one to another.
    • 0:28:58Essentially, remove the W-W-W or add it to the server,
    • 0:29:01to the address bar in their browser.
    • 0:29:04This thing here is called the top level domain.
    • 0:29:07And many of the domain names that you and I are in the habit,
    • 0:29:09certainly in the US nowadays, end in .com, which stands for commercial,
    • 0:29:14.edu stands for educational, .gov stands for US government.
    • 0:29:18But of course, there's hundreds of country codes, too, that by convention
    • 0:29:21are two letters.
    • 0:29:22So .uk for the United Kingdom, .jp for Japan,
    • 0:29:25and two characters for every other country in the world.
    • 0:29:29But even those have kind of been used in clever ways.
    • 0:29:32So .tv, for instance, is actually a country code that's been used by a lot
    • 0:29:38of the English-speaking world to represent television,
    • 0:29:40for TV shows and the like.
    • 0:29:42.ai, similarly, does not actually mean artificial intelligence.
    • 0:29:46It's a two character country code that has been used by the world nowadays
    • 0:29:50to represent AI.
    • 0:29:51.ly for bitly and CS50.ly, too, that's a country code that allows people like us
    • 0:29:58to essentially buy domain names in that subdomain.
    • 0:30:02But long story short, back in the day there only
    • 0:30:04used to be a few of these top level domains.
    • 0:30:06Now there are hundreds of them.
    • 0:30:08So I do think, over time, it's going to become
    • 0:30:12a lot less regimented as it seems to be now as to what URLs actually look like.
    • 0:30:17Lastly, beyond the :// here is the scheme, or the protocol.
    • 0:30:23And this just means that this URL is going
    • 0:30:25to be securely accessing the server thanks to the HTTPS instead of HTTP.
    • 0:30:32Mouthful.
    • 0:30:33But just to get some vocabulary out there.
    • 0:30:35Questions on these here URLs that we've probably
    • 0:30:38been taking for granted for years?
    • 0:30:40AUDIENCE: Who approves .edu?
    • 0:30:42DAVID MALAN: Really good question, who approves .edu.
    • 0:30:45So you have to be in an accredited educational institution to use .edu.
    • 0:30:49I don't recall the name of the organization that does this.
    • 0:30:51But it can't be anyone on the internet.
    • 0:30:53You actually have to apply and be a seemingly legitimate
    • 0:30:55educational institution.
    • 0:30:57That is not true of a lot of domain names.
    • 0:30:59Anyone can buy a .com.
    • 0:31:01Anyone can buy .org, a .net, not a .gov, for instance.
    • 0:31:05And then different countries might have their own policies
    • 0:31:08over who can be in what domain or subdomain as well.
    • 0:31:12All right.
    • 0:31:12So now that we have URLs so defined, there's
    • 0:31:16a couple of verbs with which to be familiar in the context of the web,
    • 0:31:19namely GET and POST.
    • 0:31:21And that is to say, there's two different ways
    • 0:31:23to request information from a server.
    • 0:31:25That is, there's two different ways to format requests
    • 0:31:28that go inside of this envelope.
    • 0:31:29And the default, daresay, and the most common one is just what's called GET,
    • 0:31:33literally the verb, the English verb get.
    • 0:31:36And we'll see in a moment what this means exactly concretely.
    • 0:31:40But just know that there's an alternative that we'll
    • 0:31:42play with over time known as POST.
    • 0:31:44And whereas GET, as the verb suggests, is all about just getting information,
    • 0:31:49POST, as the verb kind of suggests, is more about sending information.
    • 0:31:53So POST is used when you submit a credit card.
    • 0:31:56Because you're sort of sending potentially sensitive information.
    • 0:31:59POST is used when you upload an image to a website or the like,
    • 0:32:03but GET is used when you're just clicking on links
    • 0:32:05and visiting web pages and not really pushing any information to the server.
    • 0:32:09So for today, we'll focus primarily on GET.
    • 0:32:13So what does this mean?
    • 0:32:16Inside of this envelope, probably unbeknownst to you up until now,
    • 0:32:19is our messages that look like this.
    • 0:32:22These are HTTP messages that are being put automatically
    • 0:32:26in these virtual envelopes for you by your Mac, your PC, for your phone.
    • 0:32:30So for instance, if you were to visit HTTPS://www.harvard.edu,
    • 0:32:38you would hit Enter.
    • 0:32:39What your Mac, PC, or phone is going to do
    • 0:32:41is put a textual message that looks literally
    • 0:32:44like this inside of a virtual envelope, address it on the outside
    • 0:32:48to the appropriate IP address for harvard.edu using your own IP
    • 0:32:51address as the source address, and then hand it off to some nearest router.
    • 0:32:55But inside of this envelope is enough information to the server
    • 0:32:58to know what it is you want.
    • 0:33:00So for instance, GET is the verb.
    • 0:33:02So you just want to get some information.
    • 0:33:04The information you want to get is /, which
    • 0:33:05I defined earlier as just the default page on the website.
    • 0:33:09HTTP/2 just means what version of HTTP we're talking about.
    • 0:33:13You'll see nowadays in the wild, 1.1, you'll see 2,
    • 0:33:17you'll start to see version 3 over time.
    • 0:33:19But I'll use 2 for all of my examples here.
    • 0:33:21And you'll see inside of this envelope, too,
    • 0:33:23what we're going to start calling an HTTP header, a single line of text that
    • 0:33:27literally tells the server what fully qualified domain name it's looking for.
    • 0:33:32And this is important only insofar as nowadays, generally on a server,
    • 0:33:37you might have multiple websites being hosted.
    • 0:33:40This is not going to be true probably of Google or of Microsoft
    • 0:33:44or Meta or massive companies like that.
    • 0:33:46But it's definitely going to be true of smaller enterprises, even
    • 0:33:49places like Harvard that don't need thousands of web servers,
    • 0:33:52but maybe just a couple, or maybe just a few.
    • 0:33:54So in this case, this ensures that when the server receives this packet,
    • 0:33:58it knows to serve up harvard.edu and not yale.edu
    • 0:34:02or some other website that, by coincidence, might just be
    • 0:34:04hosted on the same server because both Harvard and Yale are maybe
    • 0:34:08paying the same cloud provider to host their websites.
    • 0:34:11So dot dot dot just means there's other HTTP headers.
    • 0:34:14But notice the colon here is just giving us yet another one of those key value
    • 0:34:18pairs.
    • 0:34:19The key is HOST.
    • 0:34:20The value is www.harvard.edu.
    • 0:34:22There, again, are those dictionaries that I
    • 0:34:25claimed we would continue to see all over the place.
    • 0:34:28What then comes back from the server?
    • 0:34:30If this is what's inside the message from browser to server,
    • 0:34:34what does the server send back?
    • 0:34:36Ideally, the server sends back a message that
    • 0:34:38looks like this, an acknowledgment of what version is being used,
    • 0:34:41a status code, which is going to be an arcane looking number, like 200.
    • 0:34:45It's going to then have another HTTP header of its own saying
    • 0:34:48what type of content is in this envelope, ideally,
    • 0:34:51something called text/html.
    • 0:34:53That is hypertext markup language, which we're about to see.
    • 0:34:56And then some other stuff.
    • 0:34:57That's what's coming back from the server to the browser.
    • 0:35:00And we can actually now see this.
    • 0:35:02Let me actually go over to VS Code here.
    • 0:35:05Let me maximize my terminal window just so we can see more at once.
    • 0:35:08And let me go ahead and type in this command,
    • 0:35:11curl -I https://www.harvard.edu/, so a complete URL that's secure,
    • 0:35:21that's got the host name of W-W-W.
    • 0:35:24And curl just means connect to a URL.
    • 0:35:27It's a command line program that comes with Linux, comes with Mac OS, Windows.
    • 0:35:30You might have to install it individually.
    • 0:35:32And it just lets me simulate being a browser,.
    • 0:35:35It's going to let me simulate sending a packet like this
    • 0:35:37without caring what the website actually looks like,
    • 0:35:40so no pictures, no images, no text, no nothing, just what's inside
    • 0:35:45of the envelope in terms of the server's response.
    • 0:35:47And here's mostly dot dot dot, the ellipses I raised my hand at earlier?
    • 0:35:52There's a lot of these key value pairs.
    • 0:35:54But if I scroll up to the top, you'll see that 200
    • 0:35:57is the status code that came back.
    • 0:35:59And you'll see that the content type is indeed text/html.
    • 0:36:04And there's a whole lot of other stuff here, clearly.
    • 0:36:07A lot of this is diagnostic.
    • 0:36:08It reveals information about the server that
    • 0:36:10might be useful generally to more technical people than me
    • 0:36:13at this point in the conversation, or maybe my Mac or my PC or my phone.
    • 0:36:17For now, we can focus really on just the essence
    • 0:36:19of this response, which is this here.
    • 0:36:22But here's where even these arcane numbers might start
    • 0:36:25to get a little more familiar, in fact.
    • 0:36:28Suppose that I want to see this in my browser.
    • 0:36:31Actually, let me do this.
    • 0:36:32Let me go back to VS Code here.
    • 0:36:35Let me open up incognito mode here, which
    • 0:36:37generally is to give you private browsing, so to speak.
    • 0:36:40And we'll talk more about this next week.
    • 0:36:41In incognito mode or private mode, you have no history, you have no cookies,
    • 0:36:47you have no sessions, terms we'll define next week.
    • 0:36:49I'm going to use it again and again today
    • 0:36:51to make sure that my browser is essentially
    • 0:36:53starting from scratch, freshly, so that I don't have anything in my history
    • 0:36:57from previous examples.
    • 0:36:58And what I'm going to do, actually, first
    • 0:37:00is open up, via my browser's menu, so-called developer tools.
    • 0:37:04These are going to look a little different in Chrome
    • 0:37:07versus Edge versus Firefox versus Safari versus other browsers as well.
    • 0:37:12But almost any modern browser, whatever your favorite is nowadays,
    • 0:37:15has built into it developer tools.
    • 0:37:17And you might have to click a different button to access it.
    • 0:37:20But these are tools for developers, like,
    • 0:37:22web developers that want to not just use the browser to go places,
    • 0:37:26but use the browser to develop their own websites and web applications.
    • 0:37:30Now there's a whole bunch of tabs here.
    • 0:37:32And I'm going to focus on the Network tab initially.
    • 0:37:34Essentially, this is like diagnostic information, kind of like debug50,
    • 0:37:39like a debugger.
    • 0:37:39But it's specific to the web and the web browser here.
    • 0:37:43So with my developer tools open and with the Network tab open,
    • 0:37:46I'm going to go up to the URL bar and type in https://www.harvard.edu/.
    • 0:37:53So the exact same thing that I typed in curl a moment ago in my terminal,
    • 0:37:58I'm just typing in my browser like I would normally do.
    • 0:38:01And if I hit Enter, what's interesting about developer tools,
    • 0:38:04and let me go ahead and drag them to the top and maximize the window,
    • 0:38:07is you see all of the HTTP requests, all of the virtual envelopes
    • 0:38:12that just went instantaneously it would seem back and forth
    • 0:38:16between my Mac here and Harvard's own web server.
    • 0:38:20And notice it's way more than a single envelope.
    • 0:38:22It's way more than a single request.
    • 0:38:24Why?
    • 0:38:24For now, assume that each of those rows of output
    • 0:38:27represents maybe a sound that was downloaded,
    • 0:38:30a video, an image, some text.
    • 0:38:32There's all sorts of media in web pages nowadays.
    • 0:38:35And they might actually be spread across multiple files.
    • 0:38:38Browsers are designed, if you will, to recursively get
    • 0:38:41all of the media for a single web page and download it automatically
    • 0:38:44with we humans only typing the URL itself once.
    • 0:38:48But watch this.
    • 0:38:49At the very top of this output, I scrolled all the way
    • 0:38:52to the top of my network tab.
    • 0:38:53I'll see a request, a row that represents
    • 0:38:56my original request for the website.
    • 0:38:58And if I Zoom in here, we'll see that 200 means apparently OK.
    • 0:39:03So all is well.
    • 0:39:04Here's the contents of the website.
    • 0:39:06But there's a lot.
    • 0:39:07In fact, if I look at the very bottom of the window,
    • 0:39:09harvard.edu is composed of 91 separate files it would seem.
    • 0:39:14And that's just the landing page itself, not
    • 0:39:16to mention everything else we might click on ultimately.
    • 0:39:20But 200, OK, is a good thing.
    • 0:39:22And odds are you've never actually seen that, because it's, indeed, OK.
    • 0:39:25So let's consider actually what else could
    • 0:39:28happen when you make these requests.
    • 0:39:30Well, here, for instance, is a shorter request.
    • 0:39:32Suppose that I omit the W-W-W just because it's faster to type.
    • 0:39:37And honestly, you and I are almost always,
    • 0:39:38nowadays I bet, in the habit of just typing something.com, or something.edu.
    • 0:39:43We don't bother typing the HTTPS, the so-called scheme or protocol.
    • 0:39:46We probably don't bother typing the W-W-W.
    • 0:39:48You can probably think of someone in your life
    • 0:39:50who's very pedantic like that, typing it out in its full.
    • 0:39:53But you don't need to do that typically for a couple of reasons.
    • 0:39:56If I, in fact, go back to VS Code here, let
    • 0:39:59me use curl again to connect to another URL that's similar,
    • 0:40:03https://harvard.edu.
    • 0:40:07Now notice before I went to W-W-W. And that's indeed Harvard's preferred URL,
    • 0:40:11if you will.
    • 0:40:12But harvard.edu will still work.
    • 0:40:14But watch what happens when I hit Enter.
    • 0:40:16I'm going to get back the contents of the virtual envelope
    • 0:40:19that Harvard just sent back to me.
    • 0:40:20But it's not OK.
    • 0:40:22It's not 200 anymore.
    • 0:40:23It's actually this number here, 301, which
    • 0:40:27actually means something specific.
    • 0:40:29301 actually means that Harvard's website moved permanently, so to speak.
    • 0:40:34In other words, Harvard, Yale, any server
    • 0:40:36can configure itself to redirect the user to another place
    • 0:40:39if they prefer to canonicalize on some other URL.
    • 0:40:43So by default for branding purposes, most websites still
    • 0:40:45probably use www.something.something.
    • 0:40:48So Harvard is, in fact, doing this.
    • 0:40:50And for reasons we'll talk about next week,
    • 0:40:52there's technical motivations to do so related to something
    • 0:40:55called cookies and sessions.
    • 0:40:56But for now, that just seems to be a different status code.
    • 0:41:01But if I now open up another browser window and I'll do this again in,
    • 0:41:05let's say, how about incognito mode, just to start fresh with a brand
    • 0:41:11new window.
    • 0:41:12Let me open my developer tools again.
    • 0:41:14Let me go to the URL bar and only type https://harvard.edu/ Enter.
    • 0:41:22I'm still in my network tab here.
    • 0:41:24And if I scroll to the very top of this, notice, ah,
    • 0:41:26the top row looks a little different now.
    • 0:41:29It's not 200 anymore.
    • 0:41:30And I can click on that here.
    • 0:41:32And what I'm now seeing in yellow is that 301, AKA, moved permanently.
    • 0:41:37So this is to say you've been able to do this all this time in your browser
    • 0:41:40if you care to.
    • 0:41:41You can see what's going on underneath the hood, if you will.
    • 0:41:45Check that off, I think.
    • 0:41:46Underneath the hood so as to just understand what's going on.
    • 0:41:50Now for users, this is not that useful or intellectually interesting.
    • 0:41:54But for developers, this can be very useful for understanding things
    • 0:41:57and also diagnosing problems ultimately.
    • 0:42:00So that's just a couple of the status codes that can come back, not just 200,
    • 0:42:05but perhaps 301.
    • 0:42:06There's also this one now, with which humans generally are familiar, 404.
    • 0:42:12Well, it turns out 404 is what happens when a file is not found.
    • 0:42:16So I can simulate that here.
    • 0:42:17Let me go back to VS Code and my terminal window.
    • 0:42:19Let me do curl -I https://www--
    • 0:42:24because Harvard prefers that-- harvard.edu/cats.
    • 0:42:27Let's see if there's a page about cats within Harvard's website.
    • 0:42:30I'm pretty sure there's not.
    • 0:42:32And so, indeed, when I hit Enter, a whole lot of output, a lot of HTTP
    • 0:42:36headers.
    • 0:42:37But notice at the top, 404.
    • 0:42:39It's File Not Found.
    • 0:42:41Now what you see in the browser is going to completely depend on the website.
    • 0:42:44Some websites just display an error message or a status code number.
    • 0:42:48And that's why you and I have seen probably in the world 404 messages.
    • 0:42:52Sometimes they're much more user friendly.
    • 0:42:54Sometimes there are links back to the home page to help you out.
    • 0:42:57It's entirely up to the server.
    • 0:42:58But that status code indicates that something has gone wrong.
    • 0:43:02And in fact, there's a whole bunch of these status codes.
    • 0:43:04Some of which you'll now start to see in the class.
    • 0:43:06200's OK.
    • 0:43:07And it's a good thing if you never see that,
    • 0:43:09because it means everything's working.
    • 0:43:11404 is not found.
    • 0:43:12301 is moved permanently.
    • 0:43:14Any of these that start with 3 relate to redirects.
    • 0:43:17Long story short, there's different ways to redirect the user from one place
    • 0:43:21to another, as we saw from that location header a moment ago.
    • 0:43:25400s are generally bad.
    • 0:43:27It means that the user, the browser somehow did something wrong.
    • 0:43:30Like, 403 forbidden probably means you're not logged in.
    • 0:43:36500 you're going to start doing next week most likely.
    • 0:43:39500 is, like, the segfault of the web, if you will.
    • 0:43:42So there's no pointers or anything like that.
    • 0:43:44But 500 means that you wrote some buggy code, as invariably we all will
    • 0:43:48next week.
    • 0:43:49418 is an April Fool's joke from years ago.
    • 0:43:52Some servers honor this.
    • 0:43:53But someone wrote up literally this long technical document
    • 0:43:56proposing a response that says I'm a teapot for a server,
    • 0:44:00even though it was just a joke on April 1 some years ago,
    • 0:44:03so sort of geek humor, if you will.
    • 0:44:06So those are then the status codes that are available to us.
    • 0:44:10Let me show you one other.
    • 0:44:11Has anyone been to this URL here?
    • 0:44:15So you have?
    • 0:44:15All right.
    • 0:44:16So without spoiling here, let me actually--
    • 0:44:18well, let me go into incognito mode here.
    • 0:44:23Someone's pulling it up on their phone, clearly.
    • 0:44:25Safetyschool.org/ Enter.
    • 0:44:29Oh, my goodness.
    • 0:44:31Another box gets crossed out today, too, I think.
    • 0:44:34So how is that working?
    • 0:44:36Well, if we actually diagnose this with curl-- let me go into VS Code,
    • 0:44:39curl -I HTTP-- and it doesn't support HTTPS because this is an old website--
    • 0:44:45://safetyschool.org/ Enter, all this server does is return an HTTP 301
    • 0:44:52response with a location that literally refers us back to yale.edu.
    • 0:44:58And this is amazing.
    • 0:44:58Someone has been paying for this domain name for decades.
    • 0:45:02And all it does is literally this.
    • 0:45:05Now I know for our friends at Yale who are watching this,
    • 0:45:08it's not quite fair to poke fun.
    • 0:45:10It turns out Yale got us even better.
    • 0:45:12So later today, we'll turn the tables a little bit.
    • 0:45:15All right.
    • 0:45:16So let's go ahead and take a look now at what
    • 0:45:21it is that composes this web page when it is indeed 200 OK.
    • 0:45:25Let's introduce another language here, or an actual language
    • 0:45:28called HTML, which is not a programming language but is a mark up language.
    • 0:45:33Which is to say it's all about aesthetics, like,
    • 0:45:35mocking up a web page so that you can see the information you care about.
    • 0:45:38But HTML is not going to have functions and loops and conditionals
    • 0:45:42and all of that stuff we talked about in Week 0
    • 0:45:44It's just about presenting information.
    • 0:45:46So here are some of the building blocks of HTML.
    • 0:45:49You're about to see really only two vocabulary words.
    • 0:45:52HTML honestly is the kind of language that you learn in, like, 30 minutes
    • 0:45:56and then you're just kind of off and running with online tutorials,
    • 0:45:58documentation, and the like.
    • 0:46:00I still remember years ago just learning it
    • 0:46:02from a teaching fellow who kind of gave me a crash course
    • 0:46:04and then you kind of fill in the blanks yourself
    • 0:46:07because it has relatively few concepts associated with it.
    • 0:46:10Even though, in fairness, it can take years
    • 0:46:13to get good at making pretty websites, today we
    • 0:46:17can get good very quickly at making functional websites, so
    • 0:46:21that artistic disclaimer.
    • 0:46:22So in the world of HTML, there's really two concepts, tags and attributes.
    • 0:46:26And those of you who have played with websites growing up
    • 0:46:29might be familiar with some of these already.
    • 0:46:31So here is some sample HTML.
    • 0:46:34HTML is just a text-based language.
    • 0:46:35You type it out with your keyboard.
    • 0:46:37Again, it's not a programming language.
    • 0:46:38So you can't call functions or write logic.
    • 0:46:41But you can mock up a web page.
    • 0:46:43And this web page, for instance, is quite simply
    • 0:46:45going to say hello, title in its title bar, or the tab.
    • 0:46:48And then the body of it, the big white box,
    • 0:46:51it's going to say hello comma body, just to distill this really into its essence
    • 0:46:55before we make more interesting pages.
    • 0:46:57So what's going on in this HTML is enough detail
    • 0:47:02that the server can display the information for it.
    • 0:47:06So in fact, let me go ahead and reveal this as follows.
    • 0:47:09I'm going to go over to VS Code here.
    • 0:47:13I'm going to create a new file here called, for instance--
    • 0:47:18let's just call it hello.html.
    • 0:47:21And I'm going to really quickly whip up that same web page from memory.
    • 0:47:24So DOCTYPE html html lang equals quote, unquote "en" close bracket.
    • 0:47:29Open head, open title, hello comma title.
    • 0:47:35And then down here, open body.
    • 0:47:37And you'll notice I'm actually not quite as fast as I might seem to be.
    • 0:47:40VS Code is configured to automatically finish half of my thought for me.
    • 0:47:44So when I open one of these things that we're about to call tags,
    • 0:47:47VS Code is doing some of the heavy lifting for me.
    • 0:47:50And in here, I'm going to do hello comma body.
    • 0:47:52But I think this is the entirety of the file
    • 0:47:55that I just proposed in the slide version thereof.
    • 0:47:58So this is clearly now a text file in my code space within VS Code.
    • 0:48:03How do I actually view it with a web browser?
    • 0:48:06So if this file were created on my Mac or PC,
    • 0:48:08I could literally double click it and Chrome or my default browser
    • 0:48:12would open up and show me this web page.
    • 0:48:14But this file, technically, is not on my Mac or PC.
    • 0:48:17It's in the cloud.
    • 0:48:18It's in your code space.
    • 0:48:19So all that we need to do is actually turn on a web server
    • 0:48:23to serve this file to me or to anyone else in the world, in fact.
    • 0:48:27And the command we're going to run now is literally called http-server.
    • 0:48:31This is a piece of software that someone else
    • 0:48:33wrote that we pre-installed in everyone's code space.
    • 0:48:36And by running this, it starts a server whose purpose in life
    • 0:48:40is to listen for HTTP requests.
    • 0:48:42And as soon as it receives one from a browser,
    • 0:48:44be it mine or anyone else's, it will respond with the contents of that file.
    • 0:48:48So let me go into VS Code here.
    • 0:48:51Let me reopen my terminal window.
    • 0:48:53And I'm going to go ahead and literally run http-server Enter.
    • 0:48:58And now you'll see a whole bunch of output, most of which
    • 0:49:01isn't germane to our discussion yet.
    • 0:49:03But here is this URL here.
    • 0:49:05And if I hover over it, I'll see a little Open URL pop up
    • 0:49:10that I can click on, or on my Mac, I can Command click on the URL itself,
    • 0:49:14and that will open up in a new tab this folder.
    • 0:49:19So this is going to look a little esoteric at first glance.
    • 0:49:22But this is what's called a directory listing.
    • 0:49:25It's just literally the contents of the folder that I'm in.
    • 0:49:27So I'm in my Codespaces default folder.
    • 0:49:29I deleted everything from last week and weeks prior.
    • 0:49:31Your folder will, of course, have many other things
    • 0:49:33that you've created and kept.
    • 0:49:35I have a Source 8 directory that I downloaded
    • 0:49:37in advance because it's got all of today's examples made in advance.
    • 0:49:40But there's the file I just created.
    • 0:49:42And there's some other information here, like the date and time at which
    • 0:49:45I created this file, and so forth.
    • 0:49:47But you'll see that this is just a web page that lives at this URL here.
    • 0:49:51And this is actually somewhat specific to Codespaces,
    • 0:49:54the infrastructure we're using.
    • 0:49:57But if I Zoom in up here, you'll see that I am effectively
    • 0:50:01running my own web server at this weird looking URL
    • 0:50:04that GitHub dynamically generated for us, for me.
    • 0:50:08And you'll have a different unique one as well.
    • 0:50:10You'll see that baked into this URL is actually a port number.
    • 0:50:13And they're doing some trickery.
    • 0:50:15Normally, I would have to access this web server at Port 80, or 443,
    • 0:50:20or even 8080.
    • 0:50:21And the reason for this is because cs50.dev,
    • 0:50:25that is to say Codespaces, the tool that we're using in the cloud,
    • 0:50:28is obviously itself already a web server.
    • 0:50:30And it's GitHub's web server that's listening already on Port 80 and 443.
    • 0:50:35So if I want to run my own web server on their web server,
    • 0:50:38I just have to pick another port number.
    • 0:50:40And so what you're seeing in the URL here is a hint of that.
    • 0:50:43By convention, the program I just ran, http-server, does not try to use 80.
    • 0:50:48It does not try to use 443.
    • 0:50:50It uses 8080 by default. And that's why you see it in the URL here.
    • 0:50:54And underneath the hood, that virtual envelope actually contains Port 8080.
    • 0:50:59Because this is not an official web server.
    • 0:51:00This is not CS50.dev or GitHub.dev.
    • 0:51:04This is little old me trying to serve up my brand new hello.html file.
    • 0:51:09But the point here is this.
    • 0:51:11When I click on this file, I should see the results of my hard work.
    • 0:51:15And there is a big white box, otherwise known as the view port, inside of which
    • 0:51:19are the only words in the body of my page, hello, body.
    • 0:51:22And if I scroll up further, you'll see in my tab here hello comma title.
    • 0:51:26So this now maps back to the code we just saw.
    • 0:51:29Here is the HTML that I just pulled up in my browser.
    • 0:51:32And it is what told the browser what to do visually.
    • 0:51:36So let's walk through this top to bottom.
    • 0:51:37This first line here is what's called the document type declaration.
    • 0:51:41Honestly, you just copy paste this nowadays.
    • 0:51:43And it means hey, browser, I'm using version 5 of HTML.
    • 0:51:47Odds are in some number of years, this line
    • 0:51:49might change over time to indicate different versions.
    • 0:51:51But for now, this just means I'm using the latest version of this HTML
    • 0:51:55language.
    • 0:51:55That's kind of anomaly, because you're not going
    • 0:51:58to see this exclamation point again.
    • 0:52:00Everywhere else, you're going to see a lot of less than signs
    • 0:52:02and greater than signs or angled brackets, so to speak.
    • 0:52:05But they're almost always going to be symmetric, as follows.
    • 0:52:10This tag here, this is an HTML tag, says, hey browser, here comes my HTML.
    • 0:52:16And this is what's known as an attribute.
    • 0:52:18So anything after the name of a tag is what we'd call an attribute.
    • 0:52:22And attributes can have values.
    • 0:52:23Those values that are associated with the attributes with an equal sign
    • 0:52:27and typically quotation marks, single quotes or double quotes,
    • 0:52:30as in this case.
    • 0:52:31So here we, again, have that paradigm of a dictionary, key, value, pairs.
    • 0:52:35They're everywhere in computing, even though the syntax obviously
    • 0:52:38keeps changing, whether when we're in SQL, or Python, or now HTML.
    • 0:52:42This tag at the very bottom now means hey, browser, that's it for my HTML.
    • 0:52:47So when you see a tag that looks like another,
    • 0:52:50but starts with a forward slash--
    • 0:52:52and you do not need to repeat the attributes, that would just
    • 0:52:54be very annoying to have to type it here and here, we
    • 0:52:57keep it succinct-- this is what's known as a close tag, or an end tag that
    • 0:53:03conceptually corresponds to this start tag or open tag.
    • 0:53:07So they're sort of symmetric.
    • 0:53:09Inside of that are two children, so to speak.
    • 0:53:12So there's actually a notion of a family tree-type hierarchy here, or a tree,
    • 0:53:15as we've discussed in data structures.
    • 0:53:17The HTML tag, per the indentation here, has
    • 0:53:20one child called head and another child called body.
    • 0:53:25Everything between the start tag and an end tag
    • 0:53:27here is what's also generically known as an element.
    • 0:53:30So this is the head element.
    • 0:53:32This is the body element.
    • 0:53:33A bunch of new vocab, but it's not that intellectually interesting.
    • 0:53:36It's just jargon that we'll use.
    • 0:53:38Here means hey, browser, here comes the head of my page.
    • 0:53:42So like the very top of it, which generally for now
    • 0:53:44means just the title bar.
    • 0:53:46In fact, this means, hey, browser, here comes the title of my page.
    • 0:53:52And then here, notice there's no more angle brackets.
    • 0:53:54This is literally raw text.
    • 0:53:56And this is why we saw in the actual gray tab of my browser hello comma
    • 0:54:01title.
    • 0:54:01This means, hey, browser, that's it for the title.
    • 0:54:03This means, hey, browser, that's it for the head.
    • 0:54:06Meanwhile, down here, hey, browser, here comes the body of my main page.
    • 0:54:10Like, 90-plus percent of the page inside of the so-called viewport,
    • 0:54:13the big rectangular region, hey, browser, here comes the body.
    • 0:54:16Hey, browser, sir, that's it for the body.
    • 0:54:18What is in the body?
    • 0:54:19In this super simple case, literally just hello comma body.
    • 0:54:23That's it.
    • 0:54:24So HTML really is that pedantic.
    • 0:54:26It just tells the browser start doing this.
    • 0:54:28Stop doing this.
    • 0:54:29Start.
    • 0:54:29Stop.
    • 0:54:30Start.
    • 0:54:30Stop.
    • 0:54:31And that's how it knows what to do, top to bottom,
    • 0:54:33left to right when actually reading the code therein.
    • 0:54:38All right.
    • 0:54:38Questions about any of this here HTML code.
    • 0:54:43And yeah, in front?
    • 0:54:45AUDIENCE: Would browsers be considered a HTML interpreter?
    • 0:54:49DAVID MALAN: Say that again?
    • 0:54:50AUDIENCE: Would browsers be considered a HTML code interpreter?
    • 0:54:53DAVID MALAN: Oh, yes.
    • 0:54:55I think that's fair.
    • 0:54:57The question is, can browsers be considered HTML interpreters?
    • 0:55:00Yes, I don't think people tend to call it that.
    • 0:55:02Interpretation generally implies that you're
    • 0:55:05parsing something that's logical in nature, your functions, loops,
    • 0:55:08conditionals, and so forth.
    • 0:55:09Parser is a term you might indeed hear much more often.
    • 0:55:12A parser is a piece of software that analyzes code,
    • 0:55:16analyzes text top to bottom, left to right,
    • 0:55:18breaks it down into chunks that have semantic meaning, like the tags,
    • 0:55:22like the attributes, like the elements that we're talking about
    • 0:55:25and then it displays them, in this case.
    • 0:55:27There's not as much to interpret in quite the same way.
    • 0:55:31But that's reasonable, nonetheless.
    • 0:55:32Yeah?
    • 0:55:33AUDIENCE: With all the frameworks, do you
    • 0:55:35think is is worth learning HTML from scratch
    • 0:55:37or just use a Bootstrap [INAUDIBLE]?
    • 0:55:39DAVID MALAN: Really good question.
    • 0:55:40With all the frameworks out there, should you
    • 0:55:41bother learning HTML and writing it from scratch or using frameworks,
    • 0:55:44like something called Bootstrap.
    • 0:55:45Well, we spent a few minutes today talking about that very framework.
    • 0:55:48But even frameworks like Bootstrap absolutely
    • 0:55:51assume that something about HTML, something
    • 0:55:54also about something called CSS, more on that in a bit, and better still,
    • 0:55:57something about JavaScript.
    • 0:55:59If you really don't want to know and understand these things,
    • 0:56:01that's when you reach for like a third party service,
    • 0:56:04like Squarespace nowadays or Wix, where you really just click and drag and drop
    • 0:56:08and create websites that are, at the end of the day, still HTML.
    • 0:56:12But the developers at Wix and Squarespace
    • 0:56:15have automated the process with a graphical user interface
    • 0:56:18or GUI of letting you create it.
    • 0:56:19But even then, most web developers, or even just business people
    • 0:56:23who want to create their own website and they're not
    • 0:56:26programmers themselves or technical folks,
    • 0:56:28they might still like to know a little something about HTML, CSS,
    • 0:56:31and JavaScript because then you can open like the advanced settings
    • 0:56:34and configure things.
    • 0:56:36And indeed, that's a frustration that you'll
    • 0:56:37tend to feel if you can't quite drop down conceptually to that level.
    • 0:56:42All right.
    • 0:56:42So just to make this a little more--
    • 0:56:45to give you more of a mental model for this,
    • 0:56:47this indentation is not strictly necessary.
    • 0:56:50Kind of, like, in C, where we care, where style50 cares, but not
    • 0:56:54Clang, about what your code looks like.
    • 0:56:56Similarly, browsers are pretty tolerant.
    • 0:56:58You can have all of this white space, all of this pretty indentation.
    • 0:57:01Or you cannot.
    • 0:57:02It's not going to care, generally, one way or the other.
    • 0:57:06However, this is certainly much more readable.
    • 0:57:08But we'll see next week as we start to generate HTML automatically,
    • 0:57:11it's not always important that the code you generate be pretty printed.
    • 0:57:16But when you're writing in this format, it absolutely
    • 0:57:18should be when you're collaborating or submitting to other people.
    • 0:57:22So this, though, is what we would call a tree representation of this.
    • 0:57:25So here is that hierarchy.
    • 0:57:27So if we think of the whole web page as what's generally known as a document,
    • 0:57:30that document has a root element called the HTML element, which
    • 0:57:34it's open HTML tag and its closed tag.
    • 0:57:36It has, as I claim, two children.
    • 0:57:38The head tag has one child title.
    • 0:57:40And then both of those leaf nodes, or leaves
    • 0:57:44to borrow the family tree vernacular, have text nodes of hello, title
    • 0:57:49and hello, body, respectively.
    • 0:57:51So this is going to be useful later today because it turns out,
    • 0:57:54with JavaScript, an actual programming language,
    • 0:57:57we can start to modify this tree in the computer's memory or RAM
    • 0:58:01and make the page dynamically change by essentially
    • 0:58:05creating new HTML on the fly, even if that didn't come from the server.
    • 0:58:09Case in point, many of you use Gmail or maybe Outlook.
    • 0:58:13Generally speaking, you don't have to reload the page
    • 0:58:15to see if you've got new mail.
    • 0:58:16It just magically appears at the top of the page in kind of a stack.
    • 0:58:20And it just keeps pushing old mail down, down, down.
    • 0:58:23Well, that's going to be the result of some JavaScript
    • 0:58:26code updating this tree in memory.
    • 0:58:28And it has the effect of just dynamically generating
    • 0:58:31more and more HTML that represents your email's inbox, for instance.
    • 0:58:36All right.
    • 0:58:36So with that said, why don't we go ahead and actually
    • 0:58:39try this out in a couple of ways.
    • 0:58:42So let me go back to VS Code here.
    • 0:58:44Let me propose to actually tweak my code here a little bit.
    • 0:58:50So let me go into, let's see, my VS Code editor here.
    • 0:58:55Let me zoom out.
    • 0:58:57And notice down below, actually, all this time
    • 0:59:00as I was clicking on hello.html, my HTTP server program
    • 0:59:04actually is outputting sort of the logs from a server.
    • 0:59:07It turns out any time you request a page with a browser from a server,
    • 0:59:11that server is probably logging a little something about you.
    • 0:59:14One, it's probably logging your IP address.
    • 0:59:16Two, it's probably logging the type of browser
    • 0:59:19you're using Chrome, or Safari, or Edge, or something like that.
    • 0:59:22It's probably logging the operating system version you're using,
    • 0:59:25be it Windows, or Mac OS, or Android, or iOS, or the like,
    • 0:59:28and maybe some other information as well.
    • 0:59:30We won't dwell on this today.
    • 0:59:32But there's a lot of information that will be logged about you, even if you
    • 0:59:36are in incognito mode or private mode.
    • 0:59:38So more on that next week.
    • 0:59:40And today, unlike all past lectures, even though by default you
    • 0:59:43see this in your own code space, you see here
    • 0:59:46a ports tab, which for the most part is not that useful for us today.
    • 0:59:51But you will see that this row here mentions HTTP server.
    • 0:59:55Why?
    • 0:59:56Because in my terminal, that command is still running.
    • 0:59:58It is a server.
    • 0:59:59And it's just there living to serve now by waiting and waiting and waiting
    • 1:00:02for me to click on more of those links.
    • 1:00:04And every time I do click on a link, I'll see another line of output here.
    • 1:00:08But it turns out that all this time in your ports tab of VS Code, you
    • 1:00:12can see all of the TCP ports, for instance, that are in use.
    • 1:00:16Now generally, you haven't needed any of those, at least for your own work.
    • 1:00:20But notice that HTTP server is indeed listening on Port 8080.
    • 1:00:24CS50 has some of its own customizations.
    • 1:00:26And this is a bit of a geek Easter egg.
    • 1:00:28But we presume to use Port 1337, which perhaps those more comfortable
    • 1:00:34will know what it means.
    • 1:00:35This is like leetspeak.
    • 1:00:36So it actually spells Leet if you're cool and use a 1, 7, and 2, 3.
    • 1:00:39OK.
    • 1:00:40So anyhow, we chose that port number.
    • 1:00:42But there are some conventions.
    • 1:00:44Next week we're going to actually start using Port 5,000, which
    • 1:00:46isn't in use at the moment.
    • 1:00:48But long story short, you can see this stuff underneath the hood.
    • 1:00:52And indeed, we're just sort of peeling back
    • 1:00:53some of these layers that have been there now for some time.
    • 1:00:56Well, let's go ahead and do this.
    • 1:00:57I'm going to go ahead and create another terminal window using my plus icon down
    • 1:01:03here in the console.
    • 1:01:04Notice that at the right-hand side of my screen, I now have two bash shells.
    • 1:01:08Bash is the name of your prompt, so to speak, where the dollar sign is.
    • 1:01:13If I click on the first one, there's HTTP server.
    • 1:01:16It's still running.
    • 1:01:16And I want it to keep running today.
    • 1:01:18But I'd also like to be able to run more commands in my code space.
    • 1:01:22So I've simply created a second terminal.
    • 1:01:24And I can go back and forth by clicking it right.
    • 1:01:26Let me go ahead now and copy hello.html like that and create a brand new file
    • 1:01:32called--
    • 1:01:33how about paragraphs.html?
    • 1:01:36And in paragraphs.html, I'm going to first paste all of that.
    • 1:01:39I'm going to hide my terminal window now without stopping HTTP server.
    • 1:01:43And I'm going to go ahead and just create some paragraphs of text.
    • 1:01:46And in fact, let me go ahead and cheat here real quick.
    • 1:01:49I'm going to go ahead and, in my other window here secretly, open up
    • 1:01:54a whole bunch of text so that I can grab some Latin-like text to copy paste.
    • 1:02:00So now I'm back.
    • 1:02:01And all I did was secretly copy paste a whole bunch of text.
    • 1:02:03I'm going to make a couple of changes to this file, where I currently
    • 1:02:06have just a title and a body.
    • 1:02:08One, I'm going to rename this to paragraphs, just so I can keep straight
    • 1:02:12which file is which.
    • 1:02:13And down here, I'm going to go ahead and paste in a big paragraph of text.
    • 1:02:17This is not actually Latin.
    • 1:02:19It's sort of lorem ipsum text, which is Latin-like random words that's
    • 1:02:23meant to look like Latin.
    • 1:02:24And typographers historically used this as sort of placeholders
    • 1:02:27for actual text.
    • 1:02:28But notice this is a pretty decently long paragraph.
    • 1:02:31And so it's going to make my web page a bit bigger.
    • 1:02:34So let me go back to my other tab, where I have hello.html open from before.
    • 1:02:39Let me click back.
    • 1:02:40And now notice, in my directory listing, I have a new file, paragraphs.html.
    • 1:02:45Let me go ahead and open that up.
    • 1:02:46And voila, there is a big paragraph of text.
    • 1:02:50Just for fun, let me create three such paragraphs.
    • 1:02:53So I'm going to cheat temporarily and just copy and paste two more times.
    • 1:02:58But I'm going to separate it with a blank line,
    • 1:03:00as you would in, like, Google Docs or Microsoft Word for paragraphs
    • 1:03:03in English or any language.
    • 1:03:04And I'm going to go back to my paragraphs.
    • 1:03:06Nothing has changed yet because HTTP, just like the exercise with Phyllis
    • 1:03:10and Brian, requires that we send the packets back and forth if we
    • 1:03:14want to get updated content.
    • 1:03:16So I have to click my browser's reload button, or hit Control R or Command R,
    • 1:03:20depending on your browser or OS, and notice that when I do that,
    • 1:03:24I definitely get more text.
    • 1:03:26But it just looks like one big blob, not three separate paragraphs.
    • 1:03:31What might your intuition be for why that
    • 1:03:33is, even though I've clearly indented this and given blank lines between?
    • 1:03:39Yeah?
    • 1:03:39AUDIENCE: HTML doesn't care about the whitespace.
    • 1:03:41DAVID MALAN: Yeah.
    • 1:03:42So HTML doesn't care about the whitespace or technically,
    • 1:03:45more than one whitespace.
    • 1:03:47I can hit as many Enters as I want.
    • 1:03:49All of them are going to be ignored except for a single space.
    • 1:03:52It's going to be normalized to just a single space.
    • 1:03:55In general, this is useful.
    • 1:03:56Because it means I can pretty print my HTML and indent things visually,
    • 1:04:00even if I don't want the browser to indent anything manually for me.
    • 1:04:03But here's where we're going to need some more tags.
    • 1:04:05And it turns out the simplest fix for this problem
    • 1:04:08is to use the paragraph tag.
    • 1:04:10And for short, it's just open bracket p close bracket.
    • 1:04:13I'm going to be a little pedantic, and even though VS Code
    • 1:04:15is being a little annoying because it's trying to autocomplete my thoughts
    • 1:04:18but I don't want it to autocomplete just yet,
    • 1:04:20sometimes you have to fight with the text editor.
    • 1:04:22So these autocomplete features have upsides and downsides.
    • 1:04:25But I'm going to go ahead and put a paragraph tag,
    • 1:04:28open and close around each of these paragraphs.
    • 1:04:31And I'm going to maintain my indentation, just to keep
    • 1:04:33it visually clean on the screen.
    • 1:04:35And now I'm going to put this one last close tag on this line here.
    • 1:04:40And so it's a lot more verbose.
    • 1:04:42But notice that it's effectively telling the browser start a paragraph,
    • 1:04:46end a paragraph, start a paragraph, end a paragraph, and so forth.
    • 1:04:49So if I go back to my other tab and I click Reload,
    • 1:04:53now we have some semblance of what I expected,
    • 1:04:55which is three separate paragraphs in this case.
    • 1:04:58All right?
    • 1:04:59So that's the p tag, the paragraph tag.
    • 1:05:01P for short, because as you'll see, many of these tags are
    • 1:05:03abbreviated just because they're slightly faster to type.
    • 1:05:06Let's do another example.
    • 1:05:08Let me go back to VS Code here.
    • 1:05:10I'm going to copy this text.
    • 1:05:11I'm going to create a new file called--
    • 1:05:13how about headings.html?
    • 1:05:17And I'm going to paste this, close my terminal just to give me more room.
    • 1:05:21I'm going to rename the title to be Headings,
    • 1:05:23just to keep straight which is which.
    • 1:05:24I'm going to delete all of these paragraphs to make it-- actually,
    • 1:05:27no, let's not do that.
    • 1:05:28Let's keep the paragraphs.
    • 1:05:30But like an academic paper or a textbook,
    • 1:05:33let's give these chapter headings or section headings or the like.
    • 1:05:37Well, I could just do something like this.
    • 1:05:40How about 1?
    • 1:05:42And then down here I could put 2, and then down here I could put 3.
    • 1:05:47But of course, if I reload this, it's not really going to look as I-- whoops,
    • 1:05:52if I go back to this directory listing, open up headings.html, it's fine.
    • 1:05:57It's not super pretty.
    • 1:05:58But it would be nice to give a little more prominence to these headings.
    • 1:06:01And in fact, there's a bunch of tags for this.
    • 1:06:03I can use H1, for instance, for one really big heading.
    • 1:06:07And then let me close the tag over here and indent.
    • 1:06:10Then down here-- and, again, whitespace doesn't matter,
    • 1:06:12so I'm going to give myself a little bit of breathing room just so it's clear
    • 1:06:15which of these is which.
    • 1:06:16For this, maybe it's not Chapter 2, but Section 2.
    • 1:06:19So let me do H2.
    • 1:06:20And then inside of this, I'm going to go ahead and do 2.
    • 1:06:24And just to be clear, I don't have to put these on their own lines.
    • 1:06:27I'm just doing that to be a bit pedantic.
    • 1:06:29You can technically just do this and keep everything on one line.
    • 1:06:32But I'll be consistent, at least.
    • 1:06:33But either approach is fine.
    • 1:06:35And then, down here, I'm going to use maybe a sub subsection.
    • 1:06:37So let me delete this and do h3.
    • 1:06:39I'm just going to write the word three.
    • 1:06:41And then just to be neat, I'm going to indent everything like this here.
    • 1:06:45So now if I go back to headings and I reload,
    • 1:06:47I'm going to get some default formatting.
    • 1:06:49It might not be the formatting you want, but it
    • 1:06:51looks like it's big and bold, but in decreasing order.
    • 1:06:54H1 is the biggest.
    • 1:06:56H2 is smaller.
    • 1:06:57H3 is even smaller.
    • 1:06:58And you can go down to h6.
    • 1:07:00And it gets smaller and smaller.
    • 1:07:02And at that point, if you've got, like, sub sub sub sub
    • 1:07:04subsections of your book or paper, you're probably organizing it poorly.
    • 1:07:08So they stop at some point there.
    • 1:07:10All right.
    • 1:07:11Well, what else can we do in HTML?
    • 1:07:12These things are omnipresent.
    • 1:07:13Let me copy this HTML and close that tab, open my terminal,
    • 1:07:17and create a new file, like, code list.html.
    • 1:07:21And let's make a list of information.
    • 1:07:23Let me just paste that HTML, just to save some time today, and change
    • 1:07:26my title to list.
    • 1:07:28Let me get rid of all of these paragraphs, just to simplify things.
    • 1:07:32So now I'm sort of back to where I began.
    • 1:07:35And then inside of the body of this page, let me go ahead and make a list,
    • 1:07:39like foo, bar, baz.
    • 1:07:41If you've never heard these words, these are, like,
    • 1:07:43computer scientists go-to words.
    • 1:07:45A mathematician might choose x, y, and z by default.
    • 1:07:48CS people tend to go with foo, bar, and baz for historical reasons.
    • 1:07:51So here's a list of three arbitrary words.
    • 1:07:54If I go over to my other tab, go back to my directory listing,
    • 1:07:59there's my new file.
    • 1:08:00Let's click on list.html, same problem.
    • 1:08:03It's a list.
    • 1:08:03But it's not one after the other.
    • 1:08:06Last time, of course, we fixed this with paragraphs.
    • 1:08:08But you know what'd be nice?
    • 1:08:09To make it a little prettier, like a bulleted list, which
    • 1:08:11are kind of everywhere these days.
    • 1:08:12So I could try to simulate this.
    • 1:08:15And you might be in the habit of doing this in some programs.
    • 1:08:18But of course, if I go back to my other tab, Reload,
    • 1:08:21I'm just sort of making the problem worse visually.
    • 1:08:23But it turns out--
    • 1:08:25let me undo that-- there is an unordered list tag, otherwise known
    • 1:08:30as ul for short, that I can put all three
    • 1:08:33of these words in an unordered list.
    • 1:08:35Let me go ahead and indent everything consistently.
    • 1:08:38But to have three items in this list, I actually
    • 1:08:41need another tag, a list item tag.
    • 1:08:44And I'm going to go ahead and add that tag there, list item here and there,
    • 1:08:50and then another list item tag here.
    • 1:08:52And here's where it's a stylistic choice.
    • 1:08:54I could move foo and bar and baz onto their own lines.
    • 1:08:57But this is going to start to get excessively tall, like, too
    • 1:09:00much white space.
    • 1:09:00So reasonable people will disagree.
    • 1:09:02But this feels a little more readable to me.
    • 1:09:04So I'm going to leave it as such.
    • 1:09:05Go back to my other tab.
    • 1:09:07And now when I reload, you get a nice bulleted list by default.
    • 1:09:11And you see these all over the web.
    • 1:09:12What if I want to have a numbered list, that is to say, ordered list?
    • 1:09:16Any instincts for changing these bullets to numbers?
    • 1:09:20So ol is a good instinct.
    • 1:09:22And, indeed, sometimes HTML makes perfect sense.
    • 1:09:25As in this case, if I change ul to ol, I don't have to manually number anything.
    • 1:09:29Because when I reload, it's going to use Arabic numerals automatically
    • 1:09:33for me like this, top to bottom.
    • 1:09:35And what's nice about this is, if I go in and I insert things in the middle,
    • 1:09:39I don't have to manually renumber things.
    • 1:09:41The browser is going to do the counting for me.
    • 1:09:43And if you're doing an outline, you can actually
    • 1:09:45specify whether you want 1, 2, 3, or A, B, C, or I,
    • 1:09:49double I, triple I, or so forth.
    • 1:09:50There's different numbering systems you can use.
    • 1:09:53But by default, we get our decimal numbers here.
    • 1:09:56I'm going quickly.
    • 1:09:57But it's hard to get too excited about bulleted lists and such.
    • 1:10:01But any questions on these tags thus far?
    • 1:10:06We'll by design try to escalate quickly momentarily.
    • 1:10:09All right.
    • 1:10:10So how about just a few other tags to make things more visually interesting?
    • 1:10:14Let me go ahead here and cheat by opening up a file
    • 1:10:18that I made in advance that's going to demonstrate what a table looks like.
    • 1:10:21So here let me open a file that I brought with me called table.html.
    • 1:10:25And because I brought it with me, I actually included a comment at the top.
    • 1:10:29And in fact, if you download today's files from the website,
    • 1:10:31you'll see that they're generally commented,
    • 1:10:33like our C code and Python code was.
    • 1:10:35It's a little weird.
    • 1:10:36But here is the syntax for a comment in HTML.
    • 1:10:39It's a less than sign, or open bracket, then an exclamation point, then dash
    • 1:10:45dash, two hyphens.
    • 1:10:46Then at the very end of the comment, it's almost the opposite but not quite.
    • 1:10:50It's hyphen hyphen close bracket instead.
    • 1:10:53Why these symbols?
    • 1:10:54Humans probably decided years ago that there's
    • 1:10:56no way someone's going to accidentally type or rather, intentionally
    • 1:11:00type those characters visually.
    • 1:11:02So let's use them for comment symbols as well.
    • 1:11:04If you really want to type them, there is a way around that.
    • 1:11:06But here is my table title.
    • 1:11:08And here is just kind of a little, maybe, guessing game.
    • 1:11:12Here is a table tag with a tr child.
    • 1:11:16And here's the closed child.
    • 1:11:18And then there's a bunch of td tags.
    • 1:11:20So I'll give you tr stands for table row.
    • 1:11:23td stands for table data, AKA cell, to borrow language
    • 1:11:28from, like, spreadsheet software.
    • 1:11:29Does anyone want to guess what this file is
    • 1:11:32going to look like if I open table.html in my browser?
    • 1:11:37What is this reminiscent of?
    • 1:11:38Yeah?
    • 1:11:39AUDIENCE: Num pad.
    • 1:11:40DAVID MALAN: Yeah.
    • 1:11:40So it's like a numeric keypad from a phone,
    • 1:11:42for instance, if you're dialing someone's number manually.
    • 1:11:45So let me actually go to my other tab.
    • 1:11:46Go back to my directory index.
    • 1:11:49There's table.html.
    • 1:11:50And it's not going to look very pretty.
    • 1:11:52But it is structured in the way I might expect.
    • 1:11:54And in my browser, I'm going to go ahead and just zoom in.
    • 1:11:56Command plus or Control plus will generally do this.
    • 1:11:59It does look like it's laid out tabular in rows and columns
    • 1:12:02with everything very nicely aligned.
    • 1:12:04So that might be useful as we get to larger and larger data sets.
    • 1:12:07Let me go back to VS Code here.
    • 1:12:09Let me create one more program, for instance.
    • 1:12:12And how about code image.html?
    • 1:12:15And just to save time, let me paste that code.
    • 1:12:18And also, let me secretly copy over a file
    • 1:12:21that I brought with me that we've seen in the past.
    • 1:12:23Let me close my terminal.
    • 1:12:25I'm going to delete everything about tables from this file
    • 1:12:28because I'm just saving time by copying and pasting.
    • 1:12:30But I'm going to rename the top to image.
    • 1:12:32I'm going to get rid of the comment because it's no longer applicable.
    • 1:12:35But in the body of this page, I'm going to link to maybe an image of the Weeks
    • 1:12:40bridge by the river.
    • 1:12:41So I'm going to use an image tag, img for short.
    • 1:12:45And now, huh, it's obviously not going to be sufficient to just say image tag.
    • 1:12:49Because what image?
    • 1:12:50So here is where attributes, again, get useful.
    • 1:12:53This attribute earlier, though I didn't quite highlight it,
    • 1:12:56seems to indicate that this page is largely in English, as have
    • 1:12:59been my past ones, the Latin one aside.
    • 1:13:01That attribute on the HTML tag is useful for browsers that have Google Translate
    • 1:13:07or something similar built in.
    • 1:13:08And also, it's useful for SEO, search engine optimization.
    • 1:13:11Because when Google and Bing sort of automatically
    • 1:13:14crawl my web page in the future, they'll know what language
    • 1:13:17I intend for most of the content to be in, which might help them index
    • 1:13:20it and keep track of it for search results.
    • 1:13:22So here, for the image tag, I'm similarly going to need an attribute.
    • 1:13:26And that attribute is called source, src for short.
    • 1:13:29And what you put inside of its quotes for its value, double quotes
    • 1:13:32or single quotes, is the name of the image that you want to include.
    • 1:13:36And I include it in advance in my code space,
    • 1:13:39a file called bridge dot ping from Week 4 when we played around with images.
    • 1:13:43And if I go ahead now and go to my other tab, go back to my directory index
    • 1:13:48and zoom out, you'll see now not only bridge.png,
    • 1:13:52portable network graphic, which I manually copied in, but also
    • 1:13:55image.html, which I just created.
    • 1:13:57And voila, here is that same Weeks bridge.
    • 1:14:01It's a little too big for my browser window.
    • 1:14:03We'll see in a little bit how we can fix things like that.
    • 1:14:06But indeed, that's an image that's now embedded into the page.
    • 1:14:10But notice, if this image were ever broken,
    • 1:14:13or if I had visual difficulties such that I might have screen reader
    • 1:14:17software for accessibility installed, it's
    • 1:14:19generally good practice to also make sure
    • 1:14:22that pages are accessible as possible.
    • 1:14:24And so some tags have additional attributes you can include.
    • 1:14:27Like, for an image here, there's actually
    • 1:14:29an Alt attribute that specifies alternative text
    • 1:14:32to describe this image.
    • 1:14:34This is what a human would see if they have
    • 1:14:36a very slow interconnect connection.
    • 1:14:37And before the image downloads, they can see this alternative text.
    • 1:14:40Or if I'm blind, I need a screen reader, I
    • 1:14:43could have these words recited to me verbally by providing this clue.
    • 1:14:47So it's best practice to include this, like, photo of bridge
    • 1:14:50so that all users can know what they're looking at, clicking on, or the like,
    • 1:14:54so keeping that in mind, too.
    • 1:14:56All right.
    • 1:14:56Let's do one other piece of multimedia.
    • 1:14:59Let me close these two tabs.
    • 1:15:01Let me open my terminal and open up a file called video.html.
    • 1:15:06Let me go ahead and copy, secretly, a file called video.mp4,
    • 1:15:10which is a common video file format, and close my terminal window
    • 1:15:15and go ahead and paste in here some HTML from before.
    • 1:15:18But let's now embed a video file, as you might if making a video-based website.
    • 1:15:23Let me rename this one, too, to video.
    • 1:15:25Let me get rid of the old comment, which is not applicable.
    • 1:15:27And it turns out videos are almost as simple.
    • 1:15:30There is a video tag.
    • 1:15:33There is a bunch of different attributes we can put on that.
    • 1:15:36But I'll come back to that in a moment.
    • 1:15:38But videos, because you might want to have high resolution, low resolution,
    • 1:15:42depending on people's bandwidth, because these things can be big,
    • 1:15:44they actually have source children.
    • 1:15:47And confusingly, it's actually S-O-U-R-C-E, not S-R-C, in this case.
    • 1:15:52And even more annoyingly, it takes an attribute called source.src.
    • 1:15:57This is not good design.
    • 1:15:58But this is what we're stuck with, video.mp4.
    • 1:16:01And then the type of this video, which you could generally
    • 1:16:04look up if the browser doesn't recognize it, video/mp4.
    • 1:16:07This is what's known as a content type or mime type.
    • 1:16:10And then, I can actually configure this.
    • 1:16:12And you would only know this by taking a class, reading a book,
    • 1:16:14looking at an online reference.
    • 1:16:16I can actually add some video controls to the website,
    • 1:16:19like a Play button, a Pause button, and all of that.
    • 1:16:21I can mute the video by default. And so this
    • 1:16:24is just going to modify the behavior of this video tag.
    • 1:16:26But this is anomalous.
    • 1:16:28For some attributes, it just doesn't make sense to have values.
    • 1:16:32Because muted, it sort of says all the information we need.
    • 1:16:36We could do, quote, unquote, "true."
    • 1:16:38But humans decided years ago not to bother with that.
    • 1:16:41So some attributes do not need value.
    • 1:16:44So you do not need equal signs or quotation marks.
    • 1:16:46And you would only know this from, say, documentation.
    • 1:16:49All right.
    • 1:16:50Let me go back to my directory listing.
    • 1:16:52Let me go back here to this here.
    • 1:16:54You'll see that there's now not only video.mp4, but also video.html.
    • 1:16:59I hope you'll forgive me for this.
    • 1:17:01There's at least no sound.
    • 1:17:02But when I click on this page, it embeds a video here,
    • 1:17:05which I can then click on the controls for.
    • 1:17:07And you see some short video file playing here, albeit without sound.
    • 1:17:11All right.
    • 1:17:11None of that, let me go back here to my VS Code.
    • 1:17:14And let's play around now with what the web is really known for,
    • 1:17:17which is hyperlinks.
    • 1:17:19So hypertext markup language, HTML, is all
    • 1:17:22about linking one site to another, one page to another.
    • 1:17:26And nothing we've done thus far is interactive
    • 1:17:28beyond this own video controls.
    • 1:17:30So let me go ahead and do this.
    • 1:17:38Let me go into VS Code here.
    • 1:17:41And let me go ahead and create the simplest of files
    • 1:17:44that just allows me to click on a link.
    • 1:17:46So let me go ahead and copy this to save time,
    • 1:17:49open up VS code's terminal window.
    • 1:17:51Code a file called link.html.
    • 1:17:54I'll close my terminal.
    • 1:17:55Paste this code.
    • 1:17:56Rename video to link.
    • 1:17:57Get rid of the actual video tag.
    • 1:17:59And in the body of this page, let's do something simple like invite people
    • 1:18:02to visit, for instance, Harvard.
    • 1:18:06All right.
    • 1:18:06If I now go to my directory index and reload, we'll now see link.html.
    • 1:18:11And of course, this doesn't really do anything useful,
    • 1:18:15because I literally just used English text.
    • 1:18:17All right.
    • 1:18:17Well, what if I do what you're in the habit of doing
    • 1:18:20on social media and various websites, visit harvard.edu.
    • 1:18:25Let me go back to the web page, reload.
    • 1:18:27The text changes.
    • 1:18:28But it's clearly not automatically linking.
    • 1:18:31I still can't click on this.
    • 1:18:32All right.
    • 1:18:33Well, maybe it needs to be www.harvard.edu.
    • 1:18:36Let me go back, reload.
    • 1:18:38All right.
    • 1:18:39Still not auto linking.
    • 1:18:40Let me go over here.
    • 1:18:41And maybe it needs https:// and a slash at the end, like a full URL.
    • 1:18:46Let's go over here, reload.
    • 1:18:47And it's still not working.
    • 1:18:49I can highlight and copy it, but that's not very user friendly.
    • 1:18:52So what's going on?
    • 1:18:53Well, all of today's social media sites, when you copy paste a URL,
    • 1:18:57someone at the server side wrote code, be it
    • 1:19:00in Python or JavaScript or anything else,
    • 1:19:03to automatically notice and detect URLs and then
    • 1:19:06wrap them with HTML tags that actually hyperlink them.
    • 1:19:11So what I actually need to do here is this.
    • 1:19:14I'm going to introduce an anchor tag, a for short.
    • 1:19:18The hyper reference attribute of which is the URL that I want
    • 1:19:21to send the user to, so href for short.
    • 1:19:25I'm going to close the tag.
    • 1:19:26But then, in between the start tag and close tag,
    • 1:19:29I'm now going to put the text that I want the human to see.
    • 1:19:33So it's a lot more verbose.
    • 1:19:35But this is what websites like social media sites
    • 1:19:38are generating automatically for you when they just detect with a pattern
    • 1:19:42that you have typed something that indeed looks like a URL.
    • 1:19:45Let me go back to VS Code.
    • 1:19:47Let me go back to this tab here and reload.
    • 1:19:49And now we actually see a working link.
    • 1:19:52And this is going to be super small.
    • 1:19:54You're not going to be able to see this quite well.
    • 1:19:56But if you hover over this link, you'll generally see in most browsers
    • 1:19:59a little clue at the bottom as to where you're going
    • 1:20:01to be directed before you click there.
    • 1:20:03This can help if you're a little suspicious
    • 1:20:04and might not want to click on the actual link.
    • 1:20:06It's small on my screen, but hopefully more visible on yours.
    • 1:20:09That's not generally the case on mobile in quite, though, the same way.
    • 1:20:13But notice that this very simple primitive of anchor tags like this
    • 1:20:16can pretty quickly be abused, unfortunately.
    • 1:20:20In fact, let me go ahead here and go back to VS Code.
    • 1:20:24And I could do something malicious like this,
    • 1:20:26like, actually trick someone into applying to Harvard instead of Yale
    • 1:20:30by just changing the href to not match the text that the human is seeing.
    • 1:20:35And if I reload the page here, you'll see
    • 1:20:37that it looks like I'm going to Yale.
    • 1:20:39But notice, super small, bottom left-hand of my screen,
    • 1:20:42it still says the real URL.
    • 1:20:44But you can get even more malicious.
    • 1:20:45You can not just say Yale.
    • 1:20:47You could literally say https://www.yale.edu/.
    • 1:20:50You can make it look like a real URL, reload it.
    • 1:20:54And now it's really quite malicious.
    • 1:20:57And this is representative of what you all probably know already as phishing
    • 1:21:00attacks, P-H-I-S-H-I-N-G, whereby you're being socially engineered.
    • 1:21:05People are trying to dupe you into clicking something
    • 1:21:07that leads you to your PayPal account, typically,
    • 1:21:10so that you log into some bogus website.
    • 1:21:12Now you've given them access to your account and you're out some money.
    • 1:21:16It's this simple because of, unfortunately,
    • 1:21:19these building blocks of HTML.
    • 1:21:22All right.
    • 1:21:23With that said, any questions on this?
    • 1:21:29No?
    • 1:21:29All right.
    • 1:21:30How about just for one final flourish before snacks will be served,
    • 1:21:34let me propose to introduce some final features herein.
    • 1:21:39It turns out, and I'll open some of these premade already.
    • 1:21:42Let me open up VS Code and open up a file called meta0.html.
    • 1:21:48This has nothing to do with Meta, the social media company.
    • 1:21:51It has to do with metadata, or specifically, meta tag.
    • 1:21:55It turns out that in the head of the web pages that we've written thus far,
    • 1:21:58we've only had titles.
    • 1:21:59But it turns out there's actually literally a tag
    • 1:22:02called meta that has a couple of attributes like name and content.
    • 1:22:06And this one here, it's a little arcane, but it's very common
    • 1:22:09to copy paste these into the source code for websites
    • 1:22:12nowadays because essentially, this makes them mobile friendly.
    • 1:22:15Instead of making the font some default small size,
    • 1:22:18it will take into account the width of the phone
    • 1:22:21or the tablet and sort of scale the font proportionally.
    • 1:22:24So there's some useful accessibility and user friendly tips like this.
    • 1:22:27There's other use cases for meta tags like this.
    • 1:22:30Let me open a file called meta1.html that I made in advance.
    • 1:22:34Here are three meta tags inside of this file.
    • 1:22:38They're using a property attribute with a content attribute as well.
    • 1:22:42And this is a little more specific.
    • 1:22:44But nowadays, too, on social media, when you copy and paste
    • 1:22:47a URL into a message online and hit Enter,
    • 1:22:50you very often see a preview of that link.
    • 1:22:52It's sort of automatically generated.
    • 1:22:54It makes a nice pretty image and some nice fonts.
    • 1:22:56Where does that image come from?
    • 1:22:58Where does that information come from?
    • 1:23:00From these meta tags, any web page can have meta tags like this
    • 1:23:04so that when this page's URL is copy pasted
    • 1:23:07into social media sites or others, those sites
    • 1:23:10know what preview to show to humans.
    • 1:23:13It comes literally from the values of these tags.
    • 1:23:15So for instance, this would create some user friendly preview
    • 1:23:18that says CS50, Introduction to The Intellectual Enterprises
    • 1:23:21of Computer Science and The Art of Programming.
    • 1:23:23And in this case, it would show a picture of a cat
    • 1:23:25as the default image for that particular page.
    • 1:23:28You have full control as a web developer over those kinds of things.
    • 1:23:33Lastly, when it comes to features of HTML, let's go ahead and quickly
    • 1:23:39reimplement Google, if we may.
    • 1:23:41So let me go ahead and create a new file here called search.html.
    • 1:23:47Let me copy paste some code to save time.
    • 1:23:50Let me go ahead and get rid of all of these meta
    • 1:23:53tags to make a different point with this one.
    • 1:23:55Let me get rid of that comment.
    • 1:23:57Change this title to be, say, search instead.
    • 1:24:01And inside of the body here, let's do this.
    • 1:24:04I'm going to introduce a form tag.
    • 1:24:06And now in the form tag, I'm going to create an input, a text input.
    • 1:24:10And let's go ahead and let's just say that.
    • 1:24:15And now I'm going to have a button that has,
    • 1:24:18let's say, button, that has a value of search, so super simple and not yet
    • 1:24:25complete.
    • 1:24:26But let me go to my directory index and back.
    • 1:24:29Let me open up search.html.
    • 1:24:31And I actually have the beginnings of a search
    • 1:24:33form, an interactive form for the web.
    • 1:24:35But it doesn't actually do anything useful yet.
    • 1:24:37But let me do this.
    • 1:24:38Let me go to the actual google.com.
    • 1:24:41Let me search for something like cats, C-A-T-S.
    • 1:24:43And of course, we're going to see a whole bunch of cats here.
    • 1:24:46And we're going to see that the search box was automatically
    • 1:24:50populated at the very top of the page.
    • 1:24:52Now the URL that Google led me to, even though I
    • 1:24:55started at the very simple google.com, is actually pretty long.
    • 1:24:59And I'm going to frankly just delete anything I don't understand.
    • 1:25:01Because I'm going to distill this URL to just this one here.
    • 1:25:05It turns out that in URLs you can also put user input
    • 1:25:09in the form of key value pairs.
    • 1:25:11So in any URL, you can actually have not only a path
    • 1:25:14like we saw earlier, you can have a path with a key
    • 1:25:18and a value prefixed with a single question mark.
    • 1:25:21And in fact, if you want to have two keys and values,
    • 1:25:23you just interpose them with an ampersand instead.
    • 1:25:27So this is to say there is a standard way in HTML
    • 1:25:30and really HTTP for sending input from a browser to a server.
    • 1:25:35And it's generally formatted like this.
    • 1:25:36What this means is actually this.
    • 1:25:39Let me zoom out, close that tab, and open a brand new one.
    • 1:25:42And let me manually go to-- and I'll zoom
    • 1:25:44in-- https://wwww.google.com/search?q=dogs.
    • 1:25:53Now it has to be q, because that's what Larry and Sergey of Google fame
    • 1:25:56decided two decades ago when they made Google itself.
    • 1:25:59Q stands for query.
    • 1:26:01But they could have called that key anything they want.
    • 1:26:03I'm going to hit Enter after zooming out.
    • 1:26:05And what you'll see is that I don't need google.com to search for me.
    • 1:26:08I can literally go to a URL of all of the dog search results manually.
    • 1:26:13Now no one's normally going to do that.
    • 1:26:15That makes no sense.
    • 1:26:16But it does suggest how simple the mechanics of the web are.
    • 1:26:20If you want to pass input to a server, you suffix the URL
    • 1:26:23with a question mark, key equals value.
    • 1:26:26Key equals value may be separated you buy these ampersands, as I proposed.
    • 1:26:30So what does this mean?
    • 1:26:31Well, Google really did the hard part, the back end, the database.
    • 1:26:34They crawled the internet and found all of these cats and dogs.
    • 1:26:37But I can make the front end, that is the user
    • 1:26:39interface that still works for it.
    • 1:26:41And I'm going to do this.
    • 1:26:42I'm going to add an attribute to my form tag that
    • 1:26:45specifies an action attribute of https://www.google.com/search.
    • 1:26:55And I'm going to specify that the method I want the browser to use
    • 1:26:58is indeed get.
    • 1:26:59This is inconsistent.
    • 1:27:00I capitalized it as all caps before.
    • 1:27:02In HTML, you actually do it as lowercase.
    • 1:27:04But that's also the default. So strictly speaking, I
    • 1:27:06don't even need to specify that.
    • 1:27:08But I will, just to be pedantic.
    • 1:27:10Inside of my input, my text box, which used
    • 1:27:13to look like this, just a big white rectangle,
    • 1:27:15I'm going to actually give it a name of q, because I
    • 1:27:18know that's what Google servers expect.
    • 1:27:20And I'm also going to specify--
    • 1:27:24eh, just that for now.
    • 1:27:26Let me go back now and reload.
    • 1:27:28And it's going to still look very simple.
    • 1:27:30But notice this.
    • 1:27:31If I type in cats and click Search, in just a moment,
    • 1:27:35I'm going to be whisked away from my own Codespaces URL ending
    • 1:27:39in search.html to, after zooming out and clicking Search, the actual google.com.
    • 1:27:45Which prepopulates the URL with q equals cats up top,
    • 1:27:50prepopulates this text box with the user's input,
    • 1:27:52which is to say, like, the front end of google.com is trivial,
    • 1:27:57as is most every website.
    • 1:27:58It's as simple as these key value pairs and things like web forms like that.
    • 1:28:03Now I can make this a little prettier.
    • 1:28:05And just so you've seen it, if I specified that the type of this input
    • 1:28:08isn't text, which is the default, but is search,
    • 1:28:11I actually get some nice features.
    • 1:28:13Let me reload this now.
    • 1:28:14And if I start typing in, like, dogs, now I get this little x
    • 1:28:17to click, which clears it.
    • 1:28:18So a lot of websites have that.
    • 1:28:19It's a little bit of a nicety.
    • 1:28:21If you don't know what you want the user to type in,
    • 1:28:23you can actually be kind of explicit for them.
    • 1:28:25And you can add a placeholder attribute that says query or keywords
    • 1:28:29or whatever you want to show them.
    • 1:28:30If I go back to the browser and reload, you'll
    • 1:28:33see a grayed out text that's not actually there.
    • 1:28:36It goes away if I type in bird, for instance.
    • 1:28:38But it's explanatory, placeholder text for the user.
    • 1:28:41You'll notice that it wants to autocomplete cats or bird or dog
    • 1:28:45or anything I've typed before.
    • 1:28:46You can disable that.
    • 1:28:48There is an attribute called autocomplete
    • 1:28:51whose value can be either on, which is default, or off, which
    • 1:28:55can be explicitly specified.
    • 1:28:57And notice this, too.
    • 1:28:58When I reload the page, it's actually annoying in terms of user experience.
    • 1:29:03Before I can search for anything, I have to move my cursor,
    • 1:29:05I have to click in the text box.
    • 1:29:06And now it has focus, so to speak.
    • 1:29:08It gets highlighted in some color, usually blue.
    • 1:29:11That's not the best website.
    • 1:29:12Why are you making the users pick up their mouse or their trackpad just
    • 1:29:15to click on the only thing they're going to do anyway?
    • 1:29:18So there's another attribute that's handy,
    • 1:29:20Auto Focus, which will just move the cursor there for the user.
    • 1:29:24So this is to say, even though a lot of websites don't do this,
    • 1:29:27there's a lot of functionality that you can enable by just
    • 1:29:30knowing the language all the more.
    • 1:29:32So with that, we now have a pretty useful feature.
    • 1:29:36In fact, heck, I can say this is Google Search,
    • 1:29:38change the value of that button, reload.
    • 1:29:41And now I'll go ahead and type in birds, Enter, and voila.
    • 1:29:45Now we have a whole bunch of birds as well.
    • 1:29:49So that's a lot.
    • 1:29:50I think it's definitely time for a snack.
    • 1:29:52So let's take a 10-minute break for a snack.
    • 1:29:53And when we come back, we'll make all of this look prettier.
    • 1:29:56All right.
    • 1:29:57So we are back.
    • 1:29:59And it was brought to my attention during break
    • 1:30:02that we were pretty darn close to clearing one of these rows.
    • 1:30:05And I will concede that your classmates, Darwin and Jude,
    • 1:30:09socially engineered me into saying one of the remaining squares
    • 1:30:12that they needed.
    • 1:30:13And so I'm sad to say that bingo was declared during break, which Carter
    • 1:30:17has already confirmed, because I was tricked into giving
    • 1:30:19a long answer to a short question.
    • 1:30:21So congratulations to those two.
    • 1:30:24I do dare say, too, that whole bit with safetyschool.org probably
    • 1:30:29isn't going over well in New Haven.
    • 1:30:30So I'm pretty sure we can check off this box here.
    • 1:30:33However, as promised, in fairness, since we love them both equally,
    • 1:30:37I thought it only fair to resume now with a look at perhaps one of the best
    • 1:30:42Harvard-Yale pranks that was actually on us,
    • 1:30:44with this 2.5-minute glimpse at how our classmates at Yale pranked Harvard some
    • 1:30:50years back.
    • 1:30:51If we could dim the lights now for this.
    • 1:30:53[VIDEO PLAYBACK]
    • 1:30:54[MUSIC PLAYING]
    • 1:31:16[CHEERING]
    • 1:31:17[BAND MUSIC PLAYING]
    • 1:31:23- All the way at the top and then you pass it down.
    • 1:31:26[CROWD NOISE]
    • 1:31:26- [INAUDIBLE] this for you, Yale.
    • 1:31:29We love you, Yale.
    • 1:31:30- We're here to cheer for Harvard.
    • 1:31:32- Yeah!
    • 1:31:33Go Harvard!
    • 1:31:34- Go Harvard!
    • 1:31:36- [INAUDIBLE] one and pass it down?
    • 1:31:37- Pass them down.
    • 1:31:40- Great.
    • 1:31:41- It says go Harvard.
    • 1:31:44- We're nice.
    • 1:31:45- You see that [BLEEP]?
    • 1:31:47- Look at them.
    • 1:31:48They have the paper!
    • 1:31:49- It's going to happen.
    • 1:31:51- It's actually gonna happen!
    • 1:31:54- I can't [BLEEP] believe this!
    • 1:31:55- What do you think of Yale?
    • 1:31:57- They don't think good.
    • 1:31:58[LAUGHTER]
    • 1:31:59- It may be a complete mess.
    • 1:32:00I don't know.
    • 1:32:02- Dude, does everyone have it?
    • 1:32:03Does everyone have their stuff?
    • 1:32:05Does everyone have their stuff?
    • 1:32:06- The probability that it's going to be legible it's very small, though.
    • 1:32:09- I agree.
    • 1:32:10- It's too complicated.
    • 1:32:11- [INAUDIBLE].
    • 1:32:12- I know.
    • 1:32:12But it's too complicated.
    • 1:32:14- What houses are you guys in?
    • 1:32:16- [INAUDIBLE].
    • 1:32:16- That's not a real house.
    • 1:32:17- How many extra are there?
    • 1:32:18- Ho-fo.
    • 1:32:19- Yeah.
    • 1:32:22- You guys aren't from Harvard, are you?
    • 1:32:24- Fo-ho.
    • 1:32:26- Pforzheimer.
    • 1:32:26- Yeah, but you said ho-fi.
    • 1:32:28- Just make sure everyone has it.
    • 1:32:28- Well, she's probably drunk.
    • 1:32:30- It looks like they're still passing.
    • 1:32:31Are all the cards distributed?
    • 1:32:32- [INAUDIBLE].
    • 1:32:34- All right.
    • 1:32:34Let's do it now.
    • 1:32:35[CHEERING]
    • 1:32:47- Hold up your signs!
    • 1:32:48- [BLEEP].
    • 1:32:50[CHANTING]
    • 1:32:51- You suck.
    • 1:32:52You suck.
    • 1:32:53You suck.
    • 1:32:54You suck.
    • 1:32:55You suck.
    • 1:32:56You [BLEEP].
    • 1:32:57- Did it.
    • 1:32:58- [BLEEP].
    • 1:32:58- You suck.
    • 1:32:59You suck.
    • 1:33:00You suck.
    • 1:33:01You suck.
    • 1:33:02You suck.
    • 1:33:02You suck.
    • 1:33:05- What do you think of Yale, sir?
    • 1:33:07- [INAUDIBLE].
    • 1:33:08- One more time!
    • 1:33:09One more time!
    • 1:33:17- Oh, and there it goes again!
    • 1:33:20[CHANTING]
    • 1:33:21- Harvard sucks!
    • 1:33:22Harvard sucks!
    • 1:33:23Harvard sucks!
    • 1:33:25Harvard sucks!
    • 1:33:27Harvard sucks!
    • 1:33:28Harvard sucks!
    • 1:33:30Harvard sucks!
    • 1:33:30Harvard sucks!
    • 1:33:32Harvard sucks!
    • 1:33:33Harvard sucks!
    • 1:33:34Harvard sucks!
    • 1:33:35Harvard sucks!
    • 1:33:36[END PLAYBACK]
    • 1:33:37DAVID MALAN: So fair is fair there.
    • 1:33:38So now back to some HTML.
    • 1:33:41And we will transition momentarily then to this other language, CSS,
    • 1:33:44by which we can style things all the more.
    • 1:33:47So there's this feature in HTML that's actually present in Python,
    • 1:33:51even though we didn't use it yet, and that's present in JavaScript
    • 1:33:53and, really, most modern languages known as regular expressions.
    • 1:33:57Which is otherwise known as regexes, which
    • 1:33:59is a way of using patterns to validate input
    • 1:34:04or to extract information from strings.
    • 1:34:06And so by that I mean this.
    • 1:34:08Let me go over to VS Code here.
    • 1:34:10Let me go ahead and create a new file called register.html.
    • 1:34:14I'm going to copy paste some code from earlier, just to save some keystrokes.
    • 1:34:17And in here, I'm going to go ahead and change my title to register.
    • 1:34:21And in my code, I'm going to go ahead and create a very simple form
    • 1:34:24representative of a registration form now.
    • 1:34:26So in this body, I'm going to do a form tag.
    • 1:34:30I'm not going to bother sending it to Google or to any server in particular
    • 1:34:33here.
    • 1:34:34I'm going to give it an input tag with autocomplete equals off, as before.
    • 1:34:38I'm going to have auto focus on as before.
    • 1:34:40I'm going to give this form field the name of email this time instead of q.
    • 1:34:44I'm going to give it a placeholder of quote,
    • 1:34:46unquote "email," just so that the user knows what they're supposed to type.
    • 1:34:50And it turns out that browsers have not only type text or search, but also
    • 1:34:57type email, whereby you can rely on the browser to ensure that the human has
    • 1:35:00actually typed in an email address.
    • 1:35:02Now I'm going to go ahead and have a button
    • 1:35:03that this time will be called Register.
    • 1:35:05And now let's go over to my other tab, reload my directory index.
    • 1:35:09There's register.html.
    • 1:35:10And we'll see a relatively simple form field now.
    • 1:35:13But it's prompting me to register with some email address.
    • 1:35:16If I go ahead and sort of type in just my name and try Register,
    • 1:35:19you'll notice that the browser sort of yells at me with the built-in error
    • 1:35:22message saying, oh, please include an at in the email address.
    • 1:35:25And it's pretty good in that if I do mail an at, but nothing more,
    • 1:35:29which is also not valid, and try to register, it's telling me still
    • 1:35:33that it's incomplete.
    • 1:35:34So built into browsers is some defense against incorrect user input
    • 1:35:39in this way.
    • 1:35:40If I finally do type in malan@harvard.edu and click Register,
    • 1:35:44then the form would be submitted successfully to the server.
    • 1:35:47If, though, I want to tolerate only .edu addresses because I'm making
    • 1:35:52an education-themed website for students in the US,
    • 1:35:55I can actually add another attribute here, which is actually quite useful,
    • 1:35:59too.
    • 1:35:59I can add a pattern attribute.
    • 1:36:01And inside of its value, I can put one of these things called
    • 1:36:05a regular expression, or a regex.
    • 1:36:07That is an actual pattern that the browser
    • 1:36:09should match the user's input against and make sure it indeed matches.
    • 1:36:13And this is going to look a little cryptic.
    • 1:36:15But I'm going to go ahead and do this.
    • 1:36:17.+@.+ backslash dot edu.
    • 1:36:22Now this looks a little weird.
    • 1:36:24But it turns out I'm using certain building blocks that we'll just
    • 1:36:26scratch the surface of today.
    • 1:36:28But it's an incredibly useful and powerful feature in programming
    • 1:36:32languages more generally.
    • 1:36:33Because in the world of regular expressions,
    • 1:36:35there are certain patterns that mean something.
    • 1:36:37And here's a really good URL of some documentation
    • 1:36:40they're for in the world of the web and JavaScript, specifically.
    • 1:36:43And here's kind of a short cheat sheet, some excerpts thereof.
    • 1:36:46It turns out in the world of regular expressions or patterns,
    • 1:36:48a dot represents any single character except line terminators,
    • 1:36:52like backslash n.
    • 1:36:54A star or an asterisk represents 0 or more times.
    • 1:36:58A plus means one or more times.
    • 1:37:00A question mark means 0 or one time.
    • 1:37:03A number inside of curly braces means n times, or n occurrences.
    • 1:37:07And then two numbers in curly braces, n comma n,
    • 1:37:11means at least n times, but at most, m times or occurrences.
    • 1:37:15And then there's a few other, actually.
    • 1:37:17So what does that mean?
    • 1:37:18Well, let me go over to VS Code again.
    • 1:37:21And let me zoom in on the pattern I used.
    • 1:37:24And it would seem that, in this case, a dot represents any character.
    • 1:37:28Plus means one or more.
    • 1:37:29So one or more characters to the left of an sign, then literally the at sign.
    • 1:37:34Then another dot plus means one or more characters to the right of the at sign.
    • 1:37:38But the whole thing has to end in .edu.
    • 1:37:42But there's this additional backslash before the last dot.
    • 1:37:45And why might that be, intuitively?
    • 1:37:48Even though I've not said?
    • 1:37:49Because I want a literal dot, a literal period, not any one character there.
    • 1:37:54So I escape the period to make it have not
    • 1:37:56special significance per this cheat sheet, but rather a literal period.
    • 1:37:59So what this means is if I go actually back to VS Code here
    • 1:38:03and I try to claim to work at like malan@harvard.com and click Register,
    • 1:38:08that's a valid-looking email address.
    • 1:38:10But when I click Register now.
    • 1:38:11Whoops!
    • 1:38:12Sorry.
    • 1:38:12It went through because I did not reload the page after making the change.
    • 1:38:16So I screwed up.
    • 1:38:17Let me go back to the register.html URL.
    • 1:38:21Let me reload the page and type in malan@harvard.com, for instance,
    • 1:38:26and even-- sorry.
    • 1:38:27Let me type in malan@harvard.com.
    • 1:38:30And even though it's a valid-looking URL, it does not in fact and in .edu.
    • 1:38:35So the browser can defend against that in this way.
    • 1:38:37But the more important takeaway for now is
    • 1:38:40that as useful as this is, as user friendly as this,
    • 1:38:44this is not generally the best technique for validating user input
    • 1:38:47and protecting against invalid user input.
    • 1:38:50Why?
    • 1:38:51Browsers can't be trusted.
    • 1:38:53Or more generally, clients can't be trusted.
    • 1:38:55Why?
    • 1:38:56Because the way HTML works as we've seen it thus far
    • 1:38:59is that everything is happening on my own Mac, or your own PC,
    • 1:39:02or your own phone locally.
    • 1:39:05Per the envelope story we told earlier, your browser is downloading the HTML,
    • 1:39:08reading it top to bottom, left to right, and then
    • 1:39:11displaying it on your computer.
    • 1:39:13But we've already seen that my computer, for instance,
    • 1:39:15has built into it these developer tools.
    • 1:39:18And there among the tabs here, are not just that network tab,
    • 1:39:21let me actually go to the Elements tab, which we haven't seen previously.
    • 1:39:25In the Elements tab, you actually will see a pretty, printed version
    • 1:39:29of the same HTML.
    • 1:39:31But what that means is that you can not only see the HTML,
    • 1:39:34you can actually change it.
    • 1:39:36Now you're not going to be able to change it on the server.
    • 1:39:38But I can absolutely change my own copy thereof.
    • 1:39:41So suppose I'm now a hacker in the story.
    • 1:39:43And I really want to register for this website,
    • 1:39:45but it's apparently restricted to people with .edu addresses.
    • 1:39:48I don't have a .edu address, let me propose.
    • 1:39:50So that's fine.
    • 1:39:51Let me actually go into the developer tools.
    • 1:39:55Let me just double click on the attribute
    • 1:39:57there, highlight it, and boom.
    • 1:39:59Now gone is that pattern entirely.
    • 1:40:02The web browser now will let me register with malan@harvard.com
    • 1:40:07because the developer tools give you full-fledged access to the underlying
    • 1:40:10HTML.
    • 1:40:11So if I've changed the HTML, the defense is no longer in place.
    • 1:40:14Now what's the takeaway then is client-side validation
    • 1:40:18is wonderfully user friendly.
    • 1:40:19But it's not secure.
    • 1:40:21It's not safe.
    • 1:40:21So next week, we'll spend more time server-side
    • 1:40:24at making sure that even if someone messes with my HTML or my website,
    • 1:40:28they still can't actually get through and do anything bad on the server.
    • 1:40:32And this is true in general, too.
    • 1:40:33Let me actually, just for fun, go to, maybe, let's say, harvard.edu.
    • 1:40:39Let me open up my development tools.
    • 1:40:41And let's see where I might go here.
    • 1:40:45Suppose that I want to hack into harvard.edu.
    • 1:40:48Well, notice that I'm on my elements tab and there's
    • 1:40:50a lot of HTML that composes this page.
    • 1:40:52And notice that these triangles indicate that most of it's been collapsed.
    • 1:40:55But if I expanded them, I could see more and more of the tags and attributes.
    • 1:40:59But suppose I'm now a hacker.
    • 1:41:01And I want to maybe delete this menu.
    • 1:41:03Notice that you can also right click or Control
    • 1:41:05click on any element in a web page, typically.
    • 1:41:08With these developer tools, click Inspect or some similarly named menu
    • 1:41:12option, and you can actually been whisked away to the actual HTML tags
    • 1:41:18that implement that feature of the web page.
    • 1:41:20One, it's wonderfully useful for learning how things work,
    • 1:41:22teaching yourself new tricks, and even fixing problems.
    • 1:41:25Here, though, I'm going to try to use it maliciously.
    • 1:41:27And I'm going to highlight this tag here, div tag, as it's called.
    • 1:41:31I'm going to delete it.
    • 1:41:32And watch what happens at top right.
    • 1:41:34Gone is the menu.
    • 1:41:35Now, of course, if you go to harvard.edu right now, the menu is still there.
    • 1:41:39If I reload harvard.edu the menu is back.
    • 1:41:42So it's only my own local copy.
    • 1:41:43But this does speak to how you should not
    • 1:41:45trust anything happening client side.
    • 1:41:48Because someone can be mutating that same code.
    • 1:41:51Now it turns out there's other patterns that you
    • 1:41:53can use in regular expressions.
    • 1:41:55For instance, these are what are called character classes.
    • 1:41:58You can, for instance, specify in square brackets
    • 1:42:01some number of digits or characters that you want to match against.
    • 1:42:04This is a range of characters, 0 through 9.
    • 1:42:06So it's effectively the same thing as that, but easier to type.
    • 1:42:09There are certain shortcuts, backslash lowercase d means any decimal digit.
    • 1:42:14Backslash capital d means anything that's not a decimal digit.
    • 1:42:17And dot dot dot, there's bunches of other patterns.
    • 1:42:20You might use these to maybe validate a phone number in a web page,
    • 1:42:23if you want it to be formatted in a certain way, for better or for worse.
    • 1:42:26But long story short, regular expressions will be,
    • 1:42:29someday, your friend as you try to solve certain problems with data.
    • 1:42:34As an aside, it does escalate quickly.
    • 1:42:37So this is typically the regular expression
    • 1:42:39that browsers nowadays use to validate email addresses.
    • 1:42:43It is way more complicated than . +@.+.
    • 1:42:48Why?
    • 1:42:48Because you can't have @@@.edu.
    • 1:42:53There's certain characters you don't want to allow.
    • 1:42:55There are certain characters you do want to allow.
    • 1:42:57So long story short, this is a much larger regular expression
    • 1:43:01that is more correct when it comes to valid email addresses.
    • 1:43:04All right.
    • 1:43:05So with that said, there's one tool with which you should be familiar.
    • 1:43:10And that is at this URL here, validator.w3.org.
    • 1:43:13And this is a free web service from the World Wide Web Consortium,
    • 1:43:17which is the group that essentially standardizes this HTML language.
    • 1:43:21And if you go to their web page, there's a few different ways
    • 1:43:24to validate your own code.
    • 1:43:25Essentially, check it for correctness by typing in its URL,
    • 1:43:29otherwise known more generally as a URI, by uploading a file or by direct input.
    • 1:43:34So just for kicks, for instance, I'm going to go into VS Code
    • 1:43:37and grab my HTML that I just made.
    • 1:43:39I'm going to go back to validator.w3.org and paste it into the direct input box
    • 1:43:44and click Check.
    • 1:43:45And it's just a nice handy website that, if I scroll down, in green,
    • 1:43:49you will hopefully see this, no errors or warnings to show.
    • 1:43:53So it's a handy feature just to make sure that at least syntactically
    • 1:43:56your code is correct, even if it's not behaving the way that you might want.
    • 1:44:01All right.
    • 1:44:02With that said, the second of today's three languages,
    • 1:44:04and we'll just scratch the surface ultimately of JavaScript
    • 1:44:07to give you a sense of its capabilities, but CSS
    • 1:44:09is something that's worth understanding some of the basic building blocks
    • 1:44:12thereof.
    • 1:44:13So let me propose that there are some additional terms to know.
    • 1:44:19In the world of CSS, we're, again, going to have key value pairs.
    • 1:44:23In this world, they're called properties instead of attributes.
    • 1:44:25Why?
    • 1:44:26It was invented by different people, but it's the same kinds of ideas.
    • 1:44:29In the world of CSS, you're going to have
    • 1:44:31ways of specifying different selectors, as they're called.
    • 1:44:34That is to say we're going to be able to specify
    • 1:44:36the font size, the color, the margins and a lot of aesthetics
    • 1:44:40when it relates to tags in our web page.
    • 1:44:43And there's going to be different ways to select those tags,
    • 1:44:46as we'll soon see.
    • 1:44:47In an HTML page like this, this is our super simple one with which we began,
    • 1:44:51it turns out that you can also include a style
    • 1:44:54tag in the head of the page that has some
    • 1:44:56of your stylistic decisions, font sizes, colors, margins,
    • 1:44:59and all of those kinds of aesthetics.
    • 1:45:01We'll also see another approach whereby you can relegate all of that stuff
    • 1:45:05to a separate file, like styles.css, or something .css.
    • 1:45:09And you can link to it in the head of the page.
    • 1:45:12Link here does not mean A, like, ideally our anchor tag before
    • 1:45:16would have been called a link.
    • 1:45:17But it's not.
    • 1:45:18This just means that these two files are linked in some way conceptually.
    • 1:45:22All right.
    • 1:45:23So that is to say we can use these kinds of tags now to enhance our own code.
    • 1:45:29So let me propose that we do this.
    • 1:45:31Let me go into VS Code here.
    • 1:45:32Let me go ahead and create a very, very simple home
    • 1:45:35page for someone like John Harvard by running code of-- how about home.html?
    • 1:45:42And in home.html, I'm going to copy paste some of my starter HTML
    • 1:45:46from before.
    • 1:45:47And now in the body of this page, I'm going to do a few things.
    • 1:45:50I'm going to have a web page with a paragraph
    • 1:45:53up here that just says John Harvard as the title thereof.
    • 1:45:57Another paragraph that says something simple
    • 1:45:59like welcome to my home page exclamation point.
    • 1:46:02And then, like, a footer at the bottom and a third paragraph
    • 1:46:05that's a copyright, say, John Harvard, for instance.
    • 1:46:10So super simple, but representative of a header, a main part of the page,
    • 1:46:14and a footer thereof.
    • 1:46:15If I go into my other tab and reload my directory listing,
    • 1:46:20I will see now home.html.
    • 1:46:23And it's going to be pretty bare bones, right?
    • 1:46:25It's the same text, same font size.
    • 1:46:27It is three separate paragraphs.
    • 1:46:28But let me start to stylize this a little bit differently.
    • 1:46:31Let me make the top bigger and bolder, perhaps, or rather,
    • 1:46:35the top bigger and centered and make this text shrink thereafter.
    • 1:46:39So I'm going to go ahead and do this.
    • 1:46:41It turns out that you can have not necessarily a style tag,
    • 1:46:44but even more simply, a style attribute on certain tags, like this.
    • 1:46:48I'm going to add a style attribute that has a font size of maybe large.
    • 1:46:54And how about a style attribute here, a font size medium.
    • 1:47:00And then maybe down here-- oops, close quotes.
    • 1:47:03And then down here--
    • 1:47:05whoops.
    • 1:47:05Thank you.
    • 1:47:06OK.
    • 1:47:07I owe you some cookies.
    • 1:47:09All right, so style here of font size small, so relatively simple ideas.
    • 1:47:14And here is just another stupid syntax for key value pairs.
    • 1:47:18Again, left hand is not talking to right hand.
    • 1:47:20In CSS, cascading style sheets, which is the language we're now talking about,
    • 1:47:24it's key colon value.
    • 1:47:27In HTML, it's key equals quote unquote value.
    • 1:47:31It's just different techniques for the exact same dictionary-like idea.
    • 1:47:34All right.
    • 1:47:35If I go back to my other tab and reload, notice that it's a little subtle,
    • 1:47:39but it is large, medium, and small.
    • 1:47:41I didn't center things yet, so let me do that.
    • 1:47:44It turns out that this thing collectively
    • 1:47:45is what's called a property.
    • 1:47:47And a property is defined by a key value pair.
    • 1:47:49If you want to have multiple properties for key value pairs,
    • 1:47:52in CSS, you separate them with semicolons.
    • 1:47:55So those are back.
    • 1:47:56And if I want to center the text, I can do text-align: center.
    • 1:48:00I could now end my thought with the semicolon.
    • 1:48:03It's not strictly necessary.
    • 1:48:04But I'll keep it just so that I'm consistent.
    • 1:48:06But it's only necessary if you have more than one.
    • 1:48:10I'm going to go ahead and center everything, though.
    • 1:48:12So I'm going to go down here and add a semicolon after medium, down here
    • 1:48:15and add a semicolon after small.
    • 1:48:17So I align, text-align center, center, center for all three paragraphs.
    • 1:48:22If I go back to this other tab and I reload, voila.
    • 1:48:25Now it is, in fact, centered.
    • 1:48:27But here's where we can start to have a conversation about, maybe, design.
    • 1:48:32So I claim this is correct.
    • 1:48:34But is this perhaps the best design?
    • 1:48:36Well, maybe not.
    • 1:48:38I mean, these aren't really paragraphs, first of all, semantically.
    • 1:48:41It's not even complete sentences.
    • 1:48:43But there are three different divisions of the page,
    • 1:48:45right, like, the header up there, the main part in the middle, and then
    • 1:48:48the footer.
    • 1:48:49So it turns out, and we saw a glimpse of this in Harvard's source code,
    • 1:48:52there's another tag instead of p for paragraph called div, for division.
    • 1:48:58And even though this is actually not going
    • 1:48:59to have much of a functional effect at first,
    • 1:49:02it's maybe semantically a bit better.
    • 1:49:04Because, again, these aren't really paragraphs.
    • 1:49:06So if I really want to nitpick, I do have three divisions of the page.
    • 1:49:09So div is a very common way to give yourself just a rectangular region
    • 1:49:14of the page to style as you see fit.
    • 1:49:16If I go back now and reload, notice that it does tighten things up.
    • 1:49:20The paragraph tag gave me some vertical whitespace for free.
    • 1:49:23So I've lost that.
    • 1:49:24But I could add it back if I really wanted to.
    • 1:49:26But now, let's come to this question of design.
    • 1:49:29What's redundant about what I've done thus far, even if you've never
    • 1:49:32seen CSS before?
    • 1:49:34Yeah?
    • 1:49:35AUDIENCE: [INAUDIBLE].
    • 1:49:36DAVID MALAN: Yeah.
    • 1:49:37I mean, I had to center all three divs, which is just sort of stupid,
    • 1:49:40it would seem.
    • 1:49:41Copy paste has generally not been necessary.
    • 1:49:43Even though I'm doing it to save time today in general,
    • 1:49:45when the results are copied and pasted, ultimately, this
    • 1:49:48has not been good practice in any of our languages.
    • 1:49:51So it turns out I can do this.
    • 1:49:52Let me actually delete this one.
    • 1:49:54And I can keep or get rid of the semicolon, but I'll get rid of it
    • 1:49:57for parity with our first version.
    • 1:49:59I'm going to get rid of this one, too.
    • 1:50:01And you know what?
    • 1:50:02Here's the C in CSS cascading.
    • 1:50:05It's more like a waterfall effect.
    • 1:50:07And if I go up to a parent tag here, like, the body is
    • 1:50:10the parent of all three divs, I could put the style attribute here
    • 1:50:15and say text-align: center there.
    • 1:50:18And that has the effect of cascading down onto all three
    • 1:50:21of the children that are nested inside of it.
    • 1:50:23So now it's sort of better designed because I've only
    • 1:50:25said text-align: center once.
    • 1:50:27If I go back to the web page and reload, it has no functional impact visually.
    • 1:50:31But it's better design.
    • 1:50:32Because if I want to align it left, or right, or center,
    • 1:50:35I can change it in one place and not three independent places.
    • 1:50:39All right.
    • 1:50:39What else might I change after this here?
    • 1:50:42Well, it turns out that I could do something a little clearer as well.
    • 1:50:48This copyright symbol?
    • 1:50:50I mean, it's just sort of homemade with two parentheses and a C.
    • 1:50:53It turns out that there are ways to get special symbols in HTML.
    • 1:50:56And you can use what are called HTML entities.
    • 1:50:59You would only know these by looking them up or memorizing the numbers.
    • 1:51:02But it turns out that number 169 is the special HTML
    • 1:51:07entity for an actual copyright symbol.
    • 1:51:10So let me zoom in here and then reload.
    • 1:51:12And you'll see that the parenthetical C actually becomes the proper mark
    • 1:51:16for copyright, so marginally useful.
    • 1:51:19Or you could copy paste it from some other website,
    • 1:51:21for instance, if you didn't know how to type it on your own keyboard.
    • 1:51:24So that's an HTML entity, another feature with which to be familiar.
    • 1:51:27But having three divs on a page isn't necessarily ideal nowadays,
    • 1:51:32especially for search engine optimization, SEO,
    • 1:51:35for screen readers for accessibility.
    • 1:51:37Because at a glance, I don't really know which of these divs
    • 1:51:40is the most important.
    • 1:51:41Arguably the footer is generally for the human reader,
    • 1:51:44like, the least information-bearing piece of content.
    • 1:51:48So why don't I try to signal as much to the browser, to the screen reader,
    • 1:51:51to the search engine?
    • 1:51:53So it turns out there are what are called semantic tags nowadays.
    • 1:51:56Indeed, we're up to version 5 of HTML.
    • 1:51:58And one of the relatively newer features is, instead of using generic divs,
    • 1:52:01you can actually use actual names of tags,
    • 1:52:04like header and main and even footer.
    • 1:52:07And here, too, the visual effect is not going
    • 1:52:10to be any different if I go here and reload.
    • 1:52:13But there's more semantic information underneath the hood.
    • 1:52:17So that, again, all of those different types
    • 1:52:19of services, the browser, the screen reader, and the like
    • 1:52:22just know a little more about the page.
    • 1:52:24And maybe a screen reader now would focus on the main part of the page
    • 1:52:28before reciting all of the fine print in the footer, for instance, to the human.
    • 1:52:32All right.
    • 1:52:32Well, what else could we do here?
    • 1:52:34Well, it would be nice at some point to be able to reuse these styles.
    • 1:52:38And if I find myself making not one page but two pages or 10 pages or 100 pages,
    • 1:52:43it's kind of annoying to have to type out all of the same styles.
    • 1:52:47So wouldn't it be nice to start to factor this stuff out?
    • 1:52:50Well, I can do that, too.
    • 1:52:51Let me actually go ahead and do this.
    • 1:52:53Let me get rid of this attribute and this attribute and this attribute.
    • 1:52:58And honestly, too, as I do this, I would argue that the code
    • 1:53:02looks just a little cleaner now.
    • 1:53:04It's more obvious what is a tag and what the actual data of the page
    • 1:53:07is, metadata and data, if you will.
    • 1:53:09But I've lost all of my styling.
    • 1:53:10But wouldn't it be nice to preserve some of the styling
    • 1:53:13by doing what I proposed earlier, which is using
    • 1:53:15not a style attribute, but a style tag.
    • 1:53:19And indeed, you can put a style tag in the head of your web page
    • 1:53:22where you can put all of those same properties.
    • 1:53:24And you need a little more syntax, a few more keystrokes.
    • 1:53:27But I can say this.
    • 1:53:29If I want to center the entire body of my page,
    • 1:53:32I can actually do so by specifying text-align: center;.
    • 1:53:38Here the semi-colons are going to be generally necessary,
    • 1:53:41especially have you multiple properties.
    • 1:53:42Next I'm going to say header.
    • 1:53:44And inside of these curly braces, font-size:
    • 1:53:47large, unlike C, where you could get away with no curly braces
    • 1:53:51if there's a single line, you do need them in CSS.
    • 1:53:54In the main tag, let's go ahead and style with font-size: medium.
    • 1:53:58And then in the footer tag, let's go ahead and style with font-size: small.
    • 1:54:04Now this looks a little worse.
    • 1:54:06Because it just kind of blew up and it's a lot longer.
    • 1:54:08But it is a step toward factoring this out.
    • 1:54:11And honestly, when it comes to web pages,
    • 1:54:13I'm not the best artist in the world.
    • 1:54:15I can make the data display.
    • 1:54:17But friends of mine are certainly better at making things really
    • 1:54:20pretty and pixel perfect, so to speak.
    • 1:54:22So it's kind of nice if I can isolate all of the style to one part of my file
    • 1:54:26and all of the content to another.
    • 1:54:27Because maybe I could now collaborate with someone else.
    • 1:54:30So if I go back to now the other tab and reload,
    • 1:54:33functionally, no different still.
    • 1:54:35It still looks exactly the same.
    • 1:54:37But I'm starting to make it a little better designed.
    • 1:54:40And in fact, there's another way to do this.
    • 1:54:42Suppose that I find myself in the habit of very often centering text on a page.
    • 1:54:47And honestly, it's just a little annoying
    • 1:54:49to have to type this out for every tag that I want centered.
    • 1:54:52Well, I could create what are called classes as well in CSS.
    • 1:54:57It turns out you can make up your own words--
    • 1:54:59but I'm going to choose some reasonably named ones--
    • 1:55:01by prefixing them with a dot or a period.
    • 1:55:04And if I want to call this set of properties,
    • 1:55:06even though there's just one, centered, I can literally write .centered there
    • 1:55:11instead.
    • 1:55:11I can write this .large.
    • 1:55:13I can call this .medium.
    • 1:55:16I can call this .small.
    • 1:55:18And what this means now is I have reusable sets of properties,
    • 1:55:22kind of like containers whereby anywhere I use the word "centered,"
    • 1:55:25it's going to get that one text-align: center property applied.
    • 1:55:30Anywhere I use quote, unquote "large," it's going to be made large.
    • 1:55:33And so if I scroll down now here, I do need to reintroduce another attribute--
    • 1:55:37but it's a very common one in the world of HTML now-- that of class.
    • 1:55:41So class equals large.
    • 1:55:43Down here I'm going to do class equals medium.
    • 1:55:46Down here I'm going to do class equals small.
    • 1:55:49And it's getting a little more verbose, but I'm not polluting all of my HTML
    • 1:55:53with the actual styles.
    • 1:55:55I'm just kind of having this layer of indirection
    • 1:55:57and of abstraction, if you will, on top of those very specific properties.
    • 1:56:01And then for the body, I can do the same idea.
    • 1:56:02Class equals centered.
    • 1:56:05And if I go back to my web page here and reload, still looks exactly the same.
    • 1:56:10But I've kind of centralized where I can do things.
    • 1:56:12And frankly, I could do something like this, color: red;.
    • 1:56:15I can package up multiple properties, go back to the page here, and reload.
    • 1:56:19And now that has applied to everything.
    • 1:56:22So I have a reusable set of properties.
    • 1:56:24Even though centered is maybe not the best name now,
    • 1:56:27because it also makes things red.
    • 1:56:28But I can come up with reusable sets of properties.
    • 1:56:31And honestly, one final flourish here would
    • 1:56:33be let's not assume that my buddy, whether it's
    • 1:56:36my project partner or a colleague in the real world,
    • 1:56:39it's kind of stupid to try to edit the same file.
    • 1:56:41Because invariably we're going to break things on each other.
    • 1:56:44So I could actually do this.
    • 1:56:45Let me take all of this.
    • 1:56:46And I'll get rid of the red.
    • 1:56:48Let me go ahead and highlight everything I just did and cut it to my clipboard.
    • 1:56:52I'm going to get rid of the style tag altogether.
    • 1:56:54But I am going to go into VS Code and create-- how about a file called
    • 1:56:59home.css, just so I know what's what.
    • 1:57:02And in this file, I'm just going to literally paste everything I just made.
    • 1:57:06But I'm going to go back to my home page here.
    • 1:57:08And I'm going to add that other tag I proposed earlier, link href="home.css",
    • 1:57:16and I need one weird attribute, too.
    • 1:57:18The relationship of this link is that of quote, unquote "style sheets."
    • 1:57:24And that's just the way it is according to the tag.
    • 1:57:27And now one last time, if I reload this page, the red is going to go away.
    • 1:57:30Because I deleted that.
    • 1:57:31But the font sizes and centering are still there.
    • 1:57:35But what I've done was introduce some basic building
    • 1:57:37blocks in this language I claim is called CSS that's
    • 1:57:40going to allow me to now centralize all of the styling, the aesthetics now
    • 1:57:46of my web page.
    • 1:57:47All right.
    • 1:57:48Let me pause here and see if there are any questions on these techniques
    • 1:57:53thus far.
    • 1:57:54It's just more key value pairs.
    • 1:57:58Questions on this?
    • 1:57:59No?
    • 1:58:00All right.
    • 1:58:00So here's where things can get prettier quickly.
    • 1:58:03Let me go ahead now and close these two tabs.
    • 1:58:06Let me go into a file we created earlier called link.html, which you'll recall
    • 1:58:10looked a little something like this.
    • 1:58:12And now we can make this web page behave a little more like the real world.
    • 1:58:16Let me undo the phishing attack and just literally say Harvard down here.
    • 1:58:19But let me go ahead and start to style the anchor tag as follows.
    • 1:58:23Previously, this page looked a little boring like this.
    • 1:58:26The link was blue originally.
    • 1:58:27But because I visited harvard.edu, by default, the browser changes to purple.
    • 1:58:31Which is fine, but maybe you don't want that.
    • 1:58:33Maybe we want something that's a little more crimson, for instance.
    • 1:58:36So let me do this.
    • 1:58:37Let me go into the head of this link.html page.
    • 1:58:40Let me add a style tag herein.
    • 1:58:42And in there, let me style the anchor tag as follows.
    • 1:58:46Inside of this anchor tag, I'm going to do color: red.
    • 1:58:50And let's go ahead and leave it as such for now.
    • 1:58:55Let me go back to the link page and reload.
    • 1:58:56And it's going to be a little subtle.
    • 1:58:58But right now it's purple.
    • 1:58:59And now it's definitely red.
    • 1:59:01So I've modified that.
    • 1:59:02Now underlining links is good for accessibility.
    • 1:59:05But a lot of websites choose to not underline them and instead
    • 1:59:08underline them when you hover over them.
    • 1:59:10So that is an effect we can achieve, even though it might not be ideal.
    • 1:59:13But let's at least demonstrate how websites are doing that.
    • 1:59:16I can specify that this link should have text decoration of none.
    • 1:59:21Now I would only know that by having taken a class, read a book,
    • 1:59:24looked at an online reference.
    • 1:59:25The default is underline.
    • 1:59:28But I can override that by saying none.
    • 1:59:31So if I now go back to my page, reload, it's still going to be red.
    • 1:59:35But it's now not going to be underlined.
    • 1:59:38But notice if I hover over it, it changes to a little pointer finger
    • 1:59:42if I zoom in here.
    • 1:59:43But it's clearly not underlining, so that's OK.
    • 1:59:46Because there's another way of selecting tags here.
    • 1:59:49I can say a:hover.
    • 1:59:51And then inside of this CSS, I can say text-decoration:
    • 1:59:55underline when the anchor tag is being hovered over with the cursor.
    • 2:00:00If I go back to my tab here and reload, still looks the same.
    • 2:00:04But watch as my mouse gets close.
    • 2:00:06It now underlines, as a lot of websites do.
    • 2:00:09So it's a relatively simple idea.
    • 2:00:11It's not as compelling on mobile, especially,
    • 2:00:13because it doesn't do anything if you hover your finger
    • 2:00:15over the glass of your phone.
    • 2:00:16But it does work on laptops and desktops in this way,
    • 2:00:19even though it's perhaps a little passé now to do this kind of technique.
    • 2:00:22But there's other ways to select tags on a page.
    • 2:00:25And in fact, let me go back to this one here.
    • 2:00:27And in this page, let me propose that you can go in one of two places.
    • 2:00:31Visit Harvard or a href = https://www.yale.edu/ and then
    • 2:00:41Yale's website.
    • 2:00:42So it's getting a little long.
    • 2:00:43So I'm going to hit Enter.
    • 2:00:44Because the browser won't care that there's some whitespace.
    • 2:00:47But at least, now I have two links on the page.
    • 2:00:49If I reload this, you'll see that both of them
    • 2:00:52are red or crimson, which isn't quite right.
    • 2:00:55But that's OK.
    • 2:00:56I can actually distinguish these two somehow.
    • 2:00:59One way to do this would actually be to add one more HTML
    • 2:01:03attribute that we haven't needed or used before, that of ID.
    • 2:01:06I can use almost any name for this ID that I want.
    • 2:01:10And I'm going to say, quote, unquote, "Harvard"
    • 2:01:12is the unique ID of this link.
    • 2:01:14And the unique ID of this link is quote, unquote, "Yale," for instance.
    • 2:01:18And what I can now do up here is I'm going to get rid of this color red.
    • 2:01:22Because I don't want all anchor tags to be red, but I do
    • 2:01:25want Harvard tags to be red.
    • 2:01:27So I can say #harvard and then color: red;, and then I can do #Yale
    • 2:01:33and I can say color: blue;, for instance.
    • 2:01:36The hash symbol here represents an ID.
    • 2:01:39The dot we saw earlier represents a class.
    • 2:01:41And when you don't have a symbol before it,
    • 2:01:43it represents literally the name of the tag.
    • 2:01:46So when I mentioned these various selectors earlier,
    • 2:01:49type selector is just the name of the tag.
    • 2:01:51Class selector is the dot.
    • 2:01:53ID selector is the hash.
    • 2:01:54And there's also ways to select attributes specifically.
    • 2:01:57So if I go back here in VS Code now, I've added a bunch of CSS here,
    • 2:02:02properties.
    • 2:02:02But if I reload now, one of these should be red and the other is in fact blue.
    • 2:02:07So in short, just by way of these style attributes and these style tags,
    • 2:02:12we have a lot more control over how we can actually stylize our pages.
    • 2:02:18And here's now where this gets interesting.
    • 2:02:20And you asked about Bootstrap, a popular framework or library.
    • 2:02:24There do, indeed, in the real world exist a lot of third party frameworks
    • 2:02:27that a lot of smart people have just figured out what
    • 2:02:30would make our web pages look prettier.
    • 2:02:32And they've come up with design patterns for us that
    • 2:02:34make it way easier and way faster to make pretty looking forms,
    • 2:02:37pretty looking tables, and the like.
    • 2:02:38And one of these products is indeed called Bootstrap.
    • 2:02:40It's freely available.
    • 2:02:41And you can see its own documentation at getbootstrap.com.
    • 2:02:45And what I've done in advance is I've actually prepared some of our past data
    • 2:02:49to actually be formatted a little more prettily.
    • 2:02:52So let me actually go back to VS Code here.
    • 2:02:54And I'm going to open up a terminal.
    • 2:02:56And I'm going to cheat and copy a file I brought with me called phonebook0.html.
    • 2:03:01And if I open this file, you'll see that it looks like this.
    • 2:03:04It's a big table that has two columns now called name and number.
    • 2:03:09And I've added some other tags which are not that interesting,
    • 2:03:12but I didn't need them before.
    • 2:03:13But in this table, there's a table head and there's a table body.
    • 2:03:16So there's, like, a special row at the top
    • 2:03:18and then all of the rest of the data in a CSV or a spreadsheet.
    • 2:03:21And you can probably infer from this table row, from this table row,
    • 2:03:26from this table row, it kind of looks like, indeed, a phone book.
    • 2:03:29So if I go back to my browser here, go into my directory listing
    • 2:03:33and open up phonebook0.html, it's not the prettiest thing.
    • 2:03:36But it is tabular.
    • 2:03:38And notice that the browser has automatically put in bold the name,
    • 2:03:42and the number, and everything's in columns.
    • 2:03:44But it's not very pretty.
    • 2:03:45But what if I do this?
    • 2:03:47Let me actually go into VS Code here.
    • 2:03:50And let me borrow another file I came with called phonebook1.html.
    • 2:03:55And that file is going to look a little bit
    • 2:04:01different than the [INAUDIBLE] in that I've included a link tag in the header.
    • 2:04:06Now I'm not linking to my own CSS.
    • 2:04:09I actually went to getbootstrap.com.
    • 2:04:11I read some of their documentation.
    • 2:04:12And I'm linking now to Bootstrap's CSS file, which is actually really,
    • 2:04:18really big.
    • 2:04:18And in fact, if I open this file here, let me actually open this up in a tab,
    • 2:04:23and visit this URL here, the folks at Bootstrap
    • 2:04:27have written a crazy amount of properties
    • 2:04:30by defining their own classes and other such keywords.
    • 2:04:34And you and I and really anyone on the internet
    • 2:04:36is welcome to use all of this CSS.
    • 2:04:38And the documentation makes clear what all of this does.
    • 2:04:41A normal person would not need to read through any of this in that way.
    • 2:04:44But I've included this file called bootstrap.min.css.
    • 2:04:48And min just means they got rid of most of the whitespace.
    • 2:04:50And if I now go back to my other tab and go back to phonebook1.html,
    • 2:04:55it's the exact same data.
    • 2:04:57But thanks to that link tag, it now looks much prettier.
    • 2:05:01And I didn't have to figure out how to move things over to the right.
    • 2:05:04I didn't have to figure out how to draw these gray lines.
    • 2:05:06I didn't have to figure out how to format things in precisely this way.
    • 2:05:09Bootstrap, wonderfully, did most of that for me.
    • 2:05:13Now this is still a very static table.
    • 2:05:14It's not interactive.
    • 2:05:15I can't sort by names or columns or the like.
    • 2:05:18So let's revisit one other program that we made in advance together.
    • 2:05:22And this one is actually a new version of the search program.
    • 2:05:26So if I open up this program, search2.html, and close my terminal
    • 2:05:34window, you'll see that I've borrowed some of the same content before.
    • 2:05:38Let me go to the essence of it.
    • 2:05:40Here is the form and the action that I used earlier.
    • 2:05:44But I've added a whole bunch of classes to it.
    • 2:05:46And this is the essence of these third party frameworks.
    • 2:05:48They generally create a whole bunch of classes that you can use and reuse.
    • 2:05:52But they figured out all of the relevant properties.
    • 2:05:54So for instance, for my Google search button,
    • 2:05:56I've given it two classes, a class of button, BTN for short,
    • 2:06:00and button-light.
    • 2:06:01These are not standard HTML or CSS things.
    • 2:06:04These are Bootstrap names that they invented, just like I invented center
    • 2:06:08and large and medium and small.
    • 2:06:10I've also specified that there are a whole bunch of other classes associated
    • 2:06:17with pretty much every tag in this file.
    • 2:06:19So if I zoom out here and go back to my directory index
    • 2:06:23and open this, the first version of search.
    • 2:06:26It was super, super simple because it only contained the HTML form.
    • 2:06:30Let me go ahead and open up search2.html.
    • 2:06:33And the essence of the form is exactly the same.
    • 2:06:36Therein is the query at the bottom of the page.
    • 2:06:38But thanks to CSS, I now have a button that looks a little more interesting.
    • 2:06:41It's gray and it's rounded.
    • 2:06:42I also have an I'm feeling lucky button, which will send a different request
    • 2:06:46and show me by default the very first search result.
    • 2:06:48So in short, the file that I just opened, even though I made it
    • 2:06:51in advance, it's only 55 lines.
    • 2:06:54And most of that is whitespace.
    • 2:06:55And it did take me a little bit of time to figure out the classes
    • 2:06:58and read the documentation.
    • 2:06:59But most of the work is done by this third party framework
    • 2:07:03or library of CSS classes and properties that someone else made for me.
    • 2:07:09And so as CSS goes, that's kind of it for the basics.
    • 2:07:13It's just a bunch of more key value pairs in the form of these properties,
    • 2:07:17whereby you can select elements of a web page by way of their ID,
    • 2:07:20or classes, or even the names thereof.
    • 2:07:24And here's something that's kind of neat, too.
    • 2:07:26Let me go to harvard.edu again.
    • 2:07:29Let me go ahead and open up the inspector, as before,
    • 2:07:32and draw your attention to one final feature of these developer tools
    • 2:07:35under the Elements tab.
    • 2:07:37So under the Elements tab here is all of the HTML
    • 2:07:39that composes harvard.edu as of today.
    • 2:07:41But let me go ahead and expand this right-hand portion.
    • 2:07:44It turns out you can also see all of the CSS
    • 2:07:47that is being applied to the website as of now.
    • 2:07:50So for instance, if I go to a page here-- let's go to Give Now.
    • 2:07:56Might as well.
    • 2:07:56Let's give them a plug here.
    • 2:07:58Under Give Now, let's see if this is going to go well.
    • 2:08:02Let's go ahead and highlight this part.
    • 2:08:04Suppose they really want to draw attention to give online.
    • 2:08:07And I right click on that.
    • 2:08:09I choose inspect, as before.
    • 2:08:11And here now, notice that the developer tools
    • 2:08:13jumped right to the HTML tag that represents
    • 2:08:17that particular line of text.
    • 2:08:18If I zoom in, it turns out it's an H1 tag.
    • 2:08:20It's big and bold.
    • 2:08:21Suppose, though, I want to change its color.
    • 2:08:23Well, if I go over on the right here, you can see all of the CSS properties
    • 2:08:27that currently apply to that specific tag.
    • 2:08:30And most of these we haven't even talked about line, height, margin bottom,
    • 2:08:34font, weight, margin top, and a bunch of other fairly self-explanatory things.
    • 2:08:38But if I want to experiment, I can go up here in top and say color: red.
    • 2:08:43And I can literally change that on the web page live to see how it looks.
    • 2:08:46It's not changing the server.
    • 2:08:47It's just changing my copy.
    • 2:08:48But I can at least make that change.
    • 2:08:50You can do even fancier things where, if you click computed,
    • 2:08:53you can scroll down and figure out, OK, wait a minute.
    • 2:08:55It's white right now.
    • 2:08:57That's the same thing as this, rgb(255, 255, 255).
    • 2:09:01That's the same thing as ffffff from weeks prior.
    • 2:09:04But I can click this little arrow and it will even show me where in Harvard CSS
    • 2:09:10that white color comes from.
    • 2:09:12So if it's actually my site I can actually figure things out
    • 2:09:14and make changes as well.
    • 2:09:16So in short, if you find that you like the world of web development,
    • 2:09:20in your own browser that you've had all this time,
    • 2:09:22there's so much darn functionality built in.
    • 2:09:24And it's just up to you now to start experimenting with it,
    • 2:09:27exploring what you can actually do with it.
    • 2:09:30But let us use our final moments today to introduce you to a final language
    • 2:09:36called JavaScript, which is itself a proper programming language.
    • 2:09:40And you're about to see a bunch of syntax that's
    • 2:09:42kind of new, but kind of familiar.
    • 2:09:45And the goal here is not to teach you JavaScript per se,
    • 2:09:47but to begin to lay the foundation for you yourselves
    • 2:09:50learning a new language on your own.
    • 2:09:52By the end of CS50, you will not have learned
    • 2:09:54all that is out there, certainly.
    • 2:09:56And the goal here ultimately is to help you
    • 2:09:58have a sense with a support structure in place, be it the humans
    • 2:10:01or the [INAUDIBLE] involved that you can ask questions of along the way.
    • 2:10:05Let's go ahead and do this.
    • 2:10:09In my directory index, I'm going to go into the source 8 directory
    • 2:10:12where I've got all of today's examples ready to go.
    • 2:10:15I'm going to go into VS Code's Explorer, where I can see all of those files.
    • 2:10:19And in my source 8 directory, let me go ahead and open up
    • 2:10:22hello version 1 dot HTML.
    • 2:10:25Recall that the last time we played with hello.html, it was literally just HTML.
    • 2:10:29But here's an example of a language called JavaScript.
    • 2:10:32And at this page, it's going to work as follows.
    • 2:10:35If I open hello 1 dot html in my page, I have a very simple form.
    • 2:10:39Let me zoom in.
    • 2:10:40Let me type in my name, for instance, D-A-V-I-D, and hit Enter.
    • 2:10:42And voila!
    • 2:10:43This is not a very good user interface.
    • 2:10:45But you can see that this web page says, quote, unquote, hello, David.
    • 2:10:49So how did I get this form to trigger a pop up?
    • 2:10:51Well, if I go into VS Code here, you'll see a web form.
    • 2:10:55But I've added another attribute, namely an onsubmit attribute.
    • 2:11:00And in the world of HTML, onsubmit allows
    • 2:11:05you to write a tiny bit of JavaScript code inside of the quotes
    • 2:11:08that will be executed whenever the user submits this form.
    • 2:11:11So what this is saying is call a function called greet
    • 2:11:14and then return false.
    • 2:11:16And what return false means is that don't actually
    • 2:11:19submit this form to the server, like keep the user on this page
    • 2:11:22so we can just see a pop up.
    • 2:11:23So what is this greet function?
    • 2:11:25Well, it turns out, in the world of HTML,
    • 2:11:28there's not only a style tag you can put in your head of your page,
    • 2:11:31but also a script tag, inside of which is JavaScript code.
    • 2:11:35The syntax is a little different from Python and from C.
    • 2:11:38But it's maybe a little closer to Python.
    • 2:11:40Instead of def last week or two weeks ago,
    • 2:11:42we'll now use function, literally, to begin the definition of a function.
    • 2:11:46And if I want to call this function greet, so be it.
    • 2:11:49JavaScript comes with a function called alert.
    • 2:11:52And so if I literally do alert, hello, quote, unquote, and then
    • 2:11:56plus something else, just like in Python, that's going to concatenate,
    • 2:12:00or join the two things left and right.
    • 2:12:02But here's some functionality that comes with your browser, too.
    • 2:12:05It turns out, per the notion of this whole page being a document,
    • 2:12:09you can call document.queryselector, which
    • 2:12:13allows you to select any of the tags or elements in the page,
    • 2:12:16specifically you can select the tag that has an ID of name.
    • 2:12:20So CSS and JavaScript use the same syntax.
    • 2:12:23If you see hash something, that is referring to the ID of a tag
    • 2:12:27that you created.
    • 2:12:28If you then, after selecting the element of HTML with that unique ID,
    • 2:12:33want its value, you just do dot value.
    • 2:12:36So we saw dots a lot in Python and in C to go inside of structures.
    • 2:12:40You can go inside of that text box and get its value.
    • 2:12:43So notice here if I scroll down, not only
    • 2:12:46am I using autocomplete and autofocus and so forth,
    • 2:12:49I also, for convenience, gave my input box a unique ID of name.
    • 2:12:54So what's effectively happening is, when I click Submit,
    • 2:12:57my JavaScript's greet function is called, it queries for that text box,
    • 2:13:02goes inside of it and gets its value.
    • 2:13:04And then, using this plus operator, just like in Python,
    • 2:13:07concatenates the two together and passes them
    • 2:13:10to this alert function for an underwhelming, but functional alert
    • 2:13:15in the window.
    • 2:13:17All right.
    • 2:13:17How else can we do this?
    • 2:13:20This is generally frowned upon to use onsubmit in this way.
    • 2:13:25Generally speaking, the world does not like
    • 2:13:27mixing attributes, rather JavaScript code with HTML so closely as this.
    • 2:13:32So let me show you another variant of this,
    • 2:13:34even though it's going to look a little bit cryptic.
    • 2:13:36But at least it will be representative of how else you can solve this problem.
    • 2:13:41In hello2.html, we have this code.
    • 2:13:45Notice that at the top of my body now is the form.
    • 2:13:48But at the bottom of the body is this script tag.
    • 2:13:51So I've just moved it from head to the body of the page.
    • 2:13:54Because I'm going to then instead do this.
    • 2:13:56If I want to tell the browser to listen for submissions of that form,
    • 2:14:01I can use this fairly cryptic syntax, but you'll see it again and again
    • 2:14:04over time as follows.
    • 2:14:06Go into the document.
    • 2:14:09Select with this query the form tag.
    • 2:14:12And then call this special function that comes with the browser called
    • 2:14:15addEventListener.
    • 2:14:16So tell the browser to listen for a certain type of event for this form.
    • 2:14:21What event do you want to listen for?
    • 2:14:23The submission of the form, so quote, unquote submit.
    • 2:14:26What do you want to have happen whenever that event is heard?
    • 2:14:29You want to call this function here.
    • 2:14:32So this is what's known as an anonymous function.
    • 2:14:35The syntax is a little weird, but I've not given the function a name.
    • 2:14:38It apparently takes an argument as input called event,
    • 2:14:40but that's per the documentation.
    • 2:14:43And what these two lines of code do essentially
    • 2:14:45is they still call the alert function.
    • 2:14:47They still output hello comma space.
    • 2:14:49And they still query the HTML for the ID name
    • 2:14:55to get the value that the humans typed in.
    • 2:14:57And then just for good measure, we prevent the default behavior
    • 2:15:00for any form with this line of code, just so that it doesn't actually
    • 2:15:03submit anything to the server.
    • 2:15:04It keeps the user actually here.
    • 2:15:07This will be a little scarier, too, but just so you've seen it.
    • 2:15:10In hello3.html, this is actually a more common technique.
    • 2:15:14Whereby you can listen for one other special event.
    • 2:15:19It turns out when you load a web page, lots of stuff has to happen.
    • 2:15:22It's got to be read top to bottom, left to right.
    • 2:15:23It's got to download other files, the images, the sounds, the videos, and so
    • 2:15:27forth.
    • 2:15:27If you want to wait until the whole page has been read into memory essentially,
    • 2:15:32you can use this event as well, DOMContentLoaded.
    • 2:15:36That tree we drew earlier is what's called a DOM, document object model,
    • 2:15:39which is just a fancy way of saying a tree in the computer's memory
    • 2:15:42that represents the web page.
    • 2:15:44So this is the syntax that you'll find that people
    • 2:15:46use to tell the browser once the whole DOM, the whole tree has been loaded,
    • 2:15:52then go ahead and execute this code.
    • 2:15:54And it means that no matter what, the whole web page will be ready in order
    • 2:16:00before this code is actually executed.
    • 2:16:02And this ensures, for instance, that even
    • 2:16:04though this script is at the top of my file
    • 2:16:07and my form is at the bottom of my file, none of this code
    • 2:16:11will get executed until the whole DOM is ready, all of the HTML
    • 2:16:15has been read top to bottom, left to right.
    • 2:16:19All right.
    • 2:16:20Well, let's go ahead and make this a little more interesting,
    • 2:16:23just to show you some of the capabilities of JavaScript
    • 2:16:25within a browser nowadays.
    • 2:16:26So if I open up maybe this one here, background.html.
    • 2:16:31And let me open it up in the browser.
    • 2:16:33And this is going to be super simple in terms of user interface.
    • 2:16:35But here's a big white viewport, big body that's just white in color
    • 2:16:39by default.
    • 2:16:40But there's three buttons at top left.
    • 2:16:41And if I click R, it makes the background red.
    • 2:16:44G makes the background green.
    • 2:16:46And B makes the background blue.
    • 2:16:48What's interesting about this demo, sort of underwhelming
    • 2:16:51as the user interface is, is it demonstrates that you
    • 2:16:54can modify CSS using JavaScript.
    • 2:16:57And HTML, CSS, and JavaScript are therefore
    • 2:17:00very intertwined in the context of a browser.
    • 2:17:02How?
    • 2:17:02Here's the raw HTML.
    • 2:17:04Here are the three buttons.
    • 2:17:06And I've given them three separate IDs red, green, and blue,
    • 2:17:08just so I can refer to the specific button.
    • 2:17:10And notice what I've done here.
    • 2:17:12I've declared a variable in JavaScript, which
    • 2:17:14uses slightly different syntax of let as the keyword.
    • 2:17:17Instead of int or char or string, you can
    • 2:17:20use the keyword let, which essentially means let
    • 2:17:22me create this variable called body.
    • 2:17:25And this is just how, using query selector,
    • 2:17:27I can select the body element from the web page.
    • 2:17:29Because I'm going to use it three separate times.
    • 2:17:31What do I want to do three separate times?
    • 2:17:33For instance, this.
    • 2:17:35I want to go into the document and select whatever
    • 2:17:38element has the unique ID of red.
    • 2:17:41I want to tell the browser to listen for this event, click.
    • 2:17:44So we saw submit before.
    • 2:17:46You can listen for clicks as well.
    • 2:17:47When the click happens on this button, I want this function to be called.
    • 2:17:51What does this function do?
    • 2:17:52Something super, super simple--
    • 2:17:54all it does is it changes the body's styles, background color
    • 2:17:59to be, quote, unquote red instead.
    • 2:18:02So what's going on here?
    • 2:18:04We didn't see this earlier.
    • 2:18:05But it turns out in CSS there is actually
    • 2:18:08a CSS property called background-color.
    • 2:18:10And I can see it as follows.
    • 2:18:11Let me reload this page.
    • 2:18:12Open the browser's inspector.
    • 2:18:14Open up elements.
    • 2:18:15And if I hover over the body here, notice
    • 2:18:19that there's no background color by default.
    • 2:18:22But if I do in, say, lowercase, background color colon yellow,
    • 2:18:28it immediately changes the background to yellow.
    • 2:18:31Unfortunately, in JavaScript, you can't do background dash color.
    • 2:18:37Why might this be?
    • 2:18:40Yeah?
    • 2:18:41AUDIENCE: [INAUDIBLE].
    • 2:18:42DAVID MALAN: It thinks it's minus or subtraction.
    • 2:18:44Right?
    • 2:18:44So I would wager there was a human at some point in the room designing
    • 2:18:47JavaScript where they realized like, damn it.
    • 2:18:50We shouldn't have used a hyphen in CSS.
    • 2:18:52Because it's now going to be misinterpreted as a subtraction
    • 2:18:55operator in JavaScript.
    • 2:18:57So the way the JavaScript world solved this was whatever has a hyphen in it
    • 2:19:01as background dash color, you change it in the JavaScript version
    • 2:19:05thereof to be camelcase, so to speak, whereby there's this hump in the middle
    • 2:19:09with it's a capital C, no hyphen, instead of a lowercase C instead.
    • 2:19:13And I do this here, and I do this here so
    • 2:19:16as to essentially listen for a click on any of those three buttons
    • 2:19:19so that the end result is that it changes it from red to green to blue
    • 2:19:23based on what I'm clicking.
    • 2:19:24And here's where the developer tools get kind of cool.
    • 2:19:27Notice at bottom right here, notice that as I click on this,
    • 2:19:30the CSS of the page at bottom right is changing
    • 2:19:33to match whatever is happening.
    • 2:19:35So you can really see and understand what's going on underneath that hood
    • 2:19:39there.
    • 2:19:39All right.
    • 2:19:40We have time for a few other demonstrations.
    • 2:19:42Back in my day when I learned HTML, there was a bunch of hideous tags
    • 2:19:46still in circulation.
    • 2:19:48Among them was a blink tag, which literally,
    • 2:19:51if you used blink and put words in between its open tag and close tag,
    • 2:19:55you would get text on your screen just kind of doing this.
    • 2:19:58Even uglier was what was called the marquee tab, which would actually
    • 2:20:01scroll text across the screen like this.
    • 2:20:03And no self-respecting website tends to have blinking text or scrolling
    • 2:20:07text in this way.
    • 2:20:07Because it's just tends to be ugly.
    • 2:20:09However, even though the blink tag is among the few tags that's
    • 2:20:13ever been removed from the language, you can bring it back
    • 2:20:17with a bit of JavaScript.
    • 2:20:18So here, for instance, is an example in blink.html.
    • 2:20:21Here's a super simple page.
    • 2:20:23The only thing in the body is hello, world.
    • 2:20:26But there is a script tag up in my head of my page here.
    • 2:20:29And let's see what's inside of this script tag.
    • 2:20:32Well, I've defined on line 8 downward, a function called blink.
    • 2:20:36What does it do?
    • 2:20:38Well.
    • 2:20:38I first declare a variable called body.
    • 2:20:40And I get the body element using queryselector.
    • 2:20:44I then ask this question.
    • 2:20:45If the body's styles visibility property,
    • 2:20:49which we haven't talked about yet is quote,
    • 2:20:51unquote, hidden, then change the body's styles visibility property
    • 2:20:56to be, quote, unquote, visible.
    • 2:20:57Else, if it's not hidden, that is it's visible, change it to hidden instead.
    • 2:21:03And here, too, this is another one of these left-hand, right-hand situations.
    • 2:21:06I do not know why the opposite of visible is not invisible.
    • 2:21:10It is, instead, hidden.
    • 2:21:11So, again, arguably poor design, but this is what we have.
    • 2:21:15How is this useful?
    • 2:21:16Well, there turns out.
    • 2:21:17In your browser, there's a JavaScript function
    • 2:21:20called setinterval that's associated not with the document per se,
    • 2:21:23but the window, which is another global variable that you just
    • 2:21:26get automatic access to in the browser that
    • 2:21:29allows you to call a function, any number of milliseconds, again
    • 2:21:33and again and again.
    • 2:21:35So if I want my text to blink every half a second or 500 milliseconds,
    • 2:21:39I just use window.setinterval to call blink every 500 milliseconds.
    • 2:21:43And notice, it's very important not to call blink here, as with parentheses,
    • 2:21:48like in C or Python.
    • 2:21:49Because I don't want to call blink at this moment in time.
    • 2:21:51I just want to inform the setinterval function
    • 2:21:54of the name of the blink function.
    • 2:21:56So I just pass in the name blink.
    • 2:21:58And if I go back to my directory listing, I open up blink.html,
    • 2:22:04you'll see what I used to see in the late '90s, when HTML 1 was
    • 2:22:08all the rage, like at the beginnings of a ugly websites,
    • 2:22:11including my own personal home page at the time.
    • 2:22:14My own personal home page, too, at the time,
    • 2:22:16which is probably findable somewhere online in the archives,
    • 2:22:19it was back in the days where you wouldn't just
    • 2:22:21show people the content of your page.
    • 2:22:22You had to click a Enter button to enter the web
    • 2:22:25page and just really ridiculous.
    • 2:22:27There's a lot of things in tech that you can do, but should not do.
    • 2:22:30And the world has learned this as have I, the hard way.
    • 2:22:33All right.
    • 2:22:33Let's do a couple of final examples that are now
    • 2:22:35representative of what modern websites do
    • 2:22:37and what you and I take for granted on web apps and mobile apps alike.
    • 2:22:41For instance, this feature of autocomplete.
    • 2:22:43Case in point, when I went to google.com before
    • 2:22:46and I started searching for cats or dogs or birds,
    • 2:22:48it was trying to finish my thought and populating a dropdown
    • 2:22:50with a bunch of different suggestions.
    • 2:22:52I can actually do that myself in JavaScript as follows.
    • 2:22:55Let me open up a file called large.js, which
    • 2:23:01is a file that I made based on speller's own dictionary.
    • 2:23:05Recall that we gave you a big list of words, like 100,000 plus words.
    • 2:23:09I copied those into this JavaScript file.
    • 2:23:11But I formatted them in what's called the JavaScript array.
    • 2:23:15So JavaScript has arrays.
    • 2:23:16They're more like Python lists than they are like C arrays.
    • 2:23:20The syntax is square brackets.
    • 2:23:21Let is my keyword to say give me a variable called
    • 2:23:24WORDS, which is all caps because I'm going to use it globally.
    • 2:23:27And here is a 100,000 words from that dictionary in this file.
    • 2:23:32All right?
    • 2:23:32Now let me close this file and open up the actual HTML
    • 2:23:35file, autocomplete.html.
    • 2:23:38Let me scroll down to the bottom.
    • 2:23:40And you'll see that in this page in the body are two things.
    • 2:23:44One, an input, so a text box so I can start typing words.
    • 2:23:48And then, two, an unordered list that's empty.
    • 2:23:51So there's no actual list items in that unordered list initially,
    • 2:23:56but there is a lot of JavaScript.
    • 2:23:58Here's how I'm including the large dictionary.
    • 2:24:00And here's how I'm implementing autocomplete.
    • 2:24:03So let me first show you what this does.
    • 2:24:05Let me go back to my directory index, click on autocomplete.html.
    • 2:24:10I'll zoom in.
    • 2:24:11And if I type in C, I immediately get an unordered list of all words
    • 2:24:15starting with C.
    • 2:24:16If I type CA, it gets filtered further.
    • 2:24:18But we can't see the difference because there's so many words starting with CA.
    • 2:24:21CAT, the list is changing.
    • 2:24:23CATS, the list is changing.
    • 2:24:25And notice that if I were to open my developer tools, what
    • 2:24:29gets really interesting is you can see this list being made in real time.
    • 2:24:33Let me delete it.
    • 2:24:34Notice that the UL at bottom left is now empty.
    • 2:24:37But if I type in suddenly CATS, notice that the triangle appears and there
    • 2:24:42are all of the list items that my JavaScript code is apparently
    • 2:24:46dynamically creating.
    • 2:24:48And indeed, how do I do this?
    • 2:24:49Well, this one's more of a mouthful, but here's the idea.
    • 2:24:52I used a queryselector function to get that input text box.
    • 2:24:57I then add a listener to that input, listening for what's called key up.
    • 2:25:02It turns out you can listen for the finger going down
    • 2:25:04or the finger going up.
    • 2:25:05So I'm waiting until the user lifts their finger off the keyboard, AKA,
    • 2:25:08key up.
    • 2:25:09When it hears that event, it should do the following.
    • 2:25:11It's going to create a variable, a temp variable called HTML equal to quote,
    • 2:25:15unquote nothing.
    • 2:25:17In JavaScript, as an aside, you can use single quotes
    • 2:25:19or double quotes for whatever reasons stylistically, JavaScript programmers
    • 2:25:22tend to use single quotes.
    • 2:25:24I can then say if that input has a value, because the humans typed
    • 2:25:28in one or more letters, then iterate over
    • 2:25:31all of the words in the dictionary.
    • 2:25:32And we've not seen of before, but it's Javascript's equivalent
    • 2:25:35of Python's for loop.
    • 2:25:37If that word starts with whatever the input value is, go ahead and add--
    • 2:25:42that is concatenate to the HTML variable and open tag LI.
    • 2:25:47Then, whatever the word is, using this JavaScript specific syntax, and then
    • 2:25:51close the tag.
    • 2:25:52And then lastly, using queryselector, grab the UL tag,
    • 2:25:57go into its inner HTML, so to speak, inside of it,
    • 2:26:00and change it to be this HTML I just created.
    • 2:26:03And so in this way, using JavaScript, I can dynamically add to
    • 2:26:07and subtract from the HTML in the page.
    • 2:26:10There are so many other events here, too, clicking, submitting, key up,
    • 2:26:14dragging, and dropping, and so forth.
    • 2:26:16This is just some of the events that web pages and mobile apps can listen for.
    • 2:26:19But we'll do one final one, which speaks to the power of browsers nowadays
    • 2:26:23and even the implications for privacy.
    • 2:26:25If I go into geolocation.html, it turns out
    • 2:26:31you can figure out where in the world a user is with, like, three lines of code
    • 2:26:36nowadays, assuming they've turned on location services
    • 2:26:38and opted in on their device.
    • 2:26:40Here, albeit cryptically, is a final global variable
    • 2:26:43that comes with browsers today called navigator.
    • 2:26:46It has a geolocation object associated with it,
    • 2:26:50which comes with a function called getCurrentPosition.
    • 2:26:52You can then specify or figure out the user's latitude and the user's
    • 2:26:57longitude.
    • 2:26:57And all I'm going to do is write these to the screen
    • 2:27:00so I can see this demonstration live.
    • 2:27:02So our very final demonstration here of JavaScript
    • 2:27:05is going to be this one here for geolocation to show you how easy
    • 2:27:08and how invasive even code can be if I click on geolocation and wait.
    • 2:27:15There are my GPS coordinates, latitude and longitude.
    • 2:27:19And to confirm as much roughly, let's go ahead and open up a browser,
    • 2:27:22paste in those coordinates, click on the Google Maps result that comes up first.
    • 2:27:27Zoom in, in, turn on satellite mode.
    • 2:27:32And in-- and I'm not quite in that corner of the building.
    • 2:27:35But I'm presumably close to an access point that Google has known about
    • 2:27:38and associates with my GPS coordinates.
    • 2:27:40It's that easy when you actually use something like Uber or Lyft or the like
    • 2:27:45to figure out where the user is by just asking their browser via code
    • 2:27:49like this.
    • 2:27:50So that's it for HTML, CSS, and JavaScript.
    • 2:27:52In the problem set, you'll explore all of these.
    • 2:27:54One more lecture to go in which we'll combine all of these.
    • 2:27:57But until then we'll see you next time.
    • 2:27:59[MUSIC PLAYING] Buffering, OK.
    • 2:28:04Josh, nice.
    • 2:28:07[INAUDIBLE], oh!
    • 2:28:08[LAUGHING]
    • 2:28:13[INAUDIBLE]
    • 2:28:14No, oh, wait.
    • 2:28:21That was amazing, Josh.
    • 2:28:26Sophie!
    • 2:28:30[LAUGHTER]
    • 2:28:34Amazing.
    • 2:28:36That was perfect.
    • 2:28:39[INAUDIBLE]
    • 2:28:40[LAUGHTER]
    • 2:28:42I think I--
    • 2:28:45[INAUDIBLE]
    • 2:28:47AUDIENCE: [INAUDIBLE].
    • 2:28:48DAVID MALAN: Guy.
    • 2:28:53That was amazing.
    • 2:28:54Thank you all.
    • 2:28:55AUDIENCE: Good.
    • 2:28:56[APPLAUSE]
  • CS50.ai
Shortcuts
Before using a shortcut, click at least once on the video itself (to give it "focus") after closing this window.
Play/Pause spacebar or k
Rewind 10 seconds left arrow or j
Fast forward 10 seconds right arrow or l
Previous frame (while paused) ,
Next frame (while paused) .
Decrease playback rate <
Increase playback rate >
Toggle captions on/off c
Toggle mute m
Toggle full screen f or double-click video