[Powered by Google Translate] [Semana 9]
[David J. Malan - Harvard University]
[Esta é CS50. - CS50.TV]
Tudo bem. Bem-vindo de volta. Este é CS50, e este é o início da semana 9.
Hoje, em particular, o design, não mais no contexto de C
mas no contexto do PHP e um pouco de SQL e um pouco de JavaScript,
particularmente para um fim de ambos pset 7 e também o seu projeto final.
Na verdade, se você está naquele ponto em seu projeto final
onde presumivelmente a partir de uma hora atrás, você pelo menos começou a dar algum pensamento
ao seu projeto final e você está pensando que você gostaria de colaborar com um ou dois colegas,
se você está tendo problemas para se conectar com colegas de classe disse,
sinta-se livre para preencher o formulário em cs50.net/partners/form.
Ele só pede que você que você é, o tipo de projeto que você está pensando,
onde você vive apenas por razões logísticas.
E então, se você quer manter um olho em durante a próxima semana ou assim que a URL planilha lá,
então você pode ver uma versão somente leitura do documento do Google
em que estamos coletando essas informações.
Então, se você quer trabalhar com alguém, por todos os meios se sentir livre para chegar às pessoas
através deste mecanismo.
Mas a maioria das pessoas fazem trabalho solo. Isso é totalmente bem.
Portanto, não sinto que esta é de forma alguma obrigatório.
Na sexta-feira era só eu e alguns da equipe aqui,
teatro vazio para a maior parte.
Foram três turistas sentado lá em cima, de modo que foi um pouco estranho.
O que nós falamos foi sobre bases de dados e nós conversamos sobre pset 7 um pouco.
E se você não aconteceu para pegar aquela em vídeo ainda, isso é bom.
Vou tentar definir os termos que, de outra forma ter concedido
com base em palestra de sexta-feira.
>> Mas hoje nós estamos indo para tentar chegar ao ponto
de não apenas ser capaz de fazer algo assim pset 7
mas realmente entender o que está acontecendo debaixo do capô,
particularmente algumas das abstrações que nós colocamos no lugar do arquivo functions.php
para fazer a sua vida um pouco mais fácil, mas para que você finalmente entender
de modo que quando as rodinhas sair em algumas semanas você ainda pode sobreviver
no mundo real e fazer essas coisas sem qualquer quadro CS50 debaixo de você.
Esse $ _SESSION, para aqueles de vocês que estão familiarizados
ou que já peguei o vídeo na sexta-feira, o que vamos fazer SESSÃO
em uma aplicação web baseado em PHP?
Esta é uma variável superglobal, o que significa que é similar em espírito para GET e POST
e alguns outros, mas o que é essa coisa de útil para?
>> O que é SESSÃO utilizado? Sim. [Aluno] log in
Desculpe? [Aluno] log in log in fato.
Em pset sete estamos usando essa superglobal SESSÃO para facilitar log in
E o que é agradável sobre este superglobal é que é um array associativo.
Uma matriz associativa, recall, é apenas uma matriz, mas cujos índices já não têm de ser números
como 012. Eles podem ser números ou eles podem ser ainda cordas.
E isso, se você mergulhou pset 7 ainda, você deve se lembrar que estamos armazenando uma identificação chave chamada
dentro dessa matriz associativa cujo valor é algo como 123 -
qualquer que seja conectado no momento ID do usuário é.
A motivação para isso é que, mesmo depois de o usuário visitou localhost
ou o meu site mais geral e então eles logado,
mesmo que não clique em um link ou voltar para o meu site por 5 minutos
ou até mesmo uma hora ou até mesmo um dia, mas eles deixam a janela do navegador aberta,
através deste superglobal posso lembrar que eles se identificou
>> Em outras palavras, isso me permite armazenar um pouco longo prazo qualquer coisa que eu quero sobre um usuário.
E você pode pensar realmente como a encarnação de um carrinho de compras.
Locais como a Amazon, obviamente, deixar você colocar as coisas em um carrinho de compras,
mas HTTP, o protocolo que alimenta a Web, é apátrida
no sentido de que quando você visita um site,
para a maior parte, você não tem alguma conexão de rede constante
entre o navegador eo servidor.
Assim que você tenha baixado o HTML e os JPEGs e os GIFs e tudo isso,
a conexão vai embora e você só tem uma cópia do HTML e outras coisas do servidor.
Mas se o servidor quer se lembrar de algo sobre você,
a carga está no servidor para realmente gravar essa informação.
E assim que você o programador que têm controle sobre o servidor
pode colocar mais alguma coisa que você quiser dentro dessa matriz associativa superglobal
e ele vai estar lá na próxima vez que o usuário voltar,
se é minutos ou mesmo dias mais tarde, a menos que eles fechem a janela do navegador,
em que ponto SESSÃO desaparece.
Então, é o armazenamento efêmero, é não-persistente, e é destinado a ir embora
assim que o usuário fecha seu navegador - não apenas que guia, muitas vezes, o navegador inteiro,
assim, efectivamente deslogar o usuário.
Então, como é essa coisa realmente implementado?
Vamos dar uma rápida olhada em um exemplo simples, olhou na sexta-feira.
Para quem não conhece, era tão simples como isso.
Esta é uma página da web, cujo único propósito na vida é me diga
quantas vezes eu já visitaram esta página.
Esta é a primeira vez aqui na segunda-feira que o visitei, por isso diz 0 vezes.
>> Mas se eu começar a recarregar esta página, ele diz que uma vez, 2, 3, 4, 5,
e isso acabará por apenas manter a contagem subindo, subindo, subindo, subindo, até
para cada vez que eu realmente clicar em Atualizar sobre ele.
Então, como é esse trabalho? Deixe-me ir para dentro desse arquivo chamado counter.php.
A parte de cima é todos os comentários azuis, mas a parte interessante é aqui.
Na linha 13 nós chamamos isso de session_start função,
e que é, literalmente, tudo o que você precisa fazer se você quiser ter acesso
a este superglobal especial chamada $ _SESSION.
Isso torna tudo isso possível, e vamos ver em um momento como esse é possível.
Em comunicado linha 16 o que eu estou fazendo.
Se a chave, chamado contador - por outras palavras, o valor do índice - "contador"
existe dentro dessa matriz chamada sessão, então o que estou fazendo com ele na linha abaixo?
Qual é a linha 18 está fazendo?
>> [Resposta do aluno inaudível] O que é isso? [Aluno] Armazenar o valor. Bom.
É armazenar o valor que está em SESSÃO agora em uma nova variável local temporária,
$ Contador em todas as letras minúsculas.
Note que o PHP já está sendo um pouco preguiçoso aqui.
Repare que não temos qualquer menção de int ou float ou string ou qualquer coisa assim
porque o PHP é fracamente tipado, em que você não tem que especificar o tipo de uma variável,
e neste caso aqui eu não tenho ainda declarou ainda.
Estou declarando-a dentro destas chaves e ao contrário de C, este é realmente bem.
Não importa o quão profundamente aninhados declaração de uma variável é em PHP -
dentro de encaracolado cinta, dentro de encaracolado cinta e afins -
ele naquele momento no tempo existem para o restante do programa,
para melhor ou para pior.
Por isso, imediatamente torna-se global, logo que você o define como estamos fazendo aqui.
>> Caso contrário, se eu não achar que há alguma coisa na superglobal SESSION,
Estou aparentemente inicializar este contador variável para 0,
assim, apenas assumindo o usuário nunca tenha estado aqui antes.
E então este curso é de incrementar o contador como?
Estou atualizando o valor que está dentro dessa matriz associativa
fixando-a igual a qualquer momento contador é + 1.
Se eu rolar até aqui para o código HTML da página, é realmente muito simples.
Tudo o que tenho no corpo desta página é: "Você já visitaram este site vezes assim e assim."
E esta é uma construção PHP.
Se você fizer <? =, Isto é equivalente ao que efetivamente função?
É realmente equivalente a algo como printf, que nós já vimos muitas vezes em C,
embora, como você já deve saber a partir da especificação em pset 7,
impressão também é uma função que apenas imprime alguma coisa, ele realmente não usar códigos de formato,
e você pode realmente dizer eco também.
Eles são todos muito ligeiramente diferente, mesmo que o efeito líquido é basicamente o mesmo.
Então, esse uso do sinal de igual é apenas uma espécie de uma maneira elegante de fazer isso
de forma mais sucinta do que você poderia ser capaz.
Então, isso é tudo que este site faz. Ele imprime o valor de contador.
Como se tudo isso realmente acontece?
Você deve se lembrar de uma semana atrás, começamos a olhar debaixo do capô
de como a página web funciona usando este guia inspetor.
>> Chrome tem esse tanto na versão para Mac, a versão do Windows, e até mesmo a versão do Linux,
e Firefox e IE têm mecanismos semelhantes em que você tem este depurador embutido
dentro do navegador.
Vamos dar uma olhada no seguinte.
Temos um monte de guias aqui, e lembrar que o mais à esquerda é uma Elementos,
e não importa como godawful o código HTML e JavaScript é em uma página,
lembrar que, com a guia Elementos você pode realmente navegar no HTML hierarquicamente
e agradável e ordenadamente.
Então, se você está tentando aprender a partir de um site como o Google ou o Facebook
ou realmente qualquer site, saiba que você é provavelmente melhor fora
olhando o código fonte desta forma ao invés de ver a fonte-prima,
o que pode ser uma bagunça, como temos visto, especialmente no site do Google.
Então, se eu, em vez clique na guia Rede aqui,
vamos ver o que está acontecendo quando eu visitar esta página.
Primeiro deixe-me limpar o cache.
Eu estou indo para ir em Configurações no Chrome e depois ir para a História
e desmarque todos os dados de navegação.
Você pode estar acostumado a fazer isso para outros fins, [risos]
mas quando se trata de sites em desenvolvimento, é realmente útil -
se você está rindo você sabe. [Risos]
É realmente muito útil no desenvolvimento de sites, porque a realidade é
coisas como biscoitos e coisas como cache de arquivos HTML, arquivos de cache de JavaScript
pode realmente se tornar uma grande dor de cabeça, porque se por qualquer motivo
o navegador decide fazer cache algum arquivo e ainda assim você tiver feito alterações que o arquivo no servidor
mas o navegador não tem realmente percebeu que o arquivo foi alterado
e, portanto, não realmente voltar a baixá-lo, mesmo quando você clicar no botão Recarregar,
uma das formas mais infalível para apenas certifique-se a culpa não é com o seu código,
é com o comportamento do navegador, é ir aqui no seu browser
e apenas limpar toda a história, de modo que não há confusão.
>> E então, se você realmente quer ser paranóico, saia do navegador, reiniciá-lo,
e certifique-se tudo está funcionando como esperado.
Assim, em breve, limpeza de cache é bom quando se faz desenvolvimento.
Portanto, temos aqui a guia Rede.
Eu já tinha visitado o site 9 vezes, mas deixe-me ir em frente agora e clique em Recarregar.
E eu estou de volta para 0.
Vamos realmente ver como é que este superglobal sessão está sendo implementado.
Eu estou indo para clicar a solicitação HTTP 1 que foi feita,
e esta janela de depuração me permite olhar para dentro disso.
Aqui eu vejo apenas uma resposta a partir do servidor, o que não é interessante.
Eu vi isso em qualquer número de maneiras.
Mas o que é tecnicamente interessante são os cabeçalhos.
Se eu rolar para baixo aqui e focar os cabeçalhos de solicitação e clique em ver fonte,
o que eu vou ver é, literalmente, a solicitação HTTP
que acabou de entrar no meu navegador para o servidor,
GET é a palavra e, em seguida, / counter.php sendo o nome do arquivo,
HTTP/1.1 ser apenas a versão do HTTP que o meu computador está usando.
Esta linha aqui é um pequeno lembrete de navegador para o servidor que o nome do servidor é
que ele quer falar.
E depois o resto isso às vezes é interessante, mas não é relevante agora.
>> Este é apenas um tipo de curiosidade.
Cryptic embora essa seqüência é, a qualquer momento o seu browser visita um website
é informar o servidor do navegador que você está usando
e qual o sistema operacional que você está usando e qual a versão do mesmo.
Então, se você já se perguntou como sites como CNN e outros enfeites
saber o que as percentagens são de usuários de Mac na web os usuários, PC,
Usuários do IE, os usuários do Chrome e afins, é porque todos os nossos navegadores
está dizendo a cada único site lá fora que somos.
Isso não significa necessariamente conter informações de identificação pessoal,
mas ele faz dizer ao servidor que seu endereço IP é eo que navegador e sistema operacional você está usando.
Então é aí que essa informação é.
Mas o que é mais interessante agora, quando se trata destas sessões é o cabeçalho de resposta.
Deixe-me ver clique fonte próxima a resposta.
O que é interessante aqui é algumas coisas.
1, temos de volta um código de status 200.
Nós nunca vemos esse código de status porque isso significa que está tudo bem.
Significa, literalmente, bem ao contrário de qualquer outra coisa.
O que é um número que, por vezes, ver que é ruim? [Aluno] 404.
Arquivo de 404, não foi encontrado, 403 você pode estar deparando com já,
o que é proibido, o que significa que você esqueceu de chmod alguma coisa, o mais provável.
E há um monte de outros.
>> Aqui, isso é um pouco louco.
Eu realmente só escrevi este arquivo há alguns minutos colando-gedit.
Por que essa página expirar em 1981, antes que realmente era um Web?
O que está acontecendo lá?
>> [Resposta do aluno inaudível] O carimbo de tempo. Mas por quê?
É um tanto arbitrária, mas é realmente útil.
O que isto está dizendo para o meu navegador é o arquivo PHP que você acabou solicitado já expirou.
Na verdade, ele expirou há 30 anos.
Mas o que isso realmente significa?
Significa apenas que a próxima vez que o usuário visita esta página,
seja por recarga ou digitando a URL na barra de endereços,
certifique-se de ir buscar uma nova cópia do mesmo.
Esta é uma espécie de um exemplo de bloqueio de cache,
uma palavra estúpida que significa apenas tentando desencorajar navegadores
realmente de HTML cache que foi enviada a partir de um servidor
para que você não acidentalmente atingido recarga e depois ver a mesma versão do arquivo.
Você realmente quer que o servidor para enviar uma nova cópia.
Assim, o fato de que é 1981 apenas significa que é o que o aparelho é escolher
como uma data arbitrária no passado.
Mas a linha real suculento agora é este.
Mesmo antes de 50 você provavelmente vagamente familiarizado com cookies.
A partir de agora, especialmente entre aqueles menos confortável ou no meio,
o que é um cookie no seu entendimento agora
mesmo que estamos prestes a fazer o seu entendimento mais técnico?
O que é um cookie? Sim.
[Estudante] Informações sobre o usuário, como se eles já escreveram seu nome de usuário ou algo assim.
>> Bom. É a informação sobre o usuário, se digitou seu nome de usuário já.
Os cookies são um meio pelo qual os servidores podem se lembrar de algo sobre um usuário.
E o que é realmente um cookie é um arquivo de texto ou uma sequência de bytes
que é plantado pelo servidor dentro do seu navegador,
e dentro desse arquivo ou entre os bytes é algum tipo de identificador.
Talvez seja literalmente seu nome de usuário, mas mais frequentemente é algo mais crítico para o futuro
como esta coisa aqui - bo8dal3ct e assim por diante - este realmente grande seqüência alfanumérica
isso é realmente apenas para ser um identificador único para você.
Ou você pode pensar nisso como uma espécie de selo de mão virtual.
Se você vai para algum clube ou um parque de diversões, para lembrar que você realmente paga
e se foram, eles colocar uma etiqueta vermelha em sua mão de algum tipo,
e que lembra as pessoas no balcão que você já pagou
e você pode ir e vir como quiser.
Cookies são um pouco semelhante em espírito a isso.
A primeira vez que visitei o site, como eu fiz depois de limpar o cache,
o servidor web, o aparelho, neste caso, colocar um selo na minha mão
cujo nome é PHPSESSID, sessão ID,
cujo valor é esta seqüência alfanumérica muito longo.
>> Então essa é agora uma espécie de estampada em minha mão para que da próxima vez eu bati recarregar
ou manualmente visitar esta URL em um navegador,
meu navegador por definição de HTTP vai apresentar o selo de mão
de novo e de novo e de novo.
Assim, mesmo que o servidor não necessariamente sabem quem eu sou,
eles pelo menos sabem que eu sou o mesmo usuário, ou pelo menos, mais especificamente, o mesmo navegador.
E por isso esta é, em última análise como a superglobal sessão é implementada.
O servidor não tem idéia de quem você é quando você visita um website para a segunda ou terceira vez
se não apresentar este selo mão.
E assim que você apresentar esse selo de mão,
o servidor web, essencialmente, vai para um banco de dados pouco de sua própria
e cheques, bem, acabo de ver o selo de mão de bo8dal3ct usuário e assim por diante.
Deixe-me ver as informações que o programador tenha armazenado
interior da superglobal sobre esse usuário,
e então deixe-me garantir que esses dados são novamente dentro da SESSÃO superglobal
para que o programador pode voltar a acessar esses dados
mesmo que foi definido alguns minutos ou horas atrás.
Então, em outras palavras, cookies, o que causa uma má reputação por algum tempo
por causa da insegurança em navegadores e eles podem realmente violam nossa privacidade e tudo isso,
eles realmente têm grande utilidade, porque sem eles
você iria ser constantemente login em cada página do Facebook que você visita
ou e-mail a cada Gmail você lê se o navegador não tiver alguma forma de lembrar
que você já autenticado.
>> Assim, deste modo os cookies são enviados e para trás através do fio.
Outra curiosidade sobre os cookies, especialmente aqui, é que este é totalmente em texto puro.
Não há criptografia acontecendo aqui qualquer,
e na verdade eu estou usando HTTP no momento.
Um dos momentos favoritos em CS50, que agora é de 2 anos,
foi na época uma ferramenta chamada Firesheep saiu.
Esta foi uma peça de software livre que foi feita por um pesquisador de segurança
como uma chamada de despertar para a comunidade para dizer o quão atroz implementado
mecanismos de autenticação certos na Web eram.
Então, por algum tempo, o Facebook foi quase inteiramente sobre HTTP, HTTPS não.
E mesmo se você não tem idéia de como funciona a criptografia, S é seguro
então isso significa que há pelo menos alguns criptografia envolvidos.
Facebook foi usado para criptografar os nomes de usuário e senhas,
mas, logo que você olhou para o seu cutuca ou mensagens ou o seu feed de notícias,
tudo isso foi sem criptografia.
Assim foi o Gmail até que apenas um ano ou dois atrás.
Toda vez que você logado, sim, eles usaram criptografia segura
mas depois disso eles não fizeram. E por que seria?
Porque não usar a criptografia de todos os tempos em casos de uso como esta?
O que é isso? Acho que ouvi alguma coisa. [Aluno] Speed.
Velocidade, certo? Existem maneiras de contornar isso.
Mas se você só tipo de pensar logicamente, se você criptografar alguma coisa,
você tem que fazer pelo menos um pouco mais trabalho.
Em pset 2 quando você implementou César ou Vigenère ou mesmo de crack,
apenas imprimir uma string é relativamente fácil.
Criptografar e, em seguida, imprimir uma string requer no mínimo um pouco mais trabalho.
>> Para super sites populares como o Google eo Facebook,
se você tem que fazer mais trabalho para cada usuário para cada única página da web que visita,
que só tem mais tempo de CPU.
E se precisar de mais tempo de CPU, você pode precisar de mais servidores,
que significa que você pode precisar de mais dinheiro.
E assim por muitos anos isso só realmente não foi a melhor prática.
As pessoas usam criptografia SSL apenas quando necessário.
Mas acabou, e como esse sujeito com Firesheep fez super claro,
quando vocês que estão atualmente no Facebook agora -
A título de curiosidade, vamos ver se você vai confessar.
Se você está no Facebook agora em algum guia, mesmo se ele não está em primeiro plano,
é a sua URL HTTP ou HTTPS?
[Vários alunos] S. S? [Risos]
Okay. Qualquer HTTP? Apenas um? Okay.
Então, todos nós podemos hackear conta do cara Facebook agora.
Para a maior parte, esta tornou-se ativado por padrão, pelo menos em alguns sites.
E longa história curta, se o seu tráfego na web não é criptografado,
não só o HTML ir e voltar entre as WiFis não criptografados,
assim que as coisas como cookies ir e voltar todo o ar
sem qualquer forma de criptografia.
Então se você tem um pouco de habilidade de programação ou um pouco de pesquisando habilidades
para encontrar software gratuito que faz isso, tudo que você tem a fazer é sentar no Starbucks
ou sentar em um aeroporto, onde há geralmente não criptografadas WiFi
e só ver palavras-chave como Set-Cookie: PHPSESSID ou
porque se você tem o conhecimento técnico para apenas observar o WiFi
para todos os bits que fluem ao longo do ar por este padrão,
Você pode, então, dizer que PHPSESSID cara passa a ser bo8dal e assim por diante.
E, novamente, se você for suficientemente conhecimento técnico ou ter a ferramenta certa,
você pode apenas reconfigurar o seu próprio navegador que comece a apresentar esse selo de mão
para o Facebook.com, Facebook e só vai assumir que você é o cara
porque tudo o que eles não sabem é quem você é, mas que você tem esse identificador exclusivo.
Então, se você roubar o identificador único e apresentá-lo para o servidor web, como o seu próprio,
eles estão indo só para mostrar a você que a pessoa de alimentação de notícias
ou daquela pessoa mensagens ou puxões.
>> E eu gostaria de Google agora como ativar HTTPS para o Facebook talvez.
Mas é realmente tão simples como isso.
E assim o Facebook eo Google e outros ficaram muito bom nisso,
mas manter um olho para fora tudo o mais para os sites que você visita que não usam HTTP
e ter algum tipo de informação sensível sobre eles,
se é financeira ou pessoal ou similares.
Se eles não estão usando isso, muito possivelmente pode biscoitos como este ser facilmente roubado
e depois forjado, e isso é exatamente o que Firesheep fez.
Você não tem que ser um programador.
Tudo o que tinha a fazer era ter uma ligação à Internet, baixe essa ferramenta gratuita,
eo que ele gostaria de fazer é que você faça o login e, em seguida, ele iria mostrar-lhe os nomes Facebook
de todos na Sanders, nesta demonstração particular, em torno de você
e tudo o que tinha a fazer era clicar em seu nome e do software automatizou o processo de
de cheirar aquele biscoito, apresentando-a como seu próprio Facebook,
e, voilà, você está logado pol
Portanto, este é mais um daqueles "não faça isso" oficialmente.
Se você tem sua rede própria casa e você quer mexer, por todos os meios,
mas percebe isso faz cruzar a linha em um ambiente universitário.
>> Mas o objetivo aqui é realmente para enfatizar não como fazer isso
mas como se defender contra esses tipos de coisas.
E a solução trivial aqui, mesmo que em si é falho,
é realmente reduzir o uso de quaisquer sites que não estão usando HTTPS constantemente.
Assim, sites como Facebook e Google têm cada vez mais caixas
onde você pode optar por este tipo de coisa,
e os bancos tiveram isso há anos por razões semelhantes.
Então, um pouco de um fator de medo, se pudermos. Mas é isso em poucas palavras.
É assim que um servidor se lembra de quem você é.
E assim que eles podem se lembrar quem você é, eles podem se lembrar de nada sobre você
que o programador tenha armazenado dentro deste superglobal especial chamada $ _SESSION.
E para pset sete estamos usando isso trivialmente apenas para lembrar um int,
ou seja, o ID único do usuário que fez login,
de modo que sabemos que eles estiveram lá antes.
Quaisquer perguntas, então em sessões ou cookies ou similares?
Firesheep não funciona tão bem mais,
e você tem que colocar o computador em um modo especial promíscuo
então você está realmente ouvindo para o tráfego além de si mesmos.
Então se você está atualmente download Firesheep, percebe que não é tão fácil
como era antes de demonstrar.
Tudo bem. E não fazê-lo em Sanders. Fazê-lo em casa.
Bancos de dados.
Uma das coisas que fez em 7 pset muito deliberadamente
foi nós damos-lhe uma tabela de banco de dados de amostra para os usuários que tem alguns IDs de usuário,
alguns nomes de usuário e senhas criptografadas alguns nele contidas.
E como você vai ver, se você não tiver, você vai ter que alterar a tabela um pouco.
Você vai ter que adicionar um pouco de cache para cada um dos usuários dessa tabela,
e você vai ter que adicionar uma outra tabela de histórico, uma mesa de carteiras,
ou talvez chamar-lhe outra coisa.
Mas em termos de pensar em como fazer isso, vamos abrir esta ferramenta
o que foi usado na sexta-feira, mas se não conhece, o aparelho vem com uma ferramenta
chamada phpMyAdmin, que é coincidentemente escrito em PHP,
mas seu propósito na vida, depois de eu entrar aqui como jharvard de carmesim,
é dar-me uma maneira amigável de visualizar e alterar meu banco de dados.
>> O banco de dados que eu estou correndo no aparelho é chamado MySQL.
Isto é muito popular, e é um banco de dados de fonte aberta livre que é maravilhosamente fácil de usar,
especialmente com front-ends como este.
O que esta ferramenta permite que eu faça, por exemplo, é cotovelada em torno de mesas.
Deixe-me ir em frente e fazer isso.
Na sexta-feira, criamos uma tabela chamada alunos que foi super simples.
Ele tinha três colunas - id, nome, e-mail - e inseridos manualmente um par de linhas
como David e Mike neste exemplo em particular.
Vamos levar isso um pouco mais, e vamos supor que queremos lembrar mais
que apenas o nome e e-mail sobre um usuário.
Deixe-me clique aqui Estrutura no topo.
E, novamente, o pset percorre as medidas necessárias aqui,
então não se preocupe se alguns isso é um pouco rápido.
Então eu vou para clicar aqui.
Eu estou indo para adicionar um número de colunas após e-mail
porque eu quero adicionar algo como casa.
Esqueci de registrar a casa de um aluno.
Deixe-me clique em Ir, e agora temos esta forma que, infelizmente, é um pouco largo da esquerda para a direita,
mas eu vou chamar o nome desta casa de campo,
e então o tipo que agora tenho que escolher.
Portanto, vamos ter uma breve conversa sobre os vários tipos em MySQL
porque enquanto o PHP é fracamente tipado e que tipo de joga rápido e solto com os tipos,
em um banco de dados especial que é super importante para realmente usar digitação para a sua vantagem
porque uma das coisas MySQL e outros bancos de dados pode fazer por você
é garantir que você não colocar dados falsos em seu banco de dados.
Este é o tipo de erro corrente livre disponível para você.
>> Para a casa que, obviamente, não quero que seja um int, que é um valor de 32 bits em MySQL.
Fizemos falar brevemente na sexta-feira sobre varchar, que significa comprimento variável char.
O que é isso? Isso permite que você especifique que você quer que isso seja uma seqüência de algum tipo.
Você realmente não sabe de antemão quanto tempo é,
então vamos arbitrariamente dizer um nome de casa pode ser de 255 caracteres,
mas você pode ir com 32, 64 - qualquer número realmente.
Mas a vantagem de usar um varchar sobre um campo chamado char é o que?
Apenas intuitivamente se eu rolar por aqui, perceber que há char e há varchar.
Varchar é de comprimento variável char; char é um comprimento fixo char.
Assim, com base apenas no que definição, qual é a vantagem ou desvantagem de cada uma delas?
Em outras palavras, que se preocupa com a distinção, ou por que você se importa?
>> Sim. [Aluno] Varchar tem mais flexibilidade, mas ocupa mais memória.
Bom. Varchar ocupa mais - Vamos ver. Eu não tenho certeza se eu ouvisse esse direito.
Você pode dizer que mais uma vez?
[Aluno] eu disse varchar, provavelmente, tem mais flexibilidade, mas é preciso mais memória.
Interessante. Okay. Varchar provavelmente lhe dá mais flexibilidade, mas ocupa mais memória.
O último não é necessariamente verdade.
Ele depende do contexto, mas vamos voltar a isso.
>> [Resposta do aluno inaudível] Exatamente.
É realmente o caso que char vai utilizar mais memória
porque um char, como em C, é como uma corda, que é uma matriz de caracteres.
Então, se você diz que um campo char de tamanho 255,
o banco de dados é, literalmente, vai dar-lhe 255 caracteres.
E se a casa acaba sendo personagens Mather e 6 total,
você está perdendo mais de 200 caracteres.
>> Assim, um varchar efetivamente utiliza apenas quantos caracteres é necessário
até um montante máximo.
Mas o preço que você paga é realmente desempenho, potencialmente.
Se você sabe de antemão que todas as cordas vão ser 8 caracteres -
Por exemplo, suponha que você requerem senhas de comprimento 8 -
A vantagem de usar um campo char na ocasião, embora muitas vezes não,
é especificar um comprimento fixo para algo como uma senha
porque agora o banco de dados pode ser ainda mais inteligente.
Se ele sabe que todos os campos char, cada corda em uma coluna é o mesmo comprimento,
você recebe de volta o recurso de acesso aleatório.
Você pode pular entre os vários campos de char na sua tabela de base de dados
porque pensar de um banco de dados como linhas e colunas.
Então, se cada uma das cadeias é o mesmo comprimento,
você sabe que o primeiro é no byte 0, a próxima é a de 8 bytes
e, em seguida, 16 e, em seguida, 24 e assim por diante.
Então, se todas as cordas são do mesmo comprimento, você pode pular muito mais eficiente.
De modo que pode ser uma vantagem em termos de desempenho,
mas normalmente você não tem o luxo de saber com antecedência,
assim um varchar é o caminho a percorrer.
Aqui está outro detalhe que mesmo Facebook correu para eventualmente.
Ints são grandes, e que tipo de usá-los por padrão toda vez que precisa de um número,
mas é apenas 32 bits.
>> E mesmo que o Facebook não consegue ter 4 bilhões de usuários, agora,
há definitivamente algumas pessoas lá fora com várias contas
ou contas que foram abertas e, em seguida, fechado,
e assim o próprio Facebook Acredito alguns anos atrás tinha a transição de int
para, como é apropriadamente chamado bigint, que fica apenas a 64 bits em vez.
Portanto, esta também é uma decisão de design.
Você seria incrivelmente sorte se seu projeto final se transforma inicialização,
tem 4 bilhões e um usuários, mais ou menos,
caso em que ints pode ser um pouco míope.
Mas, na realidade, sua tabela de usuários é provavelmente bem com ints.
Mas para algo como 7 pset, como sua tabela de histórico,
você pode ter milhares, milhões de usuários se você evoluir para etrade.com.
Assim, enquanto você não pode ter mais de 4 bilhões de usuários,
aqueles usuários que você tem pode ter mais de 4 bilhões de transações ao longo do tempo -
compra e vende e as coisas em sua história.
Então, se você faz antecipar - de novo, esses são bons problemas para ter se você tem esta quantidade de dados -
se você antecipar dados que excedem o tamanho de um int,
indo com algo como bigint é uma direção, não com freqüência suficiente adotado por designers
porque as pessoas figura que não vai ser um problema,
mas é tão fácil de escolher algo maior do que isso.
Decimal que estamos usando no pset 7, que especifica precisão fixa
assim você pode evitar as questões que envolvem carros alegóricos e de duplas e reais e similares.
>> E depois há outros campos aqui. Vamos agitar as mãos para eles de alguma forma.
Mas as datas, horários todos têm um formato prescrito no MySQL,
ea vantagem de armazenar datas como datas e não VARCHARs
significa que a base de dados pode, na verdade, reformatar-los em diferentes formatos,
se um formato EUA ou formato europeu ou similar - no entanto, você quer que ele -
muito mais eficiente do que se fosse apenas alguns varchar genérico.
E depois há alguns outros binários, varbinary, blobs.
Estes são objetos binários grandes, e você também pode armazenar dados binários
bem como os dados geométricos de um banco de dados.
Mas para nós, vamos normalmente se preocupam com ints e VARCHAR e similares.
Vamos terminar este exemplo com a casa.
Casa eu vou dizer será arbitrariamente 255 caracteres.
Então o valor padrão que poderia fazer isso.
Poderíamos, por padrão colocar todos em Mather House, por exemplo.
É assim que nós pode especificar que o banco de dados
devem assegurar que alguém tem sempre um valor. Mas vou deixar que seja.
Na verdade, para as pessoas que vivem fora do campus e não em uma casa,
talvez eu realmente quero especificar que o valor padrão para casa é NULL,
e então eu preciso verificar esta caixa e dizer o banco de dados que está tudo bem se a casa do usuário é NULL.
>> Mais uma vez, este é um outro mecanismo de defesa que você pode colocar em prática
assim você não precisa nem de colocá-lo em seu código PHP necessariamente.
O banco de dados irá garantir que as coisas são ou não são NULL.
E então, finalmente, Atributos.
Nenhum destes são realmente relevantes.
Binário, não assinado - nenhum deles são relevantes para um varchar.
Índice.
Alguém sabe ou se lembra ou tem um palpite sobre o que é um índice
para algo como casa?
Isto também é, na verdade, uma decisão de projeto importante e relativamente fácil.
Para quem ainda não viu, na sexta-feira que falou brevemente sobre chaves primárias.
Em uma tabela de banco de dados, uma chave primária é o campo ou coluna
que identifica exclusivamente as linhas da tabela.
Assim, no quadro atual temos IDs, temos nomes e e-mails.
Qual desses é o melhor candidato para ser uma chave primária,
cujo papel é identificar linhas?
Provavelmente ID.
Indiscutivelmente, nós também podemos usar o que?
Talvez você possa usar e-mail, porque, em teoria, ele é único
a menos que as pessoas estão compartilhando as contas de e-mail.
Mas a realidade é que, se você estiver usando uma identificação numérica como 1234,
isso é apenas 32 bits, enquanto um endereço de e-mail pode ser esta muitos bytes ou esta muitos bytes.
Portanto, em termos de eficiência de identificadores únicos,
ele tende a ser uma boa prática apenas para usar um int
mesmo se você tiver algum candidato cadeia que sem dúvida poderia usar.
>> Para algo como casa, isso não deve ser uma chave primária
porque, então, apenas uma pessoa poderia viver em Mather e 1 pessoa em Currier e similares.
Da mesma forma, isso não deve ser único.
A diferença entre a primeira e única é a de que, no caso de a mesa de corrente,
ID seria primário, mas e-mail não é primária para a razão que acabamos de mencionar -
desempenho - mas ainda deve ser único.
Então, você ainda pode impor exclusividade sem ter a pretensão
que é um importante campo de super primária.
Mas este é bastante útil: Index.
Se você sabe de antemão para o seu projeto final, para pset 7, ou, em geral,
que esta casa de campo vai ser algo que você busca em um lote
usando a palavra-chave de seleção ou algo mais,
então você pode dizer antecipadamente o banco de dados para trabalhar sua mágica
e certifique-se que ele cria na memória quaisquer estruturas de dados de fantasia necessário
para acelerar pesquisas com base em casa.
Talvez ele vai usar uma tabela hash, talvez ele vai usar uma lista ligada.
Na realidade, ele tende a usar uma árvore, muitas vezes chamado de uma estrutura de árvore-B -
não uma árvore binária, mas uma árvore-B - que é uma árvore muito grande
que você pode ver em uma classe como CS124, os dados da classe estruturas.
Mas, em resumo, você não tem que se preocupar com isso ao usar o software de banco de dados inteligente.
Você pode apenas dizer que, "Índice de este campo para que eu possa pesquisar sobre ele de forma mais eficiente."
>> Se você deixar este fora e tentar pesquisar para todos no banco de dados que vive em Mather,
ele vai transformar-se em busca linear.
E se você tem 6.000 graduandos todos vivendo em alguma casa,
você vai pesquisar toda a tabela para encontrar os Matherites,
enquanto que, se você diz Index, espero que seja algo próximo a uma busca logarítmica
para encontrar esses tipos de alunos.
Este é apenas um recurso gratuito para ligar,
mesmo que ele vem a um preço de uma certa quantidade de espaço.
Por último, auto-incremento, este campo AI,
o que significa apenas se for um int e você não quer se preocupar para incrementar você mesmo
cada vez que há um novo usuário, verifique se,
e cada usuário que é inserido automaticamente receberá um novo ID.
Vamos clicar em Salvar, e agora vamos encontrar a falha com este projeto.
Se eu entrar em Procurar, aviso de que Mike e minha casa é NULL.
Eu posso usar o phpMyAdmin para editar manualmente.
Eu posso ir aqui e digite Mather e pressione a tecla Enter,
e agora observar o quadro é diferente.
Mas repare que eu poderia fazer outra coisa também.
ID de Davi é um, então phpMyAdmin novamente é apenas uma ferramenta administrativa;
isso não é algo que os usuários estão indo cada vez para ver.
Então, se eu, em vez clique na guia SQL em cima -
e, novamente, pset 7 irá apresentá-lo para mais uma dessas consultas -
Eu posso executar manualmente o comando de linguagem SQL Structured Query
UPDATE users SET casa = 'Pfoho' WHERE id = 1.
Essas consultas SQL são, bem o suficiente, bastante legível da esquerda para a direita.
Atualizar a tabela de usuários, defina o campo chamado de casa para Pfoho
onde ID do usuário é 1.
Ou eu poderia até mesmo fazer, onde e-mail = 'malan@harvard.edu'.
Enquanto que identifica comigo, que iria funcionar tão bem.
Mas ID tende a ser maior desempenho, então vamos fazer isso.
Vamos clique em Ir. Ok, lecture.users não existe. Qual é o meu erro?
Qual é a tabela verdade chamado aqui?
É chamado de alunos só porque é o que nós fizemos aqui no canto superior esquerdo.
É chamado de estudantes, e não usuários. Então clique em Ir agora.
Uma linha afetada. Consulta levou 0,01 segundos.
Se eu clique em Procurar agora, agora vive em Pfoho Malan.
Então, isso é um outro sabor de SQL, mas o pset irá orientá-lo através de um pouco mais do que isso.
>> Há uma decisão estúpida que eu já fiz aqui.
Eu diria que este projeto de banco de dados é ineficiente
porque quanto mais pessoas eu adicionar à tabela alunos,
mais de nós eu começar a adicionar, o mais das TFs eu começar a adicionar,
vamos começar a ver o que Despedimentos na tabela?
>> Sim. [Aluno] Vendo que ele está em estudantes, estamos usando o mesmo [inaudível]
O mesmo - Direito, exatamente.
Então, se 400 pessoas vivem em Mather, mais ou menos,
eventualmente esta tabela vai ter 400 linhas que dizem "Mather", "Mather,"
"Mather," "Mather," "Mather."
Estamos perdendo todos esses bytes, e há um par de takeaways lá.
1, há o caso de canto louco onde se alguém paga um monte de dinheiro
e renomeia Mather, agora temos de mudar a nossa tabela de banco de dados inteiro.
Isso não vai acontecer frequentemente, embora Pfoho já foi chamado de Casa do Norte há 15 anos,
assim acontece. Mas isso não é tudo o que convincente.
Mais convincente do que um caso como o de canto a necessidade de atualizar os dados em massa
para um banco de dados é por que você está armazenando MATHER novo e de novo e de novo e de novo?
Isso é um monte de caracteres, 6 caracteres.
Não podemos fazer ainda melhor do que isso, especialmente para Pforzheimer?
Certamente que podemos fazer melhor do que muitos personagens.
Porque não basta associar um identificador único, com cada casa
e loja que para cada usuário? Então, vamos tentar isso.
Ao invés de apenas utilizar a tabela alunos, deixe-me ir para o meu banco de dados palestra aqui no canto superior esquerdo.
Note-se aqui que diz Criar tabela.
Deixe-me criar uma nova tabela chamada casas.
O número de colunas que vai ser 2. Enter.
Agora eu tenho dois campos.
Eu vou chamar este o nome, e que vai ser um varchar de comprimento 255,
>> mas que é bastante arbitrária. Deixe-me colocar isso aqui por convenção.
Então coloque uma identificação aqui. Vamos dar a cada casa um identificador único.
Vamos dar a cada casa um nome.
Vamos especificar que o identificador será assinado apenas por convenção usar apenas números positivos.
Vamos em frente e dar a este um campo de auto incremento para agora.
E precisamos de mais alguma coisa?
Vamos em frente e clique em Salvar.
Agora eu tenho uma segunda tabela.
Observe como um aparte este é o pouco enigmática comando SQL
que você teria que digitar manualmente se não estiver usando uma ferramenta administrativa como phpMyAdmin.
Portanto, outra razão que usá-lo.
É uma espécie de maravilhosamente útil pedagogicamente, porque você pode clicar em torno de
e descobrir como as coisas funcionam por apenas copiando e colando o phpMyAdmin fez.
Mas o comando Criar tabela é o que foi apenas executado, e aqui é a minha mesa.
Deixe-me ir em frente agora e usar o SQL-prima em vez de simplificar, clicando na guia Inserir.
Deixe-me fazer INSERT INTO casas,
e eu vou dizer o nome da casa vai ter um valor de 'Mather'.
É isso aí. Esta sintaxe é um pouco mais enigmática.
Este é o nome dos campos que deseja inserir.
Estes são os valores que queremos inserir esses campos. Deixe-me clique em Ir.
Uma linha inserida a cada 0,02 segundos. Deixe-me clique em Procurar agora.
>> Observe se eu clique em Procurar, há Mather, cuja identificação é pela automação do número 1.
Deixe-me fazer outro. Deixe-me ir para o guia SQL.
INSERT INTO casas. O nome da casa vai ter um valor de Pfoho e assim por diante.
Ir. E eu posso continuar fazendo isso de novo e de novo e de novo.
Ou se você ficar entediado usando o phpMyAdmin, você pode apenas usar a guia Inserir
e não ter que digitar o SQL-prima.
Você pode apenas bater-lo mais rapidamente, digitando, por exemplo, Currier, Enter
e agora, se clicar em Procurar, há Currier com um ID de 3.
Então é isso que queremos dizer com auto-incremento.
Mas agora temos que corrigir alguma coisa nos estudantes.
Na alunos o que devem ao tipo de dados do campo casa agora?
Ele deve ser um int, certo?
Assim, o objectivo aqui é o de fatorar, também conhecido como normalizar, as tabelas
de modo que nós não armazenar informações de forma redundante em qualquer um dos meus quadros.
E, novamente, o caminho que estávamos aqui vai dizer Mather, Mather,
Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, que é muito redundante
em termos de desperdício dos caracteres.
Então deixe-me ir em frente e mudar isso clicando Estrutura,
e deixe-me ir em frente e marcar o campo casa, clique em Alterar
e agora eu vou mudar isso seja um int.
255 não é mais relevante.
Deixe-me ir em frente e dizer que está tudo bem, se ainda é NULL. Salvar.
Agora os estudantes tabela foi alterada com sucesso,
e observe novamente casa é um int.
Como um aparte, ignorar o número entre parênteses quando se trata de ints.
>> Isto é por razões de legado.
Voltar no dia em que você não tem GUIs, em vez disso tinha um ambiente de linha de comando,
os 10 e 11 respectivamente especificados quantos caracteres você deve mostrar
na janela de terminal para realmente mostrar campos.
Não tem nada a ver com o comprimento de bits do campo real, por isso vamos ignorar que, por agora.
Agora eu tenho que ir para esta mesa.
E se David vive em Mather, casa não deve ser 0,
que é um valor mais próximo do padrão int NULL.
Ele deve morar na casa de um.
Vamos dizer arbitrariamente que vive em Mike Pfoho, para casa de número 2.
Agora minha mesa parece um pouco mais enigmática.
Mas considere a eficiência.
Agora estou usando apenas 32 bits para identificar a casa,
o que significa que há apenas uma definição canônica da minha casa Mather e Pfoho
e que está na mesa de casas.
Então, se eu quiser voltar agora essas tabelas, pensar desta maneira.
Aqui eu tenho minha mesa os alunos, e no lado direito há estes números, 1 e 2.
1 é Mather, 2 é Pfoho.
Nós temos os mesmos números nesta tabela outro, o que é chamado de casas,
1 e 2 e 3 para as três casas.
O que queremos agora fazer é ter a capacidade de código, PHP e SQL,
a sorte de juntar estas tabelas, onde se estes são os estudantes e estes são as casas,
queremos de alguma forma combiná-los de modo que uma linha com 1,
2 linhas com 2, e para que possamos descobrir onde David
e onde Mike e onde toda a gente vive.
Para fazer isso, podemos executar uma consulta SQL como o seguinte.
SELECT * FROM alunos Cadastre casas ON -
E agora o que os campos que queremos participar em?
Então students.house = houses.id.
>> Um pouco enigmático, mas esta parte significa, literalmente, criar uma nova tabela temporária
que é o resultado da junção estudantes e casas.
E como você quiser combinar as pontas dos meus dedos aqui?
SET 'campo casa igual às casas "os alunos campo ID.
E se eu agora clique em Ir, eu voltar exatamente o que eu esperava.
Davi está em Mather, Mike está na Pfoho, e eu também ver os identificadores exclusivos.
Mas o ponto é agora eu tenho uma tabela completa.
E assim o takeaway aqui para pset 7 ou realmente para o projeto final:
Se você achar que você está armazenando qualquer peça de informação redundante,
se é uma casa, talvez seja uma cidade, estado e CEP
onde ZIP pode, normalmente, mas nem sempre ser utilizado como um identificador único,
não fazer o exercício mental e, depois, com algo como phpMyAdmin
de factoring que os dados comuns, porque, especialmente como o seu site fica mais bem utilizado
e mais popular, é assim que você se certificar de que tudo é super rápido,
dando ao banco de dados como muitas dicas como a singularidade possível.
Isso foi muito.
Alguma pergunta? Tudo bem. Vamos dar um intervalo de 5 minutos lá e reagrupar.
Tudo bem.
A seguir, um exemplo que foi utilizado há alguns anos atrás quando eu tirei CS161,
que é a classe operacional sistemas na faculdade
que é conhecido por ser incrível, mas uma quantidade louca de trabalho,
e concentra-se realmente em alguns dos problemas de baixo nível que surgem nos sistemas operativos
e também até mesmo no mundo dos bancos de dados.
>> A história que foi contada pelo meu professor, Margo Seltzer, esse ano foi como segue.
Suponha que você tem uma geladeira dormitório para você e seu companheiro de quarto
e tanto de que você realmente gosta de leite.
Então você chega em casa do dia de classe um, o seu colega de quarto ainda não está lá,
você abre a geladeira, e você percebe, "Oh droga, estamos fora de leite."
Então você fechar a geladeira, você atravessar a rua para CVS
e entrar em linhas cada vez mais longas para comprar leite na CVS.
Enquanto isso, seu companheiro de quarto chega em casa de sua classe,
entra no quarto, abre a geladeira realmente querendo um pouco de leite,
abre a geladeira e "Droga, não de leite."
Então, ele ou ela fecha a geladeira, sai pela porta, e vai para ABP
ou em outro lugar que CVS onde você não está indo colidir uns com os outros
para ir buscar um pouco de leite.
É claro que alguns minutos mais tarde, tanto de você voltar para casa
e agora você tem leite duas vezes tanto quanto você realmente queria.
E, sendo o leite, agora ele vai ir mal, porque você gosta de leite
mas você realmente não gosto de leite, então agora você tem muito leite, por isso vai azedar.
Esta é uma situação terrível, terrível.
O que poderia ter resolvido esta situação se você fosse o companheiro de quarto casa primeiro? Sim.
[Estudante] Você deve ter deixado uma nota. [Risos]
Bom. Você deveria ter deixado uma nota.
Você deveria ter colocado uma nota de post-it ou o mesmo que dizer, "Gone para o leite",
e, em seguida, seu companheiro de quarto conceitualmente teria sido trancado para fora de realmente fazer isso.
Ou você poderia ir um passo além.
Você pode, literalmente, bloquear o frigorífico com algum tipo de cadeado,
e agora seu companheiro de quarto vai ser literalmente trancada para fora da geladeira.
Se generalizarmos volta à programação,
você quase pode pensar no frigorífico como algum tipo de variável ou uma estrutura,
algum tipo de recipiente para informações.
O problema fundamental aqui é que ambos foram autorizados a inspecionar
ou ler o estado dessa estrutura de dados,
mas você viu em momentos diferentes e ainda assim tanto de você tomou uma decisão
com base no estado do mundo naqueles momentos diferentes no tempo.
Então, se você tivesse trancado a geladeira, você teria pelo menos evitado seu companheiro de quarto
de ter sido capaz de inspeccionar o estado do mundo,
para que ele ou ela não poderia ter tomado essa decisão mesmo.
Assim, bancos de dados, como se vê, tem esse problema constantemente.
>> Vamos ver se podemos construir um cenário.
Suponha que você é uma espécie de vilão e você vai para o Bank of America
ou um dos outros lugares na praça que tem um casal ATMs lado a lado,
e de alguma forma você descobriu como duplicar um cartão Multibanco - não tão difícil assim.
É apenas uma fita magnética.
E então o que você quer tentar fazer é jogar este jogo
pelo qual você coloca um cartão em uma máquina, um outro cartão em outra máquina,
e você, essencialmente, quer tentar retirar o dinheiro ao mesmo tempo,
porque imaginar que a história é o seguinte.
A máquina à esquerda leva o seu cartão e sua senha,
e então você diz: "Dê-me US $ 100."
A ATM está programado para primeiro fazer um select no seu banco de dados ou o equivalente -
qualquer banco de dados que está usando - para ver se este usuário tem pelo menos US $ 100 em sua conta?
Se sim, então cuspir o $ 100 e subtrair R $ 100 a partir de seu equilíbrio.
Mas é claro que, se há várias máquinas aqui ou múltiplas formas de inspecionar
o estado do mundo, o cofre do banco, para ver quanto dinheiro você tem,
supor que apenas por acaso a máquina à esquerda e à direita
tanto essa pergunta em aproximadamente no mesmo momento no tempo.
>> E isto pode certamente acontecer. Os caixas eletrônicos são computadores estes dias.
Então, se a máquina à esquerda diz: "Sim, você tem pelo menos US $ 100",
Enquanto isso, a máquina à direita diz: "Sim, você tem pelo menos US $ 100",
então ambos avançar para concluir os seus programas e realmente cuspir os US $ 100
e dizer: "Antes você tinha US $ 200."
"Deixe-me atualizar a variável a ser agora 100 dólares deixados na conta."
Mas se ambos têm verificado o seu saldo de conta e descobri que é 200 dólares
e os dois em seguida, fazer as contas e dizem que 200 - 100,
as máquinas potencialmente cuspir duas notas de $ 100 em cada máquina,
mas eles só atualizou o seu saldo de conta soma é R $ 100.
Em outras palavras, você tomou a US $ 200, mas porque eles inspecionaram o estado do mundo
simultaneamente e, em seguida, tomou a decisão com base nesse valor,
eles não podem fazer a matemática, em última análise corretamente.
Portanto, em uma situação de banco também você realmente quer ter algum tipo de bloqueio
de modo que, logo que você verificou o estado de alguma variável
que é realmente importante, como saldo da sua conta,
não deixe ninguém tomar decisões baseadas no que até está pronto a fazer sua coisa,
onde, neste caso, você é o ATM do lado esquerdo.
Bloquear todos os outros fora.
Você pode realmente atingir esse efeito em um par de maneiras diferentes.
>> A maneira mais simples no MySQL é uma linha de SQL que lhe deu
na especificação do conjunto de problemas que se parece exatamente como este.
Inserir na tabela - o que é chamado - um id, um símbolo, e por ação, um número de ações,
os valores que se seguem, por exemplo.
Se você ainda não leu a especificação ainda, este é um exemplo que envolve como você vai fazer sobre
comprar 10 ações desta tostão estoque para Presidente Skroob,
cuja identificação do usuário passa a ser o número 7?
Isto diz INSERT INTO tabela o id seguinte, símbolo e número de ações
de 7, 'DVN.V', e 10.
Mas - mas, mas, mas - a segunda linha é a mais importante.
ON DUPLICADOS partes da atualização chave = partes + valores (ações).
Então, totalmente enigmático aparência à primeira vista.
Mas o fato de que esta consulta SQL, mesmo que ele quebra em duas linhas,
É uma consulta longa, isso significa que é atômica
no sentido em que esta consulta irá ser executado em conjunto ou não em todos.
E, por definição do MySQL, que é como eles implementaram esta consulta.
Ele é, por definição, no manual garantido para executar todos de uma vez ou de modo nenhum.
A motivação para isso é a seguinte.
Se neste caso você está tentando comprar 10 ações do,
é uma espécie da mesma história como o leite, é uma espécie da mesma história como o ATM.
>> Se você não faz o erro de usar esta sintaxe
mas a seleção do banco de dados para ver quantas ações desta tostão estoque
que o Presidente Skroob tem, e acho que ele tem 10 ações,
e então alguns fração de segundo mais tarde você faça uma declaração UPDATE,
que é uma outra declaração em SQL que diz vá em frente e adicionar 10 mais ações
à sua 10 atual de modo que, idealmente, o total é de 20,
o problema é porque os atuais sistemas de banco de dados e porque em computadores de hoje
você tem múltiplos processadores, núcleos múltiplos -
em outras palavras, os computadores podem ser literalmente fazendo várias coisas ao mesmo tempo -
não há nenhuma garantia de que o seu SELECT e UPDATE em seu caso
vão acontecer de costas.
Assim, um cenário ruim seria você fazer o SELECT
para ver quantas ações desta tostão estoque não Skroob tem,
e depois é só por acaso outra consulta de banco de dados é executado -
talvez o seu Skroob em outra janela do navegador tentando comprar 10 partes
em outra janela completamente, muito parecida com a ATM -
e supor que outra consulta fica entre SELECT e UPDATE.
Poderia ser o caso de que Skroob agora perde um pouco número de ações
porque outro processo está a inspeccionar o estado do seu mundo,
ou ele fica mais ações do que ele deve ter.
Não vou entrar em detalhes de exatamente o que essas linhas história particular seria,
mas o ponto é, se você tem que verificar um valor de variáveis ​​e então tomar uma decisão,
se há um risco de alguém fazer alguma coisa entre esses dois depoimentos,
como pode acontecer em sistemas multiprocessados, em sistemas multicore,
computadores com a capacidade de fazer várias coisas ao mesmo tempo, coisas ruins podem acontecer
contas bancárias como sendo debitado incorretamente, a compra de leite duas vezes mais,
ou, neste caso, o número errado de ações.
Mas há uma maneira mais fácil pensar sobre isso.
>> Acontece que também suporta SQL, se você configurar a sua tabela corretamente,
algo chamado transações, o que eu diria é realmente ainda mais fácil de entender
do que isso, mas não é um 1-liner, por isso é realmente um pouco mais envolvido.
Há, literalmente, uma declaração em SQL chamado START TRANSACTION.
Assim como há SELECT, UPDATE, INSERT, DELETE e JOIN e um monte de outros,
há palavras-chave como START TRANSACTION.
E o que você faça no contexto de pset 7 -
você não tem que fazer isso para pset 7, que é explicitamente negada como não é necessário,
mas para projetos finais pode ser útil -
se você chamar uma consulta de START TRANSACTION e depois outra consulta
e, em seguida, consulta outro e depois outro, outro, e outro,
essas consultas não vai realmente ser executado até que você chamar a instrução SQL COMMIT,
em que ponto, se é duas declarações ou 20 depoimentos, todos eles vão ser executados de uma só vez,
o que significa que ninguém pode acidentalmente comprar muito leite ou débito muito dinheiro
ou comprar ações muitas porque todas as suas dúvidas executará
de costas para trás, para trás.
E isso é super importante, especialmente quando você está fazendo algo assim.
Este é um exemplo arbitrário que diz vamos atualizar a conta bancária
estabelecendo um equilíbrio igual a equilíbrio - $ 1000, onde o número da conta é 2.
E então a segunda instrução é agora vamos depositar que $ 1000
em alguém da conta bancária cuja conta número é 1.
>> Em outras palavras, este é um exemplo perfeito de onde você quer ter a certeza
que ambas as afirmações acontecer ou não em todos
porque caso contrário o cliente vai se ferrar
e você vai ter seu dinheiro e não depositá-lo em outro lugar,
ou o banco vai se ferrar, onde você vai depositar o dinheiro
mas na verdade não subtrai-lo da conta do usuário.
Então você quer os dois juntos para executar.
Assim entra nas transações mundiais.
Então, isso é algo para se manter na parte de trás de sua mente,
não tanto para fins de apenas um projeto final,
mas se você quiser ter o seu projeto final em algum lugar,
Se você deseja iniciar alguma empresa em torno dele,
se você quer resolver problema algum grupo de estudantes no campus
e realmente tem um site, ao vivo ativa, esse é o tipo de erros sutis que podem surgir
se você não consegue pensar no que pode acontecer se duas pessoas
está tentando acessar o seu site em, literalmente, no mesmo momento no tempo,
em que suas consultas poderiam se entrelaçam.
>> Pronto para um pouco de JavaScript, um teaser do mesmo?
Este é o nosso último idioma para o semestre. Tudo bem.
Felizmente, JavaScript parece muito, muito, muito semelhante às duas línguas, C e PHP,
que temos feito até agora.
Não há JavaScript no pset 7, mas é uma ferramenta incrivelmente útil
quando se trata de fazer projetos na web finais ou realmente apenas programação web em geral.
Assim, uma visão rápida de algo chamado DOM.
Aqui é uma página web super simples que realmente só diz Olá mundo,
tanto no título e no corpo.
À medida que a indentação tem sugerido por algum tempo,
existe realmente uma hierarquia para as páginas web.
Eu poderia desenhar esse trecho mesmo do HTML como uma árvore,
pensar de volta para as nossas discussões de estruturas de dados em C, como se segue.
Eu tenho algum nó raiz especial chamado de nó de documento,
e vamos ver o análogo desta em JavaScript em apenas um momento.
O primeiro filho e filho único de que neste caso é a tag HTML.
Não há mapeamento direto do doctype.
Isso é uma coisa especial, de modo que devemos simplesmente ignorá-la quando se trata deste DOM,
este Documento árvore Object Model.
Observe que a tag HTML, que eu arbitrariamente representado como um retângulo,
tem 2 filhos: cabeça e corpo.
>> Aqueles são igualmente desenhado como rectângulos.
É significativo que a cabeça é pictoricamente à esquerda do corpo.
A implicação é que a cabeça está em primeiro lugar na árvore.
Portanto, não há, na verdade, uma ordenação de uma árvore quando você desenhá-lo como este,
embora as formas e whatnot são arbitrárias.
Chefe entretanto tem um filho único chamado título,
e título, na verdade, tem o seu próprio filho, que é "Olá, mundo",
que eu deliberadamente atraiu como um oval aqui para torná-lo um pouco diferente do retângulo.
Estes retângulos são elementos, enquanto Olá, mundo é realmente um nó de texto.
Portanto, é um nó na árvore, mas é um tipo diferente de nó
Então eu desenhei isso arbitrariamente diferente.
Da mesma forma que o corpo tem um filho chamado Olá mundo, bem como,
nó de modo diferente, mesmo que eles estão coincidentemente o mesmo texto,
mas eu desenhei-lo usando a mesma forma. Então, quem se importa?
Bem, o que é agradável sobre HTML é que ela tem esta natureza hierárquica.
E o que é agradável sobre JavaScript e particularmente bibliotecas que estão disponíveis gratuitamente
e populares como jQuery, você pode navegar pela estrutura de árvore de forma surpreendentemente fácil.
Qualquer uma das coisas que fizemos em C com ponteiros e árvores de deslocamento e recursing em nós
criança entregue a criança direita, de repente, podemos classificar de ter concedido
como sendo incrivelmente esclarecedor se não um pouco frustrante
mas não quase uma maneira eficiente de percorrer cerca de programação.
E assim, com estas linguagens de alto nível como JavaScript
nós vamos ser capazes de navegar esta árvore muito mais intuitiva.
>> E de fato a sintaxe vai ser bastante familiar.
Se você nunca viu JavaScript antes, esta é uma referência muito bom
do pessoal do Mozilla, as pessoas que fazem o Firefox,
assim me sinto livre para procurar que a sua conveniência.
O que você vai encontrar - e esses slides são idênticos aos que usamos no outro dia -
similarmente, principal está desaparecido.
Então, quando você escrever um programa em JavaScript, não há nenhuma função principal.
Você acabou de começar a escrever código.
Mas uma distinção fundamental entre JavaScript e C e PHP
é que, enquanto C e PHP, até agora, ter sido executado do lado do servidor
pelo aparelho, neste caso, ou mais geralmente, por um servidor,
JavaScript por projeto é geralmente executado por um navegador.
Em outras palavras, você pode escrever código JavaScript, como estamos prestes a,
em um servidor no aparelho, mas você incluí-lo entre seu HTML, entre o CSS,
entre os seus GIFs e seus PNGs e seus JPEGs
de modo que quando o usuário visita a página web, se você estiver usando JavaScript,
que o código JavaScript vem do servidor para o navegador,
e é o navegador que realmente executa.
Então, isso tem implicações significativas para a propriedade intelectual, mesmo.
É uma espécie de bobo para pensar sobre como proteger seu IP quando se trata de código JavaScript
porque, por natureza da linguagem que é executada normalmente lado do navegador.
>> Você pode ofuscar, o que significa que você pode fazê-lo parecer louco e feio
com nenhum espaço em branco, horríveis nomes de variáveis, para tornar mais difícil para as pessoas para roubar o seu IP,
mas o fundamental é que ele é executado lado do navegador.
Mesmo que um lado do servidor como de lado JavaScript pode ser usado,
o caso de uso mais comum agora ainda está no navegador.
E aqui é o que parece. Aqui é um if-else if-else construir apenas como C, assim como PHP.
Aqui é uma expressão booleana quando você "ou" 2 coisas juntos.
Aqui é quando você "e" duas coisas juntas.
Aqui está uma instrução switch, que é semelhante ao PHP
em que você pode alternar em diferentes tipos de valores.
Loops semelhante tem loops aqui, que são estruturados de forma idêntica ao que nós já vimos antes.
Enquanto laços; temos fazer enquanto loops.
Variáveis, sempre tão ligeiramente diferente.
Você declarar variáveis, como você faz em PHP e C,
mas igualmente é fracamente JavaScript digitado.
Você não especificar int ou float ou string ou qualquer coisa assim normalmente.
Você pode especificar var.
Você não tem que especificar var, mas tem implicações se não o fizer.
Normalmente, se você omitir var, você acidentalmente criar uma variável global em vez de local.
Então deixe-me propor que você quase sempre apenas dizer var e então o nome da variável.
Não é um tipo, é apenas para a variável var.
Este seria um exemplo, se é 123 ou "Olá mundo".
Matrizes estão presentes e sintaticamente semelhante ao PHP.
Eu vou dizer números var e então eu usar colchetes novamente para declarar uma variável
cujo tipo é matriz que tem esses números específicos em que, separados por vírgulas.
E então, finalmente, este é o único que realmente parece diferente.
Lembre-se que em PHP que teria aplicado uma matriz associativa para um estudante
como Zamyla que pode parecer como este, em que a variável é chamado de aluno.
Os colchetes significam aqui vem uma matriz.
>> O fato de que eu não estou usando índices numéricos mas cordas - id, casa, e nome -
significa que esta é uma matriz associativa,
e essas flechas com o sinal de igual eo suporte angular
significa que a chave é "ID", o valor é 1;
a chave é a "casa", o valor é Winthrop House;
a chave é "nome", o valor é Zamyla Chan.
Portanto, há três chaves dentro desta matriz associativa, cada qual tem seu próprio valor.
Nós vimos que em pset 7, ou você em breve, em JavaScript mesma idéia,
mas isso vai ficar assim.
Estudante para var - sem sinal de dólar e nenhuma menção de tipo ainda, mas var -
iguais e abra chaves porque em JavaScript, quando você tem pares de valores-chave,
você realmente usa algo chamado um objeto.
E aqueles de vocês que demorou APCS ou similar pode se lembrar de objetos Java
ou línguas semelhantes.
JavaScript não é Java, em primeiro lugar.
Foi uma decisão deliberada anos atrás projeto para derrubar outra coisa que era popular,
o seu nome, mesmo que não tem qualquer relação fundamental Java em si.
JavaScript possui objetos, e você cria-los por meio da notação chaveta.
Objetos em JavaScript são praticamente equivalentes a arrays associativos em PHP
quando se trata de armazenamento de dados para dentro delas.
>> Mas, ainda mais poderosa em JavaScript você pode associar facilmente funções
dentro de um objeto, e que você pode fazer isso em outros idiomas,
é bem um paradigma comum, como vamos ver.
Em suma, este objeto representa um aluno, que é particularmente Zamyla,
e é semelhante conceitualmente, apenas sintaticamente diferente deste.
Vamos realmente usar JavaScript em um arquivo.
Acontece que há uma tag script.
Temos visto uma marca de estilo e vimos outras tags HTML.
A tag script realmente irá conter algum código JavaScript.
Deixe-me ir para dentro do aparelho onde temos algum código fonte pré-feita.
Eu não tenho postado ainda no site, mas eu vou fazer isso depois da aula.
Vamos abrir um presente, blink.html.
Na década de 1990, houve literalmente uma tag HTML chamado de tag piscar de olhos,
e esta foi uma das marcas mais maravilhosamente demasia na Internet
pelo qual você visitar alguns década de 1990 página web estilo e começar a ver texto piscando-lhe assim,
os resultados da tag marquês, que tinha texto, indo assim.
Uma das poucas vezes em que o mundo foi realmente estabeleceram um padrão web,
todos através da placa matou a tag piscar há alguns anos.
Mas podemos ressuscitá-lo com JavaScript como uma demonstração do poder que você tem
quando você pode escrever um programa dentro de uma página web.
Primeiro vamos pular a coisas novas e se concentrar apenas na idade.
>> Aqui está o material antigo neste exemplo.
Eu tenho uma tag HTML, uma marca de cabeça, e um título de tag.
Então eu tenho uma tag corpo aqui com uma div, que recall é apenas uma divisão retangular da página
que eu tenha dado um único ID arbitrariamente de "saudação" para,
só assim eu tenho uma maneira de exclusividade referindo a ele, que tem um texto muito simples:
Olá, mundo.
Agora deixe-me ir até o topo do arquivo e ver o que há de novo.
A primeira coisa que é top-se novo é a tag de script,
e dentro do aviso de tag script que eu tenha declarado uma função.
Para declarar uma função em JavaScript, bastante semelhante ao PHP,
você literalmente escrever função, então o nome da função, entre parênteses,
e talvez alguns argumentos se tomar qualquer.
Então eu tenho a minha chaveta como de costume, e agora temos um código um pouco novo,
mas vamos ver o que isso significa.
Então div var, isto significa apenas dar-me uma div chamada variável.
Eu poderia tê-lo chamado foo, mas eu queria que ele seja chamado div
por razões que ficará claro em um segundo.
Em seguida, ele se transforma em JavaScript - e este é o código JavaScript embutido na minha página da web -
há uma variável global especial do tipo chamado de documento.
JavaScript é na verdade uma linguagem orientada a objetos.
Nós não vamos entrar em detalhes em 50, como o que isso significa,
mas por agora saber que um objeto é muito bonito como uma estrutura.
Como vimos caminho de volta quando, em um dos mais antigos conjuntos de problema
onde vamos colocar um monte de informações em uma estrutura,
da mesma forma é documentar uma estrutura especial que vem com o navegador,
vem com qualquer página da web. Não é algo que eu criei.
Dentro desta estrutura do documento, porém, você tem não apenas dados
mas você também tem funções.
>> E a qualquer momento que você tem uma função dentro de uma estrutura, dentro de um objeto,
é chamado de método. Mas é a mesma coisa.
Um método é uma função que só acontece a estar dentro de outra coisa.
Então isso significa que esta variável global especial chamado de documento
tem uma função chamada getElementById que literalmente faz isso.
Ele vai te um elemento do DOM, Document Object Model árvore,
cuja identificação é nesta saudação caso.
Em outras palavras, todo o tempo que passamos em estruturas de dados entra em jogo aqui.
Esta imagem de um DOM que tivemos um momento atrás,
mesmo que a página é um pouco diferente, se eu tivesse uma div na foto,
document.getElementById que voltaria para mim seria efetivamente um ponteiro
para o retângulo na árvore, uma referência para o retângulo na árvore.
Então, isso é o que significa, na verdade, chamar uma dessas funções.
Neste caso, mais uma vez é uma div. Não é um corpo ou um título.
Então, vamos ver o que eu faça com este div agora que eu tenho isso dentro deste div variável chamada.
Acontece com JavaScript você tem a capacidade de ajustar o CSS da sua página dinamicamente.
Até agora, todo o CSS que fizemos, embora limitado, é em atributos de estilo,
ou onde mais nós colocar CSS?
Eu meio mimada que um. Na etiqueta de estilo no topo do ficheiro.
Ou o terceiro lugar foi em?
>> Um arquivo externo, alguma coisa. Css.
Então esses são os três lugares que fizemos CSS, até agora,
mas o problema é que já codificado tudo.
Você decidiu que você mergulhou pset 7, decidimos antes de palestra que o nosso CSS seria.
Mas se você quiser mudar o seu CSS, você pode realmente fazer isso
uma vez que você tem uma linguagem de programação real.
CSS, HTML - linguagens de programação não. JavaScript é.
Assim, verifica-se que, logo que você tem um desses retângulos da árvore
chamado o DOM, tem-se alguns dados dentro dela.
Assim, o div que eu simplesmente peguei a partir da árvore tem o que nós vamos chamar uma propriedade no interior do mesmo
chamado de estilo, e tem a propriedade de estilo em si uma propriedade chamada visibilidade.
Eu gostaria de saber isso só de olhar-se um manual de usuário CSS.
Acontece que há uma visibilidade propriedade CSS que faz o que diz.
Ele faz algo visível ou não, visível ou não.
E como você faz que é isso.
Estou pedindo programaticamente se a visibilidade deste div está oculto,
o que eu mudar para? Visível.
Outra coisa se a visibilidade desta página não está escondido, logicamente eu não torná-lo oculto.
Eu não tenho idéia por que é visível e oculto e não é visível e invisível.
Esta foi uma decisão má concepção ao longo do caminho.
Mas esses são de fato opostos em CSS: visíveis e ocultas.
Tudo isso faz é que significa alterar o CSS do meu arquivo e fora, dentro e fora
para que div particular.
Mas, novamente, esta é uma função chamada piscar de olhos. Quando é que a função de piscar chamado?
Acontece que há uma outra janela especial variável global chamada,
similares em espírito documento, mas que o documento se refere a sua página web,
como a árvore DOM, o HTML que você enviado do servidor,
janela se refere ao cromo em torno dele, a barra de endereço, a barra de título,
e todo esse material em torno de sua página web.
>> E verifica-se que o objeto da janela tem uma função especial dentro do que chamou de setInterval
que faz o que diz.
Ele irá definir um intervalo - neste caso a cada 500 milissegundos -
e, dar um palpite, o que é que vai fazer a cada 500 milissegundos?
Vai para executar essa função piscar.
E o que é bom aqui é que poderíamos ter feito isso em C mesmo que nunca fizemos.
C tem algo chamado de ponteiros de função onde você pode passar em torno de funções
como argumentos.
Da mesma forma em JavaScript você pode passar o nome de uma função para outra função.
E notem que eu estou fazendo. Eu não estou fazendo isso.
Se eu colocar parênteses após o piscar, isso significa chamar a função de intermitência.
Se eu omiti-los, isso significa que aqui é a função de piscar
para que setInterval pode chamá-lo a cada 500 milissegundos.
Assim, o resultado final, atroz que seja, é que se eu entrar em localhost e ir para blink.html,
Agora tenho isso acontecer de novo e de novo.
E se eu realmente Inspect Element, vamos ver se podemos ver isso.
Deixe-me Inspect Element, deixe-me rolar um pouco,
deixe-me escolher Elementos mais aqui, e observe o interior DOM do inspector do Chrome.
É literalmente mudando e para trás a cada 500 milissegundos.
Se formos para o nosso amigo de Nate,
Se você já se perguntou como isso está funcionando idéia, semelhante com um intervalo,
mas Nate está realmente fazendo uso muito eficaz de cor, neste caso particular aqui.
Então, o que mais podemos realmente fazer com isso?
Vamos abrir um outro exemplo e tentar algo
isso é programaticamente ainda mais útil do que fazer piscar coisas.
Deixe-me ir em nosso diretório formas hoje e ir para form0.
Esta foi a forma mais feia possível que eu venha com,
e deixe-me mostrar-lhe o que parece em um navegador.
>> Deixe-me entrar em localhost / formas, e isso é form0.
Esta é uma forma feia de super HTML que tem alguns campos de e-mail, a senha,
senha e, em seguida, uma caixa pequena de concordar com alguns termos e condições.
O problema é se eu visitar esta forma e eu não quero dar-lhe o meu endereço de e-mail,
Eu não quero a concordar com os termos e condições, talvez, eu possa clique em Registrar
e deixa-me através de qualquer maneira.
Isso acontece se submeter a um arquivo PHP chamado estúpido dump.php.
Tudo que faz é imprimir os conteúdos de $ _GET apenas para fins de diagnóstico.
Isso foi o que foi apresentado pelo usuário agora.
Mas suponha que realmente deseja validar a submissão do form do usuário.
Deixe-me ir para a versão 1.
Este é form1.html. Parece esteticamente tão ruim, mas repare como ele é fantasia.
Se eu clique em Register sem cooperar, eu fico gritado.
"Você deve fornecer seu endereço de e-mail."
Tudo bem. Então deixe-me tentar isso. Então malan@harvard.edu. Eu não preciso de uma senha.
Registre-se. "Você deve fornecer uma senha." Tudo bem.
Então eu vou fornecer uma senha de carmesim. Registre-se.
"As senhas não coincidem." Eu tenho que digitar aqui agora carmesim.
Eu acidentalmente verificado isso. Registre-se.
"Você deve concordar com os termos e condições." Tudo bem. Concordo lá. Registre-se.
E agora ele me mostra a saída de diagnóstico por lá.
>> Então, o que aconteceu?
Nós tivemos essa capacidade de validar as submissões de formulário.
Na verdade, se você fez mergulhar em pset 7, há uma função de desculpar
que o torna muito fácil de gritar com o usuário com uma mensagem na tela.
Eu estou usando um mecanismo um pouco diferente, a função de alerta,
o que não é uma função que está em cima sorriu uma vez que torna mensagens de usuários muito feias.
Mas vamos ver o que eu estou fazendo aqui.
Este é form1.html, e perceber que eu tenho alguma sintaxe muito familiar:
tag corpo, tag de formulário, atributo de ação, atributo método.
Mas note que eu dei a minha forma uma identificação única para a conveniência.
Então eu tenho um campo de e-mail cujo tipo é texto,
um campo de senha, cujo tipo é campo de confirmação de senha, cujo tipo é a senha,
e, em seguida, uma caixa de seleção, cujo nome é acordo por aqui, é tipo caixa de seleção.
E então eu tenho um botão de envio.
Mas repare no topo o que mais eu tenho.
Primeiro de tudo, há um outro uso da tag script.
Se você tem algum código JavaScript em outro arquivo, assim como com CSS você pode incluí-lo.
E você faz isso com fonte do script, e depois perceber que eu estou conectando aparentemente
para googleapis.com para um caminho muito longo, mas cujo nome do arquivo termina em jquery.min
para mínimo. js.
jQuery é uma biblioteca super popular para JavaScript que só faz JavaScript
tudo o mais user-friendly para usar.
É efetivamente se tornar um padrão de fato.
Assim, mesmo que o que você está prestes a ver não é puro JavaScript, por si só,
é uma biblioteca em cima de JavaScript muito parecido com a biblioteca CS50 é uma camada
em cima do código de baixo nível C, a realidade é quase todos na Internet usa.
Então, essas não são as rodas de treinamento. Este é apenas o melhor praticar estes dias.
Agora veja abaixo que é meu tag script próprio, e observe o que eu fiz aqui.
Acontece que o jQuery faz algo um pouco de fantasia.
JavaScript tem cifrões, mas eles não fazem sentido.
>> Eles são como a letra A ou B ou C.
jQuery simplesmente adotou a convenção ou tipo de reivindicou para o fato de
que US $ será o seu símbolo especial.
Assim, logo que você carregar este arquivo JavaScript global até aqui com a tag script,
você tem acesso a uma variável global especial que é chamada $.
É mais apropriadamente chamada jQuery, mas que não parece tão sexy quanto $.
Mas US $ não tem nenhum significado especial. No PHP teve significado especial.
Você tinha que ter isso na frente de uma variável.
Esta é apenas uma coisa sexy que eles assumiram.
O que está acontecendo aqui?
Repare que eu estou passando para a função jQuery meu documento variável global
e então eu estou chamando. pronto.
O jQuery essencialmente faz é que permite que você tome algumas coisas JavaScript baunilha
como o objeto documento, o objeto janela,
e se você passá-lo para a função jQuery -
e, novamente, para ser claro, esta é uma função chamada jQuery -
o que ele faz é que você volta a uma versão especial de documento
que tem mais funcionalidade associada a ele.
Assim, em JavaScript cru não há nenhuma função pronta,
mas se você passar documento para a função jQuery primeira,
ele retorna a você uma versão especial do objeto do documento
que tem características mais extravagantes.
E é por isso que as pessoas gostam dele. Ela só faz as coisas mais fáceis de fazer, como estamos prestes a ver.
Então, o que esta linha de código significa?
Esta linha de código aqui significa quando o documento está pronto -
em outras palavras, uma vez que o navegador é terminar de ler este arquivo de topo para baixo -
vá em frente e executar a seguinte função.
O que é realmente interessante em JavaScript - e PHP tem isso também -
é funções anônimas.
Em JavaScript você pode declarar funções que não têm nome, mas eles têm um corpo.
Observe o que está acontecendo aqui.
>> Esta é uma função chamada pronto, e isso significa apenas fazer o seguinte
quando a página web inteira está pronto, quando tudo foi lido a partir do servidor.
O que você quer fazer? Eu quero executar um pedaço de código.
Observe que nós não queremos executar esse código imediatamente.
Se eu omitido isso, isso significaria começar imediatamente a execução destas linhas de código.
Mas o fato de que eu estou dizendo não, não, não, envolver este em uma função anônima como esta
significa não executá-lo ainda, chamá-lo, eventualmente.
Vimos isso há um momento em nosso formulário de exemplo anterior.
Qual a função que chamamos eventualmente, a 500 milésimos de segundo mais tarde? Blink.
Assim, a mesma idéia.
Mais uma vez, mesmo que isso parece um pouco estranho, apenas tomar de agora em fé
que para declarar uma função anônima que se chama, eventualmente,
você simplesmente escrever function () {
Então, o que o código que vamos executar, eventualmente? O seguinte.
Isso também parece um pouco novo, mas isso significa que aqui é a função jQuery,
e este agora é um atalho.
Este trecho de código HTML na parte inferior da tela, claro, tem alguma representação árvore.
Não é isso. Esta página é mais interessante do que este exemplo Olá mundo.
Mas há alguma árvore que corresponde a este HTML.
Seria uma dor no pescoço para ter que implementar algum tipo de função recursiva
para começar no nó raiz e, em seguida, encontrar o nó cujo ID é o registro.
Então, o que faz com jQuery super fácil para nós é literalmente isso.
Vá em frente e me qualquer div ou qualquer forma, qualquer que seja elemento HTML
tem um ID de registro.
Isto é equivalente a document.getElementById ('Registro').
>> Por que pessoas como jQuery?
Porque é mais curto para digitar. Mas isso é tudo o que é. É a mesma idéia.
Tirem-me a tag cuja identificação é o registro.
E quando essa marca, que passa a ser uma forma, é submetido,
vá em frente e executar o código.
Portanto, vamos ter um olhar agora como estamos fazendo validação de formulário.
A sintaxe é reconhecidamente enigmática no início, mas o que está acontecendo?
Se esta linha de código é verdade, eu vou gritar com que o usuário forneça o seu endereço de e-mail.
Então o que é esta linha de código?
$ Significa jQuery. Agora, observe isso.
Este é tipo de como CSS.
Se você já mergulhou em CSS, no entanto, você sabe que isso significa que o elemento cuja identificação é o registro.
O espaço significa encontrar uma criança ou um descendente de inscrição, cujo nome é de entrada.
E então essa coisa entre colchetes é um filtro pouco.
E mesmo se isto parece enigmático, isto significa apenas ir para o formulário cujo ID é o registro,
ir para o interior do elemento de entrada que cujo nome é e-mail,
e em seguida, obter o seu valor, qualquer que seja o seu valor passa a ser -
asdf se isso é tudo o que eu digitado ou malan@harvard.edu se é isso que eu digitei.
Então, se o valor do campo do formulário de e-mail == nada, gritar com o usuário.
Outra coisa, se o valor do campo de senha == nada, gritar com o usuário.
>> Else, se o valor do campo de senha não é igual ao valor do campo de confirmação
que era o elemento outra forma, gritar com o usuário.
E então, finalmente - e esta também tem algumas nova sintaxe própria,
mas uma vez que você já viu, é pelo menos um pouco mais razoável -
mais se o formulário cujo ID é o registro tem um elemento de entrada, cujo nome é acordo
e é marcada, vá em frente e gritar com o usuário.
Então, eu totalmente admitir que este é completamente esmagadora à primeira vista.
É um monte de nova sintaxe. Mas todos jQuery segue estes tipos de padrões.
E honestamente, eu nem sabia que isso existia até poucos minutos atrás.
Eu Googled: "Como é que você verifique se a caixa de seleção está marcada em jQuery?"
e esta é a sintaxe, porque há maneiras diferentes de fazê-lo
com real código JavaScript prima.
Assim como a primeira página do Conjunto de Problemas 7 enfatiza,
pset 7 é muito mais um exercício de inicialização se
onde nós fornecemos, espero, um quadro conceitual com que para enfrentar o pset.
>> Mas, como é frequentemente o caso com web design, cabe a você realmente dar uma fuçada,
incorporar trechos de código e exemplos a partir da Web, desde que você citá-los
acordo com os termos em que a primeira folha,
e perceber que aprender HTML, CSS, JavaScript e até SQL
é realmente pretende ser este exercício em casa, quando começamos a tomar essas rodinhas.
E perceber também que há tantas coisas mais que você pode fazer com um navegador.
Dentro da maioria destes elementos há outras coisas chamados manipuladores de eventos.
E mesmo que apenas olhou para os chamados onsubmit e onReady,
você pode fazer coisas como onkeydown, onkeyup,
como quando o usuário toca uma tecla, você pode ouvir isso e para cima.
O Gmail tem atalhos de teclado.
Como o Google implementar atalhos de teclado, como C para compor?
Eles ouvir eventos, como são chamados, como onkeypress ou onkeyup e onkeydown.
Se você já pairava o mouse sobre alguma opção de menu
e, de repente, pronto, aparece um menu ou muda de cor gráfico,
como eles estão fazendo isso?
Ao invés de ouvir onReady ou onsubmit, você ouvir onmouseover ou onmouseout.
>> Assim, em breve, com estes princípios muito simples que nós começamos a arranhar a superfície de hoje
e vamos mergulhar ainda mais para na quarta-feira, que tem, cada vez mais,
poder de implementar os tipos de coisas que você já está familiarizado.
Então vamos terminar lá, e nós vamos continuar esta quarta-feira.
>> [CS50.TV]