1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J. MALAN: Oké, dus dit is hier de Myo arm 3 00:00:41,880 --> 00:00:44,450 band, een paar die we hebben voor CS50 afstudeeropdrachten. 4 00:00:44,450 --> 00:00:47,533 En dat was een demonstratie die we in de wachtrij u van tevoren waar wezen 5 00:00:47,533 --> 00:00:51,120 deze vrij strakke arm band hier luistert naar uw spierbewegingen 6 00:00:51,120 --> 00:00:54,280 die vervolgens in kaart worden gebracht software Colton's laptop over hier die 7 00:00:54,280 --> 00:00:57,230 had iTunes en dat lied al in de rij staan. 8 00:00:57,230 --> 00:01:00,270 In plaats van me demonstreren deze, Colton is al in het lab 9 00:01:00,270 --> 00:01:04,129 duidelijk de hele week krijgen van een demonstratie klaar voor een dappere vrijwilliger. 10 00:01:04,129 --> 00:01:07,430 Als iemand zou willen komen op up-- zag eerst je hand. 11 00:01:07,430 --> 00:01:09,540 Come on up. 12 00:01:09,540 --> 00:01:12,530 >> Prima. 13 00:01:12,530 --> 00:01:13,886 En wat is je naam? 14 00:01:13,886 --> 00:01:14,800 >> PUBLIEK: Uh, Maria. 15 00:01:14,800 --> 00:01:16,550 >> DAVID J. MALAN: Maria, leuk je te zien. 16 00:01:16,550 --> 00:01:17,310 Kom eens hier. 17 00:01:17,310 --> 00:01:19,550 Laat me je voorstellen aan Colton. 18 00:01:19,550 --> 00:01:21,290 Colton, dit is Maria. 19 00:01:21,290 --> 00:01:23,050 >> COLTON: Hoi, leuk je te ontmoeten. 20 00:01:23,050 --> 00:01:24,330 >> DAVID J. MALAN: Alle rechts, dus stap één, we zijn 21 00:01:24,330 --> 00:01:26,204 gaat hebben je dit door aan uw onderarm 22 00:01:26,204 --> 00:01:29,280 dus dat het vrij strak op in de buurt van uw elleboog. 23 00:01:29,280 --> 00:01:31,940 En ondertussen laten we op onze Google Glass 24 00:01:31,940 --> 00:01:33,720 en we zullen mengen technologieën vandaag. 25 00:01:33,720 --> 00:01:36,340 >> COLTON: Eerst zullen we moeten haak deze in de dingen. 26 00:01:36,340 --> 00:01:37,170 >> DAVID J. MALAN: OK. 27 00:01:37,170 --> 00:01:39,795 Eigenlijk, laten we je arm als dicht bij deze kabel mogelijk 28 00:01:39,795 --> 00:01:41,160 zodat we kunnen eerst synchroniseren it up. 29 00:01:41,160 --> 00:01:42,740 >> COLTON: Laten we dit doen. 30 00:01:42,740 --> 00:01:46,500 >> DAVID J. MALAN: En ondertussen, dus dat iedereen een dichter oogopslag kunt krijgen, 31 00:01:46,500 --> 00:01:50,290 we zullen Andrew's camera gooien up op het scherm daar. 32 00:01:50,290 --> 00:01:54,460 Dus we hebben een USB-kabel die is wordt aangesloten op Maria's armband. 33 00:01:54,460 --> 00:02:00,230 En laat me scherm Colton's gooien op de projector volgende. 34 00:02:00,230 --> 00:02:06,000 >> Dus Colton is de registratie van het apparaat nu als Myo aangesloten deze kabel. 35 00:02:06,000 --> 00:02:08,060 En nu, wat Maria's ga even doen 36 00:02:08,060 --> 00:02:10,120 is eigenlijk een wandeling door de calibratie stappen 37 00:02:10,120 --> 00:02:12,830 en leren de software hoe haar spieren reageren 38 00:02:12,830 --> 00:02:16,070 toen ze er zeker van vooraf gedefinieerde gebaren die de software begrijpt. 39 00:02:16,070 --> 00:02:17,910 Als je zou willen gaan in voorkant van het scherm. 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 OK, blijf proberen. 42 00:02:30,090 --> 00:02:31,860 >> COLTON: Ga als volgt uit. 43 00:02:31,860 --> 00:02:32,970 En als dat. 44 00:02:32,970 --> 00:02:34,563 En helemaal naar rechts. 45 00:02:34,563 --> 00:02:35,922 Ga terug. 46 00:02:35,922 --> 00:02:37,740 >> DAVID J. MALAN: OK. 47 00:02:37,740 --> 00:02:38,960 Ander perspectief. 48 00:02:38,960 --> 00:02:39,620 Het ligt niet aan jou. 49 00:02:39,620 --> 00:02:40,350 Het is ons. 50 00:02:40,350 --> 00:02:41,749 >> MARIA: OK. 51 00:02:41,749 --> 00:02:42,540 DAVID J. MALAN: No. 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 Laten we verder gaan het hoger dus het is dichter bij je elleboog, of nog strakker. 54 00:02:51,540 --> 00:02:52,680 Prima. 55 00:02:52,680 --> 00:02:53,270 >> Daar gaan we dan. 56 00:02:53,270 --> 00:02:56,780 Dit zou een goed moment voor CS52X zijn. 57 00:02:56,780 --> 00:02:57,670 Daar gaan we. 58 00:02:57,670 --> 00:02:58,760 >> Very nice. 59 00:02:58,760 --> 00:03:01,170 OK. 60 00:03:01,170 --> 00:03:02,790 Thumb Pinky. 61 00:03:02,790 --> 00:03:03,380 >> Very nice. 62 00:03:03,380 --> 00:03:05,140 Spreid je vingers. 63 00:03:05,140 --> 00:03:06,240 Goed. 64 00:03:06,240 --> 00:03:06,910 Wave rechts. 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 Het is merkwaardig te zien u met de linker hand-- 67 00:03:17,010 --> 00:03:19,665 >> COLTON: Ja, dat is raar. 68 00:03:19,665 --> 00:03:21,790 DAVID J. MALAN: zwaai naar rechts en vooruit. 69 00:03:21,790 --> 00:03:22,998 Fast forward naar overslaan of volgende. 70 00:03:22,998 --> 00:03:25,020 Dat is OK Wave-rechts. 71 00:03:25,020 --> 00:03:26,650 >> MARIA: Ik don't-- wachten. 72 00:03:26,650 --> 00:03:28,430 >> DAVID J. MALAN: Hulp nodig? 73 00:03:28,430 --> 00:03:30,027 >> COLTON: Dus je gaat als dit. 74 00:03:30,027 --> 00:03:31,860 MARIA: Het draaien van de ander ding, dat wel. 75 00:03:31,860 --> 00:03:32,390 COLTON: Het is. 76 00:03:32,390 --> 00:03:34,250 DAVID J. MALAN: Ja, ik weet het niet waarom het toont u een leftie. 77 00:03:34,250 --> 00:03:36,458 COLTON: Waarom ga je niet try-- gewoon proberen te gaan als dit. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J. MALAN: Nee? 80 00:03:40,090 --> 00:03:42,580 Misschien is je arm te bereiken een beetje rechtere 81 00:03:42,580 --> 00:03:46,070 en maken het meer abrupt als deze. 82 00:03:46,070 --> 00:03:48,176 Ja, OK, kom op. 83 00:03:48,176 --> 00:03:49,670 >> MARIA: Het spijt me. 84 00:03:49,670 --> 00:03:51,170 DAVID J. MALAN: Het is niet jouw schuld. 85 00:03:51,170 --> 00:03:53,018 COLTON: Het is prima. 86 00:03:53,018 --> 00:03:55,430 DAVID J. MALAN: All Right. 87 00:03:55,430 --> 00:03:56,220 Goed-- 88 00:03:56,220 --> 00:03:57,620 >> MARIA: Moeten we deze overslaan, dan? 89 00:03:57,620 --> 00:03:59,620 DAVID J. MALAN: Ja, laten we laat je de haak. 90 00:03:59,620 --> 00:04:03,130 Dus als iemand graag een doen afstudeerproject gebruik deze cutting edge 91 00:04:03,130 --> 00:04:07,707 hardware, beseffen het misschien gewoon neem een ​​beetje wennen. 92 00:04:07,707 --> 00:04:10,290 En dit-- de realiteit is dit is eigenlijk heel bleeding edge. 93 00:04:10,290 --> 00:04:12,040 >> Dit is wat heet de developer kit, die 94 00:04:12,040 --> 00:04:14,956 bedoeld in wezen een pre-release zodat mensen precies kunnen doen 95 00:04:14,956 --> 00:04:18,690 dit-- strijd met het, figuur hoe de lichamen van mensen werken 96 00:04:18,690 --> 00:04:19,980 met de technologie. 97 00:04:19,980 --> 00:04:21,750 Dus als je wilt daarna, na lezing, 98 00:04:21,750 --> 00:04:23,750 wij kunnen u laten komen en neem nog een gooi naar het. 99 00:04:23,750 --> 00:04:26,970 Maar voor de rest, een applaus, indien we konden, voor Maria voor het komen op maximaal. 100 00:04:26,970 --> 00:04:28,770 >> MARIA: Dank je wel. 101 00:04:28,770 --> 00:04:30,390 >> DAVID J. MALAN: Dank je wel. 102 00:04:30,390 --> 00:04:34,945 We zullen op te hangen aan deze, maar we zullen geven u-- wat dacht je van een stress-bal hier? 103 00:04:34,945 --> 00:04:38,620 Oh, en-- if-- ja, bedankt. 104 00:04:38,620 --> 00:04:39,715 Prima. 105 00:04:39,715 --> 00:04:45,750 Dus voor de nieuwsgierigen, als je onbekend met de verantwoorde keuze 106 00:04:45,750 --> 00:04:47,670 die we daar gemaakt eerder, een geweldige TV 107 00:04:47,670 --> 00:04:50,210 laten zien dat je moet absoluut be-binge-kijken op Netflix 108 00:04:50,210 --> 00:04:51,110 is dit één hier. 109 00:04:51,110 --> 00:04:54,472 >> SPEAKER 1: Dames en heren, een tovenaar genaamd Josh. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J. MALAN: En blijkbaar, het is een ding om tekst mij tijdens college nu. 112 00:05:08,050 --> 00:05:11,190 Ik word verteld dat Maria had een verjaardag gisteren. 113 00:05:11,190 --> 00:05:14,095 Dus gelukkige verjaardag uit CS50 aan Maria ook. 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> Dus je hebt kunnen lezen in de afgelopen maand dat deze heren hier, Steve 116 00:05:22,090 --> 00:05:25,260 Ballmer, die eigenlijk was klasse van 1977 aan het college, 117 00:05:25,260 --> 00:05:27,170 onlangs gepensioneerde voor Microsoft. 118 00:05:27,170 --> 00:05:29,620 Hij was een undergraduate hier, vervolgens een paar jaar later 119 00:05:29,620 --> 00:05:31,910 bevond zich op Stanford Business School 120 00:05:31,910 --> 00:05:34,160 toen hij een telefoontje kreeg bel via een vriend van hem, die 121 00:05:34,160 --> 00:05:36,516 had de zaal leefde beneden van hem hier op Harvard. 122 00:05:36,516 --> 00:05:38,640 Naam van die vriend was Bill Poorten, en tegelijkertijd, 123 00:05:38,640 --> 00:05:42,700 hij probeerde te rekruteren Steve te zijn de eerste zakelijke persoon, echt, 124 00:05:42,700 --> 00:05:45,720 bij een klein bedrijf te noemen Microsoft. 125 00:05:45,720 --> 00:05:48,960 >> Een lang verhaal kort, Steve werd uiteindelijk gewonnen, 126 00:05:48,960 --> 00:05:52,130 trad Microsoft wanneer ze had slechts 30 medewerkers. 127 00:05:52,130 --> 00:05:54,300 En tegen de tijd dat hij gepensioneerd vrij recent, 128 00:05:54,300 --> 00:05:58,100 had het bedrijf 100.000 werknemers in de afgelopen jaren. 129 00:05:58,100 --> 00:06:01,171 En dus een website die bekend staat als The Verge voorbereid dit eerbetoon op video 130 00:06:01,171 --> 00:06:02,920 dat we dachten dat we zouden gedeeld, dat geeft je 131 00:06:02,920 --> 00:06:08,380 een gevoel van hoeveel energie Steve brengt aan een presentatie die hij geeft. 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [VIDEO AFSPELEN] 134 00:06:12,550 --> 00:06:16,220 -Microsoft Is net een vierde kind. 135 00:06:16,220 --> 00:06:18,260 Kinderen doen het huis verlaten. 136 00:06:18,260 --> 00:06:21,875 In dit geval denk ik Ik ben het verlaten van het huis. 137 00:06:21,875 --> 00:06:23,270 Hey Bill, whazzap? 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap? 139 00:06:24,200 --> 00:06:25,320 >> Hé, wazzap? 140 00:06:25,320 --> 00:06:28,590 We hebben gekregen enorme kans. 141 00:06:28,590 --> 00:06:30,210 En Bill gaf ons die kans. 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 Ik wil Bill bedanken. 144 00:06:36,770 --> 00:06:39,630 Ik wil dat je ook. 145 00:06:39,630 --> 00:06:42,500 Het tempo van innovatie is niet van plan te vertragen. 146 00:06:42,500 --> 00:06:45,140 >> Het gaat sneller en sneller te krijgen. 147 00:06:45,140 --> 00:06:50,165 Er kunnen een paar concurrenten die helaas worden geëlimineerd! 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> Ik hou van dit bedrijf. 150 00:06:59,564 --> 00:07:00,064 Yes! 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 Ik ben een PC, en ik hou van dit bedrijf! 153 00:07:08,250 --> 00:07:13,090 >> Ontwikkelaars, ontwikkelaars, ontwikkelaars, developers, developers, developers, 154 00:07:13,090 --> 00:07:14,560 ontwikkelaars, ontwikkelaars. 155 00:07:14,560 --> 00:07:17,500 156 00:07:17,500 --> 00:07:18,970 Yes! 157 00:07:18,970 --> 00:07:19,950 Webontwikkelaars! 158 00:07:19,950 --> 00:07:21,420 >> Webontwikkelaars! 159 00:07:21,420 --> 00:07:22,890 Webontwikkelaars! 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 Luister naar wat je nog meer krijgen zonder extra kosten! 162 00:07:28,770 --> 00:07:31,960 >> De MS-DOS-executive, een afspraak kalender, een kaart stapel, een notitieblok, 163 00:07:31,960 --> 00:07:33,750 een klok, een bedieningspaneel. 164 00:07:33,750 --> 00:07:35,461 En, kan je het geloven? 165 00:07:35,461 --> 00:07:35,960 Reversie! 166 00:07:35,960 --> 00:07:37,270 >> Brand ze op een cd! 167 00:07:37,270 --> 00:07:38,660 Post ze op MSN! 168 00:07:38,660 --> 00:07:40,422 Je mail ze aan vrienden! 169 00:07:40,422 --> 00:07:41,790 >> Allemaal met één klik! 170 00:07:41,790 --> 00:07:48,670 Een Microsoft, één strategie, één team-- geconcentreerd, gedisciplineerd, professioneel, 171 00:07:48,670 --> 00:07:50,610 en expert in alles wat we doen. 172 00:07:50,610 --> 00:07:52,670 Laat ik gebruik maken van een regel uit een oude film. 173 00:07:52,670 --> 00:07:54,810 >> Relaties zijn net als haaien. 174 00:07:54,810 --> 00:07:57,480 Ze bewegen zich naar voren of ze sterven. 175 00:07:57,480 --> 00:08:01,470 Ik denk eigenlijk tech bedrijven zijn hetzelfde. 176 00:08:01,470 --> 00:08:04,801 >> [END VIDEO AFSPELEN] 177 00:08:04,801 --> 00:08:08,050 DAVID J. MALAN: Dus we zijn zo blij om aankondigen dat Steve ons zal vergezellen 178 00:08:08,050 --> 00:08:13,320 hier in CS50 komende woensdag om de gebruikelijke plaats en tijd hier. 179 00:08:13,320 --> 00:08:14,750 Space zal waarschijnlijk beperkt zijn. 180 00:08:14,750 --> 00:08:19,650 En dus om samen met ons in persoon, dan kunt u ga vandaag of kort daarna 181 00:08:19,650 --> 00:08:22,600 naar cs50.harvard.edu/register. 182 00:08:22,600 --> 00:08:25,780 >> En we zullen volgen door Dinsdag bevestigt vlekken. 183 00:08:25,780 --> 00:08:29,900 Kijk uit naar die volgende Woensdag tijdens de lezing in CS50. 184 00:08:29,900 --> 00:08:33,706 Nu, in ander nieuws, ik toevallig tegenkomen dit in The Crimson net 185 00:08:33,706 --> 00:08:34,289 de andere dag. 186 00:08:34,289 --> 00:08:37,370 >> Het blijkt dat een van de medewerkers CS50's en ten minste één van de CS50-studenten 187 00:08:37,370 --> 00:08:40,299 is momenteel actief voor UC president en vice-president, 188 00:08:40,299 --> 00:08:42,950 die me terug bracht om mijn eigen dagen terug 189 00:08:42,950 --> 00:08:45,920 toen verloor ik de UC verkiezing jammerlijk. 190 00:08:45,920 --> 00:08:48,210 Maar de zilveren randje in dat ik altijd 191 00:08:48,210 --> 00:08:50,604 vertellen het verhaal is dat een van de ik weet zeker 192 00:08:50,604 --> 00:08:52,770 vele redenen waarom ik verloor de verkiezing was een compleet gebrek 193 00:08:52,770 --> 00:08:54,103 van een talent voor spreken in het openbaar. 194 00:08:54,103 --> 00:08:56,950 En dus eerlijk gezegd, het reed me, die ervaring 195 00:08:56,950 --> 00:09:02,235 Ik denk dat mijn junior jaar, om daadwerkelijk te ondertekenen up voor Harvard Computer Society, die 196 00:09:02,235 --> 00:09:04,610 is de groep op de campus dat heeft diverse technische besprekingen 197 00:09:04,610 --> 00:09:05,318 en andere dingen. 198 00:09:05,318 --> 00:09:08,117 En ik nam het over hun onderwijs seminars en daarom 199 00:09:08,117 --> 00:09:09,950 had een kans, een prachtige kans, 200 00:09:09,950 --> 00:09:12,620 te gaan werken precies dit op. 201 00:09:12,620 --> 00:09:15,000 Maar ook, ik had een kans Tijdens deze ervaring 202 00:09:15,000 --> 00:09:16,930 om mezelf te leren alle informatie HTML. 203 00:09:16,930 --> 00:09:21,080 En dus ik procrastinated gisteravond door kijken door de HTML-gebaseerde website 204 00:09:21,080 --> 00:09:28,066 Ik maakte in zoals 1997, '98, voor mijn campagne die ziet er zo uit hier. 205 00:09:28,066 --> 00:09:29,920 Ik weet het. 206 00:09:29,920 --> 00:09:33,340 >> Because-- en natuurlijk, kennisgeving deze geweldige ontwerpbeslissing in 1998 207 00:09:33,340 --> 00:09:33,850 of wat al niet. 208 00:09:33,850 --> 00:09:36,475 Het eerste wat je wilt dat gebruikers te doen bij het bezoeken van uw website 209 00:09:36,475 --> 00:09:39,860 is om naar een andere link klikt gewoon naar uw website te gaan met de monnik 210 00:09:39,860 --> 00:09:43,940 achter als een gehuld gordijn waar blijkbaar mijn campagne platform was. 211 00:09:43,940 --> 00:09:46,330 En dit is alles wat je krijgt vandaag de dag is gewoon een screenshot. 212 00:09:46,330 --> 00:09:49,500 Maar ik was het lezen door, net als, mijn campagneposters gisteravond 213 00:09:49,500 --> 00:09:50,490 en mijn platform. 214 00:09:50,490 --> 00:09:52,960 >> En ik was zo boos op het moment. 215 00:09:52,960 --> 00:09:55,380 Mijn platform was-- het was interessant. 216 00:09:55,380 --> 00:09:57,730 Dus ik heb gekalmeerd sindsdien. 217 00:09:57,730 --> 00:10:03,550 Maar op een dag, zal ik weer lopen en hopelijk beter af deze keer. 218 00:10:03,550 --> 00:10:07,265 >> Dus HTML, die taal waarin ik gemaakt dat in-- zul je al snel te maken veel more-- 219 00:10:07,265 --> 00:10:09,140 is iets waar we zijn geweest het over van de late 220 00:10:09,140 --> 00:10:12,460 en grotendeels zaken waarnam verleend dat we verhuisd naar andere talen. 221 00:10:12,460 --> 00:10:15,650 Maar laten we pauzeren voor een moment en zet een aantal van deze dingen in context. 222 00:10:15,650 --> 00:10:18,040 Dus in zekere zin, wat is HTML? 223 00:10:18,040 --> 00:10:19,370 >> Of, wat wordt gebruikt voor? 224 00:10:19,370 --> 00:10:20,208 Anyone? 225 00:10:20,208 --> 00:10:20,708 Ja. 226 00:10:20,708 --> 00:10:22,002 >> Publiek: Markup voor websites. 227 00:10:22,002 --> 00:10:23,460 DAVID J. MALAN: Markup voor website. 228 00:10:23,460 --> 00:10:27,100 Dus het is een opmaaktaal die kunt u een webpagina te structureren. 229 00:10:27,100 --> 00:10:30,040 Header gaat hier op, titel gaat hier, lichaam gaat hier. 230 00:10:30,040 --> 00:10:33,280 Dit vet is, is italics-- dat soort details. 231 00:10:33,280 --> 00:10:33,830 >> OK, goed. 232 00:10:33,830 --> 00:10:37,620 Dus CSS laat je-- en ik nam wat vrijheden er 233 00:10:37,620 --> 00:10:40,990 met het vet-facing en cursief, omdat Dat is beter geïmplementeerd met dit. 234 00:10:40,990 --> 00:10:42,096 CSS is-- wat? 235 00:10:42,096 --> 00:10:42,845 Zeggen in een zin. 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 Wie dan ook. 238 00:10:46,720 --> 00:10:46,870 Yeah. 239 00:10:46,870 --> 00:10:49,286 >> PUBLIEK: Versieringen en dingen, zoals hoe om het te ontwerpen. 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 DAVID J. MALAN: OK, goed. 242 00:10:52,810 --> 00:10:55,420 Versieringen die u toelaten om het te ontwerpen of te stileren het 243 00:10:55,420 --> 00:10:59,540 met dingen als boldface en cursief en kleuren en ook meer fijne 244 00:10:59,540 --> 00:11:01,330 korrel positionering van elementen. 245 00:11:01,330 --> 00:11:04,520 Het laat een soort van je dingen het nemen laatste mijl zodat indien bijvoorbeeld, 246 00:11:04,520 --> 00:11:08,130 in Pset7, zou je hebben gemerkt op uw portfolio pagina als je op dit punt 247 00:11:08,130 --> 00:11:12,270 al dat een standaard tabel die u leveren aan de gebruiker aandelenposities tonen 248 00:11:12,270 --> 00:11:15,740 en cash ziet er waarschijnlijk vrij afzichtelijk standaard zonder witruimte. 249 00:11:15,740 --> 00:11:18,420 Soort gepropt Everything's elkaar in rijen en kolommen. 250 00:11:18,420 --> 00:11:20,662 >> Nou, met een beetje CSS, zoals u wellicht denkt, 251 00:11:20,662 --> 00:11:23,870 je daadwerkelijk kunt tweaken dat en maken het iets veel vertrouwder en nog veel 252 00:11:23,870 --> 00:11:24,870 mooier om naar te kijken. 253 00:11:24,870 --> 00:11:27,730 Dus CSS gaat over de stilering van websites. 254 00:11:27,730 --> 00:11:31,970 Maar dan nog een introduceerden we taal, PHP, die ons laat doen wat? 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> Laten we gewoon doen wat? 257 00:11:37,590 --> 00:11:38,177 Iedereen. 258 00:11:38,177 --> 00:11:40,010 Kreeg naar buiten wagen de eerste paar rijen. 259 00:11:40,010 --> 00:11:40,260 Yeah. 260 00:11:40,260 --> 00:11:41,719 >> Publiek: Genereer dynamische inhoud. 261 00:11:41,719 --> 00:11:42,718 DAVID J. MALAN: Perfect. 262 00:11:42,718 --> 00:11:43,850 Genereer dynamische inhoud. 263 00:11:43,850 --> 00:11:45,808 En u kunt dit doen in een onbeperkt aantal talen. 264 00:11:45,808 --> 00:11:50,120 We gebeuren om PHP te gebruiken, want het is deels zo vergelijkbaar met C syntax. 265 00:11:50,120 --> 00:11:52,000 >> Maar PHP doet precies dat. 266 00:11:52,000 --> 00:11:54,620 Het laat je dynamisch genereren output. 267 00:11:54,620 --> 00:11:57,890 En sommige van die uitvoer zou kunnen zijn HTML, zoals we meestal gedaan. 268 00:11:57,890 --> 00:12:00,160 En het is ook, omdat het een programmeertaal, is 269 00:12:00,160 --> 00:12:03,240 het mechanisme via welke kunnen we databases praten. 270 00:12:03,240 --> 00:12:05,730 >> En we kunnen queries te maken andere servers zoals Yahoos 271 00:12:05,730 --> 00:12:08,660 en programmatisch iets te doen echt dat je misschien anders 272 00:12:08,660 --> 00:12:10,400 willen een computer te dwingen te doen. 273 00:12:10,400 --> 00:12:13,580 Dus PHP laat ons beginnen dynamisch uitvoeren content. 274 00:12:13,580 --> 00:12:16,900 Dus door deze logica, had ik niet een dynamische website terug in 1998. 275 00:12:16,900 --> 00:12:18,460 >> Het was gewoon een statische webpagina. 276 00:12:18,460 --> 00:12:22,250 Mijn inhoud moest door worden veranderd handmatig met gedit of een equivalent. 277 00:12:22,250 --> 00:12:25,290 Maar PHP is wat we vroeger of had kunnen gebruiken, in plaats van, 278 00:12:25,290 --> 00:12:27,260 voor iets als de Frosh IMs website, die 279 00:12:27,260 --> 00:12:31,160 werd verondersteld om registraties te nemen en beheren van een lijst van users-- dingen die 280 00:12:31,160 --> 00:12:33,550 zijn eigenlijk de omschakeling tijd, hoewel we er gebeuren 281 00:12:33,550 --> 00:12:35,990 Perl, een ander gebruik taal tijd. 282 00:12:35,990 --> 00:12:40,350 >> En dan tot slot, we geïntroduceerd SQL-- Structured Query Language. 283 00:12:40,350 --> 00:12:43,845 Toch zo een andere taal die wordt gebruikt voor wat? 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 Gebruikt voor wat? 286 00:12:47,639 --> 00:12:49,430 Kunnen we slight-- wagen OK, we gaan niet 287 00:12:49,430 --> 00:12:51,263 om veel verder te krijgen dan het orkest hier. 288 00:12:51,263 --> 00:12:53,432 Publiek: Het is een protocol gebruikt om databases te praten. 289 00:12:53,432 --> 00:12:55,640 DAVID J. MALAN: Een protocol gebruikt om databases te praten. 290 00:12:55,640 --> 00:12:56,181 Laat me tweaken. 291 00:12:56,181 --> 00:12:59,280 Het is een natuurlijke taal gebruikt om databases-- selecteert om te praten 292 00:12:59,280 --> 00:13:01,280 en inserts en verwijdert en updates en eigenlijk 293 00:13:01,280 --> 00:13:03,840 nog meer functies die we hebben nog niet eens gedoken 294 00:13:03,840 --> 00:13:07,920 in, maar wilt u misschien explore-- hebben te verkennen voor, laten we zeggen, een afstudeerproject. 295 00:13:07,920 --> 00:13:09,560 Dus er zijn deze verschillende stukken. 296 00:13:09,560 --> 00:13:13,100 >> En hopelijk Pset7, ook al de specificatie is vrij lang, 297 00:13:13,100 --> 00:13:15,990 het is opzettelijk lang om je loopt door middel van hoe deze dingen kunnen allemaal 298 00:13:15,990 --> 00:13:17,210 samen worden getypt. 299 00:13:17,210 --> 00:13:20,300 Nu, op maandag, we introduceerde onze laatste taal 300 00:13:20,300 --> 00:13:23,430 dat we formeel zullen introduceren in de course-- dat is, JavaScript. 301 00:13:23,430 --> 00:13:25,720 Dit, zoals PHP, is een geïnterpreteerde taal. 302 00:13:25,720 --> 00:13:28,110 >> Maar een belangrijk onderscheid Ik op maandag voorgesteld 303 00:13:28,110 --> 00:13:32,730 is dat waar PHP wordt uitgevoerd of worden geïnterpreteerd aan de server, die 304 00:13:32,730 --> 00:13:35,990 in dit geval is het CS50 apparaat, of misschien een commerciële web zijn 305 00:13:35,990 --> 00:13:39,370 server op het internet, JavaScript algemeen 306 00:13:39,370 --> 00:13:43,650 is een taal die client side loopt geen server side-- dus in de browser. 307 00:13:43,650 --> 00:13:46,970 Dat wil zeggen, net als toen ik opende up Facebook broncode en vond al 308 00:13:46,970 --> 00:13:51,510 van die .js bestanden, de implicatie was dat wanneer je Facebook of bezoek de meeste 309 00:13:51,510 --> 00:13:54,810 websites deze dagen, krijg je niet alleen HTML, niet alleen CSS, 310 00:13:54,810 --> 00:13:59,370 maar een hele hoop van JavaScript code vaak in de vorm van .js bestanden. 311 00:13:59,370 --> 00:14:03,970 En dan is het de browser-- uw eigen Mac of PC-- dat die code uitvoert. 312 00:14:03,970 --> 00:14:05,990 >> Maar uw browser voert deze uit. 313 00:14:05,990 --> 00:14:08,070 U kunt hierbij denken aan een soort van een zandbak. 314 00:14:08,070 --> 00:14:12,420 Dus dat JavaScript-code niet zou moeten zijn in staat om bestanden te verwijderen op uw computer. 315 00:14:12,420 --> 00:14:14,730 Het moet niet kunnen stuur e-mails op uw rekening. 316 00:14:14,730 --> 00:14:17,760 Uw browser soort inperkt wat je ermee kunt doen. 317 00:14:17,760 --> 00:14:20,630 >> Dus in die zin, het is een beetje minder krachtig, misschien, dan C. 318 00:14:20,630 --> 00:14:24,030 Maar JavaScript kan, als terzijde worden gebruikt op de server, 319 00:14:24,030 --> 00:14:27,740 maar we zullen niet geneigd zijn om te praten over het in die context. 320 00:14:27,740 --> 00:14:29,740 Dus nu laten we binden deze samen. 321 00:14:29,740 --> 00:14:34,000 Een week plus geleden presenteerden wij een aantal HTML op de left-- super saai webpagina. 322 00:14:34,000 --> 00:14:35,000 >> Gewoon zegt hallo wereld. 323 00:14:35,000 --> 00:14:38,110 En dan over de voorgestelde I recht kunnen we soort ideeën te stelen 324 00:14:38,110 --> 00:14:41,470 uit onze bespreking van datastructuren in C 325 00:14:41,470 --> 00:14:45,270 en na te denken over hoe dit hiërarchische opmaaktaal op de linker 326 00:14:45,270 --> 00:14:49,720 konden worden getrokken of in het geheugen uitgevoerd als een feitelijke boomstructuur met knooppunten 327 00:14:49,720 --> 00:14:51,400 en pointers en dat soort details. 328 00:14:51,400 --> 00:14:53,820 Aan de rechterkant, noemen we dat een DOM-- Document 329 00:14:53,820 --> 00:14:56,800 Object Model-- die net een mooie manier om te zeggen boom. 330 00:14:56,800 --> 00:14:59,520 >> Nu, waarom is dit nuttig om denk aan het op deze manier? 331 00:14:59,520 --> 00:15:01,680 Want nu met JavaScript, want we hebben 332 00:15:01,680 --> 00:15:05,810 code die krijgt om te spelen in deze milieu, de werkelijke HTML die 333 00:15:05,810 --> 00:15:08,360 naar de browser gestuurd al en heeft al 334 00:15:08,360 --> 00:15:12,690 door de in het geheugen geladen browser in een boom in uw computer 335 00:15:12,690 --> 00:15:18,270 RAM als deze, kunnen we gebruik maken van JavaScript om daadwerkelijk te doorkruisen of lopen of zoekopdracht 336 00:15:18,270 --> 00:15:21,800 of te wijzigen dat DOM boom maar we willen. 337 00:15:21,800 --> 00:15:24,040 Dus in feite, als je denkt over facebook.com, 338 00:15:24,040 --> 00:15:27,660 als je de chatfunctie gebruiken, als je gebruik Gmail en de functie Gchat, 339 00:15:27,660 --> 00:15:30,540 iets waar je berichten opnieuw en opnieuw 340 00:15:30,540 --> 00:15:35,880 weer, die berichten waarschijnlijk, als, LI tag, Lijstitem labels, misschien. 341 00:15:35,880 --> 00:15:37,940 >> Of misschien zijn ze gewoon divs die blijven verschijnen 342 00:15:37,940 --> 00:15:39,770 elke keer krijg je een instant message. 343 00:15:39,770 --> 00:15:42,960 En dus dat betekent gewoon wat Facebook of Google aan het doen is 344 00:15:42,960 --> 00:15:45,200 wordt elke keer krijg je een bericht van de server, 345 00:15:45,200 --> 00:15:48,740 ze zijn waarschijnlijk met behulp van JavaScript om gewoon toe te voegen ander knooppunt 346 00:15:48,740 --> 00:15:52,700 deze tree-- ander knooppunt deze boom die vervolgens visueel ziet er gewoon 347 00:15:52,700 --> 00:15:54,570 als een nieuwe regel tekst op je scherm. 348 00:15:54,570 --> 00:15:57,100 Maar ze zijn het invoegen in de gegevensstructuur. 349 00:15:57,100 --> 00:15:59,742 >> Dus in klassen zoals CS124 en anderen, zal je 350 00:15:59,742 --> 00:16:02,200 eigenlijk meer schrijven code tegen datastructuren als deze. 351 00:16:02,200 --> 00:16:04,310 Maar voor nu in JavaScript, zullen we gewoon aannemen 352 00:16:04,310 --> 00:16:07,920 we krijgen al deze functionaliteit gratis van de taal zelf. 353 00:16:07,920 --> 00:16:09,210 Dus laten we eens kijken naar een voorbeeld. 354 00:16:09,210 --> 00:16:13,120 >> Laat me het openen van een bestand form.html genoemd. 355 00:16:13,120 --> 00:16:14,601 Het is super eenvoudig. 356 00:16:14,601 --> 00:16:15,600 Het ziet er gewoon zo uit. 357 00:16:15,600 --> 00:16:17,860 >> Geen CSS, geen aandacht aan esthetiek. 358 00:16:17,860 --> 00:16:19,810 Het is puur functioneel en blijkbaar ben ik 359 00:16:19,810 --> 00:16:24,000 vragen om een ​​e-mail, een wachtwoord, weer vergeten, en dan een cheque 360 00:16:24,000 --> 00:16:26,150 in te stemmen met een aantal voorwaarden. 361 00:16:26,150 --> 00:16:28,740 Wat de broncode voor deze ziet er is waarschijnlijk iets 362 00:16:28,740 --> 00:16:31,030 je kunt raden met een beetje denken nu. 363 00:16:31,030 --> 00:16:32,840 Ik heb hier een form tag. 364 00:16:32,840 --> 00:16:36,190 >> Een actie is blijkbaar gaat naar een bestand register.php genoemd. 365 00:16:36,190 --> 00:16:37,870 De methode die ik ga gebruiken is te krijgen. 366 00:16:37,870 --> 00:16:40,880 En dan heb ik een tekst heb gebied waarvan de naam is e-mail. 367 00:16:40,880 --> 00:16:43,340 >> Ik heb een wachtwoord veld kreeg wiens naam is vergeten. 368 00:16:43,340 --> 00:16:45,420 Ik heb een ander gekregen wachtwoord veld wiens naam 369 00:16:45,420 --> 00:16:47,342 is enigszins willekeurig bevestiging. 370 00:16:47,342 --> 00:16:49,690 Het is gewoon een andere HTTP-parameter. 371 00:16:49,690 --> 00:16:54,430 >> En dan hebben we we deze gebruikt, behalve sinds de Frosh IM demo in class-- 372 00:16:54,430 --> 00:16:56,692 een selectievakje dat is gewoon soort gelijk check. 373 00:16:56,692 --> 00:16:57,900 En ik zal die overeenkomst noemen. 374 00:16:57,900 --> 00:17:00,700 Dus ik heb soort van willekeurig, maar gunstig noemde deze gebieden. 375 00:17:00,700 --> 00:17:03,450 Zodat nu wanneer deze vorm krijgt ingediend, laten we eens zien wat er gebeurt. 376 00:17:03,450 --> 00:17:07,290 Als ik dat doe malan@harvard.edu, Ik zal een wachtwoord van karmozijnrode doen. 377 00:17:07,290 --> 00:17:09,530 Ik zal een wachtwoord van niets doen. 378 00:17:09,530 --> 00:17:10,910 Laten we niet meewerken. 379 00:17:10,910 --> 00:17:12,280 >> En ik zal niet het vakje. 380 00:17:12,280 --> 00:17:13,940 Laat me klik op Registreren. 381 00:17:13,940 --> 00:17:15,420 En het zegt, hm, je bent geregistreerd. 382 00:17:15,420 --> 00:17:16,069 Niet echt. 383 00:17:16,069 --> 00:17:17,450 >> Maar de URL veranderd. 384 00:17:17,450 --> 00:17:22,280 Dus dit formulier werd duidelijk toegestaan naar register.php te onderwerpen. 385 00:17:22,280 --> 00:17:25,160 Maar vermoedelijk, zou ik zijn vangen sommige van deze fouten. 386 00:17:25,160 --> 00:17:27,569 Nu, in Pset7 en sommige van onze lezing voorbeelden, 387 00:17:27,569 --> 00:17:30,130 we zouden in het algemeen uit te printen een grote rode foutmelding hier 388 00:17:30,130 --> 00:17:33,760 zeggen, ontbrekende naam, of ontbrekende wachtwoord. 389 00:17:33,760 --> 00:17:37,680 We hebben dat eerder gedaan en we hebben done server side foutdetectie. 390 00:17:37,680 --> 00:17:41,580 >> Maar veel websites deze dagen client-side foutdetectie doen 391 00:17:41,580 --> 00:17:42,810 waar de URL niet wordt gewijzigd. 392 00:17:42,810 --> 00:17:44,101 De hele pagina niet vernieuwd. 393 00:17:44,101 --> 00:17:46,940 U krijgt direct feedback van de browser. 394 00:17:46,940 --> 00:17:48,070 Misschien iets gaat rood. 395 00:17:48,070 --> 00:17:49,190 >> Misschien krijg je een pop-up. 396 00:17:49,190 --> 00:17:53,240 Maar je hoeft geen tijd te verspillen verzenden naar de server data dat is incompleet. 397 00:17:53,240 --> 00:17:56,050 Dus laten we eens kijken hoe we zouden kunnen bereiken die functie ook. 398 00:17:56,050 --> 00:17:59,660 >> Laat me gaan naar form1.html, die ziet er hetzelfde uit. 399 00:17:59,660 --> 00:18:03,530 Maar als deze keer doe ik malan@harvard.edu en ik typ karmozijnrode 400 00:18:03,530 --> 00:18:07,350 en ik wil niet verder mee te werken maar klik Register, merk nu. 401 00:18:07,350 --> 00:18:08,940 Het is niet de meest sexy oplossing. 402 00:18:08,940 --> 00:18:10,900 Ik heb in ieder geval gevangen deze fout. 403 00:18:10,900 --> 00:18:12,900 En ik heb de waarschuwing gebruikt functie in JavaScript-- 404 00:18:12,900 --> 00:18:14,090 die we alleen gebruikt in de klas. 405 00:18:14,090 --> 00:18:16,430 In het algemeen moet je dit niet gebruiken want het kan heel snel uit 406 00:18:16,430 --> 00:18:17,160 controle. 407 00:18:17,160 --> 00:18:19,180 Maar wachtwoorden niet overeenkomen is de fout. 408 00:18:19,180 --> 00:18:21,120 >> Laat me ga je gang en klik op OK. 409 00:18:21,120 --> 00:18:25,040 Maar wat de sleutel mee te nemen hier dat de URL niet veranderen. 410 00:18:25,040 --> 00:18:27,960 Dus ik heb niet de moeite genomen te verdoen de tijd van de server met het verzoek 411 00:18:27,960 --> 00:18:30,750 een vraag die ik zou kunnen hebben bedacht het antwoord op mezelf. 412 00:18:30,750 --> 00:18:33,210 >> En de gebruiker, hoewel gesproken over deze 413 00:18:33,210 --> 00:18:35,264 langer dan de gebruiker gaan denken over dit, 414 00:18:35,264 --> 00:18:36,680 gaat om directe feedback te hebben. 415 00:18:36,680 --> 00:18:39,044 Er is geen latency met de netwerkconnectiviteit. 416 00:18:39,044 --> 00:18:40,460 Dus laten we eens kijken naar deze broncode. 417 00:18:40,460 --> 00:18:45,600 >> Form1.html looks structureel gelijk hier boven. 418 00:18:45,600 --> 00:18:46,810 De vorm is in feite hetzelfde. 419 00:18:46,810 --> 00:18:48,330 Maar laten we eens kijken wat ik deed hier beneden. 420 00:18:48,330 --> 00:18:49,913 En er is op verschillende manieren om dit te doen. 421 00:18:49,913 --> 00:18:53,690 En ik heb gedaan de meest straight volger, maar niet de meest elegante manier nog. 422 00:18:53,690 --> 00:18:54,869 Ik heb een script tag. 423 00:18:54,869 --> 00:18:57,035 Ik roep dan document.getElementById ('registratie'). 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 En ik bewaar die waarde in vorm, een variabele. 426 00:19:04,420 --> 00:19:05,520 >> Dus wat heb ik gedaan? 427 00:19:05,520 --> 00:19:08,960 U kunt denken aan document.getElementById als zijnde 428 00:19:08,960 --> 00:19:11,200 een speciale functie die JavaScript geeft u 429 00:19:11,200 --> 00:19:14,400 dat letterlijk handen u een pointer naar een van de knooppunten 430 00:19:14,400 --> 00:19:16,520 of rechthoeken in deze boom. 431 00:19:16,520 --> 00:19:21,470 Dus nu dat is wat ons formulier variabele in JavaScript is eigenlijk wijzend op. 432 00:19:21,470 --> 00:19:25,120 >> Dus nu de syntax is anders C. Maar we zijn een paar dingen hier doen. 433 00:19:25,120 --> 00:19:30,360 One, deze is een beetje vreemd zoek, zeker ten opzichte van C. 434 00:19:30,360 --> 00:19:32,180 Maar kijk eens naar lijn 35. 435 00:19:32,180 --> 00:19:35,130 Dus aan de linkerkant form.onsubmit. 436 00:19:35,130 --> 00:19:38,060 Bedenk dat onsubmit is als een veld in een struct. 437 00:19:38,060 --> 00:19:41,480 Als je denkt aan de vorm variabele is gewoon een C struct, 438 00:19:41,480 --> 00:19:42,600 het zou kunnen hebben een aantal velden. 439 00:19:42,600 --> 00:19:46,410 >> Terug in de dag, hadden we studenten namen, Id's, huizen, dat soort velden. 440 00:19:46,410 --> 00:19:48,520 Denk maar aan onsubmit als een ander veld. 441 00:19:48,520 --> 00:19:53,380 Maar het is een speciaal veld, omdat de browser is voorgeprogrammeerd om te verwachten 442 00:19:53,380 --> 00:19:57,530 .onsubmit tot een waarde niet zoals een getal of een tekenreeks, 443 00:19:57,530 --> 00:20:01,180 maar eigenlijk een functie zijn of het adres van een functie 444 00:20:01,180 --> 00:20:02,570 in het geheugen van de computer. 445 00:20:02,570 --> 00:20:04,740 >> En inderdaad, dat is wat dit sleutelwoord hier doet. 446 00:20:04,740 --> 00:20:06,710 Dit zegt, geef mij een nieuwe functie. 447 00:20:06,710 --> 00:20:09,390 Maar wat is zijn naam gaat worden, blijkbaar? 448 00:20:09,390 --> 00:20:10,800 >> Terugdenkend aan maandag. 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 Wat is de naam van deze functie op basis van deze syntax? 451 00:20:17,170 --> 00:20:19,784 Nee, ik bedoel, er is duidelijk geen naam associated-- zeker 452 00:20:19,784 --> 00:20:21,200 niet in wat ik hier heb gemarkeerd. 453 00:20:21,200 --> 00:20:22,560 >> Maar dat is eigenlijk OK. 454 00:20:22,560 --> 00:20:25,840 Dit is een anonieme functie, of een lambda-functie zoals sommigen het noemen. 455 00:20:25,840 --> 00:20:27,589 En dat betekent het is nog steeds een functie. 456 00:20:27,589 --> 00:20:29,400 Het is gewoon, je kunt het niet noemen bij naam. 457 00:20:29,400 --> 00:20:30,057 Maar dat is OK. 458 00:20:30,057 --> 00:20:33,140 Omdat meer heeft de browser is voorgeprogrammeerd door bedrijven als Google 459 00:20:33,140 --> 00:20:38,540 of Microsoft of Mozilla of anderen te weet gewoon dat als de .onsubmit veld 460 00:20:38,540 --> 00:20:43,400 binnenkant van een vormelement heeft waarde, behandel het als een function-- 461 00:20:43,400 --> 00:20:44,750 een functie pointer, als je wil. 462 00:20:44,750 --> 00:20:46,910 En noem het wanneer het formulier wordt ingediend. 463 00:20:46,910 --> 00:20:50,350 >> Wat code worden uitgevoerd wanneer het formulier wordt ingediend? 464 00:20:50,350 --> 00:20:52,526 Blijkbaar, alles binnenkant van de accolade. 465 00:20:52,526 --> 00:20:53,650 En dit is slechts stilistische. 466 00:20:53,650 --> 00:20:55,626 >> Je zou dit kunnen doen, zoals hebben we de neiging om te doen in CS50. 467 00:20:55,626 --> 00:20:58,250 Maar in JavaScript, de meeste mensen de neiging om het op dezelfde lijn te houden 468 00:20:58,250 --> 00:21:01,960 alleen omdat het duidelijker is geassocieerd met dat zoekwoord functie. 469 00:21:01,960 --> 00:21:03,240 Dus nu wat doe ik? 470 00:21:03,240 --> 00:21:08,616 >> Als form.email.value gelijk gelijken de lege string of niets, hier is 471 00:21:08,616 --> 00:21:11,490 Een waarschuwing waar ik ga zeggen, moet u uw e-mailadres op te geven, 472 00:21:11,490 --> 00:21:12,690 en dan return false. 473 00:21:12,690 --> 00:21:15,720 En het is dat terugkeer vals dat voorkomt dat het formulier wordt ingediend. 474 00:21:15,720 --> 00:21:19,480 Ondertussen, als het wachtwoord waarde leeg, ik ga schreeuwen tegen de gebruiker 475 00:21:19,480 --> 00:21:21,150 en zeggen, je moet een wachtwoord te voorzien. 476 00:21:21,150 --> 00:21:23,700 >> Ondertussen dingen worden steeds een beetje liefhebber hier. 477 00:21:23,700 --> 00:21:29,160 Als form.password.value niet gelijk form.confirmation.value, 478 00:21:29,160 --> 00:21:31,680 het andere veld, schreeuwen tegen de gebruiker dat de wachtwoorden 479 00:21:31,680 --> 00:21:33,860 niet overeenkomen zij deed geen moment geleden. 480 00:21:33,860 --> 00:21:35,780 En dan is dit één is een beetje sexier omdat ik 481 00:21:35,780 --> 00:21:40,470 weet dat ik wist dat conceptueel gecontroleerd is de naam van een selectievakje's. 482 00:21:40,470 --> 00:21:45,680 >> Dus ik kan gewoon gebruik maken van een uitroepteken punt om te zeggen als de controle niet 483 00:21:45,680 --> 00:21:48,040 checked-- het is de Booleaanse waarde, waar of false-- 484 00:21:48,040 --> 00:21:49,700 Ik zal schreeuwen tegen de gebruiker om die reden. 485 00:21:49,700 --> 00:21:52,300 Anders, als we door al deze voorwaarden, 486 00:21:52,300 --> 00:21:53,270 laten we gewoon return true. 487 00:21:53,270 --> 00:21:54,700 Laat het formulier worden ingediend. 488 00:21:54,700 --> 00:21:56,560 En dit zal dan gebeuren. 489 00:21:56,560 --> 00:21:57,740 >> Laten we eens in karmozijn. 490 00:21:57,740 --> 00:22:00,230 Laten we het vakje, klik op Registreren. 491 00:22:00,230 --> 00:22:01,979 En nu ga ik door naar de bestemming. 492 00:22:01,979 --> 00:22:03,270 Nu, er is geen database-er. 493 00:22:03,270 --> 00:22:05,370 Er is niets interessant in register.php. 494 00:22:05,370 --> 00:22:07,980 Ik gewoon iets nodig om daadwerkelijk te praten. 495 00:22:07,980 --> 00:22:09,140 Dus laat me pauze, hier. 496 00:22:09,140 --> 00:22:16,270 Heeft u vragen over wat we zojuist hebben gedaan of wat sommige van deze nieuwe syntaxis is? 497 00:22:16,270 --> 00:22:17,640 OK, ja? 498 00:22:17,640 --> 00:22:20,025 >> Publiek: Dus elke checkbox is automatisch een Booleaanse. 499 00:22:20,025 --> 00:22:21,650 Je hoeft niet om het te verklaren als dat. 500 00:22:21,650 --> 00:22:22,649 >> DAVID J. MALAN: Correct. 501 00:22:22,649 --> 00:22:29,340 Elke checkbox die naar u verzonden is vanuit een HTML-formulier aan uw JavaScript-code 502 00:22:29,340 --> 00:22:31,760 worden behandeld, ja, als Boolean value-- waar of onwaar. 503 00:22:31,760 --> 00:22:32,635 Het is een goede vraag. 504 00:22:32,635 --> 00:22:36,080 Overwegende dat de andere waarden, van Natuurlijk hebben tekst, AKA strings geweest. 505 00:22:36,080 --> 00:22:38,500 >> Oké, dus laat me terugspoelen een beetje verder. 506 00:22:38,500 --> 00:22:39,900 Wat was het hele punt van deze? 507 00:22:39,900 --> 00:22:41,400 Even voor de duidelijkheid. 508 00:22:41,400 --> 00:22:44,940 Zoals we al weten, zelfs vanuit Pset7 en zelfs uit lezing van vorige week 509 00:22:44,940 --> 00:22:51,120 voorbeelden, die we uiteraard kunt controleren $ _GET $ _POST Te zien of de gebruiker geven ons 510 00:22:51,120 --> 00:22:52,200 een lege waarde. 511 00:22:52,200 --> 00:22:54,400 Denk aan de lege functie in PHP. 512 00:22:54,400 --> 00:22:58,040 >> Dus gewoon om duidelijk te zijn, wat is er een reden kunnen we ook 513 00:22:58,040 --> 00:23:00,535 willen deze foutcontrole doen binnenkant van de browser? 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 Wat is de motivatie hier? 516 00:23:06,080 --> 00:23:06,580 Yeah. 517 00:23:06,580 --> 00:23:09,735 >> PUBLIEK: Sneller, en jij niet Stuur nutteloze data naar de server. 518 00:23:09,735 --> 00:23:10,610 DAVID J. MALAN: Goed. 519 00:23:10,610 --> 00:23:11,170 Het is sneller. 520 00:23:11,170 --> 00:23:12,920 Je hoeft niet te sturen nutteloos gegevens naar de server. 521 00:23:12,920 --> 00:23:14,670 >> Dus een meer krijg je terug onmiddellijke reactie. 522 00:23:14,670 --> 00:23:16,560 En in het algemeen, de gebruiker ervaring beter. 523 00:23:16,560 --> 00:23:17,900 Denk na over het alternatief. 524 00:23:17,900 --> 00:23:21,160 >> Als om Gmail-- en was Voor vele jaren geleden. 525 00:23:21,160 --> 00:23:24,160 Stel dat je een nieuwe e-mail uw Gmail rekening, maar de enige doorgang 526 00:23:24,160 --> 00:23:26,510 zien dat is, als, herlaad de hele pagina. 527 00:23:26,510 --> 00:23:29,030 Of stel dat u op een link naar een e-mail te lezen. 528 00:23:29,030 --> 00:23:31,600 >> Alles moet dus herladen dat u de e-mail kan zien. 529 00:23:31,600 --> 00:23:33,380 Of Facebook-- u een chatbericht te krijgen. 530 00:23:33,380 --> 00:23:36,000 Je ziet het niet, totdat u herladen de pagina of klik op een aantal link. 531 00:23:36,000 --> 00:23:38,380 >> Als, dit zou verschrikkelijk zijn een vervelende gebruikerservaring. 532 00:23:38,380 --> 00:23:41,300 En dit is hoe het was, duidelijk, toen ik liep voor UC 533 00:23:41,300 --> 00:23:44,760 en het web was veel minder dynamisch JavaScript en was niet zo populair 534 00:23:44,760 --> 00:23:45,601 zoals het nu is. 535 00:23:45,601 --> 00:23:47,850 En de dingen zijn veel krijgen dynamischer en nog veel meer 536 00:23:47,850 --> 00:23:49,900 client-side in die zin. 537 00:23:49,900 --> 00:23:54,370 >> Maar er is een catch hier, en Dit is een soort van een vervelende gotcha. 538 00:23:54,370 --> 00:23:58,720 Gewoon omdat je client side toevoegen detectie als dit betekent niet 539 00:23:58,720 --> 00:24:01,430 je kan of moet laten varen server-side detectie. 540 00:24:01,430 --> 00:24:04,080 U wilt wezen om uw zetten foutcontrole in beide plaatsen. 541 00:24:04,080 --> 00:24:05,830 Want wat was één van de les geleerd 542 00:24:05,830 --> 00:24:10,270 uit het artikel dat ik las enkele fragmenten uit met deze domme CMS system-- 543 00:24:10,270 --> 00:24:14,410 Content Management System-- dat was de uitvoering van haar authenticatie systeem, 544 00:24:14,410 --> 00:24:16,790 zijn ingelogd via welk mechanisme? 545 00:24:16,790 --> 00:24:19,515 546 00:24:19,515 --> 00:24:20,469 JavaScript. 547 00:24:20,469 --> 00:24:21,499 >> Publiek: JavaScript. 548 00:24:21,499 --> 00:24:23,290 DAVID J. MALAN: JavaScript, precies, toch? 549 00:24:23,290 --> 00:24:24,610 Het werd met behulp van JavaScript. 550 00:24:24,610 --> 00:24:27,120 En letterlijk, jullie hebben speelde een beetje waarschijnlijk 551 00:24:27,120 --> 00:24:28,700 met Chrome Inspector. 552 00:24:28,700 --> 00:24:30,890 En als ik het kan vinden, inspecteer element. 553 00:24:30,890 --> 00:24:33,670 >> Laat me gaan over te doen alle opties van Chrome. 554 00:24:33,670 --> 00:24:37,080 En dit is hoe gemakkelijk het is om JavaScript uit te schakelen in een browser. 555 00:24:37,080 --> 00:24:38,950 Controleren, niet meer JavaScript. 556 00:24:38,950 --> 00:24:41,070 >> Dus in alle eerlijkheid, heel veel van het web deze dagen 557 00:24:41,070 --> 00:24:43,430 is gewoon te breken omdat Gmail en andere sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook-- veronderstellen dat JavaScript is ingeschakeld. 559 00:24:46,140 --> 00:24:50,180 Maar als je iets stoms doet zoals alleen valideren van gebruikers invoeren 560 00:24:50,180 --> 00:24:52,520 te controleren en daarna fouten op de client, 561 00:24:52,520 --> 00:24:54,940 een tegenstander kon dit gemakkelijk doen. 562 00:24:54,940 --> 00:24:57,180 En dan nog slimmer tegenstander als jullie 563 00:24:57,180 --> 00:25:01,120 nu kon Telnet of Curl gebruiken of gewoon command line commando's 564 00:25:01,120 --> 00:25:05,300 en eigenlijk berichten naar de server die op dezelfde wijze zijn niet foutief zijn gecontroleerd. 565 00:25:05,300 --> 00:25:08,380 >> Dus dit is meer een gebruikersinterface beslissing 566 00:25:08,380 --> 00:25:13,060 dan is een feitelijke technisch improvement-- uitvoering 567 00:25:13,060 --> 00:25:14,410 iets client side als deze. 568 00:25:14,410 --> 00:25:16,800 Dus nu een snelle blik, maar dan Ik zal uitstellen tot de online wandeling 569 00:25:16,800 --> 00:25:17,674 door voor deze. 570 00:25:17,674 --> 00:25:21,480 In de vorm van twee, we gingen eigenlijk door en het opruimen van de code een beetje. 571 00:25:21,480 --> 00:25:23,650 Maar laat mij uit te stellen naar een van de video's die we zullen waarschijnlijk 572 00:25:23,650 --> 00:25:27,970 embed in Pset8 die net toont u een gelijkaardige syntax met behulp van een bibliotheek genaamd 573 00:25:27,970 --> 00:25:32,320 jQuery, een super, super populaire bibliotheek in JavaScript 574 00:25:32,320 --> 00:25:34,510 dat eerlijk gezegd de meeste mensen gewoon gebruik maken van deze dagen 575 00:25:34,510 --> 00:25:37,070 en zelfs verwarring als wezen JavaScript zelf. 576 00:25:37,070 --> 00:25:38,950 >> En neigt te betrekken sommige dollartekens 577 00:25:38,950 --> 00:25:41,350 en trefwoorden als document haakjes hier. 578 00:25:41,350 --> 00:25:44,480 Maar nogmaals, laat me uit te stellen tot sommige langzamere tutorials online 579 00:25:44,480 --> 00:25:46,750 in plaats van omhoog vastgebonden in slechts syntax. 580 00:25:46,750 --> 00:25:48,630 Laten we overgaan tot iets koeler 581 00:25:48,630 --> 00:25:50,520 in termen van de toepassingen ervan. 582 00:25:50,520 --> 00:25:57,730 >> Dus in het bijzonder, laat me gaan vooruit en open deze hier. 583 00:25:57,730 --> 00:25:58,340 Kom op. 584 00:25:58,340 --> 00:25:59,380 Daar gaan we. 585 00:25:59,380 --> 00:26:01,500 >> Laat me deze foto hier openen. 586 00:26:01,500 --> 00:26:03,450 Onnodig ingewikkeld kijken, maar het 587 00:26:03,450 --> 00:26:07,880 beschrijft een techniek genaamd AJAX-- Asynchronous JavaScript en XML, waar 588 00:26:07,880 --> 00:26:10,530 de X voor XML is eigenlijk niet meer echt gebruikt. 589 00:26:10,530 --> 00:26:13,430 Het heeft de neiging om iets te gebruiken anders genaamd JSON. 590 00:26:13,430 --> 00:26:16,560 >> Maar hier is hoe zoiets Google Maps of Google Earth werkt. 591 00:26:16,560 --> 00:26:18,060 Laten we proberen dit op de vlieg, eigenlijk. 592 00:26:18,060 --> 00:26:21,590 Laat me gaan en openen Chrome op mijn browser. 593 00:26:21,590 --> 00:26:26,236 >> En laat me gaan in, zeggen, maps.google.com. 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 En eigenlijk, als je oud bent genoeg om te herinneren wat, 596 00:26:31,930 --> 00:26:35,600 als, MapQuest was net terug in de dag, en misschien zijn ze nog steeds werken als volgt. 597 00:26:35,600 --> 00:26:38,870 Wanneer u gebruikt om te zoeken naar something-- 33 Oxford Street, Cambridge, Mass, 598 00:26:38,870 --> 00:26:40,650 laten we dit-- doe je zou eigenlijk, als je 599 00:26:40,650 --> 00:26:43,000 wilde pan en omlaag, naar links en naar rechts, 600 00:26:43,000 --> 00:26:44,920 je zou eruit zien als een grote pijl op de top, en het 601 00:26:44,920 --> 00:26:46,921 zou je een ander laten zien frame van de kaart hier. 602 00:26:46,921 --> 00:26:49,753 Of zou je klikt links en je zou hier gaan, of nog een klik 603 00:26:49,753 --> 00:26:51,000 en je zou hier gaan. 604 00:26:51,000 --> 00:26:53,000 Maar deze dagen, we natuurlijk gewoon 605 00:26:53,000 --> 00:26:55,970 voor lief nemen dat we kunnen gaan rond Cambridge vrij snel 606 00:26:55,970 --> 00:26:57,550 gewoon door te klikken en te slepen. 607 00:26:57,550 --> 00:26:59,130 Maar let op er is een aantal glitches. 608 00:26:59,130 --> 00:27:02,160 >> Als ik dit doe snel genoeg, wat lijkt te gebeuren 609 00:27:02,160 --> 00:27:05,960 als ik sleep een beetje te snel voor de computer om bij te blijven? 610 00:27:05,960 --> 00:27:07,160 Wat zie je? 611 00:27:07,160 --> 00:27:07,660 Yeah. 612 00:27:07,660 --> 00:27:09,232 >> Publiek: De pixels niet vernieuwen. 613 00:27:09,232 --> 00:27:10,940 DAVID J. MALAN: De pixels niet vernieuwen. 614 00:27:10,940 --> 00:27:12,870 Er is actually-- en je zou dit kunnen zien, eigenlijk, 615 00:27:12,870 --> 00:27:15,360 als je online en pauze kijken dit of eigenlijk vertraagt ​​dingen naar beneden 616 00:27:15,360 --> 00:27:18,600 voor once-- je zult zien dat er tegels, vierkanten, rechthoeken of dat 617 00:27:18,600 --> 00:27:22,040 ontbreken in de kaart tot een fractie van een seconde later, meer data, 618 00:27:22,040 --> 00:27:24,390 meer beelden eigenlijk op het scherm verschijnen. 619 00:27:24,390 --> 00:27:29,810 En inderdaad, als we dit doen door te kijken up Chrome's-- laten we zeggen, Chrome-- 620 00:27:29,810 --> 00:27:30,310 laten we eens kijken. 621 00:27:30,310 --> 00:27:31,090 Wij kunnen dat niet. 622 00:27:31,090 --> 00:27:31,860 >> Oh, whoops. 623 00:27:31,860 --> 00:27:34,761 Laten we openstellen maps.google.com. 624 00:27:34,761 --> 00:27:36,660 Laat me opnieuw te maken het raam groter. 625 00:27:36,660 --> 00:27:38,836 >> Ga terug naar 33 Oxford Street. 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 Wat was de website was ik op onlangs? 628 00:27:43,760 --> 00:27:46,440 Ik had dit, zoals, privé rant aan mezelf dat ik zou dan instant message 629 00:27:46,440 --> 00:27:48,470 elke vriend die online was die het wilde horen. 630 00:27:48,470 --> 00:27:49,345 Er is wat de website. 631 00:27:49,345 --> 00:27:52,680 Ik denk dat het Comcast-- zo een zeer grote Amerikaanse ISP. 632 00:27:52,680 --> 00:27:56,355 Kunt u, wanneer u zich aanmeldt voor nieuwe kabel modem dienst of kabel-tv-dienst, 633 00:27:56,355 --> 00:27:59,230 ze hebben een vorm zeer redelijk waar ze je vragen om uw adres. 634 00:27:59,230 --> 00:28:01,450 En hebben deze geweldige functie genaamd auto volledige, 635 00:28:01,450 --> 00:28:04,600 zoals Google, die begint in te vullen in het antwoord op uw vraag. 636 00:28:04,600 --> 00:28:08,090 >> Het probleem is, dat doen ze automatisch aanvullen op de eerste dingen die je typt. 637 00:28:08,090 --> 00:28:12,890 Dus als je begint te typen in 33, het zal je letterlijk zien elk huis 638 00:28:12,890 --> 00:28:15,790 in Amerika die begint met het nummer 33 639 00:28:15,790 --> 00:28:17,920 voordat u verder gaat naar verwachten dat je meer te typen. 640 00:28:17,920 --> 00:28:20,660 Dus als je typt 33 Oxford, dan blijkt dat je elke straat 641 00:28:20,660 --> 00:28:24,726 in Amerika, dat 33 Oxford in heeft zijn naam, ongeacht de stad 642 00:28:24,726 --> 00:28:25,350 dat u zich bevindt. 643 00:28:25,350 --> 00:28:26,320 >> En dan moet je doorgaan met typen. 644 00:28:26,320 --> 00:28:28,930 Tenslotte realiseert dat zij niet bieden service om uw huis in Cambridge 645 00:28:28,930 --> 00:28:29,920 of iets dergelijks. 646 00:28:29,920 --> 00:28:33,410 Maar het punt is, dit is de meest stompzinnige uitvoering van auto 647 00:28:33,410 --> 00:28:34,140 voltooien ooit. 648 00:28:34,140 --> 00:28:36,400 >> En ik ga gewoon af deze raaklijn weer. 649 00:28:36,400 --> 00:28:39,040 Maar er zijn goede manieren om JavaScript gebruiken en slechte manieren. 650 00:28:39,040 --> 00:28:40,750 En dat is niet per se de beste. 651 00:28:40,750 --> 00:28:46,360 >> Maar het punt hier, voordat deze tirade, was om hier neer te openen up tools 652 00:28:46,360 --> 00:28:49,480 en open developer tools, zoals we eerder hebben aangemoedigd, 653 00:28:49,480 --> 00:28:52,840 en om het netwerk te kijken tab als ik klik echt snel. 654 00:28:52,840 --> 00:28:55,400 En merken een hele hoop van krijgen verzoeken gebeurd. 655 00:28:55,400 --> 00:28:57,310 Dit alles gebeurd sinds ik sleepte. 656 00:28:57,310 --> 00:29:00,170 >> En het meest waarschijnlijk, inderdaad veel van deze rijen 657 00:29:00,170 --> 00:29:04,060 nu zijn afbeelding slash JPEG MIME-types of content types. 658 00:29:04,060 --> 00:29:07,750 Dat komt omdat wat chroom aan het doen is elke keer als ik klik en sleep, klik 659 00:29:07,750 --> 00:29:11,650 en slepen, is het realiseren van, oh, I moeten gaan vragen Google voor de tegel 660 00:29:11,650 --> 00:29:15,080 op de kaart dat is meer dan hier, snel downloaden via HTTP, 661 00:29:15,080 --> 00:29:19,550 en voeg vervolgens de zogenaamde DOM aan de webbrowsers in het geheugen boom 662 00:29:19,550 --> 00:29:24,430 vertegenwoordiging, zodat de gebruiker, me, ziet dat bijgewerkt tegel. 663 00:29:24,430 --> 00:29:26,795 En dit is vanwege een techniek genaamd AJAX. 664 00:29:26,795 --> 00:29:28,920 Terug in de dag, het is echt zo dat was als je 665 00:29:28,920 --> 00:29:33,050 wilde veranderen wat er op het scherm, je zou moeten klikken omhoog, omlaag, naar links, 666 00:29:33,050 --> 00:29:33,550 rechts. 667 00:29:33,550 --> 00:29:34,740 En dan een nieuwe pagina zou openen. 668 00:29:34,740 --> 00:29:36,531 Maar deze dagen, alles dynamischer. 669 00:29:36,531 --> 00:29:40,490 Het gebeurt in de manier waarop wij mensen zouden hoop dat het ook daadwerkelijk zou interactief. 670 00:29:40,490 --> 00:29:43,210 En bereikt dit door middel van een techniek genaamd 671 00:29:43,210 --> 00:29:46,170 AJAX, dat is misschien het best verklaard door een voorbeeld. 672 00:29:46,170 --> 00:29:49,730 Ten eerste wil ik doorgaan en het openen van een bestand 673 00:29:49,730 --> 00:29:53,540 riep quote.php in de huidige verdeelsleutel. 674 00:29:53,540 --> 00:29:56,200 >> En dan laat ik doe symbol-- whoops. 675 00:29:56,200 --> 00:30:02,399 Laat me symbool doen = GOOG voor slechts enkele op voorraad. 676 00:30:02,399 --> 00:30:04,440 Of eigenlijk, laten we de één van de Pset GRATIS. 677 00:30:04,440 --> 00:30:05,270 Enter. 678 00:30:05,270 --> 00:30:06,580 >> En let nu op wat ik terug ben. 679 00:30:06,580 --> 00:30:09,210 Dus dit is een echt korte PHP-bestand dat ik 680 00:30:09,210 --> 00:30:13,210 schreef dat gewoon leent code uit Pset7 de lookup functie 681 00:30:13,210 --> 00:30:17,830 en spuugt het gebruik van deze accolade en offertes en colon notatie blijkbaar 682 00:30:17,830 --> 00:30:22,747 prijs voor de de huidige voorraad is bedrijf dat u passeert in via get. 683 00:30:22,747 --> 00:30:24,580 Dus dit is anders van de meeste van wat we hebben 684 00:30:24,580 --> 00:30:26,496 gedaan in die aankondiging Ik ben letterlijk uitspugen 685 00:30:26,496 --> 00:30:27,870 wat eruit ziet als JavaScript-code. 686 00:30:27,870 --> 00:30:30,020 >> In feite is dit een JavaScript object. 687 00:30:30,020 --> 00:30:34,130 In feite, om meer duidelijk, JavaScript Object Notation-- JSON-- 688 00:30:34,130 --> 00:30:38,330 is gewoon een mooie manier om te zeggen dat je kunnen gegevens vertegenwoordigen in JavaScript veel 689 00:30:38,330 --> 00:30:41,660 als je kunt in PHP met behulp van sleutel waarde paren. 690 00:30:41,660 --> 00:30:44,270 Dus als ik wilde verklaren een variabele JavaScript 691 00:30:44,270 --> 00:30:47,872 tot vertegenwoordigt Zamyla voor instance-- een structuur voor Zamyla-- 692 00:30:47,872 --> 00:30:49,580 en we noemen het student, deze variabele. 693 00:30:49,580 --> 00:30:53,060 Haar ID is één, het huis ligt Winthrop, en de naam is Zamyla. 694 00:30:53,060 --> 00:30:55,490 >> Maar ik kan ook een array van objecten. 695 00:30:55,490 --> 00:30:58,710 Dus als ik eigenlijk wilde hebben een array in JavaScript bevattende 696 00:30:58,710 --> 00:31:01,740 meerdere dergelijke objecten, dit de tijd die het personeel vertegenwoordigen, 697 00:31:01,740 --> 00:31:04,910 Ik zou deze drie hebben delen code terug 698 00:31:04,910 --> 00:31:08,560 om een ​​back to back voor deze drie voormalige medewerkers. 699 00:31:08,560 --> 00:31:12,201 Dus de syntax, mooie vergelijkbaar met beide-- naar PHP. 700 00:31:12,201 --> 00:31:13,700 Maar dit is bijzonder JavaScript. 701 00:31:13,700 --> 00:31:15,940 Het is object notatie. 702 00:31:15,940 --> 00:31:17,240 Dus wat is dit nuttig voor? 703 00:31:17,240 --> 00:31:21,580 >> Als ik schrijf code die spuugt JSON-- JavaScript Object Notation-- spul dat 704 00:31:21,580 --> 00:31:24,670 ziet er zo uit of dingen die lijkt op de structuur Zamyla's, 705 00:31:24,670 --> 00:31:27,730 Ik kan dit eigenlijk gebruiken in programma's die ik schrijf. 706 00:31:27,730 --> 00:31:30,660 Laat me gaan naar ajax0.html. 707 00:31:30,660 --> 00:31:33,310 En dit too-- niet veel dacht gegeven aan esthetiek. 708 00:31:33,310 --> 00:31:34,660 Maar kijk wat er gebeurt. 709 00:31:34,660 --> 00:31:37,050 >> Laat me ga je gang en typ hier gratis. 710 00:31:37,050 --> 00:31:38,490 Klik op offerte aanvragen. 711 00:31:38,490 --> 00:31:41,060 En let op de URL is niet veranderd. 712 00:31:41,060 --> 00:31:47,250 Maar ik heb wel een pop-up met blijkbaar vandaag penny stock prijs van $ 0,15. 713 00:31:47,250 --> 00:31:49,062 Dus niet zo slecht. 714 00:31:49,062 --> 00:31:52,020 Maar het verschil is dat een of andere manier, deze gegevens kwam terug om me direct. 715 00:31:52,020 --> 00:31:54,250 Maar laten we een stap in de richting iets meer vertrouwd. 716 00:31:54,250 --> 00:31:58,900 In versie één van deze, laat me Typ weer vrij, klik op Get citaat, 717 00:31:58,900 --> 00:32:01,146 en now-- oh, dit was eigenlijk de jQuery versie. 718 00:32:01,146 --> 00:32:03,270 Dus laten mij-- ik niet fast-forward vrij ver genoeg. 719 00:32:03,270 --> 00:32:05,830 Laat me gaan naar versie twee, dat is waar ik wilde. 720 00:32:05,830 --> 00:32:07,260 Let op wat ik hier heb gedaan. 721 00:32:07,260 --> 00:32:10,370 Ik heb een web page-- een super eenvoudige versie van een webpagina 722 00:32:10,370 --> 00:32:14,260 je zou kunnen gebruiken vandaag met een tekstveld hier voor de gratis en dan blijkbaar gewoon 723 00:32:14,260 --> 00:32:14,880 tekst. 724 00:32:14,880 --> 00:32:16,860 >> Dit is geen vorm hier, blijkbaar. 725 00:32:16,860 --> 00:32:19,360 Maar als ik klik krijg citaat, merkt mijn webpagina 726 00:32:19,360 --> 00:32:22,760 gaat veranderen alsof ik net een nieuwe instant message 727 00:32:22,760 --> 00:32:25,360 of alsof ik net verhuisd van de kaart en nodig om meer gegevens te krijgen 728 00:32:25,360 --> 00:32:29,220 dynamisch toegevoegd aan de webpagina zonder de URL veranderen en de gebruiker 729 00:32:29,220 --> 00:32:30,980 ervaring krijgen onderbroken. 730 00:32:30,980 --> 00:32:35,750 Inderdaad, ik ben nog steeds aan het exact dezelfde plek-- ajax2.html. 731 00:32:35,750 --> 00:32:39,080 >> Dus laten we eens kijken alleen naar dit voorbeeld en zie hoe dit gebeurt. 732 00:32:39,080 --> 00:32:42,490 Laat me gaan in ajax2.html. 733 00:32:42,490 --> 00:32:44,770 En merk eerst de vorm. 734 00:32:44,770 --> 00:32:47,092 >> Hierna ga ik draaien off automatisch aanvullen. 735 00:32:47,092 --> 00:32:48,800 Soms wordt het vervelend als de browser 736 00:32:48,800 --> 00:32:50,508 probeert je te laten zien je hele geschiedenis. 737 00:32:50,508 --> 00:32:53,450 Dus je kunt het doen in HTML door gewoon zeggen automatisch aanvullen uit. 738 00:32:53,450 --> 00:32:57,290 >> Ik heb dit tekstveld een gegeven symbol-- eerder, een ID van het symbool. 739 00:32:57,290 --> 00:32:58,977 En nu, dit is een interessante eigenschap. 740 00:32:58,977 --> 00:33:01,310 We hebben nog niet gesproken over overspanning, maar je kunt er over nadenkt 741 00:33:01,310 --> 00:33:03,177 zoals een paragraaf tag of div tag. 742 00:33:03,177 --> 00:33:05,010 Het is wat een zogenaamde in-line element, dat 743 00:33:05,010 --> 00:33:07,415 betekent dat je een paragraaf niet boven en onder breken. 744 00:33:07,415 --> 00:33:11,530 Het gaat gewoon om te verblijven in-lijn zonder raken van het equivalent van in te voeren. 745 00:33:11,530 --> 00:33:17,980 Ik heb dus dit brok HTML gegeven te bepalen van een unieke identifier 746 00:33:17,980 --> 00:33:20,130 dat ik willekeurig geroepen prijs. 747 00:33:20,130 --> 00:33:21,560 En ik heb een knop Verzenden. 748 00:33:21,560 --> 00:33:25,420 >> Omdat nu hier-- en dit is eigenlijk super verbazingwekkend hoe weinig code 749 00:33:25,420 --> 00:33:27,660 je kunt schrijven te doen relatief nette things-- 750 00:33:27,660 --> 00:33:31,800 let op wat ik hier heb gedaan als ik scrollen naar het hoofd van deze pagina. 751 00:33:31,800 --> 00:33:34,970 Ik heb voor het eerst in opgenomen mijn hoofd een script tag 752 00:33:34,970 --> 00:33:37,410 die eigenlijk verwijst naar een JavaScript-bestand elders. 753 00:33:37,410 --> 00:33:39,702 Dit is van de organisatie dat schrijft jQuery, 754 00:33:39,702 --> 00:33:42,660 En dit is slechts het geven u de meest recente versie van hun jQuery bibliotheek. 755 00:33:42,660 --> 00:33:46,305 >> Dus dit is een soort scherpe onder meer in C of eisen in PHP. 756 00:33:46,305 --> 00:33:48,900 U gebruikt de script-tag een bron attribuut. 757 00:33:48,900 --> 00:33:52,030 Maar nu mijn eigen code is ga naar rechts in hier te zijn. 758 00:33:52,030 --> 00:33:54,170 >> Let op, ik heb een functie genaamd Quotes. 759 00:33:54,170 --> 00:33:56,180 En het ziet er een beetje cryptisch op het eerste gezicht. 760 00:33:56,180 --> 00:33:57,305 Maar laten we plagen dit apart. 761 00:33:57,305 --> 00:33:59,090 Geef me een URL variabele genaamd. 762 00:33:59,090 --> 00:34:01,390 Wijs het letterlijk deze string. 763 00:34:01,390 --> 00:34:04,530 Dus, enkele aanhalingstekens, dubbele aanhalingstekens in JavaScript geeft me gewoon een string. 764 00:34:04,530 --> 00:34:06,900 Wat doet de plus te doen? 765 00:34:06,900 --> 00:34:08,199 Aaneenschakeling. 766 00:34:08,199 --> 00:34:12,610 >> Dus dit is nu de jQuery syntaxis die duurt een beetje wennen. 767 00:34:12,610 --> 00:34:18,310 Maar dit betekent gewoon gaan halen me de DOM knooppunt wiens unieke identifier is symbool. 768 00:34:18,310 --> 00:34:21,929 De hashtag daar betekent unieke identificatie symbool. 769 00:34:21,929 --> 00:34:24,929 >> Het dollarteken in de Haakjes gewoon betekenen, wikkel deze 770 00:34:24,929 --> 00:34:28,510 in jQuery een soort geheime saus zo krijg je extra functionaliteit. 771 00:34:28,510 --> 00:34:31,880 En dan is .val blijkbaar een functie, of zoals we nu zeggen, 772 00:34:31,880 --> 00:34:35,219 een werkwijze binnenkant van dit knooppunt die net geeft u de waarde. 773 00:34:35,219 --> 00:34:38,896 Dus in het kort, lelijk en verwarrend want dit ziet er op het eerste gezicht, 774 00:34:38,896 --> 00:34:42,020 dit betekent gewoon met de gebruiker getypte in, zet het aan het einde van de string 775 00:34:42,020 --> 00:34:42,880 door het aaneenschakelen van het. 776 00:34:42,880 --> 00:34:43,739 Dat is alles. 777 00:34:43,739 --> 00:34:46,070 >> Dus nu, laatste drie regels. 778 00:34:46,070 --> 00:34:48,690 U kunt een heleboel knijpen functionaliteit van de drie lijnen. 779 00:34:48,690 --> 00:34:52,199 Dit dollarteken, als een terzijde, is gewoon een bijnaam 780 00:34:52,199 --> 00:34:55,800 een speciale globale variabele riep letterlijk jQuery. 781 00:34:55,800 --> 00:34:57,060 >> Dollar teken ziet er gewoon cool. 782 00:34:57,060 --> 00:35:00,080 Dus de jQuery gemeenschap gewoon een soort gebruikte het als hun speciaal symbool. 783 00:35:00,080 --> 00:35:02,470 Het betekent niet dat wat het betekent in PHP. 784 00:35:02,470 --> 00:35:06,356 In JavaScript, dollarteken is net als een letter van het alfabet 785 00:35:06,356 --> 00:35:07,480 of een nummer van een variabele. 786 00:35:07,480 --> 00:35:09,000 >> Je kunt gewoon het als de naam. 787 00:35:09,000 --> 00:35:09,770 Ziet er gewoon cool. 788 00:35:09,770 --> 00:35:11,890 Dus de gemeenschap het aangenomen als een bijnaam 789 00:35:11,890 --> 00:35:13,390 voor hun eigen bibliotheek genaamd jQuery. 790 00:35:13,390 --> 00:35:15,060 >> En het is super populair. 791 00:35:15,060 --> 00:35:17,620 Dus maak je JSON is precies dat. 792 00:35:17,620 --> 00:35:19,920 Het is een functie die de mensen van jQuery schreef 793 00:35:19,920 --> 00:35:23,340 dat krijgt JSON uit een server-- JavaScript Object Notation. 794 00:35:23,340 --> 00:35:25,680 Van wat URL gaat het om die informatie te krijgen? 795 00:35:25,680 --> 00:35:27,790 Schijnbaar vanuit deze URL hier. 796 00:35:27,790 --> 00:35:31,180 >> En wat moet de browser te doen als Zodra hij terug deze reactie? 797 00:35:31,180 --> 00:35:36,500 En dit is de magie van AJAX, om zo te speak-- Asynchronous JavaScript in XML. 798 00:35:36,500 --> 00:35:41,320 Het is moeilijk om te zien met een dergelijk simpel voorbeeld als we hier hadden. 799 00:35:41,320 --> 00:35:44,730 >> Maar deze asynchrone was de zin dat mijn code wanneer 800 00:35:44,730 --> 00:35:48,530 uitgevoerd een bericht naar de server te gaan halen me wat JSON. 801 00:35:48,530 --> 00:35:51,340 En het gebeurde supersnel dat kreeg ik een reactie. 802 00:35:51,340 --> 00:35:55,130 Maar wat interessant is, is dat deze regel code had mijn computer niet hangen. 803 00:35:55,130 --> 00:35:56,550 >> Ik zag geen een draaiende pictogram. 804 00:35:56,550 --> 00:35:59,200 Ik heb niet verliezen mogelijkheid om mijn muis beweegt. 805 00:35:59,200 --> 00:36:01,340 Mijn browser was eigenlijk prima. 806 00:36:01,340 --> 00:36:06,290 >> Omdat de weg JavaScript behandelt de antwoord van de server is als volgt. 807 00:36:06,290 --> 00:36:09,740 U registreert wat je zou noemen een callback functie, die 808 00:36:09,740 --> 00:36:12,830 betekent gewoon, hey, JavaScript. 809 00:36:12,830 --> 00:36:16,100 Zodra de server antwoordt met JSON, 810 00:36:16,100 --> 00:36:18,750 kunt u bellen met deze anonieme functie. 811 00:36:18,750 --> 00:36:23,910 >> En neem dan overgegaan in deze functie welke snaar de server uit te spugen 812 00:36:23,910 --> 00:36:26,080 als argument genoemd data. 813 00:36:26,080 --> 00:36:28,360 Dus in andere woorden, indien Ik ben het assembleren dynamisch 814 00:36:28,360 --> 00:36:33,370 een URL quote.php passeren in deze symbool zoals gratis of GOOG of wat, 815 00:36:33,370 --> 00:36:36,830 Ik ben dan vertellen JavaScript gaan halen die URL. 816 00:36:36,830 --> 00:36:39,080 Vergeet niet dat de browser gaat iets terug 817 00:36:39,080 --> 00:36:42,680 die eruit ziet als we zagen earlier-- dit. 818 00:36:42,680 --> 00:36:45,940 >> En wat het tweede argument hier om JSON zegt 819 00:36:45,940 --> 00:36:48,450 wordt noemen deze functie wanneer de server terug krijgt 820 00:36:48,450 --> 00:36:52,440 of het nu 10 milliseconden vanaf nu tot 10 seconden vanaf nu. 821 00:36:52,440 --> 00:36:55,840 En zodra je dat doet, voeg de prijs aan de pagina. 822 00:36:55,840 --> 00:36:58,030 Deze syntax hier gewoon betekent ga krijgen het knooppunt 823 00:36:58,030 --> 00:37:01,940 van de boom waarvan unieke identifier is prijs-- die spanwijdte we eerder zagen. 824 00:37:01,940 --> 00:37:04,320 >> Deze methode genaamd HTML gewoon zegt, gaan vervangen 825 00:37:04,320 --> 00:37:08,770 de HTML die is daar met data.price. 826 00:37:08,770 --> 00:37:10,200 Wat is data.price? 827 00:37:10,200 --> 00:37:12,850 Nou, de browser, herinneren, liet me dit terugkomen. 828 00:37:12,850 --> 00:37:14,540 Dus dit is data. 829 00:37:14,540 --> 00:37:18,100 >> En dus is het een beetje cryptisch de komma's hier te zien. 830 00:37:18,100 --> 00:37:19,350 Maar in feite, laat mij dit doen. 831 00:37:19,350 --> 00:37:22,890 Laat me dit gewoon plakken echt snel in gedit 832 00:37:22,890 --> 00:37:27,240 en dit te laten zien, zoals we laten zien Structuur Zamyla's eerder. 833 00:37:27,240 --> 00:37:31,610 >> Wat de server wordt het terugsturen is een klein voorwerp dat lijkt op dit. 834 00:37:31,610 --> 00:37:37,140 En zo data.price is alleen het geven van me 0,1515. 835 00:37:37,140 --> 00:37:39,310 Dus veel bewegende delen hier allemaal tegelijk. 836 00:37:39,310 --> 00:37:41,860 >> Maar de sleutel afhaalrestaurants is dat we dit vermogen 837 00:37:41,860 --> 00:37:44,600 om extra HTTP maken aanvragen met behulp van JavaScript 838 00:37:44,600 --> 00:37:46,090 zonder de pagina te herladen. 839 00:37:46,090 --> 00:37:49,580 En dan kunnen we eigenlijk verander de webpagina op de vlieg. 840 00:37:49,580 --> 00:37:51,850 En het blijkt dat JavaScript en andere talen 841 00:37:51,850 --> 00:37:54,510 kan nu worden gebruikt niet alleen om webpagina's te muteren, 842 00:37:54,510 --> 00:37:57,960 maar om daadwerkelijk te schrijven software in een werkelijke computer, 843 00:37:57,960 --> 00:38:00,240 niet alleen beperkt tot Chrome of iets dergelijks. 844 00:38:00,240 --> 00:38:03,530 >> In feite, if-- Colton, zou je willen ons hier mee terug 845 00:38:03,530 --> 00:38:06,100 met uw lab code, en Chang ook? 846 00:38:06,100 --> 00:38:09,140 Laten we verder gaan, hebben gesproken over anonieme functies en callbacks 847 00:38:09,140 --> 00:38:13,090 en echt het lot te verleiden hier met een live demo met bloeden 848 00:38:13,090 --> 00:38:16,480 edge technologie, een van deze Elite Motion apparaten. 849 00:38:16,480 --> 00:38:18,940 Nu, dit apparaat, recall, is een klein USB-apparaat 850 00:38:18,940 --> 00:38:25,620 evenals dat-- dat is beautiful-- die wordt aangesloten op uw USB-poorten. 851 00:38:25,620 --> 00:38:29,120 >> En dan geeft input in de vorm van menselijke gebaren 852 00:38:29,120 --> 00:38:32,560 door detectie met infraroodstralen, wezen, de bewegingen van je arm. 853 00:38:32,560 --> 00:38:35,150 Dus terwijl wat Maria geprobeerd op vóór was gespierd, 854 00:38:35,150 --> 00:38:39,000 eigenlijk het gevoel wat er veranderen arm, dit infrarood gebaseerd. 855 00:38:39,000 --> 00:38:44,390 Dus het is op zoek naar bewegingen binnen het soort sfeer van een voet of zo 856 00:38:44,390 --> 00:38:46,190 van de inrichting zelf. 857 00:38:46,190 --> 00:38:48,950 >> Dus waarom niet ik een gooi naar de eerste? 858 00:38:48,950 --> 00:38:53,100 En laten we verder gaan en gooien je op de overhead hier. 859 00:38:53,100 --> 00:38:56,250 Dus laten we Colton's laptop hier. 860 00:38:56,250 --> 00:38:58,360 We hebben Andrew op de TV. 861 00:38:58,360 --> 00:39:00,160 En wat zou je willen dat ik eerst doen? 862 00:39:00,160 --> 00:39:02,409 >> COLTON: Ga je gang en net leg je handen over deze man 863 00:39:02,409 --> 00:39:04,430 en je zult zien een aantal fantastische glitter. 864 00:39:04,430 --> 00:39:07,230 >> DAVID J. MALAN: Very nice. 865 00:39:07,230 --> 00:39:11,110 Dit gebeurt allemaal in real time. 866 00:39:11,110 --> 00:39:11,889 OK. 867 00:39:11,889 --> 00:39:12,680 Oké, en yep. 868 00:39:12,680 --> 00:39:14,119 Zo leuk. 869 00:39:14,119 --> 00:39:15,410 Oké, wat kunnen we anders doen? 870 00:39:15,410 --> 00:39:17,900 >> COLTON: Ga naar het volgende scherm en zien. 871 00:39:17,900 --> 00:39:19,136 >> DAVID J. MALAN: Oké. 872 00:39:19,136 --> 00:39:21,780 >> COLTON: Een leuke game waar u krijgt om robots te maken. 873 00:39:21,780 --> 00:39:24,738 >> DAVID J. MALAN: Oke, dus dit is nep handen waaruit blijkt wat ik moet doen. 874 00:39:24,738 --> 00:39:27,920 COLTON: Ja Dus ga je gang en pak een van de blokken 875 00:39:27,920 --> 00:39:30,637 en zet het op de top van het lichaam van die robot. 876 00:39:30,637 --> 00:39:32,137 DAVID J. MALAN: Oh, er is mijn hand. 877 00:39:32,137 --> 00:39:34,000 Oh. 878 00:39:34,000 --> 00:39:34,780 OK, schattig. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Wacht even, OK. 881 00:39:38,650 --> 00:39:41,320 Daar gaan we. 882 00:39:41,320 --> 00:39:43,590 >> COLTON: Ik maakte een op een ongeval. 883 00:39:43,590 --> 00:39:45,423 >> DAVID J. MALAN: OK, ik zal deze man te krijgen. 884 00:39:45,423 --> 00:39:45,923 Damn it! 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 Toen we het beoefenen van deze laatste nacht, weet je wat dit overgedragen in? 887 00:39:51,550 --> 00:39:54,285 >> Net als dit. 888 00:39:54,285 --> 00:39:55,490 OK. 889 00:39:55,490 --> 00:39:55,990 Volgende? 890 00:39:55,990 --> 00:39:56,860 >> COLTON: Tuurlijk. 891 00:39:56,860 --> 00:39:58,818 >> DAVID J. MALAN: Oké, en er is een derde. 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 Prima. 894 00:40:01,674 --> 00:40:03,215 COLTON: En in deze, krijg je to-- 895 00:40:03,215 --> 00:40:04,923 DAVID J. MALAN: Oh, De mooie deze. 896 00:40:04,923 --> 00:40:06,650 COLTON: --yeah, pick apart deze bloem. 897 00:40:06,650 --> 00:40:07,441 DAVID J. MALAN: OK. 898 00:40:07,441 --> 00:40:11,170 899 00:40:11,170 --> 00:40:11,670 Nee? 900 00:40:11,670 --> 00:40:14,515 Gemist. 901 00:40:14,515 --> 00:40:15,570 >> COLTON: Oh, daar ga je. 902 00:40:15,570 --> 00:40:18,680 >> DAVID J. MALAN: Ah, kijk eens naar dat. 903 00:40:18,680 --> 00:40:19,830 Very nice. 904 00:40:19,830 --> 00:40:22,470 Nou, waarom niet 'we nemen uit een vrijwilliger hier 905 00:40:22,470 --> 00:40:24,180 die graag op komen. 906 00:40:24,180 --> 00:40:27,500 Hoe zit het daar in het groen, is het? 907 00:40:27,500 --> 00:40:30,540 >> Oké, en laten we have-- in plaats van dat te doen, sommigen van jullie 908 00:40:30,540 --> 00:40:34,590 zou dit spel weten hier-- snijd het touw, misschien? 909 00:40:34,590 --> 00:40:35,100 Laten we eens kijken. 910 00:40:35,100 --> 00:40:37,320 We hebben onze glazen over meer dan hier? 911 00:40:37,320 --> 00:40:38,625 >> OK. 912 00:40:38,625 --> 00:40:39,270 Dank u. 913 00:40:39,270 --> 00:40:39,380 Wat is je naam? 914 00:40:39,380 --> 00:40:40,350 >> Publiek: Laura. 915 00:40:40,350 --> 00:40:41,266 >> DAVID J. MALAN: Laura? 916 00:40:41,266 --> 00:40:42,120 Leuk om te zien. 917 00:40:42,120 --> 00:40:45,600 Als je het niet erg om Google Glass over uw bril. 918 00:40:45,600 --> 00:40:46,970 Dit is Colton. 919 00:40:46,970 --> 00:40:47,650 >> COLTON: Hi. 920 00:40:47,650 --> 00:40:48,140 Leuk u te ontmoeten. 921 00:40:48,140 --> 00:40:49,600 >> DAVID J. MALAN: OK, kom op rond. 922 00:40:49,600 --> 00:40:52,516 Oké, dus wat je gaat hier doen, hebben dit al eerder gespeeld, 923 00:40:52,516 --> 00:40:55,650 wordt uw hand niet op de Leap Motion hier. 924 00:40:55,650 --> 00:40:57,210 En nu je pijl moet bewegen. 925 00:40:57,210 --> 00:40:57,710 Oh, nope. 926 00:40:57,710 --> 00:40:58,066 >> Publiek: No. 927 00:40:58,066 --> 00:40:58,780 >> DAVID J. MALAN: Wij wil nog niet stoppen. 928 00:40:58,780 --> 00:40:59,280 OK, wacht. 929 00:40:59,280 --> 00:41:01,200 Meer dan hier. 930 00:41:01,200 --> 00:41:03,530 Dus merken als je houd je vinger over iets, 931 00:41:03,530 --> 00:41:06,750 de muis begint te gaan groen, dat is de manier waarop u klikt. 932 00:41:06,750 --> 00:41:08,980 >> Dus zweven over Play. 933 00:41:08,980 --> 00:41:10,970 En slechts één vinger is prima. 934 00:41:10,970 --> 00:41:13,869 En nu klik op de kleine groene jongen aan de linkerkant. 935 00:41:13,869 --> 00:41:15,410 En nu vasthouden totdat het vult groen. 936 00:41:15,410 --> 00:41:15,640 Goed. 937 00:41:15,640 --> 00:41:16,990 Nu, als, niveau één boven. 938 00:41:16,990 --> 00:41:20,190 >> Publiek: Ja, we willen level één, hier. 939 00:41:20,190 --> 00:41:21,660 >> DAVID J. MALAN: Goed. 940 00:41:21,660 --> 00:41:25,500 OK, dus alles wat je hebt te doen is knippen het touw. 941 00:41:25,500 --> 00:41:28,240 Je cursor is de witte daar beneden. 942 00:41:28,240 --> 00:41:28,880 >> Very nice. 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 Oké, het gaat over om harder te krijgen. 945 00:41:32,790 --> 00:41:34,800 Dus houd je vinger voor de komende nu. 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 Goed. 948 00:41:39,030 --> 00:41:39,999 Deze is hard. 949 00:41:39,999 --> 00:41:40,966 >> Publiek: Oh onzin. 950 00:41:40,966 --> 00:41:41,466 OK. 951 00:41:41,466 --> 00:41:42,466 Het wil op die manier gaan. 952 00:41:42,466 --> 00:41:44,890 Oh crap, dat-- 953 00:41:44,890 --> 00:41:47,120 >> DAVID J. MALAN: Yeah. 954 00:41:47,120 --> 00:41:50,700 Secundair doel is om alle sterren te krijgen. 955 00:41:50,700 --> 00:41:53,920 Oké, volgende. 956 00:41:53,920 --> 00:41:57,504 >> Laten we eens kijken of je deze derde kan krijgen. 957 00:41:57,504 --> 00:41:58,004 Goed. 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 OK, ga daar. 960 00:42:06,840 --> 00:42:08,850 >> Tuurlijk. 961 00:42:08,850 --> 00:42:11,230 Oh, erg leuk. 962 00:42:11,230 --> 00:42:11,930 Prima. 963 00:42:11,930 --> 00:42:13,534 >> Dus waarom doen we niet verdagen hier vandaag? 964 00:42:13,534 --> 00:42:15,200 Laat iemand komen op maximaal wie wil spelen. 965 00:42:15,200 --> 00:42:16,880 Hartelijk dank aan Laura onze vrijwilliger. 966 00:42:16,880 --> 00:42:18,730 En we zullen u op maandag. 967 00:42:18,730 --> 00:42:21,190 >> Publiek: Wilt u waarschijnlijk deze terug. 968 00:42:21,190 --> 00:42:23,640 >> SPEAKER 2: Bij de volgende CS50-- 969 00:42:23,640 --> 00:42:35,222