1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J. Malan: Todo ben, de xeito que este aquí é o brazo Myo 3 00:00:41,880 --> 00:00:44,450 banda, un par de que ten para os proxectos finais CS50. 4 00:00:44,450 --> 00:00:47,533 E iso foi unha demostración en fila se anticipadamente onde esencialmente 5 00:00:47,533 --> 00:00:51,120 este brazo moi axustado banda aquí escoita os seus movementos musculares 6 00:00:51,120 --> 00:00:54,280 que son entón mapeados en software para portátil de Colton aquí que 7 00:00:54,280 --> 00:00:57,230 tivo iTunes e que música xa na cola. 8 00:00:57,230 --> 00:01:00,270 En vez de me demoing tanto, Colton estivo no laboratorio 9 00:01:00,270 --> 00:01:04,129 claramente toda a semana recibindo unha demostración preparado para un voluntario valente. 10 00:01:04,129 --> 00:01:07,430 Se alguén quere vir en up-- viu a súa man primeiro. 11 00:01:07,430 --> 00:01:09,540 Imos cara arriba. 12 00:01:09,540 --> 00:01:12,530 >> Todo correcto. 13 00:01:12,530 --> 00:01:13,886 E cal é o seu nome? 14 00:01:13,886 --> 00:01:14,800 >> Audiencia: Uh, María. 15 00:01:14,800 --> 00:01:16,550 >> DAVID J. Malan: María, bo che ver. 16 00:01:16,550 --> 00:01:17,310 Veña ata aquí. 17 00:01:17,310 --> 00:01:19,550 Deixe-me presentar-lle Colton. 18 00:01:19,550 --> 00:01:21,290 Colton, esta é Maria. 19 00:01:21,290 --> 00:01:23,050 >> Colton: Ola, pracer de coñece-lo. 20 00:01:23,050 --> 00:01:24,330 >> DAVID J. Malan: Todos ben, entón o primeiro paso, estamos 21 00:01:24,330 --> 00:01:26,204 terá pór esta no seu antebrazo 22 00:01:26,204 --> 00:01:29,280 de xeito que é moi tight-se preto do seu cóbado. 23 00:01:29,280 --> 00:01:31,940 E mentres tanto, imos ter poñer na nosa Vidro Google 24 00:01:31,940 --> 00:01:33,720 e imos mesturar as tecnoloxías de hoxe. 25 00:01:33,720 --> 00:01:36,340 >> Colton: Primeiro imos ter que conectar esta nas cousas. 26 00:01:36,340 --> 00:01:37,170 >> DAVID J. Malan: Aceptar. 27 00:01:37,170 --> 00:01:39,795 De feito, imos poñer o seu brazo como preto de este cabo como sexa posible 28 00:01:39,795 --> 00:01:41,160 para que poidamos primeiro sincronizalo lo cara arriba. 29 00:01:41,160 --> 00:01:42,740 >> Colton: Imos facelo. 30 00:01:42,740 --> 00:01:46,500 >> DAVID J. Malan: E mentres tanto, por iso que todos poidan ter unha mirada máis atento, 31 00:01:46,500 --> 00:01:50,290 imos tirar cámara de Andrew na pantalla alí. 32 00:01:50,290 --> 00:01:54,460 Polo tanto, temos un cable USB que se ser conectado a braçadeira de María. 33 00:01:54,460 --> 00:02:00,230 E déixeme tirar pantalla de Colton se o proxector próximo. 34 00:02:00,230 --> 00:02:06,000 >> Entón Colton está rexistrando o dispositivo agora como un Myo conectado a este cabo. 35 00:02:06,000 --> 00:02:08,060 E agora o que María de fará momentaneamente 36 00:02:08,060 --> 00:02:10,120 é realmente andar por os pasos de calibración 37 00:02:10,120 --> 00:02:12,830 e ensinar o software como os seus músculos responden 38 00:02:12,830 --> 00:02:16,070 cando a certeza de predefinido apunta que o software entende. 39 00:02:16,070 --> 00:02:17,910 Se quere ir en diante da pantalla. 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 Aceptar, siga intentando. 42 00:02:30,090 --> 00:02:31,860 >> COLTON: Vai como esta. 43 00:02:31,860 --> 00:02:32,970 E así. 44 00:02:32,970 --> 00:02:34,563 E todo o camiño á dereita. 45 00:02:34,563 --> 00:02:35,922 Volva. 46 00:02:35,922 --> 00:02:37,740 >> DAVID J. Malan: Aceptar. 47 00:02:37,740 --> 00:02:38,960 Perspectiva diferente. 48 00:02:38,960 --> 00:02:39,620 Non é vostede. 49 00:02:39,620 --> 00:02:40,350 Somos nós. 50 00:02:40,350 --> 00:02:41,749 >> MARIA: Aceptar. 51 00:02:41,749 --> 00:02:42,540 DAVID J. Malan: Non. 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 Imos movelo máis arriba, polo que é máis preto do seu cóbado, ou aínda máis axustado. 54 00:02:51,540 --> 00:02:52,680 Todo correcto. 55 00:02:52,680 --> 00:02:53,270 >> Aquí imos nós. 56 00:02:53,270 --> 00:02:56,780 Este sería un bo momento para CS52X. 57 00:02:56,780 --> 00:02:57,670 Alí imos nós. 58 00:02:57,670 --> 00:02:58,760 >> Moi bo. 59 00:02:58,760 --> 00:03:01,170 Está ben. 60 00:03:01,170 --> 00:03:02,790 Polgar para mindinho. 61 00:03:02,790 --> 00:03:03,380 >> Moi bo. 62 00:03:03,380 --> 00:03:05,140 Estender os dedos. 63 00:03:05,140 --> 00:03:06,240 Boa. 64 00:03:06,240 --> 00:03:06,910 Onda correcta. 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 Está amosando curiosamente vostede coa hand-- esquerda 67 00:03:17,010 --> 00:03:19,665 >> Colton: Si, iso é raro. 68 00:03:19,665 --> 00:03:21,790 DAVID J. Malan: Onda de á dereita e seguir adiante. 69 00:03:21,790 --> 00:03:22,998 Fast forward para saltar ou seguinte. 70 00:03:22,998 --> 00:03:25,020 É iso mesmo Onda Aceptar. 71 00:03:25,020 --> 00:03:26,650 >> MARIA: Eu don't-- esperar. 72 00:03:26,650 --> 00:03:28,430 >> DAVID J. Malan: Necesita axuda? 73 00:03:28,430 --> 00:03:30,027 >> Colton: Entón vai coma este. 74 00:03:30,027 --> 00:03:31,860 MARIA: Está xirando o outra cousa, con todo. 75 00:03:31,860 --> 00:03:32,390 Colton: É. 76 00:03:32,390 --> 00:03:34,250 DAVID J. Malan: Si, eu non sei por que está amosando a vostede un esquerdista. 77 00:03:34,250 --> 00:03:36,458 Colton: Por que non try-- só tentar ir coma este. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J. Malan: Non? 80 00:03:40,090 --> 00:03:42,580 Quizais acadar o seu brazo algo máis recto 81 00:03:42,580 --> 00:03:46,070 e facelo máis abrupta como este. 82 00:03:46,070 --> 00:03:48,176 Si, OK, imos alí. 83 00:03:48,176 --> 00:03:49,670 >> MARIA: Eu sinto moito. 84 00:03:49,670 --> 00:03:51,170 DAVID J. Malan: Non é culpa súa. 85 00:03:51,170 --> 00:03:53,018 Colton: É bo. 86 00:03:53,018 --> 00:03:55,430 DAVID J. Malan: All Right. 87 00:03:55,430 --> 00:03:56,220 Bom-- 88 00:03:56,220 --> 00:03:57,620 >> MARIA: Será que temos que pasar por alto que, entón? 89 00:03:57,620 --> 00:03:59,620 DAVID J. Malan: Si, imos deixar fóra do gancho. 90 00:03:59,620 --> 00:04:03,130 Entón, se alguén quere facer unha proxecto final mediante este vangarda 91 00:04:03,130 --> 00:04:07,707 hardware, entende que só podería tomar algún tempo para se acostumar. 92 00:04:07,707 --> 00:04:10,290 E isto-- a realidade é esta é realmente moi sangramento bordo. 93 00:04:10,290 --> 00:04:12,040 >> Isto é o que se chama o kit de desenvolvemento, que 94 00:04:12,040 --> 00:04:14,956 destínase a ser, esencialmente, un pre-lanzamento de xeito que a xente pode facer exactamente 95 00:04:14,956 --> 00:04:18,690 isto-- loitar con el, figura o xeito no que os corpos das persoas traballar 96 00:04:18,690 --> 00:04:19,980 coa tecnoloxía. 97 00:04:19,980 --> 00:04:21,750 Entón se quere despois, tras charla, 98 00:04:21,750 --> 00:04:23,750 podemos deixalo vir e tomar outra facada nel. 99 00:04:23,750 --> 00:04:26,970 Pero por outra banda, unha salva de palmas, se Poderiamos, por María para vir enriba. 100 00:04:26,970 --> 00:04:28,770 >> MARIA: Grazas. 101 00:04:28,770 --> 00:04:30,390 >> DAVID J. Malan: Grazas. 102 00:04:30,390 --> 00:04:34,945 Imos coller a iso, pero imos dar você- como sobre unha bola de estrés aquí? 103 00:04:34,945 --> 00:04:38,620 Oh, e-- se-- si, grazas. 104 00:04:38,620 --> 00:04:39,715 Todo correcto. 105 00:04:39,715 --> 00:04:45,750 Entón, para os curiosos, se fose familiarizado coa elección de son 106 00:04:45,750 --> 00:04:47,670 que fixemos alí anteriormente, unha televisión incrible 107 00:04:47,670 --> 00:04:50,210 amosar que ten que absolutamente estar no Netflix observación de bingo 108 00:04:50,210 --> 00:04:51,110 é este aquí. 109 00:04:51,110 --> 00:04:54,472 >> COLUMNA 1: Señoras e señores, un máxico chamado Josh. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J. Malan: E, ao parecer, é unha cousa para me texto durante charla agora. 112 00:05:08,050 --> 00:05:11,190 Estou sendo informado de que María tivo un aniversario onte. 113 00:05:11,190 --> 00:05:14,095 Entón, feliz aniversario a partir de CS50 a María tamén. 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> Entón pode ler o mes recente que este señores aquí, Steve 116 00:05:22,090 --> 00:05:25,260 Ballmer, que era, en realidade, clase de 1977 na facultade, 117 00:05:25,260 --> 00:05:27,170 recentemente se aposentou a Microsoft. 118 00:05:27,170 --> 00:05:29,620 Era un estudante aquí, logo un par de anos máis tarde 119 00:05:29,620 --> 00:05:31,910 atopou-se en Stanford Business School 120 00:05:31,910 --> 00:05:34,160 cando recibiu un teléfono chamada dun amigo seu que 121 00:05:34,160 --> 00:05:36,516 viviu a finais do corredor del aquí en Harvard. 122 00:05:36,516 --> 00:05:38,640 O nome deste amigo era Bill Gates, e no momento, 123 00:05:38,640 --> 00:05:42,700 estaba intentando contratar Steve ser a primeira persoa de negocios, realmente, 124 00:05:42,700 --> 00:05:45,720 nunha pequena empresa de nome Microsoft. 125 00:05:45,720 --> 00:05:48,960 >> A longa historia curta, Steve foi finalmente conquistado, 126 00:05:48,960 --> 00:05:52,130 uniuse a Microsoft cando tiña só 30 empregados. 127 00:05:52,130 --> 00:05:54,300 E polo tempo que aposentou recentemente, 128 00:05:54,300 --> 00:05:58,100 a empresa tiña 100.000 empregados ao longo dos últimos anos. 129 00:05:58,100 --> 00:06:01,171 E así, un sitio coñecido como The Verge preparou esta homenaxe en vídeo 130 00:06:01,171 --> 00:06:02,920 que pensamos compartido que lle dá 131 00:06:02,920 --> 00:06:08,380 unha sensación de canta enerxía Steve trae a calquera presentación que dá. 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [REPRODUCIÓN DE VIDEO] 134 00:06:12,550 --> 00:06:16,220 -Microsoft É como un cuarto fillo. 135 00:06:16,220 --> 00:06:18,260 Os nenos fan saír de casa. 136 00:06:18,260 --> 00:06:21,875 Neste caso, eu creo que Estou saíndo da casa. 137 00:06:21,875 --> 00:06:23,270 Ei Bill, whazzap? 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap? 139 00:06:24,200 --> 00:06:25,320 >> Ei, wazzap? 140 00:06:25,320 --> 00:06:28,590 Temos sido dada unha enorme oportunidade. 141 00:06:28,590 --> 00:06:30,210 E Bill nos deu esa oportunidade. 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 Quero agradecer a Bill por iso. 144 00:06:36,770 --> 00:06:39,630 Eu quero que ti tamén. 145 00:06:39,630 --> 00:06:42,500 O ritmo da innovación non vai abrandar. 146 00:06:42,500 --> 00:06:45,140 >> Só pode ir máis rápido e máis rápido. 147 00:06:45,140 --> 00:06:50,165 Pode haber algúns competidores que, por desgraza, son eliminados! 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> Eu amo esta empresa. 150 00:06:59,564 --> 00:07:00,064 Si! 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 Eu son un PC, e eu amo esta empresa! 153 00:07:08,250 --> 00:07:13,090 >> Desenvolvedores, programadores, desenvolvedores, desenvolvedores, desenvolvedores, desenvolvedores, 154 00:07:13,090 --> 00:07:14,560 desenvolvedores, desenvolvedores. 155 00:07:14,560 --> 00:07:17,500 156 00:07:17,500 --> 00:07:18,970 Si! 157 00:07:18,970 --> 00:07:19,950 Os desenvolvedores web! 158 00:07:19,950 --> 00:07:21,420 >> Os desenvolvedores web! 159 00:07:21,420 --> 00:07:22,890 Os desenvolvedores web! 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 Escoita o que máis lle obter, sen custo adicional! 162 00:07:28,770 --> 00:07:31,960 >> O executivo MS-DOS, unha cita Calandra, unha pila de tarxetas, un bloque de notas, 163 00:07:31,960 --> 00:07:33,750 un reloxo, un panel de control. 164 00:07:33,750 --> 00:07:35,461 E, pode crer niso? 165 00:07:35,461 --> 00:07:35,960 Reversie! 166 00:07:35,960 --> 00:07:37,270 >> Gravalos en CD! 167 00:07:37,270 --> 00:07:38,660 Publicala conxuntamente no MSN! 168 00:07:38,660 --> 00:07:40,422 Vostede envialos amigos! 169 00:07:40,422 --> 00:07:41,790 >> Todo isto con un click! 170 00:07:41,790 --> 00:07:48,670 One Microsoft, unha estratexia, un team-- centrado, disciplinado, profesional, 171 00:07:48,670 --> 00:07:50,610 e especialista en todo o que facemos. 172 00:07:50,610 --> 00:07:52,670 Déixeme usar unha liña dun filme antigo. 173 00:07:52,670 --> 00:07:54,810 >> Relación son como tiburón. 174 00:07:54,810 --> 00:07:57,480 Eles se moven para adiante ou morren. 175 00:07:57,480 --> 00:08:01,470 Realmente creo tecnoloxía empresas son os mesmos. 176 00:08:01,470 --> 00:08:04,801 >> [FIN REPRODUCIÓN DE VIDEO] 177 00:08:04,801 --> 00:08:08,050 DAVID J. Malan: Entón, estamos moi satisfeitos coa anunciar que Steve Vai unirse a nós 178 00:08:08,050 --> 00:08:13,320 aquí en CS50 vindeiro mércores en lugar de costume e tempo aquí. 179 00:08:13,320 --> 00:08:14,750 Espazo será probablemente limitada. 180 00:08:14,750 --> 00:08:19,650 E así unirse a nós na persoa, por favor cabeza hoxe ou inmediatamente 181 00:08:19,650 --> 00:08:22,600 para cs50.harvard.edu/register. 182 00:08:22,600 --> 00:08:25,780 >> E imos seguir por Martes confirmando puntos. 183 00:08:25,780 --> 00:08:29,900 Ansiosos para que na próxima Mércores durante charla na CS50. 184 00:08:29,900 --> 00:08:33,706 Agora, noutra noticia, pasou de eu se atopou con iso en The Crimson só 185 00:08:33,706 --> 00:08:34,289 o outro día. 186 00:08:34,289 --> 00:08:37,370 >> Acontece que un dos funcionarios do CS50 e, polo menos, un dos alumnos de CS50 187 00:08:37,370 --> 00:08:40,299 está actualmente en execución para UC presidente e vicepresidente, 188 00:08:40,299 --> 00:08:42,950 que me trouxo de volta aos meus propios días 189 00:08:42,950 --> 00:08:45,920 cando eu perdín a elección UC miserabelmente. 190 00:08:45,920 --> 00:08:48,210 Pero o forro de prata en que é que eu sempre 191 00:08:48,210 --> 00:08:50,604 contar a historia é que un dos que eu estou seguro 192 00:08:50,604 --> 00:08:52,770 moitas razóns que eu perda o elección foi unha completa falta 193 00:08:52,770 --> 00:08:54,103 dun talento para falar en público. 194 00:08:54,103 --> 00:08:56,950 E así, moi sincero, que dirixe-me, que a experiencia 195 00:08:56,950 --> 00:09:02,235 Creo que o meu primeiro ano, para realmente asinar para Harvard Computer Society, que 196 00:09:02,235 --> 00:09:04,610 é o grupo no campus que ten varias conferencias técnicas 197 00:09:04,610 --> 00:09:05,318 e outras cousas. 198 00:09:05,318 --> 00:09:08,117 E eu asumir o seu ensino seminarios e, polo tanto, 199 00:09:08,117 --> 00:09:09,950 tivo unha oportunidade, unha oportunidade marabillosa, 200 00:09:09,950 --> 00:09:12,620 para comezar a traballar sobre exactamente iso. 201 00:09:12,620 --> 00:09:15,000 Pero tamén, eu tiven unha oportunidade durante esta experiencia 202 00:09:15,000 --> 00:09:16,930 ensinarme todo o máis HTML. 203 00:09:16,930 --> 00:09:21,080 E así eu acabo adiando a noite pasada por mirando a través do sitio web baseado en HTML 204 00:09:21,080 --> 00:09:28,066 Eu fixen en 1997 como, 98, para o meu campaña que se parece iso aquí. 205 00:09:28,066 --> 00:09:29,920 Sei. 206 00:09:29,920 --> 00:09:33,340 >> Because-- e, por suposto, o aviso previo esta decisión deseño sorprendente en 1998 207 00:09:33,340 --> 00:09:33,850 ou outros enfeites. 208 00:09:33,850 --> 00:09:36,475 O primeiro que quere que os usuarios facer ao visitar a súa web 209 00:09:36,475 --> 00:09:39,860 é ter que premer en outro enlace só para entrar no seu sitio web aquí co monxe 210 00:09:39,860 --> 00:09:43,940 atrás como unha cortina envolta onde aparentemente miña plataforma de campaña era. 211 00:09:43,940 --> 00:09:46,330 E iso é todo o que vai ter hoxe é só un screenshot. 212 00:09:46,330 --> 00:09:49,500 Pero eu estaba lendo, como, meus carteis de campaña na noite pasada 213 00:09:49,500 --> 00:09:50,490 e miña plataforma. 214 00:09:50,490 --> 00:09:52,960 >> E eu estaba tan irritado co tempo. 215 00:09:52,960 --> 00:09:55,380 A miña plataforma foi-- foi interesante. 216 00:09:55,380 --> 00:09:57,730 Entón eu me calme desde entón. 217 00:09:57,730 --> 00:10:03,550 Pero un día, eu vou correr de novo e espero que mellor fóra esta vez. 218 00:10:03,550 --> 00:10:07,265 >> Entón, HTML, que a lingua na que eu fixen em-- que logo fará moi more-- 219 00:10:07,265 --> 00:10:09,140 é algo que estiven falando da tarde 220 00:10:09,140 --> 00:10:12,460 e en gran parte o que supón agora que nos cambiamos para outras linguas. 221 00:10:12,460 --> 00:10:15,650 Pero imos facer unha pausa por un momento e poñer algunhas destas cousas no contexto. 222 00:10:15,650 --> 00:10:18,040 Así, nunha frase, o que é HTML? 223 00:10:18,040 --> 00:10:19,370 >> Ou, o que é usado para? 224 00:10:19,370 --> 00:10:20,208 Calquera? 225 00:10:20,208 --> 00:10:20,708 Si. 226 00:10:20,708 --> 00:10:22,002 >> Audiencia: Markup para sitios web. 227 00:10:22,002 --> 00:10:23,460 DAVID J. Malan: Markup para o sitio. 228 00:10:23,460 --> 00:10:27,100 Polo tanto, é unha linguaxe de reserva que permite estruturar unha páxina web. 229 00:10:27,100 --> 00:10:30,040 Cabeceira sobe aquí, o título vai aquí, o corpo vai aquí. 230 00:10:30,040 --> 00:10:33,280 Isto está en negra, este é italics-- este tipo de detalle. 231 00:10:33,280 --> 00:10:33,830 >> OK, bo. 232 00:10:33,830 --> 00:10:37,620 Entón CSS permite você- e eu tomou algunhas liberdades alí 233 00:10:37,620 --> 00:10:40,990 co ousado orientados e cursiva porque que é mellor aplicado con iso. 234 00:10:40,990 --> 00:10:42,096 CSS é-- o que? 235 00:10:42,096 --> 00:10:42,845 Diga nunha frase. 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 Calquera persoa en todo. 238 00:10:46,720 --> 00:10:46,870 Si. 239 00:10:46,870 --> 00:10:49,286 >> Audiencia: enfeites e material, como forma de proxecto-lo. 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 DAVID J. Malan: OK, bo. 242 00:10:52,810 --> 00:10:55,420 Adornos que permiten que para proxecto-lo ou estilizar el 243 00:10:55,420 --> 00:10:59,540 con cousas como negra e cursiva e cores e tamén máis fino 244 00:10:59,540 --> 00:11:01,330 posicionamento de gran de elementos. 245 00:11:01,330 --> 00:11:04,520 É unha especie de permite levar as cousas a última milla, de xeito que se, por exemplo, 246 00:11:04,520 --> 00:11:08,130 en Pset7, ten que notar no seu carteira de páxina se está neste momento 247 00:11:08,130 --> 00:11:12,270 xa que unha táboa estándar que facer para amosar participacións do usuario 248 00:11:12,270 --> 00:11:15,740 e diñeiro, probablemente, parece moi hediondo por defecto, sen espazo en branco. 249 00:11:15,740 --> 00:11:18,420 Tipo Todo está cheo de xuntos en liñas e columnas. 250 00:11:18,420 --> 00:11:20,662 >> Ben, cun pouco de CSS, como pode entender, 251 00:11:20,662 --> 00:11:23,870 realmente pode axustar isto e facelo algo moito máis familiar e moi 252 00:11:23,870 --> 00:11:24,870 máis bonito de ollar. 253 00:11:24,870 --> 00:11:27,730 Entón CSS é a estilización de sitios web. 254 00:11:27,730 --> 00:11:31,970 Pero, entón, lanzou unha linguaxe, PHP, o que nos permite facer o que? 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> Nós só facer o que? 257 00:11:37,590 --> 00:11:38,177 Calquera. 258 00:11:38,177 --> 00:11:40,010 Cómpre aventura alén o primeiro par de liñas. 259 00:11:40,010 --> 00:11:40,260 Si. 260 00:11:40,260 --> 00:11:41,719 >> Audiencia: xerar contido dinámico. 261 00:11:41,719 --> 00:11:42,718 DAVID J. Malan: Perfecto. 262 00:11:42,718 --> 00:11:43,850 Xerar contido dinámico. 263 00:11:43,850 --> 00:11:45,808 E pode facelo en calquera número de idiomas. 264 00:11:45,808 --> 00:11:50,120 Nós ocorrer para usar o PHP, xa que é en parte, de xeito semellante ao C sintaxe. 265 00:11:50,120 --> 00:11:52,000 >> Pero o PHP fai exactamente iso. 266 00:11:52,000 --> 00:11:54,620 Permite que xerar dinamicamente saída. 267 00:11:54,620 --> 00:11:57,890 E algúns dos que a produción podería ser HTML, como temos benvida a facer normalmente. 268 00:11:57,890 --> 00:12:00,160 E tamén, porque é unha linguaxe de programación, está 269 00:12:00,160 --> 00:12:03,240 o mecanismo a través do cal podemos falar con bases de datos. 270 00:12:03,240 --> 00:12:05,730 >> E podemos facer consultas para outros servidores como Yahoos 271 00:12:05,730 --> 00:12:08,660 e programática facer nada realmente que podería 272 00:12:08,660 --> 00:12:10,400 quere obrigar un ordenador para facer. 273 00:12:10,400 --> 00:12:13,580 Entón PHP permítenos comezar saída dinamicamente o contido. 274 00:12:13,580 --> 00:12:16,900 Entón, por esta lóxica, eu non teño un sitio dinámico de volta en 1998. 275 00:12:16,900 --> 00:12:18,460 >> Era só unha páxina web estática. 276 00:12:18,460 --> 00:12:22,250 O meu contido tivo que ser modificado por man con gedit ou algún equivalente. 277 00:12:22,250 --> 00:12:25,290 Pero o PHP é o que usan ou podería usar, en vez diso, 278 00:12:25,290 --> 00:12:27,260 para algo así como o Sitio Frosh IMS, que 279 00:12:27,260 --> 00:12:31,160 era quere ter rexistros e xestionar unha lista de cousas que users-- 280 00:12:31,160 --> 00:12:33,550 están realmente cambiando ao longo do tempo, aínda que ocorra 281 00:12:33,550 --> 00:12:35,990 para usar Perl, unha diferente linguaxe da época. 282 00:12:35,990 --> 00:12:40,350 >> E entón, finalmente, nós introducimos SQL-- Structured Query Language. 283 00:12:40,350 --> 00:12:43,845 Entón aínda outra lingua que se usa para que? 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 Usado para que? 286 00:12:47,639 --> 00:12:49,430 Podemos aventura slight-- OK, non imos 287 00:12:49,430 --> 00:12:51,263 para chegar máis lonxe que a orquestra aquí. 288 00:12:51,263 --> 00:12:53,432 Audiencia: É un protocolo de usado para falar con bases de datos. 289 00:12:53,432 --> 00:12:55,640 DAVID J. Malan: Un protocolo usado para falar con bases de datos. 290 00:12:55,640 --> 00:12:56,181 Déixeme axustar. 291 00:12:56,181 --> 00:12:59,280 É unha lingua natural utilizada falar con databases-- selecciona 292 00:12:59,280 --> 00:13:01,280 e insercións e exclusións e actualizacións e, de feito, 293 00:13:01,280 --> 00:13:03,840 ata máis recursos que aínda non mergullou 294 00:13:03,840 --> 00:13:07,920 en, pero pode querer ter explore-- para explorar, por exemplo, un proxecto final. 295 00:13:07,920 --> 00:13:09,560 Entón hai esas varias pezas. 296 00:13:09,560 --> 00:13:13,100 >> E espero que Pset7, aínda súa especificación é moi longo, 297 00:13:13,100 --> 00:13:15,990 é deliberadamente moito tempo para oriente-lo a través de como estas cousas poden todo 298 00:13:15,990 --> 00:13:17,210 ser ingresaran xunto. 299 00:13:17,210 --> 00:13:20,300 Agora, o luns, nós introducida noso último idioma 300 00:13:20,300 --> 00:13:23,430 que imos presentar formalmente en course-- o que é, JavaScript. 301 00:13:23,430 --> 00:13:25,720 Este, como PHP, é unha linguaxe interpretada. 302 00:13:25,720 --> 00:13:28,110 >> Pero unha distinción fundamental Propuxen o luns 303 00:13:28,110 --> 00:13:32,730 é que, mentres que o PHP está executando ou sendo interpretada no servidor, o que 304 00:13:32,730 --> 00:13:35,990 neste caso, é o aparello CS50, ou pode ser algunha web comercial 305 00:13:35,990 --> 00:13:39,370 servidor en Internet, JavaScript xeral 306 00:13:39,370 --> 00:13:43,650 É unha linguaxe que funciona do lado do cliente Non servidor side-- no navegador. 307 00:13:43,650 --> 00:13:46,970 O que quere dicir, exactamente como cando abrín Facebook se o código fonte e atopou todo 308 00:13:46,970 --> 00:13:51,510 destes arquivos .js, a implicación era que cando visita Facebook ou máis 309 00:13:51,510 --> 00:13:54,810 sitios estes días, comeza non só HTML, CSS, non só, 310 00:13:54,810 --> 00:13:59,370 pero unha morea de JavaScript código, moitas veces en forma de arquivos .js. 311 00:13:59,370 --> 00:14:03,970 E entón é a súa propia browser-- Mac ou PC-- que executa este código. 312 00:14:03,970 --> 00:14:05,990 >> Pero o navegador executa. 313 00:14:05,990 --> 00:14:08,070 Pode pensar nunha especie de sandbox. 314 00:14:08,070 --> 00:14:12,420 Así que o código JavaScript non debe ser capaz de borrar arquivos no seu ordenador. 315 00:14:12,420 --> 00:14:14,730 Ela non debe ser capaz de enviar un correo no seu nome. 316 00:14:14,730 --> 00:14:17,760 O seu tipo de navegador restrinxe o que podes facer con el. 317 00:14:17,760 --> 00:14:20,630 >> Entón, nese sentido, é un pouco menos poderoso, quizais, do que C. 318 00:14:20,630 --> 00:14:24,030 Pero JavaScript pode, como un de banda, pode empregar o servidor, 319 00:14:24,030 --> 00:14:27,740 pero imos tenden a non falar sobre iso nese contexto. 320 00:14:27,740 --> 00:14:29,740 Entón agora imos amarra-los xuntos. 321 00:14:29,740 --> 00:14:34,000 Unha semana máis atrás, presentamos algúns HTML na páxina web left-- super aburrido. 322 00:14:34,000 --> 00:14:35,000 >> Só di Ola mundo. 323 00:14:35,000 --> 00:14:38,110 E entón eu propuxen no dereito podemos especie de roubar ideas 324 00:14:38,110 --> 00:14:41,470 da nosa discusión de estruturas de datos en C 325 00:14:41,470 --> 00:14:45,270 e pensar sobre como iso xerárquica linguaxe de reserva da esquerda 326 00:14:45,270 --> 00:14:49,720 poden ser deseñados ou aplicados na memoria como unha estrutura de árbore con nós de real 327 00:14:49,720 --> 00:14:51,400 e punteiros e estes tipos de detalles. 328 00:14:51,400 --> 00:14:53,820 Á dereita, a que chamamos que un documento DOM-- 329 00:14:53,820 --> 00:14:56,800 Obxecto Model-- que é só un xeito elegante de dicir árbore. 330 00:14:56,800 --> 00:14:59,520 >> Agora, por que iso é útil para pense nisto deste xeito? 331 00:14:59,520 --> 00:15:01,680 Porque agora con JavaScript, porque temos 332 00:15:01,680 --> 00:15:05,810 código que obtén a desempeñar neste ambiente, o HTML real que é 333 00:15:05,810 --> 00:15:08,360 foi enviado ao navegador xa e xa ten 334 00:15:08,360 --> 00:15:12,690 procede na memoria pola navegador nunha árbore no seu ordenador de 335 00:15:12,690 --> 00:15:18,270 RAM como esta, podemos utilizar JavaScript para realmente atravesar ou camiñar ou procura 336 00:15:18,270 --> 00:15:21,800 ou cambialo DOM árbore con todo queremos. 337 00:15:21,800 --> 00:15:24,040 Entón, en realidade, se pensar sobre facebook.com, 338 00:15:24,040 --> 00:15:27,660 se usa o recurso de chat, se uso Gmail e recurso Gchat, 339 00:15:27,660 --> 00:15:30,540 calquera cousa que ten mensaxes que veñen de novo e de novo 340 00:15:30,540 --> 00:15:35,880 e, de novo, estas mensaxes son, probablemente, como, LI, etiqueta lista de elementos, quizais. 341 00:15:35,880 --> 00:15:37,940 >> Ou quizais son só divs que seguen aparecendo 342 00:15:37,940 --> 00:15:39,770 cada vez que recibir unha mensaxe instantánea. 343 00:15:39,770 --> 00:15:42,960 E así, iso só significa que Facebook ou Google está facendo 344 00:15:42,960 --> 00:15:45,200 é calquera momento que comeza a a mensaxe do servidor, 345 00:15:45,200 --> 00:15:48,740 probablemente está a usar JavaScript só engadir outro nodo 346 00:15:48,740 --> 00:15:52,700 para este tree-- outro nodo a este árbore que entón visualmente só mira 347 00:15:52,700 --> 00:15:54,570 como unha nova liña de texto en pantalla. 348 00:15:54,570 --> 00:15:57,100 Pero eles están inserindo para esta estrutura de datos. 349 00:15:57,100 --> 00:15:59,742 >> Así como nas clases CS124 e outros, vai 350 00:15:59,742 --> 00:16:02,200 realmente escribir máis código contra estruturas de datos como este. 351 00:16:02,200 --> 00:16:04,310 Pero, por agora, en JavaScript, imos só supor 352 00:16:04,310 --> 00:16:07,920 temos toda esa función de balde a partir da propia linguaxe. 353 00:16:07,920 --> 00:16:09,210 Entón, imos ollar un exemplo. 354 00:16:09,210 --> 00:16:13,120 >> Déixeme abrir un ficheiro chamado form.html. 355 00:16:13,120 --> 00:16:14,601 É super sinxelo. 356 00:16:14,601 --> 00:16:15,600 E só mira como esta. 357 00:16:15,600 --> 00:16:17,860 >> O CSS, ningún pensamento de estética. 358 00:16:17,860 --> 00:16:19,810 É puramente funcional e ao parecer, eu son 359 00:16:19,810 --> 00:16:24,000 pedindo un correo electrónico, un contrasinal contrasinal e, a continuación, unha comprobación 360 00:16:24,000 --> 00:16:26,150 a aceptar os termos e condicións. 361 00:16:26,150 --> 00:16:28,740 Que o código fonte para este parece que pode ser algo 362 00:16:28,740 --> 00:16:31,030 podes imaxinar cun pouco de pensamento agora. 363 00:16:31,030 --> 00:16:32,840 Eu teño unha marca de formulario aquí. 364 00:16:32,840 --> 00:16:36,190 >> Unha acción aparentemente está indo ir a un ficheiro chamado register.php. 365 00:16:36,190 --> 00:16:37,870 O método que eu vou usar é quedar. 366 00:16:37,870 --> 00:16:40,880 E entón eu teño un texto campo cuxo nome é e-mail. 367 00:16:40,880 --> 00:16:43,340 >> Eu teño un campo de contrasinal cuxo nome é contrasinal. 368 00:16:43,340 --> 00:16:45,420 Teño outra campo de contrasinal, cuxo nome 369 00:16:45,420 --> 00:16:47,342 é a confirmación dun tanto arbitrariamente. 370 00:16:47,342 --> 00:16:49,690 É só un parámetro HTTP. 371 00:16:49,690 --> 00:16:54,430 >> E, entón, non usei eses excepto desde os IMS Frosh demo en class-- 372 00:16:54,430 --> 00:16:56,692 unha caixa de verificación que se só tipo é igual a cheque. 373 00:16:56,692 --> 00:16:57,900 E eu vou chamar ese acordo. 374 00:16:57,900 --> 00:17:00,700 Entón eu medio que arbitrariamente, senón convenientemente chamada neses campos. 375 00:17:00,700 --> 00:17:03,450 De xeito que agora, cando esta forma queda presentado, imos ver o que acontece. 376 00:17:03,450 --> 00:17:07,290 Se eu fai malan@harvard.edu, Vou facer un contrasinal de carmesim. 377 00:17:07,290 --> 00:17:09,530 Vou facer un contrasinal de nada. 378 00:17:09,530 --> 00:17:10,910 Non imos cooperar. 379 00:17:10,910 --> 00:17:12,280 >> E eu non vou marcar a caixa. 380 00:17:12,280 --> 00:17:13,940 Déixeme prema en rexistrar. 381 00:17:13,940 --> 00:17:15,420 E di que, hm, está rexistrado. 382 00:17:15,420 --> 00:17:16,069 Non é realmente. 383 00:17:16,069 --> 00:17:17,450 >> Pero a URL cambiou. 384 00:17:17,450 --> 00:17:22,280 Así, esta forma foi claramente permitido someterse a register.php. 385 00:17:22,280 --> 00:17:25,160 Pero presuntamente, debería ser pegando algúns deses erros. 386 00:17:25,160 --> 00:17:27,569 Agora, en Pset7 e algúns dos nosos exemplos de clase, 387 00:17:27,569 --> 00:17:30,130 que, en xeral, imprimir unha gran mensaxe de erro vermello aquí 388 00:17:30,130 --> 00:17:33,760 dicindo, o nome en falta, ou falta contrasinal. 389 00:17:33,760 --> 00:17:37,680 Nós fixemos iso antes e temos done detección de erro do lado do servidor. 390 00:17:37,680 --> 00:17:41,580 >> Pero moitos sitios estes días facer a detección de erros do lado do cliente 391 00:17:41,580 --> 00:17:42,810 en que a URL non cambia. 392 00:17:42,810 --> 00:17:44,101 A páxina enteira non actualizar. 393 00:17:44,101 --> 00:17:46,940 Obtén un feedback instantáneas desde o navegador. 394 00:17:46,940 --> 00:17:48,070 Quizais algo sae vermello. 395 00:17:48,070 --> 00:17:49,190 >> Quizais recibe un pop up. 396 00:17:49,190 --> 00:17:53,240 Pero non perda tempo enviando para os datos do servidor que é incompleto. 397 00:17:53,240 --> 00:17:56,050 Entón imos ver como podemos acadar este recurso tamén. 398 00:17:56,050 --> 00:17:59,660 >> Déixeme ir form1.html, parecer o mesmo. 399 00:17:59,660 --> 00:18:03,530 Pero se esta vez fago malan@harvard.edu e eu tecleo carmesim 400 00:18:03,530 --> 00:18:07,350 e eu non cooperar máis pero prema Register, teña en conta o momento. 401 00:18:07,350 --> 00:18:08,940 Non é a solución máis sexy. 402 00:18:08,940 --> 00:18:10,900 Eu, polo menos, peguei este erro. 403 00:18:10,900 --> 00:18:12,900 E eu usei a alerta función en JavaScript-- 404 00:18:12,900 --> 00:18:14,090 que estamos a usar só en clase. 405 00:18:14,090 --> 00:18:16,430 En xeral, non debe usar este porque pode rapidamente saír 406 00:18:16,430 --> 00:18:17,160 de control. 407 00:18:17,160 --> 00:18:19,180 Pero contrasinais non coinciden é o erro. 408 00:18:19,180 --> 00:18:21,120 >> Deixe-me ir adiante e prema en Aceptar. 409 00:18:21,120 --> 00:18:25,040 Pero o que o principal argumento aquí é que a URL non se alterou. 410 00:18:25,040 --> 00:18:27,960 Desperdicio Entón eu non estou incómodo hora do servidor pedíndolle 411 00:18:27,960 --> 00:18:30,750 unha pregunta que eu podería descubrín a resposta para min mesmo. 412 00:18:30,750 --> 00:18:33,210 >> E o usuario, aínda que falado sobre iso 413 00:18:33,210 --> 00:18:35,264 máis tempo do que o usuario de vai pensar sobre iso, 414 00:18:35,264 --> 00:18:36,680 vai ter un feedback instantáneo. 415 00:18:36,680 --> 00:18:39,044 Non hai ningunha latencia con a liña de rede. 416 00:18:39,044 --> 00:18:40,460 Entón, imos ollar para este código fonte. 417 00:18:40,460 --> 00:18:45,600 >> Miradas Form1.html estruturalmente semellante aquí enriba. 418 00:18:45,600 --> 00:18:46,810 O formulario é de feito o mesmo. 419 00:18:46,810 --> 00:18:48,330 Pero imos ver o que eu fixen aquí. 420 00:18:48,330 --> 00:18:49,913 E hai diferentes formas de facelo. 421 00:18:49,913 --> 00:18:53,690 E eu fixen o máis directo seguidor, pero non forma máis elegante aínda. 422 00:18:53,690 --> 00:18:54,869 Eu teño unha etiqueta script. 423 00:18:54,869 --> 00:18:57,035 Eu, entón, chamar document.getElementById ("rexistro"). 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 E eu almacenar este valor na forma, unha variable. 426 00:19:04,420 --> 00:19:05,520 >> Entón o que foi que eu fixen? 427 00:19:05,520 --> 00:19:08,960 Pode pensar en document.getElementById como 428 00:19:08,960 --> 00:19:11,200 unha función especial que JavaScript lle dá 429 00:19:11,200 --> 00:19:14,400 que literalmente lle ofrece un punteiro para un dos nós 430 00:19:14,400 --> 00:19:16,520 ou rectángulos nesta árbore. 431 00:19:16,520 --> 00:19:21,470 Polo tanto, agora que é o que a nosa variable de formulario en JavaScript é realmente apuntando. 432 00:19:21,470 --> 00:19:25,120 >> Entón, agora a sintaxe é diferente C. Pero estamos facendo algunhas cousas aquí. 433 00:19:25,120 --> 00:19:30,360 Un deles, que é un pouco raro buscar, certamente contra C. 434 00:19:30,360 --> 00:19:32,180 Pero mire para liña 35. 435 00:19:32,180 --> 00:19:35,130 Así, no form.onsubmit esquerda. 436 00:19:35,130 --> 00:19:38,060 Lembre que é onsubmit como un campo nunha struct. 437 00:19:38,060 --> 00:19:41,480 Se pensas que a variable forma é só ser un struct C, 438 00:19:41,480 --> 00:19:42,600 pode ter algúns campos. 439 00:19:42,600 --> 00:19:46,410 >> Volver o día, tivemos nomes estudantes, IDs, casas, este tipo de campos. 440 00:19:46,410 --> 00:19:48,520 Basta pensar onsubmit como outro campo. 441 00:19:48,520 --> 00:19:53,380 Pero é un campo especial xa que o navegador é pre-programado para esperar 442 00:19:53,380 --> 00:19:57,530 .onsubmit para non ser un valor como un número ou unha cadea, 443 00:19:57,530 --> 00:20:01,180 pero para realmente ser unha función ou o enderezo dunha función 444 00:20:01,180 --> 00:20:02,570 na memoria do ordenador. 445 00:20:02,570 --> 00:20:04,740 >> E, de feito, é o que esta palabra clave aquí fai. 446 00:20:04,740 --> 00:20:06,710 Este di, dáme unha nova función. 447 00:20:06,710 --> 00:20:09,390 Pero cal é o seu nome será, ao parecer? 448 00:20:09,390 --> 00:20:10,800 >> Pensando luns. 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 Qué é o nome do presente derivada función sintaxe? 451 00:20:17,170 --> 00:20:19,784 Non, quero dicir, hai claramente ningún nome associated-- certamente 452 00:20:19,784 --> 00:20:21,200 non no que eu destaque aquí. 453 00:20:21,200 --> 00:20:22,560 >> Pero iso é realmente Aceptar. 454 00:20:22,560 --> 00:20:25,840 Esta é unha función anónima, é un función lambda como algúns poden chamalo. 455 00:20:25,840 --> 00:20:27,589 E iso significa só aínda é unha función. 456 00:20:27,589 --> 00:20:29,400 É só, non pode chamalo polo nome. 457 00:20:29,400 --> 00:20:30,057 Pero iso é OK. 458 00:20:30,057 --> 00:20:33,140 Porque unha vez máis, o navegador foi pre-programados por empresas como Google 459 00:20:33,140 --> 00:20:38,540 ou Microsoft ou Mozilla ou outros para só sei que se o campo .onsubmit 460 00:20:38,540 --> 00:20:43,400 dentro dun elemento de formulario ten o valor, trata-lo como un function-- 461 00:20:43,400 --> 00:20:44,750 un punteiro de función, se quere. 462 00:20:44,750 --> 00:20:46,910 E chamalo cando o formulario é enviado. 463 00:20:46,910 --> 00:20:50,350 >> Entón, o código debe ser executado cando o formulario é enviado? 464 00:20:50,350 --> 00:20:52,526 Ao parecer, todo dentro da chaveta. 465 00:20:52,526 --> 00:20:53,650 E este é só estilística. 466 00:20:53,650 --> 00:20:55,626 >> Podes facelo como tendemos a facer en CS50. 467 00:20:55,626 --> 00:20:58,250 Pero en JavaScript, a maioría da xente tenden a perder la na mesma liña 468 00:20:58,250 --> 00:21:01,960 só porque é máis claramente asociado con esa función contrasinal. 469 00:21:01,960 --> 00:21:03,240 Entón agora o que estou facendo? 470 00:21:03,240 --> 00:21:08,616 >> Se form.email.value igual equals a cadea baleira é nada, é aquí 471 00:21:08,616 --> 00:21:11,490 unha alerta que vou dicir, ten que proporcionar o seu enderezo de correo electrónico, 472 00:21:11,490 --> 00:21:12,690 e, a continuación, voltar falso. 473 00:21:12,690 --> 00:21:15,720 E é esa falsa retorno que impide que a forma de ser sometido. 474 00:21:15,720 --> 00:21:19,480 Non obstante, se o valor do contrasinal é en branco, eu vou berrar co usuario 475 00:21:19,480 --> 00:21:21,150 e dicir, ten que proporcionar un contrasinal. 476 00:21:21,150 --> 00:21:23,700 >> Mentres tanto, as cousas están quedando un pouco máis chique aquí. 477 00:21:23,700 --> 00:21:29,160 Se non fai form.password.value igual form.confirmation.value, 478 00:21:29,160 --> 00:21:31,680 o outro campo, grite o usuario que os contrasinais 479 00:21:31,680 --> 00:21:33,860 non corresponden á medida que non hai un momento. 480 00:21:33,860 --> 00:21:35,780 E entón que é un pouco máis sexy porque eu 481 00:21:35,780 --> 00:21:40,470 sei que eu sabía que conceptualmente Comprobarase é o nome dunha caixa de selección. 482 00:21:40,470 --> 00:21:45,680 >> Entón eu só podo usar unha exclamación punto de dicir se o cheque non é 483 00:21:45,680 --> 00:21:48,040 checked-- é o booleano valor, verdadeiro ou false-- 484 00:21:48,040 --> 00:21:49,700 Vou gritar ao usuario por este motivo. 485 00:21:49,700 --> 00:21:52,300 Se non, se pasar todas estas condicións, 486 00:21:52,300 --> 00:21:53,270 imos voltar certo. 487 00:21:53,270 --> 00:21:54,700 Deixe o formulario ser sometido. 488 00:21:54,700 --> 00:21:56,560 E iso vai ocorrer axiña. 489 00:21:56,560 --> 00:21:57,740 >> Imos escribir carmesim. 490 00:21:57,740 --> 00:22:00,230 Imos comprobar a caixa, faga clic en Register. 491 00:22:00,230 --> 00:22:01,979 E agora eu vou ata o destino. 492 00:22:01,979 --> 00:22:03,270 Agora, non hai base de datos alí. 493 00:22:03,270 --> 00:22:05,370 Non hai nada de interesante en register.php. 494 00:22:05,370 --> 00:22:07,980 Eu só precisaba de algo para realmente falar. 495 00:22:07,980 --> 00:22:09,140 Entón deixe-me facer unha pausa, aquí. 496 00:22:09,140 --> 00:22:16,270 Calquera dúbida sobre o que acaba de facer ou o que algúns deste novo sintaxe é? 497 00:22:16,270 --> 00:22:17,640 OK, non é? 498 00:22:17,640 --> 00:22:20,025 >> Audiencia: Así, calquera caixa de verificación automaticamente un booleano. 499 00:22:20,025 --> 00:22:21,650 Non ten que declaralo lo así. 500 00:22:21,650 --> 00:22:22,649 >> DAVID J. Malan: Correcto. 501 00:22:22,649 --> 00:22:29,340 Calquera opción que é enviado a vostede de un formulario HTML ao seu código JavaScript 502 00:22:29,340 --> 00:22:31,760 será tratado, si, como un Booleana value-- verdadeiro ou falso. 503 00:22:31,760 --> 00:22:32,635 É unha boa pregunta. 504 00:22:32,635 --> 00:22:36,080 Considerando que os outros valores, de Por suposto, ser o texto, cordas aka. 505 00:22:36,080 --> 00:22:38,500 >> Todo ben, entón me deixe rebobinar un pouco máis. 506 00:22:38,500 --> 00:22:39,900 Cal foi o punto de todo este? 507 00:22:39,900 --> 00:22:41,400 Só queda claro. 508 00:22:41,400 --> 00:22:44,940 Tipo, a xente xa sabe, mesmo de Pset7 e mesmo de charla da semana pasada 509 00:22:44,940 --> 00:22:51,120 exemplos, que podemos, obviamente, comprobar $ _GET $ _POST Ver se o usuario dános 510 00:22:51,120 --> 00:22:52,200 un valor baleiro. 511 00:22:52,200 --> 00:22:54,400 Teña en conta que da función baleira en PHP. 512 00:22:54,400 --> 00:22:58,040 >> Entón, só para quedar claro, o que é un dos motivos que tamén pode 513 00:22:58,040 --> 00:23:00,535 quero facelo a comprobación de erros dentro do navegador? 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 Cal é a motivación aquí? 516 00:23:06,080 --> 00:23:06,580 Si. 517 00:23:06,580 --> 00:23:09,735 >> Audiencia: Máis rápido, e non fai enviar datos inútiles para o servidor. 518 00:23:09,735 --> 00:23:10,610 DAVID J. Malan: Good. 519 00:23:10,610 --> 00:23:11,170 É máis rápido. 520 00:23:11,170 --> 00:23:12,920 Non manda inútil os datos ao servidor. 521 00:23:12,920 --> 00:23:14,670 >> Entón volver máis resposta inmediata. 522 00:23:14,670 --> 00:23:16,560 E, en xeral, o usuario experiencia é mellor. 523 00:23:16,560 --> 00:23:17,900 Pense sobre a alternativa. 524 00:23:17,900 --> 00:23:21,160 >> Se, por Gmail-- e foi o caso hai moitos anos. 525 00:23:21,160 --> 00:23:24,160 Supoña que vostede ten un novo correo o Gmail conta, pero a única forma a través da 526 00:23:24,160 --> 00:23:26,510 a ver que é, como, actualizar a páxina enteira. 527 00:23:26,510 --> 00:23:29,030 Ou supoñamos que prema unha ligazón para ler un correo electrónico. 528 00:23:29,030 --> 00:23:31,600 >> Todo ten que recargar así que se pode ver o correo electrónico. 529 00:23:31,600 --> 00:23:33,380 Ou Facebook-- recibe unha mensaxe de chat. 530 00:23:33,380 --> 00:23:36,000 Non velo ata que recargar a páxina ou prema nalgún enlace. 531 00:23:36,000 --> 00:23:38,380 >> Como, iso sería unha terrible experiencia do usuario irritante. 532 00:23:38,380 --> 00:23:41,300 E iso é o que era, claramente, de volta cando eu execute para UC 533 00:23:41,300 --> 00:23:44,760 e web foi moito menos dinámico e JavaScript non foi tan popularizado 534 00:23:44,760 --> 00:23:45,601 como é agora. 535 00:23:45,601 --> 00:23:47,850 E as cousas están quedando moi máis dinámico e moito máis 536 00:23:47,850 --> 00:23:49,900 lado do cliente nese sentido. 537 00:23:49,900 --> 00:23:54,370 >> Pero hai un problema aquí, e esta é unha especie de pegadinha irritante. 538 00:23:54,370 --> 00:23:58,720 Só porque engade lado do cliente detección como isto non significa 539 00:23:58,720 --> 00:24:01,430 pode ou debe abandonar detección do lado do servidor. 540 00:24:01,430 --> 00:24:04,080 Vostede esencialmente quere poñer o seu comprobación de erros en ambos os lugares. 541 00:24:04,080 --> 00:24:05,830 Porque o que foi un da lección aprendida 542 00:24:05,830 --> 00:24:10,270 do artigo que lin algúns fragmentos con deste system-- CMS estúpido 543 00:24:10,270 --> 00:24:14,410 Content Management System-- que era implantación do sistema de autenticación, 544 00:24:14,410 --> 00:24:16,790 seu login dende cal mecanismo? 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 >> Audiencia: JavaScript. 548 00:24:21,499 --> 00:24:23,290 DAVID J. Malan: JavaScript, exactamente, non? 549 00:24:23,290 --> 00:24:24,610 Estaba usando JavaScript. 550 00:24:24,610 --> 00:24:27,120 E literalmente, vostedes teñen desempeñado un pouco probablemente 551 00:24:27,120 --> 00:24:28,700 co inspector de Chrome. 552 00:24:28,700 --> 00:24:30,890 E se eu puider atopalo, inspeccionar elemento. 553 00:24:30,890 --> 00:24:33,670 >> Deixade-me pasar a facer todas as opcións de Chrome. 554 00:24:33,670 --> 00:24:37,080 E é así que é doado desactivar o Javascript nun navegador. 555 00:24:37,080 --> 00:24:38,950 Consulte, non máis Javascript. 556 00:24:38,950 --> 00:24:41,070 >> Entón, para ser xusto, moi web nos días de hoxe 557 00:24:41,070 --> 00:24:43,430 só vai romper porque Gmail e outros sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook-- asumir que JavaScript está activado. 559 00:24:46,140 --> 00:24:50,180 Pero se está facendo algo estúpido como só validar a entrada usuarios 560 00:24:50,180 --> 00:24:52,520 e comproba se hai erros no lado do cliente, 561 00:24:52,520 --> 00:24:54,940 un adversario podería facelo facilmente. 562 00:24:54,940 --> 00:24:57,180 E despois aínda máis intelixente adversario como vostedes 563 00:24:57,180 --> 00:25:01,120 agora pode utilizar o Telnet ou onda ou ordes de liña de comandos só 564 00:25:01,120 --> 00:25:05,300 e realmente enviar mensaxes ao servidor que tampouco son erro comprobado. 565 00:25:05,300 --> 00:25:08,380 >> Polo tanto, este é un decisión interface de usuario 566 00:25:08,380 --> 00:25:13,060 que é unha técnica efectiva improvement-- implementación 567 00:25:13,060 --> 00:25:14,410 lado cliente algo así. 568 00:25:14,410 --> 00:25:16,800 Entón agora un rápido ollar, pero despois Vou retrasar a camiñada en liña 569 00:25:16,800 --> 00:25:17,674 a través dun presente. 570 00:25:17,674 --> 00:25:21,480 En forma de dous, que realmente pasou por e limparon o código un pouco. 571 00:25:21,480 --> 00:25:23,650 Pero déixeme retrasar a unha dos vídeos que probablemente vai 572 00:25:23,650 --> 00:25:27,970 incorporar en Pset8 que mostra unha sintaxe semellante usando unha biblioteca chamada 573 00:25:27,970 --> 00:25:32,320 jQuery, que é un super, super biblioteca popular en JavaScript 574 00:25:32,320 --> 00:25:34,510 que, francamente, a maioría da xente é só usar estes días 575 00:25:34,510 --> 00:25:37,070 e mesmo confundir como propio ser JavaScript. 576 00:25:37,070 --> 00:25:38,950 >> E iso tende a involucrar algúns cifrões 577 00:25:38,950 --> 00:25:41,350 e palabras clave como documento en parénteses aquí. 578 00:25:41,350 --> 00:25:44,480 Pero, de novo, déixeme retrasar a algúns tutoriais máis lentos en liña 579 00:25:44,480 --> 00:25:46,750 en vez de estar amarre en só sintaxe. 580 00:25:46,750 --> 00:25:48,630 Imos seguir adiante para algo un pouco máis frío 581 00:25:48,630 --> 00:25:50,520 en termos de aplicacións deste. 582 00:25:50,520 --> 00:25:57,730 >> Así, en particular, déixeme ir adiante e abrir este aquí. 583 00:25:57,730 --> 00:25:58,340 Veña. 584 00:25:58,340 --> 00:25:59,380 Alí imos nós. 585 00:25:59,380 --> 00:26:01,500 >> Déixeme abrir esta foto aquí. 586 00:26:01,500 --> 00:26:03,450 Innecesariamente complicado mirando, pero 587 00:26:03,450 --> 00:26:07,880 describe unha técnica chamada AJAX-- Asynchronous JavaScript e XML, onde 588 00:26:07,880 --> 00:26:10,530 o X para XML é realmente deixou de ser realmente utilizado. 589 00:26:10,530 --> 00:26:13,430 El tende a usar algo outro chamado JSON. 590 00:26:13,430 --> 00:26:16,560 >> Pero aquí é como algo como Google Maps ou Google Earth funciona. 591 00:26:16,560 --> 00:26:18,060 Imos tentar que en tempo real, en realidade. 592 00:26:18,060 --> 00:26:21,590 Deixe-me ir adiante e abrir ata Chrome no meu navegador. 593 00:26:21,590 --> 00:26:26,236 >> E déixeme entrar, dicir, maps.google.com. 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 E, de feito, se é vello abondo para lembrar que, 596 00:26:31,930 --> 00:26:35,600 como, MapQuest era como volver no mesmo día, e quizais eles aínda funcionan así. 597 00:26:35,600 --> 00:26:38,870 Cando se usa para buscar something-- 33 Oxford Street, Cambridge, Mass, 598 00:26:38,870 --> 00:26:40,650 imos facer isso- ti sería, en realidade, se 599 00:26:40,650 --> 00:26:43,000 quería para desprazarse cara a arriba e abaixo, esquerda e dereita, 600 00:26:43,000 --> 00:26:44,920 vostede ollaría como un gran frecha na parte superior, e 601 00:26:44,920 --> 00:26:46,921 ía amosar-lle outro marco do mapa aquí. 602 00:26:46,921 --> 00:26:49,753 Ou debería premer á esquerda e ía máis aquí, ou outro click 603 00:26:49,753 --> 00:26:51,000 e ía por aquí. 604 00:26:51,000 --> 00:26:53,000 Pero, en vez destes días, nós, por suposto, só 605 00:26:53,000 --> 00:26:55,970 tomar por certo que podemos ir en torno de Cambridge moi rapidamente 606 00:26:55,970 --> 00:26:57,550 só premendo e arrastrando. 607 00:26:57,550 --> 00:26:59,130 Pero teña en conta que hai algúns fallos. 608 00:26:59,130 --> 00:27:02,160 >> Se eu fai iso rápido abondo, o que parece estar a suceder 609 00:27:02,160 --> 00:27:05,960 como eu arrastrar algo demasiado rápido para o ordenador para manter-se? 610 00:27:05,960 --> 00:27:07,160 O que ve? 611 00:27:07,160 --> 00:27:07,660 Si. 612 00:27:07,660 --> 00:27:09,232 >> Audiencia: Os píxeles non actualizar. 613 00:27:09,232 --> 00:27:10,940 DAVID J. Malan: O píxeles non actualizar. 614 00:27:10,940 --> 00:27:12,870 Hai actually-- e podía ver iso, en realidade, 615 00:27:12,870 --> 00:27:15,360 se está vendo en liña e descanso este é realmente atrasa as cousas 616 00:27:15,360 --> 00:27:18,600 para once-- vai ver que hai tellas, cadrados, ou rectángulos que 617 00:27:18,600 --> 00:27:22,040 están ausentes do mapa ata unha fracción de segundo despois, máis datos, 618 00:27:22,040 --> 00:27:24,390 máis imaxes realmente aparecen na pantalla. 619 00:27:24,390 --> 00:27:29,810 E, de feito, se facemos iso mirando ata Chrome's-- digamos, Chrome-- 620 00:27:29,810 --> 00:27:30,310 imos ver. 621 00:27:30,310 --> 00:27:31,090 Non podemos facer iso. 622 00:27:31,090 --> 00:27:31,860 >> Oh, berros. 623 00:27:31,860 --> 00:27:34,761 Imos abrir maps.google.com. 624 00:27:34,761 --> 00:27:36,660 Deixe-me facer o diálogo máis novo. 625 00:27:36,660 --> 00:27:38,836 >> Voltar para 33 Oxford Street. 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 Cal foi o sitio que eu estaba recentemente? 628 00:27:43,760 --> 00:27:46,440 Tiven que, como, divertido privado a a min mesmo que eu tiña entón mensaxe instantánea 629 00:27:46,440 --> 00:27:48,470 calquera amigo que estaba en liña que querían escoitalo. 630 00:27:48,470 --> 00:27:49,345 Hai algún sitio. 631 00:27:49,345 --> 00:27:52,680 Creo que é por iso Comcast-- un gran ISP americano. 632 00:27:52,680 --> 00:27:56,355 Pode, cando rexistrarte para novo cable servizo de módem ou servizo de televisión por cable, 633 00:27:56,355 --> 00:27:59,230 eles teñen unha forma moi razoablemente onde pedirlle ao seu enderezo. 634 00:27:59,230 --> 00:28:01,450 E ten esa incrible función chamada auto completa, 635 00:28:01,450 --> 00:28:04,600 como Google, que comeza a encher na resposta á súa pregunta. 636 00:28:04,600 --> 00:28:08,090 >> O problema é que eles fan auto completa sobre as primeiras cousas que escribe. 637 00:28:08,090 --> 00:28:12,890 Entón, se comezar a escribir en 33, el pode amosar-lle literalmente toda casa 638 00:28:12,890 --> 00:28:15,790 en América, que comeza co número 33 639 00:28:15,790 --> 00:28:17,920 antes de continuar espero que escriba máis. 640 00:28:17,920 --> 00:28:20,660 Entón, se escribir 33 Oxford, a continuación, el mostra as rúas 641 00:28:20,660 --> 00:28:24,726 en América, que ten 33 Oxford en o seu nome, con independencia da cidade 642 00:28:24,726 --> 00:28:25,350 que está en. 643 00:28:25,350 --> 00:28:26,320 >> E entón continuar a escribir. 644 00:28:26,320 --> 00:28:28,930 E, finalmente, el entende que non facer oferta de servizos para a súa casa en Cambridge 645 00:28:28,930 --> 00:28:29,920 ou algo parecido. 646 00:28:29,920 --> 00:28:33,410 Pero o punto é, este é o máis implantación asinino de auto 647 00:28:33,410 --> 00:28:34,140 completar nunca. 648 00:28:34,140 --> 00:28:36,400 >> E eu só vou off sobre esta tanxente novo. 649 00:28:36,400 --> 00:28:39,040 Pero hai boas maneiras de usar JavaScript e malos camiños. 650 00:28:39,040 --> 00:28:40,750 E iso non é necesariamente o mellor. 651 00:28:40,750 --> 00:28:46,360 >> Pero o punto aquí, antes de que este discurso, era a apertura de ferramentas aquí 652 00:28:46,360 --> 00:28:49,480 e abrir as ferramentas de desenvolvemento, como temos animou antes, 653 00:28:49,480 --> 00:28:52,840 e para asistir a Rede guía como eu premer moi rápido. 654 00:28:52,840 --> 00:28:55,400 E teña en conta un grupo enteiro de obter pedidos pasou. 655 00:28:55,400 --> 00:28:57,310 Todo isto aconteceu dende que eu arrastrado. 656 00:28:57,310 --> 00:29:00,170 >> E o máis probable, de feito moitas destas liñas 657 00:29:00,170 --> 00:29:04,060 agora son imaxe JPEG barra Tipos MIME ou tipo de contido. 658 00:29:04,060 --> 00:29:07,750 Iso porque o cromo está facendo cada vez que eu clic e arrastra, prema 659 00:29:07,750 --> 00:29:11,650 e arrastrar, é que é entender, oh, I que ir pedir a Google para a tella 660 00:29:11,650 --> 00:29:15,080 no mapa que está aquí, rapidamente a descarga vía HTTP, 661 00:29:15,080 --> 00:29:19,550 e, a continuación, engadir lo ao chamado DOM para os navegadores web en árbore memoria 662 00:29:19,550 --> 00:29:24,430 representación de maneira que o usuario, min, ve que a tella actualizado. 663 00:29:24,430 --> 00:29:26,795 E iso é debido a unha técnica chamada AJAX. 664 00:29:26,795 --> 00:29:28,920 Volver o día, realmente foi o caso de que se 665 00:29:28,920 --> 00:29:33,050 quería cambiar o que está na pantalla, que tería que premer enriba, abaixo, á esquerda, 666 00:29:33,050 --> 00:29:33,550 dereita. 667 00:29:33,550 --> 00:29:34,740 E, a continuación, unha nova páxina se abrirá. 668 00:29:34,740 --> 00:29:36,531 Pero estes días, todo é máis dinámico. 669 00:29:36,531 --> 00:29:40,490 Acontece na forma que nos seres humanos faría espero que realmente faría de forma interactiva. 670 00:29:40,490 --> 00:29:43,210 E el consegue iso forma dunha técnica chamada 671 00:29:43,210 --> 00:29:46,170 AJAX, que é quizais o mellor explicada por un exemplo. 672 00:29:46,170 --> 00:29:49,730 En primeiro lugar, deixe-me ir adiante e abrir un ficheiro 673 00:29:49,730 --> 00:29:53,540 chamado quote.php en código de distribución de hoxe. 674 00:29:53,540 --> 00:29:56,200 >> E, a continuación, deixe-me facer berros symbol--. 675 00:29:56,200 --> 00:30:02,399 Deixe-me facer símbolo = GOOG por só algunhas accións. 676 00:30:02,399 --> 00:30:04,440 Ou, en realidade, imos facer o un do Pset GRATIS. 677 00:30:04,440 --> 00:30:05,270 Intro. 678 00:30:05,270 --> 00:30:06,580 >> E agora o que eu volver. 679 00:30:06,580 --> 00:30:09,210 Polo tanto, este é realmente un ficheiro PHP que eu curto 680 00:30:09,210 --> 00:30:13,210 escribiu que simplemente pide código da función de investigación de Pset7 681 00:30:13,210 --> 00:30:17,830 e cospe usando este chaveta e citas e notación de dous puntos, ao parecer, 682 00:30:17,830 --> 00:30:22,747 prezo da acción actual ao empresa que pasa na vía get. 683 00:30:22,747 --> 00:30:24,580 Polo tanto, esta é diferente de máis do que temos 684 00:30:24,580 --> 00:30:26,496 feito en que o aviso que estou literalmente cuspindo 685 00:30:26,496 --> 00:30:27,870 o que parece ser de código JavaScript. 686 00:30:27,870 --> 00:30:30,020 >> De feito, este é un obxecto JavaScript. 687 00:30:30,020 --> 00:30:34,130 De feito, só para ser máis claro, JavaScript Object Notation-- JSON-- 688 00:30:34,130 --> 00:30:38,330 é só un xeito elegante de dicir que pode representar datos en JavaScript moi 689 00:30:38,330 --> 00:30:41,660 como pode en PHP usar pares de valores clave. 690 00:30:41,660 --> 00:30:44,270 Entón, se eu quería declarar unha variable en JavaScript 691 00:30:44,270 --> 00:30:47,872 a representa Zamyla, para instance-- un struct para Zamyla-- 692 00:30:47,872 --> 00:30:49,580 e imos chamalo estudante, esta variable. 693 00:30:49,580 --> 00:30:53,060 O seu ID é un, casa é Winthrop, eo nome é Zamyla. 694 00:30:53,060 --> 00:30:55,490 >> Pero tamén pode ter unha matriz de obxectos. 695 00:30:55,490 --> 00:30:58,710 Entón, se realmente quería ter unha matriz en JavaScript que contén 696 00:30:58,710 --> 00:31:01,740 varios destes obxectos, este tempo que representa o persoal, 697 00:31:01,740 --> 00:31:04,910 Podería ter estes tres anacos de código de volta 698 00:31:04,910 --> 00:31:08,560 a volta atrás para estes tres ex-membros do equipo. 699 00:31:08,560 --> 00:31:12,201 Así, a sintaxe, bastante semellante ao ambos-- para PHP. 700 00:31:12,201 --> 00:31:13,700 Pero iso é especialmente JavaScript. 701 00:31:13,700 --> 00:31:15,940 É notación obxecto. 702 00:31:15,940 --> 00:31:17,240 Entón, o que é útil para este? 703 00:31:17,240 --> 00:31:21,580 >> Se eu escribir un código que cospe JSON-- JavaScript Object Notation-- cousas que 704 00:31:21,580 --> 00:31:24,670 parécese iso ou cousas que Parece que a estrutura da Zamyla, 705 00:31:24,670 --> 00:31:27,730 Podo realmente usar este en programas que eu escriba. 706 00:31:27,730 --> 00:31:30,660 Déixeme ir ajax0.html. 707 00:31:30,660 --> 00:31:33,310 E este non moi demasiado-- atención dada á estética. 708 00:31:33,310 --> 00:31:34,660 Pero mira o que acontece. 709 00:31:34,660 --> 00:31:37,050 >> Deixe-me ir adiante e escriba gratuitamente aquí. 710 00:31:37,050 --> 00:31:38,490 Prema obter cita. 711 00:31:38,490 --> 00:31:41,060 E teña en conta o URL non cambiou. 712 00:31:41,060 --> 00:31:47,250 Pero eu puiden un pop up con parecer prezo das accións centavo de hoxe de US $ 0,15. 713 00:31:47,250 --> 00:31:49,062 Entón, non tan malo así. 714 00:31:49,062 --> 00:31:52,020 Pero a diferenza é que dalgún xeito, Estes datos viñeron de volta para min directamente. 715 00:31:52,020 --> 00:31:54,250 Pero imos dar un paso na dirección algo máis familiar. 716 00:31:54,250 --> 00:31:58,900 Na versión dun deste, déixeme escriba libre de novo, faga clic en Obter cita, 717 00:31:58,900 --> 00:32:01,146 e agora- oh, esta foi de feito, a versión jQuery. 718 00:32:01,146 --> 00:32:03,270 Entón imos me-- eu non fixen avanzar moi lonxe o suficiente. 719 00:32:03,270 --> 00:32:05,830 Deixe-me ir á versión dous, que é onde eu quería. 720 00:32:05,830 --> 00:32:07,260 Teña en conta o que fixen aquí. 721 00:32:07,260 --> 00:32:10,370 Eu teño unha web página-- un super versión simple de calquera páxina web 722 00:32:10,370 --> 00:32:14,260 pode usar hoxe, cun campo de texto aquí por libre e entón, ao parecer, só 723 00:32:14,260 --> 00:32:14,880 texto. 724 00:32:14,880 --> 00:32:16,860 >> Esta non é unha forma aquí, aparentemente. 725 00:32:16,860 --> 00:32:19,360 Pero se eu premer en obter cita, teña en conta a miña páxina web 726 00:32:19,360 --> 00:32:22,760 está a piques de cambiar, como se eu só teño unha nova mensaxe instantánea 727 00:32:22,760 --> 00:32:25,360 ou como se eu só cambiou o mapa e necesario para obter máis datos 728 00:32:25,360 --> 00:32:29,220 engadidos dinamicamente á páxina web sen a URL cambio eo usuario 729 00:32:29,220 --> 00:32:30,980 experiencia estar detido. 730 00:32:30,980 --> 00:32:35,750 En realidade, eu aínda estou no exactamente o mesmo ajax2.html Place--. 731 00:32:35,750 --> 00:32:39,080 >> Entón, imos ollar só para este exemplo para ver como isto está a suceder. 732 00:32:39,080 --> 00:32:42,490 Déixeme entrar ajax2.html. 733 00:32:42,490 --> 00:32:44,770 E teña en conta a forma por primeira vez. 734 00:32:44,770 --> 00:32:47,092 >> Aquí abaixo, eu estou volvendo off auto completa. 735 00:32:47,092 --> 00:32:48,800 Ás veces queda irritante se o navegador 736 00:32:48,800 --> 00:32:50,508 está intentando amosar-lle toda a súa historia. 737 00:32:50,508 --> 00:32:53,450 Así, pode facelo en HTML só dicindo auto completar off. 738 00:32:53,450 --> 00:32:57,290 >> Teño dado este texto dun campo symbol-- si, unha identificación de símbolo. 739 00:32:57,290 --> 00:32:58,977 E agora, esta é unha característica interesante. 740 00:32:58,977 --> 00:33:01,310 Non falamos de extensión, pero pode pensar sobre iso 741 00:33:01,310 --> 00:33:03,177 como unha marca de parágrafo ou div tag. 742 00:33:03,177 --> 00:33:05,010 É o que se chama de in liña elemento, que 743 00:33:05,010 --> 00:33:07,415 significa que non vai conseguir un parágrafo romper enriba e debaixo del. 744 00:33:07,415 --> 00:33:11,530 El só pode ir en liña sen acadando o equivalente a entrar. 745 00:33:11,530 --> 00:33:17,980 Entón, eu teño dado este anaco de HTML a ser determinado un identificador único 746 00:33:17,980 --> 00:33:20,130 que arbitrariamente chamado prezo. 747 00:33:20,130 --> 00:33:21,560 E eu teño un botón Enviar. 748 00:33:21,560 --> 00:33:25,420 >> Porque agora ata aquí- e este é realmente super incrible código quão pouco 749 00:33:25,420 --> 00:33:27,660 pode escribir para facer relativamente puro coisas- 750 00:33:27,660 --> 00:33:31,800 entender o que eu teño feito ata aquí, se eu rolar para arriba a cabeza desta páxina. 751 00:33:31,800 --> 00:33:34,970 Eu xa incluído por primeira vez en miña cabeza unha etiqueta script 752 00:33:34,970 --> 00:33:37,410 que, en realidade, fai referencia a unha JavaScript arquivo noutro lugar. 753 00:33:37,410 --> 00:33:39,702 Esta é a partir da organización que escribe jQuery, 754 00:33:39,702 --> 00:33:42,660 e iso é só darlle o último versión da súa biblioteca jQuery. 755 00:33:42,660 --> 00:33:46,305 >> Entón, iso é como afiada incluír en C ou esixir en PHP. 756 00:33:46,305 --> 00:33:48,900 Usa a etiqueta script cun atributo de orixe. 757 00:33:48,900 --> 00:33:52,030 Pero agora o meu propio código vai ser bo aquí. 758 00:33:52,030 --> 00:33:54,170 >> Repare que eu teño unha función chamada Quotes. 759 00:33:54,170 --> 00:33:56,180 E parece un pouco enigmática, a primeira vista. 760 00:33:56,180 --> 00:33:57,305 Pero imos xogar con este apart. 761 00:33:57,305 --> 00:33:59,090 Déame unha variable chamada URL. 762 00:33:59,090 --> 00:34:01,390 Asignar-se literalmente esta cadea. 763 00:34:01,390 --> 00:34:04,530 Así, aspas, comiñas dobres en JavaScript só me dá unha corda. 764 00:34:04,530 --> 00:34:06,900 O que fai o máis facer? 765 00:34:06,900 --> 00:34:08,199 Concatenação. 766 00:34:08,199 --> 00:34:12,610 >> Polo tanto, este é agora a sintaxe jQuery que leva un pouco para acostumar. 767 00:34:12,610 --> 00:34:18,310 Pero iso significa só ir buscar-me o DOM nó cuxo identificador único é símbolo. 768 00:34:18,310 --> 00:34:21,929 A hashtag non significa símbolo identificador único. 769 00:34:21,929 --> 00:34:24,929 >> O sinal de dólar no parénteses significa só, enrole esta 770 00:34:24,929 --> 00:34:28,510 jQuery nunha especie de segredo salsa de modo ten unha función adicional. 771 00:34:28,510 --> 00:34:31,880 E, a continuación, é aparentemente .val unha función, ou como se di agora, 772 00:34:31,880 --> 00:34:35,219 un método dentro deste nodo que só lle dá o valor. 773 00:34:35,219 --> 00:34:38,896 Así, en breve, feo e confuso como iso parece, a primeira vista, 774 00:34:38,896 --> 00:34:42,020 isto significa só ir con o usuario inseriu en, poñelas ao final da cadea 775 00:34:42,020 --> 00:34:42,880 concatenando-lo. 776 00:34:42,880 --> 00:34:43,739 Iso é todo. 777 00:34:43,739 --> 00:34:46,070 >> Entón, agora, tres últimas liñas. 778 00:34:46,070 --> 00:34:48,690 Pode usar unha morea de función de tres liñas. 779 00:34:48,690 --> 00:34:52,199 Este sinal de dólar, como un de lado, é só un apelido 780 00:34:52,199 --> 00:34:55,800 para unha variable global especial chamado literalmente jQuery. 781 00:34:55,800 --> 00:34:57,060 >> Sinal de dólar só parece legal. 782 00:34:57,060 --> 00:35:00,080 Así, a comunidade jQuery só unha especie do usou como o seu símbolo especial. 783 00:35:00,080 --> 00:35:02,470 Isto non quere dicir que iso significa en PHP. 784 00:35:02,470 --> 00:35:06,356 En JavaScript, sinal de dólar é só como unha letra do alfabeto 785 00:35:06,356 --> 00:35:07,480 ou un número de variables. 786 00:35:07,480 --> 00:35:09,000 >> Pode só telo como o nome. 787 00:35:09,000 --> 00:35:09,770 Só parece legal. 788 00:35:09,770 --> 00:35:11,890 Así, a comunidade adoptou como un apelido 789 00:35:11,890 --> 00:35:13,390 para a súa propia biblioteca chamada jQuery. 790 00:35:13,390 --> 00:35:15,060 >> E é super popular. 791 00:35:15,060 --> 00:35:17,620 Polo tanto, obter JSON é exactamente iso. 792 00:35:17,620 --> 00:35:19,920 É unha función que o persoal do jQuery escribiu 793 00:35:19,920 --> 00:35:23,340 que recibe JSON dende un server-- JavaScript Object Notation. 794 00:35:23,340 --> 00:35:25,680 Polo que URL é que vai para obter esta información? 795 00:35:25,680 --> 00:35:27,790 Ao parecer, desde este URL aquí. 796 00:35:27,790 --> 00:35:31,180 >> E o que debe facer como o navegador Así que recibe de volta esa resposta? 797 00:35:31,180 --> 00:35:36,500 E esa é a maxia do AJAX, por así speak-- asynchronous JavaScript en XML. 798 00:35:36,500 --> 00:35:41,320 É difícil ver con tal exemplo simple como tivemos aquí. 799 00:35:41,320 --> 00:35:44,730 >> Pero este era asíncrono en a sensación de que o meu código cando 800 00:35:44,730 --> 00:35:48,530 executado enviou unha mensaxe ao servidor para ir buscar-me un pouco JSON. 801 00:35:48,530 --> 00:35:51,340 E isto aconteceu super rápido que eu teño unha resposta. 802 00:35:51,340 --> 00:35:55,130 Pero o que é interesante é que esta liña de código non colgar meu ordenador. 803 00:35:55,130 --> 00:35:56,550 >> Eu non vin unha icona de spinning. 804 00:35:56,550 --> 00:35:59,200 Non perdín a capacidade de mover o rato. 805 00:35:59,200 --> 00:36:01,340 O meu navegador era realmente perfectamente ben. 806 00:36:01,340 --> 00:36:06,290 >> Debido a forma como JavaScript manipula o resposta do servidor é como segue. 807 00:36:06,290 --> 00:36:09,740 Vostede rexistrar o que chamaría unha función de retorno, que 808 00:36:09,740 --> 00:36:12,830 Significa só que, hey, JavaScript. 809 00:36:12,830 --> 00:36:16,100 Así que o servidor responde con JSON, 810 00:36:16,100 --> 00:36:18,750 chame esta función anónima. 811 00:36:18,750 --> 00:36:23,910 >> E por favor, pasou a esta función calquera que sexa a secuencia de servidor cuspir 812 00:36:23,910 --> 00:36:26,080 como un argumento chamado de datos. 813 00:36:26,080 --> 00:36:28,360 Polo tanto, noutras, palabras, se Estou montando dinamicamente 814 00:36:28,360 --> 00:36:33,370 quote.php un URL que pasa neste símbolo como LIBRE ou GOOG ou outros enfeites, 815 00:36:33,370 --> 00:36:36,830 Eu digo, a continuación, JavaScript ir buscar este URL. 816 00:36:36,830 --> 00:36:39,080 Lembre que o navegador vai voltar algo 817 00:36:39,080 --> 00:36:42,680 que parece que viu earlier-- iso. 818 00:36:42,680 --> 00:36:45,940 >> E o que o segundo argumento aquí para obter JSON está dicindo 819 00:36:45,940 --> 00:36:48,450 é chamar esta función cando o servidor recibe de volta 820 00:36:48,450 --> 00:36:52,440 se é 10 milisegundos a partir de agora é 10 segundos a partir de agora. 821 00:36:52,440 --> 00:36:55,840 E así que fai, engade o prezo para a páxina. 822 00:36:55,840 --> 00:36:58,030 Esta sintaxe aquí só Significa ir buscar o no 823 00:36:58,030 --> 00:37:01,940 da árbore cuxo único identificador é preço-- ese período vimos anteriormente. 824 00:37:01,940 --> 00:37:04,320 >> Este método chamado HTML só di, vai substituír 825 00:37:04,320 --> 00:37:08,770 o código HTML que está aí con data.price. 826 00:37:08,770 --> 00:37:10,200 O que hai de data.price? 827 00:37:10,200 --> 00:37:12,850 Ben, o navegador, lembre, amosoume esta volvendo. 828 00:37:12,850 --> 00:37:14,540 Polo tanto, este é un dato. 829 00:37:14,540 --> 00:37:18,100 >> E por iso é un pouco enigmática para ver as comas aquí. 830 00:37:18,100 --> 00:37:19,350 Pero, en realidade, deixe-me facelo. 831 00:37:19,350 --> 00:37:22,890 Déixeme só pegar este moi rápido en gedit 832 00:37:22,890 --> 00:37:27,240 e amosar-lle como mostramos Estrutura Zamyla anteriormente. 833 00:37:27,240 --> 00:37:31,610 >> Que o servidor está enviando de volta é un pequeno obxecto que se parece con isto. 834 00:37:31,610 --> 00:37:37,140 E así é data.price só me dando 0,1515. 835 00:37:37,140 --> 00:37:39,310 Entón, unha morea de movemento pezas aquí todo dunha vez. 836 00:37:39,310 --> 00:37:41,860 >> Pero as principais leccións é que temos esa capacidade 837 00:37:41,860 --> 00:37:44,600 para facer HTTP adicional solicitudes mediante JavaScript 838 00:37:44,600 --> 00:37:46,090 sen ter que recargar a páxina. 839 00:37:46,090 --> 00:37:49,580 E entón podemos realmente cambiar a páxina web en tempo real. 840 00:37:49,580 --> 00:37:51,850 E verifícase que JavaScript e outras linguaxes 841 00:37:51,850 --> 00:37:54,510 pode ser usado non só agora de mutación páxinas web, 842 00:37:54,510 --> 00:37:57,960 pero para realmente escribir software nun ordenador real, 843 00:37:57,960 --> 00:38:00,240 non só confinada ao Chrome ou similares. 844 00:38:00,240 --> 00:38:03,530 >> De feito, se-- Colton, que quere unirse a nós para atrás ata aquí 845 00:38:03,530 --> 00:38:06,100 co seu código de laboratorio, e Chang tamén? 846 00:38:06,100 --> 00:38:09,140 Imos adiante, despois de falar funcións anónimas e retorno 847 00:38:09,140 --> 00:38:13,090 e realmente probar sorte aquí cunha demostración en directo con sangrado 848 00:38:13,090 --> 00:38:16,480 tecnoloxía de punta, unha das estes dispositivos Elite movemento. 849 00:38:16,480 --> 00:38:18,940 Agora, este dispositivo, recall, é un dispositivo USB pouco 850 00:38:18,940 --> 00:38:25,620 ben isso-- que é beautiful-- que se conecta ás portas USB. 851 00:38:25,620 --> 00:38:29,120 >> E entón el ofrece entrada baixo a forma de xestos humanos 852 00:38:29,120 --> 00:38:32,560 usando detección por raios infravermellos, esencialmente, os movementos do seu brazo. 853 00:38:32,560 --> 00:38:35,150 Así, mentres que María intentou antes era muscular, 854 00:38:35,150 --> 00:38:39,000 realmente sentindo o que está cambiando seu brazo, que é o infravermello baseado. 855 00:38:39,000 --> 00:38:44,390 Por iso, está buscando movementos dentro o tipo de esfera de un pé ou así 856 00:38:44,390 --> 00:38:46,190 do dispositivo en si. 857 00:38:46,190 --> 00:38:48,950 >> Entón por que non podo ter unha facada neste primeiro? 858 00:38:48,950 --> 00:38:53,100 E imos adiante e xogar vostede enriba da sobrecarga aquí. 859 00:38:53,100 --> 00:38:56,250 Entón, imos poñer o portátil de Colton aquí. 860 00:38:56,250 --> 00:38:58,360 Temos Andrew na TV. 861 00:38:58,360 --> 00:39:00,160 E o que quere facerme primeiro? 862 00:39:00,160 --> 00:39:02,409 >> Colton: Dalle só poñer as súas mans sobre este cara 863 00:39:02,409 --> 00:39:04,430 e vai ver algúns fabuloso glitter. 864 00:39:04,430 --> 00:39:07,230 >> DAVID J. Malan: Very nice. 865 00:39:07,230 --> 00:39:11,110 Isto todo está a suceder en tempo real. 866 00:39:11,110 --> 00:39:11,889 Está ben. 867 00:39:11,889 --> 00:39:12,680 Todo ben, e si. 868 00:39:12,680 --> 00:39:14,119 Tan bo. 869 00:39:14,119 --> 00:39:15,410 Todo ben, o que máis podemos facer? 870 00:39:15,410 --> 00:39:17,900 >> Colton: Vaia á seguinte pantalla e ver. 871 00:39:17,900 --> 00:39:19,136 >> DAVID J. Malan: Todo ben. 872 00:39:19,136 --> 00:39:21,780 >> Colton: Un xogo divertido onde comeza a facer robots. 873 00:39:21,780 --> 00:39:24,738 >> DAVID J. Malan: Todo ben, entón iso é mans falsos me amosando o que facer. 874 00:39:24,738 --> 00:39:27,920 Colton: Si ir moi por diante e coller un dos bloques 875 00:39:27,920 --> 00:39:30,637 e poñelas enriba de que o corpo do robot. 876 00:39:30,637 --> 00:39:32,137 DAVID J. Malan: Ah, aí está a miña man. 877 00:39:32,137 --> 00:39:34,000 Oh. 878 00:39:34,000 --> 00:39:34,780 OK, encantador. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Espere un minuto, Aceptar. 881 00:39:38,650 --> 00:39:41,320 Alí imos nós. 882 00:39:41,320 --> 00:39:43,590 >> COLTON: Eu fixen unha no accidente. 883 00:39:43,590 --> 00:39:45,423 >> DAVID J. Malan: OK, eu vou incorporarse este cara. 884 00:39:45,423 --> 00:39:45,923 Caramba! 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 Cando estabamos a practicar esta última noite, xa sabe o que iso converteu? 887 00:39:51,550 --> 00:39:54,285 >> Así. 888 00:39:54,285 --> 00:39:55,490 Está ben. 889 00:39:55,490 --> 00:39:55,990 Próximo? 890 00:39:55,990 --> 00:39:56,860 >> Colton: Claro. 891 00:39:56,860 --> 00:39:58,818 >> DAVID J. Malan: Todo ben, e hai un terceiro. 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 Todo correcto. 894 00:40:01,674 --> 00:40:03,215 Colton: E neste, comeza a-- 895 00:40:03,215 --> 00:40:04,923 DAVID J. Malan: Ah, un deste bonito. 896 00:40:04,923 --> 00:40:06,650 Colton: --yeah, escoller distante desta flor. 897 00:40:06,650 --> 00:40:07,441 DAVID J. Malan: Aceptar. 898 00:40:07,441 --> 00:40:11,170 899 00:40:11,170 --> 00:40:11,670 Non? 900 00:40:11,670 --> 00:40:14,515 Perdidas. 901 00:40:14,515 --> 00:40:15,570 >> Colton: Oh, alí vai. 902 00:40:15,570 --> 00:40:18,680 >> DAVID J. Malan: Ah, Olle para iso. 903 00:40:18,680 --> 00:40:19,830 Moi bo. 904 00:40:19,830 --> 00:40:22,470 Ben, por que non 'tomamos fóra un voluntario aquí 905 00:40:22,470 --> 00:40:24,180 que quere vir cara arriba. 906 00:40:24,180 --> 00:40:27,500 Como preto de alí no verde, non é? 907 00:40:27,500 --> 00:40:30,540 >> Todo ben, e imos have-- no canto de facelo, algúns de vostedes 908 00:40:30,540 --> 00:40:34,590 pode coñecer este xogo aquí- cortar a corda, quizais? 909 00:40:34,590 --> 00:40:35,100 Imos ver. 910 00:40:35,100 --> 00:40:37,320 Temos os nosos lentes aquí? 911 00:40:37,320 --> 00:40:38,625 >> Está ben. 912 00:40:38,625 --> 00:40:39,270 Grazas. 913 00:40:39,270 --> 00:40:39,380 Cal é o seu nome? 914 00:40:39,380 --> 00:40:40,350 >> Audiencia: Laura. 915 00:40:40,350 --> 00:40:41,266 >> DAVID J. Malan: Laura? 916 00:40:41,266 --> 00:40:42,120 Bo ver. 917 00:40:42,120 --> 00:40:45,600 Se non lle importa de poñer Google Glass máis dos seus lentes. 918 00:40:45,600 --> 00:40:46,970 Este é Colton. 919 00:40:46,970 --> 00:40:47,650 >> Colton: Ola. 920 00:40:47,650 --> 00:40:48,140 Pracer en coñece-lo. 921 00:40:48,140 --> 00:40:49,600 >> DAVID J. Malan: OK, imos ao redor. 922 00:40:49,600 --> 00:40:52,516 Todo ben, entón o que está indo a facer aquí, despois de xogar iso antes, 923 00:40:52,516 --> 00:40:55,650 é poñer a man sobre o Leap Movemento aquí. 924 00:40:55,650 --> 00:40:57,210 E agora a súa frecha debe moverse. 925 00:40:57,210 --> 00:40:57,710 Oh, non tiña. 926 00:40:57,710 --> 00:40:58,066 >> Audiencia: Non. 927 00:40:58,066 --> 00:40:58,780 >> DAVID J. Malan: Nós Non quero deixar aínda. 928 00:40:58,780 --> 00:40:59,280 OK, agarde. 929 00:40:59,280 --> 00:41:01,200 Por aquí. 930 00:41:01,200 --> 00:41:03,530 Entón, observe como realizar o seu dedo sobre algo, 931 00:41:03,530 --> 00:41:06,750 o rato comeza a ir verde, que é como clic. 932 00:41:06,750 --> 00:41:08,980 >> Entón pase o rato sobre Play. 933 00:41:08,980 --> 00:41:10,970 E só un dedo é moi ben. 934 00:41:10,970 --> 00:41:13,869 E agora clic na pequena cara verde do lado esquerdo. 935 00:41:13,869 --> 00:41:15,410 E agora Manteña ata que enche verde. 936 00:41:15,410 --> 00:41:15,640 Boa. 937 00:41:15,640 --> 00:41:16,990 Agora, como, nivel un enriba. 938 00:41:16,990 --> 00:41:20,190 >> Audiencia: Si, queremos nivel 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, entón todo o que tes que facer é cortar a corda. 941 00:41:25,500 --> 00:41:28,240 O cursor é o único branco alí en baixo. 942 00:41:28,240 --> 00:41:28,880 >> Moi bo. 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 Todo ben, está a piques de ir máis difícil. 945 00:41:32,790 --> 00:41:34,800 Entón Manteña o dedo sobre próxima agora. 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 Boa. 948 00:41:39,030 --> 00:41:39,999 Este é difícil. 949 00:41:39,999 --> 00:41:40,966 >> Audiencia: Oh merda. 950 00:41:40,966 --> 00:41:41,466 Está ben. 951 00:41:41,466 --> 00:41:42,466 Ela quere ir por ese camiño. 952 00:41:42,466 --> 00:41:44,890 Oh merda, isso-- 953 00:41:44,890 --> 00:41:47,120 >> DAVID J. Malan: Yeah. 954 00:41:47,120 --> 00:41:50,700 Obxectivo secundario é facer que todas as estrelas. 955 00:41:50,700 --> 00:41:53,920 Todo ben, axiña. 956 00:41:53,920 --> 00:41:57,504 >> Imos ver se pode obter este terceiro. 957 00:41:57,504 --> 00:41:58,004 Boa. 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 OK, vaia alí. 960 00:42:06,840 --> 00:42:08,850 >> Claro. 961 00:42:08,850 --> 00:42:11,230 Oh, moi bo. 962 00:42:11,230 --> 00:42:11,930 Todo correcto. 963 00:42:11,930 --> 00:42:13,534 >> Entón, por que non atrasar aquí hoxe? 964 00:42:13,534 --> 00:42:15,200 Deixe ninguén vir enriba que quere xogar. 965 00:42:15,200 --> 00:42:16,880 Agradecemos moito a Laura noso voluntario. 966 00:42:16,880 --> 00:42:18,730 E imos velo o luns. 967 00:42:18,730 --> 00:42:21,190 >> Audiencia: Probablemente vai querer iso de volta. 968 00:42:21,190 --> 00:42:23,640 >> COLUMNA 2: Na próxima CS50-- 969 00:42:23,640 --> 00:42:35,222