[ Silence ] >> Alright. This is CS50. Welcome to week 10! We've got some great fun in stored for you today. It is now in fact our final project season, your pre-proposals were presumably sent over to your TF a couple of hours ago. If not, do make sure you are conversing with your TFs about them. But know that if you're looking for something new to try, something new to learn or you've always wondered how iPhone apps or Android apps or Facebook apps or Facebook plugins and all of that works realizes that there's a good deal of seminars that have happened this past Saturday. The videos are starting to go up. And they'll also be happening this coming weekend so check out CS50.net/seminars if you'd like to bootstrap yourself with something new entirely. And that will be one of the themes of today teaching yourself some new language or topic altogether. Also, to help seed you with some ideas if you're not quite sure what you wanna do and you really--you didn't know what even to pre-propose. We've been gathering ideas over the past year that now live at projects.cs50.net. So you may recall if you are at Harvard Thinks Big I sort of challenged that audience one night to submit their ideas. And we had to go through and filter some of them out because they simply weren't solvable by CS50, cake in a blender, you may recall it was one of them. But what you now see at projects.cs50.net is already 50 or more ideas that are right for the taking. In fact we've had some faculties, some other students, students groups on campus contribute some of these ideas. So particularly if you would enjoy making something that real people then go on to use friends, student groups, departments or the like do sift through the various posts that are here. And in fact, if you yourself have some ideas do feel free to click the very large link here post a project and you'll be able to sift through some of the ideas that are absolutely within the grasp now of CS50 students to solve. So that's projects.cs50.net. So also coming up this Friday is the deadline for you and your section mates to find all of these computer scientists on campus. So you recall from P set 5 you have recovered all of these JPEGs and you now need to discover these people on campus. No one has submitted all of the photographs just yet so realize the--there's still plenty of time. And we will do something a little special for the section that ends up submitting the most photographs of themselves with these various computer scientists. You need not find the shark, just Lee here. You need not to find the camel depicted here. This fellow will be a little harder than most to actually find. But bonus points if you can actually score that photo. This actually is how Jeremy studies. So you might find him in his dorm room like this. Some of our TFs of course have part time gigs else where so you might find Ben, I think at Avalon or the like. Phil here also likes to spend his time outdoors. This one I actually never understood [laughter] what was going on here. And of course, we had a couple of masked staff depicted here and here and a less effective mask here. And you may recognize this face now from the article you read from the recent P set namely Brian Kernighan my mentor who's actually spending time with us this year. And then a couple of the staff of course are wearing their own CS50 wardrobe which is now at store.cs50.net. This isn't so much of our version of a bake sale as it really is just an opportunity to wear CS50. And tell your friends that, damn it, you took and conquered CS50 half their term and so we have Yuki depicted here in 2008's model. Jan Sue [phonetic] pictured here. And then also we have one of the teaching fellow's daughters depicted here with her lovable CS50 bear. In fact, I asked if the TF could bring the bear but unfortunately, his daughter would not let him. I could not--he writes me this morning in an e-mail. Well, I could not separate my daughter from her bear and I cannot bring to Sanders because she has to go to school so here's a picture of the bear. A few information points Julia, my daughter was born in Paris. She's attending Harvard University, the Child Care Center. She had an Italian boyfriend from Rome who's named is Alessandro and he is also attending Harvard University so that there is the CS50 bear. But it's one thing to show you these things in picture form. It's another thing to actually have humans parade here on stage so I give you a little show from this year's TFs and CAs. [ Background Music ] >> So we all, by this point we all live and breathe CS50. Now, it's time to start wearing CS50. Ladies and gentlemen the 2010 CS50 collection! [ Laughter ] [ Applause ] [ Background Music ] >> Is this thing on? Jan Sue, so hot right now. Jan Sue. So, hi guys, I'm Alex and I'm a TF. And I'm the president of the association of really, really, ridiculously good looking male and not male CS50 TFs and CAs. [Laughter] And if you want to be as cool as us you should dress like us. Guys let show them what we're wearing. [ Laughter ] [ Applause ] >> So, we're pretty ridiculously good looking and so we want you guys to be too. So you guys should buy these shirts and pants and boxers, Scott can show you those though [laughter] not on stage. And yeah that's it. You should buy our stuff. [ Cheering ] [ Appluase ] [ Music ] >> Alright, a very nice segway from the faces pictured here is new faces for 2011. So realize as the semester starts to wind down we start to wind up the recruiting process for fall 2011. As you may have gathered from this year there're two primary roles that we fill each year in CS50. One is that of teaching fellow. These are TFs in a typical sense leading sections. We're working with students regarding problem sets, holding office hours, fielding question and the like. And then we also have the role of course assistant which is a volunteer role of just 2 hours per week where by the course assistance--this is an opportunity to keep one foot in the course and remain involved in the course in all CS50 goings on and work with students, fall 2011 students, one on one, you know, during office hour. So realize if you'd like to maintain that personal connection to the course and realize too that if you'd like to learn this material all the better. Frankly, there's no better way than actually teaching it one on one with other students. So realize that on the course's home page before long there will be a link with which you can apply to be a TF or CA and then we will begin this winter the interview process. So we would love for as many of you as possible to join next year's team. So, we left off last time with the look at JavaScript and various ways in which the wib--web is getting much sexier these days. And that's largely thanks to this technology called AJAX, Asynchronous JavaScript and XML. But that acronym really doesn't apply so much anymore you can use various other technologies, one of them called JSON, JavaScript Object Notation instead of XML. And we'll actually look at this JSON notation today. But the picture we painted last week essentially boiled down to this--this graphic here. If you have a website like Facebook whose interface clearly updates itself on a schedule, every few seconds a you post appears in your news feed or every few seconds something interesting happens on the courses home--on the Facebook's home page. Well, that's because the whole page is obviously not reloading. You're not seeing a white screen for a moment and then the whole page refreshes instead just small subsets of this page are reloading. And that's thanks to a technology called AJAX whereby using JavaScript you can write code that users--Facebook users then download that gets executed in their browser then on some schedule, every few seconds or minutes re-requests data from the server or gets that data back whether imaginary or text and then it can be embedded into the web page's DOM or Document Object Model. And the special--the special feature of modern browsers that enable this is that thing called XMLHTTPRequest. And so this picture here just paints the story that happens. The browser there in step 1 in the user interface makes a JavaScript call, using in step 2 this XMLHTTPRequest feature. That feature enables a browser to make step 3, an HTTP request to some server, www.facebook.com or CS50.net or whatever the site may be. In step 4, the web server actually responds and what's neat is that the web server can respond with just text, with something called XML which frankly is like HTML but you make up your own tags and so you can send back a database like information. And then this thing called JSON notation, JavaScript Object Notation which will again see today. Recall to contextualize this last week. We had that--those very simple examples using Yahoo Finance whereby we query the server without reloading the whole page and then embedded the textual response, the current stock price of whatever stock ticker we entered into the pages DOM. And that was a very small instance of AJAX but it's with that basic building block that all of the magic happens on Gmail and Facebook and the like these days. Because in step 5 once that response comes back whether an XML or some other format your same JavaScript code has an event handler, a function whose purpose in life is to receive that response and then do something with it namely updating the webpage. So, all of this works because the internet of course, underlies the World Wide Web. >> The web is a service on the internet. The internet is the physical infrastructure underlying that service. And just to recap some basic jargon before we take a more visual tour of these topics, recall this few fundamentals, so recall that we discussed two weeks ago IP, Internet Protocol. And you almost always hear this thing in the context of an IP address which is a numeric address that uniquely identifies your computer. We talked briefly about TCP this is a protocol that allows data to get from point A to B reliably. It's this software, this protocol TCP that ensures that if something bad happens between points A and B, a router goes down, packets get lost, data gets corrupted just stuff happens well TCP insures that it will resend that same data again and again until your e-mail or your Instant Message or your web page request actually makes it through to point B. So that's TCP. This is in contrast to another protocol called UDP. And UDP is really just a best effort and we'll see it mentioned in just a moment but UDP is good for streaming protocols. If you're watching like some baseball game live via web browser being streamed from somewhere well, you probably don't want the thing to buffer and buffer if there's congestion on the internet because then you the viewer are gonna fall behind. And the baseball game is no longer gonna be real time so sometimes there are contexts like that where you don't really care if the data is recent resent, you'd rather the program just forge ahead. And I missed that play but that's fine, I wanna stay in real time. So that's something called UDP. And then lastly, we talked about routers. Routers are big--are computers whose purpose in life is to route data, data in this way, data out that way. And then we talked about context of your homes. You might have a switch. A switch is a fairly dumb device that just has lots of ethernet ports that allows you to connect multiple computers together. What you are about to see also I mentioned something called a router switch, which really isn't standard terminology, when they say router switch they mean switch, just the device that connects all of these computers together. So we saw the teaser trailer for this a couple of weeks ago. The actual film is about 10 minutes long but I think it does a far better job of painting a picture of how the internet works if with some silly--silly names in it. So I give you now for the next few minutes what's called Warriors of the Net. This is indeed how the internet works. [ Music ] [ Noise ] >> For the first time in history people and machinery are working together realizing a dream, a uniting force that knows no geographical boundaries without regard to race, greed, or color, a new era where communication truly brings people together. This is the dawn of the net. [ Music ] >> Wanna know how it works? Click here to begin your journey into the Net. [ Background Music ] >> Now, exactly what happened when you click on that link? You started a flow of information. This information travels down into your own personal mail room where Mr. IP packages it, labels it and sends it on its way. Each packet is limited in its size. The mail room must decide how to divide the information and how to package it. Now the package needs a label containing important information such as sender's address, receiver's address and the type of packet it is. [ Music ] [ Noise ] [ Background Music ] >> Because this particular packet is going out on to the internet. It also gets an address for the proxy server which has a special function as we'll see later. The packet is now launched on to your Local Area Network or LAN. This network is used to connect all the local computers, routers, printers et cetera for information exchange within the physical walls of the buildings. The LANs are pretty uncontrolled placed and unfortunately accidents can happen. [ Music ] [ Noise ] [ Background Music ] >> The highway of the LAN is packed with all types of information. These are IP packets, Novel packets, Appletalk packets they're going against traffic as usual. The local router reads the address and if necessary lifts the packet onto another network. Ah, the router a symbol of control in a seemingly disorganized world. >> Oops, sorry about that-- [ Inaudible Remark ] >> There he is systematic, uncaring, methodical, conservative and sometimes not quite up to speed but at least he is exact for the most part. [ Inaudible Remark ] >> As the packets leave the router they make their way into the corporate internet and head for the router switch. [Noise] A bit more efficient than the router, the router switch plays fast and loose with IP packets deadly routing them along the way, a digital pinball wizard if you will. >> Here we go, here we go. Here's comes another one. And there's another one. Ooh I think one--here it goes whoop! Around the back--hey, in there, in there, in there over the left, over the right, over the left, over the right, you got it. Here it goes. Right down and he shoot, he scores! It's good. Hey [inaudible] you watch out. Here comes another one. Oh, here we go, we're having fun. [ Background Music ] >> As packets arrive at their destination they're picked up by the network interface, ready to be sent to the next level. In this case the proxy. The proxy is used by many companies as sort of the middle man in order to lessen the load on their internet connection and for security reasons as well. As you can see, the packets are all of various sizes depending upon their content. [ Music ] [ Background Music ] >> The proxy opens the packet and looks for the web address or URL. Depending upon whether the address is acceptable, the packet is sent on to the internet. [ Music ] >> There are, however, some addresses which do not meet with the approval of the proxy, that is to say, corporate or management guidelines. These are summerly dealt with. We'll have none of that. For those who make it, it's on the road again. [ Music ] [ Background Music ] >> Next stop, the Firewall. The corporate Firewall serves two purposes. It prevents some rather nasty things from the internet from coming into the intranet and it can also prevent sensitive corporate information from being sent out onto the internet. Once through the Firewall, a router picks up the packet and places it onto a much narrower road or bandwidth as we say. Obviously, the road is not broad enough to take them all. Now you might wonder what happens to all those packets which don't make it along the way. Well, when Mr. IP doesn't receive an acknowledgment that a packet has been received in due time he simply sends a replacement packet. We are now ready to enter the world of the internet, a spider web of interconnected networks which span our entire globe. Here, router and switches establish links between networks. Now, the net is an entirely different environment that you'll find within the protected walls of your LAN. Out here it's a wild west, plenty of space, plenty of opportunities, plenty of things to explore and places to go. >> Thanks to very little control and regulation, new ideas find fertile soil to push the envelope of their possibilities. But because of this freedom certain dangers also lurk. You'll never know when you'll meet the dreaded pain of death. Special version of a normal request pain which some idiot thought up to mess up unsuspecting hoses. The path our packets take may be via satellite, telephone lines, wireless or even transoceanic cable. They don't always take the fastest or shortest routes possible but they will get there, eventually. Maybe that's why it's sometimes called the World Wide Wait. But when everything is working smoothly, you can circumvent the globe 5 times over at the drop of a hat, literally. And offer the cost of a local call or less. Near the end of our destination, we'll find another Firewall. Depending upon your perspective as a data packet, the Firewall could be a [inaudible] security or a dreaded adversary. It all depends on which side you're on and what your intentions are. The Firewall is designed to let in only those packets that meet its criteria. This Firewall is operating on ports 80 and 25. All attempts to enter through other ports are closed for business. [ Music ] >> Port 25 is used for mail packets while port 80 is the entrance for packets from the internet to the web server. Inside the Firewall, packets are screened more thoroughly. Some packets make it easily through customs while others look just a bit dubious. Now, the Firewall officer is not easily fooled such as when this Ping of death packet tries to disguise itself as a normal Ping packet. >> It's okay, move on its okay. No problem. Have a nice day. Be out of here, bye. >> For those packets lucky enough to make it this far, the journey is almost over. It's just a line up on the interface to be taken up into the web server. Nowadays a web server can run on many things from a main frame to a webcam, to the computer on your desk. Why not your refrigerator? With the proper set up you can find out if you have the makings for chicken cacciatore or if you have to go shopping. Remember, this is the dawn of the net, almost anything is possible. One by one the packets are received, opened and unpacked. [Noise] The information they contain, that is your request for information, is sent on to the web server application. [Noise] The packet itself is recycled, ready to be used again and filled with your requested information. [ Music ] [ Noise ] [ Background Music ] >> Address and send out on its way back to you. Back pass the Firewall, routers and on through to the internet. Back through your corporate Firewall and onto your interface. Ready to supply your web browser with the information you requested that is this film. [ Music ] [ Background Music ] >> Pleased with their efforts and trusting in a better world. Our trustee data packets ride off blissfully into the sunset of another day knowing fully they have served their masters well. Now isn't that a happy ending? [ Music ] >> Okay, so that clearly took some creative liberties there. But that actually paints a pretty good picture of what's been happening all this time. If you think back a couple of weeks to when I ran that little textual command called traceroute where we traced the route between me and Stanford.edu and me and CNN.co.jp. I mean what's amazing I think about visualizing this stuff now is all of that is happening literally in a matter of 20 milliseconds, 60 milliseconds, 200 milliseconds and literally are these data getting to and from Japan and back, terribly, terribly fast. It's actually pretty apropos too that this film focuses on the web. So, even though there are indeed all these various services like e-mail and instant messaging in the web it really is the web that's kind of taking charge of what we all perceive to be the internet. Odds are if you're on the internet right now, you're probably using a web browser. And you might be using an application within that web browser whether it's Gmail or Facebook or the like. But that's what's kind of exciting now is that web pages are much less like Netscape 4.0 which you saw depicted there. And much more like interactive applications. And this is exciting because it means that now using some of the tools even we're talking about in this class like PHP and Sequel and JavaScript, you can really start to make applications that people use and start to rely on. Case in point, for years all of us have been using things like Microsoft Word and Excel and you have to buy these things. And you have to, or--and you have to put the CD in your computer or download some ISO. And you need to double click an icon. You need to install the software then you need to configure the software. And if you happen to have two computers or your happen to be elsewhere you have to go through this whole process again. And if something goes wrong with your computer you now have to reinstall everything, back--restore things from backups and the like. This is not a healthy system. And in fact, I would argue that the state of our world today as excited as we are by our iPhone and PCs and Macs these days, it's all pretty primitive, right? Like computers we use today are way more complicated than they need to be. And the fact that I have to help out certain members of my family on the phone or by connecting remotely to their computers is ridiculous I think. Like these machines are very much in a very primitive state. And I think what's really exciting and where final projects are kind of exciting too is that the trend really does seem to be toward the idea of Google apps or Microsoft Office in the cloud so to speak and these web-based applications. And the fact that--the fact that so many of you spend so much time in Gmail and Facebook or the like really suggest that this is the direction, at least for several years, the internet is going. So you will now have after this week and last with an eye toward final projects, the skills with which to participate in exactly that. And so, with regard to Problem Set 8, originally I had predicted that we were gonna use Google's visualization APIs which makes it super easy to actually have charts and graphs and the like embedded in your own web page. But truth be told, I was having some trouble last week just getting excited about bar charts and pie charts and the like. It's terrible useful and it's a wonderful way of presenting data but it's not terribly fun. And I thought it would be a much more fun way to end this semester if we crafted some P set that actually involves all of the TFs and CAs. That actually involves Harvard's campus. And actually is much more reminiscent of a game that you would be--would enjoy sharing with your family and your friends back home since it is in fact on the internet, not unlike what you did with scraps. So, hopefully, many of you in week 0 and 1 had that sense of gratification that damn, I made this project and you shared it with at least one person, one roommate and hopefully you'll have the chance now to do that with what we've called CS50 Shuttle. So problem set A is CS50 Shuttle is CS50 Shuttle, it still uses some third party APIs but namely Google Earth API and Google Maps API to implement the very first CS50 video game, part of which we have implemented, the rest of which you shall implement. So here is a web browser, this is Firefox. Here on the left hand side I see a picture of university hall and Mem church and Weld over there on the right. Down here on the bottom right I see a little blue bus which represents me in a two dimensional version of Harvard's map. And then up here I apparently have 35 empty seats and a couple of buttons for starting my engine, picking people up, dropping people off because it turns out that if I actually start my engine, read my little instructions here for the keyboard controls and then start driving, I can now navigate my way around Harvard's campus. So I'm--and go across the grass. So here we have William James Hall up here. Let me take a right over by this church here. Follow the route that the shuttle takes. Let me take spin up to say Lamont, alright. I think that's Lamont, yup, over there is Lamont. Let's take a right onto Mass, okay. [Laughter] And oh, wait what's this? Notice on the map here, looks like Jesse Cohen is sitting inside this building here. If I hover over his little icon of a person over here, Jesse Cohen is at Manter Hall which is apparently a building right there on Mass Ave. So, you know what? I'm gonna go ahead and pick Jesse up and now notice that top right, Jesse is destined for Kirkland House. >> So my goal now is gonna be to drop off Jessie. But we got plenty of empty seats here. So let me back up here and let me see if we can find the quad, I've heard a lot about it. Alright, so-- [ Laughter ] >> Been there about half an hour, I think. Here we go, up Garden Streets, alright. A registrar, coming up oh, that looks familiar, let's take a right here and take a shortcut here and aha! [Laughter] And there we have Pforzheimer House. So you will now have in Problem Set 8 the framework with which to make your own video game. And this uses again a couple of third part APIs. What I did was I pulled up the webpage for Google Earth which normally is a program you actually download, client side software, but that's not all that much fun and none of your friends and family are gonna go through a 5-minute process of installing some special software, learning how to use it and the like, they'd much rather just go to a URL, be prompted for what to do and voila! They too are taking a spin on Harvard's campus. So Google Earth also provides what's called an API, a plugin for the web whereby using JavaScript code you can tell the camera of sorts here on the left hand side where to navigate to. And thanks to Google's investment in satellite imagery and street view and the like, we have a ridiculous number of 3-dimensional buildings and photography these days, with which to actually explore places in the world. And Harvard's own campus is now in fact one of them. So underneath the hood of this, I have some JavaScript code that we wrote that tells the camera what to do when I hit the W key to go up or the A key to go left. On the right hand side too, there's another API I'm using, the Google Maps' API and it simultaneously is listening for updates to my keyboard so that I can then move this icon here on the right hand side. If you actually zoom out here on the map, you'll see that here are the 3 houses. So we have markers for Currier and Fojo and Cabot. Up here apparently is another TF or CA. Sophie Chang is at the Botanic Gardens at the moment. If we zoom out, we'll see a couple of more staff. Doug Lloyd is at the observatory. Conlin is at the observatory also. We have more staff over here, Anna, let's keep zooming out. Kind of have a big staff. So to get a lot of people that you have to pick up in this game, and so actually, even though this doesn't come built-in to the program, we've implemented a few special features. So if I happen to input that thing called Konami Code, up, up, down, down, left, right, left, right, B, A, I can then--fly. [ Laughter ] >> So now let's see if we can find some of these TFs and CAs. [ Laughter ] >> You'll see that they're looming out from the geography here. Let's see if we can swoop in and pick up Caitlyn [phonetic]. Alright, there she is. She needs a ride. Whoops, sorry, Caitlyn. She needs a ride to Law House. So I'm gonna go ahead and pick her up. Let's take to the air again. And you'll see that you can explore all sorts of parts of the world. And so in fact, let me see if I can start facing west here just to mess with this. It turns out Harvard's campus is pretty big. So you might have to go for quite a spin. I'm gonna go ahead and kick this into, let's see, autopilot and let's see by the end of class how far west we actually get. Let's go ahead and take a 5-minute break and then discuss how you yourselves will be implementing this game. [ Noise ] >> Alright. So we are back. We're only in Waltham, Massachusetts right now. So it might take some time. But that's not a problem because you'll find that there are a number of optional features that you yourself get to implement in this video game. So we provide you with the general framework that will start you to explore now toward two ends. One, making sure you understand the context in which we'll be playing this week. But two, also so that you learn by example, the various capabilities of JavaScript and the syntactic differences with PHPNC which you will find it quite familiar, as you may have noticed last week syntactically to these two languages. Essentially, we provide you with this framework but those buttons don't work out of the box. You can't pick anyone up, you can't drop anyone off but you can actually explore the campus. So the engine of the shuttle works but not the door so to speak. And so the first thing you'll need to do is implement the ability to pick up passengers. Now, these passengers we'll see in a moment are implemented essentially as a bunch of constants, an array of teaching fellows and course assistants. Each of which have a number of properties associated with them. So we've implemented the staff as what we call "objects" in programming. So this too may be your first taste of what's called object-oriented programming which if you go on to CS51 or 171 or if you come into the course with a background in AP Computer Science or the like, you probably know about this idea already. And so we'll explore it, in this context with JavaScript and then you'll have to implement the ability to drop off. But you'll have to drop people off only when you are within 30 meters as we say in the spec of a particular house. And we've given you essentially the GPS coordinates for each of the houses or approximations thereof since some of them have many buildings so we just picked a middle point and you'll have to drop someone off at their homes. But among the optional features that you get to choose from, you have make one those 2 features and then your choice of features. One is that clearly there is an opportunity here for some kind of point system where you can actually gather points based on how many people you picked up or dropped off. Two, there's clearly an opportunity to give the person a ticking timer so that you only have some number of seconds or minutes to pick people up, not--unlike a normal video game. There is of course the Konami Code feature that I alluded to you where you will implement the ability to fly and explore campus above ground. Another one of the options we prescribed is to implement teleportation. If you're a little tired of driving to the quad, why not click a link and teleport yourself there. Or put the shuttle on autopilot, which is another feature as well. And then two, another feature if you'd really like to make your friends jealous is you can transplant the game to some other university's campus and actually let your friends explore their own school or perhaps your parents, your hometown. So in the PDF will you see a whole bunch of options with which you can do that. So let's actually take a look first at how you might even begin implementing something like this. Or more generally, if you wanna tackle a final project or after this course, just a programming project of your own that's not been handed to you as a 10 or 20-page PDF that pretty much tells you what to do, you yourself have to figure it out. Let's see what that thought process is actually like. So I kind of have this instinctive idea a week or so ago that it would be great fun to do something with Google Earth. But I wasn't sure what you could do with the API, and so I first started by Googling Google Earth API, and I was led to a page that looks like this. And what's pretty nice about Google's own APIs is they're pretty well documented. They have a number of examples and reference material located there. And you'll see at the left here, this is sort of the Hello, World of Google Earth integration whereby by default you just get the Earth. And then you can navigate this Earth by using the standard controls. But of course it's a lot more fun in video game like if we actually enable with your keyboard so that you don't have to point and click and use what's a fairly suboptimal interface. But in fact, if we zoom in here, here, here, here and here, we'll eventually see whatever town I'm actually hovering over and whoever's home this actually is. So in fact, if you play around with CS50 Shuttle enough you can certainly drive yourself, it might take a while to wherever you happen to live. Well, actually it doesn't have to be continental US. There's nothing stopping you from driving across the ocean in this particular game. So I went up here. I went to the documentation and I saw, alright, introduction, audience. So I myself did--took it upon myself to read through most of this and realize you do absolutely for this problem set don't need to understand or master all of these various features. But you're definitely gonna wanna turn to the documentation when you start scratching your head and wonder, oh, how could I do this? So it doesn't matter if you understand how you do everything. But if you decide, you know what? I'd like to plant a different icon, what Google calls a "placemark" somewhere in the map. Another one of the features actually is to implement the idea of fuel. So that as you drive, you're actually running low on fuel so you could implement a gas station somewhere on campus that you drive through and you can refuel. Well, I want to put an icon or a picture of an actual gas station somewhere. Well, I might go up here to Google's documentation. I heard in class and in the spec that those icons are what Google calls placemarks. And so what you'll see here is some pretty user friendly documentation on how to add placemarks to the graph. And we'll see some of the sample code in just a moment. Now, meanwhile, I wanted to implement on the bottom of the screen a little 2-dimensional map because in playing with the framework for this piece that I realized--frankly, it's kind of easy to get lost in the 3-dimensional world especially if you park inside of the science center and don't realize where you are. So I wanted to have a 2-dimensional rendition of my world so that at least I could put myself back into context. So I checked that. So, I wanted to use also the Google Map's API. Now, Google is beginning the process of actually combining all of these various APIs. But in the end, you'll have to use different reference material to navigate both. So I started I think with the tutorial here and here too. You have the Hello, World of Google Maps. And as you consider final projects, realize that it's super easy to just embed Google Maps in your own webpage. This is not the real Google Maps, this is just an example and I could absolutely embed that in my own page. Think back a few weeks to when we had the CS50 map with all of you represented as icons all throughout the world on the course's home page, where we simply used the Google Maps' API to do that. So I read up on how to do this. I wanted to do things like markers. It turns out the Google Maps API calls markers "overlays", and there's different types of overlays but markers are in fact one of them. And so I just started reading through the code and you'll notice some already familiar syntax. The key word var where you see some curly braces which we'll see again in just a moment, a slightly new keyword, new, which is used generally in object-oriented programming. So we'll glance at that today. >> But in the end, it's all fairly readable. And what's amazing, frankly, whether you use Google's APIs or Bing's or any number of freely available tools these days for your projects or future programming work, it's amazing just how relatively few lines of code you need to write to actually do something interesting. So let's see what it is we've actually given you here. So I've SSH'd to the cloud and I've gone ahead into my public HTML directory and the spec will remind you how to do this. I wanna go ahead and do CP dash R CS50 pub source PSET PSET 8, and I'm gonna copy that here. And just to recap a couple of basics, if I now list this directory by default, it's only readable, writable, executable by me. That's what's suggested by the RWX there on the left hand side. So I need to use the chmod command and I need to say, give everybody the ability to execute it. Or another way of doing this is 711. And now if I relist the directory, now it's all executable. So this is very similar to PSET 7 stuff but again, don't get tripped up initially on some of these low level details. So the spec will tell you what to do. Now, I go into this directory and you'll see that none of these files by default are readable, world readable, which means if I try to visit my own files with a web browser, it's not gonna work. So in the past when we've done this, we've done chmod 644 as the spec will tell you. And I wanna do this to all JavaScript files, all HTML files and all CSS files, and now voila, I have a lot of R's for readability which means I have distro code for me should now work. So I'm gonna go to my own URL, cloud dot CS50 dot net, mail in PSET 8, enter, and there I have it. The distribution code, I'm planted by default at university hall. I can confirm as much by taking a peek at the John Harvard statue who is right there. And if you wanna see that there is in fact more to the campus. Weld actually looks beautiful as the [inaudible] here. They got some really nice imagery here. And it's very easy to get distracted and start driving around just for fun. So anyhow, so how do we actually then begin using this? Well, if you take a look at index dot HTML, that's the file that builds up the aesthetic framework of the site. So you have among your printouts today, some of this code partly so that you can actually see exactly how this framework is working. Not so much because in your future life, you're gonna implement another videogame like this, but because the code in here is very much representative of doing anything interactive in today's websites, anything involving Ajax or JavaScript. Now, even though we ourselves won't have to, but you may, write Ajax-like code for this problem set. Google Earth and Google Maps own APIs which are just big JavaScript files, the Google road that you incorporate into your page. Those files are making use of this technology called Ajax. So when you drive around campus, at first, some of the buildings might be a little blurry, but that's to be expected because Google can't possibly have known where you were gonna start driving to. And so just like the real Google Maps, things start to download progressively. And if you're on a fast internet connection, it should be a pretty fast download. So in fact, at the very top of my HTML file here, notice I have one, some mention of service dot CSS. This is just the separate file were I decided to put all of my styles information. This is a good principle on programming or in software design to separate the data part of your website from the stylization or to separate the structure from the stylization. So you'll see there's no mention of font sizes or colors or anything like that this time. In my index dot HTML, I factored that all out into the CSS file. This though is one line of code that had a copy paste from Google site. So this long cryptic URL is one that when visited, downloads a big JavaScript file from Google's own site. If I visit this, this is the JavaScript code that implements the Google Earth and Google Maps' API. In fact, there is even more than just this. This actually doesn't look like a huge amount of code for the amazingness that the tool actually does. But that's because their code is designed to download more JavaScript as well using again an Ajax-like technique. So I realize there is a lot more magic happening there. But then if I look back here, now I have a bunch of script tags. So for JavaScript this week, we're actually putting all of our code in separate JS files so that we're not mixing it up with our HTML. So the code you're gonna write for these problem set will largely be confined to this file service or shuttle service dot JS. But we'll explore for just a moment some of these other files, Math3D dot JS is a library with some 3-dimensional mathematics related functions, some trig functions so that we can calculate some angles. But you don't have to worry too much about how that one works. But think of this as similar in spirit to sharp include in the world of C, or the require function in PHP. This is the way in the web context to actually download some helper files. In Buildings dot JS we'll see, thanks to the planning folks on campus, that we have access to essentially a huge array of all 500 plus buildings that Harvard owns. This is a file that has some comments at the top. It ends in dot JS. Because of the script tag, this file gets automatically loaded anytime you visit index dot HTML in a browser. And here is the syntax to understand and it's actually pretty straightforward as we'll see here. Var just says, here comes the variable. Buildings, I capitalized it 'cause I wanted to convey the idea that this is--these are some constant pieces of information. You really shouldn't change where things are. Then notice the square brackets. So the square bracket says here comes an array. If I fast forward to the very bottom of this file, we'll see that the corresponding part is a close square bracket at the very bottom followed by a semicolon, that's down here. So that means this is a huge numerically indexed array of something. What are those somethings? Well, notice that they're not just numbers or strings. Every such something opens with a curly brace and some stuff, then a close curly brace and a comma. So this curly brace notation in JavaScript is adjacent notation, JavaScript object notation. The curly brace says here comes an object. And an object is very similar in spirit to what we called a struct in C. It's similar in spirit to what we call the class like the stack class in PHP. And what it is, is the collection of key value pairs. So for PSET 6 you implemented a hash table. That too is key value pairs. So this object is really just a hash table. So if you want a quick and dirty hash table in JavaScript, you can say, here is a hash table, here is an object more specifically that goes from here to here. And then it has a bunch of keys, root, name, address, lat and longitude and then ach of those keys is associated with the value by way of this colon syntax. Now, as the spec says, it turns out Harvard has a--every building in Harvard has a root value which is a unique ID. Unfortunately, people didn't really plan ahead and a lot of these root values start with leading zeros which actually creates great headaches in programming. Because if you convert it accidentally to an int, what's gonna happen? You're gonna lose the leading zero which tends to be bad when you want to use it in if conditions and else if's and you wanna compare it, so beware. That's why we put the number in quotes to mitigate that. Then we gave you the name of every building, the address of every building and then essentially the GPS coordinates thereof. So in this file then, we have an array of objects, each one of which represents one of Harvard's 500 plus buildings. Meanwhile, if I go into Passengers dot JS, I see a very similarly structured file. But this one has a list of all of the staff on CS50. So Var Passengers is another array and each staff member has a username, name, and a house associated with him or her. And then lastly, we also came up with some coordinates for the houses but this one is a little different. So it turns out that sometimes you wanna be able to index into an array as though it's an associate of array. We introduced that jargon in problem set 7 and PHP. So notice that these variable houses is actually an object which is not--so not an array, and then the keys in this object are actually strings under the names of the houses. The value of my having implemented the houses data structure like this, is now essentially, I have a lookup table. If I ever need to answer a question over the form, what are the GPS coordinates of Adam's house, I can index into this hash table. I can index into this object and immediately get back the answer for Adam's house which itself notice is what kind of data structure. [ Inaudible Remark ] >> It's another struct. It's another object thanks to those curly braces. Now aesthetically, I just found it more readable to put those curly braces and those key value pairs on the same line. But it's just an object containing keys whose values are more objects. And this is what's frankly really nice about some of these higher level languages. If you just need a data structure with which to encapsulate some related information, bam, just curly brace, curly brace. Put whatever you want in there and now you can pass around an object, a whole chunk of data like latitude and longitude. And realize too the utility here. In C, if I wanted to find out the GPS coordinates of Adam's house, I probably have to call two functions 'cause a function generally can only return one value. What's nice here by just using a data structure, an object, I can get back two values but really, one value in object that happens to have two keys inside of it. So what's really nice too about these objects is that you can return and pass multiple values at once. So let's see now how the whole game is actually structured. It turns out even though my font is big, there is not a huge amount of code here, right? Most of the code is this silly list of empty seats with this LI for list item tag. So it turns out that really what I have done in my HTML is just provide a structure and I'm using this popular HTML element called div. The div element says here is a division of the page. Here is a rectangular something rather. But with CSS, these rectangles no longer have to span the whole page. You can actually say, "You know what, for the Earth, I need a rectangle that's about that big. >> But then I want a 320 pixel by 320 pixel math--div over here for the map. Looks like we're in Pennsylvania now as on the side I think, maybe? No? Something like that. And now if I go back here we'll see some other divs. So long story short, there's a bunch of divs in here that represent each area of the screen. So how do you begin even figuring out how to design something like this? Well, to be honest the very first thing I did when starting this is I didn't even use the Google Earth API. I first destroyed some HTML with some CSS and I made like the big left rectangle, I made it green and then I made a yellow rectangle--square over here then I made a white rectangle up top 'cause I just kind of wanted to mock up the interface that I wanted to then implement. And so this is a very good starting point. It's very easy with final projects to kind of get overwhelmed when you've got this long list of amazing features and it's just overwhelming where you actually begin, start simply. Honestly, I make something that looks ridiculously ugly with just colored boxes here and there by using the bgcolor attribute or the like. And I just mock up sort of wire free my site and then I start filling in some of those blanks. Well how did I start filling in those blanks? Well, notice I made ample use of this attribute called ID. ID equals instructions, ID equals controls, ID equals announcements so that now I have a unique keyword with which I can address all of these different locations in my overarching framework. In fact, if you want to see how to embed a Google Earth into your webpage in some sense it's as simple as that. Create a div with nothing inside of it but give it a unique a ID because I'm gonna call one JavaScript function that takes as its argument the name of that div or the ID of that div and Google's code is gonna handle the process of taking this otherwise empty div and exploding it to whatever sizes appropriate to fit that plugin, that picture of the earth. But here's how we've implemented the user interface. So up here on the body tag I've got a few of these event handlers. We looked at a couple last week. I think on Submit and on Click turns out you can get fancier. There is onkeydown, so when you push a key down that fires an event that you can listen for. Onkeyup fires a different event that you can listen for too. So if you think about how this game works, if I--hold the W key as the instructions say, that's like putting my foot on the gas and as long as that key is down I want to keep going forward, forward, forward but as soon as I lift up I wanna send a message to the camera that says stop moving. And so it basically boils down to these two basic building blocks, this event handler and this one. And notice I'm returning the value of keystroke passing in two arguments, it turns out keystroke is one of the functions in service.js that we'll look at in just a moment. It's a function that I wrote. Then we have onload and onunload. These are the two functions that kick start the whole process. So when this page loads a function called load gets called and a function called unload gets called when I close the page those two functions I myself wrote. So let's take a quick look. So if I open up service.js this is where really the magic starts to happen. So at the top of this file I've got some basic constants, not unlike some of our past programs and some of this was trial and error. I've realized that those are the GPS coordinates roughly near Johnston gate that will allow you at that heading, that angle to face John Harvard statue. And I just played around until I found something that worked. I then decided that the bus, based on a conversation with shuttle services supports up to 35 seated passengers so I made a constant and then the velocity also trial and error, I said 50, which actually is probably roughly 50 miles per hour and though not quite. We actually did drive through those buildings pretty fast, you might want to slow that down a bit. And then notice this. I decided to declare some global variables which again is a bad habit to get in to excessively but sometimes if you're implementing an application that's clearly dedicated to one purpose and is not gonna be integrated into someone else's work, it's reasonable to have some global variables and the variables through trial and error that I realized I needed was a variable called earth that's essentially a pointer to the earth that gets embedded in the page but the jargon for JavaScript is reference, it's not a pointer. I needed another such reference for the map and then I needed a couple of more for what I called the shuttle and the bus which are the icons. But again, some of this is discussed in the spec. But here's what cool. To use the Google APIs in your own page, all you need to do is call two functions: Google.load the earth API version 1, Google.load the maps API version 3 with some other parameters. And now, you have the ability to call any of the functions and the documentation we just started to glance at. So if I now scroll down to my function load, let's just take a look at what's really going on and try to tease apart just a few syntactic details. Here's the function load and thankfully the comments pretty much say what it does but just notice--don't be overwhelmed perhaps by the syntax here. So notice I'm declaring a variable called latlng equals new google.maps.LatLng of this comma this. So these capital words, those are the constants that--those are the GPS coordinates of Johnston gate, give or take. So this is new syntax at least to those of you without prior programming background and Java the keyword new in JavaScript as in other languages says give me a new object. It's kind of like malloc but it's a little fancier but it's the same idea. It allocates space for something that's apparently called google.maps.LatLng. So that google.maps.LatLng, it's a little longer a string for a name but in fact that's just the name of the structure really. It's a LatLng data structure more generally called an object. So now I've stored inside this variable, essentially two values a latitude and a longitude in this special type of structure. Then I have this, map, which again is a global variable up at the top of my file and I'm using that global 'cause I want to remember the map and this is key if you want to actually navigate on the 2D earth and the 3D earth you have to remember references to or pointers to those objects otherwise you're gonna create the map and then lose control over it. It's like for getting a pointer and allocating memory never freeing it, so I need to remember that reference. It turns out the object that represents the 2D map API called google.maps.map and what does this represent here? Document.getElementById "map" what role might that serve just by inference here? [ Inaudible Remark ] >> Oh sorry. [ Inaudible Remark ] >> Exactly. So this function, this is a JavaScript function that's terribly useful document.getElementById literally does that. There is an element in the HTML presumably that has an ID attribute of map and so what this function does is it actually returns to me essentially a pointer to that specific element in the HTML. Now even though HTML is text remember the picture we drew last week when a browser reads HTML into RAM it actually builds it up as what kind of data structure? What did it look like when we drew it? >> A tree. >> It was a tree, right? And we called it the DOM, Document Object Model. It was kind of like a family tree. So when you say document.getElementById what you're really getting back is essentially a pointer to one of those nodes in the tree and this is useful because now using our programming code I wanna be able to take that otherwise empty div whose ID is map and put something in it. And that something is going to be this two-dimensional map and that's done by this function call new google.maps.map, this creates a new map at this location, that div, and now notice this syntax 'cause you'll see it a huge amount now on the web and in anything JavaScript-based comma curly brace which denotes what? Object. So it looks like the second argument to this function call is an object and that object's keys are called center, disable default UI, map type ID, navigation control, scroll wheel zoom then notice the curly brace? Then notice the close parenthesis which maps to the beginning of this function call and this is actually wonderfully helpful syntax in C and even in PHP thus far. Anytime you call a function you can provide zero or more arguments and you usually call those arguments with comma separating them. This gets a little annoying though if some of your functions now start to take one, two, three, four, five, six arguments or seven really. So notice that apparently you created a two-dimensional map you need to tell Google the center of the map whether or not to disable the default user interface, whatever that is. You need to give the map a type ID then you need to say do you want the navigation control there or not, true or false? Do you want the scroll wheel on the mouse to work? Do you--what zoom level do you want? That's a ridiculous number of arguments and you can imagine writing that function call. Argument comma argument comma argument comma argument--I mean, you would forget just the order of these things. I'm a bit anal so I tend to alphabetize here but I would otherwise have to check in the documentation what is the exact order of all seven of these arguments? And that's just asking for trouble. It's annoying and it also creates problems if supposed I don't want to provide one of those arguments now you have to start providing like null or blank values in all of these arguments. So in any case, in languages like PHP and JavaScript and Perl and others thankfully you can pass in arguments by way of these objects or really these hash tables so that you can pass in all of these key value pairs but who cares what the order is? You certainly do not have to. So this is kind of the what's in vogue with JavaScript. So that's it for creating a two-dimensional map. If I want to plant a marker on that map I need to make a function call like this, create a new marker using this icon which happens to represent a blue bus that I found on the internet. Map, what map do I wanna use? Well the one I just created. And what title? So where does you are here come from? Well that's what happens when if I scroll over here and hover my icon. In fact you are here, so this all being done in code. And then lastly, look at this. Google.earth.createInstance of earth initCB and failureCB. So this too is a new feature of JavaScript versus other languages we've done. >> It turns out that initializing a Google Earth plugin requires a little more work on your part. You first need to call this function called createInstance but you also need to tell the API what function to call if it is successful in loading the Google Earth plug in or if it's unsuccessful. And so what's neat about JavaScript 2 is that you can pass in functions as though they themselves are variables. Up until now we've only called functions and defined functions. We've never passed them around even though in C you can pass functions by pointer. It turns out that if I look at initCB this is just the name of another function but notice what's crucial here. When I passed in the name of this function to my init function, let me go back to this real fast, to my load function notice that what I did not do is include parenthesis after the function name here or here. That means don't call this function just pass in the name of or really a pointer to this function so that it can be called later. Well, what happens later? Well again, this is just an instance of my reading the documentation, I've never used this API before like last Wednesday or so and so I decided that I needed to read through it. I understood roughly what most of these lines did but some initially I just copied and post it 'cause I wanted to see what the thing could do. And the interesting part now is that finally in this init CB for callback, callback is a function that someone else calls I have this line. And this is the last thing we'll turn our attention to here 'cause this is really the code that the staff wrote. So, we have now what we've decided to call a Shuttle. A Shuttle, capital S, is what most people would call a class. Now, as in the side, JavaScript does not have classes it's what called a prototype-based language but it is an object-oriented language which means when I call new Shuttle this is creating a new data structure and memory that represents a shuttle. A shuttle has a few things associated with it. One is the heading, what angle is it facing, for instance the John Harvard statue? What height is it? I decided, roughly the--what height a shuttle bus should be so that you're not looming over the buildings but you could make a, you know, 50-foot tall shuttle bus if you wanted to see over the tops of buildings. Where do you want it to start? At what planet do you want to put this particular shuttle on? And then what velocity do you want to actually start it with? And then that code, just so you know where it is, is in shuttle.js which is not a file you should need to touch though you're welcome to especially for some of the fun features but realize there's no mention of the keyword struck, there is no mention of the keyword class in JavaScript. And if you take CS51 you'll use this jargon, functions are first class objects which is a fancy way of saying you can implement data structures using functions and in fact, those of you with prior backgrounds will recognize the keyword this, which is very much used in Java and the like. So the end result is we've got this index dot HTML page. It references all these JS and CS files. They all get downloaded by the browser. My load function gets called, the load function initializes both of the plugins and so in the end I have a little interface like this. If I zoom out here we have--where are we? Fitchburg--oh wow! We're barely on the border of Massachusetts here so it's gonna take a long time to hit the West Coast here. So I'm gonna go ahead and just go back to the yard for just a moment. Let me see if I can just find one staff member. I'm just gonna--gonna take some shortcuts if you don't mind. Dupo is--where is Dupo? There he is, alright. So let me--Dupo is in Qdoba or wherever we are here, pick up. Dupo goes to Elliot House and we reverse. Let's try to take the road this time. Okay, go down the road here to Elliot House, right. Elliot, almost there, this is Elliot. If I give it some time it will download in better fidelity. Here we have Dupo for Elliot House. I'm gonna go ahead and click Drop Off. Uh-oh! He doesn't want to get off there, kind of--a little finicky. Oh, he wants to be dropped off in the courtyard. There we go and now Dupo has been dropped off at Elliot House. So you've been given this framework, you've been given some of the conceptual underpinnings for this. It is now up to you to implement CS50 shuttle we will see you on Wednesday.