1 00:00:00,506 --> 00:00:10,506 [ Silence ] 2 00:00:11,006 --> 00:00:11,366 >> Alright. 3 00:00:11,596 --> 00:00:12,906 This is CS50. 4 00:00:12,906 --> 00:00:14,436 Welcome to week 10! 5 00:00:14,436 --> 00:00:16,996 We've got some great fun in stored for you today. 6 00:00:16,996 --> 00:00:19,656 It is now in fact our final project season, 7 00:00:19,656 --> 00:00:21,516 your pre-proposals were presumably sent 8 00:00:21,516 --> 00:00:24,376 over to your TF a couple of hours ago. 9 00:00:24,376 --> 00:00:26,316 If not, do make sure you are conversing 10 00:00:26,316 --> 00:00:27,406 with your TFs about them. 11 00:00:27,656 --> 00:00:31,106 But know that if you're looking for something new to try, 12 00:00:31,106 --> 00:00:34,006 something new to learn or you've always wondered how iPhone apps 13 00:00:34,006 --> 00:00:38,226 or Android apps or Facebook apps or Facebook plugins and all 14 00:00:38,226 --> 00:00:40,896 of that works realizes that there's a good deal of seminars 15 00:00:40,896 --> 00:00:42,466 that have happened this past Saturday. 16 00:00:42,706 --> 00:00:44,026 The videos are starting to go up. 17 00:00:44,026 --> 00:00:46,576 And they'll also be happening this coming weekend so check 18 00:00:46,576 --> 00:00:50,516 out CS50.net/seminars if you'd like to bootstrap yourself 19 00:00:50,516 --> 00:00:51,806 with something new entirely. 20 00:00:51,806 --> 00:00:52,826 And that will be one of the themes 21 00:00:52,826 --> 00:00:56,046 of today teaching yourself some new language 22 00:00:56,046 --> 00:00:57,316 or topic altogether. 23 00:00:57,486 --> 00:01:00,226 Also, to help seed you with some ideas 24 00:01:00,226 --> 00:01:02,416 if you're not quite sure what you wanna do and you really-- 25 00:01:02,416 --> 00:01:04,126 you didn't know what even to pre-propose. 26 00:01:04,446 --> 00:01:06,936 We've been gathering ideas over the past year 27 00:01:07,456 --> 00:01:10,496 that now live at projects.cs50.net. 28 00:01:10,716 --> 00:01:12,936 So you may recall if you are at Harvard Thinks Big I sort 29 00:01:12,936 --> 00:01:15,966 of challenged that audience one night to submit their ideas. 30 00:01:15,966 --> 00:01:18,136 And we had to go through and filter some of them 31 00:01:18,136 --> 00:01:20,866 out because they simply weren't solvable by CS50, 32 00:01:20,916 --> 00:01:23,416 cake in a blender, you may recall it was one of them. 33 00:01:23,536 --> 00:01:27,266 But what you now see at projects.cs50.net is already 50 34 00:01:27,266 --> 00:01:30,586 or more ideas that are right for the taking. 35 00:01:30,586 --> 00:01:32,936 In fact we've had some faculties, some other students, 36 00:01:32,936 --> 00:01:35,526 students groups on campus contribute some of these ideas. 37 00:01:35,526 --> 00:01:39,566 So particularly if you would enjoy making something 38 00:01:39,566 --> 00:01:42,846 that real people then go on to use friends, student groups, 39 00:01:42,846 --> 00:01:44,576 departments or the like do sift 40 00:01:44,576 --> 00:01:46,296 through the various posts that are here. 41 00:01:46,296 --> 00:01:50,226 And in fact, if you yourself have some ideas do feel free 42 00:01:50,226 --> 00:01:52,676 to click the very large link here post a project 43 00:01:52,906 --> 00:01:56,206 and you'll be able to sift through some of the ideas 44 00:01:56,246 --> 00:01:59,176 that are absolutely within the grasp now 45 00:01:59,176 --> 00:02:01,356 of CS50 students to solve. 46 00:02:01,356 --> 00:02:03,706 So that's projects.cs50.net. 47 00:02:04,056 --> 00:02:06,536 So also coming up this Friday is the deadline for you 48 00:02:06,536 --> 00:02:08,196 and your section mates to find all 49 00:02:08,196 --> 00:02:10,146 of these computer scientists on campus. 50 00:02:10,146 --> 00:02:12,176 So you recall from P set 5 you have recovered all 51 00:02:12,176 --> 00:02:13,876 of these JPEGs and you now need 52 00:02:13,876 --> 00:02:15,636 to discover these people on campus. 53 00:02:15,636 --> 00:02:18,466 No one has submitted all of the photographs just 54 00:02:18,466 --> 00:02:20,666 yet so realize the-- there's still plenty of time. 55 00:02:20,906 --> 00:02:23,266 And we will do something a little special for the section 56 00:02:23,266 --> 00:02:26,416 that ends up submitting the most photographs of themselves 57 00:02:26,726 --> 00:02:28,936 with these various computer scientists. 58 00:02:29,096 --> 00:02:32,106 You need not find the shark, just Lee here. 59 00:02:32,756 --> 00:02:35,396 You need not to find the camel depicted here. 60 00:02:35,396 --> 00:02:37,706 This fellow will be a little harder 61 00:02:37,706 --> 00:02:39,806 than most to actually find. 62 00:02:39,806 --> 00:02:42,486 But bonus points if you can actually score that photo. 63 00:02:43,786 --> 00:02:46,776 This actually is how Jeremy studies. 64 00:02:47,086 --> 00:02:49,526 So you might find him in his dorm room like this. 65 00:02:49,576 --> 00:02:52,076 Some of our TFs of course have part time gigs else 66 00:02:52,076 --> 00:02:55,236 where so you might find Ben, I think at Avalon or the like. 67 00:02:55,916 --> 00:02:58,706 Phil here also likes to spend his time outdoors. 68 00:02:58,776 --> 00:03:01,426 This one I actually never understood [laughter] what was 69 00:03:01,666 --> 00:03:02,596 going on here. 70 00:03:02,906 --> 00:03:07,176 And of course, we had a couple of masked staff depicted here 71 00:03:07,176 --> 00:03:09,816 and here and a less effective mask here. 72 00:03:11,016 --> 00:03:14,496 And you may recognize this face now from the article you read 73 00:03:14,496 --> 00:03:17,436 from the recent P set namely Brian Kernighan my mentor who's 74 00:03:17,436 --> 00:03:19,036 actually spending time with us this year. 75 00:03:19,036 --> 00:03:20,416 And then a couple of the staff 76 00:03:20,416 --> 00:03:23,856 of course are wearing their own CS50 wardrobe 77 00:03:23,856 --> 00:03:26,216 which is now at store.cs50.net. 78 00:03:26,216 --> 00:03:28,116 This isn't so much of our version of a bake sale 79 00:03:28,116 --> 00:03:31,566 as it really is just an opportunity to wear CS50. 80 00:03:31,646 --> 00:03:34,466 And tell your friends that, damn it, you took 81 00:03:34,466 --> 00:03:36,986 and conquered CS50 half their term 82 00:03:36,986 --> 00:03:40,126 and so we have Yuki depicted here in 2008's model. 83 00:03:40,436 --> 00:03:41,896 Jan Sue [phonetic] pictured here. 84 00:03:42,056 --> 00:03:44,066 And then also we have one 85 00:03:44,066 --> 00:03:46,376 of the teaching fellow's daughters depicted here 86 00:03:46,596 --> 00:03:48,966 with her lovable CS50 bear. 87 00:03:48,966 --> 00:03:52,146 In fact, I asked if the TF could bring the bear 88 00:03:52,146 --> 00:03:54,156 but unfortunately, his daughter would not let him. 89 00:03:54,486 --> 00:03:56,946 I could not-- he writes me this morning in an e-mail. 90 00:03:57,116 --> 00:03:59,126 Well, I could not separate my daughter from her bear 91 00:03:59,126 --> 00:04:02,496 and I cannot bring to Sanders because she has to go to school 92 00:04:02,656 --> 00:04:04,176 so here's a picture of the bear. 93 00:04:04,476 --> 00:04:08,456 A few information points Julia, my daughter was born in Paris. 94 00:04:08,916 --> 00:04:10,636 She's attending Harvard University, 95 00:04:11,156 --> 00:04:12,156 the Child Care Center. 96 00:04:12,906 --> 00:04:15,156 She had an Italian boyfriend 97 00:04:15,156 --> 00:04:17,286 from Rome who's named is Alessandro 98 00:04:17,616 --> 00:04:20,366 and he is also attending Harvard University 99 00:04:21,086 --> 00:04:23,326 so that there is the CS50 bear. 100 00:04:23,326 --> 00:04:27,386 But it's one thing to show you these things in picture form. 101 00:04:27,386 --> 00:04:30,396 It's another thing to actually have humans parade here on stage 102 00:04:30,696 --> 00:04:33,806 so I give you a little show from this year's TFs and CAs. 103 00:04:33,806 --> 00:04:33,873 [ Background Music ] 104 00:04:33,873 --> 00:04:40,906 >> So we all, by this point we all live and breathe CS50. 105 00:04:41,056 --> 00:04:43,916 Now, it's time to start wearing CS50. 106 00:04:44,496 --> 00:04:47,966 Ladies and gentlemen the 2010 CS50 collection! 107 00:04:48,516 --> 00:04:53,766 [ Laughter ] 108 00:04:54,266 --> 00:04:59,516 [ Applause ] 109 00:05:00,016 --> 00:05:00,083 [ Background Music ] 110 00:05:00,083 --> 00:05:03,056 >> Is this thing on? 111 00:05:03,056 --> 00:05:04,586 Jan Sue, so hot right now. 112 00:05:05,106 --> 00:05:09,166 Jan Sue. So, hi guys, I'm Alex and I'm a TF. 113 00:05:09,166 --> 00:05:12,986 And I'm the president of the association of really, really, 114 00:05:13,176 --> 00:05:19,086 ridiculously good looking male and not male CS50 TFs and CAs. 115 00:05:19,086 --> 00:05:20,786 [Laughter] And if you want to be as cool 116 00:05:20,786 --> 00:05:22,256 as us you should dress like us. 117 00:05:22,256 --> 00:05:23,976 Guys let show them what we're wearing. 118 00:05:24,516 --> 00:05:29,281 [ Laughter ] 119 00:05:29,781 --> 00:05:34,546 [ Applause ] 120 00:05:35,046 --> 00:05:36,656 >> So, we're pretty ridiculously good looking 121 00:05:36,726 --> 00:05:39,216 and so we want you guys to be too. 122 00:05:39,286 --> 00:05:43,276 So you guys should buy these shirts and pants and boxers, 123 00:05:43,476 --> 00:05:46,666 Scott can show you those though [laughter] not on stage. 124 00:05:46,836 --> 00:05:47,756 And yeah that's it. 125 00:05:47,836 --> 00:05:48,786 You should buy our stuff. 126 00:05:49,516 --> 00:05:52,266 [ Cheering ] 127 00:05:52,766 --> 00:05:55,516 [ Appluase ] 128 00:05:56,016 --> 00:06:07,000 [ Music ] 129 00:06:08,646 --> 00:06:11,416 >> Alright, a very nice segway 130 00:06:11,416 --> 00:06:16,346 from the faces pictured here is new faces for 2011. 131 00:06:16,346 --> 00:06:19,236 So realize as the semester starts to wind down we start 132 00:06:19,236 --> 00:06:22,336 to wind up the recruiting process for fall 2011. 133 00:06:22,586 --> 00:06:23,566 As you may have gathered 134 00:06:23,566 --> 00:06:25,606 from this year there're two primary roles 135 00:06:25,606 --> 00:06:27,516 that we fill each year in CS50. 136 00:06:27,516 --> 00:06:28,926 One is that of teaching fellow. 137 00:06:29,126 --> 00:06:31,516 These are TFs in a typical sense leading sections. 138 00:06:31,516 --> 00:06:33,796 We're working with students regarding problem sets, 139 00:06:33,796 --> 00:06:36,056 holding office hours, fielding question and the like. 140 00:06:36,056 --> 00:06:38,586 And then we also have the role of course assistant 141 00:06:38,966 --> 00:06:41,466 which is a volunteer role of just 2 hours per week 142 00:06:41,706 --> 00:06:43,626 where by the course assistance-- 143 00:06:43,626 --> 00:06:46,046 this is an opportunity to keep one foot in the course 144 00:06:46,046 --> 00:06:48,736 and remain involved in the course in all CS50 goings on 145 00:06:48,966 --> 00:06:52,706 and work with students, fall 2011 students, one on one, 146 00:06:52,826 --> 00:06:53,986 you know, during office hour. 147 00:06:53,986 --> 00:06:55,476 So realize if you'd like to maintain 148 00:06:55,476 --> 00:06:57,886 that personal connection to the course and realize too 149 00:06:57,886 --> 00:07:00,626 that if you'd like to learn this material all the better. 150 00:07:00,626 --> 00:07:03,726 Frankly, there's no better way than actually teaching it one 151 00:07:03,726 --> 00:07:04,816 on one with other students. 152 00:07:04,816 --> 00:07:07,606 So realize that on the course's home page before long there will 153 00:07:07,606 --> 00:07:10,266 be a link with which you can apply to be a TF or CA 154 00:07:10,266 --> 00:07:13,716 and then we will begin this winter the interview process. 155 00:07:13,716 --> 00:07:15,556 So we would love for as many of you as possible 156 00:07:15,796 --> 00:07:17,626 to join next year's team. 157 00:07:17,626 --> 00:07:22,716 So, we left off last time with the look at JavaScript 158 00:07:22,716 --> 00:07:24,396 and various ways in which the wib-- 159 00:07:24,506 --> 00:07:26,706 web is getting much sexier these days. 160 00:07:26,706 --> 00:07:29,836 And that's largely thanks to this technology called AJAX, 161 00:07:29,906 --> 00:07:32,166 Asynchronous JavaScript and XML. 162 00:07:32,446 --> 00:07:34,416 But that acronym really doesn't apply 163 00:07:34,416 --> 00:07:37,506 so much anymore you can use various other technologies, 164 00:07:37,506 --> 00:07:38,776 one of them called JSON, 165 00:07:38,776 --> 00:07:41,776 JavaScript Object Notation instead of XML. 166 00:07:41,776 --> 00:07:44,586 And we'll actually look at this JSON notation today. 167 00:07:44,826 --> 00:07:48,036 But the picture we painted last week essentially boiled 168 00:07:48,036 --> 00:07:50,086 down to this-- this graphic here. 169 00:07:50,086 --> 00:07:51,126 If you have a website 170 00:07:51,126 --> 00:07:54,246 like Facebook whose interface clearly updates itself 171 00:07:54,246 --> 00:07:56,926 on a schedule, every few seconds a you post appears 172 00:07:56,926 --> 00:08:00,076 in your news feed or every few seconds something interesting 173 00:08:00,076 --> 00:08:03,586 happens on the courses home-- on the Facebook's home page. 174 00:08:03,776 --> 00:08:06,636 Well, that's because the whole page is obviously not reloading. 175 00:08:06,636 --> 00:08:08,296 You're not seeing a white screen for a moment 176 00:08:08,296 --> 00:08:10,756 and then the whole page refreshes instead just small 177 00:08:10,756 --> 00:08:12,466 subsets of this page are reloading. 178 00:08:12,696 --> 00:08:13,296 And that's thanks 179 00:08:13,296 --> 00:08:17,066 to a technology called AJAX whereby using JavaScript you can 180 00:08:17,066 --> 00:08:20,176 write code that users-- Facebook users then download 181 00:08:20,366 --> 00:08:22,826 that gets executed in their browser then on some schedule, 182 00:08:22,826 --> 00:08:26,736 every few seconds or minutes re-requests data from the server 183 00:08:26,906 --> 00:08:29,426 or gets that data back whether imaginary or text 184 00:08:29,426 --> 00:08:32,816 and then it can be embedded into the web page's DOM 185 00:08:32,816 --> 00:08:34,266 or Document Object Model. 186 00:08:34,266 --> 00:08:37,896 And the special-- the special feature of modern browsers 187 00:08:37,926 --> 00:08:41,406 that enable this is that thing called XMLHTTPRequest. 188 00:08:41,496 --> 00:08:44,816 And so this picture here just paints the story that happens. 189 00:08:44,816 --> 00:08:46,336 The browser there in step 1 190 00:08:46,336 --> 00:08:49,196 in the user interface makes a JavaScript call, 191 00:08:49,196 --> 00:08:52,796 using in step 2 this XMLHTTPRequest feature. 192 00:08:53,106 --> 00:08:57,026 That feature enables a browser to make step 3, an HTTP request 193 00:08:57,286 --> 00:09:00,866 to some server, www.facebook.com or CS50.net 194 00:09:00,866 --> 00:09:02,016 or whatever the site may be. 195 00:09:02,256 --> 00:09:04,636 In step 4, the web server actually responds 196 00:09:04,866 --> 00:09:07,136 and what's neat is that the web server can respond 197 00:09:07,136 --> 00:09:10,236 with just text, with something called XML which frankly is 198 00:09:10,236 --> 00:09:12,426 like HTML but you make up your own tags 199 00:09:12,426 --> 00:09:14,526 and so you can send back a database like information. 200 00:09:14,856 --> 00:09:16,636 And then this thing called JSON notation, 201 00:09:16,636 --> 00:09:19,706 JavaScript Object Notation which will again see today. 202 00:09:19,956 --> 00:09:21,676 Recall to contextualize this last week. 203 00:09:21,916 --> 00:09:25,336 We had that-- those very simple examples using Yahoo Finance 204 00:09:25,566 --> 00:09:28,976 whereby we query the server without reloading the whole page 205 00:09:28,976 --> 00:09:30,946 and then embedded the textual response, 206 00:09:30,976 --> 00:09:31,866 the current stock price 207 00:09:31,866 --> 00:09:36,166 of whatever stock ticker we entered into the pages DOM. 208 00:09:36,166 --> 00:09:38,316 And that was a very small instance of AJAX but it's 209 00:09:38,316 --> 00:09:40,986 with that basic building block that all of the magic happens 210 00:09:41,256 --> 00:09:43,436 on Gmail and Facebook and the like these days. 211 00:09:43,466 --> 00:09:44,896 Because in step 5 once 212 00:09:44,896 --> 00:09:46,906 that response comes back whether an XML 213 00:09:46,906 --> 00:09:50,306 or some other format your same JavaScript code has an event 214 00:09:50,306 --> 00:09:53,366 handler, a function whose purpose in life is to receive 215 00:09:53,366 --> 00:09:55,166 that response and then do something 216 00:09:55,166 --> 00:09:57,406 with it namely updating the webpage. 217 00:09:57,976 --> 00:10:01,206 So, all of this works because the internet of course, 218 00:10:01,316 --> 00:10:02,976 underlies the World Wide Web. 219 00:10:03,086 --> 00:10:04,606 >> The web is a service on the internet. 220 00:10:04,606 --> 00:10:07,056 The internet is the physical infrastructure underlying 221 00:10:07,056 --> 00:10:07,586 that service. 222 00:10:07,836 --> 00:10:11,616 And just to recap some basic jargon before we take a more 223 00:10:11,616 --> 00:10:16,686 visual tour of these topics, recall this few fundamentals, 224 00:10:16,686 --> 00:10:20,546 so recall that we discussed two weeks ago IP, Internet Protocol. 225 00:10:20,546 --> 00:10:22,196 And you almost always hear this thing in the context 226 00:10:22,196 --> 00:10:24,036 of an IP address which is a numeric address 227 00:10:24,376 --> 00:10:26,136 that uniquely identifies your computer. 228 00:10:26,306 --> 00:10:32,166 We talked briefly about TCP this is a protocol that allows data 229 00:10:32,256 --> 00:10:34,616 to get from point A to B reliably. 230 00:10:34,616 --> 00:10:37,546 It's this software, this protocol TCP that ensures 231 00:10:37,776 --> 00:10:40,606 that if something bad happens between points A and B, 232 00:10:40,606 --> 00:10:42,806 a router goes down, packets get lost, 233 00:10:42,856 --> 00:10:46,306 data gets corrupted just stuff happens well TCP insures 234 00:10:46,306 --> 00:10:49,096 that it will resend that same data again and again 235 00:10:49,286 --> 00:10:51,366 until your e-mail or your Instant Message 236 00:10:51,366 --> 00:10:53,656 or your web page request actually makes it 237 00:10:53,696 --> 00:10:55,436 through to point B. So that's TCP. 238 00:10:55,436 --> 00:10:58,736 This is in contrast to another protocol called UDP. 239 00:10:58,946 --> 00:11:01,206 And UDP is really just a best effort 240 00:11:01,206 --> 00:11:04,176 and we'll see it mentioned in just a moment but UDP is good 241 00:11:04,176 --> 00:11:05,606 for streaming protocols. 242 00:11:05,606 --> 00:11:08,386 If you're watching like some baseball game live via web 243 00:11:08,386 --> 00:11:10,656 browser being streamed from somewhere well, 244 00:11:10,696 --> 00:11:12,906 you probably don't want the thing to buffer and buffer 245 00:11:13,156 --> 00:11:14,866 if there's congestion on the internet 246 00:11:14,866 --> 00:11:17,286 because then you the viewer are gonna fall behind. 247 00:11:17,286 --> 00:11:19,676 And the baseball game is no longer gonna be real time 248 00:11:19,916 --> 00:11:22,106 so sometimes there are contexts like that 249 00:11:22,516 --> 00:11:25,526 where you don't really care if the data is recent resent, 250 00:11:25,526 --> 00:11:27,556 you'd rather the program just forge ahead. 251 00:11:27,556 --> 00:11:29,696 And I missed that play but that's fine, 252 00:11:29,696 --> 00:11:31,136 I wanna stay in real time. 253 00:11:31,136 --> 00:11:33,036 So that's something called UDP. 254 00:11:33,036 --> 00:11:35,396 And then lastly, we talked about routers. 255 00:11:35,396 --> 00:11:38,086 Routers are big-- are computers whose purpose in life is 256 00:11:38,086 --> 00:11:40,866 to route data, data in this way, data out that way. 257 00:11:41,116 --> 00:11:43,256 And then we talked about context of your homes. 258 00:11:43,256 --> 00:11:44,226 You might have a switch. 259 00:11:44,446 --> 00:11:46,936 A switch is a fairly dumb device that just has lots 260 00:11:46,936 --> 00:11:48,326 of ethernet ports that allows you 261 00:11:48,326 --> 00:11:50,346 to connect multiple computers together. 262 00:11:50,606 --> 00:11:52,806 What you are about to see also I mentioned something called a 263 00:11:52,806 --> 00:11:55,676 router switch, which really isn't standard terminology, 264 00:11:55,676 --> 00:11:58,386 when they say router switch they mean switch, just the device 265 00:11:58,386 --> 00:12:00,016 that connects all of these computers together. 266 00:12:00,316 --> 00:12:03,626 So we saw the teaser trailer for this a couple of weeks ago. 267 00:12:03,626 --> 00:12:05,766 The actual film is about 10 minutes long 268 00:12:05,766 --> 00:12:09,136 but I think it does a far better job of painting a picture 269 00:12:09,366 --> 00:12:10,906 of how the internet works 270 00:12:10,906 --> 00:12:14,556 if with some silly-- silly names in it. 271 00:12:15,096 --> 00:12:18,246 So I give you now for the next few minutes what's called 272 00:12:18,346 --> 00:12:21,126 Warriors of the Net. 273 00:12:22,456 --> 00:12:24,846 This is indeed how the internet works. 274 00:12:26,516 --> 00:12:55,356 [ Music ] 275 00:12:55,856 --> 00:13:24,696 [ Noise ] 276 00:13:25,196 --> 00:13:28,306 >> For the first time in history people 277 00:13:28,306 --> 00:13:33,036 and machinery are working together realizing a dream, 278 00:13:33,506 --> 00:13:36,706 a uniting force that knows no geographical boundaries 279 00:13:37,076 --> 00:13:40,316 without regard to race, greed, or color, 280 00:13:40,316 --> 00:13:45,636 a new era where communication truly brings people together. 281 00:13:46,066 --> 00:13:51,166 This is the dawn of the net. 282 00:13:51,186 --> 00:13:53,186 [ Music ] 283 00:13:53,206 --> 00:13:54,316 >> Wanna know how it works? 284 00:13:54,906 --> 00:13:59,556 Click here to begin your journey into the Net. 285 00:13:59,556 --> 00:14:01,036 [ Background Music ] 286 00:14:01,036 --> 00:14:05,396 >> Now, exactly what happened when you click on that link? 287 00:14:06,026 --> 00:14:07,656 You started a flow of information. 288 00:14:08,216 --> 00:14:11,206 This information travels down into your own personal mail room 289 00:14:11,206 --> 00:14:15,536 where Mr. IP packages it, labels it and sends it on its way. 290 00:14:16,636 --> 00:14:18,706 Each packet is limited in its size. 291 00:14:19,046 --> 00:14:22,136 The mail room must decide how to divide the information 292 00:14:22,516 --> 00:14:23,536 and how to package it. 293 00:14:24,246 --> 00:14:27,716 Now the package needs a label containing important information 294 00:14:28,016 --> 00:14:30,996 such as sender's address, receiver's address 295 00:14:31,446 --> 00:14:33,096 and the type of packet it is. 296 00:14:34,516 --> 00:14:41,766 [ Music ] 297 00:14:42,266 --> 00:14:49,516 [ Noise ] 298 00:14:50,016 --> 00:14:50,083 [ Background Music ] 299 00:14:50,083 --> 00:14:51,666 >> Because this particular packet is going 300 00:14:51,666 --> 00:14:52,636 out on to the internet. 301 00:14:53,106 --> 00:14:55,616 It also gets an address for the proxy server 302 00:14:56,016 --> 00:14:58,266 which has a special function as we'll see later. 303 00:14:59,696 --> 00:15:04,066 The packet is now launched on to your Local Area Network or LAN. 304 00:15:04,826 --> 00:15:08,336 This network is used to connect all the local computers, 305 00:15:08,476 --> 00:15:11,486 routers, printers et cetera for information exchange 306 00:15:11,596 --> 00:15:13,326 within the physical walls of the buildings. 307 00:15:14,136 --> 00:15:16,046 The LANs are pretty uncontrolled placed 308 00:15:16,046 --> 00:15:19,706 and unfortunately accidents can happen. 309 00:15:20,516 --> 00:15:24,266 [ Music ] 310 00:15:24,766 --> 00:15:28,516 [ Noise ] 311 00:15:29,016 --> 00:15:29,083 [ Background Music ] 312 00:15:29,376 --> 00:15:30,736 >> The highway of the LAN is packed 313 00:15:31,036 --> 00:15:32,386 with all types of information. 314 00:15:32,806 --> 00:15:35,096 These are IP packets, Novel packets, 315 00:15:35,626 --> 00:15:38,926 Appletalk packets they're going against traffic as usual. 316 00:15:39,416 --> 00:15:41,626 The local router reads the address 317 00:15:41,626 --> 00:15:44,926 and if necessary lifts the packet onto another network. 318 00:15:46,576 --> 00:15:49,826 Ah, the router a symbol of control 319 00:15:49,826 --> 00:15:51,996 in a seemingly disorganized world. 320 00:15:51,996 --> 00:15:52,796 >> Oops, sorry about that-- 321 00:15:53,516 --> 00:16:02,406 [ Inaudible Remark ] 322 00:16:02,906 --> 00:16:07,556 >> There he is systematic, uncaring, methodical, 323 00:16:08,176 --> 00:16:11,346 conservative and sometimes not quite up to speed 324 00:16:11,806 --> 00:16:14,716 but at least he is exact for the most part. 325 00:16:15,516 --> 00:16:29,686 [ Inaudible Remark ] 326 00:16:30,186 --> 00:16:33,056 >> As the packets leave the router they make their way 327 00:16:33,056 --> 00:16:37,116 into the corporate internet and head for the router switch. 328 00:16:37,116 --> 00:16:40,516 [Noise] A bit more efficient than the router, 329 00:16:40,796 --> 00:16:43,246 the router switch plays fast and loose 330 00:16:43,366 --> 00:16:46,326 with IP packets deadly routing them along the way, 331 00:16:46,906 --> 00:16:49,556 a digital pinball wizard if you will. 332 00:16:49,656 --> 00:16:51,656 >> Here we go, here we go. 333 00:16:51,936 --> 00:16:54,726 Here's comes another one. 334 00:16:55,296 --> 00:16:57,366 And there's another one. 335 00:16:57,696 --> 00:17:00,116 Ooh I think one-- here it goes whoop! 336 00:17:00,586 --> 00:17:03,426 Around the back-- hey, in there, in there, 337 00:17:04,926 --> 00:17:11,016 in there over the left, over the right, over the left, 338 00:17:11,016 --> 00:17:13,376 over the right, you got it. 339 00:17:13,436 --> 00:17:14,076 Here it goes. 340 00:17:14,076 --> 00:17:18,076 Right down and he shoot, he scores! 341 00:17:18,076 --> 00:17:19,436 It's good. 342 00:17:19,436 --> 00:17:20,516 Hey [inaudible] you watch out. 343 00:17:20,576 --> 00:17:22,596 Here comes another one. 344 00:17:22,776 --> 00:17:24,796 Oh, here we go, we're having fun. 345 00:17:24,796 --> 00:17:24,863 [ Background Music ] 346 00:17:24,863 --> 00:17:27,206 >> As packets arrive at their destination they're picked 347 00:17:27,206 --> 00:17:30,026 up by the network interface, 348 00:17:30,056 --> 00:17:31,046 ready to be sent to the next level. 349 00:17:31,076 --> 00:17:31,676 In this case the proxy. 350 00:17:31,706 --> 00:17:32,966 The proxy is used by many companies as sort 351 00:17:32,996 --> 00:17:34,166 of the middle man in order to lessen the load 352 00:17:34,196 --> 00:17:35,846 on their internet connection and for security reasons as well. 353 00:17:35,876 --> 00:17:36,716 As you can see, the packets are all 354 00:17:36,746 --> 00:17:37,976 of various sizes depending upon their content. 355 00:17:38,516 --> 00:17:52,516 [ Music ] 356 00:17:53,016 --> 00:17:53,083 [ Background Music ] 357 00:17:53,296 --> 00:17:57,286 >> The proxy opens the packet and looks 358 00:17:57,376 --> 00:17:58,736 for the web address or URL. 359 00:18:00,046 --> 00:18:02,396 Depending upon whether the address is acceptable, 360 00:18:03,076 --> 00:18:04,946 the packet is sent on to the internet. 361 00:18:05,516 --> 00:18:11,606 [ Music ] 362 00:18:12,106 --> 00:18:15,566 >> There are, however, some addresses which do not meet 363 00:18:15,666 --> 00:18:18,946 with the approval of the proxy, that is to say, corporate 364 00:18:18,946 --> 00:18:21,486 or management guidelines. 365 00:18:24,026 --> 00:18:26,876 These are summerly dealt with. 366 00:18:27,646 --> 00:18:30,346 We'll have none of that. 367 00:18:30,346 --> 00:18:34,696 For those who make it, it's on the road again. 368 00:18:35,516 --> 00:18:44,516 [ Music ] 369 00:18:45,016 --> 00:18:45,083 [ Background Music ] 370 00:18:46,606 --> 00:18:49,146 >> Next stop, the Firewall. 371 00:18:49,936 --> 00:18:54,676 The corporate Firewall serves two purposes. 372 00:18:55,446 --> 00:18:58,186 It prevents some rather nasty things from the internet 373 00:18:58,186 --> 00:18:59,886 from coming into the intranet 374 00:19:00,626 --> 00:19:03,206 and it can also prevent sensitive corporate information 375 00:19:03,206 --> 00:19:05,836 from being sent out onto the internet. 376 00:19:08,406 --> 00:19:11,286 Once through the Firewall, a router picks up the packet 377 00:19:11,286 --> 00:19:13,956 and places it onto a much narrower road 378 00:19:13,956 --> 00:19:15,276 or bandwidth as we say. 379 00:19:16,236 --> 00:19:19,956 Obviously, the road is not broad enough to take them all. 380 00:19:21,756 --> 00:19:24,586 Now you might wonder what happens to all those packets 381 00:19:24,586 --> 00:19:26,536 which don't make it along the way. 382 00:19:27,396 --> 00:19:30,726 Well, when Mr. IP doesn't receive an acknowledgment 383 00:19:30,726 --> 00:19:32,016 that a packet has been received 384 00:19:32,016 --> 00:19:36,386 in due time he simply sends a replacement packet. 385 00:19:38,116 --> 00:19:43,796 We are now ready to enter the world of the internet, 386 00:19:43,796 --> 00:19:45,716 a spider web of interconnected networks 387 00:19:46,076 --> 00:19:48,456 which span our entire globe. 388 00:19:48,456 --> 00:19:51,846 Here, router and switches establish links 389 00:19:51,846 --> 00:19:52,796 between networks. 390 00:19:53,836 --> 00:19:56,836 Now, the net is an entirely different environment 391 00:19:56,836 --> 00:19:59,046 that you'll find within the protected walls of your LAN. 392 00:19:59,786 --> 00:20:03,186 Out here it's a wild west, plenty of space, 393 00:20:03,246 --> 00:20:05,356 plenty of opportunities, plenty of things 394 00:20:05,356 --> 00:20:07,966 to explore and places to go. 395 00:20:08,046 --> 00:20:10,676 >> Thanks to very little control and regulation, 396 00:20:10,936 --> 00:20:14,516 new ideas find fertile soil to push the envelope 397 00:20:14,516 --> 00:20:15,716 of their possibilities. 398 00:20:16,446 --> 00:20:19,846 But because of this freedom certain dangers also lurk. 399 00:20:19,846 --> 00:20:25,066 You'll never know when you'll meet the dreaded pain of death. 400 00:20:25,306 --> 00:20:27,626 Special version of a normal request pain 401 00:20:28,056 --> 00:20:31,826 which some idiot thought up to mess up unsuspecting hoses. 402 00:20:33,796 --> 00:20:38,196 The path our packets take may be via satellite, telephone lines, 403 00:20:38,286 --> 00:20:40,446 wireless or even transoceanic cable. 404 00:20:41,106 --> 00:20:42,816 They don't always take the fastest 405 00:20:42,896 --> 00:20:47,826 or shortest routes possible but they will get there, eventually. 406 00:20:48,166 --> 00:20:52,816 Maybe that's why it's sometimes called the World Wide Wait. 407 00:20:53,156 --> 00:20:55,686 But when everything is working smoothly, 408 00:20:56,096 --> 00:20:58,416 you can circumvent the globe 5 times 409 00:20:58,416 --> 00:21:01,256 over at the drop of a hat, literally. 410 00:21:01,256 --> 00:21:04,856 And offer the cost of a local call or less. 411 00:21:05,266 --> 00:21:11,376 Near the end of our destination, we'll find another Firewall. 412 00:21:11,706 --> 00:21:15,926 Depending upon your perspective as a data packet, 413 00:21:16,556 --> 00:21:19,666 the Firewall could be a [inaudible] security 414 00:21:19,826 --> 00:21:21,296 or a dreaded adversary. 415 00:21:21,906 --> 00:21:24,036 It all depends on which side you're on 416 00:21:24,236 --> 00:21:25,626 and what your intentions are. 417 00:21:26,686 --> 00:21:30,526 The Firewall is designed to let in only those packets 418 00:21:30,526 --> 00:21:32,106 that meet its criteria. 419 00:21:33,026 --> 00:21:36,226 This Firewall is operating on ports 80 and 25. 420 00:21:37,436 --> 00:21:40,676 All attempts to enter through other ports are closed 421 00:21:40,676 --> 00:21:40,976 for business. 422 00:21:41,516 --> 00:21:55,126 [ Music ] 423 00:21:55,626 --> 00:22:03,176 >> Port 25 is used for mail packets while port 80 is the 424 00:22:03,176 --> 00:22:05,776 entrance for packets from the internet to the web server. 425 00:22:09,036 --> 00:22:12,546 Inside the Firewall, packets are screened more thoroughly. 426 00:22:13,386 --> 00:22:14,886 Some packets make it easily 427 00:22:14,886 --> 00:22:18,846 through customs while others look just a bit dubious. 428 00:22:19,626 --> 00:22:22,576 Now, the Firewall officer is not easily fooled such as 429 00:22:22,576 --> 00:22:27,456 when this Ping of death packet tries to disguise itself 430 00:22:27,896 --> 00:22:29,316 as a normal Ping packet. 431 00:22:29,356 --> 00:22:30,896 >> It's okay, move on its okay. 432 00:22:31,346 --> 00:22:31,656 No problem. 433 00:22:31,986 --> 00:22:32,596 Have a nice day. 434 00:22:32,986 --> 00:22:35,496 Be out of here, bye. 435 00:22:35,556 --> 00:22:38,646 >> For those packets lucky enough to make it this far, 436 00:22:38,646 --> 00:22:40,796 the journey is almost over. 437 00:22:43,636 --> 00:22:47,176 It's just a line up on the interface to be taken 438 00:22:47,176 --> 00:22:49,256 up into the web server. 439 00:22:50,336 --> 00:22:54,746 Nowadays a web server can run on many things from a main frame 440 00:22:54,746 --> 00:22:56,956 to a webcam, to the computer on your desk. 441 00:22:57,406 --> 00:22:59,136 Why not your refrigerator? 442 00:22:59,846 --> 00:23:03,146 With the proper set up you can find out if you have the makings 443 00:23:03,146 --> 00:23:06,666 for chicken cacciatore or if you have to go shopping. 444 00:23:06,666 --> 00:23:09,216 Remember, this is the dawn of the net, 445 00:23:09,836 --> 00:23:11,476 almost anything is possible. 446 00:23:12,506 --> 00:23:20,696 One by one the packets are received, opened and unpacked. 447 00:23:24,526 --> 00:23:28,236 [Noise] The information they contain, that is your request 448 00:23:28,236 --> 00:23:31,716 for information, is sent on to the web server application. 449 00:23:37,666 --> 00:23:46,496 [Noise] The packet itself is recycled, ready to be used again 450 00:23:46,496 --> 00:23:49,546 and filled with your requested information. 451 00:23:50,516 --> 00:23:52,766 [ Music ] 452 00:23:53,266 --> 00:23:55,516 [ Noise ] 453 00:23:56,016 --> 00:23:56,083 [ Background Music ] 454 00:23:56,083 --> 00:24:00,266 >> Address and send out on its way back to you. 455 00:24:01,506 --> 00:24:11,036 Back pass the Firewall, routers and on through to the internet. 456 00:24:11,256 --> 00:24:13,116 Back through your corporate Firewall 457 00:24:15,816 --> 00:24:21,226 and onto your interface. 458 00:24:22,356 --> 00:24:24,456 Ready to supply your web browser 459 00:24:24,726 --> 00:24:31,216 with the information you requested that is this film. 460 00:24:33,516 --> 00:24:38,516 [ Music ] 461 00:24:39,016 --> 00:24:39,083 [ Background Music ] 462 00:24:39,083 --> 00:24:41,206 >> Pleased with their efforts and trusting in a better world. 463 00:24:41,766 --> 00:24:46,186 Our trustee data packets ride off blissfully into the sunset 464 00:24:46,656 --> 00:24:50,576 of another day knowing fully they have served their 465 00:24:50,576 --> 00:24:52,116 masters well. 466 00:24:53,826 --> 00:24:57,936 Now isn't that a happy ending? 467 00:24:58,516 --> 00:25:04,016 [ Music ] 468 00:25:04,516 --> 00:25:08,096 >> Okay, so that clearly took some creative liberties there. 469 00:25:08,576 --> 00:25:10,686 But that actually paints a pretty good picture 470 00:25:10,686 --> 00:25:11,986 of what's been happening all this time. 471 00:25:11,986 --> 00:25:13,706 If you think back a couple of weeks to when I ran 472 00:25:13,706 --> 00:25:16,256 that little textual command called traceroute 473 00:25:16,256 --> 00:25:17,766 where we traced the route between me 474 00:25:17,766 --> 00:25:21,046 and Stanford.edu and me and CNN.co.jp. 475 00:25:21,046 --> 00:25:23,556 I mean what's amazing I think 476 00:25:23,556 --> 00:25:25,526 about visualizing this stuff now is all 477 00:25:25,526 --> 00:25:28,846 of that is happening literally in a matter of 20 milliseconds, 478 00:25:28,996 --> 00:25:30,826 60 milliseconds, 200 milliseconds 479 00:25:31,056 --> 00:25:33,446 and literally are these data getting to and from Japan 480 00:25:33,446 --> 00:25:35,786 and back, terribly, terribly fast. 481 00:25:35,786 --> 00:25:37,156 It's actually pretty apropos too 482 00:25:37,156 --> 00:25:39,166 that this film focuses on the web. 483 00:25:39,206 --> 00:25:41,486 So, even though there are indeed all these various services 484 00:25:41,786 --> 00:25:43,486 like e-mail and instant messaging 485 00:25:43,486 --> 00:25:46,876 in the web it really is the web that's kind of taking charge 486 00:25:46,876 --> 00:25:49,506 of what we all perceive to be the internet. 487 00:25:49,856 --> 00:25:51,836 Odds are if you're on the internet right now, 488 00:25:51,836 --> 00:25:53,716 you're probably using a web browser. 489 00:25:53,716 --> 00:25:55,266 And you might be using an application 490 00:25:55,266 --> 00:25:56,806 within that web browser whether it's Gmail 491 00:25:56,866 --> 00:25:57,866 or Facebook or the like. 492 00:25:58,106 --> 00:25:59,516 But that's what's kind of exciting now is 493 00:25:59,516 --> 00:26:02,566 that web pages are much less like Netscape 4.0 494 00:26:02,566 --> 00:26:03,816 which you saw depicted there. 495 00:26:03,816 --> 00:26:06,736 And much more like interactive applications. 496 00:26:06,736 --> 00:26:08,936 And this is exciting because it means that now using some 497 00:26:08,936 --> 00:26:11,236 of the tools even we're talking about in this class like PHP 498 00:26:11,236 --> 00:26:14,166 and Sequel and JavaScript, you can really start 499 00:26:14,166 --> 00:26:17,436 to make applications that people use and start to rely on. 500 00:26:17,436 --> 00:26:19,986 Case in point, for years all of us have been using things 501 00:26:19,986 --> 00:26:21,576 like Microsoft Word and Excel 502 00:26:21,766 --> 00:26:22,986 and you have to buy these things. 503 00:26:22,986 --> 00:26:25,566 And you have to, or-- and you have to put the CD 504 00:26:25,566 --> 00:26:27,546 in your computer or download some ISO. 505 00:26:27,546 --> 00:26:28,986 And you need to double click an icon. 506 00:26:28,986 --> 00:26:30,736 You need to install the software then you need 507 00:26:30,736 --> 00:26:31,796 to configure the software. 508 00:26:31,796 --> 00:26:34,506 And if you happen to have two computers or your happen 509 00:26:34,506 --> 00:26:35,766 to be elsewhere you have to go 510 00:26:35,766 --> 00:26:37,196 through this whole process again. 511 00:26:37,196 --> 00:26:39,336 And if something goes wrong with your computer you now have 512 00:26:39,436 --> 00:26:41,716 to reinstall everything, back-- 513 00:26:42,076 --> 00:26:44,066 restore things from backups and the like. 514 00:26:44,346 --> 00:26:46,156 This is not a healthy system. 515 00:26:46,156 --> 00:26:48,336 And in fact, I would argue that the state of our world today 516 00:26:48,336 --> 00:26:50,836 as excited as we are by our iPhone and PCs 517 00:26:50,836 --> 00:26:54,256 and Macs these days, it's all pretty primitive, right? 518 00:26:54,256 --> 00:26:56,826 Like computers we use today are way more complicated 519 00:26:56,826 --> 00:26:57,516 than they need to be. 520 00:26:57,666 --> 00:27:00,156 And the fact that I have to help out certain members of my family 521 00:27:00,156 --> 00:27:02,046 on the phone or by connecting remotely 522 00:27:02,046 --> 00:27:04,276 to their computers is ridiculous I think. 523 00:27:04,276 --> 00:27:07,616 Like these machines are very much in a very primitive state. 524 00:27:07,616 --> 00:27:08,916 And I think what's really exciting 525 00:27:08,916 --> 00:27:11,916 and where final projects are kind of exciting too is 526 00:27:11,916 --> 00:27:14,916 that the trend really does seem to be toward the idea 527 00:27:14,916 --> 00:27:18,276 of Google apps or Microsoft Office in the cloud so to speak 528 00:27:18,276 --> 00:27:19,686 and these web-based applications. 529 00:27:19,906 --> 00:27:23,286 And the fact that-- the fact that so many of you spend 530 00:27:23,286 --> 00:27:24,986 so much time in Gmail and Facebook or the 531 00:27:24,986 --> 00:27:27,226 like really suggest that this is the direction, 532 00:27:27,226 --> 00:27:29,196 at least for several years, the internet is going. 533 00:27:29,196 --> 00:27:32,056 So you will now have after this week and last 534 00:27:32,056 --> 00:27:34,496 with an eye toward final projects, the skills with which 535 00:27:34,496 --> 00:27:36,196 to participate in exactly that. 536 00:27:36,196 --> 00:27:38,636 And so, with regard to Problem Set 8, 537 00:27:38,636 --> 00:27:40,016 originally I had predicted 538 00:27:40,016 --> 00:27:42,526 that we were gonna use Google's visualization APIs 539 00:27:42,656 --> 00:27:46,356 which makes it super easy to actually have charts and graphs 540 00:27:46,356 --> 00:27:48,116 and the like embedded in your own web page. 541 00:27:48,116 --> 00:27:50,616 But truth be told, I was having some trouble last week just 542 00:27:50,706 --> 00:27:53,706 getting excited about bar charts and pie charts and the like. 543 00:27:53,706 --> 00:27:56,366 It's terrible useful and it's a wonderful way of presenting data 544 00:27:56,686 --> 00:27:57,966 but it's not terribly fun. 545 00:27:57,966 --> 00:27:59,756 And I thought it would be a much more fun way 546 00:27:59,756 --> 00:28:01,736 to end this semester if we crafted some P set 547 00:28:01,916 --> 00:28:03,536 that actually involves all of the TFs and CAs. 548 00:28:03,536 --> 00:28:05,846 That actually involves Harvard's campus. 549 00:28:06,096 --> 00:28:08,516 And actually is much more reminiscent of a game 550 00:28:08,516 --> 00:28:12,366 that you would be-- would enjoy sharing with your family 551 00:28:12,366 --> 00:28:15,096 and your friends back home since it is in fact on the internet, 552 00:28:15,366 --> 00:28:16,916 not unlike what you did with scraps. 553 00:28:16,916 --> 00:28:20,106 So, hopefully, many of you in week 0 and 1 had that sense 554 00:28:20,106 --> 00:28:22,796 of gratification that damn, I made this project 555 00:28:22,796 --> 00:28:24,996 and you shared it with at least one person, one roommate 556 00:28:25,256 --> 00:28:26,926 and hopefully you'll have the chance now to do 557 00:28:26,926 --> 00:28:29,216 that with what we've called CS50 Shuttle. 558 00:28:29,216 --> 00:28:31,246 So problem set A is CS50 Shuttle is CS50 Shuttle, 559 00:28:31,246 --> 00:28:35,486 it still uses some third party APIs but namely Google Earth API 560 00:28:35,486 --> 00:28:40,746 and Google Maps API to implement the very first CS50 video game, 561 00:28:40,746 --> 00:28:42,356 part of which we have implemented, 562 00:28:42,646 --> 00:28:44,856 the rest of which you shall implement. 563 00:28:45,146 --> 00:28:47,466 So here is a web browser, this is Firefox. 564 00:28:47,466 --> 00:28:51,716 Here on the left hand side I see a picture of university hall 565 00:28:51,716 --> 00:28:54,016 and Mem church and Weld over there on the right. 566 00:28:54,316 --> 00:28:56,906 Down here on the bottom right I see a little blue bus 567 00:28:56,906 --> 00:28:58,926 which represents me in a two dimensional version 568 00:28:58,926 --> 00:28:59,726 of Harvard's map. 569 00:29:00,016 --> 00:29:03,916 And then up here I apparently have 35 empty seats and a couple 570 00:29:03,916 --> 00:29:06,416 of buttons for starting my engine, picking people up, 571 00:29:06,616 --> 00:29:09,026 dropping people off because it turns out that 572 00:29:09,026 --> 00:29:12,576 if I actually start my engine, read my little instructions here 573 00:29:12,576 --> 00:29:15,866 for the keyboard controls and then start driving, 574 00:29:16,426 --> 00:29:20,586 I can now navigate my way around Harvard's campus. 575 00:29:20,976 --> 00:29:23,346 So I'm-- and go across the grass. 576 00:29:23,636 --> 00:29:26,036 So here we have William James Hall up here. 577 00:29:26,036 --> 00:29:28,866 Let me take a right over by this church here. 578 00:29:29,346 --> 00:29:30,906 Follow the route that the shuttle takes. 579 00:29:31,046 --> 00:29:34,836 Let me take spin up to say Lamont, alright. 580 00:29:36,186 --> 00:29:39,106 I think that's Lamont, yup, over there is Lamont. 581 00:29:39,176 --> 00:29:41,976 Let's take a right onto Mass, okay. 582 00:29:42,516 --> 00:29:46,546 [Laughter] And oh, wait what's this? 583 00:29:46,816 --> 00:29:48,126 Notice on the map here, 584 00:29:48,126 --> 00:29:51,116 looks like Jesse Cohen is sitting inside this 585 00:29:51,116 --> 00:29:52,006 building here. 586 00:29:52,006 --> 00:29:55,786 If I hover over his little icon of a person over here, 587 00:29:56,116 --> 00:29:57,406 Jesse Cohen is at Manter Hall 588 00:29:57,406 --> 00:29:58,736 which is apparently a building right there 589 00:29:58,736 --> 00:30:00,016 on Mass Ave. So, you know what? 590 00:30:00,016 --> 00:30:03,046 I'm gonna go ahead and pick Jesse up and now notice 591 00:30:03,046 --> 00:30:04,976 that top right, Jesse is destined for Kirkland House. 592 00:30:05,626 --> 00:30:07,566 >> So my goal now is gonna be to drop off Jessie. 593 00:30:07,566 --> 00:30:08,836 But we got plenty of empty seats here. 594 00:30:08,836 --> 00:30:12,846 So let me back up here and let me see if we can find the quad, 595 00:30:13,046 --> 00:30:13,956 I've heard a lot about it. 596 00:30:14,856 --> 00:30:16,036 Alright, so-- 597 00:30:16,036 --> 00:30:17,876 [ Laughter ] 598 00:30:17,876 --> 00:30:19,646 >> Been there about half an hour, I think. 599 00:30:19,646 --> 00:30:23,416 Here we go, up Garden Streets, alright. 600 00:30:24,086 --> 00:30:29,106 A registrar, coming up oh, that looks familiar, 601 00:30:29,266 --> 00:30:34,886 let's take a right here and take a shortcut here and aha! 602 00:30:34,886 --> 00:30:37,166 [Laughter] And there we have Pforzheimer House. 603 00:30:37,166 --> 00:30:39,936 So you will now have in Problem Set 8 the framework with which 604 00:30:39,936 --> 00:30:41,446 to make your own video game. 605 00:30:41,446 --> 00:30:43,696 And this uses again a couple of third part APIs. 606 00:30:44,196 --> 00:30:48,056 What I did was I pulled up the webpage for Google Earth 607 00:30:48,056 --> 00:30:50,836 which normally is a program you actually download, 608 00:30:50,836 --> 00:30:53,846 client side software, but that's not all that much fun and none 609 00:30:53,846 --> 00:30:55,106 of your friends and family are gonna go 610 00:30:55,106 --> 00:30:56,406 through a 5-minute process 611 00:30:56,406 --> 00:30:58,616 of installing some special software, learning how to use it 612 00:30:58,616 --> 00:31:00,776 and the like, they'd much rather just go to a URL, 613 00:31:00,776 --> 00:31:02,316 be prompted for what to do and voila! 614 00:31:02,566 --> 00:31:04,546 They too are taking a spin on Harvard's campus. 615 00:31:04,626 --> 00:31:07,706 So Google Earth also provides what's called an API, 616 00:31:07,886 --> 00:31:11,986 a plugin for the web whereby using JavaScript code you can 617 00:31:12,126 --> 00:31:14,316 tell the camera of sorts here 618 00:31:14,316 --> 00:31:16,836 on the left hand side where to navigate to. 619 00:31:16,836 --> 00:31:20,076 And thanks to Google's investment in satellite imagery 620 00:31:20,076 --> 00:31:23,036 and street view and the like, we have a ridiculous number 621 00:31:23,106 --> 00:31:25,576 of 3-dimensional buildings and photography these days, 622 00:31:25,776 --> 00:31:30,156 with which to actually explore places in the world. 623 00:31:30,156 --> 00:31:32,596 And Harvard's own campus is now in fact one of them. 624 00:31:32,796 --> 00:31:35,156 So underneath the hood of this, I have some JavaScript code 625 00:31:35,156 --> 00:31:37,486 that we wrote that tells the camera what to do 626 00:31:37,486 --> 00:31:41,196 when I hit the W key to go up or the A key to go left. 627 00:31:41,586 --> 00:31:44,716 On the right hand side too, there's another API I'm using, 628 00:31:44,716 --> 00:31:48,116 the Google Maps' API and it simultaneously is listening 629 00:31:48,116 --> 00:31:49,836 for updates to my keyboard 630 00:31:50,046 --> 00:31:51,966 so that I can then move this icon here 631 00:31:51,966 --> 00:31:52,976 on the right hand side. 632 00:31:53,236 --> 00:31:55,156 If you actually zoom out here on the map, 633 00:31:55,756 --> 00:31:57,676 you'll see that here are the 3 houses. 634 00:31:57,726 --> 00:32:00,026 So we have markers for Currier and Fojo and Cabot. 635 00:32:00,296 --> 00:32:02,336 Up here apparently is another TF or CA. 636 00:32:02,686 --> 00:32:05,016 Sophie Chang is at the Botanic Gardens at the moment. 637 00:32:05,256 --> 00:32:07,826 If we zoom out, we'll see a couple of more staff. 638 00:32:07,826 --> 00:32:09,496 Doug Lloyd is at the observatory. 639 00:32:09,836 --> 00:32:12,386 Conlin is at the observatory also. 640 00:32:12,616 --> 00:32:16,006 We have more staff over here, Anna, let's keep zooming out. 641 00:32:16,536 --> 00:32:17,566 Kind of have a big staff. 642 00:32:17,686 --> 00:32:19,236 So to get a lot of people that you have to pick 643 00:32:19,236 --> 00:32:21,196 up in this game, and so actually, 644 00:32:21,446 --> 00:32:24,116 even though this doesn't come built-in to the program, 645 00:32:24,116 --> 00:32:26,216 we've implemented a few special features. 646 00:32:26,216 --> 00:32:29,176 So if I happen to input that thing called Konami Code, up, 647 00:32:29,176 --> 00:32:30,766 up, down, down, left, right, left, right, 648 00:32:30,766 --> 00:32:34,046 B, A, I can then-- fly. 649 00:32:34,046 --> 00:32:36,046 [ Laughter ] 650 00:32:36,046 --> 00:32:42,686 >> So now let's see if we can find some of these TFs and CAs. 651 00:32:42,686 --> 00:32:42,753 [ Laughter ] 652 00:32:42,753 --> 00:32:43,776 >> You'll see that they're looming 653 00:32:43,776 --> 00:32:46,316 out from the geography here. 654 00:32:46,316 --> 00:32:48,656 Let's see if we can swoop in and pick up Caitlyn [phonetic]. 655 00:32:49,886 --> 00:32:51,316 Alright, there she is. 656 00:32:51,886 --> 00:32:52,546 She needs a ride. 657 00:32:52,546 --> 00:32:54,476 Whoops, sorry, Caitlyn. 658 00:32:54,916 --> 00:32:56,456 She needs a ride to Law House. 659 00:32:56,456 --> 00:32:58,526 So I'm gonna go ahead and pick her up. 660 00:32:58,526 --> 00:33:00,786 Let's take to the air again. 661 00:33:01,646 --> 00:33:04,786 And you'll see that you can explore all sorts 662 00:33:04,786 --> 00:33:06,216 of parts of the world. 663 00:33:06,216 --> 00:33:07,296 And so in fact, let me see 664 00:33:07,296 --> 00:33:10,346 if I can start facing west here just to mess with this. 665 00:33:11,226 --> 00:33:13,136 It turns out Harvard's campus is pretty big. 666 00:33:13,136 --> 00:33:14,446 So you might have to go for quite a spin. 667 00:33:14,446 --> 00:33:18,216 I'm gonna go ahead and kick this into, let's see, autopilot 668 00:33:18,216 --> 00:33:19,586 and let's see by the end 669 00:33:19,586 --> 00:33:21,736 of class how far west we actually get. 670 00:33:22,086 --> 00:33:23,596 Let's go ahead and take a 5-minute break 671 00:33:23,596 --> 00:33:25,926 and then discuss how you yourselves will be implementing 672 00:33:27,326 --> 00:33:29,436 this game. 673 00:33:29,436 --> 00:33:30,026 [ Noise ] 674 00:33:30,026 --> 00:33:30,876 >> Alright. 675 00:33:31,066 --> 00:33:32,796 So we are back. 676 00:33:32,796 --> 00:33:35,796 We're only in Waltham, Massachusetts right now. 677 00:33:35,796 --> 00:33:37,026 So it might take some time. 678 00:33:37,026 --> 00:33:39,106 But that's not a problem because you'll find 679 00:33:39,106 --> 00:33:40,726 that there are a number of optional features 680 00:33:40,726 --> 00:33:42,956 that you yourself get to implement in this video game. 681 00:33:42,956 --> 00:33:45,046 So we provide you with the general framework 682 00:33:45,046 --> 00:33:47,196 that will start you to explore now toward two ends. 683 00:33:47,256 --> 00:33:49,696 One, making sure you understand the context 684 00:33:49,696 --> 00:33:50,866 in which we'll be playing this week. 685 00:33:51,056 --> 00:33:53,926 But two, also so that you learn by example, 686 00:33:54,136 --> 00:33:56,826 the various capabilities of JavaScript 687 00:33:56,826 --> 00:33:58,196 and the syntactic differences with PHPNC 688 00:33:58,196 --> 00:34:00,866 which you will find it quite familiar, 689 00:34:00,866 --> 00:34:02,816 as you may have noticed last week syntactically 690 00:34:02,816 --> 00:34:03,916 to these two languages. 691 00:34:04,206 --> 00:34:06,296 Essentially, we provide you with this framework 692 00:34:06,296 --> 00:34:08,366 but those buttons don't work out of the box. 693 00:34:08,366 --> 00:34:10,766 You can't pick anyone up, you can't drop anyone off 694 00:34:10,986 --> 00:34:13,836 but you can actually explore the campus. 695 00:34:13,946 --> 00:34:15,526 So the engine of the shuttle works 696 00:34:15,526 --> 00:34:16,886 but not the door so to speak. 697 00:34:17,056 --> 00:34:17,976 And so the first thing you'll need 698 00:34:17,976 --> 00:34:20,236 to do is implement the ability to pick up passengers. 699 00:34:20,446 --> 00:34:21,566 Now, these passengers we'll see 700 00:34:21,566 --> 00:34:24,106 in a moment are implemented essentially as a bunch 701 00:34:24,106 --> 00:34:26,646 of constants, an array of teaching fellows 702 00:34:26,646 --> 00:34:27,666 and course assistants. 703 00:34:27,666 --> 00:34:30,246 Each of which have a number of properties associated with them. 704 00:34:30,486 --> 00:34:32,526 So we've implemented the staff as what we call 705 00:34:32,526 --> 00:34:33,946 "objects" in programming. 706 00:34:33,946 --> 00:34:35,606 So this too may be your first taste 707 00:34:35,786 --> 00:34:38,196 of what's called object-oriented programming which if you go 708 00:34:38,196 --> 00:34:42,306 on to CS51 or 171 or if you come into the course 709 00:34:42,306 --> 00:34:44,456 with a background in AP Computer Science or the like, 710 00:34:44,706 --> 00:34:46,696 you probably know about this idea already. 711 00:34:46,696 --> 00:34:49,416 And so we'll explore it, in this context with JavaScript 712 00:34:49,416 --> 00:34:49,926 and then you'll have 713 00:34:49,926 --> 00:34:51,716 to implement the ability to drop off. 714 00:34:51,716 --> 00:34:54,616 But you'll have to drop people off only when you are 715 00:34:54,616 --> 00:34:58,696 within 30 meters as we say in the spec of a particular house. 716 00:34:58,696 --> 00:35:01,296 And we've given you essentially the GPS coordinates for each 717 00:35:01,296 --> 00:35:03,626 of the houses or approximations thereof since some 718 00:35:03,626 --> 00:35:06,426 of them have many buildings so we just picked a middle point 719 00:35:06,426 --> 00:35:08,766 and you'll have to drop someone off at their homes. 720 00:35:08,976 --> 00:35:12,096 But among the optional features that you get to choose from, 721 00:35:12,096 --> 00:35:13,536 you have make one those 2 features 722 00:35:13,536 --> 00:35:14,806 and then your choice of features. 723 00:35:15,016 --> 00:35:17,476 One is that clearly there is an opportunity here for some kind 724 00:35:17,526 --> 00:35:20,506 of point system where you can actually gather points based 725 00:35:20,506 --> 00:35:22,606 on how many people you picked up or dropped off. 726 00:35:22,726 --> 00:35:24,136 Two, there's clearly an opportunity 727 00:35:24,136 --> 00:35:26,186 to give the person a ticking timer 728 00:35:26,396 --> 00:35:28,806 so that you only have some number of seconds or minutes 729 00:35:28,806 --> 00:35:31,046 to pick people up, not-- unlike a normal video game. 730 00:35:31,046 --> 00:35:33,356 There is of course the Konami Code feature that I alluded 731 00:35:33,356 --> 00:35:35,696 to you where you will implement the ability to fly 732 00:35:36,026 --> 00:35:38,346 and explore campus above ground. 733 00:35:38,606 --> 00:35:41,076 Another one of the options we prescribed is 734 00:35:41,076 --> 00:35:42,546 to implement teleportation. 735 00:35:42,546 --> 00:35:44,506 If you're a little tired of driving to the quad, 736 00:35:44,506 --> 00:35:46,706 why not click a link and teleport yourself there. 737 00:35:47,016 --> 00:35:48,796 Or put the shuttle on autopilot, 738 00:35:48,796 --> 00:35:50,116 which is another feature as well. 739 00:35:50,406 --> 00:35:52,786 And then two, another feature if you'd really 740 00:35:52,786 --> 00:35:57,266 like to make your friends jealous is you can transplant 741 00:35:57,266 --> 00:36:00,316 the game to some other university's campus 742 00:36:00,316 --> 00:36:02,956 and actually let your friends explore their own school 743 00:36:02,956 --> 00:36:04,976 or perhaps your parents, your hometown. 744 00:36:04,976 --> 00:36:07,266 So in the PDF will you see a whole bunch of options 745 00:36:07,516 --> 00:36:08,486 with which you can do that. 746 00:36:08,486 --> 00:36:09,986 So let's actually take a look first 747 00:36:10,106 --> 00:36:12,776 at how you might even begin implementing something 748 00:36:12,776 --> 00:36:13,186 like this. 749 00:36:13,396 --> 00:36:16,066 Or more generally, if you wanna tackle a final project 750 00:36:16,066 --> 00:36:18,416 or after this course, just a programming project 751 00:36:18,416 --> 00:36:20,896 of your own that's not been handed to you as a 10 752 00:36:20,896 --> 00:36:23,486 or 20-page PDF that pretty much tells you what to do, 753 00:36:23,486 --> 00:36:24,826 you yourself have to figure it out. 754 00:36:25,106 --> 00:36:28,016 Let's see what that thought process is actually like. 755 00:36:28,016 --> 00:36:31,146 So I kind of have this instinctive idea a week 756 00:36:31,146 --> 00:36:32,516 or so ago that it would be great fun 757 00:36:32,516 --> 00:36:33,936 to do something with Google Earth. 758 00:36:33,936 --> 00:36:36,156 But I wasn't sure what you could do with the API, 759 00:36:36,646 --> 00:36:40,326 and so I first started by Googling Google Earth API, 760 00:36:40,326 --> 00:36:43,966 and I was led to a page that looks like this. 761 00:36:44,536 --> 00:36:45,786 And what's pretty nice 762 00:36:45,786 --> 00:36:49,906 about Google's own APIs is they're pretty well documented. 763 00:36:50,216 --> 00:36:52,076 They have a number of examples 764 00:36:52,076 --> 00:36:53,796 and reference material located there. 765 00:36:54,016 --> 00:36:56,536 And you'll see at the left here, this is sort of the Hello, 766 00:36:56,536 --> 00:36:59,216 World of Google Earth integration whereby 767 00:36:59,216 --> 00:37:00,726 by default you just get the Earth. 768 00:37:00,726 --> 00:37:02,956 And then you can navigate this Earth 769 00:37:02,956 --> 00:37:04,586 by using the standard controls. 770 00:37:04,886 --> 00:37:07,066 But of course it's a lot more fun in video game 771 00:37:07,066 --> 00:37:08,886 like if we actually enable with your keyboard 772 00:37:08,886 --> 00:37:10,956 so that you don't have to point and click 773 00:37:11,226 --> 00:37:13,946 and use what's a fairly suboptimal interface. 774 00:37:14,186 --> 00:37:16,836 But in fact, if we zoom in here, here, here, here and here, 775 00:37:16,836 --> 00:37:19,506 we'll eventually see whatever town I'm actually hovering over 776 00:37:19,506 --> 00:37:21,336 and whoever's home this actually is. 777 00:37:21,336 --> 00:37:22,716 So in fact, if you play 778 00:37:22,716 --> 00:37:25,876 around with CS50 Shuttle enough you can certainly drive 779 00:37:25,876 --> 00:37:28,526 yourself, it might take a while to wherever you happen to live. 780 00:37:28,526 --> 00:37:30,846 Well, actually it doesn't have to be continental US. 781 00:37:30,906 --> 00:37:33,376 There's nothing stopping you from driving across the ocean 782 00:37:33,376 --> 00:37:34,226 in this particular game. 783 00:37:34,766 --> 00:37:35,596 So I went up here. 784 00:37:35,856 --> 00:37:39,536 I went to the documentation and I saw, alright, 785 00:37:39,536 --> 00:37:40,636 introduction, audience. 786 00:37:40,866 --> 00:37:43,786 So I myself did-- took it upon myself to read through most 787 00:37:43,786 --> 00:37:45,486 of this and realize you do absolutely 788 00:37:45,486 --> 00:37:47,926 for this problem set don't need to understand or master all 789 00:37:47,926 --> 00:37:48,906 of these various features. 790 00:37:49,126 --> 00:37:51,776 But you're definitely gonna wanna turn to the documentation 791 00:37:51,906 --> 00:37:53,526 when you start scratching your head and wonder, 792 00:37:53,706 --> 00:37:55,036 oh, how could I do this? 793 00:37:55,276 --> 00:37:55,926 So it doesn't matter 794 00:37:55,926 --> 00:37:57,256 if you understand how you do everything. 795 00:37:57,456 --> 00:37:58,526 But if you decide, you know what? 796 00:37:58,526 --> 00:38:01,336 I'd like to plant a different icon, what Google calls a 797 00:38:01,336 --> 00:38:03,256 "placemark" somewhere in the map. 798 00:38:03,376 --> 00:38:05,336 Another one of the features actually is 799 00:38:05,376 --> 00:38:07,226 to implement the idea of fuel. 800 00:38:07,226 --> 00:38:09,726 So that as you drive, you're actually running low on fuel 801 00:38:09,726 --> 00:38:11,856 so you could implement a gas station somewhere on campus 802 00:38:11,856 --> 00:38:13,626 that you drive through and you can refuel. 803 00:38:13,626 --> 00:38:15,576 Well, I want to put an icon or a picture 804 00:38:15,576 --> 00:38:17,156 of an actual gas station somewhere. 805 00:38:17,366 --> 00:38:19,826 Well, I might go up here to Google's documentation. 806 00:38:20,066 --> 00:38:21,336 I heard in class and in the spec 807 00:38:21,336 --> 00:38:23,696 that those icons are what Google calls placemarks. 808 00:38:23,856 --> 00:38:25,946 And so what you'll see here is some pretty user friendly 809 00:38:25,946 --> 00:38:28,796 documentation on how to add placemarks to the graph. 810 00:38:28,796 --> 00:38:30,906 And we'll see some of the sample code in just a moment. 811 00:38:31,186 --> 00:38:33,726 Now, meanwhile, I wanted to implement on the bottom 812 00:38:33,726 --> 00:38:35,976 of the screen a little 2-dimensional map 813 00:38:36,136 --> 00:38:38,816 because in playing with the framework for this piece 814 00:38:38,816 --> 00:38:41,486 that I realized-- frankly, it's kind of easy to get lost 815 00:38:41,486 --> 00:38:43,776 in the 3-dimensional world especially if you park inside 816 00:38:43,776 --> 00:38:45,826 of the science center and don't realize where you are. 817 00:38:46,106 --> 00:38:48,506 So I wanted to have a 2-dimensional rendition 818 00:38:48,746 --> 00:38:52,136 of my world so that at least I could put myself back 819 00:38:52,136 --> 00:38:52,836 into context. 820 00:38:52,836 --> 00:38:53,636 So I checked that. 821 00:38:53,866 --> 00:38:57,956 So, I wanted to use also the Google Map's API. 822 00:38:58,356 --> 00:39:00,166 Now, Google is beginning the process 823 00:39:00,166 --> 00:39:02,696 of actually combining all of these various APIs. 824 00:39:02,696 --> 00:39:03,866 But in the end, you'll have 825 00:39:04,206 --> 00:39:07,456 to use different reference material to navigate both. 826 00:39:07,456 --> 00:39:10,336 So I started I think with the tutorial here and here too. 827 00:39:10,336 --> 00:39:12,026 You have the Hello, World of Google Maps. 828 00:39:12,416 --> 00:39:14,086 And as you consider final projects, 829 00:39:14,086 --> 00:39:15,586 realize that it's super easy 830 00:39:15,586 --> 00:39:18,406 to just embed Google Maps in your own webpage. 831 00:39:18,406 --> 00:39:21,326 This is not the real Google Maps, this is just an example 832 00:39:21,576 --> 00:39:24,076 and I could absolutely embed that in my own page. 833 00:39:24,076 --> 00:39:27,216 Think back a few weeks to when we had the CS50 map with all 834 00:39:27,216 --> 00:39:30,116 of you represented as icons all throughout the world 835 00:39:30,116 --> 00:39:31,136 on the course's home page, 836 00:39:31,346 --> 00:39:34,016 where we simply used the Google Maps' API to do that. 837 00:39:34,266 --> 00:39:35,696 So I read up on how to do this. 838 00:39:35,696 --> 00:39:37,456 I wanted to do things like markers. 839 00:39:37,456 --> 00:39:41,176 It turns out the Google Maps API calls markers "overlays", 840 00:39:41,426 --> 00:39:42,966 and there's different types of overlays 841 00:39:43,016 --> 00:39:44,716 but markers are in fact one of them. 842 00:39:44,906 --> 00:39:47,146 And so I just started reading through the code 843 00:39:47,316 --> 00:39:49,466 and you'll notice some already familiar syntax. 844 00:39:49,466 --> 00:39:52,476 The key word var where you see some curly braces 845 00:39:52,476 --> 00:39:55,556 which we'll see again in just a moment, a slightly new keyword, 846 00:39:55,636 --> 00:39:58,886 new, which is used generally in object-oriented programming. 847 00:39:58,886 --> 00:39:59,976 So we'll glance at that today. 848 00:40:00,456 --> 00:40:02,716 >> But in the end, it's all fairly readable. 849 00:40:02,716 --> 00:40:05,736 And what's amazing, frankly, whether you use Google's APIs 850 00:40:05,736 --> 00:40:06,956 or Bing's or any number 851 00:40:06,956 --> 00:40:09,326 of freely available tools these days for your projects 852 00:40:09,326 --> 00:40:11,006 or future programming work, 853 00:40:11,296 --> 00:40:15,946 it's amazing just how relatively few lines of code you need 854 00:40:15,946 --> 00:40:18,816 to write to actually do something interesting. 855 00:40:18,866 --> 00:40:21,306 So let's see what it is we've actually given you here. 856 00:40:21,306 --> 00:40:24,056 So I've SSH'd to the cloud and I've gone ahead 857 00:40:24,056 --> 00:40:25,986 into my public HTML directory 858 00:40:25,986 --> 00:40:27,806 and the spec will remind you how to do this. 859 00:40:28,136 --> 00:40:33,946 I wanna go ahead and do CP dash R CS50 pub source PSET PSET 8, 860 00:40:33,946 --> 00:40:35,576 and I'm gonna copy that here. 861 00:40:35,686 --> 00:40:37,436 And just to recap a couple of basics, 862 00:40:37,436 --> 00:40:41,036 if I now list this directory by default, it's only readable, 863 00:40:41,036 --> 00:40:42,776 writable, executable by me. 864 00:40:43,026 --> 00:40:46,656 That's what's suggested by the RWX there on the left hand side. 865 00:40:46,956 --> 00:40:49,386 So I need to use the chmod command and I need to say, 866 00:40:49,386 --> 00:40:52,156 give everybody the ability to execute it. 867 00:40:52,286 --> 00:40:54,416 Or another way of doing this is 711. 868 00:40:54,416 --> 00:40:56,366 And now if I relist the directory, 869 00:40:56,586 --> 00:40:57,736 now it's all executable. 870 00:40:57,736 --> 00:41:00,156 So this is very similar to PSET 7 stuff but again, 871 00:41:00,346 --> 00:41:02,296 don't get tripped up initially on some 872 00:41:02,296 --> 00:41:03,396 of these low level details. 873 00:41:03,396 --> 00:41:04,826 So the spec will tell you what to do. 874 00:41:05,056 --> 00:41:07,786 Now, I go into this directory and you'll see that none 875 00:41:07,786 --> 00:41:11,406 of these files by default are readable, world readable, 876 00:41:11,406 --> 00:41:13,446 which means if I try to visit my own files 877 00:41:13,446 --> 00:41:15,296 with a web browser, it's not gonna work. 878 00:41:15,416 --> 00:41:19,186 So in the past when we've done this, we've done chmod 644 879 00:41:19,186 --> 00:41:20,256 as the spec will tell you. 880 00:41:20,476 --> 00:41:23,886 And I wanna do this to all JavaScript files, all HTML files 881 00:41:24,186 --> 00:41:27,566 and all CSS files, and now voila, I have a lot of R's 882 00:41:27,566 --> 00:41:30,136 for readability which means I have distro code 883 00:41:30,216 --> 00:41:31,966 for me should now work. 884 00:41:31,966 --> 00:41:35,106 So I'm gonna go to my own URL, cloud dot CS50 dot net, 885 00:41:35,706 --> 00:41:38,786 mail in PSET 8, enter, and there I have it. 886 00:41:38,886 --> 00:41:39,806 The distribution code, 887 00:41:39,806 --> 00:41:41,956 I'm planted by default at university hall. 888 00:41:42,136 --> 00:41:44,166 I can confirm as much by taking a peek 889 00:41:44,166 --> 00:41:46,046 at the John Harvard statue who is right there. 890 00:41:46,966 --> 00:41:50,516 And if you wanna see that there is in fact more to the campus. 891 00:41:50,516 --> 00:41:52,596 Weld actually looks beautiful as the [inaudible] here. 892 00:41:52,596 --> 00:41:54,486 They got some really nice imagery here. 893 00:41:55,486 --> 00:41:57,046 And it's very easy to get distracted 894 00:41:57,046 --> 00:41:58,556 and start driving around just for fun. 895 00:41:58,816 --> 00:42:02,966 So anyhow, so how do we actually then begin using this? 896 00:42:02,966 --> 00:42:06,726 Well, if you take a look at index dot HTML, that's the file 897 00:42:06,726 --> 00:42:10,356 that builds up the aesthetic framework of the site. 898 00:42:10,596 --> 00:42:13,706 So you have among your printouts today, some of this code partly 899 00:42:13,706 --> 00:42:16,396 so that you can actually see exactly how this framework 900 00:42:16,396 --> 00:42:16,906 is working. 901 00:42:17,126 --> 00:42:18,606 Not so much because in your future life, 902 00:42:18,606 --> 00:42:20,336 you're gonna implement another videogame like this, 903 00:42:20,536 --> 00:42:23,016 but because the code in here is very much representative 904 00:42:23,016 --> 00:42:25,626 of doing anything interactive in today's websites, 905 00:42:25,846 --> 00:42:28,146 anything involving Ajax or JavaScript. 906 00:42:28,266 --> 00:42:31,276 Now, even though we ourselves won't have to, but you may, 907 00:42:31,506 --> 00:42:34,596 write Ajax-like code for this problem set. 908 00:42:34,956 --> 00:42:37,536 Google Earth and Google Maps own APIs 909 00:42:37,946 --> 00:42:40,556 which are just big JavaScript files, the Google road 910 00:42:40,556 --> 00:42:41,986 that you incorporate into your page. 911 00:42:42,256 --> 00:42:46,786 Those files are making use of this technology called Ajax. 912 00:42:46,786 --> 00:42:48,736 So when you drive around campus, at first, 913 00:42:48,736 --> 00:42:50,426 some of the buildings might be a little blurry, 914 00:42:50,656 --> 00:42:51,646 but that's to be expected 915 00:42:51,646 --> 00:42:53,356 because Google can't possibly have known 916 00:42:53,356 --> 00:42:55,026 where you were gonna start driving to. 917 00:42:55,246 --> 00:42:57,516 And so just like the real Google Maps, things start 918 00:42:57,516 --> 00:42:58,796 to download progressively. 919 00:42:58,796 --> 00:43:00,316 And if you're on a fast internet connection, 920 00:43:00,536 --> 00:43:02,226 it should be a pretty fast download. 921 00:43:02,466 --> 00:43:05,326 So in fact, at the very top of my HTML file here, 922 00:43:05,556 --> 00:43:08,576 notice I have one, some mention of service dot CSS. 923 00:43:09,126 --> 00:43:11,486 This is just the separate file were I decided to put all 924 00:43:11,486 --> 00:43:13,766 of my styles information. 925 00:43:13,816 --> 00:43:15,506 This is a good principle on programming 926 00:43:15,506 --> 00:43:19,286 or in software design to separate the data part 927 00:43:19,286 --> 00:43:21,156 of your website from the stylization 928 00:43:21,156 --> 00:43:23,396 or to separate the structure from the stylization. 929 00:43:23,646 --> 00:43:26,586 So you'll see there's no mention of font sizes or colors 930 00:43:26,586 --> 00:43:27,876 or anything like that this time. 931 00:43:28,126 --> 00:43:31,926 In my index dot HTML, I factored that all out into the CSS file. 932 00:43:32,176 --> 00:43:33,666 This though is one line of code 933 00:43:33,666 --> 00:43:35,426 that had a copy paste from Google site. 934 00:43:35,426 --> 00:43:39,726 So this long cryptic URL is one that when visited, 935 00:43:39,726 --> 00:43:42,746 downloads a big JavaScript file from Google's own site. 936 00:43:42,746 --> 00:43:45,526 If I visit this, this is the JavaScript code 937 00:43:45,526 --> 00:43:48,796 that implements the Google Earth and Google Maps' API. 938 00:43:49,376 --> 00:43:51,036 In fact, there is even more than just this. 939 00:43:51,096 --> 00:43:53,056 This actually doesn't look like a huge amount of code 940 00:43:53,056 --> 00:43:55,576 for the amazingness that the tool actually does. 941 00:43:55,796 --> 00:43:57,356 But that's because their code is designed 942 00:43:57,546 --> 00:43:59,116 to download more JavaScript 943 00:43:59,116 --> 00:44:02,416 as well using again an Ajax-like technique. 944 00:44:02,416 --> 00:44:05,356 So I realize there is a lot more magic happening there. 945 00:44:05,566 --> 00:44:06,836 But then if I look back here, 946 00:44:06,976 --> 00:44:08,896 now I have a bunch of script tags. 947 00:44:08,896 --> 00:44:11,846 So for JavaScript this week, we're actually putting all 948 00:44:11,846 --> 00:44:13,776 of our code in separate JS files 949 00:44:13,976 --> 00:44:16,216 so that we're not mixing it up with our HTML. 950 00:44:16,216 --> 00:44:17,526 So the code you're gonna write 951 00:44:17,526 --> 00:44:20,236 for these problem set will largely be confined 952 00:44:20,396 --> 00:44:23,266 to this file service or shuttle service dot JS. 953 00:44:23,266 --> 00:44:25,346 But we'll explore for just a moment some 954 00:44:25,346 --> 00:44:29,006 of these other files, Math3D dot JS is a library 955 00:44:29,006 --> 00:44:32,326 with some 3-dimensional mathematics related functions, 956 00:44:32,326 --> 00:44:35,366 some trig functions so that we can calculate some angles. 957 00:44:35,366 --> 00:44:37,496 But you don't have to worry too much about how that one works. 958 00:44:37,766 --> 00:44:41,046 But think of this as similar in spirit to sharp include 959 00:44:41,116 --> 00:44:43,806 in the world of C, or the require function in PHP. 960 00:44:43,806 --> 00:44:45,916 This is the way in the web context 961 00:44:45,916 --> 00:44:47,826 to actually download some helper files. 962 00:44:48,076 --> 00:44:52,116 In Buildings dot JS we'll see, thanks to the planning folks 963 00:44:52,116 --> 00:44:56,776 on campus, that we have access to essentially a huge array 964 00:44:56,776 --> 00:45:00,036 of all 500 plus buildings that Harvard owns. 965 00:45:00,346 --> 00:45:03,586 This is a file that has some comments at the top. 966 00:45:03,746 --> 00:45:04,526 It ends in dot JS. 967 00:45:05,136 --> 00:45:06,346 Because of the script tag, 968 00:45:06,346 --> 00:45:09,496 this file gets automatically loaded anytime you visit index 969 00:45:09,496 --> 00:45:10,826 dot HTML in a browser. 970 00:45:11,086 --> 00:45:13,196 And here is the syntax to understand 971 00:45:13,196 --> 00:45:15,386 and it's actually pretty straightforward 972 00:45:15,816 --> 00:45:16,566 as we'll see here. 973 00:45:16,566 --> 00:45:18,496 Var just says, here comes the variable. 974 00:45:18,756 --> 00:45:20,676 Buildings, I capitalized it 'cause I wanted 975 00:45:20,676 --> 00:45:21,866 to convey the idea that this is-- 976 00:45:21,916 --> 00:45:24,306 these are some constant pieces of information. 977 00:45:24,306 --> 00:45:26,096 You really shouldn't change where things are. 978 00:45:26,456 --> 00:45:28,036 Then notice the square brackets. 979 00:45:28,126 --> 00:45:30,816 So the square bracket says here comes an array. 980 00:45:31,206 --> 00:45:33,756 If I fast forward to the very bottom of this file, 981 00:45:33,996 --> 00:45:38,736 we'll see that the corresponding part is a close square bracket 982 00:45:38,736 --> 00:45:42,076 at the very bottom followed by a semicolon, that's down here. 983 00:45:42,376 --> 00:45:45,546 So that means this is a huge numerically indexed array 984 00:45:45,546 --> 00:45:46,246 of something. 985 00:45:46,486 --> 00:45:47,566 What are those somethings? 986 00:45:47,796 --> 00:45:50,126 Well, notice that they're not just numbers or strings. 987 00:45:50,476 --> 00:45:54,526 Every such something opens with a curly brace and some stuff, 988 00:45:54,896 --> 00:45:56,966 then a close curly brace and a comma. 989 00:45:57,296 --> 00:46:01,816 So this curly brace notation in JavaScript is adjacent notation, 990 00:46:01,816 --> 00:46:03,226 JavaScript object notation. 991 00:46:03,386 --> 00:46:05,716 The curly brace says here comes an object. 992 00:46:05,716 --> 00:46:07,606 And an object is very similar in spirit 993 00:46:07,606 --> 00:46:11,186 to what we called a struct in C. It's similar in spirit 994 00:46:11,186 --> 00:46:14,996 to what we call the class like the stack class in PHP. 995 00:46:14,996 --> 00:46:17,686 And what it is, is the collection of key value pairs. 996 00:46:17,686 --> 00:46:19,746 So for PSET 6 you implemented a hash table. 997 00:46:19,746 --> 00:46:21,016 That too is key value pairs. 998 00:46:21,316 --> 00:46:23,876 So this object is really just a hash table. 999 00:46:23,876 --> 00:46:26,386 So if you want a quick and dirty hash table in JavaScript, 1000 00:46:26,716 --> 00:46:28,406 you can say, here is a hash table, 1001 00:46:28,406 --> 00:46:31,146 here is an object more specifically 1002 00:46:31,386 --> 00:46:32,796 that goes from here to here. 1003 00:46:32,976 --> 00:46:35,666 And then it has a bunch of keys, root, name, address, 1004 00:46:35,836 --> 00:46:39,396 lat and longitude and then ach of those keys is associated 1005 00:46:39,396 --> 00:46:41,796 with the value by way of this colon syntax. 1006 00:46:41,796 --> 00:46:44,216 Now, as the spec says, it turns out Harvard has a-- 1007 00:46:44,216 --> 00:46:47,626 every building in Harvard has a root value which is a unique ID. 1008 00:46:47,976 --> 00:46:50,076 Unfortunately, people didn't really plan ahead and a lot 1009 00:46:50,076 --> 00:46:53,026 of these root values start with leading zeros 1010 00:46:53,026 --> 00:46:55,206 which actually creates great headaches in programming. 1011 00:46:55,206 --> 00:46:56,806 Because if you convert it accidentally 1012 00:46:56,806 --> 00:46:58,286 to an int, what's gonna happen? 1013 00:46:59,326 --> 00:47:02,226 You're gonna lose the leading zero which tends to be bad 1014 00:47:02,226 --> 00:47:04,526 when you want to use it in if conditions and else if's 1015 00:47:04,526 --> 00:47:06,216 and you wanna compare it, so beware. 1016 00:47:06,216 --> 00:47:08,846 That's why we put the number in quotes to mitigate that. 1017 00:47:09,046 --> 00:47:10,616 Then we gave you the name of every building, 1018 00:47:10,616 --> 00:47:11,696 the address of every building 1019 00:47:11,696 --> 00:47:13,836 and then essentially the GPS coordinates thereof. 1020 00:47:13,836 --> 00:47:16,966 So in this file then, we have an array of objects, 1021 00:47:16,996 --> 00:47:20,066 each one of which represents one of Harvard's 500 plus buildings. 1022 00:47:20,356 --> 00:47:22,726 Meanwhile, if I go into Passengers dot JS, 1023 00:47:23,226 --> 00:47:25,356 I see a very similarly structured file. 1024 00:47:25,596 --> 00:47:28,166 But this one has a list of all of the staff on CS50. 1025 00:47:28,246 --> 00:47:30,306 So Var Passengers is another array 1026 00:47:30,306 --> 00:47:33,736 and each staff member has a username, name, 1027 00:47:33,736 --> 00:47:35,746 and a house associated with him or her. 1028 00:47:36,036 --> 00:47:39,566 And then lastly, we also came up with some coordinates 1029 00:47:39,566 --> 00:47:41,656 for the houses but this one is a little different. 1030 00:47:42,076 --> 00:47:46,526 So it turns out that sometimes you wanna be able to index 1031 00:47:46,526 --> 00:47:48,856 into an array as though it's an associate of array. 1032 00:47:48,856 --> 00:47:53,036 We introduced that jargon in problem set 7 and PHP. 1033 00:47:53,086 --> 00:47:57,646 So notice that these variable houses is actually an object 1034 00:47:58,066 --> 00:48:01,526 which is not-- so not an array, and then the keys 1035 00:48:01,526 --> 00:48:03,446 in this object are actually strings 1036 00:48:03,546 --> 00:48:04,886 under the names of the houses. 1037 00:48:05,196 --> 00:48:08,196 The value of my having implemented the houses data 1038 00:48:08,196 --> 00:48:10,286 structure like this, is now essentially, 1039 00:48:10,286 --> 00:48:11,426 I have a lookup table. 1040 00:48:11,426 --> 00:48:13,736 If I ever need to answer a question over the form, 1041 00:48:13,866 --> 00:48:16,696 what are the GPS coordinates of Adam's house, 1042 00:48:17,006 --> 00:48:19,406 I can index into this hash table. 1043 00:48:19,406 --> 00:48:24,276 I can index into this object and immediately get back the answer 1044 00:48:24,276 --> 00:48:26,836 for Adam's house which itself notice is what kind 1045 00:48:26,836 --> 00:48:27,626 of data structure. 1046 00:48:27,626 --> 00:48:28,196 [ Inaudible Remark ] 1047 00:48:28,196 --> 00:48:30,636 >> It's another struct. 1048 00:48:30,636 --> 00:48:33,216 It's another object thanks to those curly braces. 1049 00:48:33,216 --> 00:48:35,136 Now aesthetically, I just found it more readable 1050 00:48:35,136 --> 00:48:37,326 to put those curly braces 1051 00:48:37,326 --> 00:48:39,556 and those key value pairs on the same line. 1052 00:48:39,806 --> 00:48:43,496 But it's just an object containing keys whose values are 1053 00:48:43,496 --> 00:48:44,296 more objects. 1054 00:48:44,296 --> 00:48:46,536 And this is what's frankly really nice about some 1055 00:48:46,536 --> 00:48:47,776 of these higher level languages. 1056 00:48:47,776 --> 00:48:49,546 If you just need a data structure with which 1057 00:48:49,546 --> 00:48:52,096 to encapsulate some related information, bam, 1058 00:48:52,096 --> 00:48:53,246 just curly brace, curly brace. 1059 00:48:53,376 --> 00:48:55,876 Put whatever you want in there and now you can pass 1060 00:48:55,876 --> 00:48:58,046 around an object, a whole chunk of data 1061 00:48:58,286 --> 00:48:59,946 like latitude and longitude. 1062 00:48:59,946 --> 00:49:01,556 And realize too the utility here. 1063 00:49:01,756 --> 00:49:04,386 In C, if I wanted to find out the GPS coordinates 1064 00:49:04,436 --> 00:49:06,316 of Adam's house, I probably have 1065 00:49:06,316 --> 00:49:09,086 to call two functions 'cause a function generally can only 1066 00:49:09,086 --> 00:49:10,746 return one value. 1067 00:49:11,026 --> 00:49:13,786 What's nice here by just using a data structure, an object, 1068 00:49:13,786 --> 00:49:18,546 I can get back two values but really, one value in object 1069 00:49:18,626 --> 00:49:20,826 that happens to have two keys inside of it. 1070 00:49:21,026 --> 00:49:23,436 So what's really nice too about these objects is 1071 00:49:23,436 --> 00:49:27,456 that you can return and pass multiple values at once. 1072 00:49:27,456 --> 00:49:30,636 So let's see now how the whole game is actually structured. 1073 00:49:30,826 --> 00:49:32,516 It turns out even though my font is big, 1074 00:49:32,796 --> 00:49:34,796 there is not a huge amount of code here, right? 1075 00:49:34,796 --> 00:49:37,446 Most of the code is this silly list of empty seats 1076 00:49:37,446 --> 00:49:39,336 with this LI for list item tag. 1077 00:49:39,736 --> 00:49:41,586 So it turns out that really what I have done 1078 00:49:41,586 --> 00:49:43,896 in my HTML is just provide a structure 1079 00:49:43,896 --> 00:49:46,636 and I'm using this popular HTML element called div. 1080 00:49:46,896 --> 00:49:49,246 The div element says here is a division of the page. 1081 00:49:49,246 --> 00:49:51,356 Here is a rectangular something rather. 1082 00:49:51,636 --> 00:49:53,856 But with CSS, these rectangles no longer have 1083 00:49:53,856 --> 00:49:54,966 to span the whole page. 1084 00:49:55,146 --> 00:49:57,676 You can actually say, "You know what, for the Earth, 1085 00:49:57,676 --> 00:49:59,966 I need a rectangle that's about that big. 1086 00:50:00,456 --> 00:50:04,226 >> But then I want a 320 pixel by 320 pixel math-- 1087 00:50:04,446 --> 00:50:05,866 div over here for the map. 1088 00:50:06,276 --> 00:50:07,866 Looks like we're in Pennsylvania now 1089 00:50:07,926 --> 00:50:09,976 as on the side I think, maybe? 1090 00:50:10,046 --> 00:50:11,196 No? Something like that. 1091 00:50:11,196 --> 00:50:15,456 And now if I go back here we'll see some other divs. 1092 00:50:15,456 --> 00:50:18,106 So long story short, there's a bunch of divs in here 1093 00:50:18,346 --> 00:50:20,766 that represent each area of the screen. 1094 00:50:20,986 --> 00:50:22,996 So how do you begin even figuring out how 1095 00:50:22,996 --> 00:50:24,136 to design something like this? 1096 00:50:24,306 --> 00:50:26,376 Well, to be honest the very first thing I did 1097 00:50:26,376 --> 00:50:28,966 when starting this is I didn't even use the Google Earth API. 1098 00:50:28,966 --> 00:50:32,886 I first destroyed some HTML with some CSS and I made 1099 00:50:32,886 --> 00:50:35,516 like the big left rectangle, I made it green 1100 00:50:35,516 --> 00:50:37,396 and then I made a yellow rectangle-- 1101 00:50:37,396 --> 00:50:40,056 square over here then I made a white rectangle 1102 00:50:40,106 --> 00:50:43,216 up top 'cause I just kind of wanted to mock up the interface 1103 00:50:43,376 --> 00:50:44,686 that I wanted to then implement. 1104 00:50:45,046 --> 00:50:46,666 And so this is a very good starting point. 1105 00:50:46,666 --> 00:50:48,216 It's very easy with final projects to kind 1106 00:50:48,216 --> 00:50:50,096 of get overwhelmed when you've got this long list 1107 00:50:50,096 --> 00:50:52,536 of amazing features and it's just overwhelming 1108 00:50:52,536 --> 00:50:54,516 where you actually begin, start simply. 1109 00:50:54,516 --> 00:50:57,086 Honestly, I make something that looks ridiculously ugly 1110 00:50:57,086 --> 00:50:58,936 with just colored boxes here and there 1111 00:50:58,936 --> 00:51:01,156 by using the bgcolor attribute or the like. 1112 00:51:01,486 --> 00:51:04,206 And I just mock up sort of wire free my site 1113 00:51:04,206 --> 00:51:06,576 and then I start filling in some of those blanks. 1114 00:51:06,576 --> 00:51:08,236 Well how did I start filling in those blanks? 1115 00:51:08,506 --> 00:51:11,626 Well, notice I made ample use of this attribute called ID. 1116 00:51:11,926 --> 00:51:14,846 ID equals instructions, ID equals controls, 1117 00:51:14,846 --> 00:51:18,436 ID equals announcements so that now I have a unique keyword 1118 00:51:18,436 --> 00:51:21,496 with which I can address all of these different locations 1119 00:51:21,666 --> 00:51:23,626 in my overarching framework. 1120 00:51:23,626 --> 00:51:25,926 In fact, if you want to see how to embed a Google Earth 1121 00:51:25,926 --> 00:51:29,006 into your webpage in some sense it's as simple as that. 1122 00:51:29,366 --> 00:51:33,046 Create a div with nothing inside of it but give it a unique a ID 1123 00:51:33,276 --> 00:51:36,536 because I'm gonna call one JavaScript function that takes 1124 00:51:36,536 --> 00:51:39,926 as its argument the name of that div or the ID of that div 1125 00:51:40,086 --> 00:51:42,116 and Google's code is gonna handle the process 1126 00:51:42,306 --> 00:51:44,896 of taking this otherwise empty div and exploding it 1127 00:51:44,896 --> 00:51:47,986 to whatever sizes appropriate to fit that plugin, 1128 00:51:48,076 --> 00:51:49,126 that picture of the earth. 1129 00:51:49,496 --> 00:51:51,866 But here's how we've implemented the user interface. 1130 00:51:51,986 --> 00:51:54,166 So up here on the body tag I've got a few 1131 00:51:54,166 --> 00:51:55,216 of these event handlers. 1132 00:51:55,216 --> 00:51:56,336 We looked at a couple last week. 1133 00:51:56,336 --> 00:51:59,956 I think on Submit and on Click turns out you can get fancier. 1134 00:51:59,956 --> 00:52:03,096 There is onkeydown, so when you push a key 1135 00:52:03,096 --> 00:52:05,906 down that fires an event that you can listen for. 1136 00:52:05,906 --> 00:52:09,076 Onkeyup fires a different event that you can listen for too. 1137 00:52:09,076 --> 00:52:11,436 So if you think about how this game works, if I-- 1138 00:52:11,436 --> 00:52:13,846 hold the W key as the instructions say, 1139 00:52:14,126 --> 00:52:16,356 that's like putting my foot on the gas and as long 1140 00:52:16,356 --> 00:52:19,116 as that key is down I want to keep going forward, forward, 1141 00:52:19,116 --> 00:52:21,626 forward but as soon as I lift up I wanna send a message 1142 00:52:21,626 --> 00:52:24,506 to the camera that says stop moving. 1143 00:52:24,506 --> 00:52:26,056 And so it basically boils 1144 00:52:26,056 --> 00:52:27,836 down to these two basic building blocks, 1145 00:52:27,876 --> 00:52:29,736 this event handler and this one. 1146 00:52:29,966 --> 00:52:33,436 And notice I'm returning the value of keystroke passing 1147 00:52:33,436 --> 00:52:35,996 in two arguments, it turns out keystroke is one 1148 00:52:35,996 --> 00:52:37,686 of the functions in service.js 1149 00:52:37,686 --> 00:52:39,146 that we'll look at in just a moment. 1150 00:52:39,146 --> 00:52:40,226 It's a function that I wrote. 1151 00:52:40,536 --> 00:52:43,126 Then we have onload and onunload. 1152 00:52:43,266 --> 00:52:45,776 These are the two functions that kick start the whole process. 1153 00:52:46,086 --> 00:52:51,376 So when this page loads a function called load gets called 1154 00:52:51,736 --> 00:52:53,726 and a function called unload gets called 1155 00:52:53,726 --> 00:52:57,616 when I close the page those two functions I myself wrote. 1156 00:52:57,616 --> 00:52:58,656 So let's take a quick look. 1157 00:52:58,656 --> 00:53:01,976 So if I open up service.js this is 1158 00:53:01,976 --> 00:53:03,906 where really the magic starts to happen. 1159 00:53:03,906 --> 00:53:06,346 So at the top of this file I've got some basic constants, 1160 00:53:06,346 --> 00:53:08,206 not unlike some of our past programs and some 1161 00:53:08,206 --> 00:53:09,136 of this was trial and error. 1162 00:53:09,136 --> 00:53:12,366 I've realized that those are the GPS coordinates roughly near 1163 00:53:12,366 --> 00:53:15,036 Johnston gate that will allow you at that heading, 1164 00:53:15,166 --> 00:53:17,636 that angle to face John Harvard statue. 1165 00:53:17,636 --> 00:53:19,726 And I just played around until I found something that worked. 1166 00:53:19,966 --> 00:53:22,596 I then decided that the bus, based on a conversation 1167 00:53:22,596 --> 00:53:25,516 with shuttle services supports up to 35 seated passengers 1168 00:53:25,516 --> 00:53:28,526 so I made a constant and then the velocity also trial 1169 00:53:28,526 --> 00:53:29,936 and error, I said 50, 1170 00:53:29,936 --> 00:53:32,536 which actually is probably roughly 50 miles per hour 1171 00:53:32,536 --> 00:53:33,446 and though not quite. 1172 00:53:33,446 --> 00:53:35,816 We actually did drive through those buildings pretty fast, 1173 00:53:36,046 --> 00:53:37,316 you might want to slow that down a bit. 1174 00:53:37,316 --> 00:53:38,486 And then notice this. 1175 00:53:38,646 --> 00:53:40,906 I decided to declare some global variables 1176 00:53:40,906 --> 00:53:44,056 which again is a bad habit to get in to excessively 1177 00:53:44,276 --> 00:53:46,676 but sometimes if you're implementing an application 1178 00:53:46,896 --> 00:53:49,226 that's clearly dedicated to one purpose 1179 00:53:49,226 --> 00:53:51,486 and is not gonna be integrated into someone else's work, 1180 00:53:51,806 --> 00:53:53,736 it's reasonable to have some global variables 1181 00:53:53,736 --> 00:53:55,556 and the variables through trial and error 1182 00:53:55,556 --> 00:53:58,676 that I realized I needed was a variable called earth that's 1183 00:53:58,676 --> 00:54:02,666 essentially a pointer to the earth that gets embedded 1184 00:54:02,666 --> 00:54:04,446 in the page but the jargon 1185 00:54:04,446 --> 00:54:06,566 for JavaScript is reference, it's not a pointer. 1186 00:54:06,896 --> 00:54:08,766 I needed another such reference for the map 1187 00:54:09,096 --> 00:54:10,726 and then I needed a couple of more 1188 00:54:10,726 --> 00:54:13,526 for what I called the shuttle and the bus which are the icons. 1189 00:54:13,566 --> 00:54:14,806 But again, some of this is discussed 1190 00:54:14,806 --> 00:54:16,536 in the spec. But here's what cool. 1191 00:54:16,806 --> 00:54:20,846 To use the Google APIs in your own page, all you need 1192 00:54:20,846 --> 00:54:22,156 to do is call two functions: 1193 00:54:22,476 --> 00:54:25,186 Google.load the earth API version 1, 1194 00:54:25,466 --> 00:54:29,186 Google.load the maps API version 3 with some other parameters. 1195 00:54:29,186 --> 00:54:32,486 And now, you have the ability to call any of the functions 1196 00:54:32,716 --> 00:54:35,096 and the documentation we just started to glance at. 1197 00:54:35,336 --> 00:54:38,046 So if I now scroll down to my function load, 1198 00:54:38,046 --> 00:54:41,256 let's just take a look at what's really going on and try 1199 00:54:41,256 --> 00:54:43,316 to tease apart just a few syntactic details. 1200 00:54:43,596 --> 00:54:44,596 Here's the function load 1201 00:54:44,816 --> 00:54:47,226 and thankfully the comments pretty much say what it does 1202 00:54:47,496 --> 00:54:49,766 but just notice-- don't be overwhelmed perhaps 1203 00:54:49,796 --> 00:54:50,796 by the syntax here. 1204 00:54:51,016 --> 00:54:54,426 So notice I'm declaring a variable called latlng equals 1205 00:54:54,426 --> 00:54:58,366 new google.maps.LatLng of this comma this. 1206 00:54:58,676 --> 00:55:00,946 So these capital words, those are the constants that-- 1207 00:55:00,946 --> 00:55:03,556 those are the GPS coordinates of Johnston gate, give or take. 1208 00:55:03,926 --> 00:55:05,976 So this is new syntax at least to those of you 1209 00:55:05,976 --> 00:55:07,496 without prior programming background 1210 00:55:07,496 --> 00:55:10,486 and Java the keyword new in JavaScript 1211 00:55:10,656 --> 00:55:14,126 as in other languages says give me a new object. 1212 00:55:14,356 --> 00:55:17,226 It's kind of like malloc but it's a little fancier 1213 00:55:17,226 --> 00:55:18,156 but it's the same idea. 1214 00:55:18,156 --> 00:55:20,916 It allocates space for something that's apparently 1215 00:55:20,916 --> 00:55:23,316 called google.maps.LatLng. 1216 00:55:23,596 --> 00:55:27,916 So that google.maps.LatLng, it's a little longer a string 1217 00:55:27,916 --> 00:55:29,716 for a name but in fact that's just the name 1218 00:55:29,716 --> 00:55:30,646 of the structure really. 1219 00:55:30,646 --> 00:55:34,086 It's a LatLng data structure more generally called an object. 1220 00:55:34,386 --> 00:55:36,666 So now I've stored inside this variable, 1221 00:55:36,666 --> 00:55:39,196 essentially two values a latitude and a longitude 1222 00:55:39,436 --> 00:55:41,006 in this special type of structure. 1223 00:55:41,356 --> 00:55:44,276 Then I have this, map, which again is a global variable 1224 00:55:44,276 --> 00:55:47,266 up at the top of my file and I'm using that global 'cause I want 1225 00:55:47,266 --> 00:55:49,486 to remember the map and this is key if you want 1226 00:55:49,526 --> 00:55:52,416 to actually navigate on the 2D earth and the 3D earth you have 1227 00:55:52,416 --> 00:55:55,006 to remember references to or pointers 1228 00:55:55,006 --> 00:55:57,146 to those objects otherwise you're gonna create the map 1229 00:55:57,286 --> 00:55:58,576 and then lose control over it. 1230 00:55:58,576 --> 00:55:59,896 It's like for getting a pointer 1231 00:56:00,116 --> 00:56:01,716 and allocating memory never freeing it, 1232 00:56:01,716 --> 00:56:03,216 so I need to remember that reference. 1233 00:56:03,216 --> 00:56:04,616 It turns out the object 1234 00:56:04,616 --> 00:56:08,656 that represents the 2D map API called google.maps.map 1235 00:56:09,246 --> 00:56:10,796 and what does this represent here? 1236 00:56:10,916 --> 00:56:15,866 Document.getElementById "map" what role might 1237 00:56:15,866 --> 00:56:18,756 that serve just by inference here? 1238 00:56:18,756 --> 00:56:19,366 [ Inaudible Remark ] 1239 00:56:19,366 --> 00:56:23,376 >> Oh sorry. 1240 00:56:23,376 --> 00:56:23,556 [ Inaudible Remark ] 1241 00:56:23,556 --> 00:56:24,686 >> Exactly. 1242 00:56:25,356 --> 00:56:32,306 So this function, this is a JavaScript function that's 1243 00:56:32,356 --> 00:56:35,626 terribly useful document.getElementById 1244 00:56:35,806 --> 00:56:36,956 literally does that. 1245 00:56:36,956 --> 00:56:39,256 There is an element in the HTML presumably 1246 00:56:39,426 --> 00:56:41,636 that has an ID attribute of map 1247 00:56:42,106 --> 00:56:44,906 and so what this function does is it actually returns 1248 00:56:44,906 --> 00:56:46,786 to me essentially a pointer 1249 00:56:46,946 --> 00:56:49,936 to that specific element in the HTML. 1250 00:56:49,936 --> 00:56:52,946 Now even though HTML is text remember the picture we drew 1251 00:56:52,946 --> 00:56:55,156 last week when a browser reads HTML 1252 00:56:55,156 --> 00:56:56,886 into RAM it actually builds it 1253 00:56:56,886 --> 00:56:58,196 up as what kind of data structure? 1254 00:56:58,726 --> 00:57:02,396 What did it look like when we drew it? 1255 00:57:02,396 --> 00:57:03,126 >> A tree. 1256 00:57:03,126 --> 00:57:03,896 >> It was a tree, right? 1257 00:57:03,896 --> 00:57:05,766 And we called it the DOM, Document Object Model. 1258 00:57:05,766 --> 00:57:06,996 It was kind of like a family tree. 1259 00:57:07,226 --> 00:57:09,636 So when you say document.getElementById what 1260 00:57:09,636 --> 00:57:12,666 you're really getting back is essentially a pointer to one 1261 00:57:12,666 --> 00:57:15,336 of those nodes in the tree and this is useful 1262 00:57:15,546 --> 00:57:18,296 because now using our programming code I wanna be able 1263 00:57:18,296 --> 00:57:21,236 to take that otherwise empty div whose ID is map 1264 00:57:21,486 --> 00:57:22,566 and put something in it. 1265 00:57:22,746 --> 00:57:25,446 And that something is going to be this two-dimensional map 1266 00:57:25,796 --> 00:57:30,316 and that's done by this function call new google.maps.map, 1267 00:57:30,506 --> 00:57:33,596 this creates a new map at this location, that div, 1268 00:57:33,596 --> 00:57:36,276 and now notice this syntax 'cause you'll see it a huge 1269 00:57:36,276 --> 00:57:37,316 amount now on the web 1270 00:57:37,316 --> 00:57:40,826 and in anything JavaScript-based comma curly brace 1271 00:57:40,826 --> 00:57:42,816 which denotes what? 1272 00:57:42,816 --> 00:57:45,196 Object. So it looks like the second argument 1273 00:57:45,406 --> 00:57:48,466 to this function call is an object 1274 00:57:48,686 --> 00:57:51,086 and that object's keys are called center, 1275 00:57:51,316 --> 00:57:54,466 disable default UI, map type ID, navigation control, 1276 00:57:54,466 --> 00:57:56,836 scroll wheel zoom then notice the curly brace? 1277 00:57:57,086 --> 00:57:59,136 Then notice the close parenthesis which maps 1278 00:57:59,206 --> 00:58:00,676 to the beginning of this function call 1279 00:58:00,956 --> 00:58:04,046 and this is actually wonderfully helpful syntax in C 1280 00:58:04,046 --> 00:58:05,446 and even in PHP thus far. 1281 00:58:05,746 --> 00:58:08,026 Anytime you call a function you can provide zero 1282 00:58:08,026 --> 00:58:10,396 or more arguments and you usually call those arguments 1283 00:58:10,396 --> 00:58:11,676 with comma separating them. 1284 00:58:12,016 --> 00:58:14,166 This gets a little annoying though if some 1285 00:58:14,166 --> 00:58:17,136 of your functions now start to take one, two, three, four, 1286 00:58:17,136 --> 00:58:19,996 five, six arguments or seven really. 1287 00:58:19,996 --> 00:58:22,916 So notice that apparently you created a two-dimensional map 1288 00:58:23,226 --> 00:58:26,026 you need to tell Google the center of the map whether or not 1289 00:58:26,026 --> 00:58:29,016 to disable the default user interface, whatever that is. 1290 00:58:29,276 --> 00:58:31,566 You need to give the map a type ID then you need 1291 00:58:31,566 --> 00:58:33,546 to say do you want the navigation control there 1292 00:58:33,546 --> 00:58:34,796 or not, true or false? 1293 00:58:34,966 --> 00:58:37,016 Do you want the scroll wheel on the mouse to work? 1294 00:58:37,106 --> 00:58:38,466 Do you-- what zoom level do you want? 1295 00:58:38,466 --> 00:58:40,206 That's a ridiculous number of arguments 1296 00:58:40,206 --> 00:58:42,136 and you can imagine writing that function call. 1297 00:58:42,506 --> 00:58:45,436 Argument comma argument comma argument comma argument-- 1298 00:58:45,526 --> 00:58:47,926 I mean, you would forget just the order of these things. 1299 00:58:47,926 --> 00:58:50,166 I'm a bit anal so I tend to alphabetize here 1300 00:58:50,366 --> 00:58:51,726 but I would otherwise have to check 1301 00:58:51,796 --> 00:58:55,596 in the documentation what is the exact order 1302 00:58:55,596 --> 00:58:57,356 of all seven of these arguments? 1303 00:58:57,356 --> 00:58:58,886 And that's just asking for trouble. 1304 00:58:58,886 --> 00:59:00,946 It's annoying and it also creates problems 1305 00:59:00,946 --> 00:59:02,316 if supposed I don't want to provide one 1306 00:59:02,316 --> 00:59:05,136 of those arguments now you have to start providing like null 1307 00:59:05,136 --> 00:59:07,336 or blank values in all of these arguments. 1308 00:59:07,626 --> 00:59:12,146 So in any case, in languages like PHP and JavaScript and Perl 1309 00:59:12,146 --> 00:59:16,356 and others thankfully you can pass in arguments by way 1310 00:59:16,356 --> 00:59:19,746 of these objects or really these hash tables so that you can pass 1311 00:59:19,746 --> 00:59:22,726 in all of these key value pairs but who cares what the order is? 1312 00:59:22,726 --> 00:59:24,066 You certainly do not have to. 1313 00:59:24,326 --> 00:59:26,956 So this is kind of the what's in vogue with JavaScript. 1314 00:59:27,296 --> 00:59:29,256 So that's it for creating a two-dimensional map. 1315 00:59:29,496 --> 00:59:32,066 If I want to plant a marker on that map I need 1316 00:59:32,066 --> 00:59:33,556 to make a function call like this, 1317 00:59:33,616 --> 00:59:36,676 create a new marker using this icon which happens 1318 00:59:36,676 --> 00:59:39,126 to represent a blue bus that I found on the internet. 1319 00:59:39,736 --> 00:59:41,766 Map, what map do I wanna use? 1320 00:59:41,766 --> 00:59:42,906 Well the one I just created. 1321 00:59:42,996 --> 00:59:43,826 And what title? 1322 00:59:43,886 --> 00:59:45,696 So where does you are here come from? 1323 00:59:45,866 --> 00:59:47,696 Well that's what happens when if I scroll 1324 00:59:47,696 --> 00:59:49,416 over here and hover my icon. 1325 00:59:49,916 --> 00:59:52,646 In fact you are here, so this all being done in code. 1326 00:59:52,836 --> 00:59:54,726 And then lastly, look at this. 1327 00:59:55,206 --> 00:59:59,846 Google.earth.createInstance of earth initCB and failureCB. 1328 00:59:59,956 --> 01:00:02,326 So this too is a new feature of JavaScript 1329 01:00:02,456 --> 01:00:03,846 versus other languages we've done. 1330 01:00:04,156 --> 01:00:06,176 >> It turns out that initializing a Google Earth 1331 01:00:06,176 --> 01:00:08,846 plugin requires a little more work on your part. 1332 01:00:08,976 --> 01:00:11,646 You first need to call this function called createInstance 1333 01:00:12,056 --> 01:00:15,916 but you also need to tell the API what function to call 1334 01:00:15,916 --> 01:00:18,856 if it is successful in loading the Google Earth plug in 1335 01:00:19,106 --> 01:00:20,626 or if it's unsuccessful. 1336 01:00:20,866 --> 01:00:22,786 And so what's neat about JavaScript 2 is 1337 01:00:22,786 --> 01:00:25,106 that you can pass in functions 1338 01:00:25,446 --> 01:00:28,076 as though they themselves are variables. 1339 01:00:28,076 --> 01:00:31,506 Up until now we've only called functions and defined functions. 1340 01:00:31,716 --> 01:00:33,406 We've never passed them around even though 1341 01:00:33,406 --> 01:00:35,946 in C you can pass functions by pointer. 1342 01:00:36,126 --> 01:00:40,216 It turns out that if I look at initCB this is just the name 1343 01:00:40,216 --> 01:00:42,536 of another function but notice what's crucial here. 1344 01:00:42,766 --> 01:00:44,766 When I passed in the name of this function 1345 01:00:44,766 --> 01:00:46,846 to my init function, let me go back to this real fast, 1346 01:00:47,396 --> 01:00:49,296 to my load function notice 1347 01:00:49,376 --> 01:00:52,476 that what I did not do is include parenthesis 1348 01:00:52,476 --> 01:00:54,926 after the function name here or here. 1349 01:00:55,176 --> 01:00:58,516 That means don't call this function just pass in the name 1350 01:00:58,516 --> 01:01:00,436 of or really a pointer to this function 1351 01:01:00,666 --> 01:01:01,946 so that it can be called later. 1352 01:01:01,976 --> 01:01:03,436 Well, what happens later? 1353 01:01:03,586 --> 01:01:04,926 Well again, this is just an instance 1354 01:01:04,926 --> 01:01:07,976 of my reading the documentation, I've never used this API before 1355 01:01:07,976 --> 01:01:10,536 like last Wednesday or so and so I decided 1356 01:01:10,536 --> 01:01:11,886 that I needed to read through it. 1357 01:01:12,156 --> 01:01:15,036 I understood roughly what most of these lines did 1358 01:01:15,036 --> 01:01:17,116 but some initially I just copied and post it 'cause I wanted 1359 01:01:17,116 --> 01:01:18,066 to see what the thing could do. 1360 01:01:18,346 --> 01:01:22,656 And the interesting part now is that finally in this init CB 1361 01:01:22,656 --> 01:01:24,426 for callback, callback is a function 1362 01:01:24,426 --> 01:01:26,676 that someone else calls I have this line. 1363 01:01:26,676 --> 01:01:28,466 And this is the last thing we'll turn our attention 1364 01:01:28,466 --> 01:01:31,286 to here 'cause this is really the code that the staff wrote. 1365 01:01:31,286 --> 01:01:34,616 So, we have now what we've decided to call a Shuttle. 1366 01:01:34,976 --> 01:01:38,236 A Shuttle, capital S, is what most people would call a class. 1367 01:01:38,666 --> 01:01:41,166 Now, as in the side, JavaScript does not have classes it's what 1368 01:01:41,166 --> 01:01:42,686 called a prototype-based language 1369 01:01:42,946 --> 01:01:45,346 but it is an object-oriented language which means 1370 01:01:45,646 --> 01:01:49,106 when I call new Shuttle this is creating a new data structure 1371 01:01:49,106 --> 01:01:50,816 and memory that represents a shuttle. 1372 01:01:51,006 --> 01:01:53,056 A shuttle has a few things associated with it. 1373 01:01:53,056 --> 01:01:55,606 One is the heading, what angle is it facing, 1374 01:01:55,606 --> 01:01:57,076 for instance the John Harvard statue? 1375 01:01:57,366 --> 01:01:58,176 What height is it? 1376 01:01:58,176 --> 01:02:01,586 I decided, roughly the-- what height a shuttle bus should be 1377 01:02:01,586 --> 01:02:03,436 so that you're not looming over the buildings 1378 01:02:03,436 --> 01:02:06,026 but you could make a, you know, 50-foot tall shuttle bus 1379 01:02:06,026 --> 01:02:08,386 if you wanted to see over the tops of buildings. 1380 01:02:08,706 --> 01:02:09,716 Where do you want it to start? 1381 01:02:09,826 --> 01:02:12,946 At what planet do you want to put this particular shuttle on? 1382 01:02:12,946 --> 01:02:15,556 And then what velocity do you want to actually start it with? 1383 01:02:15,916 --> 01:02:18,886 And then that code, just so you know where it is, 1384 01:02:18,886 --> 01:02:22,936 is in shuttle.js which is not a file you should need 1385 01:02:22,936 --> 01:02:24,956 to touch though you're welcome to especially for some 1386 01:02:24,956 --> 01:02:27,516 of the fun features but realize there's no mention 1387 01:02:27,516 --> 01:02:29,456 of the keyword struck, there is no mention 1388 01:02:29,456 --> 01:02:31,916 of the keyword class in JavaScript. 1389 01:02:31,916 --> 01:02:33,976 And if you take CS51 you'll use this jargon, 1390 01:02:34,156 --> 01:02:37,766 functions are first class objects which is a fancy way 1391 01:02:37,766 --> 01:02:41,286 of saying you can implement data structures using functions 1392 01:02:41,286 --> 01:02:42,186 and in fact, those of you 1393 01:02:42,186 --> 01:02:44,876 with prior backgrounds will recognize the keyword this, 1394 01:02:45,166 --> 01:02:47,756 which is very much used in Java and the like. 1395 01:02:48,046 --> 01:02:51,026 So the end result is we've got this index dot HTML page. 1396 01:02:51,216 --> 01:02:53,716 It references all these JS and CS files. 1397 01:02:53,756 --> 01:02:55,396 They all get downloaded by the browser. 1398 01:02:55,636 --> 01:02:57,206 My load function gets called, 1399 01:02:57,206 --> 01:03:00,306 the load function initializes both of the plugins and so 1400 01:03:00,306 --> 01:03:02,796 in the end I have a little interface like this. 1401 01:03:02,796 --> 01:03:07,376 If I zoom out here we have-- where are we? 1402 01:03:07,566 --> 01:03:08,596 Fitchburg-- oh wow! 1403 01:03:08,596 --> 01:03:11,726 We're barely on the border of Massachusetts here 1404 01:03:11,726 --> 01:03:14,816 so it's gonna take a long time to hit the West Coast here. 1405 01:03:15,066 --> 01:03:16,516 So I'm gonna go ahead and just go back 1406 01:03:16,636 --> 01:03:18,226 to the yard for just a moment. 1407 01:03:18,316 --> 01:03:21,746 Let me see if I can just find one staff member. 1408 01:03:22,636 --> 01:03:28,286 I'm just gonna-- gonna take some shortcuts if you don't mind. 1409 01:03:28,366 --> 01:03:29,966 Dupo is-- where is Dupo? 1410 01:03:29,966 --> 01:03:31,006 There he is, alright. 1411 01:03:31,736 --> 01:03:35,666 So let me-- Dupo is in Qdoba or wherever we are here, pick up. 1412 01:03:35,906 --> 01:03:39,036 Dupo goes to Elliot House and we reverse. 1413 01:03:39,086 --> 01:03:40,546 Let's try to take the road this time. 1414 01:03:41,366 --> 01:03:47,136 Okay, go down the road here to Elliot House, right. 1415 01:03:48,676 --> 01:03:51,156 Elliot, almost there, this is Elliot. 1416 01:03:51,406 --> 01:03:54,756 If I give it some time it will download in better fidelity. 1417 01:03:54,756 --> 01:03:56,126 Here we have Dupo for Elliot House. 1418 01:03:56,156 --> 01:03:58,366 I'm gonna go ahead and click Drop Off. 1419 01:03:58,366 --> 01:03:59,406 Uh-oh! He doesn't want to get off there, 1420 01:03:59,406 --> 01:04:01,696 kind of-- a little finicky. 1421 01:04:01,696 --> 01:04:03,356 Oh, he wants to be dropped off in the courtyard. 1422 01:04:03,936 --> 01:04:05,896 There we go and now Dupo has been dropped off 1423 01:04:05,956 --> 01:04:06,596 at Elliot House. 1424 01:04:06,646 --> 01:04:07,936 So you've been given this framework, 1425 01:04:08,256 --> 01:04:09,446 you've been given some 1426 01:04:09,446 --> 01:04:10,946 of the conceptual underpinnings for this. 1427 01:04:10,946 --> 01:04:14,466 It is now up to you to implement CS50 shuttle we will see you 1428 01:04:14,466 --> 01:04:18,216 on Wednesday.