ALLISON BUCHHOLTZ-AU: All right everyone. Welcome back to section. It is our penultimate section. It's so sad. I don't know what I'm going to do without seeing you guys every Monday. I guess we should just-- maybe we could just meet here and have dinner or something. I don't know. I'll bring food instead. We'll just talk. But yes, next week will be our last section. On that note, you have a quiz next week. I know I forgot to do my, like, two week advance notice last week, but hopefully you guys knew this was coming. Hopefully this is one of the last midterms for you guys for the semester. But it's going to cover all the material that we've gone over. So it's not like you can just forget about four loops or variables. Because we learned those in the beginning, those are obviously fair game for your quiz. 

It's going to be the same format, same length, so you already are used to it. There's going to be coding by hand problems, maybe some true false, maybe some short answer. So you should be familiar with the format, especially if you take the practice tests. But as I say here, it's cumulative, but we're definitely going to be focusing on things from week six onward. So, we're probably not going to ask you about how many bytes are in each type or those sorts of things, but we're probably going to be interested in things like linked lists, or different data structures, or different algorithms that we've talked about. So make sure you're really up on those, and if you need any resources, here's lots of resources. I just gave you kind of a quick list there. 

Next week will be quiz review during this time. So if you have any questions or specific topics, specific things on the quiz that you'd like to go over, please send them to me ahead of time so I can kind of prepare some material for that. And in addition to this section review, we'll also be holding the course-wide review like we did last time. And it's going to be done by the same people. I don't know if that makes it better or worse, but it's going to be me, Hannah, Davan, and Gabe again. So if you want to come see us all banter with each other and walk you through quiz review, you should definitely come to that next Monday also. So you'll just have a Monday jam packed of quiz review, which is good because then you have Tuesday to process through everything. 

But definitely do check out these resources. Study.csv.net is by far, I think, one of the most useful, mostly because it has a lot of sample code, it has all the Power Points with all the notes on it, which are really what I draw most of my section materials from. If there's anything in previous sections that I may have sent out that you may not have gotten, just let me know. Like last week's sample code, if anyone didn't get that, just email me or come talk to me, and I'll make sure that you get that. 

So with that, today we are going to be talking about JavaScript. So here we Tommy, who I was just talking to you last night. I love Tommy. JavaScript is his favorite language, as he says here. They'll try and tell you that it's not the best, and they will be wrong. So Tommy is a JavaScript master. I'm not quite at his level, but I was like, "Tommy, how do I teach these kids JavaScript?" So I got some tips, so hopefully they work out. 

So a couple things to know is that JavaScript is a client-side scripting language, so whereas PHP is something that we considered more server-side, it was upload to the server, compiled and executed there. This one is executed on your own machine. OK? So you load some JavaScript page, and it executes on your machine. Syntax is very similar to C and PHP. We're going to go through some examples of JavaScript, and you're going to see that the way we talk about variables, loops, and conditions are all very similar. OK? The fact that they are so similar is probably going to trip some of you up, in some cases, just because you'll incorporate a little bit of C where there shouldn't be. Maybe you try and type something when it shouldn't be typed. 

And on that, one thing to know is that JavaScript is a dynamically typed language, like PHP. So if you guys remember from section last week, when we were kind of doing our PHP crash course, we saw how a string one could be turned into an int one, and so forth. The type of your variables are determined at run time, so they may change over the course of the program, and in the same way that we never really declare types for PHP variables, we're going to be doing the same thing here, where we're not really controlling the types of our variables, so to speak, like we do in C. 

And then one thing that is pretty cool is that you can error check via the console, with this great function console.log, which allows you to print out different variables or objects that we'll talk about. Just like last week when I was like, "use this function," with dump from your pset this is a function you want to use, console.log. I was so surprised how many students at office hours did not know about the dump function. And I was like, "guys, this will make your life so much easier." 

All right, so that was kind of just a brief thing, as always, we have examples. I know you guys love those. So here's an example of a very simple JavaScript file here. So it's just going to create this pop-up that says, "hello world," when you enter the page, but let's try and walk through this a little bit. So obviously this is just like your normal index.html. So, just our normal template here, and we have HTML, we have our head, and just like with CSS, how we included some outside file, right? We have some script type text that is JavaScript. And the source is hello.js, which is down here. This is the entire file of hello.js. And then we have some title and some body HTML that we don't really care about. 

What happens is, when we load this page, it automatically executes this script. OK? So JavaScript will execute automatically. So what it's going to do, it's going to immediately go and execute this. And it's going to say, "alert. Hello world." Which alert is the function that actually generates this box. OK? So it's kind of all encompass. There's nothing extra we had to do besides just alert, and then whatever we wanted within our Alert box. OK? So that's just a super simple example of what JavaScript can do. 

One of the really cool things, as we'll see, is that JavaScript allows you to manipulate your web pages, without having to reload them every time. So if you want-- for example, if you are hovering over something, if you guys ever have seen like Menu bars, or when you hover over some topic, a Drop-down menu appears, that's because of JavaScript. OK? So you're not reloading the entire page to get this menu to show up, you're just looking for some specific action that the user has taken, which are called events that we'll get into, and once you see that, you say, "OK, edit something on this page and make it look different, but only edit these specific things. Don't reload the whole thing." So it actually is much nicer, and you don't have to reload your pages, and it's really cool. 

So variable declarations, so you can kind of see, I put on top here, loosely typed. So this is very much like PHP. We don't need to tell JavaScript what type we're expecting each of these variables to be. They can be whatever types we want. So you notice in this case, we declare them very simply, just with "var" and then whatever we want our variable name to be. One thing to note is that when you put var in front of a variable name, it locally scopes it. OK? It's totally reasonable for you to completely just erase the var and just have s equals CS50, and that would just be a global variable. OK? So you can initialize it both ways, just depends on how you want it. So if you're initializing it within a function, and you want that variable to stay scoped within that function, you're going to want to do something like var name a variable, versus if you want it globally scoped, you can just do the name of the variable and then whatever you'd like it set equal to. OK? 

This is kind of cool thing down here, because if we notice our variable b starts out as true. And what this does-- can anyone tell me what this does? So we have some alert. What would type of b be in the beginning? AUDIENCE: Boolean. ALLISON BUCHHOLTZ-AU: Boolean. Right. And then we reassign b to this string, right? So then here, what type of b be? It'd be a string, right? So what's important to notice is that in c, we could almost never do something like that. We'd have to have a variable, cast it as something else, maybe do some function with a two i, go from a charge to an integer. But if we notice here, b very easily changes type. 

AUDIENCE: Wait, so you can just be like, "make b an integer?" 

ALLISON BUCHHOLTZ-AU: Yeah. You can just reassign b to an integer. 

AUDIENCE: Really? 

ALLISON BUCHHOLTZ-AU: Yeah. And then it would be an int. So your variables can change over the course of the program too. They are not strictly typed. It is very loosely typed. OK? Basically your variables can do whatever they want, as we kind of saw with PHP. They can do some crazy things, so it's important to be pretty careful. Name your variables well. If you don't, all of a sudden you're going to be like, "wait, I thought this was a string, and now it's an int, and I'm not really sure what's going on here." So this is just a simple example of showing how a variable can easily change its type over the course of a program. 

OK. So this should look super, super familiar. So these are our loops in JavaScript. They are exactly the same, except for instead of four int i equals zero, we could just say var i equals zero. And then we could have our same sort of condition, same sort of update, i plus plus works just fine. So fours are the same, whiles are the same, and do whiles are exactly the same. Same sort of general format. We notice, four, parentheses, brackets, it's all the same. Also there will be semicolons when we get to example code. You'll see it's pretty much the same as c. 

For function declarations, again, very similar. We have some function that just says that it's a function, and then the name of our function, and the inputs. And again if we notice, we have no types here whatsoever. Right? We have nothing saying that these need to be ints or doubles, or floats. They could be whatever they want. What is important is noticing that we need to write function beforehand to let JavaScript know that this is actually a function. 

So this is just some simple sum function that returns x or y, and then what's also cool is that you can actually assign a function to a variable. So in this case, sum is now the function that actually does sum. So if you notice here, we have function, name of function, inputs. Right? Here we just have function and inputs. So this is called an anonymous function. And this is something that should be new to most of you guys, if not all of you. So basically what that means is that we don't need to name of our function in this case. We can just say, "OK, I'm going to have this function that executes, here are its inputs, and here's what it's going to do." And especially when you're assigning a function to some variable that you're going to manipulate, you don't necessarily need to name it because you're going to be referring to it by this variable name, not by whatever the function was actually called. OK? 

So if we see here, we have some variable sum now that is equal to the sum of three and five. And we would get this. And this would just have some alert, three plus five equals the number. This plus will just concatenate whatever our answer was onto the string. Also cool, plus can concatenate strings. 

For JavaScript, as with PHP, HTML, and CSS as we said, a lot of it we're kind of taking the training wheels off here and you guys have a lot of the know how to really understand these things. They're slightly different, but they're not so foreign and that you can't Google things or look them up online with w3 schools. And we're really expecting you guys to, kind of, experiment and learn on your own. So, I know this might seem a little less thorough than some of the c things we do, but that's actually for a reason. But hopefully it's not too different, and it's not overwhelming. 

So arrays in JavaScript, again very, very similar. Right? We have some variable array that's equal to empty brackets, and that's just an empty array. This is often called literal array notation. That's just one thing we call it. If we see array two here, we have some literal array that has three elements, right? And then we have some var third element that's some variable that's just going to hold this string, JS. 

The elements, good to notice, are separated by commas, just like we would expect. And you can also access these, as we did in C, with this index notation, right? So different from PHP now, we're going back to just kind of referring to things by index. Just like C, it's also zero index. I feel like it would be really cruel if they suddenly made JavaScript one index, and you had to completely rethink how you think about arrays. 

One cool thing is that instead of having to do-- if you ever wanted the length of an array, maybe you iterate through it until you find some end, or you would just know what it is. Because JavaScript is very loose in more ways than just type, as we see here, we can just make this array bigger because we decide to. If we notice array three has three things to start, but then all of a sudden, we're like, "oh, just kidding. We're actually going to make it 101 things." So if you ever want to know the actual length of your array, you do it like this. And we're going to see a lot of this notation in examples, but with JavaScript it's typically whatever object that you're talking about dot whatever kind of function you want applied to it. OK? 

So in this case, our object is array two, and we say we want the length of array two. So this just calls like length on that. And that will return your length. Also something to note is that if we notice our arrays, unlike C, they don't have to be all of the same type. This is much more like PHP. JavaScript is basically just like this interesting meld of C and PHP. So we'll get into that. For now, let's just assume that your arrays are basically like C arrays, in that they are zero indexed. OK, so that is everything. You can also just extend an array to whatever index you want. Whereas this would probably seg fault on you or give you some error, JavaScript is like, "nah, it's fine. I got this. We'll just go straight where you want to." 

OK, so objects are very important. You guys will be using a lot of these in your P set, if I remember correctly. So the thing that these are similar to in C are structs. So you can think about-- when we go to an example right after this I think it'll make a lot more sense-- but we basically use objects to organize of course related information. When we talked about structs in C, we often talk about a student who had some name, ID, house, you know, concentration. And that's kind of the same thing that we use objects for here. It's just to organize similar information. 

You can also think of these as more similar to associative arrays in PHP. So this would be kind of the thing where we have some key with some value, very similar to PHP. So you can initialize some empty object, as we see up here, just with curly braces. So arrays are square brackets. Empty objects are curly braces. Good distinction to have. And these are just two different ways to set properties. So this is kind of much more of a way that is similar to PHP, with our associative arrays, with our key, and our value, whereas this one is-- you'll see this a lot more in JavaScript. This tends to be the convention. And in the same way that we did array two dot length, this is saying, "OK, give me this attribute of this object." Right? So the same way it was like, "give me the attribute length of array two," this is saying, "give me some property of our empty object." Or in this case, we are assigning it to some value here. But you could also access it that way. 

And then here this is just showing two different alerts. So this would show the alerts would be the exact same, it's just two different ways of accessing the element that we want. Does that make sense to everyone? I feel like this one probably makes more sense, just because we're coming off of PHP. But as we do more examples, this is literally exactly the same. A lot of it is just change in syntax. 

OK, so examples. I love examples. So here is some CS50 variable that is an object, and we store all this information about it. So we have course, instructor, tfs, psets, and taped. So we notice these are almost all of different types. Right? So objects can store attributes of different types. We can think of this-- it's very similar to our associative array in PHP. So key, value, key, value, key, value, so on and so forth. What's also interesting in the same way that we can have arrays within arrays, we can also have objects within objects, or arrays within objects. You're never really limited to just a single one of things. We can get very Inceptionesque, just keep going down the rabbit hole there. 

So if we notice, we have some course that is a string, instructor that's a string, and array, an int, and a Boolean. So all of these different things. 

All right, so, we have another one. So in this case, we have an array of objects. So just like an object can have an array in it. We can also have an array of objects. This might be useful to think about similar to kind of how we had a hash table, we had an array of all these different types of structs that were pointers to different nodes and whatnot. But in this case, we have an array of objects. So this is like an array of associative arrays. So we have some first element would be the object with the name James and house Winthrop. 

You guys might remember something very similar to this with your last pset, where if you pulled something from your database, the first sort of thing in your array was all of the information about the first user that met it, and then you had to index into that to get their stock or their cache or whatnot. So this is very much the same thing, just a little change in syntax, little bit change in the words we use to describe them. 

So if we wanted, can anyone tell me what this alert would do here? Or what this bit of code would do for us? AUDIENCE: It'll give you all the names. ALLISON BUCHHOLTZ-AU: Right, so it would just alert with all the names because it would go through cottage i, so it'd start at zero. So it'd say, OK we're looking at this first object, which is the first slot in our array. And it says, "give me the attribute, the name of that object." So we go here, we'd scan, we'd find name, and we'd print out James, Molly, and Carl. Any questions so far? JavaScript unfortunately you're going to be doing a lot of looking up on your own, figuring out the syntax, grappling with it. But of course I'm always here, office hours are always here. I might be on Tuesdays this week. So if you're there, you can come visit me this week. It'd be great. 

OK, so DOM is Document-Object Model. So this is just a way that we like to think about how our HTML and everything within it is organized. This is very much something that will probably come up on your quiz. I know my year, it was like here's HTML file, fill in the DOM for it. And you just fill in little things. These should be easy points hopefully. Hopefully you'll see-- 

AUDIENCE: [INAUDIBLE] 

ALLISON BUCHHOLTZ-AU: So you see this tree here? 

AUDIENCE: Yeah. 

ALLISON BUCHHOLTZ-AU: So they will ask use to fill in what goes under the body. Maybe under the body, we have some divs or we have some paragraphs, and we'll ask you to fill in a tree very much like this. So we'll be walking through it. So the Document-Object Model is just a way to structure and think about our HTML graphically. And also when we get into more JavaScript, it's going to be the way that we actually manipulate different elements on the page. We need a way to access each of the things in our HTML, and so this gives us a very concrete standardized way across various web pages to do that. 

So if we just walk through this here, of course our document is like our entire file. That obviously makes sense that it's the highest thing, and then we have our actual HTML, which corresponds to this tag here. Also if you in indent your tags properly, then creating this DOM tree becomes super simple. So we have some head here. We have some body that we see stem off of HTML, which is why we have head and body. Within head, we have some title tag, an end title tag, so we know that comes after head. And within our title tag, we have hello, world. OK? So that's this whole left hand branch. And then for the right hand branch here, we see that we have HTML, OK we've done this head part, we're looking just at body, so we have some body area. And within that, the only thing we have is hello, world. OK? If we had things like some bracket p and then hello, world, and then another bracket p of goodbye, world, we would have two bubbles coming off of here. Because they're both under body, but they're separate paragraphs this case. There is definitely practice on that in previous quizzes, as well as plenty online on it. OK so, this just lets us see everything nicely and manipulate things very systematically. OK? We know exactly how to traverse through this tree, so we know what we want to access. 

OK so this is why we want to have this sort of model, so that we can use things like this, and we understand what they mean, and they're standardized across all things that we do. So document dot title is just the title of our-- all of these are pretty self explanatory, I like to think. So the first three examples are just saying, "OK, just give me the title of this web page." So it will give you what corresponds to the title. 

Document dot body is going to give you whatever is within those body tags. So you can manipulate that. And document dot body dot enter HTML is a very cool one, and maybe is not like super intuitive, but the inner HTML corresponds to this right here. So if you ever want to manipulate the text on a page, typically you're going to be doing something with body dot inner HTML. OK? So inner HTML tends to refer to what is actually between these tags. OK? And then useful functions. So if you wanted to get any of these, any element, we have some Id, class name, or tag name. This is very similar to things we did with CSS, right? Where we have some selectors that correspond to either a tag, a class that we give them, or an Id. This is very much the same way. If you have something that has some class of dog, and you say get elements by tag name, and you put dog in there-- or sorry, class name. You can put dot in there. It's going to return all of those elements to you that have that class. So you can manipulate just those. In the same way, maybe you just want to manipulate some header, so some h1 header, like we did. You could do get elements by tag name, because h1 is a tag name. And in the same way, if you want to get some unique thing, you can do get tag. Get element by Id. And they are actually lots of these. These are only like three of very many. So if you go online, as I'm going to encourage you to do, and do some research on your own, I definitely recommend looking into all of those. They could be super useful, especially when you want to just kind of manipulate very specific things without having to go through and try to parse out everything. 

OK, so the last thing is JavaScript events. So when I was talking earlier about going onto a website, and when you hover over something, or your mouse hovers over something, something else happens. This is what we'd like to think about as an event. So what we have that might be useful here is onclick. So mine was on hover, which, I'm pretty sure, is just on hover. Also a ton of these that you can look for. There's a whole list online of the different things that you can listen for. 

But JavaScript events are basically just responding to things that your user is doing. Right? So your user does something, that's an event, and JavaScript will respond however you'd like it to. It will respond accordingly. So in this case, we have some window dot onload. So what this says is, "wait until the window's loaded." OK? So when everything's loaded, onload, then you can execute this function. So when everything's loaded, you're going to have some search button that gets an element by Id, and it prints whatever that element is as the Search button. And then we have this variable, we say, "OK, onclick." So when we hear a click on the Search button, execute this function, which is an alert, you clicked the Search button. 

So what happens is-- this is a nice little graphic representation here. So our document loads, that's our onload, we find our Search button, which is this. We're looking for our Search button. And then when the Search button is clicked, it corresponds to right here. Onclick. Then we finally alert our user, which is this last line here. OK? So each of those four steps just corresponds to the four boxes down there on the bottom. Does that make sense to everyone? 

And then one thing that I'm just going to mention very, very briefly, that I encourage you guys to go look more into is jQuery, which is just a library that is built on top of JavaScript. It is super useful, as with most libraries. There are lots of functions. So if there's ever something that you want to do in JavaScript, your first instinct shouldn't be to think of, "what function should I code?" it should be, "let me see someone's already done this for me." Because nine times out of ten, someone will have done it already, and they probably have done it better. People spend a lot of time doing these, and JavaScript is very widely used, so people are constantly trying to make it better. And jQuery has a lot of functions that will probably be useful to you in your final project if you're doing anything with web design. As I like to say, "work smarter, not harder." If you guys do that, it'll be great. When we're at the hackathon I don't want you to be all stressed out. I want you to be like, "I got this. jQuery's got my back. I don't need to write these functions." 

So just two things to remember, I'm going to let you guys look more into jQuery on your own. All I'm going to say is it does some pretty awesome things and can make your life a whole lot easier. But what you want to have is whatever file that you're going to be using it in, you're going to want these two lines. You're going to want the script of js jQuery dot js. And actually your source is going to be some URL. If you Google jQuery, Google actually hosts all the files for you. So you definitely want to input that URL instead. I just put this here for simplicity's sake. All this means is where to find your jQuery library. It's massive, so you don't want to host it on your own computer if you can avoid it, which is why we tend to just put in Google's URL that hosts all of these files for you. OK? You Google it, I promise it will be there. 

And then whatever JavaScript file that you're using, so this is just some external JavaScript file that you're using. In the same way that we link to our CSS files, this is the same sort of thing. This just links to the file where your JavaScript is. And I have some examples with simple JavaScript. So we'll be going through it. And then in your index JavaScript, which is your JavaScript file here, this is kind of the wrapper that you have for jQuery. You're almost 99.9 percent of the time going to have this in your index.js file. Because what this says is, "don't execute anything until your document is actually ready," which is exactly what you want. Because if your document's not ready, and jQuery starts doing things, it's just a mess. So you always want to have this wrapper. And then for things that go in there, I shall leave to your guys' own perusing. 

OK, so are there any questions right now about JavaScript in general? Or the DOM model? If not, we have some cool examples that we can go through, that you guys can help me code. But I'm also going to be super nice, and if you don't want to say anything for these, that's fine. I can also just give you examples. But anything on the PowerPoint before we move on? Cool. 

I feel like you guys need to energy. So I think we're going to start with my party example first. We have three examples, you have your choice. So we have clock, where we're going to implement an actual clock that's going to update as time goes by. We have this great Twitter function. This-- you know what, hold on. We're going to make this go away. Bam. OK. 

We have this great Twitter function here, that-- I know, right? It's going to be great. Are you guys excited? That is going to count the number of characters that you have left, so if I type right now, obviously it still says 140, but we know that's not the case. And then with our last one here, click here to party. What's going to happen is when we click, the background's going to change colors. So you guys have your options of which one you want to do first. I promise I'll take it very easy on you. I feel like everyone's kind of just very low key today. So I'll walk you through how we will implement all of these. If you want to chime in, that's great, but I feel like everyone's a little tired. So I'll just walk you through these examples. Do we have something that we'd like to do first? Anyone? No preference? OK. You know what? We're on party. I feel like you guys need a little-- so, we'll do the party one first. OK. 

So what we have here-- that's not supposed to be there. Now it's good. OK. So what we have here is just a simple HTML page that you guys should all be super familiar with from your last two psets. we have our doc type here. Can everyone see? OK. Cool. We have our HTML obviously. We have some header that is linked to a style sheet that just made my font nice and big and bold. So don't worry about that. 

We have some body with an Id background, OK? Because we're going to be changing the background. So when we're changing the background of our body, we remember from two weeks ago when we are dealing with web pages. So good to have that. And we have some Id equals party. This h ref pound just means that it's going to go to the same page. And click here to party, which is why when we click it, it should change colors, thankfully. 

And then we have some script here that is just linked to this party dot js file, that is empty because we haven't done anything yet. And it's so sad. But very soon, it will change colors, and it will be awesome. 

So I'm just going to walk you guys through how we might approach this. So the first thing that we might want to do, if we are changing the background of the body, the first thing we might want to do is actually grab what the body is, right? So we want to have sum, our background, and if you notice, I just automatically just start typing. There's nothing special that we need to do for our JavaScript files. I can start declaring variables, and declaring random functions. And it's much more free form. It's like with C, we gave you all these hard rules, and you grew up, so we're like, "go forth. Be free. Do what you want." And that's what JavaScript is. So we have some background here. With our DOM model, we know we can do document dot get element, and if we notice here, our body has an Id. Right? So we can do get document by Id, and here's a simple one. What's our Id that we want here? AUDIENCE: Background. ALLISON BUCHHOLTZ-AU: Background. Perfect. And semicolon at the end. That has not gone away yet. You still need your semicolons. OK. So that's our first one. And when we click something, we want something to happen, right? So we might want some variable that's waiting for a click. What we're going to do is we're going to make our link more similar to a button. So we're going to have some button that equals document dot get element by Id. And if I'm talking about the click link or click here to party link, what might my Id be here? Party. Correct. OK not too bad so far. Everyone get what we're doing? 

OK, so now we have our button, and we want things to change when we click on it. So if we remember from our PowerPoint, very simple thing we can do is just button dot onclick, right? And that's going to equal some function. This is an anonymous function. And this just as-- actually I'm going to make this a little bigger. 

So what I just did here is I'm saying, OK, when we click our button, which is this link that we just referred to, we are going to execute this anonymous function. We don't need any inputs. We don't care what the user says. When they click on it, we're going to do whatever we want, which is change the background color. OK? So that's why we don't have any inputs, we just have this anonymous function. And now we're actually going to write this function. 

So there's a bunch of ways you could generate a random color. The way that I did it was to generate three random numbers and convert them to an RGB triple. So this just shows you some cool things that if you're like, "oh, I need to generate a random number." if you Googled it, this is what you would find. 

So we have three different things, var, not red again, green. Right? So those are the three things that make up a color. Blue, red, and green. Cool. And what we can do is that we know that it needs to be between 255, and if you looked up some random number generator, you could get something like math dot random, which if you look this up returns to some number between zero and one. OK? And what numbers do our RGB triples go between? Zero and what? What can they go up to? 255. So if math dot random goes between zero and one, how might we want to convert this? AUDIENCE: Time? ALLISON BUCHHOLTZ-AU: Yeah, exactly. So time is 255. 

AUDIENCE: [INAUDIBLE] It's like [INAUDIBLE]. ALLISON BUCHHOLTZ-AU: Math dot random. AUDIENCE: Cool. ALLISON BUCHHOLTZ-AU: Yes. JavaScript just takes care of you. OK. So we can do that for all of these. Right? Math dot random times 255. Copy that. Cool. So the thing is, this may not return an integer. Right? Maybe we get some number between zero and one, and it causes it to be slightly off, and our RGBs can't be floats. They need to be ints. So if you tried this, it'd probably have some erratic behavior. It would be a little funky. So what we do is we want to make sure that these are rounded, and you could round either way. I rounded with floor. So I always made sure that it rounded down. But going off of how simple it was to just get a random number, how do you think we might floor this number? It's very similar. Any idea? So if random was just math dot random, so do you think we'd do floor? Math dot floor. And you can also do math dot ceiling. Round is kind of ambiguous because you don't know whether to round up or round down. So typically we always do math dot floor, math dot ceiling. But honestly-- 

AUDIENCE: Does floor round down? 

ALLISON BUCHHOLTZ-AU: Floor rounds down. And that's just a choice on my part. 

So now we have our three numbers that have been randomly generated, and what we're going to do now is we're just going to change the background. OK? So we already have our background kind of stored in this element called background. So what you'll notice is, if you played around with this, we want to change the style. And this is kind of something that you would Google and figure out, like how to change the color. 

But the way you access this color is background dot style dot background. So this is saying given this object, background, which refers to that element Id up there, we're going to look at the style within the style, we're going to look at the background. OK? And if you go and look this up, it might make a little more sense, but this is basically just saying, "give me this very specific attribute of what I have defined earlier." So what we're changing it to is some RGB, because it makes sense. We're using RGB triples, right? And we have-- I want to make sure I get the right number of quotes in here. So what we do is we have RGB, and we're going to-- this is like concatenation, which is red. And then we want some comma. And then we want plus green, then some comma, and some blue. 

So these pluses just mean like concatenation. So this is just creating this string that's going within RGB. OK? 

AUDIENCE: [INAUDIBLE] plus then the green a plus then the red. 

ALLISON BUCHHOLTZ-AU: Yeah, because I messed that up. That one's fine. Oh, hold on. No. Because I need to make sure that I got all these right. So I will explain in uno momento. Green, blue, perfect. Now I'm done. I believe. 

OK. So what this is, is that background is going to be set to some string. Right? Which is what we have here. It's going to be some RGB 255 comma 255 comma zero, or whatever number you have there. So we're doing here, we have some string. And what we want to do, is we're kind of dynamically creating that when we actually run this program. So this is some string. Plus concatenates it with the value that red has, which concatenates it with a comma, which concatenates it with what green is, and so on, and so forth. OK? Until the very end, which is the closing parentheses of this RGB here. OK? 

So what this is going to generate is some command really that is RGB of three numbers that background is now set to. OK? So let's see if this works. I hope it does, because if it doesn't, I'm going to be real sad. Oh no. OK, hold on. Definitely background dot style dot background. I'm definitely missing something just small. Don't you guys hate that? When it's just a small little error? Almighty background. RGB. 

AUDIENCE: [INAUDIBLE] ALLISON BUCHHOLTZ-AU: No. I tried this before class. I have everything I did before class in case I was like, "wait, what did I do wrong?" Because I was like, "I will probably mess this up at some point." Plus green. Everything looks like it's concatenated correctly. OK. 

AUDIENCE: [INAUDIBLE] 

ALLISON BUCHHOLTZ-AU: Oh, there you go. That's what I needed. Look at that. Tiffany to rescue. Perfect. OK. Now let's see if it works. Oh my God. OK. Hold on. 

AUDIENCE: Space after the second plus. 

ALLISON BUCHHOLTZ-AU: Which one? Oh wait, hold on. Space wear? 

AUDIENCE: Second plus in the green concatenation. ALLISON BUCHHOLTZ-AU: Oh. AUDIENCE: There's no space after the plus, yeah. ALLISON BUCHHOLTZ-AU: You don't need that, but-- AUDIENCE: Oh, you don't? ALLISON BUCHHOLTZ-AU: It looks pretty. AUDIENCE: OK. OK. 

ALLISON BUCHHOLTZ AU: Let's see if this works. OK. I'm obviously failing at this demo, which reminds me of a lecture the other week, but I know this will work. I know this will work. So close. Unless I accidentally deleted my script on this one. No, it is party dot js. OK hold on. I'm going to copy this, and I'm also just going to delete everything, because I had this working earlier. 

I promise it works. If not, I will show you what Tommy's is. And there. 

AUDIENCE: You're referencing party dot CSS, and it's a party dot js. 

ALLISON BUCHHOLTZ-AU: Ah, well right here is party dot js. OK, what did I do different? OK, we'll see if this works now. Bam. So, I don't know what I did differently, but this is what should happen. Kinda cool. I clicked on this, like, forever. But we can try and see what I did differently that this one had. I don't know about you guys, but this looks basically what I just wrote. There was probably a missing semicolon somewhere is my thing. Actually after, I think I was missing a semicolon right here actually. But I couldn't see it because it was off the screen. 

But if we notice, this is pretty much exactly what I just wrote. I think probably the hardest part about this is just kind of this thing right here, understanding what it's doing there. These sorts of things you learn really just by Googling and honestly just trying. If you think there's some attribute, there probably is. So try it. See what happens. As I said, there's a lot of experimentation with JavaScript, and PHP, and all that stuff, and CSS especially. That's the only true way to understand it. 

OK, so after that fiasco with party dot js, we have two other options. We have clock or Twitter. They're both interesting. Maybe not quite as fun as party, which had a cool little strobing thing at the end. Do you guys have any preference? AUDIENCE: Clock? ALLISON BUCHHOLTZ-AU: Clock? OK. Cool. 

So again, we have our empty JavaScript file. And as we see here, we have some very simple HTML. We have our style sheet, that just formats what it should look like. We have our div with an Id of clock, which just says, "this should be a clock." And we have our link to our JavaScript file that's actually going to generate our clock for us. Because the cool thing, is that you can set JavaScript to automatically refresh itself. OK? So instead of waiting for the user to hit Refresh on a page so that you can get updated time, JavaScript can update it however it likes. 

So, as with our last one, we wanted to access our background, right? So what do you think might be the first thing we want to do here? If we're kind of going off this sort of paradigm here? We probably want to access our clock, right? So, we have some var clock, which equals-- what do we think it's going to be? Document dot get element by-- I also love Sublime-- Id and our Id is clock. Semicolon. Got to make sure to get those semicolons this time, because I feel like that was the problem last time. OK so, as I was just saying with trying to have JavaScript refresh itself, there's this great function, I know it came in handy last year, I'm not sure it comes in handy for this pset, but it's called set interval. And this is actually really cool if you guys do anything with time or getting updated information. On a website for a final project, this is probably a function you want to get super familiar with. So what set interval does is that we're going to give it a function, and how often it should call this function. OK? 

So in this case, we're just going to create some anonymous function again, OK, that is going to get our date, and our time, and then update things and display it. So we'll worry about that. We'll be like generate clock here. But what we need is how often to refresh it. So in this case, it's just milliseconds. So we're just going to do 100 milliseconds. Of course, completely arbitrary. If you wanted it to update much more slowly, you could. We can mess around with the set interval, how big our interval is after we get a working clock, which hopefully I'll get to. So this is just saying, "OK, call this function every 100 milliseconds." OK? That's all it does. 

So what we want our function to do is we want to have some date and some time is what we're going to have. So We can start with our date equals something, and our time equals something that we don't know yet. Or actually, we just need date, because date is going to include everything. Again if you just Google anything about what you want to do, if you write, "OK, I want to get the time via JavaScript," it will give you this great function called get date. Literally, most things that you want to do, JavaScript is going to have it done for you already. So it's literally like new get date, which is creating-- or new date, rather-- which is generating some object that represents a date. 

And what we're going to do here is this is-- I'm going to write this, and then explain what it does. So I'll make sure I get this right. 

OK, so what this function does, is we're just creating the HTML that's actually going to go within our div Id of clock. So what this is going to be doing is just generating some string, OK? That is then going to be transplanted into our HTML. Basically what it's going to do is whatever we-- what I will show you is that whatever we say HTML is, we're going to replace this text here with whatever HTML is. So this is going to allow us to change our clock dot HTML from being just the text of this should be a clock, to actually showing the numbers and things that we care about, and actually be o'clock. 

So what we're going to do is we're going to start generating this HTML. So in the same way that we used to do plus equals for integers, you can now do that for strings, except it's going to concatenate them. Right? As we saw with party dot js, this just concatenates all these things together. So you can concatenate different bits of HTML from variables, or bits of strings that you write out yourself, and this just really allows you to dynamically generate HTML, which is pretty cool. So if you have something very user specific, this can allow you to do that. 

So we have HTML, to I'm going to try and make sure I get this right. So we're going to do some h1 header. So what's important to realize here is that this is actually just HTML. Right? We are writing actual HTML code in here, it's not just a string in the normal way that we would think about it. So we have some HTML. This is considered a string here though. And we do date dot-- we want to get our hours. Again, if you were to look up anything about date, it would tell you these are all the attributes that date has. And here's what you can use on it. So it probably has things like get hours, and get minutes, and get seconds, and get milliseconds, and who knows what else they have. But if you look into the documentation, it will all be there. 

So we have get hours, and then we would want to concatenate that with-- I'm going to move this over here. So if we're generating right now, we're actually generating the time, right? We have hours, and then what's between hours and minutes? You have a semicolon, right? So we want to do some semicolon here. And then we want to get our minutes, so in the same way that we have date dot get hours, how might we get our minutes? It's literally date dot get minutes, which I kind of like. It's like, "oh, how do I get my minutes?" I just get my minutes. 

OK. And then we have another colon here. And then if we want to get our seconds, how might we get our second? Date dot get seconds. I think it's pretty cool. And what's important to realize, is that we also need to close our HTML tag here, because it should still be valid HTML, so h1. Cool. 

So after that, we can do clock dot inner HTML is equal to HTML. OK? So remember how I said inner HTML basically takes whatever is between the two tags that we talked about and inserts or manipulates whatever is in there? So what this does, if we go back to our clock, is that clock refers to everything within this div. This is the inner HTML of this Id clock div. And so it's going to change it to the HTML that we just generated, which, which, hopefully, hopefully, hopefully, will show the time right now. We'll see. Of course. So many technical issues. Allison's just-- I'm off my game today guys. OK, that works. clock dot inner HTML. It was HTML Really? Also this is what happens. When you can't see something, you just look at your source code. OK. Do you wanna know a cool work around that we're going to do right here? 

AUDIENCE: Can you do capital letters? The capital letters? Because you have get hours, and then get minutes. 

ALLISON BUCHHOLTZ-AU: It is get hours and get-- oh. You are-- gold star. It's all a test, guys. I promise it was working before class. 

OK, but something cool to know is that you can also-- if sometimes your external files are getting a little crazy, you can also just put them straight in here, which tends to fix things. Except this is like really ugly. Of course format everything. Make sure it's all pretty. OK. 

I wanted to do all the cool demos, and they're just not working out. OK. Script var clock. Anyways, what's important is that this is the general way that you would format JavaScript. As you can see, it can be very finicky sometimes, even when it was literally working two seconds ago. Or not two second ago, but very, very recently. 

So to show you what it should look like, and to show you that I'm not crazy, and that everything is exactly the same, this is what it should look like. You're just going to do this top part here, and if you view page source, if you notice, he did some crazier things, I simplified it. Also, credit to Tommy McWilliam, who actually helped me create these examples, which is why I know they work. Because Tommy is a JavaScript master. But if we notice, we have some set. We have our clock function here. This is all the JavaScript that we just wrote, or some of it. We just wrote this one right here. And he has an extra function that just pads it by putting a zero before a letter or before a number if it's just one of them. So if you notice, this is pretty much exactly what we just wrote. You have some variable clock that has our element, get element by ID, which is clock. We have our set interval function, that's an anonymous function that executes all of this. We have some starting string of HTML that we then dynamically generate by having some h1 header, concatenating with get the hours, plus our colon, plus getting the minutes, plus another colon, plus our seconds, and finally the ending HTML for it. And then we update our clock dot inner HTML to HTML, and we update every 100 milliseconds. OK? 

See I promise I'm not crazy. I don't know. I don't know why it doesn't like me. I feel like looks the same, but apparently it hates me. 

So let's see if round three goes better. We're about to see. I'm not sure how this is going to go. Is everyone at least getting the cons, like just the general theme of JavaScript, though? I hope that's at least useful, more than showing that it's a little finicky. But your problem set will be very fun. It's going to be great. It won't be quite as tedious as this, I don't think. You'll actually get to see really cool things. 

So last but not least, we'll try the Twitter one. I'm really scared now, guys. I don't know how this is going to go. But just to give you a little more taste, and this is actually manipulating strings and inputs, what we're going to do is, if we notice here with HTML-- this one has a little bit more-- we have some text area, which corresponds to this text area here. OK? And that has an Id of text. We restyled it a little bit with some width and height that we've predetermined, and we have h1, which just is our header one that represents our characters left. We gave it some Id of characters remaining, and then we have some script here, which I'm really hoping third time's the charm here, guys. 

So what we want to do, in the same general vein that we've done with clock dot js and party dot js as we've noticed, is we've started by actually grabbing the things that we care about, right? So in this case, there are two things that we care about, OK? One thing that we're actually kind of looking into and drawing data from, and one thing that we're actually changing. So there's our HTML. If this is our web page here, what's the data that we're looking at? It's going to be whatever the text in our boxes, right? So whatever I type in here. That's what I want to know, or that's what I want to look at. And what's going to be changing on our web page? The characters remaining. So in the same way, we want to start by initializing variables that actually hold onto those elements. OK? So if we have some var that is our text area, and we have some var that is remaining. Right? So these are going to hold those two things. So the same sort of thing, document dot-- OK, I'm going to make sure this is going to work this time. I am very adamant. OK, so if we want our text area, according to our HTML, what's our identifier? What's our Id? It's just going to be text because this creates our text area, OK, and our Id is text, so that's how we can grab what's in there. OK, semicolon. I'm going to be super precise about this, because I want this to work this time. OK, do the same thing, get element by Id. I'm really wondering what has caused the other two to mess up. OK, then in this one, what do we want to access? What's our Id here? We have another Id in our HTML, what is it? AUDIENCE: Characters remaining. ALLISON BUCHHOLTZ-AU: Characters remaining. 

OK. Cool. So I'm just going to write this really fast. I'm just going to write this in second. So text area. What's interesting is B function-- there are lots of functions that not only correspond to your mouse, but your keyboard. OK? So you can say when any key is pressed, you can do things like that. So the one that we're using is called on key up, which says, "if you've pressed any key on your keyboard, when the user has lifted their finger off that button, and the key has become unpressed, then we're going to do something." OK? So this makes sense, right? Because every character we type, we're going to have to lift our fingers off of it, so when the key goes up, we can know to decrement our characters remaining. 

So we have some on key up, and in the same way, we're going to say, "OK, when we do that, we are going to create some function that is going to take e," in this case, and what we want to do is calculate the number remaining. OK, so let's just start by creating a variable. So we have some variable r, that's going to represent how many characters we have left. OK? We know that we start with 140, and if we want to know, let's say, the length of this string that's been input, do you guys have any idea how we might do that? Just based off of the obvious things, like if we wanted hours, we used get hours. We know that our object is text area, but could you guys think of what might come after it? Any ideas? 

So this one's kind of less intuitive, but it's value dot length. So just give me some value attribute that is actually the length of this string. So it's going to say, "OK, I'm looking at this entire string within text area, and I'm going to tell you how long it is." Because if we remember strings are really just arrays, so we can just take the length of them. So we have that. Cool. 

Then what we want to do is we never want to allow the user to input more than 140 characters, right? Because if we say like, "oh, you only have this much remaining," and then let them do that anyways, we've been lying. And this is another thing that JavaScript can be really good for, is user validation and making sure that your user fits within any rules that you've provided to them. So if you want to do things like making sure someone input their email address, or making sure that when they enter two passwords, they matched. JavaScript can do that. You would do something like, "when the form is submitted," or like, "when Submit Form button is clicked, check all these things." And we can do that JavaScript. So that's just what we're going to do here. 

So what might be a way to check if they've gone over 140 characters? What's going to happen to our value of r if they try? It's going to be negative, right? Or it's going to be less than or equal to zero. So we can use an if that is just like everything else. OK? And we have some text area dot value, and what we're doing here is we're just cutting-- what is it? Sorry. This one, we just want to return false. I got confused. All frazzled from things not working. OK, we just want to return false, and then we want to display the remaining characters, right? So with the clock, we did something with inner HTML, right? Where we set it equal to some variable, so what might we do here? What are we changing the inner HTML of? 

AUDIENCE: Remaining? 

ALLISON BUCHHOLTZ-AU: We're changing remaining. All right, and what do we want to set it equal to? It's going to be r, because that should be our characters remaining. OK? So I'm really nervous to see if this works now, but we'll see. Leave this. That's really fast. [INAUDIBLE] OK. Again, I'm just going to show you. For whatever reason, mine decides not to work, but what I will show you is that this is-- oh I was supposed to put that in. OK, we notice the same sort of thing here, getting the text area. 

Also, if you guy notice, if there's ever something you want to do, and you don't know how to do it, just click View Page Source, and they're going to tell you. Sometimes it'll be encrypted. For your pset, we encrypt everything, so it just looks like gibberish. But if there's ever a really cool website that you like, if you just click View Page Source, it's going to tell you how to do it. So again, work smarter, not harder. And as you see here, all of these things are the same. this one here just takes some substring that, I forget exactly what this does. But it obviously takes some substring of the value from zero to ten, and returns false what should stop the user from inputting anymore, and then obviously updates the inner HTML there. 

Cool. So big take aways from today, experiment, look at source code because it's going to help you a lot, and everyone, sometimes JavaScript can be hard to work with and doesn't always work the way you expect it to, but just keep trying because I promise it will. I promise all of these examples were working before class. I don't understand what happened. I literally have everything the same. 

One more thing that I just want to show you guys that can be super useful is in-- what was working before? We got party to work, didn't we? I think so. Yes. We did. Awesome. OK, so one thing that you guys should know is the console log that I talked about. So console dot log of hello. So this is kind of the JavaScript equivalent of printf. So if you ever want to inspect your variables or see what's happening there, what you can do is, if we inspect element, is what you want to go to, and you go to console, you'll see that it printed hello. 

So we could have it print whatever we wanted. If we wanted it to print background dot style dot background, we should be able to see the RGB triple that comes up. Or not. I forget exactly how you print a variable like that, but you should be able to print out things like that. That will be very useful for your pset when you're trying to manipulate coordinates or whatnot. So they also change this piece in class. This is different from last years, so just be nice to your TFs, or the TFs at office hours rather, because we're kind of learning along with you guys. But the console log was super, super helpful for JavaScript last year. So love it. Learn how to use it. It's easier to use than GDB, so that should be at least a plus point. But thank you guys are bearing with me. I'm sorry that my examples for some reason just did not want to cooperate with me, but I hope that it helped kind of get you a little more in the zone of JavaScript. And send me all your questions for next week so I can be super repaired, and I'll bring candy and even extra candy because this was ridiculous. But you guys are great, and have an awesome week.