>> 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.