{"captions":[{"content":"[Section 9 - Less Comfortable]","startTime":0,"duration":2850,"startOfParagraph":false},{"content":"[Nate Hardison - Harvard University]","startTime":2850,"duration":2070,"startOfParagraph":false},{"content":"[This is CS50. - CS50.TV]","startTime":4920,"duration":2310,"startOfParagraph":false},{"content":"All right. So, last section of the semester.","startTime":7230,"duration":3910,"startOfParagraph":true},{"content":"To start, I know that there have been some cries to do some Ajax,","startTime":11140,"duration":7240,"startOfParagraph":false},{"content":"but are there any other topics that we should be doing first?","startTime":18380,"duration":3480,"startOfParagraph":false},{"content":"Let me switch over to the iPad so that we have--","startTime":21860,"duration":3100,"startOfParagraph":false},{"content":"Let me use black instead of orange.","startTime":24960,"duration":4200,"startOfParagraph":false},{"content":"Ajax is on the menu. Any other?","startTime":29160,"duration":6570,"startOfParagraph":false},{"content":"Any other topics that people want to see? I heard DOM too earlier.","startTime":35730,"duration":4940,"startOfParagraph":false},{"content":"[student] jQuery. >>jQuery. Okay.","startTime":40670,"duration":4460,"startOfParagraph":false},{"content":"jQuery. We can make a stab at that too.","startTime":45130,"duration":4060,"startOfParagraph":false},{"content":"[student] XML. >>XML. >>[student] JSON. >>XML, JSON. Okay.","startTime":49190,"duration":9000,"startOfParagraph":false},{"content":"PHP? All good? C? All good? >>[student] It wouldn't hurt to talk about PHP.","startTime":58190,"duration":8200,"startOfParagraph":false},{"content":"Hash tables? Tries? Linked lists?","startTime":66390,"duration":4500,"startOfParagraph":false},{"content":"[student] Oh, on the quiz from last year, there is a table for the omega and the big O.","startTime":70890,"duration":6080,"startOfParagraph":false},{"content":"Yeah. >>[student] for the time for the different kinds of versions and illusions.","startTime":76970,"duration":4390,"startOfParagraph":false},{"content":"Can we talk about that? >>Yeah. We'll talk about a little bit of data structures. ","startTime":81360,"duration":3780,"startOfParagraph":false},{"content":"[student] Yeah. >>[student] Tries. >>[Hardison] Data structures.","startTime":85140,"duration":8500,"startOfParagraph":false},{"content":"We'll talk about some tries for sure.","startTime":93640,"duration":3590,"startOfParagraph":false},{"content":"[student] Can we have CSS a little bit? >>Yeah, we can do a little CSS.","startTime":97230,"duration":5300,"startOfParagraph":false},{"content":"Any other topics? Sam? >>[student] Scope in PHP. >>[Hardison] Scope.","startTime":105280,"duration":4010,"startOfParagraph":false},{"content":"Scope in PHP. >>[student] HTTP.","startTime":112540,"duration":4220,"startOfParagraph":false},{"content":"HTTP. Awesome.","startTime":116760,"duration":4650,"startOfParagraph":false},{"content":"I guess one way to do this would be to organize everything kind of chronologically","startTime":129729,"duration":4651,"startOfParagraph":false},{"content":"and start with data structures since those were the earliest.","startTime":134380,"duration":3550,"startOfParagraph":false},{"content":"Or we can assign these some sort of priority weighting and go from there.","startTime":137930,"duration":5550,"startOfParagraph":false},{"content":"So what do you guys think?","startTime":143480,"duration":2380,"startOfParagraph":false},{"content":"Is there something that everybody is dying to see?","startTime":145860,"duration":1960,"startOfParagraph":false},{"content":"Let's do a raise of hands. How about Ajax?","startTime":147820,"duration":3380,"startOfParagraph":false},{"content":"How many of you guys want to know about Ajax?","startTime":151200,"duration":2120,"startOfParagraph":false},{"content":"How many of you are like, \"Man, Ajax, I've got you\"? Nobody. All right.","startTime":153320,"duration":4550,"startOfParagraph":false},{"content":"So Ajax is pretty high. Let's star that guy.","startTime":157870,"duration":3030,"startOfParagraph":false},{"content":"How about DOM? Everybody ready to rock DOM? No? Okay. We'll star that one too.","startTime":160900,"duration":5750,"startOfParagraph":false},{"content":"jQuery?","startTime":166650,"duration":2390,"startOfParagraph":false},{"content":"Queryless. Yes. Okay.","startTime":170330,"duration":2450,"startOfParagraph":false},{"content":"A couple people for jQuery, but still people are a little more chill with that. Okay.","startTime":172780,"duration":3600,"startOfParagraph":false},{"content":"XML? XML. >>[student] Do you use that more than in the context of Ajax?","startTime":176380,"duration":6620,"startOfParagraph":false},{"content":"In the sense that-- Yes. ","startTime":183000,"duration":5670,"startOfParagraph":false},{"content":"I mean, it is a key component of Ajax, so I guess we can bundle that with Ajax,","startTime":188670,"duration":5870,"startOfParagraph":false},{"content":"chat about the whole thing there.","startTime":194540,"duration":2160,"startOfParagraph":false},{"content":"JSON? What is JSON? Okay, cool.","startTime":196700,"duration":5130,"startOfParagraph":false},{"content":"Data structures? People feeling pretty good there?","startTime":201830,"duration":5370,"startOfParagraph":false},{"content":"You know your linked lists, know your hash tables?","startTime":207200,"duration":2440,"startOfParagraph":false},{"content":"How did Speller go for everybody? That was a doozy, huh? Yeah. Okay.","startTime":209640,"duration":3870,"startOfParagraph":false},{"content":"Yeah, we can talk a little bit about those but again, not as important.","startTime":213510,"duration":3810,"startOfParagraph":false},{"content":"CSS? ","startTime":217320,"duration":1920,"startOfParagraph":false},{"content":"Making your websites look pretty. Okay.","startTime":221210,"duration":2750,"startOfParagraph":false},{"content":"Scope in PHP? One big hand over there. Two big hands, three. Okay.","startTime":223960,"duration":6710,"startOfParagraph":false},{"content":"Maybe a medium hand. >>[student] More than 2.","startTime":230670,"duration":2390,"startOfParagraph":false},{"content":"Yeah. Sam is campaigning. Get your hands up.","startTime":233060,"duration":3220,"startOfParagraph":false},{"content":"HTTP? Okay.","startTime":236280,"duration":4630,"startOfParagraph":false},{"content":"So let's see. It looks definitely like Ajax and the DOM are up for grabs.","startTime":240910,"duration":6500,"startOfParagraph":true},{"content":"So let's start with that.","startTime":247410,"duration":2890,"startOfParagraph":false},{"content":"I guess we have a couple of options here.","startTime":252740,"duration":3640,"startOfParagraph":false},{"content":"One is to kind of do a recap of what Ajax and XML are","startTime":256380,"duration":4660,"startOfParagraph":false},{"content":"since we didn't really have time to do that in section or in the problem sets.","startTime":261040,"duration":5480,"startOfParagraph":false},{"content":"The other thing is to dive into some problems from previous years' quizzes","startTime":266520,"duration":5080,"startOfParagraph":false},{"content":"and see what's going on there.","startTime":271600,"duration":2390,"startOfParagraph":false},{"content":"Any preference between the 2? >>[student] I think concrete examples would be more helpful.","startTime":273990,"duration":6220,"startOfParagraph":false},{"content":"Concrete examples more helpful? All right.","startTime":280210,"duration":2610,"startOfParagraph":false},{"content":"Any ones in particular, those of you from the Ajax crew?","startTime":282820,"duration":3480,"startOfParagraph":false},{"content":"Any problems you want to look at?","startTime":286300,"duration":2540,"startOfParagraph":false},{"content":"[student] Is the event handler related to Ajax at all? I think that's--","startTime":288840,"duration":6010,"startOfParagraph":false},{"content":"JavaScript event handlers don't necessarily relate to Ajax. They can.","startTime":294850,"duration":5530,"startOfParagraph":false},{"content":"[student] Yeah, that's another concept that I don't actually get. >>Okay.","startTime":300380,"duration":2860,"startOfParagraph":false},{"content":"[student] But I think in the quiz from the past year there is 1 big problem","startTime":303240,"duration":3430,"startOfParagraph":false},{"content":"in the later parts of the quiz that's related to Ajax and the syntax that I didn't really--","startTime":306670,"duration":5650,"startOfParagraph":false},{"content":"All right. And Ella?","startTime":312320,"duration":2010,"startOfParagraph":false},{"content":"[student] I feel like I know what Ajax is but I wouldn't know how to use it.","startTime":314330,"duration":4620,"startOfParagraph":false},{"content":"Okay. >>[student] I feel like I don't know what Ajax is or how to use it. [laughter]","startTime":318950,"duration":5630,"startOfParagraph":false},{"content":"Okay. That works pretty well.","startTime":324580,"duration":2700,"startOfParagraph":false},{"content":"Let's see. Let's maybe look at a good example of Ajax first.","startTime":327280,"duration":7420,"startOfParagraph":false},{"content":"Welcome, welcome. I hope you are okay on camera.","startTime":334700,"duration":4330,"startOfParagraph":true},{"content":"If not, you can hang out in the back.","startTime":339030,"duration":3130,"startOfParagraph":false},{"content":"Good example of Ajax.","startTime":344610,"duration":3540,"startOfParagraph":true},{"content":"Let me switch over to my laptop.","startTime":351940,"duration":2710,"startOfParagraph":false},{"content":"Here we are at Google.com.","startTime":354650,"duration":3040,"startOfParagraph":false},{"content":"How many of you guys have ever played the fun \"How Do I?\" game on Google?","startTime":357690,"duration":7770,"startOfParagraph":false},{"content":"How do I--and you get to see all the fun things that come up--","startTime":365460,"duration":6480,"startOfParagraph":false},{"content":"put this music on my Tumblr?","startTime":371940,"duration":3260,"startOfParagraph":false},{"content":"And you can keep going and get all this sort of fun stuff.","startTime":375200,"duration":2900,"startOfParagraph":false},{"content":"What is happening here?","startTime":378100,"duration":3280,"startOfParagraph":false},{"content":"As you type in the Google query box, the real-time results are updating.","startTime":381380,"duration":7890,"startOfParagraph":false},{"content":"So put this--and you notice that all of the results start updating on the Google web page.","startTime":389270,"duration":8110,"startOfParagraph":false},{"content":"That's not something that's happening on your computer.","startTime":397380,"duration":6560,"startOfParagraph":false},{"content":"The network is involved in this. Google is involved with this.","startTime":403940,"duration":3930,"startOfParagraph":false},{"content":"It turns out that every time you press a key, like say G or L,","startTime":407870,"duration":8310,"startOfParagraph":false},{"content":"and the search results update, what's happening ","startTime":416180,"duration":2590,"startOfParagraph":false},{"content":"is there is some JavaScript on the page that's detecting that you pressed the key,","startTime":418770,"duration":5430,"startOfParagraph":false},{"content":"and it is making a network request to Google.com to load up all of the latest results","startTime":424200,"duration":10550,"startOfParagraph":false},{"content":"that best fit the query that you've typed so far.","startTime":434750,"duration":3920,"startOfParagraph":false},{"content":"Unfortunately, I believe that if we were to look at this--","startTime":441610,"duration":4080,"startOfParagraph":false},{"content":"I'm going to look at the source--most of this Ajax or JavaScript code in here","startTime":445690,"duration":7000,"startOfParagraph":false},{"content":"is all minified and often scrambled a little bit too.","startTime":452690,"duration":5140,"startOfParagraph":false},{"content":"The minification literally is a program you can run your JavaScript code through","startTime":457830,"duration":5350,"startOfParagraph":false},{"content":"and it changes all your variable names and makes it totally unreadable","startTime":463180,"duration":3440,"startOfParagraph":false},{"content":"but tries to make your JavaScript as short as possible","startTime":466620,"duration":2560,"startOfParagraph":false},{"content":"so that when you send your JavaScript files over the network","startTime":469180,"duration":2910,"startOfParagraph":false},{"content":"you're not having to load or send big files.","startTime":472090,"duration":3870,"startOfParagraph":false},{"content":"So this stuff is pretty hard to read,","startTime":475960,"duration":2000,"startOfParagraph":false},{"content":"but buried in here, what powers this typeahead--the buzzword for this--","startTime":477960,"duration":5490,"startOfParagraph":false},{"content":"is Ajax requests.","startTime":483450,"duration":4000,"startOfParagraph":false},{"content":"What makes an Ajax request different from any other kind of network request?","startTime":487450,"duration":7780,"startOfParagraph":true},{"content":"Sam? >>[student] You don't change the URL. >>[Hardison] Right. Exactly.","startTime":495230,"duration":3590,"startOfParagraph":false},{"content":"You notice as I type, \"how do I put my jawbone in pairing mode?\" [chuckles]","startTime":498820,"duration":6060,"startOfParagraph":false},{"content":"There are always some fun-- Yeah.","startTime":504880,"duration":3220,"startOfParagraph":false},{"content":"You notice that this URL up here at the top isn't changing,","startTime":508100,"duration":2890,"startOfParagraph":false},{"content":"and the entire page isn't refreshing.","startTime":510990,"duration":3290,"startOfParagraph":false},{"content":"So if we look at this kind of stuff right up here, this bar at the top, this Google,","startTime":514280,"duration":5310,"startOfParagraph":false},{"content":"and then the black bar up here, which is often called the chrome of a web page,","startTime":519590,"duration":5040,"startOfParagraph":false},{"content":"that's not changing. The entire page isn't refreshing.","startTime":524630,"duration":4000,"startOfParagraph":false},{"content":"The Ajax request is used to refresh just the results of the page,","startTime":528630,"duration":5260,"startOfParagraph":false},{"content":"just that 1 little part of the page so you're not having to go to an entirely different URL,","startTime":533890,"duration":5560,"startOfParagraph":false},{"content":"an entirely different file, and load that into memory.","startTime":539450,"duration":5240,"startOfParagraph":false},{"content":"So when you hear people talking about the dynamic Web 2.0 type of revolution,","startTime":544690,"duration":7950,"startOfParagraph":false},{"content":"this was behind a lot of it.","startTime":552640,"duration":2730,"startOfParagraph":false},{"content":"This is what enables you to write a wall post on Facebook, hit Post,","startTime":555370,"duration":4430,"startOfParagraph":false},{"content":"and have the post appear without the entire Facebook page refreshing","startTime":559800,"duration":6550,"startOfParagraph":false},{"content":"or scroll through a bunch of photos and load the photos dynamically,","startTime":566350,"duration":7320,"startOfParagraph":false},{"content":"because how much would it suck if you went to your Facebook page,","startTime":573670,"duration":2300,"startOfParagraph":false},{"content":"clicked on Photos, and then had to sit there and wait","startTime":575970,"duration":2160,"startOfParagraph":false},{"content":"while all couple thousand of your Facebook photos loaded into memory?","startTime":578130,"duration":5600,"startOfParagraph":false},{"content":"That's a huge load.","startTime":583730,"duration":1440,"startOfParagraph":false},{"content":"But with Ajax you can do that asynchronously,","startTime":585170,"duration":3190,"startOfParagraph":false},{"content":"and that's the asynchronous part of the Ajax.","startTime":588360,"duration":6450,"startOfParagraph":false},{"content":"All right.","startTime":594810,"duration":2170,"startOfParagraph":true},{"content":"Are we good? Does everybody kind of understand roughly what Ajax is doing?","startTime":599230,"duration":5140,"startOfParagraph":false},{"content":"It's done by the JavaScript, it's done kind of dynamically and asynchronously","startTime":604370,"duration":6300,"startOfParagraph":false},{"content":"after the page is loaded. ","startTime":610670,"duration":1870,"startOfParagraph":false},{"content":"It often comes in after as kind of the response to an event,","startTime":612540,"duration":5470,"startOfParagraph":false},{"content":"which is either a mouse click or a key press or something like that.","startTime":618010,"duration":5850,"startOfParagraph":false},{"content":"And then it makes a call back to the server, whether you're on Google.com","startTime":623860,"duration":6960,"startOfParagraph":false},{"content":"or Facebook.com, retrieves some new content to then display or update","startTime":630820,"duration":5040,"startOfParagraph":false},{"content":"or anything like that.","startTime":635860,"duration":2190,"startOfParagraph":false},{"content":"Cool. All right.","startTime":638050,"duration":2030,"startOfParagraph":true},{"content":"Let's look at a couple of examples from previous years.","startTime":640080,"duration":5180,"startOfParagraph":false},{"content":"We'll go to the quizzes.","startTime":647260,"duration":1880,"startOfParagraph":false},{"content":"And then Charlotte, you were mentioning Quiz 1 from 2011. >>[student] Yeah.","startTime":649140,"duration":5020,"startOfParagraph":false},{"content":"One thing I will caution is that in looking at previous years' quizzes","startTime":654160,"duration":6360,"startOfParagraph":false},{"content":"you'll see this stuff called XHR often with relationship to Ajax.","startTime":660520,"duration":7450,"startOfParagraph":false},{"content":"XHR and XML HttpRequest is kind of the raw way of doing Ajax, if you will.","startTime":667970,"duration":10780,"startOfParagraph":false},{"content":"This year we've transitioned to almost entirely using this jQuery library.","startTime":678750,"duration":6990,"startOfParagraph":false},{"content":"jQuery is a library of helper JavaScript functions and classes and all sorts of goodies,","startTime":685740,"duration":8800,"startOfParagraph":false},{"content":"and jQuery kind of abstracts the raw XHR stuff away from you","startTime":694540,"duration":6190,"startOfParagraph":false},{"content":"so that it's a lot easier to do the actual Ajax stuff.","startTime":700730,"duration":4200,"startOfParagraph":false},{"content":"So as you're scrolling through these previous years' quizzes","startTime":704930,"duration":2090,"startOfParagraph":false},{"content":"and you're seeing stuff that says XHR and new XML HttpRequest,","startTime":707020,"duration":4840,"startOfParagraph":false},{"content":"all that kind of stuff, you can ignore that.","startTime":711860,"duration":2630,"startOfParagraph":false},{"content":"Instead we're going just the jQuery way.","startTime":714490,"duration":2030,"startOfParagraph":false},{"content":"We don't expect you to know XML HttpRequest.","startTime":716520,"duration":3970,"startOfParagraph":false},{"content":"But good to know that it is synonymous with this idea of Ajax,","startTime":720490,"duration":5200,"startOfParagraph":false},{"content":"this Asynchronous JavaScript fetching XML or JSON or whatever over the network.","startTime":725690,"duration":7930,"startOfParagraph":false},{"content":"But originally, it was correlated with XML or connected to XML.","startTime":733620,"duration":6640,"startOfParagraph":false},{"content":"All right.","startTime":740260,"duration":2180,"startOfParagraph":true},{"content":"Let's scroll down. Do you remember which problem in particular, Charlotte?","startTime":744090,"duration":3860,"startOfParagraph":false},{"content":"Was it this page that I'm looking at right here? >>[student] Yeah, I think so.","startTime":753080,"duration":3470,"startOfParagraph":false},{"content":"[Hardison] Ah, I got it. Okay. Yeah.","startTime":756550,"duration":2260,"startOfParagraph":false},{"content":"Let's talk about this really quickly.","startTime":758810,"duration":2850,"startOfParagraph":false},{"content":"The way Ajax works is you've got some JavaScript file on your computer,","startTime":764640,"duration":9220,"startOfParagraph":false},{"content":"and really it's running kind of in the context of your web browser.","startTime":773860,"duration":5710,"startOfParagraph":false},{"content":"So if your final project is to make--I don't know--a new dating site for Harvard people","startTime":779570,"duration":11250,"startOfParagraph":false},{"content":"and you want your dating site to have the ability to send anonymous messages","startTime":790820,"duration":4180,"startOfParagraph":false},{"content":"from person to person or anonymous Facebook wall-like posts","startTime":795000,"duration":4130,"startOfParagraph":false},{"content":"and you want to use Ajax in that somehow so that when you post a message","startTime":799130,"duration":5060,"startOfParagraph":false},{"content":"it doesn't refresh the entire site,","startTime":804190,"duration":2770,"startOfParagraph":false},{"content":"in your JavaScript code you would set up a new Ajax call.","startTime":806960,"duration":5910,"startOfParagraph":false},{"content":"I'm debating about whether or not to do this on the laptop.","startTime":812870,"duration":3700,"startOfParagraph":false},{"content":"The important part about the Ajax call is that there is this kind of asynchronicity to it","startTime":816570,"duration":9370,"startOfParagraph":false},{"content":"in the sense that--let me switch back to my iPad--","startTime":825940,"duration":4310,"startOfParagraph":false},{"content":"in the sense that if I have code that's going to say do some Ajax,","startTime":832120,"duration":15040,"startOfParagraph":false},{"content":"then I can't on the very next line of my JavaScript code","startTime":847160,"duration":4000,"startOfParagraph":false},{"content":"expect that the Ajax will have completed.","startTime":851160,"duration":4010,"startOfParagraph":false},{"content":"What happens is that as your code runs sequentially in JavaScript,","startTime":855170,"duration":9090,"startOfParagraph":false},{"content":"when you make this Ajax call, you're essentially forking off","startTime":864260,"duration":4500,"startOfParagraph":false},{"content":"and sending a request out to the Internet to some server over here,","startTime":868760,"duration":5200,"startOfParagraph":false},{"content":"which is this box I'm drawing and clearly not drawing it very well.","startTime":873960,"duration":3780,"startOfParagraph":false},{"content":"You're forking off this call to the server that's going to take some time","startTime":877740,"duration":3540,"startOfParagraph":false},{"content":"as it goes off to the Internet and goes and hits that server","startTime":881280,"duration":3740,"startOfParagraph":false},{"content":"and goes and calls that PHP script that you've written on the back end","startTime":885020,"duration":4330,"startOfParagraph":false},{"content":"to actually record that anonymous message in your database or something like that.","startTime":889350,"duration":5760,"startOfParagraph":false},{"content":"So that will take some time, and then eventually when the server is done processing","startTime":895110,"duration":6530,"startOfParagraph":false},{"content":"your Ajax request, it will return to your JavaScript code,","startTime":901640,"duration":8450,"startOfParagraph":false},{"content":"but you don't really know where, at what point in the execution","startTime":910090,"duration":5100,"startOfParagraph":false},{"content":"you're going to receive this response.","startTime":915190,"duration":4490,"startOfParagraph":false},{"content":"How is this handled in JavaScript?","startTime":923430,"duration":5190,"startOfParagraph":false},{"content":"This is where it comes into this problem that we're talking about on the laptop","startTime":928620,"duration":7890,"startOfParagraph":false},{"content":"where you register a handler, you register a particular JavaScript function","startTime":936510,"duration":10720,"startOfParagraph":false},{"content":"to run when the Ajax request is finished.","startTime":947230,"duration":5420,"startOfParagraph":false},{"content":"You can't just make your Ajax call and then in the very next line of code","startTime":952650,"duration":5360,"startOfParagraph":false},{"content":"assume that the Ajax call has completed.","startTime":958010,"duration":3560,"startOfParagraph":false},{"content":"Part of the beauty of this is you want your JavaScript to continue to run","startTime":963670,"duration":4640,"startOfParagraph":false},{"content":"after it's made the Ajax call because it can fork off this separate request","startTime":968310,"duration":4900,"startOfParagraph":false},{"content":"and keep processing other things.","startTime":973210,"duration":2540,"startOfParagraph":false},{"content":"You've got this kind of concurrency going here where your JavaScript continues to run","startTime":975750,"duration":3550,"startOfParagraph":false},{"content":"and keep doing other fun things, could continue to spin out other Ajax requests.","startTime":979300,"duration":4220,"startOfParagraph":false},{"content":"Your Ajax requests just go out to the network and then come back whenever they come back,","startTime":983520,"duration":5110,"startOfParagraph":false},{"content":"but when you register this handler function,","startTime":988630,"duration":4760,"startOfParagraph":false},{"content":"that's when you know that your Ajax call has returned because this function gets called.","startTime":993390,"duration":6650,"startOfParagraph":false},{"content":"So instead of having this sequential execution path that we're used to in C,","startTime":1000040,"duration":6000,"startOfParagraph":false},{"content":"you have what's more similar to what we saw in Scratch at the beginning of the semester","startTime":1006040,"duration":5390,"startOfParagraph":false},{"content":"where you have these broadcasts","startTime":1011430,"duration":3160,"startOfParagraph":false},{"content":"and then you have these \"when green flag clicked\" or \"when I receive this event.\"","startTime":1014590,"duration":6340,"startOfParagraph":false},{"content":"That's essentially what's happening here in JavaScript with these Ajax requests.","startTime":1020930,"duration":4100,"startOfParagraph":false},{"content":"For the answer to this question on line 20,","startTime":1028790,"duration":3150,"startOfParagraph":true},{"content":"\"In the context of Ajax, what does this line of code do?\"","startTime":1031940,"duration":3560,"startOfParagraph":false},{"content":"can somebody kind of paraphrase what I just said to confirm understanding?","startTime":1035500,"duration":6839,"startOfParagraph":false},{"content":"[student] I'm sorry. What does the left half of it say?","startTime":1042339,"duration":2291,"startOfParagraph":false},{"content":"[Hardison] xhr.onreadystatechange. Sorry. Am I getting cut off?","startTime":1044630,"duration":3970,"startOfParagraph":false},{"content":"This is that XHR syntax that we won't have to deal with.","startTime":1048600,"duration":2760,"startOfParagraph":false},{"content":"You have the similar concept with the jQuery.","startTime":1051360,"duration":2700,"startOfParagraph":false},{"content":"Let's go to Source Code, Wednesday, Index.","startTime":1054060,"duration":5340,"startOfParagraph":false},{"content":"Let's look this up. All right. Got it.","startTime":1059400,"duration":5620,"startOfParagraph":false},{"content":"Here is that Ajax syntax that we're talking about.","startTime":1068110,"duration":4590,"startOfParagraph":false},{"content":"Here you're specifying the Ajax request.","startTime":1072700,"duration":3570,"startOfParagraph":false},{"content":"You're saying, \"This is the URL I want to go out and ping.\"","startTime":1076270,"duration":7320,"startOfParagraph":false},{"content":"\"I want to use POST as opposed to GET.\"","startTime":1083590,"duration":5660,"startOfParagraph":false},{"content":"And then the data type is \"I want JSON to be returned.\"","startTime":1089250,"duration":4270,"startOfParagraph":false},{"content":"Again, XML was kind of the traditional thing.","startTime":1093520,"duration":2150,"startOfParagraph":false},{"content":"But what we're looking for is that function.","startTime":1095670,"duration":2930,"startOfParagraph":false},{"content":"This is that right here.","startTime":1098600,"duration":2530,"startOfParagraph":false},{"content":"This function(response) is that onreadystatechange.","startTime":1101130,"duration":3740,"startOfParagraph":false},{"content":"This is the handler. This is what will execute when this request comes back.","startTime":1104870,"duration":5430,"startOfParagraph":false},{"content":"So you notice that this function that Tommy has written right here","startTime":1110300,"duration":4730,"startOfParagraph":false},{"content":"that we talked about in lecture on Wednesday was all about creating that fun typeahead for us.","startTime":1115030,"duration":6820,"startOfParagraph":false},{"content":"You notice that what he's doing is he's building the Ajax request","startTime":1121850,"duration":4640,"startOfParagraph":false},{"content":"and then there's nothing after the Ajax request.","startTime":1126490,"duration":6190,"startOfParagraph":false},{"content":"He's not processing the response of the Ajax request after the call is made.","startTime":1132680,"duration":4790,"startOfParagraph":false},{"content":"He's only doing it in this handler function","startTime":1137470,"duration":3300,"startOfParagraph":false},{"content":"that will be called as soon as the response does come back.","startTime":1140770,"duration":4400,"startOfParagraph":false},{"content":"Sam. >>[student] Do Ajax requests have to be of type POST or can it be GET?","startTime":1148330,"duration":4250,"startOfParagraph":true},{"content":"They can be either. >>[student] How would that work if you're not changing the URL?","startTime":1152580,"duration":4390,"startOfParagraph":false},{"content":"How would that work if you're not changing the URL?","startTime":1156970,"duration":5310,"startOfParagraph":false},{"content":"It just depends on where the data is going.","startTime":1162280,"duration":4120,"startOfParagraph":false},{"content":"So the question is can Ajax requests be POST or GET?","startTime":1166400,"duration":4050,"startOfParagraph":false},{"content":"That's where it can be either. It's just really a semantic difference between POST and GET.","startTime":1170450,"duration":7280,"startOfParagraph":false},{"content":"GET typically means that you're just reading something from the server","startTime":1180460,"duration":5210,"startOfParagraph":false},{"content":"and you're not changing anything, whereas a POST typically implies","startTime":1185670,"duration":5270,"startOfParagraph":false},{"content":"that you're writing data or you're writing something to a server.","startTime":1190940,"duration":3450,"startOfParagraph":false},{"content":"Often you use POST when you're trying to change state somewhere.","startTime":1194390,"duration":5110,"startOfParagraph":false},{"content":"That's why logins always go with HTTP POST, ","startTime":1199500,"duration":4900,"startOfParagraph":false},{"content":"whereas Google makes a bunch of GET requests.","startTime":1204400,"duration":3540,"startOfParagraph":false},{"content":"Actually, if we go back to our Google example and if we look at our developer tools here,","startTime":1207940,"duration":11910,"startOfParagraph":false},{"content":"let's look at the developer tools here at the bottom and open up the network.","startTime":1219850,"duration":5510,"startOfParagraph":false},{"content":"As we start typing, you can see all of these GET requests coming in.","startTime":1225360,"duration":7550,"startOfParagraph":false},{"content":"You see all these GET requests here at the bottom of the screen","startTime":1236240,"duration":4020,"startOfParagraph":false},{"content":"that are all of these xjs.","startTime":1240260,"duration":4290,"startOfParagraph":false},{"content":"This is the Ajax request coming back.","startTime":1244550,"duration":7840,"startOfParagraph":false},{"content":"And if we were to click on it, we can see what it's saying and what its response is.","startTime":1252390,"duration":7290,"startOfParagraph":false},{"content":"It's giving us all this information about the response that we got","startTime":1259680,"duration":4510,"startOfParagraph":false},{"content":"when we sent to Google the headers that were down here.","startTime":1264190,"duration":5240,"startOfParagraph":false},{"content":"Let's see if it has-- It will have our query string somewhere.","startTime":1269430,"duration":5950,"startOfParagraph":false},{"content":"Request URL. Yeah.","startTime":1279060,"duration":3250,"startOfParagraph":false},{"content":"Original query, ignore bad query, second pass, how I meter--","startTime":1282310,"duration":9320,"startOfParagraph":false},{"content":"Anyway, somewhere in here you can find this \"how I meter\" query","startTime":1291630,"duration":4270,"startOfParagraph":false},{"content":"in the request made to the server.","startTime":1295900,"duration":3110,"startOfParagraph":false},{"content":"And then the response coming back is what we're seeing.","startTime":1299010,"duration":3470,"startOfParagraph":false},{"content":"So yes, it can be either GET or POST.","startTime":1302480,"duration":2640,"startOfParagraph":false},{"content":"It tends to be just a semantic difference. We can cover that with HTTP. Yes, Ella?","startTime":1305120,"duration":5530,"startOfParagraph":false},{"content":"[student] Is the difference between JSON and XML just that JSON is more modern?","startTime":1310650,"duration":4710,"startOfParagraph":true},{"content":"Is the difference between JSON and XML that JSON is more modern?","startTime":1315360,"duration":5370,"startOfParagraph":false},{"content":"XML and JSON are just 2 different ways of encoding data.","startTime":1324100,"duration":5800,"startOfParagraph":false},{"content":"XML is the Extensible Markup Language.","startTime":1335130,"duration":5410,"startOfParagraph":false},{"content":"HTML is a subset of XML.","startTime":1340540,"duration":8850,"startOfParagraph":false},{"content":"So for example, let's pull up TextEdit.","startTime":1349390,"duration":5260,"startOfParagraph":false},{"content":"XML is just defined as data that's enclosed in a series of tags.","startTime":1354650,"duration":10340,"startOfParagraph":false},{"content":"So html, /html, these guys are valid tags.","startTime":1364990,"duration":7830,"startOfParagraph":false},{"content":"Let's blow up this size here and make it more readable.","startTime":1372820,"duration":4650,"startOfParagraph":false},{"content":"hello!","startTime":1380130,"duration":1940,"startOfParagraph":false},{"content":"XML just defines a tag as being something like this","startTime":1382070,"duration":4230,"startOfParagraph":false},{"content":"where you have an open angle bracket, the name of the tag,","startTime":1386300,"duration":3580,"startOfParagraph":false},{"content":"and then any number of attributes, which in HTML we often don't have attributes.","startTime":1389880,"duration":5990,"startOfParagraph":false},{"content":"But for example, if we had a script tag, often it has the type of text, JavaScript.","startTime":1395870,"duration":9950,"startOfParagraph":false},{"content":"And inside of the tags is data.","startTime":1410130,"duration":5640,"startOfParagraph":false},{"content":"In true XML you can actually define these tags to be whatever you want.","startTime":1417600,"duration":7050,"startOfParagraph":false},{"content":"It's just a way of structuring your information.","startTime":1424650,"duration":2190,"startOfParagraph":false},{"content":"So for example, if I wanted to encode my family in XML,","startTime":1426840,"duration":6960,"startOfParagraph":false},{"content":"I could do something like this, like father and then put information about him","startTime":1433800,"duration":7700,"startOfParagraph":false},{"content":"and brother and put information about my brother.","startTime":1441500,"duration":7740,"startOfParagraph":false},{"content":"Just this way of structuring your data is XML.","startTime":1449240,"duration":9130,"startOfParagraph":false},{"content":"JSON, on the other hand, follows the JavaScript Object Notation,","startTime":1458370,"duration":5850,"startOfParagraph":false},{"content":"hence J-S-O-N, JSON.","startTime":1464220,"duration":2920,"startOfParagraph":false},{"content":"So rather than writing with this kind of tag, close tag type format,","startTime":1467140,"duration":6900,"startOfParagraph":false},{"content":"we instead write it as a JavaScript object.","startTime":1474040,"duration":5250,"startOfParagraph":false},{"content":"So the JavaScript object has the curly brace to open things","startTime":1479290,"duration":5710,"startOfParagraph":false},{"content":"and then a curly brace to close things.","startTime":1485000,"duration":3700,"startOfParagraph":false},{"content":"Let me zoom out a little bit, zoom in.","startTime":1488700,"duration":4880,"startOfParagraph":false},{"content":"And then what you have are the names of fields, so \"father\":","startTime":1493580,"duration":6210,"startOfParagraph":false},{"content":"and then I could put information about him","startTime":1499790,"duration":5690,"startOfParagraph":false},{"content":"and then \"brother\": and information about my brother.","startTime":1505480,"duration":7510,"startOfParagraph":false},{"content":"And of course everything in here is--","startTime":1516930,"duration":6110,"startOfParagraph":false},{"content":"I guess what's nice about JSON as opposed to XML","startTime":1523040,"duration":3300,"startOfParagraph":false},{"content":"is because a JSON object is in this object notation that JavaScript has.","startTime":1526340,"duration":9410,"startOfParagraph":false},{"content":"JavaScript can really easily pull that into memory and treat it just as a JavaScript object","startTime":1535750,"duration":7850,"startOfParagraph":false},{"content":"right when you receive it back from the server.","startTime":1543600,"duration":1900,"startOfParagraph":false},{"content":"There's no parsing that it really has to do that's heavy duty or heavy lifting,","startTime":1545500,"duration":3960,"startOfParagraph":false},{"content":"whereas with XML you have to use either plugins or some sort of--","startTime":1549460,"duration":6230,"startOfParagraph":false},{"content":"Depending on what exactly you're transmitting","startTime":1555690,"duration":3440,"startOfParagraph":false},{"content":"and what you're using to receive the XML, you might have to do a little bit more work parsing,","startTime":1559130,"duration":5640,"startOfParagraph":false},{"content":"whereas this JavaScript stuff, if you're just writing with JavaScript","startTime":1564770,"duration":5320,"startOfParagraph":false},{"content":"and you're receiving JavaScript back, it's really easy to work with.","startTime":1570090,"duration":4690,"startOfParagraph":false},{"content":"The other thing that people will also mention sometimes","startTime":1576590,"duration":3300,"startOfParagraph":false},{"content":"is that with XML you have all of these open tags and close tags,","startTime":1579890,"duration":3740,"startOfParagraph":false},{"content":"so it can get big, it can get a little bloated.","startTime":1583630,"duration":6990,"startOfParagraph":false},{"content":"So there are some who will talk about how with JSON","startTime":1590620,"duration":3370,"startOfParagraph":false},{"content":"you don't have all these open tags and close tags, so it's more compressed.","startTime":1593990,"duration":8290,"startOfParagraph":false},{"content":"The reason that that's important is that when you have to load things over the network","startTime":1602280,"duration":5070,"startOfParagraph":false},{"content":"when you're talking to a remote server,","startTime":1607350,"duration":2690,"startOfParagraph":false},{"content":"the less that needs to be transmitted over the Internet, the faster everything goes.","startTime":1610040,"duration":4970,"startOfParagraph":false},{"content":"Anyway, the key takeaway here is they are just 2 different ways of structuring your data,","startTime":1616890,"duration":2810,"startOfParagraph":false},{"content":"formatting your data.","startTime":1619700,"duration":2450,"startOfParagraph":false},{"content":"All right.","startTime":1624950,"duration":1160,"startOfParagraph":true},{"content":"Other questions? Charlotte?","startTime":1626110,"duration":2120,"startOfParagraph":false},{"content":"[student] Can I ask 1 last question about the syntax of Ajax? >>Sure.","startTime":1628230,"duration":3050,"startOfParagraph":false},{"content":"[student] If you go back to the example code and just zoom out a little bit,","startTime":1631280,"duration":5310,"startOfParagraph":false},{"content":"there's just 1 line of code above.","startTime":1636590,"duration":2690,"startOfParagraph":false},{"content":"Can we just go up? ","startTime":1639280,"duration":2250,"startOfParagraph":false},{"content":"on('keyup', function()","startTime":1641530,"duration":2730,"startOfParagraph":false},{"content":"Is that set of empty parentheses after on('keyup' referring to the function after success?","startTime":1644260,"duration":6410,"startOfParagraph":false},{"content":"[Hardison] No.","startTime":1650670,"duration":2910,"startOfParagraph":false},{"content":"A couple of things here.","startTime":1653580,"duration":1870,"startOfParagraph":false},{"content":"on('keyup', this is a way of doing the equivalent in Scratch","startTime":1655450,"duration":7720,"startOfParagraph":false},{"content":"of when a key is pressed and you lift up off of the key.","startTime":1663170,"duration":7160,"startOfParagraph":false},{"content":"Actually, in JavaScript you have on('keydown', on('keyup', and on('keypress',","startTime":1670330,"duration":7110,"startOfParagraph":false},{"content":"and you can do things on each of those 3 different events.","startTime":1677440,"duration":8900,"startOfParagraph":false},{"content":"This is registering an event handler any time a key comes up,","startTime":1686340,"duration":4720,"startOfParagraph":false},{"content":"and then this function is this entire thing","startTime":1691060,"duration":5150,"startOfParagraph":false},{"content":"all the way down to there.","startTime":1696210,"duration":3350,"startOfParagraph":false},{"content":"This function doesn't have a name.","startTime":1699560,"duration":4320,"startOfParagraph":false},{"content":"Kind of weird.","startTime":1703880,"duration":1700,"startOfParagraph":false},{"content":"All of our functions we've done in C and PHP have all had names.","startTime":1705580,"duration":5920,"startOfParagraph":false},{"content":"This is what we call an anonymous function. Makes sense, right? No name. Anonymous.","startTime":1711500,"duration":8400,"startOfParagraph":false},{"content":"What's handy about the anonymous function?","startTime":1719900,"duration":3650,"startOfParagraph":false},{"content":"Clearly, we can't call this function anywhere else in our code.","startTime":1723550,"duration":4310,"startOfParagraph":false},{"content":"How would we call this function elsewhere in our code? We can't.","startTime":1727860,"duration":6060,"startOfParagraph":false},{"content":"There's no name. I can't say, \"Oh yeah, call that function that I said with on('keyup'.\"","startTime":1736540,"duration":6580,"startOfParagraph":false},{"content":"What's handy about it though is that in JavaScript","startTime":1745080,"duration":3110,"startOfParagraph":false},{"content":"when we are constantly registering these event handlers--","startTime":1748190,"duration":2910,"startOfParagraph":false},{"content":"that's what this is called; you're registering this function as a handler when a key comes up--","startTime":1751100,"duration":6410,"startOfParagraph":false},{"content":"is it's really nice to be able to just define these functions kind of inline and just say,","startTime":1757510,"duration":6320,"startOfParagraph":false},{"content":"\"When the keyup is pressed, remember this function that I'm going to define right here,","startTime":1763830,"duration":5010,"startOfParagraph":false},{"content":"and it will remember this function and then it will do this function","startTime":1768840,"duration":6500,"startOfParagraph":false},{"content":"whenever the key comes up.","startTime":1775340,"duration":2250,"startOfParagraph":false},{"content":"We'll talk about this more once you get more into functional programming.","startTime":1777590,"duration":4340,"startOfParagraph":false},{"content":"This is a little bit of a taste of that where we're essentially passing a function around","startTime":1781930,"duration":4150,"startOfParagraph":false},{"content":"as an object, almost as if it were like a variable.","startTime":1786080,"duration":3880,"startOfParagraph":false},{"content":"Rather than passing a string or an int, we're passing a function.","startTime":1789960,"duration":4450,"startOfParagraph":false},{"content":"That's kind of a weird thing, but what's nice is that all of the variables in here,","startTime":1796000,"duration":4400,"startOfParagraph":false},{"content":"inside of this function, the scoping issues are nice","startTime":1800400,"duration":7620,"startOfParagraph":false},{"content":"because if you have a variable up here, you can refer to that variable inside of this function","startTime":1808020,"duration":10480,"startOfParagraph":false},{"content":"because this function is declared inside of this other function.","startTime":1818500,"duration":4220,"startOfParagraph":false},{"content":"So you get to have benefits like that.","startTime":1822720,"duration":3950,"startOfParagraph":false},{"content":"Again, that's something that is more meta. You'll cover it in future classes.","startTime":1826670,"duration":4620,"startOfParagraph":false},{"content":"Yeah. >>[student] Since the function is anonymous, can it be used somewhere else?","startTime":1831290,"duration":4860,"startOfParagraph":true},{"content":"Or can it only be used in the context of this function?","startTime":1836150,"duration":4600,"startOfParagraph":false},{"content":"[Hardison] It's used only in the context of this function. Yeah. Yes?","startTime":1840750,"duration":4710,"startOfParagraph":false},{"content":"Does it have something to do with the fact that it's an object-oriented language?","startTime":1845460,"duration":3400,"startOfParagraph":true},{"content":"[Hardison] Does it have something to do with the fact that it's object-oriented?","startTime":1848860,"duration":3790,"startOfParagraph":false},{"content":"I would say that this has more to do with the fact that this has functional aspects.","startTime":1858000,"duration":5190,"startOfParagraph":false},{"content":"We're talking about the object-oriented paradigm of programming,","startTime":1863190,"duration":2450,"startOfParagraph":false},{"content":"and this is kind of one of those aspects of the functional paradigm of programming","startTime":1865640,"duration":4250,"startOfParagraph":false},{"content":"where you are making functions that are composed of other functions","startTime":1869890,"duration":7630,"startOfParagraph":false},{"content":"and you are passing functions around.","startTime":1877520,"duration":4940,"startOfParagraph":false},{"content":"[student] So JavaScript is a function language also.","startTime":1882460,"duration":2580,"startOfParagraph":true},{"content":"It has elements of it, yes. Yeah.","startTime":1885040,"duration":3380,"startOfParagraph":false},{"content":"JavaScript and many--","startTime":1888420,"duration":1580,"startOfParagraph":false},{"content":"PHP has some of this too, Python has this same sort of stuff,","startTime":1890000,"duration":5120,"startOfParagraph":false},{"content":"Ruby has this sort of stuff as well, and this is common in more of these modern languages.","startTime":1895120,"duration":8270,"startOfParagraph":false},{"content":"You really get these scripting languages that are kind of jack-of-all-trades.","startTime":1903390,"duration":6270,"startOfParagraph":false},{"content":"It's like the big fatty Swiss Army knife, the one that you can't even put in your pocket","startTime":1909660,"duration":3520,"startOfParagraph":false},{"content":"because it's too wide.","startTime":1913180,"duration":1910,"startOfParagraph":false},{"content":"That's kind of how some of these languages have become.","startTime":1915090,"duration":2880,"startOfParagraph":false},{"content":"Any other questions? All right.","startTime":1921190,"duration":3330,"startOfParagraph":true},{"content":"How are you guys feeling?","startTime":1924520,"duration":1760,"startOfParagraph":false},{"content":"Let's go back to that quiz really quick and see if we can answer 21 and 20.","startTime":1926280,"duration":7550,"startOfParagraph":false},{"content":"We talked about 20 as we registered this handler.","startTime":1933830,"duration":8200,"startOfParagraph":false},{"content":"This question here, \"What would be the effect if we wrote that line with a pair of parentheses?\"","startTime":1942030,"duration":9520,"startOfParagraph":false},{"content":"you see the difference, how up at the top there are no parentheses","startTime":1951550,"duration":3130,"startOfParagraph":false},{"content":"and down here there are parentheses after the function name?","startTime":1954680,"duration":3690,"startOfParagraph":false},{"content":"One thing that is important to note,","startTime":1958370,"duration":5150,"startOfParagraph":false},{"content":"here we're referring to a function.","startTime":1963520,"duration":1890,"startOfParagraph":false},{"content":"This is not an anonymous function. It's been given a name, handler,","startTime":1965410,"duration":3370,"startOfParagraph":false},{"content":"whereas in our Ajax over here that we were just looking at,","startTime":1968780,"duration":3800,"startOfParagraph":false},{"content":"all of the functions that we were passing around were all anonymous: no function name,","startTime":1972580,"duration":5680,"startOfParagraph":false},{"content":"no function name.","startTime":1978260,"duration":2140,"startOfParagraph":false},{"content":"So it is common practice to define these functions kind of inline as anonymous functions","startTime":1980400,"duration":5270,"startOfParagraph":false},{"content":"for some of the scoping benefits.","startTime":1985670,"duration":2990,"startOfParagraph":false},{"content":"You could very well have defined this function right here or this on('keyup' function.","startTime":1988660,"duration":6680,"startOfParagraph":false},{"content":"You could have defined this guy as functions with names elsewhere in your JavaScript code,","startTime":1995340,"duration":7060,"startOfParagraph":false},{"content":"and then instead of defining the function here, you would pass the name of the function","startTime":2002400,"duration":5250,"startOfParagraph":false},{"content":"right in this spot.","startTime":2007650,"duration":3670,"startOfParagraph":false},{"content":"One thing to note is that you wouldn't want to use the parentheses","startTime":2011320,"duration":5250,"startOfParagraph":false},{"content":"if you were passing the name of the function,","startTime":2016570,"duration":2830,"startOfParagraph":false},{"content":"because when you use the parentheses, you're implying \"call this function,\"","startTime":2019400,"duration":5080,"startOfParagraph":false},{"content":"whereas instead here we just want to pass the name of the function.","startTime":2024480,"duration":4340,"startOfParagraph":false},{"content":"If we look at what's going on here, the big difference is that this top line of code says","startTime":2033740,"duration":8660,"startOfParagraph":false},{"content":"effectively, maintain a pointer to the function called handler,","startTime":2042400,"duration":6020,"startOfParagraph":false},{"content":"and when the Ajax call completes, call this function,","startTime":2048420,"duration":3400,"startOfParagraph":false},{"content":"actually perform the function, plug in the arguments, do all of that work,","startTime":2051820,"duration":5390,"startOfParagraph":false},{"content":"whereas this line down here says instead of maintaining a pointer","startTime":2057210,"duration":6270,"startOfParagraph":false},{"content":"to the function called handler, this onreadystatechange field","startTime":2063480,"duration":6909,"startOfParagraph":false},{"content":"is going to hold the result of a function called to handler,","startTime":2070389,"duration":3591,"startOfParagraph":false},{"content":"so it's going to evaluate handler, it's going to actually call handler right now--","startTime":2073980,"duration":4429,"startOfParagraph":false},{"content":"not when the Ajax call completes but right now,","startTime":2078409,"duration":2841,"startOfParagraph":false},{"content":"which is not what you want to do if you're writing something","startTime":2081250,"duration":2690,"startOfParagraph":false},{"content":"to deal with an Ajax call that's completed.","startTime":2083940,"duration":4210,"startOfParagraph":false},{"content":"All right. Questions about that? It's a subtle difference.","startTime":2096520,"duration":5730,"startOfParagraph":true},{"content":"It's a subtle difference.","startTime":2103640,"duration":2700,"startOfParagraph":false},{"content":"One thing I would definitely suggest doing if you haven't done it--","startTime":2106340,"duration":3370,"startOfParagraph":false},{"content":"because this is new stuff; it takes a while for it to really sink in","startTime":2109710,"duration":5330,"startOfParagraph":false},{"content":"unless you actually type some of this stuff out--","startTime":2115040,"duration":2800,"startOfParagraph":false},{"content":"I'd encourage you to go through the source code","startTime":2117840,"duration":5500,"startOfParagraph":false},{"content":"that Tommy presented in lecture on Wednesday","startTime":2123340,"duration":2270,"startOfParagraph":false},{"content":"because he definitely went through a lot of stuff, kind of in a blur.","startTime":2125610,"duration":5080,"startOfParagraph":false},{"content":"I'd actually try typing it out.","startTime":2130690,"duration":2290,"startOfParagraph":false},{"content":"Try coding some stuff up.","startTime":2132980,"duration":2140,"startOfParagraph":false},{"content":"Make a .js file. Type out the code yourself. Don't just copy and paste.","startTime":2135120,"duration":5410,"startOfParagraph":false},{"content":"Don't just run CP.","startTime":2140530,"duration":2360,"startOfParagraph":false},{"content":"Try doing that just to kind of flex your JavaScript muscle.","startTime":2142890,"duration":4490,"startOfParagraph":false},{"content":"See what the things are.","startTime":2147380,"duration":2110,"startOfParagraph":false},{"content":"For example, here I'm looking at quote7.js in the source code from Wednesday's lecture.","startTime":2149490,"duration":9340,"startOfParagraph":false},{"content":"Try going in and instead of just making all of these functions anonymous,","startTime":2158830,"duration":5320,"startOfParagraph":false},{"content":"copy this code, literally go down to this success code,","startTime":2164150,"duration":6320,"startOfParagraph":false},{"content":"copy this, paste it into another function, and give it a name,","startTime":2170470,"duration":6800,"startOfParagraph":false},{"content":"and then try passing the name in and see what happens.","startTime":2177270,"duration":5100,"startOfParagraph":false},{"content":"[student] Could that be in a separate file or in the same file?","startTime":2182370,"duration":3950,"startOfParagraph":false},{"content":"It could be in a separate file if you properly include it.","startTime":2186320,"duration":3580,"startOfParagraph":false},{"content":"One thing that's going to be--","startTime":2189900,"duration":4270,"startOfParagraph":false},{"content":"The trick is does this function refer to any of the variables that are outside of it?","startTime":2194170,"duration":8600,"startOfParagraph":false},{"content":"And I think it only refers to response.","startTime":2202770,"duration":7220,"startOfParagraph":false},{"content":"Yeah.","startTime":2209990,"duration":1650,"startOfParagraph":false},{"content":"You can name this.","startTime":2216360,"duration":2920,"startOfParagraph":false},{"content":"You can pull it out, you can give it a name, and then you can pass the name in here.","startTime":2219280,"duration":3870,"startOfParagraph":false},{"content":"So I'd give that a try, see how that works.","startTime":2223150,"duration":4240,"startOfParagraph":false},{"content":"All right. Questions? Questions? I love questions.","startTime":2229990,"duration":3540,"startOfParagraph":true},{"content":"I don't know about you guys, but I like them.","startTime":2233530,"duration":2930,"startOfParagraph":false},{"content":"How are you guys feeling about this?","startTime":2239120,"duration":2200,"startOfParagraph":false},{"content":"There's kind of this, \"Oh, crap\" mood in the room. [students chuckle]","startTime":2241320,"duration":5590,"startOfParagraph":false},{"content":"Is that kind of how you guys are feeling? >>[student] Yeah. >>Yeah? Yes, Daniel?","startTime":2246910,"duration":5120,"startOfParagraph":false},{"content":"[student] I think I understand kind of the overall concepts that you're talking about,","startTime":2252030,"duration":3240,"startOfParagraph":true},{"content":"like the anonymous functions and all this stuff,","startTime":2255270,"duration":2650,"startOfParagraph":false},{"content":"but I don't understand half the syntax that's up there right now,","startTime":2257920,"duration":4570,"startOfParagraph":false},{"content":"like what ul means, li, these different tags.","startTime":2262490,"duration":4020,"startOfParagraph":false},{"content":"I don't think I'd be able to code something with JavaScript. >>Fair.","startTime":2266510,"duration":5330,"startOfParagraph":false},{"content":"Is that a common feeling, common sentiment, it sounds like? Okay.","startTime":2271840,"duration":8120,"startOfParagraph":false},{"content":"[student] Will we need to? >>Will we need to code?","startTime":2279960,"duration":3410,"startOfParagraph":false},{"content":"You should be prepared to dissect something like this, I would say.","startTime":2283370,"duration":5910,"startOfParagraph":false},{"content":"I'm not the one writing the exam,","startTime":2289280,"duration":6270,"startOfParagraph":false},{"content":"but I would definitely say that if that is a common sentiment,","startTime":2295550,"duration":3220,"startOfParagraph":false},{"content":"kind of that a lot of this syntax here looks like, \"What the hell is going on?\"","startTime":2298770,"duration":4250,"startOfParagraph":false},{"content":"\"I'm totally swimming,\" then let's talk about that and fix that.","startTime":2303020,"duration":4880,"startOfParagraph":false},{"content":"Sound good?","startTime":2309080,"duration":1440,"startOfParagraph":false},{"content":"All right.","startTime":2310520,"duration":1630,"startOfParagraph":false},{"content":"So what's going on here? Let's take this line by line.","startTime":2312150,"duration":4400,"startOfParagraph":true},{"content":"Let's try going around the room.","startTime":2316550,"duration":1750,"startOfParagraph":false},{"content":"I'm just going to call on people 1 by 1, and give me your best guess.","startTime":2318300,"duration":3140,"startOfParagraph":false},{"content":"We'll do it fast. You've got 5 seconds to answer.","startTime":2321440,"duration":3030,"startOfParagraph":false},{"content":"If you don't answer, we move to the next person.","startTime":2324470,"duration":1660,"startOfParagraph":false},{"content":"And it's not a big deal because I know this is crazy stuff.","startTime":2326130,"duration":2330,"startOfParagraph":false},{"content":"We'll start over here. Charlotte, what does this line do?","startTime":2328460,"duration":4060,"startOfParagraph":false},{"content":"[student] It's creating a variable called suggestions","startTime":2332520,"duration":1930,"startOfParagraph":false},{"content":"and setting it equal to whatever ul is. >>[Hardison] Right.","startTime":2334450,"duration":3440,"startOfParagraph":false},{"content":"Jimmy, what is ul?","startTime":2337890,"duration":4330,"startOfParagraph":true},{"content":"[student] I don't know. >>[Hardison] Okay, cool. Charlotte was totally right.","startTime":2342220,"duration":5520,"startOfParagraph":false},{"content":"This line of code that I've highlighted right here declares a variable called suggestions,","startTime":2347740,"duration":3940,"startOfParagraph":false},{"content":"a JavaScript variable.","startTime":2351680,"duration":2030,"startOfParagraph":false},{"content":"We've got this var keyword in front which makes sure that the variable stays local","startTime":2353710,"duration":5050,"startOfParagraph":false},{"content":"to the scope that it's in.","startTime":2358760,"duration":2380,"startOfParagraph":false},{"content":"And this ul thing that we haven't seen before really,","startTime":2361140,"duration":7350,"startOfParagraph":false},{"content":"let's see if there's a good-- Let me switch back to my iPad.","startTime":2368490,"duration":5800,"startOfParagraph":false},{"content":"New page.","startTime":2376270,"duration":1590,"startOfParagraph":false},{"content":"I'm sure you guys have seen the ul before.","startTime":2377860,"duration":2840,"startOfParagraph":false},{"content":"It's an unordered list.","startTime":2380700,"duration":1920,"startOfParagraph":false},{"content":"So have you ever seen on a web page where you have the bullets","startTime":2382620,"duration":2970,"startOfParagraph":false},{"content":"and you have Thing 1, Thing 2, and so on and so forth?","startTime":2385590,"duration":11380,"startOfParagraph":false},{"content":"This is an unordered list.","startTime":2396970,"duration":3800,"startOfParagraph":false},{"content":"The way you would code this in HTML is you'd start with an open tag","startTime":2400770,"duration":8350,"startOfParagraph":false},{"content":"that opens the unordered list, you'd close it with a close tag that closes the unordered list,","startTime":2409120,"duration":9940,"startOfParagraph":false},{"content":"and then in the middle you'd have to list items, li.","startTime":2419060,"duration":12760,"startOfParagraph":false},{"content":"And inside the li's would be the text to display, so Thing 1 and Thing 2.","startTime":2431820,"duration":11290,"startOfParagraph":false},{"content":"Then we'd close our list item tags.","startTime":2443110,"duration":6290,"startOfParagraph":false},{"content":"Unordered lists are super common because it's a great way to get the same styling","startTime":2454130,"duration":6980,"startOfParagraph":false},{"content":"applied to a row of things.","startTime":2461110,"duration":2610,"startOfParagraph":false},{"content":"So if you look in, for example, the pset 7 code,","startTime":2463720,"duration":4450,"startOfParagraph":false},{"content":"a lot of the nav pills, the navigation pills that were used for the different links","startTime":2468170,"duration":4540,"startOfParagraph":false},{"content":"to Buy, Sell, Quote, History, all of that, those are implemented as unordered lists,","startTime":2472710,"duration":6030,"startOfParagraph":false},{"content":"and they used CSS to remove these bullet points","startTime":2478740,"duration":4420,"startOfParagraph":false},{"content":"and kind of change things around slightly.","startTime":2483160,"duration":4370,"startOfParagraph":false},{"content":"That's kind of the power of the CSS is that the HTML describes the structure.","startTime":2487530,"duration":6390,"startOfParagraph":false},{"content":"We've got a list of list items.","startTime":2493920,"duration":2760,"startOfParagraph":false},{"content":"It's unordered. There's no first, second, or third. It's just a list.","startTime":2496680,"duration":4680,"startOfParagraph":false},{"content":"And so by default it will draw it with just bullets.","startTime":2501360,"duration":3660,"startOfParagraph":false},{"content":"If we instead had written ol, so I'm going to change this to an ol list","startTime":2505020,"duration":5250,"startOfParagraph":false},{"content":"as opposed to a ul, what would that do?","startTime":2510270,"duration":3600,"startOfParagraph":false},{"content":"It would get rid of these bullets, and the default would instead be a numbered list","startTime":2513870,"duration":7970,"startOfParagraph":false},{"content":"because now we've got ordering.","startTime":2521840,"duration":2180,"startOfParagraph":false},{"content":"The styling of the list is then what you play around with in CSS,","startTime":2529700,"duration":5140,"startOfParagraph":false},{"content":"and that's where the folks who wrote the Bootstrap library for CSS played around","startTime":2534840,"duration":6780,"startOfParagraph":false},{"content":"with the styling of an unordered list to get it to display those nice little nav pills.","startTime":2541620,"duration":8410,"startOfParagraph":false},{"content":"If we look at Google, for example, let's take a look at this guy.","startTime":2550030,"duration":3700,"startOfParagraph":false},{"content":"Back to \"how I meter your mother\"--sounds kind of German.","startTime":2553730,"duration":4720,"startOfParagraph":false},{"content":"I love German. It sounds so fun.","startTime":2558450,"duration":5040,"startOfParagraph":false},{"content":"I'm sorry if there are any German folks watching who feel offended.","startTime":2563490,"duration":3550,"startOfParagraph":false},{"content":"Anyway, if we look at these links up here at the top","startTime":2567040,"duration":4510,"startOfParagraph":false},{"content":"and we look at what's going on there, we can inspect it using this guy.","startTime":2571550,"duration":6060,"startOfParagraph":false},{"content":"I'm way down here in the corner.","startTime":2577610,"duration":1820,"startOfParagraph":false},{"content":"Developer tools on Chrome is awesome.","startTime":2579430,"duration":2260,"startOfParagraph":false},{"content":"If you guys start to play around with it or look up tutorials for it, it will help a lot","startTime":2581690,"duration":4090,"startOfParagraph":false},{"content":"if you're doing web-based projects.","startTime":2585780,"duration":1840,"startOfParagraph":false},{"content":"I click my little inspector. I'm going to scroll back up here.","startTime":2587620,"duration":3100,"startOfParagraph":false},{"content":"I'm going to see what all these guys are.","startTime":2590720,"duration":4960,"startOfParagraph":false},{"content":"I zoom in. I'm going to click on these.","startTime":2595680,"duration":3620,"startOfParagraph":false},{"content":"Then I can zoom back out and see what it actually is in the HTML way down here.","startTime":2599300,"duration":6550,"startOfParagraph":false},{"content":"It looks like Google has nested it in an ordered list.","startTime":2605850,"duration":4200,"startOfParagraph":false},{"content":"So we've got this span that says +You, and that's nested inside an anchor tag,","startTime":2610050,"duration":6170,"startOfParagraph":false},{"content":"so that's what makes it clickable and it links it to my Google+ page.","startTime":2616220,"duration":4810,"startOfParagraph":false},{"content":"It's nested inside a list item,","startTime":2621030,"duration":6100,"startOfParagraph":false},{"content":"and it's nested inside this ordered list.","startTime":2627130,"duration":2540,"startOfParagraph":false},{"content":"And now if I actually click the list item, it will highlight it for me up there.","startTime":2629670,"duration":5390,"startOfParagraph":false},{"content":"If I highlight the unordered list, you see how the focus goes at the top.","startTime":2635060,"duration":4470,"startOfParagraph":false},{"content":"It shifts up and shows me the entire ordered list.","startTime":2639530,"duration":3930,"startOfParagraph":false},{"content":"So Google has just played around with the styling to get these lists to show up like that.","startTime":2643460,"duration":4920,"startOfParagraph":false},{"content":"That's enough fun with lists. Back to the quiz or this stuff.","startTime":2648380,"duration":7130,"startOfParagraph":false},{"content":"Now we know what an unordered list is--hopefully.","startTime":2655510,"duration":3750,"startOfParagraph":false},{"content":"Let's talk about this next line of code, for (var i in response.symbols). Ella.","startTime":2659260,"duration":9430,"startOfParagraph":true},{"content":"[student] I have no idea. >>[Hardison] No idea.","startTime":2668690,"duration":7290,"startOfParagraph":false},{"content":"Okay. You've seen a for loop before, I presume. >>[student] Yeah.","startTime":2675980,"duration":4310,"startOfParagraph":false},{"content":"[Hardison] Do you remember doing for each in PHP? >>[student] Yes.","startTime":2680290,"duration":3640,"startOfParagraph":false},{"content":"[Hardison] This is exactly that.","startTime":2683930,"duration":2410,"startOfParagraph":false},{"content":"This is a for each loop in JavaScript.","startTime":2686340,"duration":4870,"startOfParagraph":false},{"content":"This is a shorter way than doing the for (var i=0; i<response.symbols.length; i++),","startTime":2691210,"duration":9650,"startOfParagraph":false},{"content":"which we could do,","startTime":2700860,"duration":3540,"startOfParagraph":false},{"content":"but this is a more concise way of writing it.","startTime":2704400,"duration":4220,"startOfParagraph":false},{"content":"One thing to be careful of in JavaScript is that this doesn't necessarily follow the order.","startTime":2708620,"duration":8910,"startOfParagraph":false},{"content":"If response.symbols is presumably an array,","startTime":2717530,"duration":5500,"startOfParagraph":false},{"content":"var i will be an index into this array, but it isn't necessarily the 0 and then the 1","startTime":2723030,"duration":10110,"startOfParagraph":false},{"content":"and then the 2 and then the 3.","startTime":2733140,"duration":3200,"startOfParagraph":false},{"content":"They do say use the for (var i=0) if you care about the ordering.","startTime":2736340,"duration":11020,"startOfParagraph":false},{"content":"I guess the other thing to note is that when we used a for each in PHP,","startTime":2747360,"duration":8500,"startOfParagraph":false},{"content":"we specified the array name first and then we had the as keyword","startTime":2755860,"duration":7610,"startOfParagraph":false},{"content":"and then we specified the value that we wanted to retrieve from the array.","startTime":2763470,"duration":4020,"startOfParagraph":false},{"content":"Or we could specify both the key and the value that we wanted to retrieve from the array.","startTime":2767490,"duration":5190,"startOfParagraph":false},{"content":"Here we're just getting the index.","startTime":2772680,"duration":4050,"startOfParagraph":false},{"content":"We're not getting the actual element itself.","startTime":2776730,"duration":5360,"startOfParagraph":false},{"content":"So you see that when we go down here we are actually having to retrieve the ith element","startTime":2782090,"duration":7420,"startOfParagraph":false},{"content":"out of the response.symbols object.","startTime":2789510,"duration":5300,"startOfParagraph":false},{"content":"The other thing that's crazy about this is you can use this to loop over objects in JavaScript","startTime":2797680,"duration":8720,"startOfParagraph":false},{"content":"and retrieve each of the properties of that object 1 by 1.","startTime":2806400,"duration":5670,"startOfParagraph":false},{"content":"If we went back to that JavaScript Object Notation depiction of my family","startTime":2812070,"duration":5880,"startOfParagraph":false},{"content":"where it was literally those curly braces and father, brother, mother, all that,","startTime":2817950,"duration":5330,"startOfParagraph":false},{"content":"you could use a for loop to iterate over that as well","startTime":2823280,"duration":3140,"startOfParagraph":false},{"content":"and retrieve the properties 1 by 1.","startTime":2826420,"duration":3710,"startOfParagraph":false},{"content":"Kind of crazy.","startTime":2830130,"duration":1980,"startOfParagraph":false},{"content":"So what we're doing, it looks like, is we're building up an HTML string","startTime":2834120,"duration":4080,"startOfParagraph":false},{"content":"just like this comment says, \"build html string for a list of suggestions.\"","startTime":2838200,"duration":4020,"startOfParagraph":false},{"content":"We're going to start out with our open tag for our unordered list","startTime":2842220,"duration":4120,"startOfParagraph":false},{"content":"in which we presume we're going to store all the suggestions as list items.","startTime":2846340,"duration":3770,"startOfParagraph":false},{"content":"Then we're going to loop over all of the symbols in the response","startTime":2850110,"duration":6380,"startOfParagraph":false},{"content":"because remember this is a typeahead for CS50 Finance,","startTime":2856490,"duration":2740,"startOfParagraph":false},{"content":"so we're pulling out the stock symbols 1 by 1.","startTime":2859230,"duration":4950,"startOfParagraph":false},{"content":"And then we're adding to our suggestions string what?","startTime":2864180,"duration":6230,"startOfParagraph":false},{"content":"Jared, what does this look like?","startTime":2870410,"duration":3470,"startOfParagraph":true},{"content":"[student] It seems like it's grabbing from some kind of database","startTime":2873880,"duration":6260,"startOfParagraph":false},{"content":"whatever letter you're typing in,","startTime":2880140,"duration":2110,"startOfParagraph":false},{"content":"leaving some kind of suggestion what word-- >>[Hardison] Yeah.","startTime":2882250,"duration":4390,"startOfParagraph":false},{"content":"The Ajax request already actually did go and grab that. This is our response.","startTime":2886640,"duration":3850,"startOfParagraph":false},{"content":"This is actually after we've gotten the response from the database, from the server.","startTime":2890490,"duration":4400,"startOfParagraph":false},{"content":"And so what is this? What does this single quote thing denote?","startTime":2894890,"duration":5260,"startOfParagraph":true},{"content":"[student] The single quote? >>[Hardison] Yeah. It's just a string, right?","startTime":2900150,"duration":3840,"startOfParagraph":false},{"content":"And so what is this crafting?","startTime":2903990,"duration":2940,"startOfParagraph":false},{"content":"It's a string and we're putting stuff in the string. And what is the string looking like?","startTime":2906930,"duration":4150,"startOfParagraph":false},{"content":"[student] Just the suggestion that we're-- >>[Hardison] Yeah, exactly.","startTime":2911080,"duration":4060,"startOfParagraph":false},{"content":"It's the suggestion nested inside an anchor tag,","startTime":2915140,"duration":7910,"startOfParagraph":false},{"content":"and that is also anchored inside a list item so that it will go inside the list.","startTime":2923050,"duration":6520,"startOfParagraph":false},{"content":"Literally, all we're doing here is we're just building up a big HTML string.","startTime":2929570,"duration":7220,"startOfParagraph":false},{"content":"We're just building it up literally as a string in memory.","startTime":2936790,"duration":5780,"startOfParagraph":false},{"content":"We're not doing anything fancy.","startTime":2942570,"duration":2170,"startOfParagraph":false},{"content":"We're not creating new nodes in the DOM or anything like that.","startTime":2944740,"duration":4920,"startOfParagraph":false},{"content":"We're literally just building a string as if you were to write out, for example,","startTime":2949660,"duration":5370,"startOfParagraph":false},{"content":"on your iPad like I have--in case you guys have an iPad and like writing HTML on your iPad--","startTime":2955030,"duration":6190,"startOfParagraph":false},{"content":"you're just writing a big long string that's like ul, li, a...","startTime":2961220,"duration":12030,"startOfParagraph":false},{"content":"and then we're of course going to terminate it with this ul.","startTime":2973250,"duration":5190,"startOfParagraph":false},{"content":"So that's all we're getting is 1 big, massive string.","startTime":2978440,"duration":2970,"startOfParagraph":false},{"content":"And inside there's an li and an a for each of the symbols that we found.","startTime":2983750,"duration":7430,"startOfParagraph":false},{"content":"And now, continuing on, what does this line do, Stella, right here?","startTime":2994210,"duration":7550,"startOfParagraph":true},{"content":"What does this line do right here?","startTime":3001760,"duration":4910,"startOfParagraph":false},{"content":"[inaudible student response]","startTime":3006670,"duration":4890,"startOfParagraph":false},{"content":"[Hardison] Yeah. It's just adding this guy.","startTime":3011560,"duration":3410,"startOfParagraph":false},{"content":"We're just ending our list. Exactly.","startTime":3014970,"duration":2680,"startOfParagraph":false},{"content":"And then this final line--and this looks kind of goofy--","startTime":3017650,"duration":7780,"startOfParagraph":true},{"content":"I'm sorry. I don't know your name in the red sweatshirt. Do you know what this does?","startTime":3025430,"duration":4800,"startOfParagraph":false},{"content":"Or are you going to decide no?","startTime":3030230,"duration":3040,"startOfParagraph":false},{"content":"And you? >>[student] It calls jQuery on it, but I don't exactly know which function it is.","startTime":3033270,"duration":5290,"startOfParagraph":false},{"content":"[Hardison] Yeah. It calls jQuery.","startTime":3038560,"duration":1930,"startOfParagraph":false},{"content":"How about anybody here over on the left side of me?","startTime":3040490,"duration":2380,"startOfParagraph":false},{"content":"Do you know what this line does? What does it seem like it's doing if you had to guess?","startTime":3042870,"duration":8240,"startOfParagraph":false},{"content":"[student] Submitting to the HTML the list of suggestions, or is it--","startTime":3051110,"duration":6510,"startOfParagraph":false},{"content":"Yeah. What do you mean by submitting?","startTime":3057620,"duration":1790,"startOfParagraph":false},{"content":"[student] Saying to HTML what we just dealt with in JavaScript","startTime":3059410,"duration":4960,"startOfParagraph":false},{"content":"is now definitely just HTML. >>[Hardison] Yeah.","startTime":3064370,"duration":3190,"startOfParagraph":false},{"content":"That's a great start.","startTime":3067560,"duration":3040,"startOfParagraph":false},{"content":"Let's dissect this a little more.","startTime":3070600,"duration":1500,"startOfParagraph":false},{"content":"That's exactly what this part is doing right here.","startTime":3072100,"duration":2040,"startOfParagraph":false},{"content":"[student] What aspect of it makes it clear that it's jQuery?","startTime":3074140,"duration":3520,"startOfParagraph":false},{"content":"[Hardison] jQuery is this dollar sign guy.","startTime":3077660,"duration":2720,"startOfParagraph":false},{"content":"Whenever you're writing jQuery, you will see this dollar sign all over the place.","startTime":3080380,"duration":5250,"startOfParagraph":false},{"content":"This has just been used in jQuery as kind of a special symbol.","startTime":3085630,"duration":10390,"startOfParagraph":false},{"content":"It does a whole bunch of things.","startTime":3096020,"duration":2260,"startOfParagraph":false},{"content":"In the context of this right here, this part of the line, it is a selector.","startTime":3098280,"duration":8700,"startOfParagraph":false},{"content":"It is the jQuery selector, and it is selecting the HTML element","startTime":3106980,"duration":6370,"startOfParagraph":false},{"content":"that has the ID suggestions.","startTime":3113350,"duration":5090,"startOfParagraph":false},{"content":"Remember how HTML elements can have that ID attribute","startTime":3118440,"duration":3290,"startOfParagraph":false},{"content":"where you can have a paragraph tag that has ID suggestions?","startTime":3121730,"duration":5190,"startOfParagraph":false},{"content":"This jQuery selector will grab that element","startTime":3126920,"duration":6460,"startOfParagraph":false},{"content":"because that element has to exist somewhere in memory.","startTime":3133380,"duration":4620,"startOfParagraph":false},{"content":"JavaScript is able to kind of pinpoint that element and say,","startTime":3138000,"duration":3120,"startOfParagraph":false},{"content":"\"Oh, okay, you are the paragraph that has this ID,\"","startTime":3141120,"duration":3710,"startOfParagraph":false},{"content":"and then this .html says, \"Okay, replace the current HTML inside of you","startTime":3144830,"duration":10110,"startOfParagraph":false},{"content":"\"with this new string, this new HTML that I'm going to give you.\"","startTime":3154940,"duration":6270,"startOfParagraph":false},{"content":"So if we look back over at the iPad--ha, ha, I remembered to switch this time--","startTime":3161210,"duration":8740,"startOfParagraph":false},{"content":"you often insert into things like divs, so imagine we had a div that had id=\"suggestions\";","startTime":3169950,"duration":17520,"startOfParagraph":false},{"content":"We're going to close the div tag down here.","startTime":3187470,"duration":5610,"startOfParagraph":false},{"content":"When we use the jQuery selector to grab the element in the DOM","startTime":3193080,"duration":8420,"startOfParagraph":false},{"content":"that has the ID of suggestions, it literally selects this entire div right here,","startTime":3201500,"duration":7770,"startOfParagraph":false},{"content":"and then the HTML method says, \"Replace all of this stuff right in here","startTime":3209270,"duration":8650,"startOfParagraph":false},{"content":"\"right in that ul, that unordered list that we just built up.\"","startTime":3217920,"duration":3920,"startOfParagraph":false},{"content":"Literally, if you were viewing the entire HTML file's string in memory,","startTime":3221840,"duration":5330,"startOfParagraph":false},{"content":"you would just say, \"Go into that spot and plunk in that ul stuff,\"","startTime":3227170,"duration":4580,"startOfParagraph":false},{"content":"and then update the page so that you now see the unordered list there.","startTime":3231750,"duration":5460,"startOfParagraph":false},{"content":"So what this has effectively done is it's dynamically updated this div.","startTime":3237210,"duration":7300,"startOfParagraph":false},{"content":"The code that we just saw on the laptop has updated this div","startTime":3244510,"duration":4470,"startOfParagraph":false},{"content":"to hold the new suggestions that were retrieved from the server somewhere.","startTime":3248980,"duration":4780,"startOfParagraph":false},{"content":"[student] Which suggestions represents the new suggestions and the old suggestions?","startTime":3253760,"duration":5030,"startOfParagraph":false},{"content":"The new suggestions and the old suggestions.","startTime":3258790,"duration":2280,"startOfParagraph":false},{"content":"[student] What represents which one is being replaced and which one is doing the replacing?","startTime":3261070,"duration":3880,"startOfParagraph":false},{"content":"[Hardison] Got it.","startTime":3264950,"duration":1450,"startOfParagraph":false},{"content":"See right here, this guy is a string.","startTime":3266400,"duration":2710,"startOfParagraph":false},{"content":"This specifies the ID of an element--we call it in the DOM--","startTime":3269110,"duration":5470,"startOfParagraph":false},{"content":"which literally just means some HTML element that is somewhere being displayed","startTime":3274580,"duration":5990,"startOfParagraph":false},{"content":"on the web page.","startTime":3280570,"duration":1920,"startOfParagraph":false},{"content":"If we were to look at this, if we go back to our Google page,","startTime":3282490,"duration":5340,"startOfParagraph":false},{"content":"we see all these divs and these ol's and these li's and these a's.","startTime":3287830,"duration":5630,"startOfParagraph":false},{"content":"These all constitute the HTML elements that currently make up this page.","startTime":3293460,"duration":6560,"startOfParagraph":false},{"content":"These all correlate to individual elements on the page.","startTime":3300020,"duration":8120,"startOfParagraph":false},{"content":"And if we were to change this, you would watch the DOM change,","startTime":3308140,"duration":5510,"startOfParagraph":false},{"content":"and you can see this kind of shifting.","startTime":3313650,"duration":2570,"startOfParagraph":false},{"content":"So if we were to type Harvard, you'd see the DOM start to change","startTime":3316220,"duration":4380,"startOfParagraph":false},{"content":"and the list elements starting to change in here.","startTime":3320600,"duration":4370,"startOfParagraph":false},{"content":"That's actually what's happening.","startTime":3324970,"duration":1910,"startOfParagraph":false},{"content":"Let's see if we can find some of this stuff right in here.","startTime":3326880,"duration":8140,"startOfParagraph":true},{"content":"Let's look at this link. Let's look at this Harvard Wikipedia link, and we'll watch it change.","startTime":3335020,"duration":6470,"startOfParagraph":false},{"content":"We can see that as I've selected this, it corresponds to this div right here,","startTime":3341490,"duration":6670,"startOfParagraph":false},{"content":"which is also part of a list element, which is right next to another list element,","startTime":3348160,"duration":4520,"startOfParagraph":false},{"content":"which is part of the unordered list here.","startTime":3352680,"duration":3820,"startOfParagraph":false},{"content":"Now what happens if we search for our lesser school a little down south?","startTime":3356500,"duration":10970,"startOfParagraph":false},{"content":"It now changes.","startTime":3367470,"duration":1570,"startOfParagraph":false},{"content":"So we lost our handle on that div and that list element","startTime":3369040,"duration":4420,"startOfParagraph":false},{"content":"because now we have different elements in our DOM,","startTime":3373460,"duration":5550,"startOfParagraph":false},{"content":"different list elements, different list items, different lengths, all of that.","startTime":3379010,"duration":5270,"startOfParagraph":false},{"content":"So this HTML document is being dynamically updated.","startTime":3384280,"duration":4470,"startOfParagraph":false},{"content":"Old elements are being deleted, new elements are being added.","startTime":3388750,"duration":4490,"startOfParagraph":false},{"content":"Back here we're just specifying this element, which presumably will be stable","startTime":3393240,"duration":9360,"startOfParagraph":false},{"content":"throughout our typeahead update,","startTime":3402600,"duration":2270,"startOfParagraph":false},{"content":"because otherwise if jQuery can't find an element that has an ID of suggestions,","startTime":3404870,"duration":5400,"startOfParagraph":false},{"content":"it'll just crash at this point.","startTime":3410270,"duration":3050,"startOfParagraph":false},{"content":"And then we're updating its inner HTML.","startTime":3413320,"duration":3700,"startOfParagraph":false},{"content":"So it's these list items, these anchor tags that will constantly update and refresh as you type.","startTime":3417020,"duration":6950,"startOfParagraph":false},{"content":"Does that do a better job? >>[student] That helps a lot. >>[Hardison] Okay.","startTime":3430440,"duration":5310,"startOfParagraph":false},{"content":"The syntax that you'll see a lot--know what this guy does.","startTime":3435750,"duration":8460,"startOfParagraph":false},{"content":"Know the jQuery selector.","startTime":3444210,"duration":3600,"startOfParagraph":false},{"content":"This jQuery selector with a hash tag in front implies an ID.","startTime":3447810,"duration":8800,"startOfParagraph":false},{"content":"This guy says, \"Get me the element that has the ID suggestions.\"","startTime":3456610,"duration":5800,"startOfParagraph":false},{"content":"This guy down here also says, \"Get me that same element with ID suggestions.\"","startTime":3468440,"duration":8040,"startOfParagraph":false},{"content":"This guy below it is slightly more complex.","startTime":3476480,"duration":6870,"startOfParagraph":false},{"content":"This says, \"Get me the element with ID form-quote,","startTime":3483350,"duration":9070,"startOfParagraph":false},{"content":"\"but then go inside that form and find the child\"--","startTime":3492420,"duration":8760,"startOfParagraph":false},{"content":"so this space right here implies that we're going to a child element, a nested element.","startTime":3501180,"duration":4530,"startOfParagraph":false},{"content":"\"Find the form that has this ID and then find the input inside that form whose name is symbol.\"","startTime":3505710,"duration":7840,"startOfParagraph":false},{"content":"This is definitely in Tommy's lecture slides, these different types of jQuery selectors.","startTime":3518410,"duration":6640,"startOfParagraph":false},{"content":"You should know what kinds of elements these are retrieving.","startTime":3525050,"duration":5440,"startOfParagraph":false},{"content":"For example, let's switch back to the iPad really quickly.","startTime":3531970,"duration":2620,"startOfParagraph":false},{"content":"If we had a form element with id=\"form-quote\"--","startTime":3538450,"duration":16520,"startOfParagraph":false},{"content":"of course that's missing the method=POST or method=GET and action attributes as well","startTime":3554970,"duration":6140,"startOfParagraph":false},{"content":"that you should have on forms, but just for this example a form, as you know, has inputs","startTime":3561110,"duration":15900,"startOfParagraph":false},{"content":"and that code that we just saw would get the input element","startTime":3577010,"duration":14850,"startOfParagraph":false},{"content":"that had name=\"symbol\".","startTime":3591860,"duration":5720,"startOfParagraph":false},{"content":"This is important when you're trying to fill different fields inside of your form.","startTime":3597580,"duration":5390,"startOfParagraph":false},{"content":"This is how auto-filling works.","startTime":3602970,"duration":4470,"startOfParagraph":false},{"content":"Yes, Ella?","startTime":3607440,"duration":2060,"startOfParagraph":true},{"content":"[student] What's the difference between an ID and a class? >>An ID and a class? Yeah.","startTime":3609500,"duration":6550,"startOfParagraph":false},{"content":"A class is used for styling purposes.","startTime":3616050,"duration":5920,"startOfParagraph":false},{"content":"An ID is used for what it sounds like: uniquely identifying a particular element.","startTime":3621970,"duration":7150,"startOfParagraph":false},{"content":"So within an HTML page, you can only have 1 element with a particular ID.","startTime":3629120,"duration":8490,"startOfParagraph":false},{"content":"There's only 1 form with the ID form-quote.","startTime":3640370,"duration":5750,"startOfParagraph":false},{"content":"However, the nav pills class or nav class was probably something that you used","startTime":3646120,"duration":10820,"startOfParagraph":false},{"content":"possibly or saw in the context of your Problem Set 7 code.","startTime":3656940,"duration":4440,"startOfParagraph":false},{"content":"A class is used to apply a particular styling to a bunch of different elements.","startTime":3661380,"duration":9960,"startOfParagraph":false},{"content":"For example, in the old days of HTML before there were style sheets,","startTime":3671340,"duration":6240,"startOfParagraph":false},{"content":"before there was CSS, these Cascading Style Sheets,","startTime":3677580,"duration":3860,"startOfParagraph":false},{"content":"if you wanted to center a paragraph or center the text in a div,","startTime":3681440,"duration":8100,"startOfParagraph":false},{"content":"you'd have a div and then you'd have something like text-align=\"center\"","startTime":3689540,"duration":14400,"startOfParagraph":false},{"content":"as like an attribute within your div.","startTime":3703940,"duration":7350,"startOfParagraph":false},{"content":"This is no good.","startTime":3711290,"duration":3200,"startOfParagraph":false},{"content":"The reason people didn't like this is because then when you wanted to update","startTime":3714490,"duration":3400,"startOfParagraph":false},{"content":"how things displayed on your website, you had to literally go into every page","startTime":3717890,"duration":4070,"startOfParagraph":false},{"content":"and every HTML file and go change all the stylings on all the different elements,","startTime":3721960,"duration":4270,"startOfParagraph":false},{"content":"and it was a huge pain because often you wanted to have a bunch of divs","startTime":3726230,"duration":4190,"startOfParagraph":false},{"content":"that were all center aligned or fit a certain way.","startTime":3730420,"duration":4670,"startOfParagraph":false},{"content":"So the solution to that was the class.","startTime":3735090,"duration":3670,"startOfParagraph":false},{"content":"Now we have a div where we have the class specified to be whatever you want to call it.","startTime":3738760,"duration":9360,"startOfParagraph":false},{"content":"You could call it \"centered\"; and close your div somewhere down here","startTime":3748120,"duration":11040,"startOfParagraph":false},{"content":"and you have all your fun stuff in there.","startTime":3759160,"duration":3230,"startOfParagraph":false},{"content":"And then somewhere in your style sheet you would specify a particular styling","startTime":3762390,"duration":5260,"startOfParagraph":false},{"content":"that would apply to this class.","startTime":3767650,"duration":4330,"startOfParagraph":false},{"content":"This didn't have to be the only div that was centered.","startTime":3771980,"duration":5300,"startOfParagraph":false},{"content":"You could have other divs that also had centered text.","startTime":3777280,"duration":4960,"startOfParagraph":false},{"content":"Yes, Charlotte? >>[student] Going back to the quote, what does the dot mean?","startTime":3786580,"duration":3400,"startOfParagraph":true},{"content":"What is the dot? >>[student] Yeah.","startTime":3789980,"duration":3140,"startOfParagraph":false},{"content":"Back to the laptop, you mean? >>[student] Yeah. >>Okay.","startTime":3794000,"duration":3900,"startOfParagraph":false},{"content":"[student] For instance, in this line does that mean that there is this variable called val","startTime":3797900,"duration":6020,"startOfParagraph":false},{"content":"inside of the form? >>Yeah.","startTime":3803920,"duration":3810,"startOfParagraph":false},{"content":"The dot notation in JavaScript does a couple of things.","startTime":3807730,"duration":6960,"startOfParagraph":false},{"content":"In this case you are calling a function whose name is val.","startTime":3814690,"duration":8840,"startOfParagraph":false},{"content":"It's a method.","startTime":3823530,"duration":2430,"startOfParagraph":false},{"content":"This is where we get into the object-oriented stuff that we were talking about, Sam.","startTime":3825960,"duration":4190,"startOfParagraph":false},{"content":"This is where object--in this case the input element--has a function or a method called val","startTime":3830150,"duration":10690,"startOfParagraph":false},{"content":"that basically says, \"Hey, set your value to be this thing.\"","startTime":3840840,"duration":9640,"startOfParagraph":false},{"content":"Imagine that instead of this gobbledygook we had written the number 7 or the string 7.","startTime":3855120,"duration":3930,"startOfParagraph":false},{"content":"That would change the value of this input element to be 7.","startTime":3859050,"duration":4770,"startOfParagraph":false},{"content":"[student] The input element being everything in front of the dot?","startTime":3863820,"duration":2210,"startOfParagraph":false},{"content":"[Hardison] The input element, exactly, being the element within the HTML,","startTime":3866030,"duration":3160,"startOfParagraph":false},{"content":"within the DOM, that matches this query.","startTime":3869190,"duration":4040,"startOfParagraph":false},{"content":"[student] So it's input element .function and then what that value should be.","startTime":3873230,"duration":3920,"startOfParagraph":false},{"content":"[Hardison] Exactly. >>[student] Okay.","startTime":3877150,"duration":2210,"startOfParagraph":false},{"content":"And you also use this to access properties.","startTime":3879360,"duration":3420,"startOfParagraph":false},{"content":"So if we look back up at the code that we were walking through line by line","startTime":3882780,"duration":4910,"startOfParagraph":false},{"content":"where we have response.symbols[i].name,","startTime":3887690,"duration":7140,"startOfParagraph":false},{"content":"we're not calling a function here.","startTime":3894830,"duration":3770,"startOfParagraph":false},{"content":"There are no parentheses.","startTime":3898600,"duration":3670,"startOfParagraph":false},{"content":"One thing you should just keep in mind as you rip through this code,","startTime":3902270,"duration":2950,"startOfParagraph":false},{"content":"when you see parentheses, that means function call.","startTime":3905220,"duration":4640,"startOfParagraph":false},{"content":"A function is being called,","startTime":3909860,"duration":2480,"startOfParagraph":false},{"content":"and the name of that function is whatever precedes those parentheses.","startTime":3912340,"duration":3570,"startOfParagraph":false},{"content":"So in this case down below, it's val. In this case right here it's html.","startTime":3915910,"duration":5570,"startOfParagraph":false},{"content":"In this case right here the name of the function is literally $,","startTime":3921480,"duration":10220,"startOfParagraph":false},{"content":"and we just know that this is the jQuery selector,","startTime":3931700,"duration":3470,"startOfParagraph":false},{"content":"it's the function that is selecting whatever this guy is.","startTime":3935170,"duration":4920,"startOfParagraph":false},{"content":"And then when you don't see parentheses, like here or here,","startTime":3940090,"duration":6940,"startOfParagraph":false},{"content":"what you're accessing instead is a property of the object.","startTime":3947030,"duration":4660,"startOfParagraph":false},{"content":"This is like using the array notation.","startTime":3951690,"duration":2220,"startOfParagraph":false},{"content":"It's an alternative to using the array notation.","startTime":3953910,"duration":5370,"startOfParagraph":false},{"content":"It's just a shorthand.","startTime":3959280,"duration":3160,"startOfParagraph":false},{"content":"So we're accessing the symbols field of the response object.","startTime":3966680,"duration":10370,"startOfParagraph":false},{"content":"We've done a lot on Ajax, DOM, some HTML, not much CSS.","startTime":3981590,"duration":7570,"startOfParagraph":true},{"content":"Do you guys want to spend the last 15 minutes or so on this?","startTime":3989160,"duration":5210,"startOfParagraph":false},{"content":"I guess we've really got about 10 minutes before we need to start wrapping up.","startTime":3994370,"duration":3620,"startOfParagraph":false},{"content":"Or should we go back and talk about some of the other things on our list?","startTime":3997990,"duration":6200,"startOfParagraph":false},{"content":"Let's see.","startTime":4004190,"duration":2610,"startOfParagraph":false},{"content":"If we go back to the beginning, we switch over to my iPad again so you guys can see this,","startTime":4006800,"duration":5380,"startOfParagraph":false},{"content":"we've done a lot of Ajax, we've done some jQuery,","startTime":4012180,"duration":5660,"startOfParagraph":false},{"content":"we've done some JSON, we've done some XML, we've done some DOM,","startTime":4017840,"duration":3140,"startOfParagraph":false},{"content":"we've done some--nope, not HTTP. Scratch that.","startTime":4020980,"duration":4530,"startOfParagraph":false},{"content":"Not much scope. We sort of talked about CSS--not really.","startTime":4025510,"duration":5130,"startOfParagraph":false},{"content":"Do you guys feel good on Ajax? Do you want to spend more time on Ajax?","startTime":4033200,"duration":3340,"startOfParagraph":false},{"content":"Show of hands. Okay.","startTime":4036540,"duration":2650,"startOfParagraph":false},{"content":"DOM? Anybody want to spend more time on DOM?","startTime":4039190,"duration":3070,"startOfParagraph":false},{"content":"The easiest way to really get a feel for what's going on with the DOM--","startTime":4042260,"duration":4700,"startOfParagraph":false},{"content":"people talk about the DOM and throw around, \"Oh, the DOM this, the DOM that.\"","startTime":4046960,"duration":7550,"startOfParagraph":false},{"content":"Really the DOM is just the way all of these HTML elements are held in memory.","startTime":4054510,"duration":11400,"startOfParagraph":false},{"content":"and it's just explaining--that's what it is.","startTime":4065910,"duration":3400,"startOfParagraph":false},{"content":"It's structured like a tree, and you can access individual HTML elements","startTime":4069310,"duration":6390,"startOfParagraph":false},{"content":"with that jQuery selector, that dollar sign thingy.","startTime":4075700,"duration":3150,"startOfParagraph":false},{"content":"You can manipulate things. You can add elements to the DOM.","startTime":4078850,"duration":3880,"startOfParagraph":false},{"content":"You can add a new paragraph element to the DOM,","startTime":4082730,"duration":2190,"startOfParagraph":false},{"content":"you can take away a div element from the DOM if you want.","startTime":4084920,"duration":4360,"startOfParagraph":false},{"content":"That's all it is. It's just kind of the in memory representation of your HTML file.","startTime":4089280,"duration":6360,"startOfParagraph":false},{"content":"It can be manipulated and traversed.","startTime":4095640,"duration":3790,"startOfParagraph":false},{"content":"How about jQuery and that selector? Yes, Sam?","startTime":4099430,"duration":3810,"startOfParagraph":false},{"content":"[student] Does that mean that the DOM includes all of your CSS and JavaScript?","startTime":4103240,"duration":5000,"startOfParagraph":true},{"content":"[Hardison] The DOM includes those nodes, yes.","startTime":4108240,"duration":4489,"startOfParagraph":false},{"content":"[student] It includes the HTML that those other auxiliary documents output?","startTime":4112729,"duration":5541,"startOfParagraph":false},{"content":"If JavaScript modifies the HTML like it was doing in this Google--","startTime":4118270,"duration":8980,"startOfParagraph":false},{"content":"oops, sorry, I'm not back on that.","startTime":4127250,"duration":2910,"startOfParagraph":false},{"content":"Remember how JavaScript would modify the list of Google results?","startTime":4130160,"duration":5260,"startOfParagraph":false},{"content":"If JavaScript modifies that, then those new list elements are now part of the DOM.","startTime":4135420,"duration":8859,"startOfParagraph":false},{"content":"They were injected into the DOM.","startTime":4144279,"duration":2711,"startOfParagraph":false},{"content":"And it turns out that the scripts and the style sheets themselves","startTime":4146990,"duration":3119,"startOfParagraph":false},{"content":"are indeed part of the DOM.","startTime":4150109,"duration":1721,"startOfParagraph":false},{"content":"You see down here that we've got these script nodes and these style nodes.","startTime":4151830,"duration":5989,"startOfParagraph":false},{"content":"JavaScript can add and delete these too.","startTime":4157819,"duration":3981,"startOfParagraph":false},{"content":"This is why it's so bad to have malicious JavaScript on your page","startTime":4161800,"duration":3750,"startOfParagraph":false},{"content":"is that it can now start bringing in other JavaScript from other places.","startTime":4165550,"duration":4950,"startOfParagraph":false},{"content":"So you can start out with just 1 JavaScript file,","startTime":4170500,"duration":3580,"startOfParagraph":false},{"content":"but then it can start pulling in other JavaScript files.","startTime":4174080,"duration":3109,"startOfParagraph":false},{"content":"You can use Ajax to load in JavaScript and dynamically have new JavaScript","startTime":4177189,"duration":5141,"startOfParagraph":false},{"content":"running on your web page.","startTime":4182330,"duration":2699,"startOfParagraph":false},{"content":"So it's a really powerful thing that our browsers are able to kind of constantly re-render","startTime":4185029,"duration":5651,"startOfParagraph":false},{"content":"and re-adapt whatever is being generated by JavaScript.","startTime":4190680,"duration":5600,"startOfParagraph":false},{"content":"[student] Those style tags are contained in CSS?","startTime":4198740,"duration":2710,"startOfParagraph":true},{"content":"Let's look at it. Yeah.","startTime":4201450,"duration":2650,"startOfParagraph":false},{"content":"This CSS, again you can see where jQuery got its selector from.","startTime":4204100,"duration":4380,"startOfParagraph":false},{"content":"We've got this #gb which is saying, \"This styling applies to an element with ID gb.\"","startTime":4208480,"duration":10280,"startOfParagraph":false},{"content":"\"An element with ID gb is going to have this size font with this font family,","startTime":4218760,"duration":5570,"startOfParagraph":false},{"content":"\"sans-serif; height.\"","startTime":4224330,"duration":3820,"startOfParagraph":false},{"content":"Okay.","startTime":4232340,"duration":1310,"startOfParagraph":true},{"content":"Back to the iPad.","startTime":4233650,"duration":2360,"startOfParagraph":false},{"content":"How about data structures--tries, linked lists?","startTime":4237330,"duration":3220,"startOfParagraph":false},{"content":"Do you guys want to do a quick refresher on that, or are you guys feeling--","startTime":4240550,"duration":4150,"startOfParagraph":false},{"content":"Yea? Nay? Who wants data structures? Raise your hand.","startTime":4244700,"duration":4240,"startOfParagraph":false},{"content":"Who hates data structures? >>[student] I only want tries. >>You only want tries.","startTime":4248940,"duration":3840,"startOfParagraph":false},{"content":"Okay.","startTime":4252780,"duration":2340,"startOfParagraph":false},{"content":"Does anybody not want tries? Is everybody like, \"I hate tries. I did it. I tried it.\"","startTime":4255120,"duration":5480,"startOfParagraph":false},{"content":"[student] I just want to know about the omega and big O.","startTime":4260600,"duration":2330,"startOfParagraph":false},{"content":"Okay. We can definitely go over that.","startTime":4262930,"duration":2670,"startOfParagraph":false},{"content":"Does that sound like something that we want to do as a group? Yes? Sort of? No?","startTime":4265600,"duration":5690,"startOfParagraph":false},{"content":"How about HTTP? Does that seem like something more people want to do?","startTime":4271290,"duration":6800,"startOfParagraph":true},{"content":"Or are you kind of, \"Eh.\" Let's do HTTP first.","startTime":4278090,"duration":4210,"startOfParagraph":false},{"content":"How many of you guys have seen David's ridiculously awesome HTTP short? Anybody?","startTime":4284850,"duration":7160,"startOfParagraph":false},{"content":"I've seen it a whole bunch.","startTime":4292010,"duration":1940,"startOfParagraph":false},{"content":"It was one of the first ones we did, and so it was like our demo this summer.","startTime":4293950,"duration":3940,"startOfParagraph":false},{"content":"Dan's seen it a bunch too, Dan the Man back there.","startTime":4297890,"duration":2860,"startOfParagraph":false},{"content":"HTTP and then there's this HTTPS thing that we've been talking about a little bit.","startTime":4303150,"duration":7670,"startOfParagraph":false},{"content":"What do you need to know about HTTP?","startTime":4310820,"duration":2200,"startOfParagraph":false},{"content":"It's literally just the protocol for interacting with a web server.","startTime":4313020,"duration":7200,"startOfParagraph":false},{"content":"When you want to talk to Google.com, you're talking to another computer over a network,","startTime":4320220,"duration":9640,"startOfParagraph":false},{"content":"what do you do?","startTime":4329860,"duration":3810,"startOfParagraph":false},{"content":"Let's maybe do this.","startTime":4333670,"duration":2490,"startOfParagraph":false},{"content":"Let me pull up a terminal.","startTime":4336160,"duration":3260,"startOfParagraph":false},{"content":"Here's my little terminal window.","startTime":4339420,"duration":2400,"startOfParagraph":false},{"content":"We can do something like telnet, which allows us to actually start a connection to Google.com.","startTime":4341820,"duration":9650,"startOfParagraph":false},{"content":"This is not something you need to know,","startTime":4351470,"duration":2010,"startOfParagraph":false},{"content":"but it's just to illustrate what's happening with the HTTP.","startTime":4353480,"duration":2350,"startOfParagraph":false},{"content":"www.google.com, port 80.","startTime":4355830,"duration":6530,"startOfParagraph":false},{"content":"What is this doing?","startTime":4362360,"duration":2500,"startOfParagraph":false},{"content":"It's making an Internet connection between my computer and Google.","startTime":4364860,"duration":4940,"startOfParagraph":false},{"content":"And it's actually connecting to 173.194.75.99, which is some computer,","startTime":4369800,"duration":6280,"startOfParagraph":false},{"content":"some Google server living somewhere probably out here,","startTime":4376080,"duration":6710,"startOfParagraph":false},{"content":"though it might be all the way back in California.","startTime":4382790,"duration":2810,"startOfParagraph":false},{"content":"Now I'm connected.","startTime":4385600,"duration":2720,"startOfParagraph":false},{"content":"Okay, that's all good.","startTime":4388320,"duration":2490,"startOfParagraph":false},{"content":"But when you go to Google.com, typically you expect Google.com,","startTime":4390810,"duration":4450,"startOfParagraph":false},{"content":"some HTML to show up, right? Not just this.","startTime":4395260,"duration":4120,"startOfParagraph":false},{"content":"The problem is I want to say, \"GIVE ME GOOGLE.COM\" or whatever.","startTime":4399380,"duration":8360,"startOfParagraph":false},{"content":"But if I say that, nothing happens.","startTime":4407740,"duration":6580,"startOfParagraph":false},{"content":"In fact, if I hit Enter a couple of times, it comes back and it says,","startTime":4414320,"duration":4890,"startOfParagraph":false},{"content":"\"That was a bad request.\"","startTime":4419210,"duration":3720,"startOfParagraph":false},{"content":"This was saying, \"No, no, no, no, no, no, no, no, no.\"","startTime":4422930,"duration":3340,"startOfParagraph":false},{"content":"\"You can't just put stuff in. You actually have to speak HTTP to me.\"","startTime":4426270,"duration":5580,"startOfParagraph":false},{"content":"\"You have to format your request as an HTTP request, as a GET or a POST","startTime":4431850,"duration":4500,"startOfParagraph":false},{"content":"\"or something like that.\"","startTime":4436350,"duration":1830,"startOfParagraph":false},{"content":"\"And then I'll return the proper HTML to you.\"","startTime":4438180,"duration":3860,"startOfParagraph":false},{"content":"So you see what it gave me in this case.","startTime":4442040,"duration":2030,"startOfParagraph":false},{"content":"It gave me HTML that if I copy it and I textedit html, if I put it in here,","startTime":4444070,"duration":20100,"startOfParagraph":false},{"content":"and I save it as test.html--oh, come on.","startTime":4464170,"duration":8870,"startOfParagraph":false},{"content":"Web page. There we go.","startTime":4473040,"duration":2970,"startOfParagraph":false},{"content":"Now if I open Downloads/test.html, now it gave me the bad--","startTime":4476010,"duration":10300,"startOfParagraph":false},{"content":"It didn't quite render it as HTML.","startTime":4486310,"duration":5330,"startOfParagraph":false},{"content":"It looks like it didn't close it. Here, let's see.","startTime":4491640,"duration":3250,"startOfParagraph":false},{"content":"Nope. Okay.","startTime":4500610,"duration":2290,"startOfParagraph":false},{"content":"It's not going to render. Anyway, not going to figure that out.","startTime":4502900,"duration":4430,"startOfParagraph":false},{"content":"But anyway, what it is doing is it's returning to me the HTML,","startTime":4507330,"duration":2750,"startOfParagraph":false},{"content":"but it's saying essentially, \"You didn't give me a proper HTTP request.\"","startTime":4510080,"duration":5720,"startOfParagraph":false},{"content":"So what do we need to know about HTTP?","startTime":4515800,"duration":5010,"startOfParagraph":false},{"content":"It's the way of formatting requests to web servers to get, typically, HTML in response.","startTime":4520810,"duration":6810,"startOfParagraph":false},{"content":"The other thing to note is that when you make a request to a web server,","startTime":4527620,"duration":9430,"startOfParagraph":true},{"content":"you have to specify the HTTP method that you want to use.","startTime":4537050,"duration":8600,"startOfParagraph":false},{"content":"We talked about this a little bit earlier, where the 2 big ones that we see","startTime":4545650,"duration":3080,"startOfParagraph":false},{"content":"are GET and POST.","startTime":4548730,"duration":3440,"startOfParagraph":false},{"content":"There are also a whole bunch of other ones.","startTime":4552170,"duration":1540,"startOfParagraph":false},{"content":"There's HEAD and PUT and DELETE and all of these other things,","startTime":4553710,"duration":4710,"startOfParagraph":false},{"content":"but GET and POST are the 2 main ones.","startTime":4558420,"duration":1990,"startOfParagraph":false},{"content":"Where do you see those crop up? When you're writing forms.","startTime":4560410,"duration":3700,"startOfParagraph":false},{"content":"When you're writing HTML forms, you have to specify the HTTP method","startTime":4564110,"duration":3890,"startOfParagraph":false},{"content":"by which you want that form data to be transmitted.","startTime":4568000,"duration":3270,"startOfParagraph":false},{"content":"And then you see it on the server side when you're writing PHP code","startTime":4571270,"duration":3730,"startOfParagraph":false},{"content":"when you handle the data and you have to look in the POST superglobal","startTime":4575000,"duration":4850,"startOfParagraph":false},{"content":"or the GET superglobal to retrieve the data that was submitted by the user.","startTime":4579850,"duration":5010,"startOfParagraph":false},{"content":"And the difference between GET and POST is that GET modifies the actual URL","startTime":4584860,"duration":8040,"startOfParagraph":false},{"content":"and for the most part you can see what parameters were passed to a GET request","startTime":4592900,"duration":7990,"startOfParagraph":false},{"content":"very easily just by looking in the URL, whereas with a POST request","startTime":4600890,"duration":4690,"startOfParagraph":false},{"content":"you don't transmit the parameters of the request in the URL.","startTime":4605580,"duration":7300,"startOfParagraph":false},{"content":"But they're not encrypted or anything unless you're going over HTTPS.","startTime":4612880,"duration":5730,"startOfParagraph":false},{"content":"The POST parameters are just part of the--","startTime":4618610,"duration":3520,"startOfParagraph":false},{"content":"They don't go in the URL, effectively.","startTime":4622130,"duration":3620,"startOfParagraph":false},{"content":"We tend to just kind of semantically separate the 2,","startTime":4625750,"duration":4570,"startOfParagraph":false},{"content":"which just says that really, you can do the same thing with GET that you can with POST.","startTime":4630320,"duration":4950,"startOfParagraph":false},{"content":"You can do the same thing. It's just that we use them in different situations.","startTime":4635270,"duration":4930,"startOfParagraph":false},{"content":"We use GET when we're trying to just read something and we're just saying,","startTime":4640200,"duration":3130,"startOfParagraph":false},{"content":"\"Give me this data.\"","startTime":4643330,"duration":1570,"startOfParagraph":false},{"content":"And we use POST typically when we're trying to update something on the server.","startTime":4644900,"duration":3770,"startOfParagraph":false},{"content":"That's why whenever you go to Google.com and we were doing that typeahead","startTime":4648670,"duration":3230,"startOfParagraph":false},{"content":"we saw all those GET requests","startTime":4651900,"duration":1570,"startOfParagraph":false},{"content":"because we were literally just retrieving information from Google,","startTime":4653470,"duration":3490,"startOfParagraph":false},{"content":"whereas if you make a Facebook wall post, you're going to be using,","startTime":4656960,"duration":6750,"startOfParagraph":false},{"content":"most likely, an HTTP POST method to send that data and make a change to Facebook","startTime":4663710,"duration":8280,"startOfParagraph":false},{"content":"in your wall, your friend's wall.","startTime":4671990,"duration":4230,"startOfParagraph":false},{"content":"Let's see.","startTime":4676220,"duration":2290,"startOfParagraph":false},{"content":"I guess the difference with HTTPS is that it is HTTP but encrypted.","startTime":4680360,"duration":9670,"startOfParagraph":false},{"content":"[chuckles] Secure.","startTime":4690030,"duration":2930,"startOfParagraph":false},{"content":"Yeah. And there are a lot of fun details about that.","startTime":4692960,"duration":3860,"startOfParagraph":false},{"content":"Questions?","startTime":4698560,"duration":2540,"startOfParagraph":true},{"content":"We need to start wrapping up, and so we'll do some data structures on the side. Charlotte?","startTime":4701100,"duration":6930,"startOfParagraph":false},{"content":"[student] What's included in the HTTP header files from the host to the method","startTime":4708030,"duration":4240,"startOfParagraph":false},{"content":"and the method and the number? >>Ah.","startTime":4712270,"duration":3210,"startOfParagraph":false},{"content":"The best way to look at it is to go to your Network tab","startTime":4715480,"duration":4580,"startOfParagraph":false},{"content":" and just see what happens when you just go to Google.com.","startTime":4720060,"duration":8260,"startOfParagraph":false},{"content":"You can come down here and you can see all of the different HTTP requests that were made.","startTime":4728320,"duration":6980,"startOfParagraph":false},{"content":"Google.com.","startTime":4735300,"duration":2700,"startOfParagraph":false},{"content":"The first one was I tried to go to Google.com and it said,","startTime":4738000,"duration":4690,"startOfParagraph":false},{"content":"\"Oh, Google.com doesn't really exist.\"","startTime":4742690,"duration":2580,"startOfParagraph":false},{"content":"\"Where you really want to go is to www.google.com.\"","startTime":4745270,"duration":3430,"startOfParagraph":false},{"content":"So I got redirected here.","startTime":4748700,"duration":1310,"startOfParagraph":false},{"content":"That's where I got this 301 then I got the 200 OK.","startTime":4750010,"duration":3010,"startOfParagraph":false},{"content":"So what is in here, in your headers?","startTime":4753020,"duration":4220,"startOfParagraph":false},{"content":"It says this is the URL to which I made the request, the request method,","startTime":4757240,"duration":4600,"startOfParagraph":false},{"content":"and then the status code.","startTime":4761840,"duration":2710,"startOfParagraph":false},{"content":"Those are the 3 biggies.","startTime":4764550,"duration":1520,"startOfParagraph":false},{"content":"The other things in here, cookies,","startTime":4766070,"duration":4120,"startOfParagraph":false},{"content":"cookies are handy for figuring out the session, if somebody is logged in or not.","startTime":4770190,"duration":6940,"startOfParagraph":false},{"content":"They're also handy for tracking people. This is how websites track you all over the place.","startTime":4777130,"duration":4880,"startOfParagraph":false},{"content":"They put cookies on your computer.","startTime":4782010,"duration":2610,"startOfParagraph":false},{"content":"They're trained to recognize other websites' cookies if they can.","startTime":4784620,"duration":3700,"startOfParagraph":false},{"content":"And then there's this other stuff that says the user agent right here.","startTime":4788320,"duration":4320,"startOfParagraph":false},{"content":"This user agent string identifies my computer to Google.com and says,","startTime":4792640,"duration":4850,"startOfParagraph":false},{"content":"\"Google.com, just so you know, some dude running this browser","startTime":4797490,"duration":5520,"startOfParagraph":false},{"content":"\"on Intel Mac 10_8_2 just went to Google.com.\"","startTime":4803010,"duration":5040,"startOfParagraph":false},{"content":"And then these Accept things just say, \"What is my computer,","startTime":4808050,"duration":4510,"startOfParagraph":false},{"content":"\"what is my web browser prepared to accept?\"","startTime":4812560,"duration":2030,"startOfParagraph":false},{"content":"It can accept HTML, it can accept XML, all this other stuff.","startTime":4814590,"duration":6310,"startOfParagraph":false},{"content":"What kind of character encodings does it accept?","startTime":4820900,"duration":3410,"startOfParagraph":false},{"content":"Does it accept gzipped compressed stuff?","startTime":4824310,"duration":5720,"startOfParagraph":false},{"content":"Sometimes websites will compress things to make it faster to send over the network.","startTime":4830030,"duration":6090,"startOfParagraph":false},{"content":"Cool. All right.","startTime":4836120,"duration":2460,"startOfParagraph":true},{"content":"I think that's it for now. We'll close down, but I will remain for questions.","startTime":4838580,"duration":5880,"startOfParagraph":false},{"content":"[CS50.TV]","startTime":4844460,"duration":2540,"startOfParagraph":true}]}