1 00:00:00,000 --> 00:00:01,940 >> [MUSIC PLAYING] 2 00:00:01,940 --> 00:00:11,130 3 00:00:11,130 --> 00:00:14,620 >> DAVID MALAN: This is CS 50, and this is the start of week nine. 4 00:00:14,620 --> 00:00:18,240 And what we thought we'd do today is not only close the chapter on last week's 5 00:00:18,240 --> 00:00:22,670 material where we focused on server side web programming with PHP and SQL, 6 00:00:22,670 --> 00:00:23,549 some database stuff. 7 00:00:23,549 --> 00:00:25,590 We'll talk about a bit of security today and then 8 00:00:25,590 --> 00:00:29,590 transition to a client side programming language known as JavaScript. 9 00:00:29,590 --> 00:00:31,330 But first, some redemption. 10 00:00:31,330 --> 00:00:35,030 >> You may recall that on Wednesday, I set out 11 00:00:35,030 --> 00:00:37,550 to write a website that took in user's input 12 00:00:37,550 --> 00:00:41,120 by an HTML form that then stored that user input names, phone 13 00:00:41,120 --> 00:00:43,124 numbers, and cellphone carriers in the database. 14 00:00:43,124 --> 00:00:45,540 And then I had a little command line script written in PHP 15 00:00:45,540 --> 00:00:47,956 that was supposed to iterate over the rows in the database 16 00:00:47,956 --> 00:00:49,400 and send out text messages. 17 00:00:49,400 --> 00:00:53,870 Despite several, several attempts, we didn't get that working by the end. 18 00:00:53,870 --> 00:00:57,820 >> So I spent this entire week working on that code to get us past the point 19 00:00:57,820 --> 00:01:01,220 where we left off, whereby all I got by the end of Wednesday 20 00:01:01,220 --> 00:01:05,500 was this text message from Margo as I struggled, 21 00:01:05,500 --> 00:01:09,940 followed by a text message from another classmate, You've got this David. 22 00:01:09,940 --> 00:01:14,030 Followed by this one, wonderfully encouraging. 23 00:01:14,030 --> 00:01:15,840 Kept on going, very heartening. 24 00:01:15,840 --> 00:01:20,960 I almost got it until then-- and that's the note we ended on Wednesday. 25 00:01:20,960 --> 00:01:25,850 And then actually perhaps my favorite, a moment later, this came in. 26 00:01:25,850 --> 00:01:27,000 Damn Live Stream. 27 00:01:27,000 --> 00:01:31,080 >> So today, we fix this with a quick look at what I've done since. 28 00:01:31,080 --> 00:01:35,440 So all of this code is available online from last week's, week eight, 29 00:01:35,440 --> 00:01:36,300 source code. 30 00:01:36,300 --> 00:01:39,425 And you'll see that I went through, and I actually cleaned up things a bit. 31 00:01:39,425 --> 00:01:42,080 I introduced a couple other features of an SQL database. 32 00:01:42,080 --> 00:01:45,300 For instance, rather than just make carrier of var char 33 00:01:45,300 --> 00:01:47,310 as I think I did on the fly last week. 34 00:01:47,310 --> 00:01:49,820 I instead defined it as what's called an enum. 35 00:01:49,820 --> 00:01:53,310 >> And some of you might have seen this as we explored C. Enum is actually 36 00:01:53,310 --> 00:01:56,820 a feature of C where you can enumerate a whole bunch of constants 37 00:01:56,820 --> 00:01:59,640 and assign them automatic values, like one, two, three, four 38 00:01:59,640 --> 00:02:01,330 without having to hard code numbers. 39 00:02:01,330 --> 00:02:04,780 So SQL supports the same, whereby if you have a database field that you only 40 00:02:04,780 --> 00:02:09,389 want to take on one of finite values, you can literally specify it 41 00:02:09,389 --> 00:02:13,120 as I have done there for four popular US cellphone carriers. 42 00:02:13,120 --> 00:02:13,819 >> So I did that. 43 00:02:13,819 --> 00:02:16,610 And I made a number of changes as well, the most important of which 44 00:02:16,610 --> 00:02:20,090 was to get email working because recall, that this program relied on which 45 00:02:20,090 --> 00:02:23,470 generally called an email to SMS gateway, which is just 46 00:02:23,470 --> 00:02:27,670 a fancy way of saying that Verizon, and AT&T, and other folks support a server, 47 00:02:27,670 --> 00:02:30,740 whereby if it receives email, it converts it to SMS 48 00:02:30,740 --> 00:02:33,290 and sends out a text message to someone's phone. 49 00:02:33,290 --> 00:02:37,010 So if I did this correctly, here is a new and improved form 50 00:02:37,010 --> 00:02:39,259 that is going to talk to new and improved code, which 51 00:02:39,259 --> 00:02:40,300 you can play with online. 52 00:02:40,300 --> 00:02:44,140 And it will hopefully make my phone beep in just a moment. 53 00:02:44,140 --> 00:02:47,240 >> So first, I'm going to type in my name. 54 00:02:47,240 --> 00:02:51,400 Second, I'm not going to do this this time. 55 00:02:51,400 --> 00:02:53,920 I'm going to do Inspect Element. 56 00:02:53,920 --> 00:02:56,710 And this is just a little thing so I don't 57 00:02:56,710 --> 00:02:59,250 create hours of post production work as I did last time. 58 00:02:59,250 --> 00:03:02,300 There now is my phone number. 59 00:03:02,300 --> 00:03:03,560 >> I'll select Verizon. 60 00:03:03,560 --> 00:03:10,260 And here, let's turn on this microphone here, and aim this at my phone here. 61 00:03:10,260 --> 00:03:13,130 I'm going to click Register, which should hopefully 62 00:03:13,130 --> 00:03:14,530 put it into the database. 63 00:03:14,530 --> 00:03:16,780 Now I'm going to go to the command line program, which 64 00:03:16,780 --> 00:03:20,825 recall was called dot slash text, and cross your fingers. 65 00:03:20,825 --> 00:03:24,092 66 00:03:24,092 --> 00:03:26,527 Here we go. 67 00:03:26,527 --> 00:03:27,501 >> [PHONE DINGS] 68 00:03:27,501 --> 00:03:28,962 >> [APPLAUSE] 69 00:03:28,962 --> 00:03:31,815 70 00:03:31,815 --> 00:03:34,940 DAVID MALAN: So more fun than this-- it's fun, of course, if I get into it. 71 00:03:34,940 --> 00:03:38,004 But it's more fun, I thought, if we created one of those movie moments 72 00:03:38,004 --> 00:03:40,420 where like something really bad has happened in the world, 73 00:03:40,420 --> 00:03:42,860 and like all the NSA people's cellphones start beeping 74 00:03:42,860 --> 00:03:44,860 with text messages alerting them to this fact. 75 00:03:44,860 --> 00:03:47,026 So I thought we would try to recreate the same here, 76 00:03:47,026 --> 00:03:49,610 whereby not using a database, I instead in advance 77 00:03:49,610 --> 00:03:51,490 wrote a program that looks like this. 78 00:03:51,490 --> 00:03:53,660 >> This is an index.php-- and I put this code online 79 00:03:53,660 --> 00:03:56,710 as well-- that apparently just renders form.php, 80 00:03:56,710 --> 00:04:00,990 using an MVC style paradigm that we talk about in more detail in problem set 81 00:04:00,990 --> 00:04:01,650 seven. 82 00:04:01,650 --> 00:04:02,910 That form is pretty simple. 83 00:04:02,910 --> 00:04:06,634 It's going to submit to a file called here.php via post. 84 00:04:06,634 --> 00:04:09,300 And it's apparently going to ask for a name, and a phone number, 85 00:04:09,300 --> 00:04:11,400 and then via of so-called Select menu, it's 86 00:04:11,400 --> 00:04:14,250 going to give you at least four popular US cellphone carriers, 87 00:04:14,250 --> 00:04:17,470 and then allow you to effectively take attendance by clicking here. 88 00:04:17,470 --> 00:04:20,471 >> And here, meanwhile, is going to borrow some of the code from last time. 89 00:04:20,471 --> 00:04:22,553 And if you just skim this, you'll see that there's 90 00:04:22,553 --> 00:04:23,900 a whole bunch of error checking. 91 00:04:23,900 --> 00:04:26,640 But the beauty at the end is that we're not writing to a database today. 92 00:04:26,640 --> 00:04:29,130 We're keeping it simple and just sending out hopefully 93 00:04:29,130 --> 00:04:32,190 a text message via function I wrote over the past few days call 94 00:04:32,190 --> 00:04:36,270 Text, which is in Functions. php, which is again available online. 95 00:04:36,270 --> 00:04:38,210 >> So if you would like to partake in this. 96 00:04:38,210 --> 00:04:40,190 We're not going to be storing anything. 97 00:04:40,190 --> 00:04:43,809 Go to this URL here in real time. 98 00:04:43,809 --> 00:04:46,850 Don't submit it just yet, but let's see if we can have one of these movie 99 00:04:46,850 --> 00:04:49,830 moments where everyone's cellphone starts beeping, hopefully just 100 00:04:49,830 --> 00:04:53,580 once this year unlike in 2011 where this went horribly awry. 101 00:04:53,580 --> 00:04:58,910 And once you go to that address, you should see a super simple form 102 00:04:58,910 --> 00:05:03,884 that if you have a name, a cell phone number, and a cellphone carrier that 103 00:05:03,884 --> 00:05:06,175 matches the list there, go ahead and fill out the form. 104 00:05:06,175 --> 00:05:07,880 But don't hit submit just yet. 105 00:05:07,880 --> 00:05:10,850 >> The form's going to look like this. 106 00:05:10,850 --> 00:05:13,660 Go ahead and type in your name, phone number. 107 00:05:13,660 --> 00:05:17,670 Oop, someone's going ahead of the curve. 108 00:05:17,670 --> 00:05:18,170 It's OK. 109 00:05:18,170 --> 00:05:19,340 OK, everyone's filled out the form. 110 00:05:19,340 --> 00:05:21,400 This should work on a phone, too, if you want. 111 00:05:21,400 --> 00:05:23,695 All right, on your marks, get set, go. 112 00:05:23,695 --> 00:05:24,195 Hit Here. 113 00:05:24,195 --> 00:05:27,275 114 00:05:27,275 --> 00:05:27,775 What? 115 00:05:27,775 --> 00:05:31,140 116 00:05:31,140 --> 00:05:31,640 No. 117 00:05:31,640 --> 00:05:34,410 118 00:05:34,410 --> 00:05:40,250 I swear to God, I tested this multiple times today. 119 00:05:40,250 --> 00:05:41,720 You got it? 120 00:05:41,720 --> 00:05:43,145 >> [INTERPOSING VOICES] 121 00:05:43,145 --> 00:05:46,470 122 00:05:46,470 --> 00:05:49,560 >> DAVID MALAN: OK, user error perhaps. 123 00:05:49,560 --> 00:05:50,550 That's two. 124 00:05:50,550 --> 00:05:53,300 It worked for two out of a few hundred, three, four. 125 00:05:53,300 --> 00:05:55,940 OK, that's good. 126 00:05:55,940 --> 00:05:58,520 Four out of five for correctness how about. 127 00:05:58,520 --> 00:05:59,810 >> So what just happened? 128 00:05:59,810 --> 00:06:02,727 So presumably, without seeing your screens, why might it have errored? 129 00:06:02,727 --> 00:06:05,518 It's probably that we were just trying to make too many connections 130 00:06:05,518 --> 00:06:08,110 to Harvard's mail server all at once from the same IP address. 131 00:06:08,110 --> 00:06:10,740 I'm just guessing since I didn't have the luxury of testing 132 00:06:10,740 --> 00:06:13,220 this code with some 300 people in advance 133 00:06:13,220 --> 00:06:16,040 but for now realize that that at least should 134 00:06:16,040 --> 00:06:18,250 have gotten the job done this time. 135 00:06:18,250 --> 00:06:22,880 >> All right, so why is this all the more germane to what's going on? 136 00:06:22,880 --> 00:06:24,900 Well first, a quick couple of announcements. 137 00:06:24,900 --> 00:06:29,350 So one, if you'd like to join Chang, and Nick, and others at lunch this Friday, 138 00:06:29,350 --> 00:06:32,400 do RSVP at the usual URL there. 139 00:06:32,400 --> 00:06:35,650 If you are thinking of concentrating in or doing a secondary in CS, 140 00:06:35,650 --> 00:06:38,941 whether you're a sophomore, or freshman, or even junior or senior at this point 141 00:06:38,941 --> 00:06:42,490 and can still squeeze in the courses, realize that the engineering school 142 00:06:42,490 --> 00:06:45,620 is gathering for free Ben and Jerry's ice cream and advice 143 00:06:45,620 --> 00:06:48,910 this Wednesday shortly after class at 4:00 PM in the CS building 144 00:06:48,910 --> 00:06:49,771 at Maxwell Dworkin. 145 00:06:49,771 --> 00:06:51,520 If this is too fast on the screen, just go 146 00:06:51,520 --> 00:06:55,260 to cs50.harvard.edu for a link to the Facebook event 147 00:06:55,260 --> 00:06:57,140 where you can see more details. 148 00:06:57,140 --> 00:07:01,390 >> Meanwhile, I thought I would correct one other thing I goofed on Wednesday. 149 00:07:01,390 --> 00:07:04,400 Turns out that Mark's ID on Facebook wasn't three. 150 00:07:04,400 --> 00:07:05,230 It was four. 151 00:07:05,230 --> 00:07:08,330 Turns out he had more test accounts than I recall. 152 00:07:08,330 --> 00:07:12,400 But what this felt like an opportunity to do is to pull up a URL like this. 153 00:07:12,400 --> 00:07:16,680 >> So it turns out that Facebook has an API, Application Programming Interface, 154 00:07:16,680 --> 00:07:20,070 which is a mechanism whereby you can request data programmatically 155 00:07:20,070 --> 00:07:24,480 at Facebook and get back machine readable information, not web pages 156 00:07:24,480 --> 00:07:28,690 but just raw text, something called JavaScript Object Notation. 157 00:07:28,690 --> 00:07:32,150 And in fact, if I visit this URL, and zoom in, by default, 158 00:07:32,150 --> 00:07:34,960 this is Mark's publicly accessible information. 159 00:07:34,960 --> 00:07:37,430 >> And the interesting detail here is just that his ID 160 00:07:37,430 --> 00:07:40,670 is indeed, number four, which I realized as soon as I did this. 161 00:07:40,670 --> 00:07:44,260 You can do this yourself if you know your Facebook username if you have one. 162 00:07:44,260 --> 00:07:45,440 Just type it up top there. 163 00:07:45,440 --> 00:07:46,640 And none of this is private. 164 00:07:46,640 --> 00:07:48,670 I'm just doing this even in the incognito mode. 165 00:07:48,670 --> 00:07:49,900 So I'm not even logged in. 166 00:07:49,900 --> 00:07:54,440 And you're seeing that I apparently was user number 6,454 167 00:07:54,440 --> 00:07:56,480 on Facebook, which isn't too bad these days. 168 00:07:56,480 --> 00:07:59,900 So anyhow, you'll also see additional information there. 169 00:07:59,900 --> 00:08:02,150 >> And the useful aspect of that is that you 170 00:08:02,150 --> 00:08:06,890 could write your own software that somehow integrates data like this 171 00:08:06,890 --> 00:08:08,170 into your own application. 172 00:08:08,170 --> 00:08:10,650 You can empower users to log into your website, 173 00:08:10,650 --> 00:08:14,190 not using their own custom username and password but maybe their Facebook login 174 00:08:14,190 --> 00:08:16,170 and get information even about their friends, 175 00:08:16,170 --> 00:08:18,740 if they approve such, or similar. 176 00:08:18,740 --> 00:08:21,430 So note that CS50, too, has some of its own APIs, 177 00:08:21,430 --> 00:08:24,620 one for the course catalog data, some for the hugs menus in the dining 178 00:08:24,620 --> 00:08:26,730 halls, all of the buildings and locations 179 00:08:26,730 --> 00:08:30,930 on campus we have an API for as well that you can query similarly and get 180 00:08:30,930 --> 00:08:35,520 back textual data that you can integrate into a PHP, or JavaScript, or even, 181 00:08:35,520 --> 00:08:38,320 though less commonly, a C based final project. 182 00:08:38,320 --> 00:08:41,190 >> Indeed ahead for the final project are a few milestones. 183 00:08:41,190 --> 00:08:42,980 You got an email from us the other day. 184 00:08:42,980 --> 00:08:45,761 Realize that the proposal is due this coming Monday. 185 00:08:45,761 --> 00:08:49,010 It's not necessarily binding, but you do need to receive your teaching fellows 186 00:08:49,010 --> 00:08:51,260 approval before making any changes thereafter. 187 00:08:51,260 --> 00:08:54,280 And then ahead are a number of other milestones. 188 00:08:54,280 --> 00:08:56,542 >> So to tease you, too, with some possibilities, 189 00:08:56,542 --> 00:08:58,250 we have a bunch of these hue light bulbs. 190 00:08:58,250 --> 00:09:01,190 And some of you guys now have some of these in your dorm room as well. 191 00:09:01,190 --> 00:09:02,920 And they too have an API. 192 00:09:02,920 --> 00:09:07,300 So recall those binary bulbs weeks ago that Dan Bradley and Ansel 193 00:09:07,300 --> 00:09:08,780 Duff created for us. 194 00:09:08,780 --> 00:09:12,560 They used a software interface to this light bulb, which at the moment 195 00:09:12,560 --> 00:09:15,232 is plugged into electricity and then via wireless 196 00:09:15,232 --> 00:09:17,690 is connected to a little thing called the Bridge down here, 197 00:09:17,690 --> 00:09:21,280 like a little router proprietary to this particular device. 198 00:09:21,280 --> 00:09:26,540 >> But it turns out if I know how to send HTTP messages, as we all now do, 199 00:09:26,540 --> 00:09:31,670 I can send a message like this to this light bulb to turn it on or off 200 00:09:31,670 --> 00:09:34,000 or do any number of other operations on it. 201 00:09:34,000 --> 00:09:36,110 Notice that it's not get, it's not post. 202 00:09:36,110 --> 00:09:37,760 There's another one called put. 203 00:09:37,760 --> 00:09:39,630 There's actually a few other such verbs. 204 00:09:39,630 --> 00:09:42,920 But notice there's a path there, slash API, slash new developer, 205 00:09:42,920 --> 00:09:44,990 slash light, slash one, slash state. 206 00:09:44,990 --> 00:09:49,060 >> That's apparently just the path that the company, Philips, 207 00:09:49,060 --> 00:09:51,640 decided you have to hit with an HTTP request 208 00:09:51,640 --> 00:09:55,010 if you want to change the state of the bulb using HTTP 1.1. 209 00:09:55,010 --> 00:09:56,380 Then notice the blank line. 210 00:09:56,380 --> 00:10:00,170 And then lastly what looks like kind of an array of some sort, 211 00:10:00,170 --> 00:10:04,730 this again is going to be called JavaScript Object Notation, or Jason. 212 00:10:04,730 --> 00:10:08,000 And what you see here is that there are three key value pairs. 213 00:10:08,000 --> 00:10:09,115 >> One key is called on. 214 00:10:09,115 --> 00:10:10,990 And its value apparently is going to be true. 215 00:10:10,990 --> 00:10:13,612 Brightness is 128, which is some kind of int. 216 00:10:13,612 --> 00:10:15,820 And then transition time is zero, which is apparently 217 00:10:15,820 --> 00:10:17,970 how long it's going to take to turn this thing on. 218 00:10:17,970 --> 00:10:19,890 >> So right now this light bulb is off. 219 00:10:19,890 --> 00:10:22,880 But if I do exactly this-- let me go to a little cheat sheet 220 00:10:22,880 --> 00:10:25,200 that Dan set up in advance-- and I'm going 221 00:10:25,200 --> 00:10:27,920 to go ahead and copy the following command. 222 00:10:27,920 --> 00:10:30,200 Curl, as some of you might have gleaned on CS50 223 00:10:30,200 --> 00:10:35,080 Discuss is a utility like Telnet such that you can simulate HTTP requests, 224 00:10:35,080 --> 00:10:36,360 specifically puts. 225 00:10:36,360 --> 00:10:39,710 I can send this data, specifically what we just 226 00:10:39,710 --> 00:10:43,430 saw a moment ago specifically to this URL over here. 227 00:10:43,430 --> 00:10:46,310 And then Curl is going to handle all of the requisite headers 228 00:10:46,310 --> 00:10:47,600 and parsing there of. 229 00:10:47,600 --> 00:10:54,700 >> So all I have to do is copy this into a terminal window and then hit Enter. 230 00:10:54,700 --> 00:10:56,000 And the light bulb goes on. 231 00:10:56,000 --> 00:10:59,060 And this is all going through my computer wirelessly 232 00:10:59,060 --> 00:11:01,960 somehow down to the bridge, which is then talking to this light bulb. 233 00:11:01,960 --> 00:11:02,960 I can do something else. 234 00:11:02,960 --> 00:11:07,050 I can make this thing go red for instance. 235 00:11:07,050 --> 00:11:11,040 I can for instance make this thing go green. 236 00:11:11,040 --> 00:11:12,220 I can make it go blue. 237 00:11:12,220 --> 00:11:14,760 >> And notice in each of these instances, all that I'm changing 238 00:11:14,760 --> 00:11:18,540 is the so-called hue value to actually give it some color. 239 00:11:18,540 --> 00:11:20,320 So let me paste this one in as well. 240 00:11:20,320 --> 00:11:21,000 Now it's blue. 241 00:11:21,000 --> 00:11:24,672 >> And you can do even fancier things where-- let's go to green. 242 00:11:24,672 --> 00:11:26,630 And I could do this of course with my own code. 243 00:11:26,630 --> 00:11:30,670 But even the API itself supports funky operations 244 00:11:30,670 --> 00:11:35,510 like this, which will now bother us for the next 30 seconds. 245 00:11:35,510 --> 00:11:39,170 >> So that's one taste of what you might do with an API, this one involving 246 00:11:39,170 --> 00:11:40,010 light bulbs. 247 00:11:40,010 --> 00:11:42,510 Note that CS50 has a couple pairs of Google Glass if you'd 248 00:11:42,510 --> 00:11:45,380 like to tackle something along those lines, Arduino Unos, which 249 00:11:45,380 --> 00:11:48,670 are tiny little computers, essentially, on a little circuit board 250 00:11:48,670 --> 00:11:50,470 that you can connect wires and other things 251 00:11:50,470 --> 00:11:52,732 to and actually control your real world environment. 252 00:11:52,732 --> 00:11:54,940 And then there are a couple of new toys that we have. 253 00:11:54,940 --> 00:11:59,294 This one literally just arrived the other day by mail, a Myo Armband. 254 00:11:59,294 --> 00:12:01,710 And I thought it's a way to get you excited about projects 255 00:12:01,710 --> 00:12:03,720 that you might use with this hardware would 256 00:12:03,720 --> 00:12:08,900 be to play this short clip that they use to tease folks 257 00:12:08,900 --> 00:12:10,500 that we're now living in the future. 258 00:12:10,500 --> 00:12:13,494 259 00:12:13,494 --> 00:12:15,490 >> [MUSIC PLAYING] 260 00:12:15,490 --> 00:13:33,410 261 00:13:33,410 --> 00:13:37,109 >> DAVID MALAN: So in just a few weeks, you too can be that cool at the CS50 fair. 262 00:13:37,109 --> 00:13:39,150 Another device that we have a bunch of that we're 263 00:13:39,150 --> 00:13:42,090 happy to loan out for projects is called a motion controller. 264 00:13:42,090 --> 00:13:45,030 This is a little USB device you connect to a computer that 265 00:13:45,030 --> 00:13:47,520 allows you to interact with your laptop, Mac or PC, 266 00:13:47,520 --> 00:13:51,570 as though you had like an Xbox Kinect and actually make physical motions much 267 00:13:51,570 --> 00:13:54,509 like we see in this vision of the future. 268 00:13:54,509 --> 00:13:56,505 >> [MUSIC PLAYING] 269 00:13:56,505 --> 00:15:03,380 270 00:15:03,380 --> 00:15:06,260 >> DAVID MALAN: So even if you have no idea how something like that 271 00:15:06,260 --> 00:15:10,050 could possibly be invented or work on a hardware level, no matter. 272 00:15:10,050 --> 00:15:13,520 Even after just a few months of CS50, and an understanding of programming 273 00:15:13,520 --> 00:15:19,460 more generally, and web programming more recently, and then also APIs, and HTTP, 274 00:15:19,460 --> 00:15:21,830 you'll have access via software APIs if you 275 00:15:21,830 --> 00:15:24,680 do want to borrow one of these devices to actually talk to it 276 00:15:24,680 --> 00:15:27,180 and not have to worry about the underlying implementation 277 00:15:27,180 --> 00:15:30,220 details, which is completely consistent with this notion of layering 278 00:15:30,220 --> 00:15:33,610 an abstraction that we've seen throughout the semester. 279 00:15:33,610 --> 00:15:37,990 >> So also over the weekend, saw a couple pieces of news. 280 00:15:37,990 --> 00:15:40,640 Go first, go to seminars if you would like to learn something 281 00:15:40,640 --> 00:15:42,160 more on any number of topics. 282 00:15:42,160 --> 00:15:43,340 See the URL there. 283 00:15:43,340 --> 00:15:45,890 And this one was sent to me by Chang, who you know, 284 00:15:45,890 --> 00:15:47,850 who's printing our army of elephants. 285 00:15:47,850 --> 00:15:49,910 And it was a headline as follows. 286 00:15:49,910 --> 00:15:51,280 I'm terrified of my new TV. 287 00:15:51,280 --> 00:15:54,301 Why I'm scared to turn this thing on and you'd be too. 288 00:15:54,301 --> 00:15:56,050 So we're now at the point in the semester, 289 00:15:56,050 --> 00:15:58,860 too, where even if you have the slightest of understanding 290 00:15:58,860 --> 00:16:02,620 of how the web works, and HTTP, and security, things like this 291 00:16:02,620 --> 00:16:03,980 should start to catch your eye. 292 00:16:03,980 --> 00:16:07,450 But also, you'll understand whether these things are or are not 293 00:16:07,450 --> 00:16:08,430 actual threats. 294 00:16:08,430 --> 00:16:10,940 >> So I took a few excerpts from this article here. 295 00:16:10,940 --> 00:16:12,540 And the story is as follows. 296 00:16:12,540 --> 00:16:14,300 I'm now the owner of a new smart TV, which 297 00:16:14,300 --> 00:16:18,470 promises to deliver streaming multimedia content, games, app, 298 00:16:18,470 --> 00:16:21,450 social media, and internet browsing, oh and TV too. 299 00:16:21,450 --> 00:16:24,410 The only problem is that I'm now afraid to use it, says the author. 300 00:16:24,410 --> 00:16:29,592 You would be, too, if you read through the 46 page privacy policy for your TV. 301 00:16:29,592 --> 00:16:31,800 The amount of data this thing collects is staggering. 302 00:16:31,800 --> 00:16:35,710 It logs where, when, how, and for how long you use the TV. 303 00:16:35,710 --> 00:16:38,190 It sets tracking cookies, as we've discussed, 304 00:16:38,190 --> 00:16:40,560 and beacons designed to detect when you have 305 00:16:40,560 --> 00:16:43,185 viewed particular content or a particular email message 306 00:16:43,185 --> 00:16:45,230 if you want to check email on your TV. 307 00:16:45,230 --> 00:16:48,430 It records the apps you use, the websites you visit, 308 00:16:48,430 --> 00:16:52,280 and how you interact with content, doing all of that via your smart TV. 309 00:16:52,280 --> 00:16:55,470 It also, creepier yet-- that's my addition-- 310 00:16:55,470 --> 00:16:58,140 has a built in camera with facial recognition. 311 00:16:58,140 --> 00:17:01,010 >> The purpose is to provide gesture control for the TV 312 00:17:01,010 --> 00:17:05,490 and enable you to log in to personalized account using your face. 313 00:17:05,490 --> 00:17:08,940 On the upside, the images are saved on the TV instead of uploaded 314 00:17:08,940 --> 00:17:09,940 to a corporate server. 315 00:17:09,940 --> 00:17:12,520 On the downside, the internet connection makes the whole TV 316 00:17:12,520 --> 00:17:14,811 vulnerable to hackers who have demonstrated the ability 317 00:17:14,811 --> 00:17:16,700 to take complete control of the machine. 318 00:17:16,700 --> 00:17:20,880 >> More troubling, as if that wasn't smart enough, is the microphone. 319 00:17:20,880 --> 00:17:23,599 The TV boasts a voice recognition feature 320 00:17:23,599 --> 00:17:26,859 that allows viewers to control the screen with voice commands. 321 00:17:26,859 --> 00:17:30,290 But the service comes with a rather ominous warning. 322 00:17:30,290 --> 00:17:33,030 Please be aware that if your spoken words include 323 00:17:33,030 --> 00:17:36,210 personal or other sensitive information, that information 324 00:17:36,210 --> 00:17:40,310 will be among the data captured and transmitted to a third party. 325 00:17:40,310 --> 00:17:40,870 Got that? 326 00:17:40,870 --> 00:17:45,860 Don't say personal or sensitive stuff in front of your TV. 327 00:17:45,860 --> 00:17:47,280 >> So this is actually for real. 328 00:17:47,280 --> 00:17:50,530 And it's hard not to see if you go to Best Buy or the like for TVs 329 00:17:50,530 --> 00:17:51,030 these days. 330 00:17:51,030 --> 00:17:52,540 They're all smart in some way. 331 00:17:52,540 --> 00:17:54,740 And they're getting smarter and creepier. 332 00:17:54,740 --> 00:17:57,490 And they're simply collecting data in ways that we've talked about 333 00:17:57,490 --> 00:18:01,840 and then uploading it via HTTP or some other protocol to some server. 334 00:18:01,840 --> 00:18:05,720 >> So this was of a fun article in this online website 335 00:18:05,720 --> 00:18:08,940 here, which talked about a particular bug or mistaken code 336 00:18:08,940 --> 00:18:11,340 that we can actually tie into last week's discussion. 337 00:18:11,340 --> 00:18:15,730 So this headline was as follows, the story goes here, 338 00:18:15,730 --> 00:18:18,720 Josh Breckman worked for a company that landed a contract 339 00:18:18,720 --> 00:18:22,390 to develop a content management system, or CMS as they're called, 340 00:18:22,390 --> 00:18:24,380 for a fairly large government website. 341 00:18:24,380 --> 00:18:27,300 Much of the project involved developing a content management system 342 00:18:27,300 --> 00:18:29,840 so that employees would be able to build and maintain 343 00:18:29,840 --> 00:18:31,877 the ever changing content for their site. 344 00:18:31,877 --> 00:18:34,210 Things went pretty well for a few days after going live. 345 00:18:34,210 --> 00:18:37,020 But on day six, things went not so well. 346 00:18:37,020 --> 00:18:39,500 All of the content on the website had completely vanished. 347 00:18:39,500 --> 00:18:42,950 And all pages led to the default, please enter content web page. 348 00:18:42,950 --> 00:18:43,810 Whoops. 349 00:18:43,810 --> 00:18:46,080 Josh was called in to investigate and noticed 350 00:18:46,080 --> 00:18:49,390 that one particularly troublesome external IP address had 351 00:18:49,390 --> 00:18:53,380 gone in and deleted all of the content on the system. 352 00:18:53,380 --> 00:18:56,290 >> The IP address did not belong to some overseas hacker bent 353 00:18:56,290 --> 00:18:58,340 on destroying helpful government information. 354 00:18:58,340 --> 00:19:05,190 It resolved to googlebot.com, Google's very own web crawling spider. 355 00:19:05,190 --> 00:19:06,010 Whoops. 356 00:19:06,010 --> 00:19:09,150 After a bit of research and scrambling around to find a noncorrupt backup, 357 00:19:09,150 --> 00:19:10,180 Josh found the problem. 358 00:19:10,180 --> 00:19:12,700 >> A user had copied and pasted some content from one 359 00:19:12,700 --> 00:19:15,670 page to another, including an Edit Hyperlink 360 00:19:15,670 --> 00:19:17,577 to edit the content on the page. 361 00:19:17,577 --> 00:19:20,160 Normally this wouldn't be an issue since an outside user would 362 00:19:20,160 --> 00:19:24,320 need to enter a name and password, but the CMS authentication system, 363 00:19:24,320 --> 00:19:27,520 the login system, didn't take into account 364 00:19:27,520 --> 00:19:30,980 sophisticated hacking techniques of Google Spider. 365 00:19:30,980 --> 00:19:31,700 Whoops. 366 00:19:31,700 --> 00:19:33,610 >> As it turns out, Google Spider doesn't use 367 00:19:33,610 --> 00:19:36,950 cookies, which means that it can easily bypass a check for the 368 00:19:36,950 --> 00:19:39,840 is logged on cookie set to be false. 369 00:19:39,840 --> 00:19:42,620 It also doesn't pay attention to JavaScript, which would normally 370 00:19:42,620 --> 00:19:45,170 prompt and redirect users who are not logged in. 371 00:19:45,170 --> 00:19:48,610 It does however follow every hyperlink on every page it finds, 372 00:19:48,610 --> 00:19:51,700 including those with Delete Page in the title. 373 00:19:51,700 --> 00:19:52,650 Whoops. 374 00:19:52,650 --> 00:19:56,070 >> So what does this mean in more technical but fairly accessible terms? 375 00:19:56,070 --> 00:19:58,340 It just means that throughout their website, 376 00:19:58,340 --> 00:20:02,287 they had URLs not unlike this one that you might see in problem set seven. 377 00:20:02,287 --> 00:20:04,620 Recall in problem set seven or know in problem set seven 378 00:20:04,620 --> 00:20:06,411 that you're challenged, among other things, 379 00:20:06,411 --> 00:20:08,570 to sell stocks on behalf of users. 380 00:20:08,570 --> 00:20:14,010 But implementing that feature by way of get via hyperlinks in your user 381 00:20:14,010 --> 00:20:16,880 interface, probably not the smartest idea 382 00:20:16,880 --> 00:20:20,300 because if your site is somehow accessible either by a human 383 00:20:20,300 --> 00:20:23,577 who's clicking around or buy a bot like Google's or a Spider 384 00:20:23,577 --> 00:20:26,160 as they're called that's just crawling the web trying to index 385 00:20:26,160 --> 00:20:29,060 the web as a search engine, they could very easily 386 00:20:29,060 --> 00:20:31,340 hit via get this kind of URL. 387 00:20:31,340 --> 00:20:33,770 And that's functionally equivalent to, in this case, 388 00:20:33,770 --> 00:20:37,000 selling all shares of Google. 389 00:20:37,000 --> 00:20:40,030 >> Now frankly, it's completely asinine that the CMS 390 00:20:40,030 --> 00:20:43,240 used JavaScript and cookies to implement its login system 391 00:20:43,240 --> 00:20:47,100 and not doing that server side, as you guys do and will in PSet 7-- 392 00:20:47,100 --> 00:20:49,940 there's a login.php file-- always, always, 393 00:20:49,940 --> 00:20:52,789 always security should be done on the server side, 394 00:20:52,789 --> 00:20:56,080 not on the client side because, as this article suggests and you might yourself 395 00:20:56,080 --> 00:20:59,600 see at some point, it is trivial for a user, good or bad, 396 00:20:59,600 --> 00:21:02,860 to just turn off JavaScript not to mention cookies. 397 00:21:02,860 --> 00:21:06,020 So that is your daily WTF. 398 00:21:06,020 --> 00:21:07,970 >> There's one more, which is just kind of scary, 399 00:21:07,970 --> 00:21:11,360 so I'll mention it if only as a life lesson. 400 00:21:11,360 --> 00:21:14,850 Whenever you use an application called like Snapchat or the like 401 00:21:14,850 --> 00:21:19,380 that says these photos only last for five seconds, ten seconds, or whatnot. 402 00:21:19,380 --> 00:21:21,680 They're ephemeral That is absolutely not the case. 403 00:21:21,680 --> 00:21:25,670 Like there is no way, digitally, to implement some form of video, 404 00:21:25,670 --> 00:21:30,150 or image, or textual sharing such that a recipient on the other end 405 00:21:30,150 --> 00:21:31,660 can't somehow save the data. 406 00:21:31,660 --> 00:21:34,300 >> In the most naive way, someone could take their phone. 407 00:21:34,300 --> 00:21:36,850 And they have a 10 second window while looking at some snap 408 00:21:36,850 --> 00:21:39,410 to just take some other phone and photograph it, obviously. 409 00:21:39,410 --> 00:21:41,660 So you can preserve something digitally that way. 410 00:21:41,660 --> 00:21:44,620 Some of you know how to take screenshots on your phone. 411 00:21:44,620 --> 00:21:49,290 In fact, if you don't know this, realize that at least Snapchat, 412 00:21:49,290 --> 00:21:51,040 and I think other applications these days, 413 00:21:51,040 --> 00:21:53,720 at least tell you if the recipient has actually 414 00:21:53,720 --> 00:21:55,310 taken a screenshot of your image. 415 00:21:55,310 --> 00:22:00,870 >> But worse yet, this was the snappening, as someone coined it recently, 416 00:22:00,870 --> 00:22:04,680 where some 100,000 snaps had been released 417 00:22:04,680 --> 00:22:09,310 in what's called a torrent file on various websites ultimately. 418 00:22:09,310 --> 00:22:12,000 And these contained a whole bunch of private messages and posts. 419 00:22:12,000 --> 00:22:15,210 It turns out most of them benign, so not what you might expect. 420 00:22:15,210 --> 00:22:17,580 But because people had used a third party website, 421 00:22:17,580 --> 00:22:20,270 logging in with their Snapchat username and password and then 422 00:22:20,270 --> 00:22:23,470 saving all of their snaps on this third party website. 423 00:22:23,470 --> 00:22:26,130 And it was that third party website that was hacked, 424 00:22:26,130 --> 00:22:30,710 which just meant someone figured out how to get all 100,000 plus of those images 425 00:22:30,710 --> 00:22:33,822 into their own hard drive for subsequent sharing. 426 00:22:33,822 --> 00:22:36,030 Frankly, here too, it's sort of asinine that Snapchat 427 00:22:36,030 --> 00:22:39,360 is implemented in such a way that a third party can sort of intercept 428 00:22:39,360 --> 00:22:43,310 the data and that it's not tied to your own application running on the phone. 429 00:22:43,310 --> 00:22:46,947 But here, too, realize that these things should not catch you by surprise, 430 00:22:46,947 --> 00:22:49,030 or at least there should be a life lesson in here. 431 00:22:49,030 --> 00:22:52,220 If you'd like the technical details, go to that URL there 432 00:22:52,220 --> 00:22:53,570 that's in today's slides. 433 00:22:53,570 --> 00:23:00,960 All right, any questions on today's life lessons in CS? 434 00:23:00,960 --> 00:23:02,710 Turn that off. 435 00:23:02,710 --> 00:23:04,970 Anything at all? 436 00:23:04,970 --> 00:23:06,301 Anything at all? 437 00:23:06,301 --> 00:23:09,050 I've got a lot of people checking their Snapchat or something now. 438 00:23:09,050 --> 00:23:11,690 >> All right, so SQL, Structured Query Language. 439 00:23:11,690 --> 00:23:12,509 Let's wrap this. 440 00:23:12,509 --> 00:23:14,300 And also, even though we're just scratching 441 00:23:14,300 --> 00:23:16,310 the surface of this language, we'll give you 442 00:23:16,310 --> 00:23:18,930 enough of the language in the form of PSet 7 443 00:23:18,930 --> 00:23:22,140 so that you can tackle some fairly common functionality. 444 00:23:22,140 --> 00:23:24,912 But realize there are a couple things we don't require of you, 445 00:23:24,912 --> 00:23:27,120 but they're going to be important come final projects 446 00:23:27,120 --> 00:23:30,760 and certainly come making actual websites with actual users 447 00:23:30,760 --> 00:23:32,040 is this design decision. 448 00:23:32,040 --> 00:23:34,460 >> It turns out that in a MySQL database, you 449 00:23:34,460 --> 00:23:37,460 have bunches of choices like the data types for your columns 450 00:23:37,460 --> 00:23:41,670 and other things, but you also have the choice of a so-called storage 451 00:23:41,670 --> 00:23:44,570 engine for all of your data, the sort of file system, 452 00:23:44,570 --> 00:23:46,700 if you're familiar, for all of your data. 453 00:23:46,700 --> 00:23:48,830 What format is it ultimately stored in? 454 00:23:48,830 --> 00:23:53,300 And the most common, perhaps, has been MyiSAM and InnoDB, technical terms 455 00:23:53,300 --> 00:23:56,060 that we'll care about only to the extent that one has 456 00:23:56,060 --> 00:23:58,500 and one doesn't have the following feature. 457 00:23:58,500 --> 00:24:00,390 >> Suppose that you have a little dorm fridge. 458 00:24:00,390 --> 00:24:03,030 And suppose that you and your roommate, who share this fridge, 459 00:24:03,030 --> 00:24:04,682 are really fond of say milk. 460 00:24:04,682 --> 00:24:07,140 And this is, in fact, how the story was told to me way back 461 00:24:07,140 --> 00:24:10,890 in the day when I took a course called CS 161 Operating Systems, which 462 00:24:10,890 --> 00:24:12,580 similarly explores this topic. 463 00:24:12,580 --> 00:24:13,760 So you've got this fridge. 464 00:24:13,760 --> 00:24:14,630 You're out of milk. 465 00:24:14,630 --> 00:24:17,000 And you come home, your roommate's still at class or whatever, 466 00:24:17,000 --> 00:24:19,208 and you decide I'm going to go out and get some milk. 467 00:24:19,208 --> 00:24:22,630 So you close the fridge, lockup the dorm room, go across the street 468 00:24:22,630 --> 00:24:25,330 to CVS or wherever, and get in line to buy some milk. 469 00:24:25,330 --> 00:24:28,960 >> Meanwhile, your roommate gets home from class, gets into the dorm room, 470 00:24:28,960 --> 00:24:31,802 opens the fridge, also realizes ooph, we're out of milk. 471 00:24:31,802 --> 00:24:33,760 So he or she closes the fridge and then happens 472 00:24:33,760 --> 00:24:35,610 to go to the other CVS, which happens to be 473 00:24:35,610 --> 00:24:38,470 one block away from the other CVS in the square, and gets in line 474 00:24:38,470 --> 00:24:40,230 there to get some milk. 475 00:24:40,230 --> 00:24:42,524 Now, of course, a few minutes later, you both get back, 476 00:24:42,524 --> 00:24:44,690 and the worst of all possible outcomes has happened. 477 00:24:44,690 --> 00:24:45,792 Both of you have milk. 478 00:24:45,792 --> 00:24:47,500 And you don't really like milk that much. 479 00:24:47,500 --> 00:24:49,625 So one of them is just going to sour at some point. 480 00:24:49,625 --> 00:24:55,941 So now you have an excessive amount of milk in the fridge all because why? 481 00:24:55,941 --> 00:24:57,072 >> [INAUDIBLE] 482 00:24:57,072 --> 00:24:59,780 DAVID MALAN: Yeah, you didn't somehow communicate with each other 483 00:24:59,780 --> 00:25:00,904 that you were getting milk. 484 00:25:00,904 --> 00:25:04,320 So in the simplest of ways in the human world, 485 00:25:04,320 --> 00:25:08,390 how might you avoid this silly scenario from happening such 486 00:25:08,390 --> 00:25:09,750 that you only end up with one. 487 00:25:09,750 --> 00:25:10,840 Text them, yes good. 488 00:25:10,840 --> 00:25:12,877 But how else? 489 00:25:12,877 --> 00:25:13,460 Post-it notes. 490 00:25:13,460 --> 00:25:14,626 DAVID MALAN: A Post-it note. 491 00:25:14,626 --> 00:25:17,150 Any form of communication that tells your roommate 492 00:25:17,150 --> 00:25:18,670 don't go into the fridge for milk. 493 00:25:18,670 --> 00:25:20,440 I'm going to go restock on my own. 494 00:25:20,440 --> 00:25:22,770 So you somehow need to lock this resource. 495 00:25:22,770 --> 00:25:27,180 So we can make this-- we can kind of ruin the story and turn into a CS story 496 00:25:27,180 --> 00:25:30,360 whereby think of this as just like a variable, which is storing some value. 497 00:25:30,360 --> 00:25:32,570 And right now, the value of milk is zero, 498 00:25:32,570 --> 00:25:35,410 which you don't want your roommate to inspect that variable 499 00:25:35,410 --> 00:25:38,730 and then make a decision him or herself based on the state of that variable 500 00:25:38,730 --> 00:25:42,430 if you're in the process of changing the state of that variable. 501 00:25:42,430 --> 00:25:46,140 >> So one of the lines of SQL that we give you in PSet 7 specification 502 00:25:46,140 --> 00:25:47,310 is this one here. 503 00:25:47,310 --> 00:25:49,740 And we don't spend a huge amount of time talking about it. 504 00:25:49,740 --> 00:25:55,100 But it turns out, if you are trying to buy some stock in CS50 finance 505 00:25:55,100 --> 00:25:58,000 that you already have some shares of, you 506 00:25:58,000 --> 00:26:01,750 want to be able to do a number of things instantly together. 507 00:26:01,750 --> 00:26:04,360 You want to be able to effectively, on a high level, 508 00:26:04,360 --> 00:26:06,700 check all right, if I want to buy more shares of Free, 509 00:26:06,700 --> 00:26:08,780 the penny stock we talk about in the spec, 510 00:26:08,780 --> 00:26:10,660 I want to first check how many shares I have. 511 00:26:10,660 --> 00:26:11,810 And suppose it's five. 512 00:26:11,810 --> 00:26:14,600 And suppose I want to buy 10 more, I ultimately 513 00:26:14,600 --> 00:26:17,069 want to have 15 shares of stock. 514 00:26:17,069 --> 00:26:18,360 So I have to ask two questions. 515 00:26:18,360 --> 00:26:20,230 What's the state of the variable? 516 00:26:20,230 --> 00:26:21,470 What's the state of the row? 517 00:26:21,470 --> 00:26:22,970 How many shares do I currently have? 518 00:26:22,970 --> 00:26:24,636 Then you want to go ahead and update it. 519 00:26:24,636 --> 00:26:27,720 So that's the analog to the milk in that you check the row, 520 00:26:27,720 --> 00:26:30,730 and then you want to update it because if you want to buy 10 shares, 521 00:26:30,730 --> 00:26:32,521 you don't want to change the row to 10, you 522 00:26:32,521 --> 00:26:35,300 want to change it to 5 plus 10 or, of course, 15. 523 00:26:35,300 --> 00:26:40,030 >> This line of code ensures that those two conceptual ideas 524 00:26:40,030 --> 00:26:42,810 happen together or not at all. 525 00:26:42,810 --> 00:26:46,920 No one, including some other user who's logged into the same website, 526 00:26:46,920 --> 00:26:49,900 can somehow interrupt the checking of the row 527 00:26:49,900 --> 00:26:52,960 and the updating of the row, the select and the update if you will. 528 00:26:52,960 --> 00:26:57,360 And the syntax isn't super obvious, but this one line, long is it is, 529 00:26:57,360 --> 00:27:01,150 ensures that those two operations check the variable or check the row 530 00:27:01,150 --> 00:27:04,660 and update the row happen atomically. 531 00:27:04,660 --> 00:27:06,849 >> Oh here we go again. 532 00:27:06,849 --> 00:27:07,890 Text message on my phone. 533 00:27:07,890 --> 00:27:09,954 So let's make this a little more concrete. 534 00:27:09,954 --> 00:27:12,120 Suppose that you're not implementing a refrigerator, 535 00:27:12,120 --> 00:27:16,400 and you're not implementing PSet 7 but an actual bank, 536 00:27:16,400 --> 00:27:20,000 or an ATM, an Automated Teller Machine, whereby you somehow 537 00:27:20,000 --> 00:27:22,960 want to be able to empower users to transfer money 538 00:27:22,960 --> 00:27:24,500 from one account to another. 539 00:27:24,500 --> 00:27:25,100 OK, hang on. 540 00:27:25,100 --> 00:27:26,683 I'm going to mute this now, thank you. 541 00:27:26,683 --> 00:27:30,450 So we want to move money from one account number 542 00:27:30,450 --> 00:27:33,600 into a different account number, specifically $100. 543 00:27:33,600 --> 00:27:37,690 So this is kind of an arbitrary example, whereby you, the ATM, 544 00:27:37,690 --> 00:27:41,060 might want to execute two SQL queries, subtract from one account, 545 00:27:41,060 --> 00:27:42,430 and add to the other account. 546 00:27:42,430 --> 00:27:46,766 But you want to ensure that these two lines both happen or not at all. 547 00:27:46,766 --> 00:27:48,640 You don't want something getting interrupted. 548 00:27:48,640 --> 00:27:51,440 You don't some smart bad guy somehow standing at Bank of America 549 00:27:51,440 --> 00:27:53,270 with two ATMs in front of him and somehow 550 00:27:53,270 --> 00:27:55,270 sort of typing in the commands at the same time, 551 00:27:55,270 --> 00:28:01,230 hopefully trying to deduct $200 instead of $100 and only having $100 credited. 552 00:28:01,230 --> 00:28:04,450 In short, you want this to behave exactly as you expect. 553 00:28:04,450 --> 00:28:06,540 >> And the way you do this in SQL database is 554 00:28:06,540 --> 00:28:09,350 you wrap it in what's called a transaction. 555 00:28:09,350 --> 00:28:14,290 Literally in SQL, you can call CS50's query function with quote unquote start 556 00:28:14,290 --> 00:28:15,370 transaction. 557 00:28:15,370 --> 00:28:18,640 Then you can execute any number of subsequent SQL queries, 558 00:28:18,640 --> 00:28:20,870 but none of them take effect on the database 559 00:28:20,870 --> 00:28:25,880 until you call query quote unquote commit, if again using PHP. 560 00:28:25,880 --> 00:28:29,810 And in this way, you can ensure that even if you have 1,000 users all 561 00:28:29,810 --> 00:28:32,080 hitting your database at the same time, SQL 562 00:28:32,080 --> 00:28:34,540 will promise that these two queries will be 563 00:28:34,540 --> 00:28:36,740 implemented one right after the other. 564 00:28:36,740 --> 00:28:40,330 So you don't end up with excess of milk or the wrong amount, ultimately, 565 00:28:40,330 --> 00:28:40,830 of money. 566 00:28:40,830 --> 00:28:43,110 >> So keep this in mind, not so much for PSet 7 567 00:28:43,110 --> 00:28:45,250 but for final projects if you're actually 568 00:28:45,250 --> 00:28:49,690 trying to move data around across tables as you might here. 569 00:28:49,690 --> 00:28:53,980 But perhaps even simpler and more obvious to understand with an example 570 00:28:53,980 --> 00:28:54,860 is this one here. 571 00:28:54,860 --> 00:28:57,760 And someone emailed us about this just the other day 572 00:28:57,760 --> 00:28:59,600 when he saw something similar online. 573 00:28:59,600 --> 00:29:03,480 >> So to my knowledge, the pin system is not vulnerable to this attack. 574 00:29:03,480 --> 00:29:06,637 And I have no idea if it even uses the SQL database underneath the hood. 575 00:29:06,637 --> 00:29:08,470 But let's use it for the sake of discussion. 576 00:29:08,470 --> 00:29:10,178 Here's the screen that Harvard folks tend 577 00:29:10,178 --> 00:29:13,620 to see when logging in with their Harvard ID number and their pin. 578 00:29:13,620 --> 00:29:19,020 And suppose that the pin system were implemented in PHP and with a MySQL 579 00:29:19,020 --> 00:29:22,000 database, the code that someone might have written years ago 580 00:29:22,000 --> 00:29:23,270 might look like this. 581 00:29:23,270 --> 00:29:25,230 First, declare a variable called username. 582 00:29:25,230 --> 00:29:27,560 And just get that from the POST superglobal. 583 00:29:27,560 --> 00:29:30,140 Then get another variable called password and do the same. 584 00:29:30,140 --> 00:29:33,080 And then just execute this long query here, 585 00:29:33,080 --> 00:29:36,690 select star from users where username equals such and such 586 00:29:36,690 --> 00:29:38,510 and password equals such and such. 587 00:29:38,510 --> 00:29:40,660 >> Notice that the curly braces I've used here 588 00:29:40,660 --> 00:29:42,880 just mean to PHP, go ahead and substitute 589 00:29:42,880 --> 00:29:45,400 the value of those two variables right there. 590 00:29:45,400 --> 00:29:50,090 They're not strictly necessary, but they tend to avoid subtle syntax errors. 591 00:29:50,090 --> 00:29:53,650 So this looks completely correct at first glance. 592 00:29:53,650 --> 00:29:54,240 And it is. 593 00:29:54,240 --> 00:29:56,680 You could implement the pin system in this way. 594 00:29:56,680 --> 00:30:00,460 >> But suppose that a super smart and malicious student 595 00:30:00,460 --> 00:30:03,020 input this as his or her pin. 596 00:30:03,020 --> 00:30:05,550 So I've removed the bullet signs here in the mock up, 597 00:30:05,550 --> 00:30:08,760 and I've actually revealed what he or she might be typing. 598 00:30:08,760 --> 00:30:10,350 And it's a little strange. 599 00:30:10,350 --> 00:30:13,850 But what jumps out at you at potentially worrisome about the user's input, 600 00:30:13,850 --> 00:30:16,450 even if you have no idea what a SQL injection attack means. 601 00:30:16,450 --> 00:30:20,300 Why does this look a little fishy? 602 00:30:20,300 --> 00:30:21,050 What's that? 603 00:30:21,050 --> 00:30:21,550 [INAUDIBLE] 604 00:30:21,550 --> 00:30:24,260 DAVID MALAN: The or is a little suspicious. 605 00:30:24,260 --> 00:30:26,310 In fact, that's a keyword from SQL. 606 00:30:26,310 --> 00:30:28,105 So that doesn't bode well. 607 00:30:28,105 --> 00:30:29,980 The fact that there's all these single quotes 608 00:30:29,980 --> 00:30:32,646 there-- in fact, one of the easiest ways to break some databases 609 00:30:32,646 --> 00:30:35,880 is by typing in a name like O'Reilly that has an apostrophe in it 610 00:30:35,880 --> 00:30:38,600 because if the human who wrote the code behind the scenes 611 00:30:38,600 --> 00:30:41,570 doesn't take into account that there might be single quotes in a user's 612 00:30:41,570 --> 00:30:45,060 input, and he or she is using single quotes in their code, 613 00:30:45,060 --> 00:30:46,040 bad things can happen. 614 00:30:46,040 --> 00:30:47,870 >> In fact, worse yet, consider this. 615 00:30:47,870 --> 00:30:50,600 If this was again the code that someone at Harvard years 616 00:30:50,600 --> 00:30:53,100 ago wrote for the pin system, notice what's 617 00:30:53,100 --> 00:30:56,220 about to get substituted for username and password 618 00:30:56,220 --> 00:30:59,780 if the user types in again skroob as their username 619 00:30:59,780 --> 00:31:03,960 and then one, two, three, four, five, quote or quote unquote one equals 620 00:31:03,960 --> 00:31:04,660 quote one. 621 00:31:04,660 --> 00:31:07,220 And notice what's key here is the user has not 622 00:31:07,220 --> 00:31:09,900 started their password or their pin with a quote. 623 00:31:09,900 --> 00:31:12,610 And they haven't ended it with a quote because he or she 624 00:31:12,610 --> 00:31:16,315 is assuming that if the programmer wasn't so sharp, 625 00:31:16,315 --> 00:31:18,690 they are going to have those single quotes in their code. 626 00:31:18,690 --> 00:31:19,860 >> So here's the code. 627 00:31:19,860 --> 00:31:23,820 And the substitution that might now happen is this. 628 00:31:23,820 --> 00:31:26,350 And I've underlined what the user has typed in. 629 00:31:26,350 --> 00:31:28,480 So before, after. 630 00:31:28,480 --> 00:31:33,330 And notice what's mildly worrisome now about the right half of this SQL code? 631 00:31:33,330 --> 00:31:36,300 It's a little more complex, admittedly, than the queries we've seen. 632 00:31:36,300 --> 00:31:38,550 But this can't possibly be a good thing if you're 633 00:31:38,550 --> 00:31:42,240 saying select star, which is select everything from the user's table 634 00:31:42,240 --> 00:31:46,630 where username equals skroob and password equals one, two, three, four, 635 00:31:46,630 --> 00:31:49,610 five or one equals one. 636 00:31:49,610 --> 00:31:53,860 What's the logical implication of that last clause presumably? 637 00:31:53,860 --> 00:31:55,650 It's just always true. 638 00:31:55,650 --> 00:31:59,930 >> And because we have sort of guessed or figured out by trial and error 639 00:31:59,930 --> 00:32:02,760 that the programmer who wrote this code did not 640 00:32:02,760 --> 00:32:07,250 anticipate a human or bad person typing in single quotes as well, 641 00:32:07,250 --> 00:32:10,350 we can syntactically complete the SQL query 642 00:32:10,350 --> 00:32:12,260 with something nonsensical but something that 643 00:32:12,260 --> 00:32:15,930 is syntactically incorrect that always evaluates to true. 644 00:32:15,930 --> 00:32:19,130 So if this code is being used to answer the question true or false should 645 00:32:19,130 --> 00:32:22,930 this user be allowed to pass, the answer is always apparently going 646 00:32:22,930 --> 00:32:26,930 to be true because this is always going to select something from the database 647 00:32:26,930 --> 00:32:29,280 because one of course always equals one. 648 00:32:29,280 --> 00:32:30,360 >> So what's the solution? 649 00:32:30,360 --> 00:32:33,290 Well in PSet 7, we actually avoid this all together. 650 00:32:33,290 --> 00:32:37,360 We give you a query function, and we encourage you to use question marks 651 00:32:37,360 --> 00:32:40,430 as placeholders, similar in spirit to printf's %s, 652 00:32:40,430 --> 00:32:43,710 but what's key about the question marks here is if you actually read through 653 00:32:43,710 --> 00:32:46,950 functions.php, where our query function is implemented, 654 00:32:46,950 --> 00:32:52,780 those question marks are escaped, whereby anything potentially dangerous 655 00:32:52,780 --> 00:32:58,210 like a single quote is turned into an escaped single quote. 656 00:32:58,210 --> 00:33:00,590 >> So this is what's really happening if you 657 00:33:00,590 --> 00:33:04,850 use CS50's query function or any number of third party free libraries that 658 00:33:04,850 --> 00:33:06,000 do the same. 659 00:33:06,000 --> 00:33:09,850 Doesn't matter in this case, in green, if the user has typed in a single quote 660 00:33:09,850 --> 00:33:12,070 because the query function that we wrote is 661 00:33:12,070 --> 00:33:15,120 going to add backslashes before any such dangerous quote. 662 00:33:15,120 --> 00:33:17,360 So this is not, in fact, going to be legit. 663 00:33:17,360 --> 00:33:20,910 This is like typing in a crazy looking password that's, of course, not going 664 00:33:20,910 --> 00:33:23,490 to be skroob's actual password. 665 00:33:23,490 --> 00:33:28,260 >> So the takeaway for CS50 is one, absolutely always use something 666 00:33:28,260 --> 00:33:30,860 like CS50's query function or the underlying library, 667 00:33:30,860 --> 00:33:32,560 which happens to be called PDO. 668 00:33:32,560 --> 00:33:35,880 But never, never, never do code like this 669 00:33:35,880 --> 00:33:39,472 without escaping or scrubbing as they say your inputs. 670 00:33:39,472 --> 00:33:42,430 And you will at some point probably come across some website like this. 671 00:33:42,430 --> 00:33:46,060 In fact, it seems to be the case like at airports and hotels in places 672 00:33:46,060 --> 00:33:48,880 where they have free Wi-Fi access that you have to login to, 673 00:33:48,880 --> 00:33:51,010 these websites are always horribly implemented. 674 00:33:51,010 --> 00:33:55,680 And so a sort of fun at home exercise, not for malicious purposes or more 675 00:33:55,680 --> 00:33:59,170 of a fun on the road exercise, is to just type 676 00:33:59,170 --> 00:34:02,850 an apostrophe, a single quote, into a form on some website 677 00:34:02,850 --> 00:34:03,810 and see what happens. 678 00:34:03,810 --> 00:34:06,660 And if the server crashes or gives you some kind of error message, 679 00:34:06,660 --> 00:34:09,690 it may very well be that someone hasn't anticipated this. 680 00:34:09,690 --> 00:34:15,239 And then you should alert the proper authorities and proceed no further. 681 00:34:15,239 --> 00:34:20,843 >> So now you guys should hopefully understand a bit more geek humor here. 682 00:34:20,843 --> 00:34:24,120 >> [LAUGHTER] 683 00:34:24,120 --> 00:34:27,571 684 00:34:27,571 --> 00:34:29,070 DAVID MALAN: You know you're a geek. 685 00:34:29,070 --> 00:34:30,944 For the next several years, you will remember 686 00:34:30,944 --> 00:34:33,520 who little Bobby Tables is because of this cartoon here. 687 00:34:33,520 --> 00:34:36,760 So keep that in mind as we context switch one last time 688 00:34:36,760 --> 00:34:38,770 today to JavaScript. 689 00:34:38,770 --> 00:34:41,600 We've spent relatively little time on the syntax of PHP 690 00:34:41,600 --> 00:34:43,440 because it's actually super similar to C. 691 00:34:43,440 --> 00:34:47,300 And nicely enough, JavaScript too is super similar to C's syntax 692 00:34:47,300 --> 00:34:49,639 as well as we'll see in just a moment and as we'll 693 00:34:49,639 --> 00:34:51,205 see later this week in particular. 694 00:34:51,205 --> 00:34:54,080 What you can do with this language, though, is all the more powerful, 695 00:34:54,080 --> 00:34:55,790 especially with APIs. 696 00:34:55,790 --> 00:34:56,960 >> But first a quick tour. 697 00:34:56,960 --> 00:35:00,450 So one, in JavaScript, there's no main function, which is nice. 698 00:35:00,450 --> 00:35:02,650 As with PHP, you can just write code. 699 00:35:02,650 --> 00:35:04,310 Conditions look like this. 700 00:35:04,310 --> 00:35:07,100 And Boolean expressions might look like this or like this. 701 00:35:07,100 --> 00:35:09,530 Switches exist, and they might look like this. 702 00:35:09,530 --> 00:35:10,970 Four loops look like this. 703 00:35:10,970 --> 00:35:12,390 While loops look like this. 704 00:35:12,390 --> 00:35:14,160 Do whiles look like this. 705 00:35:14,160 --> 00:35:16,850 And then arrays look like this, very similar to PHP. 706 00:35:16,850 --> 00:35:20,740 But notice, that in JavaScript you declare a variable not with a dollar 707 00:35:20,740 --> 00:35:25,190 sign, not with a data type but literally by saying var for variable before it. 708 00:35:25,190 --> 00:35:27,900 It too is loosely typed in that it has types, 709 00:35:27,900 --> 00:35:29,729 but you don't explicitly declare them. 710 00:35:29,729 --> 00:35:31,520 And then a string, for instance, might look 711 00:35:31,520 --> 00:35:34,350 like this, that string being called s in this case. 712 00:35:34,350 --> 00:35:35,410 And then an object. 713 00:35:35,410 --> 00:35:37,010 And these we'll see more before long. 714 00:35:37,010 --> 00:35:41,470 And an object is perhaps one of the most commonly seen data structures 715 00:35:41,470 --> 00:35:44,050 in a JavaScript based program because it allows 716 00:35:44,050 --> 00:35:46,680 you to associate arbitrary key value pairs just 717 00:35:46,680 --> 00:35:51,240 like PHP's associative arrays and just like your own hash table 718 00:35:51,240 --> 00:35:54,042 or try as we implemented a few weeks back. 719 00:35:54,042 --> 00:35:56,250 So let's actually see what we can do with JavaScript. 720 00:35:56,250 --> 00:35:59,410 And in particular, this is a laundry list of features 721 00:35:59,410 --> 00:36:02,300 that browsers have that allow us to hook JavaScript 722 00:36:02,300 --> 00:36:05,470 into a website in the following way. 723 00:36:05,470 --> 00:36:09,340 JavaScript is often used as a client side scripting language. 724 00:36:09,340 --> 00:36:10,130 It's not compiled. 725 00:36:10,130 --> 00:36:11,370 It too is interpreted. 726 00:36:11,370 --> 00:36:15,740 But unlike PHP, which has been running on the server, in the web server, 727 00:36:15,740 --> 00:36:18,220 or deep inside of the clients, JavaScript 728 00:36:18,220 --> 00:36:22,190 is different in that it usually runs in the browser. 729 00:36:22,190 --> 00:36:26,060 >> So any JavaScript code you start writing for PSet 8, or your final project, 730 00:36:26,060 --> 00:36:29,890 or in the real world is generally going to be saved on the server, absolutely 731 00:36:29,890 --> 00:36:33,110 in a dot HTML or dot JS for JavaScript file. 732 00:36:33,110 --> 00:36:35,770 But the browser is going to download that JavaScript 733 00:36:35,770 --> 00:36:39,530 code to your own instance of Chrome, or IE, or Firefox, or whatever. 734 00:36:39,530 --> 00:36:43,870 And the code is actually going to get executed inside of your own browser. 735 00:36:43,870 --> 00:36:46,560 Just to make this more real, let's see this in concrete form. 736 00:36:46,560 --> 00:36:50,120 >> We have no idea what this code does without really reading through it. 737 00:36:50,120 --> 00:36:52,670 But let me go to Facebook.com without logging in. 738 00:36:52,670 --> 00:37:00,440 Let me go to Inspect Element and go to, let's say, Network and Reload the Page. 739 00:37:00,440 --> 00:37:04,150 And we'll see-- let me shift Reload the Page to get all the requests to new. 740 00:37:04,150 --> 00:37:08,850 And the very first file I see is CSS, CSS. 741 00:37:08,850 --> 00:37:10,880 Here's the first JavaScript file, and I have 742 00:37:10,880 --> 00:37:14,600 no idea what this does, but here is some of the JavaScript code 743 00:37:14,600 --> 00:37:16,180 that drives Facebook. 744 00:37:16,180 --> 00:37:18,400 It's not even really that revealing to zoom in. 745 00:37:18,400 --> 00:37:20,260 It's still just as nonsensical. 746 00:37:20,260 --> 00:37:24,341 >> But you'll see even down below, there's even more of these JavaScript files. 747 00:37:24,341 --> 00:37:24,840 Whoops. 748 00:37:24,840 --> 00:37:25,440 That's a ping. 749 00:37:25,440 --> 00:37:28,550 Let's go down a little further, further, further. 750 00:37:28,550 --> 00:37:29,894 There's one. 751 00:37:29,894 --> 00:37:31,238 There's one. 752 00:37:31,238 --> 00:37:31,880 There's one. 753 00:37:31,880 --> 00:37:35,820 >> So even though Facebook, behind the scenes, is written in part in PHP 754 00:37:35,820 --> 00:37:39,100 and Facebook's own version thereof, there's a huge amount of JavaScript. 755 00:37:39,100 --> 00:37:41,330 In fact, any of the chatting you do on Facebook, 756 00:37:41,330 --> 00:37:45,520 any of the inline timeline updates that happen in real time, all of that 757 00:37:45,520 --> 00:37:47,944 is driven by JavaScript. 758 00:37:47,944 --> 00:37:48,444 Yeah? 759 00:37:48,444 --> 00:37:50,235 >> AUDIENCE: I'm not sure if this is Facebook, 760 00:37:50,235 --> 00:37:53,624 but I thought that Facebook developed their own in-house code language? 761 00:37:53,624 --> 00:37:54,540 DAVID MALAN: They did. 762 00:37:54,540 --> 00:37:58,110 So that's why I say a variance of PHP called Hip Hop that they actually 763 00:37:58,110 --> 00:38:03,440 added features to such that when Mark first implemented Facebook, 764 00:38:03,440 --> 00:38:04,710 it was written in PHP. 765 00:38:04,710 --> 00:38:07,370 And that sort of has remained the sort of front end language 766 00:38:07,370 --> 00:38:09,030 that they use for much of their coding, but it 767 00:38:09,030 --> 00:38:11,870 hasn't been a language that's scales particularly well to billions 768 00:38:11,870 --> 00:38:12,630 of people. 769 00:38:12,630 --> 00:38:15,300 And so they have added their own improvements behind the scenes. 770 00:38:15,300 --> 00:38:17,049 And they use any number of other languages 771 00:38:17,049 --> 00:38:19,170 for various pieces of their infrastructure. 772 00:38:19,170 --> 00:38:24,080 So yes, it's a variance of what we now know as PHP. 773 00:38:24,080 --> 00:38:26,610 >> So let's take a look at a couple of examples 774 00:38:26,610 --> 00:38:28,890 of how we might use JavaScript here. 775 00:38:28,890 --> 00:38:32,530 In today's source code, we have a bunch of files, the first of which, 776 00:38:32,530 --> 00:38:34,090 let's called DOM zero. 777 00:38:34,090 --> 00:38:36,770 So DOM zero looks as follows. 778 00:38:36,770 --> 00:38:40,730 Let me go into this directory and open up domzero.html, 779 00:38:40,730 --> 00:38:44,970 the top of which has a doc type declaration, saying here comes HTML 5. 780 00:38:44,970 --> 00:38:46,440 And now here's an HTML tag. 781 00:38:46,440 --> 00:38:47,540 Here's the head tag. 782 00:38:47,540 --> 00:38:49,210 And here's what's new today. 783 00:38:49,210 --> 00:38:52,620 >> We now have a script tag inside of the head of the page. 784 00:38:52,620 --> 00:38:55,290 And this apparently does very little, but notice 785 00:38:55,290 --> 00:38:58,410 that I've defined a script, a JavaScript. 786 00:38:58,410 --> 00:39:01,050 And as an aside, since this is a common misconception, 787 00:39:01,050 --> 00:39:05,220 JavaScript has absolutely nothing to do with Java, the language 788 00:39:05,220 --> 00:39:08,010 that some of you might have learned in APCS. 789 00:39:08,010 --> 00:39:10,480 It was more of a marketing thing than anything, 790 00:39:10,480 --> 00:39:12,980 riding the coattails of Java years ago. 791 00:39:12,980 --> 00:39:17,300 But JavaScript, nothing to do with Java, just similarly, and annoyingly, 792 00:39:17,300 --> 00:39:18,480 confusingly named. 793 00:39:18,480 --> 00:39:21,890 >> So here is how you declare a function in JavaScript, literally say function, 794 00:39:21,890 --> 00:39:24,556 then the name of the function, then any arguments it might take, 795 00:39:24,556 --> 00:39:25,530 just like in PHP. 796 00:39:25,530 --> 00:39:28,990 Turns out in JavaScript, one of the most annoying functions that exist is Alert. 797 00:39:28,990 --> 00:39:31,392 This is a little window that will pop up and alert you 798 00:39:31,392 --> 00:39:32,600 to some piece of information. 799 00:39:32,600 --> 00:39:33,766 It's generally frowned upon. 800 00:39:33,766 --> 00:39:35,980 But we'll use it as our first exercise here. 801 00:39:35,980 --> 00:39:37,900 >> Notice a few features of JavaScript. 802 00:39:37,900 --> 00:39:41,524 Single quotes and double quotes don't actually matter anymore. 803 00:39:41,524 --> 00:39:43,690 Single quotes and double quotes can be interchanged, 804 00:39:43,690 --> 00:39:46,220 whereas in C, you have to use double quotes for strings, 805 00:39:46,220 --> 00:39:48,150 and you have two single quotes for chars. 806 00:39:48,150 --> 00:39:51,150 In the JavaScript world, many people, most people 807 00:39:51,150 --> 00:39:54,970 use single quotes around strings just because it's a stylistic thing. 808 00:39:54,970 --> 00:39:58,330 But what's the plus operator here, which we haven't seen before? 809 00:39:58,330 --> 00:39:59,836 >> AUDIENCE: Concatenation. 810 00:39:59,836 --> 00:40:00,960 DAVID MALAN: Concatenation. 811 00:40:00,960 --> 00:40:02,450 So C does not even have this. 812 00:40:02,450 --> 00:40:04,820 PHP has the dot operator, which does this. 813 00:40:04,820 --> 00:40:09,710 JavaScript has the plus operator, which confusingly is just like Java. 814 00:40:09,710 --> 00:40:11,440 Now what's going on here? 815 00:40:11,440 --> 00:40:14,260 >> So here's where a basic understanding of that picture 816 00:40:14,260 --> 00:40:17,010 we threw up a couple days ago comes into play. 817 00:40:17,010 --> 00:40:19,620 Remember when we had a simple version of an HTML page-- 818 00:40:19,620 --> 00:40:20,830 it just said, hello world. 819 00:40:20,830 --> 00:40:22,770 And then we drew a tree to the right, which 820 00:40:22,770 --> 00:40:27,320 had a bunch of rectangles and lines connecting them like a family tree. 821 00:40:27,320 --> 00:40:30,820 So that's the so-called DOM or Document Object Model. 822 00:40:30,820 --> 00:40:36,759 And it turns out that you can access rectangles in that tree with syntax 823 00:40:36,759 --> 00:40:37,550 like the following. 824 00:40:37,550 --> 00:40:41,370 You literally say document, which is a special global variable in a JavaScript 825 00:40:41,370 --> 00:40:45,890 program that has a function associated with it that you can access 826 00:40:45,890 --> 00:40:50,280 similar to a struct, but you simply say dot and then the function's name, 827 00:40:50,280 --> 00:40:52,390 get element by ID. 828 00:40:52,390 --> 00:40:55,460 >> The element I want to get is apparently quote unquote name. 829 00:40:55,460 --> 00:40:57,150 And then I want to get its value. 830 00:40:57,150 --> 00:40:58,330 Now we're getting ahead of ourselves. 831 00:40:58,330 --> 00:41:00,038 I'm not even sure what all this is about. 832 00:41:00,038 --> 00:41:03,000 Let's fast forward to the HTML on the page, which is super simple. 833 00:41:03,000 --> 00:41:05,370 >> Notice that I've defined a form down here. 834 00:41:05,370 --> 00:41:07,940 Notice I've given it a unique ID, even though we've not used 835 00:41:07,940 --> 00:41:08,870 this attribute before. 836 00:41:08,870 --> 00:41:11,300 But this exists in HTML. 837 00:41:11,300 --> 00:41:15,570 You can uniquely identify some chunk of HTML with an identifier like this. 838 00:41:15,570 --> 00:41:19,880 >> Notice now this-- turns out HTML supports, per that laundry list 839 00:41:19,880 --> 00:41:22,490 a moment ago, a whole bunch of event handlers. 840 00:41:22,490 --> 00:41:25,060 And this event handler says on submit. 841 00:41:25,060 --> 00:41:28,730 On the user submission of this form, call the following code. 842 00:41:28,730 --> 00:41:31,360 And the code that's going to be called or executed 843 00:41:31,360 --> 00:41:35,260 is exactly this, the Greek function followed by return false. 844 00:41:35,260 --> 00:41:37,360 Everything else should be pretty familiar. 845 00:41:37,360 --> 00:41:42,050 >> Here is an input of type text, whose ID, in this case, is going to be name. 846 00:41:42,050 --> 00:41:45,430 We don't have an actual name attribute this time-- and a submit button. 847 00:41:45,430 --> 00:41:48,330 So the resulting page looks like this. 848 00:41:48,330 --> 00:41:52,890 And the resulting behavior, you'll see, looks like this. 849 00:41:52,890 --> 00:41:56,940 The page it local hosts says, hello David, hardly an aesthetically pleasing 850 00:41:56,940 --> 00:41:58,340 way to greet a user. 851 00:41:58,340 --> 00:41:59,950 But what's actually going on? 852 00:41:59,950 --> 00:42:01,360 >> Well, consider what this is. 853 00:42:01,360 --> 00:42:02,310 This is a text field. 854 00:42:02,310 --> 00:42:04,635 And according to the HTML here, I've given it 855 00:42:04,635 --> 00:42:07,350 a unique identifier called quote unquote name. 856 00:42:07,350 --> 00:42:09,770 Meanwhile, I've said when the user submits this form 857 00:42:09,770 --> 00:42:13,820 by hitting Enter or clicking the Submit button, call the function called Greet 858 00:42:13,820 --> 00:42:15,410 and then return False. 859 00:42:15,410 --> 00:42:16,870 Let's consider those in reverse. 860 00:42:16,870 --> 00:42:20,590 Notice when I click Submit, the URL of this page does not change. 861 00:42:20,590 --> 00:42:22,420 The browser's icon didn't start spinning. 862 00:42:22,420 --> 00:42:27,050 I didn't go anywhere, and that's literally because I said return False. 863 00:42:27,050 --> 00:42:31,534 Return False short circuits or stops the default behavior of a form. 864 00:42:31,534 --> 00:42:33,700 So that then leaves us with this one final question. 865 00:42:33,700 --> 00:42:34,764 What does Greet do? 866 00:42:34,764 --> 00:42:36,680 Well, Greet apparently calls a function called 867 00:42:36,680 --> 00:42:39,250 Alert, passes in one long argument that's 868 00:42:39,250 --> 00:42:43,950 the result of concatenating together a bunch of substrings, hello comma space, 869 00:42:43,950 --> 00:42:45,810 then whatever this returns. 870 00:42:45,810 --> 00:42:51,490 So document is like a global variable to that root of that tree, 871 00:42:51,490 --> 00:42:55,560 calling a special function, otherwise now known as a method. 872 00:42:55,560 --> 00:42:57,650 A function that's inside of a variable is 873 00:42:57,650 --> 00:42:59,640 called a method instead of a function. 874 00:42:59,640 --> 00:43:01,570 >> So get element by ID. 875 00:43:01,570 --> 00:43:03,940 What element do you want to get by its ID? 876 00:43:03,940 --> 00:43:06,970 Quote unquote name and then specifically value. 877 00:43:06,970 --> 00:43:12,000 So in other words, that code simply finds the text field whose ID is name 878 00:43:12,000 --> 00:43:13,380 and then gets its value. 879 00:43:13,380 --> 00:43:16,460 So if I were to change this and say Davin instead of David, 880 00:43:16,460 --> 00:43:20,670 and click Submit, now we have a greeting for Davin. 881 00:43:20,670 --> 00:43:22,890 >> All right, so all fine and good. 882 00:43:22,890 --> 00:43:25,480 But let's see if we can make this a little cleaner since just 883 00:43:25,480 --> 00:43:28,190 writing code like this is generally going to be frowned upon. 884 00:43:28,190 --> 00:43:30,060 This is going to look scarier. 885 00:43:30,060 --> 00:43:32,330 But what's the first difference that you note here 886 00:43:32,330 --> 00:43:35,970 in this version besides the name changing to DOM one? 887 00:43:35,970 --> 00:43:41,110 What structurally looks different about this versus the other? 888 00:43:41,110 --> 00:43:41,932 Yeah? 889 00:43:41,932 --> 00:43:43,890 AUDIENCE: Is the form on top of the script now? 890 00:43:43,890 --> 00:43:46,570 DAVID MALAN: Yeah, the form is on top of the script for some curious reason. 891 00:43:46,570 --> 00:43:48,736 So that's the first thing that jumps out at me, too. 892 00:43:48,736 --> 00:43:50,990 And thankfully at least, this part is identical. 893 00:43:50,990 --> 00:43:53,470 So the only thing that seems to be different is this. 894 00:43:53,470 --> 00:43:55,296 >> So here's what's neat about JavaScript 2. 895 00:43:55,296 --> 00:43:57,420 And it makes it hard to understand at first glance, 896 00:43:57,420 --> 00:44:00,670 especially for final projects if you're looking at sample code online, 897 00:44:00,670 --> 00:44:04,200 but it boils down to some basic syntactic features. 898 00:44:04,200 --> 00:44:06,230 Here again is that global variable document. 899 00:44:06,230 --> 00:44:09,540 Here again is that method or function that says get the element by ID. 900 00:44:09,540 --> 00:44:11,570 This time I want to get the ID called demo. 901 00:44:11,570 --> 00:44:12,490 Where is that? 902 00:44:12,490 --> 00:44:15,400 That's apparently right here, the form itself. 903 00:44:15,400 --> 00:44:20,010 >> And now notice that apparently if I get back that node from the tree that 904 00:44:20,010 --> 00:44:22,940 represents the form itself, not a text field, 905 00:44:22,940 --> 00:44:26,970 it turns out that form, that node or rectangle from the tree, 906 00:44:26,970 --> 00:44:30,450 has what we'll call a property, very, very, very similar 907 00:44:30,450 --> 00:44:35,390 in spirit to a struct in C. It's just a data member inside of this rectangle. 908 00:44:35,390 --> 00:44:38,300 >> So I've got the form here, and I'm attaching, 909 00:44:38,300 --> 00:44:44,650 or I'm assigning, to its On Submit handler or rather On Submit property 910 00:44:44,650 --> 00:44:45,740 the following function. 911 00:44:45,740 --> 00:44:49,000 And this is, by far, the craziest thing thus far syntactically. 912 00:44:49,000 --> 00:44:53,610 It turns out in JavaScript and in PHP, and frankly for that matter in C, 913 00:44:53,610 --> 00:44:58,990 even though we don't do it, you can add nameless, anonymous, or AKA lambda 914 00:44:58,990 --> 00:45:03,000 functions that don't have a name but can be called nonetheless. 915 00:45:03,000 --> 00:45:07,050 >> So what I'm doing here is I'm assigning this On Submit property, which 916 00:45:07,050 --> 00:45:14,330 is inside of this node of my DOM tree, a function, function pointer if you will. 917 00:45:14,330 --> 00:45:16,310 That function has no name, but that doesn't 918 00:45:16,310 --> 00:45:19,110 matter because we'll see in a moment how to call it. 919 00:45:19,110 --> 00:45:21,780 When this function is called, this code gets executed, then 920 00:45:21,780 --> 00:45:24,210 false is returned just like before. 921 00:45:24,210 --> 00:45:25,800 >> But notice what I've done. 922 00:45:25,800 --> 00:45:27,830 At this point in the story, I have a form. 923 00:45:27,830 --> 00:45:30,190 It's got a unique ID called demo. 924 00:45:30,190 --> 00:45:33,740 Down here, I have a script tag that executes the following code. 925 00:45:33,740 --> 00:45:37,720 It attaches to that node in the tree to it's On Submit 926 00:45:37,720 --> 00:45:40,260 property this function here. 927 00:45:40,260 --> 00:45:44,310 And just by nature of how browsers work, when I now click Submit or hit Enter, 928 00:45:44,310 --> 00:45:45,889 that function is going to get called. 929 00:45:45,889 --> 00:45:48,680 It doesn't need a name because who the heck cares what it's called. 930 00:45:48,680 --> 00:45:52,540 The only time it's ever going to get called is when I submit the form. 931 00:45:52,540 --> 00:45:55,130 There's no need for me, the human developer, 932 00:45:55,130 --> 00:45:57,330 to actually call it anywhere else. 933 00:45:57,330 --> 00:46:00,720 >> Now just as a teaser, as if that weren't mind bending enough, 934 00:46:00,720 --> 00:46:03,330 we can even make this look more cryptic using 935 00:46:03,330 --> 00:46:05,850 a super popular library called jQuery. 936 00:46:05,850 --> 00:46:08,760 In fact jQuery and JavaScript are often conflated. 937 00:46:08,760 --> 00:46:12,790 And what we'll do on Wednesday is start using this language and these libraries 938 00:46:12,790 --> 00:46:16,030 to build increasingly asynchronous and dynamic applications 939 00:46:16,030 --> 00:46:18,950 like map getting applications, applications 940 00:46:18,950 --> 00:46:22,360 that update the webpage in real time, much like Facebook or Gchat 941 00:46:22,360 --> 00:46:27,130 do, and no longer confine ourselves to hitting Submit by a get or just post 942 00:46:27,130 --> 00:46:27,630 alone. 943 00:46:27,630 --> 00:46:29,055 So I will see you on Wednesday. 944 00:46:29,055 --> 00:46:31,805 945 00:46:31,805 --> 00:46:35,550 >> [MUSIC PLAYING] 946 00:46:35,550 --> 00:48:09,728