DAVID J. MALAN: Tudo bem, de modo que este aqui é o braço Myo banda, um par de que tem para os projetos finais CS50. E isso foi uma demonstração em fila você se antecipadamente onde essencialmente este braço bastante apertado banda aqui ouve os seus movimentos musculares que são então mapeados em software para laptop de Colton aqui que teve iTunes e que música já na fila. Ao invés de me demoing isso, Colton esteve no laboratório claramente toda a semana recebendo uma demonstração pronto para um voluntário corajoso. Se alguém gostaria de vir em up-- viu sua mão primeiro. Vamos lá para cima. [00:01:09] Tudo certo. E qual é o seu nome? [00:01:13] AUDIÊNCIA: Uh, Maria. [00:01:14] DAVID J. MALAN: Maria, bom te ver. Venha até aqui. Deixe-me apresentar-lhe Colton. Colton, esta é Maria. [00:01:21] Colton: Olá, prazer em conhecê-lo. [00:01:23] DAVID J. MALAN: Todos bem, então o primeiro passo, estamos vai ter você colocar esta no seu antebraço de modo que é bastante tight-se perto de seu cotovelo. E enquanto isso, vamos ter colocar na nossa Vidro Google e vamos misturar as tecnologias de hoje. [00:01:33] Colton: Primeiro nós vamos ter que ligar esta nas coisas. [00:01:36] DAVID J. MALAN: OK. Na verdade, vamos colocar o seu braço como próximo a este cabo quanto possível para que possamos primeiro sincronizá-lo para cima. [00:01:41] Colton: Vamos fazer isso. [00:01:42] DAVID J. MALAN: E enquanto isso, por isso que todos possam ter um olhar mais atento, vamos atirar câmera de Andrew na tela lá. Portanto, temos um cabo USB que é ser conectado a braçadeira de Maria. E deixe-me atirar tela de Colton se o projetor próximo. [00:02:00] Então Colton está registrando o dispositivo agora como um Myo ligado a este cabo. E agora o que Maria de vai fazer momentaneamente é realmente andar por as etapas de calibração e ensinar o software como seus músculos respondem quando ela a certeza de pré-definido aponta que o software entende. Se você gostaria de ir em frente da tela. OK, continue tentando. [00:02:30] COLTON: Vai como este. E assim. E todo o caminho para a direita. Volte. [00:02:35] DAVID J. MALAN: OK. Perspectiva diferente. Não é você. Somos nós. [00:02:40] MARIA: OK. DAVID J. MALAN: Não. Vamos movê-lo mais para cima, por isso é mais perto de seu cotovelo, ou ainda mais apertado. Tudo certo. [00:02:52] Aqui vamos nós. Este seria um bom momento para CS52X. Lá vamos nós. [00:02:57] Muito bom. Está bem. Polegar para mindinho. [00:03:02] Muito bom. Espalhe os dedos. Boa. Onda certa. Está mostrando curiosamente você com a hand-- esquerda [00:03:17] Colton: Sim, isso é estranho. DAVID J. MALAN: Onda de à direita e seguir em frente. Fast forward para pular ou seguinte. É isso mesmo Onda OK. [00:03:25] MARIA: Eu don't-- esperar. [00:03:26] DAVID J. MALAN: Precisa de alguma ajuda? [00:03:28] Colton: Então você vai como este. MARIA: Ele está girando o outra coisa, no entanto. Colton: É. DAVID J. MALAN: Sim, eu não sei por que ele está mostrando a você um esquerdista. Colton: Por que você não try-- apenas tentar ir como este. [00:03:38] DAVID J. MALAN: Não? Talvez atingir seu braço um pouco mais reto e torná-lo mais abrupta como este. Sim, OK, vamos lá. [00:03:48] MARIA: Eu sinto muito. DAVID J. MALAN: Não é culpa sua. Colton: É bom. DAVID J. MALAN: All Right. Bom-- [00:03:56] MARIA: Será que devemos ignorar isso, então? DAVID J. MALAN: Sim, vamos deixá-lo fora do gancho. Então, se alguém gostaria de fazer uma projeto final utilizando este vanguarda hardware, percebe que só poderia demorar um pouco para se acostumar. E isto-- a realidade é esta é realmente muito sangramento borda. [00:04:10] Isto é o que é chamado o kit de desenvolvimento, que destina-se a ser, essencialmente, um pré-lançamento de modo que as pessoas podem fazer exatamente isto-- lutar com ele, figura a forma como os corpos das pessoas trabalhar com a tecnologia. Então se você quiser depois, após palestra, podemos deixá-lo vir e tomar outra facada nele. Mas por outro lado, uma salva de palmas, se Poderíamos, por Maria para vir em cima. [00:04:26] MARIA: Obrigado. [00:04:28] DAVID J. MALAN: Obrigado. Vamos agarrar a isso, mas vamos dar você- como sobre uma bola de stress aqui? Oh, e-- se-- sim, obrigado. Tudo certo. Então, para os curiosos, se você fosse familiarizado com a escolha de som que fizemos lá anteriormente, uma TV incrível mostrar que você deve absolutamente estar no Netflix observação de binge é este aqui. [00:04:51] COLUNA 1: Senhoras e senhores, um mágico chamado Josh. [00:05:04] DAVID J. MALAN: E, aparentemente, é uma coisa para me texto durante palestra agora. Estou sendo informado de que Maria teve um aniversário ontem. Então, feliz aniversário a partir de CS50 a Maria também. [00:05:18] Então você pode ter lido no mês recente que este senhores aqui, Steve Ballmer, que era, na verdade, classe de 1977 na faculdade, recentemente se aposentou para a Microsoft. Ele era um estudante aqui, em seguida, um par de anos mais tarde encontrou-se em Stanford Business School quando recebeu um telefone chamada de um amigo seu que viveu no final do corredor dele aqui em Harvard. O nome desse amigo era Bill Gates, e no momento, ele estava tentando recrutar Steve ser a primeira pessoa de negócios, realmente, em uma pequena empresa de nome Microsoft. [00:05:45] A longa história curta, Steve foi finalmente conquistado, se juntou à Microsoft quando eles tinha apenas 30 funcionários. E pelo tempo que ele aposentou recentemente, a empresa tinha 100.000 funcionários ao longo dos últimos anos. E assim, um site conhecido como The Verge preparou esta homenagem em vídeo que nós pensamos compartilhado que lhe dá uma sensação de quanta energia Steve traz para qualquer apresentação que ele dá. [REPRODUÇÃO DE VÍDEO] -Microsoft É como um quarto filho. As crianças fazem sair de casa. Neste caso, eu acho que Eu estou saindo da casa. Ei Bill, whazzap? [00:06:23] -Wazzap? [00:06:24] Ei, wazzap? Temos sido dada uma enorme oportunidade. E Bill nos deu essa oportunidade. Quero agradecer a Bill por isso. Eu quero que você também. O ritmo da inovação não vai abrandar. [00:06:42] Ele vai ficar mais rápido e mais rápido. Pode haver alguns concorrentes que, infelizmente, são eliminados! [00:06:54] Eu amo essa empresa. Sim! Eu sou um PC, e eu amo esta empresa! [00:07:08] Desenvolvedores, programadores, desenvolvedores, desenvolvedores, desenvolvedores, desenvolvedores, desenvolvedores, desenvolvedores. Sim! Os desenvolvedores da Web! [00:07:19] Os desenvolvedores da Web! Os desenvolvedores da Web! Ouça o que mais você obter, sem custo extra! [00:07:28] O executivo MS-DOS, um compromisso calandra, uma pilha de cartões, um bloco de notas, um relógio, um painel de controle. E, você pode acreditar nisso? Reversie! [00:07:35] Gravá-los em CD! Publicá-las no MSN! Você enviá-los para amigos! [00:07:40] Tudo isso com um clique! One Microsoft, uma estratégia, um team-- focado, disciplinado, profissional, e especialista em tudo o que fazemos. Deixe-me usar uma linha de um filme antigo. [00:07:52] Relacionamentos são como tubarões. Eles se movem para a frente ou morrem. Eu realmente acho tecnologia empresas são os mesmos. [00:08:01] [FIM REPRODUÇÃO DE VÍDEO] DAVID J. MALAN: Então, estamos muito satisfeitos com anunciar que Steve vai se juntar a nós aqui em CS50 próxima quarta-feira em lugar de costume e tempo aqui. Espaço será provavelmente limitado. E assim se juntar a nós na pessoa, por favor cabeça hoje ou logo em seguida para cs50.harvard.edu/register. [00:08:22] E vamos acompanhar por Terça-feira confirmando pontos. Ansiosos para que na próxima Quarta-feira durante palestra na CS50. Agora, em outra notícia, aconteceu de eu se deparar com isso em The Crimson apenas no outro dia. [00:08:34] Acontece que um dos funcionários do CS50 e, pelo menos, um dos alunos de CS50 está atualmente em execução para UC presidente e vice-presidente, que me trouxe de volta aos meus próprios dias atrás quando eu perdi a eleição UC miseravelmente. Mas o forro de prata em que é que eu sempre contar a história é que um dos que eu tenho certeza muitas razões que eu perdi o eleição foi uma completa falta de um talento para falar em público. E assim, muito sinceramente, que dirigi-me, que a experiência Acho que meu primeiro ano, para realmente assinar para Harvard Computer Society, que é o grupo no campus que detém várias palestras técnicas e outras coisas. E eu assumi seu ensino seminários e, portanto, teve uma oportunidade, uma oportunidade maravilhosa, para começar a trabalhar sobre exatamente isso. Mas também, eu tive uma oportunidade durante esta experiência me ensinar tudo o mais HTML. E assim eu acabei adiando a noite passada por olhando através do site baseado em HTML Eu fiz em 1997 como, 98, para o meu campanha que se parece com isso aqui. Eu sei. [00:09:29] Because-- e, claro, o aviso prévio esta decisão design surpreendente em 1998 ou outros enfeites. A primeira coisa que você quer que os usuários fazer ao visitar o seu site é ter que clicar em outro link apenas para entrar em seu website aqui com o monge trás como uma cortina envolta onde aparentemente minha plataforma de campanha era. E isso é tudo que você vai ter hoje é apenas um screenshot. Mas eu estava lendo, como, meus cartazes de campanha na noite passada e minha plataforma. [00:09:50] E eu estava tão irritado com o tempo. Minha plataforma foi-- foi interessante. Então eu me acalmei desde então. Mas um dia, eu vou correr de novo e espero que melhor fora desta vez. [00:10:03] Então, HTML, que a língua em que eu fiz em-- que você logo vai fazer muito more-- é algo que estive falando da tarde e em grande parte o que pressupõe agora que nós mudamos para outras línguas. Mas vamos fazer uma pausa por um momento e colocar algumas dessas coisas no contexto. Assim, em uma frase, o que é HTML? [00:10:18] Ou, o que é usado para? Qualquer um? Sim. [00:10:20] AUDIÊNCIA: Markup para websites. DAVID J. MALAN: Markup para o site. Portanto, é uma linguagem de marcação que permite estruturar uma página web. Cabeçalho sobe aqui, o título vai aqui, o corpo vai aqui. Isto está em negrito, este é italics-- esse tipo de detalhe. [00:10:33] OK, bom. Então CSS permite que você- e eu tomou algumas liberdades lá com o ousado virados e itálico porque que é melhor implementado com isso. CSS é-- o quê? Diga em uma frase. Qualquer pessoa em tudo. Sim. [00:10:46] Audiência: enfeites e material, como forma de projetá-lo. DAVID J. MALAN: OK, bom. Enfeites que permitem que você para projetá-lo ou estilizar ele com coisas como negrito e itálico e cores e também mais fino posicionamento de grão de elementos. É uma espécie de permite levar as coisas a última milha, de modo que se, por exemplo, em Pset7, você deve ter notado em seu carteira de página se você estiver neste momento já que uma tabela padrão que você fazer para mostrar participações do usuário e dinheiro, provavelmente, parece muito hediondo por padrão, sem espaço em branco. Tipo Tudo está repleto de juntos em linhas e colunas. [00:11:18] Bem, com um pouco de CSS, como você pode perceber, você pode realmente ajustar isso e torná-lo algo muito mais familiar e muito mais bonito de se olhar. Então CSS é sobre a estilização de websites. Mas, então, lançou mais uma linguagem, PHP, o que nos permite fazer o que? [00:11:36] Vamos apenas fazer o que? Qualquer um. Tem de se aventurar além o primeiro par de linhas. Sim. [00:11:40] AUDIÊNCIA: gerar conteúdo dinâmico. DAVID J. MALAN: Perfeito. Gerar conteúdo dinâmico. E você pode fazer isso em qualquer número de idiomas. Nós acontecer para usar o PHP, pois é em parte, de modo semelhante ao C sintaxe. [00:11:50] Mas o PHP faz exatamente isso. Ele permite que você gerar dinamicamente saída. E alguns dos que a produção poderia ser HTML, como temos vindo a fazer normalmente. E também, porque é uma linguagem de programação, está o mecanismo através do qual podemos falar com bancos de dados. [00:12:03] E nós podemos fazer consultas para outros servidores como Yahoos e programática fazer nada realmente que você poderia quer obrigar um computador para fazer. Então PHP nos permite começar saída dinamicamente o conteúdo. Então, por esta lógica, eu não tenho um site dinâmico de volta em 1998. [00:12:16] Era apenas uma página web estática. Meu conteúdo teve de ser alterado por manualmente com gedit ou algum equivalente. Mas o PHP é o que usamos ou poderia ter usado, em vez disso, para algo como o Site Frosh IMs, que era suposto ter registos e gerenciar uma lista de coisas que users-- estão realmente mudando ao longo do tempo, mesmo que aconteça para usar Perl, uma diferente linguagem da época. [00:12:35] E então, finalmente, nós introduzimos SQL-- Structured Query Language. Então ainda outra língua que é usado para quê? Usado para quê? Podemos aventurar slight-- OK, nós não vamos para chegar mais longe que a orquestra aqui. AUDIÊNCIA: É um protocolo de usado para falar com bancos de dados. DAVID J. MALAN: Um protocolo usado para falar com bancos de dados. Deixe-me ajustar. É uma língua natural utilizada falar com databases-- seleciona e inserções e exclusões e atualizações e, na verdade, até mais recursos que nós ainda não mergulhou em, mas você pode querer ter explore-- para explorar, por exemplo, um projeto final. Então existem essas várias peças. [00:13:09] E espero que Pset7, embora sua especificação é bastante longo, é deliberadamente muito tempo para orientá-lo através de como essas coisas podem tudo ser digitado junto. Agora, na segunda-feira, nós introduzida nosso último idioma que vamos apresentar formalmente em course-- o que é, JavaScript. Este, como PHP, é uma linguagem interpretada. [00:13:25] Mas uma distinção fundamental Propus na segunda-feira é que, enquanto o PHP está executando ou sendo interpretada no servidor, o que neste caso, é o aparelho CS50, ou pode ser alguma web comercial servidor na Internet, JavaScript geral É uma linguagem que funciona do lado do cliente Não servidor side-- lo no browser. O que quer dizer, exatamente como quando eu abri Facebook se o código-fonte e encontrou tudo desses arquivos .js, a implicação era que quando você visita o Facebook ou mais sites estes dias, você começa não apenas HTML, CSS, não só, mas um monte de JavaScript código, muitas vezes sob a forma de arquivos .js. E então é a sua própria browser-- Mac ou PC-- que executa esse código. [00:14:03] Mas o navegador executa. Você pode pensar em uma espécie de sandbox. Assim que o código JavaScript não deve ser capaz de apagar arquivos no seu computador. Ela não deve ser capaz de enviar e-mails em seu nome. O seu tipo de navegador restringe o que você pode fazer com ele. [00:14:17] Então, nesse sentido, é um pouco menos poderoso, talvez, do que C. Mas JavaScript pode, como um de lado, ser utilizado no servidor, mas vamos tendem a não falar sobre isso nesse contexto. Então agora vamos amarrá-los juntos. Uma semana mais atrás, apresentamos alguns HTML na página web left-- super chato. [00:14:34] Apenas diz Olá mundo. E então eu propus no direito podemos espécie de roubar idéias da nossa discussão de estruturas de dados em C e pensar sobre como isso hierárquica linguagem de marcação do lado esquerdo podem ser desenhados ou implementados na memória como uma estrutura de árvore com nós de real e ponteiros e esses tipos de detalhes. À direita, a que chamamos que um documento DOM-- Objeto Model-- que é apenas uma maneira elegante de dizer árvore. [00:14:56] Agora, por que isso é útil para pense nisso desta maneira? Porque agora com JavaScript, porque temos código que obtém a desempenhar neste ambiente, o HTML real que é foi enviado para o navegador já e já tem foi carregado na memória pela navegador em uma árvore no seu computador de RAM como esta, podemos usar JavaScript para realmente atravessar ou caminhar ou busca ou mudar isso DOM árvore no entanto queremos. Então, na verdade, se você pensar sobre facebook.com, se você usar o recurso de bate-papo, se você uso o Gmail eo recurso Gchat, qualquer coisa que você tem mensagens que vêm de novo e de novo e, novamente, essas mensagens são, provavelmente, como, LI, tag lista de itens, talvez. [00:15:35] Ou talvez eles são apenas divs que continuam aparecendo toda vez que receber uma mensagem instantânea. E assim, isso apenas significa que Facebook ou o Google está fazendo é qualquer momento que você começa a a mensagem do servidor, eles provavelmente estão usando JavaScript apenas adicionar outro nó para este tree-- outro nó para este árvore que então visualmente só olha como uma nova linha de texto na tela. Mas eles estão inserindo para esta estrutura de dados. [00:15:57] Assim como nas aulas CS124 e outros, você vai realmente escrever mais código contra estruturas de dados como este. Mas, por agora, em JavaScript, vamos apenas supor temos toda essa funcionalidade gratuitamente a partir da própria linguagem. Então, vamos olhar um exemplo. [00:16:09] Deixe-me abrir um arquivo chamado form.html. É super simples. Ela só olha como esta. [00:16:15] No CSS, nenhum pensamento de estética. É puramente funcional e, aparentemente, eu sou pedindo um e-mail, uma senha senha novamente e, em seguida, uma verificação a concordar com alguns termos e condições. O que o código-fonte para este parece que é provavelmente algo você pode imaginar com um pouco de pensamento agora. Eu tenho uma marca de formulário aqui. [00:16:32] Uma ação aparentemente está indo para ir para um arquivo chamado register.php. O método que eu vou usar é ficar. E então eu tenho um texto campo cujo nome é e-mail. [00:16:40] Eu tenho um campo de senha cujo nome é senha. Eu tenho outra campo de senha, cujo nome é a confirmação de um tanto arbitrariamente. É apenas mais um parâmetro HTTP. [00:16:49] E, então, nós não usei esses exceto desde os IMs Frosh demo em class-- uma caixa de seleção que é só tipo é igual a cheque. E eu vou chamar esse acordo. Então eu meio que arbitrariamente, mas convenientemente chamada nesses campos. De modo que agora, quando esta forma fica apresentado, vamos ver o que acontece. Se eu fizer malan@harvard.edu, Eu vou fazer uma senha de carmesim. Eu vou fazer uma senha de nada. Não vamos cooperar. [00:17:10] E eu não vou marcar a caixa. Deixe-me clique em registrar. E diz que, hm, você está registrado. Não é realmente. [00:17:16] Mas o URL alterado. Assim, esta forma foi claramente permitido submeter-se a register.php. Mas presumivelmente, eu deveria ser pegando alguns desses erros. Agora, em Pset7 e alguns dos nossos exemplos de aula, que, em geral, imprimir uma grande mensagem de erro vermelho aqui dizendo, o nome em falta, ou faltando senha. Nós fizemos isso antes e temos done detecção de erro do lado do servidor. [00:17:37] Mas muitos sites estes dias fazer a detecção de erros do lado do cliente em que a URL não muda. A página inteira não atualizar. Você obtém um feedback instantâneo a partir do browser. Talvez algo der vermelho. [00:17:48] Talvez você receber um pop up. Mas você não perca tempo enviando para os dados do servidor que é incompleto. Então vamos ver como podemos alcançar esse recurso também. [00:17:56] Deixe-me ir para form1.html, que parece o mesmo. Mas se desta vez eu faço malan@harvard.edu e eu digito carmesim e eu não cooperar mais mas clique em Register, observe agora. Não é a solução mais sexy. Eu, pelo menos, peguei esse erro. E eu usei o alerta função em JavaScript-- que estamos usando somente em sala de aula. Em geral, você não deve usar este porque pode rapidamente sair de controle. Mas senhas não correspondem é o erro. [00:18:19] Deixe-me ir em frente e clique em OK. Mas o que o principal argumento aqui é que a URL não se alterou. Desperdício Então eu não tenho incomodado hora do servidor pedindo-lhe uma pergunta que eu poderia ter descobri a resposta para mim mesmo. [00:18:30] E o utilizador, embora falado sobre isso mais tempo do que o usuário de vai pensar sobre isso, vai ter um feedback instantâneo. Não há nenhuma latência com a conectividade de rede. Então, vamos olhar para este código fonte. [00:18:40] Olhares Form1.html estruturalmente semelhante aqui em cima. O formulário é de fato o mesmo. Mas vamos ver o que eu fiz aqui. E há maneiras diferentes de fazer isso. E eu fiz o mais direto seguidor, mas não forma mais elegante ainda. Eu tenho uma tag script. Eu, então, chamar document.getElementById ("registo"). E eu armazenar esse valor na forma, uma variável. [00:19:04] Então o que foi que eu fiz? Você pode pensar em document.getElementById como sendo uma função especial que JavaScript lhe dá que, literalmente, lhe oferece um ponteiro para um dos nós ou retângulos nesta árvore. Portanto, agora que é o que a nossa variável de formulário em JavaScript é realmente apontando. [00:19:21] Então, agora a sintaxe é diferente C. Mas estamos fazendo algumas coisas aqui. Um deles, este é um pouco estranho procurando, certamente contra C. Mas olhe para linha 35. Assim, no form.onsubmit esquerda. Lembre-se que é onsubmit como um campo em uma struct. Se você acha que a variável forma é apenas ser um struct C, ele pode ter alguns campos. [00:19:42] Voltar no dia, tivemos nomes estudantes, IDs, casas, esse tipo de campos. Basta pensar onsubmit como outro campo. Mas é um campo especial porque o browser é pré-programado para esperar .onsubmit para não ser um valor como um número ou uma string, mas para realmente ser uma função ou o endereço de uma função na memória do computador. [00:20:02] E, de fato, é o que esta palavra-chave aqui faz. Este diz, dá-me uma nova função. Mas qual é o seu nome vai ser, aparentemente? [00:20:09] Pensando segunda-feira. O que é o nome do presente com base nesta função sintaxe? Não, quero dizer, há claramente nenhum nome associated-- certamente não no que eu destaque aqui. [00:20:21] Mas isso é realmente OK. Esta é uma função anônima, ou um função lambda como alguns podem chamá-lo. E isso significa apenas ainda é uma função. É só, você não pode chamá-lo pelo nome. Mas isso é OK. Porque mais uma vez, o navegador tem sido pré-programados por empresas como a Google ou Microsoft ou Mozilla ou outros para só sei que se o campo .onsubmit dentro de um elemento de formulário tem o valor, tratá-lo como um function-- um ponteiro de função, se você quiser. E chamá-lo quando o formulário é enviado. [00:20:46] Então, o código deve ser executado quando o formulário é enviado? Aparentemente, tudo dentro da chaveta. E este é apenas estilística. [00:20:53] Você pode fazer isso como tendemos a fazer em CS50. Mas em JavaScript, a maioria das pessoas tendem a mantê-la na mesma linha só porque ele é mais claramente associado com essa função palavra-chave. Então agora o que estou fazendo? [00:21:03] Se form.email.value igual equals a cadeia vazia ou nada, é aqui um alerta que eu vou dizer, você deve fornecer seu endereço de e-mail, e, em seguida, retornar falso. E é essa falsa retorno que impede que a forma de ser submetido. Entretanto, se o valor da senha é em branco, eu vou gritar com o usuário e dizer, você deve fornecer uma senha. [00:21:21] Enquanto isso, as coisas estão ficando um pouco mais chique aqui. Se não faz form.password.value igual form.confirmation.value, o outro campo, grite o usuário que as senhas não correspondem à medida que não há um momento. E então este é um pouco mais sexy porque eu sei que eu sabia que conceitualmente verificado é o nome de uma caixa de seleção. [00:21:40] Então eu só posso usar uma exclamação ponto de dizer se o cheque não é checked-- é o booleano valor, verdadeiro ou false-- Eu vou gritar para o usuário por esse motivo. Caso contrário, se passar todas estas condições, vamos retornar verdadeiro. Deixe o formulário ser submetido. E isso vai acontecer em seguida. [00:21:56] Vamos digitar carmesim. Vamos verificar a caixa, clique em Register. E agora eu vou até o destino. Agora, não há banco de dados lá. Não há nada de interessante em register.php. Eu só precisava de algo para realmente conversar. Então deixe-me fazer uma pausa, aqui. Qualquer dúvida sobre o que acabei de fazer ou o que alguns desta nova sintaxe é? OK, não é? [00:22:17] AUDIÊNCIA: Assim, qualquer caixa de seleção é automaticamente um booleano. Você não tem que declará-lo assim. [00:22:21] DAVID J. MALAN: Correto. Qualquer opção que é enviado a você de um formulário HTML ao seu código JavaScript vai ser tratada, sim, como um Booleana value-- verdadeiro ou falso. É uma boa pergunta. Considerando que os outros valores, de Claro, ter sido o texto, cordas AKA. [00:22:36] Tudo bem, então me deixe rebobinar um pouco mais. Qual foi o ponto de todo este? Só para ficar claro. Tipo, a gente já sabe, até mesmo de Pset7 e até mesmo de palestra da semana passada exemplos, que podemos, obviamente, verificar $ _GET $ _POST Ver se o usuário dá-nos um valor vazio. Lembre-se da função vazia em PHP. [00:22:54] Então, só para ficar claro, o que é um dos motivos que também pode quero fazer isso a verificação de erros dentro do navegador? Qual é a motivação aqui? Sim. [00:23:06] AUDIÊNCIA: Mais rápido, e você não faz enviar dados inúteis para o servidor. DAVID J. MALAN: Good. É mais rápido. Você não manda inútil os dados para o servidor. [00:23:12] Então você voltar a mais resposta imediata. E, no geral, o usuário experiência é melhor. Pense sobre a alternativa. [00:23:17] Se, por Gmail-- e foi o caso há muitos anos. Suponha que você tem um novo e-mail o seu Gmail conta, mas a única forma através da para ver que é, como, recarregar a página inteira. Ou suponha que você clique em um link para ler um e-mail. [00:23:29] Tudo tem que recarregar assim que você pode ver o e-mail. Ou Facebook-- você receber uma mensagem de bate-papo. Você não vê-lo até que você recarregar a página ou clique em algum link. [00:23:36] Como, isso seria uma terrivelmente experiência do usuário irritante. E isso é o que era, claramente, de volta quando eu corri para UC e da web foi muito menos dinâmico e JavaScript não foi tão popularizado como é agora. E as coisas estão ficando muito mais dinâmico e muito mais lado do cliente nesse sentido. [00:23:49] Mas há um problema aqui, e esta é uma espécie de pegadinha irritante. Só porque você adicione lado do cliente detecção como isto não significa você pode ou deve abandonar detecção do lado do servidor. Você essencialmente quer colocar o seu verificação de erros em ambos os lugares. Porque o que foi um da lição aprendida do artigo que li alguns trechos com deste system-- CMS estúpido Content Management System-- que era implementação do seu sistema de autenticação, seu login a partir de qual mecanismo? JavaScript. [00:24:20] AUDIÊNCIA: JavaScript. DAVID J. MALAN: JavaScript, exatamente, certo? Ele estava usando JavaScript. E literalmente, vocês têm desempenhado um pouco provavelmente com o inspetor do Chrome. E se eu puder encontrá-lo, inspecionar elemento. [00:24:30] Deixai-me passar a fazer todas as opções do Chrome. E é assim que é fácil desativar o JavaScript em um navegador. Confira, não mais JavaScript. [00:24:38] Então, para ser justo, muito da web nos dias de hoje só vai quebrar porque Gmail e outros sites-- Facebook-- assumir que JavaScript está ativado. Mas se você está fazendo algo estúpido como apenas validar a entrada usuários e verifica se existem erros no lado do cliente, um adversário poderia fazer isso facilmente. E depois ainda mais inteligente adversário como vocês agora pode usar o Telnet ou onda ou comandos de linha de comando apenas e realmente enviar mensagens ao servidor que também não são erro verificado. [00:25:05] Portanto, este é mais um decisão interface de usuário que é uma técnica efectiva improvement-- implementação lado cliente algo assim. Então agora um rápido olhar, mas depois Vou adiar para a caminhada em linha através de um presente. Em forma de dois, que realmente passou por e limparam o código um pouco. Mas deixe-me adiar para uma dos vídeos que provavelmente vai incorporar em Pset8 que apenas mostra uma sintaxe semelhante usando uma biblioteca chamada jQuery, que é um super, super biblioteca popular em JavaScript que, francamente, a maioria das pessoas é só usar esses dias e até mesmo confundir como próprio ser JavaScript. [00:25:37] E isso tende a envolver alguns cifrões e palavras-chave como documento em parênteses aqui. Mas, novamente, deixe-me adiar para alguns tutoriais mais lentos em linha em vez de ficar amarrado em apenas sintaxe. Vamos seguir em frente para algo um pouco mais frio em termos das aplicações deste. [00:25:50] Assim, em particular, deixe-me ir em frente e abrir este aqui. Venha. Lá vamos nós. [00:25:59] Deixe-me abrir esta foto aqui. Desnecessariamente complicado olhando, mas descreve uma técnica chamada AJAX-- Asynchronous JavaScript e XML, onde o X para XML é realmente deixou de ser realmente utilizado. Ele tende a usar algo outro chamado JSON. [00:26:13] Mas aqui é como algo como Google Maps ou Google Earth funciona. Vamos tentar isso em tempo real, na verdade. Deixe-me ir em frente e abrir até Chrome em meu navegador. [00:26:21] E deixe-me entrar, dizer, maps.google.com. E, na verdade, se você é velho o suficiente para lembrar que, como, MapQuest era como voltar no mesmo dia, e talvez eles ainda funcionam assim. Quando usado para procurar something-- 33 Oxford Street, Cambridge, Mass, vamos fazer isso- você seria, na verdade, se você queria para deslocar para cima e para baixo, esquerda e direita, você olharia como um grande seta no topo, e iria mostrar-lhe outro moldura do mapa aqui. Ou você deverá clicar à esquerda e você iria mais aqui, ou outro clique e você iria por aqui. Mas, em vez destes dias, nós, claro, apenas tomar por certo que podemos ir em torno de Cambridge muito rapidamente apenas clicando e arrastando. Mas note que há algumas falhas. [00:26:59] Se eu fizer isso rápido o suficiente, o que parece estar acontecendo como eu arrastar um pouco rápido demais para o computador para manter-se? O que você vê? Sim. [00:27:07] AUDIÊNCIA: Os pixels não atualizar. DAVID J. MALAN: O pixels não atualizar. Há actually-- e você podia ver isso, na verdade, se você estiver assistindo on-line e pausa este ou realmente atrasa as coisas para once-- você vai ver que existem telhas, quadrados, ou retângulos que estão ausentes do mapa até uma fração de segundo depois, mais dados, mais imagens realmente aparecem na tela. E, de fato, se fizermos isso olhando até Chrome's-- digamos, Chrome-- vamos ver. Nós não podemos fazer isso. [00:27:31] Oh, gritos. Vamos abrir maps.google.com. Deixe-me fazer a janela maior novamente. [00:27:36] Volte para 33 Oxford Street. Qual foi o site que eu estava recentemente? Eu tive isso, como, divertido privada para a mim mesmo que eu tinha então mensagem instantânea qualquer amigo que estava on-line que queriam ouvi-lo. Há algum site. Eu acho que é por isso Comcast-- um grande ISP americano. Você pode, quando se inscrever para novo cabo serviço de modem ou serviço de TV a cabo, eles têm uma forma muito razoavelmente onde eles pedir-lhe para o seu endereço. E tem essa incrível recurso chamado auto completa, como o Google, que começa a encher na resposta à sua pergunta. [00:28:04] O problema é que eles fazem auto completa sobre as primeiras coisas que você digita. Então, se você começar a digitar em 33, ele irá mostrar-lhe literalmente toda casa na América, que começa com o número 33 antes de continuar a espero que você escreva mais. Então, se você digitar 33 Oxford, em seguida, ele mostra todas as ruas na América, que tem 33 Oxford em o seu nome, independentemente da cidade que você está em. [00:28:25] E então você continuar a escrever. E, finalmente, ele percebe que não fazer oferta de serviços para a sua casa em Cambridge ou algo parecido. Mas o ponto é, este é o mais implementação asinino de auto completar nunca. [00:28:34] E eu só vou off sobre esta tangente novamente. Mas há boas maneiras de usar JavaScript e maus caminhos. E isso não é necessariamente o melhor. [00:28:40] Mas o ponto aqui, antes que esta discurso, era a abertura de ferramentas aqui e abrir as ferramentas de desenvolvimento, como temos incentivado antes, e para assistir a Rede guia como eu clicar muito rápido. E observe um grupo inteiro de obter pedidos aconteceu. Tudo isso aconteceu desde que eu arrastado. [00:28:57] E o mais provável, de fato muitas dessas linhas agora são imagem JPEG barra Tipos MIME ou tipos de conteúdo. Isso porque o cromo está fazendo cada vez que eu clique e arraste, clique e arrastar, é que é perceber, oh, I precisa ir pedir ao Google para a telha no mapa que está aqui, rapidamente o download via HTTP, e, em seguida, adicioná-lo para o chamado DOM para os navegadores da web em árvore memória representação de modo a que o utilizador, mim, vê que a telha atualizado. E isso é por causa de uma técnica chamada AJAX. Voltar no dia, ele realmente foi o caso que se queria mudar o que está na tela, você teria que clicar em cima, para baixo, para a esquerda, direita. E, em seguida, uma nova página se abrirá. Mas estes dias, tudo é mais dinâmico. Acontece na maneira que nós seres humanos faria espero que ele realmente faria de forma interativa. E ele consegue isso forma de uma técnica chamada AJAX, que é talvez o melhor explicada por um exemplo. Primeiro, deixe-me ir em frente e abrir um arquivo chamado quote.php em código de distribuição de hoje. [00:29:53] E, em seguida, deixe-me fazer gritos symbol--. Deixe-me fazer símbolo = GOOG por apenas algumas ações. Ou, na verdade, vamos fazer o um do Pset GRÁTIS. Enter. [00:30:05] E agora o que eu voltar. Portanto, este é realmente um arquivo PHP que eu curto escreveu que simplesmente pede código da função de pesquisa de Pset7 e cospe usando este chaveta e citações e notação de dois pontos, aparentemente, preço da ação atual para o empresa que você passa na via get. Portanto, esta é diferente de mais do que temos feito em que o aviso que estou literalmente cuspindo o que parece ser de código JavaScript. [00:30:27] Na verdade, este é um objeto JavaScript. Na verdade, apenas para ser mais claro, JavaScript Object Notation-- JSON-- é apenas uma maneira elegante de dizer que você pode representar dados em JavaScript muito como você pode em PHP usando pares de valores-chave. Então, se eu queria declarar uma variável em JavaScript a representa Zamyla, para instance-- um struct para Zamyla-- e vamos chamá-lo estudante, esta variável. Seu ID é um, casa é Winthrop, eo nome é Zamyla. [00:30:53] Mas também pode ter uma matriz de objetos. Então, se eu realmente queria ter uma matriz em JavaScript que contém vários desses objetos, este tempo que representa o pessoal, Eu poderia ter estes três pedaços de código de volta a volta para trás para estes três ex-membros da equipe. Assim, a sintaxe, bastante semelhante ao ambos-- para PHP. Mas isso é particularmente JavaScript. É notação objeto. Então, o que é útil para este? [00:31:17] Se eu escrever um código que cospe JSON-- JavaScript Object Notation-- coisas que se parece com isso ou coisas que Parece que a estrutura da Zamyla, Eu posso realmente usar este em programas que eu escrevo. Deixe-me ir para ajax0.html. E este não muito demasiado-- atenção dada à estética. Mas veja o que acontece. [00:31:34] Deixe-me ir em frente e digite gratuitamente aqui. Clique obter citação. E observe o URL não mudou. Mas eu consegui um pop up com aparentemente preço das ações centavo de hoje de US $ 0,15. Então, não tão ruim assim. Mas a diferença é que de alguma forma, Estes dados vieram de volta para mim diretamente. Mas vamos dar um passo na direção algo mais familiar. Na versão um deste, deixe-me digite livre novamente, clique em Get citação, e agora- oh, esta foi na verdade, a versão jQuery. Então vamos me-- eu não fiz avançar muito longe o suficiente. Deixe-me ir para a versão dois, que é onde eu queria. Observe o que eu fiz aqui. Eu tenho uma web página-- um super versão simples de qualquer página web você pode usar hoje, com um campo de texto aqui por livre e então, aparentemente, apenas texto. [00:32:14] Esta não é uma forma aqui, aparentemente. Mas se eu clicar em obter citação, observe minha página web está prestes a mudar, como se eu só tenho uma nova mensagem instantânea ou como se eu apenas mudou o mapa e necessário para obter mais dados adicionados dinamicamente para a página web sem a URL mudança eo usuário experiência ficar interrompido. Na verdade, eu ainda estou no exatamente o mesmo ajax2.html Place--. [00:32:35] Então, vamos olhar apenas para este exemplo e ver como isso está acontecendo. Deixe-me entrar em ajax2.html. E observe a forma pela primeira vez. [00:32:44] Aqui em baixo, eu estou voltando off auto completa. Às vezes fica irritante se o navegador está tentando mostrar-lhe toda a sua história. Assim, você pode fazê-lo em HTML apenas dizendo auto completar off. [00:32:53] Tenho dado este texto um campo symbol-- sim, uma identificação de símbolo. E agora, esta é uma característica interessante. Nós não falamos sobre extensão, mas você pode pensar sobre isso como uma marca de parágrafo ou div tag. É o que se chama de in-line elemento, que significa que você não vai conseguir um parágrafo quebrar acima e abaixo dele. Ele só vai ficar em linha sem atingindo o equivalente a entrar. Então, eu tenho dado este pedaço de HTML a ser determinado um identificador único que eu arbitrariamente chamado preço. E eu tenho um botão Enviar. [00:33:21] Porque agora até aqui- e este é realmente super incrível código quão pouco você pode escrever para fazer relativamente puro coisas- perceber o que eu tenho feito até aqui, se eu rolar para cima para a cabeça desta página. Eu já incluído pela primeira vez em minha cabeça uma tag script que, na verdade, faz referência a uma JavaScript arquivo em outro lugar. Esta é a partir da organização que escreve jQuery, e isso é apenas dar-lhe o mais recente versão de sua biblioteca jQuery. [00:33:42] Então, isso é como afiada incluir em C ou exigir em PHP. Você usa a tag script com um atributo de origem. Mas agora o meu próprio código é vai ser bom aqui. [00:33:52] Repare que eu tenho uma função chamada Quotes. E parece um pouco enigmática, à primeira vista. Mas vamos brincar com este apart. Dê-me uma variável chamada URL. Atribuir-se literalmente esta cadeia. Assim, aspas simples, aspas duplas em JavaScript só me dá uma corda. O que faz o mais fazer? Concatenação. [00:34:08] Portanto, este agora é a sintaxe jQuery que demora um pouco para se acostumar. Mas isso significa apenas ir buscar-me o DOM nó cujo identificador exclusivo é símbolo. A hashtag não significa símbolo identificador único. [00:34:21] O sinal de dólar no parênteses significa apenas, enrole esta jQuery em uma espécie de segredo molho de modo você tem uma funcionalidade adicional. E, em seguida, é aparentemente .val uma função, ou como se diz agora, um método dentro deste nó que apenas lhe dá o valor. Assim, em breve, feio e confuso como isso parece, à primeira vista, isto significa apenas ficar com o usuário digitou em, colocá-lo no final da string concatenando-lo. Isso é tudo. [00:34:43] Então, agora, três últimas linhas. Você pode apertar um monte de funcionalidade de três linhas. Este sinal de dólar, como um de lado, é apenas um apelido para uma variável global especial chamado literalmente jQuery. [00:34:55] Sinal de dólar apenas parece legal. Assim, a comunidade jQuery apenas uma espécie de o usou como seu símbolo especial. Isso não quer dizer que isso significa em PHP. Em JavaScript, sinal de dólar é apenas como uma letra do alfabeto ou um número de variáveis. [00:35:07] Você pode apenas tê-lo como o nome. Apenas parece legal. Assim, a comunidade adotou como um apelido para a sua própria biblioteca chamada jQuery. [00:35:13] E é super popular. Portanto, obter JSON é exatamente isso. É uma função que o pessoal do jQuery escreveu que recebe JSON a partir de um server-- JavaScript Object Notation. Pelo que URL é que vai para obter essa informação? Aparentemente, a partir deste URL aqui. [00:35:27] E o que deve fazer como o navegador Assim que ele recebe de volta essa resposta? E essa é a magia do AJAX, por assim speak-- Asynchronous JavaScript em XML. É difícil ver com tal exemplo simples como tivemos aqui. [00:35:41] Mas este era assíncrona em a sensação de que meu código quando executado enviou uma mensagem para o servidor para ir buscar-me um pouco JSON. E isso aconteceu super rápido que eu tenho uma resposta. Mas o que é interessante é que esta linha de código não pendurar meu computador. [00:35:55] Eu não vi um ícone de spinning. Eu não perdi a capacidade de mover o mouse. Meu navegador era realmente perfeitamente bem. [00:36:01] Devido a maneira como JavaScript manipula o resposta do servidor é como se segue. Você registrar o que você chamaria uma função de retorno, que Significa apenas que, hey, JavaScript. Assim que o servidor responde com JSON, ligue para essa função anônima. [00:36:18] E por favor, passou para esta função qualquer que seja a seqüência de servidor cuspir como um argumento chamado de dados. Portanto, em outras, palavras, se Estou montando dinamicamente quote.php um URL que passa neste símbolo como LIVRE ou GOOG ou outros enfeites, Eu estou dizendo, em seguida, JavaScript ir buscar esse URL. Lembre-se que o navegador vai retornar algo que parece que viu earlier-- isso. [00:36:42] E o que o segundo argumento aqui para obter JSON está dizendo é chamar esta função quando o servidor recebe de volta se é 10 milissegundos a partir de agora ou 10 segundos a partir de agora. E assim que você faz, adicione o preço para a página. Esta sintaxe aqui apenas Significa ir buscar o nó da árvore cujo único identificador é preço-- esse período vimos anteriormente. [00:37:01] Este método chamado HTML apenas diz, vai substituir o código HTML que está lá com data.price. O que há de data.price? Bem, o navegador, lembre-se, mostrou-me esta voltando. Portanto, este é um dado. [00:37:14] E por isso é um pouco enigmática para ver as vírgulas aqui. Mas, na verdade, deixe-me fazer isso. Deixe-me apenas colar este muito rápido em gedit e mostrar-lhe como mostramos Estrutura de Zamyla anteriormente. [00:37:27] O que o servidor está enviando de volta é um pequeno objeto que se parece com isso. E assim é data.price apenas me dando 0,1515. Então, um monte de movimento peças aqui tudo de uma vez. [00:37:39] Mas as principais lições é que temos essa capacidade para fazer HTTP adicional solicitações usando JavaScript sem ter que recarregar a página. E então nós podemos realmente alterar a página web em tempo real. E verifica-se que JavaScript e outras linguagens pode ser usado não só agora de mutação páginas da web, mas para realmente escrever software em um computador real, não apenas confinada ao Chrome ou similares. [00:38:00] Na verdade, se-- Colton, que você gostaria de se juntar a nós para trás até aqui com o seu código de laboratório, e Chang também? Vamos em frente, depois de ter falado funções anônimas e retornos e realmente tentar a sorte aqui com uma demonstração ao vivo com sangramento tecnologia de ponta, uma das estes dispositivos Elite movimento. Agora, este dispositivo, recall, é um dispositivo USB pouco bem isso-- que é beautiful-- que se conecta às portas USB. [00:38:25] E então ele oferece entrada sob a forma de gestos humanos usando detecção por raios infravermelhos, essencialmente, os movimentos de seu braço. Assim, enquanto que Maria tentou antes era muscular, realmente sentindo o que está mudando seu braço, este é o infravermelho baseado. Por isso, está à procura de movimentos dentro o tipo de esfera de um pé ou assim do dispositivo em si. [00:38:46] Então por que não posso ter uma facada neste primeiro? E vamos em frente e jogar você em cima da sobrecarga aqui. Então, vamos colocar o laptop de Colton aqui. Temos Andrew na TV. E o que você gostaria de me fazer primeiro? [00:39:00] Colton: Vá em frente e apenas colocar suas mãos sobre esse cara e você vai ver alguns fabuloso glitter. [00:39:04] DAVID J. MALAN: Very nice. Isso tudo está acontecendo em tempo real. Está bem. Tudo bem, e sim. Tão bom. Tudo bem, o que mais podemos fazer? [00:39:15] Colton: Vá para a próxima tela e ver. [00:39:17] DAVID J. MALAN: Tudo bem. [00:39:19] Colton: Um jogo divertido onde você começa a fazer robôs. [00:39:21] DAVID J. MALAN: Tudo bem, então isso é mãos falsos me mostrando o que fazer. Colton: Sim ir muito à frente e pegar um dos blocos e colocá-lo em cima de que o corpo do robô. DAVID J. MALAN: Oh, lá está a minha mão. Oh. OK, adorável. Espere um minuto, OK. Lá vamos nós. [00:39:41] COLTON: Eu fiz uma no acidente. [00:39:43] DAVID J. MALAN: OK, eu vou pegar esse cara. Caramba! Quando estávamos a praticar esta última noite, você sabe o que isso transformou em? [00:39:51] Assim. Está bem. Próximo? [00:39:55] Colton: Claro. [00:39:56] DAVID J. MALAN: Tudo bem, e há um terceiro. Tudo certo. Colton: E neste, você começa a-- DAVID J. MALAN: Oh, um deste bonito. Colton: --yeah, escolher distante desta flor. DAVID J. MALAN: OK. Não? Perdidas. [00:40:14] Colton: Oh, lá vai. [00:40:15] DAVID J. MALAN: Ah, Olhe para isso. Muito bom. Bem, por que não 'tomamos fora um voluntário aqui que gostaria de vir para cima. Como cerca de ali no verde, não é? [00:40:27] Tudo bem, e vamos have-- em vez de fazer isso, alguns de vocês pode conhecer este jogo aqui- cortar a corda, talvez? Vamos ver. Temos os nossos óculos aqui? [00:40:37] Está bem. Obrigado. Qual o seu nome? [00:40:39] AUDIÊNCIA: Laura. [00:40:40] DAVID J. MALAN: Laura? Bom ver. Se você não se importa de colocar Google Glass mais de seus óculos. Este é Colton. [00:40:46] Colton: Oi. Prazer em conhecê-lo. [00:40:48] DAVID J. MALAN: OK, vamos lá ao redor. Tudo bem, então o que você está indo para fazer aqui, depois de ter jogado isso antes, é colocar a mão sobre o Leap Movimento aqui. E agora sua flecha deve se mover. Oh, não tinha. [00:40:57] AUDIÊNCIA: Não. [00:40:58] DAVID J. MALAN: Nós Não quero parar ainda. OK, espere. Por aqui. Então, observe como você realizar o seu dedo sobre algo, o rato começa a ir verde, que é como você clique. [00:41:06] Então passe o mouse sobre Play. E apenas um dedo é muito bem. E agora clique na pequena cara verde do lado esquerdo. E agora segure até que ele enche verde. Boa. Agora, como, nível um em cima. [00:41:16] AUDIÊNCIA: Sim, nós queremos nível um, aqui. [00:41:20] DAVID J. MALAN: Good. OK, então tudo que você tem a fazer é cortar a corda. O cursor é o único branco lá em baixo. [00:41:28] Muito bom. Tudo bem, ele está prestes a ficar mais difícil. Então segure o dedo sobre próxima agora. Boa. Este é difícil. [00:41:39] AUDIÊNCIA: Oh merda. Está bem. Ela quer ir por esse caminho. Oh merda, isso-- [00:41:44] DAVID J. MALAN: Yeah. Objetivo secundário é fazer com que todas as estrelas. Tudo bem, em seguida. [00:41:53] Vamos ver se você pode obter este terceiro. Boa. OK, vá lá. [00:42:06] Claro. Oh, muito bom. Tudo certo. [00:42:11] Então, por que não adiar aqui hoje? Deixe ninguém vir em cima que quer jogar. Agradecemos muito a Laura nosso voluntário. E vamos vê-lo na segunda-feira. [00:42:18] AUDIÊNCIA: Você provavelmente vai querer isso de volta. [00:42:21] COLUNA 2: Na próxima CS50--