1 00:00:00,506 --> 00:00:09,316 [ Silence ] 2 00:00:09,816 --> 00:00:11,196 >> Alright. 3 00:00:11,306 --> 00:00:12,866 This is CS50 the end of week 9. 4 00:00:13,286 --> 00:00:16,236 And this is one of your classmate's home page. 5 00:00:16,236 --> 00:00:19,026 So realize the bar has really been set here. 6 00:00:19,626 --> 00:00:22,206 They have submitted what's perhaps the most annoying song I 7 00:00:22,206 --> 00:00:24,586 too have ever heard, but it is now as usual is linked 8 00:00:24,586 --> 00:00:25,566 on the course's home page. 9 00:00:25,566 --> 00:00:28,656 This is making use of a number of deprecated tags 10 00:00:28,656 --> 00:00:30,406 as the student herself admits. 11 00:00:30,616 --> 00:00:33,216 And it's really was, it seems, a contest between her 12 00:00:33,216 --> 00:00:37,996 and her friends to make the most striking websites possible. 13 00:00:38,056 --> 00:00:40,026 So, this is linked on the home page 14 00:00:40,026 --> 00:00:41,936 for you all to enjoy as well. 15 00:00:42,156 --> 00:00:44,556 But we had some great stuff 16 00:00:44,556 --> 00:00:46,616 in stored today starting with graphs. 17 00:00:46,916 --> 00:00:50,186 So, this is a picture that was actually presented at TED Talk, 18 00:00:50,186 --> 00:00:51,656 one of the famous series of lectures. 19 00:00:51,946 --> 00:00:54,726 It's a little grayed out here, but this fellow 20 00:00:54,726 --> 00:00:57,556 who gave this particular talk essentially screen scraped 21 00:00:57,556 --> 00:01:00,486 like 10,000 Facebook profiles or status updates to see 22 00:01:00,486 --> 00:01:03,746 when people's little heart icons were severing 23 00:01:03,746 --> 00:01:05,486 and people were breaking up on Facebook. 24 00:01:05,486 --> 00:01:08,926 And what he found was that from January through December, 25 00:01:08,926 --> 00:01:11,656 it looks like just after Valentines Day 26 00:01:11,656 --> 00:01:13,946 and over spring break is when most 27 00:01:13,946 --> 00:01:17,096 of your relationships are bound to end this year. 28 00:01:17,096 --> 00:01:20,716 So, keep an eye out of February and March of this year. 29 00:01:20,976 --> 00:01:23,336 It looks like people tend to stay together 30 00:01:23,336 --> 00:01:24,796 around the start of fall semester. 31 00:01:24,856 --> 00:01:27,896 Few of you decided to break up around Christmas time, it seems, 32 00:01:28,226 --> 00:01:30,546 but this is some interesting data nonetheless. 33 00:01:30,656 --> 00:01:33,356 I bring this up one because it's just a little fun to look at, 34 00:01:33,356 --> 00:01:37,516 but also because in the upcoming problems that five 35 00:01:37,766 --> 00:01:41,356 or sorry eight upcoming problems at 8 where we actually play 36 00:01:41,356 --> 00:01:42,796 with some visualizations. 37 00:01:42,796 --> 00:01:44,276 In fact, there's a whole course here 38 00:01:44,276 --> 00:01:45,576 in the Computer Science Department, 39 00:01:45,576 --> 00:01:48,206 Computer Science 171, Visualizations, which is really 40 00:01:48,206 --> 00:01:49,856 about empowering computer scientists 41 00:01:49,856 --> 00:01:54,436 and non-computer scientists alike with tools. 42 00:01:54,436 --> 00:01:57,826 And compelling means of presenting data visually 43 00:01:57,826 --> 00:02:00,486 in a way that the masses can actually understand. 44 00:02:00,486 --> 00:02:02,596 It's not all that helpful to be looking at thousands 45 00:02:02,596 --> 00:02:03,636 of data points generally 46 00:02:03,636 --> 00:02:05,936 in an Excel spreadsheet just adding a bit 47 00:02:06,226 --> 00:02:08,856 of visualization whether it's the familiar bar chart 48 00:02:08,856 --> 00:02:10,016 or something a little more interesting 49 00:02:10,016 --> 00:02:13,166 like the Facebook chart or yet others can really add some pop 50 00:02:13,216 --> 00:02:15,216 to one's presentation but also convey a point. 51 00:02:15,366 --> 00:02:17,536 So this is HarvardEnergy, one of CS50s apps 52 00:02:17,536 --> 00:02:18,666 as I think I've shown before. 53 00:02:18,846 --> 00:02:21,376 And this is entirely we're in on the front end 54 00:02:21,376 --> 00:02:22,776 of a language called JavaScript 55 00:02:22,776 --> 00:02:24,286 which we'll begin to look at today. 56 00:02:24,286 --> 00:02:27,176 And on the back end, it's implemented with PHP and MySQL. 57 00:02:27,176 --> 00:02:29,556 So essentially, once in a while, we synchronize 58 00:02:29,556 --> 00:02:31,986 with the big database Harvard has for all of the buildings 59 00:02:31,986 --> 00:02:35,906 on campus greenhouse gas emissions and the electrical use 60 00:02:35,906 --> 00:02:39,016 and the water use, and so forth, and then we store all 61 00:02:39,016 --> 00:02:41,846 that information in a database, and then we allow people like us 62 00:02:41,876 --> 00:02:44,656 to then search and explore that data visually. 63 00:02:44,656 --> 00:02:46,456 And we do all of these by generating all 64 00:02:46,456 --> 00:02:47,826 of these charts dynamically. 65 00:02:47,826 --> 00:02:51,116 There's none of us sitting there with Microsoft Excel or numbers 66 00:02:51,116 --> 00:02:53,006 of the like and creating GIFs and JPEGs 67 00:02:53,006 --> 00:02:54,716 and then uploading them to the server 68 00:02:54,716 --> 00:02:55,736 and changing this every month. 69 00:02:55,966 --> 00:02:57,356 It's all completely automated. 70 00:02:57,466 --> 00:03:00,966 These web pages written in PHP, query a database, 71 00:03:00,966 --> 00:03:02,446 ask for just a bunch of numbers, 72 00:03:02,636 --> 00:03:05,186 and then output some programming code called JavaScript 73 00:03:05,366 --> 00:03:07,626 that then renders these visuals here. 74 00:03:07,626 --> 00:03:11,616 So for instance, these are the greenhouse gas equivalents 75 00:03:11,866 --> 00:03:13,816 that are omitted by the houses and dorms. 76 00:03:14,056 --> 00:03:15,386 Notice here we have a little toolbar 77 00:03:15,386 --> 00:03:17,376 that you can drag and drop. 78 00:03:17,376 --> 00:03:20,026 And what's neat about this is that all of this is client side. 79 00:03:20,026 --> 00:03:23,536 What you're doing for P Set 7 is pretty much entirely server side 80 00:03:23,536 --> 00:03:25,716 whereby any changes to the user screen, 81 00:03:25,936 --> 00:03:27,576 you're generating server side 82 00:03:27,576 --> 00:03:29,186 and then the browser are showing the results. 83 00:03:29,526 --> 00:03:31,656 Here the servers are not even being contacted. 84 00:03:31,656 --> 00:03:33,396 All the data has been downloaded in advance. 85 00:03:33,646 --> 00:03:36,086 And so when I click and drag on this little knob here, 86 00:03:36,276 --> 00:03:38,656 what's happening is I've written some JavaScript code 87 00:03:38,836 --> 00:03:41,606 that also gets downloaded to the user's browser, 88 00:03:42,116 --> 00:03:45,816 and this JavaScript code is running all the time listening 89 00:03:45,816 --> 00:03:48,756 and waiting for human like me to click and drag 90 00:03:48,756 --> 00:03:49,926 and interact with the web page. 91 00:03:49,926 --> 00:03:52,416 And as soon as it detects such an event, if you recall 92 00:03:52,416 --> 00:03:55,386 that jargon from P Set 0 in our scratch days, 93 00:03:55,646 --> 00:03:57,216 it then responds to that event. 94 00:03:57,216 --> 00:03:59,166 And so the event I just triggered here was click 95 00:03:59,546 --> 00:04:00,426 and drag. 96 00:04:00,426 --> 00:04:01,616 And so what you'll find is 97 00:04:01,646 --> 00:04:04,216 that as your web sites gets more interactive, 98 00:04:04,216 --> 00:04:07,016 and even after the course they get even more dynamic, 99 00:04:07,296 --> 00:04:09,386 you'll find that a lot of programming when it comes 100 00:04:09,386 --> 00:04:12,976 to interacting with users is about this event listening model 101 00:04:12,976 --> 00:04:16,296 where you create a lot of mechanisms in your page 102 00:04:16,296 --> 00:04:18,526 and your application that's just listening for something 103 00:04:18,526 --> 00:04:20,996 to happen and you write functions or methods 104 00:04:20,996 --> 00:04:23,346 as they're sometimes called that who's purpose in life is 105 00:04:23,346 --> 00:04:25,446 to respond to those human interactions. 106 00:04:25,446 --> 00:04:27,346 So, there's actually some neat data in here. 107 00:04:27,346 --> 00:04:29,906 If you jump to something like Mather House, you can dive 108 00:04:29,906 --> 00:04:32,136 in deeper and see more information, 109 00:04:32,676 --> 00:04:35,606 if my internet connection here cooperates. 110 00:04:35,946 --> 00:04:37,196 Come on. Yup. 111 00:04:37,196 --> 00:04:38,606 So what you'll see here is that all 112 00:04:38,606 --> 00:04:40,696 of these charts too were dynamically generated, 113 00:04:40,696 --> 00:04:42,416 and one of my favorites is this one down here. 114 00:04:42,416 --> 00:04:44,226 This is what the author calls a digraph. 115 00:04:44,466 --> 00:04:46,036 It too is implemented in JavaScript. 116 00:04:46,206 --> 00:04:48,236 And not only is it interactive and that you can hover 117 00:04:48,236 --> 00:04:50,186 over these points and immediately see results. 118 00:04:50,346 --> 00:04:51,386 I'm not clicking submit. 119 00:04:51,386 --> 00:04:53,866 I'm not getting a more HTML back from the server. 120 00:04:54,056 --> 00:04:57,426 You can even do neat things and zoom in, for instance, on 2004 121 00:04:57,546 --> 00:05:01,236 and see these same data points rendered all the more up close. 122 00:05:01,366 --> 00:05:04,026 And what's neat is that it's pretty much instantaneous. 123 00:05:04,026 --> 00:05:06,016 And so, a lot of the features you're seeing in Facebook, 124 00:05:06,016 --> 00:05:08,216 in Gmail, and these other web sites rolling out, 125 00:05:08,356 --> 00:05:10,516 are so immediate in terms of the response 126 00:05:10,756 --> 00:05:12,516 because a lot more is being done client side. 127 00:05:12,516 --> 00:05:15,196 And so what we'll do this week is introduce this language 128 00:05:15,196 --> 00:05:18,406 called JavaScript so that you too can begin to implement some 129 00:05:18,406 --> 00:05:21,886 of these increasingly familiar UI mechanisms so not every one 130 00:05:21,886 --> 00:05:24,336 of your web sites has to look, you know, dynamic, 131 00:05:24,636 --> 00:05:27,256 but nonetheless, kind of primitive 132 00:05:27,256 --> 00:05:28,646 like you'll eventually realize 133 00:05:28,676 --> 00:05:30,876 that something like CS50 Finance is. 134 00:05:30,876 --> 00:05:32,536 So, it might all very well be new to you now, 135 00:05:32,856 --> 00:05:34,836 but realize that we're just scratching the surface of some 136 00:05:34,836 --> 00:05:37,786 of the capabilities of today's web, and we're gonna do this 137 00:05:37,786 --> 00:05:40,266 with P Set 8 with something called Google Chart Tool. 138 00:05:40,266 --> 00:05:43,396 So, there's thankful so much free software and free APIs, 139 00:05:43,766 --> 00:05:45,386 application programming interfaces, 140 00:05:45,386 --> 00:05:48,466 out there with which we can then make more interesting 141 00:05:48,466 --> 00:05:50,636 applications by not having to implement everything 142 00:05:50,636 --> 00:05:51,856 from the ground up ourselves. 143 00:05:52,106 --> 00:05:53,246 And so Google, for instance, 144 00:05:53,246 --> 00:05:55,486 provides what they call Image Charts at the top. 145 00:05:55,696 --> 00:05:59,126 These are what [inaudible] would use this for I Saw You Harvard 146 00:05:59,126 --> 00:06:01,386 to generate the male/female statistics that you looked 147 00:06:01,386 --> 00:06:02,706 at for in earlier P Sets. 148 00:06:03,046 --> 00:06:05,066 And then these interactive charts which we'll use 149 00:06:05,106 --> 00:06:07,776 for these P Sets coming up are interactive 150 00:06:07,826 --> 00:06:11,276 and that they're entirely JavaScript, or in a few cases, 151 00:06:11,346 --> 00:06:13,566 Flash-based, but we'll focus on the JavaScript ones, 152 00:06:13,866 --> 00:06:17,476 and you can do very neat things besides the digraphs we saw, 153 00:06:17,476 --> 00:06:19,026 besides the bar charts. 154 00:06:19,026 --> 00:06:22,216 You can even do silly things like-- where's one of these-- 155 00:06:22,256 --> 00:06:25,516 piles of money whereby you can generate dynamically bigger 156 00:06:25,516 --> 00:06:27,956 and bigger piles of money relative to the actual numbers 157 00:06:27,956 --> 00:06:29,506 that you provide from your application, 158 00:06:29,756 --> 00:06:32,776 and then there are fun ones as well that are certainly common 159 00:06:32,776 --> 00:06:35,126 on today's web like actually being able to embed maps 160 00:06:35,406 --> 00:06:37,356 of your own local area or something 161 00:06:37,356 --> 00:06:38,836 of interest in your own web page. 162 00:06:38,836 --> 00:06:41,126 This stuff is actually relatively easy 163 00:06:41,126 --> 00:06:41,886 to do these days. 164 00:06:41,966 --> 00:06:43,036 Thanks to these APIs. 165 00:06:43,316 --> 00:06:44,566 So we'll get a taste of that there. 166 00:06:44,976 --> 00:06:48,576 Also, a couple of FAQ. 167 00:06:48,736 --> 00:06:51,316 So one thing that's been a recurring question is something 168 00:06:51,316 --> 00:06:57,286 like this, if I go to let's say go to cloud.cs50.net 169 00:06:58,006 --> 00:06:59,786 until the CS50 P Set 7. 170 00:06:59,786 --> 00:07:01,036 Okay, that doesn't exist. 171 00:07:01,036 --> 00:07:02,286 CS50.net Finance. 172 00:07:02,596 --> 00:07:05,066 So, I'm gonna go to our-- the staff's version of CS50 Finance. 173 00:07:05,246 --> 00:07:07,426 One of the gotchas a lot of you are running into is 174 00:07:07,426 --> 00:07:11,256 that you wanna validate your code using the W3Cs validator. 175 00:07:11,256 --> 00:07:12,976 That's the World Wide Web Consortium. 176 00:07:12,976 --> 00:07:15,416 These are just nice volunteers who essentially over the course 177 00:07:15,416 --> 00:07:18,026 of time, craft today's standards 178 00:07:18,026 --> 00:07:20,246 for various languages among them HTML. 179 00:07:20,546 --> 00:07:22,696 So some of you have been trying to validate you're code 180 00:07:22,696 --> 00:07:26,156 but realized when we say your code-- telephone call. 181 00:07:26,496 --> 00:07:28,326 When you say your code must be valid, 182 00:07:28,606 --> 00:07:31,246 this means not your PHP code per se 183 00:07:31,406 --> 00:07:33,106 but the HTML that it generates. 184 00:07:33,106 --> 00:07:34,816 So if you've found yourself copying 185 00:07:34,816 --> 00:07:39,716 and pasting your raw PHP files code into the W3Cs validator, 186 00:07:39,986 --> 00:07:41,676 that's not what you should actually be doing. 187 00:07:41,676 --> 00:07:43,916 In fact, you're pretty much telling those nice volunteers 188 00:07:43,916 --> 00:07:47,856 all of the good or bad code that you've been writing by doing so. 189 00:07:47,906 --> 00:07:50,706 Rather what you should be doing is visiting your web page 190 00:07:50,706 --> 00:07:53,366 with the browser and then going to say, the-- 191 00:07:53,576 --> 00:07:56,686 whichever menu's appropriate, the View Menu or such and going 192 00:07:56,686 --> 00:07:59,916 to View Page Source, and only copying and pasting the output, 193 00:07:59,966 --> 00:08:01,986 because when we talk about the validity of HTML, 194 00:08:02,256 --> 00:08:03,836 we really mean the client side stuff 195 00:08:03,836 --> 00:08:06,276 that hits the actual browser where it's important for it 196 00:08:06,276 --> 00:08:09,146 to be really right so that various browsers all display 197 00:08:09,146 --> 00:08:09,736 it differently. 198 00:08:10,006 --> 00:08:10,796 But there is a gotcha. 199 00:08:10,796 --> 00:08:13,536 So CS50 Finance obviously requires authentication, 200 00:08:13,936 --> 00:08:16,736 and so you can't just paste the URLs of your web pages 201 00:08:16,956 --> 00:08:20,186 into the validator site because obviously, they, like a human, 202 00:08:20,186 --> 00:08:22,626 will be redirected to Login.PHP, 203 00:08:22,926 --> 00:08:24,826 so they can't see all of your HTML. 204 00:08:25,156 --> 00:08:27,186 But realize one of the tools that we recommended 205 00:08:27,186 --> 00:08:30,336 for this problem set is something called Web 206 00:08:30,336 --> 00:08:31,536 Developer Toolbar. 207 00:08:31,536 --> 00:08:33,106 It's a free download for Firefox. 208 00:08:33,356 --> 00:08:36,586 And what it adds to your browser is this little menu here, 209 00:08:36,586 --> 00:08:38,406 things like resize, things 210 00:08:38,406 --> 00:08:40,426 like miscellaneous tools and the like. 211 00:08:40,686 --> 00:08:42,716 And under Tools, you'll see a few options. 212 00:08:42,986 --> 00:08:45,306 One of them is Validate Local HTML. 213 00:08:45,576 --> 00:08:49,276 What's really nice here is that you can log in to CS50 Finance, 214 00:08:49,276 --> 00:08:52,826 visit any of your pages, and then just go to Tools, 215 00:08:52,926 --> 00:08:56,146 Validate Local HTML, and the plug-in will automate the 216 00:08:56,146 --> 00:08:58,556 process of copying and pasting all of your code 217 00:08:58,756 --> 00:08:59,986 into the validator sites. 218 00:08:59,986 --> 00:09:01,556 You don't have to jump through these hoops yourself. 219 00:09:01,556 --> 00:09:02,996 It's a wonderful useful development tool. 220 00:09:03,206 --> 00:09:05,156 And those of you thinking about final projects 221 00:09:05,156 --> 00:09:07,536 and entrepreneurial projects down the road realize 222 00:09:07,536 --> 00:09:08,526 that even simple things 223 00:09:08,526 --> 00:09:10,556 like this are hugely useful these days. 224 00:09:10,596 --> 00:09:13,216 The resize tool here is just a little plug-in 225 00:09:13,386 --> 00:09:15,336 that will immediately resize your browser 226 00:09:15,336 --> 00:09:16,556 to be a specific size. 227 00:09:16,556 --> 00:09:20,066 And this is useful so that if you are one of this people 228 00:09:20,066 --> 00:09:23,196 who has a 30-inch monitor, it's not that great 229 00:09:23,196 --> 00:09:26,196 to design a web site with 30-inch monitor users in mind 230 00:09:26,196 --> 00:09:28,596 because most of people don't have monitors this large, 231 00:09:28,596 --> 00:09:29,726 and so the page, they're gonna have 232 00:09:29,726 --> 00:09:31,136 to scroll horizontally, vertically. 233 00:09:31,136 --> 00:09:31,946 It's gonna be a real mess. 234 00:09:32,366 --> 00:09:34,966 So generally when I develop some web application, 235 00:09:35,196 --> 00:09:38,486 I resize the window to some fixed size like 1024 236 00:09:38,486 --> 00:09:41,646 by 768 pixels across and down and that happens 237 00:09:41,696 --> 00:09:44,266 to still be sort of the lowest common denominator at least 238 00:09:44,266 --> 00:09:45,396 with modern computers. 239 00:09:45,396 --> 00:09:48,296 So thankfully, our screens are getting bigger and bigger. 240 00:09:48,296 --> 00:09:50,406 So realize there are some wonderful useful tools 241 00:09:50,406 --> 00:09:53,686 to take the tedium out of some of these processes. 242 00:09:54,016 --> 00:09:55,866 Alright. So what are the common things 243 00:09:55,866 --> 00:09:57,026 that folks are encountering? 244 00:09:57,616 --> 00:09:59,026 Well, how about messages like this? 245 00:09:59,366 --> 00:10:00,946 So no joke, this happened to me this morning 246 00:10:00,946 --> 00:10:02,706 and there's nothing more infuriating when you don't know 247 00:10:02,706 --> 00:10:04,076 like what you're supposed to do for the day, 248 00:10:04,276 --> 00:10:05,536 when you visit Google Calendar 249 00:10:05,536 --> 00:10:07,956 and you're told Google Calendar is not found. 250 00:10:08,186 --> 00:10:11,366 >> So, this code 404 is something that's not uncommon 251 00:10:11,366 --> 00:10:14,076 on the web either because a page has been deleted 252 00:10:14,076 --> 00:10:15,316 or the user made a mistake. 253 00:10:15,316 --> 00:10:18,406 404 is the arcane number that's been assigned to-- 254 00:10:18,626 --> 00:10:20,246 assigned to the concept of 255 00:10:20,326 --> 00:10:22,806 "File Does Not Exist" or "URL is invalid." 256 00:10:22,806 --> 00:10:25,666 In short, whatever URL you try to visit, in this case, 257 00:10:25,666 --> 00:10:26,926 Google Calendar this morning. 258 00:10:27,246 --> 00:10:29,546 Someone accidentally deleted Google Calendar it seems 259 00:10:29,546 --> 00:10:33,436 and the file was not found, index.php or index.html 260 00:10:33,436 --> 00:10:35,496 or whatever language they happen to be using. 261 00:10:35,806 --> 00:10:37,716 Now, this is presumably some other weird 262 00:10:37,716 --> 00:10:38,766 configuration errors. 263 00:10:38,766 --> 00:10:40,856 It's probably no one deleted Google Calendar, 264 00:10:41,106 --> 00:10:43,876 but other popular mistakes that some of you might be seeing 265 00:10:43,876 --> 00:10:45,936 in your own code or others are these. 266 00:10:45,936 --> 00:10:48,386 So, 401 refers to unauthorized. 267 00:10:48,636 --> 00:10:50,656 If you ever visit a page that's supposed 268 00:10:50,656 --> 00:10:52,266 to be password protected in some way 269 00:10:52,266 --> 00:10:54,366 and you've not provided the right username and password, 270 00:10:54,626 --> 00:10:56,126 you often see this arcane code. 271 00:10:56,396 --> 00:10:57,666 403, forbidden. 272 00:10:57,666 --> 00:11:00,506 This usually has to relate to a chmod error on your part. 273 00:11:00,506 --> 00:11:02,436 At least in our context of web development, 274 00:11:02,666 --> 00:11:05,046 you've not chmoded a GIF file or a PNG. 275 00:11:05,086 --> 00:11:08,646 644 or directory 711. 276 00:11:08,846 --> 00:11:09,976 And again, you'll get accustomed 277 00:11:09,976 --> 00:11:12,606 to these arcane numbers overtime, but just refer back 278 00:11:12,856 --> 00:11:14,946 to P Set 7 spec for what command's the right 279 00:11:14,946 --> 00:11:15,476 to fix those. 280 00:11:15,746 --> 00:11:17,436 And 500 is generally pretty bad. 281 00:11:17,436 --> 00:11:19,906 That means there's some non-trivial problem wrong 282 00:11:19,906 --> 00:11:22,606 in the code that drives the page you're trying to visit, 283 00:11:22,846 --> 00:11:24,876 but realized there are dozens of other codes 284 00:11:25,016 --> 00:11:27,956 that relate to status messages. 285 00:11:28,216 --> 00:11:30,006 These are just some of the most popular. 286 00:11:30,236 --> 00:11:32,966 And two more FAQs if I may. 287 00:11:33,556 --> 00:11:37,116 So, you'll see in the spec for the problem set 288 00:11:37,116 --> 00:11:39,056 or rather the distribution code for the problem set 289 00:11:39,296 --> 00:11:43,146 that we make use of things like post or get, 290 00:11:43,306 --> 00:11:45,536 but also we make use of something called session. 291 00:11:45,676 --> 00:11:49,076 So, dollar sign underscore session is another superglobal 292 00:11:49,116 --> 00:11:51,576 in PHP whose purposes in life is really just 293 00:11:51,576 --> 00:11:54,866 to be some storage space for any data you wanna put in there. 294 00:11:54,866 --> 00:11:56,666 You can put any key value pairs. 295 00:11:56,666 --> 00:11:58,146 And in P Set 7, what do we 296 00:11:58,146 --> 00:11:59,906 in the distro [phonetic] code use session for? 297 00:12:00,806 --> 00:12:02,046 >> For the cache ID. 298 00:12:02,046 --> 00:12:02,996 >> The cache ID, yes. 299 00:12:02,996 --> 00:12:06,686 So, once the user logs in, they have a user ID, UID field, 300 00:12:06,686 --> 00:12:07,666 which is just a number. 301 00:12:07,836 --> 00:12:10,836 And so if you look at the logging code that we gave 302 00:12:10,836 --> 00:12:13,396 to you, you'll see that with just one line of code, 303 00:12:13,396 --> 00:12:15,516 we're doing something that looks like this - 304 00:12:15,716 --> 00:12:19,186 dollar sign underscore session "UID" equals 123, 305 00:12:19,186 --> 00:12:23,796 where 123 is actually a variable in the code that happens 306 00:12:23,826 --> 00:12:25,656 to be the current user's user ID. 307 00:12:25,856 --> 00:12:29,296 What's really nice about this session superglobal is 308 00:12:29,296 --> 00:12:32,796 that even though HTTP is what we've called a stateless 309 00:12:32,796 --> 00:12:36,346 protocol whereby you visit a page, little icon spins 310 00:12:36,346 --> 00:12:38,296 around saying downloading page, downloading page, 311 00:12:38,296 --> 00:12:40,846 and then the icon stops because the page has been downloaded, 312 00:12:41,056 --> 00:12:43,876 thereby severing the connection between browser and server, 313 00:12:44,186 --> 00:12:47,226 well, this session superglobal is really neat 314 00:12:47,436 --> 00:12:50,776 because what happens is the next time the user visits a web page, 315 00:12:51,016 --> 00:12:56,256 they are-- their identity is inferred just based 316 00:12:56,256 --> 00:12:58,656 on the web server having seen that user before, 317 00:12:58,656 --> 00:13:02,156 and me the programmer, enhance it, the same superglobal 318 00:13:02,156 --> 00:13:05,146 and the same contents for that particular user. 319 00:13:05,146 --> 00:13:07,216 So even though the protocol is stateless, 320 00:13:07,506 --> 00:13:09,006 I disconnect from the server. 321 00:13:09,006 --> 00:13:11,776 Every time I'm finished look-- downloading a web page, 322 00:13:12,116 --> 00:13:15,176 the session superglobal creates the illusion for me, 323 00:13:15,176 --> 00:13:18,436 the programmer, that I can still store information 324 00:13:18,436 --> 00:13:19,936 for this specific user. 325 00:13:20,146 --> 00:13:23,306 And so even though in my code I'm only ever saying dollar sign 326 00:13:23,306 --> 00:13:26,226 underscore session, I essentially get a unique copy 327 00:13:26,226 --> 00:13:28,246 of this superglobal for every one 328 00:13:28,246 --> 00:13:30,136 of my unique users on the internet. 329 00:13:30,506 --> 00:13:31,556 So, this begs the question, 330 00:13:31,556 --> 00:13:36,066 how in the world does the server handing me the right session 331 00:13:36,066 --> 00:13:38,256 superglobal for a given user? 332 00:13:38,256 --> 00:13:41,316 How does PHP, how does the web server remember 333 00:13:41,766 --> 00:13:43,836 to which user each of these copies 334 00:13:43,836 --> 00:13:45,216 of session actually belongs? 335 00:13:45,346 --> 00:13:45,616 >> Cookies. 336 00:13:46,056 --> 00:13:47,816 >> Yeah. So in fact it is cookies, right? 337 00:13:47,816 --> 00:13:49,836 So, recall our discussion last week of Firesheep, 338 00:13:50,096 --> 00:13:52,916 all these freaking out that people are having over Firesheep 339 00:13:52,916 --> 00:13:54,186 and session hijacking. 340 00:13:54,406 --> 00:13:55,946 When we say session hijacking, 341 00:13:56,226 --> 00:13:58,346 there is the session that's being hijacked 342 00:13:58,346 --> 00:13:59,466 in the context of PHP. 343 00:13:59,466 --> 00:14:01,406 It's called different things in different languages. 344 00:14:01,406 --> 00:14:04,366 But in the context of PHP, this is just the superglobal. 345 00:14:04,566 --> 00:14:06,956 And so, if any of your friends have maliciously logged 346 00:14:06,956 --> 00:14:08,706 in to your Facebook or other account, 347 00:14:09,216 --> 00:14:12,136 what's happening is the web server, Facebook.com, 348 00:14:12,386 --> 00:14:18,916 is presenting to that user the contents of your superglobal. 349 00:14:18,916 --> 00:14:21,216 And so, because your user ID is in there, 350 00:14:21,216 --> 00:14:23,936 because maybe your friend's list and stuff like that is in there, 351 00:14:23,936 --> 00:14:26,836 well that's not necessarily the case, that's how the user, 352 00:14:26,836 --> 00:14:29,086 your friend, is able to see everything 353 00:14:29,156 --> 00:14:30,476 that you are actually seeing. 354 00:14:30,476 --> 00:14:32,486 And so, how is this thing ultimately implemented? 355 00:14:32,486 --> 00:14:33,316 Yes with cookies. 356 00:14:33,596 --> 00:14:35,956 So, when you're requesting a web page 357 00:14:35,956 --> 00:14:38,326 and that cookie is going back and forth across the wire 358 00:14:38,326 --> 00:14:40,526 that we discussed last week that handstamp, so to speak, 359 00:14:40,956 --> 00:14:44,676 that cookie, that big random number is the only thing via 360 00:14:44,676 --> 00:14:47,256 which this abstraction, 361 00:14:47,336 --> 00:14:50,136 this superglobal is actually implemented. 362 00:14:50,326 --> 00:14:51,856 But that's all that it boils down to. 363 00:14:51,856 --> 00:14:54,506 But you'll notice, and this probably will happen to Facebook 364 00:14:54,506 --> 00:14:56,476 in due time, even we, 365 00:14:56,476 --> 00:14:58,656 on the course's home page started doing this literally 366 00:14:58,656 --> 00:14:59,506 after that lecture. 367 00:14:59,756 --> 00:15:00,826 You'll find that everything 368 00:15:00,826 --> 00:15:04,596 about CS50 now runs over SSL-http://. 369 00:15:04,776 --> 00:15:08,076 And we also reconfigured the server to make sure 370 00:15:08,076 --> 00:15:11,456 that anytime we send a session cookie to a user, 371 00:15:11,456 --> 00:15:13,636 a big random number, we will only send 372 00:15:13,636 --> 00:15:16,046 that session cookie if it's over https. 373 00:15:16,606 --> 00:15:20,316 So, if you read in the media that some sites kind of use SSL 374 00:15:20,316 --> 00:15:24,546 but not entirely, generally, they are only kind of using SSL 375 00:15:24,786 --> 00:15:27,466 because they're misconfigured or there's foolishly configured 376 00:15:27,466 --> 00:15:30,306 in such a way that if you manually visit, say, 377 00:15:30,416 --> 00:15:32,136 CS50.net and hit Enter. 378 00:15:32,416 --> 00:15:34,486 Because you're not explicitly saying https, 379 00:15:34,766 --> 00:15:36,266 a foolish server would say, oh, 380 00:15:36,266 --> 00:15:38,466 here's the cookie you'd wanted me to remember. 381 00:15:38,866 --> 00:15:42,356 And in that sense, session can be hijacked 'cause it's not 382 00:15:42,356 --> 00:15:45,676 gonna be encrypted until I get bounced to the https-based URL. 383 00:15:46,356 --> 00:15:48,646 So in short, all of the things you've been reading about 384 00:15:48,646 --> 00:15:52,306 or worrying about on campus are really reduced 385 00:15:52,526 --> 00:15:55,556 to a very simple variable, at least of the web sites written 386 00:15:55,636 --> 00:15:59,896 in PHP called dollar-- dollar sign underscore session. 387 00:16:00,746 --> 00:16:04,716 Lastly, one other trick just to plants the idea in your head, 388 00:16:04,716 --> 00:16:06,846 a lot of you were doing things like this, seek-- 389 00:16:06,846 --> 00:16:10,716 dollar sign SQL for SQL which is just a variable name here, 390 00:16:10,916 --> 00:16:13,646 you might do something like this, select star from users, 391 00:16:13,786 --> 00:16:15,176 let's just come up with a quick query. 392 00:16:15,496 --> 00:16:17,546 But suppose you wanna get a specific user, 393 00:16:17,546 --> 00:16:20,226 so you're probably not just getting star from users, 394 00:16:20,226 --> 00:16:25,026 you're getting star from users where user ID equals 123. 395 00:16:25,296 --> 00:16:28,686 But unfortunately, you're not just writing 123 in your code, 396 00:16:28,686 --> 00:16:30,826 the user's ID is of course invariable. 397 00:16:31,116 --> 00:16:33,306 In fact, it's in this variable here. 398 00:16:33,556 --> 00:16:35,496 So, a lot of you are running into the gotcha 399 00:16:35,496 --> 00:16:37,846 where you very reasonably paced that right 400 00:16:37,846 --> 00:16:39,906 into the string thinking alright, well, 401 00:16:39,906 --> 00:16:43,186 this is just a variable, so much like in PHPs-- 402 00:16:43,616 --> 00:16:46,936 examples we've seen before, dollar sign underscore session 403 00:16:46,936 --> 00:16:50,166 "UID" will just get turned to 123. 404 00:16:50,556 --> 00:16:52,256 But frankly because of the double quotes 405 00:16:52,256 --> 00:16:53,976 that are inside there, these things here, 406 00:16:53,976 --> 00:16:55,196 because of the square brackets, 407 00:16:55,546 --> 00:16:58,106 PHP just gets confused by this syntax. 408 00:16:58,336 --> 00:16:59,416 So, there are two solutions. 409 00:16:59,466 --> 00:17:00,806 This is not the right way to do it. 410 00:17:00,806 --> 00:17:04,036 You will get some kind of parse error, some kind of read error. 411 00:17:04,276 --> 00:17:06,396 A right way to do this would be to just put 412 00:17:06,836 --> 00:17:09,926 that superglobal variable inside of curly braces 413 00:17:10,096 --> 00:17:12,736 which says here's something special, don't get confused 414 00:17:12,736 --> 00:17:14,146 by the weird syntax inside. 415 00:17:14,436 --> 00:17:15,106 Or you can use 416 00:17:15,106 --> 00:17:18,236 that concatenation operator we saw the other day which allows-- 417 00:17:18,236 --> 00:17:21,496 would allow us to do something like equals, quote, dot, 418 00:17:21,996 --> 00:17:24,756 and then you concatenate in this variable like this. 419 00:17:25,206 --> 00:17:28,376 So, all-- both of these latter two examples has the end result 420 00:17:28,376 --> 00:17:30,676 of creating one string that represents the SQL query, 421 00:17:30,856 --> 00:17:32,746 and you avoid this parse error that a lot 422 00:17:32,746 --> 00:17:35,466 of you are running into. 423 00:17:35,646 --> 00:17:35,776 Yes? 424 00:17:36,516 --> 00:17:43,716 [ Inaudible Remark ] 425 00:17:44,216 --> 00:17:47,056 >> It is a designed decision that the authors of PHP made 426 00:17:47,096 --> 00:17:48,646 in that this is ambiguous. 427 00:17:48,736 --> 00:17:51,146 Now that we have double quotes inside of double quotes 428 00:17:51,186 --> 00:17:52,586 and we have square braces here, 429 00:17:52,876 --> 00:17:54,666 they just made the design decision that, um-um, 430 00:17:54,806 --> 00:17:55,896 this could be ambiguous, 431 00:17:55,896 --> 00:17:58,076 we don't want it misinterpret this phrase 432 00:17:58,346 --> 00:18:01,766 and so we will require that PHP programmers use curly braces 433 00:18:01,766 --> 00:18:04,356 to avoid this ambiguity for simpler variables. 434 00:18:04,356 --> 00:18:08,276 If the variable is simply dollar sign X, it is perfectly okay 435 00:18:08,276 --> 00:18:11,886 and arguably much more readable just to say this, that is okay 436 00:18:11,886 --> 00:18:14,816 because there's no weird syntax there, there's no ambiguity, 437 00:18:15,056 --> 00:18:16,916 there's no risk of misinterpretation. 438 00:18:16,966 --> 00:18:18,306 So, it was just a design decision. 439 00:18:18,636 --> 00:18:21,666 And lastly, a reference that can be very helpful. 440 00:18:21,706 --> 00:18:23,736 We point you to this 441 00:18:23,736 --> 00:18:27,486 in the specification quite often throughout the PDF but realize 442 00:18:27,486 --> 00:18:31,546 that PHP.net is one of the reasons that we use PHP 443 00:18:31,546 --> 00:18:33,976 as the language of choice toward the end of the semester 444 00:18:34,236 --> 00:18:38,166 because it's so relatively easy to teach yourself based 445 00:18:38,166 --> 00:18:40,296 on examples and based on documentation. 446 00:18:40,296 --> 00:18:43,216 And frankly, of all the languages I've ever learned 447 00:18:43,216 --> 00:18:43,876 or taught myself, 448 00:18:44,226 --> 00:18:46,526 PHP's documentation is probably the best, 449 00:18:46,526 --> 00:18:49,786 even better than Java's JavaTalk because it's rich 450 00:18:49,786 --> 00:18:51,016 with many more examples. 451 00:18:51,016 --> 00:18:54,196 For instance, if I forget how PHP's date function works, 452 00:18:54,546 --> 00:18:56,056 almost always can you Google it. 453 00:18:56,056 --> 00:18:59,796 You'll find a link leading you to PHP.net and every one 454 00:18:59,796 --> 00:19:01,726 of these pages follows a standard format. 455 00:19:01,726 --> 00:19:03,326 You'll see the name of the function here. 456 00:19:03,596 --> 00:19:06,246 You'll see the version that a PHP that supports this, 457 00:19:06,246 --> 00:19:09,056 which is only relevant if we're gonna be developing a website 458 00:19:09,056 --> 00:19:10,066 on an older server. 459 00:19:10,536 --> 00:19:12,636 This is the prototype for the function. 460 00:19:12,836 --> 00:19:16,746 Even though PHP doesn't require that you specify data types, 461 00:19:17,086 --> 00:19:20,206 the language itself knows that there are different data types. 462 00:19:20,206 --> 00:19:23,066 So, the documentation makes clear what those data types are. 463 00:19:23,386 --> 00:19:25,256 You get a list of all of the parameters 464 00:19:25,256 --> 00:19:26,816 and the format strings and such much 465 00:19:26,816 --> 00:19:28,036 like you would in a man page. 466 00:19:28,266 --> 00:19:29,556 But the most compelling thing, 467 00:19:29,676 --> 00:19:32,246 and the thing I frankly almost always jumped to first, 468 00:19:32,496 --> 00:19:34,706 is that you almost always get one or more examples 469 00:19:34,706 --> 00:19:37,406 where just a real person has written a very common example 470 00:19:37,636 --> 00:19:39,416 with instructions and with comments, 471 00:19:39,556 --> 00:19:41,866 and you can just learn frankly by a lot of examples. 472 00:19:41,866 --> 00:19:43,346 So, don't underestimate the value 473 00:19:43,596 --> 00:19:45,346 of this particular resource. 474 00:19:45,726 --> 00:19:49,096 So, with those building blocks, what can you start to do? 475 00:19:49,216 --> 00:19:52,016 Well, realize the web is getting much more interesting, 476 00:19:52,016 --> 00:19:54,126 and we've introduced this idea of HTML5 477 00:19:54,776 --> 00:19:57,096 which hasn't actually been finalized as a standard, 478 00:19:57,096 --> 00:19:59,976 but the world is really clamoring to implement some new 479 00:19:59,976 --> 00:20:02,526 and fancy features into the HTML language 480 00:20:02,766 --> 00:20:05,826 so that we can move away from using proprietary software 481 00:20:05,826 --> 00:20:07,606 like Adobe Flash, which requires 482 00:20:07,606 --> 00:20:09,846 that the user manually download some additional software 483 00:20:09,846 --> 00:20:12,966 and the like, requires that the program in a different language. 484 00:20:13,066 --> 00:20:15,126 >> And so HTML5, one of its goals is 485 00:20:15,126 --> 00:20:17,816 to make the web even more dynamic and so realize 486 00:20:17,816 --> 00:20:19,986 with this last problems that in this last couple of weeks 487 00:20:20,236 --> 00:20:21,856 where we begin to scratch the surface 488 00:20:21,856 --> 00:20:24,256 of frankly what the web will probably be and remain 489 00:20:24,496 --> 00:20:25,586 for a couple of years. 490 00:20:25,776 --> 00:20:27,246 This is for instance some 491 00:20:27,246 --> 00:20:29,776 of the new capabilities of video in HTML5. 492 00:20:29,836 --> 00:20:33,096 So this is I think the trailer for a movie called Tron 493 00:20:33,096 --> 00:20:35,716 or remake thereof, but what's neat is that built 494 00:20:35,716 --> 00:20:38,126 into the language is this ability-- 495 00:20:38,296 --> 00:20:42,996 built into HTML is the ability with code on the client side 496 00:20:43,186 --> 00:20:47,076 to just do things like this, arbitrarily cropped 497 00:20:47,076 --> 00:20:49,806 out some part of it, changed the prospective on the fly 498 00:20:50,056 --> 00:20:52,216 without having to download special software 499 00:20:52,216 --> 00:20:53,356 with which to do all of that. 500 00:20:53,606 --> 00:20:57,116 You can do things like transitions much more easily 501 00:20:57,116 --> 00:20:59,826 which up until now had required plug-ins like Adobe Flash 502 00:21:00,196 --> 00:21:02,246 and I realize much like with PowerPoint, 503 00:21:02,286 --> 00:21:04,106 these things can be very quickly abused. 504 00:21:04,106 --> 00:21:05,716 I'm not sure I would get into the habit 505 00:21:06,016 --> 00:21:08,246 of making my webpage do this all the time [laughter]. 506 00:21:08,386 --> 00:21:10,486 It's very easy to annoy users 507 00:21:10,486 --> 00:21:13,246 but you can do really cool things. 508 00:21:13,486 --> 00:21:16,546 This is one-- that-- one-- the TFs just discovered, 509 00:21:16,546 --> 00:21:17,526 it just introduced me to. 510 00:21:17,756 --> 00:21:20,856 This is a chat room implemented entirely with JavaScript. 511 00:21:21,446 --> 00:21:23,846 This is not what you think it is but [laughter]. 512 00:21:24,136 --> 00:21:27,816 There is an explanation for this. 513 00:21:27,816 --> 00:21:29,876 It's a little chat room so I'm gonna change my name 514 00:21:29,876 --> 00:21:31,196 to let's say, Sanders. 515 00:21:31,196 --> 00:21:31,966 Oh, here comes the TF 516 00:21:32,876 --> 00:21:37,146 and [laughter] it's a virtual chat room where I can then say, 517 00:21:37,146 --> 00:21:41,506 "Hey, Rose," and we can all meet-- and oh there's Thomas. 518 00:21:41,796 --> 00:21:44,936 "Hello Thomas," and guest 8743. 519 00:21:45,356 --> 00:21:48,486 Now just in my defense, what is this site. 520 00:21:48,596 --> 00:21:52,916 Oh, a lot of you are now in here. 521 00:21:52,916 --> 00:21:54,626 [Laughter] Apparently this is a [inaudible] which is the name 522 00:21:54,626 --> 00:21:57,546 of website which translates to tadpole 523 00:21:57,546 --> 00:22:00,466 but apparently more literally to astral so we're not really all 524 00:22:00,606 --> 00:22:01,856 that [laughter] far away. 525 00:22:02,096 --> 00:22:02,996 But this is all done, 526 00:22:02,996 --> 00:22:05,056 what's cool is this is JavaScript right? 527 00:22:05,056 --> 00:22:10,406 So-- maybe I shouldn't live this up here so long. 528 00:22:10,406 --> 00:22:11,206 [Laughter] That's great, we're talking 529 00:22:11,206 --> 00:22:12,316 to people on the internet. 530 00:22:13,316 --> 00:22:18,196 Alright, this could get bad quickly, so let's close that. 531 00:22:18,196 --> 00:22:18,263 [Laughter]. 532 00:22:18,263 --> 00:22:21,746 So frankly, this is really quite cool because up until now, 533 00:22:21,836 --> 00:22:26,266 you would have to write programs like this in languages like Java 534 00:22:26,266 --> 00:22:29,206 or in ActionScript and that's not to say that's a bad thing 535 00:22:29,436 --> 00:22:32,006 but it requires again that the user have special software 536 00:22:32,006 --> 00:22:35,436 namely the Java runtime environment or the flash plug-in 537 00:22:35,436 --> 00:22:38,836 and then you have to actually use multiple languages just 538 00:22:38,836 --> 00:22:40,606 to implement your websites so what's compelling 539 00:22:40,606 --> 00:22:44,606 about HTML5 among other things is the move toward ideally some 540 00:22:44,606 --> 00:22:46,796 more open standards which generally does tend 541 00:22:46,796 --> 00:22:48,996 to be a good thing for the world and certainly for people 542 00:22:48,996 --> 00:22:50,756 who want to program in it. 543 00:22:50,756 --> 00:22:54,016 One-- other one that I thought I'd demo at the TF's request, 544 00:22:54,496 --> 00:22:56,476 this one isn't so misinterpretable. 545 00:22:57,196 --> 00:23:02,236 This is a Macintosh that's falling asleep, here we go. 546 00:23:02,886 --> 00:23:04,576 Give it a moment to wake up. 547 00:23:05,506 --> 00:23:07,126 So I-- we commented to each other 548 00:23:07,126 --> 00:23:11,706 that this is perhaps more impressive to people like us 549 00:23:11,706 --> 00:23:14,846 who know what JavaScript use to not be able to do 550 00:23:15,166 --> 00:23:17,386 but even though the fidelity on the screen here is not 551 00:23:17,386 --> 00:23:18,396 so great, all of this. 552 00:23:18,396 --> 00:23:20,016 This is not a downloadable program. 553 00:23:20,016 --> 00:23:21,316 This is not a flash plug-in. 554 00:23:21,526 --> 00:23:24,496 This is pure JavaScript code that's moving this little fish 555 00:23:24,496 --> 00:23:27,826 around in this 3D environment so this is where we're getting to. 556 00:23:27,826 --> 00:23:29,376 You can really do some neat things. 557 00:23:29,376 --> 00:23:31,216 In fact, one of the CS50 seminars will talk 558 00:23:31,216 --> 00:23:32,506 about web programming. 559 00:23:32,506 --> 00:23:33,556 It will led by Phil, one 560 00:23:33,556 --> 00:23:36,676 of our teaching fellows who's particularly into these kinds 561 00:23:36,676 --> 00:23:38,516 of animations, these kinds of technologies. 562 00:23:38,516 --> 00:23:40,806 In fact, during quiz zero, he called me 563 00:23:40,806 --> 00:23:43,186 over while proctoring quite excitedly because one 564 00:23:43,186 --> 00:23:46,186 of the project still had been working on was this new software 565 00:23:46,186 --> 00:23:48,226 on his own Mac and like many Macs these days, 566 00:23:48,226 --> 00:23:49,806 it has a little eyesight camera built in 567 00:23:50,076 --> 00:23:52,306 and what he did was he wrote code running on his own Mac 568 00:23:52,786 --> 00:23:55,616 that had an image on the screen and as if he moved his body 569 00:23:55,616 --> 00:23:58,716 or face to the left, the image on the screen would then look 570 00:23:58,716 --> 00:24:00,576 at him this way and if he moved over here, 571 00:24:00,576 --> 00:24:03,076 the computer would then look at him this way and this is just 572 00:24:03,076 --> 00:24:04,896 by using this built-in hardware that you know, 573 00:24:04,896 --> 00:24:06,946 statically half of you already have. 574 00:24:06,946 --> 00:24:10,136 So final projects are really a fun chance to put some 575 00:24:10,136 --> 00:24:11,016 of these things to the test. 576 00:24:11,556 --> 00:24:13,916 So it's all about ultimately having the right tools 577 00:24:13,916 --> 00:24:16,996 and so here's one example 578 00:24:16,996 --> 00:24:18,816 of what you can do with the right tools. 579 00:24:18,816 --> 00:24:23,346 So, many of you had a great time battling with hash tables 580 00:24:23,346 --> 00:24:26,696 or tris or the like for problems at six. 581 00:24:26,696 --> 00:24:28,626 This was of course, to implement the dictionary, 582 00:24:28,626 --> 00:24:30,586 and you'll realize-- you'll recall that there's a lot 583 00:24:30,586 --> 00:24:31,886 of low level details there. 584 00:24:31,886 --> 00:24:33,986 There's a lot of chance for error with pointers, 585 00:24:34,306 --> 00:24:37,186 there's a lot of conceptual complexity 586 00:24:37,186 --> 00:24:38,616 at least toward wrapping your mind 587 00:24:38,616 --> 00:24:39,796 around the problem at first. 588 00:24:40,046 --> 00:24:42,986 But realize, once you have multiple tools in your toolkit, 589 00:24:42,986 --> 00:24:46,056 multiple languages, multiple mental models, can you start 590 00:24:46,056 --> 00:24:48,836 to pick from among them and use the right tool for the job. 591 00:24:49,096 --> 00:24:52,146 So case in point, one of the neat things about PHP and a lot 592 00:24:52,146 --> 00:24:54,386 of languages like it is how much you just get 593 00:24:54,386 --> 00:24:55,786 for free out of the box. 594 00:24:55,786 --> 00:24:58,126 There's so many more functions, for better or for worst, 595 00:24:58,366 --> 00:25:01,446 built in to PHP, the mail function, for instances 596 00:25:01,446 --> 00:25:02,836 or this MySQL Functions. 597 00:25:02,836 --> 00:25:05,276 And the upside is that its just much easier 598 00:25:05,276 --> 00:25:07,116 to do some common tasks. 599 00:25:07,116 --> 00:25:10,486 So suppose I want an implement that spell checker in PHP, 600 00:25:10,486 --> 00:25:14,076 not to disappoint after all the hard work you put in. 601 00:25:14,326 --> 00:25:17,406 But if I want an implement to PHP function for load 602 00:25:17,636 --> 00:25:19,476 and it's got to take a variable, namely the path 603 00:25:19,756 --> 00:25:22,646 to the dictionary, its function declaration might look 604 00:25:22,646 --> 00:25:23,006 like this. 605 00:25:23,276 --> 00:25:26,056 It's pretty much like C, except we now have no mention 606 00:25:26,056 --> 00:25:27,776 of data types and we have a dollar sign, 607 00:25:27,896 --> 00:25:29,886 but for the most part, this is the same declaration. 608 00:25:30,406 --> 00:25:32,226 Well, it turns out in PHP, 609 00:25:32,226 --> 00:25:34,016 if I want to implement the load function, 610 00:25:34,016 --> 00:25:37,476 I could do four final dict as word, 611 00:25:39,196 --> 00:25:44,356 hash table word gets true, done. 612 00:25:44,796 --> 00:25:47,086 That is the load function when written in PHP. 613 00:25:47,546 --> 00:25:50,786 So minor white lie, 'cause I've not actually integrated any kind 614 00:25:50,786 --> 00:25:51,566 of error checking. 615 00:25:51,806 --> 00:25:53,226 So just to contextualize this, 616 00:25:53,226 --> 00:25:54,926 I actually need this hash table, right? 617 00:25:55,136 --> 00:25:57,806 So how do I declare a hash table in PHP? 618 00:25:58,416 --> 00:25:59,796 Done. Alright. 619 00:25:59,796 --> 00:26:01,166 So that's my hash table, right? 620 00:26:01,166 --> 00:26:03,816 It's called an array here, but the array function 621 00:26:03,846 --> 00:26:05,756 in PHP returns an array, but what type 622 00:26:05,756 --> 00:26:07,236 of array does it actually return? 623 00:26:08,026 --> 00:26:09,696 In associate of array-- 624 00:26:09,696 --> 00:26:13,326 and an associative array is just the formal incarnation 625 00:26:13,326 --> 00:26:16,786 of a hash table, or rather an associative array, 626 00:26:16,786 --> 00:26:19,936 a map between keys and values can be implemented 627 00:26:19,936 --> 00:26:22,526 by what we now know, and have implemented ourselves, 628 00:26:22,766 --> 00:26:25,926 as an underlying hash table using separate chaining 629 00:26:25,926 --> 00:26:28,466 or linear probing or whatever technic you happen to choose, 630 00:26:28,896 --> 00:26:31,416 now, it reduces in higher level languages 631 00:26:31,686 --> 00:26:32,976 to a simple command like this. 632 00:26:33,096 --> 00:26:37,116 As for the check function-- let's see-- the check function, 633 00:26:37,116 --> 00:26:38,816 I think, looked a little something like this, 634 00:26:38,816 --> 00:26:40,526 and I need to return true or false. 635 00:26:40,906 --> 00:26:44,096 So I can just say, if hash table word, 636 00:26:45,006 --> 00:26:52,356 I can then say return true [inaudible] return false. 637 00:26:52,676 --> 00:26:54,426 Done. There's my spell checker, right? 638 00:26:54,426 --> 00:26:55,646 And think about how this is working. 639 00:26:55,646 --> 00:26:59,506 If the load function has indexed into this hash table array 640 00:26:59,506 --> 00:27:03,776 as word-- so word might be apple or banana or peach or pear, 641 00:27:03,776 --> 00:27:05,206 whatever the words were it the dictionary-- 642 00:27:05,436 --> 00:27:08,926 each of those fruits is a key, and each of them has a value, 643 00:27:08,926 --> 00:27:10,736 and the value [inaudible] somewhat arbitrarily 644 00:27:10,736 --> 00:27:14,116 but somewhat intelligently chose, was true, because later, 645 00:27:14,306 --> 00:27:16,686 I don't care really where these thing is in the array, 646 00:27:16,726 --> 00:27:20,176 I just want an instant answer saying yes or no, true or false, 647 00:27:20,406 --> 00:27:22,896 this word has been put into this hash table, 648 00:27:22,896 --> 00:27:26,156 into this associative array, so later on, it's suffices to say 649 00:27:26,186 --> 00:27:27,996 if the hash tables value 650 00:27:28,226 --> 00:27:31,776 at the current words location exist is non false, 651 00:27:32,066 --> 00:27:34,466 it must be the case that I put it there, and so, 652 00:27:34,466 --> 00:27:36,336 I get back an answer of true, otherwise, 653 00:27:36,336 --> 00:27:38,366 I return an answer of false. 654 00:27:38,366 --> 00:27:40,896 Now of course, the goal of the hash table, as we discussed it, 655 00:27:40,896 --> 00:27:43,196 was to really whittle things down to constant time, 656 00:27:43,776 --> 00:27:46,786 realistically, you're not gonna get truly constant time. 657 00:27:46,786 --> 00:27:49,246 But what's nice is that now the language, 658 00:27:49,246 --> 00:27:52,346 the runtime environment like PHP, can start to make some 659 00:27:52,346 --> 00:27:55,526 of those hard design decisions for us and save me frankly, 660 00:27:55,526 --> 00:27:57,016 a huge amount of time. 661 00:27:57,016 --> 00:27:59,376 So again, development time, the computer scientist time, 662 00:27:59,646 --> 00:28:02,396 is certainly one of the limited resources that's got to be taken 663 00:28:02,396 --> 00:28:04,466 into account when solving some problem. 664 00:28:04,656 --> 00:28:05,536 But there is a trade off. 665 00:28:05,536 --> 00:28:08,486 I'm gonna go ahead now and run the staff solution, 666 00:28:08,836 --> 00:28:13,786 which is in CS50/pub/solutions /pset6/speller, 667 00:28:13,826 --> 00:28:16,756 and I'll go ahead and run it on, let's say, 668 00:28:16,756 --> 00:28:19,436 one of the larger files, the King James Bible, enter. 669 00:28:19,836 --> 00:28:21,886 So, those are all the words that were misspelled, and it looks 670 00:28:21,886 --> 00:28:25,106 like it took the staff solution .42 seconds 671 00:28:25,146 --> 00:28:26,196 to spell check that file. 672 00:28:26,506 --> 00:28:29,396 So you have among your printouts for Monday this file here, 673 00:28:30,096 --> 00:28:33,996 speller.c, looking through-- sorry, speller.php-- 674 00:28:34,976 --> 00:28:36,936 so rather-- no, just speller. 675 00:28:37,176 --> 00:28:39,376 So the name of this file is just speller, and if you read 676 00:28:39,376 --> 00:28:41,696 through this code which I would recommend doing if only 677 00:28:41,696 --> 00:28:45,956 so that you see-- you can learn by example how to write 678 00:28:45,956 --> 00:28:49,006 in PHP code that you've already seen in C, pretty much I sat 679 00:28:49,006 --> 00:28:51,926 down one night and took the C version of the speller, 680 00:28:51,956 --> 00:28:55,126 which was in pset6's distro code, and I just rewrote it line 681 00:28:55,126 --> 00:28:58,946 by line to PHP, and because PHP syntactically is very much 682 00:28:58,946 --> 00:29:02,286 like C, it's almost a line for line translation. 683 00:29:02,286 --> 00:29:04,076 It's a little easier in fact, to do some things, 684 00:29:04,296 --> 00:29:06,636 but then I also sat down to implement the dictionary. 685 00:29:06,636 --> 00:29:10,016 So when dictionary.php, you see more comments, 686 00:29:10,016 --> 00:29:12,316 you essentially see a few subtleties that I have to add 687 00:29:12,316 --> 00:29:14,726 to these functions, but not many more lines of code. 688 00:29:14,726 --> 00:29:16,036 I just added some error checking. 689 00:29:16,036 --> 00:29:19,526 So in short, in these two files, we now have a re-implementation 690 00:29:19,586 --> 00:29:22,966 in PHP of the entirety of problem set 6. 691 00:29:23,116 --> 00:29:25,276 And now, let me go ahead and run this one, speller, 692 00:29:25,916 --> 00:29:30,686 the PHP version on the King James Bible, enter. 693 00:29:34,146 --> 00:29:36,506 So it's not a longer list 694 00:29:36,506 --> 00:29:38,896 of words what's really happening here. 695 00:29:39,606 --> 00:29:42,836 It's actually a slower list of words, alright? 696 00:29:42,836 --> 00:29:44,646 And now, you realize that was actually a little more-- 697 00:29:44,646 --> 00:29:46,436 it felt like more than 1.92 seconds, 698 00:29:46,436 --> 00:29:47,346 that's because it takes some time 699 00:29:47,346 --> 00:29:49,326 to actually spit these many characters onto the screen, 700 00:29:49,326 --> 00:29:51,206 to download from the network, show them on a laptop. 701 00:29:51,386 --> 00:29:53,926 But in any case, real time in terms of CPU seconds, 702 00:29:54,216 --> 00:29:58,916 my PHP version took 1.92 seconds, whereas recall, 703 00:29:59,106 --> 00:30:02,886 if I run the staff C base solution, .42 seconds. 704 00:30:03,086 --> 00:30:05,676 >> And this doesn't have to do with load on the cloud, 705 00:30:05,766 --> 00:30:07,076 people using it at this moment. 706 00:30:07,246 --> 00:30:08,736 This just has to do with the language. 707 00:30:08,736 --> 00:30:09,976 So here's one of the tradeoffs. 708 00:30:09,976 --> 00:30:13,376 We've introduced PHP but this is an interpreted language. 709 00:30:13,376 --> 00:30:14,966 We skip the compilation step. 710 00:30:15,156 --> 00:30:17,086 Now that's great because when you're developing project, 711 00:30:17,216 --> 00:30:18,466 you just have to reload your browser, 712 00:30:18,466 --> 00:30:19,656 bam, you see the results. 713 00:30:19,656 --> 00:30:20,796 There's no compiling. 714 00:30:20,796 --> 00:30:21,566 There's no linking. 715 00:30:21,566 --> 00:30:22,276 No assembling. 716 00:30:22,276 --> 00:30:24,056 There's no low-level steps. 717 00:30:24,316 --> 00:30:27,336 You are freer or to just change something, view the results, 718 00:30:27,336 --> 00:30:28,666 change something, view the results. 719 00:30:28,916 --> 00:30:32,336 But the downside of course is that at some point, what you-- 720 00:30:32,336 --> 00:30:35,976 you write as PHP code which is not really 0s and 1s. 721 00:30:35,976 --> 00:30:36,946 It's not really English. 722 00:30:36,946 --> 00:30:38,046 It's a programming language. 723 00:30:38,306 --> 00:30:41,496 At some point, that programming code has to be translated 724 00:30:41,496 --> 00:30:43,786 in some form to something a machine, 725 00:30:43,786 --> 00:30:45,326 a CPU actually understands. 726 00:30:45,506 --> 00:30:49,246 And so when you run PHP code, you're actually running it 727 00:30:49,246 --> 00:30:51,286 through something called an interpreter. 728 00:30:51,286 --> 00:30:53,586 So on this Linux system, on my Mac and even 729 00:30:53,586 --> 00:30:55,146 on a Windows computer if you install it, 730 00:30:55,366 --> 00:30:57,096 there is a program called PHP. 731 00:30:57,096 --> 00:30:59,826 In Windows, it'd be called php.exe. 732 00:31:00,066 --> 00:31:02,676 And ironically, it's probably written in C itself. 733 00:31:02,846 --> 00:31:06,326 But its purpose in life is to read PHP-based files, 734 00:31:06,566 --> 00:31:07,886 top to bottom, left to right. 735 00:31:08,056 --> 00:31:11,996 And then essentially figure out what to do at each line based 736 00:31:11,996 --> 00:31:13,406 on the code that it encounters. 737 00:31:13,406 --> 00:31:14,406 But this translation, 738 00:31:14,406 --> 00:31:16,746 this interpretation process simply takes some 739 00:31:16,746 --> 00:31:17,476 additional time. 740 00:31:17,476 --> 00:31:18,416 So there is overhead. 741 00:31:18,736 --> 00:31:19,806 So if you are trying 742 00:31:19,806 --> 00:31:22,316 to implement the fastest spell checker possible, 743 00:31:22,476 --> 00:31:25,366 and by fastest I mean runtime, not developer time, you know, 744 00:31:25,366 --> 00:31:26,836 we made the right decision with C. 745 00:31:26,836 --> 00:31:28,796 If you're actually processing millions of words, 746 00:31:28,796 --> 00:31:31,186 billions of words, if you're implementing Facebook or Google 747 00:31:31,296 --> 00:31:33,546 or really just any real world program even if they're not 748 00:31:33,546 --> 00:31:36,576 as massive as those sites, you do probably do wanna stick 749 00:31:36,576 --> 00:31:38,816 with something like C or C++ or one 750 00:31:38,816 --> 00:31:41,716 of this lower level languages 'cause you can really squeeze 751 00:31:41,716 --> 00:31:43,396 your money's worth and your cycle's worth 752 00:31:43,626 --> 00:31:44,636 out of that hardware. 753 00:31:44,636 --> 00:31:47,006 But if that's less of a concern, if you only have to deal with, 754 00:31:47,276 --> 00:31:49,586 you know, few dozen users per second on the web server, 755 00:31:49,816 --> 00:31:52,936 you can spend these CPU cycles, have slower code but my god, 756 00:31:52,936 --> 00:31:55,746 so many-- so much easier to implement this 757 00:31:55,936 --> 00:31:57,896 and my code is no less correct. 758 00:31:58,396 --> 00:32:00,466 So that is PHP's version of speller. 759 00:32:00,666 --> 00:32:02,116 And notice one trick here, too. 760 00:32:02,506 --> 00:32:04,776 At the very top of this PHP file, 761 00:32:05,136 --> 00:32:08,886 notice I have the special funky sequence of character, sharp, 762 00:32:09,376 --> 00:32:12,016 bang slash user slash bin slash PHP. 763 00:32:12,106 --> 00:32:15,886 This is what's generally known as a shebang or sharp bang. 764 00:32:16,186 --> 00:32:19,396 And this is simply a line that says what program should be used 765 00:32:19,566 --> 00:32:21,056 to interpret this file. 766 00:32:21,276 --> 00:32:23,416 So it turns out there is many different languages you can 767 00:32:23,416 --> 00:32:27,926 write these days, Perl and PHP and Python and Ruby and BASH 768 00:32:27,926 --> 00:32:29,986 and [inaudible] and many, many, many others. 769 00:32:30,276 --> 00:32:32,456 And you can simply tell the computer what should these 770 00:32:32,456 --> 00:32:34,446 various languages interpreters do you want 771 00:32:34,446 --> 00:32:36,066 to use to run this program. 772 00:32:36,376 --> 00:32:38,906 So I have consciously written this program in PHP, 773 00:32:38,906 --> 00:32:41,836 hence the open bracket question mark at the top 774 00:32:41,836 --> 00:32:43,066 and the opposite at the bottom. 775 00:32:43,336 --> 00:32:45,196 But I need to tell the computer what program 776 00:32:45,196 --> 00:32:46,656 to use to run this code. 777 00:32:47,056 --> 00:32:49,546 Or if I did not have that shebang, 778 00:32:49,776 --> 00:32:52,406 I could simply run the PHP program and say, 779 00:32:52,406 --> 00:32:54,806 "Run the program called speller and hit enter." 780 00:32:55,126 --> 00:32:57,126 And much like command line arguments usually work, 781 00:32:57,126 --> 00:33:00,416 that would pass my code in the file called speller into PHP. 782 00:33:00,416 --> 00:33:02,026 But in the context of the web, 783 00:33:02,316 --> 00:33:05,546 we obviously have a web server involved and its purpose 784 00:33:05,546 --> 00:33:06,946 in life is to realize oh, 785 00:33:06,946 --> 00:33:10,246 you're requesting a URL that ends in .php. 786 00:33:10,246 --> 00:33:13,706 I will jump through these hoops for you, invoke the interpreter, 787 00:33:13,706 --> 00:33:15,766 pass your code through it and only spit 788 00:33:15,766 --> 00:33:17,366 out the results to you. 789 00:33:17,616 --> 00:33:19,486 So that's what the web server has been doing for us. 790 00:33:19,596 --> 00:33:21,746 But I realize when it comes time after this class 791 00:33:21,746 --> 00:33:23,526 for your own research or projects or whatnot, 792 00:33:23,686 --> 00:33:25,916 if you ever wanna write a command line program, 793 00:33:26,146 --> 00:33:28,196 you probably not gonna want to reach for C 794 00:33:28,196 --> 00:33:30,226 if really you just wanna get the job done quickly. 795 00:33:30,446 --> 00:33:33,166 You wanna pick a language like PHP or something higher level 796 00:33:33,406 --> 00:33:36,596 that just gives you many more tools for free so that bam, 797 00:33:36,776 --> 00:33:38,696 1 minute later, you know, my PSet 798 00:33:38,776 --> 00:33:41,676 or my research projects, busy work is done. 799 00:33:42,086 --> 00:33:44,526 So, with that said, we now have time 800 00:33:44,526 --> 00:33:46,416 for another interpreted language. 801 00:33:46,416 --> 00:33:50,206 So in the context of a web page, you obviously have tags 802 00:33:50,496 --> 00:33:53,796 and we've seen tags like HTML tag, body tag, head tag, 803 00:33:53,796 --> 00:33:55,846 title tag, div tag and a bunch of others. 804 00:33:56,116 --> 00:33:58,266 But it turns out there is one other that's a little special 805 00:33:58,266 --> 00:34:01,046 called the script tag and that it tells the browser, 806 00:34:01,046 --> 00:34:04,556 "Hey browser, here comes a program, here comes a script." 807 00:34:04,886 --> 00:34:07,156 This is really just an issue of semantics really 808 00:34:07,156 --> 00:34:09,446 but script is essentially a synonym for program. 809 00:34:09,836 --> 00:34:12,046 But a script is usually a program written 810 00:34:12,046 --> 00:34:13,646 in an interpreted language. 811 00:34:13,686 --> 00:34:16,106 And that language here is gonna be JavaScript. 812 00:34:16,106 --> 00:34:18,256 So these days, JavaScript is a language 813 00:34:18,466 --> 00:34:20,276 that browsers understand. 814 00:34:20,566 --> 00:34:22,266 You don't need to download special software, 815 00:34:22,306 --> 00:34:24,986 any modern browser, knows how to read and interpret 816 00:34:24,986 --> 00:34:27,526 and execute a program or a script written 817 00:34:27,526 --> 00:34:28,986 in this language called JavaScript. 818 00:34:28,986 --> 00:34:31,616 Now, JavaScript for some time was generally relegated 819 00:34:31,616 --> 00:34:33,346 to doing really stupid things on the web. 820 00:34:33,346 --> 00:34:36,966 If you think maybe 5 or 6-- 5 or 6 years ago, 821 00:34:36,966 --> 00:34:40,226 the world was plagued by pop-ups and advertisements 822 00:34:40,226 --> 00:34:43,146 that would pop up in Windows, you'd visit some sketchy website 823 00:34:43,146 --> 00:34:44,976 and you can close said sketchy website 824 00:34:44,976 --> 00:34:47,016 because everytime you would, a new page would open. 825 00:34:47,016 --> 00:34:48,826 A new page would open, well, that's thanks 826 00:34:48,826 --> 00:34:51,316 to a programming language that was essentially listening 827 00:34:51,316 --> 00:34:54,126 for the event called Close Page and the moment it heard 828 00:34:54,126 --> 00:34:55,696 that event, what was it clearly doing? 829 00:34:56,106 --> 00:34:56,736 >> Open page. 830 00:34:56,736 --> 00:34:57,796 >> Open page, right. 831 00:34:57,856 --> 00:35:00,546 So this gets very annoying quickly but it all reduces, 832 00:35:00,916 --> 00:35:03,516 frankly to the same building blocks we'll introduce today. 833 00:35:03,516 --> 00:35:06,936 But what's really powerful about JavaScript is not nuisances 834 00:35:06,936 --> 00:35:09,436 like that, but that now you can really interact 835 00:35:09,436 --> 00:35:11,096 with the user on the client side. 836 00:35:11,336 --> 00:35:14,006 So any of these applications we've been using this year, 837 00:35:14,006 --> 00:35:16,346 even the one you might have used earlier on the term, 838 00:35:16,346 --> 00:35:20,376 courses.cs50.net, there is a back end to this website. 839 00:35:20,416 --> 00:35:23,126 There is PHP code, there is a MySQL database, 840 00:35:23,386 --> 00:35:25,996 but anytime you click one of these little plus signs 841 00:35:26,036 --> 00:35:28,536 and instantaneously see that course's description, 842 00:35:28,866 --> 00:35:31,316 you don't have time to make a request to the website, 843 00:35:31,316 --> 00:35:33,796 get back in miniature web page and then show it to you here. 844 00:35:34,036 --> 00:35:37,406 It's instantaneous 'cause we've pre-downloaded all of this data 845 00:35:37,406 --> 00:35:38,876 and we're showing it to you on demand. 846 00:35:38,876 --> 00:35:40,806 And so if you hover over [inaudible] guide scores 847 00:35:40,876 --> 00:35:43,026 and immediately see them, that's simply 848 00:35:43,026 --> 00:35:44,396 because we already have the data. 849 00:35:44,636 --> 00:35:48,056 We just now need to write a program, a script not in PHP 850 00:35:48,166 --> 00:35:49,646 which is way far away now. 851 00:35:49,646 --> 00:35:52,506 It's on the sever in a language called JavaScript that's 852 00:35:52,506 --> 00:35:53,606 listening for these events, 853 00:35:53,826 --> 00:35:56,426 and these events can now trigger responses 854 00:35:56,576 --> 00:35:59,666 like show [inaudible] guide scores or show the like. 855 00:35:59,666 --> 00:36:02,306 And frankly, if you are a fanatic on Facebook 856 00:36:02,306 --> 00:36:04,786 and you see your news feed and all of these new features 857 00:36:04,786 --> 00:36:06,986 where things are changing dynamically and you can click 858 00:36:06,986 --> 00:36:09,866 on icons and little menus pop up, this is all thanks 859 00:36:09,866 --> 00:36:11,746 to a language called JavaScript. 860 00:36:12,186 --> 00:36:16,516 So why don't we go ahead and take our 5-minute break. 861 00:36:16,746 --> 00:36:17,836 >> Alright. 862 00:36:17,976 --> 00:36:22,146 So we are back and we left off with this cliffhanger here. 863 00:36:22,146 --> 00:36:24,576 There is a script tag and this says, "Hey, browser, 864 00:36:24,576 --> 00:36:25,866 here comes a script wherein 865 00:36:25,866 --> 00:36:28,366 in most generally a language called JavaScript. 866 00:36:28,626 --> 00:36:30,356 So what does this language actually do 867 00:36:30,356 --> 00:36:31,976 and what can we actually do with it?" 868 00:36:31,976 --> 00:36:36,726 So I'm gonna go ahead and open up a file called form1.html. 869 00:36:36,726 --> 00:36:38,306 This is among Monday's printouts. 870 00:36:38,786 --> 00:36:40,876 And it looks a little something like this. 871 00:36:40,936 --> 00:36:43,156 There is not much code in here at all. 872 00:36:43,156 --> 00:36:46,166 In fact, even based on our limited experience with HTML, 873 00:36:46,366 --> 00:36:48,396 you can probably figure out what this thing is doing. 874 00:36:48,586 --> 00:36:50,596 It's got a body with a form inside of it 875 00:36:50,806 --> 00:36:54,266 that forms action is dump.php which is just a little quick 876 00:36:54,266 --> 00:36:56,406 and dirty script I wrote to just dump the contents 877 00:36:56,406 --> 00:36:57,716 of what's submitted by this form. 878 00:36:57,716 --> 00:36:59,426 I'm gonna use the GetMethod here. 879 00:36:59,616 --> 00:37:02,286 I've got an e-mail field of typed text, a password field 880 00:37:02,286 --> 00:37:04,186 of typed password, another password field 881 00:37:04,186 --> 00:37:06,686 of typed password, and then a checkbox of sorts. 882 00:37:06,686 --> 00:37:08,586 So this is sort of a prototypical form 883 00:37:08,586 --> 00:37:10,536 on the web that's asking you to interact with it 884 00:37:10,746 --> 00:37:11,766 in a few different ways 885 00:37:11,766 --> 00:37:15,006 and it looks a little something like this. 886 00:37:15,006 --> 00:37:18,616 Let me go into the source, pulls forms1.html. 887 00:37:18,616 --> 00:37:22,256 And I definitely didn't put much time into the aesthetics, 888 00:37:22,416 --> 00:37:23,536 just the functionality. 889 00:37:23,536 --> 00:37:25,726 Now unfortunately, this form is not 890 00:37:25,726 --> 00:37:27,516 that very-- it's not very robust. 891 00:37:27,516 --> 00:37:31,206 I can say, nope, and just type in some random password, 892 00:37:31,206 --> 00:37:34,056 the wrong password again, not even bother checking the form, 893 00:37:34,056 --> 00:37:37,066 click submit, and it does in fact submit. 894 00:37:37,066 --> 00:37:39,686 And notice this is what I happened to type in. 895 00:37:39,786 --> 00:37:42,756 So dump.php, you have a function of-- 896 00:37:42,756 --> 00:37:45,846 a function called dump in PSet 7 that just is meant 897 00:37:45,846 --> 00:37:47,666 to facilitate debugging like this. 898 00:37:48,016 --> 00:37:50,676 I'm seeing apparently the contents of what's superglobal. 899 00:37:51,186 --> 00:37:54,006 So get, right? 900 00:37:54,006 --> 00:37:56,416 So if the form is using method equals "get," 901 00:37:56,726 --> 00:37:59,396 the superglobal that's gonna contain all these key value 902 00:37:59,396 --> 00:38:02,726 pairs is not paused which we consciously use throughout PSet7 903 00:38:02,816 --> 00:38:05,906 so that you wouldn't be passing around financial information 904 00:38:05,906 --> 00:38:06,866 and usernames and passwords. 905 00:38:07,056 --> 00:38:09,396 I'm just using Get Here, so I have just printed 906 00:38:09,396 --> 00:38:11,826 out the contents of $_GET. 907 00:38:12,136 --> 00:38:12,926 How did I do this? 908 00:38:12,926 --> 00:38:14,696 Well, if you've looked at the distribution code, 909 00:38:14,696 --> 00:38:17,376 you'll see that your own dump function just does something 910 00:38:17,376 --> 00:38:18,836 terribly simple like this. 911 00:38:19,106 --> 00:38:22,666 In HTML, there's a pre tag which stands for pre-formatted text 912 00:38:23,136 --> 00:38:26,106 which means even though browsers generally ignore white space, 913 00:38:26,216 --> 00:38:29,306 they only want you to use things like the br tag for line breaks. 914 00:38:29,556 --> 00:38:33,476 Well, if you say P-R-E in a tag, this will now say, inter-- 915 00:38:33,646 --> 00:38:36,696 show every little space, every little character literally. 916 00:38:36,696 --> 00:38:38,036 Don't throw anything away. 917 00:38:38,316 --> 00:38:39,956 And there's this other function which is useful 918 00:38:39,956 --> 00:38:44,366 for diagnostic purposes in PHP called print_r, PrintRecursive. 919 00:38:44,606 --> 00:38:47,476 This takes in a variable and if it's got some kind of hierarchy 920 00:38:47,476 --> 00:38:50,376 to it like a hash table would or like a superglobal 921 00:38:50,376 --> 00:38:52,776 like get would, it's gonna show me everything. 922 00:38:52,776 --> 00:38:55,136 And it just shows it in this arbitrary format that's just 923 00:38:55,136 --> 00:38:56,476 very user friendly to read. 924 00:38:56,476 --> 00:38:58,226 So it's a nice trick for debugging just 925 00:38:58,226 --> 00:39:00,206 to see what's going on inside this thing. 926 00:39:00,416 --> 00:39:03,056 Unfortunately, there is no form of validation on this form. 927 00:39:03,056 --> 00:39:05,776 And certainly on websites today, you get yelled at if you try 928 00:39:05,776 --> 00:39:08,576 to register for a site with an invalid username or password, 929 00:39:08,926 --> 00:39:12,256 if you try to log in with the wrong one, if you provide a word 930 00:39:12,256 --> 00:39:13,486 when you're being asked for a number, 931 00:39:13,486 --> 00:39:14,886 if you fail to check a box and sure, 932 00:39:15,166 --> 00:39:16,436 recurring theme on the internet. 933 00:39:16,686 --> 00:39:19,496 Now, you can certainly do server side error checking. 934 00:39:19,496 --> 00:39:21,386 And those of you who've dived into PSet7 know 935 00:39:21,386 --> 00:39:22,966 that you have to do this. 936 00:39:22,966 --> 00:39:25,476 If you ask the user how many shares do you wanna buy 937 00:39:25,776 --> 00:39:26,866 and they type hello. 938 00:39:26,996 --> 00:39:29,506 well you don't wanna buy some indeterminant number 939 00:39:29,506 --> 00:39:30,766 of shares based on that input. 940 00:39:30,766 --> 00:39:33,086 You wanna check, this is obviously not a number. 941 00:39:33,086 --> 00:39:33,826 This is a word. 942 00:39:33,826 --> 00:39:36,146 You need to apologize to the user or you reprimand them 943 00:39:36,146 --> 00:39:37,606 for not providing the right input. 944 00:39:37,816 --> 00:39:40,296 But what's the downside of doing this kind of validation 945 00:39:40,556 --> 00:39:43,336 on the server side in your PHP code perhaps. 946 00:39:43,336 --> 00:39:43,916 [ Inaudible Remark ] 947 00:39:43,916 --> 00:39:46,696 >> It takes longer, right? 948 00:39:46,696 --> 00:39:48,446 Even though the web is pretty quick 949 00:39:48,446 --> 00:39:50,056 on a decent internet connection, you know, 950 00:39:50,056 --> 00:39:52,316 we've seen it take 20 milliseconds to get 951 00:39:52,316 --> 00:39:53,476 from one router to another. 952 00:39:53,736 --> 00:39:56,166 It generally takes less than 1 second, generally less 953 00:39:56,166 --> 00:39:58,946 than 2 seconds for a client to talk to server, you know, 954 00:39:58,946 --> 00:39:59,936 that's still a bit of latency. 955 00:40:00,226 --> 00:40:03,696 >> Latency is delayed, especially perceptible delay 956 00:40:03,696 --> 00:40:04,716 that the user notices. 957 00:40:05,006 --> 00:40:06,736 So, it'd be nice if we realize 958 00:40:06,736 --> 00:40:08,216 that the users typed in something bogus. 959 00:40:08,456 --> 00:40:09,736 Why don't I tell them right away? 960 00:40:09,736 --> 00:40:13,636 Well, HTML and CSS are just about markup and aesthetics. 961 00:40:13,636 --> 00:40:17,126 There's no logical features built into those languages, 962 00:40:17,126 --> 00:40:19,716 but with a real programming language like JavaScript, 963 00:40:19,986 --> 00:40:20,916 can we actually look 964 00:40:20,916 --> 00:40:23,626 at the values the users typed in in the browser. 965 00:40:23,626 --> 00:40:26,646 And without troubling the server, I can immediately check, 966 00:40:26,746 --> 00:40:28,316 wait a minute, those passwords aren't the same. 967 00:40:28,316 --> 00:40:29,716 Wait a minute, that's not a number. 968 00:40:29,926 --> 00:40:31,746 Now, I can't do things like, wait a minute, 969 00:40:31,746 --> 00:40:34,436 that username is already taken 'cause the only way I would know 970 00:40:34,436 --> 00:40:37,196 that answer is asking the server if the username is taken 971 00:40:37,516 --> 00:40:39,716 but for many, many, many types of questions, 972 00:40:39,716 --> 00:40:42,156 can I just answer this by writing code that runs 973 00:40:42,156 --> 00:40:44,346 in the browser and answers these questions for me. 974 00:40:44,566 --> 00:40:48,516 So, my goal here with form1.html was just to demonstrate a form 975 00:40:48,516 --> 00:40:49,996 that does no such validation. 976 00:40:50,236 --> 00:40:53,346 Now, let's start to use this programming language JavaScript 977 00:40:53,566 --> 00:40:55,756 to create a more pleasurable experience 978 00:40:55,756 --> 00:40:57,496 for the user more interactive experience, 979 00:40:57,716 --> 00:41:00,006 whereby you don't have to sit there waiting for the server 980 00:41:00,006 --> 00:41:03,076 to be contacted everytime you have some trivial question. 981 00:41:03,176 --> 00:41:05,076 And so, we now have this here. 982 00:41:05,076 --> 00:41:09,786 This is a form2.html and notice that the bottom 983 00:41:09,786 --> 00:41:12,526 of this file which-- and tell you do have for Monday, 984 00:41:12,766 --> 00:41:14,106 it's pretty much the same thing 985 00:41:14,326 --> 00:41:16,356 but there are couple slight differences. 986 00:41:16,356 --> 00:41:20,516 Notice, I take it upon myself to give this form tag a name 987 00:41:20,786 --> 00:41:22,916 and that's because I wanna be able to refer to it later 988 00:41:22,916 --> 00:41:24,006 in my programming code. 989 00:41:24,006 --> 00:41:25,506 Much like you can give variable's names, 990 00:41:25,726 --> 00:41:28,576 so can you give tags, or more specifically elements 991 00:41:28,626 --> 00:41:30,856 in a web page specific name, 992 00:41:30,856 --> 00:41:33,256 so that you can reference those tags specifically 993 00:41:33,256 --> 00:41:34,826 and not some other form in the page. 994 00:41:35,106 --> 00:41:36,086 And I've also added this. 995 00:41:36,196 --> 00:41:38,446 It's wrapping, so it looks a little ugly here 'cause the 996 00:41:38,446 --> 00:41:39,306 fonts a little big. 997 00:41:39,596 --> 00:41:41,586 But if I just add some temporary white space, 998 00:41:41,866 --> 00:41:44,306 turns out there's another attribute we've not used 999 00:41:44,306 --> 00:41:47,296 yet called onsubmit that frankly does what the name says. 1000 00:41:47,556 --> 00:41:49,286 When this form is submitted, 1001 00:41:49,506 --> 00:41:52,436 the following code is going to get executed. 1002 00:41:52,726 --> 00:41:54,506 So, just like with the style tag, 1003 00:41:54,536 --> 00:41:58,096 you can put that language called CSS for font sizes and colors 1004 00:41:58,096 --> 00:41:59,356 and aesthetic stuff like that. 1005 00:42:00,096 --> 00:42:03,416 With the onsubmit attribute inside of its quotes, 1006 00:42:03,606 --> 00:42:05,446 you can actually put programming code, 1007 00:42:05,446 --> 00:42:07,276 specifically JavaScript code. 1008 00:42:07,496 --> 00:42:09,266 You don't have to write out full functions. 1009 00:42:09,266 --> 00:42:10,856 You can just write single statements, 1010 00:42:10,856 --> 00:42:11,736 think back the scratch [phonetic]. 1011 00:42:11,736 --> 00:42:13,156 A single puzzle piece is a statement. 1012 00:42:13,466 --> 00:42:15,546 Well, here too can we just put a single statement 1013 00:42:15,546 --> 00:42:17,536 in between quotes with the semicolon at the end 1014 00:42:17,816 --> 00:42:21,806 and it looks like the function I'm calling here is a function 1015 00:42:21,806 --> 00:42:23,796 called validate 'cause I read the manual 1016 00:42:23,956 --> 00:42:27,406 and it tells me the onsubmit attribute takes a value 1017 00:42:27,756 --> 00:42:28,946 that should be a function 1018 00:42:29,026 --> 00:42:31,616 and that function should return true or false. 1019 00:42:31,896 --> 00:42:34,826 If it returns true, the form will be submitted as usual. 1020 00:42:34,826 --> 00:42:37,536 If it returns false, the form is not gonna be submitted. 1021 00:42:37,536 --> 00:42:40,756 This is great 'cause this means now I cannot trouble the server, 1022 00:42:40,896 --> 00:42:42,636 I can short circuit a form submission 1023 00:42:42,636 --> 00:42:44,346 if the user has done something stupid 1024 00:42:44,346 --> 00:42:46,166 like not answer my questions properly. 1025 00:42:46,466 --> 00:42:47,386 So, how do I do this? 1026 00:42:47,386 --> 00:42:48,836 Well, what is this validate function? 1027 00:42:48,876 --> 00:42:50,286 It's not built into JavaScript. 1028 00:42:50,286 --> 00:42:51,436 I had to write it myself. 1029 00:42:51,776 --> 00:42:53,396 So, let me scroll back up in this file. 1030 00:42:53,506 --> 00:42:55,746 It's not terribly long, just a lot of white space, 1031 00:42:56,106 --> 00:42:57,746 and here is the very top of the file. 1032 00:42:57,746 --> 00:43:00,516 I've got my doc site, my HTML tag, my head tag. 1033 00:43:00,516 --> 00:43:03,296 And now notice for the first time, inside of the head 1034 00:43:03,296 --> 00:43:05,796 of the web page, I have this script tag. 1035 00:43:06,046 --> 00:43:08,816 Now, as an aside, the script tag can go elsewhere in the page. 1036 00:43:08,886 --> 00:43:10,076 They're sometimes down sides. 1037 00:43:10,076 --> 00:43:10,796 They're putting it elsewhere. 1038 00:43:10,796 --> 00:43:13,266 So if you can, it's good to put in the script in the head 1039 00:43:13,616 --> 00:43:15,706 but sometimes there's-- problems putting it there. 1040 00:43:15,706 --> 00:43:19,266 So, we'll see by example if and when we wanna put it elsewhere. 1041 00:43:19,266 --> 00:43:20,916 But the script tag says, 1042 00:43:21,226 --> 00:43:24,556 the language I'm gonna use is text/javascript. 1043 00:43:24,556 --> 00:43:26,716 This is a thing called a MIME type 1044 00:43:26,856 --> 00:43:28,466 which is just a unique string 1045 00:43:28,466 --> 00:43:31,126 that some volunteers have decided is the special string 1046 00:43:31,126 --> 00:43:33,176 that identifies this language called JavaScript. 1047 00:43:33,406 --> 00:43:36,536 If your users happen to be using Internet Explorer or a sort 1048 00:43:36,536 --> 00:43:39,556 of specialized browser, you can use other languages, 1049 00:43:39,656 --> 00:43:41,736 VBScript for instance in the windows world. 1050 00:43:41,996 --> 00:43:44,186 But these days, if you're writing a site that's not meant 1051 00:43:44,186 --> 00:43:46,476 to be tied to one browser, it's supposed to be universal, 1052 00:43:46,776 --> 00:43:48,576 pretty much the language you've got available 1053 00:43:48,576 --> 00:43:49,726 to you is JavaScript. 1054 00:43:49,916 --> 00:43:50,926 So, and that's not a bad thing. 1055 00:43:50,926 --> 00:43:53,536 It's-- it's quite powerful and rich these days. 1056 00:43:53,786 --> 00:43:56,026 Now, this is just a stupid syntactic detail here. 1057 00:43:56,026 --> 00:43:58,016 This is one of these things that will take forever to remember, 1058 00:43:58,016 --> 00:44:00,786 so I've copied and pasted it almost always. 1059 00:44:01,396 --> 00:44:02,636 Slash, slash is a comment. 1060 00:44:02,746 --> 00:44:05,746 Slash bang bracket C data bracket. 1061 00:44:06,066 --> 00:44:08,496 It's a stupid unique string that just says 1062 00:44:08,496 --> 00:44:11,366 to the browser what's following is called character data, 1063 00:44:11,536 --> 00:44:13,946 not parsed character data, and this just means 1064 00:44:13,946 --> 00:44:15,576 if you see things like open brackets 1065 00:44:15,916 --> 00:44:17,566 or ampersands, don't freak out. 1066 00:44:17,696 --> 00:44:19,186 They have nothing to do with HTML. 1067 00:44:19,396 --> 00:44:21,546 They have to do with math like the less than sign. 1068 00:44:21,546 --> 00:44:23,436 The ampersand has to do with the Boolean value 1069 00:44:23,436 --> 00:44:24,216 or something like this. 1070 00:44:24,556 --> 00:44:26,996 So, this sequence of syntax which you won't see 1071 00:44:26,996 --> 00:44:29,776 in every book, this is generally good to do just 1072 00:44:29,776 --> 00:44:31,366 so that your code works on all browsers. 1073 00:44:31,826 --> 00:44:34,456 This just says to the browser, again, don't get confused 1074 00:44:34,456 --> 00:44:36,586 if you see some scary HTML-like syntax, 1075 00:44:36,626 --> 00:44:38,086 this is actually programming code. 1076 00:44:38,316 --> 00:44:39,656 Now, what is that programming code? 1077 00:44:39,886 --> 00:44:41,736 Here's how you implement a function in JavaScript. 1078 00:44:41,736 --> 00:44:43,756 It's not, unlike PHP. 1079 00:44:43,786 --> 00:44:46,346 JavaScript like PHP is loosely tight. 1080 00:44:46,716 --> 00:44:48,806 Even though there is the notion of different data types you, 1081 00:44:48,806 --> 00:44:50,836 the programmer, don't-- or have to get into the business 1082 00:44:50,836 --> 00:44:52,306 of declaring them specifically. 1083 00:44:52,526 --> 00:44:54,296 You can just infer from context. 1084 00:44:54,646 --> 00:44:56,566 So, I say function validate open paren, 1085 00:44:56,566 --> 00:44:58,886 close paren which means there's no arguments to this function. 1086 00:44:59,166 --> 00:45:01,756 And now, these lines are a little long as it is. 1087 00:45:01,756 --> 00:45:03,706 I went with the simple but verbose approach 1088 00:45:03,896 --> 00:45:05,716 because we can kind of infer from each line 1089 00:45:05,716 --> 00:45:06,756 of code what's going on. 1090 00:45:06,986 --> 00:45:08,026 So, here's an if condition. 1091 00:45:08,026 --> 00:45:10,546 Here's an else if, else if, else if, and then a return. 1092 00:45:10,826 --> 00:45:13,106 The syntax realized it's almost like PHP. 1093 00:45:13,106 --> 00:45:15,946 It's almost like C. I mean it's deliberate that we've chosen 1094 00:45:15,946 --> 00:45:18,606 such similar-- syntactically languages. 1095 00:45:18,946 --> 00:45:19,836 So, what am I asking? 1096 00:45:19,946 --> 00:45:24,296 If document dot forms dot registration dot email dot value 1097 00:45:24,366 --> 00:45:25,826 equals, equals quote unquote. 1098 00:45:25,826 --> 00:45:26,676 So, that's pretty verbose. 1099 00:45:26,756 --> 00:45:28,166 There are cleaner ways of doing this 1100 00:45:28,366 --> 00:45:29,586 but let's reinterpret it literally. 1101 00:45:29,846 --> 00:45:32,546 Document is a special global value-- 1102 00:45:32,586 --> 00:45:35,536 global object as it's called, that you're handed 1103 00:45:35,536 --> 00:45:37,636 when you're writing JavaScript code in the confines 1104 00:45:37,636 --> 00:45:39,666 of a web page and this gives you access 1105 00:45:39,696 --> 00:45:43,816 to all the interesting stuff in the web page namely the forms. 1106 00:45:44,016 --> 00:45:47,766 So, document.forms, notice the syntax is pretty much what we 1107 00:45:47,766 --> 00:45:50,306 use for structs in C when they're not pointers. 1108 00:45:50,336 --> 00:45:51,406 We use the dot notation. 1109 00:45:51,826 --> 00:45:56,146 So, document.forms turns out as essentially an object, 1110 00:45:56,396 --> 00:45:58,206 so just kind of some structure in memory, 1111 00:45:58,206 --> 00:46:02,176 a struct containing all of the forms on the specific page. 1112 00:46:02,376 --> 00:46:04,646 Now, how do I get the form I actually care about? 1113 00:46:04,816 --> 00:46:06,126 Well, thankfully, I gave it a name. 1114 00:46:06,446 --> 00:46:09,586 So, document.forms.registration returns 1115 00:46:09,636 --> 00:46:11,486 to me essentially the chunk of memory 1116 00:46:11,766 --> 00:46:15,336 that is representing the form that we implemented in HTML. 1117 00:46:15,606 --> 00:46:17,246 So, this is what's neat about JavaScript. 1118 00:46:17,246 --> 00:46:20,426 Whereas HTML is ultimately about the structure and the aesthetics 1119 00:46:20,426 --> 00:46:24,826 of your website, JavaScript now allows you to view your web page 1120 00:46:24,826 --> 00:46:28,026 as some in memory data structure like those we played 1121 00:46:28,026 --> 00:46:30,176 with with problem set 5 and problem set 6. 1122 00:46:30,486 --> 00:46:32,296 So in fact, just to paint this picture here, 1123 00:46:32,296 --> 00:46:34,626 let me pull up this snippet of arbitrary HTML. 1124 00:46:34,916 --> 00:46:36,486 This is a very simple web page. 1125 00:46:36,756 --> 00:46:40,566 It's got the doctype up top, a HTML head title, body tag, 1126 00:46:40,566 --> 00:46:42,786 a random link and then an H1 tag. 1127 00:46:42,786 --> 00:46:44,036 I just needed something to play with. 1128 00:46:44,556 --> 00:46:46,836 But notice that I've deliberately indented things 1129 00:46:46,926 --> 00:46:50,546 being nice and pretty printed, but notice too 1130 00:46:50,836 --> 00:46:53,796 that this indentation really does imply a structure 1131 00:46:54,106 --> 00:46:55,336 to this web page. 1132 00:46:55,566 --> 00:46:58,746 HTML, the tag, open bracket HTML seems 1133 00:46:58,746 --> 00:47:00,096 to be the most important tag. 1134 00:47:00,096 --> 00:47:01,826 Doctype aside, ignore the first line. 1135 00:47:02,026 --> 00:47:04,436 HTML seems to be the most important 'cause inside 1136 00:47:04,436 --> 00:47:07,056 of that tag is everything else and then inside 1137 00:47:07,056 --> 00:47:08,476 of the head tag is something else, 1138 00:47:08,476 --> 00:47:10,516 inside of the body tag is something else. 1139 00:47:10,746 --> 00:47:14,806 So, we kind of have a structure here whereby the HTML tag 1140 00:47:14,806 --> 00:47:17,306 or element is really the root of something. 1141 00:47:17,506 --> 00:47:19,926 It seems to have two children, the head child 1142 00:47:20,156 --> 00:47:23,526 and the body child and each of those things also has children. 1143 00:47:23,526 --> 00:47:26,396 So, it seems to be a data structure much like we looked 1144 00:47:26,396 --> 00:47:29,296 at 2 weeks ago, so I can draw this like this. 1145 00:47:29,766 --> 00:47:31,476 Alright, you can draw this any number of ways 1146 00:47:31,536 --> 00:47:33,856 but I'm gonna come up with an arbitrary thing at the top here. 1147 00:47:33,856 --> 00:47:35,546 I'm just gonna say, I need a node of-- 1148 00:47:35,546 --> 00:47:38,176 there are super root node called the document node. 1149 00:47:38,526 --> 00:47:40,956 The very first thing in this page is what's generally called 1150 00:47:40,956 --> 00:47:42,666 in industry the root element, 1151 00:47:42,876 --> 00:47:45,496 and notice that I have deliberately drawn a head tag 1152 00:47:45,496 --> 00:47:47,706 as a child, a body tag as a child. 1153 00:47:47,966 --> 00:47:50,326 The head tag meanwhile has a title child 1154 00:47:50,596 --> 00:47:53,766 and the title tag kind of does have a child 1155 00:47:53,796 --> 00:47:55,066 because there is something inside 1156 00:47:55,066 --> 00:47:56,596 of it even though it's not another tag. 1157 00:47:56,876 --> 00:47:58,676 So, I'll hang that off of this node 1158 00:47:58,676 --> 00:48:01,326 as though it's another child, albeit a textual child, 1159 00:48:01,456 --> 00:48:04,066 and then I'll do the same thing for the body tag over here. 1160 00:48:04,326 --> 00:48:06,446 And over here with the attributes, 1161 00:48:06,716 --> 00:48:08,506 I don't really wanna hang the attribute, 1162 00:48:08,596 --> 00:48:11,076 the HREF attribute off vertically 'cause it feels 1163 00:48:11,076 --> 00:48:13,196 like that's definitely not a child 'cause it can itself 1164 00:48:13,196 --> 00:48:13,836 have children. 1165 00:48:14,146 --> 00:48:15,876 So arbitrarily but reasonably, 1166 00:48:16,076 --> 00:48:18,976 I'm gonna hang off this node anchor laterally 1167 00:48:18,976 --> 00:48:20,886 to the side the HREF attribute. 1168 00:48:20,926 --> 00:48:24,546 So in short, I can draw an HTML page as a tree 1169 00:48:24,546 --> 00:48:27,716 and this tree is generally known as something called a DOM, 1170 00:48:27,716 --> 00:48:29,256 a document object model. 1171 00:48:29,556 --> 00:48:31,656 So, what's neat now is that now that we have the ability 1172 00:48:31,656 --> 00:48:34,966 to create web pages and structure them with HTML, 1173 00:48:35,266 --> 00:48:37,156 you can now start thinking about them really 1174 00:48:37,156 --> 00:48:39,126 as from a computer scientist's perspective. 1175 00:48:39,366 --> 00:48:42,266 I'm really just building a tree using these tags 1176 00:48:42,536 --> 00:48:44,886 but this nesting is implying a hierarchy. 1177 00:48:45,106 --> 00:48:47,356 So now that I have a language called JavaScript, 1178 00:48:47,356 --> 00:48:50,696 can I actually traverse this tree in memory by going 1179 00:48:50,696 --> 00:48:53,156 from root to child to child to child. 1180 00:48:53,406 --> 00:48:55,516 So, what we're really seeing here syntactically? 1181 00:48:55,786 --> 00:48:57,096 Document.forms. 1182 00:48:57,216 --> 00:49:00,776 registration.email is kind of like the process of starting 1183 00:49:00,776 --> 00:49:03,896 at the top of this tree and stepping through it, traversing, 1184 00:49:03,896 --> 00:49:05,596 trying to get down to the thing I care about. 1185 00:49:05,816 --> 00:49:07,046 So, what do I really care about? 1186 00:49:07,306 --> 00:49:10,536 The documents forms object, registration object, 1187 00:49:10,826 --> 00:49:12,206 its email field, 1188 00:49:12,346 --> 00:49:15,316 and specifically the value of that email field. 1189 00:49:15,566 --> 00:49:18,176 So, what that's really gonna do for me if we scroll back down. 1190 00:49:18,656 --> 00:49:21,346 Here is the very simple input tag that we have here, 1191 00:49:21,706 --> 00:49:23,036 and notice it's got a name of email, 1192 00:49:23,456 --> 00:49:24,616 and notice it's got a type. 1193 00:49:24,616 --> 00:49:26,986 But once the user actually types something 1194 00:49:26,986 --> 00:49:29,616 into that field, then it has a value. 1195 00:49:29,856 --> 00:49:31,696 So with this JavaScript code up here 1196 00:49:31,696 --> 00:49:33,636 in this familiar branching structure, 1197 00:49:33,826 --> 00:49:35,036 I'm just asking the question. 1198 00:49:35,086 --> 00:49:38,246 If the email's value is blank, yell at the user. 1199 00:49:38,366 --> 00:49:39,336 And how do I yell at them? 1200 00:49:39,336 --> 00:49:42,036 In JavaScript, there is a built-in, it's slightly annoying 1201 00:49:42,036 --> 00:49:45,686 and aesthetically ugly function called alert that takes a string 1202 00:49:45,686 --> 00:49:48,086 as its argument and that string is what the user sees 1203 00:49:48,086 --> 00:49:51,116 in a little pop-up, and then I return false, why? 1204 00:49:52,006 --> 00:49:53,506 Why is validate returning false? 1205 00:49:53,506 --> 00:49:54,026 [ Inaudible Remark ] 1206 00:49:54,026 --> 00:49:56,536 >> Right. 'Cause they wanna make sure 1207 00:49:56,536 --> 00:49:58,756 that the form does not now get submitted. 1208 00:49:58,756 --> 00:50:01,906 So, if I return false, that value inside 1209 00:50:01,906 --> 00:50:04,506 of the onsubmit handler will return false, 1210 00:50:04,616 --> 00:50:06,626 which means the browser will say, oh, the user-- 1211 00:50:06,816 --> 00:50:08,976 the programmer canceled the submission of this form. 1212 00:50:09,046 --> 00:50:11,146 >> But there are some other things the user can do 1213 00:50:11,146 --> 00:50:11,856 to be difficult. 1214 00:50:12,086 --> 00:50:15,286 If the password one field equals equals quote unquote, 1215 00:50:15,286 --> 00:50:17,296 that is if it's blank, I'm gonna yell at the user, 1216 00:50:17,296 --> 00:50:18,426 you must provide a password. 1217 00:50:18,646 --> 00:50:23,216 If by contrast, password one's value does not equal password 1218 00:50:23,216 --> 00:50:26,246 two's value, you must provide the same password twice will 1219 00:50:26,246 --> 00:50:27,116 by admonishment. 1220 00:50:27,376 --> 00:50:31,146 And then lastly, if it is not, so notice the bang, 1221 00:50:31,416 --> 00:50:33,186 if not document.forms. 1222 00:50:33,186 --> 00:50:37,136 registration.agreement.checked, I wanna yell at the user that he 1223 00:50:37,136 --> 00:50:39,216 or she must agree to our terms and conditions. 1224 00:50:39,466 --> 00:50:43,126 So, it turns out that just these form fields, just these elements 1225 00:50:43,126 --> 00:50:45,876 in a web page can have a value, a textual value 1226 00:50:45,876 --> 00:50:47,306 like the user name or the password. 1227 00:50:47,626 --> 00:50:50,736 There are special elements in a web page like a check box 1228 00:50:51,026 --> 00:50:53,886 that also have properties but not textual values. 1229 00:50:54,136 --> 00:50:56,096 They have Boolean properties like checked. 1230 00:50:56,596 --> 00:50:58,996 So, .checked as applied 1231 00:50:58,996 --> 00:51:01,586 to agreement is just a Boolean value that tells you, 1232 00:51:01,586 --> 00:51:04,536 the programmer, is that check box checked or not. 1233 00:51:04,536 --> 00:51:06,516 And so, now you have the ability programmatically 1234 00:51:06,726 --> 00:51:09,126 to check these answers without actually looking 1235 00:51:09,126 --> 00:51:11,126 in the superglobal called GET or POST. 1236 00:51:11,126 --> 00:51:12,776 You can do this all on the client side. 1237 00:51:13,036 --> 00:51:16,176 So, the end result is that the user's interaction now looks 1238 00:51:16,176 --> 00:51:16,646 like this. 1239 00:51:16,646 --> 00:51:19,926 If I go to form2.html, the thing looks the same 1240 00:51:19,926 --> 00:51:22,516 but if I am completely difficult and don't type anything in 1241 00:51:22,516 --> 00:51:24,926 and click submit, now I get this alert 1242 00:51:24,926 --> 00:51:26,776 that says you must provide an email address. 1243 00:51:27,036 --> 00:51:29,436 Now, I kind of criticize this thing as ugly because frankly, 1244 00:51:29,556 --> 00:51:31,886 every browser makes this window look differently 1245 00:51:31,886 --> 00:51:33,416 and this is kind of a stupid way of starting it. 1246 00:51:33,446 --> 00:51:35,386 The page at such and such the URL says, 1247 00:51:35,736 --> 00:51:37,706 they all look different, so the world tends not 1248 00:51:37,706 --> 00:51:40,926 to use the alert function but it is a quick and dirty way 1249 00:51:40,926 --> 00:51:42,096 that at least providing feedback, 1250 00:51:42,096 --> 00:51:44,056 so we'll start off with that for now. 1251 00:51:44,246 --> 00:51:46,966 But we can do a bit better or at least a bit differently. 1252 00:51:47,046 --> 00:51:48,106 So notice this too. 1253 00:51:48,726 --> 00:51:51,076 Notice I've-- we were in the validate function 1254 00:51:51,076 --> 00:51:54,716 in this version of my code as actually taking an argument just 1255 00:51:54,716 --> 00:51:57,586 to provide you with this trick as we'll see it moving forward. 1256 00:51:57,776 --> 00:52:01,006 So, this takes an argument called F and it looks 1257 00:52:01,006 --> 00:52:03,246 like F just represents what? 1258 00:52:03,246 --> 00:52:04,246 [ Inaudible Remark ] 1259 00:52:04,246 --> 00:52:05,156 >> The form itself. 1260 00:52:05,466 --> 00:52:08,226 So, I seem to be calling the validate function not 1261 00:52:08,226 --> 00:52:10,346 with an open paren close paren with no arguments. 1262 00:52:10,556 --> 00:52:13,666 I seem to be passing in the form itself as an argument. 1263 00:52:14,006 --> 00:52:15,506 So, how do you pass a node? 1264 00:52:15,606 --> 00:52:18,216 How do you pass a structure in a tree as an argument? 1265 00:52:18,476 --> 00:52:20,336 Well, let's look at how my HTML changed. 1266 00:52:20,516 --> 00:52:22,656 It's not all that different but notice on the top right, 1267 00:52:23,006 --> 00:52:27,966 this time with onsubmit, I'm returning validate of this. 1268 00:52:28,396 --> 00:52:30,336 Now, those of you who took AP computer science 1269 00:52:30,336 --> 00:52:32,176 or some background course before 50, 1270 00:52:32,176 --> 00:52:34,226 you know about Java most likely and you know 1271 00:52:34,226 --> 00:52:35,386 about the special keyword "this". 1272 00:52:35,706 --> 00:52:37,936 This is a self referential variable that refers 1273 00:52:37,936 --> 00:52:40,526 to whatever the thing in context currently is. 1274 00:52:40,826 --> 00:52:43,426 So, because I say this inside of double quotes 1275 00:52:43,426 --> 00:52:45,696 and those double quotes are inside of these angle brackets 1276 00:52:45,896 --> 00:52:48,696 and the tag and question is formed, when I say quote-- 1277 00:52:48,696 --> 00:52:50,966 when I say this, I mean this form. 1278 00:52:51,166 --> 00:52:53,656 So now, I have the ability with JavaScript to also pass 1279 00:52:53,906 --> 00:52:57,986 around nodes in my tree, little rectangles like this 1280 00:52:58,076 --> 00:53:01,996 as though they really are in memory objects just like we had 1281 00:53:02,116 --> 00:53:05,336 in C. If I look at the fourth variant of this, 1282 00:53:05,436 --> 00:53:06,556 notice what I can do now. 1283 00:53:06,556 --> 00:53:09,156 Let me show you what the HTML actually looks like here 1284 00:53:09,566 --> 00:53:12,016 and I'm gonna go to form4.html, 1285 00:53:12,366 --> 00:53:16,126 and now notice I cannot even click this button. 1286 00:53:16,126 --> 00:53:19,906 So now, I can really be kind of defensive 1287 00:53:19,906 --> 00:53:22,696 against the annoying user and now I can require that they type 1288 00:53:22,696 --> 00:53:27,166 in let's say a legit email address, type in a password. 1289 00:53:27,166 --> 00:53:28,196 I'll use my favorite. 1290 00:53:28,656 --> 00:53:30,876 And now notice only when I check this box, 1291 00:53:30,876 --> 00:53:32,096 watch what happens at bottom left. 1292 00:53:32,576 --> 00:53:34,366 There's the submit button become enabled. 1293 00:53:34,366 --> 00:53:36,466 So, you might have seen this on a website but this just boils 1294 00:53:36,466 --> 00:53:39,326 down to some simple weak zero Boolean properties, 1295 00:53:39,566 --> 00:53:41,606 so let's look at this code in form 4. 1296 00:53:42,046 --> 00:53:45,506 Notice now that I have this in my HTML. 1297 00:53:46,246 --> 00:53:47,966 I still have the onsubmit handler. 1298 00:53:48,146 --> 00:53:49,126 But notice this one. 1299 00:53:49,126 --> 00:53:51,456 Again, it's wrapping 'cause my fonts are little large today, 1300 00:53:51,846 --> 00:53:53,036 but let's look at this. 1301 00:53:53,036 --> 00:53:54,576 If I move some white space in there, 1302 00:53:54,956 --> 00:53:56,826 notice that there's another event handler. 1303 00:53:56,886 --> 00:53:59,316 Onsubmit obviously does the following 1304 00:53:59,316 --> 00:54:00,316 when the form submitted. 1305 00:54:00,526 --> 00:54:02,906 Well, for other things, you don't submit a check box, 1306 00:54:02,906 --> 00:54:06,376 you submit a form but you do click a check box as you do 1307 00:54:06,376 --> 00:54:07,846 to certain other parts of web pages. 1308 00:54:08,126 --> 00:54:11,686 So, it turns out that this event handler called onclick also 1309 00:54:11,686 --> 00:54:14,516 takes one or more statements separated by semicolon 1310 00:54:14,776 --> 00:54:17,456 and this one's purpose is to call a function 1311 00:54:17,596 --> 00:54:21,806 when this DOM element, this DOM node is clicked, 1312 00:54:22,186 --> 00:54:23,486 so what is toggle? 1313 00:54:23,686 --> 00:54:26,926 Toggle is a function I wrote that uses another property 1314 00:54:26,926 --> 00:54:28,496 that I read about in the documentation 1315 00:54:28,496 --> 00:54:31,186 and it does this, if document.forms. 1316 00:54:31,256 --> 00:54:32,886 registration.button. 1317 00:54:32,946 --> 00:54:33,896 Wait a minute, what's button? 1318 00:54:34,366 --> 00:54:35,846 Well, notice I gave this thing a name. 1319 00:54:35,846 --> 00:54:39,936 If I scroll back down, notice this time I gave this input type 1320 00:54:40,176 --> 00:54:43,886 which is type equals-- yes, type equals submit. 1321 00:54:44,056 --> 00:54:46,546 Notice I gave it a name button 'cause I need to be able 1322 00:54:46,546 --> 00:54:49,206 to access this button, this submit button, so I can turn it 1323 00:54:49,206 --> 00:54:51,866 on and turn it off, to enable and disable it. 1324 00:54:52,116 --> 00:54:52,986 So, here is toggle. 1325 00:54:53,226 --> 00:54:54,556 If document.forms. 1326 00:54:54,556 --> 00:54:57,746 registration.button.disabled is true, 1327 00:54:58,076 --> 00:54:59,386 so here's yet another property. 1328 00:54:59,386 --> 00:55:01,096 So, this is what's really neat. 1329 00:55:01,096 --> 00:55:03,456 Even though we've just been writing HTML for structural 1330 00:55:03,456 --> 00:55:04,276 and aesthetic reasons, 1331 00:55:04,556 --> 00:55:08,696 all of these tags we write do get interpreted by the browser 1332 00:55:08,696 --> 00:55:10,856 and everytime the browser encounters a new tag, 1333 00:55:11,066 --> 00:55:13,126 it essentially calls the equivalent of malloc [phonetic], 1334 00:55:13,416 --> 00:55:17,236 malloc-ing enough memory for that node that then represents 1335 00:55:17,266 --> 00:55:20,786 that tag inside of RAM and it associates with some 1336 00:55:20,786 --> 00:55:23,266 of those node certain properties based on their type, 1337 00:55:23,386 --> 00:55:24,616 this one being a submit button, 1338 00:55:24,856 --> 00:55:26,786 and so that submit button has a special property 1339 00:55:26,786 --> 00:55:27,756 called disabled. 1340 00:55:27,756 --> 00:55:29,096 And if that is true, 1341 00:55:29,486 --> 00:55:31,016 then obviously the button is disabled. 1342 00:55:31,016 --> 00:55:31,916 You cannot click it. 1343 00:55:32,136 --> 00:55:34,466 So, what I'm doing here is if the button is disabled, 1344 00:55:34,746 --> 00:55:36,806 make that not so, like make that false. 1345 00:55:37,166 --> 00:55:41,166 Else, if it is not disabled, make that true to disable it. 1346 00:55:41,166 --> 00:55:43,666 So, it toggles the states of this variable 1347 00:55:43,956 --> 00:55:45,746 by using just another event handler 1348 00:55:45,746 --> 00:55:47,506 and my validate function is identical. 1349 00:55:47,786 --> 00:55:49,516 Now, how did I actually do this down here? 1350 00:55:49,516 --> 00:55:53,066 It's worth noting this 'cause this is kind of a stupid reality 1351 00:55:53,066 --> 00:55:54,606 of modern web programming. 1352 00:55:54,956 --> 00:55:57,086 Input disabled equals disabled. 1353 00:55:57,086 --> 00:55:58,976 So, this is the paradigm you actually see. 1354 00:55:59,226 --> 00:56:02,586 Back in the day with HTML 1 and 2 and earlier versions, 1355 00:56:02,846 --> 00:56:04,526 you could have attributes in a tag 1356 00:56:05,266 --> 00:56:07,656 that did not have an equal sign or quotes. 1357 00:56:07,746 --> 00:56:09,586 This is largely frowned upon these days. 1358 00:56:09,876 --> 00:56:12,306 So, the world realized, wow, we still wanna have the ability 1359 00:56:12,306 --> 00:56:14,386 to disable an element but we need some value. 1360 00:56:14,656 --> 00:56:17,136 Now, a reasonable person might have said something like true 1361 00:56:17,136 --> 00:56:20,726 or one or something but they decided let's not come up with 1362 00:56:20,726 --> 00:56:23,726 yet another value, let's just say value equals itself. 1363 00:56:24,136 --> 00:56:25,946 And so you'll see this throughout the literature, 1364 00:56:26,076 --> 00:56:28,686 but that just means by default, this button this disabled. 1365 00:56:28,686 --> 00:56:31,996 Notice if I get rid of that and then re-save this page 1366 00:56:31,996 --> 00:56:35,376 and reload the browser, notice that this page is no longer-- 1367 00:56:36,246 --> 00:56:37,656 is it saving properly? 1368 00:56:37,656 --> 00:56:44,256 Oops. My-- oh, I think I'm-- oh, I'm changing the wrong version. 1369 00:56:44,256 --> 00:56:46,616 So, if I were actually visiting the right version of this file 1370 00:56:46,616 --> 00:56:47,686 with this particular browser, 1371 00:56:47,916 --> 00:56:49,846 you'll see that the submit button is actually working. 1372 00:56:49,846 --> 00:56:52,346 But, you know what, I can cheat and save myself here 1373 00:56:52,576 --> 00:56:53,776 for some definition of save. 1374 00:56:54,136 --> 00:56:55,346 I'm gonna go to inspect elements. 1375 00:56:55,766 --> 00:56:58,566 Notice this is our friend Firebug, and what's really nice 1376 00:56:58,626 --> 00:57:00,416 if you like to geek out with this stuff, 1377 00:57:00,806 --> 00:57:04,176 notice I will just manually go in here. 1378 00:57:05,386 --> 00:57:09,426 Come on, change that, there we go. 1379 00:57:09,896 --> 00:57:11,686 So, this actually illustrates the point. 1380 00:57:11,686 --> 00:57:13,556 So, let's assume that was deliberate, that mistake I made. 1381 00:57:13,886 --> 00:57:16,456 So, this actually illustrates the point which is 1382 00:57:16,456 --> 00:57:18,346 that you might be really excited that, wow, I don't have 1383 00:57:18,376 --> 00:57:19,786 to write all this damn PHP code 1384 00:57:19,786 --> 00:57:21,496 which have been confusing me the past couple of days. 1385 00:57:21,496 --> 00:57:23,096 I can just start embedding this on the client side 1386 00:57:23,336 --> 00:57:25,116 and the upside too is that the user gets a better, 1387 00:57:25,256 --> 00:57:26,246 faster experience. 1388 00:57:26,666 --> 00:57:28,106 But unfortunately, if the-- 1389 00:57:28,106 --> 00:57:30,686 the user has a modicum of technical savvy 1390 00:57:30,686 --> 00:57:32,606 or has free software installed, 1391 00:57:32,856 --> 00:57:35,626 any of these client side defenses can be 1392 00:57:35,626 --> 00:57:37,036 completely circumvented. 1393 00:57:37,106 --> 00:57:41,016 Clearly that I just disable the disabling of the button just 1394 00:57:41,016 --> 00:57:44,076 by tweaking the code, you will know already from P set 7, 1395 00:57:44,076 --> 00:57:46,756 you can pretend to be a browser and request things 1396 00:57:46,756 --> 00:57:50,356 like Yahoo's web page but doing it from a PHP context. 1397 00:57:50,466 --> 00:57:52,466 So you have to realize that with form validation 1398 00:57:52,466 --> 00:57:55,286 or any client side code, you cannot trust 1399 00:57:55,286 --> 00:57:58,596 that the user will execute that code as you wrote it. 1400 00:57:58,596 --> 00:58:00,396 You have to assume that they're still gonna try 1401 00:58:00,396 --> 00:58:03,426 to insert bad stuff into your website and so still these-- 1402 00:58:03,716 --> 00:58:05,766 this server side protections that we've been preaching 1403 00:58:05,766 --> 00:58:08,526 for problem set 7 remain a necessity. 1404 00:58:08,526 --> 00:58:10,606 So unfortunately, you have to do both. 1405 00:58:10,606 --> 00:58:12,886 The upside of one is better user inter-- 1406 00:58:12,886 --> 00:58:14,716 a better use your experience. 1407 00:58:14,966 --> 00:58:20,626 The upside of the other is that your website remains safer. 1408 00:58:20,946 --> 00:58:24,816 So, let's take a look at now one other capability of JavaScript. 1409 00:58:24,846 --> 00:58:27,206 So, back in just a few years ago, frankly, 1410 00:58:27,206 --> 00:58:29,066 JavaScript was a pretty annoying language. 1411 00:58:29,066 --> 00:58:31,026 It created all these pop-ups in the world. 1412 00:58:31,236 --> 00:58:33,646 It would have these ugly alert messages on the website. 1413 00:58:33,856 --> 00:58:36,456 But now that you can really program against the DOM 1414 00:58:36,456 --> 00:58:39,156 of a web page and do increasingly powerful things, 1415 00:58:39,436 --> 00:58:41,386 you can create much better user interfaces. 1416 00:58:41,386 --> 00:58:44,806 For instance, the one I always turn to only because it was one 1417 00:58:44,806 --> 00:58:47,206 of the first sites to do this, the fact that you can click 1418 00:58:47,206 --> 00:58:50,366 and drag on Google Maps was really groundbreaking a few 1419 00:58:50,366 --> 00:58:52,426 years ago when everyone else like MapQuest 1420 00:58:52,426 --> 00:58:55,546 and Yahoo was the old 1990 style of click the up arrow 1421 00:58:55,546 --> 00:58:56,726 and then we'll get you a new tile. 1422 00:58:56,976 --> 00:58:58,866 Click the left arrow, then we'll show you over here. 1423 00:58:59,086 --> 00:59:00,216 I mean, up until a few months ago, 1424 00:59:00,216 --> 00:59:01,646 that's what Harvard's map looked like too 1425 00:59:01,646 --> 00:59:02,906 but they too have transitioned 1426 00:59:03,136 --> 00:59:04,936 to what's called an Ajax approach. 1427 00:59:04,936 --> 00:59:07,666 And if you do this fast enough, if I click and drag, 1428 00:59:07,666 --> 00:59:10,216 first let me zoom in, if I click-- 1429 00:59:10,456 --> 00:59:12,706 well now, I've got really no interesting earth 1430 00:59:12,786 --> 00:59:13,556 in this part of the world. 1431 00:59:14,586 --> 00:59:16,556 [Laughter] So, if I click and drag really fast, 1432 00:59:17,336 --> 00:59:19,776 you might be able to see what's happening at the top left. 1433 00:59:19,826 --> 00:59:23,296 Briefly, there are little gray squares and that's 1434 00:59:23,336 --> 00:59:24,546 because those tiles, 1435 00:59:24,546 --> 00:59:26,336 those images haven't been downloaded yet. 1436 00:59:26,566 --> 00:59:28,216 So, it's really going on beneath the-- 1437 00:59:28,276 --> 00:59:30,106 underneath the hood here with Google Maps. 1438 00:59:30,106 --> 00:59:32,236 If I pull up Firebug and go to the net tab, 1439 00:59:32,466 --> 00:59:34,176 notice everytime I click, 1440 00:59:34,826 --> 00:59:36,966 look at how many requests were just induced? 1441 00:59:36,966 --> 00:59:39,376 Now, a normal user doesn't throw the map as I just did 1442 00:59:39,576 --> 00:59:43,556 because my little clicking and dragging just induced 36 more-- 1443 00:59:44,456 --> 00:59:46,586 36 more HTTP requests. 1444 00:59:46,586 --> 00:59:49,336 And if I zoom in on each of those, each of those happens 1445 00:59:49,336 --> 00:59:51,256 to be a tile, a part of the map. 1446 00:59:51,506 --> 00:59:55,966 So, Google is using JavaScript to programmatically listen 1447 00:59:55,966 --> 00:59:58,976 for user clicking, user dragging, user letting go. 1448 00:59:59,306 --> 01:00:00,576 >> And the moment that happens, 1449 01:00:00,766 --> 01:00:03,226 they quickly contact the server using HTTP. 1450 01:00:03,226 --> 01:00:04,716 Turns out with JavaScript just like PHP, 1451 01:00:04,716 --> 01:00:06,936 you can make HTTP request. 1452 01:00:07,216 --> 01:00:10,386 A response comes back, an image comes back and voila, 1453 01:00:10,386 --> 01:00:12,696 that image then gets inserted into the web page. 1454 01:00:12,696 --> 01:00:14,636 So, how can we begin to do things like this? 1455 01:00:15,096 --> 01:00:16,066 Well, let's take a look. 1456 01:00:16,256 --> 01:00:19,596 I'm gonna go to let's say ajax1.html 1457 01:00:19,766 --> 01:00:23,216 and I'm gonna pull this file up in my browser as well. 1458 01:00:23,806 --> 01:00:25,816 And notice this, it's a pretty simple website, 1459 01:00:26,186 --> 01:00:29,496 it's sort of a very primitive version of CS50 finance. 1460 01:00:29,826 --> 01:00:31,336 But, notice, I have a text field here 1461 01:00:31,336 --> 01:00:32,806 for symbol and then get quote. 1462 01:00:33,116 --> 01:00:35,666 And if I go ahead and type in something like GOOG 1463 01:00:35,716 --> 01:00:37,406 for google, click get quote. 1464 01:00:38,246 --> 01:00:39,416 Alright, interesting. 1465 01:00:39,416 --> 01:00:40,976 It appears that at this moment in time, 1466 01:00:40,976 --> 01:00:42,106 according to Yahoo Finance, 1467 01:00:42,276 --> 01:00:46,316 Google's stock is worth 617 dollars and .0415 cents. 1468 01:00:46,486 --> 01:00:48,336 So let me go ahead and see how we did this. 1469 01:00:48,336 --> 01:00:51,206 Well, first, let's look at the HTML down here. 1470 01:00:51,466 --> 01:00:52,976 It's actually a pretty simple web page, right? 1471 01:00:52,976 --> 01:00:54,366 This did not take much effort to write. 1472 01:00:54,596 --> 01:00:58,486 I've got a body, a form, interesting, an onsubmit handler 1473 01:00:58,746 --> 01:01:00,806 and then also return false. 1474 01:01:01,036 --> 01:01:03,666 So, it seems that I'm now using the idea of a form 1475 01:01:03,896 --> 01:01:07,126 to have a purely client side experience. 1476 01:01:07,176 --> 01:01:09,956 The whole page is not going to reload, and this too is one 1477 01:01:09,956 --> 01:01:11,776 of the themes these days with web programming. 1478 01:01:12,086 --> 01:01:13,966 You might very well still be clicking buttons 1479 01:01:13,966 --> 01:01:15,746 and check boxes all the time on websites 1480 01:01:16,076 --> 01:01:19,476 but it's increasingly rare that the whole page reloads 1481 01:01:19,476 --> 01:01:21,736 and instead, you get like a little progress bar 1482 01:01:21,906 --> 01:01:24,686 or spinning icon and then bam, more content appears. 1483 01:01:24,686 --> 01:01:26,236 Facebook, again, case in point. 1484 01:01:26,236 --> 01:01:28,666 If you scroll the bottom of your news feed, there is usually 1485 01:01:28,666 --> 01:01:30,026 like an older posts link. 1486 01:01:30,026 --> 01:01:32,606 If you click that, it doesn't reload the whole page, 1487 01:01:32,606 --> 01:01:35,046 it instead just changes I think to some kind of progress bar 1488 01:01:35,216 --> 01:01:37,486 and than bam, a second or two later, more posts. 1489 01:01:37,596 --> 01:01:40,296 It's using JavaScript, listening for your mouse click. 1490 01:01:40,296 --> 01:01:42,826 When it hears it, requesting more data from the server 1491 01:01:42,826 --> 01:01:46,026 by HTTP, gets back more HTML and it just adds it 1492 01:01:46,026 --> 01:01:50,156 into the existing DOM into the existing tree structure. 1493 01:01:50,456 --> 01:01:52,276 So how is this happening here? 1494 01:01:52,836 --> 01:01:54,596 Well, notice, I've got an input element. 1495 01:01:54,976 --> 01:01:58,026 This time, I gave it an ID so you can use name and ID 1496 01:01:58,026 --> 01:02:01,486 for partly similar purposes but ideas a bit better 1497 01:02:01,486 --> 01:02:03,116 because it means it has to be unique. 1498 01:02:03,336 --> 01:02:06,806 So if you know you specifically want that element in a web page 1499 01:02:06,806 --> 01:02:10,536 to be accessed with JavaScript if you have given an ID, now, 1500 01:02:10,536 --> 01:02:13,836 you can insure that when you get that element, you're getting 1501 01:02:13,896 --> 01:02:16,166 that one and only that one, and then I just happen 1502 01:02:16,166 --> 01:02:17,666 to submit by-- that looks like this. 1503 01:02:17,856 --> 01:02:21,386 So the magic must derive from this ID on my input. 1504 01:02:21,756 --> 01:02:22,966 So let me scroll up here. 1505 01:02:23,116 --> 01:02:26,586 So there is a bunch of code here, but fortunately, libraries 1506 01:02:26,586 --> 01:02:28,926 and APIs have made this kind of programing easier. 1507 01:02:28,926 --> 01:02:29,966 but I'm doing it old school, 1508 01:02:29,966 --> 01:02:31,946 sort of did the low level way just 1509 01:02:31,946 --> 01:02:33,356 so we can see what's really going on. 1510 01:02:33,706 --> 01:02:37,396 Here is my head tag, and here is a script tag therein, 1511 01:02:37,706 --> 01:02:39,426 and notice that I'm declaring what appears 1512 01:02:39,426 --> 01:02:42,266 to be a global variable, global in the sense that it's not 1513 01:02:42,266 --> 01:02:44,606 at the top of my file, but it is at the top 1514 01:02:44,606 --> 01:02:45,796 of my JavaScript code. 1515 01:02:45,796 --> 01:02:48,246 It's at the top of my script tag, so in that sense, 1516 01:02:48,246 --> 01:02:52,246 this is a global variable, XHR, and I'm initializing to null 1517 01:02:52,246 --> 01:02:55,556 so that it just has some known value, XHR is deliberate 1518 01:02:55,556 --> 01:02:58,996 because it turns out modern browsers support a special 1519 01:02:59,356 --> 01:03:03,826 feature in JavaScript called the XMLHttpRequest object, 1520 01:03:04,056 --> 01:03:08,316 kind of convoluted name, but this is a special object, 1521 01:03:08,516 --> 01:03:11,146 a special feature of JavaScript that allows you 1522 01:03:11,146 --> 01:03:15,366 to make http requests, get back the response, and then show them 1523 01:03:15,366 --> 01:03:17,226 to the user or embed them in the web page. 1524 01:03:17,226 --> 01:03:20,136 So the magic is ultimately gonna derive from this feature 1525 01:03:20,416 --> 01:03:22,046 of recent year's browsers. 1526 01:03:22,306 --> 01:03:23,556 So here is my quote function. 1527 01:03:24,076 --> 01:03:27,316 It's a little-- got a little bit of new syntax here. 1528 01:03:27,656 --> 01:03:30,536 The function called quote first does the following. 1529 01:03:30,536 --> 01:03:33,106 So this is a feature of JavaScript, PHP supports this 1530 01:03:33,106 --> 01:03:36,196 as well, as does java and C++ and other languages. 1531 01:03:36,516 --> 01:03:38,846 There is this notion in some languages of exceptions. 1532 01:03:38,846 --> 01:03:42,336 And actually, let's see, did that have it-- yeah. 1533 01:03:42,336 --> 01:03:43,576 So we haven't really seen this yet. 1534 01:03:43,576 --> 01:03:45,736 So in JavaScript, there's this notion of an exception, 1535 01:03:46,066 --> 01:03:47,916 and exception is a way for function 1536 01:03:48,166 --> 01:03:49,686 to say something bad happened 1537 01:03:49,926 --> 01:03:52,146 without returning some arbitrary value. 1538 01:03:52,146 --> 01:03:54,286 A lot of C functions return zero if there is a-- 1539 01:03:54,376 --> 01:03:56,586 return negative one if there is problem, 1540 01:03:56,586 --> 01:03:59,186 or they return some special value if there is a problem, 1541 01:03:59,186 --> 01:04:02,366 PHP meanwhile, tends to return false if there is a problem. 1542 01:04:02,696 --> 01:04:04,636 This is problematic, because suppose you're writing a 1543 01:04:04,636 --> 01:04:07,146 function in C and you wanna able to return a number, 1544 01:04:07,336 --> 01:04:09,076 well unfortunately, if something goes wrong, 1545 01:04:09,266 --> 01:04:11,846 you can't return a number because maybe 1546 01:04:11,846 --> 01:04:14,036 that is just the actual answer you're expecting. 1547 01:04:14,036 --> 01:04:15,946 If the function in C you're writing is suppose 1548 01:04:15,946 --> 01:04:18,226 to add two numbers together, well, what if the answer 1549 01:04:18,226 --> 01:04:22,076 of adding two plus negative three is negative one, 1550 01:04:22,076 --> 01:04:23,396 does that mean an error happened, 1551 01:04:23,396 --> 01:04:25,026 or does that mean the math was correct? 1552 01:04:25,316 --> 01:04:27,326 So in short, with C and languages like it, 1553 01:04:27,896 --> 01:04:31,126 the way that we implement error handling is pretty hackish, 1554 01:04:31,126 --> 01:04:31,326 right? 1555 01:04:31,326 --> 01:04:33,896 We return some special value and we have to check 1556 01:04:33,896 --> 01:04:34,926 for that with a condition. 1557 01:04:35,216 --> 01:04:37,166 Now, in languages like JavaScript, you have kind 1558 01:04:37,196 --> 01:04:39,876 of this back channel for signaling errors, 1559 01:04:39,876 --> 01:04:41,676 and it's called exception handling. 1560 01:04:41,956 --> 01:04:44,916 And with this model, what you do is you call a function as usual. 1561 01:04:45,146 --> 01:04:47,476 In this case, I'm writing a line of code like this, 1562 01:04:47,476 --> 01:04:50,726 XHR gives me a new XMLHttpRequest object. 1563 01:04:50,996 --> 01:04:52,846 This is new syntax for many of you. 1564 01:04:52,846 --> 01:04:55,266 But for now, just take for granted-- 1565 01:04:55,436 --> 01:04:57,576 take it for granted that this is what you have to type 1566 01:04:57,636 --> 01:05:00,256 to get a new object called XMLHttpRequest. 1567 01:05:00,656 --> 01:05:03,876 But notice, I'm only trying to execute this line of code. 1568 01:05:04,126 --> 01:05:06,296 So what's happening here is if something goes wrong, 1569 01:05:06,296 --> 01:05:07,736 like there is no internet connection 1570 01:05:07,736 --> 01:05:09,636 or the browser is too old to understand this, 1571 01:05:10,096 --> 01:05:13,066 what's gonna happen is this line of code is going 1572 01:05:13,066 --> 01:05:16,816 to throw an exemption, which is like a special variable, 1573 01:05:16,816 --> 01:05:19,236 special object that represents an error, 1574 01:05:19,236 --> 01:05:22,006 and someone playfully decided the corresponding syntax would 1575 01:05:22,006 --> 01:05:22,686 be catch. 1576 01:05:23,006 --> 01:05:26,176 And so, you write code that catches that error to detect 1577 01:05:26,336 --> 01:05:27,656 that something bad has happened. 1578 01:05:27,656 --> 01:05:29,656 Now, you won't need to write this much code yourself. 1579 01:05:29,656 --> 01:05:33,096 In fact, for the AJAX part of any code you write, 1580 01:05:33,096 --> 01:05:35,496 odds are you can abstract these details away 1581 01:05:35,496 --> 01:05:36,786 with a library, as you will. 1582 01:05:36,786 --> 01:05:39,886 See but for now, just realize this is what this is all about. 1583 01:05:40,086 --> 01:05:41,886 Now unfortunately, this is a stupid reality. 1584 01:05:41,886 --> 01:05:45,536 So as is often the case in the web world, different companies 1585 01:05:45,536 --> 01:05:47,586 like to do things different ways, and this line 1586 01:05:47,586 --> 01:05:51,686 of code will fail on older internet explorer browsers 1587 01:05:51,726 --> 01:05:52,886 because Microsoft decided 1588 01:05:52,886 --> 01:05:54,816 that the syntax would be this instead. 1589 01:05:55,026 --> 01:05:58,166 So the only reason I have to do this particular try and catch, 1590 01:05:58,236 --> 01:05:59,886 the only reason, lots of websites have 1591 01:05:59,886 --> 01:06:01,626 to do this these days is again, 1592 01:06:01,626 --> 01:06:03,986 because companies don't play nicely on the playground 1593 01:06:03,986 --> 01:06:05,436 when it comes to coming up with the standards. 1594 01:06:05,786 --> 01:06:08,556 So we're stuck with writing more lines of code than is ideal. 1595 01:06:08,796 --> 01:06:11,356 But the point for now is if at this point in the story 1596 01:06:11,516 --> 01:06:12,926 that variable is still null, 1597 01:06:13,106 --> 01:06:15,986 it must be you're browsing my website would like netscape1.0 1598 01:06:15,986 --> 01:06:18,546 and it just doesn't work, so I'm gonna catch that, yell at you, 1599 01:06:18,546 --> 01:06:19,696 and just return immediately. 1600 01:06:19,906 --> 01:06:21,686 But that generally does not happen these days. 1601 01:06:21,686 --> 01:06:22,596 So notice what I do. 1602 01:06:22,786 --> 01:06:24,746 It's not much line-- not much code at all. 1603 01:06:24,986 --> 01:06:27,126 I declare a variable, so in JavaScript, 1604 01:06:27,126 --> 01:06:28,916 there is a special keyword called var, 1605 01:06:28,986 --> 01:06:30,686 that says give me a variable. 1606 01:06:30,776 --> 01:06:31,786 It's not a data type. 1607 01:06:31,786 --> 01:06:34,666 You just say var x, var y, var url. 1608 01:06:34,976 --> 01:06:37,616 And now, notice in JavaScript, I assign a valuable-- 1609 01:06:37,706 --> 01:06:40,176 a value just with the equal sign as usual, "equals", 1610 01:06:40,176 --> 01:06:41,956 what's going on in here? 1611 01:06:42,506 --> 01:06:45,216 Well notice, I'm creating a string that starts with 1612 01:06:45,266 --> 01:06:49,436 "one.php?symbol=something". 1613 01:06:50,016 --> 01:06:52,886 So this is my way of constructing a url, 1614 01:06:52,886 --> 01:06:55,476 and then appending to it, some parameters. 1615 01:06:55,526 --> 01:06:57,306 This is what's also nice about get. 1616 01:06:57,306 --> 01:07:00,406 You can construct get request on the fly in code 1617 01:07:00,606 --> 01:07:02,556 because you just have to create a url, 1618 01:07:02,556 --> 01:07:03,906 and a url is just a string. 1619 01:07:04,196 --> 01:07:05,036 So what am I doing? 1620 01:07:05,356 --> 01:07:08,136 I'm creating url that starts with "1.php?-- 1621 01:07:08,136 --> 01:07:13,486 which says, here comes the parameters-- symbol=", and now, 1622 01:07:13,716 --> 01:07:15,916 this is a minor nuisance in JavaScript, 1623 01:07:16,046 --> 01:07:20,356 the concatenation operator is plus, whereas in php, it's dot. 1624 01:07:20,356 --> 01:07:22,556 Different philosophies, does the same thing. 1625 01:07:22,896 --> 01:07:24,826 So this is gonna concatenate onto the end 1626 01:07:24,826 --> 01:07:27,126 of this string, what document? 1627 01:07:27,536 --> 01:07:31,866 dot get element by ID "symbols value". 1628 01:07:32,446 --> 01:07:34,796 Now again, new function, but it really does what it says. 1629 01:07:34,796 --> 01:07:36,686 And this is one of the nice things too about JavaScript. 1630 01:07:36,686 --> 01:07:38,606 Most functions are just names very aptly, 1631 01:07:38,876 --> 01:07:42,776 get element by ID returns to you the objects in memory 1632 01:07:42,986 --> 01:07:47,126 that represents the symbols input field and dot value 1633 01:07:47,126 --> 01:07:49,116 like before, just gets me its specific value. 1634 01:07:49,396 --> 01:07:51,056 So in the end, if I typed in goog, 1635 01:07:51,056 --> 01:07:52,456 what does this actually do? 1636 01:07:52,696 --> 01:07:56,416 This creates a variable forming, called url, and it stores 1637 01:07:56,416 --> 01:08:01,596 in that this "string" here that is essentially the end 1638 01:08:01,596 --> 01:08:03,176 of the result of this line of code. 1639 01:08:03,516 --> 01:08:08,336 So now, if I haven't specified http:// and then cloud.cs50.net, 1640 01:08:08,556 --> 01:08:10,976 that's gonna be assumed, because just like in web pages, 1641 01:08:10,976 --> 01:08:12,206 you don't have to put urls 1642 01:08:12,256 --> 01:08:15,006 in your image tags and in your CSS tags. 1643 01:08:15,286 --> 01:08:18,956 You can just say a relative url, so this really is going to me 1644 01:08:18,956 --> 01:08:23,616 in something like in implied cloud.CS50.net/something. 1645 01:08:23,946 --> 01:08:25,896 So I don't need all of that mess at the beginning. 1646 01:08:25,896 --> 01:08:26,906 It's gonna inferred. 1647 01:08:27,116 --> 01:08:28,656 So what actually happens then? 1648 01:08:28,806 --> 01:08:31,056 Well, notice with this, three lines of code, 1649 01:08:31,056 --> 01:08:32,596 I got to do something really powerful. 1650 01:08:32,666 --> 01:08:36,926 1st, I'd say XHR on ready state change, robust but clear-- 1651 01:08:37,086 --> 01:08:39,926 what will be clear, equals handler, come back to that 1652 01:08:39,926 --> 01:08:43,376 in a moment, XHR.open, what method do I wanna use? 1653 01:08:43,376 --> 01:08:45,716 Gets, unfortunately, in this case, it's capitalized, 1654 01:08:45,716 --> 01:08:46,466 but it's the same thing. 1655 01:08:46,726 --> 01:08:47,946 What url do I wanna get? 1656 01:08:47,946 --> 01:08:50,106 And then true is a good thing to put here, 1657 01:08:50,106 --> 01:08:50,916 it means a synchronous. 1658 01:08:51,146 --> 01:08:54,196 AJAX means Asynchronous JavaScript and XML. 1659 01:08:54,686 --> 01:08:56,516 This just means don't put 1660 01:08:56,516 --> 01:08:58,656 up a stupid progress bar, something like that. 1661 01:08:58,796 --> 01:09:01,956 Just go get it and was turn the value as soon as you're ready. 1662 01:09:01,996 --> 01:09:04,766 It's a nonblocking call in computer science speak, 1663 01:09:05,046 --> 01:09:05,996 and then lastly, send. 1664 01:09:06,256 --> 01:09:08,316 Now, it doesn't matter so much the specifics for now, 1665 01:09:08,316 --> 01:09:09,486 what's the high level take away. 1666 01:09:09,776 --> 01:09:12,836 Those four lines of code together create a url, 1667 01:09:13,286 --> 01:09:16,616 then create a connection to the web server, cloud.cs50.net, 1668 01:09:16,946 --> 01:09:18,556 and then send those parameters. 1669 01:09:18,666 --> 01:09:19,036 That's it. 1670 01:09:19,036 --> 01:09:20,986 So it makes an http request. 1671 01:09:21,416 --> 01:09:23,606 We did the same thing in PHP code. 1672 01:09:23,846 --> 01:09:25,786 If you look through helpers.php, 1673 01:09:26,046 --> 01:09:29,056 we use a file called file_get_content. 1674 01:09:29,416 --> 01:09:32,986 This function in PHP does exactly what we described here 1675 01:09:32,986 --> 01:09:35,456 in JavaScript code, and it does it a little more cleanly. 1676 01:09:35,736 --> 01:09:36,826 But the magic now is this. 1677 01:09:37,406 --> 01:09:41,576 Notice that I'm saying XHR.onreadystaychange=handler. 1678 01:09:41,906 --> 01:09:44,306 What's need about JavaScript-- and you can actually do this 1679 01:09:44,306 --> 01:09:46,526 in C even though we never exercise this power, 1680 01:09:46,526 --> 01:09:47,816 you can do this in PHP too-- 1681 01:09:48,226 --> 01:09:51,846 you can pass functions around as though they are variables, 1682 01:09:51,886 --> 01:09:53,266 as though they are pointers. 1683 01:09:53,576 --> 01:09:57,686 So you can actually pass a function to another function 1684 01:09:57,836 --> 01:10:00,136 as an argument, or you can assign 1685 01:10:00,136 --> 01:10:02,906 to a variable the name of a function. 1686 01:10:03,306 --> 01:10:06,916 >> So it turns out that handler here is the name of a function 1687 01:10:07,116 --> 01:10:08,276 that I happen to write down-- 1688 01:10:08,276 --> 01:10:09,416 and we'll see what it does in a moment-- 1689 01:10:09,656 --> 01:10:14,016 and as these long words kind of suggests, when the states 1690 01:10:14,176 --> 01:10:19,456 of this special object, HXHR, changes, call this function. 1691 01:10:19,806 --> 01:10:21,766 So in other words, here is magic of AJAX. 1692 01:10:21,766 --> 01:10:24,036 You make a request and you tell the browser 1693 01:10:24,346 --> 01:10:27,326 which of your functions to call when the answer comes back 1694 01:10:27,326 --> 01:10:29,476 from the server, whether that's 20 milliseconds later 1695 01:10:29,646 --> 01:10:31,806 or two seconds later or even half a minute later, 1696 01:10:32,056 --> 01:10:33,396 that functions gonna get called, 1697 01:10:33,396 --> 01:10:35,516 and it's gonna be passed what the browser gave it. 1698 01:10:35,776 --> 01:10:37,246 Well, what does this function do? 1699 01:10:37,756 --> 01:10:38,996 Well, I've read in the manual 1700 01:10:39,406 --> 01:10:43,386 that if the variable called ready state=four-- 1701 01:10:43,386 --> 01:10:45,586 it's just arbitrary, but I copied-paste it-- 1702 01:10:45,916 --> 01:10:48,486 and if the status from the web server is 200-- 1703 01:10:48,566 --> 01:10:50,636 we've seen earlier today some bad statuses, 1704 01:10:50,636 --> 01:10:53,656 401, 404, 403, 500. 1705 01:10:53,866 --> 01:10:56,006 200, we never see, 'cause it's good. 1706 01:10:56,006 --> 01:10:58,236 Anytime you request a page on the web that comes back, 1707 01:10:58,586 --> 01:11:01,406 a secret number, namely 200, comes back. 1708 01:11:01,736 --> 01:11:05,086 So now, I'm gonna do this, alert of xhr.response text. 1709 01:11:05,086 --> 01:11:08,276 So a lot of words that just came out of my mouth, 1710 01:11:08,326 --> 01:11:11,336 but they take away is that this function handler got called, 1711 01:11:11,336 --> 01:11:14,736 and it alerted the user by passing in this value. 1712 01:11:14,916 --> 01:11:17,136 So what's actually inside of this text here, 1713 01:11:17,136 --> 01:11:21,566 8xhr.response text, is whatever the web page actually spit out. 1714 01:11:21,866 --> 01:11:22,986 So what did it spit out? 1715 01:11:22,986 --> 01:11:24,786 Well, let's mimic this request ourselves. 1716 01:11:24,786 --> 01:11:29,426 I said that it's gonna ask for "one.php?=goog". 1717 01:11:29,746 --> 01:11:31,896 Well, just do that ourselves, I saw a "one" 1718 01:11:31,896 --> 01:11:33,436 in here a moment ago, "one.php". 1719 01:11:33,436 --> 01:11:36,126 Doesn't seem to do anything. 1720 01:11:36,126 --> 01:11:40,506 But if I'd add this myself up top, ?symbol=goog 1721 01:11:40,506 --> 01:11:44,296 and then hit enter, it looks like this PHP script I wrote, 1722 01:11:44,296 --> 01:11:47,116 its purpose in life is just to contact yahoo, get a number, 1723 01:11:47,356 --> 01:11:48,836 and then spit it out to the screen. 1724 01:11:49,106 --> 01:11:50,496 So that's where that's coming from. 1725 01:11:50,766 --> 01:11:53,486 Unfortunately, just using alert's not all that sexy. 1726 01:11:53,536 --> 01:11:54,896 But if we look at the second version, 1727 01:11:54,896 --> 01:11:56,886 we can do something a little more familiar 1728 01:11:56,886 --> 01:11:57,766 with the place holder. 1729 01:11:58,026 --> 01:12:01,326 Notice that I can instead embed a response right 1730 01:12:01,326 --> 01:12:04,016 into a web page, slightly more sophisticated. 1731 01:12:04,306 --> 01:12:05,956 Notice that I can do something like this 1732 01:12:06,016 --> 01:12:08,486 and get back multiple pieces of information 1733 01:12:08,846 --> 01:12:10,156 with a sexy little progress bar. 1734 01:12:10,246 --> 01:12:14,286 Alright, there it is. 1735 01:12:14,796 --> 01:12:16,396 It acts-- the server is actually not slow, 1736 01:12:16,396 --> 01:12:19,116 if you look at what's going on there, just a-- 1737 01:12:19,916 --> 01:12:22,576 turns out, if you go call-- where is it, "2"-- 1738 01:12:22,656 --> 01:12:24,116 turns out if you call sleep five, 1739 01:12:24,206 --> 01:12:25,636 it will sleep for five seconds. 1740 01:12:25,806 --> 01:12:27,126 So, that's a useful simulation. 1741 01:12:27,546 --> 01:12:29,286 But let's see where else we can go with this. 1742 01:12:29,286 --> 01:12:32,836 Let me got to AJAX four, type in goog, get quote. 1743 01:12:33,446 --> 01:12:36,266 Alright, that was actually underwhelming 1744 01:12:36,306 --> 01:12:38,216 since that's a step backwards, but I'll skip that part here 1745 01:12:38,556 --> 01:12:40,536 and type in goog here and get quote, 1746 01:12:40,756 --> 01:12:42,326 so what's actually working here, well frankly, 1747 01:12:42,326 --> 01:12:43,656 I think the sexiest was number three. 1748 01:12:43,776 --> 01:12:44,846 So let's just look at this one. 1749 01:12:45,176 --> 01:12:47,926 So get quote induced this really fancy progress part 1750 01:12:47,926 --> 01:12:49,366 that I made, or downloaded. 1751 01:12:49,796 --> 01:12:51,186 So let's see how this thing works. 1752 01:12:51,186 --> 01:12:54,066 So in AJAX three, we have the following html. 1753 01:12:54,576 --> 01:12:57,326 Html is almost the same-- but notice what I've done, 1754 01:12:57,326 --> 01:12:59,256 and realize there is many ways I've could have done this. 1755 01:12:59,316 --> 01:13:01,526 I've got a form, I've got an [inaudible] handler, 1756 01:13:01,526 --> 01:13:03,116 and a function call returning falls. 1757 01:13:03,116 --> 01:13:04,656 So the form it self does not get submitted, 1758 01:13:04,846 --> 01:13:07,746 my JavaScript kicks in, I've got an input field for symbol, 1759 01:13:07,996 --> 01:13:11,366 and then notice this, I've got a div who's ID is progress, 1760 01:13:11,636 --> 01:13:13,106 then I'm using a CSS trick, 1761 01:13:13,306 --> 01:13:15,656 turns out there is a CSS property called Display, 1762 01:13:15,656 --> 01:13:17,536 and if you set it equal to a value of none, 1763 01:13:17,806 --> 01:13:20,126 it literally does not display that node. 1764 01:13:20,346 --> 01:13:22,516 So you know what that node actually is, 1765 01:13:22,566 --> 01:13:24,856 it's this [inaudible] here, pleasewait.shift. 1766 01:13:25,076 --> 01:13:27,096 So even though it looks like animation, this is just sort 1767 01:13:27,096 --> 01:13:29,096 of a 1990 style animated shift 1768 01:13:29,336 --> 01:13:30,856 that just always looks like this. 1769 01:13:31,236 --> 01:13:33,996 So what my code must be doing is that symbol-- 1770 01:13:33,996 --> 01:13:35,516 that progress bar is always there, 1771 01:13:35,676 --> 01:13:37,116 but by default, it's hidden. 1772 01:13:37,386 --> 01:13:38,866 So what I'm really doing is this, 1773 01:13:39,316 --> 01:13:41,796 inside of my JavaScript code here for version three, 1774 01:13:41,796 --> 01:13:44,566 I create the url as before, but then notice this trick. 1775 01:13:45,136 --> 01:13:47,756 I get the element by ID of progress, 1776 01:13:48,176 --> 01:13:52,196 I get it style property, which relates to CSS, specifically, 1777 01:13:52,196 --> 01:13:55,806 its display property, and I change it to "block", 1778 01:13:55,906 --> 01:13:57,886 which is ironically, the opposite of none. 1779 01:13:58,286 --> 01:14:01,406 And then in my handler function, which recall is what gets called 1780 01:14:01,406 --> 01:14:04,626 when this response comes back, I say document, I get element 1781 01:14:04,626 --> 01:14:07,126 by ID progress, that style that's display equals none. 1782 01:14:07,446 --> 01:14:09,646 So again, using this very simple primitive 1783 01:14:09,646 --> 01:14:12,336 of manipulating the dom a little something that looks like this, 1784 01:14:12,616 --> 01:14:15,046 I can now control the entirety of the web page. 1785 01:14:15,306 --> 01:14:17,926 And even though this was a lot, pretty soon and pretty fast 1786 01:14:17,926 --> 01:14:21,086 for all of us, these are pretty much all of the fundamentals 1787 01:14:21,086 --> 01:14:23,596 with which you're most favorite websites these days are 1788 01:14:23,596 --> 01:14:24,866 implemented, including Facebook. 1789 01:14:25,096 --> 01:14:27,596 So anytime you see Facebook's on progress bar, realize, 1790 01:14:27,836 --> 01:14:30,646 that is an XmlHttprequest object. 1791 01:14:31,116 --> 01:14:34,266 We'll see you on Monday.