1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J. MALAN: All right, so this here is the Myo arm 3 00:00:41,880 --> 00:00:44,450 band, a couple of which we have for CS50 final projects. 4 00:00:44,450 --> 00:00:47,533 And that was a demonstration we queued you up in advance where essentially 5 00:00:47,533 --> 00:00:51,120 this fairly tight arm band up here listens to your muscular movements 6 00:00:51,120 --> 00:00:54,280 that are then mapped in software to Colton's laptop over here which 7 00:00:54,280 --> 00:00:57,230 had iTunes and that song already queued up. 8 00:00:57,230 --> 00:01:00,270 Rather than me demoing this, Colton's been in the lab 9 00:01:00,270 --> 00:01:04,129 clearly all week getting a demonstration ready for one brave volunteer. 10 00:01:04,129 --> 00:01:07,430 If someone would like to come on up-- saw your hand first. 11 00:01:07,430 --> 00:01:09,540 Come on up. 12 00:01:09,540 --> 00:01:12,530 >> All right. 13 00:01:12,530 --> 00:01:13,886 And what is your name? 14 00:01:13,886 --> 00:01:14,800 >> AUDIENCE: Uh, Maria. 15 00:01:14,800 --> 00:01:16,550 >> DAVID J. MALAN: Maria, nice to see you. 16 00:01:16,550 --> 00:01:17,310 Come on over here. 17 00:01:17,310 --> 00:01:19,550 Let me introduce you to Colton. 18 00:01:19,550 --> 00:01:21,290 Colton, this is Maria. 19 00:01:21,290 --> 00:01:23,050 >> COLTON: Hi, nice to meet you. 20 00:01:23,050 --> 00:01:24,330 >> DAVID J. MALAN: All right, so step one, we're 21 00:01:24,330 --> 00:01:26,204 going to have you put this on to your forearm 22 00:01:26,204 --> 00:01:29,280 so that it's pretty tight up near your elbow. 23 00:01:29,280 --> 00:01:31,940 And meanwhile, let's have put on our Google Glass 24 00:01:31,940 --> 00:01:33,720 and we'll mix technologies today. 25 00:01:33,720 --> 00:01:36,340 >> COLTON: First we'll have to hook this into the things. 26 00:01:36,340 --> 00:01:37,170 >> DAVID J. MALAN: OK. 27 00:01:37,170 --> 00:01:39,795 Actually, let's put your arm as close to this cable as possible 28 00:01:39,795 --> 00:01:41,160 so that we can first sync it up. 29 00:01:41,160 --> 00:01:42,740 >> COLTON: Let's do this. 30 00:01:42,740 --> 00:01:46,500 >> DAVID J. MALAN: And meanwhile, so that everyone can get a closer glance, 31 00:01:46,500 --> 00:01:50,290 we'll toss Andrew's camera up on the screen there. 32 00:01:50,290 --> 00:01:54,460 So we have a USB cable that's being plugged into Maria's armband. 33 00:01:54,460 --> 00:02:00,230 And let me toss Colton's screen up on the projector next. 34 00:02:00,230 --> 00:02:06,000 >> So Colton is registering the device now as a Myo connected to this cable. 35 00:02:06,000 --> 00:02:08,060 And now what Maria's going to do momentarily 36 00:02:08,060 --> 00:02:10,120 is actually walk through the calibration steps 37 00:02:10,120 --> 00:02:12,830 and teach the software how her muscles respond 38 00:02:12,830 --> 00:02:16,070 when she make certain pre-defined gestures that the software understands. 39 00:02:16,070 --> 00:02:17,910 If you'd like to go in front of the screen. 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 OK, keep trying. 42 00:02:30,090 --> 00:02:31,860 >> COLTON: Go like this. 43 00:02:31,860 --> 00:02:32,970 And like that. 44 00:02:32,970 --> 00:02:34,563 And all the way to the right. 45 00:02:34,563 --> 00:02:35,922 Go back. 46 00:02:35,922 --> 00:02:37,740 >> DAVID J. MALAN: OK. 47 00:02:37,740 --> 00:02:38,960 Different perspective. 48 00:02:38,960 --> 00:02:39,620 It's not you. 49 00:02:39,620 --> 00:02:40,350 It's us. 50 00:02:40,350 --> 00:02:41,749 >> MARIA: OK. 51 00:02:41,749 --> 00:02:42,540 DAVID J. MALAN: No. 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 Let's move it higher up so it's closer to your elbow, or even tighter. 54 00:02:51,540 --> 00:02:52,680 All right. 55 00:02:52,680 --> 00:02:53,270 >> Here we go. 56 00:02:53,270 --> 00:02:56,780 This would be a good time for CS52X. 57 00:02:56,780 --> 00:02:57,670 There we go. 58 00:02:57,670 --> 00:02:58,760 >> Very nice. 59 00:02:58,760 --> 00:03:01,170 OK. 60 00:03:01,170 --> 00:03:02,790 Thumb to pinky. 61 00:03:02,790 --> 00:03:03,380 >> Very nice. 62 00:03:03,380 --> 00:03:05,140 Spread your fingers. 63 00:03:05,140 --> 00:03:06,240 Good. 64 00:03:06,240 --> 00:03:06,910 Wave right. 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 It's curiously showing you with the left hand-- 67 00:03:17,010 --> 00:03:19,665 >> COLTON: Yeah, that's wierd. 68 00:03:19,665 --> 00:03:21,790 DAVID J. MALAN: Wave to the right and move forward. 69 00:03:21,790 --> 00:03:22,998 Fast forward to skip or next. 70 00:03:22,998 --> 00:03:25,020 That's OK Wave right. 71 00:03:25,020 --> 00:03:26,650 >> MARIA: I don't-- wait. 72 00:03:26,650 --> 00:03:28,430 >> DAVID J. MALAN: Need some help? 73 00:03:28,430 --> 00:03:30,027 >> COLTON: So you're going like this. 74 00:03:30,027 --> 00:03:31,860 MARIA: It's turning the other thing, though. 75 00:03:31,860 --> 00:03:32,390 COLTON: It is. 76 00:03:32,390 --> 00:03:34,250 DAVID J. MALAN: Yeah I don't know why it's showing you a leftie. 77 00:03:34,250 --> 00:03:36,458 COLTON: Why don't you try-- just try going like this. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J. MALAN: No? 80 00:03:40,090 --> 00:03:42,580 Maybe reach your arm out a little straighter 81 00:03:42,580 --> 00:03:46,070 and make it more abrupt like this. 82 00:03:46,070 --> 00:03:48,176 Yeah, OK, come on. 83 00:03:48,176 --> 00:03:49,670 >> MARIA: I'm sorry. 84 00:03:49,670 --> 00:03:51,170 DAVID J. MALAN: It's not your fault. 85 00:03:51,170 --> 00:03:53,018 COLTON: It's fine. 86 00:03:53,018 --> 00:03:55,430 DAVID J. MALAN: All Right. 87 00:03:55,430 --> 00:03:56,220 Well-- 88 00:03:56,220 --> 00:03:57,620 >> MARIA: Should we skip this, then? 89 00:03:57,620 --> 00:03:59,620 DAVID J. MALAN: Yes, let's let you off the hook. 90 00:03:59,620 --> 00:04:03,130 So if anyone would like to do a final project using this cutting edge 91 00:04:03,130 --> 00:04:07,707 hardware, realize it might just take a little getting used to. 92 00:04:07,707 --> 00:04:10,290 And this-- the reality is this is actually very bleeding edge. 93 00:04:10,290 --> 00:04:12,040 >> This is what's called the developer kit, which 94 00:04:12,040 --> 00:04:14,956 is meant to be essentially a pre-release so that people can do exactly 95 00:04:14,956 --> 00:04:18,690 this-- fight with it, figure out how people's bodies work 96 00:04:18,690 --> 00:04:19,980 with the technology. 97 00:04:19,980 --> 00:04:21,750 So if you want afterwards, after lecture, 98 00:04:21,750 --> 00:04:23,750 we can let you come and take another stab at it. 99 00:04:23,750 --> 00:04:26,970 But otherwise, a round of applause, if we could, for Maria for coming on up. 100 00:04:26,970 --> 00:04:28,770 >> MARIA: Thank you. 101 00:04:28,770 --> 00:04:30,390 >> DAVID J. MALAN: Thank you. 102 00:04:30,390 --> 00:04:34,945 We'll hang on to this, but we will give you-- how about a stress ball here? 103 00:04:34,945 --> 00:04:38,620 Oh, and-- if-- yeah, thanks. 104 00:04:38,620 --> 00:04:39,715 All right. 105 00:04:39,715 --> 00:04:45,750 So for the curious, if you were unfamiliar with the sound choice 106 00:04:45,750 --> 00:04:47,670 that we made there earlier, an amazing TV 107 00:04:47,670 --> 00:04:50,210 show that you should absolutely be binge-watching on Netflix 108 00:04:50,210 --> 00:04:51,110 is this one here. 109 00:04:51,110 --> 00:04:54,472 >> SPEAKER 1: Ladies and gentlemen, a magician named Josh. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J. MALAN: And apparently, it's a thing to text me during lecture now. 112 00:05:08,050 --> 00:05:11,190 I'm being told that Maria had a birthday yesterday. 113 00:05:11,190 --> 00:05:14,095 So happy birthday from CS50 to Maria as well. 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> So you may have read in recent month that this gentlemen here, Steve 116 00:05:22,090 --> 00:05:25,260 Ballmer, who was actually class of 1977 at the college, 117 00:05:25,260 --> 00:05:27,170 recently retired for Microsoft. 118 00:05:27,170 --> 00:05:29,620 He was an undergraduate here, then a couple years later 119 00:05:29,620 --> 00:05:31,910 found himself at Stanford Business School 120 00:05:31,910 --> 00:05:34,160 when he received a phone call from a friend of his who 121 00:05:34,160 --> 00:05:36,516 had lived down the hall from him here at Harvard. 122 00:05:36,516 --> 00:05:38,640 That friend's name was Bill Gates, and at the time, 123 00:05:38,640 --> 00:05:42,700 he was trying to recruit Steve to be the first business person, really, 124 00:05:42,700 --> 00:05:45,720 at a small company name Microsoft. 125 00:05:45,720 --> 00:05:48,960 >> A long story short, Steve was ultimately won over, 126 00:05:48,960 --> 00:05:52,130 joined Microsoft when they had just 30 employees. 127 00:05:52,130 --> 00:05:54,300 And by the time he retired quite recently, 128 00:05:54,300 --> 00:05:58,100 the company had 100,000 employees over the past few years. 129 00:05:58,100 --> 00:06:01,171 And so a website known as The Verge prepared this tribute on video 130 00:06:01,171 --> 00:06:02,920 that we thought we'd shared that gives you 131 00:06:02,920 --> 00:06:08,380 a sense of just how much energy Steve brings to any presentation he gives. 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [VIDEO PLAYBACK] 134 00:06:12,550 --> 00:06:16,220 -Microsoft's like a fourth child. 135 00:06:16,220 --> 00:06:18,260 Children do leave the house. 136 00:06:18,260 --> 00:06:21,875 In this case, I guess I'm leaving the house. 137 00:06:21,875 --> 00:06:23,270 Hey Bill, whazzap? 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap? 139 00:06:24,200 --> 00:06:25,320 >> -Hey, wazzap? 140 00:06:25,320 --> 00:06:28,590 We've been given an enormous opportunity. 141 00:06:28,590 --> 00:06:30,210 And Bill gave us that opportunity. 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 I want to thank Bill for that. 144 00:06:36,770 --> 00:06:39,630 I want you to too. 145 00:06:39,630 --> 00:06:42,500 The pace of innovation isn't going to slow. 146 00:06:42,500 --> 00:06:45,140 >> It's going to get faster and faster. 147 00:06:45,140 --> 00:06:50,165 There might be a few competitors that are unfortunately eliminated! 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> I love this company. 150 00:06:59,564 --> 00:07:00,064 Yes! 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 I am a PC, and I love this company! 153 00:07:08,250 --> 00:07:13,090 >> Developers, developers, developers, developers, developers, developers, 154 00:07:13,090 --> 00:07:14,560 developers, developers. 155 00:07:14,560 --> 00:07:17,500 156 00:07:17,500 --> 00:07:18,970 Yes! 157 00:07:18,970 --> 00:07:19,950 Web developers! 158 00:07:19,950 --> 00:07:21,420 >> Web developers! 159 00:07:21,420 --> 00:07:22,890 Web developers! 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 Listen to what else you get at no extra charge! 162 00:07:28,770 --> 00:07:31,960 >> The MS-DOS executive, an appointment calender, a card pile, a note pad, 163 00:07:31,960 --> 00:07:33,750 a clock, a control panel. 164 00:07:33,750 --> 00:07:35,461 And, can you believe it? 165 00:07:35,461 --> 00:07:35,960 Reversie! 166 00:07:35,960 --> 00:07:37,270 >> Burn them to CD! 167 00:07:37,270 --> 00:07:38,660 Post them to MSN! 168 00:07:38,660 --> 00:07:40,422 You mail them to friends! 169 00:07:40,422 --> 00:07:41,790 >> All with one click! 170 00:07:41,790 --> 00:07:48,670 One Microsoft, one strategy, one team-- focused, disciplined, professional, 171 00:07:48,670 --> 00:07:50,610 and expert in all that we do. 172 00:07:50,610 --> 00:07:52,670 Let me use a line from an old movie. 173 00:07:52,670 --> 00:07:54,810 >> Relationships are like sharks. 174 00:07:54,810 --> 00:07:57,480 They move forward or they die. 175 00:07:57,480 --> 00:08:01,470 I actually think tech companies are the same. 176 00:08:01,470 --> 00:08:04,801 >> [END VIDEO PLAYBACK] 177 00:08:04,801 --> 00:08:08,050 DAVID J. MALAN: So we are so pleased to announce that Steve will be joining us 178 00:08:08,050 --> 00:08:13,320 here in CS50 next Wednesday at the usual place and time here. 179 00:08:13,320 --> 00:08:14,750 Space will likely be limited. 180 00:08:14,750 --> 00:08:19,650 And so to join us in person, please head today or shortly thereafter 181 00:08:19,650 --> 00:08:22,600 to cs50.harvard.edu/register. 182 00:08:22,600 --> 00:08:25,780 >> And we will follow up by Tuesday confirming spots. 183 00:08:25,780 --> 00:08:29,900 Look forward to that next Wednesday during lecture in CS50. 184 00:08:29,900 --> 00:08:33,706 Now, in other news, I happened to come across this in The Crimson just 185 00:08:33,706 --> 00:08:34,289 the other day. 186 00:08:34,289 --> 00:08:37,370 >> It turns out that one of CS50's staff and at least one of CS50's students 187 00:08:37,370 --> 00:08:40,299 is currently running for UC president and vice president, 188 00:08:40,299 --> 00:08:42,950 which brought me back to my own days back 189 00:08:42,950 --> 00:08:45,920 when I lost the UC election miserably. 190 00:08:45,920 --> 00:08:48,210 But the silver lining in that is I always 191 00:08:48,210 --> 00:08:50,604 tell the story is that one of the I'm sure 192 00:08:50,604 --> 00:08:52,770 many reasons I lost the election was a complete lack 193 00:08:52,770 --> 00:08:54,103 of a talent for public speaking. 194 00:08:54,103 --> 00:08:56,950 And so quite honestly, it drove me, that experience 195 00:08:56,950 --> 00:09:02,235 I think my junior year, to actually sign up for Harvard Computer Society, which 196 00:09:02,235 --> 00:09:04,610 is the group on campus that holds various technical talks 197 00:09:04,610 --> 00:09:05,318 and other things. 198 00:09:05,318 --> 00:09:08,117 And I took over their teaching seminars and therefore 199 00:09:08,117 --> 00:09:09,950 had an opportunity, a wonderful opportunity, 200 00:09:09,950 --> 00:09:12,620 to start working on exactly this. 201 00:09:12,620 --> 00:09:15,000 But also, I had an opportunity during this experience 202 00:09:15,000 --> 00:09:16,930 to teach myself all the more HTML. 203 00:09:16,930 --> 00:09:21,080 And so I procrastinated last night by looking through the HTML based website 204 00:09:21,080 --> 00:09:28,066 I made in like 1997, '98, for my campaign which looks like this here. 205 00:09:28,066 --> 00:09:29,920 I know. 206 00:09:29,920 --> 00:09:33,340 >> Because-- and of course, notice this amazing design decision in 1998 207 00:09:33,340 --> 00:09:33,850 or whatnot. 208 00:09:33,850 --> 00:09:36,475 The first thing you want users to do upon visiting your website 209 00:09:36,475 --> 00:09:39,860 is to have to click another link just to enter your website here with the monk 210 00:09:39,860 --> 00:09:43,940 behind like a shrouded curtain where apparently my campaign platform was. 211 00:09:43,940 --> 00:09:46,330 And this is all you'll get today is just a screenshot. 212 00:09:46,330 --> 00:09:49,500 But I was reading through, like, my campaign posters last night 213 00:09:49,500 --> 00:09:50,490 and my platform. 214 00:09:50,490 --> 00:09:52,960 >> And I was so angry at the time. 215 00:09:52,960 --> 00:09:55,380 My platform was-- it was interesting. 216 00:09:55,380 --> 00:09:57,730 So I've calmed down since then. 217 00:09:57,730 --> 00:10:03,550 But someday, I will run again and hopefully better off this time. 218 00:10:03,550 --> 00:10:07,265 >> So HTML, that language in which I made that in-- you'll soon make much more-- 219 00:10:07,265 --> 00:10:09,140 is something we've been talking about of late 220 00:10:09,140 --> 00:10:12,460 and largely taking for granted now that we've moved on to other languages. 221 00:10:12,460 --> 00:10:15,650 But let's pause for just a moment and put some of these things in context. 222 00:10:15,650 --> 00:10:18,040 So in a sentence, what is HTML? 223 00:10:18,040 --> 00:10:19,370 >> Or, what is used for? 224 00:10:19,370 --> 00:10:20,208 Anyone? 225 00:10:20,208 --> 00:10:20,708 Yes. 226 00:10:20,708 --> 00:10:22,002 >> AUDIENCE: Markup for websites. 227 00:10:22,002 --> 00:10:23,460 DAVID J. MALAN: Markup for website. 228 00:10:23,460 --> 00:10:27,100 So it's a markup language that lets you structure a web page. 229 00:10:27,100 --> 00:10:30,040 Header goes up here, title goes here, body goes here. 230 00:10:30,040 --> 00:10:33,280 This is boldface, this is italics-- that sort of detail. 231 00:10:33,280 --> 00:10:33,830 >> OK, good. 232 00:10:33,830 --> 00:10:37,620 So CSS lets you-- and I took some liberties there 233 00:10:37,620 --> 00:10:40,990 with the bold-facing and italics because that's better implemented with this. 234 00:10:40,990 --> 00:10:42,096 CSS is-- what? 235 00:10:42,096 --> 00:10:42,845 Say in a sentence. 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 Anyone at all. 238 00:10:46,720 --> 00:10:46,870 Yeah. 239 00:10:46,870 --> 00:10:49,286 >> AUDIENCE: Embellishments and stuff, like how to design it. 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 DAVID J. MALAN: OK, good. 242 00:10:52,810 --> 00:10:55,420 Embellishments that allow you to design it or stylize it 243 00:10:55,420 --> 00:10:59,540 with things like boldface and italics and colors and also more fine 244 00:10:59,540 --> 00:11:01,330 grained positioning of elements. 245 00:11:01,330 --> 00:11:04,520 It sort of lets you take things the last mile so that if, for instance, 246 00:11:04,520 --> 00:11:08,130 in Pset7, you might have noticed on your portfolio page if you're at this point 247 00:11:08,130 --> 00:11:12,270 already that a default table that you make to show the user's stock holdings 248 00:11:12,270 --> 00:11:15,740 and cash probably looks pretty hideous by default with no white space. 249 00:11:15,740 --> 00:11:18,420 Everything's kind of crammed together in rows and columns. 250 00:11:18,420 --> 00:11:20,662 >> Well, with a bit of CSS, as you may realize, 251 00:11:20,662 --> 00:11:23,870 you can actually tweak that and make it something much more familiar and much 252 00:11:23,870 --> 00:11:24,870 prettier to look at. 253 00:11:24,870 --> 00:11:27,730 So CSS is about the stylization of websites. 254 00:11:27,730 --> 00:11:31,970 But then we introduced yet another language, PHP, which lets us do what? 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> Let's just do what? 257 00:11:37,590 --> 00:11:38,177 Anyone. 258 00:11:38,177 --> 00:11:40,010 Got to venture beyond the first couple rows. 259 00:11:40,010 --> 00:11:40,260 Yeah. 260 00:11:40,260 --> 00:11:41,719 >> AUDIENCE: Generate dynamic content. 261 00:11:41,719 --> 00:11:42,718 DAVID J. MALAN: Perfect. 262 00:11:42,718 --> 00:11:43,850 Generate dynamic content. 263 00:11:43,850 --> 00:11:45,808 And you can do this in any number of languages. 264 00:11:45,808 --> 00:11:50,120 We happen to use PHP because it's in part so similar to C syntax. 265 00:11:50,120 --> 00:11:52,000 >> But PHP does exactly that. 266 00:11:52,000 --> 00:11:54,620 It lets you dynamically generate output. 267 00:11:54,620 --> 00:11:57,890 And some of that output could be HTML, as we've typically been doing. 268 00:11:57,890 --> 00:12:00,160 And it's also, because it's a programming language, is 269 00:12:00,160 --> 00:12:03,240 the mechanism via which we can talk to databases. 270 00:12:03,240 --> 00:12:05,730 >> And we can make queries to other servers like Yahoos 271 00:12:05,730 --> 00:12:08,660 and programmatically do anything really that you might otherwise 272 00:12:08,660 --> 00:12:10,400 want to compel a computer to do. 273 00:12:10,400 --> 00:12:13,580 So PHP lets us start dynamically outputting content. 274 00:12:13,580 --> 00:12:16,900 So by this logic, I didn't have a dynamic website back in 1998. 275 00:12:16,900 --> 00:12:18,460 >> It was just a static web page. 276 00:12:18,460 --> 00:12:22,250 My content had to be changed by manually with gedit or some equivalent. 277 00:12:22,250 --> 00:12:25,290 But PHP is what we used or could have used, rather, 278 00:12:25,290 --> 00:12:27,260 for something like the Frosh IMs website, which 279 00:12:27,260 --> 00:12:31,160 was supposed to take registrations and manage a list of users-- things that 280 00:12:31,160 --> 00:12:33,550 are actually changing over time, even though we happen 281 00:12:33,550 --> 00:12:35,990 to use Perl, a different language at the time. 282 00:12:35,990 --> 00:12:40,350 >> And then lastly, we introduced SQL-- Structured Query Language. 283 00:12:40,350 --> 00:12:43,845 So yet another language that's used for what? 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 Used for what? 286 00:12:47,639 --> 00:12:49,430 Can we venture slight-- OK, we're not going 287 00:12:49,430 --> 00:12:51,263 to get much farther than the orchestra here. 288 00:12:51,263 --> 00:12:53,432 AUDIENCE: It's a protocol used to talk to databases. 289 00:12:53,432 --> 00:12:55,640 DAVID J. MALAN: A protocol used to talk to databases. 290 00:12:55,640 --> 00:12:56,181 Let me tweak. 291 00:12:56,181 --> 00:12:59,280 It's an natural language used to talk to databases-- selects 292 00:12:59,280 --> 00:13:01,280 and inserts and deletes and updates and actually 293 00:13:01,280 --> 00:13:03,840 even more features that we haven't even dived 294 00:13:03,840 --> 00:13:07,920 into but you may want to explore-- have to explore for, say, a final project. 295 00:13:07,920 --> 00:13:09,560 So there are these various pieces. 296 00:13:09,560 --> 00:13:13,100 >> And hopefully Pset7, even though its specification is quite long, 297 00:13:13,100 --> 00:13:15,990 it's deliberately long to walk you through how these things can all 298 00:13:15,990 --> 00:13:17,210 be typed together. 299 00:13:17,210 --> 00:13:20,300 Now, on Monday, we introduced our last language 300 00:13:20,300 --> 00:13:23,430 that we'll formally introduce in the course-- that is, JavaScript. 301 00:13:23,430 --> 00:13:25,720 This, like PHP, is an interpreted language. 302 00:13:25,720 --> 00:13:28,110 >> But a key distinction I proposed on Monday 303 00:13:28,110 --> 00:13:32,730 is that whereas PHP is executing or being interpreted on the server, which 304 00:13:32,730 --> 00:13:35,990 in this case is the CS50 appliance, or might be some commercial web 305 00:13:35,990 --> 00:13:39,370 server on the internet, JavaScript generally 306 00:13:39,370 --> 00:13:43,650 is a language that runs client side not server side-- so in the browser. 307 00:13:43,650 --> 00:13:46,970 Which is to say, just like when I opened up Facebook source code and found all 308 00:13:46,970 --> 00:13:51,510 of those .js files, the implication was that when you visit Facebook or most 309 00:13:51,510 --> 00:13:54,810 websites these days, you get not only HTML, not only CSS, 310 00:13:54,810 --> 00:13:59,370 but a whole bunch of JavaScript code often in the form of .js files. 311 00:13:59,370 --> 00:14:03,970 And then it's the browser-- your own Mac or PC-- that executes that code. 312 00:14:03,970 --> 00:14:05,990 >> But your browser executes it. 313 00:14:05,990 --> 00:14:08,070 You can think in sort of a sandbox. 314 00:14:08,070 --> 00:14:12,420 So that JavaScript code shouldn't be able to delete files on your computer. 315 00:14:12,420 --> 00:14:14,730 It shouldn't be able to send emails on your behalf. 316 00:14:14,730 --> 00:14:17,760 Your browser kind of restricts what you can do with it. 317 00:14:17,760 --> 00:14:20,630 >> So in that sense, it's a little less powerful, perhaps, than C. 318 00:14:20,630 --> 00:14:24,030 But JavaScript can, as an aside, be used on the server, 319 00:14:24,030 --> 00:14:27,740 though we'll tend not to talk about it in that context. 320 00:14:27,740 --> 00:14:29,740 So now let's tie these together. 321 00:14:29,740 --> 00:14:34,000 A week plus ago, we presented some HTML on the left-- super boring web page. 322 00:14:34,000 --> 00:14:35,000 >> Just says hello world. 323 00:14:35,000 --> 00:14:38,110 And then I proposed on the right we can kind of steal ideas 324 00:14:38,110 --> 00:14:41,470 from our discussion of data structures in C 325 00:14:41,470 --> 00:14:45,270 and think about how this hierarchical markup language on the left 326 00:14:45,270 --> 00:14:49,720 could be drawn or implemented in memory as an actual tree structure with nodes 327 00:14:49,720 --> 00:14:51,400 and pointers and those kinds of details. 328 00:14:51,400 --> 00:14:53,820 On the right, we call that a DOM-- Document 329 00:14:53,820 --> 00:14:56,800 Object Model-- which is just a fancy way of saying tree. 330 00:14:56,800 --> 00:14:59,520 >> Now, why is this useful to think of it in this way? 331 00:14:59,520 --> 00:15:01,680 Because now with JavaScript, because we have 332 00:15:01,680 --> 00:15:05,810 code that gets to play in this environment, the actual HTML that's 333 00:15:05,810 --> 00:15:08,360 been sent to the browser already and has already 334 00:15:08,360 --> 00:15:12,690 been loaded into memory by the browser into a tree in your computer's 335 00:15:12,690 --> 00:15:18,270 RAM like this, we can use JavaScript to actually traverse or walk or search 336 00:15:18,270 --> 00:15:21,800 or change that DOM tree however we want. 337 00:15:21,800 --> 00:15:24,040 So in fact, if you think about facebook.com, 338 00:15:24,040 --> 00:15:27,660 if you use the chat feature, if you use Gmail and the gchat feature, 339 00:15:27,660 --> 00:15:30,540 anything where you have messages coming again and again 340 00:15:30,540 --> 00:15:35,880 and again, those messages are probably, like, LI tag, List Item tags, maybe. 341 00:15:35,880 --> 00:15:37,940 >> Or maybe they're just divs that keep appearing 342 00:15:37,940 --> 00:15:39,770 every time you get an instant message. 343 00:15:39,770 --> 00:15:42,960 And so that just means what Facebook or Google is doing 344 00:15:42,960 --> 00:15:45,200 is any time you get a message from the server, 345 00:15:45,200 --> 00:15:48,740 they are probably using JavaScript to just add another node 346 00:15:48,740 --> 00:15:52,700 to this tree-- another node to this tree that then visually just looks 347 00:15:52,700 --> 00:15:54,570 like a new line of text on your screen. 348 00:15:54,570 --> 00:15:57,100 But they're inserting into this data structure. 349 00:15:57,100 --> 00:15:59,742 >> So in classes like CS124 and others, you'll 350 00:15:59,742 --> 00:16:02,200 actually write more code against data structures like this. 351 00:16:02,200 --> 00:16:04,310 But for now in JavaScript, we'll just assume 352 00:16:04,310 --> 00:16:07,920 we get all of this functionality for free from the language itself. 353 00:16:07,920 --> 00:16:09,210 So let's look at an example. 354 00:16:09,210 --> 00:16:13,120 >> Let me open up a file called form.html. 355 00:16:13,120 --> 00:16:14,601 It's super simple. 356 00:16:14,601 --> 00:16:15,600 It just looks like this. 357 00:16:15,600 --> 00:16:17,860 >> No CSS, no thought to aesthetics. 358 00:16:17,860 --> 00:16:19,810 It's purely functional and apparently I'm 359 00:16:19,810 --> 00:16:24,000 asking for an email, a password, password again, and then a check 360 00:16:24,000 --> 00:16:26,150 to agree to some terms and conditions. 361 00:16:26,150 --> 00:16:28,740 What the source code for this looks like is probably something 362 00:16:28,740 --> 00:16:31,030 you might guess with a little bit of thought now. 363 00:16:31,030 --> 00:16:32,840 I've got a form tag here. 364 00:16:32,840 --> 00:16:36,190 >> An action is apparently going to go to a file called register.php. 365 00:16:36,190 --> 00:16:37,870 The method I'm going to use is get. 366 00:16:37,870 --> 00:16:40,880 And then I've got a text field whose name is email. 367 00:16:40,880 --> 00:16:43,340 >> I've got a password field whose name is password. 368 00:16:43,340 --> 00:16:45,420 I've got another password field whose name 369 00:16:45,420 --> 00:16:47,342 is somewhat arbitrarily confirmation. 370 00:16:47,342 --> 00:16:49,690 It's just another HTTP parameter. 371 00:16:49,690 --> 00:16:54,430 >> And then we we've not used these except since the Frosh IMs demo in class-- 372 00:16:54,430 --> 00:16:56,692 a check box which is just type equals check. 373 00:16:56,692 --> 00:16:57,900 And I'll call that agreement. 374 00:16:57,900 --> 00:17:00,700 So I've kind of arbitrarily but conveniently named these fields. 375 00:17:00,700 --> 00:17:03,450 So that now when this form gets submitted, let's see what happens. 376 00:17:03,450 --> 00:17:07,290 If I do malan@harvard.edu, I'll do a password of crimson. 377 00:17:07,290 --> 00:17:09,530 I'll do a password of nothing. 378 00:17:09,530 --> 00:17:10,910 Let's not cooperate. 379 00:17:10,910 --> 00:17:12,280 >> And I won't check the box. 380 00:17:12,280 --> 00:17:13,940 Let me click Register. 381 00:17:13,940 --> 00:17:15,420 And it says, hm, you're registered. 382 00:17:15,420 --> 00:17:16,069 Not really. 383 00:17:16,069 --> 00:17:17,450 >> But the URL changed. 384 00:17:17,450 --> 00:17:22,280 So this form was clearly allowed to submit to register.php. 385 00:17:22,280 --> 00:17:25,160 But presumably, I should be catching some of these errors. 386 00:17:25,160 --> 00:17:27,569 Now, in Pset7 and some of our lecture examples, 387 00:17:27,569 --> 00:17:30,130 we would generally print out a big red error message here 388 00:17:30,130 --> 00:17:33,760 saying, missing name, or missing password. 389 00:17:33,760 --> 00:17:37,680 We've done that before and we've done server side error detection. 390 00:17:37,680 --> 00:17:41,580 >> But many websites these days do client side error detection 391 00:17:41,580 --> 00:17:42,810 where the URL doesn't change. 392 00:17:42,810 --> 00:17:44,101 The whole page doesn't refresh. 393 00:17:44,101 --> 00:17:46,940 You get instant feedback from the browser. 394 00:17:46,940 --> 00:17:48,070 Maybe something goes red. 395 00:17:48,070 --> 00:17:49,190 >> Maybe you get a pop up. 396 00:17:49,190 --> 00:17:53,240 But you don't waste time sending to the server data that's incomplete. 397 00:17:53,240 --> 00:17:56,050 So let's see how we might achieve that feature as well. 398 00:17:56,050 --> 00:17:59,660 >> Let me go to form1.html, which looks the same. 399 00:17:59,660 --> 00:18:03,530 But if this time I do malan@harvard.edu and I type crimson 400 00:18:03,530 --> 00:18:07,350 and I don't cooperate further but click Register, notice now. 401 00:18:07,350 --> 00:18:08,940 It's not the sexiest solution. 402 00:18:08,940 --> 00:18:10,900 I've at least caught this error. 403 00:18:10,900 --> 00:18:12,900 And I've used the alert function in JavaScript-- 404 00:18:12,900 --> 00:18:14,090 which we're only using in class. 405 00:18:14,090 --> 00:18:16,430 In general, you should not use this because it can very quickly get out 406 00:18:16,430 --> 00:18:17,160 of control. 407 00:18:17,160 --> 00:18:19,180 But passwords do not match is the error. 408 00:18:19,180 --> 00:18:21,120 >> Let me go ahead and click OK. 409 00:18:21,120 --> 00:18:25,040 But what the key takeaway here is that the URL did not change. 410 00:18:25,040 --> 00:18:27,960 So I've not bothered wasting the server's time asking it 411 00:18:27,960 --> 00:18:30,750 a question that I could have figured out the answer to myself. 412 00:18:30,750 --> 00:18:33,210 >> And the user, even though been talking about this 413 00:18:33,210 --> 00:18:35,264 longer than the user's going to think about this, 414 00:18:35,264 --> 00:18:36,680 is going to have instant feedback. 415 00:18:36,680 --> 00:18:39,044 There's no latency with the network connectivity. 416 00:18:39,044 --> 00:18:40,460 So let's look at this source code. 417 00:18:40,460 --> 00:18:45,600 >> Form1.html looks structurally similar up here. 418 00:18:45,600 --> 00:18:46,810 The form is in fact the same. 419 00:18:46,810 --> 00:18:48,330 But let's see what I did down here. 420 00:18:48,330 --> 00:18:49,913 And there's different ways to do this. 421 00:18:49,913 --> 00:18:53,690 And I've done the most straight follower but not most elegant way yet. 422 00:18:53,690 --> 00:18:54,869 I have a script tag. 423 00:18:54,869 --> 00:18:57,035 I then call document.getElementByID('registration'). 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 And I store that value in form, a variable. 426 00:19:04,420 --> 00:19:05,520 >> So what have I done? 427 00:19:05,520 --> 00:19:08,960 You can think of document.getElementByID as being 428 00:19:08,960 --> 00:19:11,200 a special function that JavaScript gives you 429 00:19:11,200 --> 00:19:14,400 that literally hands you a pointer to one of the nodes 430 00:19:14,400 --> 00:19:16,520 or rectangles in this tree. 431 00:19:16,520 --> 00:19:21,470 So now that's what our form variable in JavaScript is actually pointing at. 432 00:19:21,470 --> 00:19:25,120 >> So now the syntax is different from C. But we're doing a few things here. 433 00:19:25,120 --> 00:19:30,360 One, this one is a little strange looking, certainly versus C. 434 00:19:30,360 --> 00:19:32,180 But look at line 35. 435 00:19:32,180 --> 00:19:35,130 So on the left form.onsubmit. 436 00:19:35,130 --> 00:19:38,060 Recall that onsubmit is like a field in a struct. 437 00:19:38,060 --> 00:19:41,480 If you think of the form variable is just being a C struct, 438 00:19:41,480 --> 00:19:42,600 it might have some fields. 439 00:19:42,600 --> 00:19:46,410 >> Back in the day, we had students names, IDs, houses, those kind of fields. 440 00:19:46,410 --> 00:19:48,520 Just think of onsubmit as another field. 441 00:19:48,520 --> 00:19:53,380 But it's a special field because the browser is preprogrammed to expect 442 00:19:53,380 --> 00:19:57,530 .onsubmit to not be a value like a number or string, 443 00:19:57,530 --> 00:20:01,180 but to actually be a function or the address of a function 444 00:20:01,180 --> 00:20:02,570 in the computer's memory. 445 00:20:02,570 --> 00:20:04,740 >> And indeed, that's what this keyword here does. 446 00:20:04,740 --> 00:20:06,710 This says, give me a new function. 447 00:20:06,710 --> 00:20:09,390 But what is its name going to be, apparently? 448 00:20:09,390 --> 00:20:10,800 >> Thinking back to Monday. 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 What is the name of this function based on this syntax? 451 00:20:17,170 --> 00:20:19,784 No, I mean, there's clearly no name associated-- certainly 452 00:20:19,784 --> 00:20:21,200 not in what I've highlighted here. 453 00:20:21,200 --> 00:20:22,560 >> But that's actually OK. 454 00:20:22,560 --> 00:20:25,840 This is an anonymous function, or a lambda function as some might call it. 455 00:20:25,840 --> 00:20:27,589 And that just means it's still a function. 456 00:20:27,589 --> 00:20:29,400 It's just, you can't call it by name. 457 00:20:29,400 --> 00:20:30,057 But that's OK. 458 00:20:30,057 --> 00:20:33,140 Because again, the browser has been preprogrammed by companies like Google 459 00:20:33,140 --> 00:20:38,540 or Microsoft or Mozilla or others to just know that if the .onsubmit field 460 00:20:38,540 --> 00:20:43,400 inside of a form element has the value, treat it as a function-- 461 00:20:43,400 --> 00:20:44,750 a function pointer, if you will. 462 00:20:44,750 --> 00:20:46,910 And call it when the form is submitted. 463 00:20:46,910 --> 00:20:50,350 >> So what code should be executed when the form is submitted? 464 00:20:50,350 --> 00:20:52,526 Apparently, everything inside of the curly brace. 465 00:20:52,526 --> 00:20:53,650 And this is just stylistic. 466 00:20:53,650 --> 00:20:55,626 >> You could do this like we tend to do in CS50. 467 00:20:55,626 --> 00:20:58,250 But in JavaScript, most people tend to keep it on the same line 468 00:20:58,250 --> 00:21:01,960 just because it more clearly is associated with that keyword function. 469 00:21:01,960 --> 00:21:03,240 So now what am I doing? 470 00:21:03,240 --> 00:21:08,616 >> If form.email.value equals equals the empty string or nothing, here's 471 00:21:08,616 --> 00:21:11,490 an alert where I'm going to say, you must provide your email address, 472 00:21:11,490 --> 00:21:12,690 and then return false. 473 00:21:12,690 --> 00:21:15,720 And it's that return false that prevents the form from being submitted. 474 00:21:15,720 --> 00:21:19,480 Meanwhile, if the password value is blank, I'm going to yell at the user 475 00:21:19,480 --> 00:21:21,150 and say, you must provide a password. 476 00:21:21,150 --> 00:21:23,700 >> Meanwhile things are getting a little fancier here. 477 00:21:23,700 --> 00:21:29,160 If form.password.value does not equal form.confirmation.value, 478 00:21:29,160 --> 00:21:31,680 the other field, yell at the user that the passwords 479 00:21:31,680 --> 00:21:33,860 don't match as they did not a moment ago. 480 00:21:33,860 --> 00:21:35,780 And then this one's a little sexier because I 481 00:21:35,780 --> 00:21:40,470 know I knew conceptually that checked is a check box's name. 482 00:21:40,470 --> 00:21:45,680 >> So I can just use an exclamation point to say if the check is not 483 00:21:45,680 --> 00:21:48,040 checked-- it's the Boolean value, true or false-- 484 00:21:48,040 --> 00:21:49,700 I'll yell at the user for that reason. 485 00:21:49,700 --> 00:21:52,300 Otherwise, if we get through all of these conditions, 486 00:21:52,300 --> 00:21:53,270 let's just return true. 487 00:21:53,270 --> 00:21:54,700 Let the form be submitted. 488 00:21:54,700 --> 00:21:56,560 And this will then happen. 489 00:21:56,560 --> 00:21:57,740 >> Let's type in crimson. 490 00:21:57,740 --> 00:22:00,230 Let's check the box, click Register. 491 00:22:00,230 --> 00:22:01,979 And now I go through to the destination. 492 00:22:01,979 --> 00:22:03,270 Now, there's no database there. 493 00:22:03,270 --> 00:22:05,370 There's nothing interesting in register.php. 494 00:22:05,370 --> 00:22:07,980 I just needed something to actually talk to. 495 00:22:07,980 --> 00:22:09,140 So let me pause, here. 496 00:22:09,140 --> 00:22:16,270 Any questions on what we've just done or what some of this new syntax is? 497 00:22:16,270 --> 00:22:17,640 OK, yeah? 498 00:22:17,640 --> 00:22:20,025 >> AUDIENCE: So any checkbox is automatically a Boolean . 499 00:22:20,025 --> 00:22:21,650 You don't have to declare it like that. 500 00:22:21,650 --> 00:22:22,649 >> DAVID J. MALAN: Correct. 501 00:22:22,649 --> 00:22:29,340 Any checkbox that's sent to you from an HTML form to your JavaScript code 502 00:22:29,340 --> 00:22:31,760 will be treated, yes, as a Boolean value-- true or false. 503 00:22:31,760 --> 00:22:32,635 It's a good question. 504 00:22:32,635 --> 00:22:36,080 Whereas the other values, of course, have been text, AKA strings. 505 00:22:36,080 --> 00:22:38,500 >> All right, so let me rewind a bit further. 506 00:22:38,500 --> 00:22:39,900 What was the whole point of this? 507 00:22:39,900 --> 00:22:41,400 Just to be clear. 508 00:22:41,400 --> 00:22:44,940 Like, we already know, even from Pset7 and even from last week's lecture 509 00:22:44,940 --> 00:22:51,120 examples, that we can obviously check $_GET $_POST see if the user give us 510 00:22:51,120 --> 00:22:52,200 an empty value. 511 00:22:52,200 --> 00:22:54,400 Remember the empty function in PHP. 512 00:22:54,400 --> 00:22:58,040 >> So just to be clear, what's one reason we might also 513 00:22:58,040 --> 00:23:00,535 want to do this error checking inside of the browser? 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 What's the motivation here? 516 00:23:06,080 --> 00:23:06,580 Yeah. 517 00:23:06,580 --> 00:23:09,735 >> AUDIENCE: Faster, and you don't send useless data to the server. 518 00:23:09,735 --> 00:23:10,610 DAVID J. MALAN: Good. 519 00:23:10,610 --> 00:23:11,170 It's faster. 520 00:23:11,170 --> 00:23:12,920 You don't send useless data to the server. 521 00:23:12,920 --> 00:23:14,670 >> So you get back a more immediate response. 522 00:23:14,670 --> 00:23:16,560 And overall, the user experience is better. 523 00:23:16,560 --> 00:23:17,900 Think about the alternative. 524 00:23:17,900 --> 00:23:21,160 >> If for Gmail-- and was the case many years ago. 525 00:23:21,160 --> 00:23:24,160 Suppose you got a new email your Gmail account, but the only way through 526 00:23:24,160 --> 00:23:26,510 to see that is to, like, reload the whole page. 527 00:23:26,510 --> 00:23:29,030 Or suppose you click on a link to read an email. 528 00:23:29,030 --> 00:23:31,600 >> Everything has to reload so that you can see the email. 529 00:23:31,600 --> 00:23:33,380 Or Facebook-- you get a chat message. 530 00:23:33,380 --> 00:23:36,000 You don't see it until you reload the page or click some link. 531 00:23:36,000 --> 00:23:38,380 >> Like, this would be an awfully annoying user experience. 532 00:23:38,380 --> 00:23:41,300 And this is what it was like, clearly, back when I ran for UC 533 00:23:41,300 --> 00:23:44,760 and the web was much less dynamic and JavaScript wasn't as popularized 534 00:23:44,760 --> 00:23:45,601 as it is now. 535 00:23:45,601 --> 00:23:47,850 And things are getting much more dynamic and much more 536 00:23:47,850 --> 00:23:49,900 client side in that sense. 537 00:23:49,900 --> 00:23:54,370 >> But there is a catch here, and this is kind of an annoying gotcha. 538 00:23:54,370 --> 00:23:58,720 Just because you add client side detection like this does not mean 539 00:23:58,720 --> 00:24:01,430 you can or should abandon server side detection. 540 00:24:01,430 --> 00:24:04,080 You essentially want to put your error checking in both places. 541 00:24:04,080 --> 00:24:05,830 Because what was one of the lesson learned 542 00:24:05,830 --> 00:24:10,270 from the article I read some excerpts from with this stupid CMS system-- 543 00:24:10,270 --> 00:24:14,410 Content Management System-- that was implementing its authentication system, 544 00:24:14,410 --> 00:24:16,790 its login via what mechanism? 545 00:24:16,790 --> 00:24:19,515 546 00:24:19,515 --> 00:24:20,469 JavaScript. 547 00:24:20,469 --> 00:24:21,499 >> AUDIENCE: JavaScript. 548 00:24:21,499 --> 00:24:23,290 DAVID J. MALAN: JavaScript, exactly, right? 549 00:24:23,290 --> 00:24:24,610 It was using JavaScript. 550 00:24:24,610 --> 00:24:27,120 And literally, you guys have played a little bit probably 551 00:24:27,120 --> 00:24:28,700 with Chrome's Inspector. 552 00:24:28,700 --> 00:24:30,890 And if I can find it, inspect element. 553 00:24:30,890 --> 00:24:33,670 >> Let me go over to do all of Chrome's options. 554 00:24:33,670 --> 00:24:37,080 And this is how easy it is to disable JavaScript in a browser. 555 00:24:37,080 --> 00:24:38,950 Check, no more JavaScript. 556 00:24:38,950 --> 00:24:41,070 >> So in fairness, a lot of the web these days 557 00:24:41,070 --> 00:24:43,430 is just going to break because Gmail and other sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook-- assume that JavaScript is enabled. 559 00:24:46,140 --> 00:24:50,180 But if you're doing something stupid like only validating users input 560 00:24:50,180 --> 00:24:52,520 and checking it for errors on the client side, 561 00:24:52,520 --> 00:24:54,940 an adversary could easily do this. 562 00:24:54,940 --> 00:24:57,180 And then even smarter adversary like you guys 563 00:24:57,180 --> 00:25:01,120 now could use Telnet or Curl or just command line commands 564 00:25:01,120 --> 00:25:05,300 and actually send messages to the server that similarly are not error checked. 565 00:25:05,300 --> 00:25:08,380 >> So this is more of a user interface decision 566 00:25:08,380 --> 00:25:13,060 than it is an actual technical improvement-- implementing 567 00:25:13,060 --> 00:25:14,410 something client side like this. 568 00:25:14,410 --> 00:25:16,800 So now a quick glance, but then I'll defer to the online walk 569 00:25:16,800 --> 00:25:17,674 through for this one. 570 00:25:17,674 --> 00:25:21,480 In form two, we actually went through and cleaned up the code a little bit. 571 00:25:21,480 --> 00:25:23,650 But let me defer to one of the videos we'll likely 572 00:25:23,650 --> 00:25:27,970 embed in Pset8 that just shows you a similar syntax using a library called 573 00:25:27,970 --> 00:25:32,320 jQuery, which is a super, super popular library in JavaScript 574 00:25:32,320 --> 00:25:34,510 that frankly most people just use these days 575 00:25:34,510 --> 00:25:37,070 and even confuse as being JavaScript itself. 576 00:25:37,070 --> 00:25:38,950 >> And it tends to involve some dollar signs 577 00:25:38,950 --> 00:25:41,350 and keywords like document in parentheses here. 578 00:25:41,350 --> 00:25:44,480 But again, let me defer to some slower tutorials online 579 00:25:44,480 --> 00:25:46,750 rather than get tied up in just syntax. 580 00:25:46,750 --> 00:25:48,630 Let's move on to something a little cooler 581 00:25:48,630 --> 00:25:50,520 in terms of the applications of this. 582 00:25:50,520 --> 00:25:57,730 >> So in particular, let me go ahead and open up this here. 583 00:25:57,730 --> 00:25:58,340 Come on. 584 00:25:58,340 --> 00:25:59,380 There we go. 585 00:25:59,380 --> 00:26:01,500 >> Let me open up this picture here. 586 00:26:01,500 --> 00:26:03,450 Unnecessarily complicated looking, but it 587 00:26:03,450 --> 00:26:07,880 describes a technique called AJAX-- Asynchronous JavaScript and XML, where 588 00:26:07,880 --> 00:26:10,530 the X for XML is actually no longer really used. 589 00:26:10,530 --> 00:26:13,430 It tends to use something else called JSON. 590 00:26:13,430 --> 00:26:16,560 >> But here is how something like Google Maps or Google Earth works. 591 00:26:16,560 --> 00:26:18,060 Let's try this on the fly, actually. 592 00:26:18,060 --> 00:26:21,590 Let me go ahead and open up Chrome on my browser. 593 00:26:21,590 --> 00:26:26,236 >> And let me go into, say, maps.google.com. 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 And actually, if you're old enough to remember what, 596 00:26:31,930 --> 00:26:35,600 like, MapQuest was like back in the day, and maybe they still work like this. 597 00:26:35,600 --> 00:26:38,870 When you used to search for something-- 33 Oxford Street, Cambridge, Mass, 598 00:26:38,870 --> 00:26:40,650 let's do this-- you would actually, if you 599 00:26:40,650 --> 00:26:43,000 wanted to pan up and down, left and right, 600 00:26:43,000 --> 00:26:44,920 you would look like a big arrow on top, and it 601 00:26:44,920 --> 00:26:46,921 would show you another frame of the map up here. 602 00:26:46,921 --> 00:26:49,753 Or you would click left and you would go over here, or another click 603 00:26:49,753 --> 00:26:51,000 and you would go over here. 604 00:26:51,000 --> 00:26:53,000 But instead these days, we of course just 605 00:26:53,000 --> 00:26:55,970 take for granted that we can go around Cambridge pretty quickly 606 00:26:55,970 --> 00:26:57,550 just by clicking and dragging. 607 00:26:57,550 --> 00:26:59,130 But notice there's some glitches. 608 00:26:59,130 --> 00:27:02,160 >> If I do this fast enough, what seems to be happening 609 00:27:02,160 --> 00:27:05,960 as I drag a little too fast for the computer to keep up? 610 00:27:05,960 --> 00:27:07,160 What do you see? 611 00:27:07,160 --> 00:27:07,660 Yeah. 612 00:27:07,660 --> 00:27:09,232 >> AUDIENCE: The pixels don't refresh. 613 00:27:09,232 --> 00:27:10,940 DAVID J. MALAN: The pixels don't refresh. 614 00:27:10,940 --> 00:27:12,870 There's actually-- and you could see this, actually, 615 00:27:12,870 --> 00:27:15,360 if you're watching online and pause this or actually slows things down 616 00:27:15,360 --> 00:27:18,600 for once-- you'll see that there are tiles, squares, or rectangles that 617 00:27:18,600 --> 00:27:22,040 are missing from the map until a split second later, more data, 618 00:27:22,040 --> 00:27:24,390 more images actually appear on the screen. 619 00:27:24,390 --> 00:27:29,810 And in fact, if we do this by looking up Chrome's-- let's say, Chrome-- 620 00:27:29,810 --> 00:27:30,310 let's see. 621 00:27:30,310 --> 00:27:31,090 We can't do that. 622 00:27:31,090 --> 00:27:31,860 >> Oh, whoops. 623 00:27:31,860 --> 00:27:34,761 Let's open up maps.google.com. 624 00:27:34,761 --> 00:27:36,660 Let me make the window bigger again. 625 00:27:36,660 --> 00:27:38,836 >> Go back to 33 Oxford Street. 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 What was the website I was on recently? 628 00:27:43,760 --> 00:27:46,440 I had this, like, private rant to myself that I'd then instant message 629 00:27:46,440 --> 00:27:48,470 any friend who was online who wanted to hear it. 630 00:27:48,470 --> 00:27:49,345 There's some website. 631 00:27:49,345 --> 00:27:52,680 I think it's Comcast-- so a very big American ISP. 632 00:27:52,680 --> 00:27:56,355 You can, when signing up for new cable modem service or cable TV service, 633 00:27:56,355 --> 00:27:59,230 they have a form very reasonably where they ask you for your address. 634 00:27:59,230 --> 00:28:01,450 And have this amazing feature called auto complete, 635 00:28:01,450 --> 00:28:04,600 like Google, that starts to fill in the answer to your question. 636 00:28:04,600 --> 00:28:08,090 >> The problem is, they do auto complete on the first things that you type. 637 00:28:08,090 --> 00:28:12,890 So if you start typing in 33, it will show you literally every house 638 00:28:12,890 --> 00:28:15,790 in America that starts with the number 33 639 00:28:15,790 --> 00:28:17,920 before continuing to expect you to type more. 640 00:28:17,920 --> 00:28:20,660 So if you type 33 Oxford, then it shows you every street 641 00:28:20,660 --> 00:28:24,726 in America that has 33 Oxford in its name, irrespective of the town 642 00:28:24,726 --> 00:28:25,350 that you're in. 643 00:28:25,350 --> 00:28:26,320 >> And then you continue typing. 644 00:28:26,320 --> 00:28:28,930 And finally, it realizes that they don't offer service to your home in Cambridge 645 00:28:28,930 --> 00:28:29,920 or something like that. 646 00:28:29,920 --> 00:28:33,410 But the point is, this is the most asinine implementation of auto 647 00:28:33,410 --> 00:28:34,140 complete ever. 648 00:28:34,140 --> 00:28:36,400 >> And I'm just going off on this tangent again. 649 00:28:36,400 --> 00:28:39,040 But there are good ways to use JavaScript and bad ways. 650 00:28:39,040 --> 00:28:40,750 And that's not necessarily the best one. 651 00:28:40,750 --> 00:28:46,360 >> But the point here, before this tirade, was to open up tools down here 652 00:28:46,360 --> 00:28:49,480 and open up developer tools, as we've encouraged before, 653 00:28:49,480 --> 00:28:52,840 and to watch the Network tab as I click really fast. 654 00:28:52,840 --> 00:28:55,400 And notice a whole bunch of get requests happened. 655 00:28:55,400 --> 00:28:57,310 All of this happened since I dragged. 656 00:28:57,310 --> 00:29:00,170 >> And most likely, indeed a lot of these rows 657 00:29:00,170 --> 00:29:04,060 now are image slash JPEG MIME types or content types. 658 00:29:04,060 --> 00:29:07,750 That's because what chrome is doing every time I click and drag, click 659 00:29:07,750 --> 00:29:11,650 and drag, is it's realizing, oh, I need to go ask Google for the tile 660 00:29:11,650 --> 00:29:15,080 on the map that's over here, quickly download it via HTTP, 661 00:29:15,080 --> 00:29:19,550 and then add it to the so-called DOM to the web browsers in memory tree 662 00:29:19,550 --> 00:29:24,430 representation so that the user, me, sees that updated tile. 663 00:29:24,430 --> 00:29:26,795 And this is because of a technique called AJAX. 664 00:29:26,795 --> 00:29:28,920 Back in the day, it really was the case that if you 665 00:29:28,920 --> 00:29:33,050 wanted to change what's on the screen, you would have to click up, down, left, 666 00:29:33,050 --> 00:29:33,550 right. 667 00:29:33,550 --> 00:29:34,740 And then a new page would open. 668 00:29:34,740 --> 00:29:36,531 But these days, everything is more dynamic. 669 00:29:36,531 --> 00:29:40,490 It happens in the way we humans would hope it actually would interactively. 670 00:29:40,490 --> 00:29:43,210 And it achieves this by way of a technique called 671 00:29:43,210 --> 00:29:46,170 AJAX, which is perhaps best explained by an example. 672 00:29:46,170 --> 00:29:49,730 First, let me go ahead and open up a file 673 00:29:49,730 --> 00:29:53,540 called quote.php in today's distribution code. 674 00:29:53,540 --> 00:29:56,200 >> And then let me do symbol-- whoops. 675 00:29:56,200 --> 00:30:02,399 Let me do symbol=GOOG for just some stock. 676 00:30:02,399 --> 00:30:04,440 Or actually, let's do the one from the Pset FREE. 677 00:30:04,440 --> 00:30:05,270 Enter. 678 00:30:05,270 --> 00:30:06,580 >> And now notice what I get back. 679 00:30:06,580 --> 00:30:09,210 So this is a really short PHP file that I 680 00:30:09,210 --> 00:30:13,210 wrote that simply borrows code from Pset7's lookup function 681 00:30:13,210 --> 00:30:17,830 and spits out using this curly brace and quotes and colon notation, apparently, 682 00:30:17,830 --> 00:30:22,747 the current stock's price for the company that you pass in via get. 683 00:30:22,747 --> 00:30:24,580 So this is different from most of what we've 684 00:30:24,580 --> 00:30:26,496 done in that notice I'm literally spitting out 685 00:30:26,496 --> 00:30:27,870 what looks like JavaScript code. 686 00:30:27,870 --> 00:30:30,020 >> In fact, this is a JavaScript object. 687 00:30:30,020 --> 00:30:34,130 In fact, just to be more clear, JavaScript Object Notation-- JSON-- 688 00:30:34,130 --> 00:30:38,330 is just a fancy way of saying that you can represent data in JavaScript much 689 00:30:38,330 --> 00:30:41,660 like you can in PHP using key value pairs. 690 00:30:41,660 --> 00:30:44,270 So if I wanted to declare a variable in JavaScript 691 00:30:44,270 --> 00:30:47,872 to represents Zamyla, for instance-- a struct for Zamyla-- 692 00:30:47,872 --> 00:30:49,580 and we'll call it student, this variable. 693 00:30:49,580 --> 00:30:53,060 Her ID is one, house is Winthrop, and name is Zamyla. 694 00:30:53,060 --> 00:30:55,490 >> But I can also have an array of objects. 695 00:30:55,490 --> 00:30:58,710 So if I actually wanted to have an array in JavaScript containing 696 00:30:58,710 --> 00:31:01,740 multiple such objects, this time representing staff, 697 00:31:01,740 --> 00:31:04,910 I might have these three chunks of code back 698 00:31:04,910 --> 00:31:08,560 to back to back for these three former staff members. 699 00:31:08,560 --> 00:31:12,201 So the syntax, pretty similar to both-- to PHP. 700 00:31:12,201 --> 00:31:13,700 But this is particularly JavaScript. 701 00:31:13,700 --> 00:31:15,940 It's object notation. 702 00:31:15,940 --> 00:31:17,240 So what is this useful for? 703 00:31:17,240 --> 00:31:21,580 >> If I write code that spits out JSON-- JavaScript Object Notation-- stuff that 704 00:31:21,580 --> 00:31:24,670 looks like this or stuff that looks like Zamyla's structure, 705 00:31:24,670 --> 00:31:27,730 I can actually use this in programs I write. 706 00:31:27,730 --> 00:31:30,660 Let me go to ajax0.html. 707 00:31:30,660 --> 00:31:33,310 And this too-- not much thought given to aesthetics. 708 00:31:33,310 --> 00:31:34,660 But watch what happens. 709 00:31:34,660 --> 00:31:37,050 >> Let me go ahead and type free here. 710 00:31:37,050 --> 00:31:38,490 Click get quote. 711 00:31:38,490 --> 00:31:41,060 And notice the URL has not changed. 712 00:31:41,060 --> 00:31:47,250 But I did get a pop up with apparently today's penny stock price of $0.15. 713 00:31:47,250 --> 00:31:49,062 So not all that bad. 714 00:31:49,062 --> 00:31:52,020 But the difference is that somehow, this data came back to me directly. 715 00:31:52,020 --> 00:31:54,250 But let's take a step toward something more familiar. 716 00:31:54,250 --> 00:31:58,900 In version one of this, let me type free again, click Get quote, 717 00:31:58,900 --> 00:32:01,146 and now-- oh, this was actually the jQuery version. 718 00:32:01,146 --> 00:32:03,270 So let me-- I didn't fast-forward quite far enough. 719 00:32:03,270 --> 00:32:05,830 Let me go to version two, which is where I wanted. 720 00:32:05,830 --> 00:32:07,260 Notice what I've done here. 721 00:32:07,260 --> 00:32:10,370 I have a web page-- a super simple version of any web page 722 00:32:10,370 --> 00:32:14,260 you might use today with a text field here for free and then apparently just 723 00:32:14,260 --> 00:32:14,880 text. 724 00:32:14,880 --> 00:32:16,860 >> This is not a form here, apparently. 725 00:32:16,860 --> 00:32:19,360 But if I click get quote, notice my web page 726 00:32:19,360 --> 00:32:22,760 is about to change as though I just got a new instant message 727 00:32:22,760 --> 00:32:25,360 or as though I just moved the map and needed to get more data 728 00:32:25,360 --> 00:32:29,220 added dynamically to the web page without the URL changing and the user 729 00:32:29,220 --> 00:32:30,980 experience getting interrupted. 730 00:32:30,980 --> 00:32:35,750 Indeed, I'm still at the exact same place-- ajax2.html. 731 00:32:35,750 --> 00:32:39,080 >> So let's look only at this example and see how this is happening. 732 00:32:39,080 --> 00:32:42,490 Let me go into ajax2.html. 733 00:32:42,490 --> 00:32:44,770 And notice the form first. 734 00:32:44,770 --> 00:32:47,092 >> Down here, I'm turning off auto complete. 735 00:32:47,092 --> 00:32:48,800 Sometimes it gets annoying if the browser 736 00:32:48,800 --> 00:32:50,508 is trying to show you your whole history. 737 00:32:50,508 --> 00:32:53,450 So you can do it in HTML by just saying auto complete off. 738 00:32:53,450 --> 00:32:57,290 >> I've given this text field a symbol-- rather, an ID of symbol. 739 00:32:57,290 --> 00:32:58,977 And now, this is an interesting feature. 740 00:32:58,977 --> 00:33:01,310 We haven't talked about span, but you can think about it 741 00:33:01,310 --> 00:33:03,177 like a paragraph tag or div tag. 742 00:33:03,177 --> 00:33:05,010 It's what's called an in-line element, which 743 00:33:05,010 --> 00:33:07,415 means you won't get a paragraph break above and below it. 744 00:33:07,415 --> 00:33:11,530 It's just going to stay in-line without hitting the equivalent of enter. 745 00:33:11,530 --> 00:33:17,980 So I have given this chunk of HTML to be determined a unique identifier 746 00:33:17,980 --> 00:33:20,130 that I arbitrarily called price. 747 00:33:20,130 --> 00:33:21,560 And I have a Submit button. 748 00:33:21,560 --> 00:33:25,420 >> Because now up here-- and this is actually super amazing how little code 749 00:33:25,420 --> 00:33:27,660 you can write to do relatively neat things-- 750 00:33:27,660 --> 00:33:31,800 notice what I've done up here if I scroll up to the head of this page. 751 00:33:31,800 --> 00:33:34,970 I've included first in my head a script tag 752 00:33:34,970 --> 00:33:37,410 that actually references a JavaScript file elsewhere. 753 00:33:37,410 --> 00:33:39,702 This is from the organization that writes jQuery, 754 00:33:39,702 --> 00:33:42,660 and this is just giving you the latest version of their jQuery library. 755 00:33:42,660 --> 00:33:46,305 >> So this is kind of like sharp include in C or require in PHP. 756 00:33:46,305 --> 00:33:48,900 You use the script tag with a source attribute. 757 00:33:48,900 --> 00:33:52,030 But now my own code is going to be right in here. 758 00:33:52,030 --> 00:33:54,170 >> Notice I have a function called Quotes. 759 00:33:54,170 --> 00:33:56,180 And it looks a little cryptic at first glance. 760 00:33:56,180 --> 00:33:57,305 But let's tease this apart. 761 00:33:57,305 --> 00:33:59,090 Give me a variable called URL. 762 00:33:59,090 --> 00:34:01,390 Assign it literally this string. 763 00:34:01,390 --> 00:34:04,530 So, single quotes, double quotes in JavaScript just gives me a string. 764 00:34:04,530 --> 00:34:06,900 What does the plus do? 765 00:34:06,900 --> 00:34:08,199 Concatenation. 766 00:34:08,199 --> 00:34:12,610 >> So this now is the jQuery syntax which takes a little getting used to. 767 00:34:12,610 --> 00:34:18,310 But this just means go get me the DOM node whose unique identifier is symbol. 768 00:34:18,310 --> 00:34:21,929 The hashtag there means unique identifier symbol. 769 00:34:21,929 --> 00:34:24,929 >> The dollar sign in the parentheses just mean, wrap this 770 00:34:24,929 --> 00:34:28,510 in jQuery a sort of secret sauce so you get additional functionality. 771 00:34:28,510 --> 00:34:31,880 And then .val is apparently a function, or as we say now, 772 00:34:31,880 --> 00:34:35,219 a method inside of this node that just gives you the value. 773 00:34:35,219 --> 00:34:38,896 So in short, ugly and confusing as this looks at first glance, 774 00:34:38,896 --> 00:34:42,020 this just means get with the user typed in, put it at the end of the string 775 00:34:42,020 --> 00:34:42,880 by concatenating it. 776 00:34:42,880 --> 00:34:43,739 That's all. 777 00:34:43,739 --> 00:34:46,070 >> So now, last three lines. 778 00:34:46,070 --> 00:34:48,690 You can squeeze a lot of functionality out of three lines. 779 00:34:48,690 --> 00:34:52,199 This dollar sign, as an aside, is just a nickname 780 00:34:52,199 --> 00:34:55,800 for a special global variable called literally jQuery. 781 00:34:55,800 --> 00:34:57,060 >> Dollar sign just looks cool. 782 00:34:57,060 --> 00:35:00,080 So the jQuery community just kind of used it as their special symbol. 783 00:35:00,080 --> 00:35:02,470 It does not mean what it means in PHP. 784 00:35:02,470 --> 00:35:06,356 In JavaScript, dollar sign is just like a letter of the alphabet 785 00:35:06,356 --> 00:35:07,480 or a number for a variable. 786 00:35:07,480 --> 00:35:09,000 >> You can just have it as the name. 787 00:35:09,000 --> 00:35:09,770 Just looks cool. 788 00:35:09,770 --> 00:35:11,890 So the community adopted it as a nickname 789 00:35:11,890 --> 00:35:13,390 for their own library called jQuery. 790 00:35:13,390 --> 00:35:15,060 >> And it's super popular. 791 00:35:15,060 --> 00:35:17,620 So get JSON is exactly that. 792 00:35:17,620 --> 00:35:19,920 It's a function that the folks at jQuery wrote 793 00:35:19,920 --> 00:35:23,340 that gets JSON from a server-- JavaScript Object Notation. 794 00:35:23,340 --> 00:35:25,680 From what URL is it going to get that information? 795 00:35:25,680 --> 00:35:27,790 Apparently from this URL here. 796 00:35:27,790 --> 00:35:31,180 >> And what should the browser do as soon as it gets back this response? 797 00:35:31,180 --> 00:35:36,500 And this is the magic of AJAX, so to speak-- Asynchronous JavaScript in XML. 798 00:35:36,500 --> 00:35:41,320 It's hard to see with such a simple example as we had here. 799 00:35:41,320 --> 00:35:44,730 >> But this was asynchronous in the sense that my code when 800 00:35:44,730 --> 00:35:48,530 executed sent a message to the server to go get me some JSON. 801 00:35:48,530 --> 00:35:51,340 And it happened super fast that I got a response. 802 00:35:51,340 --> 00:35:55,130 But what's interesting is that this line of code didn't hang my computer. 803 00:35:55,130 --> 00:35:56,550 >> I didn't see a spinning icon. 804 00:35:56,550 --> 00:35:59,200 I didn't lose the ability to move my mouse. 805 00:35:59,200 --> 00:36:01,340 My browser was actually perfectly fine. 806 00:36:01,340 --> 00:36:06,290 >> Because the way JavaScript handles the response from the server is as follows. 807 00:36:06,290 --> 00:36:09,740 You register what you'd call a callback function, which 808 00:36:09,740 --> 00:36:12,830 just means, hey, JavaScript. 809 00:36:12,830 --> 00:36:16,100 As soon as the server responds with JSON, 810 00:36:16,100 --> 00:36:18,750 please call this anonymous function. 811 00:36:18,750 --> 00:36:23,910 >> And please passed into this function whatever string the server spit out 812 00:36:23,910 --> 00:36:26,080 as an argument called data. 813 00:36:26,080 --> 00:36:28,360 So in other, words, if I'm assembling dynamically 814 00:36:28,360 --> 00:36:33,370 a URL quote.php passing in this symbol like FREE or GOOG or whatnot, 815 00:36:33,370 --> 00:36:36,830 I'm then telling JavaScript go get that URL. 816 00:36:36,830 --> 00:36:39,080 Remember that the browser is going to return something 817 00:36:39,080 --> 00:36:42,680 that looks like we saw earlier-- this. 818 00:36:42,680 --> 00:36:45,940 >> And what the second argument here to get JSON is saying 819 00:36:45,940 --> 00:36:48,450 is call this function when the server gets back 820 00:36:48,450 --> 00:36:52,440 whether it's 10 milliseconds from now or 10 seconds from now. 821 00:36:52,440 --> 00:36:55,840 And as soon as you do, add the price to the page. 822 00:36:55,840 --> 00:36:58,030 This syntax here just means go get the node 823 00:36:58,030 --> 00:37:01,940 from the tree whose unique identifier is price-- that span we saw earlier. 824 00:37:01,940 --> 00:37:04,320 >> This method called HTML just says, go replace 825 00:37:04,320 --> 00:37:08,770 the HTML that's there with data.price. 826 00:37:08,770 --> 00:37:10,200 What's data.price? 827 00:37:10,200 --> 00:37:12,850 Well, the browser, recall, showed me this coming back. 828 00:37:12,850 --> 00:37:14,540 So this is data. 829 00:37:14,540 --> 00:37:18,100 >> And so it's a little cryptic to see the commas here. 830 00:37:18,100 --> 00:37:19,350 But in fact, let me do this. 831 00:37:19,350 --> 00:37:22,890 Let me just paste this real fast into gedit 832 00:37:22,890 --> 00:37:27,240 and show this like we showed Zamyla's structure earlier. 833 00:37:27,240 --> 00:37:31,610 >> What the server is sending back is a little object that looks like this. 834 00:37:31,610 --> 00:37:37,140 And so data.price is just giving me 0.1515. 835 00:37:37,140 --> 00:37:39,310 So a lot of moving parts here all at once. 836 00:37:39,310 --> 00:37:41,860 >> But the key takeaways is that we have this ability 837 00:37:41,860 --> 00:37:44,600 to make additional HTTP requests using JavaScript 838 00:37:44,600 --> 00:37:46,090 without having to reload the page. 839 00:37:46,090 --> 00:37:49,580 And then we can actually change the web page on the fly. 840 00:37:49,580 --> 00:37:51,850 And it turns out that JavaScript and other languages 841 00:37:51,850 --> 00:37:54,510 can be used now not only to mutate web pages, 842 00:37:54,510 --> 00:37:57,960 but to actually write software in an actual computer, 843 00:37:57,960 --> 00:38:00,240 not just confined to Chrome or the like. 844 00:38:00,240 --> 00:38:03,530 >> In fact, if-- Colton, would you like to join us back up here 845 00:38:03,530 --> 00:38:06,100 with your lab code, and Chang as well? 846 00:38:06,100 --> 00:38:09,140 Let's go ahead, having talked about anonymous functions and callbacks 847 00:38:09,140 --> 00:38:13,090 and really tempt fate here with a live demo with bleeding 848 00:38:13,090 --> 00:38:16,480 edge technology, one of these Elite Motion devices. 849 00:38:16,480 --> 00:38:18,940 Now, this device, recall, is a little USB device 850 00:38:18,940 --> 00:38:25,620 as well that-- that's beautiful-- that plugs in to your USB ports. 851 00:38:25,620 --> 00:38:29,120 >> And then it provides input in the form of human gestures 852 00:38:29,120 --> 00:38:32,560 by detecting using infrared beams, essentially, movements from your arm. 853 00:38:32,560 --> 00:38:35,150 So whereas what Maria tried on before was muscular, 854 00:38:35,150 --> 00:38:39,000 actually feeling what's changing your arm, this is infrared based. 855 00:38:39,000 --> 00:38:44,390 So it's looking for movements within the sort of sphere of a foot or so 856 00:38:44,390 --> 00:38:46,190 of the device itself. 857 00:38:46,190 --> 00:38:48,950 >> So why don't I take a stab at this first? 858 00:38:48,950 --> 00:38:53,100 And let's go ahead and throw you up on the overhead here. 859 00:38:53,100 --> 00:38:56,250 So let's put Colton's laptop up here. 860 00:38:56,250 --> 00:38:58,360 We've got Andrew on the TV. 861 00:38:58,360 --> 00:39:00,160 And what would you like me to do first? 862 00:39:00,160 --> 00:39:02,409 >> COLTON: Go ahead and just put your hands over this guy 863 00:39:02,409 --> 00:39:04,430 and you'll see some fabulous glitter. 864 00:39:04,430 --> 00:39:07,230 >> DAVID J. MALAN: Very nice. 865 00:39:07,230 --> 00:39:11,110 This is all happening in real time. 866 00:39:11,110 --> 00:39:11,889 OK. 867 00:39:11,889 --> 00:39:12,680 All right, and yep. 868 00:39:12,680 --> 00:39:14,119 So nice. 869 00:39:14,119 --> 00:39:15,410 All right, what else can we do? 870 00:39:15,410 --> 00:39:17,900 >> COLTON: Go to the next screen and see. 871 00:39:17,900 --> 00:39:19,136 >> DAVID J. MALAN: All right. 872 00:39:19,136 --> 00:39:21,780 >> COLTON: A fun little game where you get to make robots. 873 00:39:21,780 --> 00:39:24,738 >> DAVID J. MALAN: All right, so this is fake hands showing me what to do. 874 00:39:24,738 --> 00:39:27,920 COLTON: Yes So go ahead and grab one of the blocks 875 00:39:27,920 --> 00:39:30,637 and put it on top of that robot's body. 876 00:39:30,637 --> 00:39:32,137 DAVID J. MALAN: Oh, there's my hand. 877 00:39:32,137 --> 00:39:34,000 Oh. 878 00:39:34,000 --> 00:39:34,780 OK, adorable. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Wait a minute, OK. 881 00:39:38,650 --> 00:39:41,320 There we go. 882 00:39:41,320 --> 00:39:43,590 >> COLTON: I made one on accident. 883 00:39:43,590 --> 00:39:45,423 >> DAVID J. MALAN: OK, I'll get this guy. 884 00:39:45,423 --> 00:39:45,923 Damn it! 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 When we were practicing this last night, you know what this devolved into? 887 00:39:51,550 --> 00:39:54,285 >> Like this. 888 00:39:54,285 --> 00:39:55,490 OK. 889 00:39:55,490 --> 00:39:55,990 Next one? 890 00:39:55,990 --> 00:39:56,860 >> COLTON: Sure. 891 00:39:56,860 --> 00:39:58,818 >> DAVID J. MALAN: All right, and there's a third. 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 All right. 894 00:40:01,674 --> 00:40:03,215 COLTON: And in this one, you get to-- 895 00:40:03,215 --> 00:40:04,923 DAVID J. MALAN: Oh, this one's beautiful. 896 00:40:04,923 --> 00:40:06,650 COLTON: --yeah, pick apart this flower. 897 00:40:06,650 --> 00:40:07,441 DAVID J. MALAN: OK. 898 00:40:07,441 --> 00:40:11,170 899 00:40:11,170 --> 00:40:11,670 No? 900 00:40:11,670 --> 00:40:14,515 Missed. 901 00:40:14,515 --> 00:40:15,570 >> COLTON: Oh, there you go. 902 00:40:15,570 --> 00:40:18,680 >> DAVID J. MALAN: Ah, Look at that. 903 00:40:18,680 --> 00:40:19,830 Very nice. 904 00:40:19,830 --> 00:40:22,470 Well, why dont' we take out one volunteer here 905 00:40:22,470 --> 00:40:24,180 who would like to come on up. 906 00:40:24,180 --> 00:40:27,500 How about right there in the green, is it? 907 00:40:27,500 --> 00:40:30,540 >> All right, and let's have-- instead of doing that, some of you 908 00:40:30,540 --> 00:40:34,590 might know this game here-- cut the rope, perhaps? 909 00:40:34,590 --> 00:40:35,100 Let's see. 910 00:40:35,100 --> 00:40:37,320 We have our glasses on over here? 911 00:40:37,320 --> 00:40:38,625 >> OK. 912 00:40:38,625 --> 00:40:39,270 Thank you. 913 00:40:39,270 --> 00:40:39,380 What's your name? 914 00:40:39,380 --> 00:40:40,350 >> AUDIENCE: Laura. 915 00:40:40,350 --> 00:40:41,266 >> DAVID J. MALAN: Laura? 916 00:40:41,266 --> 00:40:42,120 Nice to see. 917 00:40:42,120 --> 00:40:45,600 If you don't mind putting Google Glass over your glasses. 918 00:40:45,600 --> 00:40:46,970 This is Colton. 919 00:40:46,970 --> 00:40:47,650 >> COLTON: Hi. 920 00:40:47,650 --> 00:40:48,140 Nice to meet you. 921 00:40:48,140 --> 00:40:49,600 >> DAVID J. MALAN: OK, come on around. 922 00:40:49,600 --> 00:40:52,516 All right, so what you're going to do here, having played this before, 923 00:40:52,516 --> 00:40:55,650 is put your hand over the Leap Motion here. 924 00:40:55,650 --> 00:40:57,210 And now your arrow should move. 925 00:40:57,210 --> 00:40:57,710 Oh, nope. 926 00:40:57,710 --> 00:40:58,066 >> AUDIENCE: No. 927 00:40:58,066 --> 00:40:58,780 >> DAVID J. MALAN: We don't want to quit yet. 928 00:40:58,780 --> 00:40:59,280 OK, wait. 929 00:40:59,280 --> 00:41:01,200 Over here. 930 00:41:01,200 --> 00:41:03,530 So notice as you hold your finger over something, 931 00:41:03,530 --> 00:41:06,750 the mouse starts to go green, which is how you click. 932 00:41:06,750 --> 00:41:08,980 >> So hover over Play. 933 00:41:08,980 --> 00:41:10,970 And just one finger is fine. 934 00:41:10,970 --> 00:41:13,869 And now click on the little green guy on the left. 935 00:41:13,869 --> 00:41:15,410 And now hold until it fills up green. 936 00:41:15,410 --> 00:41:15,640 Good. 937 00:41:15,640 --> 00:41:16,990 Now, like, level one up top. 938 00:41:16,990 --> 00:41:20,190 >> AUDIENCE: Yeah, we want level one, here. 939 00:41:20,190 --> 00:41:21,660 >> DAVID J. MALAN: Good. 940 00:41:21,660 --> 00:41:25,500 OK, so all you have to do is cut the rope. 941 00:41:25,500 --> 00:41:28,240 Your cursor's the white one down there. 942 00:41:28,240 --> 00:41:28,880 >> Very nice. 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 All right, it's about to get harder. 945 00:41:32,790 --> 00:41:34,800 So hold your finger over next now. 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 Good. 948 00:41:39,030 --> 00:41:39,999 This one's hard. 949 00:41:39,999 --> 00:41:40,966 >> AUDIENCE: Oh crap. 950 00:41:40,966 --> 00:41:41,466 OK. 951 00:41:41,466 --> 00:41:42,466 It wants to go that way. 952 00:41:42,466 --> 00:41:44,890 Oh crap, that-- 953 00:41:44,890 --> 00:41:47,120 >> DAVID J. MALAN: Yeah. 954 00:41:47,120 --> 00:41:50,700 Secondary goal is to get all the stars. 955 00:41:50,700 --> 00:41:53,920 All right, next. 956 00:41:53,920 --> 00:41:57,504 >> Let's see if you can get this third one. 957 00:41:57,504 --> 00:41:58,004 Good. 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 OK, go over there. 960 00:42:06,840 --> 00:42:08,850 >> Sure. 961 00:42:08,850 --> 00:42:11,230 Oh, very nice. 962 00:42:11,230 --> 00:42:11,930 All right. 963 00:42:11,930 --> 00:42:13,534 >> So why don't we adjourn here today? 964 00:42:13,534 --> 00:42:15,200 Let anyone come on up who wants to play. 965 00:42:15,200 --> 00:42:16,880 Thanks so much to Laura our volunteer. 966 00:42:16,880 --> 00:42:18,730 And we will see you on Monday. 967 00:42:18,730 --> 00:42:21,190 >> AUDIENCE: You probably want these back. 968 00:42:21,190 --> 00:42:23,640 >> SPEAKER 2: At the next CS50-- 969 00:42:23,640 --> 00:42:35,222