CS50 / Week 9: Wednesday

alright welcome back to cs50 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 when the X Wednesday is a holiday the Monday thereafter will be a slate of guest lectures by other CS faculty will 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 thanksgiv I know so sad for cs50 so hopefully my voice will carry us through this lecture 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 or do this monday by email 11am 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 courses website under final project for the directions there we’ve added to the courses 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 by the courses website in here and this is meant to be a supplement to the hat 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 and Mather still time to RSVP at that URL 6 p.m. you’ll meet a couple of other CS faculty who will be there to have casual chitchat mathers masters will be in attendance as well as some TFS myself and some CAS so Halloween is behind us and I was emailed by one of the courses teaching fellows who delighted and we delighted and her choice of of costume for this particular Halloween she our own rose went as a balk at so here is our own rose but was funnier when she sent me these photos and she gave us our 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 courses 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 an industry Microsoft VMware and others you can actually download for instance windows 7 so those of you with pcs you 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 as a project that our own Yuki Amash it has been working on ups to spoil bit so we hypothesized where we realize that despite years of promoting tools like shuttle boy or other apps that students in this class have have invented for finding shuttles you know it’s still a relatively slow process to send a text message to s boy or to pull call cs50 voice or certainly to pull up that big piece of paper that shuttle services distribute so 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 data sets and trying to visualize it while our own teaching fellow Yuki came up with this much dare say 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 shuttle boy 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

friends since we have plenty so just a little something off our cs50 production line in fact coming soon more on this in a week it’s signed of a tradition in the course to have a store of sorts so we do have as you’ve seen in the videos of Jan sue and others our own line of apparel so this to wait a minute what’s going o gotta 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 momentum so more on that to come alright what else we got here so the big boards um so Charles very disappointing performance over the past forty 48 hours Charles has been blown out of the water with a mere thirty seven billion dollars up a significant percent Alan though is that the let’s see millions billions trillions quadrillions three quintillion dollars so your classmates are very cleverly with the height there say 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’re simply mirror volumes which yahoo happens to conflate as actual changes in price but power to you but we did run against an 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 scroll down here he started buying only as many as two billion shares at a time to to the 31-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 so we since remove that limitation and are now using long lungs essentially 64-bit chairs 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 is to your credit and will probably visit those numbers at the end of the course all right 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 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 zooming in a second but I’m going to run a certain command called trace route 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 trace route all one word now i’m going to type in something like dub dub dub CNN com so 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 soo min on this the output you see from traceroute is row by row by row of all of these so-called hops between points a and B each hop represents that thing called a router which recall from less money 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 routers job is in life to route data in the appropriate direction but what’s neat about trace route is that you can see every server every router that’s your data your instant message your 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 dots 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 most as many IP addresses as they want Harvard is literally running out but such as the case of the internet today but that’s just one of our IPS and then each hop they’re after is the name of a router so the fur number two is core hyphen one hyphen GW whatever so GW gateway synonym for router number for a 3 is border that just means it’s probably a router literally on the periphery the border of campus for 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 5 says quest net so this is just a local ISP that Harvard has some kind of connection to to get data to other people in the world finally we can move to the line 7 after some stars still in quest and then what city do we apparently end up in in row eight so San Jose which is 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 just 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 and 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 that’s damn fast that 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 they’re 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 the rows 1 2 & 3 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 took six milliseconds to get where we were line eight how many milliseconds so 35 milliseconds so that’s a dissident so but SJC is probably san jose california in this case people tend to use airport codes for their routers names just by convention but what’s really cool is what apparently is in between hops 9 and 10 just infer from the numbers kind of jumps right 35 milliseconds to fast forward like 180 6 milliseconds a couple rows later yeah there’s kind of a big body of water it’s the Pacific Ocean so there are these trans-pacific and there’s transatlantic cables their satellites these days that get data from points a to really far points away be 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 180 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 courses website to something some folks from erickson 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 have fun but have serious there’s some juicy stuff in there so give me one second to give us some audio here and Oh you address years of the net so it is actually 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 eight 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 draw psets but a lot of people cut that last corner at the end of the semester the figure uh my grades are fine I’m just going to you know enjoy this last week or focus on other things yeah that is your prerogative so the course will just drop your lowest pset score and if it’s zero that’s the one that will go but just do realize that you come so damn far and of course like this that it would be a shame we the staff feel to cut this final corner you’ve got pset 7 do friday or you can take a few late days pset 82 next friday and that’s it and it’s in pset eight that you’ll finally get a really good taste of what web development is like what client-side programming with java script 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 pset 8 so consider consider that now as for peace at five 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 a happy cat here giving a lecture somewhere on campus zooming out you can see really the context in which he’s in but I thought I’d take oh damn it oh there we know we’re okay 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 try i know a couple sections have tried because we’ve i’ve been photographed here after Lex and the teams have been hunted down in their houses yes the 10 the cat on the tree all right so sure we can indulge in this for just a second the cat on the tree was a little later oh 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 all right so go there any I’ll good one more hint one more hint the guy with the all right here Oh takes computer science one if you want to know that answer or look it up in the catalog all right one more one more because we took up a lot of time taking these photos anymore this one actually one of my favorite if only because it’s sort of a faux animation was this one so you can just kill you come anywhere all right so anyhow hopefully that’s a little bit more of an incentive to take a stroll it’s beautiful day out today you still have until the last lecture to do that so realize that’s a fun way of wrapping up the course all right so finally let’s come back to where we were which was websites and the motivation for last week in this is really 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 but will empower you with some final skills this weekend next in order to do so some of your classmates though posted what we greatly enjoyed as the sort of Canon 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 it’s lections just happened and one of our own like actually someone is running for 2010 here Republican who should not have been let near nano to make this particular webpage so this is um platform apparently oh damn it I can never learn alright let’s rewind so if you have been checking out the courses bulletin board you might have clicked a little link like this George Hutchins for u.s. Congress 2010 real quality 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 and this one I’m been warned actually crashes some people’s browsers so beware what you do with your newfound skills there’s this one too which apparently that you wanted to embed a YouTube video right there for some reason and then there’s a whole lot of quality content here you go down here wait wait but this is only the whole the vertical scrollbar because we have so if you’re looking for a template for your new web page there you go all right so we got to get serious here okay 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 answer so no shame and 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 yeah no nothing we’re good all right 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 seven is pretty much to mimic our approach of the login example you’ve got a login dot PHP and that submits to login to dot PHP we recommend taking register dot PHP turning and making a register to dot 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 a 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 pset 8 and your final projects if you do something web-based what approach you like but pset 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 printout Ajax one kind of took a baby step that’s not stupid kind of took a baby step toward do a slightly more seamless interface because you can type in something to this forum like goog stock symbol click get quote and it does get submitted but I don’t get whisked away to a new page instead apparently i somehow submitted a form someone answered my query some server answer that query gave me back a response but then I the very same webpage grab that response and presented it to the user in this little alert pop up but the key takeaway was that the URL at 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 first simple example so this is Ajax one HTML let me fast forward to the forum this is all it took for me to whip up this very simple web page but notice that I’ve done a couple of new things what is absent or rather what is empty quotes right now what the 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 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 it’s they say you need that attribute they don’t say I have to put a real file name 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 semicolon return false semicolon 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 to a new web page let me intercept this submission and call this function quote instead if ice 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 JavaScript now is a client-side programming language so again to recap but 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 users interface once your web page has been downloaded to their screen so JavaScript can get embedded into a web page like this the 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 it takes no arguments and there’s 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 stop 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 JavaScript 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 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 xml httprequest object for now we won’t go into much detail about what XML ray he is or what an object really is because the course is focused not on object-oriented programming but on procedural programming we’ve heard that 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 this case was Microsoft because Microsoft decided 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 active X object 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 requests notice that i define this variable globally I defined it inside my script element not inside the function itself okay 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 is running like netscape four point oh you know I made a one-point oh I don’t want them to just have some weird unpredictable experience let me check for null because if xhr is null that means uh 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 as 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 his 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 quote one PHP ? sim equals and then in JavaScript the concatenation operator is plus in PHP its dot in JavaScript its 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 a URL request I need to get the value that the user typed into this form what how do I gain access to goob well let’s do a quick look at the XHTML 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 it 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 for 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 dot get element by ID what you’re going to get is the element whose ID is symbol now that’s an object in memory that is this little text box 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 text box then with the dot operator i get its value and i can catenate 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 quote one PHP ? symbol equals 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 wave 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 quote one PHP and then because of this open code and the 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 new window and I’m going to go literally to quote one PHP ? goog enter what actually comes up sorry thank you quotes 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 quote one dot 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 pop-up so how do I do that well here’s my handler function and it’s very short notice I do to 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 the value which means good things happened 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 for 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 a page like this so 404 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 they had screwed up the configuration of the server a long time ago and never realize that what you should see there is a pretty page saying sorry file not found but the 50 hunt 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 says forbidden usually that’s when you’ve messed up chamada it just means you’ve missed a step with chamado chaa modest relates to 40 3404 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 responded with it simply is this notation the name of the object you use to get the data dot response text and now notice throughout this code incidentally all this capitalization the tea 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 okay wow that’s great websites much more common these days to as to actually embed the answer in the webpage 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 big 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 inline elements whereas a div is a block level elements 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’ve put there in bold is to be literally to be determined so my goal with this version of the code is to actually type in something like goo canned not get an annoying pop-up but rather actually integrate the response into the come on into the Maremma they turn into the web page okay so internet was slow so 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 Ajax 2 dot HTML let me scroll down this is the same exact code we just looked at in the confines of the browser my functions again called quote let me look up at quote here alright quote let’s see this is copy paste all the same I notice you know what I kind of let’s say nope that’s actually the same I just wrapped them online 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 use this function called document dot get element by ID but I got this element with the idea of price well what is that well let me fast forward to the bottom ah that’s the span so the reason I use this span element is because I just needed an XHTML tag that has a unique ID but 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 get element by ID idea of price that gets me that span that location in the browser and then innerhtml capitalized as follows says go inside of that element to the original HTML and you know what up thanks to the assignment operator collaborate with whatever the server has returned in that particular variable so same exact code I’m just putting the response in a slightly different place any questions okay 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 wonderfully useful site for finding like some airline tickets and hotels and because it’s a metasearch engine it searches all these different sites but what’s interesting about cognac is that they were one of the first a couple 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 webpages it gets executed by the browser you can clearly manipulate the pic the window itself you can clearly trigger popups and such a jack 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 they do their thing and then finally the response comes back there’s the a synchronicity 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 is 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 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 two sites like this and if you really want to procrastinate some time you can do this and then you can colorize the thing SF download it then SFTP it up to your account and have great fun there are 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 Ajax 3 dot HTML and again to be clear all of these files are just dot HTML i’m not even using PHP yet at least in these files i did use PHP in quote one dot PHP right just to remind you from last time quote one PHP was a pretty simple file that looks like this I just grabbed a I use the same code I actually stole this code pretty much out right from pset 7 s distribution code you may recall that there’s a bunch of functions and helpers dot 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 quote 1 dot PHP is to hit yahoo and then just spit out the appropriate stock

price that’s it and more on that in pset7 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 please wait jiff so if i visit this thing here let’s see please wait shift so that’s please wait Todd Schiff 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 well notice that at the bottom here I have please wait Jeff roughly in the middle of that H XHTML but what element is it a child of what element is it nested inside of what kind of element so a dip right so the parent element so to speak this is just a tree all this hierarchy this is making a tree so the image element for please wait on ship is inside of that div element which apparently has an ID so that means I probably am going to go after that did 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 colon none the 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 wanted 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 except for this line and i pointed 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 called 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 that properties the CSS properties of elements using javascript the syntax for that is grab the element itself using like dhaka get document a get element by ID 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 as CSS the opposite of none for this is block and I use that word before it’s a block level element so I want to show it is 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 its toggling that CSS property and it’s just revealing the element that’s already there and an animated jiff is just an animation the animation didn’t start when i click that button rather it’s been animating I’d nauseum I’m just seeing it the moment I actually click that button it’s actually still there so we actually use this in the cs50 app if you go events a 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 little JavaScript here 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 I about quote too is that I did actually return a bit more information so notice in quote to PHP and again more on this in pset7 zone helpers.php file notice i decided i want to just return the price this time i’m going to return a little more information i want to see the day’s high the day’s low and the price so quote to top PHP now actually returns some XHTML not a valid web page not an entire web page just to snip it but that’s okay because clearly when I click in this symbol like yahoo click it get quote 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 okay 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 right 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 know if it’d really help me out if you ask some questions today no all right I’ll keep talking all right so hey Jax for so 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 cs50 one so again a couple weeks we’ll have a few faculty come by give a little talk about what’s in cs50 161 124 171 whole bunch of directions you could go in and what will soon put on the courses website is a little summary of the courses you can take their actor but a little teaser here in javascript is something that’s called an anonymous or a lambda function so these don’t define the entirety certainly of cs50 one 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 actually before looking at that let me go back to the our very first example Ajax one so you know I’ve been kind of a good boy here practicing what I learned in cs50 breaking my code down into multiple functions each of which is kind of bite-sized and implement 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 a little more elegant by no means necessary but elegant so down here recall that one of the things I did 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 wanted to do you know what is 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 a function named 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 on ready state change instead of getting the name of a function let me just give it the function so there’s this syntax I can literally save function let me actually move this here i can say function open paren close paren 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 exam grab the response and I call the alert function and it displays the response so then notice down here huh 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 semicolon there so in short there’s really nothing terribly new with this example 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 like the lead kind of use in their code but this is actually very very common in JavaScript and in fact in Google’s own ap is for google maps for project for problem set eight you’ll see the syntax but it’s 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 dot HTML we have the following XHTML here so let me pull this up in the browser first so we have Ajax five dot 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 bar is kind of annoying me but I have three placeholders so what XHTML elements is probably underneath the hood next to the word price next to the word high and next to the word low so what X HTML element so span right the last time I need a little a solder 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 sim price colon hi colon glow Coleman and then I have three different spans and notice I’ve given these unique names lower case by convention but they really just have to be unique words no special funky characters in there okay 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 servers only been returning one response the first example in quote one it just returned the price but in quote to it returns some XHTML it return 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 then 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 crammed into my web page I needed to return a variable an object some kind of a hash table if you will right I want to get back three values a price a high-low so what I kind of want the server to return is something like this I wanted to return let’s say price and then it’s going to be one two three and then the high is like one two four and then the low is going to be one to two in other words I kind of wanted to return a little CSV file a little database well what is the database the database here is just a table this is why we’re using MySQL it’s just a table so this is just a hash table left hand column our keys the right hand column our values and even though problem set 6 didn’t really let you think of the hash table as just two columns I me because this feels a little easy to implement right your hash tables and tries farm fancier than this but just think of this as to what the user sees the user doesn’t care how many hours you spent on problems at six implementing the fastest hash table or try possible they just care about putting in keys getting back values putting in keys getting back yes or oh this is a word so this is kind of the higher level view of a 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 a quote three 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 seven if you haven’t dived into problem set seven 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 a hand to javascript csv i want to hand in an actual hash table so we can just get right to work so what am I doing here I’m using this function that problem set seven uses f get CSV doing a little sanity check let me make sure that it’s not false let me make sure it’s not not applicable as an aside PHP is pretty loose with capitalization you can say capital falls or lowercase falls even variables don’t necessarily have to be capitalized consistently they should for style though so what am i doing will notice I did this little trick here my goal with this fairly short program quote three dot PHP is to return in object well what do I want to return is an optimal what do I mean by object a hash table well how do i implement a hash table an associative array so that was just our fancy term for an array that doesn’t have to use numbers as 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 csv file in the field called high in my variable I put the field number two from yahoo csv file and low i put the third field from yahoo csv file in other words i have created an array AKA in a sauce 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 pset6 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 gotta hand it to javascript in a format that JavaScript understands and it turns out that JavaScript does not understand excel files 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 hash table or rather VAR hash table to give me a variable gets open square bracket close square bracket that in javascript is the same in PHP as saying hash table gets ray okay so that’s the same thing different language you just a’kla mate to the different syntax over a time okay 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 hi colon 1 2 3 sorry let’s do the first one first price colon 1 2 3 hi colon 124 lo colon 12 to close curly brace close semicolon 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 Jason encode JavaScript object notation takes your object in PHP’s memory and just converts it to a format the JavaScript will understand that’s all and this is wonderful because the end result is this if I go back here and go to quote three dot PHP passing a symbol of goog so this is the your 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 Jason and 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 brown 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 said that there’s no confusion there’s no confusion for what’s a string or a number but notice its price colon value comma hi colon value comma low colon value so now I have this fairly rudimentary way of taking data in memory and 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 Ajax 5 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 quote 3 PHP so let’s see what’s coming back okay I used an anonymous function again because I don’t really need to give this the thing a name / our arguments a moment ago same thing same thing okay so the only difference here and let me fix my invitation for white space 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 for Microsoft it inserts three different values separately so that’s at least three lines of code let’s say document dot get element I ID of price innerhtml quote price enter get element by ID a high enter HTML quote high quote out low so that begs the last question what is quote well the first line of code here is the magic VAR quote gives me a 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’s 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 Jason because I wrote quote three 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 catenate to the beginning of it a single parenthesis you can catenate to the end of it a close parentheses and then you pass that as an argument to a javascript function called eval so eval takes a string of what’s called jason javascript object notation what is that fancy buzzword for this it takes that string and evaluates it and thereby loads into Ram the actual representation of it in memory by that I mean exactly the kind of structure you guys implemented for problem set 6 so we’ve gone from very simple examples where we used alert so much more interesting examples where we’re now

using this fancy technology called Jason but what’s cool about something like jason 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 there 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 what a kayak probably is doing and I 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 Jason notation they’re calling a vowel on it and then when they see a low price like Oh 338 dollars 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 is like five hundred dollars 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 airtran only notice my URL is not there’s our 500 don’t fly airtran Alaska Airlines all the web page is changing its interface because of all of these very simple building blocks we’re using and why do I say simple that doesn’t necessarily mean easy but realize we are implementing in five lines of code 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 want to press late with this but it will be posted on the courses website not that courses website this course is website I’m going to go wait let’s check in with Allen yeah about the same all right let’s go down to source code index and I have this new directory called map as of this morning so what’s really cool 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 a fun api’s this is one of the API is on it so Google Maps API application program interface is a java script interface via which you can actually embed google maps in your own website in fact if you go to shut oh boy calm we have a google map embedded in the website kind of a teaser because I kind of 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 a J 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 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 map 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 realize 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 map 1 HTML again this will be on the website so that’s it there’s not much code here at all but if you glanced quickly you’ll see a little bit of JavaScript and then a little bit of XHTML so what does this thing look like and then how does it work here’s map one 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 onload handler which says unloading this page do this and there’s a non 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 in today or even some of the cs50 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 m88 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 java script executes we get whisked away to that location of the map and we get this little bubble so everything on map

cs50.net is going to be within reach for you with problem set a so what does it take to do it first I call apparently a load function which all rights 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 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 to 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 dot 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 okay so the entire content of my page is one div I have a div that I’ve given an idea of map I’ve used some CSS to say make it 800 pixels wide 500 pixels tall and that’s it there’s no 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 but that is my webpage 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 G browser is compatible this is a boolean function says yes this browser supported 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 companies api’s two lines of code literally to embed a Google map in your website first I declare a variable called map I call new gmaps too 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’s gmaps to 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 ideas 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 us farm you can have a variable that’s got a property of value inside of it we’ve seen dot value we’ve seen dot hi dot low 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 C sharp and other languages but for now just know because map is a variable and because we’ve assigned it the return value of this google function that Google function returns what’s called an object that has not only properties or variables 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 g lat longitude 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 13 this is the zoom level so let’s just tweak one thing so let me go ahead and you know it let me see I don’t know what 13 is I want to see what 3 is let me get a sense of what this means let me reload my page ok so free apparently is way out whereas 13 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 see where we end up yeah doesn’t exist or it’s not on the map let’s try let’s do not do something as crazy let’s do 10 negative 10 to hear reload okay don’t know where I am but we could follow this road and see where it leads literally so apparently notice I haven’t put any zoom control so let’s actually let’s actually solve this problem may roll back to our original version here and okay come on let me roll back there and go into to map to so map to is a little better in that I kept reading the documentation as you will for problem sets eight and now notice okay it’s a little prettier because it fills the window how did I do this well let’s just take a quick glance here up pretty easy to have it fill the screen one hundred-percent hundred-percent 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 map three dot HTML okay that’s kind of cool at least it’s now relevant to my life right so how did

I do this map three dot HTML I did a few new things one I figured out using google earth or using Wikipedia frankly we’re Cambridge is in terms of GPS coordinates and then I replace the Palo Alto ones or the mountain view ones with Cambridge is numbers 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 lets 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 gmaps type control that if you allocate it and then pass it to another function called add control 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 this zoom thing on the left I use AG map lard G large map control and pass it to this function called add control and then finally I can’t mimic this on my tablet here because I don’t have a mouse with the 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 you 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 I think two final examples here map for dot HTML has this so that’s kind of cool in that now it’s even more like the Google Maps I know 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 wikipedias article about us well let me go into map for here how did I do this and again I’m intentionally flying through some of this because again psets eight 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 map for dot HTML again centers me on Cambridge it does some the zoom level here and then I call this function called creates marker and I pass it a point what’s the point well this time I actually saved the return value of G lat long so that’s kind of interesting let me see how i wrote create marker and this is syntax that first glance looks a little messy but we’ll just reason through it quickly here so create marker apparently takes a point a GPS coordinate and then it creates something called a G marker 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 I and i also want to create the notion of a pop-up window I kind of have to wire these things together and this is a good mental model for programming these days with these api’s it’s kind of fun because you grab this thing off the shelf this thing off the shelf and you with your 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 add listener 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 is just 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 call map open info window HTML 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 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 one thing we should finish strong with kind of a uninteresting website in that it always does the same thing where is the dynamism we pray almased well if we go to map 5 we need to do this if I click here I went back to Palo Alto because you know I’d 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 5 40 to 70 to close this window now odds are it doesn’t change there we go 542 249 click it again 5 40 to 49 if we let Allen there we go 542 40s so now there’s some dynamism now 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 is map for dot HTML but apparently now instead of creating a static string I probably

stole some code from earlier today before Jax like I make a second call to my own server quote three dot PHP I contact yahoo really quickly I grab the response i could 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 doesn’t display it in a span instead it displays it in an open info window function call so more on this on Monday good luck with broad symptoms set 7 Oh and let me remind you quad people if you’d like a shuttle boy card 2009-2010 head that way River people head that way