1 00:00:00,000 --> 00:00:07,440 2 00:00:07,440 --> 00:00:08,180 >> TOMAS REIMERS: Hi, everyone. 3 00:00:08,180 --> 00:00:09,250 My name's Tomas Reimers. 4 00:00:09,250 --> 00:00:10,500 >> MIKE RIZZO: And I'm Mike Rizzo. 5 00:00:10,500 --> 00:00:12,990 >> TOMAS REIMERS: We are two of CS50s TS. 6 00:00:12,990 --> 00:00:18,910 And today we're leading the seminar on JavaScript and CSS for web apps. 7 00:00:18,910 --> 00:00:22,140 If you want to follow along, the link is right over there. 8 00:00:22,140 --> 00:00:25,190 And do you want to put it up on the computer briefly? 9 00:00:25,190 --> 00:00:27,460 >> There's the link. 10 00:00:27,460 --> 00:00:30,390 It's a small site, which has links to all the resources we're going to be 11 00:00:30,390 --> 00:00:36,490 pointing you today and also has a lot of useful information written by us to 12 00:00:36,490 --> 00:00:39,680 read more in depth when you go back, and you're trying to remember what 13 00:00:39,680 --> 00:00:42,166 exactly did we say, what were you talking about, et cetera. 14 00:00:42,166 --> 00:00:43,870 >> MIKE RIZZO: All right. 15 00:00:43,870 --> 00:00:44,890 So let's begin. 16 00:00:44,890 --> 00:00:45,700 >> TOMAS REIMERS: So you want to start? 17 00:00:45,700 --> 00:00:45,970 OK. 18 00:00:45,970 --> 00:00:47,170 >> MIKE RIZZO: Yeah. 19 00:00:47,170 --> 00:00:51,730 So we first wanted to start with a broad overview about the internet and 20 00:00:51,730 --> 00:00:54,240 file types when designing websites. 21 00:00:54,240 --> 00:00:57,550 While this presentation we do want to get into into JavaScript a lot much 22 00:00:57,550 --> 00:01:00,320 later on, we wanted to start off with just, kind of, like a bird's eye view 23 00:01:00,320 --> 00:01:03,270 of what a website is and how to think about designing a 24 00:01:03,270 --> 00:01:04,800 website for the start. 25 00:01:04,800 --> 00:01:08,370 >> So you guys, at this point-- with it being Friday night-- should have 26 00:01:08,370 --> 00:01:11,000 submitted your CS50 finance problem sets. 27 00:01:11,000 --> 00:01:15,260 Hopefully, that was a good taste of what web programming can be. 28 00:01:15,260 --> 00:01:18,261 But here we want to, kind of, give you another taste, as well. 29 00:01:18,261 --> 00:01:23,190 >> TOMAS REIMERS: So just to recap what happens, when you type in your URL to 30 00:01:23,190 --> 00:01:26,650 your web browser, that URL gets looked up in the computer. 31 00:01:26,650 --> 00:01:28,590 And your computer's connected to another computer, 32 00:01:28,590 --> 00:01:29,890 which hosts that website. 33 00:01:29,890 --> 00:01:33,150 OK, so when you go to google.com, you're connected to one of Google's 34 00:01:33,150 --> 00:01:36,496 computers, which has the files for google.com. 35 00:01:36,496 --> 00:01:38,750 >> It then asks for a specific file. 36 00:01:38,750 --> 00:01:40,020 So if you go to-- 37 00:01:40,020 --> 00:01:41,550 I don't know-- 38 00:01:41,550 --> 00:01:48,170 example.com/index.html or /test.html, you're going to ask for 39 00:01:48,170 --> 00:01:49,340 that specific file. 40 00:01:49,340 --> 00:01:52,780 And the web server's going to return it to you. 41 00:01:52,780 --> 00:01:54,910 >> Then, once you go through that file-- 42 00:01:54,910 --> 00:01:57,750 43 00:01:57,750 --> 00:01:59,950 once you're computer gets that file-- it's going to start 44 00:01:59,950 --> 00:02:00,820 to build a web page. 45 00:02:00,820 --> 00:02:03,020 So now it has the HTML file, which is sort of like the 46 00:02:03,020 --> 00:02:05,170 structure of the web page. 47 00:02:05,170 --> 00:02:08,620 The HTML file could also reference CSS files, which define the 48 00:02:08,620 --> 00:02:09,889 style of the web page. 49 00:02:09,889 --> 00:02:12,970 >> JavaScript files, which defines interaction with the web page. 50 00:02:12,970 --> 00:02:15,200 Image files, which are just images. 51 00:02:15,200 --> 00:02:19,450 And possibly link to other HTML files, which you can then visit. 52 00:02:19,450 --> 00:02:22,656 53 00:02:22,656 --> 00:02:24,380 >> MIKE RIZZO: OK, great. 54 00:02:24,380 --> 00:02:28,980 So you guys have all, perhaps, painstakingly set up your local host 55 00:02:28,980 --> 00:02:30,810 on your virtual machine. 56 00:02:30,810 --> 00:02:35,650 And that just, kind of, is the local domain that your computer hosts only 57 00:02:35,650 --> 00:02:38,760 for you at your own IP address. 58 00:02:38,760 --> 00:02:43,300 >> So within that, then you can add to it your own web pages. 59 00:02:43,300 --> 00:02:47,655 I mean, in CS50 Finance, you should have added some HTML pages, which are, 60 00:02:47,655 --> 00:02:49,410 sort of, wrapped in the PHP wrapper. 61 00:02:49,410 --> 00:02:54,690 But ultimately, what your PHP pages were outputting was HTML. 62 00:02:54,690 --> 00:02:58,210 >> But thinking back to the very beginning of the PSET, we had to set 63 00:02:58,210 --> 00:03:00,890 the permissions for everything, right? 64 00:03:00,890 --> 00:03:07,270 So this just basically lets us know who can read, write, and possibly 65 00:03:07,270 --> 00:03:08,730 execute each of the files. 66 00:03:08,730 --> 00:03:11,870 So we're going to do a quick-- hm? 67 00:03:11,870 --> 00:03:15,660 >> TOMAS REIMERS: So we're going to do a quick demo. 68 00:03:15,660 --> 00:03:19,560 So just to remind you, when you connect to Google's computer-- 69 00:03:19,560 --> 00:03:20,690 whoever-- 70 00:03:20,690 --> 00:03:24,060 and ask for a file, the computer first needs to make sure you're authorized 71 00:03:24,060 --> 00:03:28,790 to actually view that file or read that file because you can't just ask 72 00:03:28,790 --> 00:03:30,430 for any file on that computer, right? 73 00:03:30,430 --> 00:03:32,260 That would be a security hazard. 74 00:03:32,260 --> 00:03:37,020 >> So files on the systems we use, like this CS50 appliance, have three 75 00:03:37,020 --> 00:03:39,200 general people who can have permissions to something. 76 00:03:39,200 --> 00:03:41,610 The first is the actual owner of said file. 77 00:03:41,610 --> 00:03:43,820 The second is the group that the file belongs to. 78 00:03:43,820 --> 00:03:46,090 We're not going to focus too much on that. 79 00:03:46,090 --> 00:03:50,010 And the last thing is, sort of, like the world or like everyone else who's 80 00:03:50,010 --> 00:03:54,130 not specific to that file and doesn't have any ownership rights over it. 81 00:03:54,130 --> 00:04:05,650 >> So if we have owner, group, and then world. 82 00:04:05,650 --> 00:04:10,510 And then, for each of these groups, you can have one of three permissions, 83 00:04:10,510 --> 00:04:13,010 OK, or multiple of them. 84 00:04:13,010 --> 00:04:15,070 You can have read permissions. 85 00:04:15,070 --> 00:04:16,560 You can have right permissions. 86 00:04:16,560 --> 00:04:18,880 And you can have execute permissions. 87 00:04:18,880 --> 00:04:22,060 >> So in terms of actual file types, read permission is like actually reading 88 00:04:22,060 --> 00:04:23,250 the contents of the file. 89 00:04:23,250 --> 00:04:24,730 A right permission is writing to said file. 90 00:04:24,730 --> 00:04:28,370 An execute permission is running the file like you do when you run one of 91 00:04:28,370 --> 00:04:29,620 your CS50 projects. 92 00:04:29,620 --> 00:04:32,190 93 00:04:32,190 --> 00:04:38,820 >> So when we're thinking about files like when we need to read an HTML 94 00:04:38,820 --> 00:04:41,790 file, that needs to be world readable, right? 95 00:04:41,790 --> 00:04:44,420 Presumably, also the owner wants to be able to edit that file. 96 00:04:44,420 --> 00:04:46,610 So the owner's going to need read and write permissions. 97 00:04:46,610 --> 00:04:48,710 They don't really need execute. 98 00:04:48,710 --> 00:04:50,950 >> Group, we're going to treat the same as the world for now. 99 00:04:50,950 --> 00:04:54,610 So they need read permissions. 100 00:04:54,610 --> 00:04:57,310 But they don't need write or execute permissions. 101 00:04:57,310 --> 00:05:01,920 And now, if we think back to former PSETs, what we realize is these kind 102 00:05:01,920 --> 00:05:03,360 of look like binary, right? 103 00:05:03,360 --> 00:05:04,210 1 stands for yes. 104 00:05:04,210 --> 00:05:05,040 0 for no. 105 00:05:05,040 --> 00:05:06,870 And we can actually translate this to binary. 106 00:05:06,870 --> 00:05:10,478 >> So 110 in binary would be 6. 107 00:05:10,478 --> 00:05:13,270 100 would be 4. 108 00:05:13,270 --> 00:05:14,690 Same with world. 109 00:05:14,690 --> 00:05:20,846 So the number you would get for the permissions for this would be 644. 110 00:05:20,846 --> 00:05:24,400 >> MIKE RIZZO: And if you think back to when you chmoded something, I believe 111 00:05:24,400 --> 00:05:28,980 they gave in the problem set the example of where you could do 112 00:05:28,980 --> 00:05:36,470 something like chmod 644 and then file name. 113 00:05:36,470 --> 00:05:39,980 The 644 then, you can now see directly where that comes from. 114 00:05:39,980 --> 00:05:42,840 So hopefully that makes that a little more clear. 115 00:05:42,840 --> 00:05:45,600 >> And then for you guy's clarity-- 116 00:05:45,600 --> 00:05:48,200 oh yeah, here this is again. 117 00:05:48,200 --> 00:05:53,260 So 600 then would just be the example we gave up here where the owner has 118 00:05:53,260 --> 00:05:56,360 read and right permissions while group and world don't have any permissions 119 00:05:56,360 --> 00:05:58,145 to access the file. 120 00:05:58,145 --> 00:06:01,500 >> TOMAS REIMERS: And then we have a quick list of common permissions. 121 00:06:01,500 --> 00:06:05,250 So directories, you want to actually chmod 711. 122 00:06:05,250 --> 00:06:08,930 Quick aside-- for a directory to have executable permission means to be able 123 00:06:08,930 --> 00:06:11,680 to open the directory. 124 00:06:11,680 --> 00:06:15,280 Images, CSS, JavaScript, HTML needs 644 because, basically, the world 125 00:06:15,280 --> 00:06:16,400 needs read permissions. 126 00:06:16,400 --> 00:06:20,960 >> And PHP, which you guys have seen although we won't be talking about it 127 00:06:20,960 --> 00:06:24,880 strictly is typically chmoded with permission 600 because it's run with 128 00:06:24,880 --> 00:06:26,540 the permissions of the owner. 129 00:06:26,540 --> 00:06:27,790 At least on the appliance. 130 00:06:27,790 --> 00:06:30,200 131 00:06:30,200 --> 00:06:36,870 >> MIKE RIZZO: So if you don't specifically specify what type of file 132 00:06:36,870 --> 00:06:39,480 you want in actually setting up this presentation-- 133 00:06:39,480 --> 00:06:43,490 we had a problem with this because everything wasn't chmoded correctly-- 134 00:06:43,490 --> 00:06:47,550 you're going to get, kind of, a forbidden error that the website 135 00:06:47,550 --> 00:06:49,700 doesn't actually have permission to access whatever file 136 00:06:49,700 --> 00:06:51,370 you want it to access. 137 00:06:51,370 --> 00:06:54,780 And of course, that can be fixed-- as in problem set-- by changing 138 00:06:54,780 --> 00:06:56,405 permissions appropriately. 139 00:06:56,405 --> 00:06:59,620 >> TOMAS REIMERS: And the last comment for quickly local development is-- we 140 00:06:59,620 --> 00:07:02,000 brought this up, but we just wanted to bring it up again-- 141 00:07:02,000 --> 00:07:06,230 if you ask for a server-- so local host, for example, .com or whatever-- 142 00:07:06,230 --> 00:07:09,170 and you don't specify a specific file, the file that your computer is going 143 00:07:09,170 --> 00:07:11,540 to ask for is called index.HTML. 144 00:07:11,540 --> 00:07:12,790 Or if that doesn't exist, index.PHP. 145 00:07:12,790 --> 00:07:15,560 146 00:07:15,560 --> 00:07:16,350 >> Cool. 147 00:07:16,350 --> 00:07:19,560 So that's just a recap of everything, hopefully, that we've covered in 148 00:07:19,560 --> 00:07:22,800 section, and lecture, and so far in CS50. 149 00:07:22,800 --> 00:07:26,110 And now we're going to start talking about specifically libraries. 150 00:07:26,110 --> 00:07:30,270 JavaScript and CSS libraries for web apps. 151 00:07:30,270 --> 00:07:36,350 >> So one quick reason why we have libraries is programming-- 152 00:07:36,350 --> 00:07:39,000 there's a lot of problems in programming, which keep popping up 153 00:07:39,000 --> 00:07:40,570 again, and again, and again. 154 00:07:40,570 --> 00:07:43,870 You may notice that a lot of websites need the ability to have drop down 155 00:07:43,870 --> 00:07:49,100 menus, for example, or need the ability to have a very standard button 156 00:07:49,100 --> 00:07:51,400 style, which may not be the easiest thing. 157 00:07:51,400 --> 00:07:54,670 Now that you start to get into HTML, you realize that buttons can actually 158 00:07:54,670 --> 00:07:57,720 look really ugly if you don't do anything. 159 00:07:57,720 --> 00:08:00,830 >> So a lot of people have written called libraries. 160 00:08:00,830 --> 00:08:02,990 And in this context, they're also called frameworks. 161 00:08:02,990 --> 00:08:04,790 We're going to use the two interchangeably. 162 00:08:04,790 --> 00:08:07,360 And what they are is they're basically premade pieces of code-- 163 00:08:07,360 --> 00:08:09,130 either CSS or JavaScript-- 164 00:08:09,130 --> 00:08:13,240 that take away a lot of the team you have in coding. 165 00:08:13,240 --> 00:08:17,290 >> So they pre-define a bunch of classes or pre-define a bunch of functions for 166 00:08:17,290 --> 00:08:20,110 JavaScript's case, which you can call later on. 167 00:08:20,110 --> 00:08:22,690 And then you can, sort of, get access to this code without 168 00:08:22,690 --> 00:08:23,710 having to do anything. 169 00:08:23,710 --> 00:08:27,750 An example of the library was CS50.H. That was a library we gave to you back 170 00:08:27,750 --> 00:08:32,090 in week one, which allowed you to do things like that GetInt and GetString 171 00:08:32,090 --> 00:08:35,237 without having to write any code yourself. 172 00:08:35,237 --> 00:08:36,179 >> MIKE RIZZO: All right. 173 00:08:36,179 --> 00:08:40,299 So here, just like we had to include in our c files the different 174 00:08:40,299 --> 00:08:46,570 libraries, we also should include in our HTML files different libraries. 175 00:08:46,570 --> 00:08:50,310 For instance, if we wanted to include a specific JavaScript library here, 176 00:08:50,310 --> 00:08:52,850 perhaps, one that we've written ourselves as it's locally hosted 177 00:08:52,850 --> 00:08:56,000 called script.js, we just use this notation. 178 00:08:56,000 --> 00:08:59,500 >> So we have script type equals JavaScript source equals 179 00:08:59,500 --> 00:09:01,260 JavaScript.js. 180 00:09:01,260 --> 00:09:05,190 And if you think back to your CS50 finance problem set, if you looked in 181 00:09:05,190 --> 00:09:09,190 header.php in the templates folder, you should have seen 182 00:09:09,190 --> 00:09:10,970 some of these included. 183 00:09:10,970 --> 00:09:13,250 So this first one-- the scripts-- 184 00:09:13,250 --> 00:09:16,080 is including a JavaScript library. 185 00:09:16,080 --> 00:09:18,760 Including a CSS library is a little bit different. 186 00:09:18,760 --> 00:09:21,430 >> Here, instead of the script tag you need the link tag. 187 00:09:21,430 --> 00:09:27,110 And then, the text CSS type is a little different. 188 00:09:27,110 --> 00:09:29,270 You don't always have to include rel style sheet. 189 00:09:29,270 --> 00:09:30,970 But I think it's, generally, good practice. 190 00:09:30,970 --> 00:09:35,810 >> And then finally, the HREF, which you probably saw in your ATAGs for linking 191 00:09:35,810 --> 00:09:39,440 in different links just specifies the link of where to find that. 192 00:09:39,440 --> 00:09:42,250 For instance, if we wanted to link a different library-- let's just say-- 193 00:09:42,250 --> 00:09:49,330 that lived at styles.css. 194 00:09:49,330 --> 00:09:54,030 And we wanted to link that in that's hosted on the web, we would copy that. 195 00:09:54,030 --> 00:09:58,834 And then paste it into whatever we have right here instead. 196 00:09:58,834 --> 00:10:01,340 >> TOMAS REIMERS: OK, hopefully you guys are already familiar 197 00:10:01,340 --> 00:10:02,410 with how to link CSS. 198 00:10:02,410 --> 00:10:04,000 You had to do that on your last brown set. 199 00:10:04,000 --> 00:10:07,110 JavaScript, some of you maybe have some experience with. 200 00:10:07,110 --> 00:10:07,980 Some of you may not. 201 00:10:07,980 --> 00:10:12,190 >> So for now, know that a JavaScript file is very much like a CSS file in 202 00:10:12,190 --> 00:10:15,640 the sense that you can link to it or that you can include it internally. 203 00:10:15,640 --> 00:10:17,360 And it allows you to script things. 204 00:10:17,360 --> 00:10:21,820 And we're going to walk you through a little bit of JavaScript later on. 205 00:10:21,820 --> 00:10:23,560 >> So using a library-- 206 00:10:23,560 --> 00:10:26,150 once you've included it, it's as simple as literally calling the 207 00:10:26,150 --> 00:10:29,640 functions or adding the class names to it. 208 00:10:29,640 --> 00:10:32,220 The last thing we want to talk about in terms of library-- 209 00:10:32,220 --> 00:10:34,180 and this is more of a technical note-- 210 00:10:34,180 --> 00:10:35,860 is open source licensing. 211 00:10:35,860 --> 00:10:41,550 So when you find these actual libraries, you may be thinking of 212 00:10:41,550 --> 00:10:47,630 questions like is it OK that I'm just using someone else's code, especially 213 00:10:47,630 --> 00:10:51,970 because that's something we very much told you to not do in this course. 214 00:10:51,970 --> 00:10:55,790 >> So in the case of open source licensing, a lot of developers-- 215 00:10:55,790 --> 00:10:57,540 once they've written a library, which they think could be 216 00:10:57,540 --> 00:10:59,450 helpful to other people-- 217 00:10:59,450 --> 00:11:02,420 will publish it to the web and give it a license. 218 00:11:02,420 --> 00:11:06,620 And a license basically says I am hereby granting permission to other 219 00:11:06,620 --> 00:11:11,250 people to use this piece of software with the following sort of 220 00:11:11,250 --> 00:11:13,230 stipulations. 221 00:11:13,230 --> 00:11:16,100 >> We've included a link to a good site to help you understand the licenses in 222 00:11:16,100 --> 00:11:17,720 case you run into them. 223 00:11:17,720 --> 00:11:21,680 Common stipulations are things like you're welcome to use my library so 224 00:11:21,680 --> 00:11:23,000 long as you give me credit. 225 00:11:23,000 --> 00:11:25,670 You're welcome to use my library so long as when it breaks 226 00:11:25,670 --> 00:11:26,790 you don't blame me. 227 00:11:26,790 --> 00:11:30,310 You're welcome to use my library so long as you don't use it to make money 228 00:11:30,310 --> 00:11:31,910 for yourself. 229 00:11:31,910 --> 00:11:34,130 These are kinds of common stipulations. 230 00:11:34,130 --> 00:11:37,780 >> For this CS50 final project, they shouldn't be super relevant because 231 00:11:37,780 --> 00:11:41,440 the projects that you guys use are probably rather, sort of, known. 232 00:11:41,440 --> 00:11:44,170 But when you actually go out into the world and start using libraries, which 233 00:11:44,170 --> 00:11:48,100 may or may not be as well implemented as some of the more popular ones we're 234 00:11:48,100 --> 00:11:49,780 going to be going through. 235 00:11:49,780 --> 00:11:53,310 It's good to be able to understand these licenses and to 236 00:11:53,310 --> 00:11:54,560 understand what they mean. 237 00:11:54,560 --> 00:11:58,120 238 00:11:58,120 --> 00:11:58,586 And going back. 239 00:11:58,586 --> 00:12:00,960 >> MIKE RIZZO: OK. 240 00:12:00,960 --> 00:12:04,850 So now moving onto examples of actual CSS. 241 00:12:04,850 --> 00:12:07,770 At this point so far, you might not have encountered this. 242 00:12:07,770 --> 00:12:10,300 But you might have encountered it in your everyday life where something 243 00:12:10,300 --> 00:12:13,160 that looks one way on one browser might not look the same 244 00:12:13,160 --> 00:12:14,880 way in another browser. 245 00:12:14,880 --> 00:12:17,400 >> This is called browser browser compatibility. 246 00:12:17,400 --> 00:12:20,780 And increasingly it's becoming more and more of a problem, especially as 247 00:12:20,780 --> 00:12:25,260 browsers take more and more liberties to implement things as they want. 248 00:12:25,260 --> 00:12:28,440 So to overcome that, there actually is a great library called Normalize.CSS. 249 00:12:28,440 --> 00:12:32,236 250 00:12:32,236 --> 00:12:33,770 >> TOMAS REIMERS: We included the link. 251 00:12:33,770 --> 00:12:36,210 At this point, it's helpful if you have your laptop in there 252 00:12:36,210 --> 00:12:38,740 looking at the site. 253 00:12:38,740 --> 00:12:42,580 And we are giving this to you right now simply because the CS50 final 254 00:12:42,580 --> 00:12:44,370 project is actually going to ask you to implement it 255 00:12:44,370 --> 00:12:45,860 similarly and through browsers. 256 00:12:45,860 --> 00:12:49,250 >> So just to keep in the back of your head, this is a wonderful library 257 00:12:49,250 --> 00:12:51,170 because it will, sort of, standardize things. 258 00:12:51,170 --> 00:12:54,230 In Firefox, something may show as one pixel to the left. 259 00:12:54,230 --> 00:12:58,390 And then Chrome may decide that actually what you meant was 10 pixels 260 00:12:58,390 --> 00:12:59,380 to the left. 261 00:12:59,380 --> 00:13:01,030 And you want to standardize this. 262 00:13:01,030 --> 00:13:05,360 Normalize will actually do a really good job of making sure that your site 263 00:13:05,360 --> 00:13:08,070 looks the same across browsers. 264 00:13:08,070 --> 00:13:10,660 >> MIKE RIZZO: So if we wanted to just click the link really quickly and show 265 00:13:10,660 --> 00:13:13,140 you what that looks like, you can download it using the 266 00:13:13,140 --> 00:13:14,670 giant Download button. 267 00:13:14,670 --> 00:13:18,520 Or I encourage you to read more about it by clicking this link in the lower 268 00:13:18,520 --> 00:13:19,310 right hand corner. 269 00:13:19,310 --> 00:13:22,420 >> TOMAS REIMERS: And if you actually click Read More right there-- 270 00:13:22,420 --> 00:13:24,340 click the source on GitHub-- 271 00:13:24,340 --> 00:13:31,720 you'll actually see the open source license on LICENSE.md right there. 272 00:13:31,720 --> 00:13:35,740 And you'll see here is the very popular MIT license. 273 00:13:35,740 --> 00:13:38,940 Again, if you read through the text, you'll be able to find it on the site 274 00:13:38,940 --> 00:13:42,550 we referenced before and be able to understand it without having to read 275 00:13:42,550 --> 00:13:45,920 through the legal jargon. 276 00:13:45,920 --> 00:13:46,850 >> MIKE RIZZO: OK, great. 277 00:13:46,850 --> 00:13:47,940 So that's Normalize. 278 00:13:47,940 --> 00:13:49,190 We wanted to give you that really quickly. 279 00:13:49,190 --> 00:13:50,030 Oh, do you have a question? 280 00:13:50,030 --> 00:13:53,013 >> AUDIENCE: So when you download it, you just follow that code that they have 281 00:13:53,013 --> 00:13:54,098 under the Download button? 282 00:13:54,098 --> 00:13:55,860 >> TOMAS REIMERS: Yes, so when you download-- 283 00:13:55,860 --> 00:13:58,130 >> MIKE RIZZO: Oh, that's a great point. 284 00:13:58,130 --> 00:14:00,700 So the question was how do we actually download it? 285 00:14:00,700 --> 00:14:03,260 So if we click the link, we see that it actually pops up 286 00:14:03,260 --> 00:14:05,030 at the source code. 287 00:14:05,030 --> 00:14:08,550 So to do this, what we could do is just click Save As. 288 00:14:08,550 --> 00:14:10,830 Save As and that should bring up a file. 289 00:14:10,830 --> 00:14:14,160 And then we can choose to save it as normalize.CSS. 290 00:14:14,160 --> 00:14:15,810 And then you'd have to link it in-- 291 00:14:15,810 --> 00:14:18,660 >> TOMAS REIMERS: The same way you link in any other file. 292 00:14:18,660 --> 00:14:22,250 And once you link it in, what's great about Normalize is it will actually 293 00:14:22,250 --> 00:14:25,920 take care of all the hard work by itself. 294 00:14:25,920 --> 00:14:27,730 Meaning that you don't have to add any classes. 295 00:14:27,730 --> 00:14:29,690 >> You don't have to do anything weird. 296 00:14:29,690 --> 00:14:34,590 It will normalize without you doing anything further. 297 00:14:34,590 --> 00:14:36,083 Yes, you have to include it. 298 00:14:36,083 --> 00:14:38,990 299 00:14:38,990 --> 00:14:40,240 Google Chrome is not responding. 300 00:14:40,240 --> 00:14:43,270 301 00:14:43,270 --> 00:14:44,860 >> Just a quick aside-- 302 00:14:44,860 --> 00:14:46,800 I noticed we jumped into this. 303 00:14:46,800 --> 00:14:49,010 The rest of this presentation is going to be a quick overview. 304 00:14:49,010 --> 00:14:50,380 A survey of libraries. 305 00:14:50,380 --> 00:14:52,710 >> Basically, what they are. 306 00:14:52,710 --> 00:14:53,350 What they do. 307 00:14:53,350 --> 00:14:54,060 How they're useful. 308 00:14:54,060 --> 00:14:56,540 How you might implement them. 309 00:14:56,540 --> 00:14:59,730 If you want to start looking at them, following along, and reading through 310 00:14:59,730 --> 00:15:01,990 them, I would highly encourage that. 311 00:15:01,990 --> 00:15:07,620 >> Alternatively, you're welcome also to start downloading them and including 312 00:15:07,620 --> 00:15:11,400 them in a sight just to see what they look like or what they do if you have 313 00:15:11,400 --> 00:15:12,270 your laptop in front of you. 314 00:15:12,270 --> 00:15:14,650 If not, you're welcome to keep listening to us talk. 315 00:15:14,650 --> 00:15:15,500 We're going to keep talking. 316 00:15:15,500 --> 00:15:18,680 And we have time at the end, hopefully we'll actually get into showing you 317 00:15:18,680 --> 00:15:20,946 what some of these libraries look like. 318 00:15:20,946 --> 00:15:22,320 >> MIKE RIZZO: Cool. 319 00:15:22,320 --> 00:15:25,466 All right, so now let's talk about Font Awesome. 320 00:15:25,466 --> 00:15:30,480 >> TOMAS REIMERS: so Font Awesome is a really neat site, especially for those 321 00:15:30,480 --> 00:15:32,450 of us who are less artistically talented. 322 00:15:32,450 --> 00:15:36,330 323 00:15:36,330 --> 00:15:38,880 Ignoring the name Font Awesome, it gives you a bunch of icons, which are 324 00:15:38,880 --> 00:15:41,050 very useful. 325 00:15:41,050 --> 00:15:45,950 So a lot of times you'll implement an icon you may want like a nice x so 326 00:15:45,950 --> 00:15:47,170 that you can close something. 327 00:15:47,170 --> 00:15:49,910 >> Or you may want some kind of Edit button with a pencil drawing like 328 00:15:49,910 --> 00:15:50,940 everyone else has. 329 00:15:50,940 --> 00:15:53,850 And that's when you learn that drawing those icons can be 330 00:15:53,850 --> 00:15:55,510 very tedious and difficult. 331 00:15:55,510 --> 00:15:59,160 Font Awesome-- if you actually go to the site-- 332 00:15:59,160 --> 00:16:02,892 gives you a lot of icons under the icons at the top. 333 00:16:02,892 --> 00:16:06,980 Yeah, just the top. 334 00:16:06,980 --> 00:16:09,030 It will give you a lot of icons for free. 335 00:16:09,030 --> 00:16:15,210 >> So here you see we have things like an asterisk, bars, a lightning bolt, a 336 00:16:15,210 --> 00:16:19,750 calendar, a bug, a book, et cetera. 337 00:16:19,750 --> 00:16:21,110 This can be very useful. 338 00:16:21,110 --> 00:16:24,290 The way you include this is you include literally the CSS file. 339 00:16:24,290 --> 00:16:29,760 And after you've included the CSS file, what you can do is you create a 340 00:16:29,760 --> 00:16:33,430 tag called I. It satands for icon with the class FA 341 00:16:33,430 --> 00:16:34,460 standing for Font Awesome. 342 00:16:34,460 --> 00:16:36,330 And then, whatever class you want. 343 00:16:36,330 --> 00:16:41,220 >> So if I wanted a icon of this plus square right here, I would give 344 00:16:41,220 --> 00:16:43,290 it the class FA. 345 00:16:43,290 --> 00:16:46,230 And then FA hyphen plus hyphen square. 346 00:16:46,230 --> 00:16:50,325 347 00:16:50,325 --> 00:16:53,710 >> MIKE RIZZO: Cool, OK. 348 00:16:53,710 --> 00:16:56,980 >> TOMAS REIMERS: And then, the last CSS library we want to get through we are 349 00:16:56,980 --> 00:16:59,950 trying to keep it minimal on CSS libraries because we do realize the 350 00:16:59,950 --> 00:17:03,660 title of this presentation is JavaScript Libraries. 351 00:17:03,660 --> 00:17:07,089 But we thought that we may as well introduce you to the other libraries 352 00:17:07,089 --> 00:17:09,569 while we were talking about libraries. 353 00:17:09,569 --> 00:17:11,400 >> It's Google Web Fonts. 354 00:17:11,400 --> 00:17:17,040 And what Google Web Fonts allows you to do is add fonts to your website, 355 00:17:17,040 --> 00:17:22,079 which is a really easy way to make it pretty and to distinguish your set 356 00:17:22,079 --> 00:17:24,460 from everyone else's is if it has a nice font or if it has a nice 357 00:17:24,460 --> 00:17:27,790 collection of fonts. 358 00:17:27,790 --> 00:17:31,410 Google Web Fonts is nice unlike other libraries in the sense that it's a 359 00:17:31,410 --> 00:17:33,490 really guided installation. 360 00:17:33,490 --> 00:17:38,680 >> So if you follow the link, it's google.com/fonts, I believe. 361 00:17:38,680 --> 00:17:41,100 If you follow that, you can pick your font. 362 00:17:41,100 --> 00:17:44,410 You can choose on the left from thickness, slant, et cetera. 363 00:17:44,410 --> 00:17:48,970 And then, once you've chosen one, you can click quick use. 364 00:17:48,970 --> 00:17:49,820 Right there. 365 00:17:49,820 --> 00:17:51,590 Bottom right of the box. 366 00:17:51,590 --> 00:17:54,380 367 00:17:54,380 --> 00:17:56,700 >> And then, scroll down. 368 00:17:56,700 --> 00:17:59,600 369 00:17:59,600 --> 00:18:02,650 First of all, they give you the CSS that you need to actually link to it. 370 00:18:02,650 --> 00:18:03,330 It's right there. 371 00:18:03,330 --> 00:18:05,170 You can just copy and paste that in. 372 00:18:05,170 --> 00:18:07,250 And the nice thing about this one is you don't actually even need to 373 00:18:07,250 --> 00:18:08,340 download the file. 374 00:18:08,340 --> 00:18:11,170 >> What's it's going to do is it's going to link to Google's version of it. 375 00:18:11,170 --> 00:18:14,130 So back to what does that mean. 376 00:18:14,130 --> 00:18:18,270 That means when a user downloads your file-- 377 00:18:18,270 --> 00:18:22,300 downloads your HTML page-- your HTML page is going to reference this file. 378 00:18:22,300 --> 00:18:26,790 >> So then, your computer's going to see, oh, it's hosted on google.com rather 379 00:18:26,790 --> 00:18:28,170 than on theirsite.com. 380 00:18:28,170 --> 00:18:30,370 Let me go ask Google for that file. 381 00:18:30,370 --> 00:18:32,800 And then, it's going to include it almost as if it were a 382 00:18:32,800 --> 00:18:35,584 part of your own site. 383 00:18:35,584 --> 00:18:36,540 >> TOMAS REIMERS: Cool. 384 00:18:36,540 --> 00:18:40,980 And once you include that, then to include it in your CSS, it gives you 385 00:18:40,980 --> 00:18:41,830 the actual line. 386 00:18:41,830 --> 00:18:45,188 So you set the property font family equal to the name of your font. 387 00:18:45,188 --> 00:18:47,936 388 00:18:47,936 --> 00:18:50,440 >> MIKE RIZZO: OK. 389 00:18:50,440 --> 00:18:52,220 So we just finished with CSS. 390 00:18:52,220 --> 00:18:57,230 And some of you might be thinking, well, we had some CSS on CS50 Finance. 391 00:18:57,230 --> 00:19:00,390 But CSS library was bootstrap. 392 00:19:00,390 --> 00:19:05,190 We actually include Bootstrap a little later on under JavaScript because with 393 00:19:05,190 --> 00:19:09,660 the Bootstrap CSS library also comes with a lot of JavaScript that 394 00:19:09,660 --> 00:19:12,060 Bootstrap or Twitter-- who made Bootstrap-- 395 00:19:12,060 --> 00:19:15,426 uses to manage all of their CSS. 396 00:19:15,426 --> 00:19:19,592 >> TOMAS REIMERS: Does anyone have any questions so far about CSS in general? 397 00:19:19,592 --> 00:19:20,723 We're good? 398 00:19:20,723 --> 00:19:21,216 Awesome. 399 00:19:21,216 --> 00:19:22,495 >> MIKE RIZZO: Awesome. 400 00:19:22,495 --> 00:19:25,136 >> TOMAS REIMERS: So moving on to JavaScript. 401 00:19:25,136 --> 00:19:27,900 >> MIKE RIZZO: So we wanted to talk about jQuery to begin with. 402 00:19:27,900 --> 00:19:30,780 Has anybody heard of jQuery before or used it? 403 00:19:30,780 --> 00:19:32,180 Yeah, a couple? 404 00:19:32,180 --> 00:19:36,000 So if you just work with native JavaScript, you'll find yourself 405 00:19:36,000 --> 00:19:41,000 typing a lot of long selectors a lot. 406 00:19:41,000 --> 00:19:44,400 So what jQuery does is it provides a nice wrapper for the JavaScript 407 00:19:44,400 --> 00:19:48,180 language that lets you easily select and manipulate different elements 408 00:19:48,180 --> 00:19:52,470 within the document object model of the web page or the DOM, which I think 409 00:19:52,470 --> 00:19:54,290 you guys have heard of in lecture at this point. 410 00:19:54,290 --> 00:19:57,550 >> TOMAS REIMERS: If you haven't heard of it or if you haven't watched lecture 411 00:19:57,550 --> 00:20:01,870 yet, the Document Object Model is basically how things are represented. 412 00:20:01,870 --> 00:20:05,290 So HTML sort of looks like a tree when you actually draw it out. 413 00:20:05,290 --> 00:20:06,850 You have the HTML element on top. 414 00:20:06,850 --> 00:20:07,560 You have the head and body. 415 00:20:07,560 --> 00:20:09,500 >> And then, within that you have everything else. 416 00:20:09,500 --> 00:20:10,660 That's referred to as the DOM-- 417 00:20:10,660 --> 00:20:12,120 Document Object Model. 418 00:20:12,120 --> 00:20:16,090 So a model which represents objects in the document is an easy way to think 419 00:20:16,090 --> 00:20:18,560 about that. 420 00:20:18,560 --> 00:20:22,520 And one of the great thing about jQuery is it really makes traversing 421 00:20:22,520 --> 00:20:26,460 that and manipulating elements within that incredibly simple. 422 00:20:26,460 --> 00:20:30,300 >> So simple, in fact, that the majority of JavaScript libraries or if not the 423 00:20:30,300 --> 00:20:34,200 majority, the grand majority of ones you'll see actually require jQuery so 424 00:20:34,200 --> 00:20:37,530 that they can run themselves simply because if you didn't have jQuery, you 425 00:20:37,530 --> 00:20:40,540 would waste a lot of time trying to figure out how to select certain 426 00:20:40,540 --> 00:20:43,660 elements and how to do other things. 427 00:20:43,660 --> 00:20:47,950 And the other great thing about jQuery is that it's cross browser compatible. 428 00:20:47,950 --> 00:20:51,550 >> So remember back when we said that not all browsers implement 429 00:20:51,550 --> 00:20:53,100 things the same way? 430 00:20:53,100 --> 00:20:55,120 This is true even in JavaScript. 431 00:20:55,120 --> 00:20:58,220 And one of the great things about jQuery is that it will detect the 432 00:20:58,220 --> 00:21:00,300 browser and detect the appropriate method. 433 00:21:00,300 --> 00:21:03,420 >> So if you need to select an element, Internet Explorer might say you're 434 00:21:03,420 --> 00:21:05,770 supposed to do this way. 435 00:21:05,770 --> 00:21:08,300 Firefox might say the correct way is this way. 436 00:21:08,300 --> 00:21:09,710 jQuery doesn't care. 437 00:21:09,710 --> 00:21:12,550 When you tell jQuery to select an element it will figure out how it's 438 00:21:12,550 --> 00:21:16,290 supposed to do it within the browser the user is currently in, and then do 439 00:21:16,290 --> 00:21:18,584 it that way. 440 00:21:18,584 --> 00:21:22,650 >> MIKE RIZZO: So let's not talk about the usage of jQuery a little bit. 441 00:21:22,650 --> 00:21:27,670 Just like PHP, jQuery has a particular fondness for the dollar sign. 442 00:21:27,670 --> 00:21:30,880 So you'll find that any jQuery-- 443 00:21:30,880 --> 00:21:32,060 well, not all. 444 00:21:32,060 --> 00:21:35,210 You can sometimes replace the dollar sign with the word jQuery. 445 00:21:35,210 --> 00:21:38,980 But generally, just because it's shorter, whenever you see jQuery being 446 00:21:38,980 --> 00:21:41,420 used it'll be with a dollar sign. 447 00:21:41,420 --> 00:21:47,030 >> So here we're just showing a beginning selector for an element in the DOM. 448 00:21:47,030 --> 00:21:52,850 Here, we have the dollar sign followed by open parentheses and then quotes. 449 00:21:52,850 --> 00:21:56,130 And within the quotes go our selectors for the different elements. 450 00:21:56,130 --> 00:21:59,810 Just like in CSS, we needed selectors to be able to style different elements 451 00:21:59,810 --> 00:22:00,840 within the page. 452 00:22:00,840 --> 00:22:06,555 Those different selectors translate exactly into jQuery and JavaScript, 453 00:22:06,555 --> 00:22:07,820 for the most part. 454 00:22:07,820 --> 00:22:10,120 >> So here we have a dot foo. 455 00:22:10,120 --> 00:22:14,780 So if you recall from lecture, the dot just means the class. 456 00:22:14,780 --> 00:22:18,850 So we're selecting element with class foo. 457 00:22:18,850 --> 00:22:22,670 So if I go ahead and open up our JavaScript console here really quickly 458 00:22:22,670 --> 00:22:26,830 just demonstrate it, if I just type the dollar sign, we see that it's some 459 00:22:26,830 --> 00:22:28,090 function that comes up. 460 00:22:28,090 --> 00:22:29,420 And it's just defined by jQuery. 461 00:22:29,420 --> 00:22:32,120 >> TOMAS REIMERS: For those of you unfamiliar, the console is a tool 462 00:22:32,120 --> 00:22:35,430 within Chrome, which allows you to, basically, run JavaScript on the 463 00:22:35,430 --> 00:22:36,450 current page. 464 00:22:36,450 --> 00:22:39,420 This you'll find incredibly useful when you're actually debugging and you 465 00:22:39,420 --> 00:22:42,400 need to be like, what is the current value of some global variable or what 466 00:22:42,400 --> 00:22:43,910 is something else? 467 00:22:43,910 --> 00:22:47,620 It's kind of like GDB with the exception that you can actually 468 00:22:47,620 --> 00:22:51,600 manipulate elements on the page with it in a much easier fashion. 469 00:22:51,600 --> 00:22:55,080 And also it doesn't, basically, check in with you before it does anything. 470 00:22:55,080 --> 00:22:58,660 >> So whereas, GDB might be like, are you sure you want to run the next step? 471 00:22:58,660 --> 00:22:59,830 The console's in real. 472 00:22:59,830 --> 00:23:03,690 So as the web page is rendering and doing whatever it's doing, the 473 00:23:03,690 --> 00:23:05,720 council's also running alongside it. 474 00:23:05,720 --> 00:23:08,330 And you can put impute code into that console, which will 475 00:23:08,330 --> 00:23:09,260 be run on the page. 476 00:23:09,260 --> 00:23:12,190 >> MIKE RIZZO: So to enter the console, I guess I should briefly 477 00:23:12,190 --> 00:23:13,750 mention how to do that. 478 00:23:13,750 --> 00:23:17,850 In the last problems that you may have used Chrome's inspect element 479 00:23:17,850 --> 00:23:20,440 functions or view page source-- 480 00:23:20,440 --> 00:23:23,870 and those are accessible just by right clicking on the page or a specific 481 00:23:23,870 --> 00:23:28,430 element and doing either inspect element or view page source. 482 00:23:28,430 --> 00:23:31,190 We can also access the JavaScript console directly by 483 00:23:31,190 --> 00:23:33,630 choosing inspect element. 484 00:23:33,630 --> 00:23:37,930 So then you just hit console on the far right side. 485 00:23:37,930 --> 00:23:41,900 >> Alternatively, you could have also gone to the upper right hand corner, 486 00:23:41,900 --> 00:23:46,820 which is cut off on this screen where it has the three horizontal bars. 487 00:23:46,820 --> 00:23:52,010 And you go down to tools and then JavaScript console 488 00:23:52,010 --> 00:23:53,240 here where can see-- 489 00:23:53,240 --> 00:23:54,370 at least on Windows-- 490 00:23:54,370 --> 00:23:59,680 the shortcut is Control Shift J. So then if we wanted to select an element 491 00:23:59,680 --> 00:24:06,060 within this page, just like I showed before, we do dollar sign open parens 492 00:24:06,060 --> 00:24:08,180 and then quotes. 493 00:24:08,180 --> 00:24:11,750 >> An interesting thing is, generally, single quotes and double quotes are 494 00:24:11,750 --> 00:24:12,370 exchangeable. 495 00:24:12,370 --> 00:24:16,050 So a lot of people just use single quotes because they're faster to type 496 00:24:16,050 --> 00:24:19,780 than double quotes because you don't have to hold down Shift. 497 00:24:19,780 --> 00:24:21,770 So I'll just do that right now. 498 00:24:21,770 --> 00:24:24,510 >> So I want to select something with class. 499 00:24:24,510 --> 00:24:27,200 Container, just because I know that's something that's on our 500 00:24:27,200 --> 00:24:28,740 web page right now. 501 00:24:28,740 --> 00:24:29,520 And I hit Enter. 502 00:24:29,520 --> 00:24:31,670 And we can see that it selected it. 503 00:24:31,670 --> 00:24:34,990 So it shows up that it returned that object. 504 00:24:34,990 --> 00:24:36,620 So that's a basic selection. 505 00:24:36,620 --> 00:24:40,080 If we wanted to actually manipulate it, you would have to call something 506 00:24:40,080 --> 00:24:43,925 on that selection, which we will get into later. 507 00:24:43,925 --> 00:24:49,030 >> TOMAS REIMERS: So just to look at that more in depth, this is no different 508 00:24:49,030 --> 00:24:52,245 than the function calls we made in C. The name of the function here is a 509 00:24:52,245 --> 00:24:52,580 little weird. 510 00:24:52,580 --> 00:24:55,640 It's dollar sign. 511 00:24:55,640 --> 00:24:57,010 It's just a name of a function. 512 00:24:57,010 --> 00:24:58,810 There's nothing special about it. 513 00:24:58,810 --> 00:25:00,450 >> We have open parentheses. 514 00:25:00,450 --> 00:25:03,880 Then, we have our one argument, which in this case happens to be a string, 515 00:25:03,880 --> 00:25:05,680 which is a selector for it. 516 00:25:05,680 --> 00:25:08,130 And then, we have our closed parenthesis. 517 00:25:08,130 --> 00:25:09,960 That's it. 518 00:25:09,960 --> 00:25:11,500 >> It's not that vastly different. 519 00:25:11,500 --> 00:25:12,900 Although, it does look very weird. 520 00:25:12,900 --> 00:25:17,220 And that can be, sort of, a sticking point for a lot of people. 521 00:25:17,220 --> 00:25:21,460 >> MIKE RIZZO: So similarly, if we wanted to select an element that has an ID, 522 00:25:21,460 --> 00:25:23,470 now we want to select by ID instead of class. 523 00:25:23,470 --> 00:25:28,080 It would be a similar thing where we just do the sharp sign for ID. 524 00:25:28,080 --> 00:25:33,576 So we're selecting here all elements that have ID bar. 525 00:25:33,576 --> 00:25:35,400 >> TOMAS REIMERS: And this extends. 526 00:25:35,400 --> 00:25:36,450 That CSS extends. 527 00:25:36,450 --> 00:25:42,260 Just like in CSS, you can select all links, which have the class foo. 528 00:25:42,260 --> 00:25:43,420 Here, it's the same thing. 529 00:25:43,420 --> 00:25:52,750 >> You could do a.foo, which would select all of the links with the class foo. 530 00:25:52,750 --> 00:25:58,860 You could do a sharp bar, which would select the link with the ID bar and so 531 00:25:58,860 --> 00:25:59,770 on and so forth. 532 00:25:59,770 --> 00:26:02,120 Any CSS selector is a valid jQuery selector. 533 00:26:02,120 --> 00:26:03,370 >> MIKE RIZZO: Yeah. 534 00:26:03,370 --> 00:26:07,996 535 00:26:07,996 --> 00:26:11,460 OK, so now let's get into a little bit of manipulation that we can do with 536 00:26:11,460 --> 00:26:12,870 our jQuery. 537 00:26:12,870 --> 00:26:19,280 So jQuery has a particular type of notation where we just use 538 00:26:19,280 --> 00:26:20,170 a dot at the end. 539 00:26:20,170 --> 00:26:23,340 And you can think of this like in C how we had different structs. 540 00:26:23,340 --> 00:26:27,110 And to go into those structs, you would use a dot to get into them. 541 00:26:27,110 --> 00:26:28,480 >> This is, kind of, a similar thing. 542 00:26:28,480 --> 00:26:33,570 Only now we have functions within this selector that we can call on it. 543 00:26:33,570 --> 00:26:38,640 So here, the very first example you can see is a CSS selector. 544 00:26:38,640 --> 00:26:45,290 And basically, what that does is it applies the first element CSS to this 545 00:26:45,290 --> 00:26:46,230 thing that you selected-- 546 00:26:46,230 --> 00:26:47,720 this element that you selected-- 547 00:26:47,720 --> 00:26:49,290 with the value that. 548 00:26:49,290 --> 00:26:55,390 >> TOMAS REIMERS: So an easy translation of that would be if jQuery, basically, 549 00:26:55,390 --> 00:26:57,790 just took foo. 550 00:26:57,790 --> 00:27:05,480 And then in CSS said, color red and close. 551 00:27:05,480 --> 00:27:06,670 It's the same idea. 552 00:27:06,670 --> 00:27:08,800 What it's done is it's selected all foo elements. 553 00:27:08,800 --> 00:27:10,170 And then it's applied. 554 00:27:10,170 --> 00:27:15,884 Sort of, the property color is equal to red. 555 00:27:15,884 --> 00:27:21,070 >> MIKE RIZZO: Similarly, we can also alter the actual contents of what is 556 00:27:21,070 --> 00:27:24,870 showing on the HTML of the page, which is really cool because it means your 557 00:27:24,870 --> 00:27:28,095 web pages can now be completely dynamic and don't have to be static 558 00:27:28,095 --> 00:27:31,660 that you print out using PHP at the very beginning of 559 00:27:31,660 --> 00:27:33,320 the page being loaded. 560 00:27:33,320 --> 00:27:36,810 So here, if we wanted to alter the actual HTML of the page, we would now 561 00:27:36,810 --> 00:27:43,550 call the HTML function, which then just inserts whatever we specify into 562 00:27:43,550 --> 00:27:45,390 that element that we selected. 563 00:27:45,390 --> 00:27:49,810 So here we're selecting element with class foo and then saying it's HTML 564 00:27:49,810 --> 00:27:52,200 it's now hello world. 565 00:27:52,200 --> 00:27:55,600 >> TOMAS REIMERS: And when you think about what are useful applications of 566 00:27:55,600 --> 00:28:00,800 this, this CSS one, the first thing that you can start to think about is 567 00:28:00,800 --> 00:28:03,070 in terms of even drop down menus. 568 00:28:03,070 --> 00:28:08,350 You could start to do things like, when a user hovers over the top part 569 00:28:08,350 --> 00:28:11,970 of a drop down, you want to make the bottom part visible. 570 00:28:11,970 --> 00:28:12,540 Right? 571 00:28:12,540 --> 00:28:15,610 >> So in CSS, we have properties to make something visible. 572 00:28:15,610 --> 00:28:19,330 Things like display colon none would make it invisible. 573 00:28:19,330 --> 00:28:21,190 Display block would make it visible. 574 00:28:21,190 --> 00:28:25,860 Or even if you want to go simpler, you have things like visibility equals 575 00:28:25,860 --> 00:28:27,520 visible, and visibility equals hidden. 576 00:28:27,520 --> 00:28:30,330 577 00:28:30,330 --> 00:28:34,780 >> And you could start to implement things like drop down menus right 578 00:28:34,780 --> 00:28:38,410 after you get through the idea of how can you figure out when this opens, 579 00:28:38,410 --> 00:28:39,850 which we'll get through very briefly. 580 00:28:39,850 --> 00:28:42,160 But we can start to see applications of this. 581 00:28:42,160 --> 00:28:45,540 In a similar sense, if you were to try and implement, let's say, a chat 582 00:28:45,540 --> 00:28:48,620 engine and you want to make a little speech bubble come up whenever you've 583 00:28:48,620 --> 00:28:52,880 got a new message, once you get the new message, you can make a little 584 00:28:52,880 --> 00:28:55,890 speech bubble come up by altering the HTML of the page, right? 585 00:28:55,890 --> 00:29:00,540 By adding that extra speech bubble with the extra text in there. 586 00:29:00,540 --> 00:29:01,140 Yeah? 587 00:29:01,140 --> 00:29:07,750 >> AUDIENCE: So you would embed this within the HTML code in sort of like a 588 00:29:07,750 --> 00:29:10,534 [INAUDIBLE]? 589 00:29:10,534 --> 00:29:12,940 >> MIKE RIZZO: Right. 590 00:29:12,940 --> 00:29:16,190 Yeah, we'll get to that in a little bit. 591 00:29:16,190 --> 00:29:18,810 Yeah, it's similar a little bit to PHP. 592 00:29:18,810 --> 00:29:21,240 Not exactly similar. 593 00:29:21,240 --> 00:29:24,730 >> A good distinction to make is what this is actually editing when we edit 594 00:29:24,730 --> 00:29:28,480 the page because it's not going to be editing the actual file that is being 595 00:29:28,480 --> 00:29:31,380 kept on the server because the world shouldn't have permission 596 00:29:31,380 --> 00:29:32,610 to edit your files. 597 00:29:32,610 --> 00:29:36,080 This is just editing what's on the page and what's being displayed within 598 00:29:36,080 --> 00:29:36,950 the browser. 599 00:29:36,950 --> 00:29:40,340 So if you were to reload the page after, say, deleting something as we 600 00:29:40,340 --> 00:29:44,730 see we can do with the remove call, that thing would then reappear. 601 00:29:44,730 --> 00:29:48,590 >> TOMAS REIMERS: So one way to think about this is if I'm your computer and 602 00:29:48,590 --> 00:29:50,170 Mike is, sort of, the server. 603 00:29:50,170 --> 00:29:53,850 What's going to happen is I'm going to ask Mike, hey, can I have a copy of 604 00:29:53,850 --> 00:29:54,630 this web page? 605 00:29:54,630 --> 00:29:56,190 And he'll give me a copy of it. 606 00:29:56,190 --> 00:29:57,430 >> No, it's not the original thing. 607 00:29:57,430 --> 00:29:58,620 It's just a copy. 608 00:29:58,620 --> 00:30:00,450 And then it would be like, oh, there's JavaScript here. 609 00:30:00,450 --> 00:30:02,450 Clearly, I should edit the page to be like this. 610 00:30:02,450 --> 00:30:04,250 And I'm editing your copy. 611 00:30:04,250 --> 00:30:05,920 >> But that's not effecting the actual copy. 612 00:30:05,920 --> 00:30:08,480 And if I were to ask him again refresh the page,-- 613 00:30:08,480 --> 00:30:10,060 hey, can I have another clean copy-- 614 00:30:10,060 --> 00:30:11,440 he's going to give me another clean copy. 615 00:30:11,440 --> 00:30:14,240 And then, I'm going to do the same thing like, oh, this JS here that says 616 00:30:14,240 --> 00:30:14,866 to edit this. 617 00:30:14,866 --> 00:30:17,460 And I'm going to keep doing that. 618 00:30:17,460 --> 00:30:20,930 >> MIKE RIZZO: So a really cool thing that you can do with jQuery is 619 00:30:20,930 --> 00:30:24,350 actually add different types of animations to your page. 620 00:30:24,350 --> 00:30:27,440 I don't know if you've ever seen where you're trying to a fill out a form 621 00:30:27,440 --> 00:30:31,250 online and you don't fill out the things correctly. 622 00:30:31,250 --> 00:30:33,440 So a little thing slides down at the top and says you 623 00:30:33,440 --> 00:30:34,820 haven't done this correctly. 624 00:30:34,820 --> 00:30:36,260 Please try again. 625 00:30:36,260 --> 00:30:37,890 And then, it might even just slide up. 626 00:30:37,890 --> 00:30:40,710 >> Turns out jQuery has built in functions that make all of that 627 00:30:40,710 --> 00:30:44,180 animation really, really easy. 628 00:30:44,180 --> 00:30:46,750 So there is first the fade out function, which 629 00:30:46,750 --> 00:30:47,710 you can call on something. 630 00:30:47,710 --> 00:30:55,650 And it's a way to change the CSS of that element in an animated way. 631 00:30:55,650 --> 00:30:58,480 So it takes whatever element you call it fade out on. 632 00:30:58,480 --> 00:31:03,990 And then, slowly changes it's opacity until it goes completely transparent. 633 00:31:03,990 --> 00:31:07,330 >> TOMAS REIMERS: The other popular one is slide down, which will make 634 00:31:07,330 --> 00:31:08,800 something appear by sliding it down. 635 00:31:08,800 --> 00:31:12,840 So in the case of the drop down menu, again, when we learned how to detect 636 00:31:12,840 --> 00:31:15,310 when this has been hovered over, you could just tell this bottom 637 00:31:15,310 --> 00:31:16,910 part slide down now. 638 00:31:16,910 --> 00:31:19,270 And then, it would appear by sliding down. 639 00:31:19,270 --> 00:31:22,042 640 00:31:22,042 --> 00:31:26,590 >> MIKE RIZZO: And then, if you just have some type of animation in mind that 641 00:31:26,590 --> 00:31:29,080 jQuery doesn't necessarily provide. 642 00:31:29,080 --> 00:31:32,690 For instance, let's say jQuery does provide you with a slide 643 00:31:32,690 --> 00:31:33,750 down and slide up. 644 00:31:33,750 --> 00:31:36,740 Well, let's say you wanted to slide something in from the left or in from 645 00:31:36,740 --> 00:31:39,880 the right kind of like the CS50 main page does whenever 646 00:31:39,880 --> 00:31:42,080 you go to a new panel. 647 00:31:42,080 --> 00:31:45,030 You would then probably have to implement it yourself using the 648 00:31:45,030 --> 00:31:49,310 animate function within jQuery. 649 00:31:49,310 --> 00:31:51,350 >> So similarly, you just animate. 650 00:31:51,350 --> 00:31:55,850 And then, within it it takes a dictionary of the different values 651 00:31:55,850 --> 00:31:57,340 that you're supposed to pass. 652 00:31:57,340 --> 00:32:06,960 So here, if we wanted to animate the element foo such that its width either 653 00:32:06,960 --> 00:32:10,880 expands or contracts to 80 pixels, depending on what it currently is. 654 00:32:10,880 --> 00:32:14,100 We would just pass that as the argument within it. 655 00:32:14,100 --> 00:32:18,060 >> Animate also have some other arguments that you could pass it, for instance, 656 00:32:18,060 --> 00:32:21,150 the speed of the animation that you want to give it. 657 00:32:21,150 --> 00:32:26,220 And to do that, I would just say quickly Google jQuery animate. 658 00:32:26,220 --> 00:32:31,710 And then, bringing up this page, you can see it's got a bunch of different 659 00:32:31,710 --> 00:32:33,560 properties that you can pass it. 660 00:32:33,560 --> 00:32:35,990 >> And I encourage you-- whenever you come across something that you don't 661 00:32:35,990 --> 00:32:40,390 know or just want to learn more about a particular method that you can call 662 00:32:40,390 --> 00:32:41,270 on something-- 663 00:32:41,270 --> 00:32:44,440 just Google it. jQuery is extremely well documented. 664 00:32:44,440 --> 00:32:49,140 And often times there are a lot of examples that they provide for you. 665 00:32:49,140 --> 00:32:52,470 If we scroll down-- 666 00:32:52,470 --> 00:32:53,720 way down-- 667 00:32:53,720 --> 00:32:57,660 668 00:32:57,660 --> 00:32:59,190 that we can use, as well. 669 00:32:59,190 --> 00:33:02,480 >> Again, when a developer actually goes through the trouble of writing a 670 00:33:02,480 --> 00:33:05,810 library, they typically want someone to use it. 671 00:33:05,810 --> 00:33:09,400 So alongside is going to be a documentation. 672 00:33:09,400 --> 00:33:12,270 And that documentation can usually be found on the project page, which is 673 00:33:12,270 --> 00:33:14,970 why we gave you that original site in the beginning, which links you to the 674 00:33:14,970 --> 00:33:18,080 project pages so you can see that documentation. 675 00:33:18,080 --> 00:33:22,670 >> Typically, the project page in the case of [INAUDIBLE], it told you the 676 00:33:22,670 --> 00:33:23,940 names of the classes. 677 00:33:23,940 --> 00:33:27,250 In the case of JavaScript, it gives you the name of the functions. 678 00:33:27,250 --> 00:33:35,310 By the way, if we scroll up to the top, a quick side note on functions is 679 00:33:35,310 --> 00:33:39,080 whenever you see a function implemented like this with the hard 680 00:33:39,080 --> 00:33:43,800 brackets in the middle, that means that that property is optional. 681 00:33:43,800 --> 00:33:44,750 Just a heads up. 682 00:33:44,750 --> 00:33:47,350 I've seen a lot of questions about that. 683 00:33:47,350 --> 00:33:50,370 >> So here we can see that the animate takes properties 684 00:33:50,370 --> 00:33:51,800 as a necessary argument. 685 00:33:51,800 --> 00:33:54,870 And everything else is optional. 686 00:33:54,870 --> 00:33:56,136 Side note-- 687 00:33:56,136 --> 00:33:58,090 you can think of this, sort of, like man pages. 688 00:33:58,090 --> 00:34:04,275 Man pages are documentation for C and for a lot of other things, as well. 689 00:34:04,275 --> 00:34:11,020 >> MIKE RIZZO: So we've learned how to change different CSS on the page, 690 00:34:11,020 --> 00:34:14,040 animate it, and remove add HTML. 691 00:34:14,040 --> 00:34:16,889 But one of the really most powerful things about JavaScript 692 00:34:16,889 --> 00:34:18,270 and especially jQuery-- 693 00:34:18,270 --> 00:34:22,570 what it lets you do is respond to different elements that happen. 694 00:34:22,570 --> 00:34:25,380 For instance, here we have an event handler. 695 00:34:25,380 --> 00:34:28,210 And that just means whenever this event happens, we handle it in a 696 00:34:28,210 --> 00:34:29,280 certain way. 697 00:34:29,280 --> 00:34:35,159 >> So here, the generic jQuery event handler is the dot on. 698 00:34:35,159 --> 00:34:42,949 And then, the first thing you provided is what event it should 699 00:34:42,949 --> 00:34:43,810 be listening for. 700 00:34:43,810 --> 00:34:45,610 So here, it's the click that we're waiting for. 701 00:34:45,610 --> 00:34:49,250 >> TOMAS REIMERS: Alternatively, you have on hover, which is a very popular one. 702 00:34:49,250 --> 00:34:52,000 So back to my drop down menu idea. 703 00:34:52,000 --> 00:34:54,239 You would have the top one on hover. 704 00:34:54,239 --> 00:34:56,096 And then you could change that. 705 00:34:56,096 --> 00:34:56,830 >> MIKE RIZZO: Right. 706 00:34:56,830 --> 00:35:01,680 And then, when that happens, it just executes this function that we give it 707 00:35:01,680 --> 00:35:05,080 as an argument and that it alerts hello or hi. 708 00:35:05,080 --> 00:35:08,900 >> TOMAS REIMERS: So in the case of JavaScript, this is a place we need to 709 00:35:08,900 --> 00:35:12,970 remove ourselves from C. We can actually take functions as arguments. 710 00:35:12,970 --> 00:35:15,940 And there are a lot of really complex ways to do this. 711 00:35:15,940 --> 00:35:17,940 We're going to promote one way, which is you can define the 712 00:35:17,940 --> 00:35:19,270 function right there. 713 00:35:19,270 --> 00:35:22,540 >> So when you're asking for a function as a parameter, you're basically just 714 00:35:22,540 --> 00:35:24,500 going to define the function on the spot. 715 00:35:24,500 --> 00:35:27,090 And the way you define a function in JavaScript is you 716 00:35:27,090 --> 00:35:28,820 literally say function. 717 00:35:28,820 --> 00:35:30,130 Then, usually, the name of the function. 718 00:35:30,130 --> 00:35:32,510 But we're never going to reference this function again. 719 00:35:32,510 --> 00:35:34,040 So we leave it nameless. 720 00:35:34,040 --> 00:35:40,440 >> Then the parentheses, then the curly braces, and then the code within that. 721 00:35:40,440 --> 00:35:42,540 So we understand this can be a little confusing. 722 00:35:42,540 --> 00:35:45,180 So we give you the general form of what an event handler looks like 723 00:35:45,180 --> 00:35:47,790 below, which is on events. 724 00:35:47,790 --> 00:35:50,598 And then, your code inside that. 725 00:35:50,598 --> 00:35:52,478 >> MIKE RIZZO: Are there any questions about this? 726 00:35:52,478 --> 00:35:54,818 This can be a little confusing the first time you see it. 727 00:35:54,818 --> 00:35:57,550 >> TOMAS REIMERS: You actually want to open up a file and show them some 728 00:35:57,550 --> 00:35:58,155 jQuery right now? 729 00:35:58,155 --> 00:35:59,853 >> MIKE RIZZO: Yeah, let's do that. 730 00:35:59,853 --> 00:36:00,256 OK. 731 00:36:00,256 --> 00:36:02,490 >> TOMAS REIMERS: So now we're in the appliance. 732 00:36:02,490 --> 00:36:07,730 And what we've done is we've taken the liberty of creating both an index.HTML 733 00:36:07,730 --> 00:36:10,100 file, which links to a JavaScript file. 734 00:36:10,100 --> 00:36:12,880 And can we open up the-- 735 00:36:12,880 --> 00:36:15,170 yeah. 736 00:36:15,170 --> 00:36:16,630 Well, it does two things. 737 00:36:16,630 --> 00:36:18,350 >> The first is it links to the JavaScript file. 738 00:36:18,350 --> 00:36:21,250 And we'll see that up here. 739 00:36:21,250 --> 00:36:25,340 We see that in the head of the HTML document, particularly. 740 00:36:25,340 --> 00:36:28,260 So you'll see there that we, basically, say SRC, 741 00:36:28,260 --> 00:36:29,590 which stands for source. 742 00:36:29,590 --> 00:36:30,630 And that's the URL. 743 00:36:30,630 --> 00:36:32,700 >> So here you can say we've included jQuery. 744 00:36:32,700 --> 00:36:34,290 And we've also included scripts. 745 00:36:34,290 --> 00:36:40,630 The other way to include JavaScript is that you can include an inline script 746 00:36:40,630 --> 00:36:44,600 tag as we have at the bottom where it says script type is text JavaScript. 747 00:36:44,600 --> 00:36:46,960 >> So we're saying, listen, we're about to include a script. 748 00:36:46,960 --> 00:36:51,890 And the type of that script is JavaScript, which is a type of text. 749 00:36:51,890 --> 00:36:52,550 Very simple. 750 00:36:52,550 --> 00:36:56,490 >> MIKE RIZZO: So this, kind of, gets to your question about how we include 751 00:36:56,490 --> 00:37:02,340 JavaScript in our files because when we had PHP, we do something like this. 752 00:37:02,340 --> 00:37:07,570 And then, have our PHP functions-- let's say stocks do 753 00:37:07,570 --> 00:37:09,150 something with that-- 754 00:37:09,150 --> 00:37:10,490 goes in there. 755 00:37:10,490 --> 00:37:13,860 However, now we have the script tags that we give it, which are actually 756 00:37:13,860 --> 00:37:19,470 part of the HTML itself because it's not faking being an HTML file like it 757 00:37:19,470 --> 00:37:25,070 is in PHP because if you actually go in and look at the source of the page, 758 00:37:25,070 --> 00:37:28,430 you'll see these script tags in there with the JavaScript associated with 759 00:37:28,430 --> 00:37:29,800 them in that. 760 00:37:29,800 --> 00:37:31,760 >> So then, if we wanted to write some JavaScript-- 761 00:37:31,760 --> 00:37:37,110 let's just say we wanted to change body because right now I don't have 762 00:37:37,110 --> 00:37:40,020 any other tags that I can really edit besides body. 763 00:37:40,020 --> 00:37:42,450 Let's just say I wanted to change the CSS of that. 764 00:37:42,450 --> 00:37:46,190 So we'll go ahead and change the color of it to red. 765 00:37:46,190 --> 00:37:47,380 >> So I save the file. 766 00:37:47,380 --> 00:37:52,700 Let's go back to our web page, refresh, and it does it automatically 767 00:37:52,700 --> 00:37:55,920 because it didn't seem like it waited at all because we weren't listening 768 00:37:55,920 --> 00:37:59,450 for an event or anything like that. 769 00:37:59,450 --> 00:38:02,800 >> TOMAS REIMERS: So if we go back to that file in particular-- the HTML 770 00:38:02,800 --> 00:38:04,710 file-- what you're going to see is we have-- 771 00:38:04,710 --> 00:38:06,810 remember that this is loaded, sort of, chronologically. 772 00:38:06,810 --> 00:38:09,910 So we have first the head. it loads those two files. 773 00:38:09,910 --> 00:38:10,800 Then we go to the body. 774 00:38:10,800 --> 00:38:11,640 And we see hello world. 775 00:38:11,640 --> 00:38:13,030 So we render hello world. 776 00:38:13,030 --> 00:38:15,240 >> And then the last thing we have is we have the script tag. 777 00:38:15,240 --> 00:38:20,880 So it runs the script tag because it's not telling it to wait for anything. 778 00:38:20,880 --> 00:38:24,700 And that's the most basic way to run JavaScript. 779 00:38:24,700 --> 00:38:29,200 >> With that said, can you put the script tag up in the header just 780 00:38:29,200 --> 00:38:31,240 to show this point? 781 00:38:31,240 --> 00:38:34,450 782 00:38:34,450 --> 00:38:35,700 And run that. 783 00:38:35,700 --> 00:38:38,880 784 00:38:38,880 --> 00:38:41,070 We're going to notice that it didn't change the color. 785 00:38:41,070 --> 00:38:44,210 And this is one of the problems of JavaScript is that things are loaded 786 00:38:44,210 --> 00:38:45,930 in a chronological order. 787 00:38:45,930 --> 00:38:49,750 >> So at the time that that code was running, we selected-- 788 00:38:49,750 --> 00:38:52,530 go back-- 789 00:38:52,530 --> 00:38:53,670 the body tag. 790 00:38:53,670 --> 00:38:57,560 The body tag doesn't exist yet because JavaScript is in line with HTML. 791 00:38:57,560 --> 00:39:01,790 So the browser is like select body. 792 00:39:01,790 --> 00:39:02,760 There's no such thing yet. 793 00:39:02,760 --> 00:39:03,600 So we can ignore that. 794 00:39:03,600 --> 00:39:05,330 And we keep going. 795 00:39:05,330 --> 00:39:07,200 >> And then we define a body tag. 796 00:39:07,200 --> 00:39:09,670 But that never gets updated. 797 00:39:09,670 --> 00:39:12,560 So when you're implementing script tags, make sure you place 798 00:39:12,560 --> 00:39:15,502 after the body tag. 799 00:39:15,502 --> 00:39:16,820 Next slide. 800 00:39:16,820 --> 00:39:17,830 >> MIKE RIZZO: OK. 801 00:39:17,830 --> 00:39:19,330 So we changed something. 802 00:39:19,330 --> 00:39:21,910 But it didn't look like it responded to us at all because it just kind of 803 00:39:21,910 --> 00:39:24,150 did it as soon as it loaded the page. 804 00:39:24,150 --> 00:39:27,700 So now, instead of doing this, why don't we add an event handler. 805 00:39:27,700 --> 00:39:31,020 >> So let's do something to the body again. 806 00:39:31,020 --> 00:39:33,490 And let's say we do it on-- 807 00:39:33,490 --> 00:39:34,500 click. 808 00:39:34,500 --> 00:39:35,750 We'll add a function. 809 00:39:35,750 --> 00:39:38,270 810 00:39:38,270 --> 00:39:39,690 >> TOMAS REIMERS: Let's change it's color to red again. 811 00:39:39,690 --> 00:39:40,000 Why not? 812 00:39:40,000 --> 00:39:41,680 >> MIKE RIZZO: Yeah, let's change its' color to red again. 813 00:39:41,680 --> 00:39:46,310 814 00:39:46,310 --> 00:39:46,900 All right. 815 00:39:46,900 --> 00:39:48,480 So let's reload the page. 816 00:39:48,480 --> 00:39:49,530 OK, we see-- 817 00:39:49,530 --> 00:39:52,290 as expected, it doesn't turn red yet. 818 00:39:52,290 --> 00:39:53,610 But then we can go ahead and click it. 819 00:39:53,610 --> 00:39:54,270 >> TOMAS REIMERS: And it does turn red. 820 00:39:54,270 --> 00:39:56,090 >> MIKE RIZZO: And it does turn red as expected. 821 00:39:56,090 --> 00:39:59,010 >> TOMAS REIMERS: And we can see how we can start to build very basic 822 00:39:59,010 --> 00:40:00,170 interaction. 823 00:40:00,170 --> 00:40:03,850 Other things we might want to do is, if we don't want to make the body 824 00:40:03,850 --> 00:40:07,230 color red, let's make the HTML background color red. 825 00:40:07,230 --> 00:40:08,480 Just so it's the same CSS. 826 00:40:08,480 --> 00:40:19,960 827 00:40:19,960 --> 00:40:23,320 >> And when we change it, we can see this very dramatic effect of changing the 828 00:40:23,320 --> 00:40:25,510 entire page. 829 00:40:25,510 --> 00:40:29,100 So again, if you're implementing things, you can have one component 830 00:40:29,100 --> 00:40:30,150 which is meant to be clicked on. 831 00:40:30,150 --> 00:40:32,710 Let's say an Exit button and an entire other component, 832 00:40:32,710 --> 00:40:33,830 which is meant to respond. 833 00:40:33,830 --> 00:40:35,755 So you would remove a window when that happens. 834 00:40:35,755 --> 00:40:39,341 835 00:40:39,341 --> 00:40:40,700 >> MIKE RIZZO: OK. 836 00:40:40,700 --> 00:40:42,200 Just as an example-- 837 00:40:42,200 --> 00:40:44,400 you didn't get to see this earlier-- 838 00:40:44,400 --> 00:40:47,500 I'll just show you what it looks like when we hide something. 839 00:40:47,500 --> 00:40:52,220 So I'll go ahead and do slide up. 840 00:40:52,220 --> 00:40:54,440 >> TOMAS REIMERS: Want to wrap that in a paragraph type before we do that? 841 00:40:54,440 --> 00:40:55,132 >> MIKE RIZZO: OK. 842 00:40:55,132 --> 00:40:59,135 Yeah, why don't we do that just so we can select it a little more. 843 00:40:59,135 --> 00:41:00,490 >> TOMAS REIMERS: And let's give it a class. 844 00:41:00,490 --> 00:41:01,740 >> MIKE RIZZO: Yeah. 845 00:41:01,740 --> 00:41:06,575 846 00:41:06,575 --> 00:41:09,920 OK, so let's see. 847 00:41:09,920 --> 00:41:14,820 Instead of selecting the actual body now, I'll just select everything with 848 00:41:14,820 --> 00:41:18,780 class hello, which here we just have one thing. 849 00:41:18,780 --> 00:41:20,900 So we shouldn't have to worry about that. 850 00:41:20,900 --> 00:41:23,080 >> So I'll refresh it. 851 00:41:23,080 --> 00:41:24,230 I'll go ahead and click it. 852 00:41:24,230 --> 00:41:27,890 And it, sort of, did a weird slide up thing, which didn't look that 853 00:41:27,890 --> 00:41:29,580 attractive. 854 00:41:29,580 --> 00:41:31,060 Generally, they do look pretty nice. 855 00:41:31,060 --> 00:41:32,720 I guess, this-- for some reason-- didn't. 856 00:41:32,720 --> 00:41:36,640 I'll just do a fade out so you can look at that too. 857 00:41:36,640 --> 00:41:38,100 Much nicer. 858 00:41:38,100 --> 00:41:41,150 >> And then, if I open up the JavaScript console again and we want to see what 859 00:41:41,150 --> 00:41:43,900 it looks like when we fade it in. 860 00:41:43,900 --> 00:41:46,920 Now, I just call fade in on it. 861 00:41:46,920 --> 00:41:48,830 And it fades back in. 862 00:41:48,830 --> 00:41:56,150 >> Similarly, we could actually also pass an argument to fade in or fade out, 863 00:41:56,150 --> 00:41:57,640 which is, kind of, the speed of it. 864 00:41:57,640 --> 00:42:02,220 So let's go ahead and say we want it to go slowly fade in. 865 00:42:02,220 --> 00:42:04,250 So I guess it still seemed pretty quick. 866 00:42:04,250 --> 00:42:06,180 But it was slower than before. 867 00:42:06,180 --> 00:42:10,340 >> TOMAS REIMERS: And if you want to find out more about these things, again, 868 00:42:10,340 --> 00:42:13,410 just go to the jQuery documentation, which we've given you, and read 869 00:42:13,410 --> 00:42:13,735 through these. 870 00:42:13,735 --> 00:42:15,790 They document their functions incredibly well. 871 00:42:15,790 --> 00:42:18,622 872 00:42:18,622 --> 00:42:19,570 >> MIKE RIZZO: OK. 873 00:42:19,570 --> 00:42:21,560 So I guess let's go back to this. 874 00:42:21,560 --> 00:42:23,490 And we can talk about our last page. 875 00:42:23,490 --> 00:42:24,690 Well, we can finish with Bootstrap. 876 00:42:24,690 --> 00:42:27,140 And then we'll open it up for some questions. 877 00:42:27,140 --> 00:42:30,180 And if you guys have any ideas that you'd like to try to throw up and see 878 00:42:30,180 --> 00:42:34,150 if we can implement them with JavaScript quickly. 879 00:42:34,150 --> 00:42:37,890 >> So really quickly about Bootstrap, which was automatically included in 880 00:42:37,890 --> 00:42:41,700 your last problem set in the CSS folder and actually linked to in your 881 00:42:41,700 --> 00:42:43,190 header.PHP. 882 00:42:43,190 --> 00:42:46,740 So you could have added classes that are defined within Bootstrap to it. 883 00:42:46,740 --> 00:42:50,490 And it would have automatically styled those things accordingly. 884 00:42:50,490 --> 00:42:54,550 >> TOMAS REIMERS: So Bootstrap is a very magical thing developed by the people 885 00:42:54,550 --> 00:42:55,340 at Twitter. 886 00:42:55,340 --> 00:42:57,230 And what it was meant to do was-- 887 00:42:57,230 --> 00:43:00,740 before websites were really hard to make look nice, especially when we had 888 00:43:00,740 --> 00:43:02,200 a lot of common components. 889 00:43:02,200 --> 00:43:04,770 So a lot of buttons on the web looked the same. 890 00:43:04,770 --> 00:43:08,960 >> A lot of text fields can be made to look better than the standard text 891 00:43:08,960 --> 00:43:13,620 field you probably know from really old websites or really poorly made 892 00:43:13,620 --> 00:43:18,210 websites, which just look like literal text boxes without any form of text 893 00:43:18,210 --> 00:43:21,190 shadow or any kind of nice outline. 894 00:43:21,190 --> 00:43:24,540 So what Bootstrap did was it said, well, we have a lot common styles. 895 00:43:24,540 --> 00:43:28,210 Why don't we make one common set of CSS and a common set of JavaScript as 896 00:43:28,210 --> 00:43:32,210 well, which can style it as is and which can give people things like drop 897 00:43:32,210 --> 00:43:34,610 down menus, which can give people things like modals. 898 00:43:34,610 --> 00:43:38,580 >> Modal is what pops over the page whenever it's strictly speaking 899 00:43:38,580 --> 00:43:41,090 something, which inhibits further interaction until you 900 00:43:41,090 --> 00:43:43,110 interact with it. 901 00:43:43,110 --> 00:43:45,820 Something like this is, are you sure you want to delete this thing? 902 00:43:45,820 --> 00:43:49,100 You can't really do anything else until you say yes or no. 903 00:43:49,100 --> 00:43:52,720 >> It took all this and it packaged it together and said, here we go. 904 00:43:52,720 --> 00:43:54,630 People can now use this. 905 00:43:54,630 --> 00:43:56,830 And you can find it over at getbootstrap.com. 906 00:43:56,830 --> 00:44:00,480 It was automatically included within your last problem set. 907 00:44:00,480 --> 00:44:04,160 And you're more than welcome to use it on your final project. 908 00:44:04,160 --> 00:44:06,950 And if you want to follow that link to get Bootstrap. 909 00:44:06,950 --> 00:44:10,590 910 00:44:10,590 --> 00:44:15,700 >> You'll see here is the Bootstrap CSS site. 911 00:44:15,700 --> 00:44:16,860 You'll see Bootstrap. 912 00:44:16,860 --> 00:44:20,450 And if you scroll down, you'll see how to download it, how to 913 00:44:20,450 --> 00:44:21,900 install it, et cetera. 914 00:44:21,900 --> 00:44:24,700 >> MIKE RIZZO: And you can also, interestingly enough, customize it to 915 00:44:24,700 --> 00:44:27,770 be whatever kind of themes that you want. 916 00:44:27,770 --> 00:44:31,270 I know that's something I did for my final project when I took the class 917 00:44:31,270 --> 00:44:32,050 was customize it. 918 00:44:32,050 --> 00:44:34,540 A different version of Bootstrap that had a different color scheme and 919 00:44:34,540 --> 00:44:36,700 different shapes of some different things. 920 00:44:36,700 --> 00:44:38,250 So I encourage you to play with that. 921 00:44:38,250 --> 00:44:39,440 It's kind of fun to do. 922 00:44:39,440 --> 00:44:43,230 >> TOMAS REIMERS: Looking across the top again, it's very similar to the Font 923 00:44:43,230 --> 00:44:44,970 Awesome site. 924 00:44:44,970 --> 00:44:47,810 A lot of documentation will start to seem similar when you've 925 00:44:47,810 --> 00:44:48,940 seen enough of it. 926 00:44:48,940 --> 00:44:51,260 So here we have the CSS component of this. 927 00:44:51,260 --> 00:44:53,540 And you'll see how it can style things. 928 00:44:53,540 --> 00:44:56,780 So if you click on tables, for example, you can instantly make a 929 00:44:56,780 --> 00:45:01,710 table pretty by simply adding the class table to it. 930 00:45:01,710 --> 00:45:03,150 >> Same things for buttons. 931 00:45:03,150 --> 00:45:12,140 If you simply add the class BTN and BTN default or BTN primary, you can 932 00:45:12,140 --> 00:45:16,240 get any one of these buttons with these pre-made styles. 933 00:45:16,240 --> 00:45:18,570 And then, if you're looking for something more complex than simply 934 00:45:18,570 --> 00:45:24,100 restyling what w already have, over on the JavaScript tab across the top we 935 00:45:24,100 --> 00:45:25,120 have a bunch of components. 936 00:45:25,120 --> 00:45:30,410 >> So here we have transitions, modals, dropdowns, tabs, and tooltips. 937 00:45:30,410 --> 00:45:35,530 A tooltip is what pops up under your mouse when you hover on something. 938 00:45:35,530 --> 00:45:40,280 Popovers, alerts, buttons, collapsible accordions is what 939 00:45:40,280 --> 00:45:41,190 they're usually called. 940 00:45:41,190 --> 00:45:43,045 Carousels, which flip through like images. 941 00:45:43,045 --> 00:45:52,190 942 00:45:52,190 --> 00:45:54,840 >> So those are the components of Bootstrap. 943 00:45:54,840 --> 00:45:57,620 I would encourage you to highly go look at them. 944 00:45:57,620 --> 00:46:01,780 There's a JavaScript component and a CSS component. 945 00:46:01,780 --> 00:46:03,880 Feel free to use them as you will. 946 00:46:03,880 --> 00:46:06,730 We're not going to go too much into them because we feel the documentation 947 00:46:06,730 --> 00:46:09,360 is really well done. 948 00:46:09,360 --> 00:46:10,540 And yeah. 949 00:46:10,540 --> 00:46:14,500 Do you have any questions about that? 950 00:46:14,500 --> 00:46:19,430 >> MIKE RIZZO: So as a are really quick side, the design of this web page that 951 00:46:19,430 --> 00:46:21,830 we quickly put together for this presentation is 952 00:46:21,830 --> 00:46:24,290 actually done using Bootstrap. 953 00:46:24,290 --> 00:46:27,810 As you can see, when we click on these different tabs, we're never actually 954 00:46:27,810 --> 00:46:30,750 leaving this current index.html page. 955 00:46:30,750 --> 00:46:36,400 So what we have is different divs within this index.html. 956 00:46:36,400 --> 00:46:39,610 And then, whenever we click a different tab, it's just changing 957 00:46:39,610 --> 00:46:41,590 which one's showing. 958 00:46:41,590 --> 00:46:47,390 >> So it accordingly positions them, changes the HTML of the page so that 959 00:46:47,390 --> 00:46:52,330 the current tab is marked as active so it appears differently and looks 960 00:46:52,330 --> 00:46:52,820 really nice. 961 00:46:52,820 --> 00:46:57,260 >> TOMAS REIMERS: So that was all done without us writing almost any CSS. 962 00:46:57,260 --> 00:47:01,440 We also see a header across the top, which the colors are by us. 963 00:47:01,440 --> 00:47:04,800 But the actual putting it on the top of the page and making 964 00:47:04,800 --> 00:47:06,660 it scroll was Bootstrap. 965 00:47:06,660 --> 00:47:09,720 And then even for another library-- this isn't one we talked about but one 966 00:47:09,720 --> 00:47:11,580 you can Google if you want. 967 00:47:11,580 --> 00:47:15,130 This is called prettify.js. 968 00:47:15,130 --> 00:47:20,650 And it will syntax highlight your code for you using both CSS and JavaScript. 969 00:47:20,650 --> 00:47:23,480 970 00:47:23,480 --> 00:47:27,070 >> The last thing we want to talk about before we release you out into the 971 00:47:27,070 --> 00:47:30,620 world to look at libraries to figure out how to use them and to, hopefully, 972 00:47:30,620 --> 00:47:34,640 read documentation and find what you need is how to find libraries. 973 00:47:34,640 --> 00:47:37,000 So the first is we're just going to push Google. 974 00:47:37,000 --> 00:47:37,810 Go Google. 975 00:47:37,810 --> 00:47:41,150 >> That's literally what we do when we need to do something is we Google. 976 00:47:41,150 --> 00:47:44,730 Is there a JavaScript library that allows me to manipulate time in a 977 00:47:44,730 --> 00:47:45,400 useful way? 978 00:47:45,400 --> 00:47:49,510 So if I know that some user creating an account here, and this is the 979 00:47:49,510 --> 00:47:53,010 current time, how can I calculate the difference with that without having to 980 00:47:53,010 --> 00:47:55,020 calculate it myself? 981 00:47:55,020 --> 00:47:59,630 So this is actually a common thing, JavaScript time library. 982 00:47:59,630 --> 00:48:02,440 And here we Moment.js-- the most popular one. 983 00:48:02,440 --> 00:48:06,530 >> If we need a library to manipulate something like color to be able to 984 00:48:06,530 --> 00:48:08,650 generate a bunch of random colors-- 985 00:48:08,650 --> 00:48:10,660 possibly, to generate a style or something-- 986 00:48:10,660 --> 00:48:13,480 we could Google something like JavaScript color library. 987 00:48:13,480 --> 00:48:15,620 And I'm sure we would pop up with a thousand and one of them. 988 00:48:15,620 --> 00:48:18,290 989 00:48:18,290 --> 00:48:21,410 You're welcome to read through them. 990 00:48:21,410 --> 00:48:24,610 >> So most things-- when you find them-- are going be hosted on one of the 991 00:48:24,610 --> 00:48:25,920 sites which host code. 992 00:48:25,920 --> 00:48:26,960 They're are a few popular ones. 993 00:48:26,960 --> 00:48:30,870 The most popular, by far, is github.com. 994 00:48:30,870 --> 00:48:35,300 And if you go to GitHub it's actually where Normalize was hosted. 995 00:48:35,300 --> 00:48:36,950 So if you want to go back to that one. 996 00:48:36,950 --> 00:48:38,135 Show them that. 997 00:48:38,135 --> 00:48:40,516 >> MIKE RIZZO: And that's actually where this is hosted too, if you noticed. 998 00:48:40,516 --> 00:48:41,000 >> TOMAS REIMERS: Yeah. 999 00:48:41,000 --> 00:48:49,078 So if you go over to Normalize and go to the GitHub. 1000 00:48:49,078 --> 00:48:51,936 Were is that? 1001 00:48:51,936 --> 00:48:54,620 >> MIKE RIZZO: That little cat thing is the GitHub symbol. 1002 00:48:54,620 --> 00:48:56,330 >> TOMAS REIMERS: Oh. 1003 00:48:56,330 --> 00:49:02,180 So GitHub uses a method called Git to store code. 1004 00:49:02,180 --> 00:49:05,150 Is you don't know what that is or it frightens you, that's fine. 1005 00:49:05,150 --> 00:49:16,100 You don't have to know what Git is because GitHub has a Download button 1006 00:49:16,100 --> 00:49:17,200 at the bottom right. 1007 00:49:17,200 --> 00:49:21,350 >> The other useful thing to know about GitHub is most products 1008 00:49:21,350 --> 00:49:23,200 will have a read me. 1009 00:49:23,200 --> 00:49:25,400 And if they don't have a website, the read me will talk about how you 1010 00:49:25,400 --> 00:49:28,310 install it, how you use it, what it does, et cetera, et cetera, et cetera. 1011 00:49:28,310 --> 00:49:31,033 What we've basically been walking you through. 1012 00:49:31,033 --> 00:49:32,326 >> MIKE RIZZO: Internet's quitting. 1013 00:49:32,326 --> 00:49:34,020 >> TOMAS REIMERS: That's fine. 1014 00:49:34,020 --> 00:49:36,980 The last two things we wanted to talk about-- 1015 00:49:36,980 --> 00:49:38,750 we've talked about Git-- 1016 00:49:38,750 --> 00:49:40,290 is troubleshooting. 1017 00:49:40,290 --> 00:49:43,020 And this one isn't as relevant for the final product as it is 1018 00:49:43,020 --> 00:49:44,870 when you leave 50. 1019 00:49:44,870 --> 00:49:48,310 And when you run into products implementing libraries or implementing 1020 00:49:48,310 --> 00:49:50,230 your own project, you're going to have questions or you're 1021 00:49:50,230 --> 00:49:51,660 going to look for questions. 1022 00:49:51,660 --> 00:49:53,060 >> Again, Google it. 1023 00:49:53,060 --> 00:49:54,630 That's literally what we do. 1024 00:49:54,630 --> 00:49:56,400 This is going to sound silly. 1025 00:49:56,400 --> 00:49:58,310 But literally, we Google it. 1026 00:49:58,310 --> 00:50:01,810 And again, one of the first things you'll usually run into is 1027 00:50:01,810 --> 00:50:06,550 stackoverflow.com, which is a wonderful question and answer sight. 1028 00:50:06,550 --> 00:50:10,530 >> It's wonderful both because you can post the questions and look for 1029 00:50:10,530 --> 00:50:12,760 answers but also because it already has a lot of 1030 00:50:12,760 --> 00:50:14,590 pre-populated content there. 1031 00:50:14,590 --> 00:50:18,510 So usually when you Google a programming question within the first 1032 00:50:18,510 --> 00:50:22,620 couple hits you may have already run into it during your problem sets. 1033 00:50:22,620 --> 00:50:27,840 >> And then, the last really brief thing is JSFIDDLE, which is-- today we've 1034 00:50:27,840 --> 00:50:32,110 been doing a lot of work with JavaScript HTML CSS. 1035 00:50:32,110 --> 00:50:39,820 JSFIDDLE is a web app, which basically allows you to take your HTML, YOUR 1036 00:50:39,820 --> 00:50:42,820 JavaScript bottom left, and your CSS top right. 1037 00:50:42,820 --> 00:50:47,840 And then it can create a quick render of it and see how it interacts. 1038 00:50:47,840 --> 00:50:50,500 It's very useful when people are trying to do a proof of concept like 1039 00:50:50,500 --> 00:50:52,910 this is how you would do a drop down menu. 1040 00:50:52,910 --> 00:50:54,980 Maybe a quick uncover or whatever. 1041 00:50:54,980 --> 00:50:56,560 >> MIKE RIZZO: So let's go ahead and click this. 1042 00:50:56,560 --> 00:50:57,820 A quick note-- 1043 00:50:57,820 --> 00:51:00,430 whereas, before we were doing on click. 1044 00:51:00,430 --> 00:51:04,380 Turns out JCorey Korea also has a built in click event handler that it 1045 00:51:04,380 --> 00:51:07,020 uses just because it figures you're going to want to do a lot of things 1046 00:51:07,020 --> 00:51:08,410 when you want to click something. 1047 00:51:08,410 --> 00:51:09,690 >> Similarly, it also has a hover. 1048 00:51:09,690 --> 00:51:12,850 But to get the full scope of those, look at the jQuery 1049 00:51:12,850 --> 00:51:15,320 documentation and do it. 1050 00:51:15,320 --> 00:51:18,760 I did something stupid here. 1051 00:51:18,760 --> 00:51:21,490 >> TOMAS REIMERS: So I have a really quick program right here, which says 1052 00:51:21,490 --> 00:51:22,640 button on click. 1053 00:51:22,640 --> 00:51:23,890 Then we have a for loop. 1054 00:51:23,890 --> 00:51:26,810 For i is less than 404. 1055 00:51:26,810 --> 00:51:29,530 It's just going to pop up these alert messages. 1056 00:51:29,530 --> 00:51:33,425 >> MIKE RIZZO: And what was the code 404 stood for in HTML? 1057 00:51:33,425 --> 00:51:34,145 Does anyone remember? 1058 00:51:34,145 --> 00:51:35,450 Not found, right. 1059 00:51:35,450 --> 00:51:38,640 1060 00:51:38,640 --> 00:51:40,885 Chrome also added this neat thing where you can-- 1061 00:51:40,885 --> 00:51:43,430 >> TOMAS REIMERS: Because people like Mike started doing this a lot and 1062 00:51:43,430 --> 00:51:47,230 annoying users, which allows you to see info. 1063 00:51:47,230 --> 00:51:48,286 >> MIKE RIZZO: Yeah. 1064 00:51:48,286 --> 00:51:50,690 >> TOMAS REIMERS: Do we have any questions about this, about JavaScript 1065 00:51:50,690 --> 00:51:53,420 libraries, finding libraries, or what web development looks 1066 00:51:53,420 --> 00:51:55,400 like in the real world? 1067 00:51:55,400 --> 00:51:56,880 We're running up against time. 1068 00:51:56,880 --> 00:52:00,400 So I'm not sure we're going to have time to implement 1069 00:52:00,400 --> 00:52:02,290 unless it's really quick. 1070 00:52:02,290 --> 00:52:04,580 Are we good? 1071 00:52:04,580 --> 00:52:08,110 >> MIKE RIZZO: Anything you guys would like to see really quick in, like, two 1072 00:52:08,110 --> 00:52:09,556 minutes or less? 1073 00:52:09,556 --> 00:52:10,870 >> TOMAS REIMERS: Anything we can clarify? 1074 00:52:10,870 --> 00:52:12,500 How to write in-- 1075 00:52:12,500 --> 00:52:13,260 >> AUDIENCE: [INAUDIBLE]? 1076 00:52:13,260 --> 00:52:16,070 >> MIKE RIZZO: Yes, so that's-- 1077 00:52:16,070 --> 00:52:18,065 >> TOMAS REIMERS: You can just hit Control-U on the website. 1078 00:52:18,065 --> 00:52:19,275 >> MIKE RIZZO: Oh, I didn't know that. 1079 00:52:19,275 --> 00:52:22,290 >> TOMAS REIMERS: I think, yeah. 1080 00:52:22,290 --> 00:52:23,300 Control-U. Yeah. 1081 00:52:23,300 --> 00:52:25,970 >> MIKE RIZZO: Oh, so that's the code for the website. 1082 00:52:25,970 --> 00:52:29,580 But if you actually want to download our files and everything, it is hosted 1083 00:52:29,580 --> 00:52:32,650 on github.com 1084 00:52:32,650 --> 00:52:34,850 >> TOMAS REIMERS: slash my name-- 1085 00:52:34,850 --> 00:52:38,504 Tomas Reimers-- slash CS50 hyphen seminar. 1086 00:52:38,504 --> 00:52:40,710 >> MIKE RIZZO: And you can find everything there. 1087 00:52:40,710 --> 00:52:42,310 >> TOMAS REIMERS: This is what GitHub looks like, by the way. 1088 00:52:42,310 --> 00:52:44,910 So again, when you see an open source project, typically, they'll be a read 1089 00:52:44,910 --> 00:52:45,950 me there that you can read. 1090 00:52:45,950 --> 00:52:50,200 And if you go back, you'll notice that you have the download zip, which will 1091 00:52:50,200 --> 00:52:52,130 allow you to download the source code to include the 1092 00:52:52,130 --> 00:52:53,666 product in your own thing. 1093 00:52:53,666 --> 00:52:56,890 >> MIKE RIZZO: Yeah, and if we just click on the index.html really quickly-- 1094 00:52:56,890 --> 00:52:59,180 >> TOMAS REIMERS: You'll see here's the source code for our website. 1095 00:52:59,180 --> 00:53:02,016 1096 00:53:02,016 --> 00:53:06,070 >> MIKE RIZZO: Also, I forgot to push right before with the big table it 1097 00:53:06,070 --> 00:53:09,860 included, but there's also a table of chmods that we included 1098 00:53:09,860 --> 00:53:13,210 just for your clarity. 1099 00:53:13,210 --> 00:53:16,940 But if we scroll all the way down to the bottom, we didn't actually do very 1100 00:53:16,940 --> 00:53:21,160 much with the JavaScript stuff at all with this. 1101 00:53:21,160 --> 00:53:26,610 It's exclusively from everything else that we had. 1102 00:53:26,610 --> 00:53:28,730 >> So thank you guys for coming and listening. 1103 00:53:28,730 --> 00:53:29,830 We hope this was really helpful. 1104 00:53:29,830 --> 00:53:33,020 If you have any JavaScript related questions or just want to talk about 1105 00:53:33,020 --> 00:53:36,240 what else like what other cool things you can do with JavaScript, we'd love 1106 00:53:36,240 --> 00:53:37,186 to talk to you. 1107 00:53:37,186 --> 00:53:40,010 >> TOMAS REIMERS: If you have a question about your project or if this can be 1108 00:53:40,010 --> 00:53:42,740 relevant, we'll probably stick around a little bit after this. 1109 00:53:42,740 --> 00:53:44,640 But other than that, have a good weekend. 1110 00:53:44,640 --> 00:53:45,845 >> MIKE RIZZO: Yeah, enjoy. 1111 00:53:45,845 --> 00:53:46,120 See you guys. 1112 00:53:46,120 --> 00:53:47,370 >> TOMAS REIMERS: See ya. 1113 00:53:47,370 --> 00:53:47,926