字幕表 動画を再生する
[MUSIC PLAYING]
DAVID MALAN: This is CS50 and this is lecture 6.
And you'll recall that last week we introduced web programming
by way of HTML and CSS, or at least the building blocks
because we don't actually have the ability to program yet.
It's just markup, HTML and CSS with stylization thereof.
But we introduced this metaphor last week of a protocol called TCP/IP.
And we related it to, of course, an envelope.
And on this envelope, virtually, on the front
was at least two pieces of information.
And if anyone remembers what were those two
pieces of information in the to field?
Someone else who we didn't hear from recently?
Yeah?
AUDIENCE: An IP address.
DAVID MALAN: Yeah.
An IP address, a numeric address that uniquely identifies your computer
and someone else's computer.
And one other thing, if you remember.
Oh, come on.
It was like two minutes ago.
OK.
Yeah.
AUDIENCE: A port number.
DAVID MALAN: A port number.
So another number, shorter number, that's just a number like 80 or 443
referring to HTTP or HTTPS, or other numbers,
like 25 for email and the like.
And so together these unique addresses allow you to send information
to not only a specific computer, but a specific service
running on that computer.
And in order to actually request information from that server,
there's this other protocol called HTTP, Hypertext Transfer Protocol.
This is what's inside of the envelope.
So when the server opens it up, metaphorically,
looks inside, this is the command that that server reads in order to decide
what it should actually respond with.
And so this request here is telling the server--
otherwise known as www.example.com in this particular example--
to send back what exactly in its own envelope to me
and my laptop if I were to request this?
AUDIENCE: A specific web page.
DAVID MALAN: A specific web page.
And someone else, which web page specifically, presumably?
AUDIENCE: Index.
DAVID MALAN: Yeah, so index.html, which we said last week
just tends to be the default file name on a server for a web page
that's just selected by default. And it doesn't have to be called this,
but it's a human convention.
And the rest of this is just a verb saying, literally, get me that file.
This is just telling the server what version of HTTP
I speak so that humans can improve it and upgrade it over time.
But this would tell the server to return index.html.
Meanwhile, we saw more sophisticated get queries
when we started talking about Google, and any website that
has not just a front end, like HTML and CSS, but also a back end.
And a back end is where the logic is, where the server is,
and the interesting work, ultimately.
And so this slash search indicates some kind
of software running on Google servers as of last week
that's simply responds to requests.
And what did question mark q equals cats do or represent in that demonstration?
AUDIENCE: User input.
DAVID MALAN: Yeah, user input.
So the question mark just says, that's it for the file name or the URL.
Here comes the user's input.
Q is just literally the HTTP parameter or input
that Larry and Sergey, founders of Google,
20 years ago decided would represent the user's input, q for query.
Equal just means that query that the human typed in was cats.
But the human doesn't even have to type this in.
Once you understand HTTP, if you really wanted to be kind of a nerd,
you could go to www.google.com/search?q=cats and it
would induce the search for you because at the end of the day,
that's all the browser is doing.
When you have these web forms that you now have the ability to create,
it's just automating the process of generating these HTTP messages.
Now, the server hopefully responds with a message you never, ever actually see,
HTTP 200, which literally means OK.
Of course, many of us have seen numbers other than 200 appear, like what?
404, which means?
File not found.
Now, why the humans decided years ago to tell
other humans what that numeric code is, I mean,
that is an uninteresting detail.
But the world, for whatever reason, has revealed in many web sites 404.
But it just means the same thing.
Everything is not OK.
A file was not found.
You might see something else like this.
We saw this with Harvard, in fact, curiously,
that Harvard had moved permanently.
Now, Harvard was responding to certain queries with HTTP 301s
in order to achieve what feature or effect?
Why?
Yeah.
AUDIENCE: Redirections.
DAVID MALAN: Redirections.
So this is kind of a low-level way of describing it.
But 301, even though it says moved permanently,
that's a more technical hint to the browser saying,
Harvard moved not to whatever URL you just came from,
but to this URL specifically.
And now Harvard was probably, if you recall, redirecting me from what URL?
If I wasn't already at that URL, where might I have been?
Maybe dot com, if they actually own multiple domains and were redirecting.
That could work.
What else?
Yeah.
AUDIENCE: Just HTTP.
DAVID MALAN: Yeah.
Maybe I just typed in HTTP, and Harvard, in the interest of security,
wants to force my browser to request this page again via HTTPS.
Sometimes a website might prepend the www if you haven't typed it in,
or you can be redirected most anywhere.
In fact, if you go to CS50's own website by just typing CS50.harvard.edu,
watch the URL.
You'll be redirected to a more specific page, depending on the time of year.
So we use these tricks, as well.
404 not found might look like this, but inside deeper
of that metaphorical envelope is the actual contents of the web page.
So you get back not only these HTTP headers,
as they're called, in the top of the response, so to speak,
but you also get back HTML, yet another language we looked at,
this one actually a language, but not a programming language.
These tags tell the browser exactly what to do and to render.
We introduced this style tag, though.
What did that allow us to do that HTML alone did not?
Yeah.
Use CSS to beautify the site and just make it nicer.
HTML, for the most part, is about structure
and about tagging the contents of your web page in a way
that the browser finds helpful.
But CSS is really for the user's benefit, at the end of the day,
and his or her eyes, because it really lets
you control font size and positioning and lower-level stuff
that you might have started tinkering with with the most recent problem set.
Now, we'd proposed that you probably shouldn't just
start typing CSS inside of your HTML page
because it's just a little harder to maintain as your examples get
more sophisticated.
So you might factor it out.
And odds are you did this for the problem
set because when making a home page, if you have the same CSS
styles across multiple files, it would be pretty silly and inefficient to copy
and paste them again and again when you can factor them out like this.
Lastly, we looked at JavaScript, last time,
another programming language that's super similar
to see, at least at first glance.
But it actually gets rid of a lot of the lower level
headaches like pointers and memory addresses and that
that we've struggled with in recent weeks.
But most important was how we used it.
So you can consider a web page like this as once it's loaded by your browser
as just being a tree structure.
Thinking back a couple of weeks to our discussion of data structures
and each of these nodes in the tree we saw in JavaScript can be manipulated.
And via that very simple principle, writing
code that modifies this existing tree in the browser's memory,
means you can make much more dynamic things like Gmail and Facebook
and any number of websites that are constantly changing.
You did not do this yet for the problems set.
You made static web pages just by hard coding HTML and CSS.
But starting next week, once we have, thanks to this week, the vocabulary
of Python will you start to make things more dynamic
and then even bring back into play JavaScript,
bringing all of these various threads together.
And to include the JavaScript, recall, we used either a script tag at the top
or refactored it out to a file.
Or in some cases, it's necessary or beneficial
to move it down to the bottom of the file or factor it out like that,
but more on that down the road.
So any questions on