DAVID MALAN: Tudo bem, estamos de volta. Assim, para o emocionante Concluindo, a nossa última seção em programação web, que eu pensei que iria usar como um termo geral para capturar alguns tópicos restantes. Assim, no final do dia, vamos realmente fazer um pouco de hands-on de programação web com uma linguagem chamada JavaScript. E eu acho que nós vamos dar uma olhada em algo relacionado a imagens e descobrindo algo secretamente escondida em uma imagem, e também dar uma olhada no Google API do Google Maps, de programação de aplicativo interface, como algo representante do tipo de software que é cada vez mais e livremente disponível hoje. Mas por que não dar uma olhada em um ingrediente para este mundo que nós tipo de estado dando por certo existe durante algum tempo, uma base de dados. Para o dia passado e meio que já assumiu que temos acesso a um banco de dados, mas o problema é que um banco de dados de resolver? O que ele faz por nós? O que é isso? AUDIÊNCIA: [inaudível] DAVID MALAN: Contém todas as informações, OK, e que tipos de informações pode você colocar nele? AUDIÊNCIA: [inaudível] DAVID MALAN: Qualquer informação você colocar nele, você vai voltar. Isso é verdade. E em um site baseado na web típico ou web aplicação, que tipos de informações, Especificamente, você pode colocar em? AUDIÊNCIA: [inaudível] DAVID MALAN: Usuários. Assim que é um usuário? AUDIÊNCIA: [inaudível] DAVID MALAN: OK, registrado usuário do site. E o que significa Information Store 'usuários? O que compõe um usuário? Um usuário tem o quê? AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, pessoal de dados, e eu gosto disso. Vamos ser mais preciso. Assim, um usuário normalmente tem um nome, o que mais pode um usuário têm? AUDIÊNCIA: [inaudível] DAVID MALAN: An OK addr--, Então, primeiro nome, sobrenome. Isso é bom. Na verdade, vamos consertar isso, porque ele vai para abrir-se para uma oportunidade discussão, ainda, mais longe. Primeiro nome, último nome, sexo. Um ID de algum tipo. O quê mais? Eu ouvi outra coisa antes, também. Um e-mail, endereço postal. Então, vamos fazer uma pausa lá e agora considerar não o que está armazenando no banco de dados, Mas-- e por que não, uma vez que é, talvez, evidente que uma vez que você registrar um usuário, você quer lembrar-los por algum tempo. Você não quer que ele apenas ser armazenado na RAM e ser assim forgotten-- vamos nos concentrar em como. Acontece que em o mundo dos bancos de dados, há pelo menos dois tipos estes dias. Algo chamado um banco de dados SQL, Structured Query Language, ou, de maneira fofa nomeado, NoSQL, que não é SQL. E o último é um exemplo do que pode ser chamado de uma orientada a objetos, ou um armazenamento de objeto, um banco de dados que armazena objetos, e não, desculpa mim, como veremos em breve, linhas. Então, vamos nos concentrar por um momento em O primeiro destes, a saber, um SQL banco de dados, se só porque é tão familiar já, a ninguém que tenha usado o Excel ou Folhas do Google ou a Apple Números ou qualquer padrão programa de planilha, ou, de forma equivalente, ou mais sofisticada, algo como Microsoft Acesso ou Oracle ou MySQL ou PostgreSQL, todos os quais são nomes de produtos para implementações da seguinte idéia. Um banco de dados relacional é simplesmente algo que tem linhas e colunas. E por linhas e colunas, Eu literalmente significar algo como este, por isso, onde nós pode ter a nome de um campo e seu tipo aqui. E, na verdade, deixe-me agora começar a mapear estes. Então, na verdade, eu não sei por isso que eu desenhei um gráfico separado. Vamos manter este simples. Temos aqui a primórdios da nossa mesa, onde este é o nome do campo e este é o tipo de dados, e por tipo quero dizer o seguinte. É um número, é uma cadeia, uma corda curta como uma palavra, é um parágrafo, é dados binários, como uma imagem? E vamos provocar este separados por apenas um momento. Então, primeiro nome, número, corda, grande pedaço de texto-- AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, por isso string. E em um contexto de banco de dados, nós vamos normalmente chamar este campo caractere. Vou apenas dizer carvão para agora, mas estamos indo para refinar isso em um momento. campo de caracteres. Último nome é provavelmente o mesmo. Gênero? Homem ou mulher, por isso, poderia ser um campo carvão animal. Poderia ser qualquer citação, fecha aspas "Macho" ou citação, fecha aspas "feminino" ou pode ser ou f m. Se você quer ser mais inclusiva, você pode precisar de um terceiro valor ou algum tipo de outro campo completamente. E assim você poderia usar verdadeiro falso. O campo poderia ser chamado de sexo masculino, e em seguida, você poderia dizer verdadeiro ou falso. Mas isso não significa necessariamente capturar todas as informações que você pode querer. Então não é que há um outro tipo de campo que pode ser útil aqui numa base de dados típico, denominado enum, onde é um campo de caracteres, mas você, o designer, chegar a enumerar os valores possíveis, como citação, "macho" fecha aspas, citações, unquote "feminino" e assim por diante. De modo que qualquer valor está na sua base de dados, é realmente baseado em caracteres, mas que tem de ser um daqueles valores. É provável que não quer um enum para o primeiro ou último nome. Caso contrário, teríamos para enumerar, como o nome deriva, literalmente todos os possível primeiro nome e sobrenome. OK, então ID que deve um ID ser? Sim, talvez por isso um número. Então, vamos ficar com que, por enquanto, número. E por número, o número é um pouco demasiado ampla agora. Para o final do segundo dia, eu sinto que nós deve ser um pouco mais precisa. Número poderia dizer como, é Poderia ser algo como 1.236. E isso não é provavelmente o que entendemos por um ID. O que nós provavelmente quer dizer com um ID? AUDIÊNCIA: [inaudível] DAVID MALAN: Oh, OK, então talvez não seja mesmo um número. Talvez seja realmente um identificador exclusivo que é uma string, como um nome de usuário. Então, absolutamente, pode ser. Eu acho que alguém, provavelmente, significava numérico, embora. Então, vamos ficar com isso. Que tipo de número? O que é um mais precise-- um inteiro. Assim, um número como 0, 1, 2, 3, por isso vamos chamar isso de um inteiro. E mesmo assim, eu poderia ser picuinhas, é não é realmente apenas um integer geral que quiser. Você provavelmente não quer valores negativos, apenas porque, ele só se sente estranho. Você provavelmente quer inteiros positivos. Então você também pode expressar que numa base de dados, mas por agora, vamos dizer inteiro. O email? Este é provavelmente só-- o quê? AUDIÊNCIA: [inaudível] DAVID MALAN: É um e-mail, mas isso é caracteres, certo? Ele só tem um caráter descolados como um símbolo "arroba" ou qualquer outra coisa, mas ainda é um campo de caracteres. E endereço postal? campo de caracteres. Então isso é um bom começo, mas vamos ser um pouco mais preciso agora. Assim, verifica-se que em um banco de dados, muitas vezes você tem uma escolha sobre o mais refinado versões dessas coisas. De fato, em um banco de dados SQL típica, SQL, ou, mais geralmente, banco de dados relacional, bancos de dados com linhas e colunas, muitas vezes você chegar ao especificar não só do tipo de a field-- deixe-me fazer algum espaço aqui-- mas também o comprimento. Então, quanto tempo é um primeiro nome? Eu acho que, D-A-V-I-D. OK, entendeu I provavelmente apenas ofendido como metade das pessoas na sala, direita, desde que seus nomes são mais do que cinco letras, então cinco parece um pouco egoísta e ingênuo, então o que é um valor melhor? 10, tudo bem, e eu acho que estamos bem no quarto. 13? 30? Por que não tomar a abordagem de antes, quando nós estavam falando sobre matrizes e memória? Por que eu não apenas dizer como 1000? nome de ninguém vai para ser mais longo do que 1000. Empurrar para trás. AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, é desperdício, à direita, especialmente se a maioria dos nomes são apenas cinco ou 10 ou 15 caracteres, isso é muito dispendioso. Então você sabe o quê? Este é tipo de uma pergunta difícil. Agora, certamente podemos analisar Inglês e nomes de qualquer outra língua e descobrir, assim, qual é a média média-- realmente não ajudar US-- o que é o máximo é provavelmente o que realmente queremos. Mas acontece que temos até alguma escolha sobre o tipo aqui. Em um banco de dados SQL típico, você ter algo chamado um campo de char e também um VARCHAR, V-A-R, para o campo de char variável. E a diferença é esta. Um campo char, você o designer, tem que especificar antecipadamente o comprimento exacto do campo. Então, talvez o primeiro nome como 20 sente tipo de seguro. Pode ter que fazer algum googling para ver se isso é realmente seguro o suficiente. Há provavelmente um nome com 21 caracteres, mas por agora, suponha que 20 é seguro. Um campo de char implicaria numa base de dados que lhe estão utilizando 20 e sempre 20 caracteres. Agora, se é só D-A-V-I-D, 15 dos são apenas vai ser caracteres em branco, mas você ainda está usando todos os 20 bytes. Um campo VARCHAR, pelo contrário, entende-se a string deve ser de até 20 caracteres mas se é apenas cinco, você só vai usar cinco, ou talvez seis para um valor especial no final, assim 0 discutimos que significa o fim de um carácter sequência na memória. Então, quando você pensa você pode escolher de char contra varchar, dado que trade-off? Char usa que muitos personagens, varchar não utiliza mais do que muitos caracteres. AUDIÊNCIA: [inaudível] DAVID MALAN: OK, quando você sabe o comprimento da corda muito convincente usar apenas char, porque se conhecê-lo, basta colocá-lo para baixo. E talvez isso é verdade para um zip código, em os EUA, pelo menos, 02138, ele está sempre vai ser de cinco caracteres até que você adicione o traço quatro. Mas você pode ter alguns valores para que você sempre sabe o comprimento. Ou talvez símbolos do Estado, como NY em Nova York, e MA para Massachusetts em os EUA. Talvez você tem algumas situações onde isso é totalmente razoável, mas por essa lógica, por que Nós até cismar isso? Por que nós não apenas usar varchar e, em seguida, vamos apenas sempre use dois caracteres de qualquer maneira, ou use sempre cinco caracteres de qualquer maneira? Por que não apenas salvar varchar para tudo, por essa lógica? Deve haver um prendedor. AUDIÊNCIA: [inaudível] DAVID MALAN: Poderia escrever algo errado. Então, isso é verdade. Mas, mesmo assim, eles não podem usar mais memória do que eu alocar. Eu ainda tenho a final dizer ao longo do comprimento, então eles não podem acidentalmente fazer esse erro, mas um bom pensamento. É mais sutil, mas é muito relacionada para a nossa discussão, na verdade, de matrizes e listas ligadas anteriormente. Acontece que um banco de dados, se sabe-se que todos os valores sejam de um comprimento fixo, mesmo se alguns desses valores estão em branco, tipo de estética em branco, D-V-A-I-D e em seguida, 15 vazios, verifica-se que se cada campo é o mesmo comprimento, bem como uma série teve todo o seu material de costas para trás para trás, como se você poderia apenas mais 1 para chegar ao próximo valor, mesma idéia em uma tabela de banco de dados. Se todos o seu personagem strings são o mesmo comprimento, você tem o que é chamado de acesso aleatório. Se todas as cordas são de comprimento de 20, você não apenas fazer mais 1 você acabou de fazer mais 20, mais 20, mais 20, mais 20, e você pode muito rapidamente percorrer ou busca através de todos os seus dados. Um campo de char variável, pelo contrário, nem sempre tem 20 caracteres. Ele pode ter 20 e, em seguida, 15 e, em seguida, 19 e, em seguida, 10, e por isso, se você deseja pesquisar através dele, você não pode apenas cega adicionar 20 bytes para chegar ao próximo. Você literalmente tem que pesquisar porque a borda da estrutura de dados, se quiserem, é irregular. É o tipo de entra e sai base no comprimento real da cadeia. Então, quando você sabe o comprimento, como Kareem diz, use um campo char, porque você ganha aquela eficiência de ser capaz de pesquisar através lo mais rápido quando você está olhando para os dados, caso contrário, use uma variável. Infelizmente, eu não tenho uma boa resposta a quanto tempo o nome deve ser, mas para algo como um nome, eu diria um varchar é comum porque ele não vai ser um comprimento fixo para todos. 20, eu não sei, 20 sente um pouco apertado. Vamos apenas dizer que 50, 50. Realmente não custar-lhe que muito mais a dizer 50 em vez de 40, mas em algum momento, você precisa para fazer uma chamada de julgamento. Muito comum, francamente, para [? histórico?] razões, mesmo que seja excessiva, quer dizer 255, porque há algum tempo, em sistemas de banco de dados populares, como MySQL, uma ferramenta gratuita de código aberto que um monte de empresas como até mesmo no Facebook usado, este foi o padrão máximo para que as pessoas só fui com ele. Assim, não é razoável, mas vamos usar um pouco mais de intuição e dizer, com certeza 50, que é provavelmente um pouco excessivo. Sexo, eu gosto de enum, e por isso, portanto, pode enumerar macho ou fêmea, ou talvez de forma mais eficiente, m ou f ou outra simbologia, mas enum se sente como uma boa escolha lá. Para ser claro, o sexo poderia ser apenas um varchar, e nós poderíamos apenas tudo Concordo pessoas como agradáveis, a sempre colocar os mesmos valores lá. Macho ou fêmea ou outros enfeites. Mas o problema, então, é que poderíamos cometer um erro, como [inaudível] propuseram anteriormente em um contexto diferente. Se cometer um erro, poderíamos obter valores incorretos no nosso banco de dados. Então, o que é agradável sobre bancos de dados como Oracle e MySQL e outros, é que você tem esta última camada de defesa, onde o administrador DBA, banco de dados, quem está projetando esta tabela como nós são verbalmente, poderia colocar no lugar uma enumeração que que protege contra especificando masculino, feminino, e assim por ninguém outra coisa qualquer programador pode acidentalmente inserir qualquer outro valor. Então, isso seria uma coisa boa. Esta é uma característica. Assim, um ID, assumindo uma identificação numérica, ele provavelmente deve ser um inteiro positivo. E nós, por vezes, têm oportunidade para discutir comprimento. Você não faria normalmente especificar um número aqui, você, ao invés, especificar este é um int, ou um grande int, como eles são normalmente chamados. Mas, normalmente, um número inteiro seria, digamos, 4 bytes. E se é 4 bytes, isso é quantos bits? AUDIÊNCIA: [inaudível] DAVID MALAN: 32 bits. Então, quantos usuários que podemos ter na nossa base de dados se todos eles têm um ID e este ID tem de ser único? 32 bits significa que temos padrões de um, dois, três, quatro, five-- Assim como muitos padrões diferentes de zeros e aqueles que você pode ter se existem 32? Isso é a mesma coisa que perguntando o que há de dois a 32? É um grande número que Eu não consigo acertar, mas eu sei que é cerca de 4 bilhões de dólares. Então isso significa que sua tabela de banco de dados pode tem quatro bilhões de usuários e é isso. Portanto, este é um interessante implicação design. Um número razoável de empresas decidiram, talvez não tanto para a sua tabela de usuários, porque ter 4 bilhões de usuários é um problema raro. Esta é uma espécie de Facebook de estilo problema, e não um problema típico empresa. Mas talvez se você tiver logs de transação ou algum tipo de dados que constantemente é escrita em seu banco de dados que absolutamente poderia ter bilhões e bilhões de linhas e você usa um número inteiro para ele, o que vai acontecer assim que você começa a remar número 4 bilhões e, em seguida, tentar inserir o 4000000000 e 1, por assim dizer? Estou simplificando um pouco os números. Você pode cortar para trás, quero dizer que você tem que lidar com isso de alguma forma. E o que um computador seria normalmente fazer, pensar sobre ele mesmo a partir desta manhã, se você tiver um valor de 4 bits como 1, 1, 1, 1, a qual, apenas para amarrar a manhã em conjunto para a tarde, o que representa este número em binário? OK, vamos torná-lo mais fácil. O que esse número representam em binário? OK, vamos torná-lo mais fácil, o que isto representa em binário? AUDIÊNCIA: Três. DAVID MALAN: Três, porque temos os column-- [RISO] Ufa! Tivemos a coluna queridos e a coluna dois. Então suponho que, de fato, o nosso [? infield?] não eram de 32 bits, mas eram dois bits, podemos contar a partir do número 0, 1, 2, 3 usuário, e então nós estamos tipo de de volta ao usuário 00 novamente. Então, isso é o que normalmente acontece. Se você já ouviu a expressão-- Provavelmente não, mas se você have-- integer overflow, onde você manter lançando todos os seus pedaços ser os maiores valores possíveis, e então você está fora de bits, o que normalmente acontece? Por que eu digo 00? Bem, este é três. Como faço para representar 4? Como faço para representar o para o número 4 em binário? AUDIÊNCIA: [inaudível] DAVID MALAN: um-- sim, não digo 100 per se, porque tem o errado conotação, mas 1-0-0. Assim, esse número é de facto 1-0-0 correto, mas se você só tem dois bits, o que você realmente fez? Você rolou para 00. E, de fato, é o que iria acontecer. Na verdade, você pode pensar sobre isso mais familiarmente. Se bem se lembram, o que, 16 anos atrás, o mundo deveria terminar quando o problema Y2K aconteceu. Por que isso? Assim a maioria dos computadores, para decisões razoáveis, foram armazenar números como o ano de 1975 ou o ano de 1999 apenas usando dois dígitos na memória do computador. Então, é claro, o que acontece quando você chegar ao ano de 2000, você vai a este, ou melhor, sim. Então você vai para o ano de 2000, mas se você só está usando dois dígitos que parece como o ano 00 e então você rolou. E é por isso que um monte de sistemas precisava de ser actualizado no momento. Assim, com o que disse, empresas como a Facebook ir contra isso. Portanto, a única maneira de lidar com o situação, francamente, é antecipar-lo. Ou a maneira mais limpa para lidar com esta situação é antecipar-lo para que você não tem que fazer mudanças mais tarde. Então, em vez de 8 bytes, você sabe o quê? Eu vou ser com visão de futuro aqui, mesmo que seja um pouco otimista de que vamos ter 4 bilhões e 1 utilizadores no nosso site. Mas vamos usar apenas 8 bytes, ou 64 bits, o que geralmente seria chamado de um grande número inteiro, muito técnico. E isso significa apenas que você pode ter ainda mais dígitos no seu número. Mas esta é uma importante decisão de design, porque se você escolher um número que tem também alguns pedaços de expressividade você realmente pode criar um bug no software. Tudo bem, então vamos encerrar com e-mail e endereço postal. Assim, e-mail, quanto tempo deve um endereço de e-mail ser? 50. Eu realmente não tenho idéia, mas é provavelmente algo parecido, porque caso contrário, ninguém vai escrever-lhe se ele fica muito tempo, então 50, vamos ir com ele para agora. endereço postal, quanto tempo deve ser? AUDIÊNCIA: [inaudível] DAVID MALAN: Não é apenas um código postal, embora. endereço postal, ouvi. Então, isso é como uma Brattle Square, vírgula, Cambridge Mass., vírgula, 02138. E, na verdade, deixe-me puxar um pouco planilha aqui. Este parece que é uma oportunidade perdida. Se temos 1 Brattle Square, vírgula, Cambridge MA 02138, Eu sinto que nós podemos fazer melhor de endereços, basta postal. Por que não vamos explodir esta um pouco? O que estou querendo chegar? O que devemos sim ter para as nossas linhas aqui, talvez? AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, então vamos chamá-lo street_number, e um sublinhado é apenas uma comum forma de ter o que parece ser um espaço, mas não é, na verdade. Street, e depois cidade-- pena? AUDIÊNCIA: [inaudível] DAVID MALAN: Nós poderíamos fazer isso. Linha um, linha dois. Por que não vamos manter -lo simples por agora, mas isso é absolutamente uma decisão aceitável. E então estado, e depois vamos ser um pouco centrado nos EUA por enquanto e apenas fazer CEP, só porque ele vai levar a um erro interessante ou problema aqui. Então suponho que é agora o nosso endereço. É um pouco mais irritante que temos todas essas mais campos, mas agora podemos marcar as coisas um pouco melhor. número Então, agora rua, provavelmente, não deve ser um char, deveria? O que deveria ser? AUDIÊNCIA: [inaudível] DAVID MALAN: Talvez, um número como um número inteiro de novo? Um grande número inteiro? Você provavelmente não vivem em 4 bilhões Main Street ou qualquer coisa louca assim. Assim inteiro é provavelmente bem, mas tem ninguém já viveu em um endereço como 1A Brattle Square, ou 1 e 1/2? que essas coisas existem, infelizmente, mesmo se você não viveu lá, existem essas anomalias como o apartamento 1A, 1B, 1C. Então você sabe o que, provavelmente não deve ir com inteiro, caso contrário, vamos a perder algumas vendas. campo Char, talvez? Eu não sei quanto tempo. Provavelmente não vai ser tanto tempo, então 10 ou algo assim. Ninguém vai escrever um número mais longo, talvez. Mas, novamente, nós provavelmente deve dar mais atenção a isso. Talvez o Google, fazer alguma pesquisa, mas vamos ir com nossas entranhas para agora. Ruas, char, 50, eu não sei. Em algum momento, ninguém vai escrevê-lo em um envelope, também, então há provavelmente alguns limites superiores lá. City, mesma, com certeza, de modo carbonizar 50. Estado, pode ser centrado nos EUA por enquanto. Assim, poderia ser uma lista, portanto, tipo de uma chamada de julgamento, estado. Poderia ser como dois caracteres. Então, na verdade, talvez, eu não parava de dizer carvão. Eu provavelmente significa varchar, apenas por alguma eficiência, mas vamos voltar a essa decisão em um momento. Poderia ser um char de comprimento 2 para o estado. Se em os EUA têm, como MA, Massachusetts, Nova Iorque, Nova Iorque, Nova Jersey, Nova Jersey, e assim por diante. Assim, poderia ser fixada a isso. DC para Washington DC. Mas eu acho que, Olivier, você propôs uma outra abordagem. AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, por isso é uma pouco chato para digitar, mas uma enumeração poderia fazer mais sentido, porque desta forma, pelo menos para os EUA, você poderia enumerar, se tediosamente, mas você fazê-lo apenas uma vez em seu banco de dados e nunca mais ter que pensar sobre -lo, todos os 50 códigos de dois caracteres. Então, eu gosto enum. Vamos ficar com isso lá, porque que tipo de impõe mais rigor. E, em seguida, código postal? Acho que Andrew tinha um pensamento sobre esse AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, cinco ou nove. Vamos apenas mantê-lo simples. Basta fazer cinco por agora. Mas talvez eu só podia fazer um número inteiro, certo? Eu poderia, mas você sabe o que, eu fiz esse erro uma vez, em algum sentido. Anos atrás, eu estava migrando de Microsoft Outlook para o Gmail, e Outlook tem uma maneira de exportar todos os seus contatos como um arquivo do Excel, um arquivo CSV, separados por vírgula arquivo valores. E eu cometi o erro, I pensar, de clicar duas vezes nele, uma vez eu baixei a exportação, a certifique-se que parecia como eu esperava. Devo ter bateu salvar ou deixar auto-save chute no ou algo assim. Porque quando eu, em seguida, importados -lo em Gmail, tudo funcionou. Mas durante anos, até hoje, e Eu fiz isso cinco, 10 anos atrás, Eu ainda estou encontrando amigos que têm endereços que se parecem com isso. Por quê? AUDIÊNCIA: [inaudível] DAVID MALAN: Demorou a 0, assim, em vez disso, tomou todo o código postal como um número, e, portanto, é um 0 que significa não tem nenhum significado. E assim 2138 parece ser o meu código postal. E este é, francamente, um Excel irritante característica pela qual eu acho que por padrão, mesmo que isso significou apenas ser texto, Microsoft Excel decide, deixe-me ser útil, e oh, eu vejo apenas números. Vamos tratá-los como números. E ele trunca os zeros à esquerda. Juro por Deus, cada casal meses eu encontrar um endereço, e fora de um tipo de TOC, eu volto e adicionar a 0, apesar de eu nunca enviar cartas de pessoas ou qualquer coisa. Mas eu ainda estou encontrando restos desta. Então, isso quer dizer, isso é uma boa ideia? OK, não, porque ninguém em Massachusetts, nesta área, vai ter um o líder deles. Então vamos com gosto char, provavelmente, cinco. E aqui, percebemos que poderia usar um enum e nós poderia enumerar 10.000 possíveis códigos postais, mas isso parece que é, provavelmente, cruzando uma linha de, como, benefícios. Se tiver de entrada que muitos dados em seu banco de dados para proteger contra alguma coisa. Então carvão percebi que você poderia digitar na H-E-L-L-O como o seu código postal, o que não é, obviamente, numérico. Assim, não há nenhuma maneira, em uma base de dados típico, especificar apenas numérica e apenas cinco caracteres, por isso vamos ter fazer isso no código. Nós vamos fazer isso em PHP ou Java ou qualquer outra língua que estamos usando no servidor para fazer cumprir esse tipo de restrição. Whoo! Tudo bem, então todas as perguntas apenas ainda? Vamos fazer uma outra decisão de design. Acontece que você também terá de escolher, ao projetar um banco de dados SQL, ou database-- típicos relacionais onde novamente, relacional apenas significa linhas e colunas, é assim que você organize suas data-- e perceber que o que isto significa é, Eu tenho enganosa no que, estou drawing-- este é o que é chamado de esquema para uma tabela de banco de dados. Isto é como o especificações para a mesa-- mas quando chega a hora para realmente armazenar dados, e vamos fazer isto, basta exemplo aqui. Vou abrir Excel, porque Excel vai me dar linhas e colunas. E isso é exatamente o que a Oracle e MySQL e outras ferramentas vai me dar. Então, eu estou indo só para usar -lo por causa de discussão. Deixe-me ir em frente e abrir uma documento representativo aqui, ampliar um pouco. Assim, por exemplo, os nossos cabeçalhos estão agora primeiro nome, último nome, sexo, ID, e-mail, número da rua, rua, gritos. Rua, cidade, estado, apenas sobre se encaixa na tela. Então, o que isto significa é que quando um usuário se registra pela primeira vez para o meu site, ele vai ser algo como David, Malan, m, digamos 1, malan@harvard.edu, número da rua vai ser como uma Brattle Square, Cambridge, MA, 02138, e em seguida assim por diante. Então, quando eu digo que um banco de dados relacional ou banco de dados SQL é linhas e colunas, Eu queria dizer isso. Que os dados reais são armazenados em linhas e colunas. Esta é apenas uma coincidência, que estávamos falando, e eu estava apenas puxando-o em fileiras e colunas. Este é apenas o esquema, a definição global. Então desses campos aqui, ou equivalentemente, lá, quais são os campos que você pensa Eu sou provavelmente a pesquisar sobre se eu sou um usuário ou se eu sou o administrador do banco de dados? Como, o que eu sou campos na verdade, indo para procurar? AUDIÊNCIA: [inaudível] DAVID MALAN: O nome, sim de modo Eu gosto do fato isso-- sim, e-mail pode ser bastante comum. Desculpe, você disse o nome. Então maybe-- e novamente, estamos tipo de falar em abstracto. Eu não sei por que você iria estar à procura de um nome, mas que se sente razoável se você estiver procurando por um usuário. Talvez afirma, com certeza, ID. E é uma escorregadia declive, porque eu podia inventar um cenário onde talvez o meu chefe me pediu, quantos homens temos em nosso site? Quantas mulheres que temos em nosso site? E assim, nesse ponto, você pode querer para procurar no campo de gênero, também, e nada mais. Portanto, há um trade-off aqui. Novamente, não há nenhuma resposta certa, mas há é uma característica na maioria dos bancos de dados SQL conhecido como indexação, em que você, o designer, o administrador de banco de dados, começa a decidir antecipadamente quais Campos O banco de dados deve otimizar para pesquisas em. Você poderia muito ingenuamente dizer, otimizar isso, otimizar isso, otimizar isso, otimizar isso e isso, e o banco de dados fazer alguma coisa mágica debaixo do capô, e fazer algo de tal forma que a próxima vez que você pesquise em qualquer um destes campos, vai, de facto, ser mais rápido. Isso é possível. Ele não anula a si mesmo. Mas deve haver um preço a pagar. Se você ingenuamente, ou excesso de entusiasmo digamos, o índice de todos esses campos, por assim dizer, torná-los todos eficientemente pesquisável, qual o preço que você está pagando provavelmente? AUDIÊNCIA: [inaudível] DAVID MALAN: Performance. O que você quer dizer? Bem desempenho, pelo menos a contexto, eu estou discutindo, é melhor agora. Essa é a definição de indexação. Isso fará com que as pesquisas mais rápidas. Assim, o tempo diminui, por assim dizer. AUDIÊNCIA: [inaudível] DAVID MALAN: Space. Então, novamente, estes são um comércio comum. Posso acelerar suas pesquisas, mas é vai custar-lhe mais bytes de espaço. Por quê? Bem, por padrão, se temos nenhum estas estrelas vermelhas, nenhum desses índices, como eu estou dizendo, como você procurar para um nome neste banco de dados? Então, vamos chamar a nossa atenção para este exemplo. Se temos David e Scully e Kareem e Arwa e outros nestas linhas, por exemplo. Então, vamos fazer exatamente isso. Scully está aqui, e depois temos Kareem, e Arwa, e todos os outros, se não o fizer tem um índice definido, por assim dizer, o melhor que você pode fazer é procurar linear. Se você procurar por Arwa, não estamos vai ser capaz de saltar para a direita para ela rapidamente. Nós vamos começar a parte superior e percorrer todo o caminho até o fundo, não muito diferente de nosso original exemplo Mike Smith. Se, no entanto, eu digo, hey, banco de dados, índice do primeiro campo de nome, em seguida, ele vai fazer alguma coisa extravagante e apoiar algo como busca binária. Provavelmente não é a busca binária per se. Bases de dados tendem a usar outro estrutura de dados chamada de b-trees, não deve ser confundido com árvores binárias, que apenas torná-lo mais rápido para procurar algo logarítmica na natureza. Mas o preço que você paga para construir essa O recurso, que a estrutura de dados na memória, é mais bytes. Então, isso pode levar alguns megabytes, alguns gigabytes, quem sabe? Depende dos dados. Então, em algum momento, você tem que decidir, provavelmente não é um caso comum. Então, quais são o comum real casos, se você realmente tivesse que escolher, o que poderia seus campos favoritos ser? O email. E eu gosto de e-mail porque e-mail, em teoria, deve ser único. E assim normalmente, quando você sabe de antemão que um de seus campos é ou será único, que tende a ser um bom campo para procurar, porque dessa forma, quando você procura por algo, você vai receber de volta uma ou zerar respostas e, em seguida, você está feito. Você não tem que manter procurando outros ainda. E assim, neste caso aqui, e-mail, contanto que você não pode registrar duas vezes com o mesmo e-mail, é uma boa. ID por definição, no mundo da informática, se você está falando de um ID, que tinha melhor ser único. Isso é o tipo de conotação de ID ou identificador. E o resto deles pode ser, vamos chamá-los bom haves, mas não é realmente necessário. E assim, em um banco de dados, você especificar índices, mas pode ser ainda mais preciso. Você pode dizer, hey, banco de dados, certifique-se que cada ID nesta tabela é única. Não deixe nem mesmo um programador acidentalmente colocar em um e-mail duplicado ou duplicar número de identificação. Tão parecido com enums proteger-nos da mesma forma, você pode ter essas defesas de nível inferior. E assim por projeto de banco de dados, em certo sentido, é uma espécie de diversão, porque você fazê-lo na defensiva. Você tipo de supor que você trabalha com os programadores horrível, horrível e você quer colocar em tantas defesas como você pode proteger seus dados, mas ao mesmo tempo você quer para ajudá-los a ter um melhor desempenho escolhendo quais campos para otimizar. Mas você não pode necessariamente fazê-lo em um vácuo como nós tipo de está aqui. Você tem que saber quais são Nesses casos comuns estar. Se os desenvolvedores estão implementação de um livro de endereços, você pode muito bem querer ser capaz a pesquisa em quase todos os campos, apenas pela natureza da aplicação. Então, talvez você gasta que espaço adicional. Certo, alguma pergunta? Sim. AUDIÊNCIA: [inaudível] DAVID MALAN: Não. AUDIÊNCIA: [inaudível] DAVID MALAN: OK. AUDIÊNCIA: [inaudível] DAVID MALAN: Ah, então nós estamos falando de uma maneira agora que é completamente independente de linguagem. Portanto, estamos falando agora sobre bancos de dados relacionais de forma mais geral, ou SQL bancos de dados de forma mais geral. AUDIÊNCIA: [inaudível] DAVID MALAN: A palavra melhor para usar é, pode ser utilizado por qualquer linguagem. Então, eu posso escrever o código JavaScript, C código de código, C ++, Java de código, código Ruby, todos os quais falar para uma banco de dados e executar consultas. Na verdade, isso não é um mau Segue para uma consulta de exemplo. E, novamente, não vamos entrar em Java ou C ++ ou qualquer um dos que mais, mas em SQL, a linguagem a que me manter referindo-se, Structured Query Language, este é em si uma linguagem de programação, mas que está destinado a ser utilizado para, não surpresa, estruturado consultas de consulta. Por isso quero dizer isso. A maneira como você selecionar dados a partir de um banco de dados MySQL é que você, literalmente, digite em seu programa algo como select estrela dos usuários. Estou assumindo que esta tabela, é doravante chamado utilizadores. Eu poderia chamá-lo de qualquer coisa que quisermos, mas esse tipo de faz sentido. E assim select é muito verbo comum, se você vai, em SQL, que, literalmente, faz isso. O que você acha estrela significa, neste contexto,? AUDIÊNCIA: [inaudível] DAVID MALAN: Eu sinto muito? AUDIÊNCIA: [inaudível] DAVID MALAN: Não é necessário, é mais inclusiva do que isso, na verdade. É o caractere curinga. Estrelar quase sempre significa alguma coisa, então isso significa, neste caso, selecionar tudo do banco de dados. Portanto, quando digo isso, quero dizer me devolva cada coluna da minha tabela chamada usuários. Então me dê um conjunto de resultados, como é chamado. Em outras palavras, dá-me uma cópia do planilha, é o que eu estou chegando. Mas se eu dissesse selecione estrela de usuários onde ID é igual a 1, quão grande deve meu conjunto de resultados seria então? Ou equivalentemente, quantas linhas devem I ser entregue de volta a partir do banco de dados? Provavelmente apenas um, se eu tiver de fato ID tratada como um identificador único, e se David tem que ID único, I deveria voltar uma e apenas uma linha contendo todas as informações de David. Se eu disse isso, onde ID é igual a 99, eu deveria voltar, Neste contexto, zero linhas, pelo menos no momento. No entanto, se eu realmente não me importo sobre toda essa informação, Eu poderia apenas dizer, onde é que David viver? Escolha um código postal de usuários onde ID é 1. Isso irá selecionar somente a mim zip de David código e não a totalidade dessa linha. Por que eu poderia fazer isso em vez de a consulta estrela, o wild card? AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, eu só poderia precisar dele. Assim, o desempenho é mais uma vez a resposta aqui. Por que pedir mais informações do que você precisa, porque mesmo que está tudo bem em conjunto, você ainda tem que copiar os dados, ao que parece, a partir do banco de dados em seu programa de alguma forma, e que é bobagem se você só precisa de cinco desses dígitos, Não é a totalidade da fila. Então, como posso inserir um usuário? Suponha que um usuário tem apenas registado pela primeira vez. A sintaxe normalmente seria parecido com este. Inserir usuários e então diríamos valores, e então nós diria valores como, digamos, Lauren Scully, nosso cinegrafista aqui. E o próximo campo é o género. Então, vamos dizer citação, fecha aspas "F", então temos uma identificação e eu vou dizer-- vamos fingir que ela não é realmente aqui, por isso vamos retroceder na história. Então 2 será seu ID. E então o próximo campo aqui é o seu e-mail. Por isso, vai ser como Lauren Scully e assim por diante, e vamos Dot Dot dot-lo daqui por diante. Agora vai ficar um pouco tedioso, mas a consulta de inserção acabaria por se parecer com isso. Se eu quiser se livrar de Scully, uh-oh, vamos cancelar -la, ela exclui sua conta, excluir de usuários onde ID é igual a 2, vai se livrar de Scully. Ou eu posso dizer atualizar usuários definir, vamos dizer, o que poderíamos mudar? Suponha que ela se move. Set zip é igual a 021-- não, é ela zip atual. 90210. O único outro código postal Eu sei que no mundo. Assim que mudaria ela zip code-- na verdade, que não mudaria seu código postal. O que acabei de fazer? Mesmo que a sintaxe é provavelmente novo. AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, eu me mudei todos para Beverly Hills, Califórnia. Então, eu deveria realmente dizer onde ID é igual a 2. E assim por diante. Então SQL é tudo sobre estes tipos de instruções. SELECT, INSERT, excluir, atualizar com estes predicados na extremidade estas cláusulas, onde, por assim dizer. E há muito mais você pode fazer, mas é realmente apenas se resume simplesmente, se arcanely, expressando o que você deseja que o banco de dados para fazer. E, em seguida, a base de dados vai descobrir, quando inserir Lauren Scully para o banco de dados, onde colocá-la na memória para que possamos obter muito rapidamente -la com base em seu endereço de e-mail ou com base no seu número de identificação ou outros semelhantes. Sim, Dan. AUDIÊNCIA: [inaudível] DAVID MALAN: Realmente boa pergunta. Será que esses scripts mudar de Microsoft Access para o Oracle ao MySQL para PostgreSQL? A resposta curta é ele depende. Em teoria, há uma muito subconjunto comum significativo de SQL que é compartilhado entre todos essas implementações. No entanto, vários fabricantes tem características adicionadas aos seus bancos de dados para fazer certas coisas além do escopo desses recursos, que pode, de fato, quebrar. Assim, a maneira desenvolvedores proteger contra isso, é que ao invés de escrever em bruto código SQL que estou escrevendo aqui, eles ao invés de usar uma biblioteca, uma biblioteca comum que a própria é uma espécie de alto-nível e resumos distância, que produto que você está usando. E dá-lhe funções e procedimentos para chamar para que você nunca realmente escrever SQL puro. Em teoria, então, você pode mudar produtos da Oracle para Microsoft ou vice-versa, ou qualquer coisa outra coisa, e você literalmente mudar nada sobre seu código. A realidade, porém, é, às vezes você desistir de recursos como resultado. Você pode ter escolhido um produto porque ele tem esses recursos de valor agregado, e você está agora não usá-las conscientemente. E informalmente, a maioria das empresas tendem Nunca se afastar do seu banco de dados. Assim, enquanto este é um bom tem recurso, a realidade é, se você está revendo seu banco de dados, você está provavelmente fazendo cachos de outras alterações de qualquer maneira, que você não necessariamente precisa antecipar isso. Portanto, é indiscutivelmente over-engenharia do problema, mas realmente depende do contexto. Mas, em teoria, o SQL é compartilhado entre estes diferentes produtos. Realmente boas perguntas. Sim. AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, então você pode pensar um banco de dados é apenas um servidor, no final de do dia, e no interior do referido servidor é um monte de tabelas, linhas e colunas. E quando você envia uma consulta como esta a partir do programa, o seu site, escrito em Java, Ruby, Python, qualquer que seja, o servidor está recebendo este comando e interpretando-a literalmente, da mesma forma discutimos anteriormente com linguagens interpretadas, e, em seguida, realizar alguma ação sobre a zero ou mais linhas em zero ou mais tabelas. AUDIÊNCIA: [inaudível] DAVID MALAN: Exatamente, exatamente. Assim, o pseudocódigo para algo como isso pode ser isso. Em seu arquivo PHP ou o seu arquivo Python ou seu arquivo de Java, você teria de código pseudo-código, ou Risco-como blocos como, se visitas de usuários acme.com/register~~V pela primeira vez, em seguida, inserir usuários e assim por diante. E gostaríamos de traduzir isso para código mais concreto no final. Mas, realmente, temos tudo os blocos de construção aqui, mesmo que nós estamos ignorando alguns das etapas de implementação. Então deixe-me encontrar a falha com o que nós maravilhosamente fez apenas um momento atrás. Você criou uma bonita tabela completa para os usuários. É certo, poderíamos implementar -lo em algumas maneiras diferentes, mas você tem realmente nos levou abaixo a path-- e eu digo-lhe, mas é provavelmente o meu fault-- de um bastante banco de dados de aplicação ineficiente. Não é normalizado. E por normalizada quero dizer lá vai ser, ao longo do tempo, uma redundância significativa, e, por conseguinte, ineficiência, que é desperdício de espaço. Com base em apenas o que você vê aqui, pode você imagina que este desperdício de espaço vai vêm, ao longo do tempo, à medida que mais e mais usuários registar para o seu site? O que os dados podem tornar-se redundantes? AUDIÊNCIA: [inaudível] DAVID MALAN: Por que você quer dizer isso? AUDIÊNCIA: [inaudível] DAVID MALAN: Yeah. E vamos supor que para os fins de hoje que isso é verdade. Acontece que, e nós aprendemos isso da maneira mais difícil, isso não é verdade. De alguma forma, várias cidades têm, de alguma forma, o mesmo código postal, que quebra essa intuição maravilhosa. Mas vamos supor que isso seja verdade, porque é quase sempre verdadeiro. Então, suponhamos que um código postal é sempre associada com a mesma cidade e do estado, que é uma espécie da suposição razoável, mas incorreta, verifica-se. Mas uma suposição razoável para fins de hoje. Em seguida, suponha que eu vivo em Cambridge, MA, de acordo com a tabela do usuário, e suponha que Lauren Scully vive em Cambridge, MA, e suponha que Kareem vive em Cambridge, MA, e Arwa vive em Cambridge, MA, todos nós, em 02138. Por que estamos lembrando Cambridge, MA, 02138 para todos os quatro de nós? O que deve ser suficiente para se lembrar? AUDIÊNCIA: [inaudível] DAVID MALAN: Apenas o CEP. Basta que existe 02138, porque você sabe o que poderíamos fazer? Poderíamos ficar um pouco sofisticados aqui e aqui, definir outra mesa onde é que isto vai ser o nome, este vai ser o tipo, este vai ser o comprimento, e daí em diante, eu sou vai chamar este meu cidades mesa. Isto foi chamado, de Naturalmente, a minha tabela de usuários. E então o que devo colocar aqui para o meu cidades mesa, que você acha? AUDIÊNCIA: [inaudível] DAVID MALAN: Yeah. Então zip e estado e cidade. E assim o tipo aqui, vamos dizer este vai ser um char 5 novamente, sujeitas ao debate de mais cedo. Esta será uma enumeração, talvez como antes, ea cidade será um varchar 50. E agora o que eu ganho para apagar a partir desta tabela para eliminar essa ineficiência? AUDIÊNCIA: [inaudível] DAVID MALAN: Nice. Estado e município ir embora, então eu tenho agora eliminada a ineficácia potencial de forma redundante lembrar, Cambridge, MA, Cambridge, MA, Cambridge, MA, Cambridge, MA, que, esperançosamente nunca vai mudar. E mesmo se isso acontecer, é minorly chato, agora que eu tenho que mudar -lo em várias linhas, enquanto que aqui, eu só podia mudá-lo em um só lugar. Agora, qual é o trade-off, talvez? Este foi super conveniente. Tinha todos os meus dados bem juntos. Mas o que é claramente o caso agora? AUDIÊNCIA: [inaudível] DAVID MALAN: Exatamente, e eu sou feliz que você usou a palavra juntar-se, porque essa é realmente a palavra-chave, no mundo dos bancos de dados relacionais em SQL, é uma palavra real você pode digitar ou pelo menos transmitir. E, na verdade, o que temos agora que fazer para seleccionar a informação completa de David é algo como selecione Estrela usuários, participar de cidades, on-- e agora Eu vou apenas mover para uma segunda linha de modo que esta é igual a users.zip fits-- cities.zip, onde users.ID é igual a 1. Então o que está acontecendo? É feio olhando, mas você pode tipo de lê-lo esquerda para a direita, de cima para baixo. Select estrela de usuários é o mesmo que antes, mas não é dos usuários, por si só. É de usuários se juntar cidades. O que eu estou juntando essas duas tabelas em? Bem, aparentemente, o usuários mesas zip campo, e este período é apenas especial sintaxe para expressar essa idéia, e esta é a cidades tabelas campo zip. Eu quero aqueles dois para ser igual, mas eu quero para selecionar, em última instância apenas as linhas onde ID na tabela de usuários é igual a 1, que passou a ser meu. E só para ficar claro, a programador, tipicamente, quando codificar algo como o número 1, porque caso contrário o site só suporta David ou o primeiro utilizador, em vez disso fazer algo como ID, onde isto representa um variável, que algo pode mudar ao longo do tempo, similar em espírito para o que eu disse anteriormente com esses tipos de espaços reservados. Mas, por agora vamos apenas codificá-lo como um. E então o que é que isto significa? Bem, uma boa maneira de visualizar isso é que, se esta mão é a tabela de usuários, e este lado é o zips mesa, nós somos tipo de finding-- e as pontas dos meus dedos estão zip aqui, e as pontas dos meus dedos aqui estão zip, você está tipo de intertravamento que de modo que você receber de volta o que resulta tabela original, por realmente se juntar as duas tabelas no campo comum. E não tem que ser fecho de correr. Poderia ser mais que qualquer outra coisa, mas zip é bom, porque um, é curto, dois, é sempre a mesmo comprimento, então não há uma verdadeira eficiência para o Olivier aqui proposto com factoring o zip, e [Inaudível] propondo que se livrar da cidade e estados. Portanto, este é o processo conhecido como normalização. Qualquer dúvida sobre isso? Bem, deixe-me salientar este é o tipo de coisa, mesmo que seja bastante baixo nível, Nesta discussão, que você pensaria você está tipo de obtenção perdido nas ervas daninhas, esta é uma manifestação de um amplo oportunidade para os desenvolvedores de ser ruim. E, na verdade, mesmo quando, em cursos que eu ensinei, quando nós tivemos, por exemplo, inexperiente programadores de graduação construir sites, à primeira vista, os sites podem olhar fantástico. E eles têm todo o funcionalidade foi solicitada, os desenvolvedores fizeram um bom trabalho. Mas eles não sabiam necessariamente o suficiente sobre o design de banco de dados ou eles não pensar muito o suficiente sobre os tipos de dados e os tipos de usuários das website ia ter, e nós achamos, então, seis meses depois, depois que se formou ou mudaram, que porra, o nosso website é realmente, realmente lento. E eu não estou nem falando de ter milhões ou milhares de usuários. Quero dizer algumas centenas de usuários no campus, todos os quais gostaria de, por exemplo, compras para cursos na Ao mesmo tempo, eles são usando esse catálogo de cursos aplicação mencionei ea coisa está ficando realmente lento porque não havia índices. Não houve estrelas vermelhas, por assim falar, ou não teve necessariamente fatoramos dados comuns a obter algumas economias de espaço. E assim, quando vetar um desenvolvedor ou pessoa base de dados ou semelhantes, os tipos de perguntas para pensar é ainda, aquando da revisão do código de alguém, quer dizer, não necessariamente olhar através de todo o seu código, mas dizer, vamos olhar através das tabelas de banco de dados. O que você está armazenando? E então a dizer, bem, espere um minuto, porque você está usando um número inteiro? E se temos 4 bilhões e uma destas linhas? E estes tipos de perguntas é uma oportunidade ao tipo de empurrar para trás e ter uma noção de onde se você não está confortável fazendo -lo, ter alguém mais técnico essas perguntas, de se ou não a pessoa realmente sabe seu material. E este é o tipo de coisas, também, que as pessoas na internet que são auto-didatas, talvez aprender com menos frequência, porque você não necessariamente se deparar com ela tanto, porque você pode obter o banco de dados instalado e funcionando, mas a menos que você já leu -se em tutoriais ou sido contou sobre normalização de banco de dados e indexação e desempenho, estes são os tipos de coisas que vão te machucar. E você poderia pensar, ou um mau engenheiro Pode-se dizer, oh, bem, nós melhores salários para uma base de dados maior ou uma base de dados mais rapidamente ou apenas jogar dinheiro com isso, escala vertical, não é necessariamente assim. Se você vai em-- e você pode ir em depois os índices fact-- e adicionar, e isso pode levar algumas horas para o banco de dados para construir que os novos dados estrutura que me referi anteriormente, você ainda pode corrigir isso depois do fato, que este é onde você começar a distinguir bons designers de bad os designers, não só esteticamente, mas em termos de performance também. Alguma pergunta? Não? Assim, para noSQL, que era o outro tipo de banco de dados a que aludi anteriormente, você não tem linhas e colunas. Em vez disso, você teria algo que parece um pouco mais como este. Vou usar uma sintaxe comum. chaves acontecer ser usado aqui bastante. Você pode ter algo como o primeiro nome é David, você pode ter passado nome é Malan, citações, você pode ter ID é-- desculpe-me, whoops-- ID é 1, e-mail é malan@harvard.edu, e não vou incomoda digitando o resto, e em seguida algumas outras coisas. Em outras palavras, esta é uma representação textual do que nós geralmente chamamos um objeto em um programa de computador. E um objeto é geralmente apenas uma coleção de pares de valores-chave. Então, novamente, este tema recorrente. Vimos pares de valores-chave em HTML, vimos pares de chaves de valor agora no contexto dos bancos de dados, e nós vi pares de chave-valor no contexto de, penso eu, uma linguagem mais cedo hoje. Continua a subir. E, de fato, isso é realmente os dados que se resume a, dados e metadados, ou valores e chaves, respectivamente. Assim, um não-relacional banco de dados, com base algo em objetos, onde apenas se aglomeram tudo junto e colocá-lo na memória, seria geralmente retratado como, ou pensado, como este. E eu vou deixar isso agora como um tipo de abordagem alternativa. E um não é necessariamente melhor do que o outro. Na verdade, muito em voga nos dias de hoje são sistemas de banco de dados como MongoDB e Redis e alguns outras ferramentas, disponíveis gratuitamente, mas eles estão cada vez mais em voga. Em parte porque eles oferecem adicional apresenta mais de estas abordagens tabulares, mas também porque eles são um pouco mais fácil de usar, porque você não tem que pensar tão duro sobre um monte dessas decisões de design. Então prós e contras. Então percebo que há opções além do que acabamos de passar tempo com. Então, vamos fazer isso. Vamos fazer a transição um pouco volta agora para a programação web, de modo que nós tipo de concluir hoje com algo Isso é um pouco hands-on, preenchendo algumas lacunas de ontem. Deixe-me ir a este primeiro. Então recordar que ontem tivemos alguns HTML canônica páginas que tiveram Inicialmente, apenas HTML, e em seguida secundariamente teve CSS, folhas de estilo em cascata. Esta é uma nova tag que não fez veja ontem, ou habitam sobre, chamado tag script. Acontece que você pode realmente incorporar um linguagem chamada JavaScript no seu web página e fazer o seu web páginas fazer alguma coisa. Então, o que quero dizer com isso? Bem, deixe-me ir em frente e apenas emprestar este código para um momento. Eu estou indo para ir para Cloud9, não há necessidade para ir lá vos ainda, e eu vou chamar este alert.HTML. Eu estou indo para colar no meu arquivo aqui. E só para esclarecer o que eu fiz, deixe -me ir para este endereço e ir para alertar, e você vê o Olá Mundo. Mas este é o tipo de underwhelming. Eu quero fazer algo um pouco diferente. Então, eu vou realmente fazer isso. Eu estou indo para ir aqui e, e entre as minhas marcas de script, dizem alert ( 'Olá, mundo "); então, observe é um pouco desleixado, mas eu tenho HTML, no interior dos quais é um linguagem chamada JavaScript, e é isso que é chamado de chamada de função ou chamada de procedimento. Este é um verbo, literalmente, neste caso, e eu estou chamando funcionalidade código que outra pessoa escreveu. Assim que a funcionalidade é um alerta, então vamos ir para esta página agora e clique recarga, e agora você ver um pouco de interatividade. É uma espécie de velha escola e feio. Este tipo de lembra-o da pop-ups, talvez, do passado mas fez fazer algo um pouco mais programática. Assim, mais do que isso, vamos fazer algo mais interessante. Deixe-me entrar aqui e se livrar dessa. E eu estou indo para ir em frente e criar uma forma como fizemos ontem. Na verdade, você sabe o quê? Eu estou indo para ir para google.html, que nós começou ontem, que parecia este, através do qual temos procurado por gato Mas note que há uma espécie de bug na versão atual. Ele trabalha para gatos, mas suponha que Eu não cooperar e eu digitar nada, e eu simplesmente clique em enviar. Esse tipo de comportamento estranho. me levou para o verdadeiro Google, não me deu uma mensagem de erro. Eu gostaria de dizer ao usuário você precisa nos dar um valor. Então, como podemos fazer isso? Bem, deixe-me voltar para Cloud9 e deixe-me ir para o topo da minha página e adicionar uma marca de script como este, onde Eu estou indo para escrever algum código JavaScript. E eu vou fazer o seguinte. Se (document.getelementByID-- e recordação que nós falamos sobre isso antes, essa função. O ID é que eu quero chegar? Eu quero ficar q, e eu vou digamos equivale a nada, como isto-- na verdade, deixe-me usar aspas duplas apenas para consistency-- é igual a nada, em seguida, alert ( "Por favor, escreva uma consulta") aqui. Então, eu tenho o que parece ser algo como uma condição. Nós vimos essa idéia geral no risco. É como um daqueles quebra-cabeça peças que olhou como esta. E o que estou dizendo? Bem, aqui em baixo, repare que eu sou vamos fazer o seguinte. Eu vou dar esta forma campo não apenas um nome de q, que é o que é passado para o Google, mas estou vai dar-lhe um identificador local, também chamado Q. Mas eu poderia chamar isso de qualquer coisa que eu quero, eu só vou mantê-lo simples e também chamá-lo q, apenas para simplificar. E agora eu vou fazer algo um pouco mais. Sobre os campos do formulário aqui, eu vou adicionar o que é chamado um manipulador de eventos. Em apresentar, eu quero chamar uma função chamada de validação. Isso ainda não existe, este palavra, ou isso validar verbo, porque o que eu vou fazer -se aqui agora é adicionar algum código. Eu vou dizer a função de validação. Eu estou indo para recuar este e adicionar outro chaveta aqui e outro aqui. Considere o que isso está fazendo agora. Eu tenho agora-- pensar nisso como criei o meu própria peça do puzzle que não tinha anteriormente existem, e eu chamei esse quebra-cabeça peça a peça de validação de quebra-cabeça. Seu objetivo na vida é executar as quatro linhas de código dentro do mesmo. Se document.getElementById de modo conceitualmente, que está indo para ir para o elemento, o elemento HTML cuja única idéia é apenas q, e, em seguida, mesmo que a sintaxe parece um pouco estranho, que a igualdade é igual significa apenas iguais. Então isso significa que se o elemento com o identificador único de q, quando obtido, não tem valor, ele apenas é igual a entre aspas, nada lá, então o que eu quero fazer? Quero gritar com o usuário. E nós não iremos grande detalhe aqui. Vou retornar falso. Que é um erro. Senão, eu vou retornar verdadeiro. Assim, ou ele funcionou ou não. Falso ou verdadeiro. E agora, se eu não cometer erros, deixe-me salvar este e recarregue esta. E deixe-me verificar apenas o dobro Eu não, na verdade, fazer quaisquer erros de digitação, então eu não me envergonhar. Vamos ver se isso funciona. Então agora eu vou digitar gatos. Ele ainda funciona, ou funciona meia, pelo menos. Agora deixe-me carregá-lo, e agora vamos me tente enviar sem digitar anything-- droga, ele quebrou. Um momento. Deixe-me abrir o console, [Inaudível] log, recarregue a página. Deixe-me tentar novamente. Oh, droga. Eu esqueci. Eu fiz um erro de digitação. Lembro-me o que é. .valor. Eu quis dizer se o valor do elemento cujo ID é q é igual a isso, então gritar com o usuário. Então, agora deixe-me prendo a respiração novamente. Aqui vamos nós. Aqui vamos nós. Por favor, escreva uma consulta. Portanto, não é me deixar passar. I podem ser tipo de brincalhão com isso, e em vez de verificação de nenhum valor, Eu posso dizer algo como: Chega de procurar gatos, e agora podemos apenas mais divertidamente deixá a busca do usuário para os cães se ele ou ela quer, ou se eu entrar aqui e procurar gatos, agora eu não posso. Então qual é o takeaway aqui? Então, um, nós introduzimos em nosso mundo de HTML e CSS, funcionalidade de programação. Eu posso realmente agora tomar decisões em código. Anteriormente, tudo o que eu poderia fazer é marcar conteúdo textual ou conteúdo gráfico e dizer-lhe o que procurar como e onde exibir. Agora eu posso realmente pedir perguntas da página web e tomar decisões baseadas sobre ele, e solicitar ao usuário se eu precisar gritar com ele ou ela. Então, vamos tentar algo no nosso próprio com este. Vá em frente, deixe-me abrir o próximo slide aqui, e apenas de salientar uma coisa. Assim como com CSS, podemos fatorar nosso código JavaScript para um arquivo separado, você pode fazer a mesma coisa com JavaScript como com CSS. E você usa que o uso de uma fonte atributo da tag script. Mas não vamos complicar as coisas para agora. Em vez disso, se você pudesse ir para não desta página, mas-- deixe-me mover esta em torno de order-- ir, se pudesse, esta página aqui. Este URL aqui. É em lâminas de hoje. Você pode ter que recarregar porque Eu adicionei um par de coisa. Mas vá lá onde alguns puzzles esperam. E isso vai nos dar uma chance, em um contexto um pouco mais divertido, a se envolver com algum JavaScript. E quando você chegar lá, Vou explicar o que espera. Obter verde. Definir azul. Define verde, define vermelho. Oops. Desculpa. Esta é a medida da nossa documentação para este desafio. E isso vai funcionar da seguinte forma. Então, o que você tem no presente A página é um monte de quebra-cabeças imagem por um amigo na Universidade de Stanford. Então, o que você está vendo aqui é quase tipo de um desses enigmas olho mágico, mas se você só olhar para ele, nada vai pop em você. Em vez disso, algo está escondidas nesta imagem. E está escondido da seguinte maneira. Imagens, como você sabe, pode ser composta de apenas três cores. Alguns vermelho, um pouco de azul, e um pouco de verde. E nós podemos fazer toda a cores no arco-íris misturando estes três cores de alguma forma. Portanto, este parece na maior parte verde e azul, mas como Nick diz aqui, esta imagem Enigma de ferro é um quebra-cabeça. Ele contém uma imagem de algo famoso, no entanto, a imagem foi distorcida. O objeto famoso é nos valores de vermelho. valores No entanto, o vermelho tem sido dividido por 10. Assim, eles são muito pequenas por um factor de 10. Portanto, em outras palavras, Nick tomou uma imagem original, e ele dessaturado todos do vermelho a partir dele, diminuindo a quantidade de vermelho tinta, se você, nele. Os valores de azul e verde estão apenas sem sentido, valores aleatórios, também conhecido como ruído concebidos para obscurecer a imagem real. Então, o que Nick fez foi ele atenuada ao vermelho e, em seguida, ele só jogou aleatório quantidades de azul e verde na imagem para tipo de obscura o que é, na verdade, ainda está lá. Você deve desfazer essas distorções para revelar a imagem. Em primeiro lugar, definir todos os valores azuis e verdes a zero para tirá-los do caminho, e olhar para o resultado. Então multiplicar cada valor vermelho por 10, escalando para trás até aproximadamente o seu valor final. O que é o famoso objeto? Então, tudo que você tem este retângulo no seu browser agora. E perceber que há alguma código inicial, por assim dizer. Este é o código JavaScript que Nick tem escrito para você. E note que não há uma linha no meio que começa com uma barra de barra, que é o que é geralmente chamado de um comentário. Significa que é uma frase para o programador que não tem nenhum significado funcional. É apenas uma sugestão visual para o ser humano. Assim, você pode ir em frente e excluir apenas essa linha, e ser super cuidado para não apagar ou alterar qualquer outra coisa. E deixe-me levá-lo através o que este código faz e eu vou deixá-lo a você para descobrir a imagem secreta. Esta primeira linha aqui que eu acabei realçado dá-lhe o seguinte. Do lado esquerdo, você tem o que é chamado uma variável que Nick tem arbitrariamente, mas razoavelmente chamado im para a imagem. No lado direito de que a igualdade de sinal, ele está dizendo me dar um novo Citação, fecha aspas "imagem simples". Imagem simples, neste contexto é o que é chamado de uma classe, bem, é como uma espécie de class-- tecnicamente um prototype-- mas realmente, isso está me dando um novo objeto, os conteúdos dos quais são o arquivo, ferro-puzzle.png. Em outras palavras, Nick criou essa noção de uma imagem simples para que possamos, por pedagógica propósitos, brincar com a imagem e alterar o seu vermelho, valores verde e azul. E como vamos fazer isso? Esta sintaxe um pouco enigmática aqui é como o bloco de repetição que alguns de vocês viu em risco anteriormente hoje, onde você pode repetir 10 vezes. Neste caso, Nick não tem codificado um número como 10. Ao contrário, ele está dizendo, inicializar uma variável chamada x a 0, verificar se x é menor que a largura da imagem. E de modo a ser mais adequada, é a imagem variável, ponto significa ir para dentro dele e obter a sua largura, e em seguida, parêntese aberto, fechado paren é apenas uma maneira de um programador de dizer isto é uma função. Este é um procedimento. Esta é a funcionalidade alguém escreveu. Usá-lo e dar-me de volta uma resposta. E, em seguida, x ++ é uma maneira elegante de dizendo, depois de ter feito isso uma vez, incrementar x por 1. Em outras palavras, esta é a maneira de um programador de induzir um loop que é indo para repetir todas as colunas em uma imagem. Uma imagem é apenas uma grade de pontos, linhas e colunas de pontos. Esta é uma forma de iteração sobre todas as colunas. E no interior, Enquanto isso, nós estamos interagindo sobre as alturas, aqui e aqui e aqui. Portanto, esta é apenas uma maneira de Traipsing, quase como uma máquina de escrever velha escola, apenas para passar por cima da imagem inteira de forma iterativa. Mesmo que não é bem integral claro, basta levar na fé, por agora, que estas três linhas de código são juntos vai permitir que você a olhar de forma iterativa em cada pixel, cada ponto na imagem. O que é um pixel? Bem, para ser claro, se olharmos no original e aumentar o zoom, se você realmente colocar seus olhos a tela do computador, que é apenas um monte de pontos, vários mil pontos embalados juntos lá. E então o que você está prestes a fazer? Cada um desses pontos, uma definição final, é o resultado do que é geralmente chamado RGB, vermelho, verde, azul, que mais uma vez, podem ser combinados para dar-lhe qualquer número de cores. Na verdade, se você se lembra de muitos, muitos anos atrás, ecrãs de projecção como estas coisas costumava ter nem uma lente, mas três. Um deles cuspiu luz vermelha, um dos -los cuspir luz verde, um deles cuspir luz azul. E se você estivesse em uma escola média como eu era, onde eles nunca foram alinhado corretamente, você era sempre assistir filmes de história que foram ligeiramente distorcida, porque as três cores não eram combinando adequadamente. Mas verifica-se que cada um dos estes valores de vermelho, verde e azul, pode ter um número que lhes estão associados. Por exemplo, 0 para o vermelho significa que não há vermelho, 0 para o verde significa que não há verde, e 0 para azul significa que não azul. Então, se você não tem nenhum vermelho, não verde, e nenhum azul, a cor que você tem? AUDIÊNCIA: [inaudível] DAVID MALAN: Você faria espero que sim, é branco. Infelizmente, este operates-- pena? AUDIÊNCIA: [inaudível] DAVID MALAN: Então você realmente tem preto, neste caso. Então se você tem nenhum destes cores ligado, você tem preto. No entanto, se você tem, digamos que um monte deles, como um monte de vermelho, 255 do mesmo, um monte de verde, e um monte de azul, que é branco. Então, esses são os dois extremos. Então, por essa lógica, se eu tenho um monte de vermelho e nenhum verde e não azul, que cor é essa? AUDIÊNCIA: [inaudível] DAVID MALAN: Certo, obviamente. E, em seguida, nenhum vermelho, muito verde, não azul, e, em seguida, se você have-- bem, vamos terminar que, apenas porque, mas isso, é claro, agora, é azul. E agora você pode combinar essas cores. Agora, como um aparte, se algum de vós tem já fez algum projeto real site, você pode realmente veja símbolos como este. FFF-- e, na verdade, é provavelmente nem isso. É FFFFFF. Alguém já viu F de e E do e A through-- de modo que parece, falamos ontem sobre decimal, e hoje, uma espécie de cerca decimal. Hoje falamos sobre binário. Acontece que, hexadecimal é muito sistema de base comum para usar em computação. Binário é dois, decimal é 10, hexadecimal é 16. E verifica-se, como fazer você contar em hexadecimal? Zero, um, dois, três, quatro, cinco, seis, sete, oito, nove, o que você usa depois das nove? Qual é o próximo número? Nós já utilizado zero. Preciso de 16 destes. Zero, um, dois, três, quatro, cinco, seis, sete, oito, nove, você precisa de alguma convenção arbitrária. E o que a humanidade decidiu algum tempo atrás, que depois das nove vem a letra A e B e, em seguida, em seguida, C. Assim, o maneira que você contar em hexadecimal é zero, um, dois, três, quatro, cinco, seis, sete, oito, nove, A, B, C, D, E, F, e que vai contar lo todo o caminho, ao que parece, a 15. Assim zero a 15 é igual a zero através F. Agora, por que é importante? Bem, quando você tem dois f, é assim que você expressar 255. Então, longa história curta, em o mundo do Photoshop, que o software de design gráfico, no mundo do desenvolvimento web, onde você tem muitas cores, é claro, para brincar, muitas vezes os programadores expressar aqueles em hexadecimal, só porque ele tende para ser um pouco mais simples. Mesmo que à primeira vista é muito mais complexa. Assim, em qualquer caso, esta é importante porque Nick at Stanford nos deu seis pedaços de funcionalidade que você, os programadores iniciantes, agora terá a capacidade de usar. Incorporadas a esse web A página é de seis funções, seis procedimentos que Nick escreveu. Três deles vai te dar um número, um vermelho, um verde, ou um valor de azul. Três deles irá definir esse valor. E estes sublinhados são apenas espaços reservados, de modo que você precisa saber quais são elas. Assim, com estas três funções, A primeira destas coisas vai ser uma coordenada x, e a segunda destas coisas vai ser uma coordenada y. Em outras palavras, o que pontilham, que pixels que você deseja obter o verde do, obter o azul, obter o vermelho do. E então aqui, este vai ser x, este vai ser um valor y, e isso vai ser um número. Então vamos fazer o primeiro linha deste conjunto e então eu vou deixar para você para tentar deduzir o resto. Assim, de acordo com as instruções nesta página, precisamos para aumentar a vermelho por um factor de 10, e precisamos remover o verde e remova o azul. Vamos começar com os últimos cenários. Então, se eu quiser, e eu vou para recuar usando alguns espaços, se eu quiser definir o vermelho, o verde, ou o valor de azul, Vou fazer o seguinte. Imagem, im.setBlue, e, em seguida com base em minhas instruções aqui, Quais são as três coisas que eu deveria tipo dentro de parênteses agora? Eu preciso o valor x, o valor y, e que número devo colocar aqui se eu quiser se livrar do azul, com base nessa história aqui? Apenas zero. Se eu não quero azul, eu sou apenas indo para alterá-lo para zero. Agora vamos recapitular o que isso está fazendo. Tenho aqui sobre estes topo segunda e terceira linhas, I alegou dois loops, loops aninhados, se você vai, que vai ter o efeito de progredir a partir da esquerda para a direita, cima para baixo sobre toda a X os valores e todos os valores de y. Porque mais uma vez, uma imagem apenas uma grade de linhas e colunas. Portanto, esta vai ficar livrar de todo o azul. Permita-me deixar na próxima linha para você. Como faço para me livrar de todo o verde? AUDIÊNCIA: [inaudível] DAVID MALAN: Nice. AUDIÊNCIA: [inaudível] DAVID MALAN: Nice. E eu vou diminuir o zoom, e apenas tomar o cuidado de que você não tenha feito quaisquer erros de digitação. E se você estiver confortável com o que você fez, vá em frente e clique no botão Executar / Salvar e ver o que você recebe. E mais uma vez, fizemos apenas três alterações. Nós excluído que o primeiro comentar e substituiu-o com estas duas linhas de código. E tudo bem se você precisa acertar o botão Run / Save algumas vezes para corrigir alguma coisa. E deixe-me também fazer zoom na minha código para que possa transcrever. Boa. Então eu vejo Andrew tem o que parece ser um erro. Ele só tem um grande preta retângulo em sua tela. Alguém tem um retângulo preto grande? AUDIÊNCIA: Sim. DAVID MALAN: retângulo preto grande? OK, então vamos pensar sobre o que isso significa. Dissemos que zero, zero, zero, para que o verde, não vermelho, não azul, vai dar-lhe preto. E verifica-se que a maioria dos nossos laptops simplesmente não têm fidelidade suficiente. Você não consegue dizer não é realmente algo lá. E se você tipo de talvez se inclinar sua tela para a frente e para trás, talvez você vê um coisinha lá? Talvez, tipo, espécie de? Não é perfeitamente preto. AUDIÊNCIA: [inaudível] DAVID MALAN: Spoiler! Há algum vermelho lá, mas lembre-se a partir das especificações do problema, Nick enfraquecida para baixo. Ele desaturated-lo um pouco, mas não todo o caminho para zero. Portanto, se queremos ampliar a quantidade de vermelho, deixe-me propor este truque. Deixe-me fazer zoom na tela. E deixe-me ir em frente e dizer quantidade igual im.getRed (x, y). Esta linha de código está me dando algo chamado uma variável. Eu tenho arbitrariamente, mas, sem dúvida, razoavelmente chamou minha variável que, pelo visto? Quantidade. quantidade justa. Eu poderia ter chamado ele qualquer coisa que eu quero, mas eu sou utilizando esta outra função que eu descrevi anteriormente para obter a quantidade de vermelho em x vírgula y. Por que eu faria isso? O que você quer fazer aqui? Você precisa add-- AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, talvez multiplicá-lo por 10. E se você não sabe isso, eu sou indo para ir em frente e fazer isso. Eu estou indo para ir em frente e por exemplo, eu quero a quantidade de vermelho Eu quero ser o que quer está no vermelho, vezes 10, ea estrela, o asterisco no seu teclado é as-- não usam x. Use a estrela. É assim que se multiplicam as coisas na maioria das linguagens de programação. Assim, de acordo com a intuição de Kareem, armazenado nesta variável chamada montante, é quanto vermelha Eu quero a xy localização. Como, agora, eu faço o que Pixel ter esse número? Você já fez isso antes. Você define o verde eo azul para nenhum valor, a zero. AUDIÊNCIA: [inaudível] DAVID MALAN: Sim, bem você não quer que ele a 10. Você já fez as contas aqui. Então, estamos recebendo o valor de vermelho, que é um número baixo, presumivelmente. Nós estamos multiplicando-se por 10. O que você quer fazer com o montante variável agora? AUDIÊNCIA: [inaudível] DAVID MALAN: Nice. Então im.set-- o quê? AUDIÊNCIA: setRed. DAVID MALAN: setRed, a localização XY. Sim. E apenas quantidade. Em outras palavras, uma variável é um espaço reservado temporário que você pode colocar o que quiser na. Nós acontecer a estar colocando um número em que, no momento. Temos multiplicado por 10 para torná-lo maior. E agora eu estou substituindo essa variável como o terceiro argumento, ou entrada para definir vermelho. E assim que, depois de terminar isso, e tomar nota dos pontos e vírgulas e dos parênteses. Vá em frente e clique executar / salvar novamente, e você deve ver, magicamente, o que era, na verdade, há. [? Arwa,?] Que está lá? A torre Eiffel em pleno direito vermelho, não bastante escuro. ele deve ser mais óbvio agora, sim? ESTÁ BEM. E Andrew, a caixa não mais negro? AUDIÊNCIA: [inaudível] DAVID MALAN: Tudo bem. Então, eu vou manter isso na tela. Se você quiser jogar com este mais tarde, eu vou recriar este para você. Mas este código aqui fez exatamente isso. Por que não fazemos outra. Deixe-me rolar para baixo ligeiramente. Portanto, neste caso, o projector não realmente fazer justiça. Mas em suas telas, você provavelmente tem uma caixa muito vermelho e muito preto. Isto, também, é um quebra-cabeça que mostra algo famoso. No entanto, a imagem foi distorcida. A imagem verdadeira, desta vez, é os valores em azul e verde. No entanto, todos eles foram divididos em 20 de modo que os valores são muito pequenas. Os valores de vermelho são apenas números aleatórios, o ruído. Desfazer essas distorções para revelar a verdadeira imagem. Então Nick diz-lhe então o que fazer. Defina os valores de vermelho a zero, e então não estragar o que é. Em seguida, multiplicar o azul e os valores verdes por 20. Então, é quase o mesmo programa como antes, mas você está invertendo o processo. E porei o meu código de antes na tela no caso você quer se referir a ele ou jogar mais com isso. Deixe-me fazer zoom sobre isso. Mas a imagem cobre resolver quebra-cabeça, o número dois. AUDIÊNCIA: [inaudível] DAVID MALAN: OK, então isso que eu sou Não vai dar como muitas dicas. Então eu would-- oh, vamos ver, você tem um erro de digitação aqui. Então lembre-se, este aqui realmente precisa ir lá. Então, o que eu gostaria de propor, se você quiser se concentrar em um presente, não é a resposta. Se você quiser transcrever isso, que deve obter o primeiro trabalho. E então você pode usar isso como inspiração para a segunda. Agradável. Boa. E para os curiosos, este é um exemplo simples de uma ciência ou uma arte chamada esteganografia, a arte de esconder informação em imagens. Normalmente, as imagens podem ser marca d'água muito descaradamente com um logotipo no fundo canto, mas claramente, você pode ser muito mais sofisticado sobre isso e, na verdade, esconder outras imagens nas Imagens alguma forma com esta técnica. Tome mais 30 segundos, e depois vamos pelo menos, anunciar o que você deve ver. E eu vou deixar o terceiro um como um exercício em casa, Se você gostaria de mais de um desafiar neste fim de semana. E eu acho que Andrew pode ter chegado primeiro. O que é a segunda imagem, Andrew? AUDIÊNCIA: Estátua da Liberdade. DAVID MALAN: Estátua de liberdade será a resposta desta vez. Então, novamente, apenas algumas simples exemplos, cujo objetivo é dar-lhe um sentido de como temos traduzido zero pictórica blocos para mais irritante e muito mais código complicado, mas todos os ideias ainda são exactamente os mesmos, embora com a introdução agora da noção de uma variável, sendo capaz de armazenar temporariamente algo. Vamos fazer mais um hands-on, só para agora ligar os pontos para algo um pouco mais do mundo real. Quando estiver pronto, se pudesse vá a este URL na tela. Isso também é em sua cópia do slides, developers.google.com/maps~~V. Vamos realmente fazer alguma coisa verdadeiro, por assim dizer, na web usando a API do Google Maps, ou interface de programação de aplicativo, da seguinte forma. Google, como muitas empresas, oferece uma série de funcionalidades livre que você pode usar para construir o seu próprias aplicações interessantes. Na verdade, se você já usou Uber para pegar um táxi ou um carro, você provavelmente sabe que tem Uber Um mapa e mostra carros nele. Isto é, o melhor que eu puder dizer, o Google Maps API. Eles estão realmente usando mapas do Google, mas Uber não é uma empresa de mapeamento, nem teria que ser uma problema particularmente interessante para resolver no topo do seu problema serviço de carro. E assim eles estão de pé, de novo, sobre os ombros dos outros, Google neste caso. Então eles usam mapas do Google, mas a sua própria serviços de veículos e outros tais características. Então, nós estamos indo para tirar proveito deste para fazer o seguinte. E se eu tenho ido muito rápido, apenas chamar-me mais em um momento. Feliz para recapitular algumas das coisas de imagem. Você deve ver a si mesmo em uma página como esta. Tão bom, do Google, e eles estão entre os melhores de fornecer não só APIs, mas APIs gratuitos que você pode jogar com ou utilizar comercialmente. Eles começar a cobrar-lhe se o seu uso é alto, mas fui em frente com antecedência e assinado-nos para uma conta gratuita que, esperamos, 10 computadores não vai desqualificar-nos para de repente. Portanto, esperamos que este demonstração irá funcionar. E notar que eles têm APIs para Android, iOS, serviços web e web, seja o que for. Vamos nos concentrar em web. Então clique na caixa-de-rosa, web, e que vai levar você, espero, para uma página Aqui. E eles têm um monte de APIs. E pode ser um pouco esmagadora em primeiro lugar, mas eu vou conduzir-nos através do que nós queremos. No canto superior esquerdo é o Google Maps JavaScript API, a API JavaScript. Então vá em frente e clique aquele. E que irá levá-lo agora para a página seguinte, demos e código de exemplo. Deixe-me zoom out aqui. E deixe-me levar-nos a-- rolar para baixo para onde ele diz passos de início rápido. Sua tela deve ser semelhante a minha. E há duas etapas, obter uma chave e começar a desenvolver. Eu já fiz o primeiro passo para nós, recebendo uma chave chamada. E esta é uma idéia comum. Uma chave de API é geralmente apenas um número aleatório grande ou cadeia que você é suposto para colar em seu código, para que o Google sabe quem você é quando você está usando o seu serviço, sua API. O que não significa que somos sendo cobrado nada. E agora, clique, em vez de um, clique começar a desenvolver. Se você poderia apenas acenar-me sobre se não tiver certeza de onde estamos. Então vamos arranhar a superfície, aqui, mas o que Eu pensei que seria convincente é realmente ter todos nós, usando Cloud9 em uma janela e Neste tutorial em outra janela, vamos realmente começar nossa própria aplicativo instalado e funcionando que incorpora um Google Custom Roteiro em nossa própria página web, e em seguida, adiciona uma ou duas características. Mas vamos apenas arranhar a superfície do que podemos fazer. Portanto, apenas uma verificação de sanidade rápida. Estão todos a ver esta página, Google Maps JavaScript API? Deve dizer começando. Nós não estamos indo para percorrer a coisa toda por qualquer meio. OK, em outra guia, se não o fizer tê-lo aberto, não entram em Cloud9 e obter-se apenas uma nova guia, em última instância. Então, novamente, c9.io de ontem, c9.io, e apenas criar um novo arquivo. E vá em frente e chamada ele quer que você gostaria. Eu chamei o meu map.html. Chamá-lo de qualquer coisa que termina em .html. E você deve ser mais ou menos onde estou neste processo com apenas um prompt piscando em um vazio aba chamada algo como map.html. Ou arquivo, novo arquivo neste momento. E agora, ao longo do Google Maps JavaScript API, vamos pular leitura por tudo isso texto. Mas note que Olá mundo é na verdade, em todos os lugares, você vê-lo agora. Olá, mundo tem essa grande colorido exemplo de um grupo inteiro de HTML. Vá em frente e copiar e colar só isso HTML, de modo que a partir do tipo doc no topo todo o caminho para a tag HTML fim, ir em frente e copiar todos isso-- de novo, que está sob o mundo da Olá example-- e colar que em seu guia Cloud9, de modo que agora sua tela deve olhar mais ou menos como a minha. E você pode salvá-lo, mas não carregá-lo ainda. Vamos primeiro olhar o código e ver se nós não se pode inferir ou aprender do que é Google teve-nos cegamente copiar e colar. Eles só querem ajudar, literalmente, um bom começo, mas não há que muito complexidade realmente lá. Todas as perguntas apenas ainda? Estamos seguros para seguir em frente? ESTÁ BEM. Então, rapidamente, vamos fazer algumas rápidas checagens. Uma linha do que eu ver, e espero que, você Veja, o que isso significa, doctype HTML? Kareem, lembra? AUDIÊNCIA: [inaudível] DAVID MALAN: Sim. Aí vem HTML 5. Enquanto isso, a linha dois no tela aqui significa navegador hey, aqui vem o HTML real. Linha três é hey navegador, aqui vem a cabeça. Linha quatro é, é claro, ei navegador, aqui vem o título. O que faz linha de cinco fazer? Na verdade, isso não faz realmente fazer alguma coisa para nós. Neste caso, ele apenas redimensiona a página para um padrão. Linha seis, nós não falamos sobre, mas especifica a codificação de caracteres. Há diferentes maneiras de codificar arquivos, especialmente para línguas estrangeiras. UTF-8 apenas tende a ser o padrão. Então agora vamos ver na linha de sete a 16, alguns CSS. E mesmo que não tenha visto todas essas coisas antes, podemos tipo de inferir. Então alinhar oito meios, hey navegador, aplique todos os seguintes elementos aos quais duas marcas, pelo visto? O texto HTML e corpo. Assim, a vírgula é a coisa nova lá. E isso é apenas uma maneira de especificando várias marcas ao mesmo tempo. Então nós temos as chaves. Então, aparentemente, este informa ao navegador, fazer a altura da página 100%. Assim, mesmo se há muito pouco conteúdo, fazer a página inteira, fazer a coisa preencher a página. Faça o mapa em última análise, preencher a página. Margem, o que isso significa? Isso é geralmente como arbitrária espaço em branco em torno das bordas que alguns designer de navegador apenas decidiu deveria estar lá, porque tipo de faz as coisas parecerem mais limpo. Mas nós não queremos isso. Queremos que o mapa vai todo o caminho para as bordas. Enchimento, similares ao espírito da margens. Margens significa fora, meios de preenchimento dentro, mas é o mesmo tipo de negócio. É um pouco de um buffer entre você e as bordas. E, em seguida, linha 13 é um bom oportunidade para uma revisão rápida. O que faz sinal do mapa afiada Quer dizer, ou um mapa hashtag significa? O que isso referir-se, em princípio? AUDIÊNCIA: [inaudível] DAVID MALAN: Exatamente. Esta propriedade, esta propriedade CSS aplica-se a apenas uma coisa, a tag HTML que tem um ID de citação, fecha aspas "mapa". E agora vamos avançar rapidamente, percorra para a parte inferior do ficheiro, que não é muito longe, e aviso on-line 19, se você colá-lo exatamente como eu fiz, A linha 19 tem apenas um div, que é um divisão da página, que ontem eu chamado de uma região rectangular. Não tem nada nele tem. É uma tag aberta, tag perto. Mas ele tem uma identificação única. Então, o que parece ser acontecendo aqui é Google está preparando a nossa página web para tem uma altura total de 100%, e nenhum preenchimento, sem margens, porque o que vamos para colocar dentro desta div, cuja identificação única é mapa, é um mapa real incorporado. E nós queremos que ele preencha a página e não apenas haver algum pequeno retângulo no meio. Assim, a linha 14 da mesma forma enfatiza, o mapear em si deve ter uma altura de 100%. Então agora notar entre as linhas 20 e 28, este é o código JavaScript. E isto é, mesmo que seja sintaticamente um pouco estranho, Não há tudo o que muita coisa acontecendo aqui. Na linha 21, este está declarando algo chamado uma variável. Em vez de chamá-lo ascende, como fizemos antes, nós estamos dizendo mais precisamente var, que apenas significa variável. Poderíamos ter usado que, em código de Nick, mas não o fez, então eu não se incomodou em fazê-lo também. É uma variável chamada Roteiro, e então há uma função que é aparentemente chamado initMap. Portanto, este é como o nosso próprio costume parte do enigma em risco. Nós criamos um pedaço de funcionalidade chamada initMap, e você pode tipo de inferir Oque esta acontecendo aqui. Do lado esquerdo, nós temos uma variável, assim que nós estamos indo para colocar o seguinte coisa dentro dessa variável, da direita para a esquerda. O lado direito diz, hey navegador, dá-me um novo mapa do Google. E google.maps.Map é apenas uma maneira funky de especificar que esta funcionalidade pertence ao Google Maps. Após os parênteses, temos visto isso antes, hey navegador, obter me os elementos da página, o tag na página cuja identificação única é-- AUDIÊNCIA: [inaudível] DAVID MALAN: --map. E o que está acontecendo, bem, juntos por essa linha, linha 23, é, essencialmente, dizendo: hey navegador, vá buscar-me que div vazia na página cuja identificação única é o mapa, porque eu quero inserir em ele-- injetar nele, se você will-- um monte de conteúdo que passa a ser proveniente da web, subseqüentemente. E o Google está fazendo tudo isso para nós. Então, novamente, no final do dia, temos este exemplo de abstração. Não tenho a menor idéia do que um mapa é ou como implementar um mapa API. Nós não precisa. Nós só precisa dizer o mapa onde colocar-se, e deixar aqueles implementação subjacente detalhes para o Google. Agora não há, aparentemente, duas peças de dados que neste exemplo é fornecendo a API do Google. Aparentemente, o centro do mapa, e o nível de zoom, por assim dizer. E alguém reconhecê-los coordenadas, latitude e longitude? Provavelmente não, mas podemos voltar ao tutorial, veja literalmente. Mas vamos vê-lo em apenas um momento. nível de zoom é um valor entre, eu não sei sabe, um em cada 13 ou algo parecido. Ele só tem a ver com o quão longe você está ampliado ou reduzido, e é isso. E agora no final de a página, linha de aviso 29-- é um pouco feio, porque -lo wraps-- esta linha de código é o que faz o download para o navegador API real do Google. Todo o código que o do Google engenheiros têm escrito que implementar Toda esta funcionalidade de mapas incorporáveis. Agora não vamos mudar nada. Se você está acompanhando, vá em frente e basta salvar o arquivo, se você realmente tem o que eu tenho. Ir para a sua URL. Você pode clicar no botão Run em cima e que vai dizer -lhe a URL do seu servidor web novamente. E isso vai levar você para uma nova guia. Se clicar em Abrir para map.html, e as probabilidades são que você está indo para obter um alerta, uma mensagem de erro, não é? Mensagem de erro, mensagem de erro? Assim, infelizmente, o erro mensagem não é que esclarecedora a menos que você realmente abrir o console, que guia especial que abria ontem e um pouco mais cedo hoje. Mas eu tropecei isso antes, então eu já descobri qual é a solução. Em lâminas de hoje, ou em vez disso, em Cloud9, aviso que não fazer algo deliberadamente. Observe que essa tag script linha 29, se você lê-lo, é como maps.googleapis.com/ alguma coisa, alguma coisa, alguma coisa, em seguida, perceber que alguém, um dos desenvolvedores, escreveu em todas as capitais letras, sua chave de API. Precisamos colar algo lá dentro. E este foi o passo Eu fiz para nós antes, e novamente eles podem lista negra -nos se, de repente, 12 ou mais de nós começar a utilizar a mesma chave, mas vamos ver o que acontece. Então, se você ir para hoje slides, um slide depois, há esta cadeia muito badalado aparência do texto. Vá em frente e apenas copiar e colá-lo onde ele diz que a sua chave de API. Isso é o que eu inscreveu. E, definitivamente, não tente digitando-lo manualmente, porque se sente cheio com erros de digitação, potencialmente. Então, basta copiar e colar isso. E ele vai fazer a linha mais tempo, mas agora, só para ficar claro, ele deve olhar um pouco mais como este, onde chave não é igual capitalizados gritando com você. Salve sua página, voltar para o outro guia, recarregar, e esperamos ver um mapa de onde? AUDIÊNCIA: Australia. DAVID MALAN: Australia. Assim, aparentemente, são aqueles do Coordenadas GPS da Austrália. E deixe-me andar por aí por um momento e ajudar alguém que não está bastante lá, mas deixe-me propor, através do Google, encontrar as coordenadas GPS da sua própria cidade natal ou o seu próprio país de origem. E, provavelmente, o Google pode transformar este -se, ou Wikipedia posso dizer. Mas escolher dois valores diferentes de latitude e longitude, voltar e colá-los, e em seguida, recarregar a página depois de salvar e veja se você pode ter um Roteiro para a sua própria cidade natal. E quando você é feito com que, o follow-up challenge-- e eu vou dar um pouco menos sentido, deliberadamente, de modo que você deliberadamente tem que lutar por um par minutos com a documentação, mudar o mapa para não ser esta cartoonish padrão, mas um mapa de satélite. Então, você realmente vê por satélite imagens em vez das cores bonitas. E a dica que vou dar-lhe é alterar o tipo de mapa. Volte para que a obtenção começou a página em busca de inspiração. Como você pode ter recolhido, se você está procurando, há tantos mais coisas que você pode fazer. Alguns de vocês já têm alterado o tipo de mapa. Mas você pode fazer-- por exemplo, deixe-me ir para algo que fizemos para o curso I teach-- maps.cs50.net. Um dos nossos graduandos fez isso. Centramos a nossa mapa sobre Harvard Yard e sobrepor todos esses nomes de construção, e tivemos ele adicione. Então, se eu quiser procurar, por exemplo, Matthews Hall, temos um pequeno menu drop-down. E eu acho que ele está usando Bootstrap, o biblioteca discutimos anteriormente para isso. E se você clicar em Matthews Hall,-lo imediatamente salta o mapa para uma determinada localização, e mostra -lhe uma imagem neste pequeno pop-up. Mas mesmo esta pequena pop-up, nós não implementar. Se eu rolar para baixo na nossa ficando começou a página e procure janelas de informações, você verá que alguns dos funcionalidade você mesmo pode adicionar, embora com um pouco mais complexidade, é algo chamado uma janela de informações. E se eu clicar em um exemplo aqui, e isso é o que é divertido, você pode fazer coisas como esta, clicar em um marcador e, em seguida, voila, informação aparece. Então não temos muito introduzido recursos suficientes de JavaScript para pintar um retrato de como exatamente você poderia ligar todas essas coisas juntas, mas nós meio que arranhou a superfície. Na verdade, o que eu fiz quando Eu cliquei em que marcador, foi desencadear um evento, uma chamada no evento de clique. E que se viu um evento hoje cedo, o chamado caso apresentar, quando estávamos impedindo o usuário de procurar gatos. Então nós meio que escolheu e escolheu dentre todas essas várias características, para dar-lhe um sentido, espera-se, do que você pode, na verdade, fazer com um pouco mais conforto em programação, e recursos totalmente gratuito. Alguma pergunta? Não? Esta é a sua última chance, pelo menos hoje, em uma sexta-feira, para conseguir alguma coisa fora de seu peito de modo que você sair daqui sentindo-se confiante e confortável. Sim. AUDIÊNCIA: Por que não fazer você adicionar mais uma coisa? DAVID MALAN: Oh meu Deus. Eu preciso descansar neste fim de semana, eu acho. Outras perguntas? AUDIÊNCIA: [inaudível] DAVID MALAN: Você can-- em Internet Explorer, descanse em paz, você costumava ser capaz de colocar VB roteiro, roteiro básico virtual, mas que realmente nunca pegou. Portanto, a resposta curta é apenas JavaScript. Outras perguntas? Tudo bem, bem, deixe-me fazer isso. Deixe-me pegar nossos colegas fora. Eles têm algum tipo de avaliação formas que eles querem todos gastar alguns minutos preenchendo. Eles querem cobrar a forma e qualquer renúncias que você pode ter fora. Eles também têm certificados. Eu estou supondo que há ainda alguns lanches fora. Deixa-me passar estes para fora, e se você tem dúvidas, entretanto, Eu vou andar por aí mais individualmente e nós podemos ajudar a começar. Sim, claro. AUDIÊNCIA: [inaudível] DAVID MALAN: Isso é normalmente verdade nos dias de hoje. Certamente com web software, você está se inclinando sobre os outros ou você está esteticamente usando coisas como Bootstrap, para que você não tem que implementar o nível baixo detalhes de menus e botões e tudo mais. Você está inclinando-se em alguém como o Google para que você não tem que construir um Uber negócios e uma empresa de mapeamento, e qualquer número de semelhante aplicações. Na verdade, logins são populares também. Se você já usou Spotify ou qualquer número de sites, você vai fazer login para alguns sites usando o Facebook. Então, o que é bom, não são APIs para logins hoje em dia, de modo que você não tem para ter sua própria tabela de usuários e todo o seu próprio banco de dados necessariamente no mesmo grau. Você pode deixar Facebook fazer tudo de que a complexidade para você. Então é um momento emocionante, Honestamente, na programação, porque há tantos terceiros serviços que você pode construir em cima. E, novamente, o preço que você paga é seja financeira ou de tempo de inatividade. Se o Google vai para baixo, o mesmo acontece com Uber, sem dúvida, mas talvez isso é uma razoável trade-off. E, novamente, que foi um dos temas, esperançosamente, para o último par de dias, São estes trade-offs. E raramente há indo ser uma resposta certa. É realmente o melhor de duas ou mais respostas. Passe estes ao redor. E essas contas Cloud9 continuará para trabalhar, em teoria, em perpetuidade. Que você pode encontrar se você esperar alguns dias ou uma semana ou mais para voltar a entrar na deles, isso pode levar como um ou cinco minutos para abrir back-up, mas isso é só porque eles colocaram -lo para dormir para economizar recursos.