[Section 9 - Less Comfortable]
[Nate Hardison - Harvard University]
[This is CS50. - CS50.TV]
>> All right. So, last section of the semester.
To start, I know that there have been some cries to do some Ajax,
but are there any other topics that we should be doing first?
Let me switch over to the iPad so that we have--
Let me use black instead of orange.
Ajax is on the menu. Any other?
Any other topics that people want to see? I heard DOM too earlier.
[student] jQuery. >>jQuery. Okay.
jQuery. We can make a stab at that too.
[student] XML. >>XML. >>[student] JSON. >>XML, JSON. Okay.
PHP? All good? C? All good? >>[student] It wouldn't hurt to talk about PHP.
Hash tables? Tries? Linked lists?
[student] Oh, on the quiz from last year, there is a table for the omega and the big O.
Yeah. >>[student] for the time for the different kinds of versions and illusions.
Can we talk about that? >>Yeah. We'll talk about a little bit of data structures.
[student] Yeah. >>[student] Tries. >>[Hardison] Data structures.
We'll talk about some tries for sure.
[student] Can we have CSS a little bit? >>Yeah, we can do a little CSS.
Any other topics? Sam? >>[student] Scope in PHP. >>[Hardison] Scope.
Scope in PHP. >>[student] HTTP.
HTTP. Awesome.
I guess one way to do this would be to organize everything kind of chronologically
and start with data structures since those were the earliest.
Or we can assign these some sort of priority weighting and go from there.
So what do you guys think?
Is there something that everybody is dying to see?
Let's do a raise of hands. How about Ajax?
How many of you guys want to know about Ajax?
How many of you are like, "Man, Ajax, I've got you"? Nobody. All right.
So Ajax is pretty high. Let's star that guy.
How about DOM? Everybody ready to rock DOM? No? Okay. We'll star that one too.
jQuery?
Queryless. Yes. Okay.
A couple people for jQuery, but still people are a little more chill with that. Okay.
XML? XML. >>[student] Do you use that more than in the context of Ajax?
In the sense that-- Yes.
I mean, it is a key component of Ajax, so I guess we can bundle that with Ajax,
chat about the whole thing there.
JSON? What is JSON? Okay, cool.
Data structures? People feeling pretty good there?
You know your linked lists, know your hash tables?
How did Speller go for everybody? That was a doozy, huh? Yeah. Okay.
Yeah, we can talk a little bit about those but again, not as important.
CSS?
Making your websites look pretty. Okay.
Scope in PHP? One big hand over there. Two big hands, three. Okay.
Maybe a medium hand. >>[student] More than 2.
Yeah. Sam is campaigning. Get your hands up.
HTTP? Okay.
>> So let's see. It looks definitely like Ajax and the DOM are up for grabs.
So let's start with that.
I guess we have a couple of options here.
One is to kind of do a recap of what Ajax and XML are
since we didn't really have time to do that in section or in the problem sets.
The other thing is to dive into some problems from previous years' quizzes
and see what's going on there.
Any preference between the 2? >>[student] I think concrete examples would be more helpful.
Concrete examples more helpful? All right.
Any ones in particular, those of you from the Ajax crew?
Any problems you want to look at?
[student] Is the event handler related to Ajax at all? I think that's--
JavaScript event handlers don't necessarily relate to Ajax. They can.
[student] Yeah, that's another concept that I don't actually get. >>Okay.
[student] But I think in the quiz from the past year there is 1 big problem
in the later parts of the quiz that's related to Ajax and the syntax that I didn't really--
All right. And Ella?
[student] I feel like I know what Ajax is but I wouldn't know how to use it.
Okay. >>[student] I feel like I don't know what Ajax is or how to use it. [laughter]
Okay. That works pretty well.
Let's see. Let's maybe look at a good example of Ajax first.
>> Welcome, welcome. I hope you are okay on camera.
If not, you can hang out in the back.
>> Good example of Ajax.
Let me switch over to my laptop.
Here we are at Google.com.
How many of you guys have ever played the fun "How Do I?" game on Google?
How do I--and you get to see all the fun things that come up--
put this music on my Tumblr?
And you can keep going and get all this sort of fun stuff.
What is happening here?
As you type in the Google query box, the real-time results are updating.
So put this--and you notice that all of the results start updating on the Google web page.
That's not something that's happening on your computer.
The network is involved in this. Google is involved with this.
It turns out that every time you press a key, like say G or L,
and the search results update, what's happening
is there is some JavaScript on the page that's detecting that you pressed the key,
and it is making a network request to Google.com to load up all of the latest results
that best fit the query that you've typed so far.
Unfortunately, I believe that if we were to look at this--
I'm going to look at the source--most of this Ajax or JavaScript code in here
is all minified and often scrambled a little bit too.
The minification literally is a program you can run your JavaScript code through
and it changes all your variable names and makes it totally unreadable
but tries to make your JavaScript as short as possible
so that when you send your JavaScript files over the network
you're not having to load or send big files.
So this stuff is pretty hard to read,
but buried in here, what powers this typeahead--the buzzword for this--
is Ajax requests.
>> What makes an Ajax request different from any other kind of network request?
Sam? >>[student] You don't change the URL. >>[Hardison] Right. Exactly.
You notice as I type, "how do I put my jawbone in pairing mode?" [chuckles]
There are always some fun-- Yeah.
You notice that this URL up here at the top isn't changing,
and the entire page isn't refreshing.
So if we look at this kind of stuff right up here, this bar at the top, this Google,
and then the black bar up here, which is often called the chrome of a web page,
that's not changing. The entire page isn't refreshing.
The Ajax request is used to refresh just the results of the page,
just that 1 little part of the page so you're not having to go to an entirely different URL,
an entirely different file, and load that into memory.
So when you hear people talking about the dynamic Web 2.0 type of revolution,
this was behind a lot of it.
This is what enables you to write a wall post on Facebook, hit Post,
and have the post appear without the entire Facebook page refreshing
or scroll through a bunch of photos and load the photos dynamically,
because how much would it suck if you went to your Facebook page,
clicked on Photos, and then had to sit there and wait
while all couple thousand of your Facebook photos loaded into memory?
That's a huge load.
But with Ajax you can do that asynchronously,
and that's the asynchronous part of the Ajax.
>> All right.
Are we good? Does everybody kind of understand roughly what Ajax is doing?
It's done by the JavaScript, it's done kind of dynamically and asynchronously
after the page is loaded.
It often comes in after as kind of the response to an event,
which is either a mouse click or a key press or something like that.
And then it makes a call back to the server, whether you're on Google.com
or Facebook.com, retrieves some new content to then display or update
or anything like that.
>> Cool. All right.
Let's look at a couple of examples from previous years.
We'll go to the quizzes.
And then Charlotte, you were mentioning Quiz 1 from 2011. >>[student] Yeah.
One thing I will caution is that in looking at previous years' quizzes
you'll see this stuff called XHR often with relationship to Ajax.
XHR and XML HttpRequest is kind of the raw way of doing Ajax, if you will.
This year we've transitioned to almost entirely using this jQuery library.
jQuery is a library of helper JavaScript functions and classes and all sorts of goodies,
and jQuery kind of abstracts the raw XHR stuff away from you
so that it's a lot easier to do the actual Ajax stuff.
So as you're scrolling through these previous years' quizzes
and you're seeing stuff that says XHR and new XML HttpRequest,
all that kind of stuff, you can ignore that.
Instead we're going just the jQuery way.
We don't expect you to know XML HttpRequest.
But good to know that it is synonymous with this idea of Ajax,
this Asynchronous JavaScript fetching XML or JSON or whatever over the network.
But originally, it was correlated with XML or connected to XML.
>> All right.
Let's scroll down. Do you remember which problem in particular, Charlotte?
Was it this page that I'm looking at right here? >>[student] Yeah, I think so.
[Hardison] Ah, I got it. Okay. Yeah.
Let's talk about this really quickly.
The way Ajax works is you've got some JavaScript file on your computer,
and really it's running kind of in the context of your web browser.
So if your final project is to make--I don't know--a new dating site for Harvard people
and you want your dating site to have the ability to send anonymous messages
from person to person or anonymous Facebook wall-like posts
and you want to use Ajax in that somehow so that when you post a message
it doesn't refresh the entire site,
in your JavaScript code you would set up a new Ajax call.
I'm debating about whether or not to do this on the laptop.
The important part about the Ajax call is that there is this kind of asynchronicity to it
in the sense that--let me switch back to my iPad--
in the sense that if I have code that's going to say do some Ajax,
then I can't on the very next line of my JavaScript code
expect that the Ajax will have completed.
What happens is that as your code runs sequentially in JavaScript,
when you make this Ajax call, you're essentially forking off
and sending a request out to the Internet to some server over here,
which is this box I'm drawing and clearly not drawing it very well.
You're forking off this call to the server that's going to take some time
as it goes off to the Internet and goes and hits that server
and goes and calls that PHP script that you've written on the back end
to actually record that anonymous message in your database or something like that.
So that will take some time, and then eventually when the server is done processing
your Ajax request, it will return to your JavaScript code,
but you don't really know where, at what point in the execution
you're going to receive this response.
How is this handled in JavaScript?
This is where it comes into this problem that we're talking about on the laptop
where you register a handler, you register a particular JavaScript function
to run when the Ajax request is finished.
You can't just make your Ajax call and then in the very next line of code
assume that the Ajax call has completed.
Part of the beauty of this is you want your JavaScript to continue to run
after it's made the Ajax call because it can fork off this separate request
and keep processing other things.
You've got this kind of concurrency going here where your JavaScript continues to run
and keep doing other fun things, could continue to spin out other Ajax requests.
Your Ajax requests just go out to the network and then come back whenever they come back,
but when you register this handler function,
that's when you know that your Ajax call has returned because this function gets called.
So instead of having this sequential execution path that we're used to in C,
you have what's more similar to what we saw in Scratch at the beginning of the semester
where you have these broadcasts
and then you have these "when green flag clicked" or "when I receive this event."
That's essentially what's happening here in JavaScript with these Ajax requests.
>> For the answer to this question on line 20,
"In the context of Ajax, what does this line of code do?"
can somebody kind of paraphrase what I just said to confirm understanding?
[student] I'm sorry. What does the left half of it say?
[Hardison] xhr.onreadystatechange. Sorry. Am I getting cut off?
This is that XHR syntax that we won't have to deal with.
You have the similar concept with the jQuery.
Let's go to Source Code, Wednesday, Index.
Let's look this up. All right. Got it.
Here is that Ajax syntax that we're talking about.
Here you're specifying the Ajax request.
You're saying, "This is the URL I want to go out and ping."
"I want to use POST as opposed to GET."
And then the data type is "I want JSON to be returned."
Again, XML was kind of the traditional thing.
But what we're looking for is that function.
This is that right here.
This function(response) is that onreadystatechange.
This is the handler. This is what will execute when this request comes back.
So you notice that this function that Tommy has written right here
that we talked about in lecture on Wednesday was all about creating that fun typeahead for us.
You notice that what he's doing is he's building the Ajax request
and then there's nothing after the Ajax request.
He's not processing the response of the Ajax request after the call is made.
He's only doing it in this handler function
that will be called as soon as the response does come back.
>> Sam. >>[student] Do Ajax requests have to be of type POST or can it be GET?
They can be either. >>[student] How would that work if you're not changing the URL?
How would that work if you're not changing the URL?
It just depends on where the data is going.
So the question is can Ajax requests be POST or GET?
That's where it can be either. It's just really a semantic difference between POST and GET.
GET typically means that you're just reading something from the server
and you're not changing anything, whereas a POST typically implies
that you're writing data or you're writing something to a server.
Often you use POST when you're trying to change state somewhere.
That's why logins always go with HTTP POST,
whereas Google makes a bunch of GET requests.
Actually, if we go back to our Google example and if we look at our developer tools here,
let's look at the developer tools here at the bottom and open up the network.
As we start typing, you can see all of these GET requests coming in.
You see all these GET requests here at the bottom of the screen
that are all of these xjs.
This is the Ajax request coming back.
And if we were to click on it, we can see what it's saying and what its response is.
It's giving us all this information about the response that we got
when we sent to Google the headers that were down here.
Let's see if it has-- It will have our query string somewhere.
Request URL. Yeah.
Original query, ignore bad query, second pass, how I meter--
Anyway, somewhere in here you can find this "how I meter" query
in the request made to the server.
And then the response coming back is what we're seeing.
So yes, it can be either GET or POST.
It tends to be just a semantic difference. We can cover that with HTTP. Yes, Ella?
>> [student] Is the difference between JSON and XML just that JSON is more modern?
Is the difference between JSON and XML that JSON is more modern?
XML and JSON are just 2 different ways of encoding data.
XML is the Extensible Markup Language.
HTML is a subset of XML.
So for example, let's pull up TextEdit.
XML is just defined as data that's enclosed in a series of tags.
So html, /html, these guys are valid tags.
Let's blow up this size here and make it more readable.
hello!
XML just defines a tag as being something like this
where you have an open angle bracket, the name of the tag,
and then any number of attributes, which in HTML we often don't have attributes.
But for example, if we had a script tag, often it has the type of text, JavaScript.
And inside of the tags is data.
In true XML you can actually define these tags to be whatever you want.
It's just a way of structuring your information.
So for example, if I wanted to encode my family in XML,
I could do something like this, like father and then put information about him
and brother and put information about my brother.
Just this way of structuring your data is XML.
JSON, on the other hand, follows the JavaScript Object Notation,
hence J-S-O-N, JSON.
So rather than writing with this kind of tag, close tag type format,
we instead write it as a JavaScript object.
So the JavaScript object has the curly brace to open things
and then a curly brace to close things.
Let me zoom out a little bit, zoom in.
And then what you have are the names of fields, so "father":
and then I could put information about him
and then "brother": and information about my brother.
And of course everything in here is--
I guess what's nice about JSON as opposed to XML
is because a JSON object is in this object notation that JavaScript has.
JavaScript can really easily pull that into memory and treat it just as a JavaScript object
right when you receive it back from the server.
There's no parsing that it really has to do that's heavy duty or heavy lifting,
whereas with XML you have to use either plugins or some sort of--
Depending on what exactly you're transmitting
and what you're using to receive the XML, you might have to do a little bit more work parsing,
whereas this JavaScript stuff, if you're just writing with JavaScript
and you're receiving JavaScript back, it's really easy to work with.
The other thing that people will also mention sometimes
is that with XML you have all of these open tags and close tags,
so it can get big, it can get a little bloated.
So there are some who will talk about how with JSON
you don't have all these open tags and close tags, so it's more compressed.
The reason that that's important is that when you have to load things over the network
when you're talking to a remote server,
the less that needs to be transmitted over the Internet, the faster everything goes.
Anyway, the key takeaway here is they are just 2 different ways of structuring your data,
formatting your data.
>> All right.
Other questions? Charlotte?
[student] Can I ask 1 last question about the syntax of Ajax? >>Sure.
[student] If you go back to the example code and just zoom out a little bit,
there's just 1 line of code above.
Can we just go up?
on('keyup', function()
Is that set of empty parentheses after on('keyup' referring to the function after success?
[Hardison] No.
A couple of things here.
on('keyup', this is a way of doing the equivalent in Scratch
of when a key is pressed and you lift up off of the key.
Actually, in JavaScript you have on('keydown', on('keyup', and on('keypress',
and you can do things on each of those 3 different events.
This is registering an event handler any time a key comes up,
and then this function is this entire thing
all the way down to there.
This function doesn't have a name.
Kind of weird.
All of our functions we've done in C and PHP have all had names.
This is what we call an anonymous function. Makes sense, right? No name. Anonymous.
What's handy about the anonymous function?
Clearly, we can't call this function anywhere else in our code.
How would we call this function elsewhere in our code? We can't.
There's no name. I can't say, "Oh yeah, call that function that I said with on('keyup'."
What's handy about it though is that in JavaScript
when we are constantly registering these event handlers--
that's what this is called; you're registering this function as a handler when a key comes up--
is it's really nice to be able to just define these functions kind of inline and just say,
"When the keyup is pressed, remember this function that I'm going to define right here,
and it will remember this function and then it will do this function
whenever the key comes up.
We'll talk about this more once you get more into functional programming.
This is a little bit of a taste of that where we're essentially passing a function around
as an object, almost as if it were like a variable.
Rather than passing a string or an int, we're passing a function.
That's kind of a weird thing, but what's nice is that all of the variables in here,
inside of this function, the scoping issues are nice
because if you have a variable up here, you can refer to that variable inside of this function
because this function is declared inside of this other function.
So you get to have benefits like that.
Again, that's something that is more meta. You'll cover it in future classes.
>> Yeah. >>[student] Since the function is anonymous, can it be used somewhere else?
Or can it only be used in the context of this function?
[Hardison] It's used only in the context of this function. Yeah. Yes?
>> Does it have something to do with the fact that it's an object-oriented language?
[Hardison] Does it have something to do with the fact that it's object-oriented?
I would say that this has more to do with the fact that this has functional aspects.
We're talking about the object-oriented paradigm of programming,
and this is kind of one of those aspects of the functional paradigm of programming
where you are making functions that are composed of other functions
and you are passing functions around.
>> [student] So JavaScript is a function language also.
It has elements of it, yes. Yeah.
JavaScript and many--
PHP has some of this too, Python has this same sort of stuff,
Ruby has this sort of stuff as well, and this is common in more of these modern languages.
You really get these scripting languages that are kind of jack-of-all-trades.
It's like the big fatty Swiss Army knife, the one that you can't even put in your pocket
because it's too wide.
That's kind of how some of these languages have become.
>> Any other questions? All right.
How are you guys feeling?
Let's go back to that quiz really quick and see if we can answer 21 and 20.
We talked about 20 as we registered this handler.
This question here, "What would be the effect if we wrote that line with a pair of parentheses?"
you see the difference, how up at the top there are no parentheses
and down here there are parentheses after the function name?
One thing that is important to note,
here we're referring to a function.
This is not an anonymous function. It's been given a name, handler,
whereas in our Ajax over here that we were just looking at,
all of the functions that we were passing around were all anonymous: no function name,
no function name.
So it is common practice to define these functions kind of inline as anonymous functions
for some of the scoping benefits.
You could very well have defined this function right here or this on('keyup' function.
You could have defined this guy as functions with names elsewhere in your JavaScript code,
and then instead of defining the function here, you would pass the name of the function
right in this spot.
One thing to note is that you wouldn't want to use the parentheses
if you were passing the name of the function,
because when you use the parentheses, you're implying "call this function,"
whereas instead here we just want to pass the name of the function.
If we look at what's going on here, the big difference is that this top line of code says
effectively, maintain a pointer to the function called handler,
and when the Ajax call completes, call this function,
actually perform the function, plug in the arguments, do all of that work,
whereas this line down here says instead of maintaining a pointer
to the function called handler, this onreadystatechange field
is going to hold the result of a function called to handler,
so it's going to evaluate handler, it's going to actually call handler right now--
not when the Ajax call completes but right now,
which is not what you want to do if you're writing something
to deal with an Ajax call that's completed.
>> All right. Questions about that? It's a subtle difference.
It's a subtle difference.
One thing I would definitely suggest doing if you haven't done it--
because this is new stuff; it takes a while for it to really sink in
unless you actually type some of this stuff out--
I'd encourage you to go through the source code
that Tommy presented in lecture on Wednesday
because he definitely went through a lot of stuff, kind of in a blur.
I'd actually try typing it out.
Try coding some stuff up.
Make a .js file. Type out the code yourself. Don't just copy and paste.
Don't just run CP.
Try doing that just to kind of flex your JavaScript muscle.
See what the things are.
For example, here I'm looking at quote7.js in the source code from Wednesday's lecture.
Try going in and instead of just making all of these functions anonymous,
copy this code, literally go down to this success code,
copy this, paste it into another function, and give it a name,
and then try passing the name in and see what happens.
[student] Could that be in a separate file or in the same file?
It could be in a separate file if you properly include it.
One thing that's going to be--
The trick is does this function refer to any of the variables that are outside of it?
And I think it only refers to response.
Yeah.
You can name this.
You can pull it out, you can give it a name, and then you can pass the name in here.
So I'd give that a try, see how that works.
>> All right. Questions? Questions? I love questions.
I don't know about you guys, but I like them.
How are you guys feeling about this?
There's kind of this, "Oh, crap" mood in the room. [students chuckle]
Is that kind of how you guys are feeling? >>[student] Yeah. >>Yeah? Yes, Daniel?
>> [student] I think I understand kind of the overall concepts that you're talking about,
like the anonymous functions and all this stuff,
but I don't understand half the syntax that's up there right now,
like what ul means, li, these different tags.
I don't think I'd be able to code something with JavaScript. >>Fair.
Is that a common feeling, common sentiment, it sounds like? Okay.
[student] Will we need to? >>Will we need to code?
You should be prepared to dissect something like this, I would say.
I'm not the one writing the exam,
but I would definitely say that if that is a common sentiment,
kind of that a lot of this syntax here looks like, "What the hell is going on?"
"I'm totally swimming," then let's talk about that and fix that.
Sound good?
All right.
>> So what's going on here? Let's take this line by line.
Let's try going around the room.
I'm just going to call on people 1 by 1, and give me your best guess.
We'll do it fast. You've got 5 seconds to answer.
If you don't answer, we move to the next person.
And it's not a big deal because I know this is crazy stuff.
We'll start over here. Charlotte, what does this line do?
[student] It's creating a variable called suggestions
and setting it equal to whatever ul is. >>[Hardison] Right.
>> Jimmy, what is ul?
[student] I don't know. >>[Hardison] Okay, cool. Charlotte was totally right.
This line of code that I've highlighted right here declares a variable called suggestions,
a JavaScript variable.
We've got this var keyword in front which makes sure that the variable stays local
to the scope that it's in.
And this ul thing that we haven't seen before really,
let's see if there's a good-- Let me switch back to my iPad.
New page.
I'm sure you guys have seen the ul before.
It's an unordered list.
So have you ever seen on a web page where you have the bullets
and you have Thing 1, Thing 2, and so on and so forth?
This is an unordered list.
The way you would code this in HTML is you'd start with an open tag
that opens the unordered list, you'd close it with a close tag that closes the unordered list,
and then in the middle you'd have to list items, li.
And inside the li's would be the text to display, so Thing 1 and Thing 2.
Then we'd close our list item tags.
Unordered lists are super common because it's a great way to get the same styling
applied to a row of things.
So if you look in, for example, the pset 7 code,
a lot of the nav pills, the navigation pills that were used for the different links
to Buy, Sell, Quote, History, all of that, those are implemented as unordered lists,
and they used CSS to remove these bullet points
and kind of change things around slightly.
That's kind of the power of the CSS is that the HTML describes the structure.
We've got a list of list items.
It's unordered. There's no first, second, or third. It's just a list.
And so by default it will draw it with just bullets.
If we instead had written ol, so I'm going to change this to an ol list
as opposed to a ul, what would that do?
It would get rid of these bullets, and the default would instead be a numbered list
because now we've got ordering.
The styling of the list is then what you play around with in CSS,
and that's where the folks who wrote the Bootstrap library for CSS played around
with the styling of an unordered list to get it to display those nice little nav pills.
If we look at Google, for example, let's take a look at this guy.
Back to "how I meter your mother"--sounds kind of German.
I love German. It sounds so fun.
I'm sorry if there are any German folks watching who feel offended.
Anyway, if we look at these links up here at the top
and we look at what's going on there, we can inspect it using this guy.
I'm way down here in the corner.
Developer tools on Chrome is awesome.
If you guys start to play around with it or look up tutorials for it, it will help a lot
if you're doing web-based projects.
I click my little inspector. I'm going to scroll back up here.
I'm going to see what all these guys are.
I zoom in. I'm going to click on these.
Then I can zoom back out and see what it actually is in the HTML way down here.
It looks like Google has nested it in an ordered list.
So we've got this span that says +You, and that's nested inside an anchor tag,
so that's what makes it clickable and it links it to my Google+ page.
It's nested inside a list item,
and it's nested inside this ordered list.
And now if I actually click the list item, it will highlight it for me up there.
If I highlight the unordered list, you see how the focus goes at the top.
It shifts up and shows me the entire ordered list.
So Google has just played around with the styling to get these lists to show up like that.
That's enough fun with lists. Back to the quiz or this stuff.
Now we know what an unordered list is--hopefully.
>> Let's talk about this next line of code, for (var i in response.symbols). Ella.
[student] I have no idea. >>[Hardison] No idea.
Okay. You've seen a for loop before, I presume. >>[student] Yeah.
[Hardison] Do you remember doing for each in PHP? >>[student] Yes.
[Hardison] This is exactly that.
This is a for each loop in JavaScript.
This is a shorter way than doing the for (var i=0; i<response.symbols.length; i++),
which we could do,
but this is a more concise way of writing it.
One thing to be careful of in JavaScript is that this doesn't necessarily follow the order.
If response.symbols is presumably an array,
var i will be an index into this array, but it isn't necessarily the 0 and then the 1
and then the 2 and then the 3.
They do say use the for (var i=0) if you care about the ordering.
I guess the other thing to note is that when we used a for each in PHP,
we specified the array name first and then we had the as keyword
and then we specified the value that we wanted to retrieve from the array.
Or we could specify both the key and the value that we wanted to retrieve from the array.
Here we're just getting the index.
We're not getting the actual element itself.
So you see that when we go down here we are actually having to retrieve the ith element
out of the response.symbols object.
The other thing that's crazy about this is you can use this to loop over objects in JavaScript
and retrieve each of the properties of that object 1 by 1.
If we went back to that JavaScript Object Notation depiction of my family
where it was literally those curly braces and father, brother, mother, all that,
you could use a for loop to iterate over that as well
and retrieve the properties 1 by 1.
Kind of crazy.
So what we're doing, it looks like, is we're building up an HTML string
just like this comment says, "build html string for a list of suggestions."
We're going to start out with our open tag for our unordered list
in which we presume we're going to store all the suggestions as list items.
Then we're going to loop over all of the symbols in the response
because remember this is a typeahead for CS50 Finance,
so we're pulling out the stock symbols 1 by 1.
And then we're adding to our suggestions string what?
>> Jared, what does this look like?
[student] It seems like it's grabbing from some kind of database
whatever letter you're typing in,
leaving some kind of suggestion what word-- >>[Hardison] Yeah.
The Ajax request already actually did go and grab that. This is our response.
This is actually after we've gotten the response from the database, from the server.
>> And so what is this? What does this single quote thing denote?
[student] The single quote? >>[Hardison] Yeah. It's just a string, right?
And so what is this crafting?
It's a string and we're putting stuff in the string. And what is the string looking like?
[student] Just the suggestion that we're-- >>[Hardison] Yeah, exactly.
It's the suggestion nested inside an anchor tag,
and that is also anchored inside a list item so that it will go inside the list.
Literally, all we're doing here is we're just building up a big HTML string.
We're just building it up literally as a string in memory.
We're not doing anything fancy.
We're not creating new nodes in the DOM or anything like that.
We're literally just building a string as if you were to write out, for example,
on your iPad like I have--in case you guys have an iPad and like writing HTML on your iPad--
you're just writing a big long string that's like ul, li, a...
and then we're of course going to terminate it with this ul.
So that's all we're getting is 1 big, massive string.
And inside there's an li and an a for each of the symbols that we found.
>> And now, continuing on, what does this line do, Stella, right here?
What does this line do right here?
[inaudible student response]
[Hardison] Yeah. It's just adding this guy.
We're just ending our list. Exactly.
>> And then this final line--and this looks kind of goofy--
I'm sorry. I don't know your name in the red sweatshirt. Do you know what this does?
Or are you going to decide no?
And you? >>[student] It calls jQuery on it, but I don't exactly know which function it is.
[Hardison] Yeah. It calls jQuery.
How about anybody here over on the left side of me?
Do you know what this line does? What does it seem like it's doing if you had to guess?
[student] Submitting to the HTML the list of suggestions, or is it--
Yeah. What do you mean by submitting?
[student] Saying to HTML what we just dealt with in JavaScript
is now definitely just HTML. >>[Hardison] Yeah.
That's a great start.
Let's dissect this a little more.
That's exactly what this part is doing right here.
[student] What aspect of it makes it clear that it's jQuery?
[Hardison] jQuery is this dollar sign guy.
Whenever you're writing jQuery, you will see this dollar sign all over the place.
This has just been used in jQuery as kind of a special symbol.
It does a whole bunch of things.
In the context of this right here, this part of the line, it is a selector.
It is the jQuery selector, and it is selecting the HTML element
that has the ID suggestions.
Remember how HTML elements can have that ID attribute
where you can have a paragraph tag that has ID suggestions?
This jQuery selector will grab that element
because that element has to exist somewhere in memory.
JavaScript is able to kind of pinpoint that element and say,
"Oh, okay, you are the paragraph that has this ID,"
and then this .html says, "Okay, replace the current HTML inside of you
"with this new string, this new HTML that I'm going to give you."
So if we look back over at the iPad--ha, ha, I remembered to switch this time--
you often insert into things like divs, so imagine we had a div that had id="suggestions";
We're going to close the div tag down here.
When we use the jQuery selector to grab the element in the DOM
that has the ID of suggestions, it literally selects this entire div right here,
and then the HTML method says, "Replace all of this stuff right in here
"right in that ul, that unordered list that we just built up."
Literally, if you were viewing the entire HTML file's string in memory,
you would just say, "Go into that spot and plunk in that ul stuff,"
and then update the page so that you now see the unordered list there.
So what this has effectively done is it's dynamically updated this div.
The code that we just saw on the laptop has updated this div
to hold the new suggestions that were retrieved from the server somewhere.
[student] Which suggestions represents the new suggestions and the old suggestions?
The new suggestions and the old suggestions.
[student] What represents which one is being replaced and which one is doing the replacing?
[Hardison] Got it.
See right here, this guy is a string.
This specifies the ID of an element--we call it in the DOM--
which literally just means some HTML element that is somewhere being displayed
on the web page.
If we were to look at this, if we go back to our Google page,
we see all these divs and these ol's and these li's and these a's.
These all constitute the HTML elements that currently make up this page.
These all correlate to individual elements on the page.
And if we were to change this, you would watch the DOM change,
and you can see this kind of shifting.
So if we were to type Harvard, you'd see the DOM start to change
and the list elements starting to change in here.
That's actually what's happening.
>> Let's see if we can find some of this stuff right in here.
Let's look at this link. Let's look at this Harvard Wikipedia link, and we'll watch it change.
We can see that as I've selected this, it corresponds to this div right here,
which is also part of a list element, which is right next to another list element,
which is part of the unordered list here.
Now what happens if we search for our lesser school a little down south?
It now changes.
So we lost our handle on that div and that list element
because now we have different elements in our DOM,
different list elements, different list items, different lengths, all of that.
So this HTML document is being dynamically updated.
Old elements are being deleted, new elements are being added.
Back here we're just specifying this element, which presumably will be stable
throughout our typeahead update,
because otherwise if jQuery can't find an element that has an ID of suggestions,
it'll just crash at this point.
And then we're updating its inner HTML.
So it's these list items, these anchor tags that will constantly update and refresh as you type.
Does that do a better job? >>[student] That helps a lot. >>[Hardison] Okay.
The syntax that you'll see a lot--know what this guy does.
Know the jQuery selector.
This jQuery selector with a hash tag in front implies an ID.
This guy says, "Get me the element that has the ID suggestions."
This guy down here also says, "Get me that same element with ID suggestions."
This guy below it is slightly more complex.
This says, "Get me the element with ID form-quote,
"but then go inside that form and find the child"--
so this space right here implies that we're going to a child element, a nested element.
"Find the form that has this ID and then find the input inside that form whose name is symbol."
This is definitely in Tommy's lecture slides, these different types of jQuery selectors.
You should know what kinds of elements these are retrieving.
For example, let's switch back to the iPad really quickly.
If we had a form element with id="form-quote"--
of course that's missing the method=POST or method=GET and action attributes as well
that you should have on forms, but just for this example a form, as you know, has inputs
and that code that we just saw would get the input element
that had name="symbol".
This is important when you're trying to fill different fields inside of your form.
This is how auto-filling works.
>> Yes, Ella?
[student] What's the difference between an ID and a class? >>An ID and a class? Yeah.
A class is used for styling purposes.
An ID is used for what it sounds like: uniquely identifying a particular element.
So within an HTML page, you can only have 1 element with a particular ID.
There's only 1 form with the ID form-quote.
However, the nav pills class or nav class was probably something that you used
possibly or saw in the context of your Problem Set 7 code.
A class is used to apply a particular styling to a bunch of different elements.
For example, in the old days of HTML before there were style sheets,
before there was CSS, these Cascading Style Sheets,
if you wanted to center a paragraph or center the text in a div,
you'd have a div and then you'd have something like text-align="center"
as like an attribute within your div.
This is no good.
The reason people didn't like this is because then when you wanted to update
how things displayed on your website, you had to literally go into every page
and every HTML file and go change all the stylings on all the different elements,
and it was a huge pain because often you wanted to have a bunch of divs
that were all center aligned or fit a certain way.
So the solution to that was the class.
Now we have a div where we have the class specified to be whatever you want to call it.
You could call it "centered"; and close your div somewhere down here
and you have all your fun stuff in there.
And then somewhere in your style sheet you would specify a particular styling
that would apply to this class.
This didn't have to be the only div that was centered.
You could have other divs that also had centered text.
>> Yes, Charlotte? >>[student] Going back to the quote, what does the dot mean?
What is the dot? >>[student] Yeah.
Back to the laptop, you mean? >>[student] Yeah. >>Okay.
[student] For instance, in this line does that mean that there is this variable called val
inside of the form? >>Yeah.
The dot notation in JavaScript does a couple of things.
In this case you are calling a function whose name is val.
It's a method.
This is where we get into the object-oriented stuff that we were talking about, Sam.
This is where object--in this case the input element--has a function or a method called val
that basically says, "Hey, set your value to be this thing."
Imagine that instead of this gobbledygook we had written the number 7 or the string 7.
That would change the value of this input element to be 7.
[student] The input element being everything in front of the dot?
[Hardison] The input element, exactly, being the element within the HTML,
within the DOM, that matches this query.
[student] So it's input element .function and then what that value should be.
[Hardison] Exactly. >>[student] Okay.
And you also use this to access properties.
So if we look back up at the code that we were walking through line by line
where we have response.symbols[i].name,
we're not calling a function here.
There are no parentheses.
One thing you should just keep in mind as you rip through this code,
when you see parentheses, that means function call.
A function is being called,
and the name of that function is whatever precedes those parentheses.
So in this case down below, it's val. In this case right here it's html.
In this case right here the name of the function is literally $,
and we just know that this is the jQuery selector,
it's the function that is selecting whatever this guy is.
And then when you don't see parentheses, like here or here,
what you're accessing instead is a property of the object.
This is like using the array notation.
It's an alternative to using the array notation.
It's just a shorthand.
So we're accessing the symbols field of the response object.
>> We've done a lot on Ajax, DOM, some HTML, not much CSS.
Do you guys want to spend the last 15 minutes or so on this?
I guess we've really got about 10 minutes before we need to start wrapping up.
Or should we go back and talk about some of the other things on our list?
Let's see.
If we go back to the beginning, we switch over to my iPad again so you guys can see this,
we've done a lot of Ajax, we've done some jQuery,
we've done some JSON, we've done some XML, we've done some DOM,
we've done some--nope, not HTTP. Scratch that.
Not much scope. We sort of talked about CSS--not really.
Do you guys feel good on Ajax? Do you want to spend more time on Ajax?
Show of hands. Okay.
DOM? Anybody want to spend more time on DOM?
The easiest way to really get a feel for what's going on with the DOM--
people talk about the DOM and throw around, "Oh, the DOM this, the DOM that."
Really the DOM is just the way all of these HTML elements are held in memory.
and it's just explaining--that's what it is.
It's structured like a tree, and you can access individual HTML elements
with that jQuery selector, that dollar sign thingy.
You can manipulate things. You can add elements to the DOM.
You can add a new paragraph element to the DOM,
you can take away a div element from the DOM if you want.
That's all it is. It's just kind of the in memory representation of your HTML file.
It can be manipulated and traversed.
How about jQuery and that selector? Yes, Sam?
>> [student] Does that mean that the DOM includes all of your CSS and JavaScript?
[Hardison] The DOM includes those nodes, yes.
[student] It includes the HTML that those other auxiliary documents output?
If JavaScript modifies the HTML like it was doing in this Google--
oops, sorry, I'm not back on that.
Remember how JavaScript would modify the list of Google results?
If JavaScript modifies that, then those new list elements are now part of the DOM.
They were injected into the DOM.
And it turns out that the scripts and the style sheets themselves
are indeed part of the DOM.
You see down here that we've got these script nodes and these style nodes.
JavaScript can add and delete these too.
This is why it's so bad to have malicious JavaScript on your page
is that it can now start bringing in other JavaScript from other places.
So you can start out with just 1 JavaScript file,
but then it can start pulling in other JavaScript files.
You can use Ajax to load in JavaScript and dynamically have new JavaScript
running on your web page.
So it's a really powerful thing that our browsers are able to kind of constantly re-render
and re-adapt whatever is being generated by JavaScript.
>> [student] Those style tags are contained in CSS?
Let's look at it. Yeah.
This CSS, again you can see where jQuery got its selector from.
We've got this #gb which is saying, "This styling applies to an element with ID gb."
"An element with ID gb is going to have this size font with this font family,
"sans-serif; height."
>> Okay.
Back to the iPad.
How about data structures--tries, linked lists?
Do you guys want to do a quick refresher on that, or are you guys feeling--
Yea? Nay? Who wants data structures? Raise your hand.
Who hates data structures? >>[student] I only want tries. >>You only want tries.
Okay.
Does anybody not want tries? Is everybody like, "I hate tries. I did it. I tried it."
[student] I just want to know about the omega and big O.
Okay. We can definitely go over that.
Does that sound like something that we want to do as a group? Yes? Sort of? No?
>> How about HTTP? Does that seem like something more people want to do?
Or are you kind of, "Eh." Let's do HTTP first.
How many of you guys have seen David's ridiculously awesome HTTP short? Anybody?
I've seen it a whole bunch.
It was one of the first ones we did, and so it was like our demo this summer.
Dan's seen it a bunch too, Dan the Man back there.
HTTP and then there's this HTTPS thing that we've been talking about a little bit.
What do you need to know about HTTP?
It's literally just the protocol for interacting with a web server.
When you want to talk to Google.com, you're talking to another computer over a network,
what do you do?
Let's maybe do this.
Let me pull up a terminal.
Here's my little terminal window.
We can do something like telnet, which allows us to actually start a connection to Google.com.
This is not something you need to know,
but it's just to illustrate what's happening with the HTTP.
www.google.com, port 80.
What is this doing?
It's making an Internet connection between my computer and Google.
And it's actually connecting to 173.194.75.99, which is some computer,
some Google server living somewhere probably out here,
though it might be all the way back in California.
Now I'm connected.
Okay, that's all good.
But when you go to Google.com, typically you expect Google.com,
some HTML to show up, right? Not just this.
The problem is I want to say, "GIVE ME GOOGLE.COM" or whatever.
But if I say that, nothing happens.
In fact, if I hit Enter a couple of times, it comes back and it says,
"That was a bad request."
This was saying, "No, no, no, no, no, no, no, no, no."
"You can't just put stuff in. You actually have to speak HTTP to me."
"You have to format your request as an HTTP request, as a GET or a POST
"or something like that."
"And then I'll return the proper HTML to you."
So you see what it gave me in this case.
It gave me HTML that if I copy it and I textedit html, if I put it in here,
and I save it as test.html--oh, come on.
Web page. There we go.
Now if I open Downloads/test.html, now it gave me the bad--
It didn't quite render it as HTML.
It looks like it didn't close it. Here, let's see.
Nope. Okay.
It's not going to render. Anyway, not going to figure that out.
But anyway, what it is doing is it's returning to me the HTML,
but it's saying essentially, "You didn't give me a proper HTTP request."
So what do we need to know about HTTP?
It's the way of formatting requests to web servers to get, typically, HTML in response.
>> The other thing to note is that when you make a request to a web server,
you have to specify the HTTP method that you want to use.
We talked about this a little bit earlier, where the 2 big ones that we see
are GET and POST.
There are also a whole bunch of other ones.
There's HEAD and PUT and DELETE and all of these other things,
but GET and POST are the 2 main ones.
Where do you see those crop up? When you're writing forms.
When you're writing HTML forms, you have to specify the HTTP method
by which you want that form data to be transmitted.
And then you see it on the server side when you're writing PHP code
when you handle the data and you have to look in the POST superglobal
or the GET superglobal to retrieve the data that was submitted by the user.
And the difference between GET and POST is that GET modifies the actual URL
and for the most part you can see what parameters were passed to a GET request
very easily just by looking in the URL, whereas with a POST request
you don't transmit the parameters of the request in the URL.
But they're not encrypted or anything unless you're going over HTTPS.
The POST parameters are just part of the--
They don't go in the URL, effectively.
We tend to just kind of semantically separate the 2,
which just says that really, you can do the same thing with GET that you can with POST.
You can do the same thing. It's just that we use them in different situations.
We use GET when we're trying to just read something and we're just saying,
"Give me this data."
And we use POST typically when we're trying to update something on the server.
That's why whenever you go to Google.com and we were doing that typeahead
we saw all those GET requests
because we were literally just retrieving information from Google,
whereas if you make a Facebook wall post, you're going to be using,
most likely, an HTTP POST method to send that data and make a change to Facebook
in your wall, your friend's wall.
Let's see.
I guess the difference with HTTPS is that it is HTTP but encrypted.
[chuckles] Secure.
Yeah. And there are a lot of fun details about that.
>> Questions?
We need to start wrapping up, and so we'll do some data structures on the side. Charlotte?
[student] What's included in the HTTP header files from the host to the method
and the method and the number? >>Ah.
The best way to look at it is to go to your Network tab
and just see what happens when you just go to Google.com.
You can come down here and you can see all of the different HTTP requests that were made.
Google.com.
The first one was I tried to go to Google.com and it said,
"Oh, Google.com doesn't really exist."
"Where you really want to go is to www.google.com."
So I got redirected here.
That's where I got this 301 then I got the 200 OK.
So what is in here, in your headers?
It says this is the URL to which I made the request, the request method,
and then the status code.
Those are the 3 biggies.
The other things in here, cookies,
cookies are handy for figuring out the session, if somebody is logged in or not.
They're also handy for tracking people. This is how websites track you all over the place.
They put cookies on your computer.
They're trained to recognize other websites' cookies if they can.
And then there's this other stuff that says the user agent right here.
This user agent string identifies my computer to Google.com and says,
"Google.com, just so you know, some dude running this browser
"on Intel Mac 10_8_2 just went to Google.com."
And then these Accept things just say, "What is my computer,
"what is my web browser prepared to accept?"
It can accept HTML, it can accept XML, all this other stuff.
What kind of character encodings does it accept?
Does it accept gzipped compressed stuff?
Sometimes websites will compress things to make it faster to send over the network.
>> Cool. All right.
I think that's it for now. We'll close down, but I will remain for questions.
>> [CS50.TV]