1 00:00:00,506 --> 00:00:08,836 [ Silence ] 2 00:00:09,336 --> 00:00:12,236 >> Alright everybody, welcome to out last and final walkthrough 3 00:00:12,296 --> 00:00:14,736 for our PSET 8 CS50 Shuttle. 4 00:00:15,106 --> 00:00:17,596 So this I would say is actually one of the hardest PSETs, 5 00:00:17,686 --> 00:00:20,166 not because, you know, the program behind is difficult, 6 00:00:20,166 --> 00:00:22,946 because this game is so fun that you can't stop playing it 7 00:00:23,126 --> 00:00:24,416 to actually finish the PSET. 8 00:00:24,466 --> 00:00:26,946 And you'll see what I mean once you actually get down to this. 9 00:00:27,346 --> 00:00:28,766 So this is the music for today. 10 00:00:29,176 --> 00:00:31,576 I really thought, "Oh, I'll just like play all my favorite songs 11 00:00:31,576 --> 00:00:33,266 and then realize that it's been Tommy's [phonetic] choice 12 00:00:33,266 --> 00:00:33,886 all semester." 13 00:00:33,886 --> 00:00:35,696 So I guess that's kind of redundant. 14 00:00:36,286 --> 00:00:39,596 So one more thing, if you have not join team Boden yet, 15 00:00:39,886 --> 00:00:42,846 I would highly recommend doing so at store.cs50.net 16 00:00:42,846 --> 00:00:45,766 and pick yourself up a Boden fever, a team Boden. 17 00:00:45,926 --> 00:00:49,746 Some part of this clothing, we have t-shirts, sweatshirts, 18 00:00:49,746 --> 00:00:52,026 we're expanding the team Boden line with everyday. 19 00:00:52,156 --> 00:00:55,666 So today, I will be covering JavaScripts 20 00:00:55,746 --> 00:00:57,536 so if I'm overly excited, that's why, 21 00:00:57,916 --> 00:00:59,966 as well as the district code for this PSET 22 00:00:59,966 --> 00:01:03,026 and the three things you'll need to do to implement CS50 Shuttle. 23 00:01:03,136 --> 00:01:06,286 So just full disclaimer, 24 00:01:06,586 --> 00:01:09,856 JavaScript is literally the best programming language ever. 25 00:01:10,066 --> 00:01:12,666 As you're writing it you'll be so happy it just feels so good 26 00:01:12,666 --> 00:01:14,696 to write JavaScript and if anyone ever tries you 27 00:01:14,696 --> 00:01:17,186 to tell you, otherwise, they're completely wrong, 28 00:01:17,396 --> 00:01:19,286 and you learn that here in CS50. 29 00:01:20,606 --> 00:01:23,546 So a little bit of history because I love this so much, 30 00:01:23,716 --> 00:01:25,416 so JavaScript is not Java. 31 00:01:25,416 --> 00:01:27,936 So there's a really common misconception outside 32 00:01:27,936 --> 00:01:28,936 of the programming world, 33 00:01:28,936 --> 00:01:32,286 but people who think Java is just short for JavaScript 34 00:01:32,286 --> 00:01:34,516 when really they are two completely different languages. 35 00:01:34,676 --> 00:01:37,346 But back in the day when Netscape Navigator was huge, 36 00:01:37,536 --> 00:01:38,776 which is a really long time ago, 37 00:01:38,956 --> 00:01:40,966 it's just basically just a marketing ploy because Java was 38 00:01:40,966 --> 00:01:42,586 like the hot new language and so the people 39 00:01:42,586 --> 00:01:44,466 who made JavaScript are like, yeah, let's just like jump 40 00:01:44,466 --> 00:01:46,786 on the Java bus and put that on the top of our language. 41 00:01:47,006 --> 00:01:49,076 So Java and JavaScript really have nothing to do 42 00:01:49,076 --> 00:01:52,136 with each other, just a bit of history of why we have Java 43 00:01:52,136 --> 00:01:53,246 at the beginning of JavaScript, 44 00:01:53,896 --> 00:01:56,486 because programmers drink coffee a lot I guess. 45 00:01:56,686 --> 00:01:59,906 So last week we took a look at PHP which was also awesome 46 00:01:59,906 --> 00:02:03,146 because it's PHP stands for PHP. 47 00:02:03,146 --> 00:02:05,906 So this was a server side programming language, right. 48 00:02:05,906 --> 00:02:08,876 So when you write a PHP file, your server is gonna find 49 00:02:08,876 --> 00:02:11,926 that PHP file, execute it, and produce some output. 50 00:02:12,326 --> 00:02:14,666 Then it's gonna send that output to the client 51 00:02:14,856 --> 00:02:16,066 or basically the web browser, 52 00:02:16,066 --> 00:02:17,516 the person who is accessing the site. 53 00:02:17,936 --> 00:02:21,156 So when you access a site that's written in PHP on your laptop, 54 00:02:21,236 --> 00:02:23,656 your laptop isn't actually running any PHP code. 55 00:02:23,856 --> 00:02:27,966 Instead, some server on some boat data center somewhere is 56 00:02:27,966 --> 00:02:30,336 actually running the code and sending it to your browser. 57 00:02:30,566 --> 00:02:33,646 JavaScript on the other hand is actually running on your laptop. 58 00:02:34,036 --> 00:02:36,656 So JavaScript is not going to be evaluated on this server, 59 00:02:36,796 --> 00:02:37,856 but rather the server is going 60 00:02:37,856 --> 00:02:39,286 to send you some JavaScript code. 61 00:02:39,446 --> 00:02:42,206 And as you're viewing the page, the browser is gonna execute it 62 00:02:42,646 --> 00:02:44,426 and do it whatever it is that JavaScript, 63 00:02:44,426 --> 00:02:46,746 but the JavaScript is telling the browser to do it. 64 00:02:47,096 --> 00:02:47,986 And so that's what we mean 65 00:02:47,986 --> 00:02:50,556 when we say PHP is server side 'cause it's being executed 66 00:02:50,556 --> 00:02:51,136 on the server. 67 00:02:51,326 --> 00:02:53,346 JavaScript is client side, it's being executed 68 00:02:53,346 --> 00:02:55,486 on our browser, make sense? 69 00:02:56,506 --> 00:02:58,536 So this is not to say JavaScript cannot be executed 70 00:02:58,536 --> 00:03:00,506 on the server, which it can then that's starting 71 00:03:00,506 --> 00:03:02,916 to gain some ground in the tech world but we're just not going 72 00:03:02,916 --> 00:03:04,596 to be doing that for the purposes of this course. 73 00:03:04,596 --> 00:03:09,266 So the syntax for JavaScript, just like PHP, is very similar 74 00:03:09,266 --> 00:03:10,106 to what we've seen so far. 75 00:03:10,456 --> 00:03:13,096 We still have our if's or else's or for's, our while's or, 76 00:03:13,356 --> 00:03:15,106 you know, all the other things we're used to. 77 00:03:15,336 --> 00:03:17,226 What we don't have anymore is dollar sign in front 78 00:03:17,226 --> 00:03:18,416 of our variables, woo. 79 00:03:18,766 --> 00:03:21,756 And we also have strings built into the language, 80 00:03:21,816 --> 00:03:23,556 so no longer dealing with pointers and mallocs. 81 00:03:23,836 --> 00:03:26,396 But we do get strings just like what we had in PHP. 82 00:03:26,396 --> 00:03:28,456 So again we can compare the two strings just the equals 83 00:03:28,456 --> 00:03:30,386 operator, and we probably want to. 84 00:03:30,986 --> 00:03:33,516 So also like in PHP, we don't need 85 00:03:33,516 --> 00:03:35,836 to explicitly declare the types for our variables. 86 00:03:35,836 --> 00:03:37,376 We don't need to say, "Index equals 5." 87 00:03:37,666 --> 00:03:38,746 We just say, "X equals 5" 88 00:03:38,746 --> 00:03:40,666 and because JavaScript is the best programming language ever, 89 00:03:40,836 --> 00:03:42,566 it's gonna figure out that X is an integer. 90 00:03:43,176 --> 00:03:45,186 Similarly, if our functions, we're just gonna say the word 91 00:03:45,186 --> 00:03:46,756 "function" and JavaScript is awesome enough 92 00:03:46,756 --> 00:03:48,136 to know what you mean by that. 93 00:03:49,256 --> 00:03:50,776 So there are few different ways 94 00:03:50,776 --> 00:03:52,966 that we can actually get JavaScript onto our page. 95 00:03:52,966 --> 00:03:54,816 When we take look at CSS, we saw you can embed CSS. 96 00:03:54,816 --> 00:03:56,136 You could link in your CSS. 97 00:03:56,526 --> 00:03:58,176 We can do the same thing with JavaScript. 98 00:03:58,716 --> 00:04:01,376 So with CSS, we have the style tag and inside 99 00:04:01,376 --> 00:04:03,636 of the style tag that's where we could put all of our CSS. 100 00:04:03,636 --> 00:04:06,966 So with JavaScript, we just have this script tag. 101 00:04:06,966 --> 00:04:09,216 Inside of the script tag, we can put all of the JavaScript 102 00:04:09,216 --> 00:04:10,286 that we want for our page. 103 00:04:10,766 --> 00:04:13,326 Now if we don't wanna put it all in this one HTML file, 104 00:04:13,426 --> 00:04:14,396 which in a lot of case we don't 105 00:04:14,396 --> 00:04:16,756 because that's gonna get really unwieldy really fast. 106 00:04:17,406 --> 00:04:19,686 We can put all of our JavaScript in one file. 107 00:04:20,026 --> 00:04:22,036 If we just say, you know, something like file.js, 108 00:04:22,676 --> 00:04:25,186 we can link in that JavaScript file by saying "script" 109 00:04:25,186 --> 00:04:26,386 so that's just that same script tag. 110 00:04:26,386 --> 00:04:28,736 And then the source attribute is going to point 111 00:04:28,736 --> 00:04:30,346 to you wherever that file lives. 112 00:04:30,986 --> 00:04:33,176 So just like in CSS, we send link href, 113 00:04:33,506 --> 00:04:34,836 now we're saying script source. 114 00:04:35,176 --> 00:04:37,956 Unfortunately, you can't just say script source 115 00:04:38,006 --> 00:04:39,676 and then have the closing tags so you can-- 116 00:04:39,676 --> 00:04:42,176 that little shortcut we saw to avoid having that nscript, 117 00:04:42,406 --> 00:04:45,396 you have to explicitly close that tag, have nothing 118 00:04:45,396 --> 00:04:46,716 and then have a close script tag. 119 00:04:47,226 --> 00:04:50,476 So it's kinda lame but that's the way it is. 120 00:04:50,606 --> 00:04:52,296 So let's just take a look at some examples 121 00:04:52,296 --> 00:04:53,906 of getting some JavaScript on our page. 122 00:04:53,906 --> 00:04:56,156 So here's an example of HTML file. 123 00:04:57,306 --> 00:04:58,616 So we all-- we've all seen this before, 124 00:04:58,616 --> 00:04:59,936 just really basic skill and structure. 125 00:05:00,186 --> 00:05:02,436 So you notice here I have a two script tags. 126 00:05:02,696 --> 00:05:04,286 So the first of these is going to look 127 00:05:04,286 --> 00:05:07,526 at some file called simple.js, it's going to live 128 00:05:07,526 --> 00:05:09,666 in the same directory as this HTML file. 129 00:05:10,316 --> 00:05:13,526 So simple.js just looks like this. 130 00:05:13,526 --> 00:05:17,686 So this alert function is how we see those annoying pop-ups. 131 00:05:17,686 --> 00:05:20,196 So you can just say pass this function some string 132 00:05:20,336 --> 00:05:23,166 and the browser is gonna display a pop-up containing that string. 133 00:05:24,176 --> 00:05:26,766 So here we also define a function, it's called add, 134 00:05:26,766 --> 00:05:30,016 it's gonna add two variables A and B, just return their sum. 135 00:05:30,566 --> 00:05:32,356 So that's all that simple JS does. 136 00:05:33,706 --> 00:05:35,386 So now, inside of this other script tag, 137 00:05:35,386 --> 00:05:37,916 we're just gonna declare two variables and now we're going 138 00:05:37,916 --> 00:05:41,176 to use this function "add" that we declare it in simple.js. 139 00:05:41,416 --> 00:05:45,386 So you notice, just like include dot-- including an .h file, 140 00:05:45,386 --> 00:05:47,556 kind of copy-pasted the file into the current file. 141 00:05:47,846 --> 00:05:50,186 It's a same thing with the script source. 142 00:05:50,516 --> 00:05:54,316 Everything that we wrote inside of simple.js is now accessible 143 00:05:54,316 --> 00:05:57,366 to us inside of this HTML file and inside 144 00:05:57,366 --> 00:05:59,866 of any other java script file that we include after it. 145 00:06:00,456 --> 00:06:03,116 So because we define this function "add" inside 146 00:06:03,116 --> 00:06:06,236 of simple.js, we've pulled in simple.js already, 147 00:06:06,456 --> 00:06:08,516 that's why we can access this function and use it. 148 00:06:09,406 --> 00:06:12,186 So inside of simple.js, we just use this alert 149 00:06:12,526 --> 00:06:13,876 to display message to the user 150 00:06:13,966 --> 00:06:16,806 where now we're using this other function console.log. 151 00:06:16,956 --> 00:06:18,996 And so this is basically a nicer form of alert 152 00:06:18,996 --> 00:06:21,176 because you can pass this really anything and it's going 153 00:06:21,176 --> 00:06:22,616 to output it in a really smart way, 154 00:06:23,146 --> 00:06:25,046 but this is basically just going to write something 155 00:06:25,046 --> 00:06:26,056 to your debug console. 156 00:06:26,056 --> 00:06:29,296 So you don't have to keep clicking okay 157 00:06:29,296 --> 00:06:31,526 on pop-ups every time you wanna try to figure something out. 158 00:06:31,976 --> 00:06:33,476 So let's actually open this up. 159 00:06:33,936 --> 00:06:35,696 So just like-- Oh, by the way, 160 00:06:35,696 --> 00:06:38,496 so this is what our CS50 Shuttle will look like once-- 161 00:06:38,496 --> 00:06:39,956 if you haven't downloaded the code yet, 162 00:06:39,956 --> 00:06:42,586 you can get really good at it if you look 163 00:06:42,586 --> 00:06:44,476 at the bottom right corner and stuff like that. 164 00:06:44,696 --> 00:06:45,166 Yeah, it's Mark. 165 00:06:45,166 --> 00:06:47,866 So if you wanna play with the stuff implementation, 166 00:06:47,866 --> 00:06:49,966 you could just go to shuttle.cs50.net 167 00:06:51,076 --> 00:06:51,846 and you'll notice here 168 00:06:51,846 --> 00:06:55,026 that we've implemented pretty much all of the extra features 169 00:06:55,026 --> 00:06:57,006 on the PSETs, so you don't need to worry about things 170 00:06:57,006 --> 00:06:59,536 like speed, time remaining, and points if you don't choose 171 00:06:59,536 --> 00:07:01,956 to implement those features ultimately in your own version. 172 00:07:03,366 --> 00:07:07,406 So back to JavaScript, so if I go to-- the same as before, 173 00:07:07,406 --> 00:07:12,826 if I go up to 192.168 and tell the J [phonetic] Harvard 174 00:07:12,826 --> 00:07:15,096 and then I just called this file simple.html. 175 00:07:15,686 --> 00:07:18,706 So here we go. 176 00:07:19,146 --> 00:07:21,626 So the first thing that executed was this pop-up. 177 00:07:22,056 --> 00:07:25,896 Why? Well, I'd pulled in this simple.js first. 178 00:07:26,326 --> 00:07:28,626 So as soon I as pulled in my JavaScript file, 179 00:07:28,826 --> 00:07:30,516 it's immediately going to be executed. 180 00:07:30,996 --> 00:07:33,046 So this alert didn't lie inside of some-- 181 00:07:33,046 --> 00:07:35,336 into main or something but because we've pulled 182 00:07:35,336 --> 00:07:37,766 in this file, that line of code is being executed, 183 00:07:37,766 --> 00:07:40,426 so that's why we've got immediately a pop-up before we 184 00:07:40,426 --> 00:07:42,386 even see any content on the page, right, 185 00:07:42,386 --> 00:07:43,616 this is still blank behind it. 186 00:07:44,966 --> 00:07:48,026 So now that [inaudible] of the page just says simple.html, 187 00:07:48,966 --> 00:07:52,016 so that output from the add function is going 188 00:07:52,016 --> 00:07:53,596 to be located in the debug console. 189 00:07:53,726 --> 00:07:55,116 So if you're using Chrome on a mac, 190 00:07:55,116 --> 00:07:59,246 you can hit command option J. If not, you can install Firebug 191 00:07:59,246 --> 00:08:01,376 and Firefox which should be pre-installed in the appliance, 192 00:08:01,426 --> 00:08:03,546 you can acts-- look for the developer console. 193 00:08:03,746 --> 00:08:05,246 Now, basically have this little thing, 194 00:08:05,606 --> 00:08:07,616 we can evaluate JavaScript. 195 00:08:07,736 --> 00:08:10,146 So when I say console.log and I added the numbers 5 196 00:08:10,146 --> 00:08:11,826 and 10 that spit out 15. 197 00:08:12,246 --> 00:08:14,686 So when I called console.log on anything, doesn't have 198 00:08:14,686 --> 00:08:16,816 to be a string, I've called it on integer in this case, 199 00:08:16,986 --> 00:08:17,756 it's gonna print here. 200 00:08:18,586 --> 00:08:19,766 So it's really, really handy. 201 00:08:20,036 --> 00:08:21,366 You can actually play 202 00:08:21,366 --> 00:08:23,206 around with JavaScript inside of this console. 203 00:08:23,506 --> 00:08:27,416 So if I wanna say something like var C equals 4, I can say, 204 00:08:27,416 --> 00:08:31,366 what's the value of C plus 5, I can just do so 205 00:08:31,366 --> 00:08:33,676 and I can basically evaluate JavaScript right here. 206 00:08:33,676 --> 00:08:36,226 So I don't need to go into my file and edit it and save it 207 00:08:36,226 --> 00:08:38,356 and reload the page if it's just something quick like, "Oh, 208 00:08:38,356 --> 00:08:39,666 what's the syntax for doing this." 209 00:08:39,966 --> 00:08:41,516 You can just try out things inside 210 00:08:41,516 --> 00:08:42,506 of this developer console. 211 00:08:42,756 --> 00:08:44,466 This will work on both Chrome and Firefox. 212 00:08:44,786 --> 00:08:46,126 I personally recommend Chrome 213 00:08:46,126 --> 00:08:48,886 but I don't think I can use CS50 to endorse that. 214 00:08:49,936 --> 00:08:52,646 So, questions on basic JavaScript principles 215 00:08:52,646 --> 00:08:57,056 or getting it into our page? 216 00:08:57,236 --> 00:09:00,776 Alright, so let's move on. 217 00:09:01,066 --> 00:09:04,096 So erasing JavaScript, we can create a number of ways. 218 00:09:04,606 --> 00:09:06,256 So, one way to do so in the way that we've done 219 00:09:06,256 --> 00:09:08,506 on the problem set is to use this array function. 220 00:09:08,996 --> 00:09:11,396 You notice it takes one argument and it's going 221 00:09:11,396 --> 00:09:14,816 to return an array of link 5 in this case. 222 00:09:14,816 --> 00:09:16,716 So link whatever it is you pass in. 223 00:09:17,366 --> 00:09:20,176 So now I can access this array, just like I would in any 224 00:09:20,176 --> 00:09:21,806 of the programming language, I can-- well, any other, 225 00:09:21,806 --> 00:09:24,596 but the ones you've seen so far, I can just say A bracket 0 226 00:09:24,596 --> 00:09:26,286 and that's going to be the first element of my array. 227 00:09:27,266 --> 00:09:29,776 So just like PHP, my arrays can have multiple types. 228 00:09:30,276 --> 00:09:32,336 So here I've inserted an integer and then a string, 229 00:09:32,376 --> 00:09:33,706 and that's totally okay. 230 00:09:34,936 --> 00:09:38,176 So we also have a little bit of a short hand notation 231 00:09:38,416 --> 00:09:41,476 for creating arrays, if I say something, 232 00:09:41,476 --> 00:09:43,926 just var b equals open bracket close bracket, 233 00:09:44,216 --> 00:09:46,746 I just created an array of size 0. 234 00:09:47,076 --> 00:09:48,146 There's nothing inside of it yet. 235 00:09:48,836 --> 00:09:50,336 If instead I want to create an array 236 00:09:50,336 --> 00:09:51,646 and pre-initialized some element, 237 00:09:51,646 --> 00:09:55,526 I can just say something like var C equals bracket 1, 2, 3, 4. 238 00:09:55,976 --> 00:10:00,516 And so now I've created an array of size 4 where the indices 0 239 00:10:00,516 --> 00:10:02,976 through 3 are the numbers 1 through 4. 240 00:10:03,656 --> 00:10:05,166 >> So you notice in this middle line here, 241 00:10:05,336 --> 00:10:08,046 I'm arbitrarily saying I want the 4th element of B-- 242 00:10:08,046 --> 00:10:10,576 or index 3 to be this value here. 243 00:10:11,296 --> 00:10:13,306 So you'll notice that that I didn't actually give B an 244 00:10:13,306 --> 00:10:15,516 explicit size but here I am trying 245 00:10:15,516 --> 00:10:16,966 to access an element inside of it. 246 00:10:17,606 --> 00:10:19,866 So the C program inside of you should say, "segfault." 247 00:10:20,296 --> 00:10:22,716 But no JavaScript is the best program and language ever. 248 00:10:22,716 --> 00:10:25,116 And once you accept that you can do things like this. 249 00:10:25,746 --> 00:10:29,006 So what this will actually do is take this array, so okay, 250 00:10:29,006 --> 00:10:30,416 it's now has a size of 0. 251 00:10:30,596 --> 00:10:33,526 Well, this guy wants to access the 4th element, no problem, 252 00:10:33,526 --> 00:10:35,046 now it has 4 elements. 253 00:10:35,436 --> 00:10:38,116 The first 3 elements of this array are just undefined. 254 00:10:38,156 --> 00:10:38,786 They're just null. 255 00:10:38,786 --> 00:10:39,416 You know, who cares. 256 00:10:39,416 --> 00:10:40,446 You haven't tried to access them yet. 257 00:10:40,656 --> 00:10:43,366 But the 4th element of this array is now the value 258 00:10:43,366 --> 00:10:43,986 we specified. 259 00:10:44,406 --> 00:10:46,296 So really no segfault in JavaScript 260 00:10:46,296 --> 00:10:47,386 because it's too smart for that. 261 00:10:48,046 --> 00:10:49,146 Make sense? 262 00:10:50,166 --> 00:10:51,366 I'm converting you slowly. 263 00:10:52,786 --> 00:10:55,406 So just like in PHP we have associative arrays. 264 00:10:55,406 --> 00:10:57,546 So these key value pairs, we have that kind 265 00:10:57,546 --> 00:10:59,086 of awkward syntax for declaring them. 266 00:10:59,086 --> 00:11:02,226 We had to say like, equal sign greater than, which is different 267 00:11:02,226 --> 00:11:04,726 than hyphen greater than even though they're both arrows. 268 00:11:05,216 --> 00:11:07,346 So we can do the same thing inside of JavaScript. 269 00:11:07,736 --> 00:11:10,556 So whereas with in array, we have that shorthand notation 270 00:11:10,556 --> 00:11:13,636 of saying, open bracket close bracket to create an object 271 00:11:13,636 --> 00:11:16,306 or an associative array, we have this shorthand notation 272 00:11:16,306 --> 00:11:17,936 of open brace close brace. 273 00:11:17,936 --> 00:11:20,306 So, we could also use the function object, 274 00:11:20,376 --> 00:11:22,196 with a capital O, and that would be the same thing 275 00:11:22,196 --> 00:11:23,746 as this open brace close brace. 276 00:11:24,166 --> 00:11:25,936 But now that I have an associative array-- 277 00:11:26,606 --> 00:11:29,646 well, I can say something like I wanna set this key equal 278 00:11:29,646 --> 00:11:32,226 to some value where this key needs to be a string, 279 00:11:32,226 --> 00:11:33,936 just like it was in PHP. 280 00:11:34,056 --> 00:11:36,546 And if you want to have that shorthand initialization, 281 00:11:36,546 --> 00:11:39,106 we don't need to type the word array in that weird arrow again, 282 00:11:39,226 --> 00:11:40,636 we can just do something like this. 283 00:11:40,966 --> 00:11:43,186 So I say var 'cause I'm creating new variable, 284 00:11:43,586 --> 00:11:44,646 I'm calling this variable TF, 285 00:11:44,646 --> 00:11:47,136 it's gonna be an associative array because I'm starting off 286 00:11:47,136 --> 00:11:50,126 with these braces, now the first key, it has 2 keys. 287 00:11:50,286 --> 00:11:52,946 The first key is called name and that's just a string. 288 00:11:53,356 --> 00:11:55,126 And it also has a key called "coolness" 289 00:11:55,416 --> 00:11:56,496 which is just an integer. 290 00:11:57,506 --> 00:11:59,246 So this is a lot faster than typing array 291 00:11:59,246 --> 00:12:00,046 in that awkward arrow. 292 00:12:01,016 --> 00:12:02,126 Make sense? 293 00:12:02,916 --> 00:12:07,026 So we also have-- Before that, so reiterate over an array, 294 00:12:07,026 --> 00:12:09,566 we have very similar to PHP's for each, 295 00:12:09,706 --> 00:12:12,216 we have the for in construction in JavaScript. 296 00:12:12,676 --> 00:12:16,466 So we can say for some variable that's gonna be our iterator 297 00:12:16,646 --> 00:12:20,296 inside of some array that I can do something with each element. 298 00:12:20,676 --> 00:12:24,546 Now in PHP, when we said for each array as something, 299 00:12:24,916 --> 00:12:26,046 that something is going 300 00:12:26,046 --> 00:12:28,436 to be the actual value inside of the array. 301 00:12:29,026 --> 00:12:32,786 In JavaScript, not so much, this "I" is going to be the index. 302 00:12:32,936 --> 00:12:37,126 So when I run this for loop, I is gonna be 0, 1, 2 not 1, 2, 3. 303 00:12:37,876 --> 00:12:40,336 So in order to actually access the ith element I need 304 00:12:40,336 --> 00:12:41,776 to say array bracket I. 305 00:12:41,926 --> 00:12:44,826 I can't just say I like we did in PHP. 306 00:12:44,826 --> 00:12:47,596 Next, this actually makes a lot more sense, of course, 307 00:12:47,976 --> 00:12:50,886 because if we could also use this for loop to iterate 308 00:12:50,886 --> 00:12:51,976 over an associative array. 309 00:12:52,426 --> 00:12:54,476 Now if we iterate over an associative array with this 310 00:12:54,476 --> 00:12:58,206 for loop, this I is going to be 0, 1, 2, but if we iterate 311 00:12:58,206 --> 00:13:01,056 over this TF, this I is going to be named coolness. 312 00:13:01,616 --> 00:13:03,946 So we can access the values associated with those keys 313 00:13:03,946 --> 00:13:08,206 in the same way, just TF bracket I. 314 00:13:08,276 --> 00:13:08,736 Questions? 315 00:13:10,006 --> 00:13:10,236 Yeah. 316 00:13:10,506 --> 00:13:12,406 >> Sorry. Could you repeat how it iterates through? 317 00:13:12,746 --> 00:13:15,536 >> Sure. So this I going to be-- 318 00:13:15,536 --> 00:13:17,716 to repeat how it iterates through, so this I is going 319 00:13:17,716 --> 00:13:20,046 to be the actual indices inside of this array. 320 00:13:20,416 --> 00:13:23,786 So it's basically saying for there I equal 0, 321 00:13:23,786 --> 00:13:26,206 I is less than array.length I plus plus 322 00:13:26,366 --> 00:13:27,566 which you can still say in JavaScript 323 00:13:27,566 --> 00:13:28,706 because it's the best. 324 00:13:28,706 --> 00:13:30,346 This is just a shorter way of expressing that. 325 00:13:30,776 --> 00:13:33,196 So this I is going to basically be what we're used 326 00:13:33,196 --> 00:13:35,176 to seeing this iterator variable as being. 327 00:13:35,176 --> 00:13:36,796 This index inside of the array, 328 00:13:36,796 --> 00:13:39,066 not the actual value at that index. 329 00:13:39,566 --> 00:13:40,556 Other questions? 330 00:13:40,556 --> 00:13:40,776 Yup. 331 00:13:40,776 --> 00:13:44,836 >> How does that work for the associative one? 332 00:13:45,026 --> 00:13:46,696 >> So how does this work with the associative array? 333 00:13:46,696 --> 00:13:47,556 So same thing. 334 00:13:47,556 --> 00:13:51,846 So if we're iterating over this TF, we're now-- 335 00:13:51,846 --> 00:13:54,366 this I is now going to become these 2 keys. 336 00:13:54,686 --> 00:13:56,766 So first it's going to be the string name. 337 00:13:57,096 --> 00:14:00,216 So if we say something like TF bracket I that's gonna be the 338 00:14:00,216 --> 00:14:02,596 same as saying TF bracket in quotes name 339 00:14:02,806 --> 00:14:05,846 which is gonna give us the value Tommy in this case. 340 00:14:06,626 --> 00:14:07,586 Other questions? 341 00:14:08,136 --> 00:14:14,216 Okay, so we actually have an even either shorter syntax 342 00:14:14,726 --> 00:14:16,216 for iterating over-- 343 00:14:16,716 --> 00:14:18,796 for accessing the elements of an associative array. 344 00:14:19,416 --> 00:14:22,126 So JavaScript actually says, well this associative arrays, 345 00:14:22,416 --> 00:14:23,976 they're really just these objects. 346 00:14:24,096 --> 00:14:26,666 So we first saw these objects inside of PSET 7, 347 00:14:26,666 --> 00:14:29,736 we had a stock object which is basically like a C struct 348 00:14:29,996 --> 00:14:32,296 and inside of those object, we have those various fields 349 00:14:32,296 --> 00:14:34,756 like stock price and stock name. 350 00:14:34,756 --> 00:14:38,216 So here, just like I get access the name-- 351 00:14:38,216 --> 00:14:41,386 the name element with TF quotes name, I can also just say TF dot 352 00:14:41,666 --> 00:14:43,826 and then whatever it is that I want to access. 353 00:14:44,646 --> 00:14:44,846 Yup? 354 00:14:45,196 --> 00:14:47,346 >> So you just say TF dot name and you have the same thing? 355 00:14:47,786 --> 00:14:49,686 >> Yes. So I could say, just TF dot name 356 00:14:49,686 --> 00:14:50,456 and give the same thing. 357 00:14:50,716 --> 00:14:52,746 So these 2 lines are just the 2 different ways 358 00:14:52,896 --> 00:14:54,846 of accessing the keys in your associative array. 359 00:14:54,886 --> 00:14:56,986 I personally think the second one is cooler. 360 00:14:57,386 --> 00:14:59,376 Other questions? 361 00:14:59,376 --> 00:14:59,466 Yup? 362 00:14:59,466 --> 00:15:00,546 >> [Inaudible] but how do the hash thing work 363 00:15:00,886 --> 00:15:03,016 with the associative array? 364 00:15:06,836 --> 00:15:07,376 Where you had a hash [inaudible]? 365 00:15:07,376 --> 00:15:08,526 >> Oh, so when I had a hash? 366 00:15:08,526 --> 00:15:11,236 So basically, when I create an associative array, 367 00:15:11,456 --> 00:15:13,586 that's basically the same as a hash table, remember. 368 00:15:14,186 --> 00:15:15,126 So I just use the word hash 369 00:15:15,126 --> 00:15:17,646 so we could remember how much fun we had in PSET 6. 370 00:15:17,896 --> 00:15:21,446 But all we're doing is mapping some key that has to be a string 371 00:15:21,646 --> 00:15:23,366 to some value which could be anything 372 00:15:23,366 --> 00:15:25,416 and how JavaScript actually is doing that, 373 00:15:25,416 --> 00:15:28,526 we don't really care, we can trust it because it's awesome. 374 00:15:28,736 --> 00:15:29,366 Other questions? 375 00:15:29,906 --> 00:15:30,006 Yup? 376 00:15:31,176 --> 00:15:36,076 >> If you wanted to like-- if you add, you know, third key-- 377 00:15:36,076 --> 00:15:39,746 you want like-- have like TF dot like how [inaudible] something 378 00:15:39,866 --> 00:15:43,026 and then could you just compare it when you [inaudible]? 379 00:15:43,026 --> 00:15:45,106 >> Exactly, so could we just add in a third key? 380 00:15:45,106 --> 00:15:47,536 We could. If I wanted to add an another key 381 00:15:48,046 --> 00:15:50,656 that says how good looking I was in addition to how cool I was, 382 00:15:50,886 --> 00:15:53,986 then I could just say TF dot good looking equals true 383 00:15:53,986 --> 00:15:54,846 or something like that. 384 00:15:55,096 --> 00:15:56,666 And so this is really, really powerful just 385 00:15:56,666 --> 00:15:58,426 like we can have dynamically-sized arrays, 386 00:15:58,426 --> 00:15:59,616 we could have the dynamically-sized 387 00:15:59,616 --> 00:16:00,436 associative arrays. 388 00:16:00,656 --> 00:16:02,726 We just say, well, take this key 389 00:16:02,726 --> 00:16:04,766 and if this key doesn't exist yet, make it right now 390 00:16:04,766 --> 00:16:06,666 and set it to the value that I want. 391 00:16:07,446 --> 00:16:08,466 Other questions? 392 00:16:09,016 --> 00:16:13,826 Okay, so let's just take an example-- 393 00:16:13,906 --> 00:16:15,656 let's just take a look at an example of this. 394 00:16:16,156 --> 00:16:18,846 So if you open up array [inaudible] HTML this time 395 00:16:19,206 --> 00:16:21,166 and I make sure I put all of this inside of the slides 396 00:16:21,166 --> 00:16:23,966 so I'll make PDFs of the source just like PDF you get back 397 00:16:24,256 --> 00:16:25,166 with your graded source code. 398 00:16:25,886 --> 00:16:28,436 So in this case, we don't have any script embedded inside 399 00:16:28,436 --> 00:16:30,156 of the HTML, we're just bringing 400 00:16:30,156 --> 00:16:32,496 in a single JavaScript file called arrays.js. 401 00:16:33,686 --> 00:16:38,146 So if we open that up-- so here we go. 402 00:16:38,146 --> 00:16:40,966 So now we're declaring 3 associative arrays. 403 00:16:41,546 --> 00:16:42,916 So you'll notice that all 3 404 00:16:42,916 --> 00:16:45,416 of these arrays have a key called name 405 00:16:45,416 --> 00:16:47,646 and in every case this name is just a string 406 00:16:47,646 --> 00:16:49,866 and they also have a key for grade. 407 00:16:50,416 --> 00:16:53,256 And so this grade is actually not just a value 408 00:16:53,406 --> 00:16:54,206 but it's a function. 409 00:16:55,276 --> 00:16:58,366 So if I say I want grade to be some function 410 00:16:58,366 --> 00:17:00,406 and this function doesn't take any inputs, 411 00:17:00,616 --> 00:17:03,746 all it does is return 5 because I'm the best TF ever 412 00:17:03,746 --> 00:17:05,836 and I give it all 5s. 413 00:17:05,836 --> 00:17:07,886 So now if we have another TF, again, 414 00:17:07,886 --> 00:17:10,296 we have the same 2 keys name and grade 415 00:17:10,506 --> 00:17:13,136 but this time we've defined grade a little bit differently. 416 00:17:13,456 --> 00:17:15,976 So if we scroll over here, you'll notice 417 00:17:16,206 --> 00:17:17,876 that Joseph is the worse TF ever 418 00:17:17,876 --> 00:17:19,616 and just assigns completely random grades 419 00:17:19,616 --> 00:17:20,476 to all of his students. 420 00:17:20,966 --> 00:17:23,456 So if I say in JavaScript math.random, that's going 421 00:17:23,456 --> 00:17:26,506 to return a random number between 0 and 1. 422 00:17:26,506 --> 00:17:30,486 So if I multiply that by 6 I'd effectively have a random number 423 00:17:30,486 --> 00:17:31,636 between 0 and 6. 424 00:17:31,996 --> 00:17:34,206 And so this math.floor is just like [inaudible], 425 00:17:34,206 --> 00:17:35,986 just says truncate all the decimal places 426 00:17:35,986 --> 00:17:37,486 and convert this decimal to an integer. 427 00:17:37,776 --> 00:17:40,636 And so now this is just going to return a random number between 0 428 00:17:40,636 --> 00:17:42,206 and 6 every time it's run. 429 00:17:43,376 --> 00:17:45,376 So now with each of these associative arrays, 430 00:17:45,836 --> 00:17:48,786 I can create an array of associative arrays. 431 00:17:48,786 --> 00:17:51,006 So here I have some array called TFs 432 00:17:51,006 --> 00:17:54,116 and I'm using this shorthand syntax to create it, 433 00:17:54,166 --> 00:17:57,376 so I say open bracket and then just a list of these 3 objects. 434 00:17:57,726 --> 00:17:58,946 So now TFs has a list-- 435 00:17:59,186 --> 00:18:01,886 is a list of length 3 and that could iterate 436 00:18:01,886 --> 00:18:03,676 over it now just with my for loops. 437 00:18:03,676 --> 00:18:07,186 So I say for there I inside of TFs. 438 00:18:07,186 --> 00:18:10,526 So for every TF, what I wanna do is I wanna print out their name 439 00:18:10,526 --> 00:18:14,206 and then in PHP, we needed to use dots to concatenate strings, 440 00:18:14,526 --> 00:18:17,116 and we all thought that was kind of dumb so JavaScript fix that 441 00:18:17,116 --> 00:18:19,856 and decided to use plus because adding 2 strings is basically 442 00:18:19,856 --> 00:18:20,876 the same as combining them. 443 00:18:21,246 --> 00:18:22,716 So I can add these strings together, 444 00:18:22,716 --> 00:18:25,626 so I'm gonna output the TF's name then just the colon 445 00:18:25,626 --> 00:18:28,516 and then I'm going to output what their grade is. 446 00:18:29,686 --> 00:18:30,106 Make sense? 447 00:18:30,706 --> 00:18:30,806 Yup? 448 00:18:32,046 --> 00:18:36,526 >> Okay, console.log that brings to the terminal index? 449 00:18:36,526 --> 00:18:41,596 >> Yeah, so console.log is going to print 450 00:18:41,596 --> 00:18:42,916 to the developer console 451 00:18:42,916 --> 00:18:45,196 or whatever it is your browser decided to call it. 452 00:18:45,326 --> 00:18:48,686 So if I'm in Chrome and I go up to the little wrench in the top, 453 00:18:49,016 --> 00:18:53,026 I click that and I go down to tools 454 00:18:53,026 --> 00:18:54,546 and that's gonna give me this menu 455 00:18:54,546 --> 00:18:56,776 and I can see this JavaScript console. 456 00:18:57,466 --> 00:18:59,496 So if I click that, that's gonna pull 457 00:18:59,496 --> 00:19:01,296 up this thing here at the bottom. 458 00:19:01,656 --> 00:19:03,546 And so I can do some other cool stuff like look 459 00:19:03,546 --> 00:19:05,526 at the HTML inside of my page or look at all the things 460 00:19:05,526 --> 00:19:07,956 that are being downloaded, but what we're concerned 461 00:19:07,956 --> 00:19:10,986 about with console.log is this thing down here. 462 00:19:11,736 --> 00:19:15,216 So that console.log printed out that 15 'cause it just printed 463 00:19:15,216 --> 00:19:16,696 out the result of adding 5 and 10 464 00:19:16,696 --> 00:19:18,816 and so there is the 15 from the console.log. 465 00:19:18,816 --> 00:19:21,666 >> I have another question. 466 00:19:21,666 --> 00:19:21,786 >> Oh sure. 467 00:19:21,936 --> 00:19:26,546 >> Going back to the JavaScript file. 468 00:19:26,776 --> 00:19:27,076 >> Yup. 469 00:19:27,226 --> 00:19:28,356 >> So [inaudible] iterate and I know that each one is 470 00:19:28,356 --> 00:19:32,716 like a different function, so it's not exactly [inaudible] 471 00:19:32,716 --> 00:19:34,546 but it seems that like we would 472 00:19:38,496 --> 00:19:41,846 like to have a kinda of type job things. 473 00:19:41,956 --> 00:19:48,966 So it could be like Tommy just [inaudible] that's being 474 00:19:48,966 --> 00:19:51,526 like an instantiation look like this object thing 475 00:19:51,526 --> 00:19:52,816 that like you wanna be using [inaudible], 476 00:19:52,926 --> 00:19:53,776 is there like that thing [inaudible]? 477 00:19:53,776 --> 00:19:55,536 >> So you're kind of getting just the idea 478 00:19:55,566 --> 00:19:56,526 of object-oriented programming, right. 479 00:19:56,556 --> 00:19:57,996 What if we just created some definition that said, "Well, 480 00:19:58,026 --> 00:19:59,016 if you're going to be a TF, then you need 481 00:19:59,046 --> 00:19:59,736 to have a name and a grade." 482 00:19:59,766 --> 00:20:00,966 So there is a way of doing that in JavaScript, 483 00:20:00,996 --> 00:20:02,046 we're just not gonna get into that really, 484 00:20:02,076 --> 00:20:03,696 just the shorthand way of doing that as well when I create them 485 00:20:03,726 --> 00:20:04,536 since I'm a really good programmer, 486 00:20:04,566 --> 00:20:05,976 I'm just gonna make sure they all have a name and a grade. 487 00:20:06,046 --> 00:20:08,406 >> And if not, then you're just gonna get some error 488 00:20:08,406 --> 00:20:11,246 that you can catch if that function doesn't exist inside 489 00:20:11,246 --> 00:20:12,156 of this variable. 490 00:20:13,216 --> 00:20:14,846 But we don't really need to get 491 00:20:14,846 --> 00:20:16,736 in to object-oriented programming 492 00:20:17,156 --> 00:20:19,676 for these purposes of this class. 493 00:20:19,676 --> 00:20:29,346 To do that, we basically need to do this 494 00:20:29,516 --> 00:20:31,156 in JavaScript essentially. 495 00:20:31,156 --> 00:20:33,806 >> But when you say object-oriented, 496 00:20:33,806 --> 00:20:36,596 you mean like we type that stuff that we were doing 497 00:20:36,596 --> 00:20:40,516 on the other-- I mean it seem like we're defining structure 498 00:20:40,516 --> 00:20:43,696 on the previous problem set as well? 499 00:20:44,046 --> 00:20:44,856 >> Exactly. 500 00:20:44,856 --> 00:20:48,346 So in the previous problem sets, so-- 501 00:20:48,346 --> 00:20:51,626 we just don't really get into the topic too much in CS50 502 00:20:51,626 --> 00:21:00,236 but we certainly will in CS51 and other courses down the road. 503 00:21:01,396 --> 00:21:07,296 But this idea of saying, "Well, there's gonna be some structure 504 00:21:07,296 --> 00:21:11,686 and every instantiation of that structure needs 505 00:21:11,736 --> 00:21:13,076 to have the same thing. 506 00:21:13,196 --> 00:21:17,906 This is just a loser way of doing that. 507 00:21:17,906 --> 00:21:20,666 We don't need to have some definition 508 00:21:20,696 --> 00:21:22,656 of Tommy before we can create Tommy. 509 00:21:22,656 --> 00:21:24,896 That's just a fun little property of JavaScript. 510 00:21:24,896 --> 00:21:27,636 It's much more flexible in that sense. 511 00:21:27,636 --> 00:21:28,556 Other questions? 512 00:21:28,556 --> 00:21:31,046 Okay, so that is arrays and associative arrays. 513 00:21:31,046 --> 00:21:37,256 So one more thing that we'll get right on to on this PSET likely, 514 00:21:37,326 --> 00:21:42,526 scope in JavaScript is a little bit different 515 00:21:42,526 --> 00:21:43,806 than other languages. 516 00:21:43,806 --> 00:21:46,316 And of course at this point, 517 00:21:46,316 --> 00:21:48,356 you'll find that I think it's better. 518 00:21:48,356 --> 00:21:49,906 So inside of [inaudible] PHP, when we created loops 519 00:21:50,046 --> 00:21:51,286 and conditions and functions, 520 00:21:51,286 --> 00:21:53,546 all of these 3 things limited the scope of variables, right. 521 00:21:53,546 --> 00:21:55,566 You can see I said for int I equal 0, 522 00:21:55,566 --> 00:21:58,726 that I could not be accessible anywhere outside 523 00:21:58,726 --> 00:21:59,596 of that for loop. 524 00:21:59,596 --> 00:22:02,676 If we wanted it to be accessible outside of that 525 00:22:02,676 --> 00:22:04,686 for loop then we have to declare it outside. 526 00:22:04,686 --> 00:22:05,836 In JavaScript, not so much. 527 00:22:05,836 --> 00:22:10,016 The only thing that can limit the scope 528 00:22:10,016 --> 00:22:11,736 of a variable is a function. 529 00:22:12,106 --> 00:22:22,686 So you'll notice that throughout my examples I've been using this 530 00:22:22,686 --> 00:22:23,246 keyword var. 531 00:22:23,246 --> 00:22:27,046 And so what this keyword var does if it's going to say, 532 00:22:27,046 --> 00:22:28,596 "I want this variable to be local. 533 00:22:28,596 --> 00:22:30,726 I want you to limit the scope of this variable 534 00:22:30,726 --> 00:22:32,066 to my current function." 535 00:22:32,066 --> 00:22:34,176 Now if I don't have this var keyword, 536 00:22:34,326 --> 00:22:40,396 any variable I create is going to be by default global. 537 00:22:40,426 --> 00:22:48,076 So if I just say inside of my JavaScript X equals 5 538 00:22:48,076 --> 00:22:49,956 and X doesn't exist yet, 539 00:22:49,956 --> 00:22:54,726 I've just created a global variable called X. 540 00:22:54,726 --> 00:22:59,426 If instead I just want that variable to be local 541 00:22:59,426 --> 00:23:03,786 to my current function, I would need to say var X equals 5. 542 00:23:03,786 --> 00:23:05,076 Make sense? 543 00:23:05,866 --> 00:23:06,116 Yup. 544 00:23:06,116 --> 00:23:10,166 >> What if you declare var like before you start an option? 545 00:23:10,166 --> 00:23:12,156 If there was like [inaudible]. 546 00:23:12,156 --> 00:23:16,006 >> So if I use var before I get into any functions? 547 00:23:16,006 --> 00:23:19,266 So because I'm limited to the scope of my current function 548 00:23:19,266 --> 00:23:23,446 and I'm not really in the function yet, 549 00:23:23,446 --> 00:23:26,016 then I effectively just create a global variable. 550 00:23:26,046 --> 00:23:26,916 So if I'm outside of any function, 551 00:23:26,946 --> 00:23:28,176 and I say var A equals 5, or A equals 5, 552 00:23:28,206 --> 00:23:28,896 that's gonna be the same thing. 553 00:23:28,926 --> 00:23:30,126 Because if that don't exist within a function, 554 00:23:30,156 --> 00:23:31,746 then you can't really be limited to the scope of any function. 555 00:23:31,776 --> 00:23:32,136 Other questions? 556 00:23:32,166 --> 00:23:33,606 Okay, so let's just look at a quick scope example here, 557 00:23:33,636 --> 00:23:34,176 so you see what I mean. 558 00:23:34,206 --> 00:23:35,076 So again, scope.html, is just going 559 00:23:35,106 --> 00:23:36,246 to just include a single JavaScript file, 560 00:23:36,276 --> 00:23:36,816 we're used to that now. 561 00:23:36,846 --> 00:23:38,316 So now scope.js, so these first 2 lines do exactly that. 562 00:23:38,346 --> 00:23:39,486 So we're creating 2 global variables here. 563 00:23:39,516 --> 00:23:40,386 So the first is called global 1 564 00:23:40,416 --> 00:23:41,976 and even though I've used the keyword var I don't exist inside 565 00:23:42,006 --> 00:23:42,426 of function yet. 566 00:23:42,456 --> 00:23:43,296 So this is the global variable 567 00:23:43,326 --> 00:23:44,676 and the second case I have not used the var keyword, 568 00:23:44,706 --> 00:23:45,486 so I'm also global variable. 569 00:23:45,516 --> 00:23:46,386 So now inside of my function here, 570 00:23:46,416 --> 00:23:47,916 I'm creating a local variable saying it's equal to 0, 571 00:23:47,946 --> 00:23:49,086 and now I can access this global variable 572 00:23:49,116 --> 00:23:49,836 without doing anything special. 573 00:23:49,866 --> 00:23:50,796 And if this is a global variable, 574 00:23:50,826 --> 00:23:52,536 if I wanna increment it I can and I can also read its value 575 00:23:52,566 --> 00:23:53,226 in addition to changing it. 576 00:23:53,256 --> 00:23:54,396 So I can just say console.log global 1. 577 00:23:54,426 --> 00:23:55,626 So now I have some for loop and inside of this 578 00:23:55,656 --> 00:23:57,036 for loop I'm creating a what would be local variable 579 00:23:57,066 --> 00:23:57,666 in some other languages. 580 00:23:57,696 --> 00:23:59,136 This A you might think only exists within this for loop 581 00:23:59,166 --> 00:24:00,456 and then we're accessing this local variable again. 582 00:24:00,486 --> 00:24:02,196 But if afterwards I can log both I and j, both of these are going 583 00:24:02,226 --> 00:24:02,916 to be the actual values. 584 00:24:02,946 --> 00:24:04,446 For A I'm gonna get 3, and for I I'm going to get 5 585 00:24:04,476 --> 00:24:05,916 and the same thing with local, I'm also going to get 5. 586 00:24:05,946 --> 00:24:07,356 And so now I'm just gonna actually call this function 587 00:24:07,386 --> 00:24:08,106 and then afterwards, that's it. 588 00:24:08,136 --> 00:24:08,976 So if I actually run this file-- 589 00:24:09,516 --> 00:24:14,676 [ Noise ] 590 00:24:15,176 --> 00:24:16,186 >> So here we go. 591 00:24:16,876 --> 00:24:19,566 So these last 2, so these both say 5, 592 00:24:19,596 --> 00:24:21,806 the last 2 things I printed are 5 and if we go back, 593 00:24:22,186 --> 00:24:24,796 the last 2 things I printed were both I and local. 594 00:24:26,096 --> 00:24:27,206 Make sense? 595 00:24:27,856 --> 00:24:30,616 So a little bit tricky and it's a little bit counterintuitive 596 00:24:30,616 --> 00:24:32,076 since we're not really used to that yet. 597 00:24:32,386 --> 00:24:34,356 But just remember that scope is gonna be limited 598 00:24:34,356 --> 00:24:37,386 to the current function not necessarily the current loop. 599 00:24:38,946 --> 00:24:41,806 Okay, so any last questions on JavaScript? 600 00:24:42,346 --> 00:24:46,896 So again, we're gonna go over this much more in detail 601 00:24:46,896 --> 00:24:49,326 in lectures and in sections but this is just kind 602 00:24:49,326 --> 00:24:52,136 of the JavaScript primer that you'll need to complete all 603 00:24:52,136 --> 00:24:53,096 of the elements of the PSET. 604 00:24:54,486 --> 00:24:56,356 So now let's take a look at the distribution code. 605 00:24:56,356 --> 00:24:59,706 And to the first glance there's a little-- there's a lot of it. 606 00:24:59,706 --> 00:25:02,196 So first we have to file buildings and houses. 607 00:25:03,156 --> 00:25:06,636 And so these 2 JavaScript files essentially just define arrays 608 00:25:06,636 --> 00:25:08,726 that are containing objects that are on the map. 609 00:25:09,236 --> 00:25:11,816 So we have houses which are destinations for passengers 610 00:25:12,006 --> 00:25:13,556 and then we just have buildings which are 611 00:25:13,556 --> 00:25:15,976 where passengers could be for you to pick them up. 612 00:25:16,736 --> 00:25:18,336 So let's take a look at those first 613 00:25:18,336 --> 00:25:19,996 because they're definitely the simplest. 614 00:25:20,316 --> 00:25:22,186 So let's just close all these, so we have more room. 615 00:25:22,666 --> 00:25:28,686 Alright, so I'm gonna open up inside of my public HTML, 616 00:25:28,686 --> 00:25:31,436 I already ran, get clone, and got PSET 8, 617 00:25:31,716 --> 00:25:33,576 and so now let's first take a look at buildings. 618 00:25:34,536 --> 00:25:38,636 So here, we see their buildings, so we're using the var keyword 619 00:25:38,636 --> 00:25:40,336 but again we're not inside of any function, 620 00:25:40,336 --> 00:25:42,186 so this is effectively a global variable 621 00:25:42,546 --> 00:25:44,746 and now we're using the shorthand notation. 622 00:25:44,806 --> 00:25:46,606 So because I've used the open bracket, 623 00:25:46,816 --> 00:25:48,446 that means that building is an array. 624 00:25:49,106 --> 00:25:51,206 So now what is each element of this array? 625 00:25:52,006 --> 00:25:54,256 Well it's an object or an associative array 626 00:25:54,516 --> 00:25:56,536 because I'm using these curly braces. 627 00:25:56,966 --> 00:25:59,006 So to start this curly brace, just says, 628 00:25:59,506 --> 00:26:01,706 I'm starting a brand new associative array right here. 629 00:26:01,706 --> 00:26:03,966 And so now here are our key value pairs. 630 00:26:04,416 --> 00:26:05,716 In this case we're always map-- 631 00:26:05,716 --> 00:26:09,106 in the first case we have 3 keys mapping to strings, 632 00:26:09,106 --> 00:26:11,616 and then we have 2 more keys that are mapping to decimals. 633 00:26:11,936 --> 00:26:14,146 So again, not everything inside of your associative array needs 634 00:26:14,146 --> 00:26:16,066 to have the same type. 635 00:26:16,066 --> 00:26:20,326 And so now, we've just created some big long list of all 636 00:26:20,326 --> 00:26:21,906 of the buildings inside Harvard square 637 00:26:21,906 --> 00:26:24,186 and I really hope David didn't have to type all of these 638 00:26:24,186 --> 00:26:25,116 out 'cause that's kinda sad. 639 00:26:27,136 --> 00:26:29,066 So that's buildings and if we open up houses, 640 00:26:29,066 --> 00:26:30,646 we have something really, really similar 641 00:26:30,976 --> 00:26:32,276 and this is perhaps more useful. 642 00:26:33,586 --> 00:26:35,906 So in this case, buildings was an array, right, 643 00:26:36,266 --> 00:26:40,066 because the first thing was this square bracket, right. 644 00:26:40,066 --> 00:26:43,956 If we go back up, we saw var buildings equal square bracket. 645 00:26:44,416 --> 00:26:46,816 Houses on the other hand is not an array, 646 00:26:46,816 --> 00:26:47,956 it's in an associative array. 647 00:26:48,426 --> 00:26:51,866 Why? Because we see var houses equals not open bracket 648 00:26:52,036 --> 00:26:52,926 but open brace. 649 00:26:53,456 --> 00:26:55,226 And so this is effectively our hash table. 650 00:26:55,926 --> 00:26:58,336 So that means that every [inaudible] on the left needs 651 00:26:58,336 --> 00:27:02,646 to be some key inside of our hash table and now the value 652 00:27:02,646 --> 00:27:05,406 of each of these elements of our hash table is another object 653 00:27:05,616 --> 00:27:06,566 or another hash table. 654 00:27:07,496 --> 00:27:09,536 So now this object or associative array, 655 00:27:09,536 --> 00:27:10,456 whatever you wanna call it, 656 00:27:10,456 --> 00:27:12,976 in this case they call have the same 2 elements. 657 00:27:13,246 --> 00:27:16,876 We have a LAT for latitude and LNG for longitude. 658 00:27:17,626 --> 00:27:19,356 So now you'll notice here that over in the left, 659 00:27:19,736 --> 00:27:23,326 we've actually put quotes around all of keys, while over here 660 00:27:23,326 --> 00:27:24,956 on the right, we don't. 661 00:27:25,266 --> 00:27:27,506 So these quotes are actually optional 662 00:27:27,506 --> 00:27:29,486 if your key is only one word, right. 663 00:27:29,486 --> 00:27:31,656 And I could have said quote LAT quote LNG 664 00:27:31,656 --> 00:27:32,826 and that would have been fine. 665 00:27:33,426 --> 00:27:36,336 But the reason we need quotes in this case is because something 666 00:27:36,336 --> 00:27:38,196 like winter house is 2 words. 667 00:27:39,106 --> 00:27:41,256 And so we basically just run it to a syntax error 668 00:27:41,256 --> 00:27:44,126 if we didn't have those quotes for that string. 669 00:27:45,156 --> 00:27:48,916 So if you wanna type the quotes, when you're defining any key 670 00:27:48,916 --> 00:27:50,746 in your array that's fine. 671 00:27:50,746 --> 00:27:53,246 If you want to omit them, make sure you don't have any keys 672 00:27:53,246 --> 00:27:55,416 that are multiple words or else you're gonna ran 673 00:27:55,416 --> 00:27:57,206 into some problems. 674 00:27:57,986 --> 00:27:59,326 Make sense? 675 00:27:59,516 --> 00:28:02,996 Alright, so next is passengers.js. 676 00:28:03,886 --> 00:28:05,766 So this is also pretty similar. 677 00:28:07,156 --> 00:28:09,826 So let's open this up. 678 00:28:10,106 --> 00:28:13,476 So now instead of buildings, we now have passengers which again, 679 00:28:13,476 --> 00:28:16,136 we now know that this is an array because it starts off 680 00:28:16,136 --> 00:28:19,106 with a square bracket and each element of the array is going 681 00:28:19,106 --> 00:28:20,066 to be an associative array. 682 00:28:20,846 --> 00:28:23,316 And so here we just have an array of all 683 00:28:23,316 --> 00:28:26,796 of our staff members including people like Al Gore 684 00:28:26,796 --> 00:28:29,216 or Bill Gates who clearly work for CS50. 685 00:28:29,216 --> 00:28:30,486 And if they didn't, they wish they would. 686 00:28:30,526 --> 00:28:33,676 So that's passengers. 687 00:28:34,176 --> 00:28:37,716 So next is math 3D.js. 688 00:28:38,446 --> 00:28:43,376 So let's open that up and this looks scary 689 00:28:43,376 --> 00:28:44,666 so that's the end of that. 690 00:28:45,046 --> 00:28:48,396 Next down the list is shuttle.j-- I'm not kidding. 691 00:28:48,396 --> 00:28:49,296 I'm really not good at math. 692 00:28:50,006 --> 00:28:52,826 So next if we open up shuttle.js, 693 00:28:53,026 --> 00:28:54,266 you can just trust me that everything 694 00:28:54,266 --> 00:28:55,936 in math 3D works very well. 695 00:28:55,936 --> 00:29:00,036 So now we're getting into some more interesting things. 696 00:29:01,416 --> 00:29:04,196 So here we just have some more global variables 697 00:29:04,196 --> 00:29:06,946 and these are basically the starting state of the shuttle, 698 00:29:06,946 --> 00:29:08,576 so where we are, and we happen to be 699 00:29:08,576 --> 00:29:10,436 at university hall facing it. 700 00:29:10,626 --> 00:29:13,206 And so we actually calculated it to that many decimal places 701 00:29:13,206 --> 00:29:14,726 because you want to be really sure you're looking 702 00:29:14,726 --> 00:29:15,396 at university hall. 703 00:29:15,726 --> 00:29:19,926 So next, we have the number of seats inside of the shuttle, 704 00:29:20,176 --> 00:29:21,906 you notice that this is some constant, right. 705 00:29:21,906 --> 00:29:25,056 At no point in our game can we add a seat to the shuttle 706 00:29:25,306 --> 00:29:28,876 or remove one or at no point can we buy a really cool luxury 707 00:29:28,876 --> 00:29:31,826 shuttle with tables, that will be next year's version. 708 00:29:31,826 --> 00:29:32,416 I love luxury. 709 00:29:32,416 --> 00:29:36,806 So anyway, so now, we're just loading in some plug-ins 710 00:29:36,806 --> 00:29:39,036 like the Google Earth plug in that we're using for this PSET, 711 00:29:39,036 --> 00:29:41,086 so that's just gonna load all of that from Google. 712 00:29:41,596 --> 00:29:43,536 And so now we're gonna jump into some functions 713 00:29:43,536 --> 00:29:44,796 that you all need to be working with. 714 00:29:46,106 --> 00:29:47,866 So the first of these is chart. 715 00:29:48,396 --> 00:29:51,476 And so this function is going to be what's responsible 716 00:29:51,476 --> 00:29:54,976 for drawing the seating chart on the right 717 00:29:54,976 --> 00:29:56,546 of the shuttle interface. 718 00:29:56,546 --> 00:30:07,346 So if we just go back to-- so J Harvard PSET 8 [inaudible]. 719 00:30:08,156 --> 00:30:09,456 >> Woo-ho! 720 00:30:11,396 --> 00:30:13,406 So once this loads over here to the right, 721 00:30:13,596 --> 00:30:15,966 we have our seating chart and this is drawn 722 00:30:15,966 --> 00:30:17,306 by this function called chart. 723 00:30:17,576 --> 00:30:19,006 So right now we don't have anywhere 724 00:30:19,006 --> 00:30:20,686 in our shuttle 'cause you haven't picked anyone up yet. 725 00:30:20,916 --> 00:30:23,666 So if I scroll through this list, everything is just empty. 726 00:30:24,356 --> 00:30:26,456 And we have a list of 0 to 34 727 00:30:26,456 --> 00:30:28,766 because we're computer scientists and 0 index things, 728 00:30:30,696 --> 00:30:34,956 so next is drop off which is clearly I already done for you, 729 00:30:34,956 --> 00:30:36,306 this is going to be what's responsible 730 00:30:36,376 --> 00:30:38,766 for dropping passengers off at their locations. 731 00:30:39,586 --> 00:30:41,046 Next is just some function, 732 00:30:41,046 --> 00:30:43,486 if there is some error while we created Google Earth, well, 733 00:30:43,486 --> 00:30:45,026 it just let the user know there is an error, 734 00:30:45,186 --> 00:30:46,396 hopefully this never happens. 735 00:30:47,876 --> 00:30:48,786 So this where it ends, 736 00:30:48,786 --> 00:30:52,046 so basically whenever the user does something 737 00:30:52,046 --> 00:30:53,486 that changes the position of the shuttle, 738 00:30:53,486 --> 00:30:55,756 we need to constantly refresh what the screen looks like. 739 00:30:56,006 --> 00:30:57,276 And so this just says, "Well, 740 00:30:57,396 --> 00:30:59,236 we need to be constantly refreshing the position 741 00:30:59,236 --> 00:30:59,876 of the shuttle." 742 00:30:59,876 --> 00:31:02,056 And so we need to find this update function inside 743 00:31:02,056 --> 00:31:05,506 of shuttle.js which we'll look at next. 744 00:31:05,506 --> 00:31:07,116 So in it is the [inaudible]-- 745 00:31:07,116 --> 00:31:08,836 is kind of like our int main in this case. 746 00:31:08,836 --> 00:31:11,676 This is what's going to be fired when the program first starts. 747 00:31:11,716 --> 00:31:14,136 So once Google Earth is all loaded up and we can use it, 748 00:31:14,266 --> 00:31:17,486 then we're going to fire this init CB, where the CB stands 749 00:31:17,486 --> 00:31:20,176 for call back or some function that's going to be called 750 00:31:20,376 --> 00:31:22,026 by something when it's done. 751 00:31:22,176 --> 00:31:25,516 So Google Earth says, well once I'm done I could execute some 752 00:31:25,516 --> 00:31:26,546 function that you give me. 753 00:31:26,776 --> 00:31:28,896 And so in this case we're giving it init CB so that 754 00:31:28,896 --> 00:31:31,246 when Google Earth is done, then Google Earth is going 755 00:31:31,246 --> 00:31:32,166 to call this function 756 00:31:32,166 --> 00:31:34,436 for us that's gonna set everything up first. 757 00:31:35,426 --> 00:31:37,086 So here we're just creating a new shuttle, 758 00:31:37,496 --> 00:31:38,636 putting everything down. 759 00:31:38,876 --> 00:31:40,576 Now, we're calling this function populate. 760 00:31:41,086 --> 00:31:44,636 So before populate, this function keystroke, 761 00:31:44,636 --> 00:31:47,956 so this is very similar to getch or these game loops 762 00:31:47,956 --> 00:31:50,266 that we saw in PSETs 4 and 5. 763 00:31:50,556 --> 00:31:52,516 This is basically what's going to handle input. 764 00:31:52,946 --> 00:31:55,406 So every time the user hit something on their keyboard, 765 00:31:55,646 --> 00:31:57,736 this function keystroke is going to fire. 766 00:31:58,936 --> 00:32:00,936 And so, we can get the key 767 00:32:00,936 --> 00:32:03,746 that the user typed using this event dot key code. 768 00:32:03,746 --> 00:32:06,306 And unfortunately these key codes aren't strictly mapped 769 00:32:06,636 --> 00:32:10,466 to ASCII values because, you know, we can run out-- 770 00:32:10,466 --> 00:32:12,476 we run into things like the left and the right arrow 771 00:32:12,476 --> 00:32:13,886 that aren't really defined by ASCII. 772 00:32:14,516 --> 00:32:16,856 And so we have instead these numerical key codes. 773 00:32:17,126 --> 00:32:19,416 And so we've commented what each of these key codes is 774 00:32:19,416 --> 00:32:21,516 so that looking at 40 you don't have-- 775 00:32:21,666 --> 00:32:23,676 you're not completely lost as to what 40 is. 776 00:32:24,966 --> 00:32:26,886 So with some features that require, you know, 777 00:32:26,886 --> 00:32:29,506 implementing some additional feature, you might wanna look 778 00:32:29,506 --> 00:32:31,996 into keystroke regarding how it is 779 00:32:31,996 --> 00:32:34,926 that we handle input from the user. 780 00:32:35,116 --> 00:32:36,916 So things like letters, you'll notice are indeed mapped 781 00:32:36,916 --> 00:32:39,186 to their ASCII values 'cause we have an A of 65 782 00:32:39,446 --> 00:32:42,566 and a lowercase a of 97, but we also have some additional ones. 783 00:32:43,126 --> 00:32:46,886 So that's keystroke, although we don't really need to worry 784 00:32:46,886 --> 00:32:48,766 about we're just kind of doing some things with Google Earth, 785 00:32:48,816 --> 00:32:51,356 we're loading it up, you notice here we're passing this init 786 00:32:51,356 --> 00:32:51,716 call back. 787 00:32:51,896 --> 00:32:54,236 So we say, "Well, Goolge once you've created your instance 788 00:32:54,236 --> 00:32:56,816 of an earth, I want you to fire this init CB. 789 00:32:56,816 --> 00:32:58,526 And if you run into any error that I want you 790 00:32:58,526 --> 00:33:00,656 to run this failure CB or this failure call back 791 00:33:00,656 --> 00:33:04,846 that will just tell the user, yeah, something went wrong." 792 00:33:05,146 --> 00:33:07,836 So next is pick up, and so this is the other main half 793 00:33:07,836 --> 00:33:09,126 of the problem set you need to implement. 794 00:33:09,186 --> 00:33:11,606 So once we drive through a passenger, we want to add them 795 00:33:11,606 --> 00:33:15,456 to the shuttle if we can, and finally, populate. 796 00:33:16,066 --> 00:33:18,906 So this is a function that randomly distributes all 797 00:33:18,906 --> 00:33:21,096 of the staff members or all the passengers on the map. 798 00:33:21,616 --> 00:33:22,856 And so we basically gonna say, 799 00:33:22,856 --> 00:33:25,646 every staff member is gonna be assigned to a random building. 800 00:33:26,126 --> 00:33:29,056 So we're saying, first we're gonna drop 801 00:33:29,266 --> 00:33:30,136 down the houses [inaudible]. 802 00:33:30,446 --> 00:33:31,916 First you're gonna drop down the houses and then 803 00:33:31,916 --> 00:33:34,786 for each passenger, we're gonna assign them to random building. 804 00:33:35,056 --> 00:33:37,266 And so this is the same construction that we saw before 805 00:33:37,266 --> 00:33:39,006 when Joseph was trying to grade PSETs. 806 00:33:39,966 --> 00:33:42,406 We have mapped out random, it's gonna return a random 807 00:33:42,406 --> 00:33:44,186 between 0 and 1, 0 and 1. 808 00:33:44,616 --> 00:33:46,896 We can multiply that by the length of an array 809 00:33:47,096 --> 00:33:49,656 which by we just have an array and we say dot length, 810 00:33:49,956 --> 00:33:51,136 that's going to give us the number 811 00:33:51,136 --> 00:33:52,446 of elements inside of the array. 812 00:33:52,776 --> 00:33:55,266 So no longer do we have to pass around the length of an array 813 00:33:55,526 --> 00:33:58,126 like we did in C. And so now we're just-- 814 00:33:58,126 --> 00:34:01,196 this is how we can access a random element inside 815 00:34:01,196 --> 00:34:03,636 of buildings, making sure it never go over the bounds. 816 00:34:04,996 --> 00:34:08,636 So after that, we're just doing some Google Earth API kind 817 00:34:08,636 --> 00:34:11,706 of things, we're just creating both a picture on the 3D world 818 00:34:11,796 --> 00:34:13,576 and then a little marker in the bottom right 819 00:34:13,576 --> 00:34:17,516 to the map setting that all up. 820 00:34:17,516 --> 00:34:20,266 And so now here is your first minor task, you know, 821 00:34:20,266 --> 00:34:23,106 remembering where each passenger is so that you can pick them up. 822 00:34:24,066 --> 00:34:27,406 And so finally, just some other necessary functions 823 00:34:27,406 --> 00:34:28,816 for unloading everything from memory, 824 00:34:29,146 --> 00:34:30,836 some things you don't really need to worry about. 825 00:34:31,976 --> 00:34:34,856 So the last file in our [inaudible] code is going 826 00:34:34,856 --> 00:34:37,596 to be service.js-- shuttle.js. 827 00:34:37,676 --> 00:34:40,696 So let's open up shuttle. 828 00:34:42,006 --> 00:34:44,376 And so while service implements things like driving around 829 00:34:44,376 --> 00:34:47,226 and picking up passengers, shuttle is going to what the-- 830 00:34:47,226 --> 00:34:50,186 what represents the state of our shuttle at any given time. 831 00:34:50,746 --> 00:34:54,706 And so here is just some variables inside of the shuttle 832 00:34:54,706 --> 00:34:56,356 that we'll be using in order to handle things 833 00:34:56,356 --> 00:34:58,736 like moving the camera around, but the function 834 00:34:58,736 --> 00:35:02,566 that we really care about inside of shuttle is this distance. 835 00:35:03,506 --> 00:35:04,346 And so there's a question 836 00:35:04,346 --> 00:35:07,136 about how do we kind create this definition of classes. 837 00:35:07,136 --> 00:35:08,276 Well, this is how we're doing so. 838 00:35:08,276 --> 00:35:09,726 This is how to do so in JavaScript. 839 00:35:09,976 --> 00:35:12,326 We can say that there exist some class called shuttle 840 00:35:12,616 --> 00:35:15,206 and if there's going to exist some shuttle, then there needs 841 00:35:15,206 --> 00:35:16,546 to be something called distance. 842 00:35:16,716 --> 00:35:18,856 And here's where we're defining this distance method 843 00:35:18,856 --> 00:35:19,356 of the shuttle. 844 00:35:19,866 --> 00:35:21,776 And it looks, again, really complicated. 845 00:35:21,956 --> 00:35:24,806 But what this does is it's going to calculate the distance 846 00:35:24,866 --> 00:35:26,536 from the current position of the shuttle 847 00:35:27,026 --> 00:35:28,906 because there can only be one shuttle at a time, 848 00:35:28,906 --> 00:35:31,366 we're gonna calculate distance from out current point 849 00:35:31,616 --> 00:35:33,636 to some arbitrary latitude and longitude. 850 00:35:33,976 --> 00:35:36,426 And so this is going to return the distance 851 00:35:36,496 --> 00:35:39,026 from your current point to that point that you give it. 852 00:35:39,256 --> 00:35:40,726 So it's just gonna return a single number. 853 00:35:41,876 --> 00:35:46,486 So feel free to parse through the rest of this file and most 854 00:35:46,486 --> 00:35:48,016 of it is just things like moving the camera 855 00:35:48,016 --> 00:35:51,076 and actually implementing how the shuttle is actually moving 856 00:35:51,076 --> 00:35:53,396 around, pretty interesting if you wanna look at it 857 00:35:53,396 --> 00:35:54,216 in your abundant free time. 858 00:35:55,596 --> 00:35:58,146 Any questions on the distribution code? 859 00:35:59,616 --> 00:35:59,726 Yup. 860 00:35:59,726 --> 00:35:59,976 [ Inaudible Remark ] 861 00:35:59,976 --> 00:36:06,636 >> So that shuttle dot prototype? 862 00:36:06,636 --> 00:36:07,876 [ Inaudible Remark ] 863 00:36:07,876 --> 00:36:10,776 >> Yeah, so this is JavaScript's interesting syntax 864 00:36:11,356 --> 00:36:12,846 for creating objects. 865 00:36:13,106 --> 00:36:16,936 So this just says that there is some-- this class called shuttle 866 00:36:17,536 --> 00:36:19,576 and I can create multiple shuttles in my game, 867 00:36:20,066 --> 00:36:22,356 but I really just want to have one shuttle right now. 868 00:36:23,056 --> 00:36:25,596 So each of these shuttles in order for a shuttle to exist, 869 00:36:25,596 --> 00:36:27,516 it needs to have this function update. 870 00:36:28,066 --> 00:36:31,286 And so on any-- with any shuttle that I create, 871 00:36:31,416 --> 00:36:34,166 I know that that shuttle has to have an update function. 872 00:36:34,676 --> 00:36:37,406 Well before we created these objects for each TF, 873 00:36:37,806 --> 00:36:40,736 now when we created those TF objects, we basically said, 874 00:36:40,736 --> 00:36:42,126 "Well, you can have a name and a grade, 875 00:36:42,316 --> 00:36:45,116 but I could very feasibly create a TF that doesn't have a name 876 00:36:45,116 --> 00:36:45,796 and a grade function." 877 00:36:45,796 --> 00:36:47,566 When I was creating them I just made sure 878 00:36:47,566 --> 00:36:48,956 to give them each a name and a grade. 879 00:36:49,156 --> 00:36:50,906 Wherein this case if we use this shuttle, 880 00:36:50,966 --> 00:36:52,626 so what it is I'm creating, 881 00:36:52,626 --> 00:36:55,426 this dot prototype is a really cool JavaScript thing 882 00:36:55,426 --> 00:36:57,196 that you can Google on your free time 'cause that'd be another 883 00:36:57,196 --> 00:36:57,826 hour to explain. 884 00:36:58,396 --> 00:37:01,526 And then the last part is just what the function actually is. 885 00:37:01,876 --> 00:37:05,536 So anytime I actually create a shuttle it has a function 886 00:37:05,536 --> 00:37:06,226 called update. 887 00:37:07,146 --> 00:37:09,856 So this is just the JavaScript syntax for doing-- 888 00:37:09,856 --> 00:37:13,946 for creating what we would have seen as just class stock in PHP, 889 00:37:13,946 --> 00:37:16,696 this is just the JavaScript syntax. 890 00:37:17,806 --> 00:37:19,466 Other questions on the district code? 891 00:37:19,986 --> 00:37:20,106 Yes? 892 00:37:21,276 --> 00:37:24,206 >> [Inaudible] you said there is something called [inaudible] 893 00:37:24,206 --> 00:37:29,886 seats, does that in the [inaudible] code? 894 00:37:31,836 --> 00:37:34,166 >> Sure. So we saw seats as a constant. 895 00:37:34,786 --> 00:37:37,386 I wanna say in service. 896 00:37:37,936 --> 00:37:43,776 Yeah, so this constant seats is the number of seats 897 00:37:43,776 --> 00:37:47,506 in the shuttle and inside of shuttle, we have-- 898 00:37:48,516 --> 00:37:52,996 [ Noise ] 899 00:37:53,496 --> 00:37:57,286 >> So inside of shuttle, we have an array of seats. 900 00:37:57,556 --> 00:37:59,106 So the capital seats is the number 901 00:37:59,106 --> 00:38:00,436 of seats inside of this array. 902 00:38:00,956 --> 00:38:02,086 And inside of shuttle, 903 00:38:02,086 --> 00:38:05,996 every shuttle we create has an array associated with it 904 00:38:06,426 --> 00:38:07,216 and you'll notice here 905 00:38:07,216 --> 00:38:09,836 that because we're creating some array here, 906 00:38:10,066 --> 00:38:11,556 this array always has the same size. 907 00:38:11,556 --> 00:38:14,196 And that size is equal to that capital seats, 908 00:38:14,426 --> 00:38:16,646 'cause for each seat, we're just creating a blank seat. 909 00:38:16,646 --> 00:38:20,216 This null just says there's nobody in that seat right now. 910 00:38:21,356 --> 00:38:26,146 Other questions on the [inaudible]? 911 00:38:26,386 --> 00:38:28,946 Okay, so let's jump in to what you actually need to do 912 00:38:29,216 --> 00:38:31,786 for this PSET and you'll find that it's really not 913 00:38:31,786 --> 00:38:32,796 that bad and quite fun. 914 00:38:33,706 --> 00:38:35,606 So first we saw this function populate. 915 00:38:35,606 --> 00:38:39,216 And so things like randomly distributing people 916 00:38:39,216 --> 00:38:41,456 and putting people in buildings and assigning them to houses, 917 00:38:41,606 --> 00:38:42,786 that's already done for us. 918 00:38:42,786 --> 00:38:44,766 What we need to do is we need 919 00:38:44,766 --> 00:38:47,136 to remember the location of each passenger. 920 00:38:47,486 --> 00:38:49,626 Because as we're driving around if we don't remember 921 00:38:49,626 --> 00:38:52,996 where each passenger is placed randomly, there's no way 922 00:38:53,146 --> 00:38:54,576 of being able to pick them up. 923 00:38:54,816 --> 00:38:57,496 Because once you pick them up, we need to determine if we're 924 00:38:57,496 --> 00:38:59,386 in range of them, if they can actually get to the shuttle. 925 00:39:00,316 --> 00:39:01,216 So what we need to do 926 00:39:01,216 --> 00:39:04,956 with populate is somehow add each passenger that was created 927 00:39:04,956 --> 00:39:07,186 on the board to an array where we keep track 928 00:39:07,366 --> 00:39:08,586 of the passenger's positions. 929 00:39:09,166 --> 00:39:11,926 So again, we saw how to do this with arrays, 930 00:39:11,926 --> 00:39:13,366 JavaScript arrays are really cool. 931 00:39:14,046 --> 00:39:16,626 And so we probably don't wanna just keep track of something 932 00:39:16,626 --> 00:39:19,746 like the passenger's name 'cause that's not particularly helpful. 933 00:39:20,066 --> 00:39:23,436 We need to keep track of their name and also where they are 934 00:39:23,436 --> 00:39:25,566 on the map because that where they are in the map, 935 00:39:25,846 --> 00:39:27,806 I mean the place marking marker that's going 936 00:39:27,806 --> 00:39:29,596 to define the latitude and longitude 937 00:39:29,596 --> 00:39:30,356 that they're placed at. 938 00:39:30,876 --> 00:39:32,516 So you also need to remember where they're going, 939 00:39:32,676 --> 00:39:35,006 basically as much information as you need, 940 00:39:35,066 --> 00:39:37,356 needs to be remembered somehow inside of an array. 941 00:39:38,466 --> 00:39:41,406 So what you probably wanna do is create some associative array 942 00:39:41,946 --> 00:39:45,196 that defines things like name and house and add each 943 00:39:45,196 --> 00:39:47,776 of these associative arrays to some other array you creat 944 00:39:48,036 --> 00:39:50,996 that has-- we know it's gonna have size equal 945 00:39:50,996 --> 00:39:53,916 to the number of total people. 946 00:39:54,056 --> 00:39:57,446 So this is-- again, this is just a reminder 947 00:39:57,446 --> 00:39:58,916 of the syntax for doing that. 948 00:39:59,366 --> 00:40:00,806 >> If you want to create a new object 949 00:40:00,806 --> 00:40:02,876 on the fly we can just say, "Well, O, 950 00:40:02,876 --> 00:40:05,656 it's gonna be key value and they can also have, remember, 951 00:40:05,656 --> 00:40:08,326 objects of objects because things like markers 952 00:40:08,326 --> 00:40:11,246 and place mark are already objects but that's okay." 953 00:40:11,246 --> 00:40:14,466 Because if I just say-- if I have some object O 954 00:40:14,646 --> 00:40:16,016 and just putting it into an array, 955 00:40:16,016 --> 00:40:18,966 it's not even associative array that's associated 956 00:40:18,966 --> 00:40:19,766 with they key something. 957 00:40:20,266 --> 00:40:22,376 So creating arrays of arrays of arrays of objects 958 00:40:22,376 --> 00:40:23,676 or whatever is no problem. 959 00:40:24,916 --> 00:40:26,496 So any questions on how we're going 960 00:40:26,496 --> 00:40:28,526 to remember the location of each passenger? 961 00:40:29,086 --> 00:40:37,666 So just inside of service.js at the bottom of populate, 962 00:40:37,976 --> 00:40:40,266 we kind of already tell where it is you need to put all 963 00:40:40,266 --> 00:40:41,166 of your code for this. 964 00:40:41,756 --> 00:40:43,206 So if we scroll down to populate, 965 00:40:43,206 --> 00:40:47,696 we have [inaudible] just to do. 966 00:40:47,876 --> 00:40:50,376 Remember, each passenger's place mark and marker. 967 00:40:51,196 --> 00:40:53,606 And so here is right where you want to put it inside 968 00:40:53,606 --> 00:40:55,746 of some array or some way of remembering 969 00:40:55,926 --> 00:40:57,156 where each passenger is. 970 00:40:58,056 --> 00:40:58,456 Make sense? 971 00:40:59,006 --> 00:41:03,626 Alright, so our next function that we need 972 00:41:05,576 --> 00:41:08,846 to actually implement, it's a little bit more work 973 00:41:08,846 --> 00:41:11,316 than populate is going to be pick up. 974 00:41:11,316 --> 00:41:12,636 So the goal of this function is 975 00:41:12,636 --> 00:41:14,456 to actually add people to the shuttle. 976 00:41:14,846 --> 00:41:17,436 So as you're driving around, you're eventually going to come 977 00:41:17,436 --> 00:41:18,916 into range of some person. 978 00:41:18,996 --> 00:41:21,596 We've say, "Well, if you're at 15 meters away from this person, 979 00:41:21,596 --> 00:41:23,686 then that's close enough for them to jump in the shuttle." 980 00:41:24,626 --> 00:41:26,406 So when we add someone to the shuttle, 981 00:41:26,516 --> 00:41:27,596 we need to do a few things. 982 00:41:27,966 --> 00:41:29,986 We first need to add them to that seats array 983 00:41:30,266 --> 00:41:31,916 so that they show up on the right-hand side 984 00:41:31,916 --> 00:41:33,836 and we remember who's inside of our shuttle. 985 00:41:34,246 --> 00:41:37,676 We also need to remove them from the map, right after we go pick 986 00:41:37,676 --> 00:41:40,026 up David, we don't to be able to pick up David again. 987 00:41:40,146 --> 00:41:43,616 We wanna remove them not only from this 3D world but also 988 00:41:43,616 --> 00:41:45,246 from that little 2D representation 989 00:41:45,246 --> 00:41:47,466 at the bottom right because both of those-- 990 00:41:47,466 --> 00:41:49,776 those 2 states should be the same at any time. 991 00:41:50,186 --> 00:41:52,036 So here's how to do for this. 992 00:41:52,526 --> 00:41:54,426 So as you're driving around and someone clicks that pick 993 00:41:54,426 --> 00:41:56,666 up button, the first thing you wanna do is detect if we're 994 00:41:56,666 --> 00:41:58,306 in range of any of the passengers. 995 00:41:58,856 --> 00:42:01,006 After that, then we need to add them to the shuttle if we can 996 00:42:01,006 --> 00:42:03,576 and then remove their spot from the 3D world 997 00:42:03,576 --> 00:42:05,096 and remove their spot from the 2D world. 998 00:42:06,356 --> 00:42:10,096 So as we saw, we have this handy function shuttle.distance that's 999 00:42:10,096 --> 00:42:13,026 going to calculate this distance for us. 1000 00:42:13,596 --> 00:42:15,996 So we can just give it some arbitrary latitude and longitude 1001 00:42:15,996 --> 00:42:17,646 and it will tell us how far away we are 1002 00:42:17,976 --> 00:42:19,156 from that latitude and longitude. 1003 00:42:19,986 --> 00:42:23,926 So since we remember where each passenger is inside of populate, 1004 00:42:24,496 --> 00:42:27,396 we just need to check if we are near any passenger 1005 00:42:27,396 --> 00:42:29,946 or any possible passenger not who's already in the shuttle, 1006 00:42:29,946 --> 00:42:33,526 of course, but any possible passenger every time we click 1007 00:42:33,956 --> 00:42:34,276 pick up. 1008 00:42:34,986 --> 00:42:37,716 So the basic approach here is to say, okay, I have this long list 1009 00:42:37,716 --> 00:42:39,556 of passengers, I need to go through anyone. 1010 00:42:39,936 --> 00:42:41,866 And anyone that's inside-- that's-- 1011 00:42:41,866 --> 00:42:45,756 I'm within 15 meters of, then I want add them to the shuttle. 1012 00:42:46,186 --> 00:42:48,606 But remember, we only have 35 seats. 1013 00:42:49,076 --> 00:42:51,766 So if your shuttle is already full and you drive to someone 1014 00:42:51,766 --> 00:42:53,446 to pick them up, you don't wanna be able 1015 00:42:53,446 --> 00:42:54,516 to add them to the shuttle. 1016 00:42:54,776 --> 00:42:58,686 So now how do we know where each passenger is? 1017 00:42:58,926 --> 00:43:00,846 Well, they all have an associated place mark 1018 00:43:00,996 --> 00:43:02,976 because remember we needed to remember that place mark thing. 1019 00:43:03,696 --> 00:43:04,736 So from the place mark, 1020 00:43:05,466 --> 00:43:07,706 if you look at that Google API documentation page 1021 00:43:07,706 --> 00:43:10,006 which you'll probably need to do to complete this PSET, 1022 00:43:10,256 --> 00:43:12,136 you can see that each of these objects has a bunch 1023 00:43:12,136 --> 00:43:13,536 of functions associated with it. 1024 00:43:14,196 --> 00:43:16,006 So in order from a place mark to determine 1025 00:43:16,006 --> 00:43:17,636 where the place mark is on the page, 1026 00:43:17,846 --> 00:43:19,866 I can just call this get geometry function. 1027 00:43:20,516 --> 00:43:24,116 And so this get geometry is gonna give me back an object 1028 00:43:24,116 --> 00:43:26,616 through an associative array where I can basically ask that, 1029 00:43:26,746 --> 00:43:29,426 well, what's the latitude and what's the longitude in order 1030 00:43:29,426 --> 00:43:31,556 to get back the numerical representations 1031 00:43:31,976 --> 00:43:33,716 of that position? 1032 00:43:34,466 --> 00:43:36,326 So I highly recommend checking out those links. 1033 00:43:36,626 --> 00:43:38,916 We listed throughout the spec of the PSET that link 1034 00:43:38,916 --> 00:43:41,516 to code dot Google.com or something that list 1035 00:43:41,516 --> 00:43:44,336 out all the functions associated with Google Map's API. 1036 00:43:45,096 --> 00:43:47,886 Combined with that and the functions that we've given you, 1037 00:43:47,886 --> 00:43:50,396 there's a very high probability that a function already exits 1038 00:43:50,706 --> 00:43:51,746 for what you're trying to do. 1039 00:43:51,746 --> 00:43:53,006 So if you're thinking to yourself, well, 1040 00:43:53,006 --> 00:43:54,196 this sounds really complicated 1041 00:43:54,266 --> 00:43:56,136 to write some helper function that's gonna take forever, 1042 00:43:56,356 --> 00:43:58,726 take a look at those links and make sure you're not trying 1043 00:43:58,726 --> 00:44:00,386 to do something that's already done for you. 1044 00:44:00,386 --> 00:44:05,106 So that's how we're going to detect if we're in a range. 1045 00:44:05,386 --> 00:44:09,396 So now we actually need to add them to the shuttle. 1046 00:44:09,396 --> 00:44:10,886 So remember that we can only add them 1047 00:44:10,886 --> 00:44:12,976 if our shuttle.seats has room. 1048 00:44:13,486 --> 00:44:15,866 And so we know that our shuttle.seats has room not 1049 00:44:15,866 --> 00:44:18,636 by its size because it's always going to be 35, 1050 00:44:18,936 --> 00:44:20,816 but if there are any empty spaces left. 1051 00:44:21,476 --> 00:44:24,146 So remember when we first initialize shuttle.seats, 1052 00:44:24,146 --> 00:44:25,836 we set every element to be null. 1053 00:44:26,316 --> 00:44:28,496 And so that's how we're representing an empty seat. 1054 00:44:28,966 --> 00:44:30,856 If it's null, that's means there's nobody there. 1055 00:44:31,746 --> 00:44:34,936 So once we detect who we're in range of, we can have some list 1056 00:44:34,936 --> 00:44:37,556 of TFs, we need to try to add each 1057 00:44:37,556 --> 00:44:39,226 of those TFs to the shuttle. 1058 00:44:39,666 --> 00:44:41,876 So to that we can basically through out seats 1059 00:44:42,366 --> 00:44:45,146 and if we find some null inside of our seats, 1060 00:44:45,286 --> 00:44:47,496 then we can put the TF there and then they're added and we need 1061 00:44:47,496 --> 00:44:48,496 to remove them from the world. 1062 00:44:48,966 --> 00:44:51,506 But if we don't find a null or a spot for that TF, 1063 00:44:52,006 --> 00:44:53,636 then we don't wanna add them and we don't want 1064 00:44:53,636 --> 00:44:54,566 to remove them from the world. 1065 00:44:54,566 --> 00:44:57,406 So just remember that just because you're in range, 1066 00:44:57,436 --> 00:45:00,656 you may be in range of multiple TFs at the same time, 1067 00:45:00,956 --> 00:45:02,426 so your pick up function shouldn't just add 1068 00:45:02,636 --> 00:45:03,246 that first one. 1069 00:45:03,676 --> 00:45:06,436 So if I click pick up and I'm by 5 TFs, I should get all 5. 1070 00:45:06,556 --> 00:45:08,536 I shouldn't have to click pick up 5 times. 1071 00:45:09,266 --> 00:45:11,096 So that's an important distinction. 1072 00:45:11,916 --> 00:45:13,896 So now we need to display each passenger. 1073 00:45:14,376 --> 00:45:19,356 So if we go back to this chart function, that looks so done 1074 00:45:19,356 --> 00:45:22,236 for us, it's unfortunately not 1075 00:45:22,706 --> 00:45:27,266 because if I can remember the alphabet, 1076 00:45:29,636 --> 00:45:31,256 we're actually just printing out. 1077 00:45:31,576 --> 00:45:34,436 If we picked up some person we're just saying, "To do." 1078 00:45:34,826 --> 00:45:37,416 So here we actually need to print out some information 1079 00:45:37,636 --> 00:45:39,556 like their name or maybe where they're going 1080 00:45:39,556 --> 00:45:42,486 or this can change based on what extra feature you're choosing 1081 00:45:42,486 --> 00:45:42,946 to implement. 1082 00:45:43,266 --> 00:45:46,726 But we need to replace this "to do" that's very innocuous 1083 00:45:46,996 --> 00:45:47,806 with the actual-- 1084 00:45:47,936 --> 00:45:52,906 with information regarding who's sitting in that seat. 1085 00:45:53,216 --> 00:45:55,136 So any questions on getting people inside 1086 00:45:55,136 --> 00:45:56,366 of the shuttle yet? 1087 00:45:58,386 --> 00:46:00,666 Okay, so now once they're inside of the shuttle, 1088 00:46:00,876 --> 00:46:01,986 we need to change the world. 1089 00:46:01,986 --> 00:46:04,166 So we can't pick up the same person multiple times. 1090 00:46:04,726 --> 00:46:08,296 So this is given to in the PSET spec, how to deal with this. 1091 00:46:08,566 --> 00:46:12,886 But in order to remove a place mark from the map, we just need 1092 00:46:12,886 --> 00:46:15,546 to say, okay, so from the Earth, I wanna get all 1093 00:46:15,546 --> 00:46:17,056 of the place marks that are here. 1094 00:46:17,396 --> 00:46:19,956 And now given this current place mark which I know 1095 00:46:19,956 --> 00:46:22,366 because I remember that each place mark associated 1096 00:46:22,366 --> 00:46:25,126 with each passenger, I can just say remove child. 1097 00:46:25,126 --> 00:46:27,956 And that's going to remove the place mark from the 3D world. 1098 00:46:28,956 --> 00:46:31,426 So this is the function again defined by Google for you. 1099 00:46:32,086 --> 00:46:35,916 And these-- these 2 snippets are given in the spec for you. 1100 00:46:36,756 --> 00:46:40,136 So removing a marker is just as easily-- it's just as easy. 1101 00:46:40,466 --> 00:46:43,526 So if we have some marker, M, that we remembered 1102 00:46:43,556 --> 00:46:45,586 in our passenger's array and we've got back a marker, 1103 00:46:45,726 --> 00:46:48,406 we can remove the marker by just saying m.set map null. 1104 00:46:49,036 --> 00:46:51,636 We're saying that there is no more map associate with map-- 1105 00:46:51,876 --> 00:46:54,326 with this marker or before the map associated 1106 00:46:54,326 --> 00:46:55,806 with marker was the one in the bottom right. 1107 00:46:56,126 --> 00:46:58,226 So if we say there is no more maker associated here, 1108 00:46:58,396 --> 00:46:59,566 then the marker is just not gonna show 1109 00:46:59,566 --> 00:47:00,396 up on the map anymore. 1110 00:47:01,596 --> 00:47:04,076 Questions about modifying the world 1111 00:47:04,986 --> 00:47:06,286 and for the PSET on general? 1112 00:47:07,276 --> 00:47:07,546 Question? 1113 00:47:08,116 --> 00:47:12,506 >> Your-- the distance, I don't have to recalculate it, 1114 00:47:12,506 --> 00:47:19,356 there was the distance function within shuttle? 1115 00:47:19,946 --> 00:47:22,796 >> Yes. So there is a function inside of shuttle that's going 1116 00:47:22,796 --> 00:47:25,426 to calculate the distance from your position of your shuttle 1117 00:47:25,706 --> 00:47:27,676 which is kept track for you automatically. 1118 00:47:27,676 --> 00:47:30,626 So we know where the shuttle is to some arbitrary point. 1119 00:47:32,036 --> 00:47:33,776 Whereas on the case of picking up, we wanna look, 1120 00:47:33,776 --> 00:47:34,876 are we close to Tommy? 1121 00:47:34,876 --> 00:47:36,076 Are we close to some other TF? 1122 00:47:36,716 --> 00:47:38,386 And all the TFs that we're close enough to, 1123 00:47:38,476 --> 00:47:41,096 then we wanna pick them up. 1124 00:47:41,096 --> 00:47:41,426 Make sense? 1125 00:47:45,716 --> 00:47:59,696 >> So like if the distance function the latitude 1126 00:47:59,696 --> 00:48:01,036 and longitude [inaudible] an array 1127 00:48:01,036 --> 00:48:03,476 and if [inaudible] their distance remain close 1128 00:48:03,476 --> 00:48:04,016 as opposed to-- 1129 00:48:04,016 --> 00:48:04,436 >> Exactly. 1130 00:48:05,026 --> 00:48:10,836 So you're gonna give this function the latitude 1131 00:48:10,836 --> 00:48:13,656 and longitude of a point. 1132 00:48:13,656 --> 00:48:16,446 You're gonna get back the distance 1133 00:48:17,096 --> 00:48:18,996 as a single scaler to that point. 1134 00:48:18,996 --> 00:48:19,936 Other questions? 1135 00:48:19,936 --> 00:48:21,126 Scalers are mathy word. 1136 00:48:21,126 --> 00:48:23,056 I'm surprised I just said that. 1137 00:48:23,056 --> 00:48:25,466 So the other function we need to implement 1138 00:48:25,466 --> 00:48:28,566 for this PSET is going to be drop off. 1139 00:48:28,666 --> 00:48:31,026 So again, kinda self-explanatory, 1140 00:48:31,026 --> 00:48:34,436 pick up brought TFs into the shuttle. 1141 00:48:34,516 --> 00:48:37,526 When we drop off TFs-- when we drive to the house 1142 00:48:37,526 --> 00:48:39,926 that they're trying to get to, 1143 00:48:39,926 --> 00:48:43,476 we need to remove them from the shuttle. 1144 00:48:43,476 --> 00:48:45,586 And so this is a little bit easier 1145 00:48:45,676 --> 00:48:50,026 because their place marks are already gone, we don't need 1146 00:48:50,026 --> 00:48:54,006 to like add a marker to the house or anything. 1147 00:48:54,006 --> 00:48:56,936 All we need to do is take them out of the shuttle. 1148 00:48:56,936 --> 00:49:01,116 So again, every time someone clicks drop off, we need to see 1149 00:49:01,116 --> 00:49:03,456 if we're near any of the houses. 1150 00:49:03,456 --> 00:49:08,896 So there might be some corner case actually where you can be 1151 00:49:08,896 --> 00:49:13,416 like between [inaudible] and like close enough to the 2 1152 00:49:13,416 --> 00:49:15,236 of them, I don't know. 1153 00:49:16,546 --> 00:49:20,386 So do make sure that you handle that corner case 1154 00:49:20,386 --> 00:49:21,936 which may or may not exist. 1155 00:49:22,066 --> 00:49:24,326 But basically it's gonna be the same deal as pick up. 1156 00:49:24,326 --> 00:49:25,616 We need to say, look at all of the houses 1157 00:49:25,616 --> 00:49:26,846 and am I near one of them? 1158 00:49:26,846 --> 00:49:31,246 And you can get where the houses are based on this houses array 1159 00:49:32,076 --> 00:49:35,246 because each element of the houses array has a latitude 1160 00:49:35,246 --> 00:49:39,966 and a longitude and we can again calculate via shuttle.distance. 1161 00:49:39,966 --> 00:49:42,606 Are we close enough to this house in order 1162 00:49:42,606 --> 00:49:44,886 to drop off passengers going to that house? 1163 00:49:44,886 --> 00:49:45,486 So in order to remember-- 1164 00:49:45,516 --> 00:49:46,626 or in order to know where passengers are going, 1165 00:49:46,656 --> 00:49:47,826 we do need to keep track of their destination, 1166 00:49:47,856 --> 00:49:49,056 which again is just going to be defined inside 1167 00:49:49,086 --> 00:49:49,806 of that array that we hand you. 1168 00:49:49,836 --> 00:49:51,066 So now, we need to actually drop passengers off. 1169 00:49:51,096 --> 00:49:52,386 So again, shuttle.distance will calculate distance. 1170 00:49:52,416 --> 00:49:53,886 Now to remove the passenger, you want to set that element 1171 00:49:53,916 --> 00:49:54,996 in the array to null because we're using nulls 1172 00:49:55,026 --> 00:49:55,776 to represent an empty seat. 1173 00:49:55,806 --> 00:49:57,186 So if you say passenger 6 he needs to get off here, 1174 00:49:57,216 --> 00:49:58,776 then you need to just go onto array or go in to shuttle.seats 1175 00:49:58,806 --> 00:49:59,976 where you're saying who is currently in your shuttle 1176 00:50:00,006 --> 00:50:01,476 and we can remove someone from the shuttle by saying okay, 1177 00:50:01,506 --> 00:50:02,196 well, that person is now null. 1178 00:50:02,226 --> 00:50:03,396 So while we could technically, and this is kind 1179 00:50:03,426 --> 00:50:04,086 of what we did last year, 1180 00:50:04,116 --> 00:50:05,496 you could have the seat array be dynamic and say that, well, 1181 00:50:05,526 --> 00:50:06,666 if you remove someone, then they're physical gone 1182 00:50:06,696 --> 00:50:08,046 from the array, and our array went from size 10 to 5 1183 00:50:08,076 --> 00:50:08,976 when we just dropped off 5 people. 1184 00:50:09,146 --> 00:50:11,756 >> We wouldn't really recommend doing that because functions 1185 00:50:11,756 --> 00:50:14,376 like chart are going to assume a fixed size of the array 1186 00:50:14,806 --> 00:50:17,486 and it's also a little bit harder to do that. 1187 00:50:17,486 --> 00:50:19,266 So for this piece I'm recommending you just say, 1188 00:50:19,476 --> 00:50:23,696 if person 5 needs to get off, just set seats 5 equal to null. 1189 00:50:24,596 --> 00:50:26,136 And so that's how we're going to remove them. 1190 00:50:26,636 --> 00:50:28,736 And so doing so will also create an empty seat. 1191 00:50:28,996 --> 00:50:30,766 So if you have a full shuttle and drop people off, 1192 00:50:30,916 --> 00:50:31,996 you should be able to drive 1193 00:50:31,996 --> 00:50:36,126 around to a new person and pick them up. 1194 00:50:36,126 --> 00:50:37,416 Any questions there? 1195 00:50:37,926 --> 00:50:44,906 Alright, so finally, just some extra features, here are a few 1196 00:50:44,906 --> 00:50:47,546 of them, you can do things like implement points for picking 1197 00:50:47,546 --> 00:50:50,566 up passengers, implement a timer, things like that. 1198 00:50:51,076 --> 00:50:53,316 And we also have the condition, you could make your own feature, 1199 00:50:53,316 --> 00:50:54,556 if you think something is really cool 1200 00:50:54,556 --> 00:50:56,506 and you wanna make your own feature, your addition 1201 00:50:56,506 --> 00:50:59,146 that we haven't listed just know your TF before you do 1202 00:50:59,146 --> 00:51:01,446 so to get approval to make sure it's not too simple 1203 00:51:01,446 --> 00:51:02,236 or too complicated. 1204 00:51:02,236 --> 00:51:04,636 If you wanna implement multiplayer shuttles like we had 1205 00:51:04,636 --> 00:51:06,746 at the fair that's probably a little too complicated for this. 1206 00:51:07,136 --> 00:51:09,136 But definitely if you think you could do something cool 1207 00:51:09,316 --> 00:51:11,636 which we recommend, think of something cool, you know, 1208 00:51:11,636 --> 00:51:13,226 just email your TF and get approval 1209 00:51:13,226 --> 00:51:16,466 and you can do that for this PSET. 1210 00:51:16,676 --> 00:51:18,776 So any questions on PSET 8? 1211 00:51:20,056 --> 00:51:20,226 Yup? 1212 00:51:21,346 --> 00:51:27,896 >> Actually going back to houses [inaudible] is do we assume 1213 00:51:30,176 --> 00:51:32,176 that there is already array of [inaudible] or-- 1214 00:51:32,176 --> 00:51:32,306 >> Yes. 1215 00:51:32,306 --> 00:51:33,076 [ Inaudible Remark ] 1216 00:51:33,076 --> 00:51:35,706 >> So there already exists, some array of houses 1217 00:51:35,706 --> 00:51:38,006 and it's defined inside of houses.js. 1218 00:51:38,116 --> 00:51:41,606 So this is just capital house and remember 1219 00:51:41,606 --> 00:51:43,076 that this is an associative array 1220 00:51:43,206 --> 00:51:44,686 because this starts with a brace. 1221 00:51:44,966 --> 00:51:48,076 And so we can access the location of Adam's house 1222 00:51:48,366 --> 00:51:51,056 by saying houses bracket quotes Adam's house. 1223 00:51:51,396 --> 00:51:52,756 And that'll spit back an object 1224 00:51:52,756 --> 00:51:55,286 where you could say dot LAT or dot LNG. 1225 00:51:55,886 --> 00:51:55,986 Yup? 1226 00:51:57,496 --> 00:51:59,826 >> We're [inaudible] your directly wanna access 1227 00:51:59,906 --> 00:52:03,926 like latitude of a certain house, 1228 00:52:04,336 --> 00:52:07,166 so like houses.adam's house [inaudible]? 1229 00:52:07,266 --> 00:52:09,176 >> Right. So we can't-- So if we wanted 1230 00:52:09,176 --> 00:52:11,396 to just access this directly, so we can't say 1231 00:52:11,396 --> 00:52:14,986 in this case dot Adam's house only because this is 2 words. 1232 00:52:15,496 --> 00:52:24,646 So we need to say something like-- so we could say houses, 1233 00:52:24,786 --> 00:52:27,366 Adam's house.lat, right. 1234 00:52:27,426 --> 00:52:29,996 So this-- and once we say Adam's-- quotes-- 1235 00:52:30,296 --> 00:52:32,396 houses quotes Adam's house, this is going 1236 00:52:33,256 --> 00:52:36,476 to give us back some object, so this effectively evaluates 1237 00:52:36,476 --> 00:52:38,376 to an associative array and now that we have 1238 00:52:38,376 --> 00:52:41,596 that associative array, we can say dot lat to get 1239 00:52:41,596 --> 00:52:43,906 at the latitude element of that array. 1240 00:52:44,026 --> 00:52:45,886 So I can also say if I didn't wanna say do 1241 00:52:46,076 --> 00:52:49,096 and be consistent I could also say-- not dot-- quotes LAT. 1242 00:52:49,846 --> 00:52:50,976 And so that would be the same thing. 1243 00:52:51,546 --> 00:52:51,776 Yup? 1244 00:52:52,516 --> 00:53:01,126 [ Inaudible Remark ] 1245 00:53:01,626 --> 00:53:02,646 >> Right. And so that's a good question. 1246 00:53:02,646 --> 00:53:03,666 So how is this different? 1247 00:53:03,666 --> 00:53:06,106 And so you notice that in the houses we started 1248 00:53:06,106 --> 00:53:08,286 with the curly brace but now we're starting 1249 00:53:08,286 --> 00:53:09,016 with the square bracket. 1250 00:53:09,156 --> 00:53:15,426 So if I wanted to get Alex, I would end up saying, pass-- 1251 00:53:15,426 --> 00:53:16,816 I can't I-- passengers. 1252 00:53:17,296 --> 00:53:18,786 And so now this is going to be a number 1253 00:53:18,946 --> 00:53:21,706 because this is just a numerically indexed array 'cause 1254 00:53:21,706 --> 00:53:22,856 it starts with the square bracket. 1255 00:53:23,116 --> 00:53:25,806 And now I could say something like dot name 1256 00:53:27,286 --> 00:53:29,886 or I could say inside of quotes name. 1257 00:53:30,426 --> 00:53:31,466 Make sense? 1258 00:53:31,646 --> 00:53:35,096 So generally, when we're iterating through this, 1259 00:53:35,436 --> 00:53:37,686 if we have this inside of a for int then our-- 1260 00:53:37,686 --> 00:53:39,006 or whatever variable we're using 1261 00:53:39,006 --> 00:53:41,556 to iterate is gonna wanna go there not inside 1262 00:53:41,556 --> 00:53:42,256 of the second one. 1263 00:53:42,706 --> 00:53:44,906 Other questions? 1264 00:53:46,386 --> 00:53:46,546 Yup? 1265 00:53:47,196 --> 00:53:51,126 >> And [inaudible] through the houses array, is there-- 1266 00:53:51,226 --> 00:53:53,106 by the way we're [inaudible] particular distance 1267 00:53:54,656 --> 00:54:02,206 through the house, is there a more efficient way of doing it 1268 00:54:03,016 --> 00:54:05,446 than just looking with the for house [inaudible] houses loop 1269 00:54:05,446 --> 00:54:12,076 and then saying distance of this house to the bus? 1270 00:54:12,276 --> 00:54:13,546 >> So is there a more efficient way 1271 00:54:13,546 --> 00:54:15,026 of calculating a distance to a house? 1272 00:54:15,376 --> 00:54:18,846 So not really, because we don't really know immediately 1273 00:54:18,846 --> 00:54:21,466 where our shuttle is relative to every single house, 1274 00:54:21,766 --> 00:54:23,956 so we need to check, are we near Adam's, are we near [inaudible]? 1275 00:54:23,956 --> 00:54:26,226 I mean you could probably implement some heuristic that's 1276 00:54:26,226 --> 00:54:27,746 like, well, if you're latitude is less than this, 1277 00:54:27,746 --> 00:54:28,546 then you're not at the quad 1278 00:54:28,546 --> 00:54:29,886 because it's-- at the North Pole. 1279 00:54:30,256 --> 00:54:31,646 But we don't really need to do that. 1280 00:54:31,646 --> 00:54:32,906 Effectively, yeah [inaudible]. 1281 00:54:32,906 --> 00:54:37,616 So effectively, we just need to go through each of these houses 1282 00:54:37,616 --> 00:54:38,806 and calculate the distance of it. 1283 00:54:38,806 --> 00:54:40,356 That wouldn't be-- that's too inefficient 1284 00:54:40,356 --> 00:54:42,196 because calculating distance is quick and there aren't 1285 00:54:42,196 --> 00:54:43,666 that many houses or passengers really. 1286 00:54:44,226 --> 00:54:45,506 Other questions? 1287 00:54:45,506 --> 00:54:52,376 Alright, well if not, then good luck on PSET 8. 1288 00:54:53,336 --> 00:54:54,706 These were the walkthroughs. 1289 00:54:54,706 --> 00:54:56,986 Thank you very much for allowing me to teach them 1290 00:54:56,986 --> 00:54:58,406 and I really hope you find them helpful. 1291 00:54:58,406 --> 00:54:59,936 And that's it for this semester. 1292 00:55:00,516 --> 00:55:10,540 [ Applause ]