TOMAS REIMERS: Hi, everyone. My name's Tomas Reimers. 

MIKE RIZZO: And I'm Mike Rizzo. 

TOMAS REIMERS: We are two of CS50s TS. And today we're leading the seminar on JavaScript and CSS for web apps. If you want to follow along, the link is right over there. And do you want to put it up on the computer briefly? 

There's the link. It's a small site, which has links to all the resources we're going to be pointing you today and also has a lot of useful information written by us to read more in depth when you go back, and you're trying to remember what exactly did we say, what were you talking about, et cetera. 

MIKE RIZZO: All right. So let's begin. 

TOMAS REIMERS: So you want to start? OK. 

MIKE RIZZO: Yeah. So we first wanted to start with a broad overview about the internet and file types when designing websites. While this presentation we do want to get into into JavaScript a lot much later on, we wanted to start off with just, kind of, like a bird's eye view of what a website is and how to think about designing a website for the start. 

So you guys, at this point-- with it being Friday night-- should have submitted your CS50 finance problem sets. Hopefully, that was a good taste of what web programming can be. But here we want to, kind of, give you another taste, as well. 

TOMAS REIMERS: So just to recap what happens, when you type in your URL to your web browser, that URL gets looked up in the computer. And your computer's connected to another computer, which hosts that website. OK, so when you go to google.com, you're connected to one of Google's computers, which has the files for google.com. 

It then asks for a specific file. So if you go to-- I don't know-- example.com/index.html or /test.html, you're going to ask for that specific file. And the web server's going to return it to you. 

Then, once you go through that file-- once you're computer gets that file-- it's going to start to build a web page. So now it has the HTML file, which is sort of like the structure of the web page. The HTML file could also reference CSS files, which define the style of the web page. 

JavaScript files, which defines interaction with the web page. Image files, which are just images. And possibly link to other HTML files, which you can then visit. 

MIKE RIZZO: OK, great. So you guys have all, perhaps, painstakingly set up your local host on your virtual machine. And that just, kind of, is the local domain that your computer hosts only for you at your own IP address. 

So within that, then you can add to it your own web pages. I mean, in CS50 Finance, you should have added some HTML pages, which are, sort of, wrapped in the PHP wrapper. But ultimately, what your PHP pages were outputting was HTML. 

But thinking back to the very beginning of the PSET, we had to set the permissions for everything, right? So this just basically lets us know who can read, write, and possibly execute each of the files. So we're going to do a quick-- hm? 

TOMAS REIMERS: So we're going to do a quick demo. So just to remind you, when you connect to Google's computer-- whoever-- and ask for a file, the computer first needs to make sure you're authorized to actually view that file or read that file because you can't just ask for any file on that computer, right? That would be a security hazard. 

So files on the systems we use, like this CS50 appliance, have three general people who can have permissions to something. The first is the actual owner of said file. The second is the group that the file belongs to. We're not going to focus too much on that. And the last thing is, sort of, like the world or like everyone else who's not specific to that file and doesn't have any ownership rights over it. 

So if we have owner, group, and then world. And then, for each of these groups, you can have one of three permissions, OK, or multiple of them. You can have read permissions. You can have right permissions. And you can have execute permissions. 

So in terms of actual file types, read permission is like actually reading the contents of the file. A right permission is writing to said file. An execute permission is running the file like you do when you run one of your CS50 projects. 

So when we're thinking about files like when we need to read an HTML file, that needs to be world readable, right? Presumably, also the owner wants to be able to edit that file. So the owner's going to need read and write permissions. They don't really need execute. 

Group, we're going to treat the same as the world for now. So they need read permissions. But they don't need write or execute permissions. And now, if we think back to former PSETs, what we realize is these kind of look like binary, right? 1 stands for yes. 0 for no. And we can actually translate this to binary. 

So 110 in binary would be 6. 100 would be 4. Same with world. So the number you would get for the permissions for this would be 644. 

MIKE RIZZO: And if you think back to when you chmoded something, I believe they gave in the problem set the example of where you could do something like chmod 644 and then file name. The 644 then, you can now see directly where that comes from. So hopefully that makes that a little more clear. 

And then for you guy's clarity-- oh yeah, here this is again. So 600 then would just be the example we gave up here where the owner has read and right permissions while group and world don't have any permissions to access the file. 

TOMAS REIMERS: And then we have a quick list of common permissions. So directories, you want to actually chmod 711. Quick aside-- for a directory to have executable permission means to be able to open the directory. Images, CSS, JavaScript, HTML needs 644 because, basically, the world needs read permissions. 

And PHP, which you guys have seen although we won't be talking about it strictly is typically chmoded with permission 600 because it's run with the permissions of the owner. At least on the appliance. 

MIKE RIZZO: So if you don't specifically specify what type of file you want in actually setting up this presentation-- we had a problem with this because everything wasn't chmoded correctly-- you're going to get, kind of, a forbidden error that the website doesn't actually have permission to access whatever file you want it to access. And of course, that can be fixed-- as in problem set-- by changing permissions appropriately. 

TOMAS REIMERS: And the last comment for quickly local development is-- we brought this up, but we just wanted to bring it up again-- if you ask for a server-- so local host, for example, .com or whatever-- and you don't specify a specific file, the file that your computer is going to ask for is called index.HTML. Or if that doesn't exist, index.PHP. 

Cool. So that's just a recap of everything, hopefully, that we've covered in section, and lecture, and so far in CS50. And now we're going to start talking about specifically libraries. JavaScript and CSS libraries for web apps. 

So one quick reason why we have libraries is programming-- there's a lot of problems in programming, which keep popping up again, and again, and again. You may notice that a lot of websites need the ability to have drop down menus, for example, or need the ability to have a very standard button style, which may not be the easiest thing. Now that you start to get into HTML, you realize that buttons can actually look really ugly if you don't do anything. 

So a lot of people have written called libraries. And in this context, they're also called frameworks. We're going to use the two interchangeably. And what they are is they're basically premade pieces of code-- either CSS or JavaScript-- that take away a lot of the team you have in coding. 

So they pre-define a bunch of classes or pre-define a bunch of functions for JavaScript's case, which you can call later on. And then you can, sort of, get access to this code without having to do anything. An example of the library was CS50.H. That was a library we gave to you back in week one, which allowed you to do things like that GetInt and GetString without having to write any code yourself. 

MIKE RIZZO: All right. So here, just like we had to include in our c files the different libraries, we also should include in our HTML files different libraries. For instance, if we wanted to include a specific JavaScript library here, perhaps, one that we've written ourselves as it's locally hosted called script.js, we just use this notation. 

So we have script type equals JavaScript source equals JavaScript.js. And if you think back to your CS50 finance problem set, if you looked in header.php in the templates folder, you should have seen some of these included. So this first one-- the scripts-- is including a JavaScript library. Including a CSS library is a little bit different. 

Here, instead of the script tag you need the link tag. And then, the text CSS type is a little different. You don't always have to include rel style sheet. But I think it's, generally, good practice. 

And then finally, the HREF, which you probably saw in your ATAGs for linking in different links just specifies the link of where to find that. For instance, if we wanted to link a different library-- let's just say-- that lived at styles.css. And we wanted to link that in that's hosted on the web, we would copy that. And then paste it into whatever we have right here instead. 

TOMAS REIMERS: OK, hopefully you guys are already familiar with how to link CSS. You had to do that on your last brown set. JavaScript, some of you maybe have some experience with. Some of you may not. 

So for now, know that a JavaScript file is very much like a CSS file in the sense that you can link to it or that you can include it internally. And it allows you to script things. And we're going to walk you through a little bit of JavaScript later on. 

So using a library-- once you've included it, it's as simple as literally calling the functions or adding the class names to it. The last thing we want to talk about in terms of library-- and this is more of a technical note-- is open source licensing. So when you find these actual libraries, you may be thinking of questions like is it OK that I'm just using someone else's code, especially because that's something we very much told you to not do in this course. 

So in the case of open source licensing, a lot of developers-- once they've written a library, which they think could be helpful to other people-- will publish it to the web and give it a license. And a license basically says I am hereby granting permission to other people to use this piece of software with the following sort of stipulations. 

We've included a link to a good site to help you understand the licenses in case you run into them. Common stipulations are things like you're welcome to use my library so long as you give me credit. You're welcome to use my library so long as when it breaks you don't blame me. You're welcome to use my library so long as you don't use it to make money for yourself. These are kinds of common stipulations. 

For this CS50 final project, they shouldn't be super relevant because the projects that you guys use are probably rather, sort of, known. But when you actually go out into the world and start using libraries, which may or may not be as well implemented as some of the more popular ones we're going to be going through. It's good to be able to understand these licenses and to understand what they mean. And going back. 

MIKE RIZZO: OK. So now moving onto examples of actual CSS. At this point so far, you might not have encountered this. But you might have encountered it in your everyday life where something that looks one way on one browser might not look the same way in another browser. 

This is called browser browser compatibility. And increasingly it's becoming more and more of a problem, especially as browsers take more and more liberties to implement things as they want. So to overcome that, there actually is a great library called Normalize.CSS. 

TOMAS REIMERS: We included the link. At this point, it's helpful if you have your laptop in there looking at the site. And we are giving this to you right now simply because the CS50 final project is actually going to ask you to implement it similarly and through browsers. 

So just to keep in the back of your head, this is a wonderful library because it will, sort of, standardize things. In Firefox, something may show as one pixel to the left. And then Chrome may decide that actually what you meant was 10 pixels to the left. And you want to standardize this. Normalize will actually do a really good job of making sure that your site looks the same across browsers. 

MIKE RIZZO: So if we wanted to just click the link really quickly and show you what that looks like, you can download it using the giant Download button. Or I encourage you to read more about it by clicking this link in the lower right hand corner. 

TOMAS REIMERS: And if you actually click Read More right there-- click the source on GitHub-- you'll actually see the open source license on LICENSE.md right there. And you'll see here is the very popular MIT license. Again, if you read through the text, you'll be able to find it on the site we referenced before and be able to understand it without having to read through the legal jargon. 

MIKE RIZZO: OK, great. So that's Normalize. We wanted to give you that really quickly. Oh, do you have a question? 

AUDIENCE: So when you download it, you just follow that code that they have under the Download button? 

TOMAS REIMERS: Yes, so when you download-- 

MIKE RIZZO: Oh, that's a great point. So the question was how do we actually download it? So if we click the link, we see that it actually pops up at the source code. So to do this, what we could do is just click Save As. Save As and that should bring up a file. And then we can choose to save it as normalize.CSS. And then you'd have to link it in-- 

TOMAS REIMERS: The same way you link in any other file. And once you link it in, what's great about Normalize is it will actually take care of all the hard work by itself. Meaning that you don't have to add any classes. 

You don't have to do anything weird. It will normalize without you doing anything further. Yes, you have to include it. Google Chrome is not responding. 

Just a quick aside-- I noticed we jumped into this. The rest of this presentation is going to be a quick overview. A survey of libraries. 

Basically, what they are. What they do. How they're useful. How you might implement them. If you want to start looking at them, following along, and reading through them, I would highly encourage that. 

Alternatively, you're welcome also to start downloading them and including them in a sight just to see what they look like or what they do if you have your laptop in front of you. If not, you're welcome to keep listening to us talk. We're going to keep talking. And we have time at the end, hopefully we'll actually get into showing you what some of these libraries look like. 

MIKE RIZZO: Cool. All right, so now let's talk about Font Awesome. 

TOMAS REIMERS: so Font Awesome is a really neat site, especially for those of us who are less artistically talented. Ignoring the name Font Awesome, it gives you a bunch of icons, which are very useful. So a lot of times you'll implement an icon you may want like a nice x so that you can close something. 

Or you may want some kind of Edit button with a pencil drawing like everyone else has. And that's when you learn that drawing those icons can be very tedious and difficult. Font Awesome-- if you actually go to the site-- gives you a lot of icons under the icons at the top. Yeah, just the top. It will give you a lot of icons for free. 

So here you see we have things like an asterisk, bars, a lightning bolt, a calendar, a bug, a book, et cetera. This can be very useful. The way you include this is you include literally the CSS file. And after you've included the CSS file, what you can do is you create a tag called I. It satands for icon with the class FA standing for Font Awesome. And then, whatever class you want. 

So if I wanted a icon of this plus square right here, I would give it the class FA. And then FA hyphen plus hyphen square. 

MIKE RIZZO: Cool, OK. 

TOMAS REIMERS: And then, the last CSS library we want to get through we are trying to keep it minimal on CSS libraries because we do realize the title of this presentation is JavaScript Libraries. But we thought that we may as well introduce you to the other libraries while we were talking about libraries. 

It's Google Web Fonts. And what Google Web Fonts allows you to do is add fonts to your website, which is a really easy way to make it pretty and to distinguish your set from everyone else's is if it has a nice font or if it has a nice collection of fonts. Google Web Fonts is nice unlike other libraries in the sense that it's a really guided installation. 

So if you follow the link, it's google.com/fonts, I believe. If you follow that, you can pick your font. You can choose on the left from thickness, slant, et cetera. And then, once you've chosen one, you can click quick use. Right there. Bottom right of the box. 

And then, scroll down. First of all, they give you the CSS that you need to actually link to it. It's right there. You can just copy and paste that in. And the nice thing about this one is you don't actually even need to download the file. 

What's it's going to do is it's going to link to Google's version of it. So back to what does that mean. That means when a user downloads your file-- downloads your HTML page-- your HTML page is going to reference this file. 

So then, your computer's going to see, oh, it's hosted on google.com rather than on theirsite.com. Let me go ask Google for that file. And then, it's going to include it almost as if it were a part of your own site. 

TOMAS REIMERS: Cool. And once you include that, then to include it in your CSS, it gives you the actual line. So you set the property font family equal to the name of your font. 

MIKE RIZZO: OK. So we just finished with CSS. And some of you might be thinking, well, we had some CSS on CS50 Finance. But CSS library was bootstrap. We actually include Bootstrap a little later on under JavaScript because with the Bootstrap CSS library also comes with a lot of JavaScript that Bootstrap or Twitter-- who made Bootstrap-- uses to manage all of their CSS. 

TOMAS REIMERS: Does anyone have any questions so far about CSS in general? We're good? Awesome. 

MIKE RIZZO: Awesome. 

TOMAS REIMERS: So moving on to JavaScript. 

MIKE RIZZO: So we wanted to talk about jQuery to begin with. Has anybody heard of jQuery before or used it? Yeah, a couple? So if you just work with native JavaScript, you'll find yourself typing a lot of long selectors a lot. So what jQuery does is it provides a nice wrapper for the JavaScript language that lets you easily select and manipulate different elements within the document object model of the web page or the DOM, which I think you guys have heard of in lecture at this point. 

TOMAS REIMERS: If you haven't heard of it or if you haven't watched lecture yet, the Document Object Model is basically how things are represented. So HTML sort of looks like a tree when you actually draw it out. You have the HTML element on top. You have the head and body. 

And then, within that you have everything else. That's referred to as the DOM-- Document Object Model. So a model which represents objects in the document is an easy way to think about that. And one of the great thing about jQuery is it really makes traversing that and manipulating elements within that incredibly simple. 

So simple, in fact, that the majority of JavaScript libraries or if not the majority, the grand majority of ones you'll see actually require jQuery so that they can run themselves simply because if you didn't have jQuery, you would waste a lot of time trying to figure out how to select certain elements and how to do other things. And the other great thing about jQuery is that it's cross browser compatible. 

So remember back when we said that not all browsers implement things the same way? This is true even in JavaScript. And one of the great things about jQuery is that it will detect the browser and detect the appropriate method. 

So if you need to select an element, Internet Explorer might say you're supposed to do this way. Firefox might say the correct way is this way. jQuery doesn't care. When you tell jQuery to select an element it will figure out how it's supposed to do it within the browser the user is currently in, and then do it that way. 

MIKE RIZZO: So let's not talk about the usage of jQuery a little bit. Just like PHP, jQuery has a particular fondness for the dollar sign. So you'll find that any jQuery-- well, not all. You can sometimes replace the dollar sign with the word jQuery. But generally, just because it's shorter, whenever you see jQuery being used it'll be with a dollar sign. 

So here we're just showing a beginning selector for an element in the DOM. Here, we have the dollar sign followed by open parentheses and then quotes. And within the quotes go our selectors for the different elements. Just like in CSS, we needed selectors to be able to style different elements within the page. Those different selectors translate exactly into jQuery and JavaScript, for the most part. 

So here we have a dot foo. So if you recall from lecture, the dot just means the class. So we're selecting element with class foo. So if I go ahead and open up our JavaScript console here really quickly just demonstrate it, if I just type the dollar sign, we see that it's some function that comes up. And it's just defined by jQuery. 

TOMAS REIMERS: For those of you unfamiliar, the console is a tool within Chrome, which allows you to, basically, run JavaScript on the current page. This you'll find incredibly useful when you're actually debugging and you need to be like, what is the current value of some global variable or what is something else? It's kind of like GDB with the exception that you can actually manipulate elements on the page with it in a much easier fashion. And also it doesn't, basically, check in with you before it does anything. 

So whereas, GDB might be like, are you sure you want to run the next step? The console's in real. So as the web page is rendering and doing whatever it's doing, the council's also running alongside it. And you can put impute code into that console, which will be run on the page. 

MIKE RIZZO: So to enter the console, I guess I should briefly mention how to do that. In the last problems that you may have used Chrome's inspect element functions or view page source-- and those are accessible just by right clicking on the page or a specific element and doing either inspect element or view page source. We can also access the JavaScript console directly by choosing inspect element. So then you just hit console on the far right side. 

Alternatively, you could have also gone to the upper right hand corner, which is cut off on this screen where it has the three horizontal bars. And you go down to tools and then JavaScript console here where can see-- at least on Windows-- the shortcut is Control Shift J. So then if we wanted to select an element within this page, just like I showed before, we do dollar sign open parens and then quotes. 

An interesting thing is, generally, single quotes and double quotes are exchangeable. So a lot of people just use single quotes because they're faster to type than double quotes because you don't have to hold down Shift. So I'll just do that right now. 

So I want to select something with class. Container, just because I know that's something that's on our web page right now. And I hit Enter. And we can see that it selected it. So it shows up that it returned that object. So that's a basic selection. If we wanted to actually manipulate it, you would have to call something on that selection, which we will get into later. 

TOMAS REIMERS: So just to look at that more in depth, this is no different than the function calls we made in C. The name of the function here is a little weird. It's dollar sign. It's just a name of a function. There's nothing special about it. 

We have open parentheses. Then, we have our one argument, which in this case happens to be a string, which is a selector for it. And then, we have our closed parenthesis. That's it. 

It's not that vastly different. Although, it does look very weird. And that can be, sort of, a sticking point for a lot of people. 

MIKE RIZZO: So similarly, if we wanted to select an element that has an ID, now we want to select by ID instead of class. It would be a similar thing where we just do the sharp sign for ID. So we're selecting here all elements that have ID bar. 

TOMAS REIMERS: And this extends. That CSS extends. Just like in CSS, you can select all links, which have the class foo. Here, it's the same thing. 

You could do a.foo, which would select all of the links with the class foo. You could do a sharp bar, which would select the link with the ID bar and so on and so forth. Any CSS selector is a valid jQuery selector. 

MIKE RIZZO: Yeah. OK, so now let's get into a little bit of manipulation that we can do with our jQuery. So jQuery has a particular type of notation where we just use a dot at the end. And you can think of this like in C how we had different structs. And to go into those structs, you would use a dot to get into them. 

This is, kind of, a similar thing. Only now we have functions within this selector that we can call on it. So here, the very first example you can see is a CSS selector. And basically, what that does is it applies the first element CSS to this thing that you selected-- this element that you selected-- with the value that. 

TOMAS REIMERS: So an easy translation of that would be if jQuery, basically, just took foo. And then in CSS said, color red and close. It's the same idea. What it's done is it's selected all foo elements. And then it's applied. Sort of, the property color is equal to red. 

MIKE RIZZO: Similarly, we can also alter the actual contents of what is showing on the HTML of the page, which is really cool because it means your web pages can now be completely dynamic and don't have to be static that you print out using PHP at the very beginning of the page being loaded. So here, if we wanted to alter the actual HTML of the page, we would now call the HTML function, which then just inserts whatever we specify into that element that we selected. So here we're selecting element with class foo and then saying it's HTML it's now hello world. 

TOMAS REIMERS: And when you think about what are useful applications of this, this CSS one, the first thing that you can start to think about is in terms of even drop down menus. You could start to do things like, when a user hovers over the top part of a drop down, you want to make the bottom part visible. Right? 

So in CSS, we have properties to make something visible. Things like display colon none would make it invisible. Display block would make it visible. Or even if you want to go simpler, you have things like visibility equals visible, and visibility equals hidden. 

And you could start to implement things like drop down menus right after you get through the idea of how can you figure out when this opens, which we'll get through very briefly. But we can start to see applications of this. In a similar sense, if you were to try and implement, let's say, a chat engine and you want to make a little speech bubble come up whenever you've got a new message, once you get the new message, you can make a little speech bubble come up by altering the HTML of the page, right? By adding that extra speech bubble with the extra text in there. Yeah? 

AUDIENCE: So you would embed this within the HTML code in sort of like a [INAUDIBLE]? 

MIKE RIZZO: Right. Yeah, we'll get to that in a little bit. Yeah, it's similar a little bit to PHP. Not exactly similar. 

A good distinction to make is what this is actually editing when we edit the page because it's not going to be editing the actual file that is being kept on the server because the world shouldn't have permission to edit your files. This is just editing what's on the page and what's being displayed within the browser. So if you were to reload the page after, say, deleting something as we see we can do with the remove call, that thing would then reappear. 

TOMAS REIMERS: So one way to think about this is if I'm your computer and Mike is, sort of, the server. What's going to happen is I'm going to ask Mike, hey, can I have a copy of this web page? And he'll give me a copy of it. 

No, it's not the original thing. It's just a copy. And then it would be like, oh, there's JavaScript here. Clearly, I should edit the page to be like this. And I'm editing your copy. 

But that's not effecting the actual copy. And if I were to ask him again refresh the page,-- hey, can I have another clean copy-- he's going to give me another clean copy. And then, I'm going to do the same thing like, oh, this JS here that says to edit this. And I'm going to keep doing that. 

MIKE RIZZO: So a really cool thing that you can do with jQuery is actually add different types of animations to your page. I don't know if you've ever seen where you're trying to a fill out a form online and you don't fill out the things correctly. So a little thing slides down at the top and says you haven't done this correctly. Please try again. And then, it might even just slide up. 

Turns out jQuery has built in functions that make all of that animation really, really easy. So there is first the fade out function, which you can call on something. And it's a way to change the CSS of that element in an animated way. So it takes whatever element you call it fade out on. And then, slowly changes it's opacity until it goes completely transparent. 

TOMAS REIMERS: The other popular one is slide down, which will make something appear by sliding it down. So in the case of the drop down menu, again, when we learned how to detect when this has been hovered over, you could just tell this bottom part slide down now. And then, it would appear by sliding down. 

MIKE RIZZO: And then, if you just have some type of animation in mind that jQuery doesn't necessarily provide. For instance, let's say jQuery does provide you with a slide down and slide up. Well, let's say you wanted to slide something in from the left or in from the right kind of like the CS50 main page does whenever you go to a new panel. You would then probably have to implement it yourself using the animate function within jQuery. 

So similarly, you just animate. And then, within it it takes a dictionary of the different values that you're supposed to pass. So here, if we wanted to animate the element foo such that its width either expands or contracts to 80 pixels, depending on what it currently is. We would just pass that as the argument within it. 

Animate also have some other arguments that you could pass it, for instance, the speed of the animation that you want to give it. And to do that, I would just say quickly Google jQuery animate. And then, bringing up this page, you can see it's got a bunch of different properties that you can pass it. 

And I encourage you-- whenever you come across something that you don't know or just want to learn more about a particular method that you can call on something-- just Google it. jQuery is extremely well documented. And often times there are a lot of examples that they provide for you. If we scroll down-- way down-- that we can use, as well. 

Again, when a developer actually goes through the trouble of writing a library, they typically want someone to use it. So alongside is going to be a documentation. And that documentation can usually be found on the project page, which is why we gave you that original site in the beginning, which links you to the project pages so you can see that documentation. 

Typically, the project page in the case of [INAUDIBLE], it told you the names of the classes. In the case of JavaScript, it gives you the name of the functions. By the way, if we scroll up to the top, a quick side note on functions is whenever you see a function implemented like this with the hard brackets in the middle, that means that that property is optional. Just a heads up. I've seen a lot of questions about that. 

So here we can see that the animate takes properties as a necessary argument. And everything else is optional. Side note-- you can think of this, sort of, like man pages. Man pages are documentation for C and for a lot of other things, as well. 

MIKE RIZZO: So we've learned how to change different CSS on the page, animate it, and remove add HTML. But one of the really most powerful things about JavaScript and especially jQuery-- what it lets you do is respond to different elements that happen. For instance, here we have an event handler. And that just means whenever this event happens, we handle it in a certain way. 

So here, the generic jQuery event handler is the dot on. And then, the first thing you provided is what event it should be listening for. So here, it's the click that we're waiting for. 

TOMAS REIMERS: Alternatively, you have on hover, which is a very popular one. So back to my drop down menu idea. You would have the top one on hover. And then you could change that. 

MIKE RIZZO: Right. And then, when that happens, it just executes this function that we give it as an argument and that it alerts hello or hi. 

TOMAS REIMERS: So in the case of JavaScript, this is a place we need to remove ourselves from C. We can actually take functions as arguments. And there are a lot of really complex ways to do this. We're going to promote one way, which is you can define the function right there. 

So when you're asking for a function as a parameter, you're basically just going to define the function on the spot. And the way you define a function in JavaScript is you literally say function. Then, usually, the name of the function. But we're never going to reference this function again. So we leave it nameless. 

Then the parentheses, then the curly braces, and then the code within that. So we understand this can be a little confusing. So we give you the general form of what an event handler looks like below, which is on events. And then, your code inside that. 

MIKE RIZZO: Are there any questions about this? This can be a little confusing the first time you see it. 

TOMAS REIMERS: You actually want to open up a file and show them some jQuery right now? 

MIKE RIZZO: Yeah, let's do that. OK. 

TOMAS REIMERS: So now we're in the appliance. And what we've done is we've taken the liberty of creating both an index.HTML file, which links to a JavaScript file. And can we open up the-- yeah. Well, it does two things. 

The first is it links to the JavaScript file. And we'll see that up here. We see that in the head of the HTML document, particularly. So you'll see there that we, basically, say SRC, which stands for source. And that's the URL. 

So here you can say we've included jQuery. And we've also included scripts. The other way to include JavaScript is that you can include an inline script tag as we have at the bottom where it says script type is text JavaScript. 

So we're saying, listen, we're about to include a script. And the type of that script is JavaScript, which is a type of text. Very simple. 

MIKE RIZZO: So this, kind of, gets to your question about how we include JavaScript in our files because when we had PHP, we do something like this. And then, have our PHP functions-- let's say stocks do something with that-- goes in there. However, now we have the script tags that we give it, which are actually part of the HTML itself because it's not faking being an HTML file like it is in PHP because if you actually go in and look at the source of the page, you'll see these script tags in there with the JavaScript associated with them in that. 

So then, if we wanted to write some JavaScript-- let's just say we wanted to change body because right now I don't have any other tags that I can really edit besides body. Let's just say I wanted to change the CSS of that. So we'll go ahead and change the color of it to red. 

So I save the file. Let's go back to our web page, refresh, and it does it automatically because it didn't seem like it waited at all because we weren't listening for an event or anything like that. 

TOMAS REIMERS: So if we go back to that file in particular-- the HTML file-- what you're going to see is we have-- remember that this is loaded, sort of, chronologically. So we have first the head. it loads those two files. Then we go to the body. And we see hello world. So we render hello world. 

And then the last thing we have is we have the script tag. So it runs the script tag because it's not telling it to wait for anything. And that's the most basic way to run JavaScript. 

With that said, can you put the script tag up in the header just to show this point? And run that. We're going to notice that it didn't change the color. And this is one of the problems of JavaScript is that things are loaded in a chronological order. 

So at the time that that code was running, we selected-- go back-- the body tag. The body tag doesn't exist yet because JavaScript is in line with HTML. So the browser is like select body. There's no such thing yet. So we can ignore that. And we keep going. 

And then we define a body tag. But that never gets updated. So when you're implementing script tags, make sure you place after the body tag. Next slide. 

MIKE RIZZO: OK. So we changed something. But it didn't look like it responded to us at all because it just kind of did it as soon as it loaded the page. So now, instead of doing this, why don't we add an event handler. 

So let's do something to the body again. And let's say we do it on-- click. We'll add a function. 

TOMAS REIMERS: Let's change it's color to red again. Why not? 

MIKE RIZZO: Yeah, let's change its' color to red again. All right. So let's reload the page. OK, we see-- as expected, it doesn't turn red yet. But then we can go ahead and click it. 

TOMAS REIMERS: And it does turn red. 

MIKE RIZZO: And it does turn red as expected. 

TOMAS REIMERS: And we can see how we can start to build very basic interaction. Other things we might want to do is, if we don't want to make the body color red, let's make the HTML background color red. Just so it's the same CSS. 

And when we change it, we can see this very dramatic effect of changing the entire page. So again, if you're implementing things, you can have one component which is meant to be clicked on. Let's say an Exit button and an entire other component, which is meant to respond. So you would remove a window when that happens. 

MIKE RIZZO: OK. Just as an example-- you didn't get to see this earlier-- I'll just show you what it looks like when we hide something. So I'll go ahead and do slide up. 

TOMAS REIMERS: Want to wrap that in a paragraph type before we do that? 

MIKE RIZZO: OK. Yeah, why don't we do that just so we can select it a little more. 

TOMAS REIMERS: And let's give it a class. 

MIKE RIZZO: Yeah. OK, so let's see. Instead of selecting the actual body now, I'll just select everything with class hello, which here we just have one thing. So we shouldn't have to worry about that. 

So I'll refresh it. I'll go ahead and click it. And it, sort of, did a weird slide up thing, which didn't look that attractive. Generally, they do look pretty nice. I guess, this-- for some reason-- didn't. I'll just do a fade out so you can look at that too. Much nicer. 

And then, if I open up the JavaScript console again and we want to see what it looks like when we fade it in. Now, I just call fade in on it. And it fades back in. 

Similarly, we could actually also pass an argument to fade in or fade out, which is, kind of, the speed of it. So let's go ahead and say we want it to go slowly fade in. So I guess it still seemed pretty quick. But it was slower than before. 

TOMAS REIMERS: And if you want to find out more about these things, again, just go to the jQuery documentation, which we've given you, and read through these. They document their functions incredibly well. 

MIKE RIZZO: OK. So I guess let's go back to this. And we can talk about our last page. Well, we can finish with Bootstrap. And then we'll open it up for some questions. And if you guys have any ideas that you'd like to try to throw up and see if we can implement them with JavaScript quickly. 

So really quickly about Bootstrap, which was automatically included in your last problem set in the CSS folder and actually linked to in your header.PHP. So you could have added classes that are defined within Bootstrap to it. And it would have automatically styled those things accordingly. 

TOMAS REIMERS: So Bootstrap is a very magical thing developed by the people at Twitter. And what it was meant to do was-- before websites were really hard to make look nice, especially when we had a lot of common components. So a lot of buttons on the web looked the same. 

A lot of text fields can be made to look better than the standard text field you probably know from really old websites or really poorly made websites, which just look like literal text boxes without any form of text shadow or any kind of nice outline. So what Bootstrap did was it said, well, we have a lot common styles. Why don't we make one common set of CSS and a common set of JavaScript as well, which can style it as is and which can give people things like drop down menus, which can give people things like modals. 

Modal is what pops over the page whenever it's strictly speaking something, which inhibits further interaction until you interact with it. Something like this is, are you sure you want to delete this thing? You can't really do anything else until you say yes or no. 

It took all this and it packaged it together and said, here we go. People can now use this. And you can find it over at getbootstrap.com. It was automatically included within your last problem set. And you're more than welcome to use it on your final project. And if you want to follow that link to get Bootstrap. 

You'll see here is the Bootstrap CSS site. You'll see Bootstrap. And if you scroll down, you'll see how to download it, how to install it, et cetera. 

MIKE RIZZO: And you can also, interestingly enough, customize it to be whatever kind of themes that you want. I know that's something I did for my final project when I took the class was customize it. A different version of Bootstrap that had a different color scheme and different shapes of some different things. So I encourage you to play with that. It's kind of fun to do. 

TOMAS REIMERS: Looking across the top again, it's very similar to the Font Awesome site. A lot of documentation will start to seem similar when you've seen enough of it. So here we have the CSS component of this. And you'll see how it can style things. So if you click on tables, for example, you can instantly make a table pretty by simply adding the class table to it. 

Same things for buttons. If you simply add the class BTN and BTN default or BTN primary, you can get any one of these buttons with these pre-made styles. And then, if you're looking for something more complex than simply restyling what w already have, over on the JavaScript tab across the top we have a bunch of components. 

So here we have transitions, modals, dropdowns, tabs, and tooltips. A tooltip is what pops up under your mouse when you hover on something. Popovers, alerts, buttons, collapsible accordions is what they're usually called. Carousels, which flip through like images. 

So those are the components of Bootstrap. I would encourage you to highly go look at them. There's a JavaScript component and a CSS component. Feel free to use them as you will. We're not going to go too much into them because we feel the documentation is really well done. And yeah. Do you have any questions about that? 

MIKE RIZZO: So as a are really quick side, the design of this web page that we quickly put together for this presentation is actually done using Bootstrap. As you can see, when we click on these different tabs, we're never actually leaving this current index.html page. So what we have is different divs within this index.html. And then, whenever we click a different tab, it's just changing which one's showing. 

So it accordingly positions them, changes the HTML of the page so that the current tab is marked as active so it appears differently and looks really nice. 

TOMAS REIMERS: So that was all done without us writing almost any CSS. We also see a header across the top, which the colors are by us. But the actual putting it on the top of the page and making it scroll was Bootstrap. And then even for another library-- this isn't one we talked about but one you can Google if you want. This is called prettify.js. And it will syntax highlight your code for you using both CSS and JavaScript. 

The last thing we want to talk about before we release you out into the world to look at libraries to figure out how to use them and to, hopefully, read documentation and find what you need is how to find libraries. So the first is we're just going to push Google. Go Google. 

That's literally what we do when we need to do something is we Google. Is there a JavaScript library that allows me to manipulate time in a useful way? So if I know that some user creating an account here, and this is the current time, how can I calculate the difference with that without having to calculate it myself? So this is actually a common thing, JavaScript time library. And here we Moment.js-- the most popular one. 

If we need a library to manipulate something like color to be able to generate a bunch of random colors-- possibly, to generate a style or something-- we could Google something like JavaScript color library. And I'm sure we would pop up with a thousand and one of them. You're welcome to read through them. 

So most things-- when you find them-- are going be hosted on one of the sites which host code. They're are a few popular ones. The most popular, by far, is github.com. And if you go to GitHub it's actually where Normalize was hosted. So if you want to go back to that one. Show them that. 

MIKE RIZZO: And that's actually where this is hosted too, if you noticed. 

TOMAS REIMERS: Yeah. So if you go over to Normalize and go to the GitHub. Were is that? 

MIKE RIZZO: That little cat thing is the GitHub symbol. 

TOMAS REIMERS: Oh. So GitHub uses a method called Git to store code. Is you don't know what that is or it frightens you, that's fine. You don't have to know what Git is because GitHub has a Download button at the bottom right. 

The other useful thing to know about GitHub is most products will have a read me. And if they don't have a website, the read me will talk about how you install it, how you use it, what it does, et cetera, et cetera, et cetera. What we've basically been walking you through. 

MIKE RIZZO: Internet's quitting. 

TOMAS REIMERS: That's fine. The last two things we wanted to talk about-- we've talked about Git-- is troubleshooting. And this one isn't as relevant for the final product as it is when you leave 50. And when you run into products implementing libraries or implementing your own project, you're going to have questions or you're going to look for questions. 

Again, Google it. That's literally what we do. This is going to sound silly. But literally, we Google it. And again, one of the first things you'll usually run into is stackoverflow.com, which is a wonderful question and answer sight. 

It's wonderful both because you can post the questions and look for answers but also because it already has a lot of pre-populated content there. So usually when you Google a programming question within the first couple hits you may have already run into it during your problem sets. 

And then, the last really brief thing is JSFIDDLE, which is-- today we've been doing a lot of work with JavaScript HTML CSS. JSFIDDLE is a web app, which basically allows you to take your HTML, YOUR JavaScript bottom left, and your CSS top right. And then it can create a quick render of it and see how it interacts. It's very useful when people are trying to do a proof of concept like this is how you would do a drop down menu. Maybe a quick uncover or whatever. 

MIKE RIZZO: So let's go ahead and click this. A quick note-- whereas, before we were doing on click. Turns out JCorey Korea also has a built in click event handler that it uses just because it figures you're going to want to do a lot of things when you want to click something. 

Similarly, it also has a hover. But to get the full scope of those, look at the jQuery documentation and do it. I did something stupid here. 

TOMAS REIMERS: So I have a really quick program right here, which says button on click. Then we have a for loop. For i is less than 404. It's just going to pop up these alert messages. 

MIKE RIZZO: And what was the code 404 stood for in HTML? Does anyone remember? Not found, right. Chrome also added this neat thing where you can-- 

TOMAS REIMERS: Because people like Mike started doing this a lot and annoying users, which allows you to see info. 

MIKE RIZZO: Yeah. 

TOMAS REIMERS: Do we have any questions about this, about JavaScript libraries, finding libraries, or what web development looks like in the real world? We're running up against time. So I'm not sure we're going to have time to implement unless it's really quick. Are we good? 

MIKE RIZZO: Anything you guys would like to see really quick in, like, two minutes or less? 

TOMAS REIMERS: Anything we can clarify? How to write in-- 

AUDIENCE: [INAUDIBLE]? 

MIKE RIZZO: Yes, so that's-- 

TOMAS REIMERS: You can just hit Control-U on the website. 

MIKE RIZZO: Oh, I didn't know that. 

TOMAS REIMERS: I think, yeah. Control-U. Yeah. 

MIKE RIZZO: Oh, so that's the code for the website. But if you actually want to download our files and everything, it is hosted on github.com 

TOMAS REIMERS: slash my name-- Tomas Reimers-- slash CS50 hyphen seminar. 

MIKE RIZZO: And you can find everything there. 

TOMAS REIMERS: This is what GitHub looks like, by the way. So again, when you see an open source project, typically, they'll be a read me there that you can read. And if you go back, you'll notice that you have the download zip, which will allow you to download the source code to include the product in your own thing. 

MIKE RIZZO: Yeah, and if we just click on the index.html really quickly-- 

TOMAS REIMERS: You'll see here's the source code for our website. 

MIKE RIZZO: Also, I forgot to push right before with the big table it included, but there's also a table of chmods that we included just for your clarity. But if we scroll all the way down to the bottom, we didn't actually do very much with the JavaScript stuff at all with this. It's exclusively from everything else that we had. 

So thank you guys for coming and listening. We hope this was really helpful. If you have any JavaScript related questions or just want to talk about what else like what other cool things you can do with JavaScript, we'd love to talk to you. 

TOMAS REIMERS: If you have a question about your project or if this can be relevant, we'll probably stick around a little bit after this. But other than that, have a good weekend. 

MIKE RIZZO: Yeah, enjoy. See you guys. 

TOMAS REIMERS: See ya.