Placeholder Image

Subtitles section Play video

  • [MUSIC PLAYING]

  • DAVID MALAN: All right, this is CS50, and this is lecture 9.

  • And so we've been diving into bunches of languages

  • recently among them have been HTML, and CSS, and Python most recently.

  • And soon we're going to see JavaScript soon.

  • We're going to see SQL and more.

  • So let's see just a moment if we can kind of wrap our minds around what's

  • going on with these various languages.

  • So HTML, which we looked at a couple of weeks back, is used for what?

  • AUDIENCE: Websites.

  • DAVID MALAN: Websites.

  • OK, but be more specific.

  • What about websites?

  • AUDIENCE: Markup.

  • DAVID MALAN: Markup.

  • OK, be more specific than markup.

  • What does that mean?

  • AUDIENCE: The way they look.

  • DAVID MALAN: The way they look.

  • OK, good, so marking up a website, the structure of the website,

  • and the contents of the website are what you would annotate using HTML--

  • Hypertext Markup Language.

  • It's not a programming language, so it doesn't

  • have functions, and loops, and conditions,

  • and the kind of logical control that we've used for some time.

  • It really is about presenting information.

  • Make something bold.

  • Make something italics.

  • Put something centered and so forth.

  • CSS, meanwhile, allows you to really take things the final mile

  • and really get the aesthetics just right.

  • And so, in fact, what I just described, boldfacing, and italics, and centering,

  • early on in version 1 say of HTML was actually how you did it.

  • There was no CSS.

  • But these days, the better approach is to factor out those kinds of aesthetics

  • from your HTML and instead put them in this other language, CSS, Cascading

  • Style Sheets.

  • So your HTML now becomes put this text in a column.

  • Put this other text in another column.

  • And structure your data in a certain way.

  • And then stylize it with colors, and fonts, and placement using CSS.

  • Now meanwhile, most recently, we introduced Python.

  • And what was noteworthy about Python?

  • What do you got?

  • Some-- back here?

  • Python--

  • AUDIENCE: More straightforward syntax.

  • DAVID MALAN: More straightforward syntax, yeah, in some ways,

  • and we'll see some syntax where you take that back, I think.

  • But in general, that is kind of the case,

  • because you don't need parentheses if they're not strictly necessary.

  • You don't need curly braces just because.

  • Instead, things like indentation become more important, which on the one hand

  • is a little annoying, but on the other hand,

  • really does reinforce good habits.

  • So that's probably a good thing.

  • And then at the very end of the last lecture,

  • we did something that was hopefully wonderfully inspiring,

  • which was to implement what in Python?

  • AUDIENCE: Dictionary?

  • DAVID MALAN: The dictionary.

  • And so we've really, we pretty much re-implemented

  • all of problem set 5 speller using like I don't know, 15, 20, 25 lines of code,

  • not to mention I was able to type it out within 30 seconds.

  • And that's not just because I knew what I wanted to type,

  • but really because you have to write so few lines of code.

  • With Python, and soon with JavaScript, and even other languages out there,

  • you just get so much more functionality for free.

  • If you want to know the length of the string, you call a function.

  • If you want to get a linked list, you create a data structure called a List.

  • If you want a hash table, you create a data structure called a Dictionary.

  • You don't implement it yourself.

  • Underneath the hood, someone else out there in the world

  • has implemented all of that functionality for us.

  • But now we're standing on their shoulders.

  • And so today, what we begin to do is to transition

  • to this last portion of the class, where our domain is not just a command line

  • and dot slash something, but web programming, where the ideas are pretty

  • much going to be the same so long as we now understand, as hopefully you

  • do or are beginning to, what HTTP is and how the web and the internet

  • itself work.

  • So recall that we looked a little bit ago at a URL like this.

  • And so if you were to visit https://www.facebook.com and hit

  • Enter in your browser, you're going to send some kind of message

  • in an envelope that might physically in our world look like this.

  • But of course, it's digital instead.

  • And what is inside of that envelope, if you simply

  • do type that URL before trying to get to Facebook?

  • AUDIENCE: An error message that redirects to--

  • I guess [INAUDIBLE] that one.

  • DAVID MALAN: Yeah, probably no error message here, because that URL

  • did have the HTTPS.

  • And it wouldn't so much be an error message,

  • but like a preference to go to a different location.

  • AUDIENCE: Moved?

  • DAVID MALAN: Sorry?

  • AUDIENCE: Moved.

  • Moved, like permanently moved.

  • DAVID MALAN: Oh moved.

  • Not moved, only if we had gone to a shorter URL.

  • Recall that all of those 301 one redirects

  • were the result of, for instance, leaving off the dub dub dub

  • or leaving off the S. so this is actually the good.

  • This was the end of the story, where everything just worked and we got back

  • a 200 OK.

  • So if I did hit Enter though on my laptop and tried to visit that URL,

  • what did I put, or my laptop put inside of this envelope?

  • AUDIENCE: Request.

  • DAVID MALAN: The request to get an address, so it was like the get verb,

  • like getme, probably slash, because the last thing in this URL is the slash.

  • It probably had a Host header.

  • Recall, we saw host colon and then the domain name of the website again.

  • And there were bunches of other headers, so to speak,

  • that we kind of turned a blind eye to.

  • But in essence, atop the piece of paper, virtually,

  • that's inside of this envelope, or at least these two lines, a reminder

  • as well as to what protocol, sort of what handshake convention,

  • we are trying to use with the server.

  • And now when the server responds with an envelope of its own,

  • how do these headers change?

  • What's inside of Facebook's HTTP headers in its envelope back to me?

  • Kind of spoiled it a moment ago.

  • What?

  • AUDIENCE: The IP address?

  • DAVID MALAN: Somewhere-- let's kind of consider that

  • on the outside of the envelope, though.

  • That's how it gets to me.

  • What's on the inside?

  • What's the status code going to be when I visit Facebook's Home page?

  • AUDIENCE: 200 OK

  • DAVID MALAN: 200 OK-- and so we saw 200 OK only when we actually

  • looked underneath the hood, so to speak, to see

  • what was inside of these envelopes using Chrome's Inspector

  • toolbar, the developer tools, or using cURL, that command line program.

  • Odds are, there are other headers in there,

  • like content type is text slash html.

  • And I think that's the only one we saw.

  • But moving forward, as you make your own web-based applications,

  • you will actually see and Chrome and other tools a whole bunch

  • of different content types.

  • You'll see like image slash ping or image slash jpeg.

  • So indeed, anytime you download a picture

  • of a cat or something from the internet, included

  • in the headers in that envelope are two lines like this.

  • But a cat is not a web page.

  • It's not HTML.

  • So this would be like image slash jpeg, if it's a photograph of a cat.

  • And then below that though, the dot dot dot,

  • is where things started to get interesting in the last half

  • of our lecture on HTTP, because what came below all of the HTTP headers

  • inside of this envelope from Facebook?

  • What's inside of the envelope?

  • AUDIENCE: Nothing?

  • DAVID MALAN: Nothing-- yes, it's technically an answer.

  • But--

  • AUDIENCE: Isn't it like pieces of the file?

  • DAVID MALAN: Yeah, it's the pieces in the file.

  • I mean, it really is the file itself.

  • So essentially, when you write a letter in the human world,

  • you usually put like the date.

  • And you might put the person's address.

  • And you might put like dear so-and-so.

  • You can kind of think of all of that like metadata,

  • the stuff that's not really the crux of your message to the human,

  • as being the HTTP headers.

  • But then once you start writing your first paragraph

  • and the actual substantive part of your letter, that's going to be down here,

  • so to speak.

  • And that's going to be the HTML inside of this envelope.

  • So if I'm downloading Facebook's Home page via my browser to my computer,