[Música tocando] 

DOUG LLOYD: Então, por agora estamos velhos profissionais em programação web, certo? E nós cobrimos vários línguas em vídeos individuais. E agora vamos fazer mais um, JavaScript. 

Primeiro a boa notícia, JavaScript é uma programação moderna linguagem muito parecida com PHP cujas sintaxe é derivado a partir de C, de modo que é um bom lugar para começar. É sobre tão antiga como PHP, bem como, tendo sido em torno de cerca de 20 anos. Foi inventado em torno de ao mesmo tempo como o PHP. E JavaScript é realmente muito fundamental para a experiência do usuário da web. Na verdade, existem três línguas que eu diria que tipo de compõem o experiência do usuário de interagir com o site, html, CSS e JavaScript. E agora vamos falar um pouco sobre JavaScript. 

A má notícia, porém, com JavaScript que define uma série de regras para si mesmo, e depois se rompe-los. E JavaScript pode realmente ser tipo de desafio para aprender, porque é diferente de C e PHP, que são muito bem estruturada e ter regras muito rígida de como as coisas podem funcionar. JavaScript tem tipo de concluir tão flexível que talvez as coisas não estão indo para trabalhar a maneira que nós esperamos que eles, e talvez nós realmente não podemos aprender nossa primeira linguagem de programação como JavaScript. Então, talvez porque não fixou quaisquer regras, e ele realmente não reforçar os bons hábitos de codificação. Mas agora nós esperamos que desenvolveram alguns bons hábitos de codificação, e para que possamos começar a incursão em JavaScript um pouco. 

Para escrever JavaScript, semelhante à abertura um arquivo C com uma extensão dot C ou um arquivo PHP com uma extensão dot PHP, tudo o que precisamos fazer é abrir um arquivo com extensão de arquivo do ponto js. Nós não precisamos ter qualquer especial delimitadores como fizemos em PHP. Esse tipo de ângulo suporte de ponto de interrogação PHP que estamos acostumados a isso, o caminho dizemos ao nosso navegador que o que temos é JavaScript é através da inclusão -lo em uma tag HTML, e vamos ver um pouco sobre como fazer isso em apenas um momento. 

A outra coisa que faz JavaScript diferente, porém, é que ele é executado do lado do cliente. Então, recordamos com PHP que nós nunca poderia realmente ver o PHP que sublinhou um site. Se alguma vez viram o fonte da página, só faria ver o html que era gerado pelo que o PHP. Mas JavaScript é executado do lado do cliente. Seu JavaScript é executado em seu computador. E é por isso que você pode fazer coisas como adicionar bloqueadores. Certo? Bloqueio de anúncios geralmente é feito por matando todos a JavaScript que está sendo executado em um determinado site. E uma vez que teria de executado no seu lado do cliente máquina, você pode simplesmente parar a JavaScript para executar inteiramente. Isso também significa que quando você usa um site que inclui JavaScript, você tem que enviar a fonte de JavaScript código como parte de sua resposta http para o cliente quando eles solicitarem. E para que você não pode quero usar JavaScript para fazer coisas realmente sensíveis como passar informações sobre as senhas dos usuários trás e para trás, porque eles são, na verdade, vai receber todo o código fonte, não apenas o html que é gerado, tal como seria o caso, por exemplo com o PHP. 

Então, como vamos incluir JavaScript em nosso html para começar? Bem, semelhante ao CSS, na verdade, é uma espécie de como o fazemos aqui. Com CSS temos tags de estilo. E dentro dessas tags de estilo, podemos definir uma folha de estilo CSS. Da mesma forma com JavaScript podemos abrir tags de script, outra tag html que não fez falar em nosso vídeo html, e escrever em JavaScript entre essas tags de script. Além disso, porém, como CSS, nós poderia ligar no exterior arquivos CSS e trazê-los para o nosso programa dessa maneira. Com CSS nós também podemos, desculpe-me, com JavaScript nós também pode especificar a origem atributo da tag script para conectar em JavaScript separadamente, para que você não tem que escrever nos entre tags de script, nós pode vinculá-lo no uso que tag script também. E, assim como com o caso com CSS onde recomendamos que foi, provavelmente, no seu melhor interesse para escrever seu CSS em um arquivo separado no caso você precisará alterá-lo, da mesma forma que nós recomendamos que você escreve o seu JavaScript em arquivos separados e usar a fonte de tags de script atribuir a amarrar seu JavaScript em seu html, a sua página web. 

Então variáveis ​​JavaScript, vamos começar a falar sobre a sintaxe aqui. E nós vamos passar por este tipo de forma rápida, porque nós fizemos isso em PHP, de modo isso deve ser bastante familiar. Então variáveis ​​em JavaScript são muito semelhante ao PHP variáveis. Não há nenhum tipo de especificador, e quando você introduz uma variável, você prefixo com a palavra-chave var. Em PHP faríamos algo assim, sinal de dólar x. Isso é como nós indicada uma variável, mas não, nós não mencionam o tipo da variável de todo. Gostaríamos de dizer algo como dólar sinal x é igual a 44 em PHP. Se nós estávamos fazendo o mesma coisa em JavaScript, diríamos var x é igual a 44. Então var é uma espécie de meio do caminho da introdução de uma variável. Isso é talvez um pouco mais intuitivo que apenas variável cifrão. 

Novamente, uma vez que não há nenhuma tipos de dados, poderíamos fazer isso com qualquer tipo de dados, cordas, qualquer outra coisa seriam todos var. Condicionais, toda a nossa velhos amigos de C e PHP ainda estão disponíveis, por isso temos se, else if, else, switch e pergunta marca de cólon. Mudar restante tão flexível como ele estava em PHP, mas tudo isso você é familiarizados com agora. E da mesma forma com loops são os antigos favoritos de tempo, fazer enquanto, e por ainda disponíveis para nós. Então já sabemos muito do tipo básico de JavaScript fundamentos apenas em virtude de ter um pouco de conhecimento agora sobre C e PHP. 

O que sobre as funções em JavaScript? Bem, similar ao PHP cada função é a palavra-chave introduzida com a função. Você diz função, e então você começar a definir a sua função. O que é um pouco diferente sobre JavaScript, no entanto, é a capacidade de ter o que é chamado uma função anônima. Assim, você pode definir funções que não tem um nome. Isso é algo que realmente não tenha visto antes. Nós realmente vai usar o conceito de uma função anônima um pouco mais adiante neste vídeo, porque ele vai fazer um pouco mais de sentido em contexto quando o vemos em uma situação particular que eu criei aqui. Mas vamos apenas dar uma olhada com o que um simples JavaScript função pode parecer. 

Então eu fui em frente e abri minha CS50 IDE e eu já tenha executado Apache para começar minha corrida servidor. E eu tenho esse arquivo aberto chamado home.html. E eu vou fazer zoom um pouco aqui. E, basicamente, você pode ver o Home.html é apenas um monte de botões. E eu estou dizendo no topo aqui que esta é a secção JavaScript materiais. Portanto, há um monte de botões aqui, mas o que esses botões realmente fazer? 

Bem, vamos dirigir sobre a minha IED, e eu home.html abrir aqui. No início, aqui é onde eu estou ligando em todos os meus arquivos de origem de JavaScript. Certo? Então, eu tenho anonymous.js, clock.js, Eu estou usando o atributo de origem da tag script para conectar no arquivo. Então eu não tenho escrito qualquer JavaScript diretamente para este arquivo, mas eu puxado em todo o JavaScript que eu escrevi separadamente. E se rolar para baixo aqui, este todos devem olhar um pouco familiarizado com um pouco de nova sintaxe. Temos aqui tag cabeçalho para funções e, em seguida, um botão. Eu tenho uma entrada que é um tipo de botão, e, aparentemente, quando eu clicar nele, Eu vou ligar para alguns funcionar data alerta. E é assim que podemos classificar de misturar-se um pouco de JavaScript e HTML. Eles realmente jogar muito bem juntos, e assim, aparentemente, quando Eu clicar neste botão, eu vou para chamar alguma data alerta função. E da mesma forma que eu tenho definido comportamentos para todos os outros botões que estão nessa página home.html, que nós vamos manter voltar para durante o curso de um vídeo. Mas vamos voltar a subir aqui e dê uma olhada em clock.js, que é a Arquivo JavaScript que eu escreveu que tem esta primeira função vamos dar uma olhada. Como você pode ver, eu começo minha JavaScript funcionar com a palavra-chave função, e eu dei um presente um nome, chama-se data de alerta. Dentro de lá, eu aparentemente criar um nova variável local chamado data atual. E eu vou atribuir igual a uma nova data. E nós poderíamos entrar em um monte de detalhe sobre o que é uma data, e realmente é tão JavaScript grande que não podemos possivelmente cobrir tudo em um vídeo. Mas basta dizer, isso vai para voltar para mim um item de dados que encapsula a data e hora atual. Eu estou armazenando que em uma variável que eu sou aparentemente, vai alertar data atual. 

Bem, o que faz alerta olhar data atual como? Vamos dar uma olhada no arquivo em si parte traseira sobre o na janela do navegador. Então, novamente, este é o botão que eu ter amarrado a, essa função nomeada. E eu clicar nele lá e olha o que ele fez, ele alertou. Ele apareceu esse tipo de caixa dizendo me que o tempo atual é, aparentemente, é 04 de novembro a 10:43:43 na parte da manhã. E se eu clicar nele novamente, agora é de alguns segundos mais tarde, certo? Então, isso é tudo que esta função faz. Quando eu clicar nesse botão, ele aparece uma mensagem de alerta para mim. Então não há realmente demais para funções que é diferente de PHP, apenas um pouco de nova sintaxe que vem com o trabalho com JavaScript. 

Arrays em JavaScript são bastante simples. Para declarar uma matriz, você pode usar a sintaxe colchetes que estamos familiarizados com a partir de PHP. E semelhante ao PHP, nós também pode misturar tipos de dados. Portanto, este array, ambos destas matrizes faria ser perfeitamente legítimo JavaScript. Um que é todos os inteiros, e que confunde-se diferentes tipos de dados. 

O que é algo muito diferente em JavaScript, embora? Essa é a noção de um objeto. Por isso, talvez você tenha ouvido falar programação orientada a objeto. Nós não fazemos um monte de que em CS50, mas vamos fazer um pouco dela aqui no contexto de Javascript. Agora JavaScript tem a capacidade de comportar-se como uma programação orientada a objeto idioma, mas que não é ela própria exclusivamente orientada para um objeto linguagem de programação. E isso vem de novo de volta para por isso que eu disse, pode ser muito desafiador para aprender JavaScript como sua primeira programação língua, porque não faz realmente se encaixam um paradigma particular. 

C, por outro lado é um linguagem de programação funcional. Se quisermos, as funções são espécie do grande chefe, certo? Eles ditam o que acontece tudo o resto. Queremos mudar variáveis, que chamamos de funções. Nós fazemos as coisas de funções. Objectos vez, numa linguagem orientada a objetos, objetos tipo de tornar-se a estrela e funções tornam-se uma espécie de secundário. Mas o que é um objeto, o que é esta noção de um objeto? Bem, se isso ajuda, pense sobre ele em primeiro ordenar como uma estrutura de C ou um struct que aprendemos sobre antes. Em C, contém uma estrutura de um número de campos, e talvez nós agora pode começar a chamar essas propriedades campos. Mas as propriedades nunca ficar por conta própria, certo? Se definir uma estrutura de um carro assim com as duas seguintes campos ou propriedades, uma an inteiro para o ano do carro e outra um caráter 10 string para o modelo do carro, Eu posso dizer algo como isso, Eu posso declarar uma nova variável Tipo de carro struct Herbie. E então eu posso dizer alguma coisa como herbie.year é igual a 1963, e herbie.model igual Beetle. Está ok. Eu estou usando os campos na contexto da estrutura, mas eu nunca poderia apenas dizer algo como isto. Certo? Eu não pode usar o nome do campo independente da estrutura. É uma espécie de uma coisa fundamental. 

Assim sendo campos fundamental para estruturas C são muito similares às propriedades sendo fundamental para objetos JavaScript. Mas o que os torna particularmente interessante é que os objetos também podem ter o que são chamados métodos, que são realmente apenas uma palavra chique para funções que são inerentes ao objecto bem. Portanto, é uma função que só pode ser chamado no contexto de um objecto. Apenas um objeto que tenha definido esta função dentro da sua, se você pensar sobre um struct, a função é definida dentro as que definem chaves da estrutura. Por isso, só significa algo para a estrutura. E isso é uma espécie do que estamos fazendo aqui com objetos e métodos. É basicamente como estamos definindo uma função que só faz sentido em um em particular objeto, e por isso, chamada que um método do objecto. E nós nunca podemos chamar isso função independente do objeto, assim como não podemos dizer ano ou modelo independente da struct em C. 

Então programação funcional paradigmas algo parecido com isto. Função e, em seguida, quando você passa no objecto como um parâmetro. Em uma programação orientada a objeto línguas, esse tipo de recebe capotou, e gostaríamos de pensar sobre -lo como este, object.function. Por isso, que tipo de ponto operador novamente implicando que é algum tipo de propriedade ou atributo do próprio objeto. Mas isso é o que um objeto linguagem de programação orientada pode fazer para fazer uma função recorrer a um método, mais uma vez, que é apenas uma palavra especial para uma função que é inerente a um objeto. Isto é o que que sintaxe pode parecer. E assim nós vamos começar a ver alguns dos isto no contexto de Javascript. 

Você também pode pensar em um objeto como uma espécie de matriz associativa, que estamos familiarizados com a partir de PHP. Lembre-se de uma matriz associativa permite nós ter pares de valores-chave, em vez de ter índices 0, um, dois, três, e assim por diante, como estamos acostumados a partir de C matrizes. As matrizes de associação pode mapear palavras, como no vídeo PHP, nós estávamos falando sobre coberturas de pizzas. E por isso, tivemos um array chamados de pizzas, e nós teve queijo era uma chave e $ 8,99 foi o valor, e em seguida, pepperoni era uma chave, $ 9.99 era um valor, e assim por diante. E assim, também podemos pensar em um objeto tipo de semelhante a um associativa array. E assim esta sintaxe aqui criaria um novo objeto chamado Herbie com dois propriedades dentro dele. Ano, o que é atribuído o valor 1963, e modelo, que é atribuído a string Besouro. 

E observe aqui que eu estou usando aspas simples em JavaScript. Você pode usar aspas simples ou duplas quando você está falando de cordas. É apenas convencionalmente O caso que na maioria das vezes quando você está escrevendo JavaScript, você acabou de usar aspas simples. Mas eu poderia usar as aspas aqui, e que seria perfeitamente bem também. 

Então lembre-se como em PHP tivemos essa noção de um para cada loop que nos permitiria para repetir todos o valor da chave pares de um associativa matriz, porque não têm essa habilidade de iteração através de 0, um, dois, três, quatro, e assim por diante? JavaScript tem algo muito semelhante, mas ele não é chamado um para cada loop, ele é chamado um no loops. Então, se eu disse-me que isso, para a chave var em objeto, que é uma espécie de semelhante a dizer para cada algo como algo. Mas tudo que eu estou fazendo aqui é a iteração através de todas as chaves de meu objeto. E dentro do crespos cintas lá, eu o faria usar objeto de chave entre colchetes para referir- para o valor nesse local chave. 

Como alternativa, há ainda uma outra abordagem. Se eu simplesmente só se preocupam com o valores, o que posso dizer para a chave de objeto, e apenas usar chave dentro. Assim, para chave var em objeto, eu tenho para usar objeto colchetes chave dentro do loop. Para a tecla de var de objeto, eu posso basta usar chave dentro do loop, porque eu sou apenas especificamente falando sobre os valores lá. 

Então, vamos talvez dê uma olhar para a diferença apenas para mostrar-lhe rapidamente a diferença entre quatro na e para a de com um muito específico matriz, que nós temos aqui, semana matriz. Então eu tenho que encontrar uma nova matriz que eu preenchido com sete cordas, Segunda, terça, quarta, Quinta-feira, sexta-feira, sábado, domingo. E eu quero agora uma iteração através desta matriz, imprimir determinadas informações. Se eu usar um laço no para imprimir as informações, o que você acha que eu vou conseguir? Bem, vamos dar uma olhada. E antes de saltar sobre a minha janela do navegador, só sei que console.log é uma espécie de um maneira de fazer um F de impressão em JavaScript. Mas qual é o console? Bem, isso é o que vamos para ir dar uma olhada agora. 

OK, então estamos de volta aqui em minha janela do navegador, e eu estou indo para abrir as minhas ferramentas para desenvolvedores. Mais uma vez, estou apenas batendo F12 para abrir ferramentas para desenvolvedores. E note que aqui no topo Eu escolhi console. Portanto, esta é a noção de um console de desenvolvedor, e ele vai nos permitir imprimir informações para fora, como o tipo de terminal, mas como você verá um pouco mais tarde, nós também pode digitar informações em para interagir com a página web. Eu estou indo para fazer zoom e um pouco aqui, e eu estou indo agora em diante, clique no teste. E quatro em test-- eu não vou mostrar-lhe o código para ele agora, mas você vai obtê-lo se você baixar o código-fonte que está associado a este video-- é apenas isso no laço que vimos apenas uma segundo atrás no slide. 

Então, eu vou clique que botão, e aqui, aqui está o que foi impresso no consola, 0, um, dois, três, quatro, cinco, seis. Eu não imprimir as informações essas localizações dentro da matriz, porque eu usei um no loop. E no interior do corpo do laço, I apenas impresso chave não chave do objeto. Mas se eu agora limpar o meu console, e eu para mudar para de teste, e pelo teste de quatro Eu digo que eu uso para de malha em vez e imprimir chave, se eu clicar em que, agora estou tendo o elementos reais dentro do meu objeto ou minha matriz no presente caso. Minha série de dias de semana. Eu imprimi segunda-feira, Terça quarta. Então essa é a diferença entre um no loop, que imprime apenas as chaves se você só usa chave dentro do corpo do laço, e um para de laço, que imprime os valores se você usar apenas chave no interior do corpo do ciclo. 

Tudo bem, como é que vamos agora começar a concatenar cadeias de caracteres e talvez misturar algumas variáveis ​​com interpolação como fomos capazes de fazer em PHP? Bem, nós estamos bastante familiarizados com isso a partir de PHP. É desta forma que o faria usando o operador ponto para concatenar strings. Em JavaScript, embora, nós realmente usar algo chamado de operador plus, que é talvez até um pouco mais intuitivo, certo? Estamos adicionando um monte de cordas juntos. Então, vamos voltar e ver o que esta será impresso se nós estamos tentando imprimir todas as informações na semana matriz. Tudo bem, então sob aqui sob concatenação de strings, Tenho duas opções, construção corda V1 e V2, em seguida, edifício seqüência. E vamos ver porque nós precisa V2 em um segundo. Mas eu vou clicar em corda edifício V1, que é o código nós apenas dar uma olhada, o console.log com todos os trunfos. Vamos ver se isso resultar na impressão o que nós esperamos. 

Segunda-feira é o dia número 01 da semana, Terça-feira é o dia número 11 da semana. Bem, o que eu estava tentando fazer houve obter -lo para imprimir segunda-feira é o dia número um, terça-feira é o dia número dois. Mas parece que eu sou sempre imprimir um. Bem, por que isso? Bem, ao que parece, ter um outro olhar neste pequeno trecho de código aqui. Observe que estamos usando a mais operador em dois contextos diferentes. 

E aqui é onde talvez as coisas que nós tipo de estado a dizer, oh, é tão grande. Não lidar com tipos de dados mais. Mas aqui é onde o fato que perdemos tipos de dados pode realmente ser um pouco de um problema para nós. Agora que o operador é utilizado para além concatenar cadeias de caracteres e adicionar números juntos, JavaScript tem para fazer o seu melhor palpite sobre o que eu quero que ele faça para mim. E, neste caso, ele adivinhou errado. É dia apenas concatenada, o que seria 0, um, dois, três, quatro, cinco, ou seis, e então ele só concatenado e, em seguida, que um concatenados. Ele não chegou a adicioná-los juntos. E assim estes idiomas, PHP e JavaScript, que abstrai essa noção de tipos, você não tem que lidar com isso. Eles ainda têm tipos sob o capô. E nós podemos, em situações assim, aproveitar esse fato dizendo algo como talvez esta, que está dizendo JavaScript, pela forma, tratar isso como um número inteiro, não tratá-lo como uma string, mesmo embora nós estamos misturando cordas e inteiros aqui. 

É apenas uma daquelas coisas que parece tão grande no contexto que não temos a lidar com tipos mais, mas às vezes você correr em uma situação exatamente como este, onde o fato de que você não tem controle sobre os tipos pode voltar contra você se você não tiver cuidado. E assim se nós pop de volta para IDE, eu sou vai limpar a minha consola de novo, e eu estou indo para clicar cadeia prédio versão dois, que é onde eu usar essa função de análise int. Agora ele está imprimindo informações que eu estou esperando. Número um dia de segunda-feira, terça- é o número de dois dias, e assim por diante. 

Então vamos falar sobre as funções novamente. Eu prometi que iria falar sobre anônimo funções, e agora o contexto para que finalmente chegou. Então, antes de fazê-lo, vamos falar novamente sobre matrizes para apenas um segundo. Assim, as matrizes são uma especial caso de um objecto. Na verdade, tudo em JavaScript é na verdade um objeto. Assim, as funções são um caso especial de um objeto, inteiros são uma especial caso de um objeto, mas especificamente matrizes tem um número de métodos. Lembre-se, porque eles são objetos, que podem ter propriedades e métodos. Eles têm um certo número de métodos que pode ser aplicada a esses objetos. Há um método chamado tamanho, array.size, que irá retornar ao você como você poderia esperar o número de elementos em sua matriz. Array.pop, tipo de como nossa noção de estalo fora de uma pilha, se você se lembra do nosso vídeo pilhas, remove o último elemento da matriz. Array.push adiciona um novo elemento para o final de uma matriz. Array.shift é uma espécie de como DQ, ele emendas para fora o primeiro elemento de uma matriz. 

Mas há também um outro especial método de um array chamado mapa. E esta é uma espécie de conceito interessante. Então, qual é a idéia de um mapa? Você vai realmente ver isso em várias outras línguas, e nós não estamos falando de um tipo de cartógrafos mapa aqui, estamos falando de uma função de mapeamento. No contexto que estamos falando aqui, um mapa que é uma operação especial pode executar em um array para aplicar uma determinada função para cada elemento dessa matriz. e por isso que temos a dizer em Neste caso, talvez Array.map, e dentro dele, nós estamos passando em mapa é uma função que queremos para ser aplicada a cada elemento individual. Então, é uma espécie de análogo a usar um loop para iterar sobre cada elemento e aplicar uma determinada funcionar para cada elemento, apenas JavaScript tem este construído em noção de mapeamento que podem ser aplicadas. E este é um grande contexto para falar sobre uma função anônima. 

Então, digamos que temos este array de inteiros. Chama-se nums, e ele tem cinco as coisas nele, um, dois, três, quatro, cinco. Agora eu quero mapear alguns função para essa matriz. Eu quero ter uma função de aplicar para cada elemento da matriz. Bem, vamos dizer que o que eu quero fazer é apenas dobrar todos os elementos. O que eu poderia fazer é só usar um loop para var I é igual a 0, I é inferior a ou igual a 4, eu, mais, mais, e em seguida, dobrar a cada número único. Mas eu também posso fazer algo parecido com isto. Posso dizer nums era antigamente um dois três quatro cinco, Agora, porém, eu gostaria que você aplicar um mapeamento sobre essa matriz onde eu gostaria que você para dobrar a cada número. E isso é exatamente O que está acontecendo aqui. Mas observe o que eu estou passando como o argumento para o mapa. Esta é uma função anônima. E repare que eu não tenha dado esta função um nome, Eu só dei-lhe uma lista de parâmetros. E assim, este é um exemplo de uma função anônima. 

Nós geralmente não chamaria isso função fora do contexto do mapa. Estamos definindo-a como um parâmetro para mapear, e assim nós realmente não precisa ter um nome para ele, se o única coisa que preocupa é o mapa e é definido direita lá dentro do mapa. E por isso esta é uma função anônima. Nós não temos sido capazes para fazer isso anteriormente. Mapa alguma função que aceita um parâmetro, num, e que essa função faz é retornos Num vezes 2. E assim, depois desta mapeamento tem sido aplicada, este é agora o que NUMS looks como, dois, quatro, seis, oito, 10. E nós vamos estalar sobre a minha janela do navegador e apenas dê uma olhada neste muito rapidamente também. 

Então, eu tenho um outro botão aqui na minha home page chamada dupla. E quando eu clicar duas vezes, e diz- me antes que fosse um, dois, três, quatro, cinco após dois, quatro, seis, oito, 10. E se eu voltar e clique duplo mais uma vez, duas, quatro, seis, oito, 10. E, depois, quatro, oito, 12, 16, e, em seguida, 20. E o que eu estou fazendo nesta função? Bem, se nós apenas pop para IDE, e Eu puxo a minha função anônima, aqui na linha de sete a 13 anos, eu sou fazendo um pouco de trabalho elaborado aqui, mas eu só estou imprimindo o que está atualmente na matriz. Em seguida, na linha 16, 17, e 18, não é o meu mapa. Aqui é onde eu estou aplicando esta duplicação função para cada elemento. E, em seguida, um pouco mais abaixo, Eu só estou fazendo a mesma coisa Eu estava fazendo antes, só que agora eu sou imprimir o conteúdo da matriz depois. Mas tudo que eu tenho feito aqui é basta usar uma função anônima para mapear através de uma matriz inteira. 

Então, mais uma grande tópico para falar sobre em JavaScript é a noção de um evento. Um evento é algo que simplesmente acontece quando um usuário interage com o seu web A página, então talvez eles clique em alguma coisa, ou talvez a página é terminar de carregar, ou talvez eles mudaram o mouse sobre alguma coisa, ou que digitou alguma coisa em um campo de entrada. Todas estas coisas são eventos que estão ocorrendo em nossa página web. E tem o JavaScript capacidade para suportar algo chamado um manipulador de eventos, que é uma função de retorno de chamada que responde a um evento HTML. E o que é uma função de retorno? Bem, é geralmente apenas mais um nome para uma função anônima. É uma função que responde a um evento. E é aqui que chegamos à idéia de certas funções de ligação para um determinado atributo html. A maioria dos elementos HTML têm apoio para um atributo que nós não falamos sobre no html vídeo para algo como no clique ou em foco ou em carga, Todos estes eventos que você pode então escrever funções que lidam com esses eventos quando esses eventos ocorrer na sua página web. 

E talvez por isso o seu html é algo como isto. E eu tenho dois botões aqui, botão e um botão de dois, e aqui eu tenho atualmente nada definido, mas este é o lugar onde o atributo em clique é aparentemente parte da minha tag html. Então, aparentemente, quando eu definir o que é acontecendo dentro desse atributo, que vai haver algum JavaScript função que responde ao evento presumivelmente de clicar em botão de um ou dois botões. 

O que é legal sobre isso é que nós pode escrever um manipulador de eventos genérico. E este evento vai Handler criar um objeto de evento. E o objeto de evento vai nos dizer qual dos dois botões foi clicado. Agora, como é que isso funciona? Bem, pode ser algo como isto. Então, vamos primeiro definir nossos botões para ter uma resposta de chamada de retorno para o função que será chamada quando o botão é clicado, vamos chamá evento nome de alerta. E observe em ambos os casos estamos passando neste parâmetro evento. Então, nós chamamos essa função ou quando esta função é acionado pelo evento acontecendo, que vai criar este objeto de evento e passá-lo como um parâmetro para alertar nome. E que é objeto de evento vai conter informações sobre qual botão foi clicado. E como ele faz isso? Bem, pode ser algo como isto. Então, agora na minha separado Arquivo JavaScript, eu poderia tem que encontrar este função nome de alerta, que novamente aceita que parâmetro de evento. E, em seguida, aqui é onde eu estou detectando qual botão foi acionado, var gatilho é igual a evento dot elemento de origem. Qual foi a fonte que criou este objeto de evento que foi transmitido? Foi um botão ou era botão dois? 

E então aqui tudo que eu estou fazendo é imprimir trigger.innerhtml. Bem, neste caso, no presente contexto, trigger.innerhtml é apenas o que está escrito no botão. Isso só acontece se nós saltamos voltar para uma segunda, que seria ser o que há entre essas tags de botão. Será botão ou um botão de dois. E vamos dar uma olhada como isso seria manipulador de eventos olhar se tivéssemos-lo funcionando na prática. 

Então, primeiro de tudo, você tem abriram events.js, que é o arquivo JavaScript onde Tenho definido esta função. E como você pode ver, é muito bonito exatamente o que que acabamos de ver no slide um segundo atrás. E eu vou passar para o home page que estamos usando. E eu tenho aqui botão um e dois botões. E eu vou clique no botão um. Você clicou em um botão, se você pode ver aqui no alerta. ESTÁ BEM. Clique no botão dois, você clicado em um botão dois. 

Assim, ambos os botões têm a mesmo chamada de função, certo? Ambos eram nome de alerta evento, mas este objeto de evento que é criada quando clicamos ela nos diz qual botão foi clicado. Nós não temos que escrever dois separados funções ou lidar com ter para passar qualquer informação adicional. Estamos apenas contando com o que vai JavaScript fazer por nós, que é o de criar esse tipo de evento objeto em nosso nome. Há muito mais do que a JavaScript o que nós cobrimos neste vídeo, mas tendo estes fundamental deve chegar um longo maneiras de tudo o que você vai aprender precisa saber sobre este linguagem interessante. Eu sou Doug Lloyd. Este é CS50.