Série de modelos de objetos de documentos 2023 — Parte 6: Projeto final do DOM Exemplos avançados e divertidos

1. Introdução do curso — Projeto real: Ei, Meus queridos alunos fazem aquela aula final nesta série inteira sobre o DOM, o Modelo de Objeto Documento, o Guia do Meu Nome. Eu vou ser mais rigoroso. E até este ponto, temos feito sim, muitos exemplos, mas principalmente teoria. E quem ama a teoria, certo? E é por isso que esta turma está sentada fazendo um projeto inteiro juntos. Vai ser super divertido. Vai aplicar muito do seu conhecimento sobre o DOM que vai testá-lo sobre coisas como borbulhar e capturar eventos. Ele vai testar sua habilidade de adicionar itens ao DOM. Ele vai testar a sua capacidade de ouvir tipos de eventos, eventos keyup, mudança de veias, e até mesmo enviar eventos no formato vai ser fascinante e bem feito para acompanhar. Se você tem, se você é um novo chegado, se esta é a sua primeira classe de Simeon, bem-vindo, bem-vindo. Dê uma chance. Vou codificar o HTML, o CSS, o JavaScript com você. Então realmente não importa o nível de experiência que você tem. Eu sou sim, eu sou seu instrutor, este aqui, sim. Então, sem mais delongas, vamos entrar em projetos muito, muito legais. E Conway, eu realmente não posso. Estou me divertindo tanto. Mas o suficiente disse, deixe-me ir ao meu computador agora e tarde começar a codificar juntos. 2. O que vamos construir?: Ei, todos vocês vêm para este projeto final que vai ser épico e eu estou super, super animado. E sei que vai parecer um exemplo muito simples. Mas um, ele realmente reforça todas as coisas que aprendemos até agora neste curso e sejam os truques e habilidades que você aprendeu nesta seção, você será capaz de se inscrever em seus próprios sites. Vai ajudar-te a seguir em frente. Espero que se divirta muito. Mas ao longo do caminho, eu realmente espero ensinar-lhe métodos muito úteis e práticos. Então, qual é o projeto final? Sobre o que é tudo isso? Bem, como você pode ver, nós o chamamos de nosso site de compras, e ele apenas contém uma lista de compras. Sei que parece muito simples, mas tem muita coisa acontecendo. Então, quais são as coisas que vamos fazer neste projeto? Vamos primeiro, quando o usuário passa o mouse sobre cada item na lista, você pode ver lá nós destacando essa borda, que borda elevador para ser específico. Só para que o usuário saiba que ele está pairando sobre ele. Se ele clicar em um item, nada acontece. Mas como você vê para a direita, este, este botão Excluir, novamente, se o usuário passar o mouse sobre ele, Estamos doentes que propriedade styling. E, claro, se o usuário exclui, digamos que esta pizza, queremos que removido do dom. E o Sugar and Spice? É o usuário exclui isso. Queremos que isso seja removido completamente. Então essa é a primeira coisa que eu quero que você tipo de pensar sobre como você pode fazer isso. Não é assim tão difícil. Mas, novamente, vamos ter que ouvir alguns eventos, não é? Especificamente o evento clique? Isso é uma coisa que eu quero que você faça. A outra coisa, caso que você já adivinhou é que eu quero que o usuário seja capaz de adicionar itens à lista. Então, se o usuário digitar algo como cerveja, por exemplo, quaisquer cliques adicionam, ele é adicionado à lista dinamicamente. E aqui porque estamos usando um formulário, nós realmente ouvimos o evento de envio. Claro, se o usuário quiser ir e excluir cerveja da lista, ele pode fazê-lo. Então tudo faz sentido intuitivo. E essa caixa de seleção da lista de ocultos? Será que aqui nós vamos estar ouvindo outro tipo de eventos, os ganhos em mudança. E se o usuário verificar isso, então nós apenas escondemos tudo. Eu sei que você pode estar pensando, por que você iria querer esconder você anti ShoppingList? E justo, essa é uma pergunta muito válida. Lembre-se que aprendemos habilidades. Sim. Estou tentando equipar você para usar isso em outras situações que são aplicáveis ao seu aplicativo web. Então, se o usuário desmarca que, obviamente, tudo está de volta ao normal, o que é que os itens de pesquisa leva caixa tudo sobre? Bem, permite que o usuário procure por itens na lista de compras. E não vamos estar ouvindo um evento de clique. Sim, porque não há carrapato, vamos estar a ouvir um evento de chave para cima. Vejamos um exemplo. Digamos que o usuário tenha algumas coisas na lista de compras, como, sei lá, açúcar, cereal, dia que você tem. Agora, se o usuário digitar, digamos açúcar, nós só queremos exibir os itens que correspondem ao texto, mas dar uma olhada atentamente. Você percebe que todos os usos leva, neste caso, como minúsculas, uma estola fechada coincidiu com o açúcar abaixo, mesmo que o açúcar abaixo tem um caso capital. E da mesma forma, se o usuário digitar todas as maiúsculas, ainda é Mencius porque não queremos que isso seja sensível a maiúsculas e minúsculas. Então tenha isso em mente. Lá vamos nós. Você pode ver que este vai ser um projeto muito divertido. Estou super, super animado. Espero ter dado uma visão geral de alto nível para entender o que precisamos ousar, tenha em mente. Vou construir tudo do zero. Vou construir um HTML do zero, o CSS. Vamos cortar JavaScript juntos. Isso vai ser épico são super, super resposta. Vejo-te na próxima palestra. 3. Lista de compras: Então você viu o que faz caça furtiva vai parecer em seu animado para se envolver. E podemos continuar expandindo este projeto. Podemos continuar melhorando. Mas, você sabe, quais são as habilidades que você aprendeu até agora são realmente, realmente incríveis. E eu quero provar isso para você em toda esta seção final. Espero que goste, mas podes estar a coçar e a esconder-te. Agora vai, o que está envolvido na criação de toda esta estrutura? Bem, deixe-me mostrar-lhe isso agora. É bom. Isso é bom. E isso vai ser ainda melhor. Porque agora estamos no projeto final. Isso vai ser muito divertido. Vai ser muito interativo e vai ser muito prático para a sua carreira, porque agora vamos construir um site de compras. Vamos permitir que um usuário adicione itens a uma lista de compras. Exclua esses itens de uma lista de compras, oculte todos esses itens de uma lista de compras. Nós até vamos entrar em algo bastante em fontes e que são itens de pesquisa dentro deles, que lista de compras. Então eu estou super, super animado. Um abraço além de dois. Permitam-me que aborde brevemente o que vamos fazer neste projecto final. Adiós. Até agora, só vimos trechos do que podemos e não podemos fazer com o DOM. Na primeira parte da minha série DOM, falamos muito sobre atravessar o DOM, acessar itens no DOM, criar elementos no DOM, remover elementos do DOM, clonar itens neste DOM avançado neste curso em particular que você está fazendo agora, nós fomos um passo adiante, não é? Nós realmente entramos nas veias, como eles funcionam. Fomos para capturar versus borbulhar. Entramos em hierarquias. Percorremos um caminho incrivelmente longo. Agora é hora de colocar todas as nossas habilidades à prova por Bolding e toda a página web para obter. Ok, isso é ótimo. O que queremos que ele faça? Bem, em primeiro lugar, vamos chamá-lo de nossos lados shopaholics, porque somos shopaholics e só queremos ir ao supermercado e comprar um monte de coisas. E como é um lado de lojas, precisamos da capacidade de editar itens de supermercado, encontrar um item de supermercado e, em seguida, excluir itens de supermercado da nossa lista. Cli melhor para o general vai me deixar esticar isso. O que exatamente vamos cobrir? Bem, em primeiro lugar, vamos ter que navegar pelo DOM. E você vai ver que nós vamos ter que mudar o DOM quando você usa uma exclusão de chutes. Queremos remover um item. Por exemplo, quando eles adicionam um item, queríamos editar Todd Don, por exemplo. Vamos ter que manipular CSS. Teremos que interagir com formas e eventos. Vamos ter que usar JavaScript para adicionar novos elementos ao DOM. Como eu mencionei, vamos ter que remover elementos do DOM. E eu realmente quero que nós também entrar em um tópico de fontes de modo, e é assim que nós pesquisamos somas FADH no DOM. Então eu estou mostrando a vocês, vocês podem ver que estamos fazendo muito nesta seção final. Vamos nos preparar, vamos beber um café e vamos começar a rachar. Vejo-te agora. 4. Como criar nosso HTML: Vamos lá. Você tem que ser que este não é o projeto final. Estou tão animada. Então, sim, vamos, eu tenho um cobertor. Código do Visual Studio, faz edições à esquerda, o IDE, e à direita temos nosso navegador apenas para que possamos ver fazendo. E antes de entrar nisso, Henry entrar em muitos detalhes, só quero dizer que podemos abordá-lo de forma fragmentada. Vamos passar por isso passo a passo, esta palestra. Agora eu só quero que vejamos o HTML e o próximo H0, podemos estilizá-lo para torná-lo realmente bom se você quiser pular o Negrito do HTML e do SESAC. Oh, bem-vindo a fazer isso. E apenas saltar para o coração de manipular o DOM, mas altamente encorajá-lo a seguir adiante e sem mais delongas, vamos começar. Vamos ver como estamos. Temos nosso projeto final, arquivo em branco. Tudo o que eu quero fazer é começar com um modelo HTML muito simples. Podemos ter uma seção de cabeça por enquanto, vamos ter um título para todas as páginas. E o título pode ser ShoppingList. E debaixo da cabeça, claro, podemos ter o nosso amigo. Esta é realmente a carne do nosso HTML vai sentar-se. Agora, antes de vermos, é sempre uma boa idéia imaginar o que você quer em sua mente porque precisamos estruturar isso de uma maneira muito lógica. Como devemos estruturar isso me permitirá invocar alguém em um nível muito básico. Podemos acrescentar isso mais tarde, mas é isso que queremos ousar inicialmente motins. E o ponto de salteamento que eu sempre adoro fazer é que eu quero ler a coisa toda dentro de sua própria tag div. E podemos dar a isso uma identificação de Rapa. É um ponto de partida. Queremos que todo o nosso tipo de lista de compras esteja dentro de uma div dos pais. Mas é sempre uma boa ideia fazer isso. É sempre uma boa idéia para dividir as coisas em cooler para conjuntos de elementos pai. A primeira coisa que quero fazer, se olharmos agora com uma rede, quero fazer três pias de alto nível. Se você olhar para isso, você pode ver que podemos meio que dividi-lo em três seções. Eu quero ter um cabeçalho ou eles querem ter este total, um 100 canto rápido em uma forma. E, finalmente, quero ter essa lista inteira correta em sua própria div. Então é assim que eu quero estruturá-lo, exagerar quantas maneiras de esfolar um gato. Mas você pode ver aqui, nós vamos ter uma div geral. E dentro disso podemos ter três elementos pai de nível muito alto, um cabeçalho, um formulário, e um diff. Faz sentido? Tudo bem, então vamos fazer isso. Vamos fazer isso. Sim. E que div salvamos, podemos dar uma idéia de RAM. Então lá vamos nós. Isso está na maré de dentro do div. Lembre-se que ganhamos três coisas. Queremos bater. O que mais queríamos? Queríamos um formulário. E o que mais queríamos? Queríamos outro div. Lá vamos nós. E isso é um nível muito alto. E sim, vamos dar todas essas identidades e coisas mais tarde. Por enquanto, isso é o que temos, vamos pensar que estava escondido. E lembre-se como eu vou esconder parece. É aquela seção verde no topo. E novamente, eu quero representá-lo em seu próprio elemento pai inteiro. Isso é rápido em uma dose, dará a ele um ID da página superior. Então você pode ver que eu vou haha tem algumas coisas, não é? Vamos odiar os shopaholics, coisa, ir para a descrição, minha lista de compras. E então é meio que tem a seção de busca que eu vou alugar e um começo completo ou obsoleto estruturar isso. Vamos ter a nossa div rápida para todo o aquecimento e pescoço. Podemos apenas ter uma identificação da página superior. E dentro deste cabeçalho temos o título. E é só ter um ódio ao Hollich. E só para que possamos estilizá-lo mais tarde, vamos dar a ele uma classe de sob nenhum título. Como é isso? E como estamos olhando até agora com literário. Só tenho um título e vou procurar. Bastante simples e colocamos um longo caminho a percorrer. Então isso não é bater na coisa embaixo que temos uma descrição, lembra? E eu vou lê-lo em uma etiqueta de parágrafo. E vou dizer a minha lista de compras. Ei, nós vamos. E a última coisa que eu queria agora Haider, é que toda a funcionalidade de pesquisa, que é bastante avançado como um tipo de bônus adicionalmente colocando para isso. E chegaremos a isso no final. Assim, podemos ter uma funcionalidade de pesquisa. Lá vamos nós. E como eu mencionei, eu quero envolvê-lo em uma pasta e lista apenas dar o nome completo e ID do item de pesquisa. Porque é isso que este formulário vai fazer. Agora mesmo. Podemos simplesmente excluir a ação e é um ex, eu queria que esta espuma tivesse uma caixa de entrada de gostos de tempo e podemos ter um lugar detentor de itens de pesquisa. E lembre-se apenas o que o item de pesquisa ou funcionalidades vai fazer. Ele vai permitir que o usuário pesquise palavras-chave para ver se essas palavras-chave ou na lista de compras. Por exemplo, se ele violar a maneira que você editou cozinhar para holística no topo da Coca-Cola e todos os itens que têm cocos aparecerão. Então vai ser bem legal, bem avançado. Então lá vamos nós. Esse é o nosso elemento de entrada. E outra coisa que quero acrescentar aqui. Apenas a capacidade para o usuário ocultar e mostrar mais antigos listados abaixo dele. E eu poderia colocá-lo em outros lugares. Quer saber, Jimmy esfriou uma funcionalidade de busca e esconder e mostrar ocultar. Deixe-me fazer isso responder a ele. Sim, assim é melhor. E como eu disse, poderíamos colocar isso em outro lugar. Eu só quero dizer que sim, porque é assim que eu vejo na minha cabeça. E então nós temos nossa entrada. A próxima coisa que eu quero é aquele que eu incluí uma tag div. E podemos dar a isso uma identificação da bochecha. E pode ser um rótulo para esconder. E se o usuário clicar nele, queremos ocultar. A lista permanece toda naval. E obviamente agora precisamos da caixa de seleção real, não é? Assim, o tipo de dados de entrada pode ser moldado caixa. E nós também podemos dar a ele uma identificação de quente. Sim. Bem feito. Acabamos de completar nosso cabeçalho. Esta vai ser toda a parte alta. Não se preocupe com os CSAs. Nós vamos entrar. Então, na próxima palestra, eu só quero que nós esticemos nosso HTML. E então você verá como é fácil e rápido apenas adicionar estilos a ele para torná-lo bonito. Então lá vamos nós, esse é o nosso cabeçalho. A próxima coisa que queremos fazer é o que vai esfriar a nossa imagem novamente? A próxima coisa que queremos fazer é terminar este formulário no meio. Certo? É isso que queremos fazer. Então vamos fazer essa equidade. Como é que fazemos isso? Bem, vamos nos livrar desta ação aqui e vamos dar a este um ID de AddItem porque é disso que este formulário é tudo sobre. É sobre o usuário adicionar itens à lista de compras. E precisamos de uma caixa de entrada, não usamos vai ser digitando ienes. E eu queria colocar titular, não dentro do espaço reservado dia. O que você quer comprar? E, em seguida, depois que o usuário digitou o que eles querem comprar, temos um botão chamado de repente ele basta editar botão e podemos ter edX. Então vamos tomar moldagem. O que está acontecendo aqui. E eu apenas 72 para a palavra da etiqueta final. Então lá vamos nós. Acho que isso é fazer santos. E agora estamos na seção final. Novamente. Isso é arrefecer essa imagem. E você pode ver o item final Nick, precisamos é este itens para comprar seção. E vamos embrulhar isso em uma dose também. Você pode ver que tem um título e tem todos esses itens da lista. E então também tem aqueles botões de apagar. E o que vamos fazer é podemos ler, lembrar o que eles estão balbuciando e vein delegação. Fomos ler todos os itens da lista dentro de um elemento pai. Então vamos envolvê-lo em um elemento UL pai, e então vamos a partir daí. Então aqui vamos nós. Temos todos os elementos div. Queremos gravar tudo e vamos dar uma identificação das listas de compras porque é disso que se trata esta div. E então nós também temos que odiar feito ajustes de itens para comprar. Mas é um pouco menor que 81, ele tem. Então vamos fazer um aquecimento H2. E podemos dizer itens para comprar. Sexo realmente tem um T maiúsculo e então vamos dar a isso também uma classe de esqueleto. E agora estamos entrando em todos esses aliados, aqueles e listas de itens. E lembre-se do que eu disse, queremos envolvê-lo em um Rapa geral e vamos fazer isso com uma etiqueta UL. Bastante direto. E dentro disso, temos cada uma de nossas listas. Então, é claro que temos uma etiqueta de aliado e cada item tem duas coisas apodrecendo. E tem o próprio item. E então ele tem esse tipo de botão de exclusão para a direita. E novamente, há muitas maneiras de esfolar um gato, então eu vou apenas ler estes dois em um elemento span. Os que vão ter uma classe de item porque é o item que estamos lidando. Isso só dê uma palavra de MLK que você tem. Você pode vê-lo no navegador. E, em seguida, outro span vai ter uma classe de Delete. E eu vou ter a palavra “apagar”. Lá vamos nós. E lá temos. Então nós temos nosso primeiro item e tudo o que temos a fazer agora é simplesmente copiar e colar esses elementos LI. O próximo item pode ser Açúcar e Especiaria. Como é que isso parece? Podemos copiá-lo novamente. E aqui podemos tomar algo para beber Coca-Cola. E novamente, isso é chamado de ovo de alerta BIA. Vamos fazer mais uma aqui e podemos dizer “peta “e dizer perifericamente, margarita. Se escrevi corretamente, espero que sim. Então esse é o nosso HTML. Se você olhar para o nosso navegador aqui, parece terrível. Na verdade, estou ficando enjoado mesmo olhando para ele. E será o que faremos na próxima palestra. Vamos embelezar isto. Isso faz com que pareça muito estranho. E voltando ao nosso código, lembre-se agora, tudo o que fizemos é que fizemos nosso HTML e é uma página muito, muito simples. Nós lemos tudo dentro desta div de uma identificação com Rapa. Tudo é rastreado em D. E então dividimos em três seções. Podre. Posso até estruturar este COVID. Posso dizer seção um. Digamos que a Seção 2 era esse tipo de forma em que adicionamos itens. E então a terceira e última seção é a seção 3. E isso é exibir a lista para o usuário e permitir que o usuário exclua itens da lista. Então, como uma espécie de fazer santos, é muito simples. Passe por isso, pausar o vídeo, e na próxima palestra, vamos começar a estilizar isso e você verá como é divertido assinar porque você vai de algo assim. E vou procurar algo realmente incrível. Vejo você. 5. Como criar o cabeçalho CSS: Bem-vinda de volta. E você pode ver que estamos pegando exatamente de onde paramos. Você pode ver o quão horrível isso está parecendo. Estou vendo coisas no canto de trás só porque parece tão feio. Mas não enfatize esta vontade, esta palestra é sobre, vamos fazer CSAC juntos. E você pode ver aqui eu acabei de criar um arquivo CSS em aberto. Isso é tudo o que eu fiz. Então, tudo o que temos que fazer em nossa seção principal é incluir uma referência ao nosso arquivo CSS, que são chamados styles.css. Então vamos entrar nisso. Vamos para o nosso arquivo CSS, e vamos começar a tornar isso mais bonito. Então a primeira coisa que quero fazer é começar pelo topo e trabalhar com todo o nosso corpo. Tudo o que quero fazer é mudar a família de fontes para, vamos fazer algo legal ou Cambria. Como é que se sente? É todas essas pequenas coisas, a propósito, que faz o seu site olhar muito mais apoio do apenas faz com que pareça que tem sido amante e foi criado com kcores. Bem, eu só queria segurar preto. - Preto. Preto pode ser bastante intenso. Então vamos apenas tê-lo um pouco fora de preto. Lá vamos nós. E os litros podem se fechar bastante. Então eu só quero, Eu vou levar a propriedade espaçamento para ser igual em um pixel. Área. Parece um pouco melhor. A próxima coisa que eu quero fazer é que você pode ver a tag H1 e a tag H2 são bastante ousadas. Eu só quero remover isso. Então vamos discar um gêmeo e H2. E vamos apenas fazer um comentário aqui para lembrarmos por que fizemos isso removido. E o que eu quero fazer é pesos de fonte. Digamos que é normal, muito melhor. E o único, e começamos a estilizar o nosso cabeçalho. Lembra-se daquele grande cabeçalho verde? Ok, então vamos começar a trabalhar com Allah batedor. E lembre-se que identidade demos a ele. Temos o nosso HTML. Podemos ver aqui que temos o nosso cabeçalho. Então destruímos tudo dentro de uma div com um ID do topo da página. Você pode vê-lo? Então vamos para nossos estilos aqui e vamos acessar nosso elemento com um ID da página superior. Então sabemos agora que estamos lidando com todo o representante na seção de cabeçalho. Em primeiro lugar, quero mudar nossa cor de fundo para 10, 7 e 11. Depois conseguimos, e o estofamento parece chocante. Então vamos lidar com o preenchimento. E as muitas maneiras que você pode fazer preenchimento e dar-lhe quatro valores e fazer o topo, levantar a parte inferior direita. Mas se nós apenas dar-lhe dois valores, por exemplo, pixels da equipe e 0, os primeiros pixels da equipe como lidar com o preenchimento superior e inferior e um 0 pixels lidando com a esquerda e a direita. Isso faz sentido. Portanto, devemos ver lacunas agora na parte superior e na parte inferior. Guarde isso. Isso é exatamente o que aconteceu. Então estamos chegando lá. O próximo item, o que podemos fazer é por que não começamos a afetar todo o embrulho, toda a div para esquecer nosso índice. E só quero dar um passo atrás agora e começar a estilizar este invólucro porque eu quero que os estilos se apliquem a todos os itens dentro deste invólucro. Então vamos realmente fazê-lo acima desta página superior, porque faz mais sentido para mim lidar do lado de fora, a maioria dos elementos estão indo mais e mais detalhado, para baixo na página CSS. Então aqui queremos acessar nosso ID de direitos rata. E em primeiro lugar, eu não quero o esticado em toda a tela. Basta dar-lhe uma largura ou 90 por cento. Lá vamos nós. Então você pode ver, mesmo se nós tornarmos isso um pouco maior, você pode ver que não é tão esticado em toda a tela. Lá vamos nós. É mais fácil ver qual é o nosso consertador. E eu quero dar a isso uma largura máxima. E digamos que a largura máxima é de 100 pixels. Como é que isso parece? Realmente não faz muito, eu acho que porque nossas telas muito grandes como é. E então vamos começar a dar-nos um pouco de margem. Novamente, a margem superior e inferior, queremos ser 20 pixels. E então nós queremos parecer para todo o invólucro div diretamente sobre. Isto é realmente o que eu queria fazer desde o início. Então podemos fazer isso como altar. E lá vamos nós. Parecia que na nossa página tem tempo para ganhar vida. A próxima coisa que quero fazer é adicionar a sua pedra de sombra muito legal. Queremos que isso pareça realmente incrível. Vamos fazer uma propriedade de sombra de caixa. E quero dar-lhe três valores. Em primeiro lugar, eu quero dar-lhe o valor de deslocamento x, que vai apenas empurrá-lo para a direita desta caixa. E quero que sejam seis pixels. A próxima entrada para a propriedade box shadow é os deslocamentos Y. Então eu queria realmente ser a sombra para estar à direita da caixa. E no fundo. Então, novamente, eu quero dar-lhe um valor positivo de dois pixels. E então eu só queria ter um raio azul. Eu queria parecer um pouco embaçada. E eu quero dar a isso um tamanho de cinco pixels. E, finalmente, queremos dar uma cor, certo? E isto dá-lhe um cinco. Como está aquela coluna que parece ser boa e você pode ver que está começando a cair, começando a ter moldado. A outra coisa que quero fazer é ter um preenchimento de 20 pixels. Como é que isso parece? Parece melhor. E a última coisa que quero fazer é ter uma fronteira. Quer ter uma borda sólida de um pixel? E digamos apenas dois no 12121. E podemos torná-lo um pouco transparente, diz. Acho que está começando a ficar bem. Então, todos esses pequenos detalhes que fazem um site parecer realmente wow. Ok, você pode ver como começamos a estilizar nosso cabeçalho, mas não é bem diagnóstico. Queremos fazer com que pareça melhor. Então vamos acessar a página superior e vamos ser um conhecimento mais específico. Olá, eu sou um. E vamos também fazer exatamente a mesma coisa aqui, página superior, mas vamos sair do nosso parágrafo. Item porque x a palavra minha lista de compras. E vamos pegar a linha. Coisas boas para o Papai Noel. Parece bom, sem fim, apenas mexer com a margem. Digamos metade AIM. Apontar. Isso parece? Agora acho que está bonito. E, claro, a próxima coisa e eu quero estilizar é essa caixa de entrada. Então este x é aquilo. E eu vou parar de fazer mais rápido através deste não é um curso sobre CSS. E eu só espero que você aprenda uma ou duas coisas enquanto você vai junto comigo. Para parar de fazer isso, podemos, obviamente, ajustar. O que é que isso parece? Talvez seja um pouco demais. Vamos a largura máxima de 250. Como é que isso parece? Isso parece melhor. Margem. De cima e de baixo. Eu quero aplicar alguma margem e então eu quero dizer, eu quero que a exibição seja um bloco. Caso contrário, está ameaçando o esconderijo abaixo dele ao nosso lado. É por isso que quando eu uso margem de alteração não pareceu gostar disso. É por isso que eu queria fazer bloco de exibição. E vamos adicionar um pouco de estofamento. Oh, isso está bonito, não é? E, claro, vamos adicionar uma borda de um pixel sólido. RGB, 2.7212212210. O que significa empresa? Sim, isso parece legal. Tamanho da fonte, podemos dizer que é um M, apenas torná-lo um pouco maior. E o que acontece com a cor “takes”? Vamos ver como nossos quarenta e nove, quarenta e nove, quarenta e nove. Cara, acho que está começando a parecer muito, muito afiado. E claro, a última coisa que quero fazer neste Haidt é estilizar essa caixa de seleção. Então, o que demos de novo? Vamos para o nosso HTML. Há uma caixa de seleção. Como eu apertei um, novamente, a caixa de seleção deu uma identificação de shake. Lembra-te que lhe demos uma identificação da mudança. Então, se formos aqui, podemos ir ID de largura máxima. Podemos dar a 180 pixels. Agora vamos parecer verdade que margem, top e bottom pixels equipe e lift e rock. Queremos centrá-lo. E então queremos pegar a linha para o centro. Lá vamos nós. Então essa lista de esconderijos está começando a tomar forma. Mas ainda não é 100 por cento, certo? Por que não? Sim. Você sabe o que é? Eu quero realmente estilo essa caixa de seleção real, essa caixa de seleção de entrada com a idéia de alta que o estilo de equidade. Então, vamos aqui. O que queremos fazer é acessar nossa identidade falsa, mas agora queremos estilizar isso. Na verdade, leva o Bob com a idéia do difícil de fazer. E eu acho que isso vai funcionar com 18 por cento margem de 0. E é verdade que nós sempre exibir bloco inline. Acho que deve funcionar porque as imagens o colocam ao lado das listas de esconderijos. Salve um ego. Legal, lá vamos nós. Estamos ficando devagar, lentamente pegar um macaco como eles dizem. Então, aqui vamos nós. Temos o nosso legal legal do que um cabeçalho estilizado. Eu sou um de apenas pausar o vídeo aqui porque está ficando um pouco longo e eu sei que às vezes é bom fazer uma pausa. Percorremos um longo caminho e na próxima palestra vamos terminar. Vamos terminar com as duas seções inferiores, a forma e a div com a lei desde Dubai, e deve ser relativamente rápido. Vejo você na próxima palestra. 6. Como criar os itens de lista CSS: Certo, então foi aqui que paramos. Lembre-se que começamos a espionar aqui e nós meio que terminamos o aquecimento, mas vamos continuar com a perda para essas seções. Hen, lembra como eles são? Eu quero embrulhar um e um formulário em um representante o outro e um elemento div. E nós vamos apenas estilizá-lo para fazê-los parecer estranho ou estranho. Então vamos continuar a sua plenitude. E se você for para o arquivo de índice e nós rolamos para baixo aqui, você pode ver que nós demos a ele uma identificação do item Ed. Então vamos pegar esse elemento, adicionar item, e vamos manipulá-lo. Qual é o objetivo? E pareceu-me isto. Tudo bem, por enquanto. E eu deslizei o mesmo tipicamente em um arquivo de ações, as especificidades disso, aka a entrada real e aquele botão. Então vamos realmente começar todas as entradas. Portanto, queremos acessar a maré de, e queremos agora ser muito específicos. Queremos começar a estilizar esse elemento de entrada. A primeira coisa que quero fazer é fazer com que a caixa de entrada seja maior. Consegues ver como não é suficientemente grande? Vamos fazer a largura de 300 pixels. É grande o suficiente? Deve ficar tudo bem, podemos mudar depois. A próxima coisa que quero fazer é fazer disto uma caixa de entrada. É um elemento azarado. Então eu queria ocupar toda a largura. Então escolheríamos o bloco de exibição de Xi. Como é que isso? Sim, isso só adiciona alguma margem para fazer parecer melhor. Vamos dar-lhe um pouco de estofamento. O que mais podemos fazer? Vamos mudar esta fronteira. Um pixel sólido, dois de seis a 16 a 16. Ei, pessoal, só um belo cinza claro. Não queremos essas coisas na cara do usuário. Queremos que tudo seja muito sutil. E vamos aumentar o tamanho da fonte spiky. Olhando melhor. Talvez devêssemos curvar ligeiramente a fronteira. Então eu vou apenas adicionar um raio de borda, dois pixels. Tem aquele olhar. Agora acho que parece uma garrafa. Eu disse que isso é muito, muito sutil. O raio da borda, os dois primeiros pixels é o canto superior esquerdo da placa. Só estou arredondando um pouco. E, em seguida, perdeu dois pixels é apenas estilo. E o elevador de baixo, eu gosto de fazer apenas coisas sutis em tamanho que acabou de ter um um bom sentimento sobre isso quando você pousa em uma página e você sabe, e amor foi colocado nele. Mas não precisávamos ter esse índio. E o que mais podemos fazer? Box-size, border-box, o que parece? A outra coisa que quero fazer é que vou inundar este joelho esquerdo. Temos que adivinhar. Quero adicionar itens à direita. Especificamente, queríamos adicionar botão diretamente para ser exibido à direita para este cuco de entrada. Certo, então estamos me pegando, estamos me pegando. Lembre-se porque coloquei o fluxo hoje. Se fosse porque estávamos caçando qualquer um dos elementos, especificamente que adicionar botão para estar à direita desta caixa de entrada. A razão pedregosa pela qual fizemos isso, e agora é claro que precisamos acessar esse botão. Vamos começar. Então, queremos acessar o elemento de formulário pai. Dentro disso. Se quisermos parar o botão do dipolo, são pontos e manipular os botões o quê? Isso parece Beta. Eu queria um cursor, obviamente para mudar quando o usuário passa o mouse sobre ele para que eles saibam que é um botão. Degas tinha dois quilowatts. Como é que isso mostra? E tudo o que não podemos ver. Isso está tudo bem. Vamos adicionar um plano de fundo e um plano de fundo. Acabei de escolher uma CALEA, 32 anos. Veja 77 D. Como é que isso parece? Aqui vamos nós, começando a ganhar vida. Podemos incorporar. Como é que isso? Olhar? Veja que estamos me pegando, Vamos mudar essa borda um pixel série sólida. Ou se, se, dizer como isso é total? Agora conseguir-me pode aumentar ligeiramente o tamanho da fonte. Agora podemos adicionar margem. Olhe para uma OBS alinhada. Basta lembrar que usamos a mesma margem é sobre nós como a caixa de entrada e é por isso que esses dois se alinham um com o outro. E, finalmente, podemos entrar em nossos itens fazer bisecção. Esta última seção. Lembre-se, este é um elemento aparente, o elemento div pai ser específico, e queremos resolver isso agora. Então vamos rolar para baixo. Sim, e vamos acessá-lo. O que ele fez nós damos novamente e se rolarmos para baixo Seção 3, um ID do nome da lista de compras que você pode ver dentro da lista de compras com uma etiqueta H2. E então nós temos os elementos UL e todos os nossos itens de lista, especificamente itens de corredor para comprar um naufrágio dentro de elementos aliados. Novamente. Então lembre-se que a primeira coisa que eu quero fazê-los como excesso, eu vou fazer uma lista de compras e vamos dar alguma margem. Sim, então estou começando a ficar bem. E depois quero ser mais específico. Então eu quero pegar listas de compras. Mas agora vamos estilizar os elementos UL. Em primeiro lugar, quero remover esses pontos de bala. Pontos de bala. Vai ser nojento. Como é que fazemos isso? Bem, nós apenas acessamos a propriedade de estilo de lista e mudamos seu valor para nenhum. dia em que temos pontos de bala desapareceram. E, em seguida, a outra coisa que eu quero fazer é que eu quero remover preenchimento padrão que vem junto com o elemento SQL. Remova o preenchimento padrão. Desculpe, talvez eu esteja sendo mais específico porque isso não é o que Golson CSA. Por isso, estou a tentar ir muito depressa. Sinta-se à vontade para pular esta palestra se você está começando sobre a prancha. Mas então você deve ter removido o preenchimento padrão. Agora o que eu quero fazer, novamente não quer ser específico, mas eu quero começar a manipular a lista de estilos aliados, ID da lista de compras XY South. Mas agora vamos acessar nossa lista de itens. Quero que cada item da lista tenha preenchimento, o IGA. E lembre-se de como quando passamos o mouse sobre cada um desses itens da lista, nós meio que tínhamos uma borda esquerda e fotos de Angeles destacadas. Isso é o que eu quero saber. Digamos que cinco pixels sólidos. E aquele caminhão. Sim, isso parece bom. Outra inundação um sobre o outro agora, mas não se preocupe, vamos ter qualquer margem de uma vez que estamos vivos. E então você pode ver todas as exclusões atualmente é apenas gostos. E lembre-se que embrulhá-los em uma tag span é apenas ir para HTML. Como é que fizemos isso? Nós envolvemos em uma tag span, permitirá que os leads. Demos a ele uma classe de deletar. Lembra-se disso? Por isso, neste momento, é apenas um velho gosto chato. O que queremos fazer é segui-lo. E como eu mencionei, nós lhe demos uma cláusula. Excluir. Então, 50. Vamos flutuar, certo? Sim, Oh, isso é legal. Então vamos dar uma cor de fundo legal. Tem extra OK. Agora parece bom. Vamos dar-lhe um estofamento e veremos que parece terrível no momento. Aqui vamos nós, está ganhando vida. Eu quero fazer a fronteira C. Você pode ver como ele acrescenta muito mole. Então vamos arredondar isso para o raio limite. E vamos arredondar os quatro cantos por quatro pixels. Pessoal, é subtil. Eu quero que o cursor do usuário mude obviamente quando eles colocam o mouse sobre o botão. E vamos nos livrar do ID preto e torná-lo uma cor branca. O cara. Mas agora se eles usam um cavalo sobre deletar, eu quero especificar o CUDA para mudar. Eu só queria ser uma boa experiência de usuário. Então, tudo o que temos a fazer é excesso off cláusula de exclusões e quase fechar excluir sempre que o usuário passa o mouse sobre ele. Queremos afetar certos estilos para resolver, queremos afetar é essa frente de fundo e vamos apenas ir 20 2020. Degas. quão legal isso parece? Isso é incrível e você pode ver todos nós, eu acho que fizemos como fizemos com a descoberta dos lados. Você sabe o que? Acabei de me lembrar quando passamos o mouse sobre este estilo de exclusão de, mas não essas bordas. Sim, ele é mais ousado. Mantenha-se cinza ao passar o mouse sobre um item de lista. Então deixe-me fazer isso rapidamente. Precisa acessar as listas de mercearia id. Queremos falsificar o estilo nas etiquetas LI, mas é claro que só quando eles usam um quente estava com raiva. Quer mudar a cor da borda, não é? Cor da, 43, 43 centenas HLC. Nós pairamos sobre tudo isso. Apenas fique linda. By the way, eu acabei de conhecer da 43, 43 com a cor delete que eu posso bater. Então ambas as cores são exatamente as mesmas. Mas eles estarão se divertindo muito para não aprenderem muito. E as políticas de listas demoram bastante tempo, mas eu literalmente codifiquei isso do zero. Agora você viu como eu fiz isso. Tudo parece estar funcionando olhando lisinopril, escritório visto, nada funciona. Se clicarmos em Excluir. Se tentarmos dizer que quero comprar um pouco de açúcar, MLK, o que não sei o que é, mas se adicionarmos isso, nada acontece. Se escondermos a lista e nada acontecer. E, claro, se tentarmos procurar, digamos, MLK, nada acontece. É disso que se trata a próxima etapa. Colocamos todo o nosso conhecimento que aprendemos no DOM nas próximas palestras. Então divirta-se, aproveite, e eu te vejo. 7. Recapitulação rápida: Petróleo bruto, gás, e vamos entrar no coração e meios de manipular o DOM? Vai ser muito excitante, muito empolgado. Então você pode ver na tela e olhando muito bom, Ele está olhando muito funky, mas é claro que não há funcionalidade. Antes de começarmos. Só quero te mostrar algumas coisas. Só quero fazer uma recapitulação de alto nível. Então, se inspecionarmos este documento aqui e formos para o console, quais são algumas das coisas que eu só quero recapitular você sobre mim. Só amplie um pouco. - Sim. Então o que não quer ler manteve você em apenas algumas coisas. Primeiro, lembre-se de como estruturamos nosso código. E quero que comecemos olhando como ele tinha um item dinamicamente para o mais lento. Então, dando um passo atrás, lembre-se de como estruturamos nosso código. Pegamos nosso elemento UL e temos listas subscritas. E nós lemos toda essa coisa dentro de uma tag div. E a etiqueta div tem uma identificação de listas de compras ou o item de mercearia. Vamos dar uma olhada aqui. Vamos para o nosso código. Vamos a lista de compras que está lá fora dentro daquele div. Lembre-se que nós estruturamos isso de modo que se nós temos um elementos UL e dentro que nós temos todos os nossos itens de lista. O que esses fãs. E o nome de cada item de supermercado está em um elemento span com um nome de classe do item. Então lembre-se disso enquanto avançamos. Ok, então o que eu quero recapitular você sobre? Bem, vamos dar uma olhada em algumas coisas. Cookie alto nível, só para conseguir isso, só para nos fazer pensar. Em primeiro lugar, como podemos acessar o domínio forte do item? Você se lembra disso? Tenho certeza que o que podemos fazer é definir uma variável chamada item de supermercado. E então podemos acessar nosso objeto de documento na net. Podemos acessar o QuerySelector. E ele funciona de forma muito semelhante a outras bibliotecas correlacionam lá fora como jQuery. Podemos ser extremamente específicos. O que eu quero dizer? Digamos que queremos acessar o terceiro item desta lista. Algo para beber, Coca-Cola. Como faríamos isso? Bem, eu vou te mostrar o que podemos fazer é que podemos primeiro ser muito amplos acessando toda a div com uma identificação da lista de compras. Dentro disso, queremos acessar um aliado para cada um desses itens na lista. Mas neste caso, queríamos ser o terceiro item para que pudéssemos acessar o terceiro filho. Mas agora também não queremos que toda a etiqueta LI nos devolva. Só precisamos de um, o sabor real, algo para beber, EG Coca-Cola. Não queremos esse botão de apagar também. Então podemos até ser mais específicos. Podemos dizer: “Legal, queremos a coisa que nos devolveu.” Só queremos a cláusula do item. Porque se você se lembrar se eu tenho ocorrido, você pode ver aqui que a extensão com algo para beber ET Kirk tem um nome de classe de conjuntos de itens. Tudo o que fizemos aqui. E deve ser isso. Se tentarmos acessar nosso item de supermercado. Quão incrível é sermos devolvidos para nós? Aquele item isento, ficamos loucos. Está bem. Como é que nos devolvemos? Todos os itens da lista. Enquanto você pode pensar, ok, vamos definir uma variável chamada itens de supermercado. É sai do documento do seletor de consulta. E digamos que queremos todos os itens da lista. Novamente, podemos acessar toda a nossa lista de compras Rapa e podemos apenas dizer, ouça, nos dê o aliado. Oh, oh, claro, item de supermercado. Eu queria itens de mercearia ACI. E se fôssemos executar isso e tentarmos consolar outros, algo estranho acontece. Y estão nos dando o item de supermercado do console. Eu queria que fossem itens. E se fizermos isso, só teremos o primeiro técnico aliado. Porque lembre-se, a seleção de consulta retorna um item do DOM. Então, como devolvemos todos os itens no DOM? Vamos escrever isto, limpar isto. Para que ele possa começar. Novamente. Isso é certo. Podemos usar o seletor de consulta todos concretos. Então vamos deixar itens de mercearia é igual ao seletor de consulta de documento tudo. E sim, podemos tentar. Podemos acessar nossa lista de compras, todas as etiquetas LI. E este console desconecte isso. E eles vamos, recebemos uma lista de nódulos de volta para nós. E se abrirmos essa lista de nós, recebemos cada um dos nossos textos. Mas é imperceptível. Lembra como podemos acessar itens na lista de nós? Bem, você pode acessá-lo como uma matriz normal. Então, se você quiser o primeiro aliado, podemos apenas fazer os colchetes e 0, que nos dará a primeira tag LI. Claro, se você quiser o segundo, você pode colocar o número 1 e isso lhe dará o segundo, e assim por diante. Bastante direto. E como podemos chamá-lo de ciclo através de todos esses itens dinamicamente. Podemos usar o para cada método. E passamos por tudo isso desconhecido. Só estou te dando uma breve recapitulação. Mas de qualquer forma, por que podemos usar o método FoEach? Vai, porque é uma lista de nós. Se usarmos outros métodos de acesso como seletor de consulta, por exemplo, não temos acesso ao para cada um. Quero dizer, quando usamos certos que retornam um ArrayList para nós, como seletor de consulta todos, por exemplo. Então, como é que isso funciona? Bem, podemos acessar nossos itens de supermercado. Podemos acessar o para cada método. Então podemos dizer para cada item devolvido a nós, queremos executar uma função específica. E sob não, digamos que queremos acessar o item e queremos alterar seus takes para contin propriedade para ser. Você acha que isso vai funcionar? Os artigos haka que é uma forma de percorrer todos os itens da lista e parar de manipular seu conteúdo. Outra coisa que podemos fazer quando você não quer substituir algo é que você pode anexá-lo para sempre Eles. Então o que podemos fazer, por exemplo, é pegar nossos itens da lista de compras, o foreach. E em vez de atribuir todo o conteúdo de texto a algo novo, podemos apenas anexá-lo e seu pintado, incluindo o símbolo de adição. E sim, podemos dizer que é um item de supermercado que vê se funciona. Mão. Lá vamos nós. Agora acabamos de adicionar algo novo. Podemos continuar a brincar com isso e infinitá-los e realmente é divertido. Eu só queria lhe dar um alto nível de resumo ou recapitulação do que fizemos em palestras anteriores. A outra coisa antes de eu terminar esta palestra é vamos para os elementos aqui. Vamos nos livrar de tudo isso. E lembre-se que trabalhamos com todas essas coisas. Trabalhamos com nós. Lembre-se, tudo é praticamente um nó no DOM. Temos nós de elementos e nariz de elemento ou muito simples, é como este div aqui como uma nota de elemento. Mas não temos apenas nós de elementos. Dewey, temos uma gama de tipos diferentes. Temos nós comumente, por exemplo, você pode ver sim, seção 1, seção 2, 6 e 3. São comentários, notas. Nós não só temos nós comuns são Dewey. E temos uma tonelada de coisas. Temos nódulos gustativos. Abrimos uma destas doses, abrimos a URL. E agora acho que subimos a escada agora. Então não é exatamente o mesmo que o nosso HTML. Mas estes leva nó via item de mercearia como ele toma nota, nós não só temos Takes nós, nós também temos um atributo nós. Por exemplo, essa tag H2 tem um atributo com uma propriedade chamada cláusula, e nós demos a ela um valor de título. Então, lá vai você. Espero que isto seja memória de Tóquio. Espero que isso seja meio que fazer santos. Mas o suficiente para mim. Sinto que está na hora de entrarmos no aspecto de fazer isso funcionar. Então eu estou super, super animado e te vejo na próxima palestra. 8. Removendo elementos DOM — o caminho antigo: Então vamos falar de codificação. Tudo o que eu fiz foi adicionar um arquivo JavaScript chamado app.js. Então, se nós temos nosso índice e vamos para o fundo, nós realmente precisamos adicionar o script, não é? E nós o chamamos de app.js. Então lá vamos nós. E eu acabei de criar um arquivo de ponto js vazio no mesmo diretório é que vamos nos adicionar o índice no styles.css. Então o que eu fiz e a primeira coisa que eu quero fazer é que eu quero que nós levemos isso de uma maneira fragmentada. Quero que peguemos cada peça, o petróleo. Então a primeira coisa que quero fazer é querer que sejamos capazes de excluir um item da lista. Se formos para o nosso navegador, podemos ir, você pode ver que temos esses botões de exclusão. E, claro, agora, quando clicamos neles, nada acontece. Então vamos ver o que isso primeiro, como vamos fazer isso? Em primeiro lugar, quero mostrar-vos a forma ineficiente de o fazer. E então eu quero que você pause o vídeo e eu quero que você tente e use borbulhar evento e até mesmo delegação. Mas primeiro, vamos com a abordagem ineficiente, que você pode ver muito no código do desenvolvedor. É por isso que eu queria que você soubesse disso. Então, sim, todos nós voltamos e eu vou fazer o estado em como podemos fazer isso. Vamos primeiro, eu quero rotular nosso código então há apenas ter parado aqui e excluir itens, apodrece e eu vou apenas copiar esses links SAM. Lá vamos nós. E uma maneira de fazer isso é adicionar ouvintes de eventos a cada um desses botões. Então o primeiro passo seria pegar todos esses botões, certo? E podemos fazer isso definindo uma variável chamada Lições. Zoom imediato, Sim, Então você pode ver que beta, queremos acessar os documentos no, temos o seletor de consulta. Tudo no seletor de consulta tudo o que queremos pegar a div externa hold lista de supermercado e no nome queremos pegar cada um deles. Eu elimino isso. Lembre-se, isso precisa de um custo de exclusão. Então tem uma classe de elites. E se nós conectarmos isso para a tela, vamos em frente. E se inspecionarmos isso, iria para o console. Devemos ver uma lista de nós e eu vou lista de modo está aqui e eu falei quatro itens, não importa. E é cada um desses botões. Então aqui vamos nós. Temos acesso aos botões. Vamos voltar para 6 tipos de dados. E a maneira ineficiente da velha escola é percorrer cada botão e adicionar ouvintes de eventos a ele. Como faríamos isso? Bem, mesmo no vídeo de recapitulação anteriormente mostrou que poderíamos acessar para cada faz isso. Então vamos fazer isso. Vamos acessar nossa variável de botões. E então podemos acessar este método ForEach. Podemos pegar cada botão no para cada loop, e então podemos fazer coisas para ele. E neste caso queremos agarrar esse botão e queremos adicionar qualquer feito agora, as veias que queremos ouvir e cada botão é um evento de clique. E então, é claro, queremos executar nosso manipulador. Lembre-se que mão para portas de função dado um objeto de evento que definimos em uma variável velho II. A propósito, estou apenas executando a mão de olivina diretamente dentro desta função. Agora, o que acontece quando o usuário clica nesse botão? Isso queremos navegar para os pais não tweet e, em seguida, queremos excluir esse período. Então o que queremos fazer é definir uma nova variável. Queremos definir uma variável chamada ally, por exemplo, porque ela é mantida dentro de um elemento aliado. E assim elementos aliados não vai ser o alvo. Trouxe o botão que acabamos de clicar, e vai ser seus elementos pai. Isso faz sentido? Então lembre-se do que fizemos. Os usuários clicaram nesse botão. Agora navegamos até a tag aliada tão fina. E digamos que agora queremos usar a criança e o método de remoção da velha escola. Nós fazemos isso. Lembre-se que neste curso nós nos vimos, bem, é meio estranho porque chegamos ao LI nós não tivemos que acessar seus pais e, em seguida, remover seu filho a fim de se remover. Sei que parece estranho. Então temos que acessar nossa variável, temos que então acessar seu elemento pai, e então podemos remover giz. E, claro, a criança que queremos remover é ela mesma. Então vamos ver se este código funciona antes de começarmos a melhorar nele. Vamos para baixo navegador e ele está tentando mover a classe das crianças. Absorção de fumaça. O que eu fiz de errado? Vamos para o topo da consola. O filho removido não é uma função. O filho removido não é uma função. Por quê? Deve ser um C maiúsculo? Esfria, aqui é onde o analisador JavaScript é excruciante joelho preciso. Então o ego, se colocar um C maiúsculo que deveria funcionar, Astronomia move açúcar e especiarias e é removido. Como algo legal para beber, pizza e MLK. Dia em que vamos se apagou tudo. Que incrível. Mas como sou antiga, vamos ao nosso código. Esta não é a maneira mais eficiente de fazer isso. Quero que pare o vídeo aqui. Você sabe o que? Vou parar o vídeo aqui. Na próxima palestra, faremos a nova e melhorada maneira de fazer exatamente a mesma coisa. Mas vamos utilizar borbulhante de eventos, qualquer delegação de eventos que antes de eu dar essa solução, pense nisso. E na próxima palestra, vamos cortar juntos. 9. Removendo elementos DOM — a nova maneira: Em primeiro lugar, como é que vamos estruturar isto? E utiliza até borbulhar. Se pegarmos nosso arquivo de índice aqui e rolarmos para cima, vocês notarão que temos esses enormes elementos de coruja, não é? Então por que não colocamos nosso ouvinte de eventos nisso e ele pode ouvir todos os feijões clicky que eles bolham até ele. Então vamos fazer isso. Então vamos excluir todo esse código porque é muito, muito ineficiente. Então, vamos adicionar um ouvinte de eventos para que elementos UL. O primeiro passo é, obviamente, termos que agarrar esse elemento UL. Então vamos fazer isso definindo uma variável chamada lista de compras. Você possui. Por falta de uma palavra melhor, podemos acessar nosso documento aqui. Podemos acessar o seletor de consulta porque só precisamos de um item, não é? E para ser específico, podemos olhar dentro da nossa lista de compras. E dentro disso, queremos pegar tudo que vocês pegarem. Agora o que queremos fazer é adicionar o nosso ouvinte de eventos. Então, como fazemos isso? Bem, nós pegamos nossos elementos URL. Ele tem um método chamado addEventListener. Nós vamos estar ouvindo para todo o evento clique, e então nós vamos executar uma função manipulador. E vamos chamar isso de remover. Então, aqui podemos definir uma função manipulador. Nós vamos usar a palavra-chave de função do JavaScript, nós chamamos de remover. E aqui vamos nós. Os corações de opcode estão dentro desses curly ou índices. Nós vamos estar existindo no objeto evento. Sabemos que temos que colocá-lo em uma variável. Nós tipicamente chamamos de variável E. E nós vamos precisar acessar tipo de queda da veia tada por causa da ação dos EUA leva a dizer a palavra MLK. Não queremos excluir esse item da lista. É apenas quando o usuário clica no botão de exclusão. Também se lembre que tem uma classe de exclusão. É apenas nesse caso em que queremos realmente executar esta função. Então, em primeiro lugar, vamos definir uma variável alvo. E eles podem ser o alvo real, conhecido como aquele elemento que faz uma TVP. Agora, podemos mudar se o alvo, se for Krosnick for igual a remover Dean, queremos que algo aconteça. Neurônios, queremos executar esta função. Caso contrário, não queremos que nada aconteça em um desconto se o usuário clicou nessa banda e entramos em agarrar seu elemento pai sendo esse elemento LI inteiro. Então vamos definir outra variável chamada ally. E sabemos que serão os alvos, que serão o seu elemento pai. Isso faz sentido? Então tudo o que temos a fazer, é claro, é XY definir elementos e usar o novo e melhorado método de remoção em nós. Hoje vamos, espero que isso esteja fazendo um monte de cenas e esta é uma maneira muito melhor de estruturar nosso código. Então vamos para o nosso navegador e vamos ver se isso funciona. Vamos tentar apagar a MLC. Não está funcionando. O que eu fiz de errado? Vamos para a consola. Então não é nem ver isso. Não é nem mesmo em acionar esse evento de clique. Vamos para aqui. Oh, você sabe o que eu acho que pode ser o caso. Sim, o nome da classe não é removido resistor. Se formos aqui para indexar, sim, esse pode ser o problema. O nome da classe é excluído. Como podemos ver, não é removida. Isso deve ser deletar. Vamos voltar para o navegador. Vamos tentar excluir o viés de garantia. Então esta é uma maneira muito melhor de estruturar nosso código e nós utilizando realmente um monte de confusão de conceitos avançados com objetivos de gentileza. Então, como eu faço sentido, espero que sim, mas na próxima era e vamos continuar com eles, fizemos a exclusão de itens logicamente, o próximo passo deve ser ter que descobrir como adicionar itens à lista. Você pode tentar você mesmo. Se formos para o navegador, permaneça. Mas o que queremos, queremos que o usuário digite algo na caixa de entrada ou quando o usuário clica em anúncio. Queríamos editar dinamicamente a lista do empréstimo. Como iríamos fazer isso? Pense um pouco e na próxima palestra, vamos codificá-lo para obtê-lo. O Sinon. 10. Introdução aos formulários: Então agora estamos entrando em adicionar itens a uma lista. Vai ser muito excitante e esperançoso e aprendi uma tonelada nesta palestra. Então, por onde começamos? Bem, antes de começarmos, codificação, aros quase não estão prontos. Café Lama. Era esta aula. De qualquer forma, como eu estava dizendo antes de começarmos a codificar, eu quero discutir formulários com um pouco mais de detalhes. Lembre-se, na primeira parte desta série DOM, discutimos o acesso à propriedade do formulário em nosso documento. Deixa-me mostrar-te o que quero dizer. Só eu te lembro. Então vamos para a nossa consola. Agora vamos e como acessamos nossos formulários toupeira em primeiro lugar, acessamos nosso documento, a raiz da nossa página de takeaway e documento honesto faz uma propriedade padrão fornecida a nós pelo DOM chamado formulários. E é assim tão fácil e o que nos é devolvido é uma coleção HTML. Já passamos por isso com muito mais detalhes na primeira série. Mas se abrirmos este HTMLCollection, podemos ver que temos duas formas. E isso faz sentido. É literalmente apenas representando nossas formas em nosso HTML. Se formos a ocorrer. Este é o nosso arquivo index.html. Podemos ver que temos dois formulários. O primeiro formulário está dentro da nossa seção de cabeçalho e, em seguida, ele tem um ID do item de pesquisa. Vamos discutir isso mais tarde. Por enquanto, queremos lidar com a Seção 2. Não twitte em conformidade com o SRC. É aí que o usuário digita o item que deseja adicionar à lista e clique em Adicionar disse fazer santos. Então, se voltarmos ao nosso navegador, como existimos às quatro? Bem, existem algumas maneiras e podemos lidar com isso como uma matriz em alguns casos. Especificamente se queremos acessar itens desta coleção HTML, o que eu quero dizer? Bem, podemos acessar esse formulário exato. Ganhamos acessando a propriedade do formulário. E então tipo de tratá-lo como uma matriz usando os colchetes. E podemos sair do segundo item na matriz. E essa é a forma que queremos. É uma forma de o fazermos. Outra maneira que podemos fazer isso é que podemos realmente passar como um argumento. É ID, e sabemos que tem um ID de adicionar item. Devolvemos isso e recebemos exatamente a mesma coisa. Ok, então isso é um pouco de uma recapitulação. É apenas um pouco de um pouco de um lado para sua informação. Agora, antes de começarmos a codificar é mais uma coisa que tenho que te mostrar. E é isso que acontece com os formulários. Duas coisas acontecem. Um, um evento de envio é acionado. A segunda coisa que acontece é que a página inteira não é atualizada. Deixa-me mostrar-te o que quero dizer. Então, digamos que o usuário exclui todos os itens, mas o último nesta pizza. Se agora queremos adicionar MLC e o usuário clica no anúncio, lembre-se qual é o comportamento padrão. Um deve enviar evento é acionado e para toda a página recarrega. Vamos clicar em Adicionar. E eles iriam recarregar a página inteira. E você pode ver no canto superior esquerdo do nosso navegador, todas as vezes que o botão Adicionar é atualizado meticuloso. Watts. Não queremos esse Dewey, mas a nossa sorte é a forma como podemos evitar o comportamento padrão. Deixe-me saltar para a tela rapidamente e deixe-me falar um pouco mais sobre isso. 11. Comportamento padrão para envio de formulários: Antes de começarmos a lidar com o nosso formulário, eu acho que você realmente precisa entender como alguns eventos desencadeiam o comportamento padrão e o que podemos fazer como desenvolvedores para controlar o tipo de impedir que o comportamento padrão aconteça. Então aqui vamos nós. Tenho um arquivo de código em branco do Visual Studio aberto. E quero que vejamos a etiqueta de âncora. Especificamente o que acontece quando clicamos em um link? Qual é o comportamento padrão? E eu vou mostrar que você já sabe que o comportamento padrão é abrir uma nova janela do navegador seguindo esse link, deixe-me mostrar o que eu quero dizer. Então aqui vamos nós. Vamos apenas criar um arquivo index.html, um modelo HTML dentro daqui podemos literalmente ter um elemento de corpo e apenas uma tag âncora com um link. E isso só liga ao Google, sei lá. Pode ser do tamanho que quisermos. A próxima coisa que quero fazer é abrir um servidor ao vivo. Vamos abrir o nosso servidor ao vivo rapidamente. Espere pela Rússia. Está vindo. Claro, tenha um gosto intuitivo. Tolo eu. Vamos ao Google. E vamos levar isto para a esquerda da tela. E lá vamos nós. Há no link. E o que acontece quando clicarmos nesse link? Tenho certeza que você sabe. O usuário é redirecionado para Google.com. Ok, este é um exemplo muito simples. Mas como evitaríamos esse comportamento padrão? Bem, deixe-me saltar para uma apresentação rapidamente e vamos falar sobre isso. Como acabei de mencionar, muitos elementos HTML exibem um comportamento padrão quando interagimos com ele. Que tipo de elementos sempre comportamento padrão? As imagens dizem muitas. Por exemplo, quando um usuário clica em uma caixa de texto, o comportamento padrão dá que leva o foco da caixa com um pequeno período do cursor piscando. Todos sabemos disso quando entramos na caixa de texto de entrada, não se preocupe. Usando nossa roda do mouse em uma área rolável irá rolar na direção que rolar com essa pequena roda do mouse. Aceitar uma caixa de seleção ativará ou desativará essa alteração de estado. Clicando em um link, um link de marca âncora abrirá uma nova página e direcionará o usuário para esse link. Todos estes são exemplos de parafuso em reações a eventos, nosso navegador instintivamente sabe o que fazer sobre. A boa notícia para nós, porém, é que podemos desativar esse comportamento padrão e quando não o queremos. E podemos fazer isso porque temos um monte de controle sobre o navegador, tem Desenvolvedores. Legal, está tudo bem, mas como desligamos esse comportamento padrão? Se queremos transformar esse comportamento padrão ou podemos chamar a função padrão da província. Esta função precisa ser chamada ao reagir a um evento no elemento deve reação padrão que queremos ignorar. Então lembre-se que temos que acessá-lo no próprio objeto do evento. E eu sou um portador de boas notícias hoje porque o método PreventDefault pode ser usado em muitos elementos, como links, caixas de entrada, formulários, caixas de seleção, cetera, etc. Mas agora vamos voltar ao nosso exemplo da tag âncora e vamos ver como podemos impedir que sua ação padrão aconteça. Isso está fazendo sentido? Espero que sim. Mas como acessamos o método PreventDefault? Bem, vamos voltar aqui para o nosso editor de texto. Vamos expandir essa gracinha. Como iríamos sobre acessar de onde ele vem e como ele funciona? Bem, em primeiro lugar, queremos usar JavaScript. Então vamos adicionar uma tag de script na parte inferior do nosso arquivo. A primeira coisa que queremos fazer é acessar essa etiqueta âncora. E já sabemos disso. Eles são muitos métodos de acesso diferentes. Vamos colocá-lo em uma variável JavaScript, e vamos dar a essa variável um nome de, digamos, âncora. Podemos acessar esta variável iniciando e eu vou documentar objeto. E no dia, temos muitos métodos de x's. O que vou usar agora é getElementsBytagName. O nome da etiqueta que queremos é a nossa etiqueta âncora. E lembre-se o que esse getElementsBytagName retorna para nós. Ele retorna para nós uma HTMLCollection. Parar aqui não é suficiente. Na verdade, temos que dizer ao navegador qual item na coleção queremos. Neste caso, há apenas um item na coleção. Portanto, queremos acessar o primeiro item da coleção. Então lá vai você. Temos uma etiqueta de âncora. Tudo o que queremos fazer agora é anexar um ouvinte de eventos. Não temos? Clique em ouvinte de eventos? Podemos fazer isso acessando nossa variável na net. Temos um método padrão fornecido a nós pelo navegador chamado add event listener. Já passamos por isso muitas vezes e você provavelmente está ficando muito entediado com essa banana. E em vez de definir nosso próprio manipulador de eventos personalizado em outra função, eu vou apenas fazê-lo direito dentro do segundo argumento. E eu vou usar a sintaxe da seta. Tri-ménage simples. É só colocar um espaço lá. Então lá vamos nós. Esta é a nossa função de manipulador. E o que queremos fazer? Bem, em primeiro lugar, queremos evitar o comportamento padrão. Esse comportamento padrão é encontrado no próprio objeto de evento. E você se lembra como acessar esse objeto de evento? Nós temos que colocá-lo em uma variável, e nós tipicamente colocá-lo em uma variável chamada e. Então tudo o que temos que fazer para evitar que o padrão é que temos que acessar este objeto de evento no eles é um método chamado previne default. E porque é uma função, vontade, porque é um método, temos que segui-lo por parênteses. Hoje vamos e evitamos o comportamento padrão. E só para terminar para o exemplo de saúde legal, o que eu quero fazer é que eu quero acessar na variável ANCA e, em seguida, eu quero alterar seu conteúdo de texto. E podemos apenas dizer comportamento padrão como foi prevenido. O que está acontecendo? Sim, você conseguiu. Temos e se formos, é tudo navegador. Expanda EUA. Vamos voltar e atualizar nossa página. O que acha que vai acontecer agora? Deixe-me dar um zoom. O que você acha que vai ter o nulo quando o usuário clicar no link. Bem, vamos tentar. Vamos clicar no link. É legal, não importa. Então agora você acabou de aprender como evitar o comportamento padrão. R. Nós não foram redirecionados para o Google e ter mudado, cuida dessa raiva quando clicamos nele. Então lá vamos nós. Só queria mostrar como podemos começar a ter mais controle sobre o comportamento padrão. Claro, neste momento não lidamos com o formulário, mas é o que vamos fazer na próxima palestra. Vamos começar a lidar com esse formulário com o usuário quer adicionar itens à ShoppingList. Vejo você agora. 12. Como adicionar itens dinamicamente: Agora estamos entrando na parte realmente emocionante de adicionar itens ao nosso lado. Como fazemos isso vai, se formos para o nosso arquivo app.js, você pode ver aqui nós fizemos excluir itens. Então deixe-me copiar isso. Acertar motins e é sem parar. Crie uma nova seção onde agora queremos adicionar itens. Por onde começamos? Bem, se formos para o nosso arquivo index.html e se rolarmos para baixo em nosso arquivo de índice, chegamos à seção Alice dois, este é o nosso formulário com o usuário adiciona um item e lembre-se do comportamento padrão de um completo. Sempre que vemos um botão em um completo e o usuário clica nesse botão, um evento de envio será demitido, mas não no botão em si que será disparado sobre esse elemento de formulário. Então, o primeiro se queremos fazer é queremos ouvir para o evento de submissão no elemento formulário, não é? Mas, então, queremos evitar o incumprimento da dívida. Então, se formos para o nosso arquivo app.js, o primeiro passo é pegar esse elemento de formulário. E para fazer isso, vamos colocá-lo em uma variável chamada formato de matriz. E podemos acessar nosso objeto de documento. Sobre isso, podemos acessar um método chamado get elemento por ID e deu-lhe um ID de AddItem. Lembre-se para que o nosso arquivo de índice, Dada a forma, um ID de AddItem. Veja como vamos com acesso ao nosso completo agora. A próxima coisa que queremos fazer é adicionar um ouvinte de eventos. Não anexamos um ouvinte de eventos? Então, acessamos nossa forma e variável. Em seguida, queremos adicionar um ouvinte de eventos, mas este evento não é um evento clique é nós. É uma submissão. É isso que queremos ouvir. E, em seguida, é claro, queremos executar uma função de manipulador. Vamos acessar esse objeto de evento. Lembre-se, nós temos que, a fim de usar esse método padrão previne, nós vamos colocá-lo em uma variável chamada e. Então nós vamos usar a sintaxe de seta nova e melhorada. E vamos definir como um manipulador funciona dentro dessas chaves. A primeira coisa que queremos fazer é evitar que a página se atualize. E para fazer isso, temos que acessar nosso objeto de evento e usamos o método padrão. Sim, nós conseguimos. Vamos para o nosso arquivo de índice e vamos abrir nosso site no Live Server. Para isso é ampliado ou zoom para um 100 por cento. E digamos que o usuário exclua todos os itens, exceto um, e então eles escrevem algo no ar e clique em Adicionar. Você pode ver agora que a página não está atualizando. Então ele está ficando lenta, mas seguramente, vamos voltar ao nosso código. E vamos voltar ao nosso arquivo JavaScript. Qual é a próxima declaração? Bem, se você for para o nosso site, ainda assim, o usuário vai estar digitando litros e gosto nesta caixa de entrada sobre isso. E o que queremos que eles façam é que precisamos pegar essa entrada. Leva dentro dessa caixa de entrada. E, em seguida, precisamos editar como um item de lista quando eles clicam em Adicionar. Então vamos pegar essa entrada saborosa. E como pegamos mensagens? Tudo o que podemos usar outro dos métodos do x que usam QuerySelector nesta instância, é tudo o que precisamos fazer aqui é pegar usos. Podemos sair da tabela de usuários usando um seletor de consulta e estamos procurando os elementos de entrada. E no elemento de entrada, há uma propriedade chamada valor, e ele retorna para nós o valor no campo de texto de entrada. Deixa-me mostrar-te o que quero dizer. Então vamos definir uma variável chamada texto, e isso será o que o usuário tem tocado nessa caixa de entrada. Temos que pegar o formulário e a propriedade. E como eu mencionei, podemos usar um método de acesso chamado selector de consulta. Agora, podemos ser muito específicos ainda. Não podemos, não podemos simplesmente usar o seletor de consulta de entrada e, em seguida, obter esse valor. E para provar isso para você, vamos apenas registrar o texto do console. Vamos para o nosso navegador. E vamos dar uma olhada no console. E é ensinado piano, MLK e clique em Adicionar. E eles iriam com a obtenção do MLK exibido para nós com literalmente tem que leva valor a partir dessa caixa de entrada. Eu disse que não é tão difícil motorista. Mas vamos voltar ao nosso editor de texto. Podemos ser mais específicos. Por exemplo, digamos que você tenha alguns tipos diferentes de campos de entrada ou elementos. Mas, neste caso, só queremos aquele com o tipo de mapa de gosto. Podemos fazer isso também para ser mais específico dentro do navegador GUDDAT, novamente, é apenas rasgar tudo e vamos apenas dizer açúcar tempero. E clicamos em Adicionar e temos astúcia chefe. Isso é só se você quiser ser mais específico. Mas neste caso sabemos que só temos uma entrada, então não temos que lidar com isso. Podemos manter isso muito, muito simples. Vamos excluir este console porque sabemos que ele funciona. Qual é o próximo encontro agora? Mães solteiras, queremos adicionar item de lista em nosso navegador. Queremos literalmente adicionar outro item da lista como Sugar and Spice. Queríamos adicionar um novo. E como fazemos isso? Bem, primeiro temos de olhar para a sua maquilhagem. Índice. O que você percebe em cada item? Você pode ver que há uma etiqueta LI. E dentro de cada elemento LI, temos dois vãos. O OneSpan tem uma classe de item e esse é o item que o usuário deseja comprar. E, em seguida, a outra extensão é o botão de exclusão. E, claro, temos cláusulas diferentes que definem esse estilo. Então é isso que precisamos criar cada vez que o usuário clica no botão Adicionar. Não se preocupe. Vamos voltar ao nosso arquivo aqui. E deixe-me pegar o que queremos. Isso é o que queremos. E eu vou, e os dois vãos. Então vamos começar a criar menos agora cada vez que o usuário clica no botão EDX. Então, digamos aqui, criando itens dinamicamente. E passamos por isso com muitos detalhes na Parte 1 desta série DOM. Então você deve estar muito familiarizado com isso. Olhe para essa imagem agora, o que precisamos para criar primeiro? Precisamos criar uma hora, não me preocupo. Então vamos definir uma variável chamada ally. E, claro, podemos acessar nosso documento e é um método chamado criar elementos. O elemento que queremos criar é que os elementos Ally. E então precisamos criar mais dois elementos. Não se preocupe, precisamos de um para o item do supermercado e precisamos de um para o botão Excluir. Então vamos definir duas variáveis. Digamos que é o nome do supermercado porque esse é o nome do item do supermercado que estamos adicionando à nossa lista. E vamos documentar. Claro que temos que criar um elemento e, neste caso, ele vai ser um elemento span. Vamos fazer exatamente a mesma coisa, mas não precisamos de um nome de supermercado agora, precisamos, isso mesmo, de um botão Excluir. Então vamos chamá-lo de “botão de apagar”. E, a propósito, não sei se você pode ver isso claramente, mas o IDE esmaeceu esses nomes de variáveis. Na verdade, é uma cor cinza, não branca e é cinza porque está nos dizendo que ainda não usamos essas variáveis. Então, é só um pouco interessante, para sua informação. Então criamos nossos elementos. Agora sabemos que os vãos todos aninhados dentro do elemento LI no dia. Podemos ver isso. Então vamos fazer isso. Vamos um pintado para os elementos LI e como podemos obter coisas para itens? Mais uma vez, já fizemos isso em detalhes detalhados anteriormente. Tudo o que temos a fazer é x elemento LI ESL e acessamos uma propriedade chamada uma criança dolorida. A criança que queremos pintar neste caso é uma mercearia com o nome dela e você lançou a segunda que queremos pintar é este botão Excluir. Botão Excluir. Lá vamos nós. Por que acha que isso vai funcionar? Na verdade, funcionaria. Vamos salvá-lo. Escaravelho Rosa. Deixe-me digitar a mão via MS clique em Adicionar. Não está a ser adicionado ao nosso DOM, pois não? E novamente, discutimos isso com muitos detalhes na primeira série. O que acontece agora é que criamos todos esses itens, mas eles meio que flutuam no espaço. Precisamos anexá-lo ao DOM, precisamos anexá-lo a um pai de alguma forma. Então, como fazemos isso? Bem, se formos para o próximo outono, o que é que nós pegamos este elemento UL amendoim para isso. Então, se formos para o nosso script e arquivo ab.js novamente, não é agarrá-lo. Eu vou elemento. Então tudo o que temos que fazer aqui é dizer tarde, que eu serei o documento. Obter elementos por nome de tag novamente. Podemos acessar o material legal ou voltas e HTMLCollection e queremos o primeiro elemento UL dentro dele. Tudo o que temos que fazer agora é tocar nossos limões recém-criados para o dominó. É este tipo de fazer S2? Espero que sim. Então, para tocá-lo, é muito simples. Pegamos nosso elemento pai URL e, novamente, acessamos um child pain e a criança que queremos acrescentar é o aliado. Isso está fazendo sentido? Então lá vamos nós. Vamos salvá-lo. Vamos para o nosso navegador. Digamos, ou digamos cerveja, só para ser diferente do que temos. E vamos acrescentar. E olha para isso. Nós literalmente editamos o aliado, mas como você pode ver, não temos gosto em eles comem como antes de lidarmos com isso, toma aspecto, basta dar uma olhada no nosso DAW inspecionar, vamos dar uma olhada nos elementos. Nós literalmente editamos dinamicamente este elemento LI. Sim, os vãos estão vazios, mas você tem que comemorar nossos sucessos até agora e estamos fazendo isso em uma abordagem gradual passo a passo. Se fizermos isso novamente e clicarmos em Adicionar, você pode ver que ele é editado dinamicamente para o cão. Muito, muito legal e elemento aliado com dois vãos. Mais algumas coisas que precisamos fazer para finalizar. A primeira coisa é que temos que adicionar texto alt. E a segunda coisa é que temos de acrescentar estas cláusulas. Então quero que pense em como fazer isso. E na próxima palestra, terminaremos isso juntos. Vejo você agora. 13. Como adicionar cursos: Ok, então sim, todos nós exatamente onde paramos. E lembre-se, nós criamos este LI, elementos dinamicamente. Então nós meio que temos o esqueleto no lugar que precisamos adicionar a carne a ele, não temos? Como é que fazemos isto? Vamos primeiro adicionar o conteúdo. O elemento tem dados de outtakes juntos. E vamos adicionar seis. E lembre-se se eu rolar para cima e ocorrer, nós realmente definimos uma variável chamada gostos que ainda não usamos. E esse é o gosto dos EUA é escrito em HTML nesse campo elemento de entrada. Então vamos acrescentar isso agora. Vamos editar também? Se você olhar para este item nome mercearia decks maneira queremos adicionar a entrada leva conteúdo em dentina. Então tudo o que precisamos fazer é acessar o nome da mercearia variável. Queremos que seu conteúdo de texto seja assinado com o valor de que leva concordar é tão simples? E eles terminam com um botão de exclusão. Para excluir variável botão que criamos acima. Nós também queremos colocar conteúdo dentro desse elemento span. E o dia de conteúdo Nós um é apenas para liderar um muito simples. E se formos para o nosso navegador e apenas atualizar esta página, vamos adicionar ter BIA e é bom nisso. Como você pode ver, não estamos completamente feito tudo o que não resolvemos corretamente. Por que isso é excluir, não empurrado para a direita. O que está acontecendo? E se abrirmos nossa Divya e demos ao item nós nós na lista de compras. Se abrirmos o URL e realmente vamos para essa tag LI, vamos ver o que está acontecendo. Nós editamos o sabor, o que é incrível. Mas você pode ver que as classes são aplicadas a isso. E o que isso significa, é claro, é que não há estilo. Como adicionamos isso? Vamos voltar tot leva dados. Vamos começar a pensar nisso. Digamos que adicione cláusulas. Como adicionamos lançamentos? Ganho disposto por dia são de algumas maneiras. Se formos para o nosso navegador aqui, isso tem o nosso console. Deixa-me mostrar-te uma maneira. Então, em primeiro lugar, digamos que nosso documento tanque obter elementos pelo nome da tag. E queremos a etiqueta LI. Se retornarmos isso, obtemos e HTMLCollection. E podemos ver que procuramos por tags LI dentro dele. Queremos o que vamos adicionar, não através da edição. Então lá vamos nós. Agora devem ter cinco anos. Rods com um 50 aliados. O dia não excede o último. O que acabamos de adicionar um impresso, podemos ver del saber cláusulas aplicadas a nós. Uma maneira de editar classe é apenas editar, esfriá-lo através dos medidores de propriedade className. Então, o que eu quero dizer com isso? Apenas acessamos esse item. Temos ClassName e podemos adicionar nossa própria matemática de classe. Digamos que tem gosto de varas. Se agora existirmos esse aliado e retornarmos para nós, podemos ver essas edições, essa classe de gostos. Então net é um caminho, mas qual é a grande queda foi esta? Will, a grande queda é que ele substitui todas as outras cláusulas. Só podemos fazer isso. Uma cláusula. Por exemplo. O terceiro que eu vou levar que é a pizza e nos fez agora mudar seu nome falso propriedade para gosto. Se fizermos isso, e sairmos do LI substituiu outras cláusulas se tivesse outros lançamentos. By the way, por exemplo, se sair desta perda de banda do item e substituí-lo pela propriedade className, ele irá realmente remover classe de item. Isso é meio que fazer santos? Eu sei que pode parecer um pouco confuso, apenas tenha em mente que tudo que eu estou tentando atravessar é que usar o nome da classe propriedade substitui perdas. Você não pode adicionar mais de um. Vejo que o nome da turma é um pouco desajeitado. Eles sempre chicotearam em torno dele. Então digamos que agora queremos acrescentar isso, no aliado, ter outra aula. Então o que poderíamos fazer é acessar aquele aliado. O nome da turma, o dinamarquês. Poderíamos ter concatenado as novas calhas nele, digamos T2. Então, agora, se fizermos isso e acessarmos o Ally, você verá outro problema. G, o que está acontecendo? Sim, eu sou. Hoje você tem dias. O outro problema que a estatística t é nada. O que você tem que se lembrar de fazer quando você editá-los? Você tem que colocar uma CIA. Eles podem. Então, quando o acessarmos, isso deve funcionar. Ele tem o gosto de um nome de classe separado, mas você pode ver que esta é uma maneira muito complicada. Há uma maneira muito melhor. O que é isso? Você se lembra? Vamos voltar aos nossos dados de texto. Então, qual é a nova e melhorada maneira de adicionar perdas dinamicamente? Ele está usando a API de lista de classes que foi introduzido pela especificação HTML5. Já passamos por isso em palestras anteriores. Ele tem muitos métodos legais disponíveis para nós, alternar removido ou exemplos. Mas o que queremos usar é adicionar e editar, super fácil de usar. Tudo o que temos que fazer é eu elemento. Queremos, em seguida, acessar a lista API que Damon tem um método chamado add. E queremos adicionar uma cláusula, não tweetar. E a classe que queremos adicionar maneira fria, e queremos fazer exatamente a mesma coisa com o botão Alt Delete. Queremos acessar ou excluir botão, a API da lista de classes. E queremos adicionar uma cláusula, exclusão fria. Se nós os EUA e ir para o nosso navegador, podemos apagar isso. Agora. Vamos agora adicionar VIA, Vamos clicar em Adicionar. E como é isso? Vamos ver um pouco. Então você pode ver que foi adicionado dinâmico. Não podemos apagar isso novamente. Podemos dizer e ouvir, não precisamos. Precisamos do que vai acabar para adicionar teatro também. Incrível, vamos ser editados. Chave dinâmica para o DOM. Respire um pouco. Comemore seus sucessos porque você vem muito, longo caminho. E você pode começar a ver como podemos aplicar o conhecimento que aprendemos em todo este curso para criar páginas web dinâmicas, Greenwald. E agora quero que continuemos a vaporizar os lados. O que podemos fazer a seguir? O que temos que lidar com as listas de esconder, caixa de seleção ao lado de acenar, nós marcamos que Allah lista de compras inteira está escondido e pensar sobre como podemos fazer isso. E depois o próximo agente que poderia alterá-lo. Complexo, sou Sue Bananas, estou super excitado. C nada. 14. Como esconder e ocultar nossos itens de lista: Certo, então aqui estamos. E o próximo passo é obter esta wiki de caixa de seleção ocultar. Como você pode ver agora, se nós formos e marcamos essas listas de esconderijo, nada acontece. Como iríamos fazer isso? Antes de começarmos a codificar? Eu quero que você entenda algo quando se trata de caixas de seleção e pescoço é um evento único é disparado cada vez que clicamos em uma caixa de seleção. Não é um evento de clique. É uma mudança de feixe para satisfazê-la. Então, se formos para o nosso código, Sim, olhamos para o nosso HTML e olhamos para esta div com um ID de mudança. E vemos essa caixa de seleção de entrada. Podemos ver que eu vou marcar caixas para encontrar dentro deste elemento de entrada esse tipo de caixa de seleção. E cada vez que essa caixa de seleção é totalmente um evento de mudança é acionado que bolhas até esta div com um ID de mudança. Mas o que exatamente é essa mudança de veias irá iniquidade muito rapidamente dar-lhe um resumo. Você pode estar se perguntando de nós, o evento de mudança vem. E deixe-me apenas dizer que ele é herdado da interface do elemento HTML. E então você pode estar pensando, bem, se ele vem da interface de elementos HTML, isso significa que todos os elementos apresentam desvantagem e que não é o caso. A mudança dos mais fracos só está disponível em alguns elementos. Nem todos. Por exemplo, a mudança em vão faz disparado para a entrada de um elemento de seleção e leva era em momentos em que a alteração para o valor do elemento é comprometida pelo usuário. E isso significa que para a nossa caixa de seleção, a que acabamos de ver, um evento de mudança será acionado toda vez que o site principal deste e mudar i0 toda vez que o usuário clicar nessa caixa de seleção. E apenas um pouco de um arquivo, você pode estar pensando que isso é muito semelhante ao evento oninput. Mas a diferença, sim, D sutil no evento de entrada ocorre imediatamente fora para o valor de um elemento mudou. Enquanto esta mudança em vão para a Sony submetido ventoso e veias, tipo de como foco perdido vai oferecer, o conteúdo foi alterado. Então, Zach, estou fazendo sentido. Espero que sim, mas nomeia o corte suave, você verá como é simples. Então isso é bom. Nosso arquivo JavaScript roubado até o topo foi feito em átomos. Vamos copiar isto. E agora queremos esconder itens. Veja como vamos. Temos os elementos do coração, odiando. Como vamos lidar com a gente? O que vamos fazer? Bem, de muitas maneiras para esfolar um gato. Poderíamos usar delegação de veia. Poderíamos ouvir a mudança da div geral do Anton. Mas neste caso, não quero fazer isso. E é por isso que você não pode seguir uma regra quando se trata de codificação. A razão pela qual eu não quero usar uma delegação veia aqui é que você terá acessar o destino do evento para determinar se as caixas de seleção marcadas ou não. E eu só acho que é uma maneira mais fácil se nós apenas trabalhar diretamente no próprio elemento de entrada. Não há razão para usarmos aqui uma delegação de veia. Não nos beneficia de forma alguma. Então a primeira coisa que quero fazer é pegar aquele elemento de entrada, ou seja, quero que peguemos essa caixa de seleção. Então vamos definir uma variável JavaScript e vamos chamá-la de caixa de seleção. E isso vai ser um documento. Vamos usar QuerySelector 1 ons consulta selector. E a seleção de consulta que queremos obter é que queremos obter essa entrada com o ID tudo. Acho que temos ideia do HIV. Se formos ao nosso ficheiro de índice, deslocaremos até aqui. Esse elemento de entrada tem um ID de legal, então nós só temos isso. Bom. O próximo passo é caixa de corrente honesta. Vamos adicionar um ouvinte de eventos. Mas veias Navi, queremos ouvir um conjunto de dados particular. É a mudança. E, em seguida, é claro que queremos executar uma função de retorno são manipulador. E nós vamos fazer isso direito dentro deste método de ouvinte de anúncios. E o que vamos fazer romance, uma das coisas que temos que fazer é determinar qual elemento, elemento geral queremos esconder. Então, novamente, vamos para o nosso HTML. Desça aqui para baixo. Podemos ver na seção 3 que lemos Allah lista de compras inteira dentro de um elemento pai geral com um ID de lista de compras. E é exatamente por isso que eu sempre adorei estruturar meu código era um representante geral. Porque você nunca sabe que tipo de código você quer fazer no futuro. E ele acrescenta muito fácil para nós agarrá-lo e simplesmente escondê-lo. Então vamos esconder isso em tempos de então vamos aqui. A próxima coisa que quero fazer é definir lista de compras. E, em seguida, pode ser novamente o objeto de documento. Temos que data de início e podemos obter elemento por ID e sabemos que o ID é listas de compras. Próximas probabilidades e queremos coletar o que é o próximo estado vai se as caixas de seleção, queremos que tudo oculto é trapacear caixa está desmarcada. Nós queríamos, achamos que Shun. E sempre que você vem a esta bifurcação na estrada, usamos uma declaração if, que vem de JavaScript. Então, se e o que vamos provar? Bem, felizmente para nós, quando um item é mudado, ele tem uma propriedade chamada cadeia. E então a propriedade será verdadeira se for alterada e falsa se não for alterada. Então, o que queremos dizer? Sim, queremos dizer que se a caixa de seleção for alterada, sabemos que ela será verificada perto de verdadeira. Então o que queremos que aconteça? Vamos querer pegar nossa lista de compras, não é? Queremos acessar uma propriedade sólida que é propriedade de exibição sobre isso e queremos salvar isso para nulo símbolo set else. E sabemos que a outra afirmação significa que é o Jake. Agora, nesse caso, queremos tentar pegar nossa lista de compras. Mais uma vez, acessamos em propriedade de estilo. Essa é a propriedade de escravos que queremos mudar e pescar. Queríamos nos tornar um conjunto de blocos fazendo esperanças aos santos em um hub. Nesta fase, você pode começar a entender que é muito intuitivo para entender como as veias funcionam. Sim, neste caso, precisávamos saber que tínhamos que ouvir o evento da mudança. Que estes são o tipo de coisas que são literalmente levar 30 segundos para rapidamente Google. E você vai ter o, você vai entender o fluxo de código. Vocês entenderão como codificar essas coisas. Então, de qualquer maneira, vamos para o nosso navegador. O fio dental. Tocar uma trombeta é ver, ver como vamos e esconder a nossa lista. Vamos clicar nele. Ficarei linda como está escondida. E se desmarcá-lo, ele é exibido como um bloco novamente, seria amplificadores, ficando divertido. Eu estaria aprendendo autonomia e código de depuração, apenas fazer sementes. Caso contrário, assista ao vídeo novamente, se você tiver dúvidas e o perdeu nas perguntas e respostas, estou aqui para ajudá-lo e te vejo na próxima etapa. 15. Recap do qual ouvintes de eventos que usamos: Eu não posso acreditar o quão longe estão conseguindo um CRC. Bem feito. Isto é tão fixe. Tenho andado a divertir-me muito e espero que tenhas aprendido muito ao longo do caminho. Antes de entrarmos em agora uma coisa bastante avançada e que é nós passando pelo filtro de pesquisa. Só quero recapitular o que fizemos. Lembre-se que este curso é predominantemente sobre eventos e compreendê-lo de uma forma muito avançada e como usamos as noites neste exemplo muito simples onde o usamos de maneiras diferentes. Por exemplo, vejamos este botão Excluir. Lembre-se quando clicamos em Excluir remove-o do DOM. Mas como fazemos isso? Isso é certo. Ouvimos o veto Contiki sobre esse elemento específico. E então usamos a delegação facilitadora, não é? Porque ouvimos esse evento de cliques, não em cada latim. Ouvimos na etiqueta da UL. E então, é claro, quando esse evento se espalhou até a tag UL, poderíamos obter o alvo, também conhecido como madeira pode descobrir qual botão foi clicado dentro encontrado no elemento pai sendo a tag LI. E então, é claro, nós apenas removemos isso do DOM. Isso faz SSD? E então o que aconteceu com a queda de EDx? O que fizemos lá? Bem, nesse caso, nós ouvimos o, não o evento clique porque sabemos que em um botão ou uma entrada, este tipo chutado pelo usuário em um formulário, um evento de envio é acionado. Então eles caem. Ouvimos o evento de envio no próprio formulário. E tem sido muito épico porque uma vez submetido, os anjos disparados dentro criaram um novo elemento na mosca. Editamos suas perdas dinamicamente usando a API de lista de classes e, em seguida, editamos isso para nossa lista. Então é por isso que uma frota ou frango OT. E clicamos em Adicionar. Ele é editado para o DOM e dinamicamente. E é claro que tivemos que evitar o comportamento padrão de uma submissão de formulário novamente, não foi? Tivemos que usar a prova para o padrão. E, em seguida, nós apenas cobrimos esta caixa de seleção lista. E novamente, não ouvimos um evento de clique. Fizemos ouvido para um evento enviar. Ouvimos o evento de alteração porque uma caixa de seleção tem uma mudança de arquivo de índice toda vez que eles mudam, estado continua e continua. E sim, não havia necessidade nem de delegação. Acabamos de ouvir as veias na própria caixa de seleção. E, claro, quando uma caixa de seleção é marcada, nós pegamos ele faz. E colocamos sua propriedade de exibição no sistema nano. Muito divertido. E podem ver que temos estado a ouvir eventos diferentes durante todo o caminho. E é por isso que escolhi este exemplo, porque ele passa por muitos tipos diferentes. E você pode ver como cada um é lógico. Faz muitas cenas quando você entende intuitivamente o que está acontecendo. Agora vamos falar sobre isso. Pesquisar itens. Quando eles usam um começa a digitar em um item de pesquisa, queremos e precisamos matar esses itens nesta lista abaixo. Novamente, não vamos estar ouvindo um evento de clique porque o usuário ainda não tem clique em nada. O que vamos ouvir? Quando, neste caso, vamos estar ouvindo o evento chave. Por exemplo, se o usuário pressioná-lo no teclado, assim que levantar o dedo, queremos que nossa função procure todos os itens e eu vou listas de compras que têm esse personagem, Amy. Se o nome de usuário fala I, L, K, por exemplo, queremos então pegar aquele bloco de texto inteiro, toda a palavra mole. E queremos procurar por isso, através das nossas listas. Então isso só vai ser outro cooler V2 ouvir, cair. E como você verá, não é tão difícil. Basta abordá-lo passo a passo. Ouvi falar de sinal para fazer sentido. Se não se preocupar, vamos passar por isso juntos. E como vocês verão, vamos dar passo a passo. A única coisa que quero mantê-los. Vamos lidar com os raios. Nós vamos estar lidando com métodos para apagar o índice Black off. E nós também vamos estar looping através de arrays e usando o método foreach. Se você está um pouco confuso sobre como funciona o JavaScript, por favor, confira meu curso completo de JavaScript grandmaster ou qualquer coisa, isso é legal. É um curso divertido também. E eu passo exatamente o que JavaScript significa nesse curso. Então, se você ficou confuso, acovardado alguns, entenda essas coisas. Então, em um nível alto de qualquer maneira, não se preocupe, tenho certeza que você será capaz de acompanhar. Mas então deve choramingar, gordura. Vamos falar disso e te vejo na próxima palestra. Olá. 16. Como acessar o campo de entrada e seu valor: Está bem. Acabei de cortar o cabelo. Sinto-me fresco, sinto-me bem. E vamos entrar nos itens de busca. É muito, muito legal. E mais uma vez, que como fazemos e por onde começamos? Bem, em primeiro lugar, você pode ver que nós temos esta caixa de entrada e nós sabemos pelo nosso código que nós lemos isso de uma forma. Então a primeira coisa que precisamos fazer é pegar esse formulário. Se obtivermos nosso código e nós em nosso arquivo de índice no momento, podemos ver que nós lemos todo esse campo de entrada em uma queda. Nós demos esse formulário, um ID do item de pesquisa vai subir tão bem. Mas como pegamos esse formulário? Há poucas maneiras de ter o nosso navegador. Vamos para a consola. Aqui vamos nós. É claro, como pegamos todo esse zoom em um pouco para que você possa ver, como eu mencionei, há poucas maneiras Vamos começar a brincar com ele. Digamos apenas que o formulário de lead é igual a document.getElementById. E o que chamamos de item de busca. Vamos ver se isso funciona e vamos sair do console deste formulário. Então, sim, temos o formulário de que abrimos. Precisamos da entrada diretamente. Então talvez o que precisamos para fazer o acesso venoso ao formulário. E, em seguida, é claro, podemos fazer um seletor de consulta. E o seletor de consulta é, podemos obter a entrada. Isso funcionaria? E lá vamos nós. Então essa é uma forma de obtermos o formulário. Posso mencionar as muitas outras maneiras se formos para o nosso código ou realmente não temos que ir para o nosso código. Podemos pegar esse inspetor de elementos e olhar para esses formulários. Não nos demos uma identificação. Então, o que poderíamos fazer em nosso código como poderíamos entrar aqui, podemos dar a este um ID do item de pesquisa. Salve que podemos voltar para o nosso navegador, limpar o console. E vamos definir agora formulário é igual a documento, obter elemento por ID. E a identificação que demos era o item de busca. Para que pudessem ser de outra forma. Nós adoramos isso. E nós pegamos o barramento de entrada. São muitas maneiras de esfolar um gato, certo? Vamos refrescar isso. Vamos limpar o console. Vamos para o nosso código e vamos nos livrar desta identificação. Só quero te mostrar outra maneira. E vamos usar o sway um código de operação. O que vamos fazer é definir uma variável chamada forma. E lembre-se que havia a propriedade do formulário em nosso documento. E podemos usar isso para acessar formulários. Então, se acessarmos nosso documento e acessarmos essa propriedade chamada formulários, o que isso nos dá? Vamos nos dar todos os formulários em toda a nossa página, certo? E só temos dois. Nós temos o formulário átomos de busca e nós também temos este formulário forma regular o usuário pode decidir o que eles querem adicionar à lista. Então nós queremos lidar com este primeiro feio formado. Então, uma maneira de sair do formulário seria acessar nossos formulários, HTMLCollection. E, novamente, há algumas maneiras de fazê-lo. Podemos acessar o primeiro item na matriz, todo o formulário com um ID de item de pesquisa. É outra forma de o fazer. E então podemos, naturalmente, acessar nosso seletor de consulta. E queremos obter a caixa de entrada. E passamos o mouse sobre isso e chegamos ao que queremos por ponto através de tudo isso é apenas para dar a você uma sensação intuitiva de quantas maneiras diferentes existem para fazer algo como desenvolvedor. Então depende apenas do seu estilo e com o que você se sente mais confortável. Ok, isso foi tudo fora do caminho? Vamos começar. O primeiro passo é que temos que pegar essa caixa de entrada não semana porque precisamos pegar que leva o usuário digitando lá. Então vamos começar a codificar agora. Vamos para o arquivo do aplicativo. A última coisa que fizemos foi esconder itens e vamos copiar isso. E agora queremos procurar itens. E como mencionei, a primeira coisa que quero que façamos é pegar a caixa de entrada de pesquisa. Então vamos definir uma constante agora porque isso nunca vai mudar, nós estamos sempre indo para apenas referências uma caixa de entrada de pesquisa. Vamos chamar de busca. E nós sabemos, a propósito, pouco antes de eu continuar a razão de eu colocar maiúsculas, eles apenas convencem quando você está definindo uma variável constante, que sempre que mudar, em outras palavras, para colocá-lo em maiúsculas. Então, quando o vemos em nosso código mais tarde, sabemos que é uma constante. Então vamos pegar essa caixa. A primeira coisa que podemos fazer é acessar nosso documento e, em seguida, acessar a propriedade desse formulário. E como acabamos de ver no console, sabemos que chamamos de itens de busca. Esse era o ID do nosso HTML completo. E olhamos para essa forma. Sabemos que tem um ID do item de pesquisa. É exatamente por isso que estou fazendo isso. Sim, não é item a item. Então, felizmente eu verifiquei, em seguida, o nosso pescoço que queremos, claro x é a nossa consulta selecionar API. E queremos a entrada. Tudo bem, tudo também. Em bom, Temos a nossa entrada. Qual é o próximo passo? Bem, toda vez que o usuário pressiona a tecla e levanta essa tecla, queremos ouvir esse evento chave. Vamos tentar. Não é um evento de clique. Sim, o usuário não está enviando nada que use apenas literalmente digitando texto. Então o que queremos fazer agora é adicionar ouvinte de eventos. Então pegamos nossa constante e acessamos o método add event listener. E aqui queremos ouvir a chave e a lista. Basta definir nossa mão diretamente aqui e queremos acessar este objeto de evento. Como você verá, isso basta usar sintaxe de erro e nossa carne do código vai dentro dessas chaves. Nada de novo. Você já sabe quem é. E só para ter certeza que o evento keyup está funcionando, vamos apenas fazer o log do console. Funciona para a tela. Então vamos para o nosso console, ou desculpe, vamos para o nosso navegador. Vamos para a consola. E vamos entrar aqui. E agora, quando eu pressionar uma tecla, chamá-lo de barra de espaço, nós pioramos. - Sim. Então sabemos que registramos um evento válido dentro de nossa caixa de entrada, e eu vou procurar caixa de entrada. E toda vez que o usuário clica no Aquino, nós possuímos literalmente verdadeiro durante esse evento e esse manipulador está sendo executado. Ufo, adoro estas coisas, tão fixe. Ok, então vamos voltar ao nosso código e vamos nos livrar deste console. Qual é o próximo passo agora? Será que o próximo passo é que queremos pegar a entrada real toma a si mesmo. Não temos? Apenas diga, sim, vamos pegar o texto do usuário. E como fazemos isso? Bem, é muito fácil e para provar isso para você, vamos definir uma variável chamada texto. E podemos acessar nosso objeto de evento, esse objeto de evento keyup. Podemos então acessar o alvo sendo retinas chave naturais, e queremos obter seu valor. E se nós apenas consolarmos texto de log, nós devemos vê-lo. Navegador Tom. Vamos descer o console. console e a senhorita ensinaram a letra A. Então, o que eu vou fazer, temos o registro do console de crianças na tela, B, C, D. Isso é legal, certo? E você pode começar a ver como podemos acessar as apostas e novidades. Agora precisamos começar a comparar isso com o que está em nossa lista de itens para comprar. Mas isso é algo aqui. Eu quero te mostrar. Se escrevermos um D maiúsculo e um OG. É sensível a maiúsculas e minúsculas, não é? Na verdade, estamos recebendo um capital. Então, se você olhar em nossas tentativas de comprar listas na página agora e olharmos para o leite, nós vemos como um M maiúsculo. Então, se o usuário digitar uma milha, ok. Deixe-me fazer isso de novo. Para o espaço. Se o uso do tempo fumar sem um M maiúsculo, não vai ser exatamente igual aos envelopes de capital em tudo. Se o usuário digitar Koch, ele não vai coincidir exatamente com a coca abaixo que todas as minúsculas. Como lidamos com esse problema? Bem, na verdade é mais simples do que você imagina. Bem, temos que fazer é ter certeza de que seja o que for preciso os tipos de usuário, queremos convertê-lo em minúsculas. Queremos que a busca seja insensível a maiúsculas e minúsculas. Não importa onde os tipos de usuário de maiúsculas ou minúsculas. Ele ainda deve olhar para a própria palavra justa em si. Então, como é que fazemos isso? Bem, é muito simples. Vamos nos livrar desse console. Vou comentar. Vamos apenas dizer que vamos pegar tomadas do usuário e convertê-lo minúsculas usando JavaScripts para método minúsculo. E é muito simples de usar. Nós agarrar que leva o usuário digitado e nativamente para nós diretamente fora da caixa é o método de dois minúsculas fornecido a nós por JavaScript. E se consolarmos listas de registros mais uma vez, desculpe, sei que estamos indo devagar, mas é tão importante que entenda isso. Vamos em frente, console Kayla. E está na hora das capitais da MLK. Mas você pode ver que nós convertemos todos os caracteres em minúsculas. Isso é incrível. Estarei me divertindo aprendendo uma tonelada. Eu quero parar aqui e eu quero que nós falemos sobre este método ToLowerCase em um pouco mais de detalhes. Sei que a maioria dos palestrantes vai continuar agora, mas quero que entenda exatamente como ele funciona e como nosso código funciona, porque só vai te ajudar a se tornar um programa incrível. E então eu só quero que nós para pausar agora e uma unicidade para discutir em um pouco mais detalhadamente o que este método para minúsculas faz e como ele funciona. Vejo você agora. 17. Introdução ao lowerCase: Crew, acho que o que fiz esta manhã desde a nossa primeira vez, fiz uma sessão de ioga e estou despedaçado dentro coisa chamada “Pássaro do Paraíso”. Fogos explodiram minha mente. De qualquer forma, estou com muita dor agora. Mas isso não deve nos impedir de aprender sobre JavaScript. E, muito especificamente, quero que aprendamos sobre esse método chamado para minúsculas. Parece simples, mas eu só quero que você entenda exatamente como ele funciona porque é um método muito, muito útil fornecido a nós diretamente fora da caixa pelo JavaScript. Agora, embora não precise de argumentos, é um método super prático. Por quê? Bem, em muitos casos, você quer que seu texto ou você quer que suas strings sejam insensíveis a maiúsculas e minúsculas. Também conhecido como, você não quer maiúsculas para uma farsa, seja lá o que for que você está fazendo. Por exemplo, se você tiver uma lista e um usuário digitar em uma determinada palavra, às vezes você deseja ver ou comparar se essa palavra está na lista e você não quer que maiúsculas arruínem suas fórmulas. Nesse caso, por que não converter tudo em minúsculas? E para fazer isso é usar as duas minúsculas emitidas. Então, sem mais delongas, vamos saltar para o cookie de apresentação e ele ainda fala sobre o método de dois minúsculos, desfrutando. Então, o que exatamente é esse método ToLowerCase? Muito simplisticamente tudo o que faz e é bastante intuitivo que converte o seu gosto em minúsculas. Em outras palavras, o método toLowerCase retorna a string de chamada, a string que você chamou. Ele converte esse valor strings tudo em minúsculas. E eu poderia parar. Sim, mas quero que saibas um pouco mais sobre este método ToLowerCase. Em primeiro lugar, é uma função JavaScript que nos é fornecida pela linguagem JavaScript. Procurar não requer nenhum argumento, mas não deixe que isso o engane. Ainda é um método muito poderoso. E o que eu realmente quero que você entenda, sim. E eu quero fazer uma pausa sobre este ponto. O método de duas minúsculas não altera a string original. Em vez disso, ele gera a nova string modificada com todas as letras minúsculas. Deixe-me pular até o console e mostrar o que quero dizer com isso. Ok, então sabemos que o método em minúsculas não afeta a string original. Eu só quero provar isso para você agora. Como é que eu vou fazer lá? Bem, vamos criar uma string e vamos chamá-la de sintomas originais. E é só dizer, nós fazemos isso igual a sapos loucos ou apenas, bem, você sabe, loucos. Como é que está? E então vamos criar uma nova frase. Então, a pontuação que a frase mais baixa. E sim, quero que acessemos nossa frase original. E isto é o que eu quero que façamos a seguir. Quero que acessemos o método de duas letras minúsculas. E o que é realmente incrível é que, porque temos uma string e esta frase original é corda esticada, temos automaticamente acesso a JavaScripts para método minúsculo. Como acessamos quando saímos com a notação de pontos? E, claro, podemos começar a digitar para minúsculas e nosso IDE já pega esse método. Então eu posso apenas clicar em Tab parênteses abertas e fechadas para executar esse método. E estamos acabados e espanados. Agora eu posso abrir um navegador e podemos conectar as coisas para a tela. Mas eu quero usar algo chamado cloaca. Se formos para a minha extinção, tíbia, e eu começar a digitar mais rápido. Podemos ver que instalei Aka no meu IDE. É muito, muito útil, tão altamente recomendado. E tudo o que precisamos fazer para executar fogão é literalmente chamar a caixa de busca aqui. Eu pressiono Control Shift P no meu teclado, e eu quero iniciar cloaca no arquivo atual. É apenas um plug-in extra e permite executar JavaScript em tempo real neste arquivo. Ele faz. Então aqui vamos nós e tudo o que eu quero fazer é anotar a frase original. E você pode ver que o azul leva dados. Isso é o que está sendo consolado, pernas, o que está sendo devolvido para nós pelo JavaScript eo Walker trabalhando, ele só nos permite ver como uma correção em tempo real para você muito útil. Agora, o que você acha que vai acontecer quando retornarmos a sentença mais baixa? Bem, eu tenho certeza que você provavelmente já nos adivinhou. Bem, vai acontecer é que temos exatamente a mesma coisa que tudo em minúsculas. Mas o que eu consegui provar para você é que a nossa frase original, frase original que escrevemos juntos é inalterada. Este método ToLowerCase não altera essa string original. Ok, fazer santos são observados. Vamos continuar. Está bem, fixe. Então nós vimos que ele não altera a string original. Na verdade, ele gera um novo. Mas neste momento, você ainda pode estar coçando sua cabeça. Você pode estar indo fresco e ruído fornecido pelo JavaScript. Mas nós exatamente isso vem de. E começar a fazer isso é rolo de tambor, por favor. Ele vem do objeto string em JavaScript. E lembre-se de que o objeto string é um objeto global para todas as strings. Mais uma vez, deixe-me saltar para o console em imagens mostrar-lhe onde podemos encontrá-lo. Vamos continuar exatamente de onde paramos. Lembre-se que escrevemos a frase, nós a convertemos em minúsculas. Agora eu só quero provar a você que tem que ser em uma corda. Então, uma maneira de fazer isso é usar o tipo de operador. Então esse é o registro do console. E vamos tipo de e queremos ver qual é o nosso tipo original. E podemos ver o que é retornado para nós pelo JavaScript é um tipo de string. Então, conhecemos os nossos sintomas. Variável original é uma string, e é por isso que poderíamos executar este método toLowerCase. Mas você provavelmente está se perguntando, maneira é este método exato de um howdy vê-lo? Bem, é muito, muito simples. Vamos abrir um navegador. Vou clicar com o botão direito do mouse no meu Chrome Mu Cognito. E vamos para o cookie do console. Vamos abrir o console. Me amplie para que você possa ver o que está acontecendo. E é muito simples tudo a fazer é que eu quero console e fazer, a propósito, é diferente para console log que nos dá o que queremos fazê-lo. Mas no formato JSON como, em um formato de árvore. E, claro, o que eu quero fazer é que eu quero obter objeto string JavaScript, porque lembre-se que sabemos que nossa frase original é uma string. Então sabemos que é do tipo string. E se abrirmos uma corda, e de novo, ele não está muito aqui. Temos ligações, temos nome. Mas o que queremos ver é este protótipo porque herda muitos métodos e propriedades. E porque é uma string, é um protótipo como uma string aqui, temos muitos métodos e propriedades do tipo string. E se rolarmos para baixo, devemos encontrar dois minúsculos. E aí está ele. Nós realmente o encontramos, você sabe, estabelecendo de onde ele vem. Espero que esteja fazendo sentido. Ainda não terminamos. Então vamos voltar para a palestra. Vimos que ele vem do objeto string e um caso alto, é bastante intuitivo que só funciona com strings. Se você tentar analisar em outros tipos de dados, como nulo indefinido, nós mesmo um número. O analisador JavaScript irá lançar um erro. Na verdade, você receberá um erro de tipo. Então, apenas certifique-se de pegar o tipo antes de analisá-lo nesta função. Caso contrário, seu aplicativo falhará. Do que é que estou a falar? Bem, deixe-me saltar para o console mais uma vez e leva pensamento codificando juntos só para ver isso em ação. Uma última coisa antes de terminarmos isto, lembras-te de dizermos que só pode ser usado num tipo de corda? Desculpe, vamos rolar para cima. Na verdade, acabamos de terminar. Vamos retomar exatamente onde paramos do console. Então, o que isso significa? Bem, isto significa que se tivermos um número, digamos apenas 85 e tentamos aceder a minúsculas. O que acha que vai acontecer? Bem, recebemos um erro de sintaxe, token inválido ou inesperado. Não podemos chamá-lo método ToLowerCase em um número. Faz sentido. Que tal uma espécie de matriz? Digamos que temos uma morena apenas com um item e se chamem Bu. E tentamos o acesso a minúsculas é econômico. Saiba que recebemos um erro de tipo. Não podemos chamar essa função nisso. E quanto ao indefinido? Bem, se tentarmos acessar novamente a minúscula no indefinido, novamente, não vai funcionar. E agora se tentarmos nulo? Acho que vai funcionar. Então este é o ponto que estou tentando fazer. Nós só podemos acessar o método ToLowerCase em strings. Espero que esteja se divertindo e tenha discutido muito. Então, este é apenas um pouco mais de detalhes sobre ToLowerCase método que você pode não ter conhecido anteriormente. Continue, fique motivado. E vejo-te na próxima palestra. 18. Acessando e looping em nossas tags: Muito bem, vamos voltar ao nosso projecto. Espero que esteja aprendendo muito. Já vimos esse método ToLowerCase. É incrível. Apodrece. E agora quero que continuemos com nossa busca. Box é uma espécie de comparar o usuário leva que o seu direito de permitir que itens para comprar. E nós filtrar para apenas as coisas que o usuário digitou nesta caixa de seleção será esta caixa de entrada, Desculpe, então estamos maneira no momento. Lembre-se que temos esta caixa de entrada aqui com itens de pesquisa. Conseguimos encontrá-lo usando os identificadores, os métodos de acesso DOM. E o que também fizemos como sabemos nesta caixa de entrada é uma propriedade útil chamada valor, que nos permite extrair o que o usuário digitou nessa caixa de entrada de texto. Chamado porque é uma corda, porque é uma tomada. Sabemos que podemos usar JavaScript para método em minúsculas para converter o que o usuário digitou tudo para minúsculas. É exatamente onde estamos até agora. Então eu acho que o próximo passo é, vamos pular para o código e vamos continuar. Então, vamos? Nós literalmente pegamos que usa valor. Lembre-se do alvo veia, que é a caixa de entrada que como uma propriedade útil chamada valor. Extraímos o valor do usuário, que é uma string, é um gosto. E, em seguida, por causa disso, acessamos JavaScripts para métodos minúsculos são agora sabemos que estamos recebendo o que o usuário digitou em minúsculas. Legal, Vamos excluir o console. Qual é o próximo passo? Vamos agora o que eu quero que façamos é pegar todas as etiquetas LI. Porque o que nós vamos ter que fazer é que nós vamos ter que comparar o que o usuário digitou para cada item na lista. É pegar cada etiqueta LI. Então o primeiro passo é eu querer encontrar a nossa lista de compras. E é claro que já fizemos isso muitas vezes antes. Podemos usar QuerySelector aqui. Muitas maneiras de esfolar o gato quando se trata de programação. E o que eu quero pegar? Será que eu quero pegar nossa lista de compras ID, e eu quero pegar todos os elementos UL. Então, para a página de índice Godot aqui, apenas para mostrar o que estamos fazendo. Nós rolando para baixo para a seção três podre. Podemos ver que alugamos tudo dentro deste div com uma identificação da lista de compras. Eu quero pegar esta tag UL porque este elemento UL contém todos os aliados abaixo dela. É tudo o que fizemos aqui. Então temos essa lista de compras. E agora eu quero pegar cada lista, elemento e pescoço que podemos dizer é compras acesas porque sabemos que vai ser plural é mais de uma etiqueta LI. E sabemos que essa vai ser a lista de compras. E, em seguida, podemos acessar os elementos get pelo método tag name. Novamente, isso é fornecido a nós pela API DOM. Não é do JavaScript. Lá vamos nós. Agora temos todas as nossas etiquetas LI. Até agora, tudo bem. Mas você concordaria comigo agora, nós temos todas as etiquetas LI. Precisamos de uma forma de percorrer tudo isso e competir. Eles provam o que o usuário digitou. E se você se lembrar da parte 1 da série que getElementsByTagName retorna para nós uma HTMLCollection. E este HTMLCollection, embora pareça uma matriz e selos como uma matriz, não é bem uma matriz. E como não é bem uma matriz, não temos muitos métodos de matriz. E um dos métodos que eu quero usar neste exercício específico é o completo de cada método. fim de usar o método ForEach, precisamos de uma maneira de converter o HTMLCollection em uma matriz. Zach meio que está fazendo costuras. Porque se pudermos fazer isso, podemos usar esse método forEach. Como é que fazemos isso? Bem, uma maneira é acessar o que é conhecido como o método array from. Então, se definirmos isso, basta dizer aqui, para converter. Bem, vamos apenas dizer, vamos converter os mantimentos em um array para que possamos acessar o método completo de cada. Uma maneira de fazê-lo é definir uma nova variável. Agora em JavaScript é defini-lo como mercearia, matriz de mantimentos. E tudo o que precisamos para fazer este eixo matriz JavaScript. E a matriz, temos muitas propriedades e métodos. Um deles foi chamado de. E eu quero criar uma matriz a partir do objeto de compras ou da variável de compras que acabamos de criar. Isto é muito para absorver e antes de seguir em frente, quero parar de novo. Eu quero explicar para você o que esta matriz de método é tudo sobre. Nós colocamos em um argumento aqui, mas é preciso mais. Então vamos fazer uma pausa. Vamos fazer uma pausa. Vamos entrar em outra palestra. E eu só quero que olhemos rapidamente para este array do método com mais detalhes. Espero que esteja se divertindo, espero que fique vazio. Cena para cima. 19. Introdução ao Array.from(): Espero que esteja se divertindo muito neste curso. Tanto quanto eu sou. Adoro juntar essas coisas e saí ensinando o que aprendi ao longo de muitos, muitos anos. De qualquer forma, a próxima coisa que eu queria que nós discutissemos muito brevemente é outra cama muito útil, uma função pouco avançada em JavaScript chamado array de. E o que esse método faz? O que o nível muito, muito, muito básico, tudo o que ele faz é criar um array, mas não de um array, porque eles seriam inúteis. Ele cria uma matriz de dois tipos de coisas diferentes. Cria uma matriz a partir de um objeto semelhante à matriz. E tudo o que quero dizer por conjunto de dados, é um objeto que tem uma propriedade length. E dois, você pode criar uma matriz a partir de um objeto iterável, coisas como estado mental. De qualquer forma, isto é mais importante agora. A coisa importante a entender é que a matriz de método leva algo e ele se converte em uma matriz. E por que queremos fazer isso? Bem, se pudermos criá-lo em algo que é como uma matriz, podemos ter certos métodos e propriedades disponíveis para nós que podemos usar naquele objeto recém-criado, uma matriz inteira criada por energia de estado. Então, digamos que faz sentido. Não se preocupe se não é a primeira coisa que eu quero que você entenda o que o array from método é, que ele está na matriz em si. O que eu quero dizer com isso, deixe-me saltar para o console e rapidamente mostrar-lhe. Tenho o meu console aberto. Sim, e a única coisa que quero mostrar é como encontrar isto da MTD. E como eu mencionei, ele está no objeto array dentro do próprio JavaScript. Como posso provar que dois vão primeiro, vamos apenas consola fora do array. E se fizermos isso, sim, a matriz fornecida a nós pelo JavaScript. Nós abrimos isso. Nós rolamos para baixo e lá está. O, é o de torna muito simples, certo? Então lá vamos nós. Sabemos que a matriz do método como encontrado no objeto matriz do JavaScript meio que faz sentido, certo? Mas ainda não terminamos. Deixe-me saltar para a palestra e vamos falar sobre esse método com um pouco mais de detalhes. 20. Como funciona o Array.from(): Então, o que exatamente é o sub-array do método tudo sobre? Nós vamos muito intuitivamente ferir basicamente, tudo o que ele faz é que ele cria uma matriz de um objeto semelhante a array, próprio objeto iterável. Mas eu estou olhando para entrar nisso agora. Da mesma forma, assim como o método ToLowerCase, o array from método é uma função JavaScript pura. Na verdade, ele foi introduzido como parte do ES6. Es6, a propósito, foi apenas uma grande revisão e atualização para t0 é cinco e você provavelmente não coçar a cabeça, mas você já pode ter esquecido de onde ele vem. E acabamos de ver que vem do próprio objeto de matriz. Mas estas são todas coisas que você já sabe. Então, como funciona? Bem, é muito fácil acessar esse método. Começamos acessando o objeto matriz do JavaScript dentro de xi's, o método from. E o método front leva um argumento e seu argumento é um objeto de matriz. Mas antes de falarmos mais sobre o que ele faz, eles chegam ao editor de codificação e levam a ver como ele funciona em ação. Antes de começarmos a entrar em mais detalhes sobre a matriz do método, eu só quero que você entenda como ele funciona. Então lembre-se do que eu disse. Ele tem que ser um objeto de matriz em objeto iterável, a fim de que possamos usar esta matriz a partir do método. Então, como funciona? Bem, vamos definir um objeto tipo array. E vamos ser muito, muito simples aqui. Vamos apenas dizer qual é o caso. Então sabemos que é uma corda neste caso. Como a matriz de se parece? Bem, em primeiro lugar, eu só quero dizer para cima, para cima, co-ocorrer. Abra. Kauket só nos permite executar JavaScript em tempo real dentro do nosso editor de texto. Então não temos que continuar pulando para o navegador apenas muito mais rápido para tipo de subir seu código. É muito útil. De qualquer forma. Como é que funciona? Bem, vamos console registrar algo e vamos acessar o objeto de matriz JavaScript no nome. Sabemos que há um método chamado de. E nós queremos passar em nossa matriz como e como você pode ver, ele leva nosso objeto tipo array valem a pena e ele converte em uma matriz, que é realmente, realmente incrível. E vocês podem ver aqui, nossa matriz consiste apenas de cada litro em raio-x. E está, bem, está feito. A parte de cima volta para a palestra. Legal é que estão fazendo cenas. Nós olhamos para um exemplo muito simples, mas apenas tenha em mente que o que esse objeto tipo de matriz significa? Isso só significa que o objeto precisa ter uma propriedade length e elementos indexados. O que eu quero dizer com isso? Bem, vamos saltar para o console novamente neste só olhar exatamente o que eu estou falando. Cloreto. Então nós olhamos para este exemplo aqui, mas como e por que ele funciona? Lembre-se, a matriz do método não vai funcionar em tudo como a descrição meio temporada, como já falamos, que só funciona em matriz como objetos. E o que isso significa é que o objeto precisa ter uma propriedade length e elementos de índice D4. O que eu quero dizer? Bem, tem um console. Então deixe-me clicar com o botão direito do mouse no Google Chrome aqui, novo modo de navegação anônima. E nós vamos para um console e tipo de fazer cenas. Consegues ver o X? E lembrem-se do que dizemos, vamos definir um cão como objeto de arrasto como lobo. E sabemos que a matriz do método funciona em nós. Acabamos de ver um exemplo disso. Mas por quê? Bem, para mostrar a vocês, vamos fazer o console fora deste objeto array e eu quero olhar para o próton dele. E se carregarmos isso, sabemos que é do tipo string. E se abrirmos o método string, o que é incrível é que temos essa propriedade link. Isso é o que eu quero dizer com um ID de objeto semelhante a matriz tem que ter isso vinculado corretamente para que a matriz do método funcione. Então lá vai você. Hope está fazendo cenas. Vamos voltar para a palestra ou estranho. Espero que esteja começando a fazer mais sentido para você. E lembre-se do que eu disse antes que é preciso mais de um argumento. Na verdade, pode levar até três argumentos, pode pegar um mapa, e pode levar o que você quer que isso se refira. Tenha em mente que esses argumentos são opcionais. Nós não temos que colocá-los nesta função em tudo. E muitas pessoas realmente combinam o, este argumento opcional na função do mapa em si. Então muitas vezes você vai ver apenas dois argumentos na matriz do método. De qualquer forma, eu não quero entrar em muitos detalhes sobre isso. Posso mostrar-lhe rapidamente o que é o mapa. Então, no topo para o editor de texto novamente. E vamos dar uma olhada em como isso funcionaria. Por último, mas não menos importante, vamos ver como o segundo argumento para a matriz da função funciona. Sobre o que é tudo isso? Bem, vamos apagar tudo o que tínhamos na tela anteriormente. E isso define uma matriz é apenas dizer que a nossa matriz tem um cão e você adivinhou. Um gato. Auto-estrada, simples. Agora o que eu quero fazer é definir uma função manipuladora. Eu quero levar tudo dentro desta matriz e eu quero fazer logout para a tela. Então, isso é usado palavra-chave função JavaScript. Vamos chamá-lo de manipulador. Podemos chamar-lhe o que quisermos. A mão vai levar um animal em cada caso. E tudo o que eu quero fazer é que eu só quero retornar declaração e eu vou estar usando literais modelo aqui. E o que eu vou dizer é que eu vou dizer que eu vou dizer um animal disposto a andar, andando para que ele vá. Isso não é nada muito profundo. É uma função muito, muito simples. Agora o que eu quero fazer? Bem, vamos fazer o registro do console. Vamos acessar a matriz a partir do método. Sabemos que queremos acessar esse tipo de array. Uma mão, como pode ver aqui. Se nós apenas mantê-lo com um argumento, literalmente não faz sentido para nós fazê-lo porque ele já é um array. Portanto, não há nenhum ponto de criar uma matriz a partir de uma matriz. Mas é o segundo argumento desse mapa que quero que entendamos. E o segundo argumento é o que definimos como a mão a função. E depois vamos para o que nos devolveu. Na tela é um cão andando e conta ao caminhar. Este é um novo array. Agora, ele criou um novo array e é tomado, cada item na matriz original, custa através de nossa função de mapa, e ele nos devolveu uma nova matriz. Porque eles meio que fazem sentido. E é disso que se trata. Espero que esteja se divertindo. E eu acho que agora você tem uma boa sensação intuitiva de como isso funciona. Tão bem feito. Estou muito, muito impressionado. Lá vamos nós. Espero que esteja começando a fazer um pouco mais de cenas. E não se preocupe, à medida que você se deparar com eles em sua carreira de codificação, você começará a usá-lo cada vez mais e isso se tornará muito mais intuitivo. Eu só queria que você soubesse sobre a matriz do método porque é um um pode ser extremamente útil, que me traz para o próximo tópico. E é por isso que você precisa saber sobre a matriz do método. Por que eu sequer discuti isso neste curso? Nós vamos, às vezes queremos trabalhar com métodos que só estão disponíveis a partir do objeto matriz. Por exemplo, o para cada método só está disponível no objeto de matriz. E para acessar esse método, às vezes temos que converter o que estamos trabalhando dentro do nosso código em uma matriz. Isso faz sentido? E acima disso, o array from método é extremamente útil. Ele permite que você faça muitas outras coisas, como clonagem de arrays, remoção de duplicatas, até mesmo preenchimento de um array , etc, etc. Há muitas coisas que você pode fazer. E, com certeza, você vai usar menos ao trabalhar com coleções DOM. E isso me traz de volta a isso primeiro, às vezes queremos usar métodos que só estão disponíveis no objeto array. Então, quando você está trabalhando com a coleção DOM, por exemplo, e HTMLCollection, às vezes precisamos converter isso em um objeto de matriz para acessar os métodos que queremos. Então eu acho que o que eu estou tentando dizer é que ele é útil quando você encontra e trabalha com objetos semelhantes a matrizes. Ele está fornecendo um pouco mais de clareza sobre o que este método faz. Mas não se preocupe, só estamos entrando nisso. Então não entre em pânico se você não entender completamente. Uh, th, ele virá através do tempo. Espero que você tenha gostado deste legal até agora Huike, ficando motivado e eu vou vê-lo na próxima palestra. 21. Usando o forEach para fazer o loop através de nossa matriz: Certo, então foi exatamente aqui que paramos. Criamos nossa matriz de compras usando JavaScripts matriz a partir do método. O que queremos fazer a seguir? Bem, nós queremos fazer loop através deste array, mas lembre-se se formos para o nosso arquivo de índice aqui, nós literalmente temos cada elemento LI como um item em uma matriz e então você entra em item de dívida e, claro, ele tem que abranger. Então este basta olhar para o primeiro item em nossa matriz. Vai ser este elemento LI. E o que queremos? Bem, nós queremos a criança do primeiro elemento, certo? Nós só queremos trabalhar com este item, esta palavra MOOC aqui. Cenas e mulheres, Parte 1 deste curso, discutimos vários métodos de passagem. Discutimos primeiro filho, primeiro elemento filho, lembra de todas essas coisas? Sim, queremos ter certeza que é um elemento. Nós não queremos ser devolvidos para tomar neve, por exemplo. Então, queremos fazer um loop através de cada item na matriz. Mas lembre-se, em cada caso, fomos pegar qualquer item que seja. Queremos pegar a criança do primeiro elemento. E queremos que isso leva conteúdo porque queremos pegar apenas aqueles vãos que têm o texto real que queremos comparar. E novamente, vamos ter que converter todos esses itens de gosto em minúsculas porque fomos competir maçãs com maçãs. Vamos voltar ao nosso aplicativo. E vamos começar a codificar isso. Por onde começamos? Bem, vamos apenas fazer um comentário Sim, e percorrer cada item do supermercado. É isso que queremos fazer. Então, como é que fazemos isto? Como fazemos loop através de cada item de supermercado será em primeiro lugar, precisamos pegar a nossa matriz. E agora é onde a magia acontece. Podemos acessar isso para cada método. E a razão pela qual podemos acessá-lo é porque usamos esta matriz a partir do método. Nós convertemos nossos mantimentos em uma matriz, digamos fazer santos. E se você não sabe bem como o método FoReach funciona, por favor, confira o curso completo de grande mestre do meu JavaScript. Obrigado. Talvez saiba como funciona. Não é muito intuitivo. Tudo o que ele faz é percorrer cada item na matriz. E nos dá esse item como uma variável. E podemos chamar-lhe o que quisermos. Vamos esfriar o nosso item de mercearia. Se formos para o arquivo de índice, permanecer ruim quando usamos o completo cada método, ele vai nos jogar de volta cada tag LI. Acabamos de chamar isso de mercearia. Foi tudo o que fizemos. E eu vou apenas usar a nova sintaxe de seta. E este é realmente o coração do nosso código vai pertencer. A primeira coisa que quero fazer é lembrar que temos aquela Ally. Eu queria pegar a criança do primeiro elemento. Então vamos definir uma nova variável. Vamos chamá-lo de um nome superficial porque isto é o que queremos passar. E sabemos que esse vai ser o supermercado que o elemento LI. Mas agora queremos a criança do primeiro elemento, não é? E, em seguida, nesse filho, queremos acessar sua propriedade de conteúdo de texto. Quão incrível é isso? Legal? Espero que esteja fazendo sentido. Isso é realmente parar. Sim, isso é o console registrar isso na tela só para que possamos nos inscrever corretamente. E é saltar para o nosso navegador. Vamos para a consola. Vamos fazer isso um pouco maior. Esclera isso. Vamos entrar no nosso item de pesquisa e digitar um “A” maiúsculo. É literalmente pesquisado em todos os nossos itens, leite, açúcar e especiarias, algo para beber, e pizza. Posso rasgá-lo de novo. Você pode falar agora, pequeno A, e é feito exatamente a mesma coisa. Quão incrível é isso? - Homem? Estou me divertindo muito. Vamos voltar ao nosso código aqui. Então, sabemos que fizemos um loop através de todos os nossos itens e estamos recebendo seu conteúdo de texto. O próximo passo é lembrar, não queremos capitais. Se temos nosso navegador aqui, temos loja de capital. Então, se o usuário digitar molde, mas com pequenos objetivos, Ele não vai combinar este MOOC com um capital. Então, como lidamos com isso? Bem, você já sabe disso. Sabemos que cada nome de mercearia é do tipo string. E por causa disso, podemos acessar JavaScripts para método em minúsculas. Então o que queremos fazer agora é converter todo o nosso texto em minúsculas. Então fazemos isso acessando nosso nome de mercearia, vamos realmente criar uma nova variável. Vamos chamar-lhe o nome da mercearia. E esse é o nosso nome de mercearia. E podemos sair JavaScripts para minúsculas que fizemos como eu faço cenas. Então estamos pegando o nome. Qual é o próximo passo? Bem, o próximo passo é nós queremos comparar se o usuário me leva apenas voltar ainda para ver, você sabe o que eu quero dizer? Fomos competir. Vamos apagar a consola e deixar-me escrever. O que queremos que você faça é que queremos comparar se o usuário digitar MOOC. Queremos pesquisar todos os itens de fitas abaixo. Queremos ver se a MLK está abaixo. E se for, queremos que ele apareça. E se não for, queremos que tudo o resto desapareça. É isso que queremos fazer. Então precisamos de uma maneira de comparar. Ei, nós olhamos para a cadeia MLK é de qualquer maneira nesses nomes abaixo. E como fazemos isso? Bem, eu quero usar outro método em JavaScript chamado index off. Deixe-me fazer um comentário aqui agora eu posso dizer agora que podemos usar index off para ver se o nosso texto pode ser encontrado dentro do nosso nome mercearia. Se nada for encontrado, um valor negativo é retornado. E podemos esconder-nos. O item. É meio que fazer cenas. Sei que pode parecer esmagador. Nós realmente passamos por muita coisa neste exercício. Quero dizer, nós falamos sobre o array from método, o método de dois minúsculos, e agora há outro chamado índice de. Mas confie em mim, isso vai te ajudar muito em seu comprimento de onda Coréia. Então vamos pular para uma nova palestra antes de eu seguir em frente. E eu quero que você entenda o índice do método e como ele funciona. Vejo-te o suficiente. 22. Introdução ao indexOf(): Outra função muito incrível em JavaScript é conhecido como o índice de função. E o que é que ele faz? Bem, no nível muito básico que diz se um dado item pode ser encontrado em uma matriz ou uma string. O índice de mxnet foi adicionado ao padrão de 260 segundos na quinta edição. O que isso significa é que acabou de ser adicionado em 3 de dezembro de 2009. Então o que estou tentando dizer é que você não precisa se preocupar com navegadores e não incorporar esse método. Cada navegador hoje permitirá que você use o índice de método. Ótimo cliente, navegadores antigos podem aceitar um cachorro. O que parece quando começamos a usá-lo? Bem, em primeiro lugar, você chama o índice de método digitando suas palavras, é índice de palavras-chave off. Um reitor aceita dois argumentos. O primeiro argumento é o item de pesquisa e também conhecido como o item que você deseja procurar. E o segundo argumento é opcional. É o ponto de partida do seu botão de busca Mais oito, vamos ver exemplos disso em breve. Então o ego, isso é o que parece, um nível alto. E como eu mencionei, nós vamos estar olhando para exemplos. Mas antes disso, isso é algo muito importante que você precisa entender. E esse é o método indexOf só existe para dois tipos filhas em JavaScript. O primeiro top filha que existe em apagar. O que é um array? Em JavaScript e matriz como apenas uma única variável que é usada para armazenar elementos diferentes. E tenha em mente, a matriz JavaScript é um objeto global, que significa que você pode tipo de acessá-lo de qualquer maneira que quiser. Mas o suficiente conversa realmente quero saltar para o nosso editor de texto e eu quero começar a codificar um aumento com você. E eu quero começar a olhar para este índice de método, especificamente em arrays. Vamos saltar para a consola e ainda está a brincar. 23. Usando o indexOf() com matrizes: Certo, então aqui estamos. E quero que comecemos a codificar juntos, mas quero que façamos passo a passo, lentamente, pegamos um macaco. A primeira coisa que mencionamos é que este índice de existe em tipos filhas em JavaScript. E o topo de primeira ordem que estamos olhando é o array. Então deixe-me provar para você antes de ir mais longe em nossa codificação, eu fui para o registro do console. Tudo É apenas console fazer o objeto matriz. Se abrirmos isso e olharmos para seu protótipo, há um índice de método. Lá vamos nós. Você pode nos ver? Então agora eu acabei de provar a vocês que ele existe na matriz, esse objeto array global em JavaScript. É daí que vem. Muito bem, agora vamos ao nosso editor de codificação. Eu só tenho um arquivo app.js em branco aberto aqui. E eu estou correndo caucus. Caucus, muito útil, a propósito. Muito útil. Continuo dizendo isso, mas é muito bom. Ok, a primeira coisa que eu quero chegar até você é um como um array. Bem, em primeiro lugar, vamos criar uma matriz. E usamos isso pelos colchetes aqui. E eu só quero dizer, eu sou o primeiro elemento. Eu sou o segundo elemento. E você adivinhou, eu sou o terceiro elemento, C. Aqui vamos nós, criamos uma matriz. Usamos esses colchetes. E como acessamos arrays? Vamos primeira coisa que eu quero mencionar é que matrizes JavaScript ou Sarah. O que eu quero dizer com isso? Eu só quero dizer que o primeiro elemento de uma matriz é sempre indexado em Sarah. E o último elemento sempre pode ser encontrado no índice que é igual ao valor da propriedade length da matriz menos 1. Deixa-me mostrar-te o que quero dizer. Então vamos registrar nosso array no console. E lembre-se como eu disse que é 0 indexado x é o primeiro item na matriz. Nós digitamos 0. Sou o primeiro elemento. E claro que podemos fazer isso para os próximos itens, certo? Podemos ir 012 no primeiro, no segundo e no terceiro elemento. Isso faz sentido. E a outra coisa que eu quero mencionar é que cada array tem uma propriedade length. Então, se nós consola logout nossa matriz e acessamos esta propriedade chamada links, sabemos que nossa matriz tem três itens. Então, uma dica muito útil quando se trata de codificação. E eu vou até entrar aqui, podemos sempre x é o último item em uma matriz como esta. E isso é muito, muito útil. Então, por favor, lembre-se disso. Antes de digitar a solução, pense no que acabamos de fazer. Sabemos que o comprimento da matriz é três. E se você olhar para o log do console logo acima, sabemos que acessamos o último item I usando array e o índice dois. Porque lembre-se, matrizes JavaScript são sempre indexados em 0. Então sabemos que o último item na matriz é que o comprimento da matriz, que é 3 menos 1, o que nos leva a dois. Então, tudo o que estou tentando dizer é para acessar o último item na matriz, tudo o que temos que fazer é acessar nossa matriz. E agora, se você não sabe qual é o link, é muito útil acessar a propriedade link, que neste caso é indefinida porque não há quarto item na matriz. Então você sempre menos1. Faz sentido? Espero que sim. E os herbicidas têm uma sensação mais intuitiva sobre como as matrizes funcionam. Outra coisa que quero mencionar, vamos deletar esse homem, odiar apagar coisas às vezes. Passamos tanto tempo para tentar me dar pontos através e eu apenas deletei é um pouco triste, homem até o cloreto. Mas de qualquer maneira, vamos criar um novo array, 1, 2 e 3. A outra coisa que eu quero apenas mencionar com arrays que são bastante peculiares é que você não pode usar a notação de pontos para acessar itens. Este é um ponto importante. Então, por exemplo, se nós conectarmos nosso array e tentarmos obter o primeiro item, ele não vai nos deixar fazer isso. Na verdade, recebemos um erro de sintaxe. Então tenha isso em mente. E não é, você sabe, há nada de especial nisso. Na verdade, as propriedades JavaScript que começam com um dígito nunca podem ser referenciadas com documentação sempre existiam no uso da notação de colchetes. A nuance de JavaScript, Não se preocupe, ok, mas você provavelmente está se perguntando cliente, Eu não quero aprender sobre matrizes. Estamos sobre o tema do índice de n. Você está 100 por cento correto. Eu só queria que você se familiarizasse com matrizes antes de entrarmos nela. Ok? O ponto que eu quero fazer com quedas de índice é que ele retorna o primeiro índice em que um determinado elemento pode ser encontrado na matriz. Se ele não existir na matriz, um negativo é retornado. O que eu quero dizer? Bem, vamos definir uma matriz chamada animais. E tem um javali que tem uma girafa. E diz que tem um búfalo. E diz que tem uma linha. Como funciona? Bem, vamos olhar. Vamos registrar o console para que possamos realmente ver o resultado do que produzimos. A primeira coisa para acessar nosso índice de é acessar um array. E a matriz que entramos em acesso é a nossa matriz de animais. Queremos agora acessar o índice de método que está embutido em todas as matrizes. E vamos procurar por conversa. O que esperavas ver? Onde estão os javalis? Isso mesmo, está localizado no índice 0. Lembre-se matrizes JavaScript são sempre indexados na base Sarah. Então, se tentarmos encontrar javalis, podemos ver que voltou para nós é 0. Isso faz mais sentido. E eu vou apenas duplicar este código. Vamos procurar por Buffalo. O que você acha que os números de índice que serão? Vamos levantar-nos. Esperaria o número dois. Vamos ver se isso está certo. Agora o que eu quero fazer é, vamos procurar um cão. O que acha que vai acontecer com os cães? Bem, como eu mencionei, se não for encontrado, um negativo é devolvido para nós. Faz sentido? Então lembre-se, negativo significa que não foi encontrado. E a última coisa que eu quero mencionar pouco antes de seguirmos em frente é que o índice de método compara elementos em sua matriz usando igualdade estrita. Em outras palavras, usando o mesmo método usado pelo sinal de igual triplo. Apenas lembre-se disso. Legal. Ok, Clyde tinha isso tudo bem e bom, mas nós estamos usando apenas um argumento neste índice de matriz. Quero usar ambos e compreendo isso com mais detalhes. Bem, é bom ouvir meu colega estudante. Vamos apagar todos esses consoles. Vamos agora olhar para este animal devastado pela guerra, mas leva a dizer ao nosso índice de método que só queremos começar no segundo item em nossa matriz, um de índice um em diante. O que você acha que vai acontecer então? Então vamos para o nosso segundo argumento neste método. E digamos que queríamos começar a partir do segundo item na matriz. Bem, é claro que não existe porque sabemos que estamos olhando de girafa em diante e que não há água. Eles olham para outro exemplo que agora é olhar para Mozilla. E é dizer o nosso índice de método para pesquisar a partir de digamos, o terceiro item na matriz número dois. E neste caso, ele retorna nosso número de índice. Então é muito, muito legal e sabemos que existe. É assim que funciona um segundo argumento. Zack, estou a fazer sentido. Espero que tenhamos trabalhado muito com arrays, mas agora vou voltar para o canal de vazamento. Um é olhar para o tipo de segunda ordem onde podemos começar a usar este método índice Auth. 24. Como usar o indexOf() com cadeias de caracteres: Estou me divertindo muito. Espero que tenha aprendido muito. Vamos voltar para onde começamos. Lembre-se que dissemos que só existe em tipos de dois dólares. Este índice de método, o topo de primeira ordem que vimos como matrizes. Qual você acha que é o tipo de segunda ordem? Bem, está desenrolado, por favor. Então este slide que você está olhando aqui é muito importante, dá-lhe uma visão geral muito alto deste índice de método. Analisamos uma tonelada de exemplos com matrizes. Eu quero terminar esta palestra agora olhando para exemplos com a gente trabalhando com cordas. Começa a ver como funciona. Vai ser muito divertido. Confie em mim. Ei, uau, isso é muito legal. Acabámos de fazer matrizes, mas agora quero que fiquemos em cordas. Como é que isso funciona? E é realmente emocionante, você vai ver agora. Então vamos pular para isso. Legal. Certo, por onde começamos? A primeira coisa que quero mostrar-lhes aqui é se formos ao nosso console, removermos o console, o array. Vamos realmente limpar o console e vamos fazer o mesmo com a força. Bastante direto. Temos sido uma corda. Olhamos para o seu protótipo. Nós rolamos para baixo e eles, meus queridos alunos é índice deste é a segunda filha falando tecnologia JavaScript nos dá acesso a este método útil incrível. Digamos que vá, eu só queria provar a você que ele é encontrado neste tipo de filha também. Se voltarmos ao nosso editor de codificação, vamos começar a olhar para isso em ação. Então vamos deletar nossa Air Asia. Nós olhamos para as matrizes. Agora cria, não sei, uma frase. E é só dizer, olá, mundo. O universo. Muitas vezes sei o que há de errado com o meu tópico hoje. Te dá as boas-vindas. Estas são a frase que sabemos que este é do tipo string. Como é que sabemos isso? Todo o seu tipo de frase de log de console. E é bastante óbvio, mas sabemos que é uma corda. Porque sabemos que é uma corda. Sabemos que temos acesso ao índice de método. Então vamos definir uma variável chamada AIM, que é excesso de sentença. E vamos procurar alguma coisa. Vamos procurar a palavra. Bem-vinda. Vamos ver como mortes aqui. Por que você acha que seria o console sair para a tela e nós temos um número 26. Por que 26? Vamos começar a contar juntos. Sabemos que isto é índice 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25. E, claro, 26 é onde as boas-vindas começam. Muito, método muito útil é definir uma frase de chamada constante novamente. E vamos apenas dizer, Ei, você está aprendendo muito neste curso? Espero, senhor. Continue aprendendo. Então vamos começar a usar este índice desligado. Vamos começar a ficar campo mais intuitivo. Vamos definir uma nova variável JavaScript chamada palavra de pesquisa. Isto é o que queremos procurar. E digamos que queremos procurar o aprendizado de palavras. Podemos ver em primeiro lugar, direto do bastão, temos duas palavras, não é? Aprendizagem e aprendizagem. Então, tenha isso em mente. Então isso define uma nova variável chamada primeira vez. E vamos acessar nossa constante frase. Isso é acessar este índice de método. E vamos procurar, vamos procurar a palavra. Vamos registrar o primeiro tempo limite do console. É AIDS. E sabemos que são oito porque é o oitavo personagem desde o início é esta primeira palavra aprendendo. Mas agora, como acessamos a segunda palavra de aprendizagem? Como faríamos isso? Bem, deixa-me dar-te uma pista. Vamos utilizar o segundo argumento no método OLS índice. Então tudo o que temos que fazer é definir uma nova variável chamada segunda vez. Vamos acessar nossa sentença. Acabei de perceber uma frase impecável incorretamente. Então eles iriam, Vamos em excesso no Nick fora. O que queremos fazer agora é procurar a nossa palavra de busca, não é? Desta vez, queremos utilizar o ponto de partida. E por onde queremos começar com esse pensamento depois de ser fundado? Primeiro item, que é a primeira vez mais um. Então agora sabemos que ele vai procurar através de nossa matriz, mas apenas começando depois que passamos a primeira palavra de aprendizagem. Cu, espero que esteja fazendo sentido. Se sairmos do console, chegaremos ao 44, que é exatamente o que esperaríamos. Usando índice ou desta forma pode ser muito útil em seu código e você pode fazer um monte de coisas com ele. Eu não sei. Vamos dar-lhe um exemplo. Vamos definir uma variável chamada Solução 1. Vamos usar literais de modelo e digamos o índice do primeiro. E usaremos a palavra de pesquisa variável, palavra desde o início. É e vai ser a primeira vez. E se devolvermos isso para a tela, nós literalmente temos o registro do console para nós. O índice da primeira palavra de aprendizagem desde o início é oito. Quão incrível é isso? Nós combinamos um monte de coisas que combinamos literais modelo, combinando o sinal de dólar chaves para incorporar expressões e variáveis com em nosso modelo literal. É muito, muito legal e vai te ajudar muito ao longo do caminho. Claro, podemos fazer a mesma solução completa para a solução para o que acabamos de copiar isso em vez de fazer tudo de novo. Sabemos que esta é a segunda busca que tivemos desde o início não é a primeira vez. Segunda vez. E se devolvermos isso, teremos exatamente a mesma coisa. Mas agora estamos fazendo referência à segunda palavra de aprendizagem. Legal. Desculpe, eu sei que às vezes eu me empolgo e talvez eu esteja indo um pouco mais avançado do que você precisa saber agora. Mas confie em mim, isto vai ajudar-te a codificar a Coreia. E eu quero que você se torne um mestre em todas as coisas. Espero que esteja começando a fazer sentido. A outra coisa que quero mostrar é que vamos apagar tudo. Quero mostrar-lhe que o índice de é sensível a maiúsculas e minúsculas. Então, o que quero dizer, nós vamos, se tivermos uma palavra e a palavra é cão de taxa. Se agora consola log e acessamos nossa string de palavras, acessamos o índice de método e procuramos por cão. Sabemos que existe. Novamente, isso faria sentido, mas e se fizéssemos o mesmo? Mas sim, nós procuramos a palavra vermelho. Como você pode ver, é sensível a maiúsculas e minúsculas. Nós retornamos um negativo, AKA não existe. Se mudarmos o pequeno r para grande R, ele existe. Na verdade, o primeiro item em nossa matriz. Espero que todos estejam aprendendo na hora. A última coisa que eu quero passar é que 0 não avalia como verdadeiro e negativo não avalia como falso. Lembre-se se temos um pequeno r, é um negativo. Não coage a falso. É uma nuance estranha quando se trata deste método. Então, como é que te vou provar isto? Vai me deixar prová-lo para você usando JavaScripts, declaração IF. E o que eu quero competir como quero dizer, se é uma palavra, apodrecer, contém, dizer taxa. Se isso for avaliado como falso, então vamos executar este código que diz log do console. Este é o início correto. Início. Senão log console, este é o início errado. E agora você verá um problema. Você verá que por causa da cloaca, o que nos é devolvido é a resposta errada. Sabemos que o pequeno r não deve existir em nossa cadeia porque ele só tem a classificação R capital. Então, por que estamos batendo o segundo log de console em nossa declaração se? A razão é, é que o negativo não é avaliado como falso. Uma roda cheia batendo neste início e é a resposta errada. Portanto, o ponto que eu estou tentando fazer como em ao verificar se uma string específica existe dentro de outra string. A maneira correta é usar um negativo. Por exemplo, se substituirmos falso por negativo, por que isso não está funcionando? Menos 1 d vamos, temos a resposta correta desta vez. Pontos muito, muito importantes que acabei de compartilhar com você. Por favor, tenha isso em mente. Então z você tem. Loop, basta usar índice todos para os raios. Só usávamos com cordas. Discutimos várias maneiras que você pode usar uma GUI, saber que como cenas K que têm, sabemos que você não pode coagir em negativo 12 falso. E estes são tópicos muito avançados. Então não tome isso como garantido, comemore as pequenas vitórias. Mas de qualquer forma, vamos seguir em frente e te vejo na próxima palestra. 25. Concluindo nossa funcionalidade de texto de pesquisa: Uau, nós viemos muito longe enquanto Diana é realmente mão, eu sei que às vezes pode ser muito assustador passar por todas essas coisas porque você aprende coisas novas o tempo todo. Mas fique comigo. Você está quase, quase terminando. Você aprendeu uma tonelada de informações úteis. Então estamos sempre, deixe-me rolar até aqui. Lembra-se do que fizemos? Nós ouvimos as veias TIP na caixa de texto de entrada de rede. Como é uma caixa de entrada, obtemos uma propriedade value para pegar esse valor que usa digitado dentro convertido em minúsculas. Primeiro passo. Em segundo lugar, estamos pegando nossa lista de compras. Na verdade, são sempre elementos aliados. Lembrem-se, dentro de um e passem por eles. Para fazer isso, tivemos que converter netlist em um array. Usamos matriz do JavaScript a partir do método, porque é uma matriz. Agora podemos acessar isso para cada método. Você está fazendo loop através de cada elemento LI. Nós, então, queremos olhar para o primeiro item em que o elemento permaneceu. Mas se obtivermos nosso arquivo de índice, este elemento LI não é suficiente. Queremos que os elementos primeiro filho dentro do aliado, porque isso nos dará o item de supermercado real, digamos mixins. Em seguida, convertemos cada um desses itens em minúsculas. E agora, finalmente, queremos comparar se a entrada leva que o usuário digitado corresponde a cada item de supermercado. E para fazer isso, vamos usar o índice de método. Sabemos como funciona. E nós vamos estar usando JavaScripts, declaração IF, e o que queremos provar? Bem, queremos testar se este nome de mercearia tudo em minúsculas, se os takes, o usuário digitou, pode ser encontrado dentro dele. E isso leva o usuário digitado, colocamos em uma variável chamada texto. Nós rolamos para cima. Lembre-se, para encontrar uma variável JavaScript chamada texto, e isso é o que o usuário digitou. Então tudo o que queremos comparar estes, queremos descobrir se essa cadeia existe dentro de cada nome de mercearia. E lembre-se que não podemos usar a palavra false, temos que usar uma negativa. Então, nesse caso, se não existir, se o usuário digitar Coca-Cola, por exemplo, e estamos olhando para MLK, sabemos que MLK não contém o sabor Kirk e ele vai retornar negativo se for esse o caso. O que queremos que ele faça? Será que vamos querer agarrar todo esse elemento aliado em mim, que colocamos em uma variável chamada mercearia. Lembre-se em R para cada função, nós percorremos esses aliados e colocamos cada um em uma variável chamada mercearia. E tudo o que temos que fazer é acessar a propriedade de estilo. E queremos afetar sua propriedade de exibição. E vamos mudar isso para nenhum. Set fazendo cenas. Senão. Se sabemos que existe, sabemos que queremos acessar nossa propriedade de exibição estilo mercearia. E queremos que isso seja mostrado como um elemento de bloco. E os alunos da Medea devem trabalhar. Então, se formos para o nosso navegador e vamos digitar MLK, tudo em minúsculas. E olha para isso. Água do mar sénior. Isso é incrível. Vamos tentar outro. Vamos tentar cozinhar. Algo para beber. Não faz sentido. Vamos para o nosso código rapidamente. Arquivo de índice. Deve ser algo para beber. Poupe isso, vá aqui. E estamos literalmente terminados. Quão incrível é isso? Sério? Você tem que comemorar essas coisas. Você fez uma quantidade incrível. Olhe para todo este exemplo. Veja todas as razões pelas quais ouvimos reagir aos eventos com itens do DOM. Usamos métodos JavaScript em ambos os métodos, objetos nativos. Usamos todas essas coisas para interagir com o DOM. E este é um exemplo muito simples. Nem sequer temos um servidor web em segundo plano. Todos nós fizemos isso no front-end. Atrasamos ou paramos, impedimos comportamentos padrão de acontecer. Não há recongelamentos acontecendo ainda. Tudo acontecendo ao vivo. Podemos apagar itens. Podemos adicionar itens à lista, como um cão. E então podemos procurar por itens que procuram por um cão. E garantimos que esse caso fosse insensível. Se apagarmos dados, tudo o resto aparece. Nós também podemos ter pied Eu vou listar em um juramento como Olson nós percorremos um longo caminho. Espero que você tenha se divertido muito neste curso. E lembre-se, não temos que parar ainda. Podemos fazer pequenas melhorias nisso, que talvez eu inclua algumas etapas bônus, apenas tornando-o um pouco maior. Por exemplo, quando um usuário clica em Ed para um cão, não queremos levar ainda exibido nesta caixa de entrada. Podemos até mesmo adicionar talvez guias abaixo de maneira que o usuário pode ter um pouco de informação. Então, se eles tivessem poucas melhorias que podemos fazer para isso. Mas agora você percorreu um caminho incrivelmente longo, um 12 para saltar para cima e para baixo com emoção. Walden, vejo você em algumas palestras bônus. Olá. 26. Desligue a caixa de texto de entrada: A próxima coisa que quero que façamos é que descubra se consegue sozinho. Limpar que leva que o usuário digitou nessa caixa de entrada quando eles clicam no botão editar. Então, por exemplo, se o usuário digitar cão e clicar em Adicionar, não queremos que esse display de tenda do cão fazendo como vamos removê-lo. Pausa o vídeo aqui e em cinco segundos, eu mostro-te a solução. É muito, muito fácil dar uma chance. Espero, senhor. Então, o que estamos querendo fazer é quando o usuário clicou em um botão, quando esse evento foi disparado dentro de um, um claro que entrada de texto. Então temos que pegar nosso código. Aqui está o nosso HTML, isso é bom, nosso arquivo JavaScript. E nós fomos para a seção aqui chamada Adicionar Itens. E lembrem-se, quando o evento for disparado no final. Depois de ter agarrado o gosto dos usuários. Tudo o que queremos fazer agora é limpar o barramento de entrada. E para isso, tudo o que temos que fazer é acessar todo o nosso formulário. Dentro desse formulário, queremos acessar essa caixa de entrada, não é? Então, esse é o uso do seletor de consulta. Queremos procurar a caixa de entrada em si. Então queremos acessar seu valor. E é apenas sentar esse valor para nulo. Você vai concordar comigo, vamos lá. Isso é muito simples. Se voltarmos ao nosso navegador e falarmos cão, clicamos em Adicionar o rigor. Literalmente o limpou daquela caixa de entrada. Muito simples. Então você pode realmente ver como estamos melhorando em nosso cartão existente baseado. E é assim que muitos aplicativos web funcionam. Sabe, muita gente vai a um site e é tão complicado. Acham que era assim no início. Não é principalmente feito de uma forma fragmentada passo a passo. É o que estamos fazendo aqui. Basta abordar cada peça como ele sai onde a próxima coisa que eu quero olhar é eu quero adicionar abas na parte inferior. Só porque eu acho que é divertido e eu acho que pode ser uma curva oscilante e uma pena agradável para ter em sua cabeça. Vejo-te na próxima palestra. 27. Como melhorar nossa forma — o que eu quero que você crie: Cara, nós percorremos um caminho incrivelmente longo. Em primeiro lugar, eu só quero dizer Walden, eu estou muito, muito impressionado e, então, a idade de ficar comigo. O que vamos fazer agora? Quero que adicionemos estas abas no fundo da nossa foto, a lista de Hollich. E isso vai ser super prático para você em seus próprios aplicativos web que vai permitir que você dinamize cada show e oculte painéis imediatamente usando DOM puro e JavaScript para manipulação que é realmente, muito útil. Então, o que essas guias fizeram? Bem, em primeiro lugar, quando o usuário passa o mouse sobre eles, eu quero mudar o estilo. Você deveria saber como fazer isso. Agora, quando clicamos em uma guia, temos essa pergunta, o que você chama de macarrão falso? Em primeiro lugar, você pode notar que a resposta não é imediatamente mostrada. Nós embrulhamo-lo em um botão. E, claro, nós vamos estar ouvindo para um evento clique neste botão. E quando o botão é clicado, queremos que a resposta seja exibida. Então o usuário clica em um botão e temos o início e o impostor. Eu sei, eu sei que é uma piada de pai, mas felizmente para mim eu não sou um comediante. Então eles consideraram como a primeira guia. Claro, se você clicar, oh, na verdade antes de eu clicar no próximo passo, você percebe que a guia de piada de comida é agora um cinza mais escuro? Então, de alguma forma, precisamos aplicar estilo ao que odiar um selecionado. Agora, se clicarmos no outro painel, a aba que você tem que odiar agora é cinza mais escuro e outro painel abaixo é exibido. Tão honrado parece um exemplo muito simples, e é um exemplo simples, mas as habilidades que você aprende com isso serão muito, muito úteis para você. Então pense em como você pode colocar todas essas coisas juntas e eu vou te ver na próxima palestra. 28. Como criar as guias: Ok, então vamos começar a adicionar essas guias. Como fazemos isso? Armazenar pontos, é claro, é escrever o HTML juntos. Então vamos aqui. Vamos chegar ao fim desta terra aqui. E eu quero criar uma nova div. Lembre-se que precisamos olhar seção amigo para adicionar guias. Aqui vamos nós. Só para sabermos o que está acontecendo na instrução opcode muito bem. Aqui vamos nós. Eu quero criar um novo registro e isso basta chamar isso de fita de tabulação. Bastante simples. E você sabe, é útil. Vamos ter nosso navegador à direita para que possamos tipo de ver o que está acontecendo é nós codificamos e como eu quero que essas fitas funcionem? Vamos ter um título primeiro na lista de títulos. Basta definir a nossa batida dentro desta visão, todos os elementos e vamos dar-lhe uma classe de bater. E, claro, temos etiquetas LI abaixo dele. Eu coloco abaixo dele. Vamos dar uma piada a isto. Pode ser o que quiser e vamos fazer outro. E é sim. Você sabia que Diego eles estão fora de dois títulos. Deixe-me fazer isso e o conhecimento conta Bennett T quer adicionar esta filha atribuída a nulo. Não me preocupo com o que isto é. Eu vou explicar isso. Na verdade, vou ter decidido que vou fazer uma palestra inteira sobre isso. Então não entre em pânico ainda e eu vou ligar para essa filha. Clique. Ok, este recorte, podemos definir como quisermos. Eu só queria ser clicado porque obviamente ele vai disparar quando o usuário clicar nele. E eu queria valorizar a piada, mas eu quero o total de identificações, que você verá mais tarde, e é por isso que estou fazendo isso. Então é por isso que vou fazer a piada da hashtag. E vamos dar-lhe uma classe para que possamos estilizá-lo em nosso CSS. Podemos dizer, você sabe, por padrão queremos que algo esteja ativo. Smith, diz ela, vai ser para se divertir. E depois no segundo aliado, quero alternar outro painel inteiro. Então eu quero adicionar novamente algo ao seu atributo filha. Vou chamá-lo clicado novamente. E neste caso, vamos dar a ele um ID de fatos ou um valor de efeitos de ID. Verá como usamos isso. Não entre em pânico, por favor. Voltarei a ele. Então lá vamos nós. Estes são elemento UL. A próxima coisa que quero fazer é criar dois painéis. E esses painéis serão um produto total. Quando você clica em um batendo no painel um para mostrar quando você tomou que estão batendo os outros painéis vai mostrar. E vamos replicar o painel dentro de uma tag div. E o primeiro com que quero lidar é com esta piada, não é comida idiota? Então vamos dar uma identificação da piada e uma classe de painel. Isso faz sentido? E qual é a piada? Como se chama um macarrão falso? Nós salvamos isso. Você pode ver que estes são parágrafos e não se preocupe em estilizá-lo. Vamos entrar nisso e responder. Podemos colocar em um parágrafo abaixo aqui está em massa. E é uma rota brilhante. Isso é uma piada de pai. Então lá vamos nós. Esse é o nosso primeiro de eu me pergunto, em seguida, fazer uma segunda div para o nosso segundo painel. segundo painel vai ter identificação dos fatos. E também vai ter uma classe de painel. E vamos dar um parágrafo dizendo, isso é o que eu aprendi sobre comida esta semana. E abaixo disso, podemos apenas ter outro parágrafo com texto Lorem Ipsum, não importa o que seja ainda, salvamos isso. Você pode ver nossos cientistas parecendo terríveis, Legal. Então, a fim de melhorar, tipo de olhar e sentir isso, Vamos entrar em nosso CSS. E parou um pouco de espaçamento. Então vamos entrar em nossos estilos aqui. Vamos para o fundo. Que fez muito celestial. E vamos lidar agora sem guias, devemos começar bem, se formos para o nosso arquivo de índice e eu rolar para cima, nós classificamos todas as nossas guias nesta div com um ID de representante de tabulação. Então vamos para a nossa folha de estilo. E o que eu quero fazer é acessar nosso elemento UL de embrulho de ponta. Mas agora quero que definamos o que acontece quando passamos o mouse sobre cada um desses itens. Bem, em primeiro lugar, quero que o nosso fundo seja o mesmo que as outras cores que temos. Você pode ver que minha idéia realmente me ajuda. Temos da 43, 43. E o interminável muda a cor do texto para branco. Se passarmos o mouse sobre cada um desses itens, ele muda o plano de fundo e sua cor da fonte para branco. Um bem legal. E não se preocupe, vamos fazer isso parecer melhor. Vamos acessar nossa conta de novo, não rasgar Brca. E vamos afetar cada tag LI. Com sede. Quero que cada um seja um bloco inline. E desculpe se estou indo rápido, mas quero que sejamos muito rápidos. E porque este não é um curso sobre CSS. Em seguida, vamos adicionar um pouco de estofamento de odiá-lo. Nos homens, é incrível a rapidez com que essas coisas podem parecer muito melhores em um curto espaço de tempo. Muito, muito legal. Vamos mudar a cor de fundo. Vamos dar um pequeno raio de fronteira. Três pixels. Como é que isso parece? Parece bem legal. Vamos nos certificar de que temos um cursor aponta novamente. E então vamos dar um pouco de direitos de margem. Digamos em pixels. Lá vai você. Você tem que admitir que isso está parecendo muito legal. Vamos agora trabalhar em nossos painéis. Então, novamente, eu só quero que sejamos específicos por causa de regras em cascata CSS. Eu quero que peguemos este guia repre, então eu quero que nós peguemos nossos divs com classe de painel e essas notas estornais estrela. Em primeiro lugar, não vamos mostrar nada. Eles consideram Sheila ligada. Vamos dar alguma margem. Sabemos o que não vamos ver o que estamos fazendo. Sim, vamos fazer isso no final. Então vamos ver o que estamos fazendo. Eles consideram tão 0 a m. Vamos dar-lhe uma fronteira. Um pixel, sólido, triplo D. Como está? Aqui vamos nós. É meio que me faz pausar. Precisa de estofamento. Isso parece terrível. Lá vamos nós. E vamos dar uma curva, bordas, raio de fronteira, três pixels. Aqui vamos nós. São todos esses pequenos toques que nos fazem parecer muito melhores, certo? Essa pequena curva na fronteira faz com que pareça muito melhor. Ok, agora, vamos esconder tudo. Lá vamos nós, ele se foi. Quem, novamente, a partir de uma perspectiva de estilo com praticamente feito. Mas essas duas coisas que eu quero fazer, uma, uma unicidade para quando clicamos em qualquer piada de comida ou você sabia que em quer que nós o estilo um pouco diferente então você sabe, ele é excluído. Então vamos chamar isso de um ato de estilo. A segunda coisa que quero fazer é quando os painéis se abrem, precisamos adicionar dinamicamente uma classe a ela para mostrá-la ou ocultá-la. Então vamos adicionar um pouco mais CSS a este arquivo agora. Como mencionei, quero acrescentar um pouco mais. Vamos acessar nosso wrapper de guias. Pergunto-me, em seguida, sai do painel com o painel de classe. E como eu mencionei, vamos alternar essa classe ativa, certo? E o, tudo o que vai fazer quando estiver ativo é que vai exibi-lo. Vamos exibi-lo como um bloco. A última coisa que quero fazer é aceder à nossa mesa. E como mencionei, quero adicionar uma Classe Selecionada 2, que se uma guia for selecionada e tiver mudado sua cor de fundo para outra 139. 139, 139. Acho que isto deve funcionar. Então lá vamos nós. Fizemos o nosso CSS. Eu acho que se virmos erros, vamos encontrá-los ao longo do caminho e nós vamos corrigi-los. Se pegarmos nosso arquivo de índice, lembre-se, deixe-me expandir isso. Lembre-se do que fizemos. Adicionamos um invólucro para todos os nossos painéis dentro da retina. Temos uma seção de título que escrevemos esta tag UL. Demos a ele uma classe de batidas, e temos duas guias. E editamos esse atributo clicado filha. O que é isto? Vou falar disso em breve. Dentro definido nossos dois painéis com ele escondido por enquanto. É isso que queremos adicionar cláusulas. Queremos adicioná-los dinamicamente para que um seja mostrado e quando um usuário clica em um desses painéis que o mostra, quando ele clica no outro painel oculta o anterior e mostra o novo. Pense em como podemos fazer isso. Mas antes de entrarmos nisso, deixe-me dar uma palestra rápida sobre esse atributo da filha. Como funciona e por que temos isso? Vejo você agora. 29. Para que o atributo de dados é usado?: Tudo bem, o que é esse atributo filha? Bem, em primeiro lugar, HTML5 introduziu o atributo filha, e nos permite armazenar algumas informações extras em nosso elemento HTML sem nenhum significado particular. Reunião com, nós podemos tipo de armazenar informações em mim e podemos fazer com essa informação como nós gostamos desta regra não dura e rápida que devemos usá-lo apenas em uma circunstância. Então, sempre que você quiser adicionar dados ao HTML, esta é uma ótima maneira de fazê-lo. E não se preocupe, a sintaxe é super fácil. Tudo o que precisamos fazer é incluir um atributo com um nome que começa com filha. Lembre-se em nosso exemplo, lembre-se o traço de dados clicado, que era o nosso nome de atributo. E muito importante, lembre-se, a fim de acessá-lo dentro da necessidade de usar JavaScript para ler o valor deste atributo. Javascript e usar o atributo andam muito de mãos dadas. Imagens se livrar deste slide, flyaway Verde. E deixe-me apenas dizer que ler os valores com JavaScript quando queremos acessar esse atributo de dados também é muito fácil. Tudo o que precisamos fazer é usar a notação de pontos era a palavra-chave, filha Seat, objeto. É isso. Então tudo o que fazemos é pegar nossos elementos. Use a notação de pontos. Usamos a palavra-chave filhas. - Ele. Em seguida, use a notação de pontos novamente. E então, a fim de acessar esse valor, nós inserimos o nome da nossa filha. Lembre-se em nosso exemplo que acabamos de ver, colocamos o nome recortado. Isso meio que faz sentido? Então eu só queria aproveitar este breve momento para discutir este atributo filha sentar em um pouco mais de detalhes porque você pode não tê-lo visto antes. Mas como você verá na próxima palestra, ele tem um atributo muito, muito útil para acessar Cold Harbor como fazendo sentido. Se não, não se preocupe, vamos cortá-la nos próximos minutos. Vejo-te na próxima palestra. 30. Como adicionar o curso selecionado: Então, aqui estamos nós. Estamos ocupados começando a adicionar essas guias na parte inferior. Como você pode ver, o usuário clica, nada acontece. Então vamos saltar para o nosso editor de texto e vamos começar a digitar este JavaScript. Eu não quero que você pense em como você pode fazer isso. Primeiro, precisamos ouvir um ouvinte de eventos. Não precisamos determinar em qual guia o usuário clicou. E podemos até usar ou utilizar até balbuciar aqui. Sabemos que tudo vai borbulhar hoje. Lembra-se que lemos estes dois batedores. Eu vou, I tags em um elemento UL pai. Então utilize borbulhante de eventos. E, claro, quando é clicado, precisamos de uma maneira de usar o navegador, o DOM para mostrar a penalidade apropriada. Portanto, precisamos adicionar cláusulas dinamicamente. E como fazemos isso? Existem algumas maneiras, mas eu quero que você use a API de lista de classes. E lembre-se que há um método chamado toggle nisso, que eu quero que você use também. Então, pausar o vídeo aqui e nos próximos cinco segundos, vou começar a cortar a solução com você. Boa sorte. Ok, eu ouvi dizer que você deu uma chance. Isso é bom. Vou enviar dados como nosso arquivo de índice. Vamos sair do arquivo Dot JS. E vamos começar a codificar. Então vamos para aqui e talvez para o fundo, podemos colocá-lo de qualquer maneira em nosso arquivo. Vamos apenas copiar este cabeçalho. Então é bom estruturar seu código assim. Caso contrário, você vai esquecer. E é um site muito simples, então não precisamos de vários arquivos JavaScript. Normalmente você teria um monte de diferentes. Certo, então por onde começamos? Bem, em primeiro lugar, eu quero lidar com nossos títulos e listas. Apenas diga, vamos pegar a nossa marca UL pai. Lembre-se que temos nosso arquivo de índice. Podemos ver aqui que lemos nossos títulos neste elemento. Vamos voltar ao nosso JavaScript aqui e vamos primeiro pegar nossos cabeçalhos. Já sabemos como fazer isto, vocês são profissionais nisto. Vamos usar QuerySelector. E nós queremos pegar item com classe de bater em mim, ir aqui com dado AQL, essa classe de bater. Então lá vamos nós. Não é difícil, certo? A próxima coisa que quero fazer é definir nossos painéis também. Descreva nossos títulos e os meios de comunicação. Vamos pegar nossos painéis e é definida uma nova variável JavaScript chamada painéis. E sim, nós sabemos como fazer isso também. Seletor de consulta, tudo porque lembre-se aqui há mais de um painel. E nós demos a ele um painel de cada classe para obter nosso arquivo de índice. Demos a cada div, cada painel sua própria classe chamada painel. E novamente, não é difícil. Só vamos passo a passo. Ok, a próxima coisa que eu quero fazer é alternar entre a aba que os usuários clicaram porque eu quero estilizar diferente. Então isso basta dizer definir uma variável de item selecionado. Alternar entre classes. E eu estou indo um pouco mais rápido agora porque já fizemos esse tipo de coisas antes em desafios e exercícios anteriores. Então você deve ter uma idéia muito boa de como isso funciona. Mas vamos definir uma variável chamada painel selecionado. E começa definindo isso como nulo. Agora, como eu mencionei na introdução a isso, eu quero aproveitar a borbulha de eventos. Vamos anexar ouvinte de eventos no elemento pai UL. Como é que fazemos isso? Bem, sabemos que definimos isso em uma variável JavaScript chamada atingindo, hum, que existe um método chamado addEventListener. Você provavelmente vai deslizar isso é tão fácil que você comigo, tem paciência comigo. Vai ficar um pouco mais complicado. Estamos ouvindo o evento clique em mim. E, claro, queremos executar a nossa função de manipulador é apenas usar a sintaxe de seta. Muito, muito simples. A primeira coisa que quero fazer agora é que quero que encontremos, o que eu vou, eu ativei o TCC. Lembre-se do nosso arquivo de índice, que consideramos com estes dois tanques aliados. E quando o usuário toma um, queremos descobrir qual deles foi clicado e queremos adicionar um cluster dinamicamente. Aqui vamos nós. Vamos descobrir qual aliado desencadeou o evento e como fazemos isso? Você se lembra? Bem, muito simples. Nós definimos uma variável chamada target. Nós acessamos nosso evento, vamos executar isso, apenas manter a norma e nós não defini-lo como evento, nós apenas definimos como E. E cada evento que é emitido tem uma propriedade target e que nos diz qual item realmente acionou esse evento. E eles agora, vamos usar nossa filha define valor filha. Isso vai determinar qual painel exibimos para o usuário. Lembre-se, nós ligamos para Alice, clicamos. Pode chamá-lo do que quiser. E lembre-se, tivemos uma breve palestra explicando o que é esse atributo de dados. Então, sim, vamos buscá-lo. Eu vou filha vai ser o alvo do evento. E tem uma propriedade filhinha. Lembre-se que temos que usar esta palavra-chave e chamamos o nosso clicou. Temos que, é assim tão fácil. Legal. Ok, agora eu quero que nós adicionemos uma cláusula dinamicamente a cada uma dessas tags LI. Então, para fazer isso, eu quero usar a instrução IF do JavaScript. Quero que digamos, bem, se o alvo, certo, é uma daquelas etiquetas LI. Em primeiro lugar, o nome da etiqueta tem que ser igual a um aliado. Se o usuário clicar entre os botões ou à direita do botão e espaço vazio, eu quero que nada aconteça. Portanto, é apenas se o usuário clicar em uma dessas tags LI. Se esse for o caso, vamos remover o elemento selecionado no momento. E como fazemos isso? Bem, se o painel líquido, que acharíamos o acima como nulo, se o painel selecionado não for igual a nulo, então sabemos que está ativo. Sabemos que uma dessas tags está ativa. E nesse caso, o que queremos fazer é acessar nosso painel. Fomos afetar sua haste de garras. E queremos fazer isso acessando esta API de lista de classes. Já passamos por isso antes, mas tem uma propriedade chamada Toggle, que é muito, muito útil. E queremos alternar uma cláusula que acabamos de selecionar aleatoriamente. Ok, então agora nós removemos o elemento selecionado atualmente. O próximo passo é terminar no elemento atual selecionado. Queremos adicionar a classe selecionada. Então fomos pegar nosso lápis. E queremos definir isso como a tecnologia recém-clicada aliada. E a última coisa que queremos fazer é aceder a este painel de líquidos. Queremos acessar a lista de classes API x é uma propriedade chamada total. E, claro, queremos adicionar isso selecionado a ele. Isso faz sentido? Vamos para o nosso navegador. Vamos clicar em um e mover o mouse. E você pode ver nosso estilo CSS foi aplicado. Nós literalmente editamos isso dinamicamente e clicamos no outro muda. E para provar isso para vocês, o que eu posso fazer é abrir o console aqui, e agora vamos clicar neste botão degenerado. Podemos ver e editar essa classe chamada selecionada dinamicamente. Se clicarmos na piada de comida agora, é editar o selecionado perto disso e é removido do outro. Quão incrível é isso? Bem feito? E eu espero que você esteja acompanhando. Espero que esteja achando que foi mais intuitivo. Desculpe, eu sei que estou apressado. Mas já fizemos isso antes. Se tiver alguma pergunta, fico muito feliz em ajudar. Então, por favor, poste-os em perguntas e respostas mas espero que esteja fazendo sentido. Percorremos um caminho incrivelmente longo. Mas você sabe o que esta palestra está ficando longa, eu quero que você apenas pare, passe pelo que acabamos de aprender juntos. E na próxima palestra, por que terminamos? Vai ser épico. Eu vejo você agora. 31. Exibindo e escondendo nossos painéis quando a guia de título é clicada: Ok, vamos continuar com o nosso código. Estou me divertindo muito. Espero que você deva. O próximo passo que queremos fazer agora é encontrar a penalidade que queremos mostrar, certo? Porque estamos marcando as abas de bater, mas nada está mostrando por baixo dela. Como é que fazemos isso? Bem, ainda queremos estar dentro do bloco If, não é? Porque nós só queremos que isso aconteça, há painéis para mostrar se nós realmente clicamos em um elemento aliado. Mas agora é hora de encontrar o painel que queremos mostrar. E esses alunos de Medea é exatamente o motivo de precisarmos dos atributos da filha. É assim que vamos usá-lo, não define uma variável JavaScript chamada painel de destino. Porque esta é a penalidade do alvo. Se quisermos mostrar ao usuário, queremos acessar nosso objeto de documento na net. Queremos acessar um seletor de consulta. E a consulta selecionada o item que queremos procurar é o atributo filha. E lembre-se qual é o atributo de dados. É o item em que clicamos. Lembre-se, definimos isso como o alvo. Temos o nosso ficheiro de índice. Vai ser a primeira tabela aliada, segunda tag LI. Nós definimos um atributo de dados chamado clicked, e ele vai ter um valor de ID de gioco, fatos ideais. E nós demos o primeiro painel e a identificação da piada no segundo painel, identificação dos fatos. Então, espero que faça sentido por que precisávamos dele. Estamos literalmente encontrando seu painel agora que tem o ID de seu atributo de dados. Quem não se preocupe se você não entender bem, nós vamos discutir isso agora. A próxima coisa que quero fazer é passar por esses painéis, certo? E queremos ter certeza de que o painel de destino é a penalidade clara. E então queremos editar perto dele. E a classe que queremos adicionar é chamado yativo. Bem, se formos para o nosso CSS e rolamos para baixo aqui, a classe de ativo dá-lhe uma propriedade de exibição de bloco. É isso que queremos fazer. E se rolarmos para cima em nosso arquivo JavaScript, lembre-se que no topo definimos nossos painéis em uma variável chamada painéis. Nós só perguntamos todos aqueles divs com uma classe de painel. Não se perca em todos os detalhes. Tudo o que estamos fazendo agora, precisamos determinar se o painel selecionado atualmente é o exibido e permitir isso. Você provavelmente está pensando que você provavelmente pensando cliente, se precisamos começar a fazer loop através de painéis, precisamos converter nossa lista em um array. Então temos acesso ao para cada método. Se você sequer começou a pensar nessas linhas, sério, muito bem. Começando a me provar que você está se tornando um programador muito bom. Morcegos neste caso, é um pouco único. Se vamos rolar para cima aqui em nosso arquivo JavaScript e olharmos para a variável deste painel. Usamos um método de acesso chamado seletor de consulta todos. E a palavra-chave aqui é tudo. Quando usamos isso, não retornamos um HTMLCollection. Voltamos como romancista. E nenhuma lista é bastante única porque embora não seja um array fora da caixa, ele nos dá acesso ao para cada função, o que é realmente, realmente incrível. Significa que podemos ignorar a conversão da nossa lista para uma matriz. Eu faria sentido, mas vamos voltar ao nosso código. Certo, então o que fazemos? Bem, deixe-me apenas dizer aqui para ver você se lembra, podemos usar o para cada função porque seletor de consulta todos retorna uma lista de nós. Certo, espero que isso faça sentido. Tudo o que precisamos fazer então este X é a nossa lista de nós de painéis. Lembre-se, em mim, nós temos acesso a isso para cada método direto da caixa. E vamos percorrer cada painel. E ele não pode terminar seu uso a nova sintaxe de erro para definir nosso código. Tudo o que estamos querendo fazer é que queremos verificar sem penalidade é o mesmo que o painel alvo. E restante, o painel de destino é o item que queremos mostrar ao usuário. Se esse for o caso, o que queremos fazer é acessar nosso painel com A1 para acessar a API da lista de classes. E queremos editar a perda. E o custo que queremos adicionar como ativo. Certo? Acredita que é tão simples? - Outra coisa? O que queremos que aconteça? Isso é rochoso, provavelmente adivinhou. Ainda queremos acessar a API de lista de classes, mas desta vez queremos remover a classe de ativo. Espero que isso funcione porque caso contrário eu vou olhar como um mapeamento. Então aqui vamos nós, aqui eu vou abas. Vamos clicar na piada da comida. Uau, lá vamos nós. Vamos clicar no Dino. E bem, sim, tão legal. Por favor, celebrem seus sucessos. Pular para cima e para baixo, bombear alguma música. Nós fizemos muito, muito trabalho e isso está ficando bastante avançado também. Quão incrível é isso? Morcegos? Você sabe o que? Queria fazer mais uma coisa. Não quero que a resposta seja mostrada assim. Como se chama um macarrão falso? E no macarrão, é só mostrar o que é um 12. Por que não converte isso, tenta converter isso ou responde ao bastão? E quando o usuário clica no botão, apenas nomeado como a exibição inicial. Pense em como você pode fazer isso e por que não temos mais uma palestra? E eu vou te mostrar como nossa palavra digitou e é muito, muito rápido. Você vai ver, isso é rápido e tarefa. Vejo você na próxima palestra. 32. Adicione um botão dinâmico: Como eu mencionei, eu quero agora não mostrar isso diretamente. Eu quero que nós adicionemos um botão quando o usuário clica em um botão em um Hahn diz exibido no HTML SCADA aqui, e vamos rolar para baixo para chamá-lo de macarrão falso é excluir este parágrafo. Eu quero adicionar agora um bastão e isso nos dá botão e ID de estrangeiros mostram em aparelhos de TV o que ele faz. E nós podemos apenas ter a palavra resposta aqui. E vamos ter a nossa resposta abaixo de nós. Isso é colocá-lo em uma tag de parágrafo e dar-lhe um ID de início. Como é que o escoamento pode estar vazio se vamos ao nosso navegador e clicamos na piada de comida, lá vamos nós. Aí está o nosso botão. É muito simples, mas, obviamente, agora, quando temos bilhetes, nada acontece. Então, como iríamos fazer isso? Bem, este é um JavaScript entra na imagem. Vamos voltar ao nosso editor de codificação. Vamos para o nosso arquivo JavaScript e leads agora. Onde é que eu estou? Basta rolar até aqui. Sim, já não temos de estar com o evento inet click. Então descarte todo esse código e agora é lidar com botão para exibir o início. Vai ser muito simples. A primeira coisa que quero fazer é pegar nosso botão. Vamos chamar-lhe Botão de Início. Nós sabemos como fazer isso. Documento. Obter elemento por ID. E a identificação que demos foi o início do programa. Então lá vamos nós. Temos o nosso botão. Tudo o que precisamos fazer agora é adicionar um ouvinte de eventos diretamente, então sabemos como fazer isso também. Nós acessamos ATD chamado addEventListener. Com isso, queremos ouvir os eventos de clique. E quando o evento clique é acionado, vamos disparar um manipulador que chamamos início é defini-lo usando palavra-chave function do JavaScript, que chamamos now onset. Vai dar-nos o evento. Na verdade, não precisamos disso neste caso. Então deixe-me realmente deletar isso. O que queremos fazer neste encarregado? Pense sobre isso. Bem, em primeiro lugar, queremos adicionar uma classe a este parágrafo. Ok, eu quero editar dinamicamente, e eu também vou querer mudar seu conteúdo de texto. Eu quero dar a resposta, e então eu quero esconder o botão. Então vamos voltar ao nosso arquivo JavaScript e vamos fazer isso. Então, em primeiro lugar, vamos acessar nosso documento, obter elemento por ID. Isso é bom. Aquele parágrafo que nós demos uma idéia de início. E vamos adicionar uma cláusula mais listas. Dentro dessa API temos uma propriedade add ou método e queremos dar-lhe uma classe de açúcar. E não se preocupe, vamos estilizá-lo agora. Vamos fazer a mesma coisa, mas agora o que eu quero fazer é mudar isso leva conteúdo. Então obter elemento por ID. Queremos obter o parágrafo. Queremos mudar o seu conteúdo takes. E queremos que seja o início, que é um IM, macarrão no passado. Aqui vamos nós. Então, por último, vamos pegar nosso botão de resposta. Vamos sair da propriedade style, sua propriedade de exibição e defini-la como none. Então, se formos ao nosso navegador agora, clicamos na piada de comida. Temos um botão, clicamos nele e temos o início, woohoo. Isso é, vamos discá-lo apenas para torná-lo um pouco mais bonito. Sabemos que adicionamos esta lista de classes. Vamos apenas clausula chamada “menor”. Então, tudo o que temos a fazer é ir para o nosso styles.css. - Sim. E podemos sair do show. É assim tão fácil. Podemos mudar sua cor de fundo. Vamos fazer uma bela cor amarelada. Espero que isso fique bonito. Podemos definir sua largura, um 100 pixels. Podemos dar-lhe um pouco de estofamento. E vamos dar uma borda só para acabar com isso. Amarelo sólido. Eu quero um pouco mais escuro, a fronteira. Isto, vamos para o nosso navegador. E lá vamos nós. Parece bem certo. Então, se nós atualizar piada comida, o que fazer macarrão efeito legal. Se o usuário clica na resposta, somos jogados de volta para nós, um impostor. Não acredito o quão longe chegamos com uma árvore. Basta continuar melhorando nossa página passo a passo, sério, e realmente tão divertido, espero que você esteja se divertindo porque você realmente aprendeu um monte de informações úteis que você pode usar para aplicar aos seus aplicativos web. Estou super animado, Walden, obrigado por ficar comigo. Espero que tenha gostado muito deste curso. Se você tiver alguma dúvida, publique-as em perguntas e respostas, estou aqui para ajudá-lo e continuar, mantenha-se motivado. E vejo-te na próxima palestra. 33. Curso e de série de produtos — BEM DEMAIS: Quem poderia realmente ser? - Isso? Todas as coisas boas acabam, certo? Sera. Sera, você fez tão bem, liderar e tarde. Qual é a versão feminina das pernas? A direita. Senhoras e senhores, muito obrigado, meus queridos alunos. Vamos ficar comigo nesta série inteira. Se esta é a primeira classe que ouviu falar da minha. Obrigado. Obrigado pelos esportes. Eu me divertia muito porque nessa perda, construímos uma lógica inteira juntos. Realmente estava bem. E isso se aplica muitas, se não todas, das técnicas que eu ensinei em aulas anteriores sobre esta série DOM. Bem, realmente tem sido legal, não é? E não tome como garantido. Agora você sabe o que é a cúpula. Nós sabemos o que é a bomba, não há tipo de falar sobre a BOM, a bomba, você sabe como o DOM é diferente do JavaScript e Python. Agora você sabe como acessar o DOM. Lembra dos métodos do X? Você sabe como atravessar em um movimento no DOM. Lembre-se de usar os relacionamentos pai, filho, irmão de nós, você sabe como os eventos funcionam, de onde eles vêm. Você sabe como anexar ouvintes de eventos à página. Você sabe como escrever JavaScript para reagir a essas veias certamente. E, claro, nesta classe você agora sabe como construir um projeto. Então eu realmente espero que você tenha aprendido uma tonelada neste curso, mas levei muito tempo para aprender o que eu sentia neste circuito. Hubbard vai mesmo propor um hub? Ele realmente torna seu processo de aprendizagem na indústria de desenvolvimento web muito, muito mais rápido. Muito obrigado por todo o seu apoio. Muito obrigada. Por favor, deixe um comentário se você gostou do curso, se você não tiver, deixe-me saber bem e eu vou tentar melhorar. Não sou perfeito longe disso. E antes de terminarmos, lembre-se de tentar a sua mão na tarefa. Desta forma algumas tarefas escrevem, esta foi uma tarefa. Divirta-se muito e espero vê-lo um dia em uma futura aula minha. Obrigado. Obrigado. Obrigado. E áudios.