Javascript moderno para iniciantes: parte 1

1. Boas-vindas ao curso!: Ei. Bem-vindo a esta aula. Como todos sabemos, aprender qualquer nova habilidade pode ser um desafio, e o JavaScript não é exceção. O JavaScript tem uma ampla gama de recursos e coisas que podem ser úteis, e isso muitas vezes pode deixar os iniciantes em uma situação difícil se perguntando por onde começar. É por isso que criei essa classe. Trabalhando desde o início, mostrarei o que é JavaScript, o que ele pode fazer e por que o usamos. Esta classe abrange tudo o que você precisa saber para se tornar um desenvolvedor JavaScript competente. Se você não fez uma das minhas aulas antes, meu nome é Chris, e eu construo sites há mais de 20 anos, e também tenho ensinado essas habilidades há mais de sete anos, ambas as videoaulas juntamente com os principais bootcamps de desenvolvimento web também. Esta é a Parte 1 de 2, e lhe dará uma ótima base em JavaScript de todos os conceitos básicos, incluindo matrizes, funções, objetos, eventos e o DOM, APIs da Web e todos os detalhes que você precisa saber no meio. Todos esses tópicos são abordados de forma clara e estruturada, enquanto constrói projetos práticos à medida que avançamos, incluindo exemplos de casos de uso do mundo real, e também alguns mini-desafios também. No final, também reunimos todas essas habilidades construindo um player de vídeo de trabalho, incluindo controles totalmente personalizados, incluindo controles totalmente personalizados, mas também um divertido jogo de soltar formas também, usando a API de arrastar e soltar. Ele inclui uma pasta de projeto que adicionaremos à medida que progredirmos ao longo desta classe, e também se desenvolverá como uma referência útil no futuro também. Obrigado pelo seu interesse nesta aula, e te vejo na primeira lição. 2. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para terminar outra palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder muito e se desviar da aula e pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu na aula. Além disso, lembre-se de compartilhar seu projeto também aqui no Skillshare e só vou dar uma olhada, mas também inspirará outros estudantes. Mais informações sobre o projeto da turma acesse a guia Projeto e Recursos, onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos da turma. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 3. Vamos ver o que o Javascript pode fazer!: Compreender o lado da teoria do JavaScript é realmente importante, e chegaremos a isso muito em breve, mas não há nada como ver exatamente o que ele pode fazer bem na sua frente. Para ver algumas das coisas que o JavaScript pode fazer, vamos abrir uma página da Web. Aqui, estou na Mozilla Developer Network. Este é developer.mozilla.org. Isso também funcionará em qualquer outra página da web, para que você possa escolher outra, se quiser. Não vou mostrar como o JavaScript pode ser usado para controlar ou fazer alterações em qualquer site. Agora, apenas uma palavra rápida antes de avançarmos neste vídeo. Pode haver uma ou duas coisas que parecem complexas ou desconhecidas, então, se você não está acostumado a codificar ou JavaScript, parte disso pode parecer um pouco intimidante, mas esteja ciente, isso é apenas para fornecer alguns guias sobre o que o JavaScript pode fazer. Não esperamos que você se lembre de nada disso, e abordaremos tudo o que passamos à medida que você progride no curso. Pense nisso como um pequeno provador para deixar você animado com o que o JavaScript pode fazer em uma página da web. Para ver o que o JavaScript pode fazer, vou abrir ferramentas do desenvolvedor dentro do Google Chrome, que é clicar com o botão direito do mouse e, em seguida, descer para Inspecionar. Vamos fazer isso um pouco maior para que fique mais visível. Se você estiver usando um navegador diferente, como Safari ou Firefox ou Edge, maioria das ferramentas do desenvolvedor é muito semelhante, então você deve ficar bem se quiser usar um navegador diferente também. Mas se você quiser as coisas exatamente iguais, eu acompanharia o Google Chrome. A primeira coisa que vemos aqui é esta guia Elementos, que tem acesso a toda a estrutura HTML que compõe esta página da web. Podemos passar o mouse sobre qualquer uma dessas linhas de código, e ele destacará à esquerda em qual seção estamos trabalhando atualmente, ou também podemos clicar nesta seta, que é o inspetor, e selecione qualquer uma dessas seções ou elementos na página. Por exemplo, vamos para esse cabeçalho de nível 1 e clique nisso. Isso realçará instantaneamente esse título de nível 1 dentro do código e, quando ele for selecionado, você notará à direita que você tem isso é igual a US $0 e, em seguida, vemos esse pop-up logo abaixo do qual diz usar $0 dentro do console para se referir a esses elementos. Podemos usar $0 dentro desta guia Console para selecionar qualquer um de nossos elementos ou seções e, em seguida, podemos aplicar algum JavaScript também. Vamos apenas confirmar que temos os elementos certos selecionados com $0 e, em seguida, recuperamos nosso título de nível 1. Selecionamos esse elemento, mas o que podemos fazer com ele? Bem, a lista é enorme, e só vamos arranhar a superfície aqui, e vamos cobrir muito mais durante este curso. Se selecionarmos novamente $0 para apontar para o nosso cabeçalho de nível 1 e, em seguida, um ponto, podemos ver abaixo temos acesso a muitas opções diferentes que podemos usar neste elemento. Um comum, que usaremos muito neste curso, é algo chamado texto interno. O texto interno é uma maneira de simplesmente alterar o conteúdo entre a etiqueta de abertura e fechamento. Ele terá esse texto de recursos para desenvolvedores. Se quisermos, podemos definir isso igual a qualquer nova cadeia de texto. Abra as cotações. Podemos usar aspas simples ou duplas, mesmo uma está bem, e então podemos definir esse texto qualquer outra coisa que você queira. Vamos, eu mudei e, imediatamente, recuperamos o texto recém-retornado no console, e também podemos ver que a página da Web também foi atualizada. Antes de prosseguirmos, não se preocupe em fazer nenhuma dessas alterações. Isso não está atualizando o site ao vivo. Isso está apenas dentro do nosso próprio navegador. Tudo o que precisamos fazer é simplesmente atualizar o navegador e isso será reintegrado de volta à versão original. Além disso, estamos fazendo isso, agora redefinimos nossos US $0, e isso agora retornará indefinido. Vamos olhar para indefinido mais detalhes ao longo deste curso. Mas, por enquanto, podemos pensar nisso como simplesmente nenhum elemento foi atribuído a esse $0. Assim como antes, precisamos voltar para a guia Elementos para selecionar qualquer uma dessas seções ou elementos com os quais você deseja trabalhar. Vamos buscar um desses links no topo. Novamente, use a seta e podemos passar o mouse sobre qualquer um desses botões. Clique sobre isso. Temos esse botão com o botão ID do Feedback, que agora deve ser atribuído a US$0. Vamos selecionar isso e vemos que nosso botão agora é retornado. Novamente, $0 e, em seguida, o ponto nos dará acesso a uma variedade de recursos que podemos aplicar a esse elemento. Uma delas é a propriedade de estilo e, a partir daqui, também podemos adicionar uma propriedade de estilo adicional que queremos aplicar a este botão específico. Assim como no CSS normal, se você usou CSS no passado, todas as mesmas propriedades de estilo estão disponíveis para uso dentro do console. Um exemplo para isso pode ser a cor do texto, que podemos definir para qualquer valor que seja uma cor CSS válida. Pressione “Enter”. No entanto, atualize imediatamente dentro do navegador. Pressione para cima e também podemos adicionar uma segunda propriedade. Let's go para a família de fontes. Novamente, podemos mudar isso dentro das aspas para ser uma família de fontes diferente de cursivos. Como esperado, isso atualizará automaticamente o navegador. Apenas uma coisa a observar ao trabalhar com estilos é, aqui vemos que temos a propriedade de cor definida como rosa quente, e isso funciona como uma folha de estilo comum. No entanto, quando temos duas palavras, como fonte e família, em CSS regular, manteríamos tudo isso em minúsculas e separamos isso com um hífen, então vamos escrever assim como duas palavras com o traço dentro. Mas, ao usar JavaScript, se tivermos duas ou mais palavras, precisamos mudar isso para o que é chamado CamelCase, e cada palavra após a primeira começa com uma letra maiúscula. Essa é praticamente a única coisa que você precisa se lembrar nesta fase. Temos acesso a todas as mesmas propriedades CSS, mas precisamos digitá-las como CamelCase ao usar JavaScript. Outra coisa que vamos ver agora são os eventos. vez, temos uma seção de eventos dedicada mais tarde no curso. Mas, por enquanto, eu só quero deixar você um pouco animado com o que o JavaScript pode fazer ao interagir com o usuário. Para ver um exemplo disso, podemos pedir ao navegador para ouvir um evento do mouse como quando um mouse paira sobre esse elemento específico. Podemos fazer isso novamente selecionando nosso botão com $0 e, em seguida, podemos usar um evento chamado onmouseover. Isso detectará quando o mouse mouse sobre esse elemento específico. Então vamos acionar o que é chamado de função. Uma função é como uma tarefa que será executada quando o mouse passar o mouse sobre esse botão específico. Não se preocupe se isso parecer desconhecido, temos muito mais detalhes sobre as funções que surgem. Mas, por enquanto, tudo o que vamos fazer é selecionar esse elemento específico. Mais uma vez, acesse a propriedade style e, desta vez, vamos para que o plano de fundo seja igual a qualquer cor, como laranja. Clique em “Enter”, e este evento mouseover agora será ativado. Se agora colocarmos o mouse sobre esses elementos específicos, o plano de fundo agora é alterado para ser laranja. Essa é uma maneira de testar rapidamente as coisas no navegador. Mas quando se trata de escrever código JavaScript real dentro do nosso editor de texto, $0 não funcionará, $0 só funciona dentro das ferramentas do desenvolvedor do navegador. Em vez disso, precisamos de uma maneira de acessar qualquer desses elementos da página de fora. Por exemplo, volte para a página do elemento, e o que vamos fazer é selecionar uma seção diferente. Vamos para o principal, que tem o ID do conteúdo. É claro que poderíamos acessar US$0 já que estamos nas ferramentas do desenvolvedor, mas precisamos nos acostumar a acessar esses elementos de um editor de texto. A maneira como fazemos isso é começando do nível mais alto, e isso é acessando os documentos. Podemos ver imediatamente que a página inteira será destacada. Isso ocorre porque o documento é essa página da Web real. Depois de selecionarmos a página inteira assim, precisamos de uma maneira de filtrar esta página até o elemento específico que queremos. O JavaScript nos fornece certos métodos que podemos usar para filtrar esta página. Como podemos ver aqui com este preenchimento automático, podemos selecionar um elemento pelo ID, pelo nome da classe e também pelo nome do elemento também, mas mais do que eles mais tarde. Vou buscar GetElementById e, em seguida, dentro dos colchetes podemos passar o ID do elemento que queremos selecionar. Olhando para a guia Elementos, vemos que esta seção principal tem o ID igual ao conteúdo como uma string. Passe isso, e também observe aqui que isso também é CamelCase também. Assim como a família de fontes acima, cada palavra após a primeira começa com uma letra maiúscula. Pressione “Enter”. Em seguida, isso retorna nossa principal com o ID do conteúdo. Estamos exatamente na mesma posição de quando usamos US $0. Se pressionarmos, obteremos a mesma linha de código. Podemos então usar o ponto para acessar qualquer um dos mesmos recursos que usamos antes. Por exemplo, defina o estilo e, em seguida, vamos para a opacidade CSS igual a 0,3. Isso não é aplicado, ainda podemos fazer qualquer outra coisa que tínhamos antes, como o plano de fundo. Isso é igual a qualquer coisa. Vamos para o vermelho. Lá vamos nós. O plano de fundo da seção principal agora foi transformado em vermelho. Vamos apenas atualizar e restabelecer isso de volta ao estado original. O JavaScript não se limita a alterar apenas os elementos em nossa página. Também podemos usá-lo para fazer muito mais. Temos acesso a recursos de data, podemos acessar temporizadores e também algumas funcionalidades matemáticas também. Vamos, por exemplo, adicionar dois números. Vamos dizer que 5 mais 11 é 16, 7 takeaway 2 é 5. Temos muitos outros recursos matemáticos também, para que possamos selecionar o objeto matemático e, em seguida, pontuar e depois rolar. Podemos ver que temos muitas opções diferentes, mas uma popular é Math.Random. Adicione os colchetes logo depois e pressione “Enter”, e isso gerará um número aleatório entre zero e um. Se continuarmos tentando isso, obteremos um valor diferente a cada vez. Isso é apenas um pouco do que o JavaScript pode fazer e como podemos usá-lo para interagir com uma página da web. Há muito mais para aprender, e descobriremos mais desses recursos à medida que avançarmos neste curso. 4. Faça o download dos arquivos iniciais: Ao longo deste curso, escreveremos muitos códigos JavaScript. Para nos ajudar ao longo do caminho, forneci uma pasta chamada arquivos iniciantes javascript modernos. Se você for para github.com/chrisdixon161 e, em seguida, para o repositório que é modern-javascript-starter-files. A partir daqui, você pode baixar esse conjunto completo de arquivos, que são os arquivos iniciais que você precisará para cada lição neste curso. Por exemplo, quando você entrar na primeira seção, e então encontraremos uma lista de todas as lições dentro desta seção. Cada uma dessas pastas contém o mínimo muito simples que você precisará começar com cada uma dessas lições. O objetivo dessas pastas é nos dar um ponto de partida, que possamos simplesmente pular diretamente para aprender sobre JavaScript sem, por exemplo, precisar escrever todo o código HTML necessário. Outro benefício de todos esses arquivos é que ele também nos dá uma referência para todas as lições que fizemos no passado. À medida que assinalamos cada uma dessas lições, temos uma referência que você pode olhar para trás se você ficar preso no futuro. Isso é tudo o que precisamos fazer. Basta ir em frente e baixar a pasta. Você pode fazer isso nos pontos de entrada da pasta principal. Clique no botão “Código” aqui e você pode baixar o arquivo ZIP completo, que vamos abrir dentro do nosso Visual Studio Code. Depois que isso for baixado, você deve ter um arquivo ZIP que você pode extrair, geralmente clicando duas vezes na pasta e arraste-o para o editor de texto. Estou usando o Visual Studio Code e você deve ver todas as seções disponíveis à esquerda. É isso, este é o nosso arquivo inicial completo. Agora podemos aprender tudo sobre JavaScript. 5. Onde adicionar Javascript: Bem-vindo ao início desta seção. Agora vamos dar uma olhada no JavaScript e vamos passar do navegador e, na verdade, para nossos próprios arquivos JavaScript. Na seção anterior, baixamos os arquivos iniciais que acompanham este curso. Se você não tiver baixado, faça para voltar ao vídeo e baixá-los do GitHub. Assim que isso for feito, você precisará descompactar o pacote e arrastá-lo para o Visual Studio Code para abrir isso. À direita, abri o Google Chrome como navegador. O que vamos fazer agora é começar logo no início e dar uma olhada exatamente onde podemos adicionar JavaScript em nossos arquivos. Anteriormente, digitamos código diretamente no console do navegador, mas, realisticamente, quase sempre é escrito em nossos próprios arquivos. Por onde começamos? Bem, dentro do Visual Studio Code em nossos arquivos iniciais, vá para nossa primeira seção, que é o básico do JavaScript e você notará que os números distantes começam em 02. Isso ocorre porque, para esta lição em particular, vamos começar logo no início e configurar as coisas nós mesmos, e então, para todas as outras lições, elas terão alguma placa de caldeirinha disponível para acessarmos. Podemos simplesmente pular diretamente para escrever nosso código JavaScript. Para este com os conceitos básicos de JavaScript selecionados, clique neste ícone aqui, que é criar uma nova pasta, e então isso pode ser 01. Vou chamar isso de onde adicionar JavaScript. Novamente, verifique se isso está dentro da pasta básica do JavaScript e seguida, com esta primeira pasta selecionada, clique neste ícone aqui, que é um novo arquivo, e isso será aberto dentro daqui. Vamos chamar isso de HTML de ponto de índice. Pressione Enter. Ele deve estar dentro da nossa nova pasta. Dentro dele, adicione alguma estrutura HTML básica para abrir isso dentro do navegador e o Visual Studio Code vem com um plug-in ou reconstruído chamado Emmet. Isso nos dará algum preenchimento de código e alguns atalhos simples. Um dos mais úteis é o HTML dois pontos cinco. Pressione Enter. Isso nos dará todo o código inicial HTML básico que precisamos. Novamente, tudo isso estará disponível em todas as outras pastas, então isso é apenas para esta lição. O título, onde adicionar JavaScript. Então, precisamos que os elementos funcionem como um cabeçalho de página. Colocar qualquer coisa como h1 e algum texto dentro daqui. Ter esses elementos no lugar aqui significa que podemos usar algum JavaScript para acessar esses elementos, assim como vimos no console anteriormente. Tudo o que você precisa para abrir isso dentro do navegador é salvar este arquivo com Command ou Control S. Então, se clicarmos com o botão direito do mouse neste nome de arquivo aqui, vá até Copiar caminho e, em seguida, podemos colar isso dentro do navegador. Como alternativa, se você quiser, você pode entrar na pasta principal aqui. Em seguida, você pode seguir até a pasta atual e clicar duas vezes nesta página de índice. Isso abrirá isso em seu navegador padrão. Para poder acessar esses elementos usando JavaScript, uma das maneiras de fazer isso é adicionar AID. Vou nos dar uma identificação do título. Lembre-se de que cada ID específico deve ser exclusivo para esta página HTML. Certifique-se de que só temos um ID de título dentro desse arquivo HTML. Isso torna agradável e fácil para o nosso JavaScript poder selecionar os elementos específicos que você deseja. Então, abaixo disso e logo acima da nossa tag de corpo de fechamento, podemos inserir nossas tags de script. Temos uma etiqueta de abertura e também uma tag de fechamento também. Este é o local onde podemos colocar nosso código JavaScript. Logo acima do corpo, há um local onde podemos adicionar JavaScript e também está acima dos locais que veremos em breve. Mais cedo, quando estávamos dentro do console, lembre-se de que olhamos para selecionar cada elemento específico com o símbolo de dólar zero. Lembre-se também que dissemos que isso é exclusivo para o console. Precisamos de uma maneira diferente de selecionar nossos elementos dentro do editor de texto. Bem, aqui dentro vamos fazer exatamente a mesma coisa que olhamos no console. Primeiro selecionaremos o documento. O documento é este documento HTML completo no qual estamos trabalhando atualmente. Ele selecionará isso e, em seguida, precisamos filtrar esses documentos para o elemento específico que queremos selecionar. Lembre-se de que analisamos um método chamado get elements por ID. Mais uma vez, aqui é CamelCase. Cada palavra após a primeira começa com uma maiúscula dentro dos colchetes, e as cotações passarão em um ID exclusivo que você deseja selecionar. No nosso caso, vamos pegar o título. Mova isso aqui. Analisamos alterar o conteúdo interno ou o texto interno desse elemento com.innertext. Esta é uma propriedade em que podemos adicionar uma nova cadeia de texto entre as aspas simples ou duplas. Vamos mudar isso para JavaScript por enquanto e salve esse arquivo. Então, se passarmos para o navegador e recarregarmos, isso agora selecionou nosso cabeçalho de nível 1 e alterou o HTML interno. Vamos fechar a barra lateral para obter um pouco mais de espaço. Todas as mesmas propriedades que observamos no vídeo do console ainda se aplicam, como adicionar estilos diferentes. Novamente, podemos acessar os mesmos elementos com get element by ID, e também podemos alterar os estilos desse elemento específico também. Vamos mudar a cor do texto para ser igual a laranja. Atualize e tudo isso se aplicará. Outra maneira de adicionar JavaScript é adicionar esse embutido. Adicionar esse embutido significa que o adicionamos diretamente dentro de nossos elementos e adicionamos isso dentro da tag de abertura de elementos. Adicionaremos isso assim como adicionaríamos algum CSS embutido. Em um vídeo anterior, analisamos os eventos muito brevemente, onde analisamos o evento on-mouse-over. Aqui, vamos dar uma olhada no evento ao clicar, que será acionado quando o usuário clicar nesse elemento específico. Tudo o que vamos fazer dentro desse manipulador de eventos ao clicar é acionar um alerta. Um alerta é um pop-up dentro do navegador. Vamos adicionar isso com o texto clicado. Dê a isso um salve e atualize o navegador. Mova o mouse para os elementos e clique em. Agora verei um alerta de página. Isso provavelmente é algo que você já viu ao navegar na web no passado. Tudo o que precisamos fazer para remover isso é clicar no botão Ok e isso será fechado. Vamos apenas remover isso. Também esteja ciente de que geralmente é desencorajado manter nosso JavaScript alinhado assim, porque ele mistura nosso HTML e nosso JavaScript e torna as coisas menos legíveis e organizadas. Se possível, mantenha tudo separado, assim como temos aqui, e também veremos como podemos adicionar isso em um arquivo separado em apenas um momento. Isso está contido dentro de uma tag de script e podemos adicionar quantas tags de script você quiser. Ele também pode estar localizado em qualquer lugar desta página também, inclusive dentro da seção principal. Isso funciona exatamente da mesma forma se pegarmos toda essa seção de script e, em seguida, Comando ou Controle X para cortar isso fora do lugar. Coloque isso dentro da seção head com o comando ou controle V para colar isso e também no navegador. Aqui, podemos ver o título da página original foi restabelecido. Agora, como movemos a tag de script para a seção principal, nenhum desses JavaScript parece estar se aplicando. Então, vamos dar uma olhada dentro do console e ver se conseguimos detectar algum erro. Clique com o botão direito e verifique. Clique na guia Console na parte superior. Vemos que não podemos definir a propriedade innertext de null. Quando recebemos um erro, muitas vezes é uma boa ideia entrar no console e muitas vezes nos dá um ponteiro para exatamente qual é o problema. O problema atual é causado porque página HTML é carregada de cima para baixo. Portanto, o script dentro da seção head é carregado antes mesmo de saber que esse elemento de título existe, o que está causando um erro. Se precisarmos adicionar um script dentro da seção head como este, isso geralmente pode causar problemas se precisarmos acessar qualquer um dos nossos elementos DOM. É por isso que muitas vezes vemos JavaScript no final da seção do corpo. Ele permite que os elementos sejam carregados rapidamente e não impede que o HTML seja carregado na página. No entanto, você verá algumas bibliotecas JavaScript de terceiros que precisam que o script seja carregado dentro da seção principal para que a biblioteca funcione corretamente. Além disso, essas bibliotecas de terceiros, juntamente com nosso próprio código, geralmente são separadas em seu próprio arquivo de script. Mover todo esse JavaScript para seu próprio arquivo tornará esses documentos HTML muito mais legíveis e fáceis de manter. Para fazer isso primeiro, abra a barra lateral e, em seguida, dentro da pasta onde adicionar JavaScript, clique no ícone do novo arquivo e, em seguida, podemos dar a isso um nome de nossa escolha. Vou para o roteiro 1. Então ele precisa ter a extensão dot js. Pressione Enter. De volta à nossa página de índice, podemos copiar o conteúdo entre as tags de script. Pegue essas duas linhas de código, coloque essas saídas. Cole-os em nosso novo arquivo de script. Este arquivo de script não precisa das tags de script ao redor, pois já sabemos que este é um arquivo JavaScript da extensão dot js. Mas o que precisamos fazer é vincular esses dois arquivos juntos. Atualmente, esses são dois arquivos separados independentes um do outro. No arquivo de índice, precisamos apontar para esse novo arquivo de script. Podemos fazer isso dentro das tags de script em vez de ter o código localizado dentro, como fizemos antes. O que podemos fazer é adicionar os atributos de origem. O atributo source é basicamente o local desse arquivo em relação ao local onde estamos atualmente. Isso funciona exatamente da mesma forma que adicionar uma folha de estilos. Como esse arquivo está ao lado um do outro, podemos apontar para isso com a fonte do script 1 ponto js. Se isso estiver localizado dentro de uma pasta JavaScript, por exemplo, precisaremos entrar na pasta JavaScript e, em seguida, encaminhar a barra em nosso script. Nós não temos isso, então é simplesmente roteiro de um ponto js. Certifique-se de que ambos os arquivos estejam salvos e , em seguida, para o navegador, atualize. vemos o mesmo problema dentro do navegador. Não podemos definir a propriedade innertext de null. Isso faz sentido porque ainda estamos carregando a tag de script dentro da seção head. Estamos tentando aplicar isso a um elemento antes mesmo de ele ser carregado. Poderíamos escrever algum código personalizado para esperar que o HTML seja carregado primeiro ou podemos ver algumas técnicas mais modernas no próximo vídeo. 6. Async e Defer: Dentro de nossos arquivos iniciais, vamos fechar esse arquivo do último vídeo para que não haja confusão. Em seguida, vá para a lição 2, que é assíncrona e adiada. Clique duas vezes na página de índice para abrir isso. Como estamos agora em um novo arquivo, precisamos copiar este ou copiar o caminho para isso e depois colá-lo dentro do navegador. Vemos imediatamente que ainda temos o mesmo erro que o vídeo anterior. Isso ocorre porque esse é praticamente o mesmo arquivo ou o mesmo código final que tínhamos no último vídeo. Temos nosso script e também temos nosso cabeçalho de nível 1 e o mesmo conteúdo dentro do arquivo de script. Você precisará fazer isso para cada vídeo que vamos. Precisamos abrir a página de índice e também garantir que este seja o título certo da página. No último vídeo, descobrimos um problema ao carregar nossos arquivos JavaScript muito cedo. Isso pode causar dois problemas. Primeiro, talvez precisemos acessar o elemento HTML antes mesmo de ele ser criado, assim como vemos aqui e, em segundo lugar, podemos ter muito código JavaScript localizado dentro desse arquivo. Isso pode realmente diminuir o carregamento do resto da nossa página. Se o script 1 fosse um arquivo realmente enorme, o usuário não veria nenhum HTML carregado na página até que esse script tivesse terminado de ser executado. Agora vamos analisar duas maneiras que podemos usar para corrigir todo esse assíncrono e adiar. Assíncrono e adiado são atributos que podemos adicionar dentro dos elementos do script. Primeiro, vamos dar uma olhada no assíncrono e fechar a barra lateral para mais espaço. Certifique-se de que esse arquivo esteja salvo e atualize o navegador. Logo, vemos que o erro desapareceu. O JavaScript foi aplicado ao nosso elemento e não vemos nenhum erro dentro do console. Vamos tentar adiar. Coloque isso e atualize o navegador e temos exatamente o mesmo resultado. Tudo está funcionando perfeitamente bem. Com esses dois funcionando, qual é exatamente a diferença? Bem, primeiro temos assíncrono, e assíncrono é a abreviação de assíncrono. Este é um termo que voltaremos mais tarde. Mas para esse caso de uso específico, assíncrono baixará esse script junto com o resto do nosso conteúdo HTML. Mas para entender o que assíncrono está realmente fazendo, precisamos olhar um pouco mais adiante. Agora imagine, em vez de ter nosso script em nossa página de índice dentro do editor de texto como fazemos aqui, imagine que este era um site ao vivo. Se este fosse um site ao vivo, nossos scripts e nossa página de índice serão armazenados em um servidor web. Quando o usuário visitar nossa página pela primeira vez, o conteúdo desses arquivos precisará ser baixado. Quando marcamos isso como um script assíncrono, esse código JavaScript será baixado junto com nosso conteúdo HTML. Isso significa que, em vez de bloquear nosso código HTML, o HTML ainda é baixado e renderizado dentro do navegador, por isso não deve causar muita desaceleração com nosso conteúdo. Em seguida, ele executará o conteúdo do nosso script assim que tudo terminar o download. Isso tem suas vantagens. É realmente útil, pois não está bloqueando o carregamento do nosso conteúdo, mas há uma desvantagem. Você vê isso, vou vincular a três scripts separados. Vamos copiar e colar isso mais duas vezes. Isso pode ser o script 2 e o script 3 e, claro, precisamos criar dois novos arquivos dentro da nossa pasta Async and Defer. Segundo, scripts2.js. Também o roteiro 3 em nosso roteiro 1. Para maior clareza aqui, podemos alterar isso para o número 1 e, em seguida, salvar esse arquivo e copiar essa linha de código em nosso script 2. Cole isso aqui dentro e podemos mudar isso para o número 2. Salve isso no mesmo para o número 3. Agora, com nossos três scripts vinculados aqui, em teoria, o que devemos esperar que aconteça? Bem, provavelmente esperaríamos que este fosse o número 3 dentro daqui, porque carregamos o script número 1, que mudará o conteúdo para o número 1. Em seguida, o script 2 que alteraremos isso para ser o número 2 e, em seguida, o número 3 substituirá isso para ser o número 3. Bem, vamos verificar isso. Podemos salvar esse arquivo e também o navegador, atualizar. Vemos o número 3 como esperado. Vamos tentar atualizar mais algumas vezes. Se continuarmos atualizando várias vezes, eventualmente veremos um número diferente. Eventualmente vemos esse valor de 2 porque estamos solicitando todos esses três scripts em ordem. Mas mesmo que estejamos solicitando esses três scripts em ordem, isso não significa que você sempre voltará do servidor nesta ordem específica. Mas você pode estar pensando, por que eu deveria me importar com isso? Da mesma forma que o script1.js dependia do conteúdo do HTML para estar presente, às vezes um script também pode confiar em outro script. Por exemplo, nosso terceiro arquivo JavaScript pode contar com algum código dos dois primeiros arquivos disponíveis primeiro, e se isso for baixado antes dos dois anteriores, isso causará um erro. Certas bibliotecas JavaScript de frameworks também terão vários scripts que precisamos baixar, e eles precisarão ser baixados em ordem. Por exemplo, em versões anteriores da estrutura Bootstrap, costumávamos sempre confiar na estrutura jQuery também. Para o primeiro script, precisaríamos baixar a biblioteca jQuery. Então, somente depois de terminar o carregamento, baixaríamos a biblioteca Bootstrap, que estava fazendo uso dos recursos do jQuery. Quando precisamos que nossos arquivos de script sejam executados em uma ordem específica, assíncrono pode nem sempre ser a melhor opção para ir. O adiamento, por outro lado, executará os scripts na ordem em que eles aparecem e fará isso depois que todos os scripts na página e também o conteúdo da página tiver sido carregado. Vamos mudar isso para ser adiado em todos os nossos três scripts. Se continuarmos atualizando quantas vezes quisermos, só devemos ver o último valor de três. Se você é novo no JavaScript, não espero que você se lembre de tudo isso, e talvez você não precise deles com tanta frequência. Mas você também terá este vídeo e também o código do projeto aqui se precisar disso como referência no futuro. Também lembre-se mais comumente também, também temos a opção de colocar esse script no final da seção do corpo, para que ele não bloqueie o carregamento do restante do HTML. Assim como uma recapitulação antes de seguirmos em frente, temos as palavras-chave assíncronas e adiadas que você pode adicionar como atributos aos nossos scripts. Ao usar assíncrono, isso baixará os scripts junto com o restante do conteúdo HTML e o navegador tentará renderizar a página enquanto faz o download dessa página. Uma das vantagens é que ele não bloqueará a renderização do resto do conteúdo e, assim que o arquivo terminar de baixar, ele executará o script dentro. Também precisamos lembrar que se estamos usando vários scripts assíncronos, não há garantia de que eles serão executados na ordem em que esperamos que eles façam. assíncrono ainda é uma boa opção se tivermos vários scripts que não dependem uns dos outros para serem carregados em uma ordem específica. O adiamento, por outro lado, carregará vários scripts e sabemos que a ordem será preservada. Se nossos scripts forem executados assim que o conteúdo da página, como o HTML e esses scripts, terminarem o download, isso significa que devemos preferir usar scripts adiados quando tivermos vários scripts que precisariam ser executados em ordem. Essa é a principal vantagem que o assíncrono pode ser usado quando temos vários scripts que não precisam ser executados em uma ordem específica. Devemos usar defer quando precisamos que esses scripts sejam executados em uma ordem específica. Novamente, talvez você não precise usar essas duas palavras-chave com muita frequência, mas também é muito importante estar ciente de todas essas partes do JavaScript caso você se depare com elas no futuro. Em seguida, vamos nos afastar do carregamento do JavaScript e dar uma olhada em como podemos trabalhar com strings. 7. Trabalhando com cadeias de caracteres: Vamos agora entrar na Lição 3 desta seção que está Trabalhando com Strings. Devemos saber o que fazer agora. Podemos abrir a página Índice. Então, se abrirmos isso dentro do navegador, copie o caminho para isso e, em seguida, substitua o atual dentro do navegador. Até agora, quando estivermos configurando o texto interno, e vamos dar uma olhada neste exemplo aqui, que é exatamente como os que vimos no passado. Selecionamos este título, logo acima, definimos o InnerText como igual a outra coisa que não estava originalmente lá. Aqui começamos trabalhando com strings e depois substituímos isso por outra coisa, que vemos dentro do navegador. Até agora, estamos adicionando essas aspas simples e em JavaScript, isso é o que é conhecido como uma string. Uma string é basicamente algum texto, pode ser um único caractere, como uma única letra como A, pode ser uma única palavra, pode ser uma frase ou até mesmo um parágrafo. Também podemos colocar isso dentro das aspas simples ou duplas, não importa, ambas funcionarão perfeitamente bem para um exemplo assim. No entanto, haverá um problema se uma das palavras dentro contiver o mesmo caractere, como aspas simples ou duplas. Se revertermos isso de volta para aspas simples, assim, e então podemos mudar isso para ser talvez, vamos. Isso também tem um apóstrofo que é o mesmo símbolo que as citações circundantes, imediatamente podemos ver que o editor de texto destacou isso e mudou a cor para nos informar que há um problema. O que está efetivamente acontecendo aqui é que estamos combinando uma string das duas primeiras cotações. Podemos ver que esta é a cor original, e depois vemos um erro. Podemos ver isso se salvarmos esse arquivo e atualizarmos o navegador, podemos ver no console que teremos um identificador inesperado, já que está esperando que toda a nossa string esteja apenas contida no meio essas citações. Há algumas maneiras de lidar com isso. Primeiro, poderíamos mudar as citações externas para serem o oposto e fazê-las dobrar. Então adicione o duplo no final e também no início também. Agora, essa string estará contida entre as citações duplas e o apóstrofo será completamente válido. Salve e atualize, e agora veremos o apóstrofo dentro da string e não vemos erros dentro do console. Alternativamente, podemos usar o que é chamado de escapar. Se mudarmos isso de volta para as cotações simples que estavam causando um erro, poderemos fazer uso de uma barra invertida na frente e isso escapará do caractere que você deseja exibir. Isso dirá ao navegador para renderizar isso como parte da string. Vamos tentar isso. Isso funciona exatamente da mesma forma também. Escapar assim também funciona para outros personagens, como aspas duplas. Se escaparmos assim, não veremos nenhum problema. Digamos isso, e tudo bem. Mas e se realmente quiséssemos exibir essa barra invertida como parte da string também. Para isso, precisamos adicionar uma barra invertida dupla para escapar disso. O primeiro é renderizado como parte do texto, mas a segunda barra invertida é usada para escapar dessa cotação dupla. Se tivermos muito texto em vez de apenas algumas palavras como temos aqui, às vezes queremos dividi-lo em várias linhas. Para ver um exemplo disso, podemos sair do nosso script e podemos gerar alguns exemplos de texto dentro do nosso Visual Studio Code. Para fazer isso, digite a palavra Lorem, L-O-R-E-M, clique em “Enter”, e isso nos dará algum texto de amostra para trabalhar. Vamos copiar tudo isso, na verdade, cortamos isso fora do lugar e vamos colar isso entre nossas citações. Agora, se salvarmos isso e verificarmos isso no navegador, já que temos muito texto aqui, o navegador irá envolver isso automaticamente novas linhas, dependendo da largura do navegador. No entanto, como desenvolvedor, se quiséssemos controlar exatamente quando isso invadiu uma nova linha, como esta palavra aqui, podemos querer que isso comece em uma nova linha. Para fazer isso, podemos usar uma barra invertida seguida da letra n quantas vezes quisermos dentro daqui. Vamos encontrar a palavra que estávamos procurando qual é esta aqui e podemos usar a barra invertida seguida n. Dê a isso um salve e atualize o navegador. Isso então dividirá isso em uma nova linha, e você pode usar isso dentro dessa string quantas vezes quiser. Algo que deve ser cuidadoso é não podemos ter uma string sobre várias linhas. O que quero dizer com isso é, em vez usar essa barra invertida e n, se for apenas clicar em “Enter” e colocar isso em uma nova linha. Podemos fazer isso quantas vezes quisermos , assim aqui. Podemos ver que o editor de texto está nos avisando de um problema. Para sequência de textos como esse, não podemos dividir isso várias linhas e podemos ver isso no navegador se atualizarmos isso, vemos um token inválido ou inesperado. Temos algumas maneiras diferentes de abordá-lo para corrigir isso. Uma das maneiras mais longas de fazer isso é converter cada uma de nossas linhas de texto em sua própria string. Podemos fazer isso assim e você pode ver que este é um caminho muito longo fazendo isso. Então também precisaríamos usar o símbolo de mais entre cada linha para juntar isso na próxima. Para simplificar, vamos apenas fazer isso como linhas livres, atualizar e tudo isso funcionar como antes. Ou há uma maneira mais moderna que é usar o que é chamado de string de modelo. Isso substitui as aspas por backticks. Vamos apenas desfazer isso e restabelecer isso de volta ao erro original. O que podemos fazer em vez de ter aspas únicas no início e no final, poderíamos substituí-las pelo que é chamado de backtick. O backtick está localizado no seu teclado e é um símbolo aqui. No meu teclado específico, ele está localizado ao lado da tecla Shift esquerda. Imediatamente, o editor de texto agora removerá os erros e podemos salvar isso, e tudo isso deve funcionar perfeitamente dentro do navegador. Você pode ver que você também preserva as quebras de linha, então logo após Lorem ipsum, temos uma pausa, então temos nossa segunda linha que é esta aqui, e depois temos cada linha preservada logo abaixo disso. Esses modelos literais foram introduzidos ao JavaScript no ES6 ou ES2015, e nos permitem escrever cadeias de caracteres de várias linhas junto com alguns outros benefícios como inserir variáveis, que vamos tirar um veja mais tarde. Após este curso, examinaremos mais profundamente as strings também e descobriremos algumas das propriedades e métodos disponíveis que podemos usar. 8. Armazenando dados com variáveis: Isso acabou para este vídeo, indo para a próxima pasta. Vamos examinar o número 4, que está armazenando dados com variáveis. Então, vamos abrir esse arquivo e também copiar o caminho para o navegador também, colar isso. Veremos o título das variáveis colocado no topo. Opa. Agora, neste curso, estamos configurando ou alterando valores, como atualizar este título aqui. Em JavaScript, a maioria dos outros idiomas também, temos regularmente a necessidade de armazenar nossos dados. O JavaScript nos fornece três formas principais de fazer isso. Vamos começar analisando a maneira tradicional de armazenar dados em JavaScript, que é a variável. Podemos criar uma variável usando a palavra-chave var, assim, seguida de um nome para essa variável. Então, vamos chamar meu novo texto. Essa é uma maneira de fazer referência a essa variável no futuro. Adicionar um nome como esse é chamado de declaração, pois estamos declarando uma nova variável. Você pode pensar em uma variável como um contêiner de armazenamento e esse nome que damos a ela, é como o rótulo na frente para que possamos encontrá-lo facilmente no futuro. Também faz sentido ser descritivo ao nomear variáveis. Ele deve refletir os dados que ele contém. Além disso, esse nome não pode conter espaços como esse. Ele também deve começar com uma letra, um sublinhado ou um símbolo $. Se adicionarmos algo que não é permitido, como uma barra direta, geralmente um editor de texto moderno como este irá pegar isso e nos avisar sobre esse erro. Podemos então usar esse símbolo igual para adicionar um valor que você deseja armazenar dentro dessa variável, como nossa cadeia de texto. Como esta é uma string, adicionamos isso nas citações, digamos que novo texto da variável. Então, o que fizemos aqui é que usamos isso igual para atribuir esse valor à direita para esse nome de variável à esquerda. Adicionar um valor à nossa variável assim é chamado de inicialização. Você não precisa se lembrar dessas palavras-chave, mas eu só quero deixar você ciente de que elas existem. Então isso está inicializando uma variável e antes de termos apenas a declaração da variável. Então, para fazer uso desse texto, tudo o que precisamos fazer é passar o nome da variável, assim, você poderia dizer salvar e atualizar. Há nosso novo texto que armazenamos dentro da variável. Bem, e se também quiséssemos alterar esse valor que está armazenado dentro dessa variável. Também podemos fazer isso facilmente. Como nossa variável já foi criada. O que precisamos fazer desta vez é acessar o nome da variável sem a palavra-chave var. O programa já sabe que essa é uma variável, já que declaramos o acima, então a palavra-chave var não é necessária. Novamente, usando os iguais, podemos atualizar isso com um novo valor. Digamos que texto atualizado. Salve isso e confira isso no navegador. Há nosso texto atualizado agora mostrando. Portanto, o pedido aqui também é importante, já que o código é lido de cima para baixo para baixo. Então, na primeira linha, criamos nossa linha variável até atualizá-la. Em seguida, o título é alterado para nosso novo texto atualizado. Se fôssemos fazer algo assim e mover a atualização para estar acima de onde declaramos nossa variável. Vamos ver o que acontece quando salvamos e atualizamos. Não vemos mais a versão atualizada dentro do navegador. Muitas vezes, é por isso que veremos declarações de variáveis na parte superior do script. Portanto, isso não causará nenhum problema se começarmos a atualizar isso mais tarde em nosso arquivo. As variáveis também podem conter outros tipos de dados também, não apenas strings, e descobriremos mais tipos de dados muito em breve. Mas, por enquanto, há mais dois tipos de variáveis ao lado dessa palavra-chave var, que vamos ver. Ambos foram introduzidos com o ES2015. A primeira delas é a palavra-chave let. Na superfície, deixe trabalhar da mesma forma que var. Ele pode conter um valor e também podemos atualizar esse valor quando necessário. Então, se mudarmos var para ser deixado, salve e atualize. Agora vemos o texto atualizado, assim como fizemos com a palavra-chave var. Ainda há uma diferença entre a palavra-chave let e var. Tudo isso se resume a algo chamado escopo. escopo está relacionado a como podemos acessar essas variáveis e você adiciona algumas restrições sobre como podemos acessar os valores armazenados dentro. Há mais informações sobre escopo posteriormente no curso, onde você aprenderá tudo sobre isso com mais detalhes. Mas precisamos aprender um pouco mais sobre JavaScript antes que isso se torne realmente claro. Em seguida, temos a palavra-chave const, que é a abreviação de uma constante. Você pode pensar nisso como mantendo um valor constante que não mudará. Se salvarmos isso e atualizarmos o navegador, veremos que isso lançará um erro dentro do console. Vemos a mensagem de atribuição para variável constante. Nós conseguimos isso porque, assim como var e let, isso também pode armazenar um valor, mas é mais um valor somente leitura. O conteúdo interno não se destina a ser atualizado, o que estamos fazendo aqui. Então, se removermos essa linha assim e depois atualizássemos o navegador, isso agora se livra do erro e ainda vemos nosso conteúdo variável. Portanto, a mensagem de erro do console antes era atribuída a uma variável constante. Então, pouco antes de tentarmos atualizar isso, vimos que a mensagem era atribuição à variável constante. É uma palavra-chave de atribuição aqui, que é a chave. Atribuição é apenas uma palavra extravagante que chegamos a uma variável sobre passá-la um valor assim. Teremos essa era porque estamos tentando reatribuí-la com esse valor logo abaixo e ter essa const agora introduzida na linguagem JavaScript é uma coisa muito boa porque significa que nós pode armazenar nossos valores, que sabemos que nunca pretendemos mudar. Isso pode interromper quaisquer erros ou bugs em nosso código. Se alguém mudar acidentalmente um valor posteriormente no código. Mas há algo que pode ser confuso para iniciantes e envolve criar algo chamado objeto usando const. Se removermos essas duas linhas de código, poderemos criar uma nova constante chamada Pessoa. Teremos mais detalhes sobre objetos muito em breve. Mas, por enquanto, você pode pensar um objeto como uma coleção de dados. Portanto, uma pessoa pode ter vários dados, como uma idade, um nome, uma altura. Todos eles podem ser armazenados dentro desses aparelhos encaracolados. Todos esses dados são armazenados dentro de várias propriedades chamadas pares de valores-chave. Portanto, a chave é o nome dos dados, como o nome de uma pessoa. O valor é o nome real. Separados por uma vírgula, podemos adicionar uma segunda chave chamada likes e, em seguida, um valor de uma comida favorita. Podemos continuar com quantos valores aqui quisermos. Podemos então acessar qualquer uma dessas propriedades acessando primeiro o nome da constante e, em seguida, usando o ponto para selecionar qualquer uma de nossas propriedades, como nome ou curtidas. Vamos tentar isso, atualizar vemos o nome de Chris e em seguida, a pessoa que gosta é uma maneira de acessar a segunda propriedade da pizza. Portanto, embora esse objeto seja uma constante, não é estritamente imutável, o que significa que nunca mudará. Na verdade, podemos atualizar a propriedade assim. Podemos acessar a constante pessoa e acessar a chave chamada likes. Eu defini isso para qualquer coisa como bananas. Vamos salvar isso e ainda temos a pessoa em ponto gosta de renderizar para o navegador, atualizar. Agora podemos ver que atualizamos nossas constantes com um valor de bananas. Também podemos adicionar propriedades adicionais. Então, uma vez que já não existe, podemos dizer que a pessoa pontilha o cabelo e defini-lo para uma cor e, em seguida, exibir isso dentro do navegador. Assim, podemos ver aqui que podemos atualizar as propriedades dentro de um objeto. Mas e se tentássemos mudar completamente a pessoa para ser um tipo de dados diferente, como uma string. Vamos mudar isso para ser um nome como Chris. Atualize isso. Agora vemos a mesma mensagem de erro que tínhamos antes, que é atribuição a uma constante. Então, como você pode ver, uma constante segurando um objeto como esse ainda pode ter seus valores mutados no interior. Nós simplesmente não podemos reatribuir seu valor original para talvez um número ou uma string. Por esse motivo, muitas vezes é aconselhável evitar a confusão usando apenas const para valores simples , como uma string ou um número. Então, sabemos com certeza que esse valor nunca mudará. Então, apenas para recapitular com tudo o que aprendemos neste vídeo, temos três palavras-chave diferentes chamadas var, let e const, que nos permitem declarar uma nova variável que é gentil como uma contêiner de armazenamento para nossos dados. Ao usar as palavras-chave var e let, podemos, opcionalmente, atribuir um valor a esses nomes. Os valores internos também podem ser atualizados ou reatribuídos com um novo valor. Há também algumas considerações de escopo e hospedagem que abordaremos mais tarde no curso quando tivermos um pouco mais de compreensão. Ao usar a palavra-chave const, isso também criará uma nova variável ou contêiner de armazenamento, mas o valor não pode ser reatribuído. Como iniciante, também pode ser confuso ao usar const e um objeto porque as propriedades do objeto podem ser atualizadas, ou também podemos adicionar novas também. Também mencionamos algumas palavras-chave neste vídeo também. Você não precisa se lembrar de tudo isso no momento. Primeiro de tudo, tivemos uma declaração. É quando criamos ou declaramos uma nova variável sem passar um valor. Por exemplo, poderíamos dizer var name. Em seguida, inicializamos essa variável quando passamos um valor como igual a Chris. Atribuições. É quando passamos ou atribuímos um valor a uma variável, como este exemplo na parte inferior, onde atribuímos o valor de 37 à variável de idade. Então, essas variáveis serão algo que usamos muito. Então você terá muita prática com isso através deste curso. Em seguida, vamos ficar com variáveis e dar uma olhada em como podemos misturá-las com strings. 9. Misturando cadeias de caracteres com variáveis: Agora entendemos o que é uma string em JavaScript e também sabemos como armazená-las em contêineres chamados variáveis. Mas e se quiséssemos combinar essas duas coisas adicionando uma variável em uma string? Isso é completamente possível usando JavaScript e há maneiras diferentes de fazer isso. Vamos até nossos arquivos, que é o número 5, misturando strings com variáveis. Vou abrir isso dentro do navegador. Dentro desta página de índice, temos nosso nível 1 no topo com o ID do título. Em seguida, temos duas constantes abaixo, temos esse nome e também uma constante de curtidas também. Por fim, selecionamos nosso título e atualizamos o texto interno. E se quiséssemos atualizar esse título e também misturar essas duas variáveis? A maneira de fazer isso, podemos querer que a cadeia de texto diga que meu nome é. Depois disso, digamos que também quiséssemos inserir essa variável de nome. Se salvarmos isso e atualizarmos, veremos que meu nome é nome, então veremos o texto do nome em vez do conteúdo interno dessa variável. A razão pela qual isso acontece é porque, como tudo isso está dentro das citações, tudo é considerado parte da mesma cadeia de texto, não lido como uma variável. Precisamos sair dessa string e adicionar ou anexar o nome da variável à string. Fazemos isso exatamente como vimos em um vídeo anterior com o símbolo de mais. O que precisamos fazer é remover o nome da variável do final, usar o símbolo de mais e, em seguida, fora da string, podemos adicionar esse nome de variável. Também podemos deixar um espaço no final da string, então temos um espaço entre a string e também a variável, depois para o navegador e atualizamos. Podemos ver que nosso nome agora foi atualizado com o valor da variável. Também podemos adicionar a segunda variável a essa string também, assim como fizemos aqui. Mas, em seguida, use o símbolo de mais, abra a string em um espaço, e diremos e eu gosto, eu tenho um espaço no final e, em seguida, o símbolo de mais para adicionar a variável de curtidas. Vamos verificar isso. Meu nome é Chris e eu gosto de pizza. Tudo isso está funcionando perfeitamente bem, temos nossas variáveis misturadas em uma string. Há também outra maneira de fazer isso também, que foi introduzida no ES 2015. Isso é para usar as strings do modelo. Strings de modelo são exatamente como o que usamos em um vídeo anterior quando combinamos o texto em várias linhas. O que preciso fazer é substituir essas cotações pelos backticks. Vamos remover todas essas citações e também podemos remover os símbolos de mais, deixando apenas o texto dentro. Então o que precisamos fazer é colocar tudo isso dentro dos backticks. O segundo passo é marcar qual parte da string é variável. Sabemos anteriormente, se apenas salvarmos isso e atualizarmos, não vemos o conteúdo dessas duas variáveis, mas o que precisamos fazer é colocar na frente disso um símbolo $ e, em seguida, o nome da variável dentro do curly chaves, o mesmo para nossos gostos, símbolo $, e envolva isso dentro dos aparelhos encaracolados. Agora isso deve ser lido como o conteúdo de nossas duas variáveis. Essas strings de modelo entre as aspas também podem ser armazenadas em sua própria variável também. Se fôssemos cortar isso fora do lugar, criar uma nova variável, digamos que a string seja igual a esse valor que acabamos de cortar. Poderíamos então passar o nome da variável da string. Tudo isso funciona como antes, mas desta vez, tudo combinado em uma única variável de string. 10. Tipos de dados: números: Em qualquer linguagem de programação, temos o que é chamado de tipos de dados. Os tipos de dados, como soam, referem-se ao tipo de dados com os quais estamos lidando. Até agora, nos concentramos principalmente no tipo de dados de string. Mas também há outros também, o JavaScript é uma linguagem vagamente digitada ou dinâmica, que basicamente significa que nossas variáveis não se importam com o tipo de dados que elas contêm, elas podem conter uma string ou como iremos veja durante este vídeo, outra coisa, como um número, e também podemos alterar o tipo de dados de uma variável para quando reatribuímos um novo valor. Isso é diferente de algumas outras linguagens de programação , como Java, onde precisamos especificar que tipo de dados nossa variável conterá primeiro. Dentro desta lição atual, temos os tipos de dados, números, vídeo, que é o Número 6. Também certifique-se de abrir isso dentro do navegador também. Ao lidar com uma linguagem como Java, talvez seja necessário declarar uma variável como essa. Podemos dar à nossa variável um nome chamado número e definir isso igual a uma string de cinco. Quando escrevemos código assim, este é o código Java, isso é o que é chamado de linguagem fortemente tipada, já que esse tipo de dados deve ser declarado antecipadamente. No entanto, embora usemos em JavaScript, o que não se importa com o tipo de dados que essa variável contém. Ao contrário do Java, não declaramos que tipo de dados vamos conter, simplesmente dizemos que tipo de variável essa será. Dizemos que o número seja igual a 5, e isso é claro que é uma string porque está cercado dentro das citações. Mas e se fôssemos fazer isso? Digamos que na próxima linha, reatribuímos esse valor de número para ser igual a um número real, como cinco. É assim que definimos um número em JavaScript. Nós não cercamos em nenhuma das citações. Agora podemos usar esse número dentro daqui. Agora podemos colocar o número na tela. Vamos dizer isso e ver o que acontece. Atualize e agora o valor disso é cinco. Essa variável numérica mudou mesmo que usemos em um tipo de dados completamente diferente. Esse tipo de dados de número pode ser um número inteiro assim, e podemos escrever isso com ou sem casas decimais. Podemos produzir isso. Se você vem de uma linguagem de programação diferente, onde pode haver vários tipos de números, como duplo flutuador ou inteiro, esse não é o caso aqui. Os números JavaScript são sempre armazenados como um formato de ponto flutuante de precisão dupla. Se você quiser saber mais sobre os detalhes técnicos por trás disso, você pode encontrar o link aqui na página. Ao trabalhar com números, o JavaScript também pode calcular o valor e armazená-lo dentro de uma variável também. Por exemplo, se atribuíssemos a esse número o valor de 5 mais 10, agora você deve gerar o valor de 15. Faremos o cálculo primeiro e depois atribuiremos isso à variável. Mas o que você acha que acontecerá se juntarmos um número e uma string? Bem, vamos descobrir. Vamos dizer que o Número 1 seja igual a ser uma string e, em seguida, deixe o Número 2, isso pode atribuir o valor de 15. Agora, em vez de gerar o valor do número, vamos gerar o valor de Número 1, adicioná-lo à variável Número 2, sobre o navegador. Vemos nossas duas variáveis, temos a cadeia de 5 e, em seguida, o número de 15. Isso é um número ou é uma string? Bem, quando eu descubro um número e uma string, em JavaScript o resultado é uma string. Mesmo que tenhamos um número aqui, isso é classificado como uma string completa. Podemos provar isso usando o operador chamado typeof, colocá-los fora de lugar e usamos typeof. Em seguida, dentro dos suportes, cole-os de volta. Veremos que tipo de dados são retornados de dentro desses colchetes. Podemos usar isso com qualquer outro tipo de dados 2 e ele nos informará com que tipo de dados estamos lidando. Salve e atualize e vemos que esse é um tipo de dados de string. No entanto, se fôssemos apenas produzir o Número 2, o resultado ainda é um número. Esse tipo de é uma ferramenta realmente útil se não tivermos certeza com que tipo de dados estamos trabalhando. Também tenha em mente, mesmo que tenhamos um número armazenado dentro de aspas como esta, que tem um Número 5, isso também será classificado como uma string 2. Portanto, qualquer coisa entre aspas é uma string, qualquer número que não esteja entre aspas, é classificado como um número. Tanto o tipo de dados da string quanto o número são considerados como o que é chamado de tipo primitivo JavaScript. Primitivas são tipos de dados que não são classificados como um objeto. Eles também não têm métodos que são ações que podem ser executadas em um objeto. Mas não se preocupe com objetos e métodos ainda, teremos muito mais detalhes sobre eles ao longo deste curso. A principal coisa a entender por enquanto é que as primitivas são os tipos de dados mais simples em comparação, e isso inclui coisas como a string e também números. Assim como uma recapitulação do que vimos neste vídeo, temos tipos de dados que é o tipo de dados com os quais estávamos trabalhando, e atualmente analisamos o tipo de dados de string e também o número. Também mencionamos fortemente o tipo, que é um tipo de dados que precisamos declarar antecipadamente ao criar uma variável. Em outras linguagens, como Java, precisaríamos declarar que uma variável é um determinado tipo de dados, como uma string ou um número quando a criamos. O JavaScript, por outro lado, é digitado vagamente, então as variáveis não se importam com o tipo de dados que elas contêm, e também podemos reatribuir esses dados com um tipo de dados diferente. Por exemplo, poderíamos criar uma variável que é uma string e, em seguida, alterá-la ou reatribuí-la posteriormente com um tipo de número de dados. Primitivas, isso é o que acabamos de ver antes, que é um tipo de dados que não é classificado como um objeto. primitivas geralmente são um tipo de dados mais simples, e descobriremos o outro tipo de objeto em alguns vídeos posteriores. Esta é uma introdução básica aos números JavaScript, eles são uma parte importante e fundamental do JavaScript. 11. Tipos de dados: booleano, nulo e indefinido: No vídeo anterior, cobrimos tipos de datas JavaScript um tanto primitivos que incluem o número e também a string. Agora vamos analisar alguns tipos de dados mais primitivos disponíveis em JavaScript. Isso será um booleano em valor nulo e também indefinido. Certifique-se de ir para a pasta de lições atual , que é o número 7, e os tipos de dados booleanos, nulos e indefinidos. Já tenho isso aberto e também abro no navegador também. Ao brincar com códigos como este, temos algo disponível para testes chamado log do console. Entre as tags de script, tudo o que você precisa fazer é digitar console.log e, em seguida, abrir os colchetes, assim. Trabalhamos brevemente no console anteriormente e esse registro nos permitirá gerar um certo valor para o console dentro do navegador. Por exemplo, podemos dizer que é 10 maior que cinco e, se salvarmos isso e seguida, clicar com o botão direito do mouse e inspecionar para abrir as Ferramentas do Desenvolvedor, clique na guia Console, atualize. Isso retorna o valor de true. O registro do console produzirá qualquer valor dentro desta imagem do console, ótimos testes e descobrindo rapidamente o resultado ou o valor. Também temos um novo operador que é menor que, salve isso. Isso seria o oposto, o que é falso. Esses valores verdadeiro e falso são o tipo de datas booleano. Com o booleano um verdadeiro e um falso são os dois únicos resultados, então é realmente útil para verificar coisas assim. Por exemplo, no projeto Speedy Chef que você está chegando, teremos uma variável chamada GameStarted. Antes do início do jogo, este booleano será definido como falso e, quando começarmos o jogo, reatribuímos essa variável para ser verdadeira. Isso nos permite, em qualquer momento do jogo, verificar se o jogo foi iniciado e ter certos recursos disponíveis. Por exemplo, teríamos algo assim, poderíamos configurar uma variável. Vou dar-nos nomes como GameStarted, isso é igual iniciar para ser falso e, em seguida, dentro do nosso log do console, antes de tudo, podemos verificar o tipo de dados dessa variável usando o tipo de propriedade. Atualize e veremos booleano logo dentro daqui. Como podemos usar isso em uma situação real? Bem, valores booleanos são frequentemente usados em conjunto com uma instrução if. Uma instrução if se parece com isso, teremos a palavra-chave if, abriremos os colchetes assim e, em seguida, abriremos algumas chaves. Agora você verá esse padrão seguido muito dentro do JavaScript. Temos algumas palavras-chave, temos alguns colchetes redondos e, em seguida, teremos algumas chaves onde queremos executar nosso código, então você verá isso muito medida que avançarmos no curso. Mas, em particular, para isso, se declarar o que vamos fazer, vamos verificar se algo é verdadeiro ou falso. No nosso caso, queremos verificar se o GameStarted é igual a verdadeiro ou falso. O que fazemos, passamos isso para dentro daqui e se esse resultado for verdadeiro, o código dentro daqui será executado. No meu caso, vou colocar em um simples registro de console com o texto do GameStarted. Agora, se salvarmos isso, depois atualizarmos o navegador, não veremos nada dentro do console porque isso não é verdade. No entanto, vamos virar isso para ser verdade, atualizar e nosso log do console agora está sendo executado. Claro, abordaremos as declarações if com mais detalhes em breve , mas é assim que elas podem trabalhar com um simples valor booleano. Mas se também tivermos uma segunda variável, bem, PlayerName. Digamos que o PlayerName seja igual a Chris e, em seguida, alteramos nossa declaração if para verificar o nome do jogador. Temos um PlayerName definido, vamos fazer login no console. A mensagem de nome de usuário está definida. Vamos dar um passo atrás e pensar sobre o que estamos fazendo aqui. Nós verificamos. Primeiro de tudo, última vez, verificaremos se o GameStarted é igual a verdadeiro. Este era um valor booleano simples, no entanto, para este PlayerName, isso é igual a uma string. Você acha que isso resultará em verdadeiro ou falso? Bem, vamos salvar isso e verificar isso no navegador e vemos que isso é executado dentro do console. Bem, a razão pela qual vemos isso dentro do console é porque geralmente uma instrução if ou um booleano resultará em verdadeiro se existir um valor. Aqui temos um valor de Chris, então isso definitivamente existe. Vamos ver o que acontece se removermos esse nome e deixarmos isso como uma string vazia, salvamos e atualizamos. Agora, isso deve estar resultando em falso. Uma coisa a observar aqui que ter um valor vazio como nossa string vazia, assim como esta, não deve ser confundido com não ter um valor algum. Uma variável sem um valor é outro tipo de dados primitivo chamado indefinido. Se não tivermos nenhum valor atribuído a essa variável e se removermos essa string assim e, em vez disso, faremos um log de console para o PlayerName e também removeremos essas instruções if, para que não pudéssemos executar este log do console pela primeira vez, salvar e mais no navegador, vemos esse valor indefinido. Como mencionado anteriormente, esse é outro tipo primitivo, como string, number e booleano, e isso indefinido é exibido porque temos uma variável que não tem um valor atribuído a ela. Isso foi como antes quando olhamos para US $0 dentro do navegador. Se inicialmente digitarmos $0, quando não tivermos nenhum elemento selecionado na página, recuperaremos o valor de indefinido. O tipo de dados final que vamos ver neste vídeo também é primitivo e esse é o valor de nulo. Null também indica que algo está faltando também. Se definirmos nossa variável de PlayerName como igual a null e depois atualizarmos o navegador, como esperado, recuperaremos esse valor de null. Demos uma breve olhada nos objetos em um vídeo anterior, e null está relacionado a esses objetos. Ele indica que esse objeto está vazio e muitas vezes, ao trabalhar com bancos de dados ou serviços de back-end, um exemplo comum disso é ao solicitar alguns dados do usuário. Se o usuário estiver conectado, retornaremos um objeto contendo todas essas informações dos usuários. No entanto, se eles não estiverem conectados, muitas vezes veremos nulo pois o objeto do usuário estará vazio. Analisamos três tipos de dados diferentes neste vídeo, analisamos booleano para começar que é um simples valor verdadeiro ou falso. Esse tipo de dados primitivo é realmente útil e muitas vezes visto combinado com uma instrução if. Temos indefinido, novamente um tipo de dados primitivo que indica que algo está faltando. Em nosso exemplo, analisamos uma variável que tem valor nulo atribuído a ela. Finalmente, também descobrimos null, que é novamente um tipo de dados primitivo e é mais específico do que indefinido e se refere a um objeto que é ausência de valores. Você pode ver na parte inferior aqui que indefinido é um resultado mais genérico e nulo é mais específico para um objeto. 12. Comentários, ponto e vírgula e ASI: Se você já trabalhou em JavaScript antes, ou se estiver procurando por exemplos de código on-line, você pode notar que ponto e vírgula às vezes são usados e às vezes não. Os programas JavaScript são compostos de várias instruções, que são lidas de cima para baixo do arquivo. A instrução é basicamente uma instrução, como criar uma declaração variável do código a ser executado dentro de uma instrução if. Embora seja necessário ponto e vírgula em programas JavaScript, se optarmos por não escrevê-los manualmente, o analisador JavaScript as adicionará em fotos automaticamente, onde forem necessárias, os ponto-e-vírgula são adicionados no final de cada instrução, e o processo é chamado de inserção automática de ponto-e-vírgula. Isso não significa que podemos simplesmente esquecer de usá-los completamente. Há casos em que ainda precisamos adicioná-los manualmente. Por exemplo, vamos adicionar algumas variáveis e verificar os resultados. Você notará que estou no vídeo número 80, que é comentários, ponto e vírgula e ASI, e também tenho isso aberto dentro do navegador. Vá até a seção de script. O que vamos fazer é criar duas constantes. As constantes realmente não importam no momento. Vou apenas adicionar um nome, depois uma segunda constante, que pode ser aprendida em JavaScript. Este é um valor booleano verdadeiro. Em seguida, dentro do registro do console, produzimos variáveis únicas no passado. Mas também podemos adicionar uma vírgula e gerar o valor de ambas as variáveis. Salve o arquivo e vá para o console. Atualize e vemos nossos dois valores variáveis. Nada inesperado aqui, temos provavelmente o que esperávamos, que são nossas duas variáveis. Vamos registrá-los no console. Mas e se adicionarmos essas variáveis na mesma linha? Vamos tentar isso. Coloque-os na mesma linha e certifique-se de que qualquer ponto e vírgula seja removido do final de cada instrução. Primeiro de tudo, podemos ver que o editor de texto destacou um problema aqui assim que você fizer isso. Se salvássemos isso e atualizássemos o navegador, veremos um erro de sintaxe dentro do console. Temos um token inesperado de const, porque o analisador JavaScript não espera chegar a esse estágio aqui e, em seguida, ver uma nova declaração const. Se você tiver várias instruções na mesma linha como esta, precisamos declarar que essas são duas instruções separadas, separando-as com um ponto e vírgula. Coloque o ponto e vírgula no meio. Agora, o editor de texto não está destacando nenhum problema. Podemos testar isso. Salve e atualize. Agora tudo está funcionando bem. Você também pode ver que meu editor de texto os colocou automaticamente em linhas separadas, pois são duas instruções separadas. Junto com o ponto e vírgula, algumas outras pegadinhas são quando começamos uma nova linha com colchetes, ou muitas vezes referidas como parênteses. Vamos dar uma olhada em um exemplo logo após essas duas constantes. Crie uma nova variável, vamos chamar a pontuação. Você diria números aleatórios como 97,34, uma constante de dano e, novamente, um número aleatório, 10,42. Assim como uma nota lateral, criei isso como um let. Como uma pontuação geralmente pode ser atualizada, podemos produzir o resultado da pontuação com o dano retirado. Agora, se salvarmos isso e atualizarmos, esse é o valor correto dentro do console. Sabemos que ele pode realizar um cálculo dentro desses colchetes, como acabamos de ver dentro do registro do console. Mas e se tirarmos esse log do console e fizéssemos outra coisa com esse cálculo? Por exemplo, em vez de resultar em 86,92, se quiséssemos arredondar isso para dizer 86 ou 87? Bem, para fazer isso, o JavaScript tem um método embutido que podemos usar chamado toPrecision. Podemos mudar isso no final com o ponto, minúsculo para, e esta é caixa de camelo, então a precisão começa com um P. Para usar isso dentro da análise do valor de comprimento dois para torná-lo com dois dígitos de comprimento. Agora vamos ver o efeito do que aconteceria se esquecêssemos de colocar qualquer ponto e vírgula. Agora, o Visual Studio Code os inserirá automaticamente quando necessário. Mas se deixássemos esses de fora assim e pressionássemos “Salvar”, veríamos instantaneamente o que aconteceria quando o mecanismo JavaScript lesse esse código. Podemos ver que essa linha foi inserida diretamente após a declaração aqui, porque não temos nenhum ponto e vírgula para separar. Vamos salvar isso e atualizar. Vemos um erro, não podemos acessar dano antes da inicialização, e isso ocorre porque essa linha aqui começa com esses colchetes. Agora, isso pode não significar muito se você for completamente novo no JavaScript. Mas se você já fez um pouco de JavaScript no passado, é assim que declaramos um certo tipo de função. Em vez de interpretar essa seção de código e essa seção de código como duas linhas, ela está realmente lendo da esquerda para a direita e continuando isso como uma linha completa de código. Para corrigir isso, como você pode esperar, precisamos separá-los com um ponto e vírgula. Então, se atualizarmos, isso agora se livrará do erro, e tudo ficará claro no console. Também podemos ver diretamente os resultados desse cálculo cortando essa linha de código. Crie um registro de console e cole-o novamente dentro. Salve isso e atualize o navegador e nosso valor agora foi arredondado para duas casas decimais. Há também funções matemáticas que veremos mais tarde, que podem arredondar esses valores cima e também arredondá-los para baixo também. Apenas para recapitular, usar ponto e vírgula em JavaScript é opcional. É completamente para você se você quiser usá-los ou confiar neles para serem inseridos automaticamente. Mas esteja ciente de que há alguns casos em que iniciamos uma nova linha de código com os colchetes onde precisamos ter certeza de que os inserimos manualmente, que isso não cause nenhum erro. Para completar este vídeo, vamos dar uma olhada rápida no uso de comentários. Comentários são simplesmente uma maneira de fazermos anotações dentro do nosso código, que não será lido como nenhum código JavaScript. Também podemos usá-lo para comentar nosso código também. Isso significa que uma linha de código específica ainda está lá em nosso programa, mas não é lida quando o script é executado. Para inserir um comentário ou uma nota, começamos em JavaScript com as duas barras. Em seguida, poderíamos digitar uma nota como, deve ter ponto-e-vírgula nas instruções acima. Se salvarmos isso e atualizarmos o navegador, não veremos nenhuma referência ao comentário dentro daqui. Mas e se tivéssemos um comentário mais longo que se espalhou em várias linhas? Por exemplo, se você tivesse um comentário aqui e disse, controle o comprimento do número usando ToPrecision. Bem, como na maioria das vezes, o editor de texto nos dará uma pista de onde quer que estejamos fazendo algo certo ou errado. Imediatamente essas mudanças de cor e temos esse sublinhado vermelho abaixo. Podemos ver que essa não é a maneira como se espera que seja escrita. Para isso, podemos até começar cada nova linha de código com as barras duplas ou, em vez disso, poderíamos converter isso para um comentário de várias linhas, que é uma barra para frente e, em seguida, uma estrela. Podemos então remover o comentário da segunda linha e, em seguida, ir até o final do nosso comentário aqui, e podemos terminar isso com o oposto, que é uma estrela e uma barra para frente. Como mencionado anteriormente, também podemos comentar linhas de código também. Se quiser deixar um determinado código no lugar para referência, ou se quisermos restabelecê-lo mais tarde, ou quando for devido é exatamente o mesmo. Por exemplo, se quisermos remover essa constante de Chris, apenas adicionamos as duas barras na frente, essa linha de código ficará cinza e não estará mais disponível para acesso dentro do nosso programa. 13. Operadores: atribuição e comparação: Os operadores são algo que usamos o tempo todo em JavaScript. Na verdade, já usamos alguns deles já durante este curso. Você notará para este vídeo que já estou no arquivo correto, que é a lição número 9, Operadores: Atribuição e Comparação. Abra também isso dentro do navegador. Rolando para baixo até nossa seção de script, já temos algumas variáveis simples já configuradas. Você notará que a coisa comum entre todas essas quatro variáveis é que todas elas usam o operador igual. Este é o operador de atribuição porque atribuímos o valor à direita ao nome da variável à esquerda. Mas há outros operadores de atribuição também, que você pode ver aqui neste comentário. Nós olhamos para isso igual. Vamos agora passar para este símbolo de mais igual. Digamos que quiséssemos adicionar o valor do número 1 e também o valor do número 2 e, em seguida, armazenar o valor recém-retornado. Bem, poderíamos fazer isso assim. Vamos chamar isso de novo número. Defina isso igual ao valor do número 1 mais o número 2. Se eu rolar para baixo um pouco mais, temos esse GetElementById, que já está configurado, que é apenas esse nível 1 indo para cima. O que vamos fazer aqui é colocar o valor do novo número. Adicione isso aqui, dê a isso um “Salvar”, e agora podemos “Atualizar” o navegador. Vemos esse valor recém-retornado de 20, que é o 15 e os cinco somados. Não há surpresa com este. Mas o JavaScript também nos fornece algumas maneiras mais curtas de fazer isso, em vez de adicionar o número 1 nas variáveis número 2 juntas e depois atribuir isso a uma variável. Em vez disso, podemos fazer isso assim. Podemos remover nosso comentário desta linha com as duas barras. Além disso, se você estiver usando o Visual Studio Code em um Mac, poderá usar o comando e a barra. Isso alterna isso automaticamente. Se você estiver usando o Windows, isso será controle com barra direta. Isso fará exatamente o mesmo. Em vez disso, uma opção curta. Se você quiser alterar a variável número 1 ou atualizá-la, podemos usar o operador plus igual e, em seguida, passar o número 2. O que isso fará, ele adicionará ambos os números juntos e atribuirá um novo valor à variável à esquerda. Ambas as mesmas linhas ainda virão com o mesmo resultado de 20. A diferença sendo a superior está sendo armazenada dentro de uma nova variável, e a inferior está atualizando essa existente. Podemos verificar isso atualizando isso para ser o número um. “Salvar” e “Atualizar”. Ainda vemos o mesmo valor de 20. Também no topo com nossas variáveis, temos esse nome prévio e o sobrenome. Se quiséssemos exibir o nome completo na tela, podemos criar algo assim. Primeiro de tudo, poderíamos definir o nome prévio e, em seguida, usar o Comando ou Controle C para copiar e, em seguida, Comando ou Controle V para colar. Também podemos produzir o valor do sobrenome. “Salve” isso e, no navegador, vemos apenas o valor do nosso sobrenome. Essa abordagem não funciona porque o sobrenome é último código conhecido e, portanto, substitui o nome prévio. Em vez disso, o que podemos fazer é usar o operador plus igual para adicionar isso aos nossos elementos, em vez de substituir o existente. Se “Salvar” isso e “Atualizar”, veremos o valor de ambas as variáveis. Também poderíamos adicionar um espaço vazio entre cada uma dessas palavras usando algumas das técnicas que usamos no passado, passar em uma string vazia com um espaço. Em seguida, o operador plus para adicionar isso antes do nosso sobrenome. “Salvar” este arquivo. Agora temos um espaço entre nossos dois nomes de variáveis. Isso está adicionando valores e, em seguida, reatribuindo o novo valor. Mas também podemos fazer o oposto com a subtração. Podemos ver que está aqui em cima. Isso funciona exatamente da mesma forma, mas usamos o símbolo negativo em vez do mais. Podemos usar isso com nosso exemplo de número abaixo fazendo o oposto com uma subtração. Vamos remover esse segundo, GetElementById. Substitua o nome prévio pelo valor do número 1. “Salvar” e “Atualizar”, e agora temos o novo valor de 10. Só para recapitular, o que fizemos aqui é que pegamos o número 1, que é 15. Em seguida, tiramos o valor de cinco para nos dar 10, e o novo valor de 10 foi reatribuído para o número 1. Também multiplicamos exatamente o mesmo. Podemos alterar isso, “Atualizar”, e temos o valor de 75. Também podemos usar o divide, que é a barra para frente. Isso é 15 dividido por 5, o que reatribuirá o número 1 para ser igual a 3. Um interessante é este último que podemos ver aqui, que é o símbolo de porcentagem. Esse símbolo de porcentagem são as atribuições restantes após a divisão. O que isso está fazendo aqui, temos nosso número 1 e nosso número 2, que é um resultado de 15 dividido por 5. Cinco entra em 15 três vezes e, portanto, não há restante. Se salvássemos isso, deveria haver um valor restante de zero. Mas e se mudarmos um desses números? Digamos que quatro. Quatro entra em 15 três vezes com o restante de três. Outro tipo de operador que temos é a comparação. Atualmente sabemos quando estamos definindo variáveis como esses vínculos, quando usamos um único igual, atribuímos o valor à direita para o valor à esquerda. Aqui, o número 1 era originalmente 15, e agora se definirmos isso igual ao número 2, agora deve ser o valor de quatro. Mas às vezes isso pode parecer um pouco estranho para iniciantes. Porque se lêssemos isso como iniciante, pode parecer que estamos verificando se o número 1 é igual ao número 2. Como sabemos, esse não é o caso. Isso atribuirá o número 2 para ser igual ao número 1. Mas se quiséssemos comparar se esses dois valores são os mesmos, fazemos isso com os iguais duplos. Vamos instalar isso dentro do nosso valor, digamos que os resultados. Em seguida, imprima isso para o navegador, “Salvar” e “Atualizar”. Vemos que o valor é um booleano de falso. Sabemos que isso é falso porque o número 1 é igual a 15 e o número 2 é igual a 4. Também podemos fazer exatamente o oposto, que é adicionar um ponto de exclamação dentro daqui. Isso verificará se os valores não são iguais. Você encontrará isso muitas vezes com JavaScript, se usarmos o ponto de exclamação, isso fará o oposto do caso original. “Salve” isso, “Atualizar”. O oposto, é claro, é verdade. Algo, no entanto, a ser cuidado é se estivermos comparando dois tipos de dados diferentes. Por exemplo, se ambos fossem cinco, mas um desses cinco estava cercado dentro das citações para transformar isso em uma string. Para este exemplo, não importa se estamos usando as aspas simples ou duplas. Ele muda de volta para os iguais. Vamos ver qual é o resultado dentro do navegador. Se “Atualizarmos” isso, veremos que esse é um valor verdadeiro. Mesmo que tenhamos uma cadeia de cinco e um número de cinco, os iguais duplos verificarão apenas os valores e não os tipos de dados. O número 1 e o número 2 são considerados iguais, mesmo que um seja uma string e um seja um número. No entanto, se quiséssemos também verificar o valor no tipo de dados, há uma maneira de fazer isso usando os triplos iguais. O triplo igual significa igualdade estrita. “Salve” isso, “Atualizar”. Agora, como eles têm tipos de dados diferentes, isso agora retorna um valor falso. Se estivermos usando a igualdade estrita assim, também podemos usar o ponto de exclamação como antes para retornar exatamente o oposto. Altere isso para um ponto de exclamação. Agora, se “Atualizarmos” o navegador, esse é o valor oposto de true. Comparação como essa geralmente é combinada com instruções if, que abordaremos novamente mais tarde. Mas alguns outros operadores de comparação incluem os símbolos menores que e maiores que, que são as setas esquerda e direita. Nós olhamos brevemente para eles em um vídeo anterior. Tudo o que precisamos fazer é mudar nossos dois valores para serem diferentes. Vamos primeiro verificar se o número 1 é maior que o número 2. Sabemos que isso é verdade, então esperamos ver isso dentro do navegador. O oposto é o símbolo menor que, que, é claro, retornará o valor de false. Finalmente, a última coisa que queremos dar uma olhada neste vídeo é que também podemos combinar esses símbolos menores que e maiores que com os iguais. Podemos verificar se o número 1 é menor ou igual ao número 2. Este será falso. Mas não podemos alterar essas variáveis para serem as mesmas. Ambos são iguais. Isso deve ser um valor verdadeiro. Também temos acesso à versão maior ou igual à versão também. Operadores como esses são úteis para coisas como jogos, onde podemos verificar se a saúde de um jogador é zero ou menos, que terminará o jogo. Em seguida, vamos ficar com o assunto dos operadores, mas desta vez vamos dar uma olhada em lógica e aritmética. 14. Operadores: lógica e aritmética: Bem-vindo de volta. Junto com as atribuições e os operadores de comparação, também existem operadores lógicos e aritméticos, dos quais podemos aproveitar em JavaScript. Como sempre, entramos na pasta desta lição, que é o número 10, e também abrimos isso dentro do navegador. Assim como no vídeo anterior, temos alguns comentários, que tem uma lista de todos os operadores disponíveis. O primeiro conjunto são os operadores aritméticos. Vamos entrar nos lógicos logo depois. Com os operadores aritméticos, muitos deles são apenas senso comum, como a adição e a subtração. Muitos deles também são muito semelhantes ao vídeo anterior, simplesmente não combinados com o operador igual. Por exemplo, este é um que procuramos anteriormente. Este plus é igual, adicionará ambos os números e reatribuirá o novo valor para ser o número 1. Sabemos que são 15 e também cinco. Esses resultados do número 1 seriam então iguais a 20. No entanto, se nós removêssemos isso, é igual e apenas temos o símbolo de mais por conta própria, como você pode esperar, isso simplesmente adicionará esses dois valores juntos, o que significa que poderíamos produzir isso diretamente no console, ou também podemos armazenar isso dentro de uma variável para fazer uso em qualquer lugar dentro do nosso código. Logo abaixo [inaudível] desta linha de código onde pegamos o título desta página. Em seguida, podemos definir o texto interno para ser igual ao nosso resultado. Vamos experimentar isso no navegador. Recarregue isso. Obteremos o valor de 20 porque adicionamos o número 1 e o número 2. Isso funciona para não apenas adicioná-lo para obter as variáveis assim. Por exemplo, vamos fazer um log do console. Podemos adicionar números simples assim, então 5 mais 3. Abra o console e há nosso valor aqui. Também podemos usá-lo para adicionar strings também. Acima, temos uma constante de nome prévio e também sobrenome. Podemos usar esse operador para adicionar o nome prévio ao sobrenome. Como vimos anteriormente, também podemos acrescentar quantas strings quisermos. Isso também adicionará um espaço entre o nome prévio no sobrenome. “Salvar” e “Atualizar”. Ele tem o nome completo agora exibido, basta remover este log do console e vamos cortar mais alguns desses operadores logo acima. Como você pode esperar. Podemos substituir isso por subtrair, isso nos dará os resultados de 10. Temos a estrela que é o símbolo de multiplicação. Isso agora será 15 multiplicado por 5, dando-nos os resultados de 75. Também temos o operador restante, que é esse símbolo de porcentagem aqui. Lembre-se de vídeos anteriores que isso fará uma divisão e emitirá quaisquer números restantes depois. Este cinco vai para 15 três vezes, deixando um bom número redondo e zero restante. Mas se mudássemos para quatro, seria 4, 8,12, e então teríamos um restante de 3 para compensar 15. Eles são muito semelhantes aos operadores de atribuição que procuramos anteriormente. Porque, como você pode ver aqui no final, há dois outros operadores adicionais que parecem muito diferentes do vídeo anterior. Este é o incremento e o decréscimo. O primeiro, que é o duplo mais isso é incremento e isso aumentará o valor original em 1 ou o decréscimo, que é a subtração dupla. Isso diminuirá o valor em 1 a cada vez. Para ver isso como um exemplo, precisamos alterar isso para permitir que possamos atualizar esses resultados e alterá-los para que se multipliquem para que o resultado seja 60. Então, 60 agora está armazenado dentro desse resultado. Se descermos para a próxima linha, selecionamos esse resultado e adicionamos o duplo plus depois, que são os incrementos. Atualizar. Isso agora está sendo aumentado para ser 61. Também poderíamos fazer isso novamente copiando e colando, e isso agora seria 62, então ele aumenta em 1 para cada tentativa. Esse operador é útil para muitas situações. Por exemplo, em um de nossos próximos projetos, vamos usá-lo várias vezes, como cada vez que um novo pedido for feito, aumentaremos o número do pedido em1 para cada pedido. Além disso, temos a variável pizzas concluída, que aumentará em 1 cada vez o chef completar uma das peças. Podemos instalar todos esses números e exibi-los no final do jogo. O oposto é usar dois símbolos de subtrair, que vai diminuir o número, que significa que ele o diminuirá pelo valor de 1 a cada vez. Lembre-se de que o resultado original foi 60, depois o reduziremos em 2. Atualize, e isso deixa 58 mais baixos. Abaixo disso, também temos os operadores lógicos e, como você pode ver, há apenas três deles na tela. Esses operadores lógicos geralmente combinados com instruções if que abordaremos mais tarde. Mas eles também são úteis por conta própria também. Se quiséssemos verificar se várias condições eram verdadeiras, poderíamos usar o operador AND lógico, que é esse duplo e comercial. Por exemplo, se quiséssemos saber se o número 1 era igual a 15, e também se o número 2 era igual a 4 antes de executar qualquer código. Poderíamos fazer isso, vamos remover este exemplo. Eu só vou mover isso para baixo também. Vamos recriar nossos resultados. Agora podemos usar os operadores lógicos para realizar uma verificação. Queremos verificar se nossa variável número 1 será igual a 15. O triplo é igual, isso é igual tipo e valor. Agora, isso armazenará um valor verdadeiro ou falso dentro do resultado. Como mencionei antes, e se também quiséssemos verificar se o número 2 era igual a 4. Bem, a maneira como podemos fazer isso é com esse operador AND também podemos realizar uma segunda verificação. Desta vez, verificamos se o número 2 é igual a 4. Vamos dizer isso e atualizar o navegador. Isso é verdade. Ambas as verificações, esta e também esta é verdade. É por isso que obtemos o resultado de true. Isso mudaria qualquer um deles para ser um valor diferente, como o número 2. Como um deles agora é diferente, isso resultaria em falso. Isso é ótimo, mas isso é claro que depende dessas duas condições para serem verdadeiras. Mas e se eu quisesse saber se apenas um deles era verdade? Por exemplo, se o número 1 for igual a 15 ou se o número 2 for igual a 4, podemos querer obter um valor verdadeiro de volta se qualquer um deles for resultado de true. Bem, para isso, temos o operador OR, que são esses tubos duplos. Vamos mudar o duplo comercial e para os tubos duplos. Agora sabemos que apenas um desses valores é verdadeiro. Agora devemos ver true dentro do navegador. O mesmo se mudarmos isso de volta para antes. Agora sabemos que ambos serão iguais a verdadeiros. Isso também seria verdade, pois lembre-se, precisamos apenas de uma ou mais dessas condições para serem verdadeiras para obter os resultados de true retornados. Por último, mas não menos importante, temos o ponto de exclamação, que é o operador NOT. Isso basicamente faz o oposto e retornará um valor verdadeiro em false ou vice-versa. Lembre-se de que, atualmente, dentro do navegador, estamos vendo o valor de true. Se você quisesse verificar o oposto, tudo o que você precisa fazer é adicionar esse ponto de exclamação antes do resultado e dizer isso, isso nos dará o resultado oposto, o que é falso. Verificar o oposto assim pode parecer um pouco estranho, mas ele tem muitos usos dentro do JavaScript. Por exemplo, em um de nossos próximos projetos, temos uma variável chamada jogo iniciado. Este é um booleano verdadeiro ou falso. Podemos verificar se o jogo começou ou se o jogo não começou usando o ponto de exclamação antes de executarmos algum código específico. Também é útil para muitas situações , como verificar se nenhum usuário existe e muito mais. Mas referência a todos esses operadores abordados neste vídeo e também ao anterior também. Há slides disponíveis com este curso. Confira se você precisar de uma referência. 15. Introdução a matrizes e tipos de objetos: Para este vídeo, entre na lição número 11, que é a introdução a matrizes e tipos de objetos. Abra também isso dentro do navegador. Em JavaScript, existem dois grupos em que podemos colocar nossos tipos. É primitivo e tipo de objeto. Os tipos de dados anteriores que vimos como uma string, um número, booleano, definiriam o nulo, todos se enquadram em um grupo chamado tipos primitivos. Há também grandes int e símbolo também, que ainda não cobrimos. Agora vamos descobrir os tipos de objetos. O primeiro é um array. Os valores primitivos anteriores que analisamos armazenam um único valor, como uma string, texto ou um número. Mas uma matriz pode conter vários valores. Se você pensar em uma lista de compras, uma lista de tarefas ou, em geral, qualquer lista com vários valores, uma matriz é ideal para esse tipo de dados. Vamos dar uma olhada no nosso primeiro array dentro da pasta do projeto. Vá até a seção de script. Estamos criando uma matriz com esses colchetes. arrays podem conter qualquer tipo de dados, como uma string, assim como esta, separados por vírgula, adicionamos vários valores dentro daqui. Podemos colocar em números. Podemos colocar em objetos que veremos em seguida, ou você também pode aninhar dentro de uma matriz também. Para fazer isso, apenas criamos um novo conjunto de colchetes assim. Em seguida, continuamos adicionando nossas informações dentro. Se quiséssemos colocar em duas cordas, faríamos isso assim. Ou se quiséssemos usar uma matriz para uma lista, digamos, uma lista de ingredientes de pizza, faríamos isso adicionando várias cordas separadas por uma vírgula. Digamos que massa, queijo, molho e também um pouco de pepperoni também. Agora, como acessamos qualquer um desses valores? Bem, assim como fizemos com outros valores, também podemos armazenar isso dentro de uma variável. Vamos dizer que deixe a pizza ser igual a essa nova matriz. Então, na parte inferior, temos nossos documentos. Selecionamos um novo título e, de repente, em um texto, para ser igual a essa string. Em vez disso, podemos substituir essa string pelo valor da nossa matriz de pizza. Atualize o navegador e, em seguida, vemos uma lista de todos os nossos ingredientes. Ler valores individuais dessa matriz de pizza também é simples. Os valores da matriz são numerados da posição 0, e isso é chamado de posição de índice. A primeira massa é a posição de índice 0. Isso é 1, 2 e 3. Podemos usar isso dentro dos colchetes para acessar qualquer um desses ingredientes. Posição 0, que é a massa. Podemos acessar isso individualmente e também qualquer um dos outros valores também. arrays também têm algo que é chamado de propriedade. À medida que entrarmos em muito mais detalhes sobre esses tipos de objetos, você descobrirá que tipos de objetos, como uma matriz terão várias propriedades ou métodos disponíveis. Isso nos permite realizar determinadas ações ou também acessar algumas informações também. Primeiro de tudo, vamos dar uma olhada em uma propriedade chamada length. Em vez de acessá-lo, basta pegar o valor aqui. Podemos encadear no final o comprimento, atualizar. Vemos que há quatro valores contidos dentro daqui. Poderíamos fazer isso de qualquer maneira que você quisesse. Por exemplo, se quiséssemos colocar essa variável dentro de uma string, poderíamos abrir os backticks. Dizemos que essa pizza usou uma string de modelo. Podemos passar uma variável com o símbolo $, depois as chaves. Passe na pizza.length. Em seguida, ingredientes. Digamos que esta pizza tenha quatro ingredientes. Para o navegador, e lá vamos nós. arrays também têm alguns métodos internos disponíveis que podemos usar para executar algumas tarefas comuns, como enviar um novo item para essa matriz. Podemos remover valores e também verificar se a matriz também contém um determinado valor. Por exemplo, vamos verificar se nossa pizza contém o valor do pepperoni. Para fazer isso, primeiro acessamos nossa matriz pelo nome. Em seguida, usamos pontos incluídos; um interior dos colchetes, podemos passar um valor que você deseja verificar. No nosso caso, queremos verificar se isso contém pepperoni. Em seguida, isso retornará um valor verdadeiro ou falso se isso estiver contido. Também podemos armazenar isso dentro de uma variável também. Vamos chamar isso de HasPepperoni. Então, abaixo, podemos substituir esse texto interno. Vamos remover essa string de modelo e substituí-la por nossa variável. Dê uma poupança a isso. Se você vir um salto como tivemos lá, este é apenas o editor de texto salvando e reformatando o documento. Certifique-se de que isso seja salvo e mais no navegador. Isso é verdade porque o valor do pepperoni está contido dentro dessa matriz. Podemos mudar isso para ser uma ortografia incorreta e isso será um valor falso. Ou se tivéssemos a ortografia correta, também poderíamos usar o ponto de exclamação logo na frente disso, como olhamos no vídeo anterior. Isso retornará o valor oposto, que também é falso também. Também há muitos outros métodos disponíveis. Há também uma seção de matriz dedicada chegando a elas com mais detalhes. 16. Introducão a objetos: Outro tipo de objeto junto com a matriz. Bem, é um objeto real, matrizes que acabamos de ver contêm vários valores. Vou fazer referência a um único valor dentro da matriz acessando o número do índice, que é a posição começando a partir de zero. Analisamos brevemente os objetos anteriormente, e esses também são uma coleção de valores. No entanto, um valor de objeto é referenciado por uma chave. [inaudível] inicia arquivos e entra na introdução aos objetos. Queremos começar criando um objeto. Digamos deixar o usuário, e dizer que isso é igual aos nossos aparelhos encaracolados. Lembre-se de antes que podemos adicionar uma série de propriedades que é um par de chave e valor. Temos uma chave e, por exemplo, nosso usuário pode ter um Nome. Vou definir isso igual a uma string, então temos a chave e teremos o valor e é essa chave que usamos para acessar qualquer um desses valores dentro daqui, separados por vírgula. Vamos adicionar um pouco mais de detalhes, o segundo nome. Colocamos em quantos gostaríamos, como a ocupação, desenvolvedor web. Para este exemplo, adicionaremos um valor booleano de logado, definiremos isso como verdadeiro. Finalmente, também podemos adicionar alguns campos dentro daqui, e isso também pode conter matrizes aninhadas também, assim como uma matriz regular, abriremos os colchetes e podemos adicionar dentro daqui quantos valores quisermos gosto de. Se salvarmos isso, e você notará aqui que temos o cabeçalho de nível 1. Acessamos esse cabeçalho, vou definir que isso é igual ao nosso objeto de usuário, então substitua essa string de texto pela variável usuário. Salve esse arquivo e atualize-o dentro do navegador. Assim que fizermos isso, vemos o valor do objeto Object. Isso é o que acontece quando tentamos exibir o objeto completo dentro do navegador em vez de uma propriedade individual. Ele converte todo esse objeto em uma string. Um objeto, objeto, é o valor padrão que é exibido dentro do navegador. Com matrizes, usamos os colchetes para acessar o número do índice de valores, mas para objetos, usamos os colchetes para acessar cada uma dessas chaves. Em vez de exibir o usuário completo, abra os colchetes e, em seguida, dentro, acessamos o nome da propriedade dentro da cadeia de caracteres, assim como este. Isso fará referência ao primeiro nome de nosso usuário, e se salvarmos isso e atualizarmos, isso agora está sendo substituído pelo valor. Podemos mudar isso para ser qualquer outra coisa , como a ocupação, e isso também funciona perfeitamente bem também. Outra maneira de fazer isso para alcançar exatamente a mesma coisa é usar também a notação de pontos. Isso é chamado de notação de colchetes porque estamos usando os colchetes, mas a notação de pontos também é uma maneira de acessar qualquer uma dessas propriedades também. Podemos dizer o ponto do usuário primeiro, isso funciona perfeitamente bem também. Durante o desenvolvimento, se também quisermos acessar o objeto completo e ver todas as propriedades disponíveis dentro, podemos fazer uso de um log de console, passando nosso objeto de usuário e em vez de exibir objeto objeto como vimos dentro da navegação, se fôssemos ir até o navegador e abrir as ferramentas do desenvolvedor dentro do console, veremos o valor total desse objeto. Depois de clicarmos nessa seta aqui, também podemos expandir qualquer outro tipo de objeto dentro, como esse array, e ver todo o conteúdo aninhado dentro dela também. Esses logs de console podem ser úteis para depuração e geralmente, verificar quais valores estão contidos para qualquer tipo de dados. Além disso, assim como este log do console, se quisermos ver o estruturado dentro de um formato de tabela, podemos alterar isso para ser uma tabela de pontos do console. Agora podemos salvar e atualizar, e isso exibirá nosso objeto forma semelhante a uma mesa, o que pode ser um pouco mais fácil de entender todos os dados que você tem dentro de um objeto. Esses logs de console podem ser úteis para depuração e geralmente, verificar quais valores estão contidos para qualquer tipo de dados. Se tivéssemos vários objetos, também podemos colocá-los dentro de matrizes também. Isso será útil para armazenar muitos usuários ou produtos. Em vez de ter esse objeto aqui, poderíamos mudar isso em uma matriz e isso nos permitiria armazenar vários objetos. Nosso primeiro, e como esta é uma matriz, separamos cada valor com uma vírgula e, em seguida, cada um desses objetos podemos adicionar tantas propriedades dentro quanto quisermos. Ficando com a mesma coisa que poderíamos adicionar no primeiro nome, e depois separados por uma vírgula, o sobrenome. Vamos apenas copiar os detalhes deste, colocar isso em nosso segundo objeto. Vou mudar os nomes e, claro, agora temos vários usuários. Também poderíamos mudar isso para serem usuários. Se esse fosse um aplicativo da vida real e fôssemos fazer uma chamada de banco de dados para uma lista de todos os nossos usuários, nossos dados podem voltar assim, mas agora teremos vários objetos dentro dessa matriz. Você pode descobrir como acessar esses dois primeiros nomes? Ou lembre-se de que, como os arrays são indexados, podemos acessar cada objeto pela posição dentro da matriz. Este primeiro é a posição de índice 0, e o segundo é o índice número um, então o que precisamos fazer é remover isso. Isso agora é chamado de usuários. Abra os colchetes e podemos acessar nosso primeiro usuário com a posição zero. Lembre-se de antes quando estávamos acessando o objeto completo, assim. Ele exibirá o objeto de objeto dentro do navegador. O que precisamos fazer é acessar qualquer uma dessas propriedades individuais pelo nome da chave. Temos as duas chaves da primeira e da última. Vamos para o primeiro, salve isso e atualize. Isso nos deu um erro, pois o usuário não está definido. Vamos dar uma olhada no problema. Eu escolho esta mesa de console aqui. Estamos tentando fazer logout do usuário, mas isso foi alterado para usuários, depois recarregar o navegador e agora acessamos nosso primeiro nome. Vamos para o segundo objeto, então posicione um. É assim que acessamos os valores contidos quando temos vários objetos armazenados dentro de uma matriz. Junto com os usuários também são muitos, muitos outros casos de uso para esse tipo de configuração. Por exemplo, se você tivesse uma loja de comércio eletrônico com toda a coleção de produtos e também a cesta de compras poderia ser uma matriz vazia, cada vez que o usuário adicionar um novo produto, o objeto será empurrado para isso matriz. Como você pode ver, há muitos casos de uso para isso e também muito mais para descobrir com objetos e matrizes também. Vamos nos aprofundar muito neles nas próximas seções. 17. Introdução a funções: Vamos agora dar uma olhada nas funções JavaScript. Uma função é como uma tarefa ou um conjunto de tarefas agrupadas. Por exemplo, em nosso próximo projeto de eixo rápido, teremos muitas funções que executam uma determinada tarefa. Como gerar uma nova pizza, teremos uma para criar um novo pedido e também um para verificar se o evento está cheio. Essas funções podem ser executadas imediatamente ou com mais frequência quando as chamamos em um estágio posterior. Assim como matrizes e objetos, que vimos nos dois vídeos anteriores, teremos uma seção de funções mais detalhada no curso. Mas, por enquanto, ter um conhecimento básico de função realmente nos ajudará com algumas das etapas. Assim como esses arrays e objetos, que acabamos de ver, uma função também cai no mesmo tipo de objeto Grupo 2. Para esta lição, vá a última pasta dentro do nosso básico de JavaScript. Este é o número 13, introdução às funções. Abra-nos e também no navegador também. O que vamos fazer é antes de tudo, temos dois arrays aqui que podemos ignorar e podemos ir logo abaixo deles. Voltaremos a eles em apenas um momento. Embora vamos dar uma olhada em como uma função funciona e começamos usando a palavra-chave function. A palavra-chave function é seguida por um nome, que queremos dar essa função. Assim como uma variável acima, atribuímos um nome e, para este exemplo, vamos para o número aleatório. Este é um nome que chamamos de função cada vez que queremos executar o código dentro. Imediatamente após esse nome, passamos em alguns colchetes, que é chamado de parênteses. Dentro desses colchetes podemos passar algumas informações extras para a função, mas mais sobre isso em um momento. A última parte desse tipo de função são as chaves e este é o corpo da função. Essas chaves dentro daqui contêm todo o código que você deseja executar quando chamamos essa função pelo nome. Essas chaves também podem ser pensadas como um conjunto de portas que contém todo o código de função dentro. Isso é o que é chamado de declaração de função. Dentro, podemos colocar em qualquer código que você queira executar. Agora vamos colocar em um simples alerta de navegador. Salve isso e mais no navegador. Se atualizarmos, não veremos esse alerta sendo executado dentro daqui. Na verdade, ele executa esse código. Assim como mencionamos, precisamos chamar a função pelo nome, seguido por esses colchetes aqui. Logo abaixo disso, ligue para nosso número aleatório, adicione os colchetes ou esses parênteses. Isso agora deve chamar nosso código de função e, em seguida, exibir o alerta dentro do navegador. Outro bom exemplo de uma função seria uma calculadora para converter a idade do cão em uma idade humana. Vamos começar de novo. Voltaremos à nossa palavra-chave de função original. Desta vez chamaremos isso de DogToHuman, adicionaremos os colchetes ou os parênteses. Em seguida, o corpo da função. Logo acima, crie uma nova variável, que será nosso DOGage. Vamos definir isso para quaisquer valores, como três. Podemos então acessar essa variável dentro de nossa função e depois fazer uma multiplicação para convertê-la em anos humanos. Para acessar essa variável, tudo o que precisamos fazer é acessá-la pelo nome., então o DOGage. Em seguida, multiplique esse valor para 7 para nos dar os anos humanos. Também podemos armazenar isso dentro de uma constante. Vamos para HumaneQuiv. Por enquanto, olhando para essa função, tudo isso está fazendo é pegar nossa variável idade do cão, multiplicando isso por 7. Mas também precisamos dizer a uma função para realmente enviar de volta esse novo valor. A maneira como fazer isso é usar a palavra-chave return. Podemos retornar nossa variável HumaneQuiv, assim como antes. Em seguida, chamamos essa função, que era o DogToHuman. Se salvarmos isso e mais no navegador, atualize, não veremos nada diferente dentro do navegador. Não vemos nada diferente porque na primeira função que analisamos, ela continha um alerta. Essa era uma dica visual de que a função estava sendo executada. Mas este, não temos um alerta, não temos um log de console, não definimos um cabeçalho de Nível 1 com ele no texto. Tudo o que estamos fazendo é retornar um valor. Para realmente usar esse valor, se quiséssemos, poderíamos envolver isso dentro de um log de console e vê-lo retornar valor dentro do console. Ou, mais comumente, poderíamos armazenar isso dentro de um constante chamado resultado. Esse resultado conterá esse valor de retorno, que é o DOGage multiplicado por 7. Se quiséssemos, poderíamos fazer um registro de console simples com o valor do resultado. Mas vamos dar um passo adiante e converter isso em uma string. Se usarmos os ticks traseiros, também poderemos usar essa variável de resultado. Nós diremos, Meu cachorro está envelhecido. Lembre-se de passar uma variável, usamos um símbolo $, as chaves. Em seguida, insira o nome da variável e continue a string a dizer em anos humanos. Isso deve dizer que Meu cão está envelhecido e, no nosso caso, isso seria 21 em anos humanos. Vá para o navegador e abra o console. Atualize a página e lá vamos nós. Há nossa nova string com a variável contida no interior. Só para recapitular, criamos uma função. Esta função acessará nossa variável DoGage de três. Multiplique-o por 7, armazenamos isso dentro de uma variável e, em seguida, retornamos esses resultados da função. Em seguida, chamamos essa função abaixo e armazenamos esse valor retornado dentro de nossos resultados. Os resultados podem ser usados em qualquer lugar dentro do nosso código, como apenas aqui quando o inserimos dentro de uma string. Também esteja ciente de que essa palavra-chave de retorno só deve ser usada uma vez dentro de uma função, pois sinaliza que a função deve parar de ser executada. No entanto, existem algumas exceções, como ao usar isso dentro de uma declaração if else, sobre a qual aprenderemos mais tarde. Mas geralmente retornar é o fim da função e qualquer código que você colocar depois dela será ignorado. Poderíamos ver isso se adicionarmos um alerta. Em seguida, execute isso no navegador, atualize a página e vemos nosso registro do console. Mas não vemos nenhum alerta na página porque isso cai após nossa declaração de devolução. Isso efetivamente acaba com nossa função. Vamos remover isso. No início deste vídeo, mencionamos que esses colchetes logo após o nome da função, também podemos passar informações extras para essa função. No colchete, configuramos um ou mais parâmetros, que você pode pensar como variáveis. Em vez do nosso DOGage logo acima, podemos vírgula isso. Podemos passar uma variável ou um parâmetro chamado DoGage diretamente em nossa função. Também podemos passar vários valores separados por uma vírgula. Então poderíamos acessar isso dentro da nossa função, assim como antes. Mas esse DoGage tinha um valor de três atribuído a ele. Como realmente passamos esse valor para esse parâmetro? Bem, fazemos isso quando chamamos uma função aqui. Vamos dar um exemplo diferente desta vez de cinco. Seu valor real que você passa de uma função de chamada é chamado de argumento. Você não precisa se lembrar disso no momento, mas esse é um argumento e esse é um parâmetro. Vamos experimentar isso. Dê a isso um salvamento e mais para o navegador. Agora vemos o valor diferente de 35 dentro do nosso log. À medida que passamos por este vídeo, tem havido algumas palavras-chave envolvidas. Você não precisa se lembrar de tudo isso nesta fase. As pessoas muitas vezes confundem parâmetros e argumentos e também os usam de forma intercambiável. Não é um problema enorme. Mas apenas para esclarecer, um parâmetro é a variável ou o espaço reservado dentro da nossa declaração de função. Podemos então acessá-los dentro do nosso corpo de função, que está dentro dos aparelhos encaracolados. Em seguida, temos argumentos, que são os valores reais que passamos quando chamamos essa função, como nosso número neste exemplo. Vamos levar isso um pouco mais longe usando nossos dois arrays no topo. Vamos limpar isso e mover todo esse código de função. Agora vamos fazer uma função que verificará se há alergias dentro dessas receitas. A função levará nela a receita, como pão e brownies. Então também podemos passar em um ingrediente específico ao qual uma pessoa é alérgica. A função então percorrerá todos esses valores e verificará se isso está contido dentro da receita. Assim como antes, crie nossa função. Dê a isso um nome de checkAlergias, os parênteses e, em seguida, os aparelhos encaracolados. Para que essa função funcione corretamente, ela precisa levar duas coisas. Primeiro de tudo, a receita real a ser verificada. Vamos chamar isso de perímetro da receita e separá-lo por uma vírgula. Também precisa ser passado um determinado ingrediente, verifique se ele está contido dentro. Abra o corpo da função. O primeiro passo é acessar nossa receita, que é o pão ou a matriz de brownies. Como esta é uma matriz, podemos usar o método includes. Nós analisamos rapidamente o método includes anteriormente e isso verificará se um determinado valor está contido dentro dessa matriz e, em seguida, retornará um valor verdadeiro ou falso. Queremos verificar se esse ingrediente está contido, que é passado como um parâmetro. Embora tenhamos essas variáveis, temos a receita e os ingredientes, isso é exatamente o mesmo que se fôssemos acessar nossa matriz de pão logo acima. Em seguida, chame o método includes, assim. Então poderíamos verificar se a farinha está contida no interior. Se for, qual é o caso aqui, isso retornaria o valor de true. Se não for encontrado dentro da matriz, recuperaremos o valor de false. Ambas as linhas de código fazem exatamente o mesmo. A diferença é que podemos passar em valores diferentes para nossa função. Em seguida, guarde isso dentro de uma constante chamada temIngredientes. Eles só devem ser verdadeiros ou falsos e então podemos devolver isso de volta da nossa função. Para ver esse valor de retorno, podemos criar um log de console. Em seguida, dentro da função chamador aqui, que é chamada CheckAllergies, adicione os colchetes ou os parênteses. Então precisamos passar dois argumentos. Primeiro de tudo, a receita, que é o pão ou os brownies. Vamos para o pão. Em seguida, passe nosso ingrediente que você deseja verificar se ele está contido dentro desta receita. Vamos para a farinha. Sabemos que isso está contido dentro do pão, então isso deve retornar um valor verdadeiro. Vamos salvar isso e atualizar o navegador. Agora vemos nosso valor dentro do console. Vamos tentar um valor falso. Vamos buscar ovos. Isso é falso. Mas sabemos que os ovos estão contidos dentro de brownies. Vamos tentar este e ele deve mais uma vez ser um valor verdadeiro. Assim como uma recapitulação, se tudo isso for um pouco demais no momento, estamos criando uma função chamada CheckAllergies, onde vamos verificar se um ingrediente está contido dentro de uma receita. Em seguida, acessamos esta receita, que é o pão ou os brownies. Verificamos se inclui esse ingrediente específico. Se isso acontecer, isso retornará um valor verdadeiro. Caso contrário, ele retornará false, que será exibido dentro dos registros. Espero que você comece a ver o poder das funções. Mas há muito mais funções, que em breve descobriremos. Um dos grandes benefícios das funções é que elas são reutilizáveis. Se tivermos códigos em nossos programas que repetimos várias vezes, poderíamos pegar todo o nosso código e passar para uma função autônoma e , em seguida, chamar a função no lugar desse código. A função também pode ser passada valores diferentes na forma de argumentos, que acabamos de descobrir aqui. Você também pode pensar em uma função como um bloco de construção para todos os programas também. Cada uma delas recebe uma tarefa específica, para que possamos tornar nosso código mais organizado. As funções também podem estar em muitos dos formulários também. Este exemplo aqui é uma forma mais tradicional de uma função JavaScript e há outros tipos disponíveis também, como função de seta, que abordaremos mais tarde. Como guia geral, se possível, é benéfico tentar manter todas as funções o mais pequenas possível e focar apenas em uma tarefa. Isso torna muito mais fácil saber o que uma função está fazendo, tornando-a mais reutilizável. Também ajuda na depuração porque, se houver um problema, podemos focar esse problema em uma função específica, por isso é muito mais fácil de encontrar. 18. O construtor de matriz: Dentro desta pasta JavaScript, agora estamos na Seção 2, que é esta seção de matriz aqui, e depois a lição Número 1, que é o construtor de matriz. Vamos selecionar isso e abrir isso dentro do navegador. Aprendemos no último vídeo que os arrays se enquadram grupo de tipos de objeto e que eles são um tipo especial de objeto, que é como uma lista, e podemos acessar qualquer um desses valores pela posição do índice. Dentro desse script, criamos matrizes anteriormente assim. Como você pode ver pelo comentário, este é um literal de matriz. Declaramos que queremos uma matriz usando esses colchetes e, em seguida, podemos definir quaisquer valores iniciais que queremos colocar dentro, também podemos confirmar que essa matriz de pizza é um tipo de objeto fazendo um registro de console. Dentro do log do console, podemos fazer uso da propriedade typeof, que vimos anteriormente, podemos verificar o tipo de pizza e, em seguida, dentro do console, vemos que este é um tipo de objeto. Há também outra maneira de criar uma matriz, e isso é usando o construtor de matriz. O construtor de matriz pode ser usado para criar uma matriz vazia que você deseja adicionar mais tarde, uma matriz com espaços vazios, ou também podemos adicionar alguns valores iniciais a ele também. Para fazer isso, vamos primeiro remover nosso log do console, vamos apenas colocar em um comentário, este é o construtor de matriz. A maneira como podemos usar o construtor de matriz é usando a nova palavra-chave, seguida pela matriz, que tem um A. maiúsculo Podemos acessar e trabalhar com isso mais tarde. Também podemos armazenar essa nova matriz dentro de constante, então vamos fazer um log de console, passando o valor de nossa nova matriz, que é ingredientes, então vamos ver o que isso retorna dentro do console. O que temos aqui são esses colchetes e não temos nenhum valor dentro, também podemos ver que a propriedade length tem um valor de zero. Como alternativa, se quiséssemos inicializar isso com alguns valores, também poderíamos passar os valores dentro desses colchetes. Vamos para a massa, um segundo valor de queijo, então dentro do console agora vemos esses dois valores dentro da matriz, e o comprimento agora é dois. Desta forma, é exatamente o mesmo que o método literal acima, e o resultado é exatamente o mesmo. Se quiséssemos, também poderíamos substituir esses dois valores e configurar o comprimento inicial da matriz. Aqui, poderíamos removê-los e podemos declarar que queremos uma nova matriz com cinco espaços vazios. Também podemos vê-los dentro do console, vemos os tempos vazios 5. Esta é apenas uma matriz vazia, que será inicializada com cinco slots vazios. Para mim, pessoalmente, prefiro a primeira abordagem, que é a versão literal. Para mim, parece um pouco mais limpo e descritivo, mas cabe completamente a você qual você quer usar. Também vale a pena notar aqui que, mesmo que tenhamos configurado uma matriz com cinco slots vazios, esse é apenas o valor inicial, também podemos adicionar a ele usando um método push. A maneira de fazer isso é primeiro acessar nossa matriz de ingredientes e, em seguida, podemos encadear no final um método push, que irá empurrar um novo valor para o final dessa matriz. Vamos para pimentas, salve. Agora vemos que temos seis valores armazenados dentro da matriz. Os primeiros valores são cinco slots vazios, seguidos pelo novo valor, que acabamos empurrar para o final dessa matriz. Nem sempre queremos manter esse slot vazio. E se quiséssemos substituir um desses slots vazios por um novo valor? Para fazer isso, podemos fazer uso de um método chamado splice. Digamos que queremos substituir os terceiros slots vazios por um novo valor, o que podemos fazer é chamar o método de emenda e a emenda leva até três valores chamados parâmetros. A primeira é a posição para a qual você quer ir. Lembre-se, como as matrizes começam na posição de índice 0, o número 2 acessará o terceiro slot, separado por vírgula. O segundo valor que queremos declarar quantos itens queremos remover e, no nosso caso, é apenas um. Isso removerá um item no índice número 2, que é nosso terceiro item. Vamos dizer isso e atualizar o navegador. Agora vemos que removemos um único valor, deixando-nos com quatro slots vazios. Mas se não quiséssemos apenas remover esse valor, se quiséssemos realmente substituí-lo por um novo valor, adicionamos um terceiro parâmetro, então digamos que cebolas. Atualize isso, e lá vamos nós. Temos nossos dois primeiros slots, que ainda estão vazios; temos nosso terceiro slot que foi substituído pelo valor das cebolas; e depois o slot número 4 e 5, ainda permanece vazio. Neste vídeo, analisamos o push e também o método de emenda. Ambos são realmente úteis ao trabalhar com matrizes, e abordaremos muito mais durante esta seção. Apenas para maior clareza para o restante deste curso, estarei criando matrizes usando essa abordagem literal logo acima. Mas também é muito importante entender que diferentes abordagens existem, especialmente se você se deparar com elas no código de outras pessoas ou em outros guias. 19. Introdução a propriedades, métodos e o protótipo: Mencionei até agora várias palavras, como tipo de objeto, propriedades e métodos. É útil ter pelo menos um entendimento básico de onde todos eles estão vindo. Saltando para nossos arquivos iniciais, que é lição número 2 desta seção, que é propriedades, métodos e o protótipo. Dentro do nosso script, você verá três matrizes separadas. Eu tenho a margherita, o vegetariano, e também o conjunto de pizza pepperoni. Até agora, analisamos brevemente alguns exemplos do que podemos fazer com matrizes. É assim que podemos acessar propriedades e métodos. As propriedades ou a única propriedade que realmente observamos até agora são o comprimento. Propriedades, analisamos coisas como o comprimento que acessará a matriz e, em seguida, encadeia-se no final sobre o comprimento. Isso nos dará o comprimento da matriz, então aqui teremos três itens diferentes. Também analisamos métodos também. Os métodos que vimos até agora são o método push e também emenda. Novamente, eles também estão encadeados no final de uma matriz, então isso será margherita.push ou margherita.splice, e então passamos certos valores para esses colchetes. Analisamos métodos e analisamos as propriedades, mas qual é exatamente a diferença e de onde elas vêm? Primeiro, vamos dar uma olhada de onde eles realmente vêm. Se pensarmos nisso, já temos três matrizes dentro do nosso script aqui, mas poderíamos ter centenas ou até milhares em um programa maior. Cada um desses arrays também tem acesso a todos os nossos métodos e também todos os outros métodos disponíveis também. Essa matriz pode usar o push. Essa matriz também pode usar push, assim como esta também. E se cada array que criamos também carregasse o peso desses métodos, é muito código ou informação extra para anexar a cada array. Faria sentido poder criar vários arrays como acabamos de fazer aqui. Teremos todas essas coisas extras como os métodos em um local central para acessar sempre que precisarmos , em vez de tê-los conectados a cada um desses arrays. Bem, isso é realmente o que acontece com tipos de objetos em JavaScript. O JavaScript tem um conceito chamado protótipos, e essa é uma maneira de cada objeto herdar os recursos de outro. Vamos dar uma olhada em algo no console fazendo um log do console e, em seguida, passar o valor da matriz. Esse array com um A maiúsculo é exatamente como o construtor de matriz que vimos no vídeo anterior. É como um modelo para qualquer outro arrays que criamos , como este pepperoni aqui. Isso herdará qualquer um dos métodos que vivem nisso. Você vê isso? Podemos fazer login no console, no protótipo, e vamos até o console para ver o valor desse protótipo, atualizar e abrir isso. Muito disso pode parecer desconhecido nesta fase, mas duas coisas a apontar aqui é que podemos ver empurrar e também podemos ver emenda. Lembre-se que essas são duas coisas que você já viu antes quando analisamos métodos anteriores. É assim que nossos novos arrays têm acesso a todas essas informações, seu protótipo que acabamos de ver o console, é uma propriedade que aponta para outro objeto, no nosso caso, o objeto pai, e, portanto, herdando todos os seus métodos. Também podemos ver isso com coisas como um objeto também. Objeto com O maiúsculo se salvarmos e atualizarmos, abra isso, desta vez entraremos no construtor e isso contém uma lista de todos os métodos disponíveis para este objeto. Vamos dar uma olhada neles na seção de objetos mais tarde. Só para recapitular quando criamos um novo objeto ou um novo array, o que fizemos aqui, esses novos arrays receberão automaticamente a propriedade protótipo adicionada, o que nos permitirá acessar métodos de outro objeto. No nosso caso, todos eles são herdados do construtor de matriz pai e é por isso que não pudemos usar certos métodos em cada um desses novos arrays, como push e splice, e assim como esses herdados métodos que estão disponíveis, também podemos criar nossos próprios desejos de clientes também. Agora, se registrarmos uma de nossas próprias cópias deste construtor, no nosso caso, pepperoni, para o console e atualizamos. Abra isso. Na parte inferior, vemos esse proto e, se abrirmos isso, isso não estará vinculado a todos os métodos disponíveis para essa matriz. É assim que essa cópia dessa matriz nos dá acesso a coisas como push e splice, que acabamos de ver. Se fecharmos esta seção de proto, veremos ao lado de que temos essa propriedade length. Esse comprimento não está incluído dentro do protótipo. Aqui está a diferença entre um método e uma propriedade. Como qualquer um dos métodos pode ser usado em qualquer um dos nossos arrays, eles podem ser compartilhados por meio desse protótipo. Essa propriedade length, no entanto, é específica para essa única matriz pois cada matriz pode ter um comprimento diferente. Faz sentido não compartilhar isso no protótipo e apenas ter isso disponível em cada array individual. Vamos aprofundar isso mais tarde, mas pelo menos por enquanto, você tem uma ideia de onde esses métodos estão vindo e descobriremos muito mais desses métodos nos próximos vídeos. 20. Modificando matrizes: Embora os métodos de matriz não sejam estritamente agrupados em qualquer forma de categoria, alguns deles compartilham algumas características. Por exemplo, algum método de matriz que executaremos envolve algo chamado iteração. Vamos ver isso em um vídeo futuro, mas você pode pensar nisso como repetindo o processo, para cada item dentro da matriz, assim como um loop, se você os usou antes. Além disso, alguns métodos pegam nossa matriz original e o modificam, e alguns deixarão nossa matriz original intacta e retornarão uma nova matriz de valor com base no original. O que vamos ver agora é modificar arrays. Já analisamos alguns métodos de array, que modificam matrizes existentes, como push e pop. Usamos os métodos push como um novo item até o final de uma matriz. Há também o método pop que removerá o último item da matriz. Não só precisamos nos preocupar em modificar a matriz original, o valor que é retornado também pode ser importante. Para a pasta do projeto, vá para esta lição que está modificando matrizes e também abra isso dentro do navegador. Dentro do script, já teremos três linhas de código configuradas. Um deles é usado um array de pizza com três valores. Em seguida, selecionamos isso, enviamos um novo valor para o final do pepperoni e, em seguida, registraremos isso no console. Se passarmos para o navegador para o console. Vemos aqui, temos o novo valor da matriz de pepperoni empurrado para o fim. Bem, e o valor de retorno que recebemos volta depois de executar esse método? Veja isso, podemos armazenar isso dentro de uma variável. Digamos, const, chame isso retornado e defina isso igual ao valor que é retornado após esse método ter sido executado. Então, se pegarmos isso e colocá-lo dentro do log do console, atualizarmos, agora obteremos o valor de quatro. O valor retornado após usarmos o método push é um número de itens dentro da matriz após o envio desse novo item. No nosso caso, agora temos quatro valores. Obtemos esse valor de quatro retornados. Como você pode ver, não apenas os métodos de matriz são úteis por si só, mas muitas vezes o valor retornado que recuperamos também pode ser útil também. Em seguida, também temos o método pop para remover o último valor da matriz. Vamos comentar esta linha aqui. Selecionaremos nossa pizza mais uma vez, acessaremos o método pop e, em seguida, faremos um registro de console para a pizza original. Como seria de esperar quando usamos o método pop, isso removerá o valor do queijo, deixando apenas a massa e o molho. Novamente, qual seria o valor de retorno depois executar o método pop? Bem, vamos verificar isso. Novamente, armazenaremos esse valor de retorno e, em seguida, registraremos isso no console. Vamos verificar isso, atualizar e obteremos o valor do queijo. Em vez do comprimento da matriz que vimos antes, depois de usarmos pop, recuperamos o valor que foi removido do final dessa matriz. Ambos os métodos que acabamos de ver, o push e o pop, afetarão o final da matriz. Faça o contrário e afete o início da matriz. Também temos outros dois métodos. Não vou digitar isso, pois eles funcionam exatamente da mesma forma, mas unshift adiciona um novo valor ao início da matriz, e shift remove o primeiro valor. Os valores de retorno também espelham push e pop. Quando adicionarmos um novo valor usando unshift, recuperaremos a terra da nova matriz. Quando removemos um item com turnos, ele retorna o valor que foi removido, que seria massa. Em seguida, temos o método de emenda, e isso é algo que já vimos para remover e substituir itens em qualquer posição na matriz. Esses anteriores que analisamos, trabalharemos com o início ou o fim de uma matriz. Splice selecionará qualquer item que você deseja. Ele pode ter vários parâmetros e é realmente flexível. Este exemplo aqui tem três parâmetros. Primeiro, temos o número 1, e este é o número de índice da matriz para começar, que para nós é o molho. Em seguida, o número de itens a serem removidos. No nosso caso, um só removerá esse único valor de molho. O terceiro parâmetro, insira um novo valor nessa posição, resultando na nova matriz que vemos na parte inferior. Vamos dar uma olhada em mais alguns exemplos no Visual Studio Code. Podemos comentar esta linha aqui. Abaixo, selecione nossa pizza. Então vamos dar uma olhada mais profunda na emenda. Se apenas adicionarmos o primeiro parâmetro que é a posição inicial de um, e então vamos registrar a pizza depois que esse método entrar em vigor. Vamos ver o que acontece dentro do navegador. Atualize e só vemos o valor da massa. Isso ocorre porque começamos com a posição 1 e, em seguida, removemos todos os itens que seguem até o final da matriz. Um número positivo como esse começará no início de uma matriz. Também podemos usar valores negativos para começar no final da matriz. Vamos dar uma olhada em menos um. Isso removerá o último item de queijo, até mesmo nossa massa e nossa fonte. Se mudarmos isso para menos dois, isso removerá os dois itens finais, deixando-nos apenas com a massa. Como sabemos, podemos adicionar um segundo parâmetro, vamos começar isso novamente no número 1. Podemos adicionar um segundo parâmetro para remover apenas um determinado número de valores. Digamos que quiséssemos substituir o molho normal aqui por um pouco de molho de churrasco, assim como vimos no slide. O que precisamos fazer é remover este e único item que coloquei em um e, em seguida, substituí-lo por um valor opcional. Dentro das citações, podemos substituir isso por molho de churrasco. Salvar. Atualizar. Agora, nosso segundo valor, nossa posição de índice 1, foi substituído por nosso molho de churrasco. Se você também quisesse inserir outro valor na mesma posição, suas coisas para, tudo o que precisamos fazer é adicionar isso no final, separado por uma vírgula. Vamos para pimentas. Eles devem adicionar logo após o molho de churrasco. Como você pode ver, esse método de emenda é realmente flexível para adicionar e remover valores em qualquer posição de índice dentro de uma matriz. Em seguida, temos uma classificação que classificará os valores da matriz alfanumericamente. Basicamente, em ordem alfabética. Estes também estarão em ordem crescente, e também, o método reverso que, como parece, reverte a ordem dos valores da matriz. Também precisamos ter cuidado ao usar o tipo com números. Vamos dar uma olhada no porquê em apenas um segundo. Primeiro de tudo, o que vamos fazer é comentar isso e acessar nossa pizza. Em seguida, basta chamar o método de classificação por conta própria. Registre a pizza e vamos ver o que acontece. Temos massa, molho e queijo. Vamos ver o que acontece no navegador. Atualizar. Estes agora estão em ordem alfabética. Tudo isso funciona como esperado. No entanto, isso é bom porque estamos usando uma string de texto para cada valor de matriz. Mas se isso fosse uma série de números, isso causaria um problema. O motivo é porque, mesmo que nossa matriz contenha números, todos os valores serão convertidos em cadeias de caracteres e, em seguida, organizados alfanumericamente, de modo que a série. Vamos voltar para o editor. Em vez dessas strings, vamos descer e, em vez disso, ela cria uma matriz de números. Estes podem ser quaisquer valores dentro daqui. Vou para 12, 1.000 e depois três. Agora, precisamos acessar a matriz de números e também registrar isso no console. Assim como antes, chamamos o método do molho. Mas vamos ver o que acontece agora, tudo isso é como números. Diga isso, e agora, obtemos o valor de 1.000, 12 e três. O que devemos recuperar é três, 12 e 1.000. Tudo isso está completamente errado. Mas a razão pela qual isso acontece é porque todos esses números são convertidos em strings e, em seguida, classificados como esses valores de string. Da mesma forma que se todos esses números fossem palavras, a classificação começa no primeiro personagem. Aqui, vemos o valor de um e também o valor de um, é por isso que esses dois números começam no início porque um é menor que três. Três são colocados no final. Mas então, por que 1.000 é menor que 12? Bem, isso ocorre porque, novamente, assim como com o texto, se o primeiro caractere for exatamente o mesmo, assim como esses dois, ele comparará o segundo caractere. Com 1.000, esse é o valor de zero e esse é o valor de dois, que significa que dois foi um valor maior colocado sobre isso após os 1.000. Obviamente, essa não é uma boa maneira de classificar matrizes de números. Para isso, o método de classificação também pode adotar uma função de comparação. Lembre-se, de antes, demos uma olhada em como uma função funciona. Uma função se parece com isso, temos a palavra-chave function. Em seguida, damos um nome a essa função. Usamos os colchetes ou os parênteses e, em seguida, as chaves para executar algum código dentro. Opcionalmente, isso também pode receber alguns valores, e eu vou, por enquanto, passar os valores de a e b. Não se preocupe com isso por enquanto, vamos dar uma olhada no que é isso em apenas um segundo. O que podemos fazer é cortar essa função e, em vez disso, colocá-la dentro do método de classificação. Coloque isso em. Se quiséssemos, também poderíamos opcionalmente, remover esse nome de função pois ele será automaticamente chamado a partir desse método de classificação. Então, dentro desse corpo de função, o que vamos fazer é retornar um takeaway b. Agora, isso pode parecer um pouco confuso mas o que realmente está acontecendo aqui é vamos chamar essa função para cada valor dentro dessa matriz de números, passamos a e b, e estes podem ser qualquer nome de nossa escolha. Não importa isso é chamado a e b, pode ser o número um, número dois, pode ser qualquer coisa que você queira. Mas o fator chave aqui é que vamos comparar dois números de cada vez. Quando isso começar, a função de classificação substituirá a e b pelos dois primeiros valores de 12 e 1.000. Isso será exatamente o mesmo que retornar 12, tirar 1.000. Então, pela segunda vez, serão 1.000 de três, e isso continuará até o final da matriz. Para o primeiro que é 12, leve 1.000. Isso obviamente resultará em um número negativo. Isso será empurrado de volta para o início da matriz. Em seguida, ele passará e repetirá isso para cada par de números, classificando-os na ordem correta por comparação. Agora, se removermos essa linha, continuaremos o console do log no novo valor da matriz, salvamos e atualizamos. Agora eles estão na ordem correta. Como você pode ver, isso é realmente útil se tivermos uma variedade de números. Não queremos confiar na conversão alfabética, que vimos no exemplo anterior. Finalmente, vamos dar uma olhada ao contrário. Reverter, em comparação, é bastante simples em comparação com isso. Tudo o que precisamos fazer é comentar este exemplo, acessar nossos números e, em seguida, chamar o método de matriz reversa. Salve isso. Agora, em vez de ter o valor de 12, 1.000 e três, agora temos o valor de três, 1.000 e 12, que é a ordem inversa. 21. Retornando novos valores: No vídeo anterior, os métodos que analisamos todos tinham algo em comum e foi que modificamos a matriz existente, mesmo que eles retornassem algum de alguma forma, como um valor verdadeiro ou falso, a matriz original ainda foi modificada também. Este vídeo continuará com mais alguns métodos de array, mas a diferença é que desta vez, a matriz original permanecerá intacta e algo novo será criado ou retornado. Um exemplo disso é algo que já usamos, que é o método includes. Includes retornará um verdadeiro ou falso se um determinado valor for incluído na matriz; portanto, ele não modifica a matriz original. Também temos o método join, também, que pega nossos valores de matriz e os une como uma string. Dentro do nosso projeto, no arquivo Returning New Values, até o script, temos esse exemplo aqui. Este é um exemplo de inclusões. Estamos verificando se este conjunto de pizza inclui alguma massa. Se isso acontecer, este será retornado valor verdadeiro; se não, será falso. Em seguida, produzimos dois valores. O primeiro é o array de pizza; e, portanto, podemos verificar se isso foi modificado e depois está incluído, que é o valor de retorno. Salve isso e abra isso dentro do navegador. Atualize e podemos ver a matriz original ainda não está modificada e, em seguida, obtemos o valor de true. Como seria de esperar, se mudássemos isso para ser outra coisa, esse seria o valor de false. Podemos ver que esse método deixará a matriz original intacta, assim como o método de junção também. Join também deixará a matriz original como estava e retornará uma nova string contendo todos os valores da matriz separados por uma vírgula. Vamos comentar esta linha aqui, configurar uma segunda constante chamada string, e isso será igual a pizza.join, que vai pegar todos os valores dentro da nossa matriz e juntá-los como um corda única. Altere esse valor para ser string, atualizar e há nossa nova string separada por vírgulas. Se não quiséssemos usar vírgulas, se quiséssemos um caractere diferente para separar esses valores, tudo o que precisamos fazer é passar um novo caractere como uma string dentro desse método de junção. Por exemplo, se quiséssemos um traço, poderíamos usar isso e também, assim como com qualquer outra string, também poderíamos adicionar espaços dentro daqui para adicionar algum espaço em torno de cada uma dessas palavras. Em seguida, vamos trabalhar com a posição de índice da matriz. Como os valores da matriz são armazenados numericamente, muitas vezes precisamos acessar um valor em um determinado número de índice, mas se não soubermos o número de índice exato para começar, podemos usar um método chamado indexOf para encontre isso para nós. Neste primeiro exemplo, passamos indexDo valor da string da fonte, então recuperamos o número do índice e, como as matrizes começam na posição 0, molho é a posição 1. O segundo exemplo mostra LastIndexOf, e pode parecer que isso é para selecionar o último valor da matriz. No entanto, é para encontrar a última ocorrência de um valor. Essa matriz tem o valor do lugar de massa dentro duas vezes, então procura a última ocorrência desta palavra, que é a posição de índice 3. De volta ao nosso editor, vamos dar uma olhada em alguns exemplos. Podemos remover essa string e, desta vez, vamos procurar o número de índice de um item específico. Por exemplo, se estivéssemos procurando o molho se este fosse um conjunto muito longo, queríamos encontrar exatamente em que posição isso estava. Para isso, podemos definir nossa constante igual a pizza.indexof e, em seguida, encontrar o número do índice pelo nome do molho, e isso seria armazenado dentro dessa constante, passe isso para o nosso log do console e salve, atualize. Como sabemos, esse é o número de índice 1. Podemos ir para o queijo, e isso também será atualizado, e depois que tivermos o número de índice de qualquer valor de matriz, poderemos fazer o que quisermos com ele, como selecioná-lo, podemos removê-lo e também substituí-lo também. Em seguida, temos o LastIndexOf. Certifique-se de que o eu e o O sejam letras maiúsculas. Lembre-se, como mencionado nos slides, isso não encontra o último valor de índice de nossa matriz, em vez disso, ele encontrará a última ocorrência de um determinado valor. isso, significaria se a palavra queijo fosse colocada duas vezes, então vamos também adicionar queijo no início da nossa matriz. Agora temos duas ocorrências do mesmo valor. LastIndexOf retornará a última ocorrência desta palavra, portanto, em vez de esta ser a posição 0, ela retornará o índice número 3. Vamos verificar isso. Atualize, e há nosso valor de três. Se isso fosse movido para pouco antes do nosso molho, a última ocorrência agora seria o índice número 2. Além disso, para este, o lastIndexOf e também o indexOf, se não encontrar nenhum valor correspondente, ele retornará um valor negativo 1, portanto, se mudarmos isso para ser um valor que não está no array, o valor retornado seria negativo 1. Os dois últimos métodos que vamos analisar serão fatia e concat. Slice é uma maneira de cortar algum valor da matriz, e este exemplo mostra a passagem para valores que são 1 e 2. O primeiro valor de 1 é a posição inicial, e para este exemplo, esse seria o nosso molho. O segundo valor de 2 é a posição final opcional, portanto, ele cortará todos os valores até , mas não incluindo esta posição, portanto, isso resulta apenas no valor do molho sendo cortado. Se o valor n fosse o número 3 em vez de 2, ele cortaria o molho e o queijo. O segundo exemplo é concat, e isso une os valores de dois ou mais arrays. Temos o conjunto de pizza e também alguns extras opcionais. Se quisermos combiná-los em um único array, chamaremos um desses arrays, como a pizza, adicionamos o método concat e, em seguida, passaremos a matriz extras para unir todos os valores em uma única matriz. Vamos dar uma olhada neles na nossa pasta do projeto. Podemos remover o LastIndexOf e dar uma olhada em como funciona a fatia. Vamos acessar nossa pizza.slice e dentro daqui, se adicionarmos apenas um valor assim, essa seria a posição inicial; portanto, isso cortaria todos os valores da matriz da posição 1 até o final da matriz. Podemos armazenar isso dentro de uma variável, depois registrá-lo no console, iniciar a fatia. Todos os valores do índice número 1 até o final da matriz. Temos massa, queijo e molho. Atualize e lá vamos nós. Como em todos os métodos neste vídeo, ainda vemos que a matriz original ainda está intacta. Em vez disso, podemos retornar uma nova matriz com esses valores de fatia. Além disso, assim como vimos dentro desses slides, podemos passar em uma posição final opcional. Isso iniciará nosso índice número 1 e terminará nossa posição no número 3, mas lembre-se, esse terceiro e último valor não será incluído, então isso só deve devolver a massa e o queijo, e é isso que vemos em o console. Nestes últimos vídeos, analisamos método da fatia e também um semelhante, que era emenda. Na superfície, ambos os métodos parecem bastante semelhantes, mas a diferença é que a emenda remove ou adiciona à matriz original, e o método de emenda mantém a matriz original intacta e em vez disso, retorna um novo com os valores selecionados. O caso de uso de ambos depende se queremos manter a matriz original ou se quisermos modificá-la. Finalmente, vamos examinar o método concat. Para fazer isso, como vimos dentro dos slides, precisamos de uma segunda matriz para mesclar. Isso criaria uma segunda matriz chamada extras, que conterá algumas coberturas adicionais. Vamos adicionar algumas pimentas e também algumas cebolas. Podemos então comentar o valor de antes. Crie nossa NewPizza, e a NewPizza será igual a ambas as matrizes fundidas. Para fazer isso, primeiro acessaremos um de nossos arrays, como pizza, então chamamos o método que foi concat e depois mesclamos os extras. Salve e mais no navegador. Opa, só precisamos registrar a nova pizza. Atualize e no console e, como com todos os métodos neste vídeo, a matriz original permanece intacta. Estamos registrando a pizza aqui. Temos um array NewPizza recém-retornado, que é uma combinação da matriz de pizza e também os extras também. 22. Métodos de iteração: O grupo final de métodos que vou mostrar neste vídeo são métodos que irão fazer mostrar neste vídeo são métodos um loop sobre cada um desses itens de matriz e, em seguida, executar uma função para cada um deles. Nos arquivos iniciais, vá para os métodos de iteração, que está na Seção 2 e no número 5, esses métodos de iteração que executam uma função para cada um são realmente úteis quando temos muitos itens de matriz e quero repetir um processo para cada um. Dentro da página de índice de arquivos iniciais, você pode ver no topo, temos três funções de usuário dentro dos comentários. Se você usa algo como o WordPress no passado, isso parecerá muito familiar. Essa é uma configuração comum. Você pode ver aqui que temos todas as funções e um array e isso será muito comum se tivéssemos vários usuários em nosso site e quiséssemos dar aos usuários diferentes níveis de acesso. Por exemplo, se tivéssemos um objeto de uso com o nome e todo o restante das informações de uso. Também poderíamos adicionar uma matriz assim. Poderíamos colocar todas as funções e permissões que esse usuário tenha. Então, poderíamos verificar isso antes que eles façam qualquer ação em nosso site. Por exemplo, se eles estiverem prestes a publicar uma postagem no blog, talvez quereremos percorrer todas as funções dentro da matriz e verificar se eles têm as permissões corretas antes de fazê-lo. Assim como com o WordPress sobre o topo, temos o administrador, que é o acesso em tamanho real, e tem todas as permissões, faz praticamente qualquer coisa em um único site. Temos o autor e o autor não pode publicar coisas como suas próprias postagens no blog. Eles também podem editá-los. Eles são efetivamente responsáveis por seu próprio conteúdo. Bem, isso terá um assinante que geralmente é as configurações padrão com um site WordPress. Eles não conseguem gerenciar nosso lado, não podem editar nenhum conteúdo. Tudo o que eles podem fazer é basicamente gerenciar seu próprio perfil. O que vamos fazer aqui é simular um site de postagem no blog onde um usuário pode criar suas próprias postagens no blog. Assim que o usuário fizer login e criar uma postagem no blog, quando ela for em frente e clicar no botão Publicar, primeiro queremos percorrer as funções do usuário e verificar se eles estão corretos permissões. No nosso caso, queremos verificar se eles são um administrador ou um autor. Se estiverem, eles podem seguir em frente e publicar. Caso contrário, eles precisarão de permissão antes que isso esteja disponível em nosso site e, para isso, criaremos uma função. Porque lembre-se que esses métodos de iteração executarão uma função para cada valor dentro da nossa matriz. Esta função chamará esse canPublish e isso retornará um valor verdadeiro ou falso. Para isso, verifique também as funções que precisamos para passar uma função para a função e , em seguida, queremos verificar se a função é igual ao administrador ou igual ao autor. Podemos usar o papel, o triplo é igual para verificar se a linha que está sendo passada é primeiro igual ao administrador. Todo o usuário precisa de [inaudível], que é o operador ou que já vimos anteriormente. Também podemos testar se a função é igual ao autor. Se for, retornaremos esse valor, que será verdadeiro ou falso, e para ver esse valor de retorno, criaremos um log do console, basta explodir e esse log do console chamará essa função. Passá-lo podePublique e primeiro começaremos passando o administrador. Essa string de administração será convertida para essa função e verificamos que essa função é igual ao administrador ou ao autor. Para o console. Atualize esta página, e isso é claro que é verdade. Vamos também tentar o autor, que é a segunda condição aqui e isso também deve ser verdade. Finalmente, o assinante e este é falso. Nossa função está funcionando corretamente. Mas no momento, é muito manual. Temos que passar manualmente cada uma de nossas cordas e verificar dentro daqui, cada uma de cada vez. Isso é bom quando temos apenas três funções separadas. Mas imagine se você tivesse que repetir isso, digamos, 50 papéis diferentes em nosso site, isso se tornará um processo longo e tedioso. Bem, para ajudar com isso, vamos voltar a todo o propósito deste vídeo, que é olhar para os métodos de iteração. Isso economizará muito de todo o trabalho manual fazendo um loop sobre cada uma dessas funções e verificando se ela contém um valor específico. O primeiro método de iteração que vou examinar é alguns e, assim como outros métodos também, começaremos acessando a matriz pelo nome da variável, e então chamamos o método algum depois e isso vai verificar se alguns dos valores da matriz são muito, mas muito para quê? Bem, usando esse mesmo exemplo, podemos mover essa função para algum método. Pegue todo esse código aqui, coloque isso e coloque isso dentro dos colchetes. Não podemos remover esses nomes de função pois não precisamos, a função é manualmente. Em vez disso, ele será chamado uma vez para cada valor dentro dessa matriz e isso geralmente é chamado de função de retorno de chamada. Essa função agora seria chamada três vezes. A primeira vez que o papel assumiria a string admin, então seria autor e, em seguida, a terceira vez seria o assinante e, para cada uma dessas funções, ele executaria o código dentro da função. Assim como com toda essa função ainda está retornando um valor verdadeiro ou falso e podemos capturar esse valor de retorno dentro de uma variável. Dentro do registro do console, ainda estamos chamando CANPublish. Mas desta vez isso não é uma função, então podemos remover os parênteses e você simplesmente registra o valor dessa constante. Agora nos dá um salvamento, atualização e esse valor agora é igual a verdadeiro. Isso é verdade porque pelo menos um dos papéis dentro daqui é uma correspondência. Se nada disso fosse uma correspondência para administrador ou autor, acabei de mudar isso, podemos ir para moderador e digamos convidado, salve isso e atualize, e agora esse é o valor de false. Olhando para este slide, esse é o mesmo método que vemos no topo. Apenas para recapitular, ele retornará true se um ou mais dos valores da matriz forem muito para a função call-back. Mas e se quiséssemos obter um valor verdadeiro somente se todos os itens da matriz forem iguais? Bem, para este caso de uso de como todos os métodos, e podemos ver um exemplo abaixo. Esta é uma série de pontuações dos testes deste ano. Em seguida, executamos uma função de retorno para cada valor na matriz. Para cada dois retorno verdadeiro, todos os itens da matriz devem ter mais de 95. Se um único estiver abaixo de 95, isso fará com que ele falhe e retornará um valor falso. Usamos esses métodos se quisermos se retornar valores semelhantes ou cada valor. Em vez de apenas ter um array autônomo assim, é mais comum tê-lo anexado a um objeto de usuário. Imagine que tínhamos um site com vários usuários, e todos eles estavam armazenados dentro de uma matriz. Em seguida, dentro de cada um de nossos usuários tem seu próprio objeto de usuário. Abra as chaves para um objeto. Primeiro, teremos apenas um ID de usuário de um, separado por uma vírgula. A segunda propriedade do papel de administrador. O que vou fazer é adicionar uma vírgula no final disso e depois copiar. Colaremos isso em mais algumas vezes. Usuário 2, desta vez um papel diferente do autor. Usuário 3, este também pode ser o autor dois e, finalmente, o número quatro pode ser o assinante. Usar um método de iteração significa que podemos viver por cada um desses objetos de usuário e filtrar por uma função específica. Vamos imaginar que queríamos pegar esse usuário em particular, que é o papel do assinante. Como esta é uma matriz para fazer isso, talvez também precisemos encontrar o número do índice antes que possamos capturar essas informações. Para isso, temos algo chamado find index. Este exemplo também tem uma matriz de objetos de usuário. Em seguida, chamamos de método find index, e ele executará uma função para cada um desses valores. Cada um desses valores é armazenado no perímetro do usuário das funções. Nas instruções de retorno, acessamos o usuário, selecionamos a função e verificamos se ela é igual a admin. Em seguida, ele retornará a posição de índice da matriz da primeira partida. Para este exemplo, é o primeiro valor que é a posição zero. Vamos experimentar este nós mesmos. De volta à nossa página de índice, vou esclarecer as coisas. Mesmo apenas esse array de usuários. Então, na parte inferior, vamos acessar nossos usuários, chamaremos o método que acabamos ver chamado find index. Como todo o resto dos métodos, isso também assumirá uma função e também precisamos passar o usuário. Assim como antes, essa função será chamada uma vez para cada item dentro dessa matriz. A primeira vez que ele fizer um loop será o usuário 1, usuário 2 e assim por diante. Então o que quer fazer é acessar o usuário , vou passar isso. Em seguida, queremos acessar a função individual. Se quiséssemos encontrar essa função de assinante, poderíamos verificar se isso é igual à cadeia de assinante. Em seguida, retorna é o valor que será verdadeiro ou falso. Em seguida, armazene esse valor retornado dentro de uma variável. Vamos verificar isso fazendo um registro do console. Significa registrar essa variável de índice, atualizar o navegador e recuperamos o índice número três. Este é o índice número 0, 1, 2 e 3. Agora sabemos que tudo isso está funcionando corretamente. Como podemos ver, isso retorna a posição do índice. Mas e se quiséssemos o valor real, como esse objeto completo? Bem, para isso temos um método disponível para nós chamado find. Find selecionará a primeira correspondência dentro da nossa matriz. Por exemplo, se tivéssemos vários assinantes, o método find seria útil para encontrar o primeiro, que ele aparece. Este exemplo também tem uma matriz de objetos de usuário. Em seguida, chamamos o método find e ele executará uma função para cada um dos valores. Aqui verificamos se a função é igual ao autor e , em seguida, encontrar retornará o primeiro objeto, que é uma correspondência. No nosso caso, é o usuário número dois. Nesse caso, apenas mudamos isso para ser encontrado. Desta vez, verificaremos se a função do usuário é igual ao autor. Ambos temos duas funções de autor dentro da matriz, e esse método de busca selecionará o primeiro. Renomearemos isso para ser o autor e também registraremos isso no console. Salve e atualize, abra isso. Isso selecionou o usuário número dois, que é a primeira de nossas duas funções de autor. Isso é realmente útil para encontrar a primeira correspondência dentro da nossa matriz. Mas e se quiséssemos selecionar esses dois usuários que eram uma correspondência? Bem, para isso também temos um método chamado filtro. Usando o mesmo exemplo de antes, tudo o que fizemos aqui é alterar o método de busca a ser filtrado, e isso retornará todas as correspondências em vez da primeira. O que significa que recuperamos um novo array contendo o usuário 2 e também 3. Tudo o que fazemos é mudar o achado para ser filtro e, em vez disso recuperamos vários autores, então adicionaremos um s a cada um deles. Salvar e atualizar. Agora vemos uma matriz contendo dois objetos separados. Se abrirmos isso, dentro daqui podemos ver que temos o usuário número dois e também o número três. Todos são métodos realmente úteis para selecionar valores dentro de uma matriz. Também algumas coisas a serem conscientes também é desde o ES 2015, também temos um tipo diferente de sintaxe de função que podemos usar, e isso é chamado de função de seta. As funções de seta têm algumas diferenças de comportamento para essa função tradicional, que veremos com mais detalhes em uma seção posterior. Mas, por enquanto, também podemos usá-los para encurtar nosso código de função. A maneira de fazer isso é remover essa palavra-chave de função e, logo após esses colchetes colocamos em uma seta. Uma seta consiste nos iguais e no colchete angular reto para criar esses efeitos de função de seta. Como está, esse código é completamente válido. Isso é bom para usar. Se salvássemos isso e atualizássemos, ainda veremos os mesmos dois resultados, mas também podemos encurtar ainda mais essa função. Podemos colocar todo esse código em uma única linha removendo esses colchetes encaracolados. Vamos mover ambos e colocar tudo isso em uma única linha. Traga isso assim. Em seguida, escrevemos uma função de seta assim em sua própria linha. Também podemos remover a palavra-chave return para, pois isso será retornado automaticamente para nós. Novamente, tudo isso é perfeitamente válido e se atualizarmos o navegador, ainda veremos os mesmos dois resultados. Finalmente, se tivermos apenas um único parâmetro após essa função, podemos até remover os colchetes circundantes assim. Mas você esteja ciente, se tivermos vários parâmetros, tivemos que passar um segundo valor dentro aqui, ainda precisaríamos adicionar os colchetes ao redor. Uma sintaxe é frequentemente usada para manter coisas assim, que são mais simples e adicionam todo nosso código em uma única linha. Cabe a você, qual tipo você prefere usar em seu próprio código. Mas é útil saber que esses dois estilos existem porque você verá muitos exemplos online. Esses últimos vídeos, mostrei alguns dos métodos de array mais populares, e ainda há mais alguns também, mas todos eles geralmente funcionam de forma semelhante. Há também mais desses métodos de iteração também. Chegando, vamos dar uma olhada neles com mais detalhes. 23. Redutores: Agora vamos cobrir uma técnica para reduzir uma matriz para um único valor. Vou fazer isso usando o método reduzido. O método reduzido, como os anteriores que vimos, assumirá uma função e executará essa função para cada valor de matriz. É mais simples. Poderíamos adicionar uma série de números e, em seguida, retornar o total de todos eles adicionados juntos. Claro, podemos ir muito mais complexos se precisarmos também. Vamos dar uma olhada em alguns exemplos nesses arquivos de dados. Dirija-se a este que são os redutores. Você pode ver, dentro de um script, temos uma matriz de números simples contendo cinco valores diferentes. Se tudo o que queremos fazer é somar todos esses valores e retornar o total, o método reduzido é perfeito para isso. Assim como acontece com outros métodos, logo abaixo podemos chamar o método reduzido no nome da matriz. O que no nosso caso são números. Chame reduza, adicione os colchetes e, em seguida, vamos executar uma função para cada valor dentro dessa matriz. Essa função pode ser passada diretamente para os colchetes como fizemos anteriormente, ou assim como em todos os métodos, também poderíamos mantê-los separados se quiséssemos. Isso também tem o benefício adicional de, é mais reutilizável, se quisermos usá-lo em outro lugar também. De qualquer forma, está completamente bom. Mas, para este exemplo, queremos mostrar a abordagem alternativa, que é criar a função separadamente. Crie nossa função logo abaixo disso. Como isso somará todos os números e retornará o total, daremos a isso um nome total, adicionaremos os parênteses e, em seguida, as chaves. Para isso, isso tomará dois parâmetros dentro dos colchetes da função. Este será o total separado por vírgula. O próximo será o valor atual. Então, dentro dos colchetes ou dentro das chaves, vamos retornar o total, adicionado ao valor atual. Vou explicar o que tudo isso faz mais detalhes em apenas um momento. Mas, por enquanto, como essa função é separada do método reduzido, também precisamos chamar isso dentro dos colchetes. Mais uma vez, só para esclarecer, isso é exatamente o mesmo. Vamos colocar isso diretamente dentro daqui. De volta a esta função, e isso é chamado uma vez para cada um dos valores da matriz. Para este exemplo, ele será executado cinco vezes. É aqui que esses dois parâmetros entrarão em jogo. Para cada loop, o número atual à direita é bastante autoexplicativo. Este é o valor atual da matriz, como 72 e 33. Mas primeiro, temos uma linha total à esquerda. Este é o total do loop anterior, geralmente chamado de acumulador, pois acumula os resultados anteriores. Só para esclarecer o que está acontecendo aqui, vamos dar uma olhada. Vamos adicionar um comentário rápido aqui. Na primeira vez que esta função for executada, este será o loop número 1, e o total, que é este aqui, será igual a zero, já que ainda não adicionamos nenhum valor. O segundo valor do valor atual, será 72, já que este é o primeiro valor dentro da matriz. Em seguida, passe para o loop número 2. Primeiro de tudo, novamente, temos o total, que são esses dois valores somados juntos. Esses dois valores somados juntos serão iguais a 72. Então o valor atual para este é o número 33. Mais uma vez, exatamente o mesmo para o loop 3. Desta vez, adicionaremos esses dois valores juntos, o que nos dará o resultado de um 105. Então o valor atual desta vez é 108. Você pode ver um padrão aqui para cada loop que vamos adicionar os dois valores. Desta vez, no loop número 4. Esses dois somados, para o loop número 4, serão 213. O valor atual para o loop número 4 é 222. Então, finalmente, o loop número 5. Esses dois valores somados para o loop 5 serão iguais a 435, com o valor atual sendo o número 6. Claro, então não aceite minha palavra para isso. Vamos fazer login no console e verificar quais são os valores. Lembre-se, estamos retornando esse valor final de volta da função. Podemos armazenar isso dentro de uma variável. Digamos que o resultado const seja igual a esse valor de retorno e, em seguida, um log de console. Só para que você saiba também, que o Visual Studio Code executará um log de console, ou um atalho para isso, se apenas digitarmos o log de palavras e, em seguida, apertar “Enter”, passar o resultado. Podemos verificar isso dentro do navegador. Inspecione, no Console, e vemos o valor de 441, que são os dois últimos valores somados juntos. Isso é adicionado para obter todos esses cinco números e, em seguida, retornar o valor final dentro dessa função. Também podemos fazer qualquer outra coisa que quisermos com esses dois valores, como subtração. Vamos mudar isso para ser negativo. Faça um teste a isso e obtemos o valor de retorno de negativo 297. Isso fará exatamente o mesmo, passaremos cinco vezes, mas desta vez deduziremos o valor atual do total, é por isso que obtemos esse valor negativo. Vou restabelecer isso para ser mais. Isso soma nossos valores de matriz da esquerda para a direita, como acabamos de ver com este exemplo. Também temos um método semelhante que funcionará da direita para a esquerda. Isso é muito simples. Tudo o que precisamos fazer é mudar a redução para ser ReduceRight. Dê a isso um salvamento e atualização, e obtemos o mesmo valor de 441, porque estamos adicionando os mesmos números, mas desta vez está em uma ordem diferente. Para verificar novamente, isso vai da direita para a esquerda. Temos toda a certeza, mesmo que tenhamos o mesmo valor aqui. Também podemos adicionar um número de índice opcional. Adicione isso como o terceiro parâmetro ao nosso redutor. Então, pouco antes de devolvermos isso, podemos fazer um registro de console. Registre o valor do índice. Devemos ver o número do índice indo do maior para o menor número. Este é o último número que é o índice número 3, até zero. Ambas as funções, o ReduceRight e também a redução são úteis por vários motivos. Podemos querer acompanhar a pontuação de um usuário ou pontos dessa maneira e, em seguida, totalizar todos esses valores juntos no final. Essas informações também podem ser usadas de outras formas, talvez para encontrar a pontuação média. Para fazer isso para descobrir o número médio dentro dessa matriz. Logo abaixo do nosso método ReduceRight aqui, criarei uma nova constante. Apenas tudo isso chamam a média, e defina isso igual a um cálculo. O cálculo que queremos fazer é pegar os resultados completos, que é o valor de todos esses somados. Esta é a etapa 1, e então precisamos dividir isso pelo número de itens dentro da matriz. Mais uma vez, podemos fazer isso bem simples. Precisamos acessar nossa matriz de números completos e, em seguida, a propriedade , que é comprimento, que vimos no passado. Em seguida, podemos registrar a média do console, ir para o navegador e atualizar. Agora podemos ver que a média é 88,2. 24. Mapa e forEach: Agora quero mostrar mais dois métodos de matriz. Como você pode ver pelo título, este é Map e forEach. Esses dois métodos também são métodos de iteração, como vimos anteriormente. Eles executarão um loop sobre cada item de matriz e, em seguida, executarão uma função de retorno de chamada. Muitos dos métodos de matriz que temos código até agora, e muito mais específicos, como classificar uma matriz, podemos fazer filtragem, podemos verificar se existe um valor, mas esses dois métodos, que são MAP& ForEach, são muito mais gerais. O uso para sua finalidade é limitado apenas ao código, que escrevemos dentro da função. Abra o arquivo Map e forEach. Então, dentro deste script, haverá dois arrays. Teremos uma matriz de números simples e teremos uma variedade de postagens no blog, quais daremos uma olhada em apenas um momento. Mas agora vamos começar acessando os números e, como sempre, chamamos o método com ponto ou pelo nome de forEach. Poderíamos escrever uma função que, assim como olhamos anteriormente dentro daqui. Usando a sintaxe de função mais tradicional ou também para a prática, vou converter isso em uma função de seta. Uma função de seta, que vimos anteriormente, começa com os colchetes assim. Em seguida, escrevemos uma seta com os iguais e o símbolo maior que. Então, temos algumas opções diferentes. Se quiséssemos, poderíamos adicionar várias linhas de código dentro das chaves. Poderíamos escrever nosso código dentro e, em seguida, poderíamos usar a palavra-chave return para retornar um valor dessa função ou, como já vimos anteriormente, poderíamos emitir a palavra-chave return e coloque isso em uma única linha. Se colocarmos nisso em uma única linha, também poderemos remover essas chaves, e isso retornará diretamente o código. Vamos fazer um log do console, como o valor de retorno. Lembre-se de que, como estamos fazendo um loop sobre cada valor na matriz de números, isso também tomará o número como um parâmetro. Agora, teremos a liberdade de fazer o que quisermos com esse parâmetro, como um simples log de console. Agora podemos colocar o número, multiplicar por dois. Confira isso na atualização do console para que vejamos 144, 66. Isso é apenas todos esses números multiplicados por dois. O número do índice também está disponível, se quisermos inserir isso como um parâmetro. Lembre-se de uma vírgula e do índice, então podemos usar esse índice em qualquer lugar que quisermos em nossa função. Vamos remover isso. Quero adicionar a string do modelo com os backticks, para que possamos inserir uma variável. Teremos o texto do número disponível, que é um símbolo $, e as chaves, passarão no índice, depois dois pontos, então o que vamos dizer aqui é número um e depois dois pontos. Em seguida, insira nosso número. Se quisermos, podemos fazer algo semelhante às tentativas anteriores, que é multiplicada por duas. Vamos salvar isso e mais no navegador. Lá vamos nós. Podemos acessar o número zero, número um, número dois e ver cada um dos valores individuais. Novamente, se quiséssemos, também podemos manipular isso. Se quisermos que isso comece no índice número um, poderíamos adicionar o valor de um. Então, desta vez, em vez de começar no número zero, isso começará no número um. Como mencionado anteriormente, podemos escrever qualquer código dentro dessa função e tirar nossa matriz de postagens de cima. Vamos dar uma olhada em um exemplo com uma matriz de objetos. O que vamos fazer desta vez é percorrer todas as nossas postagens e, em seguida, executar uma função para cada um desses objetos. Selecionaremos o título da postagem do blog e , em seguida, ele transformará o texto em maiúsculas. Para a prática, começaremos de novo, acessaremos nossas postagens, chamaremos cada um, abriremos os colchetes e, em seguida, poderemos inserir uma função com qualquer sintaxe que você queira. Neste vídeo, vou ficar com a função de seta, que é assim. Em seguida, insira novamente um registro do console. Desta vez, estamos percorrendo todas as postagens. Esta função tomará um parâmetro para cada postagem. Além disso, se você se lembrar, se tivermos apenas um único parâmetro assim, também podemos remover os suportes circundantes, torná-lo um pouco mais curto. Às vezes, porém, se você salvar assim, o editor de texto reinserirá esses back-in, mas tudo bem. O que vamos fazer agora é acessar essas postagens individuais dentro do registro do nosso console. Então, como esse é um objeto, precisamos acessar uma das chaves, como o título ou o corpo. Vou buscar o título. Então também vou inserir um método chamado ToupperCase. Até agora, nesta seção, estamos usando muitos métodos que chamaremos em uma matriz, mas o ToupperCase também é um método. Mas este é usado em uma sequência de texto. Vamos experimentar isso. Vá para o navegador e atualize. Há nossos três títulos, então chamamos a função três vezes e, para cada um, selecionamos o título e transformamos o texto em maiúsculas. Este é o método forEach, mas e o Map? Vamos até o nosso editor e tudo o que precisamos fazer é mudar forEach, mapeamos, salvamos e atualizamos, e recuperamos exatamente os mesmos valores dentro do console. Entre Map e ForEach, eles são muito parecidos. Qual é exatamente a diferença? Há algumas razões pelas quais eles são diferentes e um é o valor de retorno. Para ver isso, precisamos armazenar esse valor retornado dentro de uma constante ou variável. Vamos dizer novas postagens e definir isso igual ao nosso valor de retorno, muda de volta para ser forEach. Em seguida, em vez do log do console, apenas retornará o valor dessa transformação. Lembre-se de que podemos ter uma única linha com uma função de seta como esta. Isso retornará automaticamente esse valor para nós. Para ver esse lugar em um log de console com o valor de retorno que é armazenado dentro de novas postagens, salve nas ferramentas do desenvolvedor e vemos esse novo valor indefinido. Voltamos indefinidos porque nada é devolvido para nós. ForEach, executaremos uma função para cada um desses valores de matriz e, em seguida, modificaremos diretamente essa matriz original sem retornar nada. Mapeie, por outro lado, se alterarmos isso, salvar e atualizar, agora recuperaremos uma nova matriz sem os valores de transformação. Esta é a principal diferença entre Map e forEach. ForEach, modificaremos a matriz original. Quando você usa o Map, isso deixará a matriz original em tato e, em vez disso, retornará uma nova matriz com os valores modificados, portanto, essa é uma diferença fundamental. Outra diferença fundamental entre esses dois métodos é quando é um Mapa, também podemos encadear vários métodos. Para ver isso com mais clareza, vou colocar isso em várias linhas e a seção Mapa em sua própria linha, remover o ponto e vírgula e, em seguida podemos encadear no final um método de filtro. Manter o mesmo estilo adicionará uma função de seta que recebe o novo valor, configura nossa seta e, em seguida, podemos filtrar qualquer uma das postagens do blog onde o valor ou título específico é igual a ser” Como ser um ninja parte dois. Isso também precisa ser maiúsculo, já que já transformamos isso com o Mapa logo acima. Agora, como já sabemos, este título está incluído, então isso filtrará nossa única postagem. Se formos até o console, poderemos ver isso se atualizarmos. Agora, teremos um novo array de volta para nós com esse único valor filtrado. Alternativamente, se não quiséssemos apenas uma nova matriz com esse único valor, podemos querer apenas verificar se esse título está incluído dentro de nossas postagens ou se poderíamos fazer isso, alterando o filtro com algum método. Isso retornará um valor verdadeiro ou falso, como já sabemos, seu título já está incluído. Agora, se atualizarmos isso, recuperaremos o valor de true. Se mudarmos isso para algo que não está incluído, isso retornará o valor de false. Isso é realmente útil para recuperar os dados exatos de que precisamos. Também podemos querer pegar a posição de índice desses elementos da matriz. Podemos fazer isso mudando isso de volta para um dos títulos reconhecidos ou parte dois. Em seguida, em vez de ainda fazer alterações para encontrar o índice que usamos anteriormente, salve. Isso vai ser o índice número dois e lá vamos nós. Você pode ver com esses exemplos que, embora todos esses métodos possam parecer complexos para começar, muitos deles são estruturados exatamente da mesma forma, mas apenas retornam valores diferentes. De volta a este Mapa e este forEach, nenhum desses encadeamento ou adição de um novo método no final está disponível ao usar forEach. Podemos ver isso se mudarmos isso novamente, atualizarmos e agora vemos um erro dentro do console. Esse treinamento não é possível ao usar forEach porque, como vimos antes em um de nossos testes, antes que cada método retorne indefinido em vez de um novo valor. Apenas para uma recapitulação, usamos forEach se quisermos modificar o array existente e não precisarmos de um novo retornado. Usamos o Map se quisermos deixar a matriz original intacta e retornar uma nova matriz com os valores. Também é bom para a corrente também. 25. Destruição de matriz: Sim, 2015 introduziu a destruição, que é uma maneira simples de extrair matrizes ou valores de objetos e armazená-los em variáveis. Para iniciar um projeto, que é a destruição de array contém uma variedade de postagens de blog, assim como tivemos no último vídeo. Se quiséssemos armazenar cada valor de matriz em uma nova variável, podemos fazer isso adicionando a destruição. Podemos fazer isso no lado esquerdo disso é igual. Em vez de armazenar tudo isso em uma única variável de post, o que podemos fazer é adicionar os colchetes assim e, em seguida, podemos criar um novo valor de variável para cada um desses itens de matriz. O primeiro que podemos chamar de post1, post2, depois post3. Esses valores de matriz separados agora devem ser armazenados nessas três variáveis. Vamos testar isso. O registro do console com o valor de post1. Atualize, e há nossa única postagem no blog. Vamos tentar o número 3. Lá vamos nós. Podemos ver que cada um desses três valores agora é único, é destruição e também pode ocorrer separadamente também. Também poderíamos configurar exatamente o mesmo resultado como este. Poderíamos criar uma nova variável e depois armazenar nossos valores dentro desses colchetes. Assim como antes, podemos armazenar post1, post2 e post 3, e defini-los iguais a todas as postagens. Novamente, com uma de nossas postagens individuais já selecionada, podemos conferir isso. Post3 e também post2, então isso é a mesma coisa que acabamos escrever de duas maneiras diferentes. Fazer isso neste estilo também significa que temos acesso a essas três variáveis destruídas, também mantemos a referência original a essa matriz completa, se quisermos também nos divertir com isso mais tarde também. Você pode pensar nessa destruição como um atalho. Fazer isso é exatamente o mesmo que algo assim. Poderíamos configurá-los individualmente criando post1 e defini-lo igual à nossa matriz de postagens, selecionando o valor do índice original. Vamos duplicar isso mais duas vezes. pós-2 será igual à nossa primeira posição de índice e, em seguida, o pós-3 é igual ao índice número 2. Agora com post2 já selecionado, para o console. Ainda funciona como antes, mas teremos uma maneira mais longa de fazer as coisas. Vamos remover isso. Outra coisa que também podemos fazer é usar a sintaxe do resto do JavaScript. A sintaxe rest é uma maneira de acessar um único valor ou vários valores e, em seguida, uma maneira de capturar todos os demais valores até o final da matriz. Por exemplo, se quiséssemos apenas configurar uma variável, novamente, precisamos dos colchetes. Se quiséssemos acessar nosso primeiro post e manter isso com um nome de variável separado assim. Então podemos querer pegar todo o resto dos valores restantes, podemos fazer isso separando isso com uma vírgula usando os três pontos e, em seguida, armazenar o restante dos valores em uma variável separada, defina isso igual a todos os posts array. Vamos confirmar isso dentro do registro do nosso console. Post1 é este aqui. Lá vamos nós. Esse é o nosso primeiro post no blog aqui. Então, dentro dessa outra variável, devemos ter o conteúdo dos valores restantes, que é o blog post2 e 3. Alterações em nossa variável de outras pessoas, atualize. Esta é uma nova matriz com nossos dois valores restantes. Essa destruição é realmente útil para criar atalhos, para armazenar diferentes variáveis. destruição também pode ser usada com objetos também, e abordaremos isso mais tarde no curso. Uma coisa a ter certeza é ao usar o resto, que também adicionamos isso como o último valor da variável. Não poderíamos, por exemplo, colocar isso logo no início, porque, como o nome sugere, isso agarrará todo o resto dos valores restantes. Se fizermos isso e depois salvamos e atualizamos, veremos um erro dentro do console. Isso acontece porque, como o nome sugere, isso é usado para capturar o restante dos valores restantes. Portanto, não faz sentido ter isso no início. destruição também pode ser usada em objetos também, e vamos dar uma olhada nisso em uma olhada em repouso no resto do curso. 26. Valores exclusivos com conjunto: Vá para a pasta desta lição, que é Valores exclusivos com conjunto. Dentro da seção de script, temos uma matriz de categorias com vários valores dentro. Se você olhar de perto, podemos ver que esse valor das malas foi duplicado no início e no final. arrays como você pode ver aqui aceitarão todos os valores que você adicionar a ele, mesmo que sejam duplicados. Mas se quiséssemos evitar isso e apenas tivéssemos valores exclusivos armazenados dentro, poderíamos usar algo chamado set. Mesmo que set pareça um pouco com uma matriz, é o que é chamado de coleção. Assim como os arrays, você pode armazenar tipos primitivos e objetos. Temos duas opções, poderíamos criar um novo conjunto do zero ou se quiséssemos converter esse array para ser um conjunto. Basta ir, criar uma nova variável e esta será chamada de categorias exclusivas. Defina isso igual a um novo conjunto. Vimos essa nova palavra-chave no passado ao criar coisas como novos arrays e isso criará um novo conjunto vazio. Podemos passar em nossas categorias, que é a matriz logo acima. Abaixo disso, cria um log do console. Faça logout do valor de categorias exclusivas e também o navegador verá o que é produzido dentro do console. Agora eu tenho um conjunto com seis entradas e, após uma inspeção mais próxima, podemos ver que o valor dos sacos é incluído apenas uma vez. Ele removeu quaisquer duplicatas, já que nossa matriz original tinha valor desses sacos em dois e sete valores diferentes. O que fizemos aqui é que criamos um novo conjunto que é clonado a matriz de categorias e despojado de quaisquer valores duplicados. Set também possui alguns métodos internos que podemos usar para modificar essa coleção. Em seguida, adicione novo valor. Temos o método add que podemos usar diretamente em nossa variável. Acesse as categorias exclusivas, apenas adicione método e dentro podemos adicionar um novo valor, vamos para jeans. Salve e atualize. Agora, nosso conjunto agora tem sete valores com o jeans empurrado para o final desta coleção. Categorias duplicadas não serão aceitas mesmo ao usar esse método. Se formos para chapéus, que você já tem, atualize isso, e estamos de volta agora a seis valores diferentes porque os chapéus foram duplicados. Se também quisermos remover um único valor, temos acesso ao método delete. Nós mudamos isso e , em seguida, podemos remover qualquer um dos nossos valores existentes. Vamos rever os chapéus, atualizar. Isso agora é reduzido, nosso conjunto para ser cinco valores com os chapéus agora foi removido. Isso remove um único valor, mas se quisermos remover todos os valores em nossa coleção, teremos acesso ao método clear. Como estamos removendo todos os valores, não precisamos passar nada para dentro. Atualize e isso apagará todo o conteúdo do nosso conjunto. Também podemos verificar se um determinado valor está incluído em um conjunto usando o método has. Como isso retorna verdadeiro ou falso, ele também precisa ser armazenado dentro de uma variável. Vamos mudar isso para ser tem, podemos verificar se isso tem um valor de sapatos. Se salvássemos isso e atualizássemos, ainda recebemos de volta o conjunto completo. Mas, em vez disso, se acessarmos o valor de retorno, instale isso dentro de uma constante, digamos HassHoes, isso é igual ao valor de retorno e, em seguida, podemos registrar isso no console. Isso é verdade, vamos mudar isso para ser outra coisa. Como esperado, isso agora está retornando falso. Assim como quando usamos matrizes, temos acesso a uma propriedade terrestre. Descubra quantos valores estão contidos dentro da matriz. Ao usar conjuntos, temos acesso a algo muito semelhante, mas desta vez é chamado de tamanho. À medida que você move essa linha e restaura o UniqueCategories, acesse .size, salve e atualize, e o valor retornado é seis. O conjunto é realmente útil se não quisermos ter valores duplicados dentro de uma matriz. Se quiséssemos, também poderíamos fazer isso com uma matriz e também encadear o método de filtro para remover quaisquer duplicatas. Mas é claro, é muito mais simples usar esse conjunto do que escrever todo o código adicional que deve ser necessário se nós armazenássemos isso dentro de uma matriz. 27. Matrizes de duas dimensões: Arrays regulares, como sabemos, armazenam valores em ordem da esquerda para a direita, começando na posição de índice 0. Mas também podemos usar matrizes forma bidimensional para criar uma estrutura semelhante a uma grade, assim como você pode ver aqui no slide. Parece complexo, certo? Bem, isso não é tão complexo quanto parece. Ou realmente precisamos criar em uma nova matriz para cada uma dessas linhas. A primeira linha é uma matriz, a segunda linha é uma matriz e assim por diante. Em seguida, colocamos tudo isso dentro de uma matriz externa, que é como um invólucro que cria uma matriz de matrizes. Acessar esses valores também é bem simples. Só precisamos de dois números de índice. Primeiro de tudo, selecionamos a linha e, em seguida, selecionamos o valor dessa linha específica. Usando esses dois números, podemos selecionar qualquer um desses itens que precisamos. Dando uma olhada neste exemplo aqui à direita, podemos ver que isso está na posição de índice 0 e depois 1. Começa com 0 que acessa a primeira linha ou a primeira matriz e, em seguida, da esquerda para a direita, posição de índice 1 é o segundo valor. Usando o segundo exemplo novamente, fazemos exatamente o mesmo, mas desta vez iremos até nossa quarta linha, que é o índice número 3 e, em seguida, até nosso último item nessa linha, que é o índice número 4. Infelizmente, o JavaScript não tem uma maneira integrada de criar matrizes bidimensionais. Em vez disso, é por isso que precisamos criá-los como matrizes aninhadas. Vamos experimentar isso em nosso editor, vá para esse arquivo, que são os arrays bidimensionais ou posso fazer com que isso vá para baixo no script. Abra isso e vamos criar nosso primeiro array chamado grid. Este será o nosso invólucro. Podemos colocá-los em duas linhas separadas para deixar isso mais claro. Então, dentro, vamos adicionar três linhas. A primeira linha, como acabamos de ver, é apenas uma matriz simples. Vamos adicionar alguns números, 11, 12, 13 e, como acontece com todos os valores de matriz, nós os separamos com uma vírgula. linha 2 é uma nova matriz com 21, 22, 23 e, finalmente, nossa terceira linha será 31, 32 e 33. Vamos registrar isso no console e ver o que recebemos de volta. Coloque em uma variável de grade, atualize e podemos ver que temos uma matriz externa, que, por sua vez, contém três matrizes separadas e cada uma contém três valores. Podemos ver isso com mais clareza se expandirmos nossa primeira linha, nossa segunda linha e nossa terceira linha. Também poderíamos formatar isso em uma tabela com o console.table. Isso torna um pouco mais claro. Vamos ver o que está acontecendo. Podemos ver que temos o número do índice, primeiro selecionamos a linha e, em seguida, selecionamos a posição do índice de cada linha. Este seria o índice 0 1, e assim como estamos vendo nos slides, podemos acessá-los com dois colchetes. Para isso, voltaremos a um registro do console. Vou colocar a grade, abrir o primeiro conjunto de colchetes, que é a linha. Para este, vamos para a nossa terceira linha, que é o índice número 2 e, logo após nossos segundos colchetes, vamos para o meio que é 32. Este é o índice número 1. Salve e atualize. próximo nosso valor de 32, que é este aqui. Criar matrizes bidimensionais não é muito mais difícil do que criar um único array. Em vez disso, tudo o que precisamos fazer é pensar na posição das coordenadas que acessam cada um dos valores em nossa grade. 28. Objeto global e funções integradas: Dentro desses arquivos iniciais, agora temos essa nova seção de funções, que é o número 3, e depois seguimos para a primeira lição, que é o objeto global. Abra a página Índice. Certifique-se de que isso também esteja aberto dentro do navegador. Entre a seção de script, temos um exemplo semelhante ao que vimos no passado. Temos duas matrizes diferentes, temos nossos ingredientes de pão e os brownies, e então essa função logo abaixo. Esta função levará a receita e também os ingredientes, e isso verificará se esse ingrediente em particular está incluído nessa receita. Em seguida, ele retornará um valor verdadeiro ou falso, dependendo se o ingrediente estiver incluído. Como mencionado anteriormente, isso é chamado de declaração de função em um log de console. Logo abaixo, podemos chamar essa função pelo nome, que é CheckAlergies, analisar na receita, como pão, e então podemos verificar um ingrediente, como sal, salvar e atualizar. Agora obtemos o valor de true já que esse ingrediente está incluído dentro dessa matriz. Sabemos que podemos chamar essa função pelo nome porque, bem, nós a criamos logo acima no mesmo arquivo. Bem, e se chamarmos essa função de um local diferente, digamos que um arquivo JavaScript diferente? Você acha que isso funcionaria? Bem, vamos dar uma olhada. Agora vamos criar um novo arquivo JavaScript dentro desta pasta da lição 1. Então clique nisso e crie um novo arquivo, e então isso será chamado de script com a extensão the.js para declarar que este é um arquivo JavaScript. Certifique-se de que isso ainda esteja dentro desta pasta ao lado da nossa página Índice e, em seguida, feche a barra lateral para nos dar mais espaço. Dentro do nosso novo script.js, vamos, novamente, fazer um registro de console. Faremos exatamente o mesmo. Chamaremos nossa função, que era CheckAllergies, e depois analisaremos dois argumentos. Desta vez, vamos para os brownies, e podemos verificar se os brownies contêm algum açúcar. Como discutido anteriormente, também precisamos vincular esse script à nossa página Índice, pois este é um arquivo externo. Portanto, estamos criando nosso script dentro da página Índice, então ele é reconhecido automaticamente. Mas como agora temos um novo arquivo de script, podemos criar uma nova tag de script e, em seguida, precisamos colocar na fonte, que é a localização do nosso novo arquivo. Como esse novo arquivo está ao lado da nossa página Índice, tudo o que precisamos fazer é adicionar seu nome, que era script.js. Tão efetivamente, isso é o mesmo que logo acima. Tudo o que estamos fazendo aqui é extrair o código de um arquivo externo, em vez de adicioná-lo entre essas tags de script. Agora, temos nosso log do console ainda em vigor aqui, e também temos um log de console chamado a partir desse arquivo separado. Vamos até o navegador e ver qual deles funcionará. Atualizar. Agora vemos nossos dois registros de console. Vemos à direita que um deles é da página Índice e um deles é do nosso script.js, então ambos estão funcionando, e ambos são de dois locais de arquivos separados. Bem, isso agora nos leva à pergunta, se formos ao nosso arquivo de script. Aqui estamos fazendo um log de console e estamos acessando uma função CheckAllergies, que não existe dentro desse arquivo. Por que isso funciona? Bem, quando criamos uma função, assim como fizemos aqui, ela se torna parte do que é chamado de objeto global. Falamos muito sobre objetos e tipos de objetos, mas o objeto global é o grande. O objeto global é o objeto principal do qual propriedades e funções disponíveis globalmente são todas acessíveis. Isso pode parecer complexo, mas você pode pensar nisso como o objeto principal que é criado e, em seguida, podemos acessar partes dele de qualquer lugar em nosso código. JavaScript funciona dentro do navegador e podemos acessar esse objeto global usando a janela. Você também pode ter ouvido falar de algo chamado Node.js, que é uma maneira de executar JavaScript no servidor. Como o Node.js está sendo executado no servidor, em vez de no navegador, ele não tem acesso a essa janela do navegador. Em vez disso, acessamos o objeto global usando a palavra-chave global. Mas você não precisa se preocupar com isso se você não ouviu falar de Node.js. Então você vê esta janela. Vamos voltar para o console para o navegador. O que vamos fazer é digitar a janela de palavras, clicar em “Enter” e, em seguida, podemos ver todas essas informações, que retornaram para nós abaixo. Como a janela é um objeto global, ela contém todas essas propriedades, que podemos ver aqui. Algumas são funções que podemos usar. Também há propriedades em objetos dentro também. Esta é uma lista de coisas às quais temos acesso global. Alguns desses que já vimos. Por exemplo, vou pressionar “Comando” e “F” para encontrar uma coisa específica dentro daqui. Se você estiver usando o Windows, será mais do que provável que seja Controle e F2. Primeiro de tudo, se procurarmos o console, podemos ver isso destacado dentro daqui. Podemos abrir isso. Este é um objeto de console, que já vimos. Se abrirmos isso e dermos uma olhada logo abaixo disso, podemos ver que temos acesso à função de log e também à função de tabela, que usamos no passado. É por isso que temos acesso a eles em nossos vários arquivos, porque eles são colocados no objeto global. Se quisermos, também podemos nos referir ao objeto window ao chamar essas propriedades. Por exemplo, poderíamos escrever log window.console, e isso funciona exatamente da mesma forma também , então window.console log. Salve isso e atualize. Nossos registros de console ainda funcionarão exatamente da mesma forma. Vamos remover isso e, mais uma vez, entraremos em nosso objeto de janela dentro do console. Se eu expandir isso, também podemos ver nossa função personalizada aqui, que é CheckAllergies. Isso é aqui porque assim que criamos nossa função CheckAllergies dentro do nosso código, ela foi adicionada a esse objeto global, e é por isso que podemos acessar isso dentro de um arquivo diferente. Além disso, quaisquer variáveis que criamos usando a palavra-chave var também são colocadas no objeto global também, mas não quaisquer variáveis que criamos com as palavras-chave const ou let. Mas mais sobre este mais tarde. Claro, esta é uma função que criamos nós mesmos, mas o JavaScript também tem muitas funções que primeiro não precisamos criar. Eles são incorporados automaticamente ao idioma. Eles podem ser chamados de funções internas ou funções globais, pois estão disponíveis para chamadas em qualquer lugar nosso programa a partir desse objeto global. Um exemplo disso, se formos até a pesquisa, é uma função chamada parseInt. Podemos ver isso incluído aqui, e podemos ver por este f, que esta é uma função. Podemos usar isso, se passarmos para o código. Logo antes de fazermos isso, removeremos este script.js, removeremos o link do script e também podemos remover esse arquivo daqui também. Agora, de volta à nossa página Índice, vamos dar uma olhada nesta função ParseInt. A maneira como esta função funciona é que ela vai levar em uma string e, em seguida, ela converterá isso para ser um número inteiro, que é um número inteiro, então, para ver isso, vá para o nosso log do console, e podemos chamar ParseInt. Este também é um caso de camelo, então isso tem um eu maiúsculo. Abra os suportes de função. Então, como uma string, adicionaremos o número de 10. Salve isso e, no navegador, atualize e agora vemos o número de 10. Em vez de considerar a minha palavra de que este é um número, em vez de ainda uma string, o que podemos fazer é cortar isso com Command ou Control-X, instalar isso dentro de uma variável chamada Int, cole isso em. Então, desta vez, faremos um registro de console para o tipo de nosso Int para ver que tipo de dados estamos mantendo. Atualize e agora podemos ver que isso foi convertido de uma string para um número. Como o ParseInt converte uma string para ser um número inteiro, que é um número inteiro, ele não incluirá nenhum número após uma casa decimal. Então, se isso fosse, digamos, 10.09 e eu remover o typeof, isso será convertido em um número arredondado ou inteiro. Também podemos virar isso e fazer o oposto com uma função de string, então desta vez chamaremos isso de um número e, em vez de ter uma string assim, colocaremos em um número, e vamos converte o número desta vez para ser uma string usando a função string. Vamos, novamente, registrar nossa variável de número. Veremos o valor dentro do console ou cinco. Mas, mais uma vez, podemos fazer um tipo de verificação para verificar se isso foi convertido em uma string. Lá vamos nós. Como você pode ver, o JavaScript é realmente flexível. Podemos criar nossas próprias funções ou acessar algumas montagens embutidas, que são fornecidas com o idioma. Em seguida, podemos acessar essas montagens internas no objeto global. Como vimos, quando acessamos o objeto da janela antes, há muito mais outras funções disponíveis também. Eu não vou passar por todos eles, pois há muita coisa e também há alguns especialistas muito bem. Mas usaremos muito mais dessas funções, propriedades e objetos disponíveis globalmente à medida que passamos pelo resto das próximas seções. 29. Expressões de função: Criamos funções até agora usando uma sintaxe chamada declaração de função. Há também uma maneira ligeiramente modificada escrever funções também, e essas são chamadas de expressões de função. Entre nos arquivos iniciais desta lição, que está dentro da seção de funções e depois para a lição no número 2. Você pode ver dentro daqui, se formos até a seção de script, temos um exemplo de uma declaração de função. Este é o tipo de função que vimos anteriormente, e parece exatamente assim. Usamos a palavra-chave function, criamos um nome de função, passamos quaisquer parâmetros opcionais dentro daqui e, em seguida, escreveremos nosso código dentro do corpo da função. A alternativa, que é uma expressão de função que agora vamos olhar, também parece bastante semelhante. A primeira diferença é a forma como nomeamos a função. Para transformar isso em uma expressão de função, podemos primeiro remover o nome da função. Vou escrever isso logo abaixo para que possamos ver uma comparação. Também usaremos a palavra-chave function, mas desta vez vamos pular diretamente para os parênteses ou parênteses. Vamos comparar isso com o acima, passaremos a receita e também os ingredientes. Então, imediatamente após adicionarmos nosso corpo de função dentro das chaves, vamos copiar essas duas linhas de código porque elas serão exatamente as mesmas que este exemplo. Então, como não temos um nome como temos logo acima, o que precisamos fazer é atribuir isso a uma variável, criar uma constante ou uma variável, e então podemos dar a isso um nome como CheckAllergies e definir esse igual para nossa função. Saia agora. Nosso nome de função como este é novamente opcional, mas agora essa é uma função anônima devido à falta de nome. O que queremos fazer agora apenas para evitar qualquer confusão é comentar essa função original. Também podemos verificar se ele está funcionando fazendo um registro do console. Assim como anteriormente, passamos o nome da função, mas desta vez, esse é o nome da variável. Ainda podemos usar os colchetes logo depois para passar quaisquer argumentos opcionais. A receita, podemos ir para qualquer coisa, como pão, passar uma verificação de ingredientes, como levedura, depois para o navegador, abrir as ferramentas do desenvolvedor e ir para o console. Vemos o valor verdadeiro, as alterações estão incorretas. Agora, essa função funciona completamente bem. Armazenar esse nome de função dentro da variável é uma diferença óbvia entre a declaração de função acima e essa expressão de função. Outra diferença é algo chamado içamento. içamento é algo que abordaremos mais adiante com mais detalhes. Mas, por enquanto, você pode pensar nisso, pois podemos chamar uma função antes de criá-la. Ele se comporta como nossa função é declarada no topo do arquivo e está sempre disponível para uso. O que vamos fazer agora é recortar esse log do console e movê-lo para o topo do arquivo, ou em qualquer lugar acima da função está realmente bom. O que estamos fazendo aqui é que estamos chamando nossa função antes de criá-la. Programas JavaScript são lidos de cima para baixo. Possivelmente chamamos uma função, antes mesmo de sabermos que a função existe. Você acha que isso funcionará? Bem, vamos dizer isso e experimentar isso dentro do console. Atualizar. Agora vemos um erro dentro daqui. Não podemos acessar o CheckAllergies antes de sua inicialização. Isso significa que, para expressões de função que é o novo tipo que criamos aqui, temos que chamá-las depois que elas foram criadas dentro do programa. Sopre efetivamente. Mas e essa declaração de função original? Bem, vamos experimentar isso. Se descomentarmos o original, comente a expressão. Agora esse é o mesmo nome de função, então agora estamos chamando isso antes de ser criado. Podemos ver o que acontece dentro do navegador. Atualize, não vemos nenhum problema. Nossa função agora funcionará perfeitamente bem. Essa é outra diferença entre os dois estilos de função. Essa declaração de função pode ser chamada em qualquer lugar dentro do nosso programa mesmo antes de criá-la. O motivo é que a declaração de função original está disponível em qualquer lugar, é porque está no escopo global. Assim como olhamos no vídeo anterior, podemos acessar isso pela janela. Vê isso? O que vamos fazer é tornar essas duas funções agora ativas. Não há confusão. Vamos mudar isso para ser CheckAllergies 2. Podemos comentar um registro de console. Isso não é executado dentro do navegador. Agora teremos essas duas funções ativas. Vamos para o console. O que vamos fazer dentro daqui, atualizaremos a limpeza e, em seguida, acessaremos os objetos da janela. Lembre-se, isso acessará toda a janela disponível. Mas se quisermos, também podemos usar a notação de pontos. Limite isso para uma propriedade específica também. Vamos para nossa primeira função, que é CheckAllergies. Clique em “Enter”, e aqui vemos uma referência à nossa função CheckAllergies. No entanto, se fizermos isso novamente, acesse a janela e, desta vez , vamos para verificarAlergias. Número 2, clique “Enter” e agora recuperamos um resultado de indefinido. Isso faz backup exatamente o que procuramos antes nos exemplos, a função original, que é check, agora está disponível no objeto global, o significa que podemos acessar isso em qualquer parte do nosso código. No entanto, no entanto, CheckAllergies 2, que foi o segundo, que é a expressão de função. Isso não está disponível no escopo global. É por isso que temos que chamá-lo depois de criarmos a função. Isso pode ser uma consideração importante porque nem sempre queremos produzir um escopo global, a menos que precisemos. Um exemplo disso pode ser uma função de retorno de chamada. Um retorno de chamada é uma função mais duas, outra função, como vimos anteriormente com nossos métodos de matriz. Vamos dar uma olhada em outro exemplo. Vou comentar essas duas funções aqui. Então vou criar uma nova função. Essa função só será chamada para o Toupper. Isso vai converter qualquer string passada para ser maiúscula. Precisamos passar uma string e chamarei esse valor. Então isso retornará a nova string. O que precisamos fazer dentro daqui é acessar o valor. Em seguida, podemos chamar um método de string chamado ToupperCase. Isso transformará uma string minúscula em maiúsculas. Isso será enviado de volta dessa função. Então, para verificar se está funcionando, faremos um log do console, chamaremos nossa função, então podemos passar qualquer string dentro daqui que queremos converter. Vamos experimentar isso com a corda de farinha. Atualize o navegador e isso está sendo transformado em maiúsculas. Nada que não vimos antes. Acabamos de criar uma função para transformar o texto. Também podemos ver dentro do objeto janela, que podemos acessar nossa função dentro daqui. Como isso está tendo acesso à nossa função, sabemos, assim como estamos vendo com esta aqui, que esse estilo de função está disponível no objeto global. Esse estilo pode ser perfeitamente bom se quisermos usá-lo em várias partes do nosso aplicativo. Vamos encaminhá-los de volta a algo como os métodos de matriz que mencionamos antes. Nem sempre precisamos disponibilizar essa função globalmente. Por exemplo, se chamarmos um dos arrays que temos no topo, como pães, e então podemos chamar map para percorrer cada um desses valores. Então, em cada um desses valores, podemos chamar a função Toupper. Para ver isso, passaremos isso para nosso registro do console. Salve isso e agora, se atualizarmos o navegador, veremos que cada um desses valores foi transformado em maiúsculas. Para um exemplo como este, não precisamos que essa função seja global e simplesmente queremos passá-la para um método como o map. Isso agora pode ser um bom caso de uso para transformar essa função como uma expressão de função. Para recapitular, uma declaração de função é construída usando a palavra-chave function, um nome de função com parâmetros opcionais e todo o código dentro das chaves. A expressão de função que acabamos de ver é armazenada em uma variável. Também podemos ter um nome de função opcional também. Essa é a diferença entre esses dois tipos de funções. Se isso é novo para você, não se preocupe. Você não precisa se lembrar de todos esses nomes diferentes por enquanto. Eu só quero deixar você ciente de que existem diferentes estilos de funções disponíveis, porque você pode precisar usá-los um dia, ou você também pode vê-los em outros exemplos também. 30. Expressões de função imediatamente anuladas: O título do vídeo anterior era chamado de expressões de função. Agora vamos olhar para algo chamado expressões de função imediatamente invocadas. Pode parecer complexo, mas não é muito ruim, apenas pega nossa expressão de função original do vídeo anterior, e podemos executar ou invocar essa função imediatamente. Vamos dar uma olhada em como isso funciona dentro desses arquivos de dados. Se dermos uma olhada nesta seção de script, tenha uma função simples que cria um alerta de navegador. Eu sei que esta é uma declaração de função, pois ela aparece por si só e não é armazenada dentro de uma variável. Mas o que podemos fazer é remover o nome. Novamente, isso é opcional e veremos isso muito em breve. Remova o nome da função. Agora, como esta função não tem nomes realmente chamá-lo, agora podemos remover a chamada de função na parte inferior. Essa falta de nome significa que ela é chamada de função anônima. Como chamamos uma função sem nome? Bem, é aqui que nossas expressões de função imediatamente invocadas entram em jogo. Primeiro precisamos começar envolvendo nossa função completa dentro dos suportes. Se cortarmos isso, abra os colchetes e, em seguida, colamos isso, isso contém toda a nossa função entre esses colchetes e , em entre esses colchetes e seguida, executará o código. Em seguida, colocamos em um novo conjunto de colchetes logo depois, assim como faríamos com uma chamada de função regular. Agora, se salvarmos isso e atualizarmos o navegador, agora veremos nosso alerta dentro daqui. Isso significa que nossa função está sendo executada. Podemos ver o código contido dentro. Isso significa apenas que criamos uma função e executamos o código da função assim que a página é carregada. Se não cercarmos esse código de função com esses colchetes originais aqui, isso causaria um erro, já que o JavaScript pensaria que essa era uma função regular que exigiria um nome. Mas usar esses suportes circundantes também pode causar um problema também. Se tivermos algum código acima, por exemplo, como uma variável, isso pode causar um problema. Crie qualquer variável logo acima, quero ir para o idioma e definir isso igual a JavaScript. Observe aqui que não estou adicionando um ponto e vírgula no final e, se salvarmos esse arquivo, o editor de texto formatou automaticamente essas fotos. Podemos ver imediatamente que não é assim que nosso código foi pretendido. Vamos para o navegador e ver o efeito que isso tem se atualizarmos. Lá vamos nós, teremos um erro. JavaScript não é uma função. Agora, se voltarmos ao editor de texto e examinarmos nosso código mais de perto, esse erro é compreensível. Onde dissemos é o código é bastante semelhante à expressão de função que olhou no vídeo anterior, pensa. Temos um nome de função JavaScript. Então, imediatamente depois, temos o conteúdo dentro desses colchetes, assim. Lembre-se anteriormente, analisamos como o ponto e vírgula nem sempre precisa ser usado. Bem, este é um daqueles casos usados quando precisamos adicioná-los. Se agora adicionarmos um ponto e vírgula após o nome da nossa variável, isso agora separará isso da nossa função. Testamos isso no navegador, atualizamos e, novamente, nossa função está funcionando corretamente. Como alternativa, você também pode ver alguns desenvolvedores adicionarem um ponto-e-vírgula no início da expressão de função. Isso é para evitar problemas se a linha acima não terminar em um ponto e vírgula. Também é especialmente útil se estivermos importando o conteúdo de outro arquivo. Nem sempre sabemos se esse código terminará em um ponto e vírgula ou se causará um erro. É assim que os usamos. Mas por que precisamos usar uma expressão de função imediatamente invocada? Bem, além do óbvio que talvez precisemos executar algum código imediatamente sem chamar a função. Como esta é uma expressão de função, ela também não polui o objeto global. Como vimos no vídeo anterior, quando criamos uma expressão de função, ela nem sempre está disponível para uso em qualquer parte do nosso arquivo. Devemos primeiro criar a função antes que possamos realmente usá-la. Além disso, essa é outra boa maneira de manter variáveis do objeto global também, se quisermos usá-las apenas dentro de uma determinada função. Por exemplo, se essa variável fosse usada apenas dentro dessa função, não precisamos adicionar isso ao objeto global, assim como estamos fazendo agora. Podemos ver isso se alterarmos nosso alerta e registraremos o valor do idioma. Então, fora de sua função, também podemos registrar isso no console. Salve e atualize. Vemos nossos alertas e também no console vemos nosso registro do console. Essa variável é acessível de dentro e de fora da função. Mas, como mencionado anteriormente, se não quiséssemos que essa variável estivesse disponível globalmente, poderíamos mover isso para nossa função. Isso significa que esse valioso agora só é acessível de dentro dessa função. No navegador, atualize, vemos que o alerta será executado e isso tem acesso à nossa variável de idioma. No entanto, embora dentro do console quando tentamos registrar o valor da linguagem, isso agora não está acessível de fora da função. Isso significa que todas as variáveis que você criar dentro da função também são isoladas também. Isso é realmente útil se quisermos restringir um pedaço de dados a ser acessível apenas a partir de uma determinada função. Mas mesmo que essa variável esteja disponível apenas dentro de nossa função, ainda podemos retornar um valor. Em vez do alerta, podemos retornar o idioma e instalar o valor retornado de mau funcionamento dentro de uma variável. Registre isso no console, salve e atualize no console. Agora recuperamos o valor retornado da nossa variável. 31. Anônimo ou nomeado?: Nos últimos dois vídeos, falamos um pouco sobre expressões de função. Quando os criamos, deixamos de fora o nome da função e portanto, nos referimos a essas funções como anônimas. Mas não é fornecido nenhum nome de função a melhor abordagem para criar funções. Bem, criar uma função sem nome é certamente mais curta, envolve escrever menos código. Também podemos executar essas funções quando quisermos. Por que adicionamos um nome? Bem, vamos dar uma olhada nos arquivos iniciais que é menor que o número 4 para nomes anônimos ou dentro da seção de funções. Se rolarmos para baixo até a seção de script, teremos dois arrays diferentes. Também temos um exemplo de uma função nomeada que é uma declaração de função regular que vimos. Isso envolve a criação de uma função, então chamamos essa função sempre que quisermos por esse nome. Em seguida, sopre um exemplo anônimo, e esse exemplo é chamado de anônimo. Como não passamos a função e o nome diretamente. Em vez disso, criamos sem nome assim, e depois o armazenamos dentro de uma variável. Também temos alguns exemplos, explodir isso, voltaremos a isso mais tarde. Mas o que vamos fazer é abrir esse arquivo dentro do console, clicar com o botão direito do mouse, Inspecionar e depois na guia Console. Quando temos acesso a uma função, as funções têm uma propriedade chamada name, e essa é uma propriedade somente leitura. Podemos usar isso primeiro acessando o nome da função que é o número de ingredientes. Em seguida, podemos acessar o nome. Pressione Enter é bem simples e sem surpresa, pedimos o nome e recuperamos o nome da função. Mas e, em vez disso, se removermos tudo isso e chamamos nossa segunda função que foi verificada interrupções. Como sabemos, isso não é diretamente um nome de função porque não o passamos para dentro daqui. Mas tudo o que estamos fazendo aqui é armazenar isso dentro de uma variável. O que você acha que vamos receber de volta? Bem, vamos tentar isso, trazer isso. Em seguida, também chamada de propriedade name. Também podemos ver para este exemplo, recuperamos o nome do cheque Alergias. Isso pode ir contra o que você esperaria porque isso não tem o nome da função. A razão pela qual isso acontece é por causa de algo chamado nome de função inferido. Como a função é armazenada dentro dessa variável, o JavaScript basicamente adivinhou que este é um nome que você deseja usar para nossa função. À medida que começamos a entender as funções e a maneira como podemos nos referir a elas pode assumir muitas formas. Esse nome inferido nem sempre é confiável em algumas situações. Há certos momentos ou casos de borda em que o nome não é inferido. Outros motivos pelos quais você pode querer adicionar um nome específico à função são para depuração de áreas dentro do console da série. Mas vamos criar um erro dentro dessa função. Crie um erro aqui com inclusões e, em seguida, basta explodir isso, criar um log de console que foi registrar o valor das alergias de verificação. Então também precisamos passar a receita e os ingredientes. Assim como nos exemplos anteriores, isso se referirá aos nossos dois arrays no topo. Assim, podemos acessar qualquer um desses. Se agora dissermos isso e vermos o que acontece no console, podemos ver diretamente se o Chrome Developer Tools detectou um erro e fazer anotações diretamente na guia Fontes. Isso tem muitas informações e podemos abrir isso para expandir isso. Ele aponta para muitas partes diferentes do nosso código. Mas uma das coisas a serem observadas é algo chamado essa pilha de chamadas. Esta pilha de chamadas é uma maneira para o navegador que está executando o JavaScript para acompanhar as funções que foram chamadas e também elas ordenam. Está apontando aqui para a função de verificação de alergias que permite saber exatamente onde está o problema. Mas quando pensamos sobre isso de uma maneira um pouco diferente, verifique as alergias que temos aqui, pretendia armazenar o valor de retorno desse bilhão. As alergias de verificação nunca foram destinadas a ser um nome de função. Só foi pretendido estar disponível, o que contém um valor verdadeiro ou falso. Isso pode começar a confundir as coisas especialmente em um projeto maior. O que podemos fazer em vez disso, podemos criar essa constante para ser um nome mais descritivo. Vamos dizer que inclui ingredientes ruins. Então esse sempre será o valor verdadeiro ou falso e, em vez disso, podemos passar um nome de função tão normal. Isso divide nossas duas seções. Agora temos uma referência de função que sempre apontará para todo esse código aqui. Em seguida, temos um valor verdadeiro ou falso que foi originalmente pretendido como nossa variável. Agora alteramos o nome dessa variável. Também precisamos copiar isso e alterar o nome dentro do nosso log do console. Se salvarmos isso e depois atualizarmos, novamente levamos diretamente para a guia Fontes porque ainda temos esse erro. Mas agora, se dermos uma olhada na pilha de chamadas, verifique Alergias agora aponta para o nome da função em vez da variável. Esta não é uma regra difícil e rápida. Não precisamos adicionar um nome de função como este. Se você quiser fazer isso se quiser uma separação clara entre a referência da função e o nome da nossa variável. Vamos agora rolar para baixo até nosso segundo exemplo dentro dos comentários. Se descomentarmos toda essa seção, esse é o mesmo exemplo que usamos no vídeo anterior para examinar os métodos de matriz. Temos todos os blogposts, que são objetos recontidos. Então, abaixo disso, chamamos de dois métodos separados. Temos a função map, que vai fazer loop sobre todas as postagens, transformar o título em maiúsculas e, em seguida, retornar o novo valor, cadeia para a função de índice definida no final, que é retornará um número de índice se for encontrada uma correspondência para esse título maiúscula. Há um pouco acontecendo aqui dentro. Esta seção contém duas funções anônimas. Se houve um erro dentro daqui , a depuração pode começar, tornar-se um pouco difícil, especialmente se esta seção for ainda maior. Pouco antes de verificarmos isso, vou comentar o log do console acima e também remover o erro. Isso, agora temos nosso log de console único, que é obter índice, atualizar. Assim como todos foram levados diretamente para a guia Fontes porque temos um problema. Podemos ver na pilha de chamadas que o nome da função é anônimo. É aqui que está o problema. Como esses dois nomes de função são anônimos, não sabemos exatamente qual dessas funções estaria causando o problema. É claro que, se olharmos ao redor de todas as demais seções, podemos obter algumas pistas adicionais de onde o erro está nos ponteiros e nem sempre óbvio. Seria bom ver imediatamente qual função está causando o problema. O problema está aqui na primeira função dentro do mapa. O problema é que as maiúsculas precisam ser um U. maiúsculas Se você apontar exatamente para essa função dentro das ferramentas do desenvolvedor. Podemos adicionar um nome a essa função. Primeiro, chamamos essa transformação para superior. Em seguida, um nome descritivo para esta função anônima. Vamos obter o Index do título. Agora, se voltarmos às ferramentas do desenvolvedor novamente, veremos um erro. Mas agora imediatamente podemos ver que temos uma pista qual função está causando o problema. Podemos restringir isso a esta seção aqui. É como o rótulo de RNA para nossa função para ajudar a identificá-lo. Vamos corrigir isso, muda lá U. maiúsculo Se você não vir nenhum erro dentro do console e, em vez disso, vemos esse valor retornado de dois, que é o número de índice que corresponde a esta seção aqui mesmo. Como acontece com muitas coisas, a escolha de funções de nomenclatura está deixando-as como anônimas é completamente sua escolha. Muitas vezes, não é um problema deixar o nome desligado e reduzir ligeiramente a quantidade de código que escrevemos. Mas se você preferir ser mais descritivo e quiser alguns ponteiros extras quando aprofundados novamente, você pode adicioná-los às suas funções para ser mais descritivo. 32. Função ou método?: O JavaScript tem muita terminologia que pode levar algum tempo para se acostumar, como expressões de função e declarações de função, que vimos durante esta seção. Outra coisa que usamos bastante são as palavras de função e também método. Eles podem parecer iguais e praticamente são, mas há uma diferença fundamental. Sobre os arquivos iniciais, que é uma função ou um método. Pule para baixo para a seção Script. Tudo isso é familiar nas seções anteriores, temos nossos dois arrays. Agora temos nossa função de verificar se um ingrediente está incluído em qualquer um desses. Bem, vamos também criar uma nova função e esta só vai verificar quantos ingredientes uma determinada receita tem. Também precisaremos passar uma receita. Então, por dentro, tudo o que vamos fazer é retornar um valor que é o comprimento da receita. Examinamos essa propriedade length anteriormente, isso nos dirá quantos itens estão armazenados dentro de uma matriz. Podemos testar esse golpe com um registro de console, passando o número de ingredientes e, em seguida, qualquer um dos nossos arrays. Salve isso e abra um pré-console. Agora podemos ver que a matriz de pão tem quatro valores diferentes. Mas digamos que estivéssemos criando ainda mais funções relacionadas ao mesmo array. Você pode ter muito mais funções para fazer muitas verificações diferentes em nossas receitas. Se todas essas funções estivessem relacionadas, seria bom agrupar todas essas funções juntas. Como você acha que agrupamos muitos valores relacionados? Bem, para isso, usamos um objeto. Nós olhamos para objetos até agora. Um objeto que vimos tem sido algo assim, tivemos um usuário, move isso igual a nossos aparelhos encaracolados. Mas estou passando as propriedades que são uma combinação de chaves e valores e cada uma é separada por uma vírgula. objeto não é usado apenas para armazenar valores primitivos simples, como nossas strings aqui. Eles também podem armazenar em tipos de objetos também. Podemos colocar objetos acima, podemos colocar em matrizes e também em nossas funções. Como tudo isso está relacionado às nossas receitas, vamos nomear esse objeto, “checkrecipes”. Como atualmente temos duas funções, vamos colocar nela duas propriedades. O primeiro será verificar alergias, e o segundo será um número de ingredientes. Também precisamos passar um valor para essas duas propriedades. Disso, podemos cortar e colar nossas funções também, verificar alergias como na logo após a primeira linha. Como com todas as outras propriedades, precisamos separá-las com uma vírgula. O mesmo para nossa segunda função, que é o número de ingredientes. Coloque isso em lugares logo após o nosso nome. Outra coisa que também podemos fazer, é transformá-los em anônimos. Como temos um nome de propriedade “checkallergies” e “numberofingredientes”, temos uma maneira de acessar essas funções, para que possamos remover os nomes das funções em ambos. Agora, como essas duas funções são colocadas em um objeto, elas agora são consideradas métodos e agora qualquer um desses métodos agora pode ser chamado a partir do nome do objeto, que é “checkrecipes”. Na verdade, isso deve ser apenas um R. maiúsculo Então, agora, se entrarmos nossa base de log do console no nome do objeto, que é “CheckRecipes”. Usando a notação de pontos, podemos chamar qualquer uma dessas propriedades, então basta verificar alergias ou número de ingredientes e também podemos ver isso com o preenchimento automático dentro do editor. Vamos buscar vários ingredientes e, assim como acima, também precisamos passar nesta receita, então os suportes ou os parênteses. Vamos buscar pão e, em seguida, rolar para cima, também removeremos esse registro do console. Não há problema em que esteja lá. Salve isso e recarregue o navegador, e ainda retornamos o valor antes. Mas desta vez, ele foi chamado como nosso método a partir do objeto em vez da função independente original. É assim que todos os métodos funcionam em nossos tipos de objetos. Se dermos uma olhada logo acima, criamos nossos dois arrays aqui e, como já sabemos, os arrays são um tipo de objeto especial. Como ambos são um objeto, é por isso que também teremos acesso a esses métodos de matriz. Se entrarmos no console e digitar brownies e, em seguida, pontuar , assim como com qualquer outro objeto, podemos usar essa notação de ponto para acessar qualquer uma das propriedades ou métodos disponíveis em esse objeto. É aqui que todos eles vêm dos bastidores, é exatamente o mesmo, nossa matriz é um objeto assim. Em seguida, acessamos propriedades ou métodos individuais que vemos dentro do navegador. De volta a esse objeto, mesmo que tenhamos duas funções ou métodos separados passados dentro daqui, ele também pode ser misturado com qualquer um dos tipos de dados também. Também podemos misturar primitivas como o número máximo de receitas, e podemos armazenar isso como um valor primitivo simples, e essa técnica é uma ótima maneira de agrupar muitas informações relacionadas e funcionalidade. Assim como com os métodos, também podemos acessar receitas máximas com esta notação de pontos. Como esta não se relaciona a uma função, não precisamos dos colchetes, vamos chamá-lo pelo nome da propriedade. Atualize e agora vemos o valor de 1.000. Agora sabemos que uma função colocada como uma propriedade em um objeto é considerada um método em JavaScript. Às vezes, porém, precisamos desses métodos para também se referir a outras propriedades nos mesmos objetos. Por exemplo, também podemos ter uma propriedade chamada “CurrentRecipes” e esse é o número total de receitas que está atualmente em nosso site. Então também podemos querer um método que acesse essas duas propriedades e verifique se não excedemos o número máximo de receitas antes que uma nova possa ser carregada. Para fazer isso, adicione qualquer propriedade, na parte inferior deste objeto dirá “ReceitasLeft” e, como parece, calcularemos o número de receitas que ainda temos no nosso site. Isso é relativamente simples, tudo o que precisamos fazer é retornar o valor de nossas receitas máximas. Leve as receitas da coluna. Agora, podemos experimentar isso no navegador. Vamos registrar isso, mas desta vez registraremos o valor de retorno das receitas restantes. Salve e atualize. Passamos diretamente para a guia fontes porque isso ativará um erro. Vemos que as receitas máximas não estão definidas e na pilha de chamadas, podemos ver que isso foi causado por “ReceitasEsquerda”. A razão pela qual isso acontece, pode não ser imediatamente óbvio, mas isso ocorre porque, para acessar outras propriedades em nosso objeto, como essas duas aqui, também precisamos usar essa palavra-chave então, antes de cada um dos nossos nomes de propriedade. Agora, dentro do navegador, se entrarmos no console, isso agora tudo funciona completamente bem. Obviamente, você pode querer saber para que o valor disso aponta. Bem, vamos ir até o nosso objeto e dar uma olhada nessa função com base em um log de console e podemos gerar o valor disso, salvar e atualizar. Podemos ver esses pontos nosso objeto atual e ele tem todas as propriedades disponíveis que acabamos de criar dentro daqui. Essa palavra-chave pode ser uma coisa realmente complexa de se entender, mas neste contexto atual, essa palavra-chave apontará para qualquer uma das propriedades disponíveis neste objeto atual. Haverá mais informações sobre isso à medida que avançarmos no curso. Em seguida, vamos dar uma olhada na função de seta, que analisamos brevemente anteriormente, e como ela também age de forma diferente do interior desse objeto. 33. Funções arrow: No ES2015, recebemos uma nova forma opcional de criar expressões de função. Essas são chamadas de funções de seta. Essas eram uma maneira mais curta de escrever expressões de função. Mas não é apenas essa sintaxe mais curta que é diferente, elas também se comportam de forma diferente das funções regulares também. Na parte superior dos arquivos iniciais, vá para o arquivo de funções de seta e, no topo, temos uma expressão de função regular. Esta é uma função anônima. Em seguida, armazenamos isso dentro de uma variável. O que vamos fazer agora é transformar isso em uma função de seta. Nós analisamos isso brevemente mais cedo e a maneira como precisamos fazer isso é primeiro remover a tecla de função. Então, após os colchetes, adicionamos nossa seta, e ela é composta pelos iguais e no símbolo maior que. Chame isso e execute o alerta quando ele for chamado pelo nome da variável, seguido pelos colchetes de função, salve e atualize. Agora a função agora será executada corretamente. No início deste vídeo, começamos dizendo como as funções de seta eram uma sintaxe mais curta, mas isso não parece muito diferente no momento. Isso ainda é classificado como uma função de seta, mas também podemos torná-la ainda mais curta também. Se tivermos apenas uma única linha de código aninhada dentro, poderemos remover essas chaves e podemos trazê-la para a mesma linha. Atualize o navegador e isso ainda funciona exatamente da mesma forma que antes. Se você tiver apenas uma única linha como essa, também não precisamos adicionar a palavra-chave return, pois isso é feito automaticamente. Se tivéssemos várias linhas de código, precisaríamos retornar algo da função e também envolver as várias linhas dentro das chaves. As funções de seta também podem parâmetros como uma função regular. Podemos passar quantos desses quisermos separar por uma vírgula. Se tivéssemos apenas um único parâmetro assim, também podemos remover os suportes circundantes. É assim que uma função de seta se parece. Vamos refatorar um dos nossos métodos do vídeo anterior. Podemos remover essas duas linhas de código e, em seguida, abaixo disso terá o mesmo exemplo que vimos no vídeo anterior. Vou comentar todo esse código para torná-lo ativo. Lembre-se, anteriormente criamos nossos objetos de verificação e ele continha várias propriedades, assim como nossas primitivas aqui. Além disso, como movemos as funções autônomas para fazer parte desse objeto, elas agora são chamadas de métodos. O que vamos fazer dentro desse objeto é transformar esse é transformar método recipesLeft e eu farei uso de uma função de seta. Assim como antes, podemos mover a palavra-chave function pois esta é apenas uma única linha de código. Também podemos remover as chaves encaracoladas, trazê-lo para a mesma linha e lembrar que as linhas simples são retornadas automaticamente de volta. Também precisamos da flecha. Vamos tentar fazer login no console e ver o que acontece. Ainda temos o registro do console de receitasEsquerda. Atualize o navegador e obtemos um token inesperado, que é o ponto e vírgula. Este é só este aqui. Se removermos isso e atualizarmos, veremos o valor de não um número. Obviamente, esse método não está funcionando como antes. Isso ocorre por causa da maneira como as funções de seta lidam com a palavra-chave this. Mais precisamente, as funções de seta não têm isso, e é por isso que não vemos o número dentro do console. Veja isso também podemos colocar em um log de console dentro desse método. Então mova-os para linhas separadas, registre o valor disso. Então, como estamos agora em várias linhas, também precisamos envolvê-las nas chaves encaracoladas, certificando-se de que essa vírgula também seja removida. Vamos tentar isso. Atualize e agora vemos isso aponta para o objeto da janela, ao contrário do último vídeo, em que o valor disso se referia ao objeto pai que era CheckRecipes. As funções de seta não têm isso. Isso significa que isso se refere ao objeto global, portanto, muitas vezes é aconselhável não usar uma função de seta ao criar métodos como este porque ele não pode acessar as propriedades desse objeto. Embora, como quando usamos as funções de seta em um vídeo anterior, isso pode ser útil para combinar coisas estranhas, como métodos de matriz, devido à sintaxe mais curta. Se dermos uma olhada em um exemplo disso, na parte inferior. Se acessarmos os brownies ou o mapa e, em seguida, com a sintaxe da função regular, ficaria assim. Passamos em uma função. Essa função, então, absorveria cada ingrediente e, dentro, poderíamos devolver qualquer coisa que você quiser. Vamos buscar nossos ingredientes, que foram transformados em maiúsculas. Esta é uma maneira de escrever isso com uma função regular e, na verdade, ainda é minha maneira preferida de fazer as coisas. No entanto, embora os equivalentes da função de seta fossem assim, brownies.map e, em vez de digitar a palavra-chave function, podemos passar uma função de seta, que é os colchetes, a sintaxe de seta. Não precisamos da palavra-chave return pois tudo isso está em sua própria linha. Podemos então simplesmente copiar isso, colar isso, e ambos são equivalentes. Não podemos ver por que a versão mais curta é frequentemente usada com coisas como métodos de matriz e também algumas pessoas apenas funções de seta para a direita por padrão. Às vezes, porque é apenas uma sintaxe mais nova. Isso pode ser bom se essa for a sintaxe que você prefere e eles tiverem alguns benefícios, como acabamos de ver com a forma mais curta. Mas lembre-se, só porque as funções de seta são uma maneira mais nova de fazer as coisas, isso não significa que devemos sempre usá-las exclusivamente. Você notará que eles também são anônimos. O que significa que eles não têm um identificador exclusivo sobre eles. Pode estar disponível que atribuímos a eles. Isso também pode tornar a depuração um pouco mais complicada. Lembre-se também de que temos a diferença entre a maneira como ela lida com a palavra-chave this a partir da declaração de função regular. 34. Valores de parâmetro padrão e uso do repouso: Este vídeo vai se concentrar em parâmetros de função e alguns truques úteis ao usá-los, que foram disponibilizados com a introdução do ES 2015. Lembre-se de que um parâmetro é um espaço reservado para o valor que vamos passar para uma função, e você pode pensar nisso como uma variável. Primeiro, queremos dar uma olhada valores de parâmetros padrão e, para ver isso, criará uma nova função que levará um valor monetário, um símbolo de moeda e, em seguida, retornará uma nova string para exibir o preço de volta para o usuário. pasta desta lição, que são valores de parâmetros padrão, e usando Rest, temos uma tag de script vazia na parte inferior, onde podemos criar nossa função, que vou chamar de formato dinheiro. Isso vai levar o fim, do valor que precisamos formatar e também a moeda para o corpo da função. Isso simplesmente retornará uma nova string. Como precisamos acessar ambas as variáveis, podemos colocá-lo dentro dos backticks e usar o símbolo $ e as chaves para inserir uma variável. Primeiro, a moeda e o valor. A string que será retornada parecerá algo assim. Todo o nome da função logo abaixo do nome, então está passando o valor e também a moeda. Vamos para 100 e o símbolo de moeda como uma string e armazená-lo dentro de uma variável. Assim para o console. Salve isso e esperaríamos de volta o valor de 100 com o símbolo $ na frente. Também poderíamos ir mais longe, alterando o preço para duas casas decimais. Podemos fazer isso usando um método JavaScript Number chamado toFixed. Logo após o valor que podemos passar nele paraFixado e, em seguida, defina isso como duas casas decimais. Lá vamos nós. E se tivéssemos um site que tivesse apenas uma moeda única? Bem, para isso, em vez de passar o segundo valor toda vez, poderíamos passar um parâmetro padrão para que, até nossos parâmetros, possamos definir isso igual à nossa string padrão. Agora poderíamos demitir isso ou, em vez disso, queremos anular isso. Poderíamos mudar isso para ser um valor diferente, então isso substituiria o padrão assim. Além disso, se removermos isso, ele retornará ao nosso símbolo $ padrão. Isso também funciona exatamente da mesma forma se você quiser armazenar nosso padrão dentro de uma variável. Crie uma constante no topo chamado símbolo de moeda e defina isso igual ao nosso padrão. As variáveis também funcionam dentro daqui , poderíamos definir isso igual ao nosso nome de variável do símbolo de moeda. Salve isso. Atualizar. Agora vemos o padrão do nosso símbolo $, mesmo que não tenhamos passado isso como argumento. Portanto, esse tipo de abordagem seria realmente útil se você quisesse manter um único valor central que queríamos usar em diferentes áreas do nosso site. Em seguida, vamos dar uma olhada em como podemos usar o operador Rest. O operador Rest nos dá uma maneira fácil de lidar com uma função que terá muitos parâmetros diferentes. Aqui, só temos dois, então isso não é muito difícil de gerenciar. Mas imagine se tivéssemos muito mais parâmetros que queríamos incluir, com isso podemos escrever uma nova função, então vamos comentar todo esse código existente e, em seguida, criaremos uma nova função na parte inferior, que será responsável pelo cálculo de uma idade média, então a palavra-chave function, o nome da idade média e abaixo chamá-lo pelo nome da função. Também poderíamos passar em muitos números diferentes, que são as idades de todos os nossos diferentes usuários. Passando muitos argumentos diferentes. Com todos esses argumentos sendo passados para a função, não faria sentido criar um novo nome de parâmetro para cada um desses valores. Em vez disso, será útil se pudéssemos apenas passar um único valor e, para lidar com isso, temos o operador restante. Então, o que podemos fazer é usar os três pontos. Nome do parâmetro pessoal e isso é basicamente como uma variável com os três pontos colocados antes que agora possamos acessar nossas idades dentro da função. Vamos tentar isso dentro de um log de console, atualizar e agora temos seis valores armazenados dentro de uma matriz. Isso é realmente útil se não quisermos criar um novo nome de variável para cada um dos valores. Ou se não soubéssemos exatamente quantos valores seriam passados para essa função. Voltando ao propósito da nossa função, que é a idade média, agora podemos usar essa matriz de idades para calcular isso usando um método que você já olhou no passado chamado reduzido. Portanto, remova esse registro do console, acesse nossa idade é variável e chame o método reduzido. Lembre-se, no vídeo anterior que vimos isso, isso leva em duas coisas diferentes. Queremos criar isso como uma função de seta. Isso levará o total e também o valor atual que é a nossa seta, que irá somar esses dois valores que a corrente diga total. Então podemos resolver isso dentro de uma variável. Isso vai percorrer cada um dos valores dentro das idades, que são esses aqui. Ele selecionará o valor atual e, em seguida, adicionará isso ao total anterior. Certifique-se de que todos esses valores sejam combinados em um único número. Agora, o que precisamos fazer é pegar esse total e dividi-lo pelo número de entradas dentro da matriz, retornará isso de volta da função. O total de todos os números somados divididos pelo comprimento da matriz. Como obtemos o comprimento da matriz? Bem, fazemos isso com a propriedade length, que no nosso caso é o valor de seis. Como essa função está retornando um valor, também podemos armazenar isso dentro de uma variável. Vamos chamar isso de média. Defina isso igual ao valor de retorno e, em seguida, exiba isso dentro dos logs. Salve isso, atualize e a média de todos os nossos números é 43. É assim que o parâmetro Rest funciona selecionando todos os valores que são passados para ele. Mas se não quiséssemos capturar todos esses valores, digamos, por exemplo, se quiséssemos uma variável separada para o primeiro valor, poderíamos inserir o primeiro parâmetro assim e, em seguida, o valor das idades seriam todos os valores restantes de 45 até o final da matriz. Você pode ir ainda mais longe e armazenar vários itens, como o segundo valor, mas sempre lembre-se de que o parâmetro rest deve ser o último, pois, como parece, ele coleta todos os demais valores restantes. Esses três pontos também podem parecer familiares de antes quando olhamos para a estrutura em matrizes. Este exemplo é o que vimos anteriormente e esse é um exemplo de uso do spread. O descanso e a propagação são muito semelhantes e ambos têm três pontos. Spread significa que podemos pegar algo que podemos fazer loop, como esse conjunto de postagens, e podemos extrair valores e espalhá-los em outra coisa. Por exemplo, eles podem estar se espalhando em um novo objeto ou array para copiar sobre os valores, isso o torna útil para coisas como duplicar matrizes ou simplesmente capturar valores e copiá-los. Em seguida, temos o parâmetro Rest que acabamos de ver e isso torna agrupar todos os valores de argumento muito fácil agrupar todos os valores de argumento em um único valor de matriz. Em seguida, abaixo, haverá os parâmetros padrão e esse padrão é criado definindo um valor como um número ou uma string. Lembre-se de tudo, este é apenas o valor padrão e se fornecermos um valor quando chamarmos uma função, isso será usado em vez disso. 35. O que é DOM?: Pouco antes de entrarmos em algum código, é muito importante saber sobre algo que vamos ver nesta seção chamada DOM. O DOM significa Document Object Model e é uma interface de programação para nossas páginas HTML. Isso pode parecer complexo, mas não é muito confuso, uma vez que saiba o básico. Tomando uma versão muito básica e de script de um documento da web, esse é o elemento básico que temos. Todos os documentos precisam ter esse invólucro HTML e, em seguida, temos a seção de cabeça e corpo um nível dentro. Para visualizar como isso ficaria na árvore DOM, esse exemplo seria algo assim. À direita, o documento é o topo da árvore. Este é o nosso documento da web ou nossa página da web. Em seguida, abaixo, temos o invólucro HTML raiz. Abaixo disso, temos as seções da cabeça e do corpo que estão ambas ao lado do outro. Na verdade, é assim que vemos quando os vemos em nosso editor de texto. Nosso DOM é construído com todos esses objetos que espelham nossa página HTML. Um passo adiante, adicione um elemento de título à seção de cabeça que sempre fazemos e também um elemento h1 ao corpo. Todos esses aninhados são estruturados exatamente da mesma forma que nossa página da web como vemos dentro do nosso editor de texto. Todos esses objetos no DOM são nós de clusters. O h1, por exemplo, é um nó de elemento, um envelope do cabeçalho e também o título. Temos um nó de texto, que é o conteúdo de texto de cada elemento. Basicamente, o texto que vai entre as tags de abertura e fechamento. Os elementos também podem ter atributos, como um gráfico h, uma classe e um ID. Esses também são nós. Esses são chamados de nós de atributos, assim como vemos aqui na parte inferior. Temos nós de elemento, temos nós de texto e também temos nós de atributo também. Viemos este arquivo sem saber nada sobre o DOM. Tudo isso está acontecendo em segundo plano. Por que devemos nos importar? Bem, o DOM fornece uma maneira de JavaScript ou outras linguagens se conectarem ao nosso HTML. Ele nos dá acesso à árvore de documentos para que possamos fazer alterações nela, se quisermos. Isso significa que podemos usar JavaScript para criar novos elementos HTML. Podemos removê-los, podemos alterar o estilo, podemos adicionar ou remover atributos e basicamente fazer o que quisermos com nossos elementos HTML. Apesar de escrevermos em código JavaScript, ele usa o DOM para acessar esses elementos HTML. Eles trabalham juntos para nos permitir fazer isso. Já analisamos brevemente o trabalho com o DOM em nossos vídeos anteriores quando analisamos alguns exemplos, como alterar o texto dentro do navegador. Também teremos muito mais a abordar nesta seção. Vamos dar uma olhada em algum código no próximo vídeo. 36. Selecionando elementos: Ei, bem-vindo de volta a esta nova seção. Para esta seção, vá para a Seção Número 4 , que é eventos e o DOM. Este é o primeiro vídeo que é o Número 1, Selecionando Elementos. Vou pegar o caminho para esse arquivo e abri-lo dentro do navegador. Podemos ver dentro do navegador que já temos algum código HTML que está exibindo uma tabela, e isso nos dará uma referência para algumas maneiras diferentes que podemos usar para selecionar qualquer um dos nossos elementos HTML. Obviamente, quando precisamos manipular qualquer um desses HTML usando JavaScript, temos várias maneiras que podemos usar para selecioná-los. Primeiro de tudo, como olhamos no passado, podemos selecionar um elemento pelo Id específico. Esse era um atributo Id e podemos selecioná-lo por um nome específico. Podemos selecionar por uma tag que é o nome do elemento, como Id, um elemento p ou a imagem, podemos selecionar por um nome de classe e também podemos selecionar com um seletor CSS também. Há duas maneiras diferentes que podemos usar para isso. Podemos selecionar o primeiro seletor correspondente ou podemos retornar a todos os jogos disponíveis. À direita, temos um conjunto de métodos que nos permitirá selecionar qualquer um dos nossos elementos com esses métodos. Usamos GetElementById brevemente no passado. Podemos selecionar nossos elementos pelo nome da tag e também pelo nome da classe também. Observe que o s é destacado em ambos os dois métodos, pois retorna vários elementos. Temos QuerySelector, que selecionará a primeira correspondência, e QuerySelectorAll que retornará todas as correspondências. Ambos os métodos, assim como este, funcionam exatamente da mesma forma que com nosso CSS. Por exemplo, poderíamos selecioná-lo por um nome de elemento, poderíamos usar.select uma classe ou também um # também se quisermos selecionar um elemento por um ID específico com esse grupo de métodos que vamos poderíamos usar.select uma classe ou também um # também se quisermos selecionar um elemento por um ID específico com esse grupo de métodos que vamos concentre-se neste vídeo e na próxima seção também. Lembre-se de que um método é como uma função, mas ele vive em um objeto. Além disso, o documento também é um objetivo. Vamos até o nosso index.html, role para baixo até a seção de script. Criaremos um console.log e colocarei o conteúdo do documento. Este é um objeto. Vamos abrir as ferramentas do desenvolvedor no console e atualizar. Basta fazer isso um pouco maior. Se abrirmos isso e , dentro do console, poderemos ver todo o conteúdo que você tem dentro da nossa página de índice. Conforme abordado no último vídeo, o documento é o nível superior da árvore DOM. Ele abrange tudo dentro desta página HTML. Esses documentos são um objeto também tem muitas propriedades e métodos disponíveis também. Podemos ver isso se digitarmos o documento e, em seguida, usarmos ponto para obter o preenchimento automático. Isso remonta a mais cedo quando analisamos tipos de objetos, como matrizes e percebemos que eles tinham muitas propriedades e métodos internos que podíamos acessar. Podemos verificar se este documento tem alguma imagem. No nosso caso, não temos um, então isso retorna uma coleção HTML vazia. Também podemos verificar algumas coisas diferentes , como o URL. Pressione enter. Isso retornará ao caminho do arquivo para esse documento específico. Podemos ver que o meu está na área de trabalho e dentro dos arquivos iniciais do JavaScript modernos, bem como o URL. Vamos digitar a cabeça e isso retorna a seção de cabeça que é todos os dados dentro desta seção principal. Também o mesmo para nosso corpo e como nossos elementos corporais com todo o conteúdo interno. A razão pela qual podemos acessar este documento e todo o conteúdo é porque ele está disponível globalmente no objeto da janela. Também poderíamos acessar isso por meio do objeto da janela também. Até nosso tipo de log de console na janela, atualize e dentro do console, se abrirmos isso, esse objeto de janela terá a propriedade document aqui, onde podemos acessar todas as mesmas propriedades métodos que acabamos de ver. Bem, o que estamos interessados no momento são os métodos disponíveis para selecionar os elementos necessários que são esses à direita. Primeiro, para fazer isso, criaremos um novo elemento que você deseja selecionar. Podemos colocar isso em qualquer lugar em nosso código. Vou adicionar um elemento p logo acima da seção e depois pegar isso pelo ID do texto. Então, dentro da seção de script logo abaixo, podemos pegar isso primeiro selecionando os documentos e, em seguida, podemos acessar o método disponível no documento que é getElementById. Sabemos como fazer isso, passamos como uma string o Id que é texto, armazenamos isso dentro de uma variável, vamos chamar esse texto. Agora podemos registrar isso no console. Atualizar. Lá vamos nós e este agora é selecionado nosso elemento p que acabamos de criar. Isso é bem simples. É assim que selecionamos um elemento em particular. Mas e se tivéssemos dois elementos p? Bem, para poder pegar esses dois elementos p, temos duas opções. Na segunda linha, temos acesso ao nome da tag. Como você pode ver com o s, isso é capaz de conter vários elementos. Isso será bom para usar. Também o mesmo para a última linha, também poderíamos usar QuerySelectorAll onde poderíamos selecionar várias correspondências pelo elemento p e, claro, se tivéssemos uma classe anexada a ambos os elementos, também poderíamos usar GetElementsByClassName também. Mas não temos uma classe anexada a elas no momento, então vamos fazer uso do nome da tag. Vamos descer e, em vez de GetElementById, e apenas para ser getElementsByTagName, e assim como faríamos com CSS, podemos selecioná-los pelo nome da tag p. Salvar e atualizar. Agora retornamos como uma coleção HTML contendo dois elementos diferentes. Uma coleção HTML é uma coleção genérica de elementos tipo array e é assim que nossos elementos p de retorno são armazenados. Assim como nos arrays, também podemos acessar valores específicos pela posição do índice. Se adicionássemos os colchetes e, em seguida, selecionássemos o índice número 1, isso selecionaria nosso segundo elemento p, que é este aqui. Poderíamos mudar isso para ser o índice zero, e isso selecionaria nosso primeiro. Mas note que, como esta é uma HTMLCollection em vez de uma matriz, não temos acesso a nenhum dos métodos de matriz. Em seguida, podemos selecionar elementos pelo nome da classe e, para isso, também precisamos adicionar uma classe aos nossos elementos. Vamos para o nosso segundo elemento, podemos adicionar uma classe. Eu quero ir para texto pequeno. Você quer seguir uma tabela que você já tem. Este deve ser bem direto. Se eu quiser selecionar um elemento pelo nome da classe, temos getElementsByClassName. A mudança acabou, passando o nome da classe que era pequeno em texto. Remova o número do índice e atualize. Assim como antes, também retornamos para foi HTMLCollection porque isso também pode conter vários elementos que têm a mesma classe. A última coisa que vamos olhar para o trabalho de forma semelhante. Tudo isso faz uso de um seletor CSS para selecionar o primeiro elemento que se deparará ou uma coleção de todas as correspondências. Vamos começar com nossa primeira partida, que é QuerySelector. Novamente, isso também está disponível diretamente nos documentos. O que poderíamos fazer, assim como CSS, poderíamos fazer uso do nome da classe com o ponto. Isso retornará os elementos p que acabamos de selecionar. Também podemos pegar um Id ou também o nome da tag assim. Lembre-se de que o QuerySelector selecionará a primeira ocorrência ou a primeira correspondência. Atualize e há nosso primeiro elemento lá. Mas se quisermos pegar todas essas correspondências disponíveis, precisamos de alterações para ser QuerySelectorAll. Salve e atualize. Agora estamos recebendo de volta uma lista de nós contendo agora dois elementos p. Ao contrário de antes de onde tínhamos que retornar à Coleção HTML, desta vez recuperamos uma lista de nós e há algumas diferenças entre uma lista de nós e uma Coleção HTML. Vou dar uma olhada neles em um vídeo posterior. Além disso, lembre-se de que aqui por conta própria, ao escrever nosso JavaScript dentro daqui, o JavaScript não sabe nada sobre nosso modelo HTML. Ele está acessando o documento e, em seguida, todos os elementos que precisamos através da interface DOM. Como recapitulação, podemos selecionar um elemento de várias maneiras, como este elemento p, que podemos acessar pelo Id, o nome da tag que é o nome do elemento p, ou até mesmo o nome da classe que é texto verde e os dois últimos são selecionados em um elemento da mesma forma que esperaríamos dentro de uma folha de estilos. A diferença é se quisermos pegar a primeira partida com QuerySelector ou todas as correspondências usando QuerySelectorAll. Agora sabemos como selecionar qualquer elemento HTML que você deseja. Agora vamos passar para o próximo vídeo, onde descobriremos como fazer algumas alterações em qualquer elemento existente. 37. Mudando valores e atributos: Sabemos como selecionar um elemento. Como realmente mudamos eles? Bem, isso é que vamos dar uma olhada neste vídeo. Vamos mostrar como podemos alterar os valores dos elementos e também como podemos adicionar e remover atributos usando JavaScript. Para esta lição, isso está mudando valores e atributos, então abra isso e também dentro do navegador. Para começar, temos esse título na parte superior, o título nos links e também a imagem colocada logo abaixo. O que vamos fazer para isso é antes de tudo, veja como podemos mudar o conteúdo do texto, e já analisamos isso logo no início do curso, então eles não devem vomitar surpresas. O que vamos fazer é mudar o título de hambúrgueres carnudos para não ser hambúrgueres de carne, e poderíamos fazer isso no fundo. Primeiro de tudo, a palavra que você deseja mudar ou substituir será carnuda. Portanto, vamos cortar isso e, em seguida, colocá-lo dentro de um elemento de extensão, poderíamos adicionar um ID ou qualquer forma de pegar esses elementos que você deseja. Para este exemplo, vou para a classe chamada change title e, em seguida, podemos alterar o conteúdo do texto dentro da extensão. Para fazer isso, precisaremos fazer uso do JavaScript. Crie uma seção de script na parte inferior, e podemos selecionar apenas esta seção, instalá-la dentro de uma constante chamada el. Isso geralmente é para elementos e, em seguida, o que precisamos fazer é pegar o elemento pelo nome da classe usando o QuerySelector. Como é uma classe fácil, usamos o ponto e o nome da classe foi alterado de título. Como sabemos, essa é a nossa maneira de agarrar esse elemento. Para começar a fazer alterações nesses elementos, como na maioria das coisas em JavaScript, tudo começa com um objeto pai do qual vamos herdar certas coisas. Se fizermos um console.log, logo abaixo e registre o valor de nossos elementos. Vamos salvar isso e abrir isso dentro do console. Atualize, agora podemos ver que temos acesso ao intervalo que você acabou de selecionar. Mas mesmo sabendo que este é um elemento de extensão, se fizermos o typeof e então ele atualizou isso mais uma vez, podemos ver que isso é realmente um objeto. Ele retorna um objeto que é um objeto de elemento e, como qualquer outro objeto que pesquisamos anteriormente, isso significa que também podemos acessar determinados métodos e propriedades disponíveis neste objeto. Há muitas maneiras de escolher, mas este vídeo vai descobrir alguns comuns. Para começar, podemos obter o conteúdo de texto de um elemento usando um método chamado innerText. Se fizermos um console.log pelo valor de nossos elementos.innerText. Certifique-se de que este seja o CamelCase com o T. maiúsculo Agora no console, esse é o valor do carnudo. Este é o conteúdo do InnerText entre as tags de extensão, e é esse texto que vemos aqui. InnerText não só pega o conteúdo x atual, mas também podemos substituí-lo também, e a maneira de fazer isso é acessar nossos elementos usando el. Defina o texto interno, e podemos atribuir isso como um novo valor, como sem carne e fechado no console e recarregar a página. Nossas mudanças agora entram em vigor. Mas e se também quiséssemos adicionar alguma marcação a esse texto? Por exemplo, se quisermos adicionar os elementos de marca ao redor desse texto, poderíamos adicionar a tag de abertura e fechamento. Agora, se salvarmos isso e atualizarmos, provavelmente não é surpresa que vejamos essas saídas como uma string. Em vez de colocar isso como uma string, a maneira como podemos formatá-los corretamente é, em vez de inserir InnertText, podemos alterar isso para ser innerHTML e agora os elementos de marca entrarão em vigor em vez de produzir isso como uma string. Uma coisa a ter cuidado, embora ao inserir HTML assim, sempre há uma pequena chance de que um usuário possa inserir algum código perigoso em seu site. É muito importante não definir o innerHTML para qualquer conteúdo que o usuário possa fornecer, como em um formulário ou entrada de texto. Hello HTML tem algumas defesas contra isso. Para estar no lado seguro, é recomendável evitar HTML interno se você estivesse inserindo um texto simples como estávamos antes. Vamos revertê-lo de volta para estar em um texto e, juntamente com o TextContent real, também podemos obter atributos como o ID, como a classe, o href e também a fonte. Também poderíamos definir novos também. Para ver esse salto para o console, e então podemos selecionar nossos elementos , que são minúsculas. Sabemos que, para esses elementos, temos a classe de título de mudança e, se quisermos selecionar isso usando JavaScript, podemos usar GetAttributes. Dentro dos suportes. Podemos passar uma string com o nome dos atributos que você deseja selecionar. Se formos para a classe, podemos ver isso retornado logo abaixo, e também se procurarmos por algum fã, como o ID, atualmente não temos um ID nesse elemento. Isso, portanto, retornaria o valor de null. Também poderíamos usar isso em nosso editor de código, e poderíamos armazenar os valores dentro das variáveis. Também poderíamos definir um novo ID se quiséssemos. Corte os elementos e, em seguida, podemos definir diretamente o ID dessa propriedade e defini-la como uma nova string, como nova, diga isso, e abrir o console. Atualize, e agora, se entrarmos na guia Elementos, na seção corpo, no cabeçalho, abra o título do site e pudermos ver ao lado de uma classe, também temos esse novo ID. Se já tivéssemos um ID para esses elementos específicos, ele substituiria o valor original. Também temos vários métodos disponíveis que funcionarão com atributos também. Temos GetAttributes, temos setAttributes e também RemoveAttribute também. Dentro do console, vamos dar uma olhada neles. Eu vou até o console, também podemos usar o método getAttribute que analisamos antes e podemos passar o ID para obter o novo valor que acabamos de adicionar. Este é o valor de retorno de novo, e também podemos armazenar isso dentro de variáveis em nosso código, além de obter esses valores como acabou de mencionar, também podemos definir novos atributos também. Abra o editor, vamos adicionar uma nova classe que mudará a cor do nosso título. Se rolarmos até o CSS, podemos ver aqui que já temos uma classe verde, que definirá essa cor de texto aqui. Podemos adicionar a classe verde aos nossos elementos. Vamos fazer isso logo abaixo do nosso ID. Fazemos isso com EL.SetAttributes. Mas precisamos passar dois valores separados. O primeiro é o nome dos atributos. Vamos adicionar uma classe, separada por uma vírgula. O segundo valor é o className, que é verde. Agora, se salvarmos isso e seguirmos para o navegador, atualize a classe verde agora aplicada. Além disso, se você entrar nos elementos e depois em nossa seção, então este é o corpo, o cabeçalho e o título. O elemento span agora tem essa classe de verde. Se você olhar de perto, podemos ver que esta é a única classe que agora tem. Mesmo que no início tenhamos adicionado essa classe de change-title, isso acontece porque quando usamos atributos de conjunto, não apenas adicionamos uma nova classe, mas também substituímos a existente também. Se quiséssemos incluir isso como uma classe adicional em vez de substituir, há outra maneira de fazer isso e vamos dar uma olhada nisso em apenas um momento. Mas primeiro, vamos dar uma olhada em como podemos remover um atributo com o método remove attribute. Tudo o que precisamos fazer dentro daqui é passar o nome do atributo que queremos remover. Vamos para o ID. Atualize o navegador e esse ID agora foi removido do nosso span. Trabalhar com atributos dinâmicos como esse é realmente útil para atualizar coisas como nossa imagem. Poderíamos selecionar esse elemento de imagem aqui e, se quiséssemos, poderíamos alterar dinamicamente a fonte da imagem. Primeiro de tudo, se removermos a fonte da imagem e, em seguida, podemos adicionar isso de volta dinamicamente em nosso script. Selecione a imagem, instale isso dentro de uma variável. Usaremos o QuerySelector, passaremos os elementos da imagem e, em seguida, no elemento image, podemos usar o método de atributo set. Isso definirá a fonte da imagem. Assim como acima aqui, estamos passando dois valores. O primeiro é o nome do atributo da fonte e, em seguida, separado por uma vírgula, passaremos o valor que é nosso nome de imagem de burger.jpeg. Podemos duplicar isso e colocar no texto antigo que é uma imagem de hambúrguer para o navegador e agora nossa imagem está de volta no lugar, mas desta vez começamos a usar o JavaScript. Pessoalmente, usei coisas assim no passado para criar jogos que aparecerão com imagens aleatórias e também para adicionar ou remover classes para alterar a aparência de certas coisas também, como no final de um jogo, podemos querer adicionar uma nova classe para mostrar ou ocultar alguns elementos, como uma seção de pontuação. Também poderíamos definir o texto verde para a vitória ou usar texto vermelho para uma derrota. Volte ao problema de várias classes que tínhamos antes. Primeiro, o que vamos fazer é adicionar várias classes ao nosso título. Faremos isso dentro da seção de span, basta mudar o título na classe azul e também vermelho. Então também podemos comentar essa linha aqui, para que ela não substitua essas três classes. Essas três classes agora podem ser recuperadas de várias maneiras. Primeiro, temos algo chamado ClassName. Se entrarmos no console, podemos ver isso acessando nossos elementos e, em seguida, selecionando className. É enter, você verá o valor de retorno verde, então isso só precisa ser atualizado. Vamos tentar isso mais uma vez. Agora recuperamos as três classes de título de mudança, azul e vermelho. Se você examinar mais de perto o valor de retorno aqui, isso estará contido dentro das cotações. Sabemos que o className retornará uma string. Assim como uma string também terá algo chamado ClassList. A ClassList retornará se abrirmos isso em uma coleção de valores parecida com array. Temos o índice Número 0, 1 e 2. Também podemos selecioná-los individualmente dentro desses colchetes. Se quisermos selecionar azul, que é o Número 1, podemos selecionar o Número 2 que é vermelho e 0 para o título de alteração. É assim que podemos recuperar nossa ClassList, mas e o problema que tínhamos antes era adicionar várias classes. Bem, a maneira como podemos fazer isso também é acessar a ClassList, que nos dará acesso a um método add e também remove. Para fazer isso logo abaixo de nossos comentários, então, em vez de definir o atributo assim, que só substituirá o valor existente em vez disso, podemos acessar nossos elementos, use uma ClassList que em seguida, nos dá acesso a um método chamado add. Podemos adicionar várias classes separadas por uma vírgula. Salve isso e atualize. Agora, a classe verde agora foi aplicada. Mais uma vez, se verificarmos nossa ClassList, podemos ver que o valor de verde e ciano foi adicionado ao final dessas classes. O método remove funciona da mesma forma também. Acessamos a ClassList ou removemos. Desta vez, como uma string, podemos passar em qualquer uma de nossas classes que queremos remover. Vamos para azul, Salvar e atualizar. Agora, se acessarmos nosso elemento ou ClassList mais uma vez, o valor de azul agora foi removido desse elemento. Se quiséssemos ir ainda mais longe e em vez de adicionar valores individuais como este, também poderíamos definir uma variável contendo nossos classNames. Vamos remover o valor de verde e ciano e, logo acima, criar uma constante chamada classes e configurá-las como uma matriz. Primeiro de tudo, verde. Manteremos isso da mesma forma que antes adicionando ciano e, em seguida, podemos usar o operador spread, que é três pontos para extrair todos os valores da matriz de classes e colocá-lo diretamente dentro do método add. Salve, atualize, acesse nossa ClassList. Isso ainda funciona como antes. Na recapitulação, podemos selecionar qualquer elemento e definir o valor do texto interno com o método de texto interno. Também temos HTML interno para adicionar o conteúdo HTML dentro de um elemento. Também temos a propriedade id que pode ser usada para atualizar ou definir um novo ID. Além disso, temos controle total de nossos atributos. Podemos obter qualquer atributo existente , como uma classe ou a fonte. Podemos definir novos e também podemos remover quaisquer atributos também. Por último, de tudo, analisamos as aulas e as diferentes maneiras que podemos usar para adicionar, atualizar e também removê-las. Temos o className que podemos usar para recuperar os valores de nossas classes como uma string. Também podemos usar isso para adicionar uma nova classe também. Também temos ClassList, que é uma coleção de todos os nossos ClassNames. Isso também expõe alguns métodos que podemos usar para adicionar e também remover algumas classes. Finalmente, também analisamos uma maneira diferente de incluir classes que era criar uma matriz. Em seguida, podemos fazer uso dessas classes usando o operador spread. Em seguida, também veremos como podemos modificar diretamente as propriedades CSS usando JavaScript. 38. Alterando CSS de elementos: Nós abordamos como alterar o conteúdo de um elemento , como o texto interno, e também como adicionar, modificar e remover atributos. Outra coisa que também podemos fazer é modificar o estilo de qualquer um desses elementos. No projeto inicial que está Alterando um CSS de Elementos, vamos abrir isso dentro do navegador e depois pular para o console. Um iniciante é o mesmo exemplo simples que vimos no último vídeo. Temos o cabeçalho e também a imagem com certamente conteúdo de texto do cabeçalho, a classe verde, e também certamente imagem dinamicamente. Para trabalhar com os estilos, também podemos acessar nossos elementos, que é essa variável el. No Console, podemos acessar el.style. Você usa essa propriedade de estilo para ler valores, pois fica um pouco confuso. Sabemos que temos essa cor verde aplicada a partir daqui adicionando a classe, e essa classe verde é certamente a cor do texto. Podemos esperar isso de volta se selecionarmos a propriedade color, apertarmos “Enter” e, em vez disso, recuperarmos uma string vazia. A razão é porque, se selecionarmos a propriedade color assim, ela só retornará todos os estilos que adicionamos em linha em nosso HTML. Se eu clicar em “inline”, quero dizer, se formos para nossos elementos, vou definir os estilos em linha exatamente assim. Por exemplo, podemos definir a cor como vermelha. Agora, se atualizarmos isso, faremos o mesmo definindo a cor. Este retorna nosso valor vermelho de volta. Isso só lerá estilos em linha e ignorará quaisquer outras fontes, como qualquer um dos estilos que são colocados na seção principal ou qualquer um que seja colocado em uma folha de estilo externa também. Se você quiser saber o valor real de qualquer lugar, há um método disponível no objeto de janela global chamado GetComputedStyle. Primeiro, selecionaremos o objeto da janela e, em seguida, GetComputedStyle. Queremos saber o estilo de um determinado elemento, para que possamos passar essa variável se clicarmos em “Enter”. Isso nos devolverá um objeto retornado com todos os estilos disponíveis que se aplicam a esses elementos, ou se quiséssemos, poderíamos recuperar um único valor, como a cor. Isso não é algo que eu pessoalmente uso muito, mas está disponível, se necessário. De volta à nossa propriedade de estilo que usamos antes, que é esta aqui, também podemos usar isso para definir qualquer estilo também. Como exemplo, converteremos alguns dos estilos que você já tem na seção head dentro do script. Logo abaixo setAttribute selecione o elemento el.style propriedade, e podemos definir a cor como igual a um novo valor. Isso será uma string, e vou colocar em um valor RGB de 40, 141, 40. Feche isso. Não temos conflitos, também comentaremos esta classe verde, atualizaremos. Isso muda para ser uma cor verde e apenas para confirmar, podemos ver aqui que não temos a classe verde aplicada. Também podemos comentar isso apenas para garantir que isso esteja vindo da propriedade style que acabamos de adicionar. Vamos um pouco mais adiante. Se voltarmos aos nossos estilos no topo, temos esta seção de cabeçalho com quatro propriedades CSS diferentes. Definimos o tipo de exibição e também algumas propriedades flexíveis ao lado do padrão. Também podemos comentar esta seção e substituí-la por JavaScript. Para fazer isso, primeiro precisamos armazenar uma referência aos nossos elementos de cabeçalho, assim como fizemos com esta seção aqui. Vamos adicionar isso na parte inferior e armazená-lo dentro de uma constante chamada cabeçalho, e podemos selecionar isso da maneira que quisermos. Vou usar o QuerySelector como qualquer nome de elemento do cabeçalho e, em seguida, a primeira propriedade que precisamos selecionar é o tipo de exibição de flex. Basicamente, substituímos todos esses quatro valores usando a propriedade star na parte inferior. Acesse o cabeçalho, o estilo. Defina o tipo de exibição como igual a uma string de flex. Atualize o navegador. Podemos ver que a caixa flexível entrou em vigor mas ainda temos alguns problemas de alinhamento, e isso pode ser corrigido adicionando o restante das propriedades CSS. O segundo é header.style, e desta vez precisamos definir justify-content. Se dermos uma olhada em como fizemos isso em nosso CSS, usamos as letras minúsculas, e isso foi separado por uma vírgula. No entanto, embora um dos grandes Gotchas com JavaScript ao configurar o CSS, também é que precisamos converter isso para ser CamelCase. Não podemos usar o justificy-content. Vemos imediatamente que o editor de texto destacou um problema, e precisamos converter isso para ser CamelCase. Isso significa que o conteúdo começa com um C, e então podemos definir isso para nossa string que é espaço-entre. Próximo caminho; itens de alinhamento que, assim como justify-content, também precisam ser convertidos para serem CamelCase. Isso também foi definido para ser central, então configure isso e o valor para isso é central. Finalmente, você tem o preenchimento. O valor de preenchimento se dermos uma olhada, isso era zero e alguns pixels. Passe isso como uma string e confira isso no navegador. Atualizar. Podemos ver nosso preenchimento ao redor do lado de fora do texto, e também o alinhamento foi corrigido com essas propriedades flexíveis. Essa forma de configurar o CSS tem muitos bons casos de uso. Como mencionado no último vídeo, pode ser útil para mostrar e ocultar conteúdo para mudança no layout e também para alterar o tema do nosso site. Por exemplo, podemos ter um fundo que adiciona algumas propriedades CSS, uma alternância entre o modo claro e escuro. Poderíamos adicionar animações CSS. Se o usuário clicar em alguns deles, poderíamos alternar esquemas de cores diferentes e muitas outras possibilidades. Também vale a pena saber que adicionar estilos como esse com JavaScript tem a mesma prioridade na cascata que um estilo embutido. Essa técnica substituirá qualquer folha de estilo externa existente e também qualquer estilo que você tenha na seção Cabeça. Para ver isso, podemos cancelar o comentário da seção verde. Em seguida, podemos reaplicar isso com nosso JavaScript removendo o comentário setAttribute. Além disso, se mudarmos a cor para ser vermelha; então terei na cor RGB, coloque no valor vermelho. Agora, o que teremos é uma classe de verde sendo aplicada usando setAttributes, que é de fato vermelho e, em seguida, definimos essa cor verde logo abaixo. Salve e atualize. Ainda vemos o texto verde por cima, e isso acontece porque isso foi criado usando uma propriedade de estilo JavaScript que carrega um alto peso na adição de uma classe. Também podemos confirmar isso se movermos a propriedade star para estar apenas com essa configuração de classe. Certifique-se de que não tem nada a ver com o pedido. Salve e atualize, e ainda podemos ver que essa cor verde foi aplicada. Se você está se perguntando como adicionar várias propriedades CSS de uma só vez, também podemos definir isso usando um objeto. Vamos ver isso com mais detalhes na seção Objeto, mas por enquanto é assim que podemos recuperar e também definir o estilo CSS usando JavaScript. Definimos nossas propriedades de estilo como faríamos em uma folha de estilo regular, mas lembre-se quando uma propriedade é várias palavras, como cor de fundo e conteúdo justificativo também precisamos converter isso para ser CamelCase. 39. Criando novos elementos: Junto com todas as modificações que temos feito nos elementos existentes, também podemos criar as nossas próprias também. Na verdade, podemos até criar seções ou uma página da Web completa com conteúdo HTML dentro do JavaScript. Como você pode imaginar, isso abre muitas portas. Um meio de conteúdo pode ser mais dinâmico e também mudar mesmo depois que a página terminar de carregar. Isso abre tantas possibilidades e alguns exemplos podem ser mostrar apenas o conteúdo para o usuário se ele estiver logado. Poderíamos obter todos os pedidos anteriores dos usuários e criar uma lista HTML com base nessas informações. O usuário também pode adicionar um novo item de tarefas e a lista é infinita. É limitado apenas à nossa imaginação ou ao nosso uso. Volte para o editor e vá o arquivo de criação de novos elementos. Na parte inferior, temos alguns comentários dentro do script para nos guiar através deste vídeo. Abra isso no navegador e antes de irmos em frente e criarmos um novo elemento, quero mostrar algo chamado escrita de documentos. Como parece, isso grava diretamente no documento que é nossa página da web no script, acessa o documento e um método chamado write. Como este é um método, abrimos os colchetes assim e, em seguida, podemos passar uma string que você deseja exibir dentro do documento. Vou salvar e recarregar o navegador. Na parte inferior, podemos ver este texto foi colocado na parte inferior, além de inserir uma sequência simples de textos como este. Também podemos injetar algum HTML. Podemos envolver isso dentro de algumas tags de elemento, como H1, salvar e mais para o navegador e o cabeçalho de nível maior agora entrou em vigor. Esse método é mais útil, coisas como testar em vez realmente adicionar qualquer conteúdo ou página. Uma das razões para isso é porque se a página tiver terminado de carregar, ela substituirá todo o conteúdo existente. Podemos ver isso melhor se atrasarmos gravação do documento para aguardar a página para terminar o carregamento. Para fazer isso, temos um método disponível chamado setTimeout. Não se preocupe se você não viu isso antes, é uma maneira de executar uma função após um certo tempo de atraso. Vamos discutir isso mais adiante no Curso 2. O que vamos fazer é comentar a gravação do documento e, em seguida, criar uma função setTimeout, que dentro vai assumir uma função. Podemos escrever a função dentro da qual será executada em qualquer estilo que quisermos. Podemos usar a sintaxe de função tradicional ou podemos passar uma função de seta. Estes eram os colchetes assim. Ótima seta, e como estamos usando apenas uma única linha, não precisamos adicionar as chaves ou uma instrução de retorno. Em vez disso, podemos colocar dentro uma gravação de documento como acima. Então, dentro daqui, podemos passar uma string ou algum conteúdo HTML. Para onde foi meu conteúdo? Então logo após a gravação do documento, depois vírgula, e então este é o segundo argumento para nossa função setTimeout. A primeira é a função real que queremos executar e depois separá-la por esta vírgula, onde teremos o tempo de atraso em milissegundos. Se colocarmos isso em 3.000, essa função será executada após três segundos. Vamos tentar isso se agora salvarmos e atualizarmos. No momento, não vemos nenhum documento na parte inferior, mas depois de três segundos, nossa função será executada e substituirá todo o conteúdo existente. O fato de isso acontecer significa que muitas vezes não é uma boa maneira de adicionar conteúdo à nossa página da web. Para isso, teremos alguns métodos mais dedicados. Muitas vezes, quando criamos elementos, isso acontece em várias partes. Se criássemos um elemento de texto, por exemplo, precisamos fazer isso em várias partes. Primeiro, criaremos um elemento P e armazenaremos isso em uma variável e, em seguida, criaremos o nó de conteúdo de texto. Então precisamos mesclar esses dois juntos. Neste arquivo de inicialização HTML, teremos uma nova seção HTML logo acima. Temos o invólucro de seção. No interior, temos um título de nível três. Temos essa div com a classe de conteúdo e, em seguida, aninhados dentro temos mais duas divs aninhadas. A primeira contém uma imagem, e a segunda contém um elemento P e também um botão de compra. Para ter muita prática criando nossos elementos, vamos recriar esta seção completa, mas desta vez usando JavaScript. Como guia, usaremos os comentários na parte inferior e poderemos remover esses exemplos de gravação de documentos anteriores. Seguindo esses comentários, vamos começar criando o cabeçalho da seção, que é esse H3 sobre o topo. Agora, continuaremos em todo o resto do conteúdo. A maneira como podemos criar um novo elemento é acessando os documentos. Em seguida, usando um método chamado criar elementos. Pois seus elementos são bem simples, tudo o que precisamos fazer é passar uma string com o nome da tag de elementos. Por exemplo, precisamos criar um cabeçalho de nível 3, então fazemos isso e, em seguida, podemos armazená-lo dentro de uma variável. O meu será chamado de cabeçalho da seção e definirá isso igual ao nosso novo elemento. Como agora temos uma referência variável, podemos ver isso se formos até o console. Em seguida, acesse isso pelo nome da variável. Passando este cabeçalho de seção, que retorna um cabeçalho vazio de nível 3. Como mencionado anteriormente, quando criamos novos elementos, isso geralmente ocorre em duas partes. Teremos esse elemento que está vazio e, em seguida, também precisamos criar o conteúdo do texto dentro. Lembre-se, mais cedo, quando olhamos para o DOM, disse que todos os objetos dentro dessa árvore atuam como nós. Este exemplo mostra um nó de elemento na forma de nosso H1, em seguida, um nó de texto com o texto de hey, temos a primeira parte que é o nó do elemento, que é nosso H3. Agora precisamos inserir algum conteúdo de texto. Para fazer isso, temos um método disponível chamado CreateTextNode. Esse método também está disponível no objeto do documento. Acessamos o ponto de documento CreateTextNode. Dentro, passamos uma sequência de texto que você deseja inserir. Como estamos replicando esta seção, podemos copiar o conteúdo de dentro. Coloque isso em. Armazene isso dentro de uma variável, digamos que o texto do cabeçalho. Atualize o console e também veremos isso se digitarmos o texto do cabeçalho. Temos nossa string de texto aqui. Isso agora significa que temos dois nós separados. Temos nosso nó de elemento e também nosso nó de texto. Mas precisamos de uma maneira de mesclá-los juntos. A maneira de fazer isso é primeiro acessar o nó pai, que é o cabeçalho da seção, pegar essa variável e, como esse é um elemento, podemos acessar um método chamado appendChild. Em seguida, o AppendChild aceitará a criança que deseja mesclar, que é o texto do nosso cabeçalho. Coloque isso, salve e agora volte para o console, atualize. Vamos testar o cabeçalho da seção. Agora, em vez de apenas retornar um cabeçalho vazio de nível 3, isso agora também contém nossa string aninhada dentro. Isso agora completa nosso título e o resto será muito parecido. Vamos até a imagem e, assim como antes, usamos o ponto de documento CreateElements. Desta vez, o nome do tipo é IMG. Armazene isso dentro de uma constante chamada ImageElement. Como seria de esperar, uma imagem é um pouco diferente porque não precisamos inserir nenhum dos nós de texto dentro. Em vez disso, o que precisamos fazer é definir os atributos. Precisamos definir a fonte e também o texto alternativo também. Logo abaixo disso, acesse nossos elementos de imagem. Podemos chamar um método chamado setAttributes, que leva em duas coisas. O primeiro é uma cadeia de caracteres do nome do atributo, que é fonte e, em seguida, o conteúdo que eles irão arquivar caminho de burger.jpg. Duplique isso e o segundo é o texto antigo com a string, digamos imagem de hambúrguer. Também podemos testar isso no navegador acessando nossos elementos de imagem. Atualize, acesse os elementos da imagem, e isso parece exatamente o que precisamos para nossos elementos de imagem. Vamos continuar. O texto de informações, este é um elemento P. Esta seção aqui e enquanto estamos aqui em cima, vamos copiar o texto Lorem ipsum. Depois, criaremos o botão e trabalharemos do lado de fora em nossos contêineres. Devemos saber o que fazer aqui. Acessamos os documentos, criamos elemento. O elemento é o elemento P e, em seguida, podemos armazenar isso dentro de uma constante chamada InfoSectionElement. O elemento da seção info também será usado em um nó de texto assim como o cabeçalho acima. Comece isso dentro de uma constante e mantenha isso consistente. Vamos dizer que InfoSectionText é igual a documents.createTextNode. Vejo agora uma string que acabamos de copiar de antes, que é o texto Lorem ipsum. Podemos ver imediatamente que temos um erro assim porque precisamos ter certeza de que tudo isso está na mesma linha. Só podemos inserir texto de várias linhas se for substituir essas aspas simples pelos backticks. Como antes, temos nossos dois elementos independentes e, em seguida, precisamos chamar AppendChild no pai para mesclar esses dois juntos. O InfoSectionElements.appendChild. Eu disse que vou enviar texto, que é InfoSectionText. Vamos experimentar isso. Copiaremos nosso contêiner pai, colaremos isso e atualizaremos o TextContent agora está aninhado dentro. Em seguida, temos esse botão. O botão seguirá um padrão muito semelhante a essa informação, então copiaremos toda essa seção, colaremos isso, mas é claro, precisamos alterar o elemento p para ser um botão. O texto vai ser, compre online. Ainda precisamos anexar o elemento filho ao botão, mas precisamos alterar esses nomes de variáveis. Vamos dizer o botão Elemento, depois o botão Texto. Na parte inferior, selecionaremos nossos elementos de botão, que são os pais e, em seguida, anexaremos o botão Texto. Vamos experimentar isso. Atualize, atualize isso e cole isso, e há um botão. Tudo bem, e se voltarmos, agora até nossa seção HTML, criamos todos os elementos de texto. Temos o H3, temos nossos elementos de imagem, temos nosso P e também o botão. A última coisa que precisamos fazer é criar nossos invólucros. Temos uma div aqui, temos uma aqui, um invólucro para ambas as seções e, finalmente, o invólucro de seção externa. Como em todos os outros elementos, vamos usar CreateElements. Vou copiar esta linha um, colocar isso embaixo dos invólucros. Este é o invólucro de seção, que é o elemento principal torno de todo esse conteúdo. Este era um elemento de seção. Então vou duplicar isso mais três vezes. O resto desses elementos será div. Mas eles precisam ter alguns nomes exclusivos, então a seção um será o ContentWrapper. Este é o conteúdo aqui. Nossos dois últimos são os que cercam a imagem e, em seguida, o que envolve o texto e o botão. Então, vamos ligar para o número 3, o ImageDivWrapper. Então o último estava em torno do texto e do botão, então chamaremos isso de TextDivWrapper, que nos leva até esta seção que está colocando tudo junto. O que precisamos fazer agora é basicamente mesclar todos os elementos que você criou acima dentro de todos os invólucros. A maneira de fazer isso também é usar o método appendChild. Começaremos por dentro e resolveremos nossa saída. Primeiro de tudo, trabalharemos com a seção de informações e inseriremos os elementos p e também o botão. Até o fundo, o que vamos fazer é selecionar nosso TextDivWrapper all AppendChild. Então precisamos fazer isso duas vezes. O primeiro que precisamos passar nos elementos da seção de informações. elemento da seção de informações é o texto, que criamos aqui. Então também precisamos fazer isso pela segunda vez, mas este será para o nosso botão. O botão é um nome de variável buttonElement. Podemos duplicar isso, inserir nossos elementos de botão. Antes de prosseguirmos, podemos ver isso dentro do console se crescermos nosso TextDivWrapper. Cole isso em. Como esperado, isso contém um elemento div e, em seguida, abra isso, temos nosso elemento p e também o botão. Ao lado do ImageDivWrapper. Este é apenas um elemento aninhado no interior. Este é o nosso elemento de imagem. Muito simples. Faça algum espaço. Chame o método appendChild e, em seguida, podemos inserir nossos elementos de imagem. Agora faça backup em nosso HTML. Temos esta seção criada aqui e também esta aqui. Precisamos subir mais um nível e acessar nosso invólucro de conteúdo e, em seguida, inserir os dois DivWrappers. Selecione nosso invólucro de conteúdo, acesse AppendChild e, em seguida, precisamos inserir nosso TextDivWrapper e também a imagem em. Vamos começar com o texto e, em seguida, vamos duplicar isso. Novamente, dentro do invólucro de conteúdo, vamos colocar em nosso ImageDivWrapper. Mais uma vez, antes de prosseguirmos, pegaremos nosso ContentWrapper e garantiremos que ambos os divs estejam aninhados dentro. Colar. Abra isso. Há nossas duas divs lá dentro. O primeiro é o texto e o segundo é o elemento de imagem. Bom. Estamos quase lá, agora, se voltarmos, vamos ver o que precisamos fazer a seguir. Temos o cabeçalho de nível 1 e também esta div de conteúdo completo aninhada dentro de nossa seção. Precisamos pegar uma seção e fazer mais dois métodos appendChild. Esta seção era o invólucro de seção chamado AppendChild, e o primeiro filho que precisamos inserir é o cabeçalho da seção. O cabeçalho da seção lembra era nosso cabeçalho de nível 3, e então precisamos duplicar isso, e o segundo elemento é nosso wrapper de conteúdo. Este não deve ser todo o nosso conteúdo agora em vigor, e a última coisa a fazer para finalizar esta seção é adicionar nossas três classes. Temos a classe de conteúdo, temos a seção de imagem e também a seção de informações também. Estes são todos adicionados aos nossos divs. Então, vamos até o fundo, e logo abaixo de adicionar classes, a primeira é o invólucro de conteúdo. Podemos adicionar a classe com atributos definidos. O atributo de conjunto leva nele duas coisas. O primeiro é o nome do atributo, que é classe e, em seguida, o nome da classe do conteúdo. Duplique isso mais duas vezes, e a segunda foi para nosso ImageDivWrapper, esta imagem. Vamos dar uma olhada. O nome da classe da nossa imagem era este aqui. Volte para baixo. image_section. O terceiro e último é para o nosso invólucro div de texto. Este TextDivWrapper é a seção de informações. Vamos pegar isso e colar isso como nossa corda. Bom. Vamos dar este teste final dentro do navegador e precisamos testar o invólucro de seção, que é o invólucro principal em torno de todo o conteúdo. Nós carregamos, adicionamos isso. Abra isso e o que vou fazer é rolar até nosso HTML e garantir que isso seja exatamente o mesmo. Para começar, temos o wrapper de seção, que contém dois elementos, o título de nível 3, que está lá, a div, a classe de conteúdo e, em seguida, todo o conteúdo adicional é aninhado dentro. Abra isso. Isso contém duas divs. O primeiro tem a seção de classe de informações e a segunda é a seção de imagem. Temos a seção de informações e, em seguida, a imagem. Então, só precisamos ter certeza os nossos são o contrário. Nós precisamos fazer é trocar a posição desses dois elementos para garantir que nossa imagem esteja logo acima do nosso texto. Economize e tentaremos isso mais uma vez. Abra o invólucro de seção no contentdiv. Bom. Agora estamos de volta aos trilhos. Temos a seção de imagem na parte superior. Dentro disso, contém os elementos da imagem. A seção de informações na parte inferior, contém nossos elementos p e também nosso botão. Bom. Isso está tudo no lugar, e a última coisa a fazer no próximo vídeo é ver algumas maneiras que podemos usar para adicionar isso à nossa página principal. 40. Adicionando elementos à página: Este vídeo continua a partir do último vídeo, que está adicionando elementos à página. Anteriormente, replicamos esta seção aqui, usando JavaScript criando todos os elementos um a um. Em seguida, adicionamos esses elementos aos vários contêineres e, quando paramos com esta referência de seção completa, sua lista de referência era o wrapper de seção. Isso é armazenado dentro de uma variável, e podemos ver isso se digitarmos isso dentro do console. Abra isso. Já adicionamos isso à página que vemos, mas isso está dentro do nosso HTML. O que vamos fazer, então não ficamos confusos, é comentar esta seção, atualizar e agora vamos inserir isso dinamicamente usando JavaScript. Vamos pensar sobre o que realmente queremos fazer aqui, temos esta seção de corpo sobre o topo, e a seção aqui que você criou é um filho direto desse corpo, assim como o cabeçalho e os elementos da imagem. O que precisamos fazer é primeiro começar selecionando o corpo, rolá-lo para o nosso roteiro e podemos acessar isso com document.body. Dois métodos comuns que você tem disponíveis para uso são anexar e também prepend. Prepend adicionará o novo conteúdo no início, e o acrescentará ao final. Vamos começar dando uma olhada no prepend. Este é um método, então abrimos os parênteses, agora queremos adicionar nosso invólucro de seção. Digamos isso e atualize o navegador, e isso é adicionado ao início da seção do corpo. Também podemos alterar isso para ser anexado e esta nova seção será adicionada diretamente ao final do corpo. Outra coisa que também podemos fazer com anexar, em vez de adicionar um único elemento como este, é adicionar vários elementos à nossa página, e também podemos adicionar diferentes tipos de conteúdo também. Por exemplo, podemos adicionar um JavaScript como string de textos, que é chamado de DOMString. Digamos que qualquer texto aqui dentro e, em seguida, separá-lo por uma vírgula podemos adicionar várias informações, como várias partes de texto ou vários elementos, então vamos também dizer que queremos adicionar um elemento, vamos para o nosso botão, também nosso ImageElement. Podemos adicionar quantos desses gostaríamos. Agora, salve e atualize isso. Podemos ver nosso texto, podemos ver nosso botão, nossa imagem e o DOMString final no final. Semelhante a isso, também temos um método chamado appendChild. Vamos dar uma chance a isso. Agora, se salvarmos e depois atualizarmos isso, veremos um erro imediatamente dentro do console. Vemos esse erro porque há algumas diferenças entre como append e o appendChild lidam inserção de elementos ou nós. AppendChild só pode ser usado em um único nó ou em um único elemento de texto. Se eu tiver mais de um para adicionar, o método append é o caminho a seguir. Além disso, como você vê aqui, AppendChild não pode ser usado com DOMStrings, então não podemos usá-lo para inserir nós de texto como fizemos antes. Além disso, apenas o método appendChild nos devolve um valor de retorno, e esse valor de retorno é um nó recém-adicionado. Com isso em mente, volta à nossa área em que estávamos antes. A razão pela qual temos essa área é por dois motivos, é porque estamos tentando adicionar alguns DOMStrings e também o número de elementos que estamos tentando adicionar. Se reduzirmos isso para um único elemento, vamos para o ButtonElement, agora não devemos ver um problema. O próximo método para cobrir é inserido antes. Inserir antes nos dá um pouco mais de flexibilidade em onde queremos colocar nosso novo nó, preencher e vamos pegar nosso cabeçalho, por exemplo. Para isso, imagine que quiséssemos colocar um novo conteúdo, que é um novo elemento entre o título e o nav, então nesta linha aqui, os métodos que abordamos até agora apenas colocam elementos em no início ou no final. À medida que o método insert before soa, ele pode ser usado para inserir nosso novo elemento antes desse nav, vamos removê-lo primeiro e depois ir para o nosso script. Primeiro, precisamos selecionar o pai. No nosso caso, o pai é o cabeçalho, então Document.querySelector, solte o cabeçalho e instale isso dentro de uma variável, e também como queremos inserir esse elemento antes do nav, também precisa de uma referência a isso também, por isso está dentro de uma variável chamada nav. Defina isso igual a Document.querySelector, e desta vez selecionaremos nosso nav. Agora temos acesso a dois elementos, primeiro lugar, o cabeçalho é o elemento pai, e o nav é o elemento onde queremos inserir um novo nó antes, e para isso, selecionamos o pai que é o cabeçalho, o nome do método, que é inserido antes e, em seguida, dentro dos colchetes, precisamos passar duas coisas. Primeiro, é o elemento que você deseja inserir, e vamos reutilizar qualquer um desses elementos de cima. Vamos para os elementos do botão e, como o nome do método de inserção antes sugere, precisamos adicionar o nome do elemento onde queremos inserir esse botão antes e, no nosso caso, é a navegação elemento. Vamos experimentar isso, atualizar o navegador. Agora nosso botão foi inserido antes dessa navegação. Isso funciona selecionando um pai que é o cabeçalho e, em seguida, adicionando um elemento dentro. Outro método que também funciona no pai, é o ReplaceChild. Como parece, ele substituirá um dos elementos dentro do pai por um novo que especificamos. Agora vamos comentar isso, e também podemos usar o cabeçalho como nosso pai mais uma vez. O nome do método, que é ReplaceChild. ReplaceChild também recebe dois valores, o primeiro é os novos elementos que queremos adicionar. Mais uma vez, vamos para o botão como exemplo. Então o segundo valor é o elemento antigo, que queremos substituir. Vou usar o nav para este exemplo, atualizar. Agora, a navegação foi removida e substituída por este novo ButtonElement. Essas são algumas maneiras diferentes de adicionar novos nós ou elementos a uma página da Web usando JavaScript e, para isso, vou remover as seções aqui. Comente este exemplo e vamos anexar o SectionWrapper de volta à página, que foi uma nova seção que criamos no último vídeo. Bom. Isso está agora na página, e no próximo vídeo, vamos descobrir como podemos clonar elementos e também como removê-los. 41. Clonando e removendo elementos: Vamos iniciar este vídeo observando elementos de clonagem, que já temos. Os arquivos iniciais na clonagem e remoção elementos terão a mesma configuração do vídeo anterior. Vá até o fundo e logo abaixo deste comentário aqui, a primeira coisa que precisamos fazer para clonar um elemento é realmente selecionar um. Você pode escolher qualquer elemento que desejar. Mas, por simplicidade, vou usar um dos elementos de botão que você já possui. Vamos selecionar isso. Agora, neste nó de elemento de botão, podemos chamar um método chamado nó clone, adicionar os colchetes e instalar isso dentro de uma variável chamada botão clone. Agora, se salvarmos isso e passarmos para o navegador nas ferramentas do desenvolvedor com o botão direito do mouse e inspecionar no console. Agora, usando esse nome de variável, digite isso dentro do navegador, é incerto. Agora retornamos para visitar este elemento de botão. Se olharmos atentamente entre este botão, não veremos nenhum conteúdo, como o texto dentro. Você pode olhar para o botão, você pode ver aqui nós criamos o nó de texto comprar online e , em seguida, anexamos isso ao nosso botão. Por padrão, usamos nós clonados, ele clonará apenas os nós do elemento e não qualquer conteúdo aninhado dentro. Se quiséssemos o conteúdo dentro, precisamos passar um valor booleano verdadeiro. Isso copiará todo o conteúdo de dentro. Podemos ver isso, se mais uma vez digitarmos nosso botão de clone, pressione Enter. Agora temos o conteúdo do texto de dentro. Uma coisa a observar ao clonar é se estivermos clonando um elemento que tenha um ID exclusivo, com IDs sempre queremos que eles sejam únicos. Não queremos ter dois elementos com o mesmo valor. Além disso, aqui só criamos esse elemento de botão. Ainda não adicionamos isso ao DOM. Vamos agora dar uma olhada em como podemos remover elementos usando um método chamado remover comentários filhos, vou clonar. O método de remoção é bem simples. Tudo o que precisamos fazer é selecionar nosso nó, rolar para cima. Para este exemplo, vou remover o cabeçalho da seção, o cabeçalho da seção é um cabeçalho de nível 3 que foi criado aqui, instalado dentro dessa variável. Selecione isso. O primeiro método que vamos dar uma olhada é remover, pegar isso, e este é o título aqui. Se atualizarmos isso, o cabeçalho agora foi removido. Além disso, além desse método de remoção, também podemos fazer isso no pai. Mas se rolarmos até nosso HTML, se dermos uma olhada no nosso cabeçalho de nível 3, aqui, podemos ver que o pai é esta seção. Em seguida, rolando para baixo para o nosso JavaScript onde realmente criamos isso, temos uma referência a esta seção chamada wrapper de seção. Estes são os pais. Vamos comentar isso. Pegue o invólucro de seção, vamos chamá-lo de método remove child. Em seguida, colocamos dentro de uma referência, o elemento filho que você deseja remover. O elemento filho que está aninhado dentro é o cabeçalho desta seção. Agora, se salvarmos isso e atualizarmos o navegador, podemos ver que o cabeçalho da seção ainda foi removido. Mas desta vez acabou de fazer de uma maneira um pouco diferente. Até agora você deve estar começando a ter uma boa compreensão de como podemos usar o JavaScript para interagir com o DOM. Muitos desses processos seguem um padrão semelhante. Normalmente, temos que selecionar um elemento, podemos armazená-lo em uma variável. Em seguida, chamamos um método para executar uma determinada ação. Podemos fazer coisas como remover elementos. Podemos adicionar um elemento sempre que. Podemos criar e modificar elementos para construir nosso HTML exatamente como queremos que ele seja. Em seguida, você terá a chance de colocar tudo isso em prática com um mini desafio. 42. Mini desafio: Bem-vindo a este mini desafio. O que eu gostaria que você fizesse agora é experimentar algumas coisas por conta própria o que você aprendeu até agora. Entre na pasta desta lição, que é o Mini Desafio, e depois abra isso dentro do navegador. Você verá dentro do navegador que temos uma nova seção na parte inferior. A tarefa que eu gostaria que você fizesse é recriar esta seção usando JavaScript, assim como fizemos anteriormente nos vídeos anteriores. Para esse desafio, também mudei todos os estilos existentes para sua própria folha de estilo dedicada. Na página de índice, se rolarmos para baixo até a parte inferior, podemos ver uma nova seção que é esta aqui. Este tem a classe de receitas, e a dele é uma seção que eu gostaria que você recriasse usando JavaScript. Depois de terminar, você pode remover esta seção do HTML ou comentar para referência futura. Como eu já adicionei o estilo para este projeto, tudo o que você precisa fazer para que isso inicie é adicionar essas classes cada um desses elementos. Este vídeo não tem nenhuma orientação, é apenas uma chance para você colocar tudo o que aprendeu em prática, como criar novos elementos, criar rappers, adicioná-los, adicionar nomes de classes, e se você mantê-los organizados em diferentes seções, como fizemos abaixo. Se você não teve nenhum problema, como pode ver, também mantive o código anterior da última seção, para que possamos usá-lo como referência, se necessário. Experimente. Boa sorte e lembre-se de que não há maneira certa ou errada de fazer isso. O objetivo é simplesmente obter alguma prática por conta própria e replicar esta seção que já temos. 43. Looping com elementos de DOM: Bem-vindo de volta. Espero que o último mini-desafio tenha corrido bem para você e você criar uma nova seção usando JavaScript. Ao criar uma pequena quantidade de elementos, as coisas podem ficar bastante repetitivas. Imagine criar uma lista com até cinco ou 10 itens, criar todos os elementos do item da lista, adicionar o conteúdo e, em seguida, adicionar esses elementos aos pais serão muitas linhas de código. Ou se quiséssemos adicionar os mesmos nomes de classes e muitos elementos diferentes, novamente, isso é muito trabalho e repetição. Para ajudar com isso, podemos usar um loop, embora tenhamos muito mais loops em uma seção posterior. Já analisamos alguns exemplos de loop na seção de matriz. Usamos os métodos de matriz que foram mapeados para cada um, e eles executarão uma função para cada item na matriz. Essa era uma forma de reduzir nossa repetição e isso também pode ser aplicado a qualquer coisa como nossos elementos DOM. Neste vídeo, vamos entrar arquivo correto e abri-lo dentro do navegador e, em seguida, rolar para baixo até seguida, rolar para baixo até nossa página de índice até a seção de cabeçalho, e aqui temos uma lista não ordenada. Como isso tem vários elementos de item de lista, vou usar isso e criá-los com um loop. Os loops podem ser usados para criar esses itens. Podemos pegar todos esses itens, podemos fazer alterações, adicionar classes e também remover algum conteúdo também. Vamos até nossa seção na parte inferior. Logo abaixo da seção de loop, podemos começar pegando todos os itens da nossa lista. Nada que não vimos antes. Vamos pegar o documento e, em seguida, podemos pegá-los com o seletor de consulta todos. Lembre-se de que usamos seletor de consulta, pois temos vários itens de lista, deslizamos pelo nome da tag e armazenamos isso dentro de uma variável chamada itens de lista. Verifique se isso funciona. Dentro do navegador, podemos abrir o console e acessar essa variável. Digite itens da lista e podemos ver retornado para nós é uma lista de nós contendo nossos dois elementos de lista. Nossos dois elementos da lista já têm a classe de outro item. Se você tivesse vários elementos de lista, adicionando neste cluster, cada um quando os criarmos, será um processo realmente repetitivo. Se nós os adicionássemos manualmente, o que precisaríamos fazer é acessar nossos itens de lista. Como temos vários itens, precisamos selecioná-los pelo número do índice. Em seguida, podemos acessar a propriedade de lista de classes , o método add. Então podemos ter uma tela que é um novo nome de classe. Agora salve isso e atualize e mais uma vez, acesse os itens da lista. Isso adicionaria a classe em linha ao nosso primeiro elemento. Como mencionado, fazer isso para muitos itens de lista diferentes tornaria as coisas realmente repetitivas, então vamos dar uma olhada em como podemos ajudar com isso adicionando um loop. O JavaScript tem muitos tipos diferentes de loops disponíveis. Para um relativamente simples que podemos usar para este caso é um loop chamado de. Vamos comentar essa linha e logo abaixo, começamos isso com a palavra-chave for. Então, dentro daqui, vamos digitar o const do item da lista. O que estamos fazendo aqui é que estamos selecionando nossos itens de lista que contém vários elementos e, em seguida, vamos criar uma nova constante chamada item. Podemos acessar essa variável de item em cada loop. Para o primeiro loop, a variável item será nosso primeiro elemento. Para o segundo loop, item seria equivalente ao nosso segundo elemento, e assim por diante. Abra as chaves e dentro daqui, podemos adicionar o código que você deseja repetir para cada um dos nossos elementos. Usando o mesmo exemplo acima, em vez de adicioná-lo ao nosso primeiro item assim, podemos acessar nossa variável de item e, em seguida, fazer exatamente o mesmo logo depois. Copie esta seção e cole-a em. No primeiro loop, isso adicionará a classe inline ao primeiro item e, em seguida, repetirá para o segundo item, isso e mais para o console. Este item não está definido e isso só precisa ser um item de lista. Isso deve fazer com que os erros desapareçam. Agora, mais uma vez, podemos acessar nossos itens de lista. Podemos ver que esses dois elementos agora têm a classe de inline. Não salvamos muito código por ter apenas dois itens, mas você pode ver como isso seria útil se tivéssemos talvez cinco, ou 10, ou até mais elementos para aplicar isso. Um tipo alternativo de loop, em vez de usar esse loop geral for of é acessar um dos métodos internos do JavaScript. Lembre-se anteriormente quando mencionamos que o seletor de consulta retorna uma lista de nós. Com essa lista de nós, também temos acesso a alguns métodos. Podemos vê-los se descermos para o protótipo e abrirmos isso, temos acesso a vários outros métodos, como para cada um. Este será o loop que agora vamos olhar. Você faz isso, vamos comentar nosso loop for of. Logo abaixo, podemos acessar nossos itens da lista. O método incorporado que acabamos de mencionar foi para cada um. Dentro daqui, passamos uma função que você deseja executar para cada um dos nossos valores. Cada um de nossos valores será armazenado dentro de uma variável chamada item. Em seguida, abra as chaves encaracoladas, faremos exatamente o mesmo que acima. Esfregue nosso item e adicione o nome dessa classe, salve isso e atualize o navegador, acesse os itens da lista. Nosso nome de classe de inline ainda está sendo aplicado a ambos os elementos. É assim que podemos modificar, mas e a criação de novos elementos, como um item de lista completa? Bem, vamos dar uma chance a isso. Primeiro, antes de fazermos isso, para evitar confusão, se voltarmos para a nossa lista de itens na seção principal, comente esses dois elementos. Em seguida, podemos ir em frente e recriá-los usando JavaScript. De volta para baixo, comente este exemplo. Então, logo abaixo disso, podemos começar com um item de lista regular, como de costume. Para fazer isso, acesse o documento. Em seguida, criamos nosso item de lista com o método create element. Passando na cadeia de LI. Como precisamos também modificar isso, podemos armazenar isso dentro de uma constante chamada elementos de lista. Então precisamos criar nosso nó de texto para nosso primeiro elemento. Mais uma vez, armazene isso dentro de uma constante e diremos texto da lista. Isso é igual aos documentos, então usamos o método chamado criar nó de texto. O texto do nosso primeiro item da lista era nossos hambúrgueres. Em seguida, podemos mesclá-los acessando primeiro os pais, que são elementos da lista. Em seguida, podemos adicionar nosso texto usando o método filho desativado. Como já vemos, também precisamos adicionar uma classe a cada um desses itens da lista. Pegue os elementos da lista. Em seguida, Classlist.add e o nome do nav-item. Este é o primeiro item de lista completo criado. Agora, tudo o que precisamos fazer é adicionar isso à lista não ordenada. Vamos pegar isso com documents.QuerySelector. Precisa selecionar a lista não ordenada. Em seguida, use appendChild para adicionar nosso elemento de lista. Agora, salve e atualize o navegador, e restabeleceu nosso primeiro link de nossos hambúrgueres. Como seria de esperar, precisamos replicar todas essas linhas de código para cada um de nossos itens de lista. Só temos dois links, mas isso ainda repete muito código. Vamos aproveitar um loop para nos ajudar com isso. Mas primeiro, na verdade, precisamos de algo para percorrer. Para isso, vamos criar uma constante chamada links. Os links serão uma matriz contendo os valores de texto de cada um de nossos itens de lista. O primeiro será nossos hambúrgueres, separados por uma vírgula. O segundo link era para a história. Vamos usar o loop for of para fazer loop sobre todos esses links. Vamos dizer link const de links e inclui todas essas cinco linhas de códigos abaixo. Mova estes para dentro do nosso loop for of. Se inicialmente salvarmos isso e passarmos para o navegador, esse mesmo código será repetido para cada um dos valores na matriz. Também precisamos alterar o conteúdo do texto do segundo link. A maneira de fazer isso é em vez de ter um texto codificado dentro do nó de texto, o que vamos fazer é remover isso e substituí-lo pelo valor do link. O valor do link será nossos hambúrgueres no primeiro loop e, em seguida, o texto do histórico no segundo loop. Substitua isso pelo navegador e atualize. Há nossos dois links agora em vigor. Assim como antes, quando temos apenas dois links, não economizamos uma grande quantidade de código. Mas os benefícios ficariam muito maiores se tivéssemos mais de dois itens de lista para criar. Como alternativa, os arrays também têm acesso para cada método. Também poderíamos usar isso se quiséssemos. Tudo o que precisamos fazer é remover esta seção aqui, pegar nossa matriz que está armazenada na variável links. Então podemos fazer uso de cada método. Lembre-se, para cada um, executaremos uma função para cada valor na matriz e, em seguida, armazenaremos esse valor dentro de uma variável. Lembre-se que os aparelhos encaracolados entram daqui. Precisamos modificar nosso código existente, mover essas duas chaves de fora. Pegue essas cinco linhas de código. Mova isso para dentro do nosso loop. Atualize, ele obterá exatamente o mesmo resultado. Os loops são uma ótima maneira de executar tarefas repetitivas na programação. Também veremos mais alguns tipos de loops mais tarde no curso. 44. introdução a eventos: Os próximos vídeos serão focados em eventos. Essas são uma parte muito útil do JavaScript. Eventos são como coisas que acontecem no navegador, como um clique de botão, um mouse passando sobre uma imagem, um botão de teclado foi pressionado. Quando algum desses eventos acontece, ele envia um sinal para fazermos alguma coisa. Muitas vezes, bem, agora é para esses eventos acontecerem e, em seguida, executar algum código, como uma função. Por exemplo, você provavelmente preencherá um formulário em uma página da Web, como um formulário de contato, e depois pressionará Enviar. Bem, quando esse formulário é enviado, ele também encontra um evento de envio. Poderíamos anexar um evento de clique a um elemento, como um botão, e isso poderia executar uma função toda vez que esse botão for clicado. Além disso, se você já visitou uma página da Web e tentou sair, movendo o mouse para o botão Fechar Navegador na parte superior, quero ver uma promoção de um pop-up na tela. Bem, isso é tudo Eventos JavaScript acontecendo em segundo plano. Poderíamos anexar um evento de mouseover a uma imagem que talvez revele mais da imagem à medida que o ponteiro se move sobre ela. Como você pode imaginar, as possibilidades são enormes. Lembre-se, o JavaScript interage com nosso HTML por meio do DOM. Novamente, estamos misturando um JavaScript aqui com nossos elementos HTML. Com isso em mente, precisamos fazer uso da interface de eventos DOMs. A maioria dos elementos HTML pode aceitar um ouvinte de eventos sendo anexado e há várias maneiras de fazer isso. Descobriremos algumas delas no próximo vídeo. 45. Monitoramento para eventos: Bem-vindo de volta. Agora temos um entendimento básico dos eventos. Agora vamos dar uma olhada em como podemos escutá-los e depois reagir a esses eventos. Entramos neste arquivo que está ouvindo eventos e abrimos isso no navegador. Como continuamos com nosso projeto No Meat Burgers, esse arquivo está começando a ficar um pouco maior do que queremos, então vamos seguir em frente e criar alguns novos arquivos JavaScript, que irão ajude-nos a organizar todo esse JavaScript. Primeiro de tudo, como criamos muitos elementos dentro da nossa seção Script, o que vamos fazer é criar um novo arquivo dentro dessa pasta de lições. Este será chamado de elements.js. Para isso, tudo o que precisamos fazer é pegar todo o conteúdo de nossos scripts. Todos os elementos que criamos em vídeos anteriores, colocam isso, deixando uma seção de script vazia, colamos em nosso novo arquivo e salve isso. Em seguida, criaremos um novo arquivo que seguirá a próxima seção, que é o events.js. Ter vários arquivos como esse é completamente bom. Tudo o que precisamos fazer é garantir que eles estejam vinculados dentro da nossa página de índice, então mantemos o script, mas precisamos adicionar a fonte para apontar para ambos os arquivos. O primeiro é o elements.js, duplique isso e o segundo foi para nossos eventos. Podemos verificar se isso também funciona salvando e atualizando o navegador, e ainda vemos todos os elementos que criamos neste arquivo. Agora vamos passar para como podemos trabalhar com eventos até que seja agora para um evento. Primeiro precisamos de uma maneira de anexá-lo a um de nossos elementos, e há maneiras diferentes de fazer isso. Se formos para a documentação da Mozilla. Na documentação da Mozilla, em uma seção chamada GlobalEventHandlers, então você não precisa sair desta página se não quiser, mas isso nos dará uma lista de muitos eventos comuns manipuladores que podemos usar, e podemos colocá-los em nossos elementos HTML. Por exemplo, podemos ouvir muitos eventos, como onfocus, onblur, onclick, que é realmente comum. Podemos ouvir um elemento a ser drogado e muitos mais que nos fazem cobrir para muitos eventos diferentes. Podemos esperar que a página termine de carregar antes de iniciar uma função, podemos ouvir para que um mouse passe por cima de um elemento, deixe um elemento, e também coisas como em jogo e em pausa que são relacionado à reprodução de áudio e também vídeo. Como você pode ver, esses manipuladores de eventos têm o prefixo on. O que vamos fazer é ir ao nosso projeto e começar ouvindo um clique com o manipulador de eventos onclick. Na página Índice, vamos procurar nossa imagem, a imagem do hambúrguer aqui dentro e, em seguida, dentro como um atributo, podemos adicionar onclick. O Onclick executará qualquer pedaço de código JavaScript, para qualquer pedaço de código JavaScript, que possamos executar uma função ou podemos executar algo muito simples como um alerta com o texto de cliques. Salve isso e agora isso está anexado aos nossos elementos de imagem. Atualize a página e, em seguida, role para baixo até a imagem correta, que estava ao lado do título vegano definitivo. Clique nisso e, em seguida, este é o nosso alerta na parte superior. Se tentarmos clicar em imagens diferentes, isso não funcionará porque isso só é aplicado a um único elemento. Se formos um pouco mais longe do que isso, também podemos ir para o nosso arquivo events.js e adicionar uma função que será executada quando esse elemento for clicado. Assim como antes criamos uma função, e diremos, “ChangeImage”. Agora e vou verificar se isso funciona com um alerta. Vamos dizer “Clicou”. Salve esse arquivo e volte para nossa página Índice em vez executar esse alerta dentro daqui. Podemos remover isso e passar nome da nossa função que era “ChangeImage”. Vamos salvar isso de volta no navegador. Podemos tentar todas essas imagens e, em seguida, a final figura nossa função dentro do arquivo separado. Essa maneira de adicionar um manipulador de eventos como um atributo é chamada de manipulador de eventos em linha. Isso funciona completamente bem, mas pode ser considerado uma má prática. Isso ocorre porque ele mistura nosso HTML e nosso código JavaScript. O que podemos fazer é remover isso e deixar nosso HTML intacto, e então podemos ouvir isso dentro do nosso arquivo de eventos. O que vou fazer é criar uma referência a esse elemento, onde Document.querySelector, e então podemos selecionar qualquer um dos nossos elementos. Para isso, vou pegar nossa imagem de cabeçalho, que está no topo. Como temos várias imagens, também precisamos de um identificador exclusivo, então colocaremos em um ID de HeaderImage e, em seguida, podemos selecionar isso dentro de nossos eventos. Com isso sendo um ID, também precisamos colocar no hush plus em nosso HeaderImage e, em seguida, armazená-lo dentro de uma variável. Estamos pegando nossas imagens aqui, temos uma função para executar, então agora precisamos de uma maneira de vinculá-las. Bem, a maneira como podemos fazer isso é acessar nosso elemento, que é o HeaderImage, e então podemos acessar diretamente onclick e definir isso igual a nossas duas funções. Isso é ChangeImage. Vamos dar uma greve, recarregar o navegador, clicar em nossa imagem principal, e isso executa nossa função. Não queremos apenas fazer um alerta, embora neste caso, queremos ser capazes fazer algo com a imagem. Podemos usar qualquer uma das técnicas aprendidas até agora, como adicionar classes ou até mesmo CSS. Em vez do alerta, pegaremos nosso headerImage, definiremos o estilo e, em seguida, definiremos a propriedade width que é igual a uma string de 50%. Vamos tentar isso novamente. Essa mesma técnica funciona exatamente da mesma forma com todos os diferentes manipuladores de eventos que acabamos de procurar antes. Por exemplo, se quiséssemos executar essa função específica quando o mouse passa por cima desta imagem, tudo o que precisamos fazer é alterar clique para ser qualquer valor diferente, como onmouseover, atualizar e, assim que esse mouse passar sobre a imagem, esse código agora será executado. Essa configuração é um pouco melhor porque todo o nosso JavaScript agora está contido em seu próprio arquivo separado fora do HTML. Mas uma das desvantagens dessa abordagem é, se quiséssemos acionar várias funções. Digamos que copiemos rapidamente essa função e colamos uma nova chamada oi, podemos adicionar um alerta rápido dentro daqui. Então, se também duplicarmos essa linha de código aqui, também executaremos nossa segunda função, que é oi. Vamos salvar isso e ver o que acontece. Atualize, mova o mouse sobre, vemos nosso alerta, mas não vemos o tamanho da imagem mudando. Quando configuramos várias funções que respondem ao mesmo evento, ele substituirá o anterior, o significa que apenas a última função será executada. Estamos vendo isso em ação porque tudo o que estamos vendo dentro do navegador foi nosso alerta. Outra maneira de abordar isso é usar um método chamado add event listener. Essa abordagem substituirá essas duas linhas de código aqui. Ainda precisamos acessar nossos elementos, que é a imagem do cabeçalho, mas desta vez a passamos em um método chamado addEventListener. Dentro daqui, a primeira coisa que passamos é um nome do evento que você quer ouvir. Vamos para um evento de clique. Todos esses eventos são exatamente os mesmos de antes, mas simplesmente não usamos o prefixo on. Separados por vírgula, podemos até escrever em uma função assim, ou em vez disso, podemos passar uma referência a uma das funções que já temos. Vamos para um ChangeImage, e poderíamos experimentar este no navegador. Clique na imagem e esta agora funciona. Uma das vantagens de usar esse método addEventListener é que ele também permite várias funções também. Se fôssemos duplicar essa linha, ao contrário de quando adicionamos o manipulador de eventos onclick antes ou o onmouseover, podemos passar em uma segunda função e ambas as funções agora serão executadas no navegador, assim, há nosso alerta e, em seguida, a imagem será encolhida para 50%. Isso é realmente útil se tivermos várias funções que queremos executar, mas vou remover esse exemplo de oi e deixar uma imagem de mudança elegante. addEventListener também tem outros benefícios também. Outra é, também podemos remover código do ouvinte de eventos quando ele não for mais necessário. Ele também tem uma configuração, o que significa que podemos ajustar quando o evento é disparado também. Mas ambos serão abordados com mais detalhes durante esta seção. Temos muitos eventos diferentes também em nosso programa, as ferramentas do desenvolvedor podem realmente nos ajudar com isso também. Se clicarmos com o botão direito do mouse e “Inspecionar” dentro do Chrome, poderemos usar o Inspetor para apontar para qualquer um desses elementos que queremos verificar. No nosso caso, se clicarmos neste HeaderImage e, em seguida descermos para a guia Ouvintes de Eventos, podemos ver que temos um ouvinte de clique sobre isso, e se abrirmos isso, podemos ver, anexado a este é um Clique em Listener, que executa nossa função chamada ChangeImage. Isso é realmente útil para descobrir quais ouvintes de eventos estão anexados a qual dos nossos elementos. Apenas para recapitular, abordamos três maneiras anexar um ouvinte de eventos a um elemento. Primeiro, adicionamos atributos HTML embutidos. Embora isso seja provavelmente algo que você deve evitar manter nosso HTML limpo e separado do nosso JavaScript. Em seguida, chamamos o Ouvinte de Eventos diretamente nos elementos, e isso manteve todo o nosso código JavaScript juntos em um único arquivo. Uma das limitações era que só podíamos executar uma única função, um pedaço de código deste exemplo e, finalmente, analisamos o método addEventListener, que não só resolveu esse problema, mas também tem mais recursos disponíveis, que descobriremos nos próximos vídeos. 46. Monitoramento para múltiplos eventos e dados de eventos: Os exemplos anteriores que analisamos adicionaram um ouvinte de eventos a um único elemento. Mas pode haver um momento em que queremos adicionar o mesmo ouvinte de eventos a vários elementos. Vamos entrar no arquivo desta lição, que está escutando vários eventos e dados de eventos. Você pode dar uma olhada em como fazer isso. O exemplo que vamos usar para isso está na parte inferior da nossa página de índice. Você notará com essas duas seções de receitas na parte inferior, adicionei uma estrela ao topo de cada um desses artigos. Podemos ver isso se descermos até o fundo do nosso HTML. Em cada um desses artigos, temos um elemento de extensão no topo. Isso está no topo desses dois artigos. O que podemos querer fazer é adicionar um ouvinte de eventos a cada uma dessas estrelas, que as adicionará a uma lista salva de favoritos. Também poderíamos ter muitas outras receitas listadas e podemos querer adicionar o mesmo ouvinte de eventos a cada uma delas. Selecionar cada uma dessas receitas individualmente e adicionar um ouvinte de eventos demoraria muito trabalho. Em vez disso, podemos usar um loop para ajudar com isso. Na barra lateral, vamos para o arquivo events.js. A primeira coisa que precisamos fazer dentro do arquivo de eventos é selecionar todos esses elementos de extensão com os quais queremos trabalhar. Na página Índice, podemos ver que esses elementos de span têm uma classe de add. Vamos selecionar ambos com QuerySelectorAll. Vamos fazer isso. Armazenaremos isso dentro de uma constante chamada AddButtons. Defina isso igual a Document.querySelectorAll. Em seguida, podemos passar nossa consulta como uma string. É uma classe, então use o ponto no nome da classe add. Lembre-se de antes quando usamos QuerySelectorAll, é que ele retornará uma coleção HTML que podemos fazer loop usando forEach. Primeiro, selecione todos os nossos botões com AddButtons. O método que é forEach, forEach usa qualquer função a ser executada para cada um dos elementos, que está em nossa coleção. Portanto, cada elemento também precisa de um nome de variável. Vamos chamar esse botão, para mantê-lo simples. Então, assim como olhamos acima com nosso único elemento, também podemos usar addEventListener. Podemos acessar nosso button.addEventListener. Então, por dentro, vamos ouvir um evento de clique separado por uma vírgula. Em seguida, queremos executar uma função. Ainda não criamos uma função, mas faremos isso em apenas um segundo. Vou chamar isso AddToFavorites. É assim que adicionamos nosso ouvinte de eventos a cada um dos botões dentro do nosso loop. Então podemos ir em frente e criar essa função. Isso foi AddToFavorites. Agora, por enquanto, vamos adicionar um alerta de teste para garantir que tudo esteja funcionando. Eu adicionarei. Diga isso, e para o navegador, até o fundo, clique em nossa estrela. Esse é o nosso alerta, clique em alguns outros elementos para garantir que isso não esteja funcionando. Então podemos tentar nossa segunda estrela. Isso agora é adicionado às duas estrelas. É assim que adicionamos um ouvinte de eventos a vários elementos, mas muitas vezes podemos também querer saber qual dos elementos foi realmente clicado se estivéssemos apenas adicionando algum CSS ou algo muito genérico. Não importa em qual clicamos. Mas, para nosso caso de uso específico, podemos querer saber exatamente em qual receita foi clicada. Em seguida, podemos redirecionar essa página de receitas e também garantir que a correta seja adicionada aos nossos favoritos. A maneira de fazer isso, juntamente com muitas outras coisas, é acessando os dados do evento. Para acessar nossos dados de eventos dentro da função, nós os passamos como um parâmetro. Vou nomear essa variável e, mas seu nome depende completamente de nós, mas é comum vê-la chamada evento ou e para abreviar. Ele contém o objeto de evento. Este objeto de evento contém uma enorme quantidade de dados que podemos acessar. Você verá isso. Coloque em um log de console com o valor de e e remova nosso [inaudível] para este exemplo, atualize o navegador e abra as ferramentas do desenvolvedor no console e clique em qualquer uma dessas estrelas. Isso nos dará acesso a todas as informações dos eventos. Como usamos um mouse, este é um evento de ponteiro e isso nos dará muitas informações diferentes na forma de um objeto. Podemos ver isso com as chaves e temos muitos pares de valores-chave. Por exemplo, podemos ver a localização do clique, que é o eixo x e y. Podemos ver algo chamado bolhas, que vamos dar uma olhada muito em breve e muito mais informações sobre esse evento. Uma das informações mais usadas dentro desse evento é a seção de destino. Se abrirmos isso, isso nos dá acesso aos nossos elementos, nos quais clicamos. No nosso caso, acessar e.targets dentro do JavaScript acessaria nossos elementos de extensão e todas as informações contidas dentro. Mas nosso caso de uso é um pouco mais complexo. Se dermos uma olhada na estrutura do nosso código em nossa página de índice, o que queremos fazer é pegar o conteúdo do nosso cabeçalho de nível quatro para adicionar isso à nossa lista de favoritos. Mas se estamos clicando neste elemento de extensão aqui, como acessamos as informações de duas linhas logo abaixo? Bem, a resposta também está nesta seção de destino. É tudo alfabético. Se você rolar para baixo até a seção p, a primeira coisa que precisamos fazer é aumentar um nível para o nosso artigo. Este artigo é o invólucro pai de todas essas informações. Podemos acessar todo esse conteúdo dentro do nó pai. Podemos ver o artigo aqui. Abra isso. Isso contém, se rolarmos para baixo, uma lista de filhos na forma de uma coleção HTML. Dentro das crianças, podemos ver que temos os elementos de extensão com a classe de add no topo. Então nossa imagem, nosso título de nível 4 e depois a div para baixo na parte inferior. Podemos acessar todas essas informações de objeto exatamente da mesma forma que você faria com qualquer outro objeto. Vamos aos nossos eventos. O que devemos fazer é acessar o destino, que é a primeira seção, e depois o nó pai. Depois que o nó pai vieram os filhos. Então, como a seção infantil é uma coleção HTML, acessamos isso pelo número do índice. Assim como com uma matriz, passamos nesses colchetes e o número de índice de dois, que é um cabeçalho de nível 4. Vamos salvar isso e verificar se isso contém nosso cabeçalho de nível 4. Atualizar. Agora, se dispararmos qualquer um desses eventos com as estrelas, isso nos dará nosso h4 Spicy bean Burger. Nosso segundo, atualize. Vamos tentar o Ultimate Vegan. Bom. Agora temos os elementos que você quer. Agora podemos detalhar isso e selecionar o nome com nosso texto interno. Então, Children.InnerText. Tente isso novamente. Clique nas estrelas e isso revelará o texto para cada uma de nossas receitas. Este é um longo caminho para obter o nome da receita que você deseja, mas às vezes, para obter as informações corretas, só precisamos continuar investigando o objeto para obter as informações que precisamos. Não vou criar uma lista de favoritos para este projeto, mas é assim que poderíamos fazer isso. Você pode pegar o nome de cada um desses hambúrgueres e , em seguida, enviá-lo para uma matriz ou até mesmo para um banco de dados. Uma das informações que também vemos dentro do objeto do evento era algo chamado bolhas. Isso é o que vamos dar uma olhada nos próximos vídeos quando descobrirmos tudo sobre propagação de eventos. 47. Propagação de eventos: Este vídeo vai ver algo importante que acontece nos bastidores ao lidar com eventos. Melhor ainda, vamos adicionar outro ouvinte de eventos em nosso projeto de inicialização. Abra o projeto inicial, que é a propagação de eventos, e então você verá dentro do navegador que temos o mesmo projeto que realizamos do vídeo anterior. Olhando para a seção de receitas na parte inferior, temos nossas duas receitas, e talvez desejemos estender a funcionalidade das receitas. Por exemplo, poderíamos clicar em um e , em seguida, poderíamos expandir a receita. Poderíamos abrir isso em um pop-up ou até mesmo redirecionar a página de receitas completa. Vamos para o nosso events.js dentro desta pasta e, em seguida, simularemos isso selecionando primeiro nossas receitas. Nossas duas receitas, se você se lembrar, armazenadas dentro das seções do Artigo. Começaremos pegando esses dois artigos e armazenando-os dentro de uma constante. Vamos configurar isso. Nossa constante e diremos títulos de receitas e definimos isso igual a documento e, em seguida, desmarcar vários elementos, usamos consulta select all transmitindo nosso artigo. Agora, como isso retorna vários elementos, precisamos fazer um loop sobre nossos títulos de receitas, e podemos fazer isso com um loop para cada. Para cada um, tomaremos uma função que será executada para cada um dos nossos elementos. No nosso caso, temos dois elementos separados. Nós os armazenamos dentro de uma variável chamada title. Agora, estamos fazendo um loop sobre esses dois artigos, o que queremos fazer é adicionar um ouvinte de eventos a ambos. Analisamos como fazer isso anteriormente, primeiro selecionamos cada elemento individual e, em seguida, podemos usar adicionar ouvinte de eventos. Isso escutará um evento de clique e, em seguida, executará uma função chamada Redirecionamento. Claro, não criamos essa função de redirecionamento que ainda, vamos criar isso logo acima. Agora, tudo isso que você vai fazer é criar um alerta. Deixe-nos saber que isso está funcionando. Vamos dizer que a receita clicou. Além disso, podemos passar os dados do evento. Volte para o navegador e recarregue a página. Clique em qualquer um desses artigos e isso chamará nossa função uma vez concluído, podemos tentar isso com o segundo artigo também. Tudo isso funciona conforme o esperado. Mas e se tentássemos clicar na Estrela? Primeiro de tudo, vemos o título de Ultimate Vegan e configuramos isso nos vídeos anteriores. Mas e se clicarmos em “Ok”? Bem, veremos nossa segunda camada, que é a receita clicada. Talvez não estejamos esperando isso porque clicamos na Estrela e não no artigo real. Bem, a razão para isso é por causa de várias fases que ocorreram durante o evento. Nos navegadores modernos, os manipuladores de eventos farão algo chamado borbulhamento por padrão. Se você pensar em uma bolha na água, uma bolha sempre flutuará até o topo e é isso que acontece com nossos eventos. Podemos ver isso melhor se entrarmos em nosso index.html e depois encontrarmos qualquer um de nossos artigos. Quando acionamos um evento no navegador, como clicar em um elemento, a fase de borbulhamento fará com que ele não apenas defina esse evento de clique, mas também acionará qualquer dentro de outros pais elementos também. É por isso que, quando clicamos neste botão Adicionar aqui, ele também irá borbulhar até os elementos dos pais, que é o artigo e acionará quaisquer eventos associados a este artigo também. Não só este artigo pai também continuará borbulhando para os outros pais, como uma div, esta seção e continuará indo até o topo do corpo, o HTML, o documento e, em seguida, finalmente, o objeto window. Ele também acionará todos os eventos anexados a esses elementos também. Esses eventos borbulhantes podem ser úteis. Por exemplo, em vez de adicionar um ouvinte de eventos a muitos elementos filho diferentes, poderíamos adicionar um único ouvinte de evento aos elementos de um pai e podemos testar isso adicionando um evento simples ao corpo. Vamos até a seção do corpo de abertura. Adicionaremos um manipulador de eventos em linha chamado On-click e definiremos isso igual a um alerta, que irá gerar a cadeia de corpo. Agora atualize o navegador, clique em qualquer elemento irá para o nosso artigo, então veremos a receita clicada e, em seguida, também nosso elemento corporal foi disparado no caminho para cima também. Para remover esse exemplo, não precisamos disso dentro do nosso projeto, mas isso nos dá uma boa indicação do que está acontecendo dentro do navegador. Há também o oposto disponível também e isso é o que é chamado de fase de captura. Isso começa no topo, que é o objeto da janela e, em seguida, corre todo o caminho através nossos elementos até a parte inferior executando qualquer evento que esteja anexado a qualquer um dos elementos no caminho. Isso é borbulhar e capturar que ambos se relacionam com eventos de incêndio se estiver no caminho cima ou para baixo e também há um terceiro termo, que é chamado de Alvo. O alvo são os elementos reais que acionam eventos, como o evento do artigo, que acabamos de criar. Sabendo que outros eventos aninhados também são acionados no caminho para cima, todo o caminho para baixo, isso nos deixa com algumas maneiras diferentes de como queremos lidar com isso. Podemos ainda querer que todos os eventos sejam disparados, mas talvez façam o oposto do que temos atualmente. Atualmente, queremos clicar em nosso botão adicionar, isso será acionado primeiro quando clicado, seguido pelo elemento externo do artigo. Estamos vendo isso pela ordem do alerta dentro do navegador. Mas podemos também querer demiti-los na ordem inversa, ou talvez não queiramos que nenhum dos eventos seja disparado, apenas os eventos para os elementos em que clicamos, e é uma maneira de cobrir esses dois situações. Primeiro de tudo, vamos dar uma olhada em como reverter a ordem em que esses eventos são disparados e a maneira de fazer isso, se apenas verificarmos novamente dentro do navegador, quando clicarmos na estrela, vemos o título que é derradeiro vegano, seguido pelo evento do artigo que foi clicado na receita. Isso está funcionando de dentro para o exterior e vamos reverter isso mudando isso para a fase de captura. A maneira de fazer isso é entrar em nossos eventos e, em seguida, dentro do nosso ouvinte de eventos add, adicionar um terceiro valor separado por uma vírgula e definiremos isso como verdadeiro. True habilitará a fase de captura em vez do borbulhamento padrão. Se quiséssemos, também poderíamos configurar isso como um objeto de opções, onde definimos a captura como igual a verdadeira. Ambas as abordagens são exatamente as mesmas e boas de usar. alerta para correr da fase de borbulhamento para a captura significará que agora, se clicarmos em nosso botão, que é a seção adicionar aqui, em vez de trabalhar de dentro para fora, o evento externo do artigo será disparado primeiro, seguido por esta arte. Podemos tentar isso se atualizarmos o navegador, clicar na estrela. Primeiro vemos a receita clicada que foi associada ao artigo, seguida por nossos elementos de extensão logo depois. O termo geral para esse borbulhamento e a fase de captura é chamado propagação de eventos e também podemos parar completamente essa propagação. Isso significaria apenas o elemento exato que acionador será executado em vez de overs dentro da árvore. Como exemplo, quando clicamos no início, se quiséssemos apenas executar a função adicionar aos favoritos em vez da que acabamos de criar antes, podemos entrar nessa função e podemos acessar nosso evento informações, que nos dão acesso a uma função chamada Stop Propagation. Também podemos remover o objeto de opções abaixo, que define a fase de captura. Atualize o navegador e agora, se tentarmos isso clicando na estrela, podemos ver apenas o título de Ultimate Vegan é executado. Clique em “Ok”, não vemos nenhum outro evento disparado. Isso pode ser bastante complexo se esta for a primeira vez que você for apresentado a essa coisa. Mas a maneira fácil de lembrar é que se você tiver vários eventos, temos uma opção em que queremos acionar qualquer um desses eventos nos elementos pai ou nos elementos filhos, ou como acabamos de fazer descobriu que também podemos reverter a ordem e também parar qualquer propagação e completamente também. A razão pela qual temos tanto a captura quanto os estágios borbulhantes é histórica. Há muito tempo, quando os navegadores eram menos padronizados, alguns navegadores usavam a fase de captura e alguns usavam borbulhamento, o que levou ao padrão atual, onde ambos agora são implementados em navegadores modernos. 48. Executando eventos uma vez: Bem-vindo de volta. Agora vamos dar uma olhada em como podemos realizar um evento apenas uma única vez. Vamos pular para o arquivo atual que está executando eventos uma vez e abriremos isso dentro do navegador. Isso também tem um arquivo events.js anexado com o exemplo semelhante ao que vimos nos vídeos anteriores. Sabemos, a partir dos botões de estrela na parte superior, vamos percorrer todos esses, o loop forEach no EventListener, que listará agora para um clique e, em seguida, executará nossa função AddToFavorite. Tudo o que faz é criar um alerta simples com o texto, que é o derradeiro vegano ou o hambúrguer de feijão picante. Um pouco mais cedo, quando olhamos diferentes maneiras de ouvir eventos. Eu mencionei que há um pouco mais addEventListener do que o que estamos usando atualmente. Acabamos de examinar um dos recursos anteriormente, que era adicionar um objeto de opções e definir a fase de captura como igual a true. Junto com isso, outra opção que temos é restringir o evento, o único chamado uma vez. Isso é bem simples, tudo o que precisamos fazer é mudar isso para ser uma vez e definir isso como verdadeiro. Vamos ver o efeito que isso tem dentro do navegador. Agora, se recarregarmos e clicarmos em uma das estrelas, vemos o título de vegano final. Tudo isso funciona completamente bem, mas se você tentar clicar nisso uma segunda vez? Na segunda vez, não vemos o texto do último vegano, em vez disso, vemos o texto da receita clicado. Isso faz sentido porque definimos o ouvinte do evento para o título seja executado apenas uma vez. Portanto, ele se referirá ao artigo ao redor, já que o evento stars não está mais ativo. Essa é uma ótima maneira de adicionar um ouvinte de eventos de uso único para ser chamado apenas uma vez. 49. Prevenindo o comportamento padrão e a opção passiva: Quando acionamos um evento, ele também tem algum comportamento padrão que ocorre dentro do navegador. Isso faz sentido porque queremos que o evento realmente faça alguma coisa. Um exemplo simples é uma caixa de seleção. Vamos pular para os arquivos iniciais corretos, que são Prevenir Comportamento Padrão e A Opção Passiva e abra o index.html. Vamos até o final após a última seção, e logo acima de nossos scripts, criaremos uma entrada com o tipo de caixa de seleção e ID da caixa de seleção também. Vamos salvar isso e abrir dentro da mesma pasta, o events.js. Podemos começar a pegar esse elemento. Em qualquer lugar dentro daqui está bom e vamos pegar uma referência a essa caixa de seleção, armazená-lo dentro de uma constante. Escrevemos document.queryselector e, em seguida, vamos passá-lo no ID usando hash. O ID que demos à entrada foi a caixa de seleção e, em seguida, podemos acessar nossa caixa de seleção usando um método que é addEventListener e, em seguida, vamos ouvir um clique nesse elemento. Isso também precisa acionar uma função que chamaremos de HandleClick e, em seguida, configurar essa função logo acima. A função HandleClick e sua função também precisam acessar os dados do evento, então passe isso como um parâmetro e, por enquanto, faremos um log de console simples com e.target. Como esta é uma caixa de seleção, também podemos acessar a propriedade verificada. Isso deve retornar um valor verdadeiro ou falso se a entrada estiver marcada ou não. Para o navegador, atualize e também faremos isso um pouco maior. Pule para o console. Podemos muito bem, ver isso na parte inferior, então clique nisso e vemos que isso está verificado porque é verdade. Podemos desmarcar isso e isso será o resultado de false. Podemos alternar lista e essa ação de alternância é o comportamento padrão, mas se não quiséssemos esse comportamento padrão, poderíamos impedir o padrão e lidar exatamente com o que queremos que aconteça nós mesmos. Voltamos ao nosso script, que são os eventos e rolamos para cima até a função que é AddToFavorites. Anteriormente, acessamos os dados do evento e usamos um método chamado StopPropagation. Semelhante a isso, também podemos fazer uso de outro método chamado preventDefault. Como seria de esperar, isso também está disponível no objeto de evento. Podemos usar isso dentro da nossa função HandleClick. Na parte superior do acesso aos nossos eventos, chamaremos o método que é preventDefault que, por sua vez, interromperá o comportamento padrão dentro do navegador, que também alternará o valor da caixa de seleção. Vamos dar uma chance a isso. Se atualizarmos, marque a caixa de saída na parte inferior; isso é verdade. Se continuarmos clicando, isso só será resultado de verdade. Não vemos um valor falso, e também nunca vemos que essa caixa de seleção tenha um carrapato dentro. Vivendo-nos agora livres para fazer o que quisermos com este evento dentro da nossa função. Também abaixo no método addEventListener, também podemos adicionar um terceiro valor que é um objeto de opções onde podemos definir a opção passiva como igual a true. Definir isso igual a true sempre impedirá o preventDefault seja chamado. Eu salvo isso e vejo o que acontece dentro do navegador. Atualize e, se clicarmos em nossa caixa de seleção, podemos ver que não podemos prevenirDefault dentro do EventListener. Isso ocorre porque se definirmos passivo como igual a true, isso impedirá que o preventDefault seja chamado. Podemos ver isso, restabeleceremos nosso comportamento original de alternar entre verdadeiro e falso e também vemos o carrapato dentro da caixa de seleção também. Você pode estar se perguntando por que estamos impedindo o padrão dentro da função, mas estamos substituindo isso dentro do EventListener. Bem, uma das razões pode ser que talvez queiram impedir que outros desenvolvedores façam algo no futuro quando estivermos confiando no comportamento padrão. Usar a opção passiva também pode levar a um melhor desempenho também. Um exemplo disso é em dispositivos móveis onde, como às vezes, os desenvolvedores impedem o comportamento de rolagem padrão para implementar uma maneira personalizada de rolagem. Mas se não estamos fazendo algo personalizado como esse é ruim avisar o navegador adicionando a opção passiva, portanto, o navegador não precisa descobrir coisas por si mesmo que possam tomar tempo e também atrapalhar o desempenho. Volte à nossa página Índice e podemos remover essa entrada aqui, e agora vamos dar uma olhada em um exemplo mais comumente usado de impedir o comportamento padrão usado quando usado com formulários. Um exemplo disso é um formulário de inscrição, então crie uma nova seção com a classe de inscrição. Aqui dentro, um cabeçalho de nível 3 com o título de Inscreva-se ou podemos descansar isso através da nossa caixa de entrada. Logo abaixo disso, podemos começar a construir nosso formulário e, dentro dos elementos do formulário, criaremos uma nova div para cada uma dessas seções. Primeiro de tudo, o rótulo será para o nome do usuário, então diremos para o nome passando o rótulo do nome com os dois pontos. As entradas, esse é o tipo de imposto. Para combinar com nosso rótulo, também passaremos o ID do nome. Esta segunda div será apenas para o e-mail, então copiaremos, colaremos e alteraremos cada um deles para ser o e-mail correspondente. A terceira e a última div serão para o envio, então crie uma entrada com o tipo de envio e também o ID do envio também. Como também removemos nossa caixa de seleção de antes, também podemos voltar aos eventos e remover nossa função e o EventListener. Digamos que este teste final, tudo isso esteja bem dentro do navegador. Há nosso título, o nome e as entradas de e-mail junto com nosso envio. Quando enviamos o formulário, o comportamento padrão é enviar o formulário para um servidor web back-end e, em seguida, talvez fazer algo como redirecionar para uma página de sucesso. Obviamente, não temos uma página adicional para redirecionar, então vamos redirecionar para a mesma página, o que, por sua vez, causará um recarregamento de página. O recarregamento da página perde todos os dados do formulário que estão aninhados dentro. Se adicionarmos algo aqui; apenas qualquer exemplo está bom, clique em “Enviar”, podemos ver um exemplo disso. Vemos que a página foi recarregada e também perdemos os dados do formulário desses campos também. Bem, talvez haja ocorrências que queremos primeiro capturar esses dados e usá-los antes que tudo acabe. Um exemplo disso seria talvez validar os dados do formulário antes de serem enviados para o servidor. Como acabamos de procurar antes se quisermos capturar esses dados antes da recarga, precisamos evitar o comportamento padrão do formulário. Para fazer isso, volte para nossos eventos e vamos começar capturando o formulário e os elementos de entrada. Digamos que o formulário const será igual a Document.querySelector onde selecionamos o elemento de formulário. Se copiarmos e colarmos isso em mais duas vezes, o segundo é para o nome de usuário e também fornecemos a este um ID que é igual ao nome. O terceiro é para o UsereMail. Em seguida, pegaremos nosso formulário e adicionaremos um EventListener, que vai para isso agora para o envio do formulário. A razão pela qual podemos fazer isso e ouvir o evento de envio é porque dentro da nossa página Índice, adicionamos o tipo de envio. Separe-o por vírgula, acionaremos uma função chamada HandleFormSubmit e, em seguida, configuraremos isso logo acima. Como seria de esperar, pois precisamos evitar o comportamento padrão, acessaremos nosso objeto de evento e, em seguida, criaremos um log de console que captura nosso UserName. Tudo o que fizemos aqui é pegar nosso elemento UserName, mas se quisermos obter o valor que é inserido pelo usuário, precisamos acessar o valor. Quanto aos resultados, atualize. Dentro do console, coloque qualquer nome dentro daqui. Para qualquer e-mail, nome e envio. Você verá muito rapidamente lá que o nome de usuário de Chris foi colocado dentro do console e, em seguida, muito rapidamente todos os dados desaparecerão. Como você esperaria, a maneira de evitar isso é acessar nosso objeto de evento e assim como antes de podermos evitar o comportamento padrão. Vamos dizer isso e experimentar isso mais uma vez, adicionar o nome, e o e-mail está bom e, em seguida, clique em “Enviar”. Agora, nossos dados ainda estão em vigor. Temos nosso registro do console, e também dentro da entrada temos o nome e as entradas de e-mail. Bom. Agora temos acesso a todas essas informações antes que elas desapareçam. Agora podemos validar o nome e o e-mail e verificá-lo no formato correto antes de enviá-lo para o servidor. Vou fazer uma verificação de validação muito simples para este exemplo para ver se o usuário inseriu um nome usando uma instrução if. Ainda não abordamos declarações se, mas elas são simplesmente uma maneira de verificar se algo é verdade. A maneira como podemos fazer isso dentro de nossa função é acessar a palavra-chave if e, em seguida, colocar uma condição dentro dos colchetes. Queremos verificar se o usuário.valor, que é a string de texto, é igual a uma string vazia. Se for, abriremos algumas chaves curly como o corpo da função e colocaremos em algo que você deseja executar. Vamos apenas colocar um alerta que diz Por favor, insira seu nome e, em seguida, volte para fora desta declaração. Agora, vamos salvar isso e recarregar o navegador, clique em “Enviar”. Nosso alerta foi executado no topo, vamos tentar isso com alguns dados colocados dentro. Lá vamos nós. Agora, o nome de usuário tem um valor em vez de uma string vazia. Não vemos mais esse alerta em execução dentro do navegador, então isso nos dá a chance de fazer o que quisermos com os dados antes de enviá-los para o servidor. Lembre-se, porém, como a página não está mais recarregando, também precisamos lidar com as entradas vazias e esses formulários nós mesmos. Isso também é bem simples, podemos fazer isso dentro de nossa função logo abaixo da declaração if. O que precisamos fazer é pegar nosso nome de usuário, acessar o valor e definir isso igual a uma string vazia. O mesmo acontece com o e-mail, também para uma string vazia. Então, abaixo disso, poderíamos ir em frente e enviar isso para o nosso servidor de qualquer maneira que você quisesse. Vamos experimentar isso. Podemos verificar as entradas do formulário, vamos limpar. Atualize, adicione nossos dados, clique em “Enviar” e tudo funcionou com sucesso. Ele também remove nosso nome e os dados de e-mail. É comum ver essa coisa ao usar estruturas ou bibliotecas. Se você já usou algo como React ou Vue.js no passado, talvez tenha usado isso no passado ao trabalhar com entradas de formulário. Em seguida, vamos terminar nosso olhar os eventos removendo eventos quando eles não forem mais necessários. 50. Removendo monitores de eventos: Eu tive uma prática e tanto de criar eventos, e também demos uma olhada em como podemos adicionar a opção de alguém se você for um ouvinte para executar apenas um único evento uma vez. Assim que isso acontecer, o ouvinte de eventos é removido dos elementos. Mas também podemos remover os ouvintes de eventos manualmente também podemos removê-los se eles não forem mais necessários ou usados, e essa remoção não é essencial em projetos menores, mas quando chegarmos a um projeto de maior escala, limpando qualquer ouvintes de eventos antigos não utilizados podem realmente melhorar a eficiência. Isso também significa que podemos usar o mesmo elemento para fazer coisas diferentes, adicionando e removendo esses ouvintes de eventos. Entre no arquivo Chrome, que está removendo os ouvintes de eventos, e se você abrir isso dentro do navegador, notará que nos afastamos da configuração do projeto de hambúrguer. Temos um exemplo simples, então temos um elemento de span e, em seguida, dentro dos elementos P, terá uma pontuação de inicialização zero. O objetivo aqui é clicar neste botão de adição para aumentar a pontuação e, em seguida, usaremos o botão cancelar para remover o ouvinte do evento. Isso também se vincula ao nosso events.js dentro da mesma pasta, e se entrarmos nisso, temos uma referência a todos os nossos três elementos. Temos o botão adicionar, temos o botão cancelar e, em seguida, a saída, que é o nosso número. O que começaremos a fazer aqui é criar um ouvinte de eventos, que vamos remover no futuro. Este ouvinte de eventos será anexado ao nosso botão de adição, então vamos adicionar isso como fazemos normalmente. Isso agora para um clique e, em seguida, acionará uma função chamada aumento. Tudo isso deve ser familiar. Agora vamos criar nossa função aumentada logo acima. O que queremos que essa função faça? Bem, precisamos selecionar essa saída que é o valor atual de zero. Este é um elemento p. Queremos selecionar o valor atual e, em seguida, aumentá-lo em um. Em primeiro lugar, a maneira de fazer isso é selecionar nossa saída. Podemos alterar o conteúdo do texto interno e redefinir isso para ser um novo valor. Atualmente, queremos adicionar o valor de um cada vez que clicamos neste botão, mas uma coisa que precisamos lembrar é que aqui temos o texto interno. Bem, aqui adicionamos um número, então o que primeiro precisamos fazer é converter nosso texto interno para ser um número. Onde você pode fazer isso é acessar a função number e, em seguida, o que faremos é pegar a saída atual.InnerText. Isso então transformará isso em um número e, em seguida, adicionaremos um a isso. Vamos tentar salvar o arquivo e atualizar. Clique em adicionar, e cada vez que clico nisso, isso é aumentado pelo valor de um. Em seguida, também precisamos ouvir um clique neste botão de cancelamento. Isso é praticamente uma repetição do processo acima. Vamos pegar uma referência ao nosso botão de cancelamento. Adicionaremos o ouvinte de eventos. Vamos agora para o evento click e, em seguida, chame uma função chamada StopListener. Essa carga criará essa função. Por enquanto, basta colocar em um registro de cancelamento para saber que este está sendo executado. Vamos experimentar isso, atualizar o navegador e entrar nas ferramentas do desenvolvedor, entrar no cancelamento. botão Cancelar agora tomará nossos registros. Para obter este botão de cancelamento para realmente remover o ouvinte de eventos do nosso botão de adição. O que precisamos fazer é acessar um método chamado remove event listener. Isso é bastante simples de fazer em vez de nosso registro de cancelamentos; podemos removê-lo. Podemos acessar o botão adicionar e chamar o ouvinte de eventos de remoção. Diga isso e tentaremos isso, atualizaremos o navegador, clicaremos no botão adicionar e isso aumenta o valor. Clique no botão Cancelar, veja um erro dentro do cancelamento, digamos que em dois argumentos são necessários, e ainda assim, se tentarmos clicar no botão adicionar, o ouvinte do evento ainda não foi cancelado. Isso ocorre porque também precisamos passar os mesmos parâmetros que usamos quando adicionamos o ouvinte de eventos, então precisamos remover o clique e também a atualização da chamada de função, e tentaremos adicionar, o que é bom. Removeremos o ouvinte do evento cancelaria. Agora não vemos nenhum erro, e se tentarmos clicar no botão adicionar, nenhuma atualização adicional ocorrerá. Como acabamos de ver, precisamos ter certeza de que os parâmetros são exatamente os mesmos também. Atualmente, temos o evento click, que agora é quatro, e isso é chamado na mesma função. Mas se tentássemos remover um ouvinte de eventos diferente, como mudar isso para você no mouseover, poderíamos dizer isso e experimentar isso mais uma vez. O botão adicionar funciona. Mas se cancelarmos o ouvinte de eventos, o botão adicionar ainda funcionará, pois temos um tipo de evento diferente. Vamos alterá-lo de volta para clicar. Além disso, se tivéssemos o objeto de opções, como procuramos anteriormente, por exemplo, poderíamos definir a fase de captura como verdadeira. Agora, se recarregarmos a tentativa, tentaremos isso mais uma vez, tentaremos cancelar. O botão adicionar ainda funciona. Isso ocorre porque não temos exatamente os mesmos parâmetros dentro do nosso ouvinte de eventos remove, então ele é considerado um evento diferente. Se quiséssemos que isso funcionasse, como seria de esperar, também precisamos copiar isso. adicione o terceiro parâmetro, teste isso. Vamos tentar cancelar e agora não podemos adicionar mais números a isso. Isso é o que precisamos fazer para remover um ouvinte de eventos em qualquer estágio do nosso programa. Como vimos, também precisamos ter certeza de que todos os parâmetros são exatamente os mesmos. Caso contrário, isso seria considerado um evento diferente. 51. HTMLCollection ou NodeList?: Ao longo desta seção, coletamos vários elementos DOM usando métodos diferentes. Selecionamos elementos DOM por nome de classe, por ID e também usando o seletor de consulta. Quando selecionamos vários elementos ao mesmo tempo, também recuperamos uma coleção HTML ou um NodeList. Como prometido anteriormente, agora vamos dar uma olhada na diferença entre os dois. De um modo geral, muitas vezes não importa qual deles temos. Ambos contêm vários valores em um formato semelhante a array, que podemos usar como gostaríamos, como fazer um loop sobre eles. Mas se você estiver interessado nas diferenças, agora vamos abordá-las neste vídeo. Entre no arquivo desta lição e dentro daqui temos uma lista não ordenada, fazemos quatro itens de lista diferentes. Se você olhar de perto, verá que os três primeiros itens da lista têm a classe de item de lista, e o final tem a classe de ativo. Isso se tornará importante em breve, dentro do script.js. Dentro do script, vamos dar uma olhada em como podemos capturar o conteúdo de todos esses itens da lista, consultamos o seletor todos e obtemos elementos pelo nome da classe. Primeiro, criaremos uma constante chamada estática, e veremos o porquê, em apenas um momento. Defina isso igual a document.queryselectorall, vamos pegar todos os nossos itens de lista e essas classes. Assim como estamos vendo dentro do HTML, vamos pegá-los com a classe de item da lista. Depois disso, crie uma segunda constante chamada live. Isso é igual ao documento. Vou pegar os mesmos itens de lista, mas desta vez usando GetElementsByClassName. Pegue os itens da lista e não precisamos do ponto pois já sabemos que estamos pegando o nome da classe. Assim como uma atualização rápida, se você não se lembrar desde o início, quando usarmos o seletor de consultas, isso retornará uma lista de nós. Certifique-se de que este seja um seletor de consulta pois estamos pegando vários itens. Isso retornará uma lista de nós e quando usarmos getElementsByClassName, isso retornará uma coleção HTML. Podemos testar isso, se fizermos um log de console para o valor de estático. Duplique isso e o segundo estará ao vivo. Atualize com o console aberto. Aqui está nosso NodeList e também nossa coleção HTML. Ambos têm algumas semelhanças e a primeira é que ambos têm uma linha de propriedade. Podemos ver isso, acessamos.length em ambos os logs do console. Atualize e podemos ver que ambos têm três itens separados. Também outra semelhança é que se removermos o comprimento, também podemos usar os colchetes para acessar qualquer propriedade pelo número do índice. Isso funciona para estática e também ao vivo. Isso retornará o único valor selecionado. Mas, assim como essas semelhanças, também há algumas diferenças importantes. Anteriormente, falamos sobre algo chamado nós e dissemos que podemos ter diferentes tipos dentro do DOM. Temos nós de elemento, temos nós de atributo e também os nós de texto também. Esses são todos valores que podem ser retornados dentro de um NodeList. No entanto, com uma coleção HTML, elas só podem conter elementos HTML. Muitas vezes isso não causará grandes problemas, mas pode ser útil saber. Também uma pista para a próxima coisa que vamos dar uma olhada, é o nome dessas constantes. Um NodeList que voltamos com o seletor de consulta all, retornará uma coleção estática. Uma coleção HTML é considerada ativa. O que isso significa é que quando atualizamos o DOM, apenas a coleção ao vivo está ciente de qualquer uma das alterações. Para ver esse teste o que faremos se saltarmos de volta para nossa página de índice, vamos fazer com que nosso item 4 tenha a mesma classe de item da lista. Em seguida, veremos qual dessas duas referências aos mesmos elementos será atualizada dentro do console. Rapidamente, pouco antes de fazermos isso, também moveremos esses colchetes. Às vezes, quando temos vários registros de console como esses, é mais fácil envolver ambos dentro de algumas chaves. A razão pela qual, se olharmos para o console no momento, não vemos qual deles é qual. Se salvarmos isso e atualizarmos, essas chaves agora transformarão essas duas em objetos, o que nos dará um nome de propriedade estático e ativo. Podemos ver claramente a diferença entre esses dois registros. Agora vamos voltar à tarefa de atualizar o quarto elemento do item da lista, para ter a classe do item da lista. Primeiro, precisamos pegar uma referência a isso. Vamos dizer const, e diremos ativo, e definiremos isso igual a documents.queryselector. Vamos pegar nosso quarto item da lista que tem essa classe ativa. Em seguida, vou configurar uma função set-timeout, que atualizará esses elementos após um determinado período de tempo. Set-timeout assume uma função que será executada. Também logo após a função como segundo argumento, passamos, o tempo de atraso. Depois de 3.000 milissegundos, que é de três segundos, vamos executar o conteúdo dessa função. Tudo o que precisamos fazer aqui é selecionar nossos elementos ativos, soltar a lista de classes, onde podemos usar o método add para adicionar uma nova classe. A classe que você deseja adicionar é list-item, faça isso igual aos três itens anteriores. Então, também dentro dessa função, podemos mover para cima os dois logs do console e ver o que acontece depois de executarmos a atualização. Salve, recarregue o navegador e dê três segundos para executar a função. O NodeList estático só tem os três itens originais, bem a coleção ao vivo foi atualizada. Isso também inclui o quarto item que acabamos de adicionar. 52. Mini desafio: crie um botão de modo escuro: Bem-vindo ao final desta seção. Como um pequeno minidesafio, gostaria que você fosse em frente e replicasse o que podemos ver na tela aqui. Temos algum HTML muito básico. A parte principal é o canto superior abertamente. O que eu gostaria que você fizesse é usar o JavaScript para responder ao clique do usuário neste botão e, em seguida, alternar entre o modo claro e escuro e fazer isso, na verdade não é tão difícil quanto parece. Tudo o que temos se entrarmos nos arquivos iniciais, é uma página de índice [inaudível] com todos os textos, assim como você vê aqui, temos nossas folhas de estilo e, atualmente, dentro da folha de estilos, temos o corpo seção que define a cor padrão como modo claro, temos a cor de fundo clara e também o texto mais escuro. Então, o que eu gostaria que você fizesse é ouvir um evento de clique no botão e, em seguida, adicionar a classe de escuro. Isso vai fazer o contrário, vamos definir a cor mais clara para o texto e também a cor de fundo mais escura, nos dar uma chance usando JavaScript, responder ao clique na classe de modo escuro. Então, também se você preencher a confiança, seria bom se você pudesse adicionar uma declaração IF, como vimos em um vídeo anterior. Verifique também se o modo escuro está habilitado no momento, se estiver, entraremos para remover essa classe que, em seguida, alternará de volta para o estado de luz. Como um pequeno guia para ajudar com isso no site da Mozilla, podemos fazer uso de um método chamado contains e podemos usá-lo para verificar se nossos elementos contêm uma determinada classe. No nosso caso, vamos verificar todas as classes que foram adicionadas ao corpo e, em seguida, verificaremos se ele contém a classe escura. Se isso acontecer, vamos querer removê-lo. Dê-nos uma chance, não se preocupe se você ficar preso ao longo do caminho, você sempre pode consultar este vídeo para obter alguma orientação. De volta à página de índice, vamos pular para a seção de cabeçalho. Você pode ver aqui que temos o botão inicial que é a lua e , logo abaixo, temos a entidade HTML que será para o sol. Com isso no lugar, vamos agora seguir em frente com minha solução e se a sua parecer um pouco diferente, está completamente bem. Entre no script, dentro da seção de script, a primeira coisa que precisamos fazer é pegar nosso botão e armazená-lo dentro da variável, com Document.querySelector veja em nosso botão. Esta é uma referência ao nosso botão que acabamos de ver dentro do HTML e só temos esse único botão, isso é bom como fizemos muitas vezes, então acessamos nosso elemento de botão. Podemos então adicionar um ouvinte de eventos e isso vai ouvir um evento de clique, isso acionará uma função e vamos chamar essa função toggleDarkMode que podemos configurar logo acima. De volta às nossas folhas de estilo, vamos abrir isso e dar uma olhada lá dentro. Como vimos antes, a seção corpo tem o modo de luz padrão ativado, o que podemos fazer é adicionar essa classe escura ao corpo, que substituirá a cor e o plano de fundo, mas apenas antes de fazermos isso, precisamos realmente selecionar o corpo e armazená-lo dentro de uma constante, Document.QuerySelector, que está no corpo. Agora temos uma referência a esse corpo, podemos selecionar isso dentro de nossa função e podemos usar isso para adicionar nossa nova classe escura, esta era lista de classes, usamos o método add, onde nós adicione a classe de escuro. Agora, com isso no lugar, abriremos nossa página de índice dentro do navegador e esse é o nosso primeiro passo. Temos o modo de luz ativado por padrão e agora, se clicarmos no ícone da lua, isso terminará na classe escura e também nas cores correspondentes. Esta é a parte mais simples, tudo o que fizemos aqui é adicionar uma classe, mas agora precisamos de uma maneira de descobrir o contrário e remover essa classe escura. Para fazer isso, podemos adicionar uma instrução IF dentro de nossa função e isso verificará se a classe escura já foi aplicada antes de adicioná-la logo abaixo. Podemos usar o método contém que acabamos de ver no navegador. O que precisamos fazer dentro da instrução IF é verificar se o corpo contém essa classe escura. Primeiro vamos verificar em negrito isso dentro de um log de console, podemos acessar o corpo, a lista de classes e, em seguida, usar o método contains para verificar se essa classe escura foi aplicada. Como você pode ver dentro da documentação, isso retornará um valor booleano verdadeiro ou falso, podemos usar isso dentro da instrução IF. Este log do console está no topo da função, verificaremos se isso é verdade no início e, logo após adicionarmos isso, verificaremos se isso se aplica no final, salve isso e mais no navegador, entre nas ferramentas do desenvolvedor, recarregue e entre no console. Não gosta da nossa declaração IF vazia, vamos apenas remover isso e atualizar e agora, se alternarmos nosso botão, inicialmente veremos o valor de false, já que o primeiro log do console está no topo da nossa função mas então nosso segundo é verdade porque adicionamos essa classe escura ao nosso corpo. Ótimo, agora sabemos que isso funciona, podemos remover nossos registros de console e agora podemos aplicar isso às nossas instruções IF. Assim como os logs, verificaremos se o body.classlist contém a classe de dark, se o código interno será executado e qual código queremos executar exatamente? Bem, se pensarmos nisso, tentamos ativar e desativar o modo escuro, o modo escuro já está aplicado, queremos remover essa classe do corpo, podemos fazer isso acessando o corpo. classlist e, em seguida, use o método de remoção que removerá nossa classe escura, salvará isso e experimentará isso dentro do navegador, o padrão é o modo de luz. Agora temos o modo escuro , mas se tentarmos clicar nisso novamente, ele ainda não retornará ao nosso modo de luz. A razão pela qual, é por causa do interior da nossa função, o que quer que façamos no início dessa função sempre se aplicará na classe de modo escuro e a maneira contornar isso está dentro de nossas declarações IF. Se adicionarmos a palavra-chave return, se a instrução IF for verdadeira e o código interno for executado, essa instrução return sairá da nossa função, o código logo abaixo não será executado. Efetivamente, se a instrução IF for acionada, somente esse bloco de código será executado. Se não for acionado, esta seção na parte inferior será executada. Tente isso mais uma vez, atualize o navegador. Nosso botão de alternância agora funcionará corretamente. Os passos restantes eram mudar esse ícone no canto superior, para mudar entre o sol e a lua. Já temos acesso ao nosso botão, que possamos selecionar isso dentro de nossa função. Primeiro, logo acima das instruções de retorno, acessaremos nosso botão e podemos alterar o HTML interno para ser igual à nossa entidade HTML. Nesta instrução IF, estamos removendo o modo escuro, então queremos fornecer uma referência da lua e selecioná-la novamente. Vá para nossa página de índice, pegue a entidade que é a lua que é co-reativa, então selecione isso, cole isso como uma string e logo abaixo, também podemos definir a cor desses elementos com o propriedade style, defina a cor igual a um valor RGB de 62, 62, 62. Fora da instrução IF, queremos fazer o oposto, se copiarmos ambas as linhas, apenas a adicionaremos na parte inferior da nossa função. O HTML interno será o nosso ícone da lua, que é este no comentário, então você salva, adiciona também a cor, eu vou para o aqua. Vamos tentar isso, alternar para o modo escuro. Estou olhando então para o modo de luz reativado com o ícone do sol, clique nisso e isso restabelecerá a lua. Em seguida, podemos alternar de volta para o modo escuro. 53. Projeto de player de vídeo: criando a interface de usuário: Ei. Bem-vindo de volta à nossa nova seção. Esta seção será usada para criar alguns projetos práticos para reforçar o que aprendemos até agora. Vamos começar as coisas com um projeto de player de vídeo. O HTML tem um reprodutor de vídeo nativo com controles para reproduzir e pausar o vídeo. Mas também podemos remover esses controles e criar um player totalmente personalizado. Fazemos isso usando algumas propriedades, métodos e eventos que teremos disponíveis. Assim como uma prévia rápida, é isso que vamos criar e esta é a versão final. Na parte superior, temos nossa exibição de vídeo em que é a largura total do navegador, abaixo temos uma barra de progresso e, em seguida, temos os controles na parte inferior. Como seria de esperar, podemos clicar no botão Reproduzir e isso começará o vídeo e iniciará as coisas com a barra de progresso. Podemos pausar, se o vídeo tiver áudio, também podemos controlar o nível de volume e também a velocidade de reprodução também pode ser controlada. Podemos tornar isso mais lento, podemos acelerar as coisas e também podemos pular o vídeo indo para trás e para frente também. Para começar as coisas, pule para os arquivos stars. Vou precisar entrar na nova seção que é o Número 5, entrar no projeto de video-player. Se você abrir a página de índice, verá que temos um iniciante bastante básico. Não temos nenhum conteúdo, tudo o que estamos fazendo aqui é vinculá-lo às nossas folhas de estilo e também ao nosso script.js. O script é um arquivo vazio, então criaremos tudo isso nós mesmos , mas temos um headstart com a folha de estilos. Isso apenas nos dá um estilo e layout básicos para que possamos nos concentrar no JavaScript. Também é fornecido um vídeo que é um arquivo MP4 e este é o mesmo que você acabou de ver na versão final. Mas você também pode substituir isso por um vídeo de sua escolha, se preferir, tudo funcionará exatamente da mesma forma. Vamos começar abrindo nossa página de índice dentro do navegador, copie o caminho para este arquivo, colá-lo e, como seria de esperar, ainda não há conteúdo na tela. Começaremos dentro da seção de corpo, eu uso os elementos de vídeo HTML e este é um invólucro para o conteúdo que vamos colocar dentro. Se você usou os elementos de vídeo nativos ou mesmo os elementos de áudio, isso será bastante familiar, se não, vídeo é apenas um invólucro onde fornecemos a fonte para nossos arquivos de vídeo. A fonte é fornecida dentro com os elementos de origem. Isso não contém nenhum conteúdo dentro, então só temos a única tag. Não precisamos fechá-lo assim, em vez disso, usamos isso para fornecer a fonte aos nossos arquivos que queremos reproduzir e, no nosso caso, é o video.mp4. Um segundo atributo que podemos adicionar é o tipo de vídeo e, no nosso caso, esse é o tipo de vídeo e é um formato MP4. O elemento de vídeo também suporta outros tipos também. Embora isso também adicione algum texto no lugar, o que é algum texto de fallback se o vídeo não for suportado. Isso não é realmente um problema hoje em dia já que o player de vídeo é muito bem suportado em todos os navegadores mas vale a pena colocar isso, apenas por precaução. Digamos que seu navegador não suporta vídeo HTML5, então, inicialmente, se abrirmos isso dentro do navegador, atualizamos a página, efetivamente temos uma imagem estática, podemos clicar nisso, podemos jogar. A maneira como podemos fazer isso é fazer uso dos controles de vídeo HTML5 nativos. Ative isso, é bem simples, basta entrar no invólucro de vídeo e adicionamos os atributos de controles. Isso ativará os controles de vídeo padrão que agora podemos ver na parte inferior. Podemos jogar isso. Temos o tempo decorrido, o tempo total do vídeo, temos uma barra de progresso e também podemos controlar coisas como o volume, podemos mudar isso para ser tela cheia. Além disso, temos algumas opções para a velocidade de reprodução e também para ativar picture-in-picture. Claro, tudo isso é muito bom e é ótimo ter um player de vídeo nativo, para nossa situação, não nos aprende nada sobre JavaScript.` O que eu gostaria de fazer é remover esses controles nativos por removendo o atributo controls e recrie esses botões para interagir com o vídeo, reproduzi-lo usando JavaScript. Onde poderíamos fazer isso, se passarmos para o site da Mozilla, que é developer.mozilla.org, faça uma pesquisa por vídeo. Este é um minuto aqui. Dentro daqui, veremos um exemplo que não é nada já não vimos até agora. Temos o invólucro de vídeo, temos o atributo controls, temos a fonte para nossos arquivos de vídeo e seguida, os textos de fallback se o player de vídeo não for suportado. Temos vários outros atributos, como, se você quiser que o vídeo também seja reproduzido e também se formos um pouco mais longe, temos acesso a vários eventos. Vários eventos são configurados durante toda a reprodução de nosso vídeo, por exemplo, olhando para isso agora para eventos quando o vídeo está sendo reproduzido, para quando ele está pausado e também o progresso do vídeo também à medida que o tempo é atualizado. Além disso, esse elemento de vídeo herda métodos de uma API pai chamada elementos de mídia HTML. Vamos fazer uma pesquisa por isso, rolar para cima, HTML, elementos de mídia e também esses eventos para os quais podemos listar agora. Este elemento de mídia tem propriedades e métodos, como a capacidade de reproduzir impulso, podemos alterar o volume e podemos ver por quanto tempo a mídia está sendo reproduzida. Podemos vê-los se rolarmos um pouco mais, teríamos várias propriedades. Também podemos alternar os controles daqui, se quiséssemos, poderíamos verificar a hora atual do vídeo enquanto ele está sendo reproduzido, podemos verificar a duração do vídeo, quanto tempo ele dura, podemos fazer loop o vídeo, também podemos silenciar o vídeo, e rolando para baixo, também teremos os vários métodos que podemos usar também. Temos alguns métodos úteis, como a capacidade de reproduzir e pausar um vídeo e vamos fazer uso desses em nossos projetos. Nossos elementos de vídeo que usamos dentro daqui têm acesso herdando todas essas propriedades e métodos. É claro que métodos regulares, como um dif, não precisariam de acesso a esses métodos extras é por isso que eles precisam ser herdados. Mas por que não apenas anexar esses métodos e propriedades extras diretamente a esses elementos de vídeo? Por que precisamos herdá-los em primeiro lugar? Teremos qualquer meio separado, outros elementos também podem usá-los também. Olhando para isso, outros elementos, como os elementos de áudio, também podem usar esses mesmos métodos e propriedades, como reproduzir e pausar, o que significa que não precisamos duplicá-los, para adicioná-los tanto para o vídeo quanto para os elementos de áudio. Além disso, este elemento de mídia HTML faz parte de uma coleção de muitas APIs da Web diferentes que nos dão acesso ao poder de muitas coisas incríveis dentro do navegador. Na verdade, uma dessas APIs da Web listadas é a API DOM. Este é o que usamos na última seção para interagir com nossos elementos DOM. Por exemplo, entre outros, que são os elementos da tela HTML, que habilita várias funções de desenho. Isso está logo acima. Ele permite desenhar dentro do navegador e vamos dar uma olhada neste mais tarde também. Também temos coisas como a Geolocation API, para que os usuários possam compartilhar sua localização. Temos arrastar e soltar, o que nos permite mover elementos na página e soltá-los em determinados locais. Vamos usar essas propriedades e métodos de mídia muito em breve, mas primeiro precisamos criar alguns controles HTML, que vamos usar para ativá-los. Vamos criá-los dentro da seção do corpo, logo abaixo do vídeo. Isso criará uma nova seção com a classe de controles. Isso só acionará nosso CSS e vamos abrir esta seção. No topo, começaremos com uma barra de progresso, assim como vemos na versão final, e então criaremos várias novas seções de cima para baixo. Do topo, temos a barra de progresso, ela está no atributo value, que será inicialmente o valor zero e atualizaremos esse valor à medida que um progresso de vídeo for atualizado. Em seguida, uma seção div, que será o invólucro para os botões Reproduzir e Pausar. O primeiro botão detecta a reprodução e, como isso será controlado usando JavaScript, isso precisará de um ID exclusivo. Isso pode ser Play, e assim você chutar nosso CSS, daremos uma rodada a esta classe aqui. Duplique este e altere o ID para pausar e também o texto também, dê a ele um “Salvar” e “Atualizar” o navegador. Bom. Claro, eles ainda não farão nada porque precisamos pegá-los usando JavaScript e acionar todas as propriedades e métodos que procuramos antes. A próxima seção é para o volume, então logo abaixo da nossa última div, criaremos uma nova. A classe de alinhamento. Da esquerda para a direita, criaremos um elemento de span e isso vai reduzir o nível de volume, então diga volume negativo no centro e entrada que será um controle deslizante de alcance. O ID é igual ao volume. Então também podemos controlar os valores mínimo e máximo para essa entrada. O mínimo será igual a zero e o máximo é igual a um. Isso é o que usamos dentro do JavaScript. Vamos pegar o intervalo entre zero e um. O volume detectado é selecionado pelo usuário. Também podemos saltar de zero para um em vários estágios e podemos fazer isso com essa etapa, que será igual a 0,1. Isso significa que cada vez que movemos esse círculo, isso saltará em incrementos de 0,1, basicamente nos dando 10 passos. Depois disso, logo abaixo um segundo período de elementos e este é aumentar o volume. Vamos dizer volume mais. Aí estamos nós. A próxima seção é para essas velocidades de reprodução, então serão vários botões que vão de 0,5 a uma velocidade dupla. Para manter esse lugar consistente em uma div, e o primeiro botão será para a velocidade de reprodução de 0,5, a classe de velocidade e, em seguida, copie e cole isso mais três vezes. Isso será para um, que é a velocidade de reprodução regular, 1,5, e depois o dobro da nossa velocidade regular. A última seção, novamente dentro de uma div, isso será para nossos botões de volta e para frente. Último botão, podemos usar algumas entidades HTML para obter essas direções esquerda e direita. Entidade para o primeiro é agarrar isso dentro do JavaScript com um ID exclusivo que será igual a back e também a classe de skip. Duplique isso, e isso é para encaminhamento. Usaremos a mesma classe, onde a entidade é a e isso nos dará o ícone Avançar. Vamos tentar isso. “Atualizar” e nosso controle agora está completo dentro do navegador. Claro, eles não farão nada porque são apenas elementos HTML comuns. Precisamos controlá-los dentro do nosso roteiro. Vamos entrar em nosso script e podemos pegar cada um desses elementos com seu ID exclusivo. Abra nossos scripts e, além de acessar cada um desses botões de controle, também precisamos de uma referência ao nosso vídeo real. Precisa de uma referência a todos os elementos de vídeo ou invólucro, pois esses elementos podem acessar todas as propriedades , métodos e eventos que nos permitirão controlar o player. O Document.querySelector, passe o vídeo. Faremos o mesmo para cada um de nossos controles. Precisamos acessar nossa barra de progresso porque precisamos atualizar isso com JavaScript, precisamos acessar a reprodução e a pausa. Queremos acessar a entrada de volume, todos os diferentes botões de velocidade e, finalmente, os botões para trás e para frente. Faremos isso de cima para baixo. O próximo é para a barra de progresso e usamos o seletor de consulta. Em seguida, temos os botões de reprodução e pausa. Este é um ID, usamos o hash, o ID do jogo e vamos duplicar isso. O segundo é pausa. Para o próximo, precisamos do volume. Vamos pegar o tipo de entrada com o ID do volume, duplicamos este, alteraremos isso para volume. O próximo, se voltarmos à nossa página Índice, selecionará todos os nossos quatro botões. Não temos um ID para cada um deles, será muito mais simples se os selecionarmos pela classe, para que possamos usar o seletor de consulta todos para pegá-los. Em seguida, no próximo vídeo, detectaremos qual botão foi selecionado. A próxima constante é a velocidade de avanço e desta vez precisamos usar o seletor de consulta todos, usar um ponto, já que esta é uma classe e, em seguida, os dois finais são para nossos botões de volta e para frente. Desta vez estamos de volta aos IDs, então usamos um hash. Isso é para o nosso botão Voltar, duplique isso e altere isso para ser avançado. Bom. Estamos fazendo um bom progresso com este reprodutor de vídeo. Agora adicionamos os controles. Temos acesso a todos esses controles por meio de nossas variáveis e, no próximo vídeo, podemos começar a adicionar eventos, propriedades e métodos para controlar nosso player de vídeo. 54. Projeto de player de vídeo: eventos de vídeo, propriedades e métodos: No vídeo anterior, analisamos brevemente esses elementos de mídia HTML. Discutimos que ele tinha algumas propriedades e métodos dos quais podemos aproveitar. Isso é o que vamos fazer agora em nosso JavaScript. Propriedades sábias, se rolarmos para baixo, temos algo chamado hora atual, e isso é algo que podemos usar para capturar o tempo de reprodução atual em segundos. Desça um pouco mais longe. Também temos algo chamado duração. Esta é a duração total do vídeo. Também precisaremos disso mais tarde neste vídeo. Um pouco mais abaixo em direção ao fundo, também devemos ter alguns métodos disponíveis. Aqui podemos aproveitar métodos como brincar e pausar. Claro, isso realmente será útil para o nosso projeto. Vamos ao nosso script.js e implementá-los dentro daqui. A brincadeira e a pausa são bem simples. Tudo o que precisamos fazer é pegar nossos elementos específicos e depois adicionar um ouvinte de eventos. Vamos agora clicar gratuitamente e, em seguida, podemos executar esses métodos. Dentro do nosso player de vídeo, dentro do nosso HTML, já temos esses botões configurados para reproduzir e pausar, e em nosso script já temos uma referência a ambos os elementos. Podemos começar acessando o botão Reproduzir e depois no ouvinte de eventos. Vamos escutar o evento click. Você pode adicionar uma função em linha dentro daqui ou adicionar isso separadamente. Eu só vou adicionar este nome de função em linha; da função do jogo. Então, o que você quer fazer dentro dessa função? Bem, o que precisamos fazer é acessar nosso vídeo, que são nossos elementos de vídeo, e como isso herda todas as propriedades e métodos dos elementos de mídia HTML, podemos usar esses métodos que acabamos de ver, e o que precisamos é jogar. Podemos experimentar isso. Vamos testar nosso player de vídeo, atualizar, clicar em “Reproduzir” e ele atualiza instantaneamente o vídeo. É claro que o botão de pausa ainda não funciona, mas se voltarmos ao nosso JavaScript, poderemos acessar isso e fazer exatamente o mesmo adicionando um ouvinte de eventos. Para o evento click, executaremos uma função chamada pausa. pausa ficará praticamente a mesma. Só precisamos acessar nosso vídeo e o método de postagem. Então também podemos testar isso está funcionando também. Jogue, está tudo bem. Em seguida, faça uma pausa e isso pausará nosso vídeo. Assim como esses dois botões também podem ser bons para reproduzir e pausar o vídeo quando clicamos no vídeo real na parte superior. Além disso, alguns jogadores permitem que você faça isso com a barra de espaço. Isso criará uma função que você alternará entre o estado de reprodução e a pausa. Primeiro passo, vamos enquadrar nossa função para alternar o jogo. A primeira parte dessa função detectará se o vídeo já está pausado. Se for, então executaremos a função play. Se não, iremos em frente e pausaremos. Criaremos uma instrução if dentro daqui, que verificará se o vídeo está pausado. Como saber que isso funcionará. Bem, se voltarmos para a documentação e rolarmos para baixo até as propriedades, teremos acesso a uma propriedade somente leitura chamada pausada, que retornará um valor verdadeiro ou falso. No nosso caso, se o vídeo estiver pausado, gostaríamos de fazer o contrário e executar o método de reprodução. Se isso for verdade, também podemos retornar dessa declaração if. Então logo abaixo, se isso não for verdade, o que significa que o vídeo não está pausado, não queremos pausar o vídeo. Para que isso funcione, precisamos acessar nossos elementos de vídeo, que são armazenados dentro dessa constante de vídeo. O lugar é baixo na parte inferior, vídeo.addeventlistener. Vamos listar agora para um evento de clique neste vídeo e, em seguida, executar nossa função, que é alternar a reprodução. Salve isso e mais no navegador, recarregue isso. Como isso está atualmente no estado pausado, que é verdadeiro dentro das instruções if, agora devemos poder clicar nisso e depois reproduzir o vídeo. Clique nisso e isso deve funcionar. Em seguida, clicaremos nisso novamente. O segundo clique fará o oposto e pausará. Bom. Tudo isso agora funciona. A próxima coisa, como mencionado anteriormente, é também alternar entre o estado de reprodução e pausa quando o usuário atinge a barra de espaço. Ao pressionar a barra de espaço, isso não é anexado a nenhum elemento. O que podemos fazer para ouvir a barra de espaço é adicionar um ouvinte de eventos ao documento real. Vamos pegar isso, selecione adicionar ouvinte de eventos. Queremos listar para um evento de chave para baixo. Esta tecla para baixo ocorre quando qualquer botão no teclado é pressionado. Em seguida, isso executará uma função. Aqui, antes de executarmos nossa função de reprodução de alternância, lembre-se de que estamos ouvindo qualquer tecla a ser pressionada no quadro. O que precisamos fazer é primeiro detectar se a barra de espaço está sendo pressionada ou qualquer outra tecla. Podemos fazer isso acessando as informações do evento, passa para a função. Em seguida, podemos dar uma olhada nas informações do evento. Salve isso, atualize, abra as ferramentas do desenvolvedor, entre no console. O que precisamos fazer agora é pressionar qualquer tecla dentro daqui. Isso não disparou nossos eventos de teclado. Se abrirmos isso, essa propriedade code neste objeto nos dirá exatamente qual botão de teclado foi pressionado. Meu caso, pressiono a barra de espaço, que é o código do espaço. Agora podemos acessar isso dentro da nossa função. Em vez do log do console, verificaremos se o event.code é igual à cadeia de espaço, que corresponde a essa string aqui. Então o que queremos fazer é executar nossa função de reprodução de alternância. Esse é o resultado, desativado e atualizado. Agora, se pressionarmos a barra de espaço, isso executará nossa função mais uma vez e ela será pausada. Além disso, você descobrirá que se você pressionar qualquer outro botão do teclado, ele não ativará essa função. Bom. Movendo-se para baixo, a próxima coisa que temos é esse controle deslizante de volume. Se entrarmos na página de índice, podemos ver que isso está sendo controlado pela entrada com o tipo de intervalo. O intervalo que definimos aqui é um mínimo de zero e um máximo de um. Portanto, zero ficar em silêncio e o número um sendo o volume máximo. À medida que você usa os slides, ele irá para cima ou para baixo em incrementos de 0,1 da referência vertical do script para isso com essa constante de volume. Selecione isso. Em seguida, adicionaremos um ouvinte de eventos. Queremos ouvir um evento de entrada. Isso significa que o usuário moveu a entrada. Novamente, isso acionará uma função chamada alterar volume. Volte para a documentação da Mozilla. Podemos ver aqui dentro. Também temos acesso a uma propriedade de volume. Precisamos ter certeza de que o volume é exatamente o mesmo que o nosso controle deslizante de alcance. Podemos fazer isso acessando nosso video.volume, que é essa propriedade aqui, e então queremos definir que isso seja igual a um novo valor. Esse novo valor é o valor da nossa faixa de volumes. No topo, temos acesso a todo o volume, que é essa entrada aqui. Isso é apenas uma referência ao elemento real. Se o valor do controle deslizante atender aos acessos com a propriedade dot value. Vamos experimentar isso. Salve e atualize. Ele pode jogar. Agora, se você deslizar o volume para cima e para baixo, se você construiu aqui uma diferença nos níveis de volume movendo-se para baixo, a próxima coisa que temos são nossos quatro botões, o que vai diminuir a velocidade e acelerar o reprodução do vídeo. Em nosso script, usamos seletor de consulta todos para selecionar todos esses botões liga/desliga instalá-los na variável de velocidade. Isso significa que temos acesso a todos esses quatro botões. Também precisaremos de uma maneira de pegar os valores específicos. Isso podemos adicionar um atributo personalizado chamado velocidade de dados. Isso será igual ao valor de 0,5 e, em seguida, vamos apenas copiar isso, colar isso em nosso próximo botão. Este é o valor de um. O terceiro é 1,5 e o último é o dobro da velocidade de reprodução, que é dois. Este é apenas um atributo personalizado e geralmente começamos atributos personalizados com esse prefixo de dados. Sabemos de vídeos anteriores que podemos acessar os valores de qualquer um desses atributos. Agora volte para o script e podemos começar adicionando um EventListener a qualquer um desses botões. O script até a parte inferior, acesse todos os quatro botões que você armazenou na constante de velocidade. Como temos vários valores, vamos fazer um loop sobre a largura forEach. Função do cliente que será executada para cada um dos nossos botões, vou armazenar uma referência a cada um dos nossos botões dentro de uma variável e depois acessar todos os botões. Adicione um EventListener. Vamos apenas agora para um evento de clique e, em seguida, executaremos uma função chamada setSelected. Também não criamos isso ainda, então vamos apenas criar isso logo acima, setSelected como no corpo da função. Essa função é responsável por fazer duas coisas. Primeiro de tudo, se o vídeo não estiver sendo reproduzido atualmente, podemos clicar em qualquer um desses botões, mas primeiro queremos começar a reprodução. Fazemos isso assim como acima com video.play, passe isso para nossa função. Então, a segunda coisa que queremos fazer é selecionar a velocidade de reprodução específica. Ou seja, precisamos de acesso às informações do nosso evento. Então, como sempre, usamos e.target para acessar os elementos específicos. Em seguida, podemos usar GetAttribute, que vimos no passado para capturar o atributo de velocidade de dados do cliente. Isso agora deve nos dar acesso aos nossos valores que vão entre 0,5 até 2. Também precisamos de uma maneira de definir esse valor para o nosso vídeo. Primeiro de tudo, acesse nosso vídeo e, em seguida, dentro da documentação, temos outra variável de propriedade chamada playbackRate. Então acesse isso. Isso é igual ao volume do nosso atributo. Vamos experimentar isso. Carregue a página. Então vamos tentar 0,5, o que é muito lento. Velocidade única, 1,5 e, em seguida, o dobro da velocidade. Bom. À medida que este vídeo está sendo reproduzido, também queremos atualizar a barra de progresso no topo. Para fazer isso, podemos acessar alguns eventos diversos. Podemos fazer isso aproveitando algumas propriedades chamadas duração e CurrentTime. Sob a seção de probabilidade, no topo, temos o CurrentTime, que é o tempo de reprodução equivalente em segundos, e também a duração do vídeo. Podemos usar essas duas propriedades para calcular o valor da barra de progresso em qualquer ponto mas também precisamos fazer isso regularmente. Infelizmente, há alguns eventos para os quais podemos listar agora se rolarmos para baixo até a seção de eventos. Na parte inferior abaixo de eventos, temos um evento chamado timeupdate, que será acionado toda vez o atributo currentTime for atualizado. O que significa que podemos ouvir agora a hora atual a ser atualizada e depois recalcular a barra de progresso a cada vez. Etapa 1, criaremos uma nova função que realmente atualizará a barra de progresso e , em seguida, chamaremos isso em cada atualização. Ótima função chamada updateProgress. Poderíamos atualizar imediatamente a barra de progresso, mas primeiro adicionaremos instruções if rápidas dentro, que verificará se o vídeo.CurrentTime é maior que o valor de zero. Isso só será executado se o vídeo começar a ser reproduzido e, em seguida, pudermos acessar nossa barra de progresso. Isso é armazenado na constante de progresso. Defina o valor. Esse valor pode ser calculado dividindo o CurrentTime pela duração. Então Video.CurrentTime facilmente propriedades que acabamos de ver, divida isso pelo vídeo.duração. Para executar essa função, precisaremos adicionar um ouvinte de eventos a um player de vídeo. Acesse o vídeo, adicione EventListener e, desta vez, não estamos listando agora para um clique, queremos listar agora para um dos métodos internos. O método interno é esse timeupdate, que chamará nossa função de progresso de atualização. Vamos testar isso no navegador. Clique em Jogar. Assim que isso começar nossa reprodução, faremos a atualização em nossa barra de progresso. Faça uma pausa, e isso vai parar. Bom. Também tentaremos definir a velocidade lenta e isso a diminui. Além disso, a velocidade mais rápida também aumentará isso. Estamos quase lá com nosso player de vídeo e a última coisa a cuidar são esses botões para trás e para a frente. A maneira de configurá-los é também fazer uso do CurrentTime e, em seguida, deduziremos um número de segundos e também aumentaremos o número de segundos, dependendo de qual botão foi clicado. Todos nós temos acesso a ambos os botões com as constantes para trás e para frente. Ele pode estar com a variável de volta adicionando um EventListener. Agora é para um clique, que então executará uma função. Chamaremos isso de volta e , em seguida, acessaremos nosso reprodutor de vídeo responda ao CurrentTime usando o operador de atribuição de subtração. Eu defino isso igual a um valor de cinco, e isso deduzirá cinco segundos e, em seguida, redefinirá o CurrentTime para ser igual ao novo valor. Este é simplesmente um atalho e seria exatamente o mesmo que fazer vídeo.CurrentTime é igual a vídeo.CurrentTime leva cinco. Então, ambos são exatamente os mesmos. Pelo contrário, podemos simplesmente Copiar e Colar isso. Desta vez, precisamos ouvir o botão de encaminhar. A função também pode ser chamada para frente. Desta vez, a única diferença é que queremos aumentar o tempo em cinco segundos. Vamos experimentar isso. Atualize, o que encaminho, e isso atualizará a barra de progresso. Clique em voltar. Isso acabará por cinco segundos do nosso CurrentTime. 55. Jogo com formas: criando a interface do usuário: Bem-vindo de volta. Temos um joguinho divertido para terminar esta seção, que será um jogo de queda de forma. Isso fará uso da API de arrastar e soltar HTML, o que significa que podemos criar todas essas formas. Temos uma seção na parte superior com contornos vazios e, em seguida, as formas abaixo. O usuário pode arrastar para eles e soltá-los no local correspondente correto. Cada uma dessas formas na parte inferior tem uma forma correspondente na parte superior. Se você acertou, aumentamos a pontuação. Você entende isso errado, essa pontuação é deduzida por um. Começando neste vídeo criando todo o HTML, então basicamente a interface do usuário. Em seguida, nos próximos vídeos, faremos tudo isso funcionar usando JavaScript. Este projeto fará uso de outra API da Web, que é a API de arrastar e soltar. A API de arrastar e soltar nos dá acesso a vários eventos de arrastar que podemos usar dentro do JavaScript. Podemos ouvir quando um elemento começou a arrastar. Podemos ouvir quando o arrasto terminar. Podemos escutar quando um item está sendo arrastado, quando ele é deixado um alvo específico e também ouvir quando este item for descartado. Isso é o que vamos usar nos próximos vídeos. Mas, por enquanto, vamos para os arquivos do projeto e começaremos dentro da página de índice. Dentro do jogo de queda de forma, esta é uma página de índice bem simples. Outra metade é a nossa estrutura muito básica que se conecta a um script.js vazio. Vamos começar este projeto. Já adicionei alguns estilos a isso. Tudo o que fizemos aqui é adicionar algumas classes que se vinculam a várias formas. Por exemplo, temos vários retângulos, temos pílulas, temos, temos quadrados. Cada um deles geralmente é a largura e a altura. Temos uma cor de fundo, e alguns deles também têm um raio fronteiriço também. Vamos entrar em nosso HTML, criaremos todos esses elementos e os vincularemos às classes corretas. O script está vazio para os vídeos futuros, e vamos começar no index.html. Vamos pular aqui e para a seção do corpo. A seção do corpo será relativamente simples. Se olharmos para o jogo final, temos uma seção de cabeçalho com a pontuação e algum texto e, em seguida, temos duas seções separadas abaixo. Cada uma dessas seções será uma grande forma div. Em seguida, vamos apenas vinculá-los aos nomes das classes para fornecer cada uma dessas formas e cores. Na seção corpo, no cabeçalho, que será para uma seção muito superior. Como você pode ver, a primeira coisa que precisamos é de um título. É h3. Vamos dizer score, que será apenas texto codificado. Mas logo depois precisamos de um valor dinâmico. Podemos cercar isso em um período, colocar no ID da pontuação e, em seguida, preencheremos o conteúdo da extensão mais tarde usando JavaScript. Uma coisa que não podemos ver nesta versão final é um botão chamado Play Again. Isso porque ele colocou alguns só aparecerão no final do jogo. Mas, por enquanto, colocaremos isso e depois esconderemos isso mais tarde para detectar Reproduzir novamente. Então, vamos abrir nossa versão dentro do navegador. Copie o caminho para nosso índice. Você deve ver todos os estilos predefinidos agora entraram em ação. A última coisa que precisamos dentro desse cabeçalho é o texto. Logo abaixo do botão, adicione um elemento p. O texto de arrastar, as formas coloridas nos orifícios correspondentes. Bom, depois de termos feito isso, passamos para nossas duas seções. A seção superior será a seção soltar porque soltamos as formas dentro daqui, e a parte inferior será a seção de arrastar. Estes são praticamente os mesmos. Eles terão os mesmos nomes de classe para criar as formas. Também adicionaremos uma classe adicional à seção superior. Eles só têm o contorno em vez da cor de fundo sólida. Vamos verificar isso. Parece bom. Agora, logo abaixo do cabeçalho, crie nosso primeiro, que é a seção superior dentro de uma div, e nos dê uma classe da seção drop. Duplique isso e nossa segunda seção será para a seção de arrastar. Podemos usar qualquer elemento que você quiser para cada uma dessas formas, será apenas um elemento vazio. Vou para uma div. Não precisamos de nenhum texto ou conteúdo dentro da div porque usamos a classe CSS para vincular isso e criar a forma na página. Por exemplo, sobre a classe de quadrado. Salve isso. O quadrado agora aparece na tela. Vemos isso porque essa classe de quadrado dentro do nosso styles.css, aqui como a cor de fundo e também tem uma largura e um conjunto de altura. Isso colocará automaticamente nossa forma na tela. O mesmo para todas as outras classes, duplique esta e a segunda. Este é para o nosso retângulo, número 3 é para o círculo, número 4, número quadrado 2. Mesmo que tenhamos algumas das mesmas formas como dois quadrados diferentes aqui, você notará que eles são tamanhos diferentes para tornar o jogo um pouco mais difícil. Temos o quadrado número 2. O próximo é para oval número 2 e retângulo 2, retângulo número 3. O próximo é para pílula, oval e, finalmente, a pílula número 2. Vamos salvar isso e conferir nosso projeto. Atualizar. Há formas ovais agora na tela. A próxima coisa a fazer é basicamente copiar todas essas seções, todas as formas, e colá-las dentro da nossa seção de arrastar. Mesmo todas as nossas formas agora no lugar. Mas precisamos agora misturar a segunda seção porque se não tivéssemos todos na mesma ordem acima, será um jogo muito fácil. Apenas misture alguns desses. Vou fazer o mesmo que uma versão final. No início temos o retângulo, está no topo, o quadrado, o terceiro é a pílula, quadrado 2. Não importa se o seu é diferente ou o mesmo. Você pode fazer exatamente como você gostaria. Oval 2, pílula número 2 próximo, círculo, retângulo e, em seguida, retângulo. Isso é completamente bom, desde que esteja em uma ordem diferente das acima. Para manter nossas formas consistentes em ambas as seções, usamos esse mesmo nome de classe nas seções superior e inferior. Mas o problema que temos atualmente em nossa versão é que as formas na parte superior têm essa cor de fundo. O que queremos é exatamente como a versão final em que temos um esboço vazio. Podemos arrastar essas formas, que então preencherão a cor de fundo para dar a ilusão de que a forma está sendo lançada em um buraco. Podemos fazer isso adicionando uma classe adicional. Se dermos uma olhada dentro de nossas folhas de estilo e depois descermos para o fundo, teremos essa classe de queda. Esta é certamente uma borda roxa, que vemos na versão final torno de cada uma de nossas formas. Também removemos qualquer cor de fundo. Agora, dentro da nossa página de índice na seção superior, podemos adicionar essa classe, deixei cair cada uma de nossas formas. Podemos copiar e colar isso se você quiser, ou você pode digitar isso. Lugares para cada uma de nossas formas. Temos que salvar e vamos conferir nossa própria versão. Atualizar. Agora eu tenho uma forma vazia que agora podemos mover qualquer um desses elementos para dentro. É claro que, se tentarmos clicar e mover qualquer um desses, não veremos os eventos de arrastar que ainda. Mas isso é algo que será ativado nos próximos vídeos quando usarmos o JavaScript. 56. Jogo com formas: arraste e solte eventos: Como seria de esperar, basta colocar elementos HTML comuns como temos aqui. Quando tentamos clicar e arrastar qualquer uma dessas formas, nada acontece. Torne essas formas arrastáveis, o primeiro passo é adicionar um atributo chamado arrastável e defini-las como iguais a true. Porque todos sabemos que as seções inferiores são arrastáveis, adicione na seção de arrastar e, em seguida, salte para nossa primeira forma. Defina arrastável para ser igual a um valor verdadeiro. Agora, se tentarmos atualizar e clicar em qualquer um desses elementos, agora podemos arrastá-los pela página. Ainda precisamos configurar coisas como a zona de queda para permitir que essas caiam no lugar. Mas, por enquanto, este é o nosso primeiro passo que precisamos dar. Copie isso e cole isso em cada uma de nossas formas adicionais. Vou experimentar isso. Bom. Agora podemos mover todos eles, mas ainda não podemos fazer muito com eles. Isso ocorre porque precisamos de uma configuração exatamente o que queremos fazer em cada etapa. A API de arrastar e soltar tem vários eventos que podemos ouvir. Isso é o que vimos inicialmente no primeiro vídeo. Podemos fazer uso deles dentro de nossos scripts, para entrar em nosso scripts.js, que deve ser um arquivo vazio. Então, no topo, o que vamos fazer primeiro é cortar todos os nossos botões com a classe de drop. Na página de índice, todas as seções superiores têm essa classe solta. Podemos usar query select all para cortar todos esses elementos e, em seguida, podemos fazer um loop sobre esses elementos, e ouvir se qualquer elemento ser descartado nas seções. Document.querySelectorTudo como na classe de drop, e então podemos armazenar isso dentro de uma constante chamada dropzones. Bom, agora temos acesso a todas essas dropzones. Precisamos então fazer um loop sobre eles e adicionar um ouvinte de eventos, para ouvir uma queda. Pegue, todas as dropzones constantes, loop sobre espera para cada um, vai executar a função. Então, cada uma dessas formas passará para nossa função. Vamos chamá-los de elemento, soltar os elementos, para que cada indivíduo 1, possamos adicionar um ouvinte de evento, o que vem a isso agora, para o evento drop. Esses eventos de soltar estão ativados devido à API de arrastar e soltar. Isso é o que vemos aqui onde um item é descartado no destino de soltar válido. Separado por um comunista, irá acionar uma função chamada HandleDrop. Para cada função logo acima, ela cairá. Então, tudo o que fazemos por enquanto é colocado em um log simples do console, pelo menos agora isso está funcionando. O texto de descartado, então este é o evento de queda agora tratado. A próxima coisa que precisamos fazer é ouvir o evento de arrastar novamente. Podemos fazer isso com um evento chamado drag starts e voltar para a seção de eventos de arrastar. Este é um que precisávamos aqui. Este evento é disparado assim que o usuário começa a arrastar qualquer um de nossos itens arrastáveis. O que vamos fazer é acessar nosso documento completo e adicionar um ouvinte de eventos para ouvir o evento drag start em qualquer um de nossos elementos. Coloque em drag starts, que então executará uma função chamada HandleDragStart. Para criar isso logo acima, HandleDragStarts. Por enquanto, vamos colocar em um log de console mais uma vez, verifique se tudo está funcionando. Arraste começa e, em seguida, copiaremos e colaremos esta seção que acabamos de criar e adicionaremos isso logo abaixo. A única diferença é substituir o início de arrastar pelo drag end, o mesmo para o log do console e também o nome e a função do evento. Agora, agora podemos testar isso, garantir que seu arquivo esteja salvo e, em seguida, ele recarregar o navegador, cair no console e agora podemos experimentar isso. Se clicarmos em qualquer um dos nossos elementos arrastáveis, podemos movê-los e veremos que o evento drag start foi disparado. Solte isso sobre um de nossos elementos. Vemos que o final do arrasto também foi disparado. Mas uma coisa que faltamos é esse log do console ou descartado. O que esperaríamos isso quando passamos por uma de nossas zonas de queda, que é uma dessas formas superiores, e estamos soltando elementos em qualquer lugar dentro delas. Esperaríamos que esse log do console fosse disparado. A razão pela qual não podemos descartar é porque o comportamento padrão é não permitir que as coisas sejam descartadas em qualquer página da Web por padrão. Precisamos evitar esse comportamento padrão em nossas dropzones. Podemos fazer isso ouvindo um evento chamado dragover, e isso significa que estamos arrastando um elemento para uma determinada zona, onde queremos que ele seja descartado. Na parte inferior, voltará a fazer um loop sobre todas as nossas dropzones e, em seguida, fazer um loop for cada para acessar nossas dropzones. Para cada um, que é cada uma de nossas formas vazias. Execute uma função. Essa função terá um valor para cada uma de nossas formas. Podemos acessar o valor e, em seguida, adicionar um ouvinte de eventos. Este ouvinte de eventos vai listar agora para um evento chamado dragover. Este é o evento aqui e é chamado toda vez que um item arrastado é movido sobre alvos de soltar válidos. Basicamente, deseja remover todos os itens nesta seção superior. Ele vai disparar esse evento chamado dragover, separado por vírgula Grande função chamada AllowDrop, que podemos criar logo acima. Agora, quando clicamos em qualquer um desses elementos, em nossa versão e os arrastamos sobre qualquer uma dessas zonas suspensas com qualquer pessoa para acessar as informações do evento e, em seguida, podemos chamar de evitar padrão. Lembre-se de que o comportamento padrão era não permitir que isso fosse descartado. Agora estamos substituindo é permitir que todas as funções sobre o topo sejam chamadas agora. Vamos tentar, salvar e atualizar. Arraste qualquer um desses e solte-os em um alvo. Agora vemos o texto de descartado, e nossa função agora está funcionando corretamente. Bom. Agora sabemos que essa função está funcionando e todos os outros também estão disparando também. Agora podemos começar a fazer as coisas acontecerem dentro do nosso jogo. O que queremos fazer é permitir que uma determinada forma seja lançada em uma determinada zona de queda. Por exemplo, queremos apenas que o retângulo seja descartado no retângulo e que um círculo seja deixado cair no círculo, dentro do nosso index.html. Uma maneira de fazer isso é corresponder às classes específicas, portanto, se arrastarmos a classe do retângulo, queremos que isso seja descartado na classe do retângulo na zona dropzone. Para que isso aconteça em nossa função de queda de alça, o que precisamos fazer é ter acesso a ambos os elementos. Precisamos ter acesso ao elemento que foi arrastado, e também aos elementos que estamos soltando. Podemos então comparar as duas classes são as mesmas. Antes de permitir essa queda, podemos fazer isso dentro de nossa função acessando as informações de eventos, e isso nos dará acesso a todos os elementos com e.target. Em seguida, podemos acessar nossa lista de aulas. Vamos verificar isso no navegador. Atualize, arraste o retângulo e solte isso sobre qualquer um de nossos elementos. Nós deixamos cair isso sobre o quadrado no canto superior esquerdo, e receberemos de volta uma lista de classes que inclui drop e também square. Isso é exatamente o mesmo que vemos dentro do nosso HTML. Vamos tentar mais um. Tentamos o retângulo, e este também funciona também. É assim que podemos acessar as classes para os elementos descartados. Bem, como vamos acessar as classes para os elementos arrastados? Bem, uma boa maneira de fazer isso é armazenando isso dentro de uma variável no topo da nossa página. Logo acima de nossas dropzones, dizemos deixar selecionado. Podemos atualizar esse valor dentro da função chamada handle drag start. Lembre-se, isso é disparado assim que começamos a clicar em qualquer um de nossos elementos na parte inferior para iniciar o processo de arrastar e, para isso, precisamos acessar as informações do evento. Podemos remover o log do console e, em seguida, atualizar nossa variável seletiva para ser igual a e.target. Isso agora significa que se voltarmos a uma função de queda de alça perto do topo, agora teremos acesso a ambos os elementos. Temos acesso à lista de classes dos elementos de soltar, e também na parte superior temos acesso aos elementos arrastados com essa variável chamada selecionada. Agora podemos criar uma instrução if para verificar se ambos os elementos contêm as mesmas classes. Posso fazer isso primeiro acessando nossa lista de classes, f e.target.classList, então temos acesso a um método chamado contains. O que queremos fazer aqui é que estamos verificando se o elemento específico que selecionamos, que é este aqui, contém a mesma classe que este aqui. Podemos passá-lo em Selected.className. Podemos usar o nome de classe única para este, porque sabemos que qualquer um desses elementos de arrastar só conterá uma única classe. Se isso for verdade, abriremos as calibrações, passaremos no registro do console e poderemos alterar isso para ser o texto correto. Podemos então retornar dessa declaração if, se isso for verdade. Se isso não for verdade, executará o código, logo abaixo, onde faremos um log do console com o texto incorreto. Vamos experimentar isso, apenas atualize. Primeiro de tudo, tentaremos o comportamento correto, então um quadrado, arrastaremos isso para o quadrado correto, que é este, e vemos correto. Vamos arrastar isso para um item incorreto, obteremos o texto de incorreto. Você pode ver se vamos para o jogo final aqui, assim que tivermos qualquer um desses correto, arrastando-os para a direita ou logo acima. Essa forma agora é removida da seção inferior. A maneira como podemos fazer isso, dentro de nossas instruções if, agora podemos remover o log do console. Podemos pegar os elementos selecionados e eles chamam o método remove. Vamos testar isso, atualizar novamente e arrastar um retângulo para um retângulo e, em seguida, remover o retângulo da seção inferior. Bom. A próxima coisa a fazer quando temos uma de nossas formas no orifício correto, é garantir que a cor de fundo seja alterada para a mesma cor que a forma que foi colocada no lugar. Se deixarmos isso, agora está herdando a cor de fundo vermelha, dá a ilusão de que isso é deixado cair em uma forma específica. Agora, a maneira como podemos fazer isso, se dermos uma olhada em nosso styles.css, a única diferença entre essas duas formas, como esta e esta, é esse pano de fundo de nenhuma. Isso é fornecido com a classe de drop, que está em todas as seções superiores. Tudo o que precisamos fazer quando o usuário solta a forma correta no orifício correto, é remover essa classe de queda e abrir nosso script. Esta é a seção correta dentro da instrução if. O que vamos fazer é pegar nossos elementos com e.target.classlist. Essa lista de classes tem um método chamado remove, como na classe de drop, que removeria essa classe, incluindo a cor de fundo, deixando a cor de fundo a ser preenchida. Vamos experimentar isso. Arraste uma dessas formas para o orifício correto. A forma agora é removida da parte inferior e agora temos a cor de fundo exibida dentro do navegador. Vamos verificar se isso está tudo bem quando tentamos um incorreto. Bom. Agora tudo está funcionando bem, e se dermos uma olhada na versão final, a última coisa que quero fazer é mudar a opacidade quando a forma for arrastada. Por exemplo, se afastarmos isso, podemos ver que a forma no lugar original agora mudou para ser uma cor mais clara. O mesmo se movermos para vermelho, podemos ver a forma vermelha mais clara foi deixada no lugar, e isso permite que o usuário saiba qual forma ele está arrastando atualmente. Podemos fazer isso definindo a opacidade dentro do nosso script e começaremos quando começarmos a lidar com o início de arrastar. Primeiro de tudo, selecione o elemento com e.targets.style.opacity. Bem, vamos definir a opacidade como igual a 0,5. Em seguida, podemos copiar isso e definiremos isso volta para um dentro da extremidade de arrasto do identificador. Não precisamos mais de um log de console, cole-o em onde podemos definir o valor como igual a um. Agora, como estamos acessando as informações do evento, também precisamos passar isso para nossa função. Salvar. Vamos experimentar isso e entrar em nossa versão. Assim que começa a mover uma de nossas formas, a forma que agora é deixada no lugar agora é muito mais leve. Esta é a funcionalidade de arrastar e soltar agora em vigor, e no próximo melhorará este jogo adicionando a pontuação do usuário, lidando com o final do jogo e também reiniciando o jogo 2 com o nosso Botão Play Again. 57. Jogo com formas: lidando com a pontuação e final do jogo: O jogo não é funcional em termos de arrastar e soltar. Mas, para torná-lo ainda melhor, poderíamos acompanhar a pontuação e também redefinir o jogo no final também. Primeiro, vamos começar enfrentando a pontuação. Na parte superior do script, precisamos de uma variável para armazenar isso, então vou pular para o topo e criaremos uma variável usando isso e inicializaremos uma pontuação com um valor de zero. Dentro do nosso índice, salte para esta página, já temos uma seção de pontuação no topo. Temos o texto da pontuação dentro do título de nível três. Agora temos uma extensão com o ID da pontuação, que vamos atualizar dentro do nosso script e um lugar para obter a pontuação estará dentro de uma seção de queda de alça. Pule aqui dentro. Este será o lugar onde verificamos se a forma correta foi deixada dentro da instrução if. Se isso for verdade, logo acima da nossa declaração de retorno acessará nossa variável de pontuação e aumentará isso pelo valor de uma. Em seguida, precisamos atualizar nossa seção de extensão, então aparece dentro do navegador. Podemos fazer isso pegando Document.QuerySelector como um ID de pontuação. Mas eu quero definir o texto interno igual à nossa variável de pontuação. Podemos copiar essas duas linhas, bem funcionar e então poderíamos fazer o oposto logo abaixo. Se removermos o log do console de incorreto e colocar fora da instrução if, a única diferença é que vamos deduzir um da pontuação. Vamos tentar isso, atualizar o navegador e, se você tentar uma das formas corretas, isso aumenta a pontuação. Vamos tentar um segundo número 2. Tudo isso é bom e se tentarmos uma forma incorreta, solte isso na pontuação é deduzida pelo valor de uma cada vez. Além disso, se atualizarmos o navegador assim que começarmos o jogo, também queremos ter certeza de que a pontuação atual está definida como zero. Como já temos nossa pontuação para ser inicializada como o valor zero. Também podemos copiar esta atualização e podemos definir isso logo acima da nossa função, então atualize. Isso começa com o valor zero. Tente arrastar uma forma e isso ainda está atualizado corretamente. A próxima coisa é este Botão Play no topo. Só queremos ter certeza de que isso esteja visível quando o jogo terminar. Atualmente, se atualizarmos a página, não queremos ver o botão Jogar novamente porque já podemos iniciar o jogo arrastando qualquer uma dessas formas. Faremos fora de nossas funções no topo da página, pois começaremos pegando nosso botão. Document.querySelector passando em um botão. Este é o elemento que usamos para a seção aqui e depois armazenaremos isso dentro de uma constante. Vamos chamar isso de StartGameBTN. Inicialmente, precisamos acessar nosso botão Iniciar jogo e definir o tipo de exibição como igual a nenhum. A propriedade style da exibição igual a nenhuma. Isso ocultará todos os botões no início do jogo. Em seguida, vamos criar duas novas funções. Uma função vai lidar o que fazer com o início do jogo e, em seguida, uma função para lidar com o final do jogo. Função e jogo à medida que você os configura por enquanto. Em seguida, uma segunda função logo abaixo, que é para iniciar o jogo. Comece com a função final do jogo e abra as chaves e, no final do jogo, queremos reintroduzir o botão para que o usuário possa reiniciar o jogo. Tudo o que precisamos fazer é copiar esta linha aqui onde definimos o tipo de exibição e substituiremos isso alterando isso para estar na linha. Então, dentro da função de início do jogo, precisamos redefinir tudo de volta ao seu estado original. Isso inclui a pontuação. Isso inclui remover o botão Reproduzir novamente e também mover essas formas de volta para a posição. Poderíamos fazer tudo isso manualmente se você quisesse, ou será muito mais simples se atualizarmos a página para dar o mesmo efeito. Para fazer isso, precisamos acessar o Objeto da Janela, selecionar o local atual e, em seguida, um método chamado recarregar. Agora temos nossas duas funções e, na verdade, precisamos fazer é realmente chamá-las nos momentos certos. O jogo inicial é bem simples, apenas o chamamos quando o botão Jogar novamente é clicado. Tenho referência a isso dentro do botão Iniciar jogo para acessar isso e, em seguida, ouviremos um clique participando um ouvinte do evento como em um clique. Em seguida, executaremos nossa função, que é iniciar o jogo. O jogo final é um pouco mais complicado. Se passarmos para o index.html e para a seção de arrastar. Cada vez que arrastamos com sucesso um deles para a mesma forma, como este aqui. A div na seção inferior desaparecerá. Um por um, estamos movendo cada uma dessas formas. O jogo acabou basicamente quando o invólucro, que é a seção de arrastar, não tem mais elementos filhos sobrando. O arrastar começaremos acessando nossa seção de arrastar do script. Faremos isso dentro de uma gota de alça. Ele tem as coisas fora. Começaremos dentro de um registro de console onde selecionaremos nosso wrapper para document.querySelector. Isso tem a classe de arrastar seção e, em seguida, nossos elementos têm acesso a uma propriedade pelo número de elementos filhos que ela contém, que é chamado ChildElementCount. No final. ChildElementCount. Vou fazer isso um pouco maior para que fique mais visível. Vamos salvar isso e testar isso dentro do navegador. Abra as Ferramentas do Desenvolvedor , entre no console. Vamos tentar isso, nosso log do console é executado no início da função drop. Assim que soltarmos qualquer uma dessas formas no lugar, se você executar a função e nos der o valor de 10. Nosso segundo deve ser nove e o valor é sempre um maior do que o valor que vemos na tela. Atualmente, temos o valor de nove, vemos oito elementos na tela. A razão é porque estamos fazendo um log de console da parte superior da função antes de realmente removermos esse elemento. Efetivamente, o jogo acabou quando o valor atual é um. Em vez do log do console, podemos removê-lo e transformá-lo em uma instrução if no final abra as chaves e verificaremos se esse valor é igual a um. Se for, chamaremos nossa função final do jogo. Vamos tentar isso, o que agora queremos fazer é garantir que cheguemos ao final do jogo. Depois de soltarmos a última forma no lugar, agora devemos executar a função final do jogo, que a vinculará com acesso ao botão Play Again. Então atualize, e vou passar por cada um desses, um por um, certificando-se de que todos eles estejam corretos. Esse é um, e se jogarmos o último no lugar, agora vemos que o botão Reproduzir novamente apareceu na parte superior. Também poderíamos remover essa borda na parte inferior, mas isso está tudo bem por enquanto. Podemos apenas levar isso está funcionando, a peça novamente. A função Play Again agora recarregará nossa página e restabelecerá tudo de volta ao estado original. Se você quiser fazer se a borda para baixo na parte inferior, podemos fazer também está na função final do jogo, podemos pegar a seção de arrastar com Document.querySelector. Como esta é uma classe, usamos ponto e pegamos a seção de arrastar. Mas o estilo, a borda é igual ao valor de nenhum. Vamos tentar isso mais uma vez, acessar o início do jogo. Complete este jogo arrastando todas as formas até o topo. Mais um, lá vamos nós. Nosso jogo agora terminou no tabuleiro foi removido da parte inferior da página.