>> [MUSIC PLAYING]
>> SPEAKER 1: All right, everyone.
Welcome to your last section with me.
It's been quite the semester.
I can't believe this is, like, week 12 or 11, something like that.
But because it's our last section, we have lots of candy.
And I'm going to try and prep you as well as I
can for your quiz on Wednesday.
So probably not the best way to, like, end section with quiz review.
But we'll try and make it fun.
And there's always candy.
So hopefully, that'll make it better.
>> Your quiz is going to be pretty much the same thing as Quiz Zero.
It's going to be the same format, same length.
You'll be in rooms scattered across campus, because there
are close to 900 of you, and we can't all hold you in rooms like this.
So be sure to look at all of the Quiz One documentation
online at cs50.harvard.edu tonight or tomorrow night.
Make sure you know where you're going, what you need to bring.
Really, you just need to bring yourself and a pencil, and you should be fine.
The questions will be very much the same.
There will probably be a couple multiple choice, a couple short answer,
some coding, maybe some true/false, matching sorts of things.
So you shouldn't be too surprised by the format.
>> What can be surprising is the length, which, in previous years,
has been much longer.
In my year, I don't have a single friend that I remember finishing the exam.
There were like multiple pages left blank.
So the length can be kind of disorienting
just because in some years, it has been much longer than Quiz One.
I have no idea what it's going to be like this year,
but it's something to be aware of.
>> Additionally, the difficulty-- people tend
to find Quiz One much more difficult than Quiz Zero.
Again, you know, if you're kind of walking
out feeling a little uneasy because you didn't do as well as you thought
you would or you feel like you didn't do as well as you did on Quiz One,
remember that there are probably a lot of other people feeling that way.
I was definitely one of those people.
Quiz one, like, threw me for a loop.
And my friends have this great picture of them at JP Licks
kind of with these huge sundaes, being like, Quiz One,
and looking like they're in tears.
>> So it's a general feeling.
It's a tough test, it's a tough quiz.
Obviously, if you come out and you feel like you rocked it, great for you.
But know that you're probably not-- you are almost most definitely not
alone if you walk out feeling like, eh, probably could have gotten better.
It's tough.
Mm-hm.
>> AUDIENCE: How much is it worth in relation to [INAUDIBLE]?
>> SPEAKER 1: It's worth the same.
Yeah.
But again, it's also going to be affected by how the rest of the class
does, how your section does, how you've improved over time.
Grading is a little bit of a black box.
So what the actual number or percentage you get
is not necessarily like directly correlated with the grade
you're going to get.
There's a lot of factors that go into it.
>> So with that, we're going to go through some quiz review.
I'm just going to run this like last time for you guys.
I have all the answers to Quiz One of last year.
So if you guys want to pull that up on your own computers,
if you've taken this exam before and you have questions,
I was thinking we could just go through some
of the more difficult ones on that.
So we can talk about it, maybe get a little more insight
into the intuition behind some of these questions, how to approach them.
>> As well, like last time, I have a 100-slide deck
that has basically all of the slides that I
have prepared for previous sections since your last quiz-- I
have in this deck.
So we can go through pretty much anything
that we've talked about beforehand that maybe you
want a little more clarification on.
We could do that first.
>> But otherwise, I'm super happy just to kind of work
through these problems with you.
And I'm really here to focus on what you guys think
would be most important to focus on.
Like, obviously, all of this stuff is important.
Especially as we go through Quiz One, I'll definitely point out things like,
oh, this might be something you really want to know
or you want to have on your cheat sheet.
I'll be telling you things as we kind of go through.
>> So on that note, are there any things that you guys would like to go over?
Also, if I don't have it in my deck, we can pull up something on the web,
or we can try and make up an example on the fly.
But any concepts that you guys are a little fuzzy on.
[? Brian, ?] did you have--
>> AUDIENCE: Oh, is it cumulative?
Like, is the stuff on Quiz Zero going to be on here?
>> SPEAKER 1: It's cumulative, but it's much more
of an emphasis on things since your last quiz.
So obviously, you guys have learned about variables, and loops,
and conditionals.
And it's not like those just go away, because they're
obviously inherent to everything else that we've learned now.
>> There might be a question on the sorts, or there
might be a question on different searches.
Or there might be a couple questions on maybe something you
having to do with compiling or different errors.
But if you've looked at Quiz One from last year,
you'll notice that it is very much focused on things
that have happened since your last quiz.
>> Why is that door always locked?
It really bothers me.
Because I always try to go through it.
>> So that's pretty much how the quiz will be.
So are there any concepts that you guys would like to go over?
Or we can jump right into just looking at Quiz One
from last year and kind of going through practice questions there.
We can also switch back and forth.
This is not a one-time sort of thing.
Any questions?
Yes.
>> AUDIENCE: Could I ask a question about another--
>> SPEAKER 1: Another one?
>> AUDIENCE: This is from another year.
>> SPEAKER 1: Yeah.
We can also do another year.
>> AUDIENCE: OK.
So on 2011.
>> SPEAKER 1: 2011.
Ooh, that was the year before me.
Let me pull this up.
>> AUDIENCE: I think.
>> SPEAKER 1: This aspect ratio is throwing me off.
>> AUDIENCE: 11 and 12.
>> SPEAKER 1: 11 and 12.
OK.
Well, here, why don't we do this?
You guys-- everyone just take a couple of minutes to look through quizzes.
And we'll compile a list.
And then we'll go through them.
All right?
While I get a bunch of this stuff set up.
OK.
I'm just going to write things down on paper.
>> 2011, 11 and 12?
I'm just going to change this display.
OK.
That's better.
This over.
All right.
>> Anyone else have any that they'd like to start with?
Also, forgot to say, if you want more of a bunch of people talking at you
and just giving you a crack course in the last six weeks,
we are running a review session from 7:00
to 8:30 tonight in Northwest B103, which also happened
last time, where it's going to be me, Hannah, Daven, with Gabe
and Rob kind of helping from the sidelines of just kind of throwing all
the information that you might want to have on your cheat sheet,
slash, know in general there.
AUDIENCE: That's also online, right?
SPEAKER 1: It's also online.
So you can also stay out of this icky weather, go to your dorm,
and live-stream it if you'd like.
I'm sure a lot of people-- I know I would
be doing that if I were in your shoes.
OK.
So why don't we start with-- while you guys-- hopefully,
you're looking through.
If not, I might just start working through different things on Quiz One
from last year unless you have specific questions.
>> We'll start with this question here about stacks.
So does everyone remember kind of what a stack is?
How we tend to-- can anyone just give me a general description of a stack?
A type of data structure.
OK.
So it's one of the data structures that we
expect you to be familiar with-- like stacks, arrays, queues, so forth.
Yes.
>> AUDIENCE: Like First In, Last Out, something.
>> SPEAKER 1: It's First In, Last Out.
Exactly.
So a stack is exactly what we tend to think
about when we think of a stack of things.
So a stack of plates.
The first plate you put down is going to be at the bottom,
and it's going to be the last one that you remove at the end.
Because they stack up.
>> And you take the one out of the bottom, typically, things crash and break.
So stacks you can think of just like a stack of plates.
Or the example we always like to use is in the D halls, you have the trays,
they're all stacked up, and you take from the top.
So the last one in is the first one out.
OK.
>> So in the case here, we see we have-- I wonder
if I can actually zoom in a little bit.
So we have this struct here.
Right?
So you have some struct that has some int numbers of capacity.
So what do we think that represents?
This is an array with size CAPACITY.
>> So this really represents our stack in general.
Our stack is really just an array with some set number
that is its max, that is, its CAPACITY.
And then we have some int size, which will track the size of our stack
throughout the course of when we're using it.
OK?
>> In this case right here, we say that our stack size has been initialized to 0.
So we have an empty stack right now.
And then we want to complete the implementation of pop
such that it returns the int at the top.
And then if it's empty, it returns negative 1.
OK?
So I want you guys just to think about what we might do there.
What might be one of the first things we'd want to check?
There's a great thing here.
Whenever it says-- if there's ever some If statement, like "If stack is empty,"
or "If this returns null," or "If this is whatever"-- sorry.
>> AUDIENCE: Write an If statement.
>> SPEAKER 1: Right.
You could write an If statement.
And that's probably one of the first things you want to check.
OK.
Whenever they give you kind of like a corner case
like this, that's typically one of the first things
you're going to check in your code.
>> Also, something to recognize for the quiz
is if you have an inefficient way to do something, write it down.
Because we're not grading you on design, we're
grading you on correctness for quizzes.
So even if you know that it's a super bad way to do something but it works,
write it down, OK?
>> Literally, I've seen kids last year-- if you look at last year's one,
they're like, do the Mario pyramid.
And they literally just did "print, hash, print, hash, hash, print, hash,
hash, hash."
But it's correct.
It does what we told it to, so you can't take points off.
If you're down to the wire, obviously, you
want to get a more elegant solution, and the more elegant solution will probably
be less code, which means you probably have a higher chance of being right.
But if you're like, you know what, no, I don't have time, I
know this is a solution, it's not the best, write it.
And you can even write on the side, I know this is terrible,
but I know it works.
So just a heads-up.
OK.
>> So obviously, first thing is this If statement.
So what do we think this If statement is going to be?
And actually, let me open up my great Sublime editor.
I'm going to code this and then show you guys when it's done.
So int pop.
OK.
So if we have this int pop void-- so obviously,
this is some function that takes in nothing and returns an integer, right?
So it's just going to talk about this stack that we've created.
>> So just translating this last sentence, "if stack is empty,
pop should return negative 1," how might we do that?
So If what?
How do we know that the stack is empty?
It's just size equals 0.
Stack.size equals 0.
Also, I'm kind of writing blind here.
So if I make any typos-- oh, also forgot to mention this.
>> Last week, I totally figured out what our problem was with JavaScript.
Don't capitalize I and D. You should only
capitalize I and get element by Id.
And that was the entire error.
So if you guys go back and actually look through my code,
if you just make everything a lowercase d, "forget element by Id,"
it will work.
So as I promised, I was very close.
I just capitalized something I wasn't supposed to, which
I'm sure you guys had in your last PSET.
>> So if our size equals 0, what are we supposed to do?
>> AUDIENCE: Return negative 1.
>> SPEAKER 1: Return negative 1.
Cool.
So now what do we do?
We want to pop something off.
Now this is the case where we have something.
Our size is greater than 1 or greater than 0, right?
We actually have something there.
So what we want to do is we want to return right here.
We're going to say we want to return top of stack.
OK?
>> So how might we do that?
How do we return the top of the stack?
Remember, our stack is just an array, right?
It has some capacity that we've given it.
As we've put things on-- or actually, we're going to write "push" after this.
If things are in there-- maybe a picture will help.
Hm, I like big chalk better.
>> So if-- and you can just think of this as our stack.
So this is 0, 1, 2.
I don't know why my boxes are getting smaller.
But there.
OK.
>> So this is some stack with a capacity of 5.
And let's say we have something here and we have something here.
So at this point, our size is equal to what?
2.
And if we want to pop something off of it,
that means we want to get rid of this right here.
OK?
So how would we return this value?
>> AUDIENCE: Size minus 1.
>> SPEAKER 1: Right.
So size minus 1, or you could do size minus minus.
But we can't just do size.
It's inside a struct, right?
So stack.struct.
or stack.size.
That's our index right there.
OK?
>> And then if we look back at our struct here,
we notice that to actually access the array,
we need to do stack.numbers to actually access that array.
So that returns the top of the stack.
>> But something that-- if you guys look at the answer key, this is all they
give you.
So this is it.
But I might argue that they're miss-- ooh, not what I wanted.
I might argue that they're missing something, because-- yes.
AUDIENCE: Decrease the size.
SPEAKER 1: Right.
We need to decrease our size now.
So what's tricky about this is once you return
something, your function's going exit, right?
So what we might do is actually decrease our size first.
And then we can just do stack.size.
>> We can just use stack.size as our index, couldn't we?
Because if stack.size is 2, we decrement it.
And so it's 1, which is our actual indice.
Once we get rid of this, we actually only have one thing in our array.
So it does both.
AUDIENCE: [INAUDIBLE]?
>> SPEAKER 1: Well, in this case, we just returned the element
at the top that is at our size that's at the top.
But we haven't done anything to the size after we removed that element.
This hasn't changed our size yet.
This does actually inherently change our size.
>> But to make it a little clearer, you could do stack.size minus minus.
For me, it makes it, I don't know, a little more clear that-- ah,
that you're actually changing the size and returning it.
The other way was fine, because you were changing and returning
at the same time.
But this is just another way to write it that I wanted to show you guys.
Does that make sense?
Stacks, I think, are much easier than queues.
[LAUGHS]
OK.
Did you have any specific questions about 11 and 12, or just--
>> AUDIENCE: I think it was the stack.
>> SPEAKER 1: The stack size?
>> AUDIENCE: Yeah.
>> SPEAKER 1: Gotcha.
OK.
Yeah, you could do it in one of these two ways.
OK.
>> So now we have the other one.
This is really weird, like not having this on my screen.
So if we look here, we now want to complete the implementation of push,
which actually puts something, goes and inserts something into our queue,
or into our stack.
OK?
>> So if we notice, we have a couple of things.
We have our great-- if all else, whenever we have one of these,
you guys should at least get half a point, because all you have to do
is convert this into C. And they give you half of it.
So "if a stack is full or it is negative,
then push should return false."
OK?
>> So we only want positive integers to be on our stack.
All right?
And this is going to either return true or false.
So we should [INAUDIBLE] bool.
OK.
So translating.
>> AUDIENCE: [INAUDIBLE].
>> SPEAKER 1: Oh, thanks.
Yeah.
This is why I have you guys.
Int n.
Perfect.
Because we're putting something on to our stack.
We actually need some number.
OK.
>> So just taking that last line that they gave us, our kind of corner cases,
what do you think we have here?
Obviously, we're going to have some If.
OK.
So we said, If our stack is full or if n is negative.
So probably easiest to start with, so if n is less than 0
or-- remember your nice AND and OR operators there.
>> How would we check to see if our stack is full?
What happens?
>> AUDIENCE: Size equal CAPACITY.
>> SPEAKER 1: Exactly.
Perfect.
OK.
And what do we want to do there?
>> AUDIENCE: Return false.
>> SPEAKER 1: Return false.
Perfect.
So halfway there, right?
At the very least, you guys will have half of this.
So let's think about this.
>> So this is the stack we start with.
We're trying to put some element on here.
>> We have a size that's equal to 2 right now.
We have a capacity that equals to 5.
And let's say we have some n that's equal to 3.
So we need to input 3 into this space.
And we need to input it into index 2.
Right?
>> So how might we do this?
Trying to assign-- we want to access our array.
So stack.numbers.
But at what indice would we want this to be?
>> AUDIENCE: [INAUDIBLE].
>> SPEAKER 1: Yeah.
Stack.size.
And we want that to equal n, right?
>> AUDIENCE: [INAUDIBLE].
SPEAKER 1: I was actually just looking at that.
I think that is wrong.
>> AUDIENCE: Don't you want the space past the current size?
>> SPEAKER 1: Well, if we look here, our size at this point is 2.
We want it to go into index 2, because this is the top of our stack.
So I would say that it should be stack.size,
and then you would increase stack.size.
Does everyone agree?
I think I agree with that.
You guys can argue with me if you'd like.
Or not argue, but we can discuss this.
>> AUDIENCE: [INAUDIBLE].
>> SPEAKER 1: Mm-hm, is where it's open because of zero indexing.
So whereas in the first part, I thought they were wrong,
and they were actually right, this part, I actually think they were wrong.
I would say you should definitely input it here.
I think we all agree we have a size of 2.
That's exactly where we want our new number to go.
So stack.numbers at stack.size should equal n.
And then we would increment the stack.size.
++.
And then what do we want to do?
There's one last thing we have to do if we successfully inserted this?
Return true.
And now you're done.
So I feel like it was the whole minus minus stack.size and stack.size ++ that
messed things up.
Ugh.
I keep-- I have this knee-jerk tendency to always hit
Control, S, because I never want to lose any of my work.
But I don't need to do that now.
OK.
So that was stack.
Cool.
>> Is there anything?
Did you guys find any other questions that you'd
like to go over from previous quizzes?
If not, we can kind of start talking through Quiz One from last year.
Yes.
>> AUDIENCE: For the first part, I didn't really
understand how you deleted the number.
Isn't it still there?
>> SPEAKER 1: The number's still there.
But what happens is that because you've told it that the top of your stack
is here, when you go to add something onto the stack, it'll just replace it.
>> AUDIENCE: Oh, OK.
SPEAKER 1: Yeah.
So it's like he forgot and it's there type of thing even though it's there.
AUDIENCE: [INAUDIBLE] or anything?
SPEAKER 1: No.
Because we're in an array, you don't have
to worry about-- you'll just override it when you need it.
All right.
Any other questions?
If not, we're just going to start working through.
Yeah.
>> AUDIENCE: Well, this one is on the 2013, but just going through the SQL stuff.
SPEAKER 1: SQL?
OK.
So this is 26 through 29.
AUDIENCE: Yeah.
SPEAKER 1: OK.
Lovely.
Let's pull those up.
Oh, look.
Did you guys enjoy the Steve Ballmer talk, by the way?
It was pretty hilarious, in my opinion.
I love that every time I bring up CS50's website during section, it's like, oh,
watch section.
And I'm like, mm.
>> AUDIENCE: Can we do it?
>> SPEAKER 1: We'll do it at the end.
How's that?
Because I know you guys have always wanted to.
So we'll do it at the end.
One questions.
>> AUDIENCE: [INAUDIBLE].
SPEAKER 1: It'll be a meta section.
AUDIENCE: It's like 5 seconds.
AUDIENCE: Really?
AUDIENCE: It's like 20 seconds.
[INTERPOSING VOICES]
[LAUGHTER]
SPEAKER 1: I like that you've already done
it, which is what makes me happier.
OK.
26.
OK.
Actually, we're just going to mirror this now, because I can't.
This is annoying.
OK.
Now I can see everything.
Lovely.
OK.
>> So obviously, this should bring back great memories from [? CSG ?] Finance.
Half of you about have yours graded now.
The other half I will get to very, very soon, I promise.
>> So we have some SQL table that's Accounts here.
Probably similar to your guys' user tables.
And we have some number that was a PRIMARY key
and represents a 12-digit account number.
And balance is how much money they have.
And the default value is 100.
And they give them $100 any time they open an account.
I wish my bank did that.
OK.
>> So we want to complete the schema by specifying next to number in balance
the appropriate SQL type.
So what do you guys think would be kind of like your knee-jerk reaction
for types for these two?
>> AUDIENCE: Int.
>> SPEAKER 1: An int.
OK.
And then for a balance?
Decimal.
OK.
So decimal's right.
Int is close.
Kind of the big thing is this underlined 12-digit account number.
Whenever we have something that's larger than eight digits,
they want you to use big int, which I think is--
>> AUDIENCE: Is that just SQL?
>> SPEAKER 1: It's the only time I've heard of it is SQL-- like using a big int.
It's just to give you a little more precision,
making sure you're not overflowing type thing.
In all honesty, I think this is definitely one of the ones
where it's like, oh, it's meant for people
who have a little more knowledge of SQL.
We never talked about big ints in your PSET.
So it's kind of like I'm pretty sure if you put int, it was half credit.
>> And as I said before, there are going to be some questions that are just
meant to trip you up, so that not everyone gets 100.
Because of course, there are some people in CS50
who have been doing this for like eight years, and you're like,
what are you doing?
But yeah.
>> Decimal for balance was the obvious one.
And then big int for number just because of that, like, underlined 12-digit.
Whenever anything is in bold or it's underlined, like, pay attention to it.
We're not doing that just because.
OK.
>> So "suppose that the bank imposes a $20 monthly fee on all accounts.
With what query could the bank deduct $20 from every account
even if it results from some negative balances?"
So let's start simple.
We have four main commands for SQL, which are?
Do you guys remember the four big ones that I told you?
>> UPDATE, DELETE, SELECT, and INSERT.
Perfect.
Got it.
So what do we think might be most useful for this one?
We are-- UPDATE.
Exactly.
So UPDATE, because we're looking at accounts that already exist.
>> So remember our general sort of thing is update.
And then what comes after UPDATE?
We have some table that we're referencing.
So if I pull up Sublime again-- UPDATE.
So this is a general format.
So we have UPDATE table.
And then what's the next thing we have?
>> You can do WHERE.
And then we have some qualifier here.
And then what do we have next?
We have some SET-- something equal to something.
Blah equals blah.
Updated blah.
Right?
So that's like the general idea for some update.
OK?
>> So let's start filling this in with what it should be.
So what table are we talking about?
Accounts.
And then in this case, what's really cool
is are we talking about specific users within our account,
or are we talking about all users?
We're talking about all users.
So in that case, we can just delete this WHERE qualifier.
The WHERE is only when you want to limit what you're changing.
If you want to change the entire table, you can just drop that.
OK.
>> So now we're at our SET part.
What do we want to change?
>> AUDIENCE: Balance.
>> SPEAKER 1: Balance.
And we're going to-- how are we going to change balance?
We have a $20 fee, right?
Minus 20.
And they said it's OK if we have negative balances.
So in this case, you don't need to do any further error checking.
OK?
That is literally all you have to do.
Cool?
OK.
>> So let's go through the next one.
"With what SQL query could the bank retrieve the account numbers
of its richest customers with balances greater than $1,000?"
If your bank and your richest customers are just the ones with over $1,000,
I feel like you're doing something wrong.
Like, how does a bank survive on that?
Like, that interest, not quite enough.
OK.
With this sort of thing, what do you think, of our four functions,
do you think we're going to use?
SELECT.
Perfect.
SELECT.
OK.
So we're selecting some identifier FROM table.
And then WHERE condition.
So as we go through these, I'm just going
to give you guys a general refresher on the general format of all of these.
>> So we're selecting some sort of [? thing. ?] In this case,
this is going to be typically some column.
So in our case, we have number, balance.
In your guys' case, maybe it was ID, name, password.
Any of those columns, that's typically what we're selecting.
>> So in this case here, which kind of column, what identifier
are we pulling from our table?
What does it ask us for?
It asks us for our numbers, right?
The account numbers.
So remember, just number in this case.
If you guys ever had the error, that bright orange box would come up.
And it was like, unexpected row in, like, whatever.
That's because you called your table wrong, right?
So be sure that you are calling the column correctly.
>> So from table, our table is called accounts.
Again, make sure you're referencing your table correctly.
And then what's our condition here?
What are we looking for?
We want our rich people.
Yes.
So balance greater than 1,000.
There you go.
That's your query.
Not too bad, right?
OK.
>> So now for our last one.
With that, we're breezing through.
OK.
So now "with what query could the bank close, i.e., delete"--
don't you love how they just gave you DELETE--
"every account that has a balance of 0?"
I think we can all agree we're probably going to be using DELETE.
I'm welcome to take any discussion around that.
But I think it's pretty safe to say that we could use DELETE.
>> So we're going to DELETE some users from table, WHERE condition.
So same sort of thing as SELECT.
So in this case-- oh, sorry.
I should DELETE FROM.
Because DELETE will delete the entire row.
So we don't need to talk about which specific things about a user we're
deleting.
If we delete a user, we're deleting everything about them.
>> So in this case, we just need to fill in our WHERE and our condition.
So our table is just our accounts table, as we've been doing.
And then what is our condition here?
>> AUDIENCE: Balance.
>> SPEAKER 1: Balance equals 0.
Correct.
All good.
Yes.
>> AUDIENCE: [INAUDIBLE].
>> SPEAKER 1: So DELETE inherently deletes everything.
So whereas with SELECT, SELECT takes in certain columns that you want returned.
If you wanted everything about a user returned, you use star.
Star says, return to me everything from this user.
Or if you put WHERE star, that means just give me everything.
>> But DELETE inherently has that.
So if you say, DELETE from accounts where balance equals 0,
it's going to go through.
And everywhere that balance is equal to 0, it inherently does that.
It'll delete everything.
The star is more for-- with SELECT or UPDATE,
it's talking more about the individual fields corresponding to a user.
>> So when you do SELECT star from table WHERE ID
equals 1, that returns to you everything about the user with ID 1.
If you were to do SELECT number or SELECT ID comma name from users
WHERE ID equals 1, that just returns their number
or their ID and their name.
OK?
>> So we use star in that case to give us everything about a user.
And DELETE inherently does that.
It doesn't just delete the ID, or just the name, or whatever.
Yeah, no.
It just deletes the entire user.
So we don't have to worry about the star there.
>> If you wanted to delete everything, you could do that,
and this'll just drop everything.
But typically, you don't want to do that.
But if you ever want to delete everything, you could do that.
OK.
>> Have you guys found any other questions?
Yes.
>> AUDIENCE: Could you do 26?
>> SPEAKER 1: 26 we just did.
AUDIENCE: Oh, 25, sorry.
SPEAKER 1: 25.
OK.
25.
Oh.
They're doing JavaScript.
Oh, I can't believe it.
I'm going to mess us up again, guys.
OK.
We got this.
We're going to make this work.
Ah, jQuery.
Fun.
OK.
>> So we are going to complete the implementation of the web page
in such a way that if they visit, input their name, and submit the form,
they have this great alert window that is going to appear.
So anything with alerts, we know that we're going to have to use JavaScript.
Yay, JavaScript.
And if they fail to input a name before submitting the form,
no alert should appear.
So you can use jQuery, but you don't have to.
>> So I'm going to let you guys work on this just for a couple minutes.
Think about it.
And then we will code it.
Slash I am going to try and think of the best way to explain this answer to you.
All right.
We'll get it set up.
OK.
>> So we're just going to walk through this,
because I know jQuery is a little confusing.
JavaScript.
It's a little out there.
So what we're going to do is [INAUDIBLE] actually solved
this problem with jQuery.
So if you remember, jQuery is just a library
that's just built on top of JavaScript.
It's meant to make your life a little bit easier.
>> I would definitely, if you have time, look over
a little bit of the documentation for jQuery.
But it's very similar to JavaScript.
It's got similar paradigms, where you use this dot operator to call functions
on objects that you have.
>> So what we have here is for jQuery, you should always have this sort
of wrapper, which is the $(document).ready(function) function
in parentheses here.
OK.
So this might be something you want on your cheat sheet.
Because at the very least, you can have the wrapper for your jQuery.
And it'll at least get you part ways there.
>> So in the same way that we talked a lot about JavaScript,
and we would start by looking at what we're trying to edit
or what we're trying to change.
And that would typically be the first thing that we'd put in.
So in this case, if we go back to this here and we look at our form here,
we have this inputs, right, this id of inputs.
And we know that based on our question, we
are either going to throw an error if this is empty,
or we're going to put this into an alert, right?
So probably safe to say that we're going to be dealing with inputs here.
>> jQuery is very similar in that if we think back to CSS, anything with an ID
we look at with a hash.
Anything with class we looked at with a dot, right?
So in the same way here, what we're talking about is inputs.
We saw that inputs is an ID within our form.
So we're going to refer to it as such.
Inputs.
OK?
>> So when in doubt, even if you have nowhere,
if you're really unsure about how to approach this, A, have this wrapper.
So start there with the wrapper for jQuery.
B, make sure that you know what you are changing.
And when in doubt, put that in something,
and do dot, whatever you think you should be doing with it.
>> AUDIENCE: What is the wrapper?
>> SPEAKER 1: The wrapper is this first line.
So this says, wait until my document is ready.
Then start messing with things.
OK?
So we know we're messing with inputs.
So we're like, OK, inputs is our form.
That's our ID.
So that's what we're going to be looking for.
And we want to see what happens when this form is submitted, right?
>> So as we might think, we have some .submit.
So .submit just says, OK, this form that we've referenced with hash inputs,
when it's submitted, execute something else.
So we're going to have some function.
Notice we have anonymous functions here.
We have an anonymous function here.
Yes.
>> AUDIENCE: Will it always be .submit, or is it just because in the HTML,
we made the button type Submit?
>> SPEAKER 1: It should be .submit, because it's some form that we are submitting.
Because this .submit doesn't necessarily correspond to what the button is like
to call.
But the fact that it's a form that we're submitting.
OK.
>> So notice anonymous function here that says--
AUDIENCE: I don't really understand anonymous functions.
SPEAKER 1: So anonymous functions, they're
just functions that don't have a name.
So instead of having some main function that calls-- we could say, If document
ready, then we would call inputs.
And then, When submitted, call-- like, If so-and-so submitted,
we'd call some other function.
An anonymous function just doesn't have a name,
and it will just execute within these sorts of things.
>> So in this case, what this says is, When our document is ready,
execute this function.
This function is composed of everything within here.
And then the next layer in is, OK, when inputs is submitted, execute this.
It's just a way of denoting what should be executed when.
It's literally just a function that doesn't
have a name, so they tend to be nested into each other,
because you can't call them by name.
OK?
Literally, an anonymous function is just a function without a name.
That's it.
Just a way to encapsulate different things
that we want executed at specific times.
>> AUDIENCE: [INAUDIBLE].
>> SPEAKER 1: The vent?
Where?
>> AUDIENCE: In the parentheses after function?
>> SPEAKER 1: After functions.
Which one?
>> AUDIENCE: Both.
If you put, like, event, or if you put an argument in there,
would it be wrong?
>> SPEAKER 1: In this case, I suppose you could put an argument in there.
But because we don't need an argument, there shouldn't be.
Like, it's the whole, like, you should only
have things that are necessary sort of thing.
In the same way that if we had any function that has int main void-- like,
with int main void, you could do int arg v, whatever.
But if you don't need those, you shouldn't have them in there.
Same thing.
Emma, did you have a question?
OK.
Cool.
OK.
So what we have so far is when our document's ready, execute this.
Now we're looking at when it's submitted.
So now we actually have sort of the meat of our thing.
So we need to get the value that the user submitted, whether that be a name
or empty.
And then we need to either return this alert or throw an error.
Either way.
>> So how do we declare a variable in JavaScript?
Var.
So let's say, var name equals-- or actually, we'll
do value since I think it's name.
OK.
So we have some value here that we want to pull from our inputs form.
So in the same way that we kind of did inputs,
can anyone tell me what we might be calling within here
if we wanted to get the name from the form?
And if we look back at our form here, we notice that we have an ID of name.
AUDIENCE: [INAUDIBLE].
>> SPEAKER 1: You don't have to think of it as an array.
You don't need to worry about that.
So we just have some name.
And then because JavaScript and things are weird, we can't just do "name."
We actually have to call some function that gives us,
like, the value of that identifier.
OK?
So that is just .val.
>> AUDIENCE: [INAUDIBLE].
>> SPEAKER 1: OK.
So with JavaScript, this sort of thing right here just goes through.
And you could think of this as-- it's like almost a getElementById, where
getElementById would actually return the full thing to you.
The $("#name") is just like, OK, I have it, I can access it,
but if you actually want it to return the value to you--
>> AUDIENCE: Is it like a pointer?
>> SPEAKER 1: It's kind of like a pointer.
You could think of it as kind of like a pointer.
Like, it says, OK, I know how to get there,
but to actually get the value out of it, you have to explicitly ask for it.
And unfortunately, obviously, we don't do too much with JavaScript and jQuery.
>> So it's going to come down to how much you guys-- what you happen to know,
what you happen to have seen, and what you can kind of logically guess at.
Because some of these things, you could probably get halfway there.
But to get it completely right, I think this problem probably
had one of the lowest scores.
AUDIENCE: Like, for example, for [INAUDIBLE] inputs,
why don't you have to put val there?
SPEAKER 1: For this one?
AUDIENCE: Yeah.
SPEAKER 1: Yeah.
Because this is kind of like, as we said,
some pointer, and this is me referencing it and actually getting us the value.
>> AUDIENCE: Whereas [INAUDIBLE]?
>> SPEAKER 1: For inputs, inputs is just some--
it's like we're just looking at it as a whole,
and this .submit tells us what we need to know.
jQuery and JavaScript is weird.
I know.
I know, guys.
I know.
There's a reason I don't do web programming.
Just kidding.
I haven't had enough exposure to it.
>> AUDIENCE: [INAUDIBLE] CSS.
>> [LAUGHTER]
>> SPEAKER 1: OK, that's CSS.
CSS is just, like, make things pretty, it's not like let's deal with data.
There's a difference there.
OK.
So now hopefully, this part-- also, for a problem like this, where you may not
know the syntax, you could be like, OK, you could have some var value
and be like, assume I got the value correctly.
And then you could probably write this next part.
This next part will probably seem much more easy,
or it would make logical sense to you guys.
>> Whereas what we've written so far, I know I would be like, umm, yeah,
I don't know that on the quiz.
You can totally write psuedocode and then break into real code
when you-- it's kind of like math.
If you've ever had some multi-part problem where
you don't know how to get past the first step,
but everything else relies on that first step,
you just say, like, assume x equals 4.
And then you run with it, right?
>> You can do the same thing with code.
So you could say, assume I got the value right.
Then do this next part here.
Because this part actually should be pretty logical.
>> So we need to check if our value is empty.
Or if it's some name, actually give an alert.
So what might we want to check?
We want to have some If.
What do you think our If is going to be?
We need to check to see if value is-- if it's not an empty string.
>> Perfect.
Exactly.
OK.
So if that's the case, what do we want to do?
We want to throw some alert, right?
So it's just alert.
And then whatever we want inside.
So what are we supposed to have inside our alert?
>> AUDIENCE: "Hello."
>> SPEAKER 1: Comma.
And then do you guys remember how to concatenate?
>> AUDIENCE: Plus.
>> SPEAKER 1: Plus.
So we want to have plus.
And then we need another plus for our exclamation point.
Cool.
OK.
Otherwise, what might we want to do?
We don't want to do anything, right?
So we just return false.
Not what I want to do.
OK.
>> And then these, of course-- what's important
is to remember to close your anonymous functions.
So if you notice, we have some function here that ends here.
So we need to close this first one and add a semicolon.
And then this one here has to do with this anonymous function,
so we close it there.
That knee-jerk reaction of saving.
Yes.
AUDIENCE: Is there a reason that-- just in all the examples in JavaScript
that I've seen, we have the first curly braces
on the same line as the function?
>> SPEAKER 1: That's stylistic.
Yeah.
And actually, if you take 61, we do all our curly braces that way.
Huh?
>> AUDIENCE: If we did do that on the PSET, is that bad for style?
>> SPEAKER 1: No.
We have explicitly told you guys to do this.
But actually, this is kind of the dominating convention
in a lot of C classes and JavaScript and jQuery.
So obviously, I'm sure-- and actually, if I
were to do this problem completely blind without having looked at it,
there is probably very few ways I would have gotten this.
>> I might have been like, OK, maybe I need to grab something that's an input.
And I think having the knowledge that, like,
OK, if I want to get something from a form that has an ID,
I refer to it in this way, I'd probably get that.
I might get this.
But really, the only thing that I think I would really get is this right here.
>> So it's kind of important to know, as with any difficult test,
you kind of choose your battles, right?
If you know that you're not going to get that first part for jQuery, as I said,
assume that you have this value and do what you can with it.
And if you have time, go back and try and fill in the pieces.
But don't let a question like this really bog you down.
Because what?
This was one question on jQuery out of the entire exam.
So yes, it'd be great if you got it.
>> AUDIENCE: [INAUDIBLE] you are welcome to use jQuery.
SPEAKER 1: You are welcome to use jQuery.
AUDIENCE: OK. [INAUDIBLE].
SPEAKER 1: How would you not use it?
I would have to look up all my JavaScript.
It's actually much easier, I think, to use jQuery,
because jQuery actually reduces the amount of JavaScript you write probably
by, like, half.
So our code would probably be twice as long without that.
So if you recognize-- the biggest thing to take away from this problem
are the patterns.
If you're accessing something from a form,
you're going to use quotes, hash, whatever you're trying to access.
If it's being submitted, you want to use something like a .submit.
You're probably going to use an anonymous function in there.
If you actually need the value of something, you're going to do quotes,
hash, whatever that field is, .val.
And recognizing patterns like that are going
to be far more useful than really knowing the nitty gritty.
Yes.
>> AUDIENCE: So if the user submits their name
and it runs through that statement, will it go down and return false after this?
>> SPEAKER 1: No, because the alert, you can think of it like a return.
Yeah.
So it'll exit.
Yeah.
>> AUDIENCE: Could you [? place ?] the parentheses
of submit, parentheses, something?
>> SPEAKER 1: I did, I believe.
This one's closed right here.
And then this one gets closed down here.
>> AUDIENCE: Oh, there.
All right.
>> SPEAKER 1: Obviously, little, little syntactic things
like that, we'll probably just circle it and be like,
don't forget your parentheses.
But yeah.
OK.
Do we have another one that we would like to do?
Did you guys get the binary tree one?
Do we want to go over that one?
I feel like binary trees and DOMs should be points
that you guys get pretty easily.
I would not want you to lose points on that.
OK.
>> Let's do this DOM here.
I wish I had my Surface so I could just draw on the screen.
That's what I used to do last year.
OK.
So as I mentioned, we talked about DOM, Document Object Model.
They're probably going to give you some little bit of snippet like this
and ask you to create a tree for it.
And this just all has to do with running through the tags.
So let's try and do this.
>> Also, as per usual, if you guys do these quizzes, as I highly
recommend that you do as practice, any of them that you're like,
I really don't get what's going on here, just, of course,
send me an email with a question, and I will explain as best I can.
OK.
>> We have some document, and we have HTML.
OK.
So then we're just analysing the tags here, right?
So what do we see comes-- what are the two subheadings under HTML?
Especially because they're indented properly?
Head and body.
Ah.
Head and body.
Lovely.
So then let's start here with head.
What's underneath head?
What's our next tag?
Title.
And then within title, quiz.
OK.
>> So literally, it's just walking through the tags, OK?
So then if we have body, as we go through,
body has three things within it, right?
It's got three divs.
Every div gets its own little box.
And what's in the first div?
[INAUDIBLE]
And then the next one is middle, which I'm just going to abbreviate.
And then the last one is bottom.
>> So really, it's just walking through.
And because we're going to give you HTML that is properly indented,
you can literally just run through and be like, OK, here is the HTML.
So this is the outermost corner, or furthest left,
so that has to be its own thing.
These are on the same indention.
>> So we know that head needs to be at the same level as body,
but underneath HTML.
It's what we have here.
Head and body are siblings, but they're under HTML.
And then we just go into each of these.
So head has title, which has quiz, as we see here.
And then in this case, we have body, which has these three lines.
So these are all siblings all under body.
OK?
So hopefully when you see something like this, you're like,
yes, I just get to draw a tree.
It's gonna be great.
OK.
So wanted to make sure you guys knew that.
>> So why don't we go to 32 with our binary tree?
Because once you understand a binary search tree, it's really not that bad.
So Everett, can I erase-- I mean, these are all online, too.
So if you have any questions.
>> Lost a little space there, but it's OK.
So binary search tree is just a way to organize data
not in an array, where the root is always greater
than the left child and the root is always less than the right child.
OK.
>> So we have this great search tree here.
We have these numbers, 34, 59, 20, 106, 36, and 52.
And we need to organize them in such a way
such that the root is greater than everything on the left side
and it is less than everything on the right side.
And typically, what you want to do is try and find
something about in the middle.
With binary search trees, you might have to play around a little bit with it.
>> But in this case, let's just assume that we know this first one.
So 36 is our first one here.
Typically, I would try and choose something
about in the middle that'll probably yield the best results.
So now we know that everything on this side needs to be less than 36.
But also, what you could see is that we have two spots over here.
So if we know that we need two numbers that are less than the root,
then you could just order these and choose the third number.
OK.
>> So why don't we start with this side?
So if we know that everything on this side needs to be less than 36--
but if we look at this one, we know that this number
has to be less than this number, right?
Because this number here is on the right side.
And remember, just as in our larger tree, everything on the right
needs to be larger than the root.
In this way, we know that whatever is in this needs
to be larger than whatever's here.
OK?
>> So we have two choices for these two bubbles.
We have 32 and 34-- or sorry.
20 and 34.
So how do you think we might put these in?
If this one has to be bigger than this one,
that means we want to have 20 here and 34 here.
OK.
>> So in the same way, we look at this kind of sub tree.
And we say, OK, we have not 36.
We have 106, 52, and 59.
Right?
In this case here, we know that this one needs
to have one thing that's greater than it and one thing that is less than it.
Right?
So if we put these in order, it's just about finding that middle value again.
So our middle value is 59.
So then we say, OK, what's less than 59?
Well, that's 52.
And what's greater than 59?
Well, that's 106.
OK?
So it's just a bit like a puzzle.
It typically helps, especially in small trees like this,
if you just order it, if you know how many are on the left
and how many are on the right, that can just
allow you to choose what should be at your root.
And then you can kind of work from there.
Mm-hm.
33?
Sure.
OK.
So we want to create a node or a binary search tree.
And let's look at what might be in it.
And I think this will actually be our last problem.
Ah.
OK.
>> This is like what we can think of as a node, right?
We have some value, and we know that it will either
have left and right children.
Binary search tree-- that means that it has, at most, two children.
OK?
Let's think about the way we defined a linked list, right?
>> We had some int that represented the value.
We had some pointer that represented what it was going to next.
Binary search tree is very similar.
We still have some value, n, that we give it, right?
And then I drew these very explicitly with arrows,
because they are effectively pointers.
OK?
>> So n is typically what?
It's some value.
What do we typically designate it as?
An int.
So we have some int n, or int value, or whatever you'd like to call it.
And then we have the left child and the right child.
Right?
And we know that what they're point-- what are they pointing to?
They're pointing to other nodes, right?
So how would we declare a node pointer?
>> AUDIENCE: [INAUDIBLE].
>> SPEAKER 1: Mm-hm.
And we're going to have two of those, right?
And then we can literally do left for the left child
and right for the right child.
Actually-- sorry.
Because we need struct.
>> So struct is because we haven't finished declaring a node yet.
So node is within here.
It's kind of like a recursive definition, right?
So when we are within this definition, we
haven't finished declaring node as the structure,
so we have to do struct node just to say, yes,
we are in fact referring back to ourself type thing.
That like once it's created, it'll be fine.
>> So how big do you guys think this is?
What's the size of this structure?
12.
Why?
Precisely.
And in fact, one of the first questions one Quiz One
is about sizes, which is why I asked.
All right.
>> We are going to end, because the DCE will yell at me if we don't.
But if you guys have any questions, of course, email me, let me know.
You guys are going to rock it.
I'm super excited.
You guys will be done as of Wednesday, and then
you'll get to work on your final projects, and it's going to be awesome.
>> I will be here next week from 4:00 to 4:30
if you guys want to come pick up your quizzes.
If you want to find me some other time or just coordinate a different time,
feel free to let me know.
Otherwise, this is our last section.
So it was great to see you guys.
Please take more candy.
And good luck on your quiz.