>> JASON HIRSCHHORN: Welcome, everyone, to week 10.
This is an exciting week because tomorrow is Quiz 1, which we will get
to in a second.
Today in section, we are going to go over some resources for the quiz, and
then I will answer any and all questions you guys have.
And we will finally end with some practice problems.
>> We can spend the entire section answering questions.
We can spend the entire section going over practice problems.
We will just expand to fill the space and time we have.
>> So I put this list up every week, but it's particularly important this week.
For studying, if you haven't started already, oh boy.
But hopefully you've started already.
And you are going through the materials and resources listed here.
I would highly recommend a number of these.
>> In particular, lecture notes are incredibly important and helpful.
The study.cs50.net provides a great primer on a lot of
the topics we covered.
It also has some great practice problems.
And then, Google is great, too.
I don't know what you'd use it for.
But use Google, as well.
>> Reach out to me if you have any questions, comments, or concerns.
Look over the review session slides from last night.
Or, if you have some time, watch the video.
They provide a lot of helpful material and information.
And try and cover if not all, many of the topics we've covered and that you
might see on the quiz.
>> Speaking of the quiz, that will be tomorrow.
It's 75 minutes long.
Many of you are taking it at 1 o'clock, and some of you are
taking it at 5:30.
For the time you're taking it and the location you're taking it, make sure
you check out the document on the CS50.net homepage.
>> Remember that you can get one 8 1/2 by 11 sheet to take with you.
Oftentimes, people don't use this sheet at all during the quiz.
But really, it is an incredibly helpful study tool.
So putting together that sheet is what I spent probably three or four hours
doing when I was studying for CS50, and that was easily the most helpful
way I could study for the quiz.
So even if you have some other people's study guides to look at and
use as references, I highly recommend making your own study guide, putting
that stuff together.
That really helps you learn all of the material.
>> Last but not least in this section, after the quiz tomorrow there's one
more lecture--
next Monday.
There's one more section, not next Tuesday before Thanksgiving, but the
Tuesday after that.
We'll be meeting together for a final goodbye party and also doing some cool
things to get you guys excited about further studies in computer science.
>> There's one more project, one more fair, one more hackathon.
We're nearing the end of CS50, which is exciting--
but also, if you're like me, a little sad.
Before I move on, does anyone have any questions about what
we've covered so far?
>> OK, well let's go over some questions that you have for the quiz and topics
we might cover.
So this is a list that I put together.
It is by no means exhaustive, but hopefully will jog your memory if you
have some questions about any of these topics, or if you have questions about
practice problems from quizzes in years past.
>> I had a couple questions that were emailed to me, but I want to hold off
on those for a second.
Does anybody have any questions, problems they didn't understand,
answers they didn't understand to get us started?
Avi.
>> AUDIENCE: Can you just go over DOM and Ajax really quick?
Like, what we need to know or should understand about them?
>> JASON HIRSCHHORN: I'm going to answer generally this question of, what do I
need to know about given topic x?
Because I have a feeling many of you are going to ask me that, or are
curious about that.
So to the extent that the topic was covered in lecture, or section, or on
study.cs50.net, a problem set, you should be familiar with it.
>> So you don't need to know every type of tag that's available in HTML or
every type of attribute or property you can give something in CSS.
But if you saw it in a lecture example, if you saw it in a problem
set, you should probably be familiar with it, particularly things you saw
in lecture.
So we discussed the document object model a bit in
section, more so in lecture.
You should be familiar with that much of it.
>> And you should be familiar with Ajax to the same extent.
We never saw incredibly advanced or complicated examples of Ajax, so
you're not going to be asked do something incredibly complicated.
But you might be asked, how do I make an Ajax call using jQuery?
Which is something you've seen a number of times before, both in the
review session and in lecture, and it's only two-ish lines of code.
>> So that is something you should be familiar with.
But again, for all these topics, if you've seen it
before, it is fair game.
And we might ask you-- obviously, we're going to ask you things you
haven't seen before.
Coding something you haven't seen before.
Which isn't to say you haven't seen the tools to solve
that problem before.
You have seen those tools.
>> For example, on Quiz 1, if you need to code strlen.
We haven't coded strlen before.
But you know how to use a for loop, you know how to use if conditions.
You know how to write variables in C. It's going to be the same thing here.
You're not going to be asked to do anything you haven't seen before, but
you might be asked to, like, put something together in a novel way, or
solve a different type of problem.
>> Sorry, that wasn't specific to your question, but I can't answer about
every single topic what you do or do not need to know.
But also, sorry, last thing on that.
We have spent significantly more time on link lists than we have on Ajax.
You didn't use Ajax in a problem set.
One of the central features of that problem set that was link lists.
And we spent a lot of time in lecture and section using it.
>> So, odds are link list will come up more often on the quiz than Ajax will.
Or the questions having to do with link list will be worth more points.
So you can certainly focusing and narrow in on things that are more
likely to come up because we have spent more time on them.
>> OK any other questions?
Yeah.
>> AUDIENCE: Can we go over the use of anonymous functions in JavaScript?
I'm a are little confused about that.
>> JASON HIRSCHHORN: So in JavaScript--
I'm trying to think how I could write this on--
so let's actually open up this code.
So this is code that we did last week.
And you've seen this before if you were here in section last week.
Or you've seen something similar to this before.
>> But you can look at this first line.
This is how you start--
everybody's seen this before.
If you want to put some JavaScript code, you put it inside this, assuming
you're using JQuery.
This is saying, don't do anything until the document's loaded.
>> And then, Curt, you see right here we're doing something like this--
function open paren, closed paren.
So we are not giving this function a name.
We are not going to define this function is supposed to run and then
call it a bunch of times.
We're just saying this document already takes a function.
A couple of things to do.
>> And we don't want to spend the time giving it a name or save it for
perpetuity.
We just want to run some things.
So an anonymous function sort of serves that purpose.
When you're not going to use something over and over again, so you don't need
to give it a name-- you just want to use it once--
you would just say function, for example, in this case, and you're just
defining something that you could give a name.
>> Like, we could pull this function out and give it a name and then call that
function here.
But we don't need to because we don't want to waste time giving it a name or
wasting something in our name space.
And you'll see that a lot.
For example, we see that a lot in this code, but you've seen this before when
you click something--
run this type of code.
>> We could define the code that we want to run when we click, in this case,
this ID, as a separate function and then run that function.
But in this case, we're just skipping that step and moving it into here and
just to defining everything that we want to happen and
not giving it a name.
That still might not have answered your question.
>> AUDIENCE: No, it does.
I mean, I guess I just don't really get why it would be a
function at all, though.
Because it's not really being called.
It doesn't really have a name.
>> JASON HIRSCHHORN: It's a function in the sense that it's a series of steps,
like you would put in a function.
And then that's why we call it anonymous function.
We're not going to give it a name.
We're not going to waste trying to name it, but we could.
>> Anonymous functions, you can always give a name.
So for example, this code right here, we could put this code inside a
function and then call this function here.
Instead, we say, we're not going to bother with that.
We're just going to write it all right here.
>> It's like sometimes when you're writing a four loop in C-- you guys
have seen this before-- maybe you're iterating through a forloop
into i equals 0.
I is less than strlen.
Or you're going through some array, you can save array
index i in some variable.
And you use that variable.
So you don't need to rewrite array bracket i over and over and over.
>> And that's sort of like a dummy variable.
It's not serving much purpose other than to make your code a bit cleaner
and easier to read.
Similar function here.
Just makes it a bit easier, but functionally there's no difference.
Does that answer your question?
>> AUDIENCE: Yes.
>> JASON HIRSCHHORN: OK..
Mario?
>> AUDIENCE: Yesterday they often put function parentheses event.
Does that mean something?
Or is it for things like that they would do
document.ready function event.
>> JASON HIRSCHHORN: We've seen this, and again, these are smaller things that
probably I don't want to spend too much time on.
Because sometimes I don't want people get freaked out that they haven't
heard about these things that much.
But we talked a bit about event handlers.
So something happens, and then this function is executed.
And then we also want to know some details about what
happened in this event.
>> So think back to problem set 4.
That's probably the easiest way to understand that in break out.
There was some code--
like an event would happen, but event can mean many things.
If could mean the mouse is clicked, it could mean you hit an arrow key, et
cetera, et cetera.
>> But it's all saved in this generic thing called events.
And then we can say, is this event this thing?
Or is this event this thing?
Or, what sort of happened with that event?
So that's why you create that variable there to save that extra information
about what exactly happened that you're going to want to
utilize in the function.
But again, that's probably one of the less important things to be super
familiar with.
>> OK, what other questions have people had, or stumbling blocks they've
encountered while reviewing?
We'll back to that list.
What about during practice quizzes, if people have taken those already?
What were some problems that tripped you guys up?
I know for a fact that last year's quiz was really hard.
>> AUDIENCE: Can you explain what an SQL injection attack is?
>> JASON HIRSCHHORN: OK, great.
So we talked about this a bit.
There's a lecture on security.
And again, as I mentioned earlier, this is an aside.
But you will be frustrated on the quiz when you read some small two point
question, and you're like, when did I ever learn that?
>> All of those things in those lectures that you didn't think you needed to
know, or you could gloss over because they didn't have to do with the
problem set, those will likely come up again on the quiz.
So, cool, fun things that you just thought David was telling for you to
enjoy, he was telling you for you to enjoy and to make you just be super
excited about learning everything there is to learn
about computer science.
Those things also come up on quizzes.
So, even these small things that didn't directly relate to your problem
set, as you guys are familiar with from Quiz 0, will probably come up.
And this is a good example of something.
>> So a SQL injection attacks is when you get some information from the user and
you want to insert it into a table using a SQL insert statement, but you
didn't sanitize the input ahead of time.
So, obviously we've seen SQL statements.
I'll just open up--
let's go--
we'll go to the review--
I think, who covered it?
I think Samala did.
So we can get--
>> AUDIENCE: Where did you find this?
>> JASON HIRSCHHORN: So if you go to CS50.net, quizzes, and then you can
scroll over and get slides from the review session.
But you can see this is a good example of a SQL injection attack.
We take some information from the user and they give us a string, and then we
want to insert that string into a database.
Generally we are going to sanitize that input, which means there are some
characters that are dangerous.
>> For example, in SQL strings, these quotes--
single quotes or double quotes--
mean something.
They mean end this string here.
And so if the user gives you a single or a double quote, they could be
trying to trip up your SQL query and insert some bad stuff into it.
And if they do that, they could gain control of your database or do some
things that you don't want them to do.
>> So that's why whenever we take SQL queries, we sanitize the input before
putting it into the database, which means we escape those characters.
We'll talk about that in a second.
But long story short, a SQL injection attack is if you don't do that--
if you don't take care of the input they gave you before putting your
database, they can, as you see down here, run a query that, in fact--
they put in their code down here and this select line down here will select
everything from the table regardless of what the password is given.
Because you have the or 1 equals 1.
>> So it's basically, long story short, a way to take over the database.
The question, then, for you guys, is where in p sets 7 did you sanitize all
the inputs to your SQL queries?
Where did that step happen?
Where do you prevent SQL injection attacks from happening in p set 7?
Yeah.
>> AUDIENCE: Crypt?
>> JASON HIRSCHHORN: So it wasn't crypt.
We didn't make you do this for this particular problem set, but it happens
in the query function.
We actually wrote it for you, and we took care of the
sanitizing inputs for you.
But in years past, students have had to type the inputs on their own.
In p set 7, a lot of you--
let me open up one other file.
>> So you'll notice up here a lot of people, in problem set 7, did not call
this function on strings.
This function, htmlspecialchars, again--
this string might have some things that in HTML mean something else.
Like a brace, a square, or an angle bracket mean something in HTML.
>> And so if you print that out to the screen or if you just take that and
print that out to your HTML, that might do something you don't expect.
So htmlspecialchars goes over all those characters that have special
meeting and escapes them.
So it gets printed out as the text you want to see, rather than
screwing up your HTML.
We called that function in the header.
And a lot of people forgot to call that function in the
code you were writing.
>> So, for example, if a stock name had an angle bracket in it and you forgot
to call this function, that angle bracket could have thrown off what
your HTML looked like.
But calling this function will escape that so it actually prints out as an
angle bracket and doesn't throw off your HTML code.
>> The same reason we've seen, sometimes, slashes before double quotes in a
printf line because we don't want the double quotes down the string.
We want to print them out to the screen.
So all of this is the same idea.
Does that answer your question?
>> AUDIENCE: Kind of.
>> JASON HIRSCHHORN: Do you have a follow-up?
>> AUDIENCE: I guess the SQL injection attack has to do with that?
I don't understand how the two are related.
Why would you do the specialchars?
>> JASON HIRSCHHORN: OK, so the SQL injection attack is when you inject
some malicious strings into somebody's program, and they just take it and run
the SQL query with a string you gave them.
As you can see down here, that could be problematic.
So the way you prevent against that is you take their string that they give
you-- so this string right here--
and you sanitize it.
You escape all the things that are potentially problematic.
So you don't interpret them as something that means something.
>> And an example of that with HTML is this function.
So it's the same idea here.
And I was just showing you other examples of when you've
seen this idea before.
Of escaping user input before printing it out to a screen or putting it
inside a SQL statement.
>> AUDIENCE: So in this case, the user is messing with the programmer.
>> JASON HIRSCHHORN: Yes.
With all of these security attacks, that's always generally the user, or
somebody, is trying to mess with you, the programmer.
And these are ways you can prevent against them.
>> AUDIENCE: So I have a question about hash functions.
In Quiz 1 from 2011, there are two questions about one-sided hashes.
And I was just wondering what that meant.
>> JASON HIRSCHHORN: OK, which quiz?
2011?
>> AUDIENCE: Yeah.
>> AUDIENCE: Quiz 1?
>> AUDIENCE: [INAUDIBLE].
That's like hashing a password.
That's not putting things--
>> JASON HIRSCHHORN: What page was it?
>> AUDIENCE: I think it was 9 or 10, or both.
>> JASON HIRSCHHORN: All right, go ahead, Curt.
You can answer while we look.
>> AUDIENCE: I think it's talking about hashing a password.
Like, when someone enters a password, you turn it into an encrypted thing.
That's the password hash, which is different from a hash function that
puts something into a hash table.
>> JASON HIRSCHHORN: Let's see.
Let me pull up what they give as the answer.
And then we'll walk through it.
>> So Curt gave a great example of a one-way hash.
When we've seen this before, we take the password and turn--
remember, in p set 7, somebody might have a password that's just password,
but then it gets encrypted into some really long thing.
The one-way hash means it is very easy to go from one way to the other, but
it's very hard to go from the other way back.
>> And so you know, when you were checking people's passwords in problem
set 7, you would take their--
so, for example, say they wanted to change their password, you ask them
for their old password.
You took their old password.
You encrypted it.
And then compared the two encryptions rather than unencrypting the original
one, because it's really hard to go that way.
Yeah.
>> AUDIENCE: How in depth does our understanding of TelNet have to be?
>> JASON HIRSCHHORN: If it was mentioned briefly in lecture, just a brief
understanding.
Again, back to the answer to Avi's question--
the more things come up, the more likely it is you have to be super
familiar with them.
If they've only come up in lecture, that's just one place.
But if they come up in lecture, section, and a problem set, then you
probably have to be super familiar with them.
>> So I had a question from earlier about--
is was fall 2010--
Quiz 1, let's pull up--
this question on stacks and queues, which we did spend a fair bit of time
talking about in lecture, even though we didn't really
ever hit it in section.
So this question is giving you a series of commands and asking you what
gets printed in this case.
So this is a totally reasonable question that could be asked of you
guys, and then you guys should be able to answer it.
>> So why don't you look at it for 30 seconds, and then if anybody wants to
propose the answers to me, and then we'll walk through it.
All right, who has an answer to question 27?
Yeah.
>> AUDIENCE: Is it 1, 2, 3, 3?
>> JASON HIRSCHHORN: That's right.
27 is 1, 2, 3, 3.
So let's look at how we got that.
>> First, we are saying, if s is a queue, what gets printed?
So a q is first in, first out.
We've seen that before.
We saw the picture of the people waiting at the Apple
Store to buy some product.
The first people in are the first people out.
The first things in a queue are the first things out.
>> So if we push something into a queue, you push the 1, then we pop the 1.
Pop just means take out.
In this case, just take something out.
We take out the first thing, that's a 1.
So we'll put things we print down over here.
This is no longer in our queue.
>> Then we push on a 2 and a 3, and we pop off the first thing.
Again, because it's a queue.
So we get a 2, then we put on another 3 and call pop again.
Our 3 is first.
>> And then we had a whole bunch of other things and call pop.
But again, since this is a queue, first in, first out.
We take out the first thing that was ever put in.
That's our 3.
And, in this case, we don't worry about all those other things.
So that's if this is a queue.
Any questions about a queue?
>> A stack's different.
What is the acronym we have for understanding a stack?
>> AUDIENCE: Last in, first out.
>> JASON HIRSCHHORN: LIFO, I think.
Last in, first out.
So we saw an example of a stack of trays in a dining hall.
Whatever tray is on top gets picked up.
And then if new trays come in, they get put on top.
And then whatever is on top gets picked up.
So those trays on the bottom might stay there for awhile.
>> In that case, again, we'll draw this out.
We push on one, so one is first in line.
And we pop something off.
And there's only one thing in there, so we move 1 down here.
Then we put on 2 and 3 and we pop something off.
>> But again, since this is a queue--
or this is a stack, rather--
we take whatever was in last.
Whatever is in last comes out first.
And 3 is in last.
So we put the 3 down there, then we put on another 3 and we
pop something again.
Finally, we put on the 4, 5, 6, and 7, and here we pop.
And because it's a stack, we take whatever was put in last and write
that down here.
So we end up with 1, 3, 3, 7.
Does anybody have any questions about stacks or queues, or this example?
>> OK.
Let's go back to the list of topics.
Not that way, this way.
What other questions do people have?
>> AUDIENCE: I don't know how important this is, but I was confused by the
difference between different types of languages like markup, compiled,
interpreted.
>> JASON HIRSCHHORN: That's a good question.
I think that is somewhat important, so let's go over it quickly.
The big languages we've seen so far are C, PHP, and JavaScript, in terms
of programming languages.
HTML, as you mentioned, is not a programming language.
It's a markup language.
And then we have CSS, which is also not a programming language.
>> We've also seen SQL, which is not a programming language either.
So SQL allows you to write queries for a database.
HTML is a markup language.
It defines how things are structured.
And CSS allows you to style things.
That's probably the extent for what you need to know about those three.
But it is more interesting to figure out the differences between C, PHP,
and JavaScript.
>> So one of the biggest differences, as you mentioned, is how they're
compiled, or whatever the equivalent is.
So C is compiled.
We would always run a compiler.
And then where are your errors when you run the C compiler?
Where does it show you the errors In your code?
How do you know there's an error in your code in C?
>> AUDIENCE: It shows you in the terminal.
>> JASON HIRSCHHORN: It shows you in the terminal as you're compiling.
And if there are errors, it won't actually compile it.
So you know that there are errors right away, ahead of time, before you
even run your code.
>> Of course, you might run your code and get a segmentation fault, but that was
probably because you did some silly logic thing.
But your code with technically all correct and could run.
So C code gets compiled ahead of time.
What about PHP code?
Where were errors in your PHP code?
How did you know you had errors in your PHP code?
>> AUDIENCE: Run time?
>> JASON HIRSCHHORN: Yeah, when you would run it, you would run the
PHP code in the back.
And then you would display a screen.
You might see some things on the top, but then you would see, like, some
orange, ugly table.
And it would give you a line number and say, blah, blah, blah, this stuff
didn't work.
>> So PHP is interpreted line by line and executed on the server.
And then the result is sent over to you.
Great.
Executed in the server line by line and then sent over to you.
And if there's an error, it'll send you the error, but you might have
gotten some stuff ahead of time.
So some of it might have worked, but later on, some stuff might not have
not worked.
>> What about JavaScript?
Where did you see JavaScript errors?
In p set 8, when you got an error, how did you know?
Where would it show up?
>> AUDIENCE: In the console, at the bottom.
>> JASON HIRSCHHORN: In the console, on the bottom.
It would also give you the line number, and it would
show up on the bottom.
And JavaScript was not executed on the server.
JavaScript was sent to your computer, and then when it was time to run the
JavaScript, the JavaScript was run line by line on the
client, on your side.
Not the server, the client side.
>> And similarly, it was run line by line.
And then when you would get an error, it would show up at the bottom.
Similarly to PHP, some of it might execute, and then you might get an
error later on.
>> Also, a little unlike PHP, if you got a JavaScript error--
say you didn't do the right code for an alert box--
you could keep running your program.
The alert box wouldn't work, but your program would be fine.
Just maybe that function would fail.
>> So there's some of the biggest difference in terms of how these
languages, or how the programming code you write are actually evaluated.
There are also other differences in terms of-- the biggest difference
we've seen in terms of variables in the different languages.
So can anybody give me a difference between variables
in the three languages?
Yes.
>> AUDIENCE: In C, they're strictly typed.
In the other two, they're loosely typed.
>> JASON HIRSCHHORN: And what does that mean?
>> AUDIENCE: That in C, you have to declare the type of the variable when
you declare the variable, like interbool or char.
>> JASON HIRSCHHORN: Excellent.
In C, we always had to put a type of a variable.
And we couldn't really mix types.
You couldn't do an integer plus a string.
But as we've seen in these other languages, you actually can mix types,
and you never really have to give something a type, ever.
>> So how do we know things are variables in PHP and JavaScript?
>> AUDIENCE: In PHP, they start with a dollar sign.
In JavaScript, when you declare them, you have to have a bar.
>> JASON HIRSCHHORN: Right.
So in PHP, they start with a dollar sign.
In JavaScript, they have to have bar, although sometimes they don't actually
have to have bar.
But that's correct.
>> So that's a big difference between variables.
I think those are probably, off the top of my head, the two biggest
differences between these three languages.
But, yeah.
>> AUDIENCE: And the scope of C variables is restricted to the curly braces,
where the other ones, it's just like, it dies if it's in a function only,
but otherwise, it's--
>> JASON HIRSCHHORN: Right.
So scope is slightly different in C. As you remember, curly braces define
the scope of variables.
So if it was defined inside an if condition, which is inside a for loop,
the variable only exists there.
>> In JavaScript, if a variable is defined inside an if condition--
inside a for loop-- it'll exist for that function, but it won't exist
outside that function.
So scope is a little bit more flexible in JavaScript and PHP.
That answer the question?
OK, any other questions?
We can do four more minutes of questions, then
we'll jump into coding.
>> AUDIENCE: Can we go into Ajax and talk about what that is?
>> JASON HIRSCHHORN: Talk to Avi after.
He asked that question earlier.
>> AUDIENCE: My bad.
>> JASON HIRSCHHORN: No worries.
>> AUDIENCE: What exactly is JSON?
>> JASON HIRSCHHORN: What is JSON?
What's your question?
>> AUDIENCE: Just really quickly, the difference between
print and echo in PHP.
>> JASON HIRSCHHORN: Why don't you google the difference between print and echo?
Slight difference.
Not that big of a deal.
But you should definitely google it, and that'll give you a good answer.
>> JSON, probably bigger of a deal.
Stands for JavaScript Object Notation.
And when have we seen JSON being used?
When have you seen--
why do you even know the word JSON?
When have you seen it?
>> AUDIENCE: When we were getting stock quotes for finance.
>> JASON HIRSCHHORN: So you saw it when you were getting
stock quotes for finance.
And why did you see it?
>> AUDIENCE: When we were retrieving all the information that
came in that format.
>> JASON HIRSCHHORN: So you would get--
yeah.
Go ahead.
>> AUDIENCE: [INAUDIBLE] information out of an object?
>> JASON HIRSCHHORN: Both of those put together is the answer
we're looking for.
You want information from this other webpage.
And you would hope that when you're getting that information, it would be
presented to you in some type of standardized format.
>> Everybody is probably familiar with comma-separated values.
You can export an Excel spreadsheet or any type of spreadsheet as a list of
comma-separated values.
And the commas divide all the different fields.
JavaScript Object Notation--
JSON--
is another type of standardized layout of things.
And that's often how we retrieve information from our Ajax queries.
>> So in this case, we got it from the Yahoo site.
They return things to us in a JSON object.
And then we know, because it's a standard, what it's
going to look like.
So we can iterate through the array that's returned to us, the array of
objects that are returned to us.
>> We do probably need to know the keys, but they generally give you
documentation in the website when you're fetching some JSON
notation for them.
Likewise, you can JSON encode an object.
So there's a function JSON underscore encode.
And so you can take an object that you've created, JSON encode it, and
pass it on to something else, if you want to.
And JSON decode also exists for a similar purpose, or for
the opposite purpose.
>> AUDIENCE: Do we need to know coding for hash tables and tries?
Or do we just need to understand how they're used, conceptually?
>> JASON HIRSCHHORN: So, raise your hand if you did a hash table for p set 4
with a link list.
Or p set 5.
So that was a vast majority of people.
P set 5, 6, who knows.
A long time ago.
>> So the vast majority of you did hash tables with link lists.
And because that's probably the more common approach, and because we spent
a lot of time doing link lists and hash tables, you should probably be
pretty familiar with how to code a hash table and a link list.
>> And if you think back to that problem set, it wasn't really
as hard as you expected.
And there was a lot less code than you expected.
I would say you should know how to code a hash table or a link list.
Not that you'd be asked that, necessarily, but you should
certainly know that.
>> Also, if you look through past quizzes, there have been a lot of
questions about writing functions on link lists or doubly-linked lists.
That seems to come up every single year.
Right insert on a link list, right delete from a link list, right insert
for a doubly-linked list, et cetera.
So that, I feel pretty comfortable saying you should know that.
>> For try, I would say you should certainly know how it works, and maybe
give some pseudocode for how to code it and set it up.
But it would not be the worst thing in the world if you didn't know how to
code it in C. It would be great if you knew how to code it in C, but I think
probably pseudocode for a try would be the most you would need
to know for a try.
>> AUDIENCE: Extra credit?
>> JASON HIRSCHHORN: And same with, if we go into binary search trees, you might
need-- and you've seen in the past, we've done a lot of-- you know how
binary search tree works.
You should probably be able to set one up in pseudo code.
But because the vast majority of people didn't do that on the problem
set, I'd say it's probably less important that you know how to code
and set up a tree like that.
>> Any other questions?
Also, we can ask them throughout as we go through some problems.
OK, we're going to move on.
Skip that slide for now.
>> Speaking of trees, that is the first question I have for you guys.
Because this is a problem.
I would say it's highly likely you'll get a problem like this on your quiz
asking you to code some type of insert, delete, search, for one type
of data structure we've seen.
>> That comes up every year and we spent a lot of time the second half of this
semester going over these data types.
So right now, I've defined a node in a binary search tree.
And what I would like you to do is given a binary search tree that starts
at this node star root, complete the implementation of the function below,
which happens to be a find function.
And do it with and without recursions.
>> So I want you to write two functions.
One doing this with recursion, one doing this without recursion.
And do not assume that the root will be non-null.
So we're looking for the integer i in the tree starting at root, and we need
to write this recursively and iteratively.
Yeah.
>> AUDIENCE: So you want us to return true if we find it, and false if we
don't find it.
>> JASON HIRSCHHORN: How did you know?
How did you know that?
>> AUDIENCE: I was asking first, but I was assuming, because it says bool at
the beginning of the function.
>> JASON HIRSCHHORN: Right.
It says bool, so I don't even need to tell you what I expect you to return
because it says right there.
But that's right.
Return, true or false.
>> So before you begin, I would recommend, if you are unfamiliar with
binary search trees, quickly drawing a picture of it to get your
understanding, right.
That will also help you when writing your code and checking it.
Again, you also don't have that much time on the quiz to do all the things
that we ask you to do.
So writing pseudo code is very helpful.
>> And we generally give about--
if the pseudocode is perfectly correct, that's
generally 50% on a question.
So it's not a hard and fast rule, but if you just write pseudocode and it's
correct, it's generally 50%.
So I'd always recommend--
if you're pressed for time, or even if you're just trying to figure it out--
starting with the pseudocode.
And finally, if you could write this all in C, that would be fantastic.
>> So let's take three minutes to work on this program.
And then we are going to write pseudocode for it just once, and then
we're going to code it recursively and then iteratively.
>> If you have any questions, feel free raise your hand.
Happy to walk around and answer them before we start as a group.
>> Let us resume, and we're going to pseudocode the recursive version of
this, and then we will code it.
So a recursive function needs two things.
This might be a question that you could be asked.
Needs two things.
Who can raise their hand and tell me what the two things a recursive
function needs?
By definition it has two things.
What are those two things?
New hands.
Yes, Alden.
>> AUDIENCE: So I'm not exactly sure if this is the terminology, but--
>> JASON HIRSCHHORN: I'm glad you're raising your hand.
>> AUDIENCE: It needs a base case, and it needs a recursive step.
>> JASON HIRSCHHORN: Perfect.
It needs a base case and a recursive step.
So what's our base case here?
>> AUDIENCE: F root equals equals null.
Sorry, just in pseudocode, if it's null.
If root is null.
>> JASON HIRSCHHORN: If root is null.
That's excellent.
That's our base case.
That's what we're going to check every time.
And base case is the first thing you do.
If you hit the base case, you're done.
>> Now we need our recursive call, and I'd be willing to bet we need a couple
recursive calls here.
Because it's a tree, and we could go multiple ways.
So if root is null, we're good.
>> What do you propose?
And now I'm going to start calling out on you guys, because I know you guys
all know this.
But Annie, what should the next line be?
What if we found it?
What do we do?
>> AUDIENCE: If we found it?
>> JASON HIRSCHHORN: Or what should be that--
give me the pseudocode for the line where we found it.
>> AUDIENCE: If i equals root i?
>> JASON HIRSCHHORN: And then what do we do?
>> AUDIENCE: Return true.
>> JASON HIRSCHHORN: Great.
So if i is i--
oh, they're both called i.
That gets confusing.
But if i is i return true.
That's probably the next thing we should do.
Makes sense.
>> OK, now we haven't done our recursive call yet, though, because a recursive
call would call this function again.
So what should the next line of pseudocode be?
Anna.
>> AUDIENCE: The left side.
>> JASON HIRSCHHORN: Be specific, though.
This is a binary search tree, so what does checking the left side entail?
>> AUDIENCE: So node--
I'm sorry, root.
And then arrow left.
Node, node, sorry.
I'm not reading it properly.
It's called node, right?
>> JASON HIRSCHHORN: It will be called root in that function, but either way.
The left side-- yeah?
>> AUDIENCE: If it doesn't equal i, then we're going to call
the function again?
>> JASON HIRSCHHORN: That's right.
If it doesn't equal i, we're going to call the function again.
But what side of the tree are we going to call the function again?
>> AUDIENCE: On the left side.
>> JASON HIRSCHHORN: We're not always going to call it the left, if it
doesn't equal it.
>> AUDIENCE: Oh, sorry.
Call on the right.
>> JASON HIRSCHHORN: We want to know specifically, though-- remember, in a
binary search tree, everything to the left hand side is smaller.
Everything to the right hand side is greater.
So it's just not-- yeah, go ahead.
>> AUDIENCE: If it's less than i, then--
if it's on the left--
>> JASON HIRSCHHORN: So if ri is less than--
so if our number is less than i, what side do we want to go to?
>> AUDIENCE: We want to go to the right side.
>> JASON HIRSCHHORN: We want to go--
let me draw a quick tree.
If this is 5, this will be 3.
So if ri is less than five, what side do we want to go to?
>> AUDIENCE: Sorry, what?
>> JASON HIRSCHHORN: Our number is less than the number we're
looking at right now.
>> AUDIENCE: Oh, then we want to go to the left side.
Yeah.
Sorry.
>> JASON HIRSCHHORN: Exactly.
No worries.
In the binary search tree, everything lower is to the left,
greater is to the right.
So if our number is less than the i we're checking--
because you see in the node, it has an i--
then you want to go to the left.
>> And this is an easy one.
What is it the other line of pseudocode we need to write?
Carlos?
>> AUDIENCE: Same thing, you just switch it to a greater than sign
and go to the right.
>> JASON HIRSCHHORN: Can you say it one more time?
>> AUDIENCE: If our number is greater than i, go to the right.
>> JASON HIRSCHHORN: Excellent job on the pseudocode.
Let us do this in real code.
And again, this pseudocode will probably get you, because it's
correct, 50% on this question.
But this pseudocode also translates one to one, essentially, into code.
>> So let us do this in C. Who can give me the first line of code?
Actually, first, before I do that, let me pull over--
>> AUDIENCE: I have a question.
Why did you indent the line I gave you?
>> JASON HIRSCHHORN: Because I couldn't write.
I don't know.
You're right.
That line should be over there.
>> OK, here is our function.
And let me pull over, also, our definition of a node.
What happens if we didn't write typedef?
Does anybody know?
>> AUDIENCE: It wouldn't compile.
>> JASON HIRSCHHORN: It would compile, yeah.
>> AUDIENCE: Would it just declare one instance instead of making it a new
type you could declare multiple instances of?
>> JASON HIRSCHHORN: So it wouldn't know-- it wouldn't
just declare one type.
You could still make a lot of nodes.
>> AUDIENCE: But wouldn't we have to write struct node every time?
>> JASON HIRSCHHORN: That's right.
You would have to write struct node every time, instead of just node.
But with typedef, you can just write node every single time.
OK, who hasn't given-- yeah, Avica.
>> AUDIENCE: If root equals equals null, return false.
>> JASON HIRSCHHORN: Great, and that's our base case.
Next line of code.
Somebody who hasn't given me a line of code yet?
Yeah.
>> AUDIENCE: Root arrow i is equal equal to i.
Then return true.
>> JASON HIRSCHHORN: Great.
Next line?
Yeah.
Someone else?
And then you can go next.
>> AUDIENCE: Else if root arrow i is less than i return
function called find root--
>> JASON HIRSCHHORN: Sorry.
>> AUDIENCE: Return find root points to left comma i.
>> JASON HIRSCHHORN: So if ri is greater than the thing in the tree, we want to
go to the left?
>> AUDIENCE: No, I had that switched.
>> JASON HIRSCHHORN: Which one?
>> AUDIENCE: No, yeah.
I have a less than sign there.
>> JASON HIRSCHHORN: Right, if ri is less than what's in the root--
our current root-- then we want to go to the left.
And what's the last line, you?
>> AUDIENCE: Basically the same thing, except switch the greater than or
equal to less than and left to right.
>> JASON HIRSCHHORN: Excellent.
Does anybody have any questions about this?
So some other things that would have been correct is that
could be the -ltiff.
Guess, technically, none of these really also need to be -ltiff.
>> Also, there's probably only one case down here.
So that's probably your last case.
You don't even need that -ltiff.
But probably good to write it, to be clear.
Yeah.
>> AUDIENCE: So you don't think the quiz-- if we make errors, for example,
in syntax--
little syntax errors--
how does that get taken in the quiz?
>> JASON HIRSCHHORN: Generally on the quiz, small syntax errors or small
style errors don't lose you points.
So if you forgot a semicolon here, it would be OK.
If you forgot to close this parenthesis, that would be OK.
>> Huge syntax errors that alter the functional meaning of your code
dramatically, you might get taken off points for.
Or generally, just grading you on whether or not your
code functions, even--
not its design so much, and not its style.
>> Let's now code an iterative version of find.
So it's going to be pretty similar, but there are certainly going to be
some key differences.
However, our pseudocode can probably go--
we can still take one line of the pseudocode and figure out what the
line is in this case.
>> So in an iterative version, what do you think, Julia, should
be the first line?
>> AUDIENCE: Again, in iterative boolean, you need to set up a for loop, right?
>> JASON HIRSCHHORN: OK.
>> AUDIENCE: So for like, k, for x equals 0, x is less than i.
Or no, x is less than the size of the tree.
>> JASON HIRSCHHORN: The tree.
So we don't really know the size of the tree, and we don't really know for
how many times we can go, so what's a different type of loop that might be
better in this case?
>> AUDIENCE: If else?
>> JASON HIRSCHHORN: If else cannot be a loop.
So what's a type of loop we can just go until some case is met?
What's the only other type of loop in C besides a for loop?
>> AUDIENCE: While.
>> JASON HIRSCHHORN: While, exactly.
In a while loop, don't need to know how--
a while loop and for loop can do the exact same thing, but the nice thing
about a while loop is we don't need to know how big our tree is.
So we're going to go until what?
>> AUDIENCE: Until it equals the size of--
>> JASON HIRSCHHORN: Well, it's very similar to our recursive case.
So--
>> AUDIENCE: While root i does not equal i.
>> JASON HIRSCHHORN: That's really close.
While root i--
let's try it.
I don't think [INAUDIBLE]
where root i does not equal i.
We might need to change it in a little bit, but that sounds like it's pretty
good, for now.
So we'll do that.
>> Also, remember, we can't assume per the question.
You do not assume that the root will be non-null.
So what do you think the very first thing we should do is?
>> AUDIENCE: Just do the same thing as before.
If the root equals equals null, return false.
>> JASON HIRSCHHORN: Great.
So it could be null.
So we want to get rid of it right away.
And then we're going check if root i does not equal i.
So, say we're searching in this tree for 3, root i does not equal i, now
we're in our while loop.
What do we want to do?
And again, it's going to be pretty similar to our recursive version.
Yeah.
>> AUDIENCE: So you'd want to iterate, or keep going down the tree as long as
the root is not equal to null.
>> JASON HIRSCHHORN: As long as the root is not equal to null?
>> AUDIENCE: The root dash i is not equal to null.
Just the root, yeah.
As a long as the root is not equal to null.
>> JASON HIRSCHHORN: So you want to change this into root
does not equal null?
>> AUDIENCE: Yeah.
>> AUDIENCE: We could combine these, right?
We don't need the if, initially.
>> JASON HIRSCHHORN: OK, so if we don't--
if we combine them, so we're going to do while root does not equal null, and
if the root happens to be null at the beginning, what do we do down here?
>> AUDIENCE: Return false.
>> JASON HIRSCHHORN: Great.
So both ways probably would have worked.
This is a different way, and this combines it.
But again, if you did either way, we're not going to take off design
points on the quiz.
But this looks good.
>> So while root does not equal null, what is the first
thing we want to check?
Somebody else?
Null, what's the first thing?
>> AUDIENCE: If ri is less than--
oh, I guess, if we already found it in the root.
So if root arrow i is equal to i--
>> JASON HIRSCHHORN: Sorry?
>> AUDIENCE: If root arrow i equals equals i--
>> JASON HIRSCHHORN: What do we do?
>> AUDIENCE: Return true.
>> JASON HIRSCHHORN: Great.
And what's next?
Jeff, what's the next line of code?
>> AUDIENCE: If i is less than root arrow i, then root equals root arrow left.
>> JASON HIRSCHHORN: Root equals root arrow left.
So that's probably the biggest difference here in this iterative
version as opposed to the recursive version.
The recursive version, we call the function again.
We'll be updating root when we call the new function.
Here we're not calling a new function.
We're simply just updating root in this function.
That's excellent.
And what is the last line of code?
Yeah, Mario?
>> AUDIENCE: Else root equals root arrow right.
>> JASON HIRSCHHORN: Sorry?
>> AUDIENCE: Root equals root arrow right.
>> JASON HIRSCHHORN: Could you also write something like this?
>> AUDIENCE: I have no idea.
>> JASON HIRSCHHORN: You can't.
You can't do plus equals.
OK, so this looks good.
Why don't we just do that to clean it up.
This looks great, and this would work.
And we would break out.
>> If root left was null or root right was null, we would come up here.
Root would be equal to null.
We'd break out of our loop, and we'd return false.
So when we break out of the loop, we return false.
>> And again, the a while loop was perfect here because we don't know how
big our tree is.
We tried to write the for loop, but we realized you've got to figure out how
big it is ahead of time.
Yeah.
>> AUDIENCE: If this weren't a binary search tree, it would be real math-y
to write it iteratively, right?
Like, if it was a tree, but not necessarily--
so it wasn't all smaller on the left, and all bigger on the right.
It would be really difficult to iterate over it, right?
We'd have to save what was earlier on in the tree and go back,
and stuff like that.
>> JASON HIRSCHHORN: If it wasn't a binary search tree, if it was just a
tree and things weren't sorted like this--
and we realized earlier when Anna was helping us that making it
sorted helps us a lot--
we would need to, yes, always save where we were previously.
But there could be a lot of where we were previouslys.
There could be a lot of parent nodes.
>> Probably the best way to do that would be to keep pushing things onto some
type of stack or queue.
You would never need to code this because it's a hard problem.
But you push some things onto a stack or queue and then pop them off, and
then evaluate them.
>> And then have some other thing where you're actually putting the nodes, and
then create that, and then search through that.
That might be the best way to do it.
OK, any questions about this problem?
>> AUDIENCE: This is on a related note.
Will we have to compare run times for hash tables, binary
search trees, et cetera?
>> JASON HIRSCHHORN: Probably.
So let's do that really quickly.
Run time for hash table--
what are the others?
Binary tree?
>> AUDIENCE: Link lists.
>> JASON HIRSCHHORN: OK, let's do insert.
What is the big O of insert on a hash table?
What are the assumptions you're making?
>> AUDIENCE: You're inserting at the beginning of the link list.
>> JASON HIRSCHHORN: Probably the first assumption is there are no collisions.
If there are no collisions, then the insertion time is one.
If there are collisions, and you're doing separate chaining and inserting
at the beginning of the link list, then insertion is also constant.
>> If you're doing a hash table but you have a different method of dealing
with collisions, what's a different method?
What's is a different method of dealing with
collision in a hash table?
>> AUDIENCE: Linear programming.
>> JASON HIRSCHHORN: Linear programming.
So we're going to keep looking for the next open spot.
That is not constant insertion time.
You could have to go through the entire table, so that
could be big O of n.
Yeah.
>> AUDIENCE: Otherwise just chaining?
>> JASON HIRSCHHORN: We did separate chaining.
That was the first one.
That's what the link list.
The fancy name is separate chaining.
It could be any type of list structure we happen to do in link list.
>> So again, insertion on a hash table could be constant time.
What about insertion on a stacker queue?
>> AUDIENCE: Isn't that constant?
>> JASON HIRSCHHORN: It's constant time.
You're just pushing it on.
OK.
Insertion, what were the other ones?
On a try?
What is big O of insertion on a try?
>> AUDIENCE: Length is constant.
Length of the longest--
the length of the word you're inserting.
>> JASON HIRSCHHORN: Sorry?
Wait, so what did I hear?
You said-- what did you say?
What was your answer, Marcus?
>> AUDIENCE: The length of the word you're inserting in characters,
assuming it's a character try.
>> JASON HIRSCHHORN: OK, so the length of the word.
We'll make an assumption that it's a string of characters.
You said something different, though.
You said length of longest word.
>> AUDIENCE: That's just constant, right?
>> JASON HIRSCHHORN: Why would it be constant?
>> AUDIENCE: Like, if you use big O notation, then it doesn't vary based
on the number of things that are already in the try.
>> JASON HIRSCHHORN: So we would say it's constant time.
It is constant insertion, and that's because this idea--
say we have a word that's 45, or a word that's 60, that
has a constant number.
And it would just be inserted in constant time.
>> In practice though, it would not be, obviously, happen in one millisecond,
for example.
But we would say big O is constant for a try.
And that's one of its biggest advantages.
>> What about insertion into a link list?
Just a generic, sorted link list?
Yeah.
>> AUDIENCE: I had a question.
On the test, would they ever ask us the insertion time that's four steps,
or something?
Or is it just--
when you say insertion time is one, that just means constant time?
>> JASON HIRSCHHORN: Yeah, they would always ask, is it big O of n?
Big O of log n?
N squared constant.
Those are really the only ones you need to know.
What about insertion onto sorted link list?
>> AUDIENCE: I had a question--
a question--
>> JASON HIRSCHHORN: What is the answer to that question, though?
>> AUDIENCE: Wait, what did you ask?
>> JASON HIRSCHHORN: What is big O of insertion into a sorted link list?
>> AUDIENCE: One?
No wait, No wait, n.
>> JASON HIRSCHHORN: N. Besides the link list.
And what was your question?
>> AUDIENCE: So would you write o of k or o of 1 for the--
>> JASON HIRSCHHORN: Oh.
I would write o of 1, probably.
There was one other data structure that would have been good.
Tree, binary search tree.
What's insertion on a binary search tree?
>> AUDIENCE: Login.
>> JASON HIRSCHHORN: So, what is the worst case in a binary search tree?
So if we happen to start at 5, and every number is greater than 5, then
we've got 5, 7, 9, 11, et cetera.
In this case, it's basically just a link list, and we need to insert all
the way at the end.
So it's big O of n.
>> That could be our worst case on a binary search tree.
Obviously, you would never construct a binary search tree with 5 in the
middle, knowing 5 would be the lowest number.
But it could be, if you're starting from scratch.
Any questions on this before I move on to another question?
That was a good question.
I would know big O of--
>> AUDIENCE: What about searching for those four?
>> JASON HIRSCHHORN: Definitely we did searching and sorting.
We did all those algorithms, right.
Wait, was that for Quiz 1?
Was that covered--
did you already have that question on Quiz 1?
The big O runtime of binary search, insertion sort, bubble sort?
>> AUDIENCE:Yeah.
>> JASON HIRSCHHORN: If you had that question on Quiz 0, odds are you won't
get the same exact question on Quiz 1.
Might be still good to know those.
You should hopefully know gh already.
>> But other logarithmic runtimes are probably good to know.
Things that weren't covered on Quiz 0.
Like all these operators on these abstract data types.
>> OK, let's move on.
This one should be pretty quick.
And this is a new language we haven't actually coded in before.
This is a question asking to code in PHP.
So consider the PHP array below.
Write PHP and/or HTML codes such that it outputs a two-column table with TFs
names and houses.
>> You've never done this before, this specific problem.
But this should be very familiar to what you did in problem set 7.
So I would be willing to bet you will be asked to code something in PHP that
is very similar to what you did in problem set 7.
>> Firstly, array is not that specific.
What type of array is this?
>> AUDIENCE: Associative.
>> JASON HIRSCHHORN: It's an associative array.
And what's the difference between an associative array and an object?
>> AUDIENCE: An object array has an index of integers, and an associative array
is an index of a string, or something like that.
>> JASON HIRSCHHORN: So an array of objects would have indices of
integers, but an object has fields.
It has those fields names like name, house, student.
Do you have an idea?
>> AUDIENCE: Well, associative array is in PHP, right?
And object is in JavaScript?
>> JASON HIRSCHHORN: Honestly, there's no real difference between the two.
Both have strings as the keys, and can have basically anything as the value.
Different languages call one thing associative array,
one thing an object.
So honestly, there is no real difference, but there's certainly some
syntactical differences between the two.
Yeah.
>> AUDIENCE: So is object also coded under the hood as a hash table, then?
>> JASON HIRSCHHORN: What do you mean, coded under the hood?
>> AUDIENCE: We were told that associative array was technically a
hash table.
So is object also technically a hash table?
>> JASON HIRSCHHORN: I'm not going to answer that question.
I'll get back to you on that.
But I wouldn't think of either of those like that.
But, in any way, associative array and object, generally, people use those
terms interchangeably.
In this case, the cool part is you can use keys.
Strings as keys, rather than just simple numbers.
>> So I've been talking about this for awhile.
Hopefully, some people have gotten started on this.
We're going to write some PHP and HTML code, such that we get a two-column
table with TFs names and houses.
>> OK, I also would like a header row on this table.
So I'm going to get straight into this.
We're going to file, new, and we're going to--
>> OK.
How do I start a table?
What's the tag, Michael, to start a table?
>> AUDIENCE: Table.
>> JASON HIRSCHHORN: Table.
And if I open a tag, what else do I need?
>> AUDIENCE: A head?
Or, I guess, class.
>> JASON HIRSCHHORN: So, sorry.
Assume that we've already written doctab, HTML, all that stuff.
But if I open this table tag, what else do I need to write?
for validate HTML?
>> AUDIENCE: Close it.
>> JASON HIRSCHHORN: Close the tag.
How do I write a close-table tag?
>> AUDIENCE: Dot slash table.
>> JASON HIRSCHHORN: Slash table, great.
Probably makes sense to write both of those together because
you've got to do it.
OK, if I want a header row, how do I write a header row with titles?
>> AUDIENCE: Is it less than 10 hr close--
TR, yeah.
>> JASON HIRSCHHORN: TR?
>> AUDIENCE: Then same thing, the slash, yeah.
>> JASON HIRSCHHORN: OK, and give me two columns.
>> AUDIENCE: T D?
>> JASON HIRSCHHORN: OK.
I want two columns.
Does this give me two columns?
How many columns is this?
One.
So let's copy and paste this.
>> So actually, on the quiz, all this code that we've written so far was
actually given to you.
But you should probably still know how to write it.
Yeah.
>> AUDIENCE: Your house is between the two.
>> JASON HIRSCHHORN: Boom.
It should go right there, right?
Good call.
So again, all this code is actually given to you on the actual quiz.
But it's fun to write it, and you should know how to write it.
So this is where you need to start your code.
What do we need to write right here?
>> Sorry, I need to change the name of this file.
So we saved it in a .HTML file, not in a .PHP file.
These things would mean nothing in a .PHP file.
So we're in a .HTML file.
What is the first thing I need to write?
I want to put some PHP code in an HTML.
>> AUDIENCE: PHP, like another carrot and question mark PHP, right?
>> JASON HIRSCHHORN: Great.
And how do I end that?
>> AUDIENCE: With a question mark.
>> JASON HIRSCHHORN: That's great.
That's the first thing I need if I want to put some PHP code in here.
>> AUDIENCE: I thought a .PHP file could take HTML.
>> JASON HIRSCHHORN: Yeah.
A .PHP file can take some HTML and be displayed.
That was my bad.
I was just trying to mimic what it was on the quiz.
>> OK, sorry to confuse you.
Yes, practice.HTML.
Now we're going to put some PHP code in.
What is the first line of PHP code I should write?
I'm going to go through this array and make it into a table.
Yeah.
>> AUDIENCE: You can either use a for H loop or a for loop.
>> JASON HIRSCHHORN: OK, what do you want to use?
>> AUDIENCE: I would use a for loop.
For, and then you do dollar sign i equals 0 semicolon dollar
sign i less than 2.
And then semicolon i dollar sign i plus plus.
>> JASON HIRSCHHORN: How do you know to use a 2?
>> AUDIENCE: Because there were two associative arrays within the bigger
associative array.
>> JASON HIRSCHHORN: So the big thing's not an associate array.
The big thing's just a normal array.
But you're right, there are two associative arrays
inside our larger array.
That's why you use two.
I feel uncomfortable assuming that they're 2, so what's a way to write
this without assuming that they're 2?
>> AUDIENCE: [INAUDIBLE]?
>> JASON HIRSCHHORN: OK, how do you write that?
>> AUDIENCE: Foreach dollar sign tfs or like dollar sign tf.
>> JASON HIRSCHHORN: OK, so for each tfs as tfs, I want to, now
again, have my table.
So who can give me the next line of code?
>> AUDIENCE: Print, and then in quotations, bracket tr end
bracket, end quote.
End parentheses, semicolon.
>> JASON HIRSCHHORN: OK, and what's that going to do?
>> AUDIENCE: It's going to say, new row.
It's going to put the tag for a new row.
>> JASON HIRSCHHORN: Right, this PHP, like we talked about earlier-- this
PHP is going to be evaluated, and then it's going to print out to this file a
table tow, and then that HTML will be evaluated.
We're just copying this HTML we had up here.
Yeah.
>> AUDIENCE: [INAUDIBLE]?
>> JASON HIRSCHHORN: Sorry?
It's right here.
Fall 2012.
Don't look at the answers, let's solve it together.
So we print table row.
So you're probably in the swing of things.
What's the next line of code we need to write?
Assam, give me the next line of code.
>> AUDIENCE: You need the tf's name.
Tf open brackets quotation mark name closed brackets.
>> JASON HIRSCHHORN: Give me their name.
>> AUDIENCE: You need to print that.
>> [INTERPOSING VOICES]
>> JASON HIRSCHHORN: OK, how do I print it?
>> [INTERPOSING VOICES]
>> JASON HIRSCHHORN: I'm missing something now.
What am I missing?
>> AUDIENCE: You need a dollar sign.
>> JASON HIRSCHHORN: What else am I missing?
All we've printed so far is the tr.
>> AUDIENCE: Close the tr after it.
>> JASON HIRSCHHORN: So we need to close the tr after.
Who sees what we're missing on line 16?
Yeah, Anna.
>> AUDIENCE: You need to open a td and curly braces.
>> JASON HIRSCHHORN: And where do we put curly braces?
>> AUDIENCE: Around the tf name.
>> JASON HIRSCHHORN: Like this?
>> AUDIENCE: Yeah.
And then close the td.
>> JASON HIRSCHHORN: Like that?
>> AUDIENCE: Do you need double quotation marks next to the curly braces?
>> JASON HIRSCHHORN: Right here?
No, you don't.
So that's exactly right.
Yeah.
>> AUDIENCE: So the difference between that and encatenating with dots is, if
you use dots, you'd have to have the double quotation marks, then a dot,
then the dot--
>> JASON HIRSCHHORN: Correct.
So you're saying there's an ultimate way of writing this like that.
What the concatenation operator in JavaScript?
>> AUDIENCE: A plus sign.
You forgot to put the curly brace back.
>> JASON HIRSCHHORN: Great.
And there's one more line of code missing.
Who can give me the last line of code we're missing?
>> AUDIENCE: Just the exact same thing, just with house instead of name.
Great
>> JASON HIRSCHHORN: Great.
And your syntax is exactly right for getting things in an associate array.
So in the actual quiz, you are actually given up until here.
So this code was given to you.
All you had to write were these four lines and remember to
close the table tag.
You guys actually did all that and more.
Yeah.
>> AUDIENCE: So it would be functionally the same if you just had that all in
one big print call, right?
And then just concatenated it on, et cetera?
>> JASON HIRSCHHORN: Like that?
>> AUDIENCE: Yeah.
It just wouldn't look good if you were looking at it when you're inspecting
the element on your website, right?
>> JASON HIRSCHHORN: I agree.
If I loaded this webpage, would I be able to see this PHP code, ever?
>> AUDIENCE: No.
>> JASON HIRSCHHORN: No.
And actually, I wouldn't.
>> AUDIENCE: This isn't HTML, right?
So you might be able to--
>> JASON HIRSCHHORN: So this PHP would be evaluated server side.
PHP is always evaluated server side, so you're never able to see PHP code.
>> AUDIENCE: But you'd be able to see the result of the prints.
>> JASON HIRSCHHORN: Right.
And it honestly might not put it all on the line.
It might format it nicely for you, or it might put it on one line.
Unclear.
But yes, good point.
>> AUDIENCE: How come there's no text highlighting for
any of the PHP commands?
Because I remember seeing that.
>> JASON HIRSCHHORN: Because it's a .HTML file up here at the top.
There you go.
>> AUDIENCE: If we did the initial method with the for loops, right, if we
wanted to access a tfs, would we do tfs bracket 0 bracket, then
[INAUDIBLE]?
>> JASON HIRSCHHORN: You would--
so you're saying for the for loop, you would do in dollar sign tfs bracket 1
or i, right.
Or dollar sign i close bracket and then square bracket
double quotes, yeah.
>> OK, excellent.
We have one more quick one.
Seven minutes, so I want to go over this one.
This is another example.
We're now a totally other language.
>> We have some HTML code.
It's kind of small on the screen, but I want you to look through it really
quickly, and can somebody tell me, if I were to load this web page,
what I would see?
Describe everything about this webpage.
Noah?
What would I see?
>> AUDIENCE: Code at the front end of Google with a feel for text and a
submit button.
>> JASON HIRSCHHORN: And what would the button say?
>> AUDIENCE: Submit.
Oh, search.
I'm sorry.
>> JASON HIRSCHHORN: It would say search.
Remember, name.
What do we use name for?
This name attribute, what's that used for?
>> [INTERPOSING VOICES]
>> AUDIENCE: That's its name for when it's clicked?
>> JASON HIRSCHHORN: That could be.
But what do we generally see-- why are we giving this name queue?
Why do we see that?
Yeah.
>> AUDIENCE: Doesn't that become index of the super global variable?
>> JASON HIRSCHHORN: Yeah, generally when this form would submit, and then where
would this submit to?
What page?
Noah, what page would this submit to?
>> AUDIENCE: I'm not sure.
>> JASON HIRSCHHORN: Where could we can find it?
Where do you find what page it submits to?
What line of code?
>> AUDIENCE: Form action.
>> JASON HIRSCHHORN: Exactly.
Action.
So it submits to the search page.
Backslash search.
So that's exactly right.
What method?
>> AUDIENCE: Get.
>> JASON HIRSCHHORN: Get.
Exactly.
So we read this.
This is going to be a form.
You're exactly right.
Two things on the form, the title of the page and the top would be Google.
>> So here are two questions you should be able to answer about this page.
If this HTML lives at this website and the user inputs bug into this text
field right here, what URL will the user find herself upon
submitting the form?
>> So we have this right here.
I'm going to go back to this page, though.
I'll write up this first part.
Can everybody see over here?
OK, Mario, you think you know?
What page?
>> AUDIENCE: Backslash search.
>> JASON HIRSCHHORN: I'm going to move down here.
OK, backslash search question mark q equals bug.
Anybody have a different suggestion?
Yeah.
>> So how do we get this?
Well, we've seen this before.
And you came up with this earlier.
You were right, Noah, that the action is telling us what
page we're going to.
>> We also know what method.
We're doing get.
And the difference between get and post is that get displays in the URL
and post doesn't.
So if I wrote post right there in the method, what would be different?
>> AUDIENCE: It would just be slash search.
>> JASON HIRSCHHORN: It would just be slash search.
Nothing over here would happen.
But because it's a get, the URL is displayed as follows.
First we see a question mark and we see the name and the value.
Say there was one other text field and I gave it a name of r and I input a
value, caterpillar.
What would this now look like?
I have one more text field, I give a name of r and a value of caterpillar.
>> AUDIENCE: After bar you'd have the ampersand caterpillar.
>> JASON HIRSCHHORN: That's not ampersand.
>> AUDIENCE: Or just whatever the and symbol.
>> JASON HIRSCHHORN: Yeah, no.
You were right, I was wrong.
That's like a g.
>> AUDIENCE: Caterpillar.
r equals caterpillar, sorry.
>> JASON HIRSCHHORN: Is there no r in there?
>> AUDIENCE: No, there is.
>> JASON HIRSCHHORN: We'll talk about that after class.
That's exactly right.
So the and is correct.
And then you could have many of these, and they would all be concatenated
together with that and.
So that's exactly right.
>> There's one more question.
Sketch this HTML's DOM, starting with document.
We could do that in two minutes.
We'll do it over here.
I'll go back to this webpage.
OK, we start with document.
>> What's next?
So when you're reading through--
>> AUDIENCE: HTML.
>> JASON HIRSCHHORN: HTML is next.
We're going to go tag by tag.
What's after HTML?
>> AUDIENCE: Head.
>> JASON HIRSCHHORN: Head.
What's after head?
>> AUDIENCE: Title.
>> JASON HIRSCHHORN: Title.
And title has a value of Google, but I'm not going to
write that in for now.
OK, where does body go?
>> AUDIENCE: Also coming off of the HTML.
>> JASON HIRSCHHORN: Exactly.
Body comes off of here.
Does everybody see why that's the case?
You should probably be able to figure this out, too, even if I didn't have
this nice indentation.
>> The indentation sort of gives it away, but you can see that the head tag has
been closed, which means we probably can't go down here.
We need to go back up to whatever was right before the head
tag, or under that.
We're even with the head tag.
>> And under body goes form.
Under form, there are two inputs.
OK.
That's all I got.
Quiz 1 is tomorrow.
I'm so excited for you guys.
It's going to be a blast.
>> If you have--
>> AUDIENCE: [APPLAUSE]
>> JASON HIRSCHHORN: Oh stop, stop.
But no, I'm kidding.
If you have any questions, right after section, I'll be outside.
If you have any questions tonight, feel free to call, email, gchat,
carrier pigeon me.
Good luck tomorrow.
Have a wonderful Thanksgiving break, if I don't see you before then.
And I will see you after Thanksgiving on Tuesday for our final
section party ever.
>> AUDIENCE: [INAUDIBLE].
>> JASON HIRSCHHORN: Great.
OK, I'll see you guys next week, or in two weeks.
And good luck tomorrow.