[Música tocando] 

DAVID MALAN: Este é CS50. Este é o início da nona semana. E isso é o que teria sido 200 aniversário do Sr. Boole. Portanto, este é os bolseiros a quem nós aludiu bastantes vezes sobre a utilização Variáveis ​​booleanas verdadeiros e falsos, 1 e 0 e tal. E este foi o do Google Homenagem a ele hoje. Ele teria virado 200. Então, se você gostaria de juntar a nós para almoço CS50, Dê uma olhada no link no site do curso. E esses rostos e amigos como estes esperam por você aqui em Cambridge. Faces como estes esperam por você em New Haven. E, de fato, Ken em New Haven para os nadadores feitas o que é chamado um GIF animado de Eli aqui em uma recente lunch-- um GIF é ainda outro formato de arquivo gráfico, com o qual você está familiar-- que parece um pouco algo como isto. Portanto, apenas uma sequência de-- OK. Ninguém aqui em Cambridge está rindo. Mas em New Haven, este é muito engraçado, né? Tudo certo. 

Portanto, se juntar a nós lá. Aqui em Harvard, especificamente, esta quarta-feira, se você é um estudante de segundo ano de calouro ou even-- ou mesmo pensamento junior-- de tomada de um interruptor no computador ciência, saber que haverá ser um CS aconselhando justo este Quarta-feira, logo depois da aula às 4:00 PM no computador prédio de ciências Maxwell Dworkin. Vamos colocar isso no curso de website amanhã, também. Donuts, me disseram, será servido. 

Tudo certo. Story-- tão engraçado eu estava cutucando em torno da internet, e eu encontrei alguns arquivos antigos do meu antigo site. E verifica-se em torno deste out-- tempo, parece muito oportuna desde Percebi que as eleições de UC está prestes a acelerar o ritmo novamente. Então eu corri para UC, perdeu miseravelmente. E talvez isso foi em parte o porquê. Portanto, este foi o meu site no momento. Por alguma razão, eu pensei que era uma boa idéia, antes de dizer às pessoas o que minha plataforma era e por que eles devem votar em mim, que eles têm clicar para entrar para descobrir que informações, que, em retrospecto, é tipo de assustador. Eu realmente não sei o que era. 

Mas certamente não fez ajudar a minha campanha. Eu também achei que por sênior ano-- eu tive este calendário Muppet. Muppets foram tipo de em voga na época. Ou talvez eles não estavam. Eu tinha um calendário Muppet naquela época. E eu pensei que seria legal para nome meu computador na rede da Harvard frogman.student.harvard.edu. Na época, todos nós tivemos com exclusividade nomes de host identificáveis. E você poderia escolher alguma vaidade em vez de nomear o seu próprio nome. E eu fui com frogman por algum motivo. 

E então eu started-- Passei muito de tempo clicando através dessas ligações esta manhã. E esta foi a minha página sobre, que agora parece tipo de adorável. Mas também atesta apenas o quanto a tecnologia chegou. Quero dizer, de volta ao dia, um 486 era alguma coisa. Estes dias, é super, super, super slow e bem menos do que você pode ter em seu próprios bolsos estes dias. Há mais lá que foi ainda mais embaraçoso. Então, eu vou deixar por isso mesmo. Mas essa foi a minha primeira incursão web-- oh, não. Isso não era. Minha primeira incursão real para programação web foi neste site, que eu esqueci. Em algum ponto, eu aprendi a tornar repetitivas imagens de fundo. E assim que eu encontrei esta telha eficaz, como jogador de hóquei, futebol e golfe bola, ou o que quer que seja para o site do Frosh IMs. E isso era realmente, verdadeiramente a primeiro projeto baseado na web que eu tomei on-- Eu acho que talvez estudante de segundo ano ano, ano-- júnior depois de tomar CS50 e CS51, um das classes follow-on comuns. Notei no olhar através dos arquivos que um dos meus sucessores e amigos, Lee, meio que mudou dos direitos de autor para si mesmo. Mas isso era de fato algo que I deve possuir o constrangimento para. Mas, na época, este foi o primeiro site, como eu disse, há algumas semanas, pelo qual calouro poderia registrar-se para esportes internos aqui. E assim ele sair que imagens de fundo assim não são uma boa idéia. Mas a web era novo, e estávamos todos a experimentar. E é isso que eu aparentemente fez na época. Tudo certo. Assim, sem mais delongas, vamos alternar Engrenagens hoje para lhe dar, realmente, a última peça que você pode encontrar especialmente útil para projetos finais mas também que vai começar a fazer o wide web mundo inteiro sentir um pouco mais compreensível. Na verdade, nós estamos indo para introduzir mais uma linguagem de programação chamado de JavaScript que é semelhante e diferente de maneiras diferentes a partir de linguagens nós olhamos até agora. 

Então C, recall, é esta linguagem compilada. Você tem que executá-lo através de um compilador. Você obtém o código fonte de oposição código, ou zeros e uns. E aqueles são zeros e uns que sua CPU, Central Processing Unit, realmente entender. PHP, por contraste, não é uma linguagem compilada. É uma coisa? É uma linguagem interpretada. Portanto, há algum programa chamado um interpretador que tem de ler ele-- cima para baixo, da esquerda para direita-- e descobrir o que todos sua sintaxe faz e significa, quer se trate de um loop ou uma condição ou qualquer outro número de programação constrói. Então essa é uma linguagem interpretada. 

Então, nós introduzimos HTML. E HTML não é mesmo um linguagem de programação. Nós chamá-lo o que? Uma linguagem de marcação, que é apenas uma espécie de maneira elegante de dizer que não tem programação construções como vimos até mesmo para trás no dia do Scratch. Não há lacetes. Não há condições. É realmente uma linguagem sobre a marcação de seus dados e formatá-lo ou estruturando-o de alguma forma. 

CSS, por sua vez, da mesma forma não uma linguagem de programação. É ainda mais esteticamente orientada. E isso permite classificar de afinar coisas como o tamanho e as cores da pia batismal e colocação e tudo isso. Então nós tivemos 

SQL. Então SQL é de fato uma programação língua, em certo sentido, embora sob medida especificamente a bases de dados. Mas mesmo que tenha apenas apresentá-lo a selecionar e inserir e excluir e atualizar e um par de outros, Acontece que você pode realmente funções ou escrever procedimentos, como eles são chamado, em SQL que olhar e agir bem como funções PHP e C. Então saiba que aqueles existe. Mas nós nem sequer se preocupar com eles como acabamos de arranhar a superfície aqui. E então JavaScript, o último dos nossas línguas formalmente apresentado. Então JavaScript, também, é uma linguagem interpretada. E os que estão familiarizados, fazer você quer para distingui-lo com alguma característica de ambos C e PHP? O que o torna diferente? 

AUDIÊNCIA: Não é compilado. 

DAVID MALAN: Diga outra vez? 

AUDIÊNCIA: Não é compilado. 

DAVID MALAN: Não é compilado. Por isso, também, é interpretada. Portanto, não é compilado. Mas isso faz com que seja um pouco como PHP. Mas ainda é diferente do PHP de alguma maneira marcante, pelo menos na forma como vamos usá-lo. Sim? 

AUDIÊNCIA: Corre-se do lado do cliente. 

DAVID MALAN: Ele é executado do lado do cliente, normalmente. Isso é de fato o distintivo característica para nós agora. C foi do lado do servidor no sentido que fizemos tudo em CS50 IDE. PHP até agora tem sido do lado do servidor, na medida como, também, recebe interpreted-- não compilado, mas interpreted-- dentro CS50 IDE, o que obviamente é apenas um servidor ou servidores na nuvem. 

Mas JavaScript, mesmo se você você está indo para começar a escrevê-lo para, digamos, pset oito e talvez última projects-- você é indo para a direita, em CS50 IDE e salve- em arquivos dentro de IDE CS50, CS50 IDE e, por sua vez, os servidores em nuvem em que ele está hospedado, não vão para interpretar ou executar seu código. Em vez disso, ele vai ser enviado em forma inalterada até o browser. E é então vai ser IE ou Chrome ou Firefox ou Safari ou seja lá o que, na verdade, interpreta ele, de cima para baixo, da esquerda para a direita. Assim, a distinção chave característica para hoje é que é JavaScript do lado do cliente e PHP, por exemplo, tem sido do lado do servidor. Agora, isso tem implicações interessantes para, assim, propriedade intelectual e quem pode realmente ver seu código. E, de fato, você pode ir na Web e veja mais qualquer código que alguém tem escrito em JavaScript. Às vezes é legível, às vezes é ofuscado. Mas mais sobre isso no devido tempo. 

Então JavaScript, bem o suficiente, é Super semelhante, sintacticamente, a C. E bem como PHP, não há nenhuma função principal. Se você quer começar a escrever Código de JavaScript, como você vai ver hoje, você acabou de começar a escrevê-lo. Mas é, você vai ver, particularmente útil no contexto de navegadores web. No entanto, a minha pequena disclaimer-- geralmente earlier-- foi dizer que você pode cada vez mais uso hoje server-side JavaScript usando uma estrutura de fantasia chamado Node.js que algumas das aplicações próprias do CS50 são escritos no. Confira 50 realmente usa Node.js. Mas nós estamos indo focalizar em JavaScript do lado do cliente daqui em diante. 

Então aqui está um conjunto de condições em PHP. Desculpe, em-- na verdade, que declaração também está correto. Aqui também é um conjunto de condições em JavaScript. Sintacticamente, é idêntica a C e para o PHP. Expressões do Sr. Boole são, Da mesma forma, sintacticamente idêntico para ambos C e PHP. Temos também switches JavaScript que parecem idênticos. Temos para loops que são estruturadas de forma idêntica, enquanto loops, fazer enquanto loops. 

Essa é um pouco diferente. PHP tinha a para cada constructo que você pode estar usando ou vai usar em pset sete, talvez. JavaScript tem esta versão especial do para onde você literalmente dizer alguma coisa como para a chave variável em objeto, que é uma maneira muito sucinta de dizer: se eu tenho um object-- e nós vamos falar sobre estes novamente em um moment-- e eu quero fazer uma iteração sobre todos dos pares de valores-chave dentro, Eu não tenho que descobrir como índice numericamente los com zero, um, dois três. 

Eu posso dizer isso literalmente. E em cada iteração, JavaScript para mim vai atualizar a chave variável para ser a primeira chave, em seguida, a tecla seguinte, em seguida, a próxima chave, então a próxima chave, e assim por diante. E eu posso conseguir pelo seu valor por tratamento um objeto em JavaScript, como veremos, como se fosse um matriz associativa em PHP. Na verdade, se você finalmente envolto seu mente em torno do que uma matriz associativa é em PHP, você pode pensar nisso por enquanto como idêntico a um objeto em JavaScript. Mas isso é um pouco de uma simplificação exagerada. 

Arrays olhar, bem o suficiente, idêntico para o PHP com exceção de um personagem. Há uma coisa que falta aqui que nós vimos na semana passada com PHP. O que está omitido? Sim? Sem sinal de dólar. Então, nós estamos de volta a um mais mundo normal onde variáveis ​​não têm cifrões. Mas você prefixar-los com var, normalmente. E var significa variável. E muito parecido com PHP é vagamente typed-- em que existem tipos, existem números e strings e carros alegóricos e assim forth-- JavaScript semelhante tem tipos. Mas é vagamente digitado em que o os programadores não têm que especificá-los. Nós apenas temos que estar cientes que existem diferentes tipos. 

Variáveis, meanwhile-- aqui está como podemos declarar "Olá, mundo" como uma string. Observe que é idêntico ao PHP mas nenhum sinal de dólar. E isso é algo que vamos começar a ver mais hoje, em que você tem um objeto com chaves e valores. E se você quiser tentar deduzir última week-- a sintaxe é um pouco diferente. Mas um pouco de sanidade check-- quantas chaves que este objeto parece ter? Então eu vejo quatro. Eu vejo dois. 

Portanto, é na verdade dois. Portanto, esta é uma coleção de dois pares de valores-chave. A chave é símbolo cujo valor é FB. A chave é o preço cujo valor é 101,53. Então esses são dois pares de valores-chave. E lembre-se, PHP-- e esta é mais uma vez apenas uma espécie de diferença sintática. Não é tudo o que intelectualmente interessante. PHP poderia ter escrito este mesmo coisa como citações follows--, é igual. E eu mudar estes para colchetes. E então eu mudar isso para uma palavra citada, "preço". E então eu não utilizar os dois pontos. O que eu uso na semana passada? Sim, o sinal de igual arrow notação descolados. 

E então eu fiz a mesma coisa aqui. A mesma coisa aqui. E isso é tudo. Por isso é bom se isso não tem realmente afundado em memória apenas para ainda porque é realmente intelectualmente desinteressante. É apenas diferenças sintáticas. Mas as idéias são exatamente os mesmos. Dentro desta variável Citação em JavaScript é uma coleção de pares chave-valor, uma das quais é símbolo, uma das quais é o preço. E eu posso chegar a esses valores com a seguinte sintaxe. Assim como em PHP, pude fazer algo como-- deixá me fazer esta caixa um pouco maior. Assim como em PHP, pude fazer isto-- oh, caramba. Vamos. 

Assim como em PHP-- OK, vamos basta usar as notas do apresentador. Assim como em PHP, eu posso fazer $ citação ["simbolo"] Citação $, e isso vai me levar o valor de "símbolo". Em JavaScript, que vai ser idêntica, pelo que eu só posso fazer isso. A única coisa que é falta é o sinal de dólar. 

Tão bem o suficiente, então, não há não tudo o que muito nova sintaxe. Então, o que hoje vamos nos concentrar em, realmente, é algumas das idéias e das aplicações. E a primeira, tais aplicativo que você pode ter visto se você mergulhou pset sete já é esta sintaxe. Assim, em pset sete, se você tiver viu ou não viu ainda, sei que há um arquivo que damos você chamou config.json-- JavaScript Objeto Notation. Por quê? Queríamos ser capaz de fornecê-lo com um modelo com alguns pares de valores-chave. Queríamos ser capaz de lhe dar uma lista do hospedeiro, o nome do servidor. Queríamos dar-lhe uma espaço reservado para seu nome de usuário e um espaço reservado para a senha. Se você não está vendo isso ainda, não se preocupe. Mais sobre isso em sete pset [? spec. ?] E depois, Obviamente, nós queremos que você para preencher a to-dos porque quando você entrar em CS50 IDE, cada um de vocês ter o seu próprio nome de usuário e senha. 

Então nós poderíamos ter usado uma meia dúzia ou mais formatos de arquivos diferentes. Poderíamos ter utilizado um arquivo .txt. Poderíamos utilizar um arquivo CSV. Nós poderíamos ter usado um Arquivo INI, um arquivo XML, um grupo inteiro mais siglas que você pode não ter já ouvi. É uma espécie de arbitrário no fim do dia. Mas super popular nos dias de hoje é um texto formato chamado JSON-- JavaScript Object Notation-- que se parece com isso. É um pouco enigmática, mas observar os padrões. Você começa com um encaracolado aberto cinta, e que acabam com o mesmo. Dentro do que é alguma coisa. É um par chave-valor. Portanto, este é um objeto que eu sou olhando na tela aqui que tem uma chave, que tem um valor. E apenas inferir com base no padrão anterior, o que é a chave aqui? Banco de dados, a coisa a do lado esquerdo do cólon. 

Agora, o valor passa a ser um várias linhas neste momento. Mas o valor começa com um encaracolado cinta e termina com uma chaveta. Então, o que você propõe é a Tipo do valor do banco de dados? Um dicionário ou, apenas mais sucintamente, um objeto. Certo? Este é um tipo de estrutura de dados que pode utilizar outras estruturas dentro de si. Então, se essa coisa toda que estamos chamando um object-- e um objeto é apenas um monte de valor-chave da pairs-- valor do próprio banco de dados é um objeto. O valor de banco de dados tem um grupo inteiro de pares de valores de chave, o primeiro dos quais é anfitrião, em seguida, nomeie, em seguida, nome de usuário, senha, em seguida, cada um de cujos valores, entretanto, é apenas uma seqüência chato entre aspas duplas. 

Assim, mesmo que isso não é super claro ainda, sabemos que este é apenas um padrão, forma bastante chato de armazenar dados em um formato padrão. Mas os erros comuns que você pode fazer, mesmo em pset sete, são pequenas coisas estúpidas, como se você acidentalmente omitir a vírgula lá. Isso vai resultar no ficheiro não necessariamente de ser legível. Se você omitir acidentalmente coisas como o citações, não vai ser legível. Portanto, é um formato de arquivo muito detalhista, mas é um que é super comum. E nós acontecer a usá-lo, mesmo que você não usar qualquer outra forma JavaScript, em pset sete. 

Tudo certo. Então lembre-se este quadro. Nós conversamos sobre, em HTML, que o código pode ser como este. Este é o HyperText Markup Language [Inaudível] para apenas "Olá, mundo". Mas, então, propôs uma tempo atrás que, se isso ajuda, você pode querer começar a pensar sobre o já como uma árvore. Na verdade, o recuo que nós usar apenas pelo amor de legibilidade ou por causa do estilo de a esquerda pode tipo de ser traduzida para essa árvore, onde você ter algum nó raiz especial que vamos genericamente chamado documento, abaixo do qual é o elemento HTML raiz ou tag, HTML, que, em seguida, tem dois crianças, cabeça e corpo. 

E, em seguida, por sua vez, a cabeça tem um título. E título tem um valor de texto. E o corpo tem um valor semelhante texto. Então, se você está dizendo confortável que sim, você poderia tomar este HTML e desenhar um quadro como isso, o lado direito é um modelo mental bom porque agora que temos JavaScript, uma programação linguagem que os navegadores podem executar e interpretar para você, verifica-se que o estamos prestes a fazer no código é começar a manipular esta estrutura de árvore na memória. Não temos de construir a árvore em memória. Nós não temos que fazer uma espécie de estrutura de dados e cinco estilo pset complexidade. O navegador, bem o suficiente, em cima interpretar HTML topo para baixo, esquerda ou direita, é, literalmente, indo para mão-nos o equivalente a um ponteiro para que árvore inteira de graça. Ele faz todo o trabalho duro. Isso é o que a Apple e Mozilla e outros têm feito para nós. 

E com JavaScript que vamos ser capaz de controlar e mudar e fazer Coisas interessantes para aquela árvore, também conhecida como DOM ou Document Object Model. Que tipo de coisas? Bem, acontece que em JavaScript, não há este rol de eventos que podem ocorrer. E nós realmente não tenho usado que palavra desde semana zero e pset zero quando falamos sobre Raspadinha. A maioria de vocês provavelmente não usar um evento em seu projecto Scratch. Mas você deve se lembrar o simples Marco Polo exemplo, onde tivemos dois sprites, um dos quais disse Marco. O outro dos quais, em seguida, ao ouvir e ouvindo o evento, disse: Polo. Se não, sinta-se livre para olhar para trás tão longe para trás. 

Mas esta é apenas a dizer, e você pode tipo de deduzir os nomes destes coisas, JavaScript, verifica-se, vai dar-nos uma maneira de ouvir para mouse indo para baixo ou rato subindo ou a tecla para baixo ou tecla indo indo para cima ou onselect onsubmit onresizing ou algo assim. Em outras palavras, qualquer ação física que um ser humano pode levar com um navegador que você faz todos os dias, você pode escrever código para que escuta para esses eventos e depois faz algo apropriado. 

Por exemplo, se você usar o Google Maps, o que acontece se você clicar e movimento o rato, tipicamente? Se você clicar e arrastar? Sim? Exatamente. O mapa começa a mover-se. Assim, você pode tipo de ver o que está aqui, o que está ali. E como o Google implementar isso? Bem, presumivelmente, eles são usando um par destes eventos ouvintes, que diz, ouvir no rato down-- assim quando o usuário fisicamente empurra o trackpad ou o seu rato baixa. E então nós estamos procurando algo como movimento ou qualquer outro evento que nos permite capturar arrasto. E, na verdade, de arrasto é semelhante neste ponto ponto dot lista de opções possíveis. 

Portanto, este vai ser um poderoso maneira a começar a responder ao utilizador mesmo antes de ele ou ela clica algo explícito como enviar. Mas nós estamos indo para introduzir um par de temas para chegar lá. Mas primeiro, vamos transição para alguns código real. Então, eu estou indo para ir em frente e abrir dom-0, que é um exemplo muito simples aqui que se eu simplesmente aumentar o zoom tem esta entrada aqui por mim. E eu estou indo para ir em frente e digitar "David" para meu nome e clique em Enviar. 

E então, embora tipo de barato, I tem este prompt que aparece que diz: "Olá, David!" Portanto, este é o tipo de como o nosso "Olá, mundo" que nós fizemos algum tempo atrás em C e mesmo em PHP, porque eu tenho dinamicamente emitido o meu nome. Eu posso fazer nome de outra pessoa aqui. Eu poderia simplesmente mudar isso para, como, Hannah, clique em Enviar. E, de fato, as pequenas mudanças de pop-up. 

Agora, os pop-ups são um dos a maioria dos recursos abusadas da web. E, de fato, de volta os bloqueadores de pop-up dia entrou em voga, porque você iria para algum website-- talvez um Place-- questionável que, de repente, iniciar salpicando sua tela com um monte de pop-ups. E assim, esta habilidade para pop-up janelas em frente do utilizador não tem sido particularmente bem recebido pela humanidade. Então é por isso que você vê este prevenir coisa, que só faz essa coisa toda feio. Então, nós vamos precisar de uma melhor maneira para solicitar ao usuário. Mas, por agora, que parece funcionar. Então, só de forma intuitiva, o que parece estar acontecendo aqui? I vá em frente e clique em Enviar e então alguma coisa está acontecendo, de forma clara. Mas o que não está acontecendo que aconteceu na semana passada, a qualquer momento eu clicou em Enviar? O que não aconteceu na tela? Desculpa? Recarregar. O URL não mudou em tudo. Eu disse que isso era dom-0, e eu ainda estou no dom-0. Normalmente, teríamos mudado para algum outro URL, como register.php ou semelhantes. 

Mas mesmo quando eu demitir essa coisa clicando em OK, notar que o URL fica completamente parado. E, de fato, se eu sou um pouco cético, deixe-me abrir Chrome. Deixe-me abrir a guia Rede. E note que é em branco no momento. Deixe-me ir em frente e reenviar Maria. Não há nenhum tráfego de rede qualquer. Portanto, não há HTTP. 

Então, na verdade, se eu olhar para o código-fonte para isto-- deixe-me fechar esta janela e ir para a vista de origem. Interessante. Parece que há alguma novas etiquetas, entre eles script. Então, vamos dar uma olhada dentro CS50 IDE exatamente o que eu mandei para o usuário. 

Então, aqui vamos é-- focar apenas o HTML. Aqui está a metade inferior do dom-0.html. E note que ele tem um título, uma marca de cabeça, uma marca do corpo, uma marca de formulário. Mas o que salta para fora a você como diferente, especialmente se você nunca escrito qualquer JavaScript si mesmo. Deixe-me rolar um pouco para a direita aqui. Eu tenho uma entrada, outra entrada para apresentar. Eu tenho um ID, que é uma espécie de novo. Mas fizemos ver isso com CSS. O que mais é definitivamente novo? Sim? Agradável. 

Tudo certo. Então, onde ele diz que onsubmit, observe o que parece seguir. Este é um atributo na nomenclatura HTML. O seu valor é essa seqüência entre aspas aqui. E isso parece um pouco estranho à primeira vista. Não é HTML. Não é CSS. Isto é, como você pode imaginar, JavaScript. Assim, parece que incorporado nesta A página web é uma função chamada greet. E eu estou inferindo que apenas porque é uma palavra, cumprimentar. Ele tem um parêntese aberto, paren próximos, ponto e vírgula. Parece que uma função C, parece uma função PHP. 

E, de fato, ele vai ser uma função JavaScript. Então eu estou retornando false. Nós vamos voltar a que em apenas um momento. Mas onde é definido esta função? Bem, deixe-me rolar para cima ao topo do ficheiro. E mesmo que seja uma longa linha, é relativamente simples. Deixe-me aqui e diminuir o zoom concentrar-se nesses quatro linhas. 

Assim, em JavaScript, apenas como PHP, você só digamos, literalmente, a palavra "função", o nome da função, e, em seguida, com qualquer parênteses arguments-- sem argumentos neste caso. E não há nenhum tipo de retorno em JavaScript, assim como PHP. Portanto, é um pouco mais flexível do que C. Abrir chaveta, perto chaveta. Construído em JavaScript é um function-- não um function-- recomendado mas uma função chamada alerta cujo único objectivo na vida é para puxar para cima que muito feio solicitar que vimos há pouco. 

Agora, isso é uma espécie de boca cheia. Oque esta acontecendo aqui? Então, vamos começar a destacar tudo aqui. Esse é o mesmo argumento para alertar. E o que está acontecendo? Isto mais parece uma corda. E não é que, ao contrário de PHP e ao contrário C, não importa em JavaScript se você aspas simples ou duplas. Eles vão ser equivalente. E, francamente, é apenas popular estes dias para programadores JavaScript para sempre usar aspas simples, por algum motivo. É apenas a coisa a fazer. Mas poderíamos usar aspas duplas, também. 

Então é mais um novo personagem. Mas aqueles de vocês que fiz isso antes, o que mais dizer? Sim. Concatenar. Então, nós vimos isso em PHP. Não é apenas o ponto operador em PHP que irá concatenar duas seqüências juntos. C era uma dor no pescoço para fazer isso. Lembre-se do pset seis, que era uma dor especial no pescoço, você teria que usar algo como strcat após a alocação de memória na pilha ou a pilha. Você tinha que saltar através de aros apenas para concatenar duas strings. Em JavaScript, é super simples. Basta usar o operador mais entre eles. 

Assim, o complexo de aparência coisa parece ser este porque, no fim de Toda essa seqüência, eu só concatenar em um ponto de exclamação. Portanto, se o que estava surgindo foi "Olá, David", "Olá, Hannah," "Olá, Maria", e assim por diante, de forma clara aquela coisa meio entre os dois trunfos deve me dar acesso a quê? O que está lá com certeza? Sim. Então, eu vou fingir aqui a responder a seu nome, certo? Então, seu nome apareceu na final resultado. Então o que isso quer dizer? Bem, eu propus anteriormente no que imagem de que a chamada DOM tem este elemento raiz especial subida superior chamado documento. E agora, ao que parece, isso vai de ser uma variável global especial em JavaScript, em que é construído um todo grupo de funcionalidades úteis. Entre a funcionalidade útil é a capacidade de obter em qualquer nó descendente. Esses quadrados ou retângulos ou elipses são apenas os nós em uma árvore, por assim dizer. 

Assim, verifica-se que embutido Objeto de documento de JavaScript é uma função, de outro modo conhecida como um método, que é chamado getElementById. A sintaxe para chamar uma função em JavaScript que está dentro de um objecto ou um variável é apenas com a notação de ponto. E nós vimos isso em C que a sintaxe da estrutura. Você vê isso em pset sete, espécie de, mais ou menos, quando você vê CS50 :: consulta. O cólon cólon em PHP é outro maneira de chamar uma função que é dentro de algum objeto. 

Mas, por enquanto, em JavaScript, é apenas um ponto. E assim esta função, bem o suficiente, tipo de diz o que does-- obter elemento por ID. Um elemento é apenas um outro nome para uma tag ou nó na DOM. E assim começa elemento por ID "nome" significa isto-- aqui está o meu HTML. E com base nesta HTML, o que nó ou o tag HTML sou eu vai ser programaticamente handed chamando document.getElementById? 

Sim exatamente. Eu estou indo para obter a entrada elemento lá cuja ID é "nome". Então, especificamente, você pode acha dessa função, GetElementById, como uma maneira de dar cópia de um ponteiro para esse nó específico na árvore. Nós não tiraram esta árvore, mas é uma maneira de obter acesso a esse retângulo ou retângulo que identificando-lo exclusivamente através do seu ID. 

Agora, por que isso é útil? Bem, despeja que uma vez que você tenha obtido esse nó, que retângulo do imagem, que no interior do mesmo nó, por sua vez, tem um monte de pares de valores-chave properties-- ou de dados, um dos quais é chamado valor. Então, literalmente, é uma espécie de bocado para explicar a coisa toda. Contudo, no final do dia, tudo isso faz é dar-lhe uma seqüência de caracteres que o usuário digitou no desta forma hierárquica. Mas eu não gosto de um par destas coisas. Ou melhor, há alguma curiosidade ainda. Tudo isso parecia funcionar. Porque você acha que eu retornei false depois de chamar cumprimentar? Isso parece um pouco feio, que Eu tenho duas afirmações lá separados por ponto e vírgula. Adivinhe. Se eu removido retornar falso, o que pode acontecer, apenas instintivamente? Desculpe, dizer de novo? 

Abra um grupo do Windows. Então talvez algo potencialmente assim iria acontecer. O que mais? Pode apresentar um pedido para onde? Para a mesma página. Então, na verdade, é isso o mais perto responder aqui, embora, ao contrário no passado, eu não tenho especificado o atributo de ação, que normalmente temos de fazer. Acontece lá fora é um padrão. Se você não especificar a ação, é como dizer citação, fecha aspas ou o nome do arquivo em si, que neste caso seria ser como dom-0.html. É apenas uma espécie de inferir, ou melhor implícita. 

E por isso, se eu não fizer isso, vamos notar. Deixe-me salvar este. E eu removi retorno falso. Deixe-me voltar a este exemplo e força de recarregá-lo. E você pode ter visto-me sugerir isso em CS50 Discutir um monte de vezes. Se alguma coisa está sempre agindo funky ea navegador não está se comportando conforme o esperado, muitas vezes você vai querer segurar Shift e clique em Reload. Isso vai forçar cada arquivo para recarregar e não usar cache local do seu navegador ou cópia de modo que agora, deixe-me ir em frente e abrir meu Inspector, na guia Rede. Vou clique Preserve Log porque eu não quero isso para excluir as linhas Uma vez que recebo arrastada em outro lugar. 

Deixe-me ir em frente aqui e Tipo de Andi, clique em Enviar. Tudo certo. Isso parece como esperado. Ele diz: "Olá, Andi." Permitam-me, clique em OK. Interessante. Observe que a página mudou, embora para a página original. Observe o tipo de URL alterado. Ele acrescentou um ponto de interrogação, que é geralmente um indicador que tentou apresentar algo. E, em seguida, na parte inferior, ainda mais explicitamente, aqui é o pedido HTTP real, que recebeu uma resposta de 200 que me trouxe de volta aqui. 

Portanto, este não é o que nós queremos fazer, certo? Porque eu não quero recarregar a página inteira. I em vez queria voltar falsa, de modo a curto-circuito o comportamento padrão do navegador, que era, naturalmente, para enviar a página. 

Então, vamos dar uma olhada em um marginalmente melhor exemplo. Esta é uma versão dom. E observe o seguinte. Tudo bem se você não Grokar todas as linhas de código. Mas o que é fundamentalmente diferente sobre esta aplicação? Vou estipular ele se comporta o mesmo, faz a mesma coisa. O que eu tenho, obviamente, feito de forma diferente? Sim? 

AUDIÊNCIA: [inaudível]. DAVID MALAN: Yeah. Assim, a função é definida differently-- Em outras palavras, ausente da forma, lá em cima na linha 7-- ou ao invés, a linha não 8-- eu tenho o atributo onsubmit. No exemplo anterior, eu tinha isso. E então eu literalmente escreveu o meu código aqui. E então eu disse return false. E se não esfregar você da maneira errada, no entanto, ele deve começar a na medida como, assim como em HTML, quando começamos a misturar-se co-it com CSS em atributos de estilo, ele só começou a ficar um pouco confuso ou se sentir um pouco errado. 

Da mesma forma aqui, se você começar a tomar HTML, e então você automaticamente plop algum código JavaScript no meio de uma string, é não vai ser muito fácil de manter. Certo? Não é nem mesmo óbvio à primeira vista Um lugar onde o código JavaScript. Portanto, seria realmente bom, como um princípio de melhor design, vamos manter nosso HTML completamente separado da nossa Javascript. 

Então, para fazer isso, o que nós temos feito aqui é o following-- nós simplesmente usar HTML para somente marcação. E assim, em uma versão deste, todos Eu tenho é uma forma com uma identificação única. E então para cá, eu estou aproveitando de um recurso especial de JavaScript pelo qual eu posso ter o que é chamado uma função anônima. Assim, verifica-se que, se eu chamo document.getElementById de 'demo' que é como me dar um ponteiro para este nó na minha árvore, o elemento do formulário, por assim dizer. 

Agora, eu só sei de sabendo um pouco de HTML agora nós estamos depois de ler alguns on-line de referência, que suporta um elemento de formulário um monte de evento em listeners-- outras palavras, o rol de evento ouvintes que vimos há pouco. Eu sei que a partir da leitura da documentação que onsubmit é um evento válido ouvinte para um elemento de formulário. 

Então, quando eu sei que, é seguro para mim fazer o following-- obter esse nó da árvore, o elemento do formulário, e acesse a sua chamada propriedade onsubmit. Assim, o ponto significa apenas esta é uma propriedade, como um valor especial para dentro dele. E que tipo de dados sou eu atribuição de, aparentemente, para OnSubmit, que é efetivamente uma variável dentro desse nó na árvore? É um campo dentro dessa estrutura. Qual é o tipo de dados? 

Uma função, sim. Assim, verifica-se que o PHP tem isso. E mesmo que nós não falar sobre isso, C também tem função ponteiros, os capacidade de passar e atribuir funções como os próprios valores das variáveis. E nós não vamos a regredir de volta para C. Mas, por agora, verifica-se que no lado da mão direita aqui, mesmo que pareça um pouco funky, este meio, hey navegador, dá-me uma função. Eu não vou incomodar mesmo dando -lhe um nome, porque eu estou literalmente vai atribuir vamos chamá-lo o endereço desta função imediatamente a OnSubmit. Em outras palavras, o navegador, você não precisa para saber o que esta função é chamado. Você só precisa saber onde ele está na memória. E assim é suficiente apenas para tem um sinal de igual lá e não se preocupar nomeando isso, como foo ou cumprimentar ou qualquer outra palavra. E agora esta é apenas uma coisa estilística. Eu poderia mover este chaveta para as-- sorry-- próxima linha como geralmente fazemos CS50. Mas em JavaScript, é realmente estilisticamente comum apenas para manter a chaveta, o primeiro, em que a primeira linha. 

Mas a seguir, há Nada de interessante. Isso chaveta aberta apenas demarca o início da minha função. A função é agora idênticas, exceto que eu tenho incluído o falso retorno dentro desta função. Porque acontece out-- e você só faria sei que isto de leitura o documentation-- que se a função que você atribui para o manipulador onsubmit retorna false, o navegador só sabe e concorda não enviar o formulário para um servidor. Se ele retorna true, apresentará lo para um servidor por razões que veremos são úteis em apenas um momento. 

E então o ponto e vírgula depois a chaveta lá apenas significa que eu sou feito definindo a função. Você sabe o que chamar o mais rapidamente como você ouvir uma apresentação. Tudo certo. Isso ainda é indiscutivelmente tipo de feio. Então, o que mais podemos fazer? 

Bem, ao que parece, em seguida, em versão dois, que é o last-- e vamos olhar para isso. Correndo o risco de fazer que mais feia, verifica-se que há uma biblioteca em o mundo chamado jQuery. E jQuery é um super- biblioteca JavaScript populares isso é tão popular que a maioria qualquer JavaScript-- não é incomum que as pessoas confundem jQuery com JavaScript. Por quê? Em si tem muito JavaScript maneiras de fazer as coisas- verboso document.getElementById, dadadadadada. Você acaba tendo muito longas linhas de código. 

Assim, um sujeito chamado John Resid, que realmente funciona para uma startup até estes dias, saiu com isso anos de biblioteca há que muitas pessoas têm contribuído a chamada jQuery que muda a sintaxe da seguinte maneira. E só assim você já viu isso, Porque você vai invariavelmente ver isso se fazendo um projeto final baseado na web, esta seria a maneira equivalente a execução dessa mesma função usando esta biblioteca especial. 

Agora, ao invés de provocação o diferencia em sua totalidade, vamos apenas olhar para alguns padrões. Esta sintaxe parece ter quantas funções anônimas ou funções sem nome ou funções lambda AKA? Dois, certo? E você sabe que, mesmo se você não é super confortável com isso, apenas pelo facto de que ele diz function () duas vezes. 

E verifica-se que o que este código é doing-- e nós vamos referir-se a referências on-line, em última análise, para alguma ajuda com isso. Isto apenas significa que, quando o documento está pronto, vá em frente e cadastre- a seguinte função como o manipulador de enviar para o HTML elemento cuja ideia original é de demonstração. E então, quando isso acontece, chamar essas duas linhas de código. E esta é, tragicamente, uma mais maneira detalhada de dizer return false. E nós mencionamos isso só porque você verá um código como este online. E não é nada para se intimide com. Mas em vez disso, tenha em mente que o que é vai ser comum em JavaScript é esse paradigma. E é por isso que nós mostramos isso por agora. Tudo certo. Então, sem se deter muito muito em que a sintaxe, são há dúvidas sobre estes exemplos ou idéias até agora? Tudo certo. Então, vamos usar isso para algo útil. Fazendo uma página da web que apenas diz Olá, assim e assim não é tão interessante, não underwhelm. Este não vai ser bonito, mas ele vai fazer algo útil. Deixe-me voltar para o meu diretório aqui e abrir-se, dizer, forma-0.html. 

Então suponho que este é o calouro página de registo esportes internos sem qualquer CSS ou qualquer senso de design. E eu quero ir em frente e registe-se aqui com uma senha. E eu vou concordar com os termos e condições e clique em Register. E agora o site diz: "Você é registrado! (Bem, na verdade não.)" Que parece que funcionou, mas deixe-me ir em frente e forçar reload. 

E deixe-me dizer, não, você não fazê- precisa do meu endereço de e-mail real. Ou talvez nós vamos apenas dizer correio lá. Senha será, como, 12345. E então, só porque eu sou um idiota, agora é 123456789. E eu não estou indo para verificar sua caixa. 

Hmm. Tudo certo. Portanto, há várias oportunidades para melhoria aqui. E você sabe, ou vai ver no pset sete, que você pode escrever code-- e você tem que escrever código em PHP-- para defender contra esses tipos de usuário erros porque o usuário claramente não cooperou. E ele ou ela não lhe deu toda a valores que você queria ou mesmo no formato que você queria. Então você verá em pset sete que certamente poderíamos ter algum se as condições que dizem se o endereço de e-mail não é um username@something.edu, nós poderíamos apenas pedir desculpas e pedir desculpas para o usuário muito, como você pode estar em pset sete. Ou se não ter verificado que a caixa, Acontece em PHP, você pode detectar que, muito. E, certamente, se as senhas não correspondem como no register.php pset para sete, você pode detectar isso. Mas isso é uma dor no pescoço em que agora eles solicitar nós para percorrer todo o caminho para o servidor. O usuário é informado do erro. E, pelo menos, a menos que você use algumas técnicas mais extravagantes, agora eles tem que clicar na seta para trás. Não seria bom, como um monte de sites de hoje, se você tivesse mais imediato feedback, instantaneamente? 

Em outras palavras, deixe-me ir para a versão um, que vai haver mais bonita. Mas ele tem esse recurso. Malan, 12345, 123456789, não vai marcar a caixa, Register. As senhas não coincidem. Assim, mesmo que esse pop-up é ugly-- podemos substituir isso, eventualmente, com algo como Bootstrap, que você verá no pset sete é um library-- muito popular eu fiz detectar que as senhas não coincidem. Tudo certo. Bem, deixe-me corrigir isso como o usuário. Deixe-me ir em frente e dizer 12345, 12345. Ainda não verificando o acordo. Você deve concordar com a termos e Condições. Então por que? 

Se nós já postulava que há um caminho, e temos necessário você em pset sete para detectar erros condições como este do lado do servidor, por que eu deveria que se preocupar também em fazer isso em JavaScript? O que é um argumento em favor de que adicionando você está prestes a ver como some-- há uma complexidade adicional. 

Talvez não há nenhuma cabeça. O que poderia ser? AUDIÊNCIA: [inaudível]. DAVID MALAN: Oh, interessante. Exploits potenciais. Então, com certeza, se você não está segurando entrada do usuário errônea de que grande, talvez seja tanto melhor se não cheguem ao seu servidor. Gostaria de empurrar para trás lá e por exemplo, você provavelmente deve corrigir esses dois problemas. Mas isso é justo. O que mais? 

AUDIÊNCIA: [inaudível]. 

DAVID MALAN: Yeah. Este código, como dissemos antes, é interpretados no lado do cliente. Não incomoda o servidor, o que significa que não faz impacto de carga ou a capacidade do servidor. E agora, por pouco me velho, isso não tem efeito significativo porque eu tenho um usuário no momento. 

Mas se você é qualquer website de tamanho decente, especialmente as maiores, como o Facebook, o mais que você pode manter as pessoas fora do seu servidor o melhor porque um servidor, é claro, tem apenas uma quantidade finita de RAM, um número finito de gigahertz, um número finito de coisas ele pode fazer por unidade de tempo. Então, se há mais pessoas em o mundo bater seu servidor, registrando acidentalmente incorretamente, tão bem se você pode manter essa carga fora de seu servidor. Além disso, especialmente em um móvel device-- Se você já registrar em my.harvard ou Netid de Yale ou similar, há esta a latência com um monte de sites como aquele pelo qual ele toma, como, a mínima segundo ou dois, às vezes. E então, meu Deus, se você digitar errado, em seguida, você tem que bater para trás e refazê-lo. Portanto, não há latência, especialmente em conexões de rede mais lentas. Mas JavaScript, porque ele é executado no cliente e não precisa ir e voltar através de uma internet lenta potencialmente conexão, você pode começar o feedback quase instantâneo. 

Então, vamos olhar para isso. Deixe-me abrir formulário 0 e- olhar para o HTML aqui. E vamos ver o que está acontecendo. Esta é uma forma cujo ação é register.php. Eu só estou usando obtenha que eu podia ver a URL. Mas para senhas, nós certamente queremos para mudar esta para deixar na realidade. Aqui está um campo de entrada de texto tipo. Aqui está outra entrada campo de tipo de senha. Aqui está, se você nunca viu, uma entrada de caixa tipo. 

Mas não há JavaScript aqui qualquer. Este é apenas HTML que vai para register.php. Mas, em uma versão, onde começou a ficar essas pop-ups, vamos ver o que realmente acontece aqui. Na versão um, o que Vou see-- I pensei que poderia parar o suficiente com palavras suficientes, mas eu corri para fora. 

Na versão um-- lá vamos nós. Na versão um, observe o following-- e não é a melhor aplicação, mas é o meu primeiro. Observe que abaixo do forma, eu tenho uma tag script. E uma marca de script significa, hey, browser, aqui vem em algum código, normalmente, JavaScript. E agora, observe o que eu estou fazendo. Em linha-- eu mal consigo leia ele-- linha 32, ele diz, var form-- então me dê uma variável chamada formulário. E, em seguida, obter document.getElementId de "registro". O que é isto? Bem, deixe-me voltar aqui em cima. E observem, ah, eu dei o elemento do formulário uma ideia arbitrária, mas descritivo da inscrição. Então isso me dá uma variável que permite-me para pegar esse nó, que retângulo na árvore chamada formulário. meios form.onsubmit, hey navegador, registrar um ouvinte de evento neste formulário. Em outras palavras, quando este formulário é apresentado, execute o seguinte código. Ela não precisa de um nome, porque Por que você precisa saber o nome? Você só precisa saber o que executar, ergo é uma função anônima ou lambda. E essa função é todas estas linhas aqui. E agora, para ser honesto, mesmo que você não poderia ter escrito nunca JavaScript antes, é apenas lógica C e PHP. Portanto, se form.email.value == "" - por isso, se o campo de e-mail estiver em branco, gritar com o usuário com "Você deve fornecer seu endereço de e-mail. " Else if form.password.value é grito em branco no usuário, "Você deve fornecer sua senha." 

Mais interessante, logicamente, se não form.password.value igual form.confirmation.value-- onde é que a confirmação veio? Deixe-me voltar. Bem, eu chamei esta entrada campo aqui senha. E eu chamei este aqui confirmação. Eu poderia tê-lo chamado password dois ou qualquer outra coisa. Eu só estou verificando logicamente que estes dois são o mesmo. Else-- verifica-se este é o Sr. Boole novamente-- um valor booleano, a caixa de seleção. Então, se eu digo, exclamação ponto-- Se não form.agreement.checked, gritar com o usuário também. 

Portanto, esta sintaxe que você verá é muito comum em JavaScript, onde você tem essa notação pontilhada. Você começa com um objeto aqui. Você mergulhar no mais profundo de um para uma propriedade como senha. E então você começa a seu valor real. E mais uma vez, aqui é a entrada. Aqui é a senha nome. E seu valor é o que o humana tem, na verdade, digitada. 

Assim, em todos estes casos, voltei falsa. Mas se não, I return true. E agora vemos uma uso convincente de quando você iria retornar false para parar o que o usuário está fazendo e fazer-lhe escolher novamente ou digite novamente. Caso contrário, nós return true. 

E deixe-me apresentar um outra variante deste apenas para semear alguma compreensão da mesma. Bem, na versão 2 do presente, forma-2-- Eu vou fazer isso com um aceno de mão. Este é, para os curiosos, a versão jQuery, aqueles de vocês que pode querer mexer com essa biblioteca particular. Mas vamos start-- e dúvidas? Deixe-me fazer uma pausa por um momento porque que foi rápido e muito. 

Mas a coisa boa aqui é que todos do código é praticamente o mesmo. O novo material é o que é o dom? Quais são esses retângulos? Quais são esses nós? O que é uma função anônima? O que é um manipulador de eventos? Mas, felizmente, a maioria de que é apenas círculo completo de, digamos, semana zero. Tudo certo. Portanto, algo um pouco mais interessante? Bem, em primeiro lugar, deixe-me ir em frente e abrir o Google Maps. E você vai perceber que, para um momento, na segunda divisão, observe o que acontece quando I clique rápido o suficiente. E essa conexão em Harvard é tão rápido que você realmente não notá-lo. Mas o que você tipo de espécie de ver se eu clicar e arrastar muito rápido? Aqueles de vocês assistindo on-line, se você diminuir isso para velocidade de 0,5x, você pode ver isso melhor. 

O que estava acontecendo apenas antes que eu clicadas e arrastadas? Deixe-me tentar aqui-- deixe-me fazer outra coisa, como 90210. Vamos longe. Isso foi muito rápido, também. Como cerca de Disney World? Aí vamos nós. ESTÁ BEM. O que você viu em uma fração de segundo? Apenas, como, praças, certo? Espaços reservados para telhas? 

Bem, o que está acontecendo aqui? O Google Maps é um bom exemplo de esta tecnologia que é chamado de AJAX. E é aí que vamos começar a usar o JavaScript em um particularmente maneira sedutor. De volta ao dia, houve este site chamado MapQuest. E eu deveria ter tomado uma screenshot desta partir dos anos 1990, onde se você queria olhar para cima aqui no mapa, você literalmente clicar em uma seta -se na parte superior que lhe mostrei um quadrado diferente do mapa. Se você quisesse ir para a esquerda, você clicado uma seta que lhe mostrei um quadrado diferente do mapa. E alguns sites ainda fazem isso hoje. Mas mesmo MapQuest tem obtido melhor, como o Google Maps. 

Em vez disso, o que é melhor estes dias é sites que usam AJAX. AJAX-- também conhecido como Asynchronous JavaScript e XML, que é apenas uma maneira elegante de dizer uma tecnologia ou técnica que permite que um navegador usando JavaScript para fazer solicitações HTTP adicionais depois que a página tenha sido carregado. Então o que isso quer dizer? Bem, seria tipo de irritante no Gmail se cada vez que você queria verificar o correio, você tinha, literalmente, pressione Control-R ou Command-R ou clique no botão Atualizar ea página danado inteiro iria recarregar. Certo? Seria piscar branco provavelmente por segundo. Você iria ver a barra de progresso estúpido. E só para ver se você tem novos mail, a página web inteira ea URL você está no teria que recarregar. 

Mas isso não é o que acontece no Gmail. Certo? Quando você começa um novo e-mail em Gmail, o que acontece na tela? Isso só mostra-se, certo? Ele só aparece magicamente como uma nova linha na tabela. Isso envolve um realmente quantidade razoável de complexidade. Na verdade, se você pensar sobre esta árvore, que mesmo que é simples aqui, Gmail-- e eu teria que olhar no código para ser sure-- provavelmente tem uma tabela HTML ou talvez uma lista desordenada que torna cada uma das suas caixas de entrada e-mails como. 

E por isso, se você imaginar isso lá é uma árvore na memória quando você está usando o Gmail, que olha o tipo de tipo de assim, quando o Google percebe, ooh, você tem um novo e-mail, isso não acontece quer reconstruir a árvore inteira. Pelo contrário, ela quer encontrar o nó no a árvore que representa a sua caixa de entrada e basta inserir um novo nó. 

Então, muito semelhante ao PSET cinco, onde você teve de inserir os nós em uma tabela hash, Da mesma forma que o Google, via Código JavaScript que tem escrito, Traverse esta árvore, descobrir onde é a parte caixa de entrada da janela, e, em seguida, inserir uma nova linha. E uma nova linha significa apenas uma ou mais novos nós em uma árvore. 

E assim AJAX é esta técnica que permite exatamente isso. Uma vez que você visitou uma URL, no entanto louco tempo é, e uma vez que a página tem foi carregado, você pode ainda agarrar mais dados a partir da internet-- se é um e-mail ou uma telha de um map-- agarrá-lo por trás das cenas e, em seguida, insira-o na página de modo que o ser humano não faz realmente tem que esperar por isso. 

Facebook Messenger funciona da mesma maneira. Qualquer número de outros websites-- oh, na verdade, até mesmo isso. Quer dizer, isso é, francamente, tipo de um irritante apresentam estes dias. Se eu começar a procurar por este cats-- é uma espécie de experiência do usuário horrível. Ele só começa a procurar-me. Bem, o que ele está fazendo? O URL não mudou desde que eu comecei a escrever. Mas o que está acontecendo em todo o wire-- OK, hmm interessante. O que está acontecendo em todo o fio aqui só fica mais estranho. 

ESTÁ BEM. Então deixe-me ir em frente e inspecionar elemento e vá para a guia Rede e tentar fazer isso técnico e menos sobre gatos. Enquanto digito, literalmente, gatos e- o que está acontecendo per-- eu não vou clique isso. Tudo certo. Então, aqui em baixo, o que está acontecendo a cada vez que digitar um caractere, aparentemente? Como, de baixo nível? O que está acontecendo com cada um desses caracteres eu estou escrevendo no meu teclado? Sim? AUDIÊNCIA: [inaudível]. 

DAVID MALAN: Exatamente. Cada um desses personagens é indo para o Google, um de cada vez. Eles estão construindo uma string em que representa o seu servidor tudo o que eu digitei até agora. E cada vez que eu digito um outro personagem, que usar seu molho secreto de um procurar algoritmo e descobrir, ele quer dizer esta página gato ou esta página gato ou similares? Então, em algum sentido, ele me dá um melhor experiência em que eu nem precisa para completar o meu pensamento. E, de fato, é uma útil coisa, autocomplete em geral. Se os seus algoritmos são bons o suficiente e se as minhas pesquisas são bastante óbvias, Eu não tenho que digitar a palavra inteira. Eles vão me dizer o que é na verdade estou procurando. Então, o que o Google chama instantânea pesquisa está apenas usando AJAX, usando um código que lhes permite solicitar conteúdo adicional através de um navegador web nos bastidores usando este nova linguagem, JavaScript. Portanto, temos um par de minutos do fim. E deixe-me chamar meu amigo Colton até o palco, uma vez que parecia particularmente divertido última vez a introdução de uma tecnologia que alguns de vocês tenham manifestado interesse em para projetos finais. Nós pensamos que seria divertido para trazer -se um voluntário, embora, hoje para mostrar-lhe um complemento para este que permite que você-- sim, Eu vi isso em primeira mão. Vamos lá para cima. Muito bem feito. Bom trabalho. Eu estou indo para projetar esta em a tela em apenas um momento. Qual é o seu nome para todos? 

EFA: Eu sou Efa. 

DAVID MALAN: Etha? 

EFA: Efa. 

DAVID MALAN: Efa? 

EFA: Yeah. 

DAVID MALAN: Prazer em vê-lo. Tudo certo. Deixe-me ver se pronto. Aproxime-se sobre a meio com Colton aqui. O que Colton tem em suas mãos hoje é um controle remoto. Então ao invés de apenas ficar lá em um mundo tridimensional olhando ao redor Colton como fez, agora pode Efa na verdade, pé subindo, baixo, esquerda e direita como um Nintendo ou Xbox controlador. EFA: eu vou cair fora do palco. DAVID MALAN: eu vou ficar aproximadamente aqui. Mas isso é um risco. ESTÁ BEM. Então vá em frente e colocar aqueles em. Deixe-me ir em frente e alternar para a tela aqui. Deixe-me diminua as luzes. E Colton, deixe-me venha ficar ao seu lado. 

Você quer explicar aqui com o microfone o que estamos fazendo? Aqui vai você. 

Colton: Claro. Então, agora nós somos carregar o Oculus, Eu acho que não operam operating-- sistema, mas o programa principal, onde você pode acessar todos os jogos e aplicativos que estão em sua biblioteca. Então, agora, ele deve dizer toque no touchpad para começar. Touchpad vai ser na lado direito do fone de ouvido. Então vá em frente e tap-- EFA: Oh, cara. DAVID MALAN: Sim, lá você vai. A qualidade Efa está vendo é muito mais elevada qualidade. Este é apenas o Wi-Fi aqui. Colton: Então, o que você está vai querer fazer é olhar para o topo direito da tela. Yep, aquele jogo no topo direito. E então quando você está selecionando ele, toque novamente no touchpad. Acho que suas Dreadhalls. E então aqui está A-- aqui, deixe- me segurar os seus óculos para você. 

Então, eu só lhe deu um controlador. Então, agora ele pode controlar o jogo. Ele pode se movimentar e coisas assim. Então vá em frente e olhar para cima até o topo. Você deverá ver um novo jogo. Então vá em frente e você pode fazer isso. Agora, você deve ser capaz de controlar -se com o controlador, assim, quanto mais rapidamente o jogo carrega-se aqui. Isso pode ser um pouco assustador. 

EFA: Agora você me diz. ESTÁ BEM. 

Colton: Tudo bem. Então, confirme que você pode se mover. ESTÁ BEM. Você pode se movimentar. Perfeito. Então, se você olhar para baixo, você tem um mapa. Mapa mostra onde você está. Você pode olhar ao redor da sala. Você pode virar completamente. Sim exatamente. Inversão de marcha. 

Então olhe para a sua esquerda. Eu acho que há algo que você pode pegar o barril no quarto. 

EFA: Como faço para obter o Roteiro para fora do caminho? Colton: Olhe para cima. Basta olhar para cima. Tudo certo. Ai está. Agora vá em frente e apenas virar. Então olhe mais para a sua esquerda. Mantenha-se movendo para a esquerda. Continue procurando esquerda. Continue. Sim. 

EFA: Ah, isso maneira. 

Colton: Sim. Caminhe em direção a ele com o controlador. Ai está. Agora ele deve dizer buscá-lo. Ai está. Buscá-lo. Tudo certo. Agora, vamos sair desta sala. Vá em frente e caminhar até a porta. Então você está indo para hold-- diz segure o botão para forçá-lo aberto. Então vá em frente e segure o botão. Yep, forçando-o abrir. Tudo certo. Bom trabalho. Agora nós estamos andando para fora da sala. Então eu vou deixar o resto para você e ver o que você descobrir. EFA: Eu não estou indo na sala escura. Oh espere. Agora eu tenho que ir pelo corredor escuro? OK, eu vou voltar [inaudível]. Colton: Tudo bem. Alguns mais itens para pegar. Parece que algumas moedas. Essa é uma gazua. Então, se você encontrar uma bloqueado porta, você pode usar isso. Você está assustado? 

EFA: Ainda não. Colton: OK. 

Pretend-- sim. Basta fingir que você é na verdade, de pé ali. E se você virar circundar-- você tem que se acostumar com isso. Mas faz sentido. DAVID MALAN: E enquanto continua a Efa jogar, uma vez que poderia fazer isso o dia todo, todos nós podemos ponta dos pés para fora aqui. Mas nós temos dois outros pares, se você gostaria de vir e jogar. Caso contrário, vamos ver Até a próxima quarta-feira. Obrigado ao nosso voluntário hoje. [Aplausos] 

[MUSIC - "Seinfeld TEMA"] COLUNA 1: Bem, eu sou colocando um novo PL montar em. Eu só mudou o OLPF-- 

COLUNA 2: Então, o que exatamente você está fazendo? 

COLUNA 1: Bem, cada um dos these-- aqui, eu vou mostrar-lhe este aqui. Você pode vê-lo aqui. 

COLUNA 3: Eu acho que eu sou bom com estes. Você quer mais? 

COLUNA 4: Não, eu estou bem. [Inaudível]. 

COLUNA 3: Não, [inaudível]. Tem algum. COLUNA 1: A cor diferente. COLUNA 2: OK. COLUNA 1: Então, em última análise o que faz é que ajusta a cor de--