1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J. Malan: Molt bé, pel que aquesta aquí és el braç Myo 3 00:00:41,880 --> 00:00:44,450 banda, un parell dels quals tenir per als projectes finals CS50. 4 00:00:44,450 --> 00:00:47,533 I això era una demostració que va fer cua que per endavant on essencialment 5 00:00:47,533 --> 00:00:51,120 aquest braç bastant fort banda de fins a aquí escolta als seus moviments musculars 6 00:00:51,120 --> 00:00:54,280 que després són mapejats en programari per a l'ordinador portàtil de Colton per aquí que 7 00:00:54,280 --> 00:00:57,230 havia iTunes i que cançó ja en cua. 8 00:00:57,230 --> 00:01:00,270 En lloc d'això em donem, Colton ha estat en el laboratori 9 00:01:00,270 --> 00:01:04,129 clarament tota la setmana per aconseguir una demostració llest per a un valent voluntari. 10 00:01:04,129 --> 00:01:07,430 Si algú vol venir en up-- va veure primer la mà. 11 00:01:07,430 --> 00:01:09,540 Anem amunt. 12 00:01:09,540 --> 00:01:12,530 >> Bé. 13 00:01:12,530 --> 00:01:13,886 I quin és el seu nom? 14 00:01:13,886 --> 00:01:14,800 >> AUDIÈNCIA: Uh, Maria. 15 00:01:14,800 --> 00:01:16,550 >> DAVID J. Malan: Maria, m'alegro de veure't. 16 00:01:16,550 --> 00:01:17,310 Anem per aquí. 17 00:01:17,310 --> 00:01:19,550 Permetin-me presentar a Colton. 18 00:01:19,550 --> 00:01:21,290 Colton, aquesta és Maria. 19 00:01:21,290 --> 00:01:23,050 >> COLTON: Hola, encantat de conèixer-te. 20 00:01:23,050 --> 00:01:24,330 >> DAVID J. Malan: Tots dret, per la qual cosa el primer pas, estem 21 00:01:24,330 --> 00:01:26,204 va a haver de posar això al seu avantbraç 22 00:01:26,204 --> 00:01:29,280 per la qual cosa és bastant estret fins a prop del seu colze. 23 00:01:29,280 --> 00:01:31,940 I mentrestant, tindrem posar en el nostre Google Glass 24 00:01:31,940 --> 00:01:33,720 i anem a barrejar les tecnologies d'avui. 25 00:01:33,720 --> 00:01:36,340 >> COLTON: En primer lloc haurem de connectar això en les coses. 26 00:01:36,340 --> 00:01:37,170 >> DAVID J. Malan: OK. 27 00:01:37,170 --> 00:01:39,795 En realitat, anem a posar el braç com prop d'aquest cable com sigui possible 28 00:01:39,795 --> 00:01:41,160 perquè puguem sincronitzar primer cap amunt. 29 00:01:41,160 --> 00:01:42,740 >> COLTON: Anem a fer això. 30 00:01:42,740 --> 00:01:46,500 >> DAVID J. Malan: I mentrestant, per la qual cosa que tothom pot aconseguir una mirada més de prop, 31 00:01:46,500 --> 00:01:50,290 anem tirem càmera d'Andrew a la pantalla allà. 32 00:01:50,290 --> 00:01:54,460 Així que tenim un cable USB que és està connectat a la banda de Maria. 33 00:01:54,460 --> 00:02:00,230 I permetin-me llanço pantalla de Colton a dalt en el projector següent. 34 00:02:00,230 --> 00:02:06,000 >> Així Colton és el registre del dispositiu ara com un Myo connectat a aquest cable. 35 00:02:06,000 --> 00:02:08,060 I ara el que Maria de farà momentàniament 36 00:02:08,060 --> 00:02:10,120 en realitat és caminar a través de els passos de calibratge 37 00:02:10,120 --> 00:02:12,830 i ensenyar el programari com els seus músculs responen 38 00:02:12,830 --> 00:02:16,070 quan es fan certs predefinit gestos que el programari entén. 39 00:02:16,070 --> 00:02:17,910 Si vol anar a davant de la pantalla. 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 Acceptar, seguir intentant-ho. 42 00:02:30,090 --> 00:02:31,860 >> COLTON: Anar com aquest. 43 00:02:31,860 --> 00:02:32,970 I així. 44 00:02:32,970 --> 00:02:34,563 I tot el camí a la dreta. 45 00:02:34,563 --> 00:02:35,922 Tornar. 46 00:02:35,922 --> 00:02:37,740 >> DAVID J. Malan: OK. 47 00:02:37,740 --> 00:02:38,960 Perspectiva diferent. 48 00:02:38,960 --> 00:02:39,620 No és vostè. 49 00:02:39,620 --> 00:02:40,350 Som nosaltres. 50 00:02:40,350 --> 00:02:41,749 >> MARIA: OK. 51 00:02:41,749 --> 00:02:42,540 DAVID J. Malan: No. 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 Anem a passar el més amunt pel que és més a prop del seu colze, o fins i tot amb més força. 54 00:02:51,540 --> 00:02:52,680 Bé. 55 00:02:52,680 --> 00:02:53,270 >> Aquí anem. 56 00:02:53,270 --> 00:02:56,780 Aquest seria un bon moment per CS52X. 57 00:02:56,780 --> 00:02:57,670 Cal anar. 58 00:02:57,670 --> 00:02:58,760 >> Molt agradable. 59 00:02:58,760 --> 00:03:01,170 Okay. 60 00:03:01,170 --> 00:03:02,790 Polze per petit. 61 00:03:02,790 --> 00:03:03,380 >> Molt agradable. 62 00:03:03,380 --> 00:03:05,140 Estén els teus dits. 63 00:03:05,140 --> 00:03:06,240 Bé. 64 00:03:06,240 --> 00:03:06,910 Ona dreta. 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 S'està mostrant curiositat que amb l'mà- esquerra 67 00:03:17,010 --> 00:03:19,665 >> COLTON: Sí, això és estrany. 68 00:03:19,665 --> 00:03:21,790 DAVID J. Malan: Salutació a la dreta i seguir endavant. 69 00:03:21,790 --> 00:03:22,998 Un avanç ràpid per saltar o següent. 70 00:03:22,998 --> 00:03:25,020 Això està bé dret Wave. 71 00:03:25,020 --> 00:03:26,650 >> MARIA: Jo no-- esperar. 72 00:03:26,650 --> 00:03:28,430 >> DAVID J. Malan: Necessita ajuda? 73 00:03:28,430 --> 00:03:30,027 >> COLTON: Així que et vas d'aquesta manera. 74 00:03:30,027 --> 00:03:31,860 MARIA: S'està convertint la una altra cosa, però. 75 00:03:31,860 --> 00:03:32,390 COLTON: És. 76 00:03:32,390 --> 00:03:34,250 DAVID J. Malan: Sí No sé raó per la qual vostè està mostrant un esquerrà. 77 00:03:34,250 --> 00:03:36,458 COLTON: Per què no try-- només tractar d'anar així. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J. Malan: No? 80 00:03:40,090 --> 00:03:42,580 Potser arribar al seu braç una mica més recte 81 00:03:42,580 --> 00:03:46,070 i que sigui més abrupte com aquest. 82 00:03:46,070 --> 00:03:48,176 Sí, està bé, anem. 83 00:03:48,176 --> 00:03:49,670 >> MARIA: Ho sento. 84 00:03:49,670 --> 00:03:51,170 DAVID J. Malan: No és culpa teva. 85 00:03:51,170 --> 00:03:53,018 COLTON: Està bé. 86 00:03:53,018 --> 00:03:55,430 DAVID J. Malan: D'acord. 87 00:03:55,430 --> 00:03:56,220 Bueno-- 88 00:03:56,220 --> 00:03:57,620 >> MARIA: Hem ometre això, llavors? 89 00:03:57,620 --> 00:03:59,620 DAVID J. Malan: Sí, anem a et deixi fora del ganxo. 90 00:03:59,620 --> 00:04:03,130 Així que si algú vol fer un projecte final utilitzant aquesta avantguarda 91 00:04:03,130 --> 00:04:07,707 maquinari, adonar-se que només podria prendre una mica de temps per acostumar. 92 00:04:07,707 --> 00:04:10,290 I esto-- la realitat és aquesta en realitat és molt sagnat vora. 93 00:04:10,290 --> 00:04:12,040 >> Això és el que es diu el kit de desenvolupament, que 94 00:04:12,040 --> 00:04:14,956 està destinat a ser essencialment un pre-llançament de manera que la gent pot fer exactament 95 00:04:14,956 --> 00:04:18,690 esto-- lluitar amb ell, la figura com els cossos de les persones treballen 96 00:04:18,690 --> 00:04:19,980 amb la tecnologia. 97 00:04:19,980 --> 00:04:21,750 Així que si vols després, després de la conferència, 98 00:04:21,750 --> 00:04:23,750 podem deixar que vostè ve i prendre una altra punyalada en ella. 99 00:04:23,750 --> 00:04:26,970 Però d'altra banda, una ronda d'aplaudiments, si que vam poder, per a Maria per venir a endavant. 100 00:04:26,970 --> 00:04:28,770 >> MARIA: Gràcies. 101 00:04:28,770 --> 00:04:30,390 >> DAVID J. Malan: Gràcies. 102 00:04:30,390 --> 00:04:34,945 Ens aferrem a això, però donarem usted-- què tal una bola de la tensió aquí? 103 00:04:34,945 --> 00:04:38,620 Oh, i- si: sí, gràcies. 104 00:04:38,620 --> 00:04:39,715 Bé. 105 00:04:39,715 --> 00:04:45,750 Així que per als curiosos, si vostè fos familiaritzat amb l'elecció de so 106 00:04:45,750 --> 00:04:47,670 que vam fer allà abans, una televisió increïble 107 00:04:47,670 --> 00:04:50,210 demostrar que vostè ha absolutament ser afartament-veient a Netflix 108 00:04:50,210 --> 00:04:51,110 és aquest d'aquí. 109 00:04:51,110 --> 00:04:54,472 >> ALTAVEU 1: Senyores i senyors, un mag anomenat Josh. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J. Malan: I pel que es veu, és una cosa que em de text durant la conferència ara. 112 00:05:08,050 --> 00:05:11,190 Estic sent vaig dir que Maria tenia un aniversari ahir. 113 00:05:11,190 --> 00:05:14,095 Així que feliç aniversari de CS50 a Maria també. 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> Així que vostè pot haver llegit en el mes recent que aquest cavallers aquí, Steve 116 00:05:22,090 --> 00:05:25,260 Ballmer, qui era en realitat classe de 1977 a la universitat, 117 00:05:25,260 --> 00:05:27,170 recentment retirat per Microsoft. 118 00:05:27,170 --> 00:05:29,620 Ell era estudiant aquí, a continuació, un parell d'anys més tard 119 00:05:29,620 --> 00:05:31,910 es va trobar en Stanford Business School 120 00:05:31,910 --> 00:05:34,160 quan va rebre un telèfon trucada d'un amic seu que 121 00:05:34,160 --> 00:05:36,516 havia viscut al passadís d'ell aquí a Harvard. 122 00:05:36,516 --> 00:05:38,640 El nom d'aquest amic era Bill Gates, i en el moment, 123 00:05:38,640 --> 00:05:42,700 ell estava tractant de reclutar Steve per ser la primera persona de negocis, realment, 124 00:05:42,700 --> 00:05:45,720 en una petita empresa de nom de Microsoft. 125 00:05:45,720 --> 00:05:48,960 >> Una breu història llarga, Steve va ser finalment conquerit, 126 00:05:48,960 --> 00:05:52,130 unit a Microsoft quan tenia només 30 empleats. 127 00:05:52,130 --> 00:05:54,300 I per al moment en què es va retirar fa poc, 128 00:05:54,300 --> 00:05:58,100 la companyia tenia 100.000 empleats en els últims anys. 129 00:05:58,100 --> 00:06:01,171 I pel que un lloc web conegut com The Verge preparat aquest homenatge en vídeo 130 00:06:01,171 --> 00:06:02,920 que pensem que seria millor compartit que li dóna 131 00:06:02,920 --> 00:06:08,380 un sentit de tot el que l'energia de Steve porta a qualsevol presentació que dóna. 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [REPRODUCCIÓ DE VÍDEO] 134 00:06:12,550 --> 00:06:16,220 -Microsoft És com un quart fill. 135 00:06:16,220 --> 00:06:18,260 Els nens fan sortir de la casa. 136 00:06:18,260 --> 00:06:21,875 En aquest cas, suposo Me'n vaig de la casa. 137 00:06:21,875 --> 00:06:23,270 Hey Bill, whazzap? 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap? 139 00:06:24,200 --> 00:06:25,320 >> -Escolta, Wazzap? 140 00:06:25,320 --> 00:06:28,590 Se'ns ha donat un enorme oportunitat. 141 00:06:28,590 --> 00:06:30,210 I Bill ens va donar aquesta oportunitat. 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 Vull donar les gràcies a Bill perquè. 144 00:06:36,770 --> 00:06:39,630 Vull que també. 145 00:06:39,630 --> 00:06:42,500 El ritme de la innovació no va a reduir la velocitat. 146 00:06:42,500 --> 00:06:45,140 >> Es va a arribar més ràpid i més ràpid. 147 00:06:45,140 --> 00:06:50,165 Pot haver-hi uns pocs competidors que per desgràcia estan eliminats! 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> M'encanta aquesta empresa. 150 00:06:59,564 --> 00:07:00,064 Sí! 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 Sóc un PC, i m'encanta aquesta empresa! 153 00:07:08,250 --> 00:07:13,090 >> Desenvolupadors, desenvolupadors, desenvolupadors, desenvolupadors, desenvolupadors, desenvolupadors, 154 00:07:13,090 --> 00:07:14,560 desenvolupadors, desenvolupadors. 155 00:07:14,560 --> 00:07:17,500 156 00:07:17,500 --> 00:07:18,970 Sí! 157 00:07:18,970 --> 00:07:19,950 Els desenvolupadors web! 158 00:07:19,950 --> 00:07:21,420 >> Els desenvolupadors web! 159 00:07:21,420 --> 00:07:22,890 Els desenvolupadors web! 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 Escolteu la resta que vostè obtenir sense cost addicional! 162 00:07:28,770 --> 00:07:31,960 >> L'executiu de MS-DOS, una cita calendari, una pica de targetes, un bloc de notes, 163 00:07:31,960 --> 00:07:33,750 un rellotge, un panell de control. 164 00:07:33,750 --> 00:07:35,461 I, pots creure-ho? 165 00:07:35,461 --> 00:07:35,960 Reversie! 166 00:07:35,960 --> 00:07:37,270 >> Gravar-los en un CD! 167 00:07:37,270 --> 00:07:38,660 Poseu a MSN! 168 00:07:38,660 --> 00:07:40,422 Vostè els envia per correu als amics! 169 00:07:40,422 --> 00:07:41,790 >> Tot amb un sol clic! 170 00:07:41,790 --> 00:07:48,670 Un Microsoft, una estratègia, un team-- centrat, disciplinat, professional, 171 00:07:48,670 --> 00:07:50,610 i expert en tot el que fem. 172 00:07:50,610 --> 00:07:52,670 Permetin-me utilitzar una línia d'una vella pel·lícula. 173 00:07:52,670 --> 00:07:54,810 >> Les relacions són com els taurons. 174 00:07:54,810 --> 00:07:57,480 Es mouen cap endavant o es moren. 175 00:07:57,480 --> 00:08:01,470 De fet, crec tecnologia empreses són els mateixos. 176 00:08:01,470 --> 00:08:04,801 >> [FI REPRODUCCIÓ DE VÍDEO] 177 00:08:04,801 --> 00:08:08,050 DAVID J. Malan: Així que estem molt contents de anunciar que Steve s'unirà a nosaltres 178 00:08:08,050 --> 00:08:13,320 aquí a CS50 proper dimecres a les el lloc i l'hora de costum aquí. 179 00:08:13,320 --> 00:08:14,750 Espai probable serà limitat. 180 00:08:14,750 --> 00:08:19,650 I així, a unir-se a nosaltres en persona, si us plau dirigir-se avui o poc després 181 00:08:19,650 --> 00:08:22,600 a cs50.harvard.edu/register. 182 00:08:22,600 --> 00:08:25,780 >> I seguirem per Dimarts confirmant taques. 183 00:08:25,780 --> 00:08:29,900 Tenim ganes que el pròxim Dimecres durant conferència a CS50. 184 00:08:29,900 --> 00:08:33,706 Ara, en altres notícies, es va acudir venir a través d'aquest a The Crimson només 185 00:08:33,706 --> 00:08:34,289 l'altre dia. 186 00:08:34,289 --> 00:08:37,370 >> Resulta que un de personal d'CS50 i almenys un dels estudiants del CS50 187 00:08:37,370 --> 00:08:40,299 Actualment s'està executant per UC president i vicepresident, 188 00:08:40,299 --> 00:08:42,950 que em va portar de tornada als meus propis dies enrere 189 00:08:42,950 --> 00:08:45,920 quan vaig perdre l'elecció UC miserablement. 190 00:08:45,920 --> 00:08:48,210 Però el costat positiu en això és que sempre 191 00:08:48,210 --> 00:08:50,604 explicar la història és que una de la que estic segur 192 00:08:50,604 --> 00:08:52,770 moltes raons per les que van perdre la elecció era una falta completa 193 00:08:52,770 --> 00:08:54,103 d'un talent per parlar en públic. 194 00:08:54,103 --> 00:08:56,950 I així, amb tota sinceritat, que em va portar, que l'experiència 195 00:08:56,950 --> 00:09:02,235 Crec que el meu primer any, per signar en realitat per Harvard Computer Society, que 196 00:09:02,235 --> 00:09:04,610 és el grup al campus que exerceix en diverses xerrades tècniques 197 00:09:04,610 --> 00:09:05,318 i altres coses. 198 00:09:05,318 --> 00:09:08,117 I em vaig fer càrrec del seu ensenyament seminaris i, per tant, 199 00:09:08,117 --> 00:09:09,950 tingut una oportunitat, un meravellosa oportunitat, 200 00:09:09,950 --> 00:09:12,620 per començar a treballar en exactament això. 201 00:09:12,620 --> 00:09:15,000 Però també, vaig tenir l'oportunitat durant aquesta experiència 202 00:09:15,000 --> 00:09:16,930 per ensenyar a mi mateix tant més HTML. 203 00:09:16,930 --> 00:09:21,080 I així em demorat ahir a la nit per mirant a través de la pàgina web basat en HTML 204 00:09:21,080 --> 00:09:28,066 Vaig fer com el 1997, el 98, per a mi campanya que s'assembla a això aquí. 205 00:09:28,066 --> 00:09:29,920 Ho sé. 206 00:09:29,920 --> 00:09:33,340 >> Porque-- i, per descomptat, previ avís aquesta increïble decisió de disseny el 1998 207 00:09:33,340 --> 00:09:33,850 o el que sigui. 208 00:09:33,850 --> 00:09:36,475 La primera cosa que vostè vol que els usuaris fer en visitar el seu lloc web 209 00:09:36,475 --> 00:09:39,860 és haver de fer clic en un altre enllaç només per entrar a la seva pàgina web amb el monjo 210 00:09:39,860 --> 00:09:43,940 darrere d'una cortina cobert on pel que sembla, la meva plataforma de campanya era. 211 00:09:43,940 --> 00:09:46,330 I això és tot el que obtindrà avui és només una captura de pantalla. 212 00:09:46,330 --> 00:09:49,500 Però jo estava llegint a través de, com, els meus cartells de la campanya passada nit 213 00:09:49,500 --> 00:09:50,490 i la meva plataforma. 214 00:09:50,490 --> 00:09:52,960 >> I jo estava tan enfadat amb el temps. 215 00:09:52,960 --> 00:09:55,380 La meva plataforma era-- va ser interessant. 216 00:09:55,380 --> 00:09:57,730 Així que m'he calmat des de llavors. 217 00:09:57,730 --> 00:10:03,550 Però algun dia, vaig a córrer de nou i esperem millor aquesta vegada. 218 00:10:03,550 --> 00:10:07,265 >> Així HTML, que el llenguatge en el que vaig fer que en-- aviat té molt més-- 219 00:10:07,265 --> 00:10:09,140 és una cosa que hem estat parlant dels últims temps 220 00:10:09,140 --> 00:10:12,460 i en gran mesura amb el benentès ara que ens hem mogut a altres llengües. 221 00:10:12,460 --> 00:10:15,650 Però farem una pausa per un moment i posar una mica d'aquestes coses en el seu context. 222 00:10:15,650 --> 00:10:18,040 Així que en una frase, què és HTML? 223 00:10:18,040 --> 00:10:19,370 >> O, el que s'utilitza? 224 00:10:19,370 --> 00:10:20,208 Qualsevol persona? 225 00:10:20,208 --> 00:10:20,708 Sí. 226 00:10:20,708 --> 00:10:22,002 >> AUDIÈNCIA: marcat pels llocs web. 227 00:10:22,002 --> 00:10:23,460 DAVID J. Malan: marcat per al lloc web. 228 00:10:23,460 --> 00:10:27,100 Així que és un llenguatge de marcat que li permet estructurar una pàgina web. 229 00:10:27,100 --> 00:10:30,040 Capçalera puja aquí, títol va aquí, el cos va aquí. 230 00:10:30,040 --> 00:10:33,280 Això està en negreta, això és italics-- aquest tipus de detall. 231 00:10:33,280 --> 00:10:33,830 >> Bé, bé. 232 00:10:33,830 --> 00:10:37,620 Així CSS permet usted-- i jo va prendre algunes llibertats allà 233 00:10:37,620 --> 00:10:40,990 amb la negreta i cursiva orientada al degut Això és millor implementats amb aquest. 234 00:10:40,990 --> 00:10:42,096 CSS és-- què? 235 00:10:42,096 --> 00:10:42,845 Digui en una frase. 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 Qualsevol persona en absolut. 238 00:10:46,720 --> 00:10:46,870 Sí. 239 00:10:46,870 --> 00:10:49,286 >> Audiència: Adorns i coses, com la forma de dissenyar-lo. 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 DAVID J. Malan: OK, bé. 242 00:10:52,810 --> 00:10:55,420 Els adorns que li permeten dissenyar o estilitzar que 243 00:10:55,420 --> 00:10:59,540 amb coses com negreta i cursiva i colors i també més fi 244 00:10:59,540 --> 00:11:01,330 posicionament de gra d'elements. 245 00:11:01,330 --> 00:11:04,520 D'alguna manera li permet prendre les coses última milla de manera que si, per exemple, 246 00:11:04,520 --> 00:11:08,130 en Pset7, t'hauràs adonat de la seva La pàgina de la cartera si estàs en aquest moment 247 00:11:08,130 --> 00:11:12,270 ja que una taula per defecte que vostè fer per mostrar les tinences de valors de l'usuari 248 00:11:12,270 --> 00:11:15,740 i diners en efectiu, probablement, es veu bastant horrible per defecte, sense espais en blanc. 249 00:11:15,740 --> 00:11:18,420 Tot tipus d'atestat de junts en files i columnes. 250 00:11:18,420 --> 00:11:20,662 >> Bé, amb una mica de CSS, com vostè pot adonar-se, 251 00:11:20,662 --> 00:11:23,870 en realitat es pot modificar això i fer que sigui alguna cosa molt més familiar i molt més 252 00:11:23,870 --> 00:11:24,870 més bonic de veure. 253 00:11:24,870 --> 00:11:27,730 Així que es tracta de la CSS estilització de llocs web. 254 00:11:27,730 --> 00:11:31,970 Però llavors, hem introduït una nova llenguatge, PHP, el que ens permet fer el que? 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> Anem a fer què? 257 00:11:37,590 --> 00:11:38,177 Qualsevol persona. 258 00:11:38,177 --> 00:11:40,010 He de aventurar-se més enllà el primer parell de files. 259 00:11:40,010 --> 00:11:40,260 Sí. 260 00:11:40,260 --> 00:11:41,719 >> AUDIÈNCIA: Generar contingut dinàmic. 261 00:11:41,719 --> 00:11:42,718 DAVID J. Malan: Perfecte. 262 00:11:42,718 --> 00:11:43,850 Generar contingut dinàmic. 263 00:11:43,850 --> 00:11:45,808 I vostè pot fer això en qualsevol nombre d'idiomes. 264 00:11:45,808 --> 00:11:50,120 Ens va passar a utilitzar PHP perquè és en part, tan semblant a la sintaxi de C. 265 00:11:50,120 --> 00:11:52,000 >> Però PHP fa exactament això. 266 00:11:52,000 --> 00:11:54,620 Se li permet generar dinàmicament la sortida. 267 00:11:54,620 --> 00:11:57,890 I alguns dels que la producció podria ser HTML, com ho hem estat fent normalment. 268 00:11:57,890 --> 00:12:00,160 I també, perquè és un llenguatge de programació, és 269 00:12:00,160 --> 00:12:03,240 el mecanisme a través del qual podem parlar amb les bases de dades. 270 00:12:03,240 --> 00:12:05,730 >> I podem fer consultes a altres servidors com yahoos 271 00:12:05,730 --> 00:12:08,660 i programàticament fer res realment que et poden d'una altra manera 272 00:12:08,660 --> 00:12:10,400 volen obligar un equip a fer. 273 00:12:10,400 --> 00:12:13,580 Així que PHP permet a començar donar sortida de manera dinàmica el contingut. 274 00:12:13,580 --> 00:12:16,900 Esta és la lògica, jo no tenia un lloc web dinàmic en 1998. 275 00:12:16,900 --> 00:12:18,460 >> Era només una pàgina web estàtica. 276 00:12:18,460 --> 00:12:22,250 El meu contingut havia de ser canviat per manualment amb gedit o algun equivalent. 277 00:12:22,250 --> 00:12:25,290 Però PHP és el que solíem o podria haver utilitzat, més aviat, 278 00:12:25,290 --> 00:12:27,260 per a alguna cosa com la Lloc web Frosh missatges instantanis, que 279 00:12:27,260 --> 00:12:31,160 se suposava que anava a prendre registres i administrar una llista de coses que users-- 280 00:12:31,160 --> 00:12:33,550 en realitat estan canviant més temps, tot i que ens ha tocat 281 00:12:33,550 --> 00:12:35,990 utilitzar Perl, una diferent el llenguatge de l'època. 282 00:12:35,990 --> 00:12:40,350 >> I després, finalment, hem introduït SQL-- Structured Query Language. 283 00:12:40,350 --> 00:12:43,845 Així que encara un altre idioma que s'usa per a què? 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 S'utilitza per a què? 286 00:12:47,639 --> 00:12:49,430 Podem aventurar slight-- Bé, no anem 287 00:12:49,430 --> 00:12:51,263 per arribar molt més lluny de l'orquestra aquí. 288 00:12:51,263 --> 00:12:53,432 AUDIÈNCIA: És un protocol utilitzat per parlar amb les bases de dades. 289 00:12:53,432 --> 00:12:55,640 DAVID J. Malan: Un protocol utilitzat per parlar amb les bases de dades. 290 00:12:55,640 --> 00:12:56,181 Permetin-me modificar. 291 00:12:56,181 --> 00:12:59,280 És un llenguatge natural utilitzat parlar amb databases-- selecciona 292 00:12:59,280 --> 00:13:01,280 i les insercions i eliminacions i actualitzacions i realitat 293 00:13:01,280 --> 00:13:03,840 fins i tot més característiques que que ni tan sols hem bussejat 294 00:13:03,840 --> 00:13:07,920 a però és possible que vulgueu tenir explore-- explorar per, per exemple, un projecte final. 295 00:13:07,920 --> 00:13:09,560 Així que hi ha aquestes diverses peces. 296 00:13:09,560 --> 00:13:13,100 >> I és d'esperar Pset7, tot i que seva especificació és bastant llarg, 297 00:13:13,100 --> 00:13:15,990 és deliberadament llarg caminar que a través de com aquestes coses poden tots 298 00:13:15,990 --> 00:13:17,210 ser escrit junts. 299 00:13:17,210 --> 00:13:20,300 Ara, el dilluns, que introduït el nostre últim idioma 300 00:13:20,300 --> 00:13:23,430 que anem a introduir formalment en la descomptat-- que és, JavaScript. 301 00:13:23,430 --> 00:13:25,720 Això, com PHP, és un llenguatge interpretat. 302 00:13:25,720 --> 00:13:28,110 >> No obstant això, una distinció clau Jo vaig proposar el dilluns 303 00:13:28,110 --> 00:13:32,730 és que mentre que PHP s'està executant o sent interpretat en el servidor, el que 304 00:13:32,730 --> 00:13:35,990 en aquest cas és l'aparell CS50, o podria haver-hi alguna web comercial 305 00:13:35,990 --> 00:13:39,370 servidor a Internet, JavaScript general 306 00:13:39,370 --> 00:13:43,650 és un llenguatge que s'executa el costat del client no servidor side-- així en el navegador. 307 00:13:43,650 --> 00:13:46,970 És a dir, de la mateixa manera que quan vaig obrir Facebook fins al codi font i va trobar tot 308 00:13:46,970 --> 00:13:51,510 d'aquests arxius .js, la implicació era que quan vostè visita Facebook o més 309 00:13:51,510 --> 00:13:54,810 Llocs web en aquests dies, s'obté no només HTML, no només CSS, 310 00:13:54,810 --> 00:13:59,370 però un munt de JavaScript codi sovint en la forma d'arxius .js. 311 00:13:59,370 --> 00:14:03,970 I llavors és el browser-- seu propi Mac o PC-- que executa aquest codi. 312 00:14:03,970 --> 00:14:05,990 >> Però el navegador executa. 313 00:14:05,990 --> 00:14:08,070 Es pot pensar en una mena de caixa de sorra. 314 00:14:08,070 --> 00:14:12,420 Així que el codi JavaScript no hauria de ser capaç d'esborrar arxius a l'ordinador. 315 00:14:12,420 --> 00:14:14,730 No hauria de ser capaç de enviar missatges de correu electrònic en el seu nom. 316 00:14:14,730 --> 00:14:17,760 El seu tipus de navegador restringeix el que pot fer amb ella. 317 00:14:17,760 --> 00:14:20,630 >> Així que en aquest sentit, que és una mica menys potent, potser, que C. 318 00:14:20,630 --> 00:14:24,030 Però JavaScript pot, com un a un costat, ser utilitzat en el servidor, 319 00:14:24,030 --> 00:14:27,740 encara que anem tendim a no parlar referent a això en aquest context. 320 00:14:27,740 --> 00:14:29,740 Així que ara anem a lligar aquests junts. 321 00:14:29,740 --> 00:14:34,000 Una setmana més enrere, presentem una mica d'HTML a la pàgina web súper avorrit esquerra-. 322 00:14:34,000 --> 00:14:35,000 >> Només diu hola món. 323 00:14:35,000 --> 00:14:38,110 I llavors em vaig proposar a la dreta podem tipus de robar les idees 324 00:14:38,110 --> 00:14:41,470 a partir de la discussió de estructures de dades en C 325 00:14:41,470 --> 00:14:45,270 i pensar en com aquest jeràrquica llenguatge de marcat de l'esquerra 326 00:14:45,270 --> 00:14:49,720 podria ser elaborat o aplicat en la memòria com una estructura d'arbre real amb nodes 327 00:14:49,720 --> 00:14:51,400 i punters i aquest tipus de detalls. 328 00:14:51,400 --> 00:14:53,820 A la dreta, que anomenem que un document DOM-- 329 00:14:53,820 --> 00:14:56,800 Objecte Model-- que és just una forma elegant de dir arbre. 330 00:14:56,800 --> 00:14:59,520 >> Ara, per què és això útil per a pensar-hi d'aquesta manera? 331 00:14:59,520 --> 00:15:01,680 Perquè ara amb JavaScript, perquè tenim 332 00:15:01,680 --> 00:15:05,810 codi que arriba a jugar en aquest medi ambient, l'HTML real que és 333 00:15:05,810 --> 00:15:08,360 estat enviat al navegador ja i ja té 334 00:15:08,360 --> 00:15:12,690 ha carregat en la memòria pel navegador en un arbre en el seu equip de 335 00:15:12,690 --> 00:15:18,270 RAM com aquest, podem utilitzar JavaScript per realment recórrer o caminar o recerca 336 00:15:18,270 --> 00:15:21,800 o canviar aquest arbre DOM però volem. 337 00:15:21,800 --> 00:15:24,040 Així que, de fet, si vostè pensa sobre facebook.com, 338 00:15:24,040 --> 00:15:27,660 si s'utilitza la funció de xat, si ús Gmail i la característica Gchat, 339 00:15:27,660 --> 00:15:30,540 res on has missatges que vénen una i altra vegada 340 00:15:30,540 --> 00:15:35,880 i de nou, aquests missatges són probablement, com, etiqueta LI, etiquetes llista d'elements, potser. 341 00:15:35,880 --> 00:15:37,940 >> O potser són només divs que mantenen apareixent 342 00:15:37,940 --> 00:15:39,770 cada vegada que rebi un missatge instantani. 343 00:15:39,770 --> 00:15:42,960 I pel que només significa el que Facebook o Google està fent 344 00:15:42,960 --> 00:15:45,200 està cada vegada que aconseguir un missatge des del servidor, 345 00:15:45,200 --> 00:15:48,740 probablement estan utilitzant JavaScript que només ha d'afegir un altre node 346 00:15:48,740 --> 00:15:52,700 a aquest tree-- un altre node a aquesta arbre que llavors només es veu visualment 347 00:15:52,700 --> 00:15:54,570 com una nova línia de text a la pantalla. 348 00:15:54,570 --> 00:15:57,100 Però estan inserint en aquesta estructura de dades. 349 00:15:57,100 --> 00:15:59,742 >> Així que en les classes com CS124 i altres, podràs 350 00:15:59,742 --> 00:16:02,200 en realitat escriure més codi contra estructures de dades com aquest. 351 00:16:02,200 --> 00:16:04,310 Però per ara en JavaScript, només haurem d'assumir 352 00:16:04,310 --> 00:16:07,920 tenim tota aquesta funcionalitat de forma gratuïta des del llenguatge mateix. 353 00:16:07,920 --> 00:16:09,210 Així que donem una ullada a un exemple. 354 00:16:09,210 --> 00:16:13,120 >> Permetin-me obrir un fitxer anomenat form.html. 355 00:16:13,120 --> 00:16:14,601 És súper simple. 356 00:16:14,601 --> 00:16:15,600 Només es veu com aquest. 357 00:16:15,600 --> 00:16:17,860 >> No CSS, sense pensar en l'estètica. 358 00:16:17,860 --> 00:16:19,810 És purament funcional i pel que sembla estic 359 00:16:19,810 --> 00:16:24,000 demanant un correu electrònic, una contrasenya, contrasenya de nou, i després un xec 360 00:16:24,000 --> 00:16:26,150 estar d'acord amb alguns dels termes i condicions. 361 00:16:26,150 --> 00:16:28,740 El que el codi font d'aquest sembla que és probablement alguna cosa 362 00:16:28,740 --> 00:16:31,030 es pot endevinar amb una mica de pensament ara. 363 00:16:31,030 --> 00:16:32,840 Tinc una etiqueta de formulari aquí. 364 00:16:32,840 --> 00:16:36,190 >> Una acció aparentment es va a anar a un fitxer anomenat register.php. 365 00:16:36,190 --> 00:16:37,870 El mètode que utilitzaré és arribar. 366 00:16:37,870 --> 00:16:40,880 I després tinc un text camp el nom és de correu electrònic. 367 00:16:40,880 --> 00:16:43,340 >> Tinc un camp de contrasenya el nom és la contrasenya. 368 00:16:43,340 --> 00:16:45,420 Tinc una altra camp de contrasenya el nom 369 00:16:45,420 --> 00:16:47,342 és la confirmació d'alguna cosa arbitràriament. 370 00:16:47,342 --> 00:16:49,690 És només un altre paràmetre HTTP. 371 00:16:49,690 --> 00:16:54,430 >> I llavors nosaltres no hem utilitzat aquests excepció des dels missatges instantanis Frosh Demo en class-- 372 00:16:54,430 --> 00:16:56,692 una casella de verificació que està només tipus és igual a xec. 373 00:16:56,692 --> 00:16:57,900 I vaig a trucar a aquest acord. 374 00:16:57,900 --> 00:17:00,700 Així que he tipus de forma arbitrària, sinó convenientment anomenat aquests camps. 375 00:17:00,700 --> 00:17:03,450 Així que ara, quan aquesta forma aconsegueix presentat, anem a veure què passa. 376 00:17:03,450 --> 00:17:07,290 Si ho faig malan@harvard.edu, Vaig a fer una clau d'carmesí. 377 00:17:07,290 --> 00:17:09,530 Vaig a fer una contrasenya de res. 378 00:17:09,530 --> 00:17:10,910 No anem a cooperar. 379 00:17:10,910 --> 00:17:12,280 >> I no vaig a marcar la casella. 380 00:17:12,280 --> 00:17:13,940 Permetin-me feu clic a Registrar. 381 00:17:13,940 --> 00:17:15,420 I diu, hm, que estiguis registrat. 382 00:17:15,420 --> 00:17:16,069 En realitat no. 383 00:17:16,069 --> 00:17:17,450 >> Però l'URL canviar. 384 00:17:17,450 --> 00:17:22,280 Així que aquesta forma va ser clarament permès a sotmetre a register.php. 385 00:17:22,280 --> 00:17:25,160 Però és de suposar, que hauria de ser la captura d'alguns d'aquests errors. 386 00:17:25,160 --> 00:17:27,569 Ara, en Pset7 i alguns dels nostres exemples de conferències, 387 00:17:27,569 --> 00:17:30,130 tindríem generalment imprimir un gran missatge d'error vermell aquí 388 00:17:30,130 --> 00:17:33,760 dient, el nom que falta, o desapareguts contrasenya. 389 00:17:33,760 --> 00:17:37,680 Ho hem fet abans i que hem detecció d'errors del costat del servidor es faci. 390 00:17:37,680 --> 00:17:41,580 >> No obstant això, molts llocs web en aquests dies fer la detecció d'errors en el client 391 00:17:41,580 --> 00:17:42,810 on l'URL no canvia. 392 00:17:42,810 --> 00:17:44,101 Tota la pàgina no s'actualitza. 393 00:17:44,101 --> 00:17:46,940 Vostè obté una resposta instantània des del navegador. 394 00:17:46,940 --> 00:17:48,070 Potser alguna cosa surt vermell. 395 00:17:48,070 --> 00:17:49,190 >> Potser vostè aconsegueix una pop-up. 396 00:17:49,190 --> 00:17:53,240 Però no perdis temps enviant a el servidor de dades que és incompleta. 397 00:17:53,240 --> 00:17:56,050 Així que anem a veure com podem aconseguir aquesta característica també. 398 00:17:56,050 --> 00:17:59,660 >> Déjame anar a form1.html, que té el mateix aspecte. 399 00:17:59,660 --> 00:18:03,530 Però si aquesta vegada ho faig malan@harvard.edu i escric carmesí 400 00:18:03,530 --> 00:18:07,350 i jo no coopero més però feu clic a Registre, compte ara. 401 00:18:07,350 --> 00:18:08,940 No és la solució més sexy. 402 00:18:08,940 --> 00:18:10,900 Almenys jo he agafat aquest error. 403 00:18:10,900 --> 00:18:12,900 I jo he fet servir l'alerta funció en JavaScript-- 404 00:18:12,900 --> 00:18:14,090 que només estem fent servir a classe. 405 00:18:14,090 --> 00:18:16,430 En general, vostè no ha d'utilitzar aquest ja que pot arribar molt ràpidament 406 00:18:16,430 --> 00:18:17,160 de control. 407 00:18:17,160 --> 00:18:19,180 Però contrasenyes no coincideixen és l'error. 408 00:18:19,180 --> 00:18:21,120 >> Déjame anar endavant i feu clic a D'acord. 409 00:18:21,120 --> 00:18:25,040 Però el que el punt clau aquí és que la URL no va canviar. 410 00:18:25,040 --> 00:18:27,960 Emaciación Així que no he molestat hora del servidor demanant-li que 411 00:18:27,960 --> 00:18:30,750 una pregunta que jo pogués tenir descobert la resposta a mi mateix. 412 00:18:30,750 --> 00:18:33,210 >> I l'usuari, encara que estat parlant d'això 413 00:18:33,210 --> 00:18:35,264 més llarg que l'usuari de pensarà en això, 414 00:18:35,264 --> 00:18:36,680 tindrà una resposta instantània. 415 00:18:36,680 --> 00:18:39,044 No hi ha latència amb la connexió de xarxes. 416 00:18:39,044 --> 00:18:40,460 Així que donem una ullada a aquest codi font. 417 00:18:40,460 --> 00:18:45,600 >> Mirades form1.html estructuralment similar aquí. 418 00:18:45,600 --> 00:18:46,810 La forma és, de fet el mateix. 419 00:18:46,810 --> 00:18:48,330 Però anem a veure el que vaig fer aquí. 420 00:18:48,330 --> 00:18:49,913 I hi ha diferents maneres de fer això. 421 00:18:49,913 --> 00:18:53,690 I jo he fet el més recte seguidor, però no forma més elegant encara. 422 00:18:53,690 --> 00:18:54,869 Tinc una etiqueta de script. 423 00:18:54,869 --> 00:18:57,035 Llavors jo dic document.getElementById ("registre"). 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 I guardo aquest valor en la forma, una variable. 426 00:19:04,420 --> 00:19:05,520 >> Llavors, ¿què he fet? 427 00:19:05,520 --> 00:19:08,960 Vostè pot pensar en document.getElementById com 428 00:19:08,960 --> 00:19:11,200 una funció especial que JavaScript li dóna 429 00:19:11,200 --> 00:19:14,400 que les mans, literalment, que una punter a un dels nodes 430 00:19:14,400 --> 00:19:16,520 o rectangles en aquest arbre. 431 00:19:16,520 --> 00:19:21,470 Així que ara que és el que la nostra variable de formulari en JavaScript que realment està apuntant a. 432 00:19:21,470 --> 00:19:25,120 >> Així que ara la sintaxi és diferent de C. Però ens estan fent algunes coses aquí. 433 00:19:25,120 --> 00:19:30,360 Un d'ells, aquest és una mica estrany buscant, sens dubte davant de C. 434 00:19:30,360 --> 00:19:32,180 Però mira la línia 35. 435 00:19:32,180 --> 00:19:35,130 Així que en el form.onsubmit esquerra. 436 00:19:35,130 --> 00:19:38,060 Recordem que és onsubmit com un camp d'una estructura. 437 00:19:38,060 --> 00:19:41,480 Si vostè pensa en la variable de formulari és simplement ser una estructura C, 438 00:19:41,480 --> 00:19:42,600 que podria tenir alguns camps. 439 00:19:42,600 --> 00:19:46,410 >> De tornada en el dia, teníem noms dels estudiants, ID, cases, aquest tipus de camps. 440 00:19:46,410 --> 00:19:48,520 Només cal pensar en onsubmit com un altre camp. 441 00:19:48,520 --> 00:19:53,380 Però és un camp especial perquè el navegador està preprogramat per esperar 442 00:19:53,380 --> 00:19:57,530 .onsubmit a no ser un valor com un nombre o una cadena, 443 00:19:57,530 --> 00:20:01,180 però per ser realment una funció o la direcció d'una funció 444 00:20:01,180 --> 00:20:02,570 en la memòria de l'ordinador. 445 00:20:02,570 --> 00:20:04,740 >> I, en efecte, això és el que aquesta paraula clau aquí és així. 446 00:20:04,740 --> 00:20:06,710 Això diu, dóna'm una nova funció. 447 00:20:06,710 --> 00:20:09,390 Però el que és el seu nom serà, pel que es veu? 448 00:20:09,390 --> 00:20:10,800 >> Pensant en el dilluns. 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 Quin és el nom d'aquesta funció basada en aquesta sintaxi? 451 00:20:17,170 --> 00:20:19,784 No, vull dir, no hi ha claredat sense nom associated-- dubte 452 00:20:19,784 --> 00:20:21,200 no en el que jo he destacat aquí. 453 00:20:21,200 --> 00:20:22,560 >> Però això és en realitat a D'acord. 454 00:20:22,560 --> 00:20:25,840 Aquesta és una funció anònima, o un funció lambda com alguns podrien anomenar. 455 00:20:25,840 --> 00:20:27,589 I això només significa segueix sent una funció. 456 00:20:27,589 --> 00:20:29,400 És només que, no es pot dir pel seu nom. 457 00:20:29,400 --> 00:20:30,057 Però això està bé. 458 00:20:30,057 --> 00:20:33,140 Perquè de nou, el navegador ha estat programada per empreses com Google 459 00:20:33,140 --> 00:20:38,540 o Microsoft o Mozilla o altres persones a només sé que si el camp .onsubmit 460 00:20:38,540 --> 00:20:43,400 dins d'un element de formulari té el valor, el tracten com un function-- 461 00:20:43,400 --> 00:20:44,750 un punter a funció, si es vol. 462 00:20:44,750 --> 00:20:46,910 I dir-quan s'envia el formulari. 463 00:20:46,910 --> 00:20:50,350 >> Llavors, ¿quin codi ha de ser executat quan s'envia el formulari? 464 00:20:50,350 --> 00:20:52,526 Pel que sembla, tot dins del claudàtor. 465 00:20:52,526 --> 00:20:53,650 I això és només estilística. 466 00:20:53,650 --> 00:20:55,626 >> Vostè podria fer això com tendim a fer en CS50. 467 00:20:55,626 --> 00:20:58,250 Però en JavaScript, la majoria de persones tendeixen a mantenir-lo en la mateixa línia 468 00:20:58,250 --> 00:21:01,960 només perquè és més clarament és associada amb la funció de paraules clau. 469 00:21:01,960 --> 00:21:03,240 Així que ara el que estic fent? 470 00:21:03,240 --> 00:21:08,616 >> Si és igual als iguals form.email.value la cadena buida o gens, aquí hi 471 00:21:08,616 --> 00:21:11,490 un avís en què vaig a dir, vostè ha de proporcionar la seva adreça de correu electrònic, 472 00:21:11,490 --> 00:21:12,690 i després tornar falsa. 473 00:21:12,690 --> 00:21:15,720 I és que la falsa retorn que impedeix que la manera de ser presentat. 474 00:21:15,720 --> 00:21:19,480 Mentrestant, si el valor de la contrasenya és en blanc, vaig a cridar a l'usuari 475 00:21:19,480 --> 00:21:21,150 i dir, ha de proporcionar una contrasenya. 476 00:21:21,150 --> 00:21:23,700 >> Mentrestant, les coses són cada vegada una mica més de luxe aquí. 477 00:21:23,700 --> 00:21:29,160 Si no ho fa form.password.value igual form.confirmation.value, 478 00:21:29,160 --> 00:21:31,680 l'altre camp, cridar-li a l'usuari que les contrasenyes 479 00:21:31,680 --> 00:21:33,860 no coincideixen ja que no ho va fer fa un moment. 480 00:21:33,860 --> 00:21:35,780 I llavors aquest és un poc més sexy perquè 481 00:21:35,780 --> 00:21:40,470 Sé que sabia que conceptualment comprovat és el nom d'una caixa de xec. 482 00:21:40,470 --> 00:21:45,680 >> Així que només puc utilitzar una exclamació punt de dir si el xec no és 483 00:21:45,680 --> 00:21:48,040 checked-- és la booleana valor, vertader o false-- 484 00:21:48,040 --> 00:21:49,700 Vaig a cridar a l'usuari per aquest motiu. 485 00:21:49,700 --> 00:21:52,300 En cas contrari, si aconseguim a través de totes aquestes condicions, 486 00:21:52,300 --> 00:21:53,270 anem a tornar realitat. 487 00:21:53,270 --> 00:21:54,700 Deixeu que envia el formulari. 488 00:21:54,700 --> 00:21:56,560 I això passarà a continuació. 489 00:21:56,560 --> 00:21:57,740 >> Anem a escriure en carmesí. 490 00:21:57,740 --> 00:22:00,230 Anem xec de la caixa de text, feu clic a Registre. 491 00:22:00,230 --> 00:22:01,979 I ara me'n vaig fins a la destinació. 492 00:22:01,979 --> 00:22:03,270 Ara, no hi ha cap base de dades allà. 493 00:22:03,270 --> 00:22:05,370 No hi ha res interessant en register.php. 494 00:22:05,370 --> 00:22:07,980 Només necessitava alguna cosa de parlar amb. 495 00:22:07,980 --> 00:22:09,140 Així que permetin-me fer una pausa, aquí. 496 00:22:09,140 --> 00:22:16,270 Per a qualsevol dubte sobre el que acabem de fer o el que alguns d'aquesta nova sintaxi és? 497 00:22:16,270 --> 00:22:17,640 Acceptar, sí? 498 00:22:17,640 --> 00:22:20,025 >> AUDIÈNCIA: Així que qualsevol casella és automàticament un booleà. 499 00:22:20,025 --> 00:22:21,650 No ha de declarar-ho així. 500 00:22:21,650 --> 00:22:22,649 >> DAVID J. Malan: Correcte. 501 00:22:22,649 --> 00:22:29,340 Qualsevol casella de verificació que s'envia a vostè de un formulari HTML amb el codi JavaScript 502 00:22:29,340 --> 00:22:31,760 seran tractats, sí, com una Boole value-- vertader o fals. 503 00:22:31,760 --> 00:22:32,635 És una bona pregunta. 504 00:22:32,635 --> 00:22:36,080 Considerant que els altres valors, de Per descomptat, han estat el text, cadenes AKA. 505 00:22:36,080 --> 00:22:38,500 >> Molt bé, així que em va deixar rebobinar una mica més lluny. 506 00:22:38,500 --> 00:22:39,900 Quin era el punt sencer d'això? 507 00:22:39,900 --> 00:22:41,400 Perquè quedi clar. 508 00:22:41,400 --> 00:22:44,940 De la mateixa manera, que ja sabem, fins i tot des Pset7 i fins i tot de la conferència de la setmana passada 509 00:22:44,940 --> 00:22:51,120 exemples, que, òbviament, podem comprovar $ _GET $ _POST Veure si l'usuari ens donen 510 00:22:51,120 --> 00:22:52,200 un valor buit. 511 00:22:52,200 --> 00:22:54,400 Recordeu que la funció de buit en PHP. 512 00:22:54,400 --> 00:22:58,040 >> Així que per ser clars, el que és una raó per la qual també podria 513 00:22:58,040 --> 00:23:00,535 voler fer aquesta revisió d'errors dins del navegador? 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 Quina és la motivació aquí? 516 00:23:06,080 --> 00:23:06,580 Sí. 517 00:23:06,580 --> 00:23:09,735 >> AUDIÈNCIA: més ràpid, i no ho fa enviar dades inútils per al servidor. 518 00:23:09,735 --> 00:23:10,610 DAVID J. Malan: Good. 519 00:23:10,610 --> 00:23:11,170 És més ràpid. 520 00:23:11,170 --> 00:23:12,920 No envia inútil dades al servidor. 521 00:23:12,920 --> 00:23:14,670 >> Perquè pugui obtenir de nou una més resposta immediata. 522 00:23:14,670 --> 00:23:16,560 I, en general, l'usuari experiència és millor. 523 00:23:16,560 --> 00:23:17,900 Penseu en l'alternativa. 524 00:23:17,900 --> 00:23:21,160 >> Si per Gmail-- i estava el cas fa molts anys. 525 00:23:21,160 --> 00:23:24,160 Suposem que vostè té un nou correu electrònic de Gmail compte, però l'única manera a través 526 00:23:24,160 --> 00:23:26,510 a veure que és, igual que, recarregar tota la pàgina. 527 00:23:26,510 --> 00:23:29,030 O suposem que faci clic a un enllaç per llegir un correu electrònic. 528 00:23:29,030 --> 00:23:31,600 >> Tot ha de recarregar tan que es pot veure l'adreça de correu electrònic. 529 00:23:31,600 --> 00:23:33,380 O Facebook-- s'obté un missatge de xat. 530 00:23:33,380 --> 00:23:36,000 No ho veu fins que es torni a carregar la pàgina o feu clic a algun enllaç. 531 00:23:36,000 --> 00:23:38,380 >> De la mateixa manera, això seria una molt experiència de l'usuari molest. 532 00:23:38,380 --> 00:23:41,300 I això és el que era, clarament, l'esquena quan em vaig postular per a la unitat de competència 533 00:23:41,300 --> 00:23:44,760 i la banda era molt menys dinàmic i JavaScript no era tan popularitzat 534 00:23:44,760 --> 00:23:45,601 com ho és ara. 535 00:23:45,601 --> 00:23:47,850 I les coses estan molt més dinàmic i molt més 536 00:23:47,850 --> 00:23:49,900 costat del client en aquest sentit. 537 00:23:49,900 --> 00:23:54,370 >> Però hi ha una trampa aquí, i aquesta és una espècie de Gotcha molest. 538 00:23:54,370 --> 00:23:58,720 El fet que s'afegeix al client detecció com això no vol dir 539 00:23:58,720 --> 00:24:01,430 pot o ha d'abandonar detecció del costat del servidor. 540 00:24:01,430 --> 00:24:04,080 Vostè essencialment vol posar el seu error comprovant en tots dos llocs. 541 00:24:04,080 --> 00:24:05,830 Perquè el que va ser un de la lliçó apresa 542 00:24:05,830 --> 00:24:10,270 de l'article que vaig llegir alguns extractes d'amb aquest estúpid system-- CMS 543 00:24:10,270 --> 00:24:14,410 Content Management System-- que era la implementació del seu sistema d'autenticació, 544 00:24:14,410 --> 00:24:16,790 la seva entrada a través de quin mecanisme? 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 >> AUDIÈNCIA: JavaScript. 548 00:24:21,499 --> 00:24:23,290 DAVID J. Malan: JavaScript, exactament, oi? 549 00:24:23,290 --> 00:24:24,610 S'estava fent servir JavaScript. 550 00:24:24,610 --> 00:24:27,120 I, literalment, vostès tenen jugat una mica, probablement, 551 00:24:27,120 --> 00:24:28,700 amb l'inspector de Chrome. 552 00:24:28,700 --> 00:24:30,890 I si me'l trobo, inspeccionar element. 553 00:24:30,890 --> 00:24:33,670 >> Déjame anar a fer totes les opcions de Chrome. 554 00:24:33,670 --> 00:24:37,080 I això és el fàcil que és desactivar JavaScript en un navegador. 555 00:24:37,080 --> 00:24:38,950 Comprovi, no més de JavaScript. 556 00:24:38,950 --> 00:24:41,070 >> Així que per ser justos, molts de la web en aquests dies 557 00:24:41,070 --> 00:24:43,430 només va a trencar, perquè Gmail i una altra sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook-- assumir que JavaScript està habilitat. 559 00:24:46,140 --> 00:24:50,180 Però si vostè està fent alguna cosa estúpid com només la validació d'entrada dels usuaris 560 00:24:50,180 --> 00:24:52,520 i comprova si existeix errors en el costat del client, 561 00:24:52,520 --> 00:24:54,940 un adversari podria fàcilment fer això. 562 00:24:54,940 --> 00:24:57,180 I després encara més intel·ligent adversari com vostès 563 00:24:57,180 --> 00:25:01,120 ara podria utilitzar Telnet o Curl o comandaments de línia d'ordres només 564 00:25:01,120 --> 00:25:05,300 i en realitat enviar missatges al servidor que de la mateixa manera no exempts d'errors facturat. 565 00:25:05,300 --> 00:25:08,380 >> Així que això és més d'un decisió interfície d'usuari 566 00:25:08,380 --> 00:25:13,060 del que és una tècnica real improvement-- implementació 567 00:25:13,060 --> 00:25:14,410 costat client alguna cosa com això. 568 00:25:14,410 --> 00:25:16,800 Així que ara una ràpida mirada, però després Et remeto a la caminada en línia 569 00:25:16,800 --> 00:25:17,674 a través d'aquest. 570 00:25:17,674 --> 00:25:21,480 En forma de dos, de fet vam anar a través de i netejar el codi una mica. 571 00:25:21,480 --> 00:25:23,650 Però permetin-me remeto a 01:00 dels vídeos probable que anem a 572 00:25:23,650 --> 00:25:27,970 Inserir en Pset8 que només mostra una sintaxi similar usant una biblioteca anomenada 573 00:25:27,970 --> 00:25:32,320 jQuery, que és un super, super biblioteca popular en JavaScript 574 00:25:32,320 --> 00:25:34,510 que francament la majoria de la gent només ha d'utilitzar en aquests dies 575 00:25:34,510 --> 00:25:37,070 i fins i tot confondre com propi benestar JavaScript. 576 00:25:37,070 --> 00:25:38,950 >> I tendeix a involucrar alguns signes de dòlar 577 00:25:38,950 --> 00:25:41,350 i paraules clau com a document en parèntesi aquí. 578 00:25:41,350 --> 00:25:44,480 Però, de nou, deixa remeto a alguns tutorials més lentes en línia 579 00:25:44,480 --> 00:25:46,750 en lloc de veure obligats a realitzar només la sintaxi. 580 00:25:46,750 --> 00:25:48,630 Anem a passar a cosa una mica més fresc 581 00:25:48,630 --> 00:25:50,520 pel que fa a les aplicacions d'aquest. 582 00:25:50,520 --> 00:25:57,730 >> Així, en particular, que em deixi anar per davant i obrir aquesta aquí. 583 00:25:57,730 --> 00:25:58,340 Vingui. 584 00:25:58,340 --> 00:25:59,380 Cal anar. 585 00:25:59,380 --> 00:26:01,500 >> Permetin-me obrir aquest quadre aquí. 586 00:26:01,500 --> 00:26:03,450 Innecessàriament complicat mirant, però 587 00:26:03,450 --> 00:26:07,880 descriu una tècnica anomenada AJAX-- Asynchronous JavaScript i XML, on 588 00:26:07,880 --> 00:26:10,530 X per l'XML és en realitat ja no s'utilitza realment. 589 00:26:10,530 --> 00:26:13,430 Tendeix a usar alguna cosa un altre anomenat JSON. 590 00:26:13,430 --> 00:26:16,560 >> Però aquí és com una mena de Google Maps o Google Earth funciona. 591 00:26:16,560 --> 00:26:18,060 Anem a provar això sobre la marxa, en realitat. 592 00:26:18,060 --> 00:26:21,590 Déjame anar per davant i obro Chrome al navegador. 593 00:26:21,590 --> 00:26:26,236 >> I m'ho dius a mi anar a, dir, maps.google.com. 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 I, de fet, si vostè és vell Només cal recordar el que, 596 00:26:31,930 --> 00:26:35,600 com, MapQuest era com tornar en el dia, i potser encara funcionen així. 597 00:26:35,600 --> 00:26:38,870 Quan t'acostumes a buscar alguna cosa-- 33 Oxford Street, Cambridge, Massachusetts, 598 00:26:38,870 --> 00:26:40,650 farem esto-- vostè faria realitat, si vostè 599 00:26:40,650 --> 00:26:43,000 volia a la paella i a baix, esquerra i dreta, 600 00:26:43,000 --> 00:26:44,920 que es veuria com un gran fletxa a la part superior, i 601 00:26:44,920 --> 00:26:46,921 se li mostrarà altre marc del mapa aquí. 602 00:26:46,921 --> 00:26:49,753 O hauria de fer clic a l'esquerra i vostè aniria per aquí, o un altre clic 603 00:26:49,753 --> 00:26:51,000 i va a anar per aquí. 604 00:26:51,000 --> 00:26:53,000 Però en comptes aquests dies, per descomptat, només 605 00:26:53,000 --> 00:26:55,970 donen per fet que podem anar al voltant de Cambridge amb força rapidesa 606 00:26:55,970 --> 00:26:57,550 simplement fent clic i arrossegant. 607 00:26:57,550 --> 00:26:59,130 Però Tingueu en compte que hi ha alguns problemes tècnics. 608 00:26:59,130 --> 00:27:02,160 >> Si faig això prou ràpid, el que sembla estar succeint 609 00:27:02,160 --> 00:27:05,960 com arrossego una mica massa ràpid per a l'equip per mantenir-se al dia? 610 00:27:05,960 --> 00:27:07,160 Què és el que veus? 611 00:27:07,160 --> 00:27:07,660 Sí. 612 00:27:07,660 --> 00:27:09,232 >> AUDIÈNCIA: Els píxels no s'actualitzen. 613 00:27:09,232 --> 00:27:10,940 DAVID J. Malan: La píxels no s'actualitzen. 614 00:27:10,940 --> 00:27:12,870 Hi ha actually-- i vostè podria veure això, en realitat, 615 00:27:12,870 --> 00:27:15,360 si estàs veient en línia i pausa aquest o en realitat alenteix les coses 616 00:27:15,360 --> 00:27:18,600 per vegada-- veuràs que hi ha rajoles, quadrats, o rectangles que 617 00:27:18,600 --> 00:27:22,040 falten al mapa fins una fracció de segon més tard, més dades, 618 00:27:22,040 --> 00:27:24,390 més imatges de realitat apareixerà a la pantalla. 619 00:27:24,390 --> 00:27:29,810 I de fet, si fem això mirant fins Chrome's-- diguem, Chrome-- 620 00:27:29,810 --> 00:27:30,310 anem a veure. 621 00:27:30,310 --> 00:27:31,090 No podem fer això. 622 00:27:31,090 --> 00:27:31,860 >> Oh, crits. 623 00:27:31,860 --> 00:27:34,761 Obrirem maps.google.com. 624 00:27:34,761 --> 00:27:36,660 Permetin-me fer la finestra més gran de nou. 625 00:27:36,660 --> 00:27:38,836 >> Tornar als 33 Oxford Street. 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 Quin va ser el lloc web estava en recentment? 628 00:27:43,760 --> 00:27:46,440 Vaig tenir aquesta, com, diatriba privat a a mi mateix que jo havia missatge instantani a continuació 629 00:27:46,440 --> 00:27:48,470 qualsevol amic que estava en línia qui volia escoltar-lo. 630 00:27:48,470 --> 00:27:49,345 Hi ha una mica de lloc web. 631 00:27:49,345 --> 00:27:52,680 Crec que és tan Comcast-- un ISP americà molt gran. 632 00:27:52,680 --> 00:27:56,355 Pot, al registrar-se nou cable servei de mòdem o el servei de TV per cable, 633 00:27:56,355 --> 00:27:59,230 que tenen una forma molt raonable on se li demanarà la vostra adreça. 634 00:27:59,230 --> 00:28:01,450 I tenir aquesta increïble característica anomenada completa d'automòbils, 635 00:28:01,450 --> 00:28:04,600 com Google, que comença a omplir en la resposta a la seva pregunta. 636 00:28:04,600 --> 00:28:08,090 >> El problema és, que fan d'autocompletat sobre les primeres coses que vostè escriu. 637 00:28:08,090 --> 00:28:12,890 Així que si vostè comença a escriure en el 33, que mostrarà literalment cada casa 638 00:28:12,890 --> 00:28:15,790 als Estats Units que comença amb el número 33 639 00:28:15,790 --> 00:28:17,920 abans de continuar esperes que escrigui més. 640 00:28:17,920 --> 00:28:20,660 Així que si escriu 33 Oxford, a continuació et mostra tots els carrers 641 00:28:20,660 --> 00:28:24,726 als Estats Units que té 33 a Oxford el seu nom, amb independència de la ciutat 642 00:28:24,726 --> 00:28:25,350 que vostè està en. 643 00:28:25,350 --> 00:28:26,320 >> I després continua escrivint. 644 00:28:26,320 --> 00:28:28,930 I, finalment, s'adona que no ho fan oferta de servei a casa a Cambridge 645 00:28:28,930 --> 00:28:29,920 o alguna cosa per l'estil. 646 00:28:29,920 --> 00:28:33,410 Però el punt és, aquesta és la més aplicació asnal d'auto 647 00:28:33,410 --> 00:28:34,140 completar mai. 648 00:28:34,140 --> 00:28:36,400 >> I jo només vaig fora en aquesta tangent de nou. 649 00:28:36,400 --> 00:28:39,040 Però hi ha bones maneres a utilitzar JavaScript i males maneres. 650 00:28:39,040 --> 00:28:40,750 I això no és necessàriament la millor. 651 00:28:40,750 --> 00:28:46,360 >> Però el punt aquí, abans que aquesta diatriba, va anar a obrir les eines aquí 652 00:28:46,360 --> 00:28:49,480 i obrir les eines de desenvolupament, com hem encoratjats abans, 653 00:28:49,480 --> 00:28:52,840 i per veure la Xarxa fitxa com faig clic molt ràpid. 654 00:28:52,840 --> 00:28:55,400 I notar un munt d'obtenir sol·licituds succeir. 655 00:28:55,400 --> 00:28:57,310 Tot això va succeir des que em vaig arrossegar. 656 00:28:57,310 --> 00:29:00,170 >> I el més probable, de fet, una gran quantitat d'aquestes files 657 00:29:00,170 --> 00:29:04,060 ara són la imatge de frega JPEG Tipus MIME o tipus de contingut. 658 00:29:04,060 --> 00:29:07,750 Això es deu al que està fent crom cada vegada que feu clic i arrossegueu, feu clic a 659 00:29:07,750 --> 00:29:11,650 i arrossegament, és És adonar-se, oh, d'anar demanar a Google per la rajola 660 00:29:11,650 --> 00:29:15,080 en el mapa que ha acabat aquí, descarregar ràpidament a través d'HTTP, 661 00:29:15,080 --> 00:29:19,550 i després afegir-lo a la crida DOM als navegadors web en l'arbre de memòria 662 00:29:19,550 --> 00:29:24,430 la representació de manera que l'usuari, mi, veu que rajola actualitzat. 663 00:29:24,430 --> 00:29:26,795 I això es deu a una tècnica anomenada AJAX. 664 00:29:26,795 --> 00:29:28,920 De tornada al dia, el que realment era el cas que si 665 00:29:28,920 --> 00:29:33,050 volia canviar el que està a la pantalla, vostè hauria de fer clic a dalt, a baix, esquerra, 666 00:29:33,050 --> 00:29:33,550 dreta. 667 00:29:33,550 --> 00:29:34,740 I a continuació, una nova pàgina s'obriria. 668 00:29:34,740 --> 00:29:36,531 Però en aquests dies, tot és més dinàmic. 669 00:29:36,531 --> 00:29:40,490 Succeeix en la forma en què els éssers humans ho faria espero que realment ho faria de forma interactiva. 670 00:29:40,490 --> 00:29:43,210 I ho aconsegueix mitjançant la mitjà d'una tècnica anomenada 671 00:29:43,210 --> 00:29:46,170 AJAX, que és potser el més explicat amb un exemple. 672 00:29:46,170 --> 00:29:49,730 En primer lloc, deixa anar per davant i obrir un arxiu 673 00:29:49,730 --> 00:29:53,540 anomenat quote.php a codi de distribució d'avui. 674 00:29:53,540 --> 00:29:56,200 >> I llavors m'ho dius a mi fer crits symbol--. 675 00:29:56,200 --> 00:30:02,399 Déjame fer símbol = GOOG per només una mica de brou. 676 00:30:02,399 --> 00:30:04,440 O en realitat, farem la 1 del joc de paràmetres GRATIS. 677 00:30:04,440 --> 00:30:05,270 Retorn. 678 00:30:05,270 --> 00:30:06,580 >> I ara noto el que jo torni. 679 00:30:06,580 --> 00:30:09,210 Així que això és realment un arxiu PHP curt que jo 680 00:30:09,210 --> 00:30:13,210 va escriure que simplement pren prestat codi de la funció de recerca de Pset7 681 00:30:13,210 --> 00:30:17,830 i escup l'ús d'aquesta clau de i cites i notació de còlon, pel que sembla, 682 00:30:17,830 --> 00:30:22,747 preu de l'acció actual de la empresa que es passa enmig de get. 683 00:30:22,747 --> 00:30:24,580 Així que això és diferent de la major part del que hem 684 00:30:24,580 --> 00:30:26,496 fet en aquesta nota que sóc literalment escopint 685 00:30:26,496 --> 00:30:27,870 el que sembla ser el codi JavaScript. 686 00:30:27,870 --> 00:30:30,020 >> De fet, aquest és un objecte de JavaScript. 687 00:30:30,020 --> 00:30:34,130 De fet, només per ser més clar, JavaScript Object Notation-- JSON-- 688 00:30:34,130 --> 00:30:38,330 és només una forma elegant de dir que poden representar dades en JavaScript molt 689 00:30:38,330 --> 00:30:41,660 com es fa en PHP utilitzant parells de valors clau. 690 00:30:41,660 --> 00:30:44,270 Així que si volia declarar una variable en JavaScript 691 00:30:44,270 --> 00:30:47,872 a representa Zamyla, per instance-- una estructura per Zamyla-- 692 00:30:47,872 --> 00:30:49,580 i ho anem a cridar estudiant, aquesta variable. 693 00:30:49,580 --> 00:30:53,060 La seva identificació és un, la casa està Winthrop, i el nom és Zamyla. 694 00:30:53,060 --> 00:30:55,490 >> Però també puc tenir una matriu d'objectes. 695 00:30:55,490 --> 00:30:58,710 Així que si jo realment volia tenir una matriu en JavaScript que conté 696 00:30:58,710 --> 00:31:01,740 múltiples aquests objectes, aquesta temps que representa el personal, 697 00:31:01,740 --> 00:31:04,910 Jo podria tenir aquests tres trossos de codi d'esquena 698 00:31:04,910 --> 00:31:08,560 de nou a l'esquena d'aquests tres ex funcionaris. 699 00:31:08,560 --> 00:31:12,201 Així que la sintaxi, bastant similar a ambdós-- a PHP. 700 00:31:12,201 --> 00:31:13,700 Però això és particularment JavaScript. 701 00:31:13,700 --> 00:31:15,940 És notació objecte. 702 00:31:15,940 --> 00:31:17,240 Llavors, ¿què és això útil per? 703 00:31:17,240 --> 00:31:21,580 >> Si escric codi que escup cap a fora JSON-- JavaScript Object Notation-- coses que 704 00:31:21,580 --> 00:31:24,670 s'assembla a això o coses que s'assembla a l'estructura de Zamyla, 705 00:31:24,670 --> 00:31:27,730 De fet, em puc fer servir aquesta en els programes que escric. 706 00:31:27,730 --> 00:31:30,660 Déjame anar a ajax0.html. 707 00:31:30,660 --> 00:31:33,310 I això també- no gaire pensament donat a l'estètica. 708 00:31:33,310 --> 00:31:34,660 Però observin el que passa. 709 00:31:34,660 --> 00:31:37,050 >> Déjame anar endavant i escric gratis aquí. 710 00:31:37,050 --> 00:31:38,490 Feu clic a Obtenir cotització. 711 00:31:38,490 --> 00:31:41,060 I noti la URL no ha canviat. 712 00:31:41,060 --> 00:31:47,250 Però em va fer arribar un pop-up amb aparentment d'avui cèntim preu de l'acció de US $ 0,15. 713 00:31:47,250 --> 00:31:49,062 Així que no tot és tan dolent. 714 00:31:49,062 --> 00:31:52,020 Però la diferència és que d'alguna manera, aquestes dades va tornar a mi directament. 715 00:31:52,020 --> 00:31:54,250 Però anem a fer un pas cap a una mica més familiar. 716 00:31:54,250 --> 00:31:58,900 En la versió un això, permetin-me escrigui lliure de nou, feu clic a Obtenir pressupost, 717 00:31:58,900 --> 00:32:01,146 i ara-- oh, això era en realitat la versió de jQuery. 718 00:32:01,146 --> 00:32:03,270 Així que no ho vaig fer me-- avanç ràpid bastant prou lluny. 719 00:32:03,270 --> 00:32:05,830 Déjame anar a la versió 2, que és on jo volia. 720 00:32:05,830 --> 00:32:07,260 Noti el que he fet aquí. 721 00:32:07,260 --> 00:32:10,370 Tinc una web page-- un super versió simple de qualsevol pàgina web 722 00:32:10,370 --> 00:32:14,260 vostè pot utilitzar avui en dia amb un camp de text aquí de forma gratuïta i després pel que sembla només 723 00:32:14,260 --> 00:32:14,880 text. 724 00:32:14,880 --> 00:32:16,860 >> Això no és una forma aquí, aparentment. 725 00:32:16,860 --> 00:32:19,360 Però si faig clic obtinc pressupost, compte de la meva pàgina web 726 00:32:19,360 --> 00:32:22,760 està a punt de canviar, com si jo acaba de rebre un nou missatge instantani 727 00:32:22,760 --> 00:32:25,360 o com si m'acabo de mudar la el mapa i la necessària per obtenir més dades 728 00:32:25,360 --> 00:32:29,220 afegit de forma dinàmica a la pàgina web sense el canvi d'URL i l'usuari 729 00:32:29,220 --> 00:32:30,980 experiència sent interromput. 730 00:32:30,980 --> 00:32:35,750 De fet, encara estic en el exactament el mateix ajax2.html lloc--. 731 00:32:35,750 --> 00:32:39,080 >> Així que anem a veure només en aquest exemple i veure com això està succeint. 732 00:32:39,080 --> 00:32:42,490 Déjame anar a ajax2.html. 733 00:32:42,490 --> 00:32:44,770 I noti la forma en primer lloc. 734 00:32:44,770 --> 00:32:47,092 >> Aquí sota, m'estic convertint fora de completat automàtic. 735 00:32:47,092 --> 00:32:48,800 A vegades es posa molest si el navegador 736 00:32:48,800 --> 00:32:50,508 està tractant de mostrar tota la seva història. 737 00:32:50,508 --> 00:32:53,450 Així que vostè pot fer-ho en HTML només dir autocompletat apagat. 738 00:32:53,450 --> 00:32:57,290 >> He donat aquest camp de text 1 symbol-- més aviat, un ID de símbol. 739 00:32:57,290 --> 00:32:58,977 I ara, aquesta és una característica interessant. 740 00:32:58,977 --> 00:33:01,310 No hem parlat sobre lapse, però es pot pensar-hi 741 00:33:01,310 --> 00:33:03,177 com una etiqueta de paràgraf o etiqueta div. 742 00:33:03,177 --> 00:33:05,010 És el que es diu un element en línia, que 743 00:33:05,010 --> 00:33:07,415 vol dir que no obtindrà un paràgraf trencar per sobre i per sota d'ella. 744 00:33:07,415 --> 00:33:11,530 És només va a romandre en línia sense colpejar l'equivalent a entrar. 745 00:33:11,530 --> 00:33:17,980 Així que m'he donat a aquest tros d'HTML s'ha de determinar un identificador únic 746 00:33:17,980 --> 00:33:20,130 que arbitràriament vaig trucar preu. 747 00:33:20,130 --> 00:33:21,560 I tinc un botó Enviar. 748 00:33:21,560 --> 00:33:25,420 >> Perquè ara fins aquí-- i això és realment súper increïble el poc codi 749 00:33:25,420 --> 00:33:27,660 vostè pot escriure que fer relativament net coses-- 750 00:33:27,660 --> 00:33:31,800 adonar-se del que he fet fins aquí si vos fins al cap d'aquesta pàgina. 751 00:33:31,800 --> 00:33:34,970 He inclòs per primera vegada en meu cap una etiqueta de script 752 00:33:34,970 --> 00:33:37,410 que fa referència a una realitat Arxiu JavaScript en altres parts. 753 00:33:37,410 --> 00:33:39,702 Això és de l'organització que escriu jQuery, 754 00:33:39,702 --> 00:33:42,660 I això és només que li dóna l'última versió de la seva llibreria jQuery. 755 00:33:42,660 --> 00:33:46,305 >> Així que això és una cosa així com agut incloure en C o requerir en PHP. 756 00:33:46,305 --> 00:33:48,900 S'utilitza l'etiqueta script amb un atribut d'origen. 757 00:33:48,900 --> 00:33:52,030 Però ara el meu propi codi és estarà bé aquí. 758 00:33:52,030 --> 00:33:54,170 >> Noti que tinc una funció anomenada Cotitzacions. 759 00:33:54,170 --> 00:33:56,180 I sembla una mica críptica a primera vista. 760 00:33:56,180 --> 00:33:57,305 Però anem a burlen d'aquesta separació. 761 00:33:57,305 --> 00:33:59,090 Dóna'm una variable anomenada URL. 762 00:33:59,090 --> 00:34:01,390 Assignar literalment aquesta cadena. 763 00:34:01,390 --> 00:34:04,530 Així, cites individuals, dobles cometes en JavaScript només em dóna una cadena. 764 00:34:04,530 --> 00:34:06,900 Què fa el més? 765 00:34:06,900 --> 00:34:08,199 La concatenació. 766 00:34:08,199 --> 00:34:12,610 >> Així que això ara és la sintaxi de jQuery que pren una mica de temps per acostumar. 767 00:34:12,610 --> 00:34:18,310 Però això només vol dir anar a buscar el DOM node amb identificador únic és símbol. 768 00:34:18,310 --> 00:34:21,929 El hashtag no significa símbol identificador únic. 769 00:34:21,929 --> 00:34:24,929 >> El signe de dòlar en el Els parèntesis només significa, acabar amb això 770 00:34:24,929 --> 00:34:28,510 jQuery en una mena de salsa secreta de manera vostè aconsegueix una funcionalitat addicional. 771 00:34:28,510 --> 00:34:31,880 I després .VAL és aparentment una funció, o com es diu ara, 772 00:34:31,880 --> 00:34:35,219 un mètode en l'interior d'aquest node que només li dóna el valor. 773 00:34:35,219 --> 00:34:38,896 Així que en resum, lleig i confús ja que això es veu a primera vista, 774 00:34:38,896 --> 00:34:42,020 això només significa arribar amb l'usuari va escriure en, el va posar al final de la cadena 775 00:34:42,020 --> 00:34:42,880 mitjançant la concatenació d'ella. 776 00:34:42,880 --> 00:34:43,739 Això és tot. 777 00:34:43,739 --> 00:34:46,070 >> Així que ara, tres últimes línies. 778 00:34:46,070 --> 00:34:48,690 Vostè pot esprémer una gran quantitat de funcionalitat de cada tres línies. 779 00:34:48,690 --> 00:34:52,199 Aquest signe de dòlar, com una a un costat, és només un sobrenom 780 00:34:52,199 --> 00:34:55,800 per a una variable global especial anomenat literalment jQuery. 781 00:34:55,800 --> 00:34:57,060 >> Signe de dòlar només es veu bé. 782 00:34:57,060 --> 00:35:00,080 Així que la comunitat jQuery només tipus del que va usar com el seu símbol especial. 783 00:35:00,080 --> 00:35:02,470 No significa el que significa en PHP. 784 00:35:02,470 --> 00:35:06,356 En JavaScript, mostra de dòlar és de la mateixa manera que una lletra de l'alfabet 785 00:35:06,356 --> 00:35:07,480 o un nombre per a una variable. 786 00:35:07,480 --> 00:35:09,000 >> Vostè només pot tenir com el nom. 787 00:35:09,000 --> 00:35:09,770 Només es veu bé. 788 00:35:09,770 --> 00:35:11,890 Així la comunitat adoptat com un sobrenom 789 00:35:11,890 --> 00:35:13,390 per la seva pròpia biblioteca anomenada jQuery. 790 00:35:13,390 --> 00:35:15,060 >> I és súper popular. 791 00:35:15,060 --> 00:35:17,620 Així que aconseguir JSON és exactament això. 792 00:35:17,620 --> 00:35:19,920 És una funció que la gent de jQuery escriure 793 00:35:19,920 --> 00:35:23,340 que pateix és JSON d'un server-- JavaScript Object Notation. 794 00:35:23,340 --> 00:35:25,680 Pel que l'URL és que va per obtenir aquesta informació? 795 00:35:25,680 --> 00:35:27,790 Pel que sembla, des d'aquest URL aquí. 796 00:35:27,790 --> 00:35:31,180 >> I què ha de fer el navegador com aviat com es posa de nou aquesta resposta? 797 00:35:31,180 --> 00:35:36,500 I aquesta és la màgia d'AJAX, per la qual cosa speak-- Asynchronous JavaScript en XML. 798 00:35:36,500 --> 00:35:41,320 És difícil veure per tal exemple senzill, ja que teníem aquí. 799 00:35:41,320 --> 00:35:44,730 >> Però això va ser asincrònica a el sentit que el meu codi quan 800 00:35:44,730 --> 00:35:48,530 executat enviat un missatge al servidor per anar a buscar una mica de JSON. 801 00:35:48,530 --> 00:35:51,340 I va succeir molt ràpid que em van donar una resposta. 802 00:35:51,340 --> 00:35:55,130 Però el que és interessant és que aquest línia de codi no pengi el meu equip. 803 00:35:55,130 --> 00:35:56,550 >> Jo no veig una icona de la filatura. 804 00:35:56,550 --> 00:35:59,200 No vaig perdre el capacitat de moure el ratolí. 805 00:35:59,200 --> 00:36:01,340 El meu navegador realitat era perfectament bé. 806 00:36:01,340 --> 00:36:06,290 >> A causa de la manera maneja el JavaScript resposta del servidor és el següent. 807 00:36:06,290 --> 00:36:09,740 Vostè es registra el que es diu una funció de devolució de trucada, que 808 00:36:09,740 --> 00:36:12,830 només vol dir, bé, JavaScript. 809 00:36:12,830 --> 00:36:16,100 Tan aviat com el servidor respon amb JSON, 810 00:36:16,100 --> 00:36:18,750 si us plau trucar a aquesta funció anònima. 811 00:36:18,750 --> 00:36:23,910 >> I si us plau, passar a aquesta funció qualsevol que sigui la cadena de servidor escopir 812 00:36:23,910 --> 00:36:26,080 com un argument anomenat dades. 813 00:36:26,080 --> 00:36:28,360 En altres, paraules, si Estic acoblar dinàmicament 814 00:36:28,360 --> 00:36:33,370 quote.php una URL que passa en aquest símbol com GRATIS o GOOG o el que sigui, 815 00:36:33,370 --> 00:36:36,830 Llavors jo dic JavaScript anar a buscar aquesta URL. 816 00:36:36,830 --> 00:36:39,080 Recordeu que el navegador va a tornar alguna cosa 817 00:36:39,080 --> 00:36:42,680 que es veu com hem vist abans els vaig parlar d'això. 818 00:36:42,680 --> 00:36:45,940 >> I el que el segon argument aquí per aconseguir JSON està dient 819 00:36:45,940 --> 00:36:48,450 es digui a aquesta funció quan el servidor torni 820 00:36:48,450 --> 00:36:52,440 si es tracta de 10 milisegons a partir d'ara o 10 segons a partir d'ara. 821 00:36:52,440 --> 00:36:55,840 I tan aviat com vostè ho fa, afegir el preu a la pàgina. 822 00:36:55,840 --> 00:36:58,030 Aquesta sintaxi aquí només significa anar a buscar el node 823 00:36:58,030 --> 00:37:01,940 de l'arbre l'únic identificador és preu-- aquest lapse hem vist anteriorment. 824 00:37:01,940 --> 00:37:04,320 >> Aquest mètode anomenat HTML només diu, vaja reemplaçar 825 00:37:04,320 --> 00:37:08,770 el codi HTML que hi és amb data.price. 826 00:37:08,770 --> 00:37:10,200 Què hi ha data.price? 827 00:37:10,200 --> 00:37:12,850 Bé, el navegador, recordar, em va mostrar aquesta tornant. 828 00:37:12,850 --> 00:37:14,540 Així que aquests són les dades. 829 00:37:14,540 --> 00:37:18,100 >> I el que és una mica críptic per veure les comes aquí. 830 00:37:18,100 --> 00:37:19,350 Però, de fet, deixa fer això. 831 00:37:19,350 --> 00:37:22,890 Permetin-me enganxa aquest molt ràpid en gedit 832 00:37:22,890 --> 00:37:27,240 i mostrar això com vam demostrar L'estructura de Zamyla abans. 833 00:37:27,240 --> 00:37:31,610 >> El que el servidor envia de tornada és una petit objecte que s'assembla a això. 834 00:37:31,610 --> 00:37:37,140 I així és data.price m'acaba de donar a 0,1515. 835 00:37:37,140 --> 00:37:39,310 Així que una gran quantitat de moviment parts aquí tots alhora. 836 00:37:39,310 --> 00:37:41,860 >> Però els robatoris de pilota clau és que tenim aquesta capacitat 837 00:37:41,860 --> 00:37:44,600 per fer HTTP addicional peticions utilitzant JavaScript 838 00:37:44,600 --> 00:37:46,090 sense haver de recarregar la pàgina. 839 00:37:46,090 --> 00:37:49,580 I llavors podem realment canviar la pàgina web sobre la marxa. 840 00:37:49,580 --> 00:37:51,850 I resulta que JavaScript i altres llenguatges 841 00:37:51,850 --> 00:37:54,510 es pot utilitzar ara no només mutar pàgines web, 842 00:37:54,510 --> 00:37:57,960 però en realitat per escriure programari en un equip real, 843 00:37:57,960 --> 00:38:00,240 no només es limita a Chrome o similars. 844 00:38:00,240 --> 00:38:03,530 >> De fet, si: Colton, oi agradaria unir-se a nosaltres de nou per aquí 845 00:38:03,530 --> 00:38:06,100 amb el seu codi de laboratori, i Chang també? 846 00:38:06,100 --> 00:38:09,140 Seguirem endavant, després d'haver parlat de funcions anònimes i devolucions de trucada 847 00:38:09,140 --> 00:38:13,090 i realment temptar la sort aquí amb una demostració en viu amb sagnat 848 00:38:13,090 --> 00:38:16,480 tecnologia de punta, una de aquests dispositius Elite moviment. 849 00:38:16,480 --> 00:38:18,940 Ara, aquest dispositiu, el record, és un petit dispositiu USB 850 00:38:18,940 --> 00:38:25,620 així que-- això és beautiful-- que es connecta als ports USB. 851 00:38:25,620 --> 00:38:29,120 >> I llavors es proporciona l'entrada en forma de gestos humans 852 00:38:29,120 --> 00:38:32,560 mitjançant la detecció de raigs infrarojos utilitzant, essencialment, els moviments del seu braç. 853 00:38:32,560 --> 00:38:35,150 Així que mentre que el que Maria va intentar abans era muscular, 854 00:38:35,150 --> 00:38:39,000 realment sentir el que està canviant el braç, això és infraroig basat. 855 00:38:39,000 --> 00:38:44,390 Per tant, està buscant els moviments dins de l'espècie d'esfera d'un peu més o menys 856 00:38:44,390 --> 00:38:46,190 del propi dispositiu. 857 00:38:46,190 --> 00:38:48,950 >> Llavors, ¿per què no em prenc una punyalada en aquesta primera? 858 00:38:48,950 --> 00:38:53,100 I seguirem endavant i tirar per amunt a la sobrecàrrega aquí. 859 00:38:53,100 --> 00:38:56,250 Així que anem a posar el portàtil de Colton fins aquí. 860 00:38:56,250 --> 00:38:58,360 Tenim Andrew a la televisió. 861 00:38:58,360 --> 00:39:00,160 I què li agradaria que fes primer? 862 00:39:00,160 --> 00:39:02,409 >> COLTON: Vagi per davant i just posar les mans sobre aquest home 863 00:39:02,409 --> 00:39:04,430 i vostè veurà una certa brillantor fabulós. 864 00:39:04,430 --> 00:39:07,230 >> DAVID J. Malan: Very nice. 865 00:39:07,230 --> 00:39:11,110 Tot això succeeix en temps real. 866 00:39:11,110 --> 00:39:11,889 Okay. 867 00:39:11,889 --> 00:39:12,680 Molt bé, i si. 868 00:39:12,680 --> 00:39:14,119 Tan agradable. 869 00:39:14,119 --> 00:39:15,410 Molt bé, ¿què més podem fer? 870 00:39:15,410 --> 00:39:17,900 >> COLTON: Anar a la següent pantalla i veure. 871 00:39:17,900 --> 00:39:19,136 >> DAVID J. Malan: D'acord. 872 00:39:19,136 --> 00:39:21,780 >> COLTON: Un petit joc on s'arriba a fer robots. 873 00:39:21,780 --> 00:39:24,738 >> DAVID J. Malan: Molt bé, de manera que aquest és fals mans em mostren el que ha de fer. 874 00:39:24,738 --> 00:39:27,920 COLTON: Sí Així que endavant i apoderar-se d'un dels blocs 875 00:39:27,920 --> 00:39:30,637 i el va posar a la part superior del cos d'aquest robot. 876 00:39:30,637 --> 00:39:32,137 DAVID J. Malan: Oh, aquí està la meva mà. 877 00:39:32,137 --> 00:39:34,000 Oh. 878 00:39:34,000 --> 00:39:34,780 Acceptar, adorable. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Espera un minut, a D'acord. 881 00:39:38,650 --> 00:39:41,320 Cal anar. 882 00:39:41,320 --> 00:39:43,590 >> COLTON: Vaig fer un en accident. 883 00:39:43,590 --> 00:39:45,423 >> DAVID J. Malan: OK, vaig a aconseguir aquest tipus. 884 00:39:45,423 --> 00:39:45,923 Maleïda sigui! 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 Quan estàvem practicant aquesta última nit, ja saps el que això va degenerar en? 887 00:39:51,550 --> 00:39:54,285 >> Com aquest. 888 00:39:54,285 --> 00:39:55,490 Okay. 889 00:39:55,490 --> 00:39:55,990 Següent un? 890 00:39:55,990 --> 00:39:56,860 >> COLTON: És clar. 891 00:39:56,860 --> 00:39:58,818 >> DAVID J. Malan: Molt bé, i hi ha una tercera. 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 Bé. 894 00:40:01,674 --> 00:40:03,215 COLTON: I en aquest, s'obté A-- 895 00:40:03,215 --> 00:40:04,923 DAVID J. Malan: Oh, de bella aquest. 896 00:40:04,923 --> 00:40:06,650 COLTON: --yeah, esmicolar aquesta flor. 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 No? 900 00:40:11,670 --> 00:40:14,515 Perdudes. 901 00:40:14,515 --> 00:40:15,570 >> COLTON: Oh, aquí ho tens. 902 00:40:15,570 --> 00:40:18,680 >> DAVID J. Malan: Ah, mira això. 903 00:40:18,680 --> 00:40:19,830 Molt agradable. 904 00:40:19,830 --> 00:40:22,470 Bé, per què no 'prenem a terme un voluntari aquí 905 00:40:22,470 --> 00:40:24,180 que li agradaria venir a endavant. 906 00:40:24,180 --> 00:40:27,500 Què hi ha allà mateix en el verd, no? 907 00:40:27,500 --> 00:40:30,540 >> Molt bé, i anem a tener-- en lloc de fer això, alguns de vostès 908 00:40:30,540 --> 00:40:34,590 podrien saber aquest joc aquí-- tallar la corda, potser? 909 00:40:34,590 --> 00:40:35,100 Anem a veure. 910 00:40:35,100 --> 00:40:37,320 Tenim les nostres copes per aquí? 911 00:40:37,320 --> 00:40:38,625 >> Okay. 912 00:40:38,625 --> 00:40:39,270 Gràcies. 913 00:40:39,270 --> 00:40:39,380 Quin és el teu nom? 914 00:40:39,380 --> 00:40:40,350 >> AUDIÈNCIA: Laura. 915 00:40:40,350 --> 00:40:41,266 >> DAVID J. Malan: Laura? 916 00:40:41,266 --> 00:40:42,120 És bo veure. 917 00:40:42,120 --> 00:40:45,600 Si no t'importa posar Google Glass sobre les seves lents. 918 00:40:45,600 --> 00:40:46,970 Això és Colton. 919 00:40:46,970 --> 00:40:47,650 >> COLTON: Hola. 920 00:40:47,650 --> 00:40:48,140 Encantada de conèixer-te. 921 00:40:48,140 --> 00:40:49,600 >> DAVID J. Malan: OK, anem voltant. 922 00:40:49,600 --> 00:40:52,516 Molt bé, així que el que vas a fer aquí, després d'haver jugat això abans, 923 00:40:52,516 --> 00:40:55,650 es posa la mà sobre el Leap Motion aquí. 924 00:40:55,650 --> 00:40:57,210 I ara la seva fletxa s'ha de moure. 925 00:40:57,210 --> 00:40:57,710 Ah, doncs no. 926 00:40:57,710 --> 00:40:58,066 >> AUDIÈNCIA: No. 927 00:40:58,066 --> 00:40:58,780 >> DAVID J. Malan: Nosaltres no volen deixar de fumar encara. 928 00:40:58,780 --> 00:40:59,280 Acceptar, esperi. 929 00:40:59,280 --> 00:41:01,200 Per aquí. 930 00:41:01,200 --> 00:41:03,530 Així explica com vostè sosté la seva dit sobre alguna cosa, 931 00:41:03,530 --> 00:41:06,750 el ratolí comença a anar verd, que és com es fa clic. 932 00:41:06,750 --> 00:41:08,980 >> Així que hi ha sobre Play. 933 00:41:08,980 --> 00:41:10,970 I només un dit està molt bé. 934 00:41:10,970 --> 00:41:13,869 I ara, feu clic a la petita home verd de l'esquerra. 935 00:41:13,869 --> 00:41:15,410 I ara tenen fins que s'omple de verd. 936 00:41:15,410 --> 00:41:15,640 Bé. 937 00:41:15,640 --> 00:41:16,990 Ara, de la mateixa manera que, el nivell un a la superior. 938 00:41:16,990 --> 00:41:20,190 >> AUDIÈNCIA: Sí, volem que el nivell un, aquí. 939 00:41:20,190 --> 00:41:21,660 >> DAVID J. Malan: Good. 940 00:41:21,660 --> 00:41:25,500 OK, així que tot el que tens de fer és tallar la corda. 941 00:41:25,500 --> 00:41:28,240 El cursor és la blanca allà baix. 942 00:41:28,240 --> 00:41:28,880 >> Molt agradable. 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 Molt bé, es tracta d'aconseguir més difícil. 945 00:41:32,790 --> 00:41:34,800 Així que mantenir el dit sobre el proper ara. 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 Bé. 948 00:41:39,030 --> 00:41:39,999 Aquest és difícil. 949 00:41:39,999 --> 00:41:40,966 >> AUDIÈNCIA: Oh merda. 950 00:41:40,966 --> 00:41:41,466 Okay. 951 00:41:41,466 --> 00:41:42,466 Es vol anar d'aquesta manera. 952 00:41:42,466 --> 00:41:44,890 Oh merda, que-- 953 00:41:44,890 --> 00:41:47,120 >> DAVID J. Malan: Sí. 954 00:41:47,120 --> 00:41:50,700 Meta secundària és aconseguir totes les estrelles. 955 00:41:50,700 --> 00:41:53,920 D'acord, següent. 956 00:41:53,920 --> 00:41:57,504 >> Anem a veure si vostè pot aconseguir aquest tercer. 957 00:41:57,504 --> 00:41:58,004 Bé. 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 Acceptar, anar-hi. 960 00:42:06,840 --> 00:42:08,850 >> És clar. 961 00:42:08,850 --> 00:42:11,230 Oh, molt agradable. 962 00:42:11,230 --> 00:42:11,930 Bé. 963 00:42:11,930 --> 00:42:13,534 >> Llavors, ¿per què no aixecar la sessió aquí avui? 964 00:42:13,534 --> 00:42:15,200 Que ningú vingui a qui vol jugar. 965 00:42:15,200 --> 00:42:16,880 Moltes gràcies a la Laura la nostra voluntària. 966 00:42:16,880 --> 00:42:18,730 I ens veurem dilluns. 967 00:42:18,730 --> 00:42:21,190 >> AUDIÈNCIA: Vostè probablement voldrà aquests esquena. 968 00:42:21,190 --> 00:42:23,640 >> ALTAVEU 2: En el següent CS50-- 969 00:42:23,640 --> 00:42:35,222