1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J. MALAN: Tudo bem, de modo que este aqui é o braço Myo 3 00:00:41,880 --> 00:00:44,450 banda, um par de que tem para os projetos finais CS50. 4 00:00:44,450 --> 00:00:47,533 E isso foi uma demonstração em fila você se antecipadamente onde essencialmente 5 00:00:47,533 --> 00:00:51,120 este braço bastante apertado banda aqui ouve os seus movimentos musculares 6 00:00:51,120 --> 00:00:54,280 que são então mapeados em software para laptop de Colton aqui que 7 00:00:54,280 --> 00:00:57,230 teve iTunes e que música já na fila. 8 00:00:57,230 --> 00:01:00,270 Ao invés de me demoing isso, Colton esteve no laboratório 9 00:01:00,270 --> 00:01:04,129 claramente toda a semana recebendo uma demonstração pronto para um voluntário corajoso. 10 00:01:04,129 --> 00:01:07,430 Se alguém gostaria de vir em up-- viu sua mão primeiro. 11 00:01:07,430 --> 00:01:09,540 Vamos lá para cima. 12 00:01:09,540 --> 00:01:12,530 >> Tudo certo. 13 00:01:12,530 --> 00:01:13,886 E qual é o seu nome? 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, bom te ver. 16 00:01:16,550 --> 00:01:17,310 Venha até aqui. 17 00:01:17,310 --> 00:01:19,550 Deixe-me apresentar-lhe Colton. 18 00:01:19,550 --> 00:01:21,290 Colton, esta é Maria. 19 00:01:21,290 --> 00:01:23,050 >> Colton: Olá, prazer em conhecê-lo. 20 00:01:23,050 --> 00:01:24,330 >> DAVID J. MALAN: Todos bem, então o primeiro passo, estamos 21 00:01:24,330 --> 00:01:26,204 vai ter você colocar esta no seu antebraço 22 00:01:26,204 --> 00:01:29,280 de modo que é bastante tight-se perto de seu cotovelo. 23 00:01:29,280 --> 00:01:31,940 E enquanto isso, vamos ter colocar na nossa Vidro Google 24 00:01:31,940 --> 00:01:33,720 e vamos misturar as tecnologias de hoje. 25 00:01:33,720 --> 00:01:36,340 >> Colton: Primeiro nós vamos ter que ligar esta nas coisas. 26 00:01:36,340 --> 00:01:37,170 >> DAVID J. MALAN: OK. 27 00:01:37,170 --> 00:01:39,795 Na verdade, vamos colocar o seu braço como próximo a este cabo quanto possível 28 00:01:39,795 --> 00:01:41,160 para que possamos primeiro sincronizá-lo para cima. 29 00:01:41,160 --> 00:01:42,740 >> Colton: Vamos fazer isso. 30 00:01:42,740 --> 00:01:46,500 >> DAVID J. MALAN: E enquanto isso, por isso que todos possam ter um olhar mais atento, 31 00:01:46,500 --> 00:01:50,290 vamos atirar câmera de Andrew na tela lá. 32 00:01:50,290 --> 00:01:54,460 Portanto, temos um cabo USB que é ser conectado a braçadeira de Maria. 33 00:01:54,460 --> 00:02:00,230 E deixe-me atirar tela de Colton se o projetor próximo. 34 00:02:00,230 --> 00:02:06,000 >> Então Colton está registrando o dispositivo agora como um Myo ligado a este cabo. 35 00:02:06,000 --> 00:02:08,060 E agora o que Maria de vai fazer momentaneamente 36 00:02:08,060 --> 00:02:10,120 é realmente andar por as etapas de calibração 37 00:02:10,120 --> 00:02:12,830 e ensinar o software como seus músculos respondem 38 00:02:12,830 --> 00:02:16,070 quando ela a certeza de pré-definido aponta que o software entende. 39 00:02:16,070 --> 00:02:17,910 Se você gostaria de ir em frente da tela. 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 OK, continue tentando. 42 00:02:30,090 --> 00:02:31,860 >> COLTON: Vai como este. 43 00:02:31,860 --> 00:02:32,970 E assim. 44 00:02:32,970 --> 00:02:34,563 E todo o caminho para a direita. 45 00:02:34,563 --> 00:02:35,922 Volte. 46 00:02:35,922 --> 00:02:37,740 >> DAVID J. MALAN: OK. 47 00:02:37,740 --> 00:02:38,960 Perspectiva diferente. 48 00:02:38,960 --> 00:02:39,620 Não é você. 49 00:02:39,620 --> 00:02:40,350 Somos nós. 50 00:02:40,350 --> 00:02:41,749 >> MARIA: OK. 51 00:02:41,749 --> 00:02:42,540 DAVID J. MALAN: Não. 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 Vamos movê-lo mais para cima, por isso é mais perto de seu cotovelo, ou ainda mais apertado. 54 00:02:51,540 --> 00:02:52,680 Tudo certo. 55 00:02:52,680 --> 00:02:53,270 >> Aqui vamos nós. 56 00:02:53,270 --> 00:02:56,780 Este seria um bom momento para CS52X. 57 00:02:56,780 --> 00:02:57,670 Lá vamos nós. 58 00:02:57,670 --> 00:02:58,760 >> Muito bom. 59 00:02:58,760 --> 00:03:01,170 Está bem. 60 00:03:01,170 --> 00:03:02,790 Polegar para mindinho. 61 00:03:02,790 --> 00:03:03,380 >> Muito bom. 62 00:03:03,380 --> 00:03:05,140 Espalhe os dedos. 63 00:03:05,140 --> 00:03:06,240 Boa. 64 00:03:06,240 --> 00:03:06,910 Onda certa. 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 Está mostrando curiosamente você com a hand-- esquerda 67 00:03:17,010 --> 00:03:19,665 >> Colton: Sim, isso é estranho. 68 00:03:19,665 --> 00:03:21,790 DAVID J. MALAN: Onda de à direita e seguir em frente. 69 00:03:21,790 --> 00:03:22,998 Fast forward para pular ou seguinte. 70 00:03:22,998 --> 00:03:25,020 É isso mesmo Onda OK. 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: Precisa de alguma ajuda? 73 00:03:28,430 --> 00:03:30,027 >> Colton: Então você vai como este. 74 00:03:30,027 --> 00:03:31,860 MARIA: Ele está girando o outra coisa, no entanto. 75 00:03:31,860 --> 00:03:32,390 Colton: É. 76 00:03:32,390 --> 00:03:34,250 DAVID J. MALAN: Sim, eu não sei por que ele está mostrando a você um esquerdista. 77 00:03:34,250 --> 00:03:36,458 Colton: Por que você não try-- apenas tentar ir como este. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J. MALAN: Não? 80 00:03:40,090 --> 00:03:42,580 Talvez atingir seu braço um pouco mais reto 81 00:03:42,580 --> 00:03:46,070 e torná-lo mais abrupta como este. 82 00:03:46,070 --> 00:03:48,176 Sim, OK, vamos lá. 83 00:03:48,176 --> 00:03:49,670 >> MARIA: Eu sinto muito. 84 00:03:49,670 --> 00:03:51,170 DAVID J. MALAN: Não é culpa sua. 85 00:03:51,170 --> 00:03:53,018 Colton: É bom. 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 devemos ignorar isso, então? 89 00:03:57,620 --> 00:03:59,620 DAVID J. MALAN: Sim, vamos deixá-lo fora do gancho. 90 00:03:59,620 --> 00:04:03,130 Então, se alguém gostaria de fazer uma projeto final utilizando este vanguarda 91 00:04:03,130 --> 00:04:07,707 hardware, percebe que só poderia demorar um pouco para se acostumar. 92 00:04:07,707 --> 00:04:10,290 E isto-- a realidade é esta é realmente muito sangramento borda. 93 00:04:10,290 --> 00:04:12,040 >> Isto é o que é chamado o kit de desenvolvimento, que 94 00:04:12,040 --> 00:04:14,956 destina-se a ser, essencialmente, um pré-lançamento de modo que as pessoas podem fazer exatamente 95 00:04:14,956 --> 00:04:18,690 isto-- lutar com ele, figura a forma como os corpos das pessoas trabalhar 96 00:04:18,690 --> 00:04:19,980 com a tecnologia. 97 00:04:19,980 --> 00:04:21,750 Então se você quiser depois, após palestra, 98 00:04:21,750 --> 00:04:23,750 podemos deixá-lo vir e tomar outra facada nele. 99 00:04:23,750 --> 00:04:26,970 Mas por outro lado, uma salva de palmas, se Poderíamos, por Maria para vir em cima. 100 00:04:26,970 --> 00:04:28,770 >> MARIA: Obrigado. 101 00:04:28,770 --> 00:04:30,390 >> DAVID J. MALAN: Obrigado. 102 00:04:30,390 --> 00:04:34,945 Vamos agarrar a isso, mas vamos dar você- como sobre uma bola de stress aqui? 103 00:04:34,945 --> 00:04:38,620 Oh, e-- se-- sim, obrigado. 104 00:04:38,620 --> 00:04:39,715 Tudo certo. 105 00:04:39,715 --> 00:04:45,750 Então, para os curiosos, se você fosse familiarizado com a escolha de som 106 00:04:45,750 --> 00:04:47,670 que fizemos lá anteriormente, uma TV incrível 107 00:04:47,670 --> 00:04:50,210 mostrar que você deve absolutamente estar no Netflix observação de binge 108 00:04:50,210 --> 00:04:51,110 é este aqui. 109 00:04:51,110 --> 00:04:54,472 >> COLUNA 1: Senhoras e senhores, um mágico chamado Josh. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J. MALAN: E, aparentemente, é uma coisa para me texto durante palestra agora. 112 00:05:08,050 --> 00:05:11,190 Estou sendo informado de que Maria teve um aniversário ontem. 113 00:05:11,190 --> 00:05:14,095 Então, feliz aniversário a partir de CS50 a Maria também. 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> Então você pode ter lido no mês recente que este senhores aqui, Steve 116 00:05:22,090 --> 00:05:25,260 Ballmer, que era, na verdade, classe de 1977 na faculdade, 117 00:05:25,260 --> 00:05:27,170 recentemente se aposentou para a Microsoft. 118 00:05:27,170 --> 00:05:29,620 Ele era um estudante aqui, em seguida, um par de anos mais tarde 119 00:05:29,620 --> 00:05:31,910 encontrou-se em Stanford Business School 120 00:05:31,910 --> 00:05:34,160 quando recebeu um telefone chamada de um amigo seu que 121 00:05:34,160 --> 00:05:36,516 viveu no final do corredor dele aqui em Harvard. 122 00:05:36,516 --> 00:05:38,640 O nome desse amigo era Bill Gates, e no momento, 123 00:05:38,640 --> 00:05:42,700 ele estava tentando recrutar Steve ser a primeira pessoa de negócios, realmente, 124 00:05:42,700 --> 00:05:45,720 em uma pequena empresa de nome Microsoft. 125 00:05:45,720 --> 00:05:48,960 >> A longa história curta, Steve foi finalmente conquistado, 126 00:05:48,960 --> 00:05:52,130 se juntou à Microsoft quando eles tinha apenas 30 funcionários. 127 00:05:52,130 --> 00:05:54,300 E pelo tempo que ele aposentou recentemente, 128 00:05:54,300 --> 00:05:58,100 a empresa tinha 100.000 funcionários ao longo dos últimos anos. 129 00:05:58,100 --> 00:06:01,171 E assim, um site conhecido como The Verge preparou esta homenagem em vídeo 130 00:06:01,171 --> 00:06:02,920 que nós pensamos compartilhado que lhe dá 131 00:06:02,920 --> 00:06:08,380 uma sensação de quanta energia Steve traz para qualquer apresentação que ele dá. 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [REPRODUÇÃO DE VÍDEO] 134 00:06:12,550 --> 00:06:16,220 -Microsoft É como um quarto filho. 135 00:06:16,220 --> 00:06:18,260 As crianças fazem sair de casa. 136 00:06:18,260 --> 00:06:21,875 Neste caso, eu acho que Eu estou saindo 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 uma enorme oportunidade. 141 00:06:28,590 --> 00:06:30,210 E Bill nos deu essa oportunidade. 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 Quero agradecer a Bill por isso. 144 00:06:36,770 --> 00:06:39,630 Eu quero que você também. 145 00:06:39,630 --> 00:06:42,500 O ritmo da inovação não vai abrandar. 146 00:06:42,500 --> 00:06:45,140 >> Ele vai ficar mais rápido e mais rápido. 147 00:06:45,140 --> 00:06:50,165 Pode haver alguns concorrentes que, infelizmente, são eliminados! 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> Eu amo essa empresa. 150 00:06:59,564 --> 00:07:00,064 Sim! 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 Eu sou um 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 Sim! 157 00:07:18,970 --> 00:07:19,950 Os desenvolvedores da Web! 158 00:07:19,950 --> 00:07:21,420 >> Os desenvolvedores da Web! 159 00:07:21,420 --> 00:07:22,890 Os desenvolvedores da Web! 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 Ouça o que mais você obter, sem custo extra! 162 00:07:28,770 --> 00:07:31,960 >> O executivo MS-DOS, um compromisso calandra, uma pilha de cartões, um bloco de notas, 163 00:07:31,960 --> 00:07:33,750 um relógio, um painel de controle. 164 00:07:33,750 --> 00:07:35,461 E, você pode acreditar nisso? 165 00:07:35,461 --> 00:07:35,960 Reversie! 166 00:07:35,960 --> 00:07:37,270 >> Gravá-los em CD! 167 00:07:37,270 --> 00:07:38,660 Publicá-las no MSN! 168 00:07:38,660 --> 00:07:40,422 Você enviá-los para amigos! 169 00:07:40,422 --> 00:07:41,790 >> Tudo isso com um clique! 170 00:07:41,790 --> 00:07:48,670 One Microsoft, uma estratégia, um team-- focado, disciplinado, profissional, 171 00:07:48,670 --> 00:07:50,610 e especialista em tudo o que fazemos. 172 00:07:50,610 --> 00:07:52,670 Deixe-me usar uma linha de um filme antigo. 173 00:07:52,670 --> 00:07:54,810 >> Relacionamentos são como tubarões. 174 00:07:54,810 --> 00:07:57,480 Eles se movem para a frente ou morrem. 175 00:07:57,480 --> 00:08:01,470 Eu realmente acho tecnologia empresas são os mesmos. 176 00:08:01,470 --> 00:08:04,801 >> [FIM REPRODUÇÃO DE VÍDEO] 177 00:08:04,801 --> 00:08:08,050 DAVID J. MALAN: Então, estamos muito satisfeitos com anunciar que Steve vai se juntar a nós 178 00:08:08,050 --> 00:08:13,320 aqui em CS50 próxima quarta-feira em lugar de costume e tempo aqui. 179 00:08:13,320 --> 00:08:14,750 Espaço será provavelmente limitado. 180 00:08:14,750 --> 00:08:19,650 E assim se juntar a nós na pessoa, por favor cabeça hoje ou logo em seguida 181 00:08:19,650 --> 00:08:22,600 para cs50.harvard.edu/register. 182 00:08:22,600 --> 00:08:25,780 >> E vamos acompanhar por Terça-feira confirmando pontos. 183 00:08:25,780 --> 00:08:29,900 Ansiosos para que na próxima Quarta-feira durante palestra na CS50. 184 00:08:29,900 --> 00:08:33,706 Agora, em outra notícia, aconteceu de eu se deparar com isso em The Crimson apenas 185 00:08:33,706 --> 00:08:34,289 no outro dia. 186 00:08:34,289 --> 00:08:37,370 >> Acontece que um dos funcionários do CS50 e, pelo menos, um dos alunos de CS50 187 00:08:37,370 --> 00:08:40,299 está atualmente em execução para UC presidente e vice-presidente, 188 00:08:40,299 --> 00:08:42,950 que me trouxe de volta aos meus próprios dias atrás 189 00:08:42,950 --> 00:08:45,920 quando eu perdi a eleição UC miseravelmente. 190 00:08:45,920 --> 00:08:48,210 Mas o forro de prata em que é que eu sempre 191 00:08:48,210 --> 00:08:50,604 contar a história é que um dos que eu tenho certeza 192 00:08:50,604 --> 00:08:52,770 muitas razões que eu perdi o eleição foi uma completa falta 193 00:08:52,770 --> 00:08:54,103 de um talento para falar em público. 194 00:08:54,103 --> 00:08:56,950 E assim, muito sinceramente, que dirigi-me, que a experiência 195 00:08:56,950 --> 00:09:02,235 Acho que meu primeiro ano, para realmente assinar para Harvard Computer Society, que 196 00:09:02,235 --> 00:09:04,610 é o grupo no campus que detém várias palestras técnicas 197 00:09:04,610 --> 00:09:05,318 e outras coisas. 198 00:09:05,318 --> 00:09:08,117 E eu assumi seu ensino seminários e, portanto, 199 00:09:08,117 --> 00:09:09,950 teve uma oportunidade, uma oportunidade maravilhosa, 200 00:09:09,950 --> 00:09:12,620 para começar a trabalhar sobre exatamente isso. 201 00:09:12,620 --> 00:09:15,000 Mas também, eu tive uma oportunidade durante esta experiência 202 00:09:15,000 --> 00:09:16,930 me ensinar tudo o mais HTML. 203 00:09:16,930 --> 00:09:21,080 E assim eu acabei adiando a noite passada por olhando através do site baseado em HTML 204 00:09:21,080 --> 00:09:28,066 Eu fiz em 1997 como, 98, para o meu campanha que se parece com isso aqui. 205 00:09:28,066 --> 00:09:29,920 Eu sei. 206 00:09:29,920 --> 00:09:33,340 >> Because-- e, claro, o aviso prévio esta decisão design surpreendente em 1998 207 00:09:33,340 --> 00:09:33,850 ou outros enfeites. 208 00:09:33,850 --> 00:09:36,475 A primeira coisa que você quer que os usuários fazer ao visitar o seu site 209 00:09:36,475 --> 00:09:39,860 é ter que clicar em outro link apenas para entrar em seu website aqui com o monge 210 00:09:39,860 --> 00:09:43,940 trás como uma cortina envolta onde aparentemente minha plataforma de campanha era. 211 00:09:43,940 --> 00:09:46,330 E isso é tudo que você vai ter hoje é apenas um screenshot. 212 00:09:46,330 --> 00:09:49,500 Mas eu estava lendo, como, meus cartazes de campanha na noite passada 213 00:09:49,500 --> 00:09:50,490 e minha plataforma. 214 00:09:50,490 --> 00:09:52,960 >> E eu estava tão irritado com o tempo. 215 00:09:52,960 --> 00:09:55,380 Minha plataforma foi-- foi interessante. 216 00:09:55,380 --> 00:09:57,730 Então eu me acalmei desde então. 217 00:09:57,730 --> 00:10:03,550 Mas um dia, eu vou correr de novo e espero que melhor fora desta vez. 218 00:10:03,550 --> 00:10:07,265 >> Então, HTML, que a língua em que eu fiz em-- que você logo vai fazer muito more-- 219 00:10:07,265 --> 00:10:09,140 é algo que estive falando da tarde 220 00:10:09,140 --> 00:10:12,460 e em grande parte o que pressupõe agora que nós mudamos para outras línguas. 221 00:10:12,460 --> 00:10:15,650 Mas vamos fazer uma pausa por um momento e colocar algumas dessas coisas no contexto. 222 00:10:15,650 --> 00:10:18,040 Assim, em uma 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 Qualquer um? 225 00:10:20,208 --> 00:10:20,708 Sim. 226 00:10:20,708 --> 00:10:22,002 >> AUDIÊNCIA: Markup para websites. 227 00:10:22,002 --> 00:10:23,460 DAVID J. MALAN: Markup para o site. 228 00:10:23,460 --> 00:10:27,100 Portanto, é uma linguagem de marcação que permite estruturar uma página web. 229 00:10:27,100 --> 00:10:30,040 Cabeçalho sobe aqui, o título vai aqui, o corpo vai aqui. 230 00:10:30,040 --> 00:10:33,280 Isto está em negrito, este é italics-- esse tipo de detalhe. 231 00:10:33,280 --> 00:10:33,830 >> OK, bom. 232 00:10:33,830 --> 00:10:37,620 Então CSS permite que você- e eu tomou algumas liberdades lá 233 00:10:37,620 --> 00:10:40,990 com o ousado virados e itálico porque que é melhor implementado com isso. 234 00:10:40,990 --> 00:10:42,096 CSS é-- o quê? 235 00:10:42,096 --> 00:10:42,845 Diga em uma frase. 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 Qualquer pessoa em tudo. 238 00:10:46,720 --> 00:10:46,870 Sim. 239 00:10:46,870 --> 00:10:49,286 >> Audiência: enfeites e material, como forma de projetá-lo. 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 DAVID J. MALAN: OK, bom. 242 00:10:52,810 --> 00:10:55,420 Enfeites que permitem que você para projetá-lo ou estilizar ele 243 00:10:55,420 --> 00:10:59,540 com coisas como negrito e itálico e cores e também mais fino 244 00:10:59,540 --> 00:11:01,330 posicionamento de grão de elementos. 245 00:11:01,330 --> 00:11:04,520 É uma espécie de permite levar as coisas a última milha, de modo que se, por exemplo, 246 00:11:04,520 --> 00:11:08,130 em Pset7, você deve ter notado em seu carteira de página se você estiver neste momento 247 00:11:08,130 --> 00:11:12,270 já que uma tabela padrão que você fazer para mostrar participações do usuário 248 00:11:12,270 --> 00:11:15,740 e dinheiro, provavelmente, parece muito hediondo por padrão, sem espaço em branco. 249 00:11:15,740 --> 00:11:18,420 Tipo Tudo está repleto de juntos em linhas e colunas. 250 00:11:18,420 --> 00:11:20,662 >> Bem, com um pouco de CSS, como você pode perceber, 251 00:11:20,662 --> 00:11:23,870 você pode realmente ajustar isso e torná-lo algo muito mais familiar e muito 252 00:11:23,870 --> 00:11:24,870 mais bonito de se olhar. 253 00:11:24,870 --> 00:11:27,730 Então CSS é sobre a estilização de websites. 254 00:11:27,730 --> 00:11:31,970 Mas, então, lançou mais uma linguagem, PHP, o que nos permite fazer o que? 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> Vamos apenas fazer o que? 257 00:11:37,590 --> 00:11:38,177 Qualquer um. 258 00:11:38,177 --> 00:11:40,010 Tem de se aventurar além o primeiro par de linhas. 259 00:11:40,010 --> 00:11:40,260 Sim. 260 00:11:40,260 --> 00:11:41,719 >> AUDIÊNCIA: gerar conteúdo dinâmico. 261 00:11:41,719 --> 00:11:42,718 DAVID J. MALAN: Perfeito. 262 00:11:42,718 --> 00:11:43,850 Gerar conteúdo dinâmico. 263 00:11:43,850 --> 00:11:45,808 E você pode fazer isso em qualquer número de idiomas. 264 00:11:45,808 --> 00:11:50,120 Nós acontecer para usar o PHP, pois é em parte, de modo semelhante ao C sintaxe. 265 00:11:50,120 --> 00:11:52,000 >> Mas o PHP faz exatamente isso. 266 00:11:52,000 --> 00:11:54,620 Ele permite que você gerar dinamicamente saída. 267 00:11:54,620 --> 00:11:57,890 E alguns dos que a produção poderia ser HTML, como temos vindo a fazer normalmente. 268 00:11:57,890 --> 00:12:00,160 E também, porque é uma linguagem de programação, está 269 00:12:00,160 --> 00:12:03,240 o mecanismo através do qual podemos falar com bancos de dados. 270 00:12:03,240 --> 00:12:05,730 >> E nós podemos fazer consultas para outros servidores como Yahoos 271 00:12:05,730 --> 00:12:08,660 e programática fazer nada realmente que você poderia 272 00:12:08,660 --> 00:12:10,400 quer obrigar um computador para fazer. 273 00:12:10,400 --> 00:12:13,580 Então PHP nos permite começar saída dinamicamente o conteúdo. 274 00:12:13,580 --> 00:12:16,900 Então, por esta lógica, eu não tenho um site dinâmico de volta em 1998. 275 00:12:16,900 --> 00:12:18,460 >> Era apenas uma página web estática. 276 00:12:18,460 --> 00:12:22,250 Meu conteúdo teve de ser alterado por manualmente com gedit ou algum equivalente. 277 00:12:22,250 --> 00:12:25,290 Mas o PHP é o que usamos ou poderia ter usado, em vez disso, 278 00:12:25,290 --> 00:12:27,260 para algo como o Site Frosh IMs, que 279 00:12:27,260 --> 00:12:31,160 era suposto ter registos e gerenciar uma lista de coisas que users-- 280 00:12:31,160 --> 00:12:33,550 estão realmente mudando ao longo do tempo, mesmo que aconteça 281 00:12:33,550 --> 00:12:35,990 para usar Perl, uma diferente linguagem da época. 282 00:12:35,990 --> 00:12:40,350 >> E então, finalmente, nós introduzimos SQL-- Structured Query Language. 283 00:12:40,350 --> 00:12:43,845 Então ainda outra língua que é usado para quê? 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 Usado para quê? 286 00:12:47,639 --> 00:12:49,430 Podemos aventurar slight-- OK, nós não vamos 287 00:12:49,430 --> 00:12:51,263 para chegar mais longe que a orquestra aqui. 288 00:12:51,263 --> 00:12:53,432 AUDIÊNCIA: É um protocolo de usado para falar com bancos de dados. 289 00:12:53,432 --> 00:12:55,640 DAVID J. MALAN: Um protocolo usado para falar com bancos de dados. 290 00:12:55,640 --> 00:12:56,181 Deixe-me ajustar. 291 00:12:56,181 --> 00:12:59,280 É uma língua natural utilizada falar com databases-- seleciona 292 00:12:59,280 --> 00:13:01,280 e inserções e exclusões e atualizações e, na verdade, 293 00:13:01,280 --> 00:13:03,840 até mais recursos que nós ainda não mergulhou 294 00:13:03,840 --> 00:13:07,920 em, mas você pode querer ter explore-- para explorar, por exemplo, um projeto final. 295 00:13:07,920 --> 00:13:09,560 Então existem essas várias peças. 296 00:13:09,560 --> 00:13:13,100 >> E espero que Pset7, embora sua especificação é bastante longo, 297 00:13:13,100 --> 00:13:15,990 é deliberadamente muito tempo para orientá-lo através de como essas coisas podem tudo 298 00:13:15,990 --> 00:13:17,210 ser digitado junto. 299 00:13:17,210 --> 00:13:20,300 Agora, na segunda-feira, nós introduzida nosso último idioma 300 00:13:20,300 --> 00:13:23,430 que vamos apresentar formalmente em course-- o que é, JavaScript. 301 00:13:23,430 --> 00:13:25,720 Este, como PHP, é uma linguagem interpretada. 302 00:13:25,720 --> 00:13:28,110 >> Mas uma distinção fundamental Propus na segunda-feira 303 00:13:28,110 --> 00:13:32,730 é que, enquanto o PHP está executando ou sendo interpretada no servidor, o que 304 00:13:32,730 --> 00:13:35,990 neste caso, é o aparelho CS50, ou pode ser alguma web comercial 305 00:13:35,990 --> 00:13:39,370 servidor na Internet, JavaScript geral 306 00:13:39,370 --> 00:13:43,650 É uma linguagem que funciona do lado do cliente Não servidor side-- lo no browser. 307 00:13:43,650 --> 00:13:46,970 O que quer dizer, exatamente como quando eu abri Facebook se o código-fonte e encontrou tudo 308 00:13:46,970 --> 00:13:51,510 desses arquivos .js, a implicação era que quando você visita o Facebook ou mais 309 00:13:51,510 --> 00:13:54,810 sites estes dias, você começa não apenas HTML, CSS, não só, 310 00:13:54,810 --> 00:13:59,370 mas um monte de JavaScript código, muitas vezes sob a forma de arquivos .js. 311 00:13:59,370 --> 00:14:03,970 E então é a sua própria browser-- Mac ou PC-- que executa esse código. 312 00:14:03,970 --> 00:14:05,990 >> Mas o navegador executa. 313 00:14:05,990 --> 00:14:08,070 Você pode pensar em uma espécie de sandbox. 314 00:14:08,070 --> 00:14:12,420 Assim que o código JavaScript não deve ser capaz de apagar arquivos no seu computador. 315 00:14:12,420 --> 00:14:14,730 Ela não deve ser capaz de enviar e-mails em seu nome. 316 00:14:14,730 --> 00:14:17,760 O seu tipo de navegador restringe o que você pode fazer com ele. 317 00:14:17,760 --> 00:14:20,630 >> Então, nesse sentido, é um pouco menos poderoso, talvez, do que C. 318 00:14:20,630 --> 00:14:24,030 Mas JavaScript pode, como um de lado, ser utilizado no servidor, 319 00:14:24,030 --> 00:14:27,740 mas vamos tendem a não falar sobre isso nesse contexto. 320 00:14:27,740 --> 00:14:29,740 Então agora vamos amarrá-los juntos. 321 00:14:29,740 --> 00:14:34,000 Uma semana mais atrás, apresentamos alguns HTML na página web left-- super chato. 322 00:14:34,000 --> 00:14:35,000 >> Apenas diz Olá mundo. 323 00:14:35,000 --> 00:14:38,110 E então eu propus no direito podemos espécie de roubar idéias 324 00:14:38,110 --> 00:14:41,470 da nossa discussão de estruturas de dados em C 325 00:14:41,470 --> 00:14:45,270 e pensar sobre como isso hierárquica linguagem de marcação do lado esquerdo 326 00:14:45,270 --> 00:14:49,720 podem ser desenhados ou implementados na memória como uma estrutura de árvore com nós de real 327 00:14:49,720 --> 00:14:51,400 e ponteiros e esses tipos de detalhes. 328 00:14:51,400 --> 00:14:53,820 À direita, a que chamamos que um documento DOM-- 329 00:14:53,820 --> 00:14:56,800 Objeto Model-- que é apenas uma maneira elegante de dizer árvore. 330 00:14:56,800 --> 00:14:59,520 >> Agora, por que isso é útil para pense nisso desta maneira? 331 00:14:59,520 --> 00:15:01,680 Porque agora com JavaScript, porque temos 332 00:15:01,680 --> 00:15:05,810 código que obtém a desempenhar neste ambiente, o HTML real que é 333 00:15:05,810 --> 00:15:08,360 foi enviado para o navegador já e já tem 334 00:15:08,360 --> 00:15:12,690 foi carregado na memória pela navegador em uma árvore no seu computador de 335 00:15:12,690 --> 00:15:18,270 RAM como esta, podemos usar JavaScript para realmente atravessar ou caminhar ou busca 336 00:15:18,270 --> 00:15:21,800 ou mudar isso DOM árvore no entanto queremos. 337 00:15:21,800 --> 00:15:24,040 Então, na verdade, se você pensar sobre facebook.com, 338 00:15:24,040 --> 00:15:27,660 se você usar o recurso de bate-papo, se você uso o Gmail eo recurso Gchat, 339 00:15:27,660 --> 00:15:30,540 qualquer coisa que você tem mensagens que vêm de novo e de novo 340 00:15:30,540 --> 00:15:35,880 e, novamente, essas mensagens são, provavelmente, como, LI, tag lista de itens, talvez. 341 00:15:35,880 --> 00:15:37,940 >> Ou talvez eles são apenas divs que continuam aparecendo 342 00:15:37,940 --> 00:15:39,770 toda vez que receber uma mensagem instantânea. 343 00:15:39,770 --> 00:15:42,960 E assim, isso apenas significa que Facebook ou o Google está fazendo 344 00:15:42,960 --> 00:15:45,200 é qualquer momento que você começa a a mensagem do servidor, 345 00:15:45,200 --> 00:15:48,740 eles provavelmente estão usando JavaScript apenas adicionar outro nó 346 00:15:48,740 --> 00:15:52,700 para este tree-- outro nó para este árvore que então visualmente só olha 347 00:15:52,700 --> 00:15:54,570 como uma nova linha de texto na tela. 348 00:15:54,570 --> 00:15:57,100 Mas eles estão inserindo para esta estrutura de dados. 349 00:15:57,100 --> 00:15:59,742 >> Assim como nas aulas CS124 e outros, você vai 350 00:15:59,742 --> 00:16:02,200 realmente escrever mais código contra estruturas de dados como este. 351 00:16:02,200 --> 00:16:04,310 Mas, por agora, em JavaScript, vamos apenas supor 352 00:16:04,310 --> 00:16:07,920 temos toda essa funcionalidade gratuitamente a partir da própria linguagem. 353 00:16:07,920 --> 00:16:09,210 Então, vamos olhar um exemplo. 354 00:16:09,210 --> 00:16:13,120 >> Deixe-me abrir um arquivo chamado form.html. 355 00:16:13,120 --> 00:16:14,601 É super simples. 356 00:16:14,601 --> 00:16:15,600 Ela só olha como esta. 357 00:16:15,600 --> 00:16:17,860 >> No CSS, nenhum pensamento de estética. 358 00:16:17,860 --> 00:16:19,810 É puramente funcional e, aparentemente, eu sou 359 00:16:19,810 --> 00:16:24,000 pedindo um e-mail, uma senha senha novamente e, em seguida, uma verificação 360 00:16:24,000 --> 00:16:26,150 a concordar com alguns termos e condições. 361 00:16:26,150 --> 00:16:28,740 O que o código-fonte para este parece que é provavelmente algo 362 00:16:28,740 --> 00:16:31,030 você pode imaginar com um pouco de pensamento agora. 363 00:16:31,030 --> 00:16:32,840 Eu tenho uma marca de formulário aqui. 364 00:16:32,840 --> 00:16:36,190 >> Uma ação aparentemente está indo para ir para um arquivo chamado register.php. 365 00:16:36,190 --> 00:16:37,870 O método que eu vou usar é ficar. 366 00:16:37,870 --> 00:16:40,880 E então eu tenho um texto campo cujo nome é e-mail. 367 00:16:40,880 --> 00:16:43,340 >> Eu tenho um campo de senha cujo nome é senha. 368 00:16:43,340 --> 00:16:45,420 Eu tenho outra campo de senha, cujo nome 369 00:16:45,420 --> 00:16:47,342 é a confirmação de um tanto arbitrariamente. 370 00:16:47,342 --> 00:16:49,690 É apenas mais um parâmetro HTTP. 371 00:16:49,690 --> 00:16:54,430 >> E, então, nós não usei esses exceto desde os IMs Frosh demo em class-- 372 00:16:54,430 --> 00:16:56,692 uma caixa de seleção que é só tipo é igual a cheque. 373 00:16:56,692 --> 00:16:57,900 E eu vou chamar esse acordo. 374 00:16:57,900 --> 00:17:00,700 Então eu meio que arbitrariamente, mas convenientemente chamada nesses campos. 375 00:17:00,700 --> 00:17:03,450 De modo que agora, quando esta forma fica apresentado, vamos ver o que acontece. 376 00:17:03,450 --> 00:17:07,290 Se eu fizer malan@harvard.edu, Eu vou fazer uma senha de carmesim. 377 00:17:07,290 --> 00:17:09,530 Eu vou fazer uma senha de nada. 378 00:17:09,530 --> 00:17:10,910 Não vamos cooperar. 379 00:17:10,910 --> 00:17:12,280 >> E eu não vou marcar a caixa. 380 00:17:12,280 --> 00:17:13,940 Deixe-me clique em registrar. 381 00:17:13,940 --> 00:17:15,420 E diz que, hm, você está registrado. 382 00:17:15,420 --> 00:17:16,069 Não é realmente. 383 00:17:16,069 --> 00:17:17,450 >> Mas o URL alterado. 384 00:17:17,450 --> 00:17:22,280 Assim, esta forma foi claramente permitido submeter-se a register.php. 385 00:17:22,280 --> 00:17:25,160 Mas presumivelmente, eu deveria ser pegando alguns desses erros. 386 00:17:25,160 --> 00:17:27,569 Agora, em Pset7 e alguns dos nossos exemplos de aula, 387 00:17:27,569 --> 00:17:30,130 que, em geral, imprimir uma grande mensagem de erro vermelho aqui 388 00:17:30,130 --> 00:17:33,760 dizendo, o nome em falta, ou faltando senha. 389 00:17:33,760 --> 00:17:37,680 Nós fizemos isso antes e temos done detecção de erro do lado do servidor. 390 00:17:37,680 --> 00:17:41,580 >> Mas muitos sites estes dias fazer a detecção de erros do lado do cliente 391 00:17:41,580 --> 00:17:42,810 em que a URL não muda. 392 00:17:42,810 --> 00:17:44,101 A página inteira não atualizar. 393 00:17:44,101 --> 00:17:46,940 Você obtém um feedback instantâneo a partir do browser. 394 00:17:46,940 --> 00:17:48,070 Talvez algo der vermelho. 395 00:17:48,070 --> 00:17:49,190 >> Talvez você receber um pop up. 396 00:17:49,190 --> 00:17:53,240 Mas você não perca tempo enviando para os dados do servidor que é incompleto. 397 00:17:53,240 --> 00:17:56,050 Então vamos ver como podemos alcançar esse recurso também. 398 00:17:56,050 --> 00:17:59,660 >> Deixe-me ir para form1.html, que parece o mesmo. 399 00:17:59,660 --> 00:18:03,530 Mas se desta vez eu faço malan@harvard.edu e eu digito carmesim 400 00:18:03,530 --> 00:18:07,350 e eu não cooperar mais mas clique em Register, observe agora. 401 00:18:07,350 --> 00:18:08,940 Não é a solução mais sexy. 402 00:18:08,940 --> 00:18:10,900 Eu, pelo menos, peguei esse erro. 403 00:18:10,900 --> 00:18:12,900 E eu usei o alerta função em JavaScript-- 404 00:18:12,900 --> 00:18:14,090 que estamos usando somente em sala de aula. 405 00:18:14,090 --> 00:18:16,430 Em geral, você não deve usar este porque pode rapidamente sair 406 00:18:16,430 --> 00:18:17,160 de controle. 407 00:18:17,160 --> 00:18:19,180 Mas senhas não correspondem é o erro. 408 00:18:19,180 --> 00:18:21,120 >> Deixe-me ir em frente e clique em OK. 409 00:18:21,120 --> 00:18:25,040 Mas o que o principal argumento aqui é que a URL não se alterou. 410 00:18:25,040 --> 00:18:27,960 Desperdício Então eu não tenho incomodado hora do servidor pedindo-lhe 411 00:18:27,960 --> 00:18:30,750 uma pergunta que eu poderia ter descobri a resposta para mim mesmo. 412 00:18:30,750 --> 00:18:33,210 >> E o utilizador, embora falado sobre isso 413 00:18:33,210 --> 00:18:35,264 mais tempo do que o usuário de vai pensar sobre isso, 414 00:18:35,264 --> 00:18:36,680 vai ter um feedback instantâneo. 415 00:18:36,680 --> 00:18:39,044 Não há nenhuma latência com a conectividade de rede. 416 00:18:39,044 --> 00:18:40,460 Então, vamos olhar para este código fonte. 417 00:18:40,460 --> 00:18:45,600 >> Olhares Form1.html estruturalmente semelhante aqui em cima. 418 00:18:45,600 --> 00:18:46,810 O formulário é de fato o mesmo. 419 00:18:46,810 --> 00:18:48,330 Mas vamos ver o que eu fiz aqui. 420 00:18:48,330 --> 00:18:49,913 E há maneiras diferentes de fazer isso. 421 00:18:49,913 --> 00:18:53,690 E eu fiz o mais direto seguidor, mas não forma mais elegante ainda. 422 00:18:53,690 --> 00:18:54,869 Eu tenho uma tag script. 423 00:18:54,869 --> 00:18:57,035 Eu, então, chamar document.getElementById ("registo"). 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 E eu armazenar esse valor na forma, uma variável. 426 00:19:04,420 --> 00:19:05,520 >> Então o que foi que eu fiz? 427 00:19:05,520 --> 00:19:08,960 Você pode pensar em document.getElementById como sendo 428 00:19:08,960 --> 00:19:11,200 uma função especial que JavaScript lhe dá 429 00:19:11,200 --> 00:19:14,400 que, literalmente, lhe oferece um ponteiro para um dos nós 430 00:19:14,400 --> 00:19:16,520 ou retângulos nesta árvore. 431 00:19:16,520 --> 00:19:21,470 Portanto, agora que é o que a nossa variável de formulário em JavaScript é realmente apontando. 432 00:19:21,470 --> 00:19:25,120 >> Então, agora a sintaxe é diferente C. Mas estamos fazendo algumas coisas aqui. 433 00:19:25,120 --> 00:19:30,360 Um deles, este é um pouco estranho procurando, certamente contra C. 434 00:19:30,360 --> 00:19:32,180 Mas olhe para linha 35. 435 00:19:32,180 --> 00:19:35,130 Assim, no form.onsubmit esquerda. 436 00:19:35,130 --> 00:19:38,060 Lembre-se que é onsubmit como um campo em uma struct. 437 00:19:38,060 --> 00:19:41,480 Se você acha que a variável forma é apenas ser um struct C, 438 00:19:41,480 --> 00:19:42,600 ele pode ter alguns campos. 439 00:19:42,600 --> 00:19:46,410 >> Voltar no dia, tivemos nomes estudantes, IDs, casas, esse 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 Mas é um campo especial porque o browser é pré-programado para esperar 442 00:19:53,380 --> 00:19:57,530 .onsubmit para não ser um valor como um número ou uma string, 443 00:19:57,530 --> 00:20:01,180 mas para realmente ser uma função ou o endereço de uma função 444 00:20:01,180 --> 00:20:02,570 na memória do computador. 445 00:20:02,570 --> 00:20:04,740 >> E, de fato, é o que esta palavra-chave aqui faz. 446 00:20:04,740 --> 00:20:06,710 Este diz, dá-me uma nova função. 447 00:20:06,710 --> 00:20:09,390 Mas qual é o seu nome vai ser, aparentemente? 448 00:20:09,390 --> 00:20:10,800 >> Pensando segunda-feira. 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 O que é o nome do presente com base nesta função sintaxe? 451 00:20:17,170 --> 00:20:19,784 Não, quero dizer, há claramente nenhum nome associated-- certamente 452 00:20:19,784 --> 00:20:21,200 não no que eu destaque aqui. 453 00:20:21,200 --> 00:20:22,560 >> Mas isso é realmente OK. 454 00:20:22,560 --> 00:20:25,840 Esta é uma função anônima, ou um função lambda como alguns podem chamá-lo. 455 00:20:25,840 --> 00:20:27,589 E isso significa apenas ainda é uma função. 456 00:20:27,589 --> 00:20:29,400 É só, você não pode chamá-lo pelo nome. 457 00:20:29,400 --> 00:20:30,057 Mas isso é OK. 458 00:20:30,057 --> 00:20:33,140 Porque mais uma vez, o navegador tem sido pré-programados por empresas como a 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 de um elemento de formulário tem o valor, tratá-lo como um function-- 461 00:20:43,400 --> 00:20:44,750 um ponteiro de função, se você quiser. 462 00:20:44,750 --> 00:20:46,910 E chamá-lo quando o formulário é enviado. 463 00:20:46,910 --> 00:20:50,350 >> Então, o código deve ser executado quando o formulário é enviado? 464 00:20:50,350 --> 00:20:52,526 Aparentemente, tudo dentro da chaveta. 465 00:20:52,526 --> 00:20:53,650 E este é apenas estilística. 466 00:20:53,650 --> 00:20:55,626 >> Você pode fazer isso como tendemos a fazer em CS50. 467 00:20:55,626 --> 00:20:58,250 Mas em JavaScript, a maioria das pessoas tendem a mantê-la na mesma linha 468 00:20:58,250 --> 00:21:01,960 só porque ele é mais claramente associado com essa função palavra-chave. 469 00:21:01,960 --> 00:21:03,240 Então agora o que estou fazendo? 470 00:21:03,240 --> 00:21:08,616 >> Se form.email.value igual equals a cadeia vazia ou nada, é aqui 471 00:21:08,616 --> 00:21:11,490 um alerta que eu vou dizer, você deve fornecer seu endereço de e-mail, 472 00:21:11,490 --> 00:21:12,690 e, em seguida, retornar falso. 473 00:21:12,690 --> 00:21:15,720 E é essa falsa retorno que impede que a forma de ser submetido. 474 00:21:15,720 --> 00:21:19,480 Entretanto, se o valor da senha é em branco, eu vou gritar com o usuário 475 00:21:19,480 --> 00:21:21,150 e dizer, você deve fornecer uma senha. 476 00:21:21,150 --> 00:21:23,700 >> Enquanto isso, as coisas estão ficando um pouco mais chique aqui. 477 00:21:23,700 --> 00:21:29,160 Se não faz form.password.value igual form.confirmation.value, 478 00:21:29,160 --> 00:21:31,680 o outro campo, grite o usuário que as senhas 479 00:21:31,680 --> 00:21:33,860 não correspondem à medida que não há um momento. 480 00:21:33,860 --> 00:21:35,780 E então este é um pouco mais sexy porque eu 481 00:21:35,780 --> 00:21:40,470 sei que eu sabia que conceitualmente verificado é o nome de uma caixa de seleção. 482 00:21:40,470 --> 00:21:45,680 >> Então eu só posso usar uma exclamação ponto de dizer se o cheque não é 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 Eu vou gritar para o usuário por esse motivo. 485 00:21:49,700 --> 00:21:52,300 Caso contrário, se passar todas estas condições, 486 00:21:52,300 --> 00:21:53,270 vamos retornar verdadeiro. 487 00:21:53,270 --> 00:21:54,700 Deixe o formulário ser submetido. 488 00:21:54,700 --> 00:21:56,560 E isso vai acontecer em seguida. 489 00:21:56,560 --> 00:21:57,740 >> Vamos digitar carmesim. 490 00:21:57,740 --> 00:22:00,230 Vamos verificar a caixa, clique em Register. 491 00:22:00,230 --> 00:22:01,979 E agora eu vou até o destino. 492 00:22:01,979 --> 00:22:03,270 Agora, não há banco de dados lá. 493 00:22:03,270 --> 00:22:05,370 Não há nada de interessante em register.php. 494 00:22:05,370 --> 00:22:07,980 Eu só precisava de algo para realmente conversar. 495 00:22:07,980 --> 00:22:09,140 Então deixe-me fazer uma pausa, aqui. 496 00:22:09,140 --> 00:22:16,270 Qualquer dúvida sobre o que acabei de fazer ou o que alguns desta nova sintaxe é? 497 00:22:16,270 --> 00:22:17,640 OK, não é? 498 00:22:17,640 --> 00:22:20,025 >> AUDIÊNCIA: Assim, qualquer caixa de seleção é automaticamente um booleano. 499 00:22:20,025 --> 00:22:21,650 Você não tem que declará-lo assim. 500 00:22:21,650 --> 00:22:22,649 >> DAVID J. MALAN: Correto. 501 00:22:22,649 --> 00:22:29,340 Qualquer opção que é enviado a você de um formulário HTML ao seu código JavaScript 502 00:22:29,340 --> 00:22:31,760 vai ser tratada, sim, como um Booleana value-- verdadeiro ou falso. 503 00:22:31,760 --> 00:22:32,635 É uma boa pergunta. 504 00:22:32,635 --> 00:22:36,080 Considerando que os outros valores, de Claro, ter sido o texto, cordas AKA. 505 00:22:36,080 --> 00:22:38,500 >> Tudo bem, então me deixe rebobinar um pouco mais. 506 00:22:38,500 --> 00:22:39,900 Qual foi o ponto de todo este? 507 00:22:39,900 --> 00:22:41,400 Só para ficar claro. 508 00:22:41,400 --> 00:22:44,940 Tipo, a gente já sabe, até mesmo de Pset7 e até mesmo de palestra da semana passada 509 00:22:44,940 --> 00:22:51,120 exemplos, que podemos, obviamente, verificar $ _GET $ _POST Ver se o usuário dá-nos 510 00:22:51,120 --> 00:22:52,200 um valor vazio. 511 00:22:52,200 --> 00:22:54,400 Lembre-se da função vazia em PHP. 512 00:22:54,400 --> 00:22:58,040 >> Então, só para ficar claro, o que é um dos motivos que também pode 513 00:22:58,040 --> 00:23:00,535 quero fazer isso a verificação de erros dentro do navegador? 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 Qual é a motivação aqui? 516 00:23:06,080 --> 00:23:06,580 Sim. 517 00:23:06,580 --> 00:23:09,735 >> AUDIÊNCIA: Mais rápido, e você não faz enviar dados inúteis 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 É mais rápido. 520 00:23:11,170 --> 00:23:12,920 Você não manda inútil os dados para o servidor. 521 00:23:12,920 --> 00:23:14,670 >> Então você voltar a mais resposta imediata. 522 00:23:14,670 --> 00:23:16,560 E, no geral, o usuário experiência é melhor. 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 há muitos anos. 525 00:23:21,160 --> 00:23:24,160 Suponha que você tem um novo e-mail o seu Gmail conta, mas a única forma através da 526 00:23:24,160 --> 00:23:26,510 para ver que é, como, recarregar a página inteira. 527 00:23:26,510 --> 00:23:29,030 Ou suponha que você clique em um link para ler um e-mail. 528 00:23:29,030 --> 00:23:31,600 >> Tudo tem que recarregar assim que você pode ver o e-mail. 529 00:23:31,600 --> 00:23:33,380 Ou Facebook-- você receber uma mensagem de bate-papo. 530 00:23:33,380 --> 00:23:36,000 Você não vê-lo até que você recarregar a página ou clique em algum link. 531 00:23:36,000 --> 00:23:38,380 >> Como, isso seria uma terrivelmente experiência do usuário irritante. 532 00:23:38,380 --> 00:23:41,300 E isso é o que era, claramente, de volta quando eu corri para UC 533 00:23:41,300 --> 00:23:44,760 e da web foi muito menos dinâmico e JavaScript não foi tão popularizado 534 00:23:44,760 --> 00:23:45,601 como é agora. 535 00:23:45,601 --> 00:23:47,850 E as coisas estão ficando muito mais dinâmico e muito mais 536 00:23:47,850 --> 00:23:49,900 lado do cliente nesse sentido. 537 00:23:49,900 --> 00:23:54,370 >> Mas há um problema aqui, e esta é uma espécie de pegadinha irritante. 538 00:23:54,370 --> 00:23:58,720 Só porque você adicione lado do cliente detecção como isto não significa 539 00:23:58,720 --> 00:24:01,430 você pode ou deve abandonar detecção do lado do servidor. 540 00:24:01,430 --> 00:24:04,080 Você essencialmente quer colocar o seu verificação de erros em ambos os lugares. 541 00:24:04,080 --> 00:24:05,830 Porque o que foi um da lição aprendida 542 00:24:05,830 --> 00:24:10,270 do artigo que li alguns trechos com deste system-- CMS estúpido 543 00:24:10,270 --> 00:24:14,410 Content Management System-- que era implementação do seu sistema de autenticação, 544 00:24:14,410 --> 00:24:16,790 seu login a partir de qual 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 >> AUDIÊNCIA: JavaScript. 548 00:24:21,499 --> 00:24:23,290 DAVID J. MALAN: JavaScript, exatamente, certo? 549 00:24:23,290 --> 00:24:24,610 Ele estava usando JavaScript. 550 00:24:24,610 --> 00:24:27,120 E literalmente, vocês têm desempenhado um pouco provavelmente 551 00:24:27,120 --> 00:24:28,700 com o inspetor do Chrome. 552 00:24:28,700 --> 00:24:30,890 E se eu puder encontrá-lo, inspecionar elemento. 553 00:24:30,890 --> 00:24:33,670 >> Deixai-me passar a fazer todas as opções do Chrome. 554 00:24:33,670 --> 00:24:37,080 E é assim que é fácil desativar o JavaScript em um navegador. 555 00:24:37,080 --> 00:24:38,950 Confira, não mais JavaScript. 556 00:24:38,950 --> 00:24:41,070 >> Então, para ser justo, muito da web nos dias de hoje 557 00:24:41,070 --> 00:24:43,430 só vai quebrar porque Gmail e outros sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook-- assumir que JavaScript está ativado. 559 00:24:46,140 --> 00:24:50,180 Mas se você está fazendo algo estúpido como apenas validar a entrada usuários 560 00:24:50,180 --> 00:24:52,520 e verifica se existem erros no lado do cliente, 561 00:24:52,520 --> 00:24:54,940 um adversário poderia fazer isso facilmente. 562 00:24:54,940 --> 00:24:57,180 E depois ainda mais inteligente adversário como vocês 563 00:24:57,180 --> 00:25:01,120 agora pode usar o Telnet ou onda ou comandos de linha de comando apenas 564 00:25:01,120 --> 00:25:05,300 e realmente enviar mensagens ao servidor que também não são erro verificado. 565 00:25:05,300 --> 00:25:08,380 >> Portanto, este é mais um decisão interface de usuário 566 00:25:08,380 --> 00:25:13,060 que é uma técnica efectiva improvement-- implementação 567 00:25:13,060 --> 00:25:14,410 lado cliente algo assim. 568 00:25:14,410 --> 00:25:16,800 Então agora um rápido olhar, mas depois Vou adiar para a caminhada em linha 569 00:25:16,800 --> 00:25:17,674 através de um presente. 570 00:25:17,674 --> 00:25:21,480 Em forma de dois, que realmente passou por e limparam o código um pouco. 571 00:25:21,480 --> 00:25:23,650 Mas deixe-me adiar para uma dos vídeos que provavelmente vai 572 00:25:23,650 --> 00:25:27,970 incorporar em Pset8 que apenas mostra uma sintaxe semelhante usando uma biblioteca chamada 573 00:25:27,970 --> 00:25:32,320 jQuery, que é um super, super biblioteca popular em JavaScript 574 00:25:32,320 --> 00:25:34,510 que, francamente, a maioria das pessoas é só usar esses dias 575 00:25:34,510 --> 00:25:37,070 e até mesmo confundir como próprio ser JavaScript. 576 00:25:37,070 --> 00:25:38,950 >> E isso tende a envolver alguns cifrões 577 00:25:38,950 --> 00:25:41,350 e palavras-chave como documento em parênteses aqui. 578 00:25:41,350 --> 00:25:44,480 Mas, novamente, deixe-me adiar para alguns tutoriais mais lentos em linha 579 00:25:44,480 --> 00:25:46,750 em vez de ficar amarrado em apenas sintaxe. 580 00:25:46,750 --> 00:25:48,630 Vamos seguir em frente para algo um pouco mais frio 581 00:25:48,630 --> 00:25:50,520 em termos das aplicações deste. 582 00:25:50,520 --> 00:25:57,730 >> Assim, em particular, deixe-me ir em frente e abrir este aqui. 583 00:25:57,730 --> 00:25:58,340 Venha. 584 00:25:58,340 --> 00:25:59,380 Lá vamos nós. 585 00:25:59,380 --> 00:26:01,500 >> Deixe-me abrir esta foto aqui. 586 00:26:01,500 --> 00:26:03,450 Desnecessariamente complicado olhando, mas 587 00:26:03,450 --> 00:26:07,880 descreve uma 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 Ele tende a usar algo outro chamado JSON. 590 00:26:13,430 --> 00:26:16,560 >> Mas aqui é como algo como Google Maps ou Google Earth funciona. 591 00:26:16,560 --> 00:26:18,060 Vamos tentar isso em tempo real, na verdade. 592 00:26:18,060 --> 00:26:21,590 Deixe-me ir em frente e abrir até Chrome em meu navegador. 593 00:26:21,590 --> 00:26:26,236 >> E deixe-me entrar, dizer, maps.google.com. 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 E, na verdade, se você é velho o suficiente para lembrar que, 596 00:26:31,930 --> 00:26:35,600 como, MapQuest era como voltar no mesmo dia, e talvez eles ainda funcionam assim. 597 00:26:35,600 --> 00:26:38,870 Quando usado para procurar something-- 33 Oxford Street, Cambridge, Mass, 598 00:26:38,870 --> 00:26:40,650 vamos fazer isso- você seria, na verdade, se você 599 00:26:40,650 --> 00:26:43,000 queria para deslocar para cima e para baixo, esquerda e direita, 600 00:26:43,000 --> 00:26:44,920 você olharia como um grande seta no topo, e 601 00:26:44,920 --> 00:26:46,921 iria mostrar-lhe outro moldura do mapa aqui. 602 00:26:46,921 --> 00:26:49,753 Ou você deverá clicar à esquerda e você iria mais aqui, ou outro clique 603 00:26:49,753 --> 00:26:51,000 e você iria por aqui. 604 00:26:51,000 --> 00:26:53,000 Mas, em vez destes dias, nós, claro, apenas 605 00:26:53,000 --> 00:26:55,970 tomar por certo que podemos ir em torno de Cambridge muito rapidamente 606 00:26:55,970 --> 00:26:57,550 apenas clicando e arrastando. 607 00:26:57,550 --> 00:26:59,130 Mas note que há algumas falhas. 608 00:26:59,130 --> 00:27:02,160 >> Se eu fizer isso rápido o suficiente, o que parece estar acontecendo 609 00:27:02,160 --> 00:27:05,960 como eu arrastar um pouco rápido demais para o computador para manter-se? 610 00:27:05,960 --> 00:27:07,160 O que você vê? 611 00:27:07,160 --> 00:27:07,660 Sim. 612 00:27:07,660 --> 00:27:09,232 >> AUDIÊNCIA: Os pixels não atualizar. 613 00:27:09,232 --> 00:27:10,940 DAVID J. MALAN: O pixels não atualizar. 614 00:27:10,940 --> 00:27:12,870 Há actually-- e você podia ver isso, na verdade, 615 00:27:12,870 --> 00:27:15,360 se você estiver assistindo on-line e pausa este ou realmente atrasa as coisas 616 00:27:15,360 --> 00:27:18,600 para once-- você vai ver que existem telhas, quadrados, ou retângulos que 617 00:27:18,600 --> 00:27:22,040 estão ausentes do mapa até uma fração de segundo depois, mais dados, 618 00:27:22,040 --> 00:27:24,390 mais imagens realmente aparecem na tela. 619 00:27:24,390 --> 00:27:29,810 E, de fato, se fizermos isso olhando até Chrome's-- digamos, Chrome-- 620 00:27:29,810 --> 00:27:30,310 vamos ver. 621 00:27:30,310 --> 00:27:31,090 Nós não podemos fazer isso. 622 00:27:31,090 --> 00:27:31,860 >> Oh, gritos. 623 00:27:31,860 --> 00:27:34,761 Vamos abrir maps.google.com. 624 00:27:34,761 --> 00:27:36,660 Deixe-me fazer a janela maior novamente. 625 00:27:36,660 --> 00:27:38,836 >> Volte para 33 Oxford Street. 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 Qual foi o site que eu estava recentemente? 628 00:27:43,760 --> 00:27:46,440 Eu tive isso, como, divertido privada para a mim mesmo que eu tinha então mensagem instantânea 629 00:27:46,440 --> 00:27:48,470 qualquer amigo que estava on-line que queriam ouvi-lo. 630 00:27:48,470 --> 00:27:49,345 Há algum site. 631 00:27:49,345 --> 00:27:52,680 Eu acho que é por isso Comcast-- um grande ISP americano. 632 00:27:52,680 --> 00:27:56,355 Você pode, quando se inscrever para novo cabo serviço de modem ou serviço de TV a cabo, 633 00:27:56,355 --> 00:27:59,230 eles têm uma forma muito razoavelmente onde eles pedir-lhe para o seu endereço. 634 00:27:59,230 --> 00:28:01,450 E tem essa incrível recurso chamado auto completa, 635 00:28:01,450 --> 00:28:04,600 como o Google, que começa a encher na resposta à sua pergunta. 636 00:28:04,600 --> 00:28:08,090 >> O problema é que eles fazem auto completa sobre as primeiras coisas que você digita. 637 00:28:08,090 --> 00:28:12,890 Então, se você começar a digitar em 33, ele irá mostrar-lhe literalmente toda casa 638 00:28:12,890 --> 00:28:15,790 na América, que começa com o número 33 639 00:28:15,790 --> 00:28:17,920 antes de continuar a espero que você escreva mais. 640 00:28:17,920 --> 00:28:20,660 Então, se você digitar 33 Oxford, em seguida, ele mostra todas as ruas 641 00:28:20,660 --> 00:28:24,726 na América, que tem 33 Oxford em o seu nome, independentemente da cidade 642 00:28:24,726 --> 00:28:25,350 que você está em. 643 00:28:25,350 --> 00:28:26,320 >> E então você continuar a escrever. 644 00:28:26,320 --> 00:28:28,930 E, finalmente, ele percebe que não fazer oferta de serviços para a sua casa em Cambridge 645 00:28:28,930 --> 00:28:29,920 ou algo parecido. 646 00:28:29,920 --> 00:28:33,410 Mas o ponto é, este é o mais implementação 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 tangente novamente. 649 00:28:36,400 --> 00:28:39,040 Mas há boas maneiras de usar JavaScript e maus caminhos. 650 00:28:39,040 --> 00:28:40,750 E isso não é necessariamente o melhor. 651 00:28:40,750 --> 00:28:46,360 >> Mas o ponto aqui, antes que esta discurso, era a abertura de ferramentas aqui 652 00:28:46,360 --> 00:28:49,480 e abrir as ferramentas de desenvolvimento, como temos incentivado antes, 653 00:28:49,480 --> 00:28:52,840 e para assistir a Rede guia como eu clicar muito rápido. 654 00:28:52,840 --> 00:28:55,400 E observe um grupo inteiro de obter pedidos aconteceu. 655 00:28:55,400 --> 00:28:57,310 Tudo isso aconteceu desde que eu arrastado. 656 00:28:57,310 --> 00:29:00,170 >> E o mais provável, de fato muitas dessas linhas 657 00:29:00,170 --> 00:29:04,060 agora são imagem JPEG barra Tipos MIME ou tipos de conteúdo. 658 00:29:04,060 --> 00:29:07,750 Isso porque o cromo está fazendo cada vez que eu clique e arraste, clique 659 00:29:07,750 --> 00:29:11,650 e arrastar, é que é perceber, oh, I precisa ir pedir ao Google para a telha 660 00:29:11,650 --> 00:29:15,080 no mapa que está aqui, rapidamente o download via HTTP, 661 00:29:15,080 --> 00:29:19,550 e, em seguida, adicioná-lo para o chamado DOM para os navegadores da web em árvore memória 662 00:29:19,550 --> 00:29:24,430 representação de modo a que o utilizador, mim, vê que a telha atualizado. 663 00:29:24,430 --> 00:29:26,795 E isso é por causa de uma técnica chamada AJAX. 664 00:29:26,795 --> 00:29:28,920 Voltar no dia, ele realmente foi o caso que se 665 00:29:28,920 --> 00:29:33,050 queria mudar o que está na tela, você teria que clicar em cima, para baixo, para a esquerda, 666 00:29:33,050 --> 00:29:33,550 direita. 667 00:29:33,550 --> 00:29:34,740 E, em seguida, uma nova página se abrirá. 668 00:29:34,740 --> 00:29:36,531 Mas estes dias, tudo é mais dinâmico. 669 00:29:36,531 --> 00:29:40,490 Acontece na maneira que nós seres humanos faria espero que ele realmente faria de forma interativa. 670 00:29:40,490 --> 00:29:43,210 E ele consegue isso forma de uma técnica chamada 671 00:29:43,210 --> 00:29:46,170 AJAX, que é talvez o melhor explicada por um exemplo. 672 00:29:46,170 --> 00:29:49,730 Primeiro, deixe-me ir em frente e abrir um arquivo 673 00:29:49,730 --> 00:29:53,540 chamado quote.php em código de distribuição de hoje. 674 00:29:53,540 --> 00:29:56,200 >> E, em seguida, deixe-me fazer gritos symbol--. 675 00:29:56,200 --> 00:30:02,399 Deixe-me fazer símbolo = GOOG por apenas algumas ações. 676 00:30:02,399 --> 00:30:04,440 Ou, na verdade, vamos fazer o um do Pset GRÁTIS. 677 00:30:04,440 --> 00:30:05,270 Enter. 678 00:30:05,270 --> 00:30:06,580 >> E agora o que eu voltar. 679 00:30:06,580 --> 00:30:09,210 Portanto, este é realmente um arquivo PHP que eu curto 680 00:30:09,210 --> 00:30:13,210 escreveu que simplesmente pede código da função de pesquisa de Pset7 681 00:30:13,210 --> 00:30:17,830 e cospe usando este chaveta e citações e notação de dois pontos, aparentemente, 682 00:30:17,830 --> 00:30:22,747 preço da ação atual para o empresa que você passa na via get. 683 00:30:22,747 --> 00:30:24,580 Portanto, esta é diferente de mais do que temos 684 00:30:24,580 --> 00:30:26,496 feito em 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 >> Na verdade, este é um objeto JavaScript. 687 00:30:30,020 --> 00:30:34,130 Na verdade, apenas para ser mais claro, JavaScript Object Notation-- JSON-- 688 00:30:34,130 --> 00:30:38,330 é apenas uma maneira elegante de dizer que você pode representar dados em JavaScript muito 689 00:30:38,330 --> 00:30:41,660 como você pode em PHP usando pares de valores-chave. 690 00:30:41,660 --> 00:30:44,270 Então, se eu queria declarar uma variável em JavaScript 691 00:30:44,270 --> 00:30:47,872 a representa Zamyla, para instance-- um struct para Zamyla-- 692 00:30:47,872 --> 00:30:49,580 e vamos chamá-lo estudante, esta variável. 693 00:30:49,580 --> 00:30:53,060 Seu ID é um, casa é Winthrop, eo nome é Zamyla. 694 00:30:53,060 --> 00:30:55,490 >> Mas também pode ter uma matriz de objetos. 695 00:30:55,490 --> 00:30:58,710 Então, se eu realmente queria ter uma matriz em JavaScript que contém 696 00:30:58,710 --> 00:31:01,740 vários desses objetos, este tempo que representa o pessoal, 697 00:31:01,740 --> 00:31:04,910 Eu poderia ter estes três pedaços de código de volta 698 00:31:04,910 --> 00:31:08,560 a volta para trás para estes três ex-membros da equipe. 699 00:31:08,560 --> 00:31:12,201 Assim, a sintaxe, bastante semelhante ao ambos-- para PHP. 700 00:31:12,201 --> 00:31:13,700 Mas isso é particularmente JavaScript. 701 00:31:13,700 --> 00:31:15,940 É notação objeto. 702 00:31:15,940 --> 00:31:17,240 Então, o que é útil para este? 703 00:31:17,240 --> 00:31:21,580 >> Se eu escrever um código que cospe JSON-- JavaScript Object Notation-- coisas que 704 00:31:21,580 --> 00:31:24,670 se parece com isso ou coisas que Parece que a estrutura da Zamyla, 705 00:31:24,670 --> 00:31:27,730 Eu posso realmente usar este em programas que eu escrevo. 706 00:31:27,730 --> 00:31:30,660 Deixe-me ir para ajax0.html. 707 00:31:30,660 --> 00:31:33,310 E este não muito demasiado-- atenção dada à estética. 708 00:31:33,310 --> 00:31:34,660 Mas veja o que acontece. 709 00:31:34,660 --> 00:31:37,050 >> Deixe-me ir em frente e digite gratuitamente aqui. 710 00:31:37,050 --> 00:31:38,490 Clique obter citação. 711 00:31:38,490 --> 00:31:41,060 E observe o URL não mudou. 712 00:31:41,060 --> 00:31:47,250 Mas eu consegui um pop up com aparentemente preço das ações centavo de hoje de US $ 0,15. 713 00:31:47,250 --> 00:31:49,062 Então, não tão ruim assim. 714 00:31:49,062 --> 00:31:52,020 Mas a diferença é que de alguma forma, Estes dados vieram de volta para mim diretamente. 715 00:31:52,020 --> 00:31:54,250 Mas vamos dar um passo na direção algo mais familiar. 716 00:31:54,250 --> 00:31:58,900 Na versão um deste, deixe-me digite livre novamente, clique em Get citação, 717 00:31:58,900 --> 00:32:01,146 e agora- oh, esta foi na verdade, a versão jQuery. 718 00:32:01,146 --> 00:32:03,270 Então vamos me-- eu não fiz avançar muito longe o suficiente. 719 00:32:03,270 --> 00:32:05,830 Deixe-me ir para a versão dois, que é onde eu queria. 720 00:32:05,830 --> 00:32:07,260 Observe o que eu fiz aqui. 721 00:32:07,260 --> 00:32:10,370 Eu tenho uma web página-- um super versão simples de qualquer página web 722 00:32:10,370 --> 00:32:14,260 você pode usar hoje, com um campo de texto aqui por livre e então, aparentemente, apenas 723 00:32:14,260 --> 00:32:14,880 texto. 724 00:32:14,880 --> 00:32:16,860 >> Esta não é uma forma aqui, aparentemente. 725 00:32:16,860 --> 00:32:19,360 Mas se eu clicar em obter citação, observe minha página web 726 00:32:19,360 --> 00:32:22,760 está prestes a mudar, como se eu só tenho uma nova mensagem instantânea 727 00:32:22,760 --> 00:32:25,360 ou como se eu apenas mudou o mapa e necessário para obter mais dados 728 00:32:25,360 --> 00:32:29,220 adicionados dinamicamente para a página web sem a URL mudança eo usuário 729 00:32:29,220 --> 00:32:30,980 experiência ficar interrompido. 730 00:32:30,980 --> 00:32:35,750 Na verdade, eu ainda estou no exatamente o mesmo ajax2.html Place--. 731 00:32:35,750 --> 00:32:39,080 >> Então, vamos olhar apenas para este exemplo e ver como isso está acontecendo. 732 00:32:39,080 --> 00:32:42,490 Deixe-me entrar em ajax2.html. 733 00:32:42,490 --> 00:32:44,770 E observe a forma pela primeira vez. 734 00:32:44,770 --> 00:32:47,092 >> Aqui em baixo, eu estou voltando off auto completa. 735 00:32:47,092 --> 00:32:48,800 Às vezes fica irritante se o navegador 736 00:32:48,800 --> 00:32:50,508 está tentando mostrar-lhe toda a sua história. 737 00:32:50,508 --> 00:32:53,450 Assim, você pode fazê-lo em HTML apenas dizendo auto completar off. 738 00:32:53,450 --> 00:32:57,290 >> Tenho dado este texto um campo symbol-- sim, uma identificação de símbolo. 739 00:32:57,290 --> 00:32:58,977 E agora, esta é uma característica interessante. 740 00:32:58,977 --> 00:33:01,310 Nós não falamos sobre extensão, mas você pode pensar sobre isso 741 00:33:01,310 --> 00:33:03,177 como uma marca de parágrafo ou div tag. 742 00:33:03,177 --> 00:33:05,010 É o que se chama de in-line elemento, que 743 00:33:05,010 --> 00:33:07,415 significa que você não vai conseguir um parágrafo quebrar acima e abaixo dele. 744 00:33:07,415 --> 00:33:11,530 Ele só vai ficar em linha sem atingindo o equivalente a entrar. 745 00:33:11,530 --> 00:33:17,980 Então, eu tenho dado este pedaço de HTML a ser determinado um identificador único 746 00:33:17,980 --> 00:33:20,130 que eu arbitrariamente chamado preço. 747 00:33:20,130 --> 00:33:21,560 E eu tenho um botão Enviar. 748 00:33:21,560 --> 00:33:25,420 >> Porque agora até aqui- e este é realmente super incrível código quão pouco 749 00:33:25,420 --> 00:33:27,660 você pode escrever para fazer relativamente puro coisas- 750 00:33:27,660 --> 00:33:31,800 perceber o que eu tenho feito até aqui, se eu rolar para cima para a cabeça desta página. 751 00:33:31,800 --> 00:33:34,970 Eu já incluído pela primeira vez em minha cabeça uma tag script 752 00:33:34,970 --> 00:33:37,410 que, na verdade, faz referência a uma JavaScript arquivo em outro lugar. 753 00:33:37,410 --> 00:33:39,702 Esta é a partir da organização que escreve jQuery, 754 00:33:39,702 --> 00:33:42,660 e isso é apenas dar-lhe o mais recente versão de sua biblioteca jQuery. 755 00:33:42,660 --> 00:33:46,305 >> Então, isso é como afiada incluir em C ou exigir em PHP. 756 00:33:46,305 --> 00:33:48,900 Você usa a tag script com um atributo de origem. 757 00:33:48,900 --> 00:33:52,030 Mas agora o meu próprio código é vai ser bom aqui. 758 00:33:52,030 --> 00:33:54,170 >> Repare que eu tenho uma função chamada Quotes. 759 00:33:54,170 --> 00:33:56,180 E parece um pouco enigmática, à primeira vista. 760 00:33:56,180 --> 00:33:57,305 Mas vamos brincar com este apart. 761 00:33:57,305 --> 00:33:59,090 Dê-me uma variável chamada URL. 762 00:33:59,090 --> 00:34:01,390 Atribuir-se literalmente esta cadeia. 763 00:34:01,390 --> 00:34:04,530 Assim, aspas simples, aspas duplas em JavaScript só me dá uma corda. 764 00:34:04,530 --> 00:34:06,900 O que faz o mais fazer? 765 00:34:06,900 --> 00:34:08,199 Concatenação. 766 00:34:08,199 --> 00:34:12,610 >> Portanto, este agora é a sintaxe jQuery que demora um pouco para se acostumar. 767 00:34:12,610 --> 00:34:18,310 Mas isso significa apenas ir buscar-me o DOM nó cujo identificador exclusivo é símbolo. 768 00:34:18,310 --> 00:34:21,929 A hashtag não significa símbolo identificador único. 769 00:34:21,929 --> 00:34:24,929 >> O sinal de dólar no parênteses significa apenas, enrole esta 770 00:34:24,929 --> 00:34:28,510 jQuery em uma espécie de segredo molho de modo você tem uma funcionalidade adicional. 771 00:34:28,510 --> 00:34:31,880 E, em seguida, é aparentemente .val uma função, ou como se diz agora, 772 00:34:31,880 --> 00:34:35,219 um método dentro deste nó que apenas lhe dá o valor. 773 00:34:35,219 --> 00:34:38,896 Assim, em breve, feio e confuso como isso parece, à primeira vista, 774 00:34:38,896 --> 00:34:42,020 isto significa apenas ficar com o usuário digitou em, colocá-lo no final da string 775 00:34:42,020 --> 00:34:42,880 concatenando-lo. 776 00:34:42,880 --> 00:34:43,739 Isso é tudo. 777 00:34:43,739 --> 00:34:46,070 >> Então, agora, três últimas linhas. 778 00:34:46,070 --> 00:34:48,690 Você pode apertar um monte de funcionalidade de três linhas. 779 00:34:48,690 --> 00:34:52,199 Este sinal de dólar, como um de lado, é apenas um apelido 780 00:34:52,199 --> 00:34:55,800 para uma variável global especial chamado literalmente jQuery. 781 00:34:55,800 --> 00:34:57,060 >> Sinal de dólar apenas parece legal. 782 00:34:57,060 --> 00:35:00,080 Assim, a comunidade jQuery apenas uma espécie de o usou como seu símbolo especial. 783 00:35:00,080 --> 00:35:02,470 Isso não quer dizer que isso significa em PHP. 784 00:35:02,470 --> 00:35:06,356 Em JavaScript, sinal de dólar é apenas como uma letra do alfabeto 785 00:35:06,356 --> 00:35:07,480 ou um número de variáveis. 786 00:35:07,480 --> 00:35:09,000 >> Você pode apenas tê-lo como o nome. 787 00:35:09,000 --> 00:35:09,770 Apenas parece legal. 788 00:35:09,770 --> 00:35:11,890 Assim, a comunidade adotou como um apelido 789 00:35:11,890 --> 00:35:13,390 para a sua própria biblioteca chamada jQuery. 790 00:35:13,390 --> 00:35:15,060 >> E é super popular. 791 00:35:15,060 --> 00:35:17,620 Portanto, obter JSON é exatamente isso. 792 00:35:17,620 --> 00:35:19,920 É uma função que o pessoal do jQuery escreveu 793 00:35:19,920 --> 00:35:23,340 que recebe JSON a partir de um server-- JavaScript Object Notation. 794 00:35:23,340 --> 00:35:25,680 Pelo que URL é que vai para obter essa informação? 795 00:35:25,680 --> 00:35:27,790 Aparentemente, a partir deste URL aqui. 796 00:35:27,790 --> 00:35:31,180 >> E o que deve fazer como o navegador Assim que ele recebe de volta essa resposta? 797 00:35:31,180 --> 00:35:36,500 E essa é a magia do AJAX, por assim speak-- Asynchronous JavaScript em XML. 798 00:35:36,500 --> 00:35:41,320 É difícil ver com tal exemplo simples como tivemos aqui. 799 00:35:41,320 --> 00:35:44,730 >> Mas este era assíncrona em a sensação de que meu código quando 800 00:35:44,730 --> 00:35:48,530 executado enviou uma mensagem para o servidor para ir buscar-me um pouco JSON. 801 00:35:48,530 --> 00:35:51,340 E isso aconteceu super rápido que eu tenho uma resposta. 802 00:35:51,340 --> 00:35:55,130 Mas o que é interessante é que esta linha de código não pendurar meu computador. 803 00:35:55,130 --> 00:35:56,550 >> Eu não vi um ícone de spinning. 804 00:35:56,550 --> 00:35:59,200 Eu não perdi a capacidade de mover o mouse. 805 00:35:59,200 --> 00:36:01,340 Meu navegador era realmente perfeitamente bem. 806 00:36:01,340 --> 00:36:06,290 >> Devido a maneira como JavaScript manipula o resposta do servidor é como se segue. 807 00:36:06,290 --> 00:36:09,740 Você registrar o que você chamaria uma função de retorno, que 808 00:36:09,740 --> 00:36:12,830 Significa apenas que, hey, JavaScript. 809 00:36:12,830 --> 00:36:16,100 Assim que o servidor responde com JSON, 810 00:36:16,100 --> 00:36:18,750 ligue para essa função anônima. 811 00:36:18,750 --> 00:36:23,910 >> E por favor, passou para esta função qualquer que seja a seqüência de servidor cuspir 812 00:36:23,910 --> 00:36:26,080 como um argumento chamado de dados. 813 00:36:26,080 --> 00:36:28,360 Portanto, em outras, palavras, se Estou montando dinamicamente 814 00:36:28,360 --> 00:36:33,370 quote.php um URL que passa neste símbolo como LIVRE ou GOOG ou outros enfeites, 815 00:36:33,370 --> 00:36:36,830 Eu estou dizendo, em seguida, JavaScript ir buscar esse URL. 816 00:36:36,830 --> 00:36:39,080 Lembre-se que o navegador vai retornar algo 817 00:36:39,080 --> 00:36:42,680 que parece que viu earlier-- isso. 818 00:36:42,680 --> 00:36:45,940 >> E o que o segundo argumento aqui para obter JSON está dizendo 819 00:36:45,940 --> 00:36:48,450 é chamar esta função quando o servidor recebe de volta 820 00:36:48,450 --> 00:36:52,440 se é 10 milissegundos a partir de agora ou 10 segundos a partir de agora. 821 00:36:52,440 --> 00:36:55,840 E assim que você faz, adicione o preço para a página. 822 00:36:55,840 --> 00:36:58,030 Esta sintaxe aqui apenas Significa ir buscar o nó 823 00:36:58,030 --> 00:37:01,940 da árvore cujo único identificador é preço-- esse período vimos anteriormente. 824 00:37:01,940 --> 00:37:04,320 >> Este método chamado HTML apenas diz, vai substituir 825 00:37:04,320 --> 00:37:08,770 o código HTML que está lá com data.price. 826 00:37:08,770 --> 00:37:10,200 O que há de data.price? 827 00:37:10,200 --> 00:37:12,850 Bem, o navegador, lembre-se, mostrou-me esta voltando. 828 00:37:12,850 --> 00:37:14,540 Portanto, este é um dado. 829 00:37:14,540 --> 00:37:18,100 >> E por isso é um pouco enigmática para ver as vírgulas aqui. 830 00:37:18,100 --> 00:37:19,350 Mas, na verdade, deixe-me fazer isso. 831 00:37:19,350 --> 00:37:22,890 Deixe-me apenas colar este muito rápido em gedit 832 00:37:22,890 --> 00:37:27,240 e mostrar-lhe como mostramos Estrutura de Zamyla anteriormente. 833 00:37:27,240 --> 00:37:31,610 >> O que o servidor está enviando de volta é um pequeno objeto que se parece com isso. 834 00:37:31,610 --> 00:37:37,140 E assim é data.price apenas me dando 0,1515. 835 00:37:37,140 --> 00:37:39,310 Então, um monte de movimento peças aqui tudo de uma vez. 836 00:37:39,310 --> 00:37:41,860 >> Mas as principais lições é que temos essa capacidade 837 00:37:41,860 --> 00:37:44,600 para fazer HTTP adicional solicitações usando JavaScript 838 00:37:44,600 --> 00:37:46,090 sem ter que recarregar a página. 839 00:37:46,090 --> 00:37:49,580 E então nós podemos realmente alterar a página web em tempo real. 840 00:37:49,580 --> 00:37:51,850 E verifica-se que JavaScript e outras linguagens 841 00:37:51,850 --> 00:37:54,510 pode ser usado não só agora de mutação páginas da web, 842 00:37:54,510 --> 00:37:57,960 mas para realmente escrever software em um computador real, 843 00:37:57,960 --> 00:38:00,240 não apenas confinada ao Chrome ou similares. 844 00:38:00,240 --> 00:38:03,530 >> Na verdade, se-- Colton, que você gostaria de se juntar a nós para trás até aqui 845 00:38:03,530 --> 00:38:06,100 com o seu código de laboratório, e Chang também? 846 00:38:06,100 --> 00:38:09,140 Vamos em frente, depois de ter falado funções anônimas e retornos 847 00:38:09,140 --> 00:38:13,090 e realmente tentar a sorte aqui com uma demonstração ao vivo com sangramento 848 00:38:13,090 --> 00:38:16,480 tecnologia de ponta, uma das estes dispositivos Elite movimento. 849 00:38:16,480 --> 00:38:18,940 Agora, este dispositivo, recall, é um dispositivo USB pouco 850 00:38:18,940 --> 00:38:25,620 bem isso-- que é beautiful-- que se conecta às portas USB. 851 00:38:25,620 --> 00:38:29,120 >> E então ele oferece entrada sob a forma de gestos humanos 852 00:38:29,120 --> 00:38:32,560 usando detecção por raios infravermelhos, essencialmente, os movimentos de seu braço. 853 00:38:32,560 --> 00:38:35,150 Assim, enquanto que Maria tentou antes era muscular, 854 00:38:35,150 --> 00:38:39,000 realmente sentindo o que está mudando seu braço, este é o infravermelho baseado. 855 00:38:39,000 --> 00:38:44,390 Por isso, está à procura de movimentos dentro o tipo de esfera de um pé ou assim 856 00:38:44,390 --> 00:38:46,190 do dispositivo em si. 857 00:38:46,190 --> 00:38:48,950 >> Então por que não posso ter uma facada neste primeiro? 858 00:38:48,950 --> 00:38:53,100 E vamos em frente e jogar você em cima da sobrecarga aqui. 859 00:38:53,100 --> 00:38:56,250 Então, vamos colocar o laptop de Colton aqui. 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 você gostaria de me fazer primeiro? 862 00:39:00,160 --> 00:39:02,409 >> Colton: Vá em frente e apenas colocar suas mãos sobre esse cara 863 00:39:02,409 --> 00:39:04,430 e você vai ver alguns 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 Isso tudo está acontecendo em tempo real. 866 00:39:11,110 --> 00:39:11,889 Está bem. 867 00:39:11,889 --> 00:39:12,680 Tudo bem, e sim. 868 00:39:12,680 --> 00:39:14,119 Tão bom. 869 00:39:14,119 --> 00:39:15,410 Tudo bem, o que mais podemos fazer? 870 00:39:15,410 --> 00:39:17,900 >> Colton: Vá para a próxima tela e ver. 871 00:39:17,900 --> 00:39:19,136 >> DAVID J. MALAN: Tudo bem. 872 00:39:19,136 --> 00:39:21,780 >> Colton: Um jogo divertido onde você começa a fazer robôs. 873 00:39:21,780 --> 00:39:24,738 >> DAVID J. MALAN: Tudo bem, então isso é mãos falsos me mostrando o que fazer. 874 00:39:24,738 --> 00:39:27,920 Colton: Sim ir muito à frente e pegar um dos blocos 875 00:39:27,920 --> 00:39:30,637 e colocá-lo em cima de que o corpo do robô. 876 00:39:30,637 --> 00:39:32,137 DAVID J. MALAN: Oh, lá está a minha mão. 877 00:39:32,137 --> 00:39:34,000 Oh. 878 00:39:34,000 --> 00:39:34,780 OK, adorável. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Espere um minuto, OK. 881 00:39:38,650 --> 00:39:41,320 Lá vamos nós. 882 00:39:41,320 --> 00:39:43,590 >> COLTON: Eu fiz uma no acidente. 883 00:39:43,590 --> 00:39:45,423 >> DAVID J. MALAN: OK, eu vou pegar esse 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 Quando estávamos a praticar esta última noite, você sabe o que isso transformou em? 887 00:39:51,550 --> 00:39:54,285 >> Assim. 888 00:39:54,285 --> 00:39:55,490 Está bem. 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: Tudo bem, e há um terceiro. 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 Tudo certo. 894 00:40:01,674 --> 00:40:03,215 Colton: E neste, você começa a-- 895 00:40:03,215 --> 00:40:04,923 DAVID J. MALAN: Oh, um deste bonito. 896 00:40:04,923 --> 00:40:06,650 Colton: --yeah, escolher distante desta 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 Não? 900 00:40:11,670 --> 00:40:14,515 Perdidas. 901 00:40:14,515 --> 00:40:15,570 >> Colton: Oh, lá vai. 902 00:40:15,570 --> 00:40:18,680 >> DAVID J. MALAN: Ah, Olhe para isso. 903 00:40:18,680 --> 00:40:19,830 Muito bom. 904 00:40:19,830 --> 00:40:22,470 Bem, por que não 'tomamos fora um voluntário aqui 905 00:40:22,470 --> 00:40:24,180 que gostaria de vir para cima. 906 00:40:24,180 --> 00:40:27,500 Como cerca de ali no verde, não é? 907 00:40:27,500 --> 00:40:30,540 >> Tudo bem, e vamos have-- em vez de fazer isso, alguns de vocês 908 00:40:30,540 --> 00:40:34,590 pode conhecer este jogo aqui- cortar a corda, talvez? 909 00:40:34,590 --> 00:40:35,100 Vamos ver. 910 00:40:35,100 --> 00:40:37,320 Temos os nossos óculos aqui? 911 00:40:37,320 --> 00:40:38,625 >> Está bem. 912 00:40:38,625 --> 00:40:39,270 Obrigado. 913 00:40:39,270 --> 00:40:39,380 Qual o seu nome? 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 Bom ver. 917 00:40:42,120 --> 00:40:45,600 Se você não se importa de colocar Google Glass mais de seus óculos. 918 00:40:45,600 --> 00:40:46,970 Este é Colton. 919 00:40:46,970 --> 00:40:47,650 >> Colton: Oi. 920 00:40:47,650 --> 00:40:48,140 Prazer em conhecê-lo. 921 00:40:48,140 --> 00:40:49,600 >> DAVID J. MALAN: OK, vamos lá ao redor. 922 00:40:49,600 --> 00:40:52,516 Tudo bem, então o que você está indo para fazer aqui, depois de ter jogado isso antes, 923 00:40:52,516 --> 00:40:55,650 é colocar a mão sobre o Leap Movimento aqui. 924 00:40:55,650 --> 00:40:57,210 E agora sua flecha deve se mover. 925 00:40:57,210 --> 00:40:57,710 Oh, não tinha. 926 00:40:57,710 --> 00:40:58,066 >> AUDIÊNCIA: Não. 927 00:40:58,066 --> 00:40:58,780 >> DAVID J. MALAN: Nós Não quero parar ainda. 928 00:40:58,780 --> 00:40:59,280 OK, espere. 929 00:40:59,280 --> 00:41:01,200 Por aqui. 930 00:41:01,200 --> 00:41:03,530 Então, observe como você realizar o seu dedo sobre algo, 931 00:41:03,530 --> 00:41:06,750 o rato começa a ir verde, que é como você clique. 932 00:41:06,750 --> 00:41:08,980 >> Então passe o mouse sobre Play. 933 00:41:08,980 --> 00:41:10,970 E apenas um dedo é muito bem. 934 00:41:10,970 --> 00:41:13,869 E agora clique na pequena cara verde do lado esquerdo. 935 00:41:13,869 --> 00:41:15,410 E agora segure até que ele enche verde. 936 00:41:15,410 --> 00:41:15,640 Boa. 937 00:41:15,640 --> 00:41:16,990 Agora, como, nível um em cima. 938 00:41:16,990 --> 00:41:20,190 >> AUDIÊNCIA: Sim, nós queremos nível um, aqui. 939 00:41:20,190 --> 00:41:21,660 >> DAVID J. MALAN: Good. 940 00:41:21,660 --> 00:41:25,500 OK, então tudo que você tem a fazer é cortar a corda. 941 00:41:25,500 --> 00:41:28,240 O cursor é o único branco lá em baixo. 942 00:41:28,240 --> 00:41:28,880 >> Muito bom. 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 Tudo bem, ele está prestes a ficar mais difícil. 945 00:41:32,790 --> 00:41:34,800 Então segure 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 >> AUDIÊNCIA: Oh merda. 950 00:41:40,966 --> 00:41:41,466 Está bem. 951 00:41:41,466 --> 00:41:42,466 Ela quer ir por esse caminho. 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 Objetivo secundário é fazer com que todas as estrelas. 955 00:41:50,700 --> 00:41:53,920 Tudo bem, em seguida. 956 00:41:53,920 --> 00:41:57,504 >> Vamos ver se você 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, vá lá. 960 00:42:06,840 --> 00:42:08,850 >> Claro. 961 00:42:08,850 --> 00:42:11,230 Oh, muito bom. 962 00:42:11,230 --> 00:42:11,930 Tudo certo. 963 00:42:11,930 --> 00:42:13,534 >> Então, por que não adiar aqui hoje? 964 00:42:13,534 --> 00:42:15,200 Deixe ninguém vir em cima que quer jogar. 965 00:42:15,200 --> 00:42:16,880 Agradecemos muito a Laura nosso voluntário. 966 00:42:16,880 --> 00:42:18,730 E vamos vê-lo na segunda-feira. 967 00:42:18,730 --> 00:42:21,190 >> AUDIÊNCIA: Você provavelmente vai querer isso de volta. 968 00:42:21,190 --> 00:42:23,640 >> COLUNA 2: Na próxima CS50-- 969 00:42:23,640 --> 00:42:35,222