1 00:00:00,000 --> 00:00:10,632 2 00:00:10,632 --> 00:00:12,340 ALLISON BUCHHOLTZ-AU: All right everyone. 3 00:00:12,340 --> 00:00:13,520 Welcome back to section. 4 00:00:13,520 --> 00:00:15,315 It is our penultimate section. 5 00:00:15,315 --> 00:00:16,542 It's so sad. 6 00:00:16,542 --> 00:00:19,500 I don't know what I'm going to do without seeing you guys every Monday. 7 00:00:19,500 --> 00:00:20,970 I guess we should just-- maybe we could just 8 00:00:20,970 --> 00:00:22,710 meet here and have dinner or something. 9 00:00:22,710 --> 00:00:23,270 I don't know. 10 00:00:23,270 --> 00:00:24,370 I'll bring food instead. 11 00:00:24,370 --> 00:00:26,290 We'll just talk. 12 00:00:26,290 --> 00:00:29,900 But yes, next week will be our last section. 13 00:00:29,900 --> 00:00:32,390 >> On that note, you have a quiz next week. 14 00:00:32,390 --> 00:00:35,660 I know I forgot to do my, like, two week advance notice last week, 15 00:00:35,660 --> 00:00:39,140 but hopefully you guys knew this was coming. 16 00:00:39,140 --> 00:00:42,880 Hopefully this is one of the last midterms for you guys for the semester. 17 00:00:42,880 --> 00:00:46,950 But it's going to cover all the material that we've gone over. 18 00:00:46,950 --> 00:00:50,811 So it's not like you can just forget about four loops or variables. 19 00:00:50,811 --> 00:00:52,560 Because we learned those in the beginning, 20 00:00:52,560 --> 00:00:55,870 those are obviously fair game for your quiz. 21 00:00:55,870 --> 00:01:00,150 >> It's going to be the same format, same length, so you already are used to it. 22 00:01:00,150 --> 00:01:02,330 There's going to be coding by hand problems, 23 00:01:02,330 --> 00:01:06,270 maybe some true false, maybe some short answer. 24 00:01:06,270 --> 00:01:08,090 So you should be familiar with the format, 25 00:01:08,090 --> 00:01:10,940 especially if you take the practice tests. 26 00:01:10,940 --> 00:01:13,950 But as I say here, it's cumulative, but we're definitely 27 00:01:13,950 --> 00:01:17,410 going to be focusing on things from week six onward. 28 00:01:17,410 --> 00:01:24,050 So, we're probably not going to ask you about how many bytes 29 00:01:24,050 --> 00:01:26,180 are in each type or those sorts of things, 30 00:01:26,180 --> 00:01:29,730 but we're probably going to be interested in things like linked lists, 31 00:01:29,730 --> 00:01:32,750 or different data structures, or different algorithms 32 00:01:32,750 --> 00:01:33,960 that we've talked about. 33 00:01:33,960 --> 00:01:38,990 So make sure you're really up on those, and if you 34 00:01:38,990 --> 00:01:41,590 need any resources, here's lots of resources. 35 00:01:41,590 --> 00:01:44,790 I just gave you kind of a quick list there. 36 00:01:44,790 --> 00:01:48,330 >> Next week will be quiz review during this time. 37 00:01:48,330 --> 00:01:52,290 So if you have any questions or specific topics, 38 00:01:52,290 --> 00:01:56,180 specific things on the quiz that you'd like to go over, please 39 00:01:56,180 --> 00:02:01,780 send them to me ahead of time so I can kind of prepare some material for that. 40 00:02:01,780 --> 00:02:06,310 And in addition to this section review, we'll 41 00:02:06,310 --> 00:02:09,616 also be holding the course-wide review like we did last time. 42 00:02:09,616 --> 00:02:11,490 And it's going to be done by the same people. 43 00:02:11,490 --> 00:02:13,030 I don't know if that makes it better or worse, 44 00:02:13,030 --> 00:02:15,670 but it's going to be me, Hannah, Davan, and Gabe again. 45 00:02:15,670 --> 00:02:18,630 So if you want to come see us all banter with each other 46 00:02:18,630 --> 00:02:21,270 and walk you through quiz review, you should definitely 47 00:02:21,270 --> 00:02:22,600 come to that next Monday also. 48 00:02:22,600 --> 00:02:26,210 So you'll just have a Monday jam packed of quiz review, which is good 49 00:02:26,210 --> 00:02:29,840 because then you have Tuesday to process through everything. 50 00:02:29,840 --> 00:02:32,230 >> But definitely do check out these resources. 51 00:02:32,230 --> 00:02:36,030 Study.csv.net is by far, I think, one of the most useful, 52 00:02:36,030 --> 00:02:37,990 mostly because it has a lot of sample code, 53 00:02:37,990 --> 00:02:40,490 it has all the Power Points with all the notes on it, 54 00:02:40,490 --> 00:02:44,510 which are really what I draw most of my section materials from. 55 00:02:44,510 --> 00:02:47,480 If there's anything in previous sections that I may have sent out 56 00:02:47,480 --> 00:02:49,920 that you may not have gotten, just let me know. 57 00:02:49,920 --> 00:02:52,520 Like last week's sample code, if anyone didn't get that, 58 00:02:52,520 --> 00:02:55,930 just email me or come talk to me, and I'll make sure that you get that. 59 00:02:55,930 --> 00:03:02,000 >> So with that, today we are going to be talking about JavaScript. 60 00:03:02,000 --> 00:03:04,690 So here we Tommy, who I was just talking to you last night. 61 00:03:04,690 --> 00:03:06,670 I love Tommy. 62 00:03:06,670 --> 00:03:09,040 JavaScript is his favorite language, as he says here. 63 00:03:09,040 --> 00:03:14,050 They'll try and tell you that it's not the best, and they will be wrong. 64 00:03:14,050 --> 00:03:16,510 So Tommy is a JavaScript master. 65 00:03:16,510 --> 00:03:19,850 I'm not quite at his level, but I was like, 66 00:03:19,850 --> 00:03:22,900 "Tommy, how do I teach these kids JavaScript?" 67 00:03:22,900 --> 00:03:26,700 So I got some tips, so hopefully they work out. 68 00:03:26,700 --> 00:03:31,140 >> So a couple things to know is that JavaScript is a client-side scripting 69 00:03:31,140 --> 00:03:35,560 language, so whereas PHP is something that we considered more server-side, 70 00:03:35,560 --> 00:03:39,280 it was upload to the server, compiled and executed there. 71 00:03:39,280 --> 00:03:42,871 This one is executed on your own machine. 72 00:03:42,871 --> 00:03:43,370 OK? 73 00:03:43,370 --> 00:03:46,960 So you load some JavaScript page, and it executes on your machine. 74 00:03:46,960 --> 00:03:49,910 Syntax is very similar to C and PHP. 75 00:03:49,910 --> 00:03:52,490 We're going to go through some examples of JavaScript, 76 00:03:52,490 --> 00:03:56,740 and you're going to see that the way we talk about variables, loops, 77 00:03:56,740 --> 00:03:58,910 and conditions are all very similar. 78 00:03:58,910 --> 00:04:00,500 OK? 79 00:04:00,500 --> 00:04:04,490 The fact that they are so similar is probably going to trip some of you 80 00:04:04,490 --> 00:04:08,529 up, in some cases, just because you'll incorporate a little bit of C 81 00:04:08,529 --> 00:04:09,570 where there shouldn't be. 82 00:04:09,570 --> 00:04:14,130 Maybe you try and type something when it shouldn't be typed. 83 00:04:14,130 --> 00:04:16,540 >> And on that, one thing to know is that JavaScript 84 00:04:16,540 --> 00:04:19,360 is a dynamically typed language, like PHP. 85 00:04:19,360 --> 00:04:21,410 So if you guys remember from section last week, 86 00:04:21,410 --> 00:04:23,680 when we were kind of doing our PHP crash course, 87 00:04:23,680 --> 00:04:28,860 we saw how a string one could be turned into an int one, and so forth. 88 00:04:28,860 --> 00:04:31,650 89 00:04:31,650 --> 00:04:34,850 The type of your variables are determined at run time, 90 00:04:34,850 --> 00:04:38,180 so they may change over the course of the program, 91 00:04:38,180 --> 00:04:43,109 and in the same way that we never really declare types for PHP variables, 92 00:04:43,109 --> 00:04:45,900 we're going to be doing the same thing here, where we're not really 93 00:04:45,900 --> 00:04:49,740 controlling the types of our variables, so to speak, like we do in C. 94 00:04:49,740 --> 00:04:52,200 >> And then one thing that is pretty cool is 95 00:04:52,200 --> 00:04:54,090 that you can error check via the console, 96 00:04:54,090 --> 00:04:57,240 with this great function console.log, which 97 00:04:57,240 --> 00:05:00,930 allows you to print out different variables or objects that we'll 98 00:05:00,930 --> 00:05:01,750 talk about. 99 00:05:01,750 --> 00:05:05,720 Just like last week when I was like, "use this function," with dump 100 00:05:05,720 --> 00:05:10,490 from your pset this is a function you want to use, console.log. 101 00:05:10,490 --> 00:05:12,860 I was so surprised how many students at office hours 102 00:05:12,860 --> 00:05:14,530 did not know about the dump function. 103 00:05:14,530 --> 00:05:19,010 And I was like, "guys, this will make your life so much easier." 104 00:05:19,010 --> 00:05:22,960 >> All right, so that was kind of just a brief thing, as always, 105 00:05:22,960 --> 00:05:24,000 we have examples. 106 00:05:24,000 --> 00:05:25,600 I know you guys love those. 107 00:05:25,600 --> 00:05:30,930 So here's an example of a very simple JavaScript file here. 108 00:05:30,930 --> 00:05:34,000 So it's just going to create this pop-up that says, 109 00:05:34,000 --> 00:05:36,336 "hello world," when you enter the page, but let's 110 00:05:36,336 --> 00:05:37,960 try and walk through this a little bit. 111 00:05:37,960 --> 00:05:43,440 So obviously this is just like your normal index.html. 112 00:05:43,440 --> 00:05:50,280 So, just our normal template here, and we have HTML, we have our head, 113 00:05:50,280 --> 00:05:55,580 and just like with CSS, how we included some outside file, right? 114 00:05:55,580 --> 00:05:59,260 We have some script type text that is JavaScript. 115 00:05:59,260 --> 00:06:02,680 And the source is hello.js, which is down here. 116 00:06:02,680 --> 00:06:05,630 This is the entire file of hello.js. 117 00:06:05,630 --> 00:06:09,080 And then we have some title and some body HTML 118 00:06:09,080 --> 00:06:11,050 that we don't really care about. 119 00:06:11,050 --> 00:06:15,970 >> What happens is, when we load this page, it automatically executes this script. 120 00:06:15,970 --> 00:06:16,470 OK? 121 00:06:16,470 --> 00:06:18,790 So JavaScript will execute automatically. 122 00:06:18,790 --> 00:06:22,860 So what it's going to do, it's going to immediately go and execute this. 123 00:06:22,860 --> 00:06:24,110 And it's going to say, "alert. 124 00:06:24,110 --> 00:06:25,190 Hello world." 125 00:06:25,190 --> 00:06:30,840 Which alert is the function that actually generates this box. 126 00:06:30,840 --> 00:06:31,540 OK? 127 00:06:31,540 --> 00:06:33,390 So it's kind of all encompass. 128 00:06:33,390 --> 00:06:36,700 There's nothing extra we had to do besides just alert, 129 00:06:36,700 --> 00:06:40,000 and then whatever we wanted within our Alert box. 130 00:06:40,000 --> 00:06:40,500 OK? 131 00:06:40,500 --> 00:06:45,080 So that's just a super simple example of what JavaScript can do. 132 00:06:45,080 --> 00:06:48,110 133 00:06:48,110 --> 00:06:50,070 >> One of the really cool things, as we'll see, 134 00:06:50,070 --> 00:06:55,150 is that JavaScript allows you to manipulate your web pages, 135 00:06:55,150 --> 00:06:57,720 without having to reload them every time. 136 00:06:57,720 --> 00:07:01,830 So if you want-- for example, if you are hovering over something, 137 00:07:01,830 --> 00:07:04,300 if you guys ever have seen like Menu bars, 138 00:07:04,300 --> 00:07:07,360 or when you hover over some topic, a Drop-down menu appears, 139 00:07:07,360 --> 00:07:08,670 that's because of JavaScript. 140 00:07:08,670 --> 00:07:09,170 OK? 141 00:07:09,170 --> 00:07:12,670 So you're not reloading the entire page to get this menu to show up, 142 00:07:12,670 --> 00:07:17,240 you're just looking for some specific action that the user has taken, 143 00:07:17,240 --> 00:07:21,800 which are called events that we'll get into, and once you see that, you say, 144 00:07:21,800 --> 00:07:25,960 "OK, edit something on this page and make it look different, 145 00:07:25,960 --> 00:07:28,270 but only edit these specific things. 146 00:07:28,270 --> 00:07:29,690 Don't reload the whole thing." 147 00:07:29,690 --> 00:07:33,110 So it actually is much nicer, and you don't have to reload your pages, 148 00:07:33,110 --> 00:07:34,510 and it's really cool. 149 00:07:34,510 --> 00:07:38,270 >> So variable declarations, so you can kind of see, 150 00:07:38,270 --> 00:07:40,530 I put on top here, loosely typed. 151 00:07:40,530 --> 00:07:42,570 So this is very much like PHP. 152 00:07:42,570 --> 00:07:48,770 We don't need to tell JavaScript what type we're 153 00:07:48,770 --> 00:07:50,740 expecting each of these variables to be. 154 00:07:50,740 --> 00:07:52,560 They can be whatever types we want. 155 00:07:52,560 --> 00:07:57,480 So you notice in this case, we declare them very simply, just with "var" 156 00:07:57,480 --> 00:08:00,990 and then whatever we want our variable name to be. 157 00:08:00,990 --> 00:08:05,680 One thing to note is that when you put var in front of a variable name, 158 00:08:05,680 --> 00:08:07,520 it locally scopes it. 159 00:08:07,520 --> 00:08:09,320 OK? 160 00:08:09,320 --> 00:08:14,025 It's totally reasonable for you to completely just erase the var 161 00:08:14,025 --> 00:08:18,970 and just have s equals CS50, and that would just be a global variable. 162 00:08:18,970 --> 00:08:19,580 OK? 163 00:08:19,580 --> 00:08:22,490 So you can initialize it both ways, just depends on how you want it. 164 00:08:22,490 --> 00:08:24,448 So if you're initializing it within a function, 165 00:08:24,448 --> 00:08:28,070 and you want that variable to stay scoped within that function, 166 00:08:28,070 --> 00:08:31,620 you're going to want to do something like var name a variable, 167 00:08:31,620 --> 00:08:34,270 versus if you want it globally scoped, you 168 00:08:34,270 --> 00:08:36,240 can just do the name of the variable and then 169 00:08:36,240 --> 00:08:38,270 whatever you'd like it set equal to. 170 00:08:38,270 --> 00:08:40,230 OK? 171 00:08:40,230 --> 00:08:45,580 >> This is kind of cool thing down here, because if we notice our variable 172 00:08:45,580 --> 00:08:47,590 b starts out as true. 173 00:08:47,590 --> 00:08:51,280 And what this does-- can anyone tell me what this does? 174 00:08:51,280 --> 00:08:54,190 175 00:08:54,190 --> 00:08:55,890 So we have some alert. 176 00:08:55,890 --> 00:09:00,156 What would type of b be in the beginning? 177 00:09:00,156 --> 00:09:00,905 AUDIENCE: Boolean. 178 00:09:00,905 --> 00:09:01,330 ALLISON BUCHHOLTZ-AU: Boolean. 179 00:09:01,330 --> 00:09:01,940 Right. 180 00:09:01,940 --> 00:09:07,260 And then we reassign b to this string, right? 181 00:09:07,260 --> 00:09:11,170 So then here, what type of b be? 182 00:09:11,170 --> 00:09:12,480 It'd be a string, right? 183 00:09:12,480 --> 00:09:14,900 So what's important to notice is that in c, we 184 00:09:14,900 --> 00:09:17,330 could almost never do something like that. 185 00:09:17,330 --> 00:09:22,000 We'd have to have a variable, cast it as something else, 186 00:09:22,000 --> 00:09:27,185 maybe do some function with a two i, go from a charge to an integer. 187 00:09:27,185 --> 00:09:31,063 But if we notice here, b very easily changes type. 188 00:09:31,063 --> 00:09:33,760 >> AUDIENCE: Wait, so you can just be like, "make b an integer?" 189 00:09:33,760 --> 00:09:34,360 >> ALLISON BUCHHOLTZ-AU: Yeah. 190 00:09:34,360 --> 00:09:36,185 You can just reassign b to an integer. 191 00:09:36,185 --> 00:09:36,910 >> AUDIENCE: Really? 192 00:09:36,910 --> 00:09:38,035 >> ALLISON BUCHHOLTZ-AU: Yeah. 193 00:09:38,035 --> 00:09:39,810 And then it would be an int. 194 00:09:39,810 --> 00:09:43,820 So your variables can change over the course of the program too. 195 00:09:43,820 --> 00:09:46,410 They are not strictly typed. 196 00:09:46,410 --> 00:09:49,180 It is very loosely typed. 197 00:09:49,180 --> 00:09:50,820 OK? 198 00:09:50,820 --> 00:09:54,820 Basically your variables can do whatever they want, as we kind of saw with PHP. 199 00:09:54,820 --> 00:09:59,430 They can do some crazy things, so it's important to be pretty careful. 200 00:09:59,430 --> 00:10:01,200 Name your variables well. 201 00:10:01,200 --> 00:10:03,450 If you don't, all of a sudden you're going to be like, 202 00:10:03,450 --> 00:10:05,783 "wait, I thought this was a string, and now it's an int, 203 00:10:05,783 --> 00:10:08,170 and I'm not really sure what's going on here." 204 00:10:08,170 --> 00:10:12,410 So this is just a simple example of showing how a variable can easily 205 00:10:12,410 --> 00:10:15,890 change its type over the course of a program. 206 00:10:15,890 --> 00:10:16,870 >> OK. 207 00:10:16,870 --> 00:10:19,200 So this should look super, super familiar. 208 00:10:19,200 --> 00:10:21,510 So these are our loops in JavaScript. 209 00:10:21,510 --> 00:10:27,780 They are exactly the same, except for instead of four int i equals zero, 210 00:10:27,780 --> 00:10:30,470 we could just say var i equals zero. 211 00:10:30,470 --> 00:10:34,100 And then we could have our same sort of condition, same sort of update, 212 00:10:34,100 --> 00:10:36,090 i plus plus works just fine. 213 00:10:36,090 --> 00:10:39,800 So fours are the same, whiles are the same, 214 00:10:39,800 --> 00:10:41,440 and do whiles are exactly the same. 215 00:10:41,440 --> 00:10:44,070 Same sort of general format. 216 00:10:44,070 --> 00:10:48,840 We notice, four, parentheses, brackets, it's all the same. 217 00:10:48,840 --> 00:10:51,470 Also there will be semicolons when we get to example code. 218 00:10:51,470 --> 00:10:55,250 You'll see it's pretty much the same as c. 219 00:10:55,250 --> 00:10:59,770 >> For function declarations, again, very similar. 220 00:10:59,770 --> 00:11:05,100 We have some function that just says that it's a function, and then 221 00:11:05,100 --> 00:11:07,660 the name of our function, and the inputs. 222 00:11:07,660 --> 00:11:11,590 And again if we notice, we have no types here whatsoever. 223 00:11:11,590 --> 00:11:12,090 Right? 224 00:11:12,090 --> 00:11:18,150 We have nothing saying that these need to be ints or doubles, or floats. 225 00:11:18,150 --> 00:11:19,530 They could be whatever they want. 226 00:11:19,530 --> 00:11:23,560 What is important is noticing that we need to write function beforehand 227 00:11:23,560 --> 00:11:26,430 to let JavaScript know that this is actually a function. 228 00:11:26,430 --> 00:11:29,820 >> So this is just some simple sum function that returns x or y, 229 00:11:29,820 --> 00:11:33,800 and then what's also cool is that you can actually 230 00:11:33,800 --> 00:11:35,950 assign a function to a variable. 231 00:11:35,950 --> 00:11:41,770 So in this case, sum is now the function that actually does sum. 232 00:11:41,770 --> 00:11:47,740 So if you notice here, we have function, name of function, inputs. 233 00:11:47,740 --> 00:11:48,860 Right? 234 00:11:48,860 --> 00:11:52,120 Here we just have function and inputs. 235 00:11:52,120 --> 00:11:54,310 So this is called an anonymous function. 236 00:11:54,310 --> 00:11:59,265 And this is something that should be new to most of you guys, if not all of you. 237 00:11:59,265 --> 00:12:01,140 So basically what that means is that we don't 238 00:12:01,140 --> 00:12:03,050 need to name of our function in this case. 239 00:12:03,050 --> 00:12:06,260 We can just say, "OK, I'm going to have this function that executes, here 240 00:12:06,260 --> 00:12:08,550 are its inputs, and here's what it's going to do." 241 00:12:08,550 --> 00:12:12,540 And especially when you're assigning a function to some variable 242 00:12:12,540 --> 00:12:14,950 that you're going to manipulate, you don't necessarily 243 00:12:14,950 --> 00:12:17,116 need to name it because you're going to be referring 244 00:12:17,116 --> 00:12:20,990 to it by this variable name, not by whatever 245 00:12:20,990 --> 00:12:22,840 the function was actually called. 246 00:12:22,840 --> 00:12:23,550 OK? 247 00:12:23,550 --> 00:12:27,810 >> So if we see here, we have some variable sum now 248 00:12:27,810 --> 00:12:30,920 that is equal to the sum of three and five. 249 00:12:30,920 --> 00:12:33,070 And we would get this. 250 00:12:33,070 --> 00:12:36,750 And this would just have some alert, three plus five equals the number. 251 00:12:36,750 --> 00:12:43,950 This plus will just concatenate whatever our answer was onto the string. 252 00:12:43,950 --> 00:12:47,420 Also cool, plus can concatenate strings. 253 00:12:47,420 --> 00:12:53,510 >> For JavaScript, as with PHP, HTML, and CSS as we said, 254 00:12:53,510 --> 00:12:56,450 a lot of it we're kind of taking the training wheels off here 255 00:12:56,450 --> 00:13:02,030 and you guys have a lot of the know how to really understand these things. 256 00:13:02,030 --> 00:13:04,280 They're slightly different, but they're not so foreign 257 00:13:04,280 --> 00:13:09,460 and that you can't Google things or look them up online with w3 schools. 258 00:13:09,460 --> 00:13:12,755 And we're really expecting you guys to, kind of, experiment 259 00:13:12,755 --> 00:13:14,400 and learn on your own. 260 00:13:14,400 --> 00:13:19,490 So, I know this might seem a little less thorough than some of the c things 261 00:13:19,490 --> 00:13:21,936 we do, but that's actually for a reason. 262 00:13:21,936 --> 00:13:25,060 263 00:13:25,060 --> 00:13:28,470 But hopefully it's not too different, and it's not overwhelming. 264 00:13:28,470 --> 00:13:31,940 >> So arrays in JavaScript, again very, very similar. 265 00:13:31,940 --> 00:13:32,460 Right? 266 00:13:32,460 --> 00:13:36,520 We have some variable array that's equal to empty brackets, 267 00:13:36,520 --> 00:13:40,340 and that's just an empty array. 268 00:13:40,340 --> 00:13:43,420 This is often called literal array notation. 269 00:13:43,420 --> 00:13:45,280 That's just one thing we call it. 270 00:13:45,280 --> 00:13:51,380 If we see array two here, we have some literal array that has three elements, 271 00:13:51,380 --> 00:13:51,910 right? 272 00:13:51,910 --> 00:13:54,640 And then we have some var third element that's 273 00:13:54,640 --> 00:13:58,060 some variable that's just going to hold this string, JS. 274 00:13:58,060 --> 00:14:01,760 275 00:14:01,760 --> 00:14:06,170 >> The elements, good to notice, are separated by commas, 276 00:14:06,170 --> 00:14:07,740 just like we would expect. 277 00:14:07,740 --> 00:14:14,630 And you can also access these, as we did in C, with this index notation, right? 278 00:14:14,630 --> 00:14:16,950 So different from PHP now, we're going back 279 00:14:16,950 --> 00:14:20,180 to just kind of referring to things by index. 280 00:14:20,180 --> 00:14:22,189 Just like C, it's also zero index. 281 00:14:22,189 --> 00:14:25,230 I feel like it would be really cruel if they suddenly made JavaScript one 282 00:14:25,230 --> 00:14:30,630 index, and you had to completely rethink how you think about arrays. 283 00:14:30,630 --> 00:14:36,140 >> One cool thing is that instead of having to do-- if you ever 284 00:14:36,140 --> 00:14:39,240 wanted the length of an array, maybe you iterate through it 285 00:14:39,240 --> 00:14:43,430 until you find some end, or you would just know what it is. 286 00:14:43,430 --> 00:14:49,310 Because JavaScript is very loose in more ways than just type, as we see here, 287 00:14:49,310 --> 00:14:53,310 we can just make this array bigger because we decide to. 288 00:14:53,310 --> 00:14:56,177 If we notice array three has three things to start, 289 00:14:56,177 --> 00:14:58,510 but then all of a sudden, we're like, "oh, just kidding. 290 00:14:58,510 --> 00:15:01,370 We're actually going to make it 101 things." 291 00:15:01,370 --> 00:15:05,300 So if you ever want to know the actual length of your array, 292 00:15:05,300 --> 00:15:06,680 you do it like this. 293 00:15:06,680 --> 00:15:10,470 And we're going to see a lot of this notation in examples, 294 00:15:10,470 --> 00:15:12,730 but with JavaScript it's typically whatever 295 00:15:12,730 --> 00:15:16,410 object that you're talking about dot whatever kind of function 296 00:15:16,410 --> 00:15:17,740 you want applied to it. 297 00:15:17,740 --> 00:15:18,240 OK? 298 00:15:18,240 --> 00:15:20,520 >> So in this case, our object is array two, 299 00:15:20,520 --> 00:15:23,470 and we say we want the length of array two. 300 00:15:23,470 --> 00:15:25,716 So this just calls like length on that. 301 00:15:25,716 --> 00:15:27,090 And that will return your length. 302 00:15:27,090 --> 00:15:32,610 303 00:15:32,610 --> 00:15:36,790 Also something to note is that if we notice our arrays, 304 00:15:36,790 --> 00:15:39,830 unlike C, they don't have to be all of the same type. 305 00:15:39,830 --> 00:15:41,670 This is much more like PHP. 306 00:15:41,670 --> 00:15:45,905 JavaScript is basically just like this interesting meld of C and PHP. 307 00:15:45,905 --> 00:15:50,020 308 00:15:50,020 --> 00:15:52,170 So we'll get into that. 309 00:15:52,170 --> 00:15:56,750 For now, let's just assume that your arrays are basically 310 00:15:56,750 --> 00:16:00,640 like C arrays, in that they are zero indexed. 311 00:16:00,640 --> 00:16:04,120 OK, so that is everything. 312 00:16:04,120 --> 00:16:08,850 You can also just extend an array to whatever index you want. 313 00:16:08,850 --> 00:16:14,260 Whereas this would probably seg fault on you or give you some error, 314 00:16:14,260 --> 00:16:15,970 JavaScript is like, "nah, it's fine. 315 00:16:15,970 --> 00:16:16,620 I got this. 316 00:16:16,620 --> 00:16:19,460 We'll just go straight where you want to." 317 00:16:19,460 --> 00:16:24,310 >> OK, so objects are very important. 318 00:16:24,310 --> 00:16:29,720 You guys will be using a lot of these in your P set, if I remember correctly. 319 00:16:29,720 --> 00:16:34,780 So the thing that these are similar to in C are structs. 320 00:16:34,780 --> 00:16:39,290 So you can think about-- when we go to an example right 321 00:16:39,290 --> 00:16:41,810 after this I think it'll make a lot more sense-- 322 00:16:41,810 --> 00:16:45,830 but we basically use objects to organize of course related information. 323 00:16:45,830 --> 00:16:47,780 When we talked about structs in C, we often 324 00:16:47,780 --> 00:16:53,405 talk about a student who had some name, ID, house, you know, concentration. 325 00:16:53,405 --> 00:16:56,030 And that's kind of the same thing that we use objects for here. 326 00:16:56,030 --> 00:16:59,300 It's just to organize similar information. 327 00:16:59,300 --> 00:17:03,620 >> You can also think of these as more similar to associative arrays in PHP. 328 00:17:03,620 --> 00:17:10,010 So this would be kind of the thing where we have some key with some value, 329 00:17:10,010 --> 00:17:12,859 very similar to PHP. 330 00:17:12,859 --> 00:17:15,780 So you can initialize some empty object, as we see up here, 331 00:17:15,780 --> 00:17:17,390 just with curly braces. 332 00:17:17,390 --> 00:17:19,160 So arrays are square brackets. 333 00:17:19,160 --> 00:17:21,220 Empty objects are curly braces. 334 00:17:21,220 --> 00:17:24,020 Good distinction to have. 335 00:17:24,020 --> 00:17:27,319 And these are just two different ways to set properties. 336 00:17:27,319 --> 00:17:31,460 So this is kind of much more of a way that 337 00:17:31,460 --> 00:17:35,220 is similar to PHP, with our associative arrays, with our key, 338 00:17:35,220 --> 00:17:39,910 and our value, whereas this one is-- you'll 339 00:17:39,910 --> 00:17:41,920 see this a lot more in JavaScript. 340 00:17:41,920 --> 00:17:43,550 This tends to be the convention. 341 00:17:43,550 --> 00:17:47,660 And in the same way that we did array two dot length, this is saying, 342 00:17:47,660 --> 00:17:51,580 "OK, give me this attribute of this object." 343 00:17:51,580 --> 00:17:52,110 Right? 344 00:17:52,110 --> 00:17:55,660 So the same way it was like, "give me the attribute length of array two," 345 00:17:55,660 --> 00:17:59,970 this is saying, "give me some property of our empty object." 346 00:17:59,970 --> 00:18:02,890 Or in this case, we are assigning it to some value here. 347 00:18:02,890 --> 00:18:06,200 But you could also access it that way. 348 00:18:06,200 --> 00:18:09,090 >> And then here this is just showing two different alerts. 349 00:18:09,090 --> 00:18:12,320 So this would show the alerts would be the exact same, 350 00:18:12,320 --> 00:18:17,150 it's just two different ways of accessing the element that we want. 351 00:18:17,150 --> 00:18:19,552 Does that make sense to everyone? 352 00:18:19,552 --> 00:18:21,510 I feel like this one probably makes more sense, 353 00:18:21,510 --> 00:18:23,270 just because we're coming off of PHP. 354 00:18:23,270 --> 00:18:26,400 But as we do more examples, this is literally exactly the same. 355 00:18:26,400 --> 00:18:28,170 A lot of it is just change in syntax. 356 00:18:28,170 --> 00:18:30,710 357 00:18:30,710 --> 00:18:33,030 >> OK, so examples. 358 00:18:33,030 --> 00:18:34,180 I love examples. 359 00:18:34,180 --> 00:18:40,070 So here is some CS50 variable that is an object, 360 00:18:40,070 --> 00:18:42,160 and we store all this information about it. 361 00:18:42,160 --> 00:18:46,680 So we have course, instructor, tfs, psets, and taped. 362 00:18:46,680 --> 00:18:51,840 So we notice these are almost all of different types. 363 00:18:51,840 --> 00:18:52,340 Right? 364 00:18:52,340 --> 00:18:56,230 So objects can store attributes of different types. 365 00:18:56,230 --> 00:19:01,220 We can think of this-- it's very similar to our associative array in PHP. 366 00:19:01,220 --> 00:19:07,470 So key, value, key, value, key, value, so on and so forth. 367 00:19:07,470 --> 00:19:11,230 What's also interesting in the same way that we can have arrays within arrays, 368 00:19:11,230 --> 00:19:14,690 we can also have objects within objects, or arrays within objects. 369 00:19:14,690 --> 00:19:18,410 You're never really limited to just a single one of things. 370 00:19:18,410 --> 00:19:24,220 We can get very Inceptionesque, just keep going down the rabbit hole there. 371 00:19:24,220 --> 00:19:26,080 >> So if we notice, we have some course that 372 00:19:26,080 --> 00:19:31,120 is a string, instructor that's a string, and array, an int, and a Boolean. 373 00:19:31,120 --> 00:19:36,110 So all of these different things. 374 00:19:36,110 --> 00:19:39,600 >> All right, so, we have another one. 375 00:19:39,600 --> 00:19:42,930 So in this case, we have an array of objects. 376 00:19:42,930 --> 00:19:45,320 So just like an object can have an array in it. 377 00:19:45,320 --> 00:19:47,210 We can also have an array of objects. 378 00:19:47,210 --> 00:19:51,250 This might be useful to think about similar to kind 379 00:19:51,250 --> 00:19:54,260 of how we had a hash table, we had an array 380 00:19:54,260 --> 00:19:56,220 of all these different types of structs that 381 00:19:56,220 --> 00:19:59,070 were pointers to different nodes and whatnot. 382 00:19:59,070 --> 00:20:01,420 But in this case, we have an array of objects. 383 00:20:01,420 --> 00:20:04,890 So this is like an array of associative arrays. 384 00:20:04,890 --> 00:20:09,430 So we have some first element would be the object with the name James 385 00:20:09,430 --> 00:20:11,340 and house Winthrop. 386 00:20:11,340 --> 00:20:14,780 >> You guys might remember something very similar to this 387 00:20:14,780 --> 00:20:21,710 with your last pset, where if you pulled something from your database, 388 00:20:21,710 --> 00:20:24,480 the first sort of thing in your array was 389 00:20:24,480 --> 00:20:27,110 all of the information about the first user that met it, 390 00:20:27,110 --> 00:20:30,765 and then you had to index into that to get their stock or their cache 391 00:20:30,765 --> 00:20:32,110 or whatnot. 392 00:20:32,110 --> 00:20:34,620 So this is very much the same thing, just a little change 393 00:20:34,620 --> 00:20:39,570 in syntax, little bit change in the words we use to describe them. 394 00:20:39,570 --> 00:20:45,960 >> So if we wanted, can anyone tell me what this alert would do here? 395 00:20:45,960 --> 00:20:48,780 Or what this bit of code would do for us? 396 00:20:48,780 --> 00:20:50,992 397 00:20:50,992 --> 00:20:52,616 AUDIENCE: It'll give you all the names. 398 00:20:52,616 --> 00:20:54,900 ALLISON BUCHHOLTZ-AU: Right, so it would just alert with all the names 399 00:20:54,900 --> 00:20:57,960 because it would go through cottage i, so it'd start at zero. 400 00:20:57,960 --> 00:21:01,330 So it'd say, OK we're looking at this first object, which 401 00:21:01,330 --> 00:21:03,210 is the first slot in our array. 402 00:21:03,210 --> 00:21:06,900 And it says, "give me the attribute, the name of that object." 403 00:21:06,900 --> 00:21:09,030 So we go here, we'd scan, we'd find name, 404 00:21:09,030 --> 00:21:11,340 and we'd print out James, Molly, and Carl. 405 00:21:11,340 --> 00:21:14,410 406 00:21:14,410 --> 00:21:15,799 Any questions so far? 407 00:21:15,799 --> 00:21:17,590 JavaScript unfortunately you're going to be 408 00:21:17,590 --> 00:21:20,950 doing a lot of looking up on your own, figuring out the syntax, 409 00:21:20,950 --> 00:21:21,910 grappling with it. 410 00:21:21,910 --> 00:21:25,870 But of course I'm always here, office hours are always here. 411 00:21:25,870 --> 00:21:28,260 I might be on Tuesdays this week. 412 00:21:28,260 --> 00:21:31,050 So if you're there, you can come visit me this week. 413 00:21:31,050 --> 00:21:32,470 It'd be great. 414 00:21:32,470 --> 00:21:36,260 >> OK, so DOM is Document-Object Model. 415 00:21:36,260 --> 00:21:38,900 So this is just a way that we like to think 416 00:21:38,900 --> 00:21:45,720 about how our HTML and everything within it is organized. 417 00:21:45,720 --> 00:21:49,930 This is very much something that will probably come up on your quiz. 418 00:21:49,930 --> 00:21:58,150 I know my year, it was like here's HTML file, fill in the DOM for it. 419 00:21:58,150 --> 00:21:59,770 And you just fill in little things. 420 00:21:59,770 --> 00:22:01,500 These should be easy points hopefully. 421 00:22:01,500 --> 00:22:03,450 Hopefully you'll see-- 422 00:22:03,450 --> 00:22:04,590 >> AUDIENCE: [INAUDIBLE] 423 00:22:04,590 --> 00:22:06,660 >> ALLISON BUCHHOLTZ-AU: So you see this tree here? 424 00:22:06,660 --> 00:22:07,200 >> AUDIENCE: Yeah. 425 00:22:07,200 --> 00:22:08,949 >> ALLISON BUCHHOLTZ-AU: So they will ask use 426 00:22:08,949 --> 00:22:11,750 to fill in what goes under the body. 427 00:22:11,750 --> 00:22:15,770 Maybe under the body, we have some divs or we have some paragraphs, 428 00:22:15,770 --> 00:22:19,160 and we'll ask you to fill in a tree very much like this. 429 00:22:19,160 --> 00:22:21,440 So we'll be walking through it. 430 00:22:21,440 --> 00:22:26,120 So the Document-Object Model is just a way 431 00:22:26,120 --> 00:22:31,240 to structure and think about our HTML graphically. 432 00:22:31,240 --> 00:22:33,860 433 00:22:33,860 --> 00:22:35,840 And also when we get into more JavaScript, 434 00:22:35,840 --> 00:22:37,640 it's going to be the way that we actually 435 00:22:37,640 --> 00:22:39,990 manipulate different elements on the page. 436 00:22:39,990 --> 00:22:43,980 We need a way to access each of the things in our HTML, 437 00:22:43,980 --> 00:22:48,050 and so this gives us a very concrete standardized way 438 00:22:48,050 --> 00:22:51,010 across various web pages to do that. 439 00:22:51,010 --> 00:22:53,440 >> So if we just walk through this here, of course 440 00:22:53,440 --> 00:22:56,790 our document is like our entire file. 441 00:22:56,790 --> 00:22:59,350 That obviously makes sense that it's the highest thing, 442 00:22:59,350 --> 00:23:03,520 and then we have our actual HTML, which corresponds to this tag here. 443 00:23:03,520 --> 00:23:08,480 Also if you in indent your tags properly, then creating this DOM tree 444 00:23:08,480 --> 00:23:10,530 becomes super simple. 445 00:23:10,530 --> 00:23:12,400 So we have some head here. 446 00:23:12,400 --> 00:23:15,780 We have some body that we see stem off of HTML, 447 00:23:15,780 --> 00:23:18,530 which is why we have head and body. 448 00:23:18,530 --> 00:23:22,880 Within head, we have some title tag, an end title tag, 449 00:23:22,880 --> 00:23:24,570 so we know that comes after head. 450 00:23:24,570 --> 00:23:28,040 And within our title tag, we have hello, world. 451 00:23:28,040 --> 00:23:28,740 OK? 452 00:23:28,740 --> 00:23:31,311 So that's this whole left hand branch. 453 00:23:31,311 --> 00:23:34,060 And then for the right hand branch here, we see that we have HTML, 454 00:23:34,060 --> 00:23:38,680 OK we've done this head part, we're looking just at body, 455 00:23:38,680 --> 00:23:40,670 so we have some body area. 456 00:23:40,670 --> 00:23:44,350 And within that, the only thing we have is hello, world. 457 00:23:44,350 --> 00:23:45,090 OK? 458 00:23:45,090 --> 00:23:54,130 If we had things like some bracket p and then 459 00:23:54,130 --> 00:23:57,500 hello, world, and then another bracket p of goodbye, world, 460 00:23:57,500 --> 00:24:00,080 we would have two bubbles coming off of here. 461 00:24:00,080 --> 00:24:05,550 Because they're both under body, but they're separate paragraphs this case. 462 00:24:05,550 --> 00:24:11,520 There is definitely practice on that in previous quizzes, 463 00:24:11,520 --> 00:24:14,570 as well as plenty online on it. 464 00:24:14,570 --> 00:24:18,260 OK so, this just lets us see everything nicely 465 00:24:18,260 --> 00:24:20,810 and manipulate things very systematically. 466 00:24:20,810 --> 00:24:21,340 OK? 467 00:24:21,340 --> 00:24:23,640 We know exactly how to traverse through this tree, 468 00:24:23,640 --> 00:24:26,910 so we know what we want to access. 469 00:24:26,910 --> 00:24:31,690 >> OK so this is why we want to have this sort of model, 470 00:24:31,690 --> 00:24:35,190 so that we can use things like this, and we understand what they mean, 471 00:24:35,190 --> 00:24:38,370 and they're standardized across all things that we do. 472 00:24:38,370 --> 00:24:45,900 So document dot title is just the title of our-- all of these 473 00:24:45,900 --> 00:24:48,960 are pretty self explanatory, I like to think. 474 00:24:48,960 --> 00:24:51,660 So the first three examples are just saying, 475 00:24:51,660 --> 00:24:54,770 "OK, just give me the title of this web page." 476 00:24:54,770 --> 00:24:58,030 So it will give you what corresponds to the title. 477 00:24:58,030 --> 00:25:01,880 >> Document dot body is going to give you whatever is within those body tags. 478 00:25:01,880 --> 00:25:03,240 So you can manipulate that. 479 00:25:03,240 --> 00:25:07,820 And document dot body dot enter HTML is a very cool one, 480 00:25:07,820 --> 00:25:11,660 and maybe is not like super intuitive, but the inner HTML 481 00:25:11,660 --> 00:25:13,740 corresponds to this right here. 482 00:25:13,740 --> 00:25:17,410 So if you ever want to manipulate the text on a page, 483 00:25:17,410 --> 00:25:22,700 typically you're going to be doing something with body dot inner HTML. 484 00:25:22,700 --> 00:25:23,820 OK? 485 00:25:23,820 --> 00:25:31,341 So inner HTML tends to refer to what is actually between these tags. 486 00:25:31,341 --> 00:25:31,840 OK? 487 00:25:31,840 --> 00:25:33,020 And then useful functions. 488 00:25:33,020 --> 00:25:40,390 So if you wanted to get any of these, any element, 489 00:25:40,390 --> 00:25:43,140 we have some Id, class name, or tag name. 490 00:25:43,140 --> 00:25:47,100 This is very similar to things we did with CSS, right? 491 00:25:47,100 --> 00:25:51,360 Where we have some selectors that correspond to either a tag, a class 492 00:25:51,360 --> 00:25:53,800 that we give them, or an Id. 493 00:25:53,800 --> 00:25:55,310 This is very much the same way. 494 00:25:55,310 --> 00:26:00,720 If you have something that has some class of dog, 495 00:26:00,720 --> 00:26:05,800 and you say get elements by tag name, and you put dog in there-- or sorry, 496 00:26:05,800 --> 00:26:06,610 class name. 497 00:26:06,610 --> 00:26:07,770 You can put dot in there. 498 00:26:07,770 --> 00:26:11,780 It's going to return all of those elements to you that have that class. 499 00:26:11,780 --> 00:26:13,880 So you can manipulate just those. 500 00:26:13,880 --> 00:26:18,430 In the same way, maybe you just want to manipulate some header, so 501 00:26:18,430 --> 00:26:20,980 some h1 header, like we did. 502 00:26:20,980 --> 00:26:24,900 You could do get elements by tag name, because h1 is a tag name. 503 00:26:24,900 --> 00:26:29,270 And in the same way, if you want to get some unique thing, you can do get tag. 504 00:26:29,270 --> 00:26:31,100 Get element by Id. 505 00:26:31,100 --> 00:26:32,710 And they are actually lots of these. 506 00:26:32,710 --> 00:26:36,300 These are only like three of very many. 507 00:26:36,300 --> 00:26:39,600 So if you go online, as I'm going to encourage 508 00:26:39,600 --> 00:26:45,342 you to do, and do some research on your own, 509 00:26:45,342 --> 00:26:48,450 I definitely recommend looking into all of those. 510 00:26:48,450 --> 00:26:50,880 They could be super useful, especially when 511 00:26:50,880 --> 00:26:57,180 you want to just kind of manipulate very specific things without having 512 00:26:57,180 --> 00:27:00,390 to go through and try to parse out everything. 513 00:27:00,390 --> 00:27:03,540 >> OK, so the last thing is JavaScript events. 514 00:27:03,540 --> 00:27:10,730 So when I was talking earlier about going onto a website, 515 00:27:10,730 --> 00:27:14,340 and when you hover over something, or your mouse hovers over something, 516 00:27:14,340 --> 00:27:15,420 something else happens. 517 00:27:15,420 --> 00:27:17,900 This is what we'd like to think about as an event. 518 00:27:17,900 --> 00:27:23,970 So what we have that might be useful here is onclick. 519 00:27:23,970 --> 00:27:29,140 So mine was on hover, which, I'm pretty sure, is just on hover. 520 00:27:29,140 --> 00:27:31,300 Also a ton of these that you can look for. 521 00:27:31,300 --> 00:27:34,340 There's a whole list online of the different things 522 00:27:34,340 --> 00:27:37,130 that you can listen for. 523 00:27:37,130 --> 00:27:41,220 >> But JavaScript events are basically just responding to things 524 00:27:41,220 --> 00:27:42,430 that your user is doing. 525 00:27:42,430 --> 00:27:42,930 Right? 526 00:27:42,930 --> 00:27:45,220 So your user does something, that's an event, 527 00:27:45,220 --> 00:27:48,340 and JavaScript will respond however you'd like it to. 528 00:27:48,340 --> 00:27:49,770 It will respond accordingly. 529 00:27:49,770 --> 00:27:54,630 So in this case, we have some window dot onload. 530 00:27:54,630 --> 00:27:57,170 So what this says is, "wait until the window's loaded." 531 00:27:57,170 --> 00:27:57,780 OK? 532 00:27:57,780 --> 00:28:02,102 So when everything's loaded, onload, then you can execute this function. 533 00:28:02,102 --> 00:28:03,810 So when everything's loaded, you're going 534 00:28:03,810 --> 00:28:07,760 to have some search button that gets an element by Id, 535 00:28:07,760 --> 00:28:13,740 and it prints whatever that element is as the Search button. 536 00:28:13,740 --> 00:28:17,050 And then we have this variable, we say, "OK, onclick." 537 00:28:17,050 --> 00:28:20,390 So when we hear a click on the Search button, 538 00:28:20,390 --> 00:28:23,990 execute this function, which is an alert, you clicked the Search button. 539 00:28:23,990 --> 00:28:28,910 >> So what happens is-- this is a nice little graphic representation here. 540 00:28:28,910 --> 00:28:31,480 So our document loads, that's our onload, 541 00:28:31,480 --> 00:28:34,340 we find our Search button, which is this. 542 00:28:34,340 --> 00:28:36,570 We're looking for our Search button. 543 00:28:36,570 --> 00:28:40,790 And then when the Search button is clicked, it corresponds to right here. 544 00:28:40,790 --> 00:28:41,980 Onclick. 545 00:28:41,980 --> 00:28:47,300 Then we finally alert our user, which is this last line here. 546 00:28:47,300 --> 00:28:48,250 OK? 547 00:28:48,250 --> 00:28:52,960 So each of those four steps just corresponds to the four boxes 548 00:28:52,960 --> 00:28:55,031 down there on the bottom. 549 00:28:55,031 --> 00:28:56,405 Does that make sense to everyone? 550 00:28:56,405 --> 00:29:01,120 551 00:29:01,120 --> 00:29:05,200 >> And then one thing that I'm just going to mention very, very briefly, that I 552 00:29:05,200 --> 00:29:08,660 encourage you guys to go look more into is 553 00:29:08,660 --> 00:29:13,210 jQuery, which is just a library that is built on top of JavaScript. 554 00:29:13,210 --> 00:29:16,480 It is super useful, as with most libraries. 555 00:29:16,480 --> 00:29:18,320 There are lots of functions. 556 00:29:18,320 --> 00:29:21,930 So if there's ever something that you want to do in JavaScript, 557 00:29:21,930 --> 00:29:24,880 your first instinct shouldn't be to think 558 00:29:24,880 --> 00:29:27,340 of, "what function should I code?" it should be, 559 00:29:27,340 --> 00:29:29,560 "let me see someone's already done this for me." 560 00:29:29,560 --> 00:29:32,800 Because nine times out of ten, someone will have done it already, 561 00:29:32,800 --> 00:29:35,760 and they probably have done it better. 562 00:29:35,760 --> 00:29:39,990 People spend a lot of time doing these, and JavaScript is very widely used, 563 00:29:39,990 --> 00:29:42,810 so people are constantly trying to make it better. 564 00:29:42,810 --> 00:29:47,110 And jQuery has a lot of functions that will probably be useful to you 565 00:29:47,110 --> 00:29:50,470 in your final project if you're doing anything with web design. 566 00:29:50,470 --> 00:29:53,480 As I like to say, "work smarter, not harder." 567 00:29:53,480 --> 00:29:57,130 If you guys do that, it'll be great. 568 00:29:57,130 --> 00:30:00,330 When we're at the hackathon I don't want you to be all stressed out. 569 00:30:00,330 --> 00:30:03,600 I want you to be like, "I got this. jQuery's got my back. 570 00:30:03,600 --> 00:30:05,790 I don't need to write these functions." 571 00:30:05,790 --> 00:30:07,636 >> So just two things to remember, I'm going 572 00:30:07,636 --> 00:30:10,220 to let you guys look more into jQuery on your own. 573 00:30:10,220 --> 00:30:13,070 All I'm going to say is it does some pretty awesome things 574 00:30:13,070 --> 00:30:15,220 and can make your life a whole lot easier. 575 00:30:15,220 --> 00:30:17,150 But what you want to have is whatever file 576 00:30:17,150 --> 00:30:21,020 that you're going to be using it in, you're going to want these two lines. 577 00:30:21,020 --> 00:30:25,630 You're going to want the script of js jQuery dot js. 578 00:30:25,630 --> 00:30:28,500 And actually your source is going to be some URL. 579 00:30:28,500 --> 00:30:35,870 If you Google jQuery, Google actually hosts all the files for you. 580 00:30:35,870 --> 00:30:38,950 So you definitely want to input that URL instead. 581 00:30:38,950 --> 00:30:41,130 I just put this here for simplicity's sake. 582 00:30:41,130 --> 00:30:45,180 All this means is where to find your jQuery library. 583 00:30:45,180 --> 00:30:48,600 It's massive, so you don't want to host it on your own computer 584 00:30:48,600 --> 00:30:53,390 if you can avoid it, which is why we tend to just put in Google's URL that 585 00:30:53,390 --> 00:30:55,880 hosts all of these files for you. 586 00:30:55,880 --> 00:30:56,380 OK? 587 00:30:56,380 --> 00:30:58,850 You Google it, I promise it will be there. 588 00:30:58,850 --> 00:31:01,200 >> And then whatever JavaScript file that you're 589 00:31:01,200 --> 00:31:07,150 using, so this is just some external JavaScript file that you're using. 590 00:31:07,150 --> 00:31:11,570 In the same way that we link to our CSS files, this is the same sort of thing. 591 00:31:11,570 --> 00:31:15,480 This just links to the file where your JavaScript is. 592 00:31:15,480 --> 00:31:18,970 And I have some examples with simple JavaScript. 593 00:31:18,970 --> 00:31:20,220 So we'll be going through it. 594 00:31:20,220 --> 00:31:27,230 And then in your index JavaScript, which is your JavaScript file here, 595 00:31:27,230 --> 00:31:30,900 this is kind of the wrapper that you have for jQuery. 596 00:31:30,900 --> 00:31:33,860 You're almost 99.9 percent of the time going 597 00:31:33,860 --> 00:31:36,800 to have this in your index.js file. 598 00:31:36,800 --> 00:31:40,010 Because what this says is, "don't execute anything 599 00:31:40,010 --> 00:31:43,480 until your document is actually ready," which is exactly what you want. 600 00:31:43,480 --> 00:31:46,600 Because if your document's not ready, and jQuery starts doing things, 601 00:31:46,600 --> 00:31:48,020 it's just a mess. 602 00:31:48,020 --> 00:31:50,480 So you always want to have this wrapper. 603 00:31:50,480 --> 00:31:55,760 And then for things that go in there, I shall leave to your guys' own perusing. 604 00:31:55,760 --> 00:32:04,610 >> OK, so are there any questions right now about JavaScript in general? 605 00:32:04,610 --> 00:32:07,420 Or the DOM model? 606 00:32:07,420 --> 00:32:10,780 If not, we have some cool examples that we can go through, 607 00:32:10,780 --> 00:32:13,120 that you guys can help me code. 608 00:32:13,120 --> 00:32:15,877 But I'm also going to be super nice, and if you 609 00:32:15,877 --> 00:32:17,960 don't want to say anything for these, that's fine. 610 00:32:17,960 --> 00:32:20,510 I can also just give you examples. 611 00:32:20,510 --> 00:32:24,581 But anything on the PowerPoint before we move on? 612 00:32:24,581 --> 00:32:25,080 Cool. 613 00:32:25,080 --> 00:32:26,990 >> I feel like you guys need to energy. 614 00:32:26,990 --> 00:32:31,516 So I think we're going to start with my party example first. 615 00:32:31,516 --> 00:32:33,390 We have three examples, you have your choice. 616 00:32:33,390 --> 00:32:37,720 So we have clock, where we're going to implement an actual clock that's 617 00:32:37,720 --> 00:32:41,430 going to update as time goes by. 618 00:32:41,430 --> 00:32:43,310 We have this great Twitter function. 619 00:32:43,310 --> 00:32:44,560 This-- you know what, hold on. 620 00:32:44,560 --> 00:32:47,220 We're going to make this go away. 621 00:32:47,220 --> 00:32:47,950 Bam. 622 00:32:47,950 --> 00:32:49,060 OK. 623 00:32:49,060 --> 00:32:56,132 >> We have this great Twitter function here, that-- I know, right? 624 00:32:56,132 --> 00:32:57,090 It's going to be great. 625 00:32:57,090 --> 00:32:58,350 Are you guys excited? 626 00:32:58,350 --> 00:33:01,170 That is going to count the number of characters that you have left, 627 00:33:01,170 --> 00:33:04,520 so if I type right now, obviously it still says 140, 628 00:33:04,520 --> 00:33:06,190 but we know that's not the case. 629 00:33:06,190 --> 00:33:08,570 And then with our last one here, click here to party. 630 00:33:08,570 --> 00:33:12,150 What's going to happen is when we click, the background's 631 00:33:12,150 --> 00:33:13,340 going to change colors. 632 00:33:13,340 --> 00:33:17,060 So you guys have your options of which one you want to do first. 633 00:33:17,060 --> 00:33:19,800 I promise I'll take it very easy on you. 634 00:33:19,800 --> 00:33:22,680 I feel like everyone's kind of just very low key today. 635 00:33:22,680 --> 00:33:25,540 So I'll walk you through how we will implement all of these. 636 00:33:25,540 --> 00:33:28,520 If you want to chime in, that's great, but I 637 00:33:28,520 --> 00:33:30,020 feel like everyone's a little tired. 638 00:33:30,020 --> 00:33:32,970 So I'll just walk you through these examples. 639 00:33:32,970 --> 00:33:35,015 Do we have something that we'd like to do first? 640 00:33:35,015 --> 00:33:38,140 641 00:33:38,140 --> 00:33:39,475 Anyone? 642 00:33:39,475 --> 00:33:41,350 No preference? 643 00:33:41,350 --> 00:33:41,867 OK. 644 00:33:41,867 --> 00:33:42,450 You know what? 645 00:33:42,450 --> 00:33:43,290 We're on party. 646 00:33:43,290 --> 00:33:48,380 I feel like you guys need a little-- so, we'll do the party one first. 647 00:33:48,380 --> 00:33:48,880 OK. 648 00:33:48,880 --> 00:33:51,470 649 00:33:51,470 --> 00:33:56,930 >> So what we have here-- that's not supposed to be there. 650 00:33:56,930 --> 00:33:57,910 Now it's good. 651 00:33:57,910 --> 00:33:59,810 OK. 652 00:33:59,810 --> 00:34:03,110 So what we have here is just a simple HTML page 653 00:34:03,110 --> 00:34:07,840 that you guys should all be super familiar with from your last two psets. 654 00:34:07,840 --> 00:34:10,212 we have our doc type here. 655 00:34:10,212 --> 00:34:10,920 Can everyone see? 656 00:34:10,920 --> 00:34:11,420 OK. 657 00:34:11,420 --> 00:34:12,560 Cool. 658 00:34:12,560 --> 00:34:13,900 We have our HTML obviously. 659 00:34:13,900 --> 00:34:18,360 We have some header that is linked to a style sheet that 660 00:34:18,360 --> 00:34:21,420 just made my font nice and big and bold. 661 00:34:21,420 --> 00:34:23,489 So don't worry about that. 662 00:34:23,489 --> 00:34:26,437 >> We have some body with an Id background, OK? 663 00:34:26,437 --> 00:34:28,520 Because we're going to be changing the background. 664 00:34:28,520 --> 00:34:31,964 So when we're changing the background of our body, 665 00:34:31,964 --> 00:34:35,965 we remember from two weeks ago when we are dealing with web pages. 666 00:34:35,965 --> 00:34:36,840 So good to have that. 667 00:34:36,840 --> 00:34:39,270 And we have some Id equals party. 668 00:34:39,270 --> 00:34:43,909 This h ref pound just means that it's going to go to the same page. 669 00:34:43,909 --> 00:34:47,120 And click here to party, which is why when we click it, 670 00:34:47,120 --> 00:34:48,940 it should change colors, thankfully. 671 00:34:48,940 --> 00:34:54,322 >> And then we have some script here that is just linked to this party dot js 672 00:34:54,322 --> 00:34:58,100 file, that is empty because we haven't done anything yet. 673 00:34:58,100 --> 00:35:00,450 And it's so sad. 674 00:35:00,450 --> 00:35:06,100 But very soon, it will change colors, and it will be awesome. 675 00:35:06,100 --> 00:35:10,520 >> So I'm just going to walk you guys through how we might approach this. 676 00:35:10,520 --> 00:35:14,030 So the first thing that we might want to do, 677 00:35:14,030 --> 00:35:18,050 if we are changing the background of the body, the first thing we might want 678 00:35:18,050 --> 00:35:22,730 to do is actually grab what the body is, right? 679 00:35:22,730 --> 00:35:27,690 So we want to have sum, our background, and if you notice, 680 00:35:27,690 --> 00:35:29,567 I just automatically just start typing. 681 00:35:29,567 --> 00:35:32,400 There's nothing special that we need to do for our JavaScript files. 682 00:35:32,400 --> 00:35:35,820 I can start declaring variables, and declaring random functions. 683 00:35:35,820 --> 00:35:38,110 And it's much more free form. 684 00:35:38,110 --> 00:35:41,930 It's like with C, we gave you all these hard rules, and you grew up, 685 00:35:41,930 --> 00:35:43,220 so we're like, "go forth. 686 00:35:43,220 --> 00:35:44,000 Be free. 687 00:35:44,000 --> 00:35:44,870 Do what you want." 688 00:35:44,870 --> 00:35:46,280 And that's what JavaScript is. 689 00:35:46,280 --> 00:35:48,390 So we have some background here. 690 00:35:48,390 --> 00:35:55,900 With our DOM model, we know we can do document dot get element, 691 00:35:55,900 --> 00:36:00,290 and if we notice here, our body has an Id. 692 00:36:00,290 --> 00:36:00,930 Right? 693 00:36:00,930 --> 00:36:06,310 So we can do get document by Id, and here's a simple one. 694 00:36:06,310 --> 00:36:08,295 What's our Id that we want here? 695 00:36:08,295 --> 00:36:09,170 AUDIENCE: Background. 696 00:36:09,170 --> 00:36:11,280 ALLISON BUCHHOLTZ-AU: Background. 697 00:36:11,280 --> 00:36:12,230 Perfect. 698 00:36:12,230 --> 00:36:14,250 And semicolon at the end. 699 00:36:14,250 --> 00:36:15,610 That has not gone away yet. 700 00:36:15,610 --> 00:36:17,330 You still need your semicolons. 701 00:36:17,330 --> 00:36:17,830 OK. 702 00:36:17,830 --> 00:36:19,690 So that's our first one. 703 00:36:19,690 --> 00:36:23,880 And when we click something, we want something to happen, right? 704 00:36:23,880 --> 00:36:28,270 So we might want some variable that's waiting for a click. 705 00:36:28,270 --> 00:36:32,410 What we're going to do is we're going to make our link more similar to a button. 706 00:36:32,410 --> 00:36:43,140 So we're going to have some button that equals document dot get element by Id. 707 00:36:43,140 --> 00:36:48,670 And if I'm talking about the click link or click here to party 708 00:36:48,670 --> 00:36:51,850 link, what might my Id be here? 709 00:36:51,850 --> 00:36:52,590 Party. 710 00:36:52,590 --> 00:36:55,200 Correct. 711 00:36:55,200 --> 00:36:56,500 OK not too bad so far. 712 00:36:56,500 --> 00:36:59,060 Everyone get what we're doing? 713 00:36:59,060 --> 00:37:02,100 >> OK, so now we have our button, and we want 714 00:37:02,100 --> 00:37:04,140 things to change when we click on it. 715 00:37:04,140 --> 00:37:08,750 So if we remember from our PowerPoint, very simple thing we can do 716 00:37:08,750 --> 00:37:12,140 is just button dot onclick, right? 717 00:37:12,140 --> 00:37:14,750 718 00:37:14,750 --> 00:37:18,730 And that's going to equal some function. 719 00:37:18,730 --> 00:37:20,620 This is an anonymous function. 720 00:37:20,620 --> 00:37:24,620 And this just as-- actually I'm going to make this a little bigger. 721 00:37:24,620 --> 00:37:27,330 >> So what I just did here is I'm saying, OK, 722 00:37:27,330 --> 00:37:31,810 when we click our button, which is this link that we just referred to, 723 00:37:31,810 --> 00:37:34,270 we are going to execute this anonymous function. 724 00:37:34,270 --> 00:37:35,845 We don't need any inputs. 725 00:37:35,845 --> 00:37:37,220 We don't care what the user says. 726 00:37:37,220 --> 00:37:38,800 When they click on it, we're going to do whatever we want, 727 00:37:38,800 --> 00:37:40,660 which is change the background color. 728 00:37:40,660 --> 00:37:42,640 OK? 729 00:37:42,640 --> 00:37:47,224 So that's why we don't have any inputs, we just have this anonymous function. 730 00:37:47,224 --> 00:37:49,390 And now we're actually going to write this function. 731 00:37:49,390 --> 00:37:55,040 >> So there's a bunch of ways you could generate a random color. 732 00:37:55,040 --> 00:37:59,010 The way that I did it was to generate three random numbers 733 00:37:59,010 --> 00:38:01,910 and convert them to an RGB triple. 734 00:38:01,910 --> 00:38:06,130 So this just shows you some cool things that if you're like, "oh, 735 00:38:06,130 --> 00:38:08,464 I need to generate a random number." if you Googled it, 736 00:38:08,464 --> 00:38:09,630 this is what you would find. 737 00:38:09,630 --> 00:38:17,580 >> So we have three different things, var, not red again, green. 738 00:38:17,580 --> 00:38:18,080 Right? 739 00:38:18,080 --> 00:38:20,740 So those are the three things that make up a color. 740 00:38:20,740 --> 00:38:22,220 Blue, red, and green. 741 00:38:22,220 --> 00:38:22,960 Cool. 742 00:38:22,960 --> 00:38:27,050 And what we can do is that we know that it needs to be between 255, 743 00:38:27,050 --> 00:38:30,140 and if you looked up some random number generator, 744 00:38:30,140 --> 00:38:36,000 you could get something like math dot random, which if you look this up 745 00:38:36,000 --> 00:38:39,230 returns to some number between zero and one. 746 00:38:39,230 --> 00:38:39,980 OK? 747 00:38:39,980 --> 00:38:44,470 And what numbers do our RGB triples go between? 748 00:38:44,470 --> 00:38:47,240 Zero and what? 749 00:38:47,240 --> 00:38:49,000 What can they go up to? 750 00:38:49,000 --> 00:38:49,950 255. 751 00:38:49,950 --> 00:38:53,320 So if math dot random goes between zero and one, 752 00:38:53,320 --> 00:38:56,365 how might we want to convert this? 753 00:38:56,365 --> 00:38:56,990 AUDIENCE: Time? 754 00:38:56,990 --> 00:38:57,830 ALLISON BUCHHOLTZ-AU: Yeah, exactly. 755 00:38:57,830 --> 00:38:58,677 So time is 255. 756 00:38:58,677 --> 00:39:00,888 >> AUDIENCE: [INAUDIBLE] It's like [INAUDIBLE]. 757 00:39:00,888 --> 00:39:02,471 ALLISON BUCHHOLTZ-AU: Math dot random. 758 00:39:02,471 --> 00:39:03,096 AUDIENCE: Cool. 759 00:39:03,096 --> 00:39:04,580 ALLISON BUCHHOLTZ-AU: Yes. 760 00:39:04,580 --> 00:39:06,300 JavaScript just takes care of you. 761 00:39:06,300 --> 00:39:07,580 OK. 762 00:39:07,580 --> 00:39:09,360 So we can do that for all of these. 763 00:39:09,360 --> 00:39:10,540 Right? 764 00:39:10,540 --> 00:39:16,480 Math dot random times 255. 765 00:39:16,480 --> 00:39:17,740 Copy that. 766 00:39:17,740 --> 00:39:18,820 Cool. 767 00:39:18,820 --> 00:39:23,350 So the thing is, this may not return an integer. 768 00:39:23,350 --> 00:39:24,080 Right? 769 00:39:24,080 --> 00:39:26,450 Maybe we get some number between zero and one, 770 00:39:26,450 --> 00:39:32,150 and it causes it to be slightly off, and our RGBs can't be floats. 771 00:39:32,150 --> 00:39:33,360 They need to be ints. 772 00:39:33,360 --> 00:39:37,610 So if you tried this, it'd probably have some erratic behavior. 773 00:39:37,610 --> 00:39:38,810 It would be a little funky. 774 00:39:38,810 --> 00:39:43,200 So what we do is we want to make sure that these are rounded, 775 00:39:43,200 --> 00:39:45,400 and you could round either way. 776 00:39:45,400 --> 00:39:47,110 I rounded with floor. 777 00:39:47,110 --> 00:39:49,680 So I always made sure that it rounded down. 778 00:39:49,680 --> 00:39:54,440 But going off of how simple it was to just get a random number, 779 00:39:54,440 --> 00:39:57,920 how do you think we might floor this number? 780 00:39:57,920 --> 00:40:00,720 It's very similar. 781 00:40:00,720 --> 00:40:02,810 Any idea? 782 00:40:02,810 --> 00:40:06,450 So if random was just math dot random, so do you think we'd do floor? 783 00:40:06,450 --> 00:40:09,670 Math dot floor. 784 00:40:09,670 --> 00:40:11,340 And you can also do math dot ceiling. 785 00:40:11,340 --> 00:40:14,030 Round is kind of ambiguous because you don't 786 00:40:14,030 --> 00:40:16,110 know whether to round up or round down. 787 00:40:16,110 --> 00:40:20,797 So typically we always do math dot floor, math dot ceiling. 788 00:40:20,797 --> 00:40:21,380 But honestly-- 789 00:40:21,380 --> 00:40:22,780 >> AUDIENCE: Does floor round down? 790 00:40:22,780 --> 00:40:24,740 >> ALLISON BUCHHOLTZ-AU: Floor rounds down. 791 00:40:24,740 --> 00:40:26,990 And that's just a choice on my part. 792 00:40:26,990 --> 00:40:32,370 >> So now we have our three numbers that have been randomly generated, 793 00:40:32,370 --> 00:40:36,610 and what we're going to do now is we're just going to change the background. 794 00:40:36,610 --> 00:40:37,310 OK? 795 00:40:37,310 --> 00:40:41,490 So we already have our background kind of stored 796 00:40:41,490 --> 00:40:43,280 in this element called background. 797 00:40:43,280 --> 00:40:47,300 So what you'll notice is, if you played around with this, 798 00:40:47,300 --> 00:40:50,460 we want to change the style. 799 00:40:50,460 --> 00:40:53,812 And this is kind of something that you would Google and figure out, 800 00:40:53,812 --> 00:40:55,020 like how to change the color. 801 00:40:55,020 --> 00:40:59,210 >> But the way you access this color is background dot style dot background. 802 00:40:59,210 --> 00:41:03,490 So this is saying given this object, background, 803 00:41:03,490 --> 00:41:06,920 which refers to that element Id up there, 804 00:41:06,920 --> 00:41:10,690 we're going to look at the style within the style, 805 00:41:10,690 --> 00:41:13,280 we're going to look at the background. 806 00:41:13,280 --> 00:41:14,270 OK? 807 00:41:14,270 --> 00:41:17,630 And if you go and look this up, it might make a little more sense, 808 00:41:17,630 --> 00:41:21,930 but this is basically just saying, "give me this very specific attribute 809 00:41:21,930 --> 00:41:25,770 of what I have defined earlier." 810 00:41:25,770 --> 00:41:32,340 So what we're changing it to is some RGB, because it makes sense. 811 00:41:32,340 --> 00:41:34,780 We're using RGB triples, right? 812 00:41:34,780 --> 00:41:41,530 And we have-- I want to make sure I get the right number of quotes in here. 813 00:41:41,530 --> 00:41:43,940 So what we do is we have RGB, and we're going 814 00:41:43,940 --> 00:41:46,800 to-- this is like concatenation, which is red. 815 00:41:46,800 --> 00:41:50,030 816 00:41:50,030 --> 00:41:52,610 And then we want some comma. 817 00:41:52,610 --> 00:41:59,925 And then we want plus green, then some comma, and some blue. 818 00:41:59,925 --> 00:42:10,640 819 00:42:10,640 --> 00:42:14,120 >> So these pluses just mean like concatenation. 820 00:42:14,120 --> 00:42:19,810 So this is just creating this string that's going within RGB. 821 00:42:19,810 --> 00:42:20,310 OK? 822 00:42:20,310 --> 00:42:23,200 823 00:42:23,200 --> 00:42:26,684 >> AUDIENCE: [INAUDIBLE] plus then the green a plus then the red. 824 00:42:26,684 --> 00:42:30,163 >> ALLISON BUCHHOLTZ-AU: Yeah, because I messed that up. 825 00:42:30,163 --> 00:42:30,890 That one's fine. 826 00:42:30,890 --> 00:42:32,110 Oh, hold on. 827 00:42:32,110 --> 00:42:32,610 No. 828 00:42:32,610 --> 00:42:36,770 Because I need to make sure that I got all these right. 829 00:42:36,770 --> 00:42:39,680 830 00:42:39,680 --> 00:42:43,950 So I will explain in uno momento. 831 00:42:43,950 --> 00:42:47,040 Green, blue, perfect. 832 00:42:47,040 --> 00:42:47,971 Now I'm done. 833 00:42:47,971 --> 00:42:48,470 I believe. 834 00:42:48,470 --> 00:42:51,570 835 00:42:51,570 --> 00:42:52,530 >> OK. 836 00:42:52,530 --> 00:42:58,085 So what this is, is that background is going to be set to some string. 837 00:42:58,085 --> 00:42:58,585 Right? 838 00:42:58,585 --> 00:42:59,710 Which is what we have here. 839 00:42:59,710 --> 00:43:05,870 It's going to be some RGB 255 comma 255 comma zero, or whatever number you 840 00:43:05,870 --> 00:43:06,512 have there. 841 00:43:06,512 --> 00:43:08,220 So we're doing here, we have some string. 842 00:43:08,220 --> 00:43:11,910 And what we want to do, is we're kind of dynamically creating 843 00:43:11,910 --> 00:43:14,010 that when we actually run this program. 844 00:43:14,010 --> 00:43:16,570 So this is some string. 845 00:43:16,570 --> 00:43:20,290 Plus concatenates it with the value that red has, 846 00:43:20,290 --> 00:43:23,320 which concatenates it with a comma, which concatenates it 847 00:43:23,320 --> 00:43:26,090 with what green is, and so on, and so forth. 848 00:43:26,090 --> 00:43:26,660 OK? 849 00:43:26,660 --> 00:43:32,210 Until the very end, which is the closing parentheses of this RGB here. 850 00:43:32,210 --> 00:43:32,800 OK? 851 00:43:32,800 --> 00:43:37,230 >> So what this is going to generate is some command really 852 00:43:37,230 --> 00:43:42,770 that is RGB of three numbers that background is now set to. 853 00:43:42,770 --> 00:43:43,940 OK? 854 00:43:43,940 --> 00:43:46,510 So let's see if this works. 855 00:43:46,510 --> 00:43:49,720 I hope it does, because if it doesn't, I'm going to be real sad. 856 00:43:49,720 --> 00:43:50,250 Oh no. 857 00:43:50,250 --> 00:43:52,710 OK, hold on. 858 00:43:52,710 --> 00:43:56,730 Definitely background dot style dot background. 859 00:43:56,730 --> 00:43:59,569 I'm definitely missing something just small. 860 00:43:59,569 --> 00:44:00,610 Don't you guys hate that? 861 00:44:00,610 --> 00:44:04,020 When it's just a small little error? 862 00:44:04,020 --> 00:44:04,990 Almighty background. 863 00:44:04,990 --> 00:44:08,391 864 00:44:08,391 --> 00:44:08,890 RGB. 865 00:44:08,890 --> 00:44:09,765 >> AUDIENCE: [INAUDIBLE] 866 00:44:09,765 --> 00:44:11,729 867 00:44:11,729 --> 00:44:12,770 ALLISON BUCHHOLTZ-AU: No. 868 00:44:12,770 --> 00:44:14,050 I tried this before class. 869 00:44:14,050 --> 00:44:16,570 I have everything I did before class in case I was like, 870 00:44:16,570 --> 00:44:17,970 "wait, what did I do wrong?" 871 00:44:17,970 --> 00:44:23,190 Because I was like, "I will probably mess this up at some point." 872 00:44:23,190 --> 00:44:24,150 Plus green. 873 00:44:24,150 --> 00:44:26,250 Everything looks like it's concatenated correctly. 874 00:44:26,250 --> 00:44:29,620 875 00:44:29,620 --> 00:44:30,520 OK. 876 00:44:30,520 --> 00:44:31,870 >> AUDIENCE: [INAUDIBLE] 877 00:44:31,870 --> 00:44:33,810 >> ALLISON BUCHHOLTZ-AU: Oh, there you go. 878 00:44:33,810 --> 00:44:35,520 That's what I needed. 879 00:44:35,520 --> 00:44:36,805 Look at that. 880 00:44:36,805 --> 00:44:40,090 Tiffany to rescue. 881 00:44:40,090 --> 00:44:40,590 Perfect. 882 00:44:40,590 --> 00:44:41,090 OK. 883 00:44:41,090 --> 00:44:43,834 Now let's see if it works. 884 00:44:43,834 --> 00:44:44,816 Oh my God. 885 00:44:44,816 --> 00:44:45,641 OK. 886 00:44:45,641 --> 00:44:46,140 Hold on. 887 00:44:46,140 --> 00:44:48,280 >> AUDIENCE: Space after the second plus. 888 00:44:48,280 --> 00:44:50,310 >> ALLISON BUCHHOLTZ-AU: Which one? 889 00:44:50,310 --> 00:44:52,910 Oh wait, hold on. 890 00:44:52,910 --> 00:44:54,870 Space wear? 891 00:44:54,870 --> 00:44:57,209 >> AUDIENCE: Second plus in the green concatenation. 892 00:44:57,209 --> 00:44:58,250 ALLISON BUCHHOLTZ-AU: Oh. 893 00:44:58,250 --> 00:44:59,570 AUDIENCE: There's no space after the plus, yeah. 894 00:44:59,570 --> 00:45:00,790 ALLISON BUCHHOLTZ-AU: You don't need that, but-- 895 00:45:00,790 --> 00:45:01,190 AUDIENCE: Oh, you don't? 896 00:45:01,190 --> 00:45:01,910 ALLISON BUCHHOLTZ-AU: It looks pretty. 897 00:45:01,910 --> 00:45:02,530 AUDIENCE: OK. 898 00:45:02,530 --> 00:45:03,030 OK. 899 00:45:03,030 --> 00:45:05,170 >> ALLISON BUCHHOLTZ AU: Let's see if this works. 900 00:45:05,170 --> 00:45:05,670 OK. 901 00:45:05,670 --> 00:45:07,836 I'm obviously failing at this demo, which reminds me 902 00:45:07,836 --> 00:45:12,810 of a lecture the other week, but I know this will work. 903 00:45:12,810 --> 00:45:15,860 I know this will work. 904 00:45:15,860 --> 00:45:16,580 So close. 905 00:45:16,580 --> 00:45:22,330 Unless I accidentally deleted my script on this one. 906 00:45:22,330 --> 00:45:24,035 No, it is party dot js. 907 00:45:24,035 --> 00:45:25,776 OK hold on. 908 00:45:25,776 --> 00:45:28,650 I'm going to copy this, and I'm also just going to delete everything, 909 00:45:28,650 --> 00:45:30,108 because I had this working earlier. 910 00:45:30,108 --> 00:45:32,470 911 00:45:32,470 --> 00:45:33,770 >> I promise it works. 912 00:45:33,770 --> 00:45:36,160 If not, I will show you what Tommy's is. 913 00:45:36,160 --> 00:45:38,890 And there. 914 00:45:38,890 --> 00:45:42,380 >> AUDIENCE: You're referencing party dot CSS, and it's a party dot js. 915 00:45:42,380 --> 00:45:45,940 >> ALLISON BUCHHOLTZ-AU: Ah, well right here is party dot js. 916 00:45:45,940 --> 00:45:49,187 OK, what did I do different? 917 00:45:49,187 --> 00:45:50,520 OK, we'll see if this works now. 918 00:45:50,520 --> 00:45:54,180 919 00:45:54,180 --> 00:45:54,980 Bam. 920 00:45:54,980 --> 00:46:02,110 So, I don't know what I did differently, but this is what should happen. 921 00:46:02,110 --> 00:46:03,230 Kinda cool. 922 00:46:03,230 --> 00:46:06,650 I clicked on this, like, forever. 923 00:46:06,650 --> 00:46:11,185 But we can try and see what I did differently that this one had. 924 00:46:11,185 --> 00:46:14,560 I don't know about you guys, but this looks basically what I just wrote. 925 00:46:14,560 --> 00:46:17,950 There was probably a missing semicolon somewhere is my thing. 926 00:46:17,950 --> 00:46:22,064 Actually after, I think I was missing a semicolon right here actually. 927 00:46:22,064 --> 00:46:24,230 But I couldn't see it because it was off the screen. 928 00:46:24,230 --> 00:46:29,040 >> But if we notice, this is pretty much exactly what I just wrote. 929 00:46:29,040 --> 00:46:33,010 I think probably the hardest part about this is just kind of this thing right 930 00:46:33,010 --> 00:46:36,830 here, understanding what it's doing there. 931 00:46:36,830 --> 00:46:42,230 These sorts of things you learn really just by Googling and honestly 932 00:46:42,230 --> 00:46:42,880 just trying. 933 00:46:42,880 --> 00:46:46,770 If you think there's some attribute, there probably is. 934 00:46:46,770 --> 00:46:48,382 So try it. 935 00:46:48,382 --> 00:46:49,090 See what happens. 936 00:46:49,090 --> 00:46:53,000 As I said, there's a lot of experimentation with JavaScript, 937 00:46:53,000 --> 00:46:56,810 and PHP, and all that stuff, and CSS especially. 938 00:46:56,810 --> 00:47:00,046 That's the only true way to understand it. 939 00:47:00,046 --> 00:47:07,100 >> OK, so after that fiasco with party dot js, we have two other options. 940 00:47:07,100 --> 00:47:10,650 We have clock or Twitter. 941 00:47:10,650 --> 00:47:12,190 They're both interesting. 942 00:47:12,190 --> 00:47:17,720 Maybe not quite as fun as party, which had a cool little strobing 943 00:47:17,720 --> 00:47:19,595 thing at the end. 944 00:47:19,595 --> 00:47:21,714 Do you guys have any preference? 945 00:47:21,714 --> 00:47:22,380 AUDIENCE: Clock? 946 00:47:22,380 --> 00:47:22,950 ALLISON BUCHHOLTZ-AU: Clock? 947 00:47:22,950 --> 00:47:23,450 OK. 948 00:47:23,450 --> 00:47:25,390 Cool. 949 00:47:25,390 --> 00:47:30,460 >> So again, we have our empty JavaScript file. 950 00:47:30,460 --> 00:47:35,800 And as we see here, we have some very simple HTML. 951 00:47:35,800 --> 00:47:40,010 We have our style sheet, that just formats what it should look like. 952 00:47:40,010 --> 00:47:42,860 We have our div with an Id of clock, which 953 00:47:42,860 --> 00:47:44,420 just says, "this should be a clock." 954 00:47:44,420 --> 00:47:47,650 And we have our link to our JavaScript file 955 00:47:47,650 --> 00:47:51,400 that's actually going to generate our clock for us. 956 00:47:51,400 --> 00:47:56,060 Because the cool thing, is that you can set JavaScript to automatically refresh 957 00:47:56,060 --> 00:47:56,963 itself. 958 00:47:56,963 --> 00:47:57,810 OK? 959 00:47:57,810 --> 00:48:01,580 So instead of waiting for the user to hit Refresh on a page 960 00:48:01,580 --> 00:48:03,840 so that you can get updated time, JavaScript 961 00:48:03,840 --> 00:48:06,760 can update it however it likes. 962 00:48:06,760 --> 00:48:12,082 >> So, as with our last one, we wanted to access our background, right? 963 00:48:12,082 --> 00:48:14,790 So what do you think might be the first thing we want to do here? 964 00:48:14,790 --> 00:48:19,538 If we're kind of going off this sort of paradigm here? 965 00:48:19,538 --> 00:48:22,200 We probably want to access our clock, right? 966 00:48:22,200 --> 00:48:24,724 So, we have some var clock, which equals-- 967 00:48:24,724 --> 00:48:26,140 what do we think it's going to be? 968 00:48:26,140 --> 00:48:29,290 969 00:48:29,290 --> 00:48:42,670 Document dot get element by-- I also love Sublime-- Id and our Id is clock. 970 00:48:42,670 --> 00:48:43,585 Semicolon. 971 00:48:43,585 --> 00:48:45,710 Got to make sure to get those semicolons this time, 972 00:48:45,710 --> 00:48:47,835 because I feel like that was the problem last time. 973 00:48:47,835 --> 00:48:55,980 OK so, as I was just saying with trying to have JavaScript refresh itself, 974 00:48:55,980 --> 00:48:59,655 there's this great function, I know it came in handy last year, 975 00:48:59,655 --> 00:49:02,780 I'm not sure it comes in handy for this pset, but it's called set interval. 976 00:49:02,780 --> 00:49:05,640 977 00:49:05,640 --> 00:49:08,200 And this is actually really cool if you guys do anything 978 00:49:08,200 --> 00:49:11,460 with time or getting updated information. 979 00:49:11,460 --> 00:49:13,700 On a website for a final project, this is probably 980 00:49:13,700 --> 00:49:16,240 a function you want to get super familiar with. 981 00:49:16,240 --> 00:49:19,730 So what set interval does is that we're going to give it a function, 982 00:49:19,730 --> 00:49:21,830 and how often it should call this function. 983 00:49:21,830 --> 00:49:22,430 OK? 984 00:49:22,430 --> 00:49:26,890 >> So in this case, we're just going to create some anonymous function again, 985 00:49:26,890 --> 00:49:31,530 OK, that is going to get our date, and our time, 986 00:49:31,530 --> 00:49:33,780 and then update things and display it. 987 00:49:33,780 --> 00:49:35,130 So we'll worry about that. 988 00:49:35,130 --> 00:49:39,120 We'll be like generate clock here. 989 00:49:39,120 --> 00:49:41,750 But what we need is how often to refresh it. 990 00:49:41,750 --> 00:49:43,930 So in this case, it's just milliseconds. 991 00:49:43,930 --> 00:49:46,877 So we're just going to do 100 milliseconds. 992 00:49:46,877 --> 00:49:48,210 Of course, completely arbitrary. 993 00:49:48,210 --> 00:49:50,600 If you wanted it to update much more slowly, you could. 994 00:49:50,600 --> 00:49:53,300 We can mess around with the set interval, 995 00:49:53,300 --> 00:49:57,240 how big our interval is after we get a working clock, which hopefully I'll 996 00:49:57,240 --> 00:49:59,660 get to. 997 00:49:59,660 --> 00:50:04,110 So this is just saying, "OK, call this function every 100 milliseconds." 998 00:50:04,110 --> 00:50:04,805 OK? 999 00:50:04,805 --> 00:50:07,280 That's all it does. 1000 00:50:07,280 --> 00:50:12,290 >> So what we want our function to do is we want to have some date 1001 00:50:12,290 --> 00:50:14,200 and some time is what we're going to have. 1002 00:50:14,200 --> 00:50:19,740 So We can start with our date equals something, 1003 00:50:19,740 --> 00:50:22,708 and our time equals something that we don't know yet. 1004 00:50:22,708 --> 00:50:26,070 1005 00:50:26,070 --> 00:50:29,300 Or actually, we just need date, because date is going to include everything. 1006 00:50:29,300 --> 00:50:34,310 1007 00:50:34,310 --> 00:50:40,010 Again if you just Google anything about what you want to do, if you write, "OK, 1008 00:50:40,010 --> 00:50:41,980 I want to get the time via JavaScript," it 1009 00:50:41,980 --> 00:50:45,890 will give you this great function called get date. 1010 00:50:45,890 --> 00:50:48,664 Literally, most things that you want to do, 1011 00:50:48,664 --> 00:50:50,830 JavaScript is going to have it done for you already. 1012 00:50:50,830 --> 00:50:55,770 So it's literally like new get date, which is creating-- 1013 00:50:55,770 --> 00:50:58,600 or new date, rather-- which is generating 1014 00:50:58,600 --> 00:51:03,690 some object that represents a date. 1015 00:51:03,690 --> 00:51:08,200 >> And what we're going to do here is this is-- I'm going to write this, 1016 00:51:08,200 --> 00:51:10,820 and then explain what it does. 1017 00:51:10,820 --> 00:51:12,560 So I'll make sure I get this right. 1018 00:51:12,560 --> 00:51:17,950 1019 00:51:17,950 --> 00:51:23,440 >> OK, so what this function does, is we're just 1020 00:51:23,440 --> 00:51:30,680 creating the HTML that's actually going to go within our div Id of clock. 1021 00:51:30,680 --> 00:51:34,610 So what this is going to be doing is just generating some string, OK? 1022 00:51:34,610 --> 00:51:38,510 That is then going to be transplanted into our HTML. 1023 00:51:38,510 --> 00:51:42,130 Basically what it's going to do is whatever we-- what I will show you 1024 00:51:42,130 --> 00:51:49,070 is that whatever we say HTML is, we're going to replace this text here 1025 00:51:49,070 --> 00:51:51,090 with whatever HTML is. 1026 00:51:51,090 --> 00:51:56,390 So this is going to allow us to change our clock dot 1027 00:51:56,390 --> 00:52:00,940 HTML from being just the text of this should be a clock, to actually showing 1028 00:52:00,940 --> 00:52:05,630 the numbers and things that we care about, and actually be o'clock. 1029 00:52:05,630 --> 00:52:09,810 >> So what we're going to do is we're going to start generating this HTML. 1030 00:52:09,810 --> 00:52:16,520 So in the same way that we used to do plus equals for integers, 1031 00:52:16,520 --> 00:52:20,461 you can now do that for strings, except it's going to concatenate them. 1032 00:52:20,461 --> 00:52:20,960 Right? 1033 00:52:20,960 --> 00:52:26,070 As we saw with party dot js, this just concatenates all these things together. 1034 00:52:26,070 --> 00:52:31,970 So you can concatenate different bits of HTML from variables, or bits of strings 1035 00:52:31,970 --> 00:52:33,750 that you write out yourself, and this just 1036 00:52:33,750 --> 00:52:38,650 really allows you to dynamically generate HTML, which is pretty cool. 1037 00:52:38,650 --> 00:52:42,040 So if you have something very user specific, 1038 00:52:42,040 --> 00:52:44,130 this can allow you to do that. 1039 00:52:44,130 --> 00:52:47,550 >> So we have HTML, to I'm going to try and make sure I get this right. 1040 00:52:47,550 --> 00:52:49,890 So we're going to do some h1 header. 1041 00:52:49,890 --> 00:52:53,610 So what's important to realize here is that this is actually just HTML. 1042 00:52:53,610 --> 00:52:54,460 Right? 1043 00:52:54,460 --> 00:52:56,610 We are writing actual HTML code in here, it's 1044 00:52:56,610 --> 00:53:01,090 not just a string in the normal way that we would think about it. 1045 00:53:01,090 --> 00:53:02,930 So we have some HTML. 1046 00:53:02,930 --> 00:53:04,940 This is considered a string here though. 1047 00:53:04,940 --> 00:53:10,380 And we do date dot-- we want to get our hours. 1048 00:53:10,380 --> 00:53:12,910 Again, if you were to look up anything about date, 1049 00:53:12,910 --> 00:53:16,160 it would tell you these are all the attributes that date has. 1050 00:53:16,160 --> 00:53:17,670 And here's what you can use on it. 1051 00:53:17,670 --> 00:53:20,620 So it probably has things like get hours, and get minutes, 1052 00:53:20,620 --> 00:53:24,669 and get seconds, and get milliseconds, and who knows what else they have. 1053 00:53:24,669 --> 00:53:27,210 But if you look into the documentation, it will all be there. 1054 00:53:27,210 --> 00:53:31,980 >> So we have get hours, and then we would want 1055 00:53:31,980 --> 00:53:35,614 to concatenate that with-- I'm going to move this over here. 1056 00:53:35,614 --> 00:53:38,780 So if we're generating right now, we're actually generating the time, right? 1057 00:53:38,780 --> 00:53:43,590 We have hours, and then what's between hours and minutes? 1058 00:53:43,590 --> 00:53:45,080 You have a semicolon, right? 1059 00:53:45,080 --> 00:53:48,010 So we want to do some semicolon here. 1060 00:53:48,010 --> 00:53:51,780 And then we want to get our minutes, so in the same way 1061 00:53:51,780 --> 00:53:56,450 that we have date dot get hours, how might we get our minutes? 1062 00:53:56,450 --> 00:54:01,542 It's literally date dot get minutes, which I kind of like. 1063 00:54:01,542 --> 00:54:03,250 It's like, "oh, how do I get my minutes?" 1064 00:54:03,250 --> 00:54:05,850 I just get my minutes. 1065 00:54:05,850 --> 00:54:07,500 >> OK. 1066 00:54:07,500 --> 00:54:10,990 And then we have another colon here. 1067 00:54:10,990 --> 00:54:16,350 And then if we want to get our seconds, how might we get our second? 1068 00:54:16,350 --> 00:54:17,400 Date dot get seconds. 1069 00:54:17,400 --> 00:54:20,390 1070 00:54:20,390 --> 00:54:21,590 I think it's pretty cool. 1071 00:54:21,590 --> 00:54:23,589 And what's important to realize, is that we also 1072 00:54:23,589 --> 00:54:31,730 need to close our HTML tag here, because it should still be valid HTML, so h1. 1073 00:54:31,730 --> 00:54:33,481 Cool. 1074 00:54:33,481 --> 00:54:43,110 >> So after that, we can do clock dot inner HTML is equal to HTML. 1075 00:54:43,110 --> 00:54:43,930 OK? 1076 00:54:43,930 --> 00:54:46,470 So remember how I said inner HTML basically 1077 00:54:46,470 --> 00:54:50,610 takes whatever is between the two tags that we talked about 1078 00:54:50,610 --> 00:54:54,470 and inserts or manipulates whatever is in there? 1079 00:54:54,470 --> 00:54:58,290 So what this does, if we go back to our clock, 1080 00:54:58,290 --> 00:55:04,180 is that clock refers to everything within this div. 1081 00:55:04,180 --> 00:55:09,770 This is the inner HTML of this Id clock div. 1082 00:55:09,770 --> 00:55:13,930 And so it's going to change it to the HTML that we just generated, 1083 00:55:13,930 --> 00:55:16,750 which, which, hopefully, hopefully, hopefully, 1084 00:55:16,750 --> 00:55:21,026 will show the time right now. 1085 00:55:21,026 --> 00:55:23,960 We'll see. 1086 00:55:23,960 --> 00:55:25,170 Of course. 1087 00:55:25,170 --> 00:55:26,860 So many technical issues. 1088 00:55:26,860 --> 00:55:31,480 Allison's just-- I'm off my game today guys. 1089 00:55:31,480 --> 00:55:34,136 OK, that works. 1090 00:55:34,136 --> 00:55:35,760 clock dot inner HTML. 1091 00:55:35,760 --> 00:55:42,097 It was HTML Really? 1092 00:55:42,097 --> 00:55:43,180 Also this is what happens. 1093 00:55:43,180 --> 00:55:48,750 When you can't see something, you just look at your source code. 1094 00:55:48,750 --> 00:55:49,250 OK. 1095 00:55:49,250 --> 00:55:51,912 1096 00:55:51,912 --> 00:55:54,870 Do you wanna know a cool work around that we're going to do right here? 1097 00:55:54,870 --> 00:55:55,740 >> AUDIENCE: Can you do capital letters? 1098 00:55:55,740 --> 00:55:56,580 The capital letters? 1099 00:55:56,580 --> 00:55:58,996 Because you have get hours, and then get minutes. 1100 00:55:58,996 --> 00:56:02,590 >> ALLISON BUCHHOLTZ-AU: It is get hours and get-- oh. 1101 00:56:02,590 --> 00:56:04,945 You are-- gold star. 1102 00:56:04,945 --> 00:56:08,114 1103 00:56:08,114 --> 00:56:09,030 It's all a test, guys. 1104 00:56:09,030 --> 00:56:13,630 1105 00:56:13,630 --> 00:56:17,330 I promise it was working before class. 1106 00:56:17,330 --> 00:56:22,590 >> OK, but something cool to know is that you can also-- if sometimes 1107 00:56:22,590 --> 00:56:26,560 your external files are getting a little crazy, 1108 00:56:26,560 --> 00:56:30,960 you can also just put them straight in here, which tends to fix things. 1109 00:56:30,960 --> 00:56:35,840 Except this is like really ugly. 1110 00:56:35,840 --> 00:56:38,050 Of course format everything. 1111 00:56:38,050 --> 00:56:41,425 Make sure it's all pretty. 1112 00:56:41,425 --> 00:56:41,925 OK. 1113 00:56:41,925 --> 00:56:47,200 1114 00:56:47,200 --> 00:56:50,621 >> I wanted to do all the cool demos, and they're just not working out. 1115 00:56:50,621 --> 00:56:51,555 OK. 1116 00:56:51,555 --> 00:56:53,890 Script var clock. 1117 00:56:53,890 --> 00:57:00,350 Anyways, what's important is that this is the general way 1118 00:57:00,350 --> 00:57:01,870 that you would format JavaScript. 1119 00:57:01,870 --> 00:57:04,490 As you can see, it can be very finicky sometimes, 1120 00:57:04,490 --> 00:57:08,780 even when it was literally working two seconds ago. 1121 00:57:08,780 --> 00:57:11,820 Or not two second ago, but very, very recently. 1122 00:57:11,820 --> 00:57:16,070 >> So to show you what it should look like, and to show you that I'm not crazy, 1123 00:57:16,070 --> 00:57:19,730 and that everything is exactly the same, this is what it should look like. 1124 00:57:19,730 --> 00:57:27,410 You're just going to do this top part here, and if you view page source, 1125 00:57:27,410 --> 00:57:32,160 if you notice, he did some crazier things, I simplified it. 1126 00:57:32,160 --> 00:57:35,710 Also, credit to Tommy McWilliam, who actually 1127 00:57:35,710 --> 00:57:38,810 helped me create these examples, which is why I know they work. 1128 00:57:38,810 --> 00:57:41,560 Because Tommy is a JavaScript master. 1129 00:57:41,560 --> 00:57:43,180 But if we notice, we have some set. 1130 00:57:43,180 --> 00:57:45,170 We have our clock function here. 1131 00:57:45,170 --> 00:57:48,450 This is all the JavaScript that we just wrote, or some of it. 1132 00:57:48,450 --> 00:57:51,470 We just wrote this one right here. 1133 00:57:51,470 --> 00:57:54,260 And he has an extra function that just pads it 1134 00:57:54,260 --> 00:57:57,790 by putting a zero before a letter or before a number if it's 1135 00:57:57,790 --> 00:57:59,412 just one of them. 1136 00:57:59,412 --> 00:58:02,120 So if you notice, this is pretty much exactly what we just wrote. 1137 00:58:02,120 --> 00:58:06,230 You have some variable clock that has our element, get element by ID, 1138 00:58:06,230 --> 00:58:07,252 which is clock. 1139 00:58:07,252 --> 00:58:08,960 We have our set interval function, that's 1140 00:58:08,960 --> 00:58:12,670 an anonymous function that executes all of this. 1141 00:58:12,670 --> 00:58:16,940 We have some starting string of HTML that we then dynamically 1142 00:58:16,940 --> 00:58:20,750 generate by having some h1 header, concatenating 1143 00:58:20,750 --> 00:58:23,950 with get the hours, plus our colon, plus getting 1144 00:58:23,950 --> 00:58:26,860 the minutes, plus another colon, plus our seconds, 1145 00:58:26,860 --> 00:58:29,330 and finally the ending HTML for it. 1146 00:58:29,330 --> 00:58:34,210 And then we update our clock dot inner HTML to HTML, 1147 00:58:34,210 --> 00:58:37,640 and we update every 100 milliseconds. 1148 00:58:37,640 --> 00:58:39,060 OK? 1149 00:58:39,060 --> 00:58:42,470 >> See I promise I'm not crazy. 1150 00:58:42,470 --> 00:58:43,440 I don't know. 1151 00:58:43,440 --> 00:58:47,160 I don't know why it doesn't like me. 1152 00:58:47,160 --> 00:58:54,030 I feel like looks the same, but apparently it hates me. 1153 00:58:54,030 --> 00:58:59,600 >> So let's see if round three goes better. 1154 00:58:59,600 --> 00:59:00,970 We're about to see. 1155 00:59:00,970 --> 00:59:02,910 I'm not sure how this is going to go. 1156 00:59:02,910 --> 00:59:06,700 Is everyone at least getting the cons, like just the general theme 1157 00:59:06,700 --> 00:59:08,480 of JavaScript, though? 1158 00:59:08,480 --> 00:59:15,660 I hope that's at least useful, more than showing that it's a little finicky. 1159 00:59:15,660 --> 00:59:21,190 But your problem set will be very fun. 1160 00:59:21,190 --> 00:59:22,590 It's going to be great. 1161 00:59:22,590 --> 00:59:24,820 It won't be quite as tedious as this, I don't think. 1162 00:59:24,820 --> 00:59:28,100 You'll actually get to see really cool things. 1163 00:59:28,100 --> 00:59:31,734 >> So last but not least, we'll try the Twitter one. 1164 00:59:31,734 --> 00:59:32,900 I'm really scared now, guys. 1165 00:59:32,900 --> 00:59:35,762 I don't know how this is going to go. 1166 00:59:35,762 --> 00:59:39,930 But just to give you a little more taste, and this is actually 1167 00:59:39,930 --> 00:59:44,190 manipulating strings and inputs, what we're going to do 1168 00:59:44,190 --> 00:59:50,960 is, if we notice here with HTML-- this one has a little bit more-- 1169 00:59:50,960 --> 00:59:57,200 we have some text area, which corresponds to this text area here. 1170 00:59:57,200 --> 00:59:58,030 OK? 1171 00:59:58,030 --> 01:00:00,420 And that has an Id of text. 1172 01:00:00,420 --> 01:00:04,520 We restyled it a little bit with some width and height 1173 01:00:04,520 --> 01:00:07,310 that we've predetermined, and we have h1, 1174 01:00:07,310 --> 01:00:11,260 which just is our header one that represents our characters left. 1175 01:00:11,260 --> 01:00:14,570 We gave it some Id of characters remaining, 1176 01:00:14,570 --> 01:00:18,660 and then we have some script here, which I'm really 1177 01:00:18,660 --> 01:00:20,790 hoping third time's the charm here, guys. 1178 01:00:20,790 --> 01:00:26,750 >> So what we want to do, in the same general vein 1179 01:00:26,750 --> 01:00:31,480 that we've done with clock dot js and party dot js as we've noticed, 1180 01:00:31,480 --> 01:00:35,980 is we've started by actually grabbing the things that we care about, right? 1181 01:00:35,980 --> 01:00:42,330 So in this case, there are two things that we care about, OK? 1182 01:00:42,330 --> 01:00:47,199 One thing that we're actually kind of looking into and drawing data from, 1183 01:00:47,199 --> 01:00:48,990 and one thing that we're actually changing. 1184 01:00:48,990 --> 01:00:52,110 1185 01:00:52,110 --> 01:00:53,730 So there's our HTML. 1186 01:00:53,730 --> 01:01:00,370 If this is our web page here, what's the data that we're looking at? 1187 01:01:00,370 --> 01:01:03,860 It's going to be whatever the text in our boxes, right? 1188 01:01:03,860 --> 01:01:05,310 So whatever I type in here. 1189 01:01:05,310 --> 01:01:08,150 That's what I want to know, or that's what I want to look at. 1190 01:01:08,150 --> 01:01:10,690 And what's going to be changing on our web page? 1191 01:01:10,690 --> 01:01:13,550 1192 01:01:13,550 --> 01:01:14,880 The characters remaining. 1193 01:01:14,880 --> 01:01:19,550 So in the same way, we want to start by initializing variables 1194 01:01:19,550 --> 01:01:22,030 that actually hold onto those elements. 1195 01:01:22,030 --> 01:01:22,890 OK? 1196 01:01:22,890 --> 01:01:29,930 So if we have some var that is our text area, 1197 01:01:29,930 --> 01:01:33,681 and we have some var that is remaining. 1198 01:01:33,681 --> 01:01:34,180 Right? 1199 01:01:34,180 --> 01:01:36,190 So these are going to hold those two things. 1200 01:01:36,190 --> 01:01:42,370 So the same sort of thing, document dot-- OK, I'm 1201 01:01:42,370 --> 01:01:45,920 going to make sure this is going to work this time. 1202 01:01:45,920 --> 01:01:49,620 I am very adamant. 1203 01:01:49,620 --> 01:01:53,310 OK, so if we want our text area, according 1204 01:01:53,310 --> 01:01:55,710 to our HTML, what's our identifier? 1205 01:01:55,710 --> 01:01:56,420 What's our Id? 1206 01:01:56,420 --> 01:01:59,500 1207 01:01:59,500 --> 01:02:05,540 It's just going to be text because this creates our text area, OK, 1208 01:02:05,540 --> 01:02:10,320 and our Id is text, so that's how we can grab what's in there. 1209 01:02:10,320 --> 01:02:12,130 OK, semicolon. 1210 01:02:12,130 --> 01:02:13,940 I'm going to be super precise about this, 1211 01:02:13,940 --> 01:02:16,300 because I want this to work this time. 1212 01:02:16,300 --> 01:02:22,120 OK, do the same thing, get element by Id. 1213 01:02:22,120 --> 01:02:25,970 I'm really wondering what has caused the other two to mess up. 1214 01:02:25,970 --> 01:02:29,750 OK, then in this one, what do we want to access? 1215 01:02:29,750 --> 01:02:30,760 What's our Id here? 1216 01:02:30,760 --> 01:02:33,980 1217 01:02:33,980 --> 01:02:36,261 We have another Id in our HTML, what is it? 1218 01:02:36,261 --> 01:02:37,552 AUDIENCE: Characters remaining. 1219 01:02:37,552 --> 01:02:39,343 ALLISON BUCHHOLTZ-AU: Characters remaining. 1220 01:02:39,343 --> 01:02:43,360 1221 01:02:43,360 --> 01:02:44,330 >> OK. 1222 01:02:44,330 --> 01:02:46,010 Cool. 1223 01:02:46,010 --> 01:02:49,800 So I'm just going to write this really fast. 1224 01:02:49,800 --> 01:02:53,706 1225 01:02:53,706 --> 01:02:55,330 I'm just going to write this in second. 1226 01:02:55,330 --> 01:02:56,190 So text area. 1227 01:02:56,190 --> 01:02:59,550 1228 01:02:59,550 --> 01:03:06,180 What's interesting is B function-- there are lots of functions that not only 1229 01:03:06,180 --> 01:03:09,690 correspond to your mouse, but your keyboard. 1230 01:03:09,690 --> 01:03:10,190 OK? 1231 01:03:10,190 --> 01:03:16,540 So you can say when any key is pressed, you can do things like that. 1232 01:03:16,540 --> 01:03:20,450 So the one that we're using is called on key up, which 1233 01:03:20,450 --> 01:03:25,320 says, "if you've pressed any key on your keyboard, when the user has lifted 1234 01:03:25,320 --> 01:03:28,064 their finger off that button, and the key has become unpressed, 1235 01:03:28,064 --> 01:03:29,480 then we're going to do something." 1236 01:03:29,480 --> 01:03:29,980 OK? 1237 01:03:29,980 --> 01:03:31,370 So this makes sense, right? 1238 01:03:31,370 --> 01:03:33,540 Because every character we type, we're going 1239 01:03:33,540 --> 01:03:36,550 to have to lift our fingers off of it, so when the key goes up, 1240 01:03:36,550 --> 01:03:40,980 we can know to decrement our characters remaining. 1241 01:03:40,980 --> 01:03:44,440 >> So we have some on key up, and in the same way, 1242 01:03:44,440 --> 01:03:47,480 we're going to say, "OK, when we do that, we 1243 01:03:47,480 --> 01:03:55,110 are going to create some function that is going to take e," in this case, 1244 01:03:55,110 --> 01:03:58,800 and what we want to do is calculate the number remaining. 1245 01:03:58,800 --> 01:04:02,510 OK, so let's just start by creating a variable. 1246 01:04:02,510 --> 01:04:05,830 So we have some variable r, that's going to represent 1247 01:04:05,830 --> 01:04:07,720 how many characters we have left. 1248 01:04:07,720 --> 01:04:08,890 OK? 1249 01:04:08,890 --> 01:04:14,540 We know that we start with 140, and if we want to know, 1250 01:04:14,540 --> 01:04:18,360 let's say, the length of this string that's been input, 1251 01:04:18,360 --> 01:04:20,860 do you guys have any idea how we might do that? 1252 01:04:20,860 --> 01:04:23,900 Just based off of the obvious things, like if we wanted hours, 1253 01:04:23,900 --> 01:04:25,870 we used get hours. 1254 01:04:25,870 --> 01:04:28,860 We know that our object is text area, but could you guys 1255 01:04:28,860 --> 01:04:33,050 think of what might come after it? 1256 01:04:33,050 --> 01:04:35,280 Any ideas? 1257 01:04:35,280 --> 01:04:41,730 >> So this one's kind of less intuitive, but it's value dot length. 1258 01:04:41,730 --> 01:04:44,700 So just give me some value attribute that 1259 01:04:44,700 --> 01:04:46,500 is actually the length of this string. 1260 01:04:46,500 --> 01:04:50,340 So it's going to say, "OK, I'm looking at this entire string within text area, 1261 01:04:50,340 --> 01:04:52,730 and I'm going to tell you how long it is." 1262 01:04:52,730 --> 01:04:55,500 Because if we remember strings are really just arrays, 1263 01:04:55,500 --> 01:04:58,110 so we can just take the length of them. 1264 01:04:58,110 --> 01:05:01,860 So we have that. 1265 01:05:01,860 --> 01:05:04,058 Cool. 1266 01:05:04,058 --> 01:05:09,360 >> Then what we want to do is we never want to allow the user 1267 01:05:09,360 --> 01:05:12,340 to input more than 140 characters, right? 1268 01:05:12,340 --> 01:05:15,610 Because if we say like, "oh, you only have this much remaining," 1269 01:05:15,610 --> 01:05:20,522 and then let them do that anyways, we've been lying. 1270 01:05:20,522 --> 01:05:22,230 And this is another thing that JavaScript 1271 01:05:22,230 --> 01:05:24,530 can be really good for, is user validation 1272 01:05:24,530 --> 01:05:29,062 and making sure that your user fits within any rules 1273 01:05:29,062 --> 01:05:30,270 that you've provided to them. 1274 01:05:30,270 --> 01:05:36,020 So if you want to do things like making sure someone input their email address, 1275 01:05:36,020 --> 01:05:40,242 or making sure that when they enter two passwords, they matched. 1276 01:05:40,242 --> 01:05:41,200 JavaScript can do that. 1277 01:05:41,200 --> 01:05:44,010 You would do something like, "when the form is submitted," or like, 1278 01:05:44,010 --> 01:05:48,170 "when Submit Form button is clicked, check all these things." 1279 01:05:48,170 --> 01:05:49,670 And we can do that JavaScript. 1280 01:05:49,670 --> 01:05:52,680 So that's just what we're going to do here. 1281 01:05:52,680 --> 01:05:57,810 >> So what might be a way to check if they've gone over 140 characters? 1282 01:05:57,810 --> 01:06:03,310 What's going to happen to our value of r if they try? 1283 01:06:03,310 --> 01:06:04,760 It's going to be negative, right? 1284 01:06:04,760 --> 01:06:07,380 Or it's going to be less than or equal to zero. 1285 01:06:07,380 --> 01:06:13,690 So we can use an if that is just like everything else. 1286 01:06:13,690 --> 01:06:14,270 OK? 1287 01:06:14,270 --> 01:06:20,480 And we have some text area dot value, and what we're doing here 1288 01:06:20,480 --> 01:06:29,940 is we're just cutting-- what is it? 1289 01:06:29,940 --> 01:06:30,900 Sorry. 1290 01:06:30,900 --> 01:06:32,732 This one, we just want to return false. 1291 01:06:32,732 --> 01:06:34,030 I got confused. 1292 01:06:34,030 --> 01:06:36,560 All frazzled from things not working. 1293 01:06:36,560 --> 01:06:40,010 OK, we just want to return false, and then we 1294 01:06:40,010 --> 01:06:44,160 want to display the remaining characters, right? 1295 01:06:44,160 --> 01:06:48,720 So with the clock, we did something with inner HTML, right? 1296 01:06:48,720 --> 01:06:52,070 Where we set it equal to some variable, so what might we do here? 1297 01:06:52,070 --> 01:06:54,590 1298 01:06:54,590 --> 01:06:57,750 What are we changing the inner HTML of? 1299 01:06:57,750 --> 01:07:02,843 1300 01:07:02,843 --> 01:07:03,780 >> AUDIENCE: Remaining? 1301 01:07:03,780 --> 01:07:05,738 >> ALLISON BUCHHOLTZ-AU: We're changing remaining. 1302 01:07:05,738 --> 01:07:09,217 1303 01:07:09,217 --> 01:07:11,300 All right, and what do we want to set it equal to? 1304 01:07:11,300 --> 01:07:14,440 1305 01:07:14,440 --> 01:07:18,437 It's going to be r, because that should be our characters remaining. 1306 01:07:18,437 --> 01:07:19,600 OK? 1307 01:07:19,600 --> 01:07:26,060 So I'm really nervous to see if this works now, but we'll see. 1308 01:07:26,060 --> 01:07:28,960 1309 01:07:28,960 --> 01:07:29,460 Leave this. 1310 01:07:29,460 --> 01:07:34,690 1311 01:07:34,690 --> 01:07:37,700 That's really fast. 1312 01:07:37,700 --> 01:07:38,970 [INAUDIBLE] OK. 1313 01:07:38,970 --> 01:07:44,574 1314 01:07:44,574 --> 01:07:45,990 Again, I'm just going to show you. 1315 01:07:45,990 --> 01:07:49,430 For whatever reason, mine decides not to work, 1316 01:07:49,430 --> 01:07:53,354 but what I will show you is that this is-- oh I was supposed to put that in. 1317 01:07:53,354 --> 01:07:57,470 OK, we notice the same sort of thing here, getting the text area. 1318 01:07:57,470 --> 01:08:01,070 >> Also, if you guy notice, if there's ever something you want to do, 1319 01:08:01,070 --> 01:08:04,080 and you don't know how to do it, just click View Page Source, 1320 01:08:04,080 --> 01:08:06,632 and they're going to tell you. 1321 01:08:06,632 --> 01:08:07,840 Sometimes it'll be encrypted. 1322 01:08:07,840 --> 01:08:11,147 For your pset, we encrypt everything, so it just looks like gibberish. 1323 01:08:11,147 --> 01:08:13,480 But if there's ever a really cool website that you like, 1324 01:08:13,480 --> 01:08:17,729 if you just click View Page Source, it's going to tell you how to do it. 1325 01:08:17,729 --> 01:08:20,770 So again, work smarter, not harder. 1326 01:08:20,770 --> 01:08:24,250 And as you see here, all of these things are the same. 1327 01:08:24,250 --> 01:08:31,930 this one here just takes some substring that, I forget exactly what this does. 1328 01:08:31,930 --> 01:08:36,980 But it obviously takes some substring of the value from zero to ten, 1329 01:08:36,980 --> 01:08:41,540 and returns false what should stop the user from inputting anymore, 1330 01:08:41,540 --> 01:08:46,040 and then obviously updates the inner HTML there. 1331 01:08:46,040 --> 01:08:47,410 >> Cool. 1332 01:08:47,410 --> 01:08:53,000 So big take aways from today, experiment, look at source code 1333 01:08:53,000 --> 01:08:58,359 because it's going to help you a lot, and everyone, sometimes JavaScript 1334 01:08:58,359 --> 01:09:03,200 can be hard to work with and doesn't always work the way you expect it to, 1335 01:09:03,200 --> 01:09:05,700 but just keep trying because I promise it will. 1336 01:09:05,700 --> 01:09:08,376 I promise all of these examples were working before class. 1337 01:09:08,376 --> 01:09:09,750 I don't understand what happened. 1338 01:09:09,750 --> 01:09:13,069 I literally have everything the same. 1339 01:09:13,069 --> 01:09:17,660 >> One more thing that I just want to show you guys that can be super useful 1340 01:09:17,660 --> 01:09:21,630 is in-- what was working before? 1341 01:09:21,630 --> 01:09:23,935 We got party to work, didn't we? 1342 01:09:23,935 --> 01:09:26,569 I think so. 1343 01:09:26,569 --> 01:09:27,069 Yes. 1344 01:09:27,069 --> 01:09:27,630 We did. 1345 01:09:27,630 --> 01:09:28,250 Awesome. 1346 01:09:28,250 --> 01:09:31,189 OK, so one thing that you guys should know 1347 01:09:31,189 --> 01:09:33,340 is the console log that I talked about. 1348 01:09:33,340 --> 01:09:37,040 So console dot log of hello. 1349 01:09:37,040 --> 01:09:40,430 So this is kind of the JavaScript equivalent of printf. 1350 01:09:40,430 --> 01:09:42,810 So if you ever want to inspect your variables 1351 01:09:42,810 --> 01:09:49,649 or see what's happening there, what you can do is, if we inspect element, 1352 01:09:49,649 --> 01:09:51,899 is what you want to go to, and you go to console, 1353 01:09:51,899 --> 01:09:53,770 you'll see that it printed hello. 1354 01:09:53,770 --> 01:09:55,750 >> So we could have it print whatever we wanted. 1355 01:09:55,750 --> 01:10:04,170 If we wanted it to print background dot style dot background, 1356 01:10:04,170 --> 01:10:08,454 we should be able to see the RGB triple that comes up. 1357 01:10:08,454 --> 01:10:11,140 Or not. 1358 01:10:11,140 --> 01:10:13,520 I forget exactly how you print a variable like that, 1359 01:10:13,520 --> 01:10:17,249 but you should be able to print out things like that. 1360 01:10:17,249 --> 01:10:19,040 That will be very useful for your pset when 1361 01:10:19,040 --> 01:10:23,330 you're trying to manipulate coordinates or whatnot. 1362 01:10:23,330 --> 01:10:25,270 So they also change this piece in class. 1363 01:10:25,270 --> 01:10:30,750 This is different from last years, so just be nice to your TFs, or the TFs 1364 01:10:30,750 --> 01:10:36,350 at office hours rather, because we're kind of learning along with you guys. 1365 01:10:36,350 --> 01:10:41,230 But the console log was super, super helpful for JavaScript last year. 1366 01:10:41,230 --> 01:10:42,740 So love it. 1367 01:10:42,740 --> 01:10:43,780 Learn how to use it. 1368 01:10:43,780 --> 01:10:49,026 It's easier to use than GDB, so that should be at least a plus point. 1369 01:10:49,026 --> 01:10:50,650 But thank you guys are bearing with me. 1370 01:10:50,650 --> 01:10:53,400 I'm sorry that my examples for some reason 1371 01:10:53,400 --> 01:10:55,410 just did not want to cooperate with me, but I 1372 01:10:55,410 --> 01:11:01,010 hope that it helped kind of get you a little more in the zone of JavaScript. 1373 01:11:01,010 --> 01:11:04,980 And send me all your questions for next week so I can be super repaired, 1374 01:11:04,980 --> 01:11:09,420 and I'll bring candy and even extra candy because this was ridiculous. 1375 01:11:09,420 --> 01:11:14,000 But you guys are great, and have an awesome week. 1376 01:11:14,000 --> 01:11:15,584