DAVID J. MALAN: All right, so this here is the Myo arm band, a couple of which we have for CS50 final projects. And that was a demonstration we queued you up in advance where essentially this fairly tight arm band up here listens to your muscular movements that are then mapped in software to Colton's laptop over here which had iTunes and that song already queued up. Rather than me demoing this, Colton's been in the lab clearly all week getting a demonstration ready for one brave volunteer. If someone would like to come on up-- saw your hand first. Come on up. [00:01:09] All right. And what is your name? [00:01:13] AUDIENCE: Uh, Maria. [00:01:14] DAVID J. MALAN: Maria, nice to see you. Come on over here. Let me introduce you to Colton. Colton, this is Maria. [00:01:21] COLTON: Hi, nice to meet you. [00:01:23] DAVID J. MALAN: All right, so step one, we're going to have you put this on to your forearm so that it's pretty tight up near your elbow. And meanwhile, let's have put on our Google Glass and we'll mix technologies today. [00:01:33] COLTON: First we'll have to hook this into the things. [00:01:36] DAVID J. MALAN: OK. Actually, let's put your arm as close to this cable as possible so that we can first sync it up. [00:01:41] COLTON: Let's do this. [00:01:42] DAVID J. MALAN: And meanwhile, so that everyone can get a closer glance, we'll toss Andrew's camera up on the screen there. So we have a USB cable that's being plugged into Maria's armband. And let me toss Colton's screen up on the projector next. [00:02:00] So Colton is registering the device now as a Myo connected to this cable. And now what Maria's going to do momentarily is actually walk through the calibration steps and teach the software how her muscles respond when she make certain pre-defined gestures that the software understands. If you'd like to go in front of the screen. OK, keep trying. [00:02:30] COLTON: Go like this. And like that. And all the way to the right. Go back. [00:02:35] DAVID J. MALAN: OK. Different perspective. It's not you. It's us. [00:02:40] MARIA: OK. DAVID J. MALAN: No. Let's move it higher up so it's closer to your elbow, or even tighter. All right. [00:02:52] Here we go. This would be a good time for CS52X. There we go. [00:02:57] Very nice. OK. Thumb to pinky. [00:03:02] Very nice. Spread your fingers. Good. Wave right. It's curiously showing you with the left hand-- [00:03:17] COLTON: Yeah, that's wierd. DAVID J. MALAN: Wave to the right and move forward. Fast forward to skip or next. That's OK Wave right. [00:03:25] MARIA: I don't-- wait. [00:03:26] DAVID J. MALAN: Need some help? [00:03:28] COLTON: So you're going like this. MARIA: It's turning the other thing, though. COLTON: It is. DAVID J. MALAN: Yeah I don't know why it's showing you a leftie. COLTON: Why don't you try-- just try going like this. [00:03:38] DAVID J. MALAN: No? Maybe reach your arm out a little straighter and make it more abrupt like this. Yeah, OK, come on. [00:03:48] MARIA: I'm sorry. DAVID J. MALAN: It's not your fault. COLTON: It's fine. DAVID J. MALAN: All Right. Well-- [00:03:56] MARIA: Should we skip this, then? DAVID J. MALAN: Yes, let's let you off the hook. So if anyone would like to do a final project using this cutting edge hardware, realize it might just take a little getting used to. And this-- the reality is this is actually very bleeding edge. [00:04:10] This is what's called the developer kit, which is meant to be essentially a pre-release so that people can do exactly this-- fight with it, figure out how people's bodies work with the technology. So if you want afterwards, after lecture, we can let you come and take another stab at it. But otherwise, a round of applause, if we could, for Maria for coming on up. [00:04:26] MARIA: Thank you. [00:04:28] DAVID J. MALAN: Thank you. We'll hang on to this, but we will give you-- how about a stress ball here? Oh, and-- if-- yeah, thanks. All right. So for the curious, if you were unfamiliar with the sound choice that we made there earlier, an amazing TV show that you should absolutely be binge-watching on Netflix is this one here. [00:04:51] SPEAKER 1: Ladies and gentlemen, a magician named Josh. [00:05:04] DAVID J. MALAN: And apparently, it's a thing to text me during lecture now. I'm being told that Maria had a birthday yesterday. So happy birthday from CS50 to Maria as well. [00:05:18] So you may have read in recent month that this gentlemen here, Steve Ballmer, who was actually class of 1977 at the college, recently retired for Microsoft. He was an undergraduate here, then a couple years later found himself at Stanford Business School when he received a phone call from a friend of his who had lived down the hall from him here at Harvard. That friend's name was Bill Gates, and at the time, he was trying to recruit Steve to be the first business person, really, at a small company name Microsoft. [00:05:45] A long story short, Steve was ultimately won over, joined Microsoft when they had just 30 employees. And by the time he retired quite recently, the company had 100,000 employees over the past few years. And so a website known as The Verge prepared this tribute on video that we thought we'd shared that gives you a sense of just how much energy Steve brings to any presentation he gives. [VIDEO PLAYBACK] -Microsoft's like a fourth child. Children do leave the house. In this case, I guess I'm leaving the house. Hey Bill, whazzap? [00:06:23] -Wazzap? [00:06:24] -Hey, wazzap? We've been given an enormous opportunity. And Bill gave us that opportunity. I want to thank Bill for that. I want you to too. The pace of innovation isn't going to slow. [00:06:42] It's going to get faster and faster. There might be a few competitors that are unfortunately eliminated! [00:06:54] I love this company. Yes! I am a PC, and I love this company! [00:07:08] Developers, developers, developers, developers, developers, developers, developers, developers. Yes! Web developers! [00:07:19] Web developers! Web developers! Listen to what else you get at no extra charge! [00:07:28] The MS-DOS executive, an appointment calender, a card pile, a note pad, a clock, a control panel. And, can you believe it? Reversie! [00:07:35] Burn them to CD! Post them to MSN! You mail them to friends! [00:07:40] All with one click! One Microsoft, one strategy, one team-- focused, disciplined, professional, and expert in all that we do. Let me use a line from an old movie. [00:07:52] Relationships are like sharks. They move forward or they die. I actually think tech companies are the same. [00:08:01] [END VIDEO PLAYBACK] DAVID J. MALAN: So we are so pleased to announce that Steve will be joining us here in CS50 next Wednesday at the usual place and time here. Space will likely be limited. And so to join us in person, please head today or shortly thereafter to cs50.harvard.edu/register. [00:08:22] And we will follow up by Tuesday confirming spots. Look forward to that next Wednesday during lecture in CS50. Now, in other news, I happened to come across this in The Crimson just the other day. [00:08:34] It turns out that one of CS50's staff and at least one of CS50's students is currently running for UC president and vice president, which brought me back to my own days back when I lost the UC election miserably. But the silver lining in that is I always tell the story is that one of the I'm sure many reasons I lost the election was a complete lack of a talent for public speaking. And so quite honestly, it drove me, that experience I think my junior year, to actually sign up for Harvard Computer Society, which is the group on campus that holds various technical talks and other things. And I took over their teaching seminars and therefore had an opportunity, a wonderful opportunity, to start working on exactly this. But also, I had an opportunity during this experience to teach myself all the more HTML. And so I procrastinated last night by looking through the HTML based website I made in like 1997, '98, for my campaign which looks like this here. I know. [00:09:29] Because-- and of course, notice this amazing design decision in 1998 or whatnot. The first thing you want users to do upon visiting your website is to have to click another link just to enter your website here with the monk behind like a shrouded curtain where apparently my campaign platform was. And this is all you'll get today is just a screenshot. But I was reading through, like, my campaign posters last night and my platform. [00:09:50] And I was so angry at the time. My platform was-- it was interesting. So I've calmed down since then. But someday, I will run again and hopefully better off this time. [00:10:03] So HTML, that language in which I made that in-- you'll soon make much more-- is something we've been talking about of late and largely taking for granted now that we've moved on to other languages. But let's pause for just a moment and put some of these things in context. So in a sentence, what is HTML? [00:10:18] Or, what is used for? Anyone? Yes. [00:10:20] AUDIENCE: Markup for websites. DAVID J. MALAN: Markup for website. So it's a markup language that lets you structure a web page. Header goes up here, title goes here, body goes here. This is boldface, this is italics-- that sort of detail. [00:10:33] OK, good. So CSS lets you-- and I took some liberties there with the bold-facing and italics because that's better implemented with this. CSS is-- what? Say in a sentence. Anyone at all. Yeah. [00:10:46] AUDIENCE: Embellishments and stuff, like how to design it. DAVID J. MALAN: OK, good. Embellishments that allow you to design it or stylize it with things like boldface and italics and colors and also more fine grained positioning of elements. It sort of lets you take things the last mile so that if, for instance, in Pset7, you might have noticed on your portfolio page if you're at this point already that a default table that you make to show the user's stock holdings and cash probably looks pretty hideous by default with no white space. Everything's kind of crammed together in rows and columns. [00:11:18] Well, with a bit of CSS, as you may realize, you can actually tweak that and make it something much more familiar and much prettier to look at. So CSS is about the stylization of websites. But then we introduced yet another language, PHP, which lets us do what? [00:11:36] Let's just do what? Anyone. Got to venture beyond the first couple rows. Yeah. [00:11:40] AUDIENCE: Generate dynamic content. DAVID J. MALAN: Perfect. Generate dynamic content. And you can do this in any number of languages. We happen to use PHP because it's in part so similar to C syntax. [00:11:50] But PHP does exactly that. It lets you dynamically generate output. And some of that output could be HTML, as we've typically been doing. And it's also, because it's a programming language, is the mechanism via which we can talk to databases. [00:12:03] And we can make queries to other servers like Yahoos and programmatically do anything really that you might otherwise want to compel a computer to do. So PHP lets us start dynamically outputting content. So by this logic, I didn't have a dynamic website back in 1998. [00:12:16] It was just a static web page. My content had to be changed by manually with gedit or some equivalent. But PHP is what we used or could have used, rather, for something like the Frosh IMs website, which was supposed to take registrations and manage a list of users-- things that are actually changing over time, even though we happen to use Perl, a different language at the time. [00:12:35] And then lastly, we introduced SQL-- Structured Query Language. So yet another language that's used for what? Used for what? Can we venture slight-- OK, we're not going to get much farther than the orchestra here. AUDIENCE: It's a protocol used to talk to databases. DAVID J. MALAN: A protocol used to talk to databases. Let me tweak. It's an natural language used to talk to databases-- selects and inserts and deletes and updates and actually even more features that we haven't even dived into but you may want to explore-- have to explore for, say, a final project. So there are these various pieces. [00:13:09] And hopefully Pset7, even though its specification is quite long, it's deliberately long to walk you through how these things can all be typed together. Now, on Monday, we introduced our last language that we'll formally introduce in the course-- that is, JavaScript. This, like PHP, is an interpreted language. [00:13:25] But a key distinction I proposed on Monday is that whereas PHP is executing or being interpreted on the server, which in this case is the CS50 appliance, or might be some commercial web server on the internet, JavaScript generally is a language that runs client side not server side-- so in the browser. Which is to say, just like when I opened up Facebook source code and found all of those .js files, the implication was that when you visit Facebook or most websites these days, you get not only HTML, not only CSS, but a whole bunch of JavaScript code often in the form of .js files. And then it's the browser-- your own Mac or PC-- that executes that code. [00:14:03] But your browser executes it. You can think in sort of a sandbox. So that JavaScript code shouldn't be able to delete files on your computer. It shouldn't be able to send emails on your behalf. Your browser kind of restricts what you can do with it. [00:14:17] So in that sense, it's a little less powerful, perhaps, than C. But JavaScript can, as an aside, be used on the server, though we'll tend not to talk about it in that context. So now let's tie these together. A week plus ago, we presented some HTML on the left-- super boring web page. [00:14:34] Just says hello world. And then I proposed on the right we can kind of steal ideas from our discussion of data structures in C and think about how this hierarchical markup language on the left could be drawn or implemented in memory as an actual tree structure with nodes and pointers and those kinds of details. On the right, we call that a DOM-- Document Object Model-- which is just a fancy way of saying tree. [00:14:56] Now, why is this useful to think of it in this way? Because now with JavaScript, because we have code that gets to play in this environment, the actual HTML that's been sent to the browser already and has already been loaded into memory by the browser into a tree in your computer's RAM like this, we can use JavaScript to actually traverse or walk or search or change that DOM tree however we want. So in fact, if you think about facebook.com, if you use the chat feature, if you use Gmail and the gchat feature, anything where you have messages coming again and again and again, those messages are probably, like, LI tag, List Item tags, maybe. [00:15:35] Or maybe they're just divs that keep appearing every time you get an instant message. And so that just means what Facebook or Google is doing is any time you get a message from the server, they are probably using JavaScript to just add another node to this tree-- another node to this tree that then visually just looks like a new line of text on your screen. But they're inserting into this data structure. [00:15:57] So in classes like CS124 and others, you'll actually write more code against data structures like this. But for now in JavaScript, we'll just assume we get all of this functionality for free from the language itself. So let's look at an example. [00:16:09] Let me open up a file called form.html. It's super simple. It just looks like this. [00:16:15] No CSS, no thought to aesthetics. It's purely functional and apparently I'm asking for an email, a password, password again, and then a check to agree to some terms and conditions. What the source code for this looks like is probably something you might guess with a little bit of thought now. I've got a form tag here. [00:16:32] An action is apparently going to go to a file called register.php. The method I'm going to use is get. And then I've got a text field whose name is email. [00:16:40] I've got a password field whose name is password. I've got another password field whose name is somewhat arbitrarily confirmation. It's just another HTTP parameter. [00:16:49] And then we we've not used these except since the Frosh IMs demo in class-- a check box which is just type equals check. And I'll call that agreement. So I've kind of arbitrarily but conveniently named these fields. So that now when this form gets submitted, let's see what happens. If I do malan@harvard.edu, I'll do a password of crimson. I'll do a password of nothing. Let's not cooperate. [00:17:10] And I won't check the box. Let me click Register. And it says, hm, you're registered. Not really. [00:17:16] But the URL changed. So this form was clearly allowed to submit to register.php. But presumably, I should be catching some of these errors. Now, in Pset7 and some of our lecture examples, we would generally print out a big red error message here saying, missing name, or missing password. We've done that before and we've done server side error detection. [00:17:37] But many websites these days do client side error detection where the URL doesn't change. The whole page doesn't refresh. You get instant feedback from the browser. Maybe something goes red. [00:17:48] Maybe you get a pop up. But you don't waste time sending to the server data that's incomplete. So let's see how we might achieve that feature as well. [00:17:56] Let me go to form1.html, which looks the same. But if this time I do malan@harvard.edu and I type crimson and I don't cooperate further but click Register, notice now. It's not the sexiest solution. I've at least caught this error. And I've used the alert function in JavaScript-- which we're only using in class. In general, you should not use this because it can very quickly get out of control. But passwords do not match is the error. [00:18:19] Let me go ahead and click OK. But what the key takeaway here is that the URL did not change. So I've not bothered wasting the server's time asking it a question that I could have figured out the answer to myself. [00:18:30] And the user, even though been talking about this longer than the user's going to think about this, is going to have instant feedback. There's no latency with the network connectivity. So let's look at this source code. [00:18:40] Form1.html looks structurally similar up here. The form is in fact the same. But let's see what I did down here. And there's different ways to do this. And I've done the most straight follower but not most elegant way yet. I have a script tag. I then call document.getElementByID('registration'). And I store that value in form, a variable. [00:19:04] So what have I done? You can think of document.getElementByID as being a special function that JavaScript gives you that literally hands you a pointer to one of the nodes or rectangles in this tree. So now that's what our form variable in JavaScript is actually pointing at. [00:19:21] So now the syntax is different from C. But we're doing a few things here. One, this one is a little strange looking, certainly versus C. But look at line 35. So on the left form.onsubmit. Recall that onsubmit is like a field in a struct. If you think of the form variable is just being a C struct, it might have some fields. [00:19:42] Back in the day, we had students names, IDs, houses, those kind of fields. Just think of onsubmit as another field. But it's a special field because the browser is preprogrammed to expect .onsubmit to not be a value like a number or string, but to actually be a function or the address of a function in the computer's memory. [00:20:02] And indeed, that's what this keyword here does. This says, give me a new function. But what is its name going to be, apparently? [00:20:09] Thinking back to Monday. What is the name of this function based on this syntax? No, I mean, there's clearly no name associated-- certainly not in what I've highlighted here. [00:20:21] But that's actually OK. This is an anonymous function, or a lambda function as some might call it. And that just means it's still a function. It's just, you can't call it by name. But that's OK. Because again, the browser has been preprogrammed by companies like Google or Microsoft or Mozilla or others to just know that if the .onsubmit field inside of a form element has the value, treat it as a function-- a function pointer, if you will. And call it when the form is submitted. [00:20:46] So what code should be executed when the form is submitted? Apparently, everything inside of the curly brace. And this is just stylistic. [00:20:53] You could do this like we tend to do in CS50. But in JavaScript, most people tend to keep it on the same line just because it more clearly is associated with that keyword function. So now what am I doing? [00:21:03] If form.email.value equals equals the empty string or nothing, here's an alert where I'm going to say, you must provide your email address, and then return false. And it's that return false that prevents the form from being submitted. Meanwhile, if the password value is blank, I'm going to yell at the user and say, you must provide a password. [00:21:21] Meanwhile things are getting a little fancier here. If form.password.value does not equal form.confirmation.value, the other field, yell at the user that the passwords don't match as they did not a moment ago. And then this one's a little sexier because I know I knew conceptually that checked is a check box's name. [00:21:40] So I can just use an exclamation point to say if the check is not checked-- it's the Boolean value, true or false-- I'll yell at the user for that reason. Otherwise, if we get through all of these conditions, let's just return true. Let the form be submitted. And this will then happen. [00:21:56] Let's type in crimson. Let's check the box, click Register. And now I go through to the destination. Now, there's no database there. There's nothing interesting in register.php. I just needed something to actually talk to. So let me pause, here. Any questions on what we've just done or what some of this new syntax is? OK, yeah? [00:22:17] AUDIENCE: So any checkbox is automatically a Boolean . You don't have to declare it like that. [00:22:21] DAVID J. MALAN: Correct. Any checkbox that's sent to you from an HTML form to your JavaScript code will be treated, yes, as a Boolean value-- true or false. It's a good question. Whereas the other values, of course, have been text, AKA strings. [00:22:36] All right, so let me rewind a bit further. What was the whole point of this? Just to be clear. Like, we already know, even from Pset7 and even from last week's lecture examples, that we can obviously check $_GET $_POST see if the user give us an empty value. Remember the empty function in PHP. [00:22:54] So just to be clear, what's one reason we might also want to do this error checking inside of the browser? What's the motivation here? Yeah. [00:23:06] AUDIENCE: Faster, and you don't send useless data to the server. DAVID J. MALAN: Good. It's faster. You don't send useless data to the server. [00:23:12] So you get back a more immediate response. And overall, the user experience is better. Think about the alternative. [00:23:17] If for Gmail-- and was the case many years ago. Suppose you got a new email your Gmail account, but the only way through to see that is to, like, reload the whole page. Or suppose you click on a link to read an email. [00:23:29] Everything has to reload so that you can see the email. Or Facebook-- you get a chat message. You don't see it until you reload the page or click some link. [00:23:36] Like, this would be an awfully annoying user experience. And this is what it was like, clearly, back when I ran for UC and the web was much less dynamic and JavaScript wasn't as popularized as it is now. And things are getting much more dynamic and much more client side in that sense. [00:23:49] But there is a catch here, and this is kind of an annoying gotcha. Just because you add client side detection like this does not mean you can or should abandon server side detection. You essentially want to put your error checking in both places. Because what was one of the lesson learned from the article I read some excerpts from with this stupid CMS system-- Content Management System-- that was implementing its authentication system, its login via what mechanism? JavaScript. [00:24:20] AUDIENCE: JavaScript. DAVID J. MALAN: JavaScript, exactly, right? It was using JavaScript. And literally, you guys have played a little bit probably with Chrome's Inspector. And if I can find it, inspect element. [00:24:30] Let me go over to do all of Chrome's options. And this is how easy it is to disable JavaScript in a browser. Check, no more JavaScript. [00:24:38] So in fairness, a lot of the web these days is just going to break because Gmail and other sites-- Facebook-- assume that JavaScript is enabled. But if you're doing something stupid like only validating users input and checking it for errors on the client side, an adversary could easily do this. And then even smarter adversary like you guys now could use Telnet or Curl or just command line commands and actually send messages to the server that similarly are not error checked. [00:25:05] So this is more of a user interface decision than it is an actual technical improvement-- implementing something client side like this. So now a quick glance, but then I'll defer to the online walk through for this one. In form two, we actually went through and cleaned up the code a little bit. But let me defer to one of the videos we'll likely embed in Pset8 that just shows you a similar syntax using a library called jQuery, which is a super, super popular library in JavaScript that frankly most people just use these days and even confuse as being JavaScript itself. [00:25:37] And it tends to involve some dollar signs and keywords like document in parentheses here. But again, let me defer to some slower tutorials online rather than get tied up in just syntax. Let's move on to something a little cooler in terms of the applications of this. [00:25:50] So in particular, let me go ahead and open up this here. Come on. There we go. [00:25:59] Let me open up this picture here. Unnecessarily complicated looking, but it describes a technique called AJAX-- Asynchronous JavaScript and XML, where the X for XML is actually no longer really used. It tends to use something else called JSON. [00:26:13] But here is how something like Google Maps or Google Earth works. Let's try this on the fly, actually. Let me go ahead and open up Chrome on my browser. [00:26:21] And let me go into, say, maps.google.com. And actually, if you're old enough to remember what, like, MapQuest was like back in the day, and maybe they still work like this. When you used to search for something-- 33 Oxford Street, Cambridge, Mass, let's do this-- you would actually, if you wanted to pan up and down, left and right, you would look like a big arrow on top, and it would show you another frame of the map up here. Or you would click left and you would go over here, or another click and you would go over here. But instead these days, we of course just take for granted that we can go around Cambridge pretty quickly just by clicking and dragging. But notice there's some glitches. [00:26:59] If I do this fast enough, what seems to be happening as I drag a little too fast for the computer to keep up? What do you see? Yeah. [00:27:07] AUDIENCE: The pixels don't refresh. DAVID J. MALAN: The pixels don't refresh. There's actually-- and you could see this, actually, if you're watching online and pause this or actually slows things down for once-- you'll see that there are tiles, squares, or rectangles that are missing from the map until a split second later, more data, more images actually appear on the screen. And in fact, if we do this by looking up Chrome's-- let's say, Chrome-- let's see. We can't do that. [00:27:31] Oh, whoops. Let's open up maps.google.com. Let me make the window bigger again. [00:27:36] Go back to 33 Oxford Street. What was the website I was on recently? I had this, like, private rant to myself that I'd then instant message any friend who was online who wanted to hear it. There's some website. I think it's Comcast-- so a very big American ISP. You can, when signing up for new cable modem service or cable TV service, they have a form very reasonably where they ask you for your address. And have this amazing feature called auto complete, like Google, that starts to fill in the answer to your question. [00:28:04] The problem is, they do auto complete on the first things that you type. So if you start typing in 33, it will show you literally every house in America that starts with the number 33 before continuing to expect you to type more. So if you type 33 Oxford, then it shows you every street in America that has 33 Oxford in its name, irrespective of the town that you're in. [00:28:25] And then you continue typing. And finally, it realizes that they don't offer service to your home in Cambridge or something like that. But the point is, this is the most asinine implementation of auto complete ever. [00:28:34] And I'm just going off on this tangent again. But there are good ways to use JavaScript and bad ways. And that's not necessarily the best one. [00:28:40] But the point here, before this tirade, was to open up tools down here and open up developer tools, as we've encouraged before, and to watch the Network tab as I click really fast. And notice a whole bunch of get requests happened. All of this happened since I dragged. [00:28:57] And most likely, indeed a lot of these rows now are image slash JPEG MIME types or content types. That's because what chrome is doing every time I click and drag, click and drag, is it's realizing, oh, I need to go ask Google for the tile on the map that's over here, quickly download it via HTTP, and then add it to the so-called DOM to the web browsers in memory tree representation so that the user, me, sees that updated tile. And this is because of a technique called AJAX. Back in the day, it really was the case that if you wanted to change what's on the screen, you would have to click up, down, left, right. And then a new page would open. But these days, everything is more dynamic. It happens in the way we humans would hope it actually would interactively. And it achieves this by way of a technique called AJAX, which is perhaps best explained by an example. First, let me go ahead and open up a file called quote.php in today's distribution code. [00:29:53] And then let me do symbol-- whoops. Let me do symbol=GOOG for just some stock. Or actually, let's do the one from the Pset FREE. Enter. [00:30:05] And now notice what I get back. So this is a really short PHP file that I wrote that simply borrows code from Pset7's lookup function and spits out using this curly brace and quotes and colon notation, apparently, the current stock's price for the company that you pass in via get. So this is different from most of what we've done in that notice I'm literally spitting out what looks like JavaScript code. [00:30:27] In fact, this is a JavaScript object. In fact, just to be more clear, JavaScript Object Notation-- JSON-- is just a fancy way of saying that you can represent data in JavaScript much like you can in PHP using key value pairs. So if I wanted to declare a variable in JavaScript to represents Zamyla, for instance-- a struct for Zamyla-- and we'll call it student, this variable. Her ID is one, house is Winthrop, and name is Zamyla. [00:30:53] But I can also have an array of objects. So if I actually wanted to have an array in JavaScript containing multiple such objects, this time representing staff, I might have these three chunks of code back to back to back for these three former staff members. So the syntax, pretty similar to both-- to PHP. But this is particularly JavaScript. It's object notation. So what is this useful for? [00:31:17] If I write code that spits out JSON-- JavaScript Object Notation-- stuff that looks like this or stuff that looks like Zamyla's structure, I can actually use this in programs I write. Let me go to ajax0.html. And this too-- not much thought given to aesthetics. But watch what happens. [00:31:34] Let me go ahead and type free here. Click get quote. And notice the URL has not changed. But I did get a pop up with apparently today's penny stock price of $0.15. So not all that bad. But the difference is that somehow, this data came back to me directly. But let's take a step toward something more familiar. In version one of this, let me type free again, click Get quote, and now-- oh, this was actually the jQuery version. So let me-- I didn't fast-forward quite far enough. Let me go to version two, which is where I wanted. Notice what I've done here. I have a web page-- a super simple version of any web page you might use today with a text field here for free and then apparently just text. [00:32:14] This is not a form here, apparently. But if I click get quote, notice my web page is about to change as though I just got a new instant message or as though I just moved the map and needed to get more data added dynamically to the web page without the URL changing and the user experience getting interrupted. Indeed, I'm still at the exact same place-- ajax2.html. [00:32:35] So let's look only at this example and see how this is happening. Let me go into ajax2.html. And notice the form first. [00:32:44] Down here, I'm turning off auto complete. Sometimes it gets annoying if the browser is trying to show you your whole history. So you can do it in HTML by just saying auto complete off. [00:32:53] I've given this text field a symbol-- rather, an ID of symbol. And now, this is an interesting feature. We haven't talked about span, but you can think about it like a paragraph tag or div tag. It's what's called an in-line element, which means you won't get a paragraph break above and below it. It's just going to stay in-line without hitting the equivalent of enter. So I have given this chunk of HTML to be determined a unique identifier that I arbitrarily called price. And I have a Submit button. [00:33:21] Because now up here-- and this is actually super amazing how little code you can write to do relatively neat things-- notice what I've done up here if I scroll up to the head of this page. I've included first in my head a script tag that actually references a JavaScript file elsewhere. This is from the organization that writes jQuery, and this is just giving you the latest version of their jQuery library. [00:33:42] So this is kind of like sharp include in C or require in PHP. You use the script tag with a source attribute. But now my own code is going to be right in here. [00:33:52] Notice I have a function called Quotes. And it looks a little cryptic at first glance. But let's tease this apart. Give me a variable called URL. Assign it literally this string. So, single quotes, double quotes in JavaScript just gives me a string. What does the plus do? Concatenation. [00:34:08] So this now is the jQuery syntax which takes a little getting used to. But this just means go get me the DOM node whose unique identifier is symbol. The hashtag there means unique identifier symbol. [00:34:21] The dollar sign in the parentheses just mean, wrap this in jQuery a sort of secret sauce so you get additional functionality. And then .val is apparently a function, or as we say now, a method inside of this node that just gives you the value. So in short, ugly and confusing as this looks at first glance, this just means get with the user typed in, put it at the end of the string by concatenating it. That's all. [00:34:43] So now, last three lines. You can squeeze a lot of functionality out of three lines. This dollar sign, as an aside, is just a nickname for a special global variable called literally jQuery. [00:34:55] Dollar sign just looks cool. So the jQuery community just kind of used it as their special symbol. It does not mean what it means in PHP. In JavaScript, dollar sign is just like a letter of the alphabet or a number for a variable. [00:35:07] You can just have it as the name. Just looks cool. So the community adopted it as a nickname for their own library called jQuery. [00:35:13] And it's super popular. So get JSON is exactly that. It's a function that the folks at jQuery wrote that gets JSON from a server-- JavaScript Object Notation. From what URL is it going to get that information? Apparently from this URL here. [00:35:27] And what should the browser do as soon as it gets back this response? And this is the magic of AJAX, so to speak-- Asynchronous JavaScript in XML. It's hard to see with such a simple example as we had here. [00:35:41] But this was asynchronous in the sense that my code when executed sent a message to the server to go get me some JSON. And it happened super fast that I got a response. But what's interesting is that this line of code didn't hang my computer. [00:35:55] I didn't see a spinning icon. I didn't lose the ability to move my mouse. My browser was actually perfectly fine. [00:36:01] Because the way JavaScript handles the response from the server is as follows. You register what you'd call a callback function, which just means, hey, JavaScript. As soon as the server responds with JSON, please call this anonymous function. [00:36:18] And please passed into this function whatever string the server spit out as an argument called data. So in other, words, if I'm assembling dynamically a URL quote.php passing in this symbol like FREE or GOOG or whatnot, I'm then telling JavaScript go get that URL. Remember that the browser is going to return something that looks like we saw earlier-- this. [00:36:42] And what the second argument here to get JSON is saying is call this function when the server gets back whether it's 10 milliseconds from now or 10 seconds from now. And as soon as you do, add the price to the page. This syntax here just means go get the node from the tree whose unique identifier is price-- that span we saw earlier. [00:37:01] This method called HTML just says, go replace the HTML that's there with data.price. What's data.price? Well, the browser, recall, showed me this coming back. So this is data. [00:37:14] And so it's a little cryptic to see the commas here. But in fact, let me do this. Let me just paste this real fast into gedit and show this like we showed Zamyla's structure earlier. [00:37:27] What the server is sending back is a little object that looks like this. And so data.price is just giving me 0.1515. So a lot of moving parts here all at once. [00:37:39] But the key takeaways is that we have this ability to make additional HTTP requests using JavaScript without having to reload the page. And then we can actually change the web page on the fly. And it turns out that JavaScript and other languages can be used now not only to mutate web pages, but to actually write software in an actual computer, not just confined to Chrome or the like. [00:38:00] In fact, if-- Colton, would you like to join us back up here with your lab code, and Chang as well? Let's go ahead, having talked about anonymous functions and callbacks and really tempt fate here with a live demo with bleeding edge technology, one of these Elite Motion devices. Now, this device, recall, is a little USB device as well that-- that's beautiful-- that plugs in to your USB ports. [00:38:25] And then it provides input in the form of human gestures by detecting using infrared beams, essentially, movements from your arm. So whereas what Maria tried on before was muscular, actually feeling what's changing your arm, this is infrared based. So it's looking for movements within the sort of sphere of a foot or so of the device itself. [00:38:46] So why don't I take a stab at this first? And let's go ahead and throw you up on the overhead here. So let's put Colton's laptop up here. We've got Andrew on the TV. And what would you like me to do first? [00:39:00] COLTON: Go ahead and just put your hands over this guy and you'll see some fabulous glitter. [00:39:04] DAVID J. MALAN: Very nice. This is all happening in real time. OK. All right, and yep. So nice. All right, what else can we do? [00:39:15] COLTON: Go to the next screen and see. [00:39:17] DAVID J. MALAN: All right. [00:39:19] COLTON: A fun little game where you get to make robots. [00:39:21] DAVID J. MALAN: All right, so this is fake hands showing me what to do. COLTON: Yes So go ahead and grab one of the blocks and put it on top of that robot's body. DAVID J. MALAN: Oh, there's my hand. Oh. OK, adorable. Wait a minute, OK. There we go. [00:39:41] COLTON: I made one on accident. [00:39:43] DAVID J. MALAN: OK, I'll get this guy. Damn it! When we were practicing this last night, you know what this devolved into? [00:39:51] Like this. OK. Next one? [00:39:55] COLTON: Sure. [00:39:56] DAVID J. MALAN: All right, and there's a third. All right. COLTON: And in this one, you get to-- DAVID J. MALAN: Oh, this one's beautiful. COLTON: --yeah, pick apart this flower. DAVID J. MALAN: OK. No? Missed. [00:40:14] COLTON: Oh, there you go. [00:40:15] DAVID J. MALAN: Ah, Look at that. Very nice. Well, why dont' we take out one volunteer here who would like to come on up. How about right there in the green, is it? [00:40:27] All right, and let's have-- instead of doing that, some of you might know this game here-- cut the rope, perhaps? Let's see. We have our glasses on over here? [00:40:37] OK. Thank you. What's your name? [00:40:39] AUDIENCE: Laura. [00:40:40] DAVID J. MALAN: Laura? Nice to see. If you don't mind putting Google Glass over your glasses. This is Colton. [00:40:46] COLTON: Hi. Nice to meet you. [00:40:48] DAVID J. MALAN: OK, come on around. All right, so what you're going to do here, having played this before, is put your hand over the Leap Motion here. And now your arrow should move. Oh, nope. [00:40:57] AUDIENCE: No. [00:40:58] DAVID J. MALAN: We don't want to quit yet. OK, wait. Over here. So notice as you hold your finger over something, the mouse starts to go green, which is how you click. [00:41:06] So hover over Play. And just one finger is fine. And now click on the little green guy on the left. And now hold until it fills up green. Good. Now, like, level one up top. [00:41:16] AUDIENCE: Yeah, we want level one, here. [00:41:20] DAVID J. MALAN: Good. OK, so all you have to do is cut the rope. Your cursor's the white one down there. [00:41:28] Very nice. All right, it's about to get harder. So hold your finger over next now. Good. This one's hard. [00:41:39] AUDIENCE: Oh crap. OK. It wants to go that way. Oh crap, that-- [00:41:44] DAVID J. MALAN: Yeah. Secondary goal is to get all the stars. All right, next. [00:41:53] Let's see if you can get this third one. Good. OK, go over there. [00:42:06] Sure. Oh, very nice. All right. [00:42:11] So why don't we adjourn here today? Let anyone come on up who wants to play. Thanks so much to Laura our volunteer. And we will see you on Monday. [00:42:18] AUDIENCE: You probably want these back. [00:42:21] SPEAKER 2: At the next CS50--