{"captions":[{"content":"[Seminar: JQUERY]","startTime":0,"duration":2690,"startOfParagraph":false},{"content":"[Vipul Shekhawat, Harvard University]","startTime":2690,"duration":2100,"startOfParagraph":false},{"content":"[This is CS50.] [CS50.TV]","startTime":4790,"duration":3210,"startOfParagraph":false},{"content":"If you're following along at home, you can actually access my slides online","startTime":8000,"duration":2640,"startOfParagraph":false},{"content":"by going to this link. ","startTime":10640,"duration":2670,"startOfParagraph":false},{"content":"It's TjjRWj, on bit.ly. ","startTime":13310,"duration":5340,"startOfParagraph":false},{"content":"You can also just go to the URL directly, ","startTime":18650,"duration":2050,"startOfParagraph":false},{"content":"which is cloud.cs50.net/~vshekhawat, which is my name, ","startTime":20700,"duration":6600,"startOfParagraph":false},{"content":"and jquery. ","startTime":27300,"duration":5109,"startOfParagraph":false},{"content":"I highly encourage you to follow along if you're watching at home, ","startTime":32409,"duration":2511,"startOfParagraph":false},{"content":"and if you're here, also, because this is a pretty interactive presentation. ","startTime":34920,"duration":5730,"startOfParagraph":false},{"content":"So today I'm going to be talking about jQuery, and the first question is, ","startTime":40650,"duration":2510,"startOfParagraph":true},{"content":"what is jQuery?","startTime":43160,"duration":2140,"startOfParagraph":false},{"content":"This year, I know you guys haven't covered JavaScript","startTime":45300,"duration":1790,"startOfParagraph":false},{"content":"in as much detail as we have in past years. ","startTime":47090,"duration":3990,"startOfParagraph":false},{"content":"JavaScript is, first of all, just a client-side language","startTime":51080,"duration":2070,"startOfParagraph":false},{"content":"that you use to run scripts and code on each user's machine. ","startTime":53150,"duration":5240,"startOfParagraph":false},{"content":"So you have a server that provides web pages to people, ","startTime":58390,"duration":2270,"startOfParagraph":false},{"content":"but you might want to do stuff on their machine, ","startTime":60660,"duration":1940,"startOfParagraph":false},{"content":"ask their machine to send requests to your server every 30 seconds or something like that. ","startTime":62600,"duration":5460,"startOfParagraph":false},{"content":"You can do that using JavaScript. ","startTime":68060,"duration":2360,"startOfParagraph":false},{"content":"JQuery just provides more functionality on top of JavaScript","startTime":70420,"duration":2770,"startOfParagraph":false},{"content":"that does extra stuff for you. ","startTime":73190,"duration":2490,"startOfParagraph":false},{"content":"If you look at the contents on top, ","startTime":75680,"duration":2030,"startOfParagraph":false},{"content":"that describes some of the stuff that you're able to do. ","startTime":77710,"duration":3700,"startOfParagraph":false},{"content":"So overall, it was created in January 2006. ","startTime":81410,"duration":2090,"startOfParagraph":false},{"content":"It was first conceived of in August 2005. ","startTime":83500,"duration":3060,"startOfParagraph":false},{"content":"It's been around for a couple years, and it's really part of the new Web 2.0 movement","startTime":86560,"duration":4810,"startOfParagraph":false},{"content":"that's made the Internet so shiny. ","startTime":91370,"duration":2960,"startOfParagraph":false},{"content":"It's the most widely used JavaScript library. ","startTime":94330,"duration":3300,"startOfParagraph":false},{"content":"Over 19.6 million websites are using it, and the usage is still increasing","startTime":97630,"duration":3820,"startOfParagraph":false},{"content":"according to builtwith.com, which, apparently, over the last year, ","startTime":101450,"duration":4190,"startOfParagraph":false},{"content":"has just been continuously increasing fairly linearly. ","startTime":105640,"duration":4070,"startOfParagraph":false},{"content":"Among the top 10 million sites, there's still--","startTime":109710,"duration":3160,"startOfParagraph":false},{"content":"around 40% of them are currently using it. ","startTime":112870,"duration":2310,"startOfParagraph":false},{"content":"Facebook uses it, lots of other websites currently use it. ","startTime":115180,"duration":3360,"startOfParagraph":false},{"content":"You can look at those statistics on your own, if you'd like. ","startTime":118540,"duration":3000,"startOfParagraph":false},{"content":"And you could tell it's legit because it has a foundation and 13 board members, ","startTime":121540,"duration":4280,"startOfParagraph":false},{"content":"along with a team of 20 people who work on it on a regular basis. ","startTime":125820,"duration":6090,"startOfParagraph":false},{"content":"So it's very widely used, it has a .org URL, it's fancy,","startTime":131910,"duration":4200,"startOfParagraph":false},{"content":"it has spin-offs for other stuff, so it's a big deal. ","startTime":136110,"duration":5550,"startOfParagraph":false},{"content":"Why should you use it? JQuery is very lightweight. ","startTime":141660,"duration":2850,"startOfParagraph":true},{"content":"That means it's not a huge file. You can download","startTime":144510,"duration":2760,"startOfParagraph":false},{"content":"the minified file, which is without all the white space and comments, and it's only 32 kB.","startTime":147270,"duration":4270,"startOfParagraph":false},{"content":"So it's easy to just toss onto your web page","startTime":151540,"duration":2060,"startOfParagraph":false},{"content":"and just to start using it. ","startTime":153600,"duration":2310,"startOfParagraph":false},{"content":"It's also very efficiently written, so it doesn't take up a lot of--","startTime":155910,"duration":3720,"startOfParagraph":false},{"content":"it doesn't slow down your website much when you use it. ","startTime":159630,"duration":2920,"startOfParagraph":false},{"content":"It lets you implement things that were previously unfeasible. ","startTime":162550,"duration":3220,"startOfParagraph":false},{"content":"There are some aspects of functionality,","startTime":165770,"duration":2020,"startOfParagraph":false},{"content":"like creating animations, that normally would be very, very difficult to do. ","startTime":167790,"duration":3990,"startOfParagraph":false},{"content":"But in jQuery they're actually very simple. ","startTime":171780,"duration":2520,"startOfParagraph":false},{"content":"And there are some things that are annoying to do, ","startTime":174300,"duration":2740,"startOfParagraph":false},{"content":"possible in JavaScript, like sending a POST request, ","startTime":177040,"duration":2570,"startOfParagraph":false},{"content":"but to send a request to a server, you have to write","startTime":179610,"duration":2580,"startOfParagraph":false},{"content":"five or six or seven lines of code. ","startTime":182190,"duration":2130,"startOfParagraph":false},{"content":"Now you can just do it in a single line of code, in a single function call.","startTime":184320,"duration":2880,"startOfParagraph":false},{"content":"That really simplifies a lot of the stuff that you're doing. ","startTime":187200,"duration":4590,"startOfParagraph":false},{"content":"And all the cool kids are using it. By that, I mean me. ","startTime":191790,"duration":4160,"startOfParagraph":false},{"content":"In my final project last year, which is news.whrb.org, ","startTime":195950,"duration":3320,"startOfParagraph":false},{"content":"which is for the radio station, I created this blog","startTime":199270,"duration":3260,"startOfParagraph":false},{"content":"which hosts all the shows that we've done and the MP3 files for them. ","startTime":202530,"duration":7220,"startOfParagraph":false},{"content":"You can browse through the past shows, ","startTime":209750,"duration":2320,"startOfParagraph":false},{"content":"and it's all done using jQuery. You can tell ","startTime":212070,"duration":2060,"startOfParagraph":false},{"content":"because of all these animations, essentially. ","startTime":214130,"duration":3210,"startOfParagraph":false},{"content":"So if you have--if you're creating a new post, ","startTime":217340,"duration":5020,"startOfParagraph":false},{"content":"you see these little slideDowns; that's all done using jQuery.","startTime":222360,"duration":3620,"startOfParagraph":false},{"content":"And this fade--so that kind of stuff is all done using jQuery, ","startTime":225980,"duration":3160,"startOfParagraph":false},{"content":"and you don't have to constantly reload the page to navigate the site. ","startTime":229140,"duration":3580,"startOfParagraph":false},{"content":"Another cool thing that's made using jQuery is this presentation. ","startTime":232720,"duration":4500,"startOfParagraph":false},{"content":"I'm using this open source thing called scrolldeck, ","startTime":237220,"duration":2480,"startOfParagraph":false},{"content":"which someone wrote on top of jQuery. ","startTime":239700,"duration":3550,"startOfParagraph":false},{"content":"If you actually look at the source, you can see that ","startTime":243250,"duration":1620,"startOfParagraph":false},{"content":"they're using this dollar sign; dollar signs","startTime":244870,"duration":2960,"startOfParagraph":false},{"content":"are used in jQuery to signify that a function is a jQuery function. ","startTime":247830,"duration":4280,"startOfParagraph":false},{"content":"So they're defining a wrapper on top of jQuery ","startTime":252110,"duration":2910,"startOfParagraph":false},{"content":"that allows you to make a presentation like this, ","startTime":255020,"duration":3550,"startOfParagraph":false},{"content":"and you can see that here they're including the original jQuery file, ","startTime":258570,"duration":2630,"startOfParagraph":false},{"content":"which is what you'll have to include if want to use jQuery","startTime":261200,"duration":2920,"startOfParagraph":false},{"content":"in your own websites. ","startTime":264120,"duration":6330,"startOfParagraph":false},{"content":"Touching on that, how do you install it? ","startTime":270450,"duration":2340,"startOfParagraph":true},{"content":"You can just go to jQuery.com and download the file, ","startTime":272790,"duration":3360,"startOfParagraph":false},{"content":"add it to a web directory and include it.","startTime":276150,"duration":2170,"startOfParagraph":false},{"content":"So just on top, in the head tag of your HTML file","startTime":278320,"duration":3880,"startOfParagraph":false},{"content":"of your main HTML file, just have that line of code","startTime":282200,"duration":3200,"startOfParagraph":false},{"content":"with the correct version for which version of jQuery you're using. ","startTime":285400,"duration":4090,"startOfParagraph":false},{"content":"You can download it by going to jQuery.com, ","startTime":289490,"duration":1850,"startOfParagraph":false},{"content":"click \"download jQuery,\" and you've got it. That's it. ","startTime":291340,"duration":3790,"startOfParagraph":false},{"content":"And actually, we can take a look at what it looks like. ","startTime":295130,"duration":3750,"startOfParagraph":false},{"content":"If you click on download here, jQuery is this. ","startTime":298880,"duration":2200,"startOfParagraph":false},{"content":"It's just one big JavaScript file that does all the magic stuff for you. ","startTime":301080,"duration":4180,"startOfParagraph":false},{"content":"This is the minified version, which is not readable at all. ","startTime":305260,"duration":4010,"startOfParagraph":false},{"content":"You can also look at the development version, which is readable ","startTime":309270,"duration":3910,"startOfParagraph":false},{"content":"but still very, very lengthy. ","startTime":313180,"duration":2190,"startOfParagraph":false},{"content":"It's a lot of stuff in there. ","startTime":315370,"duration":2610,"startOfParagraph":false},{"content":"You can also link to Google's hosted version of it. ","startTime":317980,"duration":2260,"startOfParagraph":false},{"content":"So that'll allow you to just rely on Google to provide it. ","startTime":320240,"duration":3580,"startOfParagraph":false},{"content":"They provide every version of it, available at all times. ","startTime":323820,"duration":5490,"startOfParagraph":false},{"content":"So you can probably rely on Google to host it for you. ","startTime":329310,"duration":2220,"startOfParagraph":false},{"content":"Or you can link to jQuery's own latest version. ","startTime":331530,"duration":1740,"startOfParagraph":false},{"content":"They have a URL that's always updated to the latest version. ","startTime":333270,"duration":3130,"startOfParagraph":false},{"content":"It's jQuery-latest, and there's one problem with that, ","startTime":336400,"duration":4450,"startOfParagraph":false},{"content":"which is that if the updated jQuery and some of the previous functionality","startTime":340850,"duration":3500,"startOfParagraph":false},{"content":"they had becomes retrograded or deprecated, ","startTime":344350,"duration":2900,"startOfParagraph":false},{"content":"it may not--it may start to not get supported anymore. ","startTime":347250,"duration":2370,"startOfParagraph":false},{"content":"So if you write a website using version 1.8.2, ","startTime":349620,"duration":3320,"startOfParagraph":false},{"content":"by the time version 2.7 comes out","startTime":352940,"duration":2060,"startOfParagraph":false},{"content":"some of the functions you wrote don't work anymore. ","startTime":355000,"duration":2000,"startOfParagraph":false},{"content":"So it's better to just download the 32 kB file, ","startTime":357000,"duration":2930,"startOfParagraph":false},{"content":"put it on your web page, and it'll work forever. ","startTime":359930,"duration":4170,"startOfParagraph":false},{"content":"I'm going to go ahead and start talking about the actual functionality of jQuery. ","startTime":364100,"duration":3350,"startOfParagraph":true},{"content":"The first thing is selectors. This is what jQuery was initially conceived to provide. ","startTime":367450,"duration":5640,"startOfParagraph":false},{"content":"And you can click on documentation to look at ","startTime":373090,"duration":2410,"startOfParagraph":false},{"content":"the detailed documentation for the selectors I'm going to be covering. ","startTime":375500,"duration":3190,"startOfParagraph":false},{"content":"The idea behind selectors is that you can select HTML elements on a page. ","startTime":378690,"duration":5430,"startOfParagraph":false},{"content":"Elements on a page have IDs and classes and other identifying aspects to them. ","startTime":384120,"duration":4670,"startOfParagraph":false},{"content":"There's also--they're in different orders. ","startTime":388790,"duration":1710,"startOfParagraph":false},{"content":"Some of the time they're nested inside each other. ","startTime":390500,"duration":2070,"startOfParagraph":false},{"content":"JQuery allows you to construct simple queries that retrieve elements from the page. ","startTime":392570,"duration":5550,"startOfParagraph":false},{"content":"Then you can manipulate these elements using jQuery functions, ","startTime":398120,"duration":3770,"startOfParagraph":false},{"content":"which is the manipulation section we'll get to later. ","startTime":401890,"duration":2100,"startOfParagraph":false},{"content":"You can change the HTML, change the CSS, ","startTime":403990,"duration":2050,"startOfParagraph":false},{"content":"you can also animate and add functions that activate on certain events. ","startTime":406040,"duration":4460,"startOfParagraph":false},{"content":"So, for example, if something's clicked, you want something to happen, ","startTime":410500,"duration":2210,"startOfParagraph":false},{"content":"you can do that using jQuery as well. ","startTime":412710,"duration":2500,"startOfParagraph":false},{"content":"And there are a huge number of ways to select elements. ","startTime":415210,"duration":2170,"startOfParagraph":false},{"content":"Most of them I've never used, but there are the basic ones, ","startTime":417380,"duration":2930,"startOfParagraph":false},{"content":"which are pretty important. ","startTime":420310,"duration":2030,"startOfParagraph":false},{"content":"The element selector, for example, if you're just selecting anything ","startTime":422340,"duration":3410,"startOfParagraph":false},{"content":"that is a div--I actually have the code open for this slide presentation. ","startTime":425750,"duration":4890,"startOfParagraph":false},{"content":"So, for example, here's the first slide. ","startTime":430640,"duration":2810,"startOfParagraph":false},{"content":"Here we have a div. If we actually select all the divs on the page, ","startTime":433450,"duration":3980,"startOfParagraph":false},{"content":"it'll just give us an array of all the divs that exist in this file. ","startTime":437430,"duration":4870,"startOfParagraph":false},{"content":"The ID selector lets you select anything with a given ID. ","startTime":442300,"duration":4740,"startOfParagraph":false},{"content":"So if this, for example, this thing has the ID \"what,\"","startTime":447040,"duration":5190,"startOfParagraph":false},{"content":"and if we did this with #what instead of some ID, ","startTime":452230,"duration":4930,"startOfParagraph":false},{"content":"it would just return an array that has a single element and that is that element of the page. ","startTime":457160,"duration":5760,"startOfParagraph":false},{"content":"We can also combine selectors this way by having","startTime":462920,"duration":2570,"startOfParagraph":false},{"content":"only select things with IDs that are divs. ","startTime":465490,"duration":2770,"startOfParagraph":false},{"content":"So yeah. Only select divs that have that ID. ","startTime":468260,"duration":3550,"startOfParagraph":false},{"content":"For class you just use a dot, it's the same thing as CSS. ","startTime":471810,"duration":3450,"startOfParagraph":false},{"content":"Descendant also works; so if you have some class","startTime":475260,"duration":2240,"startOfParagraph":false},{"content":"and it has nested elements within it--so, for example, ","startTime":477500,"duration":2670,"startOfParagraph":false},{"content":"there is some class and it has an anchor tag to link to another page, ","startTime":480170,"duration":3090,"startOfParagraph":false},{"content":"you can use this syntax to retrieve the link. ","startTime":483260,"duration":5250,"startOfParagraph":false},{"content":"You can also select multiple things at once; just separate them by commas, ","startTime":488510,"duration":3910,"startOfParagraph":false},{"content":"use any selector you'd like, and you will select all of them at once, in a single array.","startTime":492420,"duration":4940,"startOfParagraph":false},{"content":"And then there's also the not selector, so you can select all divs","startTime":497360,"duration":2290,"startOfParagraph":false},{"content":"that do not have some specific class. ","startTime":499650,"duration":4560,"startOfParagraph":false},{"content":"And that's just a helpful way to get an introduction to how this selection works. ","startTime":504210,"duration":4580,"startOfParagraph":false},{"content":"I'll show some concrete examples in a second. ","startTime":508790,"duration":3480,"startOfParagraph":false},{"content":"Advanced selectors are--these are just a few examples. ","startTime":512270,"duration":3210,"startOfParagraph":true},{"content":"There are dozens of these, but if you want to select all the image tags","startTime":515480,"duration":3360,"startOfParagraph":false},{"content":"within some element, then you just do :image. ","startTime":518840,"duration":3959,"startOfParagraph":false},{"content":"If you want to select the even elements, for example, if there are 20 of them, ","startTime":522799,"duration":2541,"startOfParagraph":false},{"content":"you want to select 0, 2, 4, 6 and so on, ","startTime":525340,"duration":2950,"startOfParagraph":false},{"content":"you do :even, or you can also do :odd. ","startTime":528290,"duration":3340,"startOfParagraph":false},{"content":"These are pseudo selectors, which means that they actually compute ","startTime":531630,"duration":3840,"startOfParagraph":false},{"content":"every other element rather than just going and selecting all of them. ","startTime":535470,"duration":5490,"startOfParagraph":false},{"content":"You can also--each element can also have specific attributes. ","startTime":540960,"duration":4550,"startOfParagraph":false},{"content":"So, for example, class = center is also an attribute.","startTime":545510,"duration":5070,"startOfParagraph":false},{"content":"For this anchor tag, href, hypertext reference, is an attribute also. ","startTime":550580,"duration":5920,"startOfParagraph":false},{"content":"So you can select something that links to a specific page or just--it's really general. ","startTime":556500,"duration":4650,"startOfParagraph":false},{"content":"You can select anything with any attribute that you'd like.","startTime":561150,"duration":4260,"startOfParagraph":false},{"content":"And then, also, attribute contains. ","startTime":565410,"duration":2060,"startOfParagraph":false},{"content":"If you, for example, wanted to select all the input elements","startTime":567470,"duration":2950,"startOfParagraph":false},{"content":"that have the word \"pass\" as the name of them,  ","startTime":570420,"duration":2280,"startOfParagraph":false},{"content":"if a page has an input text block ","startTime":572700,"duration":4860,"startOfParagraph":false},{"content":"that's called \"password,\" that'd be one way you could select that. ","startTime":577560,"duration":3490,"startOfParagraph":false},{"content":"And there are many more. You can go ahead and look at the documentation ","startTime":581050,"duration":1970,"startOfParagraph":false},{"content":"and see specific examples of how it works. ","startTime":583020,"duration":3930,"startOfParagraph":false},{"content":"The next thing is DOM manipulation. ","startTime":586950,"duration":1890,"startOfParagraph":true},{"content":"After we select elements, we will want to actually do stuff with them. ","startTime":588840,"duration":3660,"startOfParagraph":false},{"content":"So far we haven't looked at that at all, but if you look at the documentation, ","startTime":592500,"duration":3000,"startOfParagraph":false},{"content":"there's really a lot that we could do. ","startTime":595500,"duration":2450,"startOfParagraph":false},{"content":"At this point, we're going to select elements on this presentation ","startTime":597950,"duration":4950,"startOfParagraph":false},{"content":"and manipulate them using jQuery. ","startTime":602900,"duration":1990,"startOfParagraph":false},{"content":"Because this is implemented using jQuery, we have access to the jQuery library, ","startTime":604890,"duration":3400,"startOfParagraph":false},{"content":"and we can use those functions within this code. ","startTime":608290,"duration":5290,"startOfParagraph":false},{"content":"One useful thing that you may not know about is the console.","startTime":613580,"duration":2620,"startOfParagraph":false},{"content":"And Google Chrome is what I'm using. You can press alt command J","startTime":616200,"duration":3140,"startOfParagraph":false},{"content":"or alt control J to open the console. ","startTime":619340,"duration":2380,"startOfParagraph":false},{"content":"In Firefox I think it's command shift K or control shift K. ","startTime":621720,"duration":4410,"startOfParagraph":false},{"content":"In Safari you have to go change some settings.","startTime":626130,"duration":2750,"startOfParagraph":false},{"content":"There's a link if you'd like to do it, but I recommend getting Chrome or Firefox. ","startTime":628880,"duration":6580,"startOfParagraph":false},{"content":"So let's open up the console, it's down here. ","startTime":635460,"duration":2290,"startOfParagraph":false},{"content":"It allows you to basically just do anything you want. ","startTime":637750,"duration":3420,"startOfParagraph":false},{"content":"So you can just type in create a variable called x, ","startTime":641170,"duration":3930,"startOfParagraph":false},{"content":"x = 5, let's see what x + 2 is. ","startTime":645100,"duration":4100,"startOfParagraph":false},{"content":"You can even do something like CS + let's see, x + 45, that will be CS50. ","startTime":649200,"duration":8470,"startOfParagraph":false},{"content":"You can just do some typical JavaScript stuff. ","startTime":657670,"duration":2860,"startOfParagraph":false},{"content":"But you can also do jQuery in here. ","startTime":660530,"duration":2200,"startOfParagraph":false},{"content":"So let's look at this first aspect here. ","startTime":662730,"duration":3470,"startOfParagraph":true},{"content":"We're going to create a variable called HTML, which is a string. ","startTime":666200,"duration":3300,"startOfParagraph":false},{"content":"It has a paragraph tag in it, that's called some new text. ","startTime":669500,"duration":6390,"startOfParagraph":false},{"content":"So we have this HTML, it's some new text, in paragraph tags. ","startTime":675890,"duration":3530,"startOfParagraph":false},{"content":"Now we actually want to add it to the page. ","startTime":679420,"duration":2380,"startOfParagraph":false},{"content":"I set it up so that the HTML for this paragraph, this title here, is append ID. ","startTime":681800,"duration":6510,"startOfParagraph":false},{"content":"If we select append ID and then append to it","startTime":688310,"duration":4010,"startOfParagraph":false},{"content":"the HTML variable I just created, ","startTime":692320,"duration":2240,"startOfParagraph":false},{"content":"it will add that HTML at the end, right after this paragraph tag. ","startTime":694560,"duration":5810,"startOfParagraph":false},{"content":"So if we do that--we selected this paragraph, ","startTime":700370,"duration":3360,"startOfParagraph":false},{"content":"and we've called the append function with the HTML variable I just added, ","startTime":703730,"duration":3860,"startOfParagraph":false},{"content":"it will add that new text right there on the page. ","startTime":707590,"duration":3370,"startOfParagraph":false},{"content":"We can also prepend, which means it will go before, at the beginning of that element. ","startTime":710960,"duration":4010,"startOfParagraph":false},{"content":"So there is some new text at the beginning and afterwards. ","startTime":714970,"duration":3320,"startOfParagraph":false},{"content":"I can go ahead and refresh to get rid of this stuff I've just done. ","startTime":718290,"duration":3370,"startOfParagraph":false},{"content":"But that's an example of how you can use the prepend and append methods","startTime":721660,"duration":3620,"startOfParagraph":false},{"content":"to manipulate stuff on the page, add some HTML. ","startTime":725280,"duration":3630,"startOfParagraph":false},{"content":"You can also change classes. ","startTime":728910,"duration":2170,"startOfParagraph":true},{"content":"Back in this style file, I've created this for the win class","startTime":731080,"duration":3890,"startOfParagraph":false},{"content":"that has text color red, some background color, and a text shadow. ","startTime":734970,"duration":5020,"startOfParagraph":false},{"content":"It looks hideous, but I can actually--","startTime":739990,"duration":3820,"startOfParagraph":false},{"content":"this paragraph corresponds to class ID. ","startTime":743810,"duration":2600,"startOfParagraph":false},{"content":"So I can add the class for the win. ","startTime":746410,"duration":3450,"startOfParagraph":false},{"content":"I can execute this in the console, ","startTime":749860,"duration":2010,"startOfParagraph":false},{"content":"and that will add that class, and now it looks hideous, as expected. ","startTime":751870,"duration":3610,"startOfParagraph":false},{"content":"The CSS automatically gets applied to the classes that you--","startTime":755480,"duration":4200,"startOfParagraph":false},{"content":"if there's CSS for a class, it automatically gets applied ","startTime":759680,"duration":3000,"startOfParagraph":false},{"content":"if you change the class of an element. ","startTime":762680,"duration":2000,"startOfParagraph":false},{"content":"Then we can just remove it using remove class. ","startTime":764680,"duration":4550,"startOfParagraph":false},{"content":"So if you have some predefined classes like red or highlighted, ","startTime":769230,"duration":4460,"startOfParagraph":false},{"content":"and then you want to apply those to elements, ","startTime":773690,"duration":2300,"startOfParagraph":false},{"content":"you don't have to do all the CSS styling every time. ","startTime":775990,"duration":2240,"startOfParagraph":false},{"content":"You can just add the class to an element, and then it will automatically become--","startTime":778230,"duration":3280,"startOfParagraph":false},{"content":"it will automatically look appropriate for that class. ","startTime":781510,"duration":4070,"startOfParagraph":false},{"content":"We can also remove things; so I'm going to select all the divs","startTime":785580,"duration":2320,"startOfParagraph":false},{"content":"on the page and remove them. ","startTime":787900,"duration":2930,"startOfParagraph":false},{"content":"What is that going to look like? ","startTime":790830,"duration":3160,"startOfParagraph":false},{"content":"It's going to look like nothing, so there's actually nothing left. ","startTime":793990,"duration":2180,"startOfParagraph":false},{"content":"My presentation is gone. ","startTime":796170,"duration":2000,"startOfParagraph":false},{"content":"I can refresh and bring it back, fortunately, ","startTime":798170,"duration":3120,"startOfParagraph":false},{"content":"because it's just running once, ","startTime":801290,"duration":3130,"startOfParagraph":false},{"content":"but that's an example of removing, if you want to completely destroy an element off the page. ","startTime":804420,"duration":5040,"startOfParagraph":false},{"content":"You can also overwrite, and I'm going to select all the paragraph tags on the page","startTime":809460,"duration":3720,"startOfParagraph":true},{"content":"and go inside them and replace whatever text they have in them","startTime":813180,"duration":3670,"startOfParagraph":false},{"content":"with just the word \"testing.\"","startTime":816850,"duration":2840,"startOfParagraph":false},{"content":"If you do this, you'll replace every paragraph on the page with this testing. ","startTime":819690,"duration":6830,"startOfParagraph":false},{"content":"Yep. They're all replaced with testing. ","startTime":826520,"duration":2630,"startOfParagraph":false},{"content":"So that's an example of accessing the text and overwriting it. ","startTime":829150,"duration":4120,"startOfParagraph":false},{"content":"You can also retrieve information, and this is really cool for input boxes. ","startTime":833270,"duration":4220,"startOfParagraph":false},{"content":"If you have an input box that people are typing stuff into, ","startTime":837490,"duration":2980,"startOfParagraph":false},{"content":"people are typing stuff into it, ","startTime":840470,"duration":3410,"startOfParagraph":false},{"content":"here we select the input, any input tag with a type of text. ","startTime":843880,"duration":5150,"startOfParagraph":false},{"content":"In this case, there's only one input box in the whole presentation, ","startTime":849030,"duration":4770,"startOfParagraph":false},{"content":"so we'll just select the first one, and then we call the val function on it. ","startTime":853800,"duration":3460,"startOfParagraph":false},{"content":"That returns the value, and for an input box, ","startTime":857260,"duration":2310,"startOfParagraph":false},{"content":"the value is just whatever happens to be inside it. ","startTime":859570,"duration":4760,"startOfParagraph":false},{"content":"So if we do this, it just returns the string stuff. ","startTime":864330,"duration":7550,"startOfParagraph":false},{"content":"And if we call it again after writing more stuff, it turns into more stuff. ","startTime":871880,"duration":4980,"startOfParagraph":false},{"content":"That's one great way to access elements of an input box, and then check, ","startTime":876860,"duration":3900,"startOfParagraph":false},{"content":"is this a valid email address, is this a valid date, for example. ","startTime":880760,"duration":4300,"startOfParagraph":false},{"content":"You can just retrieve stuff instantly as people are typing it, ","startTime":885060,"duration":4540,"startOfParagraph":false},{"content":"and then check whether it's valid, send it back to a server, do anything you want with it.","startTime":889600,"duration":5230,"startOfParagraph":false},{"content":"And that's how you access what's inside those boxes. ","startTime":894830,"duration":2890,"startOfParagraph":false},{"content":"You can also modify CSS directly, so instead of adding","startTime":897720,"duration":2370,"startOfParagraph":true},{"content":"a class that has some predefined properties, ","startTime":900090,"duration":2420,"startOfParagraph":false},{"content":"you can just add whatever CSS you want to anything. ","startTime":902510,"duration":5610,"startOfParagraph":false},{"content":"So let's select body, which is the entire presentation, ","startTime":908120,"duration":2230,"startOfParagraph":false},{"content":"and color is the property that defines what the colors the text is. ","startTime":910350,"duration":4020,"startOfParagraph":false},{"content":"If we change it to red, all the text in the page will turn to red. ","startTime":914370,"duration":5050,"startOfParagraph":false},{"content":"We can do something like background color blue, ","startTime":919420,"duration":6890,"startOfParagraph":false},{"content":"there we go; it's beautiful.","startTime":926310,"duration":4370,"startOfParagraph":false},{"content":"You can do anything you want with this. ","startTime":930680,"duration":3160,"startOfParagraph":false},{"content":"Using the CSS property, you can really modify how anything looks at any time. ","startTime":933840,"duration":5410,"startOfParagraph":false},{"content":"The next thing is effects. ","startTime":939250,"duration":2380,"startOfParagraph":false},{"content":"Effects are basically the same thing as modifying the CSS, ","startTime":941630,"duration":4080,"startOfParagraph":false},{"content":"but they actually provide some extra animation to it. ","startTime":945710,"duration":3160,"startOfParagraph":false},{"content":"So instead of just showing or hiding something or changing the color, ","startTime":948870,"duration":4510,"startOfParagraph":false},{"content":"you can actually make it animated. ","startTime":953380,"duration":2750,"startOfParagraph":false},{"content":"Here's the documentation, if you want to take a look at the extensive documentation for it. ","startTime":956130,"duration":4630,"startOfParagraph":false},{"content":"But I'm going to cover the main ones. ","startTime":960760,"duration":4000,"startOfParagraph":false},{"content":"There are the show and hide properties. ","startTime":964760,"duration":7270,"startOfParagraph":false},{"content":"Show/hide ID actually corresponds to this whole box, ","startTime":972030,"duration":2480,"startOfParagraph":false},{"content":"so if I hide it, it will just disappear. ","startTime":974510,"duration":3680,"startOfParagraph":false},{"content":"And I can show it again if I want to make it come back. ","startTime":978190,"duration":6020,"startOfParagraph":false},{"content":"And it's back. It didn't actually disappear, ","startTime":984210,"duration":2130,"startOfParagraph":false},{"content":"I didn't actually remove it from the page, I just set the CSS property of visibility to hidden","startTime":986340,"duration":4330,"startOfParagraph":false},{"content":"so you can't see it anymore. ","startTime":990670,"duration":3360,"startOfParagraph":false},{"content":"There's also slide up and slide down; that allows you to have this effect. ","startTime":994030,"duration":5220,"startOfParagraph":false},{"content":"It slides up to disappear, and after it disappears","startTime":999250,"duration":7800,"startOfParagraph":false},{"content":"you can slide it down to make it come back. And now it's back. ","startTime":1007050,"duration":6160,"startOfParagraph":false},{"content":"There's also this fade effect, which--fade ID corresponds to this box. ","startTime":1013210,"duration":4440,"startOfParagraph":false},{"content":"If I fade it out, then it'll slowly disappear. ","startTime":1017650,"duration":3550,"startOfParagraph":false},{"content":"I can also fade it in, and it will come back. ","startTime":1021200,"duration":3290,"startOfParagraph":false},{"content":"You can also do fade to, which is specific to the fade function. ","startTime":1024490,"duration":4440,"startOfParagraph":false},{"content":"You can have it fade to any specific opacity that you want.","startTime":1028930,"duration":3659,"startOfParagraph":false},{"content":"So if you fade it slowly to .5, it'll become half visible. ","startTime":1032589,"duration":4280,"startOfParagraph":false},{"content":"I can make it go to .1, and back to 1 to make it fully visible again. ","startTime":1036869,"duration":5761,"startOfParagraph":false},{"content":"That's just another animation that you can do. ","startTime":1042630,"duration":2130,"startOfParagraph":false},{"content":"There are also the toggle effects. ","startTime":1044760,"duration":1990,"startOfParagraph":true},{"content":"So I'm going to select the toggle ID, which corresponds to this box, ","startTime":1046750,"duration":6660,"startOfParagraph":false},{"content":"and on that div you can call toggle; if it's visible it will become invisible, ","startTime":1053410,"duration":5560,"startOfParagraph":false},{"content":"if it's invisible it will become visible again. ","startTime":1058970,"duration":3350,"startOfParagraph":false},{"content":"So I just called this toggle function twice; the first one was ","startTime":1062320,"duration":2120,"startOfParagraph":false},{"content":"the same thing as hide, the second call was the same thing as a show. ","startTime":1064440,"duration":3940,"startOfParagraph":false},{"content":"And you can also do this with a fade toggle, ","startTime":1068380,"duration":5130,"startOfParagraph":false},{"content":"which does the same thing, except it actually fades. ","startTime":1073510,"duration":2220,"startOfParagraph":false},{"content":"And same thing with the slide toggle. ","startTime":1075730,"duration":3680,"startOfParagraph":false},{"content":"There are chained effects as well, which means ","startTime":1079410,"duration":2050,"startOfParagraph":false},{"content":"if you select an element and just call a bunch of animation methods on it, ","startTime":1081460,"duration":4060,"startOfParagraph":false},{"content":"if you wanted it to fade out, then slide down, ","startTime":1085520,"duration":1880,"startOfParagraph":false},{"content":"and then hide and then fade in, it will do them in a row. ","startTime":1087400,"duration":3640,"startOfParagraph":false},{"content":"So disappeared, came back--for some reason, the hide didn't happen. ","startTime":1091040,"duration":13880,"startOfParagraph":false},{"content":"Let's try it out. Yeah, so it faded out and then it slid away. ","startTime":1104920,"duration":5110,"startOfParagraph":false},{"content":"And there are plenty more. You can use the animate function ","startTime":1110030,"duration":2200,"startOfParagraph":false},{"content":"to create your own animations, which is fairly complex, ","startTime":1112230,"duration":3140,"startOfParagraph":false},{"content":"but it provides you with infinite extensibility. ","startTime":1115370,"duration":3420,"startOfParagraph":false},{"content":"You can make any kind of animation you want. ","startTime":1118790,"duration":1840,"startOfParagraph":false},{"content":"You can also use queue to queue up multiple animations at a time. ","startTime":1120630,"duration":3600,"startOfParagraph":false},{"content":"So if you want something to fly across the page, ","startTime":1124230,"duration":3110,"startOfParagraph":false},{"content":"slide from the top right to the bottom left, you can do that, ","startTime":1127340,"duration":2520,"startOfParagraph":false},{"content":"and just have a bunch of actions going one after the other. ","startTime":1129860,"duration":5380,"startOfParagraph":false},{"content":"The next thing we're going to talk about is events. ","startTime":1135240,"duration":2250,"startOfParagraph":true},{"content":"Events allow you--so far, we've just been typing things into the console","startTime":1137490,"duration":4600,"startOfParagraph":false},{"content":"and that is one way to make this happen, ","startTime":1142090,"duration":2780,"startOfParagraph":false},{"content":"but on an actual page, you're not going to be able to ","startTime":1144870,"duration":3150,"startOfParagraph":false},{"content":"make the user type things into the console. ","startTime":1148020,"duration":2000,"startOfParagraph":false},{"content":"You want things to happen automatically. ","startTime":1150020,"duration":2030,"startOfParagraph":false},{"content":"For that, you need to use events that activate on some certain event happening. ","startTime":1152050,"duration":6010,"startOfParagraph":false},{"content":"You can check the documentation for the full details.","startTime":1158060,"duration":3280,"startOfParagraph":false},{"content":"So let's see. We want to hide or show the box, ","startTime":1161340,"duration":2690,"startOfParagraph":false},{"content":"but right now this button doesn't do anything because I didn't implement it yet. ","startTime":1164030,"duration":5310,"startOfParagraph":false},{"content":"I'm going to go to the actual HTML page. ","startTime":1169340,"duration":6080,"startOfParagraph":false},{"content":"Here's the slide. There's a div for the slide.","startTime":1175420,"duration":3140,"startOfParagraph":false},{"content":"It has the class of slide. ","startTime":1178560,"duration":2670,"startOfParagraph":false},{"content":"There's the text. Now, there's this box and the box button. ","startTime":1181230,"duration":5660,"startOfParagraph":false},{"content":"How would we actually make this disappear? ","startTime":1186890,"duration":6010,"startOfParagraph":false},{"content":"First of all, let's write a function that makes the box ID disappear. ","startTime":1192900,"duration":5350,"startOfParagraph":false},{"content":"This is the syntax for funtion, let's just call it hideTheBox. ","startTime":1198250,"duration":3570,"startOfParagraph":false},{"content":"It doesn't take any arguments, because there are no arguments to be taken. ","startTime":1201820,"duration":4310,"startOfParagraph":false},{"content":"We can select the box ID. ","startTime":1206130,"duration":2820,"startOfParagraph":false},{"content":"So using the jQuery select, we can select box ID, ","startTime":1208950,"duration":6070,"startOfParagraph":false},{"content":"and then just make it disappear. ","startTime":1215020,"duration":2680,"startOfParagraph":false},{"content":"Let's make it fade out. ","startTime":1217700,"duration":2990,"startOfParagraph":false},{"content":"If we ran this function in the actual console, ","startTime":1220690,"duration":6700,"startOfParagraph":false},{"content":"we could define this function; we can call hideTheBox, and it works. ","startTime":1227390,"duration":5990,"startOfParagraph":false},{"content":"But we want it to happen when the button is actually pressed. ","startTime":1233380,"duration":3270,"startOfParagraph":false},{"content":"To do that, we have to use an event.","startTime":1236650,"duration":4300,"startOfParagraph":false},{"content":"To bind an event to some specific button or some action happening, ","startTime":1240950,"duration":4550,"startOfParagraph":false},{"content":"we have to select the element that the event will trigger--","startTime":1245500,"duration":4540,"startOfParagraph":false},{"content":"or that will trigger the event, sorry. ","startTime":1250040,"duration":2610,"startOfParagraph":false},{"content":"So first of all, let's select the box button ID","startTime":1252650,"duration":4570,"startOfParagraph":true},{"content":"because that's the button, and now, for that button, ","startTime":1257220,"duration":2390,"startOfParagraph":false},{"content":"we want to create an animation when it's clicked. ","startTime":1259610,"duration":3140,"startOfParagraph":false},{"content":"So there's this click function. ","startTime":1262750,"duration":2290,"startOfParagraph":false},{"content":"It allows you to bind another function to it. ","startTime":1265040,"duration":3430,"startOfParagraph":false},{"content":"This function takes another function as an argument","startTime":1268470,"duration":3850,"startOfParagraph":false},{"content":"we can pass in the hideTheBox function, ","startTime":1272320,"duration":1990,"startOfParagraph":false},{"content":"and whenever this button is clicked, that function will automatically execute. ","startTime":1274310,"duration":6640,"startOfParagraph":false},{"content":"So this will work if we save this, I'll refresh, ","startTime":1280950,"duration":3900,"startOfParagraph":false},{"content":"and--one second, I'm sorry. ","startTime":1284850,"duration":8610,"startOfParagraph":false},{"content":"Let me fix this really quickly. ","startTime":1293460,"duration":11310,"startOfParagraph":false},{"content":"Okay. There we go. So now the box is disappearing when we click the button. ","startTime":1304770,"duration":5910,"startOfParagraph":false},{"content":"We can also change this to just fadeToggle, ","startTime":1310680,"duration":4790,"startOfParagraph":false},{"content":"change it just to hide or show the box, ","startTime":1315470,"duration":4550,"startOfParagraph":false},{"content":"and this will also work too, if we refresh. ","startTime":1320020,"duration":3830,"startOfParagraph":false},{"content":"We can hide it, we can also show it, and that will continue to work. ","startTime":1323850,"duration":4700,"startOfParagraph":false},{"content":"Another thing we can do is, we don't actually have to define this hideTheBox function","startTime":1328550,"duration":3660,"startOfParagraph":false},{"content":"before we call the click function. ","startTime":1332210,"duration":2840,"startOfParagraph":false},{"content":"So instead of defining the function and calling hideTheBox, ","startTime":1335050,"duration":2590,"startOfParagraph":false},{"content":"we're only going to call it if this thing is clicked. ","startTime":1337640,"duration":2670,"startOfParagraph":false},{"content":"So we can define it anonymously in here, ","startTime":1340310,"duration":2000,"startOfParagraph":false},{"content":"which is a feature that JavaScript has. ","startTime":1342310,"duration":2760,"startOfParagraph":false},{"content":"You can define a function; normally, we would say function hideTheBox","startTime":1345070,"duration":4650,"startOfParagraph":false},{"content":"with arguments, but instead, we can just say function no arguments, ","startTime":1349720,"duration":4770,"startOfParagraph":false},{"content":"start the curly brace to define the function, ","startTime":1354490,"duration":2380,"startOfParagraph":false},{"content":"close that curly brace, and then just define the function in here, ","startTime":1356870,"duration":3910,"startOfParagraph":false},{"content":"within the first parenthesis and the last parenthesis","startTime":1360780,"duration":4350,"startOfParagraph":false},{"content":"that correspond to the arguments of the click function. ","startTime":1365130,"duration":2730,"startOfParagraph":false},{"content":"So we're passing in this function, we can copy this line of code right here, ","startTime":1367860,"duration":5460,"startOfParagraph":false},{"content":"and that will do the exact same thing. ","startTime":1373320,"duration":2130,"startOfParagraph":false},{"content":"And now we don't have this random fadeTheBox function ","startTime":1375450,"duration":1840,"startOfParagraph":false},{"content":"that is sitting around for no apparent reason. ","startTime":1377290,"duration":2670,"startOfParagraph":false},{"content":"The function was defined anonymously, it doesn't have a name. ","startTime":1379960,"duration":2110,"startOfParagraph":false},{"content":"It will only execute when we click on the box button. ","startTime":1382070,"duration":5990,"startOfParagraph":false},{"content":"So refreshing once more, one more time, and you can see that it still works. ","startTime":1388060,"duration":4120,"startOfParagraph":false},{"content":"And that's how you create events. ","startTime":1392180,"duration":4520,"startOfParagraph":false},{"content":"There are a lot of different events that we can use. ","startTime":1396700,"duration":2490,"startOfParagraph":true},{"content":"I'm going to switch back to using the console to just show you how these work. ","startTime":1399190,"duration":4350,"startOfParagraph":false},{"content":"The IDs for each of these correspond to each box. ","startTime":1403540,"duration":4670,"startOfParagraph":false},{"content":"So this box is click ID, this one is key ID, and this one is mouse ID. ","startTime":1408210,"duration":4810,"startOfParagraph":false},{"content":"One more thing is that there's this action function; rather than typing it out every time, ","startTime":1413020,"duration":3100,"startOfParagraph":false},{"content":"I actually went ahead and defined this action function down here.","startTime":1416120,"duration":5490,"startOfParagraph":false},{"content":"It does the same thing as the hideTheBox function. ","startTime":1421610,"duration":5250,"startOfParagraph":false},{"content":"It gets this box and either fades it out or fades it in. ","startTime":1426860,"duration":4480,"startOfParagraph":false},{"content":"And that's why we're able to use it here. ","startTime":1431340,"duration":2770,"startOfParagraph":false},{"content":"So if we click on this click ID, we want to make the box disappear or reappear. ","startTime":1434110,"duration":6240,"startOfParagraph":false},{"content":"It's the same thing as the button that we had in the last slide. ","startTime":1440350,"duration":3260,"startOfParagraph":false},{"content":"Now after we call that, we can click on this and the box will disappear, ","startTime":1443610,"duration":3840,"startOfParagraph":false},{"content":"then click on it again and the box will reappear. ","startTime":1447450,"duration":2710,"startOfParagraph":false},{"content":"That's pretty simple. Double click does the same thing, ","startTime":1450160,"duration":2320,"startOfParagraph":false},{"content":"except it requires a double click. ","startTime":1452480,"duration":3180,"startOfParagraph":false},{"content":"So if you click on it once and click on it again nothing will happen,","startTime":1455660,"duration":3370,"startOfParagraph":false},{"content":"but if you double click quickly, it'll disappear. ","startTime":1459030,"duration":2110,"startOfParagraph":false},{"content":"If you double click again, it will come back. ","startTime":1461140,"duration":2170,"startOfParagraph":false},{"content":"So that's pretty simple. ","startTime":1463310,"duration":1940,"startOfParagraph":false},{"content":"Keyboard input is kind of weird; I don't think it actually works in this example","startTime":1465250,"duration":5920,"startOfParagraph":false},{"content":"because the key down, key up and key press and other key actions","startTime":1471170,"duration":6500,"startOfParagraph":false},{"content":"activate no matter what element you bind it to. ","startTime":1477670,"duration":9520,"startOfParagraph":false},{"content":"For example, even if I bound key down to body or something else completely, ","startTime":1487190,"duration":4220,"startOfParagraph":false},{"content":"then it would still activate no matter--it's not specific. ","startTime":1491410,"duration":4540,"startOfParagraph":false},{"content":"I don't have to be clicking on this and press a key to make anything disappear. ","startTime":1495950,"duration":4240,"startOfParagraph":false},{"content":"It would be activated regardless of what element I'm currently in. ","startTime":1500190,"duration":4280,"startOfParagraph":false},{"content":"So these don't actually work in this example ","startTime":1504470,"duration":2410,"startOfParagraph":false},{"content":"because it doesn't recognize me as entering input into the keyboard input div. ","startTime":1506880,"duration":6300,"startOfParagraph":false},{"content":"But if you look at the mouse actions, ","startTime":1513180,"duration":2560,"startOfParagraph":true},{"content":"the first one is hover, and it can do some of this using CSS. ","startTime":1515740,"duration":3880,"startOfParagraph":false},{"content":"If you use CSS, you can create it so that if you hover over something, ","startTime":1519620,"duration":4660,"startOfParagraph":false},{"content":"then its style changes. ","startTime":1524280,"duration":4660,"startOfParagraph":false},{"content":"But using jQuery you can change the styles of other things as well. ","startTime":1528940,"duration":3230,"startOfParagraph":false},{"content":"So, for example, we're going to call action if we hover over this div. ","startTime":1532170,"duration":4950,"startOfParagraph":false},{"content":"That means if we hover over it, then the box will disappear.","startTime":1537120,"duration":2540,"startOfParagraph":false},{"content":"If we move away from it, the box will reappear. ","startTime":1539660,"duration":2770,"startOfParagraph":false},{"content":"If we call this and hover over it, the box does disappear, ","startTime":1542430,"duration":2660,"startOfParagraph":false},{"content":"and as soon as we move away, it comes back. ","startTime":1545090,"duration":1960,"startOfParagraph":false},{"content":"If we call this hover function on the mouse ID, ","startTime":1547050,"duration":2700,"startOfParagraph":false},{"content":"which corresponds to this box, then if we hover over the box, ","startTime":1549750,"duration":4630,"startOfParagraph":false},{"content":"then the box will actually disappear--it's being funky right now, but--","startTime":1554380,"duration":6060,"startOfParagraph":false},{"content":"if we move away from it, it will reappear. Right now it's backwards for some reason. ","startTime":1560440,"duration":5870,"startOfParagraph":false},{"content":"The mouse enter and mouse move functions are somewhat similar, but slightly different. ","startTime":1566310,"duration":6410,"startOfParagraph":false},{"content":"Mouse enter only activates when the mouse enters the box, as expected. ","startTime":1572720,"duration":3750,"startOfParagraph":false},{"content":"So if you move into it, it'll disappear. ","startTime":1576470,"duration":2740,"startOfParagraph":false},{"content":"But it won't reappear when you move away; you'll have to move back onto it for it to come back. ","startTime":1579210,"duration":4000,"startOfParagraph":false},{"content":"There's also the mouse move function, which will activate","startTime":1583210,"duration":2380,"startOfParagraph":false},{"content":"whenever the mouse is even present in the box. ","startTime":1585590,"duration":3710,"startOfParagraph":false},{"content":"So it'll just keep on going, fading in and out. ","startTime":1589300,"duration":3130,"startOfParagraph":false},{"content":"And it's actually logging--it seems like it's just fading in and out, ","startTime":1592430,"duration":3230,"startOfParagraph":false},{"content":"but it's actually logging a lot more actions than this, ","startTime":1595660,"duration":3480,"startOfParagraph":false},{"content":"so when you move away it'll just keep going because it logged like a thousand of them. ","startTime":1599140,"duration":4410,"startOfParagraph":false},{"content":"Maybe not a thousand. Maybe five. ","startTime":1603550,"duration":3070,"startOfParagraph":false},{"content":"It logs more than that. ","startTime":1606620,"duration":3580,"startOfParagraph":false},{"content":"The point is, all the mouse actions, there are a lot of them. ","startTime":1610200,"duration":3080,"startOfParagraph":false},{"content":"You can read up on the other ones, but they are all slightly different, ","startTime":1613280,"duration":2200,"startOfParagraph":false},{"content":"and you can pick whichever one you need ","startTime":1615480,"duration":2220,"startOfParagraph":false},{"content":"for whichever specific purpose you're trying to do. ","startTime":1617700,"duration":4430,"startOfParagraph":false},{"content":"The next thing I'm going to talk about is AJAX. ","startTime":1622130,"duration":2930,"startOfParagraph":true},{"content":"AJAX, I know we didn't cover JavaScript in as much depth this year, ","startTime":1625060,"duration":4280,"startOfParagraph":false},{"content":"so I'm just going to talk about AJAX in general for a minute. ","startTime":1629340,"duration":2430,"startOfParagraph":false},{"content":"AJAX stands for Asynchronous JavaScript and XML. ","startTime":1631770,"duration":3440,"startOfParagraph":false},{"content":"It's basically, for example, when you're on Facebook and it pushes you a notification, ","startTime":1635210,"duration":3820,"startOfParagraph":false},{"content":"that's because AJAX is running on your web browser. ","startTime":1639030,"duration":4030,"startOfParagraph":false},{"content":"Every couple of seconds your web browser's actually ","startTime":1643060,"duration":2740,"startOfParagraph":false},{"content":"going to Facebook's servers, asking them, do you have anything new for me, ","startTime":1645800,"duration":3620,"startOfParagraph":false},{"content":"and then it comes back to you. ","startTime":1649420,"duration":2560,"startOfParagraph":false},{"content":"This allows you to send requests to a server","startTime":1651980,"duration":4340,"startOfParagraph":false},{"content":"without actually having to load the page. ","startTime":1656320,"duration":2340,"startOfParagraph":false},{"content":"So normally, if you're just using PHP and a database, ","startTime":1658660,"duration":3380,"startOfParagraph":false},{"content":"you have to refresh the page before you can get new information from the server. ","startTime":1662040,"duration":3440,"startOfParagraph":false},{"content":"But using AJAX, you can pull for that new information constantly, ","startTime":1665480,"duration":3290,"startOfParagraph":false},{"content":"or pull for it when you click a button or anything like that. ","startTime":1668770,"duration":3480,"startOfParagraph":false},{"content":"So this allows us to send requests without reloading the page, ","startTime":1672250,"duration":3890,"startOfParagraph":false},{"content":"and we can use either GET or POST requests. ","startTime":1676140,"duration":1990,"startOfParagraph":false},{"content":"GET requests are, for example, if you to to Google.com","startTime":1678130,"duration":7240,"startOfParagraph":true},{"content":"and do q=test. That's giving them a query test. ","startTime":1685370,"duration":5530,"startOfParagraph":false},{"content":"And that's a GET request because it's passing in those parameters into the URL itself. ","startTime":1690900,"duration":4990,"startOfParagraph":false},{"content":"A POST request is as if you're sending them via post. ","startTime":1695890,"duration":3360,"startOfParagraph":false},{"content":"It's like you put it in a letter and ship it off to them, ","startTime":1699250,"duration":3250,"startOfParagraph":false},{"content":"but they don't actually see the contents. They're not visible in the URL. ","startTime":1702500,"duration":2640,"startOfParagraph":false},{"content":"You can't directly type it in; you have to send it almost secretly. ","startTime":1705140,"duration":5900,"startOfParagraph":false},{"content":"It's in a post. ","startTime":1711040,"duration":2840,"startOfParagraph":false},{"content":"But using jQuery, you can do GET and POST requests ","startTime":1713880,"duration":4780,"startOfParagraph":false},{"content":"much more easily than you normally could using just plain JavaScript. ","startTime":1718660,"duration":4080,"startOfParagraph":false},{"content":"You can query APIs using GET requests, and you can also check for login information. ","startTime":1722740,"duration":7400,"startOfParagraph":false},{"content":"On the next page, I created this, which asks, \"What's for lunch?\"","startTime":1730140,"duration":4260,"startOfParagraph":false},{"content":"using the Harvard food API, so let's pull that up.","startTime":1734400,"duration":3830,"startOfParagraph":false},{"content":"This is just an example of how you can use jQuery to do a GET request to an API","startTime":1738230,"duration":3610,"startOfParagraph":false},{"content":"and get information back from it. ","startTime":1741840,"duration":2360,"startOfParagraph":false},{"content":"So we want to see the menu for today, ","startTime":1744200,"duration":2890,"startOfParagraph":false},{"content":"and we want to see what's for lunch. ","startTime":1747090,"duration":3470,"startOfParagraph":false},{"content":"Here's the URL to create a GET request in jQuery. ","startTime":1750560,"duration":5940,"startOfParagraph":false},{"content":"you use the $.get function. ","startTime":1756500,"duration":2100,"startOfParagraph":false},{"content":"The first argument is the URL, so exactly what you're querying. ","startTime":1758600,"duration":3690,"startOfParagraph":false},{"content":"Then the next argument is a function that executes when the GET request is complete.","startTime":1762290,"duration":4910,"startOfParagraph":false},{"content":"So you send off some request to the server, wait for it to come back.","startTime":1767200,"duration":2780,"startOfParagraph":false},{"content":"When it does come back, you're going to take some action with the data that's back from the server. ","startTime":1769980,"duration":3790,"startOfParagraph":false},{"content":"Let's go ahead and code this as well.   ","startTime":1773770,"duration":3750,"startOfParagraph":false},{"content":"I didn't code this either, on purpose. ","startTime":1777520,"duration":4590,"startOfParagraph":false},{"content":"Here's the TODO. First of all, let's use the event binding","startTime":1782110,"duration":4550,"startOfParagraph":false},{"content":"so that when this button is pressed, we send off a GET request. ","startTime":1786660,"duration":4160,"startOfParagraph":false},{"content":"And when that GET request returns with some data, ","startTime":1790820,"duration":2590,"startOfParagraph":false},{"content":"we're going to write it into this meal info ID div. ","startTime":1793410,"duration":3880,"startOfParagraph":false},{"content":"First of all, let's select the food button ID. ","startTime":1797290,"duration":5570,"startOfParagraph":false},{"content":"When it's clicked, we want it to do something. ","startTime":1802860,"duration":4460,"startOfParagraph":false},{"content":"Let's just make it an anonymous fuction, as before. ","startTime":1807320,"duration":4610,"startOfParagraph":false},{"content":"Can wrap those curly braces, ","startTime":1811930,"duration":3620,"startOfParagraph":false},{"content":"and when this button is pressed, we want to send a GET request","startTime":1815550,"duration":2980,"startOfParagraph":false},{"content":"to check what's for lunch. ","startTime":1818530,"duration":2220,"startOfParagraph":false},{"content":"To do that, we can just type in $.get. ","startTime":1820750,"duration":4220,"startOfParagraph":false},{"content":"This is a jQuery function, using the dollar sign. ","startTime":1824970,"duration":3880,"startOfParagraph":false},{"content":"It takes a couple of arguments. The first one is the URL, ","startTime":1828850,"duration":2580,"startOfParagraph":false},{"content":"the second one is the callback function, the function that's called ","startTime":1831430,"duration":3020,"startOfParagraph":false},{"content":"when that request actually returns. ","startTime":1834450,"duration":3290,"startOfParagraph":false},{"content":"Let's just build the URL first. ","startTime":1837740,"duration":2150,"startOfParagraph":false},{"content":"We can get it from the API that David wrote up. ","startTime":1839890,"duration":4760,"startOfParagraph":false},{"content":"Going here, we can see that it's food.cs50.net/api/1.3/menus, ","startTime":1844650,"duration":6710,"startOfParagraph":false},{"content":"and then you just pass in the names of the parameters that you would like. ","startTime":1851360,"duration":2780,"startOfParagraph":false},{"content":"So parameter 1 is value 1. ","startTime":1854140,"duration":3620,"startOfParagraph":false},{"content":"It looks like standard date, start date, defaults to today","startTime":1857760,"duration":3150,"startOfParagraph":false},{"content":"if you don't enter anything, and end date also defaults","startTime":1860910,"duration":2200,"startOfParagraph":false},{"content":"to today if you don't enter anything. ","startTime":1863910,"duration":2020,"startOfParagraph":false},{"content":"That's what we want. We want to just get the information for today. ","startTime":1865930,"duration":4860,"startOfParagraph":false},{"content":"We want the format to be in JSON. ","startTime":1870790,"duration":2160,"startOfParagraph":true},{"content":"That's just arbitrary; you can use any form that you want. ","startTime":1872950,"duration":2620,"startOfParagraph":false},{"content":"You can use CSV, but JSON is JavaScript Object Notation. ","startTime":1875570,"duration":3380,"startOfParagraph":false},{"content":"It's very easy for JavaScript to understand what it means,","startTime":1878950,"duration":5200,"startOfParagraph":false},{"content":"and we can print it out more easily that way. ","startTime":1884150,"duration":2960,"startOfParagraph":false},{"content":"So let's request it in JSON, and let's request lunch. ","startTime":1887110,"duration":3380,"startOfParagraph":false},{"content":"So meal = lunch. Just to write up that URL, we go back here. ","startTime":1890490,"duration":7170,"startOfParagraph":false},{"content":"There's menus. The first parameter is output = JSON","startTime":1897660,"duration":3630,"startOfParagraph":false},{"content":"because that's what we want, and you separate the parameters with an 'and.'","startTime":1901290,"duration":3350,"startOfParagraph":false},{"content":"The second parameter is--I don't remember. ","startTime":1904640,"duration":4300,"startOfParagraph":false},{"content":"Meal. And we want meal = lunch. ","startTime":1908940,"duration":3230,"startOfParagraph":false},{"content":"You can test this URL by typing it into your browser and going to it. ","startTime":1912170,"duration":5220,"startOfParagraph":false},{"content":"It will give you some output. It's just a bunch of stuff that's for lunch. ","startTime":1917390,"duration":5730,"startOfParagraph":false},{"content":"It's in this ugly format. We want to print it onto our page in a better format. ","startTime":1923120,"duration":7290,"startOfParagraph":false},{"content":"So the URL is correct, now we just need to write a function","startTime":1930410,"duration":2170,"startOfParagraph":false},{"content":"to call back when the request is successful. ","startTime":1932580,"duration":5720,"startOfParagraph":false},{"content":"This function will actually take an argument. It will be data. ","startTime":1938300,"duration":2130,"startOfParagraph":false},{"content":"The data is what comes back from the GET request after the GET request is done. ","startTime":1940430,"duration":5220,"startOfParagraph":false},{"content":"We can do the curly braces; in here we write the anonymous function","startTime":1945650,"duration":3210,"startOfParagraph":false},{"content":"that executes, using that data when we get the information back. ","startTime":1948860,"duration":5040,"startOfParagraph":false},{"content":"So data, when we typed in this URL, ","startTime":1953900,"duration":3940,"startOfParagraph":false},{"content":"this is what the data's going to look like. It's going to be this huge string. ","startTime":1957840,"duration":3700,"startOfParagraph":false},{"content":"But the good thing is, JavaScript can parse it by using the JSON.parse function.  ","startTime":1961540,"duration":7070,"startOfParagraph":false},{"content":"So let's create a new variable called parse data. ","startTime":1968610,"duration":6340,"startOfParagraph":false},{"content":"And parse data is an array of objects. ","startTime":1974950,"duration":2110,"startOfParagraph":false},{"content":"Each object contains information such as--well, let's take a look. ","startTime":1977060,"duration":7140,"startOfParagraph":false},{"content":"It has a date, a meal, category, recipe, all this other stuff. ","startTime":1984200,"duration":4780,"startOfParagraph":false},{"content":"So let's just print out the name for each one. ","startTime":1988980,"duration":1880,"startOfParagraph":false},{"content":"Let's iterate over the whole array of stuff that we get back from it, ","startTime":1990860,"duration":2930,"startOfParagraph":false},{"content":"and just print out each one--print out the name of each one. ","startTime":1993790,"duration":3780,"startOfParagraph":false},{"content":"This is a for loop. ","startTime":1997570,"duration":5100,"startOfParagraph":false},{"content":"JavaScript has this helpful syntax where you can create a variable and loop over an array, ","startTime":2002670,"duration":3360,"startOfParagraph":true},{"content":"and var i is just the iterator, so instead of having to do var i = 0, ","startTime":2006030,"duration":4120,"startOfParagraph":false},{"content":"i was less than the length, i++, you can just do var i in parsed data. ","startTime":2010150,"duration":10140,"startOfParagraph":false},{"content":"In this example, parsed data(i) will correspond to the current element ","startTime":2020290,"duration":6770,"startOfParagraph":false},{"content":"of the array, the actual object. ","startTime":2027060,"duration":2790,"startOfParagraph":false},{"content":"And we want to get the name out of it. ","startTime":2029850,"duration":1870,"startOfParagraph":false},{"content":"So let's just do name. ","startTime":2031720,"duration":2450,"startOfParagraph":false},{"content":"And the last thing is, we're going to have some jQuery again. ","startTime":2034170,"duration":2830,"startOfParagraph":false},{"content":"Actually add it to the div, this meal info div that's currently empty. ","startTime":2037000,"duration":5660,"startOfParagraph":false},{"content":"So let's select that. ","startTime":2042660,"duration":2770,"startOfParagraph":false},{"content":"We'll use jQuery and select meal info div ID, or meal info ID, sorry. ","startTime":2045430,"duration":8440,"startOfParagraph":false},{"content":"We want to append to this. ","startTime":2053870,"duration":2710,"startOfParagraph":false},{"content":"If we did test, for example, it would just overwrite it every single time. ","startTime":2056580,"duration":4450,"startOfParagraph":false},{"content":"So we can just append this. ","startTime":2061030,"duration":8160,"startOfParagraph":false},{"content":"The current element in the array, we'll get the name out of it, ","startTime":2069190,"duration":2699,"startOfParagraph":false},{"content":"and we'll append it to the end of the meal info ID div. ","startTime":2071889,"duration":6270,"startOfParagraph":false},{"content":"And then just to make it look cleaner, ","startTime":2078159,"duration":1961,"startOfParagraph":false},{"content":"we'll also append a line break so it's not all on one line. ","startTime":2080120,"duration":11430,"startOfParagraph":false},{"content":"So if all goes well, that should be good to--","startTime":2091550,"duration":3730,"startOfParagraph":false},{"content":"first of all, whenever this button is clicked, ","startTime":2095280,"duration":1940,"startOfParagraph":false},{"content":"it will send off a GET request to this URL. ","startTime":2097220,"duration":2850,"startOfParagraph":false},{"content":"When the data comes back from it, it'll parse it, ","startTime":2100070,"duration":2430,"startOfParagraph":false},{"content":"turn it into JSON, loop over the whole array representing that data, ","startTime":2102500,"duration":4450,"startOfParagraph":false},{"content":"and then append the name and a line break","startTime":2106950,"duration":3360,"startOfParagraph":false},{"content":"to every line in this meal info ID which was previously empty. ","startTime":2110310,"duration":6190,"startOfParagraph":false},{"content":"So going back to this page, we'll refresh, ","startTime":2116500,"duration":2410,"startOfParagraph":false},{"content":"click, find out--it does not work. That's unfortunate. ","startTime":2118910,"duration":4780,"startOfParagraph":false},{"content":"And this is where debugging comes in. ","startTime":2123690,"duration":2140,"startOfParagraph":false},{"content":"Index.html, line 1. ","startTime":2125830,"duration":4240,"startOfParagraph":false},{"content":"That's interesting. ","startTime":2130070,"duration":27140,"startOfParagraph":false},{"content":"All right, well, rather than spend time doing this, I'm just going to ","startTime":2157210,"duration":2510,"startOfParagraph":false},{"content":"pull up the done file that I have, which is the completed version. ","startTime":2159720,"duration":7350,"startOfParagraph":false},{"content":"I'm not sure what the difference is, but we can just open this up instead. ","startTime":2167070,"duration":6640,"startOfParagraph":false},{"content":"And we go to the AJAX, and this should work correctly. ","startTime":2173710,"duration":6030,"startOfParagraph":false},{"content":"That is what was for lunch today, ","startTime":2179740,"duration":1990,"startOfParagraph":false},{"content":"in no particular order, with quotes around it, so it's not the prettiest. ","startTime":2181730,"duration":3140,"startOfParagraph":false},{"content":"But, obviously, if you were doing this for a final project, ","startTime":2184870,"duration":2220,"startOfParagraph":false},{"content":"you would make it look better. ","startTime":2187090,"duration":3030,"startOfParagraph":false},{"content":"But that's just a simple example of how you do the GET request. ","startTime":2190120,"duration":2410,"startOfParagraph":false},{"content":"And if we look at the actual code, I'm guessing, I'm pretty sure","startTime":2192530,"duration":2050,"startOfParagraph":false},{"content":"it's still pretty much the same. ","startTime":2194580,"duration":5110,"startOfParagraph":false},{"content":"Oh, I forgot to convert it to a string, that's it. ","startTime":2199690,"duration":25300,"startOfParagraph":false},{"content":"No, it's still not working. Regardless, here's the actual completed code","startTime":2224990,"duration":2930,"startOfParagraph":false},{"content":"for what this should look like, ","startTime":2227920,"duration":2380,"startOfParagraph":false},{"content":"and it does the same thing as what I just implemented. ","startTime":2230300,"duration":6100,"startOfParagraph":false},{"content":"When you click on the button, it uses GET JSON to automatically parse the data. ","startTime":2236400,"duration":6360,"startOfParagraph":false},{"content":"It takes the data back from it and loops through the whole array ","startTime":2242760,"duration":6430,"startOfParagraph":false},{"content":"and prints out the--whatever's for lunch today, the name of it, ","startTime":2249190,"duration":3580,"startOfParagraph":false},{"content":"and appends a line break after each line. ","startTime":2252770,"duration":5250,"startOfParagraph":false},{"content":"That's how you use the GET function.","startTime":2258020,"duration":3080,"startOfParagraph":false},{"content":"You can also use POST, which I didn't have time","startTime":2261100,"duration":2940,"startOfParagraph":true},{"content":"to write up an example for it, but we can look at the documentation. ","startTime":2264040,"duration":3900,"startOfParagraph":false},{"content":"If you look at jquery.post, ","startTime":2267940,"duration":5280,"startOfParagraph":false},{"content":"you can see that it's almost the same thing. ","startTime":2273220,"duration":2290,"startOfParagraph":false},{"content":"You have a URL, but instead of passing parameters using--","startTime":2275510,"duration":6140,"startOfParagraph":false},{"content":"just putting them in the string for the URL itself, ","startTime":2281650,"duration":2340,"startOfParagraph":false},{"content":"you have to pass in this data variable ","startTime":2283990,"duration":2310,"startOfParagraph":false},{"content":"that is basically an array, a dictionary that maps parameters to values. ","startTime":2286300,"duration":5690,"startOfParagraph":false},{"content":"You pass that in, and that sends them in using a POST. ","startTime":2291990,"duration":5700,"startOfParagraph":false},{"content":"And once you have that, then you can have a success function","startTime":2297690,"duration":3100,"startOfParagraph":false},{"content":"that executes when the data comes back. ","startTime":2300790,"duration":3140,"startOfParagraph":false},{"content":"Otherwise, it's exactly the same. So using POST, ","startTime":2303930,"duration":2500,"startOfParagraph":false},{"content":"you might want to use POST, for example, if you have an input form","startTime":2306430,"duration":3540,"startOfParagraph":false},{"content":"you let people input passwords into it, and send those passwords off","startTime":2309970,"duration":5810,"startOfParagraph":false},{"content":"to your back-end script, to check in the database whether that user is valid or not. ","startTime":2315780,"duration":6070,"startOfParagraph":false},{"content":"You can do that all using jQuery instead of having to refresh the page at all. ","startTime":2321850,"duration":4850,"startOfParagraph":false},{"content":"That's how I implemented in the blog that I showed you earlier. ","startTime":2326700,"duration":5460,"startOfParagraph":false},{"content":"If we go to the end portal and log out, log out, ","startTime":2332160,"duration":7370,"startOfParagraph":false},{"content":"Log out doesn't work. ","startTime":2339530,"duration":3070,"startOfParagraph":false},{"content":"Well, let me just open it up in a new window. ","startTime":2342600,"duration":10760,"startOfParagraph":false},{"content":"Here there is a password, and I was going to type in something random. ","startTime":2353360,"duration":3220,"startOfParagraph":false},{"content":"It doesn't work, but you can see that we didn't","startTime":2356580,"duration":2010,"startOfParagraph":false},{"content":"actually have to refresh the page at all. ","startTime":2358590,"duration":2250,"startOfParagraph":false},{"content":"The code, if you want to look at it, ","startTime":2360840,"duration":3770,"startOfParagraph":false},{"content":"is all available in here. ","startTime":2364610,"duration":12850,"startOfParagraph":false},{"content":"So the code I wrote last year sometime. ","startTime":2377460,"duration":8220,"startOfParagraph":false},{"content":"As you can see here, we're sending a POST request. ","startTime":2385680,"duration":2110,"startOfParagraph":false},{"content":"I have a file called login.php in the back end, ","startTime":2387790,"duration":2610,"startOfParagraph":false},{"content":"which checks if the password is valid. ","startTime":2390400,"duration":3460,"startOfParagraph":false},{"content":"The parameters we pass in are password, mapped to ","startTime":2393860,"duration":2140,"startOfParagraph":false},{"content":"the input that's in this input box currently. ","startTime":2396000,"duration":4030,"startOfParagraph":false},{"content":"And when the data comes back, we check.","startTime":2400030,"duration":4080,"startOfParagraph":false},{"content":"If the data is false, then we say incorrect password, slide it down, ","startTime":2404110,"duration":3570,"startOfParagraph":false},{"content":"and just make it disappear after that. ","startTime":2407680,"duration":1900,"startOfParagraph":false},{"content":"Otherwise, we load the admin page. ","startTime":2409580,"duration":2740,"startOfParagraph":false},{"content":"And this was all done using JSON. ","startTime":2412320,"duration":2760,"startOfParagraph":false},{"content":"In this many lines of code, you can just pass the data to the back end, ","startTime":2415080,"duration":3430,"startOfParagraph":false},{"content":"check whether it's correct, check whether you logged in correctly, ","startTime":2418510,"duration":2510,"startOfParagraph":false},{"content":"and actually respond to it, redirecting the person to the correct page","startTime":2421020,"duration":3180,"startOfParagraph":false},{"content":"or not letting them log in and telling them that they had an incorrect password. ","startTime":2424200,"duration":5560,"startOfParagraph":false},{"content":"So that's an example of how you could use jQuery POST","startTime":2429760,"duration":3280,"startOfParagraph":false},{"content":"to send a POST request to your back end, ","startTime":2433040,"duration":3970,"startOfParagraph":false},{"content":"checking whether someone's logged in correctly. ","startTime":2437010,"duration":5390,"startOfParagraph":false},{"content":"All right, so that's all the examples I had, and all the stuff I wanted to cover. ","startTime":2442400,"duration":2420,"startOfParagraph":true},{"content":"Those are the major things that jQuery allows you to do: ","startTime":2444820,"duration":2290,"startOfParagraph":false},{"content":"select elements, modify them using DOM manipulation, ","startTime":2447110,"duration":5530,"startOfParagraph":false},{"content":"you can add effects, activate things on certain events, ","startTime":2452640,"duration":3700,"startOfParagraph":false},{"content":"and also do AJAX requests very seamlessly and easily. ","startTime":2456340,"duration":4090,"startOfParagraph":false},{"content":"So thank you for coming or watching, ","startTime":2460430,"duration":2410,"startOfParagraph":false},{"content":"and if you have any questions, just let me know. Yeah?","startTime":2462840,"duration":3390,"startOfParagraph":false},{"content":"[Student] Back when you showed, you had JSON after the POST request in quotes, ","startTime":2466230,"duration":6500,"startOfParagraph":false},{"content":"and I was just wondering what that did.","startTime":2472730,"duration":2440,"startOfParagraph":false},{"content":">>Yeah, I see. The question was that, in the example I just showed, ","startTime":2475170,"duration":4900,"startOfParagraph":false},{"content":"there was the word JSON in quotes around the--","startTime":2480070,"duration":5720,"startOfParagraph":false},{"content":"I'll just pull it up again--around the POST function. ","startTime":2485790,"duration":5900,"startOfParagraph":false},{"content":"I'm just pulling it up to show. ","startTime":2491690,"duration":11630,"startOfParagraph":false},{"content":"So here's this POST request, and there's this JSON in quotes. ","startTime":2503320,"duration":3570,"startOfParagraph":false},{"content":"That just defines what we're expecting the output to be. ","startTime":2506890,"duration":3390,"startOfParagraph":false},{"content":"So if we pass in JSON as the expected data type, ","startTime":2510280,"duration":3790,"startOfParagraph":false},{"content":"it's not a requirement, but if we pass it in, ","startTime":2514070,"duration":2000,"startOfParagraph":false},{"content":"then the data will automatically be parsed as JSON. ","startTime":2516070,"duration":2520,"startOfParagraph":false},{"content":"So we don't have to call the JSON parse function on it, ","startTime":2518590,"duration":2010,"startOfParagraph":false},{"content":"it'll just happen automatically. ","startTime":2520600,"duration":2020,"startOfParagraph":false},{"content":"And if you take a look at the documentation for POST, ","startTime":2522620,"duration":2530,"startOfParagraph":false},{"content":"there is this data type variable, the type of data expected from the server. ","startTime":2525150,"duration":4700,"startOfParagraph":false},{"content":"It defaults to an intelligent guess that can be wrong, ","startTime":2529850,"duration":2810,"startOfParagraph":false},{"content":"so you can leave it blank, but it's just the type of data","startTime":2532660,"duration":2860,"startOfParagraph":false},{"content":"in coding that you're using, whether it's JSON or XML or something else. ","startTime":2535520,"duration":6160,"startOfParagraph":false},{"content":"Any other questions? ","startTime":2541680,"duration":3600,"startOfParagraph":true},{"content":"All right. If you have any other questions, feel free to email me","startTime":2545280,"duration":2020,"startOfParagraph":false},{"content":"at vshekhawat@college.harvard.edu,","startTime":2547300,"duration":3530,"startOfParagraph":false},{"content":"and the slides and code should be available online pretty soon. ","startTime":2550830,"duration":4030,"startOfParagraph":false},{"content":"Good luck with your final projects, hope you use jQuery. ","startTime":2554860,"duration":7950,"startOfParagraph":false},{"content":"[CS50.TV]","startTime":2562810,"duration":4000,"startOfParagraph":false}]}