HANNAH BLUMBERG: Hi everyone. We're going to get started just a couple of minutes early since we have a whole lot of material to get through. I'm Hannah. I'm a TF. Maria is going to be joining us in just a couple minutes. She teaches section right before. I teach section right after, so we're going to keep it to the hour and a half. 

So as you'll see up here, we have quite a few topics we need to get through, so we'll be going a little bit fast. But if at any point we say something too quickly or you don't understand, feel free to interrupt with questions. We want to be able to make this a review session as useful to all of you as possible. Awesome. 

So let's jump right in with some topics that we actually very, very briefly covered for the quiz 0 in the quiz 0 review session. So starting with linked lists. So just make sure you have some basic knowledge about linked lists and are comfortable doing some of the basic operations. 

So just to review, linked lists are better than arrays because they can grow dynamically. So we have that huge advantage. We've seen them used in hash tables when we don't know exactly how many things we're going to want to insert into our data structure. Unfortunately, we have pieces of the linked list all over memory, so we won't necessarily be able to do constant time access to any element in the linked list. In order to find a particular element, we have to iterate all the way from the beginning. So keep in mind that most of the basic operations are omega of 1. So insert is just going to take 1. Delete is going to take n since we have to go find it from the list. And search could take, at worst, n. We can't do something like binary search on a linked list since we can't just randomly jump to the middle. Cool. Awesome. 

A little bit of stacks. This, again, came up on quiz 0, so you should be super comfortable with it. But for stacks, we ask you to remember a stack of trays. And it's going to be first in, last out. So we stack things up in the stack, and then if we're trying to take something off-- which we call popping off the stack-- we come off the top. And if we want to put something in the stack, we call it pushing. So it's always going to be growing up from the bottom like a stack of trays. Awesome. 

We've seen stacks implemented with both linked lists and arrays. If you're implementing with arrays, you want to make sure to keep track of both the size and the capacity. So size is going to be the current number of things in your stack, whereas capacity is the total number of things you can store in your stack. Cool. 

Very similarly, we have queues. In this case, instead of thinking about a stack of trays, think of a line. This is going to be first in, first out. So if you're lining up for something at the store, we hope that the person first in line is going to be helped first. 

Instead of saying push and pop like we do for stack, we just say enqueue and dequeue. And again, if you are implementing this with an array, we need to keep track of not only the size and capacity, but also the head, which is going to be the front of our queue. Cool. Any questions on any of that? Awesome. Moving right along. 

OK, hash tables. Here's where it starts to get really interesting. So a hash table is one implementation of an associative array. So basically what happened is we have all this input, and we give it to a hash function which says, OK, this is where in the hash table it belongs. 

So the simplest hash function that we've seen is just saying, OK, suppose we want to put strings in our hash table. And a really simple idea might be to say, OK, let's just sort by the first letter of the word. So you can see here, we take banana, we put it through a hash function, and it says, hey, that should go at index 1. 

So we can essentially think of a hash table as a bunch of different buckets. And each of those buckets is going to hold the head of a linked list. And in that linked list is where we can actually put different pieces of data. 

So diving a little bit more into a hash function, here's the example I just described where we just say, OK, take the first letter of the word and we're going to sort it into the buckets. So presumably, there'll be 26 buckets, one for each letter of the alphabet. Why isn't this a great hash function? What makes this non-ideal? Yeah. 

AUDIENCE: You're going to have collisions. 

HANNAH BLUMBERG: Yeah, exactly. You're going to have collisions. So that's one thing. And we'll talk about how we can fix collisions in just a second. Another problem with this particular hash function is that our different buckets are going to be of pretty drastically different sizes. 

We know that there's a whole lot more words that start with A than X, so we're going to have very unbalanced buckets in our hash table. Cool. So yeah, let's get back to the point of collisions. What do we do if there's a collision? 

We have a couple different options. So one, so suppose we're trying to put berry into our hash table. And we see, oh, we want to put it in index 1, but banana already lives there. What are we going to do? We have two main options. 

Number one is we can say, OK, there's no room in index 1, but let's just keep looking through until we can find another open spot. So we'll say, OK, let's put it in spot 3. That's one option. That's called linear probing. 

And a second option is saying, OK, well, let's just make each of these buckets be heads of linked lists. And it's OK if there's more than one thing in a bucket. We're just going to append it onto the front. So here you can see, OK, when we inserted berry, we just took banana, kind of pushed it over a little bit and threw a berry in there. And that's also totally fine. This is called separate chaining. You can think of this as kind of like an array of heads to linked lists. Any questions on hash tables, hash functions? Awesome. 

Trees and tries. So a tree is any sort of the data structure in which there's some sort of hierarchy or some sort of ranking to your different objects. And this will become super clear when we see an example. And we saw tries, along with hash tables, in pset5-- which, again, totally fair game for this quiz-- as another data structures that we can store different things. In the case of dictionary, we stored a bunch of words. So let's take a look at some trees. So this is an example of a tree. It has a kind of structure, that hierarchical structure, where you can see that this 1 node at the top has some sort of rank above 2 and 3, which are above 4, 5, and 6 and 7, which are above 8 and 9. So that's all we mean by a tree, so you can just kind of picture this in your head. 

Now, we have a couple of more specialized trees. So one example is a binary tree. And a binary tree is, again, just going to be a data structure with some sort of hierarchy, but each of the nodes can have at most two children. That's where the word binary comes from. So this is an example of a binary tree. So that's a smaller category of trees. 

Now let's get even more specific and talk about binary trees-- binary search trees, rather. So here the idea is not only does every node have at most two children, but all of the children to the left are going to be smaller and all of the children to the right are going to be bigger. So notice in just our binary tree, there's no relationship between the numbers. But in our binary search tree, we see, OK, here's 44. And every number to the left of 44 is smaller and everything to the right is bigger. 

And that holds at every level of the tree. So here, this is smaller than 22 and this is larger than 22. And that's binary search tree. Why do we think it's called a binary search tree? What algorithm does it remind you of? AUDIENCE: Binary search. HANNAH BLUMBERG: Binary search. Because if you're looking for a particular number in this tree, at every point, you can just knock off half of the tree, which is great. And so that's going to give us something that looks a lot like binary search. Any questions? All right, cool. 

All right, tries. Everyone's favorite. So this is the example that we've seen a bunch in class. And again, this is just another way that we can store data. In the case of dictionary, again, this is just going to be strings. So let's see what this actually looks like at a slightly lower level. 

So let's take a look at one node in a trie. And we see, OK, there's going to be a Boolean and a node, a pointer to a node. And we see that the Boolean is called is_word. So essentially, that's going to correspond to these little triangles which says, if you've gotten here, you've found a complete word. 

We know that "turing" over here is a complete word, whereas just T-U-R is not a word because we don't see that little delta. And that little delta, again, corresponds to this is_word, this Boolean is_word. And then we have an array of children. So at each level, you have a particular node, and that node points to an array of the entire alphabet. 

So you can see, again, in this picture-- I'm going to keep jumping back and forth-- that that array at the top has a bunch of different nodes coming off of it. It has 26, or 27 if you want to include an extra character. And this gives us a way to store our data in a way that can be looked on that you can look up super fast. What is the lookup time for a trie? 

AUDIENCE: [INAUDIBLE]. 

HANNAH BLUMBERG: Yeah. In theory, it's constant time. It's only going to be the size of the word that you want to look up. Even if we add a zillion more words to our trie, it's not going to take us any longer to determine if a given word is in the trie. So that's really nice. 

AUDIENCE: Did you just initialize that array? You missed a point or two. Can you just talk about that for a second? 

HANNAH BLUMBERG: Sure, absolutely. Good question. The question was, we have an array that's going to have node star as opposed to just node, right? Cool. So here what we're saying is our array is just going to be pointers to other arrays. So it's essentially-- it kind of feels like a linked list in this way where each of these children just point to the next node. 

And the way that we actually determine, hey, OK, we've iterated through an entire word, is this word in the dictionary, we just check this is_word. Great question. Yeah. AUDIENCE: OK. So what was the runtime for the trie? 

HANNAH BLUMBERG: Sure. So the runtime for a trie for lookup is going to be constant time. So it's just going to be the number of letters in the word. It's not dependent on the size of the dictionary or the size of the data structure. So here's a slightly simpler example. 

In this case, you can see that the word bat is in the dictionary and you have zoom, but you don't have something like zoo. How would we make zoo? How do we add zoo to our dictionary, to our trie? Yeah. 

AUDIENCE: Make is_word true for the [INAUDIBLE]. HANNAH BLUMBERG: Good. So we'd say Z-O-O, and then we'd want to check off that box as well. Great. Let's compare very briefly tries versus hash tables. Tries are really great because, as we said, they provide constant-time lookup. But the huge disadvantage is they're humongous. You can get the sense, even by looking at it, that it's going to take a huge amount of memory. So they're going to be much bigger than hash tables, but they're going to give us much faster lookup times. So that's kind of your tradeoff, what you care about, whether it's speed or memory. Any questions on any of that, all of the C data structures. Beautiful. OK. We're going to move on to a little bit of web development with Maria. MARIA ZLATKOVA: Lovely. OK. 

HANNAH BLUMBERG: You can use my laptop. 

MARIA ZLATKOVA: Nice. OK, cool. As we move now to web development, we talked a little about changing permissions of files and directories so that they can be accessible to other users, to the world, and so that we can see how basically we can convey them when we develop things like websites that we've mostly been doing. 

So we saw the chmod command, which is change mode, basically. That's a Linux command and it changes access permissions of file system objects. And a file system object is just a directory, a file, anything that you can change the permissions of. 

So to see the file permissions, we type the command ls, list, -l. And when we type that, we usually see some permissions that look sort of like this in front of a directory name. So d refers to directory. And then we have three triads that basically refer to the permissions of either a user, a group, or the world. 

The types of permissions that we can have for these three groups of people are either r for read, w for write, and x for execute. And we can have those for the group and world as well. The tricky thing is that sometimes when we type the chmod command, we would type some number that consisted of three bits. So we could do like 777 and that basically referred to the added value of each of these triads because r would refer to 4, w would refer to 2, and x would refer to 1, so when added up, each of the numbers would come down to a cumulative number to a cumulative value between 0 and 7. So we could also have 0 for no permissions at all. And that would basically give us the permissions for either the user, the group, or the world. Any questions on this so far? 

AUDIENCE: You said read was 4? MARIA ZLATKOVA: Yes. AUDIENCE: [INAUDIBLE]. HANNAH BLUMBERG: Yup. AUDIENCE: And then by adding all those others would indicate your number. MARIA ZLATKOVA: Yeah. Yeah. These are great questions. Lovely. Next, we jumped into HTML and a bit more about web development. So HTML just means HyperText Markup Language. And that is the markup language that is a standard that it's used to create web pages. 

It's called a markup language because it's not actually compiled. It doesn't say how some code should be executed or anything like that. It just delineates and describes how a web page should be set up with each of its elements and how they should look to the user. 

Some of the HTML tags that we went over are the following. All of our HTML documents started with the DOCTYPE html. Then we always have the html tag. We have a head and a body. And it's important that HTML has this sort of nested structure because it's very clear. And then it becomes very clear when we need to open and actually close tags. And we always need to close tags that we've opened. 

And here we have some of the types of things ahead that we want to have. So we have, for example, the title of CS50. And then we actually can link a style sheet that defines how we style our website. That is CSS. We're going to go over it in the next couple of slides as well. 

Within the body, we set some classes and IDs. And as a reminder, again, IDs are unique and classes can be assigned to multiple items. And that just means that we can use classes and IDs within other structures-- so, for example, within CSS files or style sheets-- to refer to specific elements and basically say that we want to style or design some element in some particular way. And we refer to them by their IDs and classes. And we can also refer to different things by tags as well, but IDs and classes just give us some versatility and what specifically we want to refer to. 

So just an example. We can, again, within a CSS file where we want to define some style-- so colors, fonts, and stuff like that-- we can define the style for a body. So that would define it for the whole body tag. But then we can also define a style for a #title. And again, the hashtag refers to our ID and the dot refers to our class. 

And then for the .info, we can also set some attributes. And again, when we go back, we had our class called info and our ID title. And we can see that we refer to them by #title and .info. AUDIENCE: Would you say hashtag [? adopt me? ?] MARIA ZLATKOVA: Sorry? AUDIENCE: Would you say hashtag [? adopt me? ?] MARIA ZLATKOVA: Hashtag means ID, so #title refers to whatever elements have this ID called title. And then the dot refers to a class. So .info refers to this element because it has the class info. Yup. 

AUDIENCE: Why do you distinguish them in the HTML? Why do you say certain things are IDs and certain things are class? MARIA ZLATKOVA: That's just up to you-- HANNAH BLUMBERG: Repeat the question. MARIA ZLATKOVA: Oh, sorry. Why do we distinguish certain elements as IDs and other elements as classes? That's just because it's really often a design choice. It gives you a lot of versatility in being able to say I want this specific item to have this ID because they want to do a lot of things with it, and I only want to define a style, certain style or color whatever for that item. And the way to do that is just giving it an ID. 

And then if I want to have a couple of different items having that, instead of going and setting their-- instead of doing it by tag because the tag would set the cell for the whole tag for every time that tag is used, you can set a class to multiple items. And then just access that class and say I want to style this class that way. 

And again, the class can be multiple different items and the ID has to be unique. Great questions. Any other questions? OK, awesome. Again, this is how these selectors are referenced in CSS, with hashtag, with dot, or without anything for assigning the style of some tag, like body. And here we have the general syntax of how this is done. 

To repeat some best practices for HTML and CSS, we need to, again, close all the HTML tags that we open. And what we recommended you do for your final projects, as well as for CS50 Finance, is to make sure that all of your HTML validates. And that's done with the W3 Validator. 

And then what we did and what we recommend doing is separating style, so CSS from markup HTML. So anything that relates to how your page is going to visually look and how it's going to be modified should go into a CSS document. And then your markup saying how things are in relation to each other is HTML, and that should go inside of your HTML documents. Any questions? Mhm. 

AUDIENCE: What exactly is going on with the page validation when we're validating the HTML that [INAUDIBLE] created? 

MARIA ZLATKOVA: So what-- think you. So what exactly is going on with page validation and why do we need to do that? Basically, we need to do that because a lot of times, your browser, if you don't close a tag or something like that, your browser is still going to render a page and might still work, but it's best practice to make sure that you've, again, closed all your tags, that all your elements are the way that they should be, and basically that it's by the conventions that are preset. 

It's, again, just a thing that you should be learning to be doing, as opposed to having sloppier code and stuff like that. Yeah. Oh, sorry. I thought you were raising your hand. AUDIENCE: No, I was just [INAUDIBLE]. 

MARIA ZLATKOVA: OK. 

AUDIENCE: Thank you. 

MARIA ZLATKOVA: Of course, thank you. So again, going on into how information is transferred and communication models to transfer information. TCP/IP. TCP just means Transmission Control Protocol and IP refers to Internet Protocol. And that just refers to the way data is delivered. 

If we have some data that needs to delivered to you-- so you make a request for a certain server. For example, when we try to access cs50.net, we make a request to the CS50 server and we see that we want to get this sort of information. And then are based on this protocol for how this information is delivered, the server gives information back to us, the client. And then we're able to view the information for the page and then use it. 

So then Hypertext Transfer Protocol is just another protocol or set of conventions that defines how the web browser and the web server should communicate. And putting this all together, HTTP, again, just defines how this hypertext defined by the HTML that we've been working it, how it should be delivered to you and how that data that is delivered to you gets to you. 

And that's why, if you guys remember from a class, we had a lot of requests and we had a lot of syntax for these requests that we're going to go over right now. So again, when we send a request to a server, we have to define a couple of things. So we need to find the type of request that we're setting. And again, we have, for example, GET is one type of method that we have in our request. 

And then HTTP/1.1 is just the protocol that we're using currently. Most of the time, that's going to the protocol that we're using. So if you have a question like that on your quiz. That's the conventions that we have so far. 

Backslash refers to what sort of things we're requesting. Then, our host is, for example, in this case, we're trying to go to google.com. So this is the value for a host. This is a type of request that could be sent. 

And then a type of response that could be sent, again, based on this protocol, is again, HTTP/1.1. So that's the HTTP version again. 200 OK is just the status code. And that OK is just a phrase based on that status code. 

And then the Content-Type refers to the type that is returned to you that is for that web page that you receive and that your browser can render afterwards. And that is text/html. 

AUDIENCE: What does 1.1 mean? 

MARIA ZLATKOVA: That's just the version of-- oh, what does 1.1 mean? That is just the version, the HTTP version of a protocol that we're using. Great question. Other questions? 

AUDIENCE: Could you sum up Content-Type real quick? 

MARIA ZLATKOVA: So that is what the server. the type of information-- what is content type was the questions. So that was the type of information that you get back from the server, the type of data that the browser can then render that you're using. AUDIENCE: Is that what this protocol is telling you to do? MARIA ZLATKOVA: Sorry? AUDIENCE: Is that what the protocol say? MARIA ZLATKOVA: The protocol-- AUDIENCE: --what the Content-Type is or what-- MARIA ZLATKOVA: The protocol is based on-- what is the protocol telling you? That's just the way that this information was delivered to you based on what sort of protocol was this information got delivered back to you. Does that make sense sort of? HANNAH BLUMBERG: You can think of protocol as a-- I think Professor Malan described it in class as kind of like a-- it's like the equivalent of human handshaking. Say, like, hey, I'm a request and I know how to handle HTTP of version 1.1. And then the server says, oh, OK, I-- and both exist. I also know how to deal with HTTP/1.1. And I'm going to give you back some content. In this case, it's going to be of type text/html. So it's kind of just a way of them for communicating-- 

MARIA ZLATKOVA: It's just confirming that you're both following the same protocol and that both the client and the server-- so your browser and the server-- sort of know what you're talking about and have the convention for passing in data. 

AUDIENCE: So the Content-Type part-- the Content-Type text/html-- that's a separate part of the same message? Or is it part of let's say, 200? Does 200 tell them that or is-- 

MARIA ZLATKOVA: 200 says it all went OK. And then content type is sort of a separate part of the same message, and saying the thing that I returned has this type of text/html. It's just giving more information. Have anything to add? OK. 

Any other questions on this? Awesome. So some other HTTP statuses that we could get in addition to 200 OK, ones that we've seen maybe possibly a lot are 403 and 404. So 404, if you were trying to access something that doesn't exist. So for example, in your CS50 Finance psets, if you had been rendering quote.html and you didn't have that file, but instead you had quote.php, that would result in a 404 Not Found because the file might not exist. 

For a 403 forbidden, that refers to the permissions. So if some file is not readable by the world, you might get a 403 returned. Some others that you might get-- 301, Moved Permanently; 302, Found; 304, Modified; 400, Bad Request; and then Internal Server Error for 500 and 503, Service Unavailable. Yes. 

AUDIENCE: Will we expected to memorize all those statuses? MARIA ZLATKOVA: I would have them on your cheat sheet. [LAUGHTER] AUDIENCE: Are we expected to know what triggers each one? MARIA ZLATKOVA: Are they? HANNAH BLUMBERG: For ones that we've run into-- so the question was-- MARIA ZLATKOVA: Are they expected to know what each one of these status codes might be triggered by? So for the ones that we've used and ran into, I would say, yes. So we've definitely seen 200 OK and lectured it in psets. We've seen 403, 404. For other ones? 

HANNAH BLUMBERG: I would say 500 seems fair game. 

MARIA ZLATKOVA: 500, yeah. 

HANNAH BLUMBERG: Yeah. Just have a general sense of what causes them. And also just by these names, you can kind of like make an educated guess as to what actually caused them. For example, move permanently, probably the file was moved permanently. 

AUDIENCE: But on a previous exam, there was a so how do you expect us to answer that? 

HANNAH BLUMBERG: That was worth zero points. The question on 418 on the teapot is technically a HTTP status, but it was worth zero points. Obviously, you're not expected to know them. 

AUDIENCE: Is it a real one? 

HANNAH BLUMBERG: It is a real one, but it doesn't mean anything. It's just a joke. Internet people are funny. 

MARIA ZLATKOVA: Great questions, guys. Any other questions? 

AUDIENCE: What is internal server error? MARIA ZLATKOVA: Internal server error just means that you have been unable to communicate with the server for some reason. So it's not necessarily something that has to do with the client or something like that. I don't know of any specific example that we've gone over to explain, but yeah. 

HANNAH BLUMBERG: Sure. So for example, like let's say you were working on mashup and a Google server went down for some reason, a power outage, let's say. That would be an internal server error or some sort of-- like you wouldn't get a response back. 

MARIA ZLATKOVA: Yeah. It's just when you're unable to communicate with the server for some reason because of it going down or some other reason. So jumping into PHP. PHP, unlike HTML, is a programming language. And we started using it because it's very useful for web development. 

We first used it in CS50 Finance. And it basically helps us bring together this markup, the design, and how we actually use information to display things on a web page. So PHP itself means PHP Hypertext Preprocessor, so it's a recursive backnorym by itself. And opening tags for PHP we the left and right arrows with the question marks and php. 

So we've already seen a bunch of it. Now, we're just going to go over some of the basic things about it. So with PHP, the variable names start with dollar sign. We don't specify, again, a variable type anymore. Just like we did with C, we don't need to do that. 

We can do a bunch of different stuff with variables. We can put them together by concatenating them with the dot notation, which we could not do in C again. Again, we have a bit more versatility with PHP in terms of variables. Again, we don't have a main function. 

And PHP is interpreted as opposed to compiled, So just how we did make for C files, we don't have to do that for PHP. But rather, the way that the language is run by itself, it is interpreted. And then loosely typed just means that we don't have to specify a variable type and the variable types are understood at runtime. 

AUDIENCE: But what did you mean by dot concatenation? MARIA ZLATKOVA: Sure. When we want to put things together-- so if we had some variable that had the value of 3 and we had another variable that had the value of string, we could put the variables together by putting a dot in between them and concatenating them. Or we could create a variable called name and put it together by concatenating two strings. 

So if we had a string in double quotes and we put a dot after it, and then we had another string, that would create a string altogether. 

AUDIENCE: OK. MARIA LATVIA: Was that clear? AUDIENCE: Yeah. MARIA ZLATKOVA: OK. Yes. 

AUDIENCE: When you say interpreted rather than compiled, are you talking about you don't need to be as specific when it comes to PHP versus C? MARIA ZLATKOVA: When we say interpreted as opposed to compiled, what do we mean? So that means that we don't need executable files to run PHP. It means that it runs as it goes. Does that make sense? A bit more. HANNAH BLUMBERG: So you can think of an interpreter as another program that is responsible for going line by line through PHP and actually executing it, as opposed to compiling it all down to binary. It doesn't actually mean anything about how specific we need to be. We still need to be precise, and don't forget your semicolon, and make sure you have your dollar sign, and things like that. Good question. 

MARIA ZLATKOVA: Yeah. So line by line, as opposed to with C files, we have to make the whole final before we can actually run it. That's the main difference. But again, we can't really be less specific. So arrays in PHP represent actually an ordered map. 

So arrays associate values to keys. The two ways to declare an array, based on this syntax, we can be more explicit in saying we have an array and we have this key1 that maps to this value1, key2 that maps value2. Or we can just create an array that contains the values itself and then the keys are understood in a way. Any questions on this? 

AUDIENCE: What would the keys be in the second example? 0, 1, 2, 3? 

MARIA ZLATKOVA: For example, it's just the keys in this don't necessarily make a difference. They just define how you can use the values inside of it. So if we had a foreach loop in PHP that would allow us to go through all the values, we can go through all the values, even if we had or hadn't defined a specific key within the site's previous syntax. 

So even with this sort of array, we could still have a foreach loop that goes through each of the values in the key in the array. So the syntax of a foreach loop, we start with an array. This $arr variable is our actual array that we defined in the previous slide as value that literally goes through each of the values, regardless of whether we had a key or not. And then we can do something with the value inside of the foreach loop. So again, if we had an array like this here created-- so we have the key of foo and value of bar, the key of baz and value of qux-- we can have a foreach loop that goes through array as key value and then do something with the key and/or value. But we don't necessarily always have to have a foreach loops that goes through array as key map to value. We can go through the foreach loop array as value. 

HANNAH BLUMBERG: And I think to-- was your question, what is the implicit index? AUDIENCE: Kinda. MARIA ZLATKOVA: Oh. HANNAH BLUMBERG: Yeah, yeah. So basically, if you don't specify a key, it's going to be 01. 

MARIA ZLATKOVA: Yeah. Just like with C, it's zero indexed if you don't specify a key. AUDIENCE: Sorry. Could you try speaking a little bit louder? I'm having a little bit of trouble hearing everything. 

MARIA ZLATKOVA: I'm so sorry. Yeah, of course. So do you want to me to go over this again? Or is this-- AUDIENCE: So on the previous slide-- if you could just go back for one second. MARIA ZLATKOVA: Of course, sorry. AUDIENCE: So the second array here doesn't seem to have a value to key, sort of [? causation. ?] MARIA ZLATKOVA: Right, right. AUDIENCE: So how does that work when you say it's all or none. To me, that looks like a [? foo ?] already. 

MARIA ZLATKOVA: Yeah, yeah. So again, this is an ordered map in this sense that there are understood, for example, the indexes here can be understood as 0, 1, 2, 3. Again, that's having those indexes is our equivalent of having keys mapped onto values. So if our key was 0-- sorry. 

HANNAH BLUMBERG: No, there's chalk up here. It's actually really nice. 

MARIA ZLATKOVA: That's great. OK. So again, $arr 0 would be the key for the value 1. 0 would be the key for the value 1. AUDIENCE: I'm sorry. It's invisible. 

HANNAH BLUMBERG: All right, nevermind. Chalk was a bad idea. I take it back. You can think of the keys as 0 maps to the value 1. MARIA ZLATKOVA: Yeah. So this is 0, this is 1, 2, 3. These can be your keys. You can think of them as-- yeah. So instead of having explicit keys, they're sort of understood as being the indexes starting at 0. The chalk didn't help. Yeah. 

AUDIENCE: For the foreach loop, if we wanted to view the as value, it would just automatically index to 0? MARIA ZLATKOVA: Yeah. It would go through each of the values. AUDIENCE: [INAUDIBLE] as 0 or would that just do 0? 

MARIA ZLATKOVA: You would have to say as dollar sign and then some variable name, value. AUDIENCE: [INAUDIBLE]. MARIA ZLATKOVA: Sorry? AUDIENCE: Sorry, I'm just trying to remember. How would you do that if you can do it automatically indexing is just 0 of? 

MARIA ZLATKOVA: So how would you do that if you didn't have specific key names? 

AUDIENCE: Yeah. 

MARIA ZLATKOVA: You would just define-- just say yourself as some name. So in your psets, you guys might remember foreach $row as $rows, we created ourself this $row saying we want to go through row as $rows. Even though we didn't have this explicit $rows defined, we could just go and say this can be our key, and just go through each of the values. 

AUDIENCE: So is value a new variable we're creating to store [INAUDIBLE]? 

MARIA ZLATKOVA: So it's not inherently a new variable. It's a variable that refers to the inside of the array to each of them. HANNAH BLUMBERG: It's a new variable name. MARIA ZLATKOVA: Yeah, it's a new variable name, but it's not inherently-- yeah. It's just a new variable that you can do that. So just how do we did $row as $rows, rows was a new variable name that we could create in our foreach loop. It doesn't have to preexist before that. 

AUDIENCE: Could you go through the logic for each, using the example there? MARIA ZLATKOVA: Mhm. Oh, sorry. Here's the example. Sure. So for each array-- so that means go to this array as key value-- that's going to go through this array and first go and get foo, the key foo and the value bar. And then on the second iteration of the for loop, it's going to go through and take the key baz and the value qux. And then you can do something with either of them or both of them. 

AUDIENCE: So the idea behind having a key point to the value, what do you end up accessing? 

MARIA ZLATKOVA: What is the idea of having a key pointing to value? It's just another convention, another way of going through the array and being able to access either the key or the value or both and use them. 

AUDIENCE: What's the role for the order that the foreach runs in? So if we were to add elements to the array later, would those be the first ones called in the foreach array, or would it be later on? 

MARIA ZLATKOVA: So what is the order that the foreach loop goes through an array in? It goes through the first element to the last element, to the last added element. If you add elements later on, they would be accessed-- the first elements would be accessed as the first elements of the array, and then you'd go through each of the elements as sort of an ordered-- not an ordered, but the way that they have been put into the array. 

AUDIENCE: So new elements are added later on? So they're added-- they'll be the last ones in the [? iteration. ?] 

MARIA ZLATKOVA: New elements can-- basically, when new elements are added, are they added to the end of the array? 

AUDIENCE: Yeah. MARIA ZLATKOVA: I believe so. Yes. And then with your foreach loop, after you've added new elements and you go through them, the new elements would be accessed-- the new element, if it's added last, it would be accessed last. 

AUDIENCE: Can you just give an example of something that would [INAUDIBLE] with something with value like [INAUDIBLE] or value, like how you'd format that? 

MARIA ZLATKOVA: Sure. Can I give an example of what we would do with the value? So what you guys might be familiar with is that we've gone through an array and basically printed each of the elements, for example, as part of an ordered list or something that. Does that make sense or do we want to-- AUDIENCE: Can we print these values out? MARIA ZLATKOVA: Yeah, we could print and then basically $value because at that specific value, we would be printing the value inside of it. So if we were at our first iteration of it and we printed $value, we would be printing bar. 

AUDIENCE: Are there are also for loops in PHP or just foreach loops? 

MARIA ZLATKOVA: There's also for loops in PHP. And their logic is mostly the same as what you've been used to. AUDIENCE: So its value is null. MARIA ZLATKOVA: It's like the same. Yeah. AUDIENCE: I'm just going to ask. So when you declare an array, you don't need to tell what size it's going to be, which means that you can just add and take away elements [INAUDIBLE]. MARIA ZLATKOVA: Yup. Yup. Exactly. When we declare an array, we don't need to say what size it is, so we can just add elements onto it later as well. More questions? So bringing PHP and HTML together, what we have seen-- well, for example, in this example, we have an HTML form that has an input field. 

And the input field is just name and then it has a Submit button. And when you press the Submit button, in our hello.php file, because the method for the form is get, we can access whatever is at name by this get global variable that is-- the syntax for it is $_GET. And then we can access whatever the user input inside of that form for name by specifying the name of that field. 

Any other questions or any questions on this specific example? 

AUDIENCE: Where is the PHP? MARIA ZLATKOVA: Here. So this is our opening tag for the PHP. 

AUDIENCE: Oh, right. 

MARIA ZLATKOVA: Yes. 

HANNAH BLUMBERG: The ?= is shorthand for this is PHP and just echo. AUDIENCE: Oh. MARIA ZLATKOVA: Yeah, sorry. I should have made that clear. 

HANNAH BLUMBERG: Print. MARIA ZLATKOVA: It's just the function that allows us to print something. Great question. So going-- yes. 

AUDIENCE: Is there going to be quite a bit of hand coding of PHP and HTML on quiz 1? MARIA ZLATKOVA: There can be a fair amount of interpretation of PHP and HTML, not necessarily like a huge amount of coding, though you might have to write a foreach loop, though, a for loop. Any of the loops that we cover here is fair game. And that's mostly it. HANNAH BLUMBERG: I would be prepared. In the same way that we asked you to write a bunch of C functions on quiz 0, I would be prepared to do the same in PHP and JavaScript. MARIA ZLATKOVA: Yeah. HANNAH BLUMBERG: I would say a little-- like we're not going to make you write a huge HTML page just because that's a little bit tedious, but you might have parts. That's totally fair game. Like small HTML page, totally fair. AUDIENCE: OK. How about in JavaScript as well? HANNAH BLUMBERG: Yeah. JavaScript's fair game. 

MARIA ZLATKOVA: Yeah. That's completely fair game. HANNAH BLUMBERG: We'll get to that in like 10 minutes. 

MARIA ZLATKOVA: SQL, again, Structured Query Language. It basically allows us to manage data in a relational database management system. That just basically means that we have somewhere to store some data that we might want to use in a website or in some other form. And then we have queries to get information from our database, or to insert information in them. A lot of the common ones-- UPDATE, INSERT, SELECT, and DELETE. 

So for UPDATE, this is the syntax for updating data in a database. Updating this table called table by saying SET, we can set some values in all rows to equal something else. So we can also specify some specific entries that we want to modify and that can be using WHERE. And we can specify that we only want to modify some rows where the house for, if we had a table of students and all the students had house, so we would only modify some values where a house equals Currier, for example. 

For INSERT, we can insert certain values into a table. So INSERT INTO table, and then the values, and then in parentheses, we specify which values you want to insert. So INSERT INTO table, col1 and col2, the value is val1 and val2. So this inserts basically a new row into a table containing the values 1 and 2 under the columns 1 and 2. 

And then we're going to go over a quick example of how this looks like in our database a little bit. But this final query that I think we're going to go over, SELECT, it just allows us to select data from a table to possibly use it afterwards. And the way we do this is we just store it in some variable. And then we can possibly use it again. 

So SELECT star means select all. That's just a shorthand for selecting all. FROM table WHERE, we are looking for some specific conditions, so where column equals something, for example. If we just wanted to select all from table, this just selects all columns and all rows from a table. 

And then DELETE FROM table WHERE col equals something, this just deletes some row from our table where we have some specific conditions. In this case, the conditions are column equals something. So just a quick example of this. If we have this table right here and we insert it into a table, these values, that would insert a new row. And if we had auto-increment, this would just increment our ID from 0 to 1 to 2. 

If we selected all from students, it just returns all fields and all rows. Where year is greater than or equal to 2016, that would just return Hannah and myself. And then if we just selected year id and year FROM students where the house is Cabot House, that would, again, return Hannah and myself. 

Then if we deleted from students where name is equal to Rob, that would delete the whole row. And then if we set the name, UPDATE students SET name equals to Daven WHERE house is equal Cabot House, that's going to go to those rows and then update the name. 

And then a few SQL data types are CHAR, VARCHAR, INT, and FLOAT. These are fair game. I would go over again and make sure you know and have them on your cheat sheet, what each of those characters have been used for, what you used them on your psets, and make sure you're familiar and comfortable with having to choose from different data types in your pset. Yes. 

AUDIENCE: What was that table stored? Yeah, where is this table stored? MARIA ZLATKOVA: Well, right now, it's not stored. Anyway, where is this table stored? But it can be stored in a SQL database. 

AUDIENCE: And where is the SQL database? In the computer, online somewhere, the server? 

MARIA ZLATKOVA: It can be a number of different things. 

HANNAH BLUMBERG: We've interfaced with SQL tables mostly with phpMyAdmin. So we could ask a server to store them for us. We could store them on our own computer. 

MARIA ZLATKOVA: It just depends on how you want to do it for yourself. But we have been storing them, as Hannah mentioned, on phpMyAdmin, which is online. And then the way we use PHP and SQL, we store it into some variable what we've queried for. 

So if we SELECT all FROM history where user_id equals the SESSION id, that would select all the rows for the specific person who is logged in from the history table and sort them into rows. A cool thing to know is that CS50's query function protects against SQL injection tags. That just means that it makes sure the input that is entered is correct and that the person who is entering the input is not trying to input some malicious code to either drop our tables or delete everything inside of our database. 

A quick overview of the Model View Controller model, it's just a way of organizing and thinking about code. It's again, a design paradigm. What that means is that we can-- and it's good practice to separate different parts of our code and what they control into these three paradigms. 

So our view is most often our templates, our layout, the way that we set how our code looks. That's mostly our CSS files and the way that we defined the design of our code, basically. Our controller is mostly what we've been doing with PHP files. So again, working with the information that we have and defining how that information is used, and then passing that information either onto the view or the model. And the model, the way that we've been using is has been our database, so where our information is stored so it has somewhere to live in, and any of the code that relates to the way that we get that information or the way that we update that information. 

So in the MVC model, HTTP requests are sent to a web server. Then, the controller interprets the request from the user and then validates the user input. It's optional that we have the controller communicate with a model, so something like our database or some other functionality that relays information. And then finally, the controller passes information onto the view so that it can be rendered and that it can become visible to any person accessing the web page. 

Any questions? Awesome. So again, the model, its function, again, is persistent storage of information, managing and organizing data. And what we've seen so far is the MySQL database and any data files that may use. 

View, presentation of information to the user, the UI, or user interface. And the example of this is HTML. And then we might have minimal PHP. So a for loop that iterates over data that are printed out is part of the view, as opposed to the controller. And then a lot of our PHP files fall into the controller category. It just handles user requests and gets information from the model. 

Jumping into the Document Object Model, this just refers to the way HTML documents are organized. And they're organized into a tree structure that has a hierarchy. So if we have access to [INAUDIBLE] representation of the document, we can work with the document, like we manipulate objects basically. 

And to make this a little bit clearer, when we have a lot of our different tags respond to different routes in our tree. And then for this example, we have the starting document node. We have, then, our HTML node that splits into head and body. Head has title and then title contains hello, world. And our body just contains hello, world as well. 

So any questions on any of the things that we covered so far? And if not, Hannah will take over with JavaScript. Awesome. 

HANNAH BLUMBERG: OK, cool. If anything comes up with PHP or HTML, or any of the stuff Maria covered, we can always pause. We're doing better on time again, so awesome. And just to go back really quickly to this, if you look at every past year's exam, this comes up either-- here is some HTML, make this diagram. Or here's this diagram, make some HTML, so definitely practice that. And then that's one guaranteed question that you can get right. Cool. So let's talk about JavaScript and how it's a little bit different from languages like PHP and C, the two languages we saw beforehand. So number one, it's loosely typed. That is like PHP, but unlike C. 

It's an interpreted language. Again, that's like PHP, unlike C. And this is going to allow us to use-- it works really nicely with web pages. It's going to allow us to manipulate the content and how it looks and what it does. 

We're going to see a little bit of Ajax. It allows us to communicate asynchronously with different servers and get information. And this is the thing that really separates JavaScript from PHP and C is that it is client-side. Both PHP and C are typically server-side. 

For the most part and almost entirely what we've seen, at least in this class, JavaScript acts on client-side, which means that the browser is actually responsible for running it. And that means that we don't need to interact with the server. So it means it can be a lot faster because it's actually just it's Chrome, it's Safari, it's Firefox, whatever you use actually running your JavaScript. 

AUDIENCE: What does asynchronous mean? 

HANNAH BLUMBERG: Ah, what does asynchronously mean? Great question. Asynchronously means-- well, the content in which we use it is, OK, we are creating a web page and we need to get some information. So with the example of mashup, some information that we might want is article titles. Now, we could-- one option is to do it synchronously and that means let's stop, go get the article, get the article back, and then render, but that would be really slow. That would be a bad user experience because you would just be sitting there waiting for something to respond. 

Asynchronously means we'll continue going about our business, rendering the page, and we'll send off a request that's kind of going to happen in the background. I think we use the example in lecture of calling Rob and saying, hey, can you look this up for me and get back to me, as opposed to just me waiting on the phone. So asynchronously means it happens in the background away from us in parallel. 

Great question. Anything else? Great. We'll jump a lot more into asynchronous requests with Ajax. 

AUDIENCE: Does JavaScript-- where does it fall with model-view-controller? HANNAH BLUMBERG: Great question. Where does JavaScript fall with model-view-controller? Hm. I guess it can fall-- so we don't usually like to squish it into that paradigm, but I guess I would say, OK, so JavaScript actually is going to allow us to gather data, interpret data, actually do meaningful things with the data. In that way, it's very control-like. 

But it's also going to allow us to display things and print things. In that way, it's very view-like. Yeah. So it's kind of like PHP in where it can kind of be both. Good question. Anything else? All right, awesome. Moving right along. 

So let's see an example of how we can use JavaScript in one of our web programs. So I'll consider this index.html with a bunch of HTML. And the thing I want you focus on is this script tag. And this says, OK, I want to run some JavaScript and here is where it lives. It lives in hello.js. 

And very much like CSS, we could put JavaScript within the HTML. Why might we want to separate it out? Yeah. 

AUDIENCE: Easier to rewrite? 

HANNAH BLUMBERG: Yeah. It's easier to use across different web pages. It keeps things cleaner. It's just good practice. Awesome. Good answer. So good, so this is going to be our index.html. And then down here is our tiny little JavaScript file. 

And all it says is alert Hello, world. So what happens is when this page renders-- so if you go to whatever website this is-- all that's going to happen is it's going to say, OK, I'm going to run this JavaScript code. And this JavaScript code just says alert Hello, world. So I'm going to get this friendly little pop-up. 

Cool? That's kind of like our very first JavaScript program, our Hello, world. Let's look a little bit more about what the syntax of JavaScript looks like. And specifically, let's compare it to C and PHP, which we've seen before. 

In JavaScript, we're going to have var, the name of the variable, and then its actual value. And we don't specify a type, just like in PHP, but very unlike in C. So for example, if we wanted to store the value 50, in C, we would have to say, hey, C, I want an integer, I'm going to call it i, and its value is 50. In PHP, it's a little bit easier. We say, hey, I want a variable called i and its value is 50. Very similarly, in JavaScript, we say hey, I want a variable called i, its value is 50. Every subsequent time that I use i, I don't need to write var. It's just i from that point on. In the same way, in C, where once we say int i, we just use i. Cool? All right. 

Moving on to loops, luckily, these almost look exactly-- I think they're exactly the same as what loops are going to look like in something like C where your for loop is going to have three parts-- an initialization, a condition, and an update. A while loop, it looks the exact same. We just give it a condition. 

And a do while loop, again, exactly the same. We give it a condition. Let's say I wanted to iterate over-- I wanted to do something five times. In C, we might write for init i equals 0. i is less than 5, i++. Only difference, in JavaScript, instead of saying int i equals 0, we say var i equals 0. Beautiful. That's the only difference. Any questions on any of that? Yes. 

AUDIENCE: So in PHP, it's the same thing, except but like a variable? Or was that a var example? HANNAH BLUMBERG: Yeah. So in PHP, it's going to be a dollar sign. So it's going to $ i equals 0, $ i is less than 5, $ i++. Great question. 

Now let's talk about function declarations. In C, when we declared a function, we gave it a name and we gave it some parameters. And at the beginning, we wrote the type. In JavaScript, all we have to do is write the keyword function that says, hey, JavaScript, I'm about to define a function. 

In this case, it has name sum. And it takes two arguments, x and y. Notice that we don't care about the types of x and y. And just like C, we have this keyword return, so we can do something like return x and y. 

And now once we've written this first function, we can use sum anywhere. And that's totally fine. One really cool thing about JavaScript that is very unlike C is that functions can be treated like values. So we can do something like here where I suppose I cover this up-- I covered up the var sum part-- and we just said function xy equals return x plus y. 

That is what would be called an anonymous function. It's a function without a name. Whereas this says function sum, blah, blah, blah, this would just say function. But now even though I have this anonymous function, that function is really just a value. We can treat it like a value. 

So we can save it in a variable the same way we could store 50 in a variable. So we can say, OK, I want a variable, it's called sum, and it is this function. So these two things are actually going to do the exact same thing, but the syntax is a little different and kind of a fun note. Yeah. 

AUDIENCE: So you could call a function that was anonymous by saying, sum brackets 2, 5? HANNAH BLUMBERG: Yeah. You can call this anonymous function in the same way. You would do sum (2, 5);. That would be totally fine. 

If I didn't do var sum equals function, if I just deleted this-- I know it's on my hand, but pretend I deleted this-- then that function is kind of just gone. You can never use it again because you don't have a name for it. It's hard to refer to something you don't know what to call. Good question. Yeah. 

AUDIENCE: Can you reference sum in other places with the value of x plus y? 

HANNAH BLUMBERG: Can you reference sum in other places with the value x plus y? I'm not entirely sure what you mean. 

AUDIENCE: So your past semi-anonymous function is sum is equal to this anonymous function, so sum is now a variable that you can-- HANNAH BLUMBERG: Right. So sum is the variable, but it's actually-- so sum is a variable whose value is the function. So it is a function, which is kind of a weird thing to wrap your head around since we've been playing with C and you can't do that in C. But now we can call sum the same way we could call sum here. AUDIENCE: OK. HANNAH BLUMBERG: Yeah. Good question. Yeah. 

AUDIENCE: So we don't use the prototypes in PHP or JavaScript? HANNAH BLUMBERG: No, we don't need to use prototypes, especially in JavaScript. So one bad practice thing that I'm going to say that you shouldn't do is you don't have to write var i = 50. You could just start doing i = 50. And would just make i a global variable. 

It's very bad practice to never say explicity var i, but it's something you can do. The interpreter's not going to yell at you. JavaScript is pretty like, you can do what you want. Oh, sorry. There's two. In the orange pants. Go ahead. 

AUDIENCE: No, you go first. 

AUDIENCE: No, I was just saying I didn't have my hand up. OK. So if you were to call that first time, now sum, we call it the same way, x, y, like every single time? HANNAH BLUMBERG: Yeah. So these two essentially do the same thing. AUDIENCE: And what's the advantage of using one or the other? HANNAH BLUMBERG: No advantage of using one or the other. I just wanted to show you two different pieces of syntax. A lot of times where anonymous functions do have a purpose is if the argument to another function should be a function. And we'll see that in just a second with Ajax. 

So if that didn't make any sense, store it in the back of your head. That's where an anonymous function might be useful because it's not really worth giving it a name since we're just going to use it once. Yeah. 

AUDIENCE: If x and y change later on, will sum change as well? HANNAH BLUMBERG: If x and y change later on, will sum change as well? So this is actually I think something that's, again, it just feels very different from C. This isn't a value. It's not 5. It's just the function itself. So as soon as you give it parameters, then you'll actually calculate a value. 

MARIA ZLATKOVA: And then you can call the function and use it to get some value. HANNAH BLUMBERG: Right. Exactly. Yeah. 

AUDIENCE: So if you just store it in the variable, like var x equals sum of two values-- 

HANNAH BLUMBERG: Yeah. So you could just do var sum equals sum of two values. Yeah. Any other questions? Yeah. 

AUDIENCE: But would that confuse sum and sum? Like if you call your variable sum, would you call the function sum? HANNAH BLUMBERG: Mm. Mm. If you did something like, sum equals sum 2, 5? 

AUDIENCE: Yeah. 

HANNAH BLUMBERG: I believe that would overwrite the value of sum. So another interesting thing about JavaScript is that a single variable can take on a bunch of different types. Bad practice. You shouldn't do something like what you just said. 

But in C, if i is set equal to an integer, we know that it's never going to become a string. This is not the case in JavaScript. Yeah, good question. Anything else? All right. Doing all right on time. Keeping going. All right. 

If we look at an array in JavaScript, here's a quick example of an array of strings. And arrays can grow dynamically. They don't have a fixed size the same way that they do in C. We can access the elements with just the square brackets. 

That looks a lot like PHP and a lot like C, where we can say, in this case, if I wanted the word JavaScript, I would do arr square brackets with a 0, 1, 2. And then if you remember in C when we wanted to get the length of an array, it was really annoying. But in JavaScript, super easy. All we do, .length. Gives it the lengths. That's it. 

AUDIENCE: That's simple. 

HANNAH BLUMBERG: Yeah, makes your life a lot easier. OK, object-- not there. Objects in JavaScript feel a lot like structs in C and associative arrays in PHP. So what we've seen a lot of is JSON, which stands for JavaScript Object Notation. And it's basically a way of structuring our data. 

So let's see an example, probably the easiest. So here's an example of an object that stores the class, CS50. And when I say class, I mean course, not like-- yeah, the course, CS50. And you'll see that everything in the object is going to be contained in curly braces. 

And we start to associate field names or keys with the different values. So you can start to see how this kind of feels like an associative array in PHP. So we're going to associate the field or the key name, course, with the string, CS50. 

We're going to have an instructor. We're going to have TFs. We're going to have number of psets and we're going to have recorded. And one cool thing to note is all of these things have different types, and that's totally fine. 

It's fine for an object, in fact, it's probably expected for an object to have a combination of strings and numbers and Booleans and arrays and whatever else you might want to have inside your object. And note that these are going to be the names or the keys, and then we just set it equal with a little colon. 

AUDIENCE: What exactly does JSON mean? HANNAH BLUMBERG: What exactly does JSON mean? JSON just stands for JavaScript Object Notation. It's just a way of formatting. Yeah. It's a way of formatting our data. 

In C, it's structs. In PHP, it's associative arrays. In JavaScript, we have objects. 

AUDIENCE: So CS50's an object? HANNAH BLUMBERG: CS50 is the object in this case. Now, how do we actually access those fields or change those fields. For example, suppose we decided that you wanted one fewer pset this semester. Instead of nine, we're just going to have eight. How would we change that? 

Oh, wrong way. There are two ways that we can do that. Number one is with the dot notation and number two is with the square bracket notation. So, for example, if I wanted to change or access the psets field in our CS50 object, what I would do is CS50.psets, so the name of the object dot the name of the field or the key. 

Very similarly, it's exactly equivalent to do CS50, and then in square braces, psets. Cool? Yeah. 

AUDIENCE: So is JSON technically JavaScript still, even though in the psets we separate it out [INAUDIBLE]? HANNAH BLUMBERG: Sure. So the question is, are JavaScript and JSON equivalent? So JSON is notation, basically the way that we write out an object from JavaScript. So they're not exactly the same. 

I would say JavaScript, there are objects in JavaScript. JSON takes those objects and prints them and displays them or stores them in a nice way. So JSON isn't a programming language the way that JavaScript is. It's just the notation for our objects in JavaScript. Yeah. 

AUDIENCE: So what exactly [INAUDIBLE] complete? HANNAH BLUMBERG: Sure. So this actually does nothing. This is just a way to access. So let's say we wanted to change the number of problem sets from nine to eight. What we do is do something like CS50.psets=8;. 

Yeah, great question. This is just to show you syntax. Doesn't actually do anything useful. Any questions? Moving right along. 

So let's look at a quick example of how JavaScript works because I told you it does all these cool things and allows us to modify web pages. Let's actually see it in action. So take, for example, this HTML file. 

And the thing I want you to focus on is this particular tag, which is a button, with id search_button. It's just on the page. So now let's see what we can actually do. 

Well, suppose when you click that button, we want to make an alert-- you clicked the button. Let's see how we can do that. So window.onload-- this isn't something that you've seen in class, therefore won't need to know it for the quiz. But this basically says, OK, call this function when the window loads. 

So that's just kind of setup code. Don't worry so much about that. What I want you to focus on is in here. We say var searchButton equals document.getElementByID search_button. 

So as you might guess, what this does is it says, OK, go find the element with ID search_button. And now we have that actual element and I'm going to store it in a variable searchButton. And now we can actually use that element and change it, or access its values, things like that. We can actually start to engage with the web page. 

So here I say, OK, now that I have that button, when it is clicked, call this anonymous function. So this is where anonymous functions become useful. And what does the function do? Well, it just calls this alert function and it says, you clicked the Search button. 

So what will happen if I go to wherever this HTML lives and I click the button, I'll get a fancy little alert that says you clicked the button. So the things to focus on here-- document.getElementByID gets a particular HTML element with the given ID. And now we can set what should happen when that particular element is clicked. 

AUDIENCE: We have to put all of that in? 

HANNAH BLUMBERG: Sorry? 

AUDIENCE: Do we have to physically code all of that? 

HANNAH BLUMBERG: Do we have to physically code all of that? Yes. Isn't this kind of annoying? This is a lot of code. 

AUDIENCE: You could import something. HANNAH BLUMBERG: Right. We could use something. And in particular-- oh, it's telling me I have to teach section. In particular, let's use the library jQuery, because that was really long and really annoying and I want to be able to simplify it and make it shorter and easier to write. 

So jQuery is a JavaScript library. So JavaScript is programming language; jQuery is a library. And it makes a bunch of things easier. It makes changing and going across a HTML document much easier. 

It makes handling events easier. It makes animation easier and it makes Ajax easier. So let's jump into two of those things right now. Excuse me. Before we do, some basic syntax. 

This is what most calls to the jQuery library look like. We use this dollar sign-- no connection sign to PHP, just inconvenient-- the name of a selector, dot, and then an action. So let's see some concrete examples of that. 

So this actually is the same code from the event slide. So this long, ugly thing becomes this much nicer, smaller thing. So let's try to break this down. This says, OK, jQuery-- this dollar sign-- jQuery, find me the window. So that's the selector. 

When it loads, call this function. So that's everything inside. OK. So far, so good? All right. 

Now, jQuery, find me the thing with ID search_button. And what it is clicked, call this function. And then this function's exactly the same. Just do a little bit of alert, you clicked the Search button. 

So it's really nice. It really condenses and simplifies our code. How did I know that it's ID search_button and not like class search_button? 

AUDIENCE: Hashtag? HANNAH BLUMBERG: Yeah. This hash symbol, it's just like CSS. So remember, with CSS, when we wanted to select something by ID, we used the pound sign. And when we wanted to select something by class, we use the dot. Great. Make sense? So jQuery is supposed to just make our life easier. Yeah. 

AUDIENCE: So I'm a little confused as to how the anonymous function works. Do you name this anonymouse function, function? How is it called? HANNAH BLUMBERG: Sure. So function is just a keyword that says, I'm about to define a function. AUDIENCE: Oh, OK. HANNAH BLUMBERG: OK? And then we pass it as an argument to-- let's take this inner one-- to the click function. So yeah, so that function, this anonymous function, becomes an actual argument. So remember in JavaScript, we can treat functions as values. AUDIENCE: Oh, OK. HANNAH BLUMBERG: Yeah. I like that "oh." Nice. Other questions? Time? MARIA ZLATKOVA: Good. Good. 

HANNAH BLUMBERG: Awesome. Some quick useful jQuery. I'm not going to go through all of these. These slides will be up online a little bit later, so you can check it out a little bit later. But basically, the general pattern holds where we say, OK, hey, jQuery, here's my selector and then here's an action. And you can do things like access the value of a form, access some HTML, control what happens when the user submits a form, things like that. Yes. 

AUDIENCE: So in the exam, we're going to need to know quite a lot from the jQuery documentation. So given that we copy/paste the jQuery documentation to our cheat sheet, where's the line drawn? Like how many do we need to know? HANNAH BLUMBERG: Great question. The question is essentially given that you can't access the jQuery documentation during the test, how much should you know? We would not expect you to come up with some random function that we would expect you to Google. 

Things that are fair game are I would say just kind of the general syntax, being able to select by ID and by class-- so just like CSS. And then the actual functions themself, we'll likely tell you. Yeah. 

AUDIENCE: So when you select by class would mean dot. HANNAH BLUMBERG: Yes, exactly. Good. When you select by class, it's going to be dot instead of the pound sign. Yes. 

AUDIENCE: Would you go over the difference between selecting by ID and by class? 

HANNAH BLUMBERG: Sure. The difference between selecting ID and selecting by class. So as Maria said a little bit earlier, there can only be one HTML element with a given ID, whereas class, it allows us to group a bunch of different elements together, so things that are related, but not exactly the same. Does that answer the question? Awesome. Yes. 

AUDIENCE: What if you have multiple things that are in the same class? 

HANNAH BLUMBERG: What happens if you have multiple things that are the same class? So, for example, if we're just using pure JavaScript, we would do something like document.getElementsByClass. And then what that actually does is returns an array of elements. 

And you have to either iterate over them or find which one you want. It's not going to give you a single element. It's going to give you an array of elements. Great question. Anything else? Awesome. 

So I think if you're familiar with any jQuery you saw in the pset, you should be good to go. Question? Oh, no. I really have to teach. Relax. It'll be fine. I'll get there. 

Let's talk about Ajax. So Ajax is going to be a-- well, let's start with what it stands for. It's an acronym. It stands for Asynchronous JavaScript and XML. And XML is basically is going to be [INAUDIBLE] with a type of our data. But we haven't actually used XML. Instead, we just use JSON. 

So basically, it's some data-- asynchronous, JavaScript, and data, in this case, JSON. And our goal, as we mentioned a little bit earlier, is to be able to make a request, have that request do its thing in the background, but continue do whatever we were intending to do. And then when that information is ready, then we'll incorporate it. 

So let's see what this actually looks like. And this, you should be a little bit familiar from pset8, the one you just turned in. So here's a valid jQuery function that we might want to know about-- this dollar sign. So it says jQuery function, .getJson. 

And what this function does is it takes a URL and some parameters-- so I think in the case of pset8, it was like, the URL was articles.php and the parameters was go= some postal code. And it says, OK, make a request to this URL with the given parameters. And that just happens. 

When it finishes, it's either going to successfully complete or it's going to fail. So this is the equivalent of call Rob and ask him to do something. And then when he calls back, he's either going to say I'm done or I failed. 

So in the case where you're done, you say, OK, I'm done. And then you call this function. In this case, it's going to be a function that takes some information. The one we usually care about is data, the data that we were actually returned as a result of calling .getJSON. 

And you can do something with it. So in the case of pset8, we displayed it as a list. Fail is going to be a function that is called if the request fails for whatever reason. And in the case of pset8, we just console.log it. Any questions on that? Yeah. 

AUDIENCE: Can we just use function theta instead of function, textStatus, jqHXR. HANNAH BLUMBERG: Sure. So yeah, I think in the pset, we just saw function data. So it's just the-- yes, OK. That's what we saw in the pset. That's totally fine. 

These are just if you wanted to pull out more information, these are the things that you could get from .getJSON. Good question. Anything else? Yeah. 

AUDIENCE: So .getJSON is Ajax? HANNAH BLUMBERG: OK. So this is the kind of tricky part. It is a jQuery function that allows you to do asynchronous calls. And those asynchronous calls, that's what we've been referring to as Ajax. Yeah. That took me a really long time to pull apart when I was a student. AUDIENCE: Can you say that again? HANNAH BLUMBERG: Yeah. Can I say that again? This .getJSON function, it is a jQuery function. And it's going to make an asynchronous call. And these asynchronous calls, we've been referring to those as Ajax. 

Any other questions? We have just a couple minutes left. And Maria's going to wrap up with security and then we're going to be just about done. MARIA ZLATKOVA: Awesome, OK. So this is-- just take a couple of seconds to look over this. And this is not something really great. And can someone tell me why? What is going on in foo and may could potentially result in something bad, and what that's called? Yeah. AUDIENCE: If the argument that's passed in is more than 12 characters, it could overflow. MARIA ZLATKOVA: Right. Perfect. What is it called? You just mentioned it. 

AUDIENCE: Buffer overflow. 

MARIA ZLATKOVA: Yup, buffer overflow. So this is something that we refer to as buffer overflow. And we see that inside of foo, we've defined our buffer, c, with a size of 12. However, in main, we don't check in any way at all whether the argv1-- so that was the second argument. We don't check whether the size of it is appropriate. 

So if we had an especially malicious user who put in some argument that was longer than 12, and then potentially beyond the bounds of that argument, had some executable code that he was trying to do something bad with it; then this, what would happen, would override the return address of the foo function, causing the function to when returning to execute that code. And then bad things could happen. Does this make sense to everyone? 

And how can we protect against this? Any suggestions? Basically, inside of potentially foo, how can we check to make sure that that can't happen? 

AUDIENCE: If the size 12 is exceeded, you would allocate additional memory? MARIA ZLATKOVA: Suggestion is, allocate additional memory of the size exceeded. Actually, we can do something a lot simpler than that as well. We can just get the string length of the argument that is entered, check if that is less than or equal to 12-- which is what we want it to be because we don't want it to exceed the bounds of our buffer. And then if it doesn't, we can work with the argument. And then if it does, we actually want to yello potentially at the user. But this is how we would do that. Yes. 

AUDIENCE: Could you explain memcpy real quick? MARIA ZLATKOVA: Oh, sorry. Yes. Memcpy takes whatever is-- sorry, OK. Memcpy takes whatever is in bar, whatever is passed onto foo as the command line argument. So it's going to take argv1. Argv1 is called bar here. So it's going to take bar and it's going to copy it into c. 

AUDIENCE: OK. MARIA ZLATKOVA: And it's going to copy-- the third argument just refers to how much it's going to copy into c. AUDIENCE: Ah. So this one's copying all of it then. 

MARIA ZLATKOVA: Yeah, it's copying all of it. Yep. First, we make sure the bar is not equal to null because it's a pointer. Then we get the string length of bar. We make sure that it's less than or equal to 12. And then because we've made sure, we can actually memcpy and be sure that that's OK. Any questions? Great. I have two true or false questions. Can anyone tell me right away if these are true or false? Yes, it's false. Exactly. Both of them are false. So using a single password is never really good idea because if someone knows your password, they can just access all your other accounts. And then icons do nothing to ensure security. We should usually look for HTTPS instead of HTTP and the URL. 

And some other types of attacks that we've mentioned, that David has mentioned in lecture, SQL injection attacks. We already saw that if we don't-- the CS50 query function makes sure that SQL injection attacks cannot occur. But if we weren't using CS50, quote, unquote "in query," we would have to make sure that the user input isn't actually some SQL query that will cause all our tables to be dropped or something bad to happen with our database. 

Session hijacking is another type of attack that happens when some bad person uses some victim's session ID to access the login information. So a very trivial example of that is like if we have a public computer, then the bad person logs in and then they have cookies that are saved. And cookies do not change for session. 

Then we have the victim go in and then log into the website. The cookies don't change for a certain session. And then the victim logs into the website and then leaves. And then the person who goes back can then still use their session ID to access their information. So that's one example of how that could happen. 

And then I wouldn't worry too much about specific code or anything like that that could cause this, but having some sort of idea what the variables involved in this are. And then manipulating header data is another type of attack that has David has talked about. And it just refers to what can happen when the response, the HTTP response inside of our header is not sanitized properly. 

And any of the fields-- for example, if someone overwrites one of the header values to contain anything more than what they should contain-- and actually contain, for example, a 200 OK status code, then they could potentially do malicious things when they're not supposed to. But I wouldn't worry too much about the specific code that could cause this, just sort of understanding high-level things like that. 

I think this is all that we have to cover. Amazing. Anyone have any questions on any of the things that we covered? Yes. 

AUDIENCE: So one sort of more logistical question. Is the content mainly focused on things after quiz 1? 

MARIA ZLATKOVA: So question is, is the content focused mainly on things after quiz 1? So the focus is on after quiz 1, with the exception that we need to focus on things in pset5 and a lot of the data structures that we covered. And we can't say that we can ignore anything before that because it builds upon it as well. 

So focus on that, plus pset5 material like including linked lists, stacks, queues, and everything that Hannah went over. 

HANNAH BLUMBERG: Right. Yeah, we went over all the C stuff at the very beginning very quickly. But make sure to review that. Go back and watch the quiz 0 review. 

A couple more logistical notes, just while we have your attention. We are going to have office hours both on Monday and Tuesday night. They're going to be in MD 119. This is all on the website, so if you don't hear it, no worries. 

MARIA ZLATKOVA: 8:30 to 11:00. 

HANNAH BLUMBERG: Yeah, 8:30 to 11:00. We'll be there. We'll be there to answer questions. It's pretty chill and fun. You guys can ask any questions that you have on quiz 1. And quiz 1 is on Wednesday, so good luck. If you have any questions, maybe come talk to us up here one-on-one. Cool. Thanks so much. 

MARIA ZLATKOVA: Thanks so much, guys. 

AUDIENCE: Yay. 

[APPLAUSE]