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 last week or on HTTP, HTML, CSS, or TCP/IP?

No?

Anything at all?

Oh, yeah?

AUDIENCE: So in what case would you put the script

tag up at the top [INAUDIBLE]

DAVID MALAN: Good question.

So in what cases would you put the script tag up at the top

versus at the bottom?

If the code you're writing in JavaScript manipulates

the DOM, the tree that I had on the screen just a moment ago,

the catch is that that tree needs to exist when your code is executed.

So if you, for instance, have JavaScript code up here in the head of your page,

but the nodes in the tree, the tags that you

want to manipulate in changing things to red to green to blue

like we did last week, or making things blank, are down here in the page,

you can't write your code up here and have it change things in the page

down here because it's happening out of order.

So similar in spirit to C where things have to happen in the right order,

if you want to change something down here,

your code needs to at least be down here,

or you need to use some fancier techniques to say,

I'm going to write my code up here but wait a few seconds

before executing it until the whole webpage is loaded.

So for most of the examples we looked at, this was not an issue.

But we'll come back to this perhaps before long.

All right, so let's now take the same approach

that we did last time of introducing one language by way of another.

You'll recall, of course, that we started the whole semester with Scratch

and then we transitioned a few weeks back now to C. Last week

we made some comparisons with JavaScript.

Let's do the same thing briefly with Python

but then spend more time at the keyboard comparing the two to see

what actually is different about these.

So why in another language, though, first?

We have Scratch, C, JavaScript, Python, not to mention HTML and CSS

for different purposes.

Like, why do we have all of these darn languages already?

Why didn't humans just decide, that's it, we're all using Scratch?

We're all using C or JavaScript or Python?

What's, perhaps, the intuition behind that?

Why are there so many damn languages, not to mention in this one course?

Yeah?

AUDIENCE: [INAUDIBLE]

DAVID MALAN: Say once more?

AUDIENCE: Different ones are good for different things.

DAVID MALAN: Yeah, different ones are good for different things.

And this probably goes without saying for something like Scratch, right?

It's so visual.

It's so graphical and animated.

It makes sense that the puzzle pieces--

or that the language itself is based on puzzle pieces

and dragging and dropping.

So maybe languages are tailored to certain applications.

But is that true for C, Python, and JavaScript, which

are all text-based languages we'll see?

AUDIENCE: [INAUDIBLE] for example, they're