Placeholder Image

字幕表 動画を再生する

  • [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,

  • and I am seeing Facebook's Home page or my news feed, or if I'm logged in,

  • all of that HTML is actually inside of this envelope.

  • Now technically, it's all zeros and ones at the end of the day.

  • But now that we're not sort of at week zero anymore,

  • we're thinking in terms of language, there's just a whole bunch of HTML.

  • And what did that HTML look like?

  • Well in the simplest case, it might have looked like this.

  • This is a simpler web page certainly than Facebook's own.

  • But this would be an example of the first paragraph,

  • so to speak, of Facebook's Home page coming from server to browser.

  • And so that's the relationship among HTTP and HTML and, in turn,

  • CSS, though there's none pictured here.

  • HTTP is that protocol, that set of conventions,

  • ala the human handshake that ensures that the data is formatted

  • in a certain way and gets to me from server

  • to browser, or from browser to server.

  • Below that is a very specific language called

  • HTML, which is the actual content.

  • And what does my browser do upon receiving this?

  • Well, just like we humans would read the first paragraph of the letter,

  • a browser is going to read this top to bottom, left to right,

  • and do what it says.

  • Hey, browser, here is a web page.

  • Hey, browser, here is the head of the page.

  • Hey, browser, here is the title.

  • Put it in the tab bar.

  • Hey, browser, here's the body.

  • Put it in the big rectangular region of the window.

  • Hey, browser, that's it for the web page.

  • So you can think of these open tags and close tags or start tags and end

  • tags as really being these directives.

  • Do something; stop doing something.

  • And that's literally what the browser is doing underneath the hood.

  • So the last time we introduced Python, which is unrelated fundamentally

  • to all of this.

  • It is just another programming language.

  • So technically we could have started talking about Python in like week 1,

  • right after we looked at Scratch instead of looking at C.

  • But instead, we started sort of with Scratch, the graphical program.

  • Then we kind of went super low level with C,

  • and built, and built, and built on top of it,

  • until now we're kind of at Python, where we can solve all of those same problems

  • with Python.

  • And in fact, one of the challenges of problem

  • set 6 is going to be to rewind a few weeks and re-implement Mario,

  • and Cash or Credit, or Caesar, or Vigenere in Python,

  • so that you effectively have your own solutions handy, or the staff

  • solutions in C. And it'll be really kind of a warm-up

  • exercise and a comforting exercise to just translate something

  • that you know works or should work to a new language

  • and see the mapping from one to another, just like we did with Speller,

  • but more powerfully.

  • We're also going to start to build applications using Python

  • that we've not built before.

  • And so among them, for instance, today will

  • be a handful of examples that actually use Python

  • to generate HTML from a server to me.

  • Because you could write this on your Mac or PC.

  • You could save it.

  • You could upload it to a server in the cloud, so to speak.

  • And people can visit it.

  • But if I visit this page today, or tomorrow, or the next day,

  • it's always going to be the same.

  • It's going to say hello title, hello body every day.

  • Facebook, and Gmail, and any website out there these days is much more dynamic.

  • The content changes based on you or other humans,

  • typically, or even the time of day, if it's a new site.

  • So today we're going to explore, how do you use programming,

  • in Python in particular, to generate dynamic content,

  • ultimately based on data in your database interactions

  • from the user or any number of other things.

  • So how do we go about doing this?

  • Well, let me go ahead and open up the IDE for just a moment

  • and open up an example from today's source code called serve.py.

  • This is an example, a few of whose features might look a little familiar,

  • but not all of them.

  • So let me scroll to the bottom first.