1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J. MALAN: All right, så dette her er Myo arm 3 00:00:41,880 --> 00:00:44,450 band, et par som vi har for CS50 endelige prosjekter. 4 00:00:44,450 --> 00:00:47,533 Og det var en demonstrasjon vi i kø deg opp på forhånd hvor essensielt 5 00:00:47,533 --> 00:00:51,120 dette ganske stram arm bandet opp her lytter til dine muskulære bevegelser 6 00:00:51,120 --> 00:00:54,280 som deretter kartlagt i programvare til Colton laptop over her som 7 00:00:54,280 --> 00:00:57,230 hadde iTunes og at sang allerede i kø. 8 00:00:57,230 --> 00:01:00,270 Snarere enn meg demoing dette, Colton har vært i laboratoriet 9 00:01:00,270 --> 00:01:04,129 klart hele uken å få en demonstrasjon klar for en modig frivillig. 10 00:01:04,129 --> 00:01:07,430 Hvis noen ønsker å komme på opp-- så hånden først. 11 00:01:07,430 --> 00:01:09,540 Kom opp. 12 00:01:09,540 --> 00:01:12,530 >> OK. 13 00:01:12,530 --> 00:01:13,886 Og hva er ditt navn? 14 00:01:13,886 --> 00:01:14,800 >> PUBLIKUM: Uh, Maria. 15 00:01:14,800 --> 00:01:16,550 >> DAVID J. MALAN: Maria, hyggelig å se deg. 16 00:01:16,550 --> 00:01:17,310 Kom over her. 17 00:01:17,310 --> 00:01:19,550 La meg introdusere deg til Colton. 18 00:01:19,550 --> 00:01:21,290 Colton, dette er Maria. 19 00:01:21,290 --> 00:01:23,050 >> Colton: Hei, hyggelig å møte deg. 20 00:01:23,050 --> 00:01:24,330 >> DAVID J. MALAN: All rett, så steg en, vi er 21 00:01:24,330 --> 00:01:26,204 nødt til du putter dette videre til din underarm 22 00:01:26,204 --> 00:01:29,280 slik at det er ganske tett opp nær albuen. 23 00:01:29,280 --> 00:01:31,940 Og i mellomtiden, la oss ha sette på vår Google Glass 24 00:01:31,940 --> 00:01:33,720 og vi vil blande teknologi i dag. 25 00:01:33,720 --> 00:01:36,340 >> Colton: Først må vi koble dette til ting. 26 00:01:36,340 --> 00:01:37,170 >> DAVID J. MALAN: OK. 27 00:01:37,170 --> 00:01:39,795 Egentlig, la oss sette armen som nær denne som mulig kabelen 28 00:01:39,795 --> 00:01:41,160 slik at vi kan først synkronisere den opp. 29 00:01:41,160 --> 00:01:42,740 >> Colton: La oss gjøre dette. 30 00:01:42,740 --> 00:01:46,500 >> DAVID J. MALAN: Og i mellomtiden, så at alle kan få en nærmere blikk, 31 00:01:46,500 --> 00:01:50,290 vi vil kaste Andrew kamera opp på skjermen der. 32 00:01:50,290 --> 00:01:54,460 Så vi har en USB-kabel som er blir koblet til Maria på strak arm. 33 00:01:54,460 --> 00:02:00,230 Og la meg kaste Colton skjerm opp på projektoren neste. 34 00:02:00,230 --> 00:02:06,000 >> Så Colton registrerer enheten nå som en Myo koblet til denne kabelen. 35 00:02:06,000 --> 00:02:08,060 Og hva nå Marias kommer til å gjøre et øyeblikk 36 00:02:08,060 --> 00:02:10,120 er faktisk gå gjennom trinnene kalibrerings 37 00:02:10,120 --> 00:02:12,830 og lære programvaren hvordan hennes musklene svarer 38 00:02:12,830 --> 00:02:16,070 når hun gjøre visse forhåndsdefinerte gestures at programvaren forstår. 39 00:02:16,070 --> 00:02:17,910 Hvis du ønsker å gå i foran skjermen. 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 OK, fortsette å prøve. 42 00:02:30,090 --> 00:02:31,860 >> Colton: Gå som dette. 43 00:02:31,860 --> 00:02:32,970 Og sånn. 44 00:02:32,970 --> 00:02:34,563 Og helt til høyre. 45 00:02:34,563 --> 00:02:35,922 Gå tilbake. 46 00:02:35,922 --> 00:02:37,740 >> DAVID J. MALAN: OK. 47 00:02:37,740 --> 00:02:38,960 Annet perspektiv. 48 00:02:38,960 --> 00:02:39,620 Det er ikke deg. 49 00:02:39,620 --> 00:02:40,350 Det er oss. 50 00:02:40,350 --> 00:02:41,749 >> MARIA: OK. 51 00:02:41,749 --> 00:02:42,540 DAVID J. MALAN: Nei. 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 La oss flytte den høyere opp, så det er nærmere albuen, eller enda strammere. 54 00:02:51,540 --> 00:02:52,680 OK. 55 00:02:52,680 --> 00:02:53,270 >> Here we go. 56 00:02:53,270 --> 00:02:56,780 Dette ville være et godt tidspunkt for CS52X. 57 00:02:56,780 --> 00:02:57,670 Det vi går. 58 00:02:57,670 --> 00:02:58,760 >> Veldig hyggelig. 59 00:02:58,760 --> 00:03:01,170 OK. 60 00:03:01,170 --> 00:03:02,790 Tommel til Pinky. 61 00:03:02,790 --> 00:03:03,380 >> Veldig hyggelig. 62 00:03:03,380 --> 00:03:05,140 Spre fingrene. 63 00:03:05,140 --> 00:03:06,240 Good. 64 00:03:06,240 --> 00:03:06,910 Wave rett. 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 Det er merkelig å vise du med venstre hand-- 67 00:03:17,010 --> 00:03:19,665 >> Colton: Ja, det er merkelig. 68 00:03:19,665 --> 00:03:21,790 DAVID J. MALAN: Wave til høyre og gå videre. 69 00:03:21,790 --> 00:03:22,998 Spol frem til å hoppe over eller ved siden. 70 00:03:22,998 --> 00:03:25,020 Det er OK Wave rett. 71 00:03:25,020 --> 00:03:26,650 >> MARIA: Jeg don't-- vente. 72 00:03:26,650 --> 00:03:28,430 >> DAVID J. MALAN: Trenger du hjelp? 73 00:03:28,430 --> 00:03:30,027 >> Colton: Så du kommer som dette. 74 00:03:30,027 --> 00:03:31,860 MARIA: Det er å snu andre ting, skjønt. 75 00:03:31,860 --> 00:03:32,390 Colton: Det er det. 76 00:03:32,390 --> 00:03:34,250 DAVID J. MALAN: Ja jeg vet ikke hvorfor det viser deg en leftie. 77 00:03:34,250 --> 00:03:36,458 Colton: Hvorfor ikke try-- bare prøve å gå som dette. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J. MALAN: Nei? 80 00:03:40,090 --> 00:03:42,580 Kanskje kommer armen ut litt rettere 81 00:03:42,580 --> 00:03:46,070 og gjøre det mer brå som dette. 82 00:03:46,070 --> 00:03:48,176 Ja, OK, kom igjen. 83 00:03:48,176 --> 00:03:49,670 >> MARIA: Jeg beklager. 84 00:03:49,670 --> 00:03:51,170 DAVID J. MALAN: Det er ikke din feil. 85 00:03:51,170 --> 00:03:53,018 Colton: Det er greit. 86 00:03:53,018 --> 00:03:55,430 DAVID J. MALAN: All Right. 87 00:03:55,430 --> 00:03:56,220 Samt-- 88 00:03:56,220 --> 00:03:57,620 >> MARIA: Skal vi hoppe over dette, da? 89 00:03:57,620 --> 00:03:59,620 DAVID J. MALAN: Ja, la oss la deg av kroken. 90 00:03:59,620 --> 00:04:03,130 Så hvis noen ønsker å gjøre en avsluttende prosjekt ved hjelp av denne cutting edge 91 00:04:03,130 --> 00:04:07,707 maskinvare, skjønner det kan bare ta litt tid å bli vant til. 92 00:04:07,707 --> 00:04:10,290 Og dette-- realiteten er dette er faktisk veldig blødning kanten. 93 00:04:10,290 --> 00:04:12,040 >> Dette er det som kalles utviklersettet, som 94 00:04:12,040 --> 00:04:14,956 er ment å være i hovedsak en pre-release slik at folk kan gjøre akkurat 95 00:04:14,956 --> 00:04:18,690 dette-- kjempe med det, figur ut hvordan folks kropper fungerer 96 00:04:18,690 --> 00:04:19,980 med teknologien. 97 00:04:19,980 --> 00:04:21,750 Så hvis du vil etterpå, etter en forelesning, 98 00:04:21,750 --> 00:04:23,750 Vi kan la deg komme og ta en annen stikke på det. 99 00:04:23,750 --> 00:04:26,970 Men ellers, en runde med applaus, hvis vi kunne, for Maria for å komme videre opp. 100 00:04:26,970 --> 00:04:28,770 >> MARIA: Takk. 101 00:04:28,770 --> 00:04:30,390 >> DAVID J. MALAN: Takk. 102 00:04:30,390 --> 00:04:34,945 Vi vil henge seg på dette, men vi vil gi you-- hva med en stress ball her? 103 00:04:34,945 --> 00:04:38,620 Oh, og-- if-- ja, takk. 104 00:04:38,620 --> 00:04:39,715 OK. 105 00:04:39,715 --> 00:04:45,750 Så for den nysgjerrige, hvis du var ukjent med godt valg 106 00:04:45,750 --> 00:04:47,670 at vi har gjort det tidligere, en fantastisk TV 107 00:04:47,670 --> 00:04:50,210 viser at du bør absolutt være binge-watching på Netflix 108 00:04:50,210 --> 00:04:51,110 er denne her. 109 00:04:51,110 --> 00:04:54,472 >> SPEAKER 1: Mine damer og herrer, en magiker ved navn Josh. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J. MALAN: Og tilsynelatende er det en ting å tekst meg under forelesning nå. 112 00:05:08,050 --> 00:05:11,190 Jeg blir fortalt at Maria hadde bursdag i går. 113 00:05:11,190 --> 00:05:14,095 Så gratulerer med dagen fra CS50 til Maria også. 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> Så du kanskje har lest i siste måned at dette herrene her, Steve 116 00:05:22,090 --> 00:05:25,260 Ballmer, som faktisk var klasse av 1977 ved høgskolen, 117 00:05:25,260 --> 00:05:27,170 nylig pensjonert for Microsoft. 118 00:05:27,170 --> 00:05:29,620 Han var en undervisning her, deretter et par år senere 119 00:05:29,620 --> 00:05:31,910 befant seg på Stanford Business School 120 00:05:31,910 --> 00:05:34,160 da han fikk en telefon ringe fra en venn av ham som 121 00:05:34,160 --> 00:05:36,516 hadde levd nede i gangen fra ham her på Harvard. 122 00:05:36,516 --> 00:05:38,640 Navnet på vennen var Bill Gates, og på den tiden, 123 00:05:38,640 --> 00:05:42,700 han prøvde å rekruttere Steve å være den første bedriften person, egentlig, 124 00:05:42,700 --> 00:05:45,720 på et lite selskap nevne Microsoft. 125 00:05:45,720 --> 00:05:48,960 >> En lang historie kort, Steve ble til slutt vunnet over, 126 00:05:48,960 --> 00:05:52,130 sluttet Microsoft når de hadde bare 30 ansatte. 127 00:05:52,130 --> 00:05:54,300 Og etter den tid han pensjonert ganske nylig, 128 00:05:54,300 --> 00:05:58,100 Selskapet hadde 100.000 ansatte i løpet av de siste årene. 129 00:05:58,100 --> 00:06:01,171 Og så et nettsted kjent som The Verge utarbeidet denne hyllesten på video 130 00:06:01,171 --> 00:06:02,920 at vi trodde vi skulle delt som gir deg 131 00:06:02,920 --> 00:06:08,380 en følelse av hvor mye energi Steve bringer til en presentasjon han gir. 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [VIDEO PLAYBACK] 134 00:06:12,550 --> 00:06:16,220 -Microsoft Er som et fjerde barn. 135 00:06:16,220 --> 00:06:18,260 Barn gjør forlate huset. 136 00:06:18,260 --> 00:06:21,875 I dette tilfellet, antar jeg Jeg forlater huset. 137 00:06:21,875 --> 00:06:23,270 Hei Bill, whazzap? 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap? 139 00:06:24,200 --> 00:06:25,320 >> -Hei, Wazzap? 140 00:06:25,320 --> 00:06:28,590 Vi har fått en enorm mulighet. 141 00:06:28,590 --> 00:06:30,210 Og Bill ga oss denne muligheten. 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 Jeg vil takke Bill for det. 144 00:06:36,770 --> 00:06:39,630 Jeg vil du skal også. 145 00:06:39,630 --> 00:06:42,500 Innovasjonstakten ikke kommer til å avta. 146 00:06:42,500 --> 00:06:45,140 >> Det kommer til å bli raskere og raskere. 147 00:06:45,140 --> 00:06:50,165 Det kan være noen konkurrenter som dessverre eliminert! 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> Jeg elsker dette selskapet. 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 Jeg er en PC, og jeg elsker dette selskapet 153 00:07:08,250 --> 00:07:13,090 >> Utviklere, utviklere, utviklere, utviklere, utviklere, utviklere, 154 00:07:13,090 --> 00:07:14,560 utviklere, utviklere. 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 Webutviklere! 158 00:07:19,950 --> 00:07:21,420 >> Webutviklere! 159 00:07:21,420 --> 00:07:22,890 Webutviklere! 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 Lytt til hva annet du får uten ekstra kostnad! 162 00:07:28,770 --> 00:07:31,960 >> Den MS-DOS Executive, en avtale kalender, et kort haug, en notatblokk, 163 00:07:31,960 --> 00:07:33,750 en klokke, et kontrollpanel. 164 00:07:33,750 --> 00:07:35,461 Og, kan du tro det? 165 00:07:35,461 --> 00:07:35,960 Reversie! 166 00:07:35,960 --> 00:07:37,270 >> Brenne dem på CD! 167 00:07:37,270 --> 00:07:38,660 Legge dem til MSN! 168 00:07:38,660 --> 00:07:40,422 Du sende dem til venner! 169 00:07:40,422 --> 00:07:41,790 >> Alle med ett klikk! 170 00:07:41,790 --> 00:07:48,670 En Microsoft, en strategi, en team-- fokusert, disiplinert, profesjonell, 171 00:07:48,670 --> 00:07:50,610 og ekspert i alt vi gjør. 172 00:07:50,610 --> 00:07:52,670 La meg bruke en linje fra en gammel film. 173 00:07:52,670 --> 00:07:54,810 >> Relasjoner er som haier. 174 00:07:54,810 --> 00:07:57,480 De beveger seg fremover eller de dør. 175 00:07:57,480 --> 00:08:01,470 Jeg tror faktisk tech selskaper er de samme. 176 00:08:01,470 --> 00:08:04,801 >> [END VIDEO PLAYBACK] 177 00:08:04,801 --> 00:08:08,050 DAVID J. MALAN: Så vi er så glad for å annonsere at Steve vil bli med oss 178 00:08:08,050 --> 00:08:13,320 her i CS50 neste onsdag på vanlig sted og tid her. 179 00:08:13,320 --> 00:08:14,750 Plass vil trolig være begrenset. 180 00:08:14,750 --> 00:08:19,650 Og så å bli med oss ​​i person, kan hodet i dag eller kort tid etterpå 181 00:08:19,650 --> 00:08:22,600 å cs50.harvard.edu/register. 182 00:08:22,600 --> 00:08:25,780 >> Og vi vil følge opp med Tirsdag bekrefter flekker. 183 00:08:25,780 --> 00:08:29,900 Ser frem til at neste Onsdag under forelesning i CS50. 184 00:08:29,900 --> 00:08:33,706 Nå, i andre nyheter, jeg skjedd å kommer over dette i The Crimson bare 185 00:08:33,706 --> 00:08:34,289 den andre dagen. 186 00:08:34,289 --> 00:08:37,370 >> Det viser seg at en av CS50 ansatte og minst en av CS50 studenter 187 00:08:37,370 --> 00:08:40,299 kjører for øyeblikket for UC president og visepresident, 188 00:08:40,299 --> 00:08:42,950 som brakte meg tilbake til mine egne dager tilbake 189 00:08:42,950 --> 00:08:45,920 da jeg mistet UC valget stort. 190 00:08:45,920 --> 00:08:48,210 Men silver lining i at jeg alltid 191 00:08:48,210 --> 00:08:50,604 fortelle historien er at en av de jeg er sikker 192 00:08:50,604 --> 00:08:52,770 mange grunner til at jeg mistet valget var en fullstendig mangel 193 00:08:52,770 --> 00:08:54,103 av et talent for å tale offentlig. 194 00:08:54,103 --> 00:08:56,950 Og så helt ærlig, det kjørte meg, at erfaring 195 00:08:56,950 --> 00:09:02,235 Jeg tror min junior året, å faktisk signere opp for Harvard Computer Society, som 196 00:09:02,235 --> 00:09:04,610 er gruppen på campus som innehar ulike tekniske samtaler 197 00:09:04,610 --> 00:09:05,318 og andre ting. 198 00:09:05,318 --> 00:09:08,117 Og jeg tok over undervisningen seminarer og derfor 199 00:09:08,117 --> 00:09:09,950 hadde en mulighet, en fantastisk mulighet, 200 00:09:09,950 --> 00:09:12,620 å begynne å jobbe på akkurat dette. 201 00:09:12,620 --> 00:09:15,000 Men også, jeg hadde en mulighet i løpet av denne erfaringen 202 00:09:15,000 --> 00:09:16,930 å lære meg alle mer HTML. 203 00:09:16,930 --> 00:09:21,080 Og så jeg utsatte i går kveld etter ser gjennom HTML basert nettsted 204 00:09:21,080 --> 00:09:28,066 Jeg gjorde i som 1997, '98, for min kampanje som ser ut som dette her. 205 00:09:28,066 --> 00:09:29,920 Jeg vet. 206 00:09:29,920 --> 00:09:33,340 >> Because-- og selvfølgelig, varsel dette fantastisk design beslutning i 1998 207 00:09:33,340 --> 00:09:33,850 eller whatnot. 208 00:09:33,850 --> 00:09:36,475 Det første du vil at brukerne å gjøre når du besøker nettstedet ditt 209 00:09:36,475 --> 00:09:39,860 er å måtte klikke en annen link bare å skrive inn ditt nettsted her med munken 210 00:09:39,860 --> 00:09:43,940 bak som en innhyllet gardin der tydeligvis min kampanje plattformen var. 211 00:09:43,940 --> 00:09:46,330 Og dette er alt du får i dag er bare en skjermdump. 212 00:09:46,330 --> 00:09:49,500 Men jeg leste gjennom, som, kampanjeplakater går kveld 213 00:09:49,500 --> 00:09:50,490 og min plattform. 214 00:09:50,490 --> 00:09:52,960 >> Og jeg var så sint på den tiden. 215 00:09:52,960 --> 00:09:55,380 Min plattform var-- det var interessant. 216 00:09:55,380 --> 00:09:57,730 Så jeg har roet seg siden da. 217 00:09:57,730 --> 00:10:03,550 Men en dag, vil jeg løpe igjen, og forhåpentligvis bedre denne gangen. 218 00:10:03,550 --> 00:10:07,265 >> Så HTML, at språket som jeg har gjort at in-- du snart gjøre mye mer-- 219 00:10:07,265 --> 00:10:09,140 er noe vi har vært snakker om i det siste 220 00:10:09,140 --> 00:10:12,460 og i stor grad å ta for gitt nå at vi har gått videre til andre språk. 221 00:10:12,460 --> 00:10:15,650 Men la oss ta en pause for et øyeblikk og sette noen av disse tingene i sammenheng. 222 00:10:15,650 --> 00:10:18,040 Så i en setning, hva er HTML? 223 00:10:18,040 --> 00:10:19,370 >> Eller, hva som er brukt for? 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 >> PUBLIKUM: Markup for nettsteder. 227 00:10:22,002 --> 00:10:23,460 DAVID J. MALAN: Markup for nettstedet. 228 00:10:23,460 --> 00:10:27,100 Så det er et kodespråk som kan du strukturere en nettside. 229 00:10:27,100 --> 00:10:30,040 Header går opp her, tittel går her, går kroppen her. 230 00:10:30,040 --> 00:10:33,280 Dette er fet skrift, dette er italics-- den slags detalj. 231 00:10:33,280 --> 00:10:33,830 >> OK, bra. 232 00:10:33,830 --> 00:10:37,620 Så CSS lar you-- og jeg tok noen friheter det 233 00:10:37,620 --> 00:10:40,990 med fet vendte og kursiv fordi som er bedre gjennomført med dette. 234 00:10:40,990 --> 00:10:42,096 CSS er-- hva? 235 00:10:42,096 --> 00:10:42,845 Sier i en setning. 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 Noen i det hele tatt. 238 00:10:46,720 --> 00:10:46,870 Yeah. 239 00:10:46,870 --> 00:10:49,286 >> Målgruppe: Utsmykninger og ting, som hvordan å designe 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 Pynt som lar deg å designe det eller stilisere det 243 00:10:55,420 --> 00:10:59,540 med ting som fet skrift og kursiv og farger og også flere fine 244 00:10:59,540 --> 00:11:01,330 kornet posisjonering av elementene. 245 00:11:01,330 --> 00:11:04,520 Den lar liksom du tar ting de siste mil slik at hvis, for eksempel, 246 00:11:04,520 --> 00:11:08,130 i Pset7, har du kanskje lagt merke til på din porteføljen siden hvis du er på dette punktet 247 00:11:08,130 --> 00:11:12,270 allerede som en standardtabellen som du gjøre for å vise brukerens lager beholdninger 248 00:11:12,270 --> 00:11:15,740 og kontanter ser sannsynligvis ganske heslig som standard med noe hvitt område. 249 00:11:15,740 --> 00:11:18,420 Alt er slags crammed sammen i rader og kolonner. 250 00:11:18,420 --> 00:11:20,662 >> Vel, med litt CSS, som du kanskje skjønner, 251 00:11:20,662 --> 00:11:23,870 du faktisk kan finpusse det og gjøre det noe mye mer kjent og mye 252 00:11:23,870 --> 00:11:24,870 penere å se på. 253 00:11:24,870 --> 00:11:27,730 Så CSS handler om stilisering av nettsteder. 254 00:11:27,730 --> 00:11:31,970 Men da vi introduserte enda en språk, PHP, som lar oss gjøre hva? 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> La oss bare gjøre hva? 257 00:11:37,590 --> 00:11:38,177 Noen. 258 00:11:38,177 --> 00:11:40,010 Fikk å våge utenfor de første par rader. 259 00:11:40,010 --> 00:11:40,260 Yeah. 260 00:11:40,260 --> 00:11:41,719 >> PUBLIKUM: generere dynamisk innhold. 261 00:11:41,719 --> 00:11:42,718 DAVID J. MALAN: Perfect. 262 00:11:42,718 --> 00:11:43,850 Generere dynamisk innhold. 263 00:11:43,850 --> 00:11:45,808 Og du kan gjøre dette i en rekke språk. 264 00:11:45,808 --> 00:11:50,120 Vi tilfeldigvis bruke PHP fordi det er delvis så lik C syntaks. 265 00:11:50,120 --> 00:11:52,000 >> Men PHP gjør nettopp det. 266 00:11:52,000 --> 00:11:54,620 Det kan du dynamisk generere utgang. 267 00:11:54,620 --> 00:11:57,890 Og noen av at produksjonen kan være HTML, som vi har vanligvis gjort. 268 00:11:57,890 --> 00:12:00,160 Og det er også, fordi det er et programmeringsspråk, er 269 00:12:00,160 --> 00:12:03,240 mekanismen via som Vi kan snakke med databaser. 270 00:12:03,240 --> 00:12:05,730 >> Og vi kan lage spørringer til andre servere som Yahoos 271 00:12:05,730 --> 00:12:08,660 og programma gjøre noe virkelig at du ellers 272 00:12:08,660 --> 00:12:10,400 ønsker å tvinge en datamaskin til å gjøre. 273 00:12:10,400 --> 00:12:13,580 Så PHP lar oss starte dynamisk gi ut innhold. 274 00:12:13,580 --> 00:12:16,900 Så ved denne logikken, hadde jeg ikke en dynamisk nettside i 1998. 275 00:12:16,900 --> 00:12:18,460 >> Det var bare en statisk nettside. 276 00:12:18,460 --> 00:12:22,250 Min innhold måtte endres etter manuelt med gedit eller noen tilsvarende. 277 00:12:22,250 --> 00:12:25,290 Men PHP er hva vi brukte eller kunne ha brukt snarere 278 00:12:25,290 --> 00:12:27,260 for noe som Frosh direktemeldinger nettside, som 279 00:12:27,260 --> 00:12:31,160 skulle ta registreringer og administrere en liste over users-- ting som 280 00:12:31,160 --> 00:12:33,550 faktisk endring over gang, selv om vi skje 281 00:12:33,550 --> 00:12:35,990 å bruke Perl, en annen språket på den tiden. 282 00:12:35,990 --> 00:12:40,350 >> Og så til slutt, vi introduserte SQL-- Structured Query Language. 283 00:12:40,350 --> 00:12:43,845 Så enda et annet språk som brukes for hva? 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 Brukes til hva? 286 00:12:47,639 --> 00:12:49,430 Kan vi våge slight-- OK, vi kommer ikke til 287 00:12:49,430 --> 00:12:51,263 å få mye lenger enn orkesteret her. 288 00:12:51,263 --> 00:12:53,432 PUBLIKUM: Det er en protokoll brukes til å snakke med databaser. 289 00:12:53,432 --> 00:12:55,640 DAVID J. MALAN: En protokoll brukes til å snakke med databaser. 290 00:12:55,640 --> 00:12:56,181 La meg tweak. 291 00:12:56,181 --> 00:12:59,280 Det er et naturlig språk som brukes å snakke med databases-- velger 292 00:12:59,280 --> 00:13:01,280 og setter inn og sletter og oppdateringer og faktisk 293 00:13:01,280 --> 00:13:03,840 enda flere funksjoner som vi har ikke engang dykket 294 00:13:03,840 --> 00:13:07,920 inn, men det kan være lurt å explore-- ha å lete etter, si, et avsluttende prosjekt. 295 00:13:07,920 --> 00:13:09,560 Så det er disse ulike delene. 296 00:13:09,560 --> 00:13:13,100 >> Og forhåpentligvis Pset7, selv om spesifikasjonen er ganske lang, 297 00:13:13,100 --> 00:13:15,990 det er bevisst lang å gå deg gjennom hvordan disse tingene kan alle 298 00:13:15,990 --> 00:13:17,210 skrives sammen. 299 00:13:17,210 --> 00:13:20,300 Nå på mandag, vi introdusert vår siste språk 300 00:13:20,300 --> 00:13:23,430 at vi vil formelt innføre i den course-- det vil Javascript. 301 00:13:23,430 --> 00:13:25,720 Dette, som PHP, er en tolket språk. 302 00:13:25,720 --> 00:13:28,110 >> Men en viktig forskjell Jeg foreslo på mandag 303 00:13:28,110 --> 00:13:32,730 er at mens PHP utfører eller blir tolket på serveren, som 304 00:13:32,730 --> 00:13:35,990 i dette tilfellet er den CS50 apparatet, eller kan være noen kommersiell web 305 00:13:35,990 --> 00:13:39,370 server på internett, Java generelt 306 00:13:39,370 --> 00:13:43,650 er et språk som kjører klientsiden ikke server-siden, så i nettleseren. 307 00:13:43,650 --> 00:13:46,970 Som er å si, akkurat som da jeg åpnet opp Facebook kildekoden og fant alle 308 00:13:46,970 --> 00:13:51,510 av disse JS-filer, implikasjonen var at når du besøker Facebook eller mest 309 00:13:51,510 --> 00:13:54,810 nettsteder i disse dager, får du ikke bare HTML, ikke bare CSS, 310 00:13:54,810 --> 00:13:59,370 men en hel haug med Javascript kode ofte i form av JS-filer. 311 00:13:59,370 --> 00:14:03,970 Og så er det den browser-- din egen Mac eller PC-- som utfører den koden. 312 00:14:03,970 --> 00:14:05,990 >> Men nettleseren din utfører det. 313 00:14:05,990 --> 00:14:08,070 Du kan tenke i form av en sandkasse. 314 00:14:08,070 --> 00:14:12,420 Slik at Javascript-kode ikke bør være i stand til å slette filer på datamaskinen din. 315 00:14:12,420 --> 00:14:14,730 Det bør ikke være i stand til å sende e-post på dine vegne. 316 00:14:14,730 --> 00:14:17,760 Nettleseren slags begrenser hva du kan gjøre med det. 317 00:14:17,760 --> 00:14:20,630 >> Så i den forstand, er det litt mindre kraftig, kanskje, enn C. 318 00:14:20,630 --> 00:14:24,030 Men Java kan, som en side, skal brukes på serveren, 319 00:14:24,030 --> 00:14:27,740 om vi får en tendens til ikke å snakke om det i den konteksten. 320 00:14:27,740 --> 00:14:29,740 Så nå la oss binde disse sammen. 321 00:14:29,740 --> 00:14:34,000 En uke pluss siden presenterte vi noen HTML på left-- super kjedelig nettside. 322 00:14:34,000 --> 00:14:35,000 >> Bare sier hei verden. 323 00:14:35,000 --> 00:14:38,110 Og så jeg foreslått på rett vi kan slags stjele ideer 324 00:14:38,110 --> 00:14:41,470 fra vår diskusjon av datastrukturer i C 325 00:14:41,470 --> 00:14:45,270 og tenke på hvordan dette hierarkiske markup språk i venstre 326 00:14:45,270 --> 00:14:49,720 kunne trekkes eller implementert i minnet som en faktisk trestruktur med noder 327 00:14:49,720 --> 00:14:51,400 og pekere og slike detaljer. 328 00:14:51,400 --> 00:14:53,820 På høyre, kaller vi at en DOM-- Document 329 00:14:53,820 --> 00:14:56,800 Objekt Model-- som er bare en fancy måte å si tre. 330 00:14:56,800 --> 00:14:59,520 >> Nå, hvorfor er dette nyttig å Tenk på det på denne måten? 331 00:14:59,520 --> 00:15:01,680 Fordi nå med Javascript, fordi vi har 332 00:15:01,680 --> 00:15:05,810 kode som får spille i denne miljø, selve HTML som er 333 00:15:05,810 --> 00:15:08,360 blitt sendt til nettleseren allerede, og har allerede 334 00:15:08,360 --> 00:15:12,690 blitt lastet inn i minnet ved Nettleseren inn i et tre i din datamaskins 335 00:15:12,690 --> 00:15:18,270 RAM som dette, kan vi bruke Java å faktisk krysse eller gå eller søk 336 00:15:18,270 --> 00:15:21,800 eller endre det DOM treet men vi ønsker. 337 00:15:21,800 --> 00:15:24,040 Så faktisk, hvis du tror om facebook.com, 338 00:15:24,040 --> 00:15:27,660 hvis du bruker chat-funksjon, hvis du bruk Gmail og Gchat funksjonen, 339 00:15:27,660 --> 00:15:30,540 noe der du har meldinger som kommer igjen og igjen 340 00:15:30,540 --> 00:15:35,880 og igjen, disse meldingene er trolig, lignende, LI tag, listeelement tags, kanskje. 341 00:15:35,880 --> 00:15:37,940 >> Eller kanskje de er bare divs som holder vises 342 00:15:37,940 --> 00:15:39,770 hver gang du får en direktemelding. 343 00:15:39,770 --> 00:15:42,960 Og så det betyr bare hva Facebook eller Google gjør 344 00:15:42,960 --> 00:15:45,200 er helst du få en meldingen fra serveren, 345 00:15:45,200 --> 00:15:48,740 de bruker antakelig Java å bare legge til en annen node 346 00:15:48,740 --> 00:15:52,700 til dette tree-- annen node til dette tre som deretter visuelt bare ser 347 00:15:52,700 --> 00:15:54,570 som en ny linje med tekst på skjermen. 348 00:15:54,570 --> 00:15:57,100 Men de setter inn inn i denne datastruktur. 349 00:15:57,100 --> 00:15:59,742 >> Så i klasser som CS124 og andre, vil du 350 00:15:59,742 --> 00:16:02,200 faktisk skrive mer kode mot datastrukturer som dette. 351 00:16:02,200 --> 00:16:04,310 Men for nå i Javascript, får vi bare anta 352 00:16:04,310 --> 00:16:07,920 vi får all denne funksjonaliteten gratis fra språket selv. 353 00:16:07,920 --> 00:16:09,210 Så la oss se på et eksempel. 354 00:16:09,210 --> 00:16:13,120 >> La meg åpne opp en fil som heter form.html. 355 00:16:13,120 --> 00:16:14,601 Det er super enkelt. 356 00:16:14,601 --> 00:16:15,600 Det bare ser slik ut. 357 00:16:15,600 --> 00:16:17,860 >> Ingen CSS, uten tanke for estetikk. 358 00:16:17,860 --> 00:16:19,810 Det er rent funksjonelle og tilsynelatende jeg er 359 00:16:19,810 --> 00:16:24,000 ber om en e-post, passord, passordet på nytt, og deretter en sjekk 360 00:16:24,000 --> 00:16:26,150 å godta noen vilkår og betingelser. 361 00:16:26,150 --> 00:16:28,740 Hva kildekoden for dette ser ut som er trolig noe 362 00:16:28,740 --> 00:16:31,030 du kan gjette med en Litt av tanken nå. 363 00:16:31,030 --> 00:16:32,840 Jeg har fått en form tag her. 364 00:16:32,840 --> 00:16:36,190 >> En handling er tilsynelatende kommer til å gå til en fil som heter register.php. 365 00:16:36,190 --> 00:16:37,870 Metoden jeg kommer til å bruke er å få. 366 00:16:37,870 --> 00:16:40,880 Og så har jeg fått en tekst feltet som heter e-post. 367 00:16:40,880 --> 00:16:43,340 >> Jeg har fått et passordfelt hvis navn er passord. 368 00:16:43,340 --> 00:16:45,420 Jeg har fått en annen passordfeltet hvis navn 369 00:16:45,420 --> 00:16:47,342 er noe vilkårlig bekreftelse. 370 00:16:47,342 --> 00:16:49,690 Det er bare en annen HTTP parameter. 371 00:16:49,690 --> 00:16:54,430 >> Og så har vi vi ikke brukt disse unntatt siden Frosh direktemeldinger demo i class-- 372 00:16:54,430 --> 00:16:56,692 en avkrysningsboks som er skriver du bare lik sjekk. 373 00:16:56,692 --> 00:16:57,900 Og jeg vil kalle den avtalen. 374 00:16:57,900 --> 00:17:00,700 Så jeg har på en måte tilfeldig, men beleilig heter disse feltene. 375 00:17:00,700 --> 00:17:03,450 Så det nå når dette skjemaet blir innsendt, la oss se hva som skjer. 376 00:17:03,450 --> 00:17:07,290 Hvis jeg gjør malan@harvard.edu, Jeg skal gjøre et passord for rød. 377 00:17:07,290 --> 00:17:09,530 Jeg skal gjøre et passord av ingenting. 378 00:17:09,530 --> 00:17:10,910 La oss ikke samarbeide. 379 00:17:10,910 --> 00:17:12,280 >> Og jeg vil ikke merke av i boksen. 380 00:17:12,280 --> 00:17:13,940 La meg Klikk Register. 381 00:17:13,940 --> 00:17:15,420 Og den sier, hm, du er registrert. 382 00:17:15,420 --> 00:17:16,069 Ikke egentlig. 383 00:17:16,069 --> 00:17:17,450 >> Men nettadressen endret. 384 00:17:17,450 --> 00:17:22,280 Så dette skjemaet var tydelig lov å sende til register.php. 385 00:17:22,280 --> 00:17:25,160 Men antagelig, bør jeg være fange noen av disse feilene. 386 00:17:25,160 --> 00:17:27,569 Nå, i Pset7 og noen av våre forelesnings eksempler, 387 00:17:27,569 --> 00:17:30,130 vi ville vanligvis skrive ut en stor rød feilmelding her 388 00:17:30,130 --> 00:17:33,760 sier, mangler navn, eller mangler passord. 389 00:17:33,760 --> 00:17:37,680 Vi har gjort det før, og vi har gjort server side feildeteksjon. 390 00:17:37,680 --> 00:17:41,580 >> Men mange nettsteder i disse dager gjøre klientsiden feildeteksjon 391 00:17:41,580 --> 00:17:42,810 hvor nettadressen ikke endres. 392 00:17:42,810 --> 00:17:44,101 Hele siden oppdateres ikke. 393 00:17:44,101 --> 00:17:46,940 Du får umiddelbar tilbakemelding fra nettleseren. 394 00:17:46,940 --> 00:17:48,070 Noe går kanskje rødt. 395 00:17:48,070 --> 00:17:49,190 >> Kanskje du får en pop up. 396 00:17:49,190 --> 00:17:53,240 Men du trenger ikke kaste bort tid på å sende til serveren data som er ufullstendig. 397 00:17:53,240 --> 00:17:56,050 Så la oss se hvordan vi kan oppnå den funksjonen også. 398 00:17:56,050 --> 00:17:59,660 >> La meg gå til form1.html, som ser den samme. 399 00:17:59,660 --> 00:18:03,530 Men hvis denne gang jeg gjør malan@harvard.edu og jeg skriver crimson 400 00:18:03,530 --> 00:18:07,350 og jeg ikke samarbeider lenger men klikk Register, merke nå. 401 00:18:07,350 --> 00:18:08,940 Det er ikke den mest sexy løsning. 402 00:18:08,940 --> 00:18:10,900 Jeg har i hvert fall fanget opp denne feilen. 403 00:18:10,900 --> 00:18:12,900 Og jeg har brukt varselet funksjon i JavaScript-- 404 00:18:12,900 --> 00:18:14,090 som vi bare bruker i klassen. 405 00:18:14,090 --> 00:18:16,430 Generelt bør du ikke bruke denne fordi det kan raskt komme seg ut 406 00:18:16,430 --> 00:18:17,160 av kontroll. 407 00:18:17,160 --> 00:18:19,180 Men passord ikke sams er feilen. 408 00:18:19,180 --> 00:18:21,120 >> La meg gå videre og klikk på OK. 409 00:18:21,120 --> 00:18:25,040 Men hva nøkkelen takeaway her er at nettadressen ikke endret. 410 00:18:25,040 --> 00:18:27,960 Så jeg har ikke brydd sløse serverens tid på å spørre det 411 00:18:27,960 --> 00:18:30,750 et spørsmål som jeg kunne ha funnet ut svaret til meg selv. 412 00:18:30,750 --> 00:18:33,210 >> Og brukeren, selv om vært snakket om dette 413 00:18:33,210 --> 00:18:35,264 lenger enn brukerens kommer til å tenke på dette, 414 00:18:35,264 --> 00:18:36,680 kommer til å ha umiddelbar tilbakemelding. 415 00:18:36,680 --> 00:18:39,044 Det er ingen ventetid med nettverkstilkoblingen. 416 00:18:39,044 --> 00:18:40,460 Så la oss se på denne kildekoden. 417 00:18:40,460 --> 00:18:45,600 >> Form1.html utseende strukturelt ligner her oppe. 418 00:18:45,600 --> 00:18:46,810 Skjemaet er faktisk den samme. 419 00:18:46,810 --> 00:18:48,330 Men la oss se hva jeg gjorde her nede. 420 00:18:48,330 --> 00:18:49,913 Og det er forskjellige måter å gjøre dette. 421 00:18:49,913 --> 00:18:53,690 Og jeg har gjort det meste rett etterfølger, men ikke mest elegante måten enda. 422 00:18:53,690 --> 00:18:54,869 Jeg har en script tag. 423 00:18:54,869 --> 00:18:57,035 Jeg så ring document.getElementById ('registrering'). 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 Og jeg lagrer denne verdien i form, en variabel. 426 00:19:04,420 --> 00:19:05,520 >> Så hva har jeg gjort? 427 00:19:05,520 --> 00:19:08,960 Du kan tenke på document.getElementById som 428 00:19:08,960 --> 00:19:11,200 en spesiell funksjon som Java gir deg 429 00:19:11,200 --> 00:19:14,400 som bokstavelig talt hendene du en pekeren til en av nodene 430 00:19:14,400 --> 00:19:16,520 eller rektangler i dette treet. 431 00:19:16,520 --> 00:19:21,470 Så nå det er det skjemaet vårt variabel i Javascript er faktisk peker på. 432 00:19:21,470 --> 00:19:25,120 >> Så nå syntaksen er forskjellig fra C. Men vi gjør et par ting her. 433 00:19:25,120 --> 00:19:30,360 One, er dette en litt merkelig ser, absolutt versus C. 434 00:19:30,360 --> 00:19:32,180 Men se på linje 35. 435 00:19:32,180 --> 00:19:35,130 Så på venstre form.onsubmit. 436 00:19:35,130 --> 00:19:38,060 Husker at onsubmit er som et felt i en struct. 437 00:19:38,060 --> 00:19:41,480 Hvis du tenker på formen variabel er bare å være en C struct, 438 00:19:41,480 --> 00:19:42,600 det kan ha noen felt. 439 00:19:42,600 --> 00:19:46,410 >> Tilbake i dag, hadde vi studenter navn, IDer, hus, de slags felt. 440 00:19:46,410 --> 00:19:48,520 Bare tenk på onsubmit som et annet felt. 441 00:19:48,520 --> 00:19:53,380 Men det er et spesielt felt fordi Nettleseren er forhåndsprogrammert til å forvente 442 00:19:53,380 --> 00:19:57,530 .onsubmit å ikke være en verdi som et tall eller streng, 443 00:19:57,530 --> 00:20:01,180 men faktisk å være en funksjon eller adressen til en funksjon 444 00:20:01,180 --> 00:20:02,570 i datamaskinens minne. 445 00:20:02,570 --> 00:20:04,740 >> Og ja, det er det dette søkeordet her gjør. 446 00:20:04,740 --> 00:20:06,710 Dette sier, gi meg en ny funksjon. 447 00:20:06,710 --> 00:20:09,390 Men hva er dens navn kommer til å være, tydeligvis? 448 00:20:09,390 --> 00:20:10,800 >> Tenker tilbake til mandag. 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 Hva er navnet på denne funksjon basert på denne syntaksen? 451 00:20:17,170 --> 00:20:19,784 Nei, jeg mener, det er klart no name associated-- sikkert 452 00:20:19,784 --> 00:20:21,200 ikke i det jeg har uthevet her. 453 00:20:21,200 --> 00:20:22,560 >> Men det er faktisk OK. 454 00:20:22,560 --> 00:20:25,840 Dette er en anonym funksjon, eller en lambda funksjon som noen kanskje kaller det. 455 00:20:25,840 --> 00:20:27,589 Og det betyr bare det er fortsatt en funksjon. 456 00:20:27,589 --> 00:20:29,400 Det er bare, du kan ikke kalle den ved navn. 457 00:20:29,400 --> 00:20:30,057 Men det er OK. 458 00:20:30,057 --> 00:20:33,140 Fordi igjen, har nettleseren vært forhåndsprogrammert av selskaper som Google 459 00:20:33,140 --> 00:20:38,540 eller Microsoft eller Mozilla eller andre til bare vet at hvis .onsubmit feltet 460 00:20:38,540 --> 00:20:43,400 innsiden av en form element har de verdi, behandle det som en function-- 461 00:20:43,400 --> 00:20:44,750 en funksjonspeker, om man vil. 462 00:20:44,750 --> 00:20:46,910 Og kaller det når skjemaet er sendt. 463 00:20:46,910 --> 00:20:50,350 >> Så hva koden skal bli henrettet når skjemaet er sendt inn? 464 00:20:50,350 --> 00:20:52,526 Angivelig, alt innsiden av klammeparentes. 465 00:20:52,526 --> 00:20:53,650 Og dette er bare stilistisk. 466 00:20:53,650 --> 00:20:55,626 >> Du kan gjøre dette som vi pleier å gjøre i CS50. 467 00:20:55,626 --> 00:20:58,250 Men i Javascript, folk flest en tendens til å holde den på samme linje 468 00:20:58,250 --> 00:21:01,960 bare fordi det tydeligere er forbundet med dette søkeordet funksjon. 469 00:21:01,960 --> 00:21:03,240 Så nå hva gjør jeg? 470 00:21:03,240 --> 00:21:08,616 >> Hvis form.email.value lik equals tom streng eller ingenting, her 471 00:21:08,616 --> 00:21:11,490 et varsel der jeg kommer til å si, du må oppgi din e-postadresse, 472 00:21:11,490 --> 00:21:12,690 og deretter return false. 473 00:21:12,690 --> 00:21:15,720 Og det er at avkastningen falsk som hindrer skjemaet blir sendt inn. 474 00:21:15,720 --> 00:21:19,480 I mellomtiden, hvis passordet verdien er blank, jeg kommer til å kjefte på brukeren 475 00:21:19,480 --> 00:21:21,150 og si, du må oppgi et passord. 476 00:21:21,150 --> 00:21:23,700 >> Imens ting blir litt mer avansert her. 477 00:21:23,700 --> 00:21:29,160 Hvis form.password.value ikke lik form.confirmation.value, 478 00:21:29,160 --> 00:21:31,680 det andre feltet, kjefte på brukeren om at passord 479 00:21:31,680 --> 00:21:33,860 samsvarer ikke som de gjorde ikke et øyeblikk siden. 480 00:21:33,860 --> 00:21:35,780 Og så dette er en litt mer sexy fordi jeg 481 00:21:35,780 --> 00:21:40,470 vet jeg visste konseptuelt at sjekket er en avmerkingsboks navn. 482 00:21:40,470 --> 00:21:45,680 >> Så jeg kan bare bruke et utrops poeng å si hvis sjekken ikke 483 00:21:45,680 --> 00:21:48,040 checked-- det er boolsk verdi, sant eller false-- 484 00:21:48,040 --> 00:21:49,700 Jeg skal kjefte på brukeren av den grunn. 485 00:21:49,700 --> 00:21:52,300 Ellers, hvis vi får gjennom alle disse betingelser, 486 00:21:52,300 --> 00:21:53,270 la oss bare returnere true. 487 00:21:53,270 --> 00:21:54,700 La skjemaet sendes inn. 488 00:21:54,700 --> 00:21:56,560 Og dette vil da skje. 489 00:21:56,560 --> 00:21:57,740 >> La oss skrive inn Crimson. 490 00:21:57,740 --> 00:22:00,230 La oss sjekke boksen, klikker du på Registrer. 491 00:22:00,230 --> 00:22:01,979 Og nå går jeg gjennom til bestemmelsesstedet. 492 00:22:01,979 --> 00:22:03,270 Nå er det ingen database der. 493 00:22:03,270 --> 00:22:05,370 Det er ikke noe interessant i register.php. 494 00:22:05,370 --> 00:22:07,980 Jeg trengte noe å faktisk snakke med. 495 00:22:07,980 --> 00:22:09,140 Så la meg pause, her. 496 00:22:09,140 --> 00:22:16,270 Eventuelle spørsmål om hva vi nettopp har gjort eller hva noen av denne nye syntaksen er? 497 00:22:16,270 --> 00:22:17,640 OK, ja? 498 00:22:17,640 --> 00:22:20,025 >> PUBLIKUM: Så noen avkrysnings er automatisk en boolsk. 499 00:22:20,025 --> 00:22:21,650 Du trenger ikke å erklære det sånn. 500 00:22:21,650 --> 00:22:22,649 >> DAVID J. MALAN: Riktig. 501 00:22:22,649 --> 00:22:29,340 Enhver avkrysnings som er sendt til deg fra et HTML-skjema til Javascript-koden 502 00:22:29,340 --> 00:22:31,760 vil bli behandlet, ja, som en Boolsk value-- sant eller usant. 503 00:22:31,760 --> 00:22:32,635 Det er et godt spørsmål. 504 00:22:32,635 --> 00:22:36,080 Mens de andre verdiene, av Selvfølgelig har vært tekst, AKA strenger. 505 00:22:36,080 --> 00:22:38,500 >> Greit, så la meg spole litt lenger. 506 00:22:38,500 --> 00:22:39,900 Hva var hele poenget med dette? 507 00:22:39,900 --> 00:22:41,400 Bare for å være klar. 508 00:22:41,400 --> 00:22:44,940 Som vi allerede vet, selv fra Pset7 og selv fra forrige ukes forelesning 509 00:22:44,940 --> 00:22:51,120 eksempler, at vi selvsagt kan sjekke $ _GET $ _POST Se om brukeren gi oss 510 00:22:51,120 --> 00:22:52,200 en tom verdi. 511 00:22:52,200 --> 00:22:54,400 Husk den tomme funksjon i PHP. 512 00:22:54,400 --> 00:22:58,040 >> Så bare for å være klar, hva som er en grunn vi kan også 513 00:22:58,040 --> 00:23:00,535 ønsker å gjøre dette feilsjekking innsiden av nettleseren? 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 Hva er motivasjonen her? 516 00:23:06,080 --> 00:23:06,580 Yeah. 517 00:23:06,580 --> 00:23:09,735 >> PUBLIKUM: Raskere, og du ikke gjør det sende ubrukelig data til serveren. 518 00:23:09,735 --> 00:23:10,610 DAVID J. MALAN: Good. 519 00:23:10,610 --> 00:23:11,170 Det er raskere. 520 00:23:11,170 --> 00:23:12,920 Du sender ikke ubrukelig data til serveren. 521 00:23:12,920 --> 00:23:14,670 >> Så du får tilbake en mer umiddelbar respons. 522 00:23:14,670 --> 00:23:16,560 Og samlet, brukeren erfaring er bedre. 523 00:23:16,560 --> 00:23:17,900 Tenk på alternativet. 524 00:23:17,900 --> 00:23:21,160 >> Hvis for Gmail-- og var er tilfelle for mange år siden. 525 00:23:21,160 --> 00:23:24,160 Tenk deg at du har fått en ny e-post Gmail konto, men den eneste vei gjennom 526 00:23:24,160 --> 00:23:26,510 for å se det er å, som, laste hele siden. 527 00:23:26,510 --> 00:23:29,030 Eller antar du klikker på en kobling til å lese en e-post. 528 00:23:29,030 --> 00:23:31,600 >> Alt har å lesse så at du kan se e-posten. 529 00:23:31,600 --> 00:23:33,380 Eller Facebook-- du får en chat-melding. 530 00:23:33,380 --> 00:23:36,000 Du ser det ikke før du laster siden eller klikk noen kobling. 531 00:23:36,000 --> 00:23:38,380 >> Liker, dette ville være en fryktelig irriterende brukeropplevelse. 532 00:23:38,380 --> 00:23:41,300 Og dette er hva det var, tydelig, tilbake når jeg kjørte for UC 533 00:23:41,300 --> 00:23:44,760 og nettet var mye mindre dynamisk og Java var ikke så populært 534 00:23:44,760 --> 00:23:45,601 som det er nå. 535 00:23:45,601 --> 00:23:47,850 Og ting blir mye mer dynamisk og mye mer 536 00:23:47,850 --> 00:23:49,900 klientsiden i den forstand. 537 00:23:49,900 --> 00:23:54,370 >> Men det er en hake her, og dette er slags en irriterende fikser. 538 00:23:54,370 --> 00:23:58,720 Bare fordi du legger til klientsiden deteksjon som dette betyr ikke 539 00:23:58,720 --> 00:24:01,430 du kan eller bør forlate server side deteksjon. 540 00:24:01,430 --> 00:24:04,080 Du i hovedsak ønsker å sette ditt Feilkontroll på begge steder. 541 00:24:04,080 --> 00:24:05,830 Fordi det var en av leksjonen lært 542 00:24:05,830 --> 00:24:10,270 fra artikkelen jeg leste noen utdrag fra med denne dumme CMS system-- 543 00:24:10,270 --> 00:24:14,410 Content Management System-- som var implementere sitt godkjenningssystem, 544 00:24:14,410 --> 00:24:16,790 sin innlogging via hvilken mekanisme? 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 >> PUBLIKUM: Javascript. 548 00:24:21,499 --> 00:24:23,290 DAVID J. MALAN: Javascript, nøyaktig, ikke sant? 549 00:24:23,290 --> 00:24:24,610 Det var ved hjelp av Javascript. 550 00:24:24,610 --> 00:24:27,120 Og bokstavelig talt, dere har spilt litt trolig 551 00:24:27,120 --> 00:24:28,700 med Chrome Inspector. 552 00:24:28,700 --> 00:24:30,890 Og hvis jeg kan finne det, inspisere element. 553 00:24:30,890 --> 00:24:33,670 >> La meg gå over til å gjøre alle Chrome alternativer. 554 00:24:33,670 --> 00:24:37,080 Og dette er hvor lett det er å deaktivere Javascript i nettleseren. 555 00:24:37,080 --> 00:24:38,950 Sjekk, ikke mer Script. 556 00:24:38,950 --> 00:24:41,070 >> Så i rettferdighet, mye av nettet i disse dager 557 00:24:41,070 --> 00:24:43,430 er bare kommer til å bryte fordi Gmail og andre sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook-- anta at Javascript er aktivert. 559 00:24:46,140 --> 00:24:50,180 Men hvis du gjør noe dumt som bare validere brukere innspill 560 00:24:50,180 --> 00:24:52,520 og sjekke det for feil på klientsiden, 561 00:24:52,520 --> 00:24:54,940 en motstander kan enkelt gjøre dette. 562 00:24:54,940 --> 00:24:57,180 Og så enda smartere motstander som dere 563 00:24:57,180 --> 00:25:01,120 nå kunne bruke Telnet eller Curl eller bare kommandolinjekommandoer 564 00:25:01,120 --> 00:25:05,300 og faktisk sende meldinger til serveren som på samme måte er ikke feil kontrollert. 565 00:25:05,300 --> 00:25:08,380 >> Så dette er mer av en brukergrensesnitt avgjørelse 566 00:25:08,380 --> 00:25:13,060 enn det er en faktisk teknisk improvement-- implementere 567 00:25:13,060 --> 00:25:14,410 noe klientsiden som dette. 568 00:25:14,410 --> 00:25:16,800 Så nå et raskt blikk, men da Jeg skal utsette til den elektroniske gange 569 00:25:16,800 --> 00:25:17,674 gjennom for denne. 570 00:25:17,674 --> 00:25:21,480 I skjemaet to, vi faktisk gikk gjennom og ryddet opp koden litt. 571 00:25:21,480 --> 00:25:23,650 Men la meg utsette til en av videoene vil vi trolig 572 00:25:23,650 --> 00:25:27,970 embed i Pset8 som bare viser deg en lignende syntaks bruke et bibliotek kalt 573 00:25:27,970 --> 00:25:32,320 jQuery, som er en super, super populært bibliotek i Javascript 574 00:25:32,320 --> 00:25:34,510 som oppriktig folk flest bare bruke disse dager 575 00:25:34,510 --> 00:25:37,070 og selv forvirre som vesen Java selv. 576 00:25:37,070 --> 00:25:38,950 >> Og det har en tendens til å involvere noen dollartegn 577 00:25:38,950 --> 00:25:41,350 og søkeord som dokument i parentes her. 578 00:25:41,350 --> 00:25:44,480 Men igjen, la meg utsette til noen tregere tutorials online 579 00:25:44,480 --> 00:25:46,750 heller enn å bli bundet opp i bare syntaks. 580 00:25:46,750 --> 00:25:48,630 La oss gå videre til noe litt kjøligere 581 00:25:48,630 --> 00:25:50,520 i form av anvendelser av dette. 582 00:25:50,520 --> 00:25:57,730 >> Så spesielt, la meg gå videre og åpne opp dette her. 583 00:25:57,730 --> 00:25:58,340 Kom igjen. 584 00:25:58,340 --> 00:25:59,380 Det vi går. 585 00:25:59,380 --> 00:26:01,500 >> La meg åpne opp dette bildet her. 586 00:26:01,500 --> 00:26:03,450 Unødvendig komplisert ser, men det 587 00:26:03,450 --> 00:26:07,880 beskriver en teknikk som kalles AJAX-- Asynkron Javascript og XML, der 588 00:26:07,880 --> 00:26:10,530 X for XML er faktisk ikke lenger virkelig brukes. 589 00:26:10,530 --> 00:26:13,430 Det har en tendens til å bruke noe annet kalt JSON. 590 00:26:13,430 --> 00:26:16,560 >> Men her er hvordan noe sånt Google Maps eller Google Earth fungerer. 591 00:26:16,560 --> 00:26:18,060 La oss prøve dette på sparket, faktisk. 592 00:26:18,060 --> 00:26:21,590 La meg gå videre og åpne opp Chrome nettleseren min. 593 00:26:21,590 --> 00:26:26,236 >> Og la meg gå inn, si, maps.google.com. 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 Og faktisk, hvis du er gammel nok til å huske hva, 596 00:26:31,930 --> 00:26:35,600 lignende, var MapQuest som tilbake i dag, og kanskje de fortsatt jobber som dette. 597 00:26:35,600 --> 00:26:38,870 Når du brukte for å søke etter something-- 33 Oxford Street, Cambridge, Mass, 598 00:26:38,870 --> 00:26:40,650 la oss gjøre dette-- deg ville faktisk, hvis du 599 00:26:40,650 --> 00:26:43,000 ønsket å panorere opp og ned, venstre og høyre, 600 00:26:43,000 --> 00:26:44,920 du ville se ut som en stor pil på toppen, og det 601 00:26:44,920 --> 00:26:46,921 ville vise deg en annen rammen av kartet her oppe. 602 00:26:46,921 --> 00:26:49,753 Eller ville du klikke venstre og du ville gå over her, eller en annen klikk 603 00:26:49,753 --> 00:26:51,000 og du ville gå over her. 604 00:26:51,000 --> 00:26:53,000 Men i stedet disse dager, vi selvfølgelig bare 605 00:26:53,000 --> 00:26:55,970 ta for gitt at vi kan gå rundt Cambridge ganske raskt 606 00:26:55,970 --> 00:26:57,550 bare ved å klikke og dra. 607 00:26:57,550 --> 00:26:59,130 Men legg merke til det er noen glitches. 608 00:26:59,130 --> 00:27:02,160 >> Hvis jeg gjør dette raskt nok, hva synes å skje 609 00:27:02,160 --> 00:27:05,960 som jeg drar litt for fort til datamaskinen for å holde opp? 610 00:27:05,960 --> 00:27:07,160 Hva ser du? 611 00:27:07,160 --> 00:27:07,660 Yeah. 612 00:27:07,660 --> 00:27:09,232 >> PUBLIKUM: Pikslene ikke oppdatere. 613 00:27:09,232 --> 00:27:10,940 DAVID J. MALAN: The piksler ikke oppdatere. 614 00:27:10,940 --> 00:27:12,870 Det er actually-- og du kunne se dette, faktisk, 615 00:27:12,870 --> 00:27:15,360 hvis du ser på nettet og pause dette, eller faktisk bremser ned ting 616 00:27:15,360 --> 00:27:18,600 for once-- vil du se at det er fliser, firkanter eller rektangler som 617 00:27:18,600 --> 00:27:22,040 mangler fra kartet før et brøkdels sekund senere, mer data, 618 00:27:22,040 --> 00:27:24,390 flere bilder faktisk vises på skjermen. 619 00:27:24,390 --> 00:27:29,810 Og faktisk, hvis vi gjør dette ved å se opp Chrome's-- la oss si, Chrome-- 620 00:27:29,810 --> 00:27:30,310 la oss se. 621 00:27:30,310 --> 00:27:31,090 Vi kan ikke gjøre det. 622 00:27:31,090 --> 00:27:31,860 >> Oh, whoops. 623 00:27:31,860 --> 00:27:34,761 La oss åpne opp maps.google.com. 624 00:27:34,761 --> 00:27:36,660 La meg gjøre vinduet større igjen. 625 00:27:36,660 --> 00:27:38,836 >> Gå tilbake til 33 Oxford Street. 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 Hva var nettsiden jeg var på nylig? 628 00:27:43,760 --> 00:27:46,440 Jeg hadde dette, som, private rant til meg selv at jeg hadde da direktemelding 629 00:27:46,440 --> 00:27:48,470 noen venn som var på nettet som ønsket å høre det. 630 00:27:48,470 --> 00:27:49,345 Det er noen nettside. 631 00:27:49,345 --> 00:27:52,680 Jeg tror det er Comcast-- så en veldig stor amerikansk ISP. 632 00:27:52,680 --> 00:27:56,355 Du kan, når du registrerer deg for ny kabel modem eller kabel-TV-tjenesten, 633 00:27:56,355 --> 00:27:59,230 de har en form som meget rimelig der de ber deg for din adresse. 634 00:27:59,230 --> 00:28:01,450 Og har denne fantastiske funksjon som heter autofullfør, 635 00:28:01,450 --> 00:28:04,600 som Google, begynner det å fylle i svaret på spørsmålet ditt. 636 00:28:04,600 --> 00:28:08,090 >> Problemet er, de gjør autofullfør på de første tingene som du skriver. 637 00:28:08,090 --> 00:28:12,890 Så hvis du begynner å skrive i 33, det vil vise deg bokstavelig talt alle hus 638 00:28:12,890 --> 00:28:15,790 i Amerika som starter med tallet 33 639 00:28:15,790 --> 00:28:17,920 før du fortsetter å forventer du å skrive mer. 640 00:28:17,920 --> 00:28:20,660 Så hvis du skriver 33 Oxford, så det viser deg hver gate 641 00:28:20,660 --> 00:28:24,726 i Amerika som har 33 Oxford i sitt navn, uavhengig av byen 642 00:28:24,726 --> 00:28:25,350 at du er i. 643 00:28:25,350 --> 00:28:26,320 >> Og så du fortsetter å skrive. 644 00:28:26,320 --> 00:28:28,930 Og til slutt, innser det at de ikke gjør det tilbyr service til ditt hjem i Cambridge 645 00:28:28,930 --> 00:28:29,920 eller noe sånt. 646 00:28:29,920 --> 00:28:33,410 Men poenget er at dette er den mest asinine implementering av auto 647 00:28:33,410 --> 00:28:34,140 fullføre noensinne. 648 00:28:34,140 --> 00:28:36,400 >> Og jeg bare gå av på denne tangent igjen. 649 00:28:36,400 --> 00:28:39,040 Men det finnes gode måter å bruke Javascript og dårlige måter. 650 00:28:39,040 --> 00:28:40,750 Og det er ikke nødvendigvis det beste. 651 00:28:40,750 --> 00:28:46,360 >> Men poenget her, før dette tirade, var å åpne opp verktøy her nede 652 00:28:46,360 --> 00:28:49,480 og åpne opp utviklerverktøy, som vi har oppfordret før, 653 00:28:49,480 --> 00:28:52,840 og for å se nettverk Kategorien som jeg klikker veldig fort. 654 00:28:52,840 --> 00:28:55,400 Og legg merke til en hel haug av få forespørsler skjedde. 655 00:28:55,400 --> 00:28:57,310 Alt dette skjedde siden jeg dro. 656 00:28:57,310 --> 00:29:00,170 >> Og mest sannsynlig, ja mange av disse radene 657 00:29:00,170 --> 00:29:04,060 Nå er bildestrek JPEG MIME-typer eller innholdstyper. 658 00:29:04,060 --> 00:29:07,750 Det er fordi det krom gjør hver gang jeg klikker og drar, klikk 659 00:29:07,750 --> 00:29:11,650 og dra, er det er å realisere, oh, jeg trenger å gå spør Google for flis 660 00:29:11,650 --> 00:29:15,080 på kartet som er over her, raskt laste den ned via HTTP, 661 00:29:15,080 --> 00:29:19,550 og deretter legge den til den såkalte DOM til nettlesere i minnet treet 662 00:29:19,550 --> 00:29:24,430 representasjon, slik at brukeren, meg, ser at oppdatert flis. 663 00:29:24,430 --> 00:29:26,795 Og dette er på grunn av en teknikk kalt AJAX. 664 00:29:26,795 --> 00:29:28,920 Tilbake i dag, det virkelig var tilfellet at hvis du 665 00:29:28,920 --> 00:29:33,050 ønsket å endre hva som skjer på skjermen, du må klikke opp, ned, venstre, 666 00:29:33,050 --> 00:29:33,550 høyre. 667 00:29:33,550 --> 00:29:34,740 Og så en ny side ville åpne. 668 00:29:34,740 --> 00:29:36,531 Men i disse dager, alt er mer dynamisk. 669 00:29:36,531 --> 00:29:40,490 Det skjer på den måten vi mennesker ville håper det faktisk ville interaktivt. 670 00:29:40,490 --> 00:29:43,210 Og det oppnår dette ved i form av en teknikk som kalles 671 00:29:43,210 --> 00:29:46,170 AJAX, som er kanskje best forklares med et eksempel. 672 00:29:46,170 --> 00:29:49,730 Først, la meg gå videre og åpne opp en fil 673 00:29:49,730 --> 00:29:53,540 kalt quote.php i dagens fordeling kode. 674 00:29:53,540 --> 00:29:56,200 >> Og så la meg gjøre symbol-- whoops. 675 00:29:56,200 --> 00:30:02,399 La meg gjøre symbol = GOOG for bare noen lager. 676 00:30:02,399 --> 00:30:04,440 Eller faktisk, la oss gjøre det en fra PSet GRATIS. 677 00:30:04,440 --> 00:30:05,270 Enter. 678 00:30:05,270 --> 00:30:06,580 >> Og nå merke til hva jeg får tilbake. 679 00:30:06,580 --> 00:30:09,210 Så dette er en virkelig kort PHP-fil som jeg 680 00:30:09,210 --> 00:30:13,210 skrev at bare låner kode fra Pset7 oppslagsfunksjon 681 00:30:13,210 --> 00:30:17,830 og spytter ut ved hjelp av denne krøllete brace og sitater og tykktarm notasjon, tilsynelatende, 682 00:30:17,830 --> 00:30:22,747 dagens lager prisen for selskap som du passerer inn via get. 683 00:30:22,747 --> 00:30:24,580 Så dette er annerledes fra det meste av det vi har 684 00:30:24,580 --> 00:30:26,496 gjort i at varsel er jeg bokstavelig talt spytter ut 685 00:30:26,496 --> 00:30:27,870 det ser ut som Javascript-kode. 686 00:30:27,870 --> 00:30:30,020 >> Faktisk er dette en Javascript-objekt. 687 00:30:30,020 --> 00:30:34,130 Faktisk bare å være mer tydelig, Javascript Object Notation-- JSON-- 688 00:30:34,130 --> 00:30:38,330 er bare en fancy måte å si at du kan representere data i Javascript mye 689 00:30:38,330 --> 00:30:41,660 som du kan i PHP bruke nøkkel verdi-par. 690 00:30:41,660 --> 00:30:44,270 Så hvis jeg ønsket å erklære en variabel i Javascript 691 00:30:44,270 --> 00:30:47,872 å representerer Zamyla, for instance-- en struct for Zamyla-- 692 00:30:47,872 --> 00:30:49,580 og vi kaller det student, denne variabelen. 693 00:30:49,580 --> 00:30:53,060 Hennes ID er en, huset er Winthrop, og navn er Zamyla. 694 00:30:53,060 --> 00:30:55,490 >> Men jeg kan også ha en rekke objekter. 695 00:30:55,490 --> 00:30:58,710 Så hvis jeg faktisk ønsket å ha en matrise i Javascript som inneholder 696 00:30:58,710 --> 00:31:01,740 flere slike objekter, dette tid som representerer ansatte, 697 00:31:01,740 --> 00:31:04,910 Jeg kan ha disse tre biter av kode tilbake 698 00:31:04,910 --> 00:31:08,560 til rygg mot rygg for disse tre tidligere ansatte. 699 00:31:08,560 --> 00:31:12,201 Så syntaksen, pen lik both-- til PHP. 700 00:31:12,201 --> 00:31:13,700 Men dette er spesielt Script. 701 00:31:13,700 --> 00:31:15,940 Det er objekt notasjon. 702 00:31:15,940 --> 00:31:17,240 Så hva er dette nyttig for? 703 00:31:17,240 --> 00:31:21,580 >> Hvis jeg skrive kode som spytter ut JSON-- Javascript Object Notation-- ting som 704 00:31:21,580 --> 00:31:24,670 ser ut som dette, eller ting som ser ut som Zamyla struktur, 705 00:31:24,670 --> 00:31:27,730 Jeg kan faktisk bruke denne i programmer skriver jeg. 706 00:31:27,730 --> 00:31:30,660 La meg gå til ajax0.html. 707 00:31:30,660 --> 00:31:33,310 Og dette også-- ikke mye trodde gitt til estetikk. 708 00:31:33,310 --> 00:31:34,660 Men se hva som skjer. 709 00:31:34,660 --> 00:31:37,050 >> La meg gå videre og skrive fritt her. 710 00:31:37,050 --> 00:31:38,490 Klikk få tilbud. 711 00:31:38,490 --> 00:31:41,060 Og legg merke til nettadressen er ikke endret. 712 00:31:41,060 --> 00:31:47,250 Men jeg fikk en pop up med tilsynelatende dagens penny stock pris på $ 0,15. 713 00:31:47,250 --> 00:31:49,062 Så det er ikke så ille. 714 00:31:49,062 --> 00:31:52,020 Men forskjellen er at en eller annen måte, disse dataene kom tilbake til meg direkte. 715 00:31:52,020 --> 00:31:54,250 Men la oss ta et skritt mot noe mer kjent. 716 00:31:54,250 --> 00:31:58,900 I versjon en av denne, la meg skriv fri igjen, klikker du på Hent sitat, 717 00:31:58,900 --> 00:32:01,146 og now-- oh, dette var faktisk jQuery versjonen. 718 00:32:01,146 --> 00:32:03,270 Så la me-- jeg gjorde ikke spole fremover ganske langt nok. 719 00:32:03,270 --> 00:32:05,830 La meg gå til versjon to, som er der jeg ønsket. 720 00:32:05,830 --> 00:32:07,260 Legg merke til hva jeg har gjort her. 721 00:32:07,260 --> 00:32:10,370 Jeg har en web page-- en super enkel versjon av en nettside 722 00:32:10,370 --> 00:32:14,260 du kan bruke i dag med et tekstfelt her gratis, og tilsynelatende bare 723 00:32:14,260 --> 00:32:14,880 tekst. 724 00:32:14,880 --> 00:32:16,860 >> Dette er ikke en form her, tydeligvis. 725 00:32:16,860 --> 00:32:19,360 Men hvis jeg klikker får sitat, merke min nettside 726 00:32:19,360 --> 00:32:22,760 er i ferd med å endre seg som om jeg akkurat fått en ny direktemelding 727 00:32:22,760 --> 00:32:25,360 eller som om jeg nettopp flyttet kart og nødvendig for å få mer data 728 00:32:25,360 --> 00:32:29,220 lagt dynamisk til nettsiden uten URL skiftende og brukeren 729 00:32:29,220 --> 00:32:30,980 opplevelse å bli avbrutt. 730 00:32:30,980 --> 00:32:35,750 Faktisk, jeg er fortsatt på nøyaktig samme sted-- ajax2.html. 731 00:32:35,750 --> 00:32:39,080 >> Så la oss se bare på dette eksempelet og se hvordan dette skjer. 732 00:32:39,080 --> 00:32:42,490 La meg gå inn ajax2.html. 733 00:32:42,490 --> 00:32:44,770 Og legg merke til formen først. 734 00:32:44,770 --> 00:32:47,092 >> Ned her, jeg snu off bilen fullstendig. 735 00:32:47,092 --> 00:32:48,800 Noen ganger blir det irriterende hvis nettleseren 736 00:32:48,800 --> 00:32:50,508 prøver å vise deg hele historien. 737 00:32:50,508 --> 00:32:53,450 Så du kan gjøre det i HTML ved sier bare auto full av. 738 00:32:53,450 --> 00:32:57,290 >> Jeg har gitt dette tekstfeltet en symbol-- snarere en ID på symbol. 739 00:32:57,290 --> 00:32:58,977 Og nå, dette er en interessant funksjon. 740 00:32:58,977 --> 00:33:01,310 Vi har ikke snakket om span, men du kan tenke på det 741 00:33:01,310 --> 00:33:03,177 som et ledd tag eller div tag. 742 00:33:03,177 --> 00:33:05,010 Det er det som kalles en in-line element, som 743 00:33:05,010 --> 00:33:07,415 betyr at du ikke vil få et avsnitt brekke over og under det. 744 00:33:07,415 --> 00:33:11,530 Det er bare kommer til å bo i-linje uten treffer tilsvarende inn. 745 00:33:11,530 --> 00:33:17,980 Så jeg har gitt denne del av HTML skal fastsettes en unik identifikator 746 00:33:17,980 --> 00:33:20,130 at jeg vilkårlig kalt pris. 747 00:33:20,130 --> 00:33:21,560 Og jeg har en Send-knappen. 748 00:33:21,560 --> 00:33:25,420 >> Fordi nå opp her-- og dette er faktisk super utrolig hvor lite kode 749 00:33:25,420 --> 00:33:27,660 du kan skrive å gjøre relativt ryddig things-- 750 00:33:27,660 --> 00:33:31,800 Legg merke til hva jeg har gjort her oppe hvis jeg bla opp til hodet på denne siden. 751 00:33:31,800 --> 00:33:34,970 Jeg har tatt med først i hodet mitt et script tag 752 00:33:34,970 --> 00:33:37,410 som faktisk refererer til en Javascript-filen et annet sted. 753 00:33:37,410 --> 00:33:39,702 Dette er fra organisasjonen som skriver jQuery, 754 00:33:39,702 --> 00:33:42,660 og dette er bare å gi deg den nyeste versjon av deres jQuery biblioteket. 755 00:33:42,660 --> 00:33:46,305 >> Så dette er typen som skarp inkludere i C eller krever i PHP. 756 00:33:46,305 --> 00:33:48,900 Du bruker script tag med en kilde attributt. 757 00:33:48,900 --> 00:33:52,030 Men nå er min egen kode er kommer til å være rett i her. 758 00:33:52,030 --> 00:33:54,170 >> Merker jeg har en funksjon som heter Quotes. 759 00:33:54,170 --> 00:33:56,180 Og det ser litt kryptisk ved første øyekast. 760 00:33:56,180 --> 00:33:57,305 Men la oss erte dette fra hverandre. 761 00:33:57,305 --> 00:33:59,090 Gi meg en variabel kalt URL. 762 00:33:59,090 --> 00:34:01,390 Tildele det bokstavelig talt denne strengen. 763 00:34:01,390 --> 00:34:04,530 Så, enkle sitater, doble anførselstegn i Java bare gir meg en streng. 764 00:34:04,530 --> 00:34:06,900 Hva gjør pluss gjøre? 765 00:34:06,900 --> 00:34:08,199 Sammenkobling. 766 00:34:08,199 --> 00:34:12,610 >> Så dette nå er jQuery syntaks som tar litt tid å bli vant til. 767 00:34:12,610 --> 00:34:18,310 Men dette betyr bare gå få meg DOM node som unik identifikator er symbol. 768 00:34:18,310 --> 00:34:21,929 Hashtag det betyr unik identifikator symbol. 769 00:34:21,929 --> 00:34:24,929 >> Dollartegnet i Parenteser bare bety, pakk dette 770 00:34:24,929 --> 00:34:28,510 i jQuery en slags hemmelig saus slik du får mer funksjonalitet. 771 00:34:28,510 --> 00:34:31,880 Og så .val er tilsynelatende en funksjon, eller som vi sier nå, 772 00:34:31,880 --> 00:34:35,219 en fremgangsmåte innsiden av denne noden som bare gir deg verdi. 773 00:34:35,219 --> 00:34:38,896 Så kort sagt, stygg og forvirrende da dette ser ut ved første øyekast, 774 00:34:38,896 --> 00:34:42,020 Dette betyr bare får med brukeren skrev i, sette den på slutten av strengen 775 00:34:42,020 --> 00:34:42,880 ved å lenke sammen den. 776 00:34:42,880 --> 00:34:43,739 Det er alt. 777 00:34:43,739 --> 00:34:46,070 >> Så nå, siste tre linjer. 778 00:34:46,070 --> 00:34:48,690 Du kan presse en masse funksjonalitet ut av tre linjer. 779 00:34:48,690 --> 00:34:52,199 Denne dollartegn, som en side, er bare et kallenavn 780 00:34:52,199 --> 00:34:55,800 for en spesiell global variabel kalt bokstavelig jQuery. 781 00:34:55,800 --> 00:34:57,060 >> Dollartegn bare ser kult. 782 00:34:57,060 --> 00:35:00,080 Så jQuery samfunnet bare slags brukte det som sitt spesialsymbol. 783 00:35:00,080 --> 00:35:02,470 Det betyr ikke hva det betyr i PHP. 784 00:35:02,470 --> 00:35:06,356 I Javascript, er dollartegn akkurat som en bokstav i alfabetet 785 00:35:06,356 --> 00:35:07,480 eller et tall for en variabel. 786 00:35:07,480 --> 00:35:09,000 >> Du kan bare ha det som navnet. 787 00:35:09,000 --> 00:35:09,770 Bare ser kult. 788 00:35:09,770 --> 00:35:11,890 Så samfunnet vedtatt det som kallenavn 789 00:35:11,890 --> 00:35:13,390 for sitt eget bibliotek kalt jQuery. 790 00:35:13,390 --> 00:35:15,060 >> Og det er super populære. 791 00:35:15,060 --> 00:35:17,620 Så får JSON er akkurat det. 792 00:35:17,620 --> 00:35:19,920 Det er en funksjon som folk på jQuery skrev 793 00:35:19,920 --> 00:35:23,340 som får JSON fra en server-- Javascript Object Notation. 794 00:35:23,340 --> 00:35:25,680 Fra hva URL går det for å få denne informasjonen? 795 00:35:25,680 --> 00:35:27,790 Angivelig fra denne nettadressen her. 796 00:35:27,790 --> 00:35:31,180 >> Og hva skal leseren gjøre som snart det blir tilbake dette svaret? 797 00:35:31,180 --> 00:35:36,500 Og dette er den magiske AJAX, så å speak-- Asynchronous Javascript XML. 798 00:35:36,500 --> 00:35:41,320 Det er vanskelig å se med et slikt enkelt eksempel som vi hadde her. 799 00:35:41,320 --> 00:35:44,730 >> Men dette var asynkron i den forstand at min kode når 800 00:35:44,730 --> 00:35:48,530 henrettet sendte en melding til serveren for å gå få meg noen JSON. 801 00:35:48,530 --> 00:35:51,340 Og det skjedde super rask at jeg fikk et svar. 802 00:35:51,340 --> 00:35:55,130 Men det som er interessant er at denne kodelinje ikke henge min datamaskin. 803 00:35:55,130 --> 00:35:56,550 >> Jeg fikk ikke se en spinnende ikon. 804 00:35:56,550 --> 00:35:59,200 Jeg mistet ikke evne til å flytte musen. 805 00:35:59,200 --> 00:36:01,340 Nettleseren min var faktisk helt greit. 806 00:36:01,340 --> 00:36:06,290 >> Fordi måten Java håndterer respons fra serveren er som følger. 807 00:36:06,290 --> 00:36:09,740 Du registrerer deg hva du vil kalle en tilbakeringingsfunksjon som 808 00:36:09,740 --> 00:36:12,830 betyr bare, hei, Script. 809 00:36:12,830 --> 00:36:16,100 Så snart serveren svarer med JSON, 810 00:36:16,100 --> 00:36:18,750 vennligst ring dette anonym funksjon. 811 00:36:18,750 --> 00:36:23,910 >> Og vær så snill gått inn i denne funksjonen uansett streng serveren spytte ut 812 00:36:23,910 --> 00:36:26,080 som et argument kalt data. 813 00:36:26,080 --> 00:36:28,360 Så med andre, ord, hvis Jeg monterer dynamisk 814 00:36:28,360 --> 00:36:33,370 en URL quote.php passerer i dette symbol som GRATIS eller GOOG eller whatnot, 815 00:36:33,370 --> 00:36:36,830 Jeg deretter fortelle Java gå får denne nettadressen. 816 00:36:36,830 --> 00:36:39,080 Husk at nettleseren kommer til å returnere noe 817 00:36:39,080 --> 00:36:42,680 som ser ut som vi så earlier-- dette. 818 00:36:42,680 --> 00:36:45,940 >> Og hva det andre argumentet her for å få JSON sier 819 00:36:45,940 --> 00:36:48,450 er kalle denne funksjonen når serveren kommer tilbake 820 00:36:48,450 --> 00:36:52,440 enten det er 10 millisekunder fra nå eller 10 sekunder fra nå. 821 00:36:52,440 --> 00:36:55,840 Og så snart du gjør det, legge prisen til siden. 822 00:36:55,840 --> 00:36:58,030 Denne syntaksen her bare betyr gå får noden 823 00:36:58,030 --> 00:37:01,940 fra treet hvis unike identifikator er price-- at span vi så tidligere. 824 00:37:01,940 --> 00:37:04,320 >> Denne metoden kalles HTML bare sier, gå erstatte 825 00:37:04,320 --> 00:37:08,770 HTML som er der med data.price. 826 00:37:08,770 --> 00:37:10,200 Hva er data.price? 827 00:37:10,200 --> 00:37:12,850 Vel, leseren, husker, viste meg dette kommer tilbake. 828 00:37:12,850 --> 00:37:14,540 Så dette er data. 829 00:37:14,540 --> 00:37:18,100 >> Og så er det litt kryptisk å se komma her. 830 00:37:18,100 --> 00:37:19,350 Men faktisk, la meg gjøre dette. 831 00:37:19,350 --> 00:37:22,890 La meg bare lime dette virkelig fort inn i gedit 832 00:37:22,890 --> 00:37:27,240 og vise dette som vi viste Zamyla struktur tidligere. 833 00:37:27,240 --> 00:37:31,610 >> Hva serveren sender tilbake en lite objekt som ser ut som dette. 834 00:37:31,610 --> 00:37:37,140 Og så data.price er bare gi meg 0,1515. 835 00:37:37,140 --> 00:37:39,310 Så mange bevegelige deler her på en gang. 836 00:37:39,310 --> 00:37:41,860 >> Men de viktigste takeaways er at vi har denne muligheten 837 00:37:41,860 --> 00:37:44,600 for å gjøre ekstra HTTP forespørsler ved hjelp av Javascript 838 00:37:44,600 --> 00:37:46,090 uten å måtte laste siden på nytt. 839 00:37:46,090 --> 00:37:49,580 Og da kan vi faktisk endre nettsiden på fly. 840 00:37:49,580 --> 00:37:51,850 Og det viser seg at Javascript og andre språk 841 00:37:51,850 --> 00:37:54,510 kan brukes nå ikke bare å mutere nettsider, 842 00:37:54,510 --> 00:37:57,960 men å faktisk skrive programvare i en faktisk datamaskin, 843 00:37:57,960 --> 00:38:00,240 ikke bare begrenset til Chrome eller lignende. 844 00:38:00,240 --> 00:38:03,530 >> Faktisk if-- Colton, ville du gjerne bli med oss ​​tilbake her oppe 845 00:38:03,530 --> 00:38:06,100 med lab-kode, og Chang også? 846 00:38:06,100 --> 00:38:09,140 La oss gå videre, etter å ha snakket om anonyme funksjoner og tilbakeanrop 847 00:38:09,140 --> 00:38:13,090 og virkelig friste skjebnen her med en live demo med blødning 848 00:38:13,090 --> 00:38:16,480 edge-teknologi, en av disse Elite Motion enheter. 849 00:38:16,480 --> 00:38:18,940 Nå, denne enheten, husker, er en liten USB-enhet 850 00:38:18,940 --> 00:38:25,620 samt at-- det er beautiful-- som plugges inn i USB-portene. 851 00:38:25,620 --> 00:38:29,120 >> Og så gir innspill i form av menneskelige bevegelser 852 00:38:29,120 --> 00:38:32,560 ved å oppdage ved hjelp av infrarøde stråler, hovedsak, bevegelser fra armen. 853 00:38:32,560 --> 00:38:35,150 Så mens det Maria prøvde på før var muskuløs, 854 00:38:35,150 --> 00:38:39,000 faktisk følelsen hva som endring armen din, er dette infrarød basert. 855 00:38:39,000 --> 00:38:44,390 Så den ser etter bevegelser innen slags sfære av en fot eller så 856 00:38:44,390 --> 00:38:46,190 av selve enheten. 857 00:38:46,190 --> 00:38:48,950 >> Så hvorfor ikke jeg ta en stikke på dette først? 858 00:38:48,950 --> 00:38:53,100 Og la oss gå videre og kaste deg opp på overhead her. 859 00:38:53,100 --> 00:38:56,250 Så la oss sette Colton laptop opp her. 860 00:38:56,250 --> 00:38:58,360 Vi har fått Andrew på TV. 861 00:38:58,360 --> 00:39:00,160 Og hva ville du at jeg skal gjøre først? 862 00:39:00,160 --> 00:39:02,409 >> Colton: Gå videre og bare legger hendene over denne fyren 863 00:39:02,409 --> 00:39:04,430 og du vil se noen fantastiske glitter. 864 00:39:04,430 --> 00:39:07,230 >> DAVID J. MALAN: Very nice. 865 00:39:07,230 --> 00:39:11,110 Dette er alt skjer i sanntid. 866 00:39:11,110 --> 00:39:11,889 OK. 867 00:39:11,889 --> 00:39:12,680 All right, og jepp. 868 00:39:12,680 --> 00:39:14,119 Så hyggelig. 869 00:39:14,119 --> 00:39:15,410 Greit, hva annet kan vi gjøre? 870 00:39:15,410 --> 00:39:17,900 >> Colton: Gå til neste skjerm og se. 871 00:39:17,900 --> 00:39:19,136 >> DAVID J. MALAN: All right. 872 00:39:19,136 --> 00:39:21,780 >> Colton: En morsom liten lek hvor du får til å lage roboter. 873 00:39:21,780 --> 00:39:24,738 >> DAVID J. MALAN: Greit, så dette er falske hender som viser meg hva jeg skal gjøre. 874 00:39:24,738 --> 00:39:27,920 Colton: Ja Så sett i gang og hente en av blokkene 875 00:39:27,920 --> 00:39:30,637 og sette den på toppen av at robot kropp. 876 00:39:30,637 --> 00:39:32,137 DAVID J. MALAN: Åh, det er min hånd. 877 00:39:32,137 --> 00:39:34,000 Oh. 878 00:39:34,000 --> 00:39:34,780 OK, bedårende. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Vent litt, OK. 881 00:39:38,650 --> 00:39:41,320 Det vi går. 882 00:39:41,320 --> 00:39:43,590 >> COLTON: Jeg gjorde en på ulykke. 883 00:39:43,590 --> 00:39:45,423 >> DAVID J. MALAN: OK, jeg får denne fyren. 884 00:39:45,423 --> 00:39:45,923 Faen! 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 Da vi øvde denne siste natt, vet du hva dette devolved inn? 887 00:39:51,550 --> 00:39:54,285 >> Som dette. 888 00:39:54,285 --> 00:39:55,490 OK. 889 00:39:55,490 --> 00:39:55,990 Neste? 890 00:39:55,990 --> 00:39:56,860 >> COLTON: Sure. 891 00:39:56,860 --> 00:39:58,818 >> DAVID J. MALAN: All right, og det er en tredje. 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 OK. 894 00:40:01,674 --> 00:40:03,215 Colton: Og i denne, får du to-- 895 00:40:03,215 --> 00:40:04,923 DAVID J. MALAN: Oh, denne er vakker. 896 00:40:04,923 --> 00:40:06,650 Colton: --yeah, plukke fra hverandre denne blomsten. 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 Nei? 900 00:40:11,670 --> 00:40:14,515 Savnet. 901 00:40:14,515 --> 00:40:15,570 >> Colton: Åh, det du går. 902 00:40:15,570 --> 00:40:18,680 >> DAVID J. MALAN: Ah, se på det. 903 00:40:18,680 --> 00:40:19,830 Veldig hyggelig. 904 00:40:19,830 --> 00:40:22,470 Vel, hvorfor ikke 'vi tar ut en frivillig her 905 00:40:22,470 --> 00:40:24,180 som ønsker å komme videre opp. 906 00:40:24,180 --> 00:40:27,500 Hva med rett der i grønt, er det? 907 00:40:27,500 --> 00:40:30,540 >> Greit, og la oss have-- stedet for å gjøre det, noen av dere 908 00:40:30,540 --> 00:40:34,590 kanskje vet dette spillet her-- kutte tauet, kanskje? 909 00:40:34,590 --> 00:40:35,100 La oss se. 910 00:40:35,100 --> 00:40:37,320 Vi har våre briller på over her? 911 00:40:37,320 --> 00:40:38,625 >> OK. 912 00:40:38,625 --> 00:40:39,270 Takk. 913 00:40:39,270 --> 00:40:39,380 Hva heter du? 914 00:40:39,380 --> 00:40:40,350 >> PUBLIKUM: Laura. 915 00:40:40,350 --> 00:40:41,266 >> DAVID J. MALAN: Laura? 916 00:40:41,266 --> 00:40:42,120 Hyggelig å se. 917 00:40:42,120 --> 00:40:45,600 Hvis du ikke har noe imot å sette Google Glass i løpet av brillene dine. 918 00:40:45,600 --> 00:40:46,970 Dette er Colton. 919 00:40:46,970 --> 00:40:47,650 >> Colton: Hei. 920 00:40:47,650 --> 00:40:48,140 Hyggelig å møte deg. 921 00:40:48,140 --> 00:40:49,600 >> DAVID J. MALAN: OK, kom igjen rundt. 922 00:40:49,600 --> 00:40:52,516 Greit, så hva du kommer til å gjøre her, etter å ha spilt dette før, 923 00:40:52,516 --> 00:40:55,650 er satt hånden over Leap Motion her. 924 00:40:55,650 --> 00:40:57,210 Og nå pilen skal flytte. 925 00:40:57,210 --> 00:40:57,710 Oh, nope. 926 00:40:57,710 --> 00:40:58,066 >> PUBLIKUM: Nei. 927 00:40:58,066 --> 00:40:58,780 >> DAVID J. MALAN: Vi ønsker ikke å slutte enda. 928 00:40:58,780 --> 00:40:59,280 OK, vent. 929 00:40:59,280 --> 00:41:01,200 Over her. 930 00:41:01,200 --> 00:41:03,530 Så oppdager du holder din finger over noe, 931 00:41:03,530 --> 00:41:06,750 musen begynner å bli grønne, som er hvordan du klikker. 932 00:41:06,750 --> 00:41:08,980 >> Så sveve over Play. 933 00:41:08,980 --> 00:41:10,970 Og bare én finger er fine. 934 00:41:10,970 --> 00:41:13,869 Og nå klikke på den lille grønne fyren til venstre. 935 00:41:13,869 --> 00:41:15,410 Og nå holder til det fyller opp grønt. 936 00:41:15,410 --> 00:41:15,640 Good. 937 00:41:15,640 --> 00:41:16,990 Nå, like, nivå en opp toppen. 938 00:41:16,990 --> 00:41:20,190 >> PUBLIKUM: Ja, vi ønsker nivå en, her. 939 00:41:20,190 --> 00:41:21,660 >> DAVID J. MALAN: Good. 940 00:41:21,660 --> 00:41:25,500 OK, så alt du trenger å gjøre er å kutte tauet. 941 00:41:25,500 --> 00:41:28,240 Markøren er den hvite der nede. 942 00:41:28,240 --> 00:41:28,880 >> Veldig hyggelig. 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 Greit, det handler om å få hardere. 945 00:41:32,790 --> 00:41:34,800 Så hold fingeren kommende nå. 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 Good. 948 00:41:39,030 --> 00:41:39,999 Dette er vanskelig. 949 00:41:39,999 --> 00:41:40,966 >> PUBLIKUM: Oh crap. 950 00:41:40,966 --> 00:41:41,466 OK. 951 00:41:41,466 --> 00:41:42,466 Den ønsker å gå den veien. 952 00:41:42,466 --> 00:41:44,890 Oh crap, at-- 953 00:41:44,890 --> 00:41:47,120 >> DAVID J. MALAN: Yeah. 954 00:41:47,120 --> 00:41:50,700 Sekundært mål er å få alle stjernene. 955 00:41:50,700 --> 00:41:53,920 Greit, neste. 956 00:41:53,920 --> 00:41:57,504 >> La oss se om du kan få dette tredje. 957 00:41:57,504 --> 00:41:58,004 Good. 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 OK, gå over der. 960 00:42:06,840 --> 00:42:08,850 >> Jada. 961 00:42:08,850 --> 00:42:11,230 Oh, very nice. 962 00:42:11,230 --> 00:42:11,930 OK. 963 00:42:11,930 --> 00:42:13,534 >> Så hvorfor ikke vi utsette her i dag? 964 00:42:13,534 --> 00:42:15,200 La noen komme videre opp som ønsker å spille. 965 00:42:15,200 --> 00:42:16,880 Takk så mye til Laura vår frivillig. 966 00:42:16,880 --> 00:42:18,730 Og vi vil se deg på mandag. 967 00:42:18,730 --> 00:42:21,190 >> PUBLIKUM: Du har sannsynligvis vil disse tilbake. 968 00:42:21,190 --> 00:42:23,640 >> SPEAKER 2: Ved neste CS50-- 969 00:42:23,640 --> 00:42:35,222