>> David Malan: All right. Welcome back to CS 50. This is the end of week nine and believe it or not we have but three lectures left. So there's today, there's Monday which will be our final new material. The next Wednesday is a holiday. The Monday thereafter will be a slate of guest lectures by other CS faculty. We'll be talking a little bit about the courses you can take after 50 and what more there is outside of this particular course. After that we have the quiz. Then we have the week of Thanksgiving. Our final lecture that Monday and then that's it. No lectures after Thanksgiving. I know. So sad for us CS 50. So hopefully my voice will carry us through this lecture. I actually feel fine but my voice kind of trailed off at the end of Monday and hasn't really come back so I'll try to get us through a few announcements here. The first of which is your pre-proposals for the final project is due this Monday by email 11 AM. Realize it's meant to be a pretty casual thing where you really just touch base with your teaching fellow and let him or her know what you're thinking. So look at the PDF that's on the course's website under final project for the directions there. We've added to the course's roster of seminars one other so Apple Computer, Inc. is actually going to send one of their own trainers to campus to meet with any number of you who would like. We've listed it here. It's called Software Development for the iPhone and iPod Touch. The date and time will be posted there. You can still RSVP via the course's website and here and this is meant to be a supplement to the seminar that our own teaching fellows will already be holding a week or so prior. So realize that's now on the agenda and also if you haven't taken advantage of these yet by all means curl up with one of the videos from years past or this year or drop by in person and they're meant to seed you with ideas for your own final project. We have dinner probably the last dinner given how quickly term is ending this year will be tonight in Mather. There's still time to RSVP at that URL 6 PM. You'll meet a couple of other CS faculty who will be there to have casual chitchat. Mather's masters will be in attendance as well as some TF's, myself and some CAs. So, Halloween is behind us and I was emailed by one of the course's teaching fellows who delighted and we delighted in her choice of costume for this particular Halloween. She, our own Rose, went as a wall cat so here's is our own Rose but what's funnier when she sent me these photos and she gave us her blessing to reveal her costume, was that what did she have to eat that day? Well she indeed had a cheeseburger while dressed as such so congrats on that particular costume. Alright. So it keeps coming as sort of a surprise to us that some students are surprised that we actually have software available on the course's website which I'll visit on this one here. Among the juicy opportunities here a lot of it, most of it is actually freely available software but thanks to some friends that we have in industry, Microsoft, VMware and others. You can actually download for instance Windows 7 so those of you with PCs who would actually like to get the hell out of Vista and start putting Windows 7 on your computer it is now available there. Just follow those directions but more exciting than that is a project that our own Yuhki Yamashita's been working on. Oops, just spoiled it. So, we hypothesized or we realize that despite years of promoting tools like Shuttleboy or other apps that students in this class have invented for finding shuttles, you know it's still a relatively slow process to send a text message to SBoy or to Polk Hall, CS50 Voice or certainly to pull up that big piece of paper that Shuttle services distributes for the Quad itself has actually been distributing for some time some little pieces of paper that they've nicely printed out with all of the Shuttle schedules or with some of the Shuttle schedules. Well because we had this data in our own database and because we being geeks like playing with datasets and trying to visualize it, well our own teaching fellow Yuhki came up with this much daresay more sophisticated design we like to think. It's not blurry in person. Let's try and zoom out on this. So what we have here on the left is Shuttleboy Card the Quad edition 2009 to 2010 and it contains all the information that you might want to have in order to go from Mem Hall, from Lamont, from Boylston, from Quad either on weekdays or if you flip it over he did one of these London Underground type visualizations of the map itself so you can find out this and way more than any Shuttle schedule you've actually ever seen and it's even printed on thin plastic so that it will endure your own rugged lifestyle. So what we're going to do if you would like this kind of souvenir from the course, when you exit today, Quad people should exit that way, River people should exit that way and our own teaching fellows will hand you out a card if you would like and you're welcome to grab one for a roommate or a friend since we have plenty. So, just a little something off our CS 50 production line. In fact, coming soon, more on this in a week, it's kind of a tradition in the course to have a store of sorts. So we do have as you've seen in the videos of Jen, Sue and others our own line of apparel so this too. Wait a minute. What's going on, oh? Got to make fun of me. Looks great to me. Our own line of apparel so we will soon have such souvenirs as these for you guys as well. Just a little memento so more on that to come. Alright. What else do we have here? So the Big Boards. So Charles, very disappointing performance over the past 48 hours. 

[ Laughter ] Charles has been blown out of the water with a mere 37 billion dollars, up a significant percent. Allen though is at let's see, millions, billions, trillions, quadrillions, 3 quintillion dollars so your classmates are very cleverly with a I daresay a bit of too much free time figured out all of the various exploits that you can wage against this Big Board which again is meant to be for fun. More holes have been found in it this year than any before and if you actually click on your classmates names, you'll see what they're doing. Among the things they're doing is trading things that we probably shouldn't have let them trade because they're not actually stocks. They were simply volumes which Yahoo happens to conflate as to actual changes in price but power to you. But we did run against, run up against an interesting limit. Charles kind of bowed out when he maxed out the size of an int. I will scroll down here if the internet cooperates. You'll notice that it got curious that if you scrolled down here he started buying only as many as two billion shares at a time 2 to the 31 minus 1 and this was a problem and Charles very kindly wrote us to report this bug in our system that we didn't support volumes greater than 2 billion shares. 

[ Laughter ] So we since removed that limitation and are now using long longs essentially 64 bit shares or 64 bit values so we'll see how this ends up. We only have so wide of a website so we'll see how well this works out but congrats to for those who made it on the Big Board at all even if you were down there at the bottom, that too was to your credit and we'll probably visit those numbers at the end of the course. Alright, so we've been talking a lot about the internet and we have sort of taken for granted that there's this infrastructure that gets data from point A to point B. So what I thought I'd do really quickly is just give you a sense of what it means to go from point A to B. So I've simply SSH to a window here. The font is intentionally small. I'll zoom in in a second but I'm going to run a certain command called traceroute. That command is actually looks like my internet connection died there so let me stall ever so slightly and go to one of the Harvard Computer Society servers here where I also have an account and I'm going to go ahead and run a command called traceroute, all one word and I'm going to type in something like dub dub dub cnn.com because I know it's a website. Kind of curious as to how I get from point A Sanders to point B cnn.com and if I now zoom in on this the output you see from traceroute is row by row by row of all of the so-called hops between points A and B. Each hop represents that thing called a router, which recall from last Monday is just this fancy computer, lots of them, on the internet that essentially takes data in and then sends data out and it might go this way or this way or this way. That's what a router's job is in life, to route data in the appropriate direction but what's neat about traceroute is that you can see every server, every router that your data, your instant message, your email passes through to get from point A to B. So it's a little cryptic looking but these are just internet domain names. At the top left here we have the very first row, number one at top left, 140.247. something. Well that's a Harvard address. Harvard actually owns 65,000 plus IP addresses which are those things that uniquely identify computers on the internet. That's unfortunate. We pale in comparison to our friends down the road MIT who actually have millions of IP addresses at their disposal such that any of your MIT friends are actually welcome to have as many IP addresses as they want. Harvard is literally running out but such is the case of the internet today. But that's just one of our IPs and then in each hop thereafter is the name of a router. So the first number two is core hyphen one hyphen gw whatever so gw gateway, synonym for router. Number four, three is border. That just means it's probably a router literally on the periphery, the border of campus. Four is unknown. Sometimes routers just, they don't want to tell you anything about themselves so you get these stars but then we get row five. It says quest.net so this is just a local ISP that Harvard has some kind of connection to get data to other people in the world. Finally we can move to line seven after some stars. Still in quest and then what city do we apparently end up in in row eight? So San Jose which actually probably not California because then in row nine we end up in Newark, New Jersey so I'm going to guess there's another San Jose somewhere but we're staying on the east coast it seems here and then if you follow the lines, we eventually hit Washington DC it seems. We hit Atlanta and then it starts to become all stars which means the routers are getting quiet or CNN doesn't really want us to know any more details but it seems a reasonable hypothesis that point B, cnn.com in this case is in the Atlanta area. Now how long did it take for data to get from point A to B? Well that's what these numbers to the right of the names mean. When it says 27 milliseconds, it literally means that if you just emailed your friend at CNN.com, that email took 27 milliseconds to get there and that's damn fast. You can appreciate in the real world how many hours it takes for humans to move that distance but let's try to see even a number that's more striking. Instead of cnn.com what about cnn.co.jp. So their Japan news office. Let me go ahead and hit enter. We'll see some similar hops initially because presumably data follows some kind of deterministic path until it reaches the bigger internet and now we quickly got a bunch more results. Tell me where, let's see, we went from rows one, two and three in Harvard. Then just an IP address in five and seven. Don't know where those are necessarily and then we get to sjc so what's interesting between sjc, line seven and eight is that we seem to have gone kind of a distance. Notice in line seven, it took six millisecond to get where we were. Line eight how many milliseconds? So, thirty-five milliseconds. So that's a [inaudible] so sjc is probably San Jose, California in this case. People tend to use airport codes for their router's names just by convention but what's really cool is what apparently is in between hops nine and ten? Just infer from the numbers. Kind of jumps right. Thirty-five milliseconds to fast forward to like 186 milliseconds, a couple rows later. Yeah. There's kind of a big body of water. It's the Pacific Ocean so there are these transpacific and there's transatlantic cables, there's satellites these days that get data from points A to really far points away B so in this case you can literally see empirically the actual distance and the body of water that's apparently between us and the Japanese news office for CNN because finally when we get all the way to the bottom, it wasn't a fluke. Pretty much every hop thereafter takes a hundred, eighty or so milliseconds so there's a pretty consistent gap between that point A and point B. So I won't show you this whole film but if you like this kind of stuff there's actually a fun movie we've linked on the course's website to something some folks from Ericsson, the mobile company years ago made. I thought I'd give you this little one minute teaser of how things really work underneath the hood. It's sort of half-fun but half-serious. There's some juicy stuff in there. So, give me one second to give us some audio here and. 

[ Music ] 

[ Audio ] 

[ Laughter ] So it is especially interesting the five minute version of that video if you are curious how the internet really works underneath things. So we've had a number of problems that's the last of which is coming up very soon so Problem Set 8 will in fact be your last and let me just make one mention because it's kind of historically the case for any class that allows you to drop p sets. A lot of people cut that last corner at the end of the semester. They figure my grades are fine and I'm just going to enjoy this last week or focus on other things. It is your prerogative so the course will just drop your lowest P Set score and if it's zero, that's the one that will go, but just do realize that you've come so damn far in a course like this that it would be a shame, we the staff feel, to cut this final corner. You've got P Set 7 due Friday or you can take a few late days. P Set 8 due next Friday and that's it and it's in P Set 8 that you'll finally get a really good taste of what web development is like, what client-side programming with JavaScript and this technology called Ajax which we'll talk a bit about today is about. So realize that it may very well be your biggest regret in life to not submit P Set 8 so 

[ Laughter ] So consider that. Now as for P Set 5, you know, we're kind of sad that no one's really stepped up and emailed the head teaching fellows with some answers so you probably recovered about 51 or so photos for this problem set. This of course is happy cat here giving a lecture somewhere on campus. Zooming out you can see really the context in which he's really in but I thought I'd take. Oh, damn it. Oh, there we, oh we're ok. Yeah, you can see. Wrong screen I thought. So I thought I'd give you a chance to ask a question. Is there anyone you're struggling with that we can push you in the right direction with? Has anyone even tried? I know a couple of sections have tried because I've been photographed here after lecture and the TFs have been hunted down in their houses. Yes? [Inaudible] The one oh the cat on the tree. Alright. So sure we can indulge in this for just a second. The cat on the tree was a little later. Ah, this is cute. The only apple tree that I've ever seen on Harvard's campus and it is near. The hint is where do all prefrosh go and behave really nice and positively at? That place. That area. Alright. So go there. I'll give one more hint. One more hint. [Inaudible] The guy with the, oh, right here. Oh. Takes computer science 1 if you want to know that answer or look it up in the catalog. 

[ Laughter ] Alright. One more, one more because we took up a lot of time taking these photos. 

[ Laughter ] Any more? This one, actually one of my favorite if only because it's sort of a faux animation was this one. 

[ Laughter ] So you can just take them anywhere. Alright. So anyhow hopefully that's a little bit more of an incentive to take a stroll. It's a beautiful day out today. You still have until the last lecture to do that to realize that's a fun way of wrapping up the course. Alright. So finally let's come back to where we were which was websites and the motivation for last week and this is really to take the training wheels off and help you realize that after this course you don't need someone handing you a 20-page PDF to actually get something interesting done. You can learn this stuff yourself whether it's PHP, XHTML, Sequel, JavaScript. We'll empower you with some final skills this week and next in order to do so. Some of your classmates though posted what we greatly enjoyed as the sort of cannon of good web design on the bulletin board just the other day. I thought I'd share this for you if only to incentivize you to check the bulletin board a little more often and its elections just happen and one of our own. Oh, actually someone is running for 2010 here, republican who should not have been let near Nano to make this particular web page so this is his platform apparently. Oh damn it. 

[ Laughter ] Never learn. Alright let's rewind. So if you have been checking out the course's bulletin board you might have clicked a little link like this, George Hutchins for US Congress 2010. 

[ Laughter ] Real quality. 

[ Laughter ] What's funny is that instead of having people endorse him, he's endorsing Fox News at the top of this so you don't normally see things like that so and worse, in this one I've been warned. Actually crashes some people's browsers so beware what you do with your newfound skills. There's this one too. 

[ Laughter ] Which apparently they wanted to embed a YouTube video right there for some reason. 

[ Laughter ] And then there's a whole lot of quality content here. You go down here. 

[ Laughter ] Wait, wait but this is only the vertical scroll bar because we have 

[ Laughter ] So if you're looking for a template for your new web page, there you go. 

[ Laughter ] Alright. So we got to get serious here. Ok. So. In all seriousness we covered a lot in the past several lectures. Let me pause and see are there any questions, conceptual or otherwise so that we're not forging ahead today with too much more stuff before you get some big important question answered. So no shame in raising your hand if you just have a question, you think it's a dumb question, that's cool. Let's field it now and bring everyone on the same page. Maybe that was too much emphasis on asking a dumb question. No? Nothing? We're good? Alright. So, it's up to you to pause us. So we promised in the last examples from last time that we were going to finally move to more seamless user interfaces so the theme with Problem Set 7 is pretty much to mimic our approach of the login example. You've got a login.php and that submits to login2.php. We recommend taking register.php and making it a register2.php and you have these pages leading from one to the other and we promote that especially for those of you who have never done web stuff before because it's a pretty simple mental model. Right, you fill out a form, you click submit, you're whisked away to another page and that other page is what implements the logic. Whereas the first page is what implements the form but we saw on Monday that or last week even that you can actually have PHP files or forms submit to the same page so long as you put your PHP logic at the top of that same file. So we looked at a couple of frosh IMs examples that did not submit to a new file. They submitted to themselves and we just had to condition at the top that said if you've been submitted to do this else show the form. So it's really up to you for P Set 8 and your final projects if you do something web based what approach you like but P Set 7 is generally pretty simple but it's certainly not very elegant especially when you're used to websites these days that are far more seamless and so what we promised at the end of Monday was that we could start doing things like this. I'm going to pull up an example in the Ajax directory for which you should still have a print out, ajax1 kind of took a baby step. That sounds stupid, kind of took a baby step toward doing a slightly more seamless interface because you can type in something to this form like goog, a stock symbol. Click get quote and it does get submitted but I don't get whisked away to a new page and instead apparently I somehow submitted a form. Someone answered my query, some server answered that query, gave me back a response but then I the very same web page grabbed that response and presented it to the user in this little alert popup but the key takeaway was that the URL at the top right never actually changed. So let's take a quick peek underneath the hood. I would say that these little pop ups are not terribly common but they certainly get the job done quickly. So let's at least look at this for a simple example. So this is ajax1.html. Let me fast forward to the form. This is all it took for me to whip up this very simple webpage but notice that I've done a couple of new things. What is absent or rather what is empty quotes right now? What attribute? So action and our action is normally the thing that says what file should I submit this form to, but in this case I don't want the browser to submit the form in a typical way so I actually don't really care what the action is. I left it in because for my code to be valid XHTML the w3c standards, that entity that sort of dictates what the web looks should look like underneath the hood, its, they say you need that attribute but they don't say I have to put a real filename there so I'm just leaving it blank because instead what I'm doing is I'm using another attribute. An attribute that's called an event handler so I can actually use things like on submit a special attribute that kind of does what it says. On submission of this form what should happen? The function called quote should get called and in fact it looks like a function call. Quotes open paren close paren semi-colon return false semi-colon. Well why the return false? Well what I want to do here is when this form is submitted by the user clicking the button or hitting Enter I ultimately want to say no don't submit that for real. Don't submit that sort of 1995 style too new web page. Let me intercept this submission and call this function quote instead. If I instead return true the form would get submitted as usual as though there were no JavaScript or function calls here at all. So in fact this function here quote is a snippet of JavaScript. A JavaScript now is a client-side programming language so again to recap what that means is it's executed by your own browser. It's not executed by the server and the advantage of this is that you can still change the user's interface once your web page has been downloaded to their screen. So JavaScript can get embedded into a web page like this. Again the tag that I'm using here is script and this is the new thing that I can put inside my head tag in addition to title. This is just some syntax that tells the browser don't get confused by the following. This is code. This is not XHTML so if you see things like less than signs, greater than signs don't confuse those with tags. It's probably just math. So what am I doing here to make all this happen. Well here's my quote function. Alright. It takes no arguments and there is a few new pieces of syntax so unfortunately the various browser manufacturers, we're never on the same page initially as to how to implement Ajax so Ajax is a technology that essentially allows web pages to make additional http calls, web calls from browser to server after your web page has loaded. Right up until now all of our examples have involved clicking a link, pulling up a web page and then the little globe or whatever in your browser stops spinning because the transaction is complete and if you want to make another http request, you typically submit a form or you click a link. What's cool about Ajax, this technology, which is more of a buzzword than anything, it's not a language you learn. It's just using JavaScript in a different way. With JavaScripts can you make additional http calls and grab more data on demand and that's how Google maps works. When you click and drag the map you briefly see those gray squares because Google hasn't yet downloaded those graphics, those tiles for that portion of the map. So Google wrote some JavaScript that talks back to Google.com and says give me more tiles from the northwest quadrant or wherever and then the JavaScript embeds that additional data in the web page. So how can we do this? It's actually relatively simple. We use a line of code like this, xhr, could have called it foo, doesn't matter but in general this stands for this XMLHttpRequest object. For now we won't go into much detail about what XML really is or what an object really is because the course is focused on not on object-oriented programming but on procedural programming. If you've heard the two terms but what that means for us is for now just take the syntax on faith that this is a little something new that we need to do. So, how can I start making additional http calls from browser to server I need to execute this line of code but there's a problem and that problem in that case was Microsoft because Microsoft decided no, no, no, no. If you want to actually make additional http calls you can't use that line of code. You have to use this second line of code. So this line of code that mentions this technology called ActiveXObject is just the Microsoft way at least for earlier versions of Internet Explorer that you begin to gain access to this functionality. So for our purposes, just take on faith if you want to use this technology called Ajax whereby you can make additional http calls to the server, you just kind of have to copy paste code like that but notice what I've done xhr this variable which just stands for xml http request, notice that I defined this variable globally. I defined it inside my script elements, not inside the function itself. Ok. So at this point in the story and by this point I mean right here I now have a variable that allows me to make more http calls to the server without the user necessarily realizing it but I do do a sanity check. I make sure you know if this person's running like Netscape 4.0 you know I mean 1.0 I don't want them to just have some weird unpredictable experience. Let me check for null because if xhr is null that means this thing called Ajax is just not supported by your browser. This probably won't happen to most users today but if you're on a mobile phone or a blackberry that just doesn't support some of this stuff, you might very well run into this so rigorous error checking is always is a good thing. So there's not much more to my code. The next thing I do here is this and it's wrapping a little bit so let me just hit Enter for a moment. I'm declaring a variable called URL because what URL do I want to get? Well the context here was this very simple application. When the user hits Enter they've given me a ticker symbol. I need to look up this current stock price so what I'm going to do is steal our trick from Yahoo and I'm going to actually say go to the URL quote1.php?symbol equals and then in JavaScript the concatenation operator is plus. In PHP it's dot. In JavaScript it's plus. Same exact thing though and then what am I doing here? Well this is one new trick because I want to pass to the server via get that is via URL request I need to get the value that the user typed into this form. What, how do I gain access to goog? Well let's take a quick look at the html because we must have overlooked something. Ah, ok. So notice that besides just putting this form in here, because I don't want the form to actually get submitted, I will still want to uniquely identify this field so I use this trick. I gave the input element in ID, a unique ID, now it's kind of silly to say it's unique because there's really nothing else in this page but from much larger websites it should be unique so symbol is the key word I want to use in my JavaScript because when I call this line of code document.getElementById which you're going to get is the element whose ID is symbol. Now that's an object in memory. That is this little textbox in the browser's window. We actually want its value inside of that box and so the syntax as we saw Monday in JavaScript is to use the dot notation there. So in the end I first get that object which is the textbox, then with the dot operator I get its value and I can catenae that string goog in this case to the end of this URL because my goal ultimately is to request of the server a file called quote1.php?symbol=goog. Ok? So finally, how do I make this request? So first I tell the browser when you're done getting this request call this event handler. An event handler is just a function so in other words when you're done making this call, get back to me with the answer by calling a function called handler which I will write for you. Finally these last two lines simply send the request. So, these two last lines open a connection to the server using this method called get, using this URL here and then it sends the request and for the curious if you were using that thing called post to do much bigger operations, photographs or private information, something like that you would instead put post here and you would put the post data here. But I'll waive my hands at that for this example. So what does this mean? I click the button submit. I typed in goog. The submission is intercepted because of the on submit handler and my function called quote is called. My quote function grabs that text field, grabs its value, appends it to the end of that URL for quote1.php and then because of this open code and this send code it makes a request of my server CS50.net and then hopefully the answer comes back. Well when the answer. Let's see what actually happens. Let me go ahead and simulate this. I'm going to copy the URL into a new window and I'm going to go literally to quote1.php?goog Enter. What actually comes oh, sorry, thank you. Quote symbol equals goog so that's what I'm about to hit Enter on. Enter and what I get back is just a very simple page. Let's look at the source code. There's no html. There's nothing in there. It's just a number. So apparently what the server responds with thanks to quote1.php is just a number. So my goal in life now is to make sure my JavaScript grabs that response and just shows it in a little popup. So how do I do that? Well, here's my handler function and it's very short. Notice I do two sanity checks. First I check if this object which I declared earlier xhr if it's in the state number four so state number four is just a value which means good things happen, you got back a response. So that simply means that the request was actually successful. So if it's successful I then check for this. Was the status of this request a value of 200. So four means I've gotten a response, 200 means it's a good response. What is 200? Well have you ever visited a web page for instance cs50.net/complete nonsense Enter. You get something like this, not found. What do you see in the title bar though of the page like this? So 404. You've probably seen this number somewhere whether it's in the title bar or in the web page itself. 404 means file not found. You might have seen other things like 500, 500 internal server error means David screwed up the configuration of the server a long time ago and never realized that what you should see there is a pretty page saying sorry, file not found but the 500 means I made a mistake on there. But there's other codes, 403 which some of you might have seen already with your own cloud accounts. Anyone know what the 403 code means? It says forbidden usually. That's when you've messed up chamad [assumed spelling]. It's just means you missed a step with chamad so chamad is relates to 403. 404 means the file doesn't exist. 200 though is a good thing and you never see it because you shouldn't. If good things happen you get back a web page there is no error code to show you. So if we got back a response, code is four and the status of that response is good, 200 what do I want to do? I simply want to call a JavaScript function called alert and I want to pass to that alert their string that came back. So how do you get at the content the server is responding with? It simply is this notation. The name of the object you used to get the data .responseText and now notice throughout this code incidentally all this capitalization, the T there, the E here and the B and the I, it's important so very common mistake especially for the first doing this stuff for the first time is to screw up capitalization. Always check something simple like that. So at the end of the day it's pretty underwhelming, right? Ok. Wow that's very great website. Much more common these days as to actually embed the answer in the web page for the user. So here I have a web page whose source code is still pretty simple. Let me scroll down to the XHTML and notice that what is in my web page at the moment is the following. Again a symbol field that says Id equals symbol so I copied and pasted that but notice the one interesting difference. Notice I now say price and then I have this other element span so you've seen me use the element called div which says here comes a division of the web page. Here's a bit rectangle. Put some stuff in it. A span is the same idea. Here's a placeholder for some data but it doesn't force it to be on its own line. A span is what's called an in-line element whereas a div is a block-level element which just means a div takes up the whole width of the page, a span just goes where you put it. So notice that the text I put there in bold is too be determined. So my goal with this version of the code is to actually type in something like goog and not get an annoying popup but rather actually integrate the response into the come on, into the, into the web page. Ok. So, internet was slow. Who knows what that was, but not a bug. What happened here price got embedded into the web page but what's interesting is this. Let me actually go into my source code. View page source, scroll back down and what's interesting is that the web page still says to be determined. So this is kind of an interesting thing. JavaScript again is a language getting executed by the browser and yes it can change the state of the world. It can change what's inside the browser but it doesn't change fundamentally what the server originally sent to the browser. That's why we still see the original example. So how did I do this? Let's take a quick look. This is ajax2.html. Let me scroll down. This is the same exact code we just looked at in the confines of the browser. My function again called quote. Let me look up the quote here. Alright quote here. This is a copy paste, all the same. Ah. Notice, you know what? I kind of let's see, no that's actually the same. I just wrapped on one line, same, same. It's only the handler function that's different. So the one difference in this version of code and let me fix the spacing because the font is again big is this. Instead of calling the alert function which is kind of a weak attempt to implement a user interface, what I did this time was this. I again used this function called document.GetElementId but I got the element with the Id of price. Well what is that? Let me fast forward to the bottom. Ah, that's the span. So the reason I use the span element is because I just needed an XHTML tag that has a unique Id that yeah has some temporary content to be determined but I need to be able to clobber that content and the syntax for clobbering original content is simply this. Get the element and this line of code GetElementbyId of price. That gets me that span, that location in the browser and then inner html capitalized as follows says go inside of that element so the original html and you know what thanks to the assignment operator clobber it with whatever the server has returned in that particular variable. So same exact code. I'm just putting in the response in a slightly different place. Any questions? Ok. So a little basic but we'll go from here to doing interesting things with maps in just a bit but why don't we take our five-minute break. Alright. So let's spruce things up a little bit. So it's very common on websites today that when you visit them and the website is using this thing called Ajax that you get some kind of progress indication. Like how many of you have ever used Kayak.com? So Kayak.com is a wonderful useful site for finding like airline tickets and hotels. It's a meta-search engine. It searches all these different sites but what's interesting about Kayak is they were one of the first a couple of years ago to really push the limits of this technology called Ajax and Google was another with Google Maps and similar. So to be clear, JavaScript is just an interpreted language. You can embed it inside of web pages. It gets executed by the browser. You can clearly manipulate the window itself. You can clearly trigger pop ups and such. Ajax stands again for Asynchronous JavaScript and xml. What does that mean? It's just a buzzword that says you are using JavaScript asynchronously. What does that mean? It means you are using JavaScript to make additional http calls and they go about their business. They do what they do their thing and then finally the response comes back. There's the asynchronicity. You say go do this and then you return like we did in our quote function. We just, that was it for the quote function but when the server's ready to get back to us it invokes our handler function thanks to my having registered that event handler and my handle function gets called. So again Ajax is just about this dynamism thanks to being able to make additional http calls. So I went ahead and did this. I wanted to get some sense of progress especially when the server's slow so then I'm not scratching my head wondering is the web broken. Is my computer screwed up or did I make a mistake? So in this example works fundamentally the same but when I click get quote it puts up this somewhat cheesy progress bar. As an aside it's very easy to find your own cheesy progress bars if you Google Ajax progress bars you'll get to sites like this and if you really want to procrastinate sometime, you can do this and then you can colorize the thing, download it and sftp it to your account and have great fun. There's some quality. So, that's where I went for my particular progress bar but how did I do this? Well, let's take a quick look. This is ajax3.html and again to be clear all of these files are just .html. I'm not even using PHP yet at least in these files. I did use PHP in quote1.php right just to remind you from last time, quote1.php was a pretty simple file that looks like this. I just grab. I use the same code. I actually stole this code pretty much outright from P Set 7's distribution code. You may recall that there's a bunch of functions and helpers.php that we give you. I kind of extracted the code I want but notice the interesting thing is that I'm dynamically creating a URL that hits Yahoo Finance and I'm appending my symbol after the s parameter. Then I'm getting back the response and long story short, the whole purpose of this little file quote1.php is to hit Yahoo and then spit out the appropriate stock price. That's it and more on that in P Set 7. So what about this progress bar? Well, let me scroll down and look at my XHTML. Oh and this is interesting. So even though when I visit the page it's not there, notice here's this pleasewait.gif. So if I visit this thing here. Let's see. Pleasewait.gif. So that's pleasewait.gif. Ok. So there's that icon and in fact it seems to be embedded in the web page itself. If I view the source of this web page, scroll down, we'll notice that at the bottom here I have pleasewait.gif roughly in the middle of that XHTML but what element is it a child of? What element is it nested inside of? What kind of element? So a div, right, so a parent element so to speak, this is just a tree. All of this hierarchy this is making a tree so the image element for pleasewait.gif is inside of that div element which apparently has an Id so that means I probably am going to go after that div somehow but notice in the style attribute this is a little CSS, cascading style sheets trick. I can put this element there but that directive, that property display:none, what that's doing for me is it's saying put the element here but then hide it. I don't want to see it but I want it to be there. It's essentially hidden but it's not taking up any space yet because what I later do in my JavaScript is in my JavaScript here, I scroll up and let's see all of this code is actually the same. It's really no, nothing to look at. Oh, except for this line and I point it out with a comment. Show progress. So the moment I construct the URL I then show a progress bar. How do I do that? Well let's see. I call document.GetElementbyId quote unquote progress so that's a familiar construct now. I've used it like three times and now notice you can change as I promised on Monday the properties, the CSS properties of elements using JavaScripts. The syntax for that is grab the element itself using like getElementbyId. That gives me the object that is that div. Dot style means go inside of that object and start accessing its CSS styles. What property do I want to change? I want to change the property called Display. What value do I want to give that Display? I want to give it the opposite of none which it currently is and in CSS the opposite of none for this is block and I used that word before. It's a block-level element so I want to show it as a block, a big rectangle so I change it to block. So all that's happening here when I actually click Submit is what this JavaScript is doing is it's toggling that CSS property and it's just revealing the element that's already there and an animated gif is just an animation. The animation didn't start when I clicked that button. Rather, it's been animating [inaudible]. I'm just seeing it the moment I actually click that button. Its actually still there. So we actually use this in the CS 50 App. If you go to events.college.harvard.edu you'll notice that if you look up an event like what's interesting, here marketing. Exploring careers. If I click on this notice that a lot more information appears and Google calendar does the same thing right? This is modeled after Google Calendars Agenda View so if I click this again, it goes away and this is actually the same exact trick. When you pull up a bunch of events on this calendar, everything comes down. The titles and the dates and times but also the paragraph or more of description for each of those events because what I wanted it to do was the moment the user clicked I didn't even want to have an annoying progress bar. I wanted the feedback to be immediate so you click this. What's happening is it's not hitting a server. It's simply executing a couple lines of JavaScript that say make the following row, the row below me display block instead of display none. Click it again and it changes it back to none. So again by understanding these basic building blocks, little CSS here, a little JavaScript here, a little XHTML here, you can start to make what really are today's modern interfaces with these very simple pieces. Now what's different here about quote2 is that I did actually return a bit more information. So notice in quote2.php and again more on this in P Set 7 on helpers.php file, notice I decided I just want to return the price. This time I'm going to return a little more information. I want to see the days high, the days low and the price so quote2.php now actually returns some XHTML, not a valid web page, not an entire web page, just a snippet but that's ok because clearly when I click in this symbol like Yahoo, click and get quotes, notice that the moment it's done calling, I get in the bottom the updated stock price. So how am I doing this? It's probably identical to the example before. Let me scroll down to my handle function and oh, look what I'm doing. One new thing. When my handler function gets called that is when the server gets back to me with an answer, I essentially assume ok I'm done showing this silly little animation so let me hide it again. I use the exact same line of code but change the value over here from block back to none and then I just insert that thing into inner html just like before so the rest of the code is actually identical. Alright. So that's the third version. Any questions on what we've just done? I know we're throwing a lot at you but hopefully little bite sized pieces here and there that you can refer back to. Any questions? No. It would really help me out if you ask some questions soon. No. Alright. I'll keep talking. Alright. So, Ajax4. Let me show you one other piece of syntax and you'll actually get more of this kind of sophistication when it comes to syntax in a class like CS 51 so again in a couple weeks we'll have a few faculty come by, give a little talk about what's in CS 51, 61, 124, 171, whole bunch of directions you can go in and what we'll soon put on the course's website is a little summary of the courses you can take thereafter. But a little teaser here in JavaScript is something that's called an anonymous or a LAMDA [assumed spelling] function. So these don't define the entirety certainly in CS 51 but you'll see these features in other languages and that's what's kind of fun about JavaScript for us. You're kind of getting sneak previews in this last week of web stuff of features and other languages, objects and in this case anonymous functions. So let me ask you before we go looking at that let me go back to the very first example. Ajax1. So you know I've been kind of a good boy here practicing what I learned in CS 50, breaking my code down to multiple functions each of which is kind of bite sized and implements some basic functionality. I had a quote function. I had a handler function but arguably it's kind of stupid to have a separate function called handler that is only called in one place. I'm not reusing this code. I'm simply telling the server call this function handler but no one else needs to call it so why do I have to go through the trouble of commenting it at the top, declaring the function and the parameters. Just feels like a lot of unnecessary work so in fact you can avoid something like this and this is arguably more elegant by no means necessary, but elegant. So down here recall that one of the things I did here before was I registered this handler. So onreadystatechange. Let me go back to the first example. The very first had that same line of code but I did this. I said when you are ready to change state, that's all that long named property says call this function. So what I kind of want to do you know what, I kind of want to take this code that's down here and let me just cram it in up here and not even give it a name because there's kind of an elegance about that. If you just want to execute some code later, just give me the code. Don't give me a function name. Don't give me a list of parameters. Just give me the code. So what we have here is this trick. If you want to have an anonymous function, one that doesn't have a name, but still behaves as a function you can do this, onreadystatechange. Instead of getting the name of a function, let me just give it the function. So there's this syntax. I can literally say function. Let me actually move this here. I can say function() because this isn't going to take any arguments. I'm then going to use a curly brace here and that means here comes my function. What do I want to do? This code is copied and pasted from version one of the Ajax demo right? I just grabbed the response and I called the alert function and it displays the response. So then notice down here, ah, that's interesting. I just have to remember that if I opened a curly brace, I have to close the curly brace and because this is one big line of code now, I need to put a semi-colon there. So in short, there's really nothing terribly new with this example. It might look a little weird at first but the motivation was let's just get rid of the gratuitous name handler and just put the function where I want it and I offer this not because this is some fancy trick that the elite kind of use in their code, but this is actually very, very common in JavaScript and in fact in Google's own APIs for Google Maps for projects for Problem Set 8 you'll see this syntax but its really no different from calling a function. It's just you're giving it the function and saying call this block of code which happens to be anonymous. It happens to have no name. Well let's look at one final version of this before transitioning to something more graphically engaging, the maps. So in this fifth and final version of Ajax.html we have the following XHTML here so let me pull this up in the browser first. So we have Ajax5.html. I'm going to go ahead and type in goog again and click get quote and now notice I have kind of placeholders for these things. I didn't bother with the progress bars. It was kind of annoying me but I have three placeholders. So, what XHTML element is probably underneath the hood next to the word price, next to the word high and next to the word low? So what XHTML element? Yeah, so span right? The last time I needed a little placeholder in line where I just wanted it right where I put it. I didn't want it to fill the whole page, just right where I put it so I probably have three spans this time. So let me check. View page source, scroll down, oh, that's all so I say price:high:low: and then I have three different spans and notice I've given these unique names. Lowercase by convention but they really just have to be unique words, no special funky characters in there. Ok. So what's different about this? The difference here and the reason we offer this simple example is now apparently I have three placeholders but up until now the server's only been returning one response. The first example in quote1 it just returned the price but in quote2 it returned some XHTML. It returned the price br tag, the high br tag, the low br tag. That's not going to fly now because I kind of need to be able to pluck from the server's response the price, then I need to separately pluck the high and separately pluck the low and put them in three different places. So it feels like now I need my server not to just return a blob of text that I just blindly cram into my web page. I needed to return a variable, an object, some kind of a hash [assumed spelling] table if you will right? I want to get back three values, a price, a high, a low so what I kind of want the server to return is something like this. I want it to return let's say price and then it's going to be one, two, three and then the high is one, two, four and then the low is going to be one, two, two. In other words I kind of want it to return a little csv file, a little database. Well what is a database? A database here is just a table and this is why we're using MySQL. It's just a table so this is just a hash table. Left-hand column are keys. The right-hand column are values and even though Problem Set 6 didn't really let you think of the hash table as just two columns because this feels a little easy to implement right? Your hash tables and tries are far fancier than this but just think of this as what the user sees. The user doesn't care how many hours you spent on Problem Set 6 implementing the fastest hash table or tri possible. They just care about putting in keys, getting back values, putting in keys, getting back yes or no this is a word. So this is kind of the higher-level view of the hash table. So it turns out with PHP and JavaScript we can return to the user a hash table containing keys and values or more generally we can turn an object that has keys and values inside of it. So let's take a look. This is quote3 that's going to make all this happen. So notice still it's pretty few lines of code but I did a couple of different things. So, one I first queried Yahoo for their csv file. So again, this is ripped right out of Problem Set 7. If you haven't dived into Problem Set 7 that's fine. Just today and Monday will make a little more sense once you do. So this is getting me back a csv file but I don't want to hand to JavaScript csv. I want to hand it in an actual hash table so it can just get right to work. So what am I doing here? I'm using this function that Problem Set 7 uses, fgetcsv. Doing a little sanity check. Let me make sure that it's not false. Let me make sure it's not applicable. As an aside PHP is pretty loose with capitalization. You can say capital false or lower case false even in variables, don't necessarily have to be capitalizes consistently. They should for style though so what am I doing? Well notice I did this little trick here. My goal with this fairly short program quote3.php is to return an object. Well what do I want to return as? Well what do I mean by object? A hash table. Well how do I implement the hash table? An associative array. So that was just our fancy term for an array that doesn't have to use numbers as its indices. It can use words. So I'm going to tell PHP give me an empty array so this line of code says create a variable called quote and assign it an empty array. Put nothing in it just yet. What am I doing down here? Well if I grab data from Yahoo with these lines of code notice I just do three things. I index into the quote variable using square bracket notation. I use a key of price and what do I put there? I put the column number one from Yahoo's csv file. In the field called high in my variable I put the field number two from Yahoo's csv file and low I put the third field from Yahoo's csv file. In other words I have created an array, aka an assos. I've created an associative array, essentially a hash table that puts something like this in memory. That's all those lines of code did. Doesn't look like this in memory. Right? You know from P Set 6, really not as simple as this but that's the mental model. It gave me a hash table, keys and values. So finally what do I do? Well, I don't want to return just text. I don't want to return just XHTML. This time I want to return this object. I want to return the hash table but I've got to hand it to JavaScript in a format that JavaScript understands and it turns out that JavaScript does not understand Excel files. It doesn't understand columns like this but it does understand something that's pretty much equivalent even though it looks different. If I want to implement in JavaScript this Excel table, the syntax that I would type in my own code would be something like this. Hashtable or rather var hashtable to give me a variable gets open square bracket close square bracket. That in JavaScript is the same in PHP as saying hashtable gets array ok so that's the same thing, different language. You just acclimate to the different syntax over time. Ok. So that gives me an empty hash table so what I really want to put in there is a bunch of elements. I want to put inside of there. Let's see. I want to put inside of there the following. I want my hash table really to look like this. I'm going to change my syntax just to kind of cheat a little bit. So I'm going to say high: 123. Sorry, let's do the first one first. Price: 123, high: 124, low: 122 close curly brace, close semi-colon and there's differences here with the syntax but essentially that is how JavaScript would implement this Excel table. So how can I convert from PHP's associative array from PHP's hash table to a JavaScript hash table or JavaScript object? Well there's this little function in PHP, JSON in code, JavaScript object notation. Takes your object in PHP's memory and just converts it to a format that JavaScript will understand. That's all and this is wonderful because the end result is this. If I go back here and go to quote3.php pass in a symbol of goog so this is the URL that I'm about to hit. Pretty much the same as before. Hit Enter. What I get back is this cryptic looking thing. So because as an aside I misled. I should have said we use the curly braces, not the square braces before so consider that retracted. So what JSON in code has done is it's taken my PHP associative array which feels like this to the user. That's what I put in my PHP code, that effect but when the when PHP converts it to JavaScript, it's a little ugly but notice open curly brace on the left, close curly brace on the right and then a whole bunch of key value pairs separated by commas. Now PHP just to be extra anal it put quotes around every value just so there's no confusion, there's no confusion for what's a string or a number but notice it's price:value, high:value, low:value. So now I have this fairly rudimentary way of taking data in memory in PHP, massaging it into a different format, an ugly format but a different format because I now claim that JavaScript can understand this and convert it into its own hash table with the same key value pairs. So, we take this home with Ajax5.html. The code here is again what we saw a moment ago. Three placeholders for price, high and low. I scroll up here and in my quote function I have same code, same code, the only difference so far is I'm using quote3.php so let's see what's coming back. Ok. I used an anonymous function again because I don't really need to give this thing a name per our argument a moment ago. Same thing, same thing. Ok. So the only difference here and let me fix my indentation for whitespace for large font reasons, the magic now is in these four lines. What again is about to happen? Well, when I go to this page, search for MSFT, get quote from Microsoft, it inserts three different values separately so that's at least three lines of code. Let's see. Document.getElementById of price.innerHTML quote.price, inner getElementById high, innerHTML quote.high, quote.low so that begs the last question what is quote? Well, the first line of code here is the magic. Var quote gives me the variable called quote. This is going to be my hash table but it's a quote so I called it quote. Now this is just a cryptic piece of syntax that this is the way it is done. It's literally something you can copy and paste when mimicking this behavior in the future. I get back the response from the server and this is the same as before. It's a different type of response but I know it's JSON because I wrote quote3.php the way you convert something that looks like a string, something that looks like this into something that's actually in memory, in the browser's memory is you take that variable which is this guy right here, you can catenae to the beginning of it, a single parenthesis, you can catenae to the end of it, a closed parenthesis and then you pass that as an argument to a JavaScript function called eval. So eval takes a string of what's called JSON, JavaScript object notation. What is that? Fancy buzzword for this. It takes that string and evaluates it and thereby loads it to RAM the actual representation of it in memory. By that I mean exactly the kind of structure you guys have implemented for a Problem Set 6. So, we've gone from very simple examples where we used alert to much more interesting examples where we're now using this fancy technology called JSON but what's cool about something like JSON is that when you go to a site like Kayak.com and you go to let's see I want to go from Boston to SFO. Doesn't really matter when I go. Let's go ahead and click search. I get back their page results. Notice I am now at this page and it's doing its thing with a progress bar and notice the results are gradually updating themselves. Well at Kayak probably is doing and we could figure this out by dissecting things underneath the hood with the tools we've been demoing but they're probably doing is grabbing more and more data via Ajax, getting back some JSON notation where they're calling eval on it and when they see a low price like oh, $338 they find the appropriate div or the span in their own web page and they cram that new low price at the top of the page. If it comes back as like $500 they do the same thing but they cram it down at the bottom of the page and when you actually apply things like filters, like Air Tran only, notice my URL has not changed. There's our $500. Don't fly Air Tran. Alaska Airlines. The web page is changing its interface because of all of these very simple building blocks we're using and when I say simple that doesn't necessarily mean easy but realize we're implementing in five lines of codes, six lines of codes the basic building blocks of all of these sexy websites these days. So let's now make a sexier website. So let's go to. You don't have a printout of this because I went to press late with this but it will be posted on the course's website, not that course's website, this course's website. I'm going to go oh wait, let's check in with Allen. About the same. Alright. 

[ Laughter ] Let's go down to source code index and I have this new directory called map as of this morning. So what's really cook about Google is that one not only do they solve the search problem very well, they also release for free so much fun functionality so that Wiki page we've been promoting or fun API's this is one of the API's on it. So Google Maps API, application program interface is a JavaScript interface via which you can actually embed Google Maps in your own website. In fact if you go to Shuttleboy.com we have a Google Map embedded in the website. Kind of a teaser because I haven't had time to finish it so when you click on this map there's my alert box. GPS coming back soon. We'll do that over Jay term but you can embed maps like that and make them interactive. So that's what we'll do. So in a nutshell when you use Google Maps you've got to do two things. One, you click a link like this, sign up for Google Maps API and they just ask you where are you going to use the maps. Tell us your URL and after that it's free to use. So there's no real registration or money or anything like that. But what's really cool is when you start to read through the documentation you realized my God look how much functionality Google exposes. Now this is not meant to overwhelm but this is meant to give a sense of just how much you can do for free with Google's API for maps and Yahoo has something similar. Microsoft has something similar. There's many different entities that do offer services like this. So what does it take to actually embed a map? Well, let's take a look. I'm going to go into my map directory here. Let me go ahead and change over to the server that I put this on this morning and let me go into Lecture 9 Source Map and this is map1.html. Again, this will be on the website. So that's this. There's not much code here at all but if you glance quickly you'll see a little bit of JavaScript and then little bit of XHTML. So what does this thing look like and then how does it work? Here's map1.html. Ok. Kind of ugly but hey it's not at maps.google.com. It's at CS50.net so that's a step in some direction. It's at least my own map and actually wow. I mean look at that. What is that? Twenty lines of code? I made my own Google map, right. Sort of our fake Google maps now. So how did I do this? Well notice this. At the bottom of this html file I have a body element with two new details just as there's an on submit handler which says on submission do this. There's also an on load handler which says on loading this page do this and there's an on unload handler which says on unloading this page going elsewhere do this. As an aside, there's bunches of other handlers on click, on key down, on key up and in fact any of the fancy websites you see today or even some of the CS 50 stuff if you go to our own Google maps and this is actually a canonical example of embedding a map into your own website. If I start typing mata. Here comes a whole bunch of suggestions. What we did was we wrote some JavaScript that says on key down check what the user just typed or probably on key up. The moment my finger comes up see if we have a match and in fact we have a match on Mather. Hit Enter. JavaScript executes. We get whisked away to that location of the map and we get this little bubble. So everything on maps.cs50.net is going to be within reach for you with Problem Set 8 so what does it take to do it? First I call apparently a load function which I'll write and then I'm just going to call a Google function called g unload. So how do I have access to Google code? Well notice at the top of my file previously I've had script tags which is my own code. You can also have script tags that don't themselves contain code between start and close tag but instead has this thing. A source attribute that says go load the source code from this long cryptic looking URL, but where is it coming from? Google.com and if you're bored later pull up like Facebook.com and go to view source. Look at the top of the file. It'll look a little messy because there's a lot of content there but if you look for script tags you will find that there's a whole bunch of .js files being loaded by Facebook every time you visit it and that's the same idea here. They've just factored their code out to separate files. So, let's see what else is happening. Ok. So the entire content of my page is one div. I have a div that I've given an Id of map. I've used some CSS to say make it 800 pixels wide, 500 pixels tall and that's it. There's not content on this page by default. In fact, if I ditch this load function call and go back to my browser and reload this page that is my web page. There's nothing there because apparently the magic comes from JavaScript. So what is my load function? Well this is pretty much ripped from Google's own documentation. I have a function called load which I clearly wrote right here. I do a little sanity check because Google's documentation told me to. It's kind of a long function name but I'm supposed to call if GBrowser is compatible. This is a Boolean function says yes this browser support it or false it's not supported. If it is supported what do I want to do and this is what's brilliant frankly about Google maps and any of these company's APIs, two lines of code, literally to embed a Google map in your website. First I declare a variable called map. I call new GMap2 because this is the second version of the Google maps API. Where do I want to put the map? I simply have to tell Google GMap2 function, the element that I want to fill with their map, with their tiles. Why do I say map? Because I have a div whose Id is map. So if I had said foo here, I have to say foo here but I just went with map. Finally, I have to do one last thing. I have to tell the map by way of the dot operator to call this function set center. So we've seen two things in JavaScript thus far. You can have a variable that's got a property, a value inside of it. We've seen dot value. We've seen dot high, dot low, dot price but in JavaScript because it's an object-oriented language you can also call functions that are inside of variables so for our purposes it will just tease you with this feature that exists in Java and C++ and CSharp and other languages but for now just know because map is a variable and because we assigned it the return value of this Google function, that Google function returns what's called an object that has not only properties or variable inside of it but also functions. So this function because of the documentation is called set center. Where do I center it? Well I center it using this syntax. I create a new GLatLongitude object. This is another function that takes two arguments, latitude and longitude and how did I figure these out? I copied them from their documentation. This is for Mountain View and then I went thirteen. This is the zoom level. So let's just tweak one thing. So let me go ahead and you know let me see. I don't know what thirteen is. I want to see what three is. Let me get a sense of what this means. Let me reload my page. Ok, so three apparently is way out whereas thirteen was apparently way in. Alright so we're getting somewhere. Really underwhelming to put it here. I'm just going to take a shot in the dark here. I don't know what this longitude is. Let's try 137 and see where we end up. Doesn't exist or it's not on the map. Let's try, let's do not do something as crazy. Let's do negative 102 here. Reload. Ok. Don't know where I am but we could follow this road and see where it leads right? 

[ Laughter ] So apparently notice I haven't put any zoom controls so let's actually, let's actually solve this problem. Roll back to our original version here and ok come on. Let me roll back there and go into Map 2. So map2 is a little better in that I kept reading the documentation and as you will for Problem Set 8 and now notice it's a little prettier because it fills the window. How did I do this? Well let's just take a quick glance here. Oh. Pretty easy to have it fill the screen, 100%, 100% voila. So it's sort of a marginal improvement but not all that magical so let's look at the third variance here. Let me open Map3.html. Ok. That's kind of cool. At least it's now relevant to my life right? So how did I do this? Map3.html, I did a few new things. One, I figured out using Google Earth or using Wikipedia frankly where Cambridge is in terms of GPS coordinates and then I replaced the Palo Alto ones or the mountain view ones with Cambridge's number so these are the latitude, longitudinal coordinates for Cambridge. Kept the same zoom level but then again I kept reading in the documentation because Google Maps as I know it has some really cool things like these arrows that let you zoom in and out and pan left and right, change to satellite view. I kind of want that in my own website. Well how do you do this? You call certain functions that the documentation tells you to. There's a function called GMapTypeControl that if you allocate it and then pass it to another function called addControl this simply adds this thing at the top right. This is the so-called type control. Why? That's what the documentation calls it. If I want to add the zoom thing on the left I use a GMap, GLargeMapControl and pass it to this function called addControl and then finally I can't mimic this on my tablet here because I don't have a mouse with a wheel, but these two functions also let desktop users use the little mouse wheel and zoom in and zoom out and it's literally that easy and this is when I speak to again maybe I'm biased being a bit of a geek with this stuff but the fact that it's so damn easy to just make really cool things really I think puts the fun back into programming. So let's take a look at just two final examples here. Map4.html has this. So that's kind of cool and now it's even more like the Google mps I now. If I click this little red dot, that's kind of cool. I get a little cartoon bubble with the name Science Center and a link to Wikipedia's article about us. Well, let me go into map4 here. How did I do this? Again I'm intentionally flying through some of this because again P Set 8 will walk you through this and again it's really just an RTFM thing. How do I do this? I looked it up in the manual. Well this is a little more interesting though. This function, this version of load in map4.html again centers me on Cambridge. It does the zoom level here and then I called this function called createMarker and I pass it a point. What's a point? Well this time I actually saved the return value of GLatLng so that's kind of interesting. Let me see how I wrote createMarker and this is syntax that at first glance looks a little messy but we'll just reason through it quickly here. So createMarker apparently takes a point, a GPS coordinate and then it creates something called a GMarker. Documentation probably explains that a little more and now the only thing I have to do and this is the intellectually interesting part. If I now have the notion of a point and I have the notion of a marker and I also want to create the notion of a popup window, I kind of have to wire these things together and this is a good mental model for programming these days with these APIs. It's kind of fun because you grab this thing off the shelf, this thing off the shelf and you with you own skills and savvy just have to figure out how to wire these things together using JavaScript, PHP or whatever. Well in this case, how am I wiring them together? I'm calling a function called addListener and I'm telling Google listen to the marker, the red dot. Every time it's clicked call this anonymous function. It's anonymous because I don't need it anywhere else. I'm just giving you the function directly. What does this function do? Well, it's apparently creating a variable called XHTML. It's storing in there the Science Center in a bold tag so apparently I'm making some XHTML on the fly plus equals the concatenation operator to combine so it's like doing plus equals minus equals star equals in C, same thing so here is the XHTML that ends up in that cartoon bubble. How do I actually open the cartoon bubble? So notice I called map.openInfoWindowHtml and pass in the point that I was given and I pass in the XHTML that was just created. So now take a step back and because we have some nesting here this code is not called the moment the page loads because everything in this yellow bracket is part of this anonymous function which is only called when the marker is clicked because the browser was told to listen for precisely that behavior. So the net result is again functionality you're very familiar with something like this and it pops it up but there's one thing we should finish strong with. Kind of an uninteresting website in that it always does the same thing. Where is the dynamism we promised? Well if we go to map5 we need to do this. If I click here, I went back to Palo Alto because I kind of like just for fun when I click on this marker I don't want some static Wikipedia article. I want the current stock price of Google 542.72. Close this window. Now odds are it doesn't change. Oh, there we go 542.49. Click it again 542.49. If we let Allen. There we go 542.40. So now there's some dynamism. Even though I haven't revealed what's under the hood think about the pieces that must be involved. It's the same exact program as map4.html but apparently now instead of creating a static string, I probably stole some code from earlier today with which is Ajax like. I make a second call to my own server, quote3.php. I contact Yahoo really quickly. I grab the response. I massage it into JSON format and then spit it back out and again my JavaScript code grabs that price and doesn't just display it with an alert. It doesn't display it in a span. Instead it displays it in an openInfoWindow function call. So more on this on Monday. Good luck with Problem Set 7. 

[ Music ] Oh and let me remind you Quad people if you'd like a Shuttleboy card 2009 2010 head that way. River people head that way. 

==== Transcribed by Automatic Sync Technologies ====