1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J. MALAN: Okej, så detta här är den Myo armen 3 00:00:41,880 --> 00:00:44,450 band, ett par som vi har för CS50 slutprojekt. 4 00:00:44,450 --> 00:00:47,533 Och det var en demonstration vi köade upp dig i förväg, där i stort sett 5 00:00:47,533 --> 00:00:51,120 denna ganska snäva arm band upp här lyssnar på dina muskelrörelserna 6 00:00:51,120 --> 00:00:54,280 som sedan mappas i programvara till Colton bärbara dator hit som 7 00:00:54,280 --> 00:00:57,230 hade iTunes och att song redan kö. 8 00:00:57,230 --> 00:01:00,270 I stället för mig demonstrera detta, Colton har varit i labbet 9 00:01:00,270 --> 00:01:04,129 klart hela veckan att få en demonstration redo för en modig volontär. 10 00:01:04,129 --> 00:01:07,430 Om någon skulle vilja komma på up-- såg din hand först. 11 00:01:07,430 --> 00:01:09,540 Kom upp. 12 00:01:09,540 --> 00:01:12,530 >> Okej. 13 00:01:12,530 --> 00:01:13,886 Och vad heter du? 14 00:01:13,886 --> 00:01:14,800 >> PUBLIK: Öh, Maria. 15 00:01:14,800 --> 00:01:16,550 >> DAVID J. MALAN: Maria, trevligt att se dig. 16 00:01:16,550 --> 00:01:17,310 Kom över hit. 17 00:01:17,310 --> 00:01:19,550 Låt mig presentera dig för Colton. 18 00:01:19,550 --> 00:01:21,290 Colton, är det Maria. 19 00:01:21,290 --> 00:01:23,050 >> COLTON: Hej, trevligt att träffas. 20 00:01:23,050 --> 00:01:24,330 >> David J. MALAN: Alla höger, så steg ett, vi är 21 00:01:24,330 --> 00:01:26,204 kommer att ha du sätter detta på din underarm 22 00:01:26,204 --> 00:01:29,280 så att det är ganska tight upp nära armbågen. 23 00:01:29,280 --> 00:01:31,940 Och under tiden, låt oss ha sätta på vår Google Glass 24 00:01:31,940 --> 00:01:33,720 och vi kommer att blanda teknik idag. 25 00:01:33,720 --> 00:01:36,340 >> COLTON: Först ska vi behöva haka detta in i saker. 26 00:01:36,340 --> 00:01:37,170 >> David J. MALAN: OK. 27 00:01:37,170 --> 00:01:39,795 Faktiskt, låt oss sätta armen som nära denna kabel som möjligt 28 00:01:39,795 --> 00:01:41,160 så att vi först kan synkronisera upp. 29 00:01:41,160 --> 00:01:42,740 >> COLTON: Låt oss göra detta. 30 00:01:42,740 --> 00:01:46,500 >> DAVID J. MALAN: Och under tiden, så att alla kan få en närmare blick, 31 00:01:46,500 --> 00:01:50,290 vi ska kasta Andrews kamera upp på skärmen där. 32 00:01:50,290 --> 00:01:54,460 Så vi har en USB-kabel som är anslutas till Maria antog utmaningen. 33 00:01:54,460 --> 00:02:00,230 Och låt mig slänga Colton skärm upp på projektorn nästa. 34 00:02:00,230 --> 00:02:06,000 >> Så Colton registrerar enheten nu som Myo ansluten till denna kabel. 35 00:02:06,000 --> 00:02:08,060 Och nu vad Marias kommer att göra en kort stund 36 00:02:08,060 --> 00:02:10,120 faktiskt gå igenom kalibreringsstegen 37 00:02:10,120 --> 00:02:12,830 och undervisa programvaran hur hennes muskler reagerar 38 00:02:12,830 --> 00:02:16,070 när hon gör vissa fördefinierade gester att programvaran förstår. 39 00:02:16,070 --> 00:02:17,910 Om du skulle vilja gå in framför skärmen. 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 OK, fortsätta att försöka. 42 00:02:30,090 --> 00:02:31,860 >> COLTON: Gå ut så här. 43 00:02:31,860 --> 00:02:32,970 Och så där. 44 00:02:32,970 --> 00:02:34,563 Och hela vägen till höger. 45 00:02:34,563 --> 00:02:35,922 Gå tillbaka. 46 00:02:35,922 --> 00:02:37,740 >> David J. MALAN: OK. 47 00:02:37,740 --> 00:02:38,960 Annat perspektiv. 48 00:02:38,960 --> 00:02:39,620 Det är inte du. 49 00:02:39,620 --> 00:02:40,350 Det är för oss. 50 00:02:40,350 --> 00:02:41,749 >> MARIA: OK. 51 00:02:41,749 --> 00:02:42,540 DAVID J. MALAN: Nej. 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 Låt oss flytta den högre upp så det är närmare armbågen, eller ännu snävare. 54 00:02:51,540 --> 00:02:52,680 Okej. 55 00:02:52,680 --> 00:02:53,270 >> Här går vi. 56 00:02:53,270 --> 00:02:56,780 Detta skulle vara en bra tid för CS52X. 57 00:02:56,780 --> 00:02:57,670 Det gå vi. 58 00:02:57,670 --> 00:02:58,760 >> Mycket trevligt. 59 00:02:58,760 --> 00:03:01,170 OK. 60 00:03:01,170 --> 00:03:02,790 Thumb att pinky. 61 00:03:02,790 --> 00:03:03,380 >> Mycket trevligt. 62 00:03:03,380 --> 00:03:05,140 Sprid fingrarna. 63 00:03:05,140 --> 00:03:06,240 Bra. 64 00:03:06,240 --> 00:03:06,910 Våg höger. 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 Det är märkligt att visa du med vänster hand-- 67 00:03:17,010 --> 00:03:19,665 >> COLTON: Ja, det är Yahoo. 68 00:03:19,665 --> 00:03:21,790 DAVID J. MALAN: Wave till höger och gå framåt. 69 00:03:21,790 --> 00:03:22,998 Snabbspolning framåt för att hoppa eller nästa. 70 00:03:22,998 --> 00:03:25,020 Det är OK Wave rätt. 71 00:03:25,020 --> 00:03:26,650 >> MARIA: Jag don't-- vänta. 72 00:03:26,650 --> 00:03:28,430 >> DAVID J. MALAN: Behöver du hjälp? 73 00:03:28,430 --> 00:03:30,027 >> COLTON: Så du tänker så här. 74 00:03:30,027 --> 00:03:31,860 MARIA: Det vrida annan sak, dock. 75 00:03:31,860 --> 00:03:32,390 COLTON: Det är. 76 00:03:32,390 --> 00:03:34,250 DAVID J. MALAN: Ja jag vet inte varför det är att visa dig en leftie. 77 00:03:34,250 --> 00:03:36,458 COLTON: Varför inte du try-- bara försöka gå så här. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J. MALAN: Nej? 80 00:03:40,090 --> 00:03:42,580 Kanske når armen ut lite rakare 81 00:03:42,580 --> 00:03:46,070 och göra det mer abrupt såhär. 82 00:03:46,070 --> 00:03:48,176 Ja, OK, kom igen. 83 00:03:48,176 --> 00:03:49,670 >> MARIA: Jag är ledsen. 84 00:03:49,670 --> 00:03:51,170 DAVID J. MALAN: Det är inte ditt fel. 85 00:03:51,170 --> 00:03:53,018 COLTON: Det är bra. 86 00:03:53,018 --> 00:03:55,430 DAVID J. MALAN: All Right. 87 00:03:55,430 --> 00:03:56,220 Well-- 88 00:03:56,220 --> 00:03:57,620 >> MARIA: Ska vi hoppa över detta, då? 89 00:03:57,620 --> 00:03:59,620 DAVID J. MALAN: Ja, låt oss Låt dig ur knipan. 90 00:03:59,620 --> 00:04:03,130 Så om någon skulle vilja göra en lärdoms använda denna framkant 91 00:04:03,130 --> 00:04:07,707 hårdvara, inser det kanske bara ta lite tid att vänja sig. 92 00:04:07,707 --> 00:04:10,290 Och this-- verkligheten är detta är faktiskt mycket bleeding edge. 93 00:04:10,290 --> 00:04:12,040 >> Detta är vad som kallas utvecklaren kit, som 94 00:04:12,040 --> 00:04:14,956 är tänkt att vara i huvudsak en pre-release så att människor kan göra precis 95 00:04:14,956 --> 00:04:18,690 this-- slåss med den, figur hur människors kroppar fungerar 96 00:04:18,690 --> 00:04:19,980 med tekniken. 97 00:04:19,980 --> 00:04:21,750 Så om du vill därefter, efter föreläsning, 98 00:04:21,750 --> 00:04:23,750 Vi kan låta dig komma och ta en annan hugg på det. 99 00:04:23,750 --> 00:04:26,970 Men annars, en applåd, om vi kunde, för Maria för att komma vidare upp. 100 00:04:26,970 --> 00:04:28,770 >> MARIA: Tack. 101 00:04:28,770 --> 00:04:30,390 >> DAVID J. MALAN: Tack. 102 00:04:30,390 --> 00:04:34,945 Vi ska hålla fast vid detta, men vi kommer att ge du-- vad sägs om en stressboll här? 103 00:04:34,945 --> 00:04:38,620 Åh, och-- if-- ja, tack. 104 00:04:38,620 --> 00:04:39,715 Okej. 105 00:04:39,715 --> 00:04:45,750 Så för den nyfikna, om du var obekanta med bra val 106 00:04:45,750 --> 00:04:47,670 att vi gjort det tidigare, en fantastisk TV 107 00:04:47,670 --> 00:04:50,210 visar att du bör absolut vara berusnings titta på Netflix 108 00:04:50,210 --> 00:04:51,110 är detta en här. 109 00:04:51,110 --> 00:04:54,472 >> TALARE 1: Mina damer och herrar, en trollkarl vid namn Josh. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J. MALAN: Och tydligen är det en sak till text mig under föreläsning nu. 112 00:05:08,050 --> 00:05:11,190 Jag får höra att Maria hade en födelsedag igår. 113 00:05:11,190 --> 00:05:14,095 Så grattis på födelsedagen från CS50 till Maria också. 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> Så du kanske har läst i senaste månaden att detta kolleger här, Steve 116 00:05:22,090 --> 00:05:25,260 Ballmer, som var faktiskt klassificera av 1977 på högskolan, 117 00:05:25,260 --> 00:05:27,170 nyligen pensionerad för Microsoft. 118 00:05:27,170 --> 00:05:29,620 Han var ett grundutbildningsprogram här, sedan ett par år senare 119 00:05:29,620 --> 00:05:31,910 befann sig på Stanford Business School 120 00:05:31,910 --> 00:05:34,160 när han fick ett telefonsamtal Ring från en vän till honom som 121 00:05:34,160 --> 00:05:36,516 hade bott i korridoren från honom här på Harvard. 122 00:05:36,516 --> 00:05:38,640 Att kompis hette Bill Gates, och på den tiden, 123 00:05:38,640 --> 00:05:42,700 han försökte rekrytera Steve vara den första person från näringslivet, egentligen, 124 00:05:42,700 --> 00:05:45,720 på ett litet företag namn Microsoft. 125 00:05:45,720 --> 00:05:48,960 >> En lång historia kort, Steve slutligen vann över, 126 00:05:48,960 --> 00:05:52,130 gick Microsoft när de hade bara 30 anställda. 127 00:05:52,130 --> 00:05:54,300 Och när han pensionerad helt nyligen, 128 00:05:54,300 --> 00:05:58,100 Bolaget hade 100.000 anställda under de senaste åren. 129 00:05:58,100 --> 00:06:01,171 Och så en webbplats som kallas The Verge upprättat denna hyllning på video 130 00:06:01,171 --> 00:06:02,920 att vi trodde att vi skulle delat som ger dig 131 00:06:02,920 --> 00:06:08,380 en känsla av hur mycket energi som Steve tillför någon presentation han ger. 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [VIDEOAVSPELNING] 134 00:06:12,550 --> 00:06:16,220 -Microsoft Är som ett fjärde barn. 135 00:06:16,220 --> 00:06:18,260 Barnen gör lämna huset. 136 00:06:18,260 --> 00:06:21,875 I det här fallet antar jag Jag lämnar huset. 137 00:06:21,875 --> 00:06:23,270 Hej Bill, whazzap? 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap? 139 00:06:24,200 --> 00:06:25,320 >> -Hej, Wazzap? 140 00:06:25,320 --> 00:06:28,590 Vi har fått en enorma möjligheter. 141 00:06:28,590 --> 00:06:30,210 Och Bill gav oss den möjligheten. 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 Jag vill tacka Bill för det. 144 00:06:36,770 --> 00:06:39,630 Jag vill att ni också. 145 00:06:39,630 --> 00:06:42,500 Innovationstakten kommer inte att bromsa. 146 00:06:42,500 --> 00:06:45,140 >> Det kommer att bli snabbare och snabbare. 147 00:06:45,140 --> 00:06:50,165 Det kan finnas ett fåtal konkurrenter som tyvärr elimineras! 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> Jag älskar det här företaget. 150 00:06:59,564 --> 00:07:00,064 Ja! 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 Jag är en dator, och jag älskar det här företaget! 153 00:07:08,250 --> 00:07:13,090 >> Utvecklare, utvecklare, utvecklare, utvecklare, utvecklare, utvecklare, 154 00:07:13,090 --> 00:07:14,560 utvecklare, utvecklare. 155 00:07:14,560 --> 00:07:17,500 156 00:07:17,500 --> 00:07:18,970 Ja! 157 00:07:18,970 --> 00:07:19,950 Webbutvecklare! 158 00:07:19,950 --> 00:07:21,420 >> Webbutvecklare! 159 00:07:21,420 --> 00:07:22,890 Webbutvecklare! 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 Lyssna på vad du får utan extra kostnad! 162 00:07:28,770 --> 00:07:31,960 >> MS-DOS verkställande, ett möte kalander, en kort lugg, ett anteckningsblock, 163 00:07:31,960 --> 00:07:33,750 en klocka, en kontrollpanel. 164 00:07:33,750 --> 00:07:35,461 Och kan du tro det? 165 00:07:35,461 --> 00:07:35,960 Reversie! 166 00:07:35,960 --> 00:07:37,270 >> Bränna dem på CD! 167 00:07:37,270 --> 00:07:38,660 Skicka dem till MSN! 168 00:07:38,660 --> 00:07:40,422 Du posta dem till vänner! 169 00:07:40,422 --> 00:07:41,790 >> Alla med ett klick! 170 00:07:41,790 --> 00:07:48,670 En Microsoft, en strategi, en team-- fokuserad, disciplinerad, professionell, 171 00:07:48,670 --> 00:07:50,610 och expert på allt vi gör. 172 00:07:50,610 --> 00:07:52,670 Låt mig använda en linje från en gammal film. 173 00:07:52,670 --> 00:07:54,810 >> Relationer är som hajar. 174 00:07:54,810 --> 00:07:57,480 De rör sig framåt eller de dör. 175 00:07:57,480 --> 00:08:01,470 Jag tror faktiskt tech företag är desamma. 176 00:08:01,470 --> 00:08:04,801 >> [END VIDEOAVSPELNING] 177 00:08:04,801 --> 00:08:08,050 DAVID J. MALAN: Så vi är så glada att meddela att Steve kommer att ansluta oss 178 00:08:08,050 --> 00:08:13,320 här i CS50 nästa onsdag på den vanliga plats och tid här. 179 00:08:13,320 --> 00:08:14,750 Utrymme kommer sannolikt att vara begränsad. 180 00:08:14,750 --> 00:08:19,650 Och så för att ansluta sig till oss personligen, vänligen huvudet idag eller kort därefter 181 00:08:19,650 --> 00:08:22,600 att cs50.harvard.edu/register. 182 00:08:22,600 --> 00:08:25,780 >> Och vi kommer att följa upp med Tisdag bekräftar fläckar. 183 00:08:25,780 --> 00:08:29,900 Ser fram emot att nästa Onsdag under föreläsning i CS50. 184 00:08:29,900 --> 00:08:33,706 Nu, i andra nyheter, råkade jag stött på detta i The Crimson bara 185 00:08:33,706 --> 00:08:34,289 häromdagen. 186 00:08:34,289 --> 00:08:37,370 >> Det visar sig att en av CS50 personal och åtminstone en av CS50: s studenter 187 00:08:37,370 --> 00:08:40,299 För närvarande kör för UC president och vice president, 188 00:08:40,299 --> 00:08:42,950 som förde mig tillbaka mina egna dagar tillbaka 189 00:08:42,950 --> 00:08:45,920 när jag förlorade UC valet kapitalt. 190 00:08:45,920 --> 00:08:48,210 Men guldkant i det är jag alltid 191 00:08:48,210 --> 00:08:50,604 berätta historien är att en av de jag är säker 192 00:08:50,604 --> 00:08:52,770 många skäl jag förlorade Valet var en total brist 193 00:08:52,770 --> 00:08:54,103 en talang för att tala inför publik. 194 00:08:54,103 --> 00:08:56,950 Och så helt ärligt, det drev mig, erfarenhet att 195 00:08:56,950 --> 00:09:02,235 Jag tror att min yngre år, att faktiskt skriva under upp till Harvard Computer Society, som 196 00:09:02,235 --> 00:09:04,610 är den grupp på campus som innehar olika tekniska samtal 197 00:09:04,610 --> 00:09:05,318 och annat. 198 00:09:05,318 --> 00:09:08,117 Och jag tog över undervisningen seminarier och därmed 199 00:09:08,117 --> 00:09:09,950 hade en möjlighet, en fantastisk möjlighet, 200 00:09:09,950 --> 00:09:12,620 att börja arbeta på just detta. 201 00:09:12,620 --> 00:09:15,000 Men också, fick jag tillfälle Under denna erfarenhet 202 00:09:15,000 --> 00:09:16,930 att lära mig ännu mer HTML. 203 00:09:16,930 --> 00:09:21,080 Och så jag förhalat går kväll genom titta igenom HTML baserad webbplats 204 00:09:21,080 --> 00:09:28,066 Jag gjorde in som 1997, '98, för min Kampanjen, som ser ut så här här. 205 00:09:28,066 --> 00:09:29,920 Jag vet. 206 00:09:29,920 --> 00:09:33,340 >> Because-- och naturligtvis, tillkännagivande denna fantastiska design beslut 1998 207 00:09:33,340 --> 00:09:33,850 eller whatnot. 208 00:09:33,850 --> 00:09:36,475 Det första du vill att användare att göra när du besöker din webbplats 209 00:09:36,475 --> 00:09:39,860 är att behöva klicka på en annan länk bara för att skriva in din webbplats här med munken 210 00:09:39,860 --> 00:09:43,940 bakom som en höljt gardin där tydligen min kampanj plattform var. 211 00:09:43,940 --> 00:09:46,330 Och det är allt du får idag är bara en skärmdump. 212 00:09:46,330 --> 00:09:49,500 Men jag läste igenom, liksom, mina kampanjaffischerna i natt 213 00:09:49,500 --> 00:09:50,490 och min plattform. 214 00:09:50,490 --> 00:09:52,960 >> Och jag var så arg på den tiden. 215 00:09:52,960 --> 00:09:55,380 Min plattform was-- det var intressant. 216 00:09:55,380 --> 00:09:57,730 Så jag har lugnat ner sedan dess. 217 00:09:57,730 --> 00:10:03,550 Men en dag kommer jag köra igen och förhoppningsvis bättre den här gången. 218 00:10:03,550 --> 00:10:07,265 >> Så HTML, det språk som jag gjorde att in-- du snart göra mycket more-- 219 00:10:07,265 --> 00:10:09,140 är något vi har varit talar om för sent 220 00:10:09,140 --> 00:10:12,460 och till stor del tar för givet nu att vi har gått vidare till andra språk. 221 00:10:12,460 --> 00:10:15,650 Men låt oss stanna upp ett ögonblick och lägga en del av dessa saker i sitt sammanhang. 222 00:10:15,650 --> 00:10:18,040 Så i en mening, vad är HTML? 223 00:10:18,040 --> 00:10:19,370 >> Eller, vad som används för? 224 00:10:19,370 --> 00:10:20,208 Någon? 225 00:10:20,208 --> 00:10:20,708 Ja. 226 00:10:20,708 --> 00:10:22,002 >> PUBLIK: Markup för webbplatser. 227 00:10:22,002 --> 00:10:23,460 DAVID J. MALAN: Markup för webbplats. 228 00:10:23,460 --> 00:10:27,100 Så det är ett märkspråk som kan du strukturera en webbsida. 229 00:10:27,100 --> 00:10:30,040 Header går upp här, titel går här, går kroppen här. 230 00:10:30,040 --> 00:10:33,280 Detta är fetstilt, detta är italics-- den sortens detaljer. 231 00:10:33,280 --> 00:10:33,830 >> OK, bra. 232 00:10:33,830 --> 00:10:37,620 Så CSS låter dig-- och jag tog några friheter där 233 00:10:37,620 --> 00:10:40,990 med djärva riktade och kursiv stil eftersom som är bättre förs med detta. 234 00:10:40,990 --> 00:10:42,096 CSS är-- vad? 235 00:10:42,096 --> 00:10:42,845 Säger i en mening. 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 Någon alls. 238 00:10:46,720 --> 00:10:46,870 Yeah. 239 00:10:46,870 --> 00:10:49,286 >> Målgrupp: Dekorationer och saker, som hur man designar den. 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 DAVID J. MALAN: OK, bra. 242 00:10:52,810 --> 00:10:55,420 Utsmyckningar som gör att du att utforma den eller stilisera det 243 00:10:55,420 --> 00:10:59,540 med saker som fetstil och kursiv stil och färger och även mer fina 244 00:10:59,540 --> 00:11:01,330 kornade positionering av element. 245 00:11:01,330 --> 00:11:04,520 Det låter slags du tar saker de sista milen så att om, till exempel, 246 00:11:04,520 --> 00:11:08,130 i Pset7, kanske du har märkt på din portfölj sida om du är på denna punkt 247 00:11:08,130 --> 00:11:12,270 redan att en standardtabell som du göra för att visa användarens lager innehav 248 00:11:12,270 --> 00:11:15,740 och kontanter ser nog ganska ohyggliga som standard utan blank. 249 00:11:15,740 --> 00:11:18,420 Allt är typ av proppfull samman i rader och kolumner. 250 00:11:18,420 --> 00:11:20,662 >> Väl, med en bit av CSS, som ni kanske förstår, 251 00:11:20,662 --> 00:11:23,870 du faktiskt kan justera det och göra det något mycket mer bekant och mycket 252 00:11:23,870 --> 00:11:24,870 sötare att titta på. 253 00:11:24,870 --> 00:11:27,730 Så CSS handlar om stilisering av webbplatser. 254 00:11:27,730 --> 00:11:31,970 Men sedan vi införde ytterligare en språk, PHP, som låter oss göra vad? 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> Låt oss bara göra vad? 257 00:11:37,590 --> 00:11:38,177 Någon. 258 00:11:38,177 --> 00:11:40,010 Fick ge sig bortom de första par rader. 259 00:11:40,010 --> 00:11:40,260 Yeah. 260 00:11:40,260 --> 00:11:41,719 >> PUBLIK: Generera dynamiskt innehåll. 261 00:11:41,719 --> 00:11:42,718 DAVID J. MALAN: Perfect. 262 00:11:42,718 --> 00:11:43,850 Generera dynamiskt innehåll. 263 00:11:43,850 --> 00:11:45,808 Och du kan göra detta på valfritt antal språk. 264 00:11:45,808 --> 00:11:50,120 Vi råkar använda PHP eftersom det är dels så liknar C syntax. 265 00:11:50,120 --> 00:11:52,000 >> Men PHP gör just detta. 266 00:11:52,000 --> 00:11:54,620 Det låter dig dynamiskt generera utdata. 267 00:11:54,620 --> 00:11:57,890 Och en del av denna produktion skulle kunna vara HTML, eftersom vi har oftast gjort. 268 00:11:57,890 --> 00:12:00,160 Och det är också, eftersom det är ett programmeringsspråk, är 269 00:12:00,160 --> 00:12:03,240 den mekanism via vilken Vi kan prata med databaser. 270 00:12:03,240 --> 00:12:05,730 >> Och vi kan göra förfrågningar till andra servrar som Yahoos 271 00:12:05,730 --> 00:12:08,660 och programmässigt göra något verkligen att du kanske annars 272 00:12:08,660 --> 00:12:10,400 vill tvinga datorn att göra. 273 00:12:10,400 --> 00:12:13,580 Så PHP låter oss börja dynamiskt utmata innehållet. 274 00:12:13,580 --> 00:12:16,900 Så genom denna logik, hade jag inte en dynamisk webbplats redan 1998. 275 00:12:16,900 --> 00:12:18,460 >> Det var bara en statisk webbsida. 276 00:12:18,460 --> 00:12:22,250 Min innehåll måste ändras genom manuellt med gedit eller något motsvarande. 277 00:12:22,250 --> 00:12:25,290 Men PHP är vad vi använde eller kunde ha använt, snarare 278 00:12:25,290 --> 00:12:27,260 för något som Frosh IMs hemsida, vilket 279 00:12:27,260 --> 00:12:31,160 skulle ta registreringar och hantera en lista över users-- saker som 280 00:12:31,160 --> 00:12:33,550 faktiskt omkoppling tid, även om vi råkar 281 00:12:33,550 --> 00:12:35,990 att använda Perl, en annan språk på den tiden. 282 00:12:35,990 --> 00:12:40,350 >> Och så slutligen, införde vi SQL-- Structured Query Language. 283 00:12:40,350 --> 00:12:43,845 Så ännu ett annat språk som också användes för vad? 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 Används för vad? 286 00:12:47,639 --> 00:12:49,430 Kan vi vågar slight-- OK, vi kommer inte 287 00:12:49,430 --> 00:12:51,263 att komma mycket längre än den orkester här. 288 00:12:51,263 --> 00:12:53,432 PUBLIK: Det är ett protokoll brukade prata med databaser. 289 00:12:53,432 --> 00:12:55,640 David J. MALAN: Ett protokoll brukade prata med databaser. 290 00:12:55,640 --> 00:12:56,181 Låt mig tweak. 291 00:12:56,181 --> 00:12:59,280 Det är ett naturligt språk som används att prata med databases-- väljer 292 00:12:59,280 --> 00:13:01,280 och skär och tar bort och uppdateringar och faktiskt 293 00:13:01,280 --> 00:13:03,840 ännu fler funktioner som Vi har inte ens dykt 294 00:13:03,840 --> 00:13:07,920 in men du kanske vill explore-- ha att utforska för, säg, ett slutprojekt. 295 00:13:07,920 --> 00:13:09,560 Så det finns dessa olika bitar. 296 00:13:09,560 --> 00:13:13,100 >> Och förhoppningsvis Pset7, trots att dess specifikation är ganska lång, 297 00:13:13,100 --> 00:13:15,990 Det är avsiktligt lång tid att gå dig igenom hur dessa saker kan alla 298 00:13:15,990 --> 00:13:17,210 skrivas ihop. 299 00:13:17,210 --> 00:13:20,300 Nu på måndag, vi introducerade vår sista språk 300 00:13:20,300 --> 00:13:23,430 att vi formellt ska introducera in den course-- dvs JavaScript. 301 00:13:23,430 --> 00:13:25,720 Detta, som PHP, är en tolkat språk. 302 00:13:25,720 --> 00:13:28,110 >> Men en viktig skillnad Jag föreslog i måndags 303 00:13:28,110 --> 00:13:32,730 är att medan PHP körs eller tolkas på servern, vilket 304 00:13:32,730 --> 00:13:35,990 i detta fall är det CS50 apparaten, eller kanske någon kommersiell webb 305 00:13:35,990 --> 00:13:39,370 server på Internet, JavaScript i allmänhet 306 00:13:39,370 --> 00:13:43,650 är ett språk som körs på klientsidan inte server side-- så i webbläsaren. 307 00:13:43,650 --> 00:13:46,970 Vilket betyder att, precis som när jag öppnade upp Facebook källkod och hitta alla 308 00:13:46,970 --> 00:13:51,510 av dessa Js-filer, var implikationen att när du besöker Facebook eller mest 309 00:13:51,510 --> 00:13:54,810 webbplatser dessa dagar, får du inte bara HTML, inte bara CSS, 310 00:13:54,810 --> 00:13:59,370 men en hel massa JavaScript kod ofta i form av JS-filer. 311 00:13:59,370 --> 00:14:03,970 Och då är det den browser-- din egen Mac eller PC-- som utför den koden. 312 00:14:03,970 --> 00:14:05,990 >> Men din webbläsare utför det. 313 00:14:05,990 --> 00:14:08,070 Du kan tänka i form av en sandlåda. 314 00:14:08,070 --> 00:14:12,420 Så att JavaScript-kod inte ska vara kunna ta bort filer på datorn. 315 00:14:12,420 --> 00:14:14,730 Det bör inte kunna skicka e-post för din räkning. 316 00:14:14,730 --> 00:14:17,760 Din webbläsare slags begränsar vad du kan göra med det. 317 00:14:17,760 --> 00:14:20,630 >> Så i den meningen är det en liten mindre kraftfull, kanske, än C. 318 00:14:20,630 --> 00:14:24,030 Men JavaScript kan, som ett åt sidan, att användas på servern, 319 00:14:24,030 --> 00:14:27,740 även om vi tenderar att inte tala om det i det sammanhanget. 320 00:14:27,740 --> 00:14:29,740 Så nu ska vi knyta ihop dessa. 321 00:14:29,740 --> 00:14:34,000 En vecka plus sedan presenterade vi några HTML på left-- super tråkiga webbsida. 322 00:14:34,000 --> 00:14:35,000 >> Bara säger hallå världen. 323 00:14:35,000 --> 00:14:38,110 Och då jag föreslog på rätt vi kan sorts stjäla idéer 324 00:14:38,110 --> 00:14:41,470 från vår diskussion om datastrukturer i C 325 00:14:41,470 --> 00:14:45,270 och fundera på hur denna hierarkiska märkspråk till vänster 326 00:14:45,270 --> 00:14:49,720 kunde dras eller genomföras i minnet som en faktisk trädstruktur med noder 327 00:14:49,720 --> 00:14:51,400 och pekare och den typen av detaljer. 328 00:14:51,400 --> 00:14:53,820 Till höger, kallar vi att en DOM-- Document 329 00:14:53,820 --> 00:14:56,800 Object Model-- som är precis ett finare sätt att säga träd. 330 00:14:56,800 --> 00:14:59,520 >> Nu, varför denna användbar för tänker på det på det sättet? 331 00:14:59,520 --> 00:15:01,680 Eftersom nu med JavaScript, eftersom vi har 332 00:15:01,680 --> 00:15:05,810 kod som får spela i detta miljö, den faktiska HTML som är 333 00:15:05,810 --> 00:15:08,360 skickats till webbläsaren redan och har redan 334 00:15:08,360 --> 00:15:12,690 laddats in i minnet av browser in i ett träd i din dators 335 00:15:12,690 --> 00:15:18,270 RAM så här, kan vi använda JavaScript att faktiskt passera eller gå eller sök 336 00:15:18,270 --> 00:15:21,800 eller ändra på det DOM-trädet men vi vill. 337 00:15:21,800 --> 00:15:24,040 Så i själva verket, om du tror att om facebook.com, 338 00:15:24,040 --> 00:15:27,660 om du använder chattfunktionen, om du Användningen Gmail och Gchat funktionen 339 00:15:27,660 --> 00:15:30,540 något där du har meddelanden som kommer igen och igen 340 00:15:30,540 --> 00:15:35,880 och återigen, dessa meddelanden är förmodligen, liknande, LI-tagg, listobjekt taggar, kanske. 341 00:15:35,880 --> 00:15:37,940 >> Eller de kanske är bara Divar som håller visas 342 00:15:37,940 --> 00:15:39,770 varje gång du får ett snabbmeddelande. 343 00:15:39,770 --> 00:15:42,960 Och så det betyder bara vad Facebook eller Google gör 344 00:15:42,960 --> 00:15:45,200 är varje gång du får en meddelande från servern, 345 00:15:45,200 --> 00:15:48,740 de förmodligen använder JavaScript att bara lägga till ytterligare en nod 346 00:15:48,740 --> 00:15:52,700 till denna tree-- annan nod till denna träd som sedan visuellt bara ser 347 00:15:52,700 --> 00:15:54,570 som en ny textrad på skärmen. 348 00:15:54,570 --> 00:15:57,100 Men de är att sätta in in i denna datastruktur. 349 00:15:57,100 --> 00:15:59,742 >> Så i klasser som CS124 och andra, kommer du 350 00:15:59,742 --> 00:16:02,200 egentligen skriva mer kod mot datastrukturer som denna. 351 00:16:02,200 --> 00:16:04,310 Men för tillfället i JavaScript, vi ska bara ta på sig 352 00:16:04,310 --> 00:16:07,920 vi får allt detta funktioner gratis från själva språket. 353 00:16:07,920 --> 00:16:09,210 Så låt oss titta på ett exempel. 354 00:16:09,210 --> 00:16:13,120 >> Låt mig öppna upp en fil som heter form.html. 355 00:16:13,120 --> 00:16:14,601 Det är super enkelt. 356 00:16:14,601 --> 00:16:15,600 Det ser ut precis som denna. 357 00:16:15,600 --> 00:16:17,860 >> Ingen CSS, ingen tanke på estetik. 358 00:16:17,860 --> 00:16:19,810 Det är rent funktionell och tydligen är jag 359 00:16:19,810 --> 00:16:24,000 ber om ett e-postmeddelande, ett lösenord, lösenord igen, och sedan en kontroll 360 00:16:24,000 --> 00:16:26,150 att gå med på vissa villkor. 361 00:16:26,150 --> 00:16:28,740 Vilken källkoden för detta ser ut är förmodligen något 362 00:16:28,740 --> 00:16:31,030 du kan gissa med en lite eftertanke nu. 363 00:16:31,030 --> 00:16:32,840 Jag har ett formulär tag här. 364 00:16:32,840 --> 00:16:36,190 >> En åtgärd är tydligen gå till gå till en fil som heter register.php. 365 00:16:36,190 --> 00:16:37,870 Metoden jag ska använda är få. 366 00:16:37,870 --> 00:16:40,880 Och så har jag en text fält som heter e-post. 367 00:16:40,880 --> 00:16:43,340 >> Jag har ett fält för lösenord vars namn är lösenord. 368 00:16:43,340 --> 00:16:45,420 Jag har en annan lösenordsfältet vars namn 369 00:16:45,420 --> 00:16:47,342 är något godtyckligt bekräftelse. 370 00:16:47,342 --> 00:16:49,690 Det är bara en annan HTTP parameter. 371 00:16:49,690 --> 00:16:54,430 >> Och sedan har vi vi inte använt dessa utom eftersom Frosh IMs demo i class-- 372 00:16:54,430 --> 00:16:56,692 en kryssruta som är bara typ lika check. 373 00:16:56,692 --> 00:16:57,900 Och jag ska kalla detta avtal. 374 00:16:57,900 --> 00:17:00,700 Så jag har typ av godtyckligt men lämpligen namngav dessa områden. 375 00:17:00,700 --> 00:17:03,450 Så att nu när denna form blir in, låt oss se vad som händer. 376 00:17:03,450 --> 00:17:07,290 Om jag gör malan@harvard.edu, Jag ska göra ett lösenord för crimson. 377 00:17:07,290 --> 00:17:09,530 Jag ska göra ett lösenord för ingenting. 378 00:17:09,530 --> 00:17:10,910 Låt oss inte samarbeta. 379 00:17:10,910 --> 00:17:12,280 >> Och jag kommer inte att markera rutan. 380 00:17:12,280 --> 00:17:13,940 Låt mig klickar du på Registrera. 381 00:17:13,940 --> 00:17:15,420 Och den säger, hm, du är registrerad. 382 00:17:15,420 --> 00:17:16,069 Inte riktigt. 383 00:17:16,069 --> 00:17:17,450 >> Men URL förändrats. 384 00:17:17,450 --> 00:17:22,280 Så här formuläret klart tillåtet att underkasta sig register.php. 385 00:17:22,280 --> 00:17:25,160 Men antagligen skulle jag vara fånga några av dessa fel. 386 00:17:25,160 --> 00:17:27,569 Nu, i Pset7 och några våra föreläsnings exempel, 387 00:17:27,569 --> 00:17:30,130 skulle vi i allmänhet skriva ut en stor röd felmeddelande här 388 00:17:30,130 --> 00:17:33,760 sade saknade namn, eller saknas lösenord. 389 00:17:33,760 --> 00:17:37,680 Vi har gjort det förut och vi har gjort serversidan feldetektering. 390 00:17:37,680 --> 00:17:41,580 >> Men många webbplatser dessa dagar göra klientsidan feldetektering 391 00:17:41,580 --> 00:17:42,810 där webbadressen ändras inte. 392 00:17:42,810 --> 00:17:44,101 Hela sidan uppdateras inte. 393 00:17:44,101 --> 00:17:46,940 Du får omedelbar återkoppling från webbläsaren. 394 00:17:46,940 --> 00:17:48,070 Kanske något rött. 395 00:17:48,070 --> 00:17:49,190 >> Kanske du får en pop up. 396 00:17:49,190 --> 00:17:53,240 Men du behöver inte slösa tid på att skicka till serveruppgifter som är ofullständiga. 397 00:17:53,240 --> 00:17:56,050 Så låt oss se hur vi kanske uppnå den funktionen också. 398 00:17:56,050 --> 00:17:59,660 >> Låt mig gå till form1.html, som ser likadant ut. 399 00:17:59,660 --> 00:18:03,530 Men om den här gången jag gör malan@harvard.edu och jag skriver crimson 400 00:18:03,530 --> 00:18:07,350 och jag samarbetar inte vidare men klicka på Registrera, märker nu. 401 00:18:07,350 --> 00:18:08,940 Det är inte det sexigaste lösningen. 402 00:18:08,940 --> 00:18:10,900 Jag har åtminstone fångat detta fel. 403 00:18:10,900 --> 00:18:12,900 Och jag har använt varningen funktion i JavaScript-- 404 00:18:12,900 --> 00:18:14,090 som vi bara använder i klassen. 405 00:18:14,090 --> 00:18:16,430 I allmänhet bör du inte använda denna eftersom det kan mycket snabbt komma ut 406 00:18:16,430 --> 00:18:17,160 av kontroll. 407 00:18:17,160 --> 00:18:19,180 Men Lösenorden matchar inte är felet. 408 00:18:19,180 --> 00:18:21,120 >> Låt mig gå vidare och klicka på OK. 409 00:18:21,120 --> 00:18:25,040 Men vad nyckeln takeaway här är att webbadressen inte förändrades. 410 00:18:25,040 --> 00:18:27,960 Så jag har inte brytt slöseri serverns tid frågar den 411 00:18:27,960 --> 00:18:30,750 en fråga som jag kunde ha listat ut svaret på mig själv. 412 00:18:30,750 --> 00:18:33,210 >> Och användaren, även om pratat om det här 413 00:18:33,210 --> 00:18:35,264 längre än användarens kommer att tänka på detta, 414 00:18:35,264 --> 00:18:36,680 kommer att få omedelbar feedback. 415 00:18:36,680 --> 00:18:39,044 Det finns ingen fördröjning med uppkoppling till nätet. 416 00:18:39,044 --> 00:18:40,460 Så låt oss titta på detta källkod. 417 00:18:40,460 --> 00:18:45,600 >> Form1.html utseende strukturellt liknande här uppe. 418 00:18:45,600 --> 00:18:46,810 Formen är i själva verket densamma. 419 00:18:46,810 --> 00:18:48,330 Men låt oss se vad jag gjorde här nere. 420 00:18:48,330 --> 00:18:49,913 Och det finns olika sätt att göra detta. 421 00:18:49,913 --> 00:18:53,690 Och jag har gjort den mest raka följ men inte mest eleganta sätt än. 422 00:18:53,690 --> 00:18:54,869 Jag har en script-tagg. 423 00:18:54,869 --> 00:18:57,035 Jag sedan ringa document.getElementById ("registrering"). 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 Och jag lagra detta värde i formen, en variabel. 426 00:19:04,420 --> 00:19:05,520 >> Så vad har jag gjort? 427 00:19:05,520 --> 00:19:08,960 Du kan tänka på document.getElementById som vara 428 00:19:08,960 --> 00:19:11,200 en speciell funktion som JavaScript ger dig 429 00:19:11,200 --> 00:19:14,400 som bokstavligen händer du en pekare till en av noderna 430 00:19:14,400 --> 00:19:16,520 eller rektanglar i trädet. 431 00:19:16,520 --> 00:19:21,470 Så nu det är vad vårt formulär variabel i JavaScript är faktiskt pekar på. 432 00:19:21,470 --> 00:19:25,120 >> Så nu syntaxen skiljer sig från C. Men vi gör några saker här. 433 00:19:25,120 --> 00:19:30,360 En är lite konstigt här ser, förvisso kontra C. 434 00:19:30,360 --> 00:19:32,180 Men titta på linje 35. 435 00:19:32,180 --> 00:19:35,130 Så på vänster form.onsubmit. 436 00:19:35,130 --> 00:19:38,060 Minns att onSubmit är som ett fält i en struct. 437 00:19:38,060 --> 00:19:41,480 Om du tänker på formen variabel är att bara vara en C-struct, 438 00:19:41,480 --> 00:19:42,600 den kan ha vissa fält. 439 00:19:42,600 --> 00:19:46,410 >> Tillbaka i dag, hade vi studenter namn, ID, hus, dessa slags områden. 440 00:19:46,410 --> 00:19:48,520 Tänk bara på onSubmit som ett annat fält. 441 00:19:48,520 --> 00:19:53,380 Men det är ett speciellt område på grund av att webbläsaren är förprogrammerad att förvänta sig 442 00:19:53,380 --> 00:19:57,530 .onsubmit att inte vara ett värde som ett nummer eller en sträng, 443 00:19:57,530 --> 00:20:01,180 utan att faktiskt vara en funktion eller adressen till en funktion 444 00:20:01,180 --> 00:20:02,570 i datorns minne. 445 00:20:02,570 --> 00:20:04,740 >> Och faktiskt, det är vad det detta sökord här gör. 446 00:20:04,740 --> 00:20:06,710 Det säger, ge mig en ny funktion. 447 00:20:06,710 --> 00:20:09,390 Men vad är dess namn kommer att bli, tydligen? 448 00:20:09,390 --> 00:20:10,800 >> Tänker tillbaka på måndag. 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 Vad är namnet på denna Funktionen bygger på denna syntax? 451 00:20:17,170 --> 00:20:19,784 Nej, jag menar, det finns helt klart inget namn associated-- säkert 452 00:20:19,784 --> 00:20:21,200 inte på vad jag har markerat här. 453 00:20:21,200 --> 00:20:22,560 >> Men det är faktiskt OK. 454 00:20:22,560 --> 00:20:25,840 Detta är en anonym funktion, eller en lambda-funktion som vissa skulle kalla det. 455 00:20:25,840 --> 00:20:27,589 Och det betyder bara det är fortfarande en funktion. 456 00:20:27,589 --> 00:20:29,400 Det är bara, du kan inte kalla det vid namn. 457 00:20:29,400 --> 00:20:30,057 Men det är OK. 458 00:20:30,057 --> 00:20:33,140 Eftersom Igen har webbläsaren blivit förprogrammeras av företag som Google 459 00:20:33,140 --> 00:20:38,540 eller Microsoft eller Mozilla eller andra till vet bara att om .onsubmit fält 460 00:20:38,540 --> 00:20:43,400 insidan av en form elementet har värde, behandla det som en function-- 461 00:20:43,400 --> 00:20:44,750 en funktion pekare, om ni så vill. 462 00:20:44,750 --> 00:20:46,910 Och kalla det när formuläret skickas. 463 00:20:46,910 --> 00:20:50,350 >> Så vad koden ska exekveras När formuläret skickas? 464 00:20:50,350 --> 00:20:52,526 Tydligen allt insidan av klammerparentes. 465 00:20:52,526 --> 00:20:53,650 Och detta är bara stilist. 466 00:20:53,650 --> 00:20:55,626 >> Du kan göra detta som vi tenderar att göra i CS50. 467 00:20:55,626 --> 00:20:58,250 Men i JavaScript, de flesta människor tenderar att hålla det på samma linje 468 00:20:58,250 --> 00:21:01,960 bara för att det tydligare är förknippas med sökordet funktion. 469 00:21:01,960 --> 00:21:03,240 Så nu vad gör jag? 470 00:21:03,240 --> 00:21:08,616 >> Om form.email.value lika jämlikar den tomma strängen eller ingenting, här är 471 00:21:08,616 --> 00:21:11,490 en varning där jag ska säga, Du måste ange din e-postadress, 472 00:21:11,490 --> 00:21:12,690 och sedan returnera false. 473 00:21:12,690 --> 00:21:15,720 Och det är det retur falskt som förhindrar formuläret från att lämnas in. 474 00:21:15,720 --> 00:21:19,480 Under tiden, om lösenordsvärdet är tomt, jag ska skrika på användaren 475 00:21:19,480 --> 00:21:21,150 och säger, du måste ange ett lösenord. 476 00:21:21,150 --> 00:21:23,700 >> Samtidigt saker och ting blir lite snyggare här. 477 00:21:23,700 --> 00:21:29,160 Om form.password.value inte lika form.confirmation.value, 478 00:21:29,160 --> 00:21:31,680 det andra fältet, skrika på användaren om att lösenorden 479 00:21:31,680 --> 00:21:33,860 stämmer inte, eftersom de inte för en stund sedan. 480 00:21:33,860 --> 00:21:35,780 Och då detta är en lite sexigare eftersom jag 481 00:21:35,780 --> 00:21:40,470 vet att jag visste begrepps att kontrolleras är en kryssruta namn. 482 00:21:40,470 --> 00:21:45,680 >> Så jag kan bara använda ett utropstecken punkt att säga om kontrollen inte är 483 00:21:45,680 --> 00:21:48,040 checked-- det är Boolean värde, sant eller false-- 484 00:21:48,040 --> 00:21:49,700 Jag ska skrika åt användaren av den anledningen. 485 00:21:49,700 --> 00:21:52,300 Annars, om vi får igenom alla dessa villkor, 486 00:21:52,300 --> 00:21:53,270 låt oss bara return true. 487 00:21:53,270 --> 00:21:54,700 Låt formuläret lämnas in. 488 00:21:54,700 --> 00:21:56,560 Och detta händer då. 489 00:21:56,560 --> 00:21:57,740 >> Låt oss skriva in crimson. 490 00:21:57,740 --> 00:22:00,230 Låt oss markera rutan klickar du på Registrera. 491 00:22:00,230 --> 00:22:01,979 Och nu går jag vidare till destinationen. 492 00:22:01,979 --> 00:22:03,270 Nu finns det ingen databas där. 493 00:22:03,270 --> 00:22:05,370 Det finns inget intressant i register.php. 494 00:22:05,370 --> 00:22:07,980 Jag behövde bara något att faktiskt prata med. 495 00:22:07,980 --> 00:22:09,140 Så låt mig göra en paus, här. 496 00:22:09,140 --> 00:22:16,270 Eventuella frågor om vad vi just har gjort eller vad en del av denna nya syntaxen är? 497 00:22:16,270 --> 00:22:17,640 OK, ja? 498 00:22:17,640 --> 00:22:20,025 >> PUBLIK: Så någon kryssruta är automatiskt en Boolean. 499 00:22:20,025 --> 00:22:21,650 Du behöver inte förklara det så. 500 00:22:21,650 --> 00:22:22,649 >> DAVID J. MALAN: Rätt. 501 00:22:22,649 --> 00:22:29,340 Varje kryssruta som skickas till dig från ett HTML-formulär på din JavaScript-kod 502 00:22:29,340 --> 00:22:31,760 kommer att behandlas, ja, som en Boolean value-- sant eller falskt. 503 00:22:31,760 --> 00:22:32,635 Det är en bra fråga. 504 00:22:32,635 --> 00:22:36,080 Medan de andra värdena, av Naturligtvis har text, AKA strängar. 505 00:22:36,080 --> 00:22:38,500 >> Okej, så låt mig spola tillbaka lite längre. 506 00:22:38,500 --> 00:22:39,900 Vad var hela poängen med det här? 507 00:22:39,900 --> 00:22:41,400 Bara för att vara tydlig. 508 00:22:41,400 --> 00:22:44,940 Som vi redan vet, även från Pset7 och även från förra veckans föreläsning 509 00:22:44,940 --> 00:22:51,120 exempel, som vi naturligtvis kan kontrollera $ _GET $ _POST Se om användaren ger oss 510 00:22:51,120 --> 00:22:52,200 ett tomt värde. 511 00:22:52,200 --> 00:22:54,400 Minns den tomma funktionen i PHP. 512 00:22:54,400 --> 00:22:58,040 >> Så bara för att vara tydlig, vad är en anledning som vi kanske också 513 00:22:58,040 --> 00:23:00,535 vill göra detta felkontroll insidan av webbläsaren? 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 Vad är motivationen här? 516 00:23:06,080 --> 00:23:06,580 Yeah. 517 00:23:06,580 --> 00:23:09,735 >> PUBLIK: Snabbare, och du inte skicka meningslösa data till servern. 518 00:23:09,735 --> 00:23:10,610 DAVID J. MALAN: Good. 519 00:23:10,610 --> 00:23:11,170 Den är snabbare. 520 00:23:11,170 --> 00:23:12,920 Du behöver inte skicka värdelös data till servern. 521 00:23:12,920 --> 00:23:14,670 >> Så du får tillbaka en mer omedelbar respons. 522 00:23:14,670 --> 00:23:16,560 Och totalt sett, användaren erfarenhet är bättre. 523 00:23:16,560 --> 00:23:17,900 Tänk på alternativet. 524 00:23:17,900 --> 00:23:21,160 >> Om för Gmail-- och var fallet för många år sedan. 525 00:23:21,160 --> 00:23:24,160 Anta att du fått ett nytt e Gmail konto, men det enda sättet genom 526 00:23:24,160 --> 00:23:26,510 att se att är att, liksom, ladda om hela sidan. 527 00:23:26,510 --> 00:23:29,030 Eller antar du klickar på en länk för att läsa en e-post. 528 00:23:29,030 --> 00:23:31,600 >> Allting måste ladda om så att du kan se e-post. 529 00:23:31,600 --> 00:23:33,380 Eller Facebook-- du får ett chattmeddelande. 530 00:23:33,380 --> 00:23:36,000 Du ser inte det förrän du ladda sidan eller klicka någon länk. 531 00:23:36,000 --> 00:23:38,380 >> Liknande, skulle detta vara en väldigt irriterande användarupplevelse. 532 00:23:38,380 --> 00:23:41,300 Och det är hur det var, tydligt, tillbaka när jag körde för UC 533 00:23:41,300 --> 00:23:44,760 och banan var mycket mindre dynamisk och JavaScript var inte så populärt 534 00:23:44,760 --> 00:23:45,601 som det är nu. 535 00:23:45,601 --> 00:23:47,850 Och saker och ting blir mycket mer dynamisk och mycket mer 536 00:23:47,850 --> 00:23:49,900 klientsidan i det avseendet. 537 00:23:49,900 --> 00:23:54,370 >> Men det finns en hake här, och Detta är typ av en irriterande gotcha. 538 00:23:54,370 --> 00:23:58,720 Bara för att du lägger till klientsidan upptäckt som detta innebär inte 539 00:23:58,720 --> 00:24:01,430 du kan eller bör överge sidodetekteringsserver. 540 00:24:01,430 --> 00:24:04,080 Du vill i huvudsak att sätta ditt Felkontroll på båda ställena. 541 00:24:04,080 --> 00:24:05,830 För vad var en av lärdom 542 00:24:05,830 --> 00:24:10,270 från artikeln jag läste några utdrag från med denna dumma CMS system-- 543 00:24:10,270 --> 00:24:14,410 Content Management System-- som var genomföra sin autentiseringssystem, 544 00:24:14,410 --> 00:24:16,790 sin inloggning via vilken mekanism? 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 >> PUBLIK: JavaScript. 548 00:24:21,499 --> 00:24:23,290 David J. MALAN: JavaScript, exakt, eller hur? 549 00:24:23,290 --> 00:24:24,610 Det var med hjälp av JavaScript. 550 00:24:24,610 --> 00:24:27,120 Och bokstavligen, ni har spelade lite förmodligen 551 00:24:27,120 --> 00:24:28,700 med Chrome Inspector. 552 00:24:28,700 --> 00:24:30,890 Och om jag kan hitta det, inspektera element. 553 00:24:30,890 --> 00:24:33,670 >> Låt mig gå över till att göra alla Chrome alternativ. 554 00:24:33,670 --> 00:24:37,080 Och det är hur lätt det är att avaktivera JavaScript i en webbläsare. 555 00:24:37,080 --> 00:24:38,950 Check, inte mer JavaScript. 556 00:24:38,950 --> 00:24:41,070 >> Så i rättvisans namn, en hel del av nätet dessa dagar 557 00:24:41,070 --> 00:24:43,430 är bara att bryta eftersom Gmail och andra sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook-- anta att JavaScript är aktiverat. 559 00:24:46,140 --> 00:24:50,180 Men om du gör något dumt som endast validera användare ingång 560 00:24:50,180 --> 00:24:52,520 och kontrollera att den fel på klientsidan, 561 00:24:52,520 --> 00:24:54,940 en motståndare kunde enkelt göra detta. 562 00:24:54,940 --> 00:24:57,180 Och sedan ännu smartare motståndare som ni 563 00:24:57,180 --> 00:25:01,120 nu kan använda Telnet eller Curl eller bara kommandoraden kommandon 564 00:25:01,120 --> 00:25:05,300 och faktiskt skicka meddelanden till servern som på liknande sätt är inte fel som markerats. 565 00:25:05,300 --> 00:25:08,380 >> Så det här är mer av en användargränssnitt beslut 566 00:25:08,380 --> 00:25:13,060 än det är en faktisk teknisk improvement-- genomförande 567 00:25:13,060 --> 00:25:14,410 något som klientsidan så här. 568 00:25:14,410 --> 00:25:16,800 Så nu en snabb blick, men sedan Jag ska skjuta till online promenad 569 00:25:16,800 --> 00:25:17,674 genom för detta. 570 00:25:17,674 --> 00:25:21,480 I formuläret två, vi faktiskt gick igenom och rensade upp koden lite. 571 00:25:21,480 --> 00:25:23,650 Men låt mig skjuta till en av filmerna vi ska troligen 572 00:25:23,650 --> 00:25:27,970 bädda in Pset8 som bara visar en liknande syntax med hjälp av ett bibliotek som heter 573 00:25:27,970 --> 00:25:32,320 jQuery, som är en super, super populärt bibliotek i JavaScript 574 00:25:32,320 --> 00:25:34,510 som ärligt talat de flesta människor bara använda dessa dagar 575 00:25:34,510 --> 00:25:37,070 och till och med blanda ihop som varelse JavaScript självt. 576 00:25:37,070 --> 00:25:38,950 >> Och det tenderar att involvera några dollartecken 577 00:25:38,950 --> 00:25:41,350 och sökord som dokument inom parentes här. 578 00:25:41,350 --> 00:25:44,480 Men återigen, låt mig skjuta till vissa långsammare handledning nätet 579 00:25:44,480 --> 00:25:46,750 snarare än att få bundet i just syntax. 580 00:25:46,750 --> 00:25:48,630 Låt oss gå vidare till något lite svalare 581 00:25:48,630 --> 00:25:50,520 i termer av de tillämpningar av denna. 582 00:25:50,520 --> 00:25:57,730 >> Så i synnerhet, låt mig gå vidare och öppna upp det här. 583 00:25:57,730 --> 00:25:58,340 Kom igen. 584 00:25:58,340 --> 00:25:59,380 Det gå vi. 585 00:25:59,380 --> 00:26:01,500 >> Låt mig öppna upp denna bild här. 586 00:26:01,500 --> 00:26:03,450 Onödigt komplicerat ser, men det 587 00:26:03,450 --> 00:26:07,880 beskriver en teknik som kallas AJAX-- Asynchronous JavaScript and XML, där 588 00:26:07,880 --> 00:26:10,530 X för XML är faktiskt inte längre riktigt används. 589 00:26:10,530 --> 00:26:13,430 Det tenderar att använda något annars kallas JSON. 590 00:26:13,430 --> 00:26:16,560 >> Men här är hur något liknande Google Maps eller Google Earth fungerar. 591 00:26:16,560 --> 00:26:18,060 Låt oss prova detta i farten, faktiskt. 592 00:26:18,060 --> 00:26:21,590 Låt mig gå vidare och öppna upp Chrome i min webbläsare. 593 00:26:21,590 --> 00:26:26,236 >> Och låt mig gå in, säger, maps.google.com. 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 Och faktiskt, om du är gammal nog att minnas vad, 596 00:26:31,930 --> 00:26:35,600 liknande, MapQuest var som förr i tiden, och kanske de fortfarande fungerar så här. 597 00:26:35,600 --> 00:26:38,870 När du använde för att söka efter something-- 33 Oxford Street, Cambridge, Mass, 598 00:26:38,870 --> 00:26:40,650 låt oss göra this-- dig skulle faktiskt, om du 599 00:26:40,650 --> 00:26:43,000 ville flytta upp och ner, vänster och höger, 600 00:26:43,000 --> 00:26:44,920 du skulle se ut som en stor pil på toppen, och det 601 00:26:44,920 --> 00:26:46,921 skulle visa er en annan ram på kartan här uppe. 602 00:26:46,921 --> 00:26:49,753 Eller skulle du klicka vänster och du skulle gå över här, eller ytterligare ett klick 603 00:26:49,753 --> 00:26:51,000 och du skulle gå hit. 604 00:26:51,000 --> 00:26:53,000 Men i stället dessa dagar, vi naturligtvis bara 605 00:26:53,000 --> 00:26:55,970 tar för givet att vi kan gå runt Cambridge ganska snabbt 606 00:26:55,970 --> 00:26:57,550 bara genom att klicka och dra. 607 00:26:57,550 --> 00:26:59,130 Men märker att det finns en del buggar. 608 00:26:59,130 --> 00:27:02,160 >> Om jag gör det tillräckligt snabbt, vad som verkar vara fallet 609 00:27:02,160 --> 00:27:05,960 som jag drar lite för fort för att datorn ska hänga med? 610 00:27:05,960 --> 00:27:07,160 Vad ser du? 611 00:27:07,160 --> 00:27:07,660 Yeah. 612 00:27:07,660 --> 00:27:09,232 >> Publik: Pixlarna inte uppdatera. 613 00:27:09,232 --> 00:27:10,940 David J. MALAN: Den pixlarna inte uppdatera. 614 00:27:10,940 --> 00:27:12,870 Det finns actually-- och ni kunde se detta, faktiskt, 615 00:27:12,870 --> 00:27:15,360 Om du tittar på nätet och paus detta eller faktiskt saktar ner saker 616 00:27:15,360 --> 00:27:18,600 för once-- ser du att det finns kakel, torg, eller rektanglar som 617 00:27:18,600 --> 00:27:22,040 saknas i kartan tills en bråkdels sekund senare, mer data, 618 00:27:22,040 --> 00:27:24,390 fler bilder faktiskt visas på skärmen. 619 00:27:24,390 --> 00:27:29,810 Och faktum är att om vi gör detta genom att titta upp Chrome's-- låt oss säga, Chrome-- 620 00:27:29,810 --> 00:27:30,310 låt oss se. 621 00:27:30,310 --> 00:27:31,090 Vi kan inte göra det. 622 00:27:31,090 --> 00:27:31,860 >> Åh, hoppsan. 623 00:27:31,860 --> 00:27:34,761 Vi öppnar upp maps.google.com. 624 00:27:34,761 --> 00:27:36,660 Låt mig göra fönstret större igen. 625 00:27:36,660 --> 00:27:38,836 >> Gå tillbaka till 33 Oxford Street. 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 Vad var hemsidan jag var på nyligen? 628 00:27:43,760 --> 00:27:46,440 Jag hade den här, liksom, privat rant till mig själv att jag hade då snabbmeddelande 629 00:27:46,440 --> 00:27:48,470 någon vän som var på nätet som ville höra det. 630 00:27:48,470 --> 00:27:49,345 Det finns en viss webbplats. 631 00:27:49,345 --> 00:27:52,680 Jag tycker det är Comcast-- så en mycket stor amerikansk ISP. 632 00:27:52,680 --> 00:27:56,355 Du kan, när du registrerar dig för nya kabeln modemtjänst eller kabel-tv-tjänst, 633 00:27:56,355 --> 00:27:59,230 de har en form mycket rimligt där de ber dig om din adress. 634 00:27:59,230 --> 00:28:01,450 Och har denna fantastiska funktion som kallas auto klar, 635 00:28:01,450 --> 00:28:04,600 som Google, börjar det att fylla i svaret på din fråga. 636 00:28:04,600 --> 00:28:08,090 >> Problemet är, de gör komplettera automatiskt På de första saker som du skriver. 637 00:28:08,090 --> 00:28:12,890 Så om du börjar skriva i 33, det kommer att visa dig bokstavligen varje hus 638 00:28:12,890 --> 00:28:15,790 i Amerika som startar med nummer 33 639 00:28:15,790 --> 00:28:17,920 innan du fortsätter med förväntar dig att skriva mer. 640 00:28:17,920 --> 00:28:20,660 Så om du skriver 33 Oxford, då den visar dig varje gata 641 00:28:20,660 --> 00:28:24,726 i Amerika som har 33 Oxford dess namn, oavsett om staden 642 00:28:24,726 --> 00:28:25,350 att du är i. 643 00:28:25,350 --> 00:28:26,320 >> Och sedan fortsätta skriva. 644 00:28:26,320 --> 00:28:28,930 Och slutligen, realiserar det att de inte erbjuder service till ditt hem i Cambridge 645 00:28:28,930 --> 00:28:29,920 eller något liknande. 646 00:28:29,920 --> 00:28:33,410 Men poängen är, det är den mest åsnelikt genomförande av automatisk 647 00:28:33,410 --> 00:28:34,140 slutföra någonsin. 648 00:28:34,140 --> 00:28:36,400 >> Och jag kommer bara ut på denna tangent igen. 649 00:28:36,400 --> 00:28:39,040 Men det finns bra sätt att använda JavaScript och dåliga sätt. 650 00:28:39,040 --> 00:28:40,750 Och det är inte nödvändigtvis den bästa. 651 00:28:40,750 --> 00:28:46,360 >> Men poängen här, innan harang, var att öppna upp verktyg här nere 652 00:28:46,360 --> 00:28:49,480 och öppna utvecklingsverktyg, eftersom vi har uppmuntrat tidigare, 653 00:28:49,480 --> 00:28:52,840 och för att titta på nätverket Fliken som jag klickar riktigt snabbt. 654 00:28:52,840 --> 00:28:55,400 Och märker en hel drös av får förfrågningar hände. 655 00:28:55,400 --> 00:28:57,310 Allt detta hände sedan drog jag. 656 00:28:57,310 --> 00:29:00,170 >> Och mest troligt, faktiskt en hel del av dessa rader 657 00:29:00,170 --> 00:29:04,060 Nu är bilden snedstreck JPEG MIME-typer eller innehållstyper. 658 00:29:04,060 --> 00:29:07,750 Det beror på vad krom gör varje gång jag klickar och drar, klickar 659 00:29:07,750 --> 00:29:11,650 och dra, det är att inse, åh, jag behöver gå be Google för kakel 660 00:29:11,650 --> 00:29:15,080 på kartan som är här borta, snabbt ladda ner den via HTTP, 661 00:29:15,080 --> 00:29:19,550 och sedan lägga till det så kallade DOM till webbläsarna i minnesträd 662 00:29:19,550 --> 00:29:24,430 representation, så att användaren, mig, ser att uppdateras kakel. 663 00:29:24,430 --> 00:29:26,795 Och det är på grund av en teknik som kallas AJAX. 664 00:29:26,795 --> 00:29:28,920 Tillbaka i dag, det är verkligen var det så att om du 665 00:29:28,920 --> 00:29:33,050 ville ändra vad som finns på skärmen, du måste klicka upp, ner, vänster, 666 00:29:33,050 --> 00:29:33,550 höger. 667 00:29:33,550 --> 00:29:34,740 Och sedan en ny sida skulle öppna. 668 00:29:34,740 --> 00:29:36,531 Men i dessa dagar, allt är mer dynamisk. 669 00:29:36,531 --> 00:29:40,490 Det händer på det sätt vi människor skulle hoppas det faktiskt skulle interaktivt. 670 00:29:40,490 --> 00:29:43,210 Och det uppnår detta genom sätt av en teknik som kallas 671 00:29:43,210 --> 00:29:46,170 AJAX, som kanske är bäst förklaras genom ett exempel. 672 00:29:46,170 --> 00:29:49,730 Låt mig gå vidare och öppna upp en fil 673 00:29:49,730 --> 00:29:53,540 kallas quote.php i dagens distributions kod. 674 00:29:53,540 --> 00:29:56,200 >> Och låt mig göra symbol-- hoppsan. 675 00:29:56,200 --> 00:30:02,399 Låt mig göra symbol = GOOG för bara några lager. 676 00:30:02,399 --> 00:30:04,440 Eller faktiskt, låt oss göra det en från Pset GRATIS. 677 00:30:04,440 --> 00:30:05,270 Enter. 678 00:30:05,270 --> 00:30:06,580 >> Och nu märke till vad jag får tillbaka. 679 00:30:06,580 --> 00:30:09,210 Så det här är en riktigt korta PHP-fil som jag 680 00:30:09,210 --> 00:30:13,210 skrev att helt enkelt lånar kod från Pset7 s uppslagsfunktion 681 00:30:13,210 --> 00:30:17,830 och spottar ut med hjälp av denna klammerparentes och citat och kolon notation, som synes, 682 00:30:17,830 --> 00:30:22,747 den nuvarande aktie pris för företag som du passerar in via get. 683 00:30:22,747 --> 00:30:24,580 Så det här är annorlunda från de flesta av vad vi har 684 00:30:24,580 --> 00:30:26,496 görs i detta meddelande är jag bokstavligen spottar ut 685 00:30:26,496 --> 00:30:27,870 vad som ser ut som JavaScript-kod. 686 00:30:27,870 --> 00:30:30,020 >> I själva verket är detta ett JavaScript-objekt. 687 00:30:30,020 --> 00:30:34,130 Faktum är att bara för att vara mer tydlig, JavaScript Object Notation-- JSON-- 688 00:30:34,130 --> 00:30:38,330 är bara ett finare sätt att säga att du kan representera data i JavaScript mycket 689 00:30:38,330 --> 00:30:41,660 som du kan i PHP med hjälp av nyckelpar värde. 690 00:30:41,660 --> 00:30:44,270 Så om jag ville deklarera en variabel i JavaScript 691 00:30:44,270 --> 00:30:47,872 till representerar Zamyla, för instance-- en struct för Zamyla-- 692 00:30:47,872 --> 00:30:49,580 och vi ska kalla det student, denna variabel. 693 00:30:49,580 --> 00:30:53,060 Hennes ID är en, huset är Winthrop, och heter Zamyla. 694 00:30:53,060 --> 00:30:55,490 >> Men jag kan också ha en array med objekt. 695 00:30:55,490 --> 00:30:58,710 Så om jag egentligen ville ha en array i JavaScript som innehåller 696 00:30:58,710 --> 00:31:01,740 flera sådana föremål, detta tid som företräder personalen, 697 00:31:01,740 --> 00:31:04,910 Jag kanske har dessa tre bitar av kod tillbaka 698 00:31:04,910 --> 00:31:08,560 att backa backa för dessa tre tidigare anställda. 699 00:31:08,560 --> 00:31:12,201 Så syntax, pretty liknande both-- till PHP. 700 00:31:12,201 --> 00:31:13,700 Men detta är särskilt JavaScript. 701 00:31:13,700 --> 00:31:15,940 Det är objektnotation. 702 00:31:15,940 --> 00:31:17,240 Så vad är det bra för? 703 00:31:17,240 --> 00:31:21,580 >> Om jag skriver kod som spottar ut JSON-- JavaScript Object Notation-- saker som 704 00:31:21,580 --> 00:31:24,670 ser ut så här, eller saker som ser ut som Zamyla struktur, 705 00:31:24,670 --> 00:31:27,730 Jag kan faktiskt använda detta i program jag skriver. 706 00:31:27,730 --> 00:31:30,660 Låt mig gå till ajax0.html. 707 00:31:30,660 --> 00:31:33,310 Och detta too-- inte mycket trodde ges till estetik. 708 00:31:33,310 --> 00:31:34,660 Men se vad som händer. 709 00:31:34,660 --> 00:31:37,050 >> Låt mig gå vidare och skriva gratis här. 710 00:31:37,050 --> 00:31:38,490 Klicka få offert. 711 00:31:38,490 --> 00:31:41,060 Och märker URL har inte ändrats. 712 00:31:41,060 --> 00:31:47,250 Men jag fick en pop up med till synes dagens öre lager pris på $ 0,15. 713 00:31:47,250 --> 00:31:49,062 Så inte så illa. 714 00:31:49,062 --> 00:31:52,020 Men skillnaden är att på något sätt, dessa data kom tillbaka till mig direkt. 715 00:31:52,020 --> 00:31:54,250 Men låt oss ta ett steg mot något mer bekant. 716 00:31:54,250 --> 00:31:58,900 I version ett av detta, låt mig typ fri igen, klicka på Hämta citat, 717 00:31:58,900 --> 00:32:01,146 och now-- åh, det var faktiskt jQuery versionen. 718 00:32:01,146 --> 00:32:03,270 Så låt mig-- jag inte spola framåt ganska långt nog. 719 00:32:03,270 --> 00:32:05,830 Låt mig gå till version två, som är där jag ville. 720 00:32:05,830 --> 00:32:07,260 Lägg märke till vad jag har gjort här. 721 00:32:07,260 --> 00:32:10,370 Jag har en webb page-- en super enkel version av en webbsida 722 00:32:10,370 --> 00:32:14,260 du kan använda i dag med ett textfält gratis här och sedan tydligen bara 723 00:32:14,260 --> 00:32:14,880 text. 724 00:32:14,880 --> 00:32:16,860 >> Detta är inte ett formulär här, tydligen. 725 00:32:16,860 --> 00:32:19,360 Men om jag klickar på får citat, märker min webbsida 726 00:32:19,360 --> 00:32:22,760 är på väg att förändras som om jag precis fått ett nytt snabbmeddelande 727 00:32:22,760 --> 00:32:25,360 eller som om jag bara flyttade karta och behövs för att få mer information 728 00:32:25,360 --> 00:32:29,220 sätts dynamiskt till webbsidan utan URL förändras och användaren 729 00:32:29,220 --> 00:32:30,980 erfarenhet att bli avbruten. 730 00:32:30,980 --> 00:32:35,750 Ja, jag är fortfarande på exakt samma plats-- ajax2.html. 731 00:32:35,750 --> 00:32:39,080 >> Så låt oss titta bara på detta exempel och se hur detta sker. 732 00:32:39,080 --> 00:32:42,490 Låt mig gå in ajax2.html. 733 00:32:42,490 --> 00:32:44,770 Och märker formuläret först. 734 00:32:44,770 --> 00:32:47,092 >> Här nere, jag vänder av automatisk komplett. 735 00:32:47,092 --> 00:32:48,800 Ibland blir det irriterande om webbläsaren 736 00:32:48,800 --> 00:32:50,508 försöker visa dig hela din historia. 737 00:32:50,508 --> 00:32:53,450 Så du kan göra det i HTML med säger bara auto fylla ut. 738 00:32:53,450 --> 00:32:57,290 >> Jag har gett det här textfältet a symbol-- snarare, ett ID av symbolen. 739 00:32:57,290 --> 00:32:58,977 Och nu är det en intressant funktion. 740 00:32:58,977 --> 00:33:01,310 Vi har inte pratat om span, men du kan tänka på det 741 00:33:01,310 --> 00:33:03,177 som ett stycke tagg eller div tagg. 742 00:33:03,177 --> 00:33:05,010 Det är vad som kallas en in-line-element, som 743 00:33:05,010 --> 00:33:07,415 innebär att du inte kommer att få ett stycke bryta ovanför och nedanför den. 744 00:33:07,415 --> 00:33:11,530 Det kommer bara att stanna i-line utan slå motsvarande anger. 745 00:33:11,530 --> 00:33:17,980 Så jag har gett denna bit av HTML som skall fastställas en unik identifierare 746 00:33:17,980 --> 00:33:20,130 att jag godtyckligt kallas pris. 747 00:33:20,130 --> 00:33:21,560 Och jag har en Skicka-knapp. 748 00:33:21,560 --> 00:33:25,420 >> För nu upp här-- och det är faktiskt super fantastiskt hur lite kod 749 00:33:25,420 --> 00:33:27,660 Du kan skriva att göra relativt snyggt saker-- 750 00:33:27,660 --> 00:33:31,800 märke till vad jag har gjort upp här om jag rulla upp till chefen för denna sida. 751 00:33:31,800 --> 00:33:34,970 Jag har lagt till först i mitt huvud en script-tagg 752 00:33:34,970 --> 00:33:37,410 som faktiskt refererar till en JavaScript fil någon annanstans. 753 00:33:37,410 --> 00:33:39,702 Detta är från den organisation som skriver jQuery, 754 00:33:39,702 --> 00:33:42,660 och detta är bara ger dig det senaste version av deras jQuery bibliotek. 755 00:33:42,660 --> 00:33:46,305 >> Så det här är ungefär som skarp inkludera i C eller kräva i PHP. 756 00:33:46,305 --> 00:33:48,900 Du använder skripttagg med ett källattribut. 757 00:33:48,900 --> 00:33:52,030 Men nu min egen kod är kommer att vara rätt i här. 758 00:33:52,030 --> 00:33:54,170 >> Märker jag har en funktion som kallas Citat. 759 00:33:54,170 --> 00:33:56,180 Och det ser lite kryptiskt vid första anblicken. 760 00:33:56,180 --> 00:33:57,305 Men låt oss retas här isär. 761 00:33:57,305 --> 00:33:59,090 Ge mig en variabel som kallas URL. 762 00:33:59,090 --> 00:34:01,390 Tilldela det bokstavligen denna sträng. 763 00:34:01,390 --> 00:34:04,530 Så, enkla citationstecken, citationstecken i JavaScript ger mig bara en sträng. 764 00:34:04,530 --> 00:34:06,900 Vad gör plus göra? 765 00:34:06,900 --> 00:34:08,199 Sammanfogning. 766 00:34:08,199 --> 00:34:12,610 >> Så detta är nu jQuery syntax vilket tar lite tid att vänja sig. 767 00:34:12,610 --> 00:34:18,310 Men detta betyder bara hämta mig DOM nod vars unika identifierare är symbol. 768 00:34:18,310 --> 00:34:21,929 Hashtaggen det betyder unik identifierare symbol. 769 00:34:21,929 --> 00:34:24,929 >> Dollartecken i parentes bara menar, linda här 770 00:34:24,929 --> 00:34:28,510 i jQuery ett slags hemlig sås så du får fler funktioner. 771 00:34:28,510 --> 00:34:31,880 Och sedan .val är tydligen en funktion, eller som vi säger nu, 772 00:34:31,880 --> 00:34:35,219 en metod insidan av denna nod som bara ger dig värde. 773 00:34:35,219 --> 00:34:38,896 Så kort sagt, ful och förvirrande som det ser ut vid första anblicken, 774 00:34:38,896 --> 00:34:42,020 Detta innebär bara få med användaren skrivit i, uttryckte det i slutet av strängen 775 00:34:42,020 --> 00:34:42,880 genom konkatenering den. 776 00:34:42,880 --> 00:34:43,739 Det är allt. 777 00:34:43,739 --> 00:34:46,070 >> Så nu, tre sista raderna. 778 00:34:46,070 --> 00:34:48,690 Du kan trycka in en hel del funktionalitet av tre rader. 779 00:34:48,690 --> 00:34:52,199 Denna dollartecken, som en åt sidan, är bara ett smeknamn 780 00:34:52,199 --> 00:34:55,800 för en särskild global variabel kallas rally jQuery. 781 00:34:55,800 --> 00:34:57,060 >> Dollartecken ser bara cool. 782 00:34:57,060 --> 00:35:00,080 Så jQuery samhället bara typ av använde det som sitt specialsymbol. 783 00:35:00,080 --> 00:35:02,470 Det betyder inte vad det innebär i PHP. 784 00:35:02,470 --> 00:35:06,356 I JavaScript är dollartecken precis som en bokstav i alfabetet 785 00:35:06,356 --> 00:35:07,480 eller ett nummer för en variabel. 786 00:35:07,480 --> 00:35:09,000 >> Du kan bara ha det som namnet. 787 00:35:09,000 --> 00:35:09,770 Bara ser cool. 788 00:35:09,770 --> 00:35:11,890 Så samhället antagit det som ett smeknamn 789 00:35:11,890 --> 00:35:13,390 för sitt eget bibliotek som heter jQuery. 790 00:35:13,390 --> 00:35:15,060 >> Och det är super populär. 791 00:35:15,060 --> 00:35:17,620 Så får JSON är exakt. 792 00:35:17,620 --> 00:35:19,920 Det är en funktion som folks vid jQuery skrev 793 00:35:19,920 --> 00:35:23,340 som får JSON från en server-- JavaScript Object Notation. 794 00:35:23,340 --> 00:35:25,680 Från vilken webbadress går det för att få den informationen? 795 00:35:25,680 --> 00:35:27,790 Tydligen från denna URL här. 796 00:35:27,790 --> 00:35:31,180 >> Och vad ska webbläsaren göra som snart den får tillbaka det här svaret? 797 00:35:31,180 --> 00:35:36,500 Och detta är den magiska AJAX, så att speak-- Asynchronous JavaScript XML. 798 00:35:36,500 --> 00:35:41,320 Det är svårt att se en sådan enkelt exempel som vi hade här. 799 00:35:41,320 --> 00:35:44,730 >> Men detta var asynkrona in den meningen att min kod när 800 00:35:44,730 --> 00:35:48,530 exekveras skickade ett meddelande till server för att hämta mig lite JSON. 801 00:35:48,530 --> 00:35:51,340 Och det hände supersnabb att jag fick ett svar. 802 00:35:51,340 --> 00:35:55,130 Men vad som är intressant är att detta kodrad inte hänga min dator. 803 00:35:55,130 --> 00:35:56,550 >> Jag såg inte en snurrande ikon. 804 00:35:56,550 --> 00:35:59,200 Jag ville inte förlora förmåga att röra musen. 805 00:35:59,200 --> 00:36:01,340 Min webbläsare var faktiskt helt bra. 806 00:36:01,340 --> 00:36:06,290 >> Eftersom det sätt JavaScript hanterar svar från servern är följande. 807 00:36:06,290 --> 00:36:09,740 Du registrerar vad du skulle vilja kalla en callback-funktion, vilket 808 00:36:09,740 --> 00:36:12,830 betyder bara, hey, Javascript. 809 00:36:12,830 --> 00:36:16,100 Så fort som servern svarar med JSON, 810 00:36:16,100 --> 00:36:18,750 ring denna anonym funktion. 811 00:36:18,750 --> 00:36:23,910 >> Och vänligen passerat in i denna funktion oavsett sträng servern spotta ut 812 00:36:23,910 --> 00:36:26,080 som ett argument som kallas data. 813 00:36:26,080 --> 00:36:28,360 Så med andra, ord, om Jag montering dynamiskt 814 00:36:28,360 --> 00:36:33,370 en URL quote.php passerar i detta symbol som GRATIS eller GOOG eller whatnot, 815 00:36:33,370 --> 00:36:36,830 Jag sedan berättar JavaScript hämta den webbadressen. 816 00:36:36,830 --> 00:36:39,080 Kom ihåg att webbläsaren kommer att återvända något 817 00:36:39,080 --> 00:36:42,680 som ser ut som vi såg earlier-- detta. 818 00:36:42,680 --> 00:36:45,940 >> Och vad det andra argumentet här för att få JSON säger 819 00:36:45,940 --> 00:36:48,450 är kalla denna funktion när servern får tillbaka 820 00:36:48,450 --> 00:36:52,440 oavsett om det är 10 millisekunder från och med nu, eller 10 sekunder från nu. 821 00:36:52,440 --> 00:36:55,840 Och så fort du gör, lägg priset till sidan. 822 00:36:55,840 --> 00:36:58,030 Denna syntax här bara betyder hämta noden 823 00:36:58,030 --> 00:37:01,940 från trädet vars unika identifierare är price-- som spänner vi såg tidigare. 824 00:37:01,940 --> 00:37:04,320 >> Denna metod kallas HTML bara säger, gå ersätter 825 00:37:04,320 --> 00:37:08,770 HTML som är där med data.price. 826 00:37:08,770 --> 00:37:10,200 Vad är data.price? 827 00:37:10,200 --> 00:37:12,850 Tja, webbläsaren, minns, visade mig komma tillbaka. 828 00:37:12,850 --> 00:37:14,540 Så det här är data. 829 00:37:14,540 --> 00:37:18,100 >> Och så det är lite kryptiskt att se kommatecken här. 830 00:37:18,100 --> 00:37:19,350 Men i själva verket, låt mig göra det här. 831 00:37:19,350 --> 00:37:22,890 Låt mig bara klistra in den här riktigt snabbt i gedit 832 00:37:22,890 --> 00:37:27,240 och visa denna som vi visade Zamyla struktur tidigare. 833 00:37:27,240 --> 00:37:31,610 >> Vad servern skickar tillbaka en lite objekt som ser ut så här. 834 00:37:31,610 --> 00:37:37,140 Och så data.price är bara ge mig 0,1515. 835 00:37:37,140 --> 00:37:39,310 Så mycket rörliga delar här på en gång. 836 00:37:39,310 --> 00:37:41,860 >> Men de viktigaste hämtställen är att vi har denna förmåga 837 00:37:41,860 --> 00:37:44,600 att göra ytterligare HTTP förfrågningar med hjälp av JavaScript 838 00:37:44,600 --> 00:37:46,090 utan att behöva ladda om sidan. 839 00:37:46,090 --> 00:37:49,580 Och då kan vi faktiskt ändra webbsidan i farten. 840 00:37:49,580 --> 00:37:51,850 Och det visar sig att JavaScript och andra språk 841 00:37:51,850 --> 00:37:54,510 kan användas nu inte bara mutera webbsidor, 842 00:37:54,510 --> 00:37:57,960 utan att faktiskt skriva programvara i en verklig dator, 843 00:37:57,960 --> 00:38:00,240 inte bara begränsas till Chrome eller liknande. 844 00:38:00,240 --> 00:38:03,530 >> Faktum if-- Colton, skulle du vilja ansluta oss tillbaka upp hit 845 00:38:03,530 --> 00:38:06,100 med din lab-kod och Chang också? 846 00:38:06,100 --> 00:38:09,140 Låt oss gå vidare, efter att ha talat om anonyma funktioner och callbacks 847 00:38:09,140 --> 00:38:13,090 och verkligen utmana ödet här med en live-demo med blödning 848 00:38:13,090 --> 00:38:16,480 senaste tekniken, en av dessa Elite Motion enheter. 849 00:38:16,480 --> 00:38:18,940 Nu, denna enhet, återkallelse, är en liten USB-enhet 850 00:38:18,940 --> 00:38:25,620 samt that-- det är beautiful-- som sedan ansluts till USB-portarna. 851 00:38:25,620 --> 00:38:29,120 >> Och då det ger input i form av mänskliga gester 852 00:38:29,120 --> 00:38:32,560 genom att upptäcka med hjälp av infraröda strålar, huvudsak, rörelser från din arm. 853 00:38:32,560 --> 00:38:35,150 Så medan vad Maria försökte innan var muskulös, 854 00:38:35,150 --> 00:38:39,000 faktiskt känner vad som förändras armen, är det infraröda baserad. 855 00:38:39,000 --> 00:38:44,390 Så det ser för transporter inom den typ av sfär av en fot eller så 856 00:38:44,390 --> 00:38:46,190 av själva enheten. 857 00:38:46,190 --> 00:38:48,950 >> Så varför tar jag inte ett hugg på det första? 858 00:38:48,950 --> 00:38:53,100 Och låt oss gå vidare och kasta upp dig på overhead här. 859 00:38:53,100 --> 00:38:56,250 Så låt oss sätta Colton bärbara dator här uppe. 860 00:38:56,250 --> 00:38:58,360 Vi har Andreas på TV. 861 00:38:58,360 --> 00:39:00,160 Och vad vill du att jag ska göra först? 862 00:39:00,160 --> 00:39:02,409 >> COLTON: Gå vidare och bara händerna över den här killen 863 00:39:02,409 --> 00:39:04,430 och du kommer att se några fantastiska glitter. 864 00:39:04,430 --> 00:39:07,230 >> DAVID J. MALAN: Very nice. 865 00:39:07,230 --> 00:39:11,110 Allt detta händer i realtid. 866 00:39:11,110 --> 00:39:11,889 OK. 867 00:39:11,889 --> 00:39:12,680 Okej, och Japp. 868 00:39:12,680 --> 00:39:14,119 Så trevligt. 869 00:39:14,119 --> 00:39:15,410 Okej, vad mer kan vi göra? 870 00:39:15,410 --> 00:39:17,900 >> COLTON: Gå till nästa skärm och se. 871 00:39:17,900 --> 00:39:19,136 >> DAVID J. MALAN: Okej. 872 00:39:19,136 --> 00:39:21,780 >> COLTON: Ett roligt litet spel där du får göra robotar. 873 00:39:21,780 --> 00:39:24,738 >> DAVID J. MALAN: Okej, så detta är falska händer visar mig vad jag ska göra. 874 00:39:24,738 --> 00:39:27,920 COLTON: Ja Så sätt igång och ta ett av blocken 875 00:39:27,920 --> 00:39:30,637 och lägga den på toppen av det robotens kropp. 876 00:39:30,637 --> 00:39:32,137 DAVID J. MALAN: Åh, det är min hand. 877 00:39:32,137 --> 00:39:34,000 Oh. 878 00:39:34,000 --> 00:39:34,780 OK, bedårande. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Vänta lite, OK. 881 00:39:38,650 --> 00:39:41,320 Det gå vi. 882 00:39:41,320 --> 00:39:43,590 >> COLTON: Jag gjorde en på olyckan. 883 00:39:43,590 --> 00:39:45,423 >> DAVID J. MALAN: OK, jag ska få den här killen. 884 00:39:45,423 --> 00:39:45,923 Fan också! 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 När vi övade denna sista natten, vet du vad det decentraliserade in? 887 00:39:51,550 --> 00:39:54,285 >> Gillar du. 888 00:39:54,285 --> 00:39:55,490 OK. 889 00:39:55,490 --> 00:39:55,990 Nästa man? 890 00:39:55,990 --> 00:39:56,860 >> COLTON: Visst. 891 00:39:56,860 --> 00:39:58,818 >> DAVID J. MALAN: Okej, och det finns en tredje. 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 Okej. 894 00:40:01,674 --> 00:40:03,215 COLTON: Och i den här, får du att-- 895 00:40:03,215 --> 00:40:04,923 DAVID J. MALAN: Åh, den här är vacker. 896 00:40:04,923 --> 00:40:06,650 COLTON: --yeah, plocka isär denna blomma. 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 Nej? 900 00:40:11,670 --> 00:40:14,515 Missade. 901 00:40:14,515 --> 00:40:15,570 >> COLTON: Åh, där du går. 902 00:40:15,570 --> 00:40:18,680 >> DAVID J. MALAN: Ah, Titta. 903 00:40:18,680 --> 00:40:19,830 Mycket trevligt. 904 00:40:19,830 --> 00:40:22,470 Tja, varför inte "vi tar ut en volontär här 905 00:40:22,470 --> 00:40:24,180 som vill komma vidare upp. 906 00:40:24,180 --> 00:40:27,500 Vad sägs om rätt där i det gröna, är det? 907 00:40:27,500 --> 00:40:30,540 >> Okej, och låt oss have-- istället för att göra det, en del av er 908 00:40:30,540 --> 00:40:34,590 kanske vet detta spel här-- skära av repet, kanske? 909 00:40:34,590 --> 00:40:35,100 Låt oss se. 910 00:40:35,100 --> 00:40:37,320 Vi har våra glasögon på över här? 911 00:40:37,320 --> 00:40:38,625 >> OK. 912 00:40:38,625 --> 00:40:39,270 Tack. 913 00:40:39,270 --> 00:40:39,380 Vad heter du? 914 00:40:39,380 --> 00:40:40,350 >> PUBLIK: Laura. 915 00:40:40,350 --> 00:40:41,266 >> DAVID J. MALAN: Laura? 916 00:40:41,266 --> 00:40:42,120 Trevligt att se. 917 00:40:42,120 --> 00:40:45,600 Om du inte har något emot att sätta Google Glass över dina glasögon. 918 00:40:45,600 --> 00:40:46,970 Detta är Colton. 919 00:40:46,970 --> 00:40:47,650 >> COLTON: Hej. 920 00:40:47,650 --> 00:40:48,140 TREVLIGT ATT TRÄFFAS. 921 00:40:48,140 --> 00:40:49,600 >> DAVID J. MALAN: OK, kom igen runt. 922 00:40:49,600 --> 00:40:52,516 Okej, så vad du ska göra här, efter att ha spelat det här förut, 923 00:40:52,516 --> 00:40:55,650 läggs handen över Leap Motion här. 924 00:40:55,650 --> 00:40:57,210 Och nu din Pilen skall flytta. 925 00:40:57,210 --> 00:40:57,710 Åh, nej. 926 00:40:57,710 --> 00:40:58,066 >> PUBLIK: Nej. 927 00:40:58,066 --> 00:40:58,780 >> David J. MALAN: Vi vill inte sluta än. 928 00:40:58,780 --> 00:40:59,280 OK, vänta. 929 00:40:59,280 --> 00:41:01,200 Här borta. 930 00:41:01,200 --> 00:41:03,530 Så märker du håller din finger över något, 931 00:41:03,530 --> 00:41:06,750 musen börjar gå grönt, vilket är hur du klickar. 932 00:41:06,750 --> 00:41:08,980 >> Så sväva över Play. 933 00:41:08,980 --> 00:41:10,970 Och bara ett finger är bra. 934 00:41:10,970 --> 00:41:13,869 Och nu klicka på den lilla grön kille till vänster. 935 00:41:13,869 --> 00:41:15,410 Och nu håller tills det fyller grönt. 936 00:41:15,410 --> 00:41:15,640 Bra. 937 00:41:15,640 --> 00:41:16,990 Nu, liksom, nivå ett där uppe. 938 00:41:16,990 --> 00:41:20,190 >> PUBLIK: Ja, vi vill ha nivå ett, här. 939 00:41:20,190 --> 00:41:21,660 >> DAVID J. MALAN: Good. 940 00:41:21,660 --> 00:41:25,500 OK, så allt du behöver göra är att skära av repet. 941 00:41:25,500 --> 00:41:28,240 Markören är den vita där nere. 942 00:41:28,240 --> 00:41:28,880 >> Mycket trevligt. 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 Okej, det handlar om att få hårdare. 945 00:41:32,790 --> 00:41:34,800 Så håll fingret under de kommande nu. 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 Bra. 948 00:41:39,030 --> 00:41:39,999 Den här är svårt. 949 00:41:39,999 --> 00:41:40,966 >> PUBLIK: Åh crap. 950 00:41:40,966 --> 00:41:41,466 OK. 951 00:41:41,466 --> 00:41:42,466 Den vill gå den vägen. 952 00:41:42,466 --> 00:41:44,890 Oh crap, that-- 953 00:41:44,890 --> 00:41:47,120 >> DAVID J. MALAN: Ja. 954 00:41:47,120 --> 00:41:50,700 Sekundärt mål är att få alla stjärnor. 955 00:41:50,700 --> 00:41:53,920 Okej, nästa. 956 00:41:53,920 --> 00:41:57,504 >> Låt oss se om du kan få den här tredje. 957 00:41:57,504 --> 00:41:58,004 Bra. 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 OK, gå dit. 960 00:42:06,840 --> 00:42:08,850 >> Visst. 961 00:42:08,850 --> 00:42:11,230 Åh, mycket trevligt. 962 00:42:11,230 --> 00:42:11,930 Okej. 963 00:42:11,930 --> 00:42:13,534 >> Så varför inte vi ajournera här idag? 964 00:42:13,534 --> 00:42:15,200 Låt någon komma vidare upp som vill spela. 965 00:42:15,200 --> 00:42:16,880 Tack så mycket för Laura vår volontär. 966 00:42:16,880 --> 00:42:18,730 Och vi kommer att se dig på måndag. 967 00:42:18,730 --> 00:42:21,190 >> PUBLIK: Du vill förmodligen dessa tillbaka. 968 00:42:21,190 --> 00:42:23,640 >> TALARE 2: Vid nästa CS50-- 969 00:42:23,640 --> 00:42:35,222