Name: CS50 2017 - Lecture 11 - JavaScript
Uploaded: 2017-11-14T16:45:52.000Z
Duration: 1 h 43 min 39 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

This is CS50 and this is lecture 11, so the end is actually quite near.

And among the goals for today, and next time, and our final lecture time

together, is to start to tie things together as far back as week zero.

And in that spirit, I thought we would begin by reflecting on this clip here,

which you may recall from a few weeks ago,

wherein we tried to look in popular media at the perception

that viewers might have of technology, if they relied only

on shows like this, and on CSI, and the like, where what you see on the screen

And this is wonderful to say, but most recently did Stranger Things

2 come out, which most of you are probably familiar, and probably

finished, if you're like me, on Saturday after it came out on Friday.

but I was so proud of this particular show.

But before we get there, allow us to tease you

OK, so that was mostly just a set up for the following,

and if you haven't seen Stranger Things, or at least all of the episodes,

I really don't want to alienate the entire internet,

let alone everyone in this room, just close your eyes briefly,

this isn't really a spoiler, it's all technical, doesn't spoil any plot,

but no one is going to care in a few weeks time,

So now's the time to put your fingers in your ears

and close your eyes if you don't want to know that, at some point in the show,

And of course, in every show out there like CSI and Law

and Order and the like, if you kind of zoom in and enhance the screen,

it's just nonsense, like a crayon type program, like we saw from CSI.

But I was so proud to see that, if you actually zoom in on this screen here,

you see this code, in a language called Visual Basic.

And even though we don't teach Visual Basic,

nor do many people use Visual Basic as much anymore,

can you glean what this programmer was doing on the screen?

AUDIENCE: Is it like getting a four digit password or cracking--

DAVID J. MALAN: Yeah, it was a program with which

And if you glean all of the various loops in this structure,

you'll actually see that it's trying to come up with a digit after digit

after digit after digit, trying all of them,

until finally, when it finds that value, something interesting happens.

And so now, those of you who have your eyes closed and can hear this,

you can take your fingers out of your ears and we'll proceed.

But perhaps the first example in media of an actual program

So now, today, we look back on a model we've

been introducing for some time, MVC, model, view, controller, which is just

a fancy way of describing a type of programming that's

really popular in the web these days, whereby you have a controller, which

is the code that you've been writing, in Pset 6,

The fact that it's called application.pi is just a convention in flask,

Like the code that actually drives your website.

In what folder or files are your so-called views?

So in the templates subdirectory, which is a flask thing also,

you have a bunch of HTML files, which are

the views, the aesthetics, or the presentation of your program's

And then last week, did we introduce, finally, the model, the M in MVC,

which represents your data, your database.

Maybe it's a CSV file, maybe it's in API, for getting stock quotes,

maybe it is a persistent database, wherein you store your users

And together, these three entities compose

a pretty interesting application, whether it is a Pset 6 or Pset 7

But today, what we'll do is introduce one more piece and one more language.

I know we've discovered quite a few languages thus far,

Scratch, and C, and Python, and SQL, not to mention HTML and CSS.

But today, we introduce the last of our languages in CS50, JavaScript.

And you'll see that JavaScript is the last of the enabling technologies that

will allow you to build features and tools very familiar to you

nowadays on your phones and on your laptops.

And so, before we do that, let me go ahead and pull up

one example, via which we can bridge last week

and this, a final look at the Frosh IMs website from yesteryear.

And let me go ahead and run this program as follows.

This is Fosh IMs 4, available in today's distribution code.

And if I go ahead and open up this URL, it's a very simple program,

that I'll zoom in on, that allows the users the ability

to register and to see who is registered and to register themselves.

And if I want to go ahead here and register,

I'm going to see a form like this, and I can choose from the dropdown

my Harvard dormitory, and then actually register my name.

And then in very first version of this, weeks ago, this program did nothing.

Then we did something a little more interesting,

whereby we saved the data to someone's email inbox,

by just sending them an email, then we added CSV files, which weren't bad,

Subtitles ListPlay Video

CS50 2017 - Lecture 11 - JavaScript

literally

audience

script

feature