[Seminar: JQUERY] [Vipul Shekhawat, Harvard University] [This is CS50.] [CS50.TV] If you're following along at home, you can actually access my slides online by going to this link.  It's TjjRWj, on bit.ly.  You can also just go to the URL directly,  which is cloud.cs50.net/~vshekhawat, which is my name,  and jquery.  I highly encourage you to follow along if you're watching at home,  and if you're here, also, because this is a pretty interactive presentation.  

So today I'm going to be talking about jQuery, and the first question is,  what is jQuery? This year, I know you guys haven't covered JavaScript in as much detail as we have in past years.  JavaScript is, first of all, just a client-side language that you use to run scripts and code on each user's machine.  So you have a server that provides web pages to people,  but you might want to do stuff on their machine,  ask their machine to send requests to your server every 30 seconds or something like that.  You can do that using JavaScript.  JQuery just provides more functionality on top of JavaScript that does extra stuff for you.  If you look at the contents on top,  that describes some of the stuff that you're able to do.  So overall, it was created in January 2006.  It was first conceived of in August 2005.  It's been around for a couple years, and it's really part of the new Web 2.0 movement that's made the Internet so shiny.  It's the most widely used JavaScript library.  Over 19.6 million websites are using it, and the usage is still increasing according to builtwith.com, which, apparently, over the last year,  has just been continuously increasing fairly linearly.  Among the top 10 million sites, there's still-- around 40% of them are currently using it.  Facebook uses it, lots of other websites currently use it.  You can look at those statistics on your own, if you'd like.  And you could tell it's legit because it has a foundation and 13 board members,  along with a team of 20 people who work on it on a regular basis.  So it's very widely used, it has a .org URL, it's fancy, it has spin-offs for other stuff, so it's a big deal.  

Why should you use it? JQuery is very lightweight.  That means it's not a huge file. You can download the minified file, which is without all the white space and comments, and it's only 32 kB. So it's easy to just toss onto your web page and just to start using it.  It's also very efficiently written, so it doesn't take up a lot of-- it doesn't slow down your website much when you use it.  It lets you implement things that were previously unfeasible.  There are some aspects of functionality, like creating animations, that normally would be very, very difficult to do.  But in jQuery they're actually very simple.  And there are some things that are annoying to do,  possible in JavaScript, like sending a POST request,  but to send a request to a server, you have to write five or six or seven lines of code.  Now you can just do it in a single line of code, in a single function call. That really simplifies a lot of the stuff that you're doing.  And all the cool kids are using it. By that, I mean me.  In my final project last year, which is news.whrb.org,  which is for the radio station, I created this blog which hosts all the shows that we've done and the MP3 files for them.  You can browse through the past shows,  and it's all done using jQuery. You can tell  because of all these animations, essentially.  So if you have--if you're creating a new post,  you see these little slideDowns; that's all done using jQuery. And this fade--so that kind of stuff is all done using jQuery,  and you don't have to constantly reload the page to navigate the site.  Another cool thing that's made using jQuery is this presentation.  I'm using this open source thing called scrolldeck,  which someone wrote on top of jQuery.  If you actually look at the source, you can see that  they're using this dollar sign; dollar signs are used in jQuery to signify that a function is a jQuery function.  So they're defining a wrapper on top of jQuery  that allows you to make a presentation like this,  and you can see that here they're including the original jQuery file,  which is what you'll have to include if want to use jQuery in your own websites.  

Touching on that, how do you install it?  You can just go to jQuery.com and download the file,  add it to a web directory and include it. So just on top, in the head tag of your HTML file of your main HTML file, just have that line of code with the correct version for which version of jQuery you're using.  You can download it by going to jQuery.com,  click "download jQuery," and you've got it. That's it.  And actually, we can take a look at what it looks like.  If you click on download here, jQuery is this.  It's just one big JavaScript file that does all the magic stuff for you.  This is the minified version, which is not readable at all.  You can also look at the development version, which is readable  but still very, very lengthy.  It's a lot of stuff in there.  You can also link to Google's hosted version of it.  So that'll allow you to just rely on Google to provide it.  They provide every version of it, available at all times.  So you can probably rely on Google to host it for you.  Or you can link to jQuery's own latest version.  They have a URL that's always updated to the latest version.  It's jQuery-latest, and there's one problem with that,  which is that if the updated jQuery and some of the previous functionality they had becomes retrograded or deprecated,  it may not--it may start to not get supported anymore.  So if you write a website using version 1.8.2,  by the time version 2.7 comes out some of the functions you wrote don't work anymore.  So it's better to just download the 32 kB file,  put it on your web page, and it'll work forever.  

I'm going to go ahead and start talking about the actual functionality of jQuery.  The first thing is selectors. This is what jQuery was initially conceived to provide.  And you can click on documentation to look at  the detailed documentation for the selectors I'm going to be covering.  The idea behind selectors is that you can select HTML elements on a page.  Elements on a page have IDs and classes and other identifying aspects to them.  There's also--they're in different orders.  Some of the time they're nested inside each other.  JQuery allows you to construct simple queries that retrieve elements from the page.  Then you can manipulate these elements using jQuery functions,  which is the manipulation section we'll get to later.  You can change the HTML, change the CSS,  you can also animate and add functions that activate on certain events.  So, for example, if something's clicked, you want something to happen,  you can do that using jQuery as well.  And there are a huge number of ways to select elements.  Most of them I've never used, but there are the basic ones,  which are pretty important.  The element selector, for example, if you're just selecting anything  that is a div--I actually have the code open for this slide presentation.  So, for example, here's the first slide.  Here we have a div. If we actually select all the divs on the page,  it'll just give us an array of all the divs that exist in this file.  The ID selector lets you select anything with a given ID.  So if this, for example, this thing has the ID "what," and if we did this with #what instead of some ID,  it would just return an array that has a single element and that is that element of the page.  We can also combine selectors this way by having only select things with IDs that are divs.  So yeah. Only select divs that have that ID.  For class you just use a dot, it's the same thing as CSS.  Descendant also works; so if you have some class and it has nested elements within it--so, for example,  there is some class and it has an anchor tag to link to another page,  you can use this syntax to retrieve the link.  You can also select multiple things at once; just separate them by commas,  use any selector you'd like, and you will select all of them at once, in a single array. And then there's also the not selector, so you can select all divs that do not have some specific class.  And that's just a helpful way to get an introduction to how this selection works.  I'll show some concrete examples in a second.  

Advanced selectors are--these are just a few examples.  There are dozens of these, but if you want to select all the image tags within some element, then you just do :image.  If you want to select the even elements, for example, if there are 20 of them,  you want to select 0, 2, 4, 6 and so on,  you do :even, or you can also do :odd.  These are pseudo selectors, which means that they actually compute  every other element rather than just going and selecting all of them.  You can also--each element can also have specific attributes.  So, for example, class = center is also an attribute. For this anchor tag, href, hypertext reference, is an attribute also.  So you can select something that links to a specific page or just--it's really general.  You can select anything with any attribute that you'd like. And then, also, attribute contains.  If you, for example, wanted to select all the input elements that have the word "pass" as the name of them,   if a page has an input text block  that's called "password," that'd be one way you could select that.  And there are many more. You can go ahead and look at the documentation  and see specific examples of how it works.  

The next thing is DOM manipulation.  After we select elements, we will want to actually do stuff with them.  So far we haven't looked at that at all, but if you look at the documentation,  there's really a lot that we could do.  At this point, we're going to select elements on this presentation  and manipulate them using jQuery.  Because this is implemented using jQuery, we have access to the jQuery library,  and we can use those functions within this code.  One useful thing that you may not know about is the console. And Google Chrome is what I'm using. You can press alt command J or alt control J to open the console.  In Firefox I think it's command shift K or control shift K.  In Safari you have to go change some settings. There's a link if you'd like to do it, but I recommend getting Chrome or Firefox.  So let's open up the console, it's down here.  It allows you to basically just do anything you want.  So you can just type in create a variable called x,  x = 5, let's see what x + 2 is.  You can even do something like CS + let's see, x + 45, that will be CS50.  You can just do some typical JavaScript stuff.  But you can also do jQuery in here.  

So let's look at this first aspect here.  We're going to create a variable called HTML, which is a string.  It has a paragraph tag in it, that's called some new text.  So we have this HTML, it's some new text, in paragraph tags.  Now we actually want to add it to the page.  I set it up so that the HTML for this paragraph, this title here, is append ID.  If we select append ID and then append to it the HTML variable I just created,  it will add that HTML at the end, right after this paragraph tag.  So if we do that--we selected this paragraph,  and we've called the append function with the HTML variable I just added,  it will add that new text right there on the page.  We can also prepend, which means it will go before, at the beginning of that element.  So there is some new text at the beginning and afterwards.  I can go ahead and refresh to get rid of this stuff I've just done.  But that's an example of how you can use the prepend and append methods to manipulate stuff on the page, add some HTML.  

You can also change classes.  Back in this style file, I've created this for the win class that has text color red, some background color, and a text shadow.  It looks hideous, but I can actually-- this paragraph corresponds to class ID.  So I can add the class for the win.  I can execute this in the console,  and that will add that class, and now it looks hideous, as expected.  The CSS automatically gets applied to the classes that you-- if there's CSS for a class, it automatically gets applied  if you change the class of an element.  Then we can just remove it using remove class.  So if you have some predefined classes like red or highlighted,  and then you want to apply those to elements,  you don't have to do all the CSS styling every time.  You can just add the class to an element, and then it will automatically become-- it will automatically look appropriate for that class.  We can also remove things; so I'm going to select all the divs on the page and remove them.  What is that going to look like?  It's going to look like nothing, so there's actually nothing left.  My presentation is gone.  I can refresh and bring it back, fortunately,  because it's just running once,  but that's an example of removing, if you want to completely destroy an element off the page.  

You can also overwrite, and I'm going to select all the paragraph tags on the page and go inside them and replace whatever text they have in them with just the word "testing." If you do this, you'll replace every paragraph on the page with this testing.  Yep. They're all replaced with testing.  So that's an example of accessing the text and overwriting it.  You can also retrieve information, and this is really cool for input boxes.  If you have an input box that people are typing stuff into,  people are typing stuff into it,  here we select the input, any input tag with a type of text.  In this case, there's only one input box in the whole presentation,  so we'll just select the first one, and then we call the val function on it.  That returns the value, and for an input box,  the value is just whatever happens to be inside it.  So if we do this, it just returns the string stuff.  And if we call it again after writing more stuff, it turns into more stuff.  That's one great way to access elements of an input box, and then check,  is this a valid email address, is this a valid date, for example.  You can just retrieve stuff instantly as people are typing it,  and then check whether it's valid, send it back to a server, do anything you want with it. And that's how you access what's inside those boxes.  

You can also modify CSS directly, so instead of adding a class that has some predefined properties,  you can just add whatever CSS you want to anything.  So let's select body, which is the entire presentation,  and color is the property that defines what the colors the text is.  If we change it to red, all the text in the page will turn to red.  We can do something like background color blue,  there we go; it's beautiful. You can do anything you want with this.  Using the CSS property, you can really modify how anything looks at any time.  The next thing is effects.  Effects are basically the same thing as modifying the CSS,  but they actually provide some extra animation to it.  So instead of just showing or hiding something or changing the color,  you can actually make it animated.  Here's the documentation, if you want to take a look at the extensive documentation for it.  But I'm going to cover the main ones.  There are the show and hide properties.  Show/hide ID actually corresponds to this whole box,  so if I hide it, it will just disappear.  And I can show it again if I want to make it come back.  And it's back. It didn't actually disappear,  I didn't actually remove it from the page, I just set the CSS property of visibility to hidden so you can't see it anymore.  There's also slide up and slide down; that allows you to have this effect.  It slides up to disappear, and after it disappears you can slide it down to make it come back. And now it's back.  There's also this fade effect, which--fade ID corresponds to this box.  If I fade it out, then it'll slowly disappear.  I can also fade it in, and it will come back.  You can also do fade to, which is specific to the fade function.  You can have it fade to any specific opacity that you want. So if you fade it slowly to .5, it'll become half visible.  I can make it go to .1, and back to 1 to make it fully visible again.  That's just another animation that you can do.  

There are also the toggle effects.  So I'm going to select the toggle ID, which corresponds to this box,  and on that div you can call toggle; if it's visible it will become invisible,  if it's invisible it will become visible again.  So I just called this toggle function twice; the first one was  the same thing as hide, the second call was the same thing as a show.  And you can also do this with a fade toggle,  which does the same thing, except it actually fades.  And same thing with the slide toggle.  There are chained effects as well, which means  if you select an element and just call a bunch of animation methods on it,  if you wanted it to fade out, then slide down,  and then hide and then fade in, it will do them in a row.  So disappeared, came back--for some reason, the hide didn't happen.  Let's try it out. Yeah, so it faded out and then it slid away.  And there are plenty more. You can use the animate function  to create your own animations, which is fairly complex,  but it provides you with infinite extensibility.  You can make any kind of animation you want.  You can also use queue to queue up multiple animations at a time.  So if you want something to fly across the page,  slide from the top right to the bottom left, you can do that,  and just have a bunch of actions going one after the other.  

The next thing we're going to talk about is events.  Events allow you--so far, we've just been typing things into the console and that is one way to make this happen,  but on an actual page, you're not going to be able to  make the user type things into the console.  You want things to happen automatically.  For that, you need to use events that activate on some certain event happening.  You can check the documentation for the full details. So let's see. We want to hide or show the box,  but right now this button doesn't do anything because I didn't implement it yet.  I'm going to go to the actual HTML page.  Here's the slide. There's a div for the slide. It has the class of slide.  There's the text. Now, there's this box and the box button.  How would we actually make this disappear?  First of all, let's write a function that makes the box ID disappear.  This is the syntax for funtion, let's just call it hideTheBox.  It doesn't take any arguments, because there are no arguments to be taken.  We can select the box ID.  So using the jQuery select, we can select box ID,  and then just make it disappear.  Let's make it fade out.  If we ran this function in the actual console,  we could define this function; we can call hideTheBox, and it works.  But we want it to happen when the button is actually pressed.  To do that, we have to use an event. To bind an event to some specific button or some action happening,  we have to select the element that the event will trigger-- or that will trigger the event, sorry.  

So first of all, let's select the box button ID because that's the button, and now, for that button,  we want to create an animation when it's clicked.  So there's this click function.  It allows you to bind another function to it.  This function takes another function as an argument we can pass in the hideTheBox function,  and whenever this button is clicked, that function will automatically execute.  So this will work if we save this, I'll refresh,  and--one second, I'm sorry.  Let me fix this really quickly.  Okay. There we go. So now the box is disappearing when we click the button.  We can also change this to just fadeToggle,  change it just to hide or show the box,  and this will also work too, if we refresh.  We can hide it, we can also show it, and that will continue to work.  Another thing we can do is, we don't actually have to define this hideTheBox function before we call the click function.  So instead of defining the function and calling hideTheBox,  we're only going to call it if this thing is clicked.  So we can define it anonymously in here,  which is a feature that JavaScript has.  You can define a function; normally, we would say function hideTheBox with arguments, but instead, we can just say function no arguments,  start the curly brace to define the function,  close that curly brace, and then just define the function in here,  within the first parenthesis and the last parenthesis that correspond to the arguments of the click function.  So we're passing in this function, we can copy this line of code right here,  and that will do the exact same thing.  And now we don't have this random fadeTheBox function  that is sitting around for no apparent reason.  The function was defined anonymously, it doesn't have a name.  It will only execute when we click on the box button.  So refreshing once more, one more time, and you can see that it still works.  And that's how you create events.  

There are a lot of different events that we can use.  I'm going to switch back to using the console to just show you how these work.  The IDs for each of these correspond to each box.  So this box is click ID, this one is key ID, and this one is mouse ID.  One more thing is that there's this action function; rather than typing it out every time,  I actually went ahead and defined this action function down here. It does the same thing as the hideTheBox function.  It gets this box and either fades it out or fades it in.  And that's why we're able to use it here.  So if we click on this click ID, we want to make the box disappear or reappear.  It's the same thing as the button that we had in the last slide.  Now after we call that, we can click on this and the box will disappear,  then click on it again and the box will reappear.  That's pretty simple. Double click does the same thing,  except it requires a double click.  So if you click on it once and click on it again nothing will happen, but if you double click quickly, it'll disappear.  If you double click again, it will come back.  So that's pretty simple.  Keyboard input is kind of weird; I don't think it actually works in this example because the key down, key up and key press and other key actions activate no matter what element you bind it to.  For example, even if I bound key down to body or something else completely,  then it would still activate no matter--it's not specific.  I don't have to be clicking on this and press a key to make anything disappear.  It would be activated regardless of what element I'm currently in.  So these don't actually work in this example  because it doesn't recognize me as entering input into the keyboard input div.  

But if you look at the mouse actions,  the first one is hover, and it can do some of this using CSS.  If you use CSS, you can create it so that if you hover over something,  then its style changes.  But using jQuery you can change the styles of other things as well.  So, for example, we're going to call action if we hover over this div.  That means if we hover over it, then the box will disappear. If we move away from it, the box will reappear.  If we call this and hover over it, the box does disappear,  and as soon as we move away, it comes back.  If we call this hover function on the mouse ID,  which corresponds to this box, then if we hover over the box,  then the box will actually disappear--it's being funky right now, but-- if we move away from it, it will reappear. Right now it's backwards for some reason.  The mouse enter and mouse move functions are somewhat similar, but slightly different.  Mouse enter only activates when the mouse enters the box, as expected.  So if you move into it, it'll disappear.  But it won't reappear when you move away; you'll have to move back onto it for it to come back.  There's also the mouse move function, which will activate whenever the mouse is even present in the box.  So it'll just keep on going, fading in and out.  And it's actually logging--it seems like it's just fading in and out,  but it's actually logging a lot more actions than this,  so when you move away it'll just keep going because it logged like a thousand of them.  Maybe not a thousand. Maybe five.  It logs more than that.  The point is, all the mouse actions, there are a lot of them.  You can read up on the other ones, but they are all slightly different,  and you can pick whichever one you need  for whichever specific purpose you're trying to do.  

The next thing I'm going to talk about is AJAX.  AJAX, I know we didn't cover JavaScript in as much depth this year,  so I'm just going to talk about AJAX in general for a minute.  AJAX stands for Asynchronous JavaScript and XML.  It's basically, for example, when you're on Facebook and it pushes you a notification,  that's because AJAX is running on your web browser.  Every couple of seconds your web browser's actually  going to Facebook's servers, asking them, do you have anything new for me,  and then it comes back to you.  This allows you to send requests to a server without actually having to load the page.  So normally, if you're just using PHP and a database,  you have to refresh the page before you can get new information from the server.  But using AJAX, you can pull for that new information constantly,  or pull for it when you click a button or anything like that.  So this allows us to send requests without reloading the page,  and we can use either GET or POST requests.  

GET requests are, for example, if you to to Google.com and do q=test. That's giving them a query test.  And that's a GET request because it's passing in those parameters into the URL itself.  A POST request is as if you're sending them via post.  It's like you put it in a letter and ship it off to them,  but they don't actually see the contents. They're not visible in the URL.  You can't directly type it in; you have to send it almost secretly.  It's in a post.  But using jQuery, you can do GET and POST requests  much more easily than you normally could using just plain JavaScript.  You can query APIs using GET requests, and you can also check for login information.  On the next page, I created this, which asks, "What's for lunch?" using the Harvard food API, so let's pull that up. This is just an example of how you can use jQuery to do a GET request to an API and get information back from it.  So we want to see the menu for today,  and we want to see what's for lunch.  Here's the URL to create a GET request in jQuery.  you use the $.get function.  The first argument is the URL, so exactly what you're querying.  Then the next argument is a function that executes when the GET request is complete. So you send off some request to the server, wait for it to come back. When it does come back, you're going to take some action with the data that's back from the server.  Let's go ahead and code this as well.    I didn't code this either, on purpose.  Here's the TODO. First of all, let's use the event binding so that when this button is pressed, we send off a GET request.  And when that GET request returns with some data,  we're going to write it into this meal info ID div.  First of all, let's select the food button ID.  When it's clicked, we want it to do something.  Let's just make it an anonymous fuction, as before.  Can wrap those curly braces,  and when this button is pressed, we want to send a GET request to check what's for lunch.  To do that, we can just type in $.get.  This is a jQuery function, using the dollar sign.  It takes a couple of arguments. The first one is the URL,  the second one is the callback function, the function that's called  when that request actually returns.  Let's just build the URL first.  We can get it from the API that David wrote up.  Going here, we can see that it's food.cs50.net/api/1.3/menus,  and then you just pass in the names of the parameters that you would like.  So parameter 1 is value 1.  It looks like standard date, start date, defaults to today if you don't enter anything, and end date also defaults to today if you don't enter anything.  That's what we want. We want to just get the information for today.  

We want the format to be in JSON.  That's just arbitrary; you can use any form that you want.  You can use CSV, but JSON is JavaScript Object Notation.  It's very easy for JavaScript to understand what it means, and we can print it out more easily that way.  So let's request it in JSON, and let's request lunch.  So meal = lunch. Just to write up that URL, we go back here.  There's menus. The first parameter is output = JSON because that's what we want, and you separate the parameters with an 'and.' The second parameter is--I don't remember.  Meal. And we want meal = lunch.  You can test this URL by typing it into your browser and going to it.  It will give you some output. It's just a bunch of stuff that's for lunch.  It's in this ugly format. We want to print it onto our page in a better format.  So the URL is correct, now we just need to write a function to call back when the request is successful.  This function will actually take an argument. It will be data.  The data is what comes back from the GET request after the GET request is done.  We can do the curly braces; in here we write the anonymous function that executes, using that data when we get the information back.  So data, when we typed in this URL,  this is what the data's going to look like. It's going to be this huge string.  But the good thing is, JavaScript can parse it by using the JSON.parse function.   So let's create a new variable called parse data.  And parse data is an array of objects.  Each object contains information such as--well, let's take a look.  It has a date, a meal, category, recipe, all this other stuff.  So let's just print out the name for each one.  Let's iterate over the whole array of stuff that we get back from it,  and just print out each one--print out the name of each one.  This is a for loop.  

JavaScript has this helpful syntax where you can create a variable and loop over an array,  and var i is just the iterator, so instead of having to do var i = 0,  i was less than the length, i++, you can just do var i in parsed data.  In this example, parsed data(i) will correspond to the current element  of the array, the actual object.  And we want to get the name out of it.  So let's just do name.  And the last thing is, we're going to have some jQuery again.  Actually add it to the div, this meal info div that's currently empty.  So let's select that.  We'll use jQuery and select meal info div ID, or meal info ID, sorry.  We want to append to this.  If we did test, for example, it would just overwrite it every single time.  So we can just append this.  The current element in the array, we'll get the name out of it,  and we'll append it to the end of the meal info ID div.  And then just to make it look cleaner,  we'll also append a line break so it's not all on one line.  So if all goes well, that should be good to-- first of all, whenever this button is clicked,  it will send off a GET request to this URL.  When the data comes back from it, it'll parse it,  turn it into JSON, loop over the whole array representing that data,  and then append the name and a line break to every line in this meal info ID which was previously empty.  So going back to this page, we'll refresh,  click, find out--it does not work. That's unfortunate.  And this is where debugging comes in.  Index.html, line 1.  That's interesting.  All right, well, rather than spend time doing this, I'm just going to  pull up the done file that I have, which is the completed version.  I'm not sure what the difference is, but we can just open this up instead.  And we go to the AJAX, and this should work correctly.  That is what was for lunch today,  in no particular order, with quotes around it, so it's not the prettiest.  But, obviously, if you were doing this for a final project,  you would make it look better.  But that's just a simple example of how you do the GET request.  And if we look at the actual code, I'm guessing, I'm pretty sure it's still pretty much the same.  Oh, I forgot to convert it to a string, that's it.  No, it's still not working. Regardless, here's the actual completed code for what this should look like,  and it does the same thing as what I just implemented.  When you click on the button, it uses GET JSON to automatically parse the data.  It takes the data back from it and loops through the whole array  and prints out the--whatever's for lunch today, the name of it,  and appends a line break after each line.  That's how you use the GET function. 

You can also use POST, which I didn't have time to write up an example for it, but we can look at the documentation.  If you look at jquery.post,  you can see that it's almost the same thing.  You have a URL, but instead of passing parameters using-- just putting them in the string for the URL itself,  you have to pass in this data variable  that is basically an array, a dictionary that maps parameters to values.  You pass that in, and that sends them in using a POST.  And once you have that, then you can have a success function that executes when the data comes back.  Otherwise, it's exactly the same. So using POST,  you might want to use POST, for example, if you have an input form you let people input passwords into it, and send those passwords off to your back-end script, to check in the database whether that user is valid or not.  You can do that all using jQuery instead of having to refresh the page at all.  That's how I implemented in the blog that I showed you earlier.  If we go to the end portal and log out, log out,  Log out doesn't work.  Well, let me just open it up in a new window.  Here there is a password, and I was going to type in something random.  It doesn't work, but you can see that we didn't actually have to refresh the page at all.  The code, if you want to look at it,  is all available in here.  So the code I wrote last year sometime.  As you can see here, we're sending a POST request.  I have a file called login.php in the back end,  which checks if the password is valid.  The parameters we pass in are password, mapped to  the input that's in this input box currently.  And when the data comes back, we check. If the data is false, then we say incorrect password, slide it down,  and just make it disappear after that.  Otherwise, we load the admin page.  And this was all done using JSON.  In this many lines of code, you can just pass the data to the back end,  check whether it's correct, check whether you logged in correctly,  and actually respond to it, redirecting the person to the correct page or not letting them log in and telling them that they had an incorrect password.  So that's an example of how you could use jQuery POST to send a POST request to your back end,  checking whether someone's logged in correctly.  

All right, so that's all the examples I had, and all the stuff I wanted to cover.  Those are the major things that jQuery allows you to do:  select elements, modify them using DOM manipulation,  you can add effects, activate things on certain events,  and also do AJAX requests very seamlessly and easily.  So thank you for coming or watching,  and if you have any questions, just let me know. Yeah? [Student] Back when you showed, you had JSON after the POST request in quotes,  and I was just wondering what that did. >>Yeah, I see. The question was that, in the example I just showed,  there was the word JSON in quotes around the-- I'll just pull it up again--around the POST function.  I'm just pulling it up to show.  So here's this POST request, and there's this JSON in quotes.  That just defines what we're expecting the output to be.  So if we pass in JSON as the expected data type,  it's not a requirement, but if we pass it in,  then the data will automatically be parsed as JSON.  So we don't have to call the JSON parse function on it,  it'll just happen automatically.  And if you take a look at the documentation for POST,  there is this data type variable, the type of data expected from the server.  It defaults to an intelligent guess that can be wrong,  so you can leave it blank, but it's just the type of data in coding that you're using, whether it's JSON or XML or something else.  

Any other questions?  All right. If you have any other questions, feel free to email me at vshekhawat@college.harvard.edu, and the slides and code should be available online pretty soon.  Good luck with your final projects, hope you use jQuery.  [CS50.TV]