[Música tocando] DAVID MALAN: Este é CS 50, e este é o começo de semana nove. E o que nós pensamos em fazer hoje não é só fechar o capítulo sobre a da semana passada material de onde nós nos concentramos em servidor programação web lado com PHP e SQL, algumas coisas banco de dados. Vamos falar sobre um pouco de hoje a segurança e, em seguida, transição para a programação do lado do cliente linguagem conhecida como JavaScript. Mas, primeiro, alguma redenção. Você deve se lembrar que, em Quarta-feira, eu me propus para escrever um site que tomou na entrada do usuário por um código HTML que formam então armazenado que os nomes de entrada do usuário, telefone números e celular portadores no banco de dados. E então eu tive um pouco de comando script de linha escrito em PHP que era para interagir sobre as linhas no banco de dados e enviar mensagens de texto. Apesar de várias, várias tentativas, nós não conseguir que o trabalho até o final. Então eu passei toda esta semana de trabalho em que o código para nos levar além do ponto de onde paramos, em que todos Eu tenho até o final desta quarta-feira Foi essa mensagem de texto de Margo enquanto eu lutava, seguido de uma mensagem de texto a partir de outro colega, você tem esse David. Seguido por este, maravilhosamente estimulante. Continuei indo, muito animador. Eu quase consegui até entăo-- e essa é a nota que terminou na quarta-feira. E então, na verdade, talvez o meu favorito, um momento depois, este entrou. Porra Assistir jogos. Então, hoje, nós corrigir isso com uma rápida olhar para o que eu tenho feito desde então. Então, todo esse código está disponível online a partir da semana passada, oito semanas, código-fonte. E você vai ver que eu passei, e eu realmente limparam um pouco as coisas. Eu apresentei um par outro características de um banco de dados SQL. Por exemplo, em vez de basta fazer transportadora de carvão var como eu acho que eu fiz na mosca na semana passada. Eu em vez definiu como o que é chamado um enum. E alguns de vocês podem ter visto esta como nós exploramos C. Enum é realmente uma característica do C, onde você pode enumerar um monte de constantes e atribuir-lhes valores automáticos, como um, dois, três, quatro sem ter os números de código rígido. Então SQL suporta o mesmo, em que se você tem um campo de banco de dados que você só quer assumir uma das finita valores, você pode, literalmente, especificá-lo como eu fiz lá por quatro operadoras de celulares populares dos EUA. Então eu fiz isso. E eu fiz uma série de mudanças como assim, o mais importante dos quais foi para se trabalhar e-mail porque recall, que este programa se baseou em que geralmente chamado de um e-mail para Gateway SMS, que é apenas uma maneira elegante de dizer que a Verizon, e AT & T e outras pessoas suportar um servidor, pelo qual se recebe e-mail, ele converte para SMS e envia um texto mensagem para o telefone de alguém. Então, se eu fiz isso corretamente, aqui é uma forma nova e melhorada que vai falar com nova e melhorada de código, que você pode jogar on-line. E espero fazer o meu beep telefone em apenas um momento. Então, primeiro, eu vou digitar meu nome. Em segundo lugar, eu não vou ao fazer isso neste momento. Eu vou fazer Inspect Element. E este é apenas um pouca coisa para que eu não faça criar horas de pós-produção trabalhar como eu fiz da última vez. Existe agora o meu número de telefone. Vou selecionar Verizon. E aqui, vamos ligar o microfone aqui, e procurar isso no meu celular aqui. Vou clique em Register, esperemos que deverá colocá-lo no banco de dados. Agora eu estou indo para ir para o programa de linha de comando, que recall foi chamado barra dot texto, e cruzar os dedos. Aqui vamos nós. [DINGS TELEFONE] [Aplausos] DAVID MALAN: Então, mais divertido do que isso- é divertido, é claro, se eu chegar a ele. Mas é mais divertido, eu pensei que, se nós criado um daqueles momentos de cinema onde como algo realmente ruim aconteceu no mundo, e como todas as pessoas da NSA celulares começar a apitar com mensagens de texto alertando-os para esse facto. Então eu pensei que iria tentar para recriar o mesmo aqui, em que não estiver usando um banco de dados, I em vez de antecedência escreveu um programa que se parece com isso. Esta é uma index.php-- e eu coloquei este código on-line como bom-- que aparentemente apenas torna form.php, usando um paradigma de estilo MVC que nós falar com mais detalhes no conjunto de problemas Sete. Esse formulário é bastante simples. Ele vai se submeter a uma arquivo chamado here.php via post. E isso, aparentemente, vai pedir por um nome e um número de telefone, e, em seguida, através da assim-chamada Selecione o menu, é vai dar-lhe pelo menos quatro operadoras de celulares populares dos Estados Unidos, e, em seguida, permitir que você efetivamente levar atendimento clicando aqui. E aqui, enquanto isso, vai emprestar alguns dos códigos da última vez. E se você apenas roçar isso, você vai ver que não há um monte de verificação de erros. Mas a beleza no fim é que nós não estamos escrevendo para um banco de dados hoje. Nós estamos mantendo-o simples e apenas o envio de espera uma mensagem de texto via função I escreveu sobre o passado poucos dias chamada Texto, que está em funções. php, que é novamente disponível online. Então, se você gostaria de participar desta. Nós não vamos ser armazenar nada. Ir para este URL aqui em tempo real. Não apresentá-lo ainda, mas vamos ver se podemos ter um destes filme momentos em que o celular de todo mundo começa a apitar, espero apenas uma vez este ano, ao contrário, em 2011 onde esta deu terrivelmente errado. E uma vez que você vá para esse endereço, você deve ver uma forma super simples que se você tem um nome, um telefone celular número, e um veículo que telemóvel corresponda à lista de lá, vá em frente e preencha o formulário. Mas não bateu apresentar ainda. O formulário está indo olhar como este. Vá em frente e digitar seu nome, número de telefone. Oop, alguém vai à frente da curva. Está certo. OK, todo mundo está preenchido o formulário. Isso deve funcionar em um telefone, também, se você quiser. Tudo bem, em suas marcas, preparar, vai. Bata Aqui. O quê? Não. Eu juro por Deus, eu testei isso várias vezes hoje. Você entendeu? [Interpondo VOZES] DAVID MALAN: OK, talvez o erro do usuário. Isso é dois. Ele trabalhou por dois em cada uma algumas centenas, três, quatro. OK, isso é bom. Quatro de cinco para exatidão como sobre. Então o que aconteceu? Assim, presume-se, sem ver o seu telas, por que ele pode ter com erro? É, provavelmente, que estávamos apenas tentando fazer muitas conexões ao servidor de correio de Harvard, tudo ao uma vez que a partir do mesmo endereço IP. Eu estou apenas adivinhando já que eu não fiz tem o luxo de testes este código com alguns 300 pessoas de antecedência mas por agora perceber que que, pelo menos, deve ter começado o trabalho feito neste momento. Tudo bem, então por que tudo isso é o mais pertinente para o que está acontecendo? Bem, primeiro, uma rápida par de anúncios. Então um, se você gostaria de se juntar Chang, e Nick, e outros no almoço desta sexta-feira, fazer de RSVP na URL de costume lá. Se você está pensando em se concentrar ou fazendo um secundário no CS, se você é um estudante de segundo ano, ou calouro, ou mesmo júnior ou sênior neste momento e ainda pode espremer nos cursos, perceber que a escola de engenharia está recolhendo gratuitamente Ben e Sorvete de Jerry eo conselho esta quarta-feira logo após a aula em 4:00 no edifício CS Maxwell em Dworkin. Se esta for muito rápido na tela, basta ir para cs50.harvard.edu para uma link para o evento no Facebook onde você pode ver mais detalhes. Enquanto isso, eu pensei que eu iria corrigir uma outra coisa que eu gozado na quarta-feira. Acontece que ID de Marcos no Facebook não tinha três anos. Ele tinha quatro anos. Acontece que ele tinha mais teste contas do que me lembro. Mas o que esta me senti como uma oportunidade a fazer é puxar uma URL como esta. Assim, verifica-se que o Facebook tem uma API, Application Programming Interface, que é um mecanismo através do qual você pode solicitar dados programaticamente no Facebook e voltar máquina informações legíveis, e não páginas web mas apenas o texto cru, algo chamado de JavaScript Object Notation. E, de fato, se eu visitar esta URL, e ampliar, por padrão, este é Marcos publicamente informação acessível. E o detalhe interessante aqui é apenas que o seu ID é, de facto, o número de quatro, que I percebi logo que eu fiz isso. Você pode fazer isso sozinho, se você sabe seu nome de usuário do Facebook, se você tiver um. Basta digitá-lo em cima lá. E nada disso é privada. Eu só estou fazendo isso mesmo no modo de navegação anônima. Então eu não estou mesmo logado. E você está vendo que eu aparentemente era o número de usuário 6454 no Facebook, o que não é muito ruim esses dias. Então, de qualquer forma, você também vai ver informações adicionais lá. E o aspecto útil de que é que você pode escrever seu próprio software que de alguma forma, integra dados como este em sua própria aplicação. Você pode capacitar os usuários para registrar em seu site, não usar seu próprio nome de usuário personalizada e senha, mas talvez o seu login do Facebook e obter informações mesmo sobre os seus amigos, se eles aprovam tal, ou similar. Assim, note que CS50, também, tem algumas de suas próprias APIs, um para os dados do catálogo curso, alguns dos menus abraços no jantar salões, todos do edifícios e locais no campus, temos uma API para bem que você pode consultar de forma semelhante e obter dados textual de volta que você pode integrar em um PHP ou JavaScript, ou até mesmo, embora menos comum, uma C baseada projeto final. Na verdade à frente para a final projeto são alguns marcos. Você tem um e-mail no outro dia. Perceba que a proposta é devido esta próxima segunda-feira. Não é necessariamente obrigatório, mas você precisam receber seus companheiros de ensino aprovação antes de fazer Quaisquer alterações posteriores. E, em seguida, à frente são um número de outros marcos. Então, para provocá-lo, também, com algumas possibilidades, nós temos um monte de estas lâmpadas matiz. E alguns de vocês já têm algum destes em seu quarto do dormitório também. E eles também têm uma API. Assim recordar aquelas semanas lâmpadas binários atrás que Dan Bradley e Ansel Duff criou para nós. Eles usaram uma interface de software para esta lâmpada, que no momento está conectado à energia elétrica e, em seguida, via wireless está ligado a uma pequena coisa chamado a Ponte aqui em baixo, como um pequeno proprietário router para este dispositivo em particular. Mas acontece que se eu sei como enviar mensagens de HTTP, como todos nós fazemos agora, Posso enviar uma mensagem como esta para esta lâmpada para ligá-lo ou desligado ou fazer qualquer número de outras operações sobre ele. Observe que não é chegar, não é postar. Há um outro chamado put. Na verdade, há algumas outras tais verbos. Mas repare que há um caminho de lá, reduzir API, slash novo colaborador, cortar a luz, cortar uma, barra de estado. Isso é, aparentemente, apenas o caminho que a empresa, Philips, decidiu que você tem que bater com uma solicitação HTTP se você quiser alterar o estado da lâmpada com a utilização de HTTP 1.1. Em seguida, observe a linha em branco. E então, finalmente o que parece ser tipo de uma matriz de alguma sorte, isso de novo vai ser chamado JavaScript Object Notation, ou Jason. E o que você vê aqui é que há três pares de valores-chave. Uma chave é chamado. E seu valor aparentemente vai ser verdade. O brilho é de 128, o que é algum tipo de int. E então o tempo de transição é zero, o que é aparentemente quanto tempo ele vai necessário para transformar essa coisa. Então, agora esta lâmpada está apagada. Mas, se eu faço exatamente isto-- deixar me ir para uma folha de fraude pouco que Dan criada em advance-- e eu vou para ir em frente e copiar o comando a seguir. Curl, como alguns de vocês poderia ter recolhido em CS50 Discutir é um utilitário como o Telnet, tais que você pode simular as solicitações HTTP, especificamente coloca. Eu posso enviar esses dados, especificamente o que acabamos de viu um momento atrás especificamente para este URL aqui. E depois da onda está indo para lidar com todos os cabeçalhos necessários e análise de lá. Então, tudo o que tenho a fazer é copiar este em uma janela de terminal e, em seguida, pressione Enter. E a lâmpada acende. E tudo isso é passando por meu computador sem fio de alguma forma para a ponte, que é, então, a falar com esta lâmpada. Eu posso fazer outra coisa. Eu posso fazer essa coisa vai o vermelho, por exemplo. Eu posso, por exemplo, fazer essa coisa de ir verde. Eu posso fazê-lo ir azul. E observe em cada uma delas casos, tudo o que eu estou mudando é o chamado valor de tonalidade de realmente dar-lhe um pouco de cor. Então deixe-me colar este em bem. Agora é azul. E você pode fazer ainda mais chique coisas where-- vamos para verde. E eu poderia fazer isso de Claro que com o meu próprio código. Mas até mesmo a própria API suporta operações de funky como este, que agora vai se preocupar nos para os próximos 30 segundos. Então essa é uma amostra do que você pode fazer com uma API, desta vez envolvendo lâmpadas. Note que CS50 tem um casal pares de Google de vidro se você gostaria de abordar algo ao longo essas linhas, Arduino Unos, que são computadores minúsculos pequenos, essencialmente, em uma placa de circuito pequena que você pode se conectar fios e outras coisas e, na verdade, para o controle seu ambiente de mundo real. E então há um par de novos brinquedos que temos. Esta literalmente apenas chegou a Outro dia, por correio, um Myo Armband. E eu pensei que é uma forma de você animado sobre projetos que você pode usar com este hardware faria ser para jogar este pequeno clipe que eles usam para burlar pessoas que estamos agora a viver no futuro. [Música tocando] DAVID MALAN: Então, em apenas algumas semanas, você também pode ser que legal na feira CS50. Outro dispositivo que nós tem um monte de que estamos feliz para emprestar para projetos é chamado um controlador de movimento. Este é um dispositivo USB pouco você se conecta a um computador que permite que você interaja com seu laptop, Mac ou PC, como se você tivesse como um Xbox Kinect e realmente fazer movimentos físicos muito como podemos ver neste visão de futuro. [Música tocando] DAVID MALAN: Então, mesmo se você tiver nenhuma idéia de como algo assim poderia ser possivelmente inventado ou trabalho em um nível de hardware, não importa. Mesmo depois de apenas alguns meses de CS50, e uma compreensão de programação mais geral, e programação web mais recentemente, e depois também APIs, e HTTP, você terá acesso via APIs de software se você quero pedir uma delas dispositivos para realmente falar com ele e não precisa se preocupar com a implementação subjacente detalhes, o qual é completamente consistente com a noção de estratificação uma abstração que temos visto ao longo do semestre. Assim também no fim de semana, vi algumas peças de notícias. Vá primeiro, ir a seminários se gostaria de aprender algo mais em qualquer número de tópicos. Consulte o URL lá. E este foi enviado para me por Chang, que você sabe, quem está a imprimir o nosso exército de elefantes. E foi uma manchete como se segue. Eu tenho pavor da minha nova TV. Por que eu estou com medo de transformar este coisa e você estaria muito. Então, nós estamos agora no apontam no semestre, também, onde mesmo se você tiver a menor de entendimento de como a web funciona e HTTP, e de segurança, coisas como esta deve começar a chamar sua atenção. Mas também, você vai entender se estas coisas são ou não ameaças reais. Então eu peguei alguns trechos a partir deste artigo aqui. E a história é a seguinte. Agora sou o dono da uma nova TV inteligente, que promete entregar streaming de conteúdo multimídia, jogos, app, mídias sociais e internet navegação, oh e TV também. O único problema é que eu sou agora medo de usá-lo, diz o autor. Você seria, também, se você ler a política de privacidade página 46 para a TV. A quantidade de dados esta coisa que coleciona é impressionante. Ele registra onde, quando, como e por quanto tempo você usa a TV. Estabelece cookies de rastreamento, como já discutimos, e beacons projetado para detectar quando você tem determinado conteúdo visto ou uma mensagem de e-mail especial se você quiser verificar e-mail no seu televisor. Ele registra os aplicativos que você usar, os sites que você visita, e como você interage com o conteúdo, fazendo tudo que via a sua TV inteligente. Também, yet-- creepier essa é a minha addition-- tem um construído em câmera com reconhecimento facial. O objectivo consiste em fornecer controle por gestos para a TV e permitem que você faça o login para personalizado conta com o seu rosto. No lado positivo, as imagens são salvos na TV ao invés de carregado a um servidor corporativo. No lado negativo, a internet conexão faz com que toda a TV vulneráveis ​​a hackers que têm demonstrado a capacidade para assumir o controle total da máquina. Mais preocupante, como se isso não fosse inteligente o suficiente, é o microfone. A TV possui uma voz recurso de reconhecimento que permite aos espectadores controlar a tela com comandos de voz. Mas o serviço vem com um aviso bastante sinistro. Por favor, esteja ciente de que se suas palavras faladas incluem pessoal ou outro sensível informações, que a informação estarão entre os dados capturados e transmitida a um terceiro. Entendeu? Não diga pessoais ou confidenciais coisas na frente da TV. Portanto, este é, na verdade, de verdade. E é difícil não ver se você ir para a Best Buy ou similares para TVs nos dias de hoje. Eles são todos inteligentes de alguma forma. E eles estão recebendo mais inteligente e mais assustador. E eles estão simplesmente a coleta de dados de maneiras que nós falamos sobre e, em seguida, enviá-lo via HTTP ou algum outro protocolo para algum servidor. Portanto, este foi de um artigo de diversão neste site on-line aqui, que falou sobre a especial bug ou código equivocado que podemos realmente amarrar para discussão da semana passada. Portanto, este título era como segue, a história se passa aqui, Josh Breckman trabalhava para uma empresa que conseguiu um contrato desenvolver uma gestão de conteúdos sistema, ou CMS como são chamados, para uma bastante grande site do governo. Grande parte do projeto envolveu desenvolvimento de um sistema de gerenciamento de conteúdo para que os funcionários seriam capaz de construir e manter a constante mudança conteúdo para o seu site. As coisas correram muito bem para poucos dias depois de ir ao vivo. Mas no sexto dia, as coisas não foram tão bem. Todo o conteúdo no site tinha desaparecido completamente. E todas as páginas levou ao padrão, por favor entrar na página web de conteúdo. Whoops. Josh foi chamado para investigar e notei que uma particularmente problemático endereço IP externo teve ido e excluídos todos o conteúdo no sistema. O endereço IP não pertencia para alguns no exterior hackers dobrado em destruir útil informações do governo. Ele resolveu googlebot.com, Muito própria aranha do Google web rastreamento. Whoops. Depois de um pouco de pesquisa e lutando em torno de encontrar um backup noncorrupt, Josh encontrou o problema. Um usuário tinha copiado e colado algum conteúdo de um página para outra, incluindo um Edit Hyperlink para editar o conteúdo da página. Normalmente isto não seria um questão, uma vez que um usuário faria fora necessário digitar um nome e uma senha, mas o sistema de autenticação CMS, o sistema de login, não levou em conta pirataria sofisticado técnicas de Google Aranha. Whoops. Como se vê, o Google A aranha não usar cookies, que significa que ele pode facilmente contornar um cheque para a é registrado no set cookie para ser falsa. Também não prestar atenção a JavaScript, que normalmente solicitar e redirecionar os usuários que não está logado. Isto, contudo, seguir cada hyperlink em cada página que encontra, incluindo aqueles com Excluir página no título. Whoops. Então o que é que isto significa em mais termos técnicos, mas bastante acessíveis? Significa apenas que em todo o seu site, eles tinham URLs não muito diferente deste que você pode ver no conjunto de problemas sete. Lembre-se no conjunto de problemas de sete ou conhecem em conjunto de problemas de sete que você está desafiado, entre outras coisas, para vender ações em nome dos usuários. Mas a implementação desse recurso por meio de obter através de hiperlinks em seu usuário interface, provavelmente não a idéia mais inteligente porque se o site é de alguma forma acessíveis, quer por um ser humano quem está clicando em torno ou comprar um bot como o Google ou a Spider como são chamados isso é apenas rastreamento da web tentando índice a web como um motor de busca, que podiam muito facilmente atingido através de obter este tipo de URL. E isso é funcionalmente equivalente a, neste caso, venda de todas as ações da Google. Agora, francamente, é completamente asinino que o CMS Usado JavaScript e os cookies para implementar o seu sistema de login e não fazendo isso do lado do servidor, como vocês fazem e vontade em PSet 7-- há uma login.php file-- sempre, sempre, sempre a segurança deve ser feito no lado do servidor, não no lado do cliente, porque, como esta artigo sugere que você pode e você mesmo ver, em algum momento, é trivial para um usuário, bom ou mau, para simplesmente desligar JavaScript para não falar de cookies. Então essa é a sua WTF diária. Há mais um, que é apenas um pouco assustador, então eu vou falar que se apenas como uma lição de vida. Sempre que você usar um aplicativo chamado como Snapchat ou similares que diz que essas fotos só duram cinco segundo, dez segundos, ou outros enfeites. Eles são efêmeras que é absolutamente não é o caso. Como não há nenhuma maneira, digitalmente, para implementar alguma forma de vídeo, ou imagem, ou textual compartilhar tais que um receptor na outra extremidade não pode de alguma forma salvar os dados. Na forma mais ingênua, alguém poderia tomar o seu telefone. E eles têm uma segunda janela 10 enquanto olha para alguma pressão apenas tomar algum outro telefone e fotografá-lo, obviamente. Assim, você pode preservar algo digitalmente dessa forma. Alguns de vocês sabem como tomar screenshots do seu telefone. Na verdade, se você não sabe isso, perceber que, pelo menos, Snapchat, e eu acho que outro aplicações nos dias de hoje, pelo menos dizer se a destinatário tem, na verdade, tomado um screenshot de sua imagem. Mas pior ainda, esta foi a snappening, como alguém cunhou recentemente, onde alguns 100.000 snaps tinha sido liberado no que é chamado um arquivo torrent em vários sites, em última instância. E estes continham um grupo inteiro de mensagens privadas e posts. Acontece que a maioria delas benigna, por isso não é o que você poderia esperar. Mas porque as pessoas tinham utilizado um site de terceiros, fazer login com sua Snapchat nome de usuário e senha e, em seguida, salvar todos os seus snaps neste site de terceiros. E foi esse terceiro site que foi hackeado, que só quis dizer que alguém descobriu como para obter todos os 100.000 mais dessas imagens em seu próprio disco rígido para compartilhamento posterior. Francamente, aqui também, é uma espécie de asinino que Snapchat é implementado de tal forma que um terceiro pode classificar de interceptação os dados e que não está ligada à sua próprio aplicativo em execução no telefone. Mas aqui, também, perceber que estes as coisas não devem pegar você de surpresa, ou pelo menos não deveria ser uma lição de vida aqui. Se você gostaria que o técnico detalhes, vá para a URL lá que está em lâminas de hoje. Tudo bem, qualquer dúvida sobre lições de vida de hoje no CS? Desligar isso. Qualquer coisa em tudo? Qualquer coisa em tudo? Eu tenho um monte de gente verificação sua Snapchat ou algo agora. Tudo bem, então SQL, Structured Query Language. Vamos acabar com isto. E também, mesmo que estamos apenas arranhando a superfície desta linguagem, nós vamos dar-lhe suficiente da língua sob a forma de PSet 7 de modo que você pode enfrentar alguns funcionalidade bastante comum. Mas percebo que há um casal coisas que não exigem de você, mas eles estão indo para ser importante vir projetos finais e, certamente, vêm tornando real sites com usuários reais É esta decisão design. Acontece que em um banco de dados MySQL, você ter cachos de opções como os tipos de dados para as colunas e outras coisas, mas você também tem a escolha de um assim chamado armazenamento motor para todos os seus dados, o tipo de sistema de arquivos, se você está familiarizado, para todos os seus dados. O formato é em última análise, armazenados em? E o mais comum, talvez, tem sido MyISAM e InnoDB, termos técnicos que se preocupam com apenas na medida em que tem um e não se tem o seguinte recurso. Suponha que você tem um pequeno frigorífico dormitório. E suponha que você e sua companheiro de quarto, que compartilham este frigorífico, são realmente gostava de leite por exemplo. E este é, de facto, como o história foi contada para mim caminho de volta no dia em que eu fiz um curso chamado CS 161 Sistemas Operacionais, que similarmente explora este tema. Então você tem este frigorífico. Você está fora de leite. E você chegar em casa, seu colega de quarto de ainda na classe ou qualquer outra coisa, e você decidir eu vou sair e conseguir um pouco de leite. Então você fecha a geladeira, bloqueio quarto do dormitório, atravessar a rua a CVS ou onde quer, e obtenha na fila para comprar um pouco de leite. Enquanto isso, seu companheiro de quarto chega em casa de classe, fica em quarto do dormitório, abre a geladeira, também percebe ooph, estamos fora de leite. Então ele ou ela fecha a geladeira e, em seguida, acontece para ir para o outro CVS, que passa a ser um quarteirão de distância das outras CVS na praça, e entra na fila lá para obter um pouco de leite. Agora, é claro, em alguns minutos mais tarde, você tanto voltar, eo pior de tudo é possível resultados que aconteceu. Você tem tanto de leite. E você realmente não como o leite que muito. Então, um deles é apenas vai azedar em algum ponto. Então agora você tem uma quantidade excessiva de leite na geladeira, pois tudo por quê? [Inaudível] DAVID MALAN: Sim, você não fez alguma forma comunicar uns com os outros que estavam recebendo leite. Assim, no mais simples dos maneiras no mundo humano, como você pode evitar essa bobagem cenário aconteça tal que você só acabar com um. Texto-los, sim bom. Mas de que outra? Post-it. DAVID MALAN: Um Post-it. Qualquer forma de comunicação que diz ao seu companheiro de quarto não ir para a geladeira para o leite. Eu estou indo para ir reabastecer em meu próprio. Então você precisa de alguma forma para bloquear este recurso. Assim, podemos fazer isso- pudermos tipo de arruinar a história e se transformar em uma história de CS em que pensar nisso como apenas como um variável, que é o armazenamento de algum valor. E agora, o valor do leite é zero, que você não quer que seu companheiro de quarto para inspecionar essa variável e depois tomar uma decisão si mesmo com base no estado da variável se você estiver no processo de alterar o estado dessa variável. Portanto, uma das linhas de SQL que dar-lhe em PSet especificação 7 é este aqui. E nós não gastar uma enorme quantidade de tempo falando sobre isso. Mas acontece que, se você está tentando para comprar algumas ações em CS50 finanças que você já tem algumas partes de você quer ser capaz de fazer uma série de coisas juntos instantaneamente. Você quer ser capaz de efetivamente, em um nível elevado, verificar tudo bem, se eu quiser para comprar mais ações da grátis, o que penny stock falar na especificação, Quero primeiro cheque quantas ações eu tenho. E suponho que é de cinco anos. E suponha que eu quero comprar mais 10, eu, em última instância quer ter 15 partes de estoque. Então eu tenho que fazer duas perguntas. Qual é o estado da variável? Qual é o estado da linha? Quantas ações eu tenho atualmente? Então você quer ir em frente e atualizá-lo. Então esse é o analógico para o leite em que você verifique a linha, e então você quer atualizá-lo porque se você quiser comprar 10 ações, você não quer mudar a linha a 10, você quer mudá-lo para 5 mais de 10 ou, é claro, 15. Esta linha de código garante que estas duas ideias conceptuais acontecer junto ou não em todos. Ninguém, incluindo algum outro usuário quem está conectado no mesmo site, de alguma forma pode interromper a verificação da linha ea atualização da linha, a selecionar ea atualização se você quiser. E a sintaxe não é super óbvio, mas esta linha, tempo é o que é, Assegura que as duas operações verificar a variável ou verificar a linha e atualizar a linha acontecer atomicamente. Oh, aqui vamos nós de novo. Mensagem de texto no meu celular. Então, vamos fazer deste um pouco mais concreto. Suponha que você não está implementação de uma geladeira, e você não está implementando PSet 7, mas um banco real, ou um caixa eletrônico, um caixa automático Machine, em que você de alguma forma quero ser capaz de capacitar que os usuários transfiram dinheiro a partir de uma conta para outra. OK, espere. Eu vou silenciar isso agora, obrigado. Por isso, queremos movimentar dinheiro a partir de um número de conta em uma conta diferente número, especificamente de $ 100. Portanto, esta é uma espécie de arbitrário exemplo, em que você, a ATM, pode querer executar dois SQL consultas, subtrair de uma conta, e adicionar a outra conta. Mas você quer garantir que estes duas linhas, tanto acontecer ou não em todos. Você não quer algo ficar interrompido. Você não fazer alguma má cara inteligente de alguma forma, de pé no Bank of America com dois caixas eletrônicos em frente dele e de alguma forma tipo de digitação no comandos ao mesmo tempo, espero tentando deduzir 200 dólares, em vez de US $ 100 e ter apenas 100 dólares creditados. Em suma, você quer que isso comportam-se exatamente como você espera. E a maneira de fazer isso em SQL banco de dados é você envolvê-la no que é chamado de uma transação. Literalmente em SQL, você pode chamar de CS50 função de consulta com Citação início unquote transação. Em seguida, você pode executar qualquer número de consultas SQL subseqüentes, mas nenhum deles ter efeito sobre o banco de dados até que você chame consulta entre aspas comprometer-se novamente usando PHP. E, desta forma, você pode garantir que mesmo se você tiver 1.000 usuários todos bater seu banco de dados ao mesmo tempo, o SQL prometo que estes duas consultas serão implementado um logo após o outro. Então você não acabar com o excesso de leite ou a quantidade errada, em última instância, de dinheiro. Portanto, manter isso em mente, não tanto para PSet 7 mas para projetos finais se você é realmente tentando mover os dados através de tabelas como você pode aqui. Mas talvez ainda mais simples e mais óbvia para entender com um exemplo é este aqui. E alguém tiver falado sobre isso só no outro dia quando ele viu algo semelhante online. Então, para meu conhecimento, o sistema de pino não é vulnerável a este ataque. E eu não tenho idéia se ele mesmo os usos o banco de dados SQL debaixo do capô. Mas vamos usá-lo para a causa da discussão. Aqui é a tela que Pessoas tendem Harvard para ver quando efetuar o login com o seu Número Harvard ID e seu pino. E suponha que o sistema de pinos foram implementado em PHP e com um MySQL banco de dados, o código que alguém anos poderia ter escrito atrás pode ter esta aparência. Primeiro, declare um chamada variável username. E só começar a partir de o superglobal POST. Em seguida, obter uma outra variável chamado senha e fazer o mesmo. E depois é só executar esta longa consulta aqui, selecione estrela dos usuários ONDE nome de usuário é igual a tal e tal ea senha é igual a tal e tal. Observe que o encaracolado chaves eu usei aqui significa apenas para PHP, ir frente e substituto o valor dos dois variáveis ​​ali mesmo. Eles não são estritamente necessários, mas eles tendem a evitar erros de sintaxe sutis. Então, isso parece completamente correta à primeira vista. E é. Você poderia implementar o sistema de pinos desta forma. Mas suponhamos que um super aluno inteligente e malicioso input este como seu pino. Então eu removi a bala sinais aqui no mock-up, e eu realmente revelado o que ele ou ela pode ser de digitação. E é um pouco estranho. Mas o que salta à vista na potencialmente preocupante sobre a entrada do usuário, mesmo se você não tem idéia do que um ataque de injeção SQL significa. Por que isso parece um pouco suspeito? O que é isso? [Inaudível] DAVID MALAN: A ou é um pouco suspeito. Na verdade, isso é uma palavra-chave de SQL. Então, isso não augura nada de bom. O fato de que há todas essas aspas simples há-- de fato, um dos mais fáceis maneiras de quebrar alguns bancos de dados é digitando um nome como O'Reilly que tem um apóstrofo nele porque se o ser humano que escreveu o código por trás das cenas não leva em conta que há pode ser aspas simples em um usuário de entrada, e ele ou ela está usando aspas simples no seu código, coisas ruins podem acontecer. Na verdade, pior ainda, considerar isso. Se esta foi mais uma vez o código que alguém no ano de Harvard atrás escrevi para o pin sistema, observe o que é prestes a ser substituído nome de usuário e senha se o usuário digitar novamente skroob como seu nome de usuário e, em seguida, um, dois, três, quatro, cinco, Citação ou entre aspas um igual citar um. E observe o que é fundamental aqui é o usuário não começou a sua senha ou o pino com uma citação. E não terminou com uma citação porque ele ou ela é assumindo que se o programador não era tão acentuada, eles vão ter aqueles aspas simples no seu código. Então, aqui está o código. E que a substituição agora pode acontecer é isso. E eu tenho sublinhado que o usuário digitou no. Então, antes, depois. E observe o que é ligeiramente preocupante agora sobre a metade direita deste código SQL? É um pouco mais complexo, é certo, que as consultas que já vimos. Mas isso não pode, possivelmente, ser uma coisa boa se você estiver dizendo selecione estrela, que é selecionar tudo da mesa do usuário onde username é igual skroob e senha é igual a um, dois, três, quatro, cinco ou um é igual a um. Qual é a implicação lógica de que a última cláusula presumivelmente? É só sempre é verdade. E porque nós temos uma espécie de adivinhou ou descobri por tentativa e erro que o programador que escreveu este código não antecipar uma pessoa humana ou ruim escrevendo entre aspas simples, bem como, podemos sintaticamente concluir a consulta SQL com algo sem sentido mas algo que é sintaticamente incorreto que sempre avalia a verdade. Portanto, se esse código está sendo usado para responder a questão verdadeira ou falsa deve esse usuário permissão para passar, o resposta é sempre, aparentemente, vai para ser verdade, porque isso sempre vai para selecionar algo do banco de dados porque um é claro, sempre é igual a um. Então, qual é a solução? Bem em PSet 7, nós realmente evitar tudo isso junto. Damos-lhe uma função de consulta, e nós incentivá-lo a usar pontos de interrogação como marcadores de posição, semelhante em espírito à de printf% s, mas o que é importante sobre os pontos de interrogação aqui é se você realmente ler functions.php, onde a nossa função de consulta for implementada, esses pontos de interrogação são escapou, em que nada potencialmente perigoso como uma única citação está ligado em uma única citação escapou. Então, isso é o que é realmente está acontecendo, se você utilizar a função de consulta do CS50 ou qualquer número de terceiros bibliotecas livres que fazer o mesmo. Não importa, neste caso, em verde, se o usuário tiver digitado em uma única citação porque a consulta função que escrevemos é indo para adicionar barras invertidas antes qualquer citação tão perigosa. Portanto, este não é, de verdade, vai ser legal. Isto é como digitar um louco procurando senha que é, é claro, não vai ser real senha da skroob. Assim, o takeaway para CS50 é um, absolutamente sempre usar algo como função de consulta do CS50 ou a biblioteca subjacente, que passa a ser chamado de PDO. Mas nunca, nunca, nunca fazer um código como este sem escapar ou esfregar como dizem seus insumos. E você, em algum momento, provavelmente, se deparar com algum site como este. De facto, parece ser o caso como em aeroportos e hotéis em lugares onde eles têm acesso Wi-Fi acesso que você precisa se logar para, esses sites são sempre horrivelmente implementadas. E assim, uma espécie de divertimento em casa exercício, não para fins maliciosos ou mais de um divertimento na estrada exercício, é só digitar um apóstrofo, aspas simples, em um formulário em algum site e ver o que acontece. E se o servidor trava ou dá você algum tipo de mensagem de erro, ele pode muito bem ser que alguém não tenha previsto isso. E então você deve alertar o bom autoridades e ir adiante. Então agora vocês devem espero entender um pouco mais humor do geek aqui. [Risos] DAVID MALAN: Você sabe que você é um geek. Para a próxima vários anos, você vai se lembrar mesinhas que Bobby é por causa deste desenho animado aqui. Portanto, manter isso em mente ao mudança de contexto uma última vez hoje para JavaScript. Passamos relativamente pouco tempo sobre a sintaxe do PHP porque é realmente Super semelhante a C. E bem o suficiente, JavaScript também é super semelhante à sintaxe do C bem como veremos na apenas um momento e como nós vamos veja no final desta semana, em particular. O que você pode fazer com esta linguagem, no entanto, é ainda mais poderosa, especialmente com APIs. Mas, primeiro, um rápido passeio. Então, um, em JavaScript, não há nenhuma função principal, que é bom. Tal como acontece com PHP, você pode apenas escrever código. Condições parecido com este. E expressões booleanas pode parecido com este ou como este. Existem interruptores, e eles pode ter esta aparência. Quatro voltas parecido com este. Enquanto laços parecido com este. Faça whiles parecido com este. E então matrizes parecido isso, muito semelhante ao PHP. Mas note, que em JavaScript você declarar uma variável não com um dólar assinar, não com um tipo de dados, mas, literalmente, dizendo var para a variável antes. Ele também é vagamente digitado na medida em que tem tipos, mas você não declará-los explicitamente. E então uma corda, para exemplo, pode parecer assim, essa string sendo chamado s neste caso. E em seguida, um objecto. E estes, vamos ver mais em pouco tempo. E um objeto é talvez um dos mais comumente visto estruturas de dados baseada em um JavaScript programa porque permite associar arbitrária pares de chaves de valor apenas como matrizes associativas do PHP e, assim como sua própria tabela hash ou tentar, implementamos algumas semanas atrás. Então, vamos ver o que realmente podemos fazer com JavaScript. E, em particular, esta é um rol de características que os navegadores têm que nos permitem ligar JavaScript em um site da seguinte maneira. JavaScript é frequentemente utilizado como um lado do cliente linguagem de script. Não é compilado. Ele também é interpretada. Mas ao contrário de PHP, que foi executado no servidor, no servidor web, ou no fundo do clientes, JavaScript é diferente na medida em que ele geralmente é executado no navegador. Assim, qualquer código JavaScript que você começar a escrever para PSet 8, ou o seu projeto final, ou no mundo real vai geralmente para ser salvo no servidor, absolutamente em um ponto ou um ponto de HTML JS para o arquivo JavaScript. Mas o navegador vai baixar que o JavaScript código a sua própria instância do Chrome, ou IE, ou Firefox, ou o que quer. E o código é realmente vai começar executado dentro de seu próprio browser. Apenas para tornar isso mais real, vamos ver isso de forma concreta. Nós não temos idéia do que este código faz sem realmente ler através dela. Mas deixe-me ir para Facebook.com sem efetuar login. Deixe-me ir para Inspect Element e ir, digamos, Rede e recarregue a página. E nós vamos see-- deixe-me mudar Recarregar o Página para obter todos os pedidos para o novo. E o primeiro arquivo que eu vejo é CSS, CSS. Aqui está a primeira JavaScript arquivo, e eu tenho nenhuma idéia do que isto significa, mas aqui é parte do código JavaScript que impulsiona Facebook. Não é mesmo verdade que revelando para ampliar. Ele ainda é tão sem sentido. Mas você vai ver, mesmo em baixo, há ainda mais desses arquivos JavaScript. Whoops. Isso é um ping. Vamos descer um pouco ainda mais, ainda mais, ainda mais. Há um. Há um. Há um. Assim, mesmo que o Facebook, por trás da cenas, está escrito em parte em PHP e versão própria do mesmo do Facebook, há uma enorme quantidade de JavaScript. Na verdade, qualquer um dos conversando que você faz no Facebook, qualquer uma das atualizações em linha cronograma que acontecer em tempo real, de que todos é conduzido por JavaScript. Sim? AUDIÊNCIA: Eu não tenho certeza se este é o Facebook, mas eu pensei que o Facebook desenvolveu sua própria língua código in-house? DAVID MALAN: Eles fizeram. Então é por isso que eu digo uma variação de PHP chamado Hip Hop que eles realmente recursos adicionais para tal que quando Mark implementado pela primeira vez o Facebook, estava escrito em PHP. E esse tipo de tem-se mantido o tipo de linguagem front-end que eles usam para muito da sua codificação, mas ele não tem sido uma linguagem que é escalas particularmente bem a bilhões de pessoas. E assim eles foram adicionados a sua própria melhorias nos bastidores. E eles usam qualquer número de outras línguas para várias peças de sua infra-estrutura. Então, sim, é uma variação de o que hoje conhecemos como PHP. Então, vamos dar uma olhada em um par de exemplos de como podemos usar JavaScript aqui. No código-fonte de hoje, temos um grupo de ficheiros, o primeiro dos quais, vamos chamado DOM zero. Então DOM de zero tem a seguinte aparência. Deixe-me ir para este diretório e abrir domzero.html, o topo do qual tem um tipo de documento declaração, dizendo que aqui vem HTML 5. E agora aqui está uma tag HTML. Aqui está a tag cabeça. E aqui está o que há de novo hoje. Agora temos uma tag script dentro da cabeça da página. E isso, aparentemente, faz muito pouco, mas aviso que eu tenha definido um roteiro, um JavaScript. E como um aparte, uma vez que este É um equívoco comum, JavaScript não tem absolutamente nada a ver com Java, a linguagem que alguns de vocês podem aprenderam na APCS. Era mais um marketing coisa do que qualquer coisa, montando os coattails de anos atrás Java. Mas JavaScript, nada a ver com Java, apenas de forma semelhante, e irritante, confusamente chamado. Então aqui está como você declarar uma função em JavaScript, literalmente função dizer, em seguida, o nome da função, então qualquer argumentos que poderia tomar, assim como em PHP. Acontece que em JavaScript, um dos mais funções irritantes que existem é de alerta. Esta é uma pequena janela que irá aparecer e alertá-lo a algum pedaço de informação. É geralmente desaprovado. Mas nós vamos usá-lo como nosso primeiro exercício aqui. Observe algumas características do JavaScript. As aspas simples e aspas duplas realmente não importa mais. Aspas simples e duplas citações podem ser trocados, enquanto que em C, você tem que usar aspas para cordas, e você tem duas de solteiro cita para chars. No mundo JavaScript, muitas pessoas, a maioria das pessoas usar aspas simples em torno de cordas só porque é uma coisa estilística. Mas o que é o operador mais aqui, que nós não vimos antes? AUDIÊNCIA: concatenação. DAVID MALAN: concatenação. Então C não tem sequer isso. PHP tem o operador ponto, que faz isso. JavaScript tem o operador de soma, que confusão é como Java. Agora, o que está acontecendo aqui? Então, aqui é onde a base compreensão de que a imagem nós jogamos um par dias entra em jogo. Lembre-se, quando tivemos uma simples versão de um HTML página-- ele apenas disse: Olá mundo. E, então, desenhou uma árvore para a direita, o que tinha um monte de retângulos e linhas conectando-os como uma árvore genealógica. Então essa é a chamada DOM ou Document Object Model. E verifica-se que você pode acessar retângulos em que árvore com sintaxe como a seguinte. Você literalmente dizer documento, que é uma variável global especial em um JavaScript programa que tem uma função associado a ele que você pode acessar semelhante a um struct, mas você simplesmente dizer ponto e, em seguida, o nome da função, obter elemento por ID. O elemento que eu quero chegar é aparentemente citar nome unquote. E então eu quero começar o seu valor. Agora estamos ficando à frente de nós mesmos. Eu nem tenho certeza do que tudo isso é sobre. Vamos avançar rapidamente para o HTML em da página, que é super simples. Observe que eu defini Uma forma aqui embaixo. Repare que eu dei-lhe um único ID, mesmo que não usei este atributo antes. Mas isso existe em HTML. Você pode identificar exclusivamente algum pedaço de HTML com um identificador como este. Observe agora isto-- Acontece HTML apoia, por que rol há pouco, um todo bando de manipuladores de eventos. E esse manipulador de eventos diz em enviar. Sobre a apresentação usuário deste formulário, ligue para o seguinte código. E o código que está acontecendo a ser chamado ou executado é exatamente isso, o grego função seguido de retorno falso. Tudo o resto deve ser bastante familiar. Aqui é uma entrada do tipo texto, cuja ID, neste caso, vai ser nome. Nós não temos um verdadeiro atributo de nome este tempo-- e um botão de envio. Assim, a página resultante se parece com isso. E o comportamento resultante, você vai ver, se parece com isso. A página hospeda locais diz, Olá David, dificilmente um esteticamente agradável maneira de cumprimentar um usuário. Mas o que está realmente acontecendo? Bem, considere o que é isso. Este é um campo de texto. E de acordo com o HTML aqui, eu dei-lhe um identificador exclusivo chamado Citação nome unquote. Enquanto isso, eu disse quando o usuário envia o formulário por pressionar Enter ou clicar no Enviar botão, chamar a função chamada Greet e depois retornar False. Vamos considerar aqueles em sentido inverso. Observe que quando eu clicar em Enviar, o URL desta página não muda. O ícone do navegador não começar a girar. Eu não ir a qualquer lugar, e isso é literalmente, porque eu disse que retornar False. Retorno curto-circuitos falsa ou paradas o comportamento padrão de um formulário. De modo que, em seguida, deixa-nos com esta uma pergunta final. O que Greet fazer? Bem, aparentemente Cumprimente chama uma função chamada Alerta, passa numa longo argumento de que é o resultado da concatenação juntos um bando de substrings, Olá espaço vírgula, então o que quer que isso retorna. Então documento é como um mundial variável para essa raiz dessa árvore, chamar uma função especial, caso contrário, agora conhecido como um método. Uma função que é dentro de uma variável é chamado um método em vez de uma função. Portanto, obter elemento por ID. Que elemento você quero começar pelo seu ID? Citar nome unquote e em seguida, especificamente valorizar. Assim, em outras palavras, que o código simplesmente encontra o campo de texto cujo ID é o nome e depois recebe o seu valor. Então, se eu fosse para alterar esta e dizer Davin em lugar de Davi, e clique em Enviar, agora nós tem uma saudação para Davin. Tudo bem, então tudo bem e bom. Mas vamos ver se podemos fazer esta um pouco mais limpo desde apenas código escrito, como este é geralmente vai ser desaprovada. Isso vai olhar mais assustador. Mas o que é o primeiro diferença que você nota aqui nesta versão, além do nomear mudando para um DOM? O que parece diferente estruturalmente sobre isso contra o outro? Sim? AUDIÊNCIA: É a forma de topo do script agora? DAVID MALAN: Sim, o formulário está no topo do script, por algum motivo curioso. Então essa é a primeira coisa que salta para fora de mim, também. E, felizmente, pelo menos, esta parte é idêntica. Então, a única coisa que parece para ser diferente é esta. Então aqui está o que é puro sobre JavaScript 2. E isso faz com que seja difícil entender à primeira vista, especialmente para projetos finais, se você está olhando para o código de exemplo on-line, mas tudo se resume a alguns características sintáticas básicas. Aqui, novamente, é que documento variável global. Aqui, novamente, é que o método ou a função que diz obter o elemento por ID. Desta vez eu quero obter o ID da chamada de demonstração. Onde fica isso? Isso é aparentemente certo aqui, o próprio formulário. E agora notar que, aparentemente, se eu receber de volta esse nó da árvore que representa a forma em si, não é um campo de texto, verifica-se que forma, que nó ou retângulo da árvore, tem o que chamaremos de uma propriedade, muito, muito, muito semelhante em espírito a um struct em C. É apenas um membro de dados dentro deste retângulo. Então eu tenho a forma aqui, e eu estou anexando, ou eu estou atribuindo, a sua em Enviar manipulador ou melhor, em Enviar propriedade a seguinte função. E este é, de longe, o mais louco coisa, até agora, sintaticamente. Acontece em JavaScript e em PHP e, sinceramente, para que o assunto em C, mesmo que não faça isso, você pode adicionar sem nome, anônimo, ou AKA lambda funções que não têm um nome mas pode ser chamado assim. Então o que eu estou fazendo aqui é que eu estou atribuindo Por esta Enviar propriedade, que É dentro deste nó de minha árvore DOM, um função, a função de ponteiro se você quiser. Essa função não tem nome, mas que não faz importa, porque vamos ver em um momento como chamá-lo. Quando esta função é chamada, este código é executado, então false é retornado como antes. Mas observe o que eu fiz. Neste ponto no história, eu tenho um formulário. Ele tem uma identificação única chamada de demonstração. Aqui em baixo, eu tenho uma tag script que executa o código a seguir. Ele atribui a esse nó a árvore é em Enviar propriedade esta função aqui. E, assim, por natureza, de como os navegadores funcionam, quando eu clico agora Enviar ou pressione Enter, que a função vai ser pago. Ela não precisa de um nome, porque quem diabos se importa com o que é chamado. A única vez que nunca vai chegar chamado é quando eu enviar o formulário. Não há nenhuma necessidade para mim, o desenvolvedor humana, realmente chamá-lo em qualquer outro lugar. Agora apenas como uma provocação, como se isso não foram ocupar dobrar o suficiente, podemos até mesmo fazer isso olhar com mais enigmática uma biblioteca super popular chamado jQuery. Na verdade jQuery e JavaScript são muitas vezes confundidos. E o que vamos fazer na quarta-feira é início usando esta linguagem e essas bibliotecas para construir cada vez mais assíncrona e aplicações dinâmicas como mapa recebendo aplicações, aplicações que atualizar a página da Web em tempo real tempo, muito parecido com o Facebook ou Gchat fazer, e não nos limitar a que bate Enviar por um get ou apenas pós sozinho. Então eu vou te ver na quarta-feira. [Música tocando]