Desenvolvimento web full stack para iniciantes — parte 3: Javascript e API's | Chris Dixon | Skillshare
Pesquisar

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Desenvolvimento web full stack para iniciantes — parte 3: Javascript e API's

teacher avatar Chris Dixon, Web Developer & Online Teacher

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Nossas boas-vindas ao curso!

      2:28

    • 2.

      Faça o download dos arquivos iniciais

      1:24

    • 3.

      Variáveis, strings e números

      9:32

    • 4.

      Aritmética do Javascript e operadores

      7:52

    • 5.

      Comandos alert, prompt e confirm

      9:28

    • 6.

      Condicionais if/else e comparação

      8:48

    • 7.

      Condicionais aninhadas if e else

      3:44

    • 8.

      Else if e operadores lógicos

      5:06

    • 9.

      O operador ternário

      5:09

    • 10.

      A condicional switch

      5:27

    • 11.

      Hora da prática: o jogo o caçador de dragão

      10:59

    • 12.

      Manipulação do DOM

      16:11

    • 13.

      Adicionando e removendo elementos com Javascript

      11:19

    • 14.

      Hora da prática: adicionando elementos com Javascript

      1:03

    • 15.

      Funções do Javascript

      4:44

    • 16.

      Argumentos da função

      4:46

    • 17.

      Scope e hoisting

      10:23

    • 18.

      Arrow functions

      3:37

    • 19.

      Eventos no Javascript

      10:09

    • 20.

      O objeto do evento

      4:28

    • 21.

      Javascript externo

      2:45

    • 22.

      Hora da prática: conversor de pixel

      1:37

    • 23.

      Solução: conversor de pixel

      7:20

    • 24.

      Matrizes do Javascript

      3:35

    • 25.

      Métodos de matrizes

      7:30

    • 26.

      Percorrendo matrizes: forEach

      7:04

    • 27.

      Percorrendo matrizes: map

      3:31

    • 28.

      Hora da prática: matrizes

      1:36

    • 29.

      Solução: matrizes

      3:23

    • 30.

      Loop “for”

      10:23

    • 31.

      Loop “while”

      4:13

    • 32.

      Objetos

      8:23

    • 33.

      Percorrendo objetos

      4:35

    • 34.

      Função construtora de objetos

      9:18

    • 35.

      Const e let

      11:13

    • 36.

      Gerando uma forma aleatória

      4:27

    • 37.

      Repetição com o setInterval

      4:36

    • 38.

      Modelos literais

      8:31

    • 39.

      Comparando objetos e pontuando

      9:24

    • 40.

      Introdução às expressões regulares

      9:53

    • 41.

      RegEx para encontrar e substituir projeto

      9:25

    • 42.

      HTTP, solicitação e resposta

      9:32

    • 43.

      O que é uma API?

      7:43

    • 44.

      Buscando dados e strings de consulta

      9:59

    • 45.

      Código Async e promessas

      8:33

    • 46.

      Map através de resultados

      12:04

    • 47.

      Criando nossa consulta de pesquisa

      6:37

    • 48.

      Melhorando nossa pesquisa

      4:49

    • 49.

      Pré-visualização de áudio, captura e bubbling

      8:38

    • 50.

      Obrigado

      1:13

    • 51.

      Siga-me no Skillshare!

      0:23

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

3.129

Estudantes

31

Projetos

Sobre este curso

Boas-vindas ao desenvolvimento de web de track para iniciantes!

Este curso foi destinado a ensinar os iniciantes que vão de conhecimento para criar sites e aplicativos de pilha completa!

Este de três a mais de um curso, ensinando tudo sobre Javascript, API e de dados de dados.

Começamos com o Javascript: conceitos básicos e fluxo de controle onde você aprender.

  • Variáveis, string e números
  • Arithmetic e operadores
  • Alert, prompt e confirmação
  • se os outros diretores e operadores de comparação
  • Nesting e operadores lógicos
  • Operador de o Ternaty
  • Projeto de de rodagem de dragas

Em seguida: a manipulação de DOM

  • Manipulação de DOM
  • Como adicionar e remover elementos usando o JavAScript
  • Funções e argumentos
  • Esboço e de de a o levantamento
  • Funções de seta
  • Eventos
  • O projeto de converter em o projeto de to

Depois aprender sobre o Javap, Loops: Array, Arrays e objetos:

Você aprenderá sobre:

  • Arrays e métodos de array
  • para cada
  • Mapa
  • Para loop
  • Quando loop
  • Objetos e loops por objetos
  • Função de construtores de objetos

Em que abordamos o Javascript: jogo de marcher de formas e o RegEx, que vai abordar:

  • HTTP, pedido e resposta
  • APS
  • Como de dados e cadeias de consultas
  • Asino e promessas
  • Criando pesquisas e consultas de de searech
  • Captura de eventos e bubbling
  • Aplicativo de sino

Esta terceira parte do curso aborda todos os fundamentos de JavAScript que você precisa para a criação de sites de pilha completa.

de a que você se divertir com este curso e conferir o resto das partes quando se ficam disponíveis!

Conheça seu professor

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... Visualizar o perfil completo

Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Nossas boas-vindas ao curso!: Bem-vindo ao desenvolvimento web de pilha completa para iniciantes. Este curso é projetado para levá-lo de um iniciante a um desenvolvedor web, capaz de não apenas construir interfaces de usuário front-end de um site, mas também projetar e construir o back-end para interagir com ele também. Então, quem sou eu? Meu nome é Chris e serei seu instrutor para este curso. Eu sou um desenvolvedor web e também o produtor de muitos tutoriais ensinando milhares de alunos as habilidades que eles precisam para construir sites e aplicativos. Este curso é a terceira parte da série completa, onde continuaremos a construir sobre tudo desde as duas primeiras partes deste curso. Este curso é tudo sobre JavaScript, APIs e trabalho com fontes de dados externas. Começamos analisando os conceitos básicos de JavaScript e controle de fluxo. Isso lhe dará uma introdução ao básico da linguagem de programação JavaScript, incluindo arredondar as coisas com um projeto Dragon Slayer. Em seguida, continuamos nossa jornada JavaScript olhando para a manipulação DOM, funções e eventos e, em seguida, terminando a seção com outro mini projeto para lhe dar um pouco mais de prática. Em seguida, passamos para loops, matrizes, objetos e expressões regulares. Não se preocupe se você não tem certeza do que tudo isso significa ainda. Vamos cobrir tudo o que você precisa saber e, em seguida, construir um divertido jogo de correspondência de forma. Veja como tudo se encaixa. Terminamos este curso construindo um aplicativo de busca de música. Este é o lugar onde as coisas realmente começaram a ficar interessantes à medida que cobrimos APIs e buscar dados de fontes externas. Aqui se conectará à biblioteca do iTunes. Buscamos alguns dados que podemos ir em frente e usar em nossos projetos. Nós também olhamos para alguns recursos JavaScript de próxima geração do ES6 e além. Tudo enquanto explica as coisas de uma maneira direta e simples de entender, que até mesmo os iniciantes entenderão. Junto com o reforço das coisas com alguns projetos divertidos e desafiadores ao longo do caminho. Espero que todos estejam animados para aprender sobre JavaScript e APIs na terceira parte deste curso. 2. Faça o download dos arquivos iniciais: Bem-vindos de volta, rapazes. Então, como você já sabe, esta é a terceira parte da série. Não é essencial que as duas primeiras partes sejam concluídas antes de continuar com este curso, você pode apenas ampliar diretamente se você quiser apenas aprender sobre JavaScript e APIs. No entanto, se você não tiver completado as primeiras seções, algo que você precisará para progredir com este curso são os arquivos iniciais para o aplicativo de busca de música. Se você ir para a classe e clicar em seu projeto está aqui. Mais tarde no curso, quando começamos a trabalhar com APIs, terá a música finder.zip, HTML e CSS, ou ditado a partir das seções anteriores do curso. Se você ainda não os completou, basta baixar esses dados HTML e CSS. Então você pode continuar com essa causa como normal. Mas se você pegar qualquer parte anterior ou não, você também precisará dos arquivos iniciantes JavaScript. Estes incluirão todos os HTML e CSS para nos ajudar a aprender JavaScript. Isso vamos dizer foi criar as estruturas de esqueleto JavaScript ou cada lição individual. Assim, podemos mergulhar direto para aprender em nossos JavaScripts. Então vá em frente e baixe os arquivos que você precisa. Então vamos passar a aprender tudo sobre JavaScripts. 3. Variáveis, strings e números: Vamos começar esta seção olhando para algumas das coisas mais comumente usadas e também algumas das coisas mais simples que o JavaScript tem para oferecer. O primeiro conceito é chamado de tipos de dados. Os tipos de dados são bastante simples. Como parece, é um tipo de dados que estamos usando. Para começar, abri os arquivos iniciais do JavaScript no número 1, que são variáveis, strings e números. Em seguida, abra a página de índice, tanto em um editor de texto quanto dentro do navegador. Neste vídeo, vamos olhar para dois desses tipos de dados, e estes são strings e números. Uma string é apenas um texto, como um nome, e o número é, como você já adivinhou, um número que é positivo ou negativo, como a idade de um usuário. Além disso, precisamos de uma maneira de armazenar esses valores também. É aqui que as variáveis entram. Vamos passar para o Chrome e abrir o console, clique com o botão direito do mouse e, em seguida, inspecionar. Então, se formos para esta guia console, que é apenas aqui, este é um console onde podemos executar algum JavaScript. Como sempre, se você estiver usando um navegador diferente, todos os principais navegadores têm uma ferramenta de console. Normalmente, você pode encontrar esse console no menu, muitas vezes sob as ferramentas do desenvolvedor. Nós já vimos a guia Elementos e também demos uma breve olhada na guia Rede também. Desta vez, vamos usar este console. Para começar, criamos uma variável usando a palavra-chave var. Vamos rolar para que possamos ver isso um pouco melhor. Digite a palavra-chave var. Uma variável é simplesmente um lugar para armazenar nossos dados, como uma string ou um número. Em seguida, damos a esta variável um nome. Se quiséssemos armazenar o nome de um usuário, poderíamos simplesmente armazenar o nome assim. Então var nome é igual a “Chris”. Este símbolo de igual atribui esse valor a este nome de variável de Chris. Então terminaremos com um ponto-e-vírgula. Strings precisa ser cercado entre aspas. Isso pode ser tanto aspas simples, que é exatamente assim, ou aspas duplas como usamos aqui e clique em “Enter”. Para chamar isso no console basta digitar o nome da nossa variável. Então, se escrevermos o nome, então retornamos o valor de Chris. Vemos algumas flechas no lado esquerdo. A seta para os direitos são as entradas, que você coloca. Então nós adicionamos o nome de Chris e, em seguida, voltar para nós temos o valor de Chris. Se quisermos alterar o valor desta variável, podemos fazer o que é chamado de reatribuições, vamos chamá-lo de um nome de variável. Assim como este sem a palavra-chave var e configurá-lo para um novo valor com igual símbolo. Podemos adicionar um novo nome, como Chris Dixon, e depois um ponto-e-vírgula no final e apertar “Enter”. Agora podemos voltar para o valor de Chris Dixon. Mais uma vez, se você apenas chamar o nome, aperte “Enter”, vamos ter é finalmente retornado mais uma vez. Podemos criar tantas variáveis quanto precisarmos, como nossa idade também. Novamente, usando a palavra-chave var, definimos o nome da idade e definimos isso para um valor de 34. Ao trabalhar com números, não cercamos o valor entre aspas como fizemos com a string. Basta digitar o número assim e clicar em “Enter”. Se chamarmos a nossa variável de idade, digitando em idade, então obtemos o valor de 34. Às vezes você vê indefinido também, assim como vimos aqui, como quando definimos uma variável. Isso é só porque nada é devolvido. Neste caso, estamos simplesmente definindo ou atribuindo essa variável. Teremos nosso nome e variável de idade declarados. Mas como podemos usar isso agora? Bem, poderíamos fazer algo como adicioná-los a uma frase. Se declararmos uma nova variável chamada unida, podemos definir isso igual a uma string. Então, “Meu nome é”, em seguida, adicione um espaço. Em seguida, podemos adicionar um símbolo de adição para adicionar. Se for até o fim disto, vou adicionar a nossa variável de nome. Então este será “meu nome é” e depois Chris. Em seguida, adicione um símbolo de adição. Para adicionar uma segunda string, podemos adicionar “e eu sou”, em seguida, um espaço e, em seguida, adicionar nossa variável idade no final. Então isto deve imprimir : “Meu nome é” Chris, “e eu tenho” 34. Juntar strings e variáveis como esta com o símbolo de adição também é chamado de concatenação ou concat para abreviar. Mas este é apenas um termo chique para juntá-los. Em seguida, clique em “Enter” e podemos digitar em juntou, que são nome da variável. Agora, há a nossa corda, que esperávamos. JavaScript também é a linguagem de script padrão para todos os principais navegadores. Então é por isso que tudo funciona bem dentro do console. Mas, de forma mais realista, queremos adicionar ao código em nosso projeto. Se voltarmos para nossos arquivos iniciais, novamente, em nosso primeiro, que é variáveis, cordas e números, podemos começar a trabalhar nisso aqui dentro. Você não precisa usar os arquivos iniciais se preferir. Mas você diria que estava digitando toda a estrutura html que precisamos cada vez. Também será útil para referência futura. JavaScript pode ser adicionado até mesmo a seção de cabeça ou corpo. Muitas vezes, é preferido adicioná-lo à parte inferior da seção do corpo pouco antes da tag de fechamento. Isso significa que você abaixo fez por último e não bloqueou o resto do html de carregar. O JavaScript é colocado dentro de tags de script. Vamos abrir a tag de script de abertura e fechamento. Então podemos ir em frente com a adição de nosso código dentro, assim como fizemos dentro do console. Assim como fizemos antes, podemos adicionar nossa variável de nome é igual a Chris. Para exibir isso no console, podemos fazer um console.log. Então, dentro do colchete, podemos adicionar o nome da nossa variável. Então salve isso, limpe o console e recarregue. Eis o nosso valor para o Chris. Podemos então reatribuir esse nome exatamente como fizemos dentro do console. Desta vez sem a variável e, em seguida, mude isso para ser o meu nome completo. Novamente, com o log do console a mesma variável de nome, recarregue, e há o nosso nome de reatribuição. Vamos fazer a próxima idade. Então, a idade var é igual a 34. Nós também podemos fazer a nossa mesma cadeia que fizemos dentro do console de juntou. Podemos definir isso igual a “Meu nome é” adicionar um espaço. Em seguida, podemos adicionar o nosso nome de variável, então este será “Meu nome é Chris”. Em seguida, a sequência de “e eu sou” espaço. Em seguida, adicione no final, a variável idade com o ponto-e-vírgula no final. Podemos console.log nossa nova cadeia de juntou. Para o console, recarregue, e agora lá vamos nós, lá está nossa string, que inclui nossas variáveis de nosso nome e idade. Nós dissemos anteriormente que podemos usar aspas duplas ou simples ao trabalhar com strings. Há um caso em que precisamos ser cuidadosos. Se mudarmos nossas aspas para ser simples, então ele é único no início e, em seguida, no final desta string, e, em seguida, também substituir esses dois aqui. Então agora todas as cadeias de caracteres são simples, salve e depois atualize. Vemos que isso ainda funciona perfeitamente. O problema surge quando queremos usar uma das mesmas citações em nosso texto. Se você escolher, “eu sou”, em vez de “eu sou”, assim, podemos ver que temos uma letra azul aqui para indicar um problema. Se salvarmos e atualizarmos, teremos um erro de sintaxe. Isso deve porque nossas citações não estão mais em pares e as coisas estão um pouco confusas. Consertar isso é bem direto. Tudo o que precisamos fazer é cercar a seção no tipo oposto de aspas. Então, aqui, em vez de ter as aspas simples livres, vamos mudar estas em torno das que sejam duplas. Simplesmente assim. Poderíamos até mudar essa seção aqui, ou podemos mudar todas essas únicas para duplas, exceto aquela que queremos aqui. De qualquer forma, vai funcionar bem. Salve e recarregue. Agora nosso trabalho de cordas está perfeitamente bem com o apóstrofo aqui. Então, isso é apenas algo para estar ciente ao usar cotações. Agora vamos passar para o próximo vídeo onde vamos dar uma olhada na aritmética JavaScript e operadores. 4. Aritmética do Javascript e operadores: No último vídeo, fomos introduzidos números em JavaScript por loja em nossa idade em uma variável. Há muito mais que podemos fazer com esses números. Vamos para o console e ver isso em ação. Se clicarmos neste símbolo aqui e limpar o console, agora podemos começar a dar uma olhada em números e aritmética. Vamos começar com alguma aritmética básica, como subtração, multiplicação, adição e divisão. Então, aqui dentro, podemos simplesmente dizer 10, tirar cinco, e depois retornado, obtemos o valor de cinco. Podemos ir em frente e fazer 34. Uma multiplicação é o símbolo de início. Primeiro de tudo, multiplique por 7, e isso é um valor de 238. Adição é o símbolo de adição que você já viu antes. Então 12 adicionar 6 é 18. Se queremos dividir em JavaScript, é a barra. Três divididos por três nos dá um valor de um. Vamos tentar outro. 12 dividido por 4, que é 3. Nós também temos módulo, que é um símbolo percentual. Vamos fazer 12 por cento e depois três. Módulo é o restante que é sobra após a divisão. Três entra em 12 igualmente. Não sobrou nada. O mesmo se fizermos 12 e depois quatro. Quatro entra em 12, 3 vezes sem nada sobrando. O valor é 0. No entanto, se mudarmos para ser 13, e depois livre, livre arbítrio vai para 13, 4 vezes fazendo 12. Com uma sobra. É por isso que temos o valor de um só aqui. Todas essas adições, subtrações, multiplicações, divisões, e também módulo, um papel, o que chamamos de operadores aritméticos. Os operadores AMA dois em JavaScript. Vamos cobrir estes dois enquanto passarmos por este curso. Esses operadores também podem ser usados para valores armazenados em variáveis também. Vamos passar para o nosso arquivo inicial no número dois, que é aritmética e operadores. Vamos fechar isto. Abra nossa segunda página de índice, e também abra isso no navegador. Eu só vou copiar o caminho daqui e depois colar isso no navegador. Primeiro vamos olhar para alguns operadores aritméticos dentro do nosso editor de código. Então só aqui você pode ver todos os operadores que terão dentro de um comentário. Vamos atribuir 0s isso a partir de variáveis. Variável, então digamos que deixou a escola aos 16 anos. Então poderíamos dizer a nossa idade. Minha idade é 34. Então podemos fazer alguns cálculos para descobrir quantos anos desde que deixamos a escola. Vamos criar uma nova variável chamada anos desde a escola. Então podemos definir isso para a nossa idade. Minha idade é 34. Tirar o número de anos desde que saímos da escola, que é armazenado dentro desta variável. Isso se traduzirá para 34, takeaway 16. Vamos verificar isto com um registo da consola. Assim como fizemos antes para um console.log e , em seguida, podemos passar em nossa variável de anos desde a escola. Agora, o console deve fazer essas fotos de cálculo. Então, atualize. Temos um erro de ortografia. Então console.log atualizar. Então é o número 18. Outra coisa que pode enganar as pessoas é o que é chamado de precedência do operador. Este é apenas um nome chique para a ordem em que as coisas acontecem. Se criarmos uma variável que armazena o valor de números livres, assim como este. Vamos rolar para baixo, vamos adicionar um comentário. Então, ordem de operação. Vamos desenhar um número como 10 mais 10 multiplicado por 2. Em seguida, é para um segundo log de console. Podemos registrar para o console o valor do número. Guarde isso, recarregue e terá o valor de 30. Se voltarmos e olharmos para o nosso número, podemos esperar que o cálculo seja executado da esquerda para a direita. Dez mais 10 é 20 multiplicado por dois é 40. Na verdade, o que acontece é que uma multiplicação acontece primeiro. Dez multiplicado por 2 é 20, e então o 10 é adicionado em, dando-nos um valor de 30. Este é o valor que você vê no console apenas aqui. Isso ocorre porque a multiplicação e também a divisão têm uma precedência maior do que a subtração ou adição. Se quiséssemos mudanças. Então o 10 mais 10 acontece primeiro. Podemos embrulhar estes dentro de colchetes, também chamados de parênteses. Assim como este. Estes colchetes, irá certificar-se de que este cálculo é realizado primeiro. Este será 20 multiplicado por dois dado um valor de 40. Vamos verificar isso em um console atualizando. Há um valor de 40. Vale a pena notar também, que se todos os operadores tiverem precedência igual, então o cálculo é realizado da esquerda para a direita. Este será o caso se todos os operadores foram adição ou subtração. Dissemos anteriormente essas adições, multiplicações e assim por diante. Quem ligou para as operadoras? Há também mais dois operadores disponíveis ferramentas chamadas incremento e decremento. Vamos dar uma chance a isso. Se agora os salários comuns consola log com as duas barras para a frente. Também este aqui. Para nos dar um console claro. Abaixo disso, queremos criar uma nova seção, e isso é para incremento e decremento. Sabemos agora que é número de variável é um valor de 40. Se quisermos ir em frente e adicionar número mais, mais, assim, isso aumentaria o valor em um a cada vez. Se salvarmos isso e passar para o console com um registro do console do número. Isso agora deve incrementar o valor de 40 para ser 41. Se formos em frente e incrementar isso de novo, temos o número mais, mais. Isto deve agora dar-nos um valor de 42. Isso é algo que veremos com bastante frequência em JavaScript, particularmente ao usar loops. Vamos agora dar uma olhada em decrementos, que, como você deve ter adivinhado, reduzirão o valor em um cada vez. Eu vou fazer isso com os símbolos negativos, apenas assim e recarregar. Agora nosso valor inicial de 40 agora é reduzido para 39.Isso é uma coisa comum a fazer para aumentar em um lugar chamado, por exemplo, ou aumentar o número de itens no carrinho de compras. Isso é algo realmente útil para saber ao usar JavaScript. 5. Comandos alert, prompt e confirm: Já analisamos o uso do log do console nesta seção. Isso é útil para imprimir coisas e depurar. Durante o desenvolvimento, Ele não se destina como uma forma de se comunicar com os usos de nossos sites ou aplicativos. No entanto, existem algumas maneiras, múltiplas, mais precisas, alguns métodos que podemos usar para nos comunicar com o usuário. O primeiro deles é um alerta. Um alerta é usado para exibir uma caixa de alerta para o usuário. Alertas são como uma caixa pop-up com algumas informações e um botão ok para clicar para fechar este pop-up. No seu mais básico, podemos simplesmente enviar algo para o usuário. Vamos passar para os nossos scripts dentro do nosso arquivo inicial. Vamos ao número três, alertas, avisos e confirme. Agora abra isso e, em seguida, vá para copiar o caminho e, em seguida, colar está dentro do navegador ou você pode simplesmente clicar duas vezes no arquivo de índice dentro da pasta. Abaixo da camada comum de alerta, que vai emitir um pop-up de alerta e, em seguida, dentro daqui podemos fazer o que quisermos, como um cálculo. Dez módulo e, em seguida, três dá um salvar e abrir esta página de índice no navegador. Refresh. E há a nossa caixa de alerta na tela com o valor de um. Podemos usar isso para adicionar algum imposto também em vez de um cálculo. Lembre-se que as cadeias de texto têm as aspas. Então vamos dizer olá, refrescar. Como nosso texto apenas aqui, este alerta pode até conter variáveis também, como nosso exemplo de nome de antes. Tínhamos uma variável de nome igual a Chris. Poderíamos ir em frente e adicionar isto ao fim da nossa cadeia. Olá mais o nome da nossa variável. Guarde isso e lá vamos dizer olá Chris, dentro do alerta. Se formos em frente e adicionarmos ainda mais texto ao nosso alerta, vamos adicionar mais texto logo após isto. Digamos que faça login para continuar, salve isso e recarregue. Por padrão. Tudo isso fica em uma única linha. Podemos quebrar isso em uma nova linha usando uma barra invertida e depois um N. Dentro de nossa corda aqui, vamos adicionar a barra invertida e o N. Esta barra invertida seguida por um N, pode parecer um pouco incomum, mas vamos cobrir o que é isso e também alguns semelhantes mais tarde quando olhamos para expressões regulares. Por agora vamos dar que salvar, recarregar e agora é uma quebra de linha logo após este N. O próximo que eu quero mostrar é rápido. Isso aparecerá na solicitação do usuário para alguma entrada. Vamos continuar, comentar esses dois com barras para a frente e depois ir para a seção do baile. Vamos começar com um simples prompts que é o nome de prompts e, em seguida, os colchetes logo depois. Aqui dentro podemos adicionar uma string de texto então olá, qual é o seu nome? Com um ponto de interrogação, página de índice e é assim que um prompt aparece por padrão. Recebemos um texto, o que fizemos aqui e, em seguida, temos uma seção de entrada onde o usuário pode digitar algumas informações. Isso pode até ser cancelado ou clique em ok. Se introduzirmos o nosso nome como Chris aqui dentro, e depois pressionarmos “ok”, nada parece acontecer. Isso ocorre porque precisamos de uma maneira de armazenar a entrada do usuário. Já sabemos que podemos fazer isso usando uma variável. Vamos definir este prompts como igual a uma variável. Digamos que var name é igual a prompts e, em seguida, para ver isso em ação, podemos fazer um log de console e, em seguida, registrar o valor do nosso nome apenas para recapitular, estamos pedindo ao usuário para inserir seu nome, irá instalar todas essas entradas dentro de uma variável chamada nome e, em seguida, exibindo isso dentro do console. Vamos guardar isso e tentar isto. Diga Chris, ok, clique com o botão direito e inspecione. Abra o console e aí está o nosso valor para Chris. Vamos tentar mais uma. Basta digitar qualquer coisa dentro aqui e há o valor armazenado dentro desta variável de nome. Este prompt se retorna o valor inserido pelo usuário, como acabamos de ver ou podemos selecionar console. Nós clicamos no botão console aqui, em seguida, obter o valor de null retornado. Muitas vezes você vai se deparar com nulo e indefinido. Ambos geralmente significam que algo está faltando. Tanto nulo como indefinido também consideraram tipos de dados, assim como número e string que você já viu. Vamos ao editor de texto e criar um alerta. Vamos dar as boas-vindas ao novo usuário com o espaço de boas-vindas têxtil como nosso nome de variável e, em seguida, adicionar uma string no final com um ponto de exclamação. Se salvarmos isso, recarregar, podemos adicionar nosso nome, clicar em “Ok” e lá está nossa cadeia de texto de boas-vindas, Chris, com a exclamação no final. Se recarregarmos o navegador e, em vez disso, clicar em “Cancelar”, teremos a palavra welcome null. Nulo refere-se a uma referência de objeto em branco. Pode não fazer muito sentido no momento porque ainda não olhamos para quais objetos são. Mas geralmente significa que algo está faltando. Basicamente, o prompt retorna mesmo nada. Todo o valor que é digitado, indefinido é um pouco mais genérico. Um exemplo de indefinido é quando uma variável está vazia. Se formos em frente e criar uma nova variável, digamos novo nome e, em seguida, não definimos um valor para isso. Se alertarmos o valor do novo nome e, em seguida, salvar isso, atualizar, diz os nossos alertas iniciais, vamos cancelar lista e, em seguida, obter o nosso segundo alerta que diz é indefinido e este é o valor da nossa variável indefinida aqui. Em seguida, queremos dar uma olhada em alguns bastante semelhante ao prompt. Vamos comentar essas três linhas aqui. Se estiver usando o comando do Visual Studio Code e barra direta comentará todas as linhas juntas. Agora vamos descer para confirmar. Logo abaixo, podemos dar uma olhada em como uma confirmação é usada. Assim como os dois primeiros, digitamos o nome e, em seguida, os colchetes logo depois. Vamos começar adicionando uma string de texto. Você deve ter mais de 16 entrar, digamos, por favor confirme e, em seguida, obviamente navegador fechá-lo de antes, recarregar. Esse é o texto que vemos aqui. Também temos um botão de cancelamento e um botão de “ok”. Vamos clicar no cancelamento e também ok. Nada parece acontecer quando clicamos nesses botões. Uma vez que confirme não tem campo de entrada, ele retornará true. Se o usuário clicar em OK, tudo cai é que o botão Cancelar está selecionado. Podemos ver isso novamente definindo isso para uma variável. Digamos que a idade var é igual a confirmar. Em seguida, um registro de console, que passa em nossa variável de idade. Então, veja isto. Abra o cancelamento Clique no console. Vamos recarregar. Se clicarmos em ok, vamos obter o valor de true, em seguida, se clicarmos em cancelar, obtemos o valor de false. Este valor verdadeiro ou falso é também outro tipo de datas JavaScript importante que é chamado booleano. Booleano para simplesmente um valor verdadeiro ou falso. Uma vez que obtemos esses valores verdadeiros ou falsos, precisamos de uma maneira de fazer algo com eles. Por exemplo, se os usuários com mais de 16 anos, podemos deixá-los visualizar a página ou se o usuário estiver conectado, podemos deixá-los ver a seção admin para ajudar a decidir o que fazer nesses casos, temos declarações condicionais, e Isto é o que vamos começar a olhar a seguir. 6. Condicionais if/else e comparação: No último vídeo, mencionamos valores booleanos que são verdadeiros ou falsos. Também precisamos de uma maneira de realmente executar uma ação baseada em se um valor é verdadeiro ou falso. Para fazer isso, temos declarações condicionais. Por exemplo, se a vida de um jogador for igual ou inferior a zero, o jogador perderá pontos de vida. Se um jogador coletar 100 moedas, então podemos adicionar uma vida extra. Ou se a hora atual for a manhã, podemos adicionar uma mensagem de boa manhã. Se fosse de tarde, poderíamos mudar a mensagem para “Boa tarde”. Basicamente, essas declarações condicionais nos permitem decidir o que queremos que nosso código faça em diferentes circunstâncias. Um tipo comum de instrução condicional é If else. Vamos começar com a seção If. Isso basicamente diz que se algo é verdadeiro, então execute este código. Quero começar um arquivo. Vamos abrir o número 4, que é se mais e comparação. Então eu vou abrir isso dentro do navegador. Em seguida, até a nossa seção de script, podemos começar a criar uma instrução if. Nós adicionamos a palavra-chave If seguido pelos colchetes ou parênteses. Em seguida, adicionamos um conjunto de chaves, onde podemos adicionar nosso código que queremos executar. Digamos que queremos adicionar um alerta para a nossa mensagem. Precisamos adicionar uma condição em que alguém esteja alerta para correr. Dentro desses colchetes aqui nós adicionamos nossa condição. Dizemos que se 10 é maior que 5, então execute este alerta. Vamos adicionar alguns textos dizendo que 10 é maior do que 5. Se isso for verdade, esse alerta será executado. Se isto não fosse verdade , não conseguiríamos nada a acontecer. Guarde isso, recarregue e aí está o nosso alerta dizendo que 10 é maior que 5. Este símbolo maior que é um operador de comparação. Há muito mais que podemos usar, como o símbolo menor. Agora 10 não é inferior a 5, então isso será falso. Ou seja, se formos para o navegador e atualizar, a declaração agora é falsa, então não veremos o alerta. Isso ocorre porque, como mencionamos antes, o código só será executado se a condição for verdadeira. Nós também podemos combinar estes maiores que e menos que símbolos com o operador igual também. Por exemplo, se mudarmos isso para 10. Se dissermos se 10 é maior que 10, então faça este alerta. Refresque. Não vemos o alerta porque 10 não é maior que 10. No entanto, se quisermos executar uma verificação para ver se 10 é igual ou maior que, podemos combiná-los assim. Maior ou igual a. Agora nossa condição deve ser verdadeira. Então vemos o alerta. Isso também funciona com menos do que também, como seria de esperar. Se 10 for menor ou igual a, execute o alerta. Isso pode ser confuso no início porque já usamos este símbolo igual para atribuir um valor a uma variável. Antes estávamos fazendo coisas como var x é igual a 5. Aqui estamos atribuindo o valor de 5 a este x com o símbolo igual. Em vez disso, quando comparamos, usamos o duplo igual. Podemos dizer se x é igual a 10, em seguida, alertar o valor de true. Salve isso e atualize. Claro que não temos o alerta aparecendo porque x não é igual a 10. Também podemos adicionar um ponto de exclamação para fazer o oposto. Uma exclamação e depois é igual. Se x não for igual a 10, devemos agora obter o alerta aparecendo. Vamos tentar outra coisa. Se adicionarmos um número, então já temos o valor de x igual 5. Se você adicionar uma segunda variável de y, e desta vez se definirmos o número dentro de aspas como esta, esta será agora considerada uma string porque está dentro de aspas. Podemos verificar isso se fizermos um log de console para cada variável. Vamos fazer um registro do console logo abaixo. Podemos dizer tipo de e, em seguida, x. guarde isso. Se abrirmos o console, devemos agora ver que tipo de dados está contido dentro de x. vemos o x é um número que esperaríamos porque declaramos que apenas aqui. No entanto, se formos em frente e mudarmos isso para ser y, atualize. Agora vemos o tipo de dados é string porque isso é adicionado dentro das aspas. Com esse conhecimento, vamos ver como isso afeta nossa comparação. Vamos em frente e comparar o valor de y, que é uma string para 5. Eu vou salvar. Esta é uma string e este é o número. Em teoria, eles não deveriam funcionar. Refresque. Ainda vemos o pop-up. Isso está avaliando como true, mesmo que esteja comparando um número a uma string. Isso ocorre porque o double equals só irá verificar o valor em vez do tipo de dados se queremos que esta comparação seja ainda mais rigorosa e também verificar se o valor, bem como o tipo de data é igual. Podemos ir em frente e mudar isso para ser triplo igual. Guarde isso, recarregue. Agora não vemos o pop-up porque o tipo de dados não é igual. Vamos tentar isso com x e x é um número. Estamos comparando se x é igual a 5, tanto em valor como também tipo de dados. É claro, deve ser verdade. Vemos o pop-up ou verdadeiro. Isso funciona porque x é igual tipo e valor para 5. No entanto, também podemos adicionar um ponto de exclamação e os dois iguais, e isso fará exatamente o oposto. Isso só executará o alerta se x não for igual a e valor igual a 5. Se salvarmos e recarregarmos, não veremos mais o alerta. É assim que podemos usar operadores de comparação, e eles são realmente úteis quando combinados com instruções if. Como acabamos de ver, é se declaração será executado se algum código é verdadeiro. Mas e se quisermos uma alternativa para executar se algum código não for verdadeiro? Para isso, precisamos adicionar uma segunda condição chamada else. Vamos excluir esse exemplo de antes e criar uma nova variável chamada hungry, e inicialmente definir isso como verdadeiro. Então podemos dizer se está com fome, então dentro das citações podemos alertar, “pegue um pouco de comida!”. Simplesmente assim. Se nós apenas adicionar o nome da variável como este, isso irá verificar se a variável é verdadeira. Então, se for, ele executará algum código. Vamos salvar, refrescar, e lá está o nosso texto de obter alguma comida. No entanto, se quiséssemos uma alternativa, também podemos acrescentar mais. O segundo bloco de código executará um alerta se a condição for falsa. Desta vez, digamos, talvez mais tarde. Se mudarmos fome para ser falso, esta afirmação é agora falsa. Portanto, esse código não será executado. Mas, em vez disso, a instrução else será executada alertando, talvez mais tarde. Vamos tentar isso em um navegador. Refresque. Há o nosso texto de “talvez mais tarde”. Vamos tentar isso mais uma vez, alterando isso de volta para verdadeiro. Agora vamos pegar alguma comida. Estas declarações se else realmente são uma parte fundamental do JavaScript e também programação em geral. Se você ainda está um pouco inseguro, eu recomendo voltar por este vídeo para entender melhor como eles funcionam. Embora você terá muito mais prática para esta seção. Em seguida, vamos levar as coisas ainda mais longe, aninhando essas declarações juntas. 7. Condicionais aninhadas if e else: Vamos para os nossos arquivos iniciais e para a nossa seção de instruções condicionais de aninhamento. Aqui em nosso último exemplo foi um simples “se” para verificar se a condição é verdadeira. Então, verificamos se a variável de “fome” foi definida como true. Se fosse, alertámos o texto em “Obter alguma comida”. Caso contrário, receberemos o texto de “Talvez mais tarde”. Às vezes, podemos querer verificar se mais de uma condição é verdadeira antes de executar nosso código. Para isso, podemos aninhar nossas declarações if-else. Para ver isso em ação, vou adicionar uma segunda variável. Então vamos adicionar uma segunda variável de “desejo”, e eu quero definir isso como “Pizza”. Então, dentro desta primeira seção “se”, eu vou aninhar em um segundo “se” declarações. Vamos dar algum espaço para deixar isso mais claro, então vamos dizer se “desejo” é igual a “Pizza”, então podemos adicionar nosso bloco de código para dizer alerta, “Dê-me pizza”, e também podemos remover esse alerta daqui também. Então primeiro verificamos se a condição é verdadeira, verificando se a pessoa está com fome. Se for verdade, ele também fará uma segunda verificação para ver se o desejo é igual a pizza, e então ele vai dizer “Dê-me pizza”. Senão, vamos receber o texto de “Talvez mais tarde”. Vamos salvar isso e abrir isso no navegador e atualizar e há um texto de “Me dê pizza”. Mas e se a primeira condição fosse verdadeira, se faminto, mas você não está desejando pizza? Então vamos mudar essa variável para outra coisa, como, “Chinês”. Salve isso e atualize. Então não vemos nenhum alerta. Isso ocorre porque, embora a fome seja definida como verdadeira, desejo não é mais definido para “pizza”. Portanto, esse alerta não será executado. Para este caso, também podemos fornecer uma instrução “else”, que também é aninhada dentro daqui. Então “else”, e então dentro deste bloco, podemos colocar um alerta com o texto de “Vamos pegar alguma comida”. Lembre-se, se você quiser adicionar um apóstrofo em como este, esta citação simples é a mesma que os dois outers, então precisamos mudar isso para ser aspas duplas para que isso funcione. Guarde isso, e então se formos para o navegador e depois recarregarmos, recebemos o texto de, “Vamos pegar comida”. Isso ocorre porque essa declaração “if” é originalmente verdadeira, portanto, ela passará para a segunda aqui. Não estamos desejando pizza, então não recebemos esse alerta aqui. Qualquer excesso de valor fará com que a instrução “else” seja executada e, em seguida, imprima o texto de, “Vamos pegar um pouco de comida”, e como esperado, se mudarmos “fome” para ser falso, esta declaração “if” não será executada em tudo. Em vez disso, a instrução “else” será executada e teremos um texto de “Talvez mais tarde”. Então é assim que podemos aninhar as declarações “if-else” dentro dos outros. Podemos ir ainda mais longe e aninhar dentro dessa declaração “if”, mas geralmente não queremos ir muito fundo porque isso torna nosso código mais complexo e ilegível, e muitas vezes há soluções mais elegantes para isso. É assim que podemos aninhar nossas declarações condicionais, e a seguir vamos dar uma olhada no else-if. 8. Else if e operadores lógicos: Aprendemos que, se as declarações verificarem se uma condição é verdadeira, então, senão, capta todos os casos. Há um primeiro caso que podemos usar chamado else if. Usamos else se para verificar uma nova condição, se a primeira condição é falsa. Podemos usá-lo assim. Então, dentro do nosso aninhado se outra declaração, eu vou adicionar uma declaração else if. Então logo após esta abertura, conjunto de bases curly, vamos adicionar else if, e então abrir e fechar um novo conjunto de chaves, empurrando a última instrução else até o fim. Dentro daqui, podemos adicionar mais alguns colchetes para verificar se uma condição é verdadeira. Então, digamos se o desejo é igual ao chinês. Então, novamente, estamos verificando se a variável é igual a fome. Então vamos definir isso como verdade. Se for, então se move para este bloco aninhado aqui. Então, primeiro de tudo, ele verifica se o desejo é igual a pizza, então ele vai executar este alerta aqui. Se não, a segunda condição de else if, será então executado, e desta vez podemos fazer um alerta. Digamos que desta vez me dê comida chinesa, assim. Se pizza ou chinês não é o valor do desejo, esta outra declaração será executada no final, dizendo, “vamos comer um pouco.” Então guarde isso. Então agora o nosso desejo é chinês. Deveríamos agora ver o texto de me dar chinês. Vamos tentar mais algumas opções. Se mudarmos isso para pizza, teremos pizza, e se mudarmos isso para algo diferente, digamos frango, refresque-se. Temos um ditado alternativo: “Vamos comer um pouco.” Também só para ficar claro, temos este outro se bloco, aninhado dentro destas declarações if. Mas funcionou perfeitamente bem se não aninhado. Antes de terminarmos este vídeo, quero mostrar alguns operadores lógicos que você achará úteis. Operadores lógicos podem parecer complexos, mas eles são simples e ou não. Então vamos comentar este exemplo e dar uma olhada nesses sinal comum todo o código de antes, deixando nas duas variáveis. Então, digamos que se estiver com fome, então e com os dois “ampersands “, o desejo é pizza. Então podemos adicionar nosso alerta antes de dizer “me dê pizza”. Então agora vamos verificar se duas afirmações são verdadeiras. Então estamos verificando se fome é verdade e também se desejo é igual a pizza. Vamos mudar isto para pizza e ver o que acontece. Refresque. Aí está o nosso alerta. Se fecharmos isto e mudarmos qualquer um destes para ser falso, não vemos o alerta aparecer. Vamos tentar o contrário. Vamos mudar isso para ser galinha. Novamente, ambas as condições precisam ser verdadeiras para que esse código seja executado. Se queremos apenas uma dessas condições para ser verdadeira, então, por exemplo, se estamos com fome ou desejo é comida, então podemos executar este código. Então, em vez de ambas as condições que precisam ser verdadeiras, podemos executar este código se apenas um avaliar os poucos. Podemos fazer isso com o operador ou, que são os dois tubos, assim. Agora só temos uma dessas condições avaliada como verdadeira, que está com fome. Então salve, atualize e agora o alerta funciona. Então, se você olhar e tudo mais, o último que eu quero mostrar é o não operador. Este é o ponto de exclamação que olhamos anteriormente. Nós olhamos para isso usando a instrução if para verificar se algo não é igual. Então vamos tirar toda essa seção, ali e aqui, mesmo com fome, então podemos adicionar um ponto de exclamação aqui dentro. Então, se não estiver com fome ou se isso significa falso, então vamos receber o alerta. Então, primeiro de tudo, vamos salvar e depois atualizar. Não vemos nada. No entanto, se alterarmos isso para ser falso e, em seguida, executar o código, agora vemos o alerta. Então isso basicamente faz o oposto, então aqui estamos dizendo se não estiver com fome, o que é falso, então execute este código dentro daqui. Então este é agora para se else e também se junto com operadores lógicos. Espero que isso faça sentido e não muito esmagador. Lembre-se, muito disso requer prática, e teremos muito mais à medida que você progride neste curso. 9. O operador ternário: Outro tipo de instrução condicional é chamado de operador ternário, então certifique-se de que você está no número sete, que é E ternary operador iniciante arquivo. Então podemos começar a trabalhar na seção de script abaixo. O operador ternário é frequentemente usado como uma alternativa mais curta para as instruções if else. É também uma declaração de uma linha, para que possa parecer um pouco mais simples. Começamos adicionando uma condição que queremos verificar, como um cálculo. Dizemos que dez é maior que cinco. A condição é seguida pelo ponto de interrogação, então declaramos o que queremos acontecer se o resultado for verdadeiro ou falso. A primeira declaração é verdadeira, separada por dois pontos, e a segunda é falsa. O que estamos dizendo aqui é que se dez é maior que cinco, o primeiro é texto impresso de verdade, o segundo é simplesmente texto impresso de falso. Se salvarmos isso e abrirmos esse arquivo no navegador, atualizamos, não vemos nada acontecer no início. Isso ocorre porque precisamos produzir a resposta, como um log de console. Antes disso, vamos adicionar um console.log e, em seguida, dentro do colchete, podemos adicionar este operador ternário completo. Agora, se salvarmos, atualizar e, em seguida, abrir o console , clique na guia console e, em seguida, temos o texto verdadeiro, porque dez é maior que cinco. Se mudarmos isso para ser dez é menor que cinco, então teremos a segunda opção de falso. Vamos tentar isso e isso cai dentro do navegador. Mais tarde, também analisaremos algumas maneiras de exibir itens em uma página da Web em vez de no console ou usando alertas. Nós também podemos parar isso resulta em uma variável também. Vamos voltar e adicionar nossa variável de fome no valor pequeno e pesquisa de verdadeiro. Eu deveria mover este log console e então nós podemos dizer, var, eu comer, então nós podemos definir isso para o nosso operador ternário. A condição que queremos verificar é se está com fome. Se esse valor for verdadeiro, onde o ponto de interrogação e, em seguida, adicione nossas duas opções. Se for verdade, vamos dizer, sim, vamos comer, separados por um cólon. Se for falso, vamos dizer ainda não, adicionar um ponto-e-vírgula no final de lá e, em seguida, podemos fazer um log de console. Em seguida, registre os resultados de devo comer. Apenas uma recapitulação, verificamos esta variável aqui, se é verdadeira ou falsa. Se for verdade, vamos imprimir no texto de Sim, vamos comer. Se isto foi definido para ser falso, vamos então obter o segundo valor de não apenas ainda. Este resultado é instalado dentro de uma variável chamada devo comer e este é um valor que será exibido dentro, dentro do console. Depois do console agora, isso é definido como verdadeiro, então nós temos, sim, vamos comer. Se isto fosse falso, ainda não. Há muito mais usos para esta ferramenta, como construir uma string de texto com resultado. Se fossemos para ir em frente e dizer variável está logado, e vamos definir isso inicialmente para ser um valor de false. Em seguida, podemos ir em frente e adicionar uma cadeia de texto de Olá com espaço e, em seguida, dentro dos colchetes podemos adicionar o nosso operador ternário. Primeiro de tudo, vamos verificar nossa condição de login, o ponto de interrogação e, em seguida, nossas duas opções. Em primeiro lugar, se isso for verdade, podemos então dizer bem-vindo de volta. Separados por dois pontos, adicionamos nossa condição falsa. Podemos dizer por favor entre em sua conta e um ponto-e-vírgula no final. Agora precisamos de uma maneira de exibir isso para o usuário para que possamos cercar toda esta seção dentro de um alerta. Em seguida, os colchetes são o início e, em seguida, fecha alerta para a direita no final com um colchetes de fechamento. Lá vamos nós. Vamos nos certificar de que temos os dois colchetes no final, um para o alerta e o segundo para esta seção registrada. Guarde isso, recarregue. Em primeiro lugar, temos o texto dizendo: “Olá, por favor, faça login na sua conta” porque não estamos conectados. No entanto, se definirmos isso para ser um valor de true, portanto, estamos logados, recarregue e receberemos a mensagem de Olá bem-vindo de volta. Este operador ternário é realmente simples de usar e também uma boa alternativa para a declaração if-else. Ele também é um pouco mais compacto em McCann adicionar tudo isso em uma linha para não só tiro em nosso código, mas também torná-lo mais legível. 10. A condicional switch: Bem-vinda de volta. Para este vídeo, vá para a seção 8 de nossos arquivos iniciais, que é para a instrução switch. Este é o tipo final de declarações condicionais que vamos cobrir. De certa forma, switch faz um trabalho semelhante às declarações IF/else, já examinamos. Mas a diferença é o que ele pode verificar contra tantas condições quanto quisermos. Em seguida, adicionamos uma instrução break para sair com o switch uma vez que uma correspondência é encontrada. Vamos dar uma chance em nossa seção de instrução switch do código inicial. Entre esses roteiros. Vamos começar de novo com a variável. Vou preparar este alimento para animais. Pode ser qualquer comida que quisermos. Vamos começar com ovos. Em seguida, criamos uma instrução switch. A sintaxe é semelhante às instruções if. Dentro dos colchetes, adicionamos a condição que queremos testar. Queremos verificar a variável alimentar. Dentro da instrução switch, podemos adicionar vários casos para verificar se eles coincidem com esta variável alimentar. Primeiro de tudo, vamos adicionar um caso. Vamos dizer pizza. Isto verifica se a pizza corresponde a esta variável. Se isso acontecer, adicionamos dois pontos e então podemos declarar na próxima linha o que queremos fazer. Vamos simplesmente fazer um console.log. Então vamos dizer que pizza é incrível. Simplesmente assim. Em seguida, podemos adicionar as palavras-chave break. Nós adicionamos break para sair com as instruções switch, se isso for uma correspondência. Se não for, então passa para o próximo caso. Vamos adicionar um novo caso aqui. Então podemos verificar uma segunda condição. Digamos ovos. Se esta for uma correspondência, então queremos fazer um console.log para exibir a mensagem de, “Os ovos são incríveis”. Então estamos na palavra-chave break novamente logo depois. Vamos adicionar mais um caso. Desta vez vamos adicionar bacon, cólon e, em seguida, um console.log. Digamos: “Bacon é incrível.” Mais uma vez, saia com as declarações. Essas são as nossas declarações de troca completamente lá. Só uma recapitulação. Estamos criando uma variável chamada ovos. Estamos, então, verificando se há correspondências dentro de um switch declarações. Se o caso da pizza é uma correspondência, então imprime o texto que nossa pizza é incrível. Se for, com, em seguida, sair com uma declaração e nós não verificar quaisquer casos extras abaixo. Se não for uma correspondência, que não é neste caso, então ele se move para baixo para ovos e, em seguida, exibe o texto de ovos são incríveis. Mas desta vez, porque é uma combinação, vamos sair da instrução switch. Portanto, ele nem vai verificar este próximo. Vamos salvar e recarregar o navegador, abrir o console, e agora vamos. Ovos é um jogo, portanto, temos o texto de ovos são impressionantes. O que faremos se nenhum desses casos for compatível? Para isso, adicionamos um padrão que atua como um fallback. Bem na parte inferior, eu vou adicionar padrão. Então, logo depois disso, podemos adicionar um console.log. Então, para o texto, digamos, “Eu amo”. Em seguida, adicione um espaço. Então podemos adicionar ao nome da nossa comida. Com um ponto-e-vírgula no final. Salve isso e recarregue o navegador. Ainda recebemos um texto de ovos são incríveis porque temos um fósforo. No entanto, se subirmos e mudarmos este alimento para ser qualquer outra coisa, como o queijo. O que não corresponde a nenhum destes três casos. Portanto, o padrão entrará em ação. Recarregar. Lá vamos nós. Temos uma mensagem de, eu amo. Em seguida, passamos a variável de comida, que é queijo. Observe que neste caso padrão deixamos de fora palavra-chave break, porque está no final da instrução switch. Podemos adicionar esse padrão em qualquer lugar que quisermos, mas lembre-se também de usar uma pausa se não estiver no final. Nós também podemos mudar as coisas em torno de um pouco para. Se quisermos o mesmo resultado para vários casos, podemos combiná-los assim. Digamos que depois da pizza, podemos adicionar um segundo caso. Vamos comer macarrão, novo com o cólon depois. Agora, se o caso da comida coincide com pizza ou macarrão. Podemos então dizer: “Eu amo italiano.” Então salve. Vamos manter isso como queijo por enquanto. Teremos a queda de volta e se mudarmos isto para macarrão. Recarregar. Eu amo italiano. Então pizza e ainda temos, eu amo italiano. Com instruções switch, também podemos continuar com quantos casos quisermos. Agora é hora de começar a construir um pequeno jogo para colocar em prática as coisas que aprendemos nesta seção. 11. Hora da prática: o jogo o caçador de dragão: Agora vamos tirar um pouco de tempo aprendendo sobre declarações condicionais para colocá-los em prática em um jogo divertido chamado, o caçador de dragões. Eles serão bastante simples, mas isso nos fará pensar sobre o que queremos fazer a seguir, com base na condição. Quando terminamos a página e estes são os projetos acabados, primeiro perguntamos nosso nome. Podemos então inserir nosso nome e, em seguida, clicar em OK. Em seguida, passaremos para a nossa próxima tela onde nos perguntam se gostaríamos de jogar com o nosso nome dentro da corda. Se cancelarmos, compramos um têxtil, talvez da próxima vez. No entanto, se nós recarregar o jogo em nosso nome, clique em ok, e então nós dizemos, você gostaria de jogar e clique em ok. Então passamos a ser perguntados se gostaria de curvar o dragão. vez, se cancelarmos, receberemos uma mensagem de volta quando for corajoso o suficiente. No entanto, se formos adiante e jogarmos o jogo em nosso nome, você gostaria de jogar? Sim. Gostaria de lutar com um dragão? Clique em OK. Então temos uma chance aleatória de onde estará o dragão. Desta vez derrotamos o dragão porque comparamos isso com um número aleatório que determina se ganhamos ou perdemos. Há uma chance de 50% de qual será essa mensagem. Vamos dar mais uma chance. Se atualizarmos em nosso nome e, em seguida, clicar através, desta vez ele diz que perdemos. Você pode dar uma chance se você se sentir confortável fazendo isso, e eu realmente encorajaria você a fazer isso, se não apenas para ter um pouco mais de prática. A única coisa que ainda não cobrimos é gerar números aleatórios, mas você pode facilmente olhar a inclinação se quiser. Caso contrário, vou construir isso agora. Vamos fechar isso, e depois ir para os arquivos iniciais para o jogo caçador de dragões. No script, vou começar criando uma variável chamada aleatória, e esta é a única seção que ainda não cobrimos. Para gerar um número aleatório, usamos matemático ponto aleatório e, em seguida, os colchetes como este, e então vamos fazer um log de console para a palavra aleatória. Salve e, em seguida, recarregue, e na verdade é quando você vai para o nosso projeto, abra o console, e lá está o nosso número aleatório. Se continuarmos atualizando, obteremos valores diferentes a cada vez. Um número aleatório no script java por padrão está entre zero ou um. Zero sendo incluído, mas um não foi incluído, então isso vai acabar com o valor mais alto de 0,999. Se você continuar atualizando, não veremos nenhum valor maior que um. Para facilitar isso para nós, vamos gerar um número aleatório entre zero e 99. Para fazer isso, podemos primeiro multiplicar o número aleatório por 100, e isso nos dará um número se atualizarmos, que é entre zero e 99, mas com muitas casas decimais diferentes. Se queremos que isto seja um número inteiro, podemos arredondar este número para cima ou para baixo. Podemos executar o número para baixo com matemático ponto chão, ou se quisermos arredondar o número para cima, podemos dizer matemático ponto ceil, que é abreviado para teto, e então envolve o resto do nosso código dentro dos colchetes. Agora, se salvarmos, e depois recarregar, obtemos um número aleatório que é arredondado. Agora nós cuidamos desse número aleatório, e a maneira como vamos usar isso é que vamos verificar, se esse número é menor que 50, se for, vamos dizer que você derrotou o dragão, se o número aleatório for superior a 50, vai dizer que você perdeu. Vamos voltar ao trabalho com este jogo. Podemos remover o console.log, e então vamos definir uma segunda variável de nome, e este nome vai ser o valor passado pelo usuário dentro de um prompts. Qual é o seu nome? Isso adicionará um prompt ao usuário pedindo o nome que podemos digitar, e esse valor é armazenado dentro dessa variável. Em seguida, muitas vezes quer criar uma nova variável chamada play, e isso é para a nossa segunda tela, que vai ser uma confirmação. Dentro da confirmação, podemos dizer olá, adicionar um espaço e, em seguida, adicionar o nome do usuário. Esta é uma tela que você viu dentro da versão final. Primeiro, sabemos qual é o seu nome? Quando você digita seu nome, podemos dizer, ok, e esta seção aqui é a que restaurar dentro de uma peça. Então olá nome e, em seguida, a cadeia de texto de, você gostaria de jogar? Agora precisamos fazer algumas verificações condicionais. Primeiro de tudo, vamos verificar se o usuário selecionou jogar. Se o jogo for verdadeiro, então queremos executar algum código. Se o usuário optou por jogar o jogo, gostaria de criar uma nova confirmação, e desta vez vamos fazer a pergunta de, você gostaria de lutar com um dragão? Se formos para a versão final, apenas aqui, vamos recarregar, qual é o seu nome? Então temos a seção que você gostaria de jogar? Se tudo bem, esta é uma seção que você acabou de criar dizendo, você gostaria de lutar com um dragão? Precisamos armazenar isso dentro de uma variável. Vou chamar a minha batalha, e mudá-los. Agora temos um valor verdadeiro ou falso dentro desta variável chamada batalha. Se o usuário quiser ir em frente e jogar, podemos então criar um novo if declarações, e desta vez aninhado dentro de um jogo. Vamos dizer se a batalha é verdadeira, então aqui dentro queremos uma batalha, ou se os usuários clicaram em cancelar batalha será falsa, e então precisamos fornecer outras declarações, então vamos dizer não lutar. Primeiro de tudo, vamos lidar com a outra declaração. Se o usuário optou por não lutar, vai simplesmente fazer um alerta, e assim alerta pode dizer 'retorno quando você é corajoso o suficiente'. Vamos primeiro fazer um teste no navegador ou em nossos projetos. Vamos refrescar. Qual é o seu nome? Digite isso e nós diremos, 'Olá Chris, você gostaria de jogar? ' Esta é esta seção aqui, dizendo que você gostaria de jogar? Se o jogo é verdade, então perguntamos, “você gostaria de jogar o dragão “, o que você vê aqui? Lembre-se que não definimos uma condição, se isso for verdade ainda, só definimos a condição se o usuário clicar em cancelar. Se o usuário cancelar, devemos receber esta mensagem aqui. Vamos tentar isso, e lá temos “volte quando tiver coragem o suficiente”. Agora precisamos lidar com a condição, se o usuário clicar em “ok”. Vamos adicionar uma condição é que o usuário decide lutar. Antes de configurar esses números aleatórios entre zero e 99, e armazená-lo em uma variável chamada aleatória, cada vez que executamos um aleatório, podemos então usar o operador ternário para verificar se isso é maior que 50, se for, Podemos então dizer: “Você derrotou o dragão! 'se este número for inferior a 50'. Podemos dizer que perdeu. Guarde isso, e vamos dar uma chance. Digitou alguma coisa aí, “gostaria de jogar”? Sim. “Você gostaria de lutar?” Certo, e não vemos nenhum resultado na tela. Isso ocorre porque criamos nosso operador ternário, mas não exibimos os resultados na tela. Vamos definir o resultado para ser uma variável chamada resultados, e definir isso para o nosso operador ternário. Então, logo depois disso, podemos fazer um console.log com o valor dos resultados, e na verdade vamos mudar isso seja um alerta assim como o resto. Salve e, em seguida, para o navegador, 'qual é o seu nome? '.' Gostaria de jogar? Sim, 'gostaria de lutar? ' Ok. Então perdemos esse tempo, vamos tentar de novo. “ Você gostaria de jogar?” Sim, e desta vez derrotamos o dragão, porque o número aleatório deve estar em mais de 50, bom. Aqueles que lidaram com a maioria dos casos usados aqui, são os usados para jogar, são os usados para a batalha. O último caso para lidar, é se o usuário não quer jogar em tudo. Se atualizarmos o navegador, desta vez se escrevermos nosso nome, e clique em ok. Em seguida, queremos lidar com o caso se o usuário não quiser jogar, atualmente dentro do aqui estamos verificando se o usuário quer jogar, e se o fizer, então executamos este código. Em vez disso, se o usuário clicar em cancelar, gostaria de alertar mensagem dizendo 'talvez da próxima vez'. Podemos fazer isso como uma outra declaração na parte inferior, então, vamos fazer um alerta de 'talvez da próxima vez'. Guarde isso e nos dê uma chance. “ Qual é o seu nome?” Clique em OK. “ Você gostaria de jogar?” Desta vez, clicaremos em cancelar, e a mensagem de talvez da próxima vez. Ótimo tudo está funcionando agora, e espero que você goste de jogar este jogo. Não se preocupe se foi algo que você não poderia muito bem gerenciar, há muito tomado lá e cada passo apenas tomar um pouco de pensar sobre para decidir o que vamos fazer a seguir. Espero que todos estejam ansiosos para a próxima seção e te vejo lá. 12. Manipulação do DOM: Bem-vinda de volta. Este vídeo é onde o JavaScript começa a ficar realmente interessante manipulando o DOM. O DOM representa o Document Object Model e é uma representação em árvore de nossos documentos web. É uma interface para permitir linguagens de programação para acessar e atualizar o conteúdo e a estrutura. Aqui vemos a mesma estrutura que nossas páginas web. Do início, temos o documento. Dentro há um elemento HTML raiz. Sob isso, temos a cabeça e o corpo familiares. Em seguida, seguidos por nossos elementos, textos e atributos, por exemplo. A grande coisa sobre isso é que ele pode conectar duas linguagens, como JavaScript, para que possamos mudar as coisas. Isso abre muitas possibilidades, como a capacidade de acessar elementos, alterar o conteúdo, adicionar atributos e estilos, ou até mesmo criar e excluir elementos também. Pode parecer complexo, mas é muito fácil de começar. Uma das maneiras mais fáceis de manipular o DOM é pegar um elemento em nossa página e alterá-lo. Por exemplo, selecionando os elementos p e alterando o texto. Vamos para o nosso iniciador JavaScript e abrir a seção de manipulação DOM. Vamos para os nossos arquivos iniciantes JavaScript e ir para o nosso número 10, que é manipulação DOM. Aqui dentro, primeiro precisamos de algum HTML para ir em frente e mudar. Dentro do corpo vamos abrir e fechar os elementos p e, em seguida, adicionar algum texto dentro de Olá. Em seguida, vamos abrir os elementos span e, em seguida, adicionar o texto do usuário. Isso exibirá na tela o texto do usuário Olá. Em seguida, precisamos adicionar um ID a este elemento span, que possamos pegá-lo usando JavaScript. Vamos chamar esse ID de nome de usuário. Agora, se nós rolar para baixo para a nossa seção de script, que é logo abaixo aqui, podemos começar com o que é chamado, obter elemento por ID. Isso é pré auto-descritivo, isso pega um elemento pelo ID, como nome de usuário. Primeiro pegamos o documento. Este é o objeto do documento, que é basicamente a nossa página web. Lembre-se, o DOM significa Document Object Model. Nossa estrutura em árvore é um modelo de nossa página web. Então, depois de selecionar esses documentos, podemos então restringir isso. Neste caso, vamos selecionar um ID no documento, vamos obter elementos por ID. Dentro dos colchetes podemos então adicionar o nome do ID que selecionaríamos. No nosso caso, é nome de usuário. Adicione um ponto-e-vírgula no final. Observe ao digitar obter elementos por ID, temos uma letra maiúscula para cada palavra após get. Isto é referido como revestimento de camelo e torna-o mais legível porque podemos ver melhor o início de cada palavra. Se salvarmos isso e passarmos para o navegador, veremos que nada mudará. Isso ocorre porque selecionamos o elemento que queremos, mas ainda não fizemos nada com ele. Podemos alterar o conteúdo, definindo o HTML interno. Pouco antes do ponto e vírgula, adicionamos um.innerHTML. Agora podemos definir isso para ser um valor como uma string. Digamos que Chris, segure o navegador, recarregue e agora vemos o texto de, Olá Chris. Além de usar uma string de texto para o nosso InnerHTML, também podemos usar uma variável também. Selecione definir uma variável para o nosso nome. Var nome é igual a uma string de Chris. Então, em vez de nossa string apenas aqui, podemos passar em nosso nome de variável do navegador e recarregar e ainda vemos que nosso texto de, Olá Chris, está agora na tela, mas desta vez usando uma variável. Também podemos mudar o estilo, alterando qualquer um dos valores CSS. Logo abaixo disso, podemos acessar os mesmos elementos, com document.getElementByID. Novamente, queremos selecionar o nome de usuário, o N maiúsculo para o nome e, em seguida, em vez de selecionar o HTML interno, desta vez podemos definir o estilo e digamos a cor escura seja igual a um valor de vermelho. Isso mudará a cor do texto do nosso texto dentro da extensão. Salve, atualize e lá está a nossa cor vermelha para a palavra Chris. Podemos usar qualquer propriedade CSS que queremos dentro dela aqui. A única diferença é que precisamos camelar quaisquer propriedades CSS que têm várias palavras, como cor de fundo e tamanho da fonte. Em CSS, normalmente fazíamos algo assim. Diria que o tamanho da fonte usando um hífen ou um traço, mas em vez disso , ao usar JavaScript, precisamos nos referir a esta caixa de camelo, que vemos apenas aqui. Em vez de um traço, usamos uma letra maiúscula, como esta. Então vamos definir o texto como um valor de 24 pixels. Vamos ver isso no navegador e lá vamos nós. Agora nosso texto de Chris é uma fonte maior. Também podemos usar uma classe no lugar desta ID. Vamos até o nosso elemento p e, em seguida, adicionar uma classe de, Olá. Em seguida, podemos usar document.getElementByClassName. Vamos adicionar uma nova seção de getElementByClassName. Isso funciona de forma semelhante a acima. Primeiro selecionamos o documento e, em seguida, restringimos usando o nome da classe. Obter elementos por nome de classe. Passe em nome da nossa turma, que era olá, que corresponde a esta seção aqui. Em seguida, um ponto-e-vírgula no final. Observe aqui ao usar o nome da classe, adicionamos um s no final dos elementos. Isso ocorre porque podemos ter várias classes em nossa página. Por exemplo, poderíamos ter um segundo conjunto de elementos p. Se formos em frente e adicionar um segundo conjunto aqui, e depois adicionar a mesma classe de olá. Agora vamos adicionar um texto de boas-vindas de volta. Agora, se tivéssemos mais de uma classe selecionada, como fazemos aqui, como saberei qual delas estamos mudando? Bem, vamos atribuir isso a uma variável e, em seguida, exibi-lo para o console. Digamos que variável de teste é igual à nossa primeira classe. Em seguida, em um log de console dentro do navegador com o valor de teste. Para o navegador, clique com o botão direito do mouse e inspecione. Dentro do console vemos uma coleção HTML com dois itens dentro dos colchetes. Isto é como uma matriz que vamos cobrir em breve. Estes dois itens, nossos dois elementos com a classe de olá. Se você clicar nesta seta aqui, também podemos abrir isso e descobrir mais sobre o conteúdo. Vemos os primeiros elementos p com a classe de olá tem uma posição de índice de zero. Então nosso segundo tem uma posição de índice de um. Podemos acessar esses dois elementos por estas posições de índice. Dentro do console, se dissermos teste, que é o nome da nossa variável e, em seguida, dentro dos colchetes, podemos acessar cada um desses elementos pelo número de índice. Começando com zero, aperte Enter, e há nossos primeiros elementos p, que contém nossos textos de Olá Chris. Em seguida, podemos acessar nosso segundo valor com test1, pressione Enter. Este é o nosso segundo elemento com o texto de boas-vindas. Este número de posição também pode ser usado dentro do nosso seletor. No nosso código, vamos pegar todos os elementos com o nome da classe “Olá”. Então, dentro dos colchetes, podemos reduzir isso para o nosso primeiro, que é a posição zero. Podemos fazer qualquer coisa que já vimos anteriormente. Gráfico definido no style.color para ser um valor de roxo. Salve e recarregue. Então o primeiro elemento é agora roxo. E é claro que podemos mudar isso para ser um, e isso agora tornará o texto de boas-vindas roxo em vez disso. Em seguida, temos getElementsBytagName. Como o nome sugere, podemos selecionar todos os elementos em uma página pela tag, como nosso elemento p para texto ou IMG para a tag de imagem. Na parte inferior, vamos adicionar um comentário de getElementsBytagName. Novamente, isso tem um S2 porque você pode selecionar mais de um elemento. Depois aqui usamos o document.getElementsByTagName, que é apenas aqui, os colchetes e, em seguida, dentro das cotações, podemos adicionar os elementos que queremos selecionar, vamos cortar todos os elementos p, e mais uma vez, porque tem mais de um conjunto de elementos p, precisamos agarrá-los pelo número do índice. O primeiro é a posição zero, podemos definir o HTML interno e vamos definir este valor string de alterado. Se salvarmos isso e depois recarregar, agora mudamos nossos elementos p na posição de índice zero. A próxima ferramenta que vamos olhar com base no QuerySelector. Isso é exatamente como o seletor que usamos em CSS. Vamos ver isso com uma imagem vazia, então até o HTML após nossos dois elementos p, vamos adicionar os elementos IMG. Se dermos que salvar, que foi o navegador, você vê que não vemos nenhuma imagem na tela porque ainda não definimos uma fonte atributos. Vamos adicionar os atributos de origem usando JavaScript. Primeiro, podemos pegar essa imagem usando QuerySelector, então um comentário de QuerySelector. Em seguida, usamos Document.QuerySelector e, em seguida, passar em nome de IMG. Esta é a mesma maneira que nós selecionaríamos nossa imagem em CSS. Também podemos selecioná-lo com o ID e o nome da classe para, e vamos dar uma olhada nisso em apenas um momento. Usando QuerySelector, ainda temos acesso ao HTML interno e também adicionar estilos também. Mas para este exemplo, vou mostrar-lhe algo novo, e é assim que adicionar um atributo. O atributo que vamos adicionar é a fonte da imagem e fazemos isso usando.setAttribute, dentro dos colchetes, vamos em frente e adicionar dois valores. Primeiro é o nome do atributo que queremos adicionar, que é fonte e, em seguida, separado por uma vírgula e, em seguida, o nome da imagem dot.JPEG, você pode usar qualquer imagem de sua escolha. Mas eu adicionei uma imagem no arquivo inicial, que está aqui. Vou fechar isso, salvar e recarregar o navegador. Há uma imagem que está agora na tela. Se abrirmos as ferramentas de desenvolvedor com o botão direito do mouse e inspecionar e, em seguida, ir para elementos. Podemos ver dentro das ferramentas de desenvolvedor, temos a nossa seção de corpo, temos o nosso p com o texto de alterado, nosso segundo elemento p, bem-vindo de volta, e também a nossa imagem com a fonte de image.JPEG. O resultado final é exatamente o mesmo que se nós digitássemos isso em HTML, mas nós adicionamos isso usando JavaScript. Nós mencionamos que ao usar queryselector, podemos selecionar qualquer elemento da mesma maneira que normalmente faria em CSS. Assim como o nome da tag, como imagem, também podemos selecionar esta imagem com uma classe ou ID. Se adicionarmos um ID a esta imagem da imagem e, em seguida, rolar para baixo, assim como ao usar CSS, precisamos usar o hash como o seletor e, em seguida, o nome do ID, agora salvar e, em seguida, recarregar. Podemos ver que isso ainda funciona, mas desta vez usando o ID. O mesmo para a classe, ele vai mudar a guia imagem, uma classe de imagem. Desta vez, assim como ao selecionar isso em CSS, precisamos usar um ponto como um prefixo, e isso ainda deve funcionar dentro do navegador. Finalmente, algo semelhante a isso é QuerySelectorAll; QuerySelector que acabamos de olhar, apenas seleciona os primeiros elementos correspondentes na página, QuerySelectorAll, por outro lado, irá retornar uma lista de todos os elementos. Podemos ver isso adicionando uma segunda imagem em nosso HTML. Copie esta seção aqui e cole-o abaixo usando o mesmo nome de classe. Se salvarmos isso e, em seguida, atualizar, ainda vemos esta única imagem na tela isso é porque QuerySelector só irá selecionar os primeiros elementos na página. No entanto, se formos em frente e adicionar QuerySelectorAll que se parece isso e, em seguida, fazer document.QuerySelectorAll, isso irá em frente e retornar uma lista de ambas as nossas imagens. Primeiro vamos marcar a classe da imagem, e depois disso adicionamos os colchetes, então podemos passar em nosso número de índice. Assim como antes, o número de índice zero é a primeira imagem em nossa página. Se eu pudesse apenas comentar este QuerySelector. Agora nós selecionamos nossa primeira imagem, podemos então usar SetAttributes como nós apenas olhamos para, em seguida, passar agora primeiro valor que é a fonte, e o segundo que é image.JPEG para que este irá selecionar o primeiro valor, mesmo como com uma imagem na tela. No entanto, se quisermos adicionar a imagem duas vezes, podemos copiar esta linha de código aqui, e depois colá-la mais uma vez. Mas desta vez, selecione o valor do índice de um e agora temos duas imagens na tela. Selecionar dois elementos como este seria melhor feito com o loop, mas entraremos em loops em breve neste curso. Compreender como manipular o DOM é algo realmente importante de saber, e é aí que o JavaScript realmente começa a ficar interessante. Agora sabemos como selecionar elementos, agora é hora de seguir em frente. Em seguida, aprenderemos tudo sobre como adicionar e remover elementos usando JavaScript. 13. Adicionando e removendo elementos com Javascript: Acabamos de analisar como podemos usar JavaScript para manipular elementos em nosso DOM, como alterar o texto, adicionar atributos e definir estilos. Vamos abordar como realmente criar novos elementos, e também como removê-los também. Vamos para os nossos arquivos iniciais. Vamos começar no número 11, que é adicionar e remover elementos com JavaScript e também ter isso aberto dentro do navegador. Podemos ver em nossos arquivos iniciais que temos uma lista desordenada, com os dois listItems de maçãs e peras, que temos apenas aqui. Vamos começar na seção de script. Vamos olhar para o que é chamado de document.write. Document.write é uma forma de definir uma cadeia de texto para uma página. Document.write e, em seguida, dentro dos colchetes, podemos adicionar uma cadeia de texto, como texto de gravação de documento. Se salvarmos isso e recarregarmos o navegador, agora temos esse texto aparecendo ao lado de nossa lista não ordenada. Document.write é para adicionar uma cadeia de texto simples a uma página. Isso é comumente usado para fins de teste, mas pode causar problemas se usado incorretamente. Por exemplo, se você acessar google.com e, em seguida, abrir o Console, clique com o mouse e Inspecionar. Dentro daqui se fizermos um documento.write e, em seguida, passar em uma string de texto, como hello, pressione Enter, e vemos que a página inicial do Google foi substituída por nossa gravação de documento. Uma gravação de documento substituirá todo o conteúdo existente, se a página já estiver carregada. Precisamos ter muito cuidado ao usar isso. Você verá na parte superior do modelo de início, temos nossa lista não ordenada, que é apenas aqui. Esta é uma lista com a qual podemos trabalhar adicionando e removendo alguns ListItems, usando JavaScript. Se queremos criar um novo elemento na página usando JavaScript, podemos usar o método createElement. Vamos remover este document.write e, em seguida, dentro aqui podemos fazer o document.createElement. Vamos criar uma variável para armazenar a cena chamada listItem, e definir isso como document.createElement. Assim como este. Novamente, usando o invólucro de camelo, como já vimos antes. Dentro dos parênteses, podemos passar como uma string, o nome dos elementos que queremos criar, como um ListItem. Qualquer nome de tag de elemento pode ser adicionado, como um elemento div ou p. Criar isso não fará nada por conta própria, porque apesar de termos criado, ainda não há texto dentro dos elementos. Podemos adicionar texto usando o CreateText.Method. Vamos apenas adicionar alguns comentários, criar elemento. Então, depois daqui vamos criar o TextNode. Também podemos armazenar isso dentro de uma variável chamada itemText. Isso é igual a document.createTextNode. Em seguida, dentro do colchete, você pode passar na cadeia de texto que queremos adicionar. Ficando com as frutas, eu vou adicionar o valor das bananas. Se salvarmos isso e depois recarregar o navegador, eu vou para nossa página de índice, nós ainda não vemos nenhum item extra na tela, porque apesar de termos nossos elementos que criamos aqui, e também nosso texto que temos aqui, ainda não adicionamos este texto ao conteúdo desses elementos. Podemos fazer isso com o método AppendChild. Vamos adicionar texto ao elemento. Primeiro de tudo, vamos pegar nosso ListItem, que está aqui. Dizemos ListItem.appendChild. A criança que queremos acrescentar é este texto do item aqui. Adicione-os dentro do suporte e salve e recarregue. Ainda não vemos os elementos na tela. Vamos ver o que está acontecendo com o registro do console. Esse é o registro do console, o valor do nosso ListItem. No console, clique com o botão direito do mouse em Inspecionar. Vemos que temos o nosso elemento criado. Temos o nosso ListItem de abertura e fechamento, e depois o texto de bananas como a criança. O passo final é usar novamente AppendChild, para adicionar este novo item a esta lista existente, que é apenas aqui. Esta lista existente tem um ID de lista. Primeiro vamos pegar isso e armazená-lo dentro de uma variável. Na parte inferior, vamos selecionar a lista pai. Instale isso dentro de uma variável chamada lista. Sabemos como fazer isso, é document.getElementByID. O ID que demos a isto é List. Então vamos adicionar um ponto-e-vírgula no final, para armazenar isso dentro desta variável. temos a lista de pais e temos o filho que queremos adicionar. Podemos ir em frente e adicionar estes agora. Adicionar novo ListItem à lista. Fazemos isso, listam.appendChild, que já vimos antes, e o item que queremos adicionar é o ListItem. Adicione um ponto-e-vírgula no final. Nós carregamos o navegador e lá vamos nós, lá está nossas bananas como um novo ListItem. Só para recapitular o que estamos fazendo aqui, estamos pegando a lista completa, e armazenando dentro de uma variável. Em seguida, adicionamos a esta lista, o filho, que é este novo ListItem. Você pode estar se perguntando por que fazer tudo isso, em vez de apenas digitar um novo listItem olhar dentro do HTML. Bem, há muitos casos em que queremos fazer isso com JavaScript. Em um aplicativo para fazer, por exemplo, cada vez que o usuário digita um item novo para fazer, isso pode ser adicionado à lista, assim como fizemos aqui. Ou, por exemplo, em outro curso que eu tenho, nós construímos um aplicativo player de música, onde nós construímos uma lista de músicas. Seguindo em frente, além de adicionar itens à nossa lista, também podemos substituir quaisquer itens existentes que já temos. Por exemplo, se quiséssemos substituir essas peras ListItem, por outra coisa, também poderíamos fazer isso. Primeiro, vamos criar um novo ListItem chamado uvas. Então vamos criar uvas ListItem. Fazemos isso como antes, podemos criar uma nova variável chamada new listItem e, em seguida, definir isso para ser document.createElement, o elemento que queremos criar é um ListItem. Então, como já vimos antes, também podemos criar nosso TextNode. Digamos que NewitemText. Isso é exatamente o mesmo que fizemos antes, quando criamos um ListItem. Depois o nosso TextNode, bananas. Mas desta vez vamos criar uvas. Isso é igual a document.CreateTextNode, texto de uvas, ponto-e-vírgula no final. Então precisamos adicionar este texto a este item. Dizemos NewListItem e, em seguida, anexamos o filho do novo texto do item. Simplesmente assim. Eu tenho um NewListItem aqui, que nós acessamos aqui. Em seguida, adicionaremos a criança, que é um novo texto do item, que é o TextNode de uvas. temos este NewListItem. Podemos usar isso para substituir qualquer um dos ListItems que já temos. Como mencionamos antes, eu quero estar selecionando peras, que é a posição de índice de um. Na parte inferior, vamos criar uma variável chamada item para substituir e, em seguida, document.QuerySelectorAll. Vamos pegar os ListItems. Em seguida, o item que queremos é a nossa posição de índice 1. temos o nosso item que queremos adicionar e também o item que queremos substituir. Agora podemos ir em frente e usar o substituto child para completar isso. Logo depois aqui, vamos selecionar nossa list.ReplaceChild. ReplaceChild leva em dois valores, o primeiro vai ser o nosso novo ListItem, que é um novo item. Em seguida, separados por uma vírgula, adicionamos no item que queremos substituir, que armazenamos nesta variável aqui. Adicione o mesmo que nosso segundo valor, salve isso e recarregue. É bom saber que o nosso segundo item é agora uvas, em vez do que tínhamos originalmente, que é peras. Finalmente, se quiséssemos remover completamente um elemento, em vez de substituí-lo por outra coisa, também podemos usar o método removeChild. Isso é muito simples de fazer. Vamos voltar ao nosso guião. Digamos, remover um item. Vamos pegar nossa lista. Então usamos. RemoveChild. Dentro dos suportes, tudo o que precisamos fazer é adicionar a criança que queremos remover. Se quiséssemos remover nossas uvas, que é armazenado em NewListItem, basta adicionar isso como um valor, salvar e, em seguida, recarregar. O valor das uvas foi retirado da nossa lista. Ao remover esses itens, sempre precisamos especificar o padrão primeiro, que é nossa lista aqui. Em seguida, remova um dos itens filho, assim como este, em vez de acessar os elementos a serem removidos diretamente. Agora sabemos como adicionar, remover e atualizar elementos usando JavaScript. Agora vamos passar para o próximo vídeo. 14. Hora da prática: adicionando elementos com Javascript: Cobrimos algumas maneiras de adicionar, atualizar e remover elementos do DOM. A melhor maneira de tudo isso se manter é praticar por conta própria sem me acompanhar. Neste desafio, eu gostaria que você fosse em frente e criar alguns elementos usando JavaScript. Não precisa ser muito complexo. Apenas algo como você vê aqui está bom. Com algum texto no topo da página seguido de uma imagem. Eles podem ser colocados dentro de um contêiner e, em seguida adicionar à imagem e ao texto como itens filho. Além disso, você precisará adicionar o molho de imagem e todos os atributos para usar scripts Java. Recuperado tem que fazer isso em um vídeo de manipulação DOM. Se você for para o arquivo inicial no Número 12, hora de praticar. Aqui dentro você encontrará algum código básico para começar. Tudo o que precisamos fazer é criar uma versão JavaScript deste código HTML que vemos aqui. Boa sorte com isso. Uma vez que você está pronto, vamos passar para funções JavaScript. 15. Funções do Javascript: Agora vamos olhar para o uso de funções JavaScript. As funções são realmente importantes e assumem FIN, que você usa muito ao trabalhar com JavaScript ou programação em geral. Uma função é um bloco ou um trecho de código, que podemos chamar quando necessário. Você pode pensar nisso como uma tarefa ou um conjunto de tarefas que estão contidas dentro desta função. Podemos então chamar essa função cada vez que queremos executar o código dentro. Essas funções também são reutilizáveis. Temos algum código que você deseja repetir várias vezes, podemos empacotar um código em uma função. Vamos começar em nosso arquivo inicial de funções, que você abriu a barra lateral é o número 13. Em seguida, para baixo para os nossos scripts temos script vazio para começar com. Definimos uma função com a palavra-chave function, seguido pelo nome que queremos dar-lhe, como oi. Este nome depende completamente de nós, mas tente escolher algo descritivo. Em seguida, adicionamos aos colchetes depois, que também são conhecidos como parênteses. Em seguida, adicionamos um conjunto de chaves depois, e eu quero apertar enter. Então, dentro dessas chaves, podemos adicionar o código que você deseja executar, um que chamamos de função. Para um exemplo simples, podemos apenas adicionar alerta. Em seguida, dentro daqui, apenas um texto fora oi da função. Podemos adicionar tantas linhas de código como queremos dentro desta função, embora muitas vezes é bom para não sobrecarregar a função e apenas mantê-lo para avisar tarefa relacionada. Esta seção aqui não fará nada ainda, já que só declaramos esta função. É por isso que às vezes é referido como uma declaração de função, ou uma definição de função. Para realmente executar este código, queremos chamar isso pelo nome da função de hi, seguido pelos parênteses e o ponto-e-vírgula. Isso geralmente é chamado de invocar uma função. Agora, se salvarmos e, em seguida, abrir isso no navegador, agora temos o nosso código executado a partir de dentro, que é o nosso alerta de oi da função. Também podemos chamar essa função quantas vezes quisermos repetindo o mesmo código de função. Se copiarmos isso e colá-lo abaixo, devemos ver o problema de alerta duas vezes. Diz o nosso primeiro, clique bem, e depois o nosso segundo alerta logo depois. Esta função pode conter quaisquer códigos que gostamos. Se formos até o topo e adicionássemos uma div vazia. Todo o fato vai para os elementos p e vamos manter isso vazio, primeiro adicionar um id de textos. Poderíamos usar esta função para ir em frente e alterar o HTML interno de nossos elementos de texto aqui. baixo dentro do corpo da função, sabemos como fazer isso com um documento ponto get elemento por id. O id é texto, que temos aqui. Em seguida, podemos definir o HTML interno de todos os elementos p para ser uma cadeia de texto de textos da função com um ponto-e-vírgula no final. Agora, se removermos uma dessas chamadas de função, salve, e depois no navegador obtemos nosso alerta e, em seguida, nosso texto da função. Este tipo de função é chamada de função de nome, simplesmente porque adicionamos um nome como fizemos aqui. Há também uma função anônima também. Aqui é onde não damos o nome funcional, em vez disso, podemos atribuir esta função a uma variável. Podemos remover o nome e apenas manter esses parênteses logo após a função, e então podemos adicionar uma variável. Vamos chamar isso de função anônima, e definir o valor igual a esta função aqui. Podemos então chamá-lo pelo seu nome de função anônima, então substituir oi com isso, seguido pelos parênteses, recarregar e seu é o nosso alerta e também os textos da função ainda está funcionando. Ambas as maneiras farão uma coisa semelhante executando o código dentro dessas chaves apenas aqui. Há uma diferença no entanto, e vamos olhar para o que isso é visto quando olhamos içar, mas por agora vamos passar para o próximo vídeo, uma olhada em argumentos de função. 16. Argumentos da função: Se nos dirigirmos para o arquivo de início deste vídeo, que é argumentos de função, aqui dentro temos nossos elementos p do último vídeo, com a idéia de texto. Em seguida, uma função nomeada simples, que vai definir o HTML interno, para ser função textual. Então, no último vídeo, vimos alguns usos básicos de função. Mas as funções podem se tornar ainda mais úteis, se passarmos alguns dados. Podemos passar esses dados ao chamar a função, adicionando alguns valores, dentro desses colchetes aqui. Estes valores são passados para a função são chamados argumentos, por isso, se quisermos passar em um nome, poderíamos fazê-lo assim. Agora a função tem acesso a esses argumentos, passando o nome pelo qual queremos fazer referência, dentro desses parênteses de função. Então isso é adicionar Nome dentro de um aqui, e este nome aqui, age como uma variável. Podemos referências dentro da função, o nome dar esses dados dentro é um aqui é chamado de parâmetro. Agora podemos usar esse nome dentro de nossa função, de qualquer maneira que você escolher. Então, por exemplo, podemos usá-lo para definir o HTML interno em vez de textos da função, eu deveria dizer oi, e então outro nome de variável no final. Se salvarmos isso, agora temos o valor de oi Chris, e Chris foram os argumentos que são passados em. Podemos passar vários argumentos também, por exemplo, se o trabalho desta função era fazer um cálculo, como multiplicar dois números. Vamos mudar isso para multiplicar, e também a chamada de função. Digamos que quiséssemos passar em dois números, em vez de uma string. Vamos para 23, e 15. Podemos então nomear nossos parâmetros aqui dentro. Vamos para o número um, e o número dois. Então podemos atualizar nossos elementos p aqui, com os valores do número 1 multiplicados pelo número 2. Então dê um salvamento, e depois vá para o navegador. Agora obtemos o valor de 345. Se fôssemos cometer um erro, como apenas passar em um desses argumentos, digamos 23, recarregar. Obtemos o valor de não um número, porque a função ainda está tentando multiplicar nossos dois valores juntos. No entanto, se passarmos apenas em um valor, e só precisamos de um valor dentro daqui, recarregar, ainda obteremos o valor de 23. No entanto, embora não tenhamos nosso segundo valor passado, que é o número 2. Então, em vez disso, se cuja saída, o valor do número 2, salvar isso, recarregar, vamos obter o valor de indefinido. Por isso, não causará grandes problemas, como o esmagamento do nosso site. Significa apenas que uma função não pode fazer o seu trabalho sem todos os dados em que precisa. Alternativamente, também podemos usar a palavra-chave return, para retornar o valor após o cálculo. Isso pode ser útil se você quiser armazenar um valor, por exemplo, em uma variável, para uso futuro. Então, primeiro, vamos voltar para nossa função, e adicionar em nossos segundos argumentos. Em seguida, em vez de atualizar o DOM sem get elemento byID, não iria comentar isso para fora. Em vez disso, podemos retornar o cálculo do número 1 multiplicado pelo número 2 ponto e vírgula no final. Agora, se dermos que um salvar e, em seguida, recarregar o navegador, vemos que o DOM não foi atualizado. Em vez disso, este valor está sendo retornado. Podemos armazená-lo dentro de uma variável para uso futuro. Podemos fazer isso na parte inferior, por arte em uma variável chamada soma, e certamente é para a nossa chamada de função. Então podemos verificar se isso está funcionando, fazendo um log de console, e fazer login no valor de alguns, adicionar variável de soma aqui dentro, abrir o console e lá está o nosso valor de retorno de 345. Agora temos isso armazenado dentro disponível, e agora cabe a nós o que queremos fazer, que é o valor de retorno. Adicionar argumentos é uma ótima maneira de estender a capacidade de uma função. Em seguida, vamos olhar para dois conceitos importantes de JavaScript chamados Escopo e içamento. 17. Scope e hoisting: Vamos agora olhar para duas coisas importantes para entender ao usar JavaScript, e isso é chamado escopo e içamento. Comece com escopo e permitir que isso se relaciona com nossas variáveis. Estamos agora olhando para esses termos porque eles têm muito a ver com funções. Escopo basicamente determina onde temos acesso às nossas variáveis. Primeiro, vamos para o nosso projeto inicial e para a seção de escopo e içamento. Aqui em baixo temos uma função de multiplicação, que já vimos antes. Multiplicando os valores no número um e no número dois. Também assim como o último vídeo, temos nossos elementos p vazios para exibir os resultados no navegador. Então desta vez em vez de passar o número um e o número dois como argumento para a função, podemos ir em frente e declarar essas variáveis. Digamos que var num um é igual a cinco, e então var num dois é igual a 10, se salvarmos isso. Agora esses dois valores devem ser multiplicados, que temos aqui e, em seguida, exibidos em nossos elementos p. Recarregar. Há o nosso valor de 50 na tela. Isso está funcionando bem porque as variáveis que declaramos foram declaradas fora de um corpo disfunção. Isso significa que essas variáveis são globais, todas têm escopo global. Variáveis globais podem ser acessadas em qualquer lugar do nosso código. Por exemplo, nossa variável está sendo acessada aqui dentro da função. Mas também podemos acessá-lo fora da função também que poderíamos ver com um log de console. Eles eram log de console fora do corpo da função o valor de uma dessas variáveis. Guarde isso e recarregue. Nós podemos ver que não só você tem acesso às variáveis dentro da função, também podemos acessá-los fora da função também, o que dizemos aqui com o log do console. No entanto, se pegarmos essas duas variáveis aqui e depois cortá-las, e em vez disso colá-las dentro do nosso corpo de função. Nos dá salvar, recarregar. Então vemos agora que nossas variáveis podem ser acessadas dentro da função. Mas vemos o nosso log de console é lançado e erro. Isso é porque nós movemos essas duas variáveis para o lado deste corpo de função. Isso significa que eles agora têm escopo local em vez de global. Escopo local significa que essas variáveis só podem ser acessadas localmente dentro da função que foram declaradas. É por isso que eu vou obter elemento por ID está atualizando. Ambos o nosso log de console, que está fora da função, agora é lançado e erro. Podemos provar isso movendo este log do console para estar dentro da função. Vamos mover isso para dentro das chaves da função. Depois, para o navegador. Agora, o log do console também tem acesso a essas variáveis locais também. Então é assim que o escopo funciona, é tudo sobre onde declaramos todas as variáveis. Então lembre-se, declará-los fora de uma função significará que eles são globais e podem ser acessados em qualquer lugar. Variáveis declaradas dentro de uma função só têm escopo local e só podem ser acessadas dentro da função. Em seguida, temos outra dessas palavras que você vai ouvir sobre chamada içar. Içar basicamente significa que o JavaScript irá mover ou içar suas variáveis e funções para o topo do escopo atual. Eles não são movidos fisicamente para o topo, embora na verdade estejam armazenados na memória, modo que podem ser usados a qualquer momento no script. Isso faz com que algum comportamento que não podemos esperar. Vamos ao nosso exemplo de antes e dar uma olhada nisso com mais detalhes. Então, vamos para a nossa função. Então, primeiro de tudo, declaramos nossa função apenas aqui e, em seguida, abaixo isso irá em frente e chamar nossa função para executá-lo. Esperamos que esta função funcione porque o navegador sabe que declaramos esta função primeiro e, em seguida, chamou o abaixo. Nosso código é lido de cima para baixo. Mas e se chamássemos a função primeiro antes de a declararmos? Então, se um humor se multiplicar, deve abrir o topo, portanto, chamando a função antes de realmente declará-lo. Vamos guardar isso e ver o que acontece. Ainda vemos as coisas funcionando porque, como dissemos antes, as funções são variáveis armazenadas na memória. Então, quando esta função é chamada apenas aqui, o navegador ou o intérprete já sabe que ela existe. Quando olhamos para funções alguns vídeos atrás, olhamos para dois tipos diferentes. Estes tipos que você vê aqui, que é uma função nomeada, e também uma função anônima que não tem um nome. Lembrem-se, é assim. Então, se removermos o nome e, em seguida, instalá-lo dentro de uma variável chamada função anônima e definir este igual a todas as funções apenas aqui. Se chamarmos esta função para baixo na parte inferior. Então a mudança multiplicada para ser função anônima. Em seguida, mova isto para baixo. Salve e recarregue. Vemos que tudo ainda funciona perfeitamente bem. Nós também mencionamos ao olhar para funções anônimas alguns vídeos atrás, que há uma diferença entre funções anônimas e funções nomeadas. Enquanto a diferença estranhas funções anônimas é quando chamado em primeiro lugar, isso resultará em um erro. Então, se mover esta chamada de função anônima de volta para o topo do navegador e recarregar. Agora vemos um erro no console e nicho não está mais funcionando. Então esta é uma diferença entre os dois tipos de função. Funções anônimas não são içados, ou armazenados na memória, mas eles são nomeados declarações de função, que vimos primeiro içado. O içamento também acontece com variáveis também. Vamos dar uma olhada nisso, se comentarmos essa função, lembrando o código do Visual Studio, isso é comando ou controle com uma barra. Então, se declararmos uma variável de x para ser 10. Em seguida, a segunda variável de y para ser igual a cinco. Então vamos alertar esses dois valores de x e y. Então vamos adicionar x e y e separá-los com uma string. Vamos adicionar um símbolo de cachimbo aqui dentro. Se salvarmos isso e recarregarmos o navegador, receberemos nosso alerta de 10 e depois cinco. Então este é o comportamento que esperaríamos. Declaramos uma variável de x e y e, em seguida, alertá-los para a tela. Então, este é todo o comportamento esperado. Mas o que aconteceria se movêssemos o alerta acima de nossa variável de y, vamos salvar isso e verificar isso no navegador. Recarregar, e obteremos o valor de 10, então y é indefinido. Então dissemos antes que as variáveis são içadas. Então, esperaríamos que os valores de x e y são ambos armazenados na memória e disponíveis quando chamamos este alerta. Mas isso não está acontecendo. Portanto, há uma coisa a ser consciente. Embora essas variáveis sejam armazenadas na memória, apenas a decoração, como a variável x e a variável y, é armazenada na memória, em vez do valor real que lhe atribuímos de cinco e também 10. Então, para ver isso mais claramente, vamos para o nosso exemplo. Esta primeira variável é a inicialização, isto significa que declaramos uma variável de x e atribuímos o valor de 10 a esta variável. Uma declaração, por outro lado, é quando nós apenas declaramos um nome de variável sem atribuir um valor, como este aqui então esta é a declaração. Então agora sabemos a diferença entre a inicialização e a declaração. Por que isso importaria com o nosso código? Bem, quando qualquer uma dessas variáveis é içada, mesmo aquelas onde nós definimos um valor inicial como este, apenas a declaração é armazenada na memória. É por isso que nossa variável de y, que terá aqui, é mostrada como indefinida. A variável de y é realmente içada ou armazenada na memória. Então o navegador está ciente de que existe, mas não está ciente do valor inicial que definimos para cinco. Daí que obtemos o valor de indefinido. Então tudo isso pode parecer um pouco complexo se isso é novo para você, mas é assim que o código é lido. Portanto, é realmente importante entender para evitar qualquer bug ou comportamento esperado. Uma das coisas a tirar disso é sempre declarar suas variáveis no topo do escopo. Significa que se as variáveis são locais, que tivemos dentro da função aqui, colocá-las no topo do corpo da função, ou se queremos que nossas variáveis sejam globais, devemos colocá-las no topo de nossos scripts. Então vamos mover nosso x e y até o topo dos scripts, vamos adicionar isso acima de nossos alertas de antes. Nós também podemos definir este para ser o nosso valor de cinco, dá-nos salvar e atualizar. Agora não temos um problema porque nossas variáveis estão agora definidas no topo do escopo atual. Então deve até mesmo definir estes no topo ou, pelo menos, acima do código que você vai acessá-los no nosso caso, o alerta. Isso garantirá que nosso código seja escrito de forma semelhante em que é lido e possivelmente evitando qualquer comportamento inesperado. 18. Arrow functions: Como a maioria das linguagens de programação, JavaScript evolui ao longo do tempo, e isso pode alterar ou adicionar novos recursos e sintaxe. JavaScript é baseado em uma linguagem de script chamada ECMA Scripts, que visa padronizar a implementação do JavaScript. É por isso que muitas vezes você ouvirá versões do JavaScript sendo referidas como coisas como ES5, ES6 ou ES7, por exemplo. ES5 ou ECMA script versão cinco é uma versão que está atualmente totalmente implementada em todos os navegadores sem a necessidade de quaisquer ferramentas. Para confundir as coisas ainda mais, você também vai ouvi-las referidas como o ano de cada lançamento. ES6 saiu em 2015, então você também pode ouvir isso chamado ES 2015. À medida que passamos por este curso, vamos usar recursos modernos ou sintaxe da especificação ES6 e acima. Isso significa apenas uma maneira mais moderna de escrever JavaScript ou um recurso mais recente. Começando, neste vídeo vamos olhar para a função de seta ES6. Uma função de seta é uma forma de escrever uma função, que você já viu, mas com uma sintaxe mais curta e mais limpa. Se formos para os arquivos iniciais na seção de funções de seta, se rolarmos para baixo, veremos os valores de número um e número dois multiplicados dentro de uma função anônima, que vemos aqui. Uma função de seta ES6 nos permite executar o mesmo código dentro dessas chaves, mas usando uma sintaxe mais curta. Então ainda podemos manter nossa variável de função anônima, mas ao invés de ter a função palavra, podemos apenas usar os parênteses como este, e então o símbolo igual e maior que, e todo o resto do código dentro das chaves permanece o mesmo. Se salvarmos isso e depois recarregar, ainda vemos o valor de 50 no navegador. Muitas vezes você pode ouvir isso chamado de função de seta gorda também, por causa de como a sintaxe parece com este símbolo de igual e os colchetes de ângulo direito. Esses colchetes ou parênteses que temos aqui, ainda podem levar em quaisquer parâmetros e argumentos, como já vimos. Então, se excluirmos nossas duas variáveis aqui em cima e, em vez disso, passá-las como argumentos. Então vamos adicionar um número, um, e depois um, dois. Podemos então passar esses valores como argumentos quando chamamos a função. Então 5 e 10, salve, e depois para o navegador. Isso ainda funciona exatamente da mesma forma que antes. Se tivermos apenas um argumento para passar, podemos mostrar nesta sintaxe ainda mais removendo completamente os parênteses. Então, se quiséssemos apenas passar em um número, como cinco, dois de nosso segundo parâmetro aqui. Nós também podemos remover os colchetes ou os parênteses e apenas deixar nosso nome de parâmetro dentro daqui e, em seguida, para evitar quaisquer erros, vamos apenas remover este número dois daqui, recarregar o navegador, e agora vamos obter o valor de cinco. Então esta é agora uma sintaxe mais curta, e é assim que vamos escrever funções para uma grande parte do resto do código durante este curso. Então isso é tudo ótimo e funcionando bem agora, e é assim que podemos usar uma função de seta ES6. 19. Eventos no Javascript: Agora é hora de olhar para outra parte importante da construção de sites, e isso são eventos JavaScript. Eventos são acionados de várias maneiras, quando um botão é clicado, isso pode acionar um evento, quando um mouse passa sobre um elemento, isso pode acionar um evento também, mesmo quando a página é carregada pela primeira vez, isso pode acionar um evento onload. Podemos então decidir o que queremos fazer quando esses eventos acontecerem. Por exemplo, podemos executar uma função quando um botão é clicado, ou podemos alterar a cor de um elemento quando um mouse passa sobre ele. Aqui no site W3 Schools sob os eventos HTML DOM, há uma enorme lista de eventos que podemos ouvir, se fôssemos rolar para baixo. Primeiro de tudo, temos os eventos do mouse, então temos onclick, temos onclick, onmouseleave, onmouseenter, onmouseover, out e up. Mais abaixo, também temos eventos de teclado que são acionados quando várias teclas são pressionadas. Por exemplo, podemos acionar um evento quando o botão do teclado é pressionado para cima ou para baixo e há praticamente todos os tipos de eventos para nos cobrir para praticamente qualquer coisa que pode acontecer em uma página da web, incluindo formulários aqui, podemos decidir o que queremos fazer com coisas como onchange, onsearch ou onsubmit, que é o que fazer quando o formulário for enviado. Há também eventos de arrastar, eventos de área de transferência e muito mais. Nós vamos usar alguns deles durante este vídeo e isso nos dá tantas opções que podemos responder dentro de nosso código. Se nos dirigirmos para os arquivos iniciais, podemos ir em frente e dar uma olhada em alguns exemplos. Vá até o arquivo de eventos JavaScript e, em seguida, vamos começar dentro do nosso exemplo. Aqui temos um texto simples dentro de um elemento P e, em seguida, dentro do script, temos uma função de seta. Aqui dentro, nós apenas mudamos o estilo do tamanho da fonte para ser 34 pixels e, em seguida, executar esta função. Vamos para o navegador e recarregamos. Este é o texto que temos depois que o estilo foi aplicado. Atualmente estamos chamando nossa função dentro do script, que é apenas aqui. Se você queria que esta função fosse executada somente quando algo acontece, como um usuário movendo o mouse sobre o texto, podemos adicionar esta função chamada em um evento. Dentro do elemento P apenas aqui dentro do aberto dentro vamos adicionar onmouseover, e este é o nome de um dos eventos que já vimos antes e, em seguida, podemos definir isso igual ao nome da nossa função, que é changeFontSize e, em seguida, adicione as instalações logo depois. Isto irá então executar esta função toda vez que o mouse estiver sobre este texto. Então vamos comentar esta chamada de função para a direita para a parte inferior, salvar e depois para o navegador, olha o nosso texto de tamanho padrão e agora se você passar o mouse sobre o mouse, agora vemos o texto foi aumentado para 34 pixels. Podemos escolher qualquer evento que queremos acionar esta função, como onclick. Vamos mudar onmouseover para ser onclick, recarregar o navegador e, em seguida, se você clicar no texto, a função agora é chamada. Coisas como eventos onclick e mouse são muito comuns e vamos vê-los muito. Há também alguns incomuns que você pode ver na lista antes, como se o usuário tentar copiar algo da página. Vamos adicionar oncopy, e então podemos comentar isso, e então fazer algo para nos mostrar um alerta, e uma mensagem de parar de copiar minhas coisas, assim e depois salvar. Agora, se clicar com o botão direito do mouse e, em seguida, copiar, agora vemos a mensagem que aparece na tela. Corte remova este alerta daqui e restabeleça isso. Podemos até mesmo executar algum código quando a página terminar de carregar com onload. Podemos fazer isso dentro do corpo. Vamos entrar na etiqueta de abertura e depois adicionar onload. aqui em vez de chamar a função, eu só vou aplicar algum JavaScript para executar. Vamos copiar este document.getElementByID, apenas até lá e, em seguida, podemos colar em nosso JavaScript dentro das cotações. Estamos pegando esse elemento de texto. Então vamos mudar o HTML interno para ser a nossa cadeia de texto de alterado. Agora guardamos isso. Agora, assim que a página for carregada, isso substituirá o texto a ser alterado. Este método de manipulação de eventos dentro de um elementos HTML, como fizemos com estes dois exemplos, é chamado manipuladores de eventos em linha, embora este código vai funcionar, é considerado má prática para fazer coisas como esta. É melhor manter o HTML e JavaScript separados, mesmo colocando o JavaScript em um arquivo separado e isso é o que veremos em breve neste curso. vamos em frente e remover os manipuladores de eventos do HTML. Primeiro, os da seção do corpo, especialmente tudo de dentro daqui e também o oncopy daqui, então podemos começar a trabalhar movendo tudo isso para nossa seção de scripts. Vamos começar acessando todos os elementos P aqui e armazená-lo dentro de uma variável. Digamos, var TextElement e set é para, document.querySelector. Vou selecionar nossos elementos P com a tag P. Podemos então anexar um ouvinte de evento a este elemento de texto. Adicionar, TexteElement e, em seguida, .addEventListener. Dentro dos colchetes, este ouvinte de evento leva em dois valores. Primeiro é o tipo de eventos que queremos ouvir. Digamos que “clique”. Este nome é geralmente como aqueles que já olhamos antes sem a palavra em antes dele, então em vez de onclick, que usamos antes, basta usar clique. Também onmouseover seria apenas mouseover. O segundo valor ou o segundo parâmetro separado por vírgula, é a função que queremos executar. Vamos adicionar nossa função anônima aqui, os parênteses e, em seguida, abrir e fechar as chaves. Coloque um ponto-e-vírgula no final. Dentro deste corpo de função, podemos então executar algum código. Vamos copiar esta seção de antes e, de fato, podemos remover essa função, não precisamos mais disso. Vamos remover tudo isso. Então, dentro desta função anônima, podemos então colar isso em, e lembre-se que este é o que muda o tamanho da fonte para ser 34 pixels. Guarde isso e recarregue, aí está o nosso texto. Uma vez que clicamos nisso, ele agora aumenta para 34 pixels. lembre-se que esta é uma função anônima porque não podemos dar a esta função um nome, é simplesmente executado quando o evento é acionado. Isso também pode ser encurtado usando a sintaxe da função de seta, que é pesquisada. Se removermos a palavra-chave function e, em seguida, adicionar a seta logo depois, que é igual e, em seguida, o maior símbolo. Verifique se isso está funcionando bem clicando no texto. Usar este ouvinte de evento add também seria útil se você quisesse ouvir todos os elementos P em uma página, em vez de apenas um. Para fazer isso, vamos precisar de loop através de todos eles e vamos cobrir looping na próxima seção, ou se quiséssemos dar a esta função um nome para que pudéssemos reutilizar em outro lugar, podemos cortar daqui e criar uma função separada isso é porque é um pouco menor, então tudo se encaixa em uma linha. Então eu vou ir em frente e copiar desta chave de fechamento aqui até o início desta função parênteses. Na verdade, vamos cortar esses outros lugares, então acima disso podemos criar nossa função. Dê a este um nome de, var changeFontSize, assim como este. Em seguida, podemos definir isso igual à função que foi copiada e espaço isso um pouco. Agora temos a nossa função separada que agora é auto-contido e armazenado no valor do tamanho da fonte de mudança. Agora, em vez de ter isso como o segundo argumento, agora podemos apenas colar neste nome da variável e o código deve funcionar exatamente da mesma forma. Atualizar, clique no texto e a função ainda funciona. Mesmo que agora tenhamos colocado em sua própria variável, isso também significa que agora diferentes partes do nosso código ainda podem executar esta função acessando este nome aqui. Observe que quando chamamos a função aqui, nós não adicionamos as premissas logo depois, assim. Isso ocorre porque nosso [inaudível] executará a função imediatamente. Ele não vai esperar pelo manipulador de eventos primeiro. Vamos apenas adicionar estes em, salvar e atualizar e podemos ver o texto é imediatamente 34 pixels mesmo antes de ter clicado no texto menor. Vamos removê-los agora deste exemplo e dizer isso. É isso, agora para nossa primeira olhada de eventos, eles são realmente úteis e algo que usaremos muito ao trabalhar com JavaScript. Continuaremos olhando para os eventos no próximo vídeo, onde veremos o eventobject. 20. O objeto do evento: Agora você deve ter uma noção do que são os eventos, e o que podemos fazer com eles. Há também algumas informações adicionais que são passadas para o manipulador de eventos, que é chamado de objeto de evento. Esta informação é toda sobre os eventos, tais como: que tipo de evento foi, que elemento foi acionado, e muito mais informações que vamos agora olhar. Se formos até nossos arquivos iniciais para os objetos de eventos, dentro daqui temos nossos textos e praticamente o mesmo exemplo do último vídeo. Temos um EventListener que uma vez clicado, vamos então mudar o FontSize executando esta função aqui. Então, dentro dos parênteses para esta função, que é esta seção aqui, podemos adicionar um parâmetro exatamente como este. Isso pode ser qualquer nome de seu escolhido, mas muitas vezes é chamado de evento ou e para abreviar, porque contém as informações passadas a ele sobre nossos eventos. Você pode pensar nisso como uma variável que contém essa informação, mas que informação é passada para ela? Bem, vamos entrar em nossa função e fazer um registro de console. Podemos dar uma olhada. Console.log o valor de e. Salve isto e, em seguida, abra estes no navegador. Clique com o botão direito do mouse e Inspecionar e, em seguida, entre em nosso Console Com isso agora aberto se acionarmos essa função clicando em nosso texto, veríamos agora algumas informações dentro do Console. Vamos abrir isto e ver o que contém. se rolarmos para baixo, podemos ver que há uma enorme quantidade de informação que é passada para o manipulador de eventos. Principalmente você nunca vai realmente usar, mas podemos ver algumas informações sobre os eventos. Vemos que é um MouseEvents. Vemos em que posição na tela o MouseEvent foi acionado com as coordenadas x e y. Vamos dar uma olhada nessas posições x e y em apenas um momento. Por enquanto, se deslocarmos ainda mais para baixo até o alvo que está aqui, podemos ver que há uma referência ao objeto que enviou os eventos. No nosso caso, são os elementos p com o id de texto. Podemos ver isso melhor se formos para o navegador. Em vez de apenas registrar e, podemos selecionar “e.target” atualizar, acionar nossos eventos. Há o nosso alvo de eventos, que são os elementos p com o id de textos. Podemos usar qualquer parte desta informação dentro do nosso código. Por exemplo, se voltarmos ao Console, faça login nos eventos completos e atualize. Mencionamos antes que temos algumas posições do mouse, que é ClientX e ClientY. Esta é a posição x e y de onde clicamos neste texto. Agora podemos seguir em frente e rastrear a posição do mouse sobre nossos elementos usando estes clientes: X e Y. Voltar para nossa função. Vamos alterar este document.getElementByID de alterar o estilo. Em vez disso, podemos alterar o innerHTML dos elementos p para ser igual ao evento que você acessa com e.clientX, que é o valor x do mouse. Então vamos adicionar um elemento de quebra para adicionar o valor y em uma linha separada, e vamos acessar y com e.clienty. Adicionamos um ponto-e-vírgula no final. Se descermos abaixo da nossa função para o EventListener, vez de ouvir um clique eventos, podemos ouvir os eventos mouseover. Isso fará com que os eventos sejam disparados cada vez que o mouse se move sobre os elementos p, que irá então exibir os valores de x e y. Salve isso e então vá para o navegador, podemos de fato fechar o Console para baixo. Em seguida, cada vez que mover o mouse sobre os elementos p, podemos ver as coordenadas x e y são atualizadas cada vez. É assim que podemos usar os objetos de evento para obter alguma informação extra sobre o evento. Como você pode ver, há muita informação passada para nós que temos acesso. Em seguida, veremos como podemos tornar nosso código mais legível e organizado movendo nosso JavaScript para arquivos separados. 21. Javascript externo: Tudo lá nos arquivos iniciantes do JavaScript, há uma pasta, se você entrar no menu chamado JavaScript externo. Se você abrir esta página HTML do ponto de índice, é o mesmo código no qual terminamos o último vídeo. O que faremos neste vídeo é tirar o JavaScript deste arquivo HTML e colocá-lo em seu próprio arquivo separado. Como o que fizemos anteriormente com CSS. Primeiro precisamos ir para a nossa pasta do projeto e criar um arquivo para adicionar isso com a extensão dot js. Dentro deste arquivo JavaScript externo, clique no novo ícone de arquivo, e podemos chamar isso do que quisermos. Eu quero chamar isso de scripts de ponto js. Em seguida, precisamos cortar o conteúdo do script para índice HTML e, em seguida, colá-lo neste novo arquivo. Volte para o índice e, em seguida, role para baixo até nossa seção de scripts. Vamos fazer isso um pouco menor apenas por agora e então se cortarmos todo o conteúdo de nossos scripts deixando essas duas tags no lugar. Cole isso de volta em nossos scripts dot js arquivo e dar que um salvar. Bom. O JavaScript está agora em seu arquivo separado, para que as coisas funcionem. Ainda precisamos vincular esse arquivo na página de índice usando o atributo de origem. De volta ao índice. Vamos apenas mover as tags de script juntas. Então vamos em frente e adicionar os atributos de origem. Este vai ser um caminho relativo para os nossos scripts dot js arquivo, o arquivo de script, e também esta página de índice estão no mesmo nível de pasta. Podemos simplesmente adicionar scripts dot js. Se salvarmos isso e, em seguida, ir para o navegador, recarregar, e agora nosso código ainda funciona. Cada vez que nos movemos, os elementos dp agora obteriam um valor x e y atualizado para o mouse. Muitas das vantagens de arquivos JavaScript externos são semelhantes aos arquivos CSS externos. Primeiro, temos o HTML separado, CSS e JavaScript, tornando nosso código mais organizado, legível e mantido. Também ter JavaScript separado em seu próprio arquivo nos permitirá usá-lo em vários arquivos HTML. Se deixarmos o JavaScript nos arquivos de script como tínhamos antes, ele só pode ser usado neste único arquivo. Nós também podemos adicionar vários arquivos JavaScript para HTML página dois tudo o que precisamos fazer é adicionar mais tags de script com o atributo fonte para cada arquivo. Em seguida, vamos colocar em prática o que aprendemos nesta seção construindo uma calculadora para converter valores de pixel para eles. 22. Hora da prática: conversor de pixel: Agora é sua chance de colocar em prática o que aprendemos até agora neste curso. Vamos criar uma calculadora que converte valores de pixel para ser em. Lembre-se, em é um tamanho relativo, que é baseado no contêiner pai. Por exemplo, em pixels, se o contêiner pai era 20 pixels e queremos detectar dentro para ser 18 pixels, podemos clicar em converter e, em seguida, quando ele definir o valor para ser 0,9 em's. Tudo o que você precisa para construir esta calculadora, você aprendeu até agora neste curso. Não deve vomitar surpresas e se formos para os arquivos iniciais, e se passarmos para 20, que é a calculadora de pixel para em e se você for para o script.js, temos o cálculo no topo. Para obter o tamanho em, dividimos o tamanho de pixel necessário pelo tamanho de pixel pai e esta é a conversão que você precisará para fazer isso funcionar. Além disso, se formos para a página de índice, você já forneceu todos os estilos e a marcação que você precisará para começar. Tudo o que você precisa fazer estará dentro do arquivo JavaScript. Podemos ir em frente e focar em adicionar o JavaScript. Pode parecer um pouco complexo, mas tudo o que precisamos fazer, é obter esse cálculo, pegar os valores para todos os pais, e também o tamanho necessário, e executar esse cálculo quando este botão é clicado. Boa sorte com isso, dê uma boa chance, e eu vou te ver no próximo vídeo onde vamos passar pela minha solução. 23. Solução: conversor de pixel: Bem-vinda de volta. Espero que você tenha conseguido fazer sua calculadora funcionar, ou pelo menos dar uma boa chance. Agora vou mostrar a vocês como fiz a minha versão. Talvez seja uma abordagem diferente de como você fez a sua, mas enquanto estiver funcionando, está tudo bem. Geralmente há mais de uma maneira de fazer as coisas. Todos os CSS e HTML, como você pode ver aqui, foram atendidos para nós nos arquivos iniciais. Tudo o que precisamos fazer é ir para o script.js e começar a trabalhar dentro daqui. Vamos em frente e criar uma função para executar esse cálculo. Eu vou chamar meu cálculo, e definir isso para ar função. Dentro daqui eu vou começar por agarrar os valores dos pais e exigidos. Essa é esta caixa aqui e esta aqui, e depois armazená-los no lado das variáveis. A variável do valor pai. Distribua documents.getElementsByID e o Id que queremos pegar. Se dermos uma olhada na página de índice, há essa entrada pai aqui com o ID se pais. Em seguida, a segunda entrada tem han ID de necessário e vamos usar isso em apenas um momento. Vamos adicionar pais aqui dentro. Podemos então pegar o valor com valor de pontos, e então poderíamos fazer o mesmo para o valor necessário. var obrigatório é igual a documents.getElementById. Lembre-se do Id que olhamos antes era necessário, e então novamente podemos pegar o valor com valor de ponto. Agora estamos pegando os dois valores dos dois campos de entrada. A terceira variável que eu quero criar é para a saída, e este é o resultado que você vê aqui. Este é o elemento p que vai obter os resultados cada vez que realizamos o cálculo. Vamos cortar isso com o Id de resultados e, em seguida, armazená-lo dentro de uma variável. Var resultados é igual a document.getSelementByID, e os elementos terão resultados, e podemos apenas armazenar isso por enquanto. Agora queremos executar esse cálculo. Cada vez que o usuário clica neste botão de conversão, se voltarmos para o índice de html, este botão é apenas aqui. Podemos pegar este botão com um seletor de consulta e, em seguida, adicionar um ouvinte de evento para cada clique, para, em seguida, ir em frente e executar este cálculo. O botão será instalado dentro de uma variável chamada btn e, em seguida, document.QuerySelector. Pegue o nosso botão e, em seguida, pressione btn e podemos ir em frente e adicionar o EventListener. Dentro dos colchetes, podemos adicionar dois valores. O primeiro é clicar e este é o tipo de evento que você deseja ouvir. Uma vez que o botão está sendo clicado, então queremos ir em frente e executar esta função aqui. Vamos adicionar isso como nosso segundo valor para verificar isso está funcionando bem, podemos então fazer um log de console dentro da função, e então podemos registrar nossos dois valores do valor pai e o valor necessário. Status. Verifique essas linhas, ok, então parentValue e, em seguida, espaço vazio e, em seguida, o valor necessário. Salve isso no navegador e abra o console. Vamos apenas clicar em Converter primeiro, e não devemos ver nada dentro do console porque estamos produzindo os valores dessas duas entradas. Vamos adicionar algum ajuste aqui dentro, 20 e 16 convertidos, e então lá vamos nós. Há os nossos dois valores lá dentro. A maneira simples de ir em frente e atualizar esse resultado aqui é apenas pegar essa variável de resultado aqui e definir o innerHTML para ser os resultados deste cálculo aqui, que é um RequiredValue dividido pelo parentValue. Vamos dar uma chance a isso. Se dissermos resultados ponto innerHTML é igual ao valor necessário dividido pelo parentValue do navegador, e isso é valores em aqui converte e vamos obter o valor de 0,6 ele vai definir estes para ambos 20, devemos obter o valor de 1 M. Esta é uma maneira simples de fazer as coisas. No entanto, se atualizarmos e apenas adicionar um valor no lugar clique converte, vemos que recebemos a mensagem de Infinity, ou se apenas clicar em Converter sem quaisquer valores no lugar, não teremos um número. Queremos proteger contra quaisquer campos vazios que resultem nessas áreas. Podemos fazer isso adicionando um if else instruções dentro deste cálculo. Abaixo disso, podemos dizer se podemos adicionar um ponto de exclamação e, em seguida, ParentValue. Se o ParentValue estiver vazio e lembre-se que o pipe é para todos ou o valor necessário está vazio. Então, cada um desses campos está vazio, então gostaria de criar um alerta para o usuário apenas com uma mensagem simples de 'por favor preencha todos os campos. ' Assim como isso, e então nós também podemos adicionar uma outra declaração. Portanto, esta outra declaração será executada se todos os campos tiverem sido respondidos. Se for esse o caso, queremos obter esses resultados. HTML e vá em frente e execute este código e vamos nos dar uma chance no navegador. Agora, se clicar em convertidos, você verá a mensagem de 'por favor preencha todos os campos'. Vamos tentar um destes. Ainda receberá a mesma mensagem, e então se tentarmos o cálculo, tudo parece funcionar bem. Ok, então foi assim que eu terminei este projeto. Lembre-se se o seu parecer um pouco diferente, enquanto estiver funcionando, tudo está bem. Este é agora o fim da seção tudo sobre manipulações, funções e eventos DOM (Document Object Model). Se algumas coisas ainda estão confusas para você, não se preocupe muito. Todo mundo aprende a diferentes passos e há muito para absorver aqui se você é novo nisso. Lembre-se de que muito do que aprendemos nesta seção será repetido muitas vezes mais à medida que você progride neste curso. Você ainda terá muito mais prática ou usando essas técnicas. Verei vocês agora na próxima seção onde cobriremos loops, matrizes e objetos. 24. Matrizes do Javascript: Vamos começar esta nova seção olhando para matrizes JavaScript. Já tivemos muita prática escrevendo variáveis que, como sabemos, armazenam um único valor. Arrays também armazenar valores também, assim como uma variável, mas podemos adicionar mais de um. Para o arquivo inicial das matrizes, que está aqui. Podemos iniciar uma matriz como uma variável normal. Até o script, podemos usar a palavra-chave var e, em seguida, definir um nome, que você deseja definir para a nossa matriz. Assim como uma variável, também podemos definir nossos valores, mas podemos definir mais de um separado por vírgulas dentro dos colchetes. Digamos um corte, uma vírgula, uma corda de cachorro, uma vírgula e vamos para um tigre com um ponto-e-vírgula no final. Agora vamos emitir isso com um alerta. Digamos alerta. Dentro deste alerta, podemos alertar nosso grupo de animais. Digamos que nosso alerta dentro do navegador recarregue. Há os nossos três itens que estão dentro da nossa matriz. Ou podemos enviar isso para um elemento, assim como já vimos. Se formos para o nosso HTML, vamos criar uma div com um ID igual a animais, que podem simplesmente deixar o conteúdo vazio por enquanto e depois ir para o nosso script. Em seguida, podemos pegar isso com get elemento por ID. O ID era animais e, em seguida, podemos definir o HTML interno como vimos em muitas vezes anteriormente e definir isso para a nossa matriz de animais. Salve, feche isso e atualize e agora veremos nosso array na tela. Usamos apenas strings dentro deste array, mas também podemos conter qualquer outro tipo de dados, como números ou booleanos. Estes vão exatamente o mesmo, separados por uma vírgula. Nós adicionamos nossos números, em vez de citações, e nós também podemos definir nossos valores booleanos de verdadeiro ou falso. Salve isso, e também vemos esses resultados como esperado. Exibição em nossa matriz de animais, assim como este, vamos exibir todos os itens dentro de nossa matriz. Mas se quiséssemos apenas selecionar um em particular, poderíamos referenciá-lo por sua posição no array. Assim como vimos anteriormente, podemos selecionar um número de índice com os colchetes e, em seguida, adicionar nosso volume de índice. Lembre-se de matrizes, assim como vimos anteriormente, começam na posição zero. Poupe isso e agora devemos obter o primeiro fonema de corte, e é claro que podemos mudar isso para qualquer número. Se quiséssemos Tiger iria zero, um, e depois dois. Defina isso para ser dois, e há tigre dentro do navegador. Isso é semelhante ao que olhamos anteriormente quando olhamos para consulta selecionar todos e adicionamos esses colchetes depois dele. Junto com o acesso aos valores de uma matriz. Também podemos usar a propriedade [inaudível] para ver quantos valores ela contém. Para o nosso guião, deixe os colchetes. Então podemos dizer animals.length, e nossa matriz tem cinco valores diferentes. Devemos ver o valor de cinco dentro do navegador. Bom. É assim que podemos usar matrizes JavaScript. Vamos continuar com matrizes no próximo vídeo, onde vamos olhar para alguns métodos de matriz embutida. 25. Métodos de matrizes: Em nosso arquivo inicial para este vídeo, que é o número 22, métodos de matriz, temos uma matriz de aparência semelhante de animais para o último vídeo, que é apenas aqui. Nós, então, exibi-los em uma div com o id de animais que trouxeram isso para obter elementos por ID é para baixo na parte inferior desta vez, que você pode ver aqui. Isso ocorre porque antes que possamos começar a exibir esta matriz, há alguns métodos internos que podemos usar chamados métodos de matriz. Há muitos desses métodos que podemos usar. Aqui vamos olhar para alguns dos mais comuns. Inclua como adicionar e remover valores de uma matriz usando JavaScript, começando com shift. Se rolar para cima para o primeiro comentário que é apenas ouvir, deslocamento irá remover o primeiro elemento da nossa matriz, que no nosso caso é gato. Tudo o que precisamos fazer é acessar o Array pelo seu nome e depois dizer “dot shift”. É simples assim, agora se abrirmos este Array Methods dentro do navegador, agora vemos o nosso primeiro valor de cat agora é removido. Este é o nosso novo retorno Array para, agora só temos nossos quatro valores. Também podemos armazenar este item removido em uma variável se quisermos. Tudo o que precisamos fazer é atribuir uma variável como animal1 e definir isso igual aos nossos valores de animals.shift. Então podemos verificar isso dentro do console. Então o log do console, e isso é saída do valor de animal um, salvar, inspecionar dentro do console. Como esperado, temos o nosso primeiro valor de gatos. Em vez disso, se quisermos adicionar itens ao início da matriz, podemos usar unshift para adicionar quantos itens quisermos. Slides comenta essas duas linhas aqui e, em seguida, mova para baixo para unshift. Aqui podemos começar com a matriz de animais, assim como antes, e depois selecionar o método unshift. vez seguido pelos colchetes e um ponto e vírgula, e então como uma corda, eu vou adicionar alguns novos animais, como o leopardo, separados por uma vírgula, um segundo valor de pássaro. Vamos ver se o nosso Leopardo e pássaro está agora dentro do navegador. Isso vai agora tem leopardo e pássaro empurrado para o início da nossa matriz. Este novo array é devolvido para nós com estas novas edições, o shift e unshift, um como um par. Ambos modificam o início de uma matriz. A próxima ferramenta, chamada Push and Pop, modifica o fim de uma matriz. Vamos começar com push, que irá adicionar um ou mais valores ao final desta matriz. Vamos comentar esta linha aqui. Mova para baixo para empurrar. Começando com nossos animais Array, podemos usar o método de push de pontos. Então aqui dentro podemos adicionar mais alguns valores. Vamos adicionar o nosso leopardo e, em seguida, o nosso pássaro. Desta vez, até o final de uma matriz, atualize, portanto, há os cinco primeiros itens de antes e, em seguida, os dois últimos empurrados para o fim da matriz. Em seguida, temos pop, o que é bastante simples. Vamos chamar o método pop para remover o último item da matriz. Comente esta linha aqui e abaixo para a seção pop aqui, isso é muito simples, isso é exatamente como quando usamos animals.shift, mas desta vez usamos animals.pop. Nós não adicionamos nenhum valor dentro dos colchetes porque estamos simplesmente removendo o último item, salvamos isso, recarregamos e nosso último valor é removido da matriz original. Esses quatro métodos são ótimos, mas eles estão limitados a trabalhar apenas com o início ou o fim de uma matriz. Para remover ou adicionar itens em diferentes posições, podemos usar o método de emenda. Certifique-se de que todos os métodos que acabamos de olhar são comentados, e retornamos ao Array original com nossos cinco itens, então podemos chamar animals.splice. Apenas aqui, você vê o método de emenda veio com os colchetes e o ponto-e-vírgula. Para começar a remover itens, precisamos adicionar dois valores dentro desses colchetes ou parênteses. Digamos que queríamos remover este tigre, que está aqui. Lembre-se, Arrays começam na posição zero, significando que o tigre estaria na posição de índice dois. Nosso primeiro valor é dois, então certifique-se de que está escrito corretamente. Junte-se assim. Então adicionamos nossa primeira posição, que é duas. Se você tiver apenas um valor como este, todos os itens após o número dois também serão excluídos. Simplesmente assim. Tudo do tigre em diante é removido, ou podemos adicionar um segundo valor, que é um número de itens para remover. A configuração precisa ser uma, só removeremos nosso volume de tigre, deixando nossa girafa e leão no final. É assim que podemos remover itens. Mas se, em vez disso, quiséssemos substituir este item, então se quiséssemos substituir o leão, podemos adicionar alguns valores depois disso. Separados por uma vírgula, vamos substituir um leão por um peixe. Recarregar, e lá vamos nós. Ainda temos o nosso gato original, cão, girafa, leão, ambos os peixes agora substituem o nosso valor de tigre. Nós também podemos adicionar vários itens em dois, tudo o que precisamos fazer é separá-los por uma vírgula. Vamos pegar um macaco desta vez, atualizar, e temos o nosso acesso a itens no meio. Vamos encerrar este vídeo com mais um, que é como reverter o Array, que retornou em ordem inversa. Tudo o que precisamos fazer é descer para uma seção inversa e selecionar os animais.colchetes inversos e ponto-e-vírgula. Lembre-se de antes de nosso leão estar no final e o gato está no início. Se atualizarmos, isso será trocado. Há também alguns métodos mais Array também que podem fazer várias coisas, e vamos cobrir mais destes em breve. Se você estiver interessado em uma lista completa, basta ir para o Google e, em seguida, fazer uma pesquisa para Mozilla Array Methods. É a resposta, e deve ser o primeiro resultado que se sustenta. Selecione isso e, em seguida, podemos rolar para baixo até a seção de método, que é um pouco para baixo. Vamos continuar, há nossas propriedades que olhamos para Array.Length. Aqui estão os nossos métodos também, sinta-se livre para olhar através de todos esses métodos diferentes e descobrir como eles funcionam. Nós olhamos para alguns desses até agora, então apenas, emenda, mude, desligue, empurre e reverta. É isso agora para este vídeo, e eu vou te ver na próxima vez. 26. Percorrendo matrizes: forEach: Nos próximos vídeos, vamos nos concentrar em loop. Looping torna a repetição de tarefas realmente fácil. Neste vídeo, vamos estar olhando para o para cada loop. O loop FoReach executará uma função para cada item na matriz. Primeiro, vamos ver nossos arquivos iniciais, então vamos para o número 23. Looping através de arrays fecha. Aqui temos um motor de arranque básico com a nossa div vazia e, em seguida, a matriz dos nossos animais. Primeiro de tudo, vamos dar uma olhada no problema, se quiséssemos fazer alguma coisa com esses itens de array, precisaríamos selecionar cada item individualmente. Vamos fazer um registro de console, vamos registrar no console o valor dos animais. Eu estava colchetes para selecionar nosso número índice de zero se quiséssemos os gatos. Então digamos que ToupperCase, seguido pelos colchetes e um ponto-e-vírgula no final [inaudível] é um método JavaScript para transformar uma string em maiúsculas ou letras maiúsculas para minúsculas também está disponível para. Agora, se quisermos selecionar o nosso segundo item dois, vamos copiar este e colar satisfazer o desgaste. Em seguida, vamos precisar fazer este item forEach dentro da matriz. Isso levaria muito tempo e um monte de código repetitivo. Vamos para o navegador e para a atualização do console. A NASA vai em maiúsculas gato e cão, então, é claro que isso precisaria de muita repetição para fazer isso para toda a nossa gama. Imagine se tivéssemos centenas de valores na matriz que precisamos ser um monte de código repetitivo e isso não é ótimo. Este é o lugar onde o para cada loop entra. ForEach, vamos executar uma função forEach elemento matriz, para dizer que foi um monte de repetição. Vamos passar para o nosso código remover os logs do console, e ver como isso parece. Primeiro selecionamos nossa matriz de animais, e então usamos o ponto ForEach. Isto é também se comunica com uma maiúscula E. Bracket ponto-e-vírgula irá então passar em uma função que você deseja executar elemento de matriz FoREach dentro destes colchetes ou parênteses. Vamos criar uma função padrão, os colchetes e, em seguida, um conjunto de chaves. É entrar e, em seguida, dentro dessas chaves nós podemos executar nosso código de função. Seria então passar no nome de nossa escolha, que você deseja dar a cada elemento de matriz individual. Vamos chamar cada item individual simplesmente animal agora se quisermos fazer algo com cada valor de matriz, podemos usar esta variável animal. Digamos que alerte nosso animal, ponto-e-vírgula atualize o navegador. Há gatos, cão, está tudo bem de novo, tigre e isso agora está passando por cada item na matriz. Esta variável animal também pode ser usada de qualquer forma. Poderíamos adicionar um texto extra. Digamos que uma string de animal, animal tipo string mais próxima e, em seguida, adicionar nossa variável no final. Atualize o navegador e agora veja o tipo animal de gato, cão, tigre, girafa e leão. Ou mesmo voltando para o nosso exemplo em maiúsculas, poderíamos usar a variável animal e, em seguida, dizer animal dot ToupperCase. Os colchetes depois são atualizados agora veem nossos valores em maiúsculas dentro dos alertas. Podemos empurrar todos esses novos itens em maiúsculas para um novo array dois. Primeiro, vamos criar uma nova matriz vazia assim apenas animais de pelúcia que dizem var upperCaseNames. Nós não precisamos adicionar quaisquer valores que podemos simplesmente adicionar os colchetes para criar uma matriz vazia. Sabemos como empurrar itens para uma matriz, usamos o método de push de pontos, que vimos no último vídeo. Dentro de nosso loop, em vez de nosso alerta, podemos dizer UpperCaseNames, que é nossa matriz vazia apenas aqui. Eles vão empurrar. Então, dentro do suporte, o animal quer empurrar instalado dentro desta variável animal. Animal, e vamos definir estes para serem maiúsculas para que toquem maiúsculas e minúsculas os parênteses. Desta vez, em vez de saídas um leste do console. Vamos fazer o nosso familiar getElementByID, que é a div deste animal aqui. Então podemos empurrar nossa nova matriz para esta div. Digamos documento ponto getSelementsByID. ID de todos os animais, podemos definir o ponto HTML para ser igual ao nosso novo array de UpperCaseNames. Percorra o ponto e vírgula no final do navegador. Há uma nova matriz de valores maiúsculos. Outra característica do FoREach é a capacidade acessar cada item por deposição ou o número do índice. Primeiro, adicionamos um segundo nome de variável de nossa escolha dentro da função. Eu quero chamar meu índice tão separado por vírgula, o nome da variável do índice. Em seguida, podemos usar este índice no lado da nossa função então vamos produzir o índice antes do nome do animal e juntar-se a nós em salvar e, em seguida, atualizar. Agora temos a posição de índice, bem como o valor de zero, um, dois, três e quatro. Podemos construir este novo item de matriz da forma que quisermos. Por exemplo, se você quiser adicionar um espaço entre o índice e o nome do animal, podemos fazer isso com uma string, digamos index plus e você poderia ter espaço ou até mesmo um traço. Em seguida, também se juntou em nosso animal na atualização final e lá vamos nós. Finalmente, números de índice maiores que zero, então se quiséssemos que isso começasse um, poderíamos simplesmente adicionar mais um no final, digamos índice mais um. Lá vamos nós então agora o nosso número de índice começa a partir de um, o que provavelmente é mais realista quando a saída para o usuário. Agora vamos passar para olhar para uma nova maneira de looping através de arrays e isso é chamado de mapa. 27. Percorrendo matrizes: map: Vamos começar indo para o nosso motor de arranque vazio, que desta vez é o número 24. Este foi um exemplo bastante semelhante ao que vimos no último vídeo. Temos nossa div, que está vazia, então temos nossa matriz de animais. Também temos uma segunda matriz, que é nossos animais definido para UpperCase, que é criado usando este loop FoEach. Agora vamos olhar para outra maneira de looping através de arrays, que é chamado de mapa. Primeiro, eu quero mostrar rapidamente algo que irá ajudá-lo a ver a diferença entre mapa e FoReach. Se formos em frente e remover a matriz UpperCaseName e lugar, atribuir o resultado do FoReach a uma variável. Digamos var upperCaseNames e definir isso para ser nossos animals.foreach. Agora vamos simplificar este exemplo removendo o número do índice. Remova o segundo valor de dentro daqui, remova o conteúdo desta função. Em seguida, podemos simplificar esta função simplesmente retornando os animais array.ToupperCase. Simplesmente assim. Agora tudo o que estamos fazendo é fazer um loop através de nossa matriz original, executando uma função que irá retornar nossos animais em UpperCase, e então armazená-los dentro desta variável. Isso retorna diamante termina a execução da função e, em seguida, retorna o novo valor. Agora nós rolamos através, podemos ver este UpperCaseNames aqui, que foi até a tela. Agora, consulte esta variável apenas aqui. Se salvarmos isso e, em seguida, recarregar o navegador, obtemos o valor de indefinido. Segure isso por enquanto e falaremos sobre isso mais em um momento. No entanto, se alterarmos o ForEach, desta vez para ser mapeado, então remova a palavra-chave ForEach daqui, altere isso para ser.map. Desta vez, se atualizarmos, agora vemos os valores da nossa matriz em UpperCase. Esta é uma diferença chave entre forEach um mapa, apenas usando mapa irá retornar uma nova matriz. Basicamente, ForEach irá loop todos os itens e fazer algo com eles, como torná-los maiúsculas e empurrá-los para um novo array, ou até mesmo um banco de dados. Mapa também irá percorrer os itens e fazer algo com eles, mas também retorna uma nova matriz com os itens transformados, que terá acesso a armazenando-os dentro desta variável. Assim como um pensamento final, nós também poderíamos tornar esta função mais curta usando a função esc auto. Logo após.map, podemos remover esta palavra-chave função aqui e manter o nosso animal e usar a seta. Simplesmente assim. Atualize e nosso array ainda funciona. Lembre-se também, se tivermos apenas um parâmetro, que temos aqui, podemos até remover os parênteses e torná-lo ainda mais curto. Recarregue o navegador e tudo ainda funciona bem. Espero que isso faça sentido para a lei dos propósitos, mapa e FoREACH são intercambiáveis. Você precisará usar o mapa quando quiser uma nova matriz retornada. 28. Hora da prática: matrizes: Antes de passarmos a olhar para mais tipos de loops, eu acho que devemos tomar um fôlego e ter certeza de que entendemos o que cobrimos até agora com arrays e também fazer loop através deles. Nos arquivos do Stata, então abra a barra lateral e vá para o número 25 que é hora de praticar e então vamos abrir isso. Vamos copiar o caminho e, em seguida, abrir isso dentro do navegador. No arquivo Stata, adicionei algumas instruções para um pequeno desafio para lhe dar um pouco mais de prática. Nós temos um DIV vazio com o ID de personagens e eu também forneci uma série de nomes de personagens de desenhos animados que eu gostaria que você classificar em ordem alfabética e, em seguida, armazenar dentro de uma nova matriz. Há também uma pequena dica no topo aqui dentro dos comentários. Podemos usar o método de classificação de pontos para classificar a matriz, em seguida, a segunda parte é usar o mapa de pontos para percorrer esta nova matriz e adicionar o texto do nome antes de cada caractere. Eles vão se parecer com os comentários aqui. O texto do nome e, em seguida, a string de Bugs Bunny da matriz e, em seguida, nomear Duffy Duck, e assim por diante para cada item dentro desta matriz. Então, finalmente, vou colocar esses valores dentro deste DIV vazio no topo. Essa é uma ótima chance de reforçar o que cobrimos até agora, mas se você estiver lutando para fazer isso funcionar, não se preocupe, cobriremos a solução no próximo vídeo. 29. Solução: matrizes: Bem-vinda de volta. Espero que este desafio tenha sido algo que tenha sido capaz de completar sozinho. Se não, vou passar por uma maneira de fazer isso. Vamos para os nossos iniciantes e vamos rolar para baixo para o nosso roteiro. Vamos para o número 1 primeiro, que é organizar elementos em ordem alfabética, e depois armazenar dentro de uma nova variável. Vamos descer e usar este método de classificação de pontos aqui. Digamos que caracteres, que é o nosso nome original.sort. Então precisamos armazenar isso dentro de uma nova variável, modo que é atribuir, o nome da variável de classificação é caracteres. O nome depende de você. Vamos tentar isso no navegador. Fatores para um console.log para a nossa matriz de caracteres classificados. Refresque. Abra o console. Abra a matriz, e lá está a nossa matriz, que retornaria agora em ordem alfabética. Podemos ir em frente e remover este registro do console e, em seguida, passar para o número 2. Precisamos retornar uma nova matriz com cada elemento que tem o prefixo do nome. Precisamos adicionar essa string de nome antes das saídas de cada valor. Para fazer isso, eu vou usar a função de mapa, que nós olhamos recentemente. Vamos acessar nossos caracteres classificados, que é nossa matriz de nossos nomes de caracteres em ordem alfabética. Então podemos chamar. Map. Então podemos passar em uma função. Eu vou usar a função de seta ES6 e cria uma variável chamada caractere para cada item dentro da matriz. Cria nossa função de seta, e dentro de nossa função, e nós vamos retornar, em primeiro lugar, a string. O texto do nome, que você tem aqui, digamos nome, dois pontos, então o nome do nosso caractere individual, que é armazenado dentro desta variável. Está bem. Agora, porque estamos retornando a string, agora precisamos armazenar isso dentro da variável. Então vamos dizer var e vamos dizer nomes de classificação e definir isso para a nossa função. Então agora temos estes armazenados dentro de uma variável. Agora podemos todos colocar estes o navegador usando esta idéia de caracteres. Vamos pegar essa div vazia com um document.getElementById, que tem o ID de caracteres. Defina o ponto innerHTML, para ser igual a esta variável aqui, de SortNames, ponto-e-vírgula nas extremidades. Feche o console, e lá vamos nós. Agora, há todas as nossas cordas de Nome: Bugs Bunny, Nome: Patolino, Jessica Rabbit e Roger Rabbit. Agora temos o prefixo do nome como uma string, e estes também estão em ordem alfabética. Se conseguires fazer isto, óptimo. Caso contrário, considere uma experiência de aprendizagem. Em seguida, vamos dar uma olhada em outro tipo de loop, que é o loop for. 30. Loop “for”: Nos próximos vídeos, vamos olhar para alguns tipos diferentes de loops. Os loops que analisamos anteriormente destinam-se a ser usados com matrizes. No entanto, o loop For and while, que vamos olhar é um pouco mais geral e não exclusivo para arrays. Digamos que quiséssemos pegar um desses personagens e adicioná-lo à lista desordenada. Vamos para os dados. Tenha a nossa lista vazia ou não ordenada aqui. Nossa variedade de personagens, como antes. Se quiséssemos adicionar esses caracteres a esta UL vazia. Para fazer isso, precisamos de loop através de cada item dentro desta matriz em tags li e, em seguida, colocá-los dentro lista desordenada. Primeiro, podemos criar uma variável vazia para armazenar esses nomes de caracteres com as tags li. Digamos que sobre os caracteres, crie uma variável chamada item e defina isso para ser uma string vazia. Se fôssemos fazer isso manualmente sem usar um loop, precisamos fazer algo assim. Vamos pegar nosso item vazio, que é essa variável aqui, e então usar mais igual. Mais igual irá adicionar o valor à direita para este item à esquerda. Digamos que os caracteres, que é a nossa matriz aqui, e então a posição zero. Isso atribuiria nosso valor Roger Rabbit, que está aqui, para nossa variável de item. Poderíamos então adicionar isso a uma nova linha adicionando uma tag break e, em seguida, um ponto e vírgula no final. Se copiarmos isso e adicionarmos o mesmo três vezes mais. Novamente, manualmente precisamos fazer um, dois e três. Em seguida, vamos adicionar esses itens a esta lista não ordenada com um document.getElementById. Quer faltar a idéia de caracteres e, em seguida, definir o HTML interno para ser igual ao nosso item. Se dissermos isso e depois recarregar o navegador, bom. Nossos itens de matriz estão agora na página, mas desta forma não é ideal porque você pode ter centenas de itens dentro da matriz. Isso significaria muita repetição. Precisaria repetir essas linhas várias vezes para cada item na matriz. Este é um problema no qual um loop poderia resolver para nós. Criamos um loop for assim. Vamos adicionar a palavra-chave for, os parênteses e, em seguida, abrir e fechar as chaves dentro desses parênteses aqui. O loop for leva em três instruções. Primeiro é o que é chamado de inicializador. Digamos que é o nosso valor inicial de i ser igual a zero com o ponto e vírgula no final. Aqui podemos definir uma variável com nosso valor inicial é comum para ver esta variável chamada i, que significa incremento. Isso ocorre porque isso é incrementado com cada loop após o ponto e vírgula. A segunda é a condição. O loop continuará enquanto essa condição for verdadeira. Queremos manter loop para o comprimento dos caracteres dentro desta matriz. Podemos dizer enquanto i é menor do que o comprimento do ponto de caracteres, ponto-e-vírgula no final. Em terceiro lugar, dizemos como queremos aumentar o valor de i com cada loop. Se dissermos i++, isso aumentará o valor em um a cada vez. O primeiro loop, i começa com o valor de zero. Então, após o segundo loop, eu serei um o terceiro loop eu serei dois, e assim por diante. Então, assim como uma função, podemos adicionar o código que queremos executar entre as chaves. Este código é repetido para cada loop, ou no nosso caso, ele será repetido para cada item dentro da matriz. Se isso é confuso, vamos registrar o valor de i para ver o que está acontecendo. console registra o valor de i, abra para o navegador. Abra a nossa consola. Certo, temos zero, um, dois e três. Lembre-se que inicializamos I para ser zero. Este é o valor inicial. Temos, então, quatro itens dentro da matriz. Existem quatro valores diferentes aqui. Estes quatro valores de zero a três também devem parecer familiares. É o mesmo que fizemos logo no início. Temos nossos valores de zero a três como nossas posições de índice dentro dos colchetes. Ao invés de ter essas quatro linhas de código, podemos simplesmente copiar uma dessas linhas. Em vez do log do console, agora podemos adicioná-lo dentro do nosso loop for. Apague essas quatro linhas, não precisamos mais disso. Vamos usar isso com o nosso loop agora. Então o valor codificado de zero agora pode ser substituído pelo valor de i, que como sabemos, é zero, um, dois e três e assim por diante. Agora, se salvarmos isso e depois recarregar, ainda temos os mesmos quatro nomes na tela aqui, mas desta vez estamos usando o loop for com muito menos código. Isso é bom porque isso será repetido enquanto tivermos itens na matriz. Por exemplo, se fôssemos adicionar qualquer novo valor aqui, então isso deve dizer, “Olá”, lá dentro. Isso também será adicionado ao final do array. Vou só remover isto por enquanto. Uma vez que o contêiner de caracteres é uma lista não ordenada, que é apenas aqui, podemos melhorar este loop envolvendo cada item dentro das tags de item da lista. Pouco antes dos personagens. Vamos outra cadeia de li o símbolo mais. Então, logo no final, mude nossa tag de quebra para ser nosso item de lista de fechamento. dar que um salvar, recarregar, agora vemos que este é um item de lista porque temos as balas no lado esquerdo. Se também clicar com o botão direito do mouse e inspecionar, Clique no inspetor e escolha qualquer um desses itens da lista. Agora podemos ver na tela que temos nossa lista não ordenada e, em seguida, ao lado dentro temos nossos quatro itens de lista, assim como HTML padrão. Se você se lembrar de volta no vídeo de manipulação DOM, nós olhamos para seletor de consulta todos. Se voltarmos aos nossos arquivos iniciais. Se você rolar até o número 10, que é manipulação DOM, vamos abrir rapidamente a página de índice. Na parte inferior, tivemos consulta, selecione tudo, onde selecionamos nossas duas imagens pela posição do índice. Lembre-se que dissemos que podemos acessar todas as nossas imagens por este número de índice, mas isso também não é ideal porque estamos repetindo código. Em vez de duplicar código como este, estas são as coisas para as quais um loop for seria útil. Se fecharmos isso e voltarmos para o nosso arquivo de iniciação de loop, que está aqui embaixo, eu forneci duas imagens diferentes dentro desta pasta. Podemos ir em frente e adicionar isso agora. Feche a barra lateral. Se formos para nossas listas não ordenadas no topo dentro do HTML, vamos adicionar uma imagem. Primeiro de tudo com a fonte de bugs coelho, que tem a extensão PNG ponto. Em seguida, a nossa segunda imagem, desta vez com a fonte de duck.PNG daffy. Feche isso. Agora tenho as nossas duas imagens. Eu vou ir em frente e armazenar essas referências dentro de uma variável chamada imagens. Até ao nosso guião. Vamos para a direita para baixo e vamos selecionar uma variável chamada imagens. Defina como document.query, selecione all e, em seguida, pegue todas as imagens com a tag IMG. Então podemos usar o loop novamente, fazer o que quisermos com essas imagens. Vou pegar o nome de cada um desses arquivos de imagem na tela. Logo abaixo da nossa variável de imagens. Vamos criar um novo for-loop. Construa isso como fizemos antes. Então podemos adicionar nossos três valores. Primeiro de tudo, vamos definir nosso inicializador, i vai ser igual a zero; vamos executar esse loop enquanto i é menor que imagens, que é nossa variável aqui.length. Isso terá dois elementos de comprimento porque você tem dois elementos de imagem diferentes na tela. Isso será executado duas vezes o ponto e vírgula no final. Então vamos incrementar este em cada loop. Agora vamos verificar as saídas com um registro do console. O valor que queremos exibir são as imagens. Nossa variável de imagens aqui, dentro dos colchetes, podemos adicionar i. Isto irá acessar a primeira imagem no primeiro loop. Então, no segundo loop, acessaremos a segunda imagem porque eu serei igual a um. Primeiro vamos verificar isso no navegador. Vá para a consola. Há nossas duas imagens que acabamos de passar. Se você quisesse pegar o nome da fonte, poderíamos usar o.getattributes. Então, dentro dos colchetes, o atributo que queremos pegar é a fonte. Agora volte para o navegador. Agora obtemos o nome do atributo de origem para cada imagem. Novamente, se tivesse muitas imagens diferentes, loop seria realmente útil para algo assim. Loops pode realmente nos poupar muito tempo ao executar tarefas repetitivas. É assim que funciona um loop for. Em seguida, vamos olhar para o loop while. 31. Loop “while”: Dentro do nosso loop while inicia o arquivo. Temos o mesmo exemplo que vimos no último vídeo com o loop for. Temos as nossas imagens. Temos uma lista desordenada, temos uma matriz de personagens e então estamos empurrando nossos personagens para esta div vazia. Então temos nossas duas imagens logo abaixo. Este para o loop que olhamos antes, continuará a ser executado enquanto esta condição for verdadeira, que é apenas aqui. Enquanto os itens do Larry dentro da matriz, isso vai continuar funcionando. Um loop while, que vamos olhar agora, faz um trabalho semelhante. Mas desta vez um loop while é executado, enquanto uma condição é avaliada como true. Podemos modificar isso para ser um loop selvagem mudando a queda para ser enquanto. Também podemos remover a primeira e também a terceira declaração dos colchetes. Então remova esses dados e i plus, plus. Isso ocorre porque um loop selvagem só recebe a condição dentro daqui, e ele continuará funcionando enquanto essa condição for verdadeira. Ainda precisamos inicializar o primeiro valor de i, e podemos fazer isso fora do loop. Então, logo acima do loop, digamos var i é igual a zero. Finalmente, podemos incrementar i em cada loop, bem na parte inferior, selecione dizer i plus, plus, e nos dar salvar. Então, recapitulando, esse loop começará em zero, o que você sugere aqui. Ele irá então adicionar o primeiro item de matriz, que é esta primeira linha aqui. E depois que for feito, AC irá então incrementar i para ser um. Isso também continuará a ser executado até que o valor de i não seja mais menor que o comprimento da matriz. Então, se fizermos isso, digamos que ainda devemos ter nossos quatro nomes na tela do nosso array. Mas desta vez usando o loop while. Ter o i plus, plus escreve no final é realmente importante. Se esquecermos aumentos em cada loop, i será sempre menor que o comprimento da matriz, o significa que a condição será sempre verdadeira e isso resultará em um loop infinito. Isso fará com que o navegador se esmague. Então, se fôssemos remover isso e, em seguida, salvar , atualizar, podemos ver que o navegador está lutando para carregar. Ainda podemos ver a fiação no canto e também temos a opção de parar de carregar a página e o navegador vai esmagar. No entanto, muitos navegadores modernos também detectarão que esse é o caso e deixarão de ser executados após um período de tempo, o que você pode ver aqui. Então agora vamos apenas adicionar este back-end solos sem mais problemas, e depois recarregar e nossos itens em loop estão de volta na tela. Antes de encerrarmos este vídeo, vamos dar uma olhada em mais um exemplo. Então vamos até o fundo e vamos criar mais variáveis para alguns números. Digamos que x é igual a cinco e Y é igual a 10. Em seguida, crie nosso loop while, assim como fizemos antes e então podemos criar nossa condição. Então vamos dizer se o valor de x é menor que y, então podemos executar nosso loop. Então vamos fazer um console.log o valor de x, e então nós criamos incremento x por um cada vez. Assim, enquanto o valor de x é menor que y, podemos enviá-lo para o console e, em seguida, incrementado por um cada vez. Então salve isso no console. Refresque-se e lá vamos nós. São valores de cinco até nove. Se quiséssemos que isso fosse até 10, assim como o valor de y. poderíamos definir isso para ser menor ou igual a e isso agora vai até 10. Então é assim que usamos um loop while em JavaScript, e no próximo vídeo vamos passar a olhar para objetos JavaScript. 32. Objetos: Bem-vindos de volta, rapazes. Agora vamos olhar para objetos JavaScript. Objetos são a coleção de propriedades que têm um nome e um par de valores. Por exemplo, assim como na vida real, um computador é um objeto. Um computador pode ter muitas propriedades, por exemplo, um nome de propriedade do fabricante e um valor de Apple, um nome de propriedade do tamanho do monitor e um valor de 22 polegadas, ou ficar com nossos caracteres de antes, um caractere poderia ser um objeto também, com um nome de propriedade de primeiro nome, e um valor de Mickey, ou um nome de propriedade de cor, e o valor de vermelho. Estes são todos apenas nomes e valores que são muito juntos que constroem um objeto. Vamos criar um objeto sobre o objeto inicia um arquivo, que é apenas uma tag de script vazia. Primeiro, definimos novos objetos com a nova palavra-chave, então novos objetos, seguidos pelos colchetes, e o ponto-e-vírgula. Podemos então atribuir este novo objeto a uma variável e vamos definir isso para o nome do caractere. Se agora passarmos para o console, então clique com o botão direito do mouse e inspecionar, abra isso e, em seguida, podemos fazer um log de console com o valor de caractere, em seguida, recarregar. Vemos um conjunto de chaves encaracoladas. Este é apenas um objeto vazio porque ainda não adicionamos nenhuma propriedade. Se voltarmos ao nosso projeto, agora podemos adicioná-los. Podemos fazer isso selecionando nosso personagem e, em seguida, vamos dizer ponto primeiro nome e definir isso igual a Bugs. Então podemos dizer o sobrenome do ponto do personagem igual a Bunny, depois o personagem, e digamos que tínhamos uma imagem, então imagem do ponto igual a uma string de bugs-bunny dot png. Vamos fazer mais um, vamos dizer que a cor do ponto do caractere é igual a cresceu, então aqui nós demos os objetos de caractere, as propriedades do primeiro nome, sobrenome, imagem e cor e, em seguida, estamos atribuindo esses valores no lado direito. Se guardarmos isso e voltarmos para o console, vamos ver o efeito que isso tem. Agora vemos algum conteúdo dentro de nossas chaves, então nosso objeto agora tem algumas propriedades. Podemos dizer nosso primeiro nome de Bugs, nosso sobrenome de Bunny e assim por diante. Estes são pares de valor de nome, então primeiro nome de Bugs é um par de valor nome, sobrenome de Bunny é um par de valor nome também. Podemos acessar qualquer uma dessas propriedades diretamente com o nome, assim como este. Vamos passar para o nosso log do console e logo abaixo podemos adicionar um segundo log do console. Se quiséssemos acessar nossa cor de caracteres, poderíamos selecionar o caractere completo e, em seguida, dizer cor de ponto, atualizar isso e há o nosso valor de, que é esta propriedade apenas aqui. Acesse nossos valores assim com o ponto é chamado de notação de ponto. Há também uma segunda maneira de acessar essas propriedades, esta é a notação de colchetes. Desta vez, em vez de acessar as propriedades com os pontos, podemos fazer um log de console e, em vez disso, usar essas chaves quadradas. Vamos selecionar os objetos de caracteres, os colchetes e, em seguida, podemos acessar nossa cor, ponto-e-vírgula no final, atualizar e há nossos dois valores de cinza. Primeiro com a notação de pontos e, em seguida, segundo com os colchetes. Outra maneira de criar um objeto é chamado de objeto literal e em vez de declarar um objetos vazios, que nós adicionamos apenas aqui e, em seguida, adicionando propriedades a ele com essas quatro linhas, podemos fazer tudo de uma vez. Vamos comentar este primeiro método aqui e depois logo abaixo deste. Podemos criar nosso objeto e armazená-lo dentro disponível. Vamos dizer var caractere e definir isso para todos os objetos, em vez de ter um objeto vazio, agora podemos atribuir nossos pares de valor de nome, então vamos dizer que nosso primeiro nome, os dois pontos. Nosso primeiro nome é Bugs, separados por uma vírgula, podemos adicionar o segundo de sobrenome, e este é Bunny. Novamente a nossa imagem, assim Bugs-Bunny ponto png e, finalmente, a cor. Estes valores anteriores que nós olhamos, são apenas strings simples. Estes também podem ser qualquer tipo de dados que já cobrimos, como um array. Podemos adicionar vários valores para a cor, então digamos que temos um valor de cor de cinza e, em seguida, separados por vírgula, também branco. Se salvarmos isso e, de fato, removeremos esses logs de console, apenas deixando nosso personagem. Para o console, há nossos pares nome-valor, como antes, mas desta vez nossa cor é uma matriz com dois valores separados. Se você clicar nesta seta aqui, podemos então abrir isso e, em seguida, expandir a cor. A posição do índice de zero é cinza e o índice de um é branco. Podemos até adicionar funções aos nossos objetos, então logo após a cor, podemos adicionar uma vírgula e então vamos definir uma função que irá criar uma string que concatena nosso nome e sobrenome. Digamos que o nosso nome completo é igual a uma função e, em seguida, criar uma função como vimos anteriormente. Dentro do corpo da função, podemos fazer um alerta e dentro do alerta, vamos criar string dizendo que meu nome completo é, um espaço e, em seguida, pode adicionar nossas propriedades. Vamos dizer este primeiro nome de ponto, em seguida, adicionar uma string vazia para o espaço e, em seguida, no final, vamos dizer este sobrenome ponto, ponto-e-vírgula no final. Há um par de coisas a observar aqui, em primeiro lugar, quando adicionamos uma função como uma propriedade de um objeto, isso é chamado de método e também temos usado essa palavra-chave para acessar nossas propriedades. Quando uma função é chamada como um método de um objeto, o valor disso é definido para esses objetos atuais. Portanto, podemos acessar qualquer uma dessas propriedades neste objeto usando este ponto e, em seguida, o nome da nossa propriedade. Se você der isso um salvar e passar para o navegador, você pode ver o nosso método de nome completo está aqui mais se você quiser realmente executar este método e exibir o alerta, precisamos executá-lo dentro dos parênteses. Voltar ao nosso registro do console e dizer o nome completo do ponto do personagem, o parêntese logo depois e agora se salvarmos e, em seguida, chamar isso, vamos agora ver o nosso método executar e o alerta está no navegador e a string de Meu nome completo é Bugs-Bunny, fecha. Isso agora é para nossa primeira olhada em objetos, eles são realmente úteis para agrupar informações sobre quase qualquer tipo de item. Em seguida, vamos ficar com o tópico de Objetos e olhar para como podemos percorrer eles. 33. Percorrendo objetos: Assim como quando estávamos trabalhando com matrizes, se você tem muitas propriedades em um objeto, podemos querer fazer loop através deles. Isso é mais eficiente e menos código do que selecionar cada propriedade separadamente. Dentro do nosso arquivo inicial, que está looping através de objetos, temos um objeto de caractere apenas aqui, que você pode fazer loop através. Vou criar uma variável vazia para começar, a armazenar os resultados. Digamos que os resultados Var e me satisfaça uma string vazia. Isso vai armazenar os resultados de cada propriedade objeto que irá percorrer como uma string. O loop que são usados para loop através do objeto é chamado o para em loop e se parece com isso. Começamos com um padrão procurando loop como antes. Então vamos para as instalações e definir nossa variável de i, mas desta vez dizer no personagem. Personagem é o nome do nosso objeto que está aqui. Agora dentro do corpo do loop podemos fazer alguns registros de console. Vamos começar com um console.log para o valor de i e ver o que obtemos. Vamos abrir isto dentro da consola. Clique com o botão direito do mouse inspecionar e agora podemos ver que obtemos os valores de FirstName, LastName, imagem em cores. Isso ocorre porque o valor de i é a chave. Estes são basicamente os valores no lado esquerdo de nossas propriedades. Se quiséssemos acessar os valores no lado direito de nossas propriedades, poderíamos então fazer um segundo log de console. Desta vez, em vez de i, fazemos o caractere (i); ponto-e-vírgula no final, atualizar. Podemos ver que cada par está agora na tela. Primeiro nome dos insetos, sobrenome do coelho. Se quiséssemos vê-los melhor, poderíamos fazer um terceiro log de console e apenas adicionar algo para separar esses valores, como alguns traços e lá vamos nós. Ali estão as nossas propriedades. Está bem. Bom, então agora temos acesso a todas essas propriedades e também os nomes e valores individualmente. Agora podemos ir em frente e construir nossos resultados e criar uma string para exibir na tela. Vamos descer para o nosso loop for e abaixo desses logs de console. É construir a nossa corda. Podemos acessar essas variáveis de resultado adicionar isso com mais iguais. Primeiro de tudo, vamos definir o valor de i, que é nossos nomes de propriedades, como FirstName e LastName, adicionar hoje uma string com dois pontos entre e espaço. Então, logo depois disso, podemos adicionar o nome da nossa propriedade, como insetos e coelho. Assim como estamos vendo com este registro de console aqui. Vamos adicionar o caractere i e, em seguida, adicioná-los em sua própria linha separada com uma tag break. Criamos um resultado que é uma string de todas as nossas propriedades de caracteres com os nomes e valores. Agora podemos abrir este navegador dentro de uma div vazia. Vamos até a seção do corpo, criar uma div e adicionar id de saídas vai ser o local onde estamos saídas, nossa cadeia de resultados e, em seguida, ir para baixo para fora do loop for. Vamos fazer um document.getElementById, queremos pegar as saídas, que é o nosso div vazio e, em seguida, definir o innerHTML para ser igual à nossa variável de resultado. Se salvarmos isso e depois para o nosso navegador, recarregar, agora vemos a string que criamos com o valor do nome da propriedade seguido por uma tag break. Esta é uma string que criamos apenas aqui. Isso é repetido para cada item dentro de nossos objetos porque adicionamos isso a um loop for in. É assim que podemos percorrer objetos e é muito conveniente, especialmente quando os objetos se tornam realmente grandes. No próximo vídeo, vamos continuar a olhar para objetos e como construí-los usando a função construtor. 34. Função construtora de objetos: Já analisamos algumas maneiras de criar objetos. Estes são bons se quisermos apenas criar um único objeto, como fizemos anteriormente. No entanto, se queremos criar vários objetos com as mesmas propriedades, há outra maneira usando um construtor, em vez de construir um objeto e adicionar nomes e valores, podemos usar a função construtor para basicamente criar um ou um modelo para cada objeto. Isso nos permitirá então criar vários objetos usando a mesma estrutura. Por exemplo, se eu tivesse vários caracteres que normalmente conteriam as mesmas propriedades, como um nome e uma cor. Vamos dar a este um ir sobre, e eu vou iniciar um arquivo para a função construtor objeto. Para baixo em nossos scripts, a função construtor é criada apenas como uma função normal que nós olhamos. Usamos a palavra-chave function e, em seguida, definir um nome, como caractere. Funções do construtor geralmente têm uma primeira letra maiúscula, assim como vemos aqui. Então podemos distingui-los de funções regulares. Voltaremos a isso em um momento. Mas primeiro podemos criar um novo objeto com base nessa função construtor usando a nova palavra-chave. Logo abaixo, vamos usar a nova palavra-chave, dizemos, novo personagem. Este personagem aqui, deve coincidir com o nome da nossa função logo acima. Em seguida, dentro dos colchetes podemos adicionar alguns valores que queremos usar em objetos. Então o primeiro nome, digamos Mickey, separado por uma vírgula, um segundo valor de Mouse, para o segundo nome. Podemos então adicionar uma matriz de cores. Mickey Mouse, podemos usar vermelho, também podemos dizer amarelo, e também preto também. Faça isso um pouco menor. Logo após a matriz, podemos adicionar uma vírgula, e então podemos adicionar um nome para a nossa imagem. Digamos que mickey-mouse.png e, em seguida, adicione um ponto e vírgula no final. Agora criamos esse novo personagem. Agora podemos atribuí-lo a uma variável chamada mickey. Ótima. Construímos um novo personagem, passamos alguns valores dentro dos parênteses, mas como passá-los? A resposta é a mesma que uma função regular. Podemos passá-los como argumentos. Dentro do construtor, podemos dizer primeiro, último, cor e imagem, que está na mesma ordem que você criou aqui. Aqui temos nossos valores para o primeiro nome, sobrenome, cor e imagem. Mas estes ainda não estão ligados aos nossos nomes acima. Podemos fazer isso dentro do corpo da função. Primeiro de tudo, digamos que este primeiro nome do ponto seja igual primeiro. Isso pode parecer um pouco estranho no início, mas o que estamos fazendo para o primeiro valor é que estamos passando em uma string de Mickey, que é armazenada nesta primeira variável. Em seguida, será definido no primeiro nome para ser Mickey. Também em JavaScript, essa palavra-chave pode ser um pouco complicada de entender. Quando usado desta forma, a palavra-chave deste se refere a esses objetos. Podemos ver isso fazendo um console.log e login o valor deste e, em seguida, ir para o nosso console. Podemos ver que esta palavra-chave está se referindo ao nosso personagem com o FirstName of Mickey. Aqui também podemos ver a nossa propriedade com o nome valor passar, que já adicionamos. No entanto, se formos em frente e mover nosso console.log para estar fora do objeto atual, assim como este. Agora voltamos ao nosso navegador. Agora vemos que não obtemos nosso objeto retornado, em vez disso, que esta palavra-chave agora se refere aos objetos da janela. Este objeto de janela representa a janela do navegador. Quaisquer funções globais, objetos e variáveis que criarão, tornar-se-ão partes desta janela. Se formos em frente e limpar o console e digitar a janela, aperte “Enter”, agora temos nossa janela retornada, e se abrirmos isso, também podemos ver as propriedades sobre esses objetos janela. Aqui dentro podemos ver nossa função de personagem, que é apenas aqui. Lembre-se também, criamos uma variável chamada Mickey. Isso também será paralisado no objeto global. Se rolarmos para baixo, aqui está a nossa variável de Mickey. Dentro do console pode ter acesso a qualquer um destes pelo seu nome. Digamos que a janela. Mickey. Aperte “Enter”, e lá está o nosso personagem com o primeiro nome de Mickey. Também temos acesso a muito mais propriedades do navegador, como window.InnerWidth. Aperte “Enter”. Podemos ver em pixels a largura interna do navegador. Vamos agora voltar para o nosso construtor. Primeiro, podemos remover este console.log e, em seguida, podemos adicionar o resto de nossos nomes de propriedade. Em segundo lugar, temos isso.LastName, e isso é igual a último. Esta cor escura é igual a cor. Então, finalmente, temos isso.image é igual a imagem. Agora vamos ver como Mickey se parece dentro do navegador, com um console.log. Isso é com console.log com o valor da nossa variável, que é Mickey, atualizar. Há nossos objetos de personagem, com nosso primeiro nome de Mickey, sobrenome de Mouse. Temos uma matriz de cores com valores diferentes livres e, em seguida, nossa imagem no final, porque Mickey agora tem todos os nomes e valores adicionados ao objeto. Essas propriedades também podem ser acessadas individualmente. Por exemplo, se quiséssemos selecionar a primeira cor, poderíamos dizer mickey.color e, em seguida, acessar a posição de índice de 0. Atualizar, e há o nosso primeiro valor na matriz de vermelho. Agora, este projeto ou este construtor que temos aqui, ele agora se configura. Podemos ir em frente e criar vários objetos baseados nesses modelos, assim como fizemos com o Mickey. Logo abaixo do Mickey aqui, podemos criar uma nova variável, e desta vez podemos chamá-la de Patolino. Este também é um novo objeto de caractere. Então dentro podemos passar em nossos valores, o primeiro nome de Patolino, o segundo nome de Duck, e então nossa variedade de cores. Agora vamos definir as cores aqui dentro para ser preto, e depois laranja. Uma vírgula logo após a nossa matriz. Isso vai ser para a nossa imagem, que é daffy-duck.png, um ponto-e-vírgula nas extremidades. Então vamos fazer mais um, então vamos dizer que variável de bugs é igual a um novo personagem, em nossos valores. A primeira é uma série de Bugs, o sobrenome de Bunny. Nossa matriz com nossas cores de cinza, e também branco. Uma vírgula novamente, logo após a matriz, e a imagem final de bugs-bunny.png. Vamos dar um zoom e checar tudo isso. Está tudo parecendo bem. Agora, se console.log qualquer um desses valores extras, então console.log. Então podemos fazer algo como insetos, que é nosso terceiro objeto aqui. Segmente o sobrenome, que deve enviar para o console o valor de Bunny, salvar e atualizar, e lá vamos nós. Tem Bunny dentro do console. Bom, tudo isso parece que está funcionando bem, e esta é a função construtora de objetos, que é uma maneira realmente útil de criar vários objetos com a mesma estrutura. 35. Const e let: Bem-vindo de volta a esta nova seção. Estaremos reforçando o que você já aprendeu junto com a aprendizagem de algumas coisas novas, como const e let, literais de modelo, intervalos de configuração e expressões regulares. Agora vamos colocar nossas habilidades em prática construindo um jogo de telefone. Eu já adicionei o HTML e CSS no arquivo inicial, então podemos nos concentrar em fazer este jogo funcionar usando JavaScript. Neste jogo, tudo o que precisamos fazer é clicar no botão “Match” quando duas formas aleatórias forem do mesmo tamanho e cor. Esta é a versão final à nossa frente aqui. Tudo o que precisamos fazer é clicar no botão “Play”, e isso irá acionar uma matriz de objetos que são selecionados aleatoriamente. Neste jogo, tudo o que precisamos fazer é clicar no botão “Match” quando as duas formas aleatórias forem do mesmo tamanho e cor. Embora pareça simples, há uma grande coisa acontecendo nos bastidores, e vamos ter muita prática com o que você já aprendeu, juntamente com algumas coisas novas também. Vamos clicar no botão “Match” quando dois forem iguais, então obtemos uma pontuação. Se a forma for diferente, obtemos um ponto retirado e o resultado pode ser negativo. Vamos passar para nossos arquivos iniciantes JavaScript, e o código para isso está no número 31, que é o jogo de correspondência de forma. Aqui eu tenho o índice no arquivo script.js já aberto. Vou copiar a página de índice, copiar o caminho do arquivo e, em seguida, colar isso no navegador para iniciá-lo. Já temos todo o layout e estilo, então tudo o que precisamos fazer é trabalhar no arquivo script.js. Vamos passar para isso agora, abra o script.js. Vamos criar um pouco mais de espaço dentro do editor de texto. Aqui dentro, vou começar criando nossas formas junto com algumas variáveis para armazená-las. Desta vez, porém, vamos nos concentrar em duas coisas novas. Nós não vamos estar usando uma variável usando a palavra-chave var. Na verdade, provavelmente não vamos usá-los novamente para o resto deste curso. Não porque haja algo errado com variáveis. Eles ainda são perfeitamente válidos para usar. No entanto, no ES6, que já mencionamos, também é conhecido como ES 2015, também temos duas novas palavras-chave que poderíamos usar no lugar de var para iniciar todas as variáveis. Primeiro é deixar, o que nos permite também declarar uma variável. Precisamos de algumas variáveis para este jogo. Vamos em frente e criar uma pontuação atual let. Podemos definir isso para ser um valor inicial de zero. Assim como var, o valor armazenado usando let pode ser atualizado, também chamado reatribuído. Há um diferente com let and var. Let valores têm escopo de bloco. O escopo do bloco se aplica a coisas como funções ou instruções. Basicamente qualquer coisa entre um conjunto de chaves. Se você se lembrar de quando olhamos para o escopo, aprendemos que variáveis declaradas dentro de uma função são escavadas para essa função, o que significa que não podemos acessá-las em outro lugar em nosso código. Também variáveis declaradas fora de uma função são chamadas globais. Temos acesso a eles em qualquer lugar dentro do nosso código. Deixe valores, por outro lado, são escopo para não apenas o bloco onde eles foram criados, mas também em qualquer outro lugar que eles são usados. Podemos ver isso melhor com um exemplo simples usando nossa variável de pontuação atual. Se adicionarmos isso a uma instrução if, então vamos criar uma instrução if que já aprendemos sobre, e então podemos dizer se a pontuação atual é menor que cinco, dentro daqui podemos dizer um console.log, e log é o valor da pontuação atual. Então uma corda, e isso pode dizer dentro. Quando estivermos na consola, sabemos de onde vem a mensagem dele. Em seguida, vamos fazer um segundo log console fora desta instrução if. Vamos fazer o mesmo, vamos adicionar a pontuação atual a uma string. Mas desta vez, vamos dizer lá fora. Agora, se formos para o navegador, abra o console, clique na guia “Console”, atualize e agora podemos ver zero e zero. Isso se aplica tanto ao interior quanto ao exterior. Esse é o comportamento esperado. Nós declaramos nosso valor let como zero, em seguida, registrá-lo dentro e fora do bloco if. Vamos em frente e declarar a mesma variável, mas desta vez dentro das declarações if. Vamos fazer o mesmo. Vamos dizer deixe a pontuação atual desta vez ser igual a um valor de 10. Agora vamos para o navegador e atualizar, agora veremos o efeito do escopo do bloco. A pontuação atual dentro do bloco é um valor de 10. Mas a pontuação atual fora do bloco não é tocada. Se estas são ambas variáveis, vamos mudar let para o var em ambos os casos. Veríamos agora que ambos os valores seriam 10. Como essa variável é declarada fora dessas chaves, que significa que tem escopo global. Para a maioria dos casos, podemos usar a palavra-chave let mais recente, agora para declarar variáveis e isso é o que vamos usar para o resto deste curso. Selecione “Remover”, todo este exemplo, e então altere este var para ser deixado. Também precisamos de mais algumas variáveis para este projeto. Vamos em frente e adicioná-los agora usando nossa palavra-chave let. Vamos criar uma variável chamada let play. Isto vai ser inicialmente definido como falso. Isso será tornado verdadeiro quando o usuário clicar no botão “Play”. Então vamos criar mais dois, um para a forma 1 e, em seguida, também um para a forma 2, forma 1 e forma 2 estão atualmente não atribuídos, porque precisamos adicionar um valor aleatório a estes mais tarde quando o usuário começar a jogar. Junto com a palavra-chave let ES6 também introduziu a palavra-chave const, que é abreviação de constante ou variáveis que declaramos usando var e deixar pode ser alterado ou reatribuído. No entanto, se sabemos que o nosso valor vai permanecer sempre o mesmo, podemos declarar uma constante em vez disso. Isso também terá o benefício de o valor não ser atualizado acidentalmente em outro lugar em nosso código. Se declararmos uma const e tentarmos atualizar um valor, obteremos um erro. Vamos definir um número para ser igual a 10. Então vamos dizer número mais mais. Agora estamos aumentando o valor de 10, mesmo que esteja armazenado dentro de uma constante. Vamos ver o que acontece dentro do console. Se tentarmos registrar o valor de número, recarregar e estamos recebendo erro porque estamos tentando atualizar o valor de uma constante. Vamos remover isto por enquanto. Uma constante será útil para declarar as formas que queremos usar neste projeto. Queremos selecionar as formas, mas não precisamos alterá-las. Cada forma vai ser um objeto. Então podemos adicioná-los como uma matriz de objetos. Vamos configurar nossa constante chamada formas, e isso vai ser uma matriz. Dentro desta matriz, podemos criar nosso objeto. Precisamos ir em frente e criar alguns desses, então temos algumas formas aleatórias para selecionar. Vamos definir a propriedade color e estas podem ser quaisquer cores de sua escolha. Eu quero ir para o valor para o primeiro de FF595E, em seguida, a largura de 250, e a altura. Vamos para 160, em seguida, adicionar uma vírgula. Vamos copiar isto e colar isto em mais nove vezes, dando-nos 10 objetos diferentes. Vamos manter os dois primeiros como a mesma cor, mas mudar a largura e altura para ser ligeiramente diferente, então 150 para este, este terceiro, isso vai ter um valor de FFCA3A, largura de 320, a altura vamos mudar isso para 170. O quarto pode ter a mesma cor, largura de, vamos para 310, a altura de 180. Número 5, isto vai ter uma cor de 8AC926. A largura de 190, altura de 160 está bem. Vamos copiar esta cor, e vamos criar duas de cada cor. A largura desta vez, vamos para 200 e depois 175. Novamente, isso é tudo aleatório, então não se preocupe se o seu é um pouco diferente. O próximo aqui a cor pode ser 1982C4, a largura de 380, altura deixa ir para 185. Copie esta cor, então estes dois são iguais, em seguida, uma altura de 400. A largura para 400 e uma altura de 120. Em seguida, o último par, vamos para 6A4C93, 370 e a altura de 145, copiar esta cor e fazer o último o mesmo para que seja um emparelhado novamente. Uma largura para 440 e a altura de 160 é boa. Quando o usuário clica em “Play”, vamos olhar através desses objetos, selecionar um aleatório. Se o computador selecionar o mesmo aleatório para as formas 1 e 2, estes seriam então considerados uma correspondência. Finalmente, podemos fazer um log de console rápido desses objetos selecionando-os com o número de índice de matriz. Logo abaixo da nossa matriz, faça um registro de console e o valor das formas. Vamos para o número 2. Confira isso no console, e há um de nossos objetos com a cor, a largura e a altura. Neste vídeo, nos concentramos em usar as palavras const e deixar palavras-chave. Se você não tem certeza quando usar const e let, você deve sempre usar const sempre que possível e, em seguida, usar let se você precisa reatribuir um valor. Se você cometer um erro e usar const quando deve ser deixado, está completamente bem. O console alertará você para alterá-lo. Com nossas formas agora prontas, no próximo vídeo, veremos como selecionar aleatoriamente a partir desta matriz de objetos. 36. Gerando uma forma aleatória: No último vídeo, adicionamos uma matriz de objetos de forma. Agora precisamos de uma maneira de selecionar aleatoriamente uma dessas formas da nossa matriz. Eu vou adicionar isso a uma função chamada select random shape. Voltar ao nosso script, agora podemos remover o log do console do último vídeo e, em seguida, o conjunto de uma constante baía para a nossa função chamada SelectRandomShape. Isso vai ser uma função de matriz ES6. Configure isso assim. Bem, agora podemos selecionar qualquer um desses itens da matriz logo acima pelo número do índice. Vamos dar uma chance a isso. Vamos configurar uma constante chamada RandomShape e definir isso igual à nossa matriz de formas e selecionar um dos números de índice. Faça um log do console. Verifique se isso está funcionando bem com o valor de uma forma aleatória. Na verdade, vamos chamar isso de RandomSelection, só para ser um pouco mais claro. Registrar o console. Então, para isso correr, precisamos chamá-lo pelo seu nome. Então selectRandomShape, os parênteses. Agora isso deve ser executado dentro do console. Abra, recarregue. Temos um erro de ortografia, então isso deve ser formas. Refresque. Agora estamos selecionando um de nossos objetos. Em vez de codificação difícil em um número, queremos que eles sejam selecionados aleatoriamente. Para fazer isso, podemos gerar um número aleatório, como vimos anteriormente. Se passarmos para o nosso código, esta matriz tem 10 objetos. Arrays também começam em zero, então precisamos gerar um número aleatório entre zero e nove. Vamos começar isto no lado da nossa função. Vamos armazenar isso em uma constante. Vou chamar isto de Randomnum. Nós já sabemos como fazer isso com Math.Random. Lembre-se, isso criará um número aleatório entre zero e um. Zero foi incluído, mas um realmente não é, então só vai para 0,999. Você verá as instalações depois disso. Para criar este número aleatório para ser entre zero e nove, primeira coisa que precisamos fazer é multiplicar este número aleatório pelo comprimento da nossa matriz de formas. Então molda o comprimento. Então podemos arredondar este número com Math.Floor. Logo em um início usar Math.Floor e, em seguida, abrir os suportes, e então podemos fechar isso bem no final das formas.comprimento, ponto e vírgula no final. Basta explodir isso, vamos fazer um segundo log de console e, em seguida, podemos produzir o valor do nosso número aleatório. Basta verificar se isso está funcionando bem, como ao mesmo tempo. Refresque. Diz 0, 7, 6, 2 e 8, há um 9. Tudo isso parece funcionar bem, não temos nada maior que nove e também terá zero. Isso parece estar funcionando completamente bem. Agora temos, este número aleatório entre zero e nove. Podemos substituir o número codificado de antes para a nossa matriz. Em vez de selecionar o número 1, vamos selecionar nosso número aleatório. Remova o log do console de ambos os dois, não precisamos mais disso. Dê um “Salvar” e depois vá para o console. Agora, se continuarmos atualizando, devemos ver um objeto diferente da nossa matriz de cada vez. Ótimo, só para terminar esse vídeo, vou mudar esse registro do console. Nós não precisamos fazer login no console, e em vez disso, basta retornar este RandomSelection. Isso retornará o valor para que possamos usá-lo mais tarde. Bom. Esta é uma parte importante deste projeto, cuidar de. Em seguida, vamos usar esses objetos aleatórios e atribuí-lo às nossas variáveis de forma 1 e forma 2, e também repetir esse processo a cada segundo para continuar mostrando diferentes formas para comparar. 37. Repetição com o setInterval: No último vídeo, criamos uma função que selecionou aleatoriamente uma das formas dentro da nossa matriz, que é apenas aqui. Neste vídeo, temos dois objetivos principais. Queremos atribuir essas formas aleatórias às nossas variáveis de forma 1 e forma 2. Além disso, precisamos alterar os valores de forma a cada segundo para atualizá-los na tela. Sabemos que esta função de forma aleatória selecionar para baixo na parte inferior está resultando em uma forma aleatória. Então podemos ir em frente e atribuir isso às nossas variáveis. Primeiro de tudo, digamos que a forma 1 é igual a selecionar a forma aleatória. O mesmo para a forma 2 isso também pode ser selecionar forma aleatória 2. Agora precisamos executar esta função de forma aleatória selecionar cada segundo e atualizar essas variáveis aqui. Para fazer isso, podemos usar um método JavaScript chamado setInterval. Isto irá executar esta função ou repetir o mesmo código com um atraso de tempo entre cada repetição. Então vamos embrulhar estes dois aqui dentro do nosso método de intervalo definido. Então primeiro vamos cortar essas duas linhas aqui. Em seguida, dentro de um intervalo definido, criamos os parênteses. Então aqui dentro, podemos executar uma função de seta ES6. Então vamos criar isso aqui dentro, as chaves, e então podemos colar em nossas duas redesignações. vírgula no final aqui, e então podemos adicionar o atraso de tempo fora dessas chaves em milissegundos. Então 1.000 é igual a um segundo. Então agora esta função será executada a cada segundo, dando-nos valores diferentes para a forma 1 e forma 2 cada vez que este intervalo será executado. Primeiro, vamos verificar se isso está funcionando registrando os valores da forma 1 e da forma 2. Portanto, o log do console, a forma 1 e, em seguida, um segundo log do console, desta vez para a forma 2 para o navegador. Recarregar. Bom. Então, continuamos vendo dois novos objetos aparecendo no console e eles parecem ter valores diferentes. Então isso funciona muito bem, mas não queremos que esse código seja executado até que o jogador atinja ele seja jogável no topo. Então primeiro podemos cercar este temporizador dentro de uma função. Então logo abaixo do intervalo definido, vamos criar nossa constante, que vai ser uma função de seta, e vamos chamar essa forma aleatória de repetição. Mais uma vez, vai ser uma função de seta. Então vamos configurar isso assim. Então, dentro do corpo desta função, vamos adicionar nosso intervalo definido. Então vamos cortar a seção que criamos antes e, em seguida, colar isso dentro de nossa função. Então agora esse intervalo definido só será executado cada vez que uma chamada repetir forma aleatória, e queremos fazer isso quando um jogador clica no botão Reproduzir. Então vamos adicionar um manipulador on click ao nosso botão play. Se formos para a nossa página de índice e, em seguida, rolar para baixo até a seção principal, aqui está o nosso botão play aqui, que tem um id de jogo. Então, podemos selecionar isso com get elemento por id adicionar um manipulador clique para executar a nossa função de forma aleatória repetição. Abaixo disso, vamos adicionar um comentário do início do jogo. Vamos primeiro selecionar nosso botão com elementos get por id. O id foi play.onclick. Isso vai executar uma função de seta ES6. Então aqui dentro podemos chamar repetição de forma aleatória, com os parênteses depois. Então, isso irá em frente e executar, salve isso e depois para o console, recarregue. Ainda não vemos nada a correr. Agora, se clicarmos no botão play, agora vemos nossos objetos são agora gerá-lo. As coisas boas agora estão indo bem para o nosso jogo. No entanto, queremos mover as formas para o console e exibi-las na tela, e isso é o que faremos no próximo vídeo. 38. Modelos literais: Bem-vinda de volta. Agora há algumas funcionalidades básicas em nosso jogo. Geramos duas formas aleatórias quando clicamos neste botão Play no topo. No momento, embora essas formas estão apenas dentro do console. Mas neste vídeo, estaremos realmente exibindo essas formas na tela para o player comparar. Nós vamos fazer esta pilha também aprender sobre como usar literais template. Isso basicamente nos permitirá criar uma string de texto que variáveis passadas dentro. Nós já analisamos algumas maneiras de incluir variáveis com strings. Vamos ver nossos roteiros. Nós já olhamos para métodos como este. Se você criou uma variável como nome e definiu isso para ser o valor de Chris, faça um log de console. Dentro daqui, adicionamos strings para variáveis, digamos “Olá”, um espaço, e depois adicionamos nosso nome. Para o console e agora esperamos o valor de Hello Chris. Usando literais de modelo em vez de juntar essas strings e variáveis com o símbolo de adição, podemos construir uma única string usando backticks. Vamos remover tudo isso daqui, e então se você olhar para o backtick no seu teclado, que é este símbolo apenas aqui, então podemos digitar o valor de Hello dentro. Em seguida, em vez de juntar-se em nosso nome de variável, podemos adicionar esta variável dentro dos backticks. Pode passar em nossa expressão de variável primeiro usando um símbolo $ e, em seguida, dentro das chaves, podemos adicionar nosso nome de variável, que apenas se parece com isso. Se salvarmos isso e passar para o console, vemos o mesmo valor agora está funcionando no navegador. Outra coisa que podemos fazer com literais modelo é ter texto multi-linha. Se quiséssemos uma corda muito longa, assim como esta, e, em seguida, continuar isso para baixo na segunda linha. Nós vemos instantaneamente com essas duas cores diferentes aqui que nosso editor de texto está destacando um erro. Para fazer isso da maneira tradicional, precisaríamos envolver cada linha dentro das aspas, adicionar uma quebra de linha e, em seguida, juntá-la novamente com o símbolo de adição. No entanto, ao usar esses literais de modelo mais recentes, podemos simplesmente substituir as aspas por backticks, como esta citação a partir daqui, adicionar um backtick, também no início. Agora isso é tudo da mesma cor, então agora parece estar funcionando, não temos mais o erro. Para o console e há a nossa cadeia de várias linhas que preserva as quebras de linha. Agora podemos remover este exemplo de antes. Ótimo agora sabemos como usar esses literais modelo. Podemos colocá-los em prática dentro de nossos projetos. Até a nossa função, que é a forma aleatória de repetição, primeiro, podemos remover esses dois logs de console porque queremos enviar estes para a tela. Em seguida, podemos criar uma string para conter nossos estilos. Os estilos que queremos conter são essas seções dos objetos. Queremos a cor, queremos a largura, e também as alturas, e vamos defini-las como propriedades de estilo de nossas formas. De volta à nossa função, vamos em frente e fazer isso agora. Dentro de nosso intervalo definido, apenas soprar nossa forma 2 aqui. Vou em frente e criar uma nova constante. Vamos começar com a forma. Vamos chamar isso de Shape1Styles. Nós vamos criar um template literal, que é basicamente vai ser uma string com todos os nossos estilos contém. Podemos então adicionar os estilos para nossas formas div, e então isso será exibido na tela. Vamos dar uma olhada nisso com os backticks. Primeiro de tudo, vamos definir a largura do nosso div dentro desses backticks, podemos adicionar o símbolo $ e, em seguida, as chaves para adicionar nossa variável. A variável uma vez definido para esta largura, é o valor de uma largura de cada objeto. Voltar para baixo, vamos definir este ser shape1, que é armazenado dentro desta variável aqui. Shape1.width, e então precisamos adicionar o valor de pixel no final. Adicione mais px, ponto-e-vírgula depois disso, então queremos adicionar isso na próxima linha para que fique mais claro. O fundo desta vez. Vamos adicionar isso ao nosso símbolo $, abrir as chaves, e o fundo pode ser shape1.color, ponto-e-vírgula no final. Então, finalmente, as alturas. Isso vai ser igual à nossa variável dentro aqui, e isso é shape1.height, e então novamente precisamos também adicionar no final nosso valor de pixel. Além de px, ponto e vírgula no final, e certifique-se que esses backticks está bem no final e à direita no início e não depois de cada linha. Agora vamos ter esses estilos que podemos aplicá-los em nossas formas div. Se formos para a nossa página de índice, temos uma div vazia com shape1 e também a shape2. Vamos adicionar estas propriedades de estilo a esta div aqui. Primeiro, vamos selecionar shape1 usando document.getElementById, basta selecionar isso. Logo depois, vamos voltar ao início e fazer um document.getElementByID. Queremos agarrar a forma 1. Então o que vamos fazer é algo que já vimos antes. Vamos definir o atributo de estilo para esta div. Vamos definir o CSText para ser igual à string que é criada, que é armazenada nesta constante chamada shape1styles. Vamos adicionar isso como nosso CSText. Shape1Styles com o ponto-e-vírgula no final. Este CSText que acabamos de usar aqui, não é algo que tenhamos visto ainda durante este curso. Isso nos permitirá passar em uma string de estilos, assim como criamos aqui, armazenados em uma variável chamada shape1styles. Agora vamos verificar se isso está funcionando no navegador. Se salvarmos isso e, em seguida, recarregar, podemos fechar o console para baixo e clicar em jogar. Ótimo, essa é a nossa div forma 1 no lado esquerdo aqui. Agora podemos ver todas as propriedades de estilo, como a cor, a altura e a largura, e agora aplicar como atributos de estilo, que adicionamos apenas aqui. Agora o que precisamos fazer é repetir isso para a nossa shape2. Vamos copiar nossa forma1 aqui, e então poderíamos colar isso logo abaixo, e então vamos mover isso para manter tudo alinhado bem. Agora o que precisamos fazer é mudar a forma 1 para ser a forma2. O mesmo para todos esses dentro daqui podemos mudar isso para ser shape2 exceto para a cor e também para a altura também, e então assim como antes podemos copiar esta linha de código aqui, também podemos selecionar o document.getElementById. Desta vez, queremos selecionar a div shape2, que está mais na página de índice, que é esta div aqui. Exatamente o mesmo que fazemos style.csstext, e isso vai ser igual a Shape2styles. Adicione um ponto-e-vírgula no final e, em seguida, feche o navegador, recarregue e espero que devamos obter duas formas aleatórias quando clicamos em “Jogar”. Ótimo, agora essas duas formas estão na tela, agora precisamos de uma maneira de compará-las. E isso é o que veremos no próximo vídeo. 39. Comparando objetos e pontuando: Agora temos duas formas aleatórias aparecendo na tela. Precisamos de uma maneira de comparar estes dois objetos moldados. Quando o jogador clica no, botão Match, que é apenas aqui. Para começar, temos uma variável no topo, que é chamada de reprodução, que definimos no início desta seção, que também é definida como false. Dentro da função do jogo All-Star, podemos mudar esta variável para ser verdadeira uma vez que o jogo tenha começado. Vamos rolar para baixo até nossa seção de objetivo de ações, que é apenas aqui. Em seguida, uma vez que o usuário clicou no botão, Play, podemos então ir em frente e definir o jogo para ser igual a true. Fora desta função, eu vou criar um novo comentário, que é comparar. Agora podemos adicionar um manipulador de eventos para o botão de correspondência, para acionar uma função quando clicado. Vamos rever a sua página de índice e dar uma olhada no nosso botão de correspondência, que está aqui. Isso tem um ID de correspondência, para que possamos pegar isso dentro de nossos scripts, então document.getElementByID, o Id de correspondência. Em seguida, podemos usar um manipulador de eventos onclick, acionar uma função de seta ES6. Em seguida, dentro desta função podemos adicionar uma instrução if para verificar se jogar um conjunto como true. Digamos que, se a variável de jogar, então podemos apenas dizer se está jogando, e quando isso for verdade, isso irá então executar o código dentro da instrução if. Isso basicamente significa que o código dentro desta declaração se só será executado se o jogador é clicado, Iniciar. Certamente jogar qualquer variável para ser verdade. Aninhado dentro podemos executar outra instrução if. Isto será usado para aumentar a pontuação do jogador, se os objetos forem iguais. Vamos aninhar um segundo se declaração, assim como este. Mas como comparamos primeiro os objetos para verificar se eles são os mesmos? Para isso, temos algo chamado objects.is. Isso nos permitirá passar para dentro e para fora, para moldar variáveis para comparar. Objects.is outro novo recurso JavaScript do ES6 ou ES 2015, assim como as funções de seta e deixa constantes, que olhamos antes. Dentro dos colchetes aqui você pode dizer objetos, então objeto.is, e depois abrir os parênteses logo depois. Dentro daqui, podemos passar em nossos valores que queremos comparar, que você armazenou nas variáveis de forma 1 e também moldou 2. Se estes dois objetos dentro daqui, são iguais, então podemos aumentar a pontuação do jogador. Temos a pontuação do jogador acima no topo, pode ser definida como zero e armazenada dentro desta variável de pontuação atual. Vamos aumentar isso. Se o objeto é uma correspondência, nós colocamos a pontuação, mais, mais. Mais no index.html, nós também temos um elemento span com o Id de pontuação, que é apenas aqui. Isso nos permitirá cortar esses elementos e, em seguida, aumentá-lo com a pontuação de um jogador. Podemos ver esse valor na tela. Vamos fazer isso agora de volta às nossas declarações “se”. Se esses dois objetos, são correspondência vamos aumentar a pontuação em um e, em seguida, selecione o document.getElementByID, em seguida, agarrar no recipiente span, que tinha o ID de pontuação. Defina o innerHTML para ser igual a um valor da pontuação atual. Bom, apenas estrague isso. Após a nossa seção se que você acabou de aqui, vamos adicionar nossas declarações l. Este l instruções será executado se os objetos não coincidirem. Isto vai ser usado fazer o oposto e, em seguida, tirar um ponto fora do placar. Digamos que mais, pontuação atual, e diminuiremos isso em um. Em seguida, também faça a mesma linha aqui, então document.getElementByID, o Id que queremos pegar, novamente é pontuação. Em seguida, obter o HTML interno para ser igual à pontuação atual. Em seguida, atualize, e vamos dar uma chance, clique no botão Reproduzir. Agora, precisamos clicar neste botão Corresponder, quando essas duas formas são iguais. Vamos acenar para ser o mesmo. Isso vai para o valor de 1, 2, 3. Isso também está funcionando bem. Se clicarmos sobre isso quando as formas não são iguais, vemos vai perder um ponto de cada vez. Ótimo, tudo parece funcionar bem. Mas antes de chamarmos isso completo, há algumas pequenas questões que precisamos resolver. Primeiro, depois que o jogo é iniciado, se continuarmos clicando no botão play, então vamos começar o jogo fora. Então, se clicarmos nisso várias vezes, isso chamará os meses modelo de função de estoque, gerando lotes de formas aleatórias. Além disso, ao jogar o jogo, queremos restringir o usuário a apenas pressionar este botão de correspondência uma vez por intervalo definido. Atualmente, se o usuário clicar nele várias vezes, a pontuação continuará indo para trás ou para a frente. Queremos restringir isso a apenas um clique por seleção. Vamos começar desativando o botão de parada, quando o jogo já estiver em execução. Podemos fazer isso no lado da função de jogo. Vamos para os nossos scripts, e vamos para a seção Star Game aqui, que é o manipulador de cliques. Primeiro, precisamos pegar nosso botão play, que tem um ID de jogo, que podemos ver aqui. Em seguida, de volta para a nossa função de jogo Star, apenas sob o jogo igual verdadeiro. Vamos adicionar um comando para dizer desativar o botão play, ao jogar. document.getElementsByID, selecione nosso botão Reproduzir e, em seguida, podemos definir.disabled para ser igual a true. Vamos testar isso e, em seguida, clique em Reproduzir. Vemos assim que você clicar no jogo que fica cinza, e nós podemos, t clicar neste botão mais. Se atualizarmos, agora nosso botão de jogo está de volta ao normal, e podemos reiniciar um novo jogo. Em seguida, podemos agora passar para parar o jogador clicando neste botão de partida várias vezes. Primeiro, vamos armazenar este botão de correspondência dentro de uma variável. Colocamos no topo do nosso código. Vamos configurar uma constante chamada botão de correspondência, e nosso document.getElementByID familiar. O botão que você deseja selecionar tem o ID de muito, nós adicionamos um ponto-e-vírgula no final. Vou começar essa referência dentro de uma constante porque vamos selecionar isso várias vezes. Vamos primeiro desativar o botão assim que ele for clicado, e então reativar o botão assim que o novo intervalo definido estiver sendo gerado. Até a parte inferior, podemos definir este botão para ser desativado depois de ter sido clicado. Dentro da seção de comparação, e faremos isso no lado da seção de jogo. Digamos que matchbtn.disabled será igual a true. Isso desativará o botão depois de ter sido clicado. Dentro desta função onclick, este botão precisa ser reativado para cada ciclo. Então podemos reativá-lo cada vez que uma nova forma é gerada. Até a seção de intervalo definido. Logo depois aqui, bem no topo, também podemos selecionar matchbtn.disabled, mas desta vez para ser falso. Vamos testar isso, atualizar o navegador, clicar em, Jogar. Agora o nosso jogo começa, e se tentarmos clicar no botão de correspondência várias vezes, ele só funciona quando uma nova forma está sendo gerada, então só podemos clicar nele uma vez por seleção. Ótimo, esse é o nosso jogo. Agora completa. Sinta-se livre para seguir em frente e fazer qualquer personalização, fazer qualquer alteração ou brincar com a velocidade das formas usando nosso valor de intervalo definido apenas aqui, ou geralmente experimentar com quaisquer novos recursos que você gosta. Espero que tenham gostado de construir este jogo e adeus por enquanto. 40. Introdução às expressões regulares: Bem-vindos de volta, rapazes. Agora vamos olhar para algo que é realmente útil em JavaScript. Isto são expressões regulares. Expressões regulares, muitas vezes encurtadas para rejeições, é uma maneira de encontrar um padrão ou combinação de caracteres dentro de uma string de texto. Por exemplo, se tivéssemos um parágrafo de texto, poderíamos dizer que queríamos procurar espaços duplos e reduzi-los para ser apenas um espaço. Tudo o que poderíamos procurar por cada palavra dentro de uma frase e então mudar o primeiro caractere para ser uma letra maiúscula. Vá para esses arquivos iniciais. Então, dentro da barra lateral, vamos descer para o número 32, que é introdução às expressões regulares. Dentro daqui temos algum texto inicial lorem ipsum simples, que você acabou de armazenar dentro dos elementos P. Abra este exemplo dentro do navegador. Primeiro, podemos pegar esses elementos de texto apenas aqui e armazená-lo dentro de uma variável para começar a trabalhar. Até nossos scripts, vamos começar com o texto let é igual ao seletor de consulta do ponto do documento. Queremos pegar nossos elementos P, que armazena nosso texto. Neste é visto como uma string, e então queremos pegar o HTML interno. Podemos começar com o básico e tal como texto para encontrar a localização de uma palavra particular como uma string. Logo abaixo, este é um bem simples para procurar texto. Tudo o que precisamos fazer é dizer pesquisa de ponto de texto e, em seguida dentro do colchete, podemos adicionar uma string que você deseja procurar. Vamos procurar por qualquer uma dessas palavras dentro de uma string. Vamos para, “amet” adicione isso nas citações, A-M-E-T. Agora vou colocar isso no console. Primeiro vamos armazenar esses resultados dentro da variável. Deixe novo texto igual à nossa pesquisa e, em seguida, poderíamos fazer um log console para o valor do novo texto. Dê um salvamento e depois ao nosso exemplo, abra o console e obtemos o valor de 23. Isso ocorre porque a palavra que procuramos em nossa string de texto começa na posição 23, que basicamente significa que esta é 23 posições desde o início. Vamos comentar este exemplo e dar uma olhada em um novo. Vamos remover este log console irá cortar isso e realmente apenas colá-lo para baixo na parte inferior. Podemos usá-lo com todos os exemplos, acima. Agora nós olhamos para encontrar uma string dentro do nosso texto. Uma vez que encontramos uma correspondência, muitas vezes queremos substituí-la por outra coisa. Para isso, temos o método de substituição. Para baixo no texto de substituição, vamos string. Vamos criar o mesmo exemplo de antes para que o novo texto, mas desta vez em vez de fazê-lo, pesquisa de ponto de texto, podemos fazer substituição de ponto de texto. Substituir leva em dois valores diferentes, o primeiro que vamos adicionar uma string para procurar. Vou procurar por lorem que é a primeira palavra aqui dentro e, em seguida, como um segundo valor separado por uma vírgula, podemos adicionar uma palavra com a qual você deseja substituí-la. Vamos para qualquer palavra de sua escolha. Qual é o número das nossas fichas? Nós também temos nosso registro de console de novo texto na parte inferior. Se recarregar o navegador e dar uma olhada, agora vemos a nossa primeira palavra de lorem foi substituída por chips. Isso funciona muito bem, mas isso é porque nós adicionamos a palavra lorem. Aqui, temos um L. maiúsculo. Combina com a nossa corda. Se pudéssemos mudar isto para minúsculas, não funcionaria. Altere-o para L minúsculo, atualize. Vou dizer que a palavra lorem não foi substituída desta vez. Isso ocorre porque esta substituição é sensível a maiúsculas e minúsculas, em vez disso, se quisermos realizar uma pesquisa , que é insensível a maiúsculas e minúsculas, podemos adicionar nosso padrão para procurar dentro das barras. De volta ao nosso código. Vamos copiar esta linha de antes. Podemos deixar este exemplo aqui comentando isso. Podemos colar isso de volta por baixo deste texto de substituição com uma expressão regular. Ao invés de ter uma string de texto como esta, vamos criar uma expressão regular dentro de duas barras. Vamos procurar a nossa palavra de lorem, então podemos adicionar ao modificador I logo depois. Se salvarmos isso e depois atualizar, vemos agora a palavra lorem é substituída por chips, mesmo que o L seja minúsculo. A palavra lorem aparece apenas uma vez dentro desta cadeia de texto, mas se você quiser procurar algo que apareça várias vezes, como um caractere E. Vamos em frente e dar uma olhada nisso, se copiarmos este exemplo e depois comentar isso, e depois colar isso dentro e abaixo da seção I modificar. Podemos ver aqui que o modificador I, vamos fazer uma pesquisa que é em maiúsculas e minúsculas, mas você só irá substituir a primeira correspondência dentro da nossa string. Mudamos lorem para ser E, há várias ocorrências e, em seguida, substitui com um maiúsculo A. Recarregar o navegador. Agora vemos que apenas a primeira ocorrência de um E é substituída. Não há mais A's maiúsculas dentro da nossa corda. No entanto, se quisermos substituir todas as ocorrências, podemos usar o modificador G desta vez. Vamos copiar esta linha de código aqui, comentar isso e, em seguida, colar isso sob o modificador G. Tudo o que precisamos fazer é mudar o I para ser um G, recarregar o navegador. Agora vemos que todas as ocorrências de E foi substituído por um maiúsculo A. G significa Global e vai encontrar substituir todas as correspondências em nossa cadeia de texto em vez de parar após o primeiro. Assim como quando usamos o modificador I. Ele só procurará uma letra, mas se quisermos corresponder a várias letras, podemos adicioná-los dentro de colchetes. Vamos dar uma olhada nisso. Se copiarmos esta linha aqui e comentar isto. Vamos deixar isso nos arquivos iniciais para referência futura, colar isso sob a seção colchetes e, em seguida, dentro de todas as barras, podemos adicionar alguns colchetes. Dentro desses colchetes, se procurarmos por H, G ou S. Vamos fazer essas letras minúsculas com o modificador G e então vamos adicionar algo que se destaca. Vamos adicionar algumas estrelas e em maiúsculas vai dizer “Substituído”. Quando procuramos através da string, a primeira ocorrência de H, G ou S será então substituída pela string aqui. Salve isso e, em seguida, recarregar e rolar para cima, podemos ver a primeira ocorrência foi substituída pela nossa string aqui. Isso também pára após a primeira partida. Se quisermos substituir todas as ocorrências de H, G ou S. Poderíamos adicionar novamente o modificador G. Vamos copiar esta linha aqui, comentar isso e, em seguida, adicionar isso sob a seção G Modificar. Após a nossa expressão regular vamos adicionar o modificador G, salve isso e podemos ver que todas as correspondências foram substituídas. Estes colchetes também funcionam para números. Vamos copiar isso, comentar isso e adicionar isso logo acima do nosso registro de console dentro dos colchetes, em vez de procurar por nossas letras, vamos para os números de três a seis. Isto irá encontrar todos os números de três a seis, remover o G e, em seguida, substituí-lo por esta cadeia de texto aqui. Para que isso funcione, precisamos adicionar um número ao nosso texto acima. Vamos para o número cinco adicionar isso, recarregar. Vamos tentar procurá-lo, lá vamos nós. Há os nossos textos de substituídos na posição do nosso número cinco. Esta é uma primeira olhada no uso de expressões regulares para corresponder a um padrão. Se nós Google expressões regulares Mozilla. Você é sobre, encontrar muito mais exemplos nesta seção de expressão regular. Nós clicamos nisso e, em seguida, vamos para a documentação do Mozilla. Podemos ver que há muitas maneiras diferentes de criar trocadilhos. Se rolarmos para baixo, algumas dessas expressões regulares são ferramenta bastante complexa. Eu não vou passar por todos estes desde a maioria dos casos de uso específicos perguntou. Você pode encontrar quase qualquer maneira que ele corresponde a um padrão usando expressões regulares. No próximo vídeo, vamos construir um pequeno projeto usando expressões regulares para pegar as entradas do usuário e executar uma busca e substituição. 41. RegEx para encontrar e substituir projeto: Bem-vindos de volta, rapazes. Neste vídeo, vamos usar expressões regulares, para construir um simples aplicativo de busca e substituição. Dentro dos arquivos de início, temos uma forma básica onde o usuário pode digitar uma palavra dentro da seção de busca. Isto irá e, em seguida, encontrar uma palavra dentro seu texto original e, em seguida, podemos escolher uma palavra para substituí-la. Uma vez selecionado este botão Substituir, este botão Substituir irá acionar uma função que fará com que tudo isso aconteça. Vamos começar adicionando um ouvinte de eventos a este botão. Nos arquivos iniciais, este é o Número 33 que é rejeitado, encontrar, substituir. Aqui temos o nosso formulário com as entradas de busca, as entradas de substituição e, em seguida, o nosso botão, que tem o ID de ReplaceBtn. Vamos ao nosso roteiro que está lá embaixo. Vamos assim com document.getElementById. O ID como acabamos de ver é ReplaceBTN. Em seguida, adicione um ouvinte de eventos. Dentro dos colchetes, sabemos que precisamos adicionar dois valores. O primeiro é o nome do evento. Nós vamos estar ouvindo os eventos cliques. Então vamos acionar uma função de seta assim. Aqui dentro essas quatro coisas que precisamos pegar e armazenar dentro de variáveis. Precisamos pegar as entradas do formulário para a seção de busca. Precisamos pegar a entrada para a seção de substituição e, em seguida, precisamos pegar nosso texto original, que é o nosso primeiro conjunto de elementos p. Então precisamos pegar nossos segundos elementos p, que vai conter nosso texto com as palavras substituídas. Vamos adicionar essas quatro variáveis dentro do nosso ouvinte de eventos. Vamos começar pegando nosso texto original e , em seguida, nosso texto modificado dentro dos elementos p. Deixe textos originais ser igual a documents.QuerySelectorAll. O texto original é a primeira ocorrência dos elementos p. Adicione a tag p aqui dentro na posição de índice zero. Em seguida, vamos copiar esta linha e colá-lo logo abaixo. Este vai ser o texto modificado. A única diferença é que o elemento p é desta vez no índice número um. Agora também precisamos armazenar as entradas do usuário que tem um ID ou encontrar e também substituir. Vamos instalar estes dois dentro de uma variável também. Deixe nosso FindText ser igual a documents.getElementByID, o primeiro foi find. Queremos pegar o valor do usuário. Temos valor, copie esta linha e cole-a novamente logo abaixo. Este vai ser o texto de substituição. Vamos substituir o texto. O ID desta vez é substituído. Ok, bom, então certifique-se que o seu se parece com este exemplo aqui. Agora temos todas as informações que precisamos armazenadas em variáveis. Em seguida, precisamos pegar o HTML interno do nosso texto original. Isto é texturização apenas aqui, então, na parte inferior de nossa função, digamos que originalText.InnerHTML descreve todo o conteúdo de texto do nosso texto original. Então vamos usar o método de substituição de pontos, que vimos no último vídeo. Isso leva em nossos dois valores. A primeira é a palavra que queremos encontrar. Isto é armazenado dentro de uma variável chamada FindText, em seguida, separado por uma vírgula, a palavra com a qual queremos substituí-lo. Isso é armazenado dentro desta variável de texto de substituição. Substituir texto como nosso segundo valor, o ponto e vírgula no final, então podemos instalar isso dentro de uma variável chamada newText. Finalmente, queremos produzir este newText para os nossos elementos p vazios que está apenas aqui. Já temos uma lista de referência chamada texto modificado. Vamos adicionar isso na parte inferior, então modifiedText.innerHTML vai ser igual a este newText apenas aqui. Ok, bom. Acho que estamos prontos para ir ao navegador e fazer um teste. Vamos procurar uma de nossas palavras. Digamos que senta, encontre a palavra de sentados. Em seguida, substitua-o por suporte de suporte. Pressione substituir e nada parece acontecer. Se olharmos um pouco de atenção e adicionarmos isto mais uma vez. Se clicarmos neste botão de substituição e assistir muito de perto para baixo na parte inferior. Podemos ver o brevemente o novo texto será liberado e, em seguida, desaparecer. Isto é porque, esta parte dentro dos elementos de forma. Quando clicamos neste botão, o comportamento padrão é enviar o formulário. Isso faz com que a página seja recarregada. É também por isso que as entradas estão agora claras na parte superior porque a página fez uma atualização. Para corrigir isso, podemos impedir o comportamento padrão deste evento. Primeiro, podemos adicionar o e, que é os detalhes de nossos eventos, dentro do parêntese de função, então podemos evitar o comportamento padrão dentro do corpo da função com e.preventDefault. Isso impedirá o envio do formulário e, portanto, não veremos uma atualização de página. Vamos tentar de novo. Nós substituímos sentar com suporte, clique em “Substituir” e lá vamos nós sob nossa nova seção de tecnologia. Vemos que a palavra sit foi substituída por suporte e não vemos mais uma recarga de página. Há também outra maneira de corrigir isso também. Em vez de ter e.preventDefault, podemos remover isso. Podemos remover a nossa variável e a partir daqui e em vez disso, se formos até o botão, dentro do nosso formulário também podemos adicionar o tipo de botão. Agora este é um tipo de botão em vez de enviar. Isso interromperá a ação padrão de envio. Agora vamos tentar e desta vez vamos substituir Ipsum por qualquer uma das palavras. Pressione “Substituir”. Agora temos também o nosso novo texto agora tem esta palavra substituída. A última coisa a observar é como tornar esta pesquisa insensível. Se procurarmos a palavra lorom usando estes pequenos l e substituí-la por qualquer coisa. Aperte “Substituído”. Vemos que isso não funciona abaixo. Você pode pensar que poderíamos apenas adicionar um modificador como este, então para baixo para o nosso novo texto dentro de Localizar e Substituir vamos adicionar nossas duas barras e, em seguida, os modificadores I exatamente como este. No entanto, se fôssemos dizer isso, atualizar e dar a eles um go, digite em lorem. Nossas palavras de substituição, vemos que isso ainda não funciona. Para fazer isso funcionar, precisamos usar uma função construtora, então de volta para nossos scripts. Só um pouco de um novo texto que vamos dizer, “Nova expressão regular”, assim. Então, dentro desses colchetes, vamos passar neste texto de busca. Nosso design como nosso primeiro valor. Separado por uma vírgula, podemos adicionar o modificador I. Esta função construtor irá compilar os resultados incluindo este modificador e, em seguida, poderíamos instalar isso dentro de uma variável. Digamos que encontre, com modificador e defina isso para nossa função de construtor. Em seguida, podemos usar este nome de variável e passa através do nosso substituto. Ao invés do que temos aqui, vamos apenas passar um nome de variável. Você tem que salvar e, em seguida, vamos tentar isso, assim lorem, com minúsculas l. Aperte Substituir e agora você vê isso está funcionando. Ótimo, então esta função construtor compila nosso tempo de execução que é ideal para padrões que podem mudar. Embora saibamos o padrão que procuramos, ele pode mudar dependendo do caso das letras. Ótimo, agora temos uma descoberta de trabalho e substituição que é insensível a maiúsculas e minúsculas. Vamos agora passar para o próximo vídeo. 42. HTTP, solicitação e resposta: Até agora, neste curso, analisamos principalmente como as coisas funcionam no front-end. Criamos interfaces de usuário, layouts diferentes, analisamos o design responsivo e também como usar JavaScript. Tudo isso é ótimo e realmente importante que entendamos tudo isso. partir desta seção, também vamos estar olhando mais para o back-end de sites. Como um site interage com servidores, diferentes fontes de dados e, em geral, como eles se comunicam com fontes externas. Quando nossa interface de usuário está se comunicando com servidores ou geralmente solicitando qualquer informação, há alguns conceitos que precisamos saber para entender completamente o que está acontecendo. Nós não precisamos ser um especialista para ir muito fundo em cada um desses conceitos. Como a maioria vem como um tópico por conta própria, mas ter, pelo menos, um entendimento geral realmente nos ajudará a entender o que está acontecendo. O primeiro conceito que vamos analisar é o modelo de servidor cliente. Como você pode ver aqui no slide, no lado esquerdo temos alguns exemplos de clientes. Um cliente pode ser um navegador da web, um telefone ou até mesmo um terminal em nosso computador. Basicamente, o cliente é aquele que faz as solicitações, como um solicitando quaisquer páginas da web que você deseja visualizar. Do lado direito, temos o servidor que fornece esses recursos, todos os serviços que o cliente está solicitando, como a nossa página web, que enviará de volta ao cliente se o tiver. Quando um cliente faz uma solicitação, como solicitar uma página da Web, isso é chamado de solicitação HTTP. HTTP significa Hypertext Transfer Protocol. Este é o padrão ou o procedimento usado ao transferir dados de hipertexto pela Web. O cliente vai em frente e faz a solicitação e, em seguida, o servidor tentará responder a essa solicitação, se possível. Ele pode responder com coisas como o HTML necessário para a página web, quaisquer imagens, ou quaisquer scripts que possam ser necessários também. Embora isso possa parecer um pouco complexo, é algo que fazemos cada vez que visitamos um navegador da web. Em primeiro lugar, se formos para a página inicial da Wikipédia, no topo, você notará que HTTPS está no início. Isto é como o HTTP que mencionamos antes. Mas hoje em dia, HTTP secure é mais comumente usado, pois fornece uma versão criptografada, uma maior segurança e privacidade. Depois de inserir um URL e clicar em “Enter”, o navegador da web, ou, no nosso caso, o cliente está agora fazendo uma solicitação para esta página web. Se tudo correu bem, o servidor responderá com a página solicitada e, em seguida, exibi-lo no navegador. Este ciclo de resposta de solicitação também funciona da mesma forma para outros clientes, como um terminal de computador, que também é um cliente. Vamos abrir o terminal. Torne isso um pouco maior. Usaremos um terminal mais uma vez que chegarmos à seção de nó deste curso e você não precisa seguir junto com a seção se não quiser. Mas tudo o que eu vou usar é um comando cURL, que também faz uma solicitação HTTP do terminal. Fazemos isso digitando cURL, e então podemos digitar nossa URL, assim como olhamos antes dentro do navegador. HTTPS://e, em seguida, www.wikipedia.org. Em seguida, aperte “Enter”. Então, se nós rolar para cima para ver um monte de informações está sendo devolvido de volta para nós. Este é todo o HTML que é usado para o site da Wikipédia. Muito disso parecerá comum, como as divs, nossas tags span, e todas as várias classes que são adicionadas estas. Não deve ser um pouco difícil de ler. Isso ocorre porque um terminal não sabe como lidar com este HTML que é retornado para nós, então ele é apenas exibido como texto simples. Por outro lado, um navegador da web sabe exatamente o que fazer com este HTML. Então, se ir para o navegador, e clique com o botão direito e, em seguida, ir para Exibir página fonte, isso também pode ser um pouco difícil de ler, mas esta é a mesma informação que está sendo enviada de volta do servidor. A diferença é que o navegador da web sabe como lidar com essas informações e como então convertê-las em uma página web. Quando fazemos uma solicitação HTTP, há vários métodos de solicitação que podemos usar. Aqui podemos ver quatro exemplos chamados GET, POST, PUT e DELETE. Há mais do que estes quatro, mas estes são comuns para nos ajudar a começar. Quando queremos obter uma página web, ou queremos obter alguns dados, podemos usar o que é chamado de solicitação GET. Isto é o que é usado no navegador para obter a nossa página web a partir do servidor. POST fará o oposto e enviará alguns dados para o servidor para processamento, como adicionar um novo registro em um banco de dados. Em seguida, temos o pedido PUT. Assim como o POST, isso também enviará alguns dados para o servidor para processar. No entanto, a diferença é que se esses dados ou o recurso já existe no servidor, ele irá em frente e substituí-lo. Isso é usado comumente para atualizar alguns dados. O final é o DELETE e isso é bastante auto-explicativo. Isso excluirá o recurso ou os dados que especificamos. Usaremos alguns desses métodos durante este curso, particularmente no projeto final ao interagir com um banco de dados. Parte dessa resposta do servidor também é um código de status. Existem muitas respostas diferentes, mas aqui estão alguns exemplos. Um código de 200 significa que a solicitação foi bem-sucedida e o recurso solicitado é enviado de volta para o cliente dentro do corpo da resposta. Em seguida, temos a resposta 301, que é uma mensagem de redirecionamento. Isso significa que o recurso que estamos tentando solicitar foi movido permanentemente. Nós geralmente obtemos o novo URI dado com a resposta. Uma resposta 401 significa que o cliente não está autorizado, geralmente exigindo autenticação antes de receber a resposta solicitada. 404 é um comum que você já pode ter visto ao navegar na web. Isso é comum quando uma página não pode ser encontrada, como quando um usuário digita incorretamente uma URL. Muito disso pode parecer acontecer em segundo plano por magia, mas podemos ter uma ideia melhor do que está acontecendo dentro das ferramentas do desenvolvedor. Se voltarmos a qualquer página web, como a Wikipédia, e depois clicar com o botão direito do mouse, e depois inspecionar, aqui dentro, podemos ir para a guia Rede, apenas na parte superior aqui, e, em seguida, clicar em Atualizar e, em seguida, podemos ver que temos um monte de nomes de arquivos diferentes que foram devolvidos para nós. Temos a página principal. Temos várias imagens JPEG. Temos alguns scripts, algumas imagens PNG e rolagem para baixo, vemos que todos estes são devolvidos de volta para nós a partir do servidor. Nós também podemos ver o código de status também e a maioria deles são código de 200, que nós olhamos antes. Isso significa que a solicitação foi bem-sucedida. Se olharmos para a página principal no topo, podemos ver um código de status de 304 para esta página inicial. Isso significa que a página não foi modificada desde a última solicitação, portanto, o navegador pode usar o que é chamado de versão em cache. Um cache é um armazenamento temporário e os navegadores usarão um cache para armazenar nossas páginas da Web assim que as visitarmos, que possam ser acessadas mais rapidamente e também reduzir a necessidade de continuar fazendo solicitações adicionais do servidor. É por isso que se formos até o topo e clicar em Desativar cache, ele recarrega. Agora vemos que esta página principal agora tem um código de status de 200. Isso significa que agora estamos fazendo uma nova solicitação para o servidor para esta página da Web, em vez de armazená-la dentro do navegador para acesso rápido. Agora, se desmarcarmos isso e depois atualizarmos, podemos ver o código de status de 304, que significa que estamos usando a versão armazenada dentro do navegador em vez de fazer uma nova solicitação. Esta é uma visão geral de como as coisas funcionam entre o cliente e o servidor. Mesmo tendo apenas um conhecimento básico desses conceitos vai realmente ajudá-lo a entender o que está acontecendo nos bastidores e realmente ajudá-lo como um desenvolvedor. Em seguida, analisaremos as APIs e como podemos usá-las em nossos sites ou aplicativos para obter dados de fontes externas. 43. O que é uma API?: Esta parte API do curso vai ser realmente emocionante seção. Se você não trabalhou com nenhuma APIs antes, ou geralmente quaisquer dados de fontes externas. Vamos começar olhando para APIs, e isso significa Application Programming Interface, que soa muito complexo, mas é apenas uma maneira de conectarmos nossos sites ou aplicativos a outra fonte de dados. Ele basicamente define como nosso aplicativo pode falar com outros aplicativos e serviços. Algumas das maiores empresas por aí têm uma API para desenvolvedores com a qual podemos nos conectar. Por exemplo, poderíamos criar nosso próprio aplicativo de música, exatamente como queríamos parecer. Em seguida, use a API do Spotify para pesquisar músicas ou álbuns, ou até acessar quaisquer dados do usuário, como faixas salvas, e depois exibi-los diretamente no nosso próprio aplicativo. Há também uma API do YouTube, que podemos usar a pesquisa e exibir vídeos dentro de nossos próprios projetos. Isso também fornece uma maneira para essas empresas permitir que os desenvolvedores acessem os dados com segurança, o que eles permitem. Esses provedores exigirão primeiro o registro e também uma chave de API, antes de conceder acesso. Assim como no início do curso, analisamos o uso do Google Maps. Quando temos que registrar e fornecer uma chave API, coisas para funcionar. Como acessamos esses dados da API? Bem, nem todas as APIs são exatamente as mesmas, mas geralmente fazemos uma solicitação para uma URL, esta é uma solicitação get, como aprendemos no último vídeo. Porque queremos obter alguns dados. Esse URL é chamado de pontos finais. Por exemplo, estes são os endpoints de API do Spotify aqui na parte superior. Esse endpoint geralmente é estendido para ser mais específico sobre os dados que queremos obter. Por exemplo, podemos pegar algumas informações do álbum. Podemos obter álbuns com uma identificação específica. Podemos realizar pesquisas e até mesmo recuperar informações da lista de reprodução de um usuário. Para lhe dar uma idéia melhor de como isso funciona, há uma API simples que podemos usar com informações sobre todos os tipos de cães. Vamos para o navegador e eu vou para o CEO cão, que é www.dog.ceo. Em seguida, para pegar a API faria encaminhar barra cão traço API, aperte “Enter”. Podemos ver que esta é a maior coleção de fotos de cães de código aberto. Alguns destes nos permitirão pesquisar através das raças de cães, pesquisar através das imagens, e geralmente reunir informações que queremos encontrar. Isso nos dará alguns exemplos dos pontos finais que podemos usar para obter dados diferentes do cão. Isso é útil para começar porque não precisamos registrar ou usar quaisquer chaves de API para começar. Rolando para baixo, podemos ver nossos endpoints aqui, que é a primeira parte do endereço web que acabamos de visitar. Dentro da API, podemos então filtrar por raças e, em seguida, selecionar as imagens e, em seguida, selecionar uma imagem aleatória e, em seguida, retornamos com alguns dados JSON. Se formos para a documentação, podemos olhar para mais alguns exemplos. O primeiro exemplo que vemos é a lista de todas as raças. Então este é o URL pontos finais que você precisa visitar para pegar todas essas raças de cães em formatos JSON. Se clicarmos nisso, copie e cole-o no navegador. Retorne para sua informação no formato JSON. Se o seu parece um pouco difícil de ler ou não se parece com isso, você pode precisar de uma extensão de navegador JSON para formatá-lo em uma estrutura mais legível. Há muitos formatos JSON diferentes que podemos usar, mas estou usando um formatador JSON. Vou para a extensão do Chrome e, em seguida, formatador JSON. Você pode acompanhar este link e, em seguida, adicioná-lo como uma extensão do Chrome clicando no botão “Adicionar ao Chrome” na parte superior. Eu já tenho isso instalado, então eu vou apenas fechar sua guia por enquanto. JSON significa JavaScript Object Notation e sua sintaxe para a troca de dados através da web. Ele é formatado como um objeto JavaScript, mas na verdade é independente de linguagem, que significa que ele pode ser criado e lido por outras línguas também. Aqui podemos ver um objeto como sintaxe usando estes redondos em chaves. Nós também temos os pares de valor nome, como status de sucesso. Então dentro desta mensagem aqui temos um objeto contendo todas as raças de cães que pediram. Podemos ver que alguns deles são apenas objetos vazios porque não há dados para esta raça em particular. No entanto, por exemplo, se rolarmos para baixo, um como o bulldog é um array que contém dois tipos diferentes. Se voltarmos para a documentação API, e, em seguida, se descermos para a lista de raça, aqui, podemos clicar sobre as informações JSON para qualquer tipo diferente de raça que você deseja verificar. Podemos ver quais imagens temos associado a estas. Vamos em um boxeador e clicar no “JSON Data”. Você pode ver pelo endpoint URL na parte superior com filtragem da raça, para baixo pelo boxer. Então acessaremos as imagens. Podemos clicar em qualquer uma dessas imagens também, e depois ver quais imagens são fornecidas. Para mudar a raça, tudo o que precisamos fazer é alterar a URL. Ao invés de ter pugilista, vamos mudar isso para algo mais como Hound. Depois temos uma lista de imagens diferentes para o cão. Vamos tentar mais uma. Vamos para o labrador. Aqui está uma lista de todas as imagens para os labradores. Este é o formato JSON e é provavelmente o tipo mais usado. Alguns deles que costumavam ser populares para transferência de dados também era um formato chamado XML. Aqui está um exemplo dos mesmos dados usando JSON à esquerda e XML à direita. XML é muito descritivo usando tags semânticas, que se parece um pouco com HTML, você ainda verá alguns dados API fornecidos em formato XML. No entanto, a maioria agora tem um JSON versão 2, ou mesmo apenas JSON por si só, uma APIs mais modernas. Isso ocorre porque JSON é muito mais curto e leve, como podemos ver à esquerda com os mesmos exemplos. Agora eu tenho alguns antecedentes sobre o que é uma API e como podemos usar os dados. Vamos agora voltar ao nosso aplicativo de busca de músicas, que começou no início do curso. No início, criamos a interface do usuário. Agora vamos passar para pegar nossos dados API e mostrar uma lista de músicas na tela. 44. Buscando dados e strings de consulta: No início do curso, criamos uma estrutura HTML para nossa música, encontrar o layout. Eu também desafiei você a adicionar um pouco de estilo e layout usando a grade CSS para tornar as coisas ainda melhores. Nesta seção, vamos estar concluindo este projeto usando uma API para extrair alguns dados de músicas reais que podemos usar do iTunes. Também usaremos a API JavaScript Fetch, que nos permitirá buscar um recurso ou, no nosso caso, queremos buscar os dados do iTunes. Vamos começar abrindo nossa música, encontrar um projeto de mais cedo. Se ainda não tiver feito isso, abra o projeto final da música no Visual Studio Code e, em seguida, abra a página de índice no navegador. No arquivo index.html, criamos alguns dados de amostra para nossas músicas. Vamos criar esta seção dinamicamente usando JavaScript e, em seguida, pegar os dados da música da API do iTunes. Podemos ir em frente e remover o conteúdo desta seção principal, mas vamos deixar um para referência. Vamos para a página de índice e, em seguida, role para baixo até a seção principal com o ID das músicas. Eu vou deixar em um desses artigos e, em seguida, remover os cinco extras uma vez em baixo, para cinco direita para baixo para o fundo do fechamento principal afundado, Eu trazer isso para cima. Ficamos com apenas uma música. Guarde isso e atualize o navegador. O próximo passo é criar nosso arquivo de script. Este vai ser um arquivo JavaScript. Clique com o botão direito do mouse em novo arquivo e chame este script.js Então precisamos vincular a isso no index.html, então role para baixo até a parte inferior e logo antes da tag body de fechamento, vamos adicionar nosso script, fecha isso e, em seguida, adicionar a fonte do script. Isso está no mesmo diretório, então podemos apenas fazer referência a isso por script.js. Se eu salvar. Agora estamos prontos para ir. Vamos para a documentação do iTunes e dar uma olhada no que vamos usar. Vá para o Google. Vamos procurar o iTunes, procurar a API. Vamos rolar para baixo. O que precisamos é da API de pesquisa do iTunes, que está no site do desenvolvedor da Apple. Vamos clicar nisto. Vamos começar selecionando a pesquisa no menu, o cíclico, e então podemos clicar em construir uma pesquisa. Quando discutimos APIs no último vídeo, mencionamos que geralmente buscamos os dados conectando-se a uma URL, que é chamada de endpoints. Aqui também podemos ver os endpoints API fornecidos pelo iTunes, que é apenas aqui. É itunes.apple.com, pesquisa de barra. Em seguida, após este endpoint, podemos adicionar alguns pares de valor de chave para obter as informações que queremos. aviso no final deste URL é um ponto de interrogação. Este é apenas um separador para separar o URL das consultas que você deseja perguntar. Vamos dar uma olhada nisso em um momento. Este URL com os parâmetros no final é chamado de string de consulta. Se rolarmos para baixo, podemos ver alguns pares de valores-chave nesta tabela aqui. Começando com o termo de pesquisa, este é provavelmente o mais importante para o nosso uso. Seu termo que vamos procurar para encontrar nossas músicas do banco de dados. Rolando para baixo, também podemos pesquisar por mídia 2 ou podemos restringir isso para procurar em uma música. Ou podemos até incluir coisas como filmes, todos os podcasts. Também podemos limitar nossa pesquisa também para que não obtenhamos muitos valores de retorno. Se rolarmos para baixo, também podemos ver esse parâmetro limite aqui. Eu também usarei o limite também, então não recebemos muitos resultados de pesquisa retornados para nós. Para ver estes funcionando em ação, podemos simplesmente digitá-los no navegador. Vamos até o topo. Vamos copiar este URL e, em seguida, adicioná-lo em uma nova guia. Antes de pressionar enter, precisamos adicionar alguns pares de valor de chave com a pesquisa para trabalhar. Se você voltar para a documentação, podemos usar qualquer um desses pares de valor de chave que olhou antes, como um termo de pesquisa. Após o ponto de interrogação, podemos adicionar um termo e, em seguida, igual. Vamos para a Beyoncé e eu aperto Enter. Então eu tenho um arquivo de texto que é baixado. Podemos abrir isto e ver o conteúdo. Podemos ser um pouco difíceis de ler no momento, mas podemos ver no topo que temos 50 resultados retornados para nós, seguidos por uma matriz de nossos resultados com todas as informações sobre cada música. Se quisermos limitar isso, podemos então adicionar alguns valores extras. Em seguida, cole em nossa consulta novamente o termo igual Beyoncé. Em seguida, podemos adicionar mais pares de valor chave. Essa seqüência de caracteres de consulta separada pelo e comercial, então adicione o e comercial aqui. Em seguida, podemos usar limites, que também olhamos antes e definir isso para resultados livres, clique em “Enter”. Temos um novo arquivo de texto para download. Vamos abrir isto. Agora tem um resultado contagens de livre e muito menos dados. Temos apenas faixas individuais livres dentro da matriz. Para ver isso mais claramente, vamos copiar todas as informações do nosso arquivo de texto, então eu fecho isso. Vá para o Google. Então vamos procurar código embelezar. Isto é o que precisamos, um codebeautifty.org. Abra isso. Vamos usar o JSON Viewer para ver como isso parece. À esquerda temos as entradas JSON que você pode colar em nossas informações a partir de um arquivo de texto e, em seguida, podemos clicar em embelezar no meio e ver os resultados no lado direito. Clique na cruz no canto superior para tornar isso ainda maior. Agora, podemos ver mais claramente as informações que são devolvidas do iTunes. Temos as contagens de resultados que já vimos antes. Então temos uma matriz de resultados com valores livres. Este primeiro é um objeto que contém todas as informações sobre a música. Temos alguns URLs para o trabalho artístico e vamos usá-los em nosso aplicativo. Para obter as imagens de cada camião, temos também a identificação do camião do nome da artista Beyoncé. Temos um nome de caminhão e muitas mais informações sobre a música. Estes são todos os dados JSON que podemos usar em nossa aplicação. Sabemos como obter esses dados usando o URL. Agora podemos usar Fetch para realmente trazer esses dados para o nosso projeto. Vamos voltar para o Visual Studio Code e, em seguida, para o script.js sobre um tópico para acessar a API Fetch. Em seguida, dentro daqui nós passamos na URL, que quer acesso, então cole dentro Oops, na verdade, precisamos voltar para o iTunes e depois copiar os endpoints da API e colar isso entre as causações. Se dermos isso um salvamento e depois passar para o nosso aplicativo, recarregue o navegador. Se atualizarmos, não vemos nada diferente até agora. Mas podemos ir em frente e atribuir essa busca a uma variável e ver o que está acontecendo com um log de console. Defina uma constante chamada de dados e defina isso igual a uma busca. Abaixo disso podemos console.log. Então isso é passar os dados, que são os dados retornados por esta busca, em seguida, para o navegador. Então, se clicar com o botão direito do mouse em “Inspecionar” e verificar isso no console, então vamos atualizar, para que possamos ver que temos algo chamado uma promessa retornado como uma resposta, que parece estar pendente. Antes de entrarmos em mais detalhes, vamos tentar mais uma coisa. Logo após este log do console, vamos fazer um tempo limite definido JavaScript, que vai executar o mesmo log do console após dois segundos. Dentro daqui podemos passar em uma função ES_6 [inaudível]. Então podemos copiar esse registro do console, colar isso, adicionar uma vírgula, e executaremos isso depois de 2.000 milissegundos. Dê-nos salvar e, em seguida, vamos voltar para o console e, em seguida, recarregar. Se esperarmos dois segundos, vemos que há uma segunda promessa. Mas desta vez resolveu-se com uma resposta. Estes resultados que você vê dentro do console por causa de duas coisas. Em primeiro lugar, ao usar fetch, ele retornará o que é chamado de promessa, e em segundo lugar, porque o pedido é o que é chamado de assíncrono. Não se preocupe se você não entender o que qualquer um desses conceitos significa no momento, vamos cobrir o que ambos significam no próximo vídeo. 45. Código Async e promessas: No último vídeo, buscamos alguns dados usando a API do iTunes. Saímos os mesmos dados duas vezes em um console. Um imediatamente, e depois um segundo depois de dois segundos. Isso nos deu dois resultados diferentes, que são ambas Promessas. Vamos dar uma olhada no que são isso muito em breve. O primeiro que podemos ver teve um resultado de pendente e, em seguida, o mais tarde tem uma resposta de resolvido. Para entender por que isso está acontecendo em primeiro lugar, e por que precisamos de promessas, primeiro precisamos entender o que é o código assíncrono. Algumas linguagens de programação, como PHP, são o oposto. PHP é classificado como síncrono Isto significa que quando nosso código está pronto, ele é lido do topo do arquivo para o fundo. Código síncrono como PHP começará na primeira linha. Em seguida, ele irá executar este código na primeira linha e, em seguida, apenas passar para a próxima linha quando a operação tiver terminado. Basicamente, o programa irá parar e esperar que a operação termine antes de passar para a próxima linha de código. No entanto, muitos códigos JavaScript funcionam de forma assíncrona. Pegue nossa busca, por exemplo. Se a solicitação para os dados levar muito tempo para retornar para nós, estaremos bloqueando o resto do código de executado enquanto esperamos que esses dados voltem. Em vez disso, o que acontecerá é que essa linha de código ainda será executada, e antes de esperar pela resposta, passará para a próxima linha do programa ou script, portanto, não bloqueando o resto do código. Agora enviamos o pedido para esses dados. Estamos esperando uma resposta em algum momento no futuro. Não sabemos quando esses dados serão devolvidos para nós ou se os dados do iTunes voltarão. Para este caso, temos o que é chamado de Promessas, e isso é o que voltou para nós de antes. Quando olhamos para buscar no último vídeo, enviamos a solicitação para nossos dados. Nós executamos imediatamente um log de console e isso teve o resultado de pendente, que você pode ver aqui. Isso ocorre porque o programa executou o log do console antes que os dados foram retornados. Após esperar dois segundos, nossos dados devem ter sido retornados porque esse log do console foi resolvido. Para o nosso código no Visual Studio. Vamos fechar esta barra lateral. Vamos dar uma olhada em como podemos lidar com essa Promessa. Primeiro, vamos remover esses logs de console e limpar nosso código, deixando apenas a busca no topo. Também vamos remover esta constante aqui, adicionar um ponto-e-vírgula no final. Uma promessa é apenas uma maneira de declarar o que queremos fazer quando os dados forem eventualmente retornados. Quando os dados forem retornados com sucesso, executamos o código dentro de.then. Dot então pode ser acorrentado no final, assim como este. Ou para torná-lo mais legível, você costuma vê-lo em sua própria linha. Vamos adicionar enter e soltar isso na linha abaixo. Em seguida, dentro de.then, podemos adicionar uma função que você deseja executar. Vou adicionar uma função de seta ES6, assim como esta. Isso funciona exatamente como funções que já vimos. Ele leva na resposta dentro desses parênteses como um argumento. Adicione resposta dentro daqui. O nome depende de nós, mas a resposta é bastante descritiva. Vou deixar assim. A resposta é apenas uma resposta HTTP, portanto, precisamos extrair os dados Json do corpo de resposta usando o método. JSON. Dentro daqui, diga response.JSON. Então podemos ir em frente e devolver os dados do Json. Ou, alternativamente, ao usar funções de seta, se a função tem apenas uma instrução como aqui, podemos até remover a palavra-chave return e também as chaves. Adicione isso em uma linha, então vamos remover as chaves. Vamos remover a palavra-chave return e, em seguida, puxar esta resposta para a mesma linha. Isso vai fazer exatamente o mesmo, mas manter nosso código um pouco mais limpo. Nós também podemos encadear como muitos casos. Em seguida, no final como nós gostamos. Então vamos adicionar mais um, que será executado após o primeiro ter terminado, e, em seguida, tomar os dados Json para que possamos fazer algo com ele. Adicione um segundo.then, que leva em uma função. Novamente, isso vai ser uma função de seta ES6 que leva nos dados. Estes dados são passados para ele a partir da linha acima, que é o Json extraído. Ok. Voltar para a nossa função, podemos, em seguida, console registrar os dados de nossa API, Console.log e, em seguida, passar em nossos dados. Uma última coisa antes de irmos para o console, precisamos adicionar um termo de pesquisa, então no topo. Lembre-se de antes que precisamos adicionar um termo de pesquisa, assim como olhamos dentro do navegador. Vamos para a Beyoncé mais uma vez. Você pode, naturalmente, mudá-lo para ser qualquer coisa que você preferir. Dê isso, “Salvar” e, em seguida, recarregue o navegador. Ok. Agora temos a nossa resposta com os 50 resultados. Podíamos ver devolvido a nós temos uma matriz de resultados com 50 valores dentro de lá. Vamos abrir isto e depois abrir os nossos resultados. Podemos ver os dados individuais de cada música. Mais uma vez, como antes quando abrimos isso, podemos ver todas as informações dos artistas e também algumas obras de arte que vamos começar a usar em nosso aplicativo em breve. Se quisermos reduzir isso e mostrar apenas os resultados dentro do console, podemos dizer data.results. Dê esse “Salvar” e, em seguida, atualize. Agora só temos os nossos 50 resultados. Então eu também vou remover essa string de consulta de dentro da busca. Corte isso e, em seguida, vamos criar uma constante chamada URL. Tem na loja esta string de consulta dentro daqui. Então tudo o que precisamos fazer é passar o URL como nossa variável e, em seguida, atualizar e verificar que tudo ainda está funcionando bem. Ok. Ótima. Há os nossos 50 resultados, que são os mesmos de antes. Tudo ainda está funcionando bem. seção.then da promessa lida com o que fazer quando uma resposta é resolvida. Se tivermos um erro e a resposta for rejeitada, podemos ir em frente e encadear um.catch no final para lidar com esse resultado. Bem no fundo, podemos dizer. Esta é uma função que vai tomar no erro, e vamos criar isso como uma função de seta ES6, que simplesmente faz um log de console. Então aqui dentro podemos dizer, vamos para o pedido falhar, então uma vírgula. Então, depois daqui, podemos passar nossa mensagem de erro assim. Se darmos um salvamento. Se recarregarmos o navegador, não vemos nenhuma diferença porque a solicitação está funcionando. Não estamos recebendo nenhum erro passado para nós. No entanto, se criarmos um erro de digitação no URL, então vamos excluir o e de lá e, em seguida, recarregar. Agora vemos que nossa mensagem de erro foi capturada com a declaração catch. Isso está executando nossos textos de solicitação falha. Então temos nosso erro após a função. Ok. Vamos voltar ao Visual Studio e restabelecer nossa URL, verificar se tudo está funcionando bem e estamos prontos. Ótima. Agora temos nossos dados que estamos puxando do iTunes e no próximo vídeo, vamos começar a usar esses dados para criar nossos elementos, para exibir nossas músicas no navegador. 46. Map através de resultados: Agora temos os dados que precisamos para criar nossa música ouvindo dentro do contêiner principal do arquivo de índice. Vamos para o index.html, dentro desta seção principal temos deixado no lugar uma música ouvindo e podemos usar isso como um guia. Nós vamos estar percorrendo todos os resultados que obtemos de volta da nossa API e, em seguida, construir uma nova seção de artigo exatamente como esta para cada resultado de música. Vamos criar todos esses mesmos elementos usando JavaScript dentro da seção de depuração final de nossa premissa. Portanto, sabemos que temos os dados com os quais precisamos trabalhar então vamos começar comentando este log do console a partir do script. Vamos até aqui, comentar isso e então podemos armazenar data.results, dentro da constante. Vamos copiar data.results daqui e definimos uma constante chamada artistas e definimos isso como data.results. Agora podemos ir em frente e usar o mapa para percorrer cada um desses resultados. Sopra aqui. Novamente ainda dentro da seção final.end vamos devolver artistas, que é a nossa constante apenas aqui.map. Agora, para cada resultado que temos queremos construir uma nova canção. Para fazer isso, precisamos criar nossos elementos. De volta ao HTML, que já vimos antes. Primeiro precisamos criar um artigo que seja um rapper, precisamos criar elementos de imagem, precisamos de dois conjuntos de elementos P, um para o nome do artista e outro para o nome da música. Então também precisamos construir um reprodutor de áudio, que vai tocar os primeiros 30 segundos de cada música. Sabemos como fazer já é usando cria elementos. Vamos começar fazendo isso agora no roteiro. No lado do nosso mapa, podemos dizer const. Vamos primeiro começar com o artigo, responda isso para ser document.CreateElement e os elementos que queremos criar é o artigo. Vamos duplicar este e este vai ser o artista e desta vez vai ser elementos P. Um pequeno truque quando estamos criando várias variáveis é em vez de adicionar a palavra-chave constantes cada vez, em vez disso, podemos remover isso e apenas separá-los com uma vírgula. Simplesmente assim. Então abaixo de nossos artistas podemos copiar isso, colá-lo novamente e este vai ser para a música. O nome da música também é um elemento P. Agora essa é a nossa música [inaudível], que vai ser importar a imagem, e para isso vai causar uma vez que os elementos de imagem apenas fazer como img. Agora, após a imagem, também precisamos criar nossos elementos de áudio. Então, finalmente, nós também queremos criar uma fonte de elementos e esta vai ser a fonte de áudio que é passada para o player de áudio com o caminho do arquivo da música que queremos reproduzir. Então, para o final, vamos chamar esse AudioSource, e isso pode ser fonte, e com a vírgula das extremidades. Agora temos nossos seis elementos criados usando JavaScript e armazenados dentro das constantes. Agora podemos definir o HTML interno para esses elementos de texto. Temos dois elementos de texto diferentes aqui. Queremos definir o HTML interno. Também queremos definir a fonte para os elementos de imagem e áudio também. Vamos fazer isso logo abaixo de nossas constantes. Agora, para cada resultado que obtemos de volta, a informação é armazenada dentro desta variável de resultado. Primeiro de tudo, vamos fazer um console rápido. e confira as informações que nos são devolvidas e armazenadas dentro dos resultados. Guarde isso e, em seguida, vá para o console. Agora podemos ver para cada música que podemos abrir isso e descobrir todas as informações que estão associadas a cada música. Começando com o artista queremos pegar o nome do artista, se abrirmos este objeto, podemos ver o nome do artista é armazenado em uma propriedade chamada nome do artista. Se eu puder deixar este console, faça o login apenas por um momento você pode precisar disso em breve. Vamos começar selecionando o artista, então artistas. HTML interno. Dentro desses elementos P vamos adicionar o nome do artista. Sabemos que podemos acessar isso com resultado e depois. nome do artista, que você viu dentro do console a partir daqui. Em seguida, também podemos adicionar ao HTML interno para o nome da música, que novamente está entre os elementos P armazenados dentro de sua constante chamada música, então música. HTML interno desta vez é igual ao resultado. Se voltarmos para o navegador queremos pegar o nome da música, por isso, se rolarmos para baixo, podemos ver este nome da música é armazenado dentro do nome da faixa. Esse nome da faixa dentro daqui, em seguida, a fonte da imagem, então img.source é igual ao resultado. Eu vou pegar a arte associada com a música, então vamos para ArtWorkUrl100, e isso se relaciona com o tamanho, então este é um 100 pixels de largura. Só vou copiar isto e colar isto. Eu mencionei antes que nós vamos ter um reprodutor de áudio e este reprodutor de áudio vai tocar uma pré-visualização, que é os primeiros 30 segundos da música. Podemos encontrar esta visualização de áudio se rolarmos para baixo para pré-visualizar URL. Role para baixo. Temos interesse aqui. Como este é o link que é passado do iTunes para a pré-visualização que você deseja jogar. Podemos adicionar este URL de visualização ao AudioSource. Vamos fazer isso agora, então AudioSource e então.source serão iguais ao resultado como já vimos antes. Este é o URL de visualização, também quando se trabalha com elementos de áudio HTML para que isso apareça na tela também precisamos adicionar o atributo de controles também caso contrário não veremos nada para clicar na tela. Para fazer isso abaixo do AudioSource podemos selecionar o player de áudio e, em seguida, podemos usar.setAttribute. O nome do atributo que queremos adicionar é controles, e isso não tem um valor, então pode deixar uma string vazia. Agora podemos responder a esses elementos para ser uma criança, elementos do artigo um pouco como temos com o exemplo aqui, então de volta ao nosso script. Precisamos anexar nossos artistas, nossa imagem, nossa música e também o áudio para ser uma criança do artigo. Vamos descer. Eu também posso remover este console.log. Temos o nosso artigo armazenado no topo aqui, que está em elementos do artigo. Todos esses elementos serão uma criança deste artigo. Abaixo aqui podemos dizer artigo.AppendChild, e então dentro aqui podemos começar a passar nossos elementos filho em primeiro lugar é a imagem, e vamos colar isso em mais três vezes. Também queremos adicionar ao artista, à música e também aos elementos de áudio. Então, finalmente, também precisamos acrescentar o AudioSource como um filho dos elementos de áudio. Vamos selecionar o áudio.appendChild, e este vai ser o AudioSource. Adicione isso. Ótima. Agora temos um artigo com todos os elementos filho dentro. Agora precisamos ir em frente e adicionar este artigo ao contêiner principal. O contêiner principal é esta seção principal aqui com as músicas ideais e isso vai conter todos os nossos artigos, que temos nos resultados. De volta aos nossos roteiros. Para fazer isso, precisamos armazenar toda essa referência à seção principal dentro de uma constante. Vamos fazer isso no topo. Logo após o nosso mapa, podemos dizer const, e podemos chamá-lo recipiente canção, e definir isso para documents.GeteementsByID, o ID que queremos agarrar foi músicas, então vamos combinar isso com esta seção aqui. Ótima. Agora vamos ter o SongContainer nós só queremos adicionar todos esses artigos a este contêiner, então até a seção AppendChild podemos selecionar o SongContainer novamente. AppendChild e, em seguida, passar em cada artigo disponível. Agora, se tudo correu bem, devemos ver nossos artigos de música para cada música retornada pela API, obter isso salvo e fechar isso abaixo do navegador e lá vamos nós agora ver nossos dados de música da API. Nós também podemos remover o nosso demo um de antes que deve ser este artigo de dentro daqui trazer isso para cima, em seguida, recarregar. Ótima. Vamos ver como isso está olhando dentro das Ferramentas do desenvolvedor. Clique com o botão direito e inspecione Aqui temos a seção principal de antes com o Id de canções, se abrirmos aninhados aqui dentro temos todos os nossos artigos para cada música que tinha sido devolvida da nossa API. Podemos abrir o nosso artigo e ver todos os elementos que são adicionados usando uma criança caneta. Em primeiro lugar, temos a imagem, temos os elementos P com o nome do artista, elementos P com o título da música e depois temos o nosso leitor de áudio. Se estamos abrindo aninhado dentro é o AudioSource, que adicionamos voltar para o script que adicionamos este AudioSource como o filho para os elementos de áudio e isso é o que vemos aqui. Também podemos ver os atributos de controles que foram adicionados a. Se removermos isso, vamos voltar a comentar o setAttributes e, em seguida, recarregar, podemos ver que não temos nenhum reprodutor de áudio agora na tela. Eu deveria mover isso e adicionar isso de volta. Bom. Parabéns se tudo isso está funcionando para você. Você extraiu com sucesso dados de API de uma fonte externa, isso é uma grande parte de nossos projetos agora feitos. No próximo vídeo, faremos uso desta barra de pesquisa, que possamos digitar nosso termo de pesquisa para nos permitir pesquisar músicas diferentes, em vez de codificar em um termo de pesquisa para o URL que está indo aqui. 47. Criando nossa consulta de pesquisa: Agora temos uma lista de músicas exibidas na tela, que está sendo puxada de nossos dados API. No momento, embora estamos usando uma string de consulta estática, ou seja, Nós digitamos o termo de pesquisa na URL apenas no topo aqui. Não é isso que queremos usar. As coisas seriam muito melhores se pudéssemos digitar um termo de pesquisa dentro da barra de pesquisa, dentro de uma página web. Para fazer isso, vamos passar para o nosso Scripts.jsffile e primeiro precisamos definir uma variável para armazenar nosso termo de pesquisa. Vamos para o topo da página aqui. Ganhe pouco espaço, e usamos uma licença, eu chamo esse termo. Para começar, vamos definir isso para ser uma string vazia. Em seguida, próxima parada vamos criar uma função que vai ser responsável por atualizar o termo de pesquisa cada vez que um usuário digita no campo de entrada. Termo de atualização constante e isso vai ser uma função de seta ES-6 e Dentro aqui podemos atualizar este termo de pesquisa Vamos atualizar um termo para ser igual a document.getElementByID. O ID quer agarrar é esta entrada a partir do topo. Vamos descer para nossas entradas de pesquisa e ele tem um ID de entradas de pesquisa para, claro, que podemos usar isso mais em nosso elemento get por ID. Vamos adicionar entradas de pesquisa aqui dentro. Simplesmente assim e, em seguida, queremos pegar o valor usando.value. Nós vamos seguir em frente e descobrir esta função muito em breve quando o botão de pesquisa apenas aqui é clicado. Mas, por enquanto, podemos adicionar uma instrução if para verificar se o usuário realmente inseriu algo dentro desta entrada. Para começar com este termo, podemos adicionar uma declaração if. Vamos verificar se não há termo. Ou o termo é igual a uma string vazia. O usuário não inseriu nada nas entradas. Podemos adicionar um alerta com algum texto dizendo: “Por favor, insira um termo de pesquisa o-k.” Primeiro estamos verificando se o usuário realmente inseriu algo. Em seguida, podemos adicionar uma outra declaração logo depois disso. Esta outra declaração vai ser executado uma vez que o nosso usuário tenha digitado em um termo de pesquisa, vai saber todo o código a partir de baixo está funcionando e puxando todos os dados que precisamos. Portanto, podemos cortar todo o caminho para baixo de nossas constantes de URL. Vamos fechar tudo isso, até o fundo. Bom que com um Command ou Control x dentro das chaves para a instrução else, cole isso e vamos apenas endividamento. Vamos torná-lo um pouco menor e intenso, toda a seção de quatro. Agora está tudo dentro, está na seção de outros. Isso tudo deve ser executado quando digitamos algo na barra de pesquisa. Agora, toda a nossa facção de dados está construindo nossos artigos está agora na seção de outros. Agora temos esse termo de pesquisa armazenado na variável no topo. Agora podemos passar isso para o nosso URL. Remova o termo ou beyonce daqui. Podemos adicionar nossas strings de consulta, que era um símbolo $, as chaves e m plus em nosso termo. Para que isso funcione, precisamos remover essas cotações do início e do fim e substituindo isso por ticks invertidos. Então, finalmente, para executar esta função, precisamos adicionar um ouvinte de eventos para o botão. Em nosso index.html, este é o botão que vai acionar nossa pesquisa. Mesmo na parte inferior do nosso scripts.js, podemos adicionar uma constante de botão de pesquisa ou pesquisa Btn, igual a documentos. Nosso seletor de consultas. Queremos selecionar o botão e, em seguida, podemos adicionar um ouvinte de eventos para o botão Pesquisar. Pesquisar btn.addeVentListener. Queremos que o ouvinte para um evento clique e, em seguida, queremos executar a função na parte superior, que é chamado de atualização Termo, que você acabou aqui. Vamos passar em atualização Termo como o retorno de chamada. Acho que agora deve ser tudo o que precisamos para que as coisas funcionem. Vá para o navegador e podemos checar isso. Recarregue e veja agora que nossas músicas foram removidas porque não temos mais um termo de pesquisa. Vamos tentar adicionar um termo de pesquisa. Vamos buscar Ed Sheeran. Vamos procurar. Parece que temos um problema algures. Vamos voltar ao código. Na verdade, vamos verificar o console e sem setas dentro de lá vamos dar uma olhada então vá botão de pesquisa, que é acionado e atualizar algum URL. Na verdade, ele iria apenas adicionar no nome do termo de pesquisa, como fizemos antes que precisamos adicionar um termo é igual e eu passar isso em, assim, nos dar salvar, em seguida, recarregar e tentar isso mais uma vez, ele Pesquisar e lá vamos nós. Temos os resultados para Ed Sheeran e vamos tentar mais uma busca e podemos ver que há um problema. Ainda temos os resultados de Ed Sheeran como antes. Mas se descermos, até o fim das luas de Ed Sheeran, podemos ver que as edições Queen foram adicionadas ao fim. Se você procurar por mais de uma coisa, os resultados são adicionados no final dos últimos resultados em vez substituir o que já está lá e isso é algo que irá corrigir no próximo vídeo. 48. Melhorando nossa pesquisa: No último vídeo, fizemos um grande progresso conectando nosso botão de pesquisa na parte superior do nosso site. Também incluímos um pequeno problema. Isto é quando um segundo termo de pesquisa é executado, em vez de substituir os resultados originais, eles são adicionados no final. Isto é o que vamos consertar neste vídeo. Todas as nossas canções, os nossos elementos infantis do contentor de canções. Então precisamos verificar se o contêiner primeiro, tem músicas. Se isso acontecer, então precisamos removê-los antes de pesquisar. Então vamos começar movendo nossa referência de contêiner de músicas para o topo do nosso script. Então vamos voltar para o nosso script.js. e, em seguida, se você rolar para baixo para o nosso contêiner de músicas, que é apenas aqui, vamos cortar isso fora do nosso mapa. Então podemos colar isso no topo de nossos scripts. Agora vamos para o topo de nossos roteiros. Isso dará a esta variável um escopo global. Medium pode acessá-lo em vários locais. Então, agora, se nós rolarmos para baixo para nossa seção mais, que é esta seção aqui, antes de executar nossa consulta de pesquisa. Primeiro, vamos executar um loop while que irá verificar se o recipiente de música tem um elemento filho. Então, no topo da seção else aqui, digamos que enquanto a canção recipiente pensamentos primeiro filho. Por isso, ele irá verificar se o recipiente de música tem algum elemento filho. Se isso acontecer, você quer ir em frente e removê-lo. Então, podemos dizer recipiente de música, criança removida, assim. Em seguida, dentro removido criança, precisamos passar no contêiner canção.firstchild. Então, como é um loop, ele irá percorrer nosso recipiente de música e cada um há um elemento filho, ele irá em frente e removê-lo e assim nenhum elemento filho é deixado no recipiente. Uma vez que o contêiner está vazio, o código pode então passar para fazer uma nova pesquisa. Então vamos dar uma chance no navegador, dar um salvamento, e depois recarregar. Farei a mesma busca de antes, Ed Sheeran. Ok, então agora vamos fazer uma segunda busca no Queen. Procura e agora os resultados da Rainha substituirão a busca original. Ótimo, então vamos agora terminar essa string de consulta adicionando alguns parâmetros extras. Primeiro definindo a mídia para ser música. Então vamos para a URL, que é apenas aqui. Depois do ponto de interrogação, podemos dizer mídia de música. Não se esqueça de adicionar um e comercial depois disso para que ele também procure o termo de pesquisa. Então, isso agora restringirá os resultados da pesquisa para serem apenas música, em vez de qualquer outro tipo de mídia, como e-books ou filmes. Lembre-se de que todas essas opções estão disponíveis na documentação do iTunes, que analisamos anteriormente. Além disso, este é o seu aplicativo, então sinta-se livre para alterá-lo para ser uma pesquisa de filme, uma pesquisa de podcast, ou qualquer outro tipo de mídia que você preferir. Finalmente, vou restringir o número de resultados de pesquisa para o 10. Voltando ao ponto de interrogação, então diremos que limite é igual a 10 no comercial, dê um salvamento. Recarregue o navegador, adicione uma pesquisa. Dê uma chance, então agora temos 10 resultados. Aperte a busca e lá vamos nós, agora temos 10 resultados, todos restritos ao tipo de música de mídia. Escreva nossa música, encontrar o aplicativo está quase completo, mas há um toque final que precisamos adicionar. Passamos o áudio para o reprodutor de áudio para nos dar esta pré-visualização da música. Então, se clicarmos nisso, vemos agora que a visualização de áudio está funcionando. Então tudo isso funciona bem, mas se clicarmos em uma segunda visualização de áudio vemos que as músicas postadas estão sendo reproduzidas ao mesmo tempo. Em vez disso, o que queremos é a capacidade de clicar em uma visualização de áudio e, em seguida, é pausar quaisquer outros players de áudio que você está jogando atualmente. Esta é a última coisa que precisamos cuidar. Quarto é aplicação e vamos olhar para isso no próximo vídeo. 49. Pré-visualização de áudio, captura e bubbling: Bem-vinda de volta. No último vídeo, mencionamos que queremos pausar qualquer reprodutor de áudio quando clicamos em um “Novo”. Isso evitará várias visualizações ao mesmo tempo. Para fazer isso, na parte inferior do nosso arquivo script.js. Vamos até o fundo. Vamos ouvir os eventos da peça nos documentos. Em vez de addEventListener para um dos botões individuais em nosso player de áudio. Em vez disso, vamos adicionar isso aos documentos. É porque há vários botões de reprodução todos ao mesmo tempo. Faz sentido adicionar isso ao documento em vez de cada botão individual. Isto irá listar agora se quando a reprodução começou em elementos de áudio e, em seguida, ele irá executar a função. Vamos começar selecionando o “document.addEventListener”. O ouvinte de eventos que queremos ouvir são os eventos de reprodução, que serão acionados cada vez que o áudio começar a ser reproduzido. Então vamos acionar uma função que vai tomar nos eventos. Esta será uma função de seta ES 6, que será executada cada vez que um áudio for reproduzido. Dentro desta função, primeiro queremos armazenar todos os nossos elementos de áudio em uma constante. Também uma constante chamada áudio. Em seguida, definido é document.getElements ByTagName. O nome do tipo que queremos selecionar é a tag de áudio. Isso irá selecionar todos os reprodutores de áudio na tela e armazená-los dentro de uma constante chamada áudio. Em seguida, queremos fazer um loop através todas essas instâncias de áudio e verificar se algum já está sendo reproduzido. Para fazer isso, podemos criar um loop for. Para ir para definir o valor inicial de i para ser igual a zero. Queremos a raiz quadrada e enquanto i é menor do que o áudio.Length, e então i plus. Agora dentro deste loop, vamos querer fazer, queremos verificar se o player de áudio, que está sendo reproduzido atualmente é igual ao event.target.. Agora aqui dentro eu vou criar uma declaração if. Vamos apenas digitar isso primeiro e, em seguida, vamos explicar para cada caminho é dado. Se o áudio i não é igual aos eventos, assim alvos e abrir as chaves. Quando estamos dentro do navegador e clicamos em “Play” em qualquer uma das músicas. A referência ao reprodutor de áudio, que clicamos, estará disponível como informação dentro dos eventos. Podemos selecionar isso com event.target, que olhamos no passado. De volta ao nosso loop, verificamos se cada elemento de áudio individual não é igual ao event.target. Portanto, temos filtrar para baixo os players de áudio que não tinham o que nós clicamos. Tudo o que rodarmos dentro do loop será aplicado a todos os reprodutores de áudio, exceto aquele que queremos. Quaisquer reprodutores de áudio que estão jogando atualmente com áudio i, podemos definir.pause. Suponha que todos os reprodutores de áudio, que não são aqueles em que clicamos. Portanto, apenas um desses reprodutores de áudio tocando ao mesmo tempo. Se darmos o salvamento e passarmos para o navegador, ele recarregará e fará uma pesquisa. Clique em “Pesquisar”, e eu clico em qualquer um deles. Agora, se clicarmos em duas das pré-visualizações de áudio, podemos ver que isso ainda não está funcionando. É para trabalhar. A última coisa que precisamos fazer é adicionar um terceiro parâmetro ao ouvinte de eventos. Vamos voltar à nossa função. Então à direita no final, é depois da chave final, vamos adicionar um terceiro parâmetro de true. Para entender o que isso vai fazer. Pessoalmente, para olhar para algo chamado captura de eventos e borbulhar, você verá uma representação em árvore do caminho diretamente da janela para baixo para o player de áudio. Lembre-se cedo nós olhamos para como nós recebemos um monte de informações sobre os eventos quando ele é acionado. Como o destino do evento, que é pesquisado antes, e até mesmo coisas como a posição X e Y do mouse. Bem, não só recebemos informações sobre os elementos que cinco eventos, como um reprodutor de áudio? Também recebemos informações sobre todos os eventos na árvore. Ele vai também. Quando o evento é acionado, ele começa no topo da árvore, nos objetos da janela e cria um caminho todo para baixo. Isso é chamado de fase de captura. Em seguida, ele vai todo o caminho de volta para o topo. E isso é chamado de fase borbulhante. Para o exemplo que acabamos de ver no projeto, tocamos nosso ouvinte de eventos para o documento por um bom motivo. Se adicionássemos isso ao player de áudio individual, precisaríamos de um novo ouvinte de eventos para cada player de áudio em nosso projeto. Adicioná-lo ao documento funciona melhor porque só precisamos adicioná-lo uma vez. Em seguida, todo o áudio reproduzido abaixo dele na árvore irá notificá-lo devido a esta informação de eventos sendo passada para cima e para baixo. Primeiro, há um pequeno problema. Agora, alguns eventos realmente não borbulham. Contra isso, o evento de jogo é um desses que não. Para resolver este pequeno problema, nós adicionamos o valor de true como o terceiro parâmetro aqui. Isso executará o manipulador de eventos na fase de captura. Por padrão, isso é definido como false, que executa o manipulador de eventos na fase de bolhas. Como acabamos de mencionar, os eventos de jogo não podem bolhar. Agora, teremos o terceiro valor de verdade. Vamos salvar isso e depois ir para o navegador e fazer uma pesquisa. Agora vamos em frente e clique em duas das “Prévias de áudio”. Ótima. Agora, clicamos em um segundo “Visualização de áudio”. Todos os leitores de áudio existentes irão parar. Talvez possamos entender isso melhor registrando eventos para o console. De volta ao nosso guião. Logo abaixo da pausa, vamos fazer um registro do console. Isso é registrar o valor dos eventos, que é passado apenas aqui. Depois, para o navegador. Então vamos abrir o console. Clique com o botão direito do mouse em “Inspecionar”, abra a guia do console. Então vamos clicar em um dos “Reprodutores de áudio”. Assim que arquivar um dos reprodutores de áudio, podemos ver dentro do console temos nove eventos ouvintes arquivados 1,2,3,4,5,6,7,8,9. Recebemos nove porque só pegamos os de volta, nos quais não clicamos. Lembre-se, restrito o número de músicas devolvidas para nós para ser 10. Nós clicamos em “One” e então nós temos os nove restantes no console. Porque verificamos o tamanho do loop. Se o reprodutor de áudio atual não for o evento ou destino, ou seja, aquele em que você clicou. Se abrires um destes. Volte para o console e, em seguida, clique no pequeno menu suspenso aqui. Podemos ver, como mencionei antes, que os eventos da bolha estão definidos como falsos. Portanto, o evento de jogo não vai bolhar. Excelente e bem feito para finalizar esses projetos, trabalhando com fontes de dados externas como APIs e bancos de dados externos, que veremos em breve, realmente abre as possibilidades do que podemos fazer com nossos projetos. Tchau por enquanto, e te vejo na próxima seção. 50. Obrigado: Parabéns por chegar ao final deste curso. Espero que você esteja agora muito mais confortável usando JavaScript e trabalhando com dados de API. Começamos no início, demos uma olhada no básico de JavaScript, como instruções FL, operadores, strings e variáveis, então passamos para como podemos manipular o DOM para adicionar interatividade aos nossos projetos, , e como poderíamos trabalhar com eventos. Nós cobrimos arrays, diferentes maneiras de fazer loop sobre dados e objetos, tudo isso enquanto reforçamos o que aprendemos com alguns projetos divertidos. Finalmente, começamos trabalhando com APIs, promessas e busca de dados, tudo isso enquanto criamos um aplicativo forte e de busca ou tudo o que você aprendeu na prática. Lembre-se que esta é apenas a terceira parte deste curso, então certifique-se de conferir a próxima parte para obter um conhecimento mais profundo e aprender tudo o que você precisa saber para criar aplicativos Fullstack. Tchau por enquanto, e te vejo na próxima parte deste curso. 51. Siga-me no Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui no Skillshare, e também me siga para quaisquer atualizações e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Obrigado mais uma vez! Boa sorte e espero vê-lo novamente em uma aula futura.