[00:00:02] [MUSIC PLAYING] HANNAH: Hi, everyone. Thank you guys so much for coming out in the disgusting weather for quiz one review session. As you guys know, quiz one is this Wednesday. So we're going to go through a bunch of topics. DAVIN: Hey, can I say something real quick? HANNAH: Yeah, Davin's going to say something real quick. DAVIN: Sorry. Just real quick, if you have questions about the quiz, you can go online. Go to 2014 quiz one, about the quiz. It's got logistics about where to go, when to go. If you're simultaneously enrolled, we're going to have a makeup quiz at 5:30. Or if you sent me an issue, you have some other issue. But 5:30 is the make-up time on Wednesday. But if you have questions, general questions, online has all the logistics. So check there first. 

[00:00:47] HANNAH: Awesome. So here's the big list of topics that we're going to go through today. I'm going to cover all of the C stuff, which is that first column. So the C stuff that we covered after quiz zero. Starting with a linked list, which includes pointers. 

[00:01:05] All right, so we saw this in the last review session, so I'm going to go through this is a little bit quicker. Just raise your hand if you want me to slow down or address something further. But we use linked lists because we started in C with arrays. And arrays are great, but the problem is they have a fixed size. Linked lists allow us to create dynamically sized data structures. 

[00:01:28] And we have our basic operations, insert, delete, and search. And we can do insert in worst case constant time if we just put it at the very beginning. Delete and search, worst case big oh of n time. So again, just to flip through these pictures, I know we saw these last time, but we want to keep track of our linked list by keeping track of the head of our linked list. Because we know that each one of our nodes is just going to point to the next node in our linked list. 

[00:01:58] So that's how we keep track. Even though these aren't continuous pieces of memory, we can find them by just following the different arrows. Here is our structure for a linked list node. We saw this last time. We have our struct node. And it has two properties. Number one, the actual value we want to store. In this case, it's an integer. It could be a string, it could be a char, whatever you want. And then, we have to keep track of the next node in our linked list. So that's going to be a pointer to the next node. If you were just doing search, like I said before, you'd have to follow your arrows down. Insertion, you would keep track of where the rest of your list is. And you want to redirect the head to point to our new element, which in this case is one, and then one will point to the remainder of the linked list. So again, I know this is a little bit of a repeat from quiz zero. So we have to be very careful about the order in which we do these pointings so we don't lose track of the back of the list. OK, any questions with just singly linked lists? Awesome, OK, cool. 

[00:03:06] So now, we're going to go onto something just slightly more complicated, doubly linked lists. So in addition to keeping track of the next node, we also want to keep track of the previous node. And this allows us to, if we're at some point in our linked list, not only go forwards, but also iterate backwards. Because as we saw in a singly linked list, if we were at some node, and all of a sudden, we decided, actually, I want to go to the node right before me, you'd have to go all the way back to the head and iterate through until you found the node you were looking for. 

[00:03:35] So this makes things slightly easier as we're trying to iterate through our linked list. But it requires us to keep track of one more pointer, so one more node star. All right, so here comes the fun part. We're going to practice implementing remove for doubly linked lists. So this is something that's totally fair game for the quiz. It showed up on past quizzes. So definitely be prepared to code a little bit in C. Don't forget that with all this fun PHP and JavaScript, we still have to remember to do C. So brush up on that if you're feeling rusty. 

[00:04:12] All right, let's see if we can do this. OK, cool. So we're going to try to edit right in here, and hopefully this goes as planned. All right, does anyone want to give me a suggestion as to how I should start? The only assumption I'm making is that I already have a structure defined, the one I showed on the last page, on the last slide. And I'm storing the head of my linked list in some pointer called list. Does anyone want to get me started? 

[00:04:42] AUDIENCE: Can you create a new node to call through the list? 

[00:04:45] HANNAH: Awesome, so we're going to create a new node to crawl through the list. I like that. I'll just call it pointer if that's OK. And where should it originally start? 

[00:04:57] AUDIENCE: Probably at the head of the list. HANNAH: Beautiful. We want to start at the head, which I said is going to be stored in list. Awesome. So far, so good. And now, our goal is to iterate through the list until we find the node with value n that we want to delete. OK? 

[00:05:13] So now is the part where we want to iterate through. Can anyone suggest a way to iterate through? 

[00:05:19] AUDIENCE: A loop. 

[00:05:20] HANNAH: A loop. I love it. Specifically, we can try a while loop. OK, and we know that we've reached the end of our list when what? AUDIENCE: When pointer is null. HANNAH: When pointer is null. Beautiful, I love it. OK, cool. So sorry if my bounding brace is kind of falling off the screen. We brought it back. OK, cool. What's next? 

[00:05:48] So we know we want to delete the node that has value n. So let's find the case where we actually find our node. So how would I check that? I'd just say if pointer, and then if I want to get the value out of pointer, I just do arrow n, equals n, the parameter that we gave to this function, the node that we want to actually delete. Any questions up until here? All right. OK, so now let's draw a quick picture on the board in order to visualize this. 

[00:06:24] So let's say there's our lovely node. And it has a value, I'll just say four. And it points to the next node in our linked list. And there's nothing before it. So we have our previous pointing to nothing. In this case, we point backwards. OK, just setting up my linked list over here. And we have a list that points to this structure to begin with. I'll draw one more for the sake of completeness. OK. I'll point this forward. And I'll point that one back. Oops, sorry. Yeah, got this backwards. Do it again. OK, there we go. All right, got it. OK, here's our picture. 

[00:07:21] OK, so we want to consider two cases. The first case is if the node we want to delete is at the very start of our list. And then, the second case that we want to consider is if it's anywhere else. I understand that this a totally messy drawing with all my erasing, but hopefully we'll try to make this clear with some code. 

[00:07:40] OK, so let's cover the case where we found our node, and it's at the very start of our linked list. Anyone give me a suggestion here as to what I should do to actually remove our node? It's a little tricky. OK? 

[00:07:56] AUDIENCE: You have to take the node that would be before it and make it point to the one that would be after it, and take the node that would be after it and make it point to the node before it. HANNAH: Exactly. OK, so this is the case where-- we have two cases. We have the case where the node that we're looking for is the front of the list. OK, and then the case that you described is otherwise, right? It's somewhere else in the list. So you said, we need to look at the node previous, and make the previous node point to the next node. So let's say we're trying to take out five in my very messy drawing over here. We want to make sure that four now points to six. Four's next points to six. And six's previous points to four. That's our goal here, right? This is what I think you just said over there. 

[00:08:56] OK, so let's get that first piece. Let's do the have the previous pointer previous. So four's next should point to what? Exactly, in this case, six. So we should say pointer, next. OK? All right. So let's get rid of this ugly picture and try to draw a slightly nicer one. We have our list head here. And that points to the first node in our linked list, which we said is four. Here's our second node, five. And our third node, six. Just trying to draw the exact same picture, just a little more cleanly. OK, so four's next originally points to five. Five's next points to six. Six's previous points to five. And five's previous points to four. So much nicer! OK, cool. 

[00:10:04] So now, what we did just here, this line of code, which says pointer previous next, so what does that mean? That means if we're looking at five, go to the previous node, and it's next should now point to five's next. So essentially, what that's doing is that's erasing this arrow and making it skip right over five. Is that clear? I know that can be a little bit sketchy. I see some head nods. That's good. OK, cool. Now, what's the next step? 

[00:10:39] I've reset the next. Now, which other arrow do I need to change? This one right here. Six's previous. We don't want six's previous to point to five anymore. We want it to point to four. Does that picture make sense? So now we can actually take five out. So let's get that piece. What should I do before I reset six's previous to four? Any ideas there? 

[00:11:14] AUDIENCE: Free the node between them by setting it to null? HANNAH: Cool. Definitely, our end goal is going to be to free the node. So we can do that right here. Free pointer. Absolutely. But even before that, let's just-- our goal right here is to set pointer next previous equal to pointer previous. I know this is getting covered up. OK, let's take-- cool. Can everyone see this bottom line? Or is it super tiny? 

[00:11:50] So before we execute this line here, we want to make sure that pointer next is not null. Because if pointer next is null, what kind of error will I get when I try to reference a null pointer? AUDIENCE: Seg fault. HANNAH: A seg fault, beautiful. OK, so if that's not null, then we can reset. And we have six point again to four. Questions up until this point? Yes? 

[00:12:17] AUDIENCE: In your first if statement, did you mean to have the arrow next, or [INAUDIBLE]? HANNAH: I meant pointer arrow n. So basically, what I'm trying to do is say, the current node that I'm iterating over, the current node that I'm looking at, I'm storing in pointer. And I want to know pointer's value, which in this case is n. And I want to see, is the node I'm looking for the node I'm aiming to delete? So that's why we have here pointer n. 

[00:12:47] AUDIENCE: So the arrow going to n, you set the value and store it in a node called n? 

[00:12:55] HANNAH: So it's like if I am going through this linked list and pointing to five. If I want to get that value, if I want to get that number, 5, I have to do pointer arrow n. Cool? Yeah. 

[00:13:07] AUDIENCE: Is n the name of the variable? HANNAH: Yes. So if we flip back one slide, n is the name of the value inside of the node in our linked list. And I know it can get a little bit confusing because we also are calling the thing that we want to delete n. So that's where that one line comes from. Yeah? 

[00:13:27] AUDIENCE: What do you have [INAUDIBLE] how they work? A pointer [INAUDIBLE]? 

[00:13:35] HANNAH: Sure. Are you talking about-- which line? AUDIENCE: The last line [INAUDIBLE]. 

[00:13:44] HANNAH: Sure, OK. So let's look at the picture in order to try to explain this. I'm sorry, for the camera, the question was can we explain pointer arrow next pointer previous. OK, so let's say we're at five and our goal is to delete five. So pointer next, which of these three nodes does that give us? That brings us to the sixth node, right? 

[00:14:10] OK, so now we're asking for the six's previous. OK? And we're resetting this to be equal to four, which happened to be five's previous. I know, it's super hard to keep track of. I really recommend you draw pictures if you get a question like this. Yes? 

[00:14:30] AUDIENCE: Is the reason that we don't have a [INAUDIBLE]? 

[00:14:37] HANNAH: Exactly. So the question was, why do we not need to check here? Why don't we need to check that pointer previous is not equal to null? And it's because we've already separated out the case if the pointer's at the very beginning. Very good question. Anything else on this? OK, cool. So let's finish it up. We're almost there. 

[00:14:59] So what if it is at the head? What if instead of trying to delete five, we actually wanted to delete four? What would I have to do? Well, I want to reset my head to what? Shout it out? AUDIENCE: The one after it. HANNAH: Beautiful. OK, so we want list to be pointing to whatever our pointer next node is. Good. And just for completeness's sake, we would want to check that as long as our list is not null, as long as our list is not empty, then we want to set our previous equal to null. Question so far? One step away from--? 

[00:15:53] AUDIENCE: Would it be if list is not equal to null? 

[00:15:55] HANNAH: Yes, you're totally right. I'm so sorry. Is list is not equal to null. Awesome. Trying to bring this all on the screen. It's kind of falling off. Sorry, guys. And last but not least, all we have to do is return. OK. That was a lot crammed in really quickly. Take a second to look this over. Tell me if you have any questions. Yeah? 

[00:16:20] AUDIENCE: If list is at the head, then-- wait, nevermind. 

[00:16:26] HANNAH: OK, good. So this is if list is at the head, we remove it to whatever we inserted. Yeah? 

[00:16:31] AUDIENCE: Can you explain the first if statement again? If the pointer to n is equal to n? HANNAH: Sure. So our goal of this whole function is to delete the node that has value n. So if we find, as we're iterating through our list, the node with value n, that's the one we want to delete. So all of the deleting happens inside of that big if statement. Does that makes sense? Cool. Yeah? 

[00:16:59] AUDIENCE: Maybe you just can't see it, but don't you also need a line for scrolling through the list? HANNAH: Awesome. Let's bring this up a little bit, and we'll throw that right in the bottom. Maybe the board would've been a slightly better idea. So how would I move pointer forward? 

[00:17:17] AUDIENCE: Pointer equals pointer plus one. 

[00:17:20] HANNAH: Beautiful. So that allows us to continue iterating through. OK. AUDIENCE: Wouldn't there be an else? HANNAH: One more time? AUDIENCE: Wouldn't there be an else after the big old if statement [INAUDIBLE]? HANNAH: Which part? I'm sorry. 

[00:17:38] AUDIENCE: The traversal, shouldn't there be an else? HANNAH: You absolutely could have an else. Because I have a return right there, you don't need an else. But yeah, good question. OK, yes? AUDIENCE: Can we think of pointer that is moving through the list as taking on the value of each node in the list? Or should we think of it as sort of external to the list? 

[00:18:00] HANNAH: Either one is fine, I think. The way I imagine it is I say, OK, I am pointer. And this is me. This is my hand. I'm going to point to the different things that I want to iterate through. First, I'm going to point to the head of the list. And that tells me I'm going to point to four. And so me, being external to the list, I can point to each of these elements. So I think of myself as pointer. AUDIENCE: So when you delete one of those elements, you delete yourself, so to speak. HANNAH: Exactly. So you delete the thing you're pointing to. So in the example that we saw where we're trying to delete five, when I'm pointing to five, I want to delete the thing I'm pointing to. Exactly right. Yes? AUDIENCE: Have we taken care of the case where n is not in the list? HANNAH: If n is not in the list? All that's going to happen is you're going to iterate through and iterate through, and then, you're going to get to pointer being null, and then you're going to be done. 

[00:18:48] AUDIENCE: So do we have to return anything? HANNAH: We could. The way that if defined this function, I just say that it returns void regardless. But you could have something like returning an integer, and have it return negative 1 if it fails. Something like that. Questions with-- yes? AUDIENCE: [INAUDIBLE]? HANNAH: Sorry? AUDIENCE: [INAUDIBLE]? HANNAH: Sure. So that's the actual-- once we've done all this work of moving all these arrows around, our whole goal was to get rid of the node that we're looking for. So in this case, freeing pointer, if I'm pointing to five, it's like erasing this middle node. That's the free pointer part. That make sense? 

[00:19:29] AUDIENCE: So even thought you didn't [INAUDIBLE]? 

[00:19:31] HANNAH: So we assumed at the beginning we had some list that was already-- they had put this together. So in order to construct this list, they must've [INAUDIBLE]. Cool. Anything else with this? Yes? 

[00:19:46] AUDIENCE: What if the list doesn't equal the null line? [INAUDIBLE]? HANNAH: Right here? AUDIENCE: Yeah. HANNAH: OK, all I'm doing is I'm just making sure that before I try to dereference list, before I try to access the previous, I want to make sure that it's not null so I don't get a seg fault. Cool. 

[00:20:08] OK, I know this was quite a lot to get through. So this slide will be made available to you. So you can go through it in more detail. Yes? 

[00:20:17] AUDIENCE: Why does the list [INAUDIBLE]? HANNAH: Sure. So list really points to this element right here, the first element in the list. So it can't have a previous. Yes? 

[00:20:31] AUDIENCE: Does the pointer point to the same address in memory? Does it point to the same address in memory as the node that it's pointing to? 

[00:20:40] HANNAH: Yes, it points to this node in memory. 

[00:20:43] AUDIENCE: Right, so when you [INAUDIBLE]? 

[00:20:47] HANNAH: In a sense, yes. OK. All right, let's move along with this. And if you have more questions, stick around at the end, and we can go through it again. OK, cool. Now, we get to move on to hash tables, tries, and trees, which you got super familiar with in p-set five, speller. 

[00:21:04] So hash table is just an array with singly linked lists or doubly linked lists coming off of it. So we have some sort of associative array. And how we know which of these arrays buckets to get into, we use a hash function. So in this case, can anyone guess what the hash function would be just based on some of the input and output? 

[00:21:31] AUDIENCE: Letter number of the alphabet. HANNAH: Exactly. It just puts them in alphabetical order. Everything that starts with an A is put into the first bucket. Everything with a B is put into the second bucket, so on, and so forth. Awesome, OK. And a hash function is any function that takes in a word and will tell you what bucket it belongs in. So which entry in our array it belongs in. 

[00:21:55] So every time I give my hash function a word, it should tell me the same place every single time. So if we use the hash function from the previous slide where we're sorting by the first letter of the alphabet, every time I give my hash function "apple," it should always give me back 0. So if I have an apple to put in my hash table, if I give "apple" to my hash function, it should say, go put it in bucket 0. If I'm looking for an apple in my hash table and I say, where might apple live, you ask your hash function. And it says, go to bucket 0. All right? Questions with hash functions? Awesome. 

[00:22:34] Here is a slightly more detailed explanation of what a hash function might look like. All right. Now, the problem with hash functions is in an ideal world, we would only have one thing in each bucket. But in reality, there's not only one word that starts with A. There's not only one word that starts with B. So in this case, if we suddenly get "berry," and we want to put it into our hash table, and we see, oh, no, banana is already there, what are we gonna do? 

[00:23:03] Well, we have two options. The first option is linear probing, which just means go find the next empty bucket. Go find the next empty array entry. And just put "berry" there. So I know it's supposed to go with banana in bucket one. But just put it in bucket three, because bucket three is empty. Another option is probably what you implement in your p-set, where you had separate chaining. So each of your buckets, each of your array elements, not only holds one words, but actually holds a pointer to a list of words. So that if you had banana in your hash table and you suddenly wanted to add berry, no problem. Just add berry on to the end, or to the beginning, of your linked list. OK, awesome. Questions with hash tables before we go on? 

[00:23:58] All right. Trees and tries. OK, so this was another option for implementing dictionary. You could have made a try. So it's a special kind of tree that behaves like a multi-level hash table. So you'll see the picture where you have an array that points to a bunch of arrays that point to a bunch of arrays that point to a bunch of arrays. And we'll see exactly what that would look like on a future slide. And more generally, a tree is just any data structure in which the data is organized in some hierarchy. So where we saw we have some sort of understanding of a top level, a next level, a next level, a next level. So this is probably most clear with some specific examples. So here's our tree. You can see that it has particular levels that we start with that root node, one. And we can go down through our tree. 

[00:24:50] A binary tree is a particular type of tree. And the only specification for a binary tree is that each node has at most two leaves. So you're not going to see any of these nodes have three or four or some other number of leaves. And then even more specific is a binary search tree where every node to the left of the node is going to have a value smaller. And every value to the right is going to be bigger. So if you see 44 is at our root, to the left, 11, 22, and 33 are all less than our root. And on the right are all numbers bigger-- 66, 55, and 77. And this property holds true at every level of the tree. 

[00:25:37] So when we go down to 22, 11, and 33, still 11 is smaller than 22 and 33 is bigger than 22. And this makes it easier to search because if we're looking for a number, we know exactly which branch to follow down. So this should remind you a little bit of binary search. Yeah? 

[00:25:56] AUDIENCE: So when you're describing binary, you said it has at most two leaves? HANNAH: Mm-hm. AUDIENCE: Could it have less? HANNAH: Yeah. So let's say, for example, you didn't have an even number of things and you couldn't fill up all your leaves, it's fine if one has one. OK? Awesome. Any other questions on trees? OK. 

[00:26:16] Back to our tries as I was talking about a little bit earlier, how we have these multi-level arrays. So in this case, we start at the top. And we can follow any given word down. So let's say we wanted to look for Turing. We start at T, follow it down to an array that contains U, and follow it down until we reach this little delta which tells us, yes, you found a word. Clear on tries? Anything to go over there? Yes? AUDIENCE: Does the symbol of delta have to occupy space within the try? HANNAH: Yeah, so it doesn't necessarily even need to be a delta. But we need some way to tell our computer-- sorry, so that we know that TUR is not a word. Because let's say we didn't have this concept of a delta, this concept of congratulations, you found a word, it would go through and iterate T-U-R, and then say, awesome, I found it! It must be a word. But it's really not. We want whole Turing to be a word. So we must have something at the end that says, congratulations, you've found a legitimate word. AUDIENCE: So if you had like 26 letters in the alphabet, would you actually have 27 keys in your try? 

[00:27:24] HANNAH: Awesome, yeah. So actually, I think that will be on the next slide. Ta-da! Where if you have a node in your try, you're going to have 27 children instead of 26. Any questions with that? Yeah? AUDIENCE: Why do tries take up so much space [INAUDIBLE] as you go? Why is it considered to be [INAUDIBLE]? HANNAH: Sure. Let's go back. The question is, why are tries so much bigger than something like a hash table. So for each of these levels, even if they're not drawn here, you have to have all 26 characters. And the reason that you can't say, oh, but like for Turing, I don't need to have any of those same things on the level of U. Well, if suddenly you wanted to add something that was like T-H, you'd need to have the capability of adding that word. So for every single letter, you're going to have to have a bunch of arrays coming off of it. So you can see how it'd get really big, really fast. Any other questions? All right. Yeah? 

[00:28:29] AUDIENCE: When are tries faster than hash tables? 

[00:28:33] HANNAH: When are tries faster than hash tables? So if you had a really bad hash function. So let's say I was like, here's your hash function. No matter what word you give me, I'm always going to put it in array entry 0. And so we end up with just putting everything in one big long linked list. And so a lookup time would take at worst n if it's at the very end of our list. With the try, we just have to iterate through the letters in the word. So even if we added a bunch more words to our try, it wouldn't take us any longer to find a particular word. 

[00:29:09] All we have to do is, for example, in this case, let's say we're looking for zoom, we would just have to iterate over Z-O-O-M, four letters. So that's just the length of the word zoom. It doesn't matter how many more words we put in this try. We can always get it in those four steps. Awesome. Yes? 

[00:29:32] AUDIENCE: So [INAUDIBLE] is an array, right? 

[00:29:34] HANNAH: Mm-hm. AUDIENCE: If you're looking for [INAUDIBLE], would you have to go through your array to find [INAUDIBLE]? HANNAH: Sure. AUDIENCE: Doesn't that take more time? HANNAH: If I'm going to say that my array is always going to be A, B, C, D, E, F, G, blah blah blah, so if I always know it's in the same exact order, if I always know it's in alphabetical order, I can just say O is number so and so in the alphabet. Just jump to that place. Because remember, with arrays, we can access any element of that array in constant time if we know where we're looking. Yeah? 

[00:30:09] AUDIENCE: On the previous slide [INAUDIBLE] 27, but 26 for the first one. 

[00:30:14] HANNAH: Sorry? 

[00:30:15] AUDIENCE: Isn't the first one 0, so wouldn't it be 26? 

[00:30:18] HANNAH: Sure, so when we say 27, that's going to give us indices 0 through 26. But if you actually count those out, it's going to be 27. Good question. Anything else? Yeah? 

[00:30:31] AUDIENCE: So are tries slower than hash tables? 

[00:30:34] HANNAH: Tries are going to be, in theory, faster than hash tables but take up more memory. Yeah? AUDIENCE: [INAUDIBLE]? 

[00:30:45] HANNAH: I'm sorry, I didn't hear you. AUDIENCE: [INAUDIBLE]. 0 to 25 gives you 26. 

[00:30:54] HANNAH: 0 to 25 would give you 26, right. 

[00:30:56] AUDIENCE: And then [INAUDIBLE]. HANNAH: Right. So the number we're specifying is the number of things in our array. So if we have 27, it's going to give us 0 through 26, which will give us room for, in this case, I'm not including an apostrophe. So we're getting 0 through 25 are the first 26 letters of the alphabet, or all 26 letters of the alphabet. And then that last thing, at entry 26, is going to be the check mark, or the delta. Anything else? Awesome. Lost my space. OK, cool. 

[00:31:31] So we already touched upon this. But the big trade off between tries and hash tables is that tries provide, in theory, constant look up times but use a whole lot of memory. All right, now we have slightly less complicated structures, and we'll be done with C, and we'll move right along. 

[00:31:49] So stacks, we saw this in lecture where you have something like a stack of trays where the last thing you put on the stack is going to be the first thing you take off. So that's what really defines a stack is that the last thing you put on is going to be the first thing you take off. And the terminology that we use if we're going to put something, if we're going to add something to our stack, we call that pushing. And if we take something off, we call it popping. And if we're going to implement a stack, we need to be sure to keep track of both the size and the capacity. So the total number of elements we can hold and the current number of elements that we are holding. 

[00:32:27] And very similarly, we have queues. And the only difference is instead of with stacks, we said the last thing we put on is the first thing we take off. So with queues, the first thing we put in is going to be the first thing we take out. So this is like if you're actually lining up at a store and you're being helped, then the first person in line should be the first person to be helped. So that would be a queue. 

[00:32:52] So we need to keep track of the size, capacity, and head since we're going to take everyone off the front of the list instead of the back. Questions on that? Any C questions that are bothering you? Data structures, any of that fun stuff? All right, cool. So I'll hand it over to Alison to jump into some more programming. 

[00:33:14] ALISON: Oh, we'll see. We'll see how well I do here. OK, I'm going to try and fly through this stuff, guys. Hannah went very in depth on all her things. I'm going to try to give you a quick blast overview so that we can get to Davin with all the fun JavaScript and security things that maybe you actually want to hear more about. 

[00:33:33] OK, as Hannah said, if you have any questions, I'm going too fast, please, let me know. I will answer questions as necessary. So to start, we're going to start with probably one of the very first things you learned with web programming, permissions. So chmod, you guys should've been masters at this with all the web programming that you've been doing lately. It's basically just a command that changes the permissions or the access permissions of our file system objects. Of course, to actually see these, if you're having any trouble with these during your problem sets, you may have used ls -l, which is long, to get the view kind of like this, where you actually see all the permissions for a file. 

[00:34:16] And really, we're just going to go through pretty quickly just pretty much what each of these mean. So we have d right here, which just stands for the directory. Obviously right here, we see rwx, which is readable, writeable, and executable. These could also be represented as bits, which we'll get into on the next page. So each triad that we saw here, so it's three triads. We have rwx, r nothing x and r nothing x for this first file. It's this general structure. 

[00:34:49] So we have some directory. We have some user group with these permissions. Some group that has these permissions, and a world that has a permission. You can think of these as a triad. You can think of these as three bits. So they can hold values anywhere from 0 up to 7, which is why sometimes we had you do chmod 600 instead of chmod rw whatever. We'll get into an example there. But basically, you can think of these as either just rwx, or you can think of them as some number where this first one here represents a number between 0 and 7, this second one represents a number between 0 and 7, and the third one represents a number between 0 and 7, OK? 

[00:35:38] r has a value of 4. w has a value of 2, and x has a value of 1, which is why this permission here would be chmod 700. Because in this case here, it says we have the first bit there is flipped on. So we have 4 for read. The second bit is flipped on for w, which is 2, so now we have 6. And the third bit is flipped on for x, which is 1, so we get seven. And of course, our group and our world are each 0. So this is also the equivalent of chmod 700. And I would definitely try to understand the mapping between those. I'm not sure if it has come up on a quiz before, but it would be a question that I might ask. 

[00:36:18] Just a little bit going even further into chmod here, here is the very general structure of a chmod call. So of course, we have chmod here. References, what this refers to is who are we giving these permissions to or who are we taking these permissions away from. So we have a here in the permissions, like we've given you chmod a plus x, as we'll see soon. a just means give these specific permissions to everyone. Give them to all. So you could very well have u plus x or g plus x or o plus x or multiple thereof. So that first part is always going to be references. Who are we giving these permissions to, or who are we taking them away from? 

[00:37:03] The second one is the operator. So you guys have mostly dealt with plus. This gives permissions to whoever you're giving them, whereas minus, logically, removes them. So nothing too terrible there. And then modes is what we talked about with reading, writing, or executing. So a plus x means give executable permissions to everyone. And then, of course, on which specific file or directory. OK? Everyone good with chmod? Not too bad? 

[00:37:37] OK, so HTML, any of you are old enough to-- MySpace age? I sent this to my section, and literally half the people looked at me like I was crazy. And I was like, guys, we're not that old. Come on. So HyperText Markup Language, it's honestly just a way for you to display certain things on the web. So it's a markup language. It's not a scripting language. There's no logic in it. It is simply to change the way something is displayed. OK, so that's an important distinction to make. It's considered a markup language, not a scripting language. 

[00:38:12] So here we have our HTML tags. On this slide are probably most of the ones that you should be familiar with and be really comfortable with. So obviously, we have our HTML tag, which designates that everything in between these two will be HTML. We have some link, which obviously will give you a link to an external web page. Some title, within our head here. And we have our body with h1, which is a header, so it'll make it nice and bold and bigger. And then, we have some p, which is a paragraph. You should probably know and be familiar with things like how you insert an image, are there any other header classes? I would definitely be comfortable with div. So these have the majority of tags that you should be familiar with. But of course, as with everything in CS 50, the list is not exhaustive. So make sure you brush up on that. 

[00:39:08] CSS, so CSS, if any of you watch my seminar from two weeks ago, is really just a way to style your web page? OK, so we have some markup language. HTML, that takes care of just the text and where it might be on the page. But CSS is really what makes it pretty. You could have these in your HTML files, but as we will talk about later, I'm pretty sure it might be the next slide, it is common practice, and actually practice that we really encourage, for you to keep them separated when we talk about MVC and that whole paradigm. That's really what this feeds into. 

[00:39:42] So CSS is just a way to make things look pretty. The things here, like body and #title and .info, these are called selectors and what they do is they select specific things within your HTML file and apply whatever style, whatever sort of things that you want, to that specific element of your web page. So here, we have a background color and a color and a font family that's being applied to whatever is in the body. So if we looked back here, it wouldn't apply to the title. It would only apply to what is in these body selectors, OK? 

[00:40:22] With title here, this is going to be the same thing, the color of the text being blue is only going to affect what is within the title selectors. As well as info here, the text will be pink, whatever's info, which is right here. So the only thing that would be pink on this page is date, Monday, November 17, 2014. OK, so CSS is just a way to have more control over-- yes? 

[00:40:48] AUDIENCE: Why do you have to use the hash with title? 

[00:40:51] HANNAH: Next slide, promise! We'll get there. So this is why we have to use hash. So selectors take on three main forms that we talk to you guys about. I fyou want to learn more, there's plenty out there. There's great CSS documentation. There's a tag name, which has to do with just your normal tags in HTML. So h1, p, div, h2, those sorts of things. And we can just name those as is. So as we see here with body, it's a normal tag. So we can just put body when we're talking in our CSS file. 

[00:41:26] With title, the whole reason we have this hash is we have what's considered an ID. So an ID should always be unique within your HTML page so that when you are referring to it, you know that you're only referring to one specific thing. So in this case here, with our h1 here, CS 50 review session, we have an id of title. So in order to just refer to that piece of our HTML, we do a hash title. Just by convention, IDs are designated with a hash in front of them. In the same way, we see info here is a class. And so class with CSS is designated as a dot class or dot whatever that class is. So in this case here, it's info. 

[00:42:10] So I take it back. Both of these would be pink for our CSS here because they both have a class of info. And in our CSS file, we have designated that anything with a class of info shall be pink. Does that make sense? Yes? 

[00:42:27] AUDIENCE: If you were to make everything in the body white, and then you try to make something inside it blue, would that cause problems? 

[00:42:34] HANNAH: So CSS is cascading style sheets. So whatever is toward the bottom will take precedence. So if you do something with body, and you make everything white, and then later on you change the title or you change the text within body, it overwrites that. So anything toward the bottom will take precedence. Yes? 

[00:42:56] AUDIENCE: And IDs are unique, but classes can be more? HANNAH: Right. So IDs should be unique, and classes can refer to as many things as you'd like. Any other questions? Yes. 

[00:43:09] AUDIENCE: [INAUDIBLE]. I'm wondering whether that makes a difference. HANNAH: I'm sorry, what was the question? AUDIENCE: There's small "f" and capital "F." HANNAH: So the difference between small "f" and capital "F" shouldn't make a difference. So "f" will be 15 either way. Cool, anything else? Everyone good, CSS? Yes? 

[00:43:30] AUDIENCE: Sorry. Can you have a class and an ID? 

[00:43:35] HANNAH: Yes, you can. Things can have both a class and an ID. And I highly recommend testing these on your own. CSS you will learn best just by making something, very simple web page, drawing up some CSS, and just seeing how they interact. And you'll gain a very good, intuitive sense for how it works. 

[00:43:56] OK, everyone good with CSS? You're all going to make beautiful websites with CSS now. OK, best practices, just things to keep in mind, things that-- this is why we dock you for designer and whatnot. So close all your HTML tags. So if you have an open body, there should be a close body. If you have an open paragraph, there should be a close paragraph. Check to see your page validates. You guys should be very familiar with this from p-set seven with CS 50 finance with the W3 validator. And as I said before, one of our big paradigms is separating your style with CSS from your markup, which is HTML. And then, of course, we have this great XKCD down here. Yay, comic relief! 

[00:44:38] OK, TCP/IP. Between these and HTTP, basically they're both protocols. So you could just think of them as a set of rules that govern how things move across the internet. So transmission control protocol, or internet protocol, is just a way to make sure that data gets where it's going and that we know if we're ever missing data. So if you guys think back to lecture a couple weeks ago with David where we had four envelopes, they were all numbered like one of four, two of four, three of four, four of four, this is just a set of rules. We said, OK, whenever we're sending more than one packet, we are going to number it with what number it is and how many total that the user should get. 

[00:45:19] And this is just telling whoever is receiving the data whether they have gotten everything or if something got lost along the way. And they need to ask for it again. This is really just a set of rules. That's how you can think of it, OK? And also, it specifies the port, which you guys can-- I know during lecture, they had a whole list of ports. But we don't have them here right now. 

[00:45:41] So hypertext transfer protocol is, again, it's another protocol. So it's another set of rules that govern, in this case, how hypertext is transferred. So it just allows browsers to speak to web servers. And as we said here, it's like human handshaking. It's just a way to govern how the web server is going to interact with your browser. And we have just a couple of examples. We have some requests here where GET is the method. We have HTTP 1.1, which is protocol version for us. And then, the host, which is what we're actually trying to access. And then, as you see here, we get some response with this 200 OK as our HTTP response code. We have a big list I'm going to pull up in one second that you guys should be familiar with. And we have this content type text/HTML, which just says what type of data are we receiving from the server, OK? This host and this content type are part of the HTTP headers. You can have as few or as little as necessary for the context of what you're dealing with. Sometimes you'll have a lot of information coming from your server. Maybe they're requesting a lot of information from the user. It varies depending on the context. If you look at CS 50 Study, there's a lot more on that. But we have a lot to get through, so I'm going to go right ahead if that's OK with you guys? Cool. Hold on. I definitely have that whole list of-- huh! I don't know why this is all the way over here. I thought I literally moved it while I was sitting-- 

[00:47:15] DAVIN: Do you want to teach it? Or do you want me to teach it? 

[00:47:17] AUDIENCE: I thought we could just show them to start with. I mean, you can go into them further, but I thought it made more sense since I was just talking about HTTP statuses. So here's the whole list. I guess what's going to happen is Davin is going to go into them later. But there's a whole list, a preview of the taste to come. OK, we're going to blow-- this is going to be a PHP crash course like no other. 

[00:47:41] So PHP, hypertext preprocessor, it's a recursive backronym, which means it was named something else. And then they were like, this doesn't really make sense. So they just named it-- and it was an acronym, so they just made it PHP hypertext preprocessor, which just makes no sense. Fun story. It's a programming language. So as much as I emphasize that HTML is not a programming language, it's a markup language, PHP is a programming language. How you know this is because there is logic. There are conditionals. We have variables, whereas we have none of those things in HTML. 

[00:48:12] All right, then we have this little bit here that's like a taste of PHP. So basics, variable names start with a dollar sign. Lots of people like it. Reminds of us money. It's all great. We all want PHP. So we don't specify a variable's type anymore. It is determined at run time. The interpreter will be like, oh, we'll just run through, and according to the context, we'll see what types of types these variables need to have. There's no main function. Things will just run. You guys with your import in your last p-set, you'll notice this. There wasn't really a main function. You just wrote what you wanted to happen. And it just kind of happened. So that's PHP for you. 

[00:48:56] Arrays are very similar. We still have this bracket. Here, we have some variable called arr, and it's equal to-- we have our normal bracket notation. And we have some key value. And the big difference between C and PHP arrays is that we can have this associate-- we can associate values to keys. So instead of just having an array that is indexed by the number or the position of that element in the array, we can actually associate it with a key. Where we can say, OK, I want whatever value is associated with fruit. And maybe we have fruit went to banana. So it'd return banana to us. 

[00:49:41] But basically, the most powerful thing about this is that if you guys remember the demo from lecture where we basically rewrote speller in PHP, and it was-- lookup was really just like, does this key exist? That's really kind of the power of it. You don't need to iterate through your array. You don't need to know what space it's in. It could be at the end or the beginning. As long as you know the key that's associated with the value, PHP can just spit that value right back out at you, OK? 

[00:50:09] And then, we also just have just because we can have key value pairs doesn't mean you have to. You can also just create a normal array like here, at the bottom, where it's just one, two, three, four. Those are our values. And in fact, their keys are the indices. So the key for one would be zero. The key for two would be one. So on and so forth, unless you explicitly assign a key, you could assume that the value is just their index. Does that make sense to everyone? No questions? Awesome. 

[00:50:38] OK, foreach is a way to iterate through your arrays. So we have something here, just the general structure. So foreach, the name of our array, as whatever you want to call each element in your array, and we can do something with that element or with that value. So we have an example here. We have an associative array with these two entries with bar being associated with foo and qux being associated with baz. So keys are foo and baz. Values are bar and qux. So foreach, we have our array here, as the key value pair. This allows us to access both the key and value. Maybe you just want the value, in which case you could just do like arr as $value, and then you are just accessing the value as you iterate through. But maybe, for some reason, you want the key, which is why I chose this example instead. So you can actually manipulate key and value in this case. OK? Question? 

[00:51:41] AUDIENCE: If you wanted to just manipulate the key, would you have to do foreach-- 

[00:51:45] ALISON: Right. So if you wanted to manipulate just the key, you would still need this syntax because if you just have arr as something, as one thing, it's going to assume you want the value, not the key. So if you ever just have just like arr as, maybe this is like $element, it's going to assume that you're asking for just the value at each point. If you explicitly want to do something with the key, even if you're not going to do anything with the value, you need this structure that we have here where you're explicitly asking for both the key and the value. Great question. Anything else? Cool. 

[00:52:27] All right, PHP and HTML. Oh, we're back to p-set seven again. So this should look a little familiar. So this is some simple HTML form that has some input name of hello. And we see we have our method of GET. And if we remember from our p-set, when this form is submitted, it sends an array called $_GET that has all of these inputs or variables from the form that should be manipulated in our PHP. So in this case, the user would put in their name. They submit it. And we see that we get some array here. We have our GET array. And we are accessing the name. 

[00:53:11] So that says, OK, give me the value that's associated with name, name being the key here. And that maps directly to what we said our input name is. So this was giving you the key to what is going to be in your array here. Does that make sense to everyone? Yes? 

[00:53:32] AUDIENCE: Does the name in GET refer to the purple line in [INAUDIBLE]? 

[00:53:36] ALISON: It refers to this here. So this field right here, it refers to this name here. So this could have been named like phone number, or whatever. This name actually says, what are you calling this field? How are you going to refer to this field? And this name is actually like, we're saying this field is called name. That's how we're going to access it. 

[00:53:59] AUDIENCE: So is it like, input name equals Bob, and-- 

[00:54:02] ALISON: Right, then you would get Bob down there. Exactly. Everyone cool? All right, so GET versus POST, these are the two main ways that we pass data in an HTTP request. You guys should have seen both of these hopefully. So with GET, the information is passed through the URL. So if you ever do Google searches, YouTube, you'll probably notice some question mark. And then, all the words that you just put in there. And POST passes the data in the HTTP message body. So unlike GET, you kind of consider that the data is hidden from the user. But what's really important to understand is that this is still just as insecure as GET. The analogy I like to use is if you have your bank account number and you write it on the outside of an envelope, that's pretty unsafe. If you were to write it on a piece of paper and put it inside the envelope, it's still really unsafe because all you have to do is open that up and look at the actual contents of the message to see that. So this is "hidden," and people like to think it's secure, but it's really not. And I'm sure Davin will get into that more, maybe. But it's an important distinction to make and something really good to understand. 

[00:55:15] OK, SQL, Structured Query Language. All the stuff that we've seen so recently! So it's basically just designed, obviously, for managing data. You guys had a lot of experience with this in your tables with PHP MyAdmin. And there are four common queries that we want you guys to know. So there's update, insert, select, and delete. So make sure you know those really well. We're going to go through them really fast. 

[00:55:40] So update, really, as what you might think it does, it just updates data in your database. So we have some example here. This is the general structure of an update query. So we update the table that we're talking about. And we want to set certain values, certain columns equal to specific values. So this just updates the table, changing values in all rows in this case. So in this one down here, an actual example, we have insert-- sorry. That slide advanced without me realizing it. 

[00:56:17] So this updates table set col1 equal to val1 where house equals "Currier." What this one does is it only changes, it only updates these values in specific places. So in this first one, it changes these values for everything in your table, OK? It's going to change this column for every single entry, for every single row. But this where, you could think of it as a qualifier. So it's only going to change it in very specific places. So in p-set seven, when you maybe updated the amount of cash that your user had, you probably had some where ID equals session ID, right? 

[00:56:53] Because you didn't want to change the amount of cash for every person who was using your website. You wanted to change it for one specific person, that person being whoever was using it at that time. Right? OK, so insert, insert certain values into tables. This is like when you're creating a brand new user. The general structure here is insert into whatever table we're talking about. Values, being the values that we actually want to insert. OK, so as we see here, we have insert into table. This is specific columns with their corresponded values. So this says, insert a new row containing values val1 and val2 under these specific columns. 

[00:57:33] So maybe you only want to fill out half the things in this row. That's what this part here lets you do. It lets you actually determine which part. Yes? 

[00:57:44] AUDIENCE: Can you only [INAUDIBLE] cells in the row [INAUDIBLE]? 

[00:57:52] ALISON: If you only fill in certain parts of your row, the rest of those cells are just empty. As long as you allow them to be empty, it's not a problem. If you try to access them, it's going to return some empty element. But it is important to know that in certain tables, they have to be allowed to be null. You may have run into a problem during your p-set because we didn't let any of your values be null. But you can specify an optional value in your table. 

[00:58:26] OK, select, so this is just a way of getting specific data from a table at some identifier that you want. So select star from table where col equals something just means, give me all the data associated where this specific column is true. So the star in this case will return the entire row to you, OK? 

[00:58:49] And then, in this case, select star from table just gives you the entire table. And then, delete obviously, it just deletes the row from the table. So delete from table, whatever table we're referencing, where some specific identifier or some condition is true. Yes? 

[00:59:07] AUDIENCE: Question. Why are you using double quotes, and whether you do double quotes or single quotes, does it make a difference? 

[00:59:13] ALISON: Double quotes or single quotes doesn't make a difference in SQL. I thought I saw another question. Yes? 

[00:59:20] AUDIENCE: Doesn't it affect what gets escaped from the query? 

[00:59:25] ALISON: Rob? 

[00:59:27] ROB: What do you mean by escaped from the query? 

[00:59:31] AUDIENCE: If someone has a single query in the form of-- 

[00:59:36] ROB: If someone were to put a single quote in, then as long as you're sanitizing your input, then it doesn't matter. But if you're using a single quote and you are incorrectly escaping your inputs, then yes, they need to put a single quote in order to break your code. if you use double quotes, they need to put a double quote to break your code. But as long as you escape things correctly, it doesn't matter. It's just going to be translated to the correct symbol anyway. 

[00:59:59] AUDIENCE: What does escape mean? ALISON: Well, like sanitizing and escape. The exam that we have, the great XKCD comic that they pull up where you have, oh-- ROB: It's the last slide. ALISON: It's the last slide, really? Oh my god. There we go, perfect. OK, so basically, you can inject something into this SQL query where it breaks your code, or as David showed in class, if we have some single quote 1 equals 1 and if in our code, we just directly copy that in, and we have an ending single quote, what happens is we get some expression that evaluates to true that will let someone enter our database and get data that we don't want them to get. So sanitizing the inputs just means making sure that we are escaping these characters and designating them as chars and not things that should be allowed to be taken literally as our SQL statement. 

[01:01:04] So the big thing that we said that you guys should be using were HTML special chars, which is something that you might want to take a look at. OK, delete. Data types, this will all be online. Since we have 15 minutes left, I'm just going to go right through this. PHP and SQL, basically this is just we had a query function that helped protect against these malicious attacks. So whenever you use query, we were making sure that things were sanitized and whatnot. 

[01:01:36] MVC is just a design paradigm, so model, view, controller. It's just a way to keep things nice and split up in the same way that we tend to factor out code into functions. This is just a web design framework that allows you to do the same thing. I'm going to skip this. 

[01:01:54] This is something that I would be super comfy with. It's a great little table there. It gives you the function example of the model. I'm just going through this because I really want Davin to be able to talk. If you have any questions, please feel free. I'll be here after. Just come talk to me. With that, we have HTTP statuses. And Davin's going to blow through this in 15 minutes. This is going to be great. 

[01:02:17] DAVIN: OK. Uh, your mic? Yeah. Sorry. ALISON: Way to be prepared. DAVIN: No, I'm ready. I'm ready. Let's do this. It's ready. OK. Sorry. I spilled coffee on myself. I don't know if I'm more upset that I look silly, or that I don't have coffee anymore. Anyway, just a quick announcement about the sheet you guys have. So this sheet you guys have is not the official what's on the quiz. This is the official what's on the quiz. Also, on the website, we tell you, OK, this will be on the quiz. So in the little cheat sheet you have, not official. And there are mistakes on it. So best not to just blindly use it. So yeah, that's that. So let's get into this real quick. 

[01:03:05] So HTTP statuses. So what happens when the website, everything is all right. Everything's OK. Everything comes back to you the way you want it to. You get a 200 OK. 301, where have we seen that 301 before? Wait, what's up? Sorry. We saw i tin lecture during security. So during security, so if David typed in http and then tried to go to cs50.net, you're going to see 301 moved. Why? Because it's going to redirect you automatically to our HTTPS. 

[01:03:35] So 301 moved, just it's basically a redirection. And you can think about it like this. Any of the statuses that start with 2's, those are like, OK, everything's OK. Any of the statuses that start with 3, those are redirection. Statuses that start with 4, that means there's some kind of client error. Statuses that start with 5, that's some kind of server error. So you kind of break up the statuses like that. So 304 not not modified, so in your server.c p-sets, so let's say you loaded cat.html. Everything comes back, you get 200s, OK, great. 

[01:04:03] Let's say you refreshed it. Well, inside that cat.html, you have a JPEG. Well, that JPEG isn't going to get reloaded. You're not going to post another GET request to the server, and then get all that information back. It's going to just be-- that image is going to be cached on your machine. And so that image will be a 304. So it's not been modified. If you then close out, clear cookies, and then refresh and try to load that page again, you're going to see 200s. You're not going to see that 304. 

[01:04:28] 400, bad request, real quick, like if you were going to send a JSON object to the server and your JSON object was incorrect, you'll see something like that. 403, forbidden. When would you see a forbidden? Probably Probably? AUDIENCE: Chmod. DAVIN: Chmod, yeah. So you haven't set permissions correctly. 404, not found. It's just not there. So if you type in the wrong URL. 500, internal server error, the server probably wasn't configured correctly. Something not on your end, but something on the server side. And 503? A lot of people saw 503s in the last p-set. When would that happen? I heard whispers. 

[01:05:05] AUDIENCE: When Google decides you're a robot. DAVIN: Yeah, when Google decides you're a robot, you get 503s. So that's an overload. If you've requested from the server too much, it's usually temporary. And most of you noticed it. So you saw 503. You might have taken a little break, then the 503s went away, and everything was all right. 

[01:05:20] GABE: Real quick, when do you guys get 500 in probably this last problem set? Yes? 

[01:05:27] AUDIENCE: Usually if the server has a file misplaced or [INAUDIBLE] their machine [INAUDIBLE]. 

[01:05:34] GABE: So it might be a configuration issue in your PHP on your server. But it might be just something like a semicolon that your forgot. If you're typing PHP, some incorrect syntax might get you something like that. OK? 

[01:05:46] DAVIN: Cool. Do you want me to do just up until AJAX? 

[01:05:51] GABE: [INAUDIBLE]. DAVIN: OK. So what's the DOM? What does DOM stand for? 

[01:05:55] AUDIENCE: Document object model. DAVIN: Nice. And why do we like it? Awesome. Right, so it just allows us to access the HTML, access our page very quickly. Why? Because we're treating our page, treating our HTML tags, treating everything as if they're objects. If we're treating them like they're objects, then what can we do? Well, we can call functions on them. And this is important why? Well, because we're going to use JavaScript to update our HTML, update these objects. So if we treat them like objects, we can then call functions on them. I'm going to get into this a little more when I go into JavaScript, but you've all seen like document.getElementByID. So document is your element, get element by ID, so you're going to look for some ID in an HTML tag. And then, you can do something else to that. For example, like document.body, then you can append child. So you're going to find the document. You have the document. You're going to find the body. You found the body. And then, you're going to call some function on it. So append child, and you can append some HTML onto the end inside your body. So basically, you're just treating it like an object. You're treating HTML tags like an object. And it makes it very easy and quick to go through them. But it also allows you to call functions on them so you can manipulate and change the elements. 

[01:07:04] GABE: Given this, why is JavaScript such a nice language to interact with HTML? Odds are, when people were choosing the language for the browser, for client side, JavaScript is really nice, it's really good at handling objects. And the objects are kind of like the objects that appear in the HTML, so it's very easy for JavaScript to do that kind of handling. DAVIN: Nice. So here's just an example. So I think on last year's quiz, or maybe two years ago, we asked you to create a tree. So this is exactly what you'd do. So you start out with document. And then you basically just look at the tags. So if you look, we start with an HTML tag. And then, you get clues about how to do this based upon the indentation. So head kind of branches off. Inside head, we have another tag for title. So then, we have a title tag. And inside that, we have some string. And so we represent a string in a circle. And all the tags are in squares. 

[01:07:54] And if you look, if we think of this as a tree, and let's say that HTML is a parent, then head and body are going to be siblings. They're both going to be children of that parent. So because they're both siblings, they're going to be kind of next to each other in our tree model. And then, you basically do the exact same thing. So not difficult, but we have asked questions like this before on the quiz. GABE: Does anybody have questions so far? Is it good? DAVIN: Cool. JavaScript, OK, the good stuff. So JavaScript, what is JavaScript? Well, JavaScript is-- it's complicated, but these are some of the highlights that you should keep in mind. First, it's loosely typed. What does that mean? So PHP was-- yeah, what's up? 

[01:08:35] AUDIENCE: You don't have to explicitly state what type of variable it is. DAVIN: Perfect. So he said you don't have to explicitly state the type of variable. That's exactly right. So in C, if I had int i equals 50, then in PHP, it's just like this, $i, equals 50. Then in JavaScript, what would the call be? Var, right? It'd be like var i equals 50. But you don't have to be like, OK, this is an int. OK, this is a string. No need to do that. It's an interpreted language. So what does that mean? 

[01:09:04] AUDIENCE: Not compiled. 

[01:09:06] DAVIN: What does not compiled mean? Yeah? 

[01:09:11] AUDIENCE: You don't have to restructure the code to get it ready for the computer to run it. It's just taken at the time of execution and the computer [INAUDIBLE]. DAVIN: Yeah, so it's going to pass through an interpreter. But you're exactly right. So you're never going to compile it, right? When you were doing your PHP and JavaScript code, you never called compile. You never called something like make or anything like that. That's because it's interpreted. So every time it goes through browser, it goes through an interpreter. And that's going to interpret it just in real time right away for you. So what are some positives and negatives to having an interpreted language and having a compiled language? So compiling-- yeah, what's up? 

[01:09:50] AUDIENCE: Interpreted is slower. DAVIN: In what sense? 

[01:09:57] AUDIENCE: After you compile, you don't have to do any extra steps to execute it, whereas this [INAUDIBLE]. 

[01:10:04] DAVIN: Right, perfect. So what you said is basically that compiling, when you compile, you have a lot of upfront costs, right? You're going to compile it. But after you compile it, the compiler's going to optimize it. It's going to be fast. It's going to basically be as fast as it can be. With interpreting, you never have that upfront cost. Rather, it's going to be slightly slower every single time you interpret it. And you're going to have to interpret it every single time. So instead of having this one time cost, now you're going to have to interpret it every time the page renders. 

[01:10:29] So interpreters are good because you don't have to compile it, but they're bad in that every time the page loads, it's going to have to interpret this JavaScript. And it's going to run slightly slower than if you were to compile it. Allows you to communicate-- oh, wait. Used to manipulate the content and appearance. We just talked about that. It uses the DOM. AJAX, we'll get into AJAX in a little bit. And then, it's client side. So PHP is server side. JavaScript is client side. What are positive to that? It says it. It's faster, right? Because you don't have to-- it's faster. You don't have to communicate with some other device. If you're just on your client, you're never going to have to go and see what's on the server and then report back or something like that. So client side tends to be a little bit faster. 

[01:11:15] GABE: Yeah, but this does not mean PHP is faster than JavaScript or anything of the like. They run kind of in the same speed because they're both interpreted languages. The thing that's slow here is the request. So you're actually going all the way over to Brazil to get some information that lives there. But PHP and JavaScript, they kind of run in the same speed. It's not that one is faster than the other. This, also, trick question here. So JavaScript never becomes machine code, true or false? 

[01:11:47] AUDIENCE: False. GABE: False. It has to become machine code because machine code is the only thing the machine understands. Even though it's not compiled, it still becomes machine code because the interpreter is just a program that goes line by line and transforms that line into something the computer understands. OK? Cool. 

[01:12:08] DAVIN: Here is just a very basic hello world JavaScript program. So I don't know if-- you've seen this. But you just have HTML here. And instead of actually putting the JavaScript in the script tags, so you'd normally put it in head. You have script tags. You drop it there. All we've done here is we've linked in-- so we've linked in a JavaScript file like this. And you've all done this, right? So when you were using jQuery and underscore.js in the last p-set, you don't have tons of code up in your script tags, up in your head. You could do that, but instead you're just linking it in. And you're linking it in just like you do with CSS. So it just makes it easier to read so your code isn't like 1,000 lines long with tons of functions that you might not be using. 

[01:12:52] Instead, you just link it in. It compartmentalizes it. It's like writing some header file, and then including that header file in C. Think of it just like this. So what does this do? Well, this is going to run. It's going to alert. So you're going to get a little pop up called hello world. Quick question, just sanity check, so you see here in the body, say body, HTML here. What comes first? Do I see body, HTML here, or do I see the alert first? 

[01:13:19] AUDIENCE: Alert. 

[01:13:20] DAVIN: Right. He says alert. Why? 

[01:13:22] AUDIENCE: Because you go from top to bottom. 

[01:13:24] DAVIN: Yes. Perfect. So he says, you go from top to bottom, which is absolutely correct. You're going to go from top to bottom. And in JavaScript, jQuery, you have a function that's like onload, or ready, and that says, OK, wait until all of this HTML has loaded. And then, call the JavaScript. Because we don't have that here, the very first thing that's going to happen is it's going to go from top to bottom. It's going to hit that JS call, it's going to alert. After that you click OK, that alert goes away. Then it's going to show you the body HTML here. Nice. 

[01:13:54] OK, so just real quick, writing in JavaScript is super quick. In order to declare a variable, var name. So in C, you have int i, you have to declare what kind of type it is. PHP, $. JavaScript, var. We talked about this. All right, let's go. 

[01:14:11] Loops, same thing. Same thing. Function declarations, so just like you've seen in C. The only thing different is so when you get to other programming languages, like when you take 51 next semester and you're doing with OCAML, you can deal with anonymous functions. So that's exactly what you have here. So you want to put in sum, some kind of sum value. But you might only be doing it one time. So you don't want to call it function sum, give it a function declaration. Instead, you just use it as an anonymous function. And you've seen this a lot. You'll see an example of this in a couple slides. Yeah, we'll see. GABE: Good question. When might you want to use an anonymous function here? Basically, when you want something, like an event, to happen. So when the mouse is clicked, for example, you want some function to be called. So you pass to the event handler, you pass to the event, kind of, the function that you want to be called. And what you're passing is like, at the end of the day, just a pointer to that instruction, to the function. So it's not like you're passing the entire code, just as a pointer to the function. And then, when somebody clicks the mouse, then that function gets called. 

[01:15:17] DAVIN: Arrays, so you have an array declaration. Then, an array to put things in. Real quick, what will this print out? What will the third element be? 

[01:15:31] AUDIENCE: "JS". 

[01:15:32] DAVIN: Right, it would be "JS." Wait, go back. What is the length? 

[01:15:37] AUDIENCE: Three. DAVIN: Three, right? Exactly what you think. OK, now go. Arrays, you can add things to them. So you can go beyond their initial bounds. Just something to keep in mind. PHP, JavaScript, they're a little bit more forgiving in terms of things like that. Objects, very much like structs in C, very much like associative arrays in PHP. You've all had experience with this. So JSON, when you're passing JSON back and forth in p-set eight, that's your object. 

[01:16:03] So yeah, example, real quick example. Here is an object. The way you reference this object, so just real quick, let's say I wanted to find out, OK, what is the course? And so the object name here is CS50. And then if I had an associative array, how would I do that? I'll be using a key, right? So I have the name of the array. I have bracket, quotes, key, end quotes, end bracket, and that will reference that element inside my associative array. How do I referenced course inside my object? Anybody know? 

[01:16:39] AUDIENCE: [INAUDIBLE]. 

[01:16:40] DAVIN: What's up? AUDIENCE: CS50.course. DAVIN: Right, yeah. So CS50.course. So the way you reference things inside a JSON object is with a dot. 

[01:16:48] AUDIENCE: You can also use array syntax. 

[01:16:53] DAVIN: OK, fine. 

[01:16:54] GABE: You can also use CS50 bracket, string, like quotation marks. AUDIENCE: I think it's identical to PHP. GABE: It's the same thing. DAVIN: Fine! But you will see this other places. Yeah, so keep going. This is what I just said. So into a JavaScript jQuery example. So this is my DOM, right? Real quick, so I have a head, hello world, body. I have a button. It says "push me," so I want to push it. And I want to do something when it's clicked. Right, next. 

[01:17:31] Right, so this is my JavaScript. So jQuery is just an easier way to write JavaScript. So this, and what I'm going to show you next, is going to be jQuery, are identical. So they will do the same things. Just jQuery tends to be a little easier. People tend to like it more. It has a lot of functionality. So people tend to use jQuery. You all used jQuery in the last p-set. So what will this do? What will this JavaScript-- so this is just plain JavaScript. What will this do? What will it do? 

[01:18:03] So first, you see window onload. Right? So we didn't see that before. So this is going to wait until the entire window loads. So it's going to wait until the HTML, all the images load before it does anything. So let's say our DOM has loaded. Everything's there. Then what's going to happen? Yeah? 

[01:18:19] AUDIENCE: Button appears. 

[01:18:22] DAVIN: The button's already there. Yeah, so the button's already there. But this is going to say, OK, if I click the button, so the button's already there, like that HTML tag. Wait, go back real quick. This tag right right here is going to be a button already. There's already a button. But then, the JavaScript tag, right here, it says, OK, I want to get element by ID, so search button just says, OK, I want to map this variable to that button. So that variable is just an easier way to access that button. And I say, OK, if I click that button, so if I click that element, and this element refers to the button, if I click it, then I want to call a function. Here is one of those anonymous functions we were talking about. 

[01:19:03] Just call some function. Inside that function, basically something we've seen a lot, alert. You click the search button. It's going to basically have a button. You click it. You get that alert. X out. That's it. Yeah? 

[01:19:16] AUDIENCE: So if you put the script [INAUDIBLE], script tag in your HTML? 

[01:19:21] DAVIN: You can put the script tag straight in the head because you have this onload. It's also that you have a click. So it's going to wait until you click for something. But onload is just to be safe, to make sure everything loads into your HTML beforehand. Yeah? You want to say something? 

[01:19:40] GABE: [INAUDIBLE]. DAVIN: Yeah. 

[01:19:42] AUDIENCE: So onload avoids defining the variable search button by just saying document.getElementByID search button dot [INAUDIBLE]. 

[01:19:49] DAVIN: Definitely, but then your string just gets huge. Exactly, so this is just to make it easier for you, yeah. Yes? 

[01:19:56] AUDIENCE: Where did we create window.onload? Or document.ready? 

[01:19:58] DAVIN: Yes, there is. Yes, there is, I checked. 

[01:20:02] GABE: Not for them to care about. 

[01:20:03] DAVIN: OK, so I'm going to tell you anyway. So basically, just in general, so window.onload waits until your DOM, all your HTML, loads. It waits until your images load. It waits until everything loads. document.ready, it just waits until your DOM loads. Once the HTML is all there, once your DOM is there, starts running. That's the only difference. 

[01:20:23] GABE: Quick sanity check here. So this can be seen kind of like a line of code, right? Because it's window.onload equals a bunch of stuff. When JavaScript reads this, true or false, the function gets executed. False. OK? What happens here, you're just passing this function as an anonymous functions to window.onload. And then when is it going to actually get executed? When the window loads. That's an event. So that's jus t thing we're talking about earlier, right? So when the event happens, the function happens. Same thing with the onclick. 

[01:20:59] DAVIN: OK, so somebody took away the document.ready. But this will be the exact same-- AUDIENCE: The dollar sign, that is a document.ready. That's a shortcut. 

[01:21:07] DAVIN: Oh, that is? OK, so this means document.ready, shortcut. But this is the same as window.onload except for that little difference I told you about. And this is jQuery. So this is the exact same thing-- this is JavaScript. This is just-- some people think of it as a more light weight, sleek version that has lots of functionality that you'll probably be using. So this does the exact same thing. 

[01:21:34] So things to kind of point out. So in the other example, we had document.getElementByID, so we had this long string that's going to get the element by whatever ID it has. That's replaced by this call right here. So you see the dollar sign, then you see quote, hashtag. Hashtag is always a selector. It says, OK, this has to do with an ID. What's the selector for a class? 

[01:21:56] AUDIENCE: Dot. 

[01:21:57] DAVIN: Dot, right. If you're just going to select a tag, what is it? It's just the tag, exactly. And you could use that here, as well. 

[01:22:05] GABE: And by tag, we mean like div, for example, or head. 

[01:22:08] DAVIN: Or body or p or anything like that, yeah. So here, OK, instead of saying document.getElementByID, this is just the exact same thing. Just in jQuery, it's shorter. So it's simpler. So then, no more onclick, just click. jQuery function, call this function. Alert is the exact same. So it's a little bit smaller, or little bit shorter, a little bit-- people think it's a little easier to write out, a little bit easier to understand. But this is jQuery. A lot of people get a little bit confused and worried and they think, OK, jQuery is different than JavaScript. I have to remember these two different things. It's not. I mean, it's different syntax. But jQuery is JavaScript. It's just a seemingly better version that might be easier to understand that people use. GABE: Yeah, to be honest, that dollar sign that you see in jQuery, that's just the name of a function that jQuery defines. It doesn't have anything special. Is It's just the name of a function, just like you could define dollar sign. 

[01:23:03] DAVIN: Yeah, so talked about this. Some useful things. I was looking back at the old quizzes. In the past couple quizzes, they've had to use things like this. So document.ready, so make sure everything's loaded before you start doing things. Select an ID, or select a class, it'd just be quote dot some class, end quote. Submit, so if you're submitting a form and call this function after the form submits. Value, so let's say I had a form submission, like a user name, an email, whatever. I had a text box. So I'm typing into that text box. Well, if you want to get the value out of that text box, you use dot val. And then, down here, dot HTML is the same is like document dot getElementByID dot innerHTML. So that's going to return you the HTML from that ID. Here, you just use some ID or whatever dot HTML. That'll get the HTML from that element. If you wanted to then change that HTML, you can pass it something. So you'd be like dot HTML, and then inside, quotes, new HTML or something. 

[01:24:05] GABE: OK, so AJAX. I really like to understand AJAX really well. So I want you guys to understand AJAX really well. Because if you do, you're pretty much going to understand everything that has to do with HTTP, PHP, JavaScript because it all comes together in AJAX. AJAX is not a language. AJAX is a technique. And it uses lots of different tools. AJAX stands for asynchronous JavaScript XML. So the method, the language, the data. 

[01:24:36] So the main language that we use in AJAX to trigger everything and to handle everything later on is JavaScript. That's why it relates very close to JavaScript. And then asynchronous is because we don't do it all at once when we're loading the page. This is the thing that we can do things kind of in parallel. The main idea behind AJAX is that you want it to get some specific information. For example, when you're typing new user name when you register a user name, my user name is abc123. And then, at the end of the form, you have to click Submit. And it had to go to the server, and then check if in the database, abc123 is already there. And if it's already there, it says, user name already in the database. And they, you have to fill out the entire form again. And it was really, really bad. 

[01:25:23] And then people say, OK, why can't we just do a small HTTP request to just check to see if this user is in the database before the user had to submit the entire form? So for example, when the user finishes typing abc123, let's just go to the server a little bit and just get a true or false from the server to see if that's a valid user name or not. OK, so that's one of the main uses of AJAX nowadays still. 

[01:25:49] DAVIN: So real quick, in an Ajax call in jQuery, you could signify that you want it to be synchronous. You shouldn't do this. But you can do that. And if you did that, what would happen? Well, for example, when you're getting news or whatever, your browser is just going to wait until that entire call is complete instead of letting you do other things right after you click it. 

[01:26:14] GABE: It's not passing anymore. Oh my god. Sorry! Yup. "In the past, the client needed to request the entire content of a website." That's what I said. It allows us to send additional GET or POST requests without having to reload our browser. So at the end of the day, we're actually making an HTTP requests here using JavaScript. Because before, we only used JavaScript to change the HTML that already came. And now, we can use it to interface with the web servers as well. The way this happens is we have the client. Davin is a client. And he has all the JavaScript running because HTML is dumb. JavaScript is smart. So davin Davin has his smart part and his dumb part. He's going to use his smart part now. He's going to use JavaScript to request, for example, whether abc123 is in the database or not. 

[01:27:04] So Davin, please, you just send me an HTTP request. Thank you. So he just sent an HTTP request. You see that? And that's just the same way that any HTTP request is sent. The browser, Google Chrome or something, is going to see that Davin's trying to send an HTTP request, going to help hm a little bit. And that's going to go all the way to the server. Now, the server is going to have PHP here, or any other language. Just like in a normal HTTP request. It's pretty much a normal HTTP request. 

[01:27:31] And then, the server is going to say, OK, Davin wants me to check whether this abc123 is in the database. Go talk to the model. The model says it's not. abc123 is a good user name. And then, the web server is going to use PHP to render some form of file. It could be literally just a file that contains "yes" in it, or "no, or something like that. It could be any file. 

[01:27:54] It could be like I'm going to send Davin a picture of a duck if it's in the database and send a picture of a hamster if it's not in the database. That would be kind of dumb, but it will work. OK, so I send a duck to Davin. Davin got a duck. And now, who is going to handle the duck? Davin's smart part again, so JavaScript, right? JavaScript sent the request, and JavaScript is going to receive the request and interpret it in some form. 

[01:28:22] And in this sense, it's going to say, OK, if duck then I'm good. If hamster, then I'm going to say, no, user name already exists in the database. But usually, you're not going to send a duck. You're going to send something slightly smarter. And what we use is XML. And more recently, we use JSON. JSON is just JavaScript Object Notation, which is basically you get an entire JavaScript object. And you put it in a file, just like that CS50 object that you guys saw. You put it in a file, and you send it over to Davin. 

[01:28:53] So in this case, I would make a JavaScript object and just say, user exists, yes. Or user exists, no. And send it back to him. And why JSON? Because the person who's receiving this is going to use JavaScript to handle the response. And JavaScript works so well because it's called JavaScript Object Notation. Right? So he can just call a function and get this nice object from the response. And then, he's going to know whether that user is in the database or not. 

[01:29:22] So you see, all of it coming together in the web server, and then there's one HTTP to request and one HTTP response and everything. So make sure you guys understand this AJAX call because it helps you understand all of the concepts we're talking about. 

[01:29:37] So here's an example of AJAX with jQuery. And here, we do with get JSON. So we're not trying to get an image of a cat here, or a duck. We're trying to get a JSON file. And then we wait until it's done, dot done. That means I'm waiting for the response. It might take a little while. Then, you see a little loading. If you want to do that in your website. So dot done, and then what happens when it's done? You pass in an anonymous function, just like we saw before. Because done is an event, just like clicking a mouse or whatever, for jQuery. So you pass in this function with data, text, status, and jqXHR. And basically, that's just some variables that you can use later on to have the status of the HTTP request, the data that it's going to send back to you. So then you can later on interpret it and do something meaningful with it. And if it fails, when might it fail? Well, when the HTTP request gives you a 500 or something like that. Then, it's going to tell you the status, what kind of failure that was, and all sorts of things. You have to make sure to handle both cases, otherwise the program goes crazy. 

[01:30:42] DAVIN: So yeah, this is exactly what you saw on your last p-set. The actual AJAX call is in the get JSON. That is the call. And then, dot done is like it checks if it's successful. If it is successful, you want to do something with the data. You get back from that JSON request data. That is what you get back. So if you remember from your p-set, a lot of you were like data bracket i or whatever, dot link or title. Whatever's coming back from that JSON, whatever the fields are in that JSON object, that's what you're getting back. Data is what you're getting back. Text status, just something that lets you know what happened. And then, the jqXHR, that's just the jQuery XML HTTP request. That's just like an object. And then fail, just like Gabe said. GABE: In our little example of abc123 just to check if that's in the database or not, the data would be something you would do, if data dot user name exists, which is what your PHP generated for you, if data dot user name exists, then I'm going to alert, user name already exists. Else, I'm just going to let the user proceed filling out the form. OK, security, cool. 

[01:31:50] DAVIN: Want me to? 

[01:31:52] GABE: I like this one. So something that looks familiar. We're almost done. So this is just the example you guys saw in class. You were using argv1 here. That's like a command line argument. And we're mem copying that into a buffer of size 12. What's the problem here? Buffer overflow! Because we have a buffer of size 12. argv1 might have a size of two billion. We don't do any boundary checking. So we might copy a lot of memory. And we'll be particularly bad about this. What could we do that's very, very mean in this case? Yes? AUDIENCE: Part of the two billion things contains executable code that returns [INAUDIBLE]. GABE: Exactly. So that's the kind of thing that people use to jailbreak an iPhone, for example. So that kind of thing. Because you can just make the device execute any code that you like. The fix, so the fix is easy. Just check for the bounds. You check for null because we always check for null when we're dealing with strings. And then, you take the string length before. And if the string length is a valid string length, which is within 0 and 12, then we're good. 

[01:33:03] DAVIN: If you don't check for null, real quick, what will happen? It'll seg fault. Why will it seg fault? Because you're calling strlen on null. GABE: Yeah. True or false, using one password is a good idea. 

[01:33:19] AUDIENCE: False. 

[01:33:20] GABE: False. Use many passwords, and big, long ones. Padlock icons ensure security. 

[01:33:26] AUDIENCE: False. 

[01:33:27] GABE: False. It doesn't mean anything. It's just an icon. SSL protects against a man in the middle attack. AUDIENCE: False. GABE: False. OK, so all those are false. Nice. [INAUDIBLE] Want to talk about this? Your turn. DAVIN: Types of attacks, man in the middle. What's a man in the middle attack? AUDIENCE: [INAUDIBLE]. DAVIN: If you send an HTTP request, they could do this, right? But if you're sending HTTPS, they probably won't be able to do this. There's lots of points along your connection. You have routers. You have DNS servers. If someone is able to physically see what you're sending, so someone is able to actually get between you, the client, and the server, and is able to see what you're sending, this is a man in the middle attack. So to see what you're trying to get from the server, or is able to see-- worse, you might be able to see cookies or something like that. 

[01:34:16] So for example, if you're not using SSL, he might be able to see your session ID cookies. And this is called session hijacking because he sees your ID cookies, and then he's able to go to that website and pretend to be you. Because just like in PHP, remember when we logged in, what do we do? We set session ID equal to ID. So that identifies you. That's why you can see your portfolio and not everybody else's portfolio. 

[01:34:38] Well, if I'm able to get that cookie, then I can log onto that page. And then, I can just see your stuff and start buying and selling stuff. So that's session hijacking. But you shouldn't be able to-- so you can use the man in the middle attack even if they're using SSL. But you shouldn't be able to. If they are using SSL, you can't session hijack. Why? Because it's all encrypted, right? if it's encrypted, and I'm still a man in the middle, I still get your data. That's fine. But it's encrypted. So I can't really use it. So that's two. 

[01:35:09] Real quick, cross site request forgery. That's just if there's a link and that link does something that you don't think it should do. So for example, if the link was going to buy stocks or sell stocks, and you didn't know that. You clicked on the link, sent a request, bought or sold something that you didn't mean to do. That's that. 

[01:35:25] Cross site scripting, so here, you're passing in via variable q, instead of passing in some kind of value, maybe q is like a name. So instead of passing q equals Davin or something like that, if you don't use HTML special chars, if you don't escape this to make sure it's OK, then I could pass in instead, let's say in here I'm saying print or something like that, then I could pass in here a script call. 

[01:35:51] So then, instead of just getting a variable, I would then execute this script call. So inside that script call, what does it do? Document dot location, that's going to change the location of the document. So I'm going to redirect to somewhere else. It's called bad guy in this example, very good. Couldn't think of the word. And then, what's even worse is that I'm going to then set cookie, which is some variable I have in this website. I'm going to set it equal to the document dot cookie. Therefore, I'm going to steal your cookie. And I'm going to redirect some information to a website that you shouldn't be accessing. And this all happens because you're not escaping what you've seen. Yeah? 

[01:36:29] AUDIENCE: So just to make that clear, it's vulnerable.com that is vulnerable to this. So that link can appear on any given page. Someone clicks on it, goes to vulnerable.com. You have a cookie to vulnerable.com. Let's say Facebook is vulnerable, so facebook.com. You have your Facebook cookie. What this is doing, you're going to facebook.com, it's immediately redirecting you to badguy.com, but including your cookie information. So it's a quick redirect, but your Facebook cookie is included with that redirect, and that's how they [INAUDIBLE]. GABE: Yeah, there's some very mean things that people can do if there's this. For example, if Facebook allowed everybody to change your user name, and they didn't do any sanity checks, so you could insert a JavaScript thing that changes your image to a hamster. And that inserts the same JavaScript into everybody who views your page. So everybody who views your page has the same thing in the user name. And because it's a virus, it spreads exponentially. DAVIN: We'll skip the last one, and then we're done. So this is just another example. So this is they're not escaping their SQL table. So you can drop it. So you want to escape things. That was the previous example with the cross site scripting. Sorry we ran a little bit late. Tomorrow, sorry! Tomorrow, we have office hours. So office hours in Cabbot 8:00 to 11:00. The office hours are strictly for quiz questions.