1 00:00:09,516 --> 00:00:10,786 >> All right, welcome back. 2 00:00:11,006 --> 00:00:14,096 This is CS50 and this is the end of week 10, 3 00:00:14,436 --> 00:00:16,776 and amazingly we're almost done all right? 4 00:00:16,776 --> 00:00:18,636 We have lecture today, we have lecture Monday, 5 00:00:18,636 --> 00:00:20,326 we have a little Quiz 1 on Wednesday, 6 00:00:20,786 --> 00:00:24,736 one lecture thereafter on Monday the 21st and then Thanksgiving 7 00:00:24,736 --> 00:00:27,536 and the end with final projects the only last thing 8 00:00:27,536 --> 00:00:28,576 on the horizon there. 9 00:00:28,576 --> 00:00:32,086 So do keep this in mind, the details for Quiz 1 are already 10 00:00:32,086 --> 00:00:33,576 on the home page CS50.net. 11 00:00:33,836 --> 00:00:36,026 There's gonna be a review session as usual this Sunday. 12 00:00:36,026 --> 00:00:39,136 The sections on Sunday, Monday, Tuesday will be quiz review 13 00:00:39,376 --> 00:00:41,056 and notice on the PDF that's posted 14 00:00:41,056 --> 00:00:44,876 on CS50.net the same locations as last time. 15 00:00:44,876 --> 00:00:47,626 Know that the quiz is cumulative from week zero on up, 16 00:00:47,856 --> 00:00:50,016 can't really forget some of the stuff we learned back then, 17 00:00:50,286 --> 00:00:54,476 but realize we will emphasize material since Quiz 0. 18 00:00:54,986 --> 00:00:58,726 So a word on P Set 8, so a number of you have been tripping 19 00:00:58,726 --> 00:01:01,046 over an unfortunate issue with the Google plug-in 20 00:01:01,046 --> 00:01:02,296 which unfortunately has gotten worse 21 00:01:02,296 --> 00:01:05,786 over the last several months whereby on Firefox 22 00:01:05,786 --> 00:01:08,346 and amazingly Chrome itself, especially on Windows, 23 00:01:08,346 --> 00:01:12,046 it doesn't actually work properly unless you per- 24 00:01:12,046 --> 00:01:13,436 potentially tweak your settings. 25 00:01:13,716 --> 00:01:15,616 So if you're having an issue whereby you're getting some kind 26 00:01:15,616 --> 00:01:18,116 of Google Earth plug-in error in the bottom left-hand corner 27 00:01:18,116 --> 00:01:21,246 of CS50 Shuttle, go to CS50.net and one 28 00:01:21,246 --> 00:01:22,936 of the top announcements today is a link 29 00:01:22,936 --> 00:01:25,666 to a post I made last night with some troubleshooting tips. 30 00:01:25,666 --> 00:01:28,476 But if those do not help you, whether you're a PC or Mac user, 31 00:01:28,676 --> 00:01:31,646 catch me during break today or after or post back 32 00:01:31,846 --> 00:01:34,006 to that same thread and we will figure out how 33 00:01:34,006 --> 00:01:35,206 to get you up and running. 34 00:01:35,206 --> 00:01:38,916 And another troubleshooting tip too is just to diagnose things, 35 00:01:38,916 --> 00:01:41,956 quit as many programs as you're running including the appliance 36 00:01:42,236 --> 00:01:43,746 just in case it's a RAM issue. 37 00:01:43,746 --> 00:01:46,526 The Google Earth plug-in seems to be very memory intensive 38 00:01:46,826 --> 00:01:47,986 so that seems to help too. 39 00:01:48,316 --> 00:01:49,786 And then just a word on Submit 50. 40 00:01:49,786 --> 00:01:53,316 So I kinda screwed up last week and didn't foresee a bug 41 00:01:53,316 --> 00:01:55,186 in Submit 50, the result of which were some 42 00:01:55,186 --> 00:01:56,246 of the headaches you encountered, 43 00:01:56,476 --> 00:01:58,466 so let me just broadly apologize 44 00:01:58,466 --> 00:02:00,766 for any technical issues you've encountered during the term. 45 00:02:00,986 --> 00:02:04,276 Given the course's size and given our interest in trying 46 00:02:04,276 --> 00:02:06,666 to enhance things every year, we try to roll out things 47 00:02:06,666 --> 00:02:09,306 like the appliance and submit 50 and other tools 48 00:02:09,306 --> 00:02:11,066 to make the course, sort of bigger and better, 49 00:02:11,266 --> 00:02:13,346 but inevitably, statistically, 50 00:02:13,346 --> 00:02:16,056 we run into every possible technical issue thanks 51 00:02:16,056 --> 00:02:17,346 to such a large user base, 52 00:02:17,626 --> 00:02:19,676 but any such technical mistakes have been mine, 53 00:02:19,676 --> 00:02:21,126 so apologize for any frustration. 54 00:02:21,126 --> 00:02:24,606 It used to drive me nuts in college if there were bugs 55 00:02:24,696 --> 00:02:27,466 or problems with P Sets so I definitely empathize 56 00:02:27,466 --> 00:02:30,246 and sympathize and even grammatical mistakes drive me 57 00:02:30,246 --> 00:02:33,376 nuts so, apologies for any lack of perfection. 58 00:02:33,846 --> 00:02:39,666 So, speaking of lack of per- perfection too, in the interest 59 00:02:39,666 --> 00:02:41,416 of making us better next year, 60 00:02:41,416 --> 00:02:42,836 it's almost time to start applying. 61 00:02:42,836 --> 00:02:47,276 So if you ha- fancy the idea of TF-ing or CA-ing for CS50, 62 00:02:47,316 --> 00:02:50,206 the difference being TF's lead sections and grade and such 63 00:02:50,206 --> 00:02:52,156 and work with you on a weekly basis, 64 00:02:52,156 --> 00:02:56,206 CA's offer office hours one on one with students 65 00:02:56,206 --> 00:02:57,216 in need of P Set help. 66 00:02:57,466 --> 00:02:59,666 Know that you can head to that URL over the next couple 67 00:02:59,666 --> 00:03:02,416 of months, we'll likely start interviews in January and we try 68 00:03:02,416 --> 00:03:04,226 to lock in the team by spring break, 69 00:03:04,226 --> 00:03:05,546 so that's the trajectory we're on. 70 00:03:05,836 --> 00:03:08,126 Typically we look for in CF's folks who have taken 71 00:03:08,126 --> 00:03:10,076 at least two classes, so something this fall 72 00:03:10,266 --> 00:03:11,876 and some CS class in the spring. 73 00:03:12,046 --> 00:03:15,556 CA's are almost always alumni who have taken CS50 74 00:03:15,556 --> 00:03:17,936 and maybe one or more other classes. 75 00:03:17,936 --> 00:03:20,296 So we would love to grow the teams ranks next year. 76 00:03:20,916 --> 00:03:23,076 So this was fun, this past Monday Mark 77 00:03:23,076 --> 00:03:24,546 and company were in fact on campus. 78 00:03:24,546 --> 00:03:27,726 This is a screen shot of Facebook when I was your age, 79 00:03:28,096 --> 00:03:30,796 or a little older when it came out when I was in grad school, 80 00:03:30,976 --> 00:03:32,606 and it's evolved certainly over time. 81 00:03:32,606 --> 00:03:35,616 But it was actually quite fun prepping for this talk that Mark 82 00:03:35,616 --> 00:03:37,236 and Mike and Jocelyn gave on Monday 83 00:03:37,236 --> 00:03:39,716 and asking them questions 'cause it's really remarkable how 84 00:03:39,716 --> 00:03:41,786 quickly this thing caught on, right? 85 00:03:41,786 --> 00:03:44,386 It's sort of become part of our lexicon, and certainly part 86 00:03:44,386 --> 00:03:46,776 of Harvard's history but Mark released Facebook, 87 00:03:46,776 --> 00:03:49,596 version 1.0 which didn't even have this list of schools, 88 00:03:49,856 --> 00:03:53,356 in February of 2004, and at the end of 2004, 89 00:03:53,356 --> 00:03:55,846 he had 1 million users using the site. 90 00:03:56,026 --> 00:03:59,896 By the end of 2005, he had 5.5 million users. 91 00:03:59,896 --> 00:04:03,886 And certainly this is not the typical case for projects 92 00:04:03,886 --> 00:04:06,386 that you pore a week of effort into initially, 93 00:04:06,386 --> 00:04:08,326 and thus was born Facebook after just a week 94 00:04:08,326 --> 00:04:10,986 or mores initial effort, he's certainly poring more time 95 00:04:10,986 --> 00:04:11,796 into it thereafter, 96 00:04:11,796 --> 00:04:14,086 but it really is quite remarkable what he achieved. 97 00:04:14,086 --> 00:04:16,736 He then, this is a Crimson shot from years ago 98 00:04:16,736 --> 00:04:17,856 of Mark looking quite young, 99 00:04:17,856 --> 00:04:20,336 working in Kirkland House I believe at his computer. 100 00:04:20,336 --> 00:04:22,136 So this is apparently how Facebook was made, 101 00:04:22,396 --> 00:04:24,416 and then a shot, if you're unfamiliar with these guys, 102 00:04:24,476 --> 00:04:28,676 of Dustin Moskovitz and Chris Hughes, two of his roommates 103 00:04:28,936 --> 00:04:31,276 who worked with him early on on this site. 104 00:04:31,626 --> 00:04:35,526 But Mark also returned to CS50 in 2005, 105 00:04:35,526 --> 00:04:37,416 he never actually took the course, he jumped right 106 00:04:37,416 --> 00:04:39,886 into CS51 and 121 and other courses, 107 00:04:40,306 --> 00:04:45,176 but he gave a guest lecture in CS50 on December 7th, 2005, 108 00:04:45,176 --> 00:04:47,076 so just over a year and a half or so 109 00:04:47,076 --> 00:04:48,836 after having launched this initiative. 110 00:04:49,146 --> 00:04:50,906 And this was actually not even a lecture, 111 00:04:50,906 --> 00:04:52,396 this was a topic session 112 00:04:52,666 --> 00:04:54,236 to which students could optionally attend, 113 00:04:54,236 --> 00:04:55,256 much like a seminar. 114 00:04:55,256 --> 00:04:57,576 And at the time certainly, Facebook was catching on 115 00:04:57,786 --> 00:04:59,096 but it definitely didn't have the draw 116 00:04:59,096 --> 00:05:02,636 of some 250 person classroom that we had this past Monday, 117 00:05:02,636 --> 00:05:05,106 and I thought I would give you the screen shot here 118 00:05:05,106 --> 00:05:06,446 of Mark guest lecturing 119 00:05:06,446 --> 00:05:10,406 in Science Center C I think it was way back then, and we, 120 00:05:10,616 --> 00:05:12,466 we pulled the clip of course. 121 00:05:12,466 --> 00:05:15,646 So this is a clip of Mark talking to CS50 back in the day 122 00:05:15,876 --> 00:05:17,816 and it really does testify 123 00:05:17,816 --> 00:05:20,026 to just how much you can accomplish either one, 124 00:05:20,266 --> 00:05:23,196 with the sort of skills he came into Harvard with, but testament 125 00:05:23,196 --> 00:05:26,426 to his roommates savvy and the speed with which Dustin 126 00:05:26,426 --> 00:05:29,386 and these other guys caught on to new technologies 127 00:05:29,386 --> 00:05:31,246 after having just, as in Dustin's case, 128 00:05:31,246 --> 00:05:33,556 taken CS50 is really quite striking, 129 00:05:33,556 --> 00:05:35,596 and hopefully perhaps, empowering here. 130 00:05:35,716 --> 00:05:37,156 So I give you 2005. 131 00:05:37,156 --> 00:05:38,976 If we could dim the lights for just a moment Perry. 132 00:05:39,516 --> 00:05:43,546 [ Pause ] 133 00:05:44,046 --> 00:05:47,386 >> When I was here I started off taking 121, 134 00:05:47,386 --> 00:05:49,466 I never actually took 50 so I'm probably, 135 00:05:50,076 --> 00:05:51,666 you know you should've gotten the other guy 136 00:05:51,666 --> 00:05:54,976 who was doing Facebook, Dustin Moskovitz who is my roommate. 137 00:05:54,976 --> 00:05:57,576 When we got started, the site was written in PHP 138 00:05:57,576 --> 00:06:00,296 which isn't something that you learn in one of these classes, 139 00:06:00,296 --> 00:06:02,766 but fortunately if you have a good background in C, 140 00:06:02,766 --> 00:06:04,956 the syntax is very similar and you can pick it up in like, 141 00:06:05,166 --> 00:06:06,116 you know like a day or two. 142 00:06:06,836 --> 00:06:09,286 [laughter] And I was taking 161 at the time so I don't know 143 00:06:09,286 --> 00:06:11,316 if you guys know like the reputation of that course 144 00:06:11,316 --> 00:06:13,286 but I mean it was kinda heavy. 145 00:06:14,016 --> 00:06:15,796 It was a really fun course but it didn't leave me 146 00:06:15,796 --> 00:06:18,366 with much time to do anything else with Facebook 147 00:06:18,606 --> 00:06:22,746 so my roommate Dustin who I guess had just finished CS50 was 148 00:06:22,746 --> 00:06:25,676 like hey I I wanna help out, I wanna do the expansion and like, 149 00:06:25,726 --> 00:06:28,046 and help you figure out how to do this stuff. 150 00:06:28,046 --> 00:06:30,096 So I was like, you know that's pretty cool dude 151 00:06:30,096 --> 00:06:32,366 but you don't really know any PHP or anything like that, 152 00:06:32,426 --> 00:06:35,116 so that weekend he went home, bought the book Perl 153 00:06:35,116 --> 00:06:37,866 for Dummies, came back and was like, all right I'm ready to go. 154 00:06:37,866 --> 00:06:40,496 I was like dude, the site's written in PHP, not Perl. 155 00:06:40,996 --> 00:06:43,716 [laughter] 156 00:06:44,216 --> 00:06:47,666 >> But Dustin's doing quite well now, as is Facebook 157 00:06:47,666 --> 00:06:50,726 so realize therein lies the origins at Harvard 158 00:06:50,726 --> 00:06:52,866 of a little site called Facebook. 159 00:06:52,866 --> 00:06:56,656 So today we continue and really finish our conversation 160 00:06:56,656 --> 00:06:59,086 about JavaScript and some of the cool things that you can do. 161 00:06:59,576 --> 00:07:02,446 Recall that JavaScript, unlike PHP is client side 162 00:07:02,446 --> 00:07:04,636 and it really is JavaScript that's been driving a lot 163 00:07:04,636 --> 00:07:06,476 of the innovations in user interface 164 00:07:06,476 --> 00:07:07,636 over the past few years. 165 00:07:07,636 --> 00:07:10,376 The earliest version of Facebook very much was this sort 166 00:07:10,376 --> 00:07:13,116 of 1990's style website where you click on a link, 167 00:07:13,116 --> 00:07:14,456 it takes you to a new page 168 00:07:14,626 --> 00:07:16,576 and then the http connection completes. 169 00:07:16,576 --> 00:07:19,396 But now you have chat built in, you have status updates 170 00:07:19,396 --> 00:07:20,596 that get pushed to the browser, 171 00:07:20,596 --> 00:07:22,916 all thanks to this technology called AJAX, 172 00:07:23,006 --> 00:07:26,576 Asynchronous JavaScript in XML which is really just a fancy way 173 00:07:26,576 --> 00:07:29,276 of saying you've got some code running in the browser 174 00:07:29,316 --> 00:07:31,166 that was downloaded from the web server 175 00:07:31,346 --> 00:07:34,486 that is constantly asking the server for more information, 176 00:07:34,486 --> 00:07:36,586 more chat messages, more status updates, 177 00:07:36,586 --> 00:07:37,726 more photos and the like. 178 00:07:37,726 --> 00:07:40,416 And so you have much more seamless user interfaces 179 00:07:40,416 --> 00:07:42,126 on Google Maps, on Gmail and all 180 00:07:42,126 --> 00:07:44,476 of these very popular websites these days. 181 00:07:44,746 --> 00:07:47,986 Back in the day when I learned HTML, 182 00:07:47,986 --> 00:07:50,996 there was a wonderful tag called the blink tag. 183 00:07:51,176 --> 00:07:54,936 The world sort of collectively put an end to this tag years ago 184 00:07:54,936 --> 00:07:56,006 but thanks to JavaScript, 185 00:07:56,006 --> 00:07:58,496 you can actually resurrect an annoying little feature 186 00:07:58,496 --> 00:07:59,416 of the web like this. 187 00:07:59,416 --> 00:08:02,236 And just to kind of tie together some of the syntax we looked 188 00:08:02,236 --> 00:08:03,446 at on Monday and prior, 189 00:08:03,696 --> 00:08:06,816 I thought we would resurrect briefly, this blink tag, 190 00:08:06,816 --> 00:08:08,246 see how we can do that, 191 00:08:08,506 --> 00:08:11,136 but really by extension how we can control the aesthetics 192 00:08:11,136 --> 00:08:14,656 of a page by way of CSS and JavaScript working together 193 00:08:14,656 --> 00:08:18,106 and then we'll dive into this technology itself called AJAX. 194 00:08:18,136 --> 00:08:22,366 So this web page, if I pull up its source here and scroll 195 00:08:22,366 --> 00:08:23,626 down to the very bottom, 196 00:08:23,836 --> 00:08:26,556 you'll see that I've indeed used the blink tag, 197 00:08:26,556 --> 00:08:30,036 but 99% of browsers today-- it's a made-up statistic-- 198 00:08:30,256 --> 00:08:32,206 do not support the blink tag anymore. 199 00:08:32,206 --> 00:08:33,516 It's one of the few instances 200 00:08:33,516 --> 00:08:36,146 where the world has collectively decided to kill support 201 00:08:36,146 --> 00:08:38,326 for a tag 'cause it was simply annoying. 202 00:08:39,696 --> 00:08:43,916 So here we have a blink tag inside of which is an H1 tag. 203 00:08:43,916 --> 00:08:45,876 That just typically makes text big and bold. 204 00:08:46,126 --> 00:08:48,706 So it turns out that it's because of JavaScript 205 00:08:48,706 --> 00:08:51,036 that this code is actually, 206 00:08:51,036 --> 00:08:53,116 that this tag is actually now blinking. 207 00:08:53,116 --> 00:08:55,226 Let me go into my appliance here 208 00:08:55,796 --> 00:08:58,046 and actually I'm gonna use my terminal window. 209 00:08:58,046 --> 00:09:01,426 So let me remind you of one feature of using Mac OS 210 00:09:01,426 --> 00:09:03,086 or Windows or really any operating system 211 00:09:03,086 --> 00:09:05,096 with the appliance, and we'll continue this conversation 212 00:09:05,316 --> 00:09:06,486 at the very last lecture. 213 00:09:06,826 --> 00:09:08,346 When you exit this course, 214 00:09:08,346 --> 00:09:11,216 you're not gonna need necessarily or even want 215 00:09:11,216 --> 00:09:13,636 to use the CS50 appliance to do programming 216 00:09:13,636 --> 00:09:14,466 and you don't need to. 217 00:09:14,466 --> 00:09:16,936 It's really been a sand box that's been pre-configured 218 00:09:16,936 --> 00:09:19,086 for all of us to have the same uniform environment 219 00:09:19,296 --> 00:09:22,016 but it's representative of a typical web server, 220 00:09:22,016 --> 00:09:25,546 it's representative of a typical Linux and indeed even I 221 00:09:25,546 --> 00:09:27,906 and the TF's and CA's, very often when we're writing 222 00:09:27,906 --> 00:09:29,266 out own programming projects, 223 00:09:29,426 --> 00:09:31,496 we actually do use virtual machines. 224 00:09:31,496 --> 00:09:33,316 We might not use the CS50 appliance, 225 00:09:33,316 --> 00:09:35,766 but we install Windows in a virtual machines, 226 00:09:35,766 --> 00:09:37,676 we might install Linux in a virtual machine. 227 00:09:37,866 --> 00:09:40,316 Now with Mac OS Lion we might install Mac OS 228 00:09:40,316 --> 00:09:43,366 in a virtual machine, because in terms of designing software 229 00:09:43,366 --> 00:09:46,256 and testing software, it's wonderfully useful if I can sit 230 00:09:46,256 --> 00:09:49,376 at home with my big like LCD monitor on my desktop 231 00:09:49,576 --> 00:09:52,126 but have Windows here and another version of Mac OS here 232 00:09:52,126 --> 00:09:54,216 and Linux here and some other flavor of Linux w- all 233 00:09:54,216 --> 00:09:57,206 with different browsers, i.e. Chrome, Firefox each 234 00:09:57,206 --> 00:09:58,366 in their own little environments. 235 00:09:58,596 --> 00:10:00,786 So realize the appliance is meant to be representative 236 00:10:00,786 --> 00:10:04,836 of this opportunity to design websites and other projects 237 00:10:05,176 --> 00:10:09,036 in nicely controlled testing environments. 238 00:10:09,336 --> 00:10:11,096 So we will discuss in a couple 239 00:10:11,096 --> 00:10:14,226 of weeks how you can transition off this environment altogether. 240 00:10:14,426 --> 00:10:15,286 But for now what I'm going 241 00:10:15,286 --> 00:10:17,776 to do is use my own Mac's terminal program, 242 00:10:17,776 --> 00:10:20,046 so this is under your applications folder 243 00:10:20,046 --> 00:10:21,776 in utilities on Mac OS. 244 00:10:21,776 --> 00:10:24,056 In Windows the comparable program is called PuTTY, 245 00:10:24,106 --> 00:10:25,186 P-U-T-T-Y, 246 00:10:25,526 --> 00:10:28,956 and on manual.cs50.net we have a nice screen shot based tutorial 247 00:10:28,956 --> 00:10:31,056 on how to do the same thing but on Windows. 248 00:10:31,096 --> 00:10:36,396 But for now I'm gonna do SSHJHarvard@192.168.50 249 00:10:36,396 --> 00:10:38,236 and that's my appliance's IP Address. 250 00:10:38,426 --> 00:10:40,846 When I hit enter, I'm prompted to log in, so I'm gonna go ahead 251 00:10:40,846 --> 00:10:43,516 and type crimson and then I have my prompt. 252 00:10:43,666 --> 00:10:46,386 So this is giving me a terminal window on the appliance 253 00:10:46,576 --> 00:10:47,726 but outside of the appliance. 254 00:10:47,936 --> 00:10:49,906 And this, by extension, is representative 255 00:10:50,106 --> 00:10:53,616 of how you can start after CS50, or even for your final projects, 256 00:10:53,616 --> 00:10:56,886 paying some random third party company to give you an account 257 00:10:57,216 --> 00:11:00,436 on some remote server that has web s- web server, 258 00:11:00,436 --> 00:11:03,066 it has a my SQL server, has an email server and the like 259 00:11:03,346 --> 00:11:05,596 and you, sitting in your own dorm room or Starbucks, 260 00:11:05,806 --> 00:11:10,166 can connect via this tool called SSH to that remote server 261 00:11:10,166 --> 00:11:12,146 and get this familiar terminal window. 262 00:11:12,386 --> 00:11:13,466 So that's all I've done here. 263 00:11:13,466 --> 00:11:15,946 I just simply have a terminal window i- on the appliance 264 00:11:16,036 --> 00:11:18,126 but running on my own Mac, and the nice thing 265 00:11:18,126 --> 00:11:19,806 about this it's just a little more zippy, 266 00:11:19,806 --> 00:11:21,076 it's a little more responsive and it's 267 00:11:21,076 --> 00:11:23,586 in my own comfortable operating system. 268 00:11:23,856 --> 00:11:28,166 So I'm gonna go into public HTML and I'm gonna go ahead and open 269 00:11:28,356 --> 00:11:30,446 with another program that we've not really used 270 00:11:30,446 --> 00:11:32,056 or preached this term called nano. 271 00:11:32,366 --> 00:11:33,736 So it turns out when you use SSH, 272 00:11:33,856 --> 00:11:36,806 you can't necessarily run something like gedit 273 00:11:36,806 --> 00:11:39,296 because when you're using SSH in a terminal window, 274 00:11:39,546 --> 00:11:41,786 all you have is this command line environment. 275 00:11:41,786 --> 00:11:44,316 So if I ran gedit and then the name of a file, 276 00:11:44,496 --> 00:11:46,146 I'd likely get some kind of error 277 00:11:46,306 --> 00:11:48,736 because when you're using a program 278 00:11:48,736 --> 00:11:51,226 like this it can't just send the colorful, 279 00:11:51,226 --> 00:11:54,286 graphical user interface over the internet to your screen 280 00:11:54,536 --> 00:11:55,786 without special software. 281 00:11:55,786 --> 00:11:58,316 So we need a simpler text editor if I want to look 282 00:11:58,316 --> 00:12:01,536 at this file blink.HTML and a very popular 283 00:12:01,536 --> 00:12:04,496 and very simple text editor is called nano. 284 00:12:04,496 --> 00:12:07,356 And if you ever read through 2010's CS50 P Sets, 285 00:12:07,606 --> 00:12:10,596 this is what your predecessors used for quite some time, 286 00:12:10,596 --> 00:12:11,986 gedit was a new thing this year. 287 00:12:12,346 --> 00:12:17,326 And you'll see just kind of a Linux version of what we'd call 288 00:12:17,326 --> 00:12:19,966 like notepad on a PC or text edit on a Mac. 289 00:12:20,386 --> 00:12:23,746 And for now, this color scheme is awful so I'm going to cheat 290 00:12:23,746 --> 00:12:28,406 and use another program called Vim which is we have seminar 291 00:12:28,406 --> 00:12:30,056 on online, but here we have it. 292 00:12:30,296 --> 00:12:33,656 This is all text-based, right, I can't actually click or copy 293 00:12:33,656 --> 00:12:35,846 and paste in the same way so there's some limitations. 294 00:12:36,076 --> 00:12:38,156 But for now, all I want to do is look at this code. 295 00:12:38,366 --> 00:12:40,406 So there's my same blink tag. 296 00:12:40,406 --> 00:12:43,536 There is some CSS which is putting a margin of white space 297 00:12:43,536 --> 00:12:45,976 around it 'cause I wanted it roughly centered in the screen. 298 00:12:46,266 --> 00:12:48,946 So let's actually look at the script tag up top. 299 00:12:49,156 --> 00:12:51,716 I appear to have written inside of a script tag, 300 00:12:51,716 --> 00:12:54,526 a function called blinker, just an arbitrary name here. 301 00:12:54,766 --> 00:12:56,926 Takes no argument, and it does the following. 302 00:12:56,926 --> 00:12:59,146 It's using a few features of JavaScript we haven't seen yet 303 00:12:59,146 --> 00:13:00,766 but they're relatively straightforward. 304 00:13:01,046 --> 00:13:03,946 So document recalls this special global variable, 305 00:13:03,946 --> 00:13:06,836 this document object that represents the DOM, 306 00:13:07,026 --> 00:13:08,436 document object model. 307 00:13:08,436 --> 00:13:08,876 What is that? 308 00:13:09,126 --> 00:13:11,346 Just the tree that represents your HTML. 309 00:13:11,656 --> 00:13:13,966 So inside of this document object, 310 00:13:14,066 --> 00:13:17,186 there's apparently a function, more properly called a method, 311 00:13:17,536 --> 00:13:20,386 called get element by tag name, 312 00:13:20,586 --> 00:13:22,126 and this really does what it says. 313 00:13:22,126 --> 00:13:24,606 When you call this function, it is going to get all 314 00:13:24,606 --> 00:13:28,446 of the elements, all of the tags on the page whose name is blank. 315 00:13:28,716 --> 00:13:30,656 So in this case there's only one such tag, 316 00:13:30,866 --> 00:13:33,726 but the implication here is that this function is generalized 317 00:13:33,946 --> 00:13:36,776 so I could actually enable multiple blink tags all 318 00:13:36,776 --> 00:13:37,656 over my website. 319 00:13:37,976 --> 00:13:39,006 So what is this return? 320 00:13:39,546 --> 00:13:41,946 It's going to return an array, by definition. 321 00:13:41,946 --> 00:13:44,766 Get elements by tag name, returns an array of all 322 00:13:44,766 --> 00:13:47,366 of those blank elements, the rectangles 323 00:13:47,366 --> 00:13:48,636 from last Monday's picture. 324 00:13:48,956 --> 00:13:51,626 So this is just a four loop, it's gonna iterate from 0 on up 325 00:13:51,626 --> 00:13:52,986 to the length of that array. 326 00:13:53,386 --> 00:13:54,966 In this case the length is gonna be one 327 00:13:54,966 --> 00:13:56,676 so this loop's only gonna execute once, 328 00:13:56,996 --> 00:13:58,286 and then we have this branch. 329 00:13:58,526 --> 00:14:00,396 So if blink's bracket I, 330 00:14:00,616 --> 00:14:04,646 so if the [inaudible] blink tag has a CSS style 331 00:14:05,026 --> 00:14:09,086 of visibility equal to quote unquote hidden, I wanna go ahead 332 00:14:09,086 --> 00:14:11,216 and change that style to visible. 333 00:14:11,486 --> 00:14:12,866 So just to back up a bit, 334 00:14:13,076 --> 00:14:16,676 there are CSS properties involving invisibility 335 00:14:16,676 --> 00:14:19,536 and display of information so you can turn things on or off, 336 00:14:19,536 --> 00:14:20,696 you can show or hide them. 337 00:14:20,956 --> 00:14:23,766 And in general, the code for that would be something 338 00:14:23,766 --> 00:14:27,716 like this, an element's name like ad- you might have a div- 339 00:14:27,966 --> 00:14:31,056 with an ID of fu and if you want to hide it 340 00:14:31,056 --> 00:14:33,066 on the web page even though it's still actually there 341 00:14:33,066 --> 00:14:36,996 on the source code, you could say visibility hidden, 342 00:14:37,366 --> 00:14:38,006 semicolon. 343 00:14:38,006 --> 00:14:39,646 So you would put that in the appropriate place 344 00:14:39,646 --> 00:14:40,776 on your web page for CSS. 345 00:14:41,236 --> 00:14:43,976 What this is doing here in JavaScript is exactly that. 346 00:14:44,396 --> 00:14:45,906 So one of the additional features we get 347 00:14:45,906 --> 00:14:48,186 from JavaScript is the ability programmatically 348 00:14:48,346 --> 00:14:52,216 to change the CSS in our page- to add classes, remove classes, 349 00:14:52,216 --> 00:14:53,776 to add styles, remove styles. 350 00:14:54,086 --> 00:14:55,976 So all this branch is doing is it's saying 351 00:14:56,256 --> 00:15:01,166 if the blink element is visible, rather is hidden, 352 00:15:01,166 --> 00:15:03,976 make it visible, otherwise make it hidden. 353 00:15:04,376 --> 00:15:06,436 And because we've never even talked about visibility, 354 00:15:06,436 --> 00:15:09,006 all elements by default are visible. 355 00:15:09,006 --> 00:15:10,076 They are not hidden. 356 00:15:10,326 --> 00:15:12,496 So by default, this tag is gonna display. 357 00:15:12,696 --> 00:15:15,376 So the first line of code that's gonna execute is gonna be this 358 00:15:15,376 --> 00:15:19,276 one because if it's not hidden, which it's not in our HTML, 359 00:15:19,356 --> 00:15:20,716 this is going to make it hidden. 360 00:15:21,106 --> 00:15:22,306 And that's it. 361 00:15:22,306 --> 00:15:24,426 So this function on its own seems 362 00:15:24,426 --> 00:15:26,156 to just make something that's sh- 363 00:15:26,156 --> 00:15:28,396 that's visible hidden, or vice versa. 364 00:15:28,656 --> 00:15:30,326 But now there's this one other line of code 365 00:15:30,326 --> 00:15:33,456 and this is another special JavaScript object that has a lot 366 00:15:33,456 --> 00:15:34,916 of functionality packed into it. 367 00:15:35,086 --> 00:15:37,016 Window is another global object 368 00:15:37,216 --> 00:15:38,976 that really represents what it sounds like, 369 00:15:39,016 --> 00:15:40,816 the browser window itself. 370 00:15:40,816 --> 00:15:43,016 And there's some special functionality associated 371 00:15:43,016 --> 00:15:45,856 with your window among which is timers, 372 00:15:46,076 --> 00:15:47,536 the ability to set timers 373 00:15:47,746 --> 00:15:49,826 that go off every some number of milliseconds. 374 00:15:50,316 --> 00:15:53,876 So window.setinterval does exactly that. 375 00:15:53,876 --> 00:15:59,386 This says set timer whereby the blinker function will get called 376 00:15:59,386 --> 00:16:01,416 every 500 milliseconds. 377 00:16:01,816 --> 00:16:03,236 So the implication of that is 378 00:16:03,236 --> 00:16:04,706 that here's the function blinker, 379 00:16:04,936 --> 00:16:06,476 here's its name repeated down here. 380 00:16:06,636 --> 00:16:07,996 Notice-- this is important-- 381 00:16:07,996 --> 00:16:10,366 that this is not a function call 'cause 382 00:16:10,366 --> 00:16:11,786 that would mean call it here. 383 00:16:12,076 --> 00:16:14,286 Instead we want to pass the name 384 00:16:14,286 --> 00:16:16,256 of the function into set interval. 385 00:16:16,546 --> 00:16:19,066 So it turns out you can do this in C. We never once did this, 386 00:16:19,426 --> 00:16:22,376 but just as in C, there are pointers to variables, 387 00:16:22,376 --> 00:16:24,136 pointers to memory and such. 388 00:16:24,396 --> 00:16:26,206 You can also treat function names 389 00:16:26,206 --> 00:16:27,966 as pointers and pass them around. 390 00:16:28,606 --> 00:16:30,316 But we typically, well we haven't done 391 00:16:30,316 --> 00:16:33,316 that in any examples thus far, but JavaScript allows this too. 392 00:16:33,516 --> 00:16:37,656 So I can pass a function by its name, conceptually by pointer, 393 00:16:37,986 --> 00:16:41,056 to this other function so that sent interval now has the 394 00:16:41,056 --> 00:16:43,176 ability to go there, via that pointer, 395 00:16:43,366 --> 00:16:45,766 and call that function every half a second, 396 00:16:45,856 --> 00:16:47,296 every 500 milliseconds. 397 00:16:47,666 --> 00:16:50,406 So the end result is the following: if I go back 398 00:16:50,406 --> 00:16:52,466 to my browser and watch this load, 399 00:16:52,466 --> 00:16:54,676 that is indeed blinking every half second 400 00:16:54,816 --> 00:16:57,216 because every half second that timer's going off, 401 00:16:57,306 --> 00:16:58,336 blinker's getting called, 402 00:16:58,336 --> 00:17:01,106 it's very rapidly getting all the blink elements on the page. 403 00:17:01,106 --> 00:17:02,746 If they're visible it makes them hidden. 404 00:17:02,916 --> 00:17:05,436 If they're hidden, it makes them visible, and then repeats. 405 00:17:05,746 --> 00:17:08,826 And so now we have the ability to control the CSS of the page 406 00:17:08,826 --> 00:17:12,546 and that's all it's doing is its changing the CSS on and off. 407 00:17:13,896 --> 00:17:16,376 Any questions about this trick? 408 00:17:16,576 --> 00:17:16,686 Yeah. 409 00:17:16,686 --> 00:17:17,016 >> 410 00:17:17,016 --> 00:17:22,000 [ Inaudible audience question ] 411 00:17:22,546 --> 00:17:24,706 >> Um hum. 412 00:17:24,706 --> 00:17:24,816 >> [Inaudible] 413 00:17:24,816 --> 00:17:25,386 >> Good question. 414 00:17:25,416 --> 00:17:28,996 If you had an actual CSS file, like styles.css inside 415 00:17:28,996 --> 00:17:30,916 of which was an explicit declaration 416 00:17:30,916 --> 00:17:32,576 that this tag be hidden or visible, 417 00:17:32,866 --> 00:17:33,876 which would have priority? 418 00:17:34,016 --> 00:17:35,696 The JavaScript code would override that. 419 00:17:35,696 --> 00:17:38,276 So the static file that you downloaded is the default, 420 00:17:38,466 --> 00:17:41,236 but with JavaScript code, you can change thing entirely. 421 00:17:41,686 --> 00:17:43,606 And so the connection here to something like Facebook 422 00:17:43,606 --> 00:17:45,566 and the chat window or the status updates 423 00:17:45,566 --> 00:17:48,206 that are automatically pushed is akin to this feature 424 00:17:48,206 --> 00:17:50,626 where there's some line of code that Facebook has written 425 00:17:50,826 --> 00:17:54,016 that is effectively equivalent to calling an interval-- 426 00:17:54,016 --> 00:17:55,826 calling some function every few seconds 427 00:17:55,826 --> 00:17:57,826 or every minute checking for more data. 428 00:17:58,116 --> 00:18:00,306 But in reality there's even more fancy things going 429 00:18:00,306 --> 00:18:01,616 on with these huge websites. 430 00:18:01,616 --> 00:18:03,966 It would actually hammer the heck out of Facebook's server 431 00:18:04,086 --> 00:18:06,076 if every half second every one 432 00:18:06,076 --> 00:18:09,456 of its 800 million users were hitting their servers like this. 433 00:18:09,926 --> 00:18:12,816 And so better typically is for a browser 434 00:18:12,816 --> 00:18:15,836 to maintain a longer connection and listen to, 435 00:18:15,836 --> 00:18:18,286 talk to the web server for say 30 seconds at a time-- 436 00:18:18,556 --> 00:18:20,956 this is a technology known as long pulling, 437 00:18:21,166 --> 00:18:24,016 whereby you don't keep making these http requests, 438 00:18:24,016 --> 00:18:25,386 you make them every 30 seconds 439 00:18:25,416 --> 00:18:27,626 and the server pushes information to you 440 00:18:27,626 --> 00:18:31,076 within that window of 30 seconds when it has more information. 441 00:18:31,076 --> 00:18:33,326 But we would have to really look underneath the hood to figure 442 00:18:33,326 --> 00:18:35,926 out exactly how Facebook implements this particular 443 00:18:35,926 --> 00:18:36,506 feature now. 444 00:18:36,506 --> 00:18:38,976 But Gmail too, how does your inbox automatically get 445 00:18:38,976 --> 00:18:39,426 new mail? 446 00:18:39,716 --> 00:18:42,516 It's because the JavaScript code Google has written is pulling 447 00:18:42,516 --> 00:18:44,956 their server, some number of seconds and checking 448 00:18:45,006 --> 00:18:48,166 if you have new mail and updating the HTML accordingly. 449 00:18:48,546 --> 00:18:51,126 So that's blinker, but we can only do so much 450 00:18:51,126 --> 00:18:53,096 if we're just doing things with aesthetics. 451 00:18:53,136 --> 00:18:55,136 So here's a complex looking picture 452 00:18:55,136 --> 00:18:58,196 that really just describes what you can really do now 453 00:18:58,196 --> 00:18:59,066 with JavaScript. 454 00:18:59,066 --> 00:19:02,136 So over here on the left we have a rectangle representing a 455 00:19:02,136 --> 00:19:05,086 browser and on the right we have another rectangle representing 456 00:19:05,376 --> 00:19:06,056 a server. 457 00:19:06,326 --> 00:19:10,156 But AJAX essentially does the following: if you have down- 458 00:19:10,156 --> 00:19:12,206 if you visited something like Gmail.com 459 00:19:12,206 --> 00:19:14,846 and you've gotten your default inbox and your labels and all 460 00:19:14,846 --> 00:19:17,596 of that and you've got your email at that moment in time, 461 00:19:17,866 --> 00:19:19,186 what happens thereafter? 462 00:19:19,436 --> 00:19:21,996 Well, the user interface of Gmail, or Facebook, 463 00:19:21,996 --> 00:19:24,856 or any of these big websites these days can in step one, 464 00:19:25,126 --> 00:19:28,106 make a JavaScript call just like the blinker function 465 00:19:28,446 --> 00:19:31,796 and it can use a special object that we've not talked about 466 00:19:31,796 --> 00:19:34,336 yet called XML http request. 467 00:19:34,816 --> 00:19:36,716 So just as document is an object, 468 00:19:36,716 --> 00:19:38,916 just as window is an object, this is just another type 469 00:19:39,126 --> 00:19:42,776 of object in JavaScript, and what this feature can do-- 470 00:19:42,776 --> 00:19:44,866 and it was only introduced several years ago-- 471 00:19:45,136 --> 00:19:48,616 it has the ability to make additional http requests 472 00:19:49,036 --> 00:19:53,106 from browser to server in order to request more data. 473 00:19:53,396 --> 00:19:55,706 So Google Maps, when you click and drag on the map and all 474 00:19:55,706 --> 00:19:58,426 of the sudden you get more tiles, more squares of the map, 475 00:19:58,846 --> 00:20:02,356 that's thanks to this XML http request object making, 476 00:20:02,356 --> 00:20:05,346 in step three, another request and getting back more data. 477 00:20:05,636 --> 00:20:07,976 Now this picture's actually a bit data- dated. 478 00:20:07,976 --> 00:20:12,596 It says XML data because indeed, AJAX, Asynchronous JavaScript 479 00:20:12,596 --> 00:20:18,016 and XML i- was, XML was typically the transport 480 00:20:18,016 --> 00:20:21,436 mechanism used to get more data from servers to browsers. 481 00:20:21,686 --> 00:20:22,526 What is XML? 482 00:20:22,526 --> 00:20:23,776 It's super simple. 483 00:20:23,916 --> 00:20:27,286 XML is sort of like make your own HTML. 484 00:20:27,286 --> 00:20:31,556 Whereas in HTML you have a fixed number of elements, 485 00:20:31,786 --> 00:20:34,316 you have the HTML element, you have the head element, 486 00:20:34,316 --> 00:20:37,606 you have H1 and so forth, all of those were decided upon 487 00:20:37,836 --> 00:20:41,476 by a group of people in a room saying this is what makes 488 00:20:41,476 --> 00:20:42,656 up HTML 5. 489 00:20:42,656 --> 00:20:44,726 But with XML, you can have anything. 490 00:20:44,726 --> 00:20:46,856 You can have for instance element called Class 491 00:20:47,556 --> 00:20:48,766 and then closed class. 492 00:20:48,766 --> 00:20:50,826 You might have an element called students, 493 00:20:51,116 --> 00:20:52,566 and then closed students. 494 00:20:52,566 --> 00:20:55,916 And then you might have in here an XML element called students 495 00:20:55,916 --> 00:20:58,176 and maybe this student has an ID of 123, 496 00:20:58,526 --> 00:20:59,886 and then closed students. 497 00:20:59,886 --> 00:21:02,526 And then in here we might have an element like name, 498 00:21:02,526 --> 00:21:04,186 so open bracket name David, 499 00:21:04,186 --> 00:21:05,866 closed bracket name, and so forth. 500 00:21:05,866 --> 00:21:08,176 In other words, XML is like make your own HTML. 501 00:21:08,576 --> 00:21:11,586 And the motivation for this is because you have the ability now 502 00:21:11,836 --> 00:21:15,576 to create this very simple text format structured however you 503 00:21:15,576 --> 00:21:18,126 want, but you can include both data, 504 00:21:18,126 --> 00:21:21,566 and let's call it metadata, the data here is david 505 00:21:21,566 --> 00:21:23,876 and one two three, like those are arguably the most 506 00:21:23,976 --> 00:21:26,376 interesting and information bearing pieces 507 00:21:26,376 --> 00:21:27,566 of content in this file. 508 00:21:27,856 --> 00:21:30,956 The other stuff like class, students, student, 509 00:21:31,126 --> 00:21:32,766 name, this is metadata. 510 00:21:32,766 --> 00:21:35,436 It's useful because it's like the names of the keys, 511 00:21:35,586 --> 00:21:37,246 but generally we care about the value. 512 00:21:37,246 --> 00:21:40,446 So XML allows you to kind of wrap up some data, 513 00:21:40,586 --> 00:21:42,906 key value pairs if you will, and send them 514 00:21:42,906 --> 00:21:44,336 from server to browser. 515 00:21:44,566 --> 00:21:46,096 But frankly this is verbose right? 516 00:21:46,096 --> 00:21:48,646 This is very, this is a lot of code, a lot of, 517 00:21:48,646 --> 00:21:52,426 a lot of syntax just to send the word david 518 00:21:52,426 --> 00:21:53,876 and the number one two three. 519 00:21:54,206 --> 00:21:56,476 So there's another format all together that we'll see 520 00:21:56,476 --> 00:21:58,786 in much more detail today and this is something called JSON 521 00:21:58,826 --> 00:22:00,676 and we talked about this briefly the other day 522 00:22:00,676 --> 00:22:03,076 and saw little snippets of it, J-S-O-N, 523 00:22:03,076 --> 00:22:04,596 JavaScript Object Notation. 524 00:22:04,856 --> 00:22:08,106 If I instead wanted to send a whole bunch of students, 525 00:22:08,416 --> 00:22:10,286 I don't want to have to necessarily send all 526 00:22:10,286 --> 00:22:12,016 of these bytes across the internet 'cause 527 00:22:12,016 --> 00:22:13,936 in a big file this is just gonna waste time, 528 00:22:13,936 --> 00:22:14,896 it's gonna waste bits. 529 00:22:15,336 --> 00:22:18,406 So I might instead use my JavaScript syntax for an array 530 00:22:18,406 --> 00:22:20,206 and then in there I might say okay, 531 00:22:20,206 --> 00:22:21,816 here comes a student object, 532 00:22:21,816 --> 00:22:23,636 and I'm not gonna give it a name this time. 533 00:22:23,886 --> 00:22:26,996 There's no mention of student, but that's okay because inside 534 00:22:26,996 --> 00:22:30,206 of this object I can then say something like name is David 535 00:22:30,516 --> 00:22:31,686 and comma and then ID is, 536 00:22:31,686 --> 00:22:35,496 actually this can be a number it doesn't have to be quoted, 537 00:22:35,496 --> 00:22:37,166 one two three, and that's it. 538 00:22:37,166 --> 00:22:39,156 And now if I want another such object, 539 00:22:39,236 --> 00:22:40,916 I can repeat the process for Monday. 540 00:22:40,916 --> 00:22:46,506 Name equals Matt and then let's say ID equals four five six 541 00:22:46,836 --> 00:22:47,736 and so forth. 542 00:22:47,736 --> 00:22:50,856 Now this is a little harder to read in that you have to kind 543 00:22:50,856 --> 00:22:52,976 of know what to expect but it turns 544 00:22:52,976 --> 00:22:55,526 out this is what's increasingly popular and common 545 00:22:55,526 --> 00:22:58,716 because it's much succinct and there exist functions in PHP 546 00:22:58,716 --> 00:23:02,526 that can take a PHP array, like an associative array, 547 00:23:02,526 --> 00:23:04,446 even something as big as our dictionary 548 00:23:04,686 --> 00:23:06,406 from the PHP implementation of speller 549 00:23:06,656 --> 00:23:08,036 and you can call a special function 550 00:23:08,036 --> 00:23:13,956 in PHP's case called JSON encode and this takes some argument, 551 00:23:14,386 --> 00:23:15,976 and whatever that argument is, 552 00:23:15,976 --> 00:23:18,376 it'll convert it to a JSON object. 553 00:23:18,446 --> 00:23:20,736 And so this is wonderfully useful 'cause now you can write 554 00:23:20,736 --> 00:23:23,326 server side code, you can structure it in your nice, 555 00:23:23,326 --> 00:23:26,816 familiar Java- PHP associative arrays and the like, 556 00:23:27,016 --> 00:23:28,996 and then you can just say turn this into JSON. 557 00:23:29,226 --> 00:23:31,656 And then you can return the result of that function 558 00:23:31,796 --> 00:23:35,086 which is gonna look like stuff like this, to the browser. 559 00:23:35,276 --> 00:23:36,756 And so we'll see today too 560 00:23:36,756 --> 00:23:40,566 that CS50's own API's uses this format because it's 561 00:23:40,566 --> 00:23:43,446 so much easier to parse as we'll see, 562 00:23:43,446 --> 00:23:46,196 to analyze, and also to generate. 563 00:23:46,196 --> 00:23:49,546 So now when people talk about AJAX, they don't really talk 564 00:23:49,546 --> 00:23:52,966 about the X anymore as being XML, they now just say AJAX 565 00:23:52,966 --> 00:23:56,536 and it refers to this just a capability of grabbing more data 566 00:23:56,676 --> 00:23:58,366 from server to clients. 567 00:23:58,366 --> 00:24:00,666 And again that's what drives Gmail and Facebook and all 568 00:24:00,666 --> 00:24:02,326 of these guys these days. 569 00:24:02,706 --> 00:24:04,106 So let's actually do something with this. 570 00:24:04,106 --> 00:24:09,476 Let me go into our directory from this week called AJAX 571 00:24:09,736 --> 00:24:12,796 and we have a few examples here that actually steals some ideas 572 00:24:12,796 --> 00:24:15,416 from Yahoo Finance and P Set 7. 573 00:24:15,646 --> 00:24:19,966 So I'm gonna go up to AJAX1.html here and let me go ahead 574 00:24:19,966 --> 00:24:22,196 and open up my appliance, and I'm gonna go ahead and open 575 00:24:22,196 --> 00:24:24,586 up one of these files in gedit just so we can see it 576 00:24:24,586 --> 00:24:25,696 in a familiar context. 577 00:24:25,696 --> 00:24:27,466 But I could use, keep using SSH for this. 578 00:24:27,466 --> 00:24:32,386 So I'm gonna go into AJAX1.html and let's see what's in here. 579 00:24:32,386 --> 00:24:34,056 So this thing is gonna get a stock quote 580 00:24:34,276 --> 00:24:37,876 from a file called quote1.php but via AJAX 581 00:24:37,876 --> 00:24:39,836 and then it's gonna display the result in the page. 582 00:24:39,836 --> 00:24:42,106 So first let's scroll down to the HTML just to get a sense 583 00:24:42,106 --> 00:24:45,186 of what this looks like, and the HTML is very, very simple. 584 00:24:45,416 --> 00:24:46,646 Apparently I've got a form 585 00:24:46,936 --> 00:24:50,566 who upon submission is gonna execute some JavaScript code, 586 00:24:50,566 --> 00:24:52,466 a function called quote apparently. 587 00:24:52,466 --> 00:24:54,206 That's not built into JavaScript, 588 00:24:54,206 --> 00:24:55,026 it's something I wrote. 589 00:24:55,026 --> 00:24:57,916 And then it's gonna always return false upon submission. 590 00:24:58,306 --> 00:24:59,736 And why? What is that gonna do for me 591 00:24:59,966 --> 00:25:01,156 when a form returns false? 592 00:25:01,276 --> 00:25:03,746 What is that impede? 593 00:25:03,746 --> 00:25:04,436 >> [Inaudible] 594 00:25:04,436 --> 00:25:08,096 >> It won't actually send it to the server. 595 00:25:08,096 --> 00:25:10,176 So here's sort of an interesting paradox, 596 00:25:10,176 --> 00:25:12,506 like we want the forms data, what the user types 597 00:25:12,506 --> 00:25:14,356 in to get submitted, but we want 598 00:25:14,356 --> 00:25:16,976 to do it now via JavaScript code, we don't want to rely 599 00:25:17,006 --> 00:25:20,906 on the browser sending it in http fashion to the server, 600 00:25:21,146 --> 00:25:22,256 we'll do it ourselves. 601 00:25:22,256 --> 00:25:24,206 So I've simply hard coded return false 602 00:25:24,446 --> 00:25:27,436 so that clicking the submit button does trigger my quote 603 00:25:27,436 --> 00:25:29,296 function to get called, but nothing else. 604 00:25:29,466 --> 00:25:30,856 I'm in control thereafter. 605 00:25:31,126 --> 00:25:32,496 So what is this form gonna look like? 606 00:25:32,496 --> 00:25:36,126 It's apparently got one input, a field whose ID is symbol, 607 00:25:36,286 --> 00:25:38,966 whose type is text, and then it's got a button whose value is 608 00:25:39,036 --> 00:25:39,546 get quote. 609 00:25:39,726 --> 00:25:41,396 Indeed if we go back to my browser, 610 00:25:41,576 --> 00:25:43,836 this is exactly what it looks like and I can type 611 00:25:43,836 --> 00:25:45,836 into this form something like G-O-O-G 612 00:25:45,836 --> 00:25:48,746 for Google stock ticker symbol and I claim in a moment 613 00:25:48,746 --> 00:25:50,076 when I click get quote, 614 00:25:50,336 --> 00:25:53,506 I'm going to get Google's pr- stock quote. 615 00:25:53,666 --> 00:25:55,046 So let's try this, get quote. 616 00:25:57,156 --> 00:25:59,556 All right, so as of this moment in time, 617 00:25:59,556 --> 00:26:00,696 or roughly 10 minutes ago, 618 00:26:01,006 --> 00:26:04,506 Google stock is valued at $605.93. 619 00:26:04,986 --> 00:26:06,886 Now this is kind of an annoying way of displaying it, 620 00:26:06,886 --> 00:26:08,656 this is not a very user friendly website, 621 00:26:08,826 --> 00:26:10,156 but notice what did not change. 622 00:26:10,156 --> 00:26:13,116 My URL did not change and yet I did get data 623 00:26:13,116 --> 00:26:14,446 from the server I promise. 624 00:26:14,446 --> 00:26:17,216 I didn't hard code 605 into my source code as we'll see, 625 00:26:17,506 --> 00:26:20,966 and so somehow I've triggered an http request behind the scenes, 626 00:26:20,966 --> 00:26:24,136 gotten this data, and it's then being displayed in the browser. 627 00:26:24,536 --> 00:26:27,186 And let me go ahead and-- whoops that's a bug. 628 00:26:28,266 --> 00:26:31,756 Let's go, let me open up Firefox so we can actually see this. 629 00:26:32,346 --> 00:26:34,956 So I'm opening up Firefox, I'm gonna open the same URL. 630 00:26:34,956 --> 00:26:37,676 I'm gonna open up Firebug, this little debugging tool 631 00:26:37,676 --> 00:26:39,916 at the bottom, and notice that I'm on the net tab. 632 00:26:39,916 --> 00:26:40,986 This is gonna show me all 633 00:26:40,986 --> 00:26:42,946 of the network traffic that this page sends. 634 00:26:43,316 --> 00:26:47,176 So I'm gonna go ahead and type in Goog again, get quote, 635 00:26:47,176 --> 00:26:49,906 and sure enough here's a little pop-up, it looks different 636 00:26:49,906 --> 00:26:52,106 in Firefox, that's just 'cause Mozilla made it that way, 637 00:26:52,286 --> 00:26:53,936 but if I scroll down over here, 638 00:26:54,026 --> 00:26:57,676 I'll see that an http get request was actually sent 639 00:26:57,676 --> 00:26:58,326 to the server. 640 00:26:58,586 --> 00:26:59,806 So what was actually sent? 641 00:26:59,936 --> 00:27:03,896 Well it looks like I sent -- let me click params -- 642 00:27:04,186 --> 00:27:06,976 you can actually see thanks to Firebug exactly what you sent. 643 00:27:07,156 --> 00:27:10,616 So I apparently sent a parameter called symbol with the value 644 00:27:10,616 --> 00:27:12,416 of Goog which is what the user typed in, 645 00:27:12,696 --> 00:27:14,086 and where did I send that to? 646 00:27:14,516 --> 00:27:17,186 This URL, quote1.php. 647 00:27:17,186 --> 00:27:20,736 But notice again, the URL in the page did not change. 648 00:27:20,796 --> 00:27:23,146 And therein lies the asynchronicity of this. 649 00:27:23,506 --> 00:27:26,856 That request got forked off so to speak in the background, 650 00:27:26,856 --> 00:27:28,926 it did its thing, it only took a split second to talk 651 00:27:28,926 --> 00:27:31,606 to the server, then it came back with 605 652 00:27:31,816 --> 00:27:33,576 and my JavaScript code displayed it. 653 00:27:33,866 --> 00:27:35,736 So let's see how we can piece this together. 654 00:27:35,736 --> 00:27:36,266 So here we go. 655 00:27:36,266 --> 00:27:38,046 This is my HTML at the bottom. 656 00:27:38,356 --> 00:27:41,606 Notice at the top now is the rest of my head element 657 00:27:42,006 --> 00:27:43,156 and what's inside there? 658 00:27:43,206 --> 00:27:44,956 It's gonna look a little complex at first 659 00:27:44,956 --> 00:27:46,556 but we'll simplify before long. 660 00:27:46,786 --> 00:27:49,466 So here is my head element, here is my script element 661 00:27:49,696 --> 00:27:51,626 and here's what I'll call a global variable. 662 00:27:51,696 --> 00:27:55,416 So variable XHR just for XML http request. 663 00:27:55,416 --> 00:27:58,306 I'm gonna initialize it to null just so know what it is 664 00:27:58,466 --> 00:28:00,026 and it doesn't have some random value. 665 00:28:00,026 --> 00:28:03,156 Now I'm gonna go, and that's not strictly true in JavaScript, 666 00:28:03,156 --> 00:28:05,936 it would actually be undefined in this case but I'll just do it 667 00:28:05,936 --> 00:28:07,446 to null to be, for good measure. 668 00:28:07,786 --> 00:28:09,076 So here's my quote function. 669 00:28:09,496 --> 00:28:13,216 So unfortunately, with XML http request, 670 00:28:13,536 --> 00:28:16,646 not all the browser manufacturers agreed back 671 00:28:16,646 --> 00:28:18,896 in the day on how to implement this thing, 672 00:28:18,896 --> 00:28:21,506 and you can perhaps infer who didn't cooperate here, 673 00:28:21,796 --> 00:28:24,276 and so we have to write a bunch of lines of code just 674 00:28:24,276 --> 00:28:27,776 to create one of these XML http request objects. 675 00:28:27,976 --> 00:28:29,336 So my goal quite simply is, 676 00:28:29,526 --> 00:28:30,806 I don't really understand this thing yet, 677 00:28:30,986 --> 00:28:34,366 but I want this object called XML http request 'cause I know 678 00:28:34,366 --> 00:28:37,816 it has this power to make more http requests to the server 679 00:28:37,816 --> 00:28:39,496 to get more data, and the data I care 680 00:28:39,496 --> 00:28:41,236 about now is just the stock price. 681 00:28:41,416 --> 00:28:43,266 Google Maps cares about more tiles. 682 00:28:43,266 --> 00:28:45,036 Facebook cares about more status updates, 683 00:28:45,256 --> 00:28:47,166 I just care about stock prices right now. 684 00:28:47,506 --> 00:28:50,046 So we won't go into great detail as to the syntax here, 685 00:28:50,046 --> 00:28:52,696 but JavaScript is again this object oriented 686 00:28:52,696 --> 00:28:53,696 programming language. 687 00:28:53,696 --> 00:28:56,256 For more on this take CS51, 164, 688 00:28:56,256 --> 00:28:59,286 161 or other lang- other courses. 689 00:28:59,586 --> 00:29:01,806 But for now, know that in a lot 690 00:29:01,806 --> 00:29:04,496 of these object oriented languages, there's the notion 691 00:29:04,496 --> 00:29:05,756 of exception handling. 692 00:29:06,056 --> 00:29:10,306 This is a technique whereby you can return error messages 693 00:29:10,386 --> 00:29:13,966 and error codes without actually using the key word return. 694 00:29:13,966 --> 00:29:16,536 You instead use a special key word called throw, 695 00:29:16,826 --> 00:29:19,876 and so we are not throwing errors here, we want to try 696 00:29:19,876 --> 00:29:23,566 to catch errors because I'm using code that was supported 697 00:29:23,566 --> 00:29:26,646 by the browser, either this line of code or this line of code. 698 00:29:26,876 --> 00:29:30,726 And long story short what this try catch block means is try 699 00:29:30,726 --> 00:29:33,706 to execute this line of code, if it doesn't work, 700 00:29:33,706 --> 00:29:36,896 prepare to catch an error, call it E or really an exception, 701 00:29:36,996 --> 00:29:39,736 call it E, and then try this line of code. 702 00:29:39,976 --> 00:29:41,066 So what does this really mean? 703 00:29:41,066 --> 00:29:42,176 This is kind of a hack 704 00:29:42,176 --> 00:29:44,646 and thankfully libraries hide these details soon 705 00:29:44,646 --> 00:29:46,306 as we soon will, but this mean 706 00:29:46,306 --> 00:29:49,426 if you're using any browser other than Microsoft's browser, 707 00:29:49,676 --> 00:29:52,246 go ahead and run this first line of code, but otherwise 708 00:29:52,246 --> 00:29:56,776 if that fails because you're on IE version 6 typically, go ahead 709 00:29:56,776 --> 00:29:58,306 and execute this line of code. 710 00:29:58,546 --> 00:30:01,506 And now if you're using like mozil- if you're using 711 00:30:01,506 --> 00:30:05,666 like Mozilla 1.0, if you're using a really old browser 712 00:30:05,666 --> 00:30:06,886 and none of this even worked, 713 00:30:07,096 --> 00:30:09,106 then I'm falling back on my default value. 714 00:30:09,156 --> 00:30:12,176 If this thing still equals null, something's really wrong here, 715 00:30:12,176 --> 00:30:13,586 I'm just gonna yell at the user 716 00:30:13,586 --> 00:30:14,906 that their browser's not supported, 717 00:30:14,906 --> 00:30:16,416 it's just too old for some reason. 718 00:30:16,606 --> 00:30:17,916 Or maybe it's like a mobile browser 719 00:30:17,916 --> 00:30:19,146 that just doesn't support this yet. 720 00:30:19,576 --> 00:30:22,976 Otherwise I'm gonna do this, I'm gonna construct a URL with a, 721 00:30:22,976 --> 00:30:24,086 a JavaScript variable, 722 00:30:24,086 --> 00:30:26,836 so var URl just gives me a variable called URL 723 00:30:27,036 --> 00:30:30,416 and I'm gonna set that equal to quote1.php but recall 724 00:30:30,416 --> 00:30:33,456 from two weeks ago we talked about how get requests are made. 725 00:30:33,456 --> 00:30:36,476 So I can just hard code a question mark, symbol equals, 726 00:30:36,736 --> 00:30:38,496 and then the plus operator here, 727 00:30:38,496 --> 00:30:40,046 you might be able to guess what it is. 728 00:30:40,046 --> 00:30:43,026 PHP uses a dot to concatenate two strings together, 729 00:30:43,026 --> 00:30:44,226 to append one to the other. 730 00:30:44,516 --> 00:30:46,696 JavaScript uses a plus. 731 00:30:46,696 --> 00:30:50,306 The language Java also uses a plus for those familiar. 732 00:30:50,306 --> 00:30:53,456 So this just means append whatever this value is 733 00:30:53,456 --> 00:30:55,536 onto the end of that partial URL. 734 00:30:55,796 --> 00:30:56,756 So what am I appending? 735 00:30:56,756 --> 00:30:58,076 Well note, remember this function 736 00:30:58,076 --> 00:31:00,096 from Monday, get element by ID. 737 00:31:00,416 --> 00:31:03,056 I want to get the element whose ID is symbol 738 00:31:03,056 --> 00:31:04,396 and I want to get its value. 739 00:31:04,646 --> 00:31:07,776 And if I scroll down to html, recall what that looked like. 740 00:31:07,776 --> 00:31:11,036 Down here is this input element whose ID equals quote 741 00:31:11,036 --> 00:31:11,776 unquote symbol. 742 00:31:12,006 --> 00:31:14,336 So this is just my way of getting whatever the user typed 743 00:31:14,336 --> 00:31:17,226 in and appending it to a string that I pre-created. 744 00:31:17,576 --> 00:31:20,586 So the last three lines of code are kind of copy paste. 745 00:31:20,876 --> 00:31:24,176 I first have to execute this line of code, 746 00:31:24,176 --> 00:31:27,126 XHR.onreadystatechange, another one 747 00:31:27,126 --> 00:31:29,626 of these poorly named variables but it's kind of the standard. 748 00:31:29,906 --> 00:31:33,596 And what this means is this is a special property, it's like, 749 00:31:33,596 --> 00:31:37,306 think of XHR again like a struct in C, and we had student structs 750 00:31:37,306 --> 00:31:39,386 that had names and ID's and so forth, 751 00:31:39,686 --> 00:31:42,276 so onreadystatechange is just a field inside 752 00:31:42,276 --> 00:31:44,046 of this structure called XHR 753 00:31:44,396 --> 00:31:47,096 and I'm setting it equal to the word handler. 754 00:31:47,486 --> 00:31:50,256 Well a handler is just a function that handles something 755 00:31:50,466 --> 00:31:52,846 and indeed if I scroll down a little bit, we're gonna see 756 00:31:52,846 --> 00:31:55,726 in just a moment, another function called handler. 757 00:31:56,066 --> 00:31:59,046 So effectively what I'm doing is I'm telling this special, 758 00:31:59,046 --> 00:32:01,866 magical object XHR, to go ahead 759 00:32:01,866 --> 00:32:06,476 and call this function any time his state changes. 760 00:32:06,836 --> 00:32:08,086 And what does state mean here? 761 00:32:08,276 --> 00:32:10,156 There's a bunch of things that happen behind the scenes. 762 00:32:10,156 --> 00:32:12,716 When you actually tell this magical object go get me more 763 00:32:12,716 --> 00:32:14,816 data, it's going to start doing it. 764 00:32:14,816 --> 00:32:17,626 It's going to g- make a request to the server. 765 00:32:17,626 --> 00:32:18,816 It's gonna wait for that request. 766 00:32:18,816 --> 00:32:19,606 It's gonna get it back. 767 00:32:19,606 --> 00:32:20,806 It's gonna analyze the request. 768 00:32:20,986 --> 00:32:23,176 So in short there's multiple steps that happen just 769 00:32:23,176 --> 00:32:24,386 like the slide suggested. 770 00:32:24,386 --> 00:32:26,036 Step one and two and three and four. 771 00:32:26,266 --> 00:32:28,556 So this just means call this function any time something 772 00:32:28,556 --> 00:32:31,026 interesting happens so I can check in on things. 773 00:32:31,366 --> 00:32:34,396 This next line opens a network connection 774 00:32:34,456 --> 00:32:36,706 to this URL using a method of get, 775 00:32:36,706 --> 00:32:40,656 and this true argument just means make this asynchronous, 776 00:32:40,806 --> 00:32:42,426 give us the A in AJAX 777 00:32:42,496 --> 00:32:45,196 for reasons I'll wave my hands at here. 778 00:32:45,446 --> 00:32:48,446 And then this last line just means send the request, 779 00:32:48,446 --> 00:32:51,986 you've connected to the server, send my request to it. 780 00:32:52,306 --> 00:32:55,376 So what happens every ti- when the server responds 781 00:32:55,376 --> 00:32:57,356 or anytime something interesting happens? 782 00:32:57,606 --> 00:32:59,176 This function is actually pretty simple. 783 00:32:59,436 --> 00:33:02,996 First it checks every tine it's called, are you in state four? 784 00:33:03,226 --> 00:33:04,726 Now this is just something I've hard coded. 785 00:33:04,726 --> 00:33:05,736 Four means done. 786 00:33:05,876 --> 00:33:07,696 Four means you got a response from the server, 787 00:33:07,696 --> 00:33:10,586 the server did not give you a 404 or a 500 788 00:33:10,586 --> 00:33:12,216 or a [inaudible] any of those crazy error messages, 789 00:33:12,476 --> 00:33:15,566 nothing bad happened, and so indeed, I double checked, 790 00:33:15,566 --> 00:33:18,826 make sure it equals 200-- the response-- 200 means good. 791 00:33:19,226 --> 00:33:22,346 And then all I do is this, I call alert passing 792 00:33:22,346 --> 00:33:25,866 in this object XHR, and dot response text. 793 00:33:26,346 --> 00:33:28,996 So again just like in a C struct, there's multiple fields, 794 00:33:29,266 --> 00:33:31,876 response text-- and you have to capitalize it like that-- 795 00:33:32,096 --> 00:33:34,376 is another field inside of this object 796 00:33:34,566 --> 00:33:36,496 that once the server has responded, 797 00:33:36,736 --> 00:33:39,296 it contains whatever the server spit out. 798 00:33:39,736 --> 00:33:41,176 So let's see what he server spit out. 799 00:33:41,176 --> 00:33:44,546 Let me just go to my browser and let me manually change the URL 800 00:33:44,546 --> 00:33:46,166 to pretend to be this program. 801 00:33:46,396 --> 00:33:50,866 I'm gonna go to quote1.php question mark symbol equals 802 00:33:50,926 --> 00:33:53,766 msft, this time for Microsoft, just to prove that this, 803 00:33:53,766 --> 00:33:55,776 nothing's hard coded here, and hit enter 804 00:33:55,776 --> 00:33:58,716 and let's see what the server actually returns. 805 00:34:00,686 --> 00:34:01,886 Hopef- there it is. 806 00:34:01,986 --> 00:34:06,016 So right now Microsoft stock is at $26.51 and look, 807 00:34:06,016 --> 00:34:07,036 if I [inaudible] the source code, 808 00:34:07,036 --> 00:34:08,076 this isn't even a web page. 809 00:34:08,206 --> 00:34:09,776 This is literally just a number. 810 00:34:10,056 --> 00:34:14,096 So apparently, all quote1.php is doing is returning this line 811 00:34:14,096 --> 00:34:14,316 of text. 812 00:34:14,666 --> 00:34:16,626 So let's go ahead and look. 813 00:34:16,626 --> 00:34:17,596 This is quote1.php. 814 00:34:17,596 --> 00:34:18,736 Let me scroll up. 815 00:34:18,736 --> 00:34:21,286 And even though we we won't spend much time on this code, 816 00:34:21,286 --> 00:34:26,606 I pretty much stole this from P Set 7's common.php file, 817 00:34:26,696 --> 00:34:30,256 or rather helpers.php file where we had the quote function, 818 00:34:30,346 --> 00:34:32,646 recall that you were using in P Set 7 to get stock quotes? 819 00:34:32,646 --> 00:34:35,266 I pretty much copied and pasted some of those lines 820 00:34:35,266 --> 00:34:40,486 of code using Yahoo Finance's URL appending to it the value 821 00:34:40,586 --> 00:34:44,086 of symbol parameter, and then I'm just doing some lines 822 00:34:44,086 --> 00:34:46,696 of code that again were stolen from the P Set and printing 823 00:34:46,696 --> 00:34:49,496 out the answer, and that's why I'm not getting back html 'cause 824 00:34:49,496 --> 00:34:52,886 all I'm printing out is one of the fields from the CSV file 825 00:34:52,886 --> 00:34:53,796 that we just downloaded. 826 00:34:54,426 --> 00:34:58,886 All right, so taking this all together and sexing it up, 827 00:34:58,886 --> 00:35:00,236 let's see where we can go with this. 828 00:35:00,446 --> 00:35:02,196 Let's go to quote AJAX2.html. 829 00:35:02,486 --> 00:35:06,096 And now notice, this is still not all that impressive, 830 00:35:06,356 --> 00:35:08,626 but notice that we don't just have to plug in our value 831 00:35:08,626 --> 00:35:12,396 to some arbitrary place on the page with an alert popping up 832 00:35:12,396 --> 00:35:13,386 and distracting the user, 833 00:35:13,516 --> 00:35:15,816 we can actually imbed the response in the page. 834 00:35:15,816 --> 00:35:18,706 So now this time let's go ahead and do msft, 835 00:35:19,036 --> 00:35:20,956 let's click get quote and hit enter. 836 00:35:21,536 --> 00:35:24,456 And now I've mutated the actual web page. 837 00:35:24,646 --> 00:35:27,596 So even though if I view the p- source of this page, 838 00:35:27,916 --> 00:35:29,306 notice that what I got back 839 00:35:29,306 --> 00:35:32,236 from the server originally is literally this, 840 00:35:32,356 --> 00:35:34,306 price to be determined. 841 00:35:34,306 --> 00:35:38,626 So my html originally looks like this, but notice, 842 00:35:38,626 --> 00:35:41,236 let me reload now, let me open up Firebug, 843 00:35:41,236 --> 00:35:44,606 let's use our html tab 'cause Firebug does not show you 844 00:35:44,606 --> 00:35:46,526 necessarily what was downloaded, 845 00:35:46,526 --> 00:35:48,786 it instead shows you the current state of your world. 846 00:35:49,146 --> 00:35:51,196 So if I go into this span element -- 847 00:35:51,196 --> 00:35:53,776 a span is like a div but it doesn't move the cursor 848 00:35:53,776 --> 00:35:56,946 to the next line-- this span has an ID of price 849 00:35:57,016 --> 00:35:58,686 and there is that default text. 850 00:35:59,016 --> 00:36:00,706 So it's gonna be a little small when I zoom out 851 00:36:00,706 --> 00:36:02,336 but let's go ahead and click get quote again 852 00:36:02,336 --> 00:36:04,036 and keep your eye sort of at the bottom 853 00:36:04,036 --> 00:36:05,706 and even though it's tiny, you should see 854 00:36:05,706 --> 00:36:07,346 that something changes on the page. 855 00:36:07,346 --> 00:36:09,006 Here we go, get quote. 856 00:36:12,596 --> 00:36:13,276 Get quote. 857 00:36:14,436 --> 00:36:15,176 Okay there we go. 858 00:36:15,406 --> 00:36:18,326 And nicely enough, Firebug briefly highlighted what just 859 00:36:18,326 --> 00:36:20,446 changed in yellow, and if I scroll down, 860 00:36:20,446 --> 00:36:22,756 now notice the Dom has been mutated. 861 00:36:22,966 --> 00:36:23,956 So this begs the question, 862 00:36:24,156 --> 00:36:26,736 how do you mu- how do you change what the actual structure 863 00:36:26,736 --> 00:36:27,436 of the page is? 864 00:36:27,436 --> 00:36:30,356 In alert it's pretty simple, but this is kind of fancy. 865 00:36:30,356 --> 00:36:32,066 I mean this is indeed what Gmail does, 866 00:36:32,066 --> 00:36:35,086 the fact that you get another row representing a new email is 867 00:36:35,086 --> 00:36:37,516 because another element has been inserted to the page. 868 00:36:37,516 --> 00:36:39,886 The fact that you get a little chat box that pops up is 869 00:36:39,886 --> 00:36:42,896 because more html has been injected into the Facebook page. 870 00:36:43,156 --> 00:36:45,066 So here, all of this is the same. 871 00:36:45,066 --> 00:36:46,646 The quote function is uninteresting 872 00:36:46,646 --> 00:36:48,696 and unchanged right now, but if I scroll 873 00:36:48,696 --> 00:36:51,456 down to my handler function, notice that rather 874 00:36:51,456 --> 00:36:52,986 than call alert this time, 875 00:36:52,986 --> 00:36:57,316 I'm instead calling document.getelementbyid.price-- 876 00:36:57,676 --> 00:36:59,966 that's the span tag that we looked at a moment ago-- 877 00:37:00,236 --> 00:37:03,516 and then it turns out that these elements have another property 878 00:37:03,516 --> 00:37:07,386 inside of them called inner html capitalized exactly as follows, 879 00:37:07,776 --> 00:37:09,756 and what I can do this time is rather 880 00:37:09,756 --> 00:37:12,706 than pass the servers response to alert, 881 00:37:12,956 --> 00:37:15,536 I can instead just plug it into this property 882 00:37:15,756 --> 00:37:18,656 and you can infer now from affect what it does, 883 00:37:18,656 --> 00:37:20,736 it changes the html in the web page 884 00:37:20,736 --> 00:37:23,506 and therefore changes the Dom for you. 885 00:37:23,506 --> 00:37:26,756 And again, the original page just said to be determined, 886 00:37:26,756 --> 00:37:29,446 in bold no less, and we even lost that boldfacing 887 00:37:29,446 --> 00:37:32,846 because what we changed is the contents of this span tag. 888 00:37:33,406 --> 00:37:34,526 So we can do a little more than this. 889 00:37:34,526 --> 00:37:38,706 Let me go into version 3 of this, AJAX3.html. 890 00:37:38,996 --> 00:37:43,526 Let me zoom in here, and notice the following behavior. 891 00:37:43,526 --> 00:37:46,766 This is AJAX 3 and I wanted to get a little fancier now. 892 00:37:46,766 --> 00:37:48,926 I've made a little more space at the top of the page, 893 00:37:49,116 --> 00:37:52,296 and now notice if I do the source down here with Firebug, 894 00:37:52,756 --> 00:37:55,256 notice that I have a few things waiting. 895 00:37:55,306 --> 00:37:59,376 I have, well rather, this time I have a quote, 896 00:37:59,826 --> 00:38:01,876 but notice what I've kind of secretly hid in there. 897 00:38:02,046 --> 00:38:02,916 What's this new div? 898 00:38:03,356 --> 00:38:06,636 Well just above quote is apparently a div whose ID is 899 00:38:06,636 --> 00:38:08,626 progress but notice what I did here. 900 00:38:08,926 --> 00:38:12,486 Just as there's a visibility element, rather CSS property, 901 00:38:12,686 --> 00:38:14,736 there's another related one called display. 902 00:38:14,736 --> 00:38:17,396 And so if I say display none, what do you see? 903 00:38:17,396 --> 00:38:18,376 Well you see nothing. 904 00:38:18,536 --> 00:38:20,666 You just see this big, blank space here. 905 00:38:21,046 --> 00:38:22,506 But this allows for something kind of neat. 906 00:38:22,506 --> 00:38:25,616 Let me now type in msft and click get quote. 907 00:38:26,016 --> 00:38:27,226 Ooh, fancy. 908 00:38:28,986 --> 00:38:33,496 [laughter] And now a few things have happened. 909 00:38:33,496 --> 00:38:34,986 So one, I got back more data. 910 00:38:34,986 --> 00:38:36,456 So now things are getting more interesting. 911 00:38:36,456 --> 00:38:38,006 Now I just got three new mails 912 00:38:38,006 --> 00:38:40,066 or three new friend status updates, 913 00:38:40,246 --> 00:38:41,736 not just one single number. 914 00:38:41,886 --> 00:38:45,416 And also it looks like hmm, this div is back to being invisible. 915 00:38:45,476 --> 00:38:46,816 So a couple of things just happened. 916 00:38:46,816 --> 00:38:48,326 Let's actually see what's inside this div. 917 00:38:48,596 --> 00:38:49,936 Turns out I'm kind of cheating 918 00:38:50,126 --> 00:38:52,486 but I'm doing exactly what most every website does 919 00:38:52,486 --> 00:38:53,936 to simulate progress. 920 00:38:54,116 --> 00:38:56,676 That was not some fancy animation I just made for you. 921 00:38:56,896 --> 00:39:00,116 Rather, that was some Gif graphic 922 00:39:00,456 --> 00:39:01,936 that I downloaded off the internet 923 00:39:02,226 --> 00:39:05,046 that looks a little something like please wait.Gif. 924 00:39:05,496 --> 00:39:06,816 It does this all day long. 925 00:39:07,076 --> 00:39:08,876 All it does is that, [laughter] right? 926 00:39:08,876 --> 00:39:12,856 But by revealing it to you when I wanted to create the illusion 927 00:39:12,856 --> 00:39:16,046 of progress, it displays. 928 00:39:16,046 --> 00:39:19,306 And then when I'm done loading the data, I just turn it off. 929 00:39:19,306 --> 00:39:21,256 And that's what a lot of these websites are doing, 930 00:39:21,256 --> 00:39:23,046 right again with [inaudible] status updates, Gmail, 931 00:39:23,156 --> 00:39:24,606 any of these websites that show some kind 932 00:39:24,606 --> 00:39:28,086 of progress bar almost always, that's just an animated Gif 933 00:39:28,086 --> 00:39:30,996 that is spinning all day long but they're only showing it 934 00:39:30,996 --> 00:39:32,436 to you once in a while. 935 00:39:32,436 --> 00:39:33,456 So let's see how we can do that, 936 00:39:33,456 --> 00:39:36,176 and we can actually steal some ideas from our blink example. 937 00:39:36,486 --> 00:39:38,806 So in this case here, this is AJAX 3, 938 00:39:39,026 --> 00:39:40,396 notice just a couple differences. 939 00:39:40,726 --> 00:39:44,466 One, this time I'm calling quote2.php 940 00:39:44,466 --> 00:39:46,526 and we'll see why in just a moment. 941 00:39:46,746 --> 00:39:48,936 And then notice here this one other line 942 00:39:48,936 --> 00:39:50,246 of code, show progress. 943 00:39:50,576 --> 00:39:53,536 So I can steal the inspiration from the blink example 944 00:39:53,746 --> 00:39:56,346 and I can get the element whose idea's progress, 945 00:39:56,346 --> 00:39:57,626 that was the hidden div. 946 00:39:57,996 --> 00:40:01,286 I can change its CSS style, property called display, 947 00:40:01,526 --> 00:40:03,886 to not be none, but instead to be block. 948 00:40:04,066 --> 00:40:05,746 So the CSS people weren't really good at coming 949 00:40:05,746 --> 00:40:08,996 up with opposite words so there's none and there's block, 950 00:40:08,996 --> 00:40:11,376 there's visible and there's hidden. 951 00:40:11,376 --> 00:40:14,456 You, so they're not opposites but they function oppositely 952 00:40:14,646 --> 00:40:18,466 and so block means m- make it not none anymore, 953 00:40:18,466 --> 00:40:19,886 show this actual div. 954 00:40:20,276 --> 00:40:23,426 So this is what's turning on the progress bar so to speak, 955 00:40:23,666 --> 00:40:25,396 and then if I go to my handler function, 956 00:40:25,396 --> 00:40:27,206 I just have to do slightly more work. 957 00:40:27,376 --> 00:40:29,456 As soon as I get a response from the server, 958 00:40:29,726 --> 00:40:33,726 I'm going to first change the progress divs style 959 00:40:34,076 --> 00:40:36,076 to display equals none again. 960 00:40:36,376 --> 00:40:38,896 So that's just the opposite so to speak of what I just did, 961 00:40:39,056 --> 00:40:40,256 and then the rest is the same. 962 00:40:40,256 --> 00:40:44,006 Document [inaudible] of quotes inner html gets the 963 00:40:44,006 --> 00:40:44,956 servers response. 964 00:40:44,956 --> 00:40:47,306 But the server absolutely did something differently this time 965 00:40:47,306 --> 00:40:48,716 right, 'cause I got back more data. 966 00:40:49,006 --> 00:40:50,616 So if I do t his, let me go 967 00:40:50,616 --> 00:40:56,116 to quote2.php question mark symbol equals msft. 968 00:40:57,396 --> 00:40:58,666 I'll zoom in and hit enter. 969 00:40:59,416 --> 00:41:02,556 It's spinning, so apparently quote 2 is a little slower 970 00:41:02,766 --> 00:41:05,526 which is good 'cause now we have a progress bar to handle that. 971 00:41:06,456 --> 00:41:07,606 And that progress bar is on the side. 972 00:41:07,606 --> 00:41:09,736 That's Firefox, that is not my own code. 973 00:41:09,996 --> 00:41:12,086 And wallah, now it's embedded in the page. 974 00:41:12,086 --> 00:41:12,966 What did I get back? 975 00:41:13,246 --> 00:41:15,886 Well it looks like what I got back kind of hackish, 976 00:41:16,236 --> 00:41:19,356 I just got back [inaudible] a snippet of html. 977 00:41:19,356 --> 00:41:21,066 I got price colon number BR, 978 00:41:21,066 --> 00:41:24,676 high colon number BR and so forth. 979 00:41:24,876 --> 00:41:26,596 So let's just look underneath the hood here 980 00:41:26,596 --> 00:41:27,436 as to how we did this. 981 00:41:27,436 --> 00:41:30,306 Well one, I was kind of cheating you. 982 00:41:30,306 --> 00:41:34,226 In quote2.php I used a fancy new function called sleep to pretend 983 00:41:34,226 --> 00:41:36,216 that the server is slow and that's what allowed us 984 00:41:36,216 --> 00:41:37,676 to actually see the progress bar. 985 00:41:37,676 --> 00:41:38,296 Otherwise it would've been 986 00:41:38,296 --> 00:41:40,376 so fast it wouldn't have been as much fun. 987 00:41:40,646 --> 00:41:42,656 But the rest of this is almost the same, 988 00:41:42,886 --> 00:41:44,166 except notice what I'm doing. 989 00:41:44,386 --> 00:41:48,216 Recall that Yahoo Finance per P Set 7 returns a whole CSV 990 00:41:48,346 --> 00:41:49,466 like in Excel spreadsheet 991 00:41:49,616 --> 00:41:52,106 and in Excel spreadsheet you have multiple columns or cells, 992 00:41:52,406 --> 00:41:56,356 and just as in P Set 7, we extracted for you the name 993 00:41:56,356 --> 00:41:58,426 of the stock and the price of the stock 994 00:41:58,426 --> 00:41:59,546 and we even gave you the high 995 00:41:59,546 --> 00:42:01,376 and low even though you didn't necessarily need it. 996 00:42:01,616 --> 00:42:03,676 What I'm simply doing is getting that same data. 997 00:42:03,676 --> 00:42:07,156 So I'm literally printing in quote2.php price colon 998 00:42:07,326 --> 00:42:11,636 and then data, the curly braces, recall, any time you try to cr- 999 00:42:11,726 --> 00:42:13,916 put a variable inside of a php string 1000 00:42:14,156 --> 00:42:16,846 and it's syntactically a little ugly, a little dangerous, 1001 00:42:17,156 --> 00:42:19,776 well the curly braces don't get displayed literally, 1002 00:42:19,776 --> 00:42:21,316 they just mean here is a variable 1003 00:42:21,526 --> 00:42:24,386 that might otherwise confuse the php program, 1004 00:42:24,386 --> 00:42:26,726 and then I do the same for high and for low. 1005 00:42:26,826 --> 00:42:29,446 And why? Well this is in column one, this is in column two, 1006 00:42:29,446 --> 00:42:30,396 this is in column three. 1007 00:42:30,396 --> 00:42:31,436 Why? How do I know that? 1008 00:42:31,636 --> 00:42:33,166 I looked at the CSV file in advance 1009 00:42:33,266 --> 00:42:34,916 and they're always gonna be in the same spot. 1010 00:42:35,516 --> 00:42:38,906 So that's version 3, we can do something even better 1011 00:42:39,996 --> 00:42:41,856 until we have something really fancy. 1012 00:42:41,856 --> 00:42:47,086 Notice now that in my handler function here it's kind of silly 1013 00:42:47,086 --> 00:42:49,686 that I've been defining this handler function all this time 1014 00:42:49,726 --> 00:42:52,126 if as of Monday I have the ability actually 1015 00:42:52,126 --> 00:42:54,056 to create anonymous functions, otherwise known 1016 00:42:54,056 --> 00:42:57,316 as lambda functions, and this is a little more sophisticated. 1017 00:42:57,316 --> 00:43:00,446 Syntactically it's a little slicker, if you will, 1018 00:43:00,626 --> 00:43:03,066 but it's a very, very, very common paradigm 1019 00:43:03,066 --> 00:43:04,166 in the JavaScript world. 1020 00:43:04,166 --> 00:43:06,066 And undoubtedly, if you're Googling around especially 1021 00:43:06,066 --> 00:43:08,196 for final projects, reading JavaScript code, 1022 00:43:08,196 --> 00:43:09,786 you're gonna see this paradigm a lot. 1023 00:43:10,126 --> 00:43:13,386 So if on ready state change, that property inside 1024 00:43:13,386 --> 00:43:16,776 of the XHR struct, and again this, its purpose in life is 1025 00:43:16,776 --> 00:43:19,626 to get called any time something interesting happens 1026 00:43:19,626 --> 00:43:20,256 with the network. 1027 00:43:20,666 --> 00:43:24,606 Well, I recall that I can call function, and function 1028 00:43:24,636 --> 00:43:26,346 without a name after it just means give me an 1029 00:43:26,346 --> 00:43:27,306 anonymous function. 1030 00:43:27,466 --> 00:43:29,866 Curly brace means here comes the code that composes 1031 00:43:29,866 --> 00:43:32,816 that function, and now it's the exact same thing. 1032 00:43:33,066 --> 00:43:35,266 If the read state is four and I just hard coded 1033 00:43:35,266 --> 00:43:36,766 that after reading the documentation 1034 00:43:36,976 --> 00:43:39,456 and the status is 200 which means all is well, 1035 00:43:39,696 --> 00:43:40,886 go ahead and call alert. 1036 00:43:41,096 --> 00:43:43,156 So I've kind of regressed back to version 1 here, 1037 00:43:43,376 --> 00:43:46,446 but notice I've not defined a function called handler. 1038 00:43:46,726 --> 00:43:48,706 In fact if I scroll down, that's it, 1039 00:43:48,706 --> 00:43:50,446 I have no more JavaScript code. 1040 00:43:50,706 --> 00:43:51,826 So why is this better? 1041 00:43:51,826 --> 00:43:53,706 You know it's just, partly it's a matter of style, 1042 00:43:53,706 --> 00:43:55,626 partly it's a matter of design. 1043 00:43:55,826 --> 00:43:57,806 Right, I don't need to bother creating a var- 1044 00:43:57,806 --> 00:44:00,466 a function called handler if it's only gonna be called 1045 00:44:00,466 --> 00:44:01,666 in one particular place, 1046 00:44:01,996 --> 00:44:04,546 and on ready state change is the only guy who needs to know 1047 00:44:04,546 --> 00:44:06,886 about it, so I can do simply this in line. 1048 00:44:06,886 --> 00:44:08,946 But notice the syntax, function with no name, 1049 00:44:09,206 --> 00:44:11,276 open paren closed paren, curly brace, 1050 00:44:11,626 --> 00:44:14,046 and then at the very bottom follow the white space, 1051 00:44:14,346 --> 00:44:17,396 I put the closed curly brace there and the semicolon 1052 00:44:17,396 --> 00:44:20,186 so that's all sort of one huge line of code. 1053 00:44:20,386 --> 00:44:23,466 But inside of that one huge line of code is multiple lines 1054 00:44:23,466 --> 00:44:26,156 of actual code that constitute that function. 1055 00:44:26,866 --> 00:44:29,366 All right so that is gonna behave the same as before 1056 00:44:29,646 --> 00:44:31,516 so let's just make this slightly fancier. 1057 00:44:31,516 --> 00:44:34,286 So now we're actually doing it the right way, right? 1058 00:44:34,286 --> 00:44:37,496 Just printing out a price with a colon and then saying hi and low 1059 00:44:37,496 --> 00:44:39,836 and price is not all that compelling and it results 1060 00:44:39,836 --> 00:44:40,996 in a fairly ugly web page. 1061 00:44:40,996 --> 00:44:44,476 So let's try to wrap up together the response from the server. 1062 00:44:44,476 --> 00:44:48,736 So let me go ahead and look in quote3.php 1063 00:44:48,736 --> 00:44:49,856 and I'm gonna do this this time. 1064 00:44:50,376 --> 00:44:52,706 So notice this is some PHP code and it's a l- 1065 00:44:52,706 --> 00:44:56,966 this stuff is stolen again from P Set 7, P Set 7, P Set 7, 1066 00:44:57,016 --> 00:44:59,216 P Set 7, three lines of code are new. 1067 00:44:59,516 --> 00:45:00,976 So notice what I'm doing this time. 1068 00:45:00,976 --> 00:45:02,976 At the very four lines-- notice what I'm doing-- 1069 00:45:02,976 --> 00:45:06,556 at the very top I'm declaring an array called dollar sign quote 1070 00:45:06,556 --> 00:45:07,746 and it's initially empty. 1071 00:45:08,116 --> 00:45:09,366 So that's an empty array. 1072 00:45:09,666 --> 00:45:13,426 Then in these three lines of code, I'm inserting three keys. 1073 00:45:13,466 --> 00:45:15,386 So array, this is actually an associate 1074 00:45:15,386 --> 00:45:17,166 of array 'cause I'm actually using keys 1075 00:45:17,166 --> 00:45:21,016 and I'm saying dollar sign quote, do- dollar sign quote 1076 00:45:21,016 --> 00:45:23,866 in square brackets quote unquote price and quote unquote high 1077 00:45:23,866 --> 00:45:27,626 and quote unquote low, those are my three keys, put these values. 1078 00:45:27,876 --> 00:45:30,376 So this is giving me an associative array, a hash table 1079 00:45:30,376 --> 00:45:33,646 if you will with three keys, price high and low, 1080 00:45:33,866 --> 00:45:35,566 each of which has a numeric value. 1081 00:45:35,926 --> 00:45:39,026 And that's all I'm doing in this code here, and in this F close 1082 00:45:39,026 --> 00:45:41,826 and F open, this just relates to the network connection 1083 00:45:41,826 --> 00:45:43,676 so that I'm actually talking to Yahoo Finance. 1084 00:45:44,236 --> 00:45:45,796 But here's the promised feature. 1085 00:45:46,246 --> 00:45:48,976 So notice this last line of code, I'm not printing 1086 00:45:48,976 --> 00:45:51,976 out literally price or high or low, I'm printing 1087 00:45:51,976 --> 00:45:56,356 out my quote array but I'm first passing it 1088 00:45:56,356 --> 00:45:58,466 to this other function called JSON encode. 1089 00:45:58,836 --> 00:46:01,036 So JavaScript, PHP, not the same thing. 1090 00:46:01,106 --> 00:46:02,996 In fact they have different syntax even 1091 00:46:02,996 --> 00:46:04,176 for things like variables. 1092 00:46:04,176 --> 00:46:06,716 Ja- PHP has dollar signs, JavaScript does not. 1093 00:46:07,086 --> 00:46:11,606 But PHP can create out of its own objects, the right syntax, 1094 00:46:11,606 --> 00:46:13,996 square brackets, curly braces, quotes, colons, 1095 00:46:13,996 --> 00:46:16,646 and all of that messiness, it can do all of that automatically 1096 00:46:16,646 --> 00:46:18,706 for you so that what ultimately gets printed 1097 00:46:18,706 --> 00:46:22,596 out is a JSON version of this associative array. 1098 00:46:22,876 --> 00:46:26,386 So let me actually do this, let me go to a browser again. 1099 00:46:26,386 --> 00:46:30,806 Let me go to quote3.php, and whereas last time I just spit 1100 00:46:30,806 --> 00:46:34,676 out some partial html, this time it's gonna spit out this. 1101 00:46:35,626 --> 00:46:40,116 So open curly brace, quote unquote price colon, 2650, 1102 00:46:40,356 --> 00:46:43,526 comma, high and then low, same exact structure. 1103 00:46:43,526 --> 00:46:44,976 So this is some JSON data. 1104 00:46:44,976 --> 00:46:46,946 If I actually look at this in my source code, 1105 00:46:47,236 --> 00:46:48,406 it looks exactly like that. 1106 00:46:48,826 --> 00:46:50,476 Now this might look a little cryptic. 1107 00:46:50,476 --> 00:46:53,246 If I clean it up a bit, you can read it a bit better perhaps, 1108 00:46:53,246 --> 00:46:55,156 let me zoom out, go to my text editor. 1109 00:46:55,426 --> 00:46:57,276 So before I said this is JSON code, 1110 00:46:57,676 --> 00:46:59,796 now I can also just paste in this thing. 1111 00:46:59,966 --> 00:47:02,376 So let me create a new document, paste this in. 1112 00:47:02,376 --> 00:47:05,256 And again this is only gonna benefit us humans 1113 00:47:05,256 --> 00:47:08,136 for readability but this is the exact same structure, 1114 00:47:08,136 --> 00:47:10,676 and it turns out JSON encode is just being a little anal. 1115 00:47:10,806 --> 00:47:13,946 These quotes are not necessarily required, in fact especially 1116 00:47:13,946 --> 00:47:15,046 around the numbers they're not. 1117 00:47:15,336 --> 00:47:17,186 So we could actually get rid of these quotes. 1118 00:47:17,436 --> 00:47:18,646 We could get rid of these quotes. 1119 00:47:18,646 --> 00:47:20,236 We could get rid of the other quotes, but that's fine, 1120 00:47:20,286 --> 00:47:22,016 because all the server's going 1121 00:47:22,016 --> 00:47:24,826 to be doing is sending these three keys and values. 1122 00:47:25,236 --> 00:47:27,546 So if this is what the server's sending back 1123 00:47:27,826 --> 00:47:30,476 and this is what it looks like in a browser, I somehow have 1124 00:47:30,516 --> 00:47:33,656 to parse this JSON in my JavaScript code. 1125 00:47:33,866 --> 00:47:36,096 I don't want to see the quote marks, I don't want 1126 00:47:36,096 --> 00:47:39,056 to see the curly braces when I display this data to the user. 1127 00:47:39,056 --> 00:47:41,146 I want to actually get at the price and the high 1128 00:47:41,146 --> 00:47:44,556 and the low individually so that the end result actually looks 1129 00:47:44,556 --> 00:47:45,106 like this. 1130 00:47:45,326 --> 00:47:47,946 So this is AJAX5.html. 1131 00:47:48,556 --> 00:47:50,386 Let me go ahead and click msft 1132 00:47:50,586 --> 00:47:53,886 and now notice I have a few placeholders, price high 1133 00:47:53,886 --> 00:47:56,496 and low-- let me look at this-- view page source. 1134 00:47:56,706 --> 00:47:59,916 Look at my html, so now I have preemptively put three 1135 00:47:59,916 --> 00:48:02,526 placeholders, price colon and then a span 1136 00:48:02,526 --> 00:48:04,156 with a unique ID, but no content. 1137 00:48:04,156 --> 00:48:06,206 There's nothing in between the start and end tag. 1138 00:48:06,496 --> 00:48:08,896 Same thing for high, same thing for low. 1139 00:48:08,896 --> 00:48:12,466 So my goal programmatically is gonna get that JSON object, 1140 00:48:12,806 --> 00:48:14,686 grab the three fields I care about 1141 00:48:14,686 --> 00:48:17,486 and only insert the numbers where I want them. 1142 00:48:18,066 --> 00:48:20,226 So here we go, this is AJAX5.html. 1143 00:48:20,636 --> 00:48:25,046 It's probably gonna be my handler function that changes, 1144 00:48:25,046 --> 00:48:26,846 and sure enough, here we go. 1145 00:48:26,846 --> 00:48:28,596 I didn't bother giving it a name handler. 1146 00:48:28,646 --> 00:48:31,536 I'm instead using this anonymous trick but this is just a matter 1147 00:48:31,536 --> 00:48:34,516 of design or style, it's not really functionally different 1148 00:48:34,516 --> 00:48:35,176 from before. 1149 00:48:35,436 --> 00:48:37,636 I got this copied and pasted from before. 1150 00:48:37,856 --> 00:48:39,486 This is copy pasted from before 1151 00:48:39,486 --> 00:48:41,226 so ready state and status are good. 1152 00:48:41,546 --> 00:48:42,226 So here we go. 1153 00:48:42,796 --> 00:48:45,136 So this is the one stupid aspect of JSON, 1154 00:48:45,216 --> 00:48:47,676 at least when you're not using a library like JQuery. 1155 00:48:48,146 --> 00:48:51,456 When you get back XHR response text, 1156 00:48:51,456 --> 00:48:53,296 and you know it is JSON data, 1157 00:48:53,296 --> 00:48:56,896 you have to unfortunately concatenate to the left 1158 00:48:56,896 --> 00:48:59,266 of it a parenthesis, concatenate to the right 1159 00:48:59,266 --> 00:49:01,566 of it another parenthesis, and then pass it 1160 00:49:01,566 --> 00:49:03,166 to a special function called eval. 1161 00:49:03,656 --> 00:49:06,636 The eval function will take what is literally a string 1162 00:49:06,896 --> 00:49:10,396 that looks again like this and it will convert it 1163 00:49:10,776 --> 00:49:13,726 to a data structure in RAM 1164 00:49:14,076 --> 00:49:17,296 that represents this hash table just like P Set 6. 1165 00:49:17,636 --> 00:49:19,926 So a long story short, this cryptic line 1166 00:49:19,926 --> 00:49:23,456 of code simply takes what is literally a string and loads it 1167 00:49:23,456 --> 00:49:26,156 into memory just like you did with the dictionary in P Set 6. 1168 00:49:26,156 --> 00:49:27,226 And after that it's easy. 1169 00:49:27,476 --> 00:49:32,336 I can then update the inner html of my price span to be quote, 1170 00:49:32,336 --> 00:49:34,136 which is an object, dot price. 1171 00:49:34,756 --> 00:49:36,536 So here's one difference too with PHP, 1172 00:49:36,726 --> 00:49:39,766 whereas in PHP we dollar sign quote, 1173 00:49:39,766 --> 00:49:42,686 and then literally price, that's in PHP. 1174 00:49:42,686 --> 00:49:45,666 In JavaScript, we're gonna do it like that. 1175 00:49:45,666 --> 00:49:46,656 It's a little more elegant. 1176 00:49:46,726 --> 00:49:48,436 It's a little more readable, though however 1177 00:49:48,436 --> 00:49:50,546 in JavaScript you could also do this, 1178 00:49:50,656 --> 00:49:51,786 but without the dollar sign. 1179 00:49:52,036 --> 00:49:54,146 So realize there's different syntaxes possible 1180 00:49:54,306 --> 00:49:55,786 but this is kind of a nice clean one. 1181 00:49:56,006 --> 00:49:58,656 And so what this has the effect of doing is plugging into each 1182 00:49:58,786 --> 00:50:01,896 of those spots the data I got back. 1183 00:50:01,896 --> 00:50:04,186 And these collectively, let's now see the results 1184 00:50:04,186 --> 00:50:06,546 by clicking submit with Microsoft there, 1185 00:50:07,036 --> 00:50:10,896 is exactly how sites like-- come on work so I don't have 1186 00:50:10,896 --> 00:50:14,806 to walk back; there we go-- is exactly how sites, 1187 00:50:14,806 --> 00:50:15,986 like again Facebook and Gmail and the 1188 00:50:15,986 --> 00:50:18,376 like are doing all of today's dynamisms. 1189 00:50:18,376 --> 00:50:20,166 So we can clean this up significantly, we don't have 1190 00:50:20,166 --> 00:50:22,756 to write so much syntax, but let's take a five minute break 1191 00:50:22,946 --> 00:50:27,796 and we'll do just that. 1192 00:50:28,116 --> 00:50:33,036 >> We are back, so I have to scare you 1193 00:50:33,036 --> 00:50:36,596 with some slightly even more cryptic syntax, however, 1194 00:50:36,836 --> 00:50:38,806 in the long run this will make your life much better. 1195 00:50:39,156 --> 00:50:45,276 So this last version of the AJAX demos, this is AJAX6.html uses 1196 00:50:45,276 --> 00:50:47,346 that same library from Monday that we talked 1197 00:50:47,346 --> 00:50:48,796 about briefly called jQuery. 1198 00:50:48,796 --> 00:50:50,506 So jQuery is just a library. 1199 00:50:50,506 --> 00:50:52,776 It's written in JavaScript and if you'll recall from Monday, 1200 00:50:52,776 --> 00:50:54,516 I scrolled for like 30 seconds 1201 00:50:54,546 --> 00:50:56,816 to see how much code people have actually written 1202 00:50:57,126 --> 00:50:58,676 in this library called jQuery. 1203 00:50:58,906 --> 00:51:01,576 But among the things it does, frankly, is it gets rid 1204 00:51:01,576 --> 00:51:04,636 of so much of this junk that we just had to write, right, 1205 00:51:04,636 --> 00:51:07,726 this try and this catch and this equals equals four equals 1206 00:51:07,726 --> 00:51:08,496 equals 200. 1207 00:51:08,646 --> 00:51:11,326 There was so many copy and paste in the past several examples, 1208 00:51:11,606 --> 00:51:14,466 and so these days when actually writing sophisticated, 1209 00:51:14,466 --> 00:51:17,076 interesting websites, you typically don't write all 1210 00:51:17,076 --> 00:51:20,226 of this code from scratch, you again leverage libraries 1211 00:51:20,256 --> 00:51:22,186 that other people have written so that you can focus 1212 00:51:22,186 --> 00:51:24,496 on the interesting aspect of your final project 1213 00:51:24,496 --> 00:51:28,296 or your own website, and not on the nitty gritty details. 1214 00:51:28,296 --> 00:51:31,536 So now hopefully, even if it went fast, you understand some 1215 00:51:31,536 --> 00:51:34,166 of those fundamentals syntactically and conceptually, 1216 00:51:34,456 --> 00:51:36,676 but let's now throw a lot of that code away. 1217 00:51:36,946 --> 00:51:41,296 So in AJAX6.html, the end result is going to be the same, 1218 00:51:41,556 --> 00:51:43,166 but the code is going to be different. 1219 00:51:43,426 --> 00:51:46,926 Everything we just did is now simplified into this chunk 1220 00:51:46,926 --> 00:51:49,086 of code, which admittedly looks more cryptic, 1221 00:51:49,346 --> 00:51:51,606 but it steels all of the basic ideas. 1222 00:51:51,646 --> 00:51:54,226 So, the very first line here inside 1223 00:51:54,226 --> 00:51:58,006 of my script tag is jQuery's way of getting 1224 00:51:58,006 --> 00:52:01,306 at that special document global object. 1225 00:52:01,816 --> 00:52:03,026 As an aside, the fact 1226 00:52:03,276 --> 00:52:06,446 that dollar sign is laced throughout jQuery code has 1227 00:52:06,446 --> 00:52:09,086 nothing to do with PHP, it has nothing to do with variables, 1228 00:52:09,286 --> 00:52:12,336 it has to do with the fact that the dollar sign in JavaScript-- 1229 00:52:12,406 --> 00:52:16,436 this is not typical-- is a valid character in a variable name. 1230 00:52:16,716 --> 00:52:18,946 So what the jQuery folks have actually done is, 1231 00:52:19,136 --> 00:52:22,426 they have a special object called jQuery, 1232 00:52:22,426 --> 00:52:24,506 it's like a special function called jQuery 1233 00:52:24,816 --> 00:52:27,206 but they just decided, frankly, to be a little slick 1234 00:52:27,246 --> 00:52:29,726 because they didn't want all of their users 1235 00:52:29,726 --> 00:52:33,056 to be typing jQuery all the time when using their library, 1236 00:52:33,356 --> 00:52:35,556 they leveraged this feature of JavaScript 1237 00:52:35,556 --> 00:52:39,076 that even dollar sign can be the name of a function. 1238 00:52:39,396 --> 00:52:41,576 So what they essentially did was something like this, 1239 00:52:41,576 --> 00:52:44,066 bar dollar sign gets jQuery 1240 00:52:44,366 --> 00:52:47,556 so that they made a variable called dollar sign, set it equal 1241 00:52:47,556 --> 00:52:51,046 to their fancy library so that hence forth you can just say 1242 00:52:51,046 --> 00:52:51,746 dollar sign. 1243 00:52:52,056 --> 00:52:54,396 So that's it, there's no relation to PHP, 1244 00:52:54,446 --> 00:52:56,006 there's nothing fancy going on. 1245 00:52:56,006 --> 00:52:58,566 This could've been called X. This could be F. This could be 1246 00:52:58,566 --> 00:53:00,406 A. It could be any stupid character, 1247 00:53:00,496 --> 00:53:02,536 just dollar sign looks a little interesting 1248 00:53:02,536 --> 00:53:04,286 and thus was born the popularization 1249 00:53:04,286 --> 00:53:05,916 of jQuery and this dollar sign. 1250 00:53:06,216 --> 00:53:09,706 So this first line of code means get me the global 1251 00:53:09,706 --> 00:53:10,606 document object. 1252 00:53:10,916 --> 00:53:14,076 This dot ready means when the whole page is ready, 1253 00:53:14,286 --> 00:53:15,856 call the following code. 1254 00:53:16,056 --> 00:53:18,966 Now if I want to call the following code in the future, 1255 00:53:19,136 --> 00:53:20,416 recall that I have to wrap it 1256 00:53:20,416 --> 00:53:22,906 in an anonymous functions it's not executed now, 1257 00:53:23,186 --> 00:53:25,266 but this function will be executed later. 1258 00:53:25,896 --> 00:53:28,696 So now what do I want to do when the page is ready? 1259 00:53:29,056 --> 00:53:30,846 Dollar sign quote unquote form. 1260 00:53:31,046 --> 00:53:33,026 So remember the sharp sign means go to the i- 1261 00:53:33,076 --> 00:53:34,926 the element whose ID is form. 1262 00:53:35,316 --> 00:53:38,126 So this means give me the element whose thing is form. 1263 00:53:38,126 --> 00:53:39,126 So let me scroll down. 1264 00:53:39,126 --> 00:53:40,596 Ah, this is all it's referring to. 1265 00:53:40,596 --> 00:53:42,166 There's an html element here. 1266 00:53:42,296 --> 00:53:43,876 ID equals quote unquote form. 1267 00:53:44,096 --> 00:53:46,736 So this first line of code means go find the element 1268 00:53:46,736 --> 00:53:48,556 in the page whose ID is form. 1269 00:53:48,816 --> 00:53:51,686 And we saw this on Monday, when that form is submitted, 1270 00:53:51,686 --> 00:53:54,816 this is the event handler, call the following function. 1271 00:53:54,816 --> 00:53:56,576 It doesn't have a name, it's also anonymous 1272 00:53:56,616 --> 00:53:58,266 so this just means here comes some code. 1273 00:53:58,616 --> 00:54:00,866 And now here's the new magical stuff. 1274 00:54:00,986 --> 00:54:04,066 All that junk we wrote to get AJAX working, 1275 00:54:04,066 --> 00:54:07,146 to make an http request which try and catch and Microsoft 1276 00:54:07,146 --> 00:54:09,836 and all that messiness, you can just let it melt away 1277 00:54:10,296 --> 00:54:14,546 because you can instead just say dollar sign dot AJAX open 1278 00:54:14,546 --> 00:54:16,686 parenthesis closed parenthesis. 1279 00:54:17,346 --> 00:54:20,336 And this is a function, AJAX is a function that comes 1280 00:54:20,336 --> 00:54:22,316 in this special library called jQuery 1281 00:54:22,656 --> 00:54:25,466 and what it does is it takes a few arguments and this is hard 1282 00:54:25,466 --> 00:54:28,746 to see visually here because of the way I've written in, 1283 00:54:28,746 --> 00:54:30,096 because of the way it's indented, 1284 00:54:30,396 --> 00:54:33,676 but what I've really done is I'm passing in open curly brace 1285 00:54:33,676 --> 00:54:35,676 and then down here closed curly brace 1286 00:54:36,056 --> 00:54:37,686 to this function called AJAX. 1287 00:54:37,956 --> 00:54:41,596 So this function apparently takes one big argument 1288 00:54:41,816 --> 00:54:43,896 which his just an object, otherwise known 1289 00:54:43,896 --> 00:54:45,456 as an associative array, hash table, 1290 00:54:45,456 --> 00:54:46,476 call it whatever you want. 1291 00:54:46,716 --> 00:54:48,646 Well what is inside of this object? 1292 00:54:48,646 --> 00:54:51,076 Sorry, I lied, it takes at least two arguments here. 1293 00:54:51,456 --> 00:54:53,576 So what's actually inside of this? 1294 00:54:54,026 --> 00:54:58,656 So here is a key, URL, so it means go talk to quote3.php. 1295 00:54:58,846 --> 00:55:02,286 Here is some data and datas value is itself an object. 1296 00:55:02,636 --> 00:55:05,326 So what this means, and this is only the case 1297 00:55:05,326 --> 00:55:07,986 because the jQuery folks decided you have to call this function 1298 00:55:07,986 --> 00:55:11,336 in this way, I'm gonna pass the following data to quote3.php. 1299 00:55:11,336 --> 00:55:14,576 I'm gonna pass a parameter called symbol and I'm pa- 1300 00:55:14,576 --> 00:55:18,116 put a value of dollar sign quote unquote symbol. 1301 00:55:18,116 --> 00:55:19,316 So this is again for Monday. 1302 00:55:19,606 --> 00:55:24,506 Go fine me the div or the input whose ID is symbol and then now 1303 00:55:24,506 --> 00:55:28,096 in jQuery you don't say v- dot value, you instead say val, 1304 00:55:28,096 --> 00:55:30,246 and it's a function call, so get me its value. 1305 00:55:30,446 --> 00:55:33,646 So a long story short, this is just a more dynamic way 1306 00:55:33,796 --> 00:55:37,596 of doing what we did earlier, question mark symbol equals fu 1307 00:55:37,596 --> 00:55:39,366 or whatever the stock symbol name was. 1308 00:55:39,646 --> 00:55:42,416 This is just doing it a little more elegantly because now all 1309 00:55:42,416 --> 00:55:44,926 of our symbols and parameters can be grabbed from code, 1310 00:55:44,926 --> 00:55:46,386 we don't have to hard code the strings 1311 00:55:46,386 --> 00:55:47,556 in that slightly messier way. 1312 00:55:48,106 --> 00:55:50,186 Now notice this, there's the comma here 1313 00:55:50,396 --> 00:55:53,026 and then the word success, and this is important 1314 00:55:53,216 --> 00:55:55,906 because according to the documentation for jQuery, 1315 00:55:56,206 --> 00:55:57,866 specifically its AJAX function, 1316 00:55:58,046 --> 00:56:00,716 the documentation told me write the word success 1317 00:56:01,316 --> 00:56:04,046 because that is the name of a parameter that I want 1318 00:56:04,046 --> 00:56:07,266 to send in, and it's value should be a function, 1319 00:56:07,266 --> 00:56:09,616 and we haven't seen this before, so I'm gonna wave my hands 1320 00:56:09,616 --> 00:56:11,576 at some of the details here, but this is going 1321 00:56:11,576 --> 00:56:14,756 to be an anonymous function that nonetheless takes an argument. 1322 00:56:15,346 --> 00:56:18,006 And when this function is called upon the success 1323 00:56:18,306 --> 00:56:22,456 of the AJAX http call, execute these three lines of code. 1324 00:56:22,696 --> 00:56:24,016 And syntactically they're new 1325 00:56:24,016 --> 00:56:25,386 but they're doing the same thing. 1326 00:56:25,666 --> 00:56:27,566 Dollar sign quote unquote price 1327 00:56:27,566 --> 00:56:29,966 with the sharp sign means go get me the div or the span 1328 00:56:29,966 --> 00:56:32,666 or whatever it is in the html whose idea's price. 1329 00:56:32,736 --> 00:56:33,886 Let's do a quick sanity check. 1330 00:56:33,886 --> 00:56:36,456 All right it's a span, here it is right here in the html. 1331 00:56:37,096 --> 00:56:39,776 So this means go find that input and then just 1332 00:56:39,776 --> 00:56:43,246 as before we did it the old fashioned way dot inner html, 1333 00:56:43,706 --> 00:56:46,536 instead I'm gonna call it function.html 1334 00:56:46,946 --> 00:56:48,826 which is a jQuery function 1335 00:56:48,866 --> 00:56:51,216 and I'm gonna pass it data dot price. 1336 00:56:51,806 --> 00:56:53,536 So this is what I can say about this argument. 1337 00:56:53,916 --> 00:56:56,556 Even though this function is anonymous, it has no name 1338 00:56:56,556 --> 00:56:58,406 like handler, it can still be called. 1339 00:56:58,746 --> 00:57:01,256 And because of the way jQuery's implemented, 1340 00:57:01,256 --> 00:57:03,126 when your AJAX request is successful, 1341 00:57:03,616 --> 00:57:07,006 it will call this function and it will pass to you an argument. 1342 00:57:07,206 --> 00:57:08,526 You can call that argument, again, 1343 00:57:08,526 --> 00:57:10,426 X or Y or Z, anything you want. 1344 00:57:10,426 --> 00:57:11,106 I called it data. 1345 00:57:11,106 --> 00:57:14,786 But what will be inside of that argument, thanks to jQuery, 1346 00:57:14,906 --> 00:57:16,336 will be the server's response. 1347 00:57:16,556 --> 00:57:17,746 And you don't have to do a val, 1348 00:57:17,746 --> 00:57:19,006 you don't need those parenthesis. 1349 00:57:19,086 --> 00:57:22,366 If you get back JSON data, it will just hand it to you 1350 00:57:22,366 --> 00:57:24,586 in a variable called data. 1351 00:57:25,006 --> 00:57:26,736 And thus can I do data dot price, 1352 00:57:26,956 --> 00:57:29,216 data dot high, data dot low. 1353 00:57:29,466 --> 00:57:33,466 And so the end result in AJAX 6 if I go now to this page 1354 00:57:33,466 --> 00:57:37,336 in my browser, is aesthetically it's very unchanged. 1355 00:57:37,616 --> 00:57:40,076 But if I type in let's try go back to goog here 1356 00:57:40,076 --> 00:57:43,266 and then click get quote and wait just a few seconds 'cause 1357 00:57:43,266 --> 00:57:47,276 of the artificial server delay, we should see soon, 1358 00:57:48,546 --> 00:57:51,206 cross your fingers-- that's a slightly longer delay 1359 00:57:51,206 --> 00:57:51,766 than intended. 1360 00:57:52,626 --> 00:57:56,616 Let's click get quote again. 1361 00:57:56,696 --> 00:57:57,616 Okay, something's wrong. 1362 00:57:58,516 --> 00:58:03,546 [ Laughter ] 1363 00:58:04,046 --> 00:58:08,756 Standby. My demos are going really well this week. 1364 00:58:08,756 --> 00:58:11,776 I didn't get the job at Facebook. 1365 00:58:11,776 --> 00:58:14,976 Okay, so it is returning the right data, price high low 1366 00:58:14,976 --> 00:58:18,286 but it's not inserting it into the page like I want it to. 1367 00:58:18,286 --> 00:58:21,716 Did I screw up the code somewhere? 1368 00:58:21,816 --> 00:58:28,376 I am going to wave my hand and say I will-- I know that laugh-- 1369 00:58:29,446 --> 00:58:33,606 and what you would see is. 1370 00:58:34,996 --> 00:58:35,556 . . standby. 1371 00:58:36,786 --> 00:58:38,086 [laughter] This is totally legitimate. 1372 00:58:38,586 --> 00:58:38,766 All right. 1373 00:58:38,766 --> 00:58:44,296 Wallah! Okay let's pretend that worked, 1374 00:58:44,466 --> 00:58:48,406 all right, I'll fix that later. 1375 00:58:48,916 --> 00:58:52,396 So this magical library will make your lives this much better 1376 00:58:52,396 --> 00:58:56,146 if you actually use it, and it will simplify the code as well. 1377 00:58:56,146 --> 00:58:58,806 I'm actually not sure and I don't fix bugs under pressure 1378 00:58:58,806 --> 00:59:01,806 under hundreds of eyes, so I will fix that shortly. 1379 00:59:02,276 --> 00:59:09,546 So what a nice note to move onto the next topic 1380 00:59:09,676 --> 00:59:10,616 with [laughs] [inaudible] Ok- 1381 00:59:10,616 --> 00:59:14,076 this is really frust- hold on one sec. 1382 00:59:15,756 --> 00:59:17,236 [laughter] success, function, data, 1383 00:59:17,236 --> 00:59:17,766 [inaudible] html data [inaudible] 1384 00:59:18,516 --> 00:59:27,296 [ Pause ] 1385 00:59:27,796 --> 00:59:28,866 All right. 1386 00:59:29,416 --> 00:59:29,686 Save. Okay. 1387 00:59:30,516 --> 00:59:35,546 [ Pause ] 1388 00:59:36,046 --> 00:59:36,956 Oh my God! 1389 00:59:37,636 --> 00:59:41,126 [laughter] val, um hum, response. 1390 00:59:42,906 --> 00:59:45,036 That's right. 1391 00:59:46,026 --> 00:59:47,186 Document ready. 1392 00:59:47,696 --> 00:59:48,686 Okay, let's turn this 1393 00:59:48,686 --> 00:59:51,216 into a learning exercise 'cause now I'm getting stubborn so, 1394 00:59:51,746 --> 00:59:59,716 let's see if I go in here, alert, oh hi class, save, 1395 01:00:01,106 --> 01:00:02,286 reload my source code. 1396 01:00:03,076 --> 01:00:06,376 Okay so that line works. 1397 01:00:07,176 --> 01:00:14,046 We're gonna do this then. 1398 01:00:14,266 --> 01:00:15,776 Um hum. Document [inaudible] element 1399 01:00:16,566 --> 01:00:22,796 by ID quote unquote price dot inner html gets data dot price. 1400 01:00:23,446 --> 01:00:25,336 I'm gonna kill these lines, reload, 1401 01:00:25,336 --> 01:00:27,726 source code, Google, damn it! 1402 01:00:27,796 --> 01:00:33,406 [laughter] Okay, I can't recover from this live so we'll move on. 1403 01:00:33,826 --> 01:00:36,936 So we recommend using jQuery for your final project. 1404 01:00:37,536 --> 01:00:40,476 So toward that end, let's see 1405 01:00:40,476 --> 01:00:42,406 if we can't clean up one other issue. 1406 01:00:42,406 --> 01:00:44,736 So thus far on your appliance you've had obviously these 1407 01:00:44,736 --> 01:00:47,636 internal URL's, http colon slash slash local host 1408 01:00:47,636 --> 01:00:52,006 or http colon slash slash 192 dot 168 dot 56 dot 50. 1409 01:00:52,006 --> 01:00:54,516 These are not even publicly accessible nor are they elegant, 1410 01:00:54,736 --> 01:00:58,126 and so recall at the end of P Set 7 and now also P Set 8, 1411 01:00:58,256 --> 01:01:00,426 we have some instructions for how to move your code 1412 01:01:00,426 --> 01:01:01,646 to the so-called CS50. 1413 01:01:02,216 --> 01:01:04,146 So the CS50 cloud is just a b- collection 1414 01:01:04,146 --> 01:01:05,246 of servers that run [inaudible]. 1415 01:01:05,426 --> 01:01:09,256 But they, unlike your appliance have a public IP address, 1416 01:01:09,536 --> 01:01:13,176 and they allow you to connect via SSH, 1417 01:01:13,256 --> 01:01:15,656 via a protocol called sftp documentation 1418 01:01:15,656 --> 01:01:17,056 for which is linked on the page 1419 01:01:17,276 --> 01:01:19,476 that each P Set 7 and 8 allude to. 1420 01:01:19,836 --> 01:01:21,766 And you have the ability to upload your code 1421 01:01:21,916 --> 01:01:24,756 to those servers to move your databases from appliance 1422 01:01:24,756 --> 01:01:27,666 to server so that then you can have your websites live 1423 01:01:27,666 --> 01:01:30,546 at an address like, like an address 1424 01:01:30,546 --> 01:01:35,976 like http colon slash slash cloud dot CS50 dot net slash 1425 01:01:36,036 --> 01:01:39,386 tilde username slash P Set 7. 1426 01:01:39,386 --> 01:01:41,656 So this is really not getting any better 1427 01:01:41,836 --> 01:01:44,216 but you can do even better than this, and one of the things 1428 01:01:44,216 --> 01:01:45,996 that we try to do for CS50 especially 1429 01:01:45,996 --> 01:01:48,016 at terms end is make sure you know 1430 01:01:48,016 --> 01:01:50,166 in the future how you can transition your work off 1431 01:01:50,166 --> 01:01:52,036 of some isolated [inaudible] sandbox 1432 01:01:52,036 --> 01:01:53,986 like the appliance to a real server. 1433 01:01:54,056 --> 01:01:57,406 And so that real server can be cloud dot CS50 dot net, 1434 01:01:57,766 --> 01:02:00,146 but if you go to this URL here which is also linked 1435 01:02:00,146 --> 01:02:03,306 on manual CS50 dot net, you can create if you would 1436 01:02:03,306 --> 01:02:06,056 like for your final project, something called a virtual host. 1437 01:02:06,056 --> 01:02:08,186 So Tasia [inaudible] did this a couple years ago. 1438 01:02:08,486 --> 01:02:11,986 Her website IsawyouHarvard.com originally lived 1439 01:02:11,986 --> 01:02:16,416 on cloud dot CS50 dot net slash tilde and then Tasia's username. 1440 01:02:16,666 --> 01:02:19,596 So not a very elegant destination for her users 1441 01:02:19,596 --> 01:02:23,306 to actually visit, so she signed up for a domain name. 1442 01:02:23,306 --> 01:02:25,076 She went to a place like GoDaddy.com 1443 01:02:25,076 --> 01:02:27,056 or NetworkSolutions.com, 1444 01:02:27,366 --> 01:02:28,876 someplace where you could buy a domain name 1445 01:02:28,876 --> 01:02:30,526 for maybe $10 or $20. 1446 01:02:30,826 --> 01:02:34,416 She then configured that domain name via whoever she bought it 1447 01:02:34,416 --> 01:02:38,176 from, to have an IP address identical 1448 01:02:38,176 --> 01:02:41,516 to cloud dot CS50 dot net, so that henceforth if people went 1449 01:02:41,516 --> 01:02:44,126 to IsawyouHarvard.com and hit enter in their browsers, 1450 01:02:44,356 --> 01:02:47,016 thanks to DNS which we talked about a couple of weeks ago, 1451 01:02:47,246 --> 01:02:50,596 that I- that name IsawyouHarvard.com would resolve 1452 01:02:50,636 --> 01:02:54,746 to an IP address that starts with 140 dot 247 dot something, 1453 01:02:54,746 --> 01:02:57,836 so somewhere on campus, and that IP address is identical 1454 01:02:57,836 --> 01:02:58,796 to that of the cloud. 1455 01:02:59,026 --> 01:03:01,986 She then filled out a Google form on the FS URL here. 1456 01:03:02,156 --> 01:03:04,206 She then told us, CS50 staff, 1457 01:03:04,206 --> 01:03:06,236 hey I just bought IsawyouHarvard.com, 1458 01:03:06,406 --> 01:03:10,006 can you reconfigure the cloud's web server to know that cl- 1459 01:03:10,006 --> 01:03:12,226 IsawyouHarvard.com should map 1460 01:03:12,366 --> 01:03:16,116 to my personal public html directory and we ran a command 1461 01:03:16,116 --> 01:03:19,166 and wallah, IsawyouHarvard.com was born, 1462 01:03:19,166 --> 01:03:21,226 originally on CS50's own servers. 1463 01:03:21,456 --> 01:03:22,466 So you too can do this. 1464 01:03:22,466 --> 01:03:24,046 There is a cost, it's not required, 1465 01:03:24,046 --> 01:03:26,076 but buying a domain name is usually a few dollars, 1466 01:03:26,306 --> 01:03:29,896 but thereafter you can use your CS50 cloud accounts 1467 01:03:29,896 --> 01:03:32,546 as web hosting accounts until terms end. 1468 01:03:32,546 --> 01:03:34,386 And you'll see at terms end we'll provide you 1469 01:03:34,386 --> 01:03:36,936 with some places to then move your code to. 1470 01:03:36,936 --> 01:03:38,566 HCS can provide free hosting. 1471 01:03:39,236 --> 01:03:40,626 There's big companies like DreamHost 1472 01:03:40,626 --> 01:03:42,376 which can provide hosting as well 1473 01:03:42,376 --> 01:03:43,806 as other features and the like. 1474 01:03:44,186 --> 01:03:45,466 But a quick tour now of some 1475 01:03:45,466 --> 01:03:47,106 of the things you can take advantage of now 1476 01:03:47,106 --> 01:03:49,826 that we have this ability to program web side, 1477 01:03:50,046 --> 01:03:52,286 both on the server and on the client with PHP, 1478 01:03:52,286 --> 01:03:54,226 JavaScript and even stored data. 1479 01:03:54,596 --> 01:03:56,976 So CS50 over the years has developed a whole bunch 1480 01:03:56,976 --> 01:03:59,686 of API's, application programming interfaces, 1481 01:03:59,936 --> 01:04:04,466 that allow you to query data from each of these tools. 1482 01:04:04,466 --> 01:04:07,296 You can get course catalog data, event data, dining hall menu 1483 01:04:07,296 --> 01:04:09,946 and the like, in a whole bunch of formats. 1484 01:04:09,946 --> 01:04:15,086 For instance if I go to manual.CS50.net and go 1485 01:04:15,086 --> 01:04:19,196 to Harvard food API, what you'll see is pretty extensive 1486 01:04:19,196 --> 01:04:23,396 documentation examples for a mechanism whereby you can get 1487 01:04:23,476 --> 01:04:26,546 from HUDS website programmatically nutritional 1488 01:04:26,546 --> 01:04:29,946 facts, dining hall menus, and even the individual recipes 1489 01:04:29,946 --> 01:04:31,106 for things in the dining hall. 1490 01:04:31,316 --> 01:04:32,626 And you can get them back in a whole bunch 1491 01:04:32,626 --> 01:04:34,246 of formats suggested here. 1492 01:04:34,246 --> 01:04:36,456 So CSV is comma separated values. 1493 01:04:36,756 --> 01:04:38,816 So if you actually visit a URL like this, 1494 01:04:39,176 --> 01:04:42,896 food dot CS50 dot net slash API slash and so forth, 1495 01:04:42,896 --> 01:04:45,346 and then pass in some http parameters 1496 01:04:45,346 --> 01:04:46,866 like meal equals breakfast, 1497 01:04:46,956 --> 01:04:49,966 start date time equals 2011-03-21 1498 01:04:49,966 --> 01:04:51,716 which was the day I wrote this documentation, 1499 01:04:51,906 --> 01:04:55,316 what you will get back is essentially an Excel file 1500 01:04:55,536 --> 01:04:58,276 with all of this data, and you can parse it just like we did 1501 01:04:58,276 --> 01:05:01,366 in P Set 7 for you with the quote function, or as of today, 1502 01:05:01,586 --> 01:05:03,246 if you want a little more flexibility, 1503 01:05:03,246 --> 01:05:06,686 CSV is not a very fancy format and it has problems if you want 1504 01:05:06,686 --> 01:05:08,846 to actually have commas for instance in your own data. 1505 01:05:09,136 --> 01:05:10,506 Well you can get back JSON data, 1506 01:05:10,506 --> 01:05:13,536 so you can get back the dining hall's menu from March 21st 1507 01:05:13,826 --> 01:05:16,796 in this format instead with all these key value pairs. 1508 01:05:16,796 --> 01:05:19,596 And there's yet other ways you can get at this information. 1509 01:05:19,726 --> 01:05:22,426 But let me draw your attention now too to some documentation. 1510 01:05:22,426 --> 01:05:25,046 So we've been using JavaScript but you can 1511 01:05:25,046 --> 01:05:28,586 in PHP grab JSON data or CSV data and, 1512 01:05:28,806 --> 01:05:30,386 as we keep saying, parse it. 1513 01:05:30,456 --> 01:05:33,056 To parse it means to read it, top down, left to right, 1514 01:05:33,256 --> 01:05:35,946 and actually convert what is literally just a huge string 1515 01:05:35,946 --> 01:05:38,436 of text from a website into some kind 1516 01:05:38,436 --> 01:05:42,696 of data structure whereby you have in memory some kind 1517 01:05:42,696 --> 01:05:45,246 of tree structure representing that object. 1518 01:05:45,496 --> 01:05:47,626 And so I would refer you to this URL here 1519 01:05:47,686 --> 01:05:51,936 for some quick tutorials on how to load JSON data or CSV data 1520 01:05:52,206 --> 01:05:55,216 which I myself should perhaps read soon on how to load those 1521 01:05:55,216 --> 01:05:58,036 into your own web pages or your own PHP files. 1522 01:05:58,266 --> 01:06:00,296 But sometimes you have to resort to this mechanism, 1523 01:06:00,296 --> 01:06:02,886 so screen scraping is a technique 1524 01:06:03,196 --> 01:06:06,486 that involves pretending to be a browser like we do 1525 01:06:06,546 --> 01:06:09,916 for Harvard food, going to the dining.harvard.edu 1526 01:06:10,106 --> 01:06:12,036 and screen scraping HUDS website. 1527 01:06:12,036 --> 01:06:16,426 They have a very s- html laden website where you can see all 1528 01:06:16,426 --> 01:06:19,466 of the nutritional facts and all of the menus, but in html. 1529 01:06:19,706 --> 01:06:22,006 They don't let us just click a link and get a CSV file, 1530 01:06:22,006 --> 01:06:25,076 so we instead wrote a PHP program that every night 1531 01:06:25,076 --> 01:06:29,516 at midnight visits HUDS website, pretends to be Firefox or some 1532 01:06:29,516 --> 01:06:32,616 such browser, grabs all of the html from their website 1533 01:06:32,846 --> 01:06:36,076 and then analyzes it looking for keywords that look like food 1534 01:06:36,076 --> 01:06:37,836 and look like nutritional contents and look 1535 01:06:37,986 --> 01:06:39,496 for portion sizes and the like. 1536 01:06:39,726 --> 01:06:43,646 We then store them in our own se- my sequel database 1537 01:06:43,946 --> 01:06:46,536 and then re-expose it to you with just text 1538 01:06:46,836 --> 01:06:50,006 and no fluffy html so that you can then do something more 1539 01:06:50,006 --> 01:06:51,586 interesting with it and you don't have 1540 01:06:51,706 --> 01:06:53,096 to screen scrape it yourself. 1541 01:06:53,416 --> 01:06:55,146 However, every year people want to do things 1542 01:06:55,146 --> 01:06:58,906 with like ESPN scores or stock data or any amount 1543 01:06:58,906 --> 01:07:01,116 of interesting data that's just out there on the internet 1544 01:07:01,296 --> 01:07:03,236 and they want to load it into their own database 1545 01:07:03,236 --> 01:07:04,876 so realize we have put a tutorial 1546 01:07:04,876 --> 01:07:06,706 at this URL so you can learn. 1547 01:07:06,706 --> 01:07:09,956 If you have to have to have to resort to screen scraping, 1548 01:07:09,956 --> 01:07:11,106 which is not recommended, 1549 01:07:11,106 --> 01:07:13,116 you can at least learn from this example. 1550 01:07:13,646 --> 01:07:16,896 And I warn against it only because if HUDS one day, 1551 01:07:16,896 --> 01:07:18,246 they haven't done this in like five years, 1552 01:07:18,446 --> 01:07:21,426 one day changes their website, that means we are gonna have 1553 01:07:21,476 --> 01:07:23,926 to go and twi- change our code to adapt 1554 01:07:24,196 --> 01:07:25,896 to whatever their new website looks like. 1555 01:07:25,896 --> 01:07:28,376 And so in that sense it's a little fragile, 1556 01:07:28,446 --> 01:07:30,556 but they have a habit of never updating their website 1557 01:07:30,916 --> 01:07:33,306 which is good for us. 1558 01:07:33,486 --> 01:07:34,616 [laughter] So authenticating users-- 1559 01:07:34,616 --> 01:07:35,856 so this is a popular one too. 1560 01:07:35,856 --> 01:07:38,146 You obviously log into CS50's own website, 1561 01:07:38,146 --> 01:07:40,226 you log into all sorts of things across campus, 1562 01:07:40,496 --> 01:07:43,466 but for your own final projects, you might want to restrict usage 1563 01:07:43,466 --> 01:07:47,366 to just Harvard people or anyone affiliated with Harvard.edu 1564 01:07:47,586 --> 01:07:49,296 or just college students, anyone with an 1565 01:07:49,346 --> 01:07:51,166 at college dot Harvard dot edu account. 1566 01:07:51,166 --> 01:07:53,356 So know that at this URL here, there's a bunch 1567 01:07:53,356 --> 01:07:55,346 of techniques whereby you can do exactly that. 1568 01:07:55,716 --> 01:07:58,356 In particular, CS50 provides, as of this year, 1569 01:07:58,356 --> 01:08:01,856 a service that we call CS50 ID which is documented 1570 01:08:01,856 --> 01:08:05,176 on the course's website and this picture just paints a fairly 1571 01:08:05,176 --> 01:08:08,526 complex picture to say that if you want to authenticate a user 1572 01:08:08,526 --> 01:08:10,656 on the left, and your website's there on the right, 1573 01:08:10,976 --> 01:08:15,316 by using this free service CS50 ID with PHP code or Ruby code 1574 01:08:15,316 --> 01:08:18,656 or others, you can authenticate users with their Harvard ID 1575 01:08:18,656 --> 01:08:22,166 and PIN, with their at college address, with their FAS address, 1576 01:08:22,166 --> 01:08:24,406 with their at post address, any of these mechanisms, 1577 01:08:24,606 --> 01:08:28,346 but you yourself never have to ask the user for their password. 1578 01:08:28,346 --> 01:08:29,566 And this is good for security. 1579 01:08:29,566 --> 01:08:32,736 Rather, you'll redirect them to CS50 ID just 1580 01:08:32,736 --> 01:08:35,906 like we redirect you to Facebook for the harvar- 1581 01:08:35,906 --> 01:08:39,666 the CS50 shopping app whereby we will authenticate the user 1582 01:08:39,666 --> 01:08:41,526 and then we will hand them back to you 1583 01:08:41,746 --> 01:08:44,166 and tell you what their email address is typically. 1584 01:08:44,166 --> 01:08:46,926 But we won't tell you their HUID or their password or PIN 1585 01:08:47,216 --> 01:08:48,616 or anything sensitive like that. 1586 01:08:48,706 --> 01:08:52,306 So for CS50 ID, realize there's documentation online as well. 1587 01:08:52,436 --> 01:08:55,466 And then lastly, I wanted to address one technique that some 1588 01:08:55,466 --> 01:08:58,476 of you might have run into some issues with on P Set 7 depending 1589 01:08:58,516 --> 01:08:59,986 on where you developed your code. 1590 01:09:00,276 --> 01:09:03,636 Long story short, sending email is increasingly difficult these 1591 01:09:03,636 --> 01:09:05,526 days because of spam prevention. 1592 01:09:05,526 --> 01:09:08,966 For instance, the Harvard dorms I believe are firewalled 1593 01:09:08,966 --> 01:09:10,606 in such a way that if you try 1594 01:09:10,606 --> 01:09:13,586 to send mail using PHP's mail function, 1595 01:09:13,586 --> 01:09:15,136 it will often not go out. 1596 01:09:15,136 --> 01:09:16,556 It will wor- your code will work 1597 01:09:16,666 --> 01:09:19,006 but no one will ever get the email and this is typically 1598 01:09:19,006 --> 01:09:24,036 because Harvard is blocking, in this case TCP port 25. 1599 01:09:24,146 --> 01:09:26,186 Think back to that video on how the internet works 1600 01:09:26,336 --> 01:09:28,636 and the firewall and how you can prevent certain numbers 1601 01:09:28,636 --> 01:09:30,786 from going through, they let you access the web 1602 01:09:30,786 --> 01:09:33,736 but they don't necessarily allow you to use port 25 1603 01:09:34,026 --> 01:09:37,356 which is outbound email access unless you actually use 1604 01:09:37,356 --> 01:09:38,256 their server. 1605 01:09:38,256 --> 01:09:41,036 So you'll see at this URL some documentation 1606 01:09:41,036 --> 01:09:43,756 that not only reminds you how to use PHP's mail function, 1607 01:09:44,086 --> 01:09:45,896 but if you scroll down below, 1608 01:09:45,996 --> 01:09:48,336 you will see documentation on this. 1609 01:09:48,336 --> 01:09:52,606 This is a PHP class, it's like a library that allows you to, 1610 01:09:52,606 --> 01:09:56,916 with a little more complexity, send email using an SMTP server. 1611 01:09:57,206 --> 01:09:59,406 So an SMTP just means outgoing mail, 1612 01:09:59,406 --> 01:10:02,046 and in this case Harvard has an SMTP server that all 1613 01:10:02,046 --> 01:10:05,276 of us can use on campus called SMTP dot fas dot Harvard 1614 01:10:05,276 --> 01:10:05,966 dot edu. 1615 01:10:06,166 --> 01:10:08,616 If you're off campus you might need to use like Comcast, 1616 01:10:08,616 --> 01:10:11,866 SMTP dot Comcast dot net, but you'll see here a bunch of lines 1617 01:10:11,866 --> 01:10:15,166 of code that allow you to programmatically send emails, 1618 01:10:15,406 --> 01:10:17,446 even attachments, and avoid some 1619 01:10:17,446 --> 01:10:19,666 of the firewalling issues you might encounter. 1620 01:10:19,986 --> 01:10:22,626 But even more fun is this ability to send text messages. 1621 01:10:22,876 --> 01:10:24,326 So there's bunches of ways to do this 1622 01:10:24,326 --> 01:10:27,346 but if your final project wants to remind or alert users, 1623 01:10:27,606 --> 01:10:31,796 you can also send text messages using very simple syntax. 1624 01:10:31,886 --> 01:10:34,026 If you already know how to send emails, 1625 01:10:34,466 --> 01:10:37,836 you can also send text messages via email. 1626 01:10:38,036 --> 01:10:41,176 So it turns out all these popular US phone carriers allow 1627 01:10:41,176 --> 01:10:42,526 you to send a text message 1628 01:10:42,526 --> 01:10:47,096 to someone whose number is maybe fi- 617-555-1212 1629 01:10:47,306 --> 01:10:50,716 to an email address that ends in at vtext.com 1630 01:10:50,716 --> 01:10:54,216 if they're a Verizon customer, or at tmomail.net 1631 01:10:54,216 --> 01:10:56,796 if they're T-Mobil or at text.att.net. 1632 01:10:57,246 --> 01:11:00,146 So if we combine all of these features as I did here 1633 01:11:00,146 --> 01:11:03,506 in advance, let me see if I can get this all to work here. 1634 01:11:03,506 --> 01:11:04,596 Let me pull up a browser, 1635 01:11:04,596 --> 01:11:06,616 let me just make sure my internet connection's working 1636 01:11:07,106 --> 01:11:11,186 inside of my appliance which it isn't 1637 01:11:11,186 --> 01:11:13,036 but I promise this- oh there it is, good. 1638 01:11:13,486 --> 01:11:15,416 So my internet is working inside the appliance. 1639 01:11:15,586 --> 01:11:16,826 I went ahead in advance 1640 01:11:16,826 --> 01:11:20,216 and I wrote this little program here called email.php, 1641 01:11:20,216 --> 01:11:23,106 and this is pretty much copied and pasted 1642 01:11:23,106 --> 01:11:24,796 from the documentation I just alluded to 1643 01:11:24,986 --> 01:11:26,996 but then I also remember back in like week 0, 1644 01:11:26,996 --> 01:11:29,966 we asked you all what your cell phone numbers are 1645 01:11:29,966 --> 01:11:32,746 and who your carrier is, so I wrote a little program that went 1646 01:11:32,746 --> 01:11:33,926 through CS50's database 1647 01:11:34,206 --> 01:11:36,836 and I generated a big Excel spreadsheet, 1648 01:11:36,836 --> 01:11:40,156 a CSV file containing all of your first names and all 1649 01:11:40,156 --> 01:11:44,516 of your cell phone numbers concatenated with tmomail.net 1650 01:11:44,516 --> 01:11:47,566 or vtext.com or the like, and then I stole this code here 1651 01:11:47,876 --> 01:11:49,196 which has a nice little four loop. 1652 01:11:49,196 --> 01:11:54,316 That first F opens students dot CSV that then calls f get CSV, 1653 01:11:54,586 --> 01:11:55,936 that then calls add address. 1654 01:11:55,936 --> 01:11:58,476 And I'm gonna go ahead and add the address here, 1655 01:11:58,816 --> 01:12:01,136 not JHarvard@CS50.net, but I'm gonna go ahead 1656 01:12:01,136 --> 01:12:07,216 and add column one from this CSV file, and I wrote a little email 1657 01:12:07,216 --> 01:12:10,556 to you, why aren't you at CS50 [inaudible] 0. 1658 01:12:10,556 --> 01:12:12,276 Let me scroll down. 1659 01:12:12,666 --> 01:12:15,686 Then I'm gonna say send and then I'm gonna sleep for a tenth 1660 01:12:15,686 --> 01:12:17,626 of a second just so that the email server doesn't 1661 01:12:17,626 --> 01:12:18,326 blacklist me. 1662 01:12:18,856 --> 01:12:20,236 And then I'm gonna get this here 1663 01:12:20,416 --> 01:12:22,696 so if I didn't make any mistakes, 1664 01:12:23,036 --> 01:12:25,176 this is a wonderful example of how 1665 01:12:25,176 --> 01:12:27,636 to send text messages programmatically 1666 01:12:27,636 --> 01:12:29,226 for final projects-- don't do this at home 1667 01:12:29,226 --> 01:12:32,596 to this many people-- but if I did this right, 1668 01:12:32,596 --> 01:12:34,396 let me open my terminal window, 1669 01:12:34,756 --> 01:12:36,636 I'm sorry about to cost some of you a dime. 1670 01:12:37,226 --> 01:12:39,616 I'm going to go into my email directory. 1671 01:12:41,296 --> 01:12:43,256 I'm going to-- if you gave us your number. 1672 01:12:43,446 --> 01:12:46,326 I'm gonna run, so here's the script, email dot PHP 1673 01:12:46,326 --> 01:12:49,096 to run a PHP program at the command line I have 1674 01:12:49,096 --> 01:12:52,536 to call the interpreter and then call it 1675 01:12:52,536 --> 01:12:55,486 on PHP, email dot PHP enter. 1676 01:12:56,826 --> 01:12:58,476 Uh-oh. Wait a minute. 1677 01:12:59,166 --> 01:13:00,286 Wait a minute. 1678 01:13:00,286 --> 01:13:01,986 Oh please don't die on us. 1679 01:13:02,336 --> 01:13:06,676 [laughter] Let's see, okay hold on [inaudible]. 1680 01:13:07,866 --> 01:13:10,576 Okay. [laughter] Okay. 1681 01:13:11,896 --> 01:13:23,936 Yes? Yes! [applause] All right! 1682 01:13:27,996 --> 01:13:29,076 [applause] Vindicated! 1683 01:13:29,076 --> 01:13:31,286 We will see you next week and please explain 1684 01:13:31,286 --> 01:13:37,346 to those not present why we just text messaged them. 1685 01:13:37,846 --> 01:13:40,730 [laughter]